/* Final mobile geometry, based on the visible viewport including Safari chrome. */
html{ -webkit-text-size-adjust:100%;text-size-adjust:100% }
body.mobile-mode #app{position:fixed;inset:0;width:var(--view-width,100vw);height:var(--view-height,100dvh);min-height:0}
body.mobile-mode :is(#mobileControls,#mobileOrientation){bottom:auto;height:var(--view-height,100dvh)}
body.mobile-mode #startScreen{height:var(--view-height,100dvh);max-height:var(--view-height,100dvh);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
body.mobile-mode :is(dialog,#settingsPanel,#pauseHint){max-width:calc(var(--view-width,100vw) - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:calc(var(--view-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain}
#mobileControls{--stick-size:clamp(82px,26dvh,116px);--action-size:clamp(48px,15dvh,64px);--gap:clamp(4px,1.5dvh,8px)}
#mobileControls .touch-stick{width:var(--stick-size);height:var(--stick-size)}
#mobileControls .touch-stick span{width:38%;height:38%}
#mobileControls .touch-movement{gap:0;bottom:calc(10px + env(safe-area-inset-bottom))}
.touch-run-zone{height:26px;width:100%;text-align:center;font:700 9px/24px system-ui;color:#d8f6eb;border-top:2px dashed #c8ecdc70;border-radius:50% 50% 0 0;pointer-events:none}
.touch-running .touch-run-zone{color:#d5ff99;border-color:#d5ff99;background:#8ebb4933}
#mobileControls.touch-running .touch-stick{border-color:#d5ff99}
#mobileControls .touch-actions{grid-template-columns:44px repeat(2,var(--action-size));grid-template-rows:44px var(--action-size);gap:var(--gap);bottom:calc(10px + env(safe-area-inset-bottom))}
#mobileControls .touch-actions [data-action="KeyG"]{grid-column:1;grid-row:1;width:44px;height:44px;font-size:9px}
#mobileControls .touch-actions [data-action="Space"]{grid-column:2;grid-row:1;width:100%;height:44px}
#mobileControls .touch-actions [data-action="KeyP"]{grid-column:3;grid-row:1;width:100%;height:44px;font-size:9px}
#mobileControls .touch-actions [data-action="KeyE"]{grid-column:1;grid-row:2;width:44px;height:44px}
#mobileControls .touch-actions [data-action="MouseRight"]{grid-column:2;grid-row:2;height:var(--action-size);font-size:10px;border-radius:18px}
#mobileControls .touch-actions [data-action="fire"]{grid-column:3;grid-row:2;height:var(--action-size);font-size:10px;border-radius:18px}
#mobileControls .touch-flight{right:calc(12px + env(safe-area-inset-right));bottom:calc(64px + var(--action-size) + env(safe-area-inset-bottom));width:var(--action-size);grid-template-columns:repeat(2,44px)}
#mobileControls .touch-flight button{width:44px}
#mobileControls .touch-flight{width:92px}
body.touch-playing .player-panel{width:clamp(130px,19vw,144px)}
body.touch-playing .power-panel{width:clamp(130px,19vw,144px)}
body.touch-playing #racketChoices{left:50%;bottom:calc(8px + env(safe-area-inset-bottom));gap:2px;padding:3px}
body.touch-playing #tutorialPanel{top:calc(72px + env(safe-area-inset-top));left:50%;right:auto;transform:translateX(-50%);width:clamp(210px,36vw,300px);max-height:calc(var(--view-height,100dvh) - 152px - env(safe-area-inset-bottom));font-size:11px}
body.touch-playing #tutorialPanel.tutorial-minimized{left:50%;right:auto;transform:translateX(-50%);width:clamp(180px,30vw,244px)}
body.touch-playing #gasStatus,body.touch-playing #recoveryText{right:calc(64px + env(safe-area-inset-right))}
body.touch-playing .hud-top{right:calc(64px + env(safe-area-inset-right))}
.ios-fullscreen-hint{font:12px/1.5 system-ui;color:#c4e6f8}
@media(max-width:700px){
 body.touch-playing #racketChoices{bottom:calc(8px + env(safe-area-inset-bottom));left:calc(50% - 24px)}
 body.touch-playing .racket-slot{width:36px;min-width:36px}
 body.touch-playing #specialSlot{width:40px;min-width:40px}
 body.touch-playing .event-feed{max-width:34%;font-size:9px}
}
@media(max-height:350px) and (orientation:landscape){
 body.mobile-mode #startScreen{overflow:auto;grid-template-rows:40px minmax(110px,1fr) 106px;gap:4px}
 body.mobile-mode #startScreen .lobby-footer{height:106px}
 body.mobile-mode #startScreen .lobby-title{font-size:17px}
 body.touch-playing #tutorialPanel{top:68px;max-height:calc(var(--view-height,100dvh) - 134px)}
 body.touch-playing .event-feed{display:none}
 body.touch-playing #recoveryText{font-size:8px}
}
/* Power belongs to the inventory; altitude is a single, two-ended flight control. */
#touchPower{display:none}
body.touch-playing #touchPower:not([hidden]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative;isolation:isolate;overflow:hidden;order:10;flex-shrink:0;width:44px;min-width:44px;height:44px;margin-left:4px;padding:3px;border:1px solid #c7a7ff;border-bottom:2px solid #c7a7ff;border-radius:9px;background:#231637;color:#f4e9ff;touch-action:none;pointer-events:auto;user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 0 12px #ac71e52b}
#touchPower::before{content:"";position:absolute;inset:0;z-index:-1;background:conic-gradient(from 0deg,#8950bb99 0deg,#6132a3bb var(--power-angle,360deg),transparent var(--power-angle,360deg));pointer-events:none}
body.touch-playing #touchPower svg{width:23px;height:25px;fill:#f4dbff;stroke:#fff;stroke-width:.7;filter:drop-shadow(0 0 3px #b678ff)}
body.touch-playing #touchPower span{font:700 8px/10px system-ui}
body.touch-playing #touchPower.pressed{transform:scale(.94);background:#754aa3}
body.touch-playing #touchPower[data-active="true"]{border-color:#ffe39a;box-shadow:0 0 9px #ffd26c66}
#mobileControls .touch-flight{display:grid;grid-template-columns:repeat(2,58px);grid-template-rows:14px 58px;column-gap:8px;row-gap:4px;width:140px;padding:6px 8px 8px;border:1px solid #94dfff85;border-radius:22px;background:linear-gradient(135deg,#10334bef,#146482df);box-shadow:0 5px 18px #001c3870,inset 0 1px 0 #c6f5ff38;right:calc(12px + env(safe-area-inset-right));bottom:calc(70px + var(--action-size) + env(safe-area-inset-bottom))}
#mobileControls .flight-label{grid-column:1/-1;text-align:center;font:800 9px/14px system-ui;letter-spacing:.15em;color:#c9f3ff}
#mobileControls .touch-flight button{width:58px;height:58px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px;border:1px solid #b7ebff9c;border-radius:50%;background:linear-gradient(160deg,#4d9ebb,#246080);box-shadow:inset 0 1px 0 #ffffff66,0 3px 7px #001e3b55;color:#fff}
#mobileControls .touch-flight [data-action="flyUp"]{background:linear-gradient(160deg,#8be7ed,#3197bb);color:#06283e;border-color:#b8ffff}
#mobileControls .touch-flight svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
#mobileControls .touch-flight small{font:800 10px/12px system-ui}
#mobileControls .touch-flight button.pressed{background:#d1ffff;color:#063249;box-shadow:0 0 12px #8bf4ff99;transform:scale(.94)}
#mobileControls.touch-spectator .touch-flight{bottom:calc(12px + env(safe-area-inset-bottom))}
@media(max-width:700px){
 body.touch-playing #touchPower:not([hidden]){width:40px;min-width:40px;margin-left:2px}
 body.touch-playing #racketChoices{left:calc(50% - 32px)}
}
@media(max-height:320px){
 #mobileControls .touch-flight{grid-template-columns:repeat(2,52px);grid-template-rows:12px 52px;width:128px;padding:4px 7px 6px;bottom:calc(60px + var(--action-size) + env(safe-area-inset-bottom))}
 #mobileControls .touch-flight button{width:52px;height:52px;min-height:52px}
}
#mobileControls .touch-flight .flight-label{font:800 9px/14px system-ui;letter-spacing:.15em;white-space:nowrap}
/* The artwork provides its own fill and stroke for each ability. */
body.touch-playing #touchPower svg{fill:none;stroke:currentColor;stroke-width:1.8;filter:drop-shadow(0 0 3px #b678ff)}
body.touch-playing #touchPower[data-ability="fire"] svg{fill:currentColor}
#powerClock svg{display:block;width:25px;height:25px;margin:auto}

body.touch-playing #touchPower svg{width:27px;height:27px;stroke-width:1.6;filter:none}
/* Action hierarchy: secondary movement tools above the two combat actions. */
#mobileControls .touch-actions{gap:7px}
#mobileControls .touch-actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:linear-gradient(155deg,#274258e8,#142c40e8);border:1px solid #aecbdf69;box-shadow:inset 0 1px 0 #ffffff21,0 3px 9px #061b3338;color:#eaf6ff}
#mobileControls .touch-actions button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#mobileControls .touch-actions button span{font:600 9px/11px system-ui;pointer-events:none}
#mobileControls .touch-actions :is([data-action="KeyG"],[data-action="Space"],[data-action="KeyP"]){border-radius:13px;height:48px}
#mobileControls .touch-actions{grid-template-rows:48px var(--action-size)}
#mobileControls .touch-actions [data-action="MouseRight"]{background:linear-gradient(145deg,#357eadf2,#17466fec);border-color:#85c6efa6;border-radius:20px 14px 20px 20px}
#mobileControls .touch-actions [data-action="fire"]{background:linear-gradient(145deg,#edaa5ef5,#bb642eef);border-color:#ffd99aba;border-radius:14px 20px 20px 20px;color:#fff8e8}
#mobileControls .touch-actions :is([data-action="fire"],[data-action="MouseRight"]) svg{width:25px;height:25px}
#mobileControls .touch-actions button.pressed{filter:brightness(1.3);transform:scale(.94);box-shadow:inset 0 2px 6px #0005}
body.touch-playing .player-panel{display:none}
body.touch-playing #racketChoices>.health-track{display:block;position:absolute;left:3px;right:3px;top:-13px;width:auto;height:7px;margin:0;overflow:hidden;border:1px solid #ffffff65;border-radius:5px;background:#112536e8;box-shadow:0 2px 5px #00162580;pointer-events:none}
body.touch-playing #racketChoices>.health-track #healthBar{height:100%;border-radius:4px;transition:width .2s ease,background .2s ease}
#mobileControls .touch-match-info{position:absolute;top:calc(10px + env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));display:grid;gap:6px;width:clamp(200px,28vw,250px);padding:9px 11px;border:1px solid #b8d5e52b;border-radius:14px;background:linear-gradient(135deg,#0e283ddd,#153950c7);box-shadow:0 3px 12px #00132526;pointer-events:none}
#mobileControls .touch-match-score{display:flex;align-items:center;gap:18px;padding-bottom:6px;border-bottom:1px solid #bcd9e327}
body.touch-playing .touch-match-info :is(.round-readout,.kills-readout){position:static;display:flex;align-items:center;gap:7px;margin:0;padding:0;transform:none;background:none;border:0;box-shadow:none;min-width:0;font:600 8px/1.2 system-ui;color:#b9cddb}
body.touch-playing .touch-match-info :is(.round-readout,.kills-readout) strong{font:800 19px/1 system-ui;color:#f2faff}
#mobileControls .touch-match-world{display:grid;gap:4px}
body.touch-playing .touch-match-info :is(#gasStatus,#recoveryText){display:block;position:static;width:auto;margin:0;padding:0;text-align:left;white-space:normal;font:500 9px/1.35 system-ui;text-shadow:none;letter-spacing:0}
body.touch-playing .touch-match-info #gasStatus{color:#e1ccff!important}
body.touch-playing .touch-match-info #recoveryText{color:#a9dfef}
body.touch-playing .power-panel{top:calc(108px + env(safe-area-inset-top));width:150px}
body.touch-playing #tutorialPanel,body.touch-playing #tutorialPanel.tutorial-minimized{top:calc(12px + env(safe-area-inset-top));left:56%;width:clamp(180px,28vw,244px)}
@media(max-width:700px){
 #mobileControls .touch-match-info{width:190px;padding:7px 9px;gap:4px}
 #mobileControls .touch-match-score{gap:12px;padding-bottom:5px}
 body.touch-playing .touch-match-info :is(.round-readout,.kills-readout) strong{font-size:16px}
 body.touch-playing .touch-match-info :is(#gasStatus,#recoveryText){font-size:8px}
 body.touch-playing .power-panel{top:calc(96px + env(safe-area-inset-top))}
 body.touch-playing #tutorialPanel,body.touch-playing #tutorialPanel.tutorial-minimized{left:61%;width:180px}
}
/* Compact text HUD: no card, only lightweight separators. */
#mobileControls .touch-match-info{width:max-content;max-width:38vw;padding:0;border:0;border-radius:0;background:none;box-shadow:none;gap:4px;text-shadow:0 1px 3px #001529,0 0 5px #001529aa}
#mobileControls .touch-match-score{gap:10px;padding-bottom:4px;border-bottom:1px solid #deefff55}
body.touch-playing .touch-match-info .kills-readout{padding-left:10px;border-left:1px solid #deefff66}
body.touch-playing .touch-match-info :is(.round-readout,.kills-readout){gap:5px;font-size:8px;color:#e1edf5}
body.touch-playing .touch-match-info :is(.round-readout,.kills-readout) strong{font-size:15px}
#mobileControls .touch-match-world{gap:2px}
body.touch-playing .touch-match-info :is(#gasStatus,#recoveryText){font-size:8px;line-height:1.35;text-shadow:0 1px 3px #001529,0 0 5px #001529aa}
body.touch-playing .power-panel{top:calc(72px + env(safe-area-inset-top))}
#healthPercent{display:none}
body.touch-playing #racketChoices>.health-track{height:11px;top:-16px}
body.touch-playing #healthPercent{display:block;position:absolute;inset:0;z-index:1;text-align:center;font:800 8px/9px system-ui;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 1px 2px #122638,0 0 2px #122638;pointer-events:none}
#mobileControls .touch-actions button svg{width:23px;height:23px;stroke-width:1.8}
#mobileControls .touch-actions :is([data-action="fire"],[data-action="MouseRight"]) svg{width:27px;height:27px}
/* Rebound stays at the outer thumb position; shooting uses the canvas gesture. */
#mobileControls .touch-actions [data-action="MouseRight"]{grid-column:3;grid-row:2;border-radius:20px}
#mobileControls .touch-actions :is([data-action="KeyG"],[data-action="Space"]) svg{width:25px;height:25px}
/* Larger thumb movement area and reference-inspired solid action silhouettes. */
#mobileControls{--stick-size:clamp(112px,33dvh,150px)}
#mobileControls .touch-stick span{width:43%;height:43%}
#mobileControls .touch-actions{grid-template-rows:48px max(54px,var(--action-size))}
#mobileControls .touch-actions [data-action="MouseRight"]{height:max(54px,var(--action-size));padding:2px;gap:2px}
#mobileControls .touch-actions [data-action="MouseRight"] svg{width:34px;height:34px;flex-shrink:0}
#mobileControls .touch-actions :is([data-action="KeyG"],[data-action="Space"]) svg{width:27px;height:27px;flex-shrink:0}
/* Right-hand action column, with rebound as the primary thumb target. */
#mobileControls{--secondary-size:clamp(44px,12dvh,50px);--rebound-size:clamp(72px,21dvh,92px);--column-gap:clamp(4px,1.4dvh,6px)}
#mobileControls .touch-actions{display:flex;flex-direction:column;align-items:center;gap:var(--column-gap);width:var(--rebound-size);right:max(12px,env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom))}
#mobileControls .touch-actions :is([data-action="KeyP"],[data-action="KeyG"],[data-action="Space"]){width:52px;height:var(--secondary-size);min-height:var(--secondary-size);padding:2px;gap:1px;flex-shrink:0}
#mobileControls .touch-actions [data-action="KeyP"]{order:0}
#mobileControls .touch-actions [data-action="KeyG"]{order:1}
#mobileControls .touch-actions [data-action="Space"]{order:2}
#mobileControls .touch-actions [data-action="MouseRight"]{order:3;margin-top:12px;width:var(--rebound-size);height:var(--rebound-size);min-height:var(--rebound-size);border-radius:24px;border-width:2px;gap:3px;box-shadow:inset 0 1px 0 #e3f7ff55,0 4px 14px #00172b66}
#mobileControls .touch-actions [data-action="MouseRight"] svg{width:clamp(40px,11dvh,48px);height:clamp(40px,11dvh,48px)}
#mobileControls .touch-actions [data-action="MouseRight"] span{font-size:11px;line-height:13px}
#mobileControls .touch-flight{right:calc(24px + var(--rebound-size) + env(safe-area-inset-right));bottom:calc(26px + var(--rebound-size) + env(safe-area-inset-bottom))}
#mobileControls.touch-spectator .touch-flight{right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom))}
/* Forgiving rebound hit area; upper edge stops before the jump control. */
#mobileControls .touch-actions [data-action="MouseRight"]{position:relative;overflow:visible}
#mobileControls .touch-actions [data-action="MouseRight"]::after{content:"";position:absolute;inset:-4px -14px -12px -16px;border-radius:20px;pointer-events:auto;touch-action:none}

@media(max-height:300px){
 #mobileControls .touch-pause{right:calc(24px + var(--rebound-size) + env(safe-area-inset-right))}
}