@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323:wght@400&display=swap";:root{--bg:#0a0a0a;--surface:#111;--border:#333;--text:#f0e6d3;--dim:#666;--neon-pink:#ff4081;--neon-blue:#00e5ff;--neon-yellow:#ffea00}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:"Press Start 2P",monospace;overflow-x:hidden}.scanlines{pointer-events:none;z-index:100;background:repeating-linear-gradient(0deg,#0000,#0000 3px,#0000000d 3px 4px);position:fixed;inset:0}.noise{opacity:.03;pointer-events:none;z-index:99;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");position:fixed;inset:0}.app{max-width:1200px;margin:0 auto;padding:2rem}.header{text-align:center;padding:3rem 0 2rem}.logo{color:var(--neon-yellow);text-shadow:0 0 10px var(--neon-yellow), 0 0 30px var(--neon-yellow), 0 0 60px #ff6d00;letter-spacing:.1em;margin-bottom:1.5rem;font-size:clamp(1.5rem,5vw,3rem);animation:8s infinite flicker;display:inline-block;position:relative}.logo.glitch{animation:.15s steps(2,end) forwards glitch-anim}@keyframes flicker{0%,95%,to{opacity:1}96%{opacity:.4}97%{opacity:1}98%{opacity:.2}99%{opacity:1}}@keyframes glitch-anim{0%{clip-path:inset(0 0 80%);color:var(--neon-pink);transform:translate(0)}25%{clip-path:inset(20% 0 50%);transform:translate(-4px,2px)}50%{clip-path:inset(50% 0 20%);color:var(--neon-blue);transform:translate(4px,-2px)}75%{clip-path:inset(80% 0 0%);transform:translate(-2px)}to{clip-path:inset(0);color:var(--neon-yellow);transform:translate(0)}}.tagline{color:var(--text);opacity:.9;margin-bottom:.5rem;font-family:VT323,monospace;font-size:clamp(1.2rem,3vw,1.8rem)}.tagline-sub{color:var(--dim);margin-bottom:2rem;font-family:VT323,monospace;font-size:clamp(1rem,2.5vw,1.5rem)}.rr{color:var(--neon-pink);text-shadow:0 0 8px var(--neon-pink)}.high-score{border:1px solid var(--neon-pink);align-items:center;gap:1rem;padding:.75rem 1.5rem;display:inline-flex;box-shadow:0 0 15px #ff40814d,inset 0 0 15px #ff40810d}.hs-label{color:var(--neon-pink);letter-spacing:.15em;font-size:.5rem}.hs-count{color:var(--neon-yellow);text-shadow:0 0 10px var(--neon-yellow);text-align:center;min-width:80px;font-family:VT323,monospace;font-size:clamp(1rem,3vw,1.5rem)}.game-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2rem;padding:3rem 0;display:grid}.cassette-wrap{cursor:pointer;transition:transform .2s;position:relative}.cassette-wrap:hover{transform:translateY(-8px)rotate(-1deg)}.cassette-wrap:hover .play-hint{opacity:1}.play-hint{text-align:center;color:var(--accent);opacity:0;text-shadow:0 0 8px var(--accent);letter-spacing:.2em;margin-top:.75rem;font-size:.4rem;transition:opacity .2s}.cassette{aspect-ratio:3/2;background:#1a1a1a;border:2px solid #2a2a2a;border-radius:6px 6px 12px 12px;flex-direction:column;padding:.75rem;display:flex;position:relative;box-shadow:0 4px 20px #000c,0 0 0 1px #333,inset 0 1px #ffffff0d}.cassette-body{flex-direction:column;flex:1;gap:.4rem;display:flex}.cassette-top-strip{background:linear-gradient(90deg,#333,#555,#333);border-radius:2px;height:4px}.cassette-bottom-strip{background:linear-gradient(90deg,#333,#555,#333);border-radius:2px;height:4px;margin-top:auto}.cassette-window{background:#0d0d0d;border:1px solid #333;border-radius:4px;justify-content:center;align-items:center;gap:.5rem;height:50px;padding:.5rem;display:flex}.reel{background:radial-gradient(circle at 40% 40%,#333,#111);border:2px solid #444;border-radius:50%;width:28px;height:28px;position:relative;box-shadow:inset 0 0 8px #000c}.reel:after{content:"";border:1px solid #555;border-radius:50%;position:absolute;inset:4px}.reel-center{background:#222;border:1px solid #444;border-radius:2px;width:40px;height:6px}.cassette-label{background:linear-gradient(135deg,#f5f0e8,#e8dfd0);border-radius:3px;flex-direction:column;flex:1;gap:.2rem;padding:.5rem .6rem;display:flex;position:relative;overflow:hidden}.cassette-label:before{content:"";background:var(--accent);height:3px;position:absolute;top:0;left:0;right:0}.label-side{color:#999;letter-spacing:.2em;font-size:.3rem}.label-title{color:#0a0a0a;letter-spacing:.05em;font-size:clamp(.5rem,1.8vw,.7rem);font-weight:700;line-height:1.4}.label-subtitle{color:#777;font-family:VT323,monospace;font-size:1.1rem;font-style:italic}.label-year{color:#aaa;letter-spacing:.1em;margin-top:auto;font-size:.28rem}.label-bar{background:var(--accent);opacity:.6;height:3px;position:absolute;bottom:0;left:0;right:0}.cassette-shine{pointer-events:none;background:linear-gradient(#ffffff08,#0000);border-radius:6px 6px 0 0;height:40%;position:absolute;top:0;left:0;right:0}.footer{text-align:center;color:var(--dim);letter-spacing:.3em;padding:2rem 0 3rem;font-size:.4rem}.insert-coin{color:var(--neon-yellow);margin-top:1rem;font-size:1rem;animation:1s step-end infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.game-page{background:var(--bg);flex-direction:column;align-items:center;min-height:100vh;padding:2rem;display:flex;position:relative}.back-btn{border:1px solid var(--dim);color:var(--dim);cursor:pointer;letter-spacing:.1em;background:0 0;padding:.5rem 1rem;font-family:"Press Start 2P",monospace;font-size:.4rem;transition:all .2s;position:absolute;top:1.5rem;left:1.5rem}.back-btn:hover{border-color:var(--text);color:var(--text)}.game-header{text-align:center;margin-bottom:2rem}.game-title{color:var(--neon-yellow);text-shadow:0 0 20px var(--neon-yellow);margin-bottom:.5rem;font-size:clamp(1rem,4vw,2rem)}.game-subtitle{color:var(--dim);margin-bottom:1rem;font-family:VT323,monospace;font-size:1.2rem;font-style:italic}.turn-indicator{letter-spacing:.2em;padding:.5rem 1.5rem;font-size:.5rem}.turn-indicator.red{color:#ff3d00;border:1px solid #ff3d00;box-shadow:0 0 10px #ff3d004d}.turn-indicator.yellow{color:var(--neon-yellow);border:1px solid var(--neon-yellow);box-shadow:0 0 10px #ffea004d}.board-wrap{margin:1rem 0}.board{background:#1a3a6b;border:3px solid #2a5ab8;border-radius:8px;gap:6px;padding:12px;display:flex;box-shadow:0 0 30px #0064ff4d,0 8px 32px #000c}.col-hover{cursor:pointer;border-radius:4px;flex-direction:column;gap:6px;padding:4px;transition:background .15s;display:flex}.col-hover:hover{background:#ffffff0d}.col-hover:hover .drop-arrow{opacity:1}.drop-arrow{text-align:center;color:#fff;opacity:0;height:12px;font-size:.6rem;line-height:12px;transition:opacity .15s}.cell{border-radius:50%;width:52px;height:52px;transition:background .1s}.cell.empty{background:#0a1628;box-shadow:inset 0 2px 8px #000c}.cell.red{background:radial-gradient(circle at 35% 35%,#ff6b4a,#c20);box-shadow:0 0 12px #ff3d0099,inset 0 -2px 4px #0000004d}.cell.yellow{background:radial-gradient(circle at 35% 35%,#ffe94a,#cca800);box-shadow:0 0 12px #ffea0099,inset 0 -2px 4px #0000004d}.reset-btn{border:1px solid var(--dim);color:var(--dim);cursor:pointer;letter-spacing:.15em;background:0 0;margin-top:1.5rem;padding:.75rem 1.5rem;font-family:"Press Start 2P",monospace;font-size:.4rem;transition:all .2s}.reset-btn:hover{border-color:var(--neon-yellow);color:var(--neon-yellow)}.glitch-screen{z-index:999;background:#000;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.glitch-text{color:#fff;font-family:"Press Start 2P",monospace;font-size:clamp(1.5rem,6vw,3rem);animation:.1s infinite glitch-flicker;position:relative}.glitch-bar{background:#fff;width:60%;height:4px;margin-top:2rem;animation:.15s infinite glitch-bar-anim}@keyframes glitch-flicker{0%,to{opacity:1;color:#fff;transform:translate(0)}25%{opacity:.8;color:#ff4081;transform:translate(-4px,2px)}50%{opacity:.6;color:#00e5ff;transform:translate(4px,-2px)}75%{opacity:.9;color:#fff;transform:translate(-2px,1px)}}@keyframes glitch-bar-anim{0%,to{opacity:1;transform:scaleX(1)}50%{opacity:.5;transform:scaleX(.3)}}.rickroll-screen{z-index:999;background:#000;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:1rem;display:flex;position:fixed;inset:0}.psyche{color:var(--neon-pink);text-shadow:0 0 20px var(--neon-pink);font-family:"Press Start 2P",monospace;font-size:clamp(1.5rem,6vw,3rem);animation:.5s ease-out psyche-pop}@keyframes psyche-pop{0%{opacity:0;transform:scale(0)}70%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.yt-wrap{aspect-ratio:16/9;border:3px solid var(--neon-pink);width:min(560px,90vw);box-shadow:0 0 40px #ff408180}.rr-msg{color:var(--text);text-align:center;font-family:VT323,monospace;font-size:1.3rem}.rr-actions{flex-direction:column;align-items:center;gap:.75rem;display:flex}.rr-btn{cursor:pointer;letter-spacing:.1em;border:none;padding:.75rem 1.5rem;font-family:"Press Start 2P",monospace;font-size:.4rem;transition:all .2s}.rr-btn.share{background:var(--neon-pink);color:#000}.rr-btn.share:hover{background:#fff}.rr-btn.back{border:1px solid var(--dim);color:var(--dim);background:0 0}.rr-btn.back:hover{border-color:var(--text);color:var(--text)}@media (width<=600px){.game-grid{grid-template-columns:repeat(2,1fr);gap:1rem}.app{padding:1rem}.cell{width:36px;height:36px}.board{gap:4px;padding:8px}.col-hover{gap:4px;padding:2px}.game-page{padding:1rem 1.5rem}}