/* Layout: a night-time Swiss ski hotel. Swiss-poster type on midnight blue; each clue arrives as its real object
   (ski pass, key-card log, thermal receipt, handwritten note). Single dark look by design. */
:root{
  --bg:#0d1626; --panel:#152139; --panel2:#1c2b48; --line:#2a3b5c;
  --fg:#eef3fb; --muted:#9db0cf; --snow:#f8fafd; --paper:#fbfaf6; --ink:#16202e; --ink2:#55627a; --rule:#dfe4ec;
  --red:#e2311d; --red-ink:#ffffff; --brass:#d8a842; --brass-ink:#241a04; --green:#5cc38a;
  --manila:#e9d6a4; --greenbar:#e6f1e4;
  --f-display:"Archivo Black", "Arial Black", Impact, sans-serif;
  --f-ui:"Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --f-hand:"Caveat", "Bradley Hand", "Segoe Print", cursive;
  --f-news:"Libre Caslon Text", Georgia, "Times New Roman", serif;
  color-scheme:dark;
  padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px);
  background:var(--bg);
}
*{box-sizing:border-box}
html,body{min-height:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-ui);font-size:17px;line-height:1.45;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:0 48px;
  background-image:radial-gradient(1.5px 1.5px at 12% 8%, rgba(255,255,255,.35) 50%, transparent 51%),radial-gradient(1px 1px at 72% 4%, rgba(255,255,255,.3) 50%, transparent 51%),radial-gradient(1.5px 1.5px at 88% 14%, rgba(255,255,255,.25) 50%, transparent 51%),radial-gradient(1px 1px at 34% 18%, rgba(255,255,255,.25) 50%, transparent 51%);
  background-repeat:no-repeat;background-attachment:fixed}
#app{max-width:640px;margin:0 auto}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}

/* Hotel sign */
.sign{display:flex;flex-direction:column;align-items:center;gap:6px;padding-block:30px 20px;text-align:center}
.cross{width:34px;height:34px;background:var(--red);border-radius:4px;position:relative;flex:none}
.cross::before,.cross::after{content:"";position:absolute;background:#fff;left:50%;top:50%;transform:translate(-50%,-50%)}
.cross::before{width:62%;height:20%}.cross::after{width:20%;height:62%}
.sign h1{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,10vw,54px);line-height:.95;letter-spacing:-.01em;text-transform:uppercase}
.sign .eyebrow{font-size:13px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.sign .sub{font-family:var(--f-mono);font-size:13px;color:var(--muted)}

/* Top bar */
.bar{position:sticky;top:env(safe-area-inset-top, 0px);z-index:5;background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px;border-bottom:1px solid var(--line)}
.bar .who{min-width:0;display:flex;align-items:center;gap:10px}
.bar .who div{min-width:0}
.bar .who b{display:block;font-size:19px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .who span{font-size:13px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.chip{flex:none;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:4px;background:var(--red);color:var(--red-ink)}
.chip.dim{background:var(--panel2);color:var(--muted)}

/* Tabs */
.tabs{display:flex;gap:6px;padding-block:12px;overflow-x:auto}
.tab{flex:1 0 auto;padding:10px 14px;border:1px solid var(--line);background:var(--panel);border-radius:6px;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tab[aria-selected="true"]{background:var(--snow);color:var(--ink);border-color:var(--snow)}
.tab .n{display:inline-block;min-width:20px;margin-left:6px;padding:0 6px;border-radius:10px;background:var(--red);color:#fff;font-size:12px}

/* Clue items */
.rail{display:flex;flex-direction:column;gap:26px;padding-block:8px}
.meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.item{position:relative;color:var(--ink);box-shadow:0 12px 28px rgba(0,0,0,.4)}
.item h3{font-family:var(--f-display);font-weight:400;font-size:21px;text-transform:uppercase;letter-spacing:.01em;line-height:1.05}
.item .body,.item.body{display:flex;flex-direction:column;gap:10px}
.stamp{display:inline-block;align-self:flex-start;border:2px solid var(--red);color:var(--red);font-family:var(--f-mono);font-weight:600;font-size:12px;letter-spacing:.14em;padding:2px 8px;transform:rotate(-3deg);text-transform:uppercase}
.fresh{animation:arrive .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes arrive{from{opacity:0;transform:translateY(-18px) rotate(-1.5deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fresh{animation:none}}

/* report: ski patrol form */
.k-report{background:var(--snow);border-radius:6px;overflow:hidden}
.k-report .hd{background:var(--red);color:#fff;padding:10px 14px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.k-report .hd .cross{width:22px;height:22px;background:#fff}.k-report .hd .cross::before,.k-report .hd .cross::after{background:var(--red)}
.k-report .in{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:15px;border-block:1px solid var(--rule);padding-block:8px}
.kv dt{font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);padding-top:2px}
.kv dd{margin:0}

/* object: evidence bag tag */
.k-object{background:var(--snow);border-radius:6px;padding:16px;border-top:10px solid var(--red)}
.k-object .ev{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--red);font-weight:600}

/* register / ledger */
.k-register{background:var(--paper);border-radius:4px;padding:16px;border-left:6px solid var(--red)}
.k-register .lh{font-family:var(--f-display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.ledger{width:100%;border-collapse:collapse;font-size:15px}
.ledger td{padding:5px 4px;border-bottom:1px solid var(--rule);vertical-align:top}
.ledger td:first-child{font-weight:700;white-space:nowrap;padding-right:12px;width:1%}

/* receipt */
.k-receipt{background:#fffefa;font-family:var(--f-mono);font-size:14px;padding:18px 18px 28px;max-width:400px;margin-inline:auto;width:100%}
.k-receipt::after,.k-pass-x::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:linear-gradient(135deg,#fffefa 50%,transparent 50%) 0 0/14px 10px repeat-x,linear-gradient(225deg,#fffefa 50%,transparent 50%) 7px 0/14px 10px repeat-x}
.k-receipt h3{font-family:var(--f-mono);font-weight:600;font-size:16px;text-align:center}
.k-receipt .c{text-align:center;color:var(--ink2);font-size:12px;letter-spacing:.08em}
.k-receipt hr{border:0;border-top:1px dashed #c9ccd2;margin:6px 0}
.rline{display:grid;grid-template-columns:auto 1fr;gap:12px}
.rline span:first-child{font-variant-numeric:tabular-nums}

/* log: green-bar printout */
.k-log{background:#fff;font-family:var(--f-mono);font-size:13px;padding:14px 0 10px;border-left:14px solid #eef0f3;border-right:14px solid #eef0f3;
  background-image:radial-gradient(circle at 50% 50%, #c4c9d2 3px, transparent 3.5px),radial-gradient(circle at 50% 50%, #c4c9d2 3px, transparent 3.5px)}
.k-log .lh{padding:0 12px 8px;display:flex;flex-direction:column;gap:2px}
.k-log h3{font-family:var(--f-mono);font-weight:600;font-size:15px}
.k-log .scroll{overflow-x:auto}
.k-log table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.k-log th{text-align:left;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);padding:4px 12px;border-bottom:1px solid #c9ccd2}
.k-log td{padding:5px 12px;white-space:nowrap}
.k-log tbody tr:nth-child(4n+1) td,.k-log tbody tr:nth-child(4n+2) td{background:var(--greenbar)}
.k-log .foot{padding:8px 12px 0;font-size:12px;color:var(--ink2);display:flex;flex-direction:column;gap:4px;white-space:normal}

/* letter */
.k-letter{background:var(--paper);padding:18px 18px 22px;border-radius:2px}
.k-letter .lh{display:flex;align-items:center;gap:8px;padding-bottom:10px;margin-bottom:4px;border-bottom:2px solid var(--red);font-family:var(--f-display);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.k-letter .lh .cross{width:18px;height:18px}
.k-letter p{font-family:var(--f-news);font-size:16px}

/* handwritten note */
.k-note{background:#fffdf3;padding:20px 18px;transform:rotate(-.8deg);max-width:440px;margin-inline:auto;width:100%}
.k-note::before{content:"";position:absolute;top:-10px;left:50%;width:90px;height:22px;transform:translateX(-50%) rotate(2deg);background:rgba(216,168,66,.55)}
.k-note .hand{font-family:var(--f-hand);font-size:25px;line-height:1.2;color:#1d3266}
.k-note p:not(.hand){font-size:14px;color:var(--ink2)}

/* notebook */
.k-notebook{background:#fff;padding:18px 18px 18px 46px;border-radius:3px;background-image:linear-gradient(90deg, transparent 34px, #f2a7a0 34px, #f2a7a0 35px, transparent 35px),repeating-linear-gradient(#fff 0 29px, #cfe0f2 29px 30px)}
.k-notebook .press{align-self:flex-start;background:var(--ink);color:#fff;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border-radius:3px}
.k-notebook .hand{font-family:var(--f-hand);font-size:23px;line-height:1.25;color:#1d3266}

/* clipping */
.k-clipping{background:#efece4;padding:18px;clip-path:polygon(0 2%,6% 0,15% 2%,28% 0,40% 1.5%,55% 0,70% 2%,85% 0,100% 1.5%,99% 30%,100% 60%,98.5% 100%,85% 98%,70% 100%,52% 98.5%,35% 100%,18% 98%,0 100%,1.5% 70%,0 40%)}
.k-clipping .paper{font-family:var(--f-news);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);border-bottom:1px solid #b8b3a6;padding-bottom:6px}
.k-clipping .headline{font-family:var(--f-news);font-weight:700;font-size:24px;line-height:1.1}
.k-clipping p{font-family:var(--f-news);font-size:15px}
.k-clipping .hand{font-family:var(--f-hand);font-size:23px;color:#a3201a;transform:rotate(-2deg)}

/* photo frames */
.k-photo{background:#111;padding:12px;border-radius:8px;display:flex;flex-direction:column;gap:12px}
.k-photo h3{color:#fff}
.frame{display:flex;flex-direction:column;gap:6px}
.shot{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:4px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 120%, #f0a84a 0%, rgba(240,168,74,.25) 30%, transparent 55%),linear-gradient(#0b1430,#1a2a52 60%,#d7e2f2 61%,#9fb2cc)}
.shot .rec{position:absolute;top:8px;left:10px;font-family:var(--f-mono);font-size:12px;color:#fff;display:flex;align-items:center;gap:6px}
.shot .rec::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--red)}
.shot .ts{position:absolute;bottom:8px;right:10px;font-family:var(--f-mono);font-size:13px;color:#fff;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:3px}
.frame figcaption{color:#e9edf5;font-size:15px}

/* ski pass */
.k-pass{background:transparent;box-shadow:none;display:flex;flex-direction:column;gap:12px}
.k-pass .found{color:var(--fg);font-size:16px}
.skipass{width:100%;max-width:360px;margin-inline:auto;aspect-ratio:85.6/54;border-radius:14px;overflow:hidden;background:var(--snow);color:var(--ink);display:flex;flex-direction:column;box-shadow:0 12px 28px rgba(0,0,0,.45)}
.skipass .top{background:var(--red);color:#fff;display:flex;align-items:center;gap:8px;padding:9px 12px;font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.skipass .top .cross{width:18px;height:18px;background:#fff}.skipass .top .cross::before,.skipass .top .cross::after{background:var(--red)}
.skipass .mid{flex:1;padding:10px 14px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.skipass .nm{font-family:var(--f-display);font-size:clamp(17px,5.4vw,22px);text-transform:uppercase;line-height:1}
.skipass .rm{font-size:13px;color:var(--ink2);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.skipass .bot{display:flex;justify-content:space-between;align-items:flex-end;padding:0 14px 10px;gap:10px}
.skipass .no{font-family:var(--f-mono);font-size:12px}
.barcode{height:26px;width:46%;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px)}

/* tag: rental / box tag */
.k-tag{background:var(--manila);padding:18px 18px 18px 46px;border-radius:4px 14px 14px 4px;clip-path:polygon(22px 0,100% 0,100% 100%,0 100%,0 34px)}
.k-tag::before{content:"";position:absolute;left:22px;top:26px;width:14px;height:14px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px #b79b55}

/* Character file: key card header */
.file{display:flex;flex-direction:column;gap:16px}
.keycard{position:relative;border-radius:14px;aspect-ratio:85.6/54;max-width:360px;width:100%;margin-inline:auto;padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  background:linear-gradient(135deg,#e5c26a,#b98a2a 55%,#e3be63);color:var(--brass-ink);box-shadow:0 12px 28px rgba(0,0,0,.45)}
.keycard.staff{background:linear-gradient(135deg,#ef4a33,#b8220f 60%,#e2311d);color:#fff}
.keycard .brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.keycard .brand .cross{width:18px;height:18px;background:#fff}.keycard .brand .cross::before,.keycard .brand .cross::after{background:var(--red)}
.keycard.staff .brand .cross{background:#fff}
.keycard .rm{font-family:var(--f-display);font-size:clamp(26px,8vw,36px);text-transform:uppercase;line-height:1}
.keycard .nm{font-weight:700;font-size:16px}
.keycard .chipgold{position:absolute;right:18px;top:44%;width:42px;height:32px;border-radius:6px;background:linear-gradient(135deg,#f6e3a6,#c99a3a);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:16px}
.sheet h4{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.sheet p,.sheet ul{margin:0;font-size:17px}
.sheet ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.killer{background:var(--red);color:#fff;border-radius:6px;padding:10px 12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.rv{list-style:none;padding:0!important}
.rv li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:6px;background:var(--panel2)}
.rv li.now{background:var(--brass);color:var(--brass-ink)}
.rv .when{flex:none;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:3px;border:1px solid currentColor;margin-top:3px}

/* Forms */
.clock{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px}
.clock label{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.codein{width:100%;font-family:var(--f-mono);font-size:32px;letter-spacing:.4em;text-align:center;text-transform:uppercase;padding:12px;background:var(--bg);border:2px solid var(--line);border-radius:8px}
.codein:focus{border-color:var(--brass);outline:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;padding:12px 18px;font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase;background:var(--red);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}
.btn.brass{background:var(--brass);color:var(--brass-ink)}
.btn.sm{padding:8px 12px;font-size:14px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.err{color:#ff8a7a;font-size:15px;min-height:1.2em}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;font-size:15px;padding:8px}
.section-h{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:24px 0 10px}
.note{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;color:var(--muted);font-size:15px}
.note.warn{border-color:var(--red);color:var(--fg)}
.empty{border:1px dashed var(--line);border-radius:10px;padding:22px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--fg);font-size:18px;margin-bottom:4px}
.bell{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}

/* Story card on the welcome screen */
.story{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:10px}
.story p{font-size:16px}

/* Accusation */
.suspects{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.suspect{text-align:left;padding:12px;border-radius:8px;border:1px solid var(--line);background:var(--panel);font-weight:600}
.suspect small{display:block;color:var(--muted);font-size:14px;font-weight:400}
.suspect[aria-pressed="true"]{border-color:var(--red);background:#3b1a1a}
.flip{perspective:1000px;width:100%;max-width:360px;margin:8px auto;aspect-ratio:3/4;border:0;background:none;padding:0;display:block}
.flip .inner{position:relative;width:100%;height:100%;transition:transform .7s;transform-style:preserve-3d}
.flip.on .inner{transform:rotateY(180deg)}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center}
.flip .front{background:var(--red);color:#fff}
.flip .front .cross{width:90px;height:90px;background:#fff}.flip .front .cross::before,.flip .front .cross::after{background:var(--red)}
.flip .back{background:var(--snow);color:var(--ink);transform:rotateY(180deg)}
.flip .back b{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,8vw,40px);line-height:1.05;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.flip .inner{transition:none}}

/* Final bill */
.bill{background:var(--paper);color:var(--ink);padding:22px 20px 28px;max-width:520px;margin:0 auto;border-top:10px solid var(--red);display:flex;flex-direction:column;gap:12px}
.bill .lh{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:18px;text-transform:uppercase}
.bill .sm{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.bill hr{border:0;border-top:1px solid var(--rule);margin:2px 0}
.bill .big{font-family:var(--f-display);font-size:28px;text-transform:uppercase;line-height:1}
.bill ol{padding-left:22px;margin:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.bill .total{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-weight:600;border-top:2px solid var(--ink);padding-top:8px}
.bill.fresh{animation:arrive 1.6s ease-out both}

/* Host */
.host-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-block:18px 8px}
.host-h h2{font-family:var(--f-display);font-weight:400;font-size:26px;text-transform:uppercase}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{flex:1 1 30%;min-width:0;padding:10px 8px;border-radius:6px;border:1px solid var(--line);background:var(--panel);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.seg.four button{flex-basis:22%}
.seg button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.roster{width:100%;border-collapse:collapse;font-size:16px}
.roster td{padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.roster td.code{font-family:var(--f-mono);font-size:19px;font-weight:600;letter-spacing:.14em;color:var(--brass);text-align:right;white-space:nowrap}
.roster tr.off{opacity:.38}
.roster small{display:block;color:var(--muted);font-size:14px}
.tagk{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:3px;background:var(--red);color:#fff;vertical-align:2px}
.hc{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.hc.sent{border-color:var(--green)}
.hc .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.hc .top b{font-size:18px}
.hc .top span{font-family:var(--f-mono);font-size:13px;color:var(--muted);white-space:nowrap}
.hc .where{font-size:14px;color:var(--muted)}
.hc details summary{cursor:pointer;color:var(--muted);font-size:15px}
.hc details .prev{margin-top:12px}
.hc .act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hc select{flex:1 1 160px;min-width:0;padding:9px;border-radius:6px;background:var(--bg);border:1px solid var(--line)}
.sentlbl{color:var(--green);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:14px;flex:1}
.stack{display:flex;flex-direction:column;gap:10px}
.invite{display:flex;gap:8px;flex-wrap:wrap}
.invite input{flex:1 1 200px;min-width:0;font-family:var(--f-mono);font-size:14px;padding:10px;border-radius:6px;background:var(--bg);border:1px solid var(--line)}
.gamecode{font-family:var(--f-mono);font-size:28px;font-weight:600;letter-spacing:.3em;color:var(--brass)}
details.sol{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
details.sol summary{cursor:pointer;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
details.sol ol{padding-left:20px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom, 0px));z-index:20;background:var(--brass);color:var(--brass-ink);font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:12px 18px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.45);max-width:calc(100% - 32px);text-align:center}
.busy{position:fixed;inset:0;z-index:30;background:rgba(13,22,38,.78);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:28px;text-transform:uppercase;color:#fff;text-align:center;padding:20px}

/* In-app scanner */
.scanbtn{width:100%;margin-bottom:6px;padding:16px;font-size:18px}
.scanner{position:fixed;inset:0;z-index:50;background:#000;display:flex;align-items:center;justify-content:center}
.scanner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-frame{position:relative;width:min(70vw,300px);aspect-ratio:1;max-width:100%;border:3px solid #fff;border-radius:18px;box-shadow:0 0 0 9999px rgba(0,0,0,.5)}
.sc-msg{position:absolute;left:max(16px, env(safe-area-inset-left, 0px));right:max(16px, env(safe-area-inset-right, 0px));bottom:calc(112px + env(safe-area-inset-bottom, 0px));text-align:center;color:#fff;font-weight:700;font-size:17px;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.sc-close{position:absolute;bottom:calc(40px + env(safe-area-inset-bottom, 0px));left:50%;transform:translateX(-50%);background:rgba(255,255,255,.15);border:2px solid #fff;color:#fff;min-width:160px}

/* Clue illustrations and evidence markers */
.art{margin:0;border-radius:6px;overflow:hidden;line-height:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.art svg{display:block;width:100%;height:auto}
.marks{list-style:none;counter-reset:mk;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:15px}
.marks li{counter-increment:mk;display:flex;gap:8px;align-items:flex-start}
.marks li::before{content:counter(mk);flex:none;width:20px;height:18px;margin-top:1px;background:#f6c400;color:#1b1b1b;font:700 11px/20px Arial,sans-serif;text-align:center;clip-path:polygon(50% 0,100% 100%,0 100%)}
.k-tag .art{margin-left:-4px}
.shot svg{position:absolute;inset:0;width:100%;height:100%}