@import url('/fonts.css');
:root{font-family:Arial,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;color:#f2f5ee;background:#101916;font-synthesis:none;--lime:#c6f76a;--mint:#68d9b0;--orange:#f58c73;--muted:#9ba9a0}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;color:inherit;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:5px}button:disabled{opacity:.4;cursor:wait}.hidden{display:none!important}#scene{position:fixed;inset:0}#scene canvas{width:100%;height:100%;display:block}.grain{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#101916 0%,#101916ec 23%,#10191680 44%,transparent 66%),linear-gradient(0deg,#101916ba,transparent 20%)}header{position:relative;z-index:3;height:110px;display:flex;align-items:center;padding:0 5%;gap:30px}.brand{display:flex;gap:12px;font-size:15px;line-height:1.02;font-weight:900;letter-spacing:1px}.brand-symbol{font-size:48px;font-style:italic;color:var(--lime);line-height:.85;letter-spacing:-10px;margin-right:12px}.brand-symbol span{font-size:28px;vertical-align:top}.brand-sub{display:block;font-size:7px;letter-spacing:2px;margin-top:7px;color:#a8b6ab}nav{display:flex;align-items:center;gap:30px;margin-left:auto;font-size:12px;color:#c3ccc4}nav button:last-child{border:1px solid #68756b;width:24px;height:24px;border-radius:50%}.account{border:1px solid #7e8d7b66;border-radius:5px;padding:12px 16px;font-size:12px;background:#17251db0}main{position:relative;height:calc(100svh - 110px);min-height:580px;pointer-events:none}main button,main a{pointer-events:auto}.hero{width:390px;margin-left:8%;padding-top:25px}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:2.4px;color:#b9c4b9;display:flex;align-items:center;gap:8px}.eyebrow i,.live-dot{background:var(--lime);width:5px;height:5px;border-radius:50%;display:inline-block;box-shadow:0 0 10px #c6f76988}h1{font-size:clamp(52px,5.8vw,82px);line-height:1.12;letter-spacing:-5px;margin:28px 0 22px;font-weight:900}h1 em{font-style:normal;color:var(--lime)}.intro{color:#a8b5ad;font-size:14px;line-height:1.9;margin-bottom:28px}.mode-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#8e9f93;margin-bottom:12px}.mode-label span:last-child{letter-spacing:0}.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}.modes button{border:1px solid #526150;border-radius:6px;padding:13px 0 10px;font-weight:bold;font-size:22px;background:#16241ddd}.modes button span{font-size:9px;margin:0 7px;color:#90a18f}.modes small{display:block;font-size:8px;letter-spacing:2px;margin-top:7px;color:#9cac9f}.modes button.selected{border-color:var(--lime);background:#c6f76a16}.modes .selected small{color:var(--lime)}.primary{width:100%;padding:18px 21px;background:var(--lime);color:#162316;border-radius:5px;font-weight:bold;font-size:15px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 8px 35px #a9ee4c09}.primary:hover{background:#d6ff87}.primary span{font-size:22px;line-height:1}.secondary{border:1px solid #455445;border-radius:5px;width:100%;padding:15px 18px;display:flex;justify-content:space-between;gap:12px;font-size:12px;background:#142019d9;margin-top:10px}.secondary span{color:#a0ae9e;font-size:10px}.hint{font-size:10px;color:#899a8e;line-height:1.8;margin:13px 0}.court-label{position:absolute;left:57%;top:9%;font-size:10px;letter-spacing:2px;color:#d7e2d4;display:flex;align-items:center;gap:10px}.court-label b{font-size:8px;font-weight:normal;border-left:1px solid #627062;padding-left:12px;color:#9da999}.hero-number{position:absolute;right:6%;bottom:14%;font-size:100px;color:#cadbb327;letter-spacing:-9px;font-weight:900;font-style:italic}.hero-number span{display:block;font-size:8px;letter-spacing:2px;line-height:1.7;color:#9aa891;font-style:normal;margin-top:-10px;text-align:right}footer{position:absolute;bottom:26px;left:5%;right:5%;display:flex;justify-content:space-between;border-top:1px solid #53604b66;padding-top:17px;font-size:9px;letter-spacing:1.8px;color:#9ca895}footer i{font-style:normal;margin:0 15px;color:#53634e}footer button{font-size:10px;letter-spacing:0}.panel{position:absolute;z-index:5;left:50%;top:52%;transform:translate(-50%,-50%);width:min(520px,92vw);padding:36px;background:#14211ef5;border:1px solid #48594d;border-radius:12px;box-shadow:0 30px 90px #0008;max-height:82svh;overflow:auto}h2{font-size:38px;letter-spacing:-1.7px;margin:20px 0 12px}h3{font-size:10px;letter-spacing:1.5px}.panel>p,dialog>p{font-size:12px;color:#a7b6ab;line-height:1.7}.teams{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:22px 0}.teams>div{background:#213128;padding:12px;border-radius:5px}.teams ul{list-style:none;padding:0;font-size:12px;line-height:2.2;margin-bottom:0}.teams li.ai{color:#718779}.mint{color:var(--mint)}.orange{color:var(--orange)}.room-actions{display:flex;gap:10px;margin-bottom:15px}.text-button{display:block;margin:18px auto 0;color:#a3b2a7;font-size:12px}#hud{position:fixed;inset:0;pointer-events:none}.scoreboard{position:absolute;left:50%;top:22px;transform:translateX(-50%);display:flex;gap:20px;align-items:center;padding:12px 22px;background:#101916ee;border:1px solid #5e745566;border-radius:8px;font-size:12px;letter-spacing:2px}.scoreboard b{font-size:28px;white-space:nowrap}.scoreboard i{font-style:normal;color:#6b7a66;margin:0 8px}.scoreboard time{font-size:13px;border-left:1px solid #5e745566;padding-left:20px;letter-spacing:1px}.exit{pointer-events:auto;position:absolute;right:25px;top:30px;background:#14211ede;padding:10px 16px;border:1px solid #5e745566;border-radius:5px;font-size:11px}.player-hud{position:absolute;bottom:45px;left:30px;background:#101916da;padding:15px 20px;border-radius:8px;width:210px;font-size:11px;letter-spacing:1px}.player-hud>span+span{float:right;font-size:10px;color:var(--lime)}.stamina{height:4px;background:#506047;margin-top:14px;overflow:hidden}.stamina i{height:100%;display:block;background:var(--lime);transform-origin:left}.player-hud small{font-size:7px;color:#9bab96}.desktop-keys{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;color:#bac7b4;background:#101916c9;border-radius:4px;padding:9px}kbd{font-family:inherit;font-size:10px;border:1px solid #6e7c6866;border-radius:3px;padding:3px 5px;margin:0 4px 0 10px;color:#e5eddf}#announcement{position:absolute;top:30%;left:0;right:0;text-align:center;font-size:clamp(40px,7vw,100px);font-weight:900;letter-spacing:-3px;color:var(--lime);text-shadow:0 5px 30px #000;transform:skew(-8deg)}#charge{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);width:150px;height:6px;background:#182117b0;border-radius:4px;overflow:hidden;display:none}#charge i{display:block;height:100%;background:var(--lime);width:0}#result-score{font-size:70px;letter-spacing:8px;font-weight:bold;margin:15px 0}#match-stats{display:flex;gap:20px;color:#b1c0af;font-size:12px;padding:15px 0;border-block:1px solid #42503c}.coach{margin:25px 0}.coach small{color:var(--lime);font-size:8px;letter-spacing:2px}.coach p{font-size:12px;line-height:1.8;color:#b1c0af}dialog{color:#eef3e9;border:1px solid #51654b;border-radius:12px;background:#14211e;padding:36px;width:min(600px,92vw);max-height:90svh;box-shadow:0 30px 120px #0008}dialog::backdrop{background:#050c09a8;backdrop-filter:blur(8px)}.close{position:absolute;right:18px;top:12px;font-size:27px;color:#bac6b7}.periods{display:flex;gap:8px;margin:24px 0}.periods button{flex:1;padding:10px;background:#26352a;border-radius:4px;font-size:12px}.periods .selected{background:var(--lime);color:#14211e}.empty{padding:35px 20px;border:1px dashed #4c5f47;border-radius:6px;text-align:center;color:#a2b39b;font-size:13px;line-height:1.9}.rank-row{display:flex;gap:16px;padding:15px 8px;border-bottom:1px solid #33432f;font-size:13px}.rank-row strong{margin-left:auto;color:var(--lime)}.rank-row:first-child{background:#c6f76a10;border-radius:4px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.help-grid p{font-size:11px;color:#9baa94;line-height:1.7}.help-grid kbd{display:inline-block;margin:0}.help-grid b{display:block;font-size:13px;color:#e0e9db;margin-top:7px}#toast{position:fixed;z-index:50;bottom:30px;left:50%;transform:translateX(-50%) translateY(90px);background:#d9f0c8;color:#1c2d16;padding:14px 24px;border-radius:5px;font-size:12px;transition:transform .2s;max-width:90vw;text-align:center}#toast.show{transform:translateX(-50%)}#rotate{display:none}.touch-actions,#joystick{display:none}body.playing header,body.playing .grain{display:none}body.in-room .grain{background:#10191655}
@media(min-width:1400px){.hero{padding-top:60px;width:420px}.intro{margin-bottom:40px}}
@media(max-height:780px) and (min-width:901px){header{height:85px}.hero{padding-top:5px}h1{font-size:62px;margin:20px 0 14px}.intro{margin-bottom:20px}.modes button{padding:10px 0 8px}main{height:calc(100svh - 85px);min-height:0}.hero-number{bottom:15%}footer{bottom:18px}}
@media(max-width:900px){header{height:75px;padding:0 5%}.brand{font-size:11px}.brand-symbol{font-size:35px}.brand-sub{font-size:6px}nav{gap:15px}.account{font-size:10px;padding:10px}nav a{display:none}main{min-height:0;height:calc(100svh - 75px)}.hero{width:330px;margin-left:6%;padding-top:25px}h1{font-size:56px}.court-label{display:none}.hero-number{font-size:75px}.grain{background:linear-gradient(90deg,#101916f5,#101916b8 45%,#10191620)}footer{font-size:7px}.desktop-keys{display:none}.touch-actions{display:block;position:absolute;right:24px;bottom:28px;width:200px;height:150px;pointer-events:none}.touch-actions button{pointer-events:auto;touch-action:none;position:absolute;border:1px solid #b1c69a66;border-radius:50%;background:#203527c9;font-size:12px;font-weight:bold;user-select:none}.touch-actions .shot{right:0;bottom:0;width:82px;height:82px;background:#c6f76ada;color:#182a12}.touch-actions .pass{right:97px;bottom:0;width:66px;height:66px}.touch-actions .sprint{right:65px;bottom:88px;width:54px;height:54px}.touch-actions .switch{right:135px;bottom:77px;width:54px;height:54px}#joystick{display:block;pointer-events:auto;position:absolute;bottom:34px;left:42px;width:120px;height:120px;border-radius:50%;border:1px solid #a2bf9166;background:#11221880;touch-action:none}#joystick>div{position:absolute;left:37px;top:37px;width:46px;height:46px;border-radius:50%;background:#bfd8a688;border:1px solid #d3edb599}.player-hud{bottom:170px;left:35px;background:#10191699;padding:10px 12px;width:150px;font-size:9px}.player-hud>span+span{font-size:8px}.scoreboard{top:12px;padding:9px 15px;font-size:10px;gap:14px}.scoreboard b{font-size:23px}.exit{top:17px;right:17px}.stamina{margin-top:8px}}
@media(max-width:900px) and (orientation:landscape){header{height:55px}.brand{font-size:9px}.brand-symbol{font-size:29px}.brand-sub{display:none}main{height:calc(100svh - 55px)}.hero{width:290px;margin-left:5%;padding-top:4px}.eyebrow{font-size:8px}h1{font-size:39px;letter-spacing:-2px;line-height:1.06;margin:12px 0}.intro{font-size:10px;line-height:1.6;margin:0 0 12px}.mode-label{font-size:7px;margin-bottom:7px}.modes{gap:6px;margin-bottom:8px}.modes button{font-size:17px;padding:7px 0}.modes small{font-size:6px;margin-top:3px}.primary{font-size:12px;padding:12px 16px}.secondary{font-size:10px;padding:10px 12px;margin-top:7px}.hint{font-size:8px;margin:7px 0}.hero>.hint{display:none}footer{display:none}.hero-number{bottom:12%;right:8%}.panel{padding:22px;max-height:92svh;top:50%;width:470px}h2{font-size:28px;margin:12px 0}.teams{margin:12px 0}.teams ul{line-height:1.7;font-size:10px}.teams>div{padding:7px 12px}.teams h3{margin:5px 0}.room-actions{margin-bottom:10px}.text-button{margin-top:10px}.panel>.hint{display:none}#result-score{font-size:38px;margin:10px 0}.coach{margin:10px 0}.coach p{margin:5px 0}dialog{padding:24px}.help-grid{gap:4px}.help-grid p{margin:6px 0}.touch-actions{transform:scale(.92);transform-origin:bottom right;bottom:16px;right:20px}#joystick{width:100px;height:100px;left:30px;bottom:22px}#joystick>div{left:27px;top:27px}.player-hud{bottom:132px;left:24px;padding:8px 10px}.player-hud small{display:none}}
@media(max-width:600px) and (orientation:portrait){body{overflow:auto}.hero{width:auto;margin:0 7%;padding-top:30px}h1{font-size:64px}.hero-number{display:none}header{gap:10px}nav{gap:12px}nav button{font-size:10px}.account{font-size:9px;padding:8px}main{min-height:710px}.grain{background:linear-gradient(90deg,#101916e8,#101916a8)}footer{bottom:22px}footer span{font-size:7px;letter-spacing:.3px}footer i{margin:0 5px}body.playing #rotate{position:fixed;inset:0;z-index:20;background:#101916f5;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;font-size:65px;color:var(--lime)}#rotate b{font-size:22px;color:white}#rotate span{font-size:12px;color:#a2b395}.panel{padding:25px}.help-grid{gap:8px}}

/* Locale control and room for longer English labels. */
#language{font:inherit;font-size:12px;color:#e7efdf;background:#17251d;border:1px solid #7e8d7b66;border-radius:5px;padding:10px 6px;max-width:100px}#language:focus-visible{outline:2px solid var(--lime);outline-offset:3px}html[lang=en] h1{letter-spacing:-3px;font-size:clamp(48px,5.2vw,74px)}html[lang=en] .touch-actions .shot{font-size:10px}html[lang=en] .desktop-keys{font-size:9px}.empty{white-space:pre-line}@media(max-width:900px){header{gap:12px}#language{font-size:10px;padding:8px 4px;max-width:75px}html[lang=en] nav{gap:12px}html[lang=en] .room-actions .secondary{font-size:10px}}@media(max-width:900px) and (orientation:landscape){html[lang=en] h1{font-size:38px}html[lang=en] .hero .intro{font-size:10px}html[lang=en] .mode-label{letter-spacing:0}}@media(max-width:600px) and (orientation:portrait){header{flex-wrap:wrap;height:auto;min-height:88px;padding-top:12px;padding-bottom:12px;gap:10px}nav{gap:10px}#language{margin-left:auto}html[lang=en] h1{font-size:54px}}

/* Team play HUD: callouts, pass chain, situation hint and radar. */
#announcement-sub{position:absolute;top:calc(30% + clamp(52px,8.5vw,118px));left:0;right:0;text-align:center;font-size:15px;font-weight:bold;letter-spacing:1px;color:#f2f7ec;text-shadow:0 2px 12px #000}
#callout{position:absolute;top:96px;left:50%;transform:translate(-50%,-8px);opacity:0;transition:opacity .15s,transform .15s;padding:9px 18px;border-radius:999px;background:#101916e6;border:1px solid #6e8a6466;font-size:13px;font-weight:bold;white-space:nowrap}#callout.show{opacity:1;transform:translate(-50%,0)}#callout.good{color:var(--lime);border-color:#c6f76a88}#callout.bad{color:var(--orange);border-color:#f58c7388}#callout.team{color:#101916;background:var(--mint);border-color:var(--mint)}
#radar{position:absolute;right:25px;bottom:25px;width:210px;height:133px;background:#0c1612d9;border:1px solid #5e745566;border-radius:8px}
#chain{position:absolute;left:30px;bottom:132px;display:none;align-items:baseline;gap:10px;padding:10px 16px;background:#101916da;border:1px solid #c6f76a66;border-radius:8px}#chain.show{display:flex;animation:pop .25s}#chain small{font-size:8px;letter-spacing:2px;color:#a9b8a2}#chain b{font-size:26px;color:var(--lime);font-style:italic}#chain span{font-size:11px;color:#dfe9d6}
@keyframes pop{from{transform:scale(.85);opacity:.3}to{transform:none;opacity:1}}
#context{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);padding:9px 16px;border-radius:6px;background:#101916d0;font-size:12px;color:#dfe9d6;white-space:nowrap;max-width:min(640px,60vw);overflow:hidden;text-overflow:ellipsis}#context:empty{display:none}#context.ball{color:#f4fbe9;border-left:3px solid #fff}#context.solo{color:#1d0f0a;background:var(--orange);font-weight:bold;animation:pulse .8s infinite alternate}#context.support{border-left:3px solid var(--mint)}#context.defend{border-left:3px solid var(--orange)}#context.loose{border-left:3px solid var(--lime)}
@keyframes pulse{to{opacity:.72}}
.stamina i.low{background:var(--orange)}
.teams li.me{color:#fff;font-weight:bold}.teams .role{float:right;font-size:9px;letter-spacing:1px;padding:1px 7px;margin-top:6px;line-height:1.6;border:1px solid #6d8268;border-radius:999px;color:#c7d6c0}
.squad-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 0}.squad-guide small{grid-column:1/-1;font-size:8px;letter-spacing:2px;color:var(--lime)}.squad-guide p{margin:0;font-size:10px;line-height:1.55;color:#a6b6a8;background:#1b2a22;border-radius:5px;padding:9px 10px}.squad-guide b{display:block;font-size:11px;color:#e6efe0;margin-bottom:3px}
#match-stats{display:grid;grid-template-columns:1fr auto 1fr;gap:6px 18px;text-align:center;align-items:center}#match-stats b{font-size:17px;color:#eef5e8}#match-stats>span:not(.mint):not(.orange){font-size:11px;color:#9fb09c}#match-stats .mint,#match-stats .orange{font-size:10px;letter-spacing:2px;font-weight:bold}
#player-stats{margin-top:14px;display:grid;gap:6px}.player-row{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:9px 12px;background:#1b2a22;border-radius:5px;font-size:11px;color:#b9c7b5}.player-row>span:first-child{font-weight:bold;font-size:12px;min-width:90px}.player-row.me{outline:1px solid #c6f76a55}.player-row em{margin-left:auto;font-style:normal;font-size:9px;letter-spacing:1px;font-weight:bold;color:#13200f;background:var(--lime);border-radius:999px;padding:3px 9px}
@media(max-width:900px){#radar{right:auto;left:14px;bottom:auto;top:12px;width:124px;height:79px}#chain{left:auto;right:17px;bottom:auto;top:62px;padding:6px 10px}#chain b{font-size:19px}#chain span{display:none}#context{bottom:12px;font-size:10px;padding:6px 10px;max-width:38vw}#callout{top:62px;font-size:11px}#announcement-sub{font-size:12px}.squad-guide{grid-template-columns:1fr}.squad-guide p{padding:7px 9px}}
@media(max-height:520px){.squad-guide{display:none}#player-stats{margin-top:8px}.player-row{padding:6px 10px}#match-stats{gap:2px 14px}#match-stats b{font-size:14px}}

/* Keep touch controls clear of system gestures and prevent selection during play. */
body.playing{overscroll-behavior:none;user-select:none;-webkit-user-select:none}
.touch-actions{margin-right:env(safe-area-inset-right);margin-bottom:env(safe-area-inset-bottom)}
#joystick{margin-left:env(safe-area-inset-left);margin-bottom:env(safe-area-inset-bottom)}
.touch-actions button:active{filter:brightness(1.25);border-color:var(--lime)}