/* make-v8 — "Live Game Cover": a big game title-card is the persistent hero,
   coming alive as you choose; choices live in a compact bottom picker.
   Onboarding world: warm gradient, white card, red→orange gradient title, dark badge. */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--red:#ff3b30;--ink:#171717;--muted:#737373;--faint:#a9a39c;--line:#ece8e3;--paper:#fff;--soft:#faf7f3;
  --lip:#e7e1d9;--lip-red:#d22f25;--grad:linear-gradient(92deg,#ff3b30,#ff8a2b);
  --ease:cubic-bezier(.16,1,.3,1);--bounce:cubic-bezier(.34,1.56,.64,1);
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
html,body{margin:0;min-height:100%;background:#fff;color:var(--ink)}
body{font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",-apple-system,BlinkMacSystemFont,"Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased}
body[data-page="make"]{background:#fff}
/* The /make wizard suppresses the global bottom nav (see navigation.css /
   shouldEnableDrawerForCurrentPage), so we do NOT reserve bottom-nav space here.
   Instead the primary CTA lives in a sticky footer (.v8-pick) that is always
   pinned in-viewport regardless of screen height. */
.v8{width:min(100%,480px);margin:0 auto;min-height:100vh;min-height:100dvh;overflow:visible;display:flex;flex-direction:column;
  padding:calc(12px + var(--safe-top)) 18px 0;
  background:#fff}

.v8-top{height:44px;display:flex;align-items:center;gap:12px;flex-shrink:0}
.v8-back,.v8-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .15s var(--ease);flex:0 0 44px}
.v8-back:active,.v8-close:active{transform:scale(.92)}
.v8-dots{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px}
.v8-dot{width:7px;height:7px;border-radius:99px;background:#e4ddd4;transition:width .3s var(--ease),background .3s var(--ease)}
.v8-dot.on{background:var(--red);width:20px}
.v8-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:44px;flex:0 0 auto}
.v8-omakase{display:inline-flex;align-items:center;gap:6px;min-height:44px;border:1px solid var(--line);background:rgba(255,255,255,.9);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-weight:800;font-size:.82rem;cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .12s var(--ease)}
.v8-omakase:active{transform:scale(.95)}
.v8-omakase svg{width:17px;height:17px}
@media (max-width:360px){
  .v8-omakase{width:44px;min-width:44px;padding:0;border-radius:50%;justify-content:center}
  .v8-omakase span{display:none}
}

/* the cover (hero) */
.v8-cover{flex:1;min-height:360px;margin:12px 0 0;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:20px;border-radius:28px;background:radial-gradient(120% 78% at 50% 22%,#fff 0%,#fbf4ef 100%);border:1px solid var(--line);
  box-shadow:0 2px 4px rgba(40,20,10,.05),0 18px 38px -24px rgba(60,30,15,.3)}
.v8-cover.pop{animation:pop .5s var(--bounce)}
@keyframes pop{0%{transform:scale(.97)}55%{transform:scale(1.012)}100%{transform:none}}
.v8-badge{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:.62rem;font-weight:900;letter-spacing:.12em;color:#fff;background:#1c1b1a;border-radius:999px;padding:6px 12px}
.v8-cover.ready .v8-badge{background:var(--red)}
.v8-star{width:min(52vw,210px);aspect-ratio:1/1;display:grid;place-items:center;margin-top:14px}
.v8-star img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:18px;animation:bob 3.6s var(--ease) infinite;filter:drop-shadow(0 18px 24px rgba(0,0,0,.16))}
/* A1: star pops in (overshoot+rotate), then settles into bob */
.v8-star.enter img{animation:v8pop .55s var(--bounce),bob 3.6s var(--ease) .55s infinite}
@keyframes v8pop{0%{transform:scale(0) rotate(-12deg);opacity:0}60%{transform:scale(1.16) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.v8-star.has{}
.v8-star-ph{width:60%;height:60%;border-radius:24px;border:2.5px dashed #e4ddd4;display:block}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.v8-title{margin:0;text-align:center;font-weight:900;font-size:1.74rem;line-height:1.22;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere}
.v8-title .hot{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.v8-title .ghost{color:var(--faint);border-bottom:3px solid var(--line);padding:0 .1em}
.v8-title .ph{color:var(--faint);font-size:1.3rem}
.v8-title .big{font-size:1.3rem}
/* A1: title words bounce-assemble (staggered) */
.v8-title .v8-w{display:inline-block}
.v8-title.assemble .v8-w{animation:v8word .5s var(--bounce) both}
@keyframes v8word{0%{transform:scale(0) translateY(8px);opacity:0}65%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
/* A1: confetti burst on "つくる" */
.v8-confetti{position:fixed;width:10px;height:10px;border-radius:2px;opacity:0;z-index:30;pointer-events:none}
/* step transition: new question slides in (forward=right / back=left) so advancing is noticeable */
.v8-pick.stepin{animation:v8stepin .34s var(--ease)}
.v8-pick.stepin-back{animation:v8stepinBack .34s var(--ease)}
@keyframes v8stepin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes v8stepinBack{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
/* old question leaves first (after a beat) so the change is felt, not jump-cut */
.v8-pick.leaving{animation:v8leave .3s var(--ease) forwards}
@keyframes v8leave{to{opacity:0;transform:translateX(-20px)}}
.v8-cover-tags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.v8-cover-tags:empty{display:none}
.v8-ctag{font-size:.72rem;font-weight:800;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 11px}
/* final "ready" step: enlarge the hero image (payoff moment) */
.v8-cover.ready{gap:18px}
.v8-cover.ready .v8-star{width:min(76vw,320px);margin-top:6px}
.v8-cover.ready .v8-star img{border-radius:22px;filter:drop-shadow(0 22px 30px rgba(0,0,0,.18))}
.v8-cover.ready .v8-title{font-size:2rem}

/* bottom picker */
/* Sticky footer: keeps the picker + primary CTA (次へ/つくる) pinned to the
   bottom of the viewport at every screen height. On short screens the hero
   (.v8-cover) scrolls up behind it so the CTA is never clipped or off-screen. */
.v8-pick{flex-shrink:0;display:flex;flex-direction:column;padding-top:20px;
  position:sticky;bottom:0;z-index:5;
  padding-bottom:calc(12px + var(--safe-bottom));
  margin-top:auto;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 14px,#fff 100%)}
.v8-prompt{margin:0 0 15px;text-align:center;font-weight:800;font-size:1.18rem;line-height:1.3}
.v8-prompt .hot{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.v8-prompt .who{color:var(--red)}
.v8-picker.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.v8-opt{min-height:66px;border:1px solid var(--line);background:#fff;border-radius:16px;box-shadow:0 3px 0 var(--lip);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 4px 7px;font:inherit;transition:transform .12s var(--ease),box-shadow .12s var(--ease),border-color .12s var(--ease)}
.v8-opt:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
.v8-opt-pic{width:46px;height:46px;display:grid;place-items:center}
.v8-opt-pic img{width:46px;height:46px;object-fit:contain}
.v8-opt-l{font-size:.74rem;font-weight:800;line-height:1.1}
.v8-opt.sel{border-color:var(--red);box-shadow:0 3px 0 var(--lip-red),0 0 0 2px var(--red)}
.v8-picker.hint{display:block}
.v8-hint{margin:0;text-align:center;color:var(--muted);font-weight:700;font-size:.9rem;line-height:1.5}
.v8-picker:not(.grid):not(.hint):not(.note){display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.v8-chip{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:10px 17px 12px;font:inherit;font-weight:800;font-size:.96rem;box-shadow:0 3px 0 var(--lip);cursor:pointer;transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .15s,color .15s,border-color .15s}
.v8-chip:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
.v8-chip.sel{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 3px 0 var(--lip-red)}
.v8-picker.note{display:block}
.v8-note-d{border:1px solid var(--line);background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(20,20,20,.04);overflow:hidden}
.v8-note-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:14px 15px;font-weight:800;font-size:.92rem;color:var(--muted)}
.v8-note-sum::-webkit-details-marker{display:none}
.v8-plus{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--soft);color:var(--red);font-weight:900;transition:transform .2s var(--ease)}
.v8-note-d[open] .v8-plus{transform:rotate(45deg)}
.v8-note-hint{margin:-4px 0 0;padding:0 15px 12px;font-size:.8rem;font-weight:700;line-height:1.55;color:var(--muted)}
.v8-note{width:100%;min-height:80px;border:none;border-top:1px solid var(--line);padding:13px 15px;font:inherit;font-weight:700;line-height:1.5;outline:none;background:#fff;resize:none;color:var(--ink)}

.v8-cta{display:flex;flex-direction:column;gap:10px;padding-top:12px}
.v8-cta:empty{display:none}
.v8-primary,.v8-secondary{width:100%;min-height:56px;border-radius:18px;font:inherit;font-weight:800;font-size:1.06rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.v8-primary{border:none;background:var(--red);color:#fff;box-shadow:0 5px 0 var(--lip-red),0 16px 26px -14px rgba(255,59,48,.55)}
.v8-primary:active{transform:translateY(5px);box-shadow:0 0 0 var(--lip-red)}
.v8-secondary{border:1px solid var(--line);background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--lip)}
.v8-secondary:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)}
.v8-make{animation:glow 2.2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 5px 0 var(--lip-red),0 16px 26px -14px rgba(255,59,48,.5)}50%{box-shadow:0 5px 0 var(--lip-red),0 20px 34px -10px rgba(255,59,48,.85)}}
.v8-error{display:none;margin:8px 0 0;text-align:center;color:var(--red);font-weight:800;font-size:.9rem}

.v8-overlay{position:fixed;inset:0;z-index:2200;display:none;align-items:center;justify-content:center;text-align:center;padding:36px;background:rgba(255,255,255,.96)}
.v8-overlay.show{display:flex}
.v8-ov-k{color:var(--red);font-size:.7rem;font-weight:900;letter-spacing:.18em;margin:0}
.v8-ov-t{font-size:1.4rem;font-weight:900;line-height:1.4;margin:12px 0 0}
.v8-track{width:200px;height:7px;border-radius:99px;background:#ece6df;overflow:hidden;margin:22px auto 0;position:relative}
.v8-track::after{content:"";position:absolute;inset:0;width:46%;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(255,59,48,.34),transparent);transform:translateX(-120%);animation:v8-track-sweep 1.25s linear infinite;z-index:2}
.v8-fill{height:100%;width:14%;min-width:28px;background:var(--red);border-radius:99px;transition:width .5s var(--ease);position:relative;overflow:hidden;z-index:1}
.v8-fill::after{content:"";position:absolute;top:0;bottom:0;width:42px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);transform:translateX(-120%);animation:v8-fill-shine 1s linear infinite}
@keyframes v8-track-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(260%)}}
@keyframes v8-fill-shine{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}

@media (max-height:720px){.v8-title{font-size:1.5rem}.v8-star{width:min(42vw,160px)}.v8-prompt{font-size:1.02rem}
  .v8-cover{min-height:240px}
  .v8-cover.ready .v8-star{width:min(56vw,210px)}.v8-cover.ready .v8-title{font-size:1.6rem}}
/* Very short viewports (landscape phones, split-screen): let the hero shrink
   further and tighten the picker so the sticky CTA stays comfortably in view. */
@media (max-height:560px){
  .v8-cover{min-height:150px;margin-top:8px}
  .v8-star{width:min(30vw,120px)}
  .v8-pick{padding-top:12px}
  .v8-prompt{margin-bottom:10px}
}
@media (min-width:900px){
  .v8{width:min(100%,1120px);min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(360px,520px) minmax(390px,500px);grid-template-rows:auto minmax(0,1fr);column-gap:48px;row-gap:20px;align-items:center;padding:28px 40px 44px}
  .v8-top{grid-column:1/-1;width:100%;max-width:none;margin:0}
  .v8-cover{grid-column:1;grid-row:2;margin:0;min-height:min(680px,calc(100dvh - 148px));max-height:760px;padding:34px;border-radius:34px}
  /* Desktop is a centered 2-column layout where the CTA is always visible,
     so we drop the mobile sticky-footer treatment here. */
  .v8-pick{grid-column:2;grid-row:2;width:100%;max-width:500px;align-self:center;padding:0;
    position:static;margin-top:0;background:none}
  .v8-prompt{text-align:left;font-size:1.55rem;margin-bottom:20px}
  .v8-picker.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .v8-opt{min-height:88px;border-radius:18px}
  .v8-opt-pic,.v8-opt-pic img{width:54px;height:54px}
  .v8-opt-l{font-size:.82rem}
  .v8-picker:not(.grid):not(.hint):not(.note){justify-content:flex-start}
  .v8-chip{min-height:50px;font-size:1rem;padding:11px 19px 13px}
  .v8-hint{text-align:left;font-size:1rem}
  .v8-cta{padding-top:18px}
  .v8-primary,.v8-secondary{min-height:60px;border-radius:20px}
  .v8-star{width:min(23vw,260px)}
  .v8-title{font-size:2.2rem}
  .v8-cover.ready .v8-star{width:min(30vw,360px)}
  .v8-cover.ready .v8-title{font-size:2.55rem}
}
@media (min-width:1280px){
  .v8{column-gap:64px}
}
/* a11y: visible keyboard focus + disabled state */
.v8-back:focus-visible,.v8-close:focus-visible,.v8-omakase:focus-visible,.v8-opt:focus-visible,.v8-chip:focus-visible,.v8-primary:focus-visible,.v8-secondary:focus-visible,.v8-note-sum:focus-visible{outline:3px solid rgba(255,59,48,.6);outline-offset:3px}
.v8-note:focus-visible{outline:3px solid rgba(255,59,48,.6);outline-offset:-3px} /* キーボードフォーカスを可視化（PR#257 レビュー指摘） */
.v8-primary:disabled,.v8-secondary:disabled{opacity:.45;box-shadow:none;cursor:not-allowed;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.06s!important}
  .v8-opt:active,.v8-chip:active,.v8-primary:active,.v8-secondary:active,.v8-back:active,.v8-close:active,.v8-omakase:active{transform:none}
}

/* ===== character deep-dive step（写真アップ直後の1画面。2026-07-03） =====
   .v8-picker.char は縦積み。チップは既存 .v8-chip を流用し、複数選択でも見た目を揃える。
   入力欄（.v8-char-name）はチップの後＝「選択肢の先の逃げ道」として置く設計。 */
.v8-picker.char{display:flex;flex-direction:column;gap:12px}
.v8-char-type{display:flex;gap:8px}
.v8-chip-s{min-height:38px;font-size:.85rem;padding:7px 14px 9px}
.v8-char-name{width:100%;min-height:48px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px 15px;font:inherit;font-weight:800;font-size:1rem;color:var(--ink);outline:none;box-shadow:0 1px 2px rgba(20,20,20,.04)}
.v8-char-name::placeholder{color:var(--muted);font-weight:700}
.v8-char-name:focus{border-color:var(--red)}
.v8-char-hint{margin:2px 0 -4px;font-size:.8rem;font-weight:700;color:var(--muted)}
.v8-char-traits{display:flex;flex-wrap:wrap;gap:8px}
.v8-char-more{display:flex;flex-direction:column;gap:10px;padding:0 15px 14px;border-top:1px solid var(--line)}
.v8-char-more .v8-char-name{margin-top:10px;box-shadow:none}
.v8-char-more .v8-char-name + .v8-char-name{margin-top:0}

/* 生成待ちの実況行（ユーザー入力を引用するセリフ。4秒ごとにフェードで切替） */
.v8-ov-sub{min-height:1.6em;margin:10px 0 0;font-size:.95rem;font-weight:700;line-height:1.55;color:var(--muted);opacity:0}
.v8-ov-sub.in{animation:v8OvSubIn .45s ease forwards}
@keyframes v8OvSubIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.v8-char-group{margin:8px 0 -4px;font-size:.78rem;font-weight:900;letter-spacing:.06em;color:var(--muted)}

/* ===== app-shell 配下のスクロール（2026-07-05 サンドボックス検証フィードバック） =====
   app-shell では style.css が html,body を height:100dvh + overflow:hidden に固定する
   （各ページが内部スクロールコンテナを持つ設計。例: create の .project-list-view）。
   make は従来全ステップが1画面に収まっていたため露見しなかったが、キャラ深掘りステップ
   （チップ24個）で初めて縦に溢れ「スクロールできない」になった。
   → .v8 自身をスクロールコンテナにする。スタンドアロン表示でも同条件になるので挙動は一致する。 */
body[data-page="make"] .v8{height:100vh;height:100dvh;overflow-y:auto;overflow-x:clip;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* 主役画面（recipient タイル + キャラ設定の統合。2026-07-05） */
.v8-char-rec{padding:0;margin:0 0 2px}
.v8-char-section{margin:14px 0 -2px;font-size:1.06rem;font-weight:900;line-height:1.3}
.v8-char-section .hot{color:var(--red)}
/* 質問ページ（コンセプト/ゲーム性）はカバーセクションを出さない（2026-07-05）。
   主役ページと同じく質問見出し+タイルがすぐ始まるレイアウトにする。
   .v8-pick の margin-top:auto はカバーがある前提の「下寄せ」なので、カバー非表示時は
   解除しないと内容の短いページ（ゲーム性）で上に巨大な余白ができる。 */
body.v8-step-noco .v8-cover{display:none}
body.v8-step-noco .v8-pick{margin-top:0}
/* デスクトップ(≥900px)の .v8 は align-items:center のグリッドだが、スクロールコンテナ化
   （height:100dvh + overflow-y:auto）した状態で中身がコンテナより高くなると、中央寄せの
   はみ出し分が上方向のスクロール不能領域に消えて選択肢が押せなくなる。上詰めで回避（2026-07-06） */
@media (min-width:900px){
  body[data-page="make"] .v8{align-items:start}
  body[data-page="make"] .v8-cover{align-self:center}
  /* .v8-pick 自体の align-self:center も上書きしないと、パネルが行より高い時に
     中央寄せのはみ出し分が上方向のスクロール不能領域に消える */
  body[data-page="make"] .v8-pick{align-self:start}
}