:root{--bg-color: #0f0c29;--bg-gradient: linear-gradient(135deg, #0f0c29, #302b63, #24243e);--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--input-bg: rgba(0, 0, 0, .2);--primary-accent: #00f2fe;--secondary-accent: #4facfe;--pink-accent: #ff0844;--text-main: #ffffff;--text-muted: #a0a0b0;--card-bg: rgba(255, 255, 255, .05);--accent-glow: rgba(0, 242, 254, .15);--font-main: "Outfit", sans-serif;--border-radius: 20px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background:var(--bg-gradient);background-size:400% 400%;animation:gradientBG 15s ease infinite;color:var(--text-main);min-height:100vh;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;overflow-x:hidden;position:relative;padding:60px 16px 30px}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}#app{width:100%;max-width:600px;padding:0;position:relative;z-index:10}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--border-radius);padding:36px 32px;box-shadow:0 8px 32px #0000005e;transform:translateY(20px);opacity:0;transition:all .3s cubic-bezier(.25,.8,.25,1);width:100%}.screen{display:none}.screen.active{display:flex;flex-direction:column;transform:translateY(0);opacity:1;z-index:100;width:100%}#chat-container{position:fixed;bottom:20px;right:20px;width:320px;height:400px;background:#141423e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:15px;display:flex;flex-direction:column;z-index:10000;box-shadow:0 10px 30px #00000080;transition:all .3s cubic-bezier(.25,.8,.25,1);overflow:hidden}#chat-container.collapsed{height:45px;width:180px;cursor:pointer}.chat-header{padding:10px 15px;background:#ffffff0d;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--glass-border)}.chat-header h3{font-size:.9em;color:var(--primary-accent);margin:0;display:flex;align-items:center;gap:8px}#chat-messages{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:var(--primary-accent) transparent}.chat-msg{font-size:.85em;line-height:1.4;word-break:break-word}.chat-msg .sender{font-weight:800;color:var(--secondary-accent);margin-right:5px}.chat-msg.system{color:var(--text-muted);font-style:italic;text-align:center}.chat-msg.global .scope-tag{color:#f1c40f;font-size:.7em;margin-right:5px;border:1px solid #f1c40f;padding:0 4px;border-radius:4px}.chat-msg.room .scope-tag{color:#2ecc71;font-size:.7em;margin-right:5px;border:1px solid #2ecc71;padding:0 4px;border-radius:4px}.chat-input-area{padding:10px;background:#0003;display:flex;gap:8px}#chat-input{flex:1;background:#ffffff0d;border:1px solid var(--glass-border);border-radius:8px;color:#fff;padding:8px 12px;font-size:.85em;outline:none}#chat-input:focus{border-color:var(--primary-accent)}.chat-scope-toggle{display:flex;background:#0000004d;padding:2px;border-radius:10px;margin:0 10px 10px}.chat-scope-toggle button{flex:1;background:transparent;border:none;color:var(--text-muted);font-size:.7em;padding:4px;cursor:pointer;border-radius:8px;font-weight:700}.chat-scope-toggle button.active{background:var(--primary-accent);color:#000}@media(max-height:700px){.glass-panel{padding:24px 20px}h1{font-size:2.2rem}.subtitle{margin-bottom:16px;font-size:.95rem}}h1{font-size:3rem;font-weight:800;text-align:center;margin-bottom:10px}h1 .highlight{background:linear-gradient(to right,var(--primary-accent),var(--secondary-accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.subtitle{text-align:center;color:var(--text-muted);margin-bottom:30px;font-size:1.1rem}.hidden{display:none!important}.visually-hidden{position:absolute!important;top:-9999px!important;left:-9999px!important;width:1px!important;height:1px!important}.logo-container{display:flex;flex-direction:column;align-items:center;margin-bottom:10px}.icon-pulse{font-size:4rem;animation:pulseIcon 2s infinite ease-in-out;margin-bottom:10px;filter:drop-shadow(0 0 15px rgba(0,242,254,.5))}@keyframes pulseIcon{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.setup-container{display:flex;flex-direction:column;gap:20px;margin-bottom:30px}.input-group{display:flex;flex-direction:column;gap:8px}.input-group label{font-size:.9rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-weight:600}.input-group input,.input-group select{background:var(--input-bg);border:1px solid var(--glass-border);color:var(--text-main);padding:15px;border-radius:12px;font-family:var(--font-main);font-size:1rem;outline:none;transition:all .3s ease}.input-group input:focus,.input-group select:focus{border-color:var(--primary-accent);box-shadow:0 0 15px #00f2fe4d}.input-group option{background:var(--bg-color);color:#fff}.primary-btn{background:linear-gradient(45deg,var(--secondary-accent),var(--primary-accent));color:#fff;border:none;padding:16px 32px;border-radius:50px;font-size:1.2rem;font-weight:800;font-family:var(--font-main);cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:2px;box-shadow:0 4px 15px #00f2fe66;width:100%}.secondary-btn{background:#ffffff0d;color:#fff;border:1px solid rgba(255,255,255,.3);padding:16px 32px;border-radius:50px;font-size:1.2rem;font-weight:600;font-family:var(--font-main);cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:2px;width:100%}.primary-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px #00f2fe99;filter:brightness(1.1)}.secondary-btn:hover{background:#ffffff26;border-color:#fff9;transform:translateY(-3px)}.primary-btn:active,.secondary-btn:active{transform:translateY(1px)}.game-header{display:flex;justify-content:space-between;align-items:center;background:#0000004d;padding:15px 20px;border-radius:15px;margin-bottom:25px}.player-score{display:flex;flex-direction:column;align-items:center;transition:all .3s ease;opacity:.5}.player-score.active-player{opacity:1;transform:scale(1.1)}.player-score.active-player .name{color:var(--primary-accent);text-shadow:0 0 10px rgba(0,242,254,.5)}.player-score .name{font-size:.9rem;font-weight:600;color:var(--text-muted)}.player-score .score{font-size:1.8rem;font-weight:800}.round-info{display:flex;flex-direction:column;align-items:center}.round-info .label{font-size:.8rem;text-transform:uppercase;color:var(--text-muted)}.round-info .value{font-weight:800;font-size:1.2rem}.turn-indicator{text-align:center;font-size:1.3rem;font-weight:800;margin-bottom:25px;color:var(--primary-accent);animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.audio-player-container{display:flex;flex-direction:column;align-items:center;margin-bottom:30px;padding:20px;background:#0003;border-radius:20px;border:1px solid rgba(255,255,255,.05)}.video-overlay-wrapper{position:relative;width:300px;height:200px;border-radius:15px;overflow:hidden;margin-bottom:20px;box-shadow:0 4px 15px #00000080}.video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--primary-accent);text-shadow:0 2px 4px rgba(0,0,0,.5);pointer-events:all;cursor:not-allowed}#yt-player-container{position:absolute;top:0;left:0;z-index:1}.visualizer{display:flex;gap:5px;height:60px;align-items:center;margin-bottom:20px}.visualizer .bar{width:8px;height:10px;background:var(--primary-accent);border-radius:4px;transition:height .1s ease}.visualizer.playing .bar{animation:eq 1s infinite alternate ease-in-out}.visualizer.playing .bar:nth-child(1){animation-delay:.1s}.visualizer.playing .bar:nth-child(2){animation-delay:.4s}.visualizer.playing .bar:nth-child(3){animation-delay:.2s}.visualizer.playing .bar:nth-child(4){animation-delay:.5s}.visualizer.playing .bar:nth-child(5){animation-delay:.3s}.visualizer.playing .bar:nth-child(6){animation-delay:.6s}@keyframes eq{0%{height:10px}to{height:60px}}.action-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:12px 25px;border-radius:30px;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .3s;font-family:var(--font-main)}.action-btn:hover{background:#fff3;transform:scale(1.05)}.action-btn.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.time-progress{width:100%;display:flex;align-items:center;gap:15px;margin-top:20px}.progress-bar{flex:1;height:8px;background:#00000080;border-radius:4px;overflow:hidden}.progress-fill{height:100%;width:0%;background:linear-gradient(to right,var(--primary-accent),var(--secondary-accent));transition:width .1s linear}#time-left{font-variant-numeric:tabular-nums;font-weight:600}.guess-container h3{text-align:center;margin-bottom:20px;font-size:1.2rem;color:var(--text-muted)}.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.option-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff;padding:15px;border-radius:12px;font-size:1rem;font-family:var(--font-main);cursor:pointer;transition:all .2s;text-align:center}.option-btn:hover{background:#ffffff26;border-color:var(--primary-accent);transform:translateY(-2px)}.option-btn.correct{background:#00ff8033;border-color:#00ff80;color:#00ff80}.option-btn.wrong{background:#ff084433;border-color:var(--pink-accent);color:var(--pink-accent)}.winner-display{text-align:center;font-size:2.5rem;font-weight:800;margin:30px 0;background:linear-gradient(to right,#f6d365,#fda085);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}.final-scores{display:flex;justify-content:space-around;margin-bottom:40px}.final-score-card{display:flex;flex-direction:column;align-items:center;background:#0000004d;padding:20px 40px;border-radius:20px;border:1px solid rgba(255,255,255,.05)}.final-score-card span:first-child{color:var(--text-muted);font-size:1.2rem;margin-bottom:10px}.score-num{font-size:3rem;font-weight:800;color:var(--primary-accent)}.keyboard-instructions{background:#0006;padding:15px;border-radius:12px;margin-top:-10px;margin-bottom:20px;font-size:.95rem;text-align:center;border:1px dashed rgba(255,255,255,.2)}.keyboard-instructions p{margin:5px 0;color:var(--text-muted)}.keyboard-instructions strong{color:var(--primary-accent)}.option-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;position:relative}.option-keys{font-size:.8rem;color:var(--text-muted);background:#0000004d;padding:4px 10px;border-radius:12px}.option-keys b{color:var(--secondary-accent)}.guesser-indicator{position:absolute;top:-10px;right:-10px;background:var(--pink-accent);color:#fff;padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:700;box-shadow:0 4px 10px #ff084466;animation:popIn .3s ease-out forwards}@keyframes popIn{0%{transform:scale(0);opacity:0}80%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:1}}.profile-icon-img{width:24px;height:24px;border-radius:50%;object-fit:cover;vertical-align:middle;border:1px solid rgba(255,255,255,.2)}.player-item .profile-icon-img{width:32px;height:32px}.player-score-inline .profile-icon-img{width:22px;height:22px}#display-username .profile-icon-img{width:28px;height:28px}.guess-tags .profile-icon-img{width:18px;height:18px}.community-playlist-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-left:4px solid var(--primary-accent);border-radius:12px;padding:15px;display:flex;flex-direction:column;gap:12px;transition:all .3s ease;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.community-playlist-card:hover{background:#ffffff1a;transform:translateY(-2px);box-shadow:0 4px 15px #00f2fe33;border-color:#fff3}.community-playlist-card-header{display:flex;justify-content:space-between;align-items:flex-start}.community-playlist-card-title{font-size:1.1em;font-weight:700;color:var(--text-main);margin-bottom:4px}.community-playlist-card-meta{font-size:.85em;color:var(--text-muted);display:flex;gap:10px;align-items:center}.community-playlist-card-actions{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.05);padding-top:12px}.genre-chip{padding:5px 12px;border-radius:20px;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-main);font-size:.85em;cursor:pointer;white-space:nowrap;transition:all .2s ease}.genre-chip:hover,.genre-chip.active{background:var(--primary-accent);color:#0f0c29;border-color:var(--primary-accent);font-weight:700;box-shadow:0 2px 8px #00f2fe66}#bracket-display{padding:40px 20px;position:relative;overflow-x:auto;width:100%;display:flex;justify-content:center;align-items:center;gap:60px;min-height:400px}.bracket-column{display:flex;flex-direction:column;justify-content:space-around;gap:30px;height:100%;position:relative;z-index:2}.bracket-round{display:flex;flex-direction:column;align-items:center}.bracket-round-title{font-size:.85em;color:var(--primary-accent);text-transform:uppercase;letter-spacing:2px;text-align:center;margin-bottom:25px;font-weight:800;opacity:.8}.match-card{background:#141428cc;border-radius:12px;border:2px solid rgba(255,255,255,.1);overflow:hidden;transition:all .4s cubic-bezier(.175,.885,.32,1.275);width:220px;box-shadow:0 10px 30px #0000004d}.match-card.active{border-color:var(--primary-accent);box-shadow:0 0 30px #00f2fe4d;transform:scale(1.05);background:#00f2fe0d}.match-team{display:flex;align-items:center;padding:12px 15px;gap:12px;background:#0003;border-bottom:1px solid rgba(255,255,255,.05);transition:background .3s ease}.match-team:last-of-type{border-bottom:none}.match-team.winner{background:linear-gradient(90deg,rgba(46,204,113,.2),transparent)}.match-team-icon{font-size:1.3em;filter:drop-shadow(0 0 5px rgba(255,255,255,.2))}.match-team-info{flex:1;display:flex;justify-content:space-between;align-items:center}.match-team-name{font-weight:600;font-size:.9em;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}.match-team-score{font-weight:800;color:var(--text-muted);font-size:1em}.winner .match-team-score{color:#2ecc71;text-shadow:0 0 10px rgba(46,204,113,.5)}.match-status-bar{padding:8px 15px;font-size:.7em;text-align:center;background:#ffffff08;color:var(--text-muted);border-top:1px solid rgba(255,255,255,.05);font-weight:800;text-transform:uppercase;letter-spacing:1px}.point-pop{position:fixed;pointer-events:none;font-weight:800;font-size:1.5rem;z-index:10000;animation:floatUpFade 1.2s ease-out forwards}@keyframes floatUpFade{0%{transform:translateY(0) scale(.5);opacity:0}20%{transform:translateY(-20px) scale(1.2);opacity:1}to{transform:translateY(-100px) scale(1);opacity:0}}