:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.game-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;background:linear-gradient(135deg,#0a0a1a,#1a0a2a);overflow:hidden;-webkit-user-select:none;user-select:none}.title-screen{text-align:center;animation:fadeIn .6s ease-out}.title-screen h1{font-size:3.5rem;font-weight:900;letter-spacing:-.03em;margin:0 0 .5rem;background:linear-gradient(135deg,#ff6b6b,orange,#4ecdc4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none}.title-screen .subtitle{color:#ffffff80;font-size:1.1rem;margin-bottom:2rem}.btn{display:inline-block;padding:.9rem 2.5rem;border:none;border-radius:.6rem;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .15s ease;letter-spacing:.02em}.btn:active{transform:scale(.96)}.btn-primary{background:linear-gradient(135deg,#4ecdc4,#44a08d);color:#fff;box-shadow:0 4px 20px #4ecdc44d}.btn-primary:hover{box-shadow:0 6px 28px #4ecdc473;transform:translateY(-1px)}.hud{width:100%;max-width:700px;display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:.6rem 1.2rem;background:#ffffff0a;border-radius:.6rem;border:1px solid rgba(255,255,255,.06)}.hud-item{display:flex;flex-direction:column;align-items:center;gap:.15rem}.hud-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.15em;color:#fff6}.hud-value{font-size:1.1rem;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.arena{width:100%;max-width:700px;position:relative;display:flex;flex-direction:column;align-items:center;gap:.75rem}.teams-row{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 1rem}.team{display:flex;flex-direction:column;align-items:center;gap:.3rem}.team-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:#ffffff80}.team-players{display:flex;gap:.3rem}.player-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:transform .1s ease}.player-icon.pulling{animation:pullPulse .15s ease infinite}.team-player{background:#2a5a4a;border:2px solid #4ecdc4}.team-enemy{background:#5a2a2a;border:2px solid #ff6b6b}.rope-container{width:100%;height:56px;position:relative;display:flex;align-items:center;border-radius:.5rem;overflow:hidden;background:#ffffff05;border:1px solid rgba(255,255,255,.05)}.rope-track{width:100%;height:14px;background:linear-gradient(90deg,#3a2a1a,#5a4a3a,#3a2a1a);border-radius:7px;position:relative;box-shadow:inset 0 2px 6px #00000080}.rope-knot{position:absolute;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 35%,gold,#c90);border:3px solid #aa7700;box-shadow:0 2px 12px #ffd70066;z-index:2;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:900;color:#5a4400;transition:left .05s linear}.rope-center-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3px;height:30px;background:#fff3;border-radius:2px}.zone-markers{width:100%;display:flex;justify-content:space-between;padding:0 1rem}.zone-marker{font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;color:#fff3}.pull-area{width:100%;display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:.5rem}.pull-btn{width:180px;height:180px;border-radius:50%;border:4px solid #4ecdc4;background:radial-gradient(circle at 40% 40%,#4ecdc426,#4ecdc40d);color:#4ecdc4;font-size:1.1rem;font-weight:800;cursor:pointer;transition:all .08s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;box-shadow:0 0 30px #4ecdc426;position:relative;overflow:hidden}.pull-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle,rgba(78,205,196,.2),transparent 70%);opacity:0;transition:opacity .1s}.pull-btn:active:before{opacity:1}.pull-btn:active{transform:scale(.94);border-color:#7ee8e0;box-shadow:0 0 50px #4ecdc459}.pull-btn .tap-icon{font-size:2.5rem}.pull-btn .tap-hint{font-size:.65rem;opacity:.5;font-weight:400}.powerup-row{display:flex;gap:.6rem;margin-top:.25rem}.powerup-slot{width:52px;height:52px;border-radius:.5rem;border:2px solid rgba(255,255,255,.1);background:#ffffff08;display:flex;align-items:center;justify-content:center;font-size:1.5rem;cursor:pointer;transition:all .15s ease;position:relative}.powerup-slot.available{border-color:#ffd70066;background:#ffd70014;animation:powerupGlow 2s ease-in-out infinite}.powerup-slot.available:hover{transform:scale(1.08);border-color:#ffd700b3}.powerup-slot .key-hint{position:absolute;bottom:-4px;right:-4px;font-size:.5rem;background:#ffffff26;color:#fff9;padding:.1rem .3rem;border-radius:.2rem;font-weight:600}.status-bar{display:flex;gap:.5rem;min-height:28px;align-items:center}.status-effect{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:1rem;font-size:.7rem;font-weight:600;animation:fadeIn .3s ease}.status-buff{background:#4ecdc426;border:1px solid rgba(78,205,196,.3);color:#4ecdc4}.status-debuff{background:#ff6b6b26;border:1px solid rgba(255,107,107,.3);color:#ff6b6b}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease}.overlay-card{text-align:center;padding:2.5rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:1rem;max-width:360px;width:90%;animation:scaleIn .3s ease}.overlay-card h2{font-size:2rem;margin:0 0 .5rem;font-weight:800}.overlay-card .stars{font-size:2.5rem;margin:.5rem 0 1rem;letter-spacing:.15em}.overlay-card p{color:#ffffff8c;font-size:.9rem;margin-bottom:1.5rem}.overlay-card .btn{margin:0 .3rem}.win h2{color:#4ecdc4}.lose h2{color:#ff6b6b}.level-select{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;max-width:400px;margin:1.5rem 0}.level-btn{aspect-ratio:1;border:2px solid rgba(255,255,255,.1);border-radius:.5rem;background:#ffffff08;color:#fff9;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .15s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem}.level-btn .level-stars{font-size:.5rem;letter-spacing:.05em}.level-btn.completed{border-color:#4ecdc466;background:#4ecdc40f}.level-btn.current{border-color:#ffd70080;background:#ffd70014;color:gold;animation:powerupGlow 2s ease-in-out infinite}.level-btn.locked{opacity:.3;cursor:not-allowed}.level-btn:not(.locked):hover{transform:scale(1.05);border-color:#ffffff4d}.countdown{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:50;background:#0009;font-size:6rem;font-weight:900;animation:fadeIn .2s ease}.speed-meter{width:100%;max-width:700px;display:flex;justify-content:center;gap:2rem;margin-top:.25rem}.speed-indicator{display:flex;flex-direction:column;align-items:center;gap:.2rem}.speed-bar-bg{width:120px;height:8px;background:#ffffff0f;border-radius:4px;overflow:hidden}.speed-bar-fill{height:100%;border-radius:4px;transition:width .15s ease}.speed-bar-fill.player{background:linear-gradient(90deg,#4ecdc4,#44a08d)}.speed-bar-fill.enemy{background:linear-gradient(90deg,#ff6b6b,#c44)}.speed-label{font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;color:#ffffff4d}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pullPulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}@keyframes powerupGlow{0%,to{box-shadow:0 0 5px #ffd7001a}50%{box-shadow:0 0 15px #ffd70040}}@keyframes shakeX{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.shake{animation:shakeX .15s ease 2}.particle-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:200;overflow:hidden}.particle{position:absolute;border-radius:50%;pointer-events:none;animation:particleFly .8s ease-out forwards}@keyframes particleFly{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}}@media(max-width:600px){.pull-btn{width:140px;height:140px;font-size:.95rem}.pull-btn .tap-icon{font-size:2rem}.title-screen h1{font-size:2.2rem}.level-select{grid-template-columns:repeat(5,1fr);gap:.4rem}.hud{flex-wrap:wrap;gap:.5rem;justify-content:center}}