:root{--bg:#08020f;--bg2:#15003a;--cyan:#00f0ff;--magenta:#ff2e88;--yellow:#ffe600;--green:#39ff14;--purple:#a259ff;--bezel:#1a1030;--bezel2:#0d0820;--line:#33215c;--text:#e9e4ff;--muted:#9d8fcf;--bad:#ff2e88;--px:"Press Start 2P",monospace;--term:"VT323",monospace}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:radial-gradient(900px 500px at 50% -10%, #2a0a55 0%, transparent 60%), radial-gradient(700px 500px at 110% 100%, #2a004f 0%, transparent 55%), linear-gradient(180deg,var(--bg),#0a0320 70%);color:var(--text);font-family:var(--term);flex-direction:column;align-items:center;min-height:100%;padding:18px 16px 60px;font-size:18px;display:flex;position:relative;overflow-x:hidden}.floor{z-index:0;pointer-events:none;opacity:.45;transform-origin:bottom;background:repeating-linear-gradient(90deg,#0000 0 44px,#00f0ff73 44px 46px),repeating-linear-gradient(0deg,#0000 0 44px,#ff2e8873 44px 46px);height:42vh;animation:1.6s linear infinite floor;position:fixed;bottom:-2px;left:-10%;right:-10%;transform:perspective(320px)rotateX(74deg);-webkit-mask-image:linear-gradient(#0000,#000 60%);mask-image:linear-gradient(#0000,#000 60%)}@keyframes floor{0%{background-position:0 0,0 0}to{background-position:0 0,0 46px}}.scan{z-index:60;pointer-events:none;background:repeating-linear-gradient(#0000 0 2px,#00000029 2px 4px);position:fixed;inset:0}.beam{z-index:61;pointer-events:none;background:linear-gradient(#0000,#00f0ff0f,#0000);height:120px;animation:7s linear infinite beam;position:fixed;left:0;right:0}@keyframes beam{0%{top:-120px}to{top:100vh}}.vig{z-index:59;pointer-events:none;animation:.14s steps(2,end) infinite flick;position:fixed;inset:0;box-shadow:inset 0 0 200px #000c}@keyframes flick{0%{opacity:.85}to{opacity:1}}header{z-index:2;justify-content:space-between;align-items:center;width:100%;max-width:460px;margin-bottom:14px;display:flex;position:relative}.brand{align-items:center;gap:12px;display:flex}.logo{width:36px;height:36px;box-shadow:0 0 0 2px #000,0 0 14px var(--cyan);image-rendering:pixelated;grid-template-columns:repeat(3,1fr);display:grid;overflow:hidden}.logo i{display:block}h1{font-family:var(--px);color:#fff;letter-spacing:1px;text-shadow:0 0 4px var(--cyan),0 0 12px var(--cyan),0 0 22px var(--magenta);margin:0;font-size:1.15rem;line-height:1.1;animation:4s ease-in-out infinite hum}@keyframes hum{0%,to{filter:brightness()}48%{filter:brightness()}50%{filter:brightness(.7)}52%{filter:brightness()}}h1 b{color:var(--yellow);text-shadow:0 0 6px var(--yellow),0 0 16px #ff9d00}.sub{font-family:var(--px);color:var(--magenta);letter-spacing:2px;margin-top:7px;font-size:.5rem;animation:1.1s step-end infinite blink}@keyframes blink{50%{opacity:.25}}.icon-btn{font-family:var(--px);background:var(--bezel);border:2px solid var(--cyan);color:var(--cyan);cursor:pointer;width:40px;height:40px;font-size:.8rem;box-shadow:3px 3px #000}.icon-btn:hover{background:var(--cyan);color:#000}main{z-index:2;width:100%;max-width:460px;position:relative}.cab{background:linear-gradient(180deg,var(--bezel),var(--bezel2));border:3px solid #2c1a55;border-radius:18px;padding:16px;box-shadow:0 0 0 3px #000,0 26px 60px #0009,inset 0 0 30px #a259ff26}.stage{aspect-ratio:1;background:#000;border:2px solid #000;border-radius:12px;width:100%;animation:.7s both poweron;position:relative;overflow:hidden;box-shadow:inset 0 0 60px #00f0ff2e,0 0 18px #00f0ff40}@keyframes poweron{0%{filter:brightness(4);transform:scaleY(.004)}45%{filter:brightness(4);transform:scaleY(.004)}70%{filter:brightness(1.6);transform:scale(1)}to{filter:brightness();transform:scale(1)}}canvas{width:100%;height:100%;image-rendering:pixelated;display:block}.stage:after{content:"";pointer-events:none;background:repeating-linear-gradient(#0000 0 3px,#00000038 3px 6px);position:absolute;inset:0;box-shadow:inset 0 0 70px #0000008c}.pill{z-index:3;font-family:var(--px);letter-spacing:1px;border:2px solid var(--cyan);color:var(--cyan);box-shadow:2px 2px 0 var(--magenta);background:#000;padding:6px 8px;font-size:.5rem;position:absolute;top:9px;left:9px}.hint{min-height:22px;color:var(--yellow);text-align:center;margin-top:12px;font-size:1.05rem}.dots{justify-content:center;gap:7px;margin-top:12px;display:flex}.dots i{width:14px;height:14px;box-shadow:inset 0 0 0 2px var(--line);image-rendering:pixelated;background:#000}.dots i.used{background:var(--magenta);box-shadow:0 0 8px var(--magenta)}.dots i.win{background:var(--green);box-shadow:0 0 10px var(--green)}.guesses{flex-direction:column;gap:7px;margin-top:14px;display:flex}.guess{border:2px solid var(--line);letter-spacing:.5px;background:#0a0420;justify-content:space-between;align-items:center;padding:9px 12px;font-size:1.15rem;animation:.25s both popin;display:flex}@keyframes popin{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:none}}.guess.wrong{border-color:var(--magenta);color:#ffd0e4}.guess .ok{border-color:var(--green);color:#caffb8}.guess.win{border-color:var(--green);color:#caffb8;box-shadow:0 0 12px #39ff1466}.guess.skip{opacity:.55}.guess .tag{font-size:1rem}.controls{gap:8px;margin-top:14px;display:flex}.field{flex:1;position:relative}input[type=text]{border:2px solid var(--cyan);width:100%;color:var(--green);font-family:var(--term);letter-spacing:1px;background:#04010d;outline:none;padding:13px 14px;font-size:1.25rem;box-shadow:inset 0 0 12px #00f0ff26}input[type=text]::placeholder{color:#4a7d8a}input[type=text]:focus{box-shadow:inset 0 0 12px #00f0ff59,0 0 10px #00f0ff66}input.shake{animation:.35s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-7px)}75%{transform:translate(7px)}}.ac{border:2px solid var(--cyan);z-index:5;background:#0a0420;max-height:220px;display:none;position:absolute;bottom:calc(100% + 6px);left:0;right:0;overflow:auto;box-shadow:0 0 18px #00f0ff4d}.ac.show{display:block}.ac div{cursor:pointer;border-bottom:1px solid #1a0f33;padding:10px 13px;font-size:1.1rem}.ac div:hover,.ac div.active{background:var(--cyan);color:#000}button.pixbtn{font-family:var(--px);cursor:pointer;letter-spacing:1px;border:0;padding:0 14px;font-size:.62rem}button.primary{background:var(--green);color:#04240a;box-shadow:4px 4px #0a7a1a}button.primary:active{transform:translate(2px,2px);box-shadow:2px 2px #0a7a1a}button.ghost{background:var(--bezel);color:var(--muted);box-shadow:4px 4px #000;border:2px solid var(--line)!important}button.ghost:active{transform:translate(2px,2px);box-shadow:2px 2px #000}.overlay{z-index:80;background:#04010cd9;justify-content:center;align-items:center;padding:20px;display:none;position:fixed;inset:0}.overlay.show{display:flex}.result{background:linear-gradient(180deg,var(--bezel),var(--bezel2));border:3px solid var(--cyan);text-align:center;width:100%;max-width:380px;padding:24px;box-shadow:0 0 0 3px #000,0 0 40px #00f0ff66}.result h2{font-family:var(--px);color:var(--muted);letter-spacing:1px;margin:.6rem 0 .2rem;font-size:.7rem}.result .ans{font-family:var(--px);color:var(--yellow);text-shadow:0 0 10px #ffe60080;margin-top:6px;font-size:.95rem;line-height:1.4}.bigres{font-family:var(--px);letter-spacing:1px;font-size:1.3rem}.stats{justify-content:space-around;margin:20px 0 8px;display:flex}.stats .n{font-family:var(--px);color:var(--cyan);font-size:1rem}.stats .l{color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:6px;font-size:.85rem}.sharebox{border:2px solid var(--line);font-family:var(--term);letter-spacing:3px;white-space:pre-line;background:#04010d;margin:10px 0 14px;padding:12px;font-size:1.3rem}.row{gap:8px;display:flex}.row button{flex:1;padding:13px}.countdown{font-family:var(--px);color:var(--magenta);letter-spacing:1px;margin-top:14px;font-size:.55rem}footer{color:var(--muted);text-align:center;z-index:2;letter-spacing:1px;max-width:460px;margin-top:22px;font-size:1rem;position:relative}.pixc{z-index:100;width:12px;height:12px;image-rendering:pixelated;animation:2.1s linear forwards fall;position:fixed;top:-24px}@keyframes fall{to{transform:translate(var(--x),106vh) rotate(540deg);opacity:.15}}body.glitch .stage{animation:.36s steps(2,end) glx}@keyframes glx{0%{transform:translate(0)}20%{filter:hue-rotate(60deg)saturate(2);transform:translate(-5px,2px)}40%{transform:translate(5px,-2px)}60%{filter:hue-rotate(-50deg);transform:translate(-3px,1px)}to{transform:translate(0)}}
