:root{--bg:#0a0a14;--vcr:#39ff14;--mag:#ff2bd6;--cy:#22e6ff;--tape:#e8dcc0;--warn:#ffcc00}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:#dfe;font-family:'VT323',monospace;font-size:20px;overflow-x:hidden}
body{background:radial-gradient(ellipse at center,#141432 0%,#0a0a14 70%,#000 100%);min-height:100vh}
#root{position:relative;z-index:1;min-height:100vh;animation:flicker 4s infinite}
.title{font-family:'Rubik Mono One',sans-serif;letter-spacing:2px}
.rgb{text-shadow:2px 0 var(--mag),-2px 0 var(--cy)}
.rgb-big{text-shadow:4px 0 var(--mag),-4px 0 var(--cy),0 0 18px rgba(57,255,20,.5);animation:rgbjit 3s infinite}
.vcr{color:var(--vcr);text-shadow:0 0 6px rgba(57,255,20,.7)}
.blink{animation:blink 1s steps(2) infinite}
#noise{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;opacity:.07;mix-blend-mode:screen}
.crt-scan{position:fixed;inset:0;pointer-events:none;z-index:51;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.crt-vignette{position:fixed;inset:0;pointer-events:none;z-index:52;box-shadow:inset 0 0 140px 30px rgba(0,0,0,.9);border-radius:28px}
.crt-tear{position:fixed;left:0;right:0;height:60px;pointer-events:none;z-index:53;background:linear-gradient(180deg,transparent,rgba(255,255,255,.06),rgba(34,230,255,.05),transparent);animation:tear 7s linear infinite;backdrop-filter:blur(.6px) hue-rotate(20deg)}
body.nofx #noise,body.nofx .crt-tear{display:none}
body.nofx #root,body.nofx .rgb-big{animation:none}
body.nofx .shake,body.nofx .wobble{animation:none!important}
@keyframes flicker{0%,100%{opacity:1}48%{opacity:.97}50%{opacity:.92}52%{opacity:.98}}
@keyframes blink{50%{opacity:0}}
@keyframes tear{0%{top:-80px}100%{top:110vh}}
@keyframes rgbjit{0%,92%,100%{transform:none}93%{transform:translateX(-3px) skewX(-6deg)}95%{transform:translateX(4px)}97%{transform:translateX(-1px) skewX(3deg)}}
.menu-item{display:block;width:100%;text-align:left;padding:6px 12px;font-size:30px;color:#cfe;border:0;background:none;cursor:pointer}
.menu-item:hover,.menu-item:focus{color:var(--vcr);background:rgba(57,255,20,.08);text-shadow:3px 0 var(--mag),-3px 0 var(--cy);animation:jit .15s infinite;outline:none}
@keyframes jit{0%{transform:translateX(0)}50%{transform:translateX(2px)}100%{transform:translateX(-1px)}}
.btn{border:2px solid var(--vcr);color:var(--vcr);background:rgba(0,0,0,.5);padding:4px 14px;font-size:22px;cursor:pointer;text-transform:uppercase}
.btn:hover{background:var(--vcr);color:#000}
.btn:disabled{opacity:.35;cursor:not-allowed;background:none;color:var(--vcr)}
.btn.mag{border-color:var(--mag);color:var(--mag)}.btn.mag:hover{background:var(--mag);color:#000}
.panel{border:2px solid #2a3a5a;background:rgba(8,10,24,.85);box-shadow:0 0 0 1px #000,0 0 20px rgba(34,230,255,.08)}
.card{position:relative;background:linear-gradient(180deg,var(--tape) 0 22%,#16162a 22%);border:3px solid #000;outline:2px solid #444;color:#111;cursor:pointer;transition:transform .15s}
.card:hover{transform:translateY(-6px) rotate(-1deg);outline-color:var(--vcr)}
.card .reel{display:flex;gap:10px;justify-content:center}
.pix{image-rendering:pixelated}
.badge{display:inline-block;padding:0 6px;font-size:16px;color:#fff;border:1px solid #000;text-transform:uppercase}
.hp{height:14px;border:2px solid #000;background:#222;position:relative;overflow:hidden}
.hp>i{display:block;height:100%;transition:width .5s}
.hp:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 8px,#000 8px 10px)}
.hand-card{min-width:118px;width:118px;height:160px;flex:0 0 auto;border:3px solid #000;outline:2px solid #555;padding:6px;cursor:pointer;transition:transform .15s;position:relative;color:#fff}
.hand-card:hover{transform:translateY(-12px);outline-color:var(--vcr)}
.hand-card.dis{opacity:.4;cursor:not-allowed;transform:none}
.cc{background:#000;color:#fff;padding:4px 8px;font-size:22px;min-height:64px}
.shake{animation:shake .5s}
@keyframes shake{0%,100%{transform:none;filter:none}20%{transform:translate(-8px,3px) skewX(8deg);filter:hue-rotate(90deg) saturate(3)}40%{transform:translate(9px,-2px);filter:invert(.2)}60%{transform:translate(-5px,1px) skewX(-5deg)}80%{transform:translate(3px)}}
.lost{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(0,0,40,.6);pointer-events:none;font-size:64px}
.wobble{animation:wob .25s infinite}
@keyframes wob{0%,100%{transform:translateY(0)}50%{transform:translateY(2px) skewX(.6deg)}}
.rewinding #root{animation:rew 2s linear!important}
@keyframes rew{0%{filter:none}20%{transform:skewX(15deg) translateX(-20px);filter:hue-rotate(120deg)}40%{transform:skewX(-10deg) translateY(10px)}60%{transform:skewX(20deg);filter:invert(1)}100%{transform:none;filter:none}}
.toast{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);z-index:60;background:#000;border:2px solid var(--warn);color:var(--warn);padding:4px 14px;font-size:22px}
.slide-in{animation:slin .4s ease-out}
@keyframes slin{from{transform:translateY(40px);opacity:0}}
.sil{filter:brightness(0) drop-shadow(0 0 4px var(--cy))}
.float{animation:flt 2.5s ease-in-out infinite}
@keyframes flt{50%{transform:translateY(-6px)}}
.hitflash{animation:hf .4s}
@keyframes hf{0%,100%{filter:none}30%{filter:brightness(3) saturate(0)}60%{opacity:.3}}
a{color:var(--cy)}
::-webkit-scrollbar{height:8px}::-webkit-scrollbar-thumb{background:var(--vcr)}