@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap";:root{--bg-color: #050505;--bg-gradient: radial-gradient(circle at 50% 50%, #151515 0%, #050505 80%);--panel-bg: rgba(15, 15, 15, .7);--border-color: rgba(255, 255, 255, .15);--text-primary: #FFFFFF;--text-secondary: rgba(255, 255, 255, .5);--accent-color: #FFFFFF;--accent-glow: rgba(255, 255, 255, .3);--accent-secondary: #AAAAAA;--error: #ff3333;--success: #33ff33;--font-family: "Press Start 2P", monospace;--font-body: "Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-color);background-image:var(--bg-gradient);background-attachment:fixed;color:var(--text-primary);font-family:var(--font-body);display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:hidden}#app{width:100%;max-width:1200px;height:100vh;position:relative;z-index:2;transition:transform .1s ease-out,box-shadow .1s ease-out}.screen{position:absolute;top:0;left:0;width:100%;height:100%;padding:2rem;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .5s ease}.screen.active{opacity:1;pointer-events:all;animation:crtOn .5s ease-out}#screen-intro{background:#000;z-index:100}#flash-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#fff;opacity:0;pointer-events:none;z-index:10000}.flash-active{animation:flashBang 2s ease-out forwards}@keyframes flashBang{0%{opacity:0}5%{opacity:1}20%{opacity:1}to{opacity:0}}@keyframes crtOn{0%{transform:scaleY(.01) scaleX(0);opacity:0}50%{transform:scaleY(.01) scaleX(1);opacity:1}to{transform:scaleY(1) scaleX(1)}}h1,h2,h3,h4,h5,h6,.logo,.btn,.score,.game-status,#display-room-code,#correct-answer,.host-badge,#numeric-countdown{font-family:var(--font-family);text-transform:uppercase}.logo{font-size:1rem;font-weight:900;letter-spacing:4px;color:var(--text-secondary);margin-bottom:2rem;text-align:center}.logo.small{margin-bottom:0;text-align:left}h1{font-size:1.8rem;font-weight:400;text-align:center;margin-bottom:3rem;line-height:1.5;text-shadow:0 0 20px var(--accent-glow);animation:textGlitch 4s infinite alternate}h2{font-size:1.2rem;font-weight:400;margin-bottom:1.5rem;line-height:1.5;text-align:center;color:var(--text-primary);text-shadow:0 0 10px rgba(255,255,255,.5)}.card{width:100%;max-width:500px;background:var(--panel-bg);border:1px solid var(--border-color);border-top:1px solid rgba(255,255,255,.2);border-radius:16px;padding:2.5rem;box-shadow:0 20px 50px #000c,inset 0 1px #ffffff0d;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}input[type=text],select{width:100%;padding:1rem;background:#0006;border:1px solid var(--border-color);color:var(--text-primary);border-radius:8px;font-size:1rem;font-family:var(--font-body);font-weight:500;margin-bottom:1.5rem;transition:all .2s;outline:none;text-align:center;letter-spacing:1px}input[type=text]:focus,select:focus{border-color:var(--accent-color);box-shadow:0 0 15px var(--accent-glow);background:#000}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}.btn{width:100%;padding:1rem;border:none;font-size:.8rem;cursor:pointer;transition:all .2s cubic-bezier(.25,.8,.25,1);font-family:var(--font-family);text-transform:uppercase;letter-spacing:2px;border-radius:8px}.btn.primary{background:linear-gradient(135deg,#ffffff1a,#ffffff0d);color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:0 10px 20px #00000080,inset 0 1px #ffffff4d;text-shadow:0 2px 4px rgba(0,0,0,.5)}.btn.primary:hover{background:#fff;color:#000;box-shadow:0 0 20px var(--accent-glow);transform:translateY(-2px) scale(1.02);text-shadow:none}.btn.secondary{background:#ffffff0d;color:var(--text-primary);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn.secondary:hover{background:#ffffff26;color:#fff;border-color:#fff6;box-shadow:0 0 15px #ffffff1a}.actions{display:flex;flex-direction:column;gap:1rem}.divider{display:flex;align-items:center;text-align:center;color:var(--text-secondary);font-size:.8rem;margin:1rem 0;letter-spacing:2px}.divider:before,.divider:after{content:"";flex:1;border-bottom:1px solid var(--border-color)}.divider span{padding:0 1rem}.join-action{display:flex;gap:.5rem}.join-action input{margin-bottom:0;text-transform:uppercase}.content{width:100%;display:flex;flex-direction:column;background:var(--panel-bg);border:1px solid var(--border-color);border-top:1px solid rgba(255,255,255,.15);border-radius:12px;padding:2rem;box-shadow:0 10px 40px #000c,inset 0 1px #ffffff0d;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);position:relative;z-index:10}.header{width:100%;display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:1px solid var(--border-color);margin-bottom:2rem}.header>*{flex:1}.header>.logo{text-align:left}.header>.actions{flex-direction:row;justify-content:flex-end;gap:.5rem}.header>.actions .btn{width:auto;padding:.8rem 1.2rem}.game-status{text-align:center;font-size:1.2rem;letter-spacing:2px;text-shadow:0 0 10px var(--accent-glow);white-space:nowrap}.room-info{font-size:.9rem;color:var(--text-secondary);letter-spacing:1px}.room-info strong{color:var(--text-primary);font-size:1.2rem;letter-spacing:2px;text-shadow:0 0 10px var(--accent-glow)}.player-list{list-style:none;margin-bottom:2rem;width:100%}.player-list li{background:#ffffff05;padding:.8rem 1.2rem;margin-bottom:.8rem;display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(255,255,255,.1);border-radius:8px}.player-list li .host-badge{font-size:.6rem;background:var(--text-primary);color:var(--bg-color);padding:.2rem .5rem;font-weight:700;letter-spacing:1px}.player-list li .score{font-weight:700;color:var(--text-primary);text-shadow:0 0 5px var(--text-primary)}.hint{text-align:center;color:var(--text-secondary);font-size:.9rem;margin-top:1rem;letter-spacing:1px}#host-controls,#guest-controls{width:100%}.hidden{display:none!important}.game-phase{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;width:100%}.game-phase.active{display:flex;animation:glitchIn .3s cubic-bezier(.25,.46,.45,.94) both}@keyframes glitchIn{0%{transform:translate(0);opacity:0;filter:contrast(200%)}20%{transform:translate(-5px,5px);opacity:.5;filter:contrast(150%)}40%{transform:translate(-5px,-5px);opacity:1;filter:contrast(100%)}60%{transform:translate(5px,5px)}80%{transform:translate(5px,-5px)}to{transform:translate(0)}}#numeric-countdown{font-size:4rem;margin:2rem 0;color:var(--text-primary);text-shadow:0 0 20px var(--accent-glow);transition:color .2s,transform .1s}#numeric-countdown.urgent{color:var(--error);animation:pulseUrgent .5s infinite alternate}@keyframes pulseUrgent{0%{transform:scale(1);text-shadow:0 0 20px rgba(255,0,60,.5)}to{transform:scale(1.1);text-shadow:0 0 40px rgba(255,0,60,1)}}.waveform{display:flex;align-items:center;gap:8px;height:80px;margin:3rem 0}.waveform span{display:block;width:4px;background-color:var(--text-primary);animation:wave .8s infinite ease-in-out;box-shadow:0 0 10px #fff6}.waveform span:nth-child(2){animation-delay:.1s}.waveform span:nth-child(3){animation-delay:.2s}.waveform span:nth-child(4){animation-delay:.3s}.waveform span:nth-child(5){animation-delay:.4s}@keyframes wave{0%,to{height:10px}50%{height:80px}}.guess-form{width:100%;max-width:600px;display:flex;flex-direction:row;gap:1rem;margin:0 auto}.guess-form input{margin-bottom:0!important;flex:2;min-width:0}.guess-form button{flex:1;padding:1rem 1.5rem;min-width:fit-content}#guess-feedback{margin-top:1rem;font-weight:500;height:24px;letter-spacing:1px}.mt-4{margin-top:2rem}.category-selection{margin-bottom:1.5rem;text-align:left}.category-selection label{display:block;font-size:.875rem;color:var(--text-secondary);margin-bottom:.5rem;letter-spacing:1px}#crt-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9999;background:linear-gradient(#12101000 50%,#0000001a 50%),url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");background-size:100% 4px,150px 150px;opacity:.15;animation:noiseJitter .2s infinite}@keyframes noiseJitter{0%{transform:translate(0)}10%{transform:translate(-1px,-1px)}20%{transform:translate(1px,1px)}30%{transform:translate(-2px)}40%{transform:translate(2px)}50%{transform:translateY(-2px)}60%{transform:translateY(2px)}70%{transform:translate(-1px,1px)}80%{transform:translate(1px,-1px)}90%{transform:translate(1px,2px)}to{transform:translate(0)}}.shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translate3d(-4px,0,0)}20%,80%{transform:translate3d(6px,0,0)}30%,50%,70%{transform:translate3d(-10px,0,0)}40%,60%{transform:translate3d(10px,0,0)}}#skull-container{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.skull-particle{position:absolute;font-size:2rem;color:#ffffff0d;pointer-events:none;animation:floatUp linear infinite;z-index:1}@keyframes floatUp{0%{transform:translateY(110vh) scale(.5) rotate(-30deg);opacity:0;filter:blur(5px)}20%{opacity:1;filter:blur(0px);transform:translateY(80vh) scale(1) rotate(-10deg)}80%{opacity:1;filter:blur(0px);transform:translateY(20vh) scale(1) rotate(10deg)}to{transform:translateY(-20vh) scale(1.5) rotate(30deg);opacity:0;filter:blur(10px)}}.pop{animation:flashSuccess .5s ease-out both}@keyframes flashSuccess{0%{box-shadow:0 0 #000;filter:invert(0)}20%{box-shadow:0 0 100px var(--success);filter:invert(1)}to{box-shadow:0 0 0 transparent;filter:invert(0)}}@keyframes textGlitch{0%{text-shadow:2px 0 0 var(--text-secondary),-2px 0 0 var(--text-secondary)}2%{text-shadow:-2px 0 0 var(--error),2px 0 0 var(--success)}4%{text-shadow:2px 0 0 var(--text-secondary),-2px 0 0 var(--text-secondary)}to{text-shadow:0 0 20px var(--accent-glow)}}#speakers-container{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0;perspective:1000px;display:flex;justify-content:space-between;align-items:center;padding:0 5vw}.speaker{width:150px;height:300px;transform-style:preserve-3d;transition:transform .1s ease-out}.speaker.left{transform:rotateY(30deg)}.speaker.right{transform:rotateY(-30deg)}.cabinet{width:100%;height:100%;background:linear-gradient(135deg,#1e1e1e66,#05050599);border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 40px #000c,inset 0 1px #ffffff1a,inset 0 0 20px #ffffff0d;display:flex;flex-direction:column;justify-content:space-around;align-items:center;border-radius:12px;padding:20px 0;position:relative;transition:transform .05s ease-out,box-shadow .05s ease-out;transform:scaleZ(calc(1 + var(--bass-intensity, 0) * .3)) translateZ(calc(var(--bass-intensity, 0) * 40px));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.cabinet:after{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:10px;box-shadow:0 0 30px #ffffff1a;opacity:var(--bass-intensity, 0);transition:opacity .05s ease-out}.woofer{width:100px;height:100px;background:radial-gradient(circle at center,#1a1a1a,#050505 60%,#000);border:4px solid #0a0a0a;border-radius:50%;box-shadow:inset 0 0 20px #000,0 calc(5px + var(--bass-intensity, 0)*5px) calc(15px + var(--bass-intensity, 0)*5px) #000c,0 0 calc(var(--bass-intensity, 0)*20px) #ffffff4d;transition:transform .05s ease-out,box-shadow .05s ease-out;transform:scale(calc(1 + var(--bass-intensity, 0) * .4)) translateZ(calc(var(--bass-intensity, 0) * 40px))}.woofer.top{width:80px;height:80px}.skull-particle svg{width:1em;height:1em;fill:currentColor}.audio-controls{position:absolute;bottom:2rem;left:50%;transform:translate(-50%) scale(calc(1 + var(--bass-intensity, 0) * .05));display:flex;gap:1.5rem;align-items:center;background:var(--panel-bg);padding:1rem 2rem;border-radius:16px;border:1px solid var(--border-color);border-top:1px solid rgba(255,255,255,.15);box-shadow:0 calc(5px + var(--bass-intensity, 0)*5px) calc(20px + var(--bass-intensity, 0)*10px) #000000e6,inset 0 1px rgba(255,255,255,calc(.05 + var(--bass-intensity, 0)*.1));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:50;transition:transform .05s ease-out,box-shadow .05s ease-out}.audio-btn{background:transparent;border:none;color:var(--text-secondary);font-size:.6rem;font-family:var(--font-family);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;cursor:pointer;transition:all .2s cubic-bezier(.175,.885,.32,1.275)}.audio-btn:hover{color:var(--accent-color);transform:scale(1.1);text-shadow:0 0 15px var(--accent-glow)}.audio-slider{-webkit-appearance:none;width:100px;background:#ffffff1a;height:8px;border-radius:0;border:1px solid rgba(255,255,255,.2);outline:none;cursor:pointer}.audio-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:20px;background:var(--text-primary);border-radius:0;cursor:pointer;box-shadow:0 0 10px #ffffff80;border:1px solid rgba(0,0,0,.5);transition:transform .1s}.audio-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}#game-phase-results h2{margin-bottom:.5rem}#correct-answer{margin-top:0;margin-bottom:1rem;color:var(--accent-color);text-shadow:0 0 10px var(--accent-glow)}.player-list{margin-bottom:1rem}.category-selection{margin:1rem 0;width:100%}.category-selection label{display:block;margin-bottom:.5rem;font-weight:500;text-transform:uppercase;letter-spacing:1px}.category-grid{display:flex;flex-wrap:wrap;gap:.5rem;max-height:250px;overflow-y:auto;padding:.8rem;background:#0006;border:1px solid rgba(255,255,255,.1);border-radius:8px;box-shadow:inset 0 0 10px #00000080;justify-content:center}.category-grid::-webkit-scrollbar{width:6px}.category-grid::-webkit-scrollbar-track{background:#0003}.category-grid::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.category-grid::-webkit-scrollbar-thumb:hover{background:#fff6}.genre-pill{padding:.4rem .8rem;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:20px;cursor:pointer;font-size:.85rem;color:var(--text-secondary);transition:all .3s cubic-bezier(.25,.8,.25,1);-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.genre-pill:hover{background:#ffffff1a;color:var(--text-primary);transform:translateY(-2px);border-color:#ffffff4d;box-shadow:0 5px 15px #00000080}.genre-pill.selected{background:#ffffff1a;color:#fff;border-color:#fff;box-shadow:0 0 15px #ffffff4d,inset 0 0 10px #ffffff1a;text-shadow:0 0 5px #fff}.genre-pill.random-btn{background:linear-gradient(45deg,#111,#333);color:#fff;border:1px solid rgba(255,255,255,.3);font-weight:700;text-transform:uppercase;letter-spacing:1px}.genre-pill.random-btn:hover{background:linear-gradient(45deg,#222,#444);box-shadow:0 0 10px #fff3}.genre-pill.random-btn.selected{background:linear-gradient(45deg,#f0c,#33f);border-color:#fff;box-shadow:0 0 20px #f0c9}.genre-pill.random-btn.spinning{animation:pulse-spin .3s infinite alternate;pointer-events:none}@keyframes pulse-spin{0%{transform:scale(1);filter:hue-rotate(0deg)}to{transform:scale(1.1);filter:hue-rotate(90deg);box-shadow:0 0 20px #f0c}}.difficulty-selection{margin:1rem 0;width:100%}.difficulty-selection label{display:block;margin-bottom:.5rem;font-weight:500;text-transform:uppercase;letter-spacing:1px}.difficulty-grid{display:flex;gap:.5rem;justify-content:center}.diff-pill{flex:1;padding:.6rem;text-align:center;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;font-size:.8rem;font-weight:700;transition:all .3s cubic-bezier(.25,.8,.25,1);-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:var(--text-secondary)}.diff-pill:hover{background:#ffffff1a;color:var(--text-primary);transform:translateY(-2px);border-color:#ffffff4d}.diff-pill.easy.selected{background:#00ff001a;color:#0f0;border-color:#0f0;box-shadow:0 0 15px #00ff0080,inset 0 0 10px #0f03;text-shadow:0 0 5px #00ff00}.diff-pill.medium.selected{background:#ffaa001a;color:#fa0;border-color:#fa0;box-shadow:0 0 15px #ffaa0080,inset 0 0 10px #fa03;text-shadow:0 0 5px #ffaa00}.diff-pill.hard.selected{background:#ff00001a;color:#f33;border-color:red;box-shadow:0 0 15px #ff000080,inset 0 0 10px #f003;text-shadow:0 0 5px #ff0000}.progress-container{margin:1.5rem 0;width:100%}.progress-container label{display:block;margin-bottom:.5rem;font-weight:700;font-size:.85rem;color:var(--text-secondary)}.progress-track{width:100%;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;position:relative}.progress-fill{height:100%;width:0%;background:var(--accent-color);box-shadow:0 0 10px var(--accent-glow);transition:width .5s ease-out}.progress-text{margin-top:.4rem;font-size:.8rem;color:var(--text-secondary);text-align:right}.progress-container.hidden{display:none}.global-progress{position:absolute;bottom:0;left:0;width:100%;padding:1rem;background:#000c;border-top:1px solid rgba(255,255,255,.1);margin:0;z-index:1000;box-sizing:border-box}.dur-pill,.round-pill{flex:1;padding:.6rem;text-align:center;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;font-size:.8rem;font-weight:700;transition:all .3s cubic-bezier(.25,.8,.25,1);-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:var(--text-secondary)}.dur-pill:hover,.round-pill:hover{background:#ffffff1a;color:var(--text-primary);transform:translateY(-2px);border-color:#ffffff4d}.dur-pill.selected,.round-pill.selected{background:#ffffff1a;color:#fff;border-color:#fff;box-shadow:0 0 15px #ffffff4d,inset 0 0 10px #ffffff1a;text-shadow:0 0 5px #fff}.game-layout{display:flex;width:100%;gap:20px;align-items:stretch;height:100%}.main-panel{flex:2;display:flex;flex-direction:column}.side-panel{flex:1;background:var(--panel-bg);border:1px solid var(--border-color);border-top:1px solid rgba(255,255,255,.15);border-radius:12px;padding:1.5rem;box-shadow:0 10px 40px #000c,inset 0 1px #ffffff0d;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:flex;flex-direction:column}.side-panel h3{font-size:1rem;color:var(--text-primary);text-align:center;margin-bottom:1.5rem;font-family:var(--font-family);text-transform:uppercase}.color-0{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.3)}.color-1{color:#e0e0e0;text-shadow:0 0 10px rgba(224,224,224,.3)}.color-2{color:#ccc;text-shadow:0 0 10px rgba(204,204,204,.3)}.color-3{color:#b0b0b0;text-shadow:0 0 10px rgba(176,176,176,.3)}.color-4{color:#d6e0f0;text-shadow:0 0 10px rgba(214,224,240,.3)}.color-5{color:#f0e6d2;text-shadow:0 0 10px rgba(240,230,210,.3)}.color-6{color:#e6d9e8;text-shadow:0 0 10px rgba(230,217,232,.3)}.color-7{color:#d2ebd3;text-shadow:0 0 10px rgba(210,235,211,.3)}.game-overview{width:100%}.overview-list li{padding:.5rem 1rem;margin-bottom:.5rem}.overview-list .guessed-badge{color:var(--success, #00ff00);font-weight:700;font-size:.8rem;text-shadow:0 0 5px var(--success, #00ff00)}