:root { color-scheme:dark; --blue:#39a8ff; --red:#ff5268; --lime:#b6f23a; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:#f6fbff; font-family:Inter,Pretendard,"Noto Sans KR",system-ui,sans-serif; background:radial-gradient(circle at 50% -20%,#194534 0,#091713 43%,#050a09 100%); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.25; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:32px 32px; }
button,a { -webkit-tap-highlight-color:transparent; }
.game-shell { width:min(1180px,100%); margin:auto; padding:18px clamp(12px,3vw,28px) 30px; }
.game-header { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.brand { color:#fff; text-decoration:none; display:flex; align-items:center; gap:10px; }
.brand img { width:42px; height:42px; border-radius:11px; box-shadow:0 0 24px rgba(57,168,255,.2); }
.brand span { display:grid; line-height:1; letter-spacing:.08em; }
.brand b { font-size:16px; }.brand small { margin-top:5px;color:var(--lime);font-size:10px;letter-spacing:.3em; }
.mode-badge { padding:8px 14px; border:1px solid rgba(182,242,58,.23); border-radius:99px; color:#cfe5da; font-size:11px; letter-spacing:.12em; background:rgba(3,15,11,.65); }
.mode-badge i { display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 9px var(--lime);margin-right:7px; }
.sound-button { width:38px;height:38px;border-radius:10px;border:1px solid #29463b;background:#0b1d17;color:#fff;cursor:pointer; }
.scoreboard { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:min(600px,100%);margin:4px auto 10px;background:#07110e;border:1px solid #29463b;border-radius:12px;box-shadow:0 12px 30px #0007;overflow:hidden; }
.team { height:54px;display:flex;align-items:center;gap:15px;padding:0 22px;font-size:12px;font-weight:800;letter-spacing:.13em; }
.team b { font-size:28px; }.team.blue { justify-content:flex-end;background:linear-gradient(90deg,transparent,rgba(57,168,255,.13)); }.team.blue b{color:var(--blue)}
.team.red { background:linear-gradient(90deg,rgba(255,82,104,.13),transparent); }.team.red b{color:var(--red)}
.match-clock { align-self:stretch;min-width:102px;display:grid;place-content:center;text-align:center;background:#0d1c17;border-inline:1px solid #29463b; }.match-clock span{font-size:8px;color:#789286;letter-spacing:.18em}.match-clock b{font-size:21px;font-variant-numeric:tabular-nums;}
.pitch-frame { position:relative;overflow:hidden;border:2px solid #284e40;border-radius:18px;background:#123d28;box-shadow:0 22px 70px #000a,0 0 0 1px #07100d; }
canvas { display:block;width:100%;height:auto;aspect-ratio:16/10; }
.start-layer { position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(2,11,8,.72);backdrop-filter:blur(6px);transition:.25s; }
.start-layer.hidden { opacity:0;pointer-events:none; }
.start-card { width:min(570px,94%);text-align:center;padding:34px;border:1px solid #467263;border-radius:20px;background:linear-gradient(145deg,rgba(11,34,26,.97),rgba(4,16,12,.97));box-shadow:0 25px 80px #000b; }
.eyebrow { color:var(--lime);font-size:10px;font-weight:900;letter-spacing:.34em; }.start-card h1{margin:10px 0 7px;font-size:clamp(24px,4vw,42px);letter-spacing:-.04em}.start-card p{margin:0;color:#9eb5ab;font-size:13px;}
.control-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:25px 0; }.control-grid span{display:grid;gap:8px;padding:11px 5px;border:1px solid #28483c;border-radius:10px;background:#091b15}.control-grid small{color:#9fb7ac;font-size:11px}
kbd { display:inline-block;padding:4px 7px;border:1px solid #557166;border-bottom-width:3px;border-radius:5px;color:#fff;background:#152b23;font:700 10px/1 system-ui;box-shadow:0 2px 0 #000; }
.start-card button { border:0;border-radius:10px;padding:14px 28px;color:#07110d;background:var(--lime);font-weight:900;font-size:14px;cursor:pointer;box-shadow:0 8px 25px rgba(182,242,58,.2);}.start-card button strong{margin-left:9px;font-size:9px;opacity:.6;}
.lobby-form{display:grid;grid-template-columns:1fr 120px 120px;gap:8px;margin:20px 0 10px}.lobby-form input,.lobby-form select{min-width:0;border:1px solid #34594b;border-radius:9px;padding:11px;color:#fff;background:#091b15;outline:none}.lobby-form button,.join-row button{padding:10px!important}.join-row{grid-column:1/-1;display:grid;grid-template-columns:1fr 90px;gap:8px}.room-panel{margin:18px 0}.room-code-line{color:#8aa499;font-size:10px;letter-spacing:.2em}.room-code-line button{margin-left:8px;padding:8px 14px!important;border:1px solid #527566!important;background:#0b2118!important;color:var(--lime)!important;font-size:18px!important;letter-spacing:.18em}.roster{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.roster>div{min-height:54px;padding:9px;border-radius:9px;background:#091b15;border:1px solid #29483c;text-align:left;font-size:11px}.roster b{display:block;margin-bottom:5px}.roster .blue-side b{color:var(--blue)}.roster .red-side b{color:var(--red)}.lobby-status{min-height:18px;margin-top:10px;color:#8fa99e;font-size:11px}.lobby-status.error{color:#ff7889}.position-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:9px}.position-picker button{padding:8px 5px!important;border:1px solid #35564a!important;background:#10251d!important;color:#c4d8cf!important;font-size:10px!important}.position-picker button.selected{border-color:#b6f23a!important;color:#b6f23a!important;box-shadow:0 0 0 1px #b6f23a inset}
.message { position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;padding:10px 22px;border-radius:8px;color:#fff;background:#06120ee8;font-size:clamp(20px,4vw,42px);font-weight:1000;font-style:italic;letter-spacing:.04em;text-shadow:0 3px 0 #000;transition:.18s;white-space:nowrap; }.message.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.game-footer { min-height:52px;display:flex;align-items:center;gap:18px;padding:10px 4px;color:#94a99f;font-size:10px; }.stamina-wrap{display:flex;align-items:center;gap:9px;letter-spacing:.12em}.stamina{width:105px;height:7px;background:#1d332b;border-radius:9px;overflow:hidden}.stamina i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#63cbff,var(--lime));transition:width .08s}.quick-controls{display:flex;gap:15px;margin:auto}.quick-controls span{display:flex;align-items:center;gap:6px}.game-footer button{color:#a9beb5;background:transparent;border:1px solid #2b473c;border-radius:8px;padding:8px 11px;cursor:pointer;}
.meters{display:grid;gap:5px}.shot-wrap{opacity:.35;transition:opacity .12s}.shot-wrap.active{opacity:1}.shot i{width:0;background:linear-gradient(90deg,#ffe66b,#ff4e50);box-shadow:0 0 8px #ff654d}
@media(max-width:650px){.mode-badge{display:none}.scoreboard{margin-top:7px}.team{padding:0 9px;gap:8px;font-size:9px}.match-clock{min-width:78px}.control-grid{display:none}.start-card{padding:18px 12px}.start-card p{display:none}.lobby-form{grid-template-columns:1fr 100px}.lobby-form>button{grid-column:1/-1}.position-picker{grid-template-columns:1fr 1fr}.quick-controls{display:none}.game-footer{justify-content:space-between}.pitch-frame{border-radius:10px}.message{top:40%}}