:root {
  color-scheme: dark;
  --ns-ink: #08090c;
  --ns-night: #101321;
  --ns-panel: #191b25;
  --ns-text: #f8f0d5;
  --ns-muted: #bcb4a3;
  --ns-gold: #f2c94c;
  --ns-red: #ef4f43;
  --ns-mint: #43d9ad;
  --ns-blue: #4ba3ff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--ns-ink);
  color: var(--ns-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overscroll-behavior: none;
}

body {
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--ns-mint);
  outline-offset: 3px;
}

.game-shell {
  width: min(100vw, calc(100svh * 9 / 16), 540px);
}

.game-frame {
  position: relative;
  container-type: size;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 100svh;
  overflow: hidden;
  background: var(--ns-night);
  border: 1px solid rgba(248, 240, 213, 0.24);
  border-radius: 6px;
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.game-canvas,
.game-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.loading-message {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Round-4 splash (chosen on measurement: center-third mean-lum 10 vs 22
     for the v2 -- the request wanted the text's home calm and dark). */
  background: var(--ns-ink) url("./assets/art/branding/loading-splash.png?v=307") center / cover no-repeat;
  image-rendering: pixelated;
  color: var(--ns-text);
  font-size: 14px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.title-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  background: var(--ns-night);
  color: var(--ns-text);
}

.title-overlay::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 66%;
  background: rgba(4, 6, 16, 0.16);
  pointer-events: none;
}

.title-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.title-brand {
  position: absolute;
  z-index: 2;
  top: max(40px, calc(env(safe-area-inset-top) + 10px));
  left: 50%;
  display: grid;
  justify-items: center;
  width: 15.2%;
  transform: translateX(-50%);
}

.title-brand img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.72));
}

.title-brand span {
  margin-top: 7px;
  font-size: clamp(8px, 1.7vw, 10px);
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--ns-ink);
}

.title-name {
  position: absolute;
  z-index: 2;
  top: 20.5%;
  right: 4%;
  left: 4%;
  text-align: center;
  text-transform: uppercase;
}

.title-name h1,
.title-name p {
  margin: 0;
  letter-spacing: 0;
}

.title-name h1 {
  display: inline-block;
  padding: 0 14px 7px;
  border-top: 3px solid var(--ns-gold);
  border-bottom: 3px solid var(--ns-mint);
  color: #fff4c7;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(39px, 11vw, 60px);
  font-weight: 900;
  line-height: 0.95;
  text-shadow:
    2px 0 0 #11131f,
    -2px 0 0 #11131f,
    0 2px 0 #11131f,
    0 -2px 0 #11131f,
    0 5px 0 #ef4f43,
    0 9px 0 #11131f;
  transform: skew(-4deg);
}

.title-name p {
  margin-top: 14px;
  color: var(--ns-gold);
  font-size: clamp(11px, 3vw, 16px);
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--ns-ink), 0 3px 0 #173d57;
}

.title-hero {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: calc(17.25% - 25px);
  left: 8%;
  display: grid;
  height: 50%;
  place-items: end center;
  pointer-events: none;
}

.title-hero::after {
  position: absolute;
  z-index: 1;
  bottom: -5px;
  left: 50%;
  width: min(31%, 150px);
  height: 10px;
  border-radius: 50%;
  background: rgba(4, 5, 8, 0.58);
  content: "";
  transform: translateX(-50%);
}

.title-hero img {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 31cqh;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
}

.title-choose-prompt {
  position: absolute;
  z-index: 5;
  top: 37%;
  right: 20%;
  left: 20%;
  min-height: 44px;
  border: 2px solid var(--ns-gold);
  border-radius: 4px;
  background: rgba(8, 9, 12, 0.78);
  box-shadow: 0 4px 0 rgba(8, 9, 12, 0.7);
  color: var(--ns-gold);
  font-size: clamp(12px, 3.4vw, 17px);
  font-weight: 900;
  text-align: center;
  text-shadow: 2px 2px 0 var(--ns-ink);
  text-transform: uppercase;
  cursor: pointer;
}

.title-menu {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: 4%;
  left: 7%;
  display: grid;
  /* Start Game takes the row; the sound toggle sits beside it instead of
     floating over it -- as a corner overlay the pill collided with Start on
     short frames (owner screenshot, 2026-08-03). */
  grid-template-columns: 1fr auto;
  gap: 9px;
}

.title-character-button { grid-column: 1 / -1; }

.title-menu button,
.title-confirm-character {
  width: 100%;
  min-height: 48px;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
}

.title-character-button {
  display: none;
}

.title-character-button span { color: var(--ns-mint); }

.title-start-button {
  border: 2px solid var(--ns-text);
  background: #236f91;
  box-shadow: 0 5px 0 #123b53;
  color: var(--ns-text);
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 800;
}

.title-start-button i {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 9px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--ns-gold);
}

.title-start-button:disabled { cursor: default; opacity: 0.7; }

.title-player-count {
  position: absolute;
  z-index: 4;
  bottom: max(5px, env(safe-area-inset-bottom));
  color: rgba(248, 240, 213, 0.68);
  font-size: clamp(7px, 1.8vw, 9px);
  text-transform: uppercase;
}

.title-player-count { left: 3%; }

/* Site link (owner, 2026-08-26): quiet arcade-cabinet placement opposite the
   player count -- same muted strip, gold so it reads as a link, padded up to
   a 44px touch target without visually inflating the strip. */
.title-site-link {
  position: absolute;
  z-index: 4;
  right: 3%;
  /* Same anchor as .title-player-count so the two baselines actually align
     (code review: a 44px flex box bottom-anchored at 0 floated the text
     ~12px above the count on non-notch screens). The 44px touch target
     comes from the ::before expansion, not from inflating the text box. */
  bottom: max(5px, env(safe-area-inset-bottom));
  color: var(--ns-gold);
  font-size: clamp(7px, 1.8vw, 9px);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 var(--ns-ink);
}

.title-site-link::before {
  content: "";
  position: absolute;
  /* 9px text + 28 above + 8 below = 45px effective target. */
  inset: -28px -12px -8px;
}

.title-site-link:active { transform: translateY(1px); }

/* Was 7-9px text at 68% opacity on a transparent background with no border --
   it had a 44px touch target but nothing that read as a control. Now a real
   pill button in the title screen's own gold language, matching the character
   and start buttons, with press feedback and a clear on/off state. */
.title-sound-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid rgba(242, 201, 76, 0.9);
  border-radius: 4px;
  background: rgba(5, 7, 11, 0.82);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.66);
  color: var(--ns-gold);
  font-size: clamp(10px, 2.6vw, 13px);
  font-weight: 900;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 90ms steps(2, end), background-color 90ms steps(2, end);
}

.title-sound-button::before {
  content: "\266B";
  font-size: 1.15em;
  line-height: 1;
}

/* aria-pressed is true when sound is OFF (it is a mute toggle), so the muted
   state is the one that dims and gets a slash. */
.title-sound-button[aria-pressed="true"] {
  border-color: rgba(188, 180, 163, 0.7);
  color: rgba(188, 180, 163, 0.9);
}

/* Same BMP glyph, dimmed -- U+1D122 (plane-1 musical symbol) rendered as tofu
   on system monospace stacks. The accessible state lives in the label text and
   aria-pressed, not in this decoration. */
.title-sound-button[aria-pressed="true"]::before { opacity: 0.4; }

.title-sound-button:active {
  transform: translateY(3px);
  background: rgba(242, 201, 76, 0.22);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.66);
}

.title-sound-button:focus-visible {
  outline: 3px solid var(--ns-mint);
  outline-offset: 2px;
}

.title-character-panel {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: 7px;
  padding: max(18px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom));
  background: rgba(8, 9, 12, 0.97);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 18px, 0) scale(0.99);
  visibility: hidden;
  transition:
    opacity 220ms ease-out,
    transform 260ms cubic-bezier(0.2, 0.82, 0.24, 1),
    visibility 0s linear 260ms;
  will-change: opacity, transform;
}

.title-character-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  visibility: visible;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .title-character-panel {
    transform: none;
    transition-duration: 1ms;
  }

  .title-transition,
  .world-map-overlay,
  .world-map-player {
    transition-duration: 1ms;
  }

  .world-map-node.is-current {
    animation: none;
    box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.28), 0 5px 0 rgba(5, 6, 10, 0.78);
  }

  /* The NEXT badge is its own pseudo-element animation; the node override
     above does not reach it. */
  .world-map-node.is-current::before {
    animation: none;
  }
}

.title-character-panel > header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  border-bottom: 1px solid rgba(248, 240, 213, 0.2);
  padding-bottom: 10px;
}

.title-character-panel header span,
.title-character-panel header strong {
  display: block;
  text-transform: uppercase;
}

.title-character-panel header span { color: var(--ns-mint); font-size: 9px; }
.title-character-panel header strong { margin-top: 4px; font-size: clamp(16px, 4.4vw, 22px); }

.title-character-panel header button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(248, 240, 213, 0.2);
  border-radius: 4px;
  background: transparent;
  color: var(--ns-text);
  font-size: 25px;
  cursor: pointer;
}

.title-character-preview {
  position: relative;
  display: grid;
  min-height: 0;
  padding-bottom: 8px;
  place-items: end center;
}

.title-character-preview img {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 42cqh;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
}

.title-character-preview img[data-character="golf-bro"] {
  transform: translateX(13cqw);
}

.title-character-copy p {
  position: relative;
  z-index: 3;
  margin: 0;
  border-top: 1px solid rgba(248, 240, 213, 0.2);
  padding: 8px 8px 4px;
  background: rgba(8, 9, 12, 0.82);
  color: var(--ns-gold);
  font-size: 11px;
  text-align: center;
}

.title-character-copy dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 0;
}

.title-character-copy dl div {
  border-top: 1px solid rgba(248, 240, 213, 0.2);
  padding-top: 8px;
}

.title-character-copy dt { color: #74798a; font-size: 8px; text-transform: uppercase; }
.title-character-copy dd { margin: 4px 0 0; color: var(--ns-text); font-size: 9px; line-height: 1.35; }

.title-roster {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.title-roster button {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(248, 240, 213, 0.2);
  border-radius: 4px;
  padding: 3px;
  background: #11131a;
  cursor: pointer;
}

.title-roster button.is-active {
  border-color: var(--ns-gold);
  box-shadow: inset 0 0 0 1px var(--ns-gold);
}

.title-roster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
}

.title-confirm-character {
  border: 0;
  background: var(--ns-gold);
  color: var(--ns-ink);
  font-size: 11px;
  font-weight: 800;
}

.title-transition {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-content: center;
  background: var(--ns-ink);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}

.title-transition.is-active { opacity: 1; }
.title-transition span { color: var(--ns-mint); font-size: 11px; text-transform: uppercase; }
.title-transition strong { margin-top: 8px; color: var(--ns-gold); font-size: 34px; text-transform: uppercase; }

.world-map-overlay {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--ns-night);
  image-rendering: pixelated;
  opacity: 1;
  transition: opacity 240ms ease-out;
}

.world-map-overlay.is-leaving { opacity: 0; pointer-events: none; }

.world-map-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: max(11px, env(safe-area-inset-top)) 15px 9px;
  border-bottom: 3px solid #2a3040;
  background: rgba(7, 9, 13, 0.96);
}

.world-map-header img {
  grid-row: 1;
  grid-column: 2;
  justify-self: center;
  width: 62px;
  max-height: 62px;
  object-fit: contain;
}

.world-map-header > div:not(.world-map-meta) {
  grid-row: 1;
  grid-column: 1;
  justify-self: start;
}

.world-map-header span,
.world-map-header p,
.world-map-header h2 { margin: 0; letter-spacing: 0; text-transform: uppercase; }
.world-map-header span { color: var(--ns-mint); font-size: 9px; }
.world-map-header h2 { margin-top: 1px; font-family: Impact, Haettenschweiler, "Arial Black", sans-serif; font-size: 25px; line-height: 0.9; }
.world-map-header p { margin-top: 4px; color: var(--ns-gold); font-size: 9px; }
.world-map-header strong { color: var(--ns-gold); font-size: 12px; }

.world-map-meta {
  grid-row: 1;
  grid-column: 3;
  display: grid;
  justify-items: end;
  gap: 4px;
}

/* Map-corner site chip (owner, 2026-08-26): lives in the header meta column
   under the score so it never collides with the street grid below. */
.world-map-site-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* 24px VISUAL chip (a 44px pill would out-weigh the score it sits under);
     the ::after expansion supplies the 44px touch target invisibly. */
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid rgba(242, 201, 76, 0.55);
  border-radius: 3px;
  background: rgba(8, 9, 12, 0.6);
  color: var(--ns-gold);
  font-size: 8px;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}

.world-map-site-link::after {
  content: "";
  position: absolute;
  inset: -10px -8px;
}

.world-map-site-link:active { transform: translateY(1px); }

.world-map-meta small {
  color: var(--ns-muted);
  font-size: 8px;
  text-transform: uppercase;
}

.world-map-district {
  position: relative;
  overflow: hidden;
  background: #080b18 url("./assets/art/world-map/old-town-layout.webp") center / 100% 100% no-repeat;
}

.world-map-district::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(4, 7, 14, 0.08);
  content: "";
}

/* The dotted route lines were one polyline chaining venues in UNLOCK order, so
   they cut diagonally across buildings and the canal and read as noise rather
   than as routes. Removed in favour of the character actually walking the
   streets (punch list 2026-08-03 #3/#4). */
.world-map-hq {
  position: absolute;
  z-index: 10;
  top: var(--y);
  left: var(--x);
  display: grid;
  justify-items: center;
  width: 148px;
  color: var(--ns-text);
  text-shadow: 0 2px 0 #08090c;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.world-map-hq-callout {
  position: absolute;
  top: -34px;
  left: 50%;
  z-index: 2;
  padding: 7px 12px;
  border: 2px solid var(--ns-gold);
  background: rgba(5, 7, 11, 0.94);
  box-shadow: 0 0 12px rgba(242, 201, 76, 0.68);
  color: var(--ns-gold);
  font-size: 11px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: hq-callout-pulse 1.1s steps(2, end) infinite;
}

.world-map-hq-callout::after {
  position: absolute;
  top: 100%;
  left: 50%;
  border: 5px solid transparent;
  border-top-color: var(--ns-gold);
  content: "";
  transform: translateX(-50%);
}

.world-map-hq:focus-visible {
  outline: 3px solid var(--ns-gold);
  outline-offset: 5px;
}

.world-map-hq-building {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.72));
  image-rendering: pixelated;
}

.world-map-hq strong {
  margin-top: 4px;
  font-size: 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.world-map-hq small {
  margin-top: 2px;
  color: var(--ns-gold);
  font-size: 5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.world-map-node {
  position: absolute;
  z-index: 12;
  top: var(--y);
  left: var(--x);
  display: grid;
  width: 94px;
  height: 64px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 3px 0 rgba(5, 6, 10, 0.92));
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.world-map-node img { width: auto; max-width: 100%; height: auto; max-height: 54px; object-fit: contain; filter: saturate(0.45) brightness(0.65); image-rendering: pixelated; }
.world-map-node:is([data-venue="beverly"], [data-venue="w-scottsdale"], [data-venue="maya"], [data-venue="el-hefe"]) img {
  filter: brightness(0) invert(1);
}
.world-map-node.is-current { animation: world-map-node-pulse 1.1s steps(2, end) infinite; }
.world-map-node.is-current img { filter: none; }
.world-map-node.is-current:is([data-venue="beverly"], [data-venue="w-scottsdale"], [data-venue="maya"], [data-venue="el-hefe"]) img,
.world-map-node.is-selected:is([data-venue="beverly"], [data-venue="w-scottsdale"], [data-venue="maya"], [data-venue="el-hefe"]) img {
  filter: brightness(0) invert(1);
}
.world-map-node.is-complete { filter: drop-shadow(0 0 5px rgba(67, 217, 173, 0.88)) drop-shadow(0 3px 0 rgba(5, 6, 10, 0.92)); }
.world-map-node.is-complete::after { position: absolute; right: -8px; bottom: -8px; display: grid; width: 22px; height: 22px; place-items: center; border: 2px solid var(--ns-text); border-radius: 50%; background: var(--ns-mint); color: var(--ns-ink); font-size: 13px; font-weight: 900; content: "\2713"; }
.world-map-node.is-final { filter: drop-shadow(0 0 4px rgba(239, 79, 67, 0.75)) drop-shadow(0 3px 0 rgba(5, 6, 10, 0.92)); }
.world-map-node.is-selected img { filter: none; }
.world-map-node::before {
  content: none;
}

/* Progression affordance (punch list 2026-08-03 #5): the map has to answer
   "where do I go next?" at a glance. The current venue wears a pulsing gold
   NEXT tag; locked venues wear a padlock so they read as gated, not broken. */
.world-map-node.is-current::before {
  content: "NEXT";
  position: absolute;
  top: -21px;
  left: 50%;
  z-index: 2;
  padding: 3px 7px;
  border: 2px solid var(--ns-ink);
  background: var(--ns-gold);
  color: var(--ns-ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  transform: translateX(-50%);
  animation: world-map-next-bounce 1.1s steps(2, end) infinite;
}

.world-map-node.is-locked::before {
  content: "\1F512";
  position: absolute;
  right: -6px;
  top: -8px;
  z-index: 2;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid var(--ns-text);
  border-radius: 50%;
  background: rgba(5, 7, 11, 0.92);
  font-size: 11px;
}

@keyframes world-map-next-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

.world-map-player {
  position: absolute;
  z-index: 15;
  top: 71.5%;
  left: 18%;
  /* Height-constrained, width free (punch list #28): every character frame is
     755px tall but widths range 389-716, so the old fixed 48px WIDTH scaled
     wide characters (golf-bro, cowboy) down to ~51px while slim ones got the
     full 72px -- visibly different sizes on the same map. */
  width: auto;
  height: 72px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.8));
  image-rendering: pixelated;
  transform: translateX(-50%);
  transition: top 920ms steps(12, end), left 920ms steps(12, end);
}

.world-map-player.is-positioning {
  transition: none;
}

.world-map-player.is-facing-left {
  transform: translateX(-50%) scaleX(-1);
}

.world-map-player.is-traveling {
  animation: world-map-player-run 240ms steps(2, end) infinite;
}

.world-map-level {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
  padding: 12px 15px max(13px, env(safe-area-inset-bottom));
  border-top: 4px solid #343a4a;
  background: rgba(9, 11, 17, 0.98);
}
.world-map-level-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; }
.world-map-level-heading span { grid-column: 1; color: var(--ns-mint); font-size: 9px; text-transform: uppercase; }
.world-map-level-heading h2 { grid-column: 1; margin: 2px 0 0; font-family: Impact, Haettenschweiler, "Arial Black", sans-serif; font-size: 23px; line-height: 0.95; }
.world-map-level-heading b { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--ns-gold); font-size: 10px; text-transform: uppercase; }
.world-map-level dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border: 1px solid #404552; }
.world-map-level dl div { min-width: 0; padding: 6px; border-right: 1px solid #404552; }
.world-map-level dl div:last-child { border-right: 0; }
.world-map-level dt { color: #777f91; font-size: 7px; text-transform: uppercase; }
.world-map-level dd { margin: 3px 0 0; overflow-wrap: anywhere; color: var(--ns-text); font-size: 8px; }
.world-map-record { margin: 0; color: #bcb4a3; font-size: 8px; text-align: center; }
.world-map-actions {
  display: grid;
  grid-template-columns: minmax(88px, 0.34fr) 1fr;
  gap: 8px;
}
.world-map-change-character {
  grid-column: 1 / -1;
  min-height: 44px;
  border: 2px solid var(--ns-mint);
  border-radius: 4px;
  background: rgba(67, 217, 173, 0.08);
  color: var(--ns-mint);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}
.world-map-change-character::before {
  margin-right: 7px;
  color: var(--ns-gold);
  content: "\25c0";
}
.world-map-change-character:is(:hover, :focus-visible) {
  background: rgba(67, 217, 173, 0.18);
}
.world-map-new-run {
  min-height: 44px;
  border: 2px solid #555b69;
  border-radius: 4px;
  background: #171a23;
  color: #bcb4a3;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}
.world-map-new-run.is-confirming {
  border-color: var(--ns-red);
  color: var(--ns-text);
}
.world-map-enter {
  min-height: 44px;
  border: 2px solid var(--ns-text);
  border-radius: 4px;
  background: #236f91;
  box-shadow: 0 4px 0 #123b53;
  color: var(--ns-text);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}
.world-map-enter::before { margin-right: 8px; color: var(--ns-gold); content: "\25b6"; }
.world-map-enter:disabled { border-color: #555b69; background: #2b2f39; box-shadow: none; color: #777f91; cursor: default; }
.world-map-enter:disabled::before { content: ""; }

.hq-interior-overlay {
  position: absolute;
  inset: 0;
  z-index: 28;
  overflow: hidden;
  background: #05070b;
}

.hq-interior-room {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #090d13;
}

.hq-interior-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hq-interior-art img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  image-rendering: pixelated;
}

.hq-interior-room::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(4, 6, 10, 0.06), rgba(4, 6, 10, 0.02) 58%, rgba(4, 6, 10, 0.42));
  pointer-events: none;
  content: "";
}

.hq-interior-header {
  position: absolute;
  z-index: 4;
  top: max(12px, env(safe-area-inset-top));
  right: 13px;
  left: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px 9px 13px;
  border: 2px solid rgba(67, 217, 173, 0.84);
  background: rgba(5, 7, 11, 0.9);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.72);
}

.hq-interior-header span {
  color: var(--ns-mint);
  font-size: 8px;
  text-transform: uppercase;
}

.hq-interior-header h2 {
  margin: 2px 0 0;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 21px;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.hq-interior-header button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--ns-text);
  border-radius: 4px;
  background: #0b0e14;
  color: var(--ns-text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.hq-product-wall {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.hq-product-hotspot {
  position: absolute;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 3px solid var(--ns-text);
  border-radius: 50%;
  background: var(--ns-gold);
  box-shadow: 0 0 0 4px rgba(8, 9, 12, 0.64), 0 0 18px rgba(242, 201, 76, 0.78);
  color: var(--ns-ink);
  text-decoration: none;
  animation: hq-hotspot-pulse 1.15s steps(2, end) infinite;
}

.hq-product-hotspot::before {
  font-size: 22px;
  font-weight: 900;
  content: "+";
}

.hq-product-hotspot span {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  display: none;
  padding: 5px 7px;
  border: 1px solid #656b78;
  border-radius: 3px;
  background: rgba(6, 8, 12, 0.94);
  color: var(--ns-text);
  font-size: 8px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

.hq-product-hotspot:is(:hover, :focus-visible) span { display: block; }
.hq-product-hats { top: 20%; left: 49%; }
.hq-product-tees { top: 32%; left: 49%; }
.hq-product-hoodies { top: 43%; left: 49%; }
.hq-product-energy { top: 43%; left: 85%; }
.hq-product-lil-bump { top: 56%; left: 85%; }

.hq-neon-sign {
  position: absolute;
  z-index: 3;
  top: 18%;
  left: 56%;
  width: 126px;
  padding: 0;
  transform: translateX(-50%);
}

.hq-neon-sign img {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(1) drop-shadow(0 0 2px #f8f0d5) drop-shadow(0 0 7px #e8208b);
  image-rendering: pixelated;
}

.hq-leaderboard-button {
  position: absolute;
  z-index: 4;
  top: 39%;
  left: 13.5%;
  width: 104px;
  min-height: 52px;
  padding: 8px 10px 7px;
  border: 3px solid #f2c94c;
  border-radius: 1px;
  background: linear-gradient(#17273b 0 18%, #06090f 18% 100%);
  box-shadow: 0 0 0 2px #43d9ad, 0 0 12px rgba(67, 217, 173, 0.78), inset 0 0 10px rgba(75, 163, 255, 0.32);
  color: #f8f0d5;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateX(-50%);
}

.hq-leaderboard-button::before {
  display: block;
  margin-bottom: 2px;
  color: var(--ns-gold);
  font-size: 12px;
  content: "TOP 5";
}

/* The room art scales to fill the frame, so the character has to scale with it.
   At a fixed 72x112px it shrank against the room on every larger screen and read
   as a doll standing in an arcade. `.game-frame` is a size container, so cqh ties
   the character to the room's actual height instead of to device pixels. */
.hq-floor-feature {
  position: absolute;
  z-index: 3;
  right: 18%;
  bottom: 7%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px;
  align-items: end;
  width: clamp(190px, 46cqw, 340px);
  pointer-events: none;
}

.hq-floor-feature > img {
  display: block;
  width: auto;
  height: min(23cqh, 280px);
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.55));
  image-rendering: pixelated;
}

.hq-floor-feature > div {
  margin-bottom: 9px;
  padding: 7px 8px;
  border: 2px solid rgba(242, 201, 76, 0.82);
  background: rgba(5, 7, 11, 0.9);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.66);
}

.hq-floor-feature span,
.hq-floor-feature strong {
  display: block;
  text-transform: uppercase;
}

.hq-floor-feature span {
  color: var(--ns-muted);
  font-size: 6px;
}

.hq-floor-feature strong {
  margin-top: 3px;
  color: var(--ns-gold);
  font-size: 9px;
}

.hq-leaderboard-panel {
  position: absolute;
  z-index: 8;
  inset: 19% 8% auto;
  padding: 14px;
  border: 3px solid var(--ns-mint);
  background: rgba(8, 9, 12, 0.97);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.68), 0 0 24px rgba(67, 217, 173, 0.32);
}

.hq-leaderboard-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hq-leaderboard-panel header span {
  color: var(--ns-mint);
  font-size: 7px;
  text-transform: uppercase;
}

.hq-leaderboard-panel h3 {
  margin: 3px 0 0;
  color: var(--ns-text);
  font-size: 15px;
  text-transform: uppercase;
}

.hq-leaderboard-panel header button {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid var(--ns-text);
  background: transparent;
  color: var(--ns-text);
  font-size: 22px;
  cursor: pointer;
}

.hq-leaderboard-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 12px;
}

.hq-leaderboard-tabs button {
  min-width: 0;
  min-height: 38px;
  padding: 5px 2px;
  border: 1px solid rgba(248, 240, 213, 0.28);
  background: rgba(248, 240, 213, 0.05);
  color: var(--ns-muted);
  font-size: 7px;
  text-transform: uppercase;
  cursor: pointer;
}

.hq-leaderboard-tabs button[aria-selected="true"] {
  border-color: var(--ns-gold);
  color: var(--ns-gold);
}

.hq-leaderboard-panel ol {
  display: grid;
  gap: 5px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.hq-leaderboard-panel li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  background: rgba(248, 240, 213, 0.06);
  color: var(--ns-text);
  font-size: 8px;
}

.hq-leaderboard-panel li.is-open {
  color: #777f91;
}

.hq-leaderboard-panel li strong {
  color: var(--ns-gold);
}

.hq-leaderboard-panel > p {
  color: var(--ns-muted);
  font-size: 8px;
  text-align: center;
}

@keyframes hq-hotspot-pulse {
  50% { transform: scale(1.08); }
}

@keyframes hq-callout-pulse {
  50% { transform: translateX(-50%) translateY(-3px); }
}

@keyframes world-map-node-pulse {
  50% { filter: drop-shadow(0 0 7px rgba(242, 201, 76, 0.92)) brightness(1.12); }
}

@keyframes world-map-player-run {
  50% { margin-top: -4px; }
}


.game-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  /* Deliberately no grid centering here -- on a SCROLL container, centering
     a child taller than the container pushes its overflow above the
     reachable scroll range and clips it. The panel's auto margins center
     short content identically and keep tall content scrollable from the top
     (phone results form, owner 2026-08-25). */
  justify-items: center;
  /* pan-y: the frame is touch-action:none for gameplay, and iOS needs the
     scroller itself to re-allow vertical panning. */
  touch-action: pan-y;
  /* contain: without it iOS can rubber-band this element's own scroll box
     even when nothing overflows (short pause panel), now that overlay
     touches bypass the frame's preventDefault (adversarial, 2026-08-26). */
  overscroll-behavior: contain;
  padding:
    max(clamp(16px, 5vw, 28px), env(safe-area-inset-top))
    max(clamp(16px, 5vw, 28px), env(safe-area-inset-right))
    max(clamp(16px, 5vw, 28px), env(safe-area-inset-bottom))
    max(clamp(16px, 5vw, 28px), env(safe-area-inset-left));
  background: rgba(8, 9, 12, 0.84);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}

.game-overlay > .overlay-panel {
  margin: auto 0;
}

/* Bottom-LEFT, not top-right (owner asked for "the bottom", 2026-08-18). The
   top of the shell already carries the venue sign, the party meter and the
   3-row HUD, and these two buttons collided with all of it.
   LEFT, not right, is deliberate: jump is bound to pointerdown on the whole
   canvas (game.js, this.input.on("pointerdown")), so a native button anywhere
   in the primary thumb arc swallows the tap outright -- bottom-right would
   turn a frantic jump into an accidental pause. The off-hand corner keeps the
   tap-anywhere gesture intact. Sits BELOW floorY (850 of the 960 canvas), so
   it covers the street band, not the runner lane.
   Uses the BOTTOM safe-area inset so the iPhone home indicator cannot land on
   the tap targets. */
.game-controls {
  position: absolute;
  z-index: 8;
  bottom: max(8px, env(safe-area-inset-bottom));
  left: 8px;
  display: flex;
  gap: 7px;
}

/* The manual-test pad (?test=manual, dev hosts only) spans the whole bottom
   strip and its Jump button owns the bottom-right corner at z-index 45. With
   the controls moved down, both buttons landed UNDER Jump -- elementFromPoint
   on either one returned Jump, so pause and mute were unreachable in exactly
   the mode used to hand-test. Lift them above the pad only when it exists. */
.game-shell:has(#manual-test-controls) .game-controls {
  /* 66px = the pad's 56px button row + 10px clearance. Shares the pad's own
     max(14px, safe-area) base term, so the 10px gap holds at any inset.
     FALLBACK GAP: an engine without :has() (iOS Safari < 15.4) silently keeps
     the unlifted position and re-buries these under the pad. QA-only surface
     (?test=manual on dev hosts), so it is accepted rather than polyfilled. */
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 66px);
}

.game-controls button:active {
  transform: translateY(1px);
  background: rgba(24, 27, 36, 0.94);
}

.game-controls button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(248, 240, 213, 0.42);
  border-radius: 4px;
  padding: 0;
  background: rgba(8, 9, 12, 0.82);
  color: var(--ns-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

/* Compound selector: .overlay-panel is declared later in this file, so a
   bare .pause-panel loses the cascade tie and the art never shows. */
.overlay-panel.pause-panel {
  text-align: center;
  /* Round-4 pause backdrop (bar-tab holder) as a 9-slice border-image:
     corners stay crisp and edges stretch along one axis only, so the frame
     survives ANY box size. This replaced two failed approaches the reviews
     caught in turn -- 100%/100% background (squished when landscape
     narrowed the shell) and aspect-ratio 4/3 (content min-height beats the
     ratio at short landscape heights and re-stretches the art). Slice 48
     covers the mint tube + gold studs in the 400x300 source. */
  border: 24px solid transparent;
  border-image: url("./assets/art/markers/pause-panel.png?v=307") 48 fill / 24px stretch;
  background: none;
  border-radius: 0;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  image-rendering: pixelated;
  padding: 12px 6px 8px;
}

.pause-panel .overlay-kicker { color: var(--ns-mint); }

.pause-panel button { margin-top: 18px; }

.pause-panel .secondary-button {
  margin-top: 10px;
  border: 1px solid rgba(248, 240, 213, 0.34);
  background: transparent;
  color: var(--ns-text);
}

.is-hidden {
  display: none !important;
}

.overlay-panel {
  width: min(100%, 372px);
  padding: 24px;
  background: rgba(25, 27, 37, 0.97);
  border: 1px solid rgba(248, 240, 213, 0.28);
  border-top: 4px solid var(--ns-red);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}

.overlay-panel h1,
.overlay-panel h2,
.overlay-panel p {
  margin: 0;
}

.overlay-panel h1,
.overlay-panel h2 {
  margin-top: 8px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(27px, 8vw, 36px);
  line-height: 1;
  letter-spacing: 0;
}

.overlay-panel > p:not(.overlay-kicker) {
  margin-top: 14px;
  color: var(--ns-muted);
  font-size: 14px;
  line-height: 1.5;
}

.overlay-kicker {
  color: var(--ns-mint);
  font-size: 12px;
  text-transform: uppercase;
}

.results-panel .overlay-kicker {
  color: var(--ns-gold);
}

.result-victory {
  position: relative;
  display: grid;
  width: 100%;
  height: 154px;
  margin-top: 12px;
  overflow: hidden;
  place-items: end center;
}

.result-victory.is-hidden {
  display: none;
}

.result-victory img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(94%, 193px);
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
}

#results-overlay[data-result="failed"] .overlay-panel {
  border-top-color: var(--ns-red);
}

#results-overlay[data-result="cleared"] .overlay-panel {
  border-top-color: var(--ns-mint);
}

#results-overlay[data-result="reward"] .overlay-panel {
  border-top-color: var(--ns-gold);
  box-shadow: 0 0 0 1px rgba(242, 201, 76, 0.18), 0 14px 34px rgba(0, 0, 0, 0.38);
}

.overlay-panel label {
  display: block;
  margin-top: 22px;
  color: var(--ns-text);
  font-size: 12px;
  text-transform: uppercase;
}

.overlay-panel input,
.overlay-panel button {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  border-radius: 4px;
}

.overlay-panel input {
  border: 1px solid rgba(248, 240, 213, 0.3);
  padding: 0 13px;
  background: var(--ns-ink);
  color: var(--ns-text);
  outline: none;
}

.overlay-panel input:focus {
  border-color: var(--ns-mint);
  box-shadow: 0 0 0 2px rgba(67, 217, 173, 0.15);
}

.overlay-panel button {
  border: 0;
  background: var(--ns-gold);
  color: var(--ns-ink);
  font-weight: 700;
  cursor: pointer;
}

.overlay-panel button:active {
  transform: translateY(1px);
}

.overlay-panel .fine-print {
  margin-top: 10px;
  font-size: 10px;
  line-height: 1.4;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid rgba(248, 240, 213, 0.2);
  border-radius: 4px;
  background: rgba(248, 240, 213, 0.2);
}

.result-stats > div {
  min-width: 0;
  padding: 12px 6px;
  background: var(--ns-ink);
  text-align: center;
}

.result-stats span,
.result-stats strong {
  display: block;
  overflow-wrap: anywhere;
}

.result-stats span {
  color: var(--ns-muted);
  font-size: 10px;
  text-transform: uppercase;
}

.result-stats strong {
  margin-top: 5px;
  color: var(--ns-text);
  font-size: 16px;
}

.claim-form {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(248, 240, 213, 0.18);
}

.claim-form .claim-heading {
  margin: 0;
  color: var(--ns-text);
  font-size: 12px;
  line-height: 1.45;
}

.claim-form > label:not(.check-row) {
  margin-top: 13px;
}

.check-row {
  display: grid !important;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  align-items: start;
  margin-top: 12px !important;
  color: var(--ns-muted) !important;
  font-size: 10px !important;
  line-height: 1.4;
  text-transform: none !important;
}

.check-row input {
  width: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--ns-mint);
}

.claim-form button {
  margin-top: 16px;
}

.claim-saved {
  margin-top: 16px !important;
  padding: 11px;
  border-left: 3px solid var(--ns-mint);
  background: rgba(67, 217, 173, 0.08);
  color: var(--ns-text) !important;
  font-size: 11px !important;
}

.claim-saved[data-status="pending"],
.claim-saved[data-status="queued"] {
  border-left-color: var(--ns-gold);
  background: rgba(242, 201, 76, 0.08);
}

.claim-saved[data-status="sent"] {
  border-left-color: var(--ns-mint);
}

.discount-code {
  margin-top: 16px;
  padding: 13px;
  border: 1px dashed rgba(242, 201, 76, 0.72);
  border-radius: 4px;
  color: var(--ns-gold);
  text-align: center;
  font-size: 22px;
  font-weight: 700;
}

.discount-code span,
.discount-code strong,
.discount-code small {
  display: block;
}

.discount-code span {
  font-size: 9px;
  text-transform: uppercase;
}

.discount-code strong {
  margin-top: 5px;
  color: var(--ns-text);
  font-size: 17px;
  text-transform: uppercase;
}

.discount-code small {
  margin-top: 6px;
  color: var(--ns-muted);
  font-size: 8px;
  font-weight: 400;
  line-height: 1.4;
}

.overlay-panel .edit-player-button {
  min-height: 40px;
  border: 1px solid rgba(248, 240, 213, 0.28);
  background: transparent;
  color: var(--ns-text);
  font-size: 10px;
}

.local-leaderboard {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(248, 240, 213, 0.18);
}

.local-leaderboard h3 {
  margin: 0;
  color: var(--ns-mint);
  font-size: 12px;
  text-transform: uppercase;
}

.leaderboard-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 9px;
}

.leaderboard-tabs button {
  min-width: 0;
  min-height: 44px;
  padding: 6px 4px;
  border: 1px solid rgba(248, 240, 213, 0.2);
  background: rgba(248, 240, 213, 0.04);
  color: var(--ns-muted);
  font-size: 9px;
  text-transform: uppercase;
}

.leaderboard-tabs button[aria-selected="true"] {
  border-color: var(--ns-mint);
  background: rgba(67, 217, 173, 0.12);
  color: var(--ns-mint);
}

.local-leaderboard > p {
  margin-top: 8px !important;
  color: var(--ns-muted) !important;
  font-size: 10px !important;
}

.local-leaderboard ol {
  display: grid;
  gap: 5px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.local-leaderboard li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  background: rgba(248, 240, 213, 0.05);
  color: var(--ns-text);
  font-size: 11px;
}

.local-leaderboard li strong {
  color: var(--ns-gold);
}

.local-leaderboard li.is-open {
  color: #777f91;
}

.local-leaderboard li.is-open strong {
  color: #777f91;
}

/* The results shop link is an <a> styled as the panel's gold action row:
   the moment after claiming a 50% code is when the shop matters most. */
.result-shop-link {
  display: grid;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  place-items: center;
  border: 2px solid var(--ns-gold);
  border-radius: 4px;
  background: rgba(242, 201, 76, 0.12);
  color: var(--ns-gold);
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
}

.result-shop-link:active { transform: translateY(1px); }

.overlay-panel .share-score-button {
  border: 1px solid rgba(67, 217, 173, 0.7);
  background: rgba(67, 217, 173, 0.1);
  color: var(--ns-mint);
}

.share-score-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}

.overlay-panel .share-score-menu button {
  min-width: 0;
  min-height: 42px;
  margin: 0;
  padding: 6px 4px;
  border: 1px solid rgba(248, 240, 213, 0.22);
  background: rgba(248, 240, 213, 0.05);
  color: var(--ns-text);
  font-size: 9px;
}

.overlay-panel .share-score-menu button:first-child {
  grid-column: 1 / -1;
  border-color: rgba(232, 32, 139, 0.72);
  color: #ff72bf;
}

.share-score-note {
  margin-top: 7px !important;
  color: var(--ns-muted) !important;
  font-size: 8px !important;
  text-align: center;
}

.share-score-status {
  margin-top: 8px !important;
  color: var(--ns-mint) !important;
  font-size: 10px !important;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .title-transition,
  .world-map-overlay,
  .world-map-player {
    transition-duration: 1ms;
  }

  .world-map-node.is-current {
    animation: none;
    box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.28), 0 5px 0 rgba(5, 6, 10, 0.78);
  }

  /* The NEXT badge is its own pseudo-element animation; the node override
     above does not reach it. */
  .world-map-node.is-current::before {
    animation: none;
  }

  .world-map-player.is-traveling {
    animation: none;
  }
}

@media (max-width: 600px) {
  .game-frame {
    border: 0;
    border-radius: 0;
  }

  .overlay-panel {
    padding: 20px;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  /* At the landscape shell width (~211px) both menu labels wrap and the row
     doubles in height into the title art. The sound toggle goes icon-only; the
     glyph keeps rendering and the accessible name still comes from the
     button's text content. */
  .title-sound-button {
    font-size: 0;
    padding: 8px 10px;
  }

  /* The doubled menu row already eats into the title art here; the corner
     site link would sit under it (this file's own prior incident: a corner
     pill colliding with Start on short frames). Marketing chrome loses to
     controls at this size. */
  .title-site-link {
    display: none;
  }

  .title-sound-button::before {
    font-size: 16px;
  }

  .game-shell {
    width: calc(100svh * 9 / 16);
  }
}