@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Pixelify+Sans:wght@400;600;700&display=swap";*{box-sizing:border-box}:root{--bg-dark:#0a0a0f;--bg-card:#12121e;--bg-card2:#1a1a2e;--neon-green:#00ff41;--neon-yellow:#ffe000;--neon-red:#f33;--neon-blue:#0af;--neon-purple:#a4f;--neon-pink:#f08;--pixel-border:3px solid;--font-pixel:"Press Start 2P", monospace;--font-game:"Pixelify Sans", monospace;--scanline-opacity:.03}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-dark);width:100%;min-height:100vh;color:var(--neon-green);font-family:var(--font-game);font-size:16px;overflow-x:hidden}#root{min-height:100vh;position:relative}#root:before{content:"";background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, var(--scanline-opacity)) 2px, rgba(0, 0, 0, var(--scanline-opacity)) 4px);pointer-events:none;z-index:9999;position:fixed;inset:0}.stars-bg{background:radial-gradient(circle at 20% 30%, #00ff4108 0%, transparent 60%), radial-gradient(circle at 80% 70%, #00aaff08 0%, transparent 60%), var(--bg-dark);z-index:0;position:fixed;inset:0}.pixel-card{background:var(--bg-card);border:3px solid var(--neon-green);image-rendering:pixelated;padding:1.5rem;position:relative;box-shadow:0 0 10px #00ff414d,0 0 30px #00ff411a,inset 0 0 20px #00ff410d}.pixel-card:before{content:"";z-index:-1;background:#00ff4126;position:absolute;inset:4px -4px -4px 4px}.pixel-card.yellow{border-color:var(--neon-yellow);box-shadow:0 0 10px #ffe0004d,0 0 30px #ffe0001a}.pixel-card.yellow:before{background:#ffe00026}.pixel-card.red{border-color:var(--neon-red);box-shadow:0 0 10px #ff33334d,0 0 30px #ff33331a}.pixel-card.red:before{background:#ff333326}.pixel-card.blue{border-color:var(--neon-blue);box-shadow:0 0 10px #00aaff4d,0 0 30px #00aaff1a}.pixel-card.blue:before{background:#00aaff26}.pixel-card.purple{border-color:var(--neon-purple);box-shadow:0 0 10px #aa44ff4d,0 0 30px #aa44ff1a}.title-pixel{font-family:var(--font-pixel);color:var(--neon-green);text-shadow:0 0 10px #00ff41cc,0 0 30px #00ff4166,3px 3px #00641ecc;letter-spacing:.05em;line-height:1.4}.title-pixel.yellow{color:var(--neon-yellow);text-shadow:0 0 10px #ffe000cc,0 0 30px #ffe00066,3px 3px #785a00cc}.title-pixel.red{color:var(--neon-red);text-shadow:0 0 10px #f33c,0 0 30px #f336,3px 3px #780000cc}.btn-pixel{font-family:var(--font-pixel);cursor:pointer;text-transform:uppercase;letter-spacing:.05em;image-rendering:pixelated;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));background:0 0;border:3px solid;padding:.9rem 1.5rem;font-size:.65rem;transition:all .1s;position:relative}.btn-pixel:after{content:"";opacity:.3;width:100%;height:100%;clip-path:inherit;border:3px solid;transition:all .1s;position:absolute;bottom:-5px;right:-5px}.btn-pixel:hover{transform:translate(-2px,-2px);box-shadow:0 0 20px}.btn-pixel:hover:after{opacity:.5;bottom:-7px;right:-7px}.btn-pixel:active{transform:translate(2px,2px)}.btn-pixel:active:after{bottom:-3px;right:-3px}.btn-green{color:var(--neon-green);background:#00ff411a}.btn-green:hover{background:#00ff4133}.btn-yellow{color:var(--neon-yellow);background:#ffe0001a}.btn-yellow:hover{background:#ffe00033}.btn-red{color:var(--neon-red);background:#ff33331a}.btn-blue{color:var(--neon-blue);background:#00aaff1a}.btn-purple{color:var(--neon-purple);background:#aa44ff1a}.input-pixel{font-family:var(--font-pixel);border:2px solid var(--neon-green);color:var(--neon-green);letter-spacing:.1em;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));background:#0009;outline:none;width:100%;padding:.75rem 1rem;font-size:.6rem;transition:box-shadow .2s}.input-pixel:focus{border-color:var(--neon-green);box-shadow:0 0 15px #00ff4180}.input-pixel::placeholder{color:#00ff414d;font-size:.5rem}.badge-pixel{font-family:var(--font-pixel);letter-spacing:.05em;border:2px solid;padding:.25rem .6rem;font-size:.45rem;display:inline-block}.progress-bar-wrap{border:2px solid var(--neon-green);background:#00000080;height:20px;position:relative;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--neon-green), #0f8);height:100%;box-shadow:0 0 10px var(--neon-green);transition:width .5s;position:relative}.progress-bar-fill:after{content:"";background:repeating-linear-gradient(90deg,#0000 0 8px,#0003 8px 10px);position:absolute;inset:0}.timer-display{font-family:var(--font-pixel);color:var(--neon-yellow);text-shadow:0 0 15px #ffe000cc;font-size:1.5rem}.timer-display.danger{color:var(--neon-red);text-shadow:0 0 15px #f33c;animation:.5s step-end infinite blink-danger}@keyframes blink-danger{50%{opacity:.3}}.answer-option{font-family:var(--font-game);color:#e0ffe0;cursor:pointer;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));background:#00ff410d;border:3px solid #00ff4166;align-items:center;gap:.75rem;padding:1rem 1.25rem;font-size:1rem;font-weight:600;transition:all .15s;display:flex}.answer-option:hover:not(:disabled){border-color:var(--neon-green);background:#00ff4126;transform:translate(4px);box-shadow:0 0 15px #00ff414d}.answer-option:disabled{cursor:not-allowed}.answer-option.selected-correct{border-color:var(--neon-green);background:#00ff4140;box-shadow:0 0 20px #00ff4180}.answer-option.selected-wrong{border-color:var(--neon-red);background:#f333;box-shadow:0 0 20px #ff333380}.answer-option.reveal-correct{border-color:var(--neon-green);background:#00ff411a}.answer-key{font-family:var(--font-pixel);background:#00000080;border:2px solid;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:.6rem;display:flex}.race-track{border:3px solid var(--neon-green);background:#0a1400;padding:1rem;position:relative;overflow:hidden;box-shadow:0 0 30px #00ff4133}.track-lane{border-bottom:1px dashed #00ff4126;align-items:center;gap:.5rem;padding:.3rem 0;display:flex;position:relative}.track-lane:last-child{border-bottom:none}.track-road{background:repeating-linear-gradient(90deg,#1a2a0a 0 40px,#141f08 40px 80px);border:1px solid #00ff411a;flex:1;height:28px;position:relative;overflow:hidden}.track-finish-line{opacity:.6;z-index:2;background:repeating-linear-gradient(0deg,#fff 0 5px,#000 5px 10px);width:20px;position:absolute;top:0;bottom:0;right:0}.pixel-car{filter:drop-shadow(0 0 6px);z-index:3;font-size:1.4rem;line-height:1;transition:left .6s cubic-bezier(.25,.46,.45,.94);position:absolute;top:50%;transform:translateY(-50%)}.player-name-label{font-family:var(--font-pixel);white-space:nowrap;text-overflow:ellipsis;flex-shrink:0;width:80px;font-size:.4rem;overflow:hidden}.scoreboard-row{font-family:var(--font-pixel);border-bottom:1px dashed #00ff411a;align-items:center;gap:.75rem;padding:.5rem;font-size:.5rem;display:flex}.rank-badge{width:24px;height:24px;font-family:var(--font-pixel);border:2px solid;flex-shrink:0;justify-content:center;align-items:center;font-size:.5rem;display:flex}.avatar-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem;display:grid}.avatar-card{border:2px solid var(--neon-green);text-align:center;background:#0006;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem;display:flex}@keyframes glitch{0%,to{text-shadow:0 0 10px var(--neon-green), 0 0 30px var(--neon-green);transform:none}20%{text-shadow:-2px 0 var(--neon-red), 2px 0 var(--neon-blue);transform:translate(2px)}40%{text-shadow:2px 0 var(--neon-red), -2px 0 var(--neon-blue);transform:translate(-2px)}60%{text-shadow:0 0 10px var(--neon-green);transform:none}}.glitch{animation:4s step-end infinite glitch}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.blink{animation:1s step-end infinite blink}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.float{animation:3s ease-in-out infinite float}@keyframes pixel-pulse{0%,to{box-shadow:0 0 10px #00ff414d,0 0 30px #00ff411a}50%{box-shadow:0 0 20px #00ff4199,0 0 50px #00ff414d}}.pixel-pulse{animation:2s ease-in-out infinite pixel-pulse}@keyframes marquee{0%{transform:translate(100%)}to{transform:translate(-100%)}}.marquee-wrap{border-top:2px solid var(--neon-green);border-bottom:2px solid var(--neon-green);background:#00ff410d;padding:.5rem 0;overflow:hidden}.marquee-text{white-space:nowrap;font-family:var(--font-pixel);color:var(--neon-green);font-size:.5rem;animation:20s linear infinite marquee}.text-green{color:var(--neon-green)}.text-yellow{color:var(--neon-yellow)}.text-red{color:var(--neon-red)}.text-blue{color:var(--neon-blue)}.text-purple{color:var(--neon-purple)}.text-pink{color:var(--neon-pink)}.text-center{text-align:center}.text-pixel{font-family:var(--font-pixel)}.text-game{font-family:var(--font-game)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}.w-full{width:100%}.h-full{height:100%}.relative{position:relative}.absolute{position:absolute}.z-10{z-index:10}.page-container{z-index:1;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:2rem 1rem;display:flex;position:relative}.content-box{flex-direction:column;gap:1.5rem;width:100%;max-width:480px;display:flex}@media (width<=640px){.title-pixel{font-size:.8rem!important}.btn-pixel{padding:.75rem 1.1rem;font-size:.55rem}.input-pixel{font-size:.55rem}.player-name-label{width:60px}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--neon-green)}::-webkit-scrollbar-thumb:hover{background:#0c3}.podium-wrap{justify-content:center;align-items:flex-end;gap:1rem;display:flex}.podium-block{flex-direction:column;align-items:center;gap:.5rem;display:flex}.podium-stand{border:2px solid var(--neon-green);width:100px;font-family:var(--font-pixel);background:linear-gradient(#00ff414d,#00ff411a);justify-content:center;align-items:center;font-size:1.5rem;display:flex}@keyframes coin-spin{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}.coin{animation:1s linear infinite coin-spin;display:inline-block}