/* Classic theme: the earlier interface skin, scoped to
 * :root[data-theme="classic"] and chosen in Settings > Appearance.
 *
 * Built from the 2026-09 interface skin (design notes:
 * docs/art/production/ui/NATIVE_UI_SKIN_IMPLEMENTATION_NOTES.md) for the
 * 2026-10-04 Owner direction: the same look on the redesigned layout. Every
 * rule below the notes is the earlier skin with its selectors scoped and its
 * fixed font sizes multiplied by --text-scale; section 17 fits it to the
 * redesign. It loads after the base sheets and changes nothing for the other
 * themes. Authored CSS only; the one runtime art it references is the
 * approved toolbar cell set under assets/production.
 */
/* Native UI skin. Design and implementation notes: docs/art/production/ui/NATIVE_UI_SKIN_IMPLEMENTATION_NOTES.md. */
:where(:root[data-theme="classic"]) {
  /* ---- Ground ------------------------------------------------------- */
  --ds-blue-deep: #0b3bbe;
  --ds-blue: #0b56e8;
  --ds-blue-mid: #0a68f2;
  --ds-blue-lit: #1f8bff;
  --ds-cyan: #3ec6ff;
  --ds-cyan-lit: #7fe9ff;
  --ds-navy-band: #0a4a86;
  --ds-navy-deep: #072f5e;

  /* ---- Outline ------------------------------------------------------ */
  --ds-ink: #061119;
  --ds-ink-soft: rgba(6, 17, 25, 0.55);

  /* ---- Gold ribbon and frame ---------------------------------------- */
  --ds-gold-lit: #fff6a8;
  --ds-gold: #ffdf46;
  --ds-gold-mid: #ffbe28;
  --ds-amber: #f7931e;
  --ds-amber-deep: #c46a04;

  /* ---- Window fill -------------------------------------------------- */
  --ds-panel-lit: #2a5744;
  --ds-panel: #1d4132;
  --ds-panel-deep: #10281d;
  --ds-panel-ink: #eafff2;

  /* ---- Slots: dark inside, bright rim -------------------------------- */
  --ds-slot-lit: #14492c;
  --ds-slot: #0d3520;
  --ds-slot-deep: #071f13;
  --ds-rim: #46d62c;
  --ds-rim-soft: rgba(70, 214, 44, 0.35);

  /* ---- Accents ------------------------------------------------------- */
  --ds-green-lit: #7ae84f;
  --ds-green: #35b21c;
  --ds-green-deep: #157c09;
  --ds-indigo-lit: #6f7dff;
  --ds-indigo: #3a3fd6;
  --ds-indigo-deep: #23219b;
  --ds-pink: #ff8fc4;
  --ds-red: #e5323a;

  /* ---- Text --------------------------------------------------------- */
  --ds-text: #ffffff;
  --ds-text-soft: #cfeaff;
  --ds-text-dim: #86b3d2;
  --ds-text-shadow: 0 1px 2px rgba(3, 12, 22, 0.85);
  --ds-font: Bahnschrift, "Arial Narrow", "Roboto Condensed",
    "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;

  /* ---- The tool plate: one hexagon, two states, named once so the care
     rail and the hunt rail cannot drift apart ------------------------ */
  --ds-hex-plate-rest: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,1 99,26.5 99,73.5 50,99 1,73.5 1,26.5' fill='%23d88f14'/%3E%3Cpolygon points='50,1 99,26.5 99,50 1,50 1,26.5' fill='%23ffe75c'/%3E%3Cpolygon points='50,1 99,26.5 99,73.5 50,99 1,73.5 1,26.5' fill='none' stroke='%23061119' stroke-width='2.5'/%3E%3Cpolygon points='50,10 91,31.5 91,68.5 50,90 9,68.5 9,31.5' fill='%23342c25'/%3E%3Cpolygon points='50,10 91,31.5 91,50 9,50 9,31.5' fill='%236b6055'/%3E%3Cpolygon points='50,10 91,31.5 91,68.5 50,90 9,68.5 9,31.5' fill='none' stroke='%23061119' stroke-width='2.5'/%3E%3C/svg%3E");
  --ds-hex-plate-lit: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,1 99,26.5 99,73.5 50,99 1,73.5 1,26.5' fill='%23d88f14'/%3E%3Cpolygon points='50,1 99,26.5 99,50 1,50 1,26.5' fill='%23ffe75c'/%3E%3Cpolygon points='50,1 99,26.5 99,73.5 50,99 1,73.5 1,26.5' fill='none' stroke='%23061119' stroke-width='2.5'/%3E%3Cpolygon points='50,10 91,31.5 91,68.5 50,90 9,68.5 9,31.5' fill='%232f9c3a'/%3E%3Cpolygon points='50,10 91,31.5 91,50 9,50 9,31.5' fill='%238ef07a'/%3E%3Cpolygon points='50,10 91,31.5 91,68.5 50,90 9,68.5 9,31.5' fill='none' stroke='%23061119' stroke-width='2.5'/%3E%3C/svg%3E");

  /* ---- Depth -------------------------------------------------------- */
  --ds-lift: 0 3px 0 rgba(0, 0, 0, 0.28), 0 8px 18px rgba(0, 12, 30, 0.35);
  --ds-window-fill: linear-gradient(180deg, var(--ds-panel-lit) 0%, var(--ds-panel) 55%, var(--ds-panel-deep) 100%);
  --ds-window-frame: 0 0 0 2px var(--ds-ink), 0 0 0 4px var(--ds-gold), 0 0 0 6px var(--ds-ink), var(--ds-lift);
  --ds-action-fill: linear-gradient(180deg, var(--ds-gold-lit) 0%, var(--ds-gold) 38%, var(--ds-amber) 100%);
  --ds-action-ink: #3a2100;
  /* Content-specific materials retained by Owner direction, 2026-09-12. */
  --ds-calendar-date: #49454e;
  --ds-paper: #f8e78d;
  --ds-paper-lit: #fffef0;
  --ds-paper-ink: #29291b;
  --ds-paper-line: #c7b967;

  /* The xmlns is percent-encoded, as raisingHomeHud.css already does: it is an
     XML namespace name, never fetched, and the migration firewall refuses a
     bare scheme in runtime source. The data URI is decoded before parsing, so
     the SVG still sees the real namespace. */
  /* ---- The hex mesh: one tileable path drawn twice -- a soft wide pass for
     the cell body and a fine pass for the edge. That pair is what makes the
     original's mesh read as lit glass rather than as wireframe. ---------- */
  --ds-hex: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='32.91' height='57' viewBox='0 0 32.91 57'%3E%3Cdefs%3E%3Cpath id='h' d='M-32.9,-76 -16.5,-66.5 -16.5,-47.5 -32.9,-38 -49.4,-47.5 -49.4,-66.5Z M-16.5,-47.5 0,-38 0,-19 -16.5,-9.5 -32.9,-19 -32.9,-38Z M-32.9,-19 -16.5,-9.5 -16.5,9.5 -32.9,19 -49.4,9.5 -49.4,-9.5Z M-16.5,9.5 0,19 0,38 -16.5,47.5 -32.9,38 -32.9,19Z M-32.9,38 -16.5,47.5 -16.5,66.5 -32.9,76 -49.4,66.5 -49.4,47.5Z M-16.5,66.5 0,76 0,95 -16.5,104.5 -32.9,95 -32.9,76Z M0,-76 16.5,-66.5 16.5,-47.5 0,-38 -16.5,-47.5 -16.5,-66.5Z M16.5,-47.5 32.9,-38 32.9,-19 16.5,-9.5 0,-19 0,-38Z M0,-19 16.5,-9.5 16.5,9.5 0,19 -16.5,9.5 -16.5,-9.5Z M16.5,9.5 32.9,19 32.9,38 16.5,47.5 0,38 0,19Z M0,38 16.5,47.5 16.5,66.5 0,76 -16.5,66.5 -16.5,47.5Z M16.5,66.5 32.9,76 32.9,95 16.5,104.5 0,95 0,76Z M32.9,-76 49.4,-66.5 49.4,-47.5 32.9,-38 16.5,-47.5 16.5,-66.5Z M49.4,-47.5 65.8,-38 65.8,-19 49.4,-9.5 32.9,-19 32.9,-38Z M32.9,-19 49.4,-9.5 49.4,9.5 32.9,19 16.5,9.5 16.5,-9.5Z M49.4,9.5 65.8,19 65.8,38 49.4,47.5 32.9,38 32.9,19Z M32.9,38 49.4,47.5 49.4,66.5 32.9,76 16.5,66.5 16.5,47.5Z M49.4,66.5 65.8,76 65.8,95 49.4,104.5 32.9,95 32.9,76Z'/%3E%3C/defs%3E%3Cuse href='%23h' fill='none' stroke='%23bff4ff' stroke-width='5' stroke-opacity='.16'/%3E%3Cuse href='%23h' fill='none' stroke='%23eaffff' stroke-width='1.1' stroke-opacity='.3'/%3E%3C/svg%3E");
}

/* ====================================================================== *
 * 1. GROUND
 * ====================================================================== */

:where(:root[data-theme="classic"]) .ds-ground {
  background-image:
    var(--ds-hex),
    radial-gradient(130% 62% at 50% 0%, rgba(140, 240, 255, 0.5) 0%, rgba(31, 139, 255, 0.22) 38%, rgba(11, 86, 232, 0) 74%),
    linear-gradient(180deg, var(--ds-blue) 0%, var(--ds-blue-mid) 38%, var(--ds-blue-deep) 74%, var(--ds-navy-band) 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 40px 69px, 100% 100%, 100% 100%;
  color: var(--ds-text);
}

:where(:root[data-theme="classic"]) .ds-ground-green {
  background-image:
    var(--ds-hex),
    radial-gradient(130% 62% at 50% 0%, rgba(196, 255, 190, 0.42) 0%, rgba(24, 140, 60, 0.2) 40%, rgba(8, 82, 8, 0) 76%),
    linear-gradient(180deg, #35a854 0%, #1a8033 55%, #0b5a16 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 40px 69px, 100% 100%, 100% 100%;
  color: var(--ds-text);
}

/* ====================================================================== *
 * 2. GOLD RIBBON
 * ====================================================================== */

:where(:root[data-theme="classic"]) .ds-ribbon {
  position: relative;
  background: linear-gradient(180deg,
    var(--ds-gold-lit) 0%, var(--ds-gold) 34%, var(--ds-gold-mid) 62%, var(--ds-amber) 100%);
  border-bottom: 2px solid var(--ds-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 12px rgba(0, 20, 50, 0.4);
  color: #3a2100;
  overflow: hidden;
}

/* The ribbon is cut into angled segments. Modernised: one thin dark joint with
   a light leading edge, spaced so it never lands on a label. */
:where(:root[data-theme="classic"]) .ds-ribbon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(106deg,
    rgba(120, 60, 0, 0) 0 128px,
    rgba(120, 60, 0, 0.45) 128px 130px,
    rgba(255, 255, 235, 0.75) 130px 133px,
    rgba(120, 60, 0, 0) 133px 146px);
}

:where(:root[data-theme="classic"]) .ds-ribbon > * { position: relative; z-index: 1; }

/* ====================================================================== *
 * 3. WINDOW
 * ====================================================================== */

:where(:root[data-theme="classic"]) .ds-panel {
  position: relative;
  padding: 4px;
  border-radius: 16px;
  background: linear-gradient(180deg,
    var(--ds-gold-lit) 0%, var(--ds-gold) 30%, var(--ds-gold-mid) 62%, var(--ds-amber-deep) 100%);
  box-shadow: 0 0 0 2px var(--ds-ink), var(--ds-lift);
  color: var(--ds-panel-ink);
}

:where(:root[data-theme="classic"]) .ds-panel__inner {
  position: relative;
  border-radius: 12px;
  padding: 13px 14px;
  background: var(--ds-window-fill);
  box-shadow: inset 0 0 0 2px var(--ds-ink), inset 0 10px 22px rgba(0, 0, 0, 0.35);
}

:where(:root[data-theme="classic"]) .ds-panel__title {
  position: absolute;
  top: -12px;
  left: 20px;
  z-index: 2;
  margin: 0;
  padding: 3px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-panel-lit), var(--ds-panel-deep));
  box-shadow: 0 0 0 2px var(--ds-gold), 0 0 0 4px var(--ds-ink), 0 2px 8px rgba(0, 0, 0, 0.45);
  color: var(--ds-text);
  font: 700 calc(0.74rem * var(--text-scale, 1))/1.5 var(--ds-font);
  letter-spacing: 0.12em;
  text-shadow: var(--ds-text-shadow);
  white-space: nowrap;
}

:where(:root[data-theme="classic"]) .ds-slot {
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-height: 32px;
  padding: 4px 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-slot-lit) 0%, var(--ds-slot) 55%, var(--ds-slot-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 2px var(--ds-rim),
    0 0 0 3px var(--ds-ink),
    0 0 14px var(--ds-rim-soft);
  color: var(--ds-text);
  font: 700 calc(0.82rem * var(--text-scale, 1))/1.3 var(--ds-font);
  text-shadow: var(--ds-text-shadow);
}

:where(:root[data-theme="classic"]) .ds-slot--gold {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 2px var(--ds-gold),
    0 0 0 3px var(--ds-ink),
    0 0 14px rgba(255, 223, 70, 0.3);
}

:where(:root[data-theme="classic"]) .ds-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 34px;
  padding: 5px 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-green-lit) 0%, var(--ds-green) 52%, var(--ds-green-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 6px rgba(0, 0, 0, 0.28),
    0 0 0 2px var(--ds-ink),
    var(--ds-lift);
  color: var(--ds-text);
  font: 700 calc(0.82rem * var(--text-scale, 1))/1.25 var(--ds-font);
  letter-spacing: 0.03em;
  text-shadow: var(--ds-text-shadow);
  cursor: pointer;
  transition: filter 120ms ease, transform 90ms ease;
}

:where(:root[data-theme="classic"]) .ds-pill--label {
  min-height: 26px;
  padding: 3px 12px;
  background: linear-gradient(180deg, var(--ds-indigo-lit) 0%, var(--ds-indigo) 55%, var(--ds-indigo-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 2px var(--ds-ink);
  font-size: calc(0.7rem * var(--text-scale, 1));
  letter-spacing: 0.08em;
}

:where(:root[data-theme="classic"]) .ds-pill--gold {
  background: var(--ds-action-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 6px rgba(150, 80, 0, 0.3),
    0 0 0 2px var(--ds-ink),
    var(--ds-lift);
  color: #3a2100;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

:where(:root[data-theme="classic"]) .ds-pill:disabled { filter: grayscale(0.6) brightness(0.66); cursor: default; }
:where(:root[data-theme="classic"]) .ds-pill:not(:disabled):hover { filter: brightness(1.09); }
:where(:root[data-theme="classic"]) .ds-pill:not(:disabled):active { transform: translateY(2px); }
:where(:root[data-theme="classic"]) .ds-pill:focus-visible,
:where(:root[data-theme="classic"]) .ds-slot:focus-visible { outline: 3px solid var(--ds-cyan-lit); outline-offset: 3px; }

:where(:root[data-theme="classic"]) .ds-row {
  display: grid;
  grid-template-columns: minmax(5em, 36%) minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
}

:where(:root[data-theme="classic"]) .ds-readout {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--ds-cyan-lit);
  text-shadow: 0 0 12px rgba(127, 233, 255, 0.6), var(--ds-text-shadow);
}

/* ---- 5.1 Status bar = the gold ribbon -------------------------------- */
:where(:root[data-theme="classic"]) .cm-status-bar[data-screen] {
  gap: clamp(0.4rem, 2vw, 1rem);
  padding: 0.3rem clamp(0.5rem, 2.5vw, 1rem);
  background: linear-gradient(180deg,
    var(--ds-gold-lit) 0%, var(--ds-gold) 34%, var(--ds-gold-mid) 62%, var(--ds-amber) 100%);
  border-bottom: 2px solid var(--ds-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 12px rgba(0, 20, 50, 0.4);
  font-family: var(--ds-font);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #3a2100;
  isolation: isolate;
}

/* The angled segment cuts belong to the bar, not to its children. */
:where(:root[data-theme="classic"]) .cm-status-bar[data-screen]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(106deg,
    rgba(120, 60, 0, 0) 0 128px,
    rgba(120, 60, 0, 0.4) 128px 130px,
    rgba(255, 255, 235, 0.7) 130px 133px,
    rgba(120, 60, 0, 0) 133px 146px);
}

/* The season tab is a pale capsule with coloured type -- the original's one
   piece of light chrome, and what tells you the time of year without reading. */
:where(:root[data-theme="classic"]) .cm-status-bar[data-screen] .cm-status-bar__season {
  min-width: 0;
  padding: 2px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #e6f3ff 100%);
  box-shadow: inset 0 -2px 4px rgba(0, 40, 80, 0.12), 0 0 0 2px var(--ds-ink);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-shadow: none;
}
:where(:root[data-theme="classic"]) .cm-status-bar[data-screen] .cm-status-bar__season[data-season="spring"] { color: #2f9b2a; }
:where(:root[data-theme="classic"]) .cm-status-bar[data-screen] .cm-status-bar__season[data-season="summer"] { color: #e0397e; }
:where(:root[data-theme="classic"]) .cm-status-bar[data-screen] .cm-status-bar__season[data-season="autumn"] { color: #d26a12; }
:where(:root[data-theme="classic"]) .cm-status-bar[data-screen] .cm-status-bar__season[data-season="winter"] { color: #1f7fc4; }

/* Day and clock sit straight on the ribbon, as they do in the original. */
:where(:root[data-theme="classic"]) .cm-status-bar[data-screen] .cm-status-bar__day { color: #4a2a00; letter-spacing: 0.1em; }
:where(:root[data-theme="classic"]) .cm-status-bar[data-screen] .cm-status-bar__day-number,
:where(:root[data-theme="classic"]) .cm-status-bar[data-screen] .cm-status-bar__time {
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 0 1px #2a1600, 0 1px 0 #2a1600, 1px 0 0 #2a1600, -1px 0 0 #2a1600, 0 -1px 0 #2a1600;
}
:where(:root[data-theme="classic"]) .cm-status-bar[data-screen] .cm-status-bar__time { font-size: 1.22em; letter-spacing: 0.04em; }

/* The mode name is the amber headline the original centres on the ribbon. */
:where(:root[data-theme="classic"]) .cm-status-bar[data-screen] .cm-status-bar__mode {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  color: #ff7a18;
  font-weight: 800;
  font-size: 1.12em;
  letter-spacing: 0.14em;
  text-shadow: 0 0 1px #4a2100, 0 1px 0 #4a2100, 1px 0 0 #4a2100, -1px 0 0 #4a2100, 0 -1px 0 #4a2100;
}

:where(:root[data-theme="classic"]) .cm-status-bar[data-screen] .cm-status-bar__end-day {
  border: 0;
  border-radius: 999px;
  padding: 3px 12px;
  background: linear-gradient(180deg, var(--ds-slot-lit), var(--ds-slot-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 2px var(--ds-rim), 0 0 0 3px var(--ds-ink);
  color: var(--ds-text);
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-status-bar[data-screen] .cm-status-bar__end-day:hover:not(:disabled) {
  background: linear-gradient(180deg, #1b6139, var(--ds-slot));
}

/* ---- 5.2 Toolbar = eight icon discs in a dark rail -------------------- */
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__rail {
  gap: clamp(2px, 1vw, 6px);
  padding: 6px clamp(4px, 1.5vw, 10px) calc(6px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #0d3c60 0%, #07243c 46%, #03121e 100%);
  border-top: 2px solid var(--ds-ink);
  box-shadow: inset 0 2px 0 rgba(127, 233, 255, 0.45), 0 -6px 18px rgba(0, 10, 25, 0.5);
  align-items: center;
}

/* A cell is a disc: metal at rest, gold when it is the chosen tool. */
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell {
  position: relative;
  aspect-ratio: 1;
  min-height: 46px;
  justify-self: center;
  width: 100%;
  max-width: 54px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #4a708a 0%, #24485f 52%, #102a3c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 2px var(--ds-ink),
    0 2px 6px rgba(0, 0, 0, 0.45);
  transition: filter 120ms ease, transform 90ms ease;
}

/* The label stays for assistive technology; the icon carries the meaning. */
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The icon layer. `image-rendering: pixelated` keeps the 4x cells crisp
   instead of letting the browser soften them into mush. */
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell::before {
  content: "";
  position: absolute;
  inset: 13%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[data-icon="hand"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/hand-rest.png"); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[data-icon="feed"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/feed-rest.png"); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[data-icon="protein"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/protein-rest.png"); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[data-icon="clean"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/clean-rest.png"); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[data-icon="woundMedicine"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/woundMedicine-rest.png"); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[data-icon="medicine"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/medicine-rest.png"); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[data-icon="manage"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/manage-rest.png"); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[data-icon="system"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/system-rest.png"); }

:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[aria-pressed="true"][data-icon="hand"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/hand-selected.png"); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[aria-pressed="true"][data-icon="feed"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/feed-selected.png"); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[aria-pressed="true"][data-icon="protein"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/protein-selected.png"); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[aria-pressed="true"][data-icon="clean"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/clean-selected.png"); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[aria-pressed="true"][data-icon="woundMedicine"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/woundMedicine-selected.png"); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[aria-pressed="true"][data-icon="medicine"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/medicine-selected.png"); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[aria-expanded="true"][data-icon="manage"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/manage-selected.png"); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[aria-expanded="true"][data-icon="system"]::before { background-image: url("../../../assets/production/toolbar/licensed-runtime-v1/system-selected.png"); }

:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell:hover:not(:disabled) { filter: brightness(1.15); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell:not(:disabled):active { transform: translateY(2px); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell:disabled { filter: grayscale(0.7) brightness(0.55); }

/* Chosen: the disc lights gold, exactly the signal the original gives. */
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[aria-pressed="true"],
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[aria-expanded="true"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, var(--ds-gold-lit) 0%, var(--ds-gold) 45%, var(--ds-amber) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 2px var(--ds-ink),
    0 0 16px rgba(255, 200, 60, 0.65);
}

/* The stock count rides the disc's lower edge as a small dark chip. */
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__stock {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #143a55, #061722);
  box-shadow: 0 0 0 2px var(--ds-ink);
  color: var(--ds-cyan-lit);
  font: 800 calc(0.6rem * var(--text-scale, 1))/1.5 var(--ds-font);
  font-variant-numeric: tabular-nums;
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__stock[hidden] { display: none; }

/* The submenu is a window. */
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__menu {
  position: relative;
  gap: 7px;
  padding: 11px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg,
    var(--ds-gold-lit) 0%, var(--ds-gold) 30%, var(--ds-gold-mid) 62%, var(--ds-amber-deep) 100%);
  box-shadow: 0 0 0 2px var(--ds-ink), 0 -8px 28px rgba(0, 10, 30, 0.55);
}
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__menu::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 12px;
  background: var(--ds-window-fill);
  box-shadow: inset 0 0 0 2px var(--ds-ink);
  pointer-events: none;
}

:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__entry {
  position: relative;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-slot-lit) 0%, var(--ds-slot) 55%, var(--ds-slot-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 2px var(--ds-rim),
    0 0 0 3px var(--ds-ink),
    0 0 12px var(--ds-rim-soft);
  font-family: var(--ds-font);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ds-text);
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__entry:hover:not(:disabled) { filter: brightness(1.35); }
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__entry:disabled { filter: grayscale(0.8) brightness(0.5); opacity: 1; }

:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__entry[data-entry-id="endDay"],
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__entry[data-entry-id="saveQuit"] {
  background: var(--ds-action-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 2px var(--ds-ink),
    0 0 16px rgba(255, 200, 60, 0.5);
  color: #3a2100;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ---- 5.3 Sheet screens: roster, schedule, help, tamer, championship ---- */
/* These five are one design in the product and one design in the original: a
   mesh ground, one framed window, and rows inside it. Re-pointing the shared
   sheet tokens moves all five together, as they were built to. */
:where(:root[data-theme="classic"]) .cm-digimon-root,
:where(:root[data-theme="classic"]) .cm-schedule-root,
:where(:root[data-theme="classic"]) .cm-help-root,
:where(:root[data-theme="classic"]) .cm-tamer-root,
:where(:root[data-theme="classic"]) .cm-championship-root {
  --cm-sheet-ground: transparent;
  --cm-sheet-ink: var(--ds-text);
  --cm-sheet-accent: var(--ds-cyan-lit);
  --cm-sheet-muted: var(--ds-text-soft);
  --cm-sheet-dim: var(--ds-text-dim);
  --cm-sheet-card: transparent;
  --cm-sheet-edge: transparent;
  --cm-sheet-selected: transparent;
  --cm-sheet-selected-edge: transparent;
  --cm-sheet-today: transparent;
  --cm-sheet-short: #ff9c9c;
  --cm-sheet-inset: transparent;
  --cm-sheet-highlight: var(--ds-gold);
  color-scheme: dark;
  background-image:
    var(--ds-hex),
    radial-gradient(130% 62% at 50% 0%, rgba(140, 240, 255, 0.5) 0%, rgba(31, 139, 255, 0.22) 38%, rgba(11, 86, 232, 0) 74%),
    linear-gradient(180deg, var(--ds-blue) 0%, var(--ds-blue-mid) 38%, var(--ds-blue-deep) 74%, var(--ds-navy-band) 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 40px 69px, 100% 100%, 100% 100%;
  background-attachment: local, fixed, fixed;
  color: var(--ds-text);
}

:where(:root[data-theme="classic"]) .cm-digimon-shell, :where(:root[data-theme="classic"]) .cm-schedule-shell, :where(:root[data-theme="classic"]) .cm-help-shell,
:where(:root[data-theme="classic"]) .cm-tamer-shell, :where(:root[data-theme="classic"]) .cm-championship-shell { font-family: var(--ds-font); }

:where(:root[data-theme="classic"]) .cm-digimon-title, :where(:root[data-theme="classic"]) .cm-schedule-title, :where(:root[data-theme="classic"]) .cm-help-title,
:where(:root[data-theme="classic"]) .cm-tamer-title, :where(:root[data-theme="classic"]) .cm-championship-title {
  align-self: flex-start;
  padding: 4px 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-panel-lit), var(--ds-panel-deep));
  box-shadow: 0 0 0 2px var(--ds-gold), 0 0 0 4px var(--ds-ink), 0 3px 10px rgba(0, 0, 0, 0.45);
  font-size: calc(1.02rem * var(--text-scale, 1));
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ds-text);
  text-shadow: var(--ds-text-shadow);
}

:where(:root[data-theme="classic"]) .cm-digimon-kicker, :where(:root[data-theme="classic"]) .cm-schedule-kicker, :where(:root[data-theme="classic"]) .cm-help-kicker,
:where(:root[data-theme="classic"]) .cm-tamer-kicker, :where(:root[data-theme="classic"]) .cm-championship-kicker {
  color: var(--ds-cyan-lit);
  text-shadow: 0 0 10px rgba(127, 233, 255, 0.6);
}

/* One window recipe for every framed block on a sheet screen. */
:where(:root[data-theme="classic"]) .cm-digimon-detail,
:where(:root[data-theme="classic"]) .cm-schedule-detail,
:where(:root[data-theme="classic"]) .cm-help-detail,
:where(:root[data-theme="classic"]) .cm-tamer-fields,
:where(:root[data-theme="classic"]) .cm-championship-run {
  border: 0;
  border-radius: 14px;
  padding: 14px;
  background: var(--ds-window-fill);
  box-shadow:
    inset 0 0 0 2px var(--ds-ink),
    0 0 0 4px var(--ds-gold),
    0 0 0 6px var(--ds-ink),
    var(--ds-lift);
  color: var(--ds-text);
}

:where(:root[data-theme="classic"]) .cm-schedule-day {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--ds-slot-lit) 0%, var(--ds-slot) 55%, var(--ds-slot-deep) 100%);
  box-shadow: inset 0 0 0 2px var(--ds-ink), 0 0 0 2px var(--ds-rim-soft);
}
:where(:root[data-theme="classic"]) .cm-schedule-day[data-today="true"] {
  box-shadow: inset 0 0 0 2px var(--ds-ink), 0 0 0 2px var(--ds-gold), 0 0 14px rgba(255, 223, 70, 0.35);
}

/* A row you can choose is a SLOT until it is chosen, and only then gold. This
   is the rule that keeps a screen from turning into a wall of green. */
:where(:root[data-theme="classic"]) .cm-digimon-item__button,
:where(:root[data-theme="classic"]) .cm-help-topic,
:where(:root[data-theme="classic"]) .cm-schedule-fixture,
:where(:root[data-theme="classic"]) .cm-championship-entry,
:where(:root[data-theme="classic"]) .cm-digimon-control {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-slot-lit) 0%, var(--ds-slot) 55%, var(--ds-slot-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 2px var(--ds-rim),
    0 0 0 3px var(--ds-ink),
    0 0 12px var(--ds-rim-soft);
  color: var(--ds-text);
  font-family: var(--ds-font);
  font-weight: 700;
  text-shadow: var(--ds-text-shadow);
  transition: filter 120ms ease;
}
:where(:root[data-theme="classic"]) .cm-championship-entry { border-radius: 26px; }
:where(:root[data-theme="classic"]) .cm-schedule-fixture[data-registered="true"] {
  box-shadow: inset 3px 0 var(--ds-gold), 0 0 0 2px var(--ds-gold), 0 0 0 3px var(--ds-ink);
}
:where(:root[data-theme="classic"]) .cm-schedule-fixture[data-won="true"] { opacity: 0.65; }
:where(:root[data-theme="classic"]) .cm-digimon-item__button:hover, :where(:root[data-theme="classic"]) .cm-help-topic:hover, :where(:root[data-theme="classic"]) .cm-schedule-fixture:hover { filter: brightness(1.3); }

:where(:root[data-theme="classic"]) .cm-digimon-item__button[aria-pressed="true"],
:where(:root[data-theme="classic"]) .cm-help-topic[aria-pressed="true"],
:where(:root[data-theme="classic"]) .cm-schedule-fixture[aria-pressed="true"] {
  background: var(--ds-action-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 2px var(--ds-ink), 0 0 16px rgba(255, 200, 60, 0.55);
  color: #3a2100;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
:where(:root[data-theme="classic"]) .cm-digimon-control { opacity: 1; filter: grayscale(0.7) brightness(0.55); }
:where(:root[data-theme="classic"]) .cm-championship-entry:disabled { opacity: 1; filter: grayscale(0.55) brightness(0.7); }

/* Only the things you actually press are filled. */
:where(:root[data-theme="classic"]) .cm-championship-action {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-green-lit) 0%, var(--ds-green) 52%, var(--ds-green-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 6px rgba(0, 0, 0, 0.28),
    0 0 0 2px var(--ds-ink),
    0 2px 0 rgba(0, 0, 0, 0.3);
  color: var(--ds-text);
  font-family: var(--ds-font);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-championship-action--primary {
  background: var(--ds-action-fill);
  color: #3a2100;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

:where(:root[data-theme="classic"]) .cm-digimon-list, :where(:root[data-theme="classic"]) .cm-help-list { gap: 8px; }
:where(:root[data-theme="classic"]) .cm-schedule-days { gap: 7px; }
:where(:root[data-theme="classic"]) .cm-digimon-controls, :where(:root[data-theme="classic"]) .cm-championship-actions { gap: 8px; }

/* Labelled values are the indigo/cyan pair. */
:where(:root[data-theme="classic"]) .cm-digimon-detail__label,
:where(:root[data-theme="classic"]) .cm-tamer-field__label,
:where(:root[data-theme="classic"]) .cm-schedule-facts dt {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-indigo-lit) 0%, var(--ds-indigo) 55%, var(--ds-indigo-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 2px var(--ds-ink);
  color: var(--ds-text);
  font-size: calc(0.66rem * var(--text-scale, 1));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-digimon-detail__value,
:where(:root[data-theme="classic"]) .cm-tamer-field__value,
:where(:root[data-theme="classic"]) .cm-schedule-facts dd {
  color: var(--ds-cyan-lit);
  text-shadow: 0 0 12px rgba(127, 233, 255, 0.5), var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-tamer-field__value[data-state="UNSOURCED"] { color: var(--ds-text-dim); text-shadow: var(--ds-text-shadow); }
:where(:root[data-theme="classic"]) .cm-digimon-detail { gap: 8px 12px; align-items: center; }
:where(:root[data-theme="classic"]) .cm-digimon-resistance {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(96px, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
}
:where(:root[data-theme="classic"]) .cm-digimon-resistance__title { color: var(--ds-text); font-size: calc(0.68rem * var(--text-scale, 1)); font-weight: 700; }
:where(:root[data-theme="classic"]) .cm-digimon-resistance__bar {
  display: flex;
  min-height: 12px;
  overflow: hidden;
  border: 2px solid var(--ds-ink);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
}
:where(:root[data-theme="classic"]) .cm-digimon-resistance__segment { min-width: 0; }
:where(:root[data-theme="classic"]) .cm-digimon-resistance__segment--heat { background: #f05b3c; }
:where(:root[data-theme="classic"]) .cm-digimon-resistance__segment--cold { background: #54c5e8; }
:where(:root[data-theme="classic"]) .cm-digimon-resistance__segment--thunder { background: #f6cf3d; }
:where(:root[data-theme="classic"]) .cm-digimon-resistance__segment--light { background: #f5f2d0; }
:where(:root[data-theme="classic"]) .cm-digimon-resistance__segment--dark { background: #7254a7; }
:where(:root[data-theme="classic"]) .cm-tamer-fields { gap: 9px 12px; align-items: center; }

:where(:root[data-theme="classic"]) .cm-digimon-untraced, :where(:root[data-theme="classic"]) .cm-help-note, :where(:root[data-theme="classic"]) .cm-tamer-note,
:where(:root[data-theme="classic"]) .cm-schedule-untraced, :where(:root[data-theme="classic"]) .cm-schedule-footer, :where(:root[data-theme="classic"]) .cm-championship-notice,
:where(:root[data-theme="classic"]) .cm-help-detail__provenance, :where(:root[data-theme="classic"]) .cm-digimon-empty, :where(:root[data-theme="classic"]) .cm-help-empty, :where(:root[data-theme="classic"]) .cm-schedule-empty,
:where(:root[data-theme="classic"]) .cm-schedule-day__number, :where(:root[data-theme="classic"]) .cm-schedule-day__none {
  color: var(--ds-text-dim);
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-help-heading { color: var(--ds-gold); border-bottom-color: rgba(255, 223, 70, 0.4); }
:where(:root[data-theme="classic"]) .cm-help-detail__title, :where(:root[data-theme="classic"]) .cm-schedule-detail__name,
:where(:root[data-theme="classic"]) .cm-championship-run__title, :where(:root[data-theme="classic"]) .cm-championship-entry__name { color: var(--ds-text); }
:where(:root[data-theme="classic"]) .cm-schedule-detail__when, :where(:root[data-theme="classic"]) .cm-championship-entry__rounds,
:where(:root[data-theme="classic"]) .cm-schedule-detail__blurb { color: var(--ds-text-soft); }

:where(:root[data-theme="classic"]) .cm-championship-round {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-slot-lit), var(--ds-slot-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px var(--ds-rim), 0 0 0 3px var(--ds-ink);
  color: var(--ds-text);
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-championship-round[data-state="WON"] {
  background: linear-gradient(180deg, var(--ds-gold-lit), var(--ds-amber));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 2px var(--ds-ink);
  color: #3a2100;
  text-shadow: none;
}
:where(:root[data-theme="classic"]) .cm-championship-round[data-state="NOW"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px var(--ds-cyan-lit), 0 0 0 3px var(--ds-ink), 0 0 14px rgba(127, 233, 255, 0.55);
}

/* ---- 5.4 Title screen ------------------------------------------------ */
:where(:root[data-theme="classic"]) .cm-button {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-slot-lit) 0%, var(--ds-slot) 55%, var(--ds-slot-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 2px var(--ds-rim),
    0 0 0 3px var(--ds-ink),
    0 0 16px var(--ds-rim-soft);
  font-family: var(--ds-font);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ds-text);
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-button--primary {
  background: var(--ds-action-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 2px var(--ds-ink), 0 0 18px rgba(255, 200, 60, 0.5);
  color: #3a2100;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
:where(:root[data-theme="classic"]) .cm-button:not(:disabled):hover { filter: brightness(1.12); }

@media (prefers-reduced-motion: reduce) {
  :where(:root[data-theme="classic"]) .ds-pill, :where(:root[data-theme="classic"]) .cm-toolbar__cell, :where(:root[data-theme="classic"]) .cm-digimon-item__button,
  :where(:root[data-theme="classic"]) .cm-help-topic, :where(:root[data-theme="classic"]) .cm-schedule-fixture { transition: none; }
}

/* ---- 5.5 Raising Home -- the screen the player spends the day on ------- */
/* The bright layer that dressed this screen uses single-class selectors, so a
   root-scoped pair carries the skin without touching its structure. The field
   host and its canvas are deliberately absent from every rule below: this is
   chrome, and the habitat art is not ours to repaint. */
:where(:root[data-theme="classic"]) .int-rh2-root {
  --rh2-ink: var(--ds-text);
  --rh2-muted: var(--ds-text-soft);
  --rh2-cyan: var(--ds-cyan-lit);
  --rh2-display: var(--ds-panel-deep);
  --rh2-font: var(--ds-font);
  color-scheme: dark;
  background: var(--ds-navy-deep);
}

:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-shell {
  background-image:
    var(--ds-hex),
    radial-gradient(130% 62% at 50% 0%, rgba(140, 240, 255, 0.5) 0%, rgba(31, 139, 255, 0.22) 38%, rgba(11, 86, 232, 0) 74%),
    linear-gradient(180deg, var(--ds-blue) 0%, var(--ds-blue-mid) 38%, var(--ds-blue-deep) 74%, var(--ds-navy-band) 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 40px 69px, 100% 100%, 100% 100%;
  border-inline: 2px solid var(--ds-ink);
  box-shadow: 0 0 44px rgba(0, 10, 40, 0.55);
}

/* The title band and its SAVE button left on 2026-09-16; the gold ribbon above
   already names the screen. The system button styling stays: the recovery
   export, the day-end retry and the confirmation buttons all use it. */
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-system-button,
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-letter__ack {
  border: 0;
  border-radius: 999px;
  padding: 4px 12px;
  background: linear-gradient(180deg, var(--ds-slot-lit), var(--ds-slot-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 2px var(--ds-rim), 0 0 0 3px var(--ds-ink);
  color: var(--ds-text);
  text-shadow: var(--ds-text-shadow);
}

/* ---- Raising Home readout, Owner 2026-09-16 ---------------------------- */
/* One card floating over the habitat's headroom: dark glass, a single gold rim,
   cyan readouts. Same height in both states, so the habitat under it never
   changes shape, and it never takes a tap away from a resident. */
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-companion {
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(6, 32, 58, 0.9), rgba(4, 20, 40, 0.84));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 0 0 0 1px rgba(127, 233, 255, 0.16),
    0 0 0 2px var(--ds-gold),
    0 0 0 3px var(--ds-ink),
    var(--ds-lift);
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-companion::before { display: none; }

:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-companion__portrait {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--ds-slot) 0%, var(--ds-slot-deep) 100%);
  box-shadow: inset 0 0 0 2px var(--ds-ink), 0 0 0 2px var(--ds-rim-soft);
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-companion__portrait img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-companion__portrait[hidden] { display: none; }

:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-companion__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 5px;
  min-width: 0;
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-companion__name {
  grid-column: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ds-text);
  font-size: calc(clamp(13px, 4vw, 15px) * var(--text-scale, 1));
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-companion__place {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 4px;
  border-radius: 999px;
  background: rgba(8, 40, 70, 0.75);
  box-shadow: inset 0 0 0 1px var(--ds-rim-soft);
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-companion__location {
  margin: 0;
  color: var(--ds-text-soft);
  font-size: calc(11px * var(--text-scale, 1));
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-companion__ranch-icon { width: 26px; height: 17px; }
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-companion__ranch-icon[hidden] { display: none; }

/* HP and TP as a number over a slim meter; AP keeps the original's constant
   full bar, and capacity stays a plain readout. */
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-vitals {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 7px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-vitals__label {
  color: var(--ds-text-soft);
  font-size: calc(10px * var(--text-scale, 1));
  font-weight: 800;
  letter-spacing: 0.06em;
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-vitals__value {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--ds-cyan-lit);
  font-size: calc(11px * var(--text-scale, 1));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(127, 233, 255, 0.45), var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-vitals__bar {
  display: block;
  height: calc(18px * var(--text-scale, 1));
  border-radius: 3px;
  background: rgba(3, 18, 36, 0.85);
  box-shadow: inset 0 0 0 1px var(--ds-rim-soft);
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-vitals__bar::before {
  content: "";
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ds-cyan) 0%, var(--ds-cyan-lit) 100%);
  box-shadow: 0 0 8px rgba(127, 233, 255, 0.5);
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-vitals__bar[hidden] { display: none; }

/* The notice keeps the window dressing the removed save line had: when it
   speaks at all, it is worth reading. */
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-notice {
  border-radius: 12px;
  background: var(--ds-window-fill);
  box-shadow:
    inset 0 0 0 2px var(--ds-ink),
    0 0 0 3px var(--ds-gold),
    0 0 0 5px var(--ds-ink),
    var(--ds-lift);
  color: var(--ds-panel-ink);
  text-shadow: var(--ds-text-shadow);
}

/* The habitat sits inside a gold frame; nothing here paints over the canvas. */
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-field-frame {
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ds-navy-deep);
  box-shadow:
    inset 0 0 0 2px var(--ds-ink),
    0 0 0 3px var(--ds-gold),
    0 0 0 5px var(--ds-ink),
    var(--ds-lift);
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-field-frame__label {
  background: linear-gradient(180deg, rgba(4, 24, 44, 0.85), rgba(4, 24, 44, 0));
}
/* The hint reads over the habitat itself, so it carries its own plate. */
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-field-state {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(4, 24, 44, 0.72);
  box-shadow: inset 0 0 0 1px var(--ds-rim-soft);
  color: var(--ds-cyan-lit);
  text-shadow: var(--ds-text-shadow);
}

:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-care-button {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-green-lit) 0%, var(--ds-green) 52%, var(--ds-green-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 2px var(--ds-ink), 0 2px 0 rgba(0, 0, 0, 0.3);
  color: var(--ds-text);
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-care-button:disabled { opacity: 1; filter: grayscale(0.65) brightness(0.6); }

/* AP is the original's constant full bar, drawn like the HP and TP meters. */
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-vitals__ap-bar {
  display: block;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ds-cyan) 0%, var(--ds-cyan-lit) 100%);
  box-shadow: 0 0 8px rgba(127, 233, 255, 0.5);
}

/* raisingHomeHud sizes the icon layer in pixels; the skin centres it instead,
   so the two must not both be in force. */
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell::before { width: auto; height: auto; }

:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] {
  color-scheme: dark;
  color: var(--ds-text);
  background: var(--ds-navy-deep);
  font-family: var(--ds-font);
}

/* Every vs2 screen is the blue mesh, except the two the original gives their
   own world: the gate is green with silver chrome, the encyclopaedia green. */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-shell,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-field {
  border-inline: 2px solid var(--ds-ink);
  background-image:
    var(--ds-hex),
    radial-gradient(130% 62% at 50% 0%, rgba(140, 240, 255, 0.5) 0%, rgba(31, 139, 255, 0.22) 38%, rgba(11, 86, 232, 0) 74%),
    linear-gradient(180deg, var(--ds-blue) 0%, var(--ds-blue-mid) 38%, var(--ds-blue-deep) 74%, var(--ds-navy-band) 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 40px 69px, 100% 100%, 100% 100%;
  box-shadow: 0 0 44px rgba(0, 10, 40, 0.55);
}

:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-shell {
  background-image:
    var(--ds-hex),
    radial-gradient(130% 62% at 50% 0%, rgba(190, 255, 180, 0.34) 0%, rgba(24, 140, 60, 0.2) 40%, rgba(8, 82, 8, 0) 76%),
    linear-gradient(180deg, #1f7a34 0%, #0d5a1c 55%, #06340f 100%);
}

/* Header: the screen name is the ribbon's tab capsule, as on every other
   screen, so a player never has to learn a second heading style. */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-header {
  background: linear-gradient(180deg, rgba(4, 28, 52, 0.7), rgba(4, 28, 52, 0));
  border: 0;
  box-shadow: none;
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-header::before,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-header::after { display: none; }

:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-title {
  display: inline-block;
  padding: 3px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-panel-lit), var(--ds-panel-deep));
  box-shadow: 0 0 0 2px var(--ds-gold), 0 0 0 4px var(--ds-ink), 0 3px 10px rgba(0, 0, 0, 0.5);
  color: var(--ds-text);
  font-size: calc(17px * var(--text-scale, 1));
  font-weight: 800;
  letter-spacing: 0.1em;
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-kicker { color: var(--ds-cyan-lit); text-shadow: var(--ds-text-shadow); }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-subtitle { color: var(--ds-text-soft); text-shadow: var(--ds-text-shadow); }

/* Windows */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-preview,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-destination,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-loadout__row,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-database__detail,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-cage-rank {
  border: 0;
  border-radius: 14px;
  background: var(--ds-window-fill);
  box-shadow:
    inset 0 0 0 2px var(--ds-ink),
    0 0 0 3px var(--ds-gold),
    0 0 0 5px var(--ds-ink),
    var(--ds-lift);
  color: var(--ds-text);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-preview__name,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-destination__name { color: var(--ds-text); text-shadow: var(--ds-text-shadow); }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-preview__id,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-preview__state,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-evidence,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-cage-board-hint,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-loadout__empty { color: var(--ds-text-dim); text-shadow: var(--ds-text-shadow); }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-preview__costs dt,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-loadout__label { color: var(--ds-gold); text-shadow: var(--ds-text-shadow); }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-preview__costs dd { color: var(--ds-cyan-lit); text-shadow: 0 0 10px rgba(127, 233, 255, 0.5), var(--ds-text-shadow); }

/* Choosable rows are slots; only actions are filled. */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-gate,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-member,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-loadout__option,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-database__row,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-cage-facility,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-cage-tray__item {
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--ds-slot-lit) 0%, var(--ds-slot) 55%, var(--ds-slot-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 2px var(--ds-rim),
    0 0 0 3px var(--ds-ink),
    0 0 12px var(--ds-rim-soft);
  color: var(--ds-text);
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-gate { border-radius: 999px; }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] :is(.cm-vs2-gate, .cm-vs2-member, .cm-vs2-loadout__option,
  .cm-vs2-database__row, .cm-cage-facility, .cm-vs2-cage-tray__item)[data-selected="true"],
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] :is(.cm-vs2-loadout__option, .cm-vs2-database__row)[aria-pressed="true"] {
  background: var(--ds-action-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 2px var(--ds-ink), 0 0 16px rgba(255, 200, 60, 0.55);
  color: #3a2100;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-gate__name,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-member__name,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-cage-facility strong { color: inherit; }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-gate__ordinal,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-member__index { color: var(--ds-cyan-lit); }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-cage-facility span,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-cage-tray__effect { color: var(--ds-text-soft); }

/* Footer actions: one filled primary, the rest dark. */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-footer { border: 0; background: transparent; box-shadow: none; }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-action {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-slot-lit) 0%, var(--ds-slot) 55%, var(--ds-slot-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 2px var(--ds-rim),
    0 0 0 3px var(--ds-ink);
  color: var(--ds-text);
  font-family: var(--ds-font);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-action--primary {
  background: var(--ds-action-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 2px var(--ds-ink), 0 0 16px rgba(255, 200, 60, 0.45);
  color: #3a2100;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-action:disabled { opacity: 1; filter: grayscale(0.7) brightness(0.5); }

/* ---- 6.1 Gate select: the original's world is green with silver chrome -- */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-preview,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-destination {
  background: linear-gradient(180deg, #0c1a14 0%, #060d09 100%);
  box-shadow:
    inset 0 0 0 2px #000000,
    0 0 0 3px #dfeef0,
    0 0 0 5px #263230,
    var(--ds-lift);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-title {
  box-shadow: 0 0 0 2px #eaf6f7, 0 0 0 4px var(--ds-ink), 0 3px 10px rgba(0, 0, 0, 0.5);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-gate3d__node-index {
  background: linear-gradient(180deg, #eafff0, #b7e8c4);
  color: #11402a;
  border: 0;
  box-shadow: 0 0 0 2px var(--ds-ink);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-gate3d__node-name {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #0e2418, #050c08);
  box-shadow: 0 0 0 2px #dfeef0;
  color: var(--ds-text);
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-gate3d__node-hit[aria-pressed="true"] .cm-vs2-gate3d__node-index {
  background: linear-gradient(180deg, var(--ds-gold-lit), var(--ds-amber));
  box-shadow: 0 0 0 2px var(--ds-ink), 0 0 14px rgba(255, 200, 60, 0.7);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="GATE_SELECT"] .cm-vs2-gate3d__hint { color: #d6ffe2; text-shadow: var(--ds-text-shadow); }

/* ---- 6.2 Hunt field: the eight item slots are gold hex cells on a shelf -- */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-hud {
  border: 0;
  background: linear-gradient(180deg, rgba(4, 28, 52, 0.8), rgba(4, 28, 52, 0));
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-hud__gate { color: var(--ds-text); text-shadow: var(--ds-text-shadow); }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-hud__companion { color: var(--ds-cyan-lit); }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-toolbar {
  border: 0;
  background: linear-gradient(180deg, #1466a8 0%, #0a3f6e 42%, #052641 100%);
  box-shadow: inset 0 2px 0 rgba(150, 235, 255, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.4);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-slot {
  position: relative;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, var(--ds-gold-lit) 0%, var(--ds-gold) 40%, var(--ds-amber-deep) 100%);
  clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
  box-shadow: none;
  color: #3a2100;
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-slot::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: linear-gradient(180deg, #0c3c5e, #05202f);
  clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
  pointer-events: none;
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-slot > * { position: relative; z-index: 1; }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-slot__cell {
  border: 0;
  background: radial-gradient(circle at 40% 35%, var(--ds-cyan-lit), var(--ds-cyan) 55%, #0b4b76 100%);
  box-shadow: 0 0 8px rgba(127, 233, 255, 0.6);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-slot__raw { color: var(--ds-cyan-lit); }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-field__hint { color: var(--ds-text-soft); text-shadow: var(--ds-text-shadow); }

/* ---- 6.3 Cage edit: the ranch grid is the original's hex plate ---------- */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-cage-board-scroll {
  border-block: 2px solid var(--ds-ink);
  background: linear-gradient(180deg, #1466a8 0%, #0a3f6e 45%, #052641 100%);
  box-shadow: inset 0 2px 0 rgba(150, 235, 255, 0.5);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-vs2-cage-slot {
  background-color: #0f4a6e;
  color: var(--ds-cyan-lit);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-vs2-cage-slot[data-unlocked="false"] { background: #0a2537; color: #37637d; }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-facility-thumb { background: #0a2537; box-shadow: inset 0 0 0 2px var(--ds-ink); }

/* ---- 6.4 Database: the original gives the encyclopaedia a green world --- */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="DATABASE"] .cm-vs2-shell {
  background-image:
    var(--ds-hex),
    radial-gradient(130% 62% at 50% 0%, rgba(196, 255, 190, 0.45) 0%, rgba(24, 140, 60, 0.2) 40%, rgba(8, 82, 8, 0) 76%),
    linear-gradient(180deg, #35a854 0%, #1a8033 55%, #0b5a16 100%);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="DATABASE"] .cm-vs2-database__detail-title { color: var(--ds-text); }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="DATABASE"] .cm-vs2-database__instance { color: var(--ds-text-soft); }

/* ---- 6.5 Shop -------------------------------------------------------- */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="SHOP"] .cm-vs2-shop__wallet {
  border: 0;
  border-radius: 999px;
  padding: 4px 14px;
  background: linear-gradient(180deg, var(--ds-slot-lit), var(--ds-slot-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px var(--ds-gold), 0 0 0 3px var(--ds-ink);
  color: var(--ds-cyan-lit);
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-shop-goods-icon { box-shadow: 0 0 0 2px var(--ds-ink); border-radius: 10px; }

:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] {
  color-scheme: dark;
  color: var(--ds-text);
  background: var(--ds-navy-deep);
  font-family: var(--ds-font);
}

:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-shell {
  border-inline: 2px solid var(--ds-ink);
  background-image:
    var(--ds-hex),
    radial-gradient(130% 62% at 50% 0%, rgba(140, 240, 255, 0.5) 0%, rgba(31, 139, 255, 0.22) 38%, rgba(11, 86, 232, 0) 74%),
    linear-gradient(180deg, var(--ds-blue) 0%, var(--ds-blue-mid) 38%, var(--ds-blue-deep) 74%, var(--ds-navy-band) 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 40px 69px, 100% 100%, 100% 100%;
  box-shadow: 0 0 44px rgba(0, 10, 40, 0.55);
}

:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-header { background: linear-gradient(180deg, rgba(4, 28, 52, 0.7), rgba(4, 28, 52, 0)); }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-title {
  display: inline-block;
  padding: 3px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-panel-lit), var(--ds-panel-deep));
  box-shadow: 0 0 0 2px var(--ds-gold), 0 0 0 4px var(--ds-ink), 0 3px 10px rgba(0, 0, 0, 0.5);
  color: var(--ds-text);
  font-size: calc(17px * var(--text-scale, 1));
  font-weight: 800;
  letter-spacing: 0.1em;
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-kicker { color: var(--ds-cyan-lit); text-shadow: var(--ds-text-shadow); }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-evidence,
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-cube__note,
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-matches__empty { color: var(--ds-text-dim); text-shadow: var(--ds-text-shadow); }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-entry-notice { color: #ffbdbd; text-shadow: var(--ds-text-shadow); }

/* The mode cube's six faces are slots until one is chosen. */
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-cube__face {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-slot-lit) 0%, var(--ds-slot) 55%, var(--ds-slot-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 2px var(--ds-rim),
    0 0 0 3px var(--ds-ink);
  color: var(--ds-text);
  font-family: var(--ds-font);
  font-weight: 700;
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-cube__face[aria-pressed="true"],
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-cube__face[data-selected="true"] {
  background: var(--ds-action-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 2px var(--ds-ink), 0 0 16px rgba(255, 200, 60, 0.55);
  color: #3a2100;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-cube__face:disabled { opacity: 1; filter: grayscale(0.7) brightness(0.5); }

:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-match__enter,
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-action {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-slot-lit) 0%, var(--ds-slot) 55%, var(--ds-slot-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 2px var(--ds-rim),
    0 0 0 3px var(--ds-ink);
  color: var(--ds-text);
  font-family: var(--ds-font);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-match__enter { border-radius: 18px; text-align: left; }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-action--primary {
  background: var(--ds-action-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 2px var(--ds-ink), 0 0 16px rgba(255, 200, 60, 0.45);
  color: #3a2100;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-action:disabled { opacity: 1; filter: grayscale(0.7) brightness(0.5); }
/* The skin above replaced vs5Styles' picked state, so picked party, practice,
   link and password members looked unpicked. A gold rim and a check mark keep
   the state readable without relying on colour alone. */
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-party .cm-vs5-action[aria-pressed="true"] {
  position: relative;
  padding-right: 44px;
  background: linear-gradient(180deg, #2f8a52 0%, #1d6a3c 55%, #0f4526 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 3px var(--ds-gold), 0 0 14px rgba(255, 223, 70, 0.55);
  /* The daylight rows set dark ink; on the green pick it disappeared. */
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-party .cm-vs5-action[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ds-gold);
  font-size: calc(20px * var(--text-scale, 1));
  font-weight: 900;
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-match__fee,
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-match__payout { color: var(--ds-gold); text-shadow: var(--ds-text-shadow); }
/* Gold fee text disappears on the gold primary card; use the card's own ink. */
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-action--primary .cm-vs5-match__fee,
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-action--primary .cm-vs5-match__payout { color: #5a3a00; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }

/* ---- 7.1 Battle field HUD -------------------------------------------- */
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen="BATTLE_FIELD"] .cm-vs5-clock { background: transparent; }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen="BATTLE_FIELD"] .cm-vs5-clock__caption { color: var(--ds-text-soft); text-shadow: var(--ds-text-shadow); }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen="BATTLE_FIELD"] .cm-vs5-clock__track {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-slot-deep), #03151f);
  box-shadow: inset 0 0 0 2px var(--ds-ink), 0 0 0 2px var(--ds-gold);
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen="BATTLE_FIELD"] .cm-vs5-clock__fill {
  background: linear-gradient(90deg, var(--ds-cyan), var(--ds-cyan-lit));
  box-shadow: 0 0 10px rgba(127, 233, 255, 0.7);
}

/* A fighter card is a readout, so it is a slot: dark inside, rim outside.
   The opponent's rim runs red so the two sides never blur together. */
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-fighter {
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--ds-slot-lit) 0%, var(--ds-slot) 55%, var(--ds-slot-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px var(--ds-rim), 0 0 0 3px var(--ds-ink);
  color: var(--ds-text);
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-roster--opponent .cm-vs5-fighter {
  background: linear-gradient(180deg, #4a1a1e 0%, #2d0f12 55%, #180708 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px #ff6a6a, 0 0 0 3px var(--ds-ink);
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-fighter[data-engaged="true"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 2px var(--ds-gold), 0 0 0 3px var(--ds-ink), 0 0 16px rgba(255, 200, 60, 0.6);
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-fighter[data-down="true"] { opacity: 1; filter: grayscale(0.75) brightness(0.55); }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-fighter__name { color: inherit; }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-fighter__hp { color: var(--ds-text); }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-meter {
  border-radius: 999px;
  background: linear-gradient(180deg, #03151f, #010a10);
  box-shadow: inset 0 0 0 1px var(--ds-ink);
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-meter__fill { background: linear-gradient(90deg, #2fd14a, #8bff9c); }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-meter--resource .cm-vs5-meter__fill { background: linear-gradient(90deg, var(--ds-cyan), var(--ds-cyan-lit)); }

:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-log {
  border: 0;
  border-radius: 14px;
  background: var(--ds-window-fill);
  box-shadow: inset 0 0 0 2px var(--ds-ink), 0 0 0 3px var(--ds-gold), 0 0 0 5px var(--ds-ink);
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-log__line { color: var(--ds-text); text-shadow: var(--ds-text-shadow); }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-log__detail { color: var(--ds-text-soft); }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-field {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px var(--ds-ink), 0 0 0 3px var(--ds-gold), 0 0 0 5px var(--ds-ink);
}

/* ---- 7.2 Result: the original's one red screen ------------------------- */
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen="BATTLE_RESULT"] .cm-vs5-result__body {
  color: var(--ds-text);
  background: linear-gradient(180deg, var(--ds-panel-lit), var(--ds-panel-deep));
  border-color: var(--ds-gold);
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-letter__ack:disabled { filter: grayscale(0.7) brightness(0.55); cursor: default; }
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-letter__ack:focus-visible { outline: 3px solid var(--ds-cyan-lit); outline-offset: 4px; }
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-letter__ack:not(:disabled):hover { filter: brightness(1.2); }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen="BATTLE_RESULT"] .cm-vs5-result__rank { color: var(--ds-text); }
/* Result lines are statements, not controls: a window with a gold ring read
   as a button (2026-09-28 QA), so they sit as plain rows on the panel. */
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-result__detail {
  border: 0;
  border-radius: 0;
  padding: 6px 4px;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: calc(14px * var(--text-scale, 1));
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-shadow: none;
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen] .cm-vs5-result__detail + .cm-vs5-result__detail { border-top: 1px solid rgba(122, 190, 224, 0.4); }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen="BATTLE_RESULT"] .cm-vs5-shell {
  background-image:
    var(--ds-hex),
    radial-gradient(130% 62% at 50% 0%, rgba(255, 190, 190, 0.45) 0%, rgba(216, 31, 38, 0.25) 38%, rgba(120, 12, 18, 0) 74%),
    linear-gradient(180deg, #c81f26 0%, #8c1016 42%, #3a0a10 78%, #0a4a86 100%);
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen="BATTLE_RESULT"] .cm-vs5-title {
  box-shadow: 0 0 0 2px var(--ds-gold), 0 0 0 4px var(--ds-ink), 0 0 22px rgba(255, 200, 60, 0.55);
}

/* ---- 6.6 Shop and encyclopaedia lists --------------------------------- */
/* Both screens share one body: a sticky tab strip over a list of rows. The
   tab strip is the ribbon's tab language; the rows are slots with one filled
   action each, because buying is the only thing you press here. */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-shop__tabs {
  background: linear-gradient(180deg, rgba(4, 28, 52, 0.92), rgba(4, 28, 52, 0.55));
  padding: 6px 0 9px;
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-shop__tab {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-slot-lit), var(--ds-slot-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px var(--ds-rim), 0 0 0 3px var(--ds-ink);
  color: var(--ds-text);
  font-family: var(--ds-font);
  font-weight: 700;
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-shop__tab[data-active="true"] {
  background: var(--ds-action-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 2px var(--ds-ink), 0 0 14px rgba(255, 200, 60, 0.5);
  color: #3a2100;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-shop__row {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--ds-slot-lit) 0%, var(--ds-slot) 55%, var(--ds-slot-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 2px var(--ds-rim),
    0 0 0 3px var(--ds-ink),
    0 0 12px var(--ds-rim-soft);
  color: var(--ds-text);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-shop__name strong { color: var(--ds-text); text-shadow: var(--ds-text-shadow); }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-shop__meta,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-shop__empty,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-shop__status { color: var(--ds-text-soft); text-shadow: var(--ds-text-shadow); }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-shop__new {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-gold-lit), var(--ds-amber));
  box-shadow: 0 0 0 2px var(--ds-ink);
  color: #3a2100;
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-shop__buy {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ds-green-lit) 0%, var(--ds-green) 52%, var(--ds-green-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 2px var(--ds-ink), 0 2px 0 rgba(0, 0, 0, 0.3);
  color: var(--ds-text);
  font-family: var(--ds-font);
  font-weight: 700;
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-shop__buy:disabled { opacity: 1; filter: grayscale(0.75) brightness(0.5); }

/* ====================================================================== *
 * 8. POLISH -- the places the first pass left hard to read
 * ====================================================================== */

/* Help: the cartridge groups topics under headings, and the product rendered
   both at the same weight on the same ground. The heading now reads as a
   heading and the topics as the capsules they are. */
:where(:root[data-theme="classic"]) .cm-help-root .cm-help-heading {
  flex: 1 0 100%;
  margin: 12px 0 2px;
  padding: 3px 14px 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(4, 28, 52, 0.9), rgba(4, 28, 52, 0.4));
  box-shadow: inset 0 0 0 1px rgba(255, 223, 70, 0.45);
  color: var(--ds-gold);
  font-size: calc(0.68rem * var(--text-scale, 1));
  font-weight: 800;
  letter-spacing: 0.16em;
  text-shadow: var(--ds-text-shadow);
}
:where(:root[data-theme="classic"]) .cm-help-root .cm-help-heading:first-child { margin-top: 0; }
:where(:root[data-theme="classic"]) .cm-help-root .cm-help-topic { min-height: 34px; padding: 5px 13px; font-size: calc(0.72rem * var(--text-scale, 1)); }
:where(:root[data-theme="classic"]) .cm-help-root .cm-help-detail__body { color: var(--ds-text); }

/* Tamer info: the original prints the value in the same ink as the label, and
   the product had it near-invisible when the field is not yet sourced. */
:where(:root[data-theme="classic"]) .cm-tamer-root .cm-tamer-field__value { font-size: calc(1rem * var(--text-scale, 1)); }
:where(:root[data-theme="classic"]) .cm-tamer-root .cm-tamer-field__value[data-state="UNSOURCED"] { color: #9dc4dc; opacity: 0.85; }

/* Cage edit and the encyclopaedia both print instructions straight on the
   mesh, where dark ink disappears. */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-shell p,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-shell li { color: var(--ds-text-soft); }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-cage-board-hint,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-cage-rank__label { color: var(--ds-text-soft); text-shadow: var(--ds-text-shadow); }

:where(:root[data-theme="classic"]) .cm-title {
  background-image:
    var(--ds-hex),
    radial-gradient(130% 70% at 50% 4%, rgba(140, 240, 255, 0.5) 0%, rgba(31, 139, 255, 0.22) 40%, rgba(11, 86, 232, 0) 76%),
    linear-gradient(180deg, var(--ds-blue) 0%, var(--ds-blue-mid) 40%, var(--ds-blue-deep) 76%, var(--ds-navy-deep) 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 40px 69px, 100% 100%, 100% 100%;
}
:where(:root[data-theme="classic"]) .cm-title__panel { gap: 22px; }
:where(:root[data-theme="classic"]) .cm-title__eyebrow { color: var(--ds-cyan-lit); text-shadow: 0 0 10px rgba(127, 233, 255, 0.6); }
:where(:root[data-theme="classic"]) .cm-title__name { font-family: var(--ds-font); text-shadow: 0 3px 0 rgba(4, 16, 26, 0.6); }
:where(:root[data-theme="classic"]) .cm-title__tagline { color: var(--ds-text-soft); text-shadow: var(--ds-text-shadow); }
:where(:root[data-theme="classic"]) .cm-title__note { color: var(--ds-cyan-lit); text-shadow: var(--ds-text-shadow); }
:where(:root[data-theme="classic"]) .cm-title__actions { gap: 14px; }

:where(:root[data-theme="classic"]) .cm-title__panel { width: min(100vw, 430px, 56.25dvh); }

/* The opening overlay is the one child that positions against the panel, so it
   is the one that has to be told the panel is now the game column. */
:where(:root[data-theme="classic"]) #cm-opening { inset: 0; }
:where(:root[data-theme="classic"]) .cm-opening__envelope { right: 12%; bottom: 24%; }

/* ---- 10.1 The habitat frame is the ground the ranch sits on ------------- */
/* The field presentation no longer paints a pale rectangle behind the ranch,
   so the frame itself now carries the mesh. The ranch reads as a platform in
   the digital world instead of a plate on a blank sheet, and the space the
   fitted ranch does not fill stops looking like missing art. */
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-field-frame {
  background-image:
    var(--ds-hex),
    radial-gradient(120% 80% at 50% 0%, rgba(140, 240, 255, 0.34) 0%, rgba(31, 139, 255, 0.16) 40%, rgba(11, 86, 232, 0) 78%),
    linear-gradient(180deg, #0a4f9e 0%, #073a7c 48%, #04244f 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 40px 69px, 100% 100%, 100% 100%;
}

/* The ranch is the subject; a soft vignette pushes the mesh behind it without
   hiding any of the playable plate. */
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-field-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(115% 78% at 50% 48%, rgba(0, 0, 0, 0) 52%, rgba(2, 12, 28, 0.45) 100%);
}
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-field-host { position: relative; z-index: 2; }
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-field-frame__label { z-index: 3; }

/* The Hunt field prints two hints straight over the world art, and the bright
   layer gave them a pale chip that now reads as a hole in the scene. */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-vs2-field__hint,
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-memory {
  border: 0;
  border-radius: 999px;
  padding: 5px 12px;
  background: linear-gradient(180deg, rgba(10, 40, 62, 0.92), rgba(3, 18, 30, 0.92));
  box-shadow: 0 0 0 2px var(--ds-ink), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--ds-text-soft);
  text-shadow: var(--ds-text-shadow);
}

:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__rail {
  background:
    linear-gradient(180deg, var(--ds-gold-lit) 0%, var(--ds-gold) 30%,
      var(--ds-gold-mid) 58%, var(--ds-amber-deep) 100%);
  border-top: 2px solid var(--ds-ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.65), 0 -6px 18px rgba(0, 10, 25, 0.5);
}

:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell {
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* The plate. `::after` sits under the icon, which `::before` still carries. */
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ds-hex-plate-rest) center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell::before { z-index: 1; inset: 23%; }

:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[aria-pressed="true"],
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[aria-expanded="true"] {
  background: none;
  box-shadow: none;
}
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[aria-pressed="true"]::after,
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell[aria-expanded="true"]::after {
  background: var(--ds-hex-plate-lit) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 8px rgba(120, 255, 130, 0.65));
}

/* The count chip has to live inside the hexagon now, not on a circle's rim. */
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__stock {
  right: auto;
  left: 50%;
  bottom: 4%;
  z-index: 2;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #143a55, #061722);
}

/* The schedule packed 61 fixture buttons at 30px and Help 68 topics at 34px.
   Both are reachable with a stylus on the original and neither is reachable
   with a thumb here. 40px is the smallest that still fits eight days across a
   390px phone without dropping to three columns. */
:where(:root[data-theme="classic"]) .cm-schedule-root .cm-schedule-fixture { min-height: 40px; padding: 0.4rem 0.5rem; }
:where(:root[data-theme="classic"]) .cm-schedule-root .cm-schedule-day { min-height: 76px; }
:where(:root[data-theme="classic"]) .cm-help-root .cm-help-topic { min-height: 40px; padding: 7px 14px; }

/* A placed facility is a "take it back" action, not a row you choose between,
   so it has no chosen state to show -- but it must still answer a press. */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-cage-facility { transition: filter 120ms ease, transform 90ms ease; }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-cage-facility:hover:not(:disabled) { filter: brightness(1.3); }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="CAGE_EDIT"] .cm-cage-facility:not(:disabled):active { transform: translateY(2px); }

/* ---- 12.1 Shop goods: one icon language ------------------------------- */
/* The goods binding now points at the approved toolbar cells, so the icon a
   shop row shows is the icon the rail shows. It sits on the same dark plate. */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-shop-goods-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background-color: #10303f;
  background-size: 74% 74%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 2px var(--ds-gold), 0 0 0 3px var(--ds-ink);
  image-rendering: pixelated;
}

/* ---- 12.2 Hunt tools: icons on the rail's hexagon --------------------- */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-tools { gap: 8px; }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-tools .cm-vs2-action {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  min-height: 58px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 0;
  overflow: visible;
}
/* The same plate the care rail uses, so one screen does not invent a second
   way of showing a tool. */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-tools .cm-vs2-action::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ds-hex-plate-rest) center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-tools .cm-vs2-action[aria-pressed="true"]::after {
  background: var(--ds-hex-plate-lit) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 8px rgba(120, 255, 130, 0.65));
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-tools .cm-vs2-action .cm-hunt-tools__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-tools .cm-vs2-action[data-has-tool-art="false"] .cm-hunt-tools__label {
  font-size: var(--fs-caption);
  line-height: 1.2;
  max-width: 54px;
  overflow-wrap: anywhere;
}
/* Hunt art is bound by the equipped item, shared with Shop and Loadout. */

:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-system-button::before { width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M2 1h11v1h-11zM1 2h1v1h-1zM13 2h1v1h-1zM1 3h1v1h-1zM14 3h1v1h-1zM1 4h1v1h-1zM4 4h1v1h-1zM9 4h2v1h-2zM14 4h1v1h-1zM1 5h1v1h-1zM4 5h1v1h-1zM9 5h2v1h-2zM14 5h1v1h-1zM1 6h1v1h-1zM4 6h1v1h-1zM9 6h2v1h-2zM14 6h1v1h-1zM1 7h1v1h-1zM14 7h1v1h-1zM1 8h1v1h-1zM14 8h1v1h-1zM1 9h1v1h-1zM14 9h1v1h-1zM1 10h1v1h-1zM5 10h6v1h-6zM14 10h1v1h-1zM1 11h1v1h-1zM5 11h1v1h-1zM10 11h1v1h-1zM14 11h1v1h-1zM1 12h1v1h-1zM5 12h6v1h-6zM14 12h1v1h-1zM1 13h1v1h-1zM14 13h1v1h-1zM2 14h12v1h-12z' fill='%23292929'/%3E%3Cpath d='M4 3h1v1h-1zM9 3h2v1h-2zM3 4h1v1h-1zM8 4h1v1h-1zM13 4h1v1h-1zM3 5h1v1h-1zM8 5h1v1h-1zM13 5h1v1h-1zM3 6h1v1h-1zM8 6h1v1h-1zM13 6h1v1h-1zM13 7h1v1h-1zM13 8h1v1h-1zM5 9h6v1h-6zM13 9h1v1h-1zM4 10h1v1h-1zM13 10h1v1h-1zM4 11h1v1h-1zM13 11h1v1h-1zM4 12h1v1h-1zM13 12h1v1h-1zM3 13h2v1h-2zM11 13h3v1h-3z' fill='%23413939'/%3E%3Cpath d='M13 3h1v1h-1zM12 4h1v1h-1zM12 5h1v1h-1zM12 6h1v1h-1zM11 7h2v1h-2zM8 8h5v1h-5zM11 9h2v1h-2zM12 10h1v1h-1zM12 11h1v1h-1zM12 12h1v1h-1zM5 13h6v1h-6z' fill='%236a6a6a'/%3E%3Cpath d='M12 2h1v1h-1zM3 3h1v1h-1zM5 3h4v1h-4zM11 3h2v1h-2zM6 4h2v1h-2zM6 5h2v1h-2zM6 6h2v1h-2zM3 7h1v1h-1zM5 7h4v1h-4zM3 8h5v1h-5zM3 9h2v1h-2zM3 10h1v1h-1zM3 11h1v1h-1zM3 12h1v1h-1zM2 13h1v1h-1z' fill='%239c9c9c'/%3E%3Cpath d='M2 2h10v1h-10zM2 3h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM11 4h1v1h-1zM2 5h1v1h-1zM5 5h1v1h-1zM11 5h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM11 6h1v1h-1zM2 7h1v1h-1zM4 7h1v1h-1zM9 7h2v1h-2zM2 8h1v1h-1zM2 9h1v1h-1zM2 10h1v1h-1zM11 10h1v1h-1zM2 11h1v1h-1zM11 11h1v1h-1zM2 12h1v1h-1zM11 12h1v1h-1z' fill='%23c5ffff'/%3E%3C/svg%3E") center / contain no-repeat; }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-tools .cm-vs2-action:disabled { filter: grayscale(0.75) brightness(0.5); }

/* Owner 2026-09-16: the habitat fills the frame. It used to be pinned to 4:3
   and centred, so picking a resident grew the readout, shortened this row, and
   the frame answered by narrowing itself and sitting to one side. */
:where(:root[data-theme="classic"]) .int-rh2-root .int-rh2-field-frame {
  align-self: stretch;
  min-height: 180px;
}

/* Owner 2026-09-13: the former landscape reflow is replaced by the
   single portrait containing block below. */

/* Keep the save notice below both actions on short displays. Its higher
   stacking order previously intercepted the Continue button at 740x360. */
@media (max-height: 550px) and (orientation: portrait) {
  :where(:root[data-theme="classic"]) .cm-title__actions { top: auto; bottom: 12%; gap: 8px; }
  :where(:root[data-theme="classic"]) .cm-title__actions .cm-button { height: 44px; min-height: 44px; padding-block: 6px; }
}
:where(:root[data-theme="classic"]) .cm-title__note { pointer-events: none; }

/* Photo QA 2026-09-13. One portrait frame on a sideways device. Its fixed
   descendants share this containing block; renderer size remains in CSS units. */
:where(:root[data-theme="classic"]) body[data-portrait-frame] {
  position: fixed;
  left: var(--cm-frame-center-x); top: var(--cm-frame-center-y);
  width: 390px; height: var(--cm-viewport-height);
  transform: translate(-50%, -50%) scale(var(--cm-frame-scale));
  transform-origin: center;
  overflow: hidden;
}
:where(:root[data-theme="classic"]) body[data-portrait-frame] .cm-status-bar[data-screen],
:where(:root[data-theme="classic"]) body[data-portrait-frame] .cm-toolbar[data-mode] {
  left: 0; right: 0; width: auto; transform: none;
}
:where(:root[data-theme="classic"]) body[data-portrait-frame] .cm-title__panel {
  width: 390px; height: var(--cm-viewport-height);
}
:where(:root[data-theme="classic"]) body[data-portrait-frame] .cm-title__name { font-size: calc(50px * var(--text-scale, 1)); }
:where(:root[data-theme="classic"]) body[data-portrait-frame] .cm-title__actions { top: auto; bottom: 12%; gap: 14px; }
:where(:root[data-theme="classic"]) body[data-portrait-frame] .cm-title__actions .cm-button { min-height: 52px; height: auto; white-space: nowrap; }

/* Lists own scrolling; rows retain their content height and their frames have
   space outside the content box. This includes full-inventory QA saves. */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_LOADOUT"] .cm-vs2-body { padding: 10px 14px 18px; }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_LOADOUT"] .cm-vs2-body > * { flex-shrink: 0; }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_LOADOUT"] .cm-vs2-loadout { gap: 16px; }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_LOADOUT"] .cm-vs2-loadout__row {
  grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 12px;
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_LOADOUT"] .cm-vs2-loadout__label { font-size: calc(14px * var(--text-scale, 1)); }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_LOADOUT"] .cm-vs2-loadout__options {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_LOADOUT"] .cm-vs2-loadout__option {
  min-width: 0; min-height: 56px; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 4px; padding: 8px;
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_LOADOUT"] .cm-vs2-loadout__detail { color: var(--ds-text-soft); }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen="BATTLE_SELECT"] .cm-vs5-shell > * { flex-shrink: 0; }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen="BATTLE_SELECT"] .cm-vs5-party {
  overflow: visible; padding: 8px 14px 14px; gap: 14px;
}
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen="BATTLE_SELECT"] .cm-vs5-party > * { flex-shrink: 0; }
:where(:root[data-theme="classic"]) .cm-vs5-root[data-screen="BATTLE_SELECT"] .cm-vs5-action { white-space: normal; }

/* A single row, in the source tool order. No button is spread across the field. */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-tools {
  display: flex; justify-content: center; gap: 4px;
  left: 4px; right: 4px; bottom: 34px; padding: 6px 0;
  background: #061f2cba; border-radius: 12px;
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_FIELD"] .cm-hunt-tools .cm-vs2-action {
  flex: 1 1 0; width: 0; min-width: 0; max-width: 52px; height: 48px; min-height: 48px;
}
:where(:root[data-theme="classic"]) .cm-hunt-info {
  position: absolute; z-index: 5; top: 65px; left: 10px; right: 10px;
  display: flex; align-items: flex-start; gap: 8px; pointer-events: none;
}
:where(:root[data-theme="classic"]) .cm-hunt-info .cm-vs2-target {
  position: relative; top: auto; left: auto; flex: 1; width: auto; min-width: 0;
}
:where(:root[data-theme="classic"]) .cm-hunt-info .cm-hunt-plugin-hud { position: static; flex: 0 0 auto; }
:where(:root[data-theme="classic"]) .cm-hunt-info .cm-hunt-radar { width: 64px; height: 64px; }
:where(:root[data-theme="classic"]) .cm-hunt-info .cm-hunt-plugin-hud:has(> [hidden]):not(:has(> :not([hidden]))) { display: none; }
:where(:root[data-theme="classic"]) .cm-hunt-info .cm-vs2-target__stats { grid-template-columns: auto minmax(0,1fr) auto minmax(0,1fr); gap: 4px; }

:where(:root[data-theme="classic"]) .cm-vs2-result__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; text-align: left; }
:where(:root[data-theme="classic"]) .cm-vs2-result__thumbnail { display: grid; place-items: center; width: 48px; height: 56px; }
:where(:root[data-theme="classic"]) .cm-vs2-result__thumbnail img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

/* ====================================================================== *
 * 15. Highlight states must not hide what they highlight
 *
 * Owner QA, 2026-09-12: the option under the cursor turned white and its
 * label disappeared -- on the menu and on the icon rail both.
 *
 * Cause. Three older layers paint a PALE FILL for the hovered state:
 *   raisingHomeHud  .cm-toolbar[data-mode="1"] .cm-toolbar__entry:hover  #d8f2e5
 *   intRh2Styles    .cm-toolbar[data-mode="1"] .cm-toolbar__cell:hover   #fff3c7
 *   styles          .cm-toolbar__cell:hover                    rgba(30,78,104,.95)
 * and this skin answered each with `filter` alone. A filter cannot override a
 * background -- different property, no conflict to win -- so the pale fill
 * still painted and brightness() then washed it out to white on white.
 *
 * On the rail it read as a white SQUARE behind the hexagon, because the plate
 * is drawn on ::after and does not reach the button's corners.
 *
 * The rule this encodes: a state must own the same properties as the layer
 * beneath it. Lighting a control is not a filter, it is a defined surface.
 * ====================================================================== */

/* The rail: the plate IS the control, so the button carries no fill in any
   state. Light the plate itself rather than a box behind it. */
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell:hover:not(:disabled),
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell:focus-visible {
  background: none;
  filter: none;
}
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell:hover:not(:disabled)::after,
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__cell:focus-visible::after {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)) brightness(1.18);
}

/* The menu: keep the dark slot and mark the choice with the gold rim the
   original uses. Green stays rim, never fill -- and the label stays legible. */
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__entry:hover:not(:disabled),
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__entry:focus-visible {
  background: linear-gradient(180deg, var(--ds-slot-lit) 0%, var(--ds-slot) 55%, var(--ds-slot-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 2px var(--ds-gold),
    0 0 0 3px var(--ds-ink),
    0 0 14px rgba(255, 223, 70, 0.45);
  color: var(--ds-text);
  filter: none;
}

/* The two gold actions stay gold when hovered, with their dark ink intact. */
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__entry[data-entry-id="endDay"]:hover:not(:disabled),
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__entry[data-entry-id="saveQuit"]:hover:not(:disabled),
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__entry[data-entry-id="endDay"]:focus-visible,
:where(:root[data-theme="classic"]) .cm-toolbar[data-mode] .cm-toolbar__entry[data-entry-id="saveQuit"]:focus-visible {
  background: var(--ds-action-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 2px var(--ds-ink),
    0 0 18px rgba(255, 200, 60, 0.65);
  color: #3a2100;
  filter: brightness(1.05);
}

/* ====================================================================== *
 * 16. The hunt result shows what you caught
 *
 * Owner QA: "原作結束狩獵會看得到抓到的數碼獸的外觀". The screen named the
 * species and showed nothing else. The portrait comes from the same registered
 * bank the Raising home and the battle result use, so it is one art language
 * rather than a second source for the same creature.
 *
 * Framed as a slot -- dark inside, bright rim -- because that is what the
 * original does with a thing it is presenting to you, and because green here
 * stays rim rather than becoming fill.
 *
 * `display: block` here is deliberately weaker than `#cm-root [hidden]` in
 * styles.css, so a creature with no registered portrait still hides cleanly
 * instead of leaving a broken image in the frame.
 * ====================================================================== */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-result__portrait {
  display: block;
  margin: 0 auto 10px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--ds-slot-lit) 0%, var(--ds-slot) 55%, var(--ds-slot-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 2px var(--ds-rim),
    0 0 0 3px var(--ds-ink),
    0 0 16px var(--ds-rim-soft);
  image-rendering: pixelated;
  object-fit: contain;
}

/* The "GIVEN NAME" label sat on --vs2-muted, a tone chosen for the old pale
   panel. On the skin's blue mesh it is barely legible -- the same failure as
   section 15, reached from the other direction: not an overridden state, but a
   colour that was only ever readable against the surface it was written for. */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-result__name-label {
  color: var(--ds-rim);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-vs2-result__note {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Complete item cells keep one identity in Shop and equipment selection. */
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen="HUNT_LOADOUT"] .cm-vs2-loadout__option[data-has-art] {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto; column-gap: 7px; min-height: 68px;
}
:where(:root[data-theme="classic"]) .cm-vs2-loadout__icon {
  width: 34px; height: 42px; object-fit: contain; image-rendering: pixelated;
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
}
:where(:root[data-theme="classic"]) .cm-vs2-loadout__option[data-has-art] .cm-vs2-loadout__name,
:where(:root[data-theme="classic"]) .cm-vs2-loadout__option[data-has-art] .cm-vs2-loadout__detail { grid-column: 2; }

:where(:root[data-theme="classic"]) .cm-vs2-gate__aperture--complete {
  background-size: contain; background-repeat: no-repeat; background-position: center;
  image-rendering: pixelated;
}
:where(:root[data-theme="classic"]) .cm-vs2-result__portrait-card { width: fit-content; max-width: 100%; margin: 0 auto 10px; }
:where(:root[data-theme="classic"]) .cm-vs2-result__portrait-card.cm-memory-card-frame { padding: 22px; background: #0a2731; }
:where(:root[data-theme="classic"]) .cm-vs2-root[data-screen] .cm-memory-card-frame .cm-vs2-result__portrait {
  padding: 0; margin: 0; border-radius: 0; background: none; box-shadow: none;
  max-width: 160px; max-height: 160px; object-fit: contain;
}
:where(:root[data-theme="classic"]) .cm-memory-card-frame { position: relative; isolation: isolate; }
:where(:root[data-theme="classic"]) .cm-memory-card-frame__piece {
  position: absolute; pointer-events: none; z-index: 2; image-rendering: pixelated;
  width: 28px; height: 28px; background-repeat: no-repeat; background-size: 100% 100%;
}
:where(:root[data-theme="classic"]) .cm-memory-card-frame__piece--tl { left: 0; top: 0; width: 32px; height: 24px; }
:where(:root[data-theme="classic"]) .cm-memory-card-frame__piece--tr { right: 0; top: 0; width: 40px; height: 16px; }
:where(:root[data-theme="classic"]) .cm-memory-card-frame__piece--bl { left: 0; bottom: 0; width: 16px; height: 24px; }
:where(:root[data-theme="classic"]) .cm-memory-card-frame__piece--br { right: 0; bottom: 0; width: 16px; height: 24px; }
:where(:root[data-theme="classic"]) .cm-memory-card-frame__piece--top { left: 32px; right: 40px; top: 0; width: auto; height: 8px; }
:where(:root[data-theme="classic"]) .cm-memory-card-frame__piece--bottom { left: 16px; right: 16px; bottom: 0; width: auto; height: 8px; }
:where(:root[data-theme="classic"]) .cm-memory-card-frame__piece--left { left: 0; top: 24px; bottom: 24px; height: auto; width: 8px; }
:where(:root[data-theme="classic"]) .cm-memory-card-frame__piece--right { right: 0; top: 16px; bottom: 24px; height: auto; width: 8px; }

/* ====================================================================== *
 * 17. THE CLASSIC THEME ON THE 2026-09-29 LAYOUT
 *
 * Everything above was written for the screens before the redesign. The
 * redesign kept the class vocabulary but added an eyebrow over each screen
 * title, new status-bar readouts and token-driven parts (settings, dialogs,
 * the highlight). These rules fit the skin to that layout without changing
 * it: colour, frame and finish only.
 * ====================================================================== */

/* The skin makes each screen title an inline pill; the redesign puts an
   inline eyebrow before it. Give the eyebrow its own line, and leave room for
   the pill's ring (drawn with box-shadow, which takes no space) so it never
   sits on the eyebrow above or the lede below. */
:root[data-theme="classic"] .cm-vs2-kicker,
:root[data-theme="classic"] .cm-vs5-kicker {
  display: flex;
}
:root[data-theme="classic"] .cm-vs2-root[data-screen] .cm-vs2-title,
:root[data-theme="classic"] .cm-vs5-root[data-screen] .cm-vs5-title {
  margin: 6px 0 6px 4px;
}

/* Status-bar readouts the redesign added: on the gold ribbon they read as
   the dark slots the skin already uses for "end day". */
:root[data-theme="classic"] .cm-status-bar[data-screen] .cm-status-bar__matches,
:root[data-theme="classic"] .cm-status-bar[data-screen] .cm-status-bar__save {
  border: 0;
  border-radius: 999px;
  padding: 2px 10px;
  background: linear-gradient(180deg, var(--ds-slot-lit), var(--ds-slot-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 2px var(--ds-rim), 0 0 0 3px var(--ds-ink);
  color: var(--ds-text);
  text-shadow: var(--ds-text-shadow);
}
:root[data-theme="classic"] .cm-status-bar[data-screen] .cm-status-bar__bits {
  color: #ffe79d;
  font-weight: 800;
  text-shadow: var(--ds-text-shadow);
}

/* The skin set the menu sheet to position: relative, which turned the
   redesign's inset offsets into a 12px push past the right edge. The sheet
   keeps the redesign's placement; the skin's frame still draws inside it. */
:root[data-theme="classic"] .cm-toolbar[data-mode] .cm-toolbar__menu {
  position: absolute;
}

/* Spaced pill labels need the room at larger text: long English labels
   ("Start Password Battle") were 2px wider than a 360px phone at 130%. */
:root[data-theme="classic"]:is([data-text-scale="115"], [data-text-scale="130"]) .cm-vs5-root[data-screen] .cm-vs5-action {
  letter-spacing: 0.01em;
}