/* Arcade theme (Owner 2026-10-26, default): the arcade rebuild's UI on this game.
 *
 * Colours are tokens (ui/tokens.css, palette "arcade"); this sheet gives the
 * components their arcade structure. It changes nothing for other themes.
 *
 * Iron rules (from the rebuild's juicy-monster-ui skill):
 *   - pressables are ink-bordered physical keys: 6px slab, spring hover with a
 *     shimmer sweep, 45ms press that compresses the slab to 2px;
 *   - no backdrop-filter over the game, no blur shadows: dots and hard slabs;
 *   - only transform / opacity / box-shadow / filter animate; no transition: all;
 *   - hover motion only for fine pointers; reduced motion keeps colour only.
 */

/* ---- Stage ----------------------------------------------------------------- */
:root[data-theme="arcade"],
:root[data-theme="arcade"] body {
  background: var(--ax-stage);
  background-attachment: fixed;
}
:root[data-theme="arcade"] * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ---- Physical keys ------------------------------------------------------------ */
/* Default faces at zero specificity, so every tone rule below can recolour a key. */
:root[data-theme="arcade"] :where(*) {
  --key-face: var(--ax-white);
  --key-shade: var(--ax-white-sh);
  --key-ink: var(--ax-ink);
}
:root[data-theme="arcade"] :is(
  .cm-vs2-action, .cm-screen-primary, .cm-screen-back, .cm-vs5-action, .cm-choice,
  .cm-toolbar__tool-done, .cm-settings__close, .cm-settings__back, .cm-hexworld__zoom,
  .cm-hexworld__buy-land, :where(.cm-dialog, .cm-sheet__panel) button:where(:not(.cm-toolbar__cell)),
  .cm-toolbar__quick-entry, .cm-vs2-shop__tab, .cm-vs5-cube__face, .cm-vs2-database__chip, .cm-arcade-key
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: var(--target);
  border: var(--ax-border);
  border-radius: var(--r-control);
  background: var(--key-face);
  color: var(--key-ink);
  font-weight: var(--fw-heavy);
  box-shadow: var(--ax-hl), 0 var(--ax-depth) 0 var(--key-shade);
  transform: translateZ(0);
  transition:
    transform var(--ax-t-hover) var(--ax-spring),
    box-shadow var(--ax-t-hover) var(--ax-spring),
    filter var(--ax-t-hover) var(--ax-spring);
  touch-action: manipulation;
}
/* 45° shimmer, swept on hover */
:root[data-theme="arcade"] :is(
  .cm-vs2-action, .cm-screen-primary, .cm-screen-back, .cm-vs5-action, .cm-choice,
  .cm-toolbar__quick-entry, .cm-hexworld__buy-land, .cm-arcade-key
)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -40%;
  bottom: -40%;
  left: -80%;
  width: 60%;
  background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
  transform: rotate(45deg);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="arcade"] :is(
    .cm-vs2-action, .cm-screen-primary, .cm-screen-back, .cm-vs5-action, .cm-choice,
    .cm-toolbar__tool-done, .cm-settings__close, .cm-settings__back, .cm-hexworld__zoom,
    .cm-hexworld__buy-land, :where(.cm-dialog) button, .cm-toolbar__quick-entry, .cm-vs2-shop__tab, .cm-vs5-cube__face, .cm-vs2-database__chip, .cm-arcade-key
  ):hover:not(:disabled) {
    transform: translateY(-3px) scale(1.03) rotate(-0.8deg);
    box-shadow: var(--ax-hl), 0 9px 0 var(--key-shade);
    filter: saturate(1.12) brightness(1.04);
  }
  :root[data-theme="arcade"] :is(
    .cm-vs2-action, .cm-screen-primary, .cm-screen-back, .cm-vs5-action, .cm-choice,
    .cm-toolbar__quick-entry, .cm-hexworld__buy-land, .cm-arcade-key
  ):hover:not(:disabled)::after { animation: ax-shimmer 620ms var(--ax-snap) both; }
}
:root[data-theme="arcade"] :is(
  .cm-vs2-action, .cm-screen-primary, .cm-screen-back, .cm-vs5-action, .cm-choice,
  .cm-toolbar__tool-done, .cm-settings__close, .cm-settings__back, .cm-hexworld__zoom,
  .cm-hexworld__buy-land, :where(.cm-dialog) button, .cm-toolbar__quick-entry, .cm-vs2-shop__tab, .cm-vs5-cube__face, .cm-vs2-database__chip, .cm-arcade-key
):focus-visible {
  outline: none;
  box-shadow: var(--ax-hl), 0 var(--ax-depth) 0 var(--key-shade), var(--focus-ring);
}
/* Press: 45ms of travel; the slab compresses to 2px. Kept after :hover. */
:root[data-theme="arcade"] :is(
  .cm-vs2-action, .cm-screen-primary, .cm-screen-back, .cm-vs5-action, .cm-choice,
  .cm-toolbar__tool-done, .cm-settings__close, .cm-settings__back, .cm-hexworld__zoom,
  .cm-hexworld__buy-land, :where(.cm-dialog) button, .cm-toolbar__quick-entry, .cm-vs2-shop__tab, .cm-vs5-cube__face, .cm-vs2-database__chip, .cm-arcade-key
):active:not(:disabled) {
  transform: translateY(4px) scale(0.98);
  box-shadow: var(--ax-hl), 0 2px 0 var(--key-shade);
  transition-duration: var(--ax-t-press);
  transition-timing-function: var(--ax-snap);
}
:root[data-theme="arcade"] :is(
  .cm-vs2-action, .cm-screen-primary, .cm-screen-back, .cm-vs5-action, .cm-choice,
  .cm-hexworld__buy-land, .cm-toolbar__quick-entry, .cm-arcade-key
):disabled {
  filter: grayscale(0.85) brightness(0.85);
  transform: translateY(4px);
  box-shadow: var(--ax-hl), 0 2px 0 var(--key-shade);
}
@keyframes ax-shimmer {
  from { transform: translateX(0) rotate(45deg); opacity: 1; }
  to { transform: translateX(460%) rotate(45deg); opacity: 1; }
}

/* Faces: the one primary action is yellow, danger red, the rest cream. */
:root[data-theme="arcade"] :is(.cm-screen-primary, .cm-vs2-action--primary, .cm-vs5-action--primary, .cm-hexworld__buy-land, [data-variant="primary"]) {
  --key-face: var(--ax-yellow);
  --key-shade: var(--ax-yellow-sh);
}
:root[data-theme="arcade"] :is(.cm-vs2-action--danger, .cm-hexworld__remove, [data-variant="danger"]) {
  --key-face: var(--ax-red);
  --key-shade: var(--ax-red-sh);
  --key-ink: #fff;
  text-shadow: 0 2px 0 rgba(20, 20, 31, 0.55);
}

/* Chosen tab: yellow, pressed into the slab. */
:root[data-theme="arcade"] :is(.cm-vs2-shop__tab, .cm-vs5-cube__face):is([data-active="true"], [aria-selected="true"], [aria-pressed="true"], [aria-current="true"]) {
  --key-face: var(--ax-yellow);
  --key-shade: var(--ax-yellow-sh);
  color: var(--ax-ink);
  transform: translateY(3px);
  box-shadow: var(--ax-hl), 0 3px 0 var(--key-shade), 0 0 0 3px var(--ax-ink);
}
:root[data-theme="arcade"] .cm-ranch-zoom {
  border: var(--ax-border);
  border-radius: var(--r-control);
  background: var(--ax-white);
  color: var(--ax-ink);
  box-shadow: var(--ax-hl), 0 5px 0 var(--ax-white-sh);
  transition: transform var(--ax-t-hover) var(--ax-spring), box-shadow var(--ax-t-hover) var(--ax-spring);
}
:root[data-theme="arcade"] .cm-ranch-zoom:active:not(:disabled) { transform: translateY(4px); box-shadow: var(--ax-hl), 0 1px 0 var(--ax-white-sh); transition-duration: var(--ax-t-press); }

/* ---- Paper panels ------------------------------------------------------------ */
:root[data-theme="arcade"] :is(.cm-toolbar__menu, .cm-dialog, .cm-sheet__panel, .cm-toolbar__tool-hint, .cm-hexworld__selection) {
  border: var(--ax-border);
  background: var(--ax-paper);
  box-shadow: var(--ax-hl), var(--ax-hard);
  color: var(--ax-ink);
}
:root[data-theme="arcade"] .cm-toolbar__menu {
  border-radius: var(--r-sheet);
  animation: ax-pop 380ms var(--ax-spring) both;
}
:root[data-theme="arcade"] .cm-toolbar__entry {
  border: var(--ax-border);
  border-radius: var(--r-control);
  background: var(--ax-white);
  box-shadow: 0 4px 0 var(--ax-white-sh);
  transition: transform var(--ax-t-hover) var(--ax-spring), box-shadow var(--ax-t-hover) var(--ax-spring);
}
:root[data-theme="arcade"] .cm-toolbar__group[data-prominent="true"] .cm-toolbar__entry:nth-child(1) { background: var(--ax-orange); box-shadow: 0 4px 0 var(--ax-orange-sh); }
:root[data-theme="arcade"] .cm-toolbar__group[data-prominent="true"] .cm-toolbar__entry:nth-child(2) { background: var(--ax-red); box-shadow: 0 4px 0 var(--ax-red-sh); color: #fff; }
:root[data-theme="arcade"] .cm-toolbar__group[data-prominent="true"] .cm-toolbar__entry:nth-child(3) { background: var(--ax-yellow); box-shadow: 0 4px 0 var(--ax-yellow-sh); }
:root[data-theme="arcade"] .cm-toolbar__group[data-prominent="true"] .cm-toolbar__entry:nth-child(2) .cm-toolbar__entry-hint { color: rgba(255, 255, 255, 0.9); }
:root[data-theme="arcade"] .cm-toolbar__entry:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ax-white-sh); }
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="arcade"] .cm-toolbar__entry:hover:not(:disabled) { transform: translateY(-2px) rotate(-0.5deg); }
}
:root[data-theme="arcade"] .cm-toolbar__group-title { color: var(--ax-ink); font-weight: var(--fw-heavy); }
:root[data-theme="arcade"] .cm-toolbar__entry-hint { color: var(--c-text-3); }
@keyframes ax-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* ---- Status bar: floating arcade pills over the stage -------------------------- */
:root[data-theme="arcade"] .cm-status-bar,
:root[data-theme="arcade"] .cm-status-bar[data-screen="RAISING_HOME"] {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  pointer-events: none;
}
:root[data-theme="arcade"] .cm-status-bar > * { pointer-events: auto; }
:root[data-theme="arcade"] :is(.cm-status-bar__season, .cm-status-bar__day, .cm-status-bar__currencies, .cm-status-bar__matches, .cm-status-bar__save, .cm-status-bar__mode) {
  border: var(--ax-border);
  border-radius: 999px;
  background: var(--ax-paper);
  box-shadow: var(--ax-hl), 0 4px 0 var(--ax-ink);
  color: var(--ax-ink);
  font-weight: var(--fw-heavy);
  padding: 3px 12px;
}
:root[data-theme="arcade"] body:has(#cm-root) .cm-status-bar__currencies {
  border: var(--ax-border);
  border-radius: 999px;
  background: var(--ax-yellow);
  box-shadow: var(--ax-hl), 0 4px 0 var(--ax-ink);
  padding: 2px 12px 2px 6px;
}
:root[data-theme="arcade"] body:has(#cm-root) :is(.cm-status-bar__bits-value, .cm-status-bar__diamond-text, .cm-status-bar__compact-value) {
  color: var(--ax-ink);
  font-weight: var(--fw-heavy);
  text-shadow: none;
}
:root[data-theme="arcade"] .cm-status-bar__diamond { color: var(--ax-ink); }
:root[data-theme="arcade"] .cm-status-bar__time {
  padding: 3px 12px;
  border: var(--ax-border);
  border-radius: 999px;
  background: var(--ax-ink);
  color: var(--ax-yellow);
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums;
}
:root[data-theme="arcade"] .cm-status-bar__matches { background: var(--ax-cyan); box-shadow: var(--ax-hl), 0 4px 0 var(--ax-cyan-sh), 0 4px 0 2px var(--ax-ink); }
:root[data-theme="arcade"] .cm-status-bar__bits-value { color: var(--ax-ink); font-variant-numeric: tabular-nums; }

/* ---- Toolbar: care-tool rail + quick dock ---------------------------------------- */
:root[data-theme="arcade"] .cm-toolbar { pointer-events: none; }
/* Only a shown toolbar becomes a flex column; [hidden] must keep display: none. */
:root[data-theme="arcade"] .cm-toolbar:not([hidden]) { display: flex; flex-direction: column; }
:root[data-theme="arcade"] .cm-toolbar > * { pointer-events: auto; }
:root[data-theme="arcade"] .cm-toolbar__rail {
  gap: 8px;
  width: min(100% - 16px, 760px);
  margin: 0 auto calc(8px + var(--safe-bottom));
  padding: 10px 10px 14px;
  border: var(--ax-border);
  border-radius: 22px;
  background: var(--ax-ink-2);
  background-image: var(--ax-dots-light);
  box-shadow: var(--ax-hl), 0 6px 0 var(--ax-ink);
}
:root[data-theme="arcade"] .cm-toolbar__cell {
  --tile: var(--ax-white);
  --tile-sh: var(--ax-white-sh);
  min-height: 62px;
  border: var(--ax-border);
  border-radius: 14px;
  background: var(--tile);
  color: var(--ax-ink);
  box-shadow: var(--ax-hl), 0 5px 0 var(--tile-sh);
  transition: transform var(--ax-t-hover) var(--ax-spring), box-shadow var(--ax-t-hover) var(--ax-spring), filter var(--ax-t-hover) var(--ax-spring);
}
:root[data-theme="arcade"] .cm-toolbar__cell[data-icon="hand"]          { --tile: var(--ax-white);  --tile-sh: var(--ax-white-sh); }
:root[data-theme="arcade"] .cm-toolbar__cell[data-icon="feed"]          { --tile: var(--ax-orange); --tile-sh: var(--ax-orange-sh); }
:root[data-theme="arcade"] .cm-toolbar__cell[data-icon="protein"]       { --tile: var(--ax-yellow); --tile-sh: var(--ax-yellow-sh); }
:root[data-theme="arcade"] .cm-toolbar__cell[data-icon="clean"]         { --tile: var(--ax-cyan);   --tile-sh: var(--ax-cyan-sh); }
:root[data-theme="arcade"] .cm-toolbar__cell[data-icon="woundMedicine"] { --tile: var(--ax-pink);   --tile-sh: var(--ax-pink-sh); }
:root[data-theme="arcade"] .cm-toolbar__cell[data-icon="medicine"]      { --tile: var(--ax-green);  --tile-sh: var(--ax-green-sh); }
:root[data-theme="arcade"] .cm-toolbar__cell[data-icon="manage"]        { --tile: var(--ax-paper);  --tile-sh: var(--ax-white-sh); }
:root[data-theme="arcade"] .cm-toolbar__cell[data-icon="system"]        { --tile: var(--ax-paper);  --tile-sh: var(--ax-white-sh); }
:root[data-theme="arcade"] .cm-toolbar__cell[data-menu-id="MANAGEMENT"]::after { display: none; }
:root[data-theme="arcade"] .cm-toolbar__cell[data-menu-id="MANAGEMENT"] { margin-left: 8px; }
:root[data-theme="arcade"] .cm-toolbar__cell-label { color: var(--ax-ink); font-weight: var(--fw-heavy); }
:root[data-theme="arcade"] .cm-toolbar__cell[data-icon="woundMedicine"] .cm-toolbar__cell-label { color: #fff; text-shadow: 0 1px 0 var(--ax-ink); }
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="arcade"] .cm-toolbar__cell:hover:not(:disabled) {
    background: var(--tile);
    color: var(--ax-ink);
    transform: translateY(-3px) rotate(-1deg);
    box-shadow: var(--ax-hl), 0 8px 0 var(--tile-sh);
  }
}
:root[data-theme="arcade"] .cm-toolbar__cell:active:not(:disabled) {
  transform: translateY(4px) scale(0.97);
  box-shadow: var(--ax-hl), 0 1px 0 var(--tile-sh);
  transition-duration: var(--ax-t-press);
}
:root[data-theme="arcade"] .cm-toolbar__cell[aria-pressed="true"],
:root[data-theme="arcade"] .cm-toolbar__cell[aria-expanded="true"] {
  border-color: var(--ax-ink);
  background: var(--tile);
  color: var(--ax-ink);
  transform: translateY(-4px);
  box-shadow: var(--ax-hl), 0 9px 0 var(--tile-sh), 0 0 0 4px var(--ax-yellow), 0 0 0 7px var(--ax-ink);
}
:root[data-theme="arcade"] .cm-toolbar__cell:disabled { opacity: 0.45; filter: grayscale(0.7); }
:root[data-theme="arcade"] .cm-toolbar__stock {
  top: -8px;
  left: auto;
  right: -6px;
  height: 20px;
  border: 2px solid var(--ax-ink);
  border-radius: 999px;
  background: var(--ax-ink);
  color: #fff;
  font-weight: var(--fw-heavy);
  line-height: 16px;
}
:root[data-theme="arcade"] .cm-toolbar__cell[data-owned="0"] .cm-toolbar__stock { background: var(--ax-red); color: #fff; }
:root[data-theme="arcade"] .cm-toolbar__tool-hint { border-radius: 999px; }
:root[data-theme="arcade"] .cm-toolbar__tool-name { color: var(--ax-purple-sh); }

/* One-tap destinations above the rail (the rebuild's main dock). */
:root[data-theme="arcade"] .cm-toolbar__quick:not([hidden]) {
  order: -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: min(100% - 16px, 560px);
  margin: 0 auto 10px;
}
:root[data-theme="arcade"] .cm-toolbar__quick-entry {
  display: grid;
  grid-template-columns: auto;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 58px;
  padding: 6px 4px 8px;
  border-radius: 16px;
  font-size: var(--fs-body);
}
:root[data-theme="arcade"] .cm-toolbar__quick-entry .cm-toolbar__entry-icon { display: none; }
:root[data-theme="arcade"] .cm-toolbar__quick-entry .cm-toolbar__entry-label { font-size: var(--fs-body); font-weight: var(--fw-heavy); line-height: 1.1; }
:root[data-theme="arcade"] .cm-toolbar__quick-entry .cm-toolbar__entry-hint { display: none; }
:root[data-theme="arcade"] .cm-toolbar__quick-entry[data-quick-id="hunt"]     { --key-face: var(--ax-orange); --key-shade: var(--ax-orange-sh); }
:root[data-theme="arcade"] .cm-toolbar__quick-entry[data-quick-id="battle"]   { --key-face: var(--ax-red);    --key-shade: var(--ax-red-sh); --key-ink: #fff; text-shadow: 0 2px 0 rgba(20, 20, 31, 0.55); }
:root[data-theme="arcade"] .cm-toolbar__quick-entry[data-quick-id="shop"]     { --key-face: var(--ax-yellow); --key-shade: var(--ax-yellow-sh); }
:root[data-theme="arcade"] .cm-toolbar__quick-entry[data-quick-id="database"] { --key-face: var(--ax-purple); --key-shade: var(--ax-purple-sh); --key-ink: #fff; text-shadow: 0 2px 0 rgba(20, 20, 31, 0.55); }

/* ---- Screens: titles on the stage, paper cards below ------------------------------ */
:root[data-theme="arcade"] :is(.cm-vs2-title, .cm-vs5-title) {
  color: #fff;
  font-weight: var(--fw-heavy);
  -webkit-text-stroke: 6px var(--ax-ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ax-ink);
  letter-spacing: 0.02em;
}
:root[data-theme="arcade"] :is(.cm-vs2-kicker, .cm-vs5-kicker):not([hidden]) {
  display: inline-block;
  justify-self: start;
  align-self: start;
  width: fit-content;
  padding: 2px 10px;
  border: 2px solid var(--ax-ink);
  border-radius: 999px;
  background: var(--ax-ink);
  color: var(--ax-yellow);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
}
:root[data-theme="arcade"] :is(.cm-vs2-header, .cm-vs2-footer, .cm-screen-footer, .cm-vs5-footer, .cm-vs5-header) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
:root[data-theme="arcade"] .cm-vs2-header__copy :is(p, span):not(.cm-vs2-kicker) { color: #fff; text-shadow: 0 2px 0 var(--ax-ink); }
:root[data-theme="arcade"] :is(
  .cm-vs2-shop__row, .cm-vs2-database__row, .cm-vs2-shop__detail, .cm-vs2-database__detail,
  .cm-schedule-fixture, .cm-tamer-fields, .cm-vs2-gate, .cm-hunt-controls-panel, .cm-vs5-practice-member,
  .cm-setting, .cm-settings__category
) {
  border: var(--ax-border);
  border-radius: var(--r-card);
  background: var(--ax-paper);
  box-shadow: var(--ax-hl), 0 5px 0 var(--ax-ink);
  color: var(--ax-ink);
}
/* Card motion (deal, tilt, lift) lives in ui/arcadeMotion.css; the skin deepens the slab. */
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="arcade"] :is(.cm-vs2-shop__row, .cm-vs2-database__row, .cm-vs2-gate):hover { box-shadow: var(--ax-hl), 0 8px 0 var(--ax-ink); }
}
:root[data-theme="arcade"] :is(.cm-vs2-shop__row, .cm-vs2-database__row)[aria-selected="true"],
:root[data-theme="arcade"] :is(.cm-vs2-shop__row, .cm-vs2-database__row)[aria-pressed="true"] {
  background: var(--ax-yellow);
  box-shadow: var(--ax-hl), 0 5px 0 var(--ax-yellow-sh), 0 0 0 3px var(--ax-ink);
}
:root[data-theme="arcade"] .cm-vs2-shop__status {
  border: var(--ax-border);
  border-radius: 999px;
  background: var(--ax-white);
  box-shadow: 0 4px 0 var(--ax-ink);
  color: var(--ax-ink);
  font-weight: var(--fw-heavy);
}

/* Dex: chips are small keys, the chosen stage yellow; the sheet is paper. */
:root[data-theme="arcade"] .cm-vs2-database__chip { border: var(--ax-border); background: var(--ax-white); color: var(--ax-ink); font-weight: var(--fw-heavy); box-shadow: var(--ax-hl), 0 4px 0 var(--ax-white-sh); transition: transform var(--ax-t-hover) var(--ax-spring), box-shadow var(--ax-t-hover) var(--ax-spring); }
:root[data-theme="arcade"] .cm-vs2-database__chip[aria-pressed="true"] { background: var(--ax-yellow); box-shadow: var(--ax-hl), 0 4px 0 var(--ax-yellow-sh); }
:root[data-theme="arcade"] .cm-vs2-database__chip:active { transform: translateY(3px); box-shadow: var(--ax-hl), 0 1px 0 var(--ax-white-sh); transition-duration: var(--ax-t-press); }
@media (hover: hover) and (pointer: fine) { :root[data-theme="arcade"] .cm-vs2-database__chip:hover { transform: translateY(-2px) rotate(-1deg); } }
:root[data-theme="arcade"] .cm-vs2-database__sheet-scrim { background: rgba(20, 20, 31, 0.5) var(--ax-dots); }
:root[data-theme="arcade"] .cm-vs2-database__sheet-panel { border: var(--ax-border); background: var(--ax-paper); box-shadow: var(--ax-hl), 0 8px 0 var(--ax-ink); animation: ax-pop 380ms var(--ax-spring) both; }
:root[data-theme="arcade"] .cm-vs2-database__row .cm-dex-list-thumb,
:root[data-theme="arcade"] .cm-vs2-database__row:not(.cm-vs2-database__row--thumb)::before { border: 2px solid var(--ax-ink); background: #e9f6ff; }

/* Shop tabs wear the rebuild's category faces. */
:root[data-theme="arcade"] .cm-vs2-shop__tab[data-category="TRAINING_GOODS"] { --key-face: var(--ax-orange); --key-shade: var(--ax-orange-sh); }
:root[data-theme="arcade"] .cm-vs2-shop__tab[data-category="HUNT_ITEMS"]     { --key-face: var(--ax-green);  --key-shade: var(--ax-green-sh); }
:root[data-theme="arcade"] .cm-vs2-shop__tab[data-category="PLUGINS"]        { --key-face: var(--ax-cyan);   --key-shade: var(--ax-cyan-sh); }
:root[data-theme="arcade"] .cm-vs2-shop__tab[data-category="CAGES"]          { --key-face: var(--ax-purple); --key-shade: var(--ax-purple-sh); --key-ink: #fff; text-shadow: 0 2px 0 rgba(20, 20, 31, 0.55); }
:root[data-theme="arcade"] .cm-vs2-shop__tab:not([data-active="true"]) { filter: saturate(0.55) brightness(1.08); }
:root[data-theme="arcade"] .cm-vs2-shop__sheet-scrim { background: rgba(20, 20, 31, 0.5) var(--ax-dots); }
:root[data-theme="arcade"] .cm-vs2-shop__sheet .cm-vs2-shop__detail { border: var(--ax-border); background: var(--ax-paper); box-shadow: var(--ax-hl), 0 8px 0 var(--ax-ink); animation: ax-pop 380ms var(--ax-spring) both; }
:root[data-theme="arcade"] .cm-vs2-shop__detail-art { border: var(--ax-border); border-radius: var(--r-card); background: var(--ax-ink-2) var(--ax-dots-light); }
:root[data-theme="arcade"] .cm-vs2-shop__card-art { border: 2px solid var(--ax-ink); background: #e9f6ff; }
:root[data-theme="arcade"] .cm-vs2-shop__row { border-radius: var(--r-card); }
:root[data-theme="arcade"] .cm-vs2-shop__status[data-tone="ok"] { background: #c9ffd9; }
:root[data-theme="arcade"] .cm-vs2-shop__status[data-tone="refused"] { background: #ffe0b3; }

/* Captions that sit straight on the stage or on dark panels read white with an ink edge. */
:root[data-theme="arcade"] :is(.cm-vs2-gate3d__bar-copy, .cm-vs2-gate3d__hint, .cm-screen-lede, .cm-cage-board-hint, .cm-vs5-cube__note, .cm-vs2-database__filter > span) {
  color: #fff;
  text-shadow: 0 2px 0 var(--ax-ink);
}

/* Bars: chunky ink troughs, spring fills. */
:root[data-theme="arcade"] :is(.cm-vs5-fighter__hp, .cm-vs5-meter, .cm-vs2-field__progress) {
  border: 3px solid var(--ax-ink);
  border-radius: 8px;
  background-color: var(--ax-ink-2);
}
:root[data-theme="arcade"] :is(.cm-vs5-meter__fill, .cm-vs2-field__progress-fill) {
  transition-timing-function: var(--ax-spring);
}

/* ---- Settings and dialogs ------------------------------------------------------- */
:root[data-theme="arcade"] .cm-settings__content { background: var(--ax-paper-2); color: var(--ax-ink); }
:root[data-theme="arcade"] .cm-settings {
  background: var(--ax-stage);
  color: var(--ax-ink);
}
:root[data-theme="arcade"] :is(.cm-dialog, .cm-sheet__panel) { border-radius: var(--r-sheet); animation: ax-pop 380ms var(--ax-spring) both; }
:root[data-theme="arcade"] :is(.cm-dialog__scrim, .cm-sheet__scrim, .cm-sheet::before) { background: rgba(20, 20, 31, 0.5) var(--ax-dots); }

/* ---- Hex world editor ------------------------------------------------------------ */
:root[data-theme="arcade"] .cm-hexworld__viewport {
  border: var(--ax-border);
  border-radius: var(--r-card);
  background: var(--ax-ink-2) var(--ax-dots-light);
  box-shadow: var(--ax-hl), 0 6px 0 var(--ax-ink);
}
:root[data-theme="arcade"] .cm-hexworld__counter:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  border: var(--ax-border);
  border-radius: 999px;
  background: var(--ax-yellow);
  box-shadow: 0 4px 0 var(--ax-ink);
  color: var(--ax-ink);
  font-weight: var(--fw-heavy);
}
:root[data-theme="arcade"] .cm-hexworld__counter[data-full="true"] { background: var(--ax-red); color: #fff; }
:root[data-theme="arcade"] .cm-hexworld__cell[data-preview="ok"]      { animation: ax-tile-land 360ms var(--ax-spring) both; }

@keyframes ax-tile-land {
  0% { transform: scale(1.18, 0.82); }
  55% { transform: scale(0.92, 1.08); }
  100% { transform: none; }
}

/* ---- Phone portrait ---------------------------------------------------------------- */
@media (max-width: 600px) {
  :root[data-theme="arcade"] .cm-toolbar__rail { gap: 4px; width: calc(100% - 8px); padding: 6px 6px 10px; border-radius: 16px; }
  :root[data-theme="arcade"] .cm-toolbar__cell { min-height: 54px; border-radius: 11px; border-width: 2px; }
  :root[data-theme="arcade"] .cm-toolbar__cell::before { width: 28px; height: 28px; }
  :root[data-theme="arcade"] .cm-toolbar__cell[data-menu-id="MANAGEMENT"] { margin-left: 2px; }
  :root[data-theme="arcade"] .cm-toolbar__quick:not([hidden]) { gap: 6px; width: calc(100% - 8px); margin-bottom: 8px; }
  :root[data-theme="arcade"] .cm-toolbar__quick-entry { min-height: 48px; padding: 4px 2px 6px; border-radius: 13px; }
  :root[data-theme="arcade"] .cm-toolbar__quick-entry .cm-toolbar__entry-label { font-size: var(--fs-body-sm); }
}

/* ---- Phone landscape: the stage is short, so the dock stays one row tall ---------------- */
@media (max-height: 500px) and (orientation: landscape) {
  :root[data-theme="arcade"] .cm-toolbar:not([hidden]) { display: flex; flex-direction: row; align-items: flex-end; justify-content: center; gap: 8px; padding: 0 max(8px, var(--safe-right)) 0 max(8px, var(--safe-left)); }
  :root[data-theme="arcade"] .cm-toolbar__rail { width: auto; flex: 0 1 560px; margin: 0 0 calc(6px + var(--safe-bottom)); padding: 5px 6px 8px; gap: 4px; }
  :root[data-theme="arcade"] .cm-toolbar__cell { min-height: 46px; padding: 2px; }
  :root[data-theme="arcade"] .cm-toolbar__cell::before { width: 24px; height: 24px; }
  :root[data-theme="arcade"] .cm-toolbar__cell-label { font-size: 10px; }
  :root[data-theme="arcade"] .cm-toolbar__quick:not([hidden]) { order: -1; flex: 0 0 auto; width: auto; grid-template-columns: repeat(2, 72px); gap: 6px; margin: 0 0 calc(6px + var(--safe-bottom)); }
  :root[data-theme="arcade"] .cm-toolbar__quick-entry { min-height: 34px; padding: 2px 4px 4px; grid-auto-flow: column; gap: 4px; }
    :root[data-theme="arcade"] .cm-toolbar__quick-entry .cm-toolbar__entry-label { font-size: var(--fs-label); }
}

/* ---- Reduced motion: colour and opacity stay, travel goes ----------------------------- */
:root[data-theme="arcade"][data-motion="reduced"] *,
:root[data-theme="arcade"][data-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
}
:root[data-theme="arcade"][data-motion="reduced"] :is(
  .cm-vs2-action, .cm-screen-primary, .cm-screen-back, .cm-vs5-action, .cm-choice, .cm-toolbar__cell,
  .cm-toolbar__entry, .cm-toolbar__quick-entry, .cm-hexworld__buy-land, .cm-arcade-key,
  .cm-vs2-shop__row, .cm-vs2-database__row, .cm-vs2-gate
):is(:hover, :active, [aria-pressed="true"], [aria-expanded="true"]) {
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="arcade"] *, :root[data-theme="arcade"] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* ==== Battle UI pass 2026-10-28 (OWNER_APPROVED_ADAPTATION, presentation only) ====
 * Battle menu: a neon LIVE banner for the real-time arena, a spotlit cube with
 * LED mode keys, VS ticket cards for the matches, and the multi-round cups as
 * two championship cartridges. Every id, class, label and binding is kept. */

/* -- Title: big white with an amber slab under it. -- */
:root[data-theme="arcade"] .cm-vs5-root[data-screen="BATTLE_SELECT"] .cm-vs5-header > .cm-vs5-title {
  position: relative;
  font-size: clamp(30px, 8.4vw, 42px);
  line-height: 1.1;
}
:root[data-theme="arcade"] .cm-vs5-root[data-screen="BATTLE_SELECT"] .cm-vs5-header > .cm-vs5-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 7px;
  margin-top: 6px;
  border: 2px solid var(--ax-ink);
  border-radius: 2px 8px 2px 8px;
  background: linear-gradient(90deg, var(--ax-yellow), var(--ax-orange));
  box-shadow: 0 3px 0 var(--ax-ink);
}

/* -- Data Arena: the live-action banner. Slanted cyan / violet armour, a 3D
 *    slab, a scan light sweeping across and the LIVE badge on the right. -- */
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-data-arena:not([hidden]) {
  --key-face: #101a35;
  --key-shade: #05070f;
  --key-ink: #e9fbff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  min-height: 64px;
  padding: 9px 12px 11px 18px;
  border-radius: 6px 22px 6px 22px;
  background:
    linear-gradient(112deg, rgba(42, 216, 255, 0.28) 0, transparent 46%),
    linear-gradient(292deg, rgba(196, 92, 255, 0.38) 0, transparent 50%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
    #101a35;
  box-shadow: inset 0 0 0 2px #2ad8ff, inset 0 0 0 4px #0b0f1e, inset 0 0 0 5px rgba(196, 92, 255, 0.85), 0 6px 0 var(--key-shade);
  text-align: left;
}
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-data-arena > span:first-child {
  grid-column: 1;
  grid-row: 1;
  color: #fff;
  font-size: clamp(19px, 5.2vw, 24px);
  letter-spacing: 0.06em;
  text-shadow: 0 2px 0 #05070f, 0 0 10px rgba(42, 216, 255, 0.55);
}
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-data-arena > .cm-vs5-match__fee {
  grid-column: 1 / -1;
  grid-row: 2;
  color: #8ff2ff;
  font-size: var(--fs-label);
  font-weight: 800;
}
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-data-arena[data-badge]::before {
  content: attr(data-badge);
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  padding: 5px 9px;
  border: 2px solid #05070f;
  border-radius: 4px 12px 4px 12px;
  background: linear-gradient(180deg, #ffe066, #ffb21e);
  color: #241400;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: 0 3px 0 #05070f;
}
/* The scan light: the key's shimmer layer, swept slowly forever (a pseudo
 * element, so the button's own box never moves under input gates). */
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-data-arena:not([hidden])::after {
  opacity: 0.55;
  background: linear-gradient(90deg, transparent 0, rgba(143, 242, 255, 0.55) 50%, transparent 100%);
  animation: cm-arena-scan 3.4s var(--ax-snap) infinite;
}
@keyframes cm-arena-scan {
  0% { transform: translateX(0) rotate(45deg); }
  60%, 100% { transform: translateX(520%) rotate(45deg); }
}
/* A hidden action button stays hidden; its own display rules must not win. */
.cm-vs5-root :is(.cm-vs5-action, .cm-vs5-data-arena)[hidden] { display: none !important; }

/* -- The cube on a spotlit arena floor; the mode keys get LED indicators. -- */
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-cube:not([hidden]) { position: relative; isolation: isolate; }
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-cube::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -4% 0 auto;
  height: 74%;
  background:
    radial-gradient(ellipse 52% 46% at 50% 46%, rgba(255, 226, 140, 0.34), rgba(255, 226, 140, 0) 70%),
    radial-gradient(ellipse 40% 8% at 50% 96%, rgba(14, 16, 26, 0.55), rgba(14, 16, 26, 0) 72%);
  pointer-events: none;
}
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-cube__face {
  box-shadow: var(--ax-hl), 0 5px 0 var(--key-shade);
}
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-cube__face::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 4px;
  left: 50%;
  width: 18px;
  height: 4px;
  margin-left: -9px;
  border-radius: 2px;
  background: rgba(20, 20, 31, 0.35);
  pointer-events: none;
}
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-cube__face[aria-pressed="true"] {
  transform: translateY(4px);
  box-shadow: var(--ax-hl), 0 1px 0 var(--key-shade), 0 0 0 3px var(--ax-ink), 0 0 0 6px #6ff7ff;
  filter: none;
}
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-cube__face[aria-pressed="true"]::before {
  background: #eaffff;
  box-shadow: 0 0 0 2px #2ad8ff, 0 0 8px 2px rgba(111, 247, 255, 0.9);
}

/* -- Matches: VS ticket cards. Crest | name over the entry-fee pill | gold
 *    bounty | arrow. The list item drops its own paper so a row is one card. -- */
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-match {
  border: 0;
  border-radius: 8px 20px 8px 20px;
  background: none;
  box-shadow: none;
}
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-match > .cm-vs5-match__enter {
  --key-face: var(--ax-paper);
  --key-shade: var(--ax-ink);
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto 14px;
  grid-template-rows: auto auto;
  grid-template-areas: "crest name name arrow" "crest fee payout arrow";
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
  width: 100%;
  min-height: 78px;
  padding: 8px 10px 8px 8px;
  border-radius: 8px 20px 8px 20px;
  background:
    linear-gradient(90deg, transparent 0 73px, rgba(20, 20, 31, 0.28) 73px 74px, transparent 74px) 0 0 / 100% 7px repeat-y,
    linear-gradient(180deg, #fffdf4, var(--ax-paper));
  font-size: var(--fs-body);
  text-align: left;
  line-height: 1.25;
}
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-match__crest {
  grid-area: crest;
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 3px solid var(--ax-ink);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, #8ff2ff, #a259ff);
  box-shadow: 0 3px 0 var(--ax-ink);
  overflow: hidden;
}
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-match__crest::after {
  content: "VS";
  position: absolute;
  right: -2px;
  bottom: -2px;
  padding: 1px 4px 0;
  border: 2px solid var(--ax-ink);
  border-radius: 6px 0 10px 0;
  background: var(--ax-red);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  font-style: italic;
  line-height: 1.2;
}
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-match__crest:not(:has(img))::after {
  position: static;
  padding: 2px 5px;
  border-radius: 6px;
  font-size: 17px;
  transform: rotate(-8deg);
}
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-match__crest-art {
  width: 46px;
  height: 46px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: brightness(0);
  opacity: 0.88;
}
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-match__title { grid-area: name; font-size: var(--fs-body); font-weight: 900; line-height: 1.25; }
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-match__enter > .cm-vs5-match__fee {
  grid-area: fee;
  justify-self: start;
  padding: 1px 8px;
  border: 2px solid var(--ax-ink);
  border-radius: 999px;
  background: #e9f6ff;
  color: var(--ax-ink);
  font-size: var(--fs-label);
  font-weight: 800;
  white-space: nowrap;
}
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-match__enter > .cm-vs5-match__payout {
  grid-area: payout;
  justify-self: end;
  padding: 3px 9px;
  white-space: nowrap;
  border: 2px solid var(--ax-ink);
  border-radius: 4px 12px 4px 12px;
  background: linear-gradient(180deg, #fff0a0 0 30%, var(--ax-yellow) 30% 72%, #f0a51a 72%);
  color: #3a2400;
  font-size: var(--fs-label);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 3px 0 var(--ax-ink);
}
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-match__enter::before {
  content: "";
  grid-area: arrow;
  width: 10px;
  height: 16px;
  background: var(--ax-ink);
  -webkit-mask: var(--icon-chevron-left) center / contain no-repeat;
  mask: var(--icon-chevron-left) center / contain no-repeat;
  transform: scaleX(-1);
}
/* The first tickets deal in one after another. */
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-matches > .cm-vs5-match { animation: cm-deal 420ms var(--ax-spring) both; }
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-matches > .cm-vs5-match:nth-child(2) { animation-delay: 40ms; }
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-matches > .cm-vs5-match:nth-child(3) { animation-delay: 80ms; }
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-matches > .cm-vs5-match:nth-child(4) { animation-delay: 120ms; }
:root[data-theme="arcade"] .cm-vs5-root .cm-vs5-matches > .cm-vs5-match:nth-child(n + 5) { animation-delay: 160ms; }

/* -- The way back sits on a solid dotted bar, and the list ends above it. -- */
:root[data-theme="arcade"] body .cm-vs5-root .cm-vs5-shell > .cm-vs5-footer {
  z-index: 5;
  padding-top: 14px;
  background: linear-gradient(180deg, rgba(22, 20, 42, 0) 0, rgba(22, 20, 42, 0.92) 12px, #16142a 26px);
  border-top: 0;
}

/* -- Multi-round cups: two championship cartridges. Platinum / emerald for the
 *    Championship, black-gold / crimson for the World. The empty paper frame
 *    around them goes; the cards fill the stage. -- */
:root[data-theme="arcade"] body .cm-championship-board:has(> .cm-championship-entry) {
  gap: 18px;
  padding: 4px 2px 12px;
  border: 0;
  background: none;
}
:root[data-theme="arcade"] body .cm-championship-entry {
  --cart-a: #e9fff6;
  --cart-b: #9fe9c8;
  --cart-edge: #1d8a5a;
  --cart-ink: #0f2a1f;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: clamp(168px, 26vh, 236px);
  padding: 18px 16px 18px 14px;
  border: 3px solid var(--ax-ink);
  border-radius: 10px 28px 10px 28px;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.75) 0 18%, transparent 18% 22%, rgba(255, 255, 255, 0.35) 22% 26%, transparent 26%),
    linear-gradient(160deg, var(--cart-a), var(--cart-b));
  color: var(--cart-ink);
  box-shadow: inset 0 0 0 3px var(--cart-edge), inset 0 0 0 5px rgba(255, 255, 255, 0.6), 0 7px 0 var(--ax-ink);
  overflow: hidden;
  transition: transform var(--ax-t-hover) var(--ax-spring), box-shadow var(--ax-t-hover) var(--ax-spring);
}
:root[data-theme="arcade"] body .cm-championship-entry[data-category="1"] {
  --cart-a: #3a2a14;
  --cart-b: #120c08;
  --cart-edge: #e2a21f;
  --cart-ink: #fff3d6;
  background:
    linear-gradient(118deg, rgba(255, 210, 63, 0.24) 0 18%, transparent 18% 22%, rgba(255, 77, 94, 0.22) 22% 26%, transparent 26%),
    radial-gradient(ellipse 70% 60% at 85% 100%, rgba(255, 77, 94, 0.4), transparent 70%),
    linear-gradient(160deg, var(--cart-a), var(--cart-b));
  box-shadow: inset 0 0 0 3px var(--cart-edge), inset 0 0 0 5px #a3192a, 0 7px 0 var(--ax-ink);
}
:root[data-theme="arcade"] body .cm-championship-entry:active:not(:disabled) {
  transform: translateY(4px) scale(0.99);
  box-shadow: inset 0 0 0 3px var(--cart-edge), inset 0 0 0 5px rgba(255, 255, 255, 0.6), 0 2px 0 var(--ax-ink);
  transition-duration: var(--ax-t-press);
}
:root[data-theme="arcade"] body .cm-championship-cup {
  position: relative;
  width: 96px;
  height: 96px;
  border: 3px solid var(--ax-ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, #fffbe0 0 12%, rgba(255, 251, 224, 0) 30%),
    conic-gradient(from 200deg, #fff2b0, #d9a11e, #fff6c8, #b98012, #ffe27a, #fff2b0);
  box-shadow: inset 0 -6px 0 rgba(120, 70, 0, 0.35), 0 5px 0 var(--ax-ink);
  font-size: 50px;
  line-height: 1;
}
:root[data-theme="arcade"] body .cm-championship-cup::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -12px;
  height: 12px;
  border: 3px solid var(--ax-ink);
  border-radius: 3px 3px 8px 8px;
  background: linear-gradient(180deg, #c9d2dc, #7c8896);
}
:root[data-theme="arcade"] body .cm-championship-entry[data-category="1"] .cm-championship-cup::after { background: linear-gradient(180deg, #ffd23f, #a36a00); }
:root[data-theme="arcade"] body .cm-championship-entry__copy { gap: 8px; }
:root[data-theme="arcade"] body .cm-championship-entry__name {
  font-size: clamp(24px, 6.6vw, 32px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
:root[data-theme="arcade"] body .cm-championship-entry[data-category="1"] .cm-championship-entry__name { color: #ffe27a; text-shadow: 0 3px 0 #000; }
:root[data-theme="arcade"] body .cm-championship-entry__rounds {
  justify-self: start;
  padding: 2px 10px;
  border: 2px solid var(--ax-ink);
  border-radius: 999px;
  background: var(--ax-ink);
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 900;
}
:root[data-theme="arcade"] body .cm-championship-prize {
  justify-self: start;
  margin: 0;
  padding: 4px 12px 5px;
  border: 3px solid var(--ax-ink);
  border-radius: 4px 14px 4px 14px;
  background: linear-gradient(180deg, #fff0a0 0 30%, var(--ax-yellow) 30% 72%, #f0a51a 72%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 4px 0 var(--ax-ink);
}
:root[data-theme="arcade"] body .cm-championship-prize__digits { color: #3a2400; font-size: clamp(22px, 6vw, 28px); font-weight: 900; }
:root[data-theme="arcade"] body .cm-championship-prize__bit { color: #5a3a00; font-weight: 900; }
/* A closed cup: dimmed cartridge, a locked energy bar carries the reason. */
:root[data-theme="arcade"] body .cm-championship-entry:disabled { filter: saturate(0.4) brightness(0.82); }
:root[data-theme="arcade"] body .cm-championship-entry:disabled .cm-championship-cup { filter: grayscale(1); opacity: 0.7; }
:root[data-theme="arcade"] body .cm-championship-entry__reason:not(:empty) {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 2px solid var(--ax-ink);
  border-radius: 6px;
  background: repeating-linear-gradient(-45deg, #2a2a3d 0 8px, #3a3a52 8px 16px);
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 800;
}
:root[data-theme="arcade"] body .cm-championship-entry__reason:not(:empty)::before { content: "\1F512"; font-size: 13px; }

/* -- Reduced motion: no scan sweep, no deal-in travel. -- */
:root[data-theme="arcade"][data-motion="reduced"] .cm-vs5-root .cm-vs5-data-arena::after,
:root[data-theme="arcade"][data-motion="reduced"] .cm-vs5-root .cm-vs5-matches > .cm-vs5-match { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="arcade"] .cm-vs5-root .cm-vs5-data-arena::after,
  :root[data-theme="arcade"] .cm-vs5-root .cm-vs5-matches > .cm-vs5-match { animation: none !important; }
}

/* -- Medal collection (Owner 2026-10-28): an earned tile is a dark purple card,
 *    so its title reads in bright cream (#FFF8E7) and its subtitle in soft gold
 *    (#FFD166). The card takes a solid base so the contrast holds over any part
 *    of the page gradient; the metal still tints its edge and glow. -- */
:root[data-theme="arcade"] .cm-medals__summary { color: rgba(255, 248, 231, 0.86); text-shadow: 0 1px 0 rgba(20, 20, 31, 0.6); }
:root[data-theme="arcade"] .cm-medals__tile[data-acquired="true"] {
  border: 2px solid color-mix(in srgb, var(--medal-metal, #d8b04e) 70%, #fff8e7);
  background:
    radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--medal-metal, #d8b04e) 30%, transparent), transparent 70%),
    linear-gradient(180deg, #34205f, #1f1340);
  box-shadow: inset 0 1px 0 rgba(255, 248, 231, 0.18), 0 4px 0 rgba(10, 6, 24, 0.55);
}
:root[data-theme="arcade"] .cm-medals__tile[data-acquired="true"] .cm-medals__name { color: #fff8e7; text-shadow: 0 1px 0 rgba(10, 6, 24, 0.7); }
:root[data-theme="arcade"] .cm-medals__tile[data-acquired="true"] .cm-medals__status { color: #ffd166; font-weight: 800; }
:root[data-theme="arcade"] .cm-medals__tile[data-acquired="true"] .cm-medals__number { color: rgba(255, 209, 102, 0.78); font-weight: 800; }
:root[data-theme="arcade"] .cm-medals__tile[data-acquired="true"]:active { background: linear-gradient(180deg, #2a1a4d, #170e30); }