:root {
  color-scheme: dark;
  --bg: #17141d;
  --panel: #211d27;
  --panel-soft: #2a2530;
  --line: #45584c;
  --jade: #6e9c82;
  --mint: #b9e6c8;
  --ivory: #f0e6d2;
  --lavender: #c8c1d6;
  --plum: #6f477d;
  --app-height: 100dvh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  min-width: 320px;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(110,156,130,.13), transparent 34rem),
    radial-gradient(circle at 82% 92%, rgba(111,71,125,.13), transparent 32rem),
    var(--bg);
  color: var(--lavender);
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; }
button { color: inherit; }

#app {
  width: 100%;
  height: var(--app-height);
  min-height: 0;
  padding:
    max(6px, var(--safe-top))
    max(6px, var(--safe-right))
    max(6px, var(--safe-bottom))
    max(6px, var(--safe-left));
}

.game-shell {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  position: relative;
  background: rgba(33,29,39,.94);
  border: 1px solid rgba(185,230,200,.20);
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(0,0,0,.42);
  overflow: hidden;
}

.brand {
  grid-row: 1;
  min-width: 0;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(185,230,200,.11);
  background: rgba(31,27,36,.96);
}
.brand-copy { min-width: 0; }
.brand h1 {
  margin: 0;
  color: var(--ivory);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: clamp(.92rem, 1.5vw, 1.25rem);
  line-height: 1;
  font-weight: 720;
  white-space: nowrap;
}
.brand p {
  margin: 2px 0 0;
  color: var(--jade);
  letter-spacing: .05em;
  font-size: .72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-block;
  position: relative;
  background: var(--mint);
  clip-path: polygon(50% 0,86% 22%,100% 58%,72% 100%,29% 90%,0 58%,13% 18%);
  filter: drop-shadow(0 0 8px rgba(185,230,200,.20));
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 29%;
  background: var(--bg);
  clip-path: polygon(50% 0,100% 30%,85% 88%,23% 100%,0 45%);
}

.game-toolbar {
  margin-left: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.icon-control,
.hint-dismiss {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(185,230,200,.20);
  border-radius: 11px;
  background: rgba(42,37,48,.92);
  color: var(--ivory);
  cursor: pointer;
  touch-action: manipulation;
}
.icon-control:active,
.icon-control.is-active,
.icon-control:hover,
.icon-control:focus-visible {
  border-color: rgba(185,230,200,.72);
  background: #342e3a;
  outline: none;
}
.icon-control:active,
.icon-control.is-active { transform: scale(.96); }
.icon-control:disabled { opacity: .34; pointer-events: none; }
.ui-icon,
.orientation-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.sound-off-icon,
.resume-icon { display: none; }
.is-muted .sound-on-icon { display: none; }
.is-muted .sound-off-icon { display: block; }
[aria-pressed="true"] .pause-icon { display: none; }
[aria-pressed="true"] .resume-icon { display: block; }
body[data-game-state="title"] .pause-control,
body[data-game-state="runComplete"] .pause-control,
body[data-game-state="signalLost"] .pause-control { display: none; }
body:not([data-game-state="title"]):not([data-game-state="runComplete"]):not([data-game-state="signalLost"]) .start-control { display: none; }

.orientation-hint {
  position: absolute;
  left: 50%;
  bottom: max(9px, var(--safe-bottom));
  z-index: 12;
  width: min(520px, calc(100% - 16px));
  min-height: 44px;
  display: grid;
  grid-template-columns: 26px minmax(0,1fr) 38px;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 4px 4px 4px 9px;
  transform: translateX(-50%);
  border: 1px solid rgba(185,230,200,.25);
  border-radius: 11px;
  background: rgba(30,27,35,.96);
  box-shadow: 0 8px 24px rgba(0,0,0,.34);
}
.orientation-hint[hidden] { display: none; }
.orientation-icon { width: 25px; height: 25px; color: var(--mint); }
.orientation-hint strong,
.orientation-hint span { display: block; }
.orientation-hint strong { color: var(--ivory); font-size: .82rem; }
.orientation-hint span { margin-top: 1px; color: var(--lavender); font-size: .70rem; }
@media (max-width: 620px) and (orientation: portrait) {
  .orientation-hint { width: calc(100% - 14px); grid-template-columns: 24px minmax(0,1fr) 36px; }
  .orientation-hint strong { font-size: .76rem; }
  .orientation-hint span { display: none; }
}
.hint-dismiss { border: 0; background: transparent; }

.hud-panel {
  grid-row: 2;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 10px 6px;
  border-bottom: 1px solid rgba(185,230,200,.10);
  background: rgba(23,20,29,.98);
}
body[data-game-state="title"] .hud-panel,
body[data-game-state="runComplete"] .hud-panel,
body[data-game-state="signalLost"] .hud-panel { display: none; }
.hud-mission {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 1px;
}
.hud-mission strong {
  color: var(--ivory);
  font-size: .72rem;
  letter-spacing: .035em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-mission span {
  color: #93a198;
  font-size: .68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-metrics {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(9px,1.5vw,20px);
}
.hud-metric { min-width: 46px; display: grid; gap: 0; }
.hud-metric span {
  color: #8d8597;
  font-size: .58rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hud-metric strong { color: var(--ivory); font-size: .83rem; line-height: 1.1; }
.hud-metric:nth-child(1) strong,
.hud-metric:nth-child(3) strong { color: var(--mint); }
.hud-repairs { display: flex; gap: 4px; padding-inline: 3px; }
.hud-repairs i {
  width: 9px;
  height: 9px;
  display: block;
  transform: rotate(45deg);
  border-radius: 2px;
  background: #443e49;
}
.hud-repairs i.is-active { background: var(--mint); box-shadow: 0 0 7px rgba(185,230,200,.24); }
.hud-shift {
  min-width: 48px;
  padding: 3px 7px;
  border-radius: 8px;
  background: rgba(111,71,125,.88);
  color: var(--ivory);
  text-align: center;
  font-size: .68rem;
  font-weight: 700;
}

.play-layout {
  grid-row: 3;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: stretch;
  overflow: hidden;
  position: relative;
}
.canvas-wrap {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 4px;
  overflow: hidden;
}
.canvas-frame {
  position: relative;
  min-width: 1px;
  min-height: 1px;
  flex: 0 0 auto;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: clamp(6px,1vw,11px);
  background: #151319;
  box-shadow: inset 0 0 0 1px rgba(185,230,200,.10), 0 10px 30px rgba(0,0,0,.16);
  image-rendering: auto;
  touch-action: none;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--mint); }

.context-hud,
.status-toast {
  position: absolute;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  pointer-events: none;
}
.context-hud {
  bottom: 9px;
  width: min(78%, 590px);
  display: grid;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid rgba(185,230,200,.26);
  border-radius: 10px;
  background: rgba(35,31,41,.94);
  box-shadow: 0 7px 24px rgba(0,0,0,.28);
}
.context-hud[hidden],
.status-toast[hidden] { display: none; }
.context-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.context-copy strong {
  min-width: 0;
  color: var(--ivory);
  font-size: clamp(.68rem,1.2vw,.82rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.context-copy span {
  min-width: 0;
  color: #aea5b8;
  font-size: clamp(.62rem,1.05vw,.74rem);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.context-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: #17141d;
}
.context-progress i {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--mint);
  transition: width 80ms linear;
}
.status-toast {
  top: 10px;
  max-width: min(82%, 680px);
  padding: 6px 10px;
  border: 1px solid rgba(185,230,200,.18);
  border-radius: 9px;
  background: rgba(33,29,39,.90);
  color: var(--ivory);
  font-size: clamp(.66rem,1.1vw,.78rem);
  text-align: center;
}

.dialog {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding:
    max(12px,var(--safe-top))
    max(12px,var(--safe-right))
    max(12px,var(--safe-bottom))
    max(12px,var(--safe-left));
  background: rgba(12,10,15,.80);
  backdrop-filter: blur(6px);
}
.dialog[hidden] { display: none; }
.dialog-card {
  width: min(620px,100%);
  max-height: min(86dvh,760px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(16px,3vw,24px);
  border: 1px solid rgba(185,230,200,.25);
  border-radius: 15px;
  background: #211d27;
  box-shadow: 0 22px 65px rgba(0,0,0,.55);
}
.dialog h2 { margin: 0 0 14px; color: var(--ivory); letter-spacing: .06em; font-size: clamp(1.15rem,3vw,1.55rem); }
.dialog p, .dialog li { line-height: 1.48; }
.dialog ol, .dialog ul { padding-left: 1.3em; }
.dialog table { width: 100%; border-collapse: collapse; font-size: clamp(.76rem,1.8vw,.95rem); }
.dialog th, .dialog td { padding: 8px; text-align: left; border-bottom: 1px solid rgba(185,230,200,.12); }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.dialog-actions button {
  min-width: 92px;
  min-height: 44px;
  padding: 7px 14px;
  border: 1px solid rgba(185,230,200,.20);
  border-radius: 9px;
  background: var(--panel-soft);
  cursor: pointer;
}
.dialog-actions button:hover,
.dialog-actions button:focus-visible { border-color: var(--mint); background: #302b37; outline: none; }
.controls-grid,
.guide-content { display: grid; gap: 12px; }
.controls-section,
.guide-content section {
  padding: 11px 12px;
  border: 1px solid rgba(185,230,200,.12);
  border-radius: 11px;
  background: rgba(23,20,29,.45);
}
.controls-section h3,
.guide-content h3 { margin: 0 0 8px; color: var(--mint); font-size: .95rem; }
.control-row {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 4px 0;
}
.control-row + .control-row { border-top: 1px solid rgba(185,230,200,.08); }
.control-row .ui-icon { width: 20px; height: 20px; color: var(--ivory); justify-self: center; }
.control-row strong { color: var(--ivory); }
.control-row small { display: block; margin-top: 2px; color: #aaa1b5; }
.interaction-rules p { margin: 7px 0 0; }
.interaction-rules p:first-of-type { margin-top: 0; }
.guide-content p,
.guide-content ul,
.guide-content ol { margin-block: 0; }
.guide-content li + li { margin-top: 5px; }
.guide-note { padding: 9px 11px; border-left: 3px solid var(--jade); background: rgba(110,156,130,.08); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

@media (pointer: coarse), (max-width: 900px) {
  #app {
    padding:
      max(3px,var(--safe-top))
      max(3px,var(--safe-right))
      max(3px,var(--safe-bottom))
      max(3px,var(--safe-left));
  }
  .game-shell { border-radius: 12px; }
  .brand { min-height: 48px; gap: 7px; padding: 3px 6px; }
  .brand-mark { width: 27px; height: 27px; flex-basis: 27px; }
  .brand-copy { max-width: min(34vw,155px); }
  .brand h1 { font-size: clamp(.74rem,3vw,.94rem); letter-spacing: .08em; }
  .brand p { display: none; }
  .game-toolbar { gap: 3px; }
  .icon-control { width: 44px; height: 44px; flex-basis: 44px; border-radius: 11px; }
  .hud-panel { min-height: 46px; padding: 4px 7px; gap: 8px; }
  .hud-metrics { gap: 8px; }
  .hud-metric { min-width: 39px; }
  .hud-metric span { font-size: .56rem; }
  .hud-metric strong { font-size: .78rem; }
  .canvas-wrap { padding: 2px; }
  .context-hud { width: min(90%,560px); bottom: 6px; padding: 6px 8px; }
  .status-toast { top: 6px; max-width: 90%; }
}

@media (max-width: 620px) and (orientation: portrait) {
  .brand-copy { max-width: 108px; }
  .hud-panel {
    min-height: 70px;
    align-items: stretch;
    flex-direction: column;
    gap: 3px;
    padding: 5px 7px 6px;
  }
  .hud-mission { flex: 0 0 auto; }
  .hud-mission strong { font-size: .69rem; }
  .hud-mission span { font-size: .65rem; }
  .hud-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr)) auto;
    gap: 5px;
  }
  .hud-metric { min-width: 0; }
  .hud-repairs { justify-content: flex-end; align-items: center; }
  .hud-shift { grid-column: 1 / -1; justify-self: end; }
  .canvas-wrap { place-items: start center; padding-top: 3px; }
  body[data-game-state="title"] .canvas-wrap,
  body[data-game-state="runComplete"] .canvas-wrap,
  body[data-game-state="signalLost"] .canvas-wrap { place-items: center; padding-block: 8px; }
  .context-copy { display: grid; gap: 2px; }
  .context-copy span { text-align: left; }
}

/* Short landscape screens use the width that would otherwise be empty as an information rail.
   This keeps the full 32x22 sector visible at the largest proportional scale without a joystick or action pad. */
@media (orientation: landscape) and (max-height: 700px) and (max-width: 1100px) {
  #app {
    padding:
      max(2px,var(--safe-top))
      max(2px,var(--safe-right))
      max(2px,var(--safe-bottom))
      max(2px,var(--safe-left));
  }
  .game-shell {
    grid-template-columns: minmax(0,1fr) clamp(205px,28vw,255px);
    grid-template-rows: auto auto minmax(0,1fr);
    border-radius: 9px;
  }
  .play-layout {
    grid-column: 1;
    grid-row: 1 / 4;
    padding-right: 2px;
  }
  .brand {
    grid-column: 2;
    grid-row: 1;
    min-height: 46px;
    border-left: 1px solid rgba(185,230,200,.10);
    padding: 2px 4px;
  }
  .brand-copy { max-width: 82px; }
  .brand h1 { font-size: .68rem; letter-spacing: .045em; white-space: normal; }
  .brand-mark { width: 24px; height: 24px; flex-basis: 24px; }
  .game-toolbar { gap: 2px; }
  .icon-control { width: 38px; height: 38px; flex-basis: 38px; border-radius: 9px; }
  .icon-control .ui-icon { width: 20px; height: 20px; }
  .orientation-hint { display: none !important; }
  .hud-panel {
    grid-column: 2;
    grid-row: 2 / 4;
    min-height: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px;
    border-left: 1px solid rgba(185,230,200,.10);
    border-bottom: 0;
    overflow: hidden;
  }
  body[data-game-state="title"] .hud-panel,
  body[data-game-state="runComplete"] .hud-panel,
  body[data-game-state="signalLost"] .hud-panel { display: none; }
  .hud-mission { flex: 0 0 auto; gap: 3px; }
  .hud-mission strong { font-size: .67rem; white-space: normal; }
  .hud-mission span { font-size: .62rem; line-height: 1.25; white-space: normal; }
  .hud-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px 8px;
  }
  .hud-metric {
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid rgba(185,230,200,.08);
    border-radius: 8px;
    background: rgba(42,37,48,.45);
  }
  .hud-metric span { font-size: .50rem; }
  .hud-metric strong { font-size: .74rem; }
  .hud-repairs { align-items: center; padding: 5px 4px; }
  .hud-shift { justify-self: stretch; min-width: 0; }
  .canvas-wrap { padding: 2px; place-items: center; }
  .context-hud { width: min(88%,520px); }
}

@media (max-width: 360px) {
  .brand { gap: 4px; padding-inline: 4px; }
  .brand-copy { max-width: 76px; }
  .brand h1 { font-size: .65rem; letter-spacing: .035em; }
  .brand-mark { width: 24px; height: 24px; flex-basis: 24px; }
  .game-toolbar { gap: 2px; }
  .icon-control { width: 44px; height: 44px; flex-basis: 44px; }
}

@media (hover: hover) and (pointer: fine) {
  .icon-control[title]:hover::after {
    content: attr(title);
    position: absolute;
    z-index: 30;
    top: calc(100% + 7px);
    right: 0;
    width: max-content;
    max-width: 180px;
    padding: 6px 8px;
    border-radius: 7px;
    background: #111016;
    color: var(--ivory);
    font-size: .72rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
  }
  .icon-control { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Portrait mobile play: one clear primary touch surface plus a compact full-sector overview.
   The primary camera reuses the stable v1.4.0 world state; only presentation/input routing changes. */
.focus-wrap { display: none; min-width: 0; min-height: 0; overflow: hidden; }
.focus-frame { position: relative; width: 100%; height: 100%; min-width: 1px; min-height: 1px; }
#focusCanvas {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 1px solid rgba(185,230,200,.18);
  background: #151319;
  box-shadow: inset 0 0 0 1px rgba(185,230,200,.06), 0 8px 24px rgba(0,0,0,.18);
  touch-action: none;
}
.overview-badge {
  display: none;
  position: absolute;
  top: 5px;
  left: 6px;
  z-index: 3;
  padding: 2px 6px;
  border: 1px solid rgba(185,230,200,.16);
  border-radius: 99px;
  background: rgba(23,20,29,.76);
  color: rgba(240,230,210,.72);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
}

@media (pointer: coarse) and (orientation: portrait) and (max-width: 900px) {
  body:not([data-game-state="title"]):not([data-game-state="runComplete"]):not([data-game-state="signalLost"]) .play-layout {
    grid-template-rows: minmax(0,1fr) auto clamp(112px, 20vh, 174px);
    gap: 3px;
    padding: 2px;
  }
  body:not([data-game-state="title"]):not([data-game-state="runComplete"]):not([data-game-state="signalLost"]) .focus-wrap {
    display: grid;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    place-items: stretch;
    padding: 0;
  }
  body:not([data-game-state="title"]):not([data-game-state="runComplete"]):not([data-game-state="signalLost"]) .context-hud {
    position: static;
    grid-row: 2;
    width: auto;
    max-width: none;
    margin: 0 3px;
    padding: 5px 8px;
    transform: none;
    border-radius: 8px;
  }
  body:not([data-game-state="title"]):not([data-game-state="runComplete"]):not([data-game-state="signalLost"]) .context-copy strong { font-size: .68rem; }
  body:not([data-game-state="title"]):not([data-game-state="runComplete"]):not([data-game-state="signalLost"]) .context-copy span { font-size: .62rem; }
  body:not([data-game-state="title"]):not([data-game-state="runComplete"]):not([data-game-state="signalLost"]) .canvas-wrap {
    grid-row: 3;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    align-self: stretch;
    place-items: center;
    padding: 0;
  }
  body:not([data-game-state="title"]):not([data-game-state="runComplete"]):not([data-game-state="signalLost"]) #gameCanvas {
    pointer-events: none;
    opacity: .94;
  }
  body:not([data-game-state="title"]):not([data-game-state="runComplete"]):not([data-game-state="signalLost"]) .overview-badge { display: block; }
  body:not([data-game-state="title"]):not([data-game-state="runComplete"]):not([data-game-state="signalLost"]) .status-toast {
    top: 6px;
    max-width: calc(100% - 16px);
    padding: 5px 8px;
  }
}

@media (orientation: landscape) and (max-height: 700px) and (max-width: 1100px) {
  .brand-copy { display: none; }
}

/* Native title/aria labels are enough; avoid a CSS tooltip jumping under the pointer after Begin Run. */
@media (hover: hover) and (pointer: fine) {
  .icon-control[title]:hover::after { content: none; }
}

/* v1.5.1 polish: stronger Play Now CTA, optional landscape mobile control pad,
   and title/end-screen alignment fixes without changing the stable gameplay systems. */
.start-pill {
  width: auto;
  min-width: 132px;
  padding-inline: 14px;
  gap: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(64,77,67,.98), rgba(47,60,51,.96));
  border-color: rgba(185,230,200,.56);
  box-shadow: 0 0 0 1px rgba(185,230,200,.10) inset, 0 8px 22px rgba(0,0,0,.24);
}
.start-pill:hover,
.start-pill:focus-visible,
.start-pill:active {
  background: linear-gradient(180deg, rgba(80,100,86,.98), rgba(55,69,60,.98));
}
.start-pill-label {
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mobile-control-zone {
  display: none;
  min-height: 0;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(185,230,200,.09);
}
.mobile-control-copy {
  display: grid;
  gap: 2px;
  margin-bottom: 8px;
}
.mobile-control-copy strong {
  color: var(--ivory);
  font-size: .72rem;
  letter-spacing: .03em;
}
.mobile-control-copy span {
  color: #a7a0b2;
  font-size: .61rem;
  line-height: 1.3;
}
.mobile-touch-proxy {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(185,230,200,.12);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 35%, rgba(111,71,125,.14), transparent 45%),
    radial-gradient(circle at 50% 75%, rgba(110,156,130,.12), transparent 55%),
    rgba(26,23,31,.42);
  touch-action: none;
}
.mobile-pad {
  width: min(176px, 100%);
  aspect-ratio: 1;
  position: relative;
}
.pad-button {
  position: absolute;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(185,230,200,.26);
  border-radius: 50%;
  background: rgba(42,37,48,.92);
  color: var(--ivory);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  cursor: pointer;
  touch-action: manipulation;
}
.pad-button:active,
.pad-button.is-active,
.pad-button:focus-visible {
  border-color: rgba(185,230,200,.72);
  background: rgba(56,49,63,.98);
  outline: none;
  transform: scale(.96);
}
.pad-button .ui-icon { width: 22px; height: 22px; }
.pad-up { top: 0; left: 50%; transform: translateX(-50%); }
.pad-down { bottom: 0; left: 50%; transform: translateX(-50%); }
.pad-left { left: 0; top: 50%; transform: translateY(-50%); }
.pad-right { right: 0; top: 50%; transform: translateY(-50%); }
.pad-up:active, .pad-up.is-active, .pad-up:focus-visible { transform: translateX(-50%) scale(.96); }
.pad-down:active, .pad-down.is-active, .pad-down:focus-visible { transform: translateX(-50%) scale(.96); }
.pad-left:active, .pad-left.is-active, .pad-left:focus-visible { transform: translateY(-50%) scale(.96); }
.pad-right:active, .pad-right.is-active, .pad-right:focus-visible { transform: translateY(-50%) scale(.96); }
.pad-core {
  position: absolute;
  inset: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(185,230,200,.18);
  background: radial-gradient(circle at 35% 30%, rgba(185,230,200,.26), rgba(73,69,81,.84));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 22px rgba(0,0,0,.18);
  pointer-events: none;
}
.pad-core span {
  width: 26px;
  height: 26px;
  display: block;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

@media (pointer: coarse), (max-width: 900px) {
  .start-pill { min-width: 126px; padding-inline: 12px; }
  .start-pill-label { font-size: .80rem; }
}

@media (orientation: landscape) and (max-height: 700px) and (max-width: 1100px) {
  body:not([data-game-state="title"]):not([data-game-state="runComplete"]):not([data-game-state="signalLost"]) .mobile-control-zone {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  body:not([data-game-state="title"]):not([data-game-state="runComplete"]):not([data-game-state="signalLost"]) .hud-panel {
    overflow-y: auto;
    scrollbar-width: thin;
  }
  body:not([data-game-state="title"]):not([data-game-state="runComplete"]):not([data-game-state="signalLost"]) .hud-metrics {
    flex: 0 0 auto;
  }
  body[data-game-state="title"] .game-shell,
  body[data-game-state="runComplete"] .game-shell,
  body[data-game-state="signalLost"] .game-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0,1fr);
  }
  body[data-game-state="title"] .brand,
  body[data-game-state="runComplete"] .brand,
  body[data-game-state="signalLost"] .brand {
    grid-column: 1;
    grid-row: 1;
    border-left: 0;
    padding-inline: 8px;
  }
  body[data-game-state="title"] .play-layout,
  body[data-game-state="runComplete"] .play-layout,
  body[data-game-state="signalLost"] .play-layout {
    grid-column: 1;
    grid-row: 2;
    padding-right: 0;
  }
  body[data-game-state="title"] .brand-copy,
  body[data-game-state="runComplete"] .brand-copy,
  body[data-game-state="signalLost"] .brand-copy { display: block; max-width: none; }
  body[data-game-state="title"] .brand h1,
  body[data-game-state="runComplete"] .brand h1,
  body[data-game-state="signalLost"] .brand h1 { font-size: .86rem; letter-spacing: .08em; white-space: nowrap; }
  body[data-game-state="title"] .start-pill,
  body[data-game-state="runComplete"] .start-pill,
  body[data-game-state="signalLost"] .start-pill { min-width: 138px; }
}

/* ========================================================================== 
   v1.5.2 production polish — header CTA, short-landscape control rail,
   and fast mobile directional pad. These rules intentionally affect
   presentation/input surfaces only; the 960x660 world remains proportional.
   ========================================================================== */

/* Header: the CTA participates in flex sizing instead of inheriting the
   square icon-control flex-basis that caused its label to spill/overlap. */
.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand-copy {
  flex: 0 1 auto;
}
.game-toolbar {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.start-pill {
  box-sizing: border-box;
  width: auto;
  min-width: 118px;
  height: 42px;
  min-height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(185,230,200,.58);
  background: linear-gradient(180deg, rgba(66,117,88,.98), rgba(43,83,62,.98));
  color: #f7f3e8;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 5px 16px rgba(0,0,0,.26),
    0 0 18px rgba(83,158,112,.10);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
}
.start-pill:hover,
.start-pill:focus-visible {
  border-color: rgba(215,255,228,.92);
  filter: brightness(1.08);
  transform: translateY(-1px) scale(1.015);
}
.start-pill:active {
  filter: brightness(.96);
  transform: translateY(0) scale(.985);
}
.start-pill .ui-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}
.start-pill-label {
  display: block;
  line-height: 1;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

/* On portrait phones, put the title composition near the top of the available
   game area instead of centering a wide 960:660 scene inside a tall viewport. */
@media (pointer: coarse) and (orientation: portrait) and (max-width: 900px) {
  body[data-game-state="title"] .canvas-wrap,
  body[data-game-state="runComplete"] .canvas-wrap,
  body[data-game-state="signalLost"] .canvas-wrap {
    place-items: start center;
    padding-top: clamp(16px, 4.5vh, 38px);
    padding-bottom: 72px;
  }
}

/* Narrow headers keep the logo mark but shed nonessential wordmark width before
   the Play Now CTA or utility buttons can collide. */
@media (max-width: 520px) {
  .brand { gap: 5px; }
  .brand-copy { max-width: 78px; }
  .brand h1 { font-size: .67rem; letter-spacing: .035em; }
  .start-pill {
    min-width: 102px;
    height: 40px;
    min-height: 40px;
    padding: 7px 10px;
    gap: 5px;
  }
  .start-pill-label { font-size: .69rem; letter-spacing: .035em; }
  .start-pill .ui-icon { width: 15px; height: 15px; flex-basis: 15px; }
}
@media (max-width: 400px) {
  .brand-copy { display: none; }
  .start-pill { min-width: 98px; }
}

/* Short mobile landscape: the right rail is a fixed-height, non-scrolling grid.
   Its third row owns the remaining space and contains the complete D-pad. */
@media (orientation: landscape) and (max-height: 700px) and (max-width: 1100px) {
  .game-shell {
    grid-template-columns: minmax(0,1fr) clamp(190px, 24vw, 232px);
  }
  .brand {
    min-height: 42px;
    height: 42px;
    padding: 2px 3px;
    gap: 2px;
  }
  .brand-mark { width: 22px; height: 22px; flex-basis: 22px; }
  .game-toolbar { gap: 2px; }
  .icon-control { width: 37px; height: 37px; flex-basis: 37px; }

  body:not([data-game-state="title"]):not([data-game-state="runComplete"]):not([data-game-state="signalLost"]) .hud-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr);
    align-content: stretch;
    gap: 5px;
    padding: 6px;
    overflow: hidden;
  }
  .hud-mission { gap: 1px; }
  .hud-mission strong { font-size: .64rem; line-height: 1.15; }
  .hud-mission span { font-size: .57rem; line-height: 1.18; }
  .hud-metrics {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 4px;
  }
  .hud-metric {
    padding: 4px 5px;
    border-radius: 7px;
  }
  .hud-metric span { font-size: .46rem; line-height: 1; }
  .hud-metric strong { font-size: .69rem; line-height: 1.08; }
  .hud-repairs {
    min-height: 12px;
    padding: 2px 3px;
    gap: 3px;
  }
  .hud-repairs i { width: 8px; height: 8px; }
  .hud-shift { padding: 2px 5px; font-size: .58rem; }

  .mobile-control-zone {
    min-height: 0;
    margin-top: 0;
    padding-top: 5px;
    display: grid;
    grid-template-rows: auto minmax(0,1fr);
    gap: 4px;
    overflow: hidden;
  }
  .mobile-control-copy {
    margin: 0;
    gap: 1px;
  }
  .mobile-control-copy strong { font-size: .64rem; line-height: 1.1; }
  .mobile-control-copy span { font-size: .53rem; line-height: 1.18; }
  .mobile-touch-proxy {
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 4px;
    place-items: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  /* A 3x3 grid cannot clip the bottom control: every element participates in
     normal layout and the button size is derived from viewport height. */
  .mobile-pad {
    --pad-button: clamp(40px, 9.8dvh, 46px);
    --pad-gap: clamp(2px, .9dvh, 5px);
    width: max-content;
    height: max-content;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(3,var(--pad-button));
    grid-template-rows: repeat(3,var(--pad-button));
    gap: var(--pad-gap);
    place-content: center;
    position: static;
  }
  .pad-button,
  .pad-core {
    position: static;
    inset: auto;
    width: var(--pad-button);
    height: var(--pad-button);
    transform: none;
    margin: 0;
  }
  .pad-up { grid-column: 2; grid-row: 1; }
  .pad-left { grid-column: 1; grid-row: 2; }
  .pad-core { grid-column: 2; grid-row: 2; }
  .pad-right { grid-column: 3; grid-row: 2; }
  .pad-down { grid-column: 2; grid-row: 3; }
  .pad-button {
    border-radius: 12px;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  .pad-button .ui-icon { width: 18px; height: 18px; }
  .pad-core {
    display: grid;
    place-items: center;
    border-radius: 50%;
  }
  .pad-core span { width: 42%; height: 42%; }
  .pad-up:active, .pad-up.is-active, .pad-up:focus-visible,
  .pad-down:active, .pad-down.is-active, .pad-down:focus-visible,
  .pad-left:active, .pad-left.is-active, .pad-left:focus-visible,
  .pad-right:active, .pad-right.is-active, .pad-right:focus-visible {
    transform: scale(.95);
  }
}

/* Extra-short phone landscape: protect the pad first, then simplify helper text
   and rail decoration instead of introducing scrolling/cropping. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  .game-shell { grid-template-columns: minmax(0,1fr) clamp(176px, 23vw, 212px); }
  .brand { min-height: 38px; height: 38px; padding-inline: 2px; gap: 2px; }
  .brand-mark { width: 20px; height: 20px; flex-basis: 20px; }
  .icon-control { width: 34px; height: 34px; flex-basis: 34px; border-radius: 8px; }
  .icon-control .ui-icon { width: 18px; height: 18px; }
  body:not([data-game-state="title"]):not([data-game-state="runComplete"]):not([data-game-state="signalLost"]) .hud-panel {
    gap: 3px;
    padding: 4px 5px;
  }
  .hud-mission strong { font-size: .59rem; }
  .hud-mission span { font-size: .52rem; }
  .hud-metric { padding: 3px 4px; }
  .hud-metric span { font-size: .42rem; }
  .hud-metric strong { font-size: .64rem; }
  .hud-repairs { padding-block: 1px; }
  .mobile-control-zone { padding-top: 3px; gap: 2px; }
  .mobile-control-copy span { display: none; }
  .mobile-control-copy strong { font-size: .59rem; }
  .mobile-pad {
    --pad-button: 40px;
    --pad-gap: 2px;
  }
  .pad-button { border-radius: 10px; }
}

@media (orientation: landscape) and (max-height: 390px) and (max-width: 900px) {
  .mobile-control-copy { display: none; }
  .mobile-control-zone { grid-template-rows: minmax(0,1fr); }
  .mobile-pad { --pad-button: 40px; --pad-gap: 2px; }
}

@media (orientation: landscape) and (max-height: 700px) and (max-width: 1100px) {
  body[data-game-state="title"] .start-pill,
  body[data-game-state="runComplete"] .start-pill,
  body[data-game-state="signalLost"] .start-pill {
    min-width: 118px;
    height: 38px;
    min-height: 38px;
  }
}

/* v1.5.3 opening sequence ---------------------------------------------------
   A lightweight DOM/CSS splash runs before the title screen. It uses only
   transforms/opacity for motion so it remains smooth on mobile GPUs. */
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding:
    max(18px,var(--safe-top))
    max(18px,var(--safe-right))
    max(18px,var(--safe-bottom))
    max(18px,var(--safe-left));
  background:
    radial-gradient(circle at 20% 18%, rgba(55,171,132,.25), transparent 34%),
    radial-gradient(circle at 80% 24%, rgba(122,76,180,.28), transparent 35%),
    radial-gradient(circle at 58% 85%, rgba(46,119,190,.22), transparent 38%),
    #100d17;
  color: #f7f1df;
  isolation: isolate;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 360ms ease, transform 420ms cubic-bezier(.2,.8,.2,1), visibility 360ms ease;
}
.boot-splash[hidden] { display: none; }
.boot-splash.is-leaving {
  opacity: 0;
  transform: scale(1.035);
  visibility: hidden;
  pointer-events: none;
}
.boot-splash-aurora {
  position: absolute;
  inset: -28%;
  z-index: -3;
  background:
    conic-gradient(from 20deg,
      transparent 0 10%, rgba(69,224,168,.18) 18%, transparent 28% 38%,
      rgba(151,83,221,.20) 46%, transparent 58% 68%, rgba(62,145,224,.18) 76%,
      transparent 88% 100%);
  animation: bootAurora 10s linear infinite;
  transform-origin: center;
  will-change: transform;
}
.boot-splash-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .28;
  background-image:
    linear-gradient(rgba(185,230,200,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,230,200,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, #000 8%, rgba(0,0,0,.78) 43%, transparent 78%);
  animation: bootGrid 3.8s ease-out both;
}
.boot-splash-content {
  width: min(760px, 92vw);
  display: grid;
  justify-items: center;
  text-align: center;
  transform: translateY(-1vh);
}
.boot-splash-emblem {
  position: relative;
  width: clamp(150px, 24vw, 230px);
  aspect-ratio: 1;
  margin-bottom: clamp(14px, 2.5vh, 24px);
  animation: bootEmblemIn 850ms cubic-bezier(.18,.9,.2,1.15) both;
}
.boot-core {
  position: absolute;
  inset: 30%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #dfffe8, #8fe7bc 42%, #63b9d5 72%, #a778d5);
  clip-path: polygon(50% 0,88% 20%,100% 57%,73% 100%,27% 90%,0 58%,14% 18%);
  filter: drop-shadow(0 0 18px rgba(117,232,183,.42));
  animation: bootCorePulse 1.35s ease-in-out infinite alternate;
}
.boot-core::after {
  content: "";
  width: 38%;
  height: 38%;
  background: #18121f;
  clip-path: polygon(50% 0,100% 30%,84% 88%,23% 100%,0 45%);
}
.boot-core i {
  position: absolute;
  inset: -12%;
  border: 1px solid rgba(207,255,226,.28);
  border-radius: 50%;
  animation: bootHalo 1.8s ease-out infinite;
}
.boot-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(197,241,214,.23);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.boot-orbit::before,
.boot-orbit::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9ce7c0;
  box-shadow: 0 0 13px currentColor;
}
.boot-orbit-a { width: 64%; height: 64%; animation: bootSpin 4s linear infinite; color: #7de7bd; }
.boot-orbit-b { width: 82%; height: 82%; border-color: rgba(166,109,215,.28); animation: bootSpinReverse 5.4s linear infinite; color: #a66dd7; }
.boot-orbit-c { width: 100%; height: 100%; border-color: rgba(83,174,222,.20); animation: bootSpin 7.2s linear infinite; color: #53aede; }
.boot-orbit-a::before { left: 10%; top: 17%; }
.boot-orbit-a::after { right: 2%; bottom: 31%; }
.boot-orbit-b::before { left: 42%; top: -4px; }
.boot-orbit-b::after { right: 11%; bottom: 11%; }
.boot-orbit-c::before { left: -4px; top: 48%; }
.boot-orbit-c::after { right: 16%; top: 9%; }
.boot-node {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f0e6d2;
  box-shadow: 0 0 14px rgba(240,230,210,.65);
  animation: bootNodeBlink 1.4s ease-in-out infinite alternate;
}
.boot-node-1 { left: 4%; top: 23%; animation-delay: .1s; }
.boot-node-2 { right: 8%; top: 42%; background:#a879d9; animation-delay: .35s; }
.boot-node-3 { left: 26%; bottom: 5%; background:#61bde4; animation-delay: .6s; }
.boot-node-4 { right: 25%; bottom: 14%; background:#83e1b5; animation-delay: .85s; }
.boot-kicker {
  margin: 0 0 7px;
  color: #8ee2b5;
  font-size: clamp(.64rem, 1.25vw, .84rem);
  font-weight: 750;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: 0;
  animation: bootTextIn 540ms 360ms ease-out forwards;
}
.boot-splash h1 {
  margin: 0;
  color: #f4ead7;
  font-size: clamp(2.1rem, 7vw, 5.2rem);
  line-height: .98;
  letter-spacing: .065em;
  text-shadow: 0 0 28px rgba(185,230,200,.13);
  opacity: 0;
  transform: translateY(13px) scale(.96);
  animation: bootTitleIn 720ms 470ms cubic-bezier(.2,.85,.25,1) forwards;
}
.boot-tagline {
  margin: 10px 0 0;
  color: #c7bfd2;
  font-size: clamp(.78rem, 1.8vw, 1rem);
  letter-spacing: .08em;
  opacity: 0;
  animation: bootTextIn 520ms 720ms ease-out forwards;
}
.boot-progress {
  width: min(330px, 68vw);
  height: 3px;
  margin-top: clamp(22px, 4vh, 34px);
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
}
.boot-progress i {
  width: 100%;
  height: 100%;
  display: block;
  transform: translateX(-100%);
  border-radius: inherit;
  background: linear-gradient(90deg,#55c894,#6cb9dc,#a86cda,#e3b46d);
  box-shadow: 0 0 12px rgba(99,205,160,.38);
  animation: bootProgress 2.45s 180ms cubic-bezier(.18,.75,.22,1) forwards;
}
.boot-skip {
  margin: 10px 0 0;
  color: rgba(240,230,210,.58);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  animation: bootTextIn 500ms 1.05s ease-out forwards;
}
body.splash-active #app { pointer-events: none; }

@keyframes bootAurora { to { transform: rotate(360deg) scale(1.04); } }
@keyframes bootGrid { from { opacity: 0; transform: scale(1.08); } to { opacity: .28; transform: scale(1); } }
@keyframes bootEmblemIn { from { opacity:0; transform:scale(.58) rotate(-18deg); } to { opacity:1; transform:scale(1) rotate(0); } }
@keyframes bootCorePulse { from { transform: scale(.96); filter: drop-shadow(0 0 14px rgba(117,232,183,.32)); } to { transform: scale(1.04); filter: drop-shadow(0 0 26px rgba(117,232,183,.55)); } }
@keyframes bootHalo { from { opacity:.65; transform:scale(.72); } to { opacity:0; transform:scale(1.5); } }
@keyframes bootSpin { from { transform:translate(-50%,-50%) rotate(0deg); } to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes bootSpinReverse { from { transform:translate(-50%,-50%) rotate(360deg); } to { transform:translate(-50%,-50%) rotate(0deg); } }
@keyframes bootNodeBlink { from { opacity:.42; transform:scale(.75); } to { opacity:1; transform:scale(1.25); } }
@keyframes bootTextIn { to { opacity:1; } }
@keyframes bootTitleIn { to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes bootProgress { to { transform:translateX(0); } }

/* v1.5.3 landscape control field: every unused pixel around the visible pad is
   itself a low-latency directional touch surface. The visual treatment makes
   that behavior discoverable without adding more permanent controls. */
@media (orientation: landscape) and (max-height: 700px) and (max-width: 1100px) {
  .mobile-touch-proxy {
    position: relative;
    cursor: crosshair;
    background:
      linear-gradient(90deg, rgba(92,122,105,.05), transparent 28% 72%, rgba(92,122,105,.05)),
      linear-gradient(0deg, rgba(111,71,125,.06), transparent 28% 72%, rgba(111,71,125,.06)),
      radial-gradient(circle at 50% 50%, rgba(185,230,200,.07), transparent 42%),
      rgba(26,23,31,.42);
  }
  .mobile-touch-proxy::after {
    content: "TOUCH / DRAG ANYWHERE";
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 8px);
    color: rgba(185,230,200,.38);
    font-size: clamp(.42rem, 1.5dvh, .54rem);
    font-weight: 750;
    letter-spacing: .08em;
    text-align: center;
    pointer-events: none;
  }
}

@media (max-width: 560px) and (orientation: portrait) {
  .boot-splash-content { transform: translateY(-4vh); }
  .boot-splash-emblem { width: min(45vw, 190px); }
  .boot-splash h1 { font-size: clamp(2rem, 11vw, 3.35rem); letter-spacing: .045em; }
  .boot-kicker { font-size: .60rem; letter-spacing: .16em; }
  .boot-tagline { font-size: .76rem; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .boot-splash-content {
    width: min(900px, 94vw);
    grid-template-columns: auto minmax(0,1fr);
    grid-template-rows: auto auto auto auto auto;
    column-gap: clamp(22px,5vw,55px);
    text-align: left;
    justify-items: start;
    align-items: center;
    transform: none;
  }
  .boot-splash-emblem {
    grid-column: 1;
    grid-row: 1 / 6;
    width: min(39vh, 190px);
    margin: 0;
  }
  .boot-kicker, .boot-splash h1, .boot-tagline, .boot-progress, .boot-skip { grid-column: 2; }
  .boot-kicker { align-self: end; }
  .boot-splash h1 { font-size: clamp(2.2rem, 8.8vh, 4rem); }
  .boot-progress { width: min(320px, 42vw); margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-splash-aurora,
  .boot-splash-grid,
  .boot-splash-emblem,
  .boot-core,
  .boot-core i,
  .boot-orbit,
  .boot-node,
  .boot-kicker,
  .boot-splash h1,
  .boot-tagline,
  .boot-progress i,
  .boot-skip {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ========================================================================== 
   v1.6.0 Immersion & Audio presentation layer
   All rules below are presentation-only; the logical 960x660 world remains
   proportional and gameplay collision/movement coordinates are unchanged.
   ========================================================================== */

:root {
  --cyan: #77c7f2;
  --violet: #b17be7;
  --amber: #f1bd69;
  --danger: #ef886f;
}

/* Richer, still restrained game chrome. */
.game-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 0%, rgba(76,179,136,.055), transparent 30%),
    radial-gradient(circle at 88% 80%, rgba(139,83,192,.055), transparent 28%);
}
.game-shell > * { position: relative; z-index: 1; }
.icon-control,
.hub-action,
.state-actions button,
.state-primary,
.dialog-actions button {
  transition: transform 110ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.icon-control:active,
.hub-action:active,
.state-actions button:active,
.state-primary:active,
.dialog-actions button:active { transform: scale(.965); }

/* Main Hub shortcuts deliberately sit inside the visual title world rather than
   permanently consuming another page row. */
.hub-dock {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 2.6vh, 26px);
  z-index: 8;
  width: min(670px, calc(100% - 28px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  transform: translateX(-50%);
  padding: 8px;
  border: 1px solid rgba(185,230,200,.14);
  border-radius: 14px;
  background: rgba(18,16,23,.76);
  box-shadow: 0 16px 46px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(12px);
}
.hub-dock[hidden] { display: none; }
.hub-action {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  text-align: left;
  border: 1px solid rgba(185,230,200,.10);
  border-radius: 10px;
  background: rgba(42,37,48,.70);
  color: var(--lavender);
  cursor: pointer;
}
.hub-action:hover,
.hub-action:focus-visible {
  outline: none;
  border-color: rgba(185,230,200,.46);
  background: rgba(51,47,58,.88);
  box-shadow: 0 0 22px rgba(83,183,139,.06);
}
.hub-action .ui-icon { width: 22px; height: 22px; color: var(--mint); }
.hub-action span { min-width: 0; display: grid; gap: 1px; }
.hub-action strong { color: var(--ivory); font-size: .74rem; }
.hub-action small { overflow: hidden; color: #9f98aa; font-size: .60rem; white-space: nowrap; text-overflow: ellipsis; }

/* Dedicated experience states: briefing, pause, restoration and final result. */
.state-screen {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(12px, 2.6vw, 28px);
  background: radial-gradient(circle at 50% 43%, rgba(47,79,64,.22), rgba(12,10,15,.82) 48%, rgba(10,8,13,.92));
  backdrop-filter: blur(3px);
}
.state-screen[hidden] { display: none; }
.state-screen-grid {
  position: absolute;
  inset: -8%;
  opacity: .17;
  background-image:
    linear-gradient(rgba(185,230,200,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,230,200,.12) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: perspective(500px) rotateX(57deg) translateY(32%);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, #000, transparent 72%);
  animation: stateGridDrift 8s linear infinite;
}
.state-card {
  position: relative;
  width: min(560px, 94%);
  max-height: 94%;
  overflow: auto;
  padding: clamp(18px, 4vw, 34px);
  border: 1px solid rgba(185,230,200,.24);
  border-radius: 18px;
  background:
    linear-gradient(140deg, rgba(43,39,49,.96), rgba(26,23,31,.96)),
    rgba(33,29,39,.98);
  box-shadow: 0 24px 70px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.04);
  text-align: center;
  animation: stateCardIn 320ms cubic-bezier(.2,.85,.25,1) both;
}
.state-kicker {
  margin: 0 0 7px;
  color: var(--mint);
  font-size: clamp(.60rem, 1.3vw, .72rem);
  font-weight: 800;
  letter-spacing: .20em;
  text-transform: uppercase;
}
.state-card h2 {
  margin: 0;
  color: var(--ivory);
  font-size: clamp(1.55rem, 4vw, 2.55rem);
  line-height: 1.05;
  letter-spacing: .045em;
}
.state-subtitle {
  margin: 9px auto 0;
  max-width: 46ch;
  color: #b5adbd;
  font-size: clamp(.72rem, 1.8vw, .90rem);
  line-height: 1.42;
}
.briefing-stats,
.result-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}
.briefing-stats > div,
.result-grid > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(185,230,200,.10);
  border-radius: 10px;
  background: rgba(15,14,19,.40);
  text-align: left;
}
.briefing-stats span,
.result-grid span {
  color: #887f91;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.briefing-stats strong,
.result-grid strong { color: var(--ivory); font-size: clamp(.75rem,1.8vw,.92rem); }
#briefingThreat { color: var(--amber); letter-spacing: .12em; }
.state-signal-line {
  height: 3px;
  margin: 20px 0 15px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.06);
}
.state-signal-line i {
  width: 100%; height: 100%; display: block;
  transform: translateX(-100%);
  background: linear-gradient(90deg,var(--mint),var(--cyan),var(--violet),var(--amber));
  animation: stateSignal 1.65s ease-out forwards;
}
.state-primary,
.state-actions button {
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid rgba(185,230,200,.18);
  border-radius: 9px;
  background: rgba(42,37,48,.90);
  color: var(--ivory);
  cursor: pointer;
}
.state-primary {
  border-color: rgba(185,230,200,.52);
  background: linear-gradient(180deg, rgba(61,112,83,.98), rgba(40,76,57,.98));
  box-shadow: 0 8px 26px rgba(47,135,91,.14);
  font-weight: 800;
  letter-spacing: .04em;
}
.state-primary:hover,
.state-primary:focus-visible,
.state-actions button:hover,
.state-actions button:focus-visible { outline: none; border-color: var(--mint); filter: brightness(1.08); }
.state-actions { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pause-screen { background: rgba(10,9,13,.74); }
.pause-card { width: min(480px, 94%); }
.restored-screen { background: radial-gradient(circle at 50% 50%, rgba(76,187,137,.26), rgba(11,10,15,.88) 62%); }
.restored-card { border-color: rgba(185,230,200,.40); }
.result-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.result-grid.compact { grid-template-columns: repeat(3,minmax(0,1fr)); }
.result-grid > div { text-align: center; }
.result-bonus {
  margin: 15px 0 0;
  color: var(--amber);
  font-size: .73rem;
  font-weight: 850;
  letter-spacing: .14em;
}
.restored-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.restored-rings i {
  position: absolute;
  width: 90px; height: 90px;
  border: 2px solid rgba(185,230,200,.32);
  border-radius: 50%;
  opacity: 0;
  animation: restoredRing 2.2s ease-out infinite;
}
.restored-rings i:nth-child(2) { animation-delay: .35s; border-color: rgba(119,199,242,.28); }
.restored-rings i:nth-child(3) { animation-delay: .70s; border-color: rgba(177,123,231,.26); }
.restored-rings i:nth-child(4) { animation-delay: 1.05s; }
.end-screen { background: radial-gradient(circle at 50% 40%, rgba(111,71,125,.20), rgba(10,9,13,.91) 58%); }
body[data-game-state="runComplete"] .end-screen { background: radial-gradient(circle at 50% 40%, rgba(70,173,126,.25), rgba(10,9,13,.90) 60%); }

/* HUD feedback hierarchy. */
.hud-panel { position: relative; }
.hud-panel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  transform-origin: left;
  transform: scaleX(calc(var(--pressure-progress, 0%) / 100%));
  background: linear-gradient(90deg,var(--mint),var(--amber),var(--danger));
  opacity: .52;
  pointer-events: none;
}
.hud-panel[data-pressure-tier="rising"] .hud-metric:nth-child(4) strong { color: var(--amber); }
.hud-panel[data-pressure-tier="high"] .hud-metric:nth-child(4) strong,
.hud-panel[data-pressure-tier="critical"] .hud-metric:nth-child(4) strong { color: #f0a06e; }
.hud-panel[data-pressure-tier="critical"] .hud-metric:nth-child(4) { animation: pressurePulse 1s ease-in-out infinite; }
.hud-metric strong.is-collect,
.hud-metric strong.is-gain,
.hud-metric strong.is-charge { animation: metricPop 300ms cubic-bezier(.2,.8,.2,1); }
.hud-repairs.is-damage { animation: repairHit 360ms ease; }
.status-toast.is-fresh { animation: toastIn 260ms ease both; }
.context-hud.is-channeling { border-color: rgba(119,199,242,.40); box-shadow: 0 0 20px rgba(93,178,216,.10); }
.context-hud.is-channeling .context-progress i { background: linear-gradient(90deg,var(--mint),var(--cyan)); box-shadow: 0 0 10px rgba(119,199,242,.30); }

/* Modern progression and ranking screens inside the existing accessible dialog. */
.network-screen,
.route-cards,
.settings-layout { display: grid; gap: 10px; }
.network-summary {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(185,230,200,.14);
  background: radial-gradient(circle at left, rgba(82,172,129,.13), transparent 45%), rgba(19,17,23,.54);
}
.network-summary > span {
  min-width: 64px;
  color: var(--mint);
  font-size: 1.45rem;
  font-weight: 850;
  text-align: center;
}
.network-summary div { display: grid; gap: 2px; }
.network-summary strong { color: var(--ivory); }
.network-summary small { color: #9f98aa; }
.network-path-list { display: grid; gap: 7px; }
.network-node-card {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) 24px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(185,230,200,.09);
  border-radius: 11px;
  background: rgba(19,17,23,.48);
}
.network-node-card.is-restored { border-color: rgba(185,230,200,.24); background: rgba(53,103,76,.12); }
.network-node-orb { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(177,123,231,.35); border-radius: 50%; }
.network-node-orb i { width: 9px; height: 9px; transform: rotate(45deg); background: #5b5264; border-radius: 2px; }
.is-restored .network-node-orb { border-color: rgba(185,230,200,.50); box-shadow: 0 0 15px rgba(100,206,154,.10); }
.is-restored .network-node-orb i { background: var(--mint); }
.network-node-card > div:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.network-node-card span { color: #81798a; font-size: .54rem; font-weight: 800; letter-spacing: .09em; }
.network-node-card strong { color: var(--ivory); font-size: .82rem; }
.network-node-card small { color: #a49cab; font-size: .67rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.network-node-card > b { color: var(--mint); font-size: 1rem; text-align: center; }
.route-card {
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(185,230,200,.09);
  border-radius: 11px;
  background: rgba(18,16,22,.48);
}
.route-card.is-best { border-color: rgba(241,189,105,.28); background: linear-gradient(90deg,rgba(241,189,105,.07),rgba(18,16,22,.48)); }
.route-rank { color: #81798a; font-size: .67rem; font-weight: 800; }
.route-card div { min-width: 0; display: grid; gap: 2px; }
.route-card strong { color: var(--ivory); }
.route-card small { color: #9e96a7; font-size: .68rem; }
.route-card > b { color: var(--mint); font-size: .93rem; }
.is-best > b { color: var(--amber); }
.empty-state { padding: 28px 14px; text-align: center; border: 1px dashed rgba(185,230,200,.12); border-radius: 12px; }
.empty-state > span { display: block; color: var(--mint); font-size: 2rem; }
.empty-state strong { display: block; margin-top: 5px; color: var(--ivory); }
.empty-state p { margin: 5px auto 0; color: #9e96a7; }

.settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-heading h3 { margin-bottom: 2px; }
.settings-heading p { margin: 0; color: #9d96a6; font-size: .69rem; line-height: 1.4; }
.audio-live-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px rgba(185,230,200,.50); animation: audioDot 1.35s ease-in-out infinite alternate; }
.volume-row {
  display: grid;
  grid-template-columns: 98px minmax(100px,1fr) 42px;
  align-items: center;
  gap: 9px;
  min-height: 34px;
}
.volume-row > span { color: var(--ivory); font-size: .74rem; }
.volume-row input[type="range"] { width: 100%; accent-color: #75c79f; cursor: pointer; }
.volume-row output { color: #a9a1b2; font-size: .67rem; text-align: right; }
.settings-toggle,
.motion-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(185,230,200,.08);
}
.settings-toggle > span,
.motion-row > span { min-width: 0; display: grid; gap: 2px; }
.settings-toggle strong,
.motion-row strong { color: var(--ivory); font-size: .76rem; }
.settings-toggle small,
.motion-row small { color: #9d96a6; font-size: .65rem; }
.settings-toggle input { width: 20px; height: 20px; accent-color: #6cb98f; }
.motion-row select { min-height: 36px; border: 1px solid rgba(185,230,200,.18); border-radius: 8px; background: #19161e; color: var(--ivory); padding: 5px 8px; }
.save-route-panel input { width: 100%; min-height: 44px; margin-top: 7px; padding: 9px 10px; border: 1px solid rgba(185,230,200,.20); border-radius: 8px; background: #17141d; color: var(--ivory); }

/* Boot animation now resolves into an intentional user gesture so browsers can
   unlock Web Audio without fighting autoplay policy. */
.boot-splash.is-ready .boot-skip {
  color: rgba(240,230,210,.88);
  font-weight: 800;
  animation: wakePrompt 1.25s ease-in-out infinite alternate;
}
.boot-splash.is-ready .boot-core { filter: drop-shadow(0 0 30px rgba(117,232,183,.68)); }

@keyframes stateGridDrift { to { background-position: 34px 34px, 34px 34px; } }
@keyframes stateCardIn { from { opacity:0; transform:translateY(12px) scale(.975); } to { opacity:1; transform:none; } }
@keyframes stateSignal { to { transform: translateX(0); } }
@keyframes restoredRing { 0% { opacity:.68; transform:scale(.25); } 100% { opacity:0; transform:scale(7); } }
@keyframes metricPop { 45% { transform:scale(1.16); text-shadow:0 0 12px rgba(185,230,200,.40); } }
@keyframes repairHit { 45% { transform:translateX(-2px); filter:brightness(1.4); } 70% { transform:translateX(2px); } }
@keyframes pressurePulse { 50% { filter:brightness(1.35); } }
@keyframes toastIn { from { opacity:0; transform:translate(-50%,-6px); } to { opacity:1; transform:translate(-50%,0); } }
@keyframes audioDot { to { opacity:.45; transform:scale(.76); } }
@keyframes wakePrompt { to { opacity:.55; } }

@media (max-width: 680px) {
  .hub-dock { width: calc(100% - 18px); gap: 5px; padding: 5px; bottom: 62px; }
  .hub-action { grid-template-columns: 24px minmax(0,1fr); gap: 5px; padding: 6px; }
  .hub-action small { display: none; }
  .hub-action strong { font-size: .65rem; }
  .hub-action .ui-icon { width: 19px; height: 19px; }
  .result-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .volume-row { grid-template-columns: 82px minmax(70px,1fr) 38px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .hub-dock { bottom: 6px; width: min(590px, calc(100% - 18px)); padding: 4px; }
  .hub-action { min-height: 40px; }
  .state-card { width: min(610px, 92%); padding: 12px 18px; }
  .state-card h2 { font-size: clamp(1.25rem, 6vh, 1.9rem); }
  .state-subtitle { margin-top: 5px; font-size: .68rem; }
  .briefing-stats, .result-grid { margin-top: 9px; }
  .briefing-stats > div, .result-grid > div { padding: 6px 8px; }
  .state-signal-line { margin: 10px 0 8px; }
  .state-actions { margin-top: 9px; }
  .state-primary, .state-actions button { min-height: 38px; padding-block: 6px; }
}

/* User override takes precedence over OS motion preference. */
body[data-motion="reduce"] *,
body[data-motion="reduce"] *::before,
body[data-motion="reduce"] *::after {
  animation-duration: .01ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
body[data-motion="full"] .boot-splash-aurora { animation-duration: 10s !important; animation-iteration-count: infinite !important; }

@media (prefers-reduced-motion: reduce) {
  body:not([data-motion="full"]) .state-screen-grid,
  body:not([data-motion="full"]) .restored-rings i,
  body:not([data-motion="full"]) .audio-live-dot,
  body:not([data-motion="full"]) .hud-panel[data-pressure-tier="critical"] .hud-metric:nth-child(4) {
    animation: none !important;
  }
}
/* Compatibility override: percentage width avoids CSS typed-arithmetic division. */
.hud-panel::after { width: var(--pressure-progress, 0%); right: auto; transform: none; }
.audio-mixer { display: grid; gap: 8px; }
.hub-status { display: none; }
@media (pointer: coarse) and (orientation: portrait) and (max-width: 900px) {
  body[data-game-state="title"] .hub-status {
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 7;
    width: min(330px, calc(100% - 28px));
    display: grid;
    justify-items: center;
    gap: 5px;
    transform: translate(-50%,-50%);
    padding: 13px 14px;
    border: 1px solid rgba(185,230,200,.11);
    border-radius: 14px;
    background: radial-gradient(circle at 50% 0%, rgba(92,184,139,.10), transparent 60%), rgba(24,21,28,.56);
    text-align: center;
    backdrop-filter: blur(8px);
  }
  .hub-status[hidden] { display: none !important; }
  .hub-status p { margin:0; color:var(--mint); font-size:.54rem; font-weight:850; letter-spacing:.18em; }
  .hub-status strong { color:var(--ivory); font-size:.88rem; }
  .hub-status > span { color:#9f98aa; font-size:.66rem; line-height:1.35; }
  .hub-sector-dots { display:flex; gap:8px; margin-top:4px; }
  .hub-sector-dots i { width:9px; height:9px; border:1px solid rgba(185,230,200,.20); border-radius:50%; background:#39333e; }
  .hub-sector-dots i.is-restored { background:var(--mint); box-shadow:0 0 10px rgba(185,230,200,.28); }
}
#dialogTitle:focus { outline: none; }
body.dialog-open .orientation-hint,
body.dialog-open .hub-status,
body.dialog-open .hub-dock { opacity: 0; pointer-events: none; }
.dialog-actions {
  position: sticky;
  bottom: -1px;
  z-index: 2;
  padding-top: 10px;
  padding-bottom: 2px;
  background: linear-gradient(to bottom, rgba(33,29,39,0), #211d27 28%);
}

/* ========================================================================== 
   v1.6.1 Responsive state architecture + audio-remaster UI polish
   Presentation-only overrides. Gameplay coordinates and world mechanics remain
   unchanged from v1.6.0.
   ========================================================================== */

/* ---------- State-aware global chrome ---------- */
body:not([data-game-state="title"]) .start-control { display: none !important; }
body:is([data-game-state="intro"],[data-game-state="sectorComplete"],[data-game-state="runComplete"],[data-game-state="signalLost"]) .network-control,
body:is([data-game-state="intro"],[data-game-state="sectorComplete"],[data-game-state="runComplete"],[data-game-state="signalLost"]) .game-toolbar [data-action="help"] { display: none !important; }
body:is([data-game-state="intro"],[data-game-state="paused"],[data-game-state="sectorComplete"],[data-game-state="runComplete"],[data-game-state="signalLost"]) .hud-panel { display: none !important; }
body:is([data-game-state="intro"],[data-game-state="paused"],[data-game-state="sectorComplete"],[data-game-state="runComplete"],[data-game-state="signalLost"]) .context-hud,
body:is([data-game-state="intro"],[data-game-state="paused"],[data-game-state="sectorComplete"],[data-game-state="runComplete"],[data-game-state="signalLost"]) .status-toast { display: none !important; }
body:is([data-game-state="intro"],[data-game-state="paused"],[data-game-state="sectorComplete"],[data-game-state="runComplete"],[data-game-state="signalLost"]) .mobile-control-zone { display: none !important; }

/* Desktop HUD: restore readable game-scale typography without allowing the HUD
   to become the dominant visual element. */
@media (min-width: 901px) and (min-height: 650px) {
  .hud-panel { min-height: 56px; padding: 7px 12px 8px; gap: 16px; }
  .hud-mission strong { font-size: .80rem; }
  .hud-mission span { font-size: .73rem; }
  .hud-metrics { gap: clamp(13px,1.6vw,24px); }
  .hud-metric { min-width: 56px; }
  .hud-metric span { font-size: .64rem; }
  .hud-metric strong { font-size: .94rem; }
  .hud-repairs i { width: 10px; height: 10px; }
}

/* ---------- Main Hub: mobile-first hierarchy ---------- */
.hub-play-primary {
  display: none;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 24px;
  border: 1px solid rgba(206,255,224,.64);
  border-radius: 12px;
  background: linear-gradient(180deg,#4f936d,#2f684d);
  color: #fff9e9;
  box-shadow: 0 10px 28px rgba(33,112,74,.22), inset 0 1px rgba(255,255,255,.12);
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.hub-play-primary .ui-icon { width: 20px; height: 20px; }
.hub-play-primary:active { transform: scale(.975); }

@media (pointer: coarse) and (orientation: portrait) and (max-width: 900px) {
  body[data-game-state="title"] .brand {
    min-height: 50px;
    padding: 4px 7px;
    gap: 7px;
  }
  body[data-game-state="title"] .brand-copy {
    display: block;
    flex: 1 1 auto;
    max-width: min(40vw,155px);
  }
  body[data-game-state="title"] .brand h1 {
    font-size: clamp(.72rem,3.1vw,.90rem);
    letter-spacing: .07em;
    white-space: nowrap;
  }
  body[data-game-state="title"] .start-control,
  body[data-game-state="title"] .network-control { display: none !important; }
  body[data-game-state="title"] .game-toolbar { flex: 0 0 auto; gap: 3px; }
  body[data-game-state="title"] .icon-control { width: 44px; height: 44px; flex-basis: 44px; }

  body[data-game-state="title"] .play-layout {
    display: grid;
    grid-template-rows: minmax(245px, 1fr) auto auto;
    align-content: stretch;
    gap: 9px;
    padding: 8px;
    overflow: hidden;
  }
  body[data-game-state="title"] .canvas-wrap {
    grid-row: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    place-items: center;
  }
  body[data-game-state="title"] #canvasFrame { max-width: 100%; max-height: 100%; }
  body[data-game-state="title"] .hub-status {
    position: static;
    grid-row: 2;
    left: auto;
    top: auto;
    width: 100%;
    max-width: none;
    transform: none;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 5px;
    padding: 11px 13px 12px;
    border: 1px solid rgba(185,230,200,.14);
    border-radius: 14px;
    background: radial-gradient(circle at 50% 0%, rgba(92,184,139,.12), transparent 62%), rgba(24,21,28,.84);
    backdrop-filter: blur(9px);
  }
  body[data-game-state="title"] .hub-status strong { font-size: .91rem; }
  body[data-game-state="title"] .hub-status > span { font-size: .67rem; }
  body[data-game-state="title"] .hub-play-primary { display: inline-flex; width: min(260px,88%); margin-top: 5px; }
  body[data-game-state="title"] .hub-dock {
    position: static;
    grid-row: 3;
    left: auto;
    bottom: auto;
    width: 100%;
    transform: none;
    padding: 5px;
    gap: 5px;
  }
  body[data-game-state="title"] .hub-action { min-height: 54px; padding: 6px 7px; grid-template-columns: 22px minmax(0,1fr); }
  body[data-game-state="title"] .hub-action strong { font-size: .64rem; }
  body[data-game-state="title"] .hub-action small { display: none; }

  /* One-line, temporary orientation hint. It overlays rather than reserving
     permanent layout space and auto-dismisses from Game.js. */
  body[data-game-state="title"] .orientation-hint {
    left: 50%;
    top: 56px;
    bottom: auto;
    width: auto;
    max-width: calc(100% - 18px);
    min-height: 36px;
    grid-template-columns: 22px minmax(0,1fr) 34px;
    gap: 5px;
    padding: 3px 3px 3px 8px;
    border-radius: 10px;
    background: rgba(25,22,30,.94);
    transform: translateX(-50%);
  }
  body[data-game-state="title"] .orientation-hint strong { font-size: .67rem; white-space: nowrap; }
  body[data-game-state="title"] .orientation-hint span { display: none; }
}

@media (max-width: 360px) and (orientation: portrait) {
  body[data-game-state="title"] .brand-copy { max-width: 104px; }
  body[data-game-state="title"] .brand h1 { font-size: .68rem; }
  body[data-game-state="title"] .icon-control { width: 42px; height: 42px; flex-basis: 42px; }
  body[data-game-state="title"] .play-layout { grid-template-rows: minmax(220px,1fr) auto auto; gap: 6px; padding: 6px; }
  body[data-game-state="title"] .hub-status { padding: 9px 10px 10px; }
  body[data-game-state="title"] .hub-play-primary { min-height: 46px; }
}

/* ---------- Dedicated state screens ---------- */
.state-screen {
  padding: clamp(18px,3.2vw,44px);
  background:
    radial-gradient(circle at 50% 35%, rgba(62,128,94,.20), transparent 35%),
    radial-gradient(circle at 12% 90%, rgba(111,71,125,.17), transparent 34%),
    rgba(11,9,14,.93);
  backdrop-filter: blur(5px);
}
.state-card {
  width: min(860px, 82vw);
  max-height: min(88%,760px);
  padding: clamp(26px,4vw,46px);
  border-color: rgba(185,230,200,.25);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(43,39,49,.94), rgba(22,20,27,.94)),
    rgba(33,29,39,.98);
  box-shadow: 0 32px 90px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.04);
}
.briefing-card { width: min(820px,80vw); }
.pause-card { width: min(680px,78vw); }
.restored-card, .end-card { width: min(900px,84vw); }
.state-card h2 { font-size: clamp(2rem,4.2vw,3.3rem); }
.state-kicker { font-size: clamp(.68rem,1.25vw,.82rem); }
.state-subtitle { font-size: clamp(.82rem,1.45vw,1.02rem); }
.briefing-stats, .result-grid { margin-top: 22px; gap: 12px; }
.briefing-stats > div, .result-grid > div { padding: 13px 15px; border-radius: 12px; }
.briefing-stats span, .result-grid span { font-size: .63rem; }
.briefing-stats strong, .result-grid strong { font-size: clamp(.88rem,1.5vw,1.12rem); }
.state-primary, .state-actions button { min-height: 48px; padding: 10px 18px; font-size: .88rem; }
.restored-actions { margin-top: 18px; }
.result-bonus { font-size: .80rem; }

@media (max-width: 680px) {
  .state-screen { padding: 10px; }
  .state-card,
  .briefing-card,
  .pause-card,
  .restored-card,
  .end-card {
    width: min(100%,560px);
    max-height: calc(100% - 4px);
    padding: 20px 16px;
    border-radius: 16px;
  }
  .state-card h2 { font-size: clamp(1.65rem,8vw,2.35rem); }
  .state-subtitle { font-size: .78rem; }
  .briefing-stats, .result-grid { margin-top: 15px; gap: 7px; }
  .briefing-stats > div, .result-grid > div { padding: 9px 10px; }
  .result-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .result-grid.compact { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .state-actions { gap: 7px; }
  .end-card .state-actions .state-primary { flex: 1 0 100%; min-height: 52px; font-size: .95rem; }
}

/* Short landscape state screens own the whole screen. The gameplay HUD/control
   rail is intentionally removed while no movement input is relevant. */
@media (orientation: landscape) and (max-height: 700px) and (max-width: 1100px) {
  body:is([data-game-state="intro"],[data-game-state="paused"],[data-game-state="sectorComplete"],[data-game-state="runComplete"],[data-game-state="signalLost"],[data-game-state="title"]) .game-shell {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0,1fr) !important;
  }
  body:is([data-game-state="intro"],[data-game-state="paused"],[data-game-state="sectorComplete"],[data-game-state="runComplete"],[data-game-state="signalLost"],[data-game-state="title"]) .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    border-left: 0 !important;
    padding-inline: 8px;
  }
  body:is([data-game-state="intro"],[data-game-state="paused"],[data-game-state="sectorComplete"],[data-game-state="runComplete"],[data-game-state="signalLost"],[data-game-state="title"]) .play-layout {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding-right: 0 !important;
  }
  body:is([data-game-state="intro"],[data-game-state="paused"],[data-game-state="sectorComplete"],[data-game-state="runComplete"],[data-game-state="signalLost"]) .brand-copy { display: block; max-width: none; }
  .state-screen { padding: 8px 14px; }
  .state-card,
  .briefing-card,
  .pause-card,
  .restored-card,
  .end-card {
    width: min(900px,90%);
    max-height: calc(100% - 6px);
    padding: 13px 22px;
    border-radius: 16px;
  }
  .state-card h2 { font-size: clamp(1.55rem,6.5vh,2.45rem); }
  .state-subtitle { margin-top: 5px; font-size: clamp(.67rem,2.3vh,.83rem); }
  .briefing-stats, .result-grid { margin-top: 9px; gap: 7px; }
  .briefing-stats > div, .result-grid > div { padding: 7px 9px; }
  .state-signal-line { margin: 9px 0 8px; }
  .state-actions { margin-top: 9px; }
  .state-primary, .state-actions button { min-height: 38px; padding: 6px 14px; }
  .result-bonus { margin-top: 8px; }
}

/* ---------- Full-screen dialog pages ---------- */
.dialog {
  place-items: center;
  padding:
    max(14px,var(--safe-top))
    max(14px,var(--safe-right))
    max(14px,var(--safe-bottom))
    max(14px,var(--safe-left));
  background:
    radial-gradient(circle at 16% 8%, rgba(75,171,129,.10), transparent 30rem),
    radial-gradient(circle at 88% 90%, rgba(120,72,166,.10), transparent 30rem),
    rgba(13,11,17,.985);
  backdrop-filter: none;
}
.dialog-card {
  width: min(920px, calc(100vw - 56px));
  height: min(82dvh,760px);
  max-height: calc(var(--app-height) - 34px);
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  overflow: hidden;
  padding: 0;
  border-radius: 20px;
  background: linear-gradient(150deg,rgba(37,33,44,.98),rgba(24,21,29,.99));
}
.dialog[data-kind="settings"] .dialog-card { width: min(1120px, calc(100vw - 54px)); height: min(88dvh,820px); }
.dialog[data-kind="network"] .dialog-card { width: min(1040px, calc(100vw - 54px)); height: min(84dvh,780px); }
.dialog[data-kind="routes"] .dialog-card { width: min(940px, calc(100vw - 54px)); height: min(80dvh,720px); }
.dialog[data-kind="guide"] .dialog-card { width: min(900px, calc(100vw - 54px)); }
.dialog-header {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(185,230,200,.10);
  background: rgba(25,22,30,.76);
}
.dialog-header h2,
.dialog h2 { margin: 0; font-size: clamp(1.25rem,2.2vw,1.75rem); }
.dialog-close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(185,230,200,.17);
  border-radius: 11px;
  background: rgba(42,37,48,.82);
  color: var(--ivory);
  cursor: pointer;
}
.dialog-close:hover,.dialog-close:focus-visible { outline:none; border-color:var(--mint); background:#302b37; }
.dialog-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px;
  scrollbar-width: thin;
}
.dialog-actions {
  position: static !important;
  margin: 0;
  padding: 12px 18px 14px;
  border-top: 1px solid rgba(185,230,200,.10);
  background: rgba(25,22,30,.92) !important;
}
.dialog-actions button { min-height: 44px; }

/* Progress/ranking screens use the desktop viewport rather than forming a
   narrow modal column. */
.network-screen { height: 100%; grid-template-rows: auto minmax(0,1fr); gap: 14px; }
.network-summary { padding: 16px 18px; }
.network-summary > span { min-width: 90px; font-size: 2rem; }
.network-path-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; align-content: start; }
.network-node-card { min-height: 78px; padding: 12px 14px; }
.network-node-card strong { font-size: .92rem; }
.network-node-card small { font-size: .72rem; }
.route-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; align-content: start; }
.route-card { min-height: 72px; padding: 12px 14px; }
.route-card strong { font-size: .95rem; }
.route-card > b { font-size: 1.06rem; }
.empty-state { min-height: 240px; display:grid; align-content:center; justify-items:center; }

/* Desktop settings: wide two-column composition; mobile keeps a focused single
   column and collapses the keyboard reference by default. */
.settings-layout {
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  align-items: start;
  gap: 14px;
}
.settings-audio { grid-column: 1; grid-row: 1 / span 2; }
.settings-mobile { grid-column: 2; grid-row: 1; }
.settings-desktop { grid-column: 2; grid-row: 2; }
.settings-systems { grid-column: 1 / -1; }
.controls-section { padding: 14px 15px; }
.settings-heading h3 { font-size: 1rem; }
.settings-heading p { font-size: .73rem; }
.volume-row { grid-template-columns: 112px minmax(140px,1fr) 44px; min-height: 42px; }
.volume-row > span { font-size: .79rem; }
.volume-row input[type="range"] { min-height: 28px; }
.settings-toggle,.motion-row { min-height: 50px; }
.settings-toggle strong,.motion-row strong { font-size: .80rem; }
.settings-toggle small,.motion-row small { font-size: .68rem; }
.motion-row { align-items: center; }
.motion-segments { display:grid; grid-template-columns:repeat(3,auto); gap:5px; flex:0 0 auto; }
.motion-segments button {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(185,230,200,.16);
  border-radius: 8px;
  background: #19161e;
  color: #aaa2b2;
  cursor: pointer;
}
.motion-segments button[aria-pressed="true"] { border-color:rgba(185,230,200,.58); background:rgba(61,112,83,.76); color:var(--ivory); }
.settings-desktop { overflow: hidden; }
.settings-desktop summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--mint);
  cursor: pointer;
  list-style: none;
  font-weight: 800;
}
.settings-desktop summary::-webkit-details-marker { display:none; }
.settings-desktop summary small { color:#938b9b; font-size:.65rem; font-weight:500; }
.settings-desktop[open] summary { margin-bottom: 7px; }

@media (max-width: 720px), (pointer: coarse) and (orientation: portrait) {
  .dialog {
    padding: 0;
    background: #121018;
  }
  .dialog-card,
  .dialog[data-kind="settings"] .dialog-card,
  .dialog[data-kind="network"] .dialog-card,
  .dialog[data-kind="routes"] .dialog-card,
  .dialog[data-kind="guide"] .dialog-card {
    width: 100%;
    height: var(--app-height);
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .dialog-header {
    min-height: 54px;
    padding:
      max(7px,var(--safe-top))
      max(10px,var(--safe-right))
      7px
      max(12px,var(--safe-left));
  }
  .dialog-header h2 { font-size: 1.18rem; }
  .dialog-close { width: 42px; height: 42px; flex-basis:42px; }
  .dialog-body { padding: 12px 12px 16px; }
  .dialog-actions {
    padding: 9px max(10px,var(--safe-right)) max(9px,var(--safe-bottom)) max(10px,var(--safe-left));
    gap: 6px;
  }
  .dialog-actions button { flex: 1 1 auto; min-width: 82px; padding-inline: 9px; }

  .network-screen { gap: 10px; }
  .network-summary { grid-template-columns: 66px minmax(0,1fr); padding: 11px; }
  .network-summary > span { min-width: 0; font-size: 1.55rem; }
  .network-path-list,.route-cards { grid-template-columns: 1fr; gap: 7px; }
  .network-node-card { min-height: 64px; padding: 9px 10px; }
  .route-card { min-height: 62px; padding: 9px 10px; }
  .empty-state { min-height: 210px; }

  .settings-layout { display:flex; flex-direction:column; gap:10px; }
  .settings-audio { order:1; width:100%; }
  .settings-mobile { order:2; width:100%; }
  .settings-systems { order:3; width:100%; }
  .settings-desktop { order:4; width:100%; }
  .controls-section { padding: 12px; }
  .volume-row { grid-template-columns: 82px minmax(80px,1fr) 40px; min-height: 40px; }
  .motion-row { display:grid; grid-template-columns:1fr; align-items:stretch; }
  .motion-segments { width:100%; grid-template-columns:repeat(3,1fr); }
  .motion-segments button { min-height:42px; padding-inline:5px; }
  .settings-desktop:not([open]) .control-row { display:none; }
}

/* Dialog overlays are intentionally opaque enough that the underlying title
   canvas cannot appear as a second, fragmented screen. */
body.dialog-open .play-layout,
body.dialog-open .brand,
body.dialog-open .hud-panel { filter: none; }

/* Keep modal page layers viewport-fixed; the generic game-shell child rule must
   never turn them into grid-row content. */
.game-shell > .dialog { position: fixed !important; inset: 0 !important; z-index: 30 !important; }
@media (pointer: coarse) and (orientation: portrait) and (max-width: 900px) {
  body[data-game-state="title"] .canvas-wrap { place-items: start center !important; padding-top: 0 !important; }
}
@media (pointer: coarse) and (orientation: portrait) and (max-width: 900px) {
  body[data-game-state="title"] .play-layout {
    grid-template-rows: clamp(270px,38dvh,350px) minmax(176px,1fr) auto !important;
  }
  body[data-game-state="title"] .canvas-wrap {
    overflow: hidden !important;
    place-items: start center !important;
  }
  body[data-game-state="title"] .hub-status {
    height: 100%;
    align-content: center;
  }
}
@media (min-width: 721px) and (pointer: fine) {
  .settings-audio { grid-column: 1; grid-row: 1 / span 3; }
  .settings-mobile { grid-column: 2; grid-row: 1; }
  .settings-desktop { grid-column: 2; grid-row: 2; }
  .settings-systems { grid-column: 2; grid-row: 3; }
  .settings-layout { align-content: start; }
  .settings-systems p { margin: 5px 0 0; font-size: .72rem; }
}
@media (min-width: 721px) {
  .settings-audio { grid-column: 1; grid-row: 1 / span 3; }
  .settings-mobile { grid-column: 2; grid-row: 1; }
  .settings-desktop { grid-column: 2; grid-row: 2; }
  .settings-systems { grid-column: 2; grid-row: 3; }
}
/* Final polish from visual QA. */
.hub-status { isolation: isolate; overflow: hidden; }
.hub-status::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .38;
  background:
    radial-gradient(circle at 50% 45%, rgba(91,194,145,.14), transparent 34%),
    linear-gradient(rgba(185,230,200,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,230,200,.035) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
}
.end-card .state-primary,
.restored-card .state-primary {
  border-color: rgba(206,255,224,.72) !important;
  background: linear-gradient(180deg,#4d956d,#2f684d) !important;
  color: #fff9e9 !important;
  box-shadow: 0 10px 28px rgba(38,125,82,.22) !important;
}
@media (min-width: 721px) {
  .dialog[data-kind="settings"] .dialog-card { height: min(92dvh,840px); }
}

/* ========================================================================== 
   v1.6.2 Final Hub & Settings refinement
   - Desktop/fine-pointer Hub uses a true responsive composition: hero + status
     rail + dedicated shortcut row. The navigation no longer overlays artwork.
   - Portrait Hub keeps the approved v1.6.1 hierarchy but gives surplus height
     to the hero instead of inflating Wake Status.
   - Mobile Settings relies on the top close affordance and no longer burns
     viewport height on a persistent secondary navigation footer.
   ========================================================================== */

/* Desktop / laptop Hub: use the full horizontal viewport rather than presenting
   the title canvas as a narrow app card. The gameplay canvas remains untouched;
   this layout applies only to the title state. */
@media (min-width: 1101px) {
  body[data-game-state="title"] .play-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.72fr) minmax(270px, .56fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 12px 14px;
    padding: 12px 18px 14px;
    overflow: hidden;
  }

  body[data-game-state="title"] .canvas-wrap {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(185,230,200,.08);
    border-radius: 16px;
    background:
      radial-gradient(circle at 46% 20%, rgba(71,169,126,.06), transparent 36%),
      rgba(17,16,23,.36);
    overflow: hidden;
  }

  body[data-game-state="title"] #canvasFrame {
    max-width: 100%;
    max-height: 100%;
  }

  body[data-game-state="title"] .hub-status {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    align-content: center;
    justify-items: stretch;
    gap: 10px;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: clamp(18px,2vw,28px);
    border: 1px solid rgba(185,230,200,.13);
    border-radius: 16px;
    background:
      radial-gradient(circle at 50% 18%, rgba(93,190,144,.12), transparent 42%),
      linear-gradient(160deg, rgba(35,31,42,.88), rgba(22,20,27,.94));
    box-shadow: inset 0 1px rgba(255,255,255,.025);
    text-align: left;
  }

  body[data-game-state="title"] .hub-status[hidden] { display: none !important; }
  body[data-game-state="title"] .hub-status p {
    margin: 0;
    color: var(--mint);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .18em;
  }
  body[data-game-state="title"] .hub-status strong {
    color: var(--ivory);
    font-size: clamp(1.25rem,1.6vw,1.7rem);
    line-height: 1.18;
  }
  body[data-game-state="title"] .hub-status > span {
    max-width: 34ch;
    color: #aaa2b2;
    font-size: .80rem;
    line-height: 1.48;
  }
  body[data-game-state="title"] .hub-sector-dots {
    display: flex;
    gap: 9px;
    margin-top: 3px;
  }
  body[data-game-state="title"] .hub-sector-dots i {
    width: 10px;
    height: 10px;
    border: 1px solid rgba(185,230,200,.22);
    border-radius: 50%;
    background: #39333e;
  }
  body[data-game-state="title"] .hub-sector-dots i.is-restored {
    background: var(--mint);
    box-shadow: 0 0 12px rgba(185,230,200,.32);
  }
  body[data-game-state="title"] .hub-play-primary { display: none !important; }

  /* Dedicated Hub navigation row. It is deliberately outside the canvas so no
     lattice lines or title artwork can be obscured by menu cards. */
  body[data-game-state="title"] .hub-dock {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    left: auto;
    bottom: auto;
    width: 100%;
    transform: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(18,16,23,.84);
  }
  body[data-game-state="title"] .hub-action {
    min-height: 62px;
    grid-template-columns: 30px minmax(0,1fr);
    gap: 10px;
    padding: 9px 14px;
  }
  body[data-game-state="title"] .hub-action .ui-icon { width: 24px; height: 24px; }
  body[data-game-state="title"] .hub-action strong { font-size: .80rem; }
  body[data-game-state="title"] .hub-action small { display: block; font-size: .65rem; }
}

/* A slightly denser laptop composition prevents the status rail from squeezing
   the hero on 1280-wide screens while preserving the same visual hierarchy. */
@media (min-width: 1101px) and (max-width: 1320px) {
  body[data-game-state="title"] .play-layout {
    grid-template-columns: minmax(0, 1.82fr) minmax(245px, .52fr);
    gap: 10px 12px;
    padding-inline: 12px;
  }
  body[data-game-state="title"] .hub-status { padding: 16px 18px; gap: 8px; }
  body[data-game-state="title"] .hub-status strong { font-size: 1.20rem; }
  body[data-game-state="title"] .hub-status > span { font-size: .74rem; }
}

/* Portrait Hub: preserve the proven v1.6.1 geometry. Only tighten internal
   Wake Status spacing slightly; do not alter the canvas sizing contract that
   was already validated on real phones. */
@media (pointer: coarse) and (orientation: portrait) and (max-width: 900px) {
  body[data-game-state="title"] .play-layout {
    grid-template-rows: clamp(270px,38dvh,350px) minmax(176px,1fr) auto !important;
  }
  body[data-game-state="title"] .hub-status {
    height: clamp(180px,28dvh,250px) !important;
    min-height: 0;
    max-height: 100%;
    align-self: start;
    align-content: center;
    gap: 4px;
    padding: 9px 11px 10px !important;
  }
  body[data-game-state="title"] .hub-sector-dots { margin-top: 2px; }
  body[data-game-state="title"] .hub-play-primary { margin-top: 4px; }
}

@media (max-width: 360px) and (orientation: portrait) {
  body[data-game-state="title"] .hub-status { padding: 8px 9px 9px !important; }
}

/* Mobile Settings: the header X is the primary close/back action. Secondary
   Network/Routes navigation belongs on the Hub, so do not keep an always-on
   footer that hides valuable settings content on small screens. */
@media (max-width: 720px), (pointer: coarse) and (orientation: portrait) {
  .dialog[data-kind="settings"] .dialog-card {
    grid-template-rows: auto minmax(0,1fr) !important;
  }
  .dialog[data-kind="settings"] .dialog-actions {
    display: none !important;
  }
  .dialog[data-kind="settings"] .dialog-body {
    padding-bottom: max(28px, calc(var(--safe-bottom) + 18px));
  }
  .dialog[data-kind="settings"] .settings-layout {
    padding-bottom: 4px;
  }
}

/* Mobile landscape settings should also avoid a persistent footer because the
   short vertical viewport is the most constrained case. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 700px) {
  .dialog[data-kind="settings"] .dialog-card {
    grid-template-rows: auto minmax(0,1fr) !important;
  }
  .dialog[data-kind="settings"] .dialog-actions { display: none !important; }
  .dialog[data-kind="settings"] .dialog-body { padding-bottom: max(20px,var(--safe-bottom)); }
}

/* Small-height portrait phones (e.g. 320x568): keep every Hub action inside
   the usable viewport without shrinking touch targets below practical sizes. */
@media (pointer: coarse) and (orientation: portrait) and (max-height: 620px) {
  body[data-game-state="title"] .play-layout {
    grid-template-rows: 215px 145px auto !important;
    align-content: start;
    gap: 4px !important;
    padding: 4px !important;
  }
  body[data-game-state="title"] .hub-status {
    height: 145px !important;
    padding: 7px 9px 8px !important;
    gap: 2px;
  }
  body[data-game-state="title"] .hub-status p { font-size: .49rem; }
  body[data-game-state="title"] .hub-status strong { font-size: .79rem; }
  body[data-game-state="title"] .hub-status > span { font-size: .60rem; }
  body[data-game-state="title"] .hub-play-primary {
    min-height: 44px;
    width: min(240px,88%);
    padding-block: 7px;
  }
  body[data-game-state="title"] .hub-dock { padding: 4px; gap: 4px; }
  body[data-game-state="title"] .hub-action { min-height: 48px; padding: 5px 6px; }
}