:root{--bg-color:#fff;--text-color:#333;--primary-color:#3b82f6;--secondary-color:#a1c4fd;--accent-color:#fbc2eb;--border-color:#2b2b2b}[data-theme=pastel]{--bg-color:#fce8e8;--text-color:#333;--primary-color:#ff9a9e;--secondary-color:#a1c4fd;--accent-color:#fbc2eb;--border-color:#2b2b2b}[data-theme=dark]{--bg-color:#1a1a2e;--text-color:#e94560;--primary-color:#e94560;--secondary-color:#0f3460;--accent-color:#16213e;--border-color:#e94560}[data-theme=retro]{--bg-color:#f4d03f;--text-color:#111;--primary-color:#e74c3c;--secondary-color:#3498db;--accent-color:#2ecc71;--border-color:#111}[data-theme=cyberpunk]{--bg-color:#0d0221;--text-color:#0fc;--primary-color:#f0f;--secondary-color:#0ff;--accent-color:#fcee0a;--border-color:#f0f}[data-theme=ocean]{--bg-color:#e0f7fa;--text-color:#004d40;--primary-color:#00838f;--secondary-color:#00acc1;--accent-color:#b2ebf2;--border-color:#006064}[data-theme=forest]{--bg-color:#e8f5e9;--text-color:#1b5e20;--primary-color:#2e7d32;--secondary-color:#4caf50;--accent-color:#a5d6a7;--border-color:#1b5e20}[data-theme=vaporwave]{--bg-color:#ffb3ba;--text-color:#701a75;--primary-color:#e879f9;--secondary-color:#baffc9;--accent-color:#bae1ff;--border-color:#000}*{box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text-color);justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0;font-family:Fredoka,sans-serif;transition:background-color .3s,color .3s;display:flex;overflow:hidden}.floating-bg{z-index:0;pointer-events:none;width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden}.floating-shape{border:3px solid var(--border-color);opacity:.07;border-radius:255px 15px 225px/15px 225px 15px 255px;animation:20s ease-in-out infinite floatAround;position:absolute}.floating-shape:first-child{background:var(--primary-color);width:80px;height:80px;animation-duration:22s;animation-delay:0s;top:10%;left:5%}.floating-shape:nth-child(2){background:var(--secondary-color);width:120px;height:60px;animation-duration:18s;animation-delay:-3s;top:70%;left:80%}.floating-shape:nth-child(3){background:var(--accent-color);border-radius:50%;width:60px;height:60px;animation-duration:25s;animation-delay:-7s;top:30%;left:85%}.floating-shape:nth-child(4){background:var(--primary-color);width:100px;height:40px;animation-duration:20s;animation-delay:-5s;top:80%;left:15%}.floating-shape:nth-child(5){background:var(--accent-color);border-radius:50%;width:50px;height:50px;animation-duration:30s;animation-delay:-10s;top:5%;left:60%}.floating-shape:nth-child(6){background:var(--secondary-color);width:70px;height:90px;animation-duration:27s;animation-delay:-2s;top:50%;left:40%}@keyframes floatAround{0%{transform:translate(0)rotate(0)}25%{transform:translate(30px,-40px)rotate(90deg)}50%{transform:translate(-20px,20px)rotate(180deg)}75%{transform:translate(40px,30px)rotate(270deg)}to{transform:translate(0)rotate(360deg)}}.wobbly-border{border:4px solid var(--border-color);color:#333;box-shadow:4px 6px 0px var(--border-color);background-color:#fff;border-radius:255px 15px 225px/15px 225px 15px 255px;transition:all .2s ease-in-out}[data-theme=dark] .wobbly-border,[data-theme=cyberpunk] .wobbly-border{color:#eee;background-color:#222}.wobbly-border:hover{box-shadow:6px 8px 0px var(--border-color);transform:translateY(-2px)rotate(1deg)}.btn{cursor:pointer;background-color:var(--primary-color);color:#fff;text-shadow:1px 1px #000;padding:15px 30px;font-family:Fredoka,sans-serif;font-size:1.5rem;font-weight:600;transition:all .15s}.btn:active:not(:disabled){box-shadow:2px 3px 0px var(--border-color)!important;transform:translateY(2px)!important}.btn-secondary{background-color:var(--secondary-color)}.btn:disabled{opacity:.6;cursor:not-allowed}@keyframes popIn{0%{opacity:0;transform:scale(.5)rotate(-5deg)}70%{transform:scale(1.1)rotate(2deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes flashRed{0%,to{color:inherit;transform:scale(1)}50%{color:#ff4d4d;transform:scale(1.2)rotate(5deg)}}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-5px)rotate(-2deg)}50%{transform:translate(5px)rotate(2deg)}75%{transform:translate(-5px)rotate(-1deg)}to{transform:translate(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-glow{0%,to{box-shadow:4px 6px 0px var(--border-color)}50%{box-shadow:4px 6px 15px var(--primary-color)}}.animate-pop{animation:.4s cubic-bezier(.175,.885,.32,1.275) forwards popIn}.animate-flash{animation:1s infinite flashRed}.animate-shake{animation:.5s ease-in-out shake}.animate-slide-up{animation:.3s ease-out forwards slideUp}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-color);text-align:center;width:90%;max-width:500px;color:var(--text-color);padding:30px}.theme-switcher{z-index:100;gap:10px;display:flex;position:fixed;top:20px;right:20px}.theme-btn{cursor:pointer;border:2px solid #000;border-radius:50%;width:30px;height:30px;transition:transform .2s}.theme-btn:hover{transform:scale(1.2)rotate(10deg)}.online-badge{z-index:100;align-items:center;gap:8px;padding:8px 16px;font-size:1rem;font-weight:600;display:flex;position:fixed;top:20px;left:20px}.online-dot{background:#22c55e;border-radius:50%;width:10px;height:10px;animation:2s infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}.footer{opacity:.5;z-index:10;text-align:center;font-size:.85rem;position:fixed;bottom:15px}.footer a{color:var(--text-color);text-decoration:underline}.confetti-container{pointer-events:none;z-index:999;width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden}.confetti-piece{width:10px;height:20px;animation:3s ease-out forwards confetti-fall;position:absolute;top:-20px}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}.judging-overlay{z-index:200;background:#000000e6;flex-direction:column;justify-content:center;align-items:center;gap:30px;display:flex;position:fixed;inset:0}.judging-text{color:#fff;text-shadow:3px 3px 0 var(--primary-color);font-size:2.5rem;font-weight:700;animation:1.5s ease-in-out infinite pulse-text}.judging-dots{gap:15px;display:flex}.judging-dot{background:var(--primary-color);border-radius:50%;width:20px;height:20px;animation:1.4s ease-in-out infinite bounce-dot}.judging-dot:nth-child(2){animation-delay:.2s}.judging-dot:nth-child(3){animation-delay:.4s}@keyframes pulse-text{0%,to{transform:scale(1)}50%{transform:scale(1.05)rotate(1deg)}}@keyframes bounce-dot{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.share-btn{background:#25d366;padding:10px 20px;font-size:1.1rem}.share-btn.copied{background:#22c55e!important}@media (width<=768px){.title{font-size:2.5rem!important}.videos-container{flex-direction:column;align-items:center;margin-top:80px}.video-wrapper{width:90%!important;max-width:none!important}.video-wrapper:first-child,.video-wrapper:nth-child(2){transform:none!important}.results-grid{flex-direction:column;align-items:center}.player-result-card{width:90%!important}.player-result-card:first-child,.player-result-card:nth-child(2){transform:none!important}.topic-card{max-width:95%!important;padding:12px 20px!important;font-size:1.1rem!important}.countdown-number{font-size:8rem!important}.btn{padding:12px 20px;font-size:1.2rem}.timer-circle{width:70px!important;height:70px!important;font-size:2rem!important;top:80px!important}}.app-container{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;padding:20px;display:flex}.title{text-shadow:2px 2px #000;margin-bottom:20px;font-size:4rem;transform:rotate(-2deg)}.home-screen,.queue-screen{flex-direction:column;align-items:center;gap:20px;display:flex}.queue-screen .self-video-preview{object-fit:cover;border-radius:255px 15px 225px/15px 225px 15px 255px;width:320px;height:240px}.loading-dots:after{content:"...";animation:1.5s steps(4,end) infinite dots}@keyframes dots{0%,20%{color:#0000;text-shadow:.25em 0 #0000,.5em 0 #0000}40%{color:inherit;text-shadow:.25em 0 #0000,.5em 0 #0000}60%{text-shadow:.25em 0 0 inherit, .5em 0 0 #0000}80%,to{text-shadow:.25em 0 0 inherit, .5em 0 0 inherit}}.debate-screen{flex-direction:column;align-items:center;width:100%;max-width:1000px;height:100%;display:flex}.topic-card{z-index:10;margin-bottom:20px;padding:20px 40px;font-size:1.5rem;font-weight:700;position:absolute;top:20px;transform:rotate(1deg)}.timer-circle{z-index:10;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;font-size:2.5rem;font-weight:700;display:flex;position:absolute;top:100px;transform:rotate(-3deg)}.timer-circle.danger{color:#ff4d4d;animation:1s infinite flashRed,.5s infinite shake}.videos-container{flex:1;justify-content:center;gap:20px;width:100%;margin-top:120px;display:flex}.video-wrapper{background:#fff;width:45%;max-width:400px;height:fit-content;padding:10px;position:relative}.video-wrapper:first-child{transform:rotate(-2deg)}.video-wrapper:nth-child(2){transform:rotate(2deg)}.video-wrapper video{aspect-ratio:4/3;object-fit:cover;background:#000;border-radius:255px 15px 225px/15px 225px 15px 255px;width:100%;height:auto}.video-wrapper .role-badge{color:#fff;background:#ff4d4d;border:3px solid #000;border-radius:255px 15px 225px/15px 225px 15px 255px;padding:5px 15px;font-size:1.2rem;font-weight:700;position:absolute;bottom:-20px;transform:rotate(-5deg)}.countdown-overlay{z-index:100;background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.countdown-number{color:#fff;text-shadow:10px 10px #ff4d4d;font-size:15rem;font-weight:700}.results-screen{flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:900px;display:flex}.results-grid{gap:30px;margin-top:20px;margin-bottom:30px;display:flex}.player-result-card{text-align:left;width:300px;padding:20px}.player-result-card:first-child{transform:rotate(-2deg)}.player-result-card:nth-child(2){transform:rotate(2deg)}.score-circle{border:3px solid #000;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;margin-bottom:10px;font-size:1.8rem;font-weight:700;display:flex}.result-title{color:var(--primary-color);margin-bottom:10px;font-size:1.4rem;font-weight:700}.result-breakdown{margin-bottom:10px;font-size:1.1rem}.result-weakpoint{color:#ff4d4d;background:#fee;border:2px dashed #ff4d4d;border-radius:10px;padding:10px;font-size:1rem}
