@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Space+Grotesk:wght@400;600;700&display=swap');
:root{--bg:#07111f;--panel:#0d1a2c;--panel2:#12243a;--line:#253b55;--text:#edf7ff;--muted:#84a1b8;--cyan:#45f0dc;--coral:#ff5c7a;--gold:#ffd166;--shadow:0 24px 80px #0008}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 12% 8%,#123b50 0,transparent 32%),radial-gradient(circle at 90% 82%,#3a173b 0,transparent 33%),var(--bg);color:var(--text);font-family:'Space Grotesk',Pretendard,sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#fff03 1px,transparent 1px),linear-gradient(90deg,#fff03 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(#0005,transparent 80%)}button,input,select{font:inherit}.app-shell{width:min(1500px,100%);margin:auto;padding:18px}header{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff18;margin-bottom:16px}.brand{display:flex;align-items:center;gap:12px}.mark{display:grid;place-items:center;width:46px;height:46px;border:1px solid #56ffe0;border-radius:50%;color:var(--cyan);font-size:25px;box-shadow:0 0 28px #45f0dc55}.brand b{display:block;letter-spacing:.13em}.brand small,.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--cyan);font-weight:700}.head-actions{display:flex;align-items:center;gap:10px}.net{border:1px solid #1d634f;border-radius:99px;padding:7px 12px;font-size:11px;color:#76e8bf}.net:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#48f2ae;margin-right:6px;box-shadow:0 0 8px #48f2ae}.net.offline{color:#f78b9e;border-color:#683044}.net.offline:before{background:#ff5c7a}.icon-btn,.mini-btn{border:1px solid var(--line);background:#0d1b2c;color:var(--text);border-radius:12px;padding:9px 12px}.icon-btn{width:39px;height:39px;padding:0}main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px}.arena-card,.score-card,.control-card,.info-card{background:linear-gradient(145deg,#0c192aee,#0a1525e8);border:1px solid #29415a;border-radius:22px;box-shadow:var(--shadow)}.arena-card{padding:14px}.arena-top{display:flex;justify-content:space-between;align-items:center;padding:3px 6px 12px}.arena-top strong{display:block;margin-top:4px}.room-code{border:1px solid #ffd16666;background:#ffd16612;color:var(--gold);border-radius:10px;padding:8px 12px;font-weight:700;letter-spacing:.12em}.canvas-shell{position:relative;border-radius:16px;overflow:hidden;background:#bce8ec;box-shadow:inset 0 0 0 1px #fff8}canvas{display:block;width:100%;aspect-ratio:1200/620;touch-action:none}.toast,.emote-bubble{position:absolute;left:50%;transform:translateX(-50%);opacity:0;transition:.2s;pointer-events:none}.toast{bottom:18px;background:#07111edd;border:1px solid #4c677d;border-radius:99px;padding:8px 14px;font-size:12px}.toast.show{opacity:1}.emote-bubble{top:20%;font-size:42px;filter:drop-shadow(0 6px 8px #0008);transform:translate(-50%,-10px) scale(.6)}.emote-bubble.show{opacity:1;transform:translate(-50%,0) scale(1)}.mobile-help{text-align:center;color:var(--muted);font-size:11px;margin-top:9px}.hud{display:flex;flex-direction:column;gap:12px}.score-card,.control-card,.info-card{padding:15px}.end-line{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;font-weight:700}.end-line #clock{color:var(--gold);font-size:16px}.teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:8px}.team{text-align:center}.team span,.team small{display:block}.team span{font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.team b{display:block;font-family:'Black Han Sans',sans-serif;font-size:48px;line-height:1}.team small{font-size:10px;letter-spacing:2px}.team.cyan span,.team.cyan small{color:var(--cyan)}.team.coral span,.team.coral small{color:var(--coral)}.vs{color:#50677b;font-size:11px}.turn-pill{text-align:center;margin-top:9px;background:#13253a;border-radius:9px;padding:7px;font-size:11px}.shot-rock{text-align:center;color:#7896ad;font-size:9px;letter-spacing:.06em;margin-top:7px}.canvas-shell.impact{animation:impactFlash .18s ease-out}@keyframes impactFlash{50%{box-shadow:inset 0 0 0 5px #fff,0 0 34px #45f0dc99}}.control-card.disabled{opacity:.45;pointer-events:none}.control-head{display:flex;justify-content:space-between;align-items:center}.manual-control{display:none!important}.pull-guide{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px;padding:11px;border:1px dashed #36536c;border-radius:12px;background:#0a1726;color:#abc1d2;font-size:10px}.pull-guide strong{color:var(--cyan)}.pull-guide small{grid-column:1/-1;text-align:center;color:#7896ad}.pull-guide small b{color:#fff;font-size:12px}.control-card .shot-actions{grid-template-columns:1fr}.control-head b{display:block;margin-top:3px}.control-card label{display:block;margin-top:12px;color:#b3c5d4;font-size:11px}.control-card output{float:right;color:#fff;font-weight:700}input[type=range]{width:100%;accent-color:var(--cyan);margin-top:8px}.shot-actions{display:grid;grid-template-columns:1.2fr 1fr;gap:8px;margin-top:14px}.shoot,.sweep,.result-panel button,.join-box button{border:0;border-radius:12px;padding:12px;font-weight:700}.shoot{background:linear-gradient(135deg,#2df0d6,#3b8dff);color:#061421;box-shadow:0 8px 22px #3be4da33}.sweep{background:#243950;color:#dbeaff;border:1px solid #3a5570}.sweep.active{background:linear-gradient(135deg,#ffd166,#ff8c42);color:#251400}.stamina{display:grid;grid-template-columns:auto 1fr 26px;gap:8px;align-items:center;margin-top:12px;font-size:8px;color:var(--muted)}.stamina i{height:5px;border-radius:9px;background:#25394e;overflow:hidden}.stamina i b{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff9b54,#45f0dc)}.emotes{display:flex;gap:5px;margin-top:12px}.emotes button{flex:1;min-width:0;border:1px solid #2a4159;background:#101f31;color:#e8f3fb;border-radius:8px;padding:6px 2px;font-size:10px}.tabs{display:flex;gap:4px;border-bottom:1px solid #21374f;padding-bottom:8px}.tabs button{flex:1;border:0;background:transparent;color:#718da4;padding:6px;font-size:10px}.tabs button.on{color:var(--cyan)}.tab-pane{color:#8fa8bc;font-size:11px;line-height:1.55}.tab-pane ul{padding-left:18px}.event-log{max-height:120px;overflow:auto}.event-log div{padding:5px 0;border-bottom:1px dashed #25394c}.hidden{display:none!important}.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:#040b14df;backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:.25s}.overlay.show{opacity:1;pointer-events:auto}.lobby-panel{display:grid;grid-template-columns:.85fr 1.15fr;width:min(940px,100%);max-height:calc(100vh - 30px);overflow:auto;border:1px solid #31516d;border-radius:28px;background:#091522;box-shadow:0 35px 120px #000}.lobby-hero{position:relative;overflow:hidden;padding:48px;background:radial-gradient(circle at 20% 30%,#38e8d766,transparent 38%),linear-gradient(145deg,#07334b,#13152f)}.lobby-hero:after{content:"";position:absolute;width:330px;height:330px;border:55px solid #ffffff0c;border-radius:50%;right:-160px;bottom:-110px}.lobby-hero>span{font-size:52px;color:var(--cyan)}.lobby-hero h1{font-family:'Black Han Sans';font-size:52px;line-height:.9;letter-spacing:.02em;margin:25px 0 15px}.lobby-hero p{color:#a6c4d4;line-height:1.6}.lobby-body{padding:34px}.lobby-body h2{margin:8px 0 18px}.mode-grid.compact{grid-template-columns:1fr 1fr}.create-room{margin-top:13px;padding:12px;border:1px solid #294158;border-radius:13px;background:#0a1828}.create-room>div{display:grid;grid-template-columns:minmax(0,1fr) 82px 126px;gap:6px;margin-top:8px}.create-room input,.create-room select{min-width:0;border:1px solid #294158;background:#0c1a2a;color:#fff;border-radius:9px;padding:10px}.create-room button{border:0;border-radius:9px;background:linear-gradient(135deg,#2df0d6,#3b8dff);color:#061421;font-weight:800}.room-browser{margin-top:12px;border:1px solid #294158;border-radius:13px;overflow:hidden}.browser-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#102237}.browser-head button{border:0;background:transparent;color:var(--cyan);font-size:10px}.room-list{max-height:210px;overflow:auto;padding:6px}.room-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border-bottom:1px solid #20374c}.room-row:last-child{border:0}.room-row b,.room-row small{display:block}.room-row b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-row small{color:#7f9cb1;font-size:9px;margin-top:4px}.room-actions{display:flex;gap:4px}.room-actions button{border:1px solid #31516a;background:#142a3d;color:#dceef8;border-radius:8px;padding:7px;font-size:9px}.room-actions button.join{background:#31dcc8;color:#06151b;border:0;font-weight:800}.room-actions button:disabled{opacity:.4}.room-empty{text-align:center;color:#708ba0;padding:22px;font-size:11px}.code-entry{margin-top:10px;color:#718da4;font-size:10px}.code-entry summary{cursor:pointer;text-align:center}.code-entry[open] summary{margin-bottom:4px}.name-field{display:block;color:#6f8ca4;font-size:10px;letter-spacing:.1em}.name-field input,.join-box input,.options select{width:100%;margin-top:6px;border:1px solid #294158;background:#0c1a2a;color:#fff;border-radius:10px;padding:11px;outline:none}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.mode-grid button{min-height:92px;text-align:left;border:1px solid #294158;background:#0d1c2d;color:#fff;border-radius:13px;padding:12px;transition:.15s}.mode-grid button:hover{transform:translateY(-2px);border-color:#45f0dc}.mode-grid button span,.mode-grid button b,.mode-grid button small{display:block}.mode-grid button span{color:var(--cyan);font-size:20px}.mode-grid button b{margin-top:7px}.mode-grid button small{color:#7590a5;margin-top:3px}.options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.options label{color:#6f8ca4;font-size:9px}.join-box{display:grid;grid-template-columns:1fr auto auto;gap:5px;margin-top:12px}.join-box button{margin-top:6px;background:#44ead6;color:#06131c}.join-box button:last-child{background:#283d52;color:#e5f3fa}.queue{margin-top:14px;text-align:center;color:#9fc0d0}.queue i{display:inline-block;width:10px;height:10px;border:2px solid #45f0dc;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.result-panel{width:min(430px,100%);text-align:center;border:1px solid #34516a;border-radius:22px;background:#0b1928;padding:35px;box-shadow:var(--shadow)}.result-panel h2{font-family:'Black Han Sans';font-size:38px;margin:12px}.result-panel button{width:100%;margin-top:8px;background:var(--cyan);color:#08141c}.result-panel .ghost{background:#182b3e;color:#d9ebf5}.final-score{font-family:'Black Han Sans';font-size:58px;color:var(--gold)}.lobby-help{position:relative;z-index:2;margin-top:18px;border:1px solid #80fff099;background:#07182799;color:#dffefa;border-radius:99px;padding:9px 14px;font-weight:700}.help-panel{width:min(680px,100%);max-height:calc(100vh - 28px);overflow:auto;border:1px solid #365875;border-radius:24px;background:linear-gradient(145deg,#0c1d30,#08131f);padding:24px;box-shadow:var(--shadow)}.help-head{display:flex;justify-content:space-between;align-items:center}.help-head h2{margin:5px 0 12px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.help-grid article{border:1px solid #29445d;background:#0d1c2c;border-radius:14px;padding:14px}.help-grid article b{color:var(--cyan)}.help-grid article p{color:#9eb7c9;font-size:12px;line-height:1.55;margin:8px 0 0}.help-keys{display:flex;gap:12px;margin-top:12px;padding:12px;border-radius:10px;background:#132840;color:#9eb7c9;font-size:11px}.help-keys b{color:var(--gold)}.help-done{width:100%;margin-top:12px;border:0;border-radius:12px;padding:13px;background:linear-gradient(135deg,#2df0d6,#3b8dff);color:#061421;font-weight:800}.icon-btn.muted{opacity:.45;text-decoration:line-through}
@media(max-width:1000px){main{grid-template-columns:1fr}.hud{display:grid;grid-template-columns:1fr 1.25fr}.info-card{grid-column:1/-1}.canvas-shell{max-height:58vh}}@media(max-width:650px){.app-shell{padding:8px}header{height:58px;margin-bottom:8px}.brand b{font-size:12px}.brand small{font-size:8px}.mark{width:36px;height:36px}.net{font-size:9px;padding:6px 8px}main{display:block}.canvas-shell{max-height:none}.arena-card{padding:7px;border-radius:15px}.arena-top{padding:4px 4px 8px}.arena-top strong{font-size:12px}.hud{display:flex;margin-top:8px}.score-card,.control-card,.info-card{border-radius:15px;padding:11px}.score-card{order:-1}.team b{font-size:38px}.control-card label{margin-top:8px}.lobby-panel{grid-template-columns:1fr}.lobby-hero{padding:15px 20px}.lobby-hero>span{font-size:30px}.lobby-hero h1{font-size:29px;margin:5px 0}.lobby-hero p{font-size:10px;margin:5px 0}.lobby-help{margin-top:7px;padding:7px 11px;font-size:10px}.lobby-body{padding:18px}.lobby-body h2{font-size:22px;margin-bottom:12px}.mode-grid button{min-height:75px}.mobile-help{font-size:9px}canvas{min-height:0;aspect-ratio:620/1200}.shot-actions{position:sticky;bottom:4px}.info-card{display:none}.head-actions{gap:4px}.head-actions .icon-btn{width:32px;height:32px}.help-grid{grid-template-columns:1fr}.create-room>div{grid-template-columns:minmax(0,1fr) 76px}.create-room button{grid-column:1/-1;padding:10px}.room-row{grid-template-columns:1fr}.room-actions button{flex:1}.help-panel{padding:17px}.help-grid article{padding:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}