/* ---------- game bar ---------- */
.gbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 10px 16px; min-height: 64px; background: color-mix(in srgb, var(--ivory) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.gbar-case { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gbar-title { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbar-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.clock-chip { display: grid; justify-items: end; line-height: 1.1; padding: 4px 12px; border: 1px solid var(--char); border-radius: 0; background: #fff; min-width: 96px; }
.clock-chip .typed { font-weight: 700; font-size: 1rem; }
.clock-sub { font-size: .75rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.clock-chip.late { background: var(--tape); }
.clock-chip.late .clock-sub { color: var(--char); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--char); border-radius: 0; background: #fff; color: var(--char); cursor: pointer; transition: transform .15s var(--ease), background .15s; }
.icon-btn:hover { background: var(--tape); transform: translateY(-1px); }
.icon-btn svg { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .logo-word, .gbar-title { display: none; }
  .gbar { gap: 8px; }
}

/* ---------- screens ---------- */
.screen { padding: clamp(28px, 6vw, 72px) 16px; }
.screen--game { padding: 20px 16px 48px; }
.card { max-width: 560px; margin: 0 auto; padding: clamp(24px, 4vw, 40px); }
.wide { max-width: 900px; margin: 0 auto; }
.screen-h { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 12px; }
.muted { color: var(--ink-2); }
.small { font-size: .92rem; }
code { font: 700 .95em var(--f-type); background: var(--tape); padding: 1px 6px; border-radius: 4px; }

label { font-weight: 650; display: block; margin-bottom: 8px; }
#key-input { width: 100%; min-height: 52px; padding: 0 14px; border: 2px solid var(--char); border-radius: var(--r-sm); font: 400 1rem var(--f-type); background: #fff; color: var(--char); }
#key-input:focus { outline: none; box-shadow: 0 0 0 4px var(--tape); }
[aria-invalid="true"] { border-color: var(--err) !important; }
.field-msg { min-height: 1.5em; margin: 10px 0 14px; font-size: .95rem; }
.field-msg.bad { color: var(--err); }
.field-msg.good { color: var(--ok); font-weight: 650; }
.preview-banner { background: var(--tape); border-radius: var(--r-sm); padding: 12px 14px; margin: 0 0 18px; font-size: .95rem; }
.preview-banner code { background: #fff; }
.btn.busy { position: relative; color: transparent; }
.btn.busy::after { content: ""; position: absolute; width: 18px; height: 18px; border: 3px solid var(--char); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* role pick */
.role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0; }
@media (max-width: 640px) { .role-pick { grid-template-columns: 1fr; } }
.role-card { display: grid; gap: 8px; text-align: left; padding: 26px; cursor: pointer; font: inherit; color: inherit; border: 2px solid var(--char); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; }
.role-card:hover { transform: translateY(-4px); box-shadow: 0 8px 0 -2px var(--char); background: #fffdf3; }
.role-ico { width: 60px; height: 60px; border-radius: 0; background: var(--tape); display: grid; place-items: center; margin-bottom: 6px; }
.role-ico svg { width: 36px; }
.role-name { font: 750 1.6rem/1.1 var(--f-head); }
.role-desc { color: var(--ink-2); }
.role-best { font-size: .8rem; color: var(--mute); text-transform: uppercase; letter-spacing: .08em; }
.invite { display: flex; gap: 16px; align-items: center; justify-content: space-between; border: 2px dashed var(--gray-2); border-radius: var(--r); padding: 18px 20px; }
.invite p { margin: 4px 0 0; word-break: break-word; }
@media (max-width: 640px) { .invite { flex-direction: column; align-items: flex-start; } }

/* briefing */
.brief { max-width: 660px; }
.brief .stamp { color: var(--ink-2); margin-bottom: 18px; }
.brief-dateline { color: var(--mute); font-size: .92rem; letter-spacing: .04em; }
.brief-actions, .end-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- game layout ---------- */
.game { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; max-width: 1400px; margin: 0 auto; align-items: start; }
@media (max-width: 1000px) { .game { grid-template-columns: 1fr; } }
.scene-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 14px; }
.scene-head p { margin: 0; }
.view-h { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0; }
.sub-h { font-size: 1.1rem; margin: 22px 0 10px; }

/* board */
.board { position: sticky; top: 84px; background: #fff; border: 2px solid var(--char); border-radius: var(--r); padding: 18px; max-height: calc(100vh - 100px); overflow: auto; }
@media (max-width: 1000px) { .board { position: static; max-height: none; } }
.board-h { font-size: 1.2rem; margin-bottom: 12px; }
.leads { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lead { border: 1px solid var(--gray-2); border-radius: var(--r-sm); padding: 12px; background: var(--ivory); }
.lead.done { opacity: .7; background: transparent; }
.lead.done strong { text-decoration: line-through; text-decoration-thickness: 2px; }
.lead.locked { border-style: dashed; background: transparent; }
.lead-top { display: flex; gap: 10px; }
.lead-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--tape); font: 700 .85rem/1 var(--f-type); }
.lead.done .lead-mark { background: var(--ok); color: #fff; }
.lead.locked .lead-mark { background: var(--gray); color: var(--mute); }
.lead-txt { display: grid; gap: 2px; min-width: 0; }
.lead-txt span { color: var(--ink-2); font-size: .9rem; }
.lead-hints { margin: 10px 0 0 36px; display: grid; gap: 8px; }
.hint { margin: 0; font-size: .92rem; background: #fff; border-left: 3px solid var(--tape); padding: 8px 10px; border-radius: 0; animation: pop .35s var(--ease); }
.hint .typed { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; display: block; color: var(--mute); }
.hint-btn { justify-self: start; background: none; border: 0; padding: 4px 0; font: 650 .9rem var(--f-body); color: var(--char); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hint-btn:hover { text-decoration-thickness: 2px; }
.board-cta { width: 100%; margin-top: 14px; }
.board-tip { font-size: .88rem; color: var(--ink-2); margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--gray-2); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- field scene ---------- */
.scene { position: relative; border: 2px solid var(--char); border-radius: var(--r); overflow: hidden; background: var(--char); box-shadow: var(--shadow); }
.scene-svg { width: 100%; height: auto; }
.hotspots { position: absolute; inset: 0; }
.hs { position: absolute; width: 34px; height: 34px; translate: -50% -50%; border-radius: 50%; border: 3px solid var(--char); background: var(--tape); cursor: pointer; padding: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--tape) 67%, transparent); animation: ping 2.4s var(--ease) infinite; transition: transform .15s var(--ease); }
.hs::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--char); }
.hs.seen { animation: none; background: #fff; }
.hs.seen::after { inset: 10px; background: var(--mute); }
.hs:hover, .hs:focus-visible { transform: scale(1.18); z-index: 2; }
.hs-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; white-space: nowrap; background: var(--char); color: var(--ivory); font: 600 .8rem/1 var(--f-body); padding: 7px 10px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.hs:hover .hs-tip, .hs:focus-visible .hs-tip { opacity: 1; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tape) 80%, transparent); } 70%, 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--tape) 0%, transparent); } }
@media (max-width: 640px) { .hs { width: 26px; height: 26px; } .hs::after { inset: 6px; } }
.examine { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ex-btn { min-height: 40px; padding: 0 14px; border-radius: 0; border: 1px solid var(--char); background: #fff; font: 600 .92rem var(--f-body); color: var(--char); cursor: pointer; transition: background .15s, transform .15s var(--ease); }
.ex-btn:hover { background: var(--tape); transform: translateY(-1px); }
.ex-btn.seen { border-color: var(--gray-2); color: var(--ink-2); }

/* ---------- modal ---------- */
.modal { width: min(640px, calc(100% - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 2px solid var(--char); border-radius: var(--r); background: var(--ivory); color: var(--char); box-shadow: 0 30px 80px -20px #000a; }
.modal.wide { width: min(980px, calc(100% - 24px)); }
.modal::backdrop { background: color-mix(in srgb, var(--char) 70%, transparent); backdrop-filter: blur(3px); }
.modal[open] { animation: modal-in .28s var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal-in { display: flex; flex-direction: column; max-height: calc(100vh - 36px); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--gray-2); }
.modal-head h2 { font-size: 1.35rem; margin: 0; }
.modal-body { padding: 22px; overflow: auto; }
.modal-body > :last-child { margin-bottom: 0; }

/* ---------- documents ---------- */
.doc { background: #fff; border: 1px solid var(--gray-2); border-radius: 0; padding: 20px 22px; box-shadow: 0 1px 0 color-mix(in srgb, var(--char) 6%, transparent), 0 8px 20px -14px color-mix(in srgb, var(--char) 38%, transparent); margin-bottom: 16px; font-family: var(--f-type); }
.doc p, .doc dd { font-family: var(--f-type); }
.doc-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--mute); margin-bottom: 6px; }
.doc-title { font: 700 1.4rem/1.15 var(--f-type); letter-spacing: 0; margin: 0 0 14px; }
.doc-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 14px; }
.doc-dl dt { font: 700 .78rem/1.8 var(--f-type); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.doc-dl dd { margin: 0; }
@media (max-width: 520px) { .doc-dl { grid-template-columns: 1fr; gap: 0; } .doc-dl dd { margin-bottom: 8px; } }
.doc--ticket { background: #fbf3dc; border-style: dashed; }
.doc--ledger { background: #f7f5ef; }
.smudge { color: #7d7466; letter-spacing: -2px; filter: blur(1.2px); }
.handnote { font: 600 1.6rem/1.25 "Caveat", cursive; color: #1f3a5f; background: #fdf6c9; padding: 14px 18px; border-radius: 4px; transform: rotate(-1.5deg); box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--char) 53%, transparent); margin: 6px 0 16px; width: fit-content; max-width: 100%; }
.handnote--long { font-size: 1.45rem; transform: none; width: auto; }
.ledger { width: 100%; border-collapse: collapse; font: 700 1.05rem var(--f-type); }
.ledger td { padding: 8px 6px; border-bottom: 1px solid #e3dccb; }
.ledger-last { letter-spacing: .06em; }
.photo-frame { margin: 4px 4px 16px; transform: rotate(-.8deg); box-shadow: 0 2px 3px #0003, 0 18px 30px -14px #000a; line-height: 0; }
.photo-frame svg { width: 100%; height: auto; display: block; }
.clock-item svg, .cuff-item svg { width: 160px; margin-bottom: 12px; }
.drawer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
@media (max-width: 800px) { .drawer-grid { grid-template-columns: 1fr; } }
.ev { margin: 0; }
.ev .doc { margin-bottom: 8px; }
.ev-art { background: #fff; border: 1px solid var(--gray-2); border-radius: 0; padding: 10px; margin-bottom: 8px; }
.ev figcaption { font-size: .9rem; color: var(--ink-2); }

/* ---------- locks ---------- */
.lock-form { margin-top: 18px; padding: 18px; background: var(--gray); border-radius: var(--r); }
.lock-ctl { display: flex; justify-content: center; }
.lock-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.lock-msg { margin: 0; font-size: .95rem; flex: 1 1 200px; }
.lock-msg.bad { color: var(--err); }
.lock-msg.good { color: var(--ok); font-weight: 700; }
.wheels { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.wheel { display: grid; justify-items: center; background: var(--char); border-radius: 10px; padding: 4px; }
.wheel-btn { width: 40px; height: 28px; border: 0; background: transparent; color: var(--tape); font-size: .8rem; cursor: pointer; border-radius: 6px; }
.wheel-btn:hover { background: #ffffff1a; }
.wheel-val { display: grid; place-items: center; width: 40px; height: 48px; background: var(--ivory); border-radius: 6px; font: 700 1.6rem/1 var(--f-type); color: var(--char); cursor: ns-resize; user-select: none; }
.wheel-val.spin { animation: tick .18s var(--ease); }
@keyframes tick { from { transform: translateY(-6px); opacity: .4; } }
@media (max-width: 420px) { .wheel-val, .wheel-btn { width: 32px; } .wheel-val { font-size: 1.3rem; } }
.shake { animation: shake .4s; }
@keyframes shake { 25% { translate: -7px 0; } 50% { translate: 6px 0; } 75% { translate: -3px 0; } }
.lock-form.opened .lock-ctl { animation: opened .6s var(--ease); }
@keyframes opened { 40% { transform: scale(1.06); } }
.dial-input { width: 100%; max-width: 320px; min-height: 52px; padding: 0 14px; border: 2px solid var(--char); border-radius: var(--r-sm); font: 700 1.3rem var(--f-type); letter-spacing: .08em; background: #fff; color: var(--char); text-transform: uppercase; }
.dial-input:focus { outline: none; box-shadow: 0 0 0 4px var(--tape); }
.unit-in { max-width: 120px; text-align: center; }

/* ---------- HQ ---------- */
.hq-gate { max-width: 620px; margin: 0 auto; }
.gate-doc .lock-form { background: var(--ivory); }
.hq-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 760px) { .hq-grid { grid-template-columns: 1fr; } }
.tabs { display: grid; gap: 6px; position: sticky; top: 84px; }
@media (max-width: 760px) { .tabs { position: static; display: flex; overflow-x: auto; padding-bottom: 4px; } }
.tab { text-align: left; min-height: 44px; padding: 0 14px; border: 1px solid var(--char); border-radius: 0; background: #fff; font: 650 .95rem var(--f-body); color: var(--char); cursor: pointer; white-space: nowrap; transition: background .15s, transform .15s var(--ease); }
.tab:hover { transform: translateX(2px); }
.tab[aria-selected="true"] { background: var(--tape); }
.tab.locked { border-style: dashed; color: var(--mute); cursor: not-allowed; }
.lock-ico { font-size: .8em; }
.tabpanel { min-width: 0; }
.tabpanel:focus-visible { outline-offset: 6px; }
.table-wrap { overflow-x: auto; }
.rec { width: 100%; border-collapse: collapse; font-size: .95rem; }
.rec th { text-align: left; font: 700 .75rem/1.4 var(--f-type); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); border-bottom: 2px solid var(--char); padding: 8px; }
.rec td { padding: 9px 8px; border-bottom: 1px solid var(--gray); vertical-align: top; font-family: var(--f-type); }
.suspects { display: grid; gap: 16px; }
.sus { display: grid; grid-template-columns: 120px 1fr; gap: 18px; background: #fff; border: 1px solid var(--gray-2); border-radius: var(--r-sm); padding: 16px; }
.sus-pic svg { width: 120px; border-radius: 6px; border: 2px solid var(--char); }
.sus h3 { font-size: 1.3rem; margin-bottom: 10px; }
.sus .doc-dl dd { font-size: .95rem; }
@media (max-width: 560px) { .sus { grid-template-columns: 1fr; } }
.dir { list-style: none; padding: 0; margin: 0 0 12px; }
.dir li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dotted #cfcec5; }
.dir-ico { width: 40px; flex: none; }
.dir-ico svg { width: 40px; height: 24px; }
.dir-name { font-family: var(--f-type); }
.dir-dots { flex: 1; }
.dir-num { font-weight: 700; white-space: nowrap; }
@media (max-width: 520px) { .dir li { flex-wrap: wrap; } .dir-dots { display: none; } .dir-num { margin-left: 50px; width: 100%; } }
.phone-desk .lock-form { margin-top: 10px; }
.call-log { margin-top: 18px; }
.transcript { background: #f7f5ef; border-left: 4px solid var(--tape); animation: pop .4s var(--ease); }
.final fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.final legend { font-weight: 700; margin-bottom: 10px; }
.sus-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pick { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--gray-2); border-radius: 0; background: #fff; cursor: pointer; font-weight: 600; transition: border-color .15s, background .15s; }
.pick:has(input:checked) { border-color: var(--char); background: var(--tape); }
.pick input { width: 18px; height: 18px; accent-color: var(--char); }
.unit-l { margin-top: 6px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 50%; bottom: 20px; translate: -50% 0; z-index: 100; display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); }
.toast { background: var(--char); color: var(--ivory); padding: 12px 16px; border-radius: 0; box-shadow: var(--shadow); animation: pop .3s var(--ease); transition: opacity .4s, transform .4s; }
.toast.good { border-left: 6px solid var(--tape); }
.toast.out { opacity: 0; transform: translateY(8px); }

/* ---------- end ---------- */
.end { max-width: 680px; }
.stamp--ok { color: var(--ok); margin-bottom: 18px; }
.report { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 26px 0 18px; }
.report div { background: var(--gray); border-radius: 0; padding: 14px; }
.report span { display: block; font: 700 .72rem/1 var(--f-type); text-transform: uppercase; letter-spacing: .1em; color: var(--mute); margin-bottom: 8px; }
.report strong { font: 750 1.15rem/1.15 var(--f-head); }
@media (max-width: 560px) { .report { grid-template-columns: 1fr 1fr; } }

/* ---------- notes / menu ---------- */
.notes { width: 100%; min-height: 280px; padding: 14px; border: 2px solid var(--char); border-radius: var(--r-sm); font: 400 1rem/1.6 var(--f-type); background: #fffdf3; color: var(--char); resize: vertical; }
.notes:focus { outline: none; box-shadow: 0 0 0 4px var(--tape); }
.menu { display: grid; gap: 8px; }
.menu-item { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border: 1px solid var(--gray-2); border-radius: 0; background: #fff; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
.menu-item:hover { border-color: var(--char); }
.menu-item span { color: var(--ink-2); font-size: .9rem; }
.howto { padding-left: 1.1em; display: grid; gap: 10px; margin: 0; }

/* ---------- field trail ---------- */
.trail ol { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 18px; overflow-x: auto; }
.trail li { flex: 1 1 0; min-width: 120px; position: relative; }
.trail li + li::before { content: ""; position: absolute; left: -8px; top: 50%; width: 8px; border-top: 2px dashed var(--gray-2); }
.stop { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--gray-2); border-radius: 0; background: #fff; color: var(--char); font: 600 .9rem/1.2 var(--f-body); cursor: pointer; text-align: left; transition: border-color .2s, background .2s; }
.stop:hover { border-color: var(--char); }
.stop.here { border-color: var(--char); background: var(--tape); }
.stop.locked { color: var(--mute); background: transparent; border-style: dashed; cursor: not-allowed; }
.stop-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--char); color: #fff; font-size: .8rem; }
.stop.locked .stop-n { background: transparent; }
.arrive { background: #fff; border-left: 4px solid var(--brand); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 12px 16px; margin: 0 0 16px; animation: pop .4s var(--ease); }
.go-next { margin-top: 22px; }
.next-note { margin: 16px 0 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--tape); font-weight: 600; }
.ex-btn.has-lock { border-style: dashed; }
.dir-addr { display: block; font: 400 .8rem/1.3 var(--f-body); color: var(--mute); }

/* high-end touches: spaced capitals on small UI labels */
.ex-btn, .tab, .stop { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.stop.here { background: var(--char); color: var(--ivory); border-color: var(--char); }
.stop.here .stop-n { background: var(--brass); color: var(--night); }

/* ---------- lobby (case-themed squad room) ---------- */
.gbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
body.in-lobby { background: var(--night); }
body.in-lobby .gbar { background: color-mix(in srgb, var(--night) 94%, transparent); border-bottom-color: var(--night-line); color: var(--night-text); }
body.in-lobby .gbar .icon-btn { background: transparent; color: var(--night-text); border-color: var(--night-line); }
body.in-lobby .gbar .icon-btn:hover { background: #ffffff12; color: var(--brass); }
body.in-lobby .gbar .logo svg rect { fill: var(--tape); }
body.in-lobby .gbar .logo svg circle, body.in-lobby .gbar .logo svg path { fill: var(--night); }

.lobby { position: relative; overflow: hidden; padding: clamp(28px, 5vw, 56px) 16px 72px; background: var(--night); color: var(--night-text); min-height: calc(100vh - 64px); }
.lobby-art { position: absolute; inset: 0; pointer-events: none; }
.lobby-art img { width: 100%; height: 100%; object-fit: cover; opacity: .16; filter: saturate(.6) sepia(.25); }
.lobby-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 0%, transparent, var(--night) 75%), linear-gradient(transparent 40%, var(--night)); }
.lobby-in { position: relative; max-width: 1180px; margin: 0 auto; }
.lobby-head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.lobby .eyebrow { color: var(--brass); }
.lobby-title { font: 700 clamp(2.8rem, 7vw, 5rem)/1 var(--f-name); margin: 0 0 14px; color: var(--night-text); }
.lobby-tag { font: italic 400 clamp(1.1rem, 1.8vw, 1.35rem)/1.45 var(--f-head); color: var(--night-muted); max-width: 46ch; margin: 0 auto; }
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .lobby-grid { grid-template-columns: 1fr; } }
.lobby-room, .lobby-setup { background: color-mix(in srgb, var(--mid) 55%, transparent); border: 1px solid var(--night-line); padding: clamp(18px, 2.4vw, 26px); backdrop-filter: blur(4px); }
.lobby-room-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.lobby-room h2, .lobby-step h2 { font: 500 1.55rem/1.1 var(--f-head); color: var(--night-text); margin: 0; }
.lobby-count { font: 500 .68rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.lobby-wait { color: var(--night-muted); font-size: .95rem; margin: 0 0 14px; min-height: 1.5em; }
.lobby-wait.bad { color: #ffb4a8; }
.lobby .invite { border: 1px dashed var(--night-line); margin-top: 16px; padding: 14px 16px; }
.lobby .invite strong { color: var(--night-text); }
.lobby .invite p { color: var(--night-muted); }
.lobby .btn--ghost { --fg: var(--night-text); --bd: var(--night-line); }
.lobby .btn--ghost:hover { --bg: transparent; --fg: var(--brass); --bd: var(--brass); }
.lobby .btn--tape { --bg: var(--brass); --bd: var(--brass); --fg: var(--night); }
.lobby .btn--tape:hover { --bg: transparent; --fg: var(--brass); }
.lobby-setup { display: grid; gap: 22px; }
.lobby-step { display: grid; gap: 12px; }
.lobby-step h2 { display: flex; align-items: center; gap: 10px; }
.lobby-step h2 label { font: inherit; margin: 0; }
.lobby-step h2 span { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--brass); color: var(--brass); font: 500 .75rem/1 var(--f-body); }
.lobby .set-input { background: color-mix(in srgb, var(--night) 55%, transparent); color: var(--night-text); border-color: var(--night-line); }
.lobby .set-input::placeholder { color: color-mix(in srgb, var(--night-muted) 70%, transparent); }
.lobby .set-input:focus { outline: none; border-color: var(--brass); }
.lobby-help { color: var(--night-muted); margin: 0; }
.side-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.diff-pick { display: grid; gap: 10px; }
@media (max-width: 520px) { .side-pick { grid-template-columns: 1fr; } }
.side-card, .diff-card { display: grid; gap: 4px; text-align: left; padding: 14px 16px; border: 1px solid var(--night-line); background: color-mix(in srgb, var(--night) 40%, transparent); color: var(--night-text); font: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.side-card:hover, .diff-card:hover { border-color: var(--brass); transform: translateY(-2px); }
.side-card strong, .diff-card strong { font: 600 1.25rem/1.1 var(--f-head); }
.side-card span, .diff-card span { font-size: .88rem; color: var(--night-muted); line-height: 1.45; }
.side-card em { font: normal 500 .62rem/1.3 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-top: 4px; }
.side-card[aria-pressed="true"], .diff-card[aria-checked="true"] { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 16%, transparent); box-shadow: inset 3px 0 0 var(--brass); }
.diff-card[aria-checked="true"] strong::after { content: "  \2713"; color: var(--brass); }
.lobby-start { width: 100%; min-height: 56px; }
.lobby-start[aria-disabled="true"] { opacity: .55; }
.lobby-note { margin: -8px 0 0; text-align: center; color: var(--night-muted); font-size: .9rem; }
.lobby-note.nudge { animation: shake .4s; color: #ffb4a8; }

/* beginner walkthrough */
.intro { max-width: 700px; }
.intro-h { font-size: 1.45rem; margin: 26px 0 8px; }
.intro .howto { padding-left: 1.1em; }
.intro .howto li { margin-bottom: 10px; }

/* hints by difficulty */
.hint-meter { margin: -4px 0 14px; padding: 8px 12px; background: var(--tape); font-size: .86rem; }
.hint-meter.empty { background: color-mix(in srgb, var(--err) 14%, #fff); }
.hint-none { font-size: .86rem; color: var(--mute); margin: 6px 0 0; font-style: italic; }
.menu-info { margin: 0 0 4px; padding: 10px 14px; background: var(--tape); font-size: .92rem; }

/* ---------- video & voice (js/call.js): tiles + controls, shown in the lobby or the in-game dock ---------- */
.call-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.call-tiles.in-lobby { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tile { position: relative; margin: 0; aspect-ratio: 4 / 3; background: var(--night-2); overflow: hidden; border: 1px solid var(--night-line); }
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile.self video { transform: scaleX(-1); }
.tile-off { position: absolute; inset: 0; display: none; place-items: center; font: 500 2rem/1 var(--f-head); color: var(--brass); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--mid) 70%, transparent), var(--night-2)); }
.tile.cam-off video { visibility: hidden; }
.tile.cam-off .tile-off { display: grid; }
.tile.other { opacity: .5; }
.tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 1px; padding: 16px 8px 6px; color: #fff; background: linear-gradient(transparent, #000b); }
.tile-name { display: flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-sub { font-size: .64rem; color: #ffffffb0; letter-spacing: .04em; }
.tile-role { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.muted-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; background: var(--err); border-radius: 50%; }
.muted-ico svg { width: 11px; height: 11px; }

.call-ctrls { display: grid; gap: 8px; margin-top: 12px; color: var(--night-text); }
.ctrl-row { display: flex; align-items: stretch; gap: 6px; }
.call-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 10px; border: 1px solid var(--night-line); background: transparent; color: #ffb4a8; font: 500 .66rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.call-btn svg { width: 18px; height: 18px; flex: none; }
.call-btn.on { color: var(--night); background: var(--brass); border-color: var(--brass); }
.call-btn:hover { border-color: var(--brass); }
.call-btn:disabled { opacity: .35; cursor: not-allowed; }
.call-gear { flex: none; width: 44px; padding: 0; color: var(--night-text); }
.call-vol { flex: 1.2; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 10px; border: 1px solid var(--night-line); color: var(--night-text); font-weight: 400; }
.call-vol svg { width: 18px; height: 18px; flex: none; }
.call-vol input, .set-range { width: 100%; accent-color: var(--brass); }
.channels { gap: 0; border: 1px solid var(--night-line); }
.ch-btn { flex: 1; min-height: 36px; padding: 0 8px; border: 0; background: transparent; color: var(--night-muted); font: 500 .66rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.ch-btn + .ch-btn { border-left: 1px solid var(--night-line); }
.ch-btn.on { background: color-mix(in srgb, var(--brass) 22%, transparent); color: var(--brass); box-shadow: inset 0 -2px 0 var(--brass); }
.ch-n { letter-spacing: 0; }
.call-sound { min-height: 38px; border: 0; background: var(--brass); color: var(--night); font: 600 .78rem var(--f-body); letter-spacing: .08em; cursor: pointer; }

/* in-game dock */
.call-dock { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: min(380px, calc(100% - 32px)); background: var(--night); color: var(--night-text); border: 1px solid var(--night-line); box-shadow: 0 24px 60px -20px #000c; padding: 0 8px 8px; }
.call-top { display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 6px; }
.call-title { font: 500 .64rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); white-space: nowrap; }
.call-title span { color: var(--night-muted); letter-spacing: .12em; }
.call-chan { flex: 1; font-size: .72rem; color: var(--night-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-mini { display: grid; place-items: center; width: 30px; height: 30px; border: 0; background: none; color: var(--night-text); cursor: pointer; }
.call-mini svg { width: 18px; height: 18px; }
.dock-tiles .call-tiles { max-height: 44vh; overflow: auto; }
.call-dock .tile.other { display: none; }
.call-dock .call-ctrls { margin-top: 8px; }
.call-dock .call-btn span { display: none; }
.call-dock .call-btn { padding: 0; }
.call-dock.mini { width: auto; }
.call-dock.mini .dock-tiles, .call-dock.mini .channels { display: none; }
body.has-call .toasts { bottom: 20px; left: auto; right: 16px; translate: none; width: min(380px, calc(100% - 32px)); }
@media (max-width: 760px) {
  .call-dock { left: 8px; bottom: 8px; width: min(300px, calc(100% - 16px)); }
  .dock-tiles .call-tiles { max-height: 30vh; }
  body.has-call .toasts { top: 76px; bottom: auto; right: 8px; }
  .call-btn span { display: none; }
}

/* settings panel */
.settings { display: grid; gap: 18px; }
.set-row { display: grid; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--gray-2); }
.set-col { display: grid; gap: 6px; }
.set-col label { margin: 0; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .set-grid { grid-template-columns: 1fr; } }
.set-input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--char); border-radius: 0; background: #fff; font: 400 .95rem var(--f-body); color: var(--char); }
.set-toggles { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.set-toggle { display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 500; cursor: pointer; }
.set-channels { display: flex; border: 1px solid var(--char); }
.set-channels .ch-btn { color: var(--ink-2); min-height: 42px; }
.set-channels .ch-btn + .ch-btn { border-left: 1px solid var(--char); }
.set-channels .ch-btn.on { background: var(--brand); color: #fff; box-shadow: none; }
.set-range { accent-color: var(--brand); }
.set-privacy { margin: 0; }
.switch { position: relative; display: inline-block; flex: none; width: 54px; height: 30px; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch-ui { position: absolute; inset: 0; background: var(--gray-2); border-radius: 30px; transition: background .2s; pointer-events: none; }
.switch-ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0004; transition: transform .2s var(--ease); }
.switch input:checked + .switch-ui { background: var(--brand); }
.switch input:checked + .switch-ui::after { transform: translateX(24px); }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--brass-ink); outline-offset: 3px; }
.switch input:disabled + .switch-ui { opacity: .5; }

/* keep the in-game dock compact so it doesn't cover the scene */
.call-dock { width: min(330px, calc(100% - 32px)); }
.dock-tiles .call-tiles { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.call-dock .tile-off { font-size: 1.1rem; }
.call-dock .tile-sub { display: none; }
.call-dock .tile figcaption { padding: 10px 5px 4px; }
.call-dock .tile-name { font-size: .66rem; }
.call-dock .tile-role { display: none; }

/* lobby timer switch */
.timer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 14px 16px; border: 1px solid var(--night-line); background: color-mix(in srgb, var(--night) 40%, transparent); cursor: pointer; font-weight: 400; }
.timer-txt { display: grid; gap: 4px; }
.timer-txt strong { font: 600 1.15rem/1.1 var(--f-head); color: var(--night-text); }
.timer-txt span { font-size: .88rem; color: var(--night-muted); line-height: 1.45; }
.timer-row.locked { cursor: not-allowed; border-color: color-mix(in srgb, var(--brass) 45%, transparent); }
.lobby .switch-ui { background: color-mix(in srgb, var(--night-text) 22%, transparent); }
.lobby .switch input:checked + .switch-ui { background: var(--brass); }
.lobby .switch input:disabled + .switch-ui { opacity: .7; }

/* ---------- lobby: host vs guests ---------- */
.guest-card { padding: 14px 16px; border: 1px solid var(--night-line); background: color-mix(in srgb, var(--night) 40%, transparent); display: grid; gap: 6px; }
.guest-card p { margin: 0; color: var(--night-muted); font-size: .95rem; }
.guest-card strong { color: var(--night-text); }
.guest-card .guest-by { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.guest-card .guest-by strong { color: var(--brass); }
.lobby-ready { width: 100%; min-height: 56px; --bg: transparent; --fg: var(--night-text); --bd: var(--brass); }
.lobby-ready:hover { --bg: color-mix(in srgb, var(--brass) 18%, transparent); --fg: var(--night-text); }
.lobby-ready.is-ready { --bg: var(--brass); --fg: var(--night); --bd: var(--brass); }
.lobby-ready.is-ready:hover { --bg: var(--brass); --fg: var(--night); }
.lobby-anyway { justify-self: center; margin-top: -14px; border: 0; background: none; color: var(--brass); font: 500 .8rem var(--f-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lobby-joined { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--brass); background: color-mix(in srgb, var(--brass) 12%, transparent); }
.lobby-joined p { margin: 0; color: var(--night-text); }

/* ---------- opening cutscene ---------- */
body.in-scene { overflow: hidden; }
body.in-scene .gbar { visibility: hidden; }
.scene { position: fixed; inset: 0; z-index: 55; padding: 0; background: #050306; }
.scene-stage { position: absolute; inset: 0; overflow: hidden; cursor: pointer; color: #f4ece4; }
/* letterbox bars */
.scene-stage::before, .scene-stage::after { content: ""; position: absolute; left: 0; right: 0; height: 9vh; background: #000; z-index: 6; pointer-events: none; }
.scene-stage::before { top: 0; } .scene-stage::after { bottom: 0; }
.scene-bg { position: absolute; inset: 0; transform: scale(1.08); animation: scene-pan 30s ease-out forwards; }
.scene-bg svg { width: 100%; height: 100%; display: block; }
.scene-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 60% 45%, transparent 30%, #000c); }
@keyframes scene-pan { to { transform: scale(1) translateX(-1.5%); } }
.scene-bg .siren { animation: siren 1.1s steps(2) infinite; }
@keyframes siren { 50% { fill: #2a63ff; } }
.scene-rain { position: absolute; inset: -20% 0 0; z-index: 2; pointer-events: none; opacity: .32;
  background-image: repeating-linear-gradient(104deg, transparent 0 22px, #c8d4ff40 22px 23px, transparent 23px 47px), repeating-linear-gradient(100deg, transparent 0 37px, #ffffff26 37px 38px, transparent 38px 71px);
  background-size: 300px 300px, 420px 420px; animation: rain .55s linear infinite; }
@keyframes rain { to { background-position: -60px 300px, -80px 420px; } }
.scene-blinds { position: absolute; inset: 0; z-index: 3; display: none; pointer-events: none; background: repeating-linear-gradient(180deg, #0000 0 26px, #000a 26px 44px); }
.scene-stage.is-hq .scene-blinds { display: block; }
.scene-stage.is-hq .scene-bg { filter: saturate(.7) brightness(.8); }
.scene-char { position: absolute; z-index: 4; left: max(2vw, 16px); bottom: 9vh; height: min(70vh, 640px); aspect-ratio: 3 / 4; opacity: 0; transform: translateX(-40px); transition: opacity .9s var(--ease), transform .9s var(--ease); filter: drop-shadow(0 30px 40px #000); }
.scene-char svg { width: 100%; height: 100%; display: block; }
.scene-stage.char-in .scene-char { opacity: 1; transform: none; }
.scene-char .m-open { opacity: 0; }
.scene-stage.talking .scene-char .m-open { animation: talk .26s steps(1) infinite; }
.scene-stage.talking .scene-char .m-closed { animation: talk .26s steps(1) infinite reverse; }
@keyframes talk { 0% { opacity: 1; } 50% { opacity: 0; } }
.scene-stage.talking .scene-char svg { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-.4deg); } }
/* title card */
.scene-card { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; text-align: center; gap: 14px; transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none; }
.scene-card span { font: 500 .78rem/1 var(--f-body); letter-spacing: .4em; text-transform: uppercase; color: var(--brass); animation: fade-up 1.2s var(--ease) both; }
.scene-card strong { font: 700 clamp(2rem, 5vw, 3.8rem)/1.05 var(--f-name); color: #f4ece4; text-shadow: 0 6px 30px #000; animation: fade-up 1.2s .25s var(--ease) both; }
.scene-card em { font: italic 400 clamp(1.1rem, 2vw, 1.5rem)/1.3 var(--f-head); color: #ddd0d6; animation: fade-up 1.2s .5s var(--ease) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
.scene-stage.card-out .scene-card { opacity: 0; transform: translateY(-10px); }
/* subtitles */
.scene-sub { position: absolute; z-index: 7; left: 50%; bottom: calc(9vh + 24px); translate: -50% 0; width: min(860px, calc(100% - 32px)); padding: 18px 24px 14px; background: color-mix(in srgb, #0b070d 82%, transparent); border: 1px solid color-mix(in srgb, var(--brass) 35%, transparent); backdrop-filter: blur(6px); animation: fade-up .5s var(--ease); }
@media (min-width: 900px) { .scene-sub { left: auto; right: 4vw; translate: none; width: min(780px, 58vw); } }
.scene-who { margin: 0 0 8px; font: 500 .72rem/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--brass); display: flex; gap: 12px; flex-wrap: wrap; }
.scene-who span { color: #ddd0d6aa; letter-spacing: .12em; }
.scene-text { margin: 0; min-height: 3.2em; font: 400 clamp(1.15rem, 1.9vw, 1.5rem)/1.5 var(--f-type); color: #f4ece4; }
.scene-foot { display: flex; justify-content: space-between; margin: 10px 0 0; font-size: .72rem; letter-spacing: .08em; color: #ddd0d699; }
.scene-skip { position: absolute; z-index: 8; top: calc(9vh + 16px); right: 18px; padding: 9px 16px; border: 1px solid #ffffff40; background: #0008; color: #f4ece4; font: 500 .72rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.scene-skip:hover { border-color: var(--brass); color: var(--brass); }
.scene-stage.done .scene-skip { display: none; }
/* end card */
.scene-end { position: absolute; z-index: 7; left: 50%; bottom: calc(9vh + 32px); translate: -50% 0; width: min(620px, calc(100% - 32px)); text-align: center; animation: fade-up .6s var(--ease); }
@media (min-width: 900px) { .scene-end { left: auto; right: 6vw; translate: none; } }
.scene-end h2 { font: 500 clamp(2rem, 4vw, 3.2rem)/1.1 var(--f-head); color: #f4ece4; margin: 0 0 22px; text-shadow: 0 4px 24px #000; }
.scene-end-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.scene .btn--tape { --bg: var(--brass); --bd: var(--brass); --fg: #1c1420; }
.scene .btn--tape:hover { --bg: transparent; --fg: var(--brass); }
.scene .btn--ghost { --fg: #f4ece4; --bd: #ffffff40; }
.scene .btn--ghost:hover { --bg: transparent; --fg: var(--brass); --bd: var(--brass); }
@media (max-width: 700px) {
  .scene-char { height: 46vh; left: 50%; translate: -50% 0; bottom: calc(9vh + 150px); }
  .scene-stage.char-in .scene-char { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .scene-bg, .scene-rain, .scene-char svg { animation: none !important; } }

/* the drive to the scene */
.scene-stage.driving .scene-bg { visibility: hidden; animation: none; }
.scene-stage.driving .scene-blinds { display: none !important; }
.scene-drive { position: absolute; left: 0; right: 0; top: 9vh; bottom: 9vh; z-index: 1; overflow: hidden;
  background: radial-gradient(60% 40% at 70% 30%, #4a2a4433, transparent 70%), linear-gradient(180deg, #08050b 0%, #170e1d 45%, #34203a 88%, #3d2540 100%);
  transition: opacity .9s var(--ease); }
.scene-drive::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(95% 85% at 45% 55%, transparent 45%, #000b); }
.scene-drive.out { opacity: 0; }
.dv-layer { position: absolute; top: 0; bottom: 0; left: 0; background-repeat: repeat-x; background-position: 0 0; will-change: transform; }
.dv-front { z-index: 3; transition: opacity 1.4s var(--ease); }
.scene-drive.braking .dv-front { opacity: 0; }
.dv-car { position: absolute; z-index: 2; left: 18%; bottom: 1.5%; height: 31%; aspect-ratio: 900 / 250; transform-origin: 35% 95%;
  transition: transform .7s var(--ease); -webkit-box-reflect: below -3% linear-gradient(transparent 55%, #ffffff1f); }
.dv-car svg { width: 100%; height: 100%; display: block; overflow: visible; animation: dv-rumble .18s ease-in-out infinite alternate; }
.dv-car::before { content: ""; position: absolute; left: 4%; bottom: 40%; width: 70%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #ff3b3038, #ff3b3010 60%, transparent); animation: dv-glow 1s steps(1) infinite; }
.dv-car .dc-wheel { transform-box: fill-box; transform-origin: center; }
.dv-car .dc-dome { animation: dv-dome 1s steps(1) infinite; }
.dv-car .dc-glow { animation: dv-glow 1s steps(1) infinite; }
.dv-car .dc-beam { mix-blend-mode: screen; }
.dv-car.braking { transform: rotate(.9deg); }
.dv-car.parked { transform: none; transition: transform .6s cubic-bezier(.3, 1.7, .5, 1); }
.dv-car.parked svg { animation: none; }
@keyframes dv-rumble { to { transform: translateY(1.5px); } }
@keyframes dv-dome { 50% { fill: #6a1812; } }
@keyframes dv-glow { 50% { opacity: 0; } }

.scene-dcap { position: absolute; z-index: 7; left: max(5vw, 20px); top: calc(9vh + 6vh); width: min(660px, calc(100% - 40px)); pointer-events: none; transition: opacity .7s var(--ease); }
.scene-dcap.gone { opacity: 0; }
.dv-kick { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font: 500 .74rem/1.4 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: var(--brass); animation: fade-up 1.1s var(--ease) both; }
.dv-kick::before { content: ""; width: 36px; height: 1px; background: currentColor; }
.dv-text { margin: 0; min-height: 3em; font: 400 clamp(1.3rem, 2.4vw, 2rem)/1.42 var(--f-head); color: #f4ece4; text-shadow: 0 2px 20px #000, 0 0 3px #000; }
.dv-text.in { animation: fade-up .5s var(--ease) both; }
.dv-hint { margin: 16px 0 0; font: 500 .68rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: #ddd0d680; }
@media (max-width: 760px) {
  .dv-car { left: 4%; height: 20%; }
  .scene-dcap { top: calc(9vh + 64px); }
  .dv-kick { letter-spacing: .2em; }
}
@media (prefers-reduced-motion: reduce) { .dv-car svg, .dv-car::before, .dv-car .dc-dome, .dv-car .dc-glow { animation: none !important; } }


/* ---------- notebook drawer (right edge, in the game): leather cover, Evidence + My notes ---------- */
.notebook { --nbw: min(420px, calc(100vw - 52px)); position: fixed; top: 80px; right: 0; bottom: 14px; z-index: 58; display: flex; align-items: flex-start; pointer-events: none; transform: translateX(var(--nbw)); transition: transform .45s cubic-bezier(.2, .9, .2, 1); }
.notebook.open { transform: none; }

/* the tab that sticks out of the edge */
.nb-tab { position: relative; pointer-events: auto; margin-top: 96px; display: grid; justify-items: center; gap: 10px; padding: 16px 10px 18px; border: 0; border-radius: 6px 0 0 6px; color: var(--brass); cursor: pointer;
  background: linear-gradient(160deg, #3a2630, #1c1420 70%); box-shadow: -8px 10px 24px -10px #000a, inset 0 0 0 1px #ffffff14; transition: padding .2s var(--ease); }
.nb-tab::after { content: ""; position: absolute; inset: 4px 0 4px 4px; border: 1px dashed color-mix(in srgb, var(--brass) 35%, transparent); border-right: 0; border-radius: 4px 0 0 4px; pointer-events: none; }
.nb-tab svg { width: 20px; height: 20px; }
.nb-tab span { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 .68rem/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: #f4ece4; }
.nb-tab:hover { padding-left: 14px; }
.nb-badge { position: absolute; top: -8px; left: -8px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 11px; background: var(--brass); color: #1c1420; font: 700 .72rem/1 var(--f-body); box-shadow: 0 0 0 3px #1c1420, 0 4px 10px #0006; }
.nb-tab.ping { animation: nb-ping 1.4s var(--ease); }
@keyframes nb-ping { 0% { box-shadow: -8px 10px 24px -10px #000a, 0 0 0 0 color-mix(in srgb, var(--brass) 70%, transparent); } 40% { box-shadow: -8px 10px 24px -10px #000a, 0 0 0 10px transparent; } 55% { transform: translateX(-5px); } 100% { transform: none; } }

/* the notebook itself */
.nb-panel { pointer-events: auto; width: var(--nbw); height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 8px 0 0 8px;
  background: #f5eee0; box-shadow: -24px 0 50px -24px #000b, inset 1px 0 0 #fff8; }
.nb-cover { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 16px 16px 22px; color: #f4ece4;
  background: radial-gradient(120% 140% at 0% 0%, #4a3040 0%, #2a1b26 45%, #1a1219 100%); }
.nb-cover::before { content: ""; position: absolute; inset: 6px; border: 1px dashed color-mix(in srgb, var(--brass) 45%, transparent); border-radius: 4px; pointer-events: none; }
.nb-cover::after { content: ""; position: absolute; top: 0; bottom: 0; right: 58px; width: 9px; background: linear-gradient(90deg, #0d080c, #2a1d24 50%, #0d080c); box-shadow: 0 0 6px #0008; }
.nb-case { position: relative; margin: 0 0 6px; font: 500 .62rem/1 var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: #ddd0d6b0; }
.nb-title { position: relative; margin: 0; font: 700 1.45rem/1.05 var(--f-name); letter-spacing: .01em; color: var(--brass);
  background: linear-gradient(180deg, #f0c99f, #c98a5a 55%, #e9b98a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 #0009); }
.nb-close { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; border: 1px solid #ffffff24; border-radius: 50%; background: #0003; color: #f4ece4; cursor: pointer; }
.nb-close:hover { border-color: var(--brass); color: var(--brass); }
.nb-close svg { width: 16px; height: 16px; }

/* divider tabs */
.nb-tabs { display: flex; gap: 4px; padding: 10px 14px 0; background: linear-gradient(#1a1219, #2a1b26); }
.nb-tabbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 0; border-radius: 6px 6px 0 0; background: #ffffff14; color: #ddd0d6; font: 500 .7rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.nb-tabbtn:hover { background: #ffffff22; color: #fff; }
.nb-tabbtn[aria-selected="true"] { background: #f5eee0; color: var(--char); box-shadow: inset 0 3px 0 var(--brass); }
.nb-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--brand); color: #fff; font: 700 .66rem/1 var(--f-body); letter-spacing: 0; }
.nb-n:empty { display: none; }
.nb-tabbtn:not([aria-selected="true"]) .nb-n { background: #ffffff30; }
.nb-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nb-view[hidden] { display: none !important; }

/* evidence */
.ev-top { padding: 12px 16px 4px; }
.ev-search { width: 100%; min-height: 38px; padding: 0 12px 0 34px; border: 0; border-bottom: 1px solid #d9ccb6; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%2366596a' stroke-width='2'/%3E%3Cpath d='M15 15l5 5' stroke='%2366596a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 6px 50% / 18px no-repeat; font: 400 .92rem var(--f-body); color: var(--char); }
.ev-search:focus { outline: none; border-bottom-color: var(--brass-ink); }
.ev-list { flex: 1; overflow: auto; padding: 4px 16px 24px; scrollbar-width: thin; scrollbar-color: #cbbba3 transparent; }
.ev-sum { margin: 6px 0 10px; font: 500 .62rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.ev-group + .ev-group { margin-top: 18px; }
.ev-place { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 600 1.05rem/1 var(--f-head); color: var(--char); }
.ev-place::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #cbbba3, transparent); }
.ev-place span { order: 2; display: inline-grid; place-items: center; min-width: 20px; height: 20px; border: 1px solid #cbbba3; border-radius: 10px; font: 600 .64rem/1 var(--f-body); color: var(--mute); }

/* index cards */
.ev-card { position: relative; margin: 0 0 12px; padding: 12px 14px 10px 16px; background: #fffdf8; border: 1px solid #e7dcc8; border-top: 3px solid #c97a6d; border-radius: 2px;
  box-shadow: 0 1px 0 #fff inset, 0 1px 2px #6b4f3a1f, 0 10px 18px -14px #6b4f3a66; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.ev-card:hover { transform: translateY(-1px) rotate(-.15deg); box-shadow: 0 1px 0 #fff inset, 0 2px 4px #6b4f3a26, 0 16px 26px -16px #6b4f3a80; }
.ev-card.is-new { animation: file-in .7s cubic-bezier(.2, .9, .25, 1.15) both; animation-delay: calc(var(--i) * 60ms); }
.ev-card.is-new::before { content: ""; position: absolute; left: -1px; top: -3px; bottom: -1px; width: 3px; background: var(--brass); }
@keyframes file-in { from { opacity: 0; transform: translateX(28px) rotate(2deg); } 60% { opacity: 1; } to { transform: none; } }
.ev-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ev-kind { font: 600 .58rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-ink); }
.ev-new { padding: 3px 6px 2px; border-radius: 2px; background: var(--brass); color: #1c1420; font: 700 .54rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; }
.ev-when { margin-left: auto; padding: 2px 6px; border: 1px solid #c97a6d80; border-radius: 2px; color: #a4574c; font: 700 .64rem/1.2 var(--f-type); letter-spacing: .06em; transform: rotate(-2deg); }
.ev-title { margin: 0 0 6px; font: 600 1.22rem/1.15 var(--f-head); color: var(--char); }
.ev-facts { margin: 0; padding: 0; list-style: none; font: 400 .82rem/1.55 var(--f-type); color: #2b2440; }
.ev-facts li { position: relative; padding-left: 16px; }
.ev-facts li + li { margin-top: 4px; }
.ev-facts li::before { content: "—"; position: absolute; left: 0; color: #c97a6d; }
.ev-facts strong { font-weight: 700; color: #1c1420; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--brass) 32%, transparent) 62%); }
.ev-facts em { font-style: italic; }
.ev-code { display: block; margin: 3px 0; padding: 3px 7px; background: #f3ecdf; border-left: 2px solid #cbbba3; letter-spacing: .1em; font-size: .78rem; }
.ev-acts { display: flex; gap: 14px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed #e2d5bf; }
.ev-act { padding: 0; border: 0; background: none; color: var(--ink-2); font: 500 .7rem/1.4 var(--f-body); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-decoration-color: #cbbba3; text-underline-offset: 3px; cursor: pointer; }
.ev-act:hover { color: var(--brass-ink); text-decoration-color: currentColor; }
.ev-empty { margin: 30px 8px; text-align: center; color: var(--mute); }
.ev-empty svg { width: 46px; height: 46px; margin: 0 auto 10px; color: #cbbba3; }
.ev-empty p { margin: 0 0 6px; font-size: .9rem; }
.ev-empty strong { font: 600 1.15rem var(--f-head); color: var(--char); }
.ev-none { color: var(--mute); font-size: .9rem; margin-top: 16px; }

/* my notes: lined paper with a red margin */
.nb-text { flex: 1; width: 100%; resize: none; border: 0; outline: none; padding: 10px 16px 16px 48px; font: 400 .98rem/28px var(--f-type); color: #1f2a52; background-color: #fffdf6;
  background-image: linear-gradient(90deg, transparent 36px, #e3a3a3 36px, #e3a3a3 37px, transparent 37px, transparent 40px, #e3a3a3 40px, #e3a3a3 41px, transparent 41px), repeating-linear-gradient(180deg, transparent 0 37px, #c9d6ea 37px 38px);
  background-attachment: local; background-position: 0 0, 0 -10px; }
.nb-text::placeholder { color: #8a93ad; }
.nb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid #e2d5bf; background: #f5eee0; font-size: .72rem; color: var(--mute); }
.nb-tool { border: 1px solid #cbbba3; border-radius: 2px; background: #fffdf8; padding: 6px 10px; font: 500 .72rem var(--f-body); letter-spacing: .04em; color: var(--char); cursor: pointer; }
.nb-tool:hover { border-color: var(--brass-ink); color: var(--brass-ink); }

/* "Filed in your notebook" toast */
.toast.ev { display: grid; gap: 3px; padding: 12px 16px 12px 18px; background: linear-gradient(135deg, #2a1b26, #1c1420); color: #f4ece4; border-left: 3px solid var(--brass); box-shadow: 0 18px 40px -18px #000c; }
.toast.ev strong { font: 600 1.1rem/1.2 var(--f-head); }
.toast-ev { display: flex; align-items: center; gap: 8px; font: 500 .6rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.toast-ev svg { width: 15px; height: 15px; }
.case-file .screen-h { font-size: 1.8rem; }
@media (prefers-reduced-motion: reduce) { .ev-card.is-new, .nb-tab.ping { animation: none; } }

.screen--game { padding-right: 58px; }

/* keep pop-ups clear of the open notebook */
@media (min-width: 761px) { body.nb-open .toasts { right: calc(min(420px, 100vw - 52px) + 60px); } }

/* team evidence board */
.ev-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 2px; }
.ev-filter[hidden] { display: none; }
.ev-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px 0 12px; border: 1px solid #d9ccb6; border-radius: 15px; background: #fffdf8; color: var(--ink-2); font: 500 .7rem/1 var(--f-body); letter-spacing: .06em; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.ev-chip span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #efe5d3; color: var(--mute); font-weight: 700; font-size: .6rem; }
.ev-chip:hover { border-color: var(--brass-ink); color: var(--char); }
.ev-chip[aria-pressed="true"] { background: #2a1f30; border-color: #2a1f30; color: #f4ece4; }
.ev-chip[aria-pressed="true"] span { background: var(--brass); color: #1c1420; }
.ev-chip:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 2px; }
.ev-sum { display: flex; align-items: center; gap: 8px; }
.ev-live { width: 7px; height: 7px; border-radius: 50%; background: #5f9a6e; box-shadow: 0 0 0 3px #5f9a6e33; animation: ev-live 2.4s ease-in-out infinite; }
@keyframes ev-live { 50% { box-shadow: 0 0 0 6px #5f9a6e00; } }
.ev-side { order: 1; padding: 3px 6px 2px; border-radius: 2px; font: 700 .52rem/1 var(--f-body); font-style: normal; letter-spacing: .18em; text-transform: uppercase; }
.ev-side--field { background: #e9dccb; color: #7a4a22; }
.ev-side--hq { background: #e3dbe6; color: #4f3f57; }
.ev-by { display: flex; align-items: center; gap: 7px; margin: 9px 0 0; font: 400 .74rem/1.3 var(--f-body); color: var(--mute); }
.ev-by strong { color: var(--char); font-weight: 600; }
.ev-avatar { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #4f3f57; color: #f4ece4; font: 700 .62rem/1 var(--f-body); }
.ev-avatar--me { background: var(--brass); color: #1c1420; }
.ev-card.is-team { border-top-color: #8a7393; }
.ev-elsewhere { color: var(--mute); font: italic 400 .72rem/1.4 var(--f-body); }
@media (prefers-reduced-motion: reduce) { .ev-live { animation: none; } }

/* ---------- case 01 upgrades ---------- */
/* overtime clock */
.clock-chip.over { background: #8f2d22; color: #fff; animation: over-pulse 1.6s ease-in-out infinite; }
.clock-chip.over .clock-sub, .clock-chip.over * { color: #fff; }
@keyframes over-pulse { 50% { background: #b23a2c; } }
@media (prefers-reduced-motion: reduce) { .clock-chip.over { animation: none; } }

/* radio + chat toasts */
.toast.radio { display: grid; gap: 4px; background: linear-gradient(135deg, #20262b, #141a1e); border-left: 3px solid #7fb39a; font: 400 .92rem/1.45 var(--f-type); }
.toast-radio { display: flex; align-items: center; gap: 7px; font: 600 .64rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: #9fd1b8; }
.toast-radio svg { width: 15px; height: 15px; }
.toast.chat { border-left: 3px solid var(--brass); }

/* text chat in the call controls */
.call-chat { display: grid; gap: 6px; border: 1px solid var(--night-line); padding: 8px; background: #150f18; }
.call-chat[hidden] { display: none; }
.chat-log { list-style: none; margin: 0; padding: 0 2px; max-height: 180px; overflow: auto; display: grid; gap: 7px; scrollbar-width: thin; }
.chat-log:empty::before { content: "Messages go to everyone in your channel."; font-size: .74rem; color: var(--night-muted); }
.chat-log li { display: grid; gap: 2px; font-size: .82rem; line-height: 1.4; color: var(--night-text); }
.chat-who { font: 600 .62rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.chat-log li.mine .chat-who { color: var(--night-muted); }
.chat-t { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--night-muted); }
.chat-msg { overflow-wrap: anywhere; }
.chat-form { display: flex; gap: 6px; }
.chat-in { flex: 1; min-width: 0; min-height: 36px; padding: 0 10px; border: 1px solid var(--night-line); background: #0d0910; color: var(--night-text); font: 400 .86rem var(--f-body); }
.chat-in:focus { outline: none; border-color: var(--brass); }
.chat-send { padding: 0 12px; border: 0; background: var(--brass); color: var(--night); font: 600 .66rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.call-chat-btn { position: relative; }
.chat-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brass); color: var(--night); font: 700 .6rem/18px var(--f-body); text-align: center; }
.chat-badge[hidden] { display: none; }

/* HQ: code wheel */
.cw { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 24px; align-items: center; }
@media (max-width: 700px) { .cw { grid-template-columns: 1fr; } }
.cw-dial svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 22px #1c142055); }
.cw-o { font: 700 17px var(--f-type); fill: #f4ece4; }
.cw-i { font: 700 15px var(--f-type); fill: #8e5426; }
.cw-inner { transform-origin: 150px 150px; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.cw-label { font: 600 10px var(--f-body); letter-spacing: 3px; fill: #66596a; }
.cw-n { font: 700 30px var(--f-head); fill: #1c1420; }
.cw-ctl { display: flex; align-items: center; gap: 12px; margin: 10px 0 16px; }
.cw-show { min-width: 80px; text-align: center; font-weight: 500; }
.cw-show strong { font: 700 1.3rem var(--f-head); }
.cw-b { min-width: 46px; padding: 0 12px; }
.cw-l { display: block; margin: 12px 0 6px; font: 700 .7rem/1 var(--f-type); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.cw-in { width: 100%; max-width: none; text-transform: uppercase; letter-spacing: .12em; }
.cw-out { min-height: 2.2em; margin: 0; padding: 10px 12px; background: var(--gray); font-size: 1.1rem; letter-spacing: .14em; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .cw-inner { transition: none; } }

/* HQ: property room */
.env-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 12px; }
.env { margin: 0; padding: 20px 12px 12px; background: #e9dcc2; border: 1px solid #cdb994; clip-path: polygon(0 10px, 50% 0, 100% 10px, 100% 100%, 0 100%); }
.env-art { background: #fffdf8; border: 1px solid #d8c8a8; padding: 8px; }
.env-art svg { width: 100%; height: auto; display: block; }
.env figcaption { display: grid; gap: 3px; margin-top: 8px; }
.env figcaption .typed { font-weight: 700; }

/* HQ: Pier 9 plan */
.plan-art { margin: 12px 0; border: 1px solid #cdb994; }
.plan-art svg { width: 100%; height: auto; display: block; }

/* the final call */
.fin-n { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; background: var(--char); color: var(--ivory); font: 700 .78rem/1 var(--f-body); vertical-align: 1px; }
.fin-where { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0; }
.fin-where .unit-l { margin: 0; }
.fin-proof { margin: 8px 0 10px; }
.fin-h { font-weight: 600; margin: 0 0 10px; }
.proof-pick { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; border: 0; }
.proof-pick legend { margin-bottom: 6px; font: 700 .72rem/1 var(--f-type); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.pick--wide { font-weight: 500; line-height: 1.35; }

/* band photo easter egg */
.egg-host { position: relative; }
.egg { position: absolute; left: 82%; top: 70%; width: 16%; height: 26%; border: 0; background: none; cursor: zoom-in; border-radius: 50%; }
.egg:focus-visible { outline: 2px solid var(--brass-ink); }

/* the phone ringing */
.ringing { text-align: center; }
.ring-ico svg { width: 72px; height: 72px; margin: 0 auto; display: block; animation: ring-shake .5s ease-in-out infinite; }
.ring-ico.still svg { animation: none; }
@keyframes ring-shake { 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@media (prefers-reduced-motion: reduce) { .ring-ico svg { animation: none; } }
.ring-h { font: 600 1.25rem/1.3 var(--f-head); margin: 10px 0 14px; }
.ring-log { text-align: left; display: grid; gap: 10px; }
.ring-log p { margin: 0; padding: 10px 14px; background: var(--gray); font: 400 .95rem/1.5 var(--f-type); animation: fade-up .5s var(--ease) both; }

/* warm-up */
.pr-k { margin: 0 0 8px; font: 600 .68rem/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--brass-ink); }
.pr-half { display: flex; align-items: baseline; gap: 14px; margin: 16px 0; padding: 14px 16px; background: var(--char); color: var(--ivory); font-weight: 500; }
.pr-half strong { font-size: 1.6rem; letter-spacing: .12em; color: var(--brass); }
.pr-steps { margin: 0 0 18px; padding-left: 1.2em; display: grid; gap: 8px; }
.pr-skip { margin: 16px 0 0; text-align: center; }
.link-btn { padding: 4px; border: 0; background: none; color: var(--ink-2); font: 500 .85rem var(--f-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* end screen */
.report { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stamp--late { color: #9a3324; margin-bottom: 18px; }
.end-h { margin: 34px 0 12px; font: 600 1.4rem/1.2 var(--f-head); }
.end-h .muted { font-size: .9rem; font-family: var(--f-body); font-weight: 400; }
.hint-log { margin: 10px 0 0; padding: 12px 16px; background: var(--gray); }
.hint-log summary { cursor: pointer; font-weight: 600; }
.hint-log ul { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 4px; }
.ach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ach li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 12px 14px; border: 1px dashed var(--gray-2); color: var(--mute); }
.ach li.got { border: 1px solid var(--brass-ink); background: #fbf3e8; color: var(--char); }
.ach-ico { grid-row: span 2; font-size: 1.4rem; line-height: 1; color: var(--brass-ink); }
.ach li > span:last-child { font-size: .82rem; }
.paper-fig { margin: 0; box-shadow: 0 24px 40px -24px #1c142099; transform: rotate(-.6deg); }
.paper-svg { width: 100%; height: auto; display: block; }
.teaser { margin-top: 34px; padding: 20px 22px; background: var(--night); color: var(--night-text); border-left: 3px solid var(--brass); }
.teaser p { margin: 0 0 8px; }
.teaser-k { font: 600 .66rem/1 var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--brass); }

/* ---------- first-person view ---------- */
.walk { position: relative; height: min(70vh, 640px); min-height: 360px; background: #050306; border: 2px solid var(--char); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
.walk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: pointer; }
.walk.locked .walk-canvas { cursor: none; }
.walk-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--night-muted); font: 500 .8rem var(--f-body); letter-spacing: .2em; text-transform: uppercase; text-align: center; padding: 20px; }
.walk-load span { width: 34px; height: 34px; border: 3px solid #ffffff22; border-top-color: var(--brass); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.walk-ui { position: absolute; inset: 0; pointer-events: none; }
.walk-cross { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #f4ece4cc; box-shadow: 0 0 0 2px #0006; }
.walk-prompt { position: absolute; left: 50%; top: calc(50% + 28px); translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #0b070dd9; border: 1px solid #d9a07466; color: #f4ece4; font: 500 .9rem var(--f-body); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s; backdrop-filter: blur(4px); }
.walk-prompt.on { opacity: 1; transform: none; }
.walk-prompt kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border: 1px solid var(--brass); border-radius: 4px; color: var(--brass); font: 700 .75rem var(--f-body); }
.walk-prompt em { font-style: normal; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.walk-help { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; padding: 10px 16px; background: #0b070dcc; color: #ddd0d6; font: 400 .82rem var(--f-body); white-space: nowrap; transition: opacity .6s; }
.walk-help b { color: var(--brass); font-weight: 600; }
.walk-help.gone { opacity: 0; }
.walk:not(.locked) .walk-help.gone { opacity: .85; }
.walk-count { color: var(--char); font-weight: 600; }
.walk-joy { position: absolute; width: 100px; height: 100px; border-radius: 50%; border: 2px solid #ffffff40; background: #0005; opacity: 0; left: 30px; bottom: 30px; transition: opacity .2s; }
.walk-joy.on { opacity: 1; }
.walk-joy span { position: absolute; left: 30px; top: 30px; width: 40px; height: 40px; border-radius: 50%; background: #d9a074cc; }
.walk-act { position: absolute; right: 18px; bottom: 18px; pointer-events: auto; min-width: 96px; min-height: 52px; border: 0; background: var(--brass); color: var(--night); font: 700 .8rem var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 760px) { .walk { height: 62vh; } .walk-help { white-space: normal; width: calc(100% - 32px); text-align: center; } }
@media (prefers-reduced-motion: reduce) { .walk-load span { animation: none; } }

.walk-full { position: absolute; top: 12px; right: 12px; pointer-events: auto; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #ffffff30; background: #0b070daa; color: #f4ece4; cursor: pointer; }
.walk-full svg { width: 18px; height: 18px; }
.walk-full:hover { border-color: var(--brass); color: var(--brass); }
.walk:fullscreen { height: 100vh; border: 0; }

/* first-person drive */
.scene-stage.fp .scene-bg, .scene-stage.fp .scene-rain, .scene-stage.fp .scene-blinds { display: none !important; }
.scene-drive.fp { background: #000; }
.scene-drive.fp.out { opacity: 1; }
.fp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fp-glass { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity 1.4s var(--ease); }
.fp-glass.side { opacity: 0; }
.fp-dash-svg, .fp-wipers { position: absolute; inset: 0; width: 100%; height: 100%; }
.fp-wiper { transform-box: view-box; animation: wipe 1.5s ease-in-out infinite alternate; }
.fp-wiper.w1 { transform-origin: 560px 660px; }
.fp-wiper.w2 { transform-origin: 1120px 660px; animation-delay: -.08s; }
@keyframes wipe { from { transform: rotate(-64deg); } to { transform: rotate(14deg); } }
.fp-drops i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff66, #ffffff14 55%, transparent 70%); animation: fp-drop 3s linear infinite; }
@keyframes fp-drop { 0% { opacity: 0; transform: none; } 12% { opacity: .9; } 75% { opacity: .7; transform: translateY(16px); } 100% { opacity: 0; transform: translateY(34px) scaleY(1.6); } }
.fp-flash { position: absolute; inset: 0; background: radial-gradient(70% 34% at 50% 0, #ff3b3040, transparent 70%); transition: opacity .2s; }
.fp-needle { transform-box: view-box; transform-origin: 520px 745px; animation: needle 2s ease-in-out infinite alternate; }
@keyframes needle { to { transform: rotate(6deg); } }
.scene-stage.fp .scene-char { filter: drop-shadow(0 30px 40px #000) brightness(.92); }
@media (prefers-reduced-motion: reduce) { .fp-wiper, .fp-drops i, .fp-needle { animation: none; } }
.scene-stage.fp .scene-dcap::before { content: ""; position: absolute; inset: -40px -60px -30px -80px; z-index: -1; background: radial-gradient(closest-side, #000a, transparent); }

/* the video chat dock folds into one small button */
.call-fab { display: none; position: relative; place-items: center; width: 52px; height: 52px; border: 1px solid var(--night-line); border-radius: 50%; background: var(--night); color: var(--brass); cursor: pointer; box-shadow: 0 14px 30px -12px #000c; }
.call-fab svg { width: 24px; height: 24px; transition: transform .3s var(--ease); }
.call-fab:hover svg { transform: rotate(45deg); }
.call-fab:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.fab-n { position: absolute; left: -4px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--night-2); border: 1px solid var(--night-line); color: var(--night-text); font: 600 .62rem/18px var(--f-body); }
.fab-n:empty { display: none; }
.fab-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--brass); color: var(--night); font: 700 .62rem/20px var(--f-body); text-align: center; }
.fab-badge[hidden] { display: none; }
.call-dock.collapsed { width: auto; padding: 0; background: none; border: 0; box-shadow: none; }
.call-dock.collapsed .call-fab { display: grid; }
.call-dock.collapsed > :not(.call-fab) { display: none; }
.call-dock:not(.collapsed) { animation: dock-open .25s var(--ease); }
@keyframes dock-open { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.walk:fullscreen .walk-canvas, .walk:-webkit-full-screen .walk-canvas { width: 100vw; height: 100vh; }

/* moving between places: fade to black, a title card, fade in when the new place is ready */
.walk-fade { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: #050306; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.walk-fade.on { opacity: 1; pointer-events: auto; }
.walk-fade.on.done { opacity: 0; pointer-events: none; transition: opacity 1.1s ease .1s; }
.wf-card { text-align: center; color: #f4ece4; opacity: 0; transform: translateY(8px); }
.wf-card.in { animation: wf-in .9s var(--ease) .15s forwards; }
@keyframes wf-in { to { opacity: 1; transform: none; } }
.wf-k { margin: 0 0 12px; font: 500 .7rem/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: var(--brass); }
.wf-k:empty { display: none; }
.wf-h { margin: 0; font: 600 clamp(1.8rem, 4vw, 2.8rem)/1.1 var(--f-head); }
.wf-s { margin: 10px 0 0; font: italic 400 1rem/1.4 var(--f-head); color: #ddd0d6; }
.wf-load { display: block; width: 40px; height: 2px; margin: 22px auto 0; background: linear-gradient(90deg, transparent, var(--brass), transparent); background-size: 200% 100%; animation: wf-bar 1.2s linear infinite; }
.walk-fade.done .wf-load { animation: none; opacity: 0; }
@keyframes wf-bar { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .walk-fade, .walk-fade.on.done { transition: none; } .wf-card.in { animation: none; opacity: 1; transform: none; } .wf-load { animation: none; } }