/* Trail of Thought, class mode. The same look as the game (ui/game/hud.css). */
:root {
  --bg: #07090d; --panel: rgba(9, 14, 20, .86); --panel-solid: #0c131a; --line: rgba(33, 230, 216, .35);
  --teal: #21e6d8; --teal-d: #0f8f87; --mag: #ff2e88; --yel: #ffe14d; --txt: #e6f2f1; --dim: #86a2a1;
  --display: "DIN Condensed", "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --body: "Avenir Next", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --cut: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--txt); font-family: var(--body); }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
a { color: var(--teal); }
.brand { font: 700 1em var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.brand b { color: var(--teal); }
img.missing { visibility: hidden; }
.sil { width: 100%; height: 100%; }
.btn { border: 1px solid var(--line); background: rgba(255,255,255,.04); padding: .55em 1.1em .45em; font: 700 1em var(--display);
  letter-spacing: .1em; text-transform: uppercase; clip-path: var(--cut); }
.btn:hover:not(:disabled) { border-color: var(--yel); }
.btn.primary { background: var(--yel); color: #111; border-color: var(--yel); }
.btn:disabled { opacity: .4; cursor: default; }
.eyebrow { font: .72em var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.scan::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }

/* =================================================================== the big screen */
body.host { --u: min(1vw, 1.7778vh); font-size: calc(var(--u) * 1.15); overflow: hidden; height: 100vh; }
.stage { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr calc(var(--u) * 25); grid-template-rows: auto 1fr auto; }
.bar { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * .8) calc(var(--u) * 1.4);
  background: #05080b; border-bottom: 1px solid var(--line); min-width: 0; }
.bar .brand { font-size: calc(var(--u) * 2.1); }
.bar .case { font: calc(var(--u) * .95) var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bar .case b { color: var(--txt); font-weight: 600; }
.bar .spacer { flex: 1; }
.bar .join { font: calc(var(--u) * 1.05) var(--mono); color: var(--dim); white-space: nowrap; }
.bar .join b { color: var(--yel); font-size: 1.3em; letter-spacing: .12em; }
.trail { display: flex; gap: calc(var(--u) * .4); }
.trail .node { width: calc(var(--u) * 4.6); height: calc(var(--u) * 2.6); border: 1px solid rgba(255,255,255,.15); position: relative; overflow: hidden;
  transform: skewX(-12deg); display: grid; place-items: center; font: 700 calc(var(--u) * 1) var(--mono); color: var(--dim); background: #0b1117; }
.trail .node img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.trail .node span { position: relative; transform: skewX(12deg); }
.trail .node.done { border-color: var(--teal); }
.trail .node.now { border-color: var(--yel); box-shadow: 0 0 calc(var(--u) * .8) rgba(255,225,77,.5); }
.trail .node.now span { color: var(--yel); }
.timer { font: 700 calc(var(--u) * 2.6) var(--mono); color: var(--yel); text-shadow: 0 0 calc(var(--u) * .7) rgba(255,225,77,.6);
  min-width: calc(var(--u) * 8); text-align: right; letter-spacing: .04em; }
.timer.up { color: var(--mag); text-shadow: 0 0 calc(var(--u) * .7) rgba(255,46,136,.8); animation: blink 1s steps(2) infinite; font-size: calc(var(--u) * 1.8); }
.timer.off { color: var(--dim); text-shadow: none; }
@keyframes blink { 50% { opacity: .45; } }

.main { position: relative; overflow: hidden; min-height: 0; }
.main > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.42) saturate(1.1); }
.main > .bg.missing { visibility: hidden; }
.main .pane { position: absolute; z-index: 2; background: var(--panel); border: 1px solid var(--line); clip-path: var(--cut);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); backdrop-filter: blur(4px); }

.side { background: #070b10; border-left: 1px solid var(--line); padding: calc(var(--u) * 1.1); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.side h2 { margin: 0 0 calc(var(--u) * .7); font: 700 calc(var(--u) * 1.5) var(--display); letter-spacing: .12em; text-transform: uppercase; }
.side h2 small { font: calc(var(--u) * .95) var(--mono); color: var(--yel); letter-spacing: .06em; margin-left: .4em; }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .45); align-content: start; overflow: auto; }
.chip { display: flex; align-items: center; gap: .45em; padding: .3em .55em; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03);
  font-size: calc(var(--u) * 1.05); white-space: nowrap; overflow: hidden; min-width: 0; position: relative; }
.chip .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chip .dot { width: .55em; height: .55em; border-radius: 50%; background: var(--dim); flex: none; animation: blink 1.4s steps(2) infinite; }
.chip.ready { border-color: var(--teal); background: rgba(33,230,216,.12); }
.chip.ready .dot { background: none; animation: none; width: auto; height: auto; color: var(--teal); }
.chip.ready .dot::before { content: "✓"; font-weight: 700; }
.chip.joined .dot { background: var(--teal); animation: none; }
.chip.off { opacity: .45; }
.chip .x { position: absolute; right: .2em; top: 50%; transform: translateY(-50%); border: 0; background: #2a0d18; color: var(--mag); padding: 0 .4em;
  font-size: .9em; display: none; }
.chip:hover .x { display: block; }
.board { list-style: none; margin: 0; padding: 0; overflow: auto; display: grid; gap: calc(var(--u) * .3); align-content: start; }
.board li { display: grid; grid-template-columns: calc(var(--u) * 2.2) 1fr auto; align-items: baseline; gap: .5em; padding: .25em .5em;
  font-size: calc(var(--u) * 1.05); border-bottom: 1px solid rgba(255,255,255,.06); }
.board li .r { font: 700 1em var(--mono); color: var(--dim); }
.board li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board li .h { font: 700 1em var(--mono); color: var(--yel); white-space: nowrap; }
.board li .h small { color: var(--dim); font-weight: 400; margin-left: .3em; }
.board li .h small.up { color: var(--mag); }
.board li:first-child { background: rgba(255,225,77,.08); }
.board li:first-child .r { color: var(--yel); }
.empty { color: var(--dim); font-size: calc(var(--u) * 1); }

.ctl { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(var(--u) * .8); padding: calc(var(--u) * .55) calc(var(--u) * 1.4);
  background: #05080b; border-top: 1px solid rgba(255,255,255,.08); font-size: calc(var(--u) * .95); }
.ctl .hint { color: var(--dim); font: calc(var(--u) * .85) var(--mono); }
.ctl .spacer { flex: 1; }
.ctl .btn { font-size: calc(var(--u) * 1.05); }
.ctl .net { color: var(--mag); font: calc(var(--u) * .85) var(--mono); }

/* lobby */
.lobby { position: absolute; inset: 0; display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 3); align-items: center; padding: calc(var(--u) * 3); }
.qrbox { background: #fff; padding: calc(var(--u) * .6); width: calc(var(--u) * 26); clip-path: var(--cut); }
.qrbox svg { display: block; width: 100%; height: auto; }
.lobby h1 { font: 700 calc(var(--u) * 4.6) var(--display); letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .2em; line-height: 1; }
.lobby h1 b { color: var(--teal); }
.lobby .how { font-size: calc(var(--u) * 1.6); line-height: 1.4; margin: 0 0 calc(var(--u) * 1); }
.lobby .url { font: 700 calc(var(--u) * 2.4) var(--mono); color: var(--yel); letter-spacing: .03em; word-break: break-all; }
.lobby .code { font: 700 calc(var(--u) * 6) var(--mono); letter-spacing: .25em; color: var(--txt); margin-top: calc(var(--u) * .6); }
.lobby .code small { display: block; font: calc(var(--u) * .9) var(--mono); letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.lobby .casebox { margin-top: calc(var(--u) * 1.8); font-size: calc(var(--u) * 1.15); color: var(--dim); }
.lobby .casebox b { color: var(--txt); }

/* brief */
.brief { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, calc(var(--u) * 70)); }
.brief h1 { margin: .15em 0 .3em; font: 700 calc(var(--u) * 4.2) var(--display); letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.brief .suspect { font-size: calc(var(--u) * 1.4); margin-bottom: calc(var(--u) * 1); }
.brief .suspect b { background: var(--mag); color: #fff; font: 700 .7em var(--mono); letter-spacing: .12em; padding: .25em .5em; margin-right: .6em; vertical-align: .15em; }
.brief .crime { font-size: calc(var(--u) * 1.6); line-height: 1.45; margin: 0 0 calc(var(--u) * 1.2); }
.rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * .6); border-top: 1px solid rgba(255,255,255,.1); padding-top: calc(var(--u) * 1); }
.rules div { font: calc(var(--u) * 1) var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.rules div b { display: block; font: 700 calc(var(--u) * 2.2) var(--mono); color: var(--yel); }
.brief .win { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 1.25); color: var(--teal); }

/* room */
.place { left: calc(var(--u) * 1.4); top: calc(var(--u) * 1.4); width: calc(var(--u) * 42); max-height: 62%; overflow: hidden; }
.place h1 { margin: .1em 0 .1em; font: 700 calc(var(--u) * 3.4) var(--display); letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.place .grp { font: calc(var(--u) * .85) var(--mono); color: var(--dim); letter-spacing: .14em; text-transform: uppercase; }
.place .intel { font-size: calc(var(--u) * 1.3); line-height: 1.45; margin: calc(var(--u) * .7) 0 0; color: #d6e6e5; }
.place .src { font: calc(var(--u) * .75) var(--mono); color: var(--dim); margin-top: .5em; }
.seen { left: calc(var(--u) * 45.4); top: calc(var(--u) * 1.4); right: calc(var(--u) * 1.4); border-top: 3px solid var(--mag); }
.seen .who { font: 700 calc(var(--u) * 1.4) var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--mag); }
.seen p { margin: .3em 0 0; font-size: calc(var(--u) * 1.45); line-height: 1.4; }
.wits { position: absolute; z-index: 1; right: calc(var(--u) * 2); bottom: calc(var(--u) * 13); display: flex; gap: calc(var(--u) * .4); align-items: flex-end; height: 42%; }
.wit { width: calc(var(--u) * 11); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.wit .fig { height: 86%; width: 100%; display: flex; justify-content: center; align-items: flex-end; }
.wit .fig img { height: 100%; width: auto; max-width: 140%; object-fit: contain; filter: drop-shadow(0 0 calc(var(--u) * .8) rgba(0,0,0,.8)); }
.wit .tag { margin-top: .3em; font: calc(var(--u) * .9) var(--mono); background: rgba(5,8,11,.85); border: 1px solid var(--line); padding: .2em .6em; white-space: nowrap; }
.dests { left: calc(var(--u) * 1.4); right: calc(var(--u) * 1.4); bottom: calc(var(--u) * 1.2); padding-top: calc(var(--u) * .7); }
.dests .q { font: 700 calc(var(--u) * 1.3) var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--yel); margin-bottom: calc(var(--u) * .5); }
.dgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * .7); }
.dest { position: relative; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.35); display: grid; grid-template-columns: calc(var(--u) * 6) 1fr;
  gap: calc(var(--u) * .6); align-items: center; padding: calc(var(--u) * .4); min-height: calc(var(--u) * 4.6); }
.dest img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.dest > div { min-width: 0; }
.dest b { font: 700 calc(var(--u) * 1.2) var(--display); letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; display: block; overflow-wrap: normal; hyphens: auto; }
.dest small { font: calc(var(--u) * .75) var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.dest .why { grid-column: 1 / -1; font-size: calc(var(--u) * 1); line-height: 1.35; color: #c9d9d8; margin: .2em 0 0; }
.dest .mark { position: absolute; right: .4em; top: .2em; font: 700 calc(var(--u) * 1.6) var(--mono); }
.dest.right { border-color: var(--teal); background: rgba(33,230,216,.15); box-shadow: 0 0 calc(var(--u) * 1.2) rgba(33,230,216,.35); }
.dest.right .mark { color: var(--teal); }
.dest.no { opacity: .9; }
.dest.no .mark { color: var(--mag); }
.dest.no b { text-decoration: line-through; text-decoration-color: var(--mag); }
.dests.reveal .dgrid { align-items: stretch; }

/* hideout and warrant */
.capture { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(90%, calc(var(--u) * 66)); border-top: 3px solid var(--yel); }
.capture h1 { margin: .1em 0 .3em; font: 700 calc(var(--u) * 4.4) var(--display); letter-spacing: .05em; text-transform: uppercase; line-height: 1; color: var(--yel); }
.capture p { font-size: calc(var(--u) * 1.7); line-height: 1.45; margin: 0; }
.warrant { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, calc(var(--u) * 70)); border-top: 3px solid var(--yel); }
.warrant .q { font-size: calc(var(--u) * 2.4); line-height: 1.3; margin: .3em 0 .8em; }
.wopts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .7); }
.wopts div { border: 1px solid var(--line); padding: .6em .9em; font-size: calc(var(--u) * 1.5); background: rgba(255,255,255,.03); }
.wopts div b { font-family: var(--mono); color: var(--yel); margin-right: .6em; }
.wopts div.right { border-color: var(--teal); background: rgba(33,230,216,.15); }

/* final */
.final { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94%, calc(var(--u) * 74)); text-align: center; }
.stamp { display: inline-block; transform: rotate(-4deg); border: 3px solid var(--teal); color: var(--teal); font: 700 calc(var(--u) * 1.8) var(--display);
  letter-spacing: .2em; text-transform: uppercase; padding: .2em .6em .1em; text-shadow: 0 0 12px rgba(33,230,216,.7); }
.final h1 { margin: .3em 0 .1em; font: 700 calc(var(--u) * 4.4) var(--display); letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.final h1 b { color: var(--yel); }
.final .sub { font-size: calc(var(--u) * 1.5); color: #d6e6e5; }
.podium { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: calc(var(--u) * .8); align-items: end; margin: calc(var(--u) * 1.6) auto calc(var(--u) * 1.2); max-width: calc(var(--u) * 50); }
.podium > div { border: 1px solid var(--line); background: rgba(255,255,255,.04); padding: calc(var(--u) * .8) .5em; }
.podium > div:nth-child(2) { border-color: var(--yel); background: rgba(255,225,77,.1); padding-top: calc(var(--u) * 2); }
.podium .pl { font: 700 calc(var(--u) * 2) var(--mono); color: var(--yel); }
.podium .nm { font-size: calc(var(--u) * 1.4); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .h { font: calc(var(--u) * 1) var(--mono); color: var(--dim); }
.final .warr { font-size: calc(var(--u) * 1.15); color: var(--dim); margin: calc(var(--u) * .4) 0 calc(var(--u) * 1.2); }
.final .warr b { color: var(--txt); }
.more { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.2); text-align: left; border-top: 1px solid rgba(255,255,255,.1); padding-top: calc(var(--u) * 1); }
.more .qrbox { width: calc(var(--u) * 8); padding: calc(var(--u) * .3); }
.more p { margin: 0; font-size: calc(var(--u) * 1.3); }
.more p b { color: var(--yel); font-family: var(--mono); }

/* setup (the facilitator opens a class) */
.setup { max-width: 1100px; margin: 0 auto; padding: 40px 24px 60px; font-size: 18px; }
.setup h1 { font: 700 56px var(--display); letter-spacing: .05em; text-transform: uppercase; margin: 6px 0 10px; line-height: 1; }
.setup h1 b { color: var(--teal); }
.setup .lede { font-size: 20px; line-height: 1.5; color: #d6e6e5; max-width: 760px; }
.setup h2 { font: 700 20px var(--display); letter-spacing: .14em; text-transform: uppercase; margin: 28px 0 10px; }
.ugrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ucard { text-align: left; border: 1px solid var(--line); background: rgba(255,255,255,.03); padding: 12px 14px; clip-path: var(--cut); }
.ucard .n { font: 700 12px var(--mono); background: var(--teal); color: #001; padding: 2px 7px; }
.ucard { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.ucard b { display: block; font: 700 21px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; margin: 8px 0 4px; hyphens: auto; overflow-wrap: break-word; max-width: 100%; }
.ucard small { color: var(--dim); font-size: 14px; }
.ucard.on { border-color: var(--yel); background: rgba(255,225,77,.1); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { border: 1px solid var(--line); background: rgba(255,255,255,.03); padding: 10px 16px; clip-path: var(--cut); }
.opt.on { border-color: var(--yel); background: rgba(255,225,77,.1); color: var(--yel); }
.opt small { display: block; color: var(--dim); font-size: 13px; }
.setup .go { margin-top: 28px; font-size: 22px; }
.setup .err { color: var(--mag); margin-top: 12px; }
.setup .back { display: inline-block; margin-bottom: 18px; font: 14px var(--mono); color: var(--dim); text-decoration: none; letter-spacing: .06em; }
.setup .back:hover { color: var(--teal); }
.setup .hint-txt { margin-left: 14px; font: 14px var(--mono); color: var(--dim); }
@media (max-width: 800px) { .ugrid { grid-template-columns: 1fr 1fr; } }

/* =================================================================== the phone */
body.play { font-size: 17px; min-height: 100vh; }
.pwrap { max-width: 540px; margin: 0 auto; padding: 0 14px 40px; }
.pbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: #05080b; border-bottom: 1px solid var(--line); }
.pbar .brand { font-size: 15px; }
.pbar .me { text-align: right; min-width: 0; }
.pbar .me .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pbar .me small { font: 11px var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.pbar .hrs { font: 700 26px var(--mono); color: var(--yel); text-shadow: 0 0 10px rgba(255,225,77,.5); white-space: nowrap; }
.pbar .hrs small { font-size: 13px; color: var(--dim); text-shadow: none; margin-left: 2px; }
.net { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; background: var(--mag); color: #fff; text-align: center; padding: 8px; font: 13px var(--mono); }
.card { background: var(--panel-solid); border: 1px solid var(--line); clip-path: var(--cut); padding: 16px 16px 18px; margin-top: 14px; }
.card h1 { font: 700 30px/1.02 var(--display); letter-spacing: .04em; text-transform: uppercase; margin: 4px 0 8px; }
.card h2 { font: 700 19px var(--display); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 6px; }
.card p { line-height: 1.5; margin: 0 0 10px; }
.card .dim { color: var(--dim); }
.card.good { border-color: var(--teal); }
.card.bad { border-color: var(--mag); }
.card.bad h1 { color: var(--mag); }
.field { width: 100%; font: 22px var(--body); padding: 12px 14px; background: #0b1117; color: var(--txt); border: 1px solid var(--line); margin: 8px 0 12px; }
.field.code { font: 700 32px var(--mono); letter-spacing: .3em; text-transform: uppercase; text-align: center; }
.pbtn { width: 100%; padding: 14px; font: 700 19px var(--display); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--yel);
  background: var(--yel); color: #111; clip-path: var(--cut); }
.pbtn.ghost { background: transparent; color: var(--txt); border-color: var(--line); }
.pbtn:disabled { opacity: .45; }
.err { color: var(--mag); font-size: 15px; margin-top: 8px; }
.where { margin-top: 14px; }
.where .eyebrow { font-size: 12px; }
.where h1 { font: 700 28px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; margin: 4px 0 2px; }
.where .seen { font-size: 15px; line-height: 1.45; color: #d6e6e5; margin: 8px 0 0; border-left: 3px solid var(--mag); padding-left: 10px; }
.ptimer { font: 13px var(--mono); color: var(--dim); margin-top: 6px; }
.ptimer b { color: var(--yel); }
.ptimer.up b { color: var(--mag); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; border: 1px solid var(--line); }
.tabs button { border: 0; background: transparent; padding: 12px; font: 700 15px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.tabs button.on { background: var(--teal); color: #001; }
.cost { font: 12px var(--mono); color: var(--dim); letter-spacing: .04em; margin: 10px 0 0; }
.cost b { color: var(--yel); }
.wcard { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; background: var(--panel-solid); border: 1px solid rgba(255,255,255,.1);
  padding: 10px; margin-top: 10px; }
.wcard .pic { width: 64px; height: 80px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; background: #0b1117; }
.wcard .pic img { height: 100%; width: auto; max-width: 160%; object-fit: cover; object-position: top; }
.wcard .role { font: 700 18px var(--display); letter-spacing: .05em; text-transform: uppercase; }
.wcard .clue { font-size: 16px; line-height: 1.45; margin-top: 4px; }
.wcard button { margin-top: 8px; border: 1px solid var(--yel); background: rgba(255,225,77,.12); color: var(--yel); padding: 8px 14px;
  font: 700 15px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.wcard.asked { border-color: var(--line); }
button.wcard { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
button.wcard .role { display: block; }
.wcard .q { display: inline-block; margin-top: 8px; border: 1px solid var(--yel); background: rgba(255,225,77,.12); color: var(--yel); padding: 8px 14px;
  font: 700 15px var(--display); letter-spacing: .1em; text-transform: uppercase; }
button.wcard:hover, button.wcard:active { border-color: var(--yel); }
button.wcard:hover .q, button.wcard:active .q { background: rgba(255,225,77,.25); }
.tcard { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--panel-solid);
  border: 1px solid rgba(255,255,255,.12); padding: 8px; margin-top: 10px; }
.tcard img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #0b1117; }
.tcard b { display: block; font: 700 19px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.tcard small { display: block; font: 11px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.tcard .go { display: block; margin-top: 6px; font: 700 13px var(--mono); color: var(--yel); letter-spacing: .08em; }
.tcard.crossed { opacity: .45; }
.tcard.crossed b { text-decoration: line-through; text-decoration-color: var(--mag); }
.tcard.crossed .go { color: var(--mag); }
.hint { margin-top: 10px; border-left: 3px solid var(--teal); padding-left: 10px; }
.hint .eyebrow { font-size: 11px; }
.big { font: 700 44px var(--mono); color: var(--yel); }
.popts button { display: block; width: 100%; text-align: left; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line);
  background: rgba(255,255,255,.03); font-size: 17px; }
.popts button b { font-family: var(--mono); color: var(--yel); margin-right: 8px; }
.popts button:disabled { opacity: .4; text-decoration: line-through; text-decoration-color: var(--mag); }
.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.foot { margin-top: 26px; font-size: 13px; color: var(--dim); text-align: center; }

.dests.reveal .dest { grid-template-columns: calc(var(--u) * 4.6) 1fr; }
.board.dense li { font-size: calc(var(--u) * .92); padding: .12em .45em; }
.board.dense2 { gap: 0; }
.board.dense2 li { font-size: calc(var(--u) * .82); padding: .08em .4em; }

/* =================================================================== the first screen (/) */
body.home { min-height: 100vh; overflow-x: hidden; }
.home-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); }
.home-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.36) saturate(1.1); transform-origin: 62% 48%;
  animation: drift 40s ease-in-out infinite alternate; }
.home-bg img.missing { visibility: hidden; }
.home-bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 28% 38%, rgba(5,8,11,.1) 0, rgba(5,8,11,.62) 62%, rgba(5,8,11,.95) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); }
@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-1.2%, .8%); } }
.home-in { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column;
  padding: clamp(28px, 8vh, 96px) 24px 26px; }
.home h1 { font: 700 clamp(54px, 7vw, 112px)/.92 var(--display); letter-spacing: .04em; text-transform: uppercase; margin: 12px 0 20px;
  text-shadow: 0 0 34px rgba(33,230,216,.22); }
.home h1 b { color: var(--teal); }
.home .eyebrow { font-size: 13px; }
.home-lede { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; max-width: 740px; color: #d6e6e5; margin: 0 0 16px; }
.home-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; font: 13px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.home-facts b { color: var(--yel); font-size: 16px; margin-right: 4px; }
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(30px, 7vh, 72px); }
.door { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--txt); background: rgba(7,11,16,.86);
  border: 1px solid var(--line); clip-path: var(--cut); padding: 22px 22px 20px; backdrop-filter: blur(6px);
  transition: border-color .2s, transform .2s, background .2s; }
a.door:hover, a.door:focus-visible { border-color: var(--yel); transform: translateY(-3px); background: rgba(12,18,24,.94); outline: none; }
.door svg { width: 44px; height: 44px; stroke: var(--teal); fill: none; stroke-width: 1.7; stroke-linecap: round; margin-bottom: 14px; }
.door .d-e { font: 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.door h2 { font: 700 36px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; margin: 6px 0 10px; }
.door p { font-size: 16px; line-height: 1.5; color: #c9d9d8; margin: 0 0 18px; flex: 1; }
.door .d-go { align-self: flex-start; font: 700 18px var(--display); letter-spacing: .1em; text-transform: uppercase; background: var(--yel); color: #111;
  padding: 10px 18px 8px; clip-path: var(--cut); }
.door.class .d-go { background: transparent; color: var(--yel); border: 1px solid var(--yel); clip-path: none; padding: 9px 17px 7px; }
.door.join { background: rgba(7,11,16,.72); }
.door.join p { flex: 0; margin-bottom: 12px; }
.join-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.join-row .field { margin: 0; font-size: 26px; padding: 9px 10px; }
.join-row .pbtn { width: auto; padding: 10px 18px; }
.home-foot { margin-top: auto; padding-top: 40px; display: flex; gap: 14px; align-items: flex-start; font-size: 13px; color: var(--dim); line-height: 1.55; max-width: 980px; }
.home-foot p { margin: 0; }
.home-foot .crow { width: 34px; height: 34px; opacity: .85; flex: none; }
.home-foot a { color: var(--dim); text-decoration: underline; text-decoration-color: rgba(134,162,161,.45); }
.home-foot a:hover { color: var(--txt); }
@media (max-width: 900px) {
  .doors { grid-template-columns: 1fr; gap: 12px; }
  .door.join { order: -1; }
  .door h2 { font-size: 30px; }
  .door svg { width: 36px; height: 36px; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .home-bg img { animation: none; } }

/* main screen: one big Play, a small link to class mode */
.start { margin-top: clamp(28px, 6vh, 64px); display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.play-big { display: inline-flex; align-items: center; gap: .35em; text-decoration: none; background: var(--yel); color: #111;
  font: 700 clamp(30px, 3.2vw, 42px) var(--display); letter-spacing: .12em; text-transform: uppercase; padding: .45em 1.1em .35em;
  clip-path: var(--cut); box-shadow: 0 0 40px rgba(255,225,77,.25); transition: transform .15s, box-shadow .15s; }
.play-big:hover, .play-big:focus-visible { transform: translateY(-2px); box-shadow: 0 0 56px rgba(255,225,77,.45); outline: none; }
.start-note { margin: 0; font-size: 16px; line-height: 1.5; color: #c9d9d8; max-width: 420px; }
.class-link { margin-top: clamp(26px, 5vh, 52px); align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  color: var(--txt); background: rgba(7,11,16,.7); border: 1px solid rgba(33,230,216,.25); padding: 10px 16px 10px 12px; clip-path: var(--cut);
  transition: border-color .2s, background .2s; }
.class-link:hover, .class-link:focus-visible { border-color: var(--teal); background: rgba(7,11,16,.9); outline: none; }
.class-link svg { width: 30px; height: 30px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.class-link span { font-size: 15px; color: #c9d9d8; }
.class-link b { display: block; font: 700 17px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }

/* the title glitch (every 6 s or so) */
.home h1.glitch { text-shadow: 3px 0 rgba(255,46,136,.85), -3px 0 rgba(33,230,216,.85); animation: glitch-jump .36s steps(2) 1; }
@keyframes glitch-jump {
  0% { transform: translate(0); } 20% { transform: translate(-4px, 1px) skewX(-6deg); } 40% { transform: translate(3px, -1px); }
  60% { transform: translate(-2px, 0) skewX(4deg); } 80% { transform: translate(2px, 1px); } 100% { transform: translate(0); } }

/* class mode page */
.home .back { align-self: flex-start; margin-bottom: 20px; font: 14px var(--mono); color: var(--dim); text-decoration: none; letter-spacing: .06em; }
.home .back:hover { color: var(--teal); }
.cm .home-in { padding-top: clamp(22px, 5vh, 56px); }
.cm h1 { font-size: clamp(46px, 6vw, 92px); }
.cm .home-lede { max-width: 820px; }
.cm-cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 36px; }
.cm-cta .play-big { font-size: clamp(24px, 2.4vw, 32px); }
.cm-join { display: grid; gap: 6px; }
.cm-join label { font-size: 14px; color: var(--dim); }
.cm-join .join-row { width: 300px; max-width: 100%; }
.cm-sec { margin-top: 38px; background: rgba(7,11,16,.84); border: 1px solid var(--line); clip-path: var(--cut); padding: 22px 24px; backdrop-filter: blur(6px); }
.cm-sec h2 { margin: 0 0 14px; font: 700 26px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.cm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.cm-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.cm-steps li { counter-increment: s; font-size: 15px; line-height: 1.5; color: #c9d9d8; border-top: 2px solid var(--teal); padding-top: 10px; }
.cm-steps li::before { content: counter(s); display: block; font: 700 30px var(--mono); color: var(--yel); }
.cm-steps li b, .cm-list li b { display: block; font: 700 18px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--txt); margin-bottom: 2px; }
.cm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cm-list li { font-size: 15px; line-height: 1.5; color: #c9d9d8; padding-left: 16px; border-left: 2px solid rgba(33,230,216,.35); }
.cm-tips li { border-left-color: rgba(255,225,77,.45); }
.cm-score { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cm-score div { font: 13px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; border: 1px solid rgba(255,255,255,.08); padding: 10px 12px; }
.cm-score b { display: block; font: 700 28px var(--mono); color: var(--yel); }
.cm-note { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--dim); }
.cm-cta-end { margin-top: 30px; }
@media (max-width: 900px) {
  .cm-steps { grid-template-columns: 1fr; }
  .cm-two { grid-template-columns: 1fr; gap: 26px; }
  .cm-score { grid-template-columns: 1fr 1fr; }
  .start { gap: 14px; }
}

/* class page (13 Nov, Juan): players arrive lost, so Join is the big action; Open a class is for the facilitator, who knows the way */
.cm-cta { align-items: flex-end; }
.cm-join label { font-size: 16px; color: var(--txt); }
.cm-join { flex: 1 1 520px; max-width: 520px; min-width: 0; }
.cm-join .join-row { width: 100%; gap: 10px; }
.cm-join .join-row .field { font-size: clamp(34px, 3.4vw, 46px); padding: 10px 14px; letter-spacing: .3em; }
.cm-join .join-row .pbtn { font-size: clamp(24px, 2.4vw, 32px); padding: 12px 28px; }
.cm-host { display: grid; gap: 6px; }
.cm-host span { font-size: 14px; color: var(--dim); }
.host-btn { display: inline-block; font: 700 18px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); text-decoration: none;
            border: 1px solid rgba(33,230,216,.5); padding: 12px 18px 10px; clip-path: var(--cut); background: rgba(7,11,16,.6); }
.host-btn:hover { border-color: var(--teal); background: rgba(33,230,216,.1); }
@media (max-width: 560px) { .cm-join .join-row .field { font-size: 30px; letter-spacing: .2em; } .cm-join .join-row .pbtn { font-size: 22px; padding: 10px 18px; } }

/* breadcrumbs on the class page and the setup page (13 Nov, Juan: instead of a back link) */
.crumbs { margin-bottom: 18px; font: 13px var(--mono); letter-spacing: .06em; color: var(--dim); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--teal); }
.crumbs i { font-style: normal; opacity: .5; }
.crumbs span { color: var(--txt); }
.home .crumbs { align-self: flex-start; margin-bottom: 20px; }
/* setup: the case type as one word, its explanation under the buttons; the timer in seconds */
.opt.word { font: 700 22px var(--display); letter-spacing: .14em; text-transform: uppercase; padding: 12px 30px 9px; }
.opt-hint { margin-top: 10px; font-size: 15px; color: var(--dim); min-height: 1.4em; }
.secs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.secs .field { width: 130px; margin: 0; font: 700 28px var(--mono); color: var(--yel); text-align: center; padding: 8px 10px; }
.secs span { font: 14px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.secs em { font-style: normal; font-size: 15px; color: var(--dim); }

/* phone: the next step is obvious, and a player who skipped the witnesses is sent back to them (13 Nov, Juan) */
.pbtn.next { margin-top: 16px; font-size: 21px; padding: 16px 14px; }
.pbtn.next.ready { animation: next-pulse 1.6s ease-in-out infinite; }
@keyframes next-pulse { 0%, 100% { background: var(--yel); transform: scale(1); } 50% { background: #fff3a0; transform: scale(1.02); } }   /* clip-path hides a glow, so the colour pulses */
.tabs button.call { color: var(--teal); animation: tab-call 1s ease-in-out infinite; }
@keyframes tab-call { 0%, 100% { background: transparent; } 50% { background: rgba(33,230,216,.28); } }
.nudge { margin: 12px 0 0; padding: 10px 12px; font-size: 15px; line-height: 1.45; color: var(--txt); border-left: 3px solid var(--teal); background: rgba(33,230,216,.08); }
.nudge .lnk { border: 0; background: none; padding: 0; font: inherit; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pbtn.next.ready, .tabs button.call { animation: none; } .tabs button.call { background: rgba(33,230,216,.2); } }

/* big screen: the facilitator can show a revealed room again from the trail (13 Nov, Juan) */
.trail .node.can { cursor: pointer; }
.trail .node.can:hover { border-color: var(--yel); }
.trail .node.peek { border-color: var(--mag); box-shadow: 0 0 calc(var(--u) * .8) rgba(255,46,136,.5); }
.main .pane.peekbar { right: calc(var(--u) * 1.2); top: calc(var(--u) * 1.2); z-index: 6; display: flex; align-items: center; gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * .6) calc(var(--u) * 1.2); border-color: var(--mag); background: rgba(5,8,11,.94); font: calc(var(--u) * 1) var(--mono); color: var(--txt); white-space: nowrap; }

/* big screen, reading a room: a note where the places will open */
.main .pane.readnote { left: calc(var(--u) * 1.4); right: calc(var(--u) * 1.4); bottom: calc(var(--u) * 1.4); padding: calc(var(--u) * 1) calc(var(--u) * 1.4);
  font-size: calc(var(--u) * 1.3); color: var(--txt); border-color: var(--teal); }
.main .pane.readnote b { color: var(--teal); }
.card.wait p { line-height: 1.5; }

/* big screen: a subtle - and + next to the clock (30 s each) */
.tbox { display: flex; align-items: center; gap: calc(var(--u) * .4); }
.tadj { width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); border: 1px solid transparent; background: transparent; color: var(--dim);
  font: 700 calc(var(--u) * 1.3)/1 var(--mono); opacity: .45; cursor: pointer; padding: 0; transition: opacity .2s, border-color .2s, color .2s; }
.tbox:hover .tadj { opacity: .8; }
.tadj:hover { opacity: 1; color: var(--yel); border-color: rgba(255,225,77,.5); }
/* phone: the countdown in the top bar */
.pclock { font: 700 20px var(--mono); color: var(--yel); letter-spacing: .04em; margin-left: auto; padding: 2px 8px; border: 1px solid rgba(255,225,77,.35); }
.pclock.low { color: var(--mag); border-color: rgba(255,46,136,.5); }
.pclock.up { color: var(--mag); border-color: rgba(255,46,136,.5); animation: blink 1s steps(2) infinite; }

/* big screen, the search (13 Nov, Juan): smaller witnesses with a WITNESSES label, and a big clock under the sighting */
.wits { height: 31%; bottom: calc(var(--u) * 12.6); }
.wit { width: calc(var(--u) * 8); }
.wits .wlabel { align-self: stretch; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; margin-right: calc(var(--u) * .6);
  font: 700 calc(var(--u) * .95) var(--mono); letter-spacing: .45em; text-transform: uppercase; color: var(--teal); border-left: 2px solid rgba(33,230,216,.55); padding-left: calc(var(--u) * .4); }
.rcol { position: absolute; z-index: 2; left: calc(var(--u) * 45.4); top: calc(var(--u) * 1.4); right: calc(var(--u) * 1.4); display: flex; flex-direction: column; gap: calc(var(--u) * .9); }
.main .rcol .pane { position: relative; left: auto; top: auto; right: auto; }
.main .rcol .pane.bigclock { align-self: flex-start; display: flex; align-items: baseline; gap: calc(var(--u) * 1); padding: calc(var(--u) * .3) calc(var(--u) * 1.4); border-color: rgba(255,225,77,.45); }
.bigclock small { font: calc(var(--u) * .95) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.bigclock b { font: 700 calc(var(--u) * 5.2)/1.05 var(--mono); color: var(--yel); text-shadow: 0 0 calc(var(--u) * 1) rgba(255,225,77,.55); }
.bigclock.low b { color: var(--mag); text-shadow: 0 0 calc(var(--u) * 1) rgba(255,46,136,.6); }
.bigclock.up { border-color: var(--mag); }
.bigclock.up b { color: var(--mag); font-size: calc(var(--u) * 3.4); animation: blink 1s steps(2) infinite; }
/* the live leaderboard during the search */
.board.live li.ready { background: rgba(33,230,216,.1); }
.board .ok { font-style: normal; color: var(--teal); font-weight: 700; margin-right: .4em; }
.board .dot { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--dim); margin-right: .55em; vertical-align: .1em; animation: blink 1.4s steps(2) infinite; }
.board li.off { opacity: .45; }

/* leaderboard columns (13 Nov, Juan: they did not line up): rank | name | hours (right) | this round (left, fixed width) */
.board li { grid-template-columns: calc(var(--u) * 2.2) minmax(0, 1fr) auto 4.2em; }
.board li .h { text-align: right; font-variant-numeric: tabular-nums; }
.board li .h u { text-decoration: none; font-size: .75em; margin-left: .12em; color: var(--yel); opacity: .8; }
.board li .d { font: 400 .85em var(--mono); color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.board li .d.up { color: var(--mag); }
.wits { gap: calc(var(--u) * .9); }
.wit .tag { white-space: normal; text-align: center; max-width: calc(var(--u) * 8.8); font-size: calc(var(--u) * .8); line-height: 1.2; }

/* final screen: a small "Made by" line */
.more p small.by { display: block; margin-top: calc(var(--u) * .4); font: calc(var(--u) * .8) var(--mono); letter-spacing: .08em; color: var(--dim); }
.play p.by { margin: 10px 0 0; text-align: center; font: 11px var(--mono); letter-spacing: .08em; }
.play p.by a { color: var(--dim); text-decoration: none; }

/* the byline under each title (13 Nov, Juan) */
.byline { display: block; width: max-content; margin: 4px 0 14px; font: 13px var(--mono); letter-spacing: .1em; color: var(--dim); text-decoration: none; }
.byline:hover { color: var(--teal); }
.setup .byline { margin-top: 0; }

/* big screen: full screen button (top right) */
.fsbtn { border: 1px solid rgba(255,255,255,.12); background: transparent; color: var(--dim); font: calc(var(--u) * 1.3)/1 var(--mono);
  width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); padding: 0; cursor: pointer; opacity: .6; transition: opacity .2s, color .2s, border-color .2s; }
.fsbtn:hover { opacity: 1; color: var(--teal); border-color: rgba(33,230,216,.5); }
.fsbtn.on { opacity: .35; }
.opt.word { display: inline-flex; align-items: center; gap: 12px; }
.opt.word svg { width: 24px; height: 24px; flex: none; margin-top: -3px; }

/* the big clock is the only clock; its - and + sit around it (13 Nov, Juan) */
.main .pane.bigclock { display: flex; align-items: center; gap: calc(var(--u) * .9); }
.main .pane.bigclock small { order: -2; }
.main .pane.bigclock .tadj[data-adj="-30"] { order: -1; }
.main .pane.bigclock .tadj { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); font-size: calc(var(--u) * 1.8); opacity: .35; }
.main .pane.bigclock:hover .tadj { opacity: .75; }
.main .pane.bigclock .tadj:hover { opacity: 1; }
.main > .pane.bigclock.floating { right: calc(var(--u) * 1.4); top: calc(var(--u) * 1.4); padding: calc(var(--u) * .3) calc(var(--u) * 1.4); border-color: rgba(255,225,77,.45); }
.main .pane.bigclock small { white-space: nowrap; }

/* reveal animations on the big screen (13 Nov, Juan): the wrong places switch off one by one, then the right one lights up like a neon sign */
@keyframes neon-on { 0% { opacity: .1; } 7% { opacity: 1; } 11% { opacity: .25; } 18% { opacity: 1; } 24% { opacity: .45; } 36%, 100% { opacity: 1; } }
@keyframes neon-glow { 0%, 100% { box-shadow: inset 0 0 calc(var(--u) * 1.2) rgba(33,230,216,.3), 0 0 calc(var(--u) * 1.2) rgba(33,230,216,.35); }
  50% { box-shadow: inset 0 0 calc(var(--u) * 2.6) rgba(33,230,216,.65), 0 0 calc(var(--u) * 2.8) rgba(33,230,216,.75); } }
@keyframes stamp-in { 0% { transform: scale(2.6) rotate(-14deg); opacity: 0; } 60% { transform: scale(.9) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes switch-off { 0% { opacity: 1; filter: none; } 30% { opacity: .35; } 45% { opacity: .9; } 100% { opacity: .6; filter: grayscale(.6); } }
@keyframes rise { from { transform: translateY(45%); opacity: 0; } to { transform: none; opacity: 1; } }
.dests.reveal .q { animation: neon-on 1s ease-out both; }
.dests.reveal .dest.no { animation: switch-off .6s ease-out both; animation-delay: calc(.4s + var(--i, 0) * .3s); }
.dests.reveal .dest.no .mark { animation: stamp-in .45s cubic-bezier(.2, .8, .3, 1.2) both; animation-delay: calc(.4s + var(--i, 0) * .3s); }
.dests.reveal .dest.right { animation: neon-on 1.1s ease-out 1.4s both, neon-glow 1.6s ease-in-out 2.5s 3; }
.dests.reveal .dest.right .mark { animation: stamp-in .5s cubic-bezier(.2, .8, .3, 1.2) 1.8s both; }
/* the final screen: CASE CLOSED is stamped, the podium rises (3rd, 2nd, then 1st), the winner and the warrant answer light up */
.final .stamp { animation: stamp-final .6s cubic-bezier(.2, .8, .3, 1.2) .2s both; }
@keyframes stamp-final { 0% { transform: scale(3) rotate(-16deg); opacity: 0; } 60% { transform: scale(.92) rotate(-2deg); opacity: 1; } 100% { transform: rotate(-4deg); opacity: 1; } }
.podium > div { animation: rise .6s cubic-bezier(.2, .8, .3, 1) both; }
.podium > div:nth-child(3) { animation-delay: .7s; }
.podium > div:nth-child(1) { animation-delay: 1s; }
.podium > div:nth-child(2) { animation-delay: 1.35s; }
.final h1 b { display: inline-block; animation: neon-on 1.2s ease-out 1.9s both; text-shadow: 0 0 calc(var(--u) * 1.2) rgba(255,225,77,.55); }
.final .warr .wa { animation: neon-on 1.2s ease-out 2.4s both; }
@media (prefers-reduced-motion: reduce) {
  .dests.reveal .q, .dests.reveal .dest, .dests.reveal .dest .mark, .final .stamp, .podium > div, .final h1 b, .final .warr .wa { animation: none !important; }
  .dests.reveal .dest.no { opacity: .6; }
}

/* the warrant on the final screen: the question, then the answer on its own line (13 Nov, Juan) */
.final .warr { max-width: calc(var(--u) * 60); margin: calc(var(--u) * .6) auto calc(var(--u) * 1.4); color: var(--dim); }
.final .warr .eyebrow { margin-bottom: .3em; }
.final .warr .wq { margin: 0; font-size: calc(var(--u) * 1.15); line-height: 1.4; color: #c9d9d8; }
.final .warr .wa { margin: .35em 0 0; font: 600 calc(var(--u) * 1.45)/1.35 var(--body); color: var(--teal); text-shadow: 0 0 calc(var(--u) * .9) rgba(33,230,216,.45); }
.final .warr .wa span { margin-right: .45em; }

/* the clock label looks like the WITNESSES label: vertical, teal, with a line (13 Nov, Juan) */
.main .pane.bigclock small { align-self: stretch; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; margin-right: calc(var(--u) * .3);
  font: 700 calc(var(--u) * .95) var(--mono); letter-spacing: .45em; text-transform: uppercase; color: var(--teal);
  border-left: 2px solid rgba(33,230,216,.55); padding-left: calc(var(--u) * .4); }


  /* ---------- travel: a short build-up, then the whole screen flashes (green: on the trail, magenta: wrong room) ---------- */
  .tfx { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px;
         background: rgba(4, 7, 10, .86); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
  .tfx[hidden] { display: none; }
  .tfx-box { width: min(380px, 86vw); display: grid; justify-items: center; gap: 8px; text-align: center; }
  .tfx-th { position: relative; width: min(220px, 60vw); aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 6px;
            clip-path: var(--cut); background: var(--panel-solid); border: 1px solid var(--line); }
  .tfx-th img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) brightness(.45); }
  .tfx-th::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; top: 0;
                   background: var(--teal); box-shadow: 0 0 12px 2px var(--teal); opacity: 0; }
  .tfx small { font: 600 11px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--teal); }
  .tfx b { font: 700 clamp(26px, 7vw, 40px)/1.05 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--txt);
           text-shadow: 0 0 18px rgba(33, 230, 216, .45); }
  .tfx-bar { width: 100%; height: 3px; margin-top: 6px; background: rgba(33, 230, 216, .14); overflow: hidden; }
  .tfx-bar i { display: block; height: 100%; width: 0; background: var(--teal); box-shadow: 0 0 10px var(--teal); }
  .tfx em { font: 11px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
  .tfx em::after { content: ""; display: inline-block; width: 2.2ch; text-align: left; }
  .tfx.go .tfx-box { animation: tfx-in .35s ease-out both; }
  .tfx.go .tfx-th img { animation: tfx-wake 1.25s ease-in forwards; }
  .tfx.go .tfx-th::after { animation: tfx-scan .6s linear .1s 2; }
  .tfx.go b { animation: tfx-flicker 1.3s steps(1) both; }
  .tfx.go .tfx-bar i { animation: tfx-fill 1.25s cubic-bezier(.55, 0, .85, .45) forwards; }
  .tfx.go em::after { animation: tfx-dots 1.2s steps(1) infinite; }
  @keyframes tfx-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes tfx-wake { to { filter: grayscale(0) brightness(1); } }
  @keyframes tfx-scan { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: .6; } }
  @keyframes tfx-fill { to { width: 100%; } }
  @keyframes tfx-flicker { 0% { opacity: 0; } 6% { opacity: 1; } 10% { opacity: .3; } 14%, 100% { opacity: 1; } }
  @keyframes tfx-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

  .flash { position: fixed; inset: 0; z-index: 210; pointer-events: none; opacity: 0; }
  .flash.bad  { --fc: 255, 46, 136; }
  .flash.good { --fc: 57, 255, 136; }
  .flash.bad, .flash.good {
    background: radial-gradient(ellipse at center, rgba(var(--fc), .12) 25%, rgba(var(--fc), .42) 100%);
    box-shadow: inset 0 0 0 4px rgba(var(--fc), 1), inset 0 0 130px 22px rgba(var(--fc), .6); }
  .flash.bad  { animation: flash-twice .7s linear both; }
  .flash.good { animation: flash-twice .9s ease-in-out both; }
  @keyframes flash-twice { 0% { opacity: 0; } 6%, 18% { opacity: 1; } 30% { opacity: 0; } 42%, 54% { opacity: 1; } 70%, 100% { opacity: 0; } }
  @keyframes flash-once  { 0% { opacity: 0; } 20% { opacity: .6; } 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .tfx.go .tfx-box, .tfx.go b, .tfx.go .tfx-th::after, .tfx.go em::after { animation: none; }
    .tfx.go .tfx-th img { animation: none; filter: none; }
    .tfx.go .tfx-bar i { animation: tfx-fill .5s linear forwards; }
    .flash.bad, .flash.good { animation: flash-once .8s ease-out both; }
  }

/* the analytics notice under the credits */
.home-foot .privacy { display: inline-block; margin-top: 6px; font-size: .9em; opacity: .75; }

/* the player page on wide screens (laptops), 13 Nov 2026: a wider page, bigger type, the room picture behind,
   witnesses and travel side by side. Phones keep the layout above. */
.pbg { display: none; }
@media (min-width: 1000px) {
  body.play { font-size: 18px; }
  .pbg { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
  .pbg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: saturate(.85); }
  .pbg::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7,9,13,.55) 0%, rgba(7,9,13,.82) 45%, rgba(7,9,13,.94) 100%); }
  .pwrap { position: relative; z-index: 1; max-width: 1120px; padding: 0 32px 60px; }
  .pbar { padding: 12px max(32px, calc((100vw - 1120px) / 2 + 32px)); background: rgba(5,8,11,.92); }
  .pbar .brand { font-size: 18px; }
  .pbar { gap: 18px; }
  .pbar .me { margin-left: auto; }
  .pbar .pclock { margin-left: 0; }
  .pwrap > .card { max-width: 640px; margin: 8vh auto 0; padding: 26px 28px 28px; }
  .pwrap > .card h1 { font-size: 40px; }
  .where { margin-top: 28px; }
  .where h1 { font-size: 46px; }
  .where .seen { font-size: 17px; max-width: 860px; }
  .pwrap > .where + .card { max-width: 860px; margin: 18px 0 0; }
  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 22px; align-items: start; }
  .colh { font: 700 18px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin: 0 0 6px; }
  .colh small { font: 13px var(--mono); color: var(--dim); letter-spacing: .08em; margin-left: 6px; }
  .cols .cost { margin-top: 0; }
}

/* =================================================================== effects (13 Nov 2026, Juan)
   html.fx is set in the head when motion is allowed (class/build.py); js/fx.js rolls the light line once and decrypts
   a title marked data-decrypt. The first page and the class page come in part by part. */
.fx .home .home-head .eyebrow { animation: fx-flicker .9s .1s backwards; }
.fx .home .byline { animation: fx-fade .6s 1s backwards; }
.fx .home .home-lede { animation: fx-rise .7s .55s ease-out backwards; }
.fx .home .home-facts > * { animation: fx-rise .5s .75s ease-out backwards; }
.fx .home .home-facts > :nth-child(2) { animation-delay: .83s; }
.fx .home .home-facts > :nth-child(3) { animation-delay: .91s; }
.fx .home .home-facts > :nth-child(4) { animation-delay: .99s; }
.fx .home .start, .fx .home .cm-cta { animation: fx-rise .6s 1.05s ease-out backwards; }
.fx .home .play-big { animation: fx-on 1s 1.15s backwards; }
.fx .home .class-link { animation: fx-rise .6s 1.35s ease-out backwards; }
.fx .home .home-foot { animation: fx-fade .9s 1.5s backwards; }
.fx-roll { position: fixed; left: 0; right: 0; top: 0; height: 160px; z-index: 40; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(33,230,216,.05) 55%, rgba(33,230,216,.12) 78%, rgba(160,255,250,.18) 80%, transparent 82%); }
.fx .fx-roll.go { animation: fx-roll 2.2s cubic-bezier(.45,.05,.55,.95) .15s 1 both; }
@keyframes fx-roll { 0% { transform: translateY(-160px); opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } }
@keyframes fx-flicker { 0% { opacity: 0; } 20% { opacity: 1; } 30% { opacity: .2; } 45%, 100% { opacity: 1; } }
@keyframes fx-fade { from { opacity: 0; } }
@keyframes fx-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes fx-on { 0% { opacity: 0; } 12% { opacity: 1; } 18% { opacity: .2; } 26% { opacity: 1; } 32% { opacity: .5; } 44%, 100% { opacity: 1; } }