@font-face{font-family:Glitch;src:url(fonts/rubik-glitch-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:Bungee;src:url(fonts/bungee-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:Term;src:url(fonts/vt323-latin-400-normal.woff2) format('woff2');font-display:swap}
:root{color-scheme:only light;--toxic:#b6ff00;--blood:#7a0b1e;--must:#c9a400;--mag:#ff00c8;--cyan:#00f0ff;--rot:#2f3a0c;--flesh:#e0916e;--ink:#0a0a05;--paper:#f2ee8a}
*{box-sizing:border-box}
html{background:#1d2600}
html,body{margin:0;height:100%;color:var(--toxic);font-family:Term,'Courier New',monospace;font-size:22px;overflow-x:hidden}
#bg,#bg2{position:fixed;inset:-5%;z-index:-3;image-rendering:pixelated;background-size:240px;animation:drift 40s steps(40) infinite}
#bg2{z-index:-2;mix-blend-mode:difference;opacity:.38;background-size:520px 90px;animation:drift2 23s steps(23) infinite reverse}
@keyframes drift{to{background-position:480px 960px}}
@keyframes drift2{to{background-position:-1040px 180px}}
#scan{position:fixed;inset:0;z-index:50;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 2px,transparent 2px 5px);mix-blend-mode:multiply}
#marquee{position:fixed;left:0;right:0;top:0;z-index:40;background:var(--mag);color:#000;font-family:Bungee,Impact,sans-serif;font-size:.8rem;white-space:nowrap;overflow:hidden;border-bottom:4px solid #000;padding:2px 0}
#marquee span{display:inline-block;padding-left:100%;animation:scroll 70s linear infinite}
@keyframes scroll{to{transform:translateX(-100%)}}
.title{font-family:Glitch,Impact,sans-serif;line-height:.9;color:var(--toxic);text-shadow:5px 0 var(--mag),-5px 0 var(--cyan),0 6px #000;margin:0;animation:shake 1.6s steps(3) infinite}
@keyframes shake{0%{transform:translate(0) rotate(-1deg)}33%{transform:translate(3px,-2px) rotate(.6deg)}66%{transform:translate(-2px,2px) rotate(-.3deg)}}
.win{background:var(--must);color:#000;border:5px solid;border-color:#fff46a #3a2c00 #3a2c00 #fff46a;box-shadow:10px 10px 0 #000;position:relative}
.win>.bar{background:linear-gradient(90deg,var(--blood),var(--mag) 60%,var(--must));color:#fff;font-family:Bungee,Impact,sans-serif;font-size:.75rem;padding:4px 8px;display:flex;justify-content:space-between;gap:12px}
.win>.bar i{font-style:normal;background:var(--must);color:#000;border:2px outset #fff46a;padding:0 7px;line-height:1.1}
.body{padding:18px}
.report{background:var(--ink);color:var(--toxic);padding:18px 22px;line-height:1.1;border:4px inset #555}
.blank{display:inline-block;min-width:3.4em;height:.8em;background:repeating-linear-gradient(45deg,var(--mag) 0 8px,#000 8px 16px);vertical-align:-.05em;animation:pulse 1.2s steps(2) infinite}
@keyframes pulse{50%{filter:hue-rotate(120deg)}}
.filled{color:#000;background:var(--toxic);padding:0 .22em;font-style:normal;box-shadow:3px 3px 0 var(--mag)}
button{font-family:Bungee,Impact,sans-serif;cursor:pointer;background:var(--toxic);color:#000;border:5px solid;border-color:#efffa0 #3d5200 #3d5200 #efffa0;padding:12px 20px;font-size:1rem}
button:active{border-color:#3d5200 #efffa0 #efffa0 #3d5200;transform:translate(2px,2px)}
button:disabled{filter:grayscale(1);opacity:.6;cursor:not-allowed}
button.danger{background:var(--mag);border-color:#ffa0ec #6a0054 #6a0054 #ffa0ec;color:#000}
input,textarea{font-family:Term,monospace;font-size:1.5rem;width:100%;background:#000;color:var(--toxic);border:4px inset #777;padding:10px;outline:none;border-radius:0}
input:focus,textarea:focus{border-color:var(--mag)}
.tag{display:inline-block;font-family:Bungee,Impact,sans-serif;font-size:.8rem;background:#000;color:var(--cyan);padding:3px 9px;transform:rotate(-2deg)}
.tag.double{background:var(--blood);color:#fff;animation:pulse 1s steps(2) infinite}
.err{background:var(--blood);color:#fff;padding:6px 10px;font-family:Bungee,sans-serif;font-size:.8rem;margin-top:8px}
.muted{opacity:.8}
.sticker{display:inline-block;font-family:Bungee,Impact,sans-serif;background:var(--paper);color:#000;border:3px solid #000;padding:4px 10px;margin:5px;box-shadow:4px 4px 0 #000;font-size:.85rem;cursor:pointer}
.sticker.off{opacity:.45}
.sticker.done{background:var(--toxic)}
.sprite{image-rendering:pixelated;position:fixed;z-index:-1;animation:bob 3s steps(4) infinite}
@keyframes bob{50%{transform:translateY(-14px) rotate(4deg)}}
.pop{position:fixed;z-index:-1;width:250px;font-size:.85rem}
.pop .body{padding:8px 10px;line-height:1}

/* ---- host (big screen) ---- */
.host #stage{position:fixed;inset:40px 24px 52px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
#fit{display:flex;flex-direction:column;gap:18px;min-width:0;width:100%;flex:none}
#fit>*,.lobby>*,.verdict>*{min-width:0}
.host #controls{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:8px;justify-content:flex-end;align-items:center;padding:7px 12px;background:#000;border-top:4px solid var(--mag)}
.host #controls button{font-size:.65rem;padding:6px 12px;border-width:3px}
.host #controls .left{margin-right:auto;font-family:Bungee,sans-serif;font-size:.6rem;color:var(--cyan);min-width:0}
.host #controls button{flex:none}
.lobby{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:center;min-height:0}
.lobby .title{font-size:clamp(70px,11.5vw,210px)}
.sub{font-family:Bungee,sans-serif;background:#000;color:var(--must);display:inline-block;padding:4px 12px;transform:rotate(-1deg);font-size:1rem;margin-top:14px}
.code{font-family:Bungee,Impact,sans-serif;font-size:clamp(60px,9vw,170px);letter-spacing:.08em;color:var(--mag);background:#000;text-align:center;line-height:1.08;text-shadow:4px 4px 0 var(--toxic)}
.joinrow{display:flex;gap:18px;align-items:center}
#qr{background:#fff;padding:10px;width:clamp(150px,17vw,290px);image-rendering:pixelated;position:relative;z-index:60;flex:none}
.joinurl{font-size:1.5rem;word-break:break-all;line-height:1}
.roster{min-height:60px}
.rhead{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.timer{font-family:Bungee,Impact,sans-serif;font-size:clamp(46px,6.5vw,110px);background:#000;color:var(--toxic);padding:0 18px;line-height:1.15;border:5px inset #666;min-width:2.3em;text-align:center}
.timer.hot{color:#fff;background:var(--blood);animation:shake .5s steps(3) infinite}
.roundname{font-family:Glitch,Impact,sans-serif;font-size:clamp(40px,5.6vw,92px);line-height:1.05;color:var(--toxic);text-shadow:3px 0 var(--mag),-3px 0 var(--cyan);background:#000;padding:2px 18px;display:inline-block;transform:rotate(-1deg);margin-bottom:6px}
.prompt{font-size:clamp(38px,5vw,86px)}
.prompt.small{font-size:clamp(24px,2.7vw,44px)}
.status{display:flex;flex-wrap:wrap;justify-content:center}
.big-answer{font-family:Bungee,Impact,sans-serif;text-align:center;color:#000;background:var(--toxic);padding:.3em .5em;line-height:1.08;box-shadow:12px 12px 0 var(--mag);overflow-wrap:anywhere;animation:slam .28s cubic-bezier(.2,2,.4,1);transform:rotate(-1.4deg)}
@keyframes slam{from{transform:scale(3.2) rotate(9deg);opacity:0}}
.pips{display:flex;gap:8px;justify-content:center}.pips b{width:28px;height:28px;background:#000;border:3px solid var(--toxic)}.pips b.on{background:var(--mag)}
.options{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.option{background:var(--paper);color:#000;border:4px solid #000;box-shadow:6px 6px 0 #000;font-family:Bungee,Impact,sans-serif;font-size:clamp(18px,2.2vw,38px);padding:12px 16px;line-height:1.1;overflow-wrap:anywhere}
.option:nth-child(even){transform:rotate(.8deg);background:var(--flesh)}.option:nth-child(3n){transform:rotate(-1deg)}
.option small{color:var(--blood);font-size:.6em;display:block}
.verdict{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;min-height:0}
.stamp{position:absolute;right:16px;bottom:8px;font-family:Bungee,Impact,sans-serif;color:var(--blood);border:6px solid var(--blood);padding:2px 12px;transform:rotate(-4deg);font-size:clamp(16px,2vw,36px);animation:slam .3s .25s both;background:rgba(242,238,138,.85)}
.who{font-family:Bungee,sans-serif;font-size:clamp(20px,2.3vw,42px);color:var(--blood);margin:12px 0 74px;line-height:1.05}
.row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;background:#000;color:var(--toxic);margin:5px 0;padding:3px 10px;font-size:1.25rem;line-height:1.05}
.row .a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row b{color:var(--mag);font-family:Bungee,sans-serif;font-size:.8rem;flex:none}
.row.me{background:var(--mag);color:#000}.row.me b{color:#000}
.awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.award h3{margin:0;font-family:Bungee,sans-serif;font-size:.8rem;color:var(--blood)}
.award p{margin:4px 0 0;font-family:Bungee,sans-serif;font-size:clamp(20px,2.4vw,40px);line-height:1;overflow-wrap:anywhere}
.award small{display:block;margin-top:5px;font-size:1rem;line-height:1}
.ceo{font-family:Glitch,Impact,sans-serif;font-size:clamp(60px,10vw,180px);text-align:center;line-height:1;color:var(--toxic);text-shadow:5px 0 var(--mag),-5px 0 var(--cyan),0 6px #000;overflow-wrap:anywhere}
#gate{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);padding:18px}
#gate .win{max-width:560px;width:100%}

/* ---- player (phone) ---- */
.player #stage{max-width:560px;margin:0 auto;padding:44px 14px 28px;display:flex;flex-direction:column;gap:14px;min-height:100%}
.player .title{font-size:62px;text-align:center}
.player button{width:100%;font-size:1.05rem}
.player .report{font-size:1.5rem}
.player .timer{font-size:34px;border-width:3px;padding:0 10px}
.player .option{display:block;width:100%;text-align:left;font-size:1.05rem;cursor:pointer;margin-bottom:10px;max-height:none;font-family:Term,monospace;font-size:1.35rem}
.player .option.picked{background:var(--toxic);box-shadow:0 0 0 5px var(--mag)}
.player .option.mine{opacity:.55;cursor:not-allowed}
.player .bigmsg{font-family:Bungee,Impact,sans-serif;text-align:center;font-size:1.2rem;background:#000;color:var(--toxic);padding:16px;line-height:1.15}
.player .rhead{flex-wrap:nowrap}
.player .sprite,.player .pop{opacity:.75}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

.title{paint-order:stroke fill;-webkit-text-stroke:3px #000}
.ceo{paint-order:stroke fill;-webkit-text-stroke:4px #000}
.sub,.tag,.big-answer,.option,.win,.status .sticker{position:relative}
body.qr-view #scan{display:none}
.host .win,.host .big-answer{animation-name:pump;animation-duration:.8s;animation-timing-function:steps(2);animation-iteration-count:infinite}
.host .big-answer{animation:slam .28s cubic-bezier(.2,2,.4,1),pump .8s steps(2) .28s infinite}
.pop{animation:none!important;box-shadow:6px 6px 0 #000}
@keyframes pump{50%{translate:0 3px}}

/* ---- glitch ---- */
#bg{animation-duration:14s;animation-timing-function:steps(28)}
#bg2{animation-duration:9s;animation-timing-function:steps(18)}
.ghost{position:fixed;z-index:48;pointer-events:none;display:flex;flex-direction:column;justify-content:center;overflow:visible}
.ghost,.ghost *{animation:none!important}
.fitcopy{display:flex;flex-direction:column;gap:18px;width:100%;flex:none}
.rgb #bg{filter:hue-rotate(110deg) contrast(1.5)}
.rgb #bg2{opacity:.8}
.rgb #marquee{transform:translateX(-14px) skewX(-14deg)}
.rgb .title,.rgb .roundname,.rgb .ceo{text-shadow:14px 0 var(--mag),-14px 0 var(--cyan),0 6px #000;translate:6px 0}
.rgb:not(.qr-view) #fit{filter:drop-shadow(5px 0 rgba(255,0,200,.75)) drop-shadow(-5px 0 rgba(0,240,255,.75))}
#cutflash{position:fixed;inset:0;z-index:47;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,var(--mag) 0 14px,#000 14px 40px,var(--toxic) 40px 48px,#000 48px 90px)}
.cut #cutflash{animation:cutflash .36s steps(4) both}
@keyframes cutflash{0%{opacity:.85;transform:translateX(-30px)}50%{opacity:.5;transform:translateX(40px)}100%{opacity:0;transform:none}}
.cut #fit{animation:cutin .38s steps(5) both}
@keyframes cutin{0%{transform:translateX(-50px) skewX(10deg);filter:hue-rotate(160deg) contrast(1.6)}40%{transform:translateX(34px) skewX(-6deg);filter:hue-rotate(70deg)}70%{transform:translateX(-12px)}100%{transform:none;filter:none}}
.hit #fit{animation:hitshake .32s steps(6)}
@keyframes hitshake{0%{transform:translate(-18px,8px) scale(1.02);filter:invert(1)}18%{transform:translate(22px,-10px);filter:hue-rotate(120deg)}45%{transform:translate(-12px,6px);filter:none}70%{transform:translate(7px,-3px)}100%{transform:none}}
body.player.cut #cutflash{animation-duration:.2s}
#intruder{position:fixed;right:14px;bottom:62px;z-index:46;width:min(420px,40vw);font-family:Bungee,Impact,sans-serif;font-size:.8rem;line-height:1.15}
.line{background:#000;color:var(--toxic);padding:.35em .6em;margin:10px 0;font-family:Bungee,Impact,sans-serif;font-size:clamp(20px,2.5vw,44px);line-height:1.12;overflow-wrap:anywhere}
.line b{color:var(--mag);font-weight:400}
.line.hero{font-size:clamp(30px,4vw,74px);text-align:center;color:var(--mag)}
.line.hero b{color:var(--toxic)}
.ctflink{display:block;text-align:center;font-family:Bungee,Impact,sans-serif;background:var(--mag);color:#000;padding:12px;border:4px solid #000;text-decoration:none}