@font-face { font-family: "Mont"; src: url("fonts/mont-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mont"; src: url("fonts/mont-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Mont"; src: url("fonts/mont-heavy.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Mont"; src: url("fonts/mont-blackitalic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --red: #FD0043; --cyan: #18FFF1; --teal: #0E6F6B; --ink: #000; --ink-2: #0B0B0E; --ink-3: #16161B;
  --line: rgba(255,255,255,.08); --dim: rgba(255,255,255,.72); --faint: rgba(255,255,255,.45);
  --ease: cubic-bezier(.2,.7,.1,1); --pop: cubic-bezier(.3,1.6,.5,1);
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --display: "Mont", "Arial Black", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: var(--ink); }
body { font-family: var(--display); color: #fff; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100dvh; overflow-x: hidden;
  background: var(--ink) repeating-linear-gradient(90deg, transparent 0 calc(16.666% - 1px), var(--line) calc(16.666% - 1px) 16.666%); }
button, .opt { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
header { display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) 16px 10px; position: relative; z-index: 3; }
header img { height: 18px; }
#me { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); display: flex; gap: 8px; align-items: center; }
#me b { font: 900 italic 15px var(--display); letter-spacing: 0; color: #000; background: var(--cyan); padding: 4px 9px; transform: skewX(-12deg); display: inline-block; font-variant-numeric: tabular-nums; }
#me b.bump { animation: bump .5s var(--pop); }
@keyframes bump { 40% { transform: skewX(-12deg) scale(1.3); } }
main { flex: 1; display: flex; flex-direction: column; padding: 8px 16px max(18px, env(safe-area-inset-bottom)); position: relative; }
#net { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translate(-50%, 40px); opacity: 0; z-index: 9;
  background: var(--ink-3); border: 1px solid var(--line); padding: 8px 14px; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; transition: .3s var(--ease); pointer-events: none; }
#net.on { transform: translate(-50%, 0); opacity: 1; }

/* type */
.k { font: 500 11px var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--cyan); }
.k.r { color: var(--red); }
.d { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; line-height: .9; }
.d1 { font-size: clamp(40px, 13vw, 60px); }
.d2 { font-size: clamp(30px, 9.4vw, 44px); }
.d3 { font-size: clamp(22px, 6.6vw, 30px); line-height: .98; }
.d { overflow-wrap: anywhere; }
.d.long { font-size: clamp(20px, 6vw, 27px); }
.c { color: var(--cyan); } .r { color: var(--red); }
p { font-size: 16px; line-height: 1.45; color: var(--dim); }
p b { color: #fff; }
.grow { flex: 1; }
.screen { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.center { text-align: center; align-items: center; justify-content: center; }
.rise { opacity: 0; transform: translateY(18px); animation: rise .6s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 80ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.w { display: inline-block; opacity: 0; transform: translateY(.45em) skewX(-6deg); animation: rise .5s var(--ease) forwards; animation-delay: calc(var(--i) * 40ms + 150ms); }
.glow { position: fixed; width: 120vw; aspect-ratio: 1; border-radius: 50%; z-index: -1; pointer-events: none; right: -70vw; top: -40vh;
  background: radial-gradient(circle, rgba(24,255,241,.18), transparent 62%); animation: drift 10s ease-in-out infinite alternate; }
.glow.r { background: radial-gradient(circle, rgba(253,0,67,.24), transparent 62%); left: -70vw; right: auto; top: 40vh; animation-duration: 13s; }
@keyframes drift { to { transform: translate(-10vw, 8vh) scale(1.1); } }
.slash { width: 0; height: 8px; background: var(--red); transform: skewX(-24deg); animation: slash .8s .2s var(--ease) forwards; }
@keyframes slash { to { width: 72px; } }

/* forms */
input[type=text], input[type=email] { width: 100%; background: var(--ink-2); border: 2px solid rgba(255,255,255,.18); color: #fff; -webkit-text-fill-color: #fff; caret-color: var(--red);
  font: 700 22px var(--display); padding: 16px 18px; border-radius: 0; outline: none; transition: border-color .2s; -webkit-appearance: none; appearance: none; }
input::placeholder { color: var(--faint); -webkit-text-fill-color: var(--faint); }
input:focus { border-color: var(--red); }
input.code { text-transform: uppercase; letter-spacing: .4em; text-align: center; font: 900 italic 38px var(--display); }
.btn { appearance: none; border: 0; width: 100%; font: 900 italic 20px var(--display); text-transform: uppercase; color: #fff; background: var(--red);
  padding: 18px; transform: skewX(-12deg); transition: transform .15s, opacity .2s; }
.btn span { display: inline-block; transform: skewX(12deg); }
.btn:active { transform: skewX(-12deg) scale(.97); }
.btn:disabled { opacity: .35; }
.err { color: var(--red); font: 600 12px var(--mono); letter-spacing: .1em; min-height: 1em; text-transform: uppercase; }
label.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--dim); }
label.chk input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--red); flex: none; }

/* info cards */
.info { justify-content: flex-end; }
.num { font: 500 11px var(--mono); letter-spacing: .2em; color: var(--faint); }
.big { font: 900 italic clamp(72px, 26vw, 128px)/.85 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.big.c { color: var(--cyan); }
.lbl { font: 900 italic 20px/1.05 var(--display); text-transform: uppercase; }
.bars { display: grid; gap: 12px; }
.bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: end; }
.bar span { font: 800 15px var(--display); }
.bar b { font: 900 italic 24px var(--display); font-variant-numeric: tabular-nums; }
.bar i { grid-column: 1 / -1; height: 14px; background: var(--ink-3); position: relative; overflow: hidden; transform: skewX(-12deg); }
.bar i::after { content: ""; position: absolute; inset: 0; background: var(--cyan); transform-origin: left; transform: scaleX(0); animation: grow 1s var(--ease) forwards; animation-delay: calc(var(--d) * 120ms + 200ms); width: var(--w); }
.bar.lo i::after { background: var(--red); }
@keyframes grow { to { transform: scaleX(1); } }
.kpis { display: grid; gap: 10px; }
.kpi { background: var(--ink-2); border-left: 4px solid var(--cyan); padding: 14px 16px; display: flex; align-items: baseline; gap: 12px; }
.kpi:nth-child(2) { border-color: var(--red); } .kpi:nth-child(3) { border-color: #fff; }
.kpi b { font: 900 italic 34px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi span { font-size: 13px; color: var(--dim); line-height: 1.3; }
.pill { display: inline-block; background: #fff; color: #000; font: 900 italic 13px var(--display); text-transform: uppercase; padding: 7px 12px; transform: skewX(-12deg); align-self: flex-start; }
.list { display: grid; gap: 10px; counter-reset: n; }
.list div { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--ink-2); font: 900 italic 20px/1.05 var(--display); text-transform: uppercase; }
.list.steps div::before { counter-increment: n; content: counter(n, decimal-leading-zero); font: 500 12px var(--mono); color: var(--cyan); font-style: normal; }
.list.locks div { position: relative; }
.list.locks div::before { content: ""; width: 18px; height: 14px; border: 3px solid var(--red); border-radius: 2px; flex: none; position: relative; top: 3px;
  box-shadow: 0 -9px 0 -3px var(--ink-2), 0 -9px 0 0 var(--red); animation: unlock .5s var(--pop) forwards; animation-delay: calc(var(--d) * 260ms + 700ms); }
.list.locks div::after { content: ""; position: absolute; left: 48px; right: 16px; top: 50%; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; animation: grow .4s var(--ease) forwards; animation-delay: calc(var(--d) * 260ms + 900ms); }
@keyframes unlock { to { box-shadow: 0 -12px 0 -3px var(--ink-2), 6px -12px 0 0 var(--red); border-color: var(--cyan); } }
.wavebar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wavebar i { height: 6px; background: var(--ink-3); transform: skewX(-20deg); }
.wavebar i.on { background: var(--red); animation: pulse 1.6s ease-in-out infinite; }
.wavebar i.past { background: rgba(255,255,255,.4); }
.wavebar small { font: 500 9px var(--mono); color: var(--faint); letter-spacing: .1em; display: block; margin-top: 6px; text-align: center; }
@keyframes pulse { 50% { opacity: .45; } }
.outline { font: 900 italic clamp(110px, 40vw, 190px)/.8 var(--display); color: transparent; -webkit-text-stroke: 2px var(--red); letter-spacing: -.04em; }

/* dock on info cards */
.dock { display: grid; grid-template-columns: repeat(3, 56px) 1fr; gap: 10px; margin-top: 8px; }
.dock button { appearance: none; border: 1px solid rgba(255,255,255,.14); background: var(--ink-2); color: #fff; height: 56px; font-size: 24px; transition: transform .12s, background .2s; }
.dock button:active { transform: scale(.88); background: var(--ink-3); }
.dock .keep { font: 900 italic 15px var(--display); text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: center; justify-content: center; gap: 8px; transform: skewX(-12deg); }
.dock .keep span { transform: skewX(12deg); display: inline-block; }
.dock .keep.on { background: var(--cyan); color: #000; border-color: var(--cyan); }
.floater { position: fixed; font-size: 34px; pointer-events: none; z-index: 8; animation: floatUp 1.1s var(--ease) forwards; }
@keyframes floatUp { to { transform: translateY(-46vh) scale(1.4); opacity: 0; } }

/* options: Spacefwd colours only */
.opts { display: grid; gap: 10px; flex: 1; align-content: end; }
.opts.g2 { grid-template-columns: 1fr 1fr; }
.opt { appearance: none; border: 0; font: 900 italic 19px/1.05 var(--display); text-transform: uppercase; color: #000; text-align: left; padding: 16px 16px; min-height: 76px;
  display: flex; align-items: center; gap: 12px; position: relative; background: var(--c); transform: skewX(-8deg); transition: transform .15s, opacity .3s, filter .3s; }
.opt > * { transform: skewX(8deg); }
.opt.o0 { --c: var(--red); color: #fff; } .opt.o1 { --c: var(--cyan); } .opt.o2 { --c: #fff; } .opt.o3 { --c: var(--teal); color: #fff; }
.opts.many .opt { min-height: 54px; padding: 12px 14px; font-size: 16px; }
.opt .l { font: 500 12px var(--mono); font-style: normal; width: 26px; height: 26px; flex: none; display: grid; place-items: center; background: rgba(0,0,0,.2); }
.opt small { display: block; font: 600 12px var(--display); font-style: normal; text-transform: none; opacity: .75; margin-top: 4px; }
.opt:active { transform: skewX(-8deg) scale(.97); }
.opt.dim { opacity: .22; filter: saturate(.2); }
.opt.sel { outline: 3px solid #fff; outline-offset: 4px; }
.opt.right { opacity: 1; filter: none; }
.opt.right::after { content: "\2713"; position: absolute; right: 16px; font-size: 24px; font-style: normal; transform: none; }
.opt .pc { margin-left: auto; font: 900 italic 22px var(--display); }

/* timer */
.qhead { display: flex; gap: 14px; align-items: flex-start; }
.qhead > div:first-child { flex: 1; min-width: 0; }
.ring { width: 58px; height: 58px; flex: none; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring .bg { stroke: var(--ink-3); } .ring .fg { stroke: var(--cyan); stroke-dasharray: 163.4; transition: stroke .3s; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 italic 22px var(--display); font-variant-numeric: tabular-nums; }
.ring.low .fg { stroke: var(--red); } .ring.low b { color: var(--red); animation: pulse .5s infinite; }
.timeup { font: 900 italic 30px var(--display); text-transform: uppercase; color: var(--red); }

/* guess */
.gv { font: 900 italic clamp(80px, 28vw, 130px)/.9 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.gv small { font-size: .32em; font-style: normal; font-weight: 800; color: var(--dim); margin-left: 4px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 56px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 12px; background: linear-gradient(90deg, var(--red) var(--p, 50%), var(--ink-3) var(--p, 50%)); transform: skewX(-20deg); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 42px; height: 42px; margin-top: -15px; background: #fff; transform: skewX(-12deg); box-shadow: 0 0 0 6px rgba(253,0,67,.35); }
input[type=range]::-moz-range-track { height: 12px; background: var(--ink-3); }
input[type=range]::-moz-range-progress { height: 12px; background: var(--red); }
input[type=range]::-moz-range-thumb { width: 42px; height: 42px; border: 0; border-radius: 0; background: #fff; }
.ends { display: flex; justify-content: space-between; font: 500 11px var(--mono); color: var(--faint); margin-top: -6px; letter-spacing: .1em; }
textarea { width: 100%; min-height: 120px; background: var(--ink-2); border: 2px solid rgba(255,255,255,.18); color: #fff; -webkit-text-fill-color: #fff; font: 700 20px/1.3 var(--display); padding: 14px 16px; outline: none; resize: none; border-radius: 0; }
textarea:focus { border-color: var(--red); }
.count { font: 500 11px var(--mono); color: var(--faint); text-align: right; }

/* results */
.verdict { font: 900 italic clamp(50px, 16vw, 78px)/.9 var(--display); text-transform: uppercase; }
.pts { display: inline-block; background: var(--cyan); color: #000; font: 900 italic 22px var(--display); padding: 8px 14px; transform: skewX(-12deg) scale(0); animation: pop .5s .25s var(--pop) forwards; align-self: flex-start; }
@keyframes pop { to { transform: skewX(-12deg) scale(1); } }
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.card { background: var(--ink-2); border: 1px solid var(--line); padding: 16px; }

/* toast: the result of a phone-only question, shown with the next card */
#toast { position: fixed; left: 12px; right: 12px; top: max(52px, calc(env(safe-area-inset-top) + 44px)); z-index: 7; background: var(--ink-2); border: 1px solid rgba(255,255,255,.14);
  border-left: 6px solid var(--cyan); padding: 14px 16px; transform: translateY(-30px); opacity: 0; visibility: hidden; transition: transform .5s var(--pop), opacity .3s, visibility 0s .5s; display: grid; gap: 6px; }
#toast.on { transform: none; opacity: 1; visibility: visible; transition: transform .5s var(--pop), opacity .3s; }
#toast.bad { border-left-color: var(--red); }
#toast .v { font: 900 italic 26px/1 var(--display); text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#toast .pts { font-size: 17px; padding: 5px 10px; animation-delay: .4s; }
#toast .bars { gap: 6px; } #toast .bar b { font-size: 16px; } #toast .bar span { font-size: 13px; } #toast .bar i { height: 8px; }

/* lobby, wait, podium */
.pulse { width: 64px; height: 64px; animation: pulse 1.8s ease-in-out infinite; }
.dots i { display: inline-block; width: 8px; height: 8px; margin: 0 4px; background: var(--red); transform: skewX(-12deg); animation: dot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 40% { transform: translateY(-8px) skewX(-12deg); } }
.medal { font: 900 italic 150px/.8 var(--display); color: transparent; -webkit-text-stroke: 3px var(--cyan); animation: pop2 .9s var(--pop); }
.medal.gold { -webkit-text-stroke: 0; color: var(--red); }
@keyframes pop2 { from { transform: scale(0) rotate(-12deg); } }
.top3 { display: grid; gap: 6px; }
.top3 div { display: flex; justify-content: space-between; font: 900 italic 17px var(--display); text-transform: uppercase; padding: 12px 14px; background: var(--ink-2); transform: skewX(-8deg); }
.top3 div > * { transform: skewX(8deg); }
.top3 div:first-child { background: var(--red); }
.spark { position: fixed; top: -10px; width: 8px; height: 14px; z-index: 5; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--x), 105vh) rotate(var(--r)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* v3: centred layouts, artwork, readable timer, obvious picks */
.screen.mid { justify-content: center; gap: 18px; }
.screen.mid .opts { flex: none; align-content: start; }
input.plain { animation: none !important; transform: none !important; opacity: 1 !important; will-change: auto; }
.info { justify-content: center; }
.info .body { display: flex; flex-direction: column; gap: 14px; }
.info.has-art .body { gap: 12px; }
.art { width: calc(100% - 12px); aspect-ratio: 16 / 10; overflow: hidden; transform: skewX(-6deg); margin: 0 auto 6px; position: relative; background: var(--ink-3); }
.art::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.art img { width: 112%; height: 100%; object-fit: cover; margin-left: -6%; transform: skewX(6deg) scale(1.06); animation: kb 9s ease-out forwards; display: block; }
@keyframes kb { to { transform: skewX(6deg) scale(1.16) translateX(-2%); } }
.wavehead { display: flex; align-items: center; gap: 14px; }
.wavehead .wn { font: 900 italic 76px/.8 var(--display); color: var(--red); }
.wavehead .k { line-height: 1.6; }
.facts { display: grid; gap: 8px; }
.facts div { background: var(--ink-2); border-left: 4px solid var(--cyan); padding: 10px 14px; }
.facts div:nth-child(2) { border-color: var(--red); }
.facts span { font: 500 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.facts p { font-size: 14px; line-height: 1.4; color: #fff; margin-top: 3px; }
.wavebar i.all { background: var(--red); opacity: 0; animation: rise .4s var(--ease) forwards; animation-delay: calc(var(--d) * 120ms + 300ms); }
.list div { gap: 12px; }
.list.locks div::before, .list.locks div::after { content: none; }
.list.locks .lk { position: relative; width: 26px; height: 26px; flex: none; }
.list.locks .lk svg { position: absolute; inset: 0; transition: opacity .3s; }
.list.locks .lk svg:first-child { color: var(--red); animation: lockOff .3s forwards; animation-delay: calc(var(--d) * 300ms + 600ms); }
.list.locks .lk svg:last-child { color: var(--cyan); opacity: 0; animation: lockOn .4s var(--pop) forwards; animation-delay: calc(var(--d) * 300ms + 600ms); }
@keyframes lockOff { to { opacity: 0; } }
@keyframes lockOn { from { opacity: 0; transform: translateY(4px) rotate(-12deg); } to { opacity: 1; transform: none; } }
.list.locks .tx { transition: color .3s; animation: fadeTx .3s forwards; animation-delay: calc(var(--d) * 300ms + 700ms); }
@keyframes fadeTx { to { color: var(--faint); } }
.timebar { display: grid; gap: 6px; }
.timebar .tl { display: flex; justify-content: space-between; align-items: baseline; }
.timebar .tl span { font: 500 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--faint); }
.timebar .tl b { font: 900 italic 28px/1 var(--display); color: var(--cyan); font-variant-numeric: tabular-nums; }
.timebar .tt { height: 10px; background: var(--ink-3); transform: skewX(-20deg); overflow: hidden; }
.timebar .tt i { display: block; height: 100%; background: var(--cyan); transform-origin: left; }
.timebar.low .tl b { color: var(--red); animation: pulse .5s infinite; } .timebar.low .tt i { background: var(--red); }
.state { font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); text-align: center; }
.opt.dim { opacity: .3; filter: saturate(.25); }
.opts.picked .opt.mine { outline: 0; box-shadow: 0 0 0 3px #000, 0 0 0 6px #fff; transform: skewX(-8deg) scale(1.02); }
.opt .l { transition: background .2s; }
.opt.mine .l { background: #000; color: #fff; font-size: 15px; }
.opt .ot { display: grid; gap: 2px; position: relative; z-index: 1; }
.opt em { font: 600 10px var(--mono); font-style: normal; letter-spacing: .2em; opacity: .8; }
.opt .pc { position: relative; z-index: 1; }
.opt .pf { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: rgba(0,0,0,.18); transform-origin: left; animation: grow .9s var(--ease) both; }
.opt.o0 .pf, .opt.o3 .pf { background: rgba(255,255,255,.18); }
.opt.wrong { opacity: .9; filter: none; }
.result { display: grid; gap: 10px; }
.share { font-size: 17px; color: #fff; }
.share b { color: var(--cyan); font: 900 italic 22px var(--display); }
.timeup { text-align: center; }

.opt .pc.sm { font: 600 11px var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; opacity: .85; white-space: nowrap; }