/* =======================================================================
   Project Creator — /project/:id/creator
   TikTok / Instagram × Nintendo: a light, friendly play → tweak → share
   surface for everyday users. It reuses the Project Complete view markup and
   wiring, so EVERYTHING here is scoped to `.project-creator-view` /
   `body.project-creator-route`. The existing Studio (/project/:id) and the
   legacy complete view (/project/:id/complete) are never touched.

   Layout model
   ------------
   view (flex column, 100dvh)
   ├─ header        : back · title+state+plays               (sticky, full width)
   ├─ main (flex:1) : preview fills the space, centred   (dock space reserved)
   ├─ dock          : 5 tiles (4 tools + ゲームページ)        (fixed, bottom)
   ├─ scrim         : dim layer when a sheet is open      (injected by module)
   └─ tool panes    : bottom sheets that slide up         (one active at a time)
   ======================================================================= */

/* Local aliases mapped to the global design tokens (style.css :root) so the
   brand palette stays single-sourced. Only neutrals with no global token are
   literal. Scoped to the creator surface — no global leakage.
   .pcr-token-scope: opt-in scope for surfaces that reuse creator components
   OUTSIDE the creator route (game.html mounts the share-capture pane +
   recording studio). Fallback literals mirror style.css :root because
   game.html does not load style.css. background:#fff stays body-only. */
body.project-creator-route,
.pcr-token-scope {
  --pcr-red: var(--red, #FF3B30);
  --pcr-red-light: var(--red-light, rgba(255, 59, 48, 0.1));
  --pcr-ink: var(--gray-900, #171717);
  --pcr-g100: var(--gray-100, #F5F5F5);
  --pcr-g200: var(--gray-200, #E5E5E5);
  --pcr-g600: var(--gray-600, #525252);
  --pcr-g300: #d4d4d8;          /* grab handle (no global token) */
  --pcr-muted: #6f7378;         /* labels — AA contrast on white */
  --pcr-line: #ececef;          /* hairline */
  /* one radius scale (was 12/13/14/15/16/22/24 ad hoc) — quieter chrome */
  --pcr-r-md: 14px;             /* tiles · chips · fields */
  --pcr-r-lg: 16px;             /* primary CTAs · share tiles */
  --pcr-r-sheet: 22px;          /* bottom sheets */
  --pcr-r-hero: 24px;           /* the game preview card */
  --pcr-r-pill: 999px;
  /* one motion voice: standard ease for chrome, spring reserved for juice */
  --pcr-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --pcr-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.project-creator-route { background: #fff; }

/* hide any global bottom nav while the creator surface is shown */
body.project-creator-route #bottomNav { display: none !important; }

/* ---- view shell : flex column so the preview fills space above the dock -- */
.project-complete-view.project-creator-view {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: #fff;
  color: var(--pcr-ink);
}

/* ---- top bar : back · brand · public-link --------------------------- */
.project-creator-view .project-complete-header {
  position: sticky;
  top: 0;
  z-index: 30;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 58px;
  background: #fff;
  border-bottom: 1px solid var(--pcr-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* MOBILE-ONLY: ノッチ回避（2026-07-02）。ネイティブ WebView はステータスバー裏まで
   フルブリード描画されるため、safe-area 上インセットを足さないと戻るボタンが
   ノッチに埋まって押せない。--safe-top は style.css :root で web=0px /
   html.native-app=env(safe-area-inset-top) — Web 側には一切影響しない。
   min-height も同量伸ばし、コンテンツ領域は従来の 58px を維持する。 */
html.native-app .project-creator-view .project-complete-header {
  padding-top: var(--safe-top);
  min-height: calc(58px + var(--safe-top));
}
.project-creator-view .project-complete-next { display: none; } /* drop the ambiguous red arrow */
.project-creator-view .project-complete-back { border-color: var(--pcr-g200); }
.project-creator-view .project-complete-brand { font-size: 1.02rem; }

/* ---- main : fills remaining height; preview centred inside ---------- */
.project-creator-view .project-complete-main {
  flex: 1 1 auto;
  min-height: 0;
  width: min(100%, 520px);
  margin: 0 auto;
  /* reserve the fixed dock (no hard-coded header height → device-agnostic) */
  padding: 10px 14px calc(98px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.project-creator-view .project-complete-hero-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-creator-view .project-complete-visual {
  /* fill the column by height; 9:16 derives the width (capped to fit) */
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: var(--pcr-r-hero);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.34);
}
.project-creator-view .project-complete-expand {
  width: 40px;
  height: 40px;
  border-radius: var(--pcr-r-md);
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  border: none;
  backdrop-filter: blur(4px);
}

/* the logical panel is just a sheet container now — drop its card box */
.project-creator-view .project-complete-panel { display: contents; }
.project-creator-view .project-complete-kicker,
.project-creator-view #projectCompleteTitle { display: none; }

/* ---- bottom dock : friendly icon tiles ----------------------------- */
.project-creator-view .project-complete-tool-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: min(100%, 520px);
  z-index: 40;
  display: flex;
  justify-content: space-around;
  gap: 4px;
  padding: 9px 8px calc(11px + env(safe-area-inset-bottom));
  background: #fff;
  border: none;
  border-top: 1px solid var(--pcr-line);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}
.project-creator-view .project-complete-tool-dock button {
  /* content-aware width: long locale labels (Página pública, 공개 페이지)
     get the room they need instead of being squeezed into equal fifths */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  background: none;
  border: none;
  color: var(--pcr-muted);
  cursor: pointer;
}
.project-creator-view .project-complete-tool-dock button span {
  width: 46px;
  height: 46px;
  border-radius: var(--pcr-r-md);
  background: var(--pcr-g100);
  color: var(--pcr-ink);
  display: grid;
  place-items: center;
  font-size: 0; /* hide the legacy text glyph if the SVG isn't injected */
  transition: background 0.15s var(--pcr-ease), color 0.15s var(--pcr-ease), transform 0.12s var(--pcr-ease);
}
.project-creator-view .project-complete-tool-dock button span svg { width: 23px; height: 23px; }
.project-creator-view .project-complete-tool-dock button strong {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap; /* longer locale labels (공개 페이지 etc.) stay one line */
}
.project-creator-view .project-complete-tool-dock button:active span { transform: scale(0.93); }
.project-creator-view .project-complete-tool-dock button.active { color: var(--pcr-ink); }
.project-creator-view .project-complete-tool-dock button.active span {
  background: var(--pcr-red);
  color: #fff;
}

/* ---- scrim (injected by the module) -------------------------------- */
.project-creator-view .project-creator-scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(20, 20, 25, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--pcr-ease);
}
.project-creator-view.tool-open .project-creator-scrim {
  opacity: 1;
  pointer-events: auto;
}

/* ---- image editor (shared #imageEditorModal) : one save action -------
   The creator's quick editor needs exactly one decision: 保存. The copy
   path returns ONLY when overwrite is impossible (SVG), so there is never
   a dead end. The Studio keeps both buttons (this is route-scoped). */
body.project-creator-route #imageEditorModal #saveEditedImageCopy { display: none; }
body.project-creator-route #imageEditorModal .e2-actions:has(#saveEditedImage:disabled) #saveEditedImageCopy { display: inline-flex; }

/* ---- ONE sheet surface, reused everywhere ---------------------------
   `.pcr-sheet-surface` is applied by the module to every tool pane AND to
   the publish-settings panel, so all six surfaces share one definition:
   bottom sheet on mobile, right drawer on desktop (see the media query).
   Positioning stays with each host; only the surface itself lives here. */
body.project-creator-route .pcr-sheet-surface {
  width: min(100%, 520px);
  display: grid;
  gap: 14px;
  background: #fff;
  border-radius: var(--pcr-r-sheet) var(--pcr-r-sheet) 0 0;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.16);
  max-height: 78dvh;
  overflow-y: auto;
  animation: pcrSheetUp 0.3s var(--pcr-ease);
}
/* tool panes: fixed to the bottom (the surface class does the rest) */
.project-creator-view .project-complete-tool-pane {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  z-index: 50;
}
.project-creator-view .project-complete-tool-pane[hidden] { display: none; }
@keyframes pcrSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
/* grab handle */
.project-creator-view .project-complete-tool-pane::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--pcr-g300);
}
.project-creator-view .project-complete-tool-pane > *:first-child { margin-top: 4px; }

/* sheet headings */
.project-creator-view .project-complete-tool-head h2,
.project-creator-view .project-complete-adjust-intro h2 {
  font-size: 1.08rem;
  font-weight: 800;
  margin: 0;
}
.project-creator-view .project-complete-tool-head p,
.project-creator-view .project-complete-adjust-intro p,
.project-creator-view .project-complete-copy {
  font-size: 0.82rem;
  color: var(--pcr-g600);
  margin: 4px 0 0;
  line-height: 1.5;
}

/* ---- adjust sheet : chips + free text + submit --------------------- */
.project-creator-view .project-complete-inline-adjust-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.project-creator-view .project-complete-inline-adjust-suggestions button {
  background: var(--pcr-g100);
  border: 1.5px solid transparent;
  border-radius: var(--pcr-r-md);
  padding: 11px 14px;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--pcr-ink);
  cursor: pointer;
}
.project-creator-view .project-complete-inline-adjust-suggestions button[aria-pressed="true"],
.project-creator-view .project-complete-inline-adjust-suggestions button.selected,
.project-creator-view .project-complete-inline-adjust-suggestions button.active {
  background: var(--pcr-red-light);
  border-color: var(--pcr-red);
  color: var(--pcr-red);
}
.project-creator-view .project-complete-inline-adjust-field { display: grid; gap: 6px; }
.project-creator-view .project-complete-adjust-field span,
.project-creator-view .project-complete-inline-adjust-field span,
.project-creator-view .project-complete-title-field span {
  font-size: 0.8rem;
  color: var(--pcr-muted);
  font-weight: 700;
}
.project-creator-view .project-complete-inline-adjust-field textarea,
.project-creator-view .project-complete-title-field input {
  width: 100%;
  border: 1.5px solid var(--pcr-g200);
  border-radius: var(--pcr-r-md);
  padding: 12px;
  font: inherit;
  font-size: 0.9rem;
  resize: none;
}
.project-creator-view .project-complete-inline-adjust-field textarea:focus,
.project-creator-view .project-complete-title-field input:focus {
  outline: none;
  border-color: var(--pcr-red);
}

/* primary sheet CTAs (adjust submit) */
.project-creator-view .project-complete-inline-adjust-submit,
.project-creator-view .project-complete-adjust-submit {
  width: 100%;
  background: var(--pcr-red);
  color: #fff;
  border: none;
  border-radius: var(--pcr-r-lg);
  padding: 15px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}

/* ---- image sheet : asset grid -------------------------------------- */
.project-creator-view .project-complete-asset-workbench { display: grid; gap: 14px; }
.project-creator-view .project-complete-asset-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.project-creator-view .project-complete-asset-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--pcr-muted);
  font-size: 0.82rem;
  padding: 18px 0;
}
.project-creator-view .project-complete-asset-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--pcr-r-md);
  overflow: hidden;
  background: var(--pcr-g100);
  border: 1px solid var(--pcr-g200); /* hairline: just enough to hold white images */
  padding: 0;
  cursor: pointer;
}
.project-creator-view .project-complete-asset-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-creator-view .project-complete-asset-tile.active {
  border-color: var(--pcr-red);
  box-shadow: 0 0 0 2px var(--pcr-red);
}
/* selected-asset editor — unused in Creator (see image-tool override below) */
.project-creator-view .project-complete-asset-editor { display: grid; gap: 12px; }
.project-creator-view .project-complete-asset-editor.hidden { display: none; }
.project-creator-view .project-complete-selected-asset {
  display: flex;
  align-items: center;
  gap: 12px;
}
.project-creator-view .project-complete-selected-asset img {
  width: 56px;
  height: 56px;
  border-radius: var(--pcr-r-md);
  object-fit: cover;
  background: var(--pcr-g100);
}
.project-creator-view .project-complete-selected-asset strong { display: block; font-size: 0.9rem; }
.project-creator-view .project-complete-selected-asset span { font-size: 0.76rem; color: var(--pcr-g600); }
.project-creator-view .project-complete-asset-actions {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.project-creator-view .project-complete-asset-actions::-webkit-scrollbar { display: none; }
.project-creator-view .project-complete-asset-actions button {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 60px;
  background: var(--pcr-g100);
  border: none;
  border-radius: var(--pcr-r-md);
  padding: 11px 8px;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--pcr-ink);
  cursor: pointer;
}
.project-creator-view .project-complete-asset-actions button[aria-pressed="true"] {
  background: var(--pcr-red);
  color: #fff;
}

/* ---- text sheet ---------------------------------------------------- */
.project-creator-view .project-complete-title-field { display: grid; gap: 6px; }
.project-creator-view .project-complete-links {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.project-creator-view .project-complete-links a {
  color: var(--pcr-muted);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

/* ---- publish sheet (legacy in-pane button; Creator opens the modal directly) */
.project-creator-view .project-complete-publish-settings {
  width: 100%;
  background: var(--pcr-ink);
  color: #fff;
  border: none;
  border-radius: var(--pcr-r-lg);
  padding: 15px;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
}

/* ---- share sheet : round tiles (brand colours come from base CSS) --- */
.project-creator-view .project-complete-actions { display: grid; gap: 12px; }

.project-creator-view .project-complete-share-activity {
  display: grid;
  gap: 10px;
  padding: 13px 0 2px;
  border: 0;
  border-top: 1px solid var(--pcr-line);
  border-radius: 0;
  background: transparent;
}

.project-creator-view .project-complete-share-activity[data-state="played"],
.project-creator-view .project-complete-share-activity[data-state="reacted"] {
  padding-top: 13px;
  border-top: 2px solid var(--pcr-red);
  background: transparent;
}

.project-creator-view .project-complete-share-activity-head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.project-creator-view .project-complete-share-activity-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--pcr-g100);
  color: var(--pcr-muted);
  font-size: 0.92rem;
  font-weight: 900;
}

.project-creator-view .project-complete-share-activity[data-state="played"] .project-complete-share-activity-icon,
.project-creator-view .project-complete-share-activity[data-state="reacted"] .project-complete-share-activity-icon {
  background: var(--pcr-red);
  color: #fff;
}

.project-creator-view .project-complete-share-activity-head strong {
  display: block;
  color: var(--pcr-ink);
  font-size: 0.94rem;
  line-height: 1.15;
  font-weight: 900;
}

.project-creator-view .project-complete-share-activity-head p {
  margin: 3px 0 0;
  color: var(--pcr-muted);
  font-size: 0.76rem;
  line-height: 1.35;
  font-weight: 700;
}

.project-creator-view .project-complete-share-activity-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding-left: 37px;
}

.project-creator-view .project-complete-share-activity-metric {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 5px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

.project-creator-view .project-complete-share-activity-metric-link {
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.project-creator-view .project-complete-share-activity-metric-link:hover,
.project-creator-view .project-complete-share-activity-metric-link:focus-visible {
  background: transparent;
  color: var(--pcr-red);
  box-shadow: none;
  outline: none;
}

.project-creator-view .project-complete-share-activity-metric-link.is-disabled {
  pointer-events: none;
  cursor: default;
}

.project-creator-view .project-complete-share-activity-metrics strong {
  color: var(--pcr-ink);
  font-size: 1.02rem;
  line-height: 1;
  font-weight: 950;
}

.project-creator-view .project-complete-share-activity-metrics em {
  color: var(--pcr-muted);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 850;
}

.project-creator-view .project-complete-share-activity-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 17px;
  margin-left: 37px;
}

.project-creator-view .project-complete-share-activity-link {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  justify-self: start;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pcr-ink);
  text-decoration: none;
  font-size: 0.73rem;
  line-height: 1.2;
  font-weight: 900;
}

.project-creator-view .project-complete-share-activity-link:hover,
.project-creator-view .project-complete-share-activity-link:focus-visible {
  color: var(--pcr-red);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

/* 「公式に見てもらう」(赤ペン先生) — 分析リンクと同じテキストアクション形だが、
   完成直後に一番押してほしい"招待"なので常時 DreamCore レッドで少しだけ目立たせる。 */
.project-creator-view .project-complete-share-activity-review {
  color: var(--pcr-red);
  cursor: pointer;
}
.project-creator-view .project-complete-share-activity-review:disabled {
  cursor: default;
}
/* 依頼済みは落ち着いたグレーのステータス表示に。 */
.project-creator-view .project-complete-share-activity-review.is-requested {
  color: var(--pcr-ink-soft, #64748b);
}

.project-creator-view .project-complete-share-notification-toggle {
  min-height: 0;
  width: fit-content;
  padding: 1px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pcr-muted);
  font-size: 0.72rem;
  line-height: 1.2;
  font-weight: 850;
  cursor: pointer;
}

.project-creator-view .project-complete-share-notification-toggle:hover,
.project-creator-view .project-complete-share-notification-toggle:focus-visible {
  background: transparent;
  color: var(--pcr-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.project-creator-view .project-complete-share-notification-toggle[disabled] {
  opacity: 0.55;
  cursor: progress;
}

/* ============================================================
   プレイ動画（クリップ）ヒーロー — 共有モーダルの主役
   可士和: 赤い主ボタンは1つ、クリップがポスター / 任天堂: 遊べば撮れている
   マーリ: クリップは生のまま見せる / マガー: 空状態は誘い
   ============================================================ */
.project-creator-view .project-complete-share-capture {
  display: grid;
  gap: 12px;
  padding: 2px 0 6px;
}
/* render が「素材なし・撮影導線なし」でペインを丸ごと畳むためのガード
   （上の display:grid が hidden 属性に勝ってしまうため必須） */
.project-creator-view .project-complete-share-capture[hidden] { display: none !important; }

/* クリップは「添付」— サムネ+チェックの1行（実機報告 2026-07-02: ヒーローが
   大きすぎてシェア画面に見えない、動画なしシェアができない、の同時修正） */
.project-creator-view .project-complete-share-capture-attach-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.project-creator-view .project-complete-share-capture-media {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 12px;
  background: #101114;
  box-shadow: 0 4px 14px rgba(10, 12, 16, 0.16);
}

.project-creator-view .project-complete-share-capture[data-capture-layout="wide"] .project-complete-share-capture-media {
  width: 170px;
  aspect-ratio: 16 / 9;
}

.project-creator-view .project-complete-share-capture[data-capture-layout="square"] .project-complete-share-capture-media {
  width: 120px;
  aspect-ratio: 1 / 1;
}

.project-creator-view .project-complete-share-capture-attach-body {
  min-width: 0;
  display: grid;
  gap: 10px;
  justify-items: start;
  align-content: center;
}
.project-creator-view .project-complete-share-capture-attach[hidden] { display: none !important; }

.project-creator-view .project-complete-share-capture-attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--pcr-ink);
  cursor: pointer;
}
.project-creator-view .project-complete-share-capture-attach input {
  width: 18px;
  height: 18px;
  accent-color: var(--pcr-red);
}
.project-creator-view .project-complete-share-capture-attach input:disabled + span {
  color: var(--pcr-muted);
}

/* 撮影中は枠が赤く呼吸する（任天堂のカーソルリング） */
.project-creator-view .project-complete-share-capture[data-state="recording"] .project-complete-share-capture-media {
  animation: pcr-clip-recording 1.6s ease-in-out infinite;
}
@keyframes pcr-clip-recording {
  0%, 100% { box-shadow: 0 0 0 3px var(--pcr-red), 0 10px 30px rgba(10, 12, 16, 0.18); }
  50% { box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.35), 0 10px 30px rgba(10, 12, 16, 0.12); }
}

.project-creator-view .project-complete-share-capture-media img,
.project-creator-view .project-complete-share-capture-media video,
.project-creator-view .project-complete-share-capture-media [data-share-capture-placeholder] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.project-creator-view .project-complete-share-capture-media img,
.project-creator-view .project-complete-share-capture-media video {
  display: block;
  object-fit: cover;
}

.project-creator-view .project-complete-share-capture-media video:not([hidden]) {
  cursor: pointer;
}

.project-creator-view .project-complete-share-capture-media img[hidden],
.project-creator-view .project-complete-share-capture-media video[hidden],
.project-creator-view .project-complete-share-capture-media [data-share-capture-placeholder][hidden] {
  display: none !important;
}

/* 空状態 = 誘い（マガー）。破線の受け皿 + テストプレイへの一手 */
.project-creator-view .project-complete-share-capture-media .project-complete-share-capture-empty {
  /* 親の [data-share-capture-placeholder] ルールが inset:0 + width/height:100% を
     当てるため、margin ではなく inset で内側に寄せる（margin だと右下がはみ出す。
     実機ズレ報告 2026-07-02 の修正） */
  position: absolute;
  inset: 10px;
  width: auto;
  height: auto;
  margin: 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 6px;
  border-radius: 10px;
  border: 2px dashed rgba(255, 255, 255, 0.22);
}

.project-creator-view .project-complete-share-capture-empty p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.6rem;
  line-height: 1.45;
  font-weight: 800;
}
.project-creator-view .project-complete-share-capture-empty p[hidden] { display: none !important; }
.project-creator-view .project-complete-share-capture-empty { place-items: center; }

.project-creator-view .project-complete-share-capture-note {
  margin: -2px 0 0;
  color: var(--pcr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.project-creator-view .project-complete-share-capture-actions {
  display: grid;
  gap: 10px;
  justify-items: center; /* チェックはシェアの直下・中央（従属オプションの位置） */
  width: 100%;
}
.project-creator-view .project-complete-share-capture-actions .project-complete-share-capture-primary {
  width: 100%;
  max-width: none;
}
.project-creator-view .project-complete-share-capture-attach-label[hidden],
.project-creator-view .project-complete-share-capture-primary[hidden],
.project-creator-view .project-complete-share-capture-actions label[hidden] { display: none !important; }

/* 主ボタンだけが赤（可士和: 次の一手を1つに絞る）。
   OS シェアシートが開く操作であることをアイコンで予告（マーリ: 正直なボタン） */
.project-creator-view .project-complete-share-capture-primary::before {
  content: '';
  width: 15px;
  height: 15px;
  margin-right: 7px;
  flex-shrink: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='m7 8 5-5 5 5'/><path d='M5 13v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5'/></svg>") center/contain no-repeat;
}
.project-creator-view .project-complete-share-capture-primary:disabled::before { display: none; }
.project-creator-view .project-complete-share-capture-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 300px;
  min-height: 46px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  background: var(--pcr-red);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s;
}
.project-creator-view .project-complete-share-capture-primary:not(:disabled):hover { background: #e6342a; }
.project-creator-view .project-complete-share-capture-primary:not(:disabled):active { transform: scale(0.96); }
.project-creator-view .project-complete-share-capture-primary:disabled {
  background: var(--pcr-g100);
  color: var(--pcr-muted);
  cursor: not-allowed;
}

.project-creator-view .project-complete-share-capture-save {
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--pcr-line);
  border-radius: 999px;
  background: #fff;
  color: var(--pcr-ink);
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}
.project-creator-view .project-complete-share-capture-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.project-creator-view .project-complete-share-capture-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.project-creator-view .project-complete-share-capture-links [hidden] { display: none !important; }

/* 出口1つ化（founder 確定 2026-07-02）: モバイルの共有サーフェスでは宛先アイコン列を
   出さない。宛先選択は OS のシェアシートに委ね、リンクはコピーだけ残す。
   デスクトップはシェアシートが無い/貧弱なので従来の宛先列を維持。 */
@media (max-width: 700px) {
  .project-creator-view [data-project-complete-pane="share"] .project-complete-share-strip,
  .project-creator-view .project-complete-share-step .project-complete-share-strip {
    display: none !important;
  }
}

/* 二次アクション（撮り直す・ダウンロード等）: 赤いシェアと同族の「静かな白カプセル」。
   下線テキストは Web の文法でタップ作法に合わない（任天堂×可士和 2026-07-03）。
   大きい赤=主役 / 小さい白=脇役、形の大小と色だけで主従を語る */
.project-creator-view .project-complete-share-capture-studio-link {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--pcr-line);
  border-radius: 999px;
  background: #fff;
  color: var(--pcr-ink);
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s var(--pcr-ease), transform 0.18s var(--pcr-ease-spring);
}
.project-creator-view .project-complete-share-capture-studio-link:hover { border-color: var(--pcr-ink); }
.project-creator-view .project-complete-share-capture-studio-link:active { transform: scale(0.95); }

/* ============================================================
   プレイヤー共有パネル文脈（game.html: share.js が #sharePanelOverlay の
   カードへこのペインを差し込む）。share.js のカードは横 padding 0 で
   各セクションが自前インセットを持つ設計（ゲームカード .share-panel-preview
   = margin 0 16px / 14px mobile・border 1px rgba(148,163,184,.22)・角丸18px）。
   インセット無しだとペインがカード外縁まで全幅化しサムネがはみ出す
   （founder 実機報告 2026-07-03「めちゃくちゃ」）。同じ寸法系に合わせ、
   クリップ行はゲームカードと同族のボーダーカードで包む — 上下2枚のカード
   （ゲーム/クリップ）→ 赤い主ボタン、というリズムに整える（可士和: 同じ
   カード文法の反復、任天堂: クリップは遊びの副産物として静かに添える）。
   ============================================================ */
#sharePanelOverlay .project-complete-share-capture--pane {
  margin: 12px 16px 0;
  padding: 0;
  gap: 14px;
}
#sharePanelOverlay .project-complete-share-capture--pane .project-complete-share-capture-attach-row {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}
/* パネルには既にゲームカードのサムネがある — クリップは一回り控えめに
   （縦96→84 / 横170→150 / 正方120→104）主従の衝突を避ける。
   さらに画面が低い端末ではサムネの実高を ~22svh に頭打ちして、パネル全体が
   スクロール無しで収まるようにする（founder 実機報告 2026-07-03:
   「スクロールするようになってしまった」）。aspect-ratio 起点なので
   幅 = 高さ上限 × アスペクト比 で滑らかに縮む。 */
#sharePanelOverlay .project-complete-share-capture--pane .project-complete-share-capture-media { width: min(84px, calc(22svh * 9 / 16)); }
#sharePanelOverlay .project-complete-share-capture--pane[data-capture-layout="wide"] .project-complete-share-capture-media { width: min(150px, calc(22svh * 16 / 9)); }
#sharePanelOverlay .project-complete-share-capture--pane[data-capture-layout="square"] .project-complete-share-capture-media { width: min(104px, 22svh); }
@media (max-width: 640px) {
  #sharePanelOverlay .project-complete-share-capture--pane { margin: 10px 14px 0; }
}
/* 余白は常時コンパクト（高さ判定ラダーは判定漏れの高さで必ず破れる —
   905px で直したらより高い画面で再発、founder 報告 2026-07-03 ×2。
   share.js 側のカード圧縮と合わせて全高 ~700px 以内に収め、
   どの画面高でもスクロール無しを無条件に成立させる） */
#sharePanelOverlay .project-complete-share-capture--pane { margin-top: 8px; gap: 10px; }
#sharePanelOverlay .project-complete-share-capture--pane .project-complete-share-capture-attach-row { padding: 10px 12px; }

/* クリッププレビュー（サムネタップで開く音付き・大画面再生。シェア前の確認用 —
   founder 2026-07-04）。パネル(z3000)/スタジオ(z2400) より前面 */
.project-complete-clip-preview {
  position: fixed;
  inset: 0;
  z-index: 3400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 8, 10, 0.92);
  padding: 24px;
}
.project-complete-clip-preview[hidden] { display: none !important; }
.project-complete-clip-preview-video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
  background: #000;
}
.project-complete-clip-preview-close {
  position: absolute;
  top: calc(14px + var(--safe-top, 0px));
  right: 14px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

/* クリップ完成の合図: シェアボタンの赤い点（一度だけ強く脈打ち、その後は静止） */
.project-creator-view .project-complete-next { position: relative; }
.project-creator-view .project-complete-clip-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pcr-red);
  box-shadow: 0 0 0 2px #fff;
  animation: pcr-clip-badge-in 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 2 alternate;
}
.project-creator-view .project-complete-clip-badge[hidden] { display: none !important; }
@keyframes pcr-clip-badge-in {
  from { transform: scale(0.4); }
  to { transform: scale(1.35); }
}


body.project-complete-recording-open {
  overflow: hidden;
}

/* ============================================================
   録画スタジオ — 佐藤可士和 × 任天堂（2026-07-02 全面再設計 v2）
   規律: 色は 墨・白・赤 + DreamCore 中立トークンのみ（テール廃止）/
   形はピル1種（ステージだけ hero カード）/ 高さ44pxの1本の整列軸 /
   選択は白黒反転、赤は録画だけ。動きはバネ（任天堂）。
   ============================================================ */
.project-creator-view .project-complete-recording-studio {
  --pcr-recording-reserved: 176px; /* bar44 + dock48 + 余白。ステージ寸法の逆算に使用 */
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: stretch;
  padding: 12px clamp(12px, 2vw, 20px) max(12px, env(safe-area-inset-bottom));
  background: #fafafa;
  color: var(--pcr-ink);
}

.project-creator-view .project-complete-recording-studio.hidden {
  display: none !important;
}

.project-creator-view .project-complete-recording-shell {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr) auto;
  gap: 12px;
}

/* --- ヘッダー: 赤い正方形 + タイトル ……… 閉じる（すべて44px軸） --- */
.project-creator-view .project-complete-recording-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-creator-view .project-complete-recording-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-creator-view .project-complete-recording-mark {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background: var(--pcr-red);
}

.project-creator-view .project-complete-recording-brand strong {
  color: var(--pcr-ink);
  font-size: 1rem;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* --- コントロール共通: 白いピル・高さ44・ヘアライン。1形状に統一 --- */
.project-creator-view .project-complete-recording-layout button,
.project-creator-view .project-complete-recording-control,
.project-creator-view .project-complete-recording-stop,
.project-creator-view .project-complete-recording-close {
  height: 44px;
  padding: 0 14px;
  white-space: nowrap;
  border: 1px solid var(--pcr-line);
  border-radius: var(--pcr-r-pill);
  background: #fff;
  color: var(--pcr-ink);
  font-size: 0.8rem;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.18s var(--pcr-ease-spring), background 0.15s var(--pcr-ease), color 0.15s var(--pcr-ease), border-color 0.15s var(--pcr-ease);
}
/* hidden 属性は共通の inline-flex より必ず優先（Stop・ワイプ位置の出しっぱなし防止） */
.project-creator-view .project-complete-recording-control[hidden],
.project-creator-view .project-complete-recording-primary[hidden],
.project-creator-view .project-complete-recording-stop[hidden] {
  display: none !important;
}

.project-creator-view .project-complete-recording-layout button:active,
.project-creator-view .project-complete-recording-control:active,
.project-creator-view .project-complete-recording-close:active,
.project-creator-view .project-complete-recording-stop:active,
.project-creator-view .project-complete-recording-primary:not(:disabled):active {
  transform: scale(0.94);
}

.project-creator-view .project-complete-recording-close {
  width: 44px;
  padding: 0;
  font-size: 1.2rem;
  font-weight: 700;
}

/* --- 下部ドック: 1本のバー。左=構図（比率+ワイプ）/ 右=入力と録画 --- */
/* 墨のバー: 等幅・同高・同形（角丸矩形）の言葉ボタンだけを並べる（マーリ:
   言葉が正直な UI / 寸法は 1fr グリッドで数学的に等しい）。赤いセルは録画だけ
   （ベルガンティ: 意味の一点集中）。ワイプ位置は自撮りON時のみ上段に現れる
   （マガー: 段階的開示）。 */
.project-creator-view .project-complete-recording-dock {
  display: grid;
  gap: 8px;
  margin: 0 calc(-1 * clamp(12px, 2vw, 20px)) calc(-1 * max(12px, env(safe-area-inset-bottom)));
  padding: 12px clamp(16px, 3vw, 28px) calc(12px + max(0px, env(safe-area-inset-bottom)));
  background: var(--pcr-ink);
}

.project-creator-view .project-complete-recording-dock-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

.project-creator-view .project-complete-recording-layout {
  display: contents; /* 比率3ボタンも同じグリッドセルに載せる（グループ枠は作らない） */
}

/* B案（founder 選定 2026-07-02）: 枠なし・アイコン上/文字下のトグル。寸法は等幅グリッドが保証 */
.project-creator-view .project-complete-recording-dock button {
  height: 54px;
  min-width: 0;
  width: 100%;
  padding: 0 4px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font-size: 0.66rem;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0.62; /* OFF/非選択は沈める。ON/選択は全開 */
  transition: transform 0.18s var(--pcr-ease-spring), opacity 0.15s var(--pcr-ease), background 0.15s var(--pcr-ease);
}
.project-creator-view .project-complete-recording-dock button:active { transform: scale(0.95); }
.project-creator-view .project-complete-recording-dock button[aria-pressed="true"] {
  opacity: 1;
}

/* 比率グリフ（縦長/横長/正方形の形そのもの） */
.project-creator-view .project-complete-recording-shape {
  display: block;
  border: 2px solid currentColor;
  border-radius: 2px;
}
.project-creator-view .project-complete-recording-shape[data-shape="wide"] { width: 22px; height: 14px; }
.project-creator-view .project-complete-recording-shape[data-shape="vertical"] { width: 14px; height: 22px; }
.project-creator-view .project-complete-recording-shape[data-shape="square"] { width: 17px; height: 17px; }
.project-creator-view .project-complete-recording-dock button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* カメラ/マイクは押せる感を常時キープ（ONはさらに明るく） */
.project-creator-view .project-complete-recording-dock .project-complete-recording-control { opacity: 0.8; }
.project-creator-view .project-complete-recording-dock .project-complete-recording-control[aria-pressed="true"] { opacity: 1; }
.project-creator-view .project-complete-recording-dock .project-complete-recording-control.is-muted { opacity: 0.55; }
.project-creator-view .project-complete-recording-dock button:focus-visible {
  outline: 2px solid var(--pcr-red);
  outline-offset: 2px;
}

/* 赤いセルは REC だけ（B案: 赤ピル・白ドット付き） */
.project-creator-view .project-complete-recording-dock .project-complete-recording-primary {
  flex-direction: row;
  background: var(--pcr-red);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  opacity: 1;
}
.project-creator-view .project-complete-recording-dock .project-complete-recording-primary::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  margin-right: 7px;
  flex-shrink: 0;
}
.project-creator-view .project-complete-recording-dock .project-complete-recording-primary:not(:disabled):hover { background: #e6342a; }
.project-creator-view .project-complete-recording-dock .project-complete-recording-primary:disabled {
  background: rgba(255, 255, 255, 0.12);
  opacity: 0.5;
}

/* ワイプ位置（自撮りON時のみ）: 同じ形の小さめ5等分 */
.project-creator-view .project-complete-recording-pos-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
.project-creator-view .project-complete-recording-pos-row[hidden] { display: none !important; }
.project-creator-view .project-complete-recording-pos-row button {
  height: 36px;
  font-size: 0.68rem;
  flex-direction: row;
  border-radius: 999px;
}
.project-creator-view .project-complete-recording-pos-row button[aria-pressed="true"] {
  background: #fff;
  color: var(--pcr-ink);
  opacity: 1;
}

/* pos 行の分の高さをステージ逆算に足す（sync が has-pos-row を付与） */
.project-creator-view .project-complete-recording-studio.has-pos-row {
  --pcr-recording-reserved: 222px;
}
@media (max-width: 700px) {
  .project-creator-view .project-complete-recording-studio.has-pos-row {
    --pcr-recording-reserved: 196px;
  }
}

/* --- ステージ: hero カード。録画中だけ赤い枠が呼吸 --- */
.project-creator-view .project-complete-recording-stage-wrap {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}

.project-creator-view .project-complete-recording-stage {
  position: relative;
  width: min(100%, calc((100vh - var(--pcr-recording-reserved)) * 16 / 9), 1280px);
  width: min(100%, calc((100svh - var(--pcr-recording-reserved)) * 16 / 9), 1280px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: var(--pcr-r-hero);
  background: #111317;
  box-shadow: 0 10px 34px rgba(17, 19, 23, 0.14);
}

.project-creator-view .project-complete-recording-stage[data-layout="vertical"] {
  width: min(100%, calc((100vh - var(--pcr-recording-reserved)) * 9 / 16));
  width: min(100%, calc((100svh - var(--pcr-recording-reserved)) * 9 / 16));
  aspect-ratio: 9 / 16;
}

.project-creator-view .project-complete-recording-stage[data-layout="square"] {
  width: min(100%, calc(100vh - var(--pcr-recording-reserved)), 900px);
  width: min(100%, calc(100svh - var(--pcr-recording-reserved)), 900px);
  aspect-ratio: 1 / 1;
}

.project-creator-view .project-complete-recording-studio.is-recording .project-complete-recording-stage {
  border-color: #ff443d;
  animation: pcr-recording-breath 1.6s ease-in-out infinite;
}
@keyframes pcr-recording-breath {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.35), 0 10px 34px rgba(17, 19, 23, 0.14); }
  50% { box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.1), 0 10px 34px rgba(17, 19, 23, 0.1); }
}

.project-creator-view .project-complete-recording-game,
.project-creator-view .project-complete-recording-game iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.project-creator-view .project-complete-recording-game iframe {
  background: #0b0c0f;
}

.project-creator-view .project-complete-recording-compositor-canvas {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
  background: #07080a;
  pointer-events: none;
}

.project-creator-view .project-complete-recording-source-video {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 1px;
  height: 1px;
  opacity: 0.01;
  pointer-events: none;
}

/* --- 自撮りワイプ: 見えるだけ（タッチはゲームへすり抜け）。位置は四隅+分割 --- */
.project-creator-view .project-complete-recording-camera {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  width: clamp(112px, 22%, 260px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: var(--pcr-r-md);
  background: #101114;
  box-shadow: 0 16px 44px rgba(0,0,0,0.42);
  pointer-events: none;
}

.project-creator-view .project-complete-recording-stage[data-camera-pos="bl"] .project-complete-recording-camera { right: auto; left: 12px; }
.project-creator-view .project-complete-recording-stage[data-camera-pos="tl"] .project-complete-recording-camera { right: auto; left: 12px; bottom: auto; top: 12px; }
.project-creator-view .project-complete-recording-stage[data-camera-pos="tr"] .project-complete-recording-camera { bottom: auto; top: 12px; }

.project-creator-view .project-complete-recording-stage[data-camera-pos="split"] .project-complete-recording-game {
  height: 50%;
}
.project-creator-view .project-complete-recording-stage[data-camera-pos="split"] .project-complete-recording-camera {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: 100%;
  height: 50%;
  aspect-ratio: auto;
  border: none;
  border-top: 2px solid rgba(255,255,255,0.9);
  border-radius: 0;
  box-shadow: none;
}

.project-creator-view .project-complete-recording-camera.hidden {
  display: none !important;
}

.project-creator-view .project-complete-recording-camera video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

/* --- 撮影ビュー（録画中の全画面）: 没入のため暗転、停止だけ浮かせる --- */
.project-creator-view .project-complete-recording-studio.is-capture-view {
  padding: 0;
  background: #07080a;
}

.project-creator-view .project-complete-recording-studio.is-capture-view .project-complete-recording-shell {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

.project-creator-view .project-complete-recording-studio.is-capture-view .project-complete-recording-dock {
  display: none !important;
}

.project-creator-view .project-complete-recording-studio.is-capture-view .project-complete-recording-bar {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 8;
  min-height: 0;
  display: block;
}

.project-creator-view .project-complete-recording-studio.is-capture-view .project-complete-recording-brand,
.project-creator-view .project-complete-recording-studio.is-capture-view .project-complete-recording-layout,
.project-creator-view .project-complete-recording-studio.is-capture-view .project-complete-recording-control,
.project-creator-view .project-complete-recording-studio.is-capture-view .project-complete-recording-primary,
.project-creator-view .project-complete-recording-studio.is-capture-view .project-complete-recording-stop {
  display: none !important;
}

.project-creator-view .project-complete-recording-studio.is-capture-view .project-complete-recording-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.project-creator-view .project-complete-recording-studio.is-capture-view .project-complete-recording-stop:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 44px;
  border-color: rgba(255,255,255,0.82);
  background: rgba(247,248,248,0.94);
  color: #101114;
  box-shadow: 0 10px 34px rgba(0,0,0,0.3);
}

.project-creator-view .project-complete-recording-studio.is-capture-view .project-complete-recording-close {
  width: 44px;
  height: 44px;
  border-color: rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.42);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.project-creator-view .project-complete-recording-studio.is-capture-view .project-complete-recording-stage-wrap {
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

.project-creator-view .project-complete-recording-studio.is-capture-view .project-complete-recording-stage {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: none;
  animation: none;
}

.project-creator-view .project-complete-recording-studio.is-capture-view .project-complete-recording-stage[data-layout="vertical"],
.project-creator-view .project-complete-recording-studio.is-capture-view .project-complete-recording-stage[data-layout="square"] {
  width: auto;
  height: calc(100vh - 16px);
  height: calc(100dvh - 16px);
}

/* --- モバイル（<=700px）: 同じ墨バー。比率3列を除いた3等分（常に9:16） --- */
@media (max-width: 700px) {
  .project-creator-view .project-complete-recording-studio {
    --pcr-recording-reserved: 150px; /* bar44 + 墨バー(48+pad) */
    padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  }

  .project-creator-view .project-complete-recording-layout { display: none; }

  .project-creator-view .project-complete-recording-stage-wrap {
    align-items: start;
    justify-items: center;
  }

  .project-creator-view .project-complete-recording-dock {
    margin: 0 -12px calc(-1 * max(12px, env(safe-area-inset-bottom)));
    padding: 10px 12px calc(10px + max(0px, env(safe-area-inset-bottom)));
  }
  .project-creator-view .project-complete-recording-dock-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-creator-view .project-complete-recording-camera {
    right: 10px;
    bottom: 10px;
    width: clamp(86px, 28%, 150px);
  }
}

.project-creator-view .project-complete-share-inline-target { width: 100%; }
.project-creator-view .project-complete-share-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 6px; /* row gap leaves room for the labels under each tile */
  padding-bottom: 16px;
}
.project-creator-view .project-complete-share-btn {
  position: relative; /* anchors the ::after label */
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  max-width: 56px;
  margin: 0 auto;
  border-radius: var(--pcr-r-lg);
  border: none; /* the tinted fill separates enough — one less line of chrome */
  background: var(--pcr-g100);
  color: var(--pcr-ink);
  font-weight: 800;
  font-size: 0.92rem;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.project-creator-view .project-complete-share-btn svg { width: 25px; height: 25px; }
.project-creator-view .project-complete-share-btn:active { transform: scale(0.94); }
.project-creator-view .project-complete-share-btn.share-native {
  background: var(--pcr-red);
  color: #fff;
}
/* every destination is named — recognition, not decoding (Nielsen #6) */
.project-creator-view .project-complete-share-btn[data-pcr-label]::after {
  content: attr(data-pcr-label);
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--pcr-muted);
  white-space: nowrap;
  pointer-events: none;
}
/* brand tiles keep white glyphs — the generic ink colour above must never
   win on dark/brand fills ((0,3,0) beats both stylesheet orders) */
.project-creator-view .project-complete-share-btn.share-line,
.project-creator-view .project-complete-share-btn.share-whatsapp,
.project-creator-view .project-complete-share-btn.share-sms,
.project-creator-view .project-complete-share-btn.share-x,
.project-creator-view .project-complete-share-btn.share-threads,
.project-creator-view .project-complete-share-btn.share-telegram,
.project-creator-view .project-complete-share-btn.share-facebook,
.project-creator-view .project-complete-share-btn.share-reddit,
.project-creator-view .project-complete-share-btn.share-email { color: #fff; }
.project-creator-view .project-complete-share-btn.share-copy,
.project-creator-view .project-complete-share-btn.share-qr { color: var(--pcr-ink); }
.project-creator-view .project-complete-share-step .project-complete-share-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px 4px;
  padding: 2px 0 14px;
  overflow: visible;
}
.project-creator-view .project-complete-share-step .project-complete-share-btn {
  max-width: 48px;
}
.project-creator-view .project-complete-share-step .project-complete-share-btn.share-line,
.project-creator-view .project-complete-share-step .project-complete-share-btn.share-whatsapp {
  background: #06c755;
}
.project-creator-view .project-complete-share-step .project-complete-share-btn.share-sms {
  background: #2ec95c;
}
.project-creator-view .project-complete-share-step .project-complete-share-btn.share-x,
.project-creator-view .project-complete-share-step .project-complete-share-btn.share-threads {
  background: #050505;
}
.project-creator-view .project-complete-share-step .project-complete-share-btn.share-telegram {
  background: #0088cc;
}
.project-creator-view .project-complete-share-step .project-complete-share-btn.share-facebook {
  background: #1877f2;
}
.project-creator-view .project-complete-share-step .project-complete-share-btn.share-reddit {
  background: #ff4500;
}
.project-creator-view .project-complete-share-step .project-complete-share-btn.share-email {
  background: linear-gradient(135deg, #ea4335 0%, #fbbc05 28%, #34a853 56%, #4285f4 100%);
}
.project-creator-view .project-complete-share-step .project-complete-share-btn.share-qr {
  border: 2px solid var(--pcr-line);
  background: #fff;
}
.project-creator-view .project-complete-share-step .project-complete-share-btn.share-native,
.project-creator-view .project-complete-share-step .project-complete-share-btn.share-copy {
  display: none;
}

/* =====================================================================
   IMAGE tool override : asset picker is a slide-up SHEET (no in-place strip,
   no inline action row). Tapping an asset jumps straight into the editor.
   Higher specificity (body.project-creator-route + [data-active-tool]) is
   required to beat the legacy `[data-active-tool="image"]` workbench layout.
   ===================================================================== */
/* neutralise the legacy floating-card layout so the grid lives in the sheet */
body.project-creator-route .project-creator-view[data-active-tool="image"] .project-complete-asset-workbench {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  z-index: auto;
  width: auto;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  display: grid;
  gap: 12px;
}
body.project-creator-route .project-creator-view[data-active-tool="image"] .project-complete-asset-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: auto;
  min-height: 0;
}
body.project-creator-route .project-creator-view[data-active-tool="image"] .project-complete-asset-tile {
  width: auto;
  height: auto;
  aspect-ratio: 1;
  flex: initial;
}
body.project-creator-route .project-creator-view[data-active-tool="image"] .project-complete-asset-tile span { display: none; }
body.project-creator-route .project-creator-view[data-active-tool="image"] .project-complete-asset-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 18px 0;
}
body.project-creator-route .project-creator-view[data-active-tool="image"] .project-complete-asset-editor { display: none; }
/* base CSS narrows the preview while the image tool is active — keep ours */
body.project-creator-route .project-creator-view[data-active-tool="image"] .project-complete-visual { width: auto; }
/* base CSS reserves 246px under the view for its legacy floating card while
   the image tool is active — that gap has no purpose in the creator */
body.project-creator-route .project-creator-view[data-active-tool] { padding: 0; }

/* base CSS paints the dock as a dark glass pill while a tool is active
   (legacy floating design, (0,3,0) specificity) — pin the creator skin */
body.project-creator-route .project-creator-view[data-active-tool] .project-complete-tool-dock {
  background: #fff;
  border-color: var(--pcr-line);
}
body.project-creator-route .project-creator-view[data-active-tool] .project-complete-tool-dock button {
  color: var(--pcr-muted);
}
body.project-creator-route .project-creator-view[data-active-tool] .project-complete-tool-dock button.active {
  background: none;
  color: var(--pcr-ink);
}

/* ---- publish settings modal : hosts the SAME pcr-sheet-surface ------- */
body.project-creator-route .project-complete-settings-modal:not(.project-complete-adjust-modal) {
  align-items: flex-end;
}
body.project-creator-route .project-complete-settings-modal:not(.project-complete-adjust-modal) .project-complete-settings-panel {
  margin: 0 auto; /* geometry comes from .pcr-sheet-surface */
}

/* =====================================================================
   World-class polish layer
   (header identity · share elevation · live feedback · empty states · juice)
   ===================================================================== */

/* ---- header : editable title · status badge · plays (replaces the logo) -- */
.project-creator-view .project-complete-brand { display: none; }
.project-creator-view .pcr-center {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(72vw, 300px);
  min-width: 0;
}
.project-creator-view .pcr-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: var(--pcr-r-md);
  cursor: pointer;
  color: var(--pcr-ink);
}
.project-creator-view .pcr-title-wrap:active { background: var(--pcr-g100); }
.project-creator-view .pcr-title {
  min-width: 0;
  font-weight: 800;
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-creator-view .pcr-title-pen { width: 14px; height: 14px; flex: 0 0 auto; color: var(--pcr-muted); }
/* the badge is a BUTTON: the state display is the doorway to the publish
   settings. A coloured dot reads the state before the label does. */
.project-creator-view .pcr-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border: none;
  border-radius: var(--pcr-r-pill);
  white-space: nowrap;
  cursor: pointer;
}
.project-creator-view .pcr-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.project-creator-view .pcr-status:active { transform: scale(0.95); }
.project-creator-view .pcr-status.is-draft { background: var(--pcr-g100); color: var(--pcr-muted); }
.project-creator-view .pcr-status.is-unlisted { background: rgba(240, 160, 32, 0.14); color: #9a6a10; } /* amber: shared but not discoverable */
.project-creator-view .pcr-status.is-public { background: rgba(52, 199, 89, 0.14); color: #1f9d4d; }
/* friends-played counter — the loop's reward, next to the state it rewards.
   It is a BUTTON: tapping the number opens the page the plays come from. */
.project-creator-view .pcr-plays {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border: none;
  border-radius: var(--pcr-r-pill);
  background: none;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--pcr-muted);
  cursor: pointer;
}
.project-creator-view .pcr-plays:active { background: var(--pcr-g100); }
.project-creator-view .pcr-plays[hidden] { display: none; }
.project-creator-view .pcr-plays svg { width: 13px; height: 13px; }

/* ---- share elevated : the goal of the loop carries a persistent accent.
   Once the game is PUBLIC the tile turns solid — louder exactly when sharing
   matters most, silent the rest of the time. */
.project-creator-view .project-complete-tool-dock button[data-project-complete-tool="share"]:not(.active) {
  color: var(--pcr-red);
}
.project-creator-view .project-complete-tool-dock button[data-project-complete-tool="share"]:not(.active) span {
  background: var(--pcr-red-light);
  color: var(--pcr-red);
}
.project-creator-view[data-pcr-status="public"] .project-complete-tool-dock button[data-project-complete-tool="share"]:not(.active) span {
  background: var(--pcr-red);
  color: #fff;
}

/* ---- juice : tool tiles pop when selected (Nintendo) ---------------- */
@keyframes pcrPop { 0% { transform: scale(1); } 42% { transform: scale(1.14); } 100% { transform: scale(1); } }
.project-creator-view .project-complete-tool-dock button.active span { animation: pcrPop 0.32s var(--pcr-ease-spring); }

/* ---- live feedback : non-blocking "整えています…" status on the preview --- */
.project-creator-view .project-complete-visual { position: relative; }
.project-creator-view .pcr-busy-overlay {
  position: absolute;
  top: 12px;
  right: 64px; /* keep the expand button playable */
  left: 12px;
  z-index: 9;
  display: none;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  text-align: left;
  color: #fff;
  background: rgba(10, 10, 12, 0.74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 15px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  pointer-events: none;
}
.project-creator-view.pcr-busy .pcr-busy-overlay { display: grid; }
.project-creator-view .pcr-busy-text {
  min-width: 0;
  font-weight: 800;
  font-size: 0.78rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-creator-view .pcr-busy-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: pcrSpin 0.8s linear infinite;
}
@keyframes pcrSpin { to { transform: rotate(360deg); } }
/* The wait is escapable, but the status pill must not steal game input. */
.project-creator-view .pcr-busy-cancel {
  pointer-events: auto;
  margin-top: 0;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--pcr-r-pill);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 700;
  font-size: 0.68rem;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.project-creator-view .pcr-busy-cancel:disabled { opacity: 0.6; cursor: default; }

/* ---- "更新しました ✓" : the edit landed --------------------------------
   A creator edit just re-rendered the preview — but for logic/difficulty/balance
   tweaks the game looks identical, so silence reads as "nothing happened". This
   non-blocking pill drops over the TOP of the preview card (where the busy overlay
   sat), confirming the change and naming it. Brand-red so it reads as the same
   celebratory voice as publish.

   COMPACT + EXPAND: collapsed it is one ellipsized line with a ▾ chevron; tapping
   the BODY expands to the full message (wraps, height-capped + internal scroll),
   tapping again collapses. The body is the expand toggle — it NEVER dismisses.

   PERSISTENT (not a toast): generation is slow and users leave the page while it
   runs, so the pill has NO auto-fade — it stays until the user dismisses it via
   the × button (the ONLY dismiss action) or starts a new edit, and re-appears on
   re-entry/reload while an update is unacknowledged. */
.project-creator-view .pcr-updated-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 11;                 /* above the iframe + busy overlay's resting state */
  display: flex;
  align-items: flex-start;     /* multi-line expanded text grows downward, × stays top */
  gap: 2px;
  /* CONSTANT width in BOTH states so tapping only changes height, never width
     (no horizontal jump). This is the same cap the expanded card uses; collapsed,
     the one-line text just ellipsizes inside it. */
  width: min(340px, calc(100% - 16px));
  max-width: calc(100% - 16px);
  padding: 4px 6px 4px 6px;
  border-radius: var(--pcr-r-pill);
  background: var(--pcr-red);
  color: #fff;
  box-shadow: 0 10px 28px -10px rgba(255, 59, 48, 0.6);
  /* The pill is alive: it pops in / out like a soft slime blob (squash-stretch +
     spring overshoot + a quickly-damped wobble that settles to identity). The
     motion is ALL transform + opacity (GPU-friendly, no layout thrash). The blob
     squishes from its top edge (it hangs off the top of the preview).

     Architecture: the is-visible / is-leaving classes hold only the STATIC resting
     opacity + transform (identity when shown, squashed-away when hidden). The
     lively keyframes live on transient .pcr-anim-* classes that JS adds and strips
     on animationend — so no two animations ever compete on this element, and a
     finished animation never re-fires when an unrelated class toggles. */
  transform-origin: 50% 0%;
  /* hidden resting state: tiny + squashed + faded, no pointer capture */
  opacity: 0;
  transform: translate(-50%, -10px) scaleX(0.72) scaleY(0.5);
  pointer-events: none;
}
/* SHOWN resting state — identity transform (NO permanent scale/offset). */
.project-creator-view .pcr-updated-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scaleX(1) scaleY(1);   /* RESTING STATE (identity) */
  pointer-events: auto;        /* interactive while shown (expand + dismiss) */
}
/* HIDDEN resting state — matches the base hidden transform (squashed away). */
.project-creator-view .pcr-updated-banner.is-leaving {
  opacity: 0;
  transform: translate(-50%, -10px) scaleX(0.72) scaleY(0.5);
  pointer-events: none;
}
/* expanded: same WIDTH as collapsed (set on the base rule) so there is no
   horizontal jump on tap — only the height changes as the text wraps. The
   corners soften from pill to card to signal the mode change. */
.project-creator-view .pcr-updated-banner.is-expanded {
  border-radius: 16px;
}

/* --- transient slime animations (added/removed by JS) ----------------------
   blob-in: born small & squat, springs up past 1.0, then a couple of gooey
   jiggles settle to identity. blob-out: a tiny anticipation puff, then squish +
   shrink + fade away. expand/collapse: a directional squash-stretch pulse that
   makes the height morph feel gooey (height itself reflows; this overlays the
   springy deformation). Every keyframe keeps translate(-50%) so the pill stays
   centred (no sideways drift), and every track ENDS at the matching resting
   transform so nothing is left permanently scaled/offset. */
.project-creator-view .pcr-updated-banner.pcr-anim-in { animation: pcrBlobIn 0.46s both; }
.project-creator-view .pcr-updated-banner.pcr-anim-out { animation: pcrBlobOut 0.34s both; }
.project-creator-view .pcr-updated-banner.pcr-anim-expand { animation: pcrBlobExpand 0.44s both; }
.project-creator-view .pcr-updated-banner.pcr-anim-collapse { animation: pcrBlobCollapse 0.4s both; }

@keyframes pcrBlobIn {
  0%   { opacity: 0; transform: translate(-50%, -10px) scaleX(0.72) scaleY(0.5); }
  35%  { opacity: 1; transform: translate(-50%, 1px) scaleX(1.06) scaleY(1.12); } /* overshoot, stretched tall */
  55%  { transform: translate(-50%, 0) scaleX(1.04) scaleY(0.94); }               /* rebound, squashed flat */
  72%  { transform: translate(-50%, 0) scaleX(0.985) scaleY(1.03); }              /* damped wobble */
  86%  { transform: translate(-50%, 0) scaleX(1.005) scaleY(0.99); }
  100% { opacity: 1; transform: translate(-50%, 0) scaleX(1) scaleY(1); }         /* settle to identity */
}
@keyframes pcrBlobOut {
  0%   { opacity: 1; transform: translate(-50%, 0) scaleX(1) scaleY(1); }
  22%  { opacity: 1; transform: translate(-50%, -2px) scaleX(1.05) scaleY(1.06); } /* anticipation puff */
  100% { opacity: 0; transform: translate(-50%, -10px) scaleX(0.66) scaleY(0.42); } /* squish + shrink away */
}
@keyframes pcrBlobExpand {
  0%   { transform: translate(-50%, 0) scaleX(1) scaleY(1); }
  30%  { transform: translate(-50%, 0) scaleX(0.97) scaleY(1.05); }  /* stretch DOWN */
  55%  { transform: translate(-50%, 0) scaleX(1.02) scaleY(0.98); }  /* rebound squash */
  78%  { transform: translate(-50%, 0) scaleX(0.995) scaleY(1.01); }
  100% { transform: translate(-50%, 0) scaleX(1) scaleY(1); }
}
@keyframes pcrBlobCollapse {
  0%   { transform: translate(-50%, 0) scaleX(1) scaleY(1); }
  30%  { transform: translate(-50%, 0) scaleX(1.03) scaleY(0.95); }  /* squash UP */
  55%  { transform: translate(-50%, 0) scaleX(0.985) scaleY(1.02); } /* rebound stretch */
  78%  { transform: translate(-50%, 0) scaleX(1.005) scaleY(0.99); }
  100% { transform: translate(-50%, 0) scaleX(1) scaleY(1); }
}

/* the body = expand toggle. Carries the pill's text styling + tap affordance. */
.project-creator-view .pcr-updated-body {
  flex: 1 1 auto;
  min-width: 0;                /* allow the text to ellipsize inside flex */
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 5px 8px 5px 10px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: left;
  cursor: default;             /* no detail → not obviously tappable */
  -webkit-tap-highlight-color: transparent;
}
.project-creator-view .pcr-updated-banner.has-detail .pcr-updated-body { cursor: pointer; }

/* check + chevron are fixed-size icons that must NEVER scale to fill a tall row.
   flex:none + explicit box + align-self:flex-start + block svg = hard lock. */
.project-creator-view .pcr-updated-check {
  flex: none;
  display: block;
  align-self: flex-start;
  width: 18px;
  height: 18px;
  margin-top: 1px;             /* optically centre with the first text line */
}
.project-creator-view .pcr-updated-check svg { display: block; width: 18px; height: 18px; }
.project-creator-view .pcr-updated-text {
  flex: 1 1 auto;
  min-width: 0;
  /* COLLAPSED: keep a long summary on one tidy line; ellipsize rather than wrap */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* EXPANDED: reveal the whole message — wrap, and cap height with internal scroll
   so a very long description never pushes the pill off the preview. */
.project-creator-view .pcr-updated-banner.is-expanded .pcr-updated-text {
  white-space: normal;
  overflow-wrap: anywhere;
  overflow-y: auto;
  max-height: 200px;
  font-weight: 700;            /* a touch lighter so a paragraph reads comfortably */
  -webkit-overflow-scrolling: touch;
}
/* chevron: only when there is detail to reveal; flips on expand. Hard-sized. */
.project-creator-view .pcr-updated-chevron {
  display: none;
  flex: none;
  align-self: flex-start;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  opacity: 0.9;
  transition: transform 0.24s var(--pcr-ease);
}
.project-creator-view .pcr-updated-banner.has-detail .pcr-updated-chevron { display: block; }
.project-creator-view .pcr-updated-chevron svg { display: block; width: 16px; height: 16px; }
.project-creator-view .pcr-updated-banner.is-expanded .pcr-updated-chevron { transform: rotate(180deg); }

/* explicit dismiss — the ONLY acknowledge action. Separated from the body and
   given a generous hit area (≥40px on mobile) so a tap-to-expand never lands on
   it by accident. */
.project-creator-view .pcr-updated-close {
  flex: none;
  align-self: flex-start;      /* pin top-right; don't stretch down the expanded card */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 1px 0 0 2px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  transition: background 0.16s var(--pcr-ease);
  -webkit-tap-highlight-color: transparent;
}
.project-creator-view .pcr-updated-close:hover { background: rgba(255, 255, 255, 0.32); }
.project-creator-view .pcr-updated-close svg { display: block; width: 15px; height: 15px; }
/* On touch devices, extend the × hit area to ≥44px (the visible circle stays 30px)
   via an invisible overlay, so a tap-to-expand can't accidentally trigger dismiss. */
@media (pointer: coarse) {
  .project-creator-view .pcr-updated-close { position: relative; }
  .project-creator-view .pcr-updated-close::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* No slime: kill the squash/bounce keyframes and cross-fade only. The pill
     stays at identity transform in every state (no scale, no offset wobble). */
  .project-creator-view .pcr-updated-banner.pcr-anim-in,
  .project-creator-view .pcr-updated-banner.pcr-anim-out,
  .project-creator-view .pcr-updated-banner.pcr-anim-expand,
  .project-creator-view .pcr-updated-banner.pcr-anim-collapse {
    animation: none;
  }
  .project-creator-view .pcr-updated-banner {
    transition: opacity 0.18s linear;
    transform: translate(-50%, 0);   /* hidden = same position, just faded */
  }
  .project-creator-view .pcr-updated-banner.is-visible,
  .project-creator-view .pcr-updated-banner.is-leaving { transform: translate(-50%, 0); }
  .project-creator-view .pcr-updated-chevron { transition: none; }
}

/* ---- first publish : a milestone, not just a state change (Nintendo) -- */
.project-creator-view .pcr-first-pub {
  position: fixed;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) rotate(-4deg);
  z-index: 9999;
  pointer-events: none;
  padding: 12px 22px;
  border-radius: var(--pcr-r-lg);
  background: var(--pcr-red);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 34px -10px rgba(255, 59, 48, 0.55);
  animation: pcrStamp 2.6s var(--pcr-ease) forwards;
}
@keyframes pcrStamp {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(1.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -56%) rotate(-4deg) scale(0.98); }
}

/* ---- sheet head : the image sheet announces what a tap does ----------- */
.project-creator-view .pcr-sheet-head h2 {
  font-size: 1.08rem;
  font-weight: 800;
  margin: 0;
}
.project-creator-view .pcr-sheet-head p {
  font-size: 0.82rem;
  color: var(--pcr-g600);
  margin: 4px 0 0;
  line-height: 1.5;
}

/* ---- adjust history chip : recognition over recall (Nielsen #6) ------- */
.project-creator-view .pcr-last-chip {
  background: #fff;
  border: 1.5px dashed var(--pcr-g200);
  border-radius: var(--pcr-r-md);
  padding: 11px 14px;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--pcr-g600);
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-creator-view .pcr-last-chip:active { background: var(--pcr-g100); }

/* ---- dock : four tools. Text lives behind the title itself (Ive) ------ */
.project-creator-view .project-complete-tool-dock button[data-project-complete-tool="text"] { display: none; }

/* ---- empty state : a friendly nudge, not a dead end (Nielsen #10) ---- */
.project-creator-view .project-complete-asset-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  line-height: 1.6;
}
.project-creator-view .project-complete-asset-empty::before {
  content: '';
  width: 36px;
  height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6b6bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- accessibility : visible keyboard focus ------------------------- */
.project-creator-view button:focus-visible,
.project-creator-view a:focus-visible {
  outline: 3px solid var(--pcr-red);
  outline-offset: 2px;
}

/* =====================================================================
   Desktop (≥1024px) — the app shell shows its sidebar, so the creator gets
   a studio-like stage: the game fills the height, the tools become a quiet
   vertical rail at its side, and sheets slide in from the right instead of
   the bottom. Same DOM, same interactions — only the geometry changes.
   ===================================================================== */
@media (min-width: 1024px) {
  /* stage: use the full content area, no reserved bottom-dock space */
  .project-creator-view .project-complete-main {
    width: 100%;
    max-width: none;
    padding: 28px 36px;
  }
  /* preview + rail sit side by side, centred together */
  .project-creator-view .project-complete-hero-card {
    flex-direction: row;
    gap: 22px;
  }
  .project-creator-view .project-complete-visual {
    height: min(100%, 800px); /* sane cap on very tall monitors */
    margin: 0; /* auto margins would shove the rail to the far edge */
  }
  /* dock → vertical rail beside the game (panel is display:contents).
     High-specificity twin of the [data-active-tool] pin above, so the rail
     stays transparent whichever tool is open. */
  .project-creator-view .project-complete-tool-dock,
  body.project-creator-route .project-creator-view[data-active-tool] .project-complete-tool-dock {
    position: static;
    width: auto;
    flex-direction: column;
    align-self: center;
    gap: 16px;
    margin: 0;
    padding: 6px;
    border: none;
    background: none;
  }
  .project-creator-view .project-complete-tool-dock button { flex: 0 0 auto; }
  /* the shared sheet surface becomes a right drawer — tool panes AND the
     publish settings inherit this from the one definition */
  body.project-creator-route .pcr-sheet-surface {
    width: 420px;
    max-height: none;
    align-content: start; /* full-height grid: pack rows to the top, don't stretch */
    border-radius: var(--pcr-r-sheet) 0 0 var(--pcr-r-sheet);
    padding: 30px 26px;
    box-shadow: -12px 0 34px rgba(0, 0, 0, 0.14);
    animation: pcrSheetIn 0.3s var(--pcr-ease);
  }
  /* tool panes: pin to the right edge (surface class does the rest) */
  .project-creator-view .project-complete-tool-pane {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .project-creator-view .project-complete-tool-pane::before { display: none; } /* no grab handle */
  /* publish settings: same drawer, hosted by its modal wrapper */
  body.project-creator-route .project-complete-settings-modal:not(.project-complete-adjust-modal) {
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
  }
  body.project-creator-route .project-complete-settings-modal:not(.project-complete-adjust-modal) .project-complete-settings-panel {
    height: 100%;
    margin: 0;
  }
}
@keyframes pcrSheetIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ---- pointer finesse : hover states only where a cursor exists -------- */
@media (hover: hover) and (pointer: fine) {
  .project-creator-view .project-complete-tool-dock button:hover span { background: var(--pcr-g200); }
  .project-creator-view .project-complete-tool-dock button.active:hover span { background: var(--pcr-red); }
  .project-creator-view .project-complete-tool-dock button[data-project-complete-tool="share"]:not(.active):hover span {
    background: var(--pcr-red);
    color: #fff;
  }
  .project-creator-view .pcr-title-wrap:hover { background: var(--pcr-g100); }
  .project-creator-view .pcr-status:hover { filter: brightness(0.95); }
  .project-creator-view .pcr-plays:hover { background: var(--pcr-g100); color: var(--pcr-ink); }
  .project-creator-view .project-complete-share-btn:hover { transform: translateY(-2px); }
  .project-creator-view .project-complete-inline-adjust-suggestions button:hover { background: var(--pcr-g200); }
  .project-creator-view .pcr-last-chip:hover { background: var(--pcr-g100); }
  .project-creator-view .pcr-busy-cancel:hover { background: rgba(255, 255, 255, 0.14); }
  .project-creator-view .project-complete-asset-tile:hover { border-color: var(--pcr-g300); }
}

/* ---- accessibility : honour reduced-motion -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .project-creator-view .project-complete-tool-pane,
  .project-creator-view .project-complete-tool-dock button.active span,
  .project-creator-view .pcr-first-pub { animation: none; }
  .project-creator-view .pcr-busy-spinner { animation-duration: 1.6s; }
  .project-creator-view .project-creator-scrim { transition: none; }
  .project-creator-view .project-complete-tool-dock button span,
  .project-creator-view .project-complete-share-btn { transition: none; }
}