/*
 * routes/create.css — create.html でしか当たらない CSS（style.css から
 * scripts/split-route-css.js で機械分割・2026-09-07・07-static F4 第2段）。
 *
 * このバンドルのルールは**初期描画に要る**ので、読み込みは素の <link rel=stylesheet>（同期）。
 * ここのスタイルは直接このファイルを編集する（style.css に書くと test/route-css-split.test.js が赤にする）。
 * 編集したら node scripts/split-route-css.js --bump で <link> の ?v=（内容ハッシュ）を揃える。
 * どのルールがここに来るか / どのページが link するかの判定は scripts/route-css-config.js。
 */

.anon-login-cta {
  display: none;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--white);
  background: var(--gray-900);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
  line-height: 1.4;
  flex-shrink: 0;
}

.anon-login-cta:active { opacity: 0.7; }

@media (hover: hover) {
.anon-login-cta:hover { opacity: 0.85; }

.project-complete-share-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
  }

.template-genre-more:hover { color: var(--red); }
}

.create-hero-title {
  width: 100%;
  max-width: 560px;
  margin: 0 0 var(--s-4);
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.15;
  color: var(--gray-900);
}

.dc-composer-row { display: flex; align-items: flex-end; gap: 10px; }

.dc-send {
  /* 44px = 旧丸ボタンと同じタップ高さ。1画面1動詞のその1動詞なのでここは落とさない
     （同ファイルの .dc-blank-studio も「タップ領域は44px確保」と書いている）。
     40px でも WCAG 2.5.8(24px) は満たすが、下段は6言語すべてで横に余裕があるため戻す。 */
  flex-shrink: 0; height: 44px; border-radius: var(--r-full);
  padding: 0 var(--s-16) 0 var(--s-18);
  border: 0; cursor: pointer;
  background: var(--gray-100); color: var(--gray-400);
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 0.875rem; font-weight: 800; letter-spacing: -0.01em;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent; /* 押下の手応えは :active の縮みで返す。iOS/Android の灰色の矩形は重ねない */
  /* 2026-09-23 モーション案3（founder 承認）: 色の切替を .35s の ease-out に、押下/復帰の縮みを
     spring（cubic-bezier(.34,1.56,.64,1) = 少しだけ行き過ぎて戻る。プロジェクト内の既存 spring と同じ値）にした。
     「点灯した瞬間のポン」と「矢印の前へ促す動き」はキーフレーム定義が要るが、ルート別バンドルには
     キーフレーム定義を置けない（test/route-css-split.test.js が禁止: 定義は常に style.css 側）。style.css を触ると
     全ページの ?v= が変わるので、Web Animations API で app.js（syncComposerSendState → playComposerSendReady）から鳴らす。 */
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}

.dc-send svg { width: 17px; height: 17px; }

/* 点灯時の光: 旧 0 4px 14px var(--red-glow)（輪郭がぼやけた赤い霞）→ 下にだけ落ちる柔らかい赤の影 +
   上端 1px の白いハイライト（押せる “ボタンの面” に見せる）。値はモック uiux-demo/index.html 案3 のまま */
.dc-send.ready { background: var(--red); color: var(--white); box-shadow: 0 6px 16px -4px rgba(255, 59, 48, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }

/* 押下は速く（.12s）、離したら spring で戻る（transition-duration を :active の間だけ短くする） */
.dc-send:active { transform: scale(.94); transition-duration: .12s; }

/* ── 「つくる」の派手な点灯（2026-09-23 夕・founder「もっとあざとくわかりやすく派手に」）──────────
   案3（ポン + 矢印の促し）だけでは「押せるようになった」が伝わり切らなかった。役割を3つの層に分ける:
     [data-send-layer="ring"]  … ボタンの外に広がる赤い輪（点灯の瞬間に1回大きく / 点灯中は 1.8s ごとに呼吸する灯台）
     [data-send-layer="clip"]  … ボタンの形で切り抜いた窓。中の shine（白い光の帯）が面を斜めに横切る（約3.2s ごと）
     [data-send-layer="spark"] … 点灯の瞬間だけボタンの縁から飛び散る粒（JS が作って消す）
   クラスでなく属性で名指す理由は app.js ensureComposerSendLayers のコメント（ルート CSS 分割の判定）。
   動きは全部 Web Animations API（app.js playComposerSendReady）。キーフレームをこのルート CSS に置けない
   （test/route-css-split.test.js）のと、style.css を触ると全ページの ?v= が変わるため。
   ここは「層の置き場と初期状態（見えない）」だけ。動くのは transform と opacity だけ（合成レイヤーに乗る）。
   文字と矢印は層より上（z-index 1）。灯りが消えたら（空欄に戻したら）JS が全部止めて透明に戻す。 */
.dc-send { position: relative; isolation: isolate; }
.dc-send > span:not([data-send-layer]), .dc-send > svg { position: relative; z-index: 1; }
.dc-send > [data-send-layer="ring"] {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--red); opacity: 0; pointer-events: none;
}
.dc-send > [data-send-layer="clip"] {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  overflow: hidden; pointer-events: none;
}
.dc-send [data-send-layer="shine"] {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-160%) skewX(-18deg); opacity: 0;
}
.dc-send > [data-send-layer="spark"] {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  pointer-events: none;
}
/* 点灯中のホバー（マウスのみ）: 少し浮いて光が強まる = 「押して」の最後のひと押し */
@media (hover: hover) and (pointer: fine) {
  .dc-send.ready:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 22px -6px rgba(255, 59, 48, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
}
@media (prefers-reduced-motion: reduce) {
  .dc-send [data-send-layer] { display: none; }
}

.dc-send:disabled { cursor: default; }

.dc-composer-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-12); margin-top: var(--s-8);
}

.dc-composer-tools { display: flex; align-items: center; gap: var(--s-8); min-width: 0; }

.dc-tool {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--gray-600);
  background: none; border: 0; cursor: pointer; padding: 4px 0; font-family: inherit;
}

.dc-tool svg { width: 15px; height: 15px; }

.dc-tool--image {
  background: var(--red-light); color: var(--red);
  border-radius: var(--r-full); padding: 7px 12px 7px 10px;
  font-weight: 700;
  transition: transform .15s var(--ease-out), filter .2s;
}

.dc-tool--image svg { width: 16px; height: 16px; }

.dc-tool--image:active { transform: scale(.94); }

.dc-dim-toggle {
  display: inline-flex; background: var(--gray-100);
  border-radius: var(--r-full); padding: 3px; gap: 2px; flex-shrink: 0;
}

.dc-dim {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  /* gray-400 (#A3A3A3) on gray-100 (#F5F5F5) = 2.31:1 で AA(4.5:1) を大きく下回る。
     2D/3D は既定でどちらも未選択＝全ユーザーが最初に見る状態なので gray-600 (7.17:1) にする。
     旧 .dc-tool は gray-600 on 白 = 7.81:1 だったので、gray-400 は今回の回帰だった。 */
  color: var(--gray-600); padding: 5px 11px; border-radius: var(--r-full);
  transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .15s var(--ease-out);
}

.dc-dim:active { transform: scale(.94); }

.dc-ctx-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

.dc-ctx-row:empty { display: none; margin-bottom: 0; }

.dc-chip--dice {
  background: var(--red-light); border-color: transparent; color: var(--red); font-weight: 800;
}

.dc-chip--dice:hover { border-color: transparent; color: var(--red); filter: brightness(.97); }

.dc-chip--dice .dc-dice-face { display: inline-block; }

.dc-chip--dice.is-rolling .dc-dice-face { animation: dcDiceRoll .4s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
.dc-chip--dice.is-rolling .dc-dice-face { animation: none; }

.template-create-overlay-spinner {
    animation: none;
  }

.create-header-cta { transition: none; }
}


.daily-prompt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  padding: var(--s-20) var(--s-24);
  margin-bottom: var(--s-24);
  background: linear-gradient(135deg, #fff 0%, #fff6f5 100%);
  border: 2px solid var(--red, #ff3b30);
  border-radius: var(--r-24, 24px);
  box-shadow: 0 8px 28px -10px rgba(255, 59, 48, 0.28);
  animation: fadeIn 0.4s var(--ease-out, ease-out);
}

.pictomix-entry-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(260px, 1.18fr);
  align-items: stretch;
  gap: 0;
  margin-bottom: var(--s-32);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r-16);
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(2, 9, 36, 0.08);
}

.pictomix-entry-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(0, 199, 255, 0.12), transparent 36%),
    linear-gradient(315deg, rgba(255, 42, 157, 0.12), transparent 42%);
}

.pictomix-entry-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(3, 8, 31, 0.08);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.88);
  color: #03081f;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(3, 8, 31, 0.08);
}

.pictomix-entry-dismiss:hover {
  background: #ffffff;
  color: #ff2a9d;
}

.pictomix-entry-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(22px, 4vw, 42px);
}

.pictomix-entry-kicker {
  width: fit-content;
  margin: 0 0 12px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, #0098ff, #ff2a9d);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}

.pictomix-entry-title {
  margin: 0;
  color: #03081f;
  font-size: clamp(1.75rem, 4.2vw, 3.4rem);
  font-weight: 900;
  line-height: 1.02;
}

.pictomix-entry-body {
  max-width: 480px;
  margin: 14px 0 0;
  color: var(--gray-700, #333333);
  font-size: clamp(0.95rem, 1.7vw, 1.12rem);
  font-weight: 650;
  line-height: 1.65;
}

.pictomix-entry-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 22px;
}

.pictomix-entry-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: var(--r-full);
  background: #03081f;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(3, 8, 31, 0.18);
  transition:
    transform 0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out),
    background 0.18s var(--ease-out);
}

.pictomix-entry-primary:hover {
  background: #ff2a9d;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(255, 42, 157, 0.24);
}

.pictomix-entry-primary:active {
  transform: scale(0.98);
}

.pictomix-entry-note {
  color: var(--gray-500, #737373);
  font-size: 0.86rem;
  font-weight: 700;
}

.pictomix-entry-media {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 260px;
  padding: 0;
  border: none;
  background: #f7fbff;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

.pictomix-entry-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s var(--ease-out);
}

.pictomix-entry-card:hover .pictomix-entry-media img {
  transform: scale(1.035);
}

@media (max-width: 768px) {
.pictomix-entry-card {
    grid-template-columns: 1fr;
    border-radius: var(--r-16);
  }

.pictomix-entry-copy {
    padding: 22px;
  }

.pictomix-entry-media {
    min-height: 184px;
    order: -1;
  }

.pictomix-entry-media img {
    min-height: 184px;
  }

.pictomix-entry-actions {
    align-items: flex-start;
    flex-direction: column;
  }

.create-hero-title { font-size: 1.6rem; }

.deleted-projects-view {
    padding: 0 var(--s-16) var(--bottom-nav-reserved-space-comfy);
  }
}

.character-shelf-section {
  margin-bottom: var(--s-32);
}

.character-shelf-section--compact {
  margin: 0 0 var(--s-20);
}

.character-shelf-link {
  min-height: 34px;
  padding: 0 var(--s-12);
  border-radius: var(--r-8);
  font-weight: 700;
}

.character-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
  gap: var(--s-12);
}

.character-shelf--compact {
  display: block;
  margin-top: var(--s-10);
}

.template-shelves-status {
  margin: var(--s-16) 0;
  color: var(--gray-500);
  font-size: 0.875rem;
  text-align: center;
}

/* Deleted Projects View (inside projectListView, shares header) */
.deleted-projects-view {
  padding: 0 var(--s-32) var(--bottom-nav-reserved-space-comfy);
  margin-top: var(--s-24);
}

.deleted-view-hint {
  margin: 0 0 var(--s-24);
  font-size: 0.8125rem;
  color: var(--gray-400);
  line-height: 1.5;
}

.deleted-projects-empty {
  padding: var(--s-64) 0;
  text-align: center;
  color: var(--gray-400);
  font-size: 0.875rem;
}

.deleted-projects-list {
  display: flex;
  flex-direction: column;
  background: var(--glass-white);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-radius: var(--r-16);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.project-complete-view {
  min-height: 100dvh;
  padding: 0 24px max(128px, calc(var(--bottom-nav-reserved-space-comfy) + 24px));
  overflow-y: auto;
  background: #fff;
  color: var(--gray-900);
  transition: margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 開いている 280px / たたんだ柱 72px の両方（2026-09-23・navigation.css :root の --dc-drawer-width） */
body.drawer-desktop .project-complete-view {
  margin-left: var(--dc-drawer-width, 280px);
}

.pcr-confirm {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.pcr-confirm[hidden] { display: none; }

.pcr-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 23, 0.45);
}

.pcr-confirm-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: var(--white, #fff);
  border-radius: 18px;
  padding: 26px 24px 20px;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.pcr-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-700, #404040);
}

.pcr-confirm-icon svg { width: 24px; height: 24px; }

.pcr-confirm-title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--gray-900, #171717);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.pcr-confirm-body {
  margin: 0 0 22px;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--gray-500, #737373);
}

.pcr-confirm-actions {
  display: flex;
  gap: 10px;
}

.pcr-confirm-actions button {
  flex: 1;
  min-height: 46px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: background 0.15s ease, filter 0.15s ease;
}

.pcr-confirm-cancel {
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-700, #404040);
}

.pcr-confirm-cancel:hover { background: var(--gray-200, #e5e5e5); }

.pcr-confirm-go {
  background: var(--red, #FF3B30);
  color: #fff;
}

.pcr-confirm-go:hover { filter: brightness(1.04); }

.project-complete-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  min-height: 72px;
  margin: 0 auto;
  max-width: 1040px;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.project-complete-back {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 999px;
  background: #fff;
  color: var(--gray-900);
  cursor: pointer;
}

.project-complete-brand {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0;
}

.project-complete-brand .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.project-complete-main {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 28px 0 0;
}

.project-complete-hero-card {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(320px, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}

.project-complete-visual-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #ff9f9a, #ffe06c 54%, #84e2c3);
  color: #fff;
  font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1.25;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}

.project-complete-game-loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 900;
}

.project-complete-panel {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 3.5vw, 34px);
  border: 1px solid rgba(255, 59, 48, 0.18);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.08);
}

.project-complete-tool-pane {
  display: grid;
  gap: 14px;
}

.project-complete-tool-pane[hidden] {
  display: none;
}

.project-complete-kicker {
  color: var(--red);
  font-size: 0.88rem;
  line-height: 1;
  font-weight: 900;
}

.project-complete-kicker::before {
  content: '';
}

.project-complete-title-field {
  display: grid;
  gap: 8px;
}

.project-complete-title-field-compact {
  padding-top: 2px;
}

.project-complete-title-field span {
  color: var(--gray-500);
  font-size: 0.82rem;
  font-weight: 900;
}

.project-complete-title-field input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  background: #f8f8f8;
  color: var(--gray-900);
  font: inherit;
  font-size: 1rem;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: 0;
}

.project-complete-title-field input:focus {
  outline: 3px solid rgba(255, 59, 48, 0.14);
  border-color: rgba(255, 59, 48, 0.55);
  background: #fff;
}

.project-complete-adjust-intro {
  display: grid;
  gap: 8px;
}

.project-complete-tool-head {
  display: grid;
  gap: 8px;
}

.project-complete-adjust-intro h2 {
  margin: 0;
  color: var(--gray-900);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: 0;
}

.project-complete-tool-head h2 {
  margin: 0;
  color: var(--gray-900);
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: 0;
}

.project-complete-tool-head p {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.92rem;
  line-height: 1.5;
  font-weight: 650;
}

.project-complete-inline-adjust-suggestions {
  gap: 8px;
}

.project-complete-inline-adjust-suggestions button {
  min-height: 40px;
  padding: 0 12px;
  font-size: 0.84rem;
}

.project-complete-inline-adjust-field textarea {
  min-height: 96px;
}

.project-complete-inline-adjust-submit {
  width: 100%;
  min-height: 54px;
}

.project-complete-asset-workbench {
  display: grid;
  gap: 14px;
}

.project-complete-asset-list {
  display: flex;
  gap: 10px;
  min-height: 112px;
  margin: 0 -4px;
  padding: 2px 4px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

.project-complete-asset-list::-webkit-scrollbar {
  height: 0;
}

.project-complete-asset-editor {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 59, 48, 0.18);
  border-radius: 20px;
  background: #fff8f7;
}

.project-complete-selected-asset {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.project-complete-selected-asset img {
  width: 58px;
  height: 58px;
  display: block;
  object-fit: cover;
  border-radius: 14px;
  background: #eee;
}

.project-complete-selected-asset strong,
.project-complete-selected-asset span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-complete-selected-asset strong {
  color: var(--gray-900);
  font-size: 0.95rem;
  font-weight: 900;
}

.project-complete-selected-asset span {
  margin-top: 3px;
  color: var(--gray-500);
  font-size: 0.78rem;
  font-weight: 800;
}

.project-complete-asset-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.project-complete-asset-actions button,
.project-complete-publish-settings {
  min-height: 58px;
  padding: 0 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  background: #fff;
  color: var(--gray-900);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
}

.project-complete-asset-actions button {
  min-height: 56px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 7px 8px;
  border-radius: 14px;
  font-size: 0.75rem;
}

.project-complete-asset-actions button svg {
  width: 22px;
  height: 22px;
}

.project-complete-asset-actions button span {
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 900;
}

.project-complete-asset-actions button:active,
.project-complete-asset-apply:active,
.project-complete-publish-settings:active {
  transform: translateY(1px);
}

.project-complete-view[data-active-tool="image"] {
  padding-bottom: max(246px, calc(var(--bottom-nav-reserved-space-comfy) + 146px));
}

.project-complete-view[data-active-tool="image"] .project-complete-tool-pane[data-project-complete-pane="image"] > .project-complete-tool-head {
  display: none;
}

.project-complete-view[data-active-tool="image"] .project-complete-kicker {
  display: none;
}

.project-complete-view[data-active-tool="image"] .project-complete-asset-tile.active {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.12);
}

.project-complete-view[data-active-tool="image"] .project-complete-asset-tile img {
  border-radius: 13px;
}

.project-complete-view[data-active-tool="image"] .project-complete-asset-tile span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.project-complete-view[data-active-tool="image"] .project-complete-selected-asset {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
}

.project-complete-view[data-active-tool="image"] .project-complete-selected-asset img {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.project-complete-view[data-active-tool="image"] .project-complete-selected-asset strong {
  font-size: 0.82rem;
}

.project-complete-view[data-active-tool="image"] .project-complete-selected-asset span {
  font-size: 0.72rem;
}

.project-complete-view[data-active-tool="image"] .project-complete-asset-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.project-complete-view[data-active-tool="image"] .project-complete-asset-actions::-webkit-scrollbar {
  display: none;
}

.project-complete-view[data-active-tool="image"] .project-complete-asset-actions button {
  flex: 0 0 auto;
  min-width: 62px;
  min-height: 54px;
  padding: 7px 9px;
  border-radius: 15px;
  white-space: nowrap;
}

.project-complete-view[data-active-tool="image"] .project-complete-tool-dock {
  background: rgba(17, 17, 17, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
}

.project-complete-view[data-active-tool="image"] .project-complete-tool-dock button {
  color: rgba(255, 255, 255, 0.6);
}

.project-complete-view[data-active-tool="image"] .project-complete-tool-dock button.active {
  background: #fff;
  color: #111;
}

.project-complete-copy {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.55;
  font-weight: 650;
}

.project-complete-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-top: 6px;
}

.project-complete-share-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 4px 0 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.project-complete-share-strip::-webkit-scrollbar {
  display: none;
}

.project-complete-share-strip[data-state="preparing"] {
  opacity: 0.62;
}

.project-complete-share-step-panel {
  width: min(100%, 620px);
  display: grid;
  gap: 14px;
  padding: 16px 20px max(24px, env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: #fff;
  box-shadow: 0 -22px 58px rgba(0, 0, 0, 0.16);
  animation: projectCompleteShareStepIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-complete-share-step-head {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 12px;
}

.project-complete-share-step-head > div {
  grid-column: 2;
  text-align: center;
}

.project-complete-share-step-head h2 {
  margin: 3px 0 0;
  color: var(--gray-900);
  font-size: 1.26rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
}

.project-complete-share-step-kicker {
  color: var(--red);
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 900;
}

.project-complete-share-step-back {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 999px;
  background: #fff;
  color: var(--gray-900);
  cursor: pointer;
}

.project-complete-share-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: #f0f0f0;
}

.project-complete-share-card-media img,
.project-complete-share-card-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.project-complete-share-card-media img {
  display: none;
  object-fit: cover;
}

.project-complete-share-card-fallback {
  display: grid;
  place-items: center;
  padding: 8px;
  color: var(--gray-600);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
}

.project-complete-share-card-body {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.project-complete-share-card-body strong {
  color: var(--gray-900);
  font-size: 1.02rem;
  line-height: 1.22;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.project-complete-share-card-body p {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.84rem;
  line-height: 1.45;
  font-weight: 650;
}

.project-complete-share-activity {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: #fff;
}

.project-complete-share-activity[data-state="played"],
.project-complete-share-activity[data-state="reacted"] {
  border-color: rgba(255, 59, 48, 0.24);
  background: #fff8f7;
}

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

.project-complete-share-activity-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 1rem;
  font-weight: 900;
}

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

.project-complete-share-activity-head strong {
  display: block;
  color: var(--gray-900);
  font-size: 0.9rem;
  line-height: 1.15;
  font-weight: 900;
}

.project-complete-share-activity-head p {
  margin: 3px 0 0;
  color: var(--gray-600);
  font-size: 0.74rem;
  line-height: 1.35;
  font-weight: 700;
}

.project-complete-share-activity-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.project-complete-share-activity-metric {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--gray-100);
  color: inherit;
  text-decoration: none;
}

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

.project-complete-share-activity-metric-link:hover,
.project-complete-share-activity-metric-link:focus-visible {
  background: #fff;
  color: var(--red);
  box-shadow: inset 0 0 0 1px rgba(255, 59, 48, 0.28);
  outline: none;
}

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

.project-complete-share-activity-metrics strong {
  color: var(--gray-900);
  font-size: 1rem;
  line-height: 1;
  font-weight: 950;
}

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

.project-complete-share-activity-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: #fff;
  color: var(--gray-900);
  text-decoration: none;
  font-size: 0.74rem;
  line-height: 1.2;
  font-weight: 900;
}

.project-complete-share-activity-link[hidden] {
  display: none;
}

.project-complete-share-activity-link:hover,
.project-complete-share-activity-link:focus-visible {
  border-color: rgba(255, 59, 48, 0.3);
  color: var(--red);
  outline: none;
}

.project-complete-share-activity-review-hint {
  margin: 6px 0 0;
  color: var(--gray-600);
  font-size: 0.7rem;
  line-height: 1.4;
  font-weight: 800;
}

.project-complete-share-activity-review-hint[hidden] {
  display: none;
}

.project-complete-share-notification-toggle {
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--gray-600);
  font-size: 0.72rem;
  line-height: 1.2;
  font-weight: 850;
  cursor: pointer;
}

.project-complete-share-notification-toggle:hover,
.project-complete-share-notification-toggle:focus-visible {
  background: var(--gray-100);
  color: var(--gray-900);
  outline: none;
}

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

.project-complete-share-link-card {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--gray-100);
}

.project-complete-share-link-card span {
  color: var(--gray-600);
  font-size: 0.72rem;
  line-height: 1.1;
  font-weight: 850;
}

.project-complete-share-link-card strong {
  min-width: 0;
  color: var(--gray-900);
  font-size: 0.9rem;
  line-height: 1.25;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-complete-share-link-card strong.is-pending {
  color: var(--gray-600);
}

.project-complete-share-step-primary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.project-complete-share-step-copy-action {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 16px;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: 0;
  cursor: pointer;
}

.project-complete-share-step-copy-action {
  border: 1px solid rgba(0, 0, 0, 0.09);
  background: #fff;
  color: var(--gray-900);
}

.project-complete-share-step-copy-action:disabled {
  cursor: default;
  opacity: 0.48;
  box-shadow: none;
}

.project-complete-share-step-settings {
  min-height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  background: #fff;
  color: var(--gray-900);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
}

.project-complete-share-step-actions {
  min-width: 0;
}

.project-complete-share-step .project-complete-share-strip {
  justify-content: flex-start;
  padding: 8px 0 4px;
}

.project-complete-share-btn {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 54px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
}

.project-complete-share-btn:disabled {
  cursor: default;
  opacity: 0.42;
  transform: none;
}

.project-complete-share-btn:not(:disabled):active {
  transform: scale(0.92);
}

.project-complete-share-btn.share-native {
  background: #262626;
}

.project-complete-share-btn.share-copy,
.project-complete-share-btn.share-qr {
  border: 2px solid #e4e4e4;
  background: #fff;
  color: #3f3f3f;
  box-shadow: none;
}

.project-complete-share-btn.share-copy.copied {
  border-color: #22c55e;
  background: #22c55e;
  color: #fff;
}

.project-complete-share-btn.share-line,
.project-complete-share-btn.share-whatsapp {
  background: #06c755;
  font-size: 0.72rem;
}

.project-complete-share-btn.share-sms {
  background: #2ec95c;
}

.project-complete-share-btn.share-x,
.project-complete-share-btn.share-threads {
  background: #050505;
}

.project-complete-share-btn.share-telegram {
  background: #0088cc;
}

.project-complete-share-btn.share-facebook {
  background: #1877f2;
  font-size: 1.45rem;
}

.project-complete-share-btn.share-reddit {
  background: #ff4500;
  font-size: 1.3rem;
}

.project-complete-share-btn.share-email {
  background: linear-gradient(135deg, #ea4335 0%, #fbbc05 28%, #34a853 56%, #4285f4 100%);
}

.project-complete-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-top: 6px;
}

.project-complete-links a,
.project-complete-links button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--gray-500);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.project-complete-links #projectCompleteAdjust {
  color: var(--red);
}

.project-complete-links #projectCompleteEditorLink {
  color: var(--gray-400);
  font-size: 0.8rem;
}

.project-complete-view.is-game-expanded {
  overflow: hidden;
}

.project-complete-view.is-game-expanded .project-complete-header,
.project-complete-view.is-game-expanded .project-complete-panel,
.project-complete-view.is-game-expanded .project-complete-tool-dock {
  opacity: 0;
  pointer-events: none;
}

.project-complete-view.is-game-expanded .project-complete-main {
  padding: 0;
}

.project-complete-view.is-game-expanded .project-complete-hero-card {
  display: block;
}

.project-complete-view.is-game-expanded .project-complete-visual {
  position: fixed;
  z-index: 4000;
  top: 50%;
  left: 50%;
  width: min(92vw, calc(92dvh * 9 / 16));
  height: min(92dvh, calc(92vw * 16 / 9));
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%);
  border-radius: 28px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38);
}

.project-complete-view.is-game-expanded::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3999;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.project-complete-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 4300;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(17, 17, 17, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.project-complete-adjust-modal {
  place-items: end center;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.project-complete-settings-panel {
  width: min(100%, 480px);
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
}

.project-complete-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.project-complete-settings-kicker {
  color: var(--red);
  font-size: 0.82rem;
  font-weight: 900;
}

.project-complete-settings-head h2 {
  margin: 5px 0 0;
  color: var(--gray-900);
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
}

.project-complete-settings-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: #fff;
  color: var(--gray-900);
  cursor: pointer;
}

.project-complete-setting-group {
  display: grid;
  gap: 10px;
}

.project-complete-setting-option,
.project-complete-setting-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  background: #fff;
}

.project-complete-setting-option input {
  width: 22px;
  height: 22px;
  accent-color: var(--red);
  flex: 0 0 auto;
}

.project-complete-setting-option span,
.project-complete-setting-toggle span {
  display: grid;
  gap: 4px;
}

.project-complete-setting-option strong,
.project-complete-setting-toggle strong {
  color: var(--gray-900);
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 900;
}

.project-complete-setting-option small,
.project-complete-setting-toggle small {
  color: var(--gray-500);
  font-size: 0.82rem;
  line-height: 1.35;
  font-weight: 700;
}

.project-complete-setting-toggle {
  justify-content: space-between;
}

.project-complete-setting-toggle input {
  width: 50px;
  height: 30px;
  accent-color: var(--red);
  flex: 0 0 auto;
}

.project-complete-settings-actions {
  display: grid;
}

.project-complete-settings-save {
  min-height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(255, 59, 48, 0.24);
  cursor: pointer;
}

.project-complete-settings-save:disabled {
  opacity: 0.68;
  cursor: default;
}

.project-complete-adjust-panel {
  width: 100%;
  max-height: min(82dvh, 760px);
  gap: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px 24px max(24px, env(safe-area-inset-bottom));
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.16);
  animation: projectCompleteAdjustSheetIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-complete-adjust-handle {
  display: flex;
  justify-content: center;
  padding: 2px 0 4px;
}

.project-complete-adjust-handle span {
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: rgba(120, 120, 120, 0.32);
}

.project-complete-adjust-copy {
  margin: -4px 0 0;
  color: var(--gray-600);
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 700;
}

.project-complete-adjust-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.project-complete-adjust-suggestions button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: #fff;
  color: var(--gray-900);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 850;
  cursor: pointer;
}

.project-complete-adjust-suggestions button.active {
  border-color: rgba(255, 59, 48, 0.72);
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 59, 48, 0.2);
}

.project-complete-adjust-field {
  display: grid;
  gap: 8px;
}

.project-complete-adjust-field span {
  color: var(--gray-500);
  font-size: 0.82rem;
  font-weight: 900;
}

.project-complete-adjust-field textarea {
  width: 100%;
  min-height: 116px;
  resize: vertical;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  background: #f8f8f8;
  color: var(--gray-900);
  font: inherit;
  font-size: 0.96rem;
  line-height: 1.5;
  font-weight: 700;
}

.project-complete-adjust-field textarea:focus {
  outline: 3px solid rgba(255, 59, 48, 0.14);
  border-color: rgba(255, 59, 48, 0.55);
  background: #fff;
}

.project-complete-adjust-actions {
  display: grid;
  gap: 10px;
}

.project-complete-adjust-submit,
.project-complete-adjust-advanced {
  min-height: 54px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.96rem;
  font-weight: 900;
  cursor: pointer;
}

.project-complete-adjust-submit {
  border: 0;
  background: var(--red);
  color: #fff;
  box-shadow: 0 14px 30px rgba(255, 59, 48, 0.24);
}

.project-complete-adjust-advanced {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: var(--gray-700);
}

@media (max-width: 760px) {
.project-complete-view {
    padding: 0 18px 22px;
  }

.project-complete-header {
    grid-template-columns: 48px 1fr 48px;
    min-height: 64px;
  }

.project-complete-brand {
    font-size: 1rem;
  }

.project-complete-main {
    padding-top: 10px;
  }

.project-complete-hero-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }

.project-complete-view.is-game-expanded .project-complete-visual {
    width: min(94vw, calc(94dvh * 9 / 16));
    height: min(94dvh, calc(94vw * 16 / 9));
    max-width: none;
    max-height: none;
    border-radius: 22px;
  }

.project-complete-panel {
    gap: 12px;
    padding: 18px;
    border-radius: 22px;
  }

.project-complete-asset-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.project-complete-title-field input {
    min-height: 50px;
    padding: 0 14px;
    border-radius: 16px;
    font-size: 1.15rem;
  }

.project-complete-copy {
    font-size: 0.88rem;
    line-height: 1.5;
  }

.project-complete-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

.project-complete-links {
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 0;
  }

.project-complete-share-step-panel {
    width: 100%;
    padding: 16px 16px max(18px, env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
  }

.project-complete-share-card-body strong {
    font-size: 0.96rem;
  }

.project-complete-share-card-body p {
    font-size: 0.8rem;
  }

.project-complete-share-step-copy-action {
    min-height: 48px;
    padding: 0 10px;
    font-size: 0.9rem;
  }

.project-complete-settings-modal {
    align-items: end;
    padding: 14px;
  }

.project-complete-settings-panel {
    width: 100%;
    padding: 20px;
    border-radius: 24px;
  }

.project-complete-adjust-modal {
    padding: 0;
  }

.project-complete-adjust-panel {
    max-height: 86dvh;
    padding: 10px 16px max(16px, env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0;
  }

.project-complete-adjust-suggestions {
    gap: 8px;
  }

.project-complete-adjust-suggestions button {
    min-height: 40px;
    padding: 0 12px;
    font-size: 0.84rem;
  }
}

body[data-page="create"] .create-v2-section {
  display: grid;
  gap: 28px;
}

body[data-page="create"] .create-v2-section > .create-template-section {
  min-width: 0;
}

.template-create-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(245, 245, 245, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.template-create-overlay[hidden] {
  display: none;
}

.template-create-overlay-card {
  width: min(360px, 100%);
  padding: 30px 24px 26px;
  border: 1px solid rgba(28, 27, 26, 0.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(28, 27, 26, 0.14);
  text-align: center;
}

.template-create-overlay-spinner {
  display: block;
  width: 38px;
  height: 38px;
  margin: 0 auto 18px;
  border: 4px solid #ffe0de;
  border-top-color: #ff3b30;
  border-radius: 50%;
  animation: template-create-spin 0.8s linear infinite;
}

.template-create-overlay-card p { white-space: pre-line; }

/* composer.preparingText の改行を活かす */
.template-create-overlay-card strong {
  display: block;
  color: #1c1b1a;
  font-size: 19px;
  line-height: 1.4;
}

.template-create-overlay-card p {
  margin: 8px 0 0;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}


/* Create v2 parity: compact resume list + social template feed */
body[data-page="create"] .create-v2-section {
  gap: 28px;
  /* 2026-07-29: margin-top（--create-hero-space）撤去。理由は .games-section 側のコメント参照 */
}

body[data-page="create"] .projects-controls {
  display: none;
}

body[data-page="create"] .projects-search,
body[data-page="create"] .projects-sort {
  display: flex;
  align-items: center;
  min-height: 46px;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-full);
  background: var(--white);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(28,28,30,.04), 0 12px 32px -18px rgba(28,28,30,.20));
}

body[data-page="create"] .projects-search {
  gap: 10px;
  padding: 0 16px;
  color: var(--gray-500);
}

body[data-page="create"] .projects-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--gray-900);
  font-size: 0.92rem;
  font-weight: 700;
}

body[data-page="create"] .projects-search input::placeholder {
  color: var(--gray-400);
  font-weight: 700;
}

body[data-page="create"] .projects-sort {
  gap: 8px;
  padding: 0 14px 0 15px;
}

body[data-page="create"] .projects-sort span {
  color: var(--gray-500);
  font-size: 0.78rem;
  font-weight: 900;
}

body[data-page="create"] .projects-sort select {
  min-width: 94px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--gray-900);
  font-size: 0.88rem;
  font-weight: 900;
}


@media (max-width: 520px) {
body[data-page="create"] .projects-sort {
    justify-content: space-between;
  }
}

/* AIタブ「AIからの返信」: 生成完了時の返信と反映レシートを見返す開閉ブロック（2026-07-06） */
.project-complete-ai-reply{margin:0 0 14px}

.project-complete-ai-reply-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:11px 14px;border:1.5px dashed rgba(23,23,23,.22);border-radius:14px;background:rgba(255,255,255,.72);color:#171717;font-weight:700;font-size:.86rem;line-height:1.3;cursor:pointer;text-align:left}

.project-complete-ai-reply-icon{font-size:1rem;flex:none}

.project-complete-ai-reply-caret{margin-left:auto;flex:none;transition:transform .18s ease}

.project-complete-ai-reply.is-open .project-complete-ai-reply-caret{transform:rotate(180deg)}

.project-complete-ai-reply-body{margin-top:8px}

.create-header-cta {
  display: none;
  align-items: center; gap: 6px;
  border: 1px solid var(--gray-200); background: var(--white);
  border-radius: var(--r-full); padding: 7px 14px 7px 12px;
  font-family: inherit; font-size: 0.8rem; font-weight: 800; color: var(--gray-600);
  cursor: pointer; white-space: nowrap; min-width: 0;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}

.create-header-cta[hidden] { display: none; }

.create-header-cta svg { width: 15px; height: 15px; color: var(--red); flex-shrink: 0; }

.create-header-cta span { overflow: hidden; text-overflow: ellipsis; }

.create-header-cta:active { transform: scale(.96); }

.template-genre-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-12); margin: 0 0 var(--s-10);
}

.template-genre-more {
  /* gray-400 on 白 = 2.52:1 で AA 未達（12.5px なので 4.5:1 要求）。gray-600 = 7.81:1 */
  flex: 0 0 auto; color: var(--gray-600);
  font-size: 0.78rem; font-weight: 800; text-decoration: none; white-space: nowrap;
}



/* ══════════════════════════════════════════════════════════════════════
   /create UI/UX 仕上げ（2026-09-23・founder 承認のモック uiux-demo/index.html 案2/3/6 +
   layout2.html「Create 案 v2」）。
   共通の約束:
   - 動かすのは transform / opacity（と画像到着時だけ filter の blur）。レイアウトを揺らすプロパティは動かさない
     （スクロール中のコマ落ちを避ける。低価格 Android でも合成スレッドだけで済む）。
   - hover の演出は (hover:hover) and (pointer:fine) の中だけ。タッチ端末では :hover が「押した後に貼り付く」
     （iOS Safari / Android Chrome の sticky hover）ので、指には :active の縮みだけを返す。
   - prefers-reduced-motion: reduce では全部止める（下の各節の末尾）。
   - ここのクラス名（.create-hero-head / .dc-composer--lift / .create-rail）はこのページの HTML にしか無い。
     scripts/route-css-config.js はクラス名がどのページに現れるかでバンドルを決めるので、
     /create 専用の見た目はこの印を必ず含むセレクタで書く（含まないと creator バンドル行きでテストが赤になる）。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 見出し行: 「なにをつくる？」+ 白紙Studio ピル ───────────────────── */
.create-hero-head {
  width: 100%;
  max-width: 560px; /* 入力欄（.dc-composer 560px）と左右端を揃える。PC は下の @media で none（入力欄と同じ） */
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* en「What are you making?」は 375px で1行に入らない → ピルだけ次の行の右端へ落とす */
  gap: var(--s-8) var(--s-12);
  margin: 0 0 var(--s-4);
}

/* PC（>=769px）は入力欄・チップ行が max-width:none で本文幅いっぱいになる（creator.css の同じ @media）ので、
   見出し行も揃えて、白紙Studio ピルを入力欄の右端の真上に置く。
   旧 .dc-blank-row の分は creator.css のその @media に入っていたが、同じ詳細度だと後から読まれる create.css の
   max-width:560px が勝つため、こちらに置く */
@media (min-width: 769px) {
  .create-hero-head { max-width: none; }
}

.create-hero-head .create-hero-title {
  width: auto;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* 副導線なので小さく白いピル。旧（gray-400 の素のテキスト = 2.52:1）は AA 未達で読めていなかった。
   文字は gray-900 / 白地 = 17.9:1。枠は線ではなく 1px の内側影（太い枠を使わない DreamCore の作法） */
.dc-blank-studio {
  position: relative;
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px 7px 10px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--gray-200);
  color: var(--gray-900);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s var(--ease-out), box-shadow .2s var(--ease-out);
}

.dc-blank-studio svg { color: var(--gray-600); flex-shrink: 0; }

/* 見た目は高さ約28pxのピルのまま、指の当たり判定だけ 44px に広げる（WCAG 2.5.5 / Apple HIG）。
   ::after は透明なので見た目も隣の見出しの選択範囲も変えない */
.dc-blank-studio::after {
  content: '';
  position: absolute;
  inset: -8px -4px;
}

.dc-blank-studio:active { transform: scale(.96); }

.dc-blank-studio:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .dc-blank-studio:hover { box-shadow: inset 0 0 0 1px var(--gray-300), 0 4px 12px -6px rgba(0, 0, 0, .18); }
}

/* ── 入力欄の手応え（モーション案3）──────────────────────────────────
   フォーカスで板がふわっと持ち上がる。判定は :focus-within ではなく JS の .focused（textarea の focus/blur）。
   :focus-within だと 2D/3D や画像ボタンのクリック（Chrome はボタンにフォーカスが残る）でも持ち上がり、
   「書こうとしている」時だけ応える、という意図からずれるため。
   赤いリング（0 0 0 3px var(--red-light)）は creator.css の .dc-composer.focused と同じ値を引き継ぐ。 */
.create-hero .dc-composer--lift {
  transition: box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
}

.create-hero .dc-composer--lift.focused {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .03), 0 22px 48px -18px rgba(0, 0, 0, .22), 0 0 0 3px var(--red-light);
}

/* 持ち上げ（translateY）はマウス/トラックパッドの環境だけ。
   iOS Safari / WKWebView はフォーカスと同時にキーボードを出して入力欄をスクロールで視界に入れるが、
   同じ瞬間に transform が動くと、スクロール位置の計算と 2px のずれが重なって欄が一瞬跳ねる。
   タッチ端末は影とリングだけで「持ち上がった」ことを伝える（founder 追加要件 2026-09-23）。 */
@media (hover: hover) and (pointer: fine) {
  .create-hero .dc-composer--lift.focused { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .create-hero .dc-composer--lift { transition: none; }
  .create-hero .dc-composer--lift.focused { transform: none; }
  .dc-send { transition: none; }
}

/* ── テンプレ棚: 横スクロールのレール（構成案 v2）─────────────────────
   節（3D / 2D / 画像を差し替える）ごとに1本。旧 3列マソンリーの WHY は create.html のコメント参照。
   - 端まで絵が流れる（ブリード）: .games-section の左右パディング（= ページの溝）ぶん負のマージンで外へ出し、
     同じ量のパディングで1枚目の位置を本文の左端に戻す。scroll-padding-inline も同じ量にするので、
     スナップで止まる位置が常に本文の左端＝見出しの頭と揃う。
   - 縦スクロールと喧嘩させない: overscroll-behavior-x:contain（横の端でページの戻る/進むジェスチャや
     親への連鎖を起こさない）+ touch-action は pan-x pan-y を明示（縦のフリックはそのままページへ流れる。
     JS でホイールを横に読み替えるようなスクロールの横取りはしない）。
   - スクロールバーは隠す（タッチ端末は慣性スクロールが入口）。マウスの環境だけ、レールに乗った時に
     細いバーを出す（ホイールしか無いマウスでも横に送れる逃げ道。常時は出さない＝見た目は整ったまま）。 */
.create-rail {
  --rail-gutter: var(--s-32); /* = .games-section の左右パディング（PC）。モバイルは下の @media で 16px */
  --rail-card-w: 136px;
  --rail-gap: 14px;
  display: flex;
  gap: var(--rail-gap);
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 calc(-1 * var(--rail-gutter));
  /* 上 4px = hover の -4px 持ち上げが切れない逃げ / 下 16px = カードの柔らかい影が切れない逃げ */
  padding: 4px var(--rail-gutter) 16px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-gutter);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; /* iOS 12 以前の WKWebView 用の慣性。新しい環境では無害 */
  touch-action: pan-x pan-y;
  scrollbar-width: none;
}

.create-rail::-webkit-scrollbar { display: none; }

@media (max-width: 768px) {
  .create-rail {
    --rail-gutter: var(--s-16);
    /* 画面幅から逆算して「2.6 枚ぶん」にする（2026-09-23 実測で修正）。
       旧値 112px 固定は 375px 幅で 16+112+10+112+10=260 → 3枚目が 115px ぶん丸ごと見えてしまい、
       ちょうど 3 枚で画面が埋まって「横に続きがある」ことが伝わらなかった。
       (100vw - 左余白16 - 隙間10×2) / 2.6 → 375px で約130px（3枚目は約6割見える）/ 430px で約151px。
       clamp の下限 112px = 320px 級の小型端末で絵が潰れない最小、上限 150px = タブレット手前で大きくなりすぎない上限 */
    --rail-card-w: clamp(112px, calc((100vw - 36px) / 2.6), 150px);
    --rail-gap: 10px;
  }
}

@media (min-width: 1100px) {
  .create-rail { --rail-card-w: 148px; } /* 976px の本文で 6 枚強。絵が潰れない上限側 */
}

/* マウス/トラックパッド環境: トラックパッドの慣性で mandatory のスナップは「吸い付き」が強すぎるので proximity に緩める。
   細いスクロールバーはレールにポインタが乗った時だけ色が付く（scrollbar-color は Chrome 121+/Firefox。
   未対応の Safari は macOS のオーバーレイスクロールバーがそのまま出る） */
@media (hover: hover) and (pointer: fine) {
  .create-rail {
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .create-rail:hover { scrollbar-color: rgba(0, 0, 0, .18) transparent; }
}

.create-rail .dc-tpl {
  position: relative;
  flex: 0 0 var(--rail-card-w);
  min-width: 0;
  scroll-snap-align: start;
  cursor: pointer;
  border-radius: var(--r-16);
  -webkit-tap-highlight-color: transparent;
  /* 行き過ぎて戻る spring（プロジェクト既存の値）。hover の持ち上げ・押下の縮みの両方に効く */
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

.create-rail .dc-tpl:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.create-rail .dc-tpl-thumb {
  position: relative;
  aspect-ratio: 9 / 16; /* テンプレのサムネは 260x563 のスマホ実機スクショ = ほぼ 9:16。トリミングがほぼ出ない */
  border-radius: var(--r-16);
  overflow: hidden;
  /* Safari は overflow:hidden + 角丸の中で子の transform（画像のズーム）が動くと、角が一瞬四角くはみ出す。
     isolation で重なりの文脈を作ると角のクリップが保たれる（translateZ(0) より合成レイヤーを増やさない） */
  isolation: isolate;
  /* 読み込み前の地。真っ白/灰色の箱だと “壊れている” に見えるので、淡い色味をカードごとに変える
     （--dc-tpl-tint は app.js が 6 色の淡色パレットから index で割り当てる） */
  background: var(--dc-tpl-tint, #EEF1F5);
  /* 2層の柔らかい影（近い 1px + 遠くに落ちる大きな影）。ハードシャドウ・太い枠は使わない */
  box-shadow: 0 1px 2px rgba(28, 28, 30, .04), 0 12px 32px -18px rgba(28, 28, 30, .22);
  transition: box-shadow .35s var(--ease-out);
}

/* 1px の髪の毛の線。inset の box-shadow は子の <img> の下に描かれて隠れるので、上に重ねる疑似要素で引く */
.create-rail .dc-tpl-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
  pointer-events: none;
}

.create-rail .dc-tpl--square .dc-tpl-thumb { aspect-ratio: 1 / 1; } /* 画像を差し替える: 公開ゲームのスクショは比率がまちまち */

.create-rail .dc-tpl-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 到着（opacity/filter）とホバーのズーム（transform）の両方の戻りをここで持つ */
  transition: opacity .5s var(--ease-out), filter .7s var(--ease-out), transform .7s var(--ease-out);
}

/* タイトルは画像の**下**（旧: 画像の上に黒グラデで白抜き）。スクリム不要＝絵を隠さない。
   2行で切る。全文はカードの aria-label / title 属性にある */
.create-rail .dc-tpl-name {
  margin: 7px 2px 0;
  color: var(--gray-900);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere; /* 長い英単語1語でカード幅を押し広げない */
}

/* サムネ生成待ち（onerror）のカードは畳む。旧実装（creator.css の .featured-remix-card 版）と同じ挙動 */
.create-rail .dc-tpl.template-card-thumb-missing { display: none; }

@media (hover: hover) and (pointer: fine) {
  .create-rail .dc-tpl:hover { transform: translateY(-4px); }
  .create-rail .dc-tpl:hover .dc-tpl-thumb {
    box-shadow: 0 1px 2px rgba(28, 28, 30, .05), 0 2px 6px -2px rgba(28, 28, 30, .06), 0 18px 40px -20px rgba(28, 28, 30, .28);
  }
  .create-rail .dc-tpl:hover .dc-tpl-thumb img { transform: scale(1.045); }
}

.create-rail .dc-tpl:active { transform: scale(.965); transition-duration: .12s; }

/* ── 画像の到着（モーション案2）──────────────────────────────────────
   読み込み前は淡い地の上で「ぼかし+少し大きい+透明」、届いたら「くっきり」に戻す。
   .dc-arrive は app.js（enhanceCreateRail）が付ける = JS が走らなければ画像は最初から普通に見える。
   届いた印 .is-loaded は load（+ decode()）で付く。キャッシュ済み・画面外・低スペック端末は .is-instant で
   トランジション無しに即座に出す（画面外で blur を回すのは見えないのに GPU だけ食うため）。
   filter は「未到着」の間だけ宣言し、到着後の既定状態には置かない（トランジション後に filter が残らない）。 */
.create-rail.dc-arrive .dc-tpl:not(.is-loaded) .dc-tpl-thumb img {
  opacity: 0;
  filter: blur(14px);
  transform: scale(1.06);
}

/* 低スペック端末（JS の判定: コア数 ≤4 かつ メモリ ≤4GB）: blur を丸ごと省き、透明→不透明だけ */
.create-rail.dc-arrive--lite .dc-tpl:not(.is-loaded) .dc-tpl-thumb img {
  filter: none;
  transform: none;
}

.create-rail .dc-tpl.is-instant .dc-tpl-thumb img { transition: none; }

/* ── 入場のリズム（モーション案6）───────────────────────────────────
   レールが画面に入った時に1回だけ、カードが 70ms ずつ遅れてふわっと上がる。
   .dc-stagger（待機）/ .is-entered（再生）は app.js が付け外しする。IntersectionObserver が無い環境や
   JS が落ちた環境では .dc-stagger 自体が付かない＝カードは最初から見えている（隠したまま戻らない事故を作らない）。
   再生後は app.js がクラスを外す: transition-delay が残ると、hover の持ち上げまで 70ms×n 遅れるため。
   --dc-i は 0..7 で頭打ち（9枚目以降は画面外なので待たせない）。 */
.create-rail.dc-stagger .dc-tpl {
  opacity: 0;
  transform: translateY(14px) scale(.98);
}

.create-rail.dc-stagger.is-entered .dc-tpl {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--dc-i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  .create-rail .dc-tpl,
  .create-rail .dc-tpl-thumb,
  .create-rail .dc-tpl-thumb img { transition: none; }
  .create-rail .dc-tpl:hover,
  .create-rail .dc-tpl:active,
  .create-rail .dc-tpl:hover .dc-tpl-thumb img { transform: none; }
  .create-rail.dc-stagger .dc-tpl,
  .create-rail.dc-arrive .dc-tpl:not(.is-loaded) .dc-tpl-thumb img {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* =====================================================================
   マイプロジェクト（/projects）— 2026-09-23 founder 承認モック uiux-demo/projects.html の「案」
   （「いいね。これでいこう」）。
   /projects は create.html の一覧モード（app.js configureCreateListMode が .projects-list-mode を付ける）。
   規則はすべて .myproj-scope（create.html の .create-drafts-section にだけ書いてある足場）の下に置く:
     - 同じ section は /create の「つづきから」棚でもあるので、.projects-list-mode でも必ず絞る
     - scripts/route-css-config.js はクラス名が現れるページで置き場所を決める。.myproj-scope は create.html
       だけにあるので、この節は create.css（/create・/projects だけが読む）に入る。app.js が作る要素の
       クラス（myproj-card 等）と組み合わせても create.html に絞られる
   旧 /projects 向けの規則（creator.css の .projects-list-mode .project-card-* 2 系統・style.css の
   .games-filter-bar / .projects-controls）は /create の棚や他ページと共有のため消さず、ここで上書きする。
   カードの要素は myproj-* の新しい名前なので、旧 .project-card-thumbnail 等の規則はそもそも当たらない。
   動き: transform / opacity（画像だけ + filter）だけ。reduced-motion は節の最後でまとめて止める。
   ===================================================================== */
body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope {
  /* 値は承認モックと同じ。影は 2 層（近い 1px + 遠いぼかし）+ 髪の毛の線で、白地でも縁が溶けない */
  --myproj-ease: cubic-bezier(.16, 1, .3, 1);
  --myproj-spring: cubic-bezier(.34, 1.56, .64, 1);
  --myproj-shadow: 0 1px 2px rgba(28, 28, 30, .04), 0 12px 32px -18px rgba(28, 28, 30, .22);
  --myproj-shadow-lift: 0 1px 2px rgba(28, 28, 30, .05), 0 2px 6px -2px rgba(28, 28, 30, .06), 0 18px 40px -20px rgba(28, 28, 30, .28);
  --myproj-hair: inset 0 0 0 1px rgba(0, 0, 0, .05);
  --myproj-radius: 18px;
  /* 親（.create-v2-section）は flex/grid の列なので、既定の min-width:auto だと中身の最小幅（4 つのタブを
     横に並べた幅）まで section が押し広げられ、スマホで右にはみ出す（2026-09-23 390px 実測: 367px > 302px）。
     0 にしてセグメント自身の横スクロールに任せる */
  min-width: 0;
  max-width: 100%;
}

/* ── 見出し行: 「マイプロジェクト 790」 + 右寄せの 検索・並び替え ─────────────────── */
body[data-page="create"] .myproj-scope .myproj-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

/* 総数は /projects だけ（/create の棚の見出しは「つづきから」だけ） */
body[data-page="create"] .myproj-scope .myproj-total {
  display: none;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .create-section-head {
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px 14px;
  margin-bottom: 0;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .create-section-head h2 {
  font-size: 26px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.02em;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .myproj-total {
  display: inline;
  color: var(--gray-400);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .projects-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 auto;
}

/* 検索と並び替えは同じ白いピル。当たり判定 44px（旧 46px の枠線 + 影 → 承認モックの髪の毛の線 1 本） */
body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .projects-search,
body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .projects-sort {
  min-height: 44px;
  border: 0;
  background: var(--white);
  box-shadow: var(--myproj-hair);
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .projects-search {
  width: 240px;
  gap: 8px;
  padding: 0 14px;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .projects-search input {
  font-size: 13px;
  font-weight: 600;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .projects-search:focus-within,
body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .projects-sort:focus-within {
  box-shadow: inset 0 0 0 2px var(--gray-900);
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .projects-sort {
  position: relative;
  gap: 6px;
  padding: 0 0 0 14px;
  color: var(--gray-500);
}

/* 素の <select> をピルいっぱいに広げる = ピルのどこを押してもネイティブのピッカーが開く（iOS / Android / PC 共通）。
   矢印は OS 任せにせず右端に 1 本描く（Safari の既定の矢印は枠を消すと位置がずれるため） */
body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .projects-sort select {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  height: 44px;
  padding: 0 32px 0 0;
  border-radius: var(--r-full);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23171717' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--gray-900);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* 見た目からは外すが読み上げには残す（「並び替え」= <select> の名前） */
body[data-page="create"] .myproj-scope .myproj-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── 区分のセグメント（すべて / 公開中 / 共有可能 / 下書き）────────────────────────
   旧: 3 等分の大きな数字タイル（高さ 66px）。新: 中身の幅のピル。白い下敷き（.filter-slider）は
   app.js positionProjectFilterPill が効いているタブの位置・幅を測って置き、2 回目からバネで滑らせる。 */
body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .games-filter-bar {
  display: inline-flex;
  max-width: 100%;
  min-height: 0;
  margin: 14px 0 0;
  padding: 3px;
  gap: 0;
  border-radius: var(--r-full);
  background: #E7E7EA;
  /* 狭い画面・長い言語（Compartilhável 等）で 4 つが入らないときは横に送れる。バーは出さない */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .games-filter-bar::-webkit-scrollbar {
  display: none;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .filter-slider {
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 0;
  border-radius: var(--r-full);
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  opacity: 0;
  transition: none;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .filter-slider.is-positioned {
  opacity: 1;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .filter-slider.is-placed {
  transition: transform .45s var(--myproj-spring), width .45s var(--myproj-spring);
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .filter-tab {
  flex: none;
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
  min-height: 38px;
  padding: 0 14px;
  align-content: center;
  justify-content: center;
  display: inline-flex;
  line-height: 38px;
  border-radius: var(--r-full);
  color: var(--gray-600);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color .25s var(--myproj-ease);
}

/* 見た目 38px + 上下 3px の張り出し = 当たり判定 44px（バーの内側余白 3px の上に重なる） */
body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .filter-tab::after {
  content: '';
  position: absolute;
  inset: -3px 0;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .filter-tab.active {
  color: var(--gray-900);
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .filter-tab:active {
  transform: none;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .filter-tab:focus-visible {
  outline: 2px solid var(--gray-900);
  outline-offset: -2px;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .filter-count {
  color: var(--gray-400);
  font-size: 13px;
  font-weight: 600;
  line-height: inherit;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  transform: none;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .filter-tab.active .filter-count {
  color: var(--gray-500);
}

/* お題の細帯の器（中身の見た目は challenge-entry.js の .dc-pstrip）。/create では出さない:
   SPA で /projects → /create に戻ったとき、帯が残って大きい参加カードと二重にならないように */
body[data-page="create"] .project-list-view:not(.projects-list-mode) .myproj-scope .myproj-odai {
  display: none;
}

/* ── 格子: 1280px 幅の PC で 1 段 4 枚 / スマホは 2 列 ─────────────────────────────
   承認モックは minmax(230px, 1fr)。ただしモックの本文幅は約 1180px で、実際の Create の柱は
   1040px − 左右 32px = 976px（style.css「ページ全体を1本の柱に」・founder 2026-07-30）、
   1280px でサイドバーを開くと 1280 − 280 − 64 = 936px。230px だと 976px で 4×230+60 = 980px と
   4px 足りず 3 枚に落ちる（2026-09-23 実測）。founder の意図「1280px で 4 枚」を守るため最小幅を 216px にした:
     976px → 4 枚（各 229px）/ 936px → 4 枚（各 219px）/ 768px 幅のタブレット → 3 枚 */
body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 20px;
  margin-top: 18px;
}

/* お題の帯が出ている回は帯自身の下余白（18px）で離れるので、格子の上は詰める */
body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .myproj-odai:not([hidden]) + .project-grid {
  margin-top: 0;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .project-grid .project-empty {
  grid-column: 1 / -1;
}

/* ── カード ─────────────────────────────────────────────────────────
   旧カード（style.css .project-card / creator.css の一覧モード）の地・枠・影・持ち上げ・赤い点を外し、
   「持ち上がる台（.myproj-frame）+ 切り抜き（.myproj-thumb）+ 題名 + 日付」に組み直す。 */
body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .project-card.myproj-card {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  transition: none;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .project-card.myproj-card::before,
body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .project-card.myproj-card::after {
  display: none;
}

body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .project-card.myproj-card:hover,
body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .project-card.myproj-card:active {
  border-color: transparent;
  background: none;
  box-shadow: none;
  transform: none;
}

body[data-page="create"] .myproj-scope .myproj-frame {
  position: relative;
  border-radius: var(--myproj-radius);
  box-shadow: var(--myproj-shadow), var(--myproj-hair);
  transition: transform .45s var(--myproj-spring);
}

/* 持ち上げた時の深い影は、別の層の opacity で出す（box-shadow そのものは動かさない = 合成だけで済む） */
body[data-page="create"] .myproj-scope .myproj-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  box-shadow: var(--myproj-shadow-lift);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--myproj-ease);
}

body[data-page="create"] .myproj-scope .myproj-thumb {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--myproj-radius);
  background: #EEF0F3;
  /* Safari: 角丸 + overflow:hidden の中で子（画像）を transform すると、角の切り抜きが一瞬外れる不具合の回避 */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

body[data-page="create"] .myproj-scope .myproj-thumb img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .6s var(--myproj-ease), filter .6s var(--myproj-ease), transform .6s var(--myproj-ease);
}

/* 仮置き（サムネ無し = 未公開で 404 / 読み込み失敗）: 色の面 + 題名。表示は img の onerror が切り替える */
body[data-page="create"] .myproj-scope .myproj-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

body[data-page="create"] .myproj-scope .myproj-ph-title {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--white);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-align: center;
  word-break: break-word;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}

/* サムネ全面の透明ボタン = キーボード・読み上げでの「Studio で開く」。クリックはカードへ伝わり
   renderProjectGrid の click（openProjectInStudio）が拾う */
body[data-page="create"] .myproj-scope .myproj-open {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="create"] .myproj-scope .myproj-open:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--gray-900), inset 0 0 0 5px var(--white);
}

/* 左上の札: 公開中（緑の点）/ 共有可能 / 下書き。押せない（押すとカードが開く） */
body[data-page="create"] .myproj-scope .myproj-status {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 64px);
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

body[data-page="create"] .myproj-scope .myproj-status[data-status="public"] {
  color: #0F7B45;
}

body[data-page="create"] .myproj-scope .myproj-status[data-status="public"]::before,
body[data-page="create"] .myproj-scope .myproj-status[data-status="share-ready"]::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
}

/* 共有可能 = URL を知っている人だけ遊べる。色を増やさず「輪の点」で公開中（塗りの点）と分ける */
body[data-page="create"] .myproj-scope .myproj-status[data-status="share-ready"] {
  color: var(--gray-900);
}

body[data-page="create"] .myproj-scope .myproj-status[data-status="share-ready"]::before {
  box-sizing: border-box;
  background: transparent;
  border: 1.5px solid var(--gray-700);
}

body[data-page="create"] .myproj-scope .myproj-processing {
  position: absolute;
  top: 38px;
  left: 10px;
  z-index: 3;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--red);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  pointer-events: none;
}

/* ⋯ = 操作の正規の入口。どの端末でも常に見せる（スマホにホバーは無い）。見た目 34px の丸 + 張り出しで 44px */
body[data-page="create"] .myproj-scope .myproj-menu {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
}

body[data-page="create"] .myproj-scope .project-card-menu.myproj-menu > summary.myproj-more {
  position: relative;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--gray-900);
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .3);
  transition: transform .2s var(--myproj-ease);
}

body[data-page="create"] .myproj-scope .project-card-menu.myproj-menu > summary.myproj-more::after {
  content: '';
  position: absolute;
  inset: -5px;
}

body[data-page="create"] .myproj-scope .project-card-menu.myproj-menu > summary.myproj-more:active {
  transform: scale(.92);
}

body[data-page="create"] .myproj-scope .project-card-menu.myproj-menu[open] > summary.myproj-more {
  background: var(--white);
}

body[data-page="create"] .myproj-scope .project-card-menu.myproj-menu > summary.myproj-more:focus-visible {
  outline: 2px solid var(--gray-900);
  outline-offset: 2px;
}

/* メニューの行も指で押せる 44px に（/create の棚の ⋮ は 40px のまま） */
body[data-page="create"] .myproj-scope .myproj-menu .project-card-menu-popover {
  min-width: 188px;
  border-radius: 14px;
}

body[data-page="create"] .myproj-scope .myproj-menu .project-card-menu-popover button {
  min-height: 44px;
  font-size: 13px;
}

/* 近道「Make」「共有」: マウスの端末で乗せた時 / キーボードでカード内にフォーカスがある時だけサムネ下端に浮く。
   スマホには出さない（⋯ に同じ操作がある）。隠れている間は visibility で押せない・タブで止まらない */
body[data-page="create"] .myproj-scope .myproj-shortcuts {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: flex;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .25s var(--myproj-ease), transform .35s var(--myproj-ease), visibility 0s linear .35s;
}

body[data-page="create"] .myproj-scope .myproj-card:has(:focus-visible) .myproj-shortcuts {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s var(--myproj-ease), transform .35s var(--myproj-ease), visibility 0s;
}

body[data-page="create"] .myproj-scope .myproj-shortcut {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .3);
  color: var(--gray-900);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

body[data-page="create"] .myproj-scope .myproj-shortcut.is-primary {
  background: var(--gray-900);
  color: var(--white);
}

body[data-page="create"] .myproj-scope .myproj-shortcut:focus-visible {
  outline: 2px solid var(--gray-900);
  outline-offset: 2px;
}

body[data-page="create"] .myproj-scope .myproj-shortcut.is-primary:focus-visible {
  outline-color: var(--white);
  box-shadow: 0 0 0 4px var(--gray-900);
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="create"] .myproj-scope .myproj-card:hover .myproj-shortcuts {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s var(--myproj-ease), transform .35s var(--myproj-ease), visibility 0s;
  }
  body[data-page="create"] .myproj-scope .myproj-card:hover .myproj-frame {
    transform: translateY(-4px);
  }
  body[data-page="create"] .myproj-scope .myproj-card:hover .myproj-frame::after {
    opacity: 1;
  }
  body[data-page="create"] .myproj-scope .myproj-card:hover .myproj-thumb img {
    transform: scale(1.04);
  }
  body[data-page="create"] .myproj-scope .myproj-shortcut:hover {
    background: var(--white);
  }
  body[data-page="create"] .myproj-scope .myproj-shortcut.is-primary:hover {
    background: #000;
  }
}

/* 押した手応え: サムネ（= Studio を開く面）を押している間だけ沈む。⋯ や近道を押した時にカードごと沈むと
   「カードを開いた」ように見えるので、:has で押している場所を絞る（:has 未対応は沈まないだけ） */
body[data-page="create"] .myproj-scope .myproj-card:has(.myproj-open:active) .myproj-frame {
  transform: scale(.97);
  transition-duration: .12s;
}

body[data-page="create"] .myproj-scope .myproj-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
  margin: 9px 2px 2px;
  padding: 0;
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.01em;
  word-break: break-word;
}

body[data-page="create"] .myproj-scope .myproj-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 2px;
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

/* 違うブランドで作ったものだけに付く札（app.js isForeignProjectBrand） */
body[data-page="create"] .myproj-scope .myproj-brand {
  padding: 1px 6px;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  color: var(--gray-700);
  font-size: 9px;
  letter-spacing: .02em;
}

/* ── 先頭タイル「＋ 新しくつくる」（点線の正方形 + 赤い丸）────────────────────────── */
body[data-page="create"] .myproj-scope .myproj-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 12px;
  border: 2px dashed #D4D4D8;
  border-radius: var(--myproj-radius);
  background: rgba(255, 255, 255, .6);
  color: var(--gray-600);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .45s var(--myproj-spring), border-color .2s ease, color .2s ease;
}

body[data-page="create"] .myproj-scope .myproj-new-plus {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  box-shadow: 0 8px 16px -6px rgba(255, 59, 48, .6);
}

body[data-page="create"] .myproj-scope .myproj-new:active {
  transform: scale(.97);
  transition-duration: .12s;
}

body[data-page="create"] .myproj-scope .myproj-new:focus-visible {
  outline: none;
  border-color: var(--gray-900);
  border-style: solid;
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="create"] .myproj-scope .myproj-new:hover {
    transform: translateY(-4px);
    border-color: var(--red);
    color: var(--gray-900);
  }
}

/* ── 動き: 画像の到着（ぼかし → くっきり）と、最初の 1 回だけの入場 ─────────────────────
   付け外しは app.js enhanceMyProjectsGrid（/create のレール enhanceCreateRail と同じ作法）。
   JS が走らなければどちらの印も付かない = 最初から普通に見える。 */
body[data-page="create"] .myproj-scope .project-grid.myproj-arrive .myproj-card:not(.is-loaded) .myproj-thumb img {
  opacity: 0;
  filter: blur(14px);
  transform: scale(1.06);
}

/* 未着の間は仮置き（色の面）も出さない = 淡い地 → 画像。失敗したら is-loaded と同時に仮置きが見える */
body[data-page="create"] .myproj-scope .project-grid.myproj-arrive .myproj-card:not(.is-loaded) .myproj-ph {
  visibility: hidden;
}

/* 低スペック端末（isCreateRailLowEndDevice）: blur を省いて透明 → 不透明だけ */
body[data-page="create"] .myproj-scope .project-grid.myproj-arrive--lite .myproj-card:not(.is-loaded) .myproj-thumb img {
  filter: none;
  transform: none;
}

body[data-page="create"] .myproj-scope .myproj-card.is-instant .myproj-thumb img {
  transition: none;
}

/* 入場: 60ms ずつ遅れて上がる（--myproj-i は app.js が 0..12 で振る。0 = 新しくつくる）。
   アニメーションの定義 myprojEnter は style.css（critical）にある（バンドルに定義を置かない決め事） */
body[data-page="create"] .myproj-scope .project-grid.myproj-enter > .myproj-card,
body[data-page="create"] .myproj-scope .project-grid.myproj-enter > .myproj-new {
  animation: myprojEnter .7s var(--myproj-ease) both;
  animation-delay: calc(var(--myproj-i, 0) * 60ms);
}

/* ── スマホ幅: 見出しの下に検索と並び替え / 2 列 / 余白を詰める ─────────────────────── */
@media (max-width: 600px) {
  body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .create-section-head h2 {
    font-size: 22px;
  }
  body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .projects-controls {
    flex: 1 1 100%;
    margin-left: 0;
  }
  body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .projects-search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  /* 並び替えは隠さない（founder 2026-09-23「ソート機能はつけて」）。
     並び替えは文言の幅ぶん取り（flex:none）、縮むのは検索欄の側にする。WHY: 旧 max-width 48% だと
     375px 幅で「更新が新しい順」が「更新が新し…」に切れて、何順か読めなかった（2026-09-23 実測）。
     検索欄は虫眼鏡 + 入力なので 150px 前後まで縮んでも用が足りる。max-width 62% は長い言語の保険 */
  body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .projects-sort {
    flex: 0 0 auto;
    max-width: 62%;
  }
  body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .projects-sort select {
    width: 100%;
    text-overflow: ellipsis;
  }
  /* 390px 幅（本文 350px）で 4 つが収まる幅（ja 実測: 左右 14px だと 367px で 17px はみ出す → 8px で 343px）。
     もっと狭い端末・長い言語はバーの横スクロールに任せる */
  body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .filter-tab {
    gap: 4px;
    padding: 0 8px;
  }
  body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  body[data-page="create"] .myproj-scope .myproj-status {
    top: 8px;
    left: 8px;
  }
  body[data-page="create"] .myproj-scope .myproj-menu {
    top: 6px;
    right: 6px;
  }
  /* 2 列の左のカードでは、⋯ の右端に揃えたメニューが 188px だと画面の左端から外へ出る
     （390px 幅: カード 169px・⋯ の右端 179px → 左端 −9px）。スマホでは 160px に詰める */
  body[data-page="create"] .myproj-scope .myproj-menu .project-card-menu-popover {
    min-width: 160px;
    max-width: calc(100vw - 32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="create"] .project-list-view.projects-list-mode .myproj-scope .filter-slider.is-placed,
  body[data-page="create"] .myproj-scope .myproj-frame,
  body[data-page="create"] .myproj-scope .myproj-frame::after,
  body[data-page="create"] .myproj-scope .myproj-thumb img,
  body[data-page="create"] .myproj-scope .myproj-shortcuts,
  body[data-page="create"] .myproj-scope .myproj-new {
    transition: none;
  }
  body[data-page="create"] .myproj-scope .myproj-card:hover .myproj-frame,
  body[data-page="create"] .myproj-scope .myproj-card:has(.myproj-open:active) .myproj-frame,
  body[data-page="create"] .myproj-scope .myproj-card:hover .myproj-thumb img,
  body[data-page="create"] .myproj-scope .myproj-new:hover,
  body[data-page="create"] .myproj-scope .myproj-new:active {
    transform: none;
  }
  body[data-page="create"] .myproj-scope .project-grid.myproj-enter > .myproj-card,
  body[data-page="create"] .myproj-scope .project-grid.myproj-enter > .myproj-new {
    animation: none;
  }
  body[data-page="create"] .myproj-scope .project-grid.myproj-arrive .myproj-card:not(.is-loaded) .myproj-thumb img {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* =====================================================================
   「つづきから」— /create の横レール（2026-09-23 founder 承認モック uiux-demo/continue.html「案」+ PC 版・
   「両方その方針でいこう」= ① 入力欄のすぐ下（お題カードより上）② 最大 8 件 + 「すべて見る」）。
   旧: お題カードの下に全幅の行（56px サムネ + 題名 + 常設の「Make」ボタン + ⋮）。カード本体のタップが Studio に
       変わった（同日）のに Make が一番目立つのはちぐはぐ → マイプロジェクトと同じカード（上の節）を横に並べる。
   - 見分け: #projectGrid[data-list-mode="continue"]（app.js configureCreateListMode）。クラスにしない理由は
     app.js isCreateContinueRail の上の説明（app.js に書いたクラス名は 5 ページに現れる扱いになる）。
     すべての規則は .myproj-scope（create.html だけ）を含む = このファイル（create バンドル）に留まる。
   - レールの作法はテンプレ棚（.create-rail・上の「テンプレ棚」節）と同じ: 端までブリード / スナップ / バーは隠す /
     overscroll-behavior-x:contain / 横取りしない / マウスの環境だけ細いバー。カードの見た目は上のマイプロジェクト節を
     そのまま使い、ここでは「幅・文字の大きさ・旧 .project-card の地と枠を外す」だけ上書きする。
   - 動き: transform / opacity（画像だけ + filter）。reduced-motion は節の最後で止める。
   ===================================================================== */

/* 置き場所: create.html でこの節を .create-v2-section の先頭へ移した（DOM 順 = Tab・読み上げの順も
   「入力欄 → つづきから → お題」になる）。同じ節は /projects の本体でもあるので、/projects で一覧より上に出ていた
   コンテストの帯と実行中ジョブだけ、一覧モードの時に order で上へ戻す（見た目は移動前と同じ。
   .create-v2-section は display:grid の列なので order が効く） */
body[data-page="create"] .project-list-view.projects-list-mode .create-v2-section > #projectListContestBanner,
body[data-page="create"] .project-list-view.projects-list-mode .create-v2-section > #currentActiveJobSection {
  order: -1;
}

/* 0 件 / 取得失敗は節ごと出さない（app.js setCreateContinueRailState）。空の案内は置かない:
   0 件の人の次の一手は真上の入力欄で、ここに空の箱を挟むと入力欄とお題が離れるだけ */
body[data-page="create"] .project-list-view:not(.projects-list-mode) .myproj-scope[data-continue-state="empty"],
body[data-page="create"] .project-list-view:not(.projects-list-mode) .myproj-scope[data-continue-state="error"] {
  display: none;
}

/* 見出し右の「すべて見る ›」。旧 gray-400 は白地で 2.5:1（AA 未達）→ テンプレ棚の「すべて見る」と同じ gray-600。
   「›」は飾り（`/ ""` = 読み上げ用の代替文字を空にする。未対応の古いブラウザは 1 行目の宣言が効く） */
body[data-page="create"] .project-list-view:not(.projects-list-mode) .myproj-scope .create-section-head a {
  color: var(--gray-600);
  font-size: 0.78rem;
}

body[data-page="create"] .project-list-view:not(.projects-list-mode) .myproj-scope .create-section-head a::after {
  content: " ›";
  content: " ›" / "";
}

/* 親（.create-v2-section）は grid の列。grid の子は既定で min-width:auto（= 中身の最小幅）なので、横に長いレールを
   抱えた節が列を押し広げてページごと横にはみ出す（テンプレ節の .create-template-section と同じ対処） */
body[data-page="create"] .project-list-view:not(.projects-list-mode) .myproj-scope {
  min-width: 0;
  max-width: 100%;
}

/* ── レール本体 ─────────────────────────────────────────────────── */
body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] {
  /* マイプロジェクト節の変数は /projects（一覧モード）でしか定義していないので、レールにも置く。
     角丸だけ 18 → 16（カードが 132/168px と小さいので、18 だと角が丸すぎて正方形に見えない。承認モックの値） */
  --myproj-ease: cubic-bezier(.16, 1, .3, 1);
  --myproj-spring: cubic-bezier(.34, 1.56, .64, 1);
  --myproj-shadow: 0 1px 2px rgba(28, 28, 30, .04), 0 12px 32px -18px rgba(28, 28, 30, .22);
  --myproj-shadow-lift: 0 1px 2px rgba(28, 28, 30, .05), 0 2px 6px -2px rgba(28, 28, 30, .06), 0 18px 40px -20px rgba(28, 28, 30, .28);
  --myproj-hair: inset 0 0 0 1px rgba(0, 0, 0, .05);
  --myproj-radius: 16px;
  /* = .games-section の左右パディング（PC 32px / スマホ 16px）。テンプレ棚（.create-rail）と同じ値 */
  --continue-gutter: var(--s-32);
  /* PC 168px = 976px の本文で 5〜6 枚見える（承認モックの PC 版）。スマホは下の @media で 132px */
  --continue-card-w: 168px;
  --continue-gap: 14px;
  display: flex;
  align-items: flex-start;
  gap: var(--continue-gap);
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 calc(-1 * var(--continue-gutter));
  /* 上 6px = hover の -4px 持ち上げが切れない逃げ / 下 16px = カードの柔らかい影が切れない逃げ */
  padding: 6px var(--continue-gutter) 16px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--continue-gutter);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
}

body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"]::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {
  body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] {
    --continue-gutter: var(--s-16);
    /* 132px = 375px 幅で 16 + 132×2 + 10×2 = 300 → 3 枚目が半分強のぞく = 「横に続きがある」が伝わる（承認モック） */
    --continue-card-w: 132px;
    --continue-gap: 10px;
  }
}

/* マウス/トラックパッド: mandatory の吸い付きは強すぎるので proximity。細いバーはレールに乗った時だけ色が付く */
@media (hover: hover) and (pointer: fine) {
  body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] {
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"]:hover {
    scrollbar-color: rgba(0, 0, 0, .18) transparent;
  }
}

/* ── カード: 旧 .project-card（style.css）の地・枠・赤い点・hover の持ち上げを外す（/projects の節と同じ処置）── */
body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] > .myproj-card,
body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] > .myproj-skel {
  flex: 0 0 var(--continue-card-w);
  min-width: 0;
  scroll-snap-align: start;
}

body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] > .project-card.myproj-card {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  transition: none;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] > .project-card.myproj-card::before,
body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] > .project-card.myproj-card::after {
  display: none;
}

body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] > .project-card.myproj-card:hover,
body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] > .project-card.myproj-card:active {
  border-color: transparent;
  background: none;
  box-shadow: none;
  transform: none;
}

/* ⋯ が開いている間: カードを前に出し、台の持ち上げを止める。メニューは app.js bindCreateContinueRailMenus が
   position:fixed で画面座標に置く（横スクロールの箱は縦も切り抜くため）。祖先に transform が残ると fixed の基準が
   ずれるので、開いている間は持ち上げない（JS 側でも差分を測って補正している二重の保険） */
/* 開いている間は入場アニメも持ち上げの戻り（.45s）も **即座に** 止める（PR #927 レビュー P1-1）。
   transform:none だけだと 0.45 秒かけて戻るため、JS が測った瞬間はまだ持ち上がっていて基準がカード、
   戻り切った後は基準が画面になり、PC でメニューが左上へ飛んだ（実測: 狙い (230,146) → 0.7 秒後 (10,30)） */
body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] > .myproj-card:has(.project-card-menu[open]) {
  z-index: 5;
  animation: none;
  transform: none;
}

body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] > .myproj-card:has(.project-card-menu[open]) .myproj-frame {
  transform: none;
  transition: none;
}

/* 左上の札: 132px のカードに 11px だと「共有可能」が切れる → 10px・余白を詰める */
body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] .myproj-status {
  top: 7px;
  left: 7px;
  max-width: calc(100% - 52px);
  padding: 2px 7px;
  gap: 4px;
  font-size: 10px;
}

body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] .myproj-processing {
  top: 30px;
  left: 7px;
  padding: 2px 7px;
  font-size: 10px;
}

/* 完成直後でまだ開いていない = NEW（2026-07-30 founder 提案の NEW チップを札に引き継いだ。app.js renderMyProjectCard isNew）。
   ブランドの赤で塗る = 棚の中でこれだけが「新しく届いた」と分かる */
body[data-page="create"] .myproj-scope .myproj-status[data-status="new"] {
  background: var(--red);
  color: var(--white);
  letter-spacing: .06em;
}

/* ⋯: 見た目 30px の丸（132px のカードに 34px は大きすぎる）+ 透明な張り出し 7px で当たり判定 44px */
body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] .myproj-menu {
  top: 5px;
  right: 5px;
}

body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] .project-card-menu.myproj-menu > summary.myproj-more {
  width: 30px;
  height: 30px;
}

body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] .project-card-menu.myproj-menu > summary.myproj-more::after {
  inset: -7px;
}

/* 仮置き（サムネ無し）の題名: 小さいカードに合わせて縮める */
body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] .myproj-ph {
  padding: 10px;
}

body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] .myproj-ph-title {
  font-size: 12px;
}

/* マウスの近道「Make」「共有」: 168px のカードに収まる大きさへ */
body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] .myproj-shortcuts {
  left: 7px;
  right: 7px;
  bottom: 7px;
  gap: 5px;
}

body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] .myproj-shortcut {
  min-height: 32px;
  padding: 0 6px;
  font-size: 11.5px;
}

/* 題名は常に 2 行ぶんの高さを取る = 1 行の題名のカードと 2 行のカードでレールの下端が揃い、仮置き（下）とも同じ高さ
   → 届いた時に下のお題・テンプレが動かない */
body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] .myproj-title,
body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] .myproj-skel-title {
  margin: 8px 2px 1px;
  font-size: 12.5px;
  line-height: 1.35;
  min-height: calc(2em * 1.35);
}

body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] .myproj-meta,
body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] .myproj-skel-meta {
  margin: 0 2px;
  font-size: 11px;
  line-height: 1.4;
  min-height: 1.4em;
}

@media (min-width: 769px) {
  body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] .myproj-title,
  body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] .myproj-skel-title {
    font-size: 13px;
  }
}

/* ── 取得待ちの仮置き（正方形 4 枚）─────────────────────────────────────
   本物のカードと同じ寸法（正方形 + 題名 2 行 + 日付 1 行）。明滅は style.css の既存のキーフレーム pulse（opacity だけ）を使う
   （キーフレーム定義はバンドルに置けない決め事・マイプロジェクト節の myprojEnter と同じ理由） */
body[data-page="create"] .myproj-scope .myproj-skel {
  pointer-events: none;
  animation: pulse 1.6s ease-in-out infinite;
}

body[data-page="create"] .myproj-scope .myproj-skel-thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--myproj-radius, 16px);
  background: #EEF0F3;
}

body[data-page="create"] .myproj-scope .myproj-skel-title span,
body[data-page="create"] .myproj-scope .myproj-skel-meta span {
  display: block;
  height: .8em;
  border-radius: 6px;
  background: #EEF0F3;
}

body[data-page="create"] .myproj-scope .myproj-skel-title span {
  width: 88%;
  margin-top: .28em;
}

body[data-page="create"] .myproj-scope .myproj-skel-title span + span {
  width: 56%;
  margin-top: .55em;
}

body[data-page="create"] .myproj-scope .myproj-skel-meta {
  display: flex;
  align-items: center;
}

body[data-page="create"] .myproj-scope .myproj-skel-meta span {
  width: 40%;
}

/* ── 最後のタイル「すべて見る（総数）」→ /projects ─────────────────────────────
   高さはサムネと同じ正方形の列に揃え、幅は少し細く（承認モック: スマホ 96px 前後 / PC 120px）。
   カードではない（押すと一覧へ行く道標）ので、写真の代わりに淡い灰の面 + 白い丸の › */
body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] > .myproj-all {
  flex: 0 0 auto;
  width: 104px;
  height: var(--continue-card-w);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: var(--myproj-radius);
  background: var(--gray-100);
  box-shadow: var(--myproj-hair);
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .45s var(--myproj-spring), background-color .2s ease;
}

@media (min-width: 769px) {
  body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] > .myproj-all {
    width: 120px;
  }
}

body[data-page="create"] .myproj-scope .myproj-all-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  color: var(--gray-900);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .25);
}

body[data-page="create"] .myproj-scope .myproj-all-count {
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

body[data-page="create"] .myproj-scope .myproj-all:active {
  transform: scale(.96);
  transition-duration: .12s;
}

body[data-page="create"] .myproj-scope .myproj-all:focus-visible {
  outline: 2px solid var(--gray-900);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="create"] .myproj-scope .myproj-all:hover {
    transform: translateY(-4px);
    background: var(--gray-200);
  }
}

/* 入場（最初の 1 回だけ・app.js enhanceMyProjectsGrid の enterFlag）: カードと同じ時差で最後のタイルも上がる */
body[data-page="create"] .myproj-scope .project-grid.myproj-enter > .myproj-all {
  animation: myprojEnter .7s var(--myproj-ease) both;
  animation-delay: calc(var(--myproj-i, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="create"] .myproj-scope .myproj-skel {
    animation: none;
  }
  body[data-page="create"] .myproj-scope .project-grid[data-list-mode="continue"] > .myproj-all {
    transition: none;
  }
  body[data-page="create"] .myproj-scope .myproj-all:hover,
  body[data-page="create"] .myproj-scope .myproj-all:active {
    transform: none;
  }
  body[data-page="create"] .myproj-scope .project-grid.myproj-enter > .myproj-all {
    animation: none;
  }
}