@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#10151b;--panel:#151c24;--line:rgba(215,229,233,.13);--muted:#8b989f;--text:#f0f3ef;--acid:#d7ff5f;--coral:#ff796e;--cyan:#68e5e1;--font:'Noto Sans KR',sans-serif;--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif}*{box-sizing:border-box;-webkit-user-select:none;user-select:none}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,a:focus-visible{outline:none}button{transition:background .16s,transform .16s,opacity .16s}button:active:not(:disabled){transform:translateY(1px)}button:hover:not(:disabled){filter:brightness(1.08)}a{color:inherit;text-decoration:none}.hidden{display:none!important}#stage{position:fixed;inset:0}#stage canvas{display:block;width:100%;height:100%}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#10151b 0%,rgba(16,21,27,.98) 25%,rgba(16,21,27,.4) 51%,transparent 75%),linear-gradient(0deg,rgba(10,16,22,.95),transparent 24%,transparent 80%,rgba(10,16,22,.6));transition:opacity .4s}.topbar{height:99px;position:relative;display:flex;align-items:center;padding:0 4.6%;border-bottom:1px solid var(--line);z-index:10;background:linear-gradient(#10151b80,transparent)}.brand{display:flex;gap:12px;align-items:center;font-family:var(--display);font-size:31px;font-weight:800;letter-spacing:1px;line-height:.9}.brand small{display:block;font-family:var(--font);font-size:8px;letter-spacing:3.2px;margin-top:9px;color:#8c989e}.brand-mark{width:35px;display:flex;gap:4px;transform:skew(-25deg)}.brand-mark i{width:7px;height:31px;background:var(--acid)}.brand-mark i:nth-child(2){height:23px;margin-top:8px}.brand-mark i:nth-child(3){height:15px;margin-top:16px}.top-nav{display:flex;gap:37px;align-items:center;margin-left:82px;font-size:11px;font-weight:600;letter-spacing:1px;height:100%}.nav-active{color:var(--acid);height:100%;display:flex;align-items:center;position:relative}.nav-active:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--acid)}.text-button{background:none;border:0;padding:0;color:#a9b3b8;font-size:11px}.connection{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:11px;color:#aeb9be}.status-dot,.tiny-dot{height:5px;width:5px;background:var(--muted);display:inline-block;border-radius:50%}.status-dot.connected{background:var(--acid);box-shadow:0 0 8px #d7ff5f66}.status-dot.connecting{background:#e3b66d;animation:pulse 1s infinite}.status-dot.error{background:var(--coral)}#latency{color:var(--acid);font-variant-numeric:tabular-nums;margin-left:6px}.welcome{position:absolute;top:99px;bottom:77px;left:4.6%;right:4.6%;display:grid;grid-template-columns:46% 54%;pointer-events:none}.intro{padding-top:43px;pointer-events:auto;width:min(440px,100%);align-self:start}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;color:#bcc9cf;display:flex;align-items:center;gap:10px}.mini-cross{color:var(--acid);font-size:17px}.intro h1{font-family:var(--display);font-size:clamp(60px,6.1vw,96px);letter-spacing:-.5px;font-weight:800;line-height:.91;margin:23px 0 22px}.intro h1>span{color:var(--acid)}.intro-copy{color:#aab6bd;line-height:1.9;font-size:13px;margin:0 0 28px;font-weight:400;letter-spacing:-.2px}.entry-card{max-width:360px;border:1px solid var(--line);background:#121a22dc;box-shadow:0 15px 45px #0002}.entry-tabs{height:47px;display:flex;border-bottom:1px solid var(--line)}.entry-tabs>button{flex:1;display:flex;justify-content:space-between;align-items:center;border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);font-size:11px;font-weight:600;padding:0 20px}.entry-tabs>button:last-child{border-right:0}.entry-tabs>button.active{background:#202b2b;color:var(--acid);box-shadow:inset 0 -2px var(--acid)}.entry-tabs>button>span{font-size:19px}#connect-form{padding:17px 20px 13px}.input-label{display:flex;justify-content:space-between;font-size:10px;font-weight:500;color:#c5cfd4;margin-bottom:8px}.input-label>span{color:#6c7d86;font-size:9px}input{width:100%;height:41px;border:1px solid #33414c;background:#0c141c;color:var(--text);padding:0 12px;outline:0;font-size:12px;border-radius:0}input::placeholder{color:#62747f}#room-field{margin-top:12px}#room-input{text-transform:uppercase;letter-spacing:5px;font-family:var(--display);font-size:20px}.primary-button{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:var(--acid);color:#17201d;min-height:44px;padding:0 16px;font-size:12px;font-weight:800;gap:12px}.primary-button span:last-child{font-size:22px;font-weight:400}#connect-button{margin-top:12px}.form-note{font-size:9px;color:#72848f;text-align:center;margin-top:13px;display:flex;justify-content:center;gap:7px;align-items:center}.form-note .tiny-dot{background:#769486;width:4px;height:4px}.intro-foot{display:flex;gap:22px;color:#667a87;font-size:9px;margin-top:23px;letter-spacing:.5px}.intro-foot>span:first-child{color:#879aa4}.arena-preview{position:relative;pointer-events:none}.preview-tag{position:absolute;right:0;top:35px;font-family:var(--display);font-size:13px;letter-spacing:2px;display:flex;gap:10px;align-items:center;color:#bac9d1}.preview-tag .tiny-dot{background:var(--acid)}.preview-tag>span:last-child:not(.tiny-dot){border-left:1px solid #56656a;padding-left:14px;margin-left:8px;color:#788c96}.arena-title{position:absolute;top:78px;left:15%;transform:rotate(-5deg);color:#effbff14;font-family:var(--display);line-height:1;letter-spacing:2px}.arena-title>span{font-size:36px;display:block;font-weight:700}.arena-title strong{font-size:clamp(110px,12vw,190px);font-weight:800}.arena-title small{display:block;font-size:11px;color:#798c9980;letter-spacing:5px}.preview-caption{position:absolute;bottom:85px;left:14%;right:0;display:flex;align-items:center;gap:15px;border-top:1px solid var(--line);padding-top:19px}.crosshair-icon{color:var(--acid);font-size:32px}.preview-caption strong{font-size:12px;display:block;letter-spacing:-.5px}.preview-caption div>span{font-size:10px;color:#8194a0;display:block;margin-top:7px}.preview-arrow{margin-left:auto;font-size:25px;color:var(--acid)}.preview-corner{position:absolute;bottom:23px;right:0;font-family:var(--display);font-size:14px;text-align:right;line-height:1.8;letter-spacing:2px;color:#a0b7c2}.preview-corner>span{font-family:var(--font);font-size:8px;letter-spacing:2px;color:#647b88}.control-strip{position:absolute;bottom:0;left:0;right:0;height:77px;display:flex;align-items:center;justify-content:center;gap:25px;background:#10171de6;border-top:1px solid var(--line);z-index:10;backdrop-filter:blur(15px)}.control-strip>div{display:flex;align-items:center;gap:8px}.control-strip span{font-size:9px;color:#8c9ea9}kbd{font-family:var(--display);display:inline-flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.5px;border:1px solid #34424c;min-height:23px;padding:0 7px;color:#b7c7ce;background:#17222b70;border-radius:2px}.control-strip button{background:none;border:0;border-left:1px solid var(--line);padding-left:25px;font-family:var(--display);font-size:12px;letter-spacing:1px;color:#798c97}.control-strip button>span{color:var(--acid);margin-left:6px;font-family:var(--display);font-size:12px}.error{color:#ffc5bd;background:#ff796e12;border-left:2px solid var(--coral);padding:10px;line-height:1.6;font-size:10px;margin:10px 0 0}.room-panel{position:absolute;top:124px;bottom:97px;left:4.6%;width:330px;background:#111923ee;border:1px solid var(--line);padding:20px 22px;z-index:12;overflow:auto;backdrop-filter:blur(20px)}.panel-eyebrow{display:flex;gap:8px;align-items:center;font-family:var(--display);font-size:11px;letter-spacing:1.6px;color:var(--acid)}.panel-eyebrow .tiny-dot{background:var(--acid)}.icon-button{margin-left:auto;border:1px solid var(--line);background:transparent;height:24px;width:27px;color:var(--muted)}.room-panel h2{font-size:22px;letter-spacing:-1px;margin:13px 0 7px}.muted{color:var(--muted);font-size:10px;margin:0}.room-code{display:flex;width:100%;justify-content:space-between;align-items:center;background:#26302755;border:1px dashed #80975770;padding:12px 13px;margin:20px 0;color:var(--acid)}.room-code small{display:block;font-family:var(--display);font-size:9px;letter-spacing:2px;text-align:left;color:#aebc9e}.room-code strong{font-size:29px;font-family:var(--display);letter-spacing:5px;display:block;margin-top:3px}.room-code>span:last-child{font-size:10px}.roster-head{display:flex;justify-content:space-between;font-size:11px;color:#9cafba;margin-bottom:13px}.roster-head b{color:#e7f1f3}.team-head{display:flex;justify-content:space-between;font-family:var(--display);font-size:10px;letter-spacing:1.5px;margin:10px 0 5px}.team-head small{font-size:8px;color:#556b78}.coral{color:var(--coral)}.cyan{color:var(--cyan)}.slot{height:34px;border-bottom:1px solid #25333c;display:flex;align-items:center;gap:9px;font-size:10px}.slot .slot-avatar{display:flex;align-items:center;justify-content:center;width:23px;height:23px;background:#ff796e18;border:1px solid #ff796e40;color:var(--coral);font-family:var(--display);font-size:13px}.team-roster[data-team="1"] .slot-avatar{background:#68e5e118;border-color:#68e5e140;color:var(--cyan)}.slot.empty{color:#516673}.slot.empty .slot-avatar{color:#526672;border-style:dashed;background:transparent;border-color:#33424c}.slot .slot-badge{font-size:8px;margin-left:auto;color:#829897}.slot.disconnected{opacity:.4}.lobby-note{font-size:9px;line-height:1.7;color:#90a4b0;margin:18px 0 10px}.secondary-button{width:100%;height:38px;margin-top:8px;background:transparent;border:1px solid #3b4b56;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:10px}.secondary-button span{font-family:var(--display);font-size:10px;color:#94a5ac}.room-foot{font-size:8px;color:#566c7b;text-align:center;margin-bottom:0}.scoreboard{position:absolute;top:111px;left:50%;transform:translateX(-50%);display:flex;align-items:center;background:#101820d9;border:1px solid var(--line);height:71px;min-width:300px;z-index:8;backdrop-filter:blur(8px)}.score-team{display:flex;align-items:center;justify-content:center;gap:15px;padding:0 16px;min-width:103px}.score-team>span{font-family:var(--display);font-weight:600;letter-spacing:1px;font-size:13px}.score-team>strong{font-family:var(--display);font-size:38px}.score-center{text-align:center;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0 17px;min-width:101px}.score-center>span{display:block;font-family:var(--display);font-size:9px;letter-spacing:2px;color:var(--acid)}.score-center>strong{display:block;font-family:var(--display);font-size:24px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}.score-center>small{font-family:var(--display);font-size:8px;letter-spacing:1px;color:#7c929e}.match-location{position:absolute;left:4.6%;top:124px;font-family:var(--display);letter-spacing:1.5px;font-size:14px;color:#a6bbc6}.match-location small{display:block;font-size:10px;color:#738895;margin-top:5px}.hud-room-button{position:absolute;right:4.6%;top:124px;background:#15202be0;border:1px solid var(--line);padding:8px 10px;font-size:10px;display:flex;align-items:center;gap:15px}.crosshair{position:absolute;top:50%;left:50%;width:32px;height:32px;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 3px #000)}.crosshair>i{position:absolute;background:#f2fff1;width:2px;height:7px;left:15px;top:0}.crosshair>i:nth-child(2){top:auto;bottom:0}.crosshair>i:nth-child(3){width:7px;height:2px;left:0;top:15px}.crosshair>i:nth-child(4){width:7px;height:2px;left:auto;right:0;top:15px}.crosshair>span{width:3px;height:3px;position:absolute;left:14.5px;top:14.5px;border-radius:50%;background:var(--acid)}.crosshair.charged>i{background:var(--acid)}.self-hud{position:absolute;left:4.6%;bottom:112px;display:flex;align-items:center;gap:13px;background:#121b24c0;padding:12px 17px 12px 12px;border-left:2px solid var(--coral)}.player-avatar{display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:33px;background:#ff796e22;width:47px;height:54px;color:var(--coral);transform:skew(-5deg)}.self-hud div{display:flex;flex-direction:column;gap:3px}.self-hud small{font-family:var(--display);font-size:9px;letter-spacing:1.5px;color:var(--coral)}.self-hud strong{font-size:12px}.hearts{color:var(--coral);letter-spacing:4px;font-size:17px;line-height:1.2}.abilities{position:absolute;right:4.6%;bottom:113px;display:flex;gap:7px}.abilities>div{background:#111d28de;border:1px solid #45607466;position:relative;width:58px;height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;overflow:hidden}.abilities kbd{font-size:10px;background:#182a36;position:relative;z-index:1}.abilities span{font-size:9px;color:#b1c5cd;position:relative;z-index:1}.abilities i{position:absolute;inset:0;background:#ff796e33;transform-origin:bottom;transform:scaleY(0);transition:transform .07s}.kill-feed{position:absolute;right:4.6%;top:190px;display:flex;flex-direction:column;gap:5px}.feed-item{background:#111c26da;border-right:2px solid var(--acid);padding:9px 12px;font-size:10px;animation:feed-in .2s ease}.feed-item span{color:#75919e;margin:0 7px}.action-flash{position:absolute;top:35%;left:50%;transform:translateX(-50%);font-family:var(--display);font-weight:800;font-size:42px;letter-spacing:4px;color:var(--acid);opacity:0;transition:opacity .15s;text-shadow:0 3px 25px #000}.action-flash.active{animation:flash .85s both}.resume-overlay{position:absolute;inset:99px 0 77px;display:flex;align-items:center;justify-content:center;z-index:11;pointer-events:none}.resume-overlay button{pointer-events:auto;padding:24px 36px;text-align:center;border:1px solid #a6bd6855;background:#15221fe8;backdrop-filter:blur(16px);color:var(--text);display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 30px 100px #0005}.resume-overlay button>span{color:var(--acid);font-size:22px}.resume-overlay strong{font-size:17px}.resume-overlay small{font-size:9px;color:#9fb0af}.respawn{position:absolute;top:39%;left:50%;transform:translate(-50%,-50%);text-align:center;background:#10202be6;border:1px solid #5f859860;padding:20px 40px}.respawn span,.respawn small{display:block;color:#adc1ce;font-size:12px}.respawn strong{display:block;font-family:var(--display);font-size:65px;color:var(--acid)}.respawn small{font-size:10px}.end-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:14;width:420px;text-align:center;background:#111c24f2;border:1px solid var(--line);padding:40px;backdrop-filter:blur(20px);box-shadow:0 20px 150px #0009}.end-panel .eyebrow{justify-content:center;color:var(--acid)}.end-panel h2{font-family:var(--display);font-size:62px;line-height:1;margin:25px 0 15px}.end-panel #end-score{font-family:var(--display);font-size:35px;letter-spacing:7px}.end-panel p{font-size:11px;color:var(--muted);margin:22px 0}.toast{position:fixed;bottom:92px;left:50%;transform:translateX(-50%);z-index:50;border:1px solid #667e6866;background:#1b2b24ed;color:#e0f3cd;font-size:11px;padding:13px 20px;max-width:80vw;box-shadow:0 10px 30px #0004}dialog{border:1px solid #60737066;background:#121d26;color:var(--text);width:min(720px,92vw);padding:40px;box-shadow:0 40px 150px #0008}dialog::backdrop{background:#071015b8;backdrop-filter:blur(8px)}.dialog-close{position:absolute;right:16px;top:12px;background:none;border:0;color:#849daa;font-size:28px}dialog h2{font-size:36px;letter-spacing:-2px;line-height:1.25;margin:20px 0}dialog h2 span{color:var(--acid)}dialog>p{color:#9bb0bc;line-height:1.8;font-size:12px;max-width:510px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0}.guide-grid b{font-family:var(--display);color:var(--acid);font-size:24px}.guide-grid h3{font-size:13px}.guide-grid p{font-size:10px;color:#9bb0bc;line-height:1.9}.guide-note{padding:15px;border:1px solid #4b67734d;font-size:10px;color:#8ba7b7;line-height:1.8;margin-bottom:23px}.in-game .vignette{opacity:0}.in-game .topbar{height:76px;background:#0a152280}.in-game .scoreboard{top:92px}.in-game .match-location,.in-game .hud-room-button{top:100px}.in-game .control-strip{height:60px}.in-game .self-hud,.in-game .abilities{bottom:82px}.in-game .control-strip div:nth-child(2){display:none}.in-game .top-nav{opacity:.5}.in-room .arena-preview{display:none}.in-room .match-location{display:none}.name-tag{position:fixed;pointer-events:none;transform:translate(-50%,-100%);font-size:10px;font-weight:600;text-shadow:0 1px 4px #000,0 1px 6px #000;white-space:nowrap;text-align:center}.name-tag .tag-health{display:block;color:currentColor;font-size:8px;letter-spacing:3px;margin-top:2px}.name-tag .tag-dot{font-size:7px;margin-right:4px}@keyframes pulse{50%{opacity:.35}}@keyframes feed-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}@keyframes flash{0%{opacity:0;transform:translate(-50%,15px) scale(.9)}20%,65%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-10px)}}@media(min-height:950px){.intro{padding-top:65px}.intro h1{font-size:105px;margin-bottom:25px}.intro-copy{margin-bottom:35px}.entry-card{max-width:375px}.preview-caption{bottom:105px}}@media(max-height:800px) and (min-width:900px){.topbar{height:78px}.welcome{top:78px;bottom:60px}.intro{padding-top:26px}.intro h1{font-size:68px;margin:18px 0}.intro-copy{font-size:11px;margin-bottom:20px}.entry-tabs{height:38px}#connect-form{padding:12px 17px}.control-strip{height:60px}.intro-foot{margin-top:16px}.room-panel{top:95px;bottom:77px;padding:15px 20px}.room-panel h2{font-size:20px}.room-code{margin:14px 0;padding:9px 12px}.slot{height:30px}.lobby-note{margin-top:12px}.scoreboard{top:92px}.match-location,.hud-room-button{top:100px}}@media(max-width:1050px){.topbar{padding:0 30px}.welcome{left:30px;right:30px;grid-template-columns:48% 52%}.top-nav{margin-left:50px;gap:24px}.control-strip{gap:16px}.control-strip>div{gap:5px}.control-strip button{padding-left:15px}.intro h1{font-size:75px}.preview-caption{left:6%}.room-panel{left:30px;width:300px}.scoreboard{left:65%}}@media(max-width:760px){html,body{overflow:auto;min-height:100%}.topbar{height:78px;padding:0 22px}.brand{font-size:26px}.brand small{font-size:7px;letter-spacing:2px}.brand-mark{width:28px;gap:3px}.brand-mark i{width:6px;height:26px}.brand-mark i:nth-child(2){height:20px;margin-top:6px}.brand-mark i:nth-child(3){height:14px;margin-top:12px}.top-nav{display:none}.connection{font-size:9px}.welcome{position:relative;top:auto;bottom:auto;left:auto;right:auto;display:block;padding:0 24px 110px}.intro{padding-top:35px;width:100%;max-width:430px}.intro h1{font-size:77px;line-height:.9}.intro-copy{font-size:12px}.entry-card{max-width:370px}.intro-foot{font-size:8px;gap:16px}.arena-preview{display:none}.vignette{background:linear-gradient(90deg,#10151be8,#10151b96),linear-gradient(0deg,#10151b,transparent)}.control-strip{position:fixed;height:62px;gap:14px;justify-content:flex-start;padding:0 24px;overflow-x:auto;white-space:nowrap}.control-strip>div{flex-shrink:0}.control-strip button{flex-shrink:0}.room-panel{position:relative;top:auto;bottom:auto;left:auto;margin:23px auto 90px;width:calc(100% - 40px);max-width:390px}.scoreboard{top:93px;left:50%;min-width:290px}.in-room .scoreboard{display:none}.self-hud{left:20px;bottom:79px;padding:8px}.abilities{right:20px;bottom:80px}.abilities>div{width:45px;height:61px}.hud-room-button{right:20px;top:176px}.match-location{display:none}.kill-feed{right:20px;top:223px}.end-panel{width:calc(100% - 40px);padding:30px}.end-panel h2{font-size:51px}.guide-grid{grid-template-columns:1fr;gap:8px;margin:20px 0}.guide-grid article{display:grid;grid-template-columns:30px 1fr;gap:0 10px}.guide-grid h3{margin:5px 0}.guide-grid p{grid-column:2;margin:0}dialog{padding:25px}dialog h2{font-size:30px}.resume-overlay button{padding:22px;max-width:90vw}.resume-overlay small{line-height:1.8}.in-game .topbar{height:70px}.in-game .control-strip div{display:none}.in-game .control-strip{justify-content:center}}
/* Action confirmation is tactile and immediate; cooldown fill remains server-owned. */
.crosshair{transition:width .12s,height .12s,filter .12s}.crosshair.charging{filter:drop-shadow(0 0 5px #d7ff5f66)}.crosshair.charging>i{box-shadow:0 0 6px #d7ff5f55}.crosshair.action-input{animation:crosshair-input .28s ease-out}.abilities>div.action-input{animation:ability-input .32s ease-out}.name-tag{will-change:transform}
@keyframes crosshair-input{0%{transform:translate(-50%,-50%) scale(.78);opacity:.65}35%{transform:translate(-50%,-50%) scale(1.18);opacity:1}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes ability-input{0%{border-color:var(--acid);box-shadow:inset 0 0 20px #d7ff5f44}100%{border-color:#45607466;box-shadow:inset 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.crosshair.action-input,.abilities>div.action-input{animation:none}.crosshair{transition:none}}.abilities{gap:6px}.abilities>div{min-width:60px}.control-strip{gap:14px}.control-strip kbd{white-space:nowrap}

/* Ball-set controls and snapshot-owned special-ball feedback. */
.ballset-control{margin:15px 0 12px;padding:12px;border:1px solid #4c687455;background:#13252c99}.ballset-control label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:var(--acid);margin-bottom:8px}.ballset-control label span{letter-spacing:0;color:#9bb3ba}.ballset-control select{width:100%;border:1px solid #607e8a;background:#152630;color:#eef5ea;padding:9px 7px;font-size:12px;border-radius:3px}.ballset-control select:disabled{opacity:.7;cursor:not-allowed}.ballset-control p{font-size:10px;line-height:1.65;margin:9px 0 4px;color:#d3e4dc}.ballset-control small{display:block;font-size:9px;color:#90a8b5;line-height:1.65}.soda-overlay{position:fixed;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at 18% 30%,#bef0cdec 0%,#98dcc288 15%,transparent 27%),radial-gradient(ellipse at 77% 58%,#ddffe7eb 0%,#92cabbbb 13%,transparent 28%),radial-gradient(ellipse at 48% 90%,#c3ffd6de 0%,transparent 32%),radial-gradient(circle at 92% 12%,#d7ffeae0 0%,transparent 28%),linear-gradient(115deg,#b5efd577,transparent 55%,#dcffd85c);backdrop-filter:blur(2px)}.soda-overlay::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 12% 67%,transparent 7%,#e7fff677 8%,transparent 9%),radial-gradient(circle at 66% 24%,transparent 10%,#e7fff655 11%,transparent 12%),radial-gradient(circle at 57% 72%,transparent 5%,#e7fff666 6%,transparent 7%)}.ball-guide{padding:13px 0 16px;border-top:1px solid #48616d66}.ball-guide summary{cursor:pointer;color:#d7ff5f;font-size:13px;font-weight:700}.ball-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px 18px;margin-top:8px}.ball-guide-grid p{font-size:10px;color:#a8bbc4;line-height:1.7}.ball-guide-grid b{display:block;color:#e0edd7;margin-bottom:4px;font-size:11px}.ball-guide>small{display:block;font-size:9px;color:#839ca9}dialog{max-height:90vh;overflow:auto}@media(max-width:1050px){}@media(max-width:760px){.ball-guide-grid{grid-template-columns:1fr}.ballset-control{margin-top:10px}}

/* Current shared-physics aim prediction: fixed reticle + target brackets, no camera snap. */
.target-lock{position:fixed;left:50%;top:calc(50% - 59px);transform:translateX(-50%);max-width:65vw;padding:6px 10px;border:1px solid #819ca455;background:#101e2de8;color:#abbfc7;font-family:var(--display);font-size:11px;letter-spacing:.65px;white-space:nowrap;pointer-events:none;z-index:13;text-shadow:0 1px 3px #000}.target-lock[data-state="locked"]{color:#d7ff5f;border-color:#d7ff5faa;box-shadow:0 0 15px #d7ff5f22}.target-lock[data-state="blocked"]{color:#ffb084;border-color:#ff9a6d88}.crosshair.target-locked>i{background:#d7ff5f;box-shadow:0 0 7px #d7ff5f77}.crosshair.target-blocked>i{background:#ffad80}.target-marker{position:fixed;transform:translate(-50%,-50%);color:#d7ff5f;pointer-events:none;z-index:7;filter:drop-shadow(0 1px 3px #000);min-width:28px}.target-marker>span{position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);font-family:var(--display);font-size:9px;font-weight:700;letter-spacing:1px;white-space:nowrap;background:#10222ddd;padding:2px 5px}.target-marker[data-state="blocked"]{color:#ffad80}.practice-tag{padding:3px 7px;background:#142330ce;border:1px dashed currentColor;border-radius:3px;font-size:10px}.practice-tag .tag-health{font-size:9px;letter-spacing:.5px}.practice-tag.dummy-down{opacity:.65}.in-room .practice-tag{display:none}

/* Static peripheral warning stays outside the aim/catch area; no strobe. */
.threat-direction{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;animation:none;transition:none}.threat-direction-fill{fill:#f13636}.threat-direction-outline{fill:none;stroke:#ff7365;stroke-width:2;stroke-linejoin:round;pointer-events:none}.threat-overlay[data-level="incoming"] .threat-direction-fill{fill:#ff3939}
.threat-overlay{position:fixed;inset:0;pointer-events:none;z-index:6;background:none;box-shadow:inset 0 0 0 5px #ed3030;opacity:1}.threat-overlay[data-level="incoming"]{background:none;box-shadow:inset 0 0 0 8px #f5262d;opacity:1}.abilities>div{min-width:65px}.abilities span{white-space:nowrap;font-size:9px}@media(prefers-reduced-motion:reduce){.threat-overlay{animation:none;transition:none}}

/* A warmup-only practice lane and server-owned catch-return robot. */
.practice-bot-tag{border:1px solid #ffdb78b0;background:#302918ed;font-size:11px;box-shadow:0 0 12px #ffc95220}.practice-bot-tag .tag-health{color:#ffedbd;font-size:10px;letter-spacing:0}.abilities{max-width:56vw;flex-wrap:wrap;justify-content:flex-end}.abilities>div{min-width:55px;width:55px}.control-strip{gap:10px}.control-strip>div{gap:5px}.player-ball-guide{border-color:#75f6e177}.player-ball-guide summary{color:#a9fff0}@media(max-width:1050px){.abilities>div{min-width:47px;width:47px}.abilities kbd{font-size:9px;padding:0 4px}.abilities span{font-size:8px}.control-strip{justify-content:flex-start;padding-inline:20px;overflow-x:auto;white-space:nowrap}.control-strip>div,.control-strip button{flex-shrink:0}}@media(max-width:760px){.abilities{max-width:52vw;gap:4px}.abilities>div{height:52px}}@media(prefers-reduced-motion:reduce){}

/* Play stays readable: essential status only; the full controls live in Help. */
.in-game .topbar{height:64px;background:linear-gradient(#0a1522bb,transparent);padding-inline:28px}
.in-game .brand{font-size:25px}.in-game .brand small,.in-game .top-nav>span,.in-game .match-location,.in-game .control-strip{display:none}
.in-game .top-nav{margin-left:auto;margin-right:22px;gap:18px;opacity:1}.in-game .top-nav .text-button{font-size:11px;color:#c9d8df}
.in-game .connection{font-size:9px}.in-game .scoreboard{top:74px}.in-game .hud-room-button{top:84px;right:28px}
.in-game .self-hud,.in-game .abilities{bottom:24px}.in-game .self-hud{left:28px;gap:10px;padding:10px 14px}
.in-game .self-hud .player-avatar,.in-game .self-hud small{display:none}
.in-game .abilities{right:28px;gap:7px;max-width:none}.in-game .abilities>div{min-width:57px;width:57px;height:58px}
.in-game .resume-overlay{inset:64px 0 0}
.target-lock{top:calc(50% - 49px);padding:4px 8px;font-size:11px;border-color:transparent;background:#101e2dbb}
.target-lock[data-state="locked"]{border-color:transparent;box-shadow:none}.target-marker{transition:color .08s ease-out;will-change:transform,opacity}.target-marker>span:empty{display:none}
.crosshair.target-locked>i{box-shadow:0 0 5px #d7ff5f55}

:focus,:focus-visible{outline:none}
/* Keyboard focus stays visible without drawing a border or ring. */
input:focus-visible,select:focus-visible,textarea:focus-visible{background-color:#1b2933}
button:focus-visible,a:focus-visible{ text-decoration:underline;text-underline-offset:3px }
@media(max-width:760px){.in-game .topbar{padding-inline:18px}.in-game .brand{font-size:21px}.in-game .brand-mark{display:none}.in-game .top-nav{display:flex;margin-right:12px;gap:12px}.in-game .top-nav .text-button{font-size:10px}.in-game .connection{font-size:8px}.in-game .scoreboard{top:80px}.in-game .hud-room-button{top:143px;right:18px}.in-game .self-hud{left:18px}.in-game .abilities{right:18px}.in-game .abilities>div{min-width:47px;width:47px;height:52px}}
@media(prefers-reduced-motion:reduce){.target-marker,.target-lock,.crosshair{animation:none!important;transition:none!important}}

/* Recent room chat stays readable over play; only Enter opens the interactive composer. */
.room-chat{position:fixed;z-index:25;right:28px;top:clamp(245px,34dvh,330px);bottom:260px;width:min(340px,calc(100vw - 36px));display:flex;flex-direction:column;justify-content:flex-end;gap:7px;font-size:12px;color:#f0f5f3;pointer-events:none;background:transparent;border:0;box-shadow:none;text-shadow:0 1px 3px #000,0 0 5px #0008}
.chat-toggle{display:block;margin:0;color:#c1d0d1;font-size:10px;text-align:right;pointer-events:none}
#chat-body{flex-shrink:0;padding:9px 11px;background:#101e2bc9;border:1px solid #72919766;border-radius:5px;pointer-events:auto;text-shadow:none}
.chat-heading,.chat-compose{display:flex;align-items:center;gap:8px}.chat-heading{justify-content:space-between}.chat-heading label{display:flex;align-items:center;gap:8px}.chat-heading select{background:#1a3340;color:#e8f1e9;border:1px solid #698a91;border-radius:3px;padding:5px;font-size:12px}.chat-heading button{background:none;border:0;color:#c8dddd;font-size:24px;min-width:32px;min-height:30px}
#chat-scope{display:block;color:#a4c7c5;margin:4px 0 6px;font-size:11px}.chat-log{min-height:0;max-height:200px;overflow:hidden;overflow-wrap:anywhere;pointer-events:none;user-select:none}.room-chat.is-composing .chat-log{overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;user-select:none}.chat-message{margin:0 0 6px;line-height:1.5;unicode-bidi:plaintext;white-space:pre-wrap}.chat-message:last-child{margin-bottom:0}.room-chat:not(.is-composing) .chat-message{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.chat-message b{color:#dcffb2;font-weight:700}.chat-message[data-channel="team"] b{color:#94f3eb}.chat-message span{color:#f0f5f3}.chat-input-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.chat-compose input{width:0;flex:1;min-height:36px;padding:8px;border:1px solid #779093;background:#192d38;color:#f1f8ef;border-radius:3px;font-size:14px}.chat-compose button{min-height:36px;padding:8px 10px;border:1px solid #bbdf8d;background:#c7ee91;color:#17221b;border-radius:3px;font-weight:700;white-space:nowrap}#chat-status{font-size:11px;color:#ffcc9c;margin:6px 0}#chat-status:empty{display:none}#chat-help{display:block;font-size:10px;color:#b1c6ce;line-height:1.5;margin-top:6px}
@media(max-width:760px){.room-chat{right:18px;top:clamp(250px,35dvh,330px);bottom:260px;width:min(290px,calc(100vw - 36px))}.chat-compose input{font-size:16px}.chat-log{max-height:180px}}
@media(max-height:620px){.room-chat{top:160px;bottom:240px}.chat-log{max-height:120px}#chat-help{display:none}}
@media(max-height:440px){.room-chat{top:110px;bottom:240px;font-size:11px}#chat-scope{display:none}#chat-body{padding:5px 8px}.chat-heading{margin-bottom:4px}.chat-heading select{padding:2px}.chat-heading button{min-height:24px}.chat-compose input,.chat-compose button{min-height:30px;padding:5px}}

/* FFA uses the same six server-assigned colors in the lobby, bodies and KO ranks. */
.mode-control{margin:0 0 17px}.mode-control p{line-height:1.7}.slot-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.slot .slot-avatar,.slot .slot-badge{flex-shrink:0}
.scoreboard.ffa{min-width:238px;height:64px;justify-content:center;gap:16px;padding:8px 16px}.scoreboard.ffa .score-center{border:0;padding:0;min-width:90px}.ffa-score-summary{font-size:13px;font-weight:700;color:var(--acid);white-space:nowrap}
.individual-scoreboard,.end-standings{list-style:none;padding:0;margin:0;overflow:hidden}.individual-scoreboard{position:absolute;top:192px;left:50%;transform:translateX(-50%);width:286px;z-index:8;background:#101820dd;border:1px solid var(--line);backdrop-filter:blur(8px)}
.individual-row{display:flex;align-items:center;gap:8px;border-left:3px solid;padding:5px 9px;font-size:10px;min-height:25px}.individual-row+.individual-row{border-top:1px solid var(--line)}.individual-row.is-self{background:#d7ff5f14}.individual-rank{width:16px;color:#a7b8c1;font-variant-numeric:tabular-nums}.individual-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.individual-row strong{flex-shrink:0;font-variant-numeric:tabular-nums;font-family:var(--display);font-size:13px}
.in-game .individual-scoreboard{top:145px}.end-panel.ffa-result{max-height:calc(100dvh - 32px);overflow:auto;padding:26px 30px}.ffa-result h2{font-family:var(--font);font-size:30px;line-height:1.3;overflow-wrap:anywhere;margin:18px 0 12px}.ffa-result #end-score{font-size:23px;letter-spacing:1px}.end-standings{margin-top:18px;text-align:left}.end-standings .individual-row{font-size:12px;min-height:34px}.end-standings .individual-row strong{font-size:17px}.ffa-result p{line-height:1.7;margin:16px 0}
@media(max-width:760px){.scoreboard.ffa{min-width:225px;height:57px}.individual-scoreboard{width:248px;top:205px}.in-game .individual-scoreboard{top:140px;width:220px}.individual-row{font-size:9px;min-height:23px;padding:4px 7px}.end-panel.ffa-result{width:min(420px,calc(100vw - 28px));padding:23px}}
@media(max-height:620px){.individual-scoreboard{width:205px;left:22px;top:205px;transform:none}.in-game .individual-scoreboard{top:143px;left:22px}.individual-row{min-height:22px;padding-block:3px}.end-panel.ffa-result{padding:18px 24px}.ffa-result h2{margin:10px 0}.end-standings .individual-row{min-height:27px}.ffa-result p{margin:10px 0}}

/* Audio preferences live in the dedicated settings dialog, outside combat HUD. */
.audio-settings{margin:24px 0;padding:14px 16px;border:1px solid var(--line)}.audio-settings legend{padding:0 7px;color:var(--acid);font-size:12px}.audio-settings p{margin:0 0 13px;color:var(--muted);font-size:10px;line-height:1.7}.audio-settings>div{display:grid;grid-template-columns:64px minmax(55px,1fr) 37px 44px;gap:10px;align-items:center;margin-top:10px}.audio-settings label{font-size:11px}.audio-settings input{height:24px;padding:0;accent-color:var(--acid);border:0;background:transparent}.audio-settings input:focus-visible{outline:none}.audio-settings output{text-align:right;font-size:10px;font-variant-numeric:tabular-nums;color:#bbc9d1}.audio-settings button{height:28px;border:1px solid #435561;background:#182530;font-size:10px}.audio-settings button[aria-pressed="true"]{color:var(--muted);background:#101820}@media(max-width:420px){.audio-settings{padding:12px 9px}.audio-settings>div{gap:6px;grid-template-columns:55px minmax(45px,1fr) 33px 37px}}

/* Optional card mode stays inside the existing lobby and compact match HUD. */
.card-settings{margin:16px 0;padding:14px;border:1px solid #ffffff21;border-radius:12px;background:#0b1620}
.card-settings>label{display:flex;align-items:center;gap:8px;font-weight:800}.card-settings input{width:18px;height:18px;accent-color:#d7ff5f}.card-settings small{font-weight:400;color:#9baebc}.card-settings p{font-size:11px;color:#9baebc;line-height:1.6;margin:8px 0}
.card-selected{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.card-selected span{border:1px solid #d7ff5f55;border-radius:20px;padding:4px 8px;font-size:11px;color:#d7ff5f}
.card-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.card-options article{display:flex;flex-direction:column;background:#152430;border:1px solid #ffffff25;border-radius:8px;padding:18px 14px}.card-options strong{font-size:15px;color:#e7fbc0}.card-options p{flex:1;font-size:12px;line-height:1.8;color:#afc1cd;margin:14px 0 20px}.card-options button,.card-picker-heading button{border:1px solid #d7ff5f66;background:#d7ff5f17;border-radius:6px;color:#e7fbc0;font:inherit;font-size:12px;padding:10px;cursor:pointer}.card-options button:disabled{opacity:.45;cursor:wait}.card-options button:focus-visible{outline:none}
.card-hud{position:fixed;right:28px;bottom:140px;width:210px;pointer-events:none;display:grid;gap:6px;padding:10px 12px;border:1px solid #ffffff20;border-radius:8px;background:#071420c9;font-size:11px;line-height:12px;color:#b4c4cf;z-index:12}.card-level-row{display:flex;justify-content:space-between;gap:8px;align-items:center}.card-level-row strong{color:#d7ff5f;font-size:12px}.card-level-row span{font-size:10px}.card-progress{height:3px;background:#ffffff1c;border-radius:3px;overflow:hidden}.card-progress i{display:block;height:100%;background:#d7ff5f;width:0}.card-hud>small{font-size:9px;color:#8da7b6}.card-status{display:grid;gap:6px}.card-status>div{display:flex;justify-content:space-between;align-items:center;gap:8px}.card-status b{font-size:9px;color:#839aa7}.card-status .active,.card-status .active b{color:#d7ff5f}
.card-notice{position:fixed;right:28px;bottom:94px;z-index:13;border:1px solid #d7ff5f88;border-radius:6px;background:#13251fee;color:#e6ffb6;padding:10px 12px;max-width:260px;min-height:34px;font:inherit;font-size:11px;cursor:pointer;pointer-events:auto}.card-notice:disabled{color:#b4c4cf;border-color:#ffffff33;cursor:wait}
.card-picker{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px;background:#07101b99;pointer-events:auto}.card-picker-panel{width:min(780px,100%);max-height:calc(100dvh - 48px);overflow:auto;background:#101d28f5;border:1px solid #77958788;box-shadow:0 20px 90px #0009;padding:26px;border-radius:12px}.card-picker-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.card-picker-heading h2{margin:0;color:#d7ff5f;font-size:23px}.card-picker-heading button{font-size:11px;background:#152430;border-color:#77958766}.card-picker-panel>p{font-size:12px;line-height:1.8;color:#bbccd5;margin:12px 0 18px}.card-picker-panel>small{display:block;margin-top:16px;color:#819caa;font-size:10px;line-height:1.8}
@media(max-width:760px){.card-hud{right:18px;bottom:133px;width:185px;padding:8px 10px}.card-notice{right:18px;bottom:91px;font-size:10px}.card-picker{padding:12px}.card-picker-panel{padding:18px;max-height:calc(100dvh - 24px)}.card-picker-heading h2{font-size:19px}.card-picker-heading button{max-width:134px}.card-options{gap:8px}.card-options article{padding:12px 9px}.card-options strong{font-size:12px}.card-options p{font-size:11px;line-height:1.6}.card-options button{font-size:10px;padding:9px 5px}}
@media(max-width:480px){.card-options{grid-template-columns:1fr}.card-options p{margin:8px 0}.card-picker-heading{align-items:flex-start}}

/* Match bots use real participant slots; practice entities stay separate. */
.participant-summary{font-size:10px;color:var(--muted);margin:-4px 0 12px}.bot-note{font-size:9px;line-height:1.7;color:var(--muted);margin:8px 0 14px}.bot-controls .secondary-button{justify-content:center}.slot .slot-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slot .slot-avatar,.slot .slot-badge{flex-shrink:0}.slot .slot-badge{margin-left:0}.bot-remove{flex-shrink:0;min-height:28px;padding:2px 6px;font-size:9px;background:transparent;border:1px solid #3b4b56;color:var(--muted)}

/* Enemy HP remains readable above the head, with empty hearts after damage. */
.name-tag.enemy-name-tag .tag-health{font-size:15px;line-height:1.1;letter-spacing:3px;color:#ff8a80;text-shadow:0 1px 3px #06101b,0 0 5px #06101b;margin-top:3px}

.map-control{border-left:2px solid #68e5e177;padding-left:10px}.map-control #map-description{color:#d7e7ed}.map-control #map-hazards{color:#e8c781;margin-top:4px}.map-control #map-note{display:block;line-height:1.6;color:#829ca8}.map-control select:disabled{opacity:1;color:#afc0c8;cursor:default}

/* Video-inspired warm, outlined inward chevrons; rotation uses the existing controller. */
.target-marker{min-width:0;color:#ffbd63;filter:drop-shadow(0 1px 2px #271725dd)}.target-orbit{display:block;width:100%;height:100%;overflow:visible}.target-marker[data-state="blocked"] .target-orbit{opacity:.45}.target-marker[data-state="locked"] .target-orbit{opacity:1}

/* Native modal keeps focus in settings, with room to scroll on smaller screens. */
.settings-dialog{width:min(540px,92vw);max-height:90dvh;padding:28px 30px;overscroll-behavior:contain}
.settings-dialog h2{font-size:28px;letter-spacing:-1px;margin:16px 0 10px}.settings-dialog>p{font-size:11px}
.input-settings{margin:20px 0;padding:14px 16px;border:1px solid var(--line)}.input-settings legend{padding:0 7px;color:var(--acid);font-size:12px}
.sensitivity-setting{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:12px}.sensitivity-setting input{grid-column:1/-1;width:100%;height:28px;padding:0;accent-color:var(--acid)}.sensitivity-setting output{font-variant-numeric:tabular-nums;color:var(--acid)}
.input-settings small{display:block;color:var(--muted);font-size:10px;line-height:1.6}.invert-setting{display:flex;align-items:center;gap:9px;margin-top:15px;font-size:11px}.invert-setting input{width:17px;height:17px;margin:0;accent-color:var(--acid)}
.settings-dialog .audio-settings{margin:20px 0}.settings-actions{display:flex;gap:12px;align-items:center}.settings-actions button{margin:0;width:auto;flex:1;min-height:40px;justify-content:center;padding:10px 12px}.settings-actions .primary-button{height:40px}
.settings-save-status{min-height:20px}.settings-resume-note{display:block;margin-top:14px;color:var(--muted);font-size:10px;line-height:1.6}
@media(max-width:760px){body:not(.in-game) .top-nav{display:flex;margin-left:auto;margin-right:14px}body:not(.in-game) .top-nav>:not(#settings-top){display:none}}
@media(max-width:520px){.settings-dialog{padding:22px 18px}.settings-dialog h2{font-size:25px}.topbar .connection{display:none}.in-game .top-nav{margin-left:auto;margin-right:0}.settings-actions{gap:8px}.settings-actions button{font-size:10px}}


/* Passive gameplay HUD never intercepts arena clicks. Explicit controls still work. */
.in-game #match-hud,.in-game .topbar,.in-game #toast{pointer-events:none}
.in-game #room-toggle,.in-game #card-notice,.in-game #card-picker,.in-game .top-nav,.in-game .brand{pointer-events:auto}
/* This class exists only with active arena input, never in chat/cards/settings.
   Additional touch-callout suppression remains scoped to active play. */
.game-input-active,.game-input-active *{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.game-input-active ::selection{background:transparent}
.game-input-active :focus,.game-input-active :focus-visible{outline:none}
.game-input-active #stage{touch-action:none}
.game-input-active .brand{pointer-events:none}

/* Hold-G wheel uses relative mouse motion, never focusable/clickable HUD controls.
   Static selection and bubbles also respect reduced motion without animation. */
.emote-wheel{position:fixed;left:50%;top:50%;width:min(360px,78vmin);height:min(360px,78vmin);transform:translate(-50%,-50%);z-index:28;pointer-events:none;user-select:none;-webkit-user-select:none;text-align:center;color:#fff}
.emote-wheel *{pointer-events:none}
.emote-wheel-disc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.emote-sector{fill:#11171db8;stroke:#e4edf02e;stroke-width:1}
.emote-ring{fill:none;stroke:#e6eef074;stroke-width:.8}.emote-inner-ring{stroke:#e6eef040}
.emote-wheel:has(.emote-up.selected) .emote-sector-up,.emote-wheel:has(.emote-right.selected) .emote-sector-right,.emote-wheel:has(.emote-down.selected) .emote-sector-down,.emote-wheel:has(.emote-left.selected) .emote-sector-left{fill:#e0e6e7b8;stroke:#fff;stroke-width:1.3}
.emote-option{position:absolute;width:72px;height:72px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;color:#fff;transform:translate(-50%,-50%);text-shadow:0 1px 3px #000b}
.emote-option>span{display:block;width:36px;height:36px}.emote-option svg{display:block;width:100%;height:100%}.emote-option>small{font-size:11px;font-weight:600;letter-spacing:.05em}
.emote-option.selected{color:#fff;text-shadow:0 1px 4px #000}.emote-option.selected>small::after{content:"";display:block;margin:4px auto 0;width:16px;height:2px;background:currentColor}
.emote-up{left:50%;top:20%}.emote-right{left:80%;top:50%}.emote-down{left:50%;top:80%}.emote-left{left:20%;top:50%}
.emote-center{position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);color:#d6dee0}.emote-center kbd{font-size:10px;border:0;background:none;padding:0;box-shadow:none}
.emote-cursor{position:absolute;left:calc(50% - 3px);top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #1119;z-index:1}
#emote-selection{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:max-content;max-width:90vw;margin:10px 0 0;color:#f0f4f5;font-size:11px;text-shadow:0 1px 4px #000}
.emote-bubble{position:fixed;transform:translate(-50%,-100%);width:52px;height:52px;display:flex;align-items:center;justify-content:center;border:1px solid #dceabb99;border-radius:16px;background:#10232be8;box-shadow:0 3px 14px #0005;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:36px;line-height:1;pointer-events:none;user-select:none;z-index:8;animation:none;transition:none}
.emote-bubble::after{content:"";position:absolute;bottom:-5px;left:calc(50% - 4px);width:8px;height:8px;background:#10232b;border-right:1px solid #dceabb99;border-bottom:1px solid #dceabb99;transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.emote-wheel,.emote-option,.emote-cursor,.emote-bubble{animation:none;transition:none}}

/* Quiet game corners: authoritative health stays visible; legacy hooks stay inert. */
.self-hud,.in-game .self-hud{gap:0;padding:0;background:none;border:0;box-shadow:none}
.self-hud .hearts{font-size:clamp(38px,4vw,52px);line-height:1.15;letter-spacing:2px;white-space:nowrap;text-shadow:0 2px 5px #06101bcc}
.abilities[hidden]{display:none!important}


/* Touch layout: landscape is the base, portrait has its own thumb zones below.
   All sizing is opt-in so mouse/keyboard layouts keep their original geometry. */
.mobile-controls,.mobile-input-settings,.mobile-guide-note,.mobile-chat-open{display:none}
html:has(body.touch-mode){overflow:hidden;overscroll-behavior:none}
body.touch-mode{
  --mobile-safe-top:env(safe-area-inset-top,0px);
  --mobile-safe-right:env(safe-area-inset-right,0px);
  --mobile-safe-bottom:env(safe-area-inset-bottom,0px);
  --mobile-safe-left:env(safe-area-inset-left,0px);
  --mobile-edge:12px;
  height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none;
}
.touch-mode button,.touch-mode select{min-width:44px;min-height:44px}
.touch-mode input:not([type="checkbox"]):not([type="range"]){min-height:44px;font-size:16px}
.touch-mode select{font:inherit;font-size:16px}
.touch-mode .mobile-input-settings,.touch-mode .mobile-guide-note{display:block}
.mobile-assist-setting{display:grid;grid-template-columns:1fr minmax(130px,1fr);gap:12px;align-items:center;font-size:12px;margin-bottom:10px}
.mobile-assist-setting select{width:100%;padding:8px;border:1px solid #607e8a;border-radius:5px;background:#152630;color:var(--text)}
.touch-mode .mobile-controls{
  position:fixed;inset:0;z-index:20;display:block;pointer-events:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.mobile-controls[hidden]{display:none!important}
.touch-mode .mobile-stick,.touch-mode .mobile-look,.touch-mode .mobile-action{
  position:absolute;pointer-events:auto;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
.touch-mode .mobile-stick{
  left:calc(var(--mobile-safe-left) + 22px);bottom:calc(var(--mobile-safe-bottom) + 20px);
  width:132px;height:132px;border:1px solid #c6e7e154;border-radius:50%;
  background:radial-gradient(circle,#183b3b39 0 42%,#10282c6b 43% 100%);
  box-shadow:inset 0 0 0 10px #b5f5df08,0 3px 18px #0003;
}
.mobile-stick-ring{position:absolute;inset:18px;border:1px dashed #d1f4e837;border-radius:50%;pointer-events:none}
.mobile-stick-thumb{position:absolute;left:calc(50% - 20px);top:calc(50% - 20px);width:40px;height:40px;border:1px solid #e1ffe3a3;border-radius:50%;background:#d4fbd79e;box-shadow:0 2px 12px #0004;pointer-events:none;will-change:transform}
.mobile-stick>small{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);width:max-content;font-size:9px;line-height:12px;color:#d6e8e0b5;text-shadow:0 1px 3px #000;pointer-events:none}
.mobile-stick.sprinting{border-color:#d7ff5fbb;box-shadow:inset 0 0 0 10px #d7ff5f13,0 0 14px #d7ff5f22}
.mobile-stick.sprinting .mobile-stick-thumb{background:#d7ff5fd9}
/* Empty canvas starts camera drags everywhere, below the real UI hit targets.
   This full-screen hint is deliberately not an input-blocking overlay. */
.touch-mode.in-game #stage{touch-action:none}
.touch-mode .mobile-look{
  left:var(--mobile-safe-left);right:var(--mobile-safe-right);
  top:var(--mobile-safe-top);bottom:var(--mobile-safe-bottom);
  pointer-events:none;background:transparent;
}
.mobile-look>span{position:absolute;right:calc(var(--mobile-edge) + 8px);top:64px;color:#d9ece35e;text-shadow:0 1px 3px #0007;font-size:10px;pointer-events:none}
.touch-mode .mobile-actions{
  position:absolute;right:calc(var(--mobile-safe-right) + var(--mobile-edge));bottom:calc(var(--mobile-safe-bottom) + 14px);
  width:224px;height:216px;pointer-events:none;
}
.touch-mode .mobile-action{
  width:48px;height:48px;min-width:44px;min-height:44px;padding:3px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;border:1px solid #cde6dd82;border-radius:50%;
  background:#122a32b8;color:#effcf0;box-shadow:0 2px 10px #0004;
  font:inherit;text-shadow:0 1px 2px #0007;transition:background .1s,border-color .1s,box-shadow .1s;
}
.mobile-action>span{font-family:system-ui,sans-serif;font-size:22px;line-height:22px;pointer-events:none}
.mobile-action>strong{font-size:10px;line-height:14px;font-weight:700;pointer-events:none}
.mobile-action>small{font-size:8px;line-height:12px;pointer-events:none}
.touch-mode .mobile-action:active{transform:none}
.touch-mode .mobile-action.pressed,.touch-mode .mobile-action.is-active,.touch-mode .mobile-action[aria-pressed="true"]{
  border-color:#e3ff9e;background:#547145d9;box-shadow:0 0 0 3px #d7ff5f26;
}
.touch-mode .mobile-action:disabled{opacity:.3;pointer-events:none}
.touch-mode .mobile-attack{left:96px;top:140px;width:72px;height:72px;border:2px solid #e2ffadba;background:#59743bc4;box-shadow:0 0 0 4px #d7ff5f0d,0 3px 15px #0004}
.mobile-attack>span{font-size:25px;line-height:24px}.mobile-attack>strong{font-size:12px;line-height:16px}
.touch-mode .mobile-catch{left:169px;top:77px;width:54px;height:54px;border-color:#90fff0a6;background:#1b5355b8}
.touch-mode .mobile-dodge{left:172px;top:152px;width:48px;height:48px}
.touch-mode .mobile-jump{left:42px;top:152px;width:48px;height:48px}
.touch-mode .mobile-pass{left:42px;top:80px;width:48px;height:48px}
.mobile-shot-fan{position:absolute;inset:0;visibility:hidden;opacity:0;pointer-events:none}
.touch-mode .mobile-shot{pointer-events:none;border-color:#d7ff5f9e;background:#263b26e6;color:#eaffca}
/* Horizontal rail: only its centered 44px thumb starts a gesture. */
.touch-mode .mobile-curve{position:absolute;left:44px;top:10px;width:174px;height:44px;border:0;border-radius:0;background:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mobile-curve-track{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.mobile-curve-track-shadow,.mobile-curve-track-line,.mobile-curve-progress{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mobile-curve-track-shadow{stroke:#071821db;stroke-width:18}
.mobile-curve-track-line{stroke:#95b5b37a;stroke-width:8}
.mobile-curve-progress{stroke:#d7ff5f;stroke-width:8;stroke-dasharray:100;stroke-dashoffset:100}
.mobile-curve-progress-left{stroke-dashoffset:calc(100 - max(0,calc(var(--curve-progress,0)*-1))*100)}
.mobile-curve-progress-right{stroke-dashoffset:calc(100 - max(0,var(--curve-progress,0))*100)}
.mobile-curve-endpoint{fill:#10222bc2;stroke:#afcfca;stroke-width:2;stroke-dasharray:3 4}
.mobile-curve-endpoint[data-ready="true"]{stroke:#d7ff5f;stroke-width:4;stroke-dasharray:none;fill:#28452bc7}
.mobile-curve-thumb{position:absolute;left:calc(50% - 22px);top:calc(50% - 22px);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:2px solid #edffcf;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f3ffcf,#bddc6d 70%);color:#1b3526;box-shadow:0 0 0 4px #d7ff5f1c,0 3px 12px #0008;pointer-events:none;will-change:transform}
.mobile-curve-thumb>span{font-family:system-ui,sans-serif;font-size:22px;line-height:1;pointer-events:none}
.mobile-curve-rail.pressed .mobile-curve-thumb{border-color:white;box-shadow:0 0 0 5px #d7ff5f33,0 3px 12px #0008}
.mobile-curve-rail[data-ready="-1"] .mobile-curve-thumb,.mobile-curve-rail[data-ready="1"] .mobile-curve-thumb{background:#e5ffb3;box-shadow:0 0 0 5px #d7ff5f50,0 0 18px #d7ff5f66}
.mobile-curve-caption{position:absolute;left:49px;top:46px;width:76px;text-align:center;line-height:12px;color:#e9f7dd;text-shadow:0 1px 3px #000;pointer-events:none}
.mobile-curve-caption b{display:block;font-size:9px;line-height:12px}.mobile-curve-caption small{display:block;font-size:8px;line-height:11px;white-space:nowrap}
.mobile-curve-rail[data-ready="-1"] .mobile-curve-neutral,.mobile-curve-rail[data-ready="1"] .mobile-curve-neutral{display:none}
.touch-mode .mobile-lob{left:108px;top:80px;width:48px;height:48px}
.mobile-controls[data-charging="true"] .mobile-shot-fan,.mobile-controls.charging .mobile-shot-fan{visibility:visible;opacity:1}
.touch-mode .mobile-controls[data-charging="true"] .mobile-shot,.touch-mode .mobile-controls.charging .mobile-shot{pointer-events:auto}
/* Only the 44px curve thumb starts a gesture; the transparent rail and
   decorative rings/caption must not swallow empty-space camera touches. */
.touch-mode .mobile-controls[data-charging="true"] .mobile-curve,.touch-mode .mobile-controls.charging .mobile-curve{pointer-events:none}
.touch-mode .mobile-controls[data-charging="true"] .mobile-curve-thumb,.touch-mode .mobile-controls.charging .mobile-curve-thumb{pointer-events:auto;touch-action:none}
.touch-mode .mobile-controls[data-charging="true"] .mobile-attack{background:#354f36e8;color:#fff}
.touch-mode .mobile-emote{left:auto;right:calc(var(--mobile-safe-right) + 112px);top:calc(var(--mobile-safe-top) + 8px);bottom:auto;width:44px;height:44px;background:#152c33a6}
.mobile-emote>span{font-size:21px;line-height:20px}.mobile-emote>strong{font-size:8px;line-height:10px}

/* Essential match HUD: hearts, centered score, then three reachable corner buttons. */
.touch-mode.in-game .topbar{position:fixed;top:var(--mobile-safe-top);left:0;right:0;height:56px;padding:0;border:0;background:linear-gradient(#091721a3,transparent);z-index:26}
.touch-mode.in-game .brand,.touch-mode.in-game .connection,.touch-mode.in-game .control-strip{display:none}
.touch-mode.in-game .top-nav{position:absolute;top:8px;right:calc(var(--mobile-safe-right) + 112px);height:44px;gap:0;margin:0;opacity:1;display:flex;pointer-events:none}
.touch-mode.in-game .top-nav>:not(#settings-top){display:none}
.touch-mode.in-game #settings-top,.touch-mode.in-game #room-toggle,.touch-mode.in-game #mobile-chat-open{
  width:44px;height:44px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
  padding:3px;border:1px solid #9db9bd45;border-radius:12px;background:#102631ad;color:#e0efed;font-size:10px;
  letter-spacing:0;text-align:center;line-height:1.25;pointer-events:auto;touch-action:manipulation;
}
.touch-mode.in-game #room-toggle{position:fixed;top:calc(var(--mobile-safe-top) + 8px);right:calc(var(--mobile-safe-right) + 60px);z-index:27}
.touch-mode.in-game #mobile-chat-open{position:fixed;top:calc(var(--mobile-safe-top) + 8px);right:calc(var(--mobile-safe-right) + 8px);z-index:27}
.touch-mode.in-game .self-hud{position:fixed;left:calc(var(--mobile-safe-left) + 16px);top:calc(var(--mobile-safe-top) + 9px);bottom:auto;height:44px;gap:0;padding:0;background:none;border:0}
.touch-mode.in-game .self-hud .hearts{font-size:30px;line-height:1;letter-spacing:0}
.touch-mode.in-game .scoreboard{position:fixed;top:calc(var(--mobile-safe-top) + 8px);left:50%;height:44px;min-width:188px;max-width:220px;padding:0;border-radius:12px;backdrop-filter:none;background:#10212db3}
.touch-mode.in-game .score-team{min-width:54px;gap:0;padding:0 10px}.touch-mode.in-game .score-team>span{display:none}.touch-mode.in-game .score-team>strong{font-size:29px;line-height:32px}
.touch-mode.in-game .score-center{min-width:80px;padding:0 10px}.touch-mode.in-game .score-center>span{font-size:8px;letter-spacing:.7px}.touch-mode.in-game .score-center>strong{font-size:21px}.touch-mode.in-game .score-center>small{display:none}
.touch-mode.in-game .scoreboard.ffa{gap:8px;min-width:188px;padding:0 12px}.touch-mode.in-game .scoreboard.ffa .score-center{min-width:70px}.touch-mode.in-game .ffa-score-summary{font-size:11px}
.touch-mode.in-game .individual-scoreboard{top:calc(var(--mobile-safe-top) + 60px);left:calc(var(--mobile-safe-left) + 16px);transform:none;width:132px;background:#101820a6;border-color:#ffffff16}
.touch-mode.in-game .individual-row{min-height:18px;padding:2px 5px;gap:4px;font-size:8px}.touch-mode.in-game .individual-row strong{font-size:11px}
.touch-mode.in-game .kill-feed{top:calc(var(--mobile-safe-top) + 58px);right:calc(var(--mobile-safe-right) + 10px);max-width:180px;pointer-events:none}
.touch-mode.in-game .feed-item{padding:4px 7px;font-size:8px}.touch-mode.in-game .feed-item:nth-child(n+3){display:none}
.touch-mode.in-game .card-hud{left:calc(var(--mobile-safe-left) + 166px);right:auto;bottom:calc(var(--mobile-safe-bottom) + 14px);width:128px;padding:6px 8px;gap:4px;background:#07142099;font-size:9px}
.touch-mode.in-game .card-hud .card-status{gap:3px}.touch-mode.in-game .card-hud .card-level-row>span{font-size:8px}
.touch-mode.in-game .card-notice{left:calc(var(--mobile-safe-left) + 166px);right:auto;bottom:calc(var(--mobile-safe-bottom) + 78px);max-width:128px;min-height:44px;padding:5px 8px;font-size:9px}.touch-mode.in-game .target-lock{font-size:10px}
.touch-mode.in-game .resume-overlay{position:fixed;inset:calc(var(--mobile-safe-top) + 58px) 0 var(--mobile-safe-bottom);z-index:22}
.touch-mode.in-game .resume-overlay button{padding:16px 20px;max-width:75vw}.touch-mode.in-game .resume-overlay strong{font-size:14px}
.touch-mode.in-game .action-flash{font-size:28px;letter-spacing:2px}.touch-mode.in-game .respawn{padding:10px 24px}.touch-mode.in-game .respawn strong{font-size:48px}
.touch-mode .toast{bottom:calc(var(--mobile-safe-bottom) + 68px);max-width:80vw;font-size:10px;padding:9px 12px;pointer-events:none}

/* Menus, lobby, and keyboard chat keep native scrolling, focus and text selection. */
.touch-mode .topbar{padding-inline:calc(var(--mobile-safe-left) + 16px) calc(var(--mobile-safe-right) + 16px);height:64px}
.touch-mode .control-strip{display:none}
.touch-mode .welcome{position:fixed;inset:calc(var(--mobile-safe-top) + 64px) 0 var(--mobile-safe-bottom);display:block;padding:8px calc(var(--mobile-safe-right) + 20px) 24px calc(var(--mobile-safe-left) + 20px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;pointer-events:auto}
.touch-mode .intro{display:grid;grid-template-columns:minmax(140px,.8fr) minmax(250px,1fr);column-gap:24px;align-items:start;padding:8px 0 0;width:100%;max-width:850px;margin:auto}
.touch-mode .intro>.eyebrow{grid-column:1;font-size:8px;line-height:1.7;letter-spacing:1px}.touch-mode .intro h1{grid-column:1;font-size:clamp(40px,7vw,64px);margin:16px 0}.touch-mode .intro .entry-card{grid-column:2;grid-row:1/4;width:100%;max-width:none}.touch-mode .intro-copy,.touch-mode .intro-foot,.touch-mode .arena-preview{display:none}
.touch-mode .room-panel{position:fixed;top:calc(var(--mobile-safe-top) + 64px);bottom:calc(var(--mobile-safe-bottom) + 10px);left:calc(var(--mobile-safe-left) + 12px);right:calc(var(--mobile-safe-right) + 12px);width:auto;max-width:440px;margin:0 auto;padding:16px 18px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;z-index:28}
.touch-mode .room-panel .slot{height:auto;min-height:44px}.touch-mode .room-panel .room-code{margin-block:12px}.touch-mode .room-panel .bot-remove{font-size:10px}.touch-mode .room-panel .icon-button{width:44px;height:44px}.touch-mode .room-panel .secondary-button{height:auto;min-height:44px}
.touch-mode dialog,.touch-mode .end-panel,.touch-mode .card-picker-panel{
  max-height:calc(var(--mobile-viewport-height,100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 24px);
  overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;
}
.touch-mode dialog{width:min(580px,calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 24px));padding:20px}
.touch-mode .dialog-close{right:8px;top:8px}.touch-mode .settings-dialog h2{padding-right:32px}.touch-mode .settings-actions button{min-height:44px}
.touch-mode .audio-settings>div{grid-template-columns:64px minmax(44px,1fr) 34px 44px;gap:6px;min-height:44px}.touch-mode .audio-settings input{height:44px}.touch-mode .audio-settings button{height:44px}.touch-mode .sensitivity-setting input{height:44px}
.touch-mode .card-picker{padding:12px;z-index:40}.touch-mode .card-options button,.touch-mode .card-picker-heading button{min-height:44px}
.touch-mode .end-panel{position:fixed;z-index:40;width:min(420px,calc(100vw - 24px));padding:20px}.touch-mode .end-panel h2{font-size:42px;margin:14px 0 10px}
.touch-mode .room-chat{top:calc(var(--mobile-safe-top) + 118px);right:calc(var(--mobile-safe-right) + 12px);bottom:auto;width:min(260px,40vw);max-height:80px;gap:0;pointer-events:none}
.touch-mode .room-chat .chat-log{max-height:80px;font-size:10px}.touch-mode .room-chat:not(.is-composing) .chat-message:nth-last-child(n+3){display:none}
.touch-mode #chat-toggle{display:none}
.touch-mode .mobile-chat-open{position:fixed;top:calc(var(--mobile-safe-top) + 8px);right:calc(var(--mobile-safe-right) + 8px);width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:3px;border:1px solid #9db9bd45;border-radius:12px;background:#102631df;color:#e0efed;font:inherit;font-size:10px;line-height:1.25;pointer-events:auto;touch-action:manipulation;z-index:27}
.touch-mode .room-chat.is-composing .mobile-chat-open{display:none}
.touch-mode:not(.in-game) .top-nav{margin-right:56px}
.touch-mode .room-chat.is-composing{
  top:calc(var(--mobile-viewport-top,0px) + var(--mobile-safe-top) + 8px);right:calc(var(--mobile-safe-right) + 8px);bottom:auto;left:calc(var(--mobile-safe-left) + 8px);
  width:auto;height:calc(var(--mobile-viewport-height,100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 16px);
  max-height:calc(var(--mobile-viewport-height,100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 16px);
  padding:12px;gap:10px;border:1px solid #718e9277;border-radius:12px;background:#0c1b26f5;box-shadow:0 16px 70px #0008;
  z-index:45;pointer-events:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;
}
.touch-mode .room-chat.is-composing .chat-log{flex:1;min-height:0;max-height:none;overflow-y:auto;font-size:12px;touch-action:pan-y pinch-zoom}
.touch-mode #chat-body{padding:8px;max-height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.touch-mode .chat-heading button,.touch-mode .chat-heading select,.touch-mode .chat-compose button,.touch-mode .chat-compose input{min-height:44px}
.touch-mode .chat-heading select,.touch-mode .chat-compose input{font-size:16px}.touch-mode .chat-compose{gap:6px}.touch-mode #chat-help{display:none}
.touch-mode .room-chat.is-composing #chat-scope{display:block;margin:3px 0 6px;font-size:10px}
@media(prefers-reduced-motion:reduce){.touch-mode .mobile-action{transition:none}}

/* The charge label is an isolated hook, so changing it never replaces the ring. */
.mobile-attack>.mobile-attack-label{font-family:var(--font);font-size:12px;line-height:16px;font-weight:800}
.touch-mode .mobile-shot>strong{font-size:9px;white-space:nowrap}
/* The emote wheel is brought into thumb reach, without interactive zones beneath it. */
.touch-mode .emote-wheel{left:50%;top:auto;bottom:calc(var(--mobile-safe-bottom) + 70px);width:208px;height:208px;transform:translateX(-50%);z-index:29}
.touch-mode .emote-option{width:52px;height:52px}.touch-mode .emote-option>span{width:26px;height:26px}.touch-mode .emote-option>small{font-size:9px}
.touch-mode .emote-center kbd{font-family:var(--font);font-size:10px;min-height:24px;padding:0 5px}.touch-mode .emote-center small{font-size:8px}
.touch-mode #emote-selection{top:auto;bottom:-38px;margin:0;max-width:160px;padding:5px 8px;font-size:9px;line-height:1.4}
.touch-mode:has(.emote-wheel:not(.hidden)) .mobile-actions,.touch-mode:has(.emote-wheel:not(.hidden)) .mobile-look,.touch-mode:has(.emote-wheel:not(.hidden)) .mobile-stick{visibility:hidden;pointer-events:none}

/* Portrait adaptation preserves real 44px targets. Empty canvas between
   controls remains available for camera drags in both orientations. */
@media(orientation:portrait){
  .touch-mode .mobile-stick{left:calc(var(--mobile-safe-left) + 16px);bottom:calc(var(--mobile-safe-bottom) + 76px);width:112px;height:112px}
  .touch-mode .mobile-stick-ring{inset:13px}
  .touch-mode .mobile-stick>small{font-size:8px}
  /* Same right-thumb anchors; transparent left gutter preserves joystick room. */
  .touch-mode .mobile-actions{right:calc(var(--mobile-safe-right) + 12px);bottom:calc(var(--mobile-safe-bottom) + 14px);width:224px;height:216px}
  .touch-mode .mobile-look>span{top:114px}
  .touch-mode.in-game .scoreboard{top:calc(var(--mobile-safe-top) + 62px);height:44px;min-width:188px}
  .touch-mode.in-game .self-hud{left:calc(var(--mobile-safe-left) + 14px)}
  .touch-mode.in-game .self-hud .hearts{font-size:29px}
  .touch-mode.in-game .individual-scoreboard{top:calc(var(--mobile-safe-top) + 116px);width:128px}
  .touch-mode.in-game .kill-feed{top:calc(var(--mobile-safe-top) + 116px);max-width:46vw}
  .touch-mode.in-game .card-hud{left:calc(var(--mobile-safe-left) + 16px);bottom:calc(var(--mobile-safe-bottom) + 256px);width:124px}
  .touch-mode.in-game .card-notice{left:calc(var(--mobile-safe-left) + 16px);bottom:calc(var(--mobile-safe-bottom) + 200px);max-width:124px}

  .touch-mode .room-chat{top:calc(var(--mobile-safe-top) + 174px);width:45vw;max-height:70px}
  .touch-mode .room-chat .chat-log{max-height:70px}
  .touch-mode .welcome{padding-inline:calc(var(--mobile-safe-left) + 20px) calc(var(--mobile-safe-right) + 20px)}
  .touch-mode .intro{display:block;max-width:430px;padding-top:12px}
  .touch-mode .intro>.eyebrow{font-size:8px}
  .touch-mode .intro h1{font-size:58px;line-height:.93;margin:18px 0}
  .touch-mode .intro .entry-card{width:100%}
  .touch-mode .mobile-assist-setting{grid-template-columns:1fr;gap:7px}
  .touch-mode .audio-settings{padding:12px 8px}
  .touch-mode .audio-settings>div{grid-template-columns:54px minmax(44px,1fr) 32px 44px;gap:4px}
  .touch-mode .settings-actions{align-items:stretch}.touch-mode .settings-actions button{height:auto;font-size:10px}
  .touch-mode dialog{padding:20px 14px}.touch-mode .input-settings{padding:12px 10px}
  .touch-mode .card-options{grid-template-columns:1fr}
  .touch-mode .card-picker-heading{align-items:flex-start}.touch-mode .card-picker-heading button{max-width:144px}
  .touch-mode .end-panel h2{font-size:38px}
}
@media(orientation:portrait) and (max-width:350px){
  .touch-mode .mobile-emote{right:calc(var(--mobile-safe-right) + 8px);top:calc(var(--mobile-safe-top) + 60px);bottom:auto}
  .touch-mode.in-game .scoreboard,.touch-mode.in-game .scoreboard.ffa{left:calc(50% - 20px);width:190px;min-width:190px;max-width:190px}
  .touch-mode .mobile-stick{width:clamp(44px,calc(104px - var(--mobile-safe-left) - var(--mobile-safe-right)),104px);height:clamp(44px,calc(104px - var(--mobile-safe-left) - var(--mobile-safe-right)),104px)}
  .touch-mode .mobile-stick>small{font-size:7px}
  .touch-mode .intro h1{font-size:50px}
  .touch-mode .welcome{padding-inline:calc(var(--mobile-safe-left) + 14px) calc(var(--mobile-safe-right) + 14px)}
  .touch-mode .room-panel{padding:14px 12px}
  .touch-mode.in-game .card-hud{width:112px}
  .touch-mode.in-game .card-notice{max-width:112px}
}
/* Short visual viewports leave room for the composer and its close/send controls. */
@media(max-height:480px){
  .touch-mode .room-chat.is-composing{padding:6px;gap:4px}
  .touch-mode #chat-body{padding:5px 7px}
  .touch-mode .room-chat.is-composing #chat-scope{display:none}
  .touch-mode .room-chat.is-composing .chat-log{font-size:11px}
  .touch-mode dialog{padding-top:16px;padding-bottom:16px}
}

.mobile-resume-copy{display:none}.touch-mode .mobile-resume-copy{display:inline}.touch-mode .desktop-resume-copy{display:none}
/* A software keyboard can make the visual viewport landscape on a narrow phone.
   Form layout follows width as well, so labels and inputs never spill sideways. */
@media(max-width:520px){
  .touch-mode .intro{display:block;max-width:430px}
  .touch-mode .intro .entry-card{width:100%;max-width:none}
  .touch-mode .mobile-assist-setting{grid-template-columns:1fr;gap:7px}
  .touch-mode .audio-settings{padding:12px 8px}
  .touch-mode .audio-settings>div{grid-template-columns:54px minmax(44px,1fr) 32px 44px;gap:4px}
}
/* On short portrait screens, the actionable card notice remains available;
   its detail view carries XP/cards when the FFA rank list occupies the left side. */
@media(orientation:portrait) and (max-height:640px){
  .touch-mode.in-game:has(.scoreboard.ffa) .card-hud{display:none}
}

/* Quick match shares the scrollable entry card on portrait and landscape. */
.entry-tabs>button{padding-inline:10px;justify-content:center;gap:5px;min-width:0;white-space:nowrap}
.matchmaking-status{padding:10px;border:1px solid #68e5e155;color:var(--cyan);font-size:11px;line-height:1.7;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#quick-mode-field{margin:12px 0 0}#quick-game-mode{min-height:44px}

/* One main action; private-room controls are secondary. */
.entry-card #connect-button{min-height:64px;font-size:20px;letter-spacing:.02em}
.entry-card #quick-mode-field{display:flex;align-items:center;gap:12px;border:0;background:none;padding:0;margin:14px 0}
#quick-mode-field label{margin:0;flex-shrink:0;color:var(--muted);font-size:11px}
#quick-mode-field select{flex:1;min-width:0;min-height:44px}
.entry-secondary{display:flex;gap:8px;border-top:1px solid var(--line);padding:12px 20px}
.entry-secondary button{flex:1;min-width:0;min-height:44px;background:transparent;border:1px solid #33414c;color:#aebbc2;font-size:11px;border-radius:3px}
.entry-secondary button.active{border-color:#8ca85c;color:var(--acid)}
.entry-back{display:block;background:none;border:0;color:var(--muted);min-height:44px;padding:0 0 10px;font-size:11px}
.entry-card .auxiliary-entry #connect-button{min-height:44px;font-size:14px}

/* Entry actions are typography only; gameplay controls retain their styles. */
.entry-card button{background:transparent;border:0;box-shadow:none;text-shadow:none;filter:none;border-radius:0;transform:none;transition:color .16s}
.entry-card #connect-button{justify-content:center;color:var(--text);font-size:24px;font-weight:800;letter-spacing:.04em}
.entry-card #connect-button span{font:inherit}
.entry-card .entry-secondary button,.entry-card .entry-back,.entry-card #cancel-connect{color:var(--muted);font-size:12px;font-weight:500;min-height:44px}
.entry-card #cancel-connect{justify-content:center}
.entry-card button:hover:not(:disabled),.entry-card .entry-secondary button.active{background:transparent;color:var(--acid);filter:none;transform:none;box-shadow:none}
.entry-card button:active:not(:disabled){transform:none}
.entry-card button:focus-visible{outline:none}

/* Entry composition: left actions, original in-engine player on the right. */
.welcome .intro{align-self:center;width:min(420px,100%);padding-top:0}
.welcome .entry-card{max-width:420px;border:0;background:transparent;box-shadow:none}
.welcome #connect-form{display:flex;flex-direction:column;padding:0;gap:8px}
.welcome #connect-button{order:0;justify-content:flex-start;margin:0;min-height:80px;font-size:clamp(36px,4.8vw,64px);font-weight:900;letter-spacing:-.045em;white-space:nowrap;text-align:left}
.welcome #quick-mode-field{order:1;margin:0;max-width:260px}
.welcome #quick-mode-field select{border:0;background:#10151b55;color:var(--text);padding-left:0}
.welcome #room-field{order:-1;margin:0;max-width:280px}
.welcome #quick-tab{order:-2;text-align:left;padding:0}
.welcome #matchmaking-status{order:2;margin:0;border:0;background:transparent;padding:4px 0}
.welcome #cancel-connect{order:3;justify-content:flex-start;margin:0;padding:0}
.welcome #entry-error{order:4}
.welcome .entry-secondary{display:flex;flex-direction:column;align-items:flex-start;border:0;padding:8px 0;gap:0}
.welcome .entry-secondary button{flex:none;text-align:left;padding:0;font-size:18px;font-weight:600;min-height:44px}
.entry-nickname{max-width:240px;margin-top:8px}
.entry-nickname .input-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.entry-nickname input{min-height:44px;height:44px;background:transparent;border:0;border-bottom:1px solid #61748155;padding:0;font-size:14px;color:#bac6cd}
.welcome .preview-tag,.welcome .preview-caption{display:none}
@media(max-width:760px){.welcome:not(.hidden){position:fixed;inset:78px 16px 16px;display:flex;align-items:flex-end;padding:0;overflow:auto}.welcome .intro{align-self:auto;width:min(420px,100%)}.welcome #connect-button{font-size:40px;min-height:60px}}

body:not(.in-room):not(.in-game) .vignette{background:linear-gradient(90deg,#10151bf2 0%,#10151bba 32%,#10151b25 63%,transparent 100%)}
@media(orientation:portrait) and (max-width:1050px){body:not(.in-room):not(.in-game) .vignette{background:linear-gradient(0deg,#10151bf5 0%,#10151be0 42%,#10151b22 72%,transparent 100%)}}

/* Original court composition: centered athlete above the action, no title/copy. */
.welcome:not(.hidden){display:flex;align-items:flex-end;justify-content:center}
.welcome .intro{align-self:auto;width:min(440px,100%)}
.welcome .entry-card{width:100%;max-width:none}
.welcome #connect-button{justify-content:center;text-align:center;gap:12px}
.welcome #entry-ready-state{font-size:12px;font-weight:500;letter-spacing:0;color:var(--muted)}
.welcome #quick-mode-field{width:240px;max-width:100%;align-self:center}
.welcome .entry-secondary{flex-direction:row;justify-content:space-between;align-items:center;padding:8px 16px}
.welcome .entry-secondary button{font-size:16px}
.welcome .entry-nickname{width:220px;max-width:100%;margin:0 auto}
body:not(.in-room):not(.in-game) .vignette{background:linear-gradient(0deg,#10151bf7 0%,#10151bd4 26%,#10151b22 65%,transparent 100%)}
@media(orientation:landscape) and (max-height:640px){.welcome:not(.hidden){justify-content:flex-start;align-items:center}.welcome .intro{width:48%}.welcome #connect-button{justify-content:flex-start}.welcome .entry-secondary{padding-inline:0}.welcome #quick-mode-field{align-self:flex-start}.welcome .entry-nickname{margin:0}.welcome .entry-secondary button{font-size:13px}body:not(.in-room):not(.in-game) .vignette{background:linear-gradient(90deg,#10151bf2,#10151ba0 38%,transparent 75%)}}

/* Native form data, game-native presentation. Focus changes color, never a ring. */
select[hidden]{display:none!important}
body .game-select{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;min-height:44px;padding:8px 2px;background:transparent;border:0;border-radius:0;box-shadow:none;outline:none;color:var(--text);font:inherit;font-size:13px;text-align:left;letter-spacing:0;transform:none;touch-action:manipulation}
body .game-select>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body .game-select .game-select-arrow{flex:none;color:var(--muted);font-size:16px;line-height:1}
body .game-select:hover:not(:disabled),body .game-select:focus-visible,body .game-select[aria-expanded="true"]{background:transparent;color:var(--acid);filter:none;transform:none}
body .game-select:disabled{opacity:.45;cursor:default}
body .game-select-list{position:fixed;z-index:100;overflow:auto;overscroll-behavior:contain;margin:0;padding:4px;background:#10171df5;border:0;border-radius:2px;box-shadow:0 8px 24px #0003;outline:none;color:var(--text);font-family:var(--font);font-size:13px;touch-action:pan-y}
body .game-select-list[hidden]{display:none}
.game-select-option{display:flex;align-items:center;min-height:44px;padding:8px 10px;cursor:pointer;line-height:1.4}
.game-select-option[hidden]{display:none}
.game-select-option[aria-selected="true"]{color:var(--acid)}
.game-select-option.is-active{background:#d7ff5f0d;color:var(--acid)}
.game-select-option[aria-disabled="true"]{opacity:.35;cursor:default}
#quick-mode-field .game-select{flex:1;width:auto;font-size:13px;font-weight:500}
.chat-heading .game-select{display:inline-flex;width:auto;min-width:112px;margin-left:8px;font-size:12px}
.mobile-assist-setting .game-select{min-width:120px}
body #name,body #room-input,body #chat-input{background:transparent;border:0;border-bottom:1px solid #61748155;border-radius:0;box-shadow:none;outline:none;padding:8px 2px;color:var(--text);caret-color:var(--acid);min-height:44px}
body #name:focus,body #room-input:focus,body #chat-input:focus{background:transparent}
body #name::placeholder,body #room-input::placeholder,body #chat-input::placeholder{color:#8b989f}
@media(pointer:coarse){body #name,body #room-input,body #chat-input{font-size:16px}}

/* Human presence sits immediately after connection status, including small menus. */
#connected-players{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted);padding-left:8px;border-left:1px solid var(--line)}
@media(max-width:520px){body:not(.in-room):not(.in-game) .topbar .connection{display:flex;gap:5px;font-size:9px;flex-wrap:nowrap}body:not(.in-room):not(.in-game) .topbar{padding-inline:12px}body:not(.in-room):not(.in-game) .connection #latency:empty{display:none}#connected-players{padding-left:5px}}
@media(max-width:520px){body:not(.in-room):not(.in-game) .topbar .brand{font-size:20px;gap:6px}body:not(.in-room):not(.in-game) .topbar .brand-mark{display:none}body:not(.in-room):not(.in-game) .topbar .brand small{font-size:6px;letter-spacing:1px}body:not(.in-room):not(.in-game) .topbar .connection{flex-shrink:0;white-space:nowrap}}

/* Keep the menu header legible over daylight; arena overlays never show it. */
body:not(.in-game) .topbar{background:rgba(16,21,27,.9)}
body.in-game .topbar{display:none}
body:not(.in-game) .topbar .text-button{color:#e0e8ec}
body:not(.in-game) .topbar .brand small{color:#bdcbd2}
body:not(.in-room):not(.in-game) .connection{color:#f0f3ef;font-weight:500;line-height:1.4}
body:not(.in-room):not(.in-game) .connection #connected-players{color:#e0e8ec;border-left-color:rgba(224,232,236,.3)}
body:not(.in-room):not(.in-game) .connection .status-dot{flex-shrink:0}

/* Independent mobile menu: the lobby header stays hidden during gameplay. */
.game-menu-button{display:none}
.touch-mode.in-game .game-menu-button{position:fixed;top:calc(var(--mobile-safe-top) + 8px);right:calc(var(--mobile-safe-right) + 60px);z-index:27;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:3px;border:1px solid #9db9bd45;border-radius:12px;background:#102631e6;color:#e0efed;font-size:10px;line-height:1.25;pointer-events:auto;touch-action:manipulation}

/* Short landscape keeps the score clear of the three top-right utility targets. */
@media(orientation:landscape) and (max-height:480px){
  .touch-mode.in-game .scoreboard,.touch-mode.in-game .scoreboard.ffa{left:calc(50% - 20px);width:190px;min-width:190px;max-width:190px}
}

/* Network telemetry is independent of the intentionally hidden lobby header. */
.game-latency{display:none;position:fixed;top:calc(env(safe-area-inset-top,0px) + 16px);right:calc(env(safe-area-inset-right,0px) + 28px);z-index:26;padding:3px 7px;border-radius:4px;background:#10212de6;color:var(--acid);font-size:11px;line-height:16px;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
body.in-game .game-latency{display:block}
.game-latency[data-status="disconnected"],.game-latency[data-status="stale"],.game-latency[data-status="connecting"]{color:#e0e8ec}
.touch-mode.in-game .game-latency{top:calc(var(--mobile-safe-top) + 60px);right:calc(var(--mobile-safe-right) + 8px);padding:1px 5px;font-size:10px;line-height:16px}
.touch-mode.in-game .kill-feed{top:calc(var(--mobile-safe-top) + 84px)}
@media(orientation:portrait){
  .touch-mode.in-game .game-latency{top:calc(var(--mobile-safe-top) + 110px)}
  .touch-mode.in-game .kill-feed{top:calc(var(--mobile-safe-top) + 134px)}
}