@font-face {
  font-family: "BBR Pixel";
  src: url("../assets/fonts/Silkscreen-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --night-950: #02040d;
  --night-900: #030816;
  --night-850: #071126;
  --night-800: #0a1730;
  --ink: #f5f7ff;
  --muted: #94a7c7;
  --cyan: #59dcff;
  --cyan-deep: #166b91;
  --amber: #ffb13b;
  --orange: #ff6b28;
  --red: #ff3e45;
  --frame-border: #19355a;
  --pixel-shadow: 4px 4px 0 #02050d;
  --font-pixel: "BBR Pixel", "Lucida Console", "DejaVu Sans Mono", "Noto Sans Mono", "Courier New", ui-monospace, monospace;
  --game-brightness: 1;
  --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);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  min-width: 280px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--night-950);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  font-family: "Cascadia Mono", "Lucida Console", "DejaVu Sans Mono", "Noto Sans Mono", "Courier New", ui-monospace, monospace;
  font-weight: 400;
  font-synthesis: none;
  font-variant-ligatures: none;
  -webkit-font-smoothing: none;
  text-rendering: auto;
}

html:fullscreen,
html:fullscreen body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.gameCanvas,
.touchControls {
  touch-action: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

select {
  font: inherit;
}

.visuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skipLink {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: calc(var(--safe-left) + 8px);
  padding: 10px 14px;
  color: var(--night-950);
  background: var(--cyan);
  border: 2px solid #fff;
  transform: translateY(calc(-100% - 8px));
  transition: transform 120ms ease;
}

.skipLink:focus-visible {
  top: calc(var(--safe-top) + 8px);
  transform: none;
}

.immersiveEntryDialog {
  position: fixed;
  inset: 0;
  z-index: 1200;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding:
    calc(var(--safe-top) + 16px)
    calc(var(--safe-right) + 16px)
    calc(var(--safe-bottom) + 16px)
    calc(var(--safe-left) + 16px);
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 43%, rgba(23, 85, 113, 0.3), transparent 44%),
    rgba(1, 4, 13, 0.96);
  border: 0;
  overscroll-behavior: none;
}

.immersiveEntryDialog[open] {
  display: grid;
  place-items: center;
}

.immersiveEntryDialog::backdrop {
  background: #01040d;
}

.immersiveEntryCard {
  position: relative;
  width: min(92vw, 460px);
  padding: clamp(22px, 6vw, 38px);
  text-align: center;
  background: rgba(4, 15, 34, 0.98);
  border: 2px solid rgba(89, 220, 255, 0.78);
  box-shadow:
    7px 7px 0 rgba(0, 0, 0, 0.72),
    inset 0 0 34px rgba(89, 220, 255, 0.07),
    0 0 30px rgba(42, 172, 214, 0.16);
}

.immersiveEntrySignal {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 9px;
  height: 9px;
  background: #65ef91;
  box-shadow: 0 0 10px rgba(101, 239, 145, 0.8);
}

.immersiveEntryCard .eyebrow {
  margin: 0 0 9px;
  color: var(--cyan);
  font-size: clamp(0.52rem, 2vw, 0.72rem);
}

.immersiveEntryCard h2 {
  margin: 0;
  color: #fff1ad;
  font-size: clamp(1.25rem, 6vw, 2.35rem);
  text-shadow: 3px 3px 0 #64400c;
}

.immersiveEntryCard p:not(.eyebrow) {
  max-width: 38ch;
  margin: 14px auto 20px;
  color: #b8cbe0;
  font-size: clamp(0.58rem, 2.3vw, 0.8rem);
  line-height: 1.55;
}

.immersiveEntryCard .pixelButton {
  width: min(100%, 280px);
  min-height: 54px;
}

@media (max-height: 430px) {
  .immersiveEntryCard {
    padding: 16px 20px;
  }

  .immersiveEntryCard p:not(.eyebrow) {
    margin: 8px auto 12px;
  }

  .immersiveEntryCard .pixelButton {
    min-height: 42px;
  }
}

.gameTopbar {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: calc(54px + var(--safe-top));
  padding: calc(var(--safe-top) + 8px) calc(var(--safe-right) + 14px) 8px calc(var(--safe-left) + 14px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(2, 4, 13, 0.98), rgba(2, 4, 13, 0.72) 72%, transparent);
}

.backLink,
.iconButton {
  min-height: 36px;
  border: 1px solid rgba(89, 220, 255, 0.3);
  color: #c6f4ff;
  background: rgba(5, 16, 35, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 4px 16px rgba(0, 0, 0, 0.28);
}

.topbarControls {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Keep long presses on the compact game toolbar as taps on iOS. Apply the
   protection to the nested glyphs too: WebKit can otherwise select an emoji
   or visually-hidden label even when its button is not selectable. The
   native language select remains a real select and keeps its picker UI. */
.gameTopbar,
.gameTopbar * {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.gameTopbar .backLink,
.gameTopbar .quickLanguagePicker,
.gameTopbar #quickLanguageSelect,
.gameTopbar .iconButton {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.quickLanguagePicker {
  position: relative;
  min-width: 76px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #d6f7ff;
  background: linear-gradient(180deg, rgba(18, 53, 83, 0.96) 0 48%, rgba(5, 20, 41, 0.98) 49% 100%);
  border: 1px solid rgba(89, 220, 255, 0.48);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.06), 0 4px 0 rgba(1, 4, 11, 0.72);
}

.quickLanguagePicker::after {
  position: absolute;
  right: 7px;
  content: "▾";
  color: var(--cyan);
  font-size: 0.68rem;
  pointer-events: none;
}

.quickLanguageIcon {
  position: absolute;
  z-index: 1;
  left: 7px;
  font-size: 0.72rem;
  pointer-events: none;
}

#quickLanguageSelect {
  width: 100%;
  min-height: 44px;
  padding: 0 20px 0 27px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  cursor: pointer;
  appearance: none;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
}

#quickLanguageSelect option,
#languageSelect option {
  color: #eef8ff;
  background: #07162b;
}

.quickLanguagePicker:hover,
.quickLanguagePicker:focus-within {
  color: #fff;
  border-color: var(--cyan);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.08), 0 4px 0 rgba(1, 4, 11, 0.72), 0 0 16px rgba(89, 220, 255, 0.16);
}

.backLink {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  text-decoration: none;
  letter-spacing: 0.02em;
  font-size: 0.77rem;
}

.backLink[hidden] {
  display: none !important;
}

.backLink > span:first-child {
  color: var(--cyan);
  font-size: 1rem;
}

.iconButton {
  width: 40px;
  padding: 0;
  cursor: pointer;
  font-size: 1rem;
}

.audioButton,
.pauseButton,
.settingsButton {
  flex: 0 0 40px;
}

.pauseButtonIcon {
  display: block;
  color: #ffd36f;
  font-size: 0.9rem;
  line-height: 1;
}

.pauseButton:disabled {
  opacity: 0.38;
  cursor: default;
  filter: saturate(0.45);
}

.pauseButton:not(:disabled):hover .pauseButtonIcon,
.pauseButton:not(:disabled):focus-visible .pauseButtonIcon {
  color: #fff4bd;
  text-shadow: 0 0 8px rgba(255, 196, 66, 0.72);
}

.settingsButtonIcon {
  display: block;
  color: #bdefff;
  font-size: 1.05rem;
  line-height: 1;
  transform: translateY(-1px);
}

.settingsButton:hover .settingsButtonIcon,
.settingsButton:focus-visible .settingsButtonIcon {
  color: #fff;
  text-shadow: 0 0 8px rgba(89, 220, 255, 0.75);
}

.devButton {
  width: auto;
  min-width: 88px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #ffd978;
  border-color: rgba(255, 177, 59, 0.48);
  font-size: 0.69rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.devButtonState {
  min-width: 25px;
  padding: 2px 3px;
  color: #9babc1;
  background: #020713;
  border: 1px solid #43536d;
  font-size: 0.54rem;
  letter-spacing: 0.04em;
}

.devButton[aria-pressed="true"] {
  color: #010409;
  background: linear-gradient(#8dffae 0 47%, #36c96c 48% 100%);
  border-color: #d1ffde;
  box-shadow: 0 3px 0 #126132, 0 0 0 1px #06130b, 0 0 16px rgba(67, 255, 127, 0.45);
  text-shadow: none;
}

.devButton[aria-pressed="true"] .devButtonState {
  color: #d9ffe4;
  background: #0c5d2d;
  border-color: #167d41;
}

.backLink:hover,
.iconButton:hover,
.backLink:focus-visible,
.iconButton:focus-visible {
  color: #fff;
  border-color: var(--cyan);
  background: rgba(14, 45, 72, 0.95);
  outline: none;
}

.devButton[aria-pressed="true"]:hover,
.devButton[aria-pressed="true"]:focus-visible {
  color: #010409;
  background: linear-gradient(#a9ffbf 0 47%, #49d87b 48% 100%);
  border-color: #effff3;
}

.gameTopbarTitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #758aaa;
  letter-spacing: 0.16em;
  font-size: clamp(0.57rem, 1.2vw, 0.7rem);
  white-space: nowrap;
}

.statusLight {
  width: 7px;
  height: 7px;
  background: var(--orange);
  box-shadow: 0 0 0 2px rgba(255, 107, 40, 0.14), 0 0 10px var(--orange);
  animation: statusBlink 2.4s steps(2, end) infinite;
}

.gameShell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding:
    calc(58px + var(--safe-top))
    max(12px, var(--safe-right))
    calc(30px + var(--safe-bottom))
    max(12px, var(--safe-left));
  isolation: isolate;
}

.gameShell::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(21, 76, 133, 0.25), transparent 43%),
    linear-gradient(180deg, #061126 0%, var(--night-950) 72%);
}

.gameShell::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: 0.14;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(89, 220, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 220, 255, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(transparent, #000 45%, transparent);
  mask-image: linear-gradient(transparent, #000 45%, transparent);
}

.gameFrame {
  position: relative;
  width: min(100%, calc((100vh - 96px) * 16 / 9));
  width: min(100%, calc((100dvh - 96px) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #020713;
  border: 0;
  outline: 1px solid rgba(89, 220, 255, 0.24);
  outline-offset: 4px;
  box-shadow:
    0 0 0 1px #02050d,
    0 18px 60px rgba(0, 0, 0, 0.72),
    0 0 54px rgba(18, 72, 123, 0.2);
}

.gameFrame::before {
  position: absolute;
  z-index: 40;
  inset: 0;
  content: "";
  box-shadow: inset 0 0 0 clamp(2px, 0.35vw, 4px) var(--frame-border);
  pointer-events: none;
}

#gameCanvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #030817;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: none;
  filter: brightness(var(--game-brightness, 1));
  will-change: filter;
}

#gameCanvas:focus-visible {
  box-shadow: inset 0 0 0 2px var(--cyan);
}

.pixelGlass {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 55, 35, 0.015), transparent 34%, rgba(45, 194, 255, 0.018)),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.28);
  mix-blend-mode: screen;
}

.gameHud {
  position: absolute;
  z-index: 12;
  inset: clamp(7px, 1.8vw, 18px) clamp(8px, 2vw, 20px) auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 8px;
  opacity: 1;
  transition: opacity 150ms linear;
  pointer-events: none;
}

body[data-game-state="START"] .gameHud,
body[data-game-state="GAME_OVER"] .gameHud,
body[data-game-state="CREDITS"] .gameHud {
  opacity: 0;
  visibility: hidden;
}

/* UFO arrival and lunar transfer are full-screen cinematics: keep every
   gameplay/status overlay out while retaining canvas captions. */
body[data-game-state="UFO_SEQUENCE"] .gameHud,
body[data-game-state="UFO_SEQUENCE"] .gameMessage,
body[data-game-state="UFO_SEQUENCE"] .coopActivityToast,
body[data-game-state="UFO_SEQUENCE"] .speechBubble,
body[data-game-state="UFO_SEQUENCE"] .multiplayerConnectionStatus,
body[data-game-state="SPACE_SEQUENCE"] .gameHud,
body[data-game-state="SPACE_SEQUENCE"] .gameMessage,
body[data-game-state="SPACE_SEQUENCE"] .coopActivityToast,
body[data-game-state="SPACE_SEQUENCE"] .speechBubble,
body[data-game-state="SPACE_SEQUENCE"] .multiplayerConnectionStatus {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

.hudPanel {
  display: inline-flex;
  width: max-content;
  min-width: clamp(72px, 13vw, 126px);
  flex-direction: column;
  gap: 2px;
  padding: clamp(4px, 0.7vw, 7px) clamp(6px, 1vw, 10px);
  color: #fff;
  background: rgba(2, 7, 19, 0.74);
  border: 1px solid rgba(118, 176, 224, 0.42);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}

.scorePanel {
  justify-self: end;
  text-align: right;
}

.powerPanel {
  box-sizing: border-box;
  width: clamp(116px, 22vw, 190px);
  max-width: min(42vw, 190px);
}

.healthPanel {
  max-width: min(46vw, 180px);
}

.hudVitalsHeading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(5px, 1.1vw, 10px);
  white-space: nowrap;
}

.hudScoreMetric {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(2px, 0.45vw, 4px);
  min-width: 0;
}

.hudScoreLabel {
  color: #78dff7;
  font-size: clamp(0.28rem, 0.62vw, 0.4rem);
  letter-spacing: 0.07em;
}

.hudScoreValue {
  color: #fff7d6;
  font-size: clamp(0.48rem, 1.05vw, 0.72rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 #02040d;
}

.shieldStatus {
  display: grid;
  grid-template-columns: auto minmax(28px, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-width: 86px;
  color: #79f6ff;
  font-size: clamp(0.32rem, 0.68vw, 0.46rem);
  letter-spacing: 0.045em;
  line-height: 1;
}

.shieldLabel,
.shieldValue {
  white-space: nowrap;
}

.shieldValue {
  display: inline-block;
  width: 4ch;
  color: #d9fdff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.shieldProgress {
  width: 100%;
  min-width: 28px;
  height: 5px;
  border: 1px solid rgba(85, 234, 255, 0.72);
  border-radius: 0;
  background: rgba(4, 18, 34, 0.9);
  overflow: hidden;
  appearance: none;
}

.shieldProgress::-webkit-progress-bar {
  background: rgba(4, 18, 34, 0.9);
}

.shieldProgress::-webkit-progress-value {
  background: #55eaff;
  box-shadow: 0 0 5px rgba(85, 234, 255, 0.72);
}

.shieldProgress::-moz-progress-bar {
  background: #55eaff;
  box-shadow: 0 0 5px rgba(85, 234, 255, 0.72);
}

@media (max-width: 559px) {
  .shieldStatus {
    grid-template-columns: minmax(0, 1fr) 4ch;
    min-width: 0;
    column-gap: 3px;
    row-gap: 2px;
  }

  .shieldLabel {
    grid-column: 1 / -1;
  }

  .shieldProgress {
    min-width: 0;
  }
}

@media (max-width: 360px) {
  .gameHud {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .powerPanel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

.pedalPowerDetail {
  display: grid;
  gap: 1px;
  color: #9fc0dd;
  font-size: clamp(0.34rem, 0.78vw, 0.5rem);
  line-height: 1.25;
  letter-spacing: 0.055em;
}

.pedalPowerDetail[hidden] {
  display: none;
}

.pedalPowerDetail strong {
  color: #8fffd0;
  white-space: nowrap;
}

.hudLabel {
  color: #7f96ba;
  letter-spacing: 0.12em;
  font-size: clamp(0.42rem, 0.9vw, 0.61rem);
}

.healthValue {
  white-space: nowrap;
  color: var(--red);
  letter-spacing: 0.12em;
  font-size: clamp(0.7rem, 1.7vw, 1.1rem);
  text-shadow: 0 0 8px rgba(255, 62, 69, 0.72), 2px 2px 0 #350509;
}

@media (max-width: 340px) {
  .healthPanel {
    padding-right: 4px;
    padding-left: 4px;
  }

  .hudVitalsHeading {
    gap: 3px;
  }

  .healthValue {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
  }

  .hudScoreMetric {
    gap: 1px;
  }
}

.scoreValue,
.timer {
  color: #fff7d6;
  font-size: clamp(0.65rem, 1.5vw, 1rem);
  letter-spacing: 0.09em;
  text-shadow: 2px 2px 0 #02040d;
}

.hudEtaLabel {
  margin-bottom: -2px;
  color: #78dff7;
  letter-spacing: 0.11em;
  font-size: clamp(0.34rem, 0.72vw, 0.5rem);
  line-height: 1.1;
}

.chargeProgress {
  width: clamp(92px, 23vw, 188px);
  height: clamp(6px, 1vw, 9px);
  overflow: hidden;
  color: #70f5ff;
  background: #071326;
  border: 1px solid rgba(126, 226, 255, 0.72);
  border-radius: 0;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.72);
  appearance: none;
}

.chargeProgress::-webkit-progress-bar {
  background: #071326;
}

.chargeProgress::-webkit-progress-value {
  background: linear-gradient(90deg, #28c6eb, #8bfff0);
}

.chargeProgress::-moz-progress-bar {
  background: linear-gradient(90deg, #28c6eb, #8bfff0);
}

.hudCenter {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3px;
  text-align: center;
  text-shadow: 2px 2px 0 #02040d;
}

/* Contextual hints share the HUD's layout, so they follow badges/objective text
   without overlapping the top controls or the rider's ground-level space. */
.tutorialHint {
  grid-column: 1 / -1;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(520px, 100%);
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid #77dce9;
  background: rgba(3, 8, 22, 0.96);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
  color: #f5f7ff;
  font-size: 13px;
  line-height: 18px;
  text-shadow: 1px 1px 0 #02040d;
  pointer-events: none;
}

.tutorialHintAction {
  flex: 0 0 auto;
  color: #a5ffdd;
  font-weight: 700;
  white-space: nowrap;
}

.tutorialHintAction:empty {
  display: none;
}

.tutorialHintText {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ftirObjective {
  width: clamp(92px, 23vw, 188px);
  max-width: 27ch;
  color: #e8fff8;
  font-family: "Cascadia Mono", "Lucida Console", monospace;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0;
}

body:not([data-game-state="PLAYING"]) .tutorialHint {
  display: none;
}

.tutorialHintsSettings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(89, 220, 255, 0.24);
}

.tutorialHintsToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}

.tutorialHintsToggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #a5ffdd;
}

.tutorialHintsToggle input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.tutorialHintsReset {
  min-height: 44px;
  padding: 8px 10px;
  font-size: 8px;
  line-height: 12px;
}

@media (max-width: 560px), (orientation: landscape) and (max-height: 520px) {
  .tutorialHint {
    gap: 7px;
    padding: 4px 7px;
    font-size: 11px;
    line-height: 14px;
  }

  .ftirObjective {
    font-size: 8px;
    line-height: 10px;
  }
}

.speedBoostBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  padding: 2px 6px;
  color: #071914;
  background: #72ffbc;
  border: 1px solid #d8ffe9;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.72);
  font-family: var(--font-pixel);
  font-size: clamp(0.38rem, 0.84vw, 0.58rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.07em;
  line-height: 1.15;
  text-shadow: none;
  white-space: nowrap;
  animation: speedBadgePulse 0.72s steps(2, end) infinite;
}

@keyframes speedBadgePulse {
  50% { filter: brightness(1.28); }
}

@media (prefers-reduced-motion: reduce) {
  .speedBoostBadge { animation: none; }
}

.officialStatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: min(44vw, 260px);
  padding: 2px 5px;
  color: #8fa3c1;
  background: rgba(2, 7, 19, 0.68);
  border: 1px solid rgba(118, 176, 224, 0.28);
  font-size: clamp(0.32rem, 0.68vw, 0.49rem);
  line-height: 1.25;
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}

.officialStatus::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  background: #ff5555;
  border: 1px solid #ffd0c8;
  box-shadow: 0 0 5px rgba(255, 68, 68, 0.62);
}

.officialStatus strong {
  color: #ff7770;
}

.officialStatus[data-exocom-state="calibrating"]::before {
  animation: statusBlink 520ms steps(2, end) infinite;
}

.officialStatus[data-exocom-state="signal"]::before {
  background: #59ef83;
  border-color: #c8ffda;
  box-shadow: 0 0 6px rgba(72, 255, 126, 0.68);
  animation: statusBlink 680ms steps(2, end) infinite;
}

.officialStatus[data-exocom-state="signal"] strong,
.officialStatus[data-exocom-state="open"] strong {
  color: #83f0ae;
}

.officialStatus[data-exocom-state="open"]::before {
  background: #72ff9d;
  border-color: #e2ffeb;
  box-shadow: 0 0 8px rgba(72, 255, 126, 0.82);
}

.phaseLabel {
  color: var(--amber);
  letter-spacing: 0.14em;
  font-size: clamp(0.43rem, 0.9vw, 0.64rem);
}

.devBadge {
  padding: clamp(2px, 0.45vw, 4px) clamp(4px, 0.7vw, 7px);
  color: #caffd8;
  background: rgba(5, 75, 35, 0.88);
  border: 1px solid #65ef91;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.65), 0 0 9px rgba(67, 255, 127, 0.25);
  letter-spacing: 0.08em;
  font-size: clamp(0.37rem, 0.78vw, 0.55rem);
  line-height: 1.1;
  white-space: nowrap;
}

.gameMessage {
  position: absolute;
  z-index: 14;
  top: 20%;
  left: 4%;
  width: min(40%, 22rem);
  max-width: 40%;
  padding: clamp(4px, 1vw, 9px) clamp(7px, 1.4vw, 14px);
  color: #fff;
  background: rgba(2, 6, 15, 0.74);
  border-left: 3px solid var(--amber);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 130ms linear, transform 130ms steps(2, end);
  font-size: clamp(0.55rem, 1.3vw, 0.9rem);
  line-height: 1.35;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  text-align: left;
  pointer-events: none;
}

.gameMessage.is-visible,
.gameMessage.show {
  opacity: 1;
  transform: translateY(0);
}

.gameMessage.is-intro {
  width: min(68%, 38rem);
  max-width: 68%;
  background: rgba(2, 6, 15, 0.84);
}

.gameMessage.is-ftir {
  right: max(4%, calc(var(--safe-right) + 8px));
  left: auto;
}

.coopActivityToast {
  position: absolute;
  z-index: 15;
  top: clamp(82px, 11vw, 112px);
  left: clamp(7px, 1.5vw, 15px);
  max-width: min(46%, 17rem);
  margin: 0;
  padding: 4px 7px;
  color: #bfffe3;
  background: rgba(2, 18, 27, 0.9);
  border: 1px solid rgba(101, 239, 145, 0.64);
  border-left: 3px solid #65ef91;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  font-size: clamp(0.42rem, 0.78vw, 0.58rem);
  line-height: 1.25;
  letter-spacing: 0.035em;
  pointer-events: none;
}

.coopActivityToast[hidden] {
  display: none;
}

.speechBubble {
  position: absolute;
  z-index: 14;
  top: clamp(52px, 7.5vw, 76px);
  right: auto;
  bottom: auto;
  left: clamp(8px, 2vw, 20px);
  width: max-content;
  max-width: min(45%, 15rem);
  min-height: 22px;
  padding: 4px 7px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #dff8ff;
  background:
    linear-gradient(135deg, rgba(7, 25, 43, 0.94), rgba(2, 10, 22, 0.9)),
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(111, 224, 255, 0.04) 5px 6px);
  border: 1px solid rgba(112, 225, 255, 0.68);
  border-left: 3px solid #62e3ff;
  box-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.48),
    inset 0 0 18px rgba(31, 143, 190, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 100ms linear, transform 100ms ease-out, visibility 0s linear 100ms;
  font-size: clamp(0.5rem, 0.82vw, 0.62rem);
  line-height: 1.2;
  text-align: left;
  pointer-events: none;
}

.speechBubble[data-side="left"],
.speechBubble[data-side="right"] {
  right: auto;
  left: clamp(8px, 2vw, 20px);
}

.speechBubble::before {
  display: none;
}

.speechLabel {
  flex: 0 0 auto;
  color: #75e9ff;
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
}

.speechDivider {
  flex: 0 0 auto;
  color: rgba(117, 233, 255, 0.7);
}

.speechSignal {
  width: 5px;
  height: 5px;
  background: #9dffd7;
  box-shadow: 0 0 6px rgba(107, 255, 207, 0.74);
}

.speechText {
  min-width: 0;
  min-height: 0;
  display: block;
  overflow-wrap: anywhere;
}

.speechBubble.is-typing .speechText::after {
  content: "\258C";
  margin-left: 2px;
  color: #9dffd7;
  animation: speechCursor 620ms steps(2, end) infinite;
}

.speechBubble.is-visible,
.speechBubble.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

@keyframes speechCursor {
  50% { opacity: 0.18; }
}

.screenOverlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
}

.startScreen {
  overflow: hidden;
  isolation: isolate;
}

.dossierScreen {
  z-index: 34;
  padding: clamp(10px, 3vw, 28px);
  overflow: hidden;
  color: #dffaff;
  background:
    radial-gradient(circle at 50% 45%, rgba(10, 69, 92, 0.28), transparent 58%),
    linear-gradient(180deg, #020711, #030d18 62%, #02050d);
  isolation: isolate;
}

.dossierScreen::before,
.dossierScreen::after,
.dossierNoise {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.dossierScreen::before {
  z-index: -2;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(89, 220, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 220, 255, 0.045) 1px, transparent 1px);
  background-size: 18px 18px;
}

.dossierScreen::after {
  z-index: 4;
  background: linear-gradient(180deg, transparent 0 47%, rgba(103, 233, 255, 0.09) 49%, transparent 52% 100%);
  animation: dossierScan 1.15s steps(10, end) infinite;
}

.dossierNoise {
  z-index: -1;
  opacity: 0.14;
  background: repeating-linear-gradient(180deg, transparent 0 3px, #000 4px 5px);
}

.dossierFrame {
  position: relative;
  width: min(96%, 960px);
  height: min(90%, 580px);
  min-height: 170px;
  padding: clamp(13px, 3vw, 28px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(7px, 2vw, 18px);
  background: rgba(1, 9, 20, 0.88);
  border: 2px solid #59dcff;
  box-shadow:
    5px 5px 0 #02040d,
    inset 0 0 0 2px rgba(89, 220, 255, 0.12),
    0 0 34px rgba(62, 211, 255, 0.18);
}

.dossierFrame::before,
.dossierFrame::after {
  position: absolute;
  width: clamp(24px, 8%, 60px);
  height: clamp(18px, 12%, 42px);
  content: "";
  pointer-events: none;
}

.dossierFrame::before {
  top: -5px;
  left: -5px;
  border-top: 5px solid #ffb13b;
  border-left: 5px solid #ffb13b;
}

.dossierFrame::after {
  right: -5px;
  bottom: -5px;
  border-right: 5px solid #ffb13b;
  border-bottom: 5px solid #ffb13b;
}

.dossierHeader {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(7px, 2vw, 14px);
  color: #88eaff;
  font-size: clamp(0.42rem, 1.05vw, 0.66rem);
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dossierHeader > span:last-of-type {
  color: #778aa4;
  text-align: right;
}

.dossierSignal {
  width: 8px;
  height: 8px;
  background: #6cff9c;
  box-shadow: 0 0 10px #6cff9c;
  animation: dossierSignal 650ms steps(2, end) infinite;
}

.dossierSequence {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
}

.dossierCard {
  display: none;
  max-width: 25ch;
  margin: 0;
  color: #f3fbff;
  font-size: clamp(0.82rem, 3.6vw, 2.15rem);
  line-height: 1.25;
  letter-spacing: clamp(0.035em, 0.25vw, 0.1em);
  overflow-wrap: anywhere;
  text-shadow: 3px 3px 0 #02040d, 0 0 18px rgba(89, 220, 255, 0.24);
  text-transform: uppercase;
}

.dossierCard.is-active {
  display: block;
  animation: dossierCardIn 420ms steps(6, end) both;
}

.dossierCardCommand {
  color: #ffca55;
  font-size: clamp(1.55rem, 8vw, 5rem);
  letter-spacing: 0.18em;
  text-shadow: 4px 4px 0 #641c0b, 0 0 28px rgba(255, 107, 40, 0.58);
}

.dossierCardAlert {
  color: #83ffaf;
}

.dossierProgress {
  display: flex;
  justify-content: center;
  gap: clamp(4px, 1.2vw, 9px);
}

.dossierPip {
  width: clamp(14px, 4vw, 34px);
  height: clamp(3px, 0.7vw, 6px);
  background: #1a3249;
  border: 1px solid #335b76;
}

.dossierPip.is-active {
  background: #ffb13b;
  border-color: #ffe19b;
  box-shadow: 0 0 9px rgba(255, 177, 59, 0.6);
}

.dossierCloseButton {
  width: 30px;
  height: 30px;
  padding: 0;
  color: #dffaff;
  background: #102942;
  border: 1px solid #59dcff;
  box-shadow: 2px 2px 0 #02040d;
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1;
}

.dossierCloseButton:hover,
.dossierCloseButton:focus-visible {
  color: #020711;
  background: #88eaff;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.dossierCardRoster {
  width: 100%;
  max-width: none;
  min-height: 0;
  text-transform: none;
}

.dossierCardRoster.is-active {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}

.briefingRosterHeading h3,
.briefingRosterHeading p,
.briefingAvatarCard h4,
.briefingAvatarCard p {
  margin: 0;
}

.briefingRosterHeading h3 {
  color: #ffca55;
  font-size: clamp(0.75rem, 1.65vw, 1.12rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.briefingRosterHeading p {
  margin-top: 3px;
  color: #9eb7ce;
  font-size: clamp(0.46rem, 0.85vw, 0.62rem);
  line-height: 1.35;
}

.briefingAvatarGrid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(5px, 0.8vw, 9px);
  overflow: auto;
  scrollbar-color: #59dcff #071426;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.briefingAvatarCard {
  min-width: 0;
  padding: clamp(5px, 0.8vw, 9px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
  align-content: start;
  gap: clamp(4px, 0.7vw, 8px);
  color: #dffaff;
  background: rgba(7, 25, 43, 0.88);
  border: 1px solid #315e78;
  box-shadow: inset 0 0 0 1px rgba(89, 220, 255, 0.06);
  text-align: left;
}

.briefingAvatarIdentity {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  text-align: center;
}

.briefingAvatarIdentity canvas {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}

.briefingAvatarIdentity h4 {
  min-height: 2.5em;
  color: #f1fbff;
  font-size: clamp(0.42rem, 0.72vw, 0.56rem);
  line-height: 1.25;
  letter-spacing: 0.035em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.briefingAvatarPlus,
.briefingAvatarMinus {
  font-size: clamp(0.39rem, 0.63vw, 0.51rem);
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.briefingAvatarPlus {
  color: #83ffaf;
}

.briefingAvatarMinus {
  color: #ffb0a1;
}

.briefingNavigation {
  min-height: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 150px));
  justify-content: center;
  gap: clamp(7px, 1.5vw, 14px);
}

.briefingNavigationButton {
  width: 100%;
  min-height: 38px;
  padding: 6px 10px;
  font-size: clamp(0.48rem, 1vw, 0.66rem);
}

#dossierPreviousButton {
  grid-column: 1;
}

#dossierNextButton {
  grid-column: 2;
}

.startBackdrop,
.startAtmosphere,
.startShade {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.startBackdrop {
  z-index: -4;
  background: #07142b url("assets/refinery-title.png") center center / cover no-repeat;
  image-rendering: pixelated;
  transform: scale(1.012);
  filter: brightness(var(--game-brightness, 1));
  animation: startDrift 12s steps(120, end) infinite alternate;
}

.startAtmosphere {
  z-index: -3;
  overflow: hidden;
  transform: scale(1.012);
  filter: brightness(var(--game-brightness, 1));
  animation: startDrift 12s steps(120, end) infinite alternate;
  pointer-events: none;
}

.menuStars,
.menuLights {
  position: absolute;
  inset: 0;
}

.menuStar {
  --star-color: #d7edff;
  --star-duration: 3.4s;
  --star-delay: 0s;
  position: absolute;
  width: clamp(1px, 0.2vw, 3px);
  height: clamp(1px, 0.2vw, 3px);
  background: var(--star-color);
  box-shadow: 0 0 clamp(2px, 0.45vw, 6px) var(--star-color);
  opacity: 0.35;
  animation: menuStarTwinkle var(--star-duration) steps(4, end) var(--star-delay) infinite;
}

.menuStar01 { top: 5.2%; left: 7.4%; --star-delay: -0.4s; }
.menuStar02 { top: 11.2%; left: 16.1%; --star-duration: 4.2s; --star-delay: -2.7s; --star-color: #ffd99a; }
.menuStar03 { top: 6.8%; left: 27.8%; --star-duration: 2.9s; --star-delay: -1.2s; }
.menuStar04 { top: 14.4%; left: 38.1%; --star-duration: 4.8s; --star-delay: -3.5s; --star-color: #8beaff; }
.menuStar05 { top: 8.1%; left: 59.3%; --star-duration: 3.8s; --star-delay: -2.1s; }
.menuStar06 { top: 4.7%; left: 71.9%; --star-duration: 3.1s; --star-delay: -0.9s; --star-color: #ffe0a8; }
.menuStar07 { top: 12.6%; left: 83.7%; --star-duration: 4.4s; --star-delay: -1.8s; --star-color: #84e5ff; }
.menuStar08 { top: 7.3%; left: 94.1%; --star-duration: 3.6s; --star-delay: -2.9s; }
.menuStar09 { top: 21.8%; left: 4.6%; --star-duration: 4.7s; --star-delay: -3.1s; }
.menuStar10 { top: 27.2%; left: 24.2%; --star-duration: 3.3s; --star-delay: -1.6s; --star-color: #ffd6a1; }
.menuStar11 { top: 23.5%; left: 64.5%; --star-duration: 5.1s; --star-delay: -4.2s; }
.menuStar12 { top: 31.1%; left: 91.7%; --star-duration: 3.9s; --star-delay: -0.7s; --star-color: #82ddff; }

.menuMoon {
  position: absolute;
  z-index: 0;
  top: 5.5%;
  right: auto;
  left: 6.5%;
  width: clamp(48px, 8vw, 94px);
  aspect-ratio: 1;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255, 255, 255, 0.2) 13% 24%, transparent 25% 100%),
    linear-gradient(180deg, #f2f1d0 0 18%, #d4dec9 19% 66%, #9fb4b5 67% 100%);
  clip-path: polygon(
    25% 0,
    75% 0,
    75% 6.25%,
    87.5% 6.25%,
    87.5% 12.5%,
    93.75% 12.5%,
    93.75% 25%,
    100% 25%,
    100% 75%,
    93.75% 75%,
    93.75% 87.5%,
    87.5% 87.5%,
    87.5% 93.75%,
    75% 93.75%,
    75% 100%,
    25% 100%,
    25% 93.75%,
    12.5% 93.75%,
    12.5% 87.5%,
    6.25% 87.5%,
    6.25% 75%,
    0 75%,
    0 25%,
    6.25% 25%,
    6.25% 12.5%,
    12.5% 12.5%,
    12.5% 6.25%,
    25% 6.25%
  );
  filter:
    drop-shadow(0 0 3px rgba(207, 235, 225, 0.72))
    drop-shadow(0 0 12px rgba(105, 190, 211, 0.42));
  opacity: 0.92;
  animation: menuMoonDrift 10s steps(20, end) infinite alternate;
  will-change: transform;
}

.menuMoon::after {
  content: "";
  position: absolute;
  inset: 8% 9% 12% 8%;
  border-top: max(2px, 0.22vw) solid rgba(255, 255, 230, 0.34);
  border-left: max(2px, 0.22vw) solid rgba(255, 255, 230, 0.2);
}

.menuMoonCrater {
  position: absolute;
  display: block;
  background: #91a7aa;
  box-shadow:
    inset 2px 2px 0 rgba(85, 111, 121, 0.62),
    2px 2px 0 rgba(232, 235, 210, 0.22);
}

.menuMoonCraterLarge {
  top: 28%;
  left: 19%;
  width: 27%;
  height: 21%;
  clip-path: polygon(18% 0, 82% 0, 82% 18%, 100% 18%, 100% 82%, 82% 82%, 82% 100%, 18% 100%, 18% 82%, 0 82%, 0 18%, 18% 18%);
}

.menuMoonCraterSmall {
  top: 61%;
  left: 54%;
  width: 17%;
  height: 15%;
}

.menuMoonCraterEdge {
  top: 20%;
  right: 4%;
  width: 16%;
  height: 26%;
  background: #849ba3;
}

.menuFlares {
  position: absolute;
  z-index: 2;
  inset: 0;
}

/* The title art contains three baked-in pilot flames. These live overlays sit
   on the same flare tips, using the baked fire as a crisp pixel-art core. */
.menuFlare {
  position: absolute;
  z-index: 2;
  width: clamp(16px, 2.1vw, 34px);
  height: clamp(25px, 3.5vw, 56px);
  transform: translate(-50%, -50%);
}

.menuFlareWest {
  top: 34.9%;
  left: 27.45%;
}

.menuFlareMain {
  top: 14.9%;
  left: 48.65%;
  width: clamp(34px, 4.1vw, 66px);
  height: clamp(54px, 6.4vw, 102px);
}

.menuFlareEast {
  top: 25.2%;
  left: 85.75%;
}

.menuFlareGlow,
.menuFlareTongue,
.menuFlareSpark {
  position: absolute;
  display: block;
}

.menuFlareGlow {
  left: 50%;
  bottom: 20%;
  width: 92%;
  height: 56%;
  border-radius: 50%;
  background: rgba(255, 82, 18, 0.18);
  box-shadow:
    0 0 clamp(5px, 1vw, 15px) rgba(255, 78, 17, 0.66),
    0 0 clamp(9px, 1.8vw, 26px) rgba(255, 151, 24, 0.3);
  transform: translateX(-50%);
  animation: menuFlarePulse 0.94s steps(5, end) -0.35s infinite;
}

.menuFlareTongue {
  bottom: 14%;
  transform-origin: 50% 100%;
  image-rendering: pixelated;
}

.menuFlareTongueOuter {
  left: 19%;
  width: 62%;
  height: 78%;
  background: linear-gradient(90deg, #f13d16 0 25%, #ff8f1f 26% 76%, #ff4c16 77% 100%);
  clip-path: polygon(37% 0, 66% 0, 66% 13%, 82% 13%, 82% 27%, 100% 27%, 100% 68%, 84% 68%, 84% 86%, 66% 86%, 66% 100%, 17% 100%, 17% 89%, 0 89%, 0 50%, 17% 50%, 17% 22%, 37% 22%);
  opacity: 0.58;
  mix-blend-mode: screen;
  animation: menuFlareLick 0.7s steps(5, end) -0.22s infinite;
}

.menuFlareTongueInner {
  left: 31%;
  width: 38%;
  height: 52%;
  background: linear-gradient(90deg, #ffd946 0 35%, #fff1a1 36% 66%, #ffb52e 67% 100%);
  clip-path: polygon(30% 0, 75% 0, 75% 25%, 100% 25%, 100% 72%, 74% 72%, 74% 100%, 0 100%, 0 44%, 30% 44%);
  opacity: 0.68;
  mix-blend-mode: screen;
  animation: menuFlareLickInner 0.52s steps(4, end) -0.4s infinite;
}

.menuFlareMain .menuFlareGlow {
  width: 120%;
  height: 72%;
  background: rgba(255, 82, 18, 0.3);
  box-shadow:
    0 0 clamp(8px, 1.25vw, 20px) rgba(255, 78, 17, 0.82),
    0 0 clamp(14px, 2.25vw, 36px) rgba(255, 151, 24, 0.46);
}

.menuFlareMain .menuFlareTongueOuter {
  left: 14%;
  width: 72%;
  height: 92%;
  opacity: 0.82;
}

.menuFlareMain .menuFlareTongueInner {
  left: 27%;
  width: 46%;
  height: 64%;
  opacity: 0.9;
}

.menuFlareWest .menuFlareGlow { animation-duration: 1.08s; animation-delay: -0.12s; }
.menuFlareWest .menuFlareTongueOuter { animation-duration: 0.78s; animation-delay: -0.46s; }
.menuFlareWest .menuFlareTongueInner { animation-duration: 0.59s; animation-delay: -0.18s; }
.menuFlareWest .menuFlareSparkA { animation-delay: -0.8s; }
.menuFlareWest .menuFlareSparkB { animation-delay: -1.62s; }

.menuFlareEast .menuFlareGlow { animation-duration: 1.16s; animation-delay: -0.72s; }
.menuFlareEast .menuFlareTongueOuter { animation-duration: 0.82s; animation-delay: -0.61s; }
.menuFlareEast .menuFlareTongueInner { animation-duration: 0.64s; animation-delay: -0.49s; }
.menuFlareEast .menuFlareSparkA { animation-delay: -1.24s; }
.menuFlareEast .menuFlareSparkB { animation-delay: -0.38s; }

.menuFlareSpark {
  width: clamp(2px, 0.25vw, 4px);
  height: clamp(2px, 0.25vw, 4px);
  background: #ffd351;
  box-shadow: 0 0 5px rgba(255, 100, 20, 0.9);
  opacity: 0;
}

.menuFlareSparkA {
  top: 18%;
  left: 16%;
  animation: menuFlareSparkA 1.8s steps(6, end) -0.45s infinite;
}

.menuFlareSparkB {
  top: 35%;
  right: 6%;
  animation: menuFlareSparkB 2.1s steps(7, end) -1.3s infinite;
}

.menuFlareSmoke {
  position: absolute;
  z-index: 1;
  top: 2%;
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.menuFlareSmoke b {
  --smoke-drift: clamp(28px, 4.6vw, 72px);
  --smoke-rise: clamp(68px, 10.4vw, 162px);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: clamp(8px, 1.05vw, 17px);
  height: clamp(8px, 1.05vw, 17px);
  background: rgba(44, 60, 85, 0.72);
  box-shadow:
    clamp(-9px, -0.56vw, -5px) clamp(2px, 0.22vw, 4px) 0 rgba(28, 43, 69, 0.7),
    clamp(5px, 0.56vw, 9px) clamp(-4px, -0.22vw, -2px) 0 rgba(72, 85, 108, 0.62),
    clamp(10px, 0.94vw, 15px) clamp(3px, 0.32vw, 5px) 0 rgba(22, 35, 61, 0.6),
    clamp(1px, 0.15vw, 3px) clamp(-11px, -0.68vw, -6px) 0 rgba(87, 96, 115, 0.52),
    clamp(-12px, -0.72vw, -6px) clamp(-9px, -0.52vw, -4px) 0 rgba(37, 50, 74, 0.54);
  opacity: 0;
  transform-origin: center;
  animation: menuFlareSmokeTrail 4.6s steps(18, end) infinite;
  will-change: transform, opacity;
}

.menuFlareSmoke b:nth-child(2) {
  --smoke-drift: clamp(18px, 3.2vw, 50px);
  --smoke-rise: clamp(78px, 11.2vw, 176px);
  animation-delay: -0.78s;
  animation-duration: 4.9s;
}

.menuFlareSmoke b:nth-child(3) {
  --smoke-drift: clamp(34px, 5.3vw, 82px);
  --smoke-rise: clamp(62px, 9.7vw, 150px);
  animation-delay: -1.56s;
  animation-duration: 4.35s;
}

.menuFlareSmoke b:nth-child(4) {
  --smoke-drift: clamp(22px, 4vw, 62px);
  --smoke-rise: clamp(88px, 12vw, 188px);
  animation-delay: -2.34s;
  animation-duration: 5.15s;
}

.menuFlareSmoke b:nth-child(5) {
  --smoke-drift: clamp(40px, 5.8vw, 90px);
  --smoke-rise: clamp(72px, 10.8vw, 168px);
  animation-delay: -3.12s;
  animation-duration: 4.75s;
}

.menuFlareSmoke b:nth-child(6) {
  --smoke-drift: clamp(26px, 4.4vw, 68px);
  --smoke-rise: clamp(96px, 12.8vw, 200px);
  animation-delay: -3.9s;
  animation-duration: 5.35s;
}

.menuLight {
  --light-color: #ffac3d;
  --light-duration: 4.8s;
  --light-delay: 0s;
  position: absolute;
  width: clamp(2px, 0.26vw, 4px);
  height: clamp(2px, 0.26vw, 4px);
  background: var(--light-color);
  box-shadow:
    0 0 clamp(3px, 0.65vw, 8px) var(--light-color),
    0 0 clamp(5px, 1vw, 13px) var(--light-color);
  opacity: 0.58;
  animation: menuIndustrialBlink var(--light-duration) steps(2, end) var(--light-delay) infinite;
}

.menuLight01 { top: 71.5%; left: 31.1%; --light-color: #5de6ff; --light-delay: -1.2s; }
.menuLight02 { top: 62.2%; left: 52.3%; --light-duration: 6.2s; --light-delay: -3.8s; }
.menuLight03 { top: 48.7%; left: 60.4%; --light-duration: 5.4s; --light-delay: -2.1s; }
.menuLight04 { top: 57.8%; left: 65.2%; --light-color: #72e9ff; --light-duration: 7.1s; --light-delay: -5.3s; }
.menuLight05 { top: 25.8%; left: 70.6%; --light-color: #65ddff; --light-delay: -3.1s; }
.menuLight06 { top: 41.4%; left: 75.9%; --light-duration: 5.9s; --light-delay: -0.8s; }
.menuLight07 { top: 69.6%; left: 85.6%; --light-color: #5fe5ff; --light-duration: 6.7s; --light-delay: -4.6s; }
.menuLight08 { top: 78.4%; left: 94.8%; --light-duration: 5.1s; --light-delay: -2.9s; }

.startShade {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 4, 16, 0.48) 0%, rgba(0, 5, 16, 0.12) 43%, rgba(0, 4, 13, 0.7) 100%),
    radial-gradient(ellipse at 50% 28%, rgba(2, 9, 25, 0.02) 0 28%, rgba(1, 4, 13, 0.72) 76%);
}

.startContent {
  width: min(90%, 680px);
  padding: clamp(8px, 2vw, 24px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  text-shadow: 3px 3px 0 #02040d, 0 0 22px rgba(0, 0, 0, 0.88);
}

.eyebrow {
  margin: 0 0 clamp(4px, 1vw, 10px);
  color: var(--cyan);
  letter-spacing: clamp(0.12em, 0.42vw, 0.25em);
  font-size: clamp(0.46rem, 1.3vw, 0.78rem);
}

.startContent h1 {
  margin: 0;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: clamp(1.5rem, 6.2vw, 5rem);
  line-height: 0.82;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.startContent h1 span {
  display: block;
}

.startContent h1 .titleHot {
  color: #ffc34e;
  text-shadow:
    3px 3px 0 #6b1d0b,
    6px 6px 0 #02040d,
    0 0 20px rgba(255, 91, 22, 0.62);
}

.startLead {
  margin: clamp(5px, 1.4vw, 13px) 0 clamp(7px, 1.5vw, 15px);
  color: #d6e5ff;
  font-size: clamp(0.55rem, 1.5vw, 0.93rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.startMissionBrief {
  max-width: 620px;
  margin: 0 0 clamp(7px, 1.4vw, 13px);
  color: #aeeeff;
  font-size: clamp(0.45rem, 1.02vw, 0.67rem);
  line-height: 1.45;
  letter-spacing: 0.025em;
  overflow-wrap: anywhere;
}

.languagePicker {
  width: min(90%, 330px);
  margin: 0 0 clamp(8px, 1.6vw, 14px);
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 4px;
  color: #d8eaff;
  text-shadow: 2px 2px 0 #02040d;
}

.languagePickerLabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #9fb5d3;
  font-size: clamp(0.44rem, 0.92vw, 0.62rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.languageSelectFrame {
  position: relative;
  display: block;
  min-height: 44px;
  background: linear-gradient(180deg, rgba(17, 51, 81, 0.96) 0 48%, rgba(5, 20, 41, 0.98) 49% 100%);
  border: 2px solid #6abbdc;
  box-shadow:
    0 4px 0 #020713,
    0 0 0 2px rgba(2, 5, 13, 0.76),
    inset 3px 3px 0 rgba(255, 255, 255, 0.07),
    0 0 18px rgba(49, 166, 218, 0.16);
}

.languageSelectFrame::before {
  position: absolute;
  top: 50%;
  left: 13px;
  content: "◆";
  color: var(--cyan);
  transform: translateY(-50%);
  font-size: 0.58rem;
  pointer-events: none;
}

.languageSelectFrame::after {
  position: absolute;
  top: 50%;
  right: 13px;
  content: "▼";
  color: var(--amber);
  transform: translateY(-50%);
  font-size: 0.62rem;
  pointer-events: none;
}

#languageSelect {
  width: 100%;
  min-height: 44px;
  padding: 8px 36px;
  color: #f4fbff;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  cursor: pointer;
  appearance: none;
  letter-spacing: 0.055em;
  text-align: center;
  text-align-last: center;
  font-size: clamp(0.64rem, 1.35vw, 0.86rem);
}

.languageSelectFrame:hover,
.languageSelectFrame:focus-within {
  border-color: #d4f7ff;
  filter: brightness(1.12);
  box-shadow:
    0 4px 0 #020713,
    0 0 0 2px rgba(2, 5, 13, 0.76),
    inset 3px 3px 0 rgba(255, 255, 255, 0.09),
    0 0 22px rgba(89, 220, 255, 0.25);
}

.pixelButton {
  position: relative;
  min-height: clamp(32px, 5vw, 48px);
  padding: clamp(7px, 1vw, 11px) clamp(15px, 2.8vw, 30px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #d9efff;
  background: #0c2442;
  border: 2px solid #5caed3;
  border-radius: 0;
  box-shadow: 0 4px 0 #06101f, 0 0 0 2px rgba(2, 5, 13, 0.7), 0 0 18px rgba(49, 166, 218, 0.2);
  cursor: pointer;
  letter-spacing: 0.08em;
  font-size: clamp(0.6rem, 1.6vw, 0.98rem);
  line-height: 1.15;
  text-align: center;
  text-align-last: center;
  text-transform: uppercase;
}

.pixelButton > span[aria-hidden="true"]:first-child {
  position: absolute;
  top: 50%;
  left: clamp(7px, 1vw, 12px);
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.pixelButton:has(> span[aria-hidden="true"]:first-child) > span[data-i18n] {
  width: 100%;
  max-width: calc(100% - 2.6em);
  display: block;
  text-align: center;
  text-align-last: center;
}

.menuActionRow {
  width: min(88%, 520px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(6px, 1.2vw, 12px);
}

.menuFeatureRow {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(6px, 1.2vw, 12px);
}

.menuFeatureRow .pixelButton {
  min-width: 0;
  padding-right: clamp(6px, 1.2vw, 12px);
  padding-left: clamp(6px, 1.2vw, 12px);
}

.pixelButtonBriefing {
  color: #dffaff;
  background:
    linear-gradient(90deg, rgba(89, 220, 255, 0.14), transparent 34% 72%, rgba(108, 255, 156, 0.1)),
    linear-gradient(#1a5266 0 47%, #0a2a42 48% 100%);
  border-color: #79e8ff;
  box-shadow: 0 4px 0 #04121e, 0 0 0 2px #02040d, 0 0 20px rgba(89, 220, 255, 0.24);
  text-shadow: 2px 2px 0 #04111d;
}

.pixelButtonBriefing:hover,
.pixelButtonBriefing:focus-visible {
  color: #fff;
  border-color: #c5f7ff;
}

.pixelButtonBriefingIcon {
  color: #83ffaf;
  font-size: 1.12em;
  line-height: 1;
  text-shadow: 0 0 8px rgba(108, 255, 156, 0.5);
}

.menuFeatureRow .pixelButtonHall {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 5px;
  row-gap: 1px;
}

.menuFeatureRow .pixelButtonHallIcon {
  grid-row: 1 / 3;
}

.menuFeatureRow .pixelButtonHall small {
  grid-column: 2;
}

.menuSecondaryRow {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(6px, 1.2vw, 12px);
}

.menuActionRow .pixelButton,
.creditsActionRow .pixelButton {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-right: clamp(8px, 1.8vw, 20px);
  padding-left: clamp(8px, 1.8vw, 20px);
  overflow-wrap: anywhere;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}

.pixelButtonDonate {
  color: #010409;
  background: linear-gradient(#85f0ad 0 47%, #36b97a 48% 100%);
  border-color: #c8ffdb;
  box-shadow: 0 4px 0 #12623f, 0 0 0 2px #031c11, 0 0 18px rgba(71, 224, 143, 0.25);
  text-shadow: none;
}

.pixelButton.pixelButtonDonate:hover,
.pixelButton.pixelButtonDonate:focus-visible {
  color: #010409;
}

.pixelButtonAbout {
  color: #dff8ff;
  background: linear-gradient(#1b5273 0 47%, #0b2948 48% 100%);
  border-color: #8de9ff;
  box-shadow: 0 4px 0 #04101f, 0 0 0 2px #020a14, 0 0 18px rgba(89, 220, 255, 0.2);
}

.pixelButtonAbout > span[aria-hidden="true"] {
  width: 1.35em;
  height: 1.35em;
  display: inline-grid;
  place-items: center;
  color: #04101f;
  background: var(--cyan);
  box-shadow: 2px 2px 0 #07172b;
  font-size: 0.84em;
  line-height: 1;
  text-transform: lowercase;
}

.pwaInstallButton {
  width: 100%;
  color: #d8fff0;
  background: linear-gradient(#174b4a 0 47%, #092c32 48% 100%);
  border-color: #75efc5;
  box-shadow: 0 4px 0 #031316, 0 0 0 2px #020a10, 0 0 18px rgba(117, 239, 197, 0.2);
}

.pixelButtonMultiplayer {
  position: relative;
  flex-direction: column;
  gap: 2px;
}

.pixelButtonMultiplayer small {
  display: block;
  color: #7890b0;
  font-size: 0.58em;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.menuMultiplayerLive {
  position: absolute;
  top: 3px;
  right: 4px;
  padding: 2px 4px;
  color: #04140d;
  background: #65ef91;
  box-shadow: 1px 1px 0 #03100a;
  font-size: 0.46em;
  line-height: 1;
  letter-spacing: 0.04em;
}

.menuMultiplayerLive[hidden] {
  display: none;
}

.pixelButtonHall {
  color: #fff7c7;
  background:
    linear-gradient(90deg, rgba(255, 229, 112, 0.12), transparent 28% 72%, rgba(255, 229, 112, 0.12)),
    linear-gradient(#47376f 0 47%, #211b49 48% 100%);
  border-color: #ffe570;
  box-shadow: 0 4px 0 #0c0920, 0 0 0 2px #02040d, 0 0 20px rgba(255, 213, 80, 0.22);
  text-shadow: 2px 2px 0 #080511;
}

.pixelButtonHall:hover,
.pixelButtonHall:focus-visible {
  color: #fff;
  border-color: #fff4a8;
}

.pixelButtonHallIcon {
  color: #ffe570;
  font-size: 1.15em;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 229, 112, 0.54);
}

.pixelButtonHall small {
  color: #b9dfff;
  font-size: 0.58em;
  line-height: 1.1;
  letter-spacing: 0.08em;
}

.pixelButton:disabled,
.pixelButton[aria-disabled="true"] {
  color: #8092ab;
  background: linear-gradient(#172942 0 47%, #0a172a 48% 100%);
  border-color: #405b7b;
  box-shadow: 0 4px 0 #030914, 0 0 0 2px rgba(2, 5, 13, 0.7), inset 2px 2px 0 rgba(255, 255, 255, 0.035);
  cursor: not-allowed;
  filter: saturate(0.72);
  transform: none;
}

.pixelButtonPrimary {
  color: #010409;
  background: linear-gradient(#ffd35c 0 47%, #f59327 48% 100%);
  border-color: #fff0a0;
  box-shadow: 0 5px 0 #8a2c0e, 0 0 0 2px #250a04, 0 0 24px rgba(255, 109, 30, 0.52);
  text-shadow: none;
}

.pixelButton:hover,
.pixelButton:focus-visible {
  color: #fff;
  border-color: #fff;
  filter: brightness(1.12);
  transform: translateY(-1px);
  outline: none;
}

.pixelButtonPrimary:hover,
.pixelButtonPrimary:focus-visible {
  color: #010409;
}

.pixelButton:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #06101f, 0 0 0 2px rgba(2, 5, 13, 0.7);
}

.pixelButton:disabled:hover,
.pixelButton:disabled:active,
.pixelButton:disabled:focus-visible {
  color: #8092ab;
  border-color: #405b7b;
  filter: saturate(0.72);
  transform: none;
  outline: none;
  box-shadow: 0 4px 0 #030914, 0 0 0 2px rgba(2, 5, 13, 0.7), inset 2px 2px 0 rgba(255, 255, 255, 0.035);
}

.instructions {
  margin-top: clamp(8px, 2vw, 18px);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(5px, 1.2vw, 12px);
  color: #b7c5dc;
  font-size: clamp(0.43rem, 1.05vw, 0.68rem);
  letter-spacing: 0.035em;
}

.instructions > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

kbd {
  min-width: 20px;
  min-height: 21px;
  padding: 3px 6px;
  color: #e3f9ff;
  background: linear-gradient(#163252 0 48%, #0a1a32 49% 100%);
  border: 1px solid #79add3;
  box-shadow: 0 3px 0 #02040d, inset 1px 1px 0 rgba(255, 255, 255, 0.13);
  font: inherit;
  line-height: 1.15;
  text-align: center;
}

.fictionNotice {
  max-width: 600px;
  margin: clamp(7px, 1.6vw, 15px) 0 0;
  color: #93a4bd;
  font-size: clamp(0.39rem, 0.86vw, 0.59rem);
  line-height: 1.35;
  letter-spacing: 0.03em;
}

.menuFooter {
  position: absolute;
  left: max(7px, var(--safe-left));
  right: max(7px, var(--safe-right));
  bottom: max(7px, var(--safe-bottom));
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  pointer-events: none;
}

.menuMusicCredit,
.buildVersion {
  margin: 0;
  padding: 3px 6px;
  background: rgba(2, 7, 19, 0.76);
  border: 1px solid rgba(106, 187, 220, 0.38);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  font-size: clamp(0.36rem, 0.72vw, 0.5rem);
  line-height: 1.1;
  text-shadow: 1px 1px 0 #02040d;
  pointer-events: auto;
}

.menuMusicCredit {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 130px);
  color: #d9f7ff;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.buildVersion {
  flex: 0 0 auto;
  color: #9eb0c8;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.buildVersionNumber {
  color: #d9f7ff;
}

.startPrivacyLink {
  padding: 3px 1px;
  color: #78dcfa;
  text-underline-offset: 0.18em;
}

.startPrivacyLink:hover,
.startPrivacyLink:focus-visible {
  color: #fff1ad;
  outline: 1px solid currentColor;
  outline-offset: 1px;
}

.menuMusicCredit:hover,
.menuMusicCredit:focus-visible {
  color: #fff1ad;
  border-color: currentColor;
  outline: 1px solid currentColor;
  outline-offset: 1px;
}

.aboutModal {
  position: fixed;
  z-index: 1200;
  inset: 0;
  padding:
    max(12px, calc(var(--safe-top) + 8px))
    max(12px, calc(var(--safe-right) + 8px))
    max(12px, calc(var(--safe-bottom) + 8px))
    max(12px, calc(var(--safe-left) + 8px));
  display: grid;
  place-items: center;
  isolation: isolate;
}

.aboutBackdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(8, 20, 40, 0.11) 0 2px, rgba(0, 0, 0, 0.08) 2px 4px),
    rgba(1, 4, 13, 0.91);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.aboutDialog {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  max-height: min(720px, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px));
  min-height: 0;
  padding: clamp(16px, 3.5vw, 30px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 20px);
  color: #eaf7ff;
  background:
    linear-gradient(135deg, rgba(89, 220, 255, 0.07), transparent 38%),
    linear-gradient(180deg, #0d2442 0 48%, #06152b 49% 100%);
  border: 3px solid #7fdcf2;
  border-radius: 0;
  box-shadow:
    0 8px 0 #02050d,
    0 0 0 3px #06101f,
    inset 4px 4px 0 rgba(255, 255, 255, 0.055),
    0 0 46px rgba(46, 185, 237, 0.24);
  text-align: left;
  text-shadow: 2px 2px 0 #02050d;
  animation: aboutDialogIn 150ms steps(3, end) both;
}

.aboutDialog::before,
.aboutDialog::after {
  position: absolute;
  width: 12px;
  height: 12px;
  content: "";
  background: var(--amber);
  box-shadow: 0 0 10px rgba(255, 177, 59, 0.5);
}

.aboutDialog::before {
  top: 6px;
  left: 6px;
}

.aboutDialog::after {
  right: 6px;
  bottom: 6px;
}

.aboutDialog:focus {
  outline: none;
}

.aboutDialog:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

.aboutDialogHeader {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aboutDialogIcon {
  flex: 0 0 auto;
  width: clamp(30px, 6vw, 42px);
  height: clamp(30px, 6vw, 42px);
  display: grid;
  place-items: center;
  color: #04101f;
  background: var(--cyan);
  border: 2px solid #dffaff;
  box-shadow: 3px 3px 0 #04101f, 0 0 16px rgba(89, 220, 255, 0.3);
  font-size: clamp(0.9rem, 2.5vw, 1.25rem);
  line-height: 1;
  text-shadow: none;
}

.aboutDialog h2 {
  min-width: 0;
  margin: 0;
  color: #fff0a0;
  font-size: clamp(1rem, 3.6vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: 0.055em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.aboutDialogBody {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(52dvh, 420px);
  padding: clamp(10px, 2.4vw, 18px);
  overflow-x: hidden;
  overflow-y: auto;
  color: #c5d8ee;
  background: rgba(2, 9, 22, 0.66);
  border: 2px solid rgba(89, 220, 255, 0.28);
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.24);
  font-size: clamp(0.68rem, 1.8vw, 0.92rem);
  line-height: 1.65;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
  scrollbar-color: var(--cyan) #06152b;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.aboutDialogBody p {
  margin: 0;
}

.aboutDialogBody p + p {
  margin-top: 1em;
}

.aboutDialogBody .aboutDisclaimerLead {
  color: #fff;
  font-size: 1.06em;
  line-height: 1.5;
}

.aboutDialogBody .aboutGenreTitle {
  color: #ffca55;
  font-size: 0.92em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.aboutPrivacyLink a {
  color: #75e4ff;
  text-underline-offset: 0.2em;
}

.aboutPrivacyLink a:hover,
.aboutPrivacyLink a:focus-visible {
  color: #fff1ad;
}

.aboutCloseButton {
  width: min(100%, 250px);
  min-height: 48px;
  margin: 0 auto;
  flex: 0 0 auto;
}

.aboutCloseButton:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.hallMenuDialog {
  width: min(100%, 780px);
  max-height: min(760px, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px));
  overflow: hidden;
}

.hallMenuHeader {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hallMenuHeading,
.hallMenuHeading > div {
  min-width: 0;
}

.hallMenuIcon {
  color: #22133d;
  background: #ffe570;
  border-color: #fff8c8;
  box-shadow: 3px 3px 0 #140b29, 0 0 18px rgba(255, 229, 112, 0.34);
}

.hallMenuDialog > .hallCasualNote {
  margin: 0;
  font-size: clamp(0.48rem, 1.1vw, 0.64rem);
}

.hallMenuTableWrap {
  min-height: 130px;
  height: clamp(180px, 48dvh, 440px);
}

.hallMenuTableWrap:focus-visible {
  border-color: #fff;
  outline: 2px solid #ffe570;
  outline-offset: 3px;
}

.hallMenuDialog .hallMenuStatus {
  min-height: 1.35em;
  margin: 0;
}

.hallMenuCloseButton {
  margin-top: 0;
}

@keyframes aboutDialogIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.settingsCard {
  width: min(100%, 560px);
}

.settingsIcon {
  color: #051525;
  background: linear-gradient(#ffdd72 0 48%, #f29b2b 49% 100%);
  border-color: #fff1ae;
  box-shadow: 3px 3px 0 #3d1708, 0 0 18px rgba(255, 177, 59, 0.32);
  font-size: clamp(1.05rem, 2.8vw, 1.4rem);
}

.settingsBody {
  max-height: min(56dvh, 390px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.5vw, 20px);
  overflow-y: auto;
}

.settingsControlHeader {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.settingsControlLabel {
  min-width: 0;
  color: #f4f9ff;
  font-size: clamp(0.72rem, 2vw, 0.96rem);
  line-height: 1.35;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.brightnessValue {
  flex: 0 0 auto;
  min-width: 74px;
  padding: 7px 9px;
  color: #06101f;
  background: linear-gradient(#bdf4ff 0 48%, #55c9ed 49% 100%);
  border: 2px solid #e4fbff;
  box-shadow: 3px 3px 0 #03101f, 0 0 14px rgba(89, 220, 255, 0.22);
  font-size: clamp(0.72rem, 2vw, 0.94rem);
  line-height: 1;
  text-align: center;
  text-shadow: none;
}

.brightnessControl {
  min-width: 0;
  padding: 2px 2px 0;
}

.brightnessSlider {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0;
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  cursor: pointer;
  appearance: none;
  touch-action: pan-x;
}

.brightnessSlider::-webkit-slider-runnable-track {
  height: 14px;
  background:
    linear-gradient(90deg, #07142a 0 48%, #173c5c 49% 51%, #ffb13b 52% 100%);
  border: 2px solid #6fc6e6;
  border-radius: 0;
  box-shadow: 0 3px 0 #020713, inset 2px 2px 0 rgba(0, 0, 0, 0.38);
}

.brightnessSlider::-webkit-slider-thumb {
  width: 26px;
  height: 34px;
  margin-top: -12px;
  background: linear-gradient(#fff2a3 0 47%, #ffad31 48% 100%);
  border: 3px solid #fff8d1;
  border-radius: 0;
  box-shadow: 3px 3px 0 #5b2109, 0 0 13px rgba(255, 177, 59, 0.38);
  appearance: none;
}

.brightnessSlider::-moz-range-track {
  height: 10px;
  background:
    linear-gradient(90deg, #07142a 0 48%, #173c5c 49% 51%, #ffb13b 52% 100%);
  border: 2px solid #6fc6e6;
  border-radius: 0;
  box-shadow: 0 3px 0 #020713, inset 2px 2px 0 rgba(0, 0, 0, 0.38);
}

.brightnessSlider::-moz-range-thumb {
  width: 22px;
  height: 30px;
  background: linear-gradient(#fff2a3 0 47%, #ffad31 48% 100%);
  border: 3px solid #fff8d1;
  border-radius: 0;
  box-shadow: 3px 3px 0 #5b2109, 0 0 13px rgba(255, 177, 59, 0.38);
}

.brightnessSlider:hover::-webkit-slider-thumb,
.brightnessSlider:focus-visible::-webkit-slider-thumb {
  filter: brightness(1.12);
  box-shadow: 3px 3px 0 #5b2109, 0 0 20px rgba(255, 209, 75, 0.68);
}

.brightnessSlider:hover::-moz-range-thumb,
.brightnessSlider:focus-visible::-moz-range-thumb {
  filter: brightness(1.12);
  box-shadow: 3px 3px 0 #5b2109, 0 0 20px rgba(255, 209, 75, 0.68);
}

.brightnessSlider:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.brightnessScale {
  margin-top: -3px;
  display: flex;
  justify-content: space-between;
  color: #7f98b8;
  font-size: clamp(0.48rem, 1.4vw, 0.64rem);
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 #02050d;
}

.settingsHint {
  margin: 0;
  color: #a9bed9;
  font-size: clamp(0.62rem, 1.7vw, 0.82rem);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.settingsVolumeHeader {
  margin-top: clamp(12px, 2.2vw, 20px);
}

.settingsActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 14px);
}

.settingsActions .pixelButton {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding-right: 10px;
  padding-left: 10px;
  overflow-wrap: anywhere;
}

.settingsResetButton {
  color: #dff8ff;
  background: linear-gradient(#1b5273 0 47%, #0b2948 48% 100%);
  border-color: #8de9ff;
  box-shadow: 0 4px 0 #04101f, 0 0 0 2px #020a14, 0 0 18px rgba(89, 220, 255, 0.2);
}

.loadingIndicator {
  position: absolute;
  z-index: 35;
  inset: 0;
  place-content: center;
  gap: 8px;
  color: var(--cyan);
  background: rgba(2, 5, 14, 0.9);
  letter-spacing: 0.13em;
  text-align: center;
  font-size: clamp(0.55rem, 1.3vw, 0.82rem);
}

.loadingIndicator:not([hidden]) {
  display: grid;
}

.loadingPixels {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.loadingPixels i {
  width: 7px;
  height: 7px;
  background: currentColor;
  animation: loadingPixel 900ms steps(2, end) infinite;
}

.loadingPixels i:nth-child(2) {
  animation-delay: 150ms;
}

.loadingPixels i:nth-child(3) {
  animation-delay: 300ms;
}

.resultScreen {
  padding: clamp(8px, 2vw, 22px);
  overflow: auto;
  background:
    radial-gradient(circle at 50% 42%, rgba(158, 22, 22, 0.2), transparent 44%),
    rgba(2, 4, 12, 0.9);
  backdrop-filter: blur(2px);
}

.resultLayout {
  width: min(96%, 1080px);
  max-height: 96%;
  display: grid;
  grid-template-columns: minmax(300px, 0.84fr) minmax(410px, 1.16fr);
  align-items: stretch;
  gap: clamp(10px, 1.8vw, 20px);
}

.resultCard {
  width: 100%;
  padding: clamp(14px, 3.4vw, 34px);
  text-align: center;
  background: rgba(4, 10, 23, 0.92);
  border: 2px solid #713044;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.68), inset 0 0 28px rgba(255, 48, 48, 0.055);
}

.resultCard h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.25rem, 4.8vw, 3.1rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 3px 3px 0 #6e1017;
}

.dangerText {
  color: #ff7880;
}

.resultQuip {
  margin: clamp(6px, 1.4vw, 13px) 0;
  color: #aebdd4;
  font-size: clamp(0.55rem, 1.4vw, 0.85rem);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.resultQuip strong,
.resultQuip span {
  display: block;
}

.resultQuip strong {
  color: #f5f7ff;
}

.gameOverStatus {
  max-width: 100%;
  margin: 0 auto clamp(8px, 1.7vw, 15px);
  color: #8094b2;
  font-size: clamp(0.43rem, 1vw, 0.65rem);
  line-height: 1.4;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.gameOverStatus strong {
  color: #7ee6a6;
}

.resultScore {
  margin: 0 auto clamp(10px, 2.4vw, 22px);
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
}

.resultScore span,
.creditsResult > div:not(.creditsActionRow) > span {
  color: #7187a8;
  letter-spacing: 0.12em;
  font-size: clamp(0.45rem, 1vw, 0.66rem);
}

.resultScore strong {
  color: var(--amber);
  font-size: clamp(0.9rem, 2.7vw, 1.65rem);
}

.resultStats {
  margin: 0 auto clamp(8px, 1.8vw, 16px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(5px, 1.4vw, 12px);
}

.resultMetric {
  min-width: 0;
  padding: clamp(5px, 1vw, 8px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(2, 7, 19, 0.72);
  border: 1px solid rgba(118, 176, 224, 0.26);
}

.resultMetric span {
  color: #7187a8;
  letter-spacing: 0.08em;
  font-size: clamp(0.38rem, 0.85vw, 0.56rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.resultMetric strong {
  color: #fff1ad;
  font-size: clamp(0.7rem, 2vw, 1.2rem);
  line-height: 1.1;
}

.newBestNotice {
  margin: -6px 0 8px;
  color: #7dffac;
  letter-spacing: 0.08em;
  font-size: clamp(0.42rem, 0.9vw, 0.6rem);
  text-shadow: 0 0 8px rgba(81, 255, 137, 0.38);
}

.resultActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(6px, 1.3vw, 10px);
}

.resultActions .pixelButton {
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  text-align: center;
  text-align-last: center;
}

.pixelButtonShare {
  color: #010409;
  background: linear-gradient(#8fefff 0 47%, #43bfe2 48% 100%);
  border-color: #d5fbff;
  box-shadow: 0 4px 0 #14627d, 0 0 0 1px #06131a;
  text-shadow: none;
}

.pixelButtonShare:hover,
.pixelButtonShare:focus-visible {
  color: #010409;
  background: linear-gradient(#c5f8ff 0 47%, #67d5ef 48% 100%);
}

/* Result labels normally use muted blue, but action-button labels must keep
   the high-contrast dark ink defined by their colorful parent buttons. */
.pixelButtonPrimary > span,
.pixelButtonShare > span,
.pixelButtonDonate > span,
.hallSubmitButton > span {
  color: inherit;
}

.pixelButtonShare[aria-busy="true"] {
  opacity: 0.62;
  cursor: wait;
  pointer-events: none;
}

.shareStatus {
  min-height: 1.25em;
  margin: 6px 0 0;
  color: #9deeff;
  font-size: clamp(0.4rem, 0.85vw, 0.56rem);
  line-height: 1.25;
}

.creditsScreen {
  overflow: hidden;
  background: #01030a;
  perspective: 430px;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: stretch;
  gap: clamp(4px, 0.8vw, 9px);
  padding: 4% 3% 3%;
}

/* The inner surface becomes the single scroll owner on short landscape
   screens. `display: contents` keeps the established desktop/portrait grid
   unchanged at every other breakpoint. */
.creditsScrollSurface {
  display: contents;
}

.creditsScrollEdge {
  display: none;
}

.creditsStars,
.creditsStars::before,
.creditsStars::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 27% 72%, #7dd9ff 0 1px, transparent 1.5px),
    radial-gradient(circle at 43% 31%, #fff5c6 0 1px, transparent 1.5px),
    radial-gradient(circle at 61% 82%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 79% 24%, #84bbff 0 1px, transparent 1.5px),
    radial-gradient(circle at 91% 62%, #fff 0 1px, transparent 1.5px);
  background-size: 137px 119px;
}

.creditsStars::before {
  opacity: 0.48;
  transform: translate(31px, 18px) scale(0.75);
}

.creditsStars::after {
  opacity: 0.3;
  transform: translate(-39px, 47px) scale(0.54);
}

.creditsViewport {
  position: relative;
  width: min(76%, 780px);
  min-height: 0;
  justify-self: center;
  overflow: hidden;
  transform-origin: 50% 100%;
  transform: rotateX(27deg);
}

.creditsCrawl {
  padding-top: 7%;
  color: #ffd76a;
  text-align: center;
  text-shadow: 2px 2px 0 #391902, 0 0 10px rgba(255, 183, 55, 0.22);
  animation: creditsRise 22s linear both;
  overflow-wrap: anywhere;
}

.creditsCrawl .eyebrow {
  color: var(--cyan);
  font-size: clamp(0.62rem, 1.45vw, 0.9rem);
}

.creditsCrawl h2 {
  margin: 0 0 0.85em;
  font-size: clamp(1rem, 2.6vw, 1.8rem);
  line-height: 1.28;
}

.creditsCrawl p:not(.eyebrow) {
  margin: 0 0 0.7em;
  font-size: clamp(0.68rem, 1.65vw, 1.05rem);
  line-height: 1.5;
}

.crawlLine {
  white-space: pre-line;
}

.crawlDivider {
  width: min(80%, 230px);
  height: 2px;
  margin: 1.4em auto;
  display: block;
  background: linear-gradient(90deg, transparent, rgba(89, 220, 255, 0.82), transparent);
  box-shadow: 0 0 10px rgba(89, 220, 255, 0.28);
}

.creditsFooter {
  position: relative;
  z-index: 3;
  width: 100%;
  display: block;
}

.creditsResult {
  display: flex;
  align-items: end;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 3.5vw, 42px);
  padding: 7px 9px;
  background: rgba(1, 3, 10, 0.88);
}

.creditsResult > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.creditsResult strong {
  color: #fff1ad;
  font-size: clamp(0.82rem, 1.75vw, 1.15rem);
}

.creditsResult .pixelButton {
  min-height: 44px;
  padding: 6px 13px;
  font-size: clamp(0.62rem, 1.15vw, 0.78rem);
}

.creditsResult > .creditsActionRow {
  display: inline-flex;
  align-items: stretch;
  flex-direction: row;
  gap: clamp(6px, 1.2vw, 12px);
}

.creditsShareStatus {
  width: 100%;
  margin: -4px 0 0;
  flex-basis: 100%;
  text-align: center;
}

.creditsBestNotice {
  width: 100%;
  margin: -3px 0;
  flex-basis: 100%;
  text-align: center;
}

.hallPanel,
.hallEntryPanel {
  min-width: 0;
  color: #d8e9ff;
  background:
    linear-gradient(135deg, rgba(25, 80, 107, 0.12), transparent 42%),
    rgba(2, 8, 20, 0.96);
  border: 2px solid rgba(89, 220, 255, 0.56);
  box-shadow:
    6px 6px 0 rgba(0, 0, 0, 0.62),
    inset 0 0 28px rgba(61, 196, 255, 0.045);
}

.hallPanel {
  padding: clamp(10px, 1.4vw, 16px);
  display: flex;
  flex-direction: column;
}

.hallPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hallPanelHeader h3,
.hallEntryHeading h3 {
  margin: 1px 0 0;
  color: #fff1ad;
  font-size: clamp(0.85rem, 1.7vw, 1.2rem);
  line-height: 1.1;
  letter-spacing: 0.055em;
  text-shadow: 2px 2px 0 #4d2502;
}

.hallEyebrow {
  margin: 0;
  color: var(--cyan);
  font-size: clamp(0.43rem, 0.75vw, 0.56rem);
  line-height: 1.2;
  letter-spacing: 0.13em;
}

.hallRefreshButton {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: var(--cyan);
  background: #09223d;
  border: 1px solid #58caed;
  border-radius: 0;
  box-shadow: 0 3px 0 #020814;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
}

.hallRefreshButton:hover,
.hallRefreshButton:focus-visible {
  color: #07141d;
  background: var(--cyan);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.hallRefreshButton[aria-busy="true"] {
  opacity: 0.56;
  cursor: wait;
}

.hallQualificationNote,
.hallCasualNote,
.hallEntryLead,
.hallPrivacyNote,
.hallStatus,
.hallSubmitStatus {
  overflow-wrap: anywhere;
}

.hallQualificationNote {
  margin: 7px 0 8px;
  color: #9db0ca;
  font-size: clamp(0.44rem, 0.78vw, 0.58rem);
  line-height: 1.4;
}

.hallCasualNote {
  margin: 0 0 7px;
  color: #6f87a5;
  font-size: clamp(0.38rem, 0.64vw, 0.49rem);
  line-height: 1.35;
}

.hallTableWrap {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  border: 1px solid rgba(126, 195, 234, 0.25);
  background: rgba(0, 3, 11, 0.74);
  scrollbar-color: #297da2 #020711;
  scrollbar-width: thin;
}

.hallPanelGameOver .hallTableWrap {
  height: clamp(180px, 34vh, 340px);
}

.hallTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #dbeaff;
  font-size: clamp(0.44rem, 0.73vw, 0.59rem);
  line-height: 1.25;
}

.hallTable th,
.hallTable td {
  height: clamp(22px, 2.7vh, 29px);
  padding: 4px 5px;
  overflow: hidden;
  border-bottom: 1px solid rgba(92, 155, 194, 0.16);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hallTable th {
  position: sticky;
  z-index: 1;
  top: 0;
  color: #6edfff;
  background: #071a30;
  border-bottom-color: rgba(89, 220, 255, 0.48);
  letter-spacing: 0.04em;
}

.hallTable th:nth-child(1),
.hallTable td:nth-child(1) {
  width: 8%;
  color: #718aa8;
  text-align: center;
}

.hallTable th:nth-child(2),
.hallTable td:nth-child(2) {
  width: 40%;
  text-align: left;
}

.hallTable th:nth-child(3),
.hallTable td:nth-child(3) {
  width: 24%;
  text-align: center;
}

.hallTable th:nth-child(4),
.hallTable td:nth-child(4) {
  width: 28%;
  color: #fff1ad;
}

.hallTable tbody tr:nth-child(even) {
  background: rgba(23, 67, 94, 0.12);
}

.hallTable tbody tr[data-current="true"] {
  background: rgba(55, 194, 130, 0.16);
  box-shadow: inset 3px 0 0 #54e59e;
}

.hallPlaceholder td {
  height: 70px;
  color: #8298b5 !important;
  text-align: center !important;
  white-space: normal;
}

.hallStatus,
.hallSubmitStatus {
  min-height: 1.25em;
  margin: 7px 0 0;
  color: #8ddff6;
  font-size: clamp(0.42rem, 0.72vw, 0.56rem);
  line-height: 1.3;
}

.hallStatus[data-tone="error"],
.hallSubmitStatus[data-tone="error"] {
  color: #ff9b9b;
}

.hallSubmitStatus[data-tone="success"] {
  color: #7dffac;
}

.creditsHallLayout {
  width: min(100%, 980px);
  margin: clamp(7px, 1.1vw, 12px) auto 0;
  display: grid;
  grid-template-columns: minmax(250px, 0.78fr) minmax(390px, 1.22fr);
  align-items: stretch;
  gap: clamp(8px, 1.2vw, 14px);
}

.hallEntryPanel {
  padding: clamp(9px, 1.2vw, 14px);
  display: flex;
  flex-direction: column;
}

.hallEntryPanel[hidden] {
  display: none;
}

.hallAssistedNotice {
  justify-content: center;
  gap: clamp(9px, 1.5vw, 16px);
  border-color: rgba(255, 190, 88, 0.72);
  background:
    linear-gradient(135deg, rgba(255, 151, 46, 0.12), transparent 48%),
    rgba(2, 8, 20, 0.96);
}

.hallAssistedNoticeText {
  margin: 0;
  color: #ffd39a;
  font-size: clamp(0.5rem, 0.9vw, 0.68rem);
  line-height: 1.55;
}

.hallEntryLead {
  min-height: 1.3em;
  margin: 5px 0 7px;
  color: #9eb5d2;
  font-size: clamp(0.42rem, 0.72vw, 0.55rem);
  line-height: 1.35;
}

.hallEntryLead[data-tone="eligible"] {
  color: #7dffac;
}

.hallEntryLead[data-tone="ineligible"],
.hallEntryLead[data-tone="error"] {
  color: #ffae8d;
}

.hallProfileSummary {
  min-width: 0;
  min-height: 48px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #e8f7ff;
  background: linear-gradient(180deg, rgba(18, 55, 82, 0.9), rgba(5, 22, 42, 0.96));
  border: 2px solid #4b91b6;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.035), 0 3px 0 #02050d;
}

.hallProfileGlyph {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  color: #07101d;
  background: linear-gradient(180deg, #8ff5ff 0 48%, #3da8e8 49% 100%);
  border: 2px solid #d9fbff;
  box-shadow: 2px 2px 0 #02050d;
  font-size: 0.72rem;
}

.hallProfileSummaryText {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: baseline;
}

.hallProfileSummaryLabel {
  grid-column: 1 / -1;
  color: #82dcf7;
  font-size: clamp(0.38rem, 0.62vw, 0.49rem);
  letter-spacing: 0.08em;
}

.hallProfileSummary strong {
  min-width: 0;
  color: #fff3ac;
  font-size: clamp(0.57rem, 0.9vw, 0.72rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hallProfileSummary [data-hall-profile-country] {
  color: #a9c1d9;
  font-size: clamp(0.42rem, 0.68vw, 0.54rem);
  white-space: nowrap;
}

.hallEntryFields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px;
}

.hallField {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #7f9bbd;
  font-size: clamp(0.39rem, 0.66vw, 0.51rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.hallField input,
.hallField select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
  color: #f4fbff;
  background: #07182d;
  border: 1px solid #4ca4cc;
  border-radius: 0;
  outline: 0;
  font: inherit;
  font-size: clamp(0.54rem, 0.88vw, 0.68rem);
}

.hallField input:focus,
.hallField select:focus {
  border-color: #d4f7ff;
  box-shadow: 0 0 0 2px rgba(89, 220, 255, 0.22);
}

.hallField input::placeholder {
  color: #647b99;
  opacity: 1;
}

.hallPrivacyNote {
  margin: 5px 0 7px;
  color: #7188a6;
  font-size: clamp(0.37rem, 0.61vw, 0.48rem);
  line-height: 1.35;
}

.hallPrivacyNote a {
  color: #78dcfa;
}

.hallSubmitButton {
  width: 100%;
  min-height: 40px;
  margin-top: auto;
  padding: 7px 10px;
  color: #010409;
  background: linear-gradient(#8df3b5 0 47%, #3bc783 48% 100%);
  border-color: #ccffdf;
  box-shadow: 0 4px 0 #12623f, 0 0 0 1px #031c11;
  font-size: clamp(0.57rem, 0.92vw, 0.7rem);
  text-shadow: none;
}

.hallSubmitButton:not(:disabled):hover,
.hallSubmitButton:not(:disabled):focus-visible {
  color: #010409;
}

.hallSubmitButton[aria-busy="true"] {
  cursor: wait;
}

.hallPanelCredits .hallTableWrap {
  height: clamp(124px, 20vh, 205px);
}

.pauseModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding:
    calc(var(--safe-top) + 12px)
    calc(var(--safe-right) + 12px)
    calc(var(--safe-bottom) + 12px)
    calc(var(--safe-left) + 12px);
  place-items: center;
  color: #f7f4df;
  background:
    radial-gradient(circle at 50% 45%, rgba(23, 85, 113, 0.23), transparent 46%),
    rgba(1, 4, 13, 0.88);
  border: 0;
  backdrop-filter: blur(3px);
}

.pauseModal[open] {
  display: grid;
}

.pauseModal::backdrop {
  background: rgba(1, 4, 13, 0.56);
}

.pauseCard {
  width: min(88vw, 430px);
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);
  overflow-y: auto;
  padding: clamp(18px, 5vw, 34px);
  text-align: center;
  background: rgba(4, 12, 27, 0.97);
  border: 2px solid rgba(89, 220, 255, 0.68);
  box-shadow:
    7px 7px 0 rgba(0, 0, 0, 0.68),
    inset 0 0 34px rgba(89, 220, 255, 0.06),
    0 0 28px rgba(42, 172, 214, 0.12);
}

.pauseCard .eyebrow {
  margin-bottom: 8px;
  color: var(--cyan);
}

.pauseCard h2 {
  margin: 0;
  color: #fff1ad;
  font-size: clamp(1.35rem, 6vw, 2.65rem);
  text-shadow: 3px 3px 0 #64400c;
}

.pauseCard > p:not(.eyebrow):not(.pauseHint) {
  margin: 12px auto 18px;
  color: #b6c8df;
  font-size: clamp(0.58rem, 2.3vw, 0.82rem);
  line-height: 1.5;
}

.pauseCard .pixelButton {
  min-width: min(100%, 220px);
  min-height: 48px;
}

.pauseCoopPanel {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding: 10px;
  text-align: left;
  background: rgba(5, 32, 42, 0.72);
  border: 1px solid rgba(101, 239, 145, 0.5);
  box-shadow: inset 3px 0 0 #65ef91;
}

.pauseCoopPanel[hidden] {
  display: none;
}

.pauseCoopEyebrow,
.pauseCoopStatus,
.pauseCoopHint {
  margin: 0;
}

.pauseCoopEyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #65ef91;
  font-size: clamp(0.46rem, 1.7vw, 0.62rem);
  letter-spacing: 0.09em;
}

.pauseCoopPeopleIcon {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  width: 28px;
  height: 20px;
  flex: 0 0 28px;
  filter: drop-shadow(0 0 4px rgba(101, 239, 145, 0.45));
}

.pauseCoopPeopleIcon > span {
  position: relative;
  display: block;
  width: 7px;
  height: 8px;
  background: #65ef91;
  border: 1px solid #d9fff0;
  box-shadow: inset 0 -2px 0 #2b9e70;
}

.pauseCoopPeopleIcon > span::before {
  content: "";
  position: absolute;
  left: 1px;
  top: -7px;
  width: 3px;
  height: 4px;
  background: #baffdf;
  border: 1px solid #effff7;
}

.pauseCoopPeopleIcon > span:nth-child(2) {
  height: 11px;
}

.pauseCoopPeopleIcon > span:nth-child(2)::before {
  top: -8px;
  height: 5px;
}

.pauseCoopStatus {
  color: #effff7;
  font-size: clamp(0.55rem, 2vw, 0.74rem);
  line-height: 1.35;
}

.pauseCoopHint {
  color: #91a9bd;
  font-size: clamp(0.43rem, 1.55vw, 0.58rem);
  line-height: 1.4;
}

.pauseCoopActions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 8px;
}

.pauseCard .pauseCoopButton {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 7px 9px;
  font-size: clamp(0.46rem, 1.8vw, 0.62rem);
}

.pauseHint {
  margin: 12px 0 0;
  color: #6f84a4;
  font-size: clamp(0.44rem, 1.8vw, 0.62rem);
}

body[data-game-paused="true"] .touchControls {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.touchControls {
  position: fixed;
  z-index: 45;
  right: max(15px, calc(var(--safe-right) + 7px));
  bottom: max(14px, calc(var(--safe-bottom) + 7px));
  left: max(15px, calc(var(--safe-left) + 7px));
  display: none;
  align-items: end;
  justify-content: space-between;
  pointer-events: none;
}

/* Keep iOS long presses in the game instead of opening the text-selection or
   image callout UI. This is deliberately scoped to the gameplay controls so
   text in About, Settings and other informational surfaces stays selectable. */
.touchControls,
.touchControls button,
.touchControls button * {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.touchCluster {
  display: flex;
  align-items: end;
  gap: clamp(10px, 2.4vw, 16px);
}

.touchControls button {
  position: relative;
  width: clamp(62px, 14vw, 80px);
  height: clamp(60px, 13vw, 76px);
  padding: 7px 4px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  color: #e6faff;
  background: linear-gradient(180deg, rgba(27, 69, 108, 0.18) 0 48%, rgba(8, 31, 59, 0.24) 49% 100%);
  border: 2px solid rgba(135, 217, 247, 0.48);
  border-radius: 0;
  outline: 2px solid rgba(2, 7, 18, 0.42);
  outline-offset: 0;
  box-shadow:
    0 6px 0 2px rgba(1, 4, 11, 0.38),
    inset 3px 3px 0 rgba(255, 255, 255, 0.06),
    inset -3px -3px 0 rgba(0, 0, 0, 0.16),
    0 0 18px rgba(44, 183, 240, 0.07);
  backdrop-filter: blur(1px);
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.62);
}

.touchControls button::before {
  position: absolute;
  content: "";
  inset: 4px;
  border: 1px solid rgba(217, 246, 255, 0.12);
  pointer-events: none;
}

.touchControls button::after {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 5px;
  height: 5px;
  content: "";
  background: rgba(235, 252, 255, 0.22);
  box-shadow: -4px 0 0 rgba(235, 252, 255, 0.08);
  pointer-events: none;
}

.touchIcon {
  position: relative;
  z-index: 1;
  opacity: 1;
  font-size: clamp(1.5rem, 5.4vw, 2rem);
  font-weight: 900;
  line-height: 0.85;
}

.touchLabel {
  position: relative;
  z-index: 1;
  opacity: 1;
  max-width: 100%;
  color: #bfeeff;
  font-size: clamp(0.5rem, 1.75vw, 0.66rem);
  line-height: 1;
  letter-spacing: 0.055em;
  overflow-wrap: anywhere;
  text-align: center;
}

.touchControls .touchJump {
  width: clamp(72px, 17.5vw, 94px);
  height: clamp(68px, 16vw, 86px);
  color: #1b0d00;
  background: linear-gradient(180deg, rgba(255, 213, 88, 0.25) 0 48%, rgba(231, 126, 28, 0.32) 49% 100%);
  border-color: rgba(255, 224, 139, 0.58);
  box-shadow:
    0 6px 0 2px rgba(67, 20, 3, 0.44),
    inset 3px 3px 0 rgba(255, 255, 255, 0.16),
    inset -3px -3px 0 rgba(111, 27, 5, 0.17),
    0 0 22px rgba(255, 147, 35, 0.12);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.24);
}

.touchControls .touchJump .touchLabel {
  color: #321300;
}

.touchControls .touchDuck {
  color: #fff0ca;
  background: linear-gradient(180deg, rgba(112, 71, 44, 0.2) 0 48%, rgba(54, 35, 33, 0.26) 49% 100%);
  border-color: rgba(233, 179, 111, 0.5);
  box-shadow:
    0 6px 0 2px rgba(20, 8, 7, 0.4),
    inset 3px 3px 0 rgba(255, 226, 174, 0.08),
    inset -3px -3px 0 rgba(0, 0, 0, 0.16);
}

.touchControls .touchDuck .touchLabel {
  color: #ffd99d;
}

.touchControls button:active,
.touchControls button.is-active {
  filter: brightness(1.32) saturate(1.16);
  transform: translateY(2px) scale(0.96);
  box-shadow:
    0 1px 0 2px rgba(1, 4, 11, 0.96),
    inset 4px 4px 0 rgba(0, 0, 0, 0.4),
    inset -2px -2px 0 rgba(255, 255, 255, 0.18),
    0 0 26px rgba(102, 223, 255, 0.38);
}

.touchControls button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.pageFootnote {
  position: fixed;
  z-index: 4;
  right: 0;
  bottom: calc(6px + var(--safe-bottom));
  left: 0;
  margin: 0;
  color: #465979;
  letter-spacing: 0.04em;
  text-align: center;
  font-size: clamp(0.43rem, 0.8vw, 0.57rem);
  pointer-events: none;
}

@media (pointer: coarse), (hover: none) and (max-width: 760px) {
  body[data-game-state="PLAYING"] .touchControls {
    display: flex;
  }

  body[data-game-state="PLAYING"] .pageFootnote {
    display: none;
  }

  .gameFrame {
    width: min(100%, calc((100dvh - 80px) * 16 / 9));
  }

}

/* A browser toolbar leaves less vertical room than the desktop viewport
   suggests. Compact every menu ingredient together so no action, instruction
   or version line can fall outside the 16:9 game frame. */
@media (min-width: 761px) and (max-height: 820px) {
  .startContent {
    width: min(90%, 600px);
    padding: 4px 8px;
  }

  .eyebrow {
    margin-bottom: 2px;
    font-size: 0.48rem;
  }

  .startContent h1 {
    font-size: clamp(1.65rem, 7.2vh, 3rem);
    line-height: 0.8;
  }

  .startLead {
    margin: 3px 0 4px;
    font-size: clamp(0.54rem, 1.65vh, 0.7rem);
    line-height: 1.2;
  }

  .startMissionBrief {
    margin-bottom: 4px;
    font-size: clamp(0.43rem, 1.3vh, 0.56rem);
    line-height: 1.25;
  }

  .languagePicker {
    width: min(72%, 300px);
    margin-bottom: 4px;
    gap: 2px;
  }

  .languagePickerLabel {
    font-size: 0.48rem;
  }

  .languageSelectFrame,
  #languageSelect {
    min-height: 34px;
  }

  #languageSelect {
    padding: 3px 30px;
    font-size: 0.66rem;
  }

  .menuActionRow {
    width: min(72%, 420px);
    gap: 3px;
  }

  .menuFeatureRow,
  .menuSecondaryRow {
    gap: 3px;
  }

  .menuActionRow .pixelButton {
    min-height: 36px;
    padding: 3px 9px;
    font-size: 0.65rem;
  }

  .instructions {
    margin-top: 4px;
    gap: 4px 8px;
    font-size: 0.5rem;
  }

  .instructions kbd {
    min-width: 24px;
    min-height: 24px;
    padding: 2px 4px;
  }

  .fictionNotice {
    margin-top: 4px;
    font-size: 0.42rem;
    line-height: 1.2;
  }
}

@media (max-width: 560px) {
  .creditsScreen {
    gap: 3px;
    padding: 1.5% 2%;
  }

  .gameTopbar {
    grid-template-columns: 1fr auto;
  }

  .gameTopbarTitle {
    display: none;
  }

  .topbarControls {
    gap: 5px;
  }

  .quickLanguagePicker {
    min-width: 67px;
  }

  .devButton {
    min-width: 81px;
    padding-right: 6px;
    padding-left: 6px;
  }

  .gameFrame {
    outline-offset: 2px;
  }

  .startContent {
    width: 98%;
    padding: 2px 4px;
    transform: none;
  }

  .startContent h1 {
    font-size: clamp(1.15rem, 5.4vw, 1.75rem);
    line-height: 0.76;
  }

  .startContent > .eyebrow,
  .startContent > .fictionNotice,
  .startContent > .startMissionBrief,
  .languagePickerLabel {
    display: none;
  }

  .dossierScreen {
    padding: 5px;
  }

  .dossierFrame {
    width: min(94%, 760px);
    height: 94%;
    min-height: 150px;
    padding: clamp(6px, 1.8vh, 10px);
    gap: clamp(3px, 1vh, 6px);
  }

  .dossierCard {
    font-size: clamp(0.62rem, 3.1vw, 0.82rem);
  }

  .dossierCardCommand {
    font-size: clamp(1.3rem, 8vw, 2.2rem);
  }

  .startLead {
    max-width: 94%;
    margin: 1px 0 2px;
    font-size: clamp(0.48rem, 2vw, 0.68rem);
    line-height: 1.2;
  }

  .startMissionBrief {
    max-width: 94%;
    margin-bottom: 3px;
    font-size: clamp(0.4rem, 1.72vw, 0.55rem);
    line-height: 1.25;
  }

  .languagePicker {
    width: min(88%, 320px);
    margin-bottom: 1px;
  }

  .languageSelectFrame,
  #languageSelect {
    min-height: clamp(32px, 8vw, 44px);
  }

  #languageSelect {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .menuActionRow {
    width: min(82%, 300px);
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .menuFeatureRow,
  .menuSecondaryRow {
    gap: 2px;
  }

  .menuActionRow .pixelButton {
    width: 100%;
    min-height: clamp(32px, 8vw, 42px);
    padding: 4px 8px;
    font-size: clamp(0.55rem, 2.4vw, 0.74rem);
    letter-spacing: 0.055em;
  }

  .instructions {
    width: 96%;
    margin-top: 1px;
    gap: 4px clamp(7px, 2vw, 13px);
    font-size: clamp(0.5rem, 2vw, 0.66rem);
  }

  .instructions > span {
    gap: 5px;
  }

  .instructions kbd {
    min-width: clamp(27px, 6.5vw, 34px);
    min-height: clamp(27px, 6.5vw, 34px);
    padding: 4px 7px;
    border-width: 2px;
    box-shadow:
      0 4px 0 #02040d,
      inset 2px 2px 0 rgba(255, 255, 255, 0.14),
      0 0 10px rgba(89, 220, 255, 0.12);
  }

  .creditsViewport {
    width: 84%;
  }

  .creditsFooter {
    display: block;
  }

  .creditsResult {
    width: 100%;
    gap: 7px 13px;
    padding: 2px 4px;
  }
}

@media (max-width: 430px) {
  .gameTopbar {
    gap: 7px;
    padding-right: calc(var(--safe-right) + 8px);
    padding-left: calc(var(--safe-left) + 8px);
  }

  .backLink {
    padding-right: 7px;
    padding-left: 7px;
  }

  .quickLanguageIcon {
    display: none;
  }

  .quickLanguagePicker {
    min-width: 54px;
  }

  #quickLanguageSelect {
    padding-right: 19px;
    padding-left: 8px;
  }

  .devButton {
    min-width: 68px;
    padding-right: 4px;
    padding-left: 4px;
    gap: 4px;
    font-size: 0.56rem;
  }

  .devButtonState {
    min-width: 22px;
    font-size: 0.45rem;
  }

  .audioButton,
  .pauseButton,
  .settingsButton {
    width: 36px;
    flex-basis: 36px;
  }

  .gameMessage {
    top: 68px;
  }

  .resultCard {
    width: min(92%, 430px);
    padding: 6px 8px;
  }

  .resultCard > .eyebrow {
    display: none;
  }

  .resultCard h2 {
    font-size: clamp(1rem, 5.8vw, 1.25rem);
  }

  .resultQuip {
    margin: 3px 0;
    font-size: clamp(0.46rem, 2.4vw, 0.55rem);
    line-height: 1.25;
  }

  .gameOverStatus {
    margin-bottom: 3px;
    font-size: clamp(0.38rem, 2vw, 0.48rem);
    line-height: 1.2;
  }

  .resultScore {
    margin-bottom: 4px;
    gap: 0;
  }

  .resultScore strong {
    font-size: clamp(0.75rem, 4vw, 0.95rem);
    line-height: 1;
  }

  .resultCard .pixelButton {
    min-height: 32px;
    padding: 4px 10px;
    font-size: clamp(0.5rem, 2.5vw, 0.62rem);
  }
}

@media (max-width: 340px) {
  .gameTopbar {
    gap: 4px;
    padding-right: calc(var(--safe-right) + 4px);
    padding-left: calc(var(--safe-left) + 4px);
  }

  .backLink {
    min-height: 34px;
    padding-right: 5px;
    padding-left: 5px;
    gap: 4px;
    letter-spacing: 0;
    font-size: 0.5rem;
  }

  .backLink > span:first-child {
    font-size: 0.76rem;
  }

  .topbarControls {
    gap: 3px;
  }

  .quickLanguagePicker,
  #quickLanguageSelect {
    min-height: 34px;
  }

  .quickLanguagePicker {
    min-width: 47px;
  }

  #quickLanguageSelect {
    padding-right: 14px;
    padding-left: 4px;
    font-size: 0.54rem;
  }

  .quickLanguagePicker::after {
    right: 3px;
  }

  .devButton {
    min-width: 61px;
    min-height: 34px;
    padding-right: 3px;
    padding-left: 3px;
    gap: 3px;
    font-size: 0.5rem;
  }

  .devButtonState {
    min-width: 20px;
    font-size: 0.42rem;
  }

  .audioButton,
  .pauseButton,
  .settingsButton {
    width: 32px;
    min-height: 34px;
    flex-basis: 32px;
  }

  .settingsButtonIcon {
    font-size: 0.9rem;
  }

  .instructions {
    width: 100%;
    margin-top: 0;
    display: flex;
    gap: 3px 5px;
    font-size: 0.4rem;
  }

  .instructions > span {
    gap: 2px;
  }

  .instructions kbd {
    min-width: 24px;
    min-height: 24px;
    padding: 2px 4px;
    border-width: 1px;
    box-shadow: 0 3px 0 #02040d, inset 1px 1px 0 rgba(255, 255, 255, 0.13);
  }

  .startContent h1 {
    font-size: 1rem;
    line-height: 0.76;
  }

  .startLead {
    display: none;
  }

  .languagePicker {
    width: 88%;
    margin-bottom: 1px;
  }

  .languageSelectFrame,
  #languageSelect {
    min-height: 26px;
  }

  #languageSelect {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 0.52rem;
  }

  .menuActionRow {
    width: 88%;
    gap: 1px;
  }

  .menuFeatureRow,
  .menuSecondaryRow {
    gap: 1px;
  }

  .menuActionRow .pixelButton {
    min-height: clamp(24px, 8vw, 28px);
    padding: 2px 4px;
    gap: 3px;
    font-size: 0.48rem;
    letter-spacing: 0.035em;
  }

  .pixelButtonMultiplayer small {
    font-size: 0.52em;
  }

  .startContent {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .aboutModal {
    padding-right: max(7px, var(--safe-right));
    padding-left: max(7px, var(--safe-left));
  }

  .aboutDialog {
    padding: 12px;
    gap: 9px;
    border-width: 2px;
  }

  .aboutDialogHeader {
    gap: 8px;
  }

  .aboutDialog h2 {
    font-size: 0.87rem;
  }

  .aboutDialogBody {
    padding: 9px;
    font-size: 0.61rem;
    line-height: 1.5;
  }

  .hallMenuDialog {
    padding: 10px;
    gap: 7px;
  }

  .hallMenuHeader {
    gap: 7px;
  }

  .hallMenuTableWrap {
    min-height: 112px;
  }

  .aboutCloseButton {
    min-height: 42px;
  }

  .startLead {
    margin: 2px 0 3px;
    line-height: 1.2;
  }

  .touchControls {
    right: max(8px, calc(var(--safe-right) + 4px));
    left: max(8px, calc(var(--safe-left) + 4px));
  }

  .touchCluster {
    gap: 7px;
  }

  .touchControls button {
    width: 58px;
    height: 58px;
  }

  .touchActions {
    align-items: end;
    flex-direction: column;
    gap: 6px;
  }

  .touchControls .touchJump {
    width: 68px;
    height: 66px;
  }
}

@media (max-width: 300px) {
  .backLink {
    width: 34px;
    min-width: 34px;
    justify-content: center;
    padding-right: 4px;
    padding-left: 4px;
  }

  .backLink > span:last-child {
    display: none;
  }

  .creditsResult {
    padding-block: 1px;
  }

  .resultStats {
    margin-bottom: 4px;
    gap: 3px;
  }

  .resultMetric {
    padding: 4px 2px;
  }

  .resultActions {
    gap: 4px;
  }

  .newBestNotice {
    margin: -1px 0 3px;
  }

  .shareStatus {
    margin-top: 3px;
  }
}

@media (max-height: 520px) {
  .gameTopbar {
    height: calc(43px + var(--safe-top));
    padding-top: calc(var(--safe-top) + 4px);
    padding-bottom: 4px;
  }

  .backLink,
  .iconButton {
    min-height: 31px;
  }

  .touchControls {
    right: max(11px, calc(var(--safe-right) + 5px));
    bottom: max(9px, calc(var(--safe-bottom) + 4px));
    left: max(11px, calc(var(--safe-left) + 5px));
  }

  .touchCluster {
    gap: 8px;
  }

  .touchControls button {
    width: clamp(50px, 9.5vw, 60px);
    height: clamp(48px, 8.8vw, 56px);
    padding-top: 5px;
    padding-bottom: 4px;
  }

  .touchControls .touchJump {
    width: clamp(58px, 11vw, 70px);
    height: clamp(54px, 10vw, 64px);
  }

  .touchIcon {
    font-size: clamp(1.12rem, 3.4vw, 1.5rem);
  }

  .touchLabel {
    font-size: clamp(0.39rem, 1.15vw, 0.53rem);
  }

  .gameShell {
    padding-top: calc(45px + var(--safe-top));
    padding-bottom: max(6px, var(--safe-bottom));
  }

  .gameFrame {
    width: min(100%, calc((100dvh - 52px) * 16 / 9));
  }

  .pageFootnote {
    display: none;
  }

  .creditsFooter {
    display: block;
  }

  .creditsResult {
    width: 100%;
    padding: 2px 4px;
  }
}

@media (max-height: 390px) {
  .startContent {
    transform: none;
  }

  .eyebrow,
  .fictionNotice,
  .startMissionBrief {
    display: none;
  }

  .startLead {
    margin: 4px 0 7px;
  }

  .languagePicker {
    width: min(82%, 280px);
    margin-bottom: 7px;
  }

  .languagePickerLabel {
    display: none;
  }

  #languageSelect {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .instructions {
    margin-top: 7px;
  }
}

@media (orientation: portrait) {
  .gameShell {
    padding-right: 0;
    padding-left: 0;
  }

  .gameFrame {
    width: 100vw;
    max-width: none;
    border-width: 0;
    outline: 0;
  }

  .gameFrame::before {
    display: none;
  }

  .touchControls {
    bottom: max(20px, calc(var(--safe-bottom) + 9px));
  }

  .touchControls button {
    width: clamp(62px, 14vw, 80px);
    height: clamp(60px, 13vw, 76px);
  }

  .touchControls .touchJump {
    width: clamp(72px, 17.5vw, 94px);
    height: clamp(68px, 16vw, 86px);
  }
}

@media (orientation: portrait) and (max-width: 340px) {
  .touchControls button {
    width: 58px;
    height: 58px;
  }

  .touchControls .touchJump {
    width: 68px;
    height: 66px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .gameTopbar {
    background: linear-gradient(180deg, rgba(2, 4, 13, 0.9), rgba(2, 4, 13, 0.42) 76%, transparent);
  }

  .gameShell {
    padding:
      0
      max(0px, var(--safe-right))
      0
      max(0px, var(--safe-left));
  }

  .gameFrame {
    width: min(
      calc(100vw - var(--safe-left) - var(--safe-right)),
      calc(100vh * 16 / 9)
    );
    width: min(
      calc(100vw - var(--safe-left) - var(--safe-right)),
      calc(100dvh * 16 / 9)
    );
    max-width: none;
    border-width: 0;
    outline: 0;
  }

  .gameFrame::before {
    display: none;
  }

  .startContent {
    width: 98%;
    padding: 2px 4px;
    transform: none;
  }

  .startContent > .eyebrow,
  .startContent > .fictionNotice,
  .languagePickerLabel {
    display: none;
  }

  .startContent h1 {
    font-size: clamp(1.25rem, 8vh, 2.2rem);
    line-height: 0.78;
  }

  .startLead {
    max-width: 92%;
    margin: 2px 0 3px;
    font-size: clamp(0.48rem, 2.2vh, 0.68rem);
    line-height: 1.15;
  }

  .languagePicker {
    width: min(82%, 320px);
    margin-bottom: 3px;
  }

  .languageSelectFrame,
  #languageSelect {
    min-height: clamp(32px, 10vh, 42px);
  }

  #languageSelect {
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: clamp(0.56rem, 2.3vh, 0.72rem);
  }

  .menuActionRow {
    width: min(76%, 300px);
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .menuActionRow .pixelButton {
    width: 100%;
    min-height: clamp(36px, 11vh, 44px);
    padding: 3px 8px;
    font-size: clamp(0.54rem, 2.25vh, 0.7rem);
    letter-spacing: 0.05em;
  }

  .instructions {
    width: 96%;
    margin-top: 3px;
    gap: 3px clamp(7px, 2vw, 13px);
    font-size: clamp(0.46rem, 2vh, 0.62rem);
  }

  .instructions > span {
    gap: 4px;
  }

  .instructions kbd {
    min-width: clamp(28px, 7.5vh, 32px);
    min-height: clamp(28px, 7.5vh, 32px);
    padding: 3px 6px;
    border-width: 2px;
    box-shadow: 0 4px 0 #02040d, inset 2px 2px 0 rgba(255, 255, 255, 0.14);
  }

  .gameHud {
    top: calc(47px + var(--safe-top));
  }

  .gameMessage {
    top: calc(120px + var(--safe-top));
  }

  .touchControls button {
    width: 64px;
    height: 62px;
  }

  .touchControls .touchJump {
    width: 74px;
    height: 70px;
  }

  .touchIcon {
    font-size: clamp(1.4rem, 4.2vw, 1.75rem);
  }

  .touchLabel {
    font-size: clamp(0.46rem, 1.35vw, 0.6rem);
  }
}

/* Menu, results and credits can use the full portrait stage. The playable
   canvas remains an uncropped 16:9 frame in every interactive/cinematic state. */
@media (orientation: portrait) {
  /* The 16:9 title art is horizontally cropped by `background-size: cover`
     in the tall menu. Follow that crop so the live flame stays on the baked
     main flare instead of drifting to the right on phones. */
  .menuFlareMain {
    left: calc(50% - 2.4dvh + 1.3px);
  }

  .menuMoon {
    top: 3.8%;
    right: 6%;
    left: auto;
    width: clamp(52px, 16vw, 72px);
  }

  /* The portrait crop does not include the side towers; avoid floating live
     flames over unrelated parts of the narrowed artwork. */
  .menuFlareWest,
  .menuFlareEast {
    display: none;
  }

  body[data-game-state="START"] .gameShell,
  body[data-game-state="GAME_OVER"] .gameShell,
  body[data-game-state="CREDITS"] .gameShell {
    min-height: 100dvh;
    padding:
      calc(54px + var(--safe-top))
      0
      0;
  }

  body[data-game-state="START"] .gameFrame,
  body[data-game-state="GAME_OVER"] .gameFrame,
  body[data-game-state="CREDITS"] .gameFrame {
    width: 100vw;
    height: calc(100dvh - 54px - var(--safe-top));
    max-width: none;
    aspect-ratio: auto;
  }

  body[data-game-state="START"] .pageFootnote,
  body[data-game-state="GAME_OVER"] .pageFootnote,
  body[data-game-state="CREDITS"] .pageFootnote {
    display: none;
  }

  body[data-game-state="START"] #gameCanvas,
  body[data-game-state="GAME_OVER"] #gameCanvas,
  body[data-game-state="CREDITS"] #gameCanvas {
    object-fit: cover;
    object-position: center;
  }

  body[data-game-state="START"] .startContent {
    width: min(94%, 560px);
    padding: clamp(12px, 4vw, 24px);
  }

  body[data-game-state="START"] .startContent h1 {
    font-size: clamp(1.5rem, 8vw, 2.65rem);
    line-height: 0.84;
  }

  body[data-game-state="START"] .startLead {
    max-width: 92%;
    margin: 8px 0 12px;
    display: block;
    font-size: clamp(0.64rem, 3vw, 0.88rem);
    line-height: 1.35;
  }

  body[data-game-state="START"] .languagePicker {
    width: min(92%, 390px);
    margin-bottom: 12px;
  }

  body[data-game-state="START"] .languageSelectFrame,
  body[data-game-state="START"] #languageSelect {
    min-height: 48px;
  }

  body[data-game-state="START"] #languageSelect {
    font-size: clamp(0.68rem, 3vw, 0.86rem);
  }

  body[data-game-state="START"] .menuActionRow {
    width: min(86%, 340px);
    gap: 7px;
  }

  body[data-game-state="START"] .menuActionRow .pixelButton {
    min-height: 48px;
    padding: 8px 12px;
    font-size: clamp(0.65rem, 2.9vw, 0.84rem);
    letter-spacing: 0.055em;
  }

  body[data-game-state="START"] .instructions {
    width: min(96%, 440px);
    margin-top: 12px;
    gap: 8px 13px;
    font-size: clamp(0.56rem, 2.65vw, 0.75rem);
  }

  body[data-game-state="START"] .instructions kbd {
    min-width: 34px;
    min-height: 34px;
    padding: 6px 8px;
    border-width: 2px;
  }

  body[data-game-state="GAME_OVER"] .resultCard {
    width: min(90%, 480px);
    padding: clamp(18px, 6vw, 32px);
  }

  body[data-game-state="GAME_OVER"] .resultCard h2 {
    font-size: clamp(1.45rem, 7vw, 2.2rem);
  }

  body[data-game-state="GAME_OVER"] .resultQuip {
    margin: 10px 0;
    font-size: clamp(0.68rem, 3vw, 0.9rem);
    line-height: 1.4;
  }

  body[data-game-state="GAME_OVER"] .gameOverStatus {
    margin-bottom: 12px;
    font-size: clamp(0.56rem, 2.5vw, 0.72rem);
    line-height: 1.35;
  }

  body[data-game-state="GAME_OVER"] .resultScore {
    margin-bottom: 16px;
  }

  body[data-game-state="GAME_OVER"] .resultScore strong {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
  }

  body[data-game-state="GAME_OVER"] .resultStats {
    margin-bottom: 12px;
    gap: 6px;
  }

  body[data-game-state="GAME_OVER"] .resultMetric {
    padding: 7px 4px;
  }

  body[data-game-state="GAME_OVER"] .resultMetric span {
    font-size: clamp(0.46rem, 2.15vw, 0.6rem);
  }

  body[data-game-state="GAME_OVER"] .resultMetric strong {
    font-size: clamp(0.82rem, 3.8vw, 1.05rem);
  }

  body[data-game-state="GAME_OVER"] .resultCard .pixelButton {
    min-height: 48px;
    padding: 8px 16px;
    font-size: clamp(0.65rem, 2.8vw, 0.82rem);
  }

  .creditsScreen {
    gap: clamp(8px, 2vw, 14px);
    padding:
      clamp(12px, 3.5vw, 20px)
      clamp(10px, 3vw, 18px)
      max(12px, calc(var(--safe-bottom) + 7px));
    perspective: 650px;
  }

  .creditsViewport {
    width: min(94%, 600px);
    transform: rotateX(16deg);
  }

  .creditsCrawl {
    padding-top: 4%;
  }

  .creditsCrawl .eyebrow {
    font-size: clamp(0.68rem, 3vw, 0.9rem);
  }

  .creditsCrawl h2 {
    margin-bottom: 0.75em;
    font-size: clamp(1.02rem, 4.9vw, 1.5rem);
    line-height: 1.3;
  }

  .creditsCrawl p:not(.eyebrow) {
    margin-bottom: 0.64em;
    font-size: clamp(0.72rem, 3.25vw, 0.98rem);
    line-height: 1.48;
  }

  .crawlDivider {
    margin: 1em auto;
  }

  .creditsResult {
    width: min(100%, 520px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px 12px;
    padding: 9px;
    background: rgba(1, 3, 10, 0.94);
  }

  .creditsResult > div:not(.creditsActionRow) {
    align-items: center;
    justify-content: center;
  }

  .creditsResult > div:not(.creditsActionRow) > span {
    font-size: clamp(0.58rem, 2.55vw, 0.72rem);
  }

  .creditsResult strong {
    font-size: clamp(0.9rem, 4vw, 1.15rem);
  }

  .creditsResult > .creditsActionRow {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .creditsShareStatus {
    grid-column: 1 / -1;
  }

  .creditsBestNotice {
    grid-column: 1 / -1;
  }

  .creditsResult .pixelButton {
    width: 100%;
    min-height: 50px;
    padding: 8px 10px;
    font-size: clamp(0.62rem, 2.75vw, 0.8rem);
    line-height: 1.2;
  }
}

/* Final toolbar sizing guard. These rules intentionally live after the
   height/orientation blocks so later compact-landscape styles cannot shrink
   accessible controls back below their touch target. */
@media (orientation: portrait) and (min-width: 301px) and (max-width: 440px) {
  .gameTopbar {
    height: calc(54px + var(--safe-top));
    padding-top: calc(var(--safe-top) + 5px);
    padding-bottom: 5px;
  }

  .topbarControls {
    gap: 3px;
  }

  .backLink,
  .quickLanguagePicker,
  #quickLanguageSelect,
  .devButton,
  .audioButton,
  .pauseButton,
  .settingsButton {
    min-height: 44px;
  }

  .devButton {
    min-width: 64px;
    padding-right: 3px;
    padding-left: 3px;
    gap: 3px;
  }
}

@media (max-width: 300px) {
  .gameTopbar {
    height: calc(54px + var(--safe-top));
    padding:
      calc(var(--safe-top) + 5px)
      var(--safe-right)
      5px
      var(--safe-left);
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 2px;
  }

  .backLink {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0;
    border-width: 1px;
  }

  .backLink > span:first-child {
    font-size: 0.92rem;
  }

  .backLink > span:last-child {
    display: none;
  }

  .topbarControls {
    width: 100%;
    justify-content: flex-end;
    gap: 2px;
  }

  .quickLanguagePicker,
  #quickLanguageSelect {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  #quickLanguageSelect {
    padding-right: 13px;
    padding-left: 4px;
    font-size: 0.52rem;
  }

  .devButton {
    width: 48px;
    min-width: 48px;
    min-height: 44px;
    padding: 0 2px;
    gap: 0;
    font-size: 0.43rem;
    letter-spacing: 0.01em;
  }

  .devButtonState {
    display: none;
  }

  .audioButton,
  .pauseButton,
  .settingsButton {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .gameTopbar {
    height: calc(52px + var(--safe-top));
    padding-top: calc(var(--safe-top) + 4px);
    padding-bottom: 4px;
    grid-template-columns: 1fr auto;
  }

  .gameTopbarTitle {
    display: none;
  }

  .backLink,
  .iconButton,
  .quickLanguagePicker,
  #quickLanguageSelect {
    min-height: 44px;
  }

  .audioButton,
  .pauseButton,
  .settingsButton {
    width: 44px;
    flex-basis: 44px;
  }

  .topbarControls {
    gap: 4px;
  }

  .gameHud {
    top: calc(56px + var(--safe-top));
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 430px) {
  .backLink {
    width: 44px;
    min-width: 44px;
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
  }

  .backLink > span:last-child {
    display: none;
  }
}

@media (max-width: 760px) {
  .resultScreen {
    place-items: start center;
  }

  .resultLayout {
    width: min(96%, 520px);
    max-height: none;
    grid-template-columns: minmax(0, 1fr);
  }

  .resultLayout > .resultCard {
    width: 100%;
  }

  .hallPanelGameOver .hallTableWrap {
    height: clamp(190px, 38vh, 300px);
  }

  .creditsHallLayout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hallPanelCredits .hallTableWrap {
    height: clamp(180px, 28vh, 260px);
  }
}

@media (max-width: 560px) {
  .creditsScreen {
    display: block;
    overflow-y: auto;
  }

  .creditsViewport {
    height: clamp(300px, 55vh, 500px);
    margin: 0 auto clamp(10px, 3vw, 18px);
  }

  .creditsFooter {
    padding-bottom: max(6px, var(--safe-bottom));
  }

  .creditsHallLayout {
    width: min(100%, 520px);
  }

  .hallEntryFields {
    grid-template-columns: minmax(0, 1fr);
  }

  .hallProfileSummary {
    min-height: 56px;
    padding: 9px 10px;
  }

  .hallProfileSummaryLabel {
    font-size: clamp(0.48rem, 2.1vw, 0.58rem);
  }

  .hallProfileSummary strong {
    font-size: clamp(0.62rem, 2.8vw, 0.76rem);
  }

  .hallProfileSummary [data-hall-profile-country] {
    font-size: clamp(0.5rem, 2.2vw, 0.62rem);
  }

  .hallField input,
  .hallField select {
    min-height: 44px;
    font-size: clamp(0.62rem, 2.9vw, 0.76rem);
  }

  .hallPrivacyNote,
  .hallEntryLead,
  .hallQualificationNote,
  .hallCasualNote,
  .hallStatus,
  .hallSubmitStatus {
    font-size: clamp(0.5rem, 2.25vw, 0.62rem);
  }

  .hallSubmitButton {
    min-height: 48px;
    font-size: clamp(0.62rem, 2.7vw, 0.76rem);
  }

  .hallTable {
    font-size: clamp(0.48rem, 2.15vw, 0.59rem);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .resultScreen {
    /* The fixed compact topbar occupies the first 52px. Keep the result
       content below it while preserving the screen's own vertical scroll. */
    padding: calc(57px + var(--safe-top)) 5px 5px;
    scroll-padding-top: calc(57px + var(--safe-top));
  }

  .creditsScreen {
    /* Keep the visual overlay fixed while the dedicated inner surface owns
       every swipe. This avoids a nested Hall table trapping the reverse pan. */
    display: block;
    overflow: hidden;
    padding: 0;
  }

  .creditsScrollSurface {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    padding: calc(57px + var(--safe-top)) 3% max(28px, calc(var(--safe-bottom) + 20px));
    scroll-padding-top: calc(57px + var(--safe-top));
    scroll-padding-bottom: max(28px, calc(var(--safe-bottom) + 20px));
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--cyan) #06152b;
    scrollbar-width: thin;
  }

  .creditsScrollSurface:focus-visible {
    outline: 2px solid rgba(89, 220, 255, 0.78);
    outline-offset: -3px;
  }

  /* A thin pixel rail at the active edge makes the extra content legible and
     is also a 44px tap target for mouse/touch users. JS hides each rail at
     its corresponding scroll limit. */
  .creditsScrollEdge {
    position: absolute;
    z-index: 32;
    left: 50%;
    width: min(52%, 380px);
    min-width: 128px;
    min-height: 44px;
    margin: 0;
    padding: 14px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bff4ff;
    background: transparent;
    border: 0;
    border-radius: 0;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.92));
    transform: translateX(-50%);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    animation: creditsScrollEdgePulse 1.6s steps(2, end) infinite;
  }

  .creditsScrollEdgeUp {
    /* The compact fixed toolbar sits above the game surface in landscape. */
    top: calc(56px + var(--safe-top));
  }

  .creditsScrollEdgeDown {
    bottom: max(1px, var(--safe-bottom));
  }

  .creditsScrollEdgeTrack {
    position: relative;
    width: 100%;
    height: 4px;
    display: block;
    background: repeating-linear-gradient(90deg, #2b8fb2 0 8px, #81e9ff 8px 14px, transparent 14px 19px);
    box-shadow: 0 0 0 1px rgba(2, 8, 20, 0.92), 0 0 9px rgba(89, 220, 255, 0.52);
  }

  .creditsScrollEdgeTrack > span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 18px;
    display: grid;
    place-items: center;
    color: #ffcb64;
    background: #06152b;
    border: 1px solid #74ddf7;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8), 0 0 7px rgba(255, 177, 59, 0.28);
    transform: translate(-50%, -50%);
    font-size: 10px;
    line-height: 1;
  }

  .creditsScrollEdge:hover .creditsScrollEdgeTrack,
  .creditsScrollEdge:focus-visible .creditsScrollEdgeTrack {
    background: repeating-linear-gradient(90deg, #ff9e32 0 8px, #ffd477 8px 14px, transparent 14px 19px);
  }

  .creditsScrollEdge:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -5px;
  }

  .creditsViewport {
    height: clamp(170px, 48dvh, 250px);
    margin: 0 auto 8px;
  }

  .creditsFooter {
    padding-bottom: max(5px, var(--safe-bottom));
  }

  .resultLayout {
    width: min(97%, 1040px);
    max-height: none;
    grid-template-columns: minmax(265px, 0.82fr) minmax(370px, 1.18fr);
    gap: 7px;
  }

  .hallPanel,
  .hallEntryPanel {
    padding: 7px;
  }

  .hallPanelGameOver .hallTableWrap {
    height: clamp(150px, 49vh, 215px);
  }

  .creditsHallLayout {
    margin-top: 5px;
    gap: 6px;
  }

  .hallPanelCredits .hallTableWrap {
    /* Avoid nested vertical scrollers on short touch screens. All Top 25 rows
       join the credits document and the outer credits surface owns the swipe. */
    height: auto;
    max-height: none;
    flex: none;
    overflow: visible;
  }

  .hallField input,
  .hallField select {
    min-height: 44px;
    padding-block: 7px;
    /* Prevent Safari from page-zooming the low-height layout when a field is
       focused; that zoom can otherwise strand the controls below the fold. */
    font-size: 16px;
  }

  .hallPrivacyNote {
    margin: 3px 0 4px;
  }

  .hallSubmitButton {
    min-height: 44px;
    padding-block: 7px;
  }

  .creditsFooter input,
  .creditsFooter select,
  .creditsFooter button,
  .creditsFooter a {
    scroll-margin-top: calc(62px + var(--safe-top));
    scroll-margin-bottom: max(20px, calc(var(--safe-bottom) + 12px));
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 700px) {
  .resultLayout {
    width: min(96%, 520px);
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .startMissionBrief {
    display: none;
  }

  .dossierScreen {
    padding: 5px;
  }

  .dossierFrame {
    width: min(94%, 760px);
    height: 88%;
    min-height: 150px;
    padding: clamp(8px, 2.4vh, 14px);
    gap: clamp(4px, 1.6vh, 8px);
  }

  .dossierCard {
    font-size: clamp(0.7rem, 5.2vh, 1.55rem);
  }

  .dossierCardCommand {
    font-size: clamp(1.4rem, 14vh, 3.5rem);
  }
}

.pixelButtonMultiplayer:not(:disabled) {
  color: #e9fbff;
  background:
    linear-gradient(90deg, rgba(89, 220, 255, 0.12), transparent 30% 70%, rgba(89, 220, 255, 0.12)),
    linear-gradient(#244e69 0 47%, #102941 48% 100%);
  border-color: #8feeff;
  box-shadow: 0 4px 0 #06101f, 0 0 0 2px #020713, 0 0 20px rgba(89, 220, 255, 0.3);
}

.pixelButtonMultiplayer small {
  color: #ffdb69;
}

.multiplayerConnectionStatus {
  position: absolute;
  z-index: 55;
  top: clamp(45px, 18%, 62px);
  left: 50%;
  width: min(88%, 390px);
  margin: 0;
  padding: 6px 9px;
  color: #fff4b5;
  background: rgba(44, 18, 12, 0.94);
  border: 2px solid #ff9b56;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.78);
  font-size: clamp(0.48rem, 1.4vw, 0.68rem);
  line-height: 1.35;
  letter-spacing: 0.035em;
  text-align: center;
  text-shadow: 1px 1px 0 #130704;
  transform: translateX(-50%);
}

.multiplayerModal {
  z-index: 1320;
}

.multiplayerDialog {
  width: min(100%, 760px);
  max-height: min(840px, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px));
}

.multiplayerDialog::before,
.multiplayerDialog::after {
  background: #6ff5c5;
  box-shadow: 0 0 12px rgba(111, 245, 197, 0.55);
}

.multiplayerHeader > div {
  min-width: 0;
}

.multiplayerHeaderBack {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: auto;
}

.multiplayerHeaderBack[hidden] {
  display: none !important;
}

.multiplayerIcon {
  background: linear-gradient(180deg, #91f8d1 0 48%, #3bc98f 49% 100%);
  border-color: #ddfff1;
}

.multiplayerBetaLabel {
  margin: 0 0 3px;
  color: #76f2c1;
  font-size: clamp(0.48rem, 1.4vw, 0.68rem);
  letter-spacing: 0.14em;
}

.multiplayerDialogBody {
  min-height: 0;
  padding: clamp(10px, 2.4vw, 18px);
  overflow-x: hidden;
  overflow-y: auto;
  color: #d3e6f7;
  background: rgba(2, 9, 22, 0.72);
  border: 2px solid rgba(89, 220, 255, 0.3);
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.25);
  overscroll-behavior: contain;
  scrollbar-color: var(--cyan) #06152b;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.multiplayerProfile,
.multiplayerLobby {
  display: grid;
  gap: clamp(9px, 1.7vw, 14px);
}

[data-multiplayer-view][hidden],
[data-profile-mode][hidden] {
  display: none !important;
}

.multiplayerProfileLead,
.multiplayerDisclosure,
.multiplayerUnranked,
.multiplayerStatus,
.multiplayerLobbyStatus,
.multiplayerPlayerSummary {
  margin: 0;
}

.multiplayerProfileLead {
  color: #eefaff;
  font-size: clamp(0.68rem, 1.7vw, 0.9rem);
  line-height: 1.45;
}

.multiplayerFields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.5vw, 12px);
}

.multiplayerField {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #8feeff;
  font-size: clamp(0.58rem, 1.4vw, 0.75rem);
  letter-spacing: 0.07em;
}

.multiplayerField input,
.multiplayerField select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  color: #f3fbff;
  background: #07172b;
  border: 2px solid #4a8fb3;
  border-radius: 0;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.32), 0 3px 0 #02050d;
  font: inherit;
  font-size: clamp(0.68rem, 1.6vw, 0.86rem);
  letter-spacing: 0.02em;
}

.multiplayerField select {
  color-scheme: dark;
}

.multiplayerField input:hover,
.multiplayerField select:hover,
.multiplayerField input:focus-visible,
.multiplayerField select:focus-visible {
  border-color: #baf7ff;
  outline: 2px solid rgba(89, 220, 255, 0.55);
  outline-offset: 2px;
}

.profileChoiceGroup {
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  border: 0;
}

.profileChoiceGroup > legend {
  margin: 0;
  padding: 0;
  color: #8feeff;
  font-size: clamp(0.58rem, 1.4vw, 0.75rem);
  line-height: 1.3;
  letter-spacing: 0.07em;
}

.profileAvatarGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 68px));
  justify-content: center;
  gap: 5px;
}

.profileAvatarCard,
.profileColorOption {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.profileAvatarCard > input,
.profileColorOption > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.profileAvatarPreview {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 3px;
  display: grid;
  place-items: center;
  color: #59dcff;
  background: linear-gradient(180deg, rgba(15, 44, 70, 0.96), rgba(3, 16, 33, 0.98));
  border: 2px solid #365d7b;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.035), 0 3px 0 #02050d;
}

.profileAvatarCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.profileAvatarCard:hover .profileAvatarPreview,
.profileAvatarCard > input:focus-visible ~ .profileAvatarPreview {
  border-color: #baf7ff;
}

.profileAvatarCard > input:focus-visible ~ .profileAvatarPreview {
  outline: 2px solid rgba(89, 220, 255, 0.72);
  outline-offset: 2px;
}

.profileAvatarCard > input:checked ~ .profileAvatarPreview {
  color: #fff5b2;
  border-color: #63edbd;
  background: linear-gradient(180deg, rgba(18, 82, 67, 0.72), rgba(3, 27, 37, 0.98));
  box-shadow: inset 0 0 0 2px rgba(99, 237, 189, 0.18), 0 3px 0 #02050d;
}

.profileAvatarCard > input:checked ~ .profileAvatarPreview::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  background: #63edbd;
  box-shadow: 0 0 0 1px #071325, 0 0 8px rgba(99, 237, 189, 0.75);
}

.profileColorGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.profileColorOption {
  min-height: 40px;
  padding: 6px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #bad0e1;
  background: #071325;
  border: 2px solid #365d7b;
  box-shadow: 0 3px 0 #02050d;
  font-size: clamp(0.43rem, 1vw, 0.58rem);
  letter-spacing: 0.035em;
  overflow-wrap: anywhere;
}

.profileColorOption > span {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: var(--profile-swatch);
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow: 2px 2px 0 #02050d;
}

.profileColorOption b {
  min-width: 0;
  font: inherit;
}

.profileColorCyan { --profile-swatch: #59dcff; }
.profileColorOrange { --profile-swatch: #ff963d; }
.profileColorMint { --profile-swatch: #6ff5c5; }
.profileColorViolet { --profile-swatch: #ad83ff; }
.profileColorRose { --profile-swatch: #ff719f; }
.profileColorYellow { --profile-swatch: #ffe266; }

.profileColorOption:hover,
.profileColorOption:has(> input:focus-visible) {
  color: #fff;
  border-color: #baf7ff;
}

.profileColorOption:has(> input:focus-visible) {
  outline: 2px solid rgba(89, 220, 255, 0.72);
  outline-offset: 2px;
}

.profileColorOption:has(> input:checked) {
  color: #fff5b2;
  border-color: var(--profile-swatch);
  background: rgba(23, 56, 77, 0.96);
}

.multiplayerDisclosure {
  color: #a8bfd5;
  font-size: clamp(0.56rem, 1.35vw, 0.72rem);
  line-height: 1.5;
}

.multiplayerUnranked {
  padding: 7px 9px;
  color: #ffeaa0;
  background: rgba(65, 43, 9, 0.46);
  border-left: 3px solid #ffcf56;
  font-size: clamp(0.54rem, 1.3vw, 0.7rem);
  line-height: 1.45;
}

.multiplayerStatus,
.multiplayerLobbyStatus {
  min-height: 1.4em;
  color: #8fffd0;
  font-size: clamp(0.58rem, 1.45vw, 0.76rem);
  line-height: 1.4;
}

.multiplayerStatus:empty {
  min-height: 0;
}

.profileLaunchActions {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.profileSubmitButton {
  width: 100%;
  min-height: 58px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: clamp(0.58rem, 1.5vw, 0.82rem);
}

.multiplayerPrimaryActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(7px, 1.4vw, 11px);
}

.multiplayerPrimaryActions .pixelButton {
  min-width: 0;
  min-height: 48px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow-wrap: anywhere;
  font-size: clamp(0.56rem, 1.5vw, 0.8rem);
  line-height: 1.15;
  text-align: center;
}

.pixelButtonMultiplayerLeave {
  color: #ffd8cc;
  background: linear-gradient(180deg, #542d38 0 47%, #2d1423 48% 100%);
  border-color: #e99a9a;
}

.multiplayerTextButton {
  min-width: 44px;
  min-height: 44px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cbefff;
  background: linear-gradient(180deg, rgba(17, 55, 91, 0.76), rgba(7, 25, 49, 0.82));
  border: 1px solid rgba(126, 220, 247, 0.58);
  box-shadow: inset 0 0 0 1px rgba(91, 177, 214, 0.12);
  cursor: pointer;
  font: inherit;
  font-size: clamp(0.58rem, 1.35vw, 0.74rem);
  line-height: 1.3;
  letter-spacing: 0.055em;
  text-align: center;
}

.multiplayerTextButton:hover,
.multiplayerTextButton:focus-visible {
  color: #fff4ad;
  background: linear-gradient(180deg, rgba(30, 76, 116, 0.9), rgba(11, 34, 63, 0.94));
  border-color: currentColor;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.multiplayerTextButton:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.multiplayerLobby h3 {
  margin: 0;
  color: #fff1a8;
  font-size: clamp(0.82rem, 2.4vw, 1.18rem);
  line-height: 1.2;
  letter-spacing: 0.055em;
}

.multiplayerPlayerSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #8feeff;
  font-size: clamp(0.6rem, 1.5vw, 0.78rem);
  letter-spacing: 0.08em;
}

.multiplayerPlayerSummary strong {
  color: #fff2a6;
  font-size: 1.15em;
}

.multiplayerRoster {
  min-height: 76px;
  max-height: 176px;
  margin: 0;
  padding: 7px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 5px;
  overflow-y: auto;
  list-style: none;
  background: rgba(3, 16, 32, 0.76);
  border: 2px solid rgba(99, 216, 244, 0.34);
}

.multiplayerRoster li {
  min-width: 0;
  padding: 6px 8px;
  color: #dceefe;
  background: rgba(24, 57, 84, 0.66);
  border-left: 3px solid #5ccce9;
  font-size: clamp(0.58rem, 1.45vw, 0.76rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multiplayerRoster li[data-self="true"] {
  color: #fff2ae;
  border-left-color: #ffcf56;
}

@media (max-width: 560px) {
  .multiplayerDialog {
    padding: 12px;
    gap: 9px;
  }

  .multiplayerDialogBody {
    padding: 10px;
  }

  .multiplayerFields {
    grid-template-columns: minmax(0, 1fr);
  }

  .profileColorGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profileLaunchActions {
    grid-template-columns: minmax(0, 1fr);
  }

  .multiplayerRoster {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 380px) {
  .profileColorGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .multiplayerPrimaryActions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .multiplayerModal {
    padding: max(6px, var(--safe-top)) max(8px, var(--safe-right)) max(6px, var(--safe-bottom)) max(8px, var(--safe-left));
  }

  .multiplayerDialog {
    width: min(96vw, 760px);
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 12px);
    padding: 8px 10px;
    gap: 6px;
    border-width: 2px;
  }

  .multiplayerHeader {
    gap: 7px;
  }

  .multiplayerHeader .aboutDialogIcon {
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
  }

  .multiplayerHeader h2 {
    font-size: 0.78rem;
  }

  .multiplayerBetaLabel {
    margin-bottom: 1px;
    font-size: 0.42rem;
  }

  .multiplayerDialogBody {
    padding: 7px 8px;
  }

  .multiplayerProfile,
  .multiplayerLobby {
    gap: 5px;
  }

  .multiplayerProfileLead,
  .multiplayerDisclosure,
  .multiplayerUnranked,
  .multiplayerStatus,
  .multiplayerLobbyStatus {
    font-size: 0.48rem;
    line-height: 1.28;
  }

  .multiplayerFields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .multiplayerField {
    gap: 3px;
    font-size: 0.46rem;
  }

  .multiplayerField input,
  .multiplayerField select {
    min-height: 32px;
    padding: 4px 7px;
    font-size: 0.55rem;
  }

  .profileAvatarGrid {
    grid-template-columns: repeat(5, minmax(44px, 58px));
    gap: 5px;
  }

  .profileColorOption {
    min-height: 30px;
    padding: 3px;
    font-size: 0.4rem;
  }

  .profileSubmitButton {
    min-height: 48px;
    padding: 5px;
    font-size: 0.5rem;
  }

  .multiplayerUnranked {
    padding: 4px 6px;
  }

  .multiplayerPrimaryActions {
    gap: 6px;
  }

  .multiplayerPrimaryActions .pixelButton {
    min-height: 34px;
    padding: 4px 6px;
    font-size: 0.5rem;
  }

  .multiplayerTextButton {
    min-width: 44px;
    min-height: 36px;
    padding: 5px 7px;
    font-size: 0.52rem;
  }

  .multiplayerLobby h3 {
    font-size: 0.67rem;
  }

  .multiplayerPlayerSummary,
  .multiplayerRoster li {
    font-size: 0.49rem;
  }

  .multiplayerRoster {
    min-height: 48px;
    max-height: 82px;
    padding: 4px;
    gap: 3px;
  }

  .multiplayerRoster li {
    padding: 3px 5px;
  }
}

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

  .speechBubble.is-typing .speechText::after {
    display: none;
    animation: none;
  }

  .creditsViewport {
    overflow-y: auto;
    transform: none;
  }

  .creditsCrawl {
    padding-top: 2%;
    animation: none !important;
    transform: none !important;
  }

  .startBackdrop {
    transform: none;
  }

  .startAtmosphere {
    transform: none;
  }

  .menuStar,
  .menuLight {
    animation: none !important;
    opacity: 0.56;
  }

  .menuMoon {
    animation: none !important;
    transform: translate3d(-2px, 1px, 0);
  }

  .menuFlareGlow,
  .menuFlareTongue,
  .menuFlareSpark {
    animation: none !important;
  }

  .menuFlareGlow {
    opacity: 0.5;
  }

  .menuFlareTongueOuter {
    opacity: 0.58;
    transform: translateX(-2%) rotate(-2deg) scaleY(0.94);
  }

  .menuFlareTongueInner {
    opacity: 0.68;
    transform: translateX(2%) scaleY(0.92);
  }

  .menuFlareSparkA {
    opacity: 0.62;
    transform: translate(-4px, -5px);
  }

  .menuFlareSparkB {
    opacity: 0.5;
    transform: translate(4px, -4px);
  }

  .menuFlareSmoke b {
    animation: none !important;
    opacity: 0.18;
    transform: translate3d(7px, -18px, 0) scale(1.14);
  }

  .menuFlareSmoke b:nth-child(2) {
    transform: translate3d(16px, -40px, 0) scale(1.32);
  }

  .menuFlareSmoke b:nth-child(3) {
    transform: translate3d(27px, -66px, 0) scale(1.5);
  }

  .menuFlareSmoke b:nth-child(4) {
    transform: translate3d(39px, -94px, 0) scale(1.68);
  }

  .menuFlareSmoke b:nth-child(5) {
    opacity: 0.14;
    transform: translate3d(53px, -122px, 0) scale(1.86);
  }

  .menuFlareSmoke b:nth-child(6) {
    opacity: 0.1;
    transform: translate3d(67px, -150px, 0) scale(2.02);
  }
}

@media (max-width: 420px) {
  .speechBubble {
    top: clamp(48px, 15vw, 58px);
    max-width: min(52%, 12rem);
    min-height: 20px;
    padding: 3px 6px;
    font-size: 0.5rem;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .coopActivityToast {
    top: calc(133px + var(--safe-top));
    max-width: min(36%, 15rem);
  }

  .speechBubble {
    top: calc(108px + var(--safe-top));
    max-width: min(32%, 13.5rem);
    min-height: 20px;
    padding: 3px 6px;
    font-size: 0.5rem;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse),
  (orientation: landscape) and (max-height: 520px) and (hover: none) {
  body[data-game-state="PLAYING"] .speechBubble {
    top: calc(108px + var(--safe-top));
    max-width: min(32%, 12.5rem);
  }
}

@keyframes statusBlink {
  0%,
  72% {
    opacity: 1;
  }

  73%,
  100% {
    opacity: 0.35;
  }
}

@keyframes startDrift {
  from {
    transform: scale(1.012) translate3d(-0.15%, 0, 0);
  }

  to {
    transform: scale(1.025) translate3d(0.15%, -0.25%, 0);
  }
}

@keyframes menuStarTwinkle {
  0%,
  100% {
    opacity: 0.22;
    transform: scale(1);
  }

  28% {
    opacity: 0.82;
  }

  52% {
    opacity: 0.38;
    transform: scale(0.72);
  }

  76% {
    opacity: 1;
    transform: scale(1.22);
  }
}

@keyframes menuMoonDrift {
  from {
    transform: translate3d(0, 0, 0) rotate(-0.8deg);
  }

  to {
    transform: translate3d(-4px, 2px, 0) rotate(0.8deg);
  }
}

@keyframes menuFlarePulse {
  0%,
  100% {
    opacity: 0.56;
    transform: translateX(-50%) scale(0.82);
  }

  42% {
    opacity: 0.9;
    transform: translateX(-50%) scale(1.08);
  }

  74% {
    opacity: 0.7;
    transform: translateX(-50%) scale(0.94);
  }
}

@keyframes menuFlareLick {
  0%,
  100% {
    transform: translateX(-2%) rotate(-2deg) scaleY(0.88);
  }

  36% {
    transform: translateX(5%) rotate(3deg) scaleY(1.08);
  }

  68% {
    transform: translateX(-5%) rotate(-4deg) scaleY(0.96);
  }
}

@keyframes menuFlareLickInner {
  0%,
  100% {
    transform: translateX(4%) scaleY(0.82);
  }

  45% {
    transform: translateX(-3%) scaleY(1.12);
  }

  72% {
    transform: translateX(2%) scaleY(0.96);
  }
}

@keyframes menuFlareSparkA {
  0%,
  52% {
    opacity: 0;
    transform: translate(0, 3px);
  }

  58% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-8px, -13px);
  }
}

@keyframes menuFlareSparkB {
  0%,
  64% {
    opacity: 0;
    transform: translate(0, 2px);
  }

  70% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate(7px, -11px);
  }
}

@keyframes menuFlareSmokeTrail {
  0% {
    opacity: 0;
    transform: translate3d(0, 4px, 0) scale(0.62);
  }

  12% {
    opacity: 0.42;
  }

  68% {
    opacity: 0.28;
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--smoke-drift), calc(0px - var(--smoke-rise)), 0) scale(2.05);
  }
}

@media (prefers-reduced-motion: reduce) and (orientation: landscape) and (max-height: 520px) {
  /* With the crawl animation disabled, expand its viewport into the one outer
     scroller rather than introducing a second vertical scroll surface. */
  .creditsViewport {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
}

@keyframes menuIndustrialBlink {
  0%,
  68%,
  79%,
  100% {
    opacity: 0.62;
  }

  69%,
  73% {
    opacity: 1;
  }

  74%,
  78% {
    opacity: 0.26;
  }
}

@keyframes loadingPixel {
  0%,
  35% {
    opacity: 0.25;
    transform: translateY(0);
  }

  36%,
  66% {
    opacity: 1;
    transform: translateY(-4px);
  }

  67%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
}

@keyframes creditsRise {
  from {
    transform: translateY(3%);
  }

  to {
    transform: translateY(-72%);
  }
}

@keyframes creditsScrollEdgePulse {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}

@keyframes dossierCardIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }

  38% {
    opacity: 1;
  }

  55% {
    transform: translateX(-2px);
  }

  72% {
    transform: translateX(2px);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes dossierScan {
  from { transform: translateY(-55%); }
  to { transform: translateY(55%); }
}

@keyframes dossierSignal {
  0%,
  45% { opacity: 0.35; }

  46%,
  100% { opacity: 1; }
}

/* Gesture-safe floating touch controls.
   The viewport edge is deliberately not part of any hit target: Android/iOS
   system gestures keep a fallback gutter even when safe-area insets report 0. */
@media (pointer: coarse), (hover: none) and (max-width: 760px) {
  .touchControls {
    right: max(30px, calc(var(--safe-right) + 22px));
    bottom: max(34px, calc(var(--safe-bottom) + 22px));
    left: max(30px, calc(var(--safe-left) + 22px));
  }

  .touchCluster {
    gap: clamp(11px, 2.8vw, 16px);
  }

  .touchControls button {
    width: clamp(76px, 17vw, 92px);
    height: clamp(72px, 16vw, 86px);
  }

  .touchControls .touchJump {
    width: clamp(88px, 20vw, 106px);
    height: clamp(82px, 18vw, 98px);
  }

  .touchIcon {
    font-size: clamp(1.75rem, 5.8vw, 2.2rem);
  }

  .touchLabel {
    font-size: clamp(0.55rem, 1.85vw, 0.7rem);
  }
}

@media (orientation: portrait) {
  .touchControls {
    right: max(32px, calc(var(--safe-right) + 22px));
    bottom: max(42px, calc(var(--safe-bottom) + 26px));
    left: max(32px, calc(var(--safe-left) + 22px));
  }

  .touchControls button {
    width: clamp(78px, 20vw, 94px);
    height: clamp(74px, 19vw, 90px);
  }

  .touchControls .touchJump {
    width: clamp(90px, 23.5vw, 110px);
    height: clamp(84px, 22vw, 102px);
  }
}

/* A stacked action cluster leaves a real centre gap on narrow phones while
   keeping every target substantially larger than the 44px accessibility floor. */
@media (orientation: portrait) and (max-width: 440px) {
  .touchActions {
    align-items: end;
    flex-direction: column;
    gap: 11px;
  }
}

@media (orientation: portrait) and (max-width: 340px) {
  .touchControls {
    right: max(24px, calc(var(--safe-right) + 18px));
    bottom: max(36px, calc(var(--safe-bottom) + 22px));
    left: max(24px, calc(var(--safe-left) + 18px));
  }

  .touchCluster {
    gap: 10px;
  }

  .touchControls button {
    width: 64px;
    height: 62px;
  }

  .touchControls .touchJump {
    width: 76px;
    height: 70px;
  }

  .touchIcon {
    font-size: 1.55rem;
  }

  .touchLabel {
    font-size: 0.48rem;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .touchControls {
    right: max(36px, calc(var(--safe-right) + 24px));
    bottom: max(32px, calc(var(--safe-bottom) + 22px));
    left: max(36px, calc(var(--safe-left) + 24px));
  }

  .touchCluster {
    gap: 12px;
  }

  .touchControls button {
    width: 84px;
    height: 80px;
  }

  .touchControls .touchJump {
    width: 98px;
    height: 90px;
  }

  .touchIcon {
    font-size: 1.7rem;
  }

  .touchLabel {
    font-size: 0.52rem;
  }
}

/* Interface readability pass. The stage scales with the shorter viewport
   dimension, but many DOM labels used to scale only with viewport width and
   then stop at very small caps. Give desktop/tablet copy a genuinely readable
   floor while keeping the deliberately compact short-landscape layout. */
@media (min-width: 761px) and (min-height: 600px) {
  .speechBubble {
    max-width: min(42%, 21rem);
    min-height: 26px;
    padding: 5px 8px;
    font-size: 0.72rem;
  }

  .gameMessage {
    font-size: clamp(0.72rem, 1vw, 0.95rem);
  }

  .gameOverStatus,
  .resultScore span,
  .creditsResult > div:not(.creditsActionRow) > span,
  .resultMetric span,
  .newBestNotice,
  .shareStatus {
    font-size: 0.68rem;
  }

  .creditsResult .pixelButton,
  .resultActions .pixelButton {
    min-height: 48px;
    font-size: 0.86rem;
  }

  .hallMenuDialog {
    width: min(100%, 860px);
  }

  .hallMenuDialog > .hallCasualNote,
  .hallQualificationNote,
  .hallCasualNote,
  .hallEntryLead,
  .hallPrivacyNote,
  .hallStatus,
  .hallSubmitStatus {
    font-size: 0.66rem;
  }

  .hallPanelHeader h3,
  .hallEntryHeading h3 {
    font-size: 1.3rem;
  }

  .hallEyebrow {
    font-size: 0.66rem;
  }

  .hallTable {
    font-size: 0.7rem;
    line-height: 1.35;
  }

  .hallTable th,
  .hallTable td {
    height: 32px;
    padding: 6px 7px;
  }

  .hallAssistedNoticeText {
    font-size: 0.76rem;
  }

  .hallProfileSummaryLabel,
  .hallField {
    font-size: 0.62rem;
  }

  .hallProfileSummary strong {
    font-size: 0.82rem;
  }

  .hallProfileSummary [data-hall-profile-country] {
    font-size: 0.68rem;
  }

  .hallField input,
  .hallField select,
  .hallSubmitButton {
    font-size: 0.78rem;
  }

  .multiplayerProfileLead {
    font-size: 0.94rem;
  }

  .multiplayerDisclosure,
  .multiplayerUnranked,
  .multiplayerStatus,
  .multiplayerLobbyStatus {
    font-size: 0.74rem;
  }

  .multiplayerField,
  .profileChoiceGroup > legend {
    font-size: 0.72rem;
  }

  .multiplayerField input,
  .multiplayerField select,
  .profileSubmitButton,
  .multiplayerPrimaryActions .pixelButton {
    font-size: 0.86rem;
  }

  .profileColorOption {
    font-size: 0.66rem;
  }

  .multiplayerTextButton {
    font-size: 0.8rem;
  }
}

@media (max-width: 760px) and (min-height: 521px) {
  .hallPanelHeader h3,
  .hallEntryHeading h3 {
    font-size: clamp(1rem, 4.2vw, 1.24rem);
  }

  .hallEyebrow {
    font-size: clamp(0.6rem, 2.35vw, 0.68rem);
  }

  .hallMenuDialog > .hallCasualNote,
  .hallQualificationNote,
  .hallCasualNote,
  .hallEntryLead,
  .hallPrivacyNote,
  .hallStatus,
  .hallSubmitStatus {
    font-size: clamp(0.6rem, 2.35vw, 0.68rem);
  }

  .hallTable {
    font-size: clamp(0.62rem, 2.3vw, 0.68rem);
    line-height: 1.35;
  }

  .hallTable th,
  .hallTable td {
    height: 30px;
    padding: 5px 6px;
  }

  .hallProfileSummaryLabel,
  .hallField {
    font-size: clamp(0.58rem, 2.25vw, 0.68rem);
  }

  .hallProfileSummary strong,
  .hallField input,
  .hallField select,
  .hallSubmitButton {
    font-size: clamp(0.68rem, 2.8vw, 0.82rem);
  }

  .hallProfileSummary [data-hall-profile-country] {
    font-size: clamp(0.6rem, 2.4vw, 0.7rem);
  }

  .creditsResult .pixelButton,
  .resultActions .pixelButton,
  .profileSubmitButton,
  .multiplayerPrimaryActions .pixelButton {
    font-size: clamp(0.72rem, 2.8vw, 0.84rem);
  }

  .multiplayerTextButton,
  .hallMenuCloseButton {
    font-size: clamp(0.68rem, 2.7vw, 0.8rem);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .multiplayerProfileLead,
  .multiplayerDisclosure,
  .multiplayerUnranked,
  .multiplayerStatus,
  .multiplayerLobbyStatus {
    font-size: 0.54rem;
  }

  .hallEyebrow,
  .hallQualificationNote,
  .hallCasualNote,
  .hallEntryLead,
  .hallPrivacyNote,
  .hallStatus,
  .hallSubmitStatus {
    font-size: 0.54rem;
  }

  .hallTable {
    font-size: 0.56rem;
    line-height: 1.3;
  }

  .creditsResult .pixelButton,
  .resultActions .pixelButton,
  .profileSubmitButton,
  .multiplayerPrimaryActions .pixelButton,
  .multiplayerTextButton {
    font-size: 0.58rem;
  }
}

@media (max-width: 760px) {
  .dossierFrame {
    width: 96%;
    height: 94%;
    padding: clamp(7px, 2vw, 12px);
    gap: clamp(4px, 1.2vw, 8px);
  }

  .briefingAvatarGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-right: 2px;
  }

  .briefingAvatarCard {
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .briefingAvatarIdentity {
    grid-row: 1 / 3;
  }

  .briefingAvatarPlus,
  .briefingAvatarMinus {
    font-size: clamp(0.45rem, 1.75vw, 0.58rem);
  }
}

@media (max-width: 430px) {
  .dossierHeader {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .dossierHeader > span:last-of-type {
    display: none;
  }

  .dossierCloseButton {
    width: 34px;
    height: 34px;
  }

  .briefingAvatarGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .briefingAvatarCard {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 7px 9px;
  }

  .briefingAvatarIdentity canvas {
    width: 52px;
    height: 52px;
  }

  .briefingAvatarIdentity h4 {
    min-height: 0;
    font-size: clamp(0.48rem, 2.25vw, 0.62rem);
  }

  .briefingAvatarPlus,
  .briefingAvatarMinus {
    font-size: clamp(0.46rem, 2.12vw, 0.6rem);
  }

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

@media (orientation: landscape) and (max-height: 520px) {
  .dossierFrame {
    width: 97%;
    height: 96%;
    padding: 7px 10px;
    gap: 4px;
  }

  .dossierHeader > span:last-of-type {
    display: none;
  }

  .dossierHeader {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .dossierCloseButton {
    width: 28px;
    height: 28px;
  }

  .briefingRosterHeading h3 {
    font-size: clamp(0.64rem, 2.8vh, 0.9rem);
  }

  .briefingRosterHeading p {
    display: none;
  }

  .briefingAvatarGrid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .briefingAvatarCard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
    gap: 3px;
    padding: 4px;
  }

  .briefingAvatarIdentity {
    grid-row: auto;
  }

  .briefingAvatarIdentity canvas {
    width: 42px;
    height: 42px;
  }

  .briefingAvatarIdentity h4,
  .briefingAvatarPlus,
  .briefingAvatarMinus {
    font-size: clamp(0.38rem, 1.55vh, 0.48rem);
  }

  .briefingNavigation {
    min-height: 32px;
  }

  .briefingNavigationButton {
    min-height: 31px;
    padding: 3px 8px;
  }
}

/* Android can place its fullscreen-exit notice over the bottom of the page
   without changing the visual viewport or exposing an inset to CSS. Reserve a
   stable touch-device lane inside the Briefing itself so progress and both
   navigation actions remain usable while that transient system UI is visible. */
@media (pointer: coarse), (max-width: 760px), (orientation: landscape) and (max-height: 520px) {
  .dossierFrame {
    --briefing-system-overlay-clearance: clamp(104px, 14dvh, 132px);
    padding-bottom: max(
      var(--briefing-system-overlay-clearance),
      calc(var(--safe-bottom) + 92px)
    );
  }

  .briefingNavigationButton {
    min-height: 44px;
  }
}

/* Crisp pixel heading typography. Use the real display face without synthetic
   bold or soft glow: those effects blur the square glyph edges, especially at
   the fractional sizes needed by longer translations. */
h1,
h2,
h3,
h4,
.dossierCard,
.aboutGenreTitle {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-synthesis: none;
  font-kerning: none;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}

.startContent h1,
.briefingRosterHeading h3,
.creditsCrawl h2,
.aboutDialog h2,
.multiplayerLobby h3 {
  text-shadow: 2px 2px 0 #02040d;
}

.startContent h1 .titleHot {
  text-shadow: 3px 3px 0 #6b1d0b, 6px 6px 0 #02040d;
}

.dossierCard {
  text-shadow: 3px 3px 0 #02040d;
}

.dossierCardCommand {
  text-shadow: 4px 4px 0 #641c0b, 7px 7px 0 #02040d;
}

.briefingAvatarIdentity h4,
.aboutGenreTitle {
  text-shadow: 1px 1px 0 #02040d;
}

/* Silkscreen is drawn on an eight-unit grid. Discrete sizes and whole-pixel
   spacing keep every display stroke aligned instead of sampling fluid vw/rem
   values between pixels. */
.startContent h1 {
  font-size: 64px;
  line-height: 56px;
  letter-spacing: -4px;
}

.dossierCard {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 1px;
}

.dossierCardCommand {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 8px;
}

.resultCard h2,
.pauseCard h2 {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0;
}

.aboutDialog h2,
.briefingRosterHeading h3,
.hallPanelHeader h3,
.hallEntryHeading h3,
.creditsCrawl h2,
.multiplayerLobby h3 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1px;
}

.briefingAvatarIdentity h4,
.aboutGenreTitle {
  font-size: 8px;
  line-height: 12px;
  letter-spacing: 0;
}

/* Short gameplay readouts use the same real pixel face at legible grid sizes.
   Speech, forms and long disclosures deliberately keep the prose mono face. */
.hudPanel,
.hudCenter,
.speedBoostBadge,
.officialStatus,
.devBadge {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-synthesis: none;
  font-kerning: none;
  font-variant-ligatures: none;
  text-rendering: optimizeSpeed;
}

.hudScoreLabel,
.shieldStatus,
.pedalPowerDetail,
.hudEtaLabel,
.hudLabel,
.phaseLabel,
.officialStatus,
.devBadge,
.speedBoostBadge {
  font-size: 8px;
  line-height: 12px;
  letter-spacing: 0;
}

.hudScoreValue,
.scoreValue,
.timer {
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0;
}

@media (max-width: 760px) and (min-height: 521px) {
  body[data-game-state="START"] .startContent h1 {
    font-size: 32px;
    line-height: 32px;
    letter-spacing: -2px;
  }

  .dossierCard {
    font-size: 16px;
    line-height: 24px;
  }

  .dossierCardCommand {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 4px;
  }

  body[data-game-state="GAME_OVER"] .resultCard h2,
  .pauseCard h2 {
    font-size: 24px;
    line-height: 32px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .startContent h1 {
    font-size: 24px;
    line-height: 24px;
    letter-spacing: -1px;
  }

  .dossierCard {
    font-size: 16px;
    line-height: 24px;
  }

  .dossierCardCommand {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 4px;
  }

  .resultCard h2,
  .pauseCard h2 {
    font-size: 24px;
    line-height: 32px;
  }
}

@media (max-width: 320px) {
  body[data-game-state="START"] .startContent h1 {
    font-size: 24px;
    line-height: 24px;
    letter-spacing: -1px;
  }
}

/* Keep the fixed soundtrack/version strip clear of the controls on short
   iPhone landscape viewports, including the home-indicator safe area. */
@media (orientation: landscape) and (max-height: 400px) {
  body[data-game-state="START"] .startLead {
    display: none;
  }

  body[data-game-state="START"] .instructions {
    margin-top: 2px;
    gap: 2px 6px;
    font-size: 6px;
    line-height: 8px;
  }

  body[data-game-state="START"] .instructions > span {
    gap: 2px;
  }

  body[data-game-state="START"] .instructions kbd {
    min-width: 20px;
    min-height: 20px;
    padding: 1px 3px;
    border-width: 1px;
    box-shadow: 0 2px 0 #02040d, inset 1px 1px 0 rgba(255, 255, 255, 0.13);
  }

  body[data-game-state="START"] .menuFooter {
    bottom: max(3px, var(--safe-bottom));
  }
}

@media (orientation: landscape) and (max-height: 400px) and (pointer: coarse) {
  body[data-game-state="START"] .instructions {
    display: none;
  }
}

/* A single, universal entry gesture lets iOS/Android authorize audible media
   while the soundtrack is already downloading. The menu remains covered until
   the browser confirms playback, with a timed fail-open path in game.js. */
.menuEntryDialog {
  position: fixed;
  inset: 0;
  z-index: 1300;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding:
    calc(var(--safe-top) + 16px)
    calc(var(--safe-right) + 16px)
    calc(var(--safe-bottom) + 16px)
    calc(var(--safe-left) + 16px);
  box-sizing: border-box;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 42%, rgba(23, 85, 113, 0.34), transparent 45%),
    rgba(1, 4, 13, 0.985);
  border: 0;
  overscroll-behavior: none;
}

.menuEntryDialog[open] {
  display: grid;
  place-items: center;
}

.menuEntryDialog::backdrop {
  background: #01040d;
}

.menuEntryDialog .immersiveEntryCard {
  position: relative;
  width: min(88vw, 360px);
  padding: clamp(20px, 5vw, 28px);
  box-sizing: border-box;
  text-align: center;
  background: rgba(4, 15, 34, 0.985);
  border: 2px solid rgba(89, 220, 255, 0.86);
  box-shadow:
    0 0 0 3px rgba(1, 5, 14, 0.94),
    0 16px 60px rgba(0, 0, 0, 0.72),
    inset 0 0 28px rgba(89, 220, 255, 0.06);
}

.menuEntryDialog .immersiveEntrySignal {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  background: #7dffab;
  box-shadow: 0 0 12px rgba(125, 255, 171, 0.8);
  animation: menuEntrySignal 1.1s steps(2, end) infinite;
}

.menuEntryGameLogo {
  display: block;
  width: min(100%, 280px);
  height: auto;
  margin: 0 auto 16px;
  filter: drop-shadow(0 4px 0 rgba(1, 5, 14, 0.86));
}

.menuEntryLoading {
  min-height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.menuEntryLoading span {
  width: 8px;
  height: 8px;
  background: var(--cyan);
  animation: loadingPixel 0.9s steps(2, end) infinite;
}

.menuEntryLoading span:nth-child(2) { animation-delay: 0.15s; }
.menuEntryLoading span:nth-child(3) { animation-delay: 0.3s; }

#menuEntryStatus {
  min-height: 12px;
  margin: 8px 0 0;
  color: #8de9ff;
  font-family: var(--font-pixel);
  font-size: 8px;
  line-height: 12px;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #02040d;
}

.menuEntryDialog .pixelButton {
  width: min(100%, 280px);
  min-height: 52px;
  margin: 14px auto 0;
}

.menuEntryDisclosure {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(89, 220, 255, 0.28);
}

.menuEntryDisclaimer,
.menuEntryMotto,
.menuEntryCreator {
  font-family: var(--font-pixel);
  text-shadow: 1px 1px 0 #02040d;
}

.menuEntryDisclaimer {
  color: #b9c9d9;
  font-size: 8px;
  line-height: 12px;
  letter-spacing: 0.35px;
}

.menuEntryMotto {
  margin-top: 8px;
  color: #7dffab;
  font-size: 9px;
  line-height: 13px;
  letter-spacing: 0.45px;
}

.menuEntryCreator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 9px;
  color: #8de9ff;
  font-size: 8px;
  line-height: 11px;
  letter-spacing: 0.3px;
}

.menuEntryCreator img {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.menuEntryDialog[data-audio-state="loading"] #menuEntryButton,
.menuEntryDialog[data-audio-state="starting"] #menuEntryButton,
.menuEntryDialog[data-audio-state="ready"] .menuEntryLoading,
.menuEntryDialog[data-audio-state="fallback"] .menuEntryLoading,
.menuEntryDialog[data-audio-state="ready"] #menuEntryStatus,
.menuEntryDialog[data-audio-state="fallback"] #menuEntryStatus,
.menuEntryDialog[data-audio-state="error"] .menuEntryLoading {
  display: none;
}

.menuEntryDialog[data-audio-state="error"] #menuEntryStatus {
  margin-bottom: 14px;
  color: #ffd36f;
}

/* The menu toolbar has one visual baseline. This also covers 431–440 px
   iPhones, which previously missed the narrower-phone 44 px guard. */
body[data-game-state="START"] .gameTopbarTitle,
body[data-game-state="START"] .devPerformancePanel,
body[data-game-state="START"] .devPerformanceCompact {
  display: none;
}

body[data-game-state="START"] .topbarControls {
  position: absolute;
  top: calc(var(--safe-top) + 5px);
  left: 50%;
  width: max-content;
  height: 44px;
  justify-self: auto;
  justify-content: center;
  align-items: center;
  transform: translateX(-50%);
}

body[data-game-state="START"] .quickLanguagePicker,
body[data-game-state="START"] #quickLanguageSelect,
body[data-game-state="START"] .iconButton {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  align-self: center;
}

body[data-game-state="START"] .audioButton,
body[data-game-state="START"] .pauseButton,
body[data-game-state="START"] .settingsButton {
  width: 44px;
  flex-basis: 44px;
}

/* Make release identity and attribution readable even in the compact desktop
   strip; portrait moves the same two pills into the menu's normal flow. */
.menuMusicCredit,
.buildVersion {
  padding: 5px 8px;
  color: #d9f7ff;
  background: rgba(2, 7, 19, 0.94);
  border-color: rgba(106, 187, 220, 0.72);
  font-family: var(--font-pixel);
  font-size: 8px;
  line-height: 12px;
  letter-spacing: 0;
}

.menuMusicCredit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.menuMusicLabel {
  color: #ffd36f;
  white-space: nowrap;
}

@media (orientation: portrait) {
  body[data-game-state="START"] .menuFooter {
    position: static;
    width: min(92%, 390px);
    margin-top: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    pointer-events: auto;
  }

  body[data-game-state="START"] .menuMusicCredit {
    max-width: 100%;
    text-align: center;
  }
}

/* Short landscape has too little vertical room to reserve a centered toolbar
   lane above the title. Keep the controls on one baseline at the right edge. */
@media (orientation: landscape) and (max-height: 520px) {
  body[data-game-state="START"] .topbarControls {
    right: max(4px, var(--safe-right));
    left: auto;
    transform: none;
  }
}

@media (orientation: landscape) and (max-height: 440px) {
  body[data-game-state="START"] .instructions {
    display: none;
  }
}

/* Preserve attribution on compact 320 px phones by spending the limited
   height on the music/build pills instead of desktop keyboard hints. */
@media (orientation: portrait) and (max-width: 340px) and (max-height: 640px) {
  body[data-game-state="START"] .menuFooter {
    margin-top: 3px;
    gap: 2px;
  }

  body[data-game-state="START"] .instructions {
    display: none;
  }

  body[data-game-state="START"] .menuMusicLabel {
    display: none;
  }
}

@media (max-width: 360px), (max-height: 520px) {
  .menuEntryDialog .immersiveEntryCard {
    padding: 20px 18px;
  }

  .menuEntryGameLogo {
    width: min(100%, 210px);
    margin-bottom: 10px;
  }

  .menuEntryDialog .pixelButton {
    margin-top: 10px;
  }

  .menuEntryDisclosure {
    margin-top: 10px;
    padding-top: 9px;
  }

  .menuEntryDisclaimer {
    font-size: 7px;
    line-height: 10px;
    letter-spacing: 0.2px;
  }

  .menuEntryMotto {
    margin-top: 6px;
    font-size: 8px;
    line-height: 11px;
  }

  .menuEntryCreator {
    gap: 5px;
    margin-top: 6px;
    font-size: 7px;
    line-height: 10px;
  }

  .menuEntryCreator img {
    width: 21px;
    height: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menuEntryLoading span,
  .menuEntryDialog .immersiveEntrySignal {
    animation: none;
  }
}

@keyframes menuEntrySignal {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0.35; }
}

/* Duck and Jump read and behave as one action cluster. Keep this final so
   compact layout rules cannot restore the former gap. */
.touchActions {
  gap: 0;
}