:root {
  color-scheme: light;
  --spruce-950: #0e2822;
  --spruce-900: #163b32;
  --spruce-800: #235043;
  --fern-700: #3f7858;
  --fern-500: #6e9c70;
  --fern-300: #a9c89c;
  --mist: #b9d8cf;
  --sky: #d8ece5;
  --parchment: #f5eedc;
  --paper: #fffaf0;
  --gold: #e8b65f;
  --gold-dark: #9a6825;
  --rust: #b95f43;
  --ink: #172522;
  --muted: #52645f;
  --danger: #a6423b;
  --focus: #ffd875;
  --shadow: rgba(8, 32, 27, 0.28);
  --panel-border: rgba(22, 59, 50, 0.22);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --font-ui: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  --font-body: "Trebuchet MS", Arial, sans-serif;
  --text-scale: 1;
  --motion: 1;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(185, 216, 207, 0.35), transparent 36rem),
    var(--spruce-950);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: calc(16px * var(--text-scale));
  overscroll-behavior: none;
}

/* No accidental zoom on phones: a quick double tap (through dialogue, on A)
   never zooms the page, and game text doesn't pop up the long-press
   magnifier. Pinching to zoom still works outside the map and the touch
   controls, which handle every touch themselves. */
html {
  touch-action: manipulation;
}

.game-shell {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

/* Phones zoom in on a text box or picker whose text is under 16px when it
   is tapped, and stay zoomed. */
input,
select,
textarea {
  font-size: max(16px, 1em);
  -webkit-user-select: text;
  user-select: text;
}

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

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 12px 18px;
  color: var(--paper);
  background: var(--spruce-900);
  border-radius: var(--radius-sm);
  transform: translateY(-140%);
}

.skip-link:focus {
  transform: none;
}

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

.game-shell {
  position: relative;
  width: min(100vw, 960px);
  height: min(100dvh, 900px);
  max-height: 100dvh;
  overflow: hidden;
  background: var(--parchment);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  isolation: isolate;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
}

.screen.is-active {
  display: flex;
}

.title-screen {
  align-items: flex-end;
  justify-content: center;
  color: var(--paper);
  background: #193c33;
}

#titleCanvas,
#endingCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.title-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 25, 21, 0.02) 22%, rgba(5, 25, 21, 0.28) 55%, rgba(5, 25, 21, 0.92) 100%);
}

.title-content {
  position: relative;
  z-index: 2;
  width: min(100%, 590px);
  min-height: 62%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(28px, 6vh, 64px) clamp(22px, 7vw, 48px);
  text-align: center;
}

.brand-lockup {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: center;
  column-gap: 12px;
  margin-bottom: 12px;
}

.brand-mark {
  grid-row: 1 / 3;
  width: clamp(48px, 10vw, 74px);
  color: var(--gold);
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.22));
}

.brand-lockup h1 {
  margin: 0;
  font: 900 clamp(2.5rem, 9vw, 5.4rem) / 0.88 var(--font-ui);
  letter-spacing: 0.025em;
  text-shadow: 0 5px 0 rgba(4, 27, 22, 0.38);
}

.brand-lockup p {
  margin: 8px 0 0;
  justify-self: start;
  color: var(--gold);
  font: 800 clamp(1rem, 3vw, 1.55rem) / 1 var(--font-ui);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.title-copy {
  max-width: 33rem;
  margin: 8px 0 22px;
  color: #edf5ec;
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  line-height: 1.45;
}

.title-actions {
  width: min(100%, 380px);
  display: grid;
  gap: 10px;
}

.title-hint {
  margin: 17px 0 0;
  color: rgba(245, 238, 220, 0.72);
  font-size: 0.78rem;
}

.button {
  min-height: 46px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font: 800 0.92rem/1.1 var(--font-ui);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform calc(100ms * var(--motion)) ease,
    filter calc(120ms * var(--motion)) ease,
    box-shadow calc(120ms * var(--motion)) ease;
}

.button:hover:not(:disabled) {
  filter: brightness(1.05);
}

.button:active:not(:disabled) {
  transform: translateY(2px);
}

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

.button-large {
  min-height: 56px;
  font-size: 1.02rem;
}

.button-primary {
  color: var(--paper);
  background: var(--fern-700);
  border-color: #7eaa79;
  box-shadow: 0 5px 0 #214d3e;
}

.button-light {
  color: var(--spruce-950);
  background: var(--parchment);
  border-color: #fffdf7;
  box-shadow: 0 5px 0 #b7aa89;
}

.button-quiet {
  color: inherit;
  background: transparent;
  border-color: currentColor;
  opacity: 0.88;
}

.game-screen {
  flex-direction: column;
  background:
    linear-gradient(rgba(22, 59, 50, 0.04) 1px, transparent 1px),
    var(--parchment);
  background-size: 100% 24px;
  /* Phones held upright: the touch controls' height, and how far they float
     above the objective card. The lift puts the d-pad about a third of the
     way up the screen, where a thumb rests when the phone is held in one
     hand, and always leaves room under the controls for the "A" hint. */
  /* The d-pad is as wide as the row allows up to 206px: big arrows that
     an unsteady thumb still hits, with a clear gap (over 20px) before the
     Pack button so a slip doesn't open the pack. The controls row is as
     tall as the pad. */
  --dpad-w: min(206px, calc(100vw - 186px));
  --controls-height: calc(var(--dpad-w) * 0.68 + 6px);
  --controls-lift: clamp(58px, calc(34vh - 120px), 150px);
  --controls-lift: clamp(58px, calc(34dvh - 120px), 150px);
}

.top-rail {
  z-index: 10;
  height: 64px;
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) 16px 8px;
  color: var(--paper);
  background: var(--spruce-900);
  border-bottom: 3px solid #08261f;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}

.top-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.top-identity > span:first-child {
  overflow: hidden;
  font: 900 1rem/1.15 var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#permitLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gold);
  font: 700 0.7rem/1.2 var(--font-ui);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.top-resources {
  display: flex;
  align-items: center;
  gap: 8px;
}

.resource {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  color: var(--spruce-950);
  background: var(--gold);
  border: 2px solid #ffe09a;
  border-radius: var(--radius-sm);
  font: 900 0.85rem/1 var(--font-ui);
  box-shadow: 0 3px 0 #7f5721;
}

.icon-button {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 8px;
  color: inherit;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.icon-button svg {
  width: 100%;
  height: 100%;
}

/* The gold credits badge is a button: it opens the Field Credits panel. */
button.resource {
  cursor: pointer;
}

button.resource:active {
  box-shadow: 0 1px 0 #7f5721;
  transform: translateY(2px);
}

/* The sound button shows a crossed-out speaker, on a rust tint, while
   sound is off. */
.icon-button .icon-sound-off,
.icon-button[aria-pressed="true"] .icon-sound-on {
  display: none;
}

.icon-button[aria-pressed="true"] .icon-sound-off {
  display: block;
}

.icon-button[aria-pressed="true"] {
  background: rgba(185, 95, 67, 0.6);
  border-color: rgba(255, 214, 196, 0.7);
}

.credits-total {
  margin: 0 0 12px;
  font: 800 1rem/1.2 var(--font-ui);
}

.credits-total strong {
  font-size: 1.7rem;
}

.modal .muted {
  color: var(--muted);
  font-size: 0.85rem;
}

.world-frame {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  background: #89ae77;
  border-bottom: 3px solid var(--spruce-900);
}

#worldCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  touch-action: none;
}

.map-banner {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 50%;
  /* max-content: from left:50% the box could only grow to half the frame,
     so place names broke over three cramped lines. */
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 8px 14px 9px;
  color: var(--paper);
  background: rgba(14, 40, 34, 0.92);
  border: 2px solid rgba(245, 238, 220, 0.5);
  border-radius: var(--radius-sm);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18);
  font: 800 0.82rem/1.25 var(--font-ui);
  text-align: center;
  transform: translate(-50%, -150%);
  transition: transform calc(260ms * var(--motion)) cubic-bezier(.2,.8,.2,1);
}

.map-banner.is-visible {
  transform: translate(-50%, 0);
}

/* Centred under the floating touch controls (in the side panel layouts it
   goes back to the map's corner). */
.interaction-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(var(--controls-lift) / 2);
  display: flex;
  max-width: calc(100% - 24px);
  transform: translate(-50%, 50%);
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 6px;
  color: var(--paper);
  background: rgba(14, 40, 34, 0.9);
  border: 2px solid rgba(245, 238, 220, 0.42);
  border-radius: 999px;
  font: 800 0.77rem/1 var(--font-ui);
}

/* The hint is a button (tapping it is the same as "A"). */
button.interaction-hint {
  cursor: pointer;
  touch-action: manipulation;
}

/* With Tap to move, a touch on the map is a tap to walk, never a scroll
   or zoom that would swallow a shaky tap. */
.tap-to-move #worldCanvas {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.keycap {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  color: var(--spruce-950);
  background: var(--gold);
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.field-controls {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  background: var(--parchment);
}

.objective-strip {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: var(--ink);
  text-align: left;
  background: var(--paper);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow: 0 3px 0 rgba(22, 59, 50, 0.14);
  cursor: pointer;
}

.objective-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  /* The map's objective pins use this same badge. */
  color: #f2c14e;
  background: var(--rust);
  border-radius: 50%;
}

.objective-strip span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.objective-strip small {
  color: var(--muted);
  font: 700 0.65rem/1.1 var(--font-ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.objective-strip strong {
  display: -webkit-box;
  overflow: hidden;
  font: 800 0.78rem/1.25 var(--font-ui);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.objective-strip svg {
  width: 21px;
  color: var(--fern-700);
}

/* A new objective: the card glows a few times. With Reduced motion it gets
   a steady gold outline instead. */
.objective-strip.is-new {
  border-color: #c98f1c;
  animation: objective-glow 1.3s ease-in-out 3;
}

@keyframes objective-glow {
  0%,
  100% {
    box-shadow: 0 3px 0 rgba(22, 59, 50, 0.14), 0 0 0 0 rgba(242, 193, 78, 0);
  }

  50% {
    box-shadow: 0 3px 0 rgba(22, 59, 50, 0.14), 0 0 0 6px rgba(242, 193, 78, 0.6);
  }
}

.reduced-motion .objective-strip.is-new {
  animation: none;
  box-shadow: 0 3px 0 rgba(22, 59, 50, 0.14), 0 0 0 4px rgba(242, 193, 78, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .objective-strip.is-new {
    animation: none;
    box-shadow: 0 3px 0 rgba(22, 59, 50, 0.14), 0 0 0 4px rgba(242, 193, 78, 0.6);
  }
}

/* Phones held upright: the d-pad and the Pack and A buttons float over the
   bottom of the map, see-through, lifted clear of the screen's bottom edge
   so one thumb reaches them. Touches between them fall through to the map.
   Desktop and phones on their side keep the controls in a solid side panel
   (see their layouts below). */
.touch-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + var(--controls-lift));
  height: var(--controls-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  pointer-events: none;
  --pad-bg: rgba(20, 58, 48, 0.5);
  --pad-pressed: rgba(47, 100, 83, 0.9);
  --pad-border: rgba(255, 250, 235, 0.62);
  --pad-shadow: rgba(8, 30, 25, 0.32);
  --a-bg: rgba(185, 95, 67, 0.78);
  --pack-bg: rgba(0, 95, 65, 0.6);
}

.dpad,
.action-cluster {
  pointer-events: auto;
}

/* Solid controls with High contrast, or when the device asks for less
   transparency. */
.high-contrast .touch-controls {
  --pad-bg: var(--spruce-800);
  --pad-pressed: #2f6453;
  --pad-border: #5f8875;
  --pad-shadow: #0d3028;
  --a-bg: var(--rust);
  --pack-bg: var(--fern-700);
}

@media (prefers-reduced-transparency: reduce) {
  .touch-controls {
    --pad-bg: var(--spruce-800);
    --pad-pressed: #2f6453;
    --pad-border: #5f8875;
    --pad-shadow: #0d3028;
    --a-bg: var(--rust);
    --pack-bg: var(--fern-700);
  }
}

.dpad {
  position: relative;
  flex: 0 0 auto;
  width: var(--dpad-w);
  height: calc(var(--dpad-w) * 0.68);
  /* The pad handles every touch itself: no scrolling, zooming or text
     selection when a thumb slides or rests on it. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Arrows are sized and placed as shares of the pad, so the whole pad (and
   what each arrow answers to) grows with it. */
.dpad-button {
  position: absolute;
  width: 36%;
  height: 47%;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--paper);
  background: var(--pad-bg);
  border: 2px solid var(--pad-border);
  box-shadow: 0 4px 0 var(--pad-shadow);
  cursor: pointer;
  touch-action: none;
}

.dpad-button.is-pressed {
  background: var(--pad-pressed);
  box-shadow: 0 1px 0 var(--pad-shadow);
  transform: translateY(3px);
}

.dpad-button svg {
  width: 42%;
  max-width: 34px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.dpad-up {
  top: 0;
  left: 32%;
  border-radius: 14px 14px 6px 6px;
}

.dpad-down {
  bottom: 0;
  left: 32%;
  border-radius: 6px 6px 14px 14px;
}

.dpad-left {
  top: 26.5%;
  left: 0;
  border-radius: 14px 6px 6px 14px;
}

.dpad-right {
  top: 26.5%;
  right: 0;
  border-radius: 6px 14px 14px 6px;
}

.action-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 6px;
}

.round-button {
  display: grid;
  place-items: center;
  color: var(--paper);
  border: 3px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  font: 900 0.77rem/1 var(--font-ui);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 5px 0 var(--pad-shadow);
  cursor: pointer;
  /* Like the d-pad: a thumb here never starts a pinch or a scroll. */
  touch-action: none;
}

.round-button:active {
  box-shadow: 0 2px 0 var(--pad-shadow);
  transform: translateY(3px);
}

.round-button-primary {
  width: 72px;
  height: 72px;
  background: var(--a-bg);
  font-size: 1.25rem;
}

.round-button-secondary {
  width: 58px;
  height: 58px;
  background: var(--pack-bg);
  font-size: 0.68rem;
}

.battle-scene {
  position: absolute;
  z-index: 20;
  inset: 64px 0 0;
  flex-direction: column;
  background: var(--parchment);
}

.battle-scene:not([hidden]) {
  display: flex;
}

/* The field (canvas and both status cards) takes whatever height the console
   doesn't need. It used to be fixed at 340px, and the leftover went to the
   action buttons, which stretched into tall, mostly empty cards. */
.battle-field {
  position: relative;
  min-height: 220px;
  flex: 1 1 auto;
}

#battleCanvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--mist);
  image-rendering: pixelated;
}

.battle-status {
  position: absolute;
  z-index: 2;
  width: min(48%, 255px);
  padding: 7px 9px;
  color: var(--ink);
  background: rgba(255, 250, 240, 0.94);
  border: 2px solid rgba(22, 59, 50, 0.38);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 0 rgba(14, 40, 34, 0.18);
}

.opponent-status {
  top: 10px;
  left: 10px;
}

.player-status {
  right: 10px;
  bottom: 10px;
}

.battle-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font: 800 0.76rem/1.2 var(--font-ui);
}

.battle-name-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-name-row span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.66rem;
}

.vitality-track {
  height: 9px;
  margin-top: 5px;
  overflow: hidden;
  background: #d8d5c8;
  border: 1px solid rgba(23, 37, 34, 0.28);
  border-radius: 99px;
}

.vitality-track span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--fern-700);
  border-radius: inherit;
  transition: width calc(320ms * var(--motion)) ease, background calc(200ms * var(--motion)) ease;
}

.status-line {
  min-height: 1em;
  margin-top: 4px;
  color: var(--muted);
  font: 700 0.62rem/1 var(--font-ui);
}

.battle-console {
  min-height: 0;
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: minmax(42px, auto) auto auto;
  gap: 8px;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  background: var(--parchment);
  border-top: 3px solid var(--spruce-900);
}

.battle-log {
  min-height: 42px;
  max-height: 64px;
  overflow-y: auto;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  line-height: 1.35;
}

.battle-actions {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.action-button {
  position: relative;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 8px 10px 9px;
  color: var(--ink);
  text-align: left;
  background: var(--paper);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 3px 0 rgba(22, 59, 50, 0.14);
  cursor: pointer;
}

.action-button:hover,
.action-button:focus-visible {
  border-color: var(--fern-700);
}

.action-button strong {
  max-width: calc(100% - 4.4em);
  font: 800 0.86rem/1.15 var(--font-ui);
}

.action-button small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.68rem;
}

/* What the action does, so a guest can choose without opening anything. */
.action-desc {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font: 500 0.7rem/1.3 var(--font-ui);
  opacity: 0.82;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.action-button .affinity-mark {
  position: absolute;
  top: 7px;
  right: 8px;
  color: var(--fern-700);
  font-size: 0.68rem;
}

.battle-utility {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.button-utility {
  min-height: 44px;
  padding: 7px 5px;
  color: var(--paper);
  background: var(--spruce-800);
  border-color: #6d9581;
  font-size: 0.65rem;
}

.dialogue-layer,
.modal-host {
  position: absolute;
  z-index: 50;
  inset: 0;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  background: rgba(7, 28, 23, 0.38);
  backdrop-filter: blur(2px);
}

.dialogue-layer:not([hidden]),
.modal-host:not([hidden]) {
  display: flex;
}

.dialogue-box {
  width: min(100%, 720px);
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--spruce-900);
  border-radius: var(--radius-lg);
  box-shadow: 0 9px 0 rgba(7, 28, 23, 0.34);
}

.speaker-portrait {
  width: 88px;
  height: 88px;
  align-self: start;
  overflow: hidden;
  background: var(--mist);
  border: 2px solid var(--spruce-800);
  border-radius: var(--radius-md);
}

/* The portrait fills its frame (it was drawn at a fixed 96px, so a smaller
   frame showed only its top-left corner). */
.speaker-portrait canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.dialogue-copy {
  min-width: 0;
}

.dialogue-copy > strong {
  display: block;
  color: var(--spruce-900);
  font: 900 0.9rem/1.1 var(--font-ui);
}

.dialogue-copy > p {
  min-height: 2.7em;
  margin: 7px 0 10px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.dialogue-choices {
  display: grid;
  gap: 7px;
  margin-bottom: 8px;
}

.dialogue-next {
  float: right;
  min-width: 120px;
}

.modal {
  width: min(100%, 760px);
  max-height: min(88dvh, 780px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 3px solid var(--spruce-900);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 0 rgba(7, 28, 23, 0.32);
}

.modal.modal-wide {
  width: min(100%, 900px);
}

.modal-header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  color: var(--paper);
  background: var(--spruce-900);
}

.modal-header h2 {
  margin: 0;
  font: 900 1.05rem/1.15 var(--font-ui);
}

.modal-header .icon-button {
  flex: 0 0 auto;
  font-size: 1.4rem;
}

.modal-body {
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 2px solid var(--panel-border);
}

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

.menu-tile {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 7px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background: var(--parchment);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 0 rgba(22, 59, 50, 0.12);
  cursor: pointer;
}

.menu-tile .tile-icon {
  color: var(--fern-700);
  font-size: 1.5rem;
}

.menu-tile strong {
  font: 800 0.78rem/1.15 var(--font-ui);
}

.menu-tile small {
  color: var(--muted);
  font-size: 0.66rem;
}

.tab-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 12px;
}

.tab-button {
  min-height: 42px;
  flex: 0 0 auto;
  padding: 8px 12px;
  color: var(--muted);
  background: transparent;
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-sm);
  font: 800 0.73rem/1 var(--font-ui);
  cursor: pointer;
}

.tab-button[aria-selected="true"] {
  color: var(--paper);
  background: var(--fern-700);
  border-color: var(--spruce-900);
}

.card-list,
.settings-list,
.shop-list,
.guide-grid {
  display: grid;
  gap: 9px;
}

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

.animal-card,
.item-row,
.setting-row,
.shop-row,
.quest-card,
.guide-card {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--parchment);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-md);
}

.animal-card {
  grid-template-columns: 66px minmax(0, 1fr) auto;
}

/* Phones: the buttons go under the card, so the name, level and tags
   keep a readable width. */
@media (max-width: 520px) {
  .animal-card {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .animal-card .row-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

.animal-card canvas,
.guide-card canvas,
.starter-card canvas {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  background: var(--mist);
  border: 2px solid rgba(22, 59, 50, 0.25);
  border-radius: var(--radius-sm);
}

.animal-meta {
  min-width: 0;
}

.animal-meta strong,
.item-row strong,
.shop-row strong {
  display: block;
  font: 800 0.78rem/1.2 var(--font-ui);
}

.animal-meta small,
.item-row small,
.shop-row small,
.quest-card p {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.mini-vitality {
  height: 7px;
  margin-top: 6px;
  overflow: hidden;
  background: #d5d2c6;
  border-radius: 99px;
}

.mini-vitality span {
  display: block;
  height: 100%;
  background: var(--fern-700);
}

/* Experience: a gold bar, on team cards, the battle card and the results. */
.xp-track {
  height: 12px;
  overflow: hidden;
  background: #e7dfc6;
  border: 1px solid rgba(123, 88, 25, 0.45);
  border-radius: 99px;
}

.xp-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(#f5d27a, #e0a33a);
  border-radius: inherit;
}

.xp-track-mini {
  height: 5px;
  margin-top: 4px;
}

/* The results card after an encounter. */
.results-lead {
  margin: 0 0 10px;
  font: 800 0.95rem/1.35 var(--font-ui);
}

.results-list {
  display: grid;
  gap: 10px;
}

.result-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  background: var(--parchment);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-md);
}

.result-row.is-leveled {
  border-color: #d9a441;
  box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.28);
}

.result-row canvas {
  width: 56px;
  height: 56px;
  border-radius: 10px;
}

.result-main p {
  margin: 0;
}

.result-name {
  margin-bottom: 5px !important;
  font: 800 0.92rem/1.3 var(--font-ui);
}

.result-level {
  color: var(--muted);
  font-size: 0.8rem;
}

.result-xp {
  margin-top: 4px !important;
  color: #7b5819;
  font: 800 0.8rem/1.3 var(--font-ui);
}

.result-bonus {
  margin-left: 4px;
  color: var(--fern-700);
}

.result-levelup {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fff4d6;
  border: 1px solid #e3b95c;
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity calc(300ms * var(--motion)) ease, transform calc(300ms * var(--motion)) ease;
}

.result-levelup.is-shown {
  opacity: 1;
  transform: none;
}

.result-levelup-title {
  color: #7b4d0c;
  font: 900 0.9rem/1.3 var(--font-ui);
}

.result-gains,
.result-learned,
.result-milestone {
  margin-top: 4px !important;
  font-size: 0.82rem;
  line-height: 1.35;
}

.result-milestone {
  color: #7b5819;
  font-weight: 800;
}

.result-next {
  margin-top: 6px !important;
  color: var(--muted);
  font: 700 0.78rem/1.3 var(--font-ui);
}

.results-explain {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.item-row,
.shop-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.small-button {
  min-height: 38px;
  padding: 7px 10px;
  color: var(--paper);
  background: var(--fern-700);
  border: 2px solid var(--spruce-800);
  border-radius: var(--radius-sm);
  font: 800 0.68rem/1 var(--font-ui);
  cursor: pointer;
}

.small-button.danger {
  background: var(--danger);
}

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

.setting-row label {
  font: 800 0.76rem/1.2 var(--font-ui);
}

.setting-row p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.66rem;
}

.toggle {
  position: relative;
  width: 54px;
  height: 32px;
  display: inline-block;
}

.toggle input {
  position: absolute;
  opacity: 0;
}

.toggle span {
  position: absolute;
  inset: 0;
  background: #a5aaa5;
  border: 2px solid #59655f;
  border-radius: 99px;
  transition: background calc(140ms * var(--motion)) ease;
}

.toggle span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
  transition: transform calc(140ms * var(--motion)) ease;
}

.toggle input:checked + span {
  background: var(--fern-700);
}

.toggle input:checked + span::after {
  transform: translateX(22px);
}

.range-input {
  width: min(180px, 36vw);
  accent-color: var(--fern-700);
}

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

.starter-card {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  color: var(--ink);
  background: var(--parchment);
  border: 3px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 0 rgba(22, 59, 50, 0.14);
  cursor: pointer;
}

.starter-card:hover,
.starter-card:focus-visible,
.starter-card.is-selected {
  border-color: var(--fern-700);
}

.starter-card canvas {
  width: 116px;
  height: 116px;
}

.starter-card h3 {
  margin: 2px 0 0;
  font: 900 0.9rem/1.1 var(--font-ui);
}

.starter-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.35;
  text-align: center;
}

/* A Partner: a small gold tag by its name, and the signature action on
   each starter card. */
.partner-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 7px;
  color: #3b2a07;
  background: linear-gradient(#f6d37e, #e2a93f);
  border: 1px solid #b07a1d;
  border-radius: 999px;
  font: 900 0.62rem/1.2 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.partner-intro,
.partner-note {
  margin: 0 0 12px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.partner-intro .partner-tag,
.partner-note .partner-tag {
  margin: 0 4px 0 0;
}

.starter-card .starter-signature {
  color: var(--spruce-900);
  font-weight: 700;
}

.affinity-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--spruce-900);
  font: 800 0.64rem/1 var(--font-ui);
}

.affinity-symbol {
  width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  color: var(--paper);
  background: var(--fern-700);
  border-radius: 5px;
  font-size: 0.64rem;
}

.guide-card {
  min-height: 142px;
  grid-template-columns: 56px minmax(0, 1fr);
  opacity: 0.46;
}

.guide-card.is-seen {
  opacity: 1;
}

.guide-card canvas {
  width: 56px;
  height: 56px;
  filter: brightness(0);
}

.guide-card.is-recorded canvas {
  filter: none;
}

.guide-card strong {
  font: 800 0.72rem/1.15 var(--font-ui);
}

.guide-card small {
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.3;
}

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

.stat-cell {
  padding: 9px;
  text-align: center;
  background: var(--parchment);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-sm);
}

.stat-cell strong {
  display: block;
  color: var(--spruce-900);
  font: 900 1rem/1 var(--font-ui);
}

.stat-cell span {
  color: var(--muted);
  font-size: 0.6rem;
  text-transform: uppercase;
}

/* The card that introduces a newly recruited companion. */
.new-companion {
  display: grid;
  grid-template-columns: minmax(110px, 170px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.new-companion canvas {
  width: 100%;
  background: var(--mist);
  border: 2px solid var(--panel-border);
  border-radius: 12px;
}

.new-companion p {
  margin: 0 0 8px;
}

.new-companion-name {
  font-family: var(--font-ui);
}

.new-companion-name em {
  color: var(--muted);
  font-size: 0.8rem;
}

.affinity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.affinity-chip {
  padding: 3px 9px;
  color: #fff;
  background: var(--chip, var(--spruce-800));
  border-radius: 999px;
  font: 800 0.72rem/1.4 var(--font-ui);
}

.new-companion-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 12px;
  margin: 12px 0 10px;
  padding: 10px 12px;
  background: var(--parchment);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.new-companion-facts dt {
  color: var(--spruce-900);
  font: 800 0.8rem/1.4 var(--font-ui);
}

.new-companion-facts dd {
  margin: 0;
}

.new-companion-where {
  margin: 0;
  color: var(--fern-700);
  font: 800 0.85rem/1.35 var(--font-ui);
}

@media (max-width: 380px) {
  .new-companion {
    grid-template-columns: 1fr;
  }

  .new-companion canvas {
    max-width: 150px;
  }
}

.puzzle-board {
  display: grid;
  gap: 12px;
}

.puzzle-track {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: var(--parchment);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-md);
}

.track-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--spruce-900);
  background: var(--mist);
  border: 2px dashed var(--fern-700);
  border-radius: 50%;
  font-size: 1.65rem;
}

.puzzle-track select {
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 7px;
}

.toast {
  position: absolute;
  z-index: 100;
  left: 50%;
  bottom: 24px;
  max-width: calc(100% - 28px);
  padding: 10px 15px;
  color: var(--paper);
  text-align: center;
  background: var(--spruce-950);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.25);
  font: 800 0.75rem/1.25 var(--font-ui);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity calc(180ms * var(--motion)) ease, transform calc(180ms * var(--motion)) ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ending-screen {
  /* Scrolls when the card is taller than the screen (a phone on its side
     used to cut off the medal and both buttons). The card's auto margins
     centre it whenever it fits. */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  padding: 16px 0 max(16px, env(safe-area-inset-bottom));
  color: var(--paper);
  background: var(--spruce-900);
}

.ending-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 30, 25, 0.68);
}

.ending-content {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: min(100% - 32px, 620px);
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px;
  text-align: center;
  background: rgba(14, 40, 34, 0.9);
  border: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.3);
}

.medal-art {
  position: relative;
  width: 112px;
  height: 130px;
  margin-bottom: 10px;
}

.medal-ribbon {
  position: absolute;
  inset: 0 22px 40px;
  background: linear-gradient(90deg, var(--rust) 0 34%, var(--parchment) 34% 66%, var(--fern-700) 66%);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 50% 80%, 18% 100%);
}

.medal-disc {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  color: var(--gold-dark);
  background: var(--gold);
  border: 7px double #ffe09a;
  border-radius: 50%;
  box-shadow: 0 6px 0 #6f4616;
  transform: translateX(-50%);
}

.medal-disc svg {
  width: 54px;
}

.ending-content h2 {
  margin: 6px 0 8px;
  font: 900 clamp(1.5rem, 5vw, 2.35rem)/1.05 var(--font-ui);
}

.ending-content > p {
  margin: 0 0 18px;
  color: #dcebe2;
  line-height: 1.45;
}

.ending-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.ending-stats > div {
  padding: 10px 6px;
  color: var(--ink);
  background: var(--parchment);
  border-radius: var(--radius-sm);
}

.ending-stats strong {
  display: block;
  color: var(--spruce-900);
  font: 900 1.2rem/1 var(--font-ui);
}

.ending-stats span {
  font-size: 0.62rem;
}

.ending-content .button {
  width: min(100%, 340px);
  margin-top: 7px;
}

.dev-panel {
  position: absolute;
  z-index: 120;
  top: 0;
  right: 0;
  width: min(100%, 390px);
  height: 100%;
  color: var(--paper);
  background: rgba(7, 30, 25, 0.98);
  border-left: 3px solid var(--gold);
  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.35);
}

.dev-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
}

.dev-panel header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
}

.dev-panel h2 {
  margin: 0;
  color: var(--gold);
  font: 900 1rem/1 var(--font-ui);
}

.dev-content {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  overflow-y: auto;
  padding: 12px;
}

.dev-group {
  padding: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
}

.dev-group h3 {
  margin: 0 0 7px;
  color: var(--gold);
  font: 800 0.76rem/1 var(--font-ui);
}

.dev-group .small-button {
  margin: 3px;
}

.dev-output {
  max-height: 180px;
  overflow: auto;
  padding: 8px;
  color: #cfe7dc;
  background: #061b17;
  border-radius: 6px;
  font: 0.66rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
}

.high-contrast {
  --parchment: #fff;
  --paper: #fff;
  --ink: #000;
  --muted: #282828;
  --spruce-900: #002b22;
  --fern-700: #005f41;
  --gold: #ffd24c;
  --panel-border: #132c25;
}

.reduced-motion {
  --motion: 0;
}

.large-text {
  --text-scale: 1.15;
}

.region-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(78px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding: 22px 6px 16px;
}

.region-map::before {
  content: "";
  position: absolute;
  top: 43px;
  left: 7%;
  right: 7%;
  height: 4px;
  background: var(--fern-300);
  border: 1px solid var(--fern-700);
}

.region-stop {
  position: relative;
  z-index: 1;
  min-width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--muted);
  text-align: center;
}

.region-node {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 7px;
  color: var(--paper);
  background: var(--fern-700);
  border: 3px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--spruce-800);
}

.region-stop.is-current .region-node {
  color: var(--spruce-950);
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--rust);
}

.region-stop strong {
  font: 800 0.68rem/1.15 var(--font-ui);
}

.region-stop small {
  margin-top: 2px;
  font-size: 0.58rem;
}

.noscript {
  position: fixed;
  inset: 20px;
  display: grid;
  place-items: center;
  color: white;
  background: #163b32;
  text-align: center;
}

@media (min-width: 760px) and (min-height: 620px) {
  .game-shell {
    width: min(100vw, 980px);
    height: min(100dvh, 820px);
    border: 5px solid #0b2a23;
    border-radius: 22px;
  }

  .game-screen {
    padding-left: 0;
  }

  .world-frame {
    margin-right: 270px;
  }

  .field-controls {
    position: absolute;
    top: 64px;
    right: 0;
    bottom: 0;
    width: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 3px solid var(--spruce-900);
  }

  .objective-strip {
    min-height: 84px;
    align-items: start;
  }

  .objective-strip strong {
    white-space: normal;
  }

  .touch-controls {
    position: static;
    height: auto;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    gap: 34px;
    padding: 24px 0 20px;
    pointer-events: auto;
    --pad-bg: var(--spruce-800);
    --pad-pressed: #2f6453;
    --pad-border: #5f8875;
    --pad-shadow: #0d3028;
    --a-bg: var(--rust);
    --pack-bg: var(--fern-700);
  }

  .interaction-hint {
    left: auto;
    right: 12px;
    bottom: 12px;
    transform: none;
  }

  .dpad {
    --dpad-w: 190px;
  }

  .action-cluster {
    padding-right: 0;
  }

  .battle-scene:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    grid-template-rows: 1fr;
  }

  #battleCanvas {
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .battle-field {
    min-height: 0;
  }

  .battle-console {
    grid-column: 2;
    grid-row: 1;
    grid-template-rows: auto auto 1fr;
    border-top: 0;
    border-left: 3px solid var(--spruce-900);
    padding: 16px;
  }

  .battle-utility {
    align-self: end;
  }

  .opponent-status {
    top: 18px;
    left: 18px;
    width: 260px;
  }

  .player-status {
    right: 18px;
    bottom: 18px;
    width: 260px;
  }

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

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

  .action-button {
    min-height: 72px;
  }
}

@media (max-width: 520px) {
  .game-shell {
    height: 100dvh;
  }

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

  .brand-lockup h1 {
    font-size: clamp(2.35rem, 13vw, 4rem);
  }

  .title-copy {
    font-size: 0.89rem;
  }

  .top-rail {
    height: 58px;
    flex-basis: 58px;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Still at least 44px square: easy to tap with an unsteady hand. */
  .resource {
    min-height: 44px;
    padding: 5px 8px;
  }

  .icon-button {
    width: 44px;
    height: 44px;
  }

  .battle-scene {
    top: 58px;
  }

  .field-controls {
    padding: 7px 9px max(7px, env(safe-area-inset-bottom));
  }

  .action-cluster {
    gap: 10px;
  }

  .round-button-primary {
    width: 68px;
    height: 68px;
  }

  .round-button-secondary {
    width: 56px;
    height: 56px;
  }

  .dialogue-box {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }

  .speaker-portrait {
    width: 60px;
    height: 60px;
  }

  .starter-grid,
  .guide-grid {
    grid-template-columns: 1fr;
  }

  .starter-card {
    min-height: 164px;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    text-align: left;
  }

  .starter-card canvas {
    grid-row: 1 / 5;
    width: 100px;
    height: 100px;
  }

  .starter-card p {
    text-align: left;
  }

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

  .modal-body {
    padding: 12px;
  }

  .battle-console {
    gap: 6px;
    padding: 7px 9px max(7px, env(safe-area-inset-bottom));
  }

  .battle-log {
    min-height: 38px;
    max-height: 50px;
  }

  .action-button {
    min-height: 54px;
  }

  .ending-content {
    padding: 20px 15px;
  }
}

@media (max-height: 650px) {
  .title-content {
    min-height: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .title-copy {
    margin-bottom: 12px;
  }

  .title-actions {
    gap: 7px;
  }

  .button-large {
    min-height: 48px;
  }

  /* Short screens: a little smaller, still far bigger than it was. */
  .game-screen {
    --dpad-w: min(176px, calc(100vw - 160px));
  }

  .round-button-primary {
    width: 60px;
    height: 60px;
  }

  .round-button-secondary {
    width: 50px;
    height: 50px;
  }

  .battle-field {
    min-height: 150px;
  }

  /* The log stays (it was hidden here, which also silenced it for screen
     readers); it just shrinks to a line or two. */
  .battle-log {
    min-height: 32px;
    max-height: 40px;
    padding: 5px 9px;
    font-size: 0.74rem;
  }

  .battle-console {
    gap: 6px;
    padding-top: 7px;
  }

  .action-button {
    min-height: 52px;
    padding: 6px 9px 7px;
  }

  .action-desc {
    -webkit-line-clamp: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0;
  }
}

/* ---- The park's "← Map" link ----------------------------------------------
   The park pins a "← Map" link (about 86px wide) at the page's top-left.
   Wherever Wildward's frame reaches that corner, the top rail starts its
   name and permit after the link instead of under it: the padding is the
   link's right edge plus a gap, minus how far the frame already sits from
   the left edge. */
.top-rail {
  padding-left: max(16px, calc(max(10px, env(safe-area-inset-left)) + 100px - (100vw - min(100vw, 960px)) / 2));
}

@media (max-width: 359px) {
  /* Too narrow for the name beside the link and the resources; the field
     pack shows them at the top instead. */
  .top-identity {
    display: none;
  }
}

.pack-identity {
  margin: 0 0 10px;
  color: var(--muted);
  font: 800 0.78rem/1.3 var(--font-ui);
}

@media (min-width: 760px) and (min-height: 620px) {
  .top-rail {
    padding-left: max(16px, calc(max(10px, env(safe-area-inset-left)) + 100px - (100vw - min(100vw, 980px)) / 2 - 5px));
  }
}

/* ---- Landscape phones ------------------------------------------------------
   A phone on its side is too short to stack the map (or the battle) over its
   controls: the map shrank to a strip and battle buttons ran over Switch and
   Offer Care. As on desktop, the controls move to a column on the right. */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 600px) {
  .world-frame {
    margin-right: min(38vw, 260px);
  }

  .field-controls {
    position: absolute;
    top: 64px;
    right: 0;
    bottom: 0;
    width: min(38vw, 260px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    padding: 8px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 10px;
    border-left: 3px solid var(--spruce-900);
  }

  .objective-strip {
    min-height: 0;
    padding: 6px 8px;
  }

  /* The Pack and A buttons sit above the d-pad here, so the pad can take
     the panel's whole width. */
  .touch-controls {
    position: static;
    height: auto;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    pointer-events: auto;
    --pad-bg: var(--spruce-800);
    --pad-pressed: #2f6453;
    --pad-border: #5f8875;
    --pad-shadow: #0d3028;
    --a-bg: var(--rust);
    --pack-bg: var(--fern-700);
  }

  .action-cluster {
    order: -1;
    align-self: flex-end;
  }

  .dpad {
    --dpad-w: min(190px, calc(min(38vw, 260px) - 24px));
  }

  .interaction-hint {
    left: auto;
    right: 12px;
    bottom: 12px;
    transform: none;
  }

  .battle-scene:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(50vw, 390px);
    grid-template-rows: minmax(0, 1fr);
  }

  .battle-field {
    min-height: 0;
  }

  .battle-console {
    grid-column: 2;
    grid-row: 1;
    overflow-y: auto;
    border-top: 0;
    border-left: 3px solid var(--spruce-900);
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .battle-status {
    width: min(46%, 230px);
  }

  .ending-content {
    padding: 14px 22px;
  }

  .medal-art {
    width: 84px;
    height: 98px;
    margin-bottom: 4px;
  }

  .medal-disc {
    width: 60px;
    height: 60px;
    border-width: 5px;
  }

  .medal-disc svg {
    width: 40px;
  }

  .ending-content h2 {
    font-size: 1.4rem;
  }

  .ending-content > p,
  .ending-stats {
    margin-bottom: 10px;
  }
}