@font-face {
  font-family: "Noto Sans SC UI";
  src: url("../assets/runtime/fonts/NotoSansSC-UI.ttf") format("truetype");
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #312c36;
  --paper: #f7ebd2;
  --muted: #716872;
  --deep: #13283c;
  --coral: #dc6258;
  --sage: #63a58e;
  --gold: #e7b64b;
  --world-background-image: url("../assets/runtime/ui-v10/play-backdrop-jiangnan.png");
  --world-background-landscape-image: url("../assets/runtime/ui-v10/play-backdrop-jiangnan-landscape.png");
  --transition-background-image: var(--world-background-image);
  --transition-background-landscape-image: var(--world-background-landscape-image);
  --ambient-travel: -512px;
  --cell: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  font-family: "Noto Sans SC UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--deep);
}

body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  touch-action: manipulation;
}

button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--paper);
  font: 700 13px/18px inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
.match-board:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -4px;
}

[data-modal-focus]:focus { outline: none; }

button:disabled { cursor: not-allowed; }
img { image-rendering: pixelated; }
.pet-portrait { image-rendering: auto; }

.stage-wrap {
  position: relative;
  width: min(100%, 430px);
  height: 100dvh;
  max-height: 932px;
  overflow: hidden;
}

.game-stage {
  position: relative;
  display: grid;
  grid-template-rows: 48px 64px 358px 80px 60px 64px;
  gap: clamp(6px, calc((100dvh - max(12px, var(--safe-top)) - max(12px, var(--safe-bottom)) - 674px) / 5), 14px);
  align-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: max(12px, var(--safe-top)) 16px max(12px, var(--safe-bottom));
  overflow: hidden;
  color: var(--ink);
  background-color: #13283c;
  isolation: isolate;
}

.game-stage[aria-busy="true"] { pointer-events: none; }

.world-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.world-backdrop * { pointer-events: none; }

.world-backdrop-base,
.world-backdrop-depth {
  position: absolute;
  inset: -4px;
  background-image: var(--world-background-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.world-backdrop-depth-far {
  z-index: 1;
  clip-path: inset(0 0 66% 0);
}

.world-backdrop-depth-near {
  z-index: 2;
  clip-path: inset(66% 0 0 0);
}

.world-ambient-vehicle {
  position: absolute;
  z-index: 3;
  top: 18%;
  right: -16px;
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: .24;
}

.game-stage[data-stage-theme="jiangnan-osmanthus-rain"] .world-backdrop-depth-far { clip-path: inset(0 0 58% 0); }
.game-stage[data-stage-theme="jiangnan-osmanthus-rain"] .world-backdrop-depth-near { clip-path: inset(72% 0 0 0); }
.game-stage[data-stage-theme="jiangnan-stone-bridge-dusk"] .world-backdrop-depth-far { clip-path: inset(0 0 62% 0); }
.game-stage[data-stage-theme="jiangnan-stone-bridge-dusk"] .world-backdrop-depth-near { clip-path: inset(70% 0 0 0); }
.game-stage[data-stage-theme="setouchi-wind-lighthouse"] .world-backdrop-depth-far { clip-path: inset(0 0 64% 0); }
.game-stage[data-stage-theme="setouchi-wind-lighthouse"] .world-backdrop-depth-near { clip-path: inset(76% 0 0 0); }
.game-stage[data-stage-theme="setouchi-wind-lighthouse"] .world-ambient-vehicle { top: 13%; opacity: .28; }
.game-stage[data-stage-theme="setouchi-sunset-dock"] .world-backdrop-depth-far { clip-path: inset(0 0 68% 0); }
.game-stage[data-stage-theme="setouchi-sunset-dock"] .world-backdrop-depth-near { clip-path: inset(70% 0 0 0); }
.game-stage[data-stage-theme="setouchi-sunset-dock"] .world-ambient-vehicle { top: 22%; opacity: .3; }

.game-stage > .top-bar,
.game-stage > .mission-card,
.game-stage > .board-frame,
.game-stage > .pet-feedback,
.game-stage > .skill-button,
.game-stage > .bottom-dock {
  position: relative;
  z-index: 2;
}

.stage-fx {
  position: absolute;
  z-index: 40;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.top-bar,
.mission-card,
.board-frame,
.pet-bubble,
.skill-button,
.bottom-dock,
.toast,
.modal-panel,
.catalog-card,
.hex-card,
.augment-row {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.top-bar {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 2px 8px;
  background-image: url("../assets/runtime/ui-v3/topbar-calm.png");
}

.ui-button,
.modal-panel button:not(.hex-card) {
  --button-normal: url("../assets/runtime/ui-v2/button-secondary-normal.png");
  --button-focus: url("../assets/runtime/ui-v2/button-secondary-focus.png");
  --button-pressed: url("../assets/runtime/ui-v2/button-secondary-pressed.png");
  --button-disabled: url("../assets/runtime/ui-v2/button-secondary-disabled.png");
  background-color: transparent;
  background-image: var(--button-normal);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ui-button.primary,
.modal-panel button.primary {
  --button-normal: url("../assets/runtime/ui-v2/button-primary-normal.png");
  --button-focus: url("../assets/runtime/ui-v2/button-primary-focus.png");
  --button-pressed: url("../assets/runtime/ui-v2/button-primary-pressed.png");
  --button-disabled: url("../assets/runtime/ui-v2/button-primary-disabled.png");
  color: var(--deep);
}

.ui-button:focus-visible,
.modal-panel button:not(.hex-card):focus-visible { background-image: var(--button-focus); }
.ui-button:active:not(:disabled),
.modal-panel button:not(.hex-card):active:not(:disabled) { background-image: var(--button-pressed); }
.ui-button:disabled,
.modal-panel button:not(.hex-card):disabled { background-image: var(--button-disabled); color: #d8d3ca; }

.top-action {
  width: 64px;
  height: 44px;
  justify-self: center;
  color: var(--ink) !important;
  background-image: none !important;
  font-size: 13px;
}

.title-slot {
  display: grid;
  place-content: center;
  min-width: 0;
  color: var(--ink);
  text-align: center;
}

.title-slot strong { font-size: 17px; line-height: 20px; white-space: nowrap; }
.title-slot span { color: var(--muted); font-size: 11px; font-weight: 700; line-height: 14px; }
.title-slot span b { color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }

.coin-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.coin-button img { width: 24px; height: 24px; }
.coin-button b { max-width: 34px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; }

.mission-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: center;
  width: 358px;
  height: 64px;
  padding: 4px 8px 4px 10px;
  background-image: url("../assets/runtime/ui-v3/mission-calm.png");
  background-size: 358px 64px;
}

.pet-feedback {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  align-items: center;
  justify-self: center;
  width: min(358px, 100%);
  height: 80px;
}

.pet-feedback:not(.has-message) {
  grid-template-columns: 1fr;
  width: 176px;
}

.pet-feedback:not(.has-message) .pet-bubble { display: none; }

.pet-stage {
  position: relative;
  display: grid;
  place-items: end center;
  width: 176px;
  height: 80px;
  overflow: visible;
}

.pet-stage-vehicle {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -24px;
  width: 128px;
  height: 128px;
  translate: -50% 0;
  object-fit: contain;
  opacity: .42;
  filter: saturate(.84) brightness(.96);
  image-rendering: pixelated;
  pointer-events: none;
}

.pet-feedback.premium-skin .pet-stage::before,
.pet-feedback.premium-skin .pet-stage::after {
  position: absolute;
  z-index: 3;
  width: 24px;
  height: 24px;
  background: url("../assets/runtime/ui-v4/fx-paw-gold.png") center / contain no-repeat;
  content: "";
  pointer-events: none;
}

.pet-feedback.premium-skin .pet-stage::before { top: 0; left: 22px; }
.pet-feedback.premium-skin .pet-stage::after {
  right: 20px;
  bottom: 8px;
  background-image: url("../assets/runtime/ui-v4/fx-paw-purple.png");
}

.pet-image {
  position: relative;
  z-index: 2;
  width: 116px;
  height: 116px;
  margin-bottom: -4px;
  object-fit: contain;
  transform-origin: 50% 92%;
}

.pet-motion-shell {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: end center;
  transform-origin: 50% 92%;
}

.pet-image.hd-pet {
  image-rendering: auto;
  filter: drop-shadow(0 3px 1px rgb(49 44 54 / .38)) drop-shadow(0 6px 4px rgb(19 40 60 / .22));
}

.pet-bubble {
  display: grid;
  place-items: center;
  width: 100%;
  height: 44px;
  padding: 4px 16px;
  color: var(--muted);
  background-image: url("../assets/runtime/ui-v3/topbar-calm.png");
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.mission-goal {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mission-goal > img { width: 36px; height: 36px; justify-self: center; }
.goal-finish-button {
  width: 52px;
  height: 52px;
  justify-self: center;
  color: var(--deep);
  font-size: 13px;
  line-height: 16px;
}
.mission-goal div { display: grid; place-items: center; min-width: 0; text-align: center; }
.mission-goal strong { overflow: hidden; font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.mission-goal p { display: flex; align-items: center; justify-content: center; gap: 3px; margin: 0; }
.mission-goal p b { color: var(--sage); font-size: 13px; line-height: 16px; font-variant-numeric: tabular-nums; }
.score-mastery { display: flex; align-items: center; justify-content: center; gap: 1px; min-width: 47px; }
.score-mastery img { width: 14px; height: 14px; object-fit: contain; opacity: .2; filter: grayscale(1); }
.score-mastery img.active { opacity: 1; filter: brightness(1.14) saturate(1.2) drop-shadow(0 1px 0 rgb(155 84 47 / .28)); }

.mastery-burst {
  position: absolute;
  z-index: 2;
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.round-stats {
  display: grid;
  place-items: center;
  width: 64px;
  height: 52px;
  padding: 2px 0;
  text-align: center;
}

.round-stats > div { display: flex; align-items: baseline; justify-content: center; min-width: 0; height: 44px; }
.round-stats span { align-self: flex-start; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 14px; }
.round-stats b { align-self: center; color: var(--ink); font-size: 22px; line-height: 26px; font-variant-numeric: tabular-nums; }
.round-stats small { color: var(--muted); font-size: 11px; font-weight: 700; line-height: 14px; }

.board-frame {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 358px;
  height: 358px;
  padding: 3px;
  background-image: url("../assets/runtime/ui-v3/board-frame-calm.png");
}

.match-board {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(8, var(--cell));
  grid-template-rows: repeat(8, var(--cell));
  width: calc(var(--cell) * 8);
  height: calc(var(--cell) * 8);
  overflow: hidden;
  touch-action: none;
}

.board-fx {
  position: relative;
  z-index: 8;
  grid-area: 1 / 1;
  width: calc(var(--cell) * 8);
  height: calc(var(--cell) * 8);
  overflow: hidden;
  pointer-events: none;
}

.tutorial-layer {
  position: relative;
  z-index: 10;
  grid-area: 1 / 1;
  width: calc(var(--cell) * 8);
  height: calc(var(--cell) * 8);
  overflow: hidden;
  pointer-events: none;
}

.tutorial-copy {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 164px;
  height: 38px;
  color: var(--ink);
  background: url("../assets/runtime/ui-v3/topbar-calm.png") center / 100% 100% no-repeat;
  font-size: 14px;
  font-weight: 800;
  line-height: 18px;
  filter: drop-shadow(0 2px 0 rgb(49 44 54 / .28));
  translate: -50% 0;
}

.tutorial-paw {
  position: absolute;
  top: var(--hint-y);
  left: var(--hint-x);
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 #9b542f) drop-shadow(0 0 4px #ffe78b);
}

.tutorial-layer.static .tutorial-paw {
  translate: var(--hint-static-x) var(--hint-static-y);
}

.fx-burst,
.skill-hit-stamp {
  position: absolute;
  width: 40px;
  height: 40px;
  object-fit: contain;
  pointer-events: none;
}

.drop-landing {
  position: absolute;
  z-index: 11;
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
}

.skill-tracer {
  position: absolute;
  z-index: 42;
  width: 32px;
  height: 32px;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
}

.match-board.swapping .tile.swap-moving { z-index: 7; }
.match-board.swapping .tile.swap-moving img { transform-origin: center; }

.skill-hit-stamp {
  z-index: 10;
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 2px 0 rgb(65 48 71 / .35));
}

.fx-burst.skill {
  width: 36px;
  height: 36px;
  margin: 2px;
  opacity: .88;
}

.combo-callout {
  position: absolute;
  z-index: 12;
  top: 44%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 188px;
  height: 52px;
  color: var(--ink);
  background: url("../assets/runtime/ui-v3/topbar-calm.png") center / 100% 100% no-repeat;
  font-size: 17px;
  line-height: 24px;
  opacity: 0;
  translate: -50% -50%;
  pointer-events: none;
}

.combo-callout[data-tier="2"] { color: #2c6759; }
.combo-callout[data-tier="3"] { color: #74488c; filter: drop-shadow(0 3px 0 rgb(49 44 54 / .28)); }
.combo-callout[data-tier="4"] { width: 204px; color: #9b542f; filter: brightness(1.08) drop-shadow(0 4px 0 rgb(49 44 54 / .32)); }

.combo-callout[data-tier="3"]::before,
.combo-callout[data-tier="3"]::after,
.combo-callout[data-tier="4"]::before,
.combo-callout[data-tier="4"]::after {
  position: absolute;
  width: 32px;
  height: 32px;
  background: url("../assets/runtime/ui-v4/fx-paw-gold.png") center / contain no-repeat;
  content: "";
}
.combo-callout[data-tier="3"]::before,
.combo-callout[data-tier="4"]::before { left: -24px; rotate: -18deg; }
.combo-callout[data-tier="3"]::after,
.combo-callout[data-tier="4"]::after {
  right: -24px;
  background-image: url("../assets/runtime/ui-v4/fx-paw-coral.png");
  rotate: 18deg;
}

.tile {
  position: relative;
  display: grid;
  place-items: center;
  min-width: var(--cell);
  min-height: var(--cell);
  width: var(--cell);
  height: var(--cell);
  background-color: transparent;
  background-image: url("../assets/runtime/ui-v3/board-cell-calm.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.tile img {
  width: 34px;
  height: 34px;
  pointer-events: none;
  transform-origin: 50% 70%;
}

.tile.selected {
  z-index: 3;
  outline: 4px solid #ffe78b;
  outline-offset: -4px;
  box-shadow: inset 0 0 0 6px #9b542f;
  filter: brightness(1.14) saturate(1.08);
}

.tile.selected::before {
  position: absolute;
  z-index: 4;
  top: 1px;
  right: 1px;
  width: 18px;
  height: 18px;
  background: url("../assets/runtime/paw-stamp.png") center / contain no-repeat;
  content: "";
  pointer-events: none;
}

.tile.selected img { translate: 0 -2px; scale: 1.08; }
.tile.tutorial-source,
.tile.tutorial-target { z-index: 2; outline: 3px solid #ffe78b; outline-offset: -4px; filter: brightness(1.14); }
.tile.tutorial-target { box-shadow: inset 0 0 0 4px var(--sage); }
.tile.tutorial-target::before {
  position: absolute;
  z-index: 5;
  inset: 5px;
  background: url("../assets/runtime/aid-preview.png") center / 28px 28px no-repeat;
  content: "";
  pointer-events: none;
}
.mission-goal.complete > img { filter: brightness(1.16) saturate(1.3) drop-shadow(0 0 4px #ffe78b); }
.mission-goal.complete strong { color: var(--sage); }
.tile.swap-neighbor:not(.selected) { box-shadow: inset 0 0 0 2px var(--sage); filter: brightness(1.05); }
.tile.cursor:not(.selected):not(.swap-neighbor) { outline: 2px dashed var(--sage); outline-offset: -3px; }
.tile:active img { translate: 0 2px; scale: .94; }
.match-board.skill-targeting .tile:not(.skill-target) img { filter: brightness(.66) saturate(.72); }
.tile.skill-target { z-index: 2; box-shadow: inset 0 0 0 3px #72c9a8; filter: brightness(1.12); }
.tile.skill-center { z-index: 4; outline: 4px solid #ffe78b; outline-offset: -4px; }
.tile.skill-center::before {
  position: absolute;
  z-index: 5;
  inset: 2px;
  background: url("../assets/runtime/aid-preview.png") center / 30px 30px no-repeat;
  content: "";
  pointer-events: none;
}
.tile[data-special="row"]::after,
.tile[data-special="column"]::after,
.tile[data-special="bomb"]::after,
.tile[data-special="rainbow"]::after {
  position: absolute;
  inset: 5px;
  outline: 2px solid var(--gold);
  content: "";
  pointer-events: none;
}
.tile[data-special="row"]::after { outline-style: double; }
.tile[data-special="column"]::after { outline-style: dashed; }
.tile[data-special="bomb"]::after { outline-color: var(--coral); }
.tile[data-special="rainbow"]::after { outline-color: #9b6ad0; }

.skill-button {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 60px;
  align-items: center;
  justify-self: center;
  width: 100%;
  height: 60px;
  padding: 6px 14px;
  color: var(--ink);
  background-color: transparent;
  background-image: url("../assets/runtime/ui-v3/skill-strip-calm.png");
}
.skill-button > img { width: 32px; height: 32px; justify-self: center; }
.skill-copy { display: grid; grid-template-columns: 1fr auto; align-items: center; min-width: 0; padding-left: 6px; text-align: center; }
.skill-copy strong { grid-column: 1 / -1; font-size: 14px; line-height: 18px; }
.skill-copy small { min-width: 58px; color: #554c58; font-size: 12px; font-weight: 800; line-height: 14px; }
.skill-meter { display: flex; justify-content: center; gap: 1px; min-width: 0; }
.skill-meter img { width: 11px; height: 11px; opacity: .26; filter: grayscale(1); }
.skill-meter img.active { opacity: 1; filter: none; }
.skill-cta { color: var(--ink); font-size: 13px; line-height: 18px; }
.skill-cta:empty { visibility: hidden; }
.skill-button.ready > img { filter: brightness(1.25) drop-shadow(0 0 3px var(--gold)); }
.skill-button.ready .skill-cta { color: var(--coral); }
.skill-button.targeting { outline: 4px solid var(--gold); outline-offset: -6px; filter: brightness(1.08); }
.skill-button.casting { outline: 4px solid #9b6ad0; outline-offset: -6px; filter: brightness(1.16); }
.skill-button:disabled { filter: saturate(.84) brightness(.98); }
.skill-button:active:not(:disabled) { translate: 0 2px; filter: brightness(.9); }

.bottom-dock {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  align-self: end;
  width: 100%;
  height: 64px;
  padding: 6px 8px;
  background-image: url("../assets/runtime/ui-v4/nav-dock-empty.png");
}

.dock-button {
  display: grid;
  grid-template-rows: 28px 16px;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 104px;
  height: 48px;
  justify-self: center;
  color: var(--ink);
  background-image: none !important;
}
.dock-button img { align-self: end; justify-self: center; width: 24px; height: 24px; object-fit: contain; }
.dock-button span { align-self: start; font-size: 12px; line-height: 16px; }
.top-action:active:not(:disabled),
.dock-button:active:not(:disabled),
.menu-grid button:active:not(:disabled),
.page-header button:active:not(:disabled) { translate: 0 2px; }

.modal { position: fixed; inset: 0; z-index: 50; }
.modal-backdrop { position: absolute; inset: 0; background: rgb(32 35 49 / 78%); }

.modal-panel {
  position: fixed;
  inset: 0;
  width: min(100%, 430px);
  height: 100dvh;
  max-height: 932px;
  margin: auto;
  overflow: hidden;
  color: var(--ink);
  background-color: #0d3760;
  background-image: url("../assets/runtime/ui-v2/page-panel.png"), url("../assets/runtime/ui-v2/mobile-background.png");
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: calc(100% - 16px) calc(100% - 16px), cover;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

.full-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: max(42px, var(--safe-top)) 16px max(20px, var(--safe-bottom));
}

.page-header { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; min-height: 56px; }
.page-header h2 { margin: 0; color: var(--paper); font-size: 22px; line-height: 28px; text-align: center; }
.page-header .header-balance { display: flex; align-items: center; justify-content: center; gap: 3px; color: var(--paper); font-size: 13px; font-weight: 700; }
.page-header .header-balance img { width: 24px; height: 24px; }
.page-intro { min-height: 24px; margin: 0; padding-top: 6px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 18px; text-align: center; }
.full-page > .page-intro:last-child { color: var(--paper); }

.augment-choice-page { grid-template-rows: 56px 50px minmax(0, 1fr); gap: 8px; }
.augment-choice-intro {
  display: grid;
  place-items: center;
  min-height: 50px;
  padding: 0;
  color: var(--ink);
  background: url("../assets/runtime/ui-v3/topbar-calm.png") center / 100% 100% no-repeat;
}
.augment-choice-page > .page-scroll { padding: 4px 0 max(16px, var(--safe-bottom)); }
.augment-choice-page .hex-grid { gap: 12px; }

.page-scroll {
  min-height: 0;
  overflow: auto;
  padding: 4px 0 12px;
  overscroll-behavior: contain;
}

.page-footer {
  position: sticky;
  z-index: 3;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-height: 60px;
  padding-top: 4px;
}
.page-footer.one-action { grid-template-columns: minmax(0, 280px); justify-content: center; }
.page-footer button { width: 100%; min-height: 56px; font-size: 15px; }

.catalog-grid,
.skin-strip,
.augment-list,
.hex-grid { display: grid; gap: 10px; width: 100%; }

.catalog-section-title { margin: 8px 0 2px; font-size: 18px; line-height: 24px; text-align: center; }
.catalog-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 106px;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 128px;
  padding: 14px 12px;
  background-image: url("../assets/runtime/ui-v2/shop-card.png");
  text-align: center;
}
.catalog-card > img { width: 64px; height: 64px; justify-self: center; object-fit: contain; }
.catalog-copy { display: grid; gap: 3px; min-width: 0; }
.catalog-copy strong { font-size: 17px; line-height: 22px; }
.catalog-copy span { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 17px; }
.catalog-card > button { width: 100px; min-height: 52px; padding: 4px 8px; font-size: 13px; line-height: 17px; }
.catalog-card.equipped { filter: drop-shadow(0 0 3px var(--gold)) brightness(1.04); }

.wardrobe-card {
  position: relative;
  display: grid;
  grid-template-rows: 30px 166px 48px 56px;
  gap: 4px;
  width: min(340px, 100%);
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  margin: 4px 0 12px;
  padding: 20px 18px 12px;
  overflow: hidden;
  background: url("../assets/runtime/ui-v9/wardrobe-showcase.png") center / 100% 100% no-repeat;
}

.wardrobe-card::after { content: none; }

.wardrobe-topline {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  color: #efd38c;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 2px 0 rgb(49 44 54 / .7);
}
.wardrobe-topline strong { color: var(--paper); font-size: 20px; line-height: 26px; }

.wardrobe-showcase {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: end center;
  min-width: 0;
}

.wardrobe-hero {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  width: 160px;
  height: 160px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 7px 5px rgb(35 28 43 / .32)) drop-shadow(0 0 7px rgb(247 203 101 / .42));
  transform-origin: 50% 90%;
  animation: wardrobe-runway 2300ms ease-in-out infinite;
}

.wardrobe-hero.changing { animation: wardrobe-change 360ms cubic-bezier(.2, .9, .28, 1), wardrobe-runway 2300ms ease-in-out 360ms infinite; }

.wardrobe-look-name {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 4px;
  left: 0;
  color: #6b3d4d;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px var(--paper), 0 -1px var(--paper), 1px 0 var(--paper), -1px 0 var(--paper);
}

.wardrobe-sparkle {
  position: absolute;
  z-index: 1;
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  pointer-events: none;
  animation: wardrobe-sparkle 1200ms steps(4, end) infinite;
}
.wardrobe-sparkle.sparkle-a { top: 14px; left: 48px; }
.wardrobe-sparkle.sparkle-b { top: 54px; right: 42px; animation-delay: 300ms; }
.wardrobe-sparkle.sparkle-c { top: 98px; left: 38px; animation-delay: 600ms; }
.wardrobe-sparkle.sparkle-d { top: 8px; right: 70px; animation-delay: 900ms; }

.wardrobe-preview {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.wardrobe-look {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  background-image: url("../assets/runtime/ui-v3/board-cell-calm.png");
}
.wardrobe-look img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 2px 1px rgb(35 28 43 / .24));
}
.wardrobe-look.selected {
  background-image: url("../assets/runtime/ui-v4/fx-paw-gold.png"), url("../assets/runtime/ui-v3/board-cell-calm.png");
  background-position: right -2px top -2px, center;
  background-size: 18px 18px, 100% 100%;
  background-repeat: no-repeat;
  filter: brightness(1.1) drop-shadow(0 0 5px rgb(231 182 75 / .8));
}
.wardrobe-look:focus-visible { outline: 4px solid var(--coral); outline-offset: 1px; }
.wardrobe-look:active { translate: 0 2px; }

.wardrobe-offer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 136px;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}
.wardrobe-offer > span { color: #efd38c; font-size: 16px; font-weight: 900; line-height: 22px; text-align: center; text-shadow: 0 2px 0 rgb(49 44 54 / .72); }
.wardrobe-buy { width: 136px; min-height: 56px; font-size: 14px; }
.wardrobe-buy:not(:disabled) { animation: wardrobe-cta 1500ms steps(4, end) infinite; }
.wardrobe-card.owned { filter: drop-shadow(0 0 4px rgb(99 165 142 / .45)); }

@keyframes wardrobe-runway {
  0%, 100% { translate: 0 0; rotate: -1deg; }
  50% { translate: 0 -5px; rotate: 1deg; }
}

@keyframes wardrobe-change {
  0% { opacity: .62; scale: .88; translate: 0 8px; }
  65% { opacity: 1; scale: 1.07; translate: 0 -4px; }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}

@keyframes wardrobe-sparkle {
  0%, 100% { opacity: .2; scale: .7; }
  50% { opacity: 1; scale: 1.2; }
}

@keyframes wardrobe-cta {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgb(231 182 75 / 0)); }
  50% { filter: brightness(1.12) drop-shadow(0 0 6px rgb(231 182 75 / .75)); }
}

.hex-grid { grid-template-columns: 1fr; }
.hex-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 62px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 144px;
  padding: 22px 16px 18px;
  color: var(--ink);
  background-color: transparent;
  background-image: url("../assets/runtime/ui-v2/mission-card.png");
  text-align: center;
}
.hex-card img { width: 56px; height: 56px; justify-self: center; object-fit: contain; }
.hex-copy { display: grid; gap: 4px; min-width: 0; }
.hex-copy strong { font-size: 18px; line-height: 24px; }
.hex-copy span { color: var(--muted); font-size: 13px; line-height: 19px; }
.hex-rarity { color: var(--sage); font-size: 12px; font-weight: 700; line-height: 16px; }
.hex-card.rare .hex-rarity { color: #3d6f76; }
.hex-card.legendary .hex-rarity { color: #a06320; }
.hex-card:focus-visible { outline: 4px solid var(--gold); outline-offset: -7px; filter: brightness(1.08); }
.hex-card:active { translate: 0 2px; filter: brightness(.92); }

.augment-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  min-height: 96px;
  padding: 14px 20px;
  background-image: url("../assets/runtime/ui-v2/shop-card.png");
  text-align: center;
}
.augment-row img { width: 48px; height: 48px; }
.augment-row span { font-size: 13px; line-height: 19px; }
.augment-row strong { font-size: 17px; line-height: 22px; }

.settings-page { grid-template-rows: auto minmax(0, 1fr); }
.settings-list { display: grid; justify-items: center; gap: 8px; padding-top: 12px; }
.setting-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 58px;
  align-items: center;
  width: min(358px, 100%);
  height: auto;
  min-height: 44px;
  aspect-ratio: 358 / 64;
  padding: 4px 14px;
  color: var(--ink);
  background-image: url("../assets/runtime/ui-v3/mission-calm.png") !important;
  background-size: 100% 100% !important;
  font-size: 15px;
  text-align: left;
}
.setting-icon { display: grid; place-items: center; width: 38px; height: 38px; }
.setting-icon img { width: 30px; height: 30px; object-fit: contain; }
.setting-row strong { color: var(--ink); text-align: center; }
.setting-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--muted);
  background: url("../assets/runtime/ui-v3/board-cell-calm.png") center / 44px 44px no-repeat;
  font-size: 12px;
  line-height: 16px;
}
.setting-toggle.on { color: #2c6759; filter: brightness(1.05) saturate(1.1); }
.setting-row:hover,
.setting-row:focus-visible { filter: brightness(1.08) drop-shadow(0 2px 0 rgb(49 44 54 / .22)); }
.setting-row:active { translate: 0 2px; filter: brightness(.94); }

.modal[data-view="start"] .modal-backdrop,
.modal[data-view="menu"] .modal-backdrop,
.modal[data-view="settings"] .modal-backdrop,
.modal[data-view="help"] .modal-backdrop,
.modal[data-view="route"] .modal-backdrop { background: var(--deep); }

.modal[data-view="menu"] .modal-panel,
.modal[data-view="settings"] .modal-panel,
.modal[data-view="help"] .modal-panel,
.modal[data-view="route"] .modal-panel {
  background-color: var(--deep);
  background-image: var(--world-background-image);
  background-position: center;
  background-size: cover;
}

.modal[data-view="start"] .modal-panel {
  background: var(--deep);
}

.start-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--paper);
  isolation: isolate;
}

.start-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.start-region-hero {
  position: absolute;
  z-index: 1;
  top: 24%;
  left: 50%;
  width: 256px;
  height: 220px;
  translate: -50% 0;
  pointer-events: none;
}
.start-region-hero img { position: absolute; object-fit: contain; }
.start-region-vehicle { right: 16px; bottom: 0; width: 192px; height: 192px; }
.start-region-pet { z-index: 1; top: 8px; left: 80px; width: 96px; height: 96px; filter: drop-shadow(0 5px 3px rgb(49 44 54 / .28)); }

.start-brand {
  position: absolute;
  z-index: 1;
  top: max(36px, calc(var(--safe-top) + 16px));
  left: 50%;
  display: grid;
  place-items: center;
  width: min(358px, calc(100% - 32px));
  height: 76px;
  color: var(--paper);
  text-align: center;
  text-shadow: -2px 0 var(--deep), 0 2px var(--deep), 2px 0 var(--deep), 0 -2px var(--deep), 0 4px 0 rgb(13 28 45 / .72);
  translate: -50% 0;
}

.start-brand h1 { margin: 0; font-size: 32px; line-height: 40px; letter-spacing: 2px; }

.start-actions {
  position: absolute;
  z-index: 2;
  bottom: max(28px, calc(var(--safe-bottom) + 22px));
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 304px;
  translate: -50% 0;
}

.start-button,
.menu-continue {
  --button-normal: url("../assets/runtime/ui-v2/button-primary-focus.png") !important;
  --button-focus: url("../assets/runtime/ui-v2/button-primary-normal.png") !important;
}

.start-button {
  --button-normal: url("../assets/runtime/ui-v8/start-primary-normal.png") !important;
  --button-focus: url("../assets/runtime/ui-v8/start-primary-focus.png") !important;
  --button-pressed: url("../assets/runtime/ui-v8/start-primary-pressed.png") !important;
  --button-disabled: url("../assets/runtime/ui-v8/start-primary-disabled.png") !important;
  display: grid;
  grid-template-columns: 24px auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 280px;
  height: 76px;
  background-size: 280px 76px !important;
  font-size: 17px !important;
  text-shadow: 0 2px rgb(255 255 255 / .38);
}
.start-button img { width: 24px; height: 24px; object-fit: contain; }

.start-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, 96px);
  gap: 8px;
  width: 304px;
  height: 56px;
}

.start-shortcut {
  --button-normal: url("../assets/runtime/ui-v8/start-shortcut-normal.png") !important;
  --button-focus: url("../assets/runtime/ui-v8/start-shortcut-focus.png") !important;
  --button-pressed: url("../assets/runtime/ui-v8/start-shortcut-pressed.png") !important;
  --button-disabled: url("../assets/runtime/ui-v8/start-shortcut-disabled.png") !important;
  display: grid;
  grid-template-columns: 22px auto;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 96px;
  height: 56px;
  padding: 0 7px;
  color: var(--paper);
  background-size: 96px 56px !important;
  font-size: 12px !important;
  line-height: 16px;
  text-shadow: 0 2px var(--deep);
}
.start-shortcut img { width: 22px; height: 22px; object-fit: contain; }

.start-button:hover:not(:disabled),
.start-shortcut:hover:not(:disabled) { background-image: var(--button-focus); }

.start-button:active:not(:disabled),
.start-shortcut:active:not(:disabled) { translate: 0 3px; }

.start-button:active:not(:disabled) img,
.start-shortcut:active:not(:disabled) img { translate: 0 1px; }

.scene-transition {
  position: absolute;
  z-index: 90;
  inset: 0;
  display: grid;
  grid-template-rows: 256px 48px;
  place-content: center;
  place-items: center;
  gap: 16px;
  padding: max(24px, var(--safe-top)) max(16px, var(--safe-right)) max(24px, var(--safe-bottom)) max(16px, var(--safe-left));
  overflow: hidden;
  color: var(--ink);
  background-color: var(--deep);
  background-image: var(--transition-background-image);
  background-position: center;
  background-size: cover;
  cursor: pointer;
  outline: none;
}
.scene-transition-cover { position: relative; width: 256px; height: 256px; overflow: hidden; }
.scene-transition-art {
  position: absolute;
  inset: 0;
  width: 256px;
  height: 256px;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
.scene-transition-vehicle {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 32px;
  width: 192px;
  height: 192px;
  object-fit: contain;
  transform-origin: 50% 78%;
}
.scene-transition-pet {
  position: absolute;
  z-index: 2;
  bottom: 114px;
  left: 88px;
  width: 96px;
  height: 96px;
  object-fit: contain;
  transform-origin: 50% 92%;
}
.scene-transition-trail { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.scene-transition-trail img { position: absolute; width: 32px; height: 32px; object-fit: contain; opacity: 0; }
.scene-transition-trail img:nth-child(1) { left: 32px; bottom: 54px; }
.scene-transition-trail img:nth-child(2) { left: 64px; bottom: 86px; }
.scene-transition-trail img:nth-child(3) { right: 40px; top: 36px; }
.scene-transition-destination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 358px;
  height: 48px;
  padding: 0 18px;
  background: url("../assets/runtime/ui-v3/topbar-calm.png") center / 358px 48px no-repeat;
  font-size: 14px;
  text-align: center;
}
.scene-transition-stamp { width: 32px; height: 32px; object-fit: contain; opacity: 0; }
.scene-transition-destination strong { font-size: 16px; }
.scene-transition-destination span { color: var(--muted); font-weight: 700; }

.main-menu {
  display: grid;
  grid-template-rows: 48px minmax(150px, 1fr) 76px 120px;
  justify-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: max(52px, var(--safe-top)) max(24px, var(--safe-right)) max(34px, var(--safe-bottom)) max(24px, var(--safe-left));
}

.menu-header {
  display: grid;
  place-items: center;
  width: min(358px, 100%);
  height: auto;
  aspect-ratio: 358 / 48;
  background: url("../assets/runtime/ui-v3/topbar-calm.png") center / 100% 100% no-repeat;
  text-align: center;
}

.menu-header h2 { margin: 0; font-size: 22px; line-height: 26px; }

.menu-pet { display: grid; align-self: end; justify-items: center; gap: 5px; min-height: 146px; }
.menu-travel-pair {
  position: relative;
  width: 176px;
  height: 80px;
  background: none;
}
.menu-travel-pair img { position: absolute; object-fit: contain; }
.menu-vehicle { right: 12px; bottom: -16px; width: 128px; height: 128px; opacity: .48; filter: saturate(.84) brightness(.96); }
.menu-cat { z-index: 1; right: 56px; bottom: 40px; width: 64px; height: 64px; }
.menu-pet strong { color: var(--ink); font-size: 15px; line-height: 20px; text-shadow: 0 1px var(--paper); }
.menu-progress { display: flex; align-items: center; gap: 6px; height: 22px; color: var(--ink); }
.menu-progress > span { display: flex; gap: 1px; }
.menu-progress img { width: 18px; height: 18px; opacity: .24; filter: grayscale(1); }
.menu-progress img.earned { opacity: 1; filter: brightness(1.12) saturate(1.2); }
.menu-progress b { font-size: 12px; line-height: 16px; }
.menu-continue {
  --button-normal: url("../assets/runtime/ui-v8/start-primary-normal.png") !important;
  --button-focus: url("../assets/runtime/ui-v8/start-primary-focus.png") !important;
  --button-pressed: url("../assets/runtime/ui-v8/start-primary-pressed.png") !important;
  --button-disabled: url("../assets/runtime/ui-v8/start-primary-disabled.png") !important;
  width: 280px;
  height: 76px;
  background-size: 280px 76px !important;
  font-size: 17px !important;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 96px);
  grid-template-rows: repeat(2, 56px);
  gap: 8px;
  width: 304px;
}

.menu-grid button {
  --button-normal: url("../assets/runtime/ui-v8/start-shortcut-normal.png") !important;
  --button-focus: url("../assets/runtime/ui-v8/start-shortcut-focus.png") !important;
  --button-pressed: url("../assets/runtime/ui-v8/start-shortcut-pressed.png") !important;
  --button-disabled: url("../assets/runtime/ui-v8/start-shortcut-disabled.png") !important;
  display: grid;
  grid-template-columns: 22px auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 96px;
  height: 56px;
  color: var(--paper);
  background-size: 96px 56px !important;
  font-size: 12px;
  text-shadow: 0 2px var(--deep);
}

.menu-icon-slot { display: grid; place-items: center; width: 22px; height: 22px; }
.menu-grid img { width: 22px; height: 22px; object-fit: contain; }

.help-page { grid-template-rows: auto minmax(0, 1fr); }
.help-list { display: grid; align-content: center; justify-items: center; gap: 12px; min-height: 0; }
.help-list > div {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  width: min(358px, 100%);
  height: auto;
  min-height: 44px;
  aspect-ratio: 358 / 64;
  padding: 4px 24px;
  color: var(--ink);
  background: #f7ebd2 url("../assets/runtime/ui-v3/mission-calm.png") center / 358px 64px no-repeat;
  text-align: center;
}
.help-list img { width: 44px; height: 44px; justify-self: center; object-fit: contain; }
.help-list strong { grid-column: 2; font-size: 18px; line-height: 24px; }

.settings-page > .page-header,
.help-page > .page-header {
  width: min(358px, 100%);
  height: auto;
  min-height: 44px;
  aspect-ratio: 358 / 48;
  justify-self: center;
  padding: 0 8px;
  background: url("../assets/runtime/ui-v3/topbar-calm.png") center / 100% 100% no-repeat;
}
.settings-page > .page-header h2,
.help-page > .page-header h2 { color: var(--ink); font-size: 20px; }
.settings-page > .page-header > button,
.help-page > .page-header > button { color: var(--ink) !important; background-image: none !important; }

.route-page {
  grid-template-rows: 48px minmax(0, 1fr);
  justify-items: center;
  padding-right: 0;
  padding-left: 0;
}

.route-header {
  width: 358px;
  height: 48px;
  min-height: 48px;
  padding: 0 8px;
  background: url("../assets/runtime/ui-v3/topbar-calm.png") center / 358px 48px no-repeat;
}
.route-header h2 { color: var(--ink); font-size: 20px; }
.route-header > span { color: var(--muted); font-size: 12px; font-weight: 800; text-align: center; }
.route-header > button { color: var(--ink) !important; background-image: none !important; }

.route-page .route-scroll {
  display: grid;
  place-items: start center;
  width: 358px;
  padding: 2px 0 12px;
  overflow-x: hidden;
}

.route-map {
  position: relative;
  width: 358px;
  height: 640px;
  flex: none;
  overflow: hidden;
  background: url("../assets/runtime/ui-v10/route-map-world.png") center / 358px 640px no-repeat;
  isolation: isolate;
}

.route-region {
  position: absolute;
  z-index: 1;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 18px;
  text-shadow: -1px 0 var(--paper), 0 1px var(--paper), 1px 0 var(--paper), 0 -1px var(--paper), 0 2px 0 rgb(49 44 54 / .24);
  pointer-events: none;
}
.route-region-jiangnan { right: 12px; bottom: 12px; }
.route-region-setouchi { top: 12px; left: 12px; }

.route-map-vehicle {
  position: absolute;
  z-index: 1;
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: .72;
  pointer-events: none;
}
.route-map-vehicle-jiangnan { right: 4px; bottom: 42px; }
.route-map-vehicle-setouchi { top: 34px; left: 2px; }

.route-track { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.route-leg {
  position: absolute;
  top: var(--leg-y);
  left: var(--leg-x);
  width: var(--leg-length);
  height: 32px;
  background: url("../assets/runtime/paw-stamp.png") left center / 32px 32px repeat-x;
  opacity: .38;
  transform: translateY(-50%) rotate(var(--leg-angle));
  transform-origin: 0 50%;
}
.route-leg.completed,
.route-leg.current { background-image: url("../assets/runtime/ui-v4/fx-paw-gold.png"); opacity: .78; }
.route-map.advancing .route-leg.current { background-image: url("../assets/runtime/paw-stamp.png"); opacity: .38; }
.route-leg.advancing-leg::after {
  position: absolute;
  inset: 0;
  background: url("../assets/runtime/ui-v4/fx-paw-gold.png") left center / 32px 32px repeat-x;
  content: "";
  transform-origin: 0 50%;
}

.route-node {
  position: absolute;
  z-index: 3;
  top: var(--node-y);
  left: var(--node-x);
  display: grid;
  grid-template-rows: 64px 18px 18px;
  place-items: center;
  width: 96px;
  min-width: 96px;
  min-height: 100px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent !important;
  text-align: center;
  translate: -50% -50%;
}
.route-node-marker { display: grid; place-items: center; width: 64px; height: 64px; }
.route-node-marker { position: relative; }
.route-node-art { width: 64px; height: 64px; object-fit: contain; }
.route-node-rating {
  position: absolute;
  right: 7px;
  bottom: 5px;
  display: flex;
  gap: 0;
  padding: 1px 2px;
}
.route-node-rating img { width: 11px; height: 11px; object-fit: contain; filter: brightness(1.2) saturate(1.25); }
.route-node-code { color: #8e5720; font-size: 13px; font-weight: 800; line-height: 18px; text-shadow: -1px 0 var(--paper), 0 1px var(--paper), 1px 0 var(--paper), 0 -1px var(--paper); }
.route-node strong {
  max-width: 96px;
  overflow: hidden;
  font-size: 13px;
  line-height: 18px;
  text-overflow: ellipsis;
  text-shadow: -1px 0 var(--paper), 0 1px var(--paper), 1px 0 var(--paper), 0 -1px var(--paper), 0 2px 0 rgb(49 44 54 / .25);
  white-space: nowrap;
}
.route-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.route-node.current { cursor: pointer; }
.route-node.current .route-node-art { filter: drop-shadow(0 0 5px #ffe38c); }
.route-node.current:focus-visible .route-node-art { filter: drop-shadow(0 0 2px var(--paper)) drop-shadow(0 0 7px #ffe38c); }
.route-node.current:active .route-node-art { translate: 0 3px; }
.route-node.locked { opacity: .58; }
.route-node.locked .route-node-code { color: #d0c7bd; }

.route-player {
  position: absolute;
  z-index: 5;
  top: var(--player-y);
  left: var(--player-x);
  width: 64px;
  height: 64px;
  object-fit: contain;
  transform-origin: 50% 92%;
  translate: -50% -100%;
  pointer-events: none;
}

.game-stage[data-region="jiangnan-water-town"] { --deep: #20384b; --sage: #4d927b; --gold: #e7b64b; }
.game-stage[data-region="setouchi-islands"] { --deep: #13283c; --sage: #63a58e; --gold: #e7b64b; }
.game-stage[data-stage-accent="osmanthus"] { --sage: #6f9471; --gold: #e2b241; }
.game-stage[data-stage-accent="dusk"] { --deep: #222d4a; --sage: #766579; --gold: #e7a948; }
.game-stage[data-stage-accent="sea-glass"] { --deep: #17334c; --sage: #5da79a; --gold: #e5bd59; }
.game-stage[data-stage-accent="sunset"] { --deep: #3c3042; --sage: #618a82; --gold: #eea84d; }

.modal[data-view="round-intro"] .modal-panel {
  inset: auto 0 0;
  width: min(calc(100% - 24px), 406px);
  height: min(540px, calc(100dvh - max(16px, var(--safe-top))));
  margin: 0 auto max(10px, var(--safe-bottom));
  background-color: transparent;
  background-image: url("../assets/runtime/ui-v2/result-sheet.png");
  background-size: 100% 100%;
}

.round-intro {
  display: grid;
  grid-template-rows: 46px 128px 60px 58px 60px;
  align-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 42px 24px 22px;
}
.round-intro-header { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; }
.round-intro-header h2 { margin: 0; font-size: 19px; line-height: 24px; text-align: center; }
.round-intro-header button { color: var(--ink) !important; background-image: none !important; }
.round-intro-hero { position: relative; justify-self: center; width: 180px; height: 128px; }
.round-intro-hero img { position: absolute; object-fit: contain; }
.round-intro-vehicle { right: 0; bottom: -12px; width: 142px; height: 142px; }
.round-intro-pet { z-index: 1; right: 52px; bottom: 65px; width: 68px; height: 68px; }
.round-intro-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.round-intro-stats > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  background: url("../assets/runtime/ui-v3/topbar-calm.png") center / 100% 100% no-repeat;
}
.round-intro-stats img { width: 28px; height: 28px; object-fit: contain; }
.round-intro-stats b { font-size: 17px; line-height: 22px; font-variant-numeric: tabular-nums; }
.round-intro-stats small { color: var(--muted); font-size: 11px; font-weight: 700; }
.round-intro-kit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.round-intro-skill {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 52px;
  padding: 4px 8px;
  background: transparent;
}
.round-intro-skill img { width: 32px; height: 32px; object-fit: contain; }
.round-intro-skill strong { overflow: hidden; font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.round-intro-augments { display: flex; gap: 2px; }
.round-intro-augments img { width: 36px; height: 36px; object-fit: contain; }
.round-intro-start { width: 100% !important; min-height: 60px !important; font-size: 17px !important; }

.modal[data-view="confirm"] .modal-panel {
  inset: auto 0 0;
  width: min(calc(100% - 24px), 406px);
  height: 320px;
  margin: 0 auto max(12px, var(--safe-bottom));
  background-color: transparent;
  background-image: url("../assets/runtime/ui-v2/result-sheet.png");
  background-size: 100% 100%;
}
.modal[data-view="goal-reached"] .modal-panel {
  inset: auto 0 0;
  width: min(calc(100% - 24px), 386px);
  height: 376px;
  margin: 0 auto max(12px, var(--safe-bottom));
  background-color: transparent;
  background-image: url("../assets/runtime/ui-v2/result-sheet.png");
  background-size: 100% 100%;
}
.goal-reached-sheet {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 46px 24px 22px;
  text-align: center;
}
.goal-reached-sheet > img { width: 52px; height: 52px; object-fit: contain; }
.goal-reached-sheet h2 { margin: 0; font-size: 23px; line-height: 28px; }
.goal-reached-sheet > strong { color: #9a5c20; font-size: 28px; line-height: 32px; font-variant-numeric: tabular-nums; }
.goal-reached-sheet > strong small { margin-left: 3px; color: var(--muted); font-size: 12px; }
.goal-reached-sheet > p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.goal-reached-rating { display: flex; gap: 5px; height: 30px; }
.goal-reached-rating img { width: 30px; height: 30px; object-fit: contain; opacity: .22; filter: grayscale(1); }
.goal-reached-rating img.active { opacity: 1; filter: brightness(1.14) saturate(1.28); }
.goal-reached-sheet > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.goal-reached-sheet button { width: 100%; min-height: 54px; font-size: 14px; }
.confirm-sheet { display: grid; place-content: center; justify-items: center; gap: 12px; width: 100%; height: 100%; padding: 48px 24px 24px; }
.confirm-sheet > img { width: 48px; height: 48px; object-fit: contain; }
.confirm-sheet h2 { margin: 0; font-size: 22px; line-height: 28px; }
.confirm-sheet > div { display: grid; grid-template-columns: repeat(2, minmax(0, 128px)); gap: 10px; width: 100%; justify-content: center; }
.confirm-sheet button { width: 100%; min-height: 52px; }

.modal[data-view="result"] .modal-panel {
  inset: auto 0 0;
  width: min(calc(100% - 24px), 366px);
  height: auto;
  aspect-ratio: 3 / 4;
  margin: 0 auto max(12px, var(--safe-bottom));
  background-color: transparent;
  background-image: url("../assets/runtime/ui-v9/result-celebration.png");
  background-size: 100% 100%;
}

.result-sheet {
  position: relative;
  display: grid;
  grid-template-rows: repeat(5, auto);
  align-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 38px 24px 20px;
  overflow: hidden;
  text-align: center;
}
.result-hero { position: relative; z-index: 2; display: grid; justify-items: center; gap: 2px; }
.result-hero > img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 5px 3px rgb(49 44 54 / .28)); }
.result-hero h2 { margin: -10px 0 0; font-size: 24px; line-height: 30px; }
.result-confetti { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.result-confetti img { position: absolute; width: 28px; height: 28px; object-fit: contain; }
.result-confetti img:nth-child(1) { top: 46px; left: 54px; }
.result-confetti img:nth-child(2) { top: 72px; right: 48px; }
.result-confetti img:nth-child(3) { top: 132px; left: 74px; }
.result-status { margin: 0; color: var(--muted); font-size: 14px; font-weight: 700; line-height: 20px; }
.result-rating { position: relative; z-index: 2; display: flex; justify-content: center; gap: 8px; height: 40px; }
.result-rating img { width: 38px; height: 38px; object-fit: contain; opacity: .22; filter: grayscale(1); }
.result-rating img.active { opacity: 1; filter: brightness(1.14) saturate(1.28) drop-shadow(0 2px 0 rgb(155 84 47 / .35)); }
.result-summary { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.result-summary span { display: grid; place-content: center; min-height: 54px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 17px; }
.result-summary b { color: var(--ink); font-size: 20px; line-height: 24px; }
.result-actions { position: relative; z-index: 2; display: grid; gap: 8px; }
.result-actions button { width: 100%; min-height: 54px; font-size: 15px; }
.result-actions button.secondary { min-height: 52px; }

.toast {
  position: absolute;
  z-index: 70;
  right: 24px;
  bottom: calc(max(12px, var(--safe-bottom)) + 96px);
  left: 24px;
  display: grid;
  place-items: center;
  min-height: 56px;
  padding: 10px 28px;
  color: var(--paper);
  background-image: url("../assets/runtime/ui-v2/toast.png");
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.modal:not([hidden]) ~ .toast { position: fixed; bottom: max(76px, calc(var(--safe-bottom) + 64px)); max-width: 382px; margin: auto; }

@media (prefers-reduced-motion: no-preference) {
  .world-backdrop-depth-far { animation: world-depth-far 16s steps(8, end) infinite alternate; }
  .world-backdrop-depth-near { animation: world-depth-near 12s steps(6, end) infinite alternate; }
  .world-ambient-vehicle { animation: world-vehicle-pass 18s steps(16, end) infinite; }
  .game-stage.pet-watch .pet-image:not(.hd-pet) { animation: pet-watch 300ms steps(3, end); }
  .game-stage.pet-happy .pet-image:not(.hd-pet) { animation: pet-happy 520ms steps(5, end); }
  .game-stage.pet-sad .pet-image:not(.hd-pet) { animation: pet-sad 500ms steps(4, end); }
  .game-stage.pet-skill .pet-image:not(.hd-pet) { animation: pet-skill 620ms steps(6, end); }
  .game-stage.pet-watch .pet-image.hd-pet { animation: hd-pet-watch 320ms ease-out; }
  .game-stage.pet-happy .pet-image.hd-pet { animation: hd-pet-happy 560ms cubic-bezier(.2, .84, .3, 1); }
  .game-stage.pet-sad .pet-image.hd-pet { animation: hd-pet-sad 520ms ease-out; }
  .game-stage.pet-skill .pet-image.hd-pet { animation: hd-pet-skill 680ms cubic-bezier(.16, .8, .28, 1); }
  .game-stage[data-pet-motion="curious"] .pet-motion-shell { animation: pet-idle-curious 1800ms steps(6, end) infinite; }
  .game-stage[data-pet-motion="bouncy"] .pet-motion-shell { animation: pet-idle-bouncy 1400ms steps(5, end) infinite; }
  .game-stage[data-pet-motion="calm"] .pet-motion-shell { animation: pet-idle-calm 2400ms steps(6, end) infinite; }
  .game-stage[data-pet-motion="eager"] .pet-motion-shell { animation: pet-idle-eager 1100ms steps(6, end) infinite; }
  .pet-portrait[data-motion-profile="curious"] { animation: pet-idle-curious 1800ms steps(6, end) infinite; }
  .pet-portrait[data-motion-profile="bouncy"] { animation: pet-idle-bouncy 1400ms steps(5, end) infinite; }
  .pet-portrait[data-motion-profile="calm"] { animation: pet-idle-calm 2400ms steps(6, end) infinite; }
  .pet-portrait[data-motion-profile="eager"] { animation: pet-idle-eager 1100ms steps(6, end) infinite; }
  .pet-feedback.premium-skin .pet-stage::before { animation: glamour-twinkle 980ms steps(4, end) infinite; }
  .pet-feedback.premium-skin .pet-stage::after { animation: glamour-twinkle 980ms steps(4, end) 490ms infinite; }
  .tile.clearing img { animation: tile-clear 280ms steps(6, end) var(--fx-delay, 0ms) both; }
  .fx-burst { animation: fx-burst 320ms steps(6, end) var(--fx-delay, 0ms) both; }
  .skill-hit-stamp { animation: skill-hit 420ms steps(6, end) both; }
  .skill-tracer { animation: skill-travel 240ms steps(6, end) var(--skill-delay, 0ms) both; }
  .match-board.swapping .tile.swap-moving img { animation: tile-swap 150ms steps(4, end) both; }
  .match-board.swap-return .tile.swap-moving img { animation-duration: 130ms; }
  .tile.dropping img { animation: tile-drop 520ms steps(9, end) var(--drop-delay, 0ms) both; }
  .drop-landing { animation: drop-landing 440ms steps(6, end) var(--landing-delay, 0ms) both; }
  .board-frame.impact { animation: board-impact 600ms steps(7, end); }
  .combo-callout.show { animation: combo-pop 640ms steps(7, end) both; }
  .combo-callout.show[data-tier="3"] { animation-name: combo-pop-strong; }
  .combo-callout.show[data-tier="4"] { animation-name: combo-pop-super; }
  .combo-callout.show[data-tier="3"]::before,
  .combo-callout.show[data-tier="3"]::after,
  .combo-callout.show[data-tier="4"]::before,
  .combo-callout.show[data-tier="4"]::after { animation: combo-paw-flare 640ms steps(6, end) both; }
  .mission-goal.receiving > img { animation: goal-receive 520ms steps(5, end) both; }
  .score-mastery img.earned { animation: mastery-paw-in 620ms steps(6, end) both; }
  .mastery-burst { animation: mastery-burst 620ms steps(7, end) both; }
  .title-slot.receiving b { animation: score-receive 520ms steps(5, end) both; }
  .tutorial-paw { animation: tutorial-swap 1200ms steps(8, end) infinite; }
  .match-board.invalid { animation: board-shake 160ms steps(3, end); }
  .toast { animation: toast-pop 160ms steps(2, end); }
  .modal[data-view="result"] .modal-panel { animation: sheet-enter 220ms steps(4, end); }
  .modal[data-view="goal-reached"] .modal-panel { animation: sheet-enter 220ms steps(4, end); }
  .result-rating img.active { animation: result-paw-in 420ms steps(5, end) both; }
  .result-rating img.active:nth-child(2) { animation-delay: 100ms; }
  .result-rating img.active:nth-child(3) { animation-delay: 200ms; }
  .result-hero .pet-portrait { animation: result-pet-celebrate 720ms cubic-bezier(.2, .8, .25, 1) both; }
  .result-sheet.won .result-confetti img { animation: result-confetti-in 680ms steps(6, end) both; }
  .result-sheet.won .result-confetti img:nth-child(2) { animation-delay: 120ms; }
  .result-sheet.won .result-confetti img:nth-child(3) { animation-delay: 240ms; }
  .modal[data-view="round-intro"] .modal-panel { animation: sheet-enter 220ms steps(4, end); }
  .tile.selected { animation: tile-select 140ms steps(2, end); }
  .tile.skill-center::before { animation: target-pulse 680ms steps(4, end) infinite; }
  .tile.tutorial-target::before { animation: target-pulse 760ms steps(4, end) infinite; }
  .skill-button.ready:not(.targeting) { animation: skill-ready 960ms steps(4, end) infinite; }
  .skill-button.casting .skill-meter img { animation: casting-pip 260ms steps(4, end) infinite alternate; }
  .skill-button.windup > img { animation: skill-windup-icon 150ms steps(3, end) both; }
  .skill-button.trajectory > img { animation: skill-trajectory-icon 240ms steps(4, end) both; }
  .skill-button.impact > img { animation: skill-impact-icon 300ms steps(4, end) both; }
  .modal[data-view="start"] .modal-panel,
  .modal[data-view="menu"] .modal-panel { animation: page-enter 200ms steps(3, end); }
  .start-backdrop { animation: start-backdrop-drift 16s steps(8, end) infinite alternate; }
  .menu-vehicle { animation: vehicle-float 1800ms steps(4, end) infinite; }
  .menu-cat { animation: start-pet-idle 1200ms steps(3, end) infinite; }
  .route-map-vehicle { animation: route-vehicle-float 2200ms steps(2, end) infinite alternate; }
  .route-map-vehicle-setouchi { animation-delay: 1100ms; }
  .scene-transition:not([hidden]) .scene-transition-art { animation: none; }
  .scene-transition:not([hidden]) .scene-transition-vehicle { animation: scene-vehicle-enter var(--scene-duration) steps(6, end) both; }
  .scene-transition:not([hidden]) .scene-transition-pet { animation: scene-pet-enter var(--scene-duration) steps(6, end) both; }
  .scene-transition:not([hidden]) .scene-transition-trail img { animation: scene-trail-in calc(var(--scene-duration) - 160ms) steps(6, end) both; }
  .scene-transition:not([hidden]) .scene-transition-trail img:nth-child(2) { animation-delay: 80ms; }
  .scene-transition:not([hidden]) .scene-transition-trail img:nth-child(3) { animation-delay: 160ms; }
  .scene-transition:not([hidden]) .scene-transition-destination { animation: scene-destination-in var(--scene-duration) steps(6, end) both; }
  .scene-transition:not([hidden]) .scene-transition-stamp { animation: scene-stamp-in 420ms steps(5, end) calc(var(--scene-duration) - 440ms) both; }
  .scene-transition[data-kind="region"] .scene-transition-vehicle { animation-name: scene-vehicle-cross; }
  .route-map:not(.advancing) .route-player { animation: route-player-idle 1200ms steps(3, end) infinite; }
  .route-map.advancing .just-completed .route-node-art { animation: route-stamp-in 280ms steps(3, end) both; }
  .route-map.advancing .advancing-leg::after { animation: route-leg-open 480ms steps(6, end) 240ms both; }
  .route-map.advancing .route-player { animation: route-player-advance 560ms steps(7, end) 240ms both; }
  .route-map.advancing .just-unlocked { animation: route-node-unlock 280ms steps(3, end) 800ms both; }
}

.game-stage.reduce-motion *,
.game-stage.reduce-motion *::before,
.game-stage.reduce-motion *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; }

@keyframes world-depth-far { from { translate: 0; } to { translate: 4px 0; } }
@keyframes world-depth-near { from { translate: 0; } to { translate: -4px 2px; } }
@keyframes world-vehicle-pass {
  0% { opacity: 0; translate: 0; }
  12%, 82% { opacity: .24; }
  100% { opacity: 0; translate: var(--ambient-travel) 0; }
}
@keyframes start-backdrop-drift { from { object-position: 50% 50%; } to { object-position: 50% calc(50% + 4px); } }
@keyframes tile-swap { from { translate: var(--swap-x) var(--swap-y); } to { translate: 0; } }
@keyframes skill-travel {
  0% { opacity: 0; translate: 0; }
  18%, 72% { opacity: 1; }
  100% { opacity: 0; translate: var(--skill-dx) var(--skill-dy); }
}
@keyframes drop-landing {
  0%, 44% { opacity: 0; translate: 0 8px; }
  58% { opacity: .9; translate: 0; }
  100% { opacity: 0; translate: 0 -8px; }
}
@keyframes pet-watch { 0%, 100% { translate: 0; } 50% { translate: 4px 0; } }
@keyframes pet-happy { 0%, 100% { translate: 0; scale: 1; } 35% { translate: 0 -8px; scale: 1.06 .94; } 65% { translate: 0 2px; scale: .96 1.04; } }
@keyframes pet-sad { 0%, 100% { translate: 0; } 45% { translate: 0 4px; scale: 1.05 .92; } }
@keyframes pet-skill { 0%, 100% { translate: 0; rotate: 0deg; } 25% { translate: -4px -4px; rotate: -5deg; } 55% { translate: 6px -8px; rotate: 8deg; } }
@keyframes hd-pet-watch { 0%, 100% { translate: 0; rotate: 0deg; } 55% { translate: 4px -2px; rotate: 2deg; } }
@keyframes hd-pet-happy { 0%, 100% { translate: 0; scale: 1; } 38% { translate: 0 -10px; scale: 1.05 .95; } 70% { translate: 0 2px; scale: .97 1.03; } }
@keyframes hd-pet-sad { 0%, 100% { translate: 0; rotate: 0deg; } 50% { translate: 0 5px; rotate: -2deg; scale: 1.03 .94; } }
@keyframes hd-pet-skill { 0%, 100% { translate: 0; rotate: 0deg; scale: 1; } 28% { translate: -5px -5px; rotate: -4deg; } 58% { translate: 7px -11px; rotate: 7deg; scale: 1.06; } }
@keyframes pet-idle-curious { 0%, 100% { transform: translate(0, 0); } 34% { transform: translate(0, -2px); } 67% { transform: translate(1px, -1px); } }
@keyframes pet-idle-bouncy { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(0, -3px); } 65% { transform: translate(0, 1px); } }
@keyframes pet-idle-calm { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -1px); } }
@keyframes pet-idle-eager { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1px, -2px); } 50% { transform: translate(1px, 0); } 75% { transform: translate(0, -2px); } }
@keyframes tile-clear {
  0% { opacity: 1; scale: 1; filter: brightness(1); }
  24% { opacity: 1; scale: 1.32; filter: brightness(1.9) saturate(1.4); }
  55% { opacity: 1; translate: 0 -3px; scale: .9; }
  100% { opacity: 0; translate: 0 8px; scale: .15; }
}
@keyframes fx-burst {
  0% { opacity: 0; scale: .5; }
  24% { opacity: 1; scale: 1.35; }
  70% { opacity: 1; translate: 0 -5px; scale: 1; }
  100% { opacity: 0; translate: 0 -10px; scale: .65; }
}
@keyframes combo-paw-flare {
  0% { opacity: 0; scale: .35; }
  34%, 70% { opacity: 1; scale: 1.18; }
  100% { opacity: 0; translate: 0 -16px; scale: .8; }
}
@keyframes scene-trail-in {
  0%, 18% { opacity: 0; scale: .45; }
  42%, 72% { opacity: .96; scale: 1.12; }
  100% { opacity: 0; translate: 10px -8px; scale: .82; }
}
@keyframes skill-hit {
  0% { opacity: 0; scale: .5; }
  25% { opacity: 1; scale: 1.35; }
  72% { opacity: 1; scale: 1.08; }
  100% { opacity: .35; scale: 1.5; }
}
@keyframes tile-drop {
  0% { opacity: .35; translate: 0 var(--drop-distance); }
  58% { opacity: 1; translate: 0 6px; scale: 1 .88; filter: brightness(1.12); }
  76% { translate: 0 -5px; scale: .96 1.06; }
  90% { translate: 0 2px; scale: 1.02 .98; }
  100% { opacity: 1; translate: 0; scale: 1; filter: brightness(1); }
}
@keyframes board-impact { 0%, 42%, 100% { translate: 0; } 58% { translate: 0 5px; } 76% { translate: 0 -3px; } 90% { translate: 0 1px; } }
@keyframes combo-pop { 0% { opacity: 0; translate: -50% calc(-50% + 12px); scale: .7; } 26%, 72% { opacity: 1; translate: -50% -50%; scale: 1.08; } 100% { opacity: 0; translate: -50% calc(-50% - 12px); scale: .92; } }
@keyframes combo-pop-strong { 0% { opacity: 0; translate: -50% -35%; scale: .55; } 24%, 68% { opacity: 1; translate: -50% -50%; scale: 1.18; } 100% { opacity: 0; translate: -50% -75%; scale: 1; } }
@keyframes combo-pop-super { 0% { opacity: 0; translate: -50% -25%; scale: .4; } 22% { opacity: 1; translate: -50% -50%; scale: 1.28; } 38% { scale: .98; } 66% { opacity: 1; scale: 1.16; } 100% { opacity: 0; translate: -50% -82%; scale: 1; } }
@keyframes goal-receive { 0%, 100% { scale: 1; filter: brightness(1); } 55% { scale: 1.24; filter: brightness(1.5) saturate(1.25); } }
@keyframes mastery-paw-in { 0% { opacity: .2; scale: .5; } 35% { opacity: 1; scale: 1.65; filter: brightness(1.7) saturate(1.5); } 100% { opacity: 1; scale: 1; } }
@keyframes mastery-burst { 0% { opacity: 0; scale: .3; } 28% { opacity: 1; scale: 1.4; } 72% { opacity: 1; translate: 0 -14px; scale: 1; } 100% { opacity: 0; translate: 0 -28px; scale: .65; } }
@keyframes result-paw-in { 0% { opacity: 0; translate: 0 8px; scale: .4; } 55% { opacity: 1; translate: 0 -3px; scale: 1.25; } 100% { opacity: 1; translate: 0; scale: 1; } }
@keyframes result-pet-celebrate { 0% { opacity: 0; translate: 0 14px; scale: .82; } 58% { opacity: 1; translate: 0 -6px; scale: 1.08; } 100% { opacity: 1; translate: 0; scale: 1; } }
@keyframes result-confetti-in { 0% { opacity: 0; translate: 0 10px; scale: .4; } 38% { opacity: 1; translate: 0 -5px; scale: 1.2; } 100% { opacity: .76; translate: 0; scale: 1; } }
@keyframes score-receive { 0%, 100% { color: var(--ink); scale: 1; } 42% { color: #9a5c20; scale: 1.34; } }
@keyframes glamour-twinkle { 0%, 100% { opacity: .25; scale: .7; } 50% { opacity: 1; scale: 1.15; filter: brightness(1.35); } }
@keyframes tutorial-swap {
  0%, 16% { opacity: 0; translate: 0; }
  24% { opacity: 1; translate: 0; }
  64%, 78% { opacity: 1; translate: var(--hint-dx) var(--hint-dy); }
  100% { opacity: 0; translate: var(--hint-dx) var(--hint-dy); }
}
@keyframes target-pulse { 0%, 100% { opacity: .62; scale: .9; } 50% { opacity: 1; scale: 1.08; } }
@keyframes skill-ready { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.14) drop-shadow(0 0 3px #e7b64b); } }
@keyframes casting-pip { from { translate: 0; scale: 1; } to { translate: 0 -2px; scale: .7; } }
@keyframes skill-windup-icon { from { translate: 0; } to { translate: -4px 2px; } }
@keyframes skill-trajectory-icon { from { translate: -4px 2px; } to { translate: 4px -4px; } }
@keyframes skill-impact-icon { 0%, 100% { translate: 0; } 45% { translate: 0 -6px; } }
@keyframes board-shake { 0%, 100% { translate: 0; } 25% { translate: -2px 0; } 75% { translate: 2px 0; } }
@keyframes toast-pop { from { translate: 0 6px; } to { translate: 0; } }
@keyframes sheet-enter { from { translate: 0 40px; } to { translate: 0; } }
@keyframes tile-select { from { scale: .9; filter: brightness(1.35); } to { scale: 1; } }
@keyframes page-enter { from { opacity: .7; translate: 0 10px; } to { opacity: 1; translate: 0; } }
@keyframes start-pet-idle { 0%, 100% { translate: 0; } 50% { translate: 0 -4px; } }
@keyframes vehicle-float { 0%, 100% { translate: 0; } 50% { translate: 0 -2px; } }
@keyframes route-vehicle-float { from { translate: 0; } to { translate: 0 -2px; } }
@keyframes scene-cover-enter { from { opacity: .72; translate: 0 8px; } to { opacity: 1; translate: 0; } }
@keyframes scene-vehicle-enter { from { translate: -20px 4px; } to { translate: 0; } }
@keyframes scene-vehicle-cross { from { translate: -96px 4px; } to { translate: 0; } }
@keyframes scene-pet-enter { from { translate: -12px 0; } to { translate: 0; } }
@keyframes scene-destination-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0; } }
@keyframes scene-stamp-in { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0; } }
@keyframes route-player-idle { 0%, 100% { translate: -50% -100%; } 50% { translate: -50% calc(-100% - 4px); } }
@keyframes route-stamp-in {
  from { opacity: 0; scale: 1.8; }
  to { opacity: 1; scale: 1; }
}
@keyframes route-leg-open { from { scale: 0 1; } to { scale: 1; } }
@keyframes route-player-advance {
  from { translate: calc(-50% + var(--player-from-x) - var(--player-x)) calc(-100% + var(--player-from-y) - var(--player-y)); }
  to { translate: -50% -100%; }
}
@keyframes route-node-unlock {
  from { opacity: .28; scale: .7; filter: grayscale(1); }
  to { opacity: 1; scale: 1; filter: none; }
}

@media (max-width: 375px) and (orientation: portrait) {
  :root { --cell: 44px; }
  .game-stage {
    grid-template-rows: 48px 60px 358px 72px 56px 60px;
    gap: clamp(4px, calc((100dvh - max(12px, var(--safe-top)) - max(12px, var(--safe-bottom)) - 654px) / 5), 12px);
    padding-right: 1px;
    padding-left: 1px;
  }
  .top-bar { grid-template-columns: 68px minmax(0, 1fr) 68px; }
  .top-action { width: 60px; }
  .title-slot strong { font-size: 16px; }
  .mission-card { height: 60px; }
  .mission-goal { grid-template-columns: 48px minmax(0, 1fr); gap: 3px; }
  .mission-goal > img { width: 32px; height: 32px; }
  .goal-finish-button { width: 48px; height: 48px; }
  .mission-goal strong { font-size: 12px; }
  .board-frame { width: 358px; height: 358px; }
  .pet-feedback { grid-template-columns: 160px minmax(0, 1fr); width: 340px; height: 72px; }
  .pet-feedback:not(.has-message) { width: 176px; }
  .pet-stage { width: 176px; height: 72px; }
  .pet-image { width: 108px; height: 108px; }
  .pet-bubble { height: 40px; }
  .skill-button { grid-template-columns: 48px minmax(0, 1fr) 64px; height: 56px; padding: 4px 12px; }
  .bottom-dock { height: 60px; padding: 6px 4px; }
  .dock-button { width: 96px; height: 48px; }
  .catalog-card { grid-template-columns: 80px minmax(0, 1fr) 92px; }
  .catalog-card > button { width: 88px; }
  .hex-card { grid-template-columns: 60px minmax(0, 1fr) 52px; padding: 14px 12px; }
}

@media (orientation: portrait) and (min-height: 720px) and (max-height: 760px) {
  :root { --cell: 44px; }
  .game-stage {
    grid-template-rows: 46px 58px 358px 68px 54px 58px;
    gap: 5px;
    padding-top: max(8px, var(--safe-top));
    padding-bottom: max(8px, var(--safe-bottom));
  }
  .top-bar { height: 46px; }
  .top-action { height: 44px; }
  .mission-card { height: 58px; }
  .board-frame { width: 358px; height: 358px; }
  .pet-feedback { grid-template-columns: 156px minmax(0, 1fr); width: 332px; height: 68px; }
  .pet-feedback:not(.has-message) { width: 176px; }
  .pet-stage { width: 176px; height: 68px; }
  .pet-image { width: 104px; height: 104px; }
  .pet-bubble { height: 40px; }
  .skill-button { height: 54px; }
  .bottom-dock { height: 58px; padding: 5px 8px; }
  .dock-button { height: 48px; }
}

@media (orientation: landscape) and (min-width: 700px) and (max-height: 760px) {
  :root { --cell: 44px; }
  .stage-wrap { width: 100%; max-width: none; height: 100dvh; max-height: none; }
  .game-stage {
    grid-template-areas:
      "board header"
      "board mission"
      "board pet"
      "board skill"
      "board nav";
    grid-template-columns: 358px 358px;
    grid-template-rows: 48px 64px 88px 60px 64px;
    gap: 8px 12px;
    align-content: center;
    justify-content: center;
    padding: calc(max(10px, var(--safe-top)) + min(1px, var(--safe-bottom))) max(12px, var(--safe-right)) max(10px, var(--safe-bottom)) max(12px, var(--safe-left));
    --ambient-travel: -1024px;
  }
  .world-backdrop-base,
  .world-backdrop-depth {
    background-image: var(--world-background-landscape-image);
    background-position: center 46%;
  }
  .world-backdrop-depth { animation: none; }
  .world-ambient-vehicle { top: 14%; right: -32px; }
  .top-bar { grid-area: header; }
  .mission-card { grid-area: mission; height: 64px; }
  .board-frame { grid-area: board; }
  .pet-feedback { grid-area: pet; }
  .skill-button { grid-area: skill; height: 60px; }
  .bottom-dock { grid-area: nav; height: 64px; margin: 0; padding: 6px 8px; }
  .dock-button { width: min(112px, 92%); height: 48px; }
  .modal-panel { width: 100%; max-width: none; max-height: none; }
  .modal[data-view="start"] .modal-panel { width: 100%; }
  .full-page { padding: max(24px, var(--safe-top)) max(24px, var(--safe-right)) max(12px, var(--safe-bottom)) max(24px, var(--safe-left)); }
  .page-scroll { width: min(680px, 100%); justify-self: center; }
  .page-footer { width: min(680px, 100%); justify-self: center; }
  .modal[data-view="augment-choice"] .hex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modal[data-view="augment-choice"] .hex-card { grid-template-columns: 56px minmax(0, 1fr); min-height: 132px; padding: 12px; }
  .modal[data-view="augment-choice"] .hex-rarity { grid-column: 1 / -1; }
  .modal[data-view="result"] .modal-panel { width: min(278px, calc(100% - 24px)); height: auto; aspect-ratio: 3 / 4; margin-bottom: 10px; }
  .result-sheet { grid-template-rows: repeat(5, auto); gap: 4px; padding: 24px 18px 14px; }
  .result-hero > img { width: 76px; height: 76px; }
  .result-hero h2 { margin-top: -8px; font-size: 18px; line-height: 22px; }
  .result-status { font-size: 11px; line-height: 16px; }
  .result-rating { height: 28px; gap: 4px; }
  .result-rating img { width: 28px; height: 28px; }
  .result-summary span { min-height: 42px; font-size: 11px; line-height: 14px; }
  .result-summary b { font-size: 16px; line-height: 20px; }
  .result-actions { grid-template-columns: 1fr 1fr; }
  .result-actions button,
  .result-actions button.secondary { min-height: 46px; font-size: 13px; }
  .result-confetti img { width: 20px; height: 20px; }
  .modal[data-view="round-intro"] .modal-panel { inset: 0; width: min(560px, calc(100% - 24px)); height: calc(100dvh - 20px); margin: auto; }
  .round-intro { grid-template-columns: 168px 1fr; grid-template-rows: 46px 64px 58px 60px; gap: 6px 18px; padding: 24px 34px 20px; }
  .round-intro-header { grid-column: 1 / -1; }
  .round-intro-hero { grid-row: 2 / -1; align-self: center; width: 168px; }
  .round-intro-stats { grid-column: 2; grid-row: 2; }
  .round-intro-kit { grid-column: 2; grid-row: 3; }
  .round-intro-start { grid-column: 2; grid-row: 4; }
  .start-backdrop { object-position: center; }
  .start-brand {
    top: max(28px, calc(var(--safe-top) + 12px));
    left: max(60px, calc(var(--safe-left) + 16px));
    width: 280px;
    height: 76px;
    translate: 0;
  }
  .start-brand h1 { font-size: 28px; line-height: 36px; }
  .start-actions {
    top: 50%;
    right: max(60px, calc(var(--safe-right) + 16px));
    bottom: auto;
    left: auto;
    translate: 0 -50%;
  }
  .start-region-hero { top: 50%; left: 38%; translate: -50% -50%; }
  .scene-transition {
    grid-template-rows: 256px;
    grid-template-columns: 256px 358px;
    gap: 16px;
    background-image: var(--transition-background-landscape-image);
  }
  .modal[data-view="menu"] .modal-panel,
  .modal[data-view="settings"] .modal-panel,
  .modal[data-view="help"] .modal-panel,
  .modal[data-view="route"] .modal-panel { background-image: var(--world-background-landscape-image); }
  .main-menu {
    grid-template-areas:
      "header header"
      "pet continue"
      "pet actions";
    grid-template-columns: 240px 304px;
    grid-template-rows: 48px 76px 120px;
    align-content: center;
    gap: 10px 28px;
    padding: max(18px, var(--safe-top)) max(72px, var(--safe-right)) max(18px, var(--safe-bottom)) max(72px, var(--safe-left));
  }
  .menu-header { grid-area: header; }
  .menu-pet { grid-area: pet; align-self: center; }
  .menu-continue { grid-area: continue; align-self: end; width: 280px; }
  .menu-grid { grid-area: actions; align-self: start; width: 304px; }
}

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