:root {
  color-scheme: dark;
  --ink: #102f2c;
  --ink-deep: #081b1a;
  --petrol: #1d514b;
  --petrol-bright: #2f6b62;
  --cream: #f2e5c7;
  --cream-soft: #d8c9a9;
  --paper: #eadbbc;
  --copper: #ad6c3d;
  --vermilion: #ce4d32;
  --vermilion-bright: #ed6849;
  --gold: #d2a35a;
  --black: #060e0d;
  --line: rgba(242, 229, 199, .2);
  --line-strong: rgba(242, 229, 199, .42);
  --shadow: 0 24px 70px rgba(2, 12, 11, .48);
  --display: "Arial Narrow", "Bahnschrift Condensed", "Aptos Display", Impact, sans-serif;
  --system: "Aptos", "Segoe UI", system-ui, sans-serif;
  --safe-top: max(10px, env(safe-area-inset-top));
  --safe-right: max(10px, env(safe-area-inset-right));
  --safe-bottom: max(10px, env(safe-area-inset-bottom));
  --safe-left: max(10px, env(safe-area-inset-left));
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink-deep);
  color: var(--cream);
  font-family: var(--system);
  touch-action: auto;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 3px;
}

#app,
#game-canvas,
.menu-screen,
.hud,
.modal {
  position: absolute;
  inset: 0;
}

#app {
  min-width: 280px;
  min-height: 0;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-deep);
}

#game-canvas {
  touch-action: none;
  display: block;
  width: 100%;
  height: 100%;
  background: #c59c65;
  opacity: 0;
  transition: opacity .45s ease;
}

#app.playing #game-canvas {
  opacity: 1;
}

#app.playing .menu-screen,
#app.playing .build-stamp {
  display: none;
}

#app.menu .hud {
  display: none;
}

.menu-screen {
  z-index: 2;
  overflow: hidden auto;
  background-color: #cba16d;
  background-image: url("./art/cover.png");
  background-size: cover;
  background-position: center center;
  scrollbar-width: thin;
  scrollbar-color: var(--vermilion) transparent;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.menu-screen::before,
.menu-screen::after,
.menu-wash {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.menu-screen::before {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(242, 229, 199, .97) 0%, rgba(242, 229, 199, .88) 24%, rgba(242, 229, 199, .34) 48%, rgba(8, 27, 26, .08) 70%),
    linear-gradient(0deg, rgba(8, 27, 26, .55), transparent 46%);
}

.menu-screen::after {
  z-index: 1;
  inset: 12px;
  border: 1px solid rgba(16, 47, 44, .28);
  box-shadow: inset 0 0 0 4px rgba(242, 229, 199, .08);
}

.menu-wash {
  z-index: 0;
  opacity: .18;
  background-image: repeating-linear-gradient(0deg, transparent 0 5px, rgba(16, 47, 44, .18) 5px 6px);
  mix-blend-mode: multiply;
}

.menu-layout {
  position: relative;
  z-index: 2;
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(320px, 660px) 1fr;
  grid-template-rows: auto 1fr;
  gap: clamp(14px, 2vh, 24px);
  padding: calc(var(--safe-top) + clamp(20px, 4.5vh, 54px)) calc(var(--safe-right) + clamp(18px, 4vw, 70px)) calc(var(--safe-bottom) + 44px) calc(var(--safe-left) + clamp(18px, 4vw, 70px));
}

.title-lockup {
  position: relative;
  z-index: 1;
  grid-column: 1;
  color: var(--ink);
  align-self: start;
  text-shadow: 0 1px rgba(242, 229, 199, .32);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--vermilion);
  font-family: var(--system);
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 800;
  letter-spacing: .19em;
  line-height: 1.2;
}

.title-lockup h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(70px, 10.5vw, 178px);
  font-stretch: condensed;
  font-weight: 950;
  letter-spacing: -.075em;
  line-height: .74;
  transform: scaleX(.9);
  transform-origin: left center;
}

.subtitle {
  margin: clamp(12px, 2vh, 22px) 0 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(17px, 2vw, 30px);
  font-weight: 900;
  letter-spacing: .22em;
}

.premise {
  max-width: 520px;
  margin: 9px 0 0;
  color: rgba(16, 47, 44, .75);
  font-size: clamp(12px, 1.15vw, 15px);
  font-weight: 650;
  line-height: 1.45;
}

.panel {
  border: 1px solid var(--line-strong);
  background: linear-gradient(145deg, rgba(12, 39, 36, .95), rgba(6, 23, 22, .94));
  box-shadow: var(--shadow);
}

.launch-panel {
  position: relative;
  z-index: 2;
  grid-column: 1;
  align-self: end;
  width: min(100%, 660px);
  padding: clamp(14px, 2vw, 22px);
  border-left: 4px solid var(--vermilion);
}

.section-heading,
.modal-heading,
.boss-tell,
.meter-label,
.mission-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-heading h2,
.modal-heading h2,
.result-heading h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1;
  text-transform: uppercase;
}

.launch-panel .eyebrow {
  margin-bottom: 5px;
}

.section-index {
  flex: none;
  color: var(--cream-soft);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
}

.ship-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.ship-card {
  position: relative;
  min-width: 0;
  min-height: 126px;
  padding: 8px 9px 10px;
  overflow: hidden;
  border: 1px solid rgba(242, 229, 199, .22);
  background: rgba(242, 229, 199, .045);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.ship-card:hover,
.ship-card.selected {
  border-color: var(--cream);
  background: rgba(242, 229, 199, .12);
}

.ship-card:hover {
  transform: translateY(-2px);
}

.ship-card.selected::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--vermilion);
}

.ship-silhouette {
  display: block;
  width: 100%;
  height: 58px;
  color: rgba(242, 229, 199, .32);
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .36));
}

.ship-silhouette .silhouette-fill,
.ship-silhouette circle {
  fill: currentColor;
  stroke: rgba(242, 229, 199, .28);
  stroke-width: 1.5;
}

.ship-silhouette .silhouette-cut {
  fill: var(--ink-deep);
}
.ship-silhouette .duct-well {
  fill: var(--ink-deep);
  stroke: none;
}
.ship-silhouette .fan-spokes {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.ship-silhouette .weapon-line {
  fill: var(--vermilion);
}

.ship-card.selected .ship-silhouette {
  color: var(--cream-soft);
}

.ship-name,
.ship-role,
.ship-mark {
  display: block;
}

.ship-name {
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1;
  text-transform: uppercase;
}

.ship-role {
  margin-top: 5px;
  color: var(--cream-soft);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
}

.ship-mark {
  position: absolute;
  top: 7px;
  right: 8px;
  color: var(--vermilion-bright);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}

.difficulty-fieldset {
  min-width: 0;
  margin: 13px 0 0;
  padding: 0;
  border: 0;
}

.difficulty-fieldset legend {
  float: left;
  width: 112px;
  padding: 13px 10px 0 0;
  color: var(--cream-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.difficulty-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 44px;
  border: 1px solid rgba(242, 229, 199, .22);
}

.difficulty-switch button {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid rgba(242, 229, 199, .16);
  background: transparent;
  color: var(--cream-soft);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.difficulty-switch button:last-child {
  border-right: 0;
}

.difficulty-switch button:hover,
.difficulty-switch button.selected {
  background: var(--cream);
  color: var(--ink);
}

.launch-actions {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.primary,
.secondary,
.text-button,
.icon-button {
  min-height: 44px;
  border-radius: 0;
  font-weight: 850;
  cursor: pointer;
}

.primary,
.secondary {
  padding: 11px 14px;
  border: 1px solid transparent;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.primary {
  background: var(--vermilion);
  color: #fff7e7;
  box-shadow: inset 0 -3px rgba(84, 24, 16, .32);
}

.primary:hover {
  background: var(--vermilion-bright);
}

.secondary {
  border-color: rgba(242, 229, 199, .28);
  background: rgba(242, 229, 199, .06);
  color: var(--cream);
}

.secondary:hover {
  border-color: var(--cream);
  background: rgba(242, 229, 199, .13);
}

.start-button {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.start-button span {
  font-size: 18px;
}

.start-button small {
  max-width: 120px;
  font-family: var(--system);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.25;
  text-align: right;
}

.menu-utility {
  position: fixed;
  z-index: 4;
  top: calc(var(--safe-top) + 20px);
  right: calc(var(--safe-right) + clamp(18px, 4vw, 70px));
  display: flex;
  gap: 2px;
}

.menu-utility button {
  min-height: 44px;
  padding: 0 13px;
  border: 0;
  border-bottom: 2px solid rgba(16, 47, 44, .28);
  background: rgba(242, 229, 199, .66);
  color: var(--ink);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.menu-utility button:hover {
  border-bottom-color: var(--vermilion);
  background: var(--cream);
}

.build-stamp {
  position: fixed;
  z-index: 3;
  right: calc(var(--safe-right) + 28px);
  bottom: calc(var(--safe-bottom) + 22px);
  margin: 0;
  color: rgba(242, 229, 199, .78);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  writing-mode: vertical-rl;
}

.menu-note {
  position: fixed;
  z-index: 5;
  right: calc(var(--safe-right) + 24px);
  bottom: calc(var(--safe-bottom) + 24px);
  max-width: min(360px, calc(100vw - 32px));
  margin: 0;
  padding: 10px 13px;
  border-left: 3px solid var(--vermilion);
  background: rgba(7, 25, 23, .9);
  color: var(--cream);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 10px 30px rgba(4, 16, 15, .3);
}

/* In-run heads-up display */
.hud {
  touch-action: none;
  z-index: 3;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.hud button,
.joystick-zone {
  pointer-events: auto;
}

.hud-top {
  position: absolute;
  top: var(--safe-top);
  left: var(--safe-left);
  right: var(--safe-right);
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(260px, 410px) minmax(130px, 170px) auto;
  gap: 7px;
  align-items: start;
}

.hud-card {
  min-height: 82px;
  padding: 10px 12px;
  border-top: 2px solid var(--cream-soft);
  background: linear-gradient(135deg, rgba(7, 25, 23, .93), rgba(13, 49, 45, .82));
  box-shadow: 0 10px 28px rgba(4, 16, 15, .25);
  backdrop-filter: blur(8px);
}

.meter-label,
.mission-line {
  color: var(--cream-soft);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
}

.meter-label b,
.mission-line b {
  color: var(--cream);
}

.convoy-label {
  margin-top: 8px;
}

.meter {
  position: relative;
  height: 7px;
  margin-top: 4px;
  overflow: hidden;
  background: rgba(2, 12, 11, .74);
  box-shadow: inset 0 0 0 1px rgba(242, 229, 199, .12);
}

.meter > i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--vermilion-bright);
  transform-origin: left center;
  transition: width .15s linear;
}

.convoy-meter > i {
  background: var(--cream-soft);
}

.route-meter {
  height: 5px;
  margin-top: 7px;
}

.route-meter > i {
  width: 0;
  background: var(--gold);
}

.mission-card p {
  min-height: 26px;
  margin: 8px 0 0;
  overflow: hidden;
  color: var(--cream);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 850;
  letter-spacing: .025em;
  line-height: 1.05;
  text-transform: uppercase;
}

.route-line {
  margin-top: 5px;
  color: rgba(242, 229, 199, .62);
  font-size: 7px;
}

.run-card dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0;
}

.run-card dl div {
  min-width: 0;
}

.run-card dt {
  color: var(--cream-soft);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}

.run-card dd {
  margin: 4px 0 0;
  color: var(--cream);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.hud-tools {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  gap: 5px;
}

.hud-tools button,
.icon-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(242, 229, 199, .28);
  background: rgba(7, 25, 23, .88);
  color: var(--cream);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.hud-tools button:hover,
.icon-button:hover {
  border-color: var(--cream);
  background: var(--petrol);
}

.boss-bar {
  position: absolute;
  top: calc(var(--safe-top) + 97px);
  left: 50%;
  width: min(560px, calc(100% - var(--safe-left) - var(--safe-right) - 24px));
  padding: 8px 12px 10px;
  transform: translateX(-50%);
  border-top: 2px solid var(--vermilion-bright);
  background: rgba(7, 25, 23, .91);
  box-shadow: 0 10px 28px rgba(4, 16, 15, .3);
  backdrop-filter: blur(8px);
}

.boss-tell span,
.boss-tell em {
  color: var(--vermilion-bright);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .14em;
}

.boss-tell b {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .06em;
}

.boss-meter {
  height: 8px;
  margin-top: 6px;
}

.boss-meter > i {
  background: linear-gradient(90deg, var(--vermilion), var(--gold));
}

/* Keep landscape guardians and their telegraphs in the playable field. The
   bottom middle is the only lane not occupied by edge controls. */
@media (min-width: 701px) {
  .boss-bar {
    top: auto;
    bottom: calc(var(--safe-bottom) + 10px);
    width: min(560px, calc(100% - var(--safe-left) - var(--safe-right) - 466px));
  }
}

.message-stack {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 136px);
  display: grid;
  justify-items: center;
  gap: 5px;
  width: min(520px, 82vw);
  transform: translateX(-50%);
  text-align: center;
}

.warning,
.status-message {
  width: fit-content;
  margin: 0;
  padding: 8px 14px;
  border-left: 3px solid var(--vermilion-bright);
  background: rgba(7, 25, 23, .9);
  color: var(--cream);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(4, 16, 15, .26);
}

.warning {
  background: var(--vermilion);
  color: #fff8e8;
}

.touch-controls {
  position: absolute;
  left: var(--safe-left);
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.joystick-zone {
  position: relative;
  width: clamp(118px, 16vw, 152px);
  height: clamp(118px, 16vw, 152px);
  border: 1px solid rgba(242, 229, 199, .22);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 81, 75, .45) 0 37%, rgba(7, 25, 23, .69) 38% 100%);
  box-shadow: inset 0 0 0 7px rgba(242, 229, 199, .04), 0 12px 32px rgba(4, 16, 15, .26);
  backdrop-filter: blur(4px);
}

.joystick-cross,
.joystick-cross::after {
  position: absolute;
  top: 50%;
  left: 18%;
  width: 64%;
  height: 1px;
  content: "";
  background: rgba(242, 229, 199, .16);
}

.joystick-cross::after {
  top: 0;
  left: 0;
  width: 100%;
  transform: rotate(90deg);
}

.joystick-thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(242, 229, 199, .58);
  border-radius: 50%;
  background: rgba(16, 47, 44, .92);
  box-shadow: 0 6px 18px rgba(4, 16, 15, .44);
}

.joystick-zone.active {
  border-color: var(--cream-soft);
  background: radial-gradient(circle, rgba(47, 107, 98, .62) 0 37%, rgba(7, 25, 23, .76) 38% 100%);
}

.joystick-zone small {
  position: absolute;
  bottom: -1px;
  left: 50%;
  padding: 2px 7px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--cream-soft);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .15em;
}

.ability-cluster {
  display: flex;
  gap: 8px;
  align-items: end;
}

.ability-button {
  position: relative;
  width: clamp(104px, 12vw, 132px);
  min-height: 76px;
  padding: 9px 9px 8px;
  overflow: hidden;
  border: 1px solid rgba(242, 229, 199, .34);
  border-top: 3px solid var(--gold);
  background: linear-gradient(145deg, rgba(7, 25, 23, .92), rgba(18, 65, 59, .88));
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(4, 16, 15, .3);
  backdrop-filter: blur(6px);
}

.pulse-button {
  border-top-color: var(--vermilion-bright);
}

.ability-button b,
.ability-button small,
.ability-key {
  position: relative;
  z-index: 2;
  display: block;
}

.ability-button b {
  margin-top: 5px;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .05em;
  line-height: 1;
}

.ability-button small,
.ability-key {
  color: var(--cream-soft);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .12em;
}

.ability-key {
  color: var(--gold);
}

.pulse-button .ability-key {
  color: var(--vermilion-bright);
}

.cooldown {
  position: absolute;
  z-index: 3;
  inset: 6px 6px auto auto;
  display: none;
  place-items: center;
  min-width: 30px;
  padding: 2px 4px;
  background: rgba(6, 20, 19, .96);
  color: var(--cream);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.ability-button.cooling .cooldown {
  display: grid;
}

.ability-button:disabled {
  cursor: default;
  filter: saturate(.55);
}

/* Modal system */
.modal {
  z-index: 20;
  display: grid;
  place-items: center;
  padding: calc(var(--safe-top) + 12px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 12px);
  pointer-events: auto;
}

.modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 14, 13, .76);
  backdrop-filter: blur(12px) saturate(.72);
}

.modal-frame {
  position: relative;
  width: min(940px, 100%);
  min-width: 0;
  min-height: 0;
  max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 24px);
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);
  overflow: hidden auto;
  border-top: 4px solid var(--vermilion);
  overscroll-behavior: contain;
  touch-action: pan-y;
  user-select: text;
  scrollbar-width: thin;
  scrollbar-color: var(--vermilion) rgba(242, 229, 199, .06);
}

.modal-page {
  padding: clamp(20px, 4vw, 42px);
}

.modal-heading {
  align-items: start;
}

.modal-heading .eyebrow,
.result-heading .eyebrow {
  margin-bottom: 7px;
}

.modal-lede {
  max-width: 660px;
  margin: 15px 0 22px;
  color: var(--cream-soft);
  font-size: 14px;
  line-height: 1.5;
}

.manual-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.manual-grid section {
  min-height: 145px;
  padding: 18px;
  border: 1px solid var(--line);
  background: rgba(242, 229, 199, .045);
}

.manual-grid h3,
.upgrade-card h3 {
  margin: 12px 0 5px;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.manual-grid p,
.upgrade-card p {
  margin: 0;
  color: var(--cream-soft);
  font-size: 12px;
  line-height: 1.5;
}

.manual-key,
.upgrade-type {
  display: inline-block;
  color: var(--vermilion-bright);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.modal-actions,
.stack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.stack-actions {
  display: grid;
  grid-template-columns: minmax(0, 420px);
}

.text-button {
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(242, 229, 199, .24);
  background: transparent;
  color: var(--cream-soft);
  text-align: left;
}

.text-button:hover {
  color: var(--cream);
  border-color: var(--cream);
}

.danger-text {
  color: #ef8a72;
}

.danger-button {
  background: #9c3022;
}

.upgrade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.upgrade-card {
  position: relative;
  min-height: 270px;
  padding: 22px 18px 48px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(160deg, rgba(242, 229, 199, .12), transparent 45%),
    rgba(12, 45, 41, .52);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
}

.upgrade-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 42%;
  background: var(--vermilion);
}

.upgrade-card:hover {
  border-color: var(--cream);
  background-color: rgba(36, 94, 85, .58);
  transform: translateY(-3px);
}

.upgrade-card small {
  position: absolute;
  right: 16px;
  bottom: 15px;
  color: var(--cream);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.stop-repairs {
  display: grid;
  grid-template-columns: minmax(190px, 1.25fr) repeat(2, minmax(180px, 1fr));
  gap: 8px;
  align-items: stretch;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.stop-repairs > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 66px;
  padding: 8px 10px 8px 2px;
}

.stop-repairs .eyebrow {
  margin-bottom: 5px;
}

.stop-repairs h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
}

.stop-repairs button {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(242, 229, 199, .055);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
}

.stop-repairs button:hover {
  border-color: var(--cream);
  background: rgba(242, 229, 199, .12);
}

.stop-repairs button span,
.stop-repairs button b,
.stop-repairs button small {
  display: block;
}

.stop-repairs button b {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.stop-repairs button small {
  margin-top: 4px;
  color: var(--cream-soft);
  font-size: 9px;
}

.stop-repairs button strong {
  flex: none;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.stop-repairs button:disabled {
  cursor: default;
  opacity: .42;
}

.result-heading {
  text-align: center;
}

.result-heading .modal-lede {
  margin-right: auto;
  margin-left: auto;
}

.rank-block {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  margin: 0 auto 18px;
  padding: 14px;
  border: 1px solid var(--cream-soft);
  border-radius: 50%;
  background: rgba(242, 229, 199, .04);
}

.rank-block span,
.rank-block em {
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .12em;
}

.rank-block b {
  color: var(--vermilion-bright);
  font-family: var(--display);
  font-size: 64px;
  line-height: .7;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
}

.stats-grid div {
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
}

.stats-grid dt {
  color: var(--cream-soft);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stats-grid dd {
  margin: 7px 0 0;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 900;
}

.stats-grid .wide-stat {
  grid-column: 1 / -1;
}

.stats-grid .wide-stat dd {
  font-size: 17px;
}

.settings-list {
  display: grid;
  gap: 2px;
  margin-top: 20px;
}

.settings-list label {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(120px, 260px);
  align-items: center;
  gap: 18px;
  min-height: 62px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: rgba(242, 229, 199, .035);
}

.settings-list label span,
.settings-list label b,
.settings-list label small {
  display: block;
}

.settings-list label b {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.settings-list label small {
  margin-top: 3px;
  color: var(--cream-soft);
  font-size: 10px;
}

.settings-list input[type="checkbox"] {
  justify-self: end;
  width: 44px;
  height: 24px;
  accent-color: var(--vermilion);
  cursor: pointer;
}

.settings-list input[type="range"] {
  width: 100%;
  min-height: 44px;
  accent-color: var(--vermilion);
  cursor: pointer;
}

.records-list {
  min-height: 160px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
}

.record-row {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.record-row:last-child {
  border-bottom: 0;
}

.record-row span,
.record-row b,
.record-row small,
.record-row strong {
  display: block;
}

.record-row b {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.record-row small {
  margin-top: 3px;
  color: var(--cream-soft);
  font-size: 9px;
  font-weight: 650;
}

.record-row strong {
  flex: none;
  color: var(--vermilion-bright);
  font-family: var(--display);
  font-size: 24px;
  text-align: right;
}

.record-row strong small {
  color: var(--cream-soft);
  font-family: var(--system);
}

.empty-state {
  margin: 0;
  color: var(--cream-soft);
}

@media (max-width: 700px) {
  .menu-screen {
    background-position: 66% center;
  }

  .menu-screen::before {
    background:
      linear-gradient(180deg, rgba(242, 229, 199, .95) 0%, rgba(242, 229, 199, .75) 38%, rgba(8, 27, 26, .2) 63%, rgba(8, 27, 26, .58) 100%),
      linear-gradient(90deg, rgba(242, 229, 199, .45), transparent 84%);
  }

  .menu-layout {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: 14px;
    padding-top: calc(var(--safe-top) + 24px);
    padding-right: calc(var(--safe-right) + 14px);
    padding-bottom: calc(var(--safe-bottom) + 14px);
    padding-left: calc(var(--safe-left) + 14px);
  }

  .title-lockup h1 {
    width: 100%;
    font-size: clamp(52px, 15.5vw, 72px);
    transform: none;
    white-space: nowrap;
  }

  .subtitle {
    font-size: 16px;
  }

  .premise {
    max-width: 94%;
    font-size: 11px;
  }

  .launch-panel {
    width: 100%;
    margin-top: auto;
  }

  .section-heading h2 {
    font-size: 24px;
  }

  .ship-card {
    min-height: 111px;
    padding: 7px 6px 8px;
  }

  .ship-silhouette {
    height: 48px;
  }

  .ship-name {
    font-size: 16px;
  }

  .ship-role {
    min-height: 24px;
    font-size: 8px;
  }

  .ship-mark {
    font-size: 7px;
  }

  .difficulty-fieldset legend {
    float: none;
    width: auto;
    padding: 0 0 5px;
  }

  .launch-actions {
    grid-template-columns: 1fr 1fr;
  }

  .start-button {
    grid-column: 1 / -1;
  }

  .menu-utility {
    position: relative;
    inset: auto;
    width: 100%;
    flex: none;
    justify-content: stretch;
  }

  .menu-utility button {
    flex: 1;
    background: rgba(7, 25, 23, .9);
    color: var(--cream);
  }

  .build-stamp {
    display: none;
  }

  .menu-note {
    right: calc(var(--safe-right) + 8px);
    bottom: calc(var(--safe-bottom) + 8px);
    left: calc(var(--safe-left) + 8px);
    max-width: none;
  }

  .hud-top {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.12fr) 44px;
    gap: 5px;
  }

  .hud-card {
    min-height: 105px;
    padding: 8px;
  }

  .run-card {
    position: absolute;
    top: 111px;
    right: 49px;
    min-height: 48px;
    width: 132px;
    padding: 7px 9px;
  }

  .run-card dd {
    font-size: 18px;
  }

  .hud-tools {
    grid-template-columns: 44px;
  }

  .mission-card p {
    min-height: 34px;
    font-size: 13px;
  }

  .boss-bar {
    top: calc(var(--safe-top) + 164px);
  }

  .joystick-zone {
    width: 120px;
    height: 120px;
  }

  .ability-cluster {
    flex-direction: column-reverse;
    gap: 6px;
  }

  .ability-button {
    width: 104px;
    min-height: 64px;
  }

  .ability-button b {
    font-size: 17px;
  }

  .message-stack {
    bottom: calc(var(--safe-bottom) + 142px);
  }

  .manual-grid,
  .upgrade-grid {
    grid-template-columns: 1fr;
  }

  .stop-repairs {
    grid-template-columns: 1fr;
  }

  .upgrade-card {
    min-height: 150px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .settings-list label {
    grid-template-columns: minmax(120px, 1fr) minmax(90px, 42%);
  }
}

@media (min-width: 701px) and (max-height: 560px) {
  .menu-screen {
    background-position: center center;
  }

  .menu-screen::before {
    background: linear-gradient(90deg, rgba(242, 229, 199, .96) 0%, rgba(242, 229, 199, .78) 38%, rgba(8, 27, 26, .28) 100%);
  }

  .menu-layout {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.45fr);
    grid-template-rows: 1fr;
    align-items: center;
    gap: 16px;
    padding: calc(var(--safe-top) + 12px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 12px);
  }

  .title-lockup {
    grid-column: 1;
  }

  .title-lockup h1 {
    font-size: clamp(32px, 4.6vw, 48px);
    white-space: nowrap;
  }

  .title-lockup .subtitle {
    font-size: 14px;
  }

  .premise {
    font-size: 10px;
  }

  .launch-panel {
    grid-column: 2;
    align-self: center;
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px);
    overflow-y: auto;
    padding: 12px;
  }

  .section-heading h2 {
    font-size: 21px;
  }

  .ship-grid {
    margin-top: 8px;
  }

  .ship-card {
    min-height: 96px;
    padding: 5px 7px;
  }

  .ship-silhouette {
    height: 42px;
  }

  .ship-name {
    font-size: 16px;
  }

  .ship-role {
    margin-top: 3px;
    font-size: 8px;
  }

  .difficulty-fieldset {
    margin-top: 8px;
  }

  .difficulty-fieldset legend {
    padding-top: 11px;
  }

  .launch-actions {
    margin-top: 8px;
  }

  .start-button {
    min-height: 46px;
  }

  .build-stamp {
    display: none;
  }

  .menu-utility {
    top: auto;
    right: auto;
    bottom: var(--safe-bottom);
    left: var(--safe-left);
    width: min(286px, 35vw);
  }

  .menu-utility button {
    flex: 1;
    padding: 0 6px;
    background: rgba(242, 229, 199, .82);
  }

  .hud-top {
    grid-template-columns: 205px minmax(260px, 1fr) 120px auto;
  }

  .hud-card {
    min-height: 70px;
    padding: 7px 9px;
  }

  .convoy-label {
    margin-top: 5px;
  }

  .mission-card p {
    min-height: 20px;
    margin-top: 5px;
    font-size: 13px;
  }

  .run-card dd {
    font-size: 19px;
  }

  .boss-bar {
    top: auto;
    bottom: calc(var(--safe-bottom) + 10px);
  }

  .joystick-zone {
    width: 106px;
    height: 106px;
  }

  .ability-button {
    width: 102px;
    min-height: 64px;
  }

  .message-stack {
    bottom: calc(var(--safe-bottom) + 112px);
  }

  .modal-page {
    padding: 18px 22px;
  }

  .manual-grid section {
    min-height: 115px;
    padding: 13px;
  }

  .upgrade-card {
    min-height: 185px;
  }

  .stop-repairs {
    grid-template-columns: minmax(160px, 1fr) repeat(2, minmax(150px, 1fr));
  }

  .stop-repairs > div,
  .stop-repairs button {
    min-height: 56px;
  }
}

@media (max-width: 370px) {
  .menu-layout {
    gap: 9px;
    padding-right: calc(var(--safe-right) + 9px);
    padding-left: calc(var(--safe-left) + 9px);
  }

  .launch-panel {
    padding: 9px;
  }

  .section-heading h2 {
    font-size: 21px;
  }

  .ship-grid {
    margin-top: 8px;
    gap: 5px;
  }

  .ship-card {
    min-height: 90px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .ship-silhouette {
    height: 35px;
  }

  .ship-name {
    font-size: 14px;
  }

  .ship-role {
    min-height: 19px;
    font-size: 7px;
  }

  .difficulty-fieldset {
    margin-top: 8px;
  }

  .launch-actions {
    gap: 6px;
    margin-top: 8px;
  }

  .launch-actions .secondary {
    font-size: 12px;
    white-space: nowrap;
  }

  .hud-card {
    padding-right: 6px;
    padding-left: 6px;
  }

  .mission-card p {
    font-size: 12px;
  }

  .ability-button {
    width: 94px;
  }

  .joystick-zone {
    width: 108px;
    height: 108px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .ship-card:hover,
  .upgrade-card:hover {
    transform: none;
  }
}

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

/* Director's Cut: retain the paper-and-copper interface with more world visible. */
.hud-top{grid-template-columns:minmax(190px,240px) minmax(240px,1fr) 124px 188px;gap:8px;align-items:start}
.hud-tools{display:grid;grid-template-columns:repeat(4,44px);gap:4px}
.hud-tools button{width:44px;height:44px;min-width:44px;min-height:44px;font-size:10px}
.hud-tools button[aria-pressed="true"]#camera-button{color:#a4eee0;border-color:#73b7a5;background:#264b43}
.modal-open #threat-indicators{visibility:hidden}
#threat-indicators{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.threat-indicator{position:absolute;display:flex;align-items:center;gap:3px;transform:translate(-50%,-50%);color:#ffe2b5;text-shadow:0 1px 3px #172d28;font:700 9px/1 monospace;filter:drop-shadow(0 1px 2px #152b26)}
.threat-indicator i{display:inline-block;font:normal 18px/1 sans-serif;color:#f39169}
.threat-indicator[data-kind="boss"]{color:#fff0c8}.threat-indicator[data-kind="boss"] i{color:#ffbe79}
.threat-indicator[data-kind="convoy"]{color:#98f3d9}.threat-indicator[data-kind="convoy"] i{color:#98f3d9}
.message-stack{max-width:520px;pointer-events:none}.status-message,.warning{font-size:11px;letter-spacing:.03em;padding:8px 12px}
.route-map{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;margin:24px 0}
.route-map li{display:grid;gap:7px;border:1px solid #697c65;padding:14px 12px;min-height:94px;background:#182d24;color:#c6c6a8}
.route-map li span,.route-map li small{font:10px/1.3 monospace;letter-spacing:.06em}.route-map li b{font-size:15px;color:#f0dfba}
.route-map .current{border-color:#98e2c5;box-shadow:inset 3px 0 #98e2c5;background:#294f3e}.route-map .complete{opacity:.62}.route-map .future{border-style:dashed}
.loadout-readout{border-top:1px solid #697c65;padding-top:12px}.loadout-readout h3{text-transform:uppercase;letter-spacing:.04em}.loadout-readout p{font-size:13px;color:#c6c6a8}
.build-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.build-tags span{font-size:11px;border:1px solid #697c65;padding:6px 9px}
#showroom-canvas{display:block;width:100%;height:clamp(220px,42vh,390px);border:1px solid #52695e;border-radius:4px;touch-action:pan-y;cursor:grab}#showroom-canvas:active{cursor:grabbing}
.showroom-hint{font:10px/1.4 monospace;letter-spacing:.12em;color:#c7c6a9;text-align:center}.showroom-stats{display:flex;gap:24px;font:10px/1.5 monospace}.showroom-stats b{display:block;font-size:22px;color:#b4e6ce}
@media(max-width:700px){
 .hud-top{grid-template-columns:minmax(0,1fr) minmax(0,1.13fr);gap:5px}
 .vital-card,.mission-card{min-height:78px;padding:7px 8px}.vital-card{grid-column:1}.mission-card{grid-column:2}
 .meter-label{font-size:8px;line-height:1.4}.meter-label b{font-size:9px}.convoy-label{margin-top:6px}.mission-line{font-size:8px}.mission-card p{font-size:12px;line-height:1.2;margin:5px 0}.route-line{margin-top:4px;font-size:7px}
 .run-card{position:static;top:auto;right:auto;grid-column:1;grid-row:2;min-height:44px;width:116px;padding:5px 8px}.run-card dl{gap:12px}.run-card dt{font-size:7px}.run-card dd{font-size:17px}
 .hud-tools{grid-column:2;grid-row:2;justify-self:end;grid-template-columns:repeat(4,44px);gap:3px}
 .boss-bar{top:148px;bottom:auto;width:min(300px,80vw);padding:6px 9px}.boss-tell{font-size:8px}.boss-tell b{font-size:11px}
 .message-stack{bottom:calc(var(--safe-bottom) + 151px);max-width:calc(100% - 28px)}.status-message,.warning{font-size:9px;padding:6px 8px}
 .menu-utility{flex-wrap:wrap;gap:4px}.menu-utility button{font-size:10px;min-height:36px;padding:6px 10px}
 .route-map{gap:5px;margin:15px 0}.route-map li{padding:9px 6px;min-height:88px}.route-map li b{font-size:12px}.route-map li span,.route-map li small{font-size:8px}
 .showroom-stats{gap:18px}.showroom-page .modal-lede{font-size:13px}
}
@media(max-height:550px) and (min-width:701px){
 .hud-top{grid-template-columns:170px minmax(180px,1fr) 80px 188px;gap:5px}.hud-card{min-height:66px;padding:7px}.meter-label{font-size:8px}.mission-card p{font-size:12px;margin:3px 0}.run-card dd{font-size:18px}
 .boss-bar{top:auto;bottom:12px;max-width:300px;padding:5px 10px}.message-stack{bottom:45px;max-width:380px}.status-message,.warning{font-size:9px;padding:5px 9px}
 #showroom-canvas{height:200px}
}

#boss-secondary { margin-top: 7px; padding-top: 7px; border-top: 1px solid #54756f; }
#boss-secondary .boss-meter i { background: var(--teal-bright, #76d5c3); }
.boss-tell b { min-width: 0; }
@media(max-width:700px) { .boss-bar[data-count="2"] { width: min(340px, 92vw); } #boss-secondary { margin-top: 4px; padding-top: 4px; } }
@media(max-height:550px) and (min-width:701px) { .boss-bar[data-count="2"] .boss-tell b { font-size:13px; } }

/* Menus keep their own native scrolling surface on narrow Android viewports.
   Game gestures stay isolated on the canvas and HUD. */
@supports (height: 100dvh) {
 html { height: 100dvh; }
}
.modal-heading > div, .section-heading > div,
.settings-list label > span, .stop-repairs > *, .stats-grid > *,
.route-map > *, .manual-grid > *, .upgrade-grid > * { min-width: 0; }
.modal-page h2, .modal-page h3, .modal-page p, .route-map b,
.record-row b, .stats-grid dd { overflow-wrap: anywhere; }
.modal-heading h2 { line-height: 1.1; }
.modal-actions > button { flex: 1 1 140px; }
.settings-list input { min-width: 0; }
.weapon-status { max-width: 100%; margin: 0; padding: 7px 11px; border-left: 3px solid var(--gold); background: rgba(7, 25, 23, .94); color: var(--cream); font-size: 11px; font-weight: 800; line-height: 1.35; letter-spacing: .03em; overflow-wrap: anywhere; }
.launch-actions button:disabled { opacity: .58; cursor: default; }

@media (max-width: 760px) {
 .modal { padding: calc(var(--safe-top) + 4px) calc(var(--safe-right) + 4px) calc(var(--safe-bottom) + 4px) calc(var(--safe-left) + 4px); }
 .modal-frame { max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 8px); max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 8px); }
 .modal-page { padding: 18px 16px; }
 .modal-heading { gap: 10px; }
 .modal-heading h2 { font-size: clamp(22px, 5.6vw, 30px); }
 .modal-lede { font-size: 13px; }
 .settings-list label { grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; padding: 10px 12px; }
 .settings-list label:has(input[type="range"]) { grid-template-columns: minmax(0, 1fr) minmax(96px, 42%); }
 .settings-list input[type="checkbox"] { height: 32px; }
 .settings-list label small { line-height: 1.4; }
 .upgrade-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
 .upgrade-card { min-height: 160px; padding: 16px 14px 42px; }
 .stop-repairs { grid-template-columns: 1fr; }
 .route-map { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); }
 .menu-utility button { min-height: 44px; }
 .launch-panel { flex-shrink: 0; }
}
@media (max-width: 700px) {
 .weapon-status { max-width: 240px; padding: 6px 9px; font-size: 10px; }
 .title-lockup h1 { font-size: clamp(44px, 14.2vw, 72px); }
 .menu-utility { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .menu-utility button { padding: 10px 8px; }
 .launch-actions .secondary { white-space: normal; }
}
@media (min-width: 701px) and (max-height: 560px) {
 .message-stack { max-width: calc(100% - 460px); }
 .weapon-status { font-size: 10px; padding: 5px 8px; }
 .menu-layout { grid-template-rows: auto auto; align-items: start; }
 .title-lockup { grid-row: 1; }
 .launch-panel { grid-row: 1 / span 2; align-self: start; max-height: none; overflow: visible; }
 .launch-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .start-button { grid-column: 1 / -1; }
 .menu-utility { position: relative; inset: auto; grid-column: 1; grid-row: 2; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: end; }
 .menu-utility button { min-height: 44px; padding: 8px 5px; }
 .difficulty-fieldset legend { float: none; width: auto; padding: 0 0 5px; }
}

/* Water is the cargo objective; repair instructions share the phone message stack. */
.convoy-meter{height:10px;border:1px solid rgba(145,231,223,.7);border-radius:5px;overflow:hidden;background:rgba(9,28,35,.9)}
.convoy-meter i{background:linear-gradient(0deg,#247f91,#a3ecdf)}
.leak-status{max-width:100%;margin:0;padding:7px 10px;background:rgba(4,29,39,.96);border-left:3px solid #9eefe6;color:#dcffff;font-size:11px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.message-stack:has(.leak-status:not([hidden])) .status-message{display:none}
@media(max-width:600px){.leak-status{font-size:10px;padding:6px 8px}}

/* Contract board uses normal modal scrolling, including short phone landscapes. */
.contract-goal{padding:12px;background:#18352f;color:#d0e7d8;line-height:1.6;font-size:13px}.contract-options,.contract-kits{border:0;padding:0;margin:18px 0;display:flex;flex-wrap:wrap;gap:8px}.contract-options legend,.contract-kits legend{width:100%;margin-bottom:8px;color:var(--muted);font-size:12px}.contract-options button{min-height:44px;padding:10px 16px;text-transform:capitalize}.contract-options [aria-pressed=true],.contract-kits [aria-pressed=true]{outline:2px solid #e5845c;outline-offset:1px;background:#29443c}.contract-kits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.contract-kits legend{grid-column:1/-1}.contract-kits button{display:flex;flex-direction:column;text-align:left;gap:7px;padding:14px;min-height:44px;white-space:normal}.contract-kits span,.contract-kits small{font-size:12px;line-height:1.5}.contract-kits button:disabled{opacity:.65}.contract-cards{display:grid;gap:16px}.contract-card{padding:20px;border:1px solid #56756b;background:#102922}.contract-card h3{margin:0 0 8px;font-size:23px}.contract-card p{font-size:14px;line-height:1.6}.contract-card .primary{width:100%;min-height:48px;white-space:normal}.contract-medals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:14px 0}.contract-medals span{display:flex;flex-direction:column;gap:5px;background:#0a1e19;border-bottom:3px solid #476158;padding:10px 6px;font-size:12px;text-align:center;overflow-wrap:anywhere}.contract-medals [data-medal="1"]{border-color:#ba8254}.contract-medals [data-medal="2"]{border-color:#cad8d8}.contract-medals [data-medal="3"]{border-color:#f0c864;color:#f5d887}.contract-reward{color:#adddc7}@media(max-width:420px){.contract-card{padding:14px}.contract-kits{grid-template-columns:1fr}.contract-options button{flex:1;padding:10px 8px}.contract-medals span{font-size:10px}}

/* Immediate, readable repair and roadblock feedback above touch controls. */
.leak-status,.blockade-status{font-size:12px;line-height:1.4;text-align:center}
.leak-status.sealing{border-color:#b7fff0;background:rgba(5,55,51,.97)}
.leak-status.blocked{border-color:#ffb872;background:rgba(61,32,15,.97)}
.blockade-status{margin:0;max-width:100%;padding:7px 10px;border-left:3px solid #ffb872;background:rgba(43,25,16,.96);color:#fff0cf;font-weight:800;overflow-wrap:anywhere}
.message-stack:has(.blockade-status:not([hidden])) .status-message{display:none}
@media(max-width:600px){.leak-status,.blockade-status{font-size:11px;padding:6px 8px}}
@media(max-height:500px) and (orientation:landscape){.leak-status,.blockade-status{font-size:10px;padding:4px 7px;line-height:1.25}}

/* Threat intelligence: one live model, readable counters and normal modal scrolling. */
.guide-factions,.guide-units{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.guide-factions button,.guide-units button{min-height:44px;padding:10px 14px;white-space:normal;border:1px solid #55736a;background:#18342e;color:#e9e3cb}
.guide-factions [aria-pressed=true],.guide-units [aria-pressed=true]{border-color:#b8e5d7;background:#2d5347;outline:1px solid #b8e5d7}
.guide-faction-copy,.guide-caption{font-size:12px;line-height:1.5;color:#c3d4c8}
.guide-entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center}
#guide-canvas{display:block;width:100%;height:260px;touch-action:pan-y;border:1px solid #56766c;outline-offset:3px}
.guide-details h3{font-size:25px;margin:0 0 16px}.guide-details p{font-size:14px;line-height:1.6;margin:12px 0}.guide-details strong{display:block;font-size:11px;letter-spacing:.1em;color:#b2ddcc;margin-bottom:5px}.guide-counter{padding:12px;background:#1a392f;border-left:3px solid #dda861}
.shield-status{margin:0;padding:6px 9px;color:#e4f7ff;background:rgba(18,36,57,.97);border-left:3px solid #9dc6ff;text-align:center;font-size:11px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.message-stack:has(.shield-status:not([hidden])) .status-message{display:none}
@media(max-width:600px){.guide-entry{grid-template-columns:1fr;gap:8px}#guide-canvas{height:200px}.guide-details h3{font-size:22px}.guide-factions button{flex:1 1 100px}.shield-status{font-size:10px;padding:5px 7px}}
@media(max-height:500px) and (orientation:landscape){#guide-canvas{height:180px}.shield-status{font-size:9px;padding:4px 7px}}
/* Field training reserves its measured space in the actual camera frame. */
.training-panel{position:absolute;z-index:8;top:112px;left:50%;transform:translateX(-50%);width:min(540px,calc(100% - 24px));padding:10px 14px 12px;border:1px solid #80bfb2;border-left:3px solid #a9f4df;border-radius:4px;background:rgba(8,29,30,.97);box-shadow:0 8px 28px #061a2466;pointer-events:auto;color:#eff3df}
.training-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}.training-heading span{font-size:10px;letter-spacing:.12em;color:#a3d9cb;font-weight:800}.training-heading button{min-width:48px;min-height:44px;margin:-8px -6px -6px 0;padding:5px 8px;font-size:12px;background:transparent;border:0;color:#d4e4d8}
.training-panel h2{font-size:20px;line-height:1.1;margin:5px 0 7px;letter-spacing:.015em}.training-panel p{font-size:13px;line-height:1.4;margin:0 0 10px}.training-track{height:3px;background:#32534f;overflow:hidden}.training-track i{display:block;height:100%;background:#a1f5dd;transition:width .1s linear}.training-actions{display:flex;gap:8px;margin-top:10px}.training-actions button{min-height:44px;padding:9px 12px;font-size:12px;flex:1;white-space:normal}
.training-active .mission-card,.training-active .run-card,.training-active #camera-button,.training-active #route-button,.training-active #sound-button{display:none}.training-active .hud-top{grid-template-columns:minmax(180px,260px) 44px;justify-content:space-between}.training-active .hud-tools{grid-column:2;grid-row:1;display:block}.training-focus{outline:2px solid #c2ffdf!important;outline-offset:5px;box-shadow:0 0 22px #76f4e050!important}.training-active .message-stack{display:none}
@media(max-width:600px){.training-panel{top:96px;padding:8px 11px 10px}.training-panel h2{font-size:18px}.training-panel p{font-size:12px}.training-active .hud-top{grid-template-columns:minmax(0,1fr) 44px}.training-active .vital-card{grid-column:1;grid-row:1}.training-active .hud-tools{grid-column:2;grid-row:1}}
@media(max-height:550px) and (orientation:landscape){.training-panel{top:12px;width:calc(100% - 390px);max-width:540px;padding:6px 10px 8px}.training-panel h2{font-size:16px;margin:2px 0 4px}.training-panel p{font-size:11px;line-height:1.3;margin-bottom:6px}.training-heading{min-height:24px}.training-heading span{font-size:8px}.training-active .hud-top{grid-template-columns:170px 44px}.training-actions button{font-size:10px;padding:5px}}
@media(prefers-reduced-motion:reduce){.training-track i{transition:none}}