/* VS2 area — Gate Select, Hunt Loadout, Hunt field HUD, Hunt result, Shop,
 * Database and Cage edit. 2026-09-29 redesign on ui/tokens.css.
 *
 * One scaffold for the list screens (header, scrolling body, footer with Back
 * on the left and the screen's one action on the right) and one continuous
 * field for the Hunt, with small HUD islands over the Pixi world. The Shop
 * keeps its video-observed arrangement (detail over a card shelf) and the
 * Cage board keeps its measured 508x102 native geometry; only the dressing
 * changed. Original-created CSS only: no ROM or decoded pixels are drawn here.
 */

.cm-vs2-root {
  /* Names kept for the presentation contract; values are the new tokens. */
  --vs2-ink: var(--c-text-1);
  --vs2-muted: var(--c-text-2);
  --vs2-dim: var(--c-text-3);
  --vs2-gold: var(--c-gold);
  --vs2-gold-bright: var(--c-gold-strong);
  --vs2-cyan: var(--c-accent);
  --vs2-line: var(--c-line-1);
  --vs2-safe-top: max(10px, env(safe-area-inset-top));
  --vs2-safe-bottom: max(10px, env(safe-area-inset-bottom));
  --vs2-font: var(--font-ui);

  position: fixed;
  inset: 0;
  overflow: hidden;
  color: var(--vs2-ink);
  font-family: var(--vs2-font);
}
.cm-vs2-root *,
.cm-vs2-root *::before,
.cm-vs2-root *::after { box-sizing: border-box; }

/* ---- Scaffold ------------------------------------------------------------ */
.cm-vs2-shell,
.cm-vs2-field {
  position: relative;
  width: min(100%, 560px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  animation: cm-vs2-screen-in var(--dur-slow) var(--ease-out) both;
}
.cm-vs2-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
@keyframes cm-vs2-screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.cm-vs2-header {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
}
.cm-vs2-header__copy { min-width: 0; }
.cm-vs2-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-accent);
  font-size: var(--fs-label);
  font-weight: var(--fw-strong);
  letter-spacing: 0.08em;
  line-height: var(--lh-label);
}
.cm-vs2-kicker::before { content: ""; width: 9px; height: 9px; background: var(--motif-stair) no-repeat; }
.cm-vs2-title { margin: 2px 0 0; font-size: var(--fs-title-1); line-height: var(--lh-title-1); font-weight: var(--fw-heavy); }
.cm-vs2-subtitle { margin: 4px 0 0; color: var(--c-text-2); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }

/* The header's right-hand readout: a count, the wallet, the cage rank. */
.cm-vs2-signal,
.cm-vs2-shop__wallet,
.cm-vs2-cage-rank {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-tag);
  background: var(--c-surface-1);
  color: var(--c-text-1);
  font-size: var(--fs-label);
  font-weight: var(--fw-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cm-vs2-shop .cm-vs2-shop__wallet { color: var(--c-gold-strong); }
.cm-vs2-shop .cm-vs2-shop__wallet::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--c-coin-light) 0 22%, var(--c-gold) 45%, var(--c-coin-shade) 100%);
}

.cm-vs2-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 0;
  padding: var(--sp-1) var(--sp-4) var(--sp-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cm-vs2-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--vs2-safe-bottom);
  border-top: 1px solid var(--c-line-1);
  background: var(--c-surface-bar);
  -webkit-backdrop-filter: var(--backdrop-glass);
  backdrop-filter: var(--backdrop-glass);
}
.cm-vs2-footer > :only-child { grid-column: 1 / -1; justify-self: start; }

.cm-vs2-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control);
  padding: 0 var(--sp-5);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-control);
  background: var(--c-surface-2);
  color: var(--c-text-1);
  font: var(--fw-strong) var(--fs-body)/1.2 var(--font-ui);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cm-vs2-action--primary { border-color: transparent; background: var(--btn-primary-bg); box-shadow: var(--btn-primary-edge); color: var(--c-text-on-accent); }
.cm-vs2-footer > .cm-vs2-action:not(.cm-vs2-action--primary):first-child::before { content: ""; flex: 0 0 auto; width: 8px; height: 14px; margin-right: 2px; background: currentColor; -webkit-mask: var(--icon-chevron-left) center / contain no-repeat; mask: var(--icon-chevron-left) center / contain no-repeat; }
@media (hover: hover) {
  .cm-vs2-action:hover:not(:disabled) { border-color: var(--c-line-3); background: var(--c-surface-3); }
  .cm-vs2-action--primary:hover:not(:disabled) { background: var(--btn-primary-bg); filter: var(--btn-primary-hover); }
}
.cm-vs2-action:not(:disabled):active { transform: translateY(1px); }
.cm-vs2-action:disabled { border-color: var(--c-line-1); background: var(--c-surface-1); box-shadow: none; color: var(--c-text-disabled); cursor: default; }

.cm-vs2-status {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-control);
  background: var(--c-warning-soft);
  color: var(--c-warning);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}
.cm-vs2-status[hidden] { display: none; }
.cm-vs2-evidence {
  margin: 0;
  padding: 8px 10px;
  border-left: 2px solid var(--c-accent);
  border-radius: 0 var(--r-tag) var(--r-tag) 0;
  background: var(--c-accent-soft);
  color: var(--c-text-2);
  font: 12px/1.45 ui-monospace, "Cascadia Mono", monospace;
}

/* ---- Gate Select ---------------------------------------------------------- */
.cm-vs2-body--gate { gap: var(--sp-3); overflow-y: auto; overflow-x: hidden; }
/* The status belongs to the selected destination, not a second banner. */
/* Reserve one title line whether admission is open or locked. Both labels
   may ellipsize visually; their full localized text remains in title/aria. */
.cm-vs2-preview__heading { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; min-width: 0; height: 24px; overflow: hidden; }
.cm-vs2-preview__heading .cm-vs2-preview__name { flex: 1 1 0; min-width: 0; }
.cm-vs2-preview__heading .cm-vs2-gate-admission { flex: 0 1 auto; min-width: 0; max-width: 58%; margin: 0; padding: 1px 4px; border-radius: var(--r-tag); font-size: var(--fs-label); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-vs2-preview__heading .cm-vs2-gate-admission[hidden] { display: none; }
.cm-vs2-body--gate .cm-vs2-preview { padding: 8px 10px; gap: 4px 10px; }
.cm-vs2-body--gate .cm-vs2-preview__image { width: 56px; height: 56px; }
.cm-vs2-body--gate .cm-vs2-preview__name { font-size: var(--fs-body); line-height: 1.35; }
.cm-vs2-body--gate .cm-vs2-preview__costs { font-size: var(--fs-label); }
.cm-vs2-preview,
.cm-vs2-destination {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  background: var(--c-surface-1);
}
.cm-vs2-preview__image {
  grid-row: 1 / 3;
  width: 72px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--r-control);
  image-rendering: pixelated;
}
.cm-vs2-preview__image[hidden] { display: none; }
.cm-vs2-preview__copy { min-width: 0; }
.cm-vs2-preview__name,
.cm-vs2-destination__name { display: block; overflow: hidden; font-size: var(--fs-title-2); line-height: var(--lh-title-2); font-weight: var(--fw-heavy); text-overflow: ellipsis; white-space: nowrap; }
.cm-vs2-preview__id { display: block; margin-top: 2px; color: var(--c-text-3); font-size: var(--fs-label); letter-spacing: 0.04em; }
.cm-vs2-preview__state { color: var(--c-accent); font-size: var(--fs-label); font-weight: var(--fw-strong); }
.cm-vs2-preview__costs { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--sp-3); margin: 0; color: var(--c-text-2); font-size: var(--fs-body-sm); }
.cm-vs2-preview__costs dd { margin: 0; color: var(--c-gold-strong); font-weight: var(--fw-strong); text-align: right; font-variant-numeric: tabular-nums; }
.cm-vs2-preview:has(.cm-vs2-preview__image[hidden]) :is(.cm-vs2-preview__copy, .cm-vs2-preview__costs) { grid-column: 1 / -1; }
.cm-vs2-destination { grid-template-columns: minmax(0, 1fr); }
.cm-vs2-destination__fee { color: var(--c-text-2); font-size: var(--fs-body-sm); font-variant-numeric: tabular-nums; }

.cm-vs2-gate3d {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  background: radial-gradient(60% 50% at 50% 50%, var(--c-stage-glow), var(--c-ground) 80%);
}
.cm-vs2-gate3d[data-view="fallback"] { flex: 0 0 auto; min-height: 0; }
.cm-vs2-gate3d__bar {
  position: relative;
  z-index: 5;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 2px 4px 2px var(--sp-3);
  border-bottom: 1px solid var(--c-line-1);
}
.cm-vs2-gate3d__bar-title { display: inline; font-size: var(--fs-label); }
.cm-vs2-gate3d__bar-copy > .cm-vs2-kicker { display: none; }
.cm-vs2-gate3d__bar-copy { min-width: 0; overflow-wrap: anywhere; }
.cm-vs2-gate3d__toggle { min-width: 104px; min-height: var(--target); padding: 0 var(--sp-3); font-size: var(--fs-body-sm); }
.cm-vs2-gate3d__host { position: relative; flex: 1 1 0; min-height: 168px; overflow: hidden; isolation: isolate; }
.cm-vs2-gate3d__host[hidden] { display: none; }
.cm-vs2-gate3d__canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.cm-vs2-gate3d__canvas:active { cursor: grabbing; }
.cm-vs2-gate3d__nodes { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.cm-vs2-gate3d__node-hit {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-text-1);
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
.cm-vs2-gate3d__node-hit[hidden] { display: none; }
.cm-vs2-gate3d__node-index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--c-line-3);
  border-radius: var(--r-tag);
  background: color-mix(in srgb, var(--c-ground) 85%, transparent);
  color: var(--c-text-1);
  font-size: 11px;
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums;
}
.cm-vs2-gate3d__node-hit[data-availability="LOCKED"] .cm-vs2-gate3d__node-index { color: var(--c-text-disabled); border-color: var(--c-line-1); }
.cm-vs2-gate3d__node-name {
  position: absolute;
  top: 38px;
  left: calc(50% + var(--gate-label-offset, 0px));
  max-width: 120px;
  padding: 3px 8px;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: var(--r-tag);
  background: color-mix(in srgb, var(--c-ground) 90%, transparent);
  color: var(--c-text-1);
  font-size: var(--fs-label);
  font-weight: var(--fw-strong);
  opacity: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cm-vs2-gate3d__node-hit[data-selected="true"] .cm-vs2-gate3d__node-index {
  border-color: transparent;
  background: var(--c-accent);
  color: var(--c-text-on-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 18%, transparent), 0 0 18px color-mix(in srgb, var(--c-accent) 50%, transparent);
}
.cm-vs2-gate3d__node-hit[data-selected="true"] .cm-vs2-gate3d__node-name,
.cm-vs2-gate3d__node-hit:focus-visible .cm-vs2-gate3d__node-name { opacity: 1; }
.cm-vs2-gate3d__node-hit[data-label-above="true"] .cm-vs2-gate3d__node-name { top: auto; bottom: 38px; }
.cm-vs2-gate3d__hint {
  position: absolute;
  z-index: 3;
  left: 8px;
  bottom: 8px;
  max-width: min(46%, 150px);
  margin: 0;
  padding: 4px 6px;
  border-radius: var(--r-tag);
  background: color-mix(in srgb, var(--c-ground) 65%, transparent);
  color: var(--c-text-2);
  font-size: var(--fs-label);
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.cm-vs2-gate3d__hint[hidden] { display: none; }

.cm-vs2-gate-fallback { flex: 0 0 auto; min-height: 0; overflow: visible; }
.cm-vs2-gate-fallback[hidden] { display: none; }
.cm-vs2-gate-fallback__heading { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin: 2px 0 var(--sp-2); }
.cm-vs2-gates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; align-content: start; }
.cm-vs2-gate {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(2.4em, auto);
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 72px;
  padding: 8px 4px;
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-control);
  background: var(--c-surface-1);
  color: var(--c-text-1);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.cm-vs2-gate__aperture { display: none; }
.cm-vs2-gate__ordinal { color: var(--c-text-3); font-size: var(--fs-label); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.cm-vs2-gate__name { max-width: 100%; overflow: hidden; font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
/* Not open yet: a lock and a dimmer card, never colour alone. */
.cm-vs2-gate[data-availability="LOCKED"] { background: transparent; color: var(--c-text-disabled); }
.cm-vs2-gate[data-availability="LOCKED"] .cm-vs2-gate__ordinal::after { content: " 🔒"; font-size: 9px; filter: grayscale(1); }
.cm-vs2-gate[data-selected="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-text-1); box-shadow: var(--glow-accent); }
.cm-vs2-gate[data-selected="true"] .cm-vs2-gate__ordinal { color: var(--c-accent-strong); }

/* ---- Hunt Loadout --------------------------------------------------------- */
.cm-vs2-loadout { display: flex; flex-direction: column; gap: var(--sp-4); }
.cm-vs2-loadout__row { display: grid; gap: var(--sp-2); min-width: 0; }
.cm-vs2-loadout__label { display: inline-flex; align-items: center; gap: 8px; color: var(--c-text-2); font-size: var(--fs-body-sm); font-weight: var(--fw-strong); }
.cm-vs2-loadout__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); min-width: 0; }
.cm-vs2-loadout__option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon name" "icon detail";
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-control);
  background: var(--c-surface-1);
  color: var(--c-text-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.cm-vs2-loadout__option:not([data-has-art="true"]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "detail"; }
.cm-vs2-loadout__icon { grid-area: icon; width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
/* Plug-in names run long (世代／種族／屬性分析): two lines, never cut. */
.cm-vs2-loadout__name { grid-area: name; min-width: 0; font-size: var(--fs-body-sm); font-weight: var(--fw-strong); line-height: 1.3; overflow-wrap: anywhere; }
.cm-vs2-loadout__detail { grid-area: detail; color: var(--c-text-3); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.cm-vs2-loadout__option[data-selected="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); box-shadow: var(--glow-accent); }
.cm-vs2-loadout__empty { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-text-3); font-size: var(--fs-body-sm); }

/* ---- Hunt field: one continuous world, small HUD islands over it ----------- */
.cm-vs2-root--field .cm-vs2-field,
.cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-field { display: block; width: 100%; background: var(--c-scene-backdrop); }
.cm-vs2-field__viewport { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.cm-vs2-field__corner { display: none; }
.cm-vs2-field__canvas,
.cm-vs2-field__canvas canvas { display: block; width: 100%; height: 100%; }
.cm-vs2-field__canvas { min-height: 100%; overflow: hidden; touch-action: none; }
.cm-hunt-feedback-fallback-notice {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  margin: 0;
  padding: 6px 14px;
  border-radius: var(--r-control);
  background: color-mix(in srgb, var(--c-ground) 92%, transparent);
  border: 1px solid var(--c-line-2);
  color: var(--c-text-2);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  max-width: 90%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.cm-hunt-feedback-retry-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  min-height: 28px;
  border-radius: var(--r-control);
  background: var(--c-accent);
  color: #fff;
  border: 1px solid transparent;
  font-size: var(--fs-label);
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
.cm-hunt-feedback-retry-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cm-vs2-hud {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 10px 12px 0;
  pointer-events: none;
}
.cm-vs2-hud__signal { display: none; }
.cm-vs2-hud__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  background: var(--c-surface-hud);
}
.cm-vs2-hud__gate { display: block; overflow: hidden; font-size: var(--fs-body); font-weight: var(--fw-heavy); text-overflow: ellipsis; white-space: nowrap; }
.cm-vs2-hud__companion { display: block; color: var(--c-accent-strong); font-size: var(--fs-label); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.cm-vs2-hud__exit { pointer-events: auto; min-height: var(--target); padding: 0 var(--sp-4); background: var(--c-surface-glass); }

.cm-hunt-info { position: absolute; top: 74px; left: 12px; right: 12px; z-index: 5; display: grid; justify-items: start; gap: 8px; pointer-events: none; }
.cm-vs2-target {
  width: min(260px, 100%);
  padding: 8px 12px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  background: var(--c-surface-hud);
}
.cm-vs2-target[data-selected="true"] { border-color: var(--c-accent-line); }
.cm-vs2-target__name { display: block; color: var(--c-text-2); font-size: var(--fs-body-sm); font-weight: var(--fw-strong); }
.cm-vs2-target[data-selected="true"] .cm-vs2-target__name { color: var(--c-text-1); font-size: var(--fs-body); }
.cm-vs2-target__stats { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 3px 8px; margin: 6px 0 0; color: var(--c-text-3); font-size: var(--fs-label); }
.cm-vs2-target__stats dd { margin: 0; color: var(--c-text-1); font-weight: var(--fw-strong); text-align: right; font-variant-numeric: tabular-nums; }
.cm-vs2-target:not([data-selected="true"]) .cm-vs2-target__stats { display: none; }
.cm-hunt-plugin-hud { display: grid; gap: 6px; }
.cm-hunt-memory {
  padding: 5px 9px;
  border-radius: var(--r-tag);
  background: var(--c-surface-glass);
  color: var(--c-text-1);
  font-size: var(--fs-label);
  font-weight: var(--fw-strong);
  font-variant-numeric: tabular-nums;
}
.cm-hunt-radar {
  position: relative;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-control);
  background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 10%, transparent) 0 30%, transparent 31%), var(--c-surface-glass);
}
.cm-hunt-radar i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent-strong); transform: translate(-50%, -50%); box-shadow: 0 0 6px var(--c-accent); }

.cm-vs2-field__hint {
  position: absolute;
  left: 50%;
  bottom: calc(88px + max(0px, env(safe-area-inset-bottom)));
  z-index: 5;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 6px 12px;
  transform: translateX(-50%);
  border-radius: var(--r-control);
  background: var(--c-surface-glass);
  color: var(--c-text-2);
  font-size: var(--fs-label);
  text-align: center;
  pointer-events: none;
}

/* The hunt tools: one row of icon buttons, the chosen one lit. */
.cm-hunt-tools {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 6;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.cm-hunt-tools .cm-vs2-action {
  position: relative;
  flex: 0 1 72px;
  display: grid;
  place-items: end center;
  min-width: 56px;
  min-height: 64px;
  padding: 7px 4px 6px;
  grid-template-rows: 34px auto;
  row-gap: 4px;
  border-color: var(--c-line-2);
  background: var(--c-surface-hud);
  font-size: var(--fs-caption);
  touch-action: manipulation;
}
.cm-hunt-tools .cm-vs2-action .cm-hunt-tools__icon {
  position: relative;
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
}
.cm-hunt-tools__icon[hidden] { display: none; }
.cm-hunt-tools__label { position: relative; z-index: 1; }
/* Tactical dock parts (2026-10-28): outside the arcade skin the belt has no box
 * and the corner tags stay hidden, so the row reads exactly as before. */
.cm-hunt-dock__belt { display: contents; }
.cm-hunt-dock__tag { display: none; }
/* Drag-to-deploy: a ground ring where the item will land (squashed to sit on
 * the field) and the lifted item just above the finger. Never hit-testable. */
.cm-hunt-deploy-ring {
  position: absolute; left: 0; top: 0; z-index: 7; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border: 3px solid #3ddc84; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(61, 220, 132, 0.34) 0 22%, rgba(61, 220, 132, 0.1) 48%, transparent 70%);
  box-shadow: 0 0 0 2px rgba(10, 40, 24, 0.55), 0 0 22px rgba(61, 220, 132, 0.75), inset 0 0 14px rgba(61, 220, 132, 0.6);
  transform: translate(var(--x, -200px), var(--y, -200px)) scaleY(0.55);
  animation: cm-deploy-ring 900ms ease-in-out infinite;
}
.cm-hunt-deploy-ring[data-valid="false"] {
  border-color: #ff4d5e; animation: none;
  background: radial-gradient(circle, rgba(255, 77, 94, 0.22) 0 30%, transparent 70%);
  box-shadow: 0 0 0 2px rgba(40, 10, 16, 0.55), 0 0 16px rgba(255, 77, 94, 0.6);
}
.cm-hunt-deploy-ghost {
  position: absolute; left: 0; top: 0; z-index: 9; display: grid; place-items: center; width: 54px; height: 54px; margin: -82px 0 0 -27px;
  border: 2px solid #ffd166; border-radius: 16px; pointer-events: none;
  background: linear-gradient(180deg, rgba(64, 50, 132, 0.86), rgba(24, 18, 58, 0.9));
  box-shadow: 0 10px 22px rgba(8, 6, 26, 0.5), 0 0 18px rgba(255, 209, 102, 0.45);
  color: #fff8e7; font-size: 13px; font-weight: 900;
  transform: translate(var(--x, -200px), var(--y, -200px)) rotate(-6deg);
}
.cm-hunt-deploy-ghost[data-valid="false"] { border-color: #ff4d5e; filter: saturate(0.6); }
.cm-hunt-deploy-ghost img { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
@keyframes cm-deploy-ring { 50% { box-shadow: 0 0 0 2px rgba(10, 40, 24, 0.55), 0 0 30px rgba(61, 220, 132, 0.95), inset 0 0 20px rgba(61, 220, 132, 0.8); } }
:root[data-motion="reduced"] .cm-hunt-deploy-ring { animation: none; }
.cm-hunt-tools .cm-vs2-action[aria-pressed="true"] { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 18%, transparent); color: var(--c-accent-strong); box-shadow: var(--glow-accent); }
.cm-hunt-tools .cm-vs2-action:disabled { opacity: 0.5; }

/* Developer evidence rail (developer mode only). */
.cm-vs2-toolbar { position: absolute; left: 12px; right: 12px; bottom: 90px; z-index: 6; padding: 6px; border: 1px solid var(--c-line-2); border-radius: var(--r-card); background: var(--c-surface-glass); }
.cm-vs2-toolbar__heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.cm-vs2-toolbar__evidence { color: var(--c-text-3); font-size: var(--fs-caption); }
.cm-vs2-toolbar__rail { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.cm-vs2-slot { display: grid; place-items: center; gap: 2px; min-height: 40px; border: 1px solid var(--c-line-1); border-radius: var(--r-tag); color: var(--c-text-3); background: var(--c-surface-1); }
.cm-vs2-slot__cell { width: 16px; height: 16px; border: 1px solid var(--c-line-2); border-radius: 50%; }
.cm-vs2-slot__raw { font: 10px/1 ui-monospace, monospace; }

/* Loading: sentence, bar (percent or moving) and a note when slow. */
.cm-vs2-field__loading {
  position: absolute;
  z-index: 7;
  top: 45%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(300px, calc(100% - 48px));
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  transform: translate(-50%, -50%);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  background: var(--c-surface-hud);
  box-shadow: var(--shadow-float);
  color: var(--c-text-1);
  text-align: center;
  pointer-events: none;
}
.cm-vs2-field__loading-text { margin: 0; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.cm-vs2-field__progress { display: block; width: 100%; height: 6px; overflow: hidden; border-radius: 3px; background: var(--c-surface-3); }
.cm-vs2-field__progress[hidden] { display: none; }
.cm-vs2-field__progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--c-accent); transition: width 0.3s var(--ease-out); }
.cm-vs2-field__progress[data-indeterminate] .cm-vs2-field__progress-fill { width: 38%; animation: cm-vs2-progress-sweep 1.4s var(--ease-in-out) infinite; }
@keyframes cm-vs2-progress-sweep { from { transform: translateX(-100%); } to { transform: translateX(265%); } }
.cm-vs2-field__loading-bytes { margin: -2px 0 0; color: var(--c-text-2); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.cm-vs2-field__loading-bytes[hidden] { display: none; }
.cm-vs2-field__loading-note { margin: 0; color: var(--c-text-2); font-size: var(--fs-label); line-height: 1.5; }
.cm-vs2-field__loading-note[hidden] { display: none; }

/* ---- Hunt result ---------------------------------------------------------- */
.cm-vs2-result__body {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--sp-4);
  min-height: 0;
  padding: var(--sp-6) var(--sp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: center;
}
.cm-vs2-result__portrait-card {
  position: relative;
  display: grid;
  place-items: center;
  width: 136px;
  height: 136px;
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-sheet);
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c-accent) 22%, transparent), transparent 65%), var(--c-surface-1);
  box-shadow: var(--glow-accent);
}
.cm-vs2-result__portrait { width: 104px; height: 104px; object-fit: contain; image-rendering: pixelated; }
/* The assembled memory-card frame (original UI cells, added by
   appendMemoryCardFrame when its art is available) wraps the caught portrait:
   the card it now lives on. Its eight pieces keep their authored sizes. */
.cm-vs2-result__portrait-card.cm-memory-card-frame {
  position: relative;
  isolation: isolate;
  width: auto;
  height: auto;
  padding: 22px;
  border: 0;
  border-radius: 0;
  background: var(--c-ground-raised);
  box-shadow: 0 0 28px color-mix(in srgb, var(--c-accent) 22%, transparent);
}
.cm-memory-card-frame .cm-vs2-result__portrait { width: 136px; height: 136px; }
.cm-memory-card-frame__piece {
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  pointer-events: none;
}
.cm-memory-card-frame__piece--tl { left: 0; top: 0; width: 32px; height: 24px; }
.cm-memory-card-frame__piece--tr { right: 0; top: 0; width: 40px; height: 16px; }
.cm-memory-card-frame__piece--bl { left: 0; bottom: 0; width: 16px; height: 24px; }
.cm-memory-card-frame__piece--br { right: 0; bottom: 0; width: 16px; height: 24px; }
.cm-memory-card-frame__piece--top { left: 32px; right: 40px; top: 0; width: auto; height: 8px; }
.cm-memory-card-frame__piece--bottom { left: 16px; right: 16px; bottom: 0; width: auto; height: 8px; }
.cm-memory-card-frame__piece--left { left: 0; top: 24px; bottom: 24px; width: 8px; height: auto; }
.cm-memory-card-frame__piece--right { right: 0; top: 16px; bottom: 24px; width: 8px; height: auto; }
.cm-vs2-result__portrait-card.cm-original-capture-frame {
  isolation: isolate;
  box-sizing: border-box;
  width: 232px;
  height: 232px;
  max-width: 100%;
  padding: 34px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.cm-original-capture-frame::before {
  content: '';
  position: absolute;
  inset: 13%;
  z-index: -1;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 65%, color-mix(in srgb, var(--c-accent) 14%, transparent), transparent 75%), var(--c-surface-1);
}
.cm-original-capture-frame .cm-vs2-result__portrait {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 164px;
  object-fit: contain;
}
.cm-original-capture-frame__art {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.cm-vs2-result__species { margin: 0; font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-heavy); }
.cm-vs2-result__note { margin: 0; max-width: 30ch; color: var(--c-text-2); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.cm-vs2-result__name { display: grid; gap: 8px; justify-items: stretch; width: min(100%, 18rem); }
.cm-vs2-result__name-label { color: var(--c-text-2); font-size: var(--fs-body-sm); }
.cm-vs2-result__name-input {
  width: 100%;
  min-height: var(--control);
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-line-3);
  border-radius: var(--r-control);
  background: var(--c-ground);
  color: var(--c-text-1);
  font-size: calc(18px * var(--text-scale));
  font-weight: var(--fw-heavy);
  text-align: center;
}
.cm-vs2-result__name-input:focus { border-color: var(--c-accent); outline: none; box-shadow: 0 0 0 3px var(--c-accent-soft); }
.cm-vs2-result__roster { display: grid; gap: var(--sp-2); width: 100%; }
.cm-vs2-result__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-control);
  background: var(--c-surface-1);
  text-align: left;
}
.cm-vs2-result__row > span { min-width: 0; overflow-wrap: anywhere; }
.cm-vs2-result__row > span:not([class]) { flex: 1 1 auto; }
.cm-vs2-result__row button { flex: 0 0 auto; min-height: var(--target); }
/* The catch the name plate is editing (several catches in one hunt). */
.cm-vs2-result__row[data-selected="true"] { border-color: var(--c-accent-line); background: var(--c-accent-soft); }
.cm-vs2-result__pick[aria-pressed="true"] { border-color: var(--c-accent); color: var(--c-accent-strong); }
.cm-vs2-result__thumbnail { display: grid; grid-template-rows: minmax(0, 1fr); width: 40px; height: 40px; flex: 0 0 auto; background: center / contain no-repeat; image-rendering: pixelated; }
.cm-vs2-result__thumbnail img { display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; object-fit: contain; }
.cm-vs2-result__release { position: sticky; bottom: 0; padding: var(--sp-3); border-top: 1px solid var(--c-line-1); background: var(--c-surface-bar); }
.cm-vs2-result__release button { min-height: var(--target); margin: 4px; }
.cm-vs2-result .cm-vs2-footer { grid-template-columns: minmax(0, 1fr); }
.cm-vs2-result .cm-vs2-footer [role="alert"] { max-width: none; text-align: center; }

/* ---- Shop: detail over a card shelf (video-observed arrangement) ---------- */
/* The detail takes the spare height; the shelf is one fixed row of cards. */
.cm-vs2-shop__body { display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; gap: var(--sp-3); overflow: hidden; }
.cm-vs2-shop__detail {
  display: grid;
  grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
  gap: var(--sp-3);
  min-height: 0;
  padding: var(--sp-3);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  background: var(--c-surface-1);
}
.cm-vs2-shop__detail-art {
  display: grid;
  place-items: center;
  min-height: 112px;
  max-height: 220px;
  border-radius: var(--r-control);
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 62%), var(--c-ground-raised);
  overflow: hidden;
}
.cm-vs2-shop__detail-copy { display: grid; align-content: start; gap: 6px; min-width: 0; }
.cm-vs2-shop__detail-name { margin: 0; font-size: var(--fs-title-2); line-height: var(--lh-title-2); font-weight: var(--fw-heavy); }
.cm-vs2-shop__detail-description { margin: 0; max-height: 7.2em; overflow: auto; color: var(--c-text-2); font-size: var(--fs-body-sm); line-height: 1.6; }
.cm-vs2-shop__detail-meta { margin: 0; padding-top: 6px; border-top: 1px solid var(--c-line-1); color: var(--c-gold-strong); font-size: var(--fs-body-sm); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.cm-vs2-shop__detail-state { margin: 0; padding: 6px 10px; border-radius: var(--r-tag); background: var(--c-warning-soft); color: var(--c-warning); font-size: var(--fs-label); font-weight: var(--fw-strong); }
.cm-vs2-shop__detail-state[hidden] { display: none; }

/* Tabs wrap to a second row rather than hiding one off screen (English at
   large text sizes on a 360px phone). */
.cm-vs2-shop__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-vs2-shop__tab {
  flex: 1 0 max-content;
  min-height: var(--target);
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-control);
  background: var(--c-surface-1);
  color: var(--c-text-2);
  font: var(--fw-strong) var(--fs-body-sm)/1 var(--font-ui);
}
.cm-vs2-shop__tab[data-active="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-strong); }
.cm-vs2-shop__tabs[hidden], .cm-vs2-shop__list[hidden], .cm-vs2-database__detail[hidden] { display: none; }

.cm-vs2-shop__shelf { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; height: 156px; min-height: 0; align-items: stretch; }
/* Larger text in the one-column shop: every part keeps its own height (the
   cards grow with a wrapped price and stock line) and the shop scrolls rather
   than squeezing one part over another. The two-column shop at 700px and up
   already sizes to content. */
@media (max-width: 699px) {
  :root:is([data-text-scale="115"], [data-text-scale="130"]) .cm-vs2-shop__body { display: flex; flex-direction: column; overflow-y: auto; }
  :root:is([data-text-scale="115"], [data-text-scale="130"]) .cm-vs2-shop__body > * { flex: none; }
  :root:is([data-text-scale="115"], [data-text-scale="130"]) .cm-vs2-shop__shelf { height: auto; }
}
:root:is([data-text-scale="115"], [data-text-scale="130"]) body[data-portrait-frame] .cm-vs2-shop__body { display: flex; flex-direction: column; overflow-y: auto; }
:root:is([data-text-scale="115"], [data-text-scale="130"]) body[data-portrait-frame] .cm-vs2-shop__body > * { flex: none; }
:root:is([data-text-scale="115"], [data-text-scale="130"]) body[data-portrait-frame] .cm-vs2-shop__shelf { height: auto; }
.cm-vs2-shop__arrow {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-control);
  background: var(--c-surface-1);
  color: var(--c-text-1);
  font-size: 26px;
  line-height: 1;
}
.cm-vs2-shop__arrow:disabled { opacity: 0.3; }
.cm-vs2-shop__list {
  display: flex;
  gap: var(--sp-2);
  min-width: 0;
  min-height: 0;
  padding: 2px 2px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cm-vs2-shop__list::-webkit-scrollbar { display: none; }
.cm-vs2-shop__row {
  position: relative;
  display: grid;
  grid-template-rows: minmax(58px, 1fr) auto;
  flex: 0 0 calc((100% - 8px) / 2);
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: var(--sp-2);
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-card);
  background: var(--c-surface-1);
  color: var(--c-text-1);
  font: inherit;
  text-align: center;
  scroll-snap-align: center;
  cursor: pointer;
}
.cm-vs2-shop__row[data-selected="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); box-shadow: var(--glow-accent); }
.cm-vs2-shop__row[data-selected="true"]::before { content: ""; position: absolute; top: 6px; left: 6px; width: 9px; height: 9px; background: var(--motif-stair) no-repeat; }
.cm-vs2-shop__card-art { display: grid; place-items: center; min-width: 0; min-height: 58px; overflow: hidden; }
.cm-vs2-shop__card-art :is(.cm-facility-thumb, .cm-shop-goods-icon) { width: 58px; height: 58px; }
.cm-vs2-shop__detail-art .cm-vs2-shop__art-large { width: min(112px, 82%); height: min(112px, 82%); }
.cm-vs2-shop__art-fallback { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--c-line-2); border-radius: 50%; color: var(--c-text-2); font-size: var(--fs-label); font-weight: var(--fw-strong); }
.cm-vs2-shop__detail-art .cm-vs2-shop__art-fallback { width: 78px; height: 78px; }
.cm-vs2-shop__name { display: grid; align-content: end; gap: 2px; min-width: 0; }
.cm-vs2-shop__name strong { overflow: hidden; font-size: var(--fs-body-sm); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.cm-vs2-shop__meta { display: block; margin: 0; overflow: hidden; color: var(--c-text-3); font-size: var(--fs-label); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cm-vs2-shop__new { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 4px; background: var(--c-rare-soft); color: var(--c-rare); font-size: 10px; font-weight: var(--fw-heavy); }
.cm-vs2-shop__status, .cm-vs2-shop__empty { min-height: 20px; margin: 0; color: var(--c-text-2); font-size: var(--fs-body-sm); text-align: center; }
.cm-vs2-shop__status[data-tone="ok"] { color: var(--c-success); }
.cm-vs2-shop__status[data-tone="refused"] { color: var(--c-warning); }
.cm-vs2-shop .cm-vs2-footer { grid-template-columns: auto minmax(0, 1fr); }
.cm-vs2-shop__buy { min-height: var(--control); }

.cm-facility-thumb { display: block; width: 72px; height: 66px; object-fit: contain; image-rendering: pixelated; border-radius: var(--r-tag); }
/* The goods binding points at the approved toolbar cells (one image each), so the
   icon a shop row shows is the icon the dock shows, on the same dark plate. */
.cm-shop-goods-icon { display: block; width: 62px; height: 62px; justify-self: center; border-radius: var(--r-control); background-color: var(--c-ground-raised); background-position: center; background-size: 74% 74%; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px var(--c-line-2); image-rendering: pixelated; }

/* ---- Database: a grid of numbered tiles, registered ones named ------------- */
.cm-vs2-database__catalog { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--sp-2); min-width: 0; min-height: 0; }
.cm-vs2-database__catalog[hidden] { display: none; }
.cm-vs2-database__filter { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--c-text-2); font-size: var(--fs-label); }
.cm-vs2-database__stage { flex: 1; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid var(--c-line-2); border-radius: var(--r-control); background: var(--c-surface-1); color: var(--c-text-1); font: inherit; }
.cm-vs2-database__stage:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }
.cm-vs2-database__egg { width: min(100%, 160px); height: 160px; object-fit: contain; justify-self: center; }
.cm-vs2-database .cm-vs2-shop__body[data-mode="list"] { grid-template-rows: minmax(0, 1fr); }
.cm-vs2-database .cm-vs2-shop__body[data-mode="detail"] { grid-template-rows: minmax(0, 1fr); }
.cm-vs2-database .cm-vs2-shop__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  align-content: start;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: none;
}
.cm-vs2-database .cm-vs2-database__row {
  display: grid;
  grid-template-rows: none;
  flex: none;
  min-height: 64px;
  padding: 8px 3px;
  border-radius: var(--r-control);
  scroll-snap-align: none;
}
.cm-vs2-database__row .cm-vs2-shop__name { justify-items: center; align-content: center; gap: 4px; }
.cm-vs2-database__row .cm-vs2-shop__name strong { max-width: 100%; overflow: visible; font-size: var(--fs-label); line-height: 1.3; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
/* A card's price and count wrap instead of being cut: the price is the one
   thing a player compares across the shelf. */
.cm-vs2-shop__row:not(.cm-vs2-database__row) .cm-vs2-shop__meta { overflow: visible; text-overflow: clip; white-space: normal; text-wrap: balance; }
.cm-vs2-database__row .cm-vs2-shop__meta { order: -1; color: var(--c-text-3); font-size: var(--fs-caption); letter-spacing: 0.04em; }
.cm-vs2-database__row[data-state="UNDISCOVERED"] { background: transparent; }
.cm-vs2-database__row[data-state="UNDISCOVERED"] strong { color: var(--c-text-disabled); letter-spacing: 0.18em; }
.cm-vs2-database__detail { display: grid; align-content: start; gap: var(--sp-3); min-height: 0; overflow-y: auto; padding: 2px 0 var(--sp-2); }
.cm-vs2-database__detail-title { margin: 0; font-size: var(--fs-title-1); line-height: var(--lh-title-1); font-weight: var(--fw-heavy); }
.cm-vs2-database__instance { display: grid; gap: 6px; padding: var(--sp-3); border: 1px solid var(--c-line-1); border-radius: var(--r-card); background: var(--c-surface-1); }
.cm-dex-routes { min-width: 0; }
.cm-dex-routes__heading { margin: 0 0 var(--sp-2); font-size: var(--fs-body); }
.cm-dex-routes__graph { display: grid; grid-template-columns: minmax(60px, 96px) minmax(0, 1fr); gap: 20px; align-items: start; }
.cm-dex-routes__source { display: grid; justify-items: center; gap: 6px; font-size: var(--fs-label); }
.cm-dex-routes__targets { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; min-width: 0; }
.cm-dex-routes__branch { position: relative; min-width: 0; }
.cm-dex-routes__branch::before { content: '→'; position: absolute; right: calc(100% + 2px); top: 24px; color: var(--c-text-2); }
.cm-dex-routes__target { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: center; width: 100%; min-height: 76px; min-width: 44px; padding: 8px; color: var(--c-text-1); background: var(--c-surface-1); border: 1px solid var(--c-line-2); border-radius: var(--r-control); font: inherit; text-align: left; }
.cm-dex-routes__target:disabled { opacity: 1; cursor: default; }
.cm-dex-routes__target:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }
.cm-dex-routes__copy { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.cm-dex-routes__name { font-size: var(--fs-label); }
.cm-dex-routes__status { color: var(--c-text-2); font-size: var(--fs-caption); line-height: 1.5; }
/* Read-only evolution conditions. The existing detail pane owns scrolling. */
.cm-dex-conditions__toggle { box-sizing: border-box; display: block; width: auto; max-width: 100%; min-width: 44px; min-height: 44px; margin-top: 6px; padding: 8px 12px; border: 1px solid var(--c-line-2); border-radius: var(--r-control); background: var(--c-surface-1); color: var(--c-text-1); font: inherit; line-height: 1.4; text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.cm-dex-conditions__toggle:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.cm-dex-conditions__toggle[aria-expanded="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); }
.cm-dex-conditions__panel { box-sizing: border-box; min-width: 0; max-width: 100%; margin-top: 6px; padding: 10px; border: 1px solid var(--c-line-2); border-radius: var(--r-control); background: var(--c-surface-1); color: var(--c-text-1); font-size: var(--fs-label); line-height: 1.5; overflow-wrap: anywhere; }
.cm-dex-conditions__panel[hidden] { display: none; }
.cm-dex-conditions__notice { margin: 0 0 8px; color: var(--c-text-2); }
.cm-dex-conditions__notice:last-child { margin-bottom: 0; }
.cm-dex-conditions__list { display: grid; gap: 6px; min-width: 0; margin: 0 0 10px; }
.cm-dex-conditions__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; padding-bottom: 6px; border-bottom: 1px solid var(--c-line-1); }
.cm-dex-conditions__row dt { min-width: 0; font-weight: var(--fw-strong); }
.cm-dex-conditions__row dd { min-width: 0; margin: 0; font-variant-numeric: tabular-nums; }

.cm-dex-portrait { display: grid; place-items: center; min-width: 0; width: 100%; height: 72px; background: var(--c-ground-raised); border-radius: var(--r-control); }
.cm-dex-portrait__image { max-width: 100%; width: auto; max-height: 72px; object-fit: contain; }
.cm-dex-portrait__image[hidden], .cm-dex-portrait__placeholder[hidden] { display: none; }
.cm-dex-portrait[data-revealed="false"] .cm-dex-portrait__image { filter: brightness(0); }
.cm-dex-portrait__placeholder { padding: 4px; font-size: var(--fs-caption); line-height: 1.5; color: var(--c-text-2); text-align: center; overflow-wrap: anywhere; }

/* Owner 2026-10-13: use the existing Shop columns and keep the Database
   list beside its selected entry. Each pane scrolls beneath fixed chrome. */
body[data-desktop-browse] .cm-vs2-root[data-screen] .cm-vs2-shell { width: min(100%, 1200px); }
body[data-desktop-browse] .cm-vs2-root[data-screen] .cm-vs2-shop__body { overflow: hidden; }
body[data-desktop-browse] .cm-vs2-root[data-screen="SHOP"] .cm-vs2-shop__detail {
  align-self: stretch;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body[data-desktop-browse] .cm-vs2-root[data-screen="SHOP"] .cm-vs2-shop__detail-art { min-height: 112px; max-height: 200px; }
body[data-desktop-browse] .cm-vs2-root[data-screen="SHOP"] .cm-vs2-shop__detail-description { max-height: none; overflow: visible; }
body[data-desktop-browse] .cm-vs2-root[data-screen] .cm-vs2-shop__list { scrollbar-width: thin; scrollbar-gutter: stable; }
body[data-desktop-browse] .cm-vs2-root[data-screen] .cm-vs2-shop__list::-webkit-scrollbar { display: block; width: 8px; }
body[data-desktop-browse] .cm-vs2-root[data-screen="SHOP"] .cm-vs2-shop__name strong { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
body[data-desktop-browse] .cm-vs2-root[data-screen="DATABASE"] .cm-vs2-shop__body[data-mode="detail"] {
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  grid-template-areas: "list detail";
}
body[data-desktop-browse] .cm-vs2-root[data-screen="DATABASE"] .cm-vs2-database__catalog { grid-area: list; }
body[data-desktop-browse] .cm-vs2-root[data-screen="DATABASE"] .cm-vs2-database__row { min-height: 64px; }
body[data-desktop-browse] .cm-vs2-root[data-screen="DATABASE"] .cm-vs2-shop__body[data-mode="list"] { grid-template-areas: "list"; }
body[data-desktop-browse] .cm-vs2-root[data-screen="DATABASE"] .cm-vs2-database__detail { grid-area: detail; padding: var(--sp-3); overflow-wrap: anywhere; overscroll-behavior: contain; }
body[data-desktop-browse] .cm-vs2-root[data-screen="DATABASE"] .cm-vs2-database__detail > .cm-vs2-shop__meta { white-space: normal; }
body[data-desktop-browse] .cm-vs2-root[data-screen] :is(.cm-vs2-shop__row, .cm-vs2-database__detail-title):focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }
@media (max-height: 600px) {
  body[data-desktop-browse] .cm-vs2-root[data-screen] .cm-vs2-header { padding-block: var(--sp-2); }
  body[data-desktop-browse] .cm-vs2-root[data-screen] .cm-collection-icon { width: 40px; height: 40px; }
  body[data-desktop-browse] .cm-vs2-root[data-screen] .cm-vs2-footer { padding-top: var(--sp-2); }
  body[data-desktop-browse] .cm-vs2-root[data-screen="SHOP"] .cm-vs2-shop__detail-art { min-height: 80px; max-height: 112px; }
}

/* ---- Cage edit: the measured board, then placed facilities and the tray --- */
.cm-vs2-cage-edit__body { display: grid; grid-auto-rows: max-content; align-content: start; gap: var(--sp-3); min-height: 0; }
.cm-vs2-cage-rank { gap: 8px; }
.cm-vs2-cage-rank__label { font-size: var(--fs-label); }
.cm-vs2-cage-rank__step { width: 32px; min-height: 32px; padding: 0; border: 1px solid var(--c-line-2); border-radius: var(--r-tag); background: var(--c-surface-2); color: var(--c-text-1); font-size: 18px; line-height: 1; }
.cm-vs2-cage-rank__step:disabled { opacity: 0.35; }
.cm-cage-board-hint { margin: 0; color: var(--c-text-2); font-size: var(--fs-body-sm); }
.cm-cage-board-scroll {
  flex: 0 0 auto;
  margin-inline: calc(-1 * var(--sp-4));
  padding: var(--sp-4) var(--sp-4);
  overflow-x: auto;
  overflow-y: hidden;
  border-block: 1px solid var(--c-line-1);
  background: radial-gradient(70% 90% at 50% 50%, var(--c-stage-glow), var(--c-ground-raised));
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}
.cm-vs2-cage-board { position: relative; display: block; width: 508px; height: 102px; padding: 0; margin: 0; }
/* Ranch expansion prototype (2026-10-05): the annex is its own five-column
   board of the same cells, drawn as the honeycomb's next two rows: its first
   row sits 88px below the main board's top (two 44px row steps), so it tucks
   14px into the 102px main board. With it, the board area lets vertical pans
   through so the screen can scroll down to it. */
.cm-cage-annex-label { margin: var(--sp-2) 0 0; color: var(--c-text-2); font-size: var(--fs-body-sm); font-weight: var(--fw-heavy); }
.cm-cage-annex-board { position: relative; display: block; width: 270px; height: 102px; padding: 0; margin: -14px 0 0; }
.cm-cage-board-scroll[data-annex="true"] { touch-action: pan-x pan-y; }
.cm-cage-expansion { display: flex; justify-content: flex-end; }
.cm-cage-expansion:empty { display: none; }
.cm-vs2-cage-slot {
  position: absolute;
  width: 48px;
  height: 56px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background-color: var(--c-surface-2);
  background-repeat: no-repeat;
  color: var(--c-accent-strong);
  font: var(--fw-heavy) 18px/1 var(--font-ui);
  image-rendering: pixelated;
  cursor: pointer;
}
.cm-vs2-cage-slot[data-unlocked="false"] { background-color: var(--c-ground); color: var(--c-text-disabled); cursor: default; }
.cm-vs2-cage-slot[data-filled="false"][data-unlocked="true"] { background-color: color-mix(in srgb, var(--c-accent) 12%, transparent); }
.cm-vs2-cage-slot[data-fixed="true"] { cursor: default; }
.cm-vs2-cage-slot:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -4px; filter: brightness(1.15); }
.cm-cage-facilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.cm-cage-facility,
.cm-vs2-cage-tray__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-height: 72px;
  padding: 8px;
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-control);
  background: var(--c-surface-1);
  color: var(--c-text-1);
  text-align: left;
  cursor: pointer;
}
.cm-cage-facility .cm-facility-thumb,
.cm-vs2-cage-tray__item .cm-facility-thumb { grid-row: span 2; width: 56px; height: 60px; }
.cm-cage-facility strong, .cm-vs2-cage-tray__name { font-size: var(--fs-body-sm); font-weight: var(--fw-strong); overflow-wrap: anywhere; }
.cm-cage-facility span, .cm-vs2-cage-tray__effect { color: var(--c-text-3); font-size: var(--fs-label); line-height: 1.35; }
.cm-cage-facility:disabled { cursor: default; }
.cm-cage-facility:disabled::after { content: var(--label-fixed); grid-column: 2; justify-self: start; padding: 1px 6px; border-radius: 4px; background: var(--c-surface-3); color: var(--c-text-2); font-size: 10px; }
.cm-vs2-cage-tray { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); min-height: 0; align-content: start; }
.cm-vs2-cage-tray__item[data-selected="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); box-shadow: var(--glow-accent); }

/* ---- Focus ---------------------------------------------------------------- */
.cm-vs2-action:focus-visible,
.cm-vs2-gate:focus-visible,
.cm-vs2-gate3d__node-hit:focus-visible,
.cm-vs2-loadout__option:focus-visible,
.cm-vs2-shop__row:focus-visible,
.cm-vs2-shop__tab:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ---- Small phones and short screens --------------------------------------- */
@media (max-width: 374px) {
  .cm-vs2-header { padding-inline: var(--sp-3); }
  .cm-vs2-body { padding-inline: var(--sp-3); }
  .cm-vs2-footer { padding-inline: var(--sp-3); }
  .cm-vs2-gates { gap: 5px; }
  .cm-vs2-gate3d__host { min-height: 168px; }
  .cm-cage-board-scroll { margin-inline: calc(-1 * var(--sp-3)); padding-inline: var(--sp-3); }
}
@media (max-height: 700px) and (orientation: portrait) {
  .cm-vs2-header { padding-top: var(--sp-3); }
  .cm-vs2-subtitle { display: none; }
  .cm-vs2-shop__shelf { height: 132px; }
}

/* ---- Tall phones: the Shop detail stacks, art above its words ------------- */
@media (max-width: 699px) and (min-height: 760px) {
  body:not([data-portrait-frame]) .cm-vs2-shop__detail { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  body:not([data-portrait-frame]) .cm-vs2-shop__detail-art { min-height: 120px; max-height: none; }
  body:not([data-portrait-frame]) .cm-vs2-shop__detail-art .cm-vs2-shop__art-large { width: min(128px, 60%); height: min(128px, 60%); }
  body:not([data-portrait-frame]) .cm-vs2-shop__detail-art .cm-facility-thumb.cm-vs2-shop__art-large { width: min(168px, 70%); height: auto; max-height: 90%; }
}

/* ---- Tablets: the extra width becomes columns, not bigger cards ----------- */
@media (min-width: 700px) {
  body:not([data-portrait-frame]) .cm-vs2-shell { width: min(100%, 980px); }
  body:not([data-portrait-frame]) .cm-vs2-header,
  body:not([data-portrait-frame]) .cm-vs2-body,
  body:not([data-portrait-frame]) .cm-vs2-footer { padding-inline: var(--sp-8); }
  /* Gate: world and list side by side when the list is open. */
  body:not([data-portrait-frame]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-gates { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  body:not([data-portrait-frame]) .cm-vs2-root[data-screen="HUNT_LOADOUT"] .cm-vs2-shell,
  body:not([data-portrait-frame]) .cm-vs2-result { width: min(100%, 720px); }
  body:not([data-portrait-frame]) .cm-vs2-root[data-screen="HUNT_LOADOUT"] .cm-vs2-loadout__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Shop: the detail beside a grid of cards. */
  body:not([data-portrait-frame]) .cm-vs2-shop__body {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "detail tabs" "detail shelf" "status status";
  }
  body:not([data-portrait-frame]) .cm-vs2-shop__detail { grid-area: detail; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-content: start; align-self: start; }
  body:not([data-portrait-frame]) .cm-vs2-shop__detail-art { min-height: 200px; }
  body:not([data-portrait-frame]) .cm-vs2-shop__tabs { grid-area: tabs; }
  body:not([data-portrait-frame]) .cm-vs2-shop__shelf { grid-area: shelf; grid-template-columns: minmax(0, 1fr); height: auto; }
  body:not([data-portrait-frame]) .cm-vs2-shop__row { min-height: 150px; }
  body:not([data-portrait-frame]) .cm-vs2-shop__detail-art { max-height: none; }
  body:not([data-portrait-frame]) .cm-vs2-shop__arrow { display: none; }
  body:not([data-portrait-frame]) .cm-vs2-shop__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); align-content: start; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; }
  body:not([data-portrait-frame]) .cm-vs2-shop__row { flex: none; }
  body:not([data-portrait-frame]) .cm-vs2-shop__status { grid-area: status; }
  body:not([data-portrait-frame]) .cm-vs2-database .cm-vs2-shop__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  body:not([data-portrait-frame]) .cm-vs2-database .cm-vs2-shop__list { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  /* Cage: the board on top, placed facilities and the tray side by side. */
  body:not([data-portrait-frame]) .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-vs2-cage-edit__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body:not([data-portrait-frame]) .cm-vs2-root[data-screen="CAGE_EDIT"] :is(.cm-cage-board-hint, .cm-cage-board-scroll, .cm-vs2-shop__status) { grid-column: 1 / -1; }
  body:not([data-portrait-frame]) .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-cage-board-scroll { margin-inline: calc(-1 * var(--sp-8)); padding-inline: var(--sp-8); }
  body:not([data-portrait-frame]) .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-vs2-cage-board { margin-inline: auto; }
  /* The annex and its label sit under the centred main board's left edge. */
  body:not([data-portrait-frame]) .cm-vs2-root[data-screen="CAGE_EDIT"] :is(.cm-cage-annex-board, .cm-cage-annex-label) { margin-left: max(0px, calc((100% - 508px) / 2)); }
  body:not([data-portrait-frame]) .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-cage-expansion { grid-column: 1 / -1; }
  body:not([data-portrait-frame]) .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-cage-facilities { grid-column: 1; align-content: start; }
  body:not([data-portrait-frame]) .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-vs2-cage-tray { grid-column: 2; }
  /* The Hunt field stays a full-screen world; its HUD islands keep their size. */
  body:not([data-portrait-frame]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-field { width: 100%; }
}

/* Reduced motion: the player's choice (data-motion on <html>, resolved from
   the setting and, when it is "system", from the OS); the media query only
   covers a page that has no data-motion yet. */
:root[data-motion="reduced"] .cm-vs2-shell, :root[data-motion="reduced"] .cm-vs2-field { animation: none; }
:root[data-motion="reduced"] .cm-vs2-action:not(:disabled):active { transform: none; }
:root[data-motion="reduced"] .cm-vs2-field__progress-fill { transition: none; }
:root[data-motion="reduced"] .cm-vs2-field__progress[data-indeterminate] .cm-vs2-field__progress-fill { width: 100%; opacity: 0.45; animation: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) .cm-vs2-shell, :root:not([data-motion]) .cm-vs2-field { animation: none; }
  :root:not([data-motion]) .cm-vs2-action:not(:disabled):active { transform: none; }
  :root:not([data-motion]) .cm-vs2-field__progress-fill { transition: none; }
  :root:not([data-motion]) .cm-vs2-field__progress[data-indeterminate] .cm-vs2-field__progress-fill { width: 100%; opacity: 0.45; animation: none; }
}

/* 2026-10-12: a ranch without the expansion sees its rows locked under the
   board -- the original blue Lid on every bay, a few padlocks -- in the same
   place the annex cells would be. They are decoration, not cells. */
.cm-cage-annex-board[data-preview="true"] { width: 508px; pointer-events: none; }
.cm-cage-annex-bay { position: absolute; width: 48px; height: 56px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background-color: #4b7ea3; background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; }
.cm-cage-annex-bay[data-lock="true"]::before { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(4, 20, 32, 0.6); box-shadow: inset 0 0 0 1px rgba(127, 216, 255, 0.6); transform: translate(-50%, -50%); }
.cm-cage-annex-bay[data-lock="true"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; background: #eaf7ff;
  transform: translate(-50%, -50%); -webkit-mask: var(--cm-padlock) center / contain no-repeat; mask: var(--cm-padlock) center / contain no-repeat; }
.cm-cage-annex-board[data-preview="true"] + .cm-cage-annex-label { color: var(--c-text-3); }
/* The label stays readable however far the board is scrolled sideways. */
.cm-cage-annex-label { position: sticky; left: 0; width: max-content; max-width: 100%; }
.cm-cage-expansion { gap: var(--sp-2); }

/* Hunt R3: enabled only after the same legacy DOM/stage viewport is measured.
   The canonical gameplay window remains the session's captured portrait field. */
.cm-hunt-controls-panel { display: contents; }
body[data-hunt-wide] .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-field {
  --hunt-controls-width: clamp(240px, 25vw, 300px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hunt-controls-width);
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
  padding-right: max(8px, env(safe-area-inset-right));
  padding-left: max(0px, env(safe-area-inset-left));
}
body[data-hunt-wide] .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-field__viewport {
  position: relative; inset: auto; grid-column: 1; grid-row: 1; min-width: 0; min-height: 0;
}
body[data-hunt-wide] .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-hud {
  right: calc(var(--hunt-controls-width) + 20px + env(safe-area-inset-right));
}
body[data-hunt-wide] .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-controls-panel {
  display: flex; flex-direction: column; gap: 10px; grid-column: 2; grid-row: 1;
  position: relative; min-width: 0; min-height: 0;
  padding: 10px 0 max(10px, env(safe-area-inset-bottom));
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
body[data-hunt-wide] .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-controls-panel .cm-hunt-info {
  position: static; inset: auto; display: grid; gap: 8px; flex: 0 0 auto;
}
body[data-hunt-wide] .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-controls-panel .cm-vs2-target {
  width: 100%; min-width: 0;
}
body[data-hunt-wide] .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-controls-panel .cm-hunt-tools {
  position: static; inset: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; padding: 4px; flex: 0 0 auto; order: 2;
}
body[data-hunt-wide] .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-controls-panel .cm-hunt-tools .cm-vs2-action {
  width: 100%; min-width: 44px; max-width: none; min-height: 48px; flex: none;
}
body[data-hunt-wide] .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-controls-panel .cm-vs2-field__hint {
  position: static; inset: auto; transform: none; width: 100%; max-width: none;
  margin: 0; flex: 0 0 auto; order: 3; text-align: start;
}

/* Candidate Cage landscape: native board left, facilities right. The
   wrappers have no box outside the opt-in, so portrait keeps its existing
   child order and tablet grid. No scale/zoom: each hex stays 48 x 56 CSS px. */
.cm-cage-board-panel, .cm-cage-inventory-panel { display: contents; }
body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-vs2-shell { width: min(100%, 1200px); }
body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] :is(.cm-vs2-header, .cm-vs2-cage-edit__body, .cm-vs2-footer) {
  padding-left: max(var(--sp-3), env(safe-area-inset-left));
  padding-right: max(var(--sp-3), env(safe-area-inset-right));
}
body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-vs2-header { padding-top: max(var(--sp-2), env(safe-area-inset-top)); padding-bottom: var(--sp-2); }
body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-vs2-cage-edit__body {
  grid-template-columns: minmax(0, 540px) minmax(210px, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "board inventory" "status status";
  align-content: stretch;
  gap: var(--sp-3);
  overflow: hidden;
}
body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] :is(.cm-cage-board-panel, .cm-cage-inventory-panel) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: var(--sp-2);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-cage-board-panel { grid-area: board; }
body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-cage-inventory-panel { grid-area: inventory; padding: 3px; }
body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] :is(.cm-cage-board-panel, .cm-cage-inventory-panel) > * { flex: 0 0 auto; }
body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-cage-board-scroll { margin-inline: 0; padding: var(--sp-2); touch-action: pan-x pan-y; }
body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] :is(.cm-cage-facilities, .cm-vs2-cage-tray) { grid-template-columns: minmax(0, 1fr); }
body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-vs2-shop__status { grid-area: status; margin: 0; max-height: 25vh; overflow: auto; }
body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-vs2-shop__status:empty { display: none; }
body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-vs2-cage-rank { min-width: 0; max-width: 100%; white-space: normal; }
body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-vs2-footer { padding-top: var(--sp-2); }
body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-vs2-footer .cm-vs2-action { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] :is(.cm-cage-facilities, .cm-vs2-cage-tray) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 480px) {
  body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-vs2-kicker { display: none; }
  body[data-cage-landscape] .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-vs2-title { font-size: var(--fs-title-2); }
}

/* Desktop DOM menus: let the Gate world use the available height.
 * On genuinely short desktops the body, not the hidden shell, owns the
 * overflow; Back/Continue remain outside that scroll area. The world keeps
 * its existing ResizeObserver and coordinate mapping. No phone overrides. */
@media (min-width: 1024px) and (min-height: 420px) {
  body[data-desktop-menu] .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-body--gate { overflow-y: auto; overflow-x: hidden; }
  body[data-desktop-menu] .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-body--gate > * { flex-shrink: 0; }
  body[data-desktop-menu] .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-gate3d:not([data-view="fallback"]) { flex: 1 1 0; min-height: 220px; }
  body[data-desktop-menu] .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-gate-fallback { flex: 0 0 auto; overflow: visible; }
}

/* Candidate compact landscape DOM menus, default OFF in portraitFrame.js.
   720x320 / 844x390 / 932x430 use real columns, not a scaled portrait page.
   This attribute is only set on the explicit menu allowlist. The extra :not
   keeps these layout rules above the later classic skin and tablet rules.
   Coordinate scenes, art files, input handlers and saved data are unchanged. */
body[data-landscape-menu]:not([data-portrait-frame]) {
  --cm-menu-gutter-left: max(12px, env(safe-area-inset-left));
  --cm-menu-gutter-right: max(12px, env(safe-area-inset-right));
  --cm-screen-height: max(0px, calc(var(--cm-menu-viewport-height, 100dvh) - var(--cm-screen-top) - var(--cm-screen-bottom)));
}
/* The existing HUD remains mounted: subtract its measured height rather than
   adding a full viewport below it. ID specificity matches the bar scaffold. */
body[data-landscape-menu]:not([data-portrait-frame]) #cm-root {
  top: calc(var(--cm-menu-viewport-top, 0px) + var(--cm-screen-top));
  bottom: auto;
  height: var(--cm-screen-height);
  min-width: 0;
  overflow-x: hidden;
}
body[data-landscape-menu]:not([data-portrait-frame]) .cm-status-bar { top: var(--cm-menu-viewport-top, 0px); }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-toolbar { bottom: max(0px, calc(100dvh - var(--cm-menu-viewport-height, 100dvh) - var(--cm-menu-viewport-top, 0px))); }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen] .cm-vs2-shell {
  width: min(100%, 980px);
  grid-template-rows: auto minmax(88px, 1fr) auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 8px 84px;
}
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen] :is(.cm-vs2-header, .cm-vs2-body, .cm-vs2-footer) {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen] .cm-vs2-header { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; gap: 8px; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen] .cm-vs2-header__copy { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen] .cm-vs2-header__copy > :is(.cm-vs2-kicker, .cm-vs2-title, .cm-vs2-subtitle) { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen] .cm-vs2-header__copy > .cm-collection-icon { grid-column: 1; grid-row: 1 / span 3; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-collection-icon { width: 40px; height: 40px; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen] .cm-vs2-body { min-width: 0; padding-top: 4px; padding-bottom: 6px; gap: 8px; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen] .cm-vs2-footer { position: sticky; bottom: 0; z-index: 6; background: var(--c-surface-bar); padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); gap: 8px; }
body[data-landscape-menu]:not([data-portrait-frame]) :is(.cm-vs2-action, .cm-vs2-shop__tab, .cm-vs5-action, .cm-screen-back, .cm-screen-primary) { min-height: 44px; min-width: 0; padding-block: 6px; white-space: normal; overflow-wrap: anywhere; }

/* Shop: independently scrollable detail and card pane. Single-row category
   tabs can pan horizontally; every tab retains its text and 44px target. */
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="SHOP"] .cm-vs2-shop__body {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-rows: auto minmax(88px, 1fr) auto;
  overflow-y: auto;
}
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="SHOP"] .cm-vs2-shop__detail { align-self: stretch; overflow-y: auto; grid-template-columns: minmax(64px, 0.3fr) minmax(0, 1fr); gap: 8px; padding: 8px; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="SHOP"] .cm-vs2-shop__detail-art { min-height: 64px; max-height: 96px; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="SHOP"] .cm-vs2-shop__detail-description { max-height: none; overflow: visible; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen] .cm-vs2-shop__tabs { flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen] .cm-vs2-shop__tab { flex: 0 0 auto; max-width: 100%; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="SHOP"] .cm-vs2-shop__list { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); min-height: 0; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="SHOP"] .cm-vs2-shop__row { min-height: 112px; }

/* Database: keep the selected detail alongside the live catalog. The view
   consumes the same frame controller decision, including keyboard shrink. */
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="DATABASE"] .cm-vs2-shop__body { grid-template-rows: minmax(88px, 1fr); overflow-y: auto; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="DATABASE"] .cm-vs2-shop__body[data-mode="detail"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-database__catalog { grid-template-rows: auto minmax(44px, 1fr); }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="DATABASE"] .cm-vs2-database__detail { min-width: 0; padding: 8px; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-dex-routes__graph { grid-template-columns: minmax(44px, 64px) minmax(0, 1fr); gap: 8px; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-dex-routes__target { grid-template-columns: 52px minmax(0, 1fr); }

/* Gate resizes its existing camera to the available world panel. Only the
   body scrolls when the minimum usable globe cannot fit. Loadout groups and
   medal tiles likewise must not flex-shrink inside a short scrollport. */
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-body--gate { overflow-y: auto; overflow-x: hidden; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root:is([data-screen="GATE_SELECT"], [data-screen="HUNT_LOADOUT"], [data-screen="MEDALS"]) .cm-vs2-body > * { flex-shrink: 0; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-gate3d:not([data-view="fallback"]) { flex: 1 1 0; min-height: 220px; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-gate-fallback { flex: 0 0 auto; overflow: visible; }
/* Use landscape width for the selected-place card, not another vertical row.
   The footer stays outside this single scroll owner. Fallback keeps all 16
   options in the same body rather than opening a nested scrolling pane. */
@media (min-width: 700px) {
  body:is([data-landscape-menu], [data-desktop-menu]):not([data-portrait-frame]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-body--gate {
    display: grid;
    grid-template-columns: minmax(180px, 0.65fr) minmax(0, 1.35fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
  }
  body:is([data-landscape-menu], [data-desktop-menu]):not([data-portrait-frame]) .cm-vs2-body--gate > .cm-vs2-preview { grid-column: 1; grid-row: 1; align-self: start; }
  body:is([data-landscape-menu], [data-desktop-menu]):not([data-portrait-frame]) .cm-vs2-body--gate > .cm-vs2-gate3d { grid-column: 2; grid-row: 1 / span 2; }
  body:is([data-landscape-menu], [data-desktop-menu]):not([data-portrait-frame]) .cm-vs2-body--gate > .cm-vs2-gate3d[data-view="fallback"] { grid-column: 1; grid-row: 2; align-self: start; }
  body:is([data-landscape-menu], [data-desktop-menu]):not([data-portrait-frame]) .cm-vs2-body--gate > .cm-vs2-gate-fallback { grid-column: 2; grid-row: 1 / span 2; }
  body:is([data-landscape-menu], [data-desktop-menu]):not([data-portrait-frame]) .cm-vs2-body--gate > .cm-vs2-evidence { grid-column: 1 / -1; }
}

body:is([data-landscape-menu], [data-desktop-menu]):not([data-portrait-frame]) .cm-vs2-root[data-screen="HUNT_RESULT"] .cm-vs2-result__body { grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.2fr); grid-template-areas: "portrait species" "portrait name" "portrait note" "roster roster" "release release"; gap: 12px; padding: 12px; align-items: start; }
body:is([data-landscape-menu], [data-desktop-menu]):not([data-portrait-frame]) .cm-vs2-result__portrait-card { grid-area: portrait; }
body:is([data-landscape-menu], [data-desktop-menu]):not([data-portrait-frame]) .cm-vs2-result__species { grid-area: species; }
body:is([data-landscape-menu], [data-desktop-menu]):not([data-portrait-frame]) .cm-vs2-result__name { grid-area: name; }
body:is([data-landscape-menu], [data-desktop-menu]):not([data-portrait-frame]) .cm-vs2-result__body > .cm-vs2-result__note { grid-area: note; }
body:is([data-landscape-menu], [data-desktop-menu]):not([data-portrait-frame]) .cm-vs2-result__roster { grid-area: roster; }
body:is([data-landscape-menu], [data-desktop-menu]):not([data-portrait-frame]) .cm-vs2-result__release { grid-area: release; }
body:is([data-landscape-menu], [data-desktop-menu]):not([data-portrait-frame]) .cm-vs2-result__body > .cm-vs2-evidence { grid-column: 1 / -1; }
body:is([data-landscape-menu], [data-desktop-menu]):not([data-portrait-frame]) .cm-vs2-result__body > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-medals__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-medal-dialog { max-height: calc(var(--cm-menu-viewport-height, 100dvh) - 24px); overflow-wrap: anywhere; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-medal-dialog > .cm-vs2-action { position: sticky; bottom: 0; }

/* Battle selection is a scrolling two-column page, not a battle field. Auto
   content rows keep the cube, fallback faces, full party and footer reachable.
   Hidden panels retain their native hidden state; no view is reconstructed. */
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs5-root[data-screen="BATTLE_SELECT"] .cm-vs5-shell { grid-template-rows: auto auto auto auto; align-content: start; overflow-y: auto; overflow-x: hidden; column-gap: 12px; padding-left: var(--cm-menu-gutter-left); padding-right: var(--cm-menu-gutter-right); scroll-padding-bottom: 96px; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs5-root[data-screen="BATTLE_SELECT"] .cm-vs5-header { padding-block: 6px; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs5-root[data-screen="BATTLE_SELECT"] .cm-vs5-cube { max-width: 220px; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs5-root[data-screen="BATTLE_SELECT"] :is(.cm-vs5-matches, .cm-vs5-party, .cm-vs5-entry-notice) { overflow: visible; min-width: 0; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs5-root[data-screen="BATTLE_SELECT"] .cm-vs5-footer { position: sticky; bottom: 0; margin-left: calc(-1 * var(--cm-menu-gutter-left)); margin-right: calc(-1 * var(--cm-menu-gutter-right)); padding: 6px var(--cm-menu-gutter-right) max(6px, env(safe-area-inset-bottom)) var(--cm-menu-gutter-left); }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs5-root[data-screen="BATTLE_SELECT"] .cm-vs5-cube__face { min-height: 44px; overflow-wrap: anywhere; }

/* Record pages already have native columns and a sticky footer. Give them a
   compact safe-area gutter and enough scroll clearance for wrapped controls. */
body[data-landscape-menu]:not([data-portrait-frame]) :is(.cm-digimon-shell, .cm-schedule-shell, .cm-help-shell, .cm-tamer-shell, .cm-championship-shell) { padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); gap: 10px; min-width: 0; overflow-wrap: anywhere; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-screen-footer { margin-left: calc(-1 * var(--cm-menu-gutter-left)); margin-right: calc(-1 * var(--cm-menu-gutter-right)); padding: 6px var(--cm-menu-gutter-right) max(6px, env(safe-area-inset-bottom)) var(--cm-menu-gutter-left); flex-shrink: 0; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-digimon-shell { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-digimon-item__name { white-space: normal; overflow-wrap: anywhere; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-help-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-tamer-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-tamer-field__value { min-width: 0; }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-schedule-days { grid-template-columns: minmax(0, 1fr); }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-sheet { top: var(--cm-menu-viewport-top, 0px); bottom: auto; height: var(--cm-menu-viewport-height, 100dvh); }
body[data-landscape-menu]:not([data-portrait-frame]) .cm-sheet__panel { max-height: calc(var(--cm-menu-viewport-height, 100dvh) - 16px); overflow-y: auto; }

/* MEDALS also uses the reviewed desktop scaffold; no scene coordinates. */
body[data-desktop-menu] .cm-vs2-root[data-screen="MEDALS"] .cm-vs2-body > * { flex-shrink: 0; }
body[data-desktop-menu] .cm-vs2-root[data-screen="MEDALS"] .cm-medals__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

/* Original character profiles: prose may wrap naturally in all five locales. */
.cm-dex-profile { min-width: 0; }
.cm-dex-profile__heading { margin: 0 0 var(--sp-2); font-size: var(--fs-body); }
.cm-dex-profile__text { margin: 0; line-height: 1.65; overflow-wrap: anywhere; white-space: normal; }

/* Verified traits and moves presentation */
.cm-dex-data { margin-top: var(--sp-3); min-width: 0; }
.cm-dex-traits-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cm-dex-trait-tag { display: inline-flex; align-items: center; padding: 4px 8px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; font-size: var(--fs-caption, 12px); font-weight: 500; }
.cm-dex-moves-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.cm-dex-move-card { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; background: rgba(255, 255, 255, 0.05); border-left: 3px solid var(--accent, #4fa3e3); border-radius: 2px; }
.cm-dex-move-card__header { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: var(--fs-body, 14px); }
/* The name takes the panel's own text colour: a fixed white vanished on the
   arcade theme's white panel (2026-10-28, names read as blank). */
.cm-dex-move-card__name { color: inherit; font-weight: 800; overflow-wrap: anywhere; }
.cm-dex-move-card__type { font-size: var(--fs-caption, 11px); opacity: 0.8; }
.cm-dex-move-card__meta { font-size: var(--fs-caption, 12px); opacity: 0.75; }

.cm-dex-hero { width: min(100%, 320px); height: 320px; max-height: 42dvh; justify-self: center; padding: 24px; box-sizing: border-box; }
.cm-dex-hero[hidden] { display: none; }
.cm-dex-hero__image { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Fit the drawn silhouette, not the canvas: display canvases differ in aspect and
 * transparent margin between batches, so containing the canvas drew some partners at
 * half the size of others (and needed a one-off shift for GR08). data-fit="silhouette"
 * carries the box measured per image (alpha > 32) as --bx/--by/--bw/--bh on the
 * --iw x --ih canvas. The box fills the stage height or its width up to 8 px from the
 * frame, centred, and stands on the floor --dex-floor above the bottom edge. The
 * 24 px stage padding stays; the artwork is never cropped or resampled. The drawn box
 * always lies inside the stage, so clipping there only trims transparent canvas, which
 * would otherwise cover (and take taps from) the controls around the stage. */
@supports (width: 1cqw) {
  .cm-dex-hero[data-fit="silhouette"] { position: relative; container-type: size; overflow: clip; }
  .cm-dex-hero[data-fit="silhouette"] > .cm-dex-hero__image {
    --dex-fit: min((100cqw + 32px) / var(--bw), (100cqh + 24px - var(--dex-floor, 24px)) / var(--bh));
    position: absolute; max-width: none; max-height: none;
    width: calc(var(--dex-fit) * var(--iw)); height: calc(var(--dex-fit) * var(--ih));
    left: calc(24px + 50cqw - var(--dex-fit) * (var(--bx) + var(--bw) / 2));
    top: calc(48px + 100cqh - var(--dex-floor, 24px) - var(--dex-fit) * (var(--by) + var(--bh)));
  }
}
.cm-vs2-database .cm-vs2-database__row.cm-vs2-database__row--thumb { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 96px; height: auto; gap: 6px; }
body[data-desktop-browse] .cm-vs2-root[data-screen="DATABASE"] .cm-vs2-database__row--thumb { min-height: 96px; }
.cm-vs2-database__row--thumb .cm-vs2-shop__name { min-width: 0; }
.cm-dex-list-thumb { display: block; width: 32px; height: 32px; object-fit: contain; flex: 0 0 32px; }

.cm-dex-hero__image[hidden], .cm-dex-hero__placeholder[hidden] { display: none; }
.cm-dex-hero__placeholder { display: grid; place-items: center; width: 100%; height: 100%; text-align: center; font-size: var(--fs-label); }


/* Database evolution cards: keep portrait and readable copy side by side.
   Only this section scrolls horizontally when its detail pane is too narrow;
   never squeeze an unrevealed name/status into a single-character column. */
.cm-vs2-root[data-screen="DATABASE"] .cm-dex-routes {
  grid-column: 1 / -1;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.cm-vs2-root[data-screen="DATABASE"] .cm-dex-routes__graph {
  min-width: calc(96px + 20px + 16rem);
  width: 100%;
  box-sizing: border-box;
}
.cm-vs2-root[data-screen="DATABASE"] .cm-dex-routes__targets {
  min-width: 16rem;
}
.cm-vs2-root[data-screen="DATABASE"] .cm-dex-routes__target {
  min-width: 16rem;
  box-sizing: border-box;
}

/* A starter without a Hunt instance adds the shared Shop status class.
   Its tablet grid-area:status must not create implicit Database columns. */
.cm-vs2-root[data-screen="DATABASE"] .cm-vs2-database__detail {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
}
.cm-vs2-root[data-screen="DATABASE"] .cm-vs2-database__detail > .cm-vs2-shop__status {
  grid-area: auto;
}

/* ---- Short landscape phones (2026-10-15): the globe gets the height ------
 * At 844x390 the header, the panel bar and the footer left the globe a
 * sliver that had to be scrolled to, and its node buttons overlapped. In a
 * short landscape view the page lede gives way (the globe carries its own
 * drag hint), the panel bar floats over the top of the globe, and the body
 * fits the screen instead of scrolling, so the whole globe is in view. */
@media (orientation: landscape) and (max-height: 460px) {
  body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen] .cm-vs2-header__copy > :is(.cm-vs2-subtitle, .cm-vs2-kicker) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen] .cm-vs2-header { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 2px; }
  body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen] .cm-vs2-title { font-size: var(--fs-title-2); line-height: var(--lh-title-2); }
  body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-body--gate { overflow: hidden; grid-template-rows: minmax(0, 1fr) auto; }
  body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-gate3d:not([data-view="fallback"]) { min-height: 0; }
  body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-gate3d:not([data-view="fallback"]) .cm-vs2-gate3d__bar {
    position: absolute; top: 0; left: 0; right: 0;
    border-bottom: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c-surface-1) 82%, transparent), transparent);
  }
  body[data-landscape-menu]:not([data-portrait-frame]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-gate3d__host { min-height: 0; }
}


/* One continuous five-row grid; the old annex container is not used. */
.cm-vs2-cage-board[data-product-grid="true"] { height: 452px; }
.cm-cage-expansion { flex-wrap: wrap; }

/* One touch-sized purchase lock per product row. No row rule or lower CTA block. */
.cm-vs2-cage-board[data-product-grid="true"] .cm-cage-row-lock {
  position: absolute;
  z-index: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.cm-vs2-cage-board[data-product-grid="true"] .cm-cage-row-lock:focus-visible {
  outline: 2px solid var(--c-accent-strong);
  outline-offset: 2px;
}
.cm-vs2-cage-board[data-product-grid="true"] .cm-cage-row-lock__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-line-2);
  border-radius: 50%;
  background: var(--c-surface-1);
  font-size: 18px;
}
.cm-cage-expansion[data-product-grid="true"] { display: none; }
.cm-dialog[data-variant="ranch-row-purchase"] .cm-dialog__message { white-space: pre-line; }
.cm-dialog[data-variant="ranch-row-purchase"] .cm-dialog__action { min-height: 44px; }

/* ---- Hex cage world editor (2026-10-26) ----------------------------------
 * Edit mode only. A faint honeycomb of every world position inside a pan/zoom
 * viewport; placed cages show their art across their footprint. Preview tints
 * say whether a placement or move fits before anything changes. */
.cm-hexworld { display: grid; gap: var(--sp-2); min-width: 0; }
.cm-hexworld[hidden] { display: none; }
.cm-hexworld__toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cm-hexworld__counter { margin: 0 auto 0 0; display: flex; align-items: baseline; gap: var(--sp-2); color: var(--c-text-2); font-size: var(--fs-label); }
.cm-hexworld__count { font-size: var(--fs-title-2); color: var(--c-text-1); font-variant-numeric: tabular-nums; }
.cm-hexworld__counter[data-full="true"] .cm-hexworld__count { color: var(--c-warning); }
.cm-hexworld__zoom { min-width: var(--target); }
.cm-hexworld__viewport {
  position: relative; overflow: hidden; height: min(56vh, 540px); min-height: 280px;
  border: 1px solid var(--c-line-2); border-radius: var(--r-card);
  background: var(--c-ground-raised) var(--bg-pattern);
  touch-action: none; cursor: grab; user-select: none;
}
.cm-hexworld__viewport[data-panning="true"] { cursor: grabbing; }
.cm-vs2-cage-board.cm-hexworld__board { position: absolute; left: 0; top: 0; width: 1232px; height: 1080px; transform-origin: 0 0; will-change: transform; }
.cm-hexworld__cell.cm-vs2-cage-slot { background-color: color-mix(in srgb, var(--c-accent) 7%, transparent); color: transparent; }
.cm-hexworld__cell.cm-vs2-cage-slot[data-filled="false"]:hover { background-color: color-mix(in srgb, var(--c-accent) 22%, transparent); }
.cm-hexworld__cell[data-filled="true"] { background-color: var(--c-surface-2); }
.cm-hexworld__cell[data-selected="true"] { filter: brightness(1.18) saturate(1.1); box-shadow: inset 0 0 0 4px var(--c-accent); }
.cm-hexworld__cell[data-selected="moving"] { opacity: .45; }
.cm-hexworld__cell[data-preview="ok"] { background-color: color-mix(in srgb, var(--c-success) 55%, transparent); }
.cm-hexworld__cell[data-preview="blocked"] { background-color: color-mix(in srgb, var(--c-danger) 60%, transparent); }
.cm-hexworld__cell[data-preview="full"] { background-color: color-mix(in srgb, var(--c-warning) 60%, transparent); }
.cm-hexworld__cell[data-preview="conflict"] { background-color: color-mix(in srgb, var(--c-danger) 60%, transparent); filter: saturate(1.4); }
.cm-hexworld__selection { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-accent-line); border-radius: var(--r-control); background: var(--c-accent-soft); }
.cm-hexworld__selection[hidden] { display: none; }
.cm-hexworld__selected, .cm-hexworld__note { margin: 0; font-size: var(--fs-body-sm); color: var(--c-text-1); }
.cm-hexworld__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cm-hexworld__land { display: flex; gap: var(--sp-2); }
.cm-hexworld__land .cm-hexworld__buy-land { position: static; width: auto; height: auto; min-width: 44px; min-height: 44px; padding: 0 var(--sp-3); }
.cm-vs2-root[data-hex-world="true"] .cm-cage-board-scroll { display: none; }