/* 🌌 Hub + page theme — "every page fits the new theme" (owner 2026-10-14)
   ─────────────────────────────────────────────────────────────────────────────
   Linked right after src/theme/theme.css (LAST in index.html), scoped the same
   way, `:root:not(.mt-classic)`, so localStorage mt_theme='classic' takes every
   rule here back off as well.

   Forge Sanctum, Ruin Exchange, The Codex, The Camp ('field') and Arcanum are ONE
   render — renderTitle()'s `.spellbook-hub.is-sub.hub-v2[data-hub=…]` shell, built
   from src/hubui/hub-keep.css + hub-tiles.css. So the bulk of this file is:
     1. the --keep-* TOKENS (183 reads across hubui) → navy stone, cyan hairline;
     2. the plates and the wash, de-sepia'd and cooled (the warm grade was a
        rule of the gold design, not of the art);
     3. the tile, tab, plaque and title primitives where hubui hard-codes gold.
   Then the screens that are NOT the hub shell: choose-your-deck (.dsx), the
   global back-button standard, .btn-mini, the keep modals, the Warpath gate
   (inline styles → id/attribute overrides) and the shared section titles.

   ⚠ Specificity, not order, is what wins here: hubui's selectors run to
     (0,4,1) and several legacy rules carry !important (back buttons, .btn-mini,
     .dsx-backdrop). Each override below is written to out-rank the rule it
     replaces; where the original is !important, so is the override. Nothing in
     the shipped sheets is edited. */

/* ═══════════════════════════════ 1 · TOKENS ═══════════════════════════════ */
:root:not(.mt-classic) {
  --keep-ground-0: #110909;
  --keep-ground-1: #211112;
  --keep-stone-hi: #451a1c;
  --keep-stone-lo: #1c0c0d;
  --keep-gold-line:      rgba(247, 75, 68, 0.50);
  --keep-gold-line-soft: rgba(247, 75, 68, 0.30);
  --keep-gold:      #ea867e;
  --keep-gold-body: #ea867e;
  --keep-gold-hi:   #ff7f77;
  --keep-gold-hi-2: #ff6b60;
  --keep-gold-lit:  #ffffff;
  --keep-gold-grey: #c9918e;
  --keep-emboss: inset 0 1px 0 rgba(255, 115, 105, 0.14);
  --keep-liner:  inset 0 0 0 1px rgba(0, 0, 0, 0.6);

  /* theme-wide neon frame + glass face, reused below */
  --mt-frame:     linear-gradient(180deg, rgba(255, 128, 120, 0.85) 0%, rgba(212, 51, 48, 0.55) 50%, rgba(141, 27, 28, 0.6) 100%);
  --mt-frame-hot: linear-gradient(180deg, #ffffff 0%, #ff7f77 45%, #da201d 100%);
  --mt-face:      linear-gradient(180deg, rgba(69, 26, 28, 0.94) 0%, rgba(36, 18, 19, 0.95) 50%, rgba(21, 10, 10, 0.97) 100%);
  --mt-face-hot:  linear-gradient(180deg, rgba(91, 35, 37, 0.96) 0%, rgba(54, 19, 20, 0.96) 55%, rgba(28, 13, 14, 0.98) 100%);
  --mt-title:     linear-gradient(180deg, #ffffff 0%, #ff685d 34%, #ff786f 68%, #e8423d 100%);
}

/* ══════════════════════ 2 · HUB BACKGROUNDS + THE WASH ══════════════════════
   The plates go back to their own colour (the sepia() in each per-hub filter
   was there to drag them into the gold family). Forge and Codex keep their
   --keep-bg-zoom crops — those hide burnt-in signage, not colour. */
:root:not(.mt-classic) .spellbook-hub.is-sub[data-hub] {
  --keep-bg-filter: brightness(0.82) saturate(1.05) contrast(1.06);
}
:root:not(.mt-classic) .spellbook-hub.is-sub[data-hub="forge"] {
  --keep-bg-filter: brightness(0.74) saturate(0.9) contrast(1.08) hue-rotate(-8deg);
  --keep-scrim-extra: linear-gradient(0deg, rgba(18, 8, 9, 0.6) 0%, rgba(18, 8, 9, 0.46) 11%, rgba(18, 8, 9, 0) 21%);
}
:root:not(.mt-classic) .spellbook-hub.is-sub[data-hub="field"] {
  --keep-scrim-extra: linear-gradient(180deg, rgba(18, 8, 9, 0.26) 0%, rgba(18, 8, 9, 0.54) 27%, rgba(18, 8, 9, 0.48) 37%, rgba(18, 8, 9, 0) 47%);
}
:root:not(.mt-classic) .spellbook-hub.is-sub .spellbook-hub-bg::before {
  /* hub-keep.css's four-layer wash, same geometry and alphas, navy stops */
  background:
    var(--keep-scrim-extra, none),
    linear-gradient(180deg, rgba(18, 8, 9, 0.66) 0%, rgba(18, 8, 9, 0.52) 14%, rgba(18, 8, 9, 0.34) 20%, rgba(18, 8, 9, 0.12) 24%, rgba(18, 8, 9, 0) 27%),
    linear-gradient(0deg,   rgba(18, 8, 9, 0.70) 0%, rgba(18, 8, 9, 0.36) 9%, rgba(18, 8, 9, 0.08) 17%, rgba(18, 8, 9, 0) 24%),
    radial-gradient(140% 108% at 50% 38%, rgba(28, 12, 13, 0) 0%, rgba(28, 12, 13, 0.24) 62%, rgba(13, 5, 6, 0.62) 100%),
    linear-gradient(180deg, rgba(43, 19, 21, 0.40) 0%, rgba(28, 12, 13, 0.12) 30%, rgba(21, 9, 10, 0.28) 72%, rgba(15, 6, 7, 0.46) 100%);
}
:root:not(.mt-classic) .spellbook-hub.is-sub .spellbook-hub-bg { background-color: #110909; }
:root:not(.mt-classic) .spellbook-hub.is-sub .spellbook-hub-bg .keep-fg-l,
:root:not(.mt-classic) .spellbook-hub.is-sub .spellbook-hub-bg .keep-fg-r { filter: brightness(0.5) saturate(0.8) sepia(0.5) hue-rotate(-28deg) contrast(1.1); }   /* 🩸 the side statues: red night, not the blue one (was hue-rotate(180deg)) */

/* ═══════════════════════ 3 · TITLE, TABS, PLAQUES ═══════════════════════ */
:root:not(.mt-classic) .spellbook-hub.is-sub .hub-title,
:root:not(.mt-classic) .keep-stamp {
  background: var(--mt-title);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
  font-weight: 600;
  letter-spacing: 0.16em; text-indent: 0.16em;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.85)) drop-shadow(0 0 26px rgba(255, 77, 70, 0.35));
}
:root:not(.mt-classic) .spellbook-hub.is-sub .hub-subtitle { color: #e09691; }
:root:not(.mt-classic) .keep-rule i,
:root:not(.mt-classic) .keep-diamond { filter: hue-rotate(-38deg) saturate(2.2) brightness(1); }   /* 🩸 2026-10-26: was hue-rotate(160deg) (gold → cyan); crimson turns the gold to red */
/* 🩸 the hub's side hero (black armour with blue lights): a hue turn takes only the lights to crimson — the armour is grey */
:root:not(.mt-classic) .hub-side-hero { filter: hue-rotate(150deg) saturate(1.25) drop-shadow(0 0 30px rgba(190, 20, 20, .32)); }

/* the one back button / breadcrumb tab — cyan frame, navy face */
:root:not(.mt-classic) .keep-tab,
:root:not(.mt-classic) .keep-plaque { background: var(--mt-frame); color: #eb827b; }
:root:not(.mt-classic) .keep-tab::before,
:root:not(.mt-classic) .keep-plaque::before { background: var(--mt-face); }
:root:not(.mt-classic) .keep-tab .keep-tab-arrow { color: #ff776f; }
:root:not(.mt-classic) .keep-tab.is-current { background: var(--mt-frame-hot); color: #ffffff; text-shadow: 0 0 10px rgba(255, 77, 70, 0.7), 0 2px 0 rgba(0, 0, 0, 0.7); }
:root:not(.mt-classic) .keep-tab.is-current::before { background: var(--mt-face-hot); }
:root:not(.mt-classic) .keep-tab:hover { color: #ffffff; }
:root:not(.mt-classic) .keep-tab:hover::before { background: var(--mt-face-hot); }
:root:not(.mt-classic) .keep-tab.is-current:hover::before { background: linear-gradient(180deg, #6d282a 0%, #411517 100%); }
:root:not(.mt-classic) .keep-glyph-btn:hover { filter: drop-shadow(0 0 10px rgba(255, 77, 70, 0.45)) brightness(1.2); }

/* the currency rail — the third plaque in the top bar. hub-keep.css lifts its
   own rule to (1,3,1) with a :not(#keep-none) sentinel to beat hub-chrome; the
   same sentinel under the theme scope out-ranks both. */
:root:not(.mt-classic) body .keep-hud .hub-currency-rail:not(#keep-none) {
  background: var(--mt-frame);
  filter: drop-shadow(0 0 10px rgba(255, 77, 70, 0.15)) drop-shadow(0 6px 13px rgba(0, 0, 0, 0.6));
}
:root:not(.mt-classic) body .keep-hud .hub-currency-rail:not(#keep-none)::before { background: var(--mt-face); }

/* ══════════════════════════════ 4 · THE TILES ══════════════════════════════ */
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal::before { background: var(--mt-frame); }
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal::after  { background: var(--mt-face); }
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal { filter: drop-shadow(0 0 10px rgba(255, 77, 70, 0.10)) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.66)); }
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal-photo { filter: brightness(0.86) saturate(1.02) contrast(1.06) !important; }
/* the art panel's rest state (before the crop decodes, or a tile with no art):
   a lit NAVY recess with a cyan bounce, not the warm ochre one */
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal-art {
  background:
    linear-gradient(180deg, rgba(255, 115, 105, 0.05) 0%, rgba(0, 0, 0, 0) 26%),
    radial-gradient(76% 86% at 50% 112%, rgba(232, 63, 58, 0.22) 0%, rgba(151, 29, 30, 0.10) 42%, rgba(0, 0, 0, 0) 74%),
    radial-gradient(122% 104% at 50% 30%, #391617 0%, #211011 58%, #150a0a 100%);
}
/* the ONE promoted tile per hub keeps its violet frame + bloom (index.html picks
   it); the cyan frame above would otherwise out-rank hub-tiles' violet */
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal.is-promoted::before {
  background: linear-gradient(180deg, rgba(255, 120, 110, 0.95) 0%, rgba(221, 99, 95, 0.7) 55%, rgba(151, 55, 55, 0.7) 100%);
}
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal.is-promoted::after {
  background: linear-gradient(180deg, #3b1d1e 0%, #271718 48%, #170c0c 100%);
}
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal.is-promoted {
  filter: drop-shadow(0 0 18px rgba(237, 121, 115, 0.45)) drop-shadow(0 0 46px rgba(231, 94, 89, 0.3)) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.62));
}
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal.is-promoted:hover::before { background: linear-gradient(180deg, #ff685d 0%, #ff796f 50%, #d95d59 100%); }
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal-name {
  color: #ff685d;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.85), 0 0 14px rgba(255, 77, 70, 0.28);
}
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal-sub { color: #d09592; }
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal-badge {
  border-color: rgba(247, 75, 68, 0.5);
  background: rgba(202, 40, 38, 0.12);
  color: #ea867e;
}
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal-badge.lock {
  border-color: rgba(191, 122, 119, 0.32); background: rgba(0, 0, 0, 0.36); color: rgba(215, 160, 156, 0.6);
}
/* hover: the frame lights up white-cyan and the tile glows, as Duelyst's do */
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal:hover {
  filter: drop-shadow(0 0 16px rgba(255, 77, 70, 0.45)) drop-shadow(0 18px 30px rgba(0, 0, 0, 0.75));
}
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal:hover::before { background: var(--mt-frame-hot); }
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal:hover::after  { background: var(--mt-face-hot); }
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal:hover .hub-portal-photo { filter: brightness(1.0) saturate(1.08) contrast(1.06) !important; }
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal:hover .hub-portal-name { color: #ffffff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.85), 0 0 16px rgba(255, 77, 70, 0.7); }
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal:focus-visible::after {
  box-shadow: inset 0 0 0 2px #ff7f77, inset 0 0 0 4px rgba(0, 0, 0, 0.75), var(--keep-liner);
}
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal.portal-locked::before { background: linear-gradient(180deg, rgba(181, 111, 109, 0.42), rgba(100, 60, 60, 0.4)); }
:root:not(.mt-classic) .spellbook-hub.is-sub.hub-v2 .hub-portal.portal-locked .hub-portal-name { color: rgba(215, 160, 156, 0.5); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8); }
:root:not(.mt-classic) .spellbook-hub.is-sub .tos-link-btn { color: #c9918e; }
:root:not(.mt-classic) .spellbook-hub.is-sub .tos-link-btn:hover { color: #ff6b60; }

/* ═══════════════ 5 · BACK BUTTONS, MINI BUTTONS, SECTION TITLES ═══════════════
   EVERY back button in the game (~40 ids/classes) is drawn by ONE rule set in
   hub-chrome.css §1 — `.keep-tab` restated with !important at roughly (3,1,3)
   via `html body :is(…):not(#hc-never)`. The override repeats that exact list
   and adds a second never-matching id (:not(#mt-never)), which lifts it one id
   above the original so its !important wins. Only the paint changes: the frame
   gradient, the face (::before) and the label; geometry stays hub-chrome's. */
:root:not(.mt-classic) body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never):not(#mt-never) {
  background: var(--mt-frame) !important;
  color: #eb827b !important;
  text-shadow: 0 0 8px rgba(255, 77, 70, 0.35), 0 2px 0 rgba(0, 0, 0, 0.8) !important;
}
:root:not(.mt-classic) body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never):not(#mt-never)::before {
  background: var(--mt-face) !important;
}
:root:not(.mt-classic) body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never):not(#mt-never):hover:not(:disabled) {
  background: var(--mt-frame-hot) !important;
  color: #ffffff !important;
}
:root:not(.mt-classic) body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never):not(#mt-never):hover:not(:disabled)::before {
  background: var(--mt-face-hot) !important;
}
:root:not(.mt-classic) body :is(.dsx-back, .hub-back-btn, button[id^="btn-back"]) .keep-tab-arrow { color: #ff776f !important; }
:root:not(.mt-classic) .btn-mini {
  border: 1px solid rgba(247, 75, 68, 0.42) !important;
  border-radius: 2px !important;
  background-color: rgba(33, 15, 16, 0.88) !important;
  background-image: none !important;
  color: #e88079;
}
:root:not(.mt-classic) .btn-mini:hover:not(:disabled) {
  border-color: #ff4d46 !important;
  box-shadow: 0 0 10px rgba(255, 77, 70, 0.3), inset 0 0 8px rgba(255, 77, 70, 0.15);
  color: #ffffff;
}
:root:not(.mt-classic) .btn-secondary.btn-mini,
:root:not(.mt-classic) .btn-secondary.dsx-tut { border-color: rgba(247, 75, 68, 0.55) !important; }
:root:not(.mt-classic) .section-title {
  background: var(--mt-title);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.85)) drop-shadow(0 0 22px rgba(255, 77, 70, 0.3));
}
:root:not(.mt-classic) .section-subtitle { color: #e09691; }

/* ═══════════════════════════ 6 · KEEP MODALS + ALERTS ═══════════════════════════ */
:root:not(.mt-classic) .keep-modal-ov { background: rgba(13, 5, 6, 0.86); }
:root:not(.mt-classic) .keep-modal {
  background: linear-gradient(180deg, rgba(53, 19, 21, 0.98), rgba(21, 10, 10, 0.99));
  border: 1px solid rgba(255, 77, 70, 0.5);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 115, 105, 0.14), 0 0 34px rgba(255, 77, 70, 0.18), 0 24px 70px rgba(0, 0, 0, 0.75);
  color: #f0766d;
}
:root:not(.mt-classic) .keep-modal-head { color: #ff7167; }
:root:not(.mt-classic) .keep-modal-sub { color: #d09592; }
:root:not(.mt-classic) .keep-modal-item:hover { background: rgba(247, 75, 68, 0.14); color: #ffffff; }
:root:not(.mt-classic) .keep-modal-btn {
  border: 1px solid #ff4d46; border-radius: 2px;
  background: linear-gradient(180deg, rgba(116, 34, 35, 0.95), rgba(48, 18, 19, 0.97));
  color: #ff665b; text-shadow: 0 0 8px rgba(255, 77, 70, 0.55);
  box-shadow: inset 0 0 16px rgba(255, 77, 70, 0.35);
}
:root:not(.mt-classic) .keep-modal-btn:hover { background: linear-gradient(180deg, rgba(171, 29, 29, 0.97), rgba(69, 17, 19, 0.98)); }
:root:not(.mt-classic) .keep-modal-btn.is-quiet { background: rgba(33, 15, 16, 0.6); color: #e88079; border-color: rgba(247, 75, 68, 0.42); box-shadow: none; }
:root:not(.mt-classic) .keep-modal input, :root:not(.mt-classic) .keep-modal textarea, :root:not(.mt-classic) .keep-modal select {
  background: rgba(20, 8, 9, 0.7); color: #f0766d; border-color: rgba(247, 75, 68, 0.38);
}
:root:not(.mt-classic) .mvr-chip { background: linear-gradient(180deg, rgba(53, 19, 21, 0.97), rgba(21, 10, 10, 0.98)); }

/* ═══════════════════════════ 7 · CHOOSE YOUR DECK ═══════════════════════════ */
:root:not(.mt-classic) .dsx-backdrop,
:root:not(.mt-classic) .dsx .dsx-backdrop {
  /* the Ruin pass sets this !important (index.html ~39602) */
  background-image:
    radial-gradient(70% 60% at 50% 0%, rgba(202, 40, 38, 0.32), rgba(0, 0, 0, 0) 60%),
    radial-gradient(80% 70% at 50% 110%, rgba(81, 29, 30, 0.5), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, #271314, #14090a 55%, #0d0607) !important;
}
:root:not(.mt-classic) .dsx .dsx-ring { border-color: rgba(247, 75, 68, 0.14); }
:root:not(.mt-classic) .dsx .dsx-ring::before { border-color: rgba(247, 75, 68, 0.1); }
:root:not(.mt-classic) .hero-select.dsx { color: #e08781; }
:root:not(.mt-classic) .dsx .section-subtitle { color: #e09691; }
:root:not(.mt-classic) .dsx .placement-hint {
  color: #ff6b60; border-color: rgba(247, 75, 68, 0.5); border-radius: 2px;
  background: rgba(26, 12, 13, 0.75);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4), 0 0 18px rgba(247, 75, 68, 0.1);
}
:root:not(.mt-classic) .dsx .dsx-tile {
  border: 1px solid rgba(247, 75, 68, 0.3);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(53, 19, 21, 0.82), rgba(21, 10, 10, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 115, 105, 0.1), inset 0 0 30px rgba(0, 0, 0, 0.4);
}
:root:not(.mt-classic) .dsx .dsx-tile:hover {
  border-color: rgba(255, 127, 119, 0.75);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4), 0 0 22px rgba(255, 77, 70, 0.25), 0 14px 34px rgba(0, 0, 0, 0.5);
}
:root:not(.mt-classic) .dsx .dsx-tile.selected {
  border-color: #ff7f77;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 127, 119, 0.55), 0 0 36px rgba(255, 77, 70, 0.32);
}
:root:not(.mt-classic) .dsx .dsx-tile.selected::before {
  color: #180a0b; border-radius: 0; clip-path: var(--mt-chamfer, none);
  background: linear-gradient(180deg, #ff6b60, #ff4d46);
  box-shadow: none;
}
:root:not(.mt-classic) .dsx .dsx-tile .lvl-tag { color: #ff7167; border-color: rgba(247, 75, 68, 0.7); background: rgba(20, 8, 9, 0.9); border-radius: 2px; }
:root:not(.mt-classic) .dsx .dsx-name { color: #ff655a; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.85), 0 0 14px rgba(255, 77, 70, 0.3); }
:root:not(.mt-classic) .dsx .dsx-meta { color: #d8a09c; }
:root:not(.mt-classic) .dsx .dsx-meta .gen { color: #b17d7b; }
:root:not(.mt-classic) .dsx .dsx-multi { color: #ff6b60; border-color: rgba(247, 75, 68, 0.55); background: rgba(35, 15, 16, 0.55); border-radius: 2px; }
:root:not(.mt-classic) .dsx .dsx-add { border-color: rgba(247, 75, 68, 0.42); background: rgba(21, 10, 10, 0.55); }
:root:not(.mt-classic) .dsx .dsx-add .plus { color: #ff7f77; text-shadow: 0 0 22px rgba(255, 77, 70, 0.6); }
:root:not(.mt-classic) .dsx .dsx-add p { color: #c9918e; }
:root:not(.mt-classic) .ds-hero-card.ds-compact,
:root:not(.mt-classic) .hero-card {
  border-color: rgba(247, 75, 68, 0.32);
  background: linear-gradient(180deg, rgba(53, 19, 21, 0.85), rgba(21, 10, 10, 0.92));
}
:root:not(.mt-classic) .hero-card.selected,
:root:not(.mt-classic) .ds-hero-card.ds-compact.selected { border-color: #ff7f77; box-shadow: 0 0 26px rgba(255, 77, 70, 0.3); }

/* ═══════════════════ 7b · THE RUIN PASS'S PANEL GROUNDS ═══════════════════
   index.html's "Ruin" texture pass (~39249-39477) gives ~30 panel classes a warm
   charcoal ground + a gold inset rule, all !important. (Its grain is already
   gone: it reads var(--tex-stone), which theme.css sets to none.) Same lists,
   same flags, navy ground + cyan rule — so lists, stats, bestiary entries,
   mission cards, empty-state notes and the like match the rest of the theme. */
:root:not(.mt-classic) .rlx-how, :root:not(.mt-classic) .empty-list-note, :root:not(.mt-classic) .bestiary-entry,
:root:not(.mt-classic) .summary-cell, :root:not(.mt-classic) .wager-stat, :root:not(.mt-classic) .wager-empty,
:root:not(.mt-classic) .colx-stat, :root:not(.mt-classic) .colx-casual, :root:not(.mt-classic) .matchmaking-stat,
:root:not(.mt-classic) .recon-panel, :root:not(.mt-classic) .recon-center, :root:not(.mt-classic) .recon-right,
:root:not(.mt-classic) .recon-onboard, :root:not(.mt-classic) .profile-level-block, :root:not(.mt-classic) .profile-currency,
:root:not(.mt-classic) .sov-info-card, :root:not(.mt-classic) .br-panel, :root:not(.mt-classic) .br-locked,
:root:not(.mt-classic) .wfa-locked, :root:not(.mt-classic) .sp-rail-wrap, :root:not(.mt-classic) .tw-map-region,
:root:not(.mt-classic) .pledge-tier-node-box, :root:not(.mt-classic) .cx-panel, :root:not(.mt-classic) .cx-reserve-pill,
:root:not(.mt-classic) .cx-trade-box, :root:not(.mt-classic) .hero-card.dsx-tile.dsx-add, :root:not(.mt-classic) .tr-tile,
:root:not(.mt-classic) .mission-card {
  background-color: rgba(33, 15, 16, 0.86) !important;
  border-radius: 2px !important;
  box-shadow:
    inset 0 0 0 1px rgba(247, 75, 68, 0.28),
    inset 0 1px 0 rgba(255, 115, 105, 0.10),
    0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
:root:not(.mt-classic) .empty-list-note { background-color: rgba(26, 12, 13, 0.6) !important; color: #da9894; }
:root:not(.mt-classic) .bestiary-entry.locked, :root:not(.mt-classic) .tr-tile.locked,
:root:not(.mt-classic) .wfa-locked, :root:not(.mt-classic) .br-locked { background-color: rgba(22, 11, 11, 0.72) !important; }
/* a claimable mission keeps its gold glow — gold is a MEANING colour here */
:root:not(.mt-classic) .mission-card.mission-ready {
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.45), inset 0 0 18px rgba(255, 209, 102, 0.18), 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
:root:not(.mt-classic) .ruin-etch {
  border-radius: 2px !important;
  box-shadow: inset 0 0 0 1px rgba(247, 75, 68, 0.26), 0 3px 10px rgba(0, 0, 0, 0.35) !important;
}
:root:not(.mt-classic) .br-panel { background-image: linear-gradient(180deg, #361415, #1a0d0e) !important; }
:root:not(.mt-classic) .toast {
  background-color: rgba(33, 15, 16, 0.96) !important;
  border-color: rgba(247, 75, 68, 0.5) !important;
  box-shadow: 0 0 20px rgba(255, 77, 70, 0.18), 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

/* ═══════════════════════════════ 8 · WARPATH GATE ═══════════════════════════════
   openWarpathGate() writes every colour INLINE (gold border, brown panel, a
   #3d2a2b rule), so the overrides key on the gate's id and use !important. The
   chosen hero is marked by sync() writing border-color #d4af37 inline, which the
   browser serialises as rgb(212, 175, 55) — that attribute match keeps the
   selection visible (in cyan). */
:root:not(.mt-classic) #warpath-gate { background: rgba(13, 5, 6, 0.9) !important; }
:root:not(.mt-classic) #warpath-gate > div {
  border: 1px solid rgba(255, 77, 70, 0.5) !important;
  border-radius: 2px !important;
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(202, 40, 38, 0.28) 0%, transparent 70%),
    linear-gradient(180deg, rgba(43, 21, 22, 0.99), rgba(18, 8, 9, 0.99)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 115, 105, 0.14), 0 0 40px rgba(255, 77, 70, 0.18), 0 24px 70px rgba(0, 0, 0, 0.75) !important;
}
:root:not(.mt-classic) #warpath-gate h2 { color: #ffffff !important; text-shadow: 0 0 18px rgba(255, 77, 70, 0.45); }
:root:not(.mt-classic) #warpath-gate [style*="color:#d4af37"] { color: #ff7f77 !important; border-bottom-color: rgba(247, 75, 68, 0.35) !important; }
:root:not(.mt-classic) #warpath-gate [data-wp-hero] {
  border-color: rgba(247, 75, 68, 0.28) !important;
  border-radius: 2px !important;
  background: rgba(33, 15, 16, 0.85) !important;
}
:root:not(.mt-classic) #warpath-gate [data-wp-hero]:hover { border-color: rgba(255, 127, 119, 0.7) !important; }
:root:not(.mt-classic) #warpath-gate [data-wp-hero][style*="212, 175, 55"] {
  border-color: #ff7f77 !important;
  box-shadow: 0 0 16px rgba(255, 77, 70, 0.4), inset 0 0 12px rgba(255, 77, 70, 0.2);
}