*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a0a;--text: #33ff33;--text-dim: #1a8a1a;--accent-red: #ff0044;--accent-gold: #ffd700;--accent-pink: #ff00aa;--crt-glow: rgba(51, 255, 51, .3);--font: "Press Start 2P", monospace}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);font-size:12px;line-height:1.6;-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset}.crt{width:100%;height:100%;position:relative}.crt:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(transparent 0px,transparent 2px,rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 4px);pointer-events:none;z-index:9999}.screen{display:none;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:16px;gap:16px;position:absolute;top:0;right:0;bottom:0;left:0}.screen.active{display:flex}.title-area{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.title-preview{position:relative;cursor:pointer}.title-preview canvas{width:min(384px,40vw);height:min(384px,40vw);image-rendering:pixelated;image-rendering:crisp-edges;border:3px solid var(--text);box-shadow:0 0 15px var(--crt-glow);display:block}.title-caption{font-size:8px;color:var(--text-dim);text-align:center;margin-top:6px;animation:captionBlink 1.5s step-end infinite}@keyframes captionBlink{0%,to{opacity:1}50%{opacity:.3}}h1{font-size:clamp(24px,7vw,48px);color:var(--accent-gold);text-shadow:0 0 10px var(--accent-gold),0 0 30px rgba(255,215,0,.5),4px 4px 0 #aa8800;letter-spacing:2px;animation:titlePulse 2s ease-in-out infinite}@keyframes titlePulse{0%,to{text-shadow:0 0 10px var(--accent-gold),0 0 30px rgba(255,215,0,.5),4px 4px 0 #aa8800}50%{text-shadow:0 0 20px var(--accent-gold),0 0 60px rgba(255,215,0,.8),4px 4px 0 #aa8800}}.glitch{position:relative}.glitch:before,.glitch:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.glitch:before{color:var(--accent-red);z-index:-1;animation:glitch1 3s infinite}.glitch:after{color:var(--accent-pink);z-index:-2;animation:glitch2 3s infinite}@keyframes glitch1{0%,90%,to{clip-path:inset(0 0 0 0);transform:translate(0)}92%{clip-path:inset(20% 0 40% 0);transform:translate(-4px,2px)}94%{clip-path:inset(60% 0 10% 0);transform:translate(4px,-2px)}96%{clip-path:inset(0 0 0 0);transform:translate(0)}}@keyframes glitch2{0%,88%,to{clip-path:inset(0 0 0 0);transform:translate(0)}90%{clip-path:inset(30% 0 30% 0);transform:translate(3px,-1px)}93%{clip-path:inset(10% 0 60% 0);transform:translate(-3px,1px)}95%{clip-path:inset(0 0 0 0);transform:translate(0)}}.subtitle{font-size:clamp(8px,2vw,12px);color:var(--text);text-shadow:0 0 8px var(--crt-glow);text-align:center}.category-progress{display:flex;gap:12px;font-size:20px;padding:8px 0}.progress-dot{opacity:.3;filter:grayscale(1);transition:all .3s}.progress-dot.complete{opacity:.7;filter:grayscale(0)}.progress-dot.current{opacity:1;filter:grayscale(0);animation:currentCategoryPulse 1.5s ease-in-out infinite}@keyframes currentCategoryPulse{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}.menu-buttons{display:flex;flex-direction:column;gap:12px;width:100%;max-width:400px}.btn{font-family:var(--font);border:3px solid;cursor:pointer;text-transform:uppercase;transition:all .1s;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}.btn:active{transform:scale(.95)}.btn-big{padding:16px 24px;font-size:clamp(10px,2.5vw,14px);width:100%;line-height:1.8}.btn-huge{padding:20px 16px;font-size:clamp(14px,4vw,24px);flex:1;min-height:80px}.btn-small{padding:10px 20px;font-size:10px;width:100%}.btn-sub{font-size:8px;opacity:.7}.btn-green{background:#030;color:var(--text);border-color:var(--text);box-shadow:0 0 10px var(--crt-glow),inset 0 0 10px #33ff331a}.btn-green:hover{background:#040;box-shadow:0 0 20px var(--crt-glow),inset 0 0 20px #3f33}.btn-red{background:#300;color:var(--accent-red);border-color:var(--accent-red);box-shadow:0 0 10px #ff00444d,inset 0 0 10px #ff00441a}.btn-red:hover{background:#400;box-shadow:0 0 20px #ff004480,inset 0 0 20px #f043}.btn-gold{background:#332800;color:var(--accent-gold);border-color:var(--accent-gold);box-shadow:0 0 10px #ffd7004d,inset 0 0 10px #ffd7001a}.btn-gold:hover{background:#443500;box-shadow:0 0 20px #ffd70080,inset 0 0 20px #ffd70033}.footer-text{font-size:7px;color:var(--text-dim);text-align:center;position:absolute;bottom:12px}.game-hud{display:flex;justify-content:space-between;width:100%;max-width:768px;font-size:9px;padding:4px 0}.hud-left,.hud-right{display:flex;flex-direction:column;gap:4px}.hud-right{text-align:right}.hud-category{font-size:10px;font-weight:700}#hud-streak{color:var(--accent-gold);animation:streakPulse .5s ease-in-out infinite}@keyframes streakPulse{0%,to{opacity:1}50%{opacity:.6}}.game-image-container{position:relative;width:min(768px,90vw);height:min(768px,90vw);border:3px solid var(--text);box-shadow:0 0 15px var(--crt-glow),inset 0 0 30px #00000080;background:#000;flex-shrink:0}#game-canvas,#reveal-canvas{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.timer-bar-container{position:relative;width:100%;max-width:768px;height:36px;background:#0009;border:2px solid var(--text);box-shadow:0 0 8px var(--crt-glow)}.timer-bar-container.danger{border-color:var(--accent-red);box-shadow:0 0 12px #ff004480}.timer-bar{position:absolute;top:0;left:0;height:100%;background:var(--text);box-shadow:0 0 10px var(--crt-glow);transition:width .1s linear;width:100%}.timer-bar.danger{background:var(--accent-red);box-shadow:0 0 12px #ff004480}.timer-countdown{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:"Press Start 2P",monospace;font-size:1rem;color:var(--text);z-index:2;pointer-events:none;mix-blend-mode:difference}.timer-countdown.danger{color:#fff;mix-blend-mode:normal;animation:timer-pulse .4s ease-in-out infinite}@keyframes timer-pulse{0%,to{opacity:1}50%{opacity:.5}}.game-buttons{display:flex;gap:12px;width:100%;max-width:768px}.reveal-verdict{font-size:clamp(18px,5vw,32px);font-weight:700;padding:8px 16px}.reveal-verdict.correct{color:var(--accent-gold);text-shadow:0 0 20px rgba(255,215,0,.8);animation:correctBounce .5s ease}.reveal-verdict.wrong{color:var(--accent-red);text-shadow:0 0 20px rgba(255,0,68,.8);animation:screenShake .4s ease}@keyframes correctBounce{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@keyframes screenShake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(4px)}}.reveal-info{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:768px;width:100%}.reveal-name{font-size:clamp(10px,2.5vw,14px);color:var(--accent-gold)}.reveal-text{font-size:clamp(7px,1.8vw,10px);color:var(--text);text-align:center;max-width:400px;line-height:1.8}.reveal-points{font-size:10px;color:var(--accent-gold)}.transition-content{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;max-width:500px}.transition-old-text{font-size:clamp(10px,2.5vw,14px);color:var(--text-dim);line-height:1.8;animation:fadeSlideIn .8s ease}.transition-emoji{font-size:clamp(60px,15vw,120px);animation:transitionPop .6s ease .5s both}.transition-new-text{font-size:clamp(14px,3.5vw,24px);color:var(--accent-gold);text-shadow:0 0 15px rgba(255,215,0,.6);line-height:1.8;animation:fadeSlideIn .8s ease 1s both}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes transitionPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.3)}to{transform:scale(1);opacity:1}}.result-title{font-size:clamp(12px,3vw,20px);color:var(--accent-gold);text-shadow:0 0 15px rgba(255,215,0,.6);text-align:center}.result-emoji-row{font-size:clamp(20px,6vw,36px);letter-spacing:8px;padding:8px;font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif}.result-score{font-size:clamp(10px,2.5vw,16px);color:var(--text)}.result-rank{font-size:clamp(8px,2vw,11px);color:var(--accent-gold);text-align:center;max-width:380px;line-height:1.8}.result-stats{font-size:9px;color:var(--text-dim);text-align:center;line-height:2}.stats-title{font-size:clamp(12px,3vw,18px);color:var(--accent-gold);text-shadow:0 0 10px rgba(255,215,0,.5)}.stats-body{font-size:10px;line-height:2.5;text-align:center;color:var(--text)}.stats-body .stat-value{color:var(--accent-gold)}.share-toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#030;border:2px solid var(--text);padding:12px 20px;font-family:var(--font);font-size:8px;color:var(--text);box-shadow:0 0 20px var(--crt-glow);z-index:100;animation:toastIn .3s ease}@keyframes toastIn{0%{transform:translate(-50%) translateY(20px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.hidden{display:none!important}#confetti-canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.flash-correct{animation:flashGold .3s ease}.flash-wrong{animation:flashRed .3s ease}@keyframes flashGold{0%{background:#ffd7004d}to{background:transparent}}@keyframes flashRed{0%{background:#ff00444d}to{background:transparent}}.leaderboard-tabs{display:flex;gap:8px;justify-content:center}.leaderboard-tabs .btn-small{opacity:.5}.leaderboard-tabs .btn-small.btn-gold{opacity:1}.leaderboard-body{width:100%;max-width:500px;display:flex;flex-direction:column;gap:0}.lb-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid rgba(0,255,65,.15)}.lb-row:first-child{border-top:1px solid rgba(0,255,65,.15)}.lb-rank{font-size:clamp(8px,2vw,12px);color:var(--accent-gold);min-width:2.5em;text-align:right}.lb-row:nth-child(1) .lb-rank{color:gold}.lb-row:nth-child(2) .lb-rank{color:silver}.lb-row:nth-child(3) .lb-rank{color:#cd7f32}.lb-name{font-size:clamp(7px,1.8vw,10px);color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-score{font-size:clamp(7px,1.8vw,10px);color:var(--accent-gold);min-width:4em;text-align:right}.lb-details{font-size:clamp(6px,1.5vw,8px);color:#00ff4180;min-width:6em;text-align:right}.lb-empty{font-size:clamp(8px,2vw,11px);color:var(--text);text-align:center;padding:24px;line-height:2}.login-form{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:400px}.login-prompt{font-size:clamp(8px,2vw,12px);color:var(--text);text-align:center;line-height:2}.login-input{font-family:"Press Start 2P",monospace;font-size:clamp(8px,2vw,11px);color:var(--text);background:#0009;border:2px solid var(--text);box-shadow:0 0 8px var(--crt-glow);padding:12px 16px;width:100%;outline:none}.login-input:focus{border-color:var(--accent-gold);box-shadow:0 0 12px #ffd70066}.login-input::placeholder{color:#00ff414d}.login-status{font-size:clamp(7px,1.8vw,10px);color:var(--accent-gold);text-align:center;min-height:1.5em}.user-greeting{font-size:clamp(7px,1.8vw,10px);color:var(--accent-gold)}.alert-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000}.alert-overlay.hidden{display:none}.alert-box{border:3px solid var(--text);box-shadow:0 0 20px var(--crt-glow),inset 0 0 30px #00000080;background:var(--bg);padding:32px;max-width:500px;width:90%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}.alert-text{font-size:clamp(10px,2.5vw,14px);color:var(--text);line-height:2;white-space:pre-line}@media(max-height:700px){.game-image-container{width:min(384px,70vw);height:min(384px,70vw)}.game-buttons,.game-hud{max-width:384px}}@media(max-height:600px){h1{font-size:24px}.btn-big{padding:10px 16px}.btn-huge{padding:12px;min-height:60px}.game-image-container{width:min(256px,70vw);height:min(256px,70vw)}.title-preview canvas{width:min(192px,30vw);height:min(192px,30vw)}.transition-emoji{font-size:clamp(40px,10vw,80px)}}@media(max-height:500px){.footer-text,.category-progress{display:none}}
