/* ==========================================================================
   STYLES — layout & components. Colours/fonts are in theme.css.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--ink-0); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
kbd { font-family: var(--font-mono); font-size: 0.85em; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); background: rgba(255,255,255,.06); }
strong { font-weight: 700; color: #fff; }
mark { background: linear-gradient(transparent 55%, rgba(255, 209, 102, .45) 55%); color: inherit; padding: 0 2px; }

#app { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, #16183d 0%, #07081a 70%); }
.layer { position: absolute; inset: 0; }
#stage { position: absolute; inset: 0; }
#set-layer .set { position: absolute; inset: 0; will-change: transform, opacity, filter; }
.set-svg { width: 100%; height: 100%; display: block; }
#cine-layer { z-index: 5; pointer-events: none; }
#cine-layer.active { pointer-events: auto; }
#fx-canvas { z-index: 6; pointer-events: none; width: 100%; height: 100%; }
.is-title #fx-canvas { z-index: 39; opacity: .75; }
.is-end #fx-canvas { z-index: 60; }
#vignette { z-index: 4; pointer-events: none; background: radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(3, 3, 12, .55) 100%); }

/* ------------------------------------------------------------------ buttons */
.btn { border: 1px solid var(--line); background: rgba(255,255,255,.06); padding: 12px 20px; border-radius: 999px; font-weight: 700; letter-spacing: .01em; transition: transform .15s ease, background .2s, box-shadow .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.1); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn-primary { border: 0; color: #07081a; background: linear-gradient(120deg, var(--pfc) 0%, #b28dff 55%, var(--reward) 100%); box-shadow: 0 10px 30px rgba(82, 214, 255, .25), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-primary:hover { background: linear-gradient(120deg, #7fe3ff 0%, #c3a6ff 55%, #ffa566 100%); box-shadow: 0 14px 40px rgba(178, 141, 255, .4), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-ghost { background: transparent; }
.btn-xl { font-size: 20px; padding: 16px 34px; }

/* ------------------------------------------------------------------ top bar */
#topbar { position: absolute; z-index: 12; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 18px; pointer-events: none; opacity: 0; transform: translateY(-12px); transition: opacity .6s, transform .6s; }
#topbar.show { opacity: 1; transform: none; }
#topbar > * { pointer-events: auto; }
.loadbar { width: min(440px, 52vw); padding: 10px 14px 9px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.loadbar-label { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: var(--pfc); }
.loadbar-dots { animation: blink 1.2s steps(2) infinite; }
.loadbar-pct { margin-left: auto; color: #fff; font-size: 13px; letter-spacing: 0; }
.loadbar-track { position: relative; margin: 7px 0 6px; height: 9px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.loadbar-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--pfc-deep), var(--pfc), #b28dff); box-shadow: 0 0 14px rgba(82,214,255,.7); }
.loadbar-stripes { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 6px, transparent 6px 12px); background-size: 17px 17px; animation: stripes .8s linear infinite; }
.loadbar-status { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.3em; }
#topbar.complete .loadbar-label { color: var(--good); }
#topbar.complete .loadbar-fill { background: linear-gradient(90deg, #16a37a, var(--good)); box-shadow: 0 0 16px rgba(124,242,156,.8); }
.topbar-right { display: flex; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.chip-btn { padding: 0 12px; }
.chip-btn.off { opacity: .7; }
#timer-chip.late { color: var(--bad); border-color: rgba(255,93,115,.5); }
@keyframes stripes { to { background-position: 17px 0; } }
@keyframes blink { 50% { opacity: .2; } }

/* ------------------------------------------------------------------ HUD */
#hud { position: absolute; z-index: 11; right: 18px; top: 72px; width: 236px; padding: 10px 12px 12px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transform: translateX(20px); transition: opacity .6s .2s, transform .6s .2s; }
#hud.show { opacity: 1; transform: none; }
.hud-svg { width: 100%; height: auto; display: block; overflow: visible; }
.hud-construction { animation: hudstripes 2s linear infinite; }
@keyframes hudstripes { to { transform: translateX(12px); } }
.meter { display: grid; grid-template-columns: 30px 1fr 22px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; }
.meter-av .avatar { width: 30px; height: 30px; display: block; }
.meter-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.meter-track { height: 7px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.meter-fill { height: 100%; width: 0; border-radius: 99px; }
.meter-num { font-family: var(--font-mono); font-size: 13px; font-weight: 800; text-align: right; }
.meter-pfc .meter-label, .meter-pfc .meter-num { color: var(--pfc); } .meter-pfc .meter-fill { background: linear-gradient(90deg, var(--pfc-deep), var(--pfc)); box-shadow: 0 0 10px var(--pfc); }
.meter-reward .meter-label, .meter-reward .meter-num { color: var(--reward); } .meter-reward .meter-fill { background: linear-gradient(90deg, var(--reward-deep), var(--reward)); box-shadow: 0 0 10px var(--reward); }
.meter-amyg .meter-label, .meter-amyg .meter-num { color: var(--amyg); } .meter-amyg .meter-fill { background: linear-gradient(90deg, var(--amyg-deep), var(--amyg)); box-shadow: 0 0 10px var(--amyg); }

/* ------------------------------------------------------------------ toasts */
#toasts { position: absolute; z-index: 13; left: 18px; top: 112px; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 36px)); pointer-events: none; }
.toast { display: flex; gap: 10px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.toast-av .avatar { width: 42px; height: 42px; display: block; }
.toast-name { font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.toast-text { font-size: 15px; line-height: 1.35; }
.toast-text .p { display: block; }
.toast-pfc { border-left: 3px solid var(--pfc); } .toast-pfc .toast-name { color: var(--pfc); }
.toast-reward { border-left: 3px solid var(--reward); } .toast-reward .toast-name { color: var(--reward); }
.toast-amyg { border-left: 3px solid var(--amyg); } .toast-amyg .toast-name { color: var(--amyg); }
.toast-hippo { border-left: 3px solid var(--hippo); } .toast-hippo .toast-name { color: var(--hippo); }
.toast-meta { background: linear-gradient(120deg, rgba(255,209,102,.95), rgba(255,138,61,.95)); color: #1b0f00; border: 0; padding: 12px 16px; font-weight: 700; }
.toast-meta strong, .toast-meta em { color: #1b0f00; }

/* ------------------------------------------------------------------ dialog */
#dialog { position: absolute; z-index: 20; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(1180px, calc(100% - 36px)); opacity: 0; pointer-events: none; }
#dialog.show { pointer-events: auto; }
.dialog-inner { padding: 20px 24px 22px; border-radius: 22px; background: linear-gradient(180deg, rgba(16,18,46,.88), rgba(8,9,26,.94)); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.dialog-meta { display: flex; gap: 12px; align-items: center; font-family: var(--font-mono); font-size: 11.5px; font-weight: 800; letter-spacing: .16em; color: var(--text-dim); margin-bottom: 8px; }
.dialog-act { color: var(--gold); }
.dialog-place::before { content: "·"; margin-right: 12px; opacity: .5; }
.dialog-place:empty::before { content: none; }
.dialog-text { margin: 0 0 16px; font-size: var(--fs-narration); line-height: 1.5; cursor: default; }
.dialog-text .p, .debrief-text .p { display: block; margin-bottom: .45em; }
.dialog-text .p:last-child { margin-bottom: 0; }
.dialog-text .q, .debrief-text .q { display: block; margin: .35em 0 .6em; padding: 10px 16px; border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0; background: rgba(255, 209, 102, .09); font-family: var(--font-mono); font-size: .82em; line-height: 1.5; color: #fff4d6; }
.w { display: inline-block; white-space: pre; }

.choices { display: grid; gap: 12px; position: relative; }
.choices.n2 { grid-template-columns: repeat(2, 1fr); }
.choices.n3 { grid-template-columns: repeat(3, 1fr); }
.choices.n4 { grid-template-columns: repeat(4, 1fr); }
.choice { position: relative; display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 15px 16px 15px 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.13); transition: transform .18s ease, background .2s, border-color .2s, box-shadow .2s, opacity .3s; min-height: 78px; }
.choice:hover { transform: translateY(-4px); border-color: rgba(82, 214, 255, .7); background: linear-gradient(180deg, rgba(82,214,255,.16), rgba(178,141,255,.08)); box-shadow: 0 12px 30px rgba(82, 214, 255, .18), 0 0 0 1px rgba(82,214,255,.3) inset; }
.choice-kbd { position: absolute; top: -9px; left: -7px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: #1c1f4a; border: 1px solid rgba(255,255,255,.2); font-family: var(--font-mono); font-size: 11px; font-weight: 800; color: var(--text-dim); }
.choice-icon { font-size: 30px; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.choice-main { display: flex; flex-direction: column; gap: 4px; }
.choice-label { font-size: var(--fs-choice); font-weight: 700; line-height: 1.3; }
.choice-label .p, .choice-flavor .p { display: inline; }
.choice-flavor { font-size: 13.5px; color: var(--text-dim); font-style: italic; }
.choice.picked { border-color: var(--good); background: linear-gradient(180deg, rgba(124,242,156,.2), rgba(124,242,156,.06)); box-shadow: 0 0 0 2px rgba(124,242,156,.4) inset, 0 10px 40px rgba(124,242,156,.25); }
.choice.dimmed { opacity: .3; transform: scale(.97); }
.choices.timed .choice { min-height: 96px; align-items: center; }
.choices.timed .choice-label { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 34px); font-weight: 800; letter-spacing: .02em; }
.choices.timed .choice-icon { font-size: 42px; }
.choices.timed .choice[data-key="go"] { background: linear-gradient(135deg, rgba(255,138,61,.35), rgba(255,61,127,.25)); border-color: rgba(255,138,61,.7); }
.choices.timed .choice[data-key="brake"] { background: linear-gradient(135deg, rgba(255,74,94,.3), rgba(179,18,58,.25)); border-color: rgba(255,74,94,.7); }
.choice-timer { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.choice-timer-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--amyg), var(--gold)); box-shadow: 0 0 12px var(--gold); }

/* ------------------------------------------------------------------ debrief */
#debrief { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(5,6,18,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#debrief[hidden] { display: none; }
.debrief-card { width: min(1120px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; border-radius: 24px; background: linear-gradient(180deg, rgba(18,20,50,.97), rgba(9,10,28,.98)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.debrief-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.debrief-clock { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 800; font-size: 13px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 209, 102, .12); color: var(--gold); border: 1px solid rgba(255,209,102,.3); margin-top: 3px; }
.debrief-text { margin: 0; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; }
.debrief-body { display: grid; grid-template-columns: 1fr 1.08fr; gap: 20px; align-items: start; }
#debrief.no-receipt .debrief-body { grid-template-columns: 1fr; }
.debrief-foot { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 18px; }
.debrief-hint { color: var(--text-dim); font-size: 13px; }
.debrief-next { font-size: 17px; padding: 13px 26px; }

.gc { border-radius: 20px; background: #0a0c22; border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.gc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.06); }
.gc-avatars { display: flex; }
.gc-avatars .avatar { width: 30px; height: 30px; margin-right: -9px; border-radius: 50%; background: #1b1e45; border: 2px solid #0a0c22; }
.gc-title { margin-left: 12px; font-weight: 800; }
.gc-sub { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.gc-msgs { display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 200px; }
.gc-msg { display: flex; gap: 9px; align-items: flex-end; }
.gc-av .avatar { width: 36px; height: 36px; display: block; }
.gc-bubble { max-width: 88%; padding: 9px 13px 10px; border-radius: 18px 18px 18px 5px; background: #1a1d44; }
.gc-name { font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; margin-bottom: 2px; }
.gc-text { font-size: 15.5px; line-height: 1.4; }
.gc-text .p { display: block; }
.gc-pfc .gc-bubble { background: linear-gradient(135deg, rgba(82,214,255,.2), rgba(31,127,209,.14)); } .gc-pfc .gc-name { color: var(--pfc); }
.gc-reward .gc-bubble { background: linear-gradient(135deg, rgba(255,138,61,.22), rgba(255,61,127,.14)); } .gc-reward .gc-name { color: var(--reward); }
.gc-amyg .gc-bubble { background: linear-gradient(135deg, rgba(255,74,94,.24), rgba(179,18,58,.16)); } .gc-amyg .gc-name { color: var(--amyg); }
.gc-hippo .gc-bubble { background: linear-gradient(135deg, rgba(111,242,180,.2), rgba(22,163,122,.14)); } .gc-hippo .gc-name { color: var(--hippo); }
.typing .gc-bubble { display: flex; gap: 5px; padding: 14px 16px; }
.typing .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); animation: dot 1s infinite; }
.typing .dot:nth-child(2) { animation-delay: .15s; } .typing .dot:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

.receipt-wrap { filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); transform: rotate(.6deg); }
.receipt { position: relative; padding: 18px 20px 26px; background: var(--paper); color: var(--paper-ink); border-radius: 6px 6px 0 0; font-size: 15px; line-height: 1.45;
  -webkit-mask: linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat, conic-gradient(from 135deg at top, #000 90deg, transparent 0) bottom/16px 10px repeat-x;
          mask: linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat, conic-gradient(from 135deg at top, #000 90deg, transparent 0) bottom/16px 10px repeat-x; }
.receipt strong { color: #000; }
.receipt mark { background: linear-gradient(transparent 55%, rgba(255, 209, 102, .8) 55%); }
.rc-top { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: .12em; padding-bottom: 10px; border-bottom: 2px dashed rgba(0,0,0,.25); }
.rc-tag { margin-top: 12px; display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; padding: 3px 8px; border-radius: 4px; background: #1f1d2b; color: var(--paper); }
.rc-title { font-family: var(--font-display); font-weight: 800; font-size: 23px; line-height: 1.15; margin: 8px 0 8px; letter-spacing: -.01em; }
.rc-title .p, .rc-body .p, .rc-ev .p, .rc-exam .p { display: block; }
.rc-sec { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,.25); }
.rc-label { font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .12em; margin-bottom: 4px; opacity: .75; }
.rc-ev { font-size: 14px; }
.rc-exam { font-family: var(--font-hand); font-size: 21px; line-height: 1.2; color: #173a8a; }
.rc-bar { height: 34px; margin: 16px 0 6px; background: repeating-linear-gradient(90deg, #1f1d2b 0 2px, transparent 2px 4px, #1f1d2b 4px 7px, transparent 7px 8px, #1f1d2b 8px 9px, transparent 9px 12px); opacity: .85; }
.rc-foot { text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; opacity: .7; }

/* ------------------------------------------------------------------ title */
.screen { position: absolute; inset: 0; z-index: 40; }
.screen[hidden] { display: none; }
#title-screen { display: grid; place-items: center; padding: 24px; overflow: auto; background: radial-gradient(90% 70% at 50% 38%, rgba(40, 30, 110, .55), transparent 70%); }
.title-wrap { position: relative; z-index: 42; max-width: 1080px; width: 100%; text-align: center; }
.title-kicker { font-family: var(--font-mono); font-size: clamp(10px, 1vw, 13px); font-weight: 800; letter-spacing: .24em; color: var(--text-dim); }
.title-h1 { margin: 14px 0 12px; font-family: var(--font-display); font-weight: 800; line-height: .86; letter-spacing: -.035em; font-size: clamp(56px, 10.5vw, 150px); }
.title-h1 .t1, .title-h1 .t2 { display: block; }
.t-dots { display: inline; -webkit-text-fill-color: var(--reward); }
.t1 { color: #fff; text-shadow: 0 6px 40px rgba(82, 214, 255, .35); }
.t2 { background: linear-gradient(90deg, var(--pfc) 0%, #b28dff 45%, var(--reward) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 30px rgba(178, 141, 255, .35)); }
.t-dots i { font-style: normal; }
.title-load { position: relative; margin: 6px auto 22px; width: min(520px, 80vw); height: 16px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid var(--line); overflow: hidden; }
.title-load-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: repeating-linear-gradient(-45deg, rgba(255,209,102,.9) 0 10px, rgba(30,30,40,.9) 10px 20px); animation: stripes .8s linear infinite; background-size: 28px 28px; }
.title-load-txt { position: absolute; right: 10px; top: -1px; font-family: var(--font-mono); font-size: 12px; font-weight: 800; }
.title-sub { max-width: 720px; margin: 0 auto 26px; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; color: #d7dbff; }
.title-sub .p { display: block; }
.title-actions { display: flex; gap: 12px; justify-content: center; align-items: center; margin-bottom: 34px; flex-wrap: wrap; }
.title-sound.on { border-color: rgba(124,242,156,.5); color: var(--good); }
.title-cast { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: left; }
.cast-card { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(10,12,32,.72); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cast-av .avatar { width: 56px; height: 56px; display: block; }
.cast-name { font-family: var(--font-mono); font-weight: 800; font-size: 13px; letter-spacing: .06em; margin-bottom: 3px; }
.cast-role { font-size: 13px; line-height: 1.35; color: var(--text-dim); }
.cast-pfc .cast-name { color: var(--pfc); } .cast-reward .cast-name { color: var(--reward); } .cast-amyg .cast-name { color: var(--amyg); } .cast-hippo .cast-name { color: var(--hippo); }
.title-foot { margin-top: 22px; font-size: 13px; color: var(--text-dim); }
.title-foot .p { display: block; }

/* ------------------------------------------------------------------ chapter card */
#card-screen { z-index: 45; display: grid; place-items: center; padding: 20px; overflow: auto; background: radial-gradient(90% 80% at 50% 40%, #1a1850 0%, #06071a 75%); }
.card-wrap { text-align: center; max-width: 900px; width: 100%; }
.card-next { margin-top: 22px; font-size: 18px; padding: 14px 30px; }
.wk { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wk-cal { position: relative; width: 120px; border-radius: 16px; overflow: hidden; background: #fff; color: #1f1d2b; box-shadow: 0 20px 50px rgba(0,0,0,.45); perspective: 400px; }
.wk-cal-top { background: var(--amyg); color: #fff; font-family: var(--font-mono); font-weight: 800; letter-spacing: .2em; padding: 6px 0; font-size: 13px; }
.wk-cal-num { font-family: var(--font-display); font-weight: 800; font-size: 62px; line-height: 1.15; transform-origin: 50% 0; }
.wk-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 7vw, 92px); letter-spacing: -.03em; line-height: 1; background: linear-gradient(90deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wk-slip { position: relative; width: min(460px, 90vw); padding: 14px 18px; background: var(--paper); color: var(--paper-ink); border-radius: 8px; transform: rotate(-1.2deg); box-shadow: 0 16px 40px rgba(0,0,0,.4); text-align: left; }
.wk-slip-top { font-family: var(--font-mono); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; opacity: .7; padding-bottom: 8px; border-bottom: 2px dashed rgba(0,0,0,.2); }
.wk-slip-row { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 20px; margin-top: 6px; }
.wk-grade { display: inline-grid; place-items: center; width: 70px; height: 70px; border: 5px solid #d62839; color: #d62839; border-radius: 50%; font-family: var(--font-display); font-size: 42px; font-weight: 800; transform: rotate(-12deg); }
.wk-slip-comment { font-family: var(--font-hand); font-size: 24px; color: #d62839; }
.wk-next { max-width: 640px; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; color: #d7dbff; margin: 6px 0 0; }
.wk-friends { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 760px; }
.wk-friend { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: 13px; color: var(--text-dim); }
.wk-friend .avatar { width: 60px; height: 60px; }

/* ------------------------------------------------------------------ end */
#end-screen { z-index: 50; overflow-y: auto; padding: 34px 22px 50px; background: radial-gradient(90% 60% at 30% 10%, rgba(82,214,255,.12), transparent 60%), radial-gradient(80% 60% at 90% 30%, rgba(255,138,61,.1), transparent 60%), #07081a; }
.end-wrap { max-width: 1200px; margin: 0 auto; }
.end-hero { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 40px; align-items: center; }
.end-badge-col { display: flex; flex-direction: column; align-items: center; gap: 18px; perspective: 1000px; }
.holo-card { position: relative; width: 100%; max-width: 340px; aspect-ratio: 5 / 7; border-radius: 26px; padding: 3px; background: linear-gradient(135deg, var(--c1), var(--c2), var(--c3)); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px color-mix(in srgb, var(--c2) 45%, transparent); transform-style: preserve-3d; --mx: 50%; --my: 50%; }
.holo-inner { position: relative; height: 100%; border-radius: 23px; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c2) 35%, #0b0c24), #0a0b20 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 20px; text-align: center; overflow: hidden; }
.holo-top { position: absolute; top: 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .3em; color: rgba(255,255,255,.7); }
.badge-svg { width: 78%; height: auto; filter: drop-shadow(0 16px 30px rgba(0,0,0,.5)); }
.holo-name { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.05; margin-top: 8px; letter-spacing: -.01em; }
.holo-sub { font-size: 14px; color: #d7dbff; margin-top: 6px; }
.holo-sub .p { display: block; }
.holo-shine { position: absolute; inset: 3px; border-radius: 23px; pointer-events: none; mix-blend-mode: color-dodge; opacity: .5;
  background: repeating-linear-gradient(115deg, rgba(255,0,132,.25) 0%, rgba(252,164,0,.25) 8%, rgba(255,255,0,.2) 16%, rgba(0,255,138,.2) 24%, rgba(0,207,255,.25) 32%, rgba(204,76,250,.25) 40%, rgba(255,0,132,.25) 48%); background-size: 300% 300%; background-position: var(--mx) var(--my); }
.holo-glare { position: absolute; inset: 3px; border-radius: 23px; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.35), transparent 45%); mix-blend-mode: overlay; }
.mini-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--text-dim); }
.mini-badges > span { width: 100%; text-align: center; font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px; }
.mini-badge { width: 40px; height: 40px; display: grid; place-items: center; font-size: 20px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line); filter: grayscale(1); opacity: .45; }
.mini-badge.got { filter: none; opacity: 1; border-color: var(--gold); box-shadow: 0 0 18px rgba(255,209,102,.45); }
.end-kicker { font-family: var(--font-mono); font-size: 11.5px; font-weight: 800; letter-spacing: .2em; color: var(--gold); margin-bottom: 10px; }
.end-h2 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 4.6vw, 64px); line-height: .95; letter-spacing: -.03em; background: linear-gradient(90deg, #fff, var(--pfc) 60%, #b28dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.end-p { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; margin: 0 0 16px; color: #e3e6ff; }
.end-p .p, .end-concept .p { display: block; }
.end-concept { padding: 14px 16px; border-radius: 16px; background: rgba(82,214,255,.07); border: 1px solid rgba(82,214,255,.22); font-size: 15.5px; line-height: 1.5; color: #dfe4ff; }
.end-concept .rc-label { color: var(--pfc); opacity: 1; }
.end-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 16px; }
.stat { padding: 10px 8px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line); text-align: center; }
.stat-ico { font-size: 20px; }
.stat-v { font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.stat-l { font-size: 11.5px; color: var(--text-dim); }
.end-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
.end-panel { padding: 20px; border-radius: 20px; background: rgba(12,14,38,.8); border: 1px solid var(--line); }
.path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: p; }
.path li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); }
.path-ico { font-size: 22px; text-align: center; }
.path-main { display: flex; flex-direction: column; }
.path-choice { font-weight: 700; font-size: 15px; }
.path-choice .p { display: inline; }
.path-tag { font-size: 12.5px; color: var(--text-dim); }
.path-sys { font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 99px; }
.sys-pfc { color: var(--pfc); background: rgba(82,214,255,.12); } .sys-reward { color: var(--reward); background: rgba(255,138,61,.12); } .sys-amyg { color: var(--amyg); background: rgba(255,74,94,.12); } .sys-hippo { color: var(--hippo); background: rgba(111,242,180,.12); }
.exam-lines { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; line-height: 1.5; color: #dfe3ff; }
.exam-lines .p { display: inline; }
.exam-lines li::marker { color: var(--pfc); }
.exam-lines.eval li::marker { color: var(--reward); }
.end-actions { display: flex; justify-content: center; margin-top: 30px; }
.end-foot { text-align: center; color: var(--text-dim); font-size: 13px; margin-top: 18px; }
.end-foot .p { display: block; }

/* ------------------------------------------------------------------ skip */
#skip-btn { position: absolute; z-index: 25; right: 18px; bottom: 18px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
#skip-btn:hover { background: rgba(255,255,255,.12); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  #hud { width: 190px; }
  .choices.n3 { grid-template-columns: 1fr; }
  .choice { min-height: 0; padding: 12px 14px; }
  .choice-icon { font-size: 24px; }
}
@media (max-width: 860px) {
  .debrief-body { grid-template-columns: 1fr; }
  .end-hero { grid-template-columns: 1fr; }
  .end-grid { grid-template-columns: 1fr; }
  .title-cast { grid-template-columns: repeat(2, 1fr); }
  .end-stats { grid-template-columns: repeat(3, 1fr); }
  #hud-meters { display: none; }
  #hud { width: 130px; padding: 6px; }
  .hud-labels { display: none; }
}
@media (max-width: 600px) {
  #topbar { padding: 8px; }
  .loadbar { width: 58vw; padding: 7px 10px; }
  .loadbar-status { display: none; }
  .chip { height: 36px; padding: 0 10px; font-size: 13px; }
  #hud { display: none; }
  #toasts { top: 70px; left: 8px; }
  #dialog { bottom: 8px; width: calc(100% - 16px); }
  .dialog-inner { padding: 14px; }
  .choices.n2 { grid-template-columns: 1fr 1fr; }
  .title-cast { grid-template-columns: 1fr; }
  .wk-friends { grid-template-columns: repeat(2, 1fr); }
  .debrief-card { padding: 14px; }
}
@media (max-height: 760px) and (min-width: 861px) {
  .dialog-text { font-size: 17px; margin-bottom: 10px; }
  .choice { min-height: 0; padding: 11px 14px; }
  #hud { top: 64px; width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   CINEMATICS
   ========================================================================== */
.cine-dim { position: absolute; inset: 0; background: rgba(5, 6, 18, .72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.cine-dim.light { background: rgba(10, 10, 30, .5); }
.cine-dim.calm { background: radial-gradient(60% 60% at 50% 45%, rgba(20, 60, 90, .75), rgba(5, 6, 18, .88)); }
.cine-dim.soft { background: rgba(5, 6, 18, .45); }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.slam { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 5vw, 72px); letter-spacing: -.02em; color: #fff; text-shadow: 0 8px 40px rgba(0,0,0,.6); }
.slam em { font-style: normal; color: var(--amyg); }
.slam.good em { color: var(--good); }
.emoji-pop { position: absolute; bottom: 10%; font-size: 64px; pointer-events: none; }
.emoji-pop.small { font-size: 34px; bottom: auto; }

/* scroll */
.phone { position: absolute; left: 50%; top: 50%; width: min(340px, 74vw); height: min(680px, 84vh); margin: calc(min(680px, 84vh) / -2) 0 0 calc(min(340px, 74vw) / -2); border-radius: 46px; background: #05060d; border: 10px solid #1a1b2e; box-shadow: 0 0 0 2px #2c2d45, 0 40px 90px rgba(0,0,0,.7), 0 0 120px rgba(122, 162, 255, .25); overflow: hidden; }
.phone-status { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 38px; display: flex; justify-content: space-between; align-items: center; padding: 0 22px; font-family: var(--font-mono); font-weight: 800; font-size: 13px; background: linear-gradient(#05060d, rgba(5,6,13,.6)); }
.phone-island { width: 90px; height: 24px; border-radius: 99px; background: #000; }
.phone-screen { position: absolute; inset: 38px 0 0 0; overflow: hidden; }
.feed { display: flex; flex-direction: column; gap: 10px; padding: 8px; will-change: transform; }
.post { border-radius: 18px; background: #14152a; overflow: hidden; flex: 0 0 auto; }
.post-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 13px; }
.post-av { width: 26px; height: 26px; border-radius: 50%; }
.post-more { margin-left: auto; opacity: .5; }
.post-media { position: relative; height: 290px; display: grid; place-items: center; background: linear-gradient(145deg, var(--c1), var(--c2)); }
.post-emoji { font-size: 120px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.3)); }
.post-play { position: absolute; right: 12px; bottom: 16px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.35); font-size: 14px; }
.post-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.25); }
.post-prog i { display: block; height: 100%; background: #fff; }
.post-cap { padding: 10px 12px 4px; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.post-tag { color: #8fd8ff; font-weight: 700; }
.post-actions { display: flex; gap: 16px; padding: 6px 12px 12px; font-size: 13px; color: var(--text-dim); }
.phone-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.1) 0%, transparent 30%); }
.scroll-clock { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 8vw, 130px); line-height: .9; text-align: right; color: #fff; text-shadow: 0 0 40px rgba(255, 74, 94, .35); }
.scroll-clock span { display: block; }
.sc-ap { font-size: .4em; color: var(--text-dim); }
.scroll-caption { position: absolute; left: 6%; top: 44%; font-family: var(--font-hand); font-size: clamp(36px, 4.4vw, 64px); color: var(--gold); transform: rotate(-7deg); }

/* cram */
.cram-page { position: absolute; left: 50%; top: 50%; width: min(620px, 86vw); padding: 30px 34px; transform: translate(-50%, -50%) rotate(-2deg); background: var(--paper); border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.cram-line { position: relative; height: 34px; }
.cram-line i { position: absolute; left: 0; right: 0; top: 16px; height: 5px; border-radius: 3px; background: #b9b3a6; }
.cram-line b { position: absolute; left: -4px; top: 6px; height: 24px; width: 0; background: rgba(255, 230, 0, .6); border-radius: 3px; mix-blend-mode: multiply; }
.cram-counter { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-weight: 800; font-size: clamp(22px, 3vw, 40px); padding: 10px 20px; border-radius: 14px; background: rgba(0,0,0,.5); border: 2px solid var(--gold); color: var(--gold); }
.cram-counter.bad { color: var(--amyg); border-color: var(--amyg); box-shadow: 0 0 40px rgba(255,74,94,.5); }
.fcard { position: absolute; left: 0; top: 0; padding: 14px 20px; border-radius: 12px; background: hsl(var(--h) 90% 88%); color: #1f1d2b; font-weight: 800; font-size: clamp(16px, 1.6vw, 22px); box-shadow: 0 16px 40px rgba(0,0,0,.45); white-space: nowrap; }

/* plan */
.notebook { position: absolute; left: 50%; top: 50%; width: min(600px, 90vw); padding: 30px 30px 26px 74px; transform: translate(-50%, -50%) rotate(-1.5deg); border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  background: linear-gradient(90deg, transparent 58px, rgba(230, 57, 70, .55) 58px, rgba(230, 57, 70, .55) 60px, transparent 60px), repeating-linear-gradient(transparent 0 47px, rgba(28, 63, 170, .22) 47px 48px), #fffdf6; }
.nb-spiral { position: absolute; left: 16px; top: 20px; bottom: 20px; width: 20px; background: radial-gradient(circle at 50% 50%, #3a3a4a 5px, transparent 6px) 0 0 / 20px 32px repeat-y; }
.pl-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 48px; font-family: var(--font-hand); font-size: clamp(22px, 2.3vw, 31px); color: #1c3faa; }
.pl-title { font-weight: 700; color: #1f1d2b; font-size: clamp(28px, 3vw, 40px); }
.pl-check { width: 32px; height: 32px; flex: 0 0 auto; }
.pl-text { white-space: nowrap; }

/* redbull */
.can-wrap { position: absolute; left: 50%; top: 50%; width: 200px; height: 360px; margin: -180px 0 0 -100px; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.can { width: 100%; height: 100%; }
.fizz { position: absolute; top: 34%; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); }
.eye { position: absolute; left: 50%; top: 22%; width: min(420px, 70vw); transform: translateX(-50%); filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
.eye svg { width: 100%; display: block; }
.caff { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-weight: 800; font-size: 16px; letter-spacing: .1em; }
.caff-bar { width: min(300px, 40vw); height: 14px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.caff-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #3b82f6, #fbbf24, #e11d48); }
.caff b { color: #fbbf24; min-width: 60px; }
.glitch-clock { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 9vw, 140px); color: #fff; }
.glitch-clock::before, .glitch-clock::after { content: attr(data-t); position: absolute; inset: 0; }
.glitch-clock::before { color: #ff2a6d; transform: translate(-4px, 0); mix-blend-mode: screen; animation: glitch1 .3s infinite steps(2); }
.glitch-clock::after { color: #05d9e8; transform: translate(4px, 0); mix-blend-mode: screen; animation: glitch2 .25s infinite steps(2); }
@keyframes glitch1 { 50% { transform: translate(-7px, 2px); clip-path: inset(10% 0 50% 0); } }
@keyframes glitch2 { 50% { transform: translate(6px, -2px); clip-path: inset(50% 0 10% 0); } }
#stage.jitter { animation: jitter .09s infinite; }
@keyframes jitter { 0% { transform: translate(0, 0); filter: saturate(1.4) hue-rotate(0deg); } 25% { transform: translate(-3px, 2px); } 50% { transform: translate(3px, -2px); filter: saturate(1.8) hue-rotate(12deg); } 75% { transform: translate(-2px, -3px); } 100% { transform: translate(0, 0); } }

/* sleep + osmosis */
.night { position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 30%, #1a2160 0%, #070920 70%); }
.sunrise { position: absolute; inset: 0; opacity: 0; background: linear-gradient(0deg, #ffb45e 0%, #ff7a8a 35%, #6a5acd 75%, #2b2f7a 100%); }
.zzz { position: absolute; top: 58%; font-family: var(--font-display); font-weight: 800; color: #c8d0ff; text-shadow: 0 0 20px rgba(160,180,255,.6); }
.net-wrap { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); width: min(560px, 86vw); text-align: center; }
.net-title { font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: .3em; color: #9fb4ff; margin-bottom: 6px; }
.net { width: 100%; height: auto; }
.net .edge { stroke: #7a86d8; stroke-width: 2; opacity: .75; }
.net .node { fill: #cfd6ff; }
.net-cap { font-family: var(--font-mono); font-weight: 800; font-size: 15px; letter-spacing: .06em; color: #9fb4ff; }
.net-cap span { display: inline-block; }
.hippo-worker { position: absolute; left: 22%; top: 60%; width: 120px; text-align: center; }
.hippo-worker .avatar { width: 120px; height: 120px; filter: drop-shadow(0 0 20px rgba(111,242,180,.5)); }
.hw-badge { display: inline-block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .14em; padding: 4px 8px; border-radius: 6px; background: var(--hippo); color: #042; }
.cabinet { position: absolute; right: 20%; top: 58%; width: 150px; padding: 10px; border-radius: 10px; background: linear-gradient(#5c6480, #3b4158); box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.cab-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-align: center; color: #e8ecff; margin-bottom: 8px; }
.cab-drawer { height: 44px; margin-top: 6px; border-radius: 6px; background: linear-gradient(#737c9c, #5b6382); position: relative; }
.cab-drawer::after { content: ""; position: absolute; left: 50%; top: 18px; width: 40px; height: 8px; margin-left: -20px; border-radius: 4px; background: #c9d0ea; }
.memcard { position: absolute; padding: 8px 12px; border-radius: 8px; background: #fffbe6; color: #1f1d2b; font-weight: 800; font-size: 14px; box-shadow: 0 10px 20px rgba(0,0,0,.4); border-left: 5px solid var(--hippo); white-space: nowrap; }
.pillow { position: absolute; left: 50%; top: 56%; width: min(520px, 80vw); height: 220px; transform: translate(-50%, -50%); }
.pillow-shape { position: absolute; inset: 20px 0 0 0; border-radius: 90px 90px 70px 70px / 80px 80px 60px 60px; background: radial-gradient(80% 60% at 40% 30%, #ffffff, #cfd3ee); box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.book-under { position: absolute; left: 16%; top: 168px; transform: rotate(-4deg); width: 300px; height: 70px; border-radius: 6px; background: #2d6a4f; color: #d8f3dc; font-family: var(--font-display); font-weight: 800; letter-spacing: .2em; display: grid; place-items: center; box-shadow: 0 10px 20px rgba(0,0,0,.4); z-index: 0; }
.osmo { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); width: min(460px, 86vw); padding: 14px 18px; border-radius: 16px; background: rgba(10,12,32,.9); border: 1px solid var(--line); font-family: var(--font-mono); text-align: center; }
.osmo-top { font-weight: 800; letter-spacing: .14em; font-size: 13px; color: var(--pfc); margin-bottom: 8px; }
.osmo-track { height: 14px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.osmo-track i { display: block; height: 100%; width: 0; background: var(--pfc); }
.osmo-pct { margin-top: 6px; font-weight: 800; }
.osmo-err { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); width: min(520px, 88vw); padding: 12px 16px; border-radius: 12px; background: #ffe066; color: #3a2a00; font-weight: 700; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,.4); }

/* exam paper */
.paper { position: absolute; left: 50%; top: 50%; width: min(800px, 92vw); padding: 26px 34px 30px; transform: translate(-50%, -50%) rotate(-1deg); background: #fdfdfb; color: #1f2328; border-radius: 6px; box-shadow: 0 40px 100px rgba(0,0,0,.65); }
.paper-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: .16em; color: #6a737d; padding-bottom: 12px; border-bottom: 2px solid #1f2328; margin-bottom: 16px; }
.paper-q { font-size: clamp(17px, 1.7vw, 22px); font-weight: 600; line-height: 1.45; margin-bottom: 14px; }
.paper-marks { font-family: var(--font-mono); font-weight: 800; float: right; }
.paper-lines { min-height: 200px; background: repeating-linear-gradient(transparent 0 43px, #c9d3dd 43px 44px); padding-top: 4px; }
.paper-ans { font-family: var(--font-hand); font-size: clamp(24px, 2.6vw, 33px); line-height: 44px; color: #1a3fb0; }
.paper-ans.shaky { transform: rotate(-.6deg); letter-spacing: .02em; }
.paper-ans.neat { color: #12307e; }
.pen { display: inline-block; margin-left: 2px; color: #1f2328; transform: rotate(10deg); animation: pen .15s infinite alternate; }
@keyframes pen { to { transform: rotate(-6deg) translateY(-3px); } }
.paper-red { position: absolute; left: 34px; right: 34px; top: 110px; bottom: 30px; width: calc(100% - 68px); height: calc(100% - 140px); pointer-events: none; }
.mark-score { position: absolute; right: -14px; top: -26px; font-family: var(--font-hand); font-weight: 700; font-size: 76px; color: #d62839; border: 5px solid #d62839; border-radius: 50%; width: 130px; height: 130px; display: grid; place-items: center; background: rgba(255,255,255,.7); opacity: 0; }
.mark-comment { position: absolute; left: 34px; bottom: -52px; font-family: var(--font-hand); font-size: clamp(24px, 2.6vw, 32px); color: #ff8b98; opacity: 0; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.leaf { position: absolute; right: 40px; bottom: 30px; width: 110px; }
.panic-vig { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 220px 40px rgba(255, 20, 60, .75); pointer-events: none; }
.breath { position: absolute; left: 50%; top: 44%; width: 300px; height: 300px; margin: -150px 0 0 -150px; display: grid; place-items: center; }
.breath-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--pfc); background: radial-gradient(circle, rgba(82,214,255,.28), rgba(82,214,255,.04) 70%); box-shadow: 0 0 80px rgba(82,214,255,.35); }
.breath-txt { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 30px; color: #e8f7ff; }
.breath-amy { position: absolute; left: 50%; top: 44%; width: 70px; height: 70px; margin: 172px 0 0 -35px; }
.breath-amy .avatar { width: 100%; height: 100%; }
.breath-label { position: absolute; left: 50%; top: 80%; transform: translateX(-50%); font-family: var(--font-hand); font-size: clamp(34px, 4vw, 56px); color: var(--pfc); white-space: nowrap; }

/* car */
.shouts { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.shout { position: absolute; display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border-radius: 999px; background: #fff; color: #140f24; font-family: var(--font-display); font-weight: 800; font-size: clamp(16px, 1.8vw, 24px); box-shadow: 0 14px 30px rgba(0,0,0,.45); white-space: nowrap; }
.shout-av .avatar { width: 40px; height: 40px; display: block; border-radius: 50%; background: #efe9ff; }
.shout-dev { background: #ffe0c8; } .shout-sam { background: #ffd6da; } .shout-maya { background: #ffe8f0; } .shout-jordan { background: #e0f0ff; font-size: clamp(14px, 1.4vw, 19px); }
.siren-glow { position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none; }
.still-playing { position: absolute; left: 50%; bottom: 26%; transform: translateX(-50%); font-family: var(--font-hand); font-size: clamp(28px, 3vw, 42px); color: #ffd166; text-shadow: 0 4px 20px rgba(0,0,0,.8); white-space: nowrap; }
.mirror-zzz { position: absolute; left: 50%; top: 4%; margin-left: 110px; font-family: var(--font-display); font-weight: 800; font-size: 26px; color: #c8d0ff; }
.note { position: absolute; bottom: 20%; font-size: 40px; text-shadow: 0 0 20px currentColor; }
.mini-phone { position: absolute; left: 50%; top: 50%; width: min(360px, 86vw); padding: 34px 14px 18px; transform: translate(-50%, -50%); border-radius: 40px; background: linear-gradient(160deg, #3b2f7a, #151638); border: 8px solid #1a1b2e; box-shadow: 0 40px 90px rgba(0,0,0,.7); }
.mp-time { text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 1; }
.mp-date { text-align: center; font-size: 14px; color: #cfd3ff; margin-bottom: 16px; }
.mp-notif { display: flex; gap: 10px; align-items: center; padding: 10px 12px; margin-top: 8px; border-radius: 18px; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); font-size: 14.5px; }
.mp-av .avatar { width: 38px; height: 38px; display: block; border-radius: 50%; background: #efe9ff; }
.lot { position: absolute; inset: 0; }
.lot svg { width: 100%; height: 100%; display: block; }
.smoke { opacity: 0; position: absolute; width: 90px; height: 90px; margin: -45px; border-radius: 50%; background: radial-gradient(circle, rgba(220,220,230,.55), rgba(220,220,230,0) 70%); pointer-events: none; }
.rec { position: absolute; top: 90px; left: 24px; font-family: var(--font-mono); font-weight: 800; font-size: 18px; color: #ff4a5e; padding: 6px 12px; border-radius: 8px; background: rgba(0,0,0,.5); }
.rec span { color: #fff; }
.views { position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 56px); padding: 10px 26px; border-radius: 99px; background: rgba(0,0,0,.6); }
.dt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4vw; background: radial-gradient(70% 70% at 50% 50%, rgba(20,10,30,.5), rgba(5,5,12,.9)); }
.dt-board { width: min(440px, 60vw); padding: 20px 24px; border-radius: 16px; background: #1b0e0e; border: 4px solid #ffb703; box-shadow: 0 0 60px rgba(255, 183, 3, .45), inset 0 0 30px rgba(255,183,3,.15); }
.dt-title { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: #ffb703; text-align: center; letter-spacing: .06em; margin-bottom: 10px; }
.dt-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed rgba(255,183,3,.35); font-weight: 700; font-size: 18px; color: #ffe8c2; }
.dt-row.hl { color: #ff6b6b; }
.dt-speaker { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dt-grill { width: 110px; height: 150px; border-radius: 14px; background: repeating-linear-gradient(#222 0 6px, #444 6px 10px); border: 6px solid #555; }
.dt-say { max-width: 240px; padding: 10px 14px; border-radius: 14px; background: #fff; color: #1f1d2b; font-weight: 700; }

/* epilogue */
.epi { position: absolute; left: 0; right: 0; bottom: 6%; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0 20px; }
.epi-kicker { font-family: var(--font-mono); font-weight: 800; font-size: 14px; letter-spacing: .4em; color: var(--gold); }
.epi-age { display: flex; align-items: baseline; gap: 12px; }
.epi-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(60px, 9vw, 120px); line-height: 1; display: inline-block; }
.epi-unit { font-family: var(--font-mono); color: var(--text-dim); font-size: 16px; }
.epi-pfc { width: 110px; height: 110px; position: relative; }
.epi-pfc .avatar { width: 100%; height: 100%; filter: drop-shadow(0 0 30px rgba(82,214,255,.5)); overflow: visible; }
.epi-loaded { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.4vw, 60px); letter-spacing: -.02em; }
.epi-loaded b { color: var(--good); }
.epi-note { font-size: 14px; color: var(--text-dim); }
.epi-line { max-width: 720px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; }

/* pulled over: siren wash, officer at the window, ticket / warning */
.set-siren { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s; mix-blend-mode: screen; }
.siren-on .set-siren { opacity: 1; }
.set-siren::before, .set-siren::after { content: ""; position: absolute; inset: 0; }
.set-siren::before { background: radial-gradient(55% 70% at 6% 18%, rgba(255,40,60,.5), transparent 70%), radial-gradient(34% 26% at 50% 6%, rgba(255,40,60,.3), transparent 70%); }
.set-siren::after { background: radial-gradient(55% 70% at 94% 18%, rgba(40,90,255,.55), transparent 70%), radial-gradient(34% 26% at 50% 6%, rgba(40,90,255,.34), transparent 70%); }
.siren-on .set-siren::before { animation: siren-soft-a 1s ease-in-out infinite; }
.siren-on .set-siren::after { animation: siren-soft-b 1s ease-in-out infinite; }
#car-mirror-siren { opacity: 0; transition: opacity .4s; }
.siren-on #car-mirror-siren { opacity: 1; }
.siren-on .ms-r, .bk.r { animation: siren-a 1s steps(1) infinite; }
.siren-on .ms-b, .bk.b { animation: siren-b 1s steps(1) infinite; }
@keyframes siren-soft-a { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }
@keyframes siren-soft-b { 0%, 100% { opacity: .12; } 50% { opacity: 1; } }
@keyframes siren-a { 0% { opacity: 1; } 50% { opacity: .1; } }
@keyframes siren-b { 0% { opacity: .1; } 50% { opacity: 1; } }

.cop-beam { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen; --bx: 30%; --by: 40%;
  background: radial-gradient(circle at var(--bx) var(--by), rgba(255,246,214,.5) 0%, rgba(255,246,214,.16) 13%, transparent 32%); }
.cop-wrap { position: absolute; z-index: 2; left: clamp(10px, 2.2vw, 36px); top: clamp(64px, 10.5vh, 104px); width: min(30vw, 43vh, 400px); pointer-events: none; }
.cop-panel { position: relative; width: 100%; aspect-ratio: 420 / 500; border-radius: 26px; overflow: hidden; background: #0b0c1c; box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.08); }
.cop-bg { position: absolute; inset: 0; background: linear-gradient(180deg, #0a0b1c 0%, #1a1433 70%, #26183a 100%); }
.bk { position: absolute; top: 34%; width: 62%; aspect-ratio: 1; border-radius: 50%; filter: blur(34px); }
.bk.r { left: -16%; background: rgba(255,40,60,.75); }
.bk.b { right: -16%; background: rgba(40,90,255,.8); }
.cop-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cop-frame { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 10px #0b0b12, inset 0 -30px 0 0 #0b0b12, inset 0 0 60px rgba(0,0,0,.7); }
.cop-frame::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 30px; height: 3px; background: linear-gradient(90deg, rgba(90,95,130,.4), rgba(214,222,255,.8), rgba(90,95,130,.4)); }
.cop-tag { position: absolute; left: 16px; bottom: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.55); font-family: var(--font-mono); font-weight: 800; font-size: 10.5px; letter-spacing: .14em; color: #ffd6da; }
.cop-tap { position: absolute; right: -14%; top: 30%; opacity: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 34px); color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.8); transform: rotate(8deg); }
.cop-say { position: absolute; left: calc(100% - 24px); top: 14%; opacity: 0; padding: 10px 18px; border-radius: 20px 20px 20px 6px; background: #fff; color: #140f24; font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 2vw, 28px); white-space: nowrap; box-shadow: 0 14px 30px rgba(0,0,0,.45); transform-origin: 0% 100%; }
.you-say { position: absolute; left: 50%; bottom: 25%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: min(760px, 88vw); padding: 12px 22px 12px 12px; border-radius: 22px; background: rgba(12,14,34,.92); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 20px 50px rgba(0,0,0,.55); font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 2vw, 28px); }
.you-tag { flex: none; padding: 4px 9px; border-radius: 10px; background: var(--gold); color: #1b0f00; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; }
.cite { position: absolute; left: 60%; top: 13%; width: min(400px, 70vw); padding: 16px 20px 72px; border-radius: 6px; background: #fff6d8; color: #2a2130; font-family: var(--font-mono); font-size: 13px; box-shadow: 0 30px 60px rgba(0,0,0,.55); background-image: repeating-linear-gradient(transparent 0 25px, rgba(60,80,160,.12) 25px 26px); }
.cite-warning { background-color: #fffbe8; }
.cite-top { display: flex; justify-content: space-between; font-weight: 800; font-size: 11px; letter-spacing: .1em; color: #6a5a70; border-bottom: 2px dashed #b9a98a; padding-bottom: 8px; }
.cite-kind { margin: 10px 0 8px; font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: .02em; color: #b3123a; }
.cite-warning .cite-kind { color: #9a6a00; }
.cite-row { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 5px 0; line-height: 1.4; }
.cite-row b { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #7a6a80; padding-top: 2px; }
.cite-row span { font-family: var(--font-hand); font-size: 21px; line-height: 1.1; color: #1c3faa; }
.cite-stamp { position: absolute; right: 16px; bottom: 12px; padding: 4px 14px; border: 5px solid #d62839; border-radius: 10px; font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: .08em; color: #d62839; opacity: 0; mix-blend-mode: multiply; }
.cite-warning .cite-stamp { border-color: #e09b00; color: #e09b00; }

/* near miss + observational learning */
.nearmiss { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 70% at 40% 60%, rgba(255,255,255,.55), rgba(255,40,60,.35) 60%, rgba(255,40,60,.6) 100%); }
.shout.quiet { background: rgba(255,255,255,.9); font-family: var(--font-body); font-weight: 600; font-style: italic; font-size: clamp(14px, 1.4vw, 19px); }
.obs { position: absolute; left: 50%; top: 35%; transform: translate(-50%, -50%); }
.obs-rays { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,209,102,.28) 0 10deg, transparent 10deg 20deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: obs-spin 9s linear infinite; }
.obs-card { position: relative; white-space: nowrap; text-align: center; padding: 14px 30px 16px; border-radius: 22px; background: linear-gradient(135deg, #fff1b8, #ffd166 45%, #ff9f43); color: #2a1600; box-shadow: 0 0 0 3px rgba(255,255,255,.6), 0 20px 60px rgba(255,170,40,.45); }
.obs-kicker { font-family: var(--font-mono); font-weight: 800; font-size: 12px; letter-spacing: .3em; }
.obs-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.4vw, 48px); letter-spacing: -.01em; line-height: 1.1; }
.obs-sub { font-family: var(--font-mono); font-size: 12px; font-weight: 700; opacity: .75; }
@keyframes obs-spin { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  .cop-wrap { width: min(40vw, 36vh); }
  .cite { left: 58%; }
}
@media (max-width: 600px) {
  .cop-wrap { width: 44vw; top: 64px; }
  .cop-say { left: auto; right: 0; top: 102%; }
  .cite { left: 50%; top: 30%; }
  .cite-row { grid-template-columns: 90px 1fr; }
}