/* ---------- 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: 2px solid var(--char); border-radius: 10px; 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: 2px solid var(--char); border-radius: 10px; 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: 16px; 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 6px 6px 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: #111e2b; 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 #e6dcc3aa; 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 #e6dcc3cc; } 70%, 100% { box-shadow: 0 0 0 14px #e6dcc300; } }
@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: 999px; border: 2px 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: #111e2bb3; 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: 6px; padding: 20px 22px; box-shadow: 0 1px 0 #111e2b10, 0 8px 20px -14px #111e2b60; 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 #111e2b88; 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 { border: 10px solid #3a2e22; border-radius: 4px; margin-bottom: 14px; }
.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: 6px; 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: 2px solid var(--char); border-radius: 10px; 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: 2px solid var(--gray-2); border-radius: 10px; 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: 10px; 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: 10px; 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: 2px solid var(--gray-2); border-radius: 10px; 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: 2px solid var(--gray-2); border-radius: 999px; 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); }