/* The arena fills the viewport. Invisible quadrants never reserve layout space. */
#touchControls, [data-touch-hand] { display: none; }
body.touch-controls [data-touch-hand] { display: inline-flex; }
body.touch-controls .touch-help { display: block; }
.training-steps i:last-child { display: none; }
body.touch-controls.training .training-steps i:last-child { display: block; }
body.touch-controls #touchControls {
  display: block; position: absolute; z-index: 17; inset: 0;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.touch-zone {
  position: absolute; top: 50%; bottom: 0; width: 50%;
  pointer-events: auto; touch-action: none;
}
#movePad { left: 0; }
#aimPad { right: 0; }
.touch-trails {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: hidden; pointer-events: none;
}
.touch-trail { opacity: 0; color: #67e8f9; }
.touch-trail--aim { color: #ff83bb; }
.touch-trail.is-visible { opacity: 1; }
.touch-trail.is-fading { opacity: 0; transition: opacity 260ms ease-out; }
.touch-trail path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.touch-trail-glow { stroke-width: 9; opacity: .16; }
.touch-trail-line { stroke-width: 2.5; opacity: .85; }
.touch-trail-origin { fill: #07141d; stroke: currentColor; stroke-width: 1.5; opacity: .7; }
.touch-trail-tip { fill: #fff; stroke: currentColor; stroke-width: 2; }
body.reduced-motion .touch-trail.is-fading { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .touch-trail.is-fading { transition: none; }
}
#touchNovaBtn {
  position: absolute; right: max(12px,env(safe-area-inset-right)); top: var(--hud-bottom, 166px);
  min-width: 116px; min-height: 48px; padding: 8px 12px; border: 1px solid #ff4d9177;
  background: linear-gradient(90deg,#59203c var(--charge,0%),#101e27 var(--charge,0%));
  color: #d1c2cc; font: var(--type-label) Consolas,monospace; pointer-events: auto; touch-action: none;
}
#touchNovaBtn b { display: inline-block; }
#touchNovaBtn:disabled { opacity: .75; }
#touchNovaBtn.ready { color: #fff; border-color: var(--pink); box-shadow: 0 0 18px #ff4d9144; }
#touchNovaBtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
body.left-handed #movePad { left: auto; right: 0; }
body.left-handed #aimPad { right: auto; left: 0; }
body.left-handed #touchNovaBtn { right: auto; left: max(12px,env(safe-area-inset-left)); }
body.touch-controls #hud .nova-button, body.touch-controls .hud-score .record-line,
body.touch-controls #contractHud, body.touch-controls #muteBtn,
body.touch-controls #hud [data-open-guide], body.touch-controls .controls-hint { display: none; }
body.touch-controls #hud {
  grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 6px;
  padding: max(8px,env(safe-area-inset-top)) 10px 6px;
  max-height: 34dvh; overflow-y: auto; pointer-events: auto;
}
body.touch-controls #hud .hud-score { padding: 6px 8px; }
body.touch-controls .hud-score > strong { font-size: calc(24px * var(--text-scale)); }
body.touch-controls #hud .hud-systems { display: flex; flex-wrap: nowrap; max-width: none; width: 100%; gap: 8px; padding: 6px 8px; }
body.touch-controls #hud .system-meters { width: 100%; min-width: 0; }
body.touch-controls .shield-label { margin-bottom: 3px; }
body.touch-controls .meter-row { margin: 3px 0; gap: 6px; }
body.touch-controls #hud .utility-buttons { order: 1; }
body.touch-controls #pauseBtn { min-width: 44px; min-height: 44px; }
body.touch-controls #hud .hud-mission { width: 100%; padding: 6px 8px; }
body.touch-controls .mission-title { gap: 4px 10px; }
body.touch-controls .mission-track { margin: 5px 0; }
body.touch-controls .mission-goal { display: block; }
body.touch-controls #bossHud { padding-top: 3px; }
body.touch-controls #hud.has-boss .mission-track { display: none; }
body.touch-controls #playFooter { bottom: max(12px,env(safe-area-inset-bottom)); left: 10px; pointer-events: none; }
body.touch-controls .loadout { max-width: 100%; }
body.touch-controls .combo-badge { left: 10px; padding: 6px 8px; }
body.touch-controls .combo-badge > span { font-size: 24px; }
body.touch-controls .combo-badge > div { display: none; }
body.touch-controls .announcement { padding: 12px; top: var(--hud-bottom); }
body.touch-controls .announcement strong { font-size: var(--type-title); }
body.touch-controls.training #hud { display: none; }
body.touch-controls.training #trainingPanel {
  top: max(8px,env(safe-area-inset-top)); bottom: auto; left: 10px; right: 10px;
  width: auto; max-width: none; max-height: 32dvh; overflow-y: auto; padding: 10px 12px;
}
body.touch-controls.training .training-panel h2 { display: block; font-size: var(--type-title); margin: 6px 0; }
body.touch-controls.training .training-panel p { font-size: var(--type-body); line-height: 1.4; margin: 0; }
body.touch-controls.training .training-steps { display: flex; margin: 6px 0; }
body.touch-controls.training #touchNovaBtn { top: var(--training-height, 200px); }
#pauseRunInfo { color: #b7cbd1; font-size: var(--type-body); line-height: 1.5; }
html[data-large-text] body.touch-controls #hud { grid-template-columns: minmax(0,1fr); max-height: 38dvh; }
html[data-large-text] body.touch-controls #hud .hud-score { display: none; }
html[data-large-text] body.touch-controls #hud .hud-systems { grid-column: 1; grid-row: 1; }
html[data-large-text] body.touch-controls #hud .hud-mission { grid-column: 1; grid-row: 2; }
html[data-large-text] body.touch-controls #hud.has-boss #sectorLabel,
html[data-large-text] body.touch-controls #hud.has-boss #sectorGoal { display: none; }
html[data-large-text] body.touch-controls #hud .mission-title { flex-direction: row; }
@media (max-height: 540px) and (min-aspect-ratio: 7/5) {
  body.touch-controls #hud { grid-template-columns: minmax(80px,1fr) minmax(160px,2fr) minmax(190px,1.7fr); max-height: 28dvh; }
  body.touch-controls #hud .hud-mission { grid-row: 1; grid-column: 2; }
  body.touch-controls #hud .hud-systems { grid-row: 1; grid-column: 3; }
  body.touch-controls #playFooter { left: 10px; right: 10px; bottom: 8px; }
  body.touch-controls.training #trainingPanel { max-height: 28dvh; }
  html[data-large-text] body.touch-controls #hud { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  html[data-large-text] body.touch-controls #hud .hud-mission { grid-column: 1; grid-row: 1; }
  html[data-large-text] body.touch-controls #hud .hud-systems { grid-column: 2; grid-row: 1; }
}