/* Mochi Story Studio: the app shell. The palette is the onboarding's (zaya src/onboarding/onboardingPage.ts). */
:root {
  --ground: #fff8ef; --surface: #ffffff; --ink: #2b2320; --muted: #85766c; --line: #f0e2d4;
  --accent: #f0a35e; --accent-ink: #3a1f08; --accent-press: #d27f35; --accent-soft: #fff0df; --track: #f3e5d6;
  --stage: #fff1e0; --stage2: #ffe2c2; --mint: #2d8f78; --mint-soft: #dff4ec; --rose: #c2453b; --rose-soft: #fde6e2;
  --sky: #3a6fd1; --sky-soft: #e3ecff; --shadow: 0 1px 0 rgba(90, 50, 20, .04), 0 10px 30px -12px rgba(90, 50, 20, .22);
  --sans: Nunito, ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --read: Andika, "Comic Sans MS", system-ui, sans-serif;
  --r-lg: 28px; --r-md: 20px; --r-sm: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #1d1815; --surface: #29221e; --ink: #f7ece3; --muted: #b7a89d; --line: #3a302a;
    --accent: #f5a866; --accent-ink: #2a1506; --accent-press: #b8712f; --accent-soft: #3a2a1d; --track: #3a302a;
    --stage: #2b221c; --stage2: #3a2b20; --mint: #6fd3b5; --mint-soft: #1f3a32; --rose: #ff9a8e; --rose-soft: #452520;
    --sky: #9dbbff; --sky-soft: #22304a; --shadow: 0 1px 0 rgba(0,0,0,.2), 0 12px 30px -14px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #1d1815; --surface: #29221e; --ink: #f7ece3; --muted: #b7a89d; --line: #3a302a;
  --accent: #f5a866; --accent-ink: #2a1506; --accent-press: #b8712f; --accent-soft: #3a2a1d; --track: #3a302a;
  --stage: #2b221c; --stage2: #3a2b20; --mint: #6fd3b5; --mint-soft: #1f3a32; --rose: #ff9a8e; --rose-soft: #452520;
  --sky: #9dbbff; --sky-soft: #22304a; --shadow: 0 1px 0 rgba(0,0,0,.2), 0 12px 30px -14px rgba(0,0,0,.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--ground); color: var(--ink); font: 700 16px/1.45 var(--sans); -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.1; text-wrap: balance; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; }
.skip:focus-visible { top: 12px; }
#app:focus { outline: none; }
.boot { min-height: 100dvh; display: grid; place-items: center; }
.spinner { width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--track); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-sm); border: 0;
       background: var(--accent); color: var(--accent-ink); font: 900 15px var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap;
       box-shadow: 0 3px 0 var(--accent-press); transition: transform .12s, box-shadow .12s, filter .12s; }
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-press); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.big { min-height: 56px; padding: 0 26px; border-radius: 18px; font-size: 18px; box-shadow: 0 4px 0 var(--accent-press); }
.btn.ghost { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--line) inset, 0 3px 0 var(--line); }
.btn.ghost:active { box-shadow: 0 0 0 2px var(--line) inset, 0 1px 0 var(--line); }
.btn.danger { background: var(--rose); color: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--rose) 70%, #000); }
.btn.google { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--line) inset, 0 3px 0 var(--line); width: 100%; }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--accent-soft); color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }
.link { border: 0; background: none; padding: 10px 4px; min-height: 44px; color: var(--muted); font: 800 14px var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--ink); }

/* ---------- page frame ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.topbar { display: flex; align-items: center; gap: 10px; padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: 6px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 900 18px var(--sans); letter-spacing: -.01em; margin-right: auto; min-height: 44px; }
.brand .logo { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(160deg, #ffd59c, #f0a35e); display: grid; place-items: center; box-shadow: 0 2px 0 #d27f35; }
.brand .logo svg { width: 22px; height: 22px; }
.brand small { font: 800 12px var(--sans); color: var(--muted); margin-left: 2px; padding: 2px 8px; border-radius: 99px; background: var(--accent-soft); }
.user { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 4px; border-radius: 99px; background: var(--surface); box-shadow: 0 0 0 2px var(--line) inset; }
.user .who { font: 800 14px var(--sans); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 2px; }
.user .icon-btn { width: 36px; height: 36px; border-radius: 99px; }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 900 14px var(--sans); color: #2b2320; background: var(--av, #ffe3b3); }
.mock-tag { font: 900 11px var(--sans); text-transform: uppercase; letter-spacing: .08em; padding: 4px 8px; border-radius: 8px; background: var(--sky-soft); color: var(--sky); }

/* ---------- home hero ---------- */
.hero { position: relative; overflow: hidden; margin-top: 10px; border-radius: 34px; padding: 26px 34px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 30px;
        background: radial-gradient(90% 120% at 15% 30%, #fff6e6 0%, transparent 60%), linear-gradient(135deg, var(--stage), var(--stage2)); box-shadow: 0 0 0 1px var(--line) inset; }
:root[data-theme="dark"] .hero { background: radial-gradient(90% 120% at 15% 30%, #3a2c22 0%, transparent 60%), linear-gradient(135deg, var(--stage), var(--stage2)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { background: radial-gradient(90% 120% at 15% 30%, #3a2c22 0%, transparent 60%), linear-gradient(135deg, var(--stage), var(--stage2)); } }
.hero .mochi-spot { position: relative; width: 190px; height: 190px; display: grid; place-items: end center; }
.hero .mochi-spot::before { content: ""; position: absolute; left: 18%; right: 18%; bottom: 6px; height: 16px; border-radius: 50%; background: rgba(150, 80, 20, .14); filter: blur(2px); }
.hero mochi-mascot { width: 190px; display: block; position: relative; }
.hero h1 { font: 900 clamp(28px, 4vw, 42px)/1.05 var(--sans); letter-spacing: -.02em; }
.hero p { margin-top: 10px; color: var(--muted); font-size: 17px; max-width: 46ch; }
.hero .cta { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .deco { position: absolute; pointer-events: none; border-radius: 50%; opacity: .6; }
.hero .d1 { width: 160px; height: 160px; right: -40px; top: -50px; background: #ffd9e8; }
.hero .d2 { width: 90px; height: 90px; right: 120px; bottom: -40px; background: #d4f2df; }
.hero .d3 { width: 46px; height: 46px; right: 70px; top: 70px; background: #d7e6ff; }
.hero .stars { position: absolute; right: 36px; bottom: 26px; width: 120px; opacity: .9; pointer-events: none; }
:root[data-theme="dark"] .hero .deco { opacity: .12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero .deco { opacity: .12; } }

/* ---------- library ---------- */
.shelf { margin-top: 34px; }
.shelf-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.shelf-head h2 { font: 900 24px var(--sans); letter-spacing: -.01em; }
.shelf-head .count { font: 900 13px var(--sans); color: var(--muted); padding: 2px 9px; border-radius: 99px; background: var(--accent-soft); }
.shelf-head .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 800 12px var(--sans); color: var(--muted); }
.shelf-head .live i { width: 8px; height: 8px; border-radius: 50%; background: #4cc38a; box-shadow: 0 0 0 3px rgba(76, 195, 138, .2); }
.shelf-head .live.poll i { background: #e0b14a; box-shadow: 0 0 0 3px rgba(224, 177, 74, .2); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.card { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow), 0 0 0 1px var(--line) inset; overflow: hidden;
        transition: transform .18s cubic-bezier(.3,1.3,.5,1), box-shadow .18s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -14px rgba(90, 50, 20, .32), 0 0 0 1px var(--line) inset; }
.card .open { position: absolute; inset: 0; z-index: 1; border-radius: 24px; }
.card .open:focus-visible { outline-offset: -3px; }
.thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--stage); }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.scene.surprise img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene.surprise img:first-child { clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%); object-position: 30% 50%; }
.scene.surprise img:nth-child(2) { clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%); object-position: 70% 50%; }
.scene.surprise .seam { position: absolute; inset: 0; background: #fff; clip-path: polygon(57.2% 0, 58.8% 0, 42.8% 100%, 41.2% 100%); }
.scene.surprise .spark { position: absolute; left: 50%; top: 50%; width: 30%; max-width: 64px; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: var(--accent); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(60,30,10,.25), 0 0 0 4px rgba(255,255,255,.5); }
.scene.surprise .spark svg { width: 56%; height: 56%; }
.thumb .badge { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 99px; background: rgba(255,255,255,.92); color: #2b2320; font: 900 12px var(--sans); box-shadow: 0 2px 6px rgba(60,30,10,.12); }
.thumb .badge svg { width: 14px; height: 14px; }
.card.making .thumb .scene { filter: blur(5px) saturate(.7) brightness(1.06); transform: scale(1.08); }
.card.making .thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 55%, color-mix(in srgb, var(--ground) 55%, transparent), color-mix(in srgb, var(--ground) 10%, transparent)); }
.card .making-veil { z-index: 1; }
.card .making-veil { position: absolute; inset: 0; display: grid; place-items: center; }
.card .making-veil mochi-mascot { width: 92px; display: block; }
.card-body { padding: 14px 16px 12px; display: grid; gap: 8px; flex: 1; align-content: start; }
.card h3 { font: 900 18px/1.2 var(--sans); letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card h3.idea { font-family: var(--read); font-weight: 700; color: var(--ink); }
.card .sub { color: var(--muted); font: 700 14px/1.35 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font: 800 13px var(--sans); color: var(--muted); min-height: 44px; }
.card .meta .avatar { width: 26px; height: 26px; font-size: 12px; }
.card .meta .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .meta .dot { opacity: .5; }
.card .meta .icon-btn { position: relative; z-index: 2; margin-left: auto; margin-right: -8px; }
.card .meta .icon-btn:hover { background: var(--rose-soft); color: var(--rose); }
.chip { position: absolute; z-index: 1; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font: 900 12px var(--sans); background: rgba(255,255,255,.94); color: #2b2320; box-shadow: 0 2px 6px rgba(60,30,10,.14); }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip.ready { color: #23775f; }
.chip.failed { color: #b23a30; }
.chip.making { color: #a85d16; }
.chip.making i { animation: pulse 1.2s ease-in-out infinite; }
.chip.private { left: auto; right: 10px; color: #5b5048; }
@keyframes pulse { 50% { transform: scale(.6); opacity: .5; } }
.bar { height: 10px; border-radius: 99px; background: var(--track); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #f6b877, var(--accent)); transition: width .6s cubic-bezier(.3,.8,.3,1); position: relative; overflow: hidden; }
.bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: shine 1.6s ease-in-out infinite; }
@keyframes shine { to { transform: translateX(100%); } }
.card .step { font: 800 13px var(--sans); color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.card .step span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .err { font: 800 13px var(--sans); color: var(--rose); }

.empty { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 24px; border: 2px dashed var(--line); color: var(--muted); }
.empty mochi-mascot { width: 84px; display: block; }
.empty b { display: block; color: var(--ink); font: 900 18px var(--sans); margin-bottom: 2px; }
.skeleton { border-radius: 24px; background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; overflow: hidden; }
.skeleton .s1 { aspect-ratio: 16/9; background: linear-gradient(90deg, var(--track), var(--accent-soft), var(--track)); background-size: 200% 100%; animation: skel 1.4s linear infinite; }
.skeleton .s2 { height: 70px; }
@keyframes skel { to { background-position: -200% 0; } }
.foot { padding: 40px 0 calc(30px + env(safe-area-inset-bottom)); color: var(--muted); font: 700 13px var(--sans); text-align: center; }

/* ---------- new story ---------- */
.page-head { display: flex; align-items: center; gap: 10px; margin: 8px 0 18px; }
.page-head h1 { font: 900 clamp(26px, 3.4vw, 36px) var(--sans); letter-spacing: -.02em; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 8px; border-radius: var(--r-sm); text-decoration: none; color: var(--muted); font: 800 15px var(--sans); }
.back:hover { background: var(--accent-soft); color: var(--ink); }
.back svg { width: 22px; height: 22px; }
.maker { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.panel { background: var(--surface); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow), 0 0 0 1px var(--line) inset; }
.panel + .panel { margin-top: 18px; }
.label { display: block; font: 900 17px var(--sans); margin-bottom: 4px; }
.hint { color: var(--muted); font: 700 14px var(--sans); margin-bottom: 12px; }
.idea-box { position: relative; }
.idea-box textarea { display: block; width: 100%; min-height: 168px; resize: vertical; padding: 18px 20px 34px; border-radius: 22px; border: 2px solid var(--line); background: var(--ground);
                     font: 400 22px/1.45 var(--read); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.idea-box textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.idea-box textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.idea-box .counter { position: absolute; right: 16px; bottom: 10px; font: 800 12px var(--sans); color: var(--muted); }
.idea-box .counter.over { color: var(--rose); }
.examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.examples .ex-label { width: 100%; font: 800 13px var(--sans); color: var(--muted); }
.ex { min-height: 44px; padding: 8px 13px; border-radius: 16px; border: 0; background: var(--accent-soft); color: var(--ink); font: 700 14px/1.25 var(--read); cursor: pointer; text-align: left; transition: transform .12s, background .12s; }
.ex:hover { background: color-mix(in srgb, var(--accent) 28%, var(--accent-soft)); transform: translateY(-1px); }
.ex::before { content: "+ "; font-family: var(--sans); font-weight: 900; color: var(--accent-press); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
.settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pick { position: relative; display: grid; gap: 6px; padding: 6px 6px 10px; border-radius: 20px; background: var(--ground); box-shadow: 0 0 0 2px var(--line) inset; cursor: pointer; text-align: center; font: 900 14px var(--sans); transition: box-shadow .15s, transform .15s; }
.pick:hover { transform: translateY(-2px); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick .pic { aspect-ratio: 4 / 3; border-radius: 15px; overflow: hidden; position: relative; background: var(--stage); }
.pick .pic .scene { width: 100%; height: 100%; }
.pick:has(input:checked) { box-shadow: 0 0 0 3px var(--accent) inset, 0 4px 0 var(--accent-press); background: var(--accent-soft); }
.pick:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.pick .tick { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; opacity: 0; transform: scale(.5); transition: .2s cubic-bezier(.3,1.5,.5,1); z-index: 1; }
.pick .tick svg { width: 14px; height: 14px; }
.pick:has(input:checked) .tick { opacity: 1; transform: none; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; border-radius: 18px; background: var(--ground); box-shadow: 0 0 0 2px var(--line) inset; }
.seg label { position: relative; display: grid; place-items: center; min-height: 48px; border-radius: 13px; cursor: pointer; font: 900 15px var(--sans); color: var(--muted); transition: background .15s, color .15s; text-align: center; line-height: 1.1; }
.seg label small { display: block; font: 700 11px var(--sans); opacity: .8; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: 0 2px 0 var(--line), 0 0 0 2px var(--accent) inset; }
.seg label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.friends-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.friends-head .n { font: 900 13px var(--sans); color: var(--muted); }
.friends { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.friend { position: relative; display: grid; justify-items: center; gap: 0; padding: 4px 2px 8px; border-radius: 18px; border: 0; cursor: pointer; background: var(--c1); color: #2b2320; box-shadow: 0 3px 0 var(--c2); font: 900 13px var(--sans); transition: transform .15s, box-shadow .15s, opacity .15s; min-height: 44px; }
.friend:hover { transform: translateY(-2px); }
.friend .mini { width: 100%; max-width: 74px; aspect-ratio: 1; display: block; }
.friend .mini > * { width: 100%; display: block; }
.friend small { font: 800 10px var(--sans); opacity: .65; }
.friend[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--c2), 0 3px 0 6px var(--c2); }
.friend[aria-pressed="true"]::after { content: ""; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: #2b2320 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="white" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 13px no-repeat; }
.friend[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.friend:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.friend .mini.loading { border-radius: 50%; background: rgba(255,255,255,.4); transform: scale(.7); }
.submit-row { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.submit-row .note { color: var(--muted); font: 700 13px var(--sans); flex: 1; min-width: 180px; }
.form-err { margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--rose-soft); color: var(--rose); font: 800 14px var(--sans); }

/* ---------- making (progress) ---------- */
.making-view { max-width: 760px; margin: 6px auto 0; }
.stage-card { position: relative; overflow: hidden; border-radius: 34px; padding: 26px 28px 28px; background: linear-gradient(160deg, var(--stage), var(--stage2)); box-shadow: 0 0 0 1px var(--line) inset; text-align: center; }
.stage-card .scene-bg { position: absolute; inset: 0; opacity: .32; overflow: hidden; }
.stage-card .scene-bg .scene { filter: blur(3px) saturate(.9); transform: scale(1.06); }
.stage-card .scene-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, var(--stage2) 85%); }
:root[data-theme="dark"] .stage-card .scene-bg { opacity: .14; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stage-card .scene-bg { opacity: .14; } }
.stage-card > *:not(.scene-bg) { position: relative; }
.stage-card .mochi-spot { width: 210px; height: 210px; margin: 0 auto; display: grid; place-items: end center; position: relative; }
.stage-card .mochi-spot::before { content: ""; position: absolute; left: 20%; right: 20%; bottom: 8px; height: 16px; border-radius: 50%; background: rgba(150, 80, 20, .16); filter: blur(2px); }
.stage-card mochi-mascot { width: 210px; display: block; position: relative; }
.stage-card .kicker { font: 900 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-press); margin-top: 6px; }
:root[data-theme="dark"] .stage-card .kicker { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stage-card .kicker { color: var(--accent); } }
.stage-card h1 { margin-top: 6px; font: 700 clamp(24px, 3.4vw, 34px)/1.2 var(--read); max-width: 30ch; margin-inline: auto; }
.steps { list-style: none; padding: 0; margin: 26px auto 18px; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 560px; position: relative; }
.steps li { position: relative; display: grid; justify-items: center; gap: 8px; font: 800 13px var(--sans); color: var(--muted); }
.steps li::before { content: ""; position: absolute; top: 19px; left: calc(-50% + 24px); right: calc(50% + 24px); height: 4px; border-radius: 4px; background: var(--track); }
.steps li:first-child::before { display: none; }
.steps li.done::before, .steps li.now::before { background: var(--accent); }
.steps .dot { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: 0 0 0 3px var(--track) inset; color: var(--muted); transition: .3s; }
.steps .dot svg { width: 20px; height: 20px; }
.steps li.done .dot { background: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 0 var(--accent-press); }
.steps li.now .dot { background: var(--surface); color: var(--accent-press); box-shadow: 0 0 0 3px var(--accent) inset, 0 0 0 7px color-mix(in srgb, var(--accent) 22%, transparent); animation: glow 1.6s ease-in-out infinite; }
.steps li.done, .steps li.now { color: var(--ink); }
@keyframes glow { 50% { box-shadow: 0 0 0 3px var(--accent) inset, 0 0 0 11px color-mix(in srgb, var(--accent) 8%, transparent); } }
.progress-box { max-width: 520px; margin: 0 auto; text-align: left; }
.progress-box .bar { height: 14px; background: color-mix(in srgb, var(--surface) 70%, var(--track)); }
.progress-box .line { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font: 800 15px var(--sans); }
.progress-box .line .n { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.making-note { margin-top: 16px; text-align: center; color: var(--muted); font: 700 14px var(--sans); }
.making-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 99px; background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; font: 800 13px var(--sans); color: var(--ink); }
.tag svg { width: 14px; height: 14px; }
.failed-box { margin: 20px auto 0; max-width: 520px; padding: 16px 18px; border-radius: 20px; background: var(--rose-soft); color: var(--ink); text-align: left; }
.failed-box b { color: var(--rose); display: block; margin-bottom: 4px; }
.failed-box code { display: block; margin-top: 6px; font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
.failed-box .row { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- player ---------- */
body.playing { overflow: hidden; background: #1a1210; }
.player-shell { position: fixed; inset: 0; background: #1a1210; }
#playerRoot { position: absolute; inset: 0; }
.player-chrome { position: fixed; z-index: 40; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.player-chrome > * { pointer-events: auto; }
.glass { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 99px; border: 0; cursor: pointer; text-decoration: none;
         background: rgba(30, 20, 16, .55); color: #fff8ef; font: 900 14px var(--sans); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; }
.glass:hover { background: rgba(30, 20, 16, .72); }
.glass svg { width: 20px; height: 20px; }
.glass:focus-visible { outline: 3px solid #ffd59c; outline-offset: 2px; }
.player-fallback { position: absolute; inset: 0; overflow: auto; display: grid; place-items: start center; padding: 80px 16px 40px; background: radial-gradient(120% 80% at 50% 0%, #3a2a20, #1a1210); color: #fff8ef; }
.player-fallback .inner { width: min(760px, 100%); }
.player-fallback .note { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 20px; background: rgba(255,255,255,.08); font: 800 14px var(--sans); color: #f3dcc0; }
.player-fallback .note mochi-mascot { width: 64px; flex: none; }
.player-fallback h1 { margin: 26px 0 6px; font: 700 clamp(32px, 5vw, 52px)/1.05 var(--read); }
.player-fallback .sub { color: #d8c3b0; font: 800 15px var(--sans); }
.player-fallback .pg { margin-top: 14px; padding: 16px 20px; border-radius: 22px; background: #fffaf2; color: #2b2320; font: 400 21px/1.55 var(--read); box-shadow: 0 0 0 4px #f3dcc0; }
.player-fallback .pg small { display: block; font: 800 12px var(--sans); color: #8a7b72; margin-bottom: 4px; letter-spacing: .04em; text-transform: uppercase; }
.player-fallback .pg .q { color: #9a4a1c; }

/* ---------- sign in / gate ---------- */
.gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(80% 60% at 50% 20%, var(--stage), var(--ground)); }
.gate-card { width: min(440px, 100%); text-align: center; background: var(--surface); border-radius: 32px; padding: 10px 28px 26px; box-shadow: var(--shadow), 0 0 0 1px var(--line) inset; }
.gate-card .mochi-spot { width: 170px; height: 150px; margin: -60px auto 0; display: grid; place-items: end center; }
.gate-card mochi-mascot { width: 170px; display: block; }
.gate { padding-top: 90px; }
.gate-card h1 { font: 900 30px var(--sans); letter-spacing: -.02em; margin-top: 6px; }
.gate-card p { color: var(--muted); margin: 8px auto 22px; max-width: 32ch; }
.gate-card form { display: grid; gap: 10px; text-align: left; margin-top: 8px; }
.field label { display: block; font: 800 13px var(--sans); margin-bottom: 4px; color: var(--muted); }
.field input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--ground); font: 700 16px var(--sans); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.gate-card .divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font: 800 12px var(--sans); margin: 14px 0 0; }
.gate-card .divider::before, .gate-card .divider::after { content: ""; flex: 1; height: 2px; background: var(--line); }
.gate-card .err { color: var(--rose); font: 800 14px var(--sans); text-align: center; }
.gate-card .small { margin-top: 14px; font: 700 13px var(--sans); color: var(--muted); }

/* ---------- dialog + toast ---------- */
dialog { border: 0; padding: 0; border-radius: 26px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(40, 20, 8, .5); width: min(420px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(40, 24, 14, .45); backdrop-filter: blur(3px); }
.dlg { padding: 24px; }
.dlg h2 { font: 900 22px var(--sans); }
.dlg p { color: var(--muted); margin: 8px 0 20px; }
.dlg-row { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
#toast { position: fixed; z-index: 60; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 16px; background: #2b2320; color: #fff8ef; font: 800 15px var(--sans); box-shadow: 0 12px 30px rgba(0,0,0,.25); transition: .25s; max-width: calc(100vw - 32px); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }


/* ---------- v2: screen entrance, greeting, library, feed ---------- */
.screen { animation: rise .42s cubic-bezier(.2,.9,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.hero .hello { margin: 0 0 6px; color: var(--accent-press); font: 900 15px var(--sans); letter-spacing: .01em; }
:root[data-theme="dark"] .hero .hello { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero .hello { color: var(--accent); } }
.shelf-sub { margin: -6px 0 14px; color: var(--muted); font: 700 14px var(--sans); max-width: 70ch; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.lib-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow), 0 0 0 1px var(--line) inset; }
.lib-pic { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(90% 90% at 50% 40%, #fff, var(--stage)); overflow: hidden; }
.lib-pic img, .lib-pic svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.lib-body { padding: 12px 14px 14px; display: grid; gap: 4px; }
.lib-body h3 { font: 900 17px/1.2 var(--sans); }
.lib-body p { color: var(--muted); font: 700 13px/1.35 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kind { justify-self: start; font: 900 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lib-card.friend .kind { color: #c2477a; } .lib-card.thing .kind { color: var(--sky); } .lib-card.setting .kind { color: var(--mint); }
.from { font: 800 13px var(--sans); color: var(--accent-press); text-decoration: none; margin-top: 4px; min-height: 28px; display: inline-flex; align-items: center; }
.from:hover { text-decoration: underline; }
.lib-empty { grid-column: 1 / -1; grid-template-columns: 1fr; }
.avatar.xs { width: 20px; height: 20px; font-size: 10px; }
.new-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.new-head h1 { font: 900 clamp(26px, 3.4vw, 34px) var(--sans); letter-spacing: -.02em; }
.new-head mochi-mascot { width: 92px; flex: none; display: block; margin: -14px -6px -10px 0; }

.steps { grid-template-columns: repeat(var(--n, 4), 1fr); max-width: 640px; }
.steps li.stuck .dot { background: var(--rose-soft); color: var(--rose); box-shadow: 0 0 0 3px var(--rose) inset; }
.steps li.stuck { color: var(--rose); }
.steps .lbl { text-align: center; line-height: 1.15; }
.bar.indet i { width: 32% !important; animation: indet 1.5s ease-in-out infinite; }
.bar.indet i::after { display: none; }
@keyframes indet { from { transform: translateX(-110%); } to { transform: translateX(320%); } }

.feed { margin-top: 18px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow), 0 0 0 1px var(--line) inset; padding: 18px 18px 8px; }
.feed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.feed-head h2 { font: 900 18px var(--sans); }
.feed-head .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 800 12px var(--sans); color: var(--muted); }
.feed-head .live i { width: 8px; height: 8px; border-radius: 50%; background: #4cc38a; box-shadow: 0 0 0 3px rgba(76,195,138,.2); animation: pulse 1.6s ease-in-out infinite; }
.feed-list { list-style: none; margin: 0; padding: 4px 4px 10px 0; max-height: 520px; overflow: auto; scroll-behavior: smooth; overscroll-behavior: contain; }
.ev { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 8px 0; animation: evIn .45s cubic-bezier(.2,.9,.3,1) both; }
@keyframes evIn { from { opacity: 0; transform: translateY(6px); } }
.ev::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.ev:first-child::before { top: 18px; } .ev:last-child::before { bottom: calc(100% - 18px); }
.ev-dot { position: relative; z-index: 1; width: 12px; height: 12px; margin: 6px 0 0 5px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 3px var(--accent) inset; }
.ev.k-review .ev-dot { box-shadow: 0 0 0 3px var(--sky) inset; }
.ev.k-maker .ev-dot { box-shadow: 0 0 0 3px #d95f95 inset; }
.ev:last-child .ev-dot { background: var(--accent); }
.ev.k-review:last-child .ev-dot { background: var(--sky); } .ev.k-maker:last-child .ev-dot { background: #d95f95; }
.ev-top { display: flex; align-items: baseline; gap: 8px; font: 800 12px var(--sans); color: var(--muted); }
.ev-top b { color: var(--ink); font-weight: 900; }
.ev-top time { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-body p { font: 700 14.5px/1.4 var(--sans); margin-top: 1px; overflow-wrap: anywhere; }
.ev-shot { display: block; margin-top: 8px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--track); box-shadow: 0 0 0 1px var(--line), 0 6px 16px -8px rgba(60,30,10,.35); max-width: 340px; width: 100%; }
.ev-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .3s; }
.ev-shot:hover img { transform: scale(1.03); }
.cast-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.cast-card { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 18px; background: var(--ground); box-shadow: 0 0 0 1px var(--line) inset; }
.cast-card b { display: block; font: 900 15px/1.2 var(--sans); }
.cast-pic { position: relative; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--stage); }
.cast-pic img, .cast-pic svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip-inline { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font: 900 11px var(--sans); color: var(--muted); }
.chip-inline i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-inline.making { color: #c27424; } .chip-inline.making i { animation: pulse 1.2s ease-in-out infinite; }
.chip-inline.ready { color: var(--mint); } .chip-inline.failed { color: var(--rose); }
.shot-dlg { width: min(1000px, calc(100vw - 24px)); padding: 10px; background: #1a1210; color: #f3dcc0; }
.shot-dlg img { display: block; width: 100%; height: auto; border-radius: 16px; }
.shot-dlg p { margin: 10px 6px 4px; font: 800 14px var(--sans); }
.shot-dlg .close { position: absolute; top: 18px; right: 18px; background: rgba(0,0,0,.5); color: #fff; border-radius: 99px; }
@media (max-width: 640px) {
  .new-head mochi-mascot { width: 76px; }
  .feed { padding: 14px 12px 6px; border-radius: 24px; }
  .steps .lbl { font-size: 10.5px; }
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lib-body { padding: 10px 12px 12px; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .maker { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .brand small, .user .who { display: none; }
  .hero { grid-template-columns: 1fr; text-align: center; padding: 18px 20px 24px; border-radius: 28px; justify-items: center; }
  .hero .mochi-spot { width: 150px; height: 150px; }
  .hero mochi-mascot { width: 150px; }
  .hero p { margin-inline: auto; font-size: 16px; }
  .hero .cta { justify-content: center; }
  .hero .cta .btn.big { width: 100%; }
  .hero .stars { display: none; }
  .shelf { margin-top: 26px; }
  .shelf-head h2 { font-size: 21px; }
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .panel { padding: 18px 16px; border-radius: 24px; }
  .idea-box textarea { font-size: 20px; min-height: 150px; }
  .settings { gap: 8px; }
  .pick { font-size: 12px; padding: 5px 5px 8px; border-radius: 16px; }
  .pick .pic { border-radius: 12px; }
  .friends { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .submit-row { position: sticky; bottom: 0; margin: 18px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--ground) 30%); }
  .submit-row .btn { width: 100%; }
  .submit-row .note { order: 2; text-align: center; }
  .stage-card { padding: 18px 16px 22px; border-radius: 28px; }
  .stage-card .mochi-spot, .stage-card mochi-mascot { width: 160px; }
  .stage-card .mochi-spot { height: 160px; }
  .steps li { font-size: 11px; }
  .steps .dot { width: 36px; height: 36px; }
  .steps li::before { top: 16px; left: calc(-50% + 20px); right: calc(50% + 20px); }
  .empty { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .glass span { display: none; }
  .glass { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* polish pass */
.hero > div, .hero .mochi-spot { position: relative; z-index: 1; }
.brand, .mock-tag { white-space: nowrap; }
@media (min-width: 901px) { .maker > div:last-child { position: sticky; top: 16px; } }
@media (max-width: 640px) {
  .brand { font-size: 17px; gap: 8px; }
  .wide-only { display: none; }
  .hero .d2 { display: none; }
  .thumb { aspect-ratio: 2 / 1; }
}
.feed-list { -webkit-mask-image: linear-gradient(transparent 0, #000 28px); mask-image: linear-gradient(transparent 0, #000 28px); padding-top: 14px; }
.grid > .empty, .lib-grid > .empty { grid-column: 1 / -1; }
.count:empty { display: none; }