:root{--bg-primary:#0a0a1a;--bg-secondary:#12122a;--bg-card:#1a1a3e;--accent-primary:#6c5ce7;--accent-secondary:#00cec9;--accent-warning:#fdcb6e;--accent-danger:#e17055;--accent-success:#00b894;--text-primary:#fff;--text-secondary:#b2b2d0;--text-muted:#6c6c8a;--border-color:#2a2a5a;--shadow:0 4px 20px #0000004d;--radius:12px;--radius-sm:8px;--transition:all .3s ease}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;overflow-x:hidden}.app-container{width:100%;min-height:100vh}.screen{min-height:100vh;padding:20px;animation:.4s fadeIn;display:none}.screen.active{flex-direction:column;justify-content:center;align-items:center;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.logo-container{text-align:center;margin-bottom:40px}.logo-container.small{margin-bottom:20px}.logo-icon{margin-bottom:10px;font-size:64px;animation:2s infinite pulse}.logo-container.small .logo-icon{font-size:40px}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}h1{background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:48px;font-weight:800}h2{background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:28px;font-weight:700}h3{color:var(--text-primary);margin-bottom:20px;font-size:22px;font-weight:600}.subtitle{color:var(--text-secondary);margin-top:10px;font-size:18px}.source-options{flex-wrap:wrap;justify-content:center;gap:20px;max-width:600px;display:flex}.source-btn{background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius);cursor:pointer;transition:var(--transition);min-width:240px;color:inherit;font:inherit;flex-direction:column;flex:1;align-items:center;gap:10px;padding:30px 40px;display:flex}.source-btn:hover{border-color:var(--accent-primary);box-shadow:var(--shadow);transform:translateY(-4px)}.source-icon{font-size:48px}.source-label{color:var(--text-primary);font-size:20px;font-weight:600}.source-desc{color:var(--text-muted);text-align:center;font-size:14px}.mode-options{flex-wrap:wrap;justify-content:center;gap:16px;max-width:800px;display:flex}.mode-btn{background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius);cursor:pointer;transition:var(--transition);min-width:200px;color:inherit;font:inherit;flex-direction:column;flex:1;align-items:center;gap:8px;padding:24px;display:flex;position:relative}.mode-btn:hover{border-color:var(--accent-primary);box-shadow:var(--shadow);transform:translateY(-4px)}.mode-btn.recommended{border-color:var(--accent-secondary)}.mode-icon{font-size:40px}.mode-title{color:var(--text-primary);font-size:18px;font-weight:600}.mode-desc{color:var(--text-muted);text-align:center;font-size:13px}.badge{background:var(--accent-secondary);color:#000;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:700;position:absolute;top:-10px;right:-10px}.smartphone-setup{flex-direction:column;align-items:center;gap:30px;max-width:400px;display:flex}.session-code-display{text-align:center}.code-label{color:var(--text-secondary);margin-bottom:10px;font-size:14px}.code-digits{letter-spacing:12px;background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;padding:10px 20px;font-family:Courier New,monospace;font-size:56px;font-weight:800}.code-hint{color:var(--text-muted);margin-top:8px;font-size:13px}.qr-placeholder{border-radius:var(--radius);text-align:center;background:#fff;padding:30px}.qr-box{flex-direction:column;align-items:center;gap:10px;display:flex}.qr-icon{font-size:64px}.qr-box p{color:#333;font-size:14px}.qr-box small{color:#666;font-size:12px}.lobby-header{justify-content:space-between;align-items:center;width:100%;max-width:900px;margin-bottom:30px;padding:0 10px;display:flex}.session-info{gap:10px;display:flex}.session-badge,.mode-badge{background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:20px;padding:6px 14px;font-size:13px}.choreography-list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;width:100%;max-width:900px;max-height:60vh;padding:10px;display:grid;overflow-y:auto}.choreography-card{background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius);cursor:pointer;transition:var(--transition);color:inherit;font:inherit;text-align:left;padding:20px}.choreography-card:hover{border-color:var(--accent-primary);box-shadow:var(--shadow);transform:translateY(-2px)}.choreography-card h4{color:var(--text-primary);margin-bottom:8px;font-size:18px}.choreography-card p{color:var(--text-secondary);margin-bottom:12px;font-size:14px;line-height:1.4}.choreography-meta{color:var(--text-muted);gap:12px;font-size:12px;display:flex}.loading-spinner{text-align:center;color:var(--text-muted);padding:40px;font-size:16px}.game-container{grid-template-rows:1fr auto;grid-template-columns:1fr 1fr;gap:10px;width:100%;height:100vh;padding:10px;display:grid;position:relative}.master-video-container,.user-video-container{border-radius:var(--radius);background:#000;position:relative;overflow:hidden}.video-label{z-index:10;background:#000000b3;border-radius:20px;padding:4px 12px;font-size:13px;font-weight:600;position:absolute;top:10px;left:10px}.game-video{object-fit:cover;width:100%;height:100%}.game-canvas{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.score-overlay{z-index:20;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.score-ring{width:100px;height:100px;position:relative}.score-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.score-bg{fill:none;stroke:#ffffff1a;stroke-width:6px}.score-progress{fill:none;stroke:var(--accent-secondary);stroke-width:6px;stroke-linecap:round;stroke-dasharray:282.74;stroke-dashoffset:282.74px;transition:stroke-dashoffset .3s}.score-text{text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.score-value{font-size:28px;font-weight:800;line-height:1;display:block}.score-label{color:var(--text-secondary);font-size:12px}.game-controls{grid-column:1/-1;justify-content:center;gap:16px;padding:10px;display:flex}.results-container{text-align:center;max-width:500px}.results-header{margin-bottom:30px}.trophy-icon{margin-bottom:10px;font-size:80px;display:block}.final-score{background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:30px;font-size:72px;font-weight:800}.results-stats{justify-content:center;gap:40px;margin-bottom:40px;display:flex}.stat{text-align:center}.stat-value{color:var(--text-primary);font-size:32px;font-weight:700;display:block}.stat-label{color:var(--text-secondary);margin-top:4px;font-size:14px}.results-actions{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.btn-primary{background:linear-gradient(135deg, var(--accent-primary), #8b7cf7);color:#fff;border-radius:var(--radius);cursor:pointer;transition:var(--transition);border:none;padding:14px 32px;font-family:inherit;font-size:16px;font-weight:600}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6c5ce766}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius);cursor:pointer;transition:var(--transition);padding:14px 32px;font-family:inherit;font-size:16px;font-weight:600}.btn-secondary:hover{border-color:var(--accent-primary);background:var(--bg-secondary)}.btn-danger{background:var(--accent-danger);color:#fff;border-radius:var(--radius);cursor:pointer;transition:var(--transition);border:none;padding:14px 32px;font-family:inherit;font-size:16px;font-weight:600}.btn-danger:hover{background:#d63031;transform:translateY(-2px)}@media (width<=768px){h1{font-size:32px}.source-btn{min-width:100%;padding:20px}.mode-btn{min-width:100%}.code-digits{letter-spacing:8px;font-size:40px}.game-container{grid-template-rows:1fr 1fr auto;grid-template-columns:1fr}.final-score{font-size:48px}.results-stats{gap:20px}}@media (width<=480px){.code-digits{letter-spacing:6px;font-size:32px}.score-ring{width:80px;height:80px}.score-value{font-size:22px}}