:root{--bg-primary:#0a0e17;--bg-secondary:#111827;--bg-card:#1a2332;--bg-card-hover:#1f2b3d;--border-color:#2a3a50;--border-glow:#3b82f6;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-blue:#3b82f6;--accent-cyan:#06b6d4;--accent-purple:#8b5cf6;--accent-red:#ef4444;--accent-orange:#f97316;--accent-green:#22c55e;--accent-yellow:#eab308;--team1-color:#3b82f6;--team2-color:#ef4444;--banned-overlay:#ef44444d;--shadow-glow:0 0 20px #3b82f626;--transition-fast:.15s ease;--transition-normal:.3s ease}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;overflow-x:hidden}#app{min-height:100vh}.bp-container{max-width:1200px;min-height:100vh;margin:0 auto;padding:20px}.bp-header{text-align:center;padding:30px 0 20px}.bp-header h1{background:linear-gradient(135deg, var(--accent-cyan), var(--accent-blue), var(--accent-purple));-webkit-text-fill-color:transparent;letter-spacing:2px;-webkit-background-clip:text;background-clip:text;font-size:28px;font-weight:700}.bp-header .subtitle{color:var(--text-secondary);margin-top:8px;font-size:14px}.bp-card{background:var(--bg-card);border:1px solid var(--border-color);transition:var(--transition-normal);border-radius:12px;margin-bottom:20px;padding:24px}.bp-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow)}.bp-btn{cursor:pointer;transition:var(--transition-fast);letter-spacing:1px;border:none;border-radius:8px;outline:none;justify-content:center;align-items:center;padding:12px 32px;font-size:16px;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.bp-btn:disabled{opacity:.5;cursor:not-allowed}.bp-btn-primary{background:linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));color:#fff;box-shadow:0 4px 15px #3b82f64d}.bp-btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 25px #3b82f680}.bp-btn-danger{background:linear-gradient(135deg, var(--accent-red), var(--accent-orange));color:#fff;box-shadow:0 4px 15px #ef44444d}.bp-btn-danger:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 25px #ef444480}.bp-btn-success{background:linear-gradient(135deg, var(--accent-green), #16a34a);color:#fff;box-shadow:0 4px 15px #22c55e4d}.bp-btn-success:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 25px #22c55e80}.bp-btn-ghost{border:1px solid var(--border-color);color:var(--text-secondary);background:0 0}.bp-btn-ghost:hover:not(:disabled){border-color:var(--accent-blue);color:var(--accent-blue)}.team-label{letter-spacing:.5px;border-radius:20px;padding:4px 12px;font-size:13px;font-weight:600;display:inline-block}.team-label.team1{color:var(--team1-color);background:#3b82f626;border:1px solid #3b82f64d}.team-label.team2{color:var(--team2-color);background:#ef444426;border:1px solid #ef44444d}.status-dot{border-radius:50%;width:8px;height:8px;margin-right:6px;display:inline-block}.status-dot.online{background:var(--accent-green);box-shadow:0 0 6px var(--accent-green)}.status-dot.offline{background:var(--text-muted)}.status-dot.ready{background:var(--accent-yellow);box-shadow:0 0 6px var(--accent-yellow)}.loading-spinner{border:3px solid var(--border-color);border-top-color:var(--accent-blue);border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.loading-page{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100vh;display:flex}.loading-page .loading-spinner{width:40px;height:40px}.character-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin:16px 0;display:grid}.character-card{background:var(--bg-secondary);border:2px solid var(--border-color);text-align:center;cursor:pointer;transition:var(--transition-fast);border-radius:10px;padding:8px;position:relative;overflow:hidden}.character-card:hover:not(.disabled):not(.banned){border-color:var(--accent-cyan);transform:translateY(-2px);box-shadow:0 4px 15px #06b6d433}.character-card.selected{border-color:var(--accent-blue);background:#3b82f61a;box-shadow:0 0 15px #3b82f666}.character-card.banned{opacity:.4;cursor:not-allowed;border-color:var(--accent-red)}.character-card.banned:after{content:"BANNED";color:#fff;letter-spacing:2px;background:#ef4444d9;border-radius:3px;padding:2px 10px;font-size:11px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-15deg)}.character-card.disabled{opacity:.5;cursor:not-allowed}.character-card .char-image{object-fit:cover;background:var(--bg-primary);border-radius:8px;width:80px;height:80px;margin:0 auto 6px;display:block}.character-card .char-image.placeholder{color:var(--text-muted);justify-content:center;align-items:center;font-size:28px;display:flex}.character-card .char-name{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.countdown-bar{background:var(--bg-secondary);border-radius:2px;height:4px;margin:12px 0;position:relative;overflow:hidden}.countdown-bar .bar-fill{border-radius:2px;height:100%;transition:width 1s linear}.countdown-bar .bar-fill.safe{background:var(--accent-green)}.countdown-bar .bar-fill.warning{background:var(--accent-yellow)}.countdown-bar .bar-fill.danger{background:var(--accent-red)}.countdown-text{text-align:center;font-variant-numeric:tabular-nums;font-size:48px;font-weight:800}.countdown-text.safe{color:var(--accent-green)}.countdown-text.warning{color:var(--accent-yellow)}.countdown-text.danger{color:var(--accent-red);animation:1s infinite pulse-danger}@keyframes pulse-danger{0%,to{opacity:1}50%{opacity:.5}}.toast{z-index:1000;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:500;animation:.3s toast-in;position:fixed;top:20px;left:50%;transform:translate(-50%)}.toast.error{color:#fff;border:1px solid var(--accent-red);background:#ef4444e6}.toast.success{color:#fff;border:1px solid var(--accent-green);background:#22c55ee6}.toast.info{color:#fff;border:1px solid var(--accent-blue);background:#3b82f6e6}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(-10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.vs-divider{justify-content:center;align-items:center;padding:10px 0;display:flex}.vs-divider span{background:linear-gradient(135deg, var(--team1-color), var(--team2-color));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;padding:0 20px;font-size:24px;font-weight:800}@media (width<=768px){.bp-container{padding:12px}.bp-header h1{font-size:22px}.character-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}.character-card .char-image{width:60px;height:60px}.countdown-text{font-size:36px}}