*{margin:0;padding:0;box-sizing:border-box}html,body,#app{width:100%;height:100%;overflow:hidden;background:#0b1020;font-family:Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}#game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}#hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}#loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(ellipse at center,#14224a,#0b1020 70%);color:#fff;z-index:50;transition:opacity .4s ease}#loading.hidden{opacity:0;pointer-events:none}.loading-title{font-size:42px;font-weight:800;letter-spacing:6px}.loading-bar{width:320px;height:8px;border-radius:4px;background:#ffffff26;overflow:hidden}.loading-fill{width:0%;height:100%;border-radius:4px;background:linear-gradient(90deg,#27ae60,#2ecc71);transition:width .2s ease}.loading-label{font-size:13px;opacity:.7}.scoreboard{position:absolute;top:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;background:#080c1ad1;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 16px;color:#fff}.scoreboard .team{display:flex;align-items:center;gap:7px;font-weight:700;font-size:15px;letter-spacing:1px}.scoreboard .swatch{width:14px;height:14px;border-radius:3px}.scoreboard .score{font-size:22px;font-weight:800;min-width:46px;text-align:center}.scoreboard .clock{font-size:14px;opacity:.85;min-width:44px;text-align:center;font-variant-numeric:tabular-nums}.player-card{position:absolute;left:16px;bottom:16px;background:#080c1ad1;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 14px;color:#fff;min-width:190px}.player-card .name{font-weight:700;font-size:14px;margin-bottom:6px}.player-card .bar{height:6px;border-radius:3px;background:#ffffff26;overflow:hidden;margin-top:3px}.player-card .bar-fill{height:100%;border-radius:3px;background:#2ecc71}.player-card .bar-fill.low{background:#e67e22}.player-card .bar-label{font-size:10px;opacity:.65;text-transform:uppercase;letter-spacing:1px}.player-card .charge{margin-top:6px}.player-card .charge .bar-fill{background:#e74c3c}.banner{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%) scale(.9);font-size:64px;font-weight:900;letter-spacing:10px;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.6);opacity:0;transition:opacity .25s ease,transform .25s ease}.banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.banner .sub{display:block;text-align:center;font-size:18px;letter-spacing:3px;font-weight:600;opacity:.85}.nameplate{position:absolute;bottom:12%;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;background:#080c1ad9;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:12px 22px;color:#fff;font-size:22px;font-weight:800;letter-spacing:2px;opacity:0;transition:opacity .2s ease}.nameplate.show{opacity:1}.nameplate .swatch{width:16px;height:16px;border-radius:4px}.nameplate .np-team{font-size:12px;font-weight:600;opacity:.7;letter-spacing:3px}.nameplate .np-skip{font-size:10px;opacity:.45;letter-spacing:1px;margin-left:12px}.menu{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#14224a,#0b1020 70%);z-index:60}.menu.hidden{display:none}.menu-panel{display:flex;flex-direction:column;gap:12px;background:#0a0f20eb;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:34px 40px;color:#fff;min-width:340px;max-width:92vw}.menu-panel.wide{min-width:560px}.menu-title{font-size:40px;font-weight:900;letter-spacing:8px;text-align:center;margin-bottom:10px}.menu-title.small{font-size:24px;letter-spacing:4px;margin-bottom:4px}.menu-name{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:1px;opacity:.9}.menu-name input{padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#ffffff14;color:#fff;font-size:15px;outline:none}.menu-btn{padding:12px;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:#ffffff12;color:#fff;font-weight:800;letter-spacing:2px;font-size:14px;cursor:pointer}.menu-btn:hover{background:#ffffff24}.menu-btn.primary{background:#2ecc71;border-color:#2ecc71;color:#06220f}.menu-btn.primary:hover{background:#40d980}.menu-btn.tiny{padding:6px 12px;font-size:11px}.menu-btn:disabled{opacity:.4;cursor:default}.menu-row{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}.menu-msg{text-align:center;font-size:12px;opacity:.75;min-height:16px}.menu-hint{text-align:center;font-size:11px;opacity:.45}.menu-hint code{background:#ffffff1a;padding:1px 5px;border-radius:4px}.room-list{display:flex;flex-direction:column;gap:8px;max-height:40vh;overflow-y:auto}.room-row{display:flex;align-items:center;gap:12px;background:#ffffff0d;border-radius:8px;padding:10px 14px}.room-row .room-name{font-weight:700;flex:1}.room-row .room-meta{font-size:11px;opacity:.7}.lobby-sub{text-align:center;font-size:11px;letter-spacing:1px;opacity:.7}.pitch-map{position:relative;width:100%;aspect-ratio:40 / 24;background:linear-gradient(90deg,#2e8b3d,#27793a,#2e8b3d);border:2px solid rgba(255,255,255,.5);border-radius:8px;margin:6px 0}.pitch-center-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#ffffff80}.pitch-center-circle{position:absolute;left:50%;top:50%;width:18%;aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.5);border-radius:50%}.slot-circle{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;cursor:pointer;-webkit-user-select:none;user-select:none;border:2px solid rgba(255,255,255,.75);transition:transform .1s ease}.slot-circle.home{background:#c0392b}.slot-circle.away{background:#2980b9}.slot-circle:not(.keeper):not(.claimed):hover{transform:translate(-50%,-50%) scale(1.15)}.slot-circle.keeper{background:#666;opacity:.65;cursor:default;font-size:10px}.slot-circle.claimed{border-color:#f1c40f;cursor:default}.slot-circle.mine{box-shadow:0 0 0 4px #2ecc71a6}.slot-name{position:absolute;top:105%;left:50%;transform:translate(-50%);font-size:10px;font-weight:700;white-space:nowrap;background:#080c1ad9;border-radius:4px;padding:1px 6px}.ai-toggle{position:absolute;top:14px;right:16px;pointer-events:auto;padding:8px 14px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:#080c1ad1;color:#7fd4ff;font-weight:700;font-size:13px;letter-spacing:1px;cursor:pointer}.ai-toggle:hover{background:#141c34e6}.ai-toggle.ai{color:#f1c40f}.pause-menu{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0508129e;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:40}.pause-menu.show{opacity:1;pointer-events:auto}.pause-panel{background:#0a0f20f2;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:28px 34px;color:#fff;min-width:320px;display:flex;flex-direction:column;gap:16px}.pause-title{font-size:26px;font-weight:800;letter-spacing:6px;text-align:center;margin-bottom:6px}.pause-row{display:grid;grid-template-columns:56px 1fr 48px;align-items:center;gap:10px;font-size:13px;letter-spacing:1px}.pause-row input[type=range]{width:100%;accent-color:#2ecc71;cursor:pointer}.pause-val{text-align:right;font-variant-numeric:tabular-nums;opacity:.8}.pause-resume{margin-top:6px;padding:10px;border:none;border-radius:8px;background:#2ecc71;color:#06220f;font-weight:800;letter-spacing:2px;font-size:14px;cursor:pointer}.pause-resume:hover{background:#40d980}.pause-hint{text-align:center;font-size:11px;opacity:.5}.help{position:absolute;right:16px;bottom:16px;background:#080c1ad1;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 14px;color:#fff;font-size:12px;line-height:1.7}.help b{display:inline-block;min-width:52px;color:#7fd4ff;font-weight:700}