.fancy-timer{display:flex;justify-content:center;align-items:center;margin:20px 0;position:relative}.timer-circle{position:relative;width:200px;height:200px;display:flex;justify-content:center;align-items:center}.timer-svg{position:absolute;width:100%;height:100%;transform:rotate(-90deg);filter:drop-shadow(0 0 10px rgba(0,0,0,.1))}.timer-progress-circle{transition:stroke-dashoffset .3s ease}.timer-content{position:absolute;text-align:center;z-index:1}.timer-number{font-size:4rem;font-weight:700;line-height:1;margin-bottom:.5rem;font-family:Courier New,monospace;text-shadow:0 2px 4px rgba(0,0,0,.1)}.timer-label{font-size:1rem;opacity:.7;text-transform:uppercase;letter-spacing:.1em;font-weight:600}.timer-status{font-size:.8rem;opacity:.8;margin-top:.25rem}.timer-normal{color:#4caf50}.timer-normal .timer-number{color:#2e7d32}.timer-warning{color:#ff9800}.timer-warning .timer-number{color:#f57c00}.timer-critical{color:#f44336;animation:critical-shake .5s ease-in-out infinite}.timer-critical .timer-number{color:#d32f2f;animation:critical-pulse 1s ease-in-out infinite}.timer-pulse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:220px;height:220px;pointer-events:none}.pulse-ring{position:absolute;top:0;left:0;width:100%;height:100%;border:3px solid #F44336;border-radius:50%;animation:pulse-ring 1.5s cubic-bezier(.215,.61,.355,1) infinite}.pulse-ring-2{animation-delay:.3s}.pulse-ring-3{animation-delay:.6s}@keyframes critical-shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}@keyframes critical-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes pulse-ring{0%{transform:scale(1);opacity:1}to{transform:scale(1.3);opacity:0}}@media (max-width: 768px){.timer-circle{width:150px;height:150px}.timer-number{font-size:3rem}.timer-label{font-size:.9rem}.timer-pulse{width:170px;height:170px}}@media (max-width: 480px){.timer-circle{width:120px;height:120px}.timer-number{font-size:2.5rem}.timer-label{font-size:.8rem}.timer-pulse{width:140px;height:140px}}.timer-display{text-align:center;transition:all .3s ease}.timer-display.warning{animation:pulse-warning 1s infinite}.timer-display.critical{animation:pulse-critical .5s infinite}.time-text{font-size:3rem;font-weight:700;font-family:Courier New,monospace;color:#333;margin-bottom:.5rem;text-shadow:0 2px 4px rgba(0,0,0,.1)}.timer-display.warning .time-text{color:#ff8c00}.timer-display.critical .time-text{color:#f44}.timer-progress{width:200px;height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden;position:relative}.timer-progress-bar{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);border-radius:4px;transition:width 1s linear;position:relative}.timer-progress-bar:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}.timer-progress-bar[data-progress="0"]{width:0%}.timer-progress-bar[data-progress="1"]{width:1%}.timer-progress-bar[data-progress="2"]{width:2%}.timer-progress-bar[data-progress="3"]{width:3%}.timer-progress-bar[data-progress="4"]{width:4%}.timer-progress-bar[data-progress="5"]{width:5%}.timer-progress-bar[data-progress="6"]{width:6%}.timer-progress-bar[data-progress="7"]{width:7%}.timer-progress-bar[data-progress="8"]{width:8%}.timer-progress-bar[data-progress="9"]{width:9%}.timer-progress-bar[data-progress="10"]{width:10%}.timer-progress-bar[data-progress="11"]{width:11%}.timer-progress-bar[data-progress="12"]{width:12%}.timer-progress-bar[data-progress="13"]{width:13%}.timer-progress-bar[data-progress="14"]{width:14%}.timer-progress-bar[data-progress="15"]{width:15%}.timer-progress-bar[data-progress="16"]{width:16%}.timer-progress-bar[data-progress="17"]{width:17%}.timer-progress-bar[data-progress="18"]{width:18%}.timer-progress-bar[data-progress="19"]{width:19%}.timer-progress-bar[data-progress="20"]{width:20%}.timer-progress-bar[data-progress="21"]{width:21%}.timer-progress-bar[data-progress="22"]{width:22%}.timer-progress-bar[data-progress="23"]{width:23%}.timer-progress-bar[data-progress="24"]{width:24%}.timer-progress-bar[data-progress="25"]{width:25%}.timer-progress-bar[data-progress="26"]{width:26%}.timer-progress-bar[data-progress="27"]{width:27%}.timer-progress-bar[data-progress="28"]{width:28%}.timer-progress-bar[data-progress="29"]{width:29%}.timer-progress-bar[data-progress="30"]{width:30%}.timer-progress-bar[data-progress="31"]{width:31%}.timer-progress-bar[data-progress="32"]{width:32%}.timer-progress-bar[data-progress="33"]{width:33%}.timer-progress-bar[data-progress="34"]{width:34%}.timer-progress-bar[data-progress="35"]{width:35%}.timer-progress-bar[data-progress="36"]{width:36%}.timer-progress-bar[data-progress="37"]{width:37%}.timer-progress-bar[data-progress="38"]{width:38%}.timer-progress-bar[data-progress="39"]{width:39%}.timer-progress-bar[data-progress="40"]{width:40%}.timer-progress-bar[data-progress="41"]{width:41%}.timer-progress-bar[data-progress="42"]{width:42%}.timer-progress-bar[data-progress="43"]{width:43%}.timer-progress-bar[data-progress="44"]{width:44%}.timer-progress-bar[data-progress="45"]{width:45%}.timer-progress-bar[data-progress="46"]{width:46%}.timer-progress-bar[data-progress="47"]{width:47%}.timer-progress-bar[data-progress="48"]{width:48%}.timer-progress-bar[data-progress="49"]{width:49%}.timer-progress-bar[data-progress="50"]{width:50%}.timer-progress-bar[data-progress="51"]{width:51%}.timer-progress-bar[data-progress="52"]{width:52%}.timer-progress-bar[data-progress="53"]{width:53%}.timer-progress-bar[data-progress="54"]{width:54%}.timer-progress-bar[data-progress="55"]{width:55%}.timer-progress-bar[data-progress="56"]{width:56%}.timer-progress-bar[data-progress="57"]{width:57%}.timer-progress-bar[data-progress="58"]{width:58%}.timer-progress-bar[data-progress="59"]{width:59%}.timer-progress-bar[data-progress="60"]{width:60%}.timer-progress-bar[data-progress="61"]{width:61%}.timer-progress-bar[data-progress="62"]{width:62%}.timer-progress-bar[data-progress="63"]{width:63%}.timer-progress-bar[data-progress="64"]{width:64%}.timer-progress-bar[data-progress="65"]{width:65%}.timer-progress-bar[data-progress="66"]{width:66%}.timer-progress-bar[data-progress="67"]{width:67%}.timer-progress-bar[data-progress="68"]{width:68%}.timer-progress-bar[data-progress="69"]{width:69%}.timer-progress-bar[data-progress="70"]{width:70%}.timer-progress-bar[data-progress="71"]{width:71%}.timer-progress-bar[data-progress="72"]{width:72%}.timer-progress-bar[data-progress="73"]{width:73%}.timer-progress-bar[data-progress="74"]{width:74%}.timer-progress-bar[data-progress="75"]{width:75%}.timer-progress-bar[data-progress="76"]{width:76%}.timer-progress-bar[data-progress="77"]{width:77%}.timer-progress-bar[data-progress="78"]{width:78%}.timer-progress-bar[data-progress="79"]{width:79%}.timer-progress-bar[data-progress="80"]{width:80%}.timer-progress-bar[data-progress="81"]{width:81%}.timer-progress-bar[data-progress="82"]{width:82%}.timer-progress-bar[data-progress="83"]{width:83%}.timer-progress-bar[data-progress="84"]{width:84%}.timer-progress-bar[data-progress="85"]{width:85%}.timer-progress-bar[data-progress="86"]{width:86%}.timer-progress-bar[data-progress="87"]{width:87%}.timer-progress-bar[data-progress="88"]{width:88%}.timer-progress-bar[data-progress="89"]{width:89%}.timer-progress-bar[data-progress="90"]{width:90%}.timer-progress-bar[data-progress="91"]{width:91%}.timer-progress-bar[data-progress="92"]{width:92%}.timer-progress-bar[data-progress="93"]{width:93%}.timer-progress-bar[data-progress="94"]{width:94%}.timer-progress-bar[data-progress="95"]{width:95%}.timer-progress-bar[data-progress="96"]{width:96%}.timer-progress-bar[data-progress="97"]{width:97%}.timer-progress-bar[data-progress="98"]{width:98%}.timer-progress-bar[data-progress="99"]{width:99%}.timer-progress-bar[data-progress="100"]{width:100%}.timer-display.warning .timer-progress-bar{background:linear-gradient(90deg,#ff8c00,#fa4)}.timer-display.critical .timer-progress-bar{background:linear-gradient(90deg,#f44,#f66)}.timer-controls{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.timer-btn{padding:.5rem 1rem;border:none;border-radius:6px;background:#f8f9fa;color:#333;cursor:pointer;font-size:.9rem;transition:all .2s ease;display:flex;align-items:center;gap:.25rem}.timer-btn:hover{background:#e9ecef;transform:translateY(-1px)}.timer-btn.start{background:#28a745;color:#fff}.timer-btn.start:hover{background:#218838}.timer-btn.pause{background:#ffc107;color:#333}.timer-btn.pause:hover{background:#e0a800}.timer-btn.reset{background:#6c757d;color:#fff}.timer-btn.reset:hover{background:#5a6268}.timer-btn.restart{background:#007bff;color:#fff}.timer-btn.restart:hover{background:#0056b3}@keyframes pulse-warning{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes pulse-critical{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.timer.compact{padding:.5rem;min-width:120px}.timer.compact .time-text{font-size:1.5rem;margin-bottom:.25rem}.timer.compact .timer-progress{width:120px;height:4px}.timer.compact .timer-controls{display:none}.timer.large{padding:2rem;min-width:300px}.timer.large .time-text{font-size:4rem;margin-bottom:1rem}.timer.large .timer-progress{width:300px;height:12px}.leaderboard{background:#fff;border-radius:16px;box-shadow:0 8px 32px #0000001a;overflow:hidden}.leaderboard-loading{display:flex;flex-direction:column;align-items:center;padding:3rem;text-align:center}.loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.leaderboard-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;text-align:center}.leaderboard-header h2{margin:0 0 .5rem;font-size:2.5rem;font-weight:700}.session-info h3{margin:.5rem 0;font-size:1.2rem;opacity:.9}.live-indicator{display:inline-flex;align-items:center;gap:.5rem;background:#fff3;padding:.5rem 1rem;border-radius:20px;margin:1rem 0;font-weight:700;animation:pulse 2s infinite}.live-dot{width:8px;height:8px;background:#ff4757;border-radius:50%;animation:blink 1s infinite}.last-update{font-size:.9rem;opacity:.8;margin-top:1rem}.leaderboard-list{padding:1.5rem}.leaderboard-entry{display:flex;align-items:center;padding:1.25rem;margin-bottom:1rem;border-radius:12px;background:#f8f9fa;border:1px solid #dee2e6;transition:all .3s ease;animation:fadeInUp .4s ease-out}.leaderboard-entry:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.leaderboard-entry.podium{background:linear-gradient(135deg,#fff3cd,#ffeaa7);border:2px solid #ffd700;box-shadow:0 4px 16px #ffd7004d}.rank-section{display:flex;flex-direction:column;align-items:center;margin-right:1.5rem;min-width:60px}.rank-number{display:flex;align-items:center;gap:.25rem;font-size:1.5rem;font-weight:700;color:#333}.rank-change{display:flex;align-items:center;gap:.25rem;font-size:.8rem;margin-top:.25rem}.player-info{flex-grow:1;margin-right:1rem}.player-name{font-size:1.2rem;font-weight:600;color:#333;margin-bottom:.5rem;display:block}.player-stats{display:flex;gap:1rem;flex-wrap:wrap}.player-stats span{padding:.25rem .5rem;background:#fffc;border-radius:12px;font-size:.85rem;color:#666;border:1px solid #ddd}.accuracy{background:#28a7451a!important;color:#28a745!important;border-color:#28a745!important}.response-time{background:#007bff1a!important;color:#007bff!important;border-color:#007bff!important}.streak{background:#ff6b351a!important;color:#ff6b35!important;border-color:#ff6b35!important}.score-section{text-align:right;min-width:120px}.total-points{font-size:1.5rem;font-weight:700;color:#007bff;margin-bottom:.25rem}.score-breakdown{display:flex;flex-direction:column;gap:.25rem}.score-breakdown span{font-size:.8rem;color:#666}.no-players{text-align:center;padding:3rem;color:#666}.more-players{text-align:center;padding:1rem;color:#666;font-style:italic}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.leaderboard-header{padding:1.5rem 1rem}.leaderboard-header h2{font-size:2rem}.leaderboard-entry{flex-direction:column;text-align:center;padding:1rem}.rank-section,.player-info{margin-right:0;margin-bottom:.75rem}.player-stats{justify-content:center;gap:.5rem}.score-section{min-width:auto}}.debug-panel{position:fixed;top:0;right:0;background:#000000e6;color:#fff;font-size:12px;overflow-y:auto;z-index:9999;padding:10px;transition:all .3s ease;border-left:2px solid #333}.debug-panel.collapsed{width:150px;height:40px}.debug-panel.expanded{width:400px;height:100vh}.debug-header{cursor:pointer;font-weight:700;margin-bottom:10px;padding:5px;background:#ffffff1a;border-radius:3px}.debug-section{margin-bottom:10px}.debug-section strong{color:#4caf50}.debug-details{margin-left:10px;font-size:11px}.debug-details>div{margin-bottom:2px;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.1)}.debug-details>div:last-child{border-bottom:none}.panga-progress{display:flex;flex-direction:column;gap:.5rem;min-width:250px}.progress-text{display:flex;flex-direction:column;gap:.25rem}.progress-title{font-weight:700;font-size:1rem;color:var(--primary-color, #2196F3)}.progress-stats{font-size:.875rem;color:var(--text-color, #333)}.current-phase{font-size:.75rem;color:var(--secondary-text-color, #666);font-style:italic}.progress-bar{width:100%;height:8px;background-color:var(--progress-bg, #e0e0e0);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#4caf50,#2196f3);transition:width .3s ease-in-out;border-radius:4px;width:0%}.progress-fill.progress-0{width:0%}.progress-fill.progress-10{width:10%}.progress-fill.progress-20{width:20%}.progress-fill.progress-30{width:30%}.progress-fill.progress-40{width:40%}.progress-fill.progress-50{width:50%}.progress-fill.progress-60{width:60%}.progress-fill.progress-70{width:70%}.progress-fill.progress-80{width:80%}.progress-fill.progress-90{width:90%}.progress-fill.progress-100{width:100%}.game-control{display:flex;flex-direction:column;gap:.5rem;min-width:250px;align-items:flex-end}.control-title{font-weight:700;font-size:1rem;color:var(--primary-color, #2196F3)}.control-buttons{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}.control-btn{padding:.5rem 1rem;border:none;border-radius:4px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.skip-btn{background-color:#4caf50;color:#fff}.skip-btn:hover{background-color:#45a049;transform:translateY(-1px)}.pause-btn{background-color:#ff9800;color:#fff}.pause-btn:hover{background-color:#f57c00;transform:translateY(-1px)}.pause-btn.paused{background-color:#2196f3}.pause-btn.paused:hover{background-color:#1976d2}.stop-btn{background-color:#f44336;color:#fff}.stop-btn:hover{background-color:#d32f2f;transform:translateY(-1px)}.stop-btn.confirm{background-color:#d32f2f;animation:pulse 1s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.confirm-message{font-size:.75rem;color:#f44336;text-align:right;font-style:italic;margin-top:.25rem}.game-component{max-width:1200px;margin:0 auto;padding:20px}.game-status{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;border-radius:15px;margin-bottom:20px;box-shadow:0 4px 15px #0000001a}.game-header h1{margin:0 0 15px;font-size:2rem;text-align:center}.debug-info{font-size:12px;color:#666;margin-top:10px;opacity:.7}.game-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.panga-name,.team-name{font-size:1.1rem;font-weight:600}.host-controls{display:flex;gap:10px;justify-content:center}.control-btn{padding:10px 20px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.reset-btn{background:#e74c3c;color:#fff}.reset-btn:hover{background:#c0392b;transform:translateY(-2px)}.restart-btn{background:#f39c12;color:#fff}.restart-btn:hover{background:#e67e22;transform:translateY(-2px)}.timer-section{margin-bottom:30px}.countdown-line{display:flex;align-items:center;justify-content:space-between;padding:20px;background:#fff;border-radius:15px;box-shadow:0 4px 15px #0000001a;gap:20px}.countdown-left{flex:1;display:flex;justify-content:flex-start}.countdown-center{flex:0 0 auto;display:flex;justify-content:center}.countdown-right{flex:1;display:flex;justify-content:flex-end}.session-progress-bar{margin-top:15px;text-align:center}.progress-track{width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:8px}.progress-fill-horizontal{height:100%;background:linear-gradient(90deg,#4caf50,#2196f3);transition:width .5s ease-in-out;border-radius:4px;width:0%}.progress-fill-horizontal.progress-0{width:0%}.progress-fill-horizontal.progress-10{width:10%}.progress-fill-horizontal.progress-20{width:20%}.progress-fill-horizontal.progress-30{width:30%}.progress-fill-horizontal.progress-40{width:40%}.progress-fill-horizontal.progress-50{width:50%}.progress-fill-horizontal.progress-60{width:60%}.progress-fill-horizontal.progress-70{width:70%}.progress-fill-horizontal.progress-80{width:80%}.progress-fill-horizontal.progress-90{width:90%}.progress-fill-horizontal.progress-100{width:100%}.progress-label{font-size:.875rem;color:#666;font-weight:500}.phase-content{background:#fff;border-radius:15px;padding:30px;box-shadow:0 4px 15px #0000001a;min-height:400px}.answering-phase h2{text-align:center;color:#2c3e50;margin-bottom:30px}.question-display h3{font-size:1.5rem;margin-bottom:30px;text-align:center;color:#34495e}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:30px}.option-btn{padding:15px 20px;border:2px solid #bdc3c7;background:#fff;border-radius:10px;font-size:1rem;cursor:pointer;transition:all .3s ease;text-align:center}.option-btn:hover:not(.disabled){border-color:#3498db;background:#ebf3fd;transform:translateY(-2px)}.option-btn.selected{border-color:#3498db;background:#3498db;color:#fff}.option-btn.disabled{opacity:.6;cursor:not-allowed}.waiting-display{text-align:center;padding:50px;color:#7f8c8d}.waiting-display h3{font-size:1.8rem;margin-bottom:15px}.host-display{text-align:center;color:#2196f3;font-weight:500;margin:20px 0;padding:15px;background:#e3f2fd;border-radius:8px;border-left:4px solid #2196F3}.submit-section{text-align:center;margin:20px 0}.submit-answer-btn{background:#4caf50;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #4caf504d}.submit-answer-btn:hover{background:#45a049;transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.submit-answer-btn:active{transform:translateY(0)}.debug-info{margin-top:20px;font-size:12px;opacity:.7}.answer-status{text-align:center;font-size:1.2rem;padding:15px;border-radius:10px}.answered{background:#d5f4e6;color:#27ae60}.waiting{background:#fef9e7;color:#f39c12}.results-phase h2{text-align:center;color:#2c3e50;margin-bottom:30px}.correct-answer{margin-bottom:30px;text-align:center}.correct-answer h3{color:#27ae60;margin-bottom:20px}.correct-options{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.correct-option{background:#27ae60;color:#fff;padding:10px 20px;border-radius:25px;font-weight:600}.player-answers{text-align:center}.player-answers h4{color:#34495e;margin-bottom:20px}.correct-players{background:#f8f9fa;padding:20px;border-radius:10px;color:#7f8c8d}.leaderboard-phase h2{text-align:center;color:#2c3e50;margin-bottom:30px}.leaderboard-list{max-width:600px;margin:0 auto}.leaderboard-item{display:flex;align-items:center;padding:15px 20px;margin-bottom:10px;border-radius:10px;background:#fff;box-shadow:0 2px 10px #0000001a;transition:all .3s ease}.leaderboard-item:hover{transform:translateY(-2px);box-shadow:0 4px 15px #00000026}.leaderboard-item.rank-1{background:linear-gradient(135deg,#f1c40f,#f39c12);color:#fff}.leaderboard-item.rank-2{background:linear-gradient(135deg,#95a5a6,#bdc3c7);color:#fff}.leaderboard-item.rank-3{background:linear-gradient(135deg,#e67e22,#d35400);color:#fff}.rank{font-size:1.5rem;font-weight:700;margin-right:20px;min-width:50px}.player-info{flex:1}.player-name{font-size:1.2rem;font-weight:600;margin-bottom:5px}.player-points{font-size:1rem;opacity:.8}.crown{font-size:2rem;margin-left:10px}.question-preview-phase{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;padding:30px;border-radius:15px;margin:20px 0;text-align:center;box-shadow:0 8px 32px #0000001a}.question-preview-phase h2{margin:0 0 20px;font-size:2.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.question-preview-phase .question-display h3{font-size:2rem;margin-bottom:30px;background:#ffffff1a;padding:20px;border-radius:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.options-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;margin-bottom:30px}.option-preview{background:#fff3;padding:15px 20px;border-radius:10px;font-size:1.1rem;font-weight:600;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:2px solid rgba(255,255,255,.3)}.preview-info{background:#ffffff1a;padding:20px;border-radius:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.preview-info p{margin:10px 0;font-size:1.2rem}.preview-info strong{color:#ffeb3b;font-weight:700}@media (max-width: 768px){.game-component{padding:10px}.game-info{flex-direction:column;gap:10px}.options-grid{grid-template-columns:1fr}.host-controls{flex-direction:column;align-items:center}.control-btn{width:100%;max-width:200px}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light}:root,:root[data-theme=light]{--primary-color: #667eea;--primary-hover: #5a6fd8;--primary-light: #8ea7ff;--background-primary: #ffffff;--background-secondary: #f8f9fa;--background-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--surface: #ffffff;--surface-elevated: #f8f9fa;--surface-hover: #e9ecef;--text-primary: #212529;--text-secondary: #6c757d;--text-tertiary: #adb5bd;--text-inverse: #ffffff;--border-color: #e9ecef;--border-focus: var(--primary-color);--success-color: #198754;--success-bg: #d4edda;--success-text: #0f5132;--error-color: #dc3545;--error-bg: #f8d7da;--error-text: #721c24;--warning-color: #ffc107;--warning-bg: #fff3cd;--warning-text: #664d03;--shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);--shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175)}:root[data-theme=dark]{color-scheme:dark;--primary-color: #8ea7ff;--primary-hover: #7c9aff;--primary-light: #a3b5ff;--background-primary: #1a1a1a;--background-secondary: #2d2d2d;--background-gradient: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);--surface: #2d2d2d;--surface-elevated: #3a3a3a;--surface-hover: #404040;--text-primary: #ffffff;--text-secondary: #a0a0a0;--text-tertiary: #707070;--text-inverse: #000000;--border-color: #404040;--border-focus: var(--primary-color);--success-color: #40d674;--success-bg: #1e4d2b;--success-text: #a3d9a5;--error-color: #ff6b6b;--error-bg: #4d1e1e;--error-text: #ffb3b3;--warning-color: #ffd93d;--warning-bg: #4d3d1e;--warning-text: #ffe066;--shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .3);--shadow: 0 .5rem 1rem rgba(0, 0, 0, .4);--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .5)}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;background:var(--background-gradient);color:var(--text-primary);transition:background-color .3s ease,color .3s ease}#root{min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:20px}.card{background:var(--surface);color:var(--text-primary);padding:2rem;border-radius:12px;box-shadow:var(--shadow);margin:1rem 0;border:1px solid var(--border-color);transition:all .3s ease}.card:hover{box-shadow:var(--shadow-lg)}.btn{background:var(--primary-color);color:var(--text-inverse);border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:1rem;font-family:inherit;transition:all .3s ease;border:1px solid transparent}.btn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow)}.btn:focus{outline:2px solid var(--primary-color);outline-offset:2px}.btn-secondary{background:var(--surface-elevated);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--surface-hover);color:var(--text-primary)}.btn-danger{background:var(--error-color);color:var(--text-inverse)}.btn-danger:hover{background:#c82333}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.input{width:100%;padding:12px;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;font-family:inherit;margin:8px 0;background:var(--surface);color:var(--text-primary);transition:all .3s ease}.input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px #667eea1a}.input::placeholder{color:var(--text-tertiary)}.loading{text-align:center;padding:2rem;color:var(--text-secondary)}.error{background:var(--error-bg);color:var(--error-text);padding:1rem;border-radius:8px;margin:1rem 0;border:1px solid var(--error-color)}.success{background:var(--success-bg);color:var(--success-text);padding:1rem;border-radius:8px;margin:1rem 0;border:1px solid var(--success-color)}