#touch-controls{--touch-stick-size:clamp(104px,30vw,136px);position:fixed;z-index:12;inset:auto 0 0;height:var(--touch-dock-height);box-sizing:border-box;display:grid;grid-template-columns:var(--touch-stick-size) minmax(0,1fr);align-items:center;gap:16px;padding:8px max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:#0b1722;border-top:1px solid #718c97;color:#edf4e8;font:14px/1.35 system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}
#touch-controls[hidden],#touch-rolls[hidden]{display:none!important}
body{--touch-dock-height:calc(190px + env(safe-area-inset-bottom,0px))}
body[data-touch-flight="true"] #app{bottom:var(--touch-dock-height);height:auto;transform:translateZ(0)}
body[data-touch-flight="true"] #viewport{touch-action:none}
body[data-touch-flight="true"] #player-tools,body[data-touch-flight="true"] #flight-controls{display:none}
.touch-label{display:block;text-align:center;font-size:10px;font-weight:700;letter-spacing:.06em;color:#c5d8df;margin-bottom:7px}
#touch-stick{position:relative;width:var(--touch-stick-size);height:var(--touch-stick-size);border:2px solid #8aadb9;border-radius:50%;box-sizing:border-box;background:#183442;touch-action:none}
.touch-cross{position:absolute;inset:0;display:grid;place-items:center;color:#8cafb8;font-size:42px}
.touch-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border:2px solid #e6f5ea;border-radius:50%;background:#8bb6c4;pointer-events:none}
.touch-actions{max-width:380px;justify-self:end;width:100%}
.touch-main-actions{display:flex;align-items:stretch;justify-content:flex-end;gap:10px}
#touch-controls button{box-sizing:border-box;min-width:44px;min-height:44px;border:1px solid #b2c9d0;border-radius:10px;padding:9px;background:#203b4b;color:#f3f6e8;font:700 13px/1.25 system-ui,sans-serif;touch-action:none}
#touch-controls button:focus-visible,.touch-toggle:focus-visible{outline:3px solid #ffd296;outline-offset:3px}
#touch-controls button[data-held="true"],#touch-fire[aria-pressed="true"]{background:#edb977;color:#112331;border-color:#ffe0b5}
#touch-controls button:disabled{opacity:.5}
#touch-controls #touch-fire{width:clamp(76px,22vw,104px);min-height:86px;background:#315a68;font-size:19px}
#touch-fire small{display:block;margin-top:5px;font-size:10px;font-weight:400}
.touch-secondary{display:grid;gap:6px;width:clamp(80px,23vw,112px)}
#touch-utilities{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}#touch-rolls{display:flex;flex:1;justify-content:flex-end;gap:8px}
#touch-rolls button{flex:1;max-width:110px}
.touch-toggle{min-height:44px;border:1px solid #8aacb3;border-radius:6px;background:#183039;color:#e7f0e8;padding:10px;font:13px/1.3 system-ui,sans-serif}
.touch-toggle[aria-pressed="true"]{border-color:#ffd296;color:#ffd296}
@media(max-height:500px){body{--touch-dock-height:calc(128px + env(safe-area-inset-bottom,0px))}#touch-controls{--touch-stick-size:90px;gap:20px}.touch-label{font-size:9px;margin-bottom:4px}.touch-knob{width:34px;height:34px}.touch-actions{display:flex;align-items:center;gap:12px;max-width:560px}.touch-main-actions{flex:1}#touch-controls #touch-fire{min-height:80px;width:90px}.touch-secondary{width:100px}#touch-utilities{margin:0;align-items:center}#touch-rolls{display:grid;gap:6px}#touch-rolls button{width:90px;min-height:44px;padding:7px}body[data-touch-flight="true"] #hud{font-size:10px;padding:5px 10px}body[data-touch-flight="true"] #raid-objective{font-size:10px;margin-top:3px;padding-top:3px}body[data-touch-flight="true"] #starbase-metrics .starbase-value{font-size:14px}}
@media(min-width:900px) and (min-height:501px){#touch-controls{grid-template-columns:160px minmax(0,1fr);padding-inline:max(28px,env(safe-area-inset-left));--touch-stick-size:144px}.touch-actions{max-width:450px}#touch-controls #touch-fire{width:130px}}
body[data-page="bosconian"] #player-tools .touch-toggle{display:none}
body[data-touch-flight="true"] #hud{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top))}
body[data-embedded="true"][data-touch-flight="true"] .embed-toolbar{display:none}
body[data-embedded="true"][data-touch-flight="true"] #app{top:0;height:auto}
/* A short, single-row flight dock leaves phone landscape for the playfield. */
@media(orientation:landscape) and (max-height:500px){
 body{--touch-dock-height:calc(88px + env(safe-area-inset-bottom,0px))}
 #touch-controls{--touch-stick-size:64px;gap:12px;padding-block:4px max(4px,env(safe-area-inset-bottom))}
 .touch-label{font-size:8px;letter-spacing:0;white-space:nowrap;margin-bottom:3px}.touch-knob{width:28px;height:28px}
 .touch-actions{width:auto;max-width:none;gap:8px}.touch-main-actions{flex:initial;gap:6px}
 .touch-secondary{display:flex;width:auto;gap:6px}.touch-secondary button{width:68px;font-size:11px;padding:4px}
 #touch-controls #touch-fire{width:64px;min-height:58px;font-size:15px;padding:6px}
 #touch-fire small{font-size:9px;margin-top:3px}#touch-utilities{gap:6px}
 #touch-rolls{display:flex;gap:6px}#touch-rolls button{width:48px;min-height:44px;padding:4px;font-size:11px}
 body[data-touch-flight="true"] #hud{left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));top:max(4px,env(safe-area-inset-top));padding:4px 8px;font-size:11px;line-height:1.15}
 body[data-touch-flight="true"] .terrain-metrics{grid-template-columns:1fr .65fr 1fr 1.3fr .8fr;gap:3px 12px}
 body[data-touch-flight="true"] #metrics{max-width:none;width:100%}
 body[data-touch-flight="true"] .terrain-roll{grid-column:5;grid-row:1}
 body[data-touch-flight="true"] .terrain-stat,body[data-touch-flight="true"] .starbase-stat{gap:4px;white-space:nowrap}
 body[data-touch-flight="true"] .terrain-label,body[data-touch-flight="true"] .starbase-label{font-size:10px}
 body[data-touch-flight="true"] #hud .terrain-value,body[data-touch-flight="true"] #hud .starbase-value{font-size:13px;line-height:1.1}
 body[data-touch-flight="true"] .terrain-sector{display:flex}body[data-touch-flight="true"] .terrain-sector progress{width:46px;height:3px;margin:0 0 2px}
 body[data-touch-flight="true"] #starbase-metrics{grid-template-columns:1.1fr 1fr .75fr .75fr 1fr;gap:3px 12px}
 body[data-touch-flight="true"] .starbase-stat[data-stat="high-score"]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 body[data-touch-flight="true"] #raid-objective{display:flex;gap:8px;margin-top:3px;padding-top:3px;font-size:10px;line-height:1.15}
 body[data-touch-flight="true"] #objective-label{white-space:nowrap;flex-shrink:0}
 body[data-touch-flight="true"] #objective-detail{min-width:0;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0}
 body[data-touch-flight="true"] #assist-mode-status{max-width:36%;font-size:9px;line-height:1.1;margin-top:1px}
 body[data-touch-flight="true"] #primary-action{min-height:44px;padding:5px 8px;font-size:10px}
}

/* Match the in-playfield Pause/Fullscreen pair without shrinking tap targets. */
#touch-view-controls{display:flex;flex:none;gap:6px;align-items:center}
#touch-controls #touch-view-controls button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:8px;border:1px solid #80b0b18c;border-radius:7px;background:#06151bd9;color:#dcf1e8}
#touch-view-controls svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#touch-controls #touch-view-controls button[aria-pressed=true]{border-color:#ffd296;color:#ffd296}

/* Compact action icons leave more portrait height and landscape width for play. */
body{--touch-dock-height:calc(144px + env(safe-area-inset-bottom,0px))}
#touch-controls{--touch-stick-size:clamp(88px,24vw,104px);grid-template-columns:var(--touch-stick-size) minmax(0,1fr)}
.touch-secondary{width:44px;flex:none;align-items:center}
#touch-controls #touch-arm,#touch-controls #touch-rolls button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:8px;border:1px solid #80b0b18c;border-radius:7px;background:#06151bd9;color:#dcf1e8}
#touch-arm svg,#touch-rolls svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#touch-arm [hidden]{display:none}
#touch-controls #touch-arm[aria-pressed=true]{color:#ffe0a4;border-color:#d6aa6a}
#touch-controls #touch-arm[aria-pressed=false]{color:#a9bec5}
#touch-controls #touch-arm[data-held=true],#touch-controls #touch-rolls button[data-held=true]{background:#edb977;color:#112331;border-color:#ffe0b5}
#touch-rolls{display:flex;flex:none;gap:6px;align-items:center}
#touch-controls #touch-fire{width:64px;min-height:60px;font-size:15px}
@media(orientation:landscape) and (max-height:500px){body{--touch-dock-height:calc(88px + env(safe-area-inset-bottom,0px))}#touch-controls{--touch-stick-size:64px}}

/* Fire is visually compact, with a larger surface for a sustained thumb hold. */
#touch-controls #touch-fire{display:grid;place-items:center;flex:none;width:64px;height:60px;min-height:60px;padding:10px;border-radius:10px}
#touch-fire svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#touch-controls #touch-fire[aria-pressed=true],#touch-controls #touch-fire[data-held=true]{background:#edb977;color:#112331;border-color:#ffe0b5}
.touch-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}