/* Krimbord – noir meets julebord */
@font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Special Elite'; src: url('../assets/fonts/special-elite.woff2') format('woff2'); font-display: swap; }
/* Case-file palette (DESIGN-GUIDE.md section 4): dark-first, paper evidence cards, evidence red, brass. */
:root {
  --bg: #15131a; --bg2: #1c1922; --panel: #221f2a; --line: #3d3747;
  --ink: #f3ede0; --muted: #c2bbc9; --gold: #c9a227; --gold2: #e6c868; --red: #b3261e; --red2: #ef6b61; --ok: #6fcf97;
  --paper: #f3ede0; --paper-ink: #1d1a22; --paper-red: #a3221b; --paper-muted: #5e5866;
  --serif: 'Fraunces', Georgia, 'Noto Serif', serif;
  --sans: var(--q-font-ui);
  --type: 'Special Elite', 'Courier New', monospace;
  --team: var(--gold);
  --q-paper: var(--bg); --q-card: var(--panel); --q-ink: var(--ink); --q-muted: var(--muted); --q-line: var(--line);
  --q-accent: var(--gold); --q-on-accent: #15131a; --q-soft: #2c2836; --q-focus: var(--gold2); --q-shadow-tint: 0 0 0;
  --q-display: var(--serif); --q-button-radius: var(--q-radius-md);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; background: radial-gradient(120% 70% at 50% -10%, #2a2233 0%, var(--bg) 60%) fixed; }
a { color: var(--gold2); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: .2em 0 .4em; }
h4 { font-size: 1.05rem; color: var(--gold2); }
input, select, button { font: inherit; }
input, select { width: 100%; min-height: 48px; padding: .75em .9em; border-radius: var(--q-radius-md); border: 1px solid var(--line); background: #100e14; color: var(--ink); }
svg.i { width: 1.25em; height: 1.25em; vertical-align: -0.25em; flex: none; }
[hidden] { display: none !important; }

.logo { font-family: var(--serif); font-size: 2.8rem; font-weight: 800; letter-spacing: -0.02em; text-align: center; margin: .4em 0 0; }
.logo-k { color: var(--red2); font-style: italic; }
.logo-b { color: var(--gold); }
.logo.big { font-size: 4rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: var(--q-tap); border: 2px solid transparent; border-radius: var(--q-radius-md); padding: .7em 1.2em; font: 800 1rem/1.2 var(--sans); text-decoration: none; text-align: center; cursor: pointer; color: #15131a; background: var(--gold); transition: transform var(--q-fast) var(--q-ease), box-shadow var(--q-fast) var(--q-ease); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--q-shadow-lift); }
.btn.red { background: var(--red); color: #fff; }
.btn.gold { background: var(--gold); }
.btn.ghost { background: transparent; color: var(--ink); border: 2px solid var(--line); }
.btn.big { display: flex; width: 100%; min-height: 52px; font-size: 1.12rem; padding: .9em; margin: .6em 0; }
.btn.sm { padding: .45em .7em; font-size: .9rem; }
.btn.danger { color: #ffb4ae; border-color: #6b2b2b; }
.btn:disabled { opacity: .5; }
.btn:active { transform: translateY(1px); }
.link { background: none; border: 0; color: var(--gold2); text-decoration: underline; padding: 0 .2em; cursor: pointer; font-size: .9rem; }

/* Start screens */
.start { max-width: 34rem; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.start h1 { font-size: 2rem; }
.slogan { text-align: center; color: var(--gold2); font-family: var(--serif); font-style: italic; margin: 0 0 1em; }
.lead { color: var(--muted); text-align: center; }
.back { color: var(--muted); text-decoration: none; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--q-radius-card); padding: 1rem 1.1rem; margin: .8rem 0; box-shadow: var(--q-shadow-card); }
.card label { display: block; font-weight: 700; margin-bottom: .4em; }
.row { display: flex; gap: .5rem; }
.row input { flex: 1; text-transform: uppercase; letter-spacing: .2em; font-weight: 700; }
.row3 { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4em 0; }
.row3 > * { flex: 1; }
.hint { color: var(--muted); font-size: .92rem; margin: .4em 0; }
.fine { color: var(--muted); font-size: .8rem; text-align: center; margin-top: 2em; }
.error { color: #ff9b94; min-height: 1em; }
.ok { color: var(--ok); }
fieldset { border: 0; padding: 0; margin: 1em 0 0; }
legend { font-weight: 700; margin-bottom: .4em; }
.choice { display: flex !important; gap: .6em; align-items: flex-start; font-weight: 400 !important; padding: .6em .7em; border: 1px solid var(--line); border-radius: 10px; margin: .35em 0 !important; cursor: pointer; }
.choice input { width: auto; margin-top: .3em; accent-color: var(--red); }
.choice.inline { display: inline-flex !important; margin-right: .3em !important; }
.prices { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6em; }
.price { display: block; padding: .7em; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); }
.price span { display: block; color: var(--gold); font-weight: 700; font-size: 1.1rem; }
summary { cursor: pointer; font-weight: 700; }

/* Phone game screen */
.phone { min-height: 100vh; display: flex; flex-direction: column; max-width: 40rem; margin: 0 auto; }
.top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .6rem 1rem; background: rgba(21, 19, 26, .95); border-bottom: 3px solid var(--team); backdrop-filter: blur(6px); }
.top small { color: var(--muted); }
.top .right { display: flex; align-items: center; gap: .6rem; }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.15rem; color: var(--gold2); }
.timer.paused { color: var(--red2); font-size: .9rem; }
.conn { width: .7rem; height: .7rem; border-radius: 50%; background: var(--muted); display: inline-block; }
.conn.online { background: var(--ok); }
.conn.offline { background: var(--red2); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.offline-bar { background: #5a1f22; color: #ffd9d6; text-align: center; padding: .35em; font-size: .9rem; }
.pill { display: inline-block; font-size: .7rem; font-weight: 700; padding: .1em .5em; border-radius: 99px; background: var(--red); color: #fff; vertical-align: middle; letter-spacing: .05em; }
.team-dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--team); margin-right: .3em; }
.team-dot.big { width: .9em; height: .9em; }
.content { flex: 1; padding: .6rem 1rem 6rem; }
.tabs { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; background: rgba(16, 14, 20, .97); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
.tabs button { flex: 1; max-width: 8rem; min-height: 56px; background: none; border: 0; color: var(--muted); padding: .45em .2em; font-weight: 800; font-size: .8rem; position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .15em; }
.tabs button svg.i { width: 1.45rem; height: 1.45rem; }
.tabs button.on { color: var(--gold); box-shadow: inset 0 3px 0 var(--gold); }
.badge { position: absolute; top: .3em; right: 18%; background: var(--red); color: #fff; font-style: normal; font-size: .72rem; border-radius: 99px; padding: 0 .45em; }
.toast { position: fixed; left: 50%; bottom: 5rem; transform: translate(-50%, 2rem); opacity: 0; background: var(--gold); color: #1a1306; font-weight: 700; padding: .7em 1.2em; border-radius: 99px; transition: .25s; pointer-events: none; z-index: 20; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.hero { text-align: center; padding: 1.2rem .5rem .4rem; }
.hero h2 { font-size: 1.7rem; }
.team-hero h2 { color: var(--team); }
.lead-note { background: rgba(201, 162, 39, .12); border: 1px solid rgba(201, 162, 39, .35); border-radius: 10px; padding: .5em .8em; }
.note { background: rgba(194, 59, 59, .18); border: 1px solid rgba(194, 59, 59, .5); border-radius: 10px; padding: .55em .8em; margin: .5em 0; }
.phase-hint { color: var(--muted); }
.sec { margin-top: 1.2em; color: var(--gold2); }
.story p { font-family: var(--serif); font-size: 1.1rem; }
.crime { border-color: #6b2b2b; background: linear-gradient(#2a1218, var(--panel)); }
.tagline { font-family: var(--serif); font-style: italic; color: var(--gold2); }
.rules { padding-left: 1.2em; }
.clue { background: var(--paper); color: var(--paper-ink); border-radius: 4px var(--q-radius-md) var(--q-radius-md) var(--q-radius-md); padding: .8rem 1rem; margin: .6rem 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); position: relative; }
.clue h4 { font-family: var(--type); font-weight: 400; color: var(--paper-red); margin: 0 0 .35em; display: flex; justify-content: space-between; gap: .5em; letter-spacing: .01em; }
.clue h4 small { font-family: var(--sans); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--paper-muted); font-weight: 900; white-space: nowrap; }
.clue.team { border-left: 6px solid var(--team); }
.clue p { margin: 0; }
.clue.statement { background: #2a2633; color: var(--ink); }
.clue.statement h4 { color: var(--gold2); }
.suspect { border-bottom: 1px solid var(--line); padding: .6em 0; }
.suspect h4 { margin: 0; }
.suspect .sub, .sub { color: var(--muted); margin: 0 0 .3em; }
.suspect small { color: var(--gold); }
.spotlight { text-align: center; background: radial-gradient(80% 60% at 50% 0, #3a2c3c, var(--panel)); border: 1px solid var(--line); border-radius: 18px; padding: 1.2rem 1rem; margin: .8rem 0; }
.spotlight.mine { border: 2px solid var(--red2); box-shadow: 0 0 30px rgba(224, 87, 79, .35); }
.spotlight h2 { font-size: 1.8rem; }
.kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--gold); margin: 0; }
blockquote { font-family: var(--serif); font-size: 1.12rem; margin: .8em 0 0; padding: .8em 1em; background: rgba(0, 0, 0, .25); border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; text-align: left; }
.role-head { text-align: center; padding: 1rem 0 .4rem; }
.role-head h2 { font-size: 2rem; color: var(--gold2); }
.role-head.culprit h2 { color: var(--red2); }
.card.danger { border: 2px solid var(--red2); background: linear-gradient(#3a1420, var(--panel)); }
.mission { border-color: rgba(201, 162, 39, .5); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.pick { display: block; width: 100%; min-height: var(--q-tap); text-align: left; border: 2px solid var(--line); background: #1a1720; color: var(--ink); border-radius: var(--q-radius-md); padding: .6em .75em; margin: .2em 0; cursor: pointer; font-weight: 700; }
.pick small { display: block; color: var(--muted); }
.pick.on { border-color: var(--gold); background: rgba(201, 162, 39, .18); }
.pick.on::before { content: ''; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--gold); margin-right: .45em; vertical-align: .1em; }
.pick.wide { font-size: .95rem; }
.accuse h4 { margin-top: 1em; }
.members, .players { list-style: none; padding: 0; margin: 0; }
.members li, .players li { padding: .45em 0; border-bottom: 1px solid var(--line); }
.players li.out { opacity: .45; }
.players summary { list-style: none; }
.players small { color: var(--muted); }
.acts { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5em 0; }
.acts select { width: auto; flex: 1 1 12rem; padding: .45em; }
.dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .4em; }
.dot.on { background: var(--ok); } .dot.off { background: #777; } .dot.out { background: var(--red); }
.check { display: flex !important; gap: .5em; align-items: center; font-weight: 400 !important; margin-top: .6em; }
.check input { width: auto; }
.mono { font-family: ui-monospace, Consolas, monospace; word-break: break-all; }
.mono.big { font-size: 1.1rem; }
.qr { background: #fff; border-radius: 12px; padding: .4rem; display: inline-block; }
.qr svg { display: block; width: 100%; height: auto; }
.qr.small { width: 12rem; display: block; margin: .3em auto; }
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .75); display: grid; place-items: center; z-index: 30; padding: 1rem; }
.qr-card { max-width: 22rem; text-align: center; }
.qr-card svg { background: #fff; border-radius: 10px; width: 100%; }
.big-num { font-size: 2rem; font-family: var(--serif); color: var(--gold); margin: 0; }
.reveal-card h2 { font-size: 2rem; color: var(--red2); }

/* TV */
body.is-tv { overflow: hidden; cursor: none; }
.tv { position: fixed; inset: 0; display: flex; flex-direction: column; font-size: clamp(18px, 1.75vw, 42px); }
.tv-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5vh 4vw; overflow: hidden; }
.tv-body > * { width: 100%; max-width: 92vw; }
.tv-center { margin: auto; text-align: center; }
.tv-foot { display: flex; gap: 2vw; align-items: center; padding: 1.2vh 3vw; background: rgba(0, 0, 0, .35); color: var(--muted); font-size: .8em; }
.tv-foot .brand b { color: var(--red2); font-family: var(--serif); font-style: italic; }
.tv-foot .ph { flex: 1; text-align: center; color: var(--ink); font-family: var(--serif); }
.tv-timer { font-variant-numeric: tabular-nums; font-size: 1.8em; color: var(--gold2); font-weight: 700; }
.tv-timer.paused { color: var(--red2); font-size: 1.2em; }
.tv-conn { width: .8em; height: .8em; border-radius: 50%; background: var(--ok); }
.tv-conn[data-s=offline] { background: var(--red2); animation: blink 1s infinite; }
.test-banner { position: absolute; top: 1.2vh; right: 1.5vw; background: var(--red); color: #fff; font-weight: 700; letter-spacing: .15em; padding: .25em 1em; border-radius: 99px; font-size: .7em; z-index: 3; }
.tv-title { font-size: 2.2em; text-align: center; color: var(--gold2); margin-bottom: .6em; }
.tv-lobby { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4vw; align-items: center; }
.tv-join { text-align: center; }
.tv-join h2 { font-size: 1.4em; margin: .1em 0; }
.tv-join .tagline { margin: .2em 0 .6em; }
.tv-lobby .logo.big { font-size: 3em; margin: 0; }
.tv-join .qr { width: min(30vh, 24vw); }
.join-text { margin: .5em 0 0; }
.tv-join .code { font-family: ui-monospace, Consolas, monospace; font-size: 2.6em; letter-spacing: .3em; color: var(--gold); margin: .1em 0 0; font-weight: 700; }
.tv-names h3 { font-size: 1.5em; color: var(--gold2); }
.tv-names ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5em; max-height: 60vh; overflow: hidden; }
.tv-names li { background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: .25em .9em; }
.tv-names li.new { animation: pop .4s ease-out; border-color: var(--gold); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.slides p { font-family: var(--serif); font-size: 1.9em; line-height: 1.35; text-align: center; margin: 0 auto .6em; max-width: 46em; opacity: 0; transform: translateY(1em); transition: opacity 1.4s, transform 1.4s; display: none; }
.slides p.on { display: block; opacity: 1; transform: none; }
.slides p.on:not(:last-of-type) { opacity: .35; font-size: 1.3em; }
.tv-crime { position: relative; }
.tv-crime .after-slides { display: none; }
.tv-crime .after-slides.on { display: block; }
.tv-crime:has(.after-slides.on) .slides { display: none; }
.tv.akt1.enter .tv-body { animation: blackout 3s ease-in; }
@keyframes blackout { 0% { filter: brightness(1); } 10% { filter: brightness(0); } 60% { filter: brightness(0); } 65% { filter: brightness(.4); } 68% { filter: brightness(0); } 100% { filter: brightness(1); } }
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(22em, 1fr)); gap: 1.2vw; }
.tv-clue { background: var(--paper); color: var(--paper-ink); border-radius: 6px var(--q-radius-card) var(--q-radius-card) var(--q-radius-card); padding: 1em 1.2em; font-size: .9em; box-shadow: 0 .4em 1.4em rgba(0, 0, 0, .4); }
.tv-clue h3 { font-family: var(--type); font-weight: 400; color: var(--paper-red); margin: 0 0 .3em; }
.tv-clue p { margin: 0; }
.tv-clue.newest { outline: .25em solid var(--gold); animation: pop .6s ease-out; }
.tv-board .hint, .tv-crime .hint, .tv-teams .hint { text-align: center; margin-top: 1.2em; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); gap: 1.2vw; }
.team-card { background: var(--panel); border-top: .4em solid var(--team); border-radius: 14px; padding: .7em 1em; }
.team-card h3 { color: var(--team); margin: 0 0 .3em; }
.team-card ul { list-style: none; padding: 0; margin: 0; font-size: .85em; columns: 2; }
.tv-spot { text-align: center; }
.tv-spot h1 { font-size: 3.6em; color: var(--gold2); margin: .1em 0; }
.tv-spot .sub { font-size: 1.2em; }
.tv-spot .played { font-size: 1.1em; }
.tv-spot blockquote { max-width: 48em; margin: 1em auto 0; font-size: 1.25em; }
.tv-spot blockquote.dim { font-size: 1em; opacity: .8; }
.tv-accuse .stats { display: flex; justify-content: center; gap: 6vw; }
.tv-accuse .stats div { text-align: center; }
.tv-accuse .stats b { display: block; font-size: 4em; color: var(--gold); font-family: var(--serif); }
.suspect-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1vw; margin-top: 4vh; }
.mini-suspect { background: var(--panel); border-radius: 12px; padding: .6em .8em; text-align: center; }
.mini-suspect small { display: block; color: var(--muted); font-size: .7em; }
.tv-reveal { text-align: center; animation: fadein 1.2s ease-out; }
@keyframes fadein { from { opacity: 0; transform: scale(.97); } }
.tv-reveal .answer { font-family: var(--serif); font-size: 1.6em; color: var(--gold2); max-width: 40em; margin: 0 auto .8em; }
.tv-reveal .long { font-family: var(--serif); font-size: 1.25em; max-width: 46em; margin: 0 auto; text-align: left; }
.drum { font-size: 1.4em; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.big-reveal { font-size: 5em; color: var(--red2); margin: .1em 0; animation: reveal 2.5s ease-out; }
.big-reveal.gold { color: var(--gold2); }
@keyframes reveal { 0% { opacity: 0; filter: blur(20px); transform: scale(1.3); } 60% { opacity: 0; } 100% { opacity: 1; filter: none; transform: none; } }
.bars { max-width: 48em; margin: 0 auto; }
.bar { display: grid; grid-template-columns: 11em 1fr 2.5em; gap: 1em; align-items: center; margin: .35em 0; text-align: left; }
.bar .fill { height: 1.1em; border-radius: 99px; background: linear-gradient(90deg, var(--red), var(--gold)); width: var(--w); min-width: .3em; animation: grow 2s ease-out; }
@keyframes grow { from { width: 0; } }
.chain, .scores { max-width: 46em; margin: 0 auto; text-align: left; font-size: 1.1em; }
.chain li { margin: .5em 0; }
.scores li { display: grid; grid-template-columns: 1fr auto auto; gap: 1.5em; padding: .4em .8em; border-left: .4em solid var(--team); background: var(--panel); border-radius: 8px; margin: .35em 0; align-items: center; }
.scores em { font-style: normal; color: var(--gold); font-weight: 700; }
.scores span { color: var(--muted); font-size: .8em; }
@media (max-width: 700px) {
  .tv-lobby { grid-template-columns: 1fr; }
  .suspect-row { grid-template-columns: 1fr 1fr; }
}

/* Qloovi signature bits */
.madeby-row { text-align: center; margin: 2rem 0 1rem; }
.madeby-row .legal { display: block; color: var(--muted); font-size: .8rem; margin-top: .3em; }
.tv-foot .q-madeby { font-size: .75em; }
.stamp { font-family: var(--type); color: var(--red2); border: 2px solid currentColor; border-radius: 6px; padding: .05em .45em; transform: rotate(-3deg); display: inline-block; letter-spacing: .08em; }
.yes { color: var(--ok); } .no { color: var(--red2); }
.code-box { font-size: 1.35rem; font-weight: 800; letter-spacing: .06em; text-align: center; background: var(--paper); color: var(--paper-ink); border-radius: var(--q-radius-md); padding: .7em; user-select: all; }
.price.intro { grid-column: 1 / -1; border-color: var(--gold); }
fieldset.lengths { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
fieldset.lengths legend { grid-column: 1 / -1; }
fieldset.lengths .choice.inline { display: flex !important; margin: 0 !important; font-size: .92rem; }
.player-search { margin: .3em 0 .5em; }
.filters .pick { text-align: center; padding: .4em .3em; font-size: .85rem; min-height: 40px; }
.players .row { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--ink); padding: .5em .2em; min-height: var(--q-tap); cursor: pointer; font: inherit; }
.team-grid.compact { grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); gap: .8vw; font-size: .8em; }
.team-grid.compact .team-card p { margin: .1em 0; }
.tv-names li.more { border-style: dashed; color: var(--muted); }
.tv-teams:has(.team-grid.compact) .tv-title { font-size: 1.35em; margin: 0 0 .4em; }
.team-grid.compact .team-card { padding: .35em .7em; }
.team-grid.compact .team-card h3 { font-size: 1.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }