/* ==========================================================================
   Hands of the Unbound — global visual themes
   --------------------------------------------------------------------------
   styles.css remains the complete Default presentation. This sheet loads
   afterwards and has two jobs:

   1. repair geometry that could collide or overflow at real viewport sizes;
   2. skin the same stable markup with eight optional themes.

   A/C/E/G are CSS-only. B/D/F/H share every rule with their partner and add
   one scene image beneath the UI. Art is never responsible for spacing.
   ========================================================================== */

/* ==========================================================================
   Alignment and responsive repairs — apply to Default as well
   ========================================================================== */

.chrome {
  align-items: flex-start;
  max-width: calc(100vw - 20px);
}

/* Pack and end screens did not reserve the top-right control row. */
.screen.pack,
.screen.over {
  padding-top: 52px;
}

/* Header bands begin below the fixed control row at desktop widths. The old
   34px margin left a small but visible overlap at 1280×720. */
.blind-select .blind-select-head,
.route-fork .blind-select-head,
.shop .shop-head {
  margin-top: 52px;
}

/* Comparison cards stay in a true comparison grid rather than a 2 + 1 flex
   wrap, where the final card had a different width and vertical rhythm. */
.blind-row {
  width: min(1240px, 97vw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.blind-row .blind-card {
  width: 100%;
  max-width: none;
  height: 100%;
}

/* The wide Cathedral hand sizes from its actual centre allowance. The old
   viewport-based 6.2vw cards overflowed just above the fallback breakpoint. */
.layout-cathedral .card { width: clamp(52px, 5vw, 76px); }
.layout-command .card { width: clamp(58px, 5.7vw, 88px); }

/* The inventory rail inherits wrapping from the wide inventory dock. Once its
   direction changes to a column that wrapping turns each block into a second,
   invisible column. Keep both blocks in one readable vertical flow and let
   their content, rather than the old 300px flex basis, set the height. */
.inventory-panel .inventory { flex-wrap: nowrap; }
.inventory-panel .inv-block { flex: 0 0 auto; }

/* The dissolved Cathedral top bar needs to clear the fixed control row. */
.combat.layout-cathedral { padding-top: 44px; }

/* Eight compact controls now occupy 267px at desktop size. */
.combat .topbar { padding-right: 280px; }

@container app (max-width: 1120px) {
  .combat.layout-cathedral,
  .combat.layout-command { padding-top: 42px; }

  /* Complete the fallback to Classic instead of leaving vertical-rail
     presentation attached to a now-horizontal document flow. */
  .layout-cathedral .topbar-left { align-items: center; }
  .layout-cathedral .topbar-right .stat {
    align-items: center;
    padding: 4px 12px;
  }
  .layout-cathedral .topbar-right .stat-value { font-size: 18px; }
  .layout-cathedral .chest-badge {
    flex-direction: row;
    text-align: left;
    padding: 9px 13px;
  }
  .layout-cathedral .chest-badge-art { width: 54px; height: 54px; }
  .layout-cathedral .gem .gem-text { display: block; }
  .layout-cathedral .gem-empty-label,
  .layout-command .gem-empty-label { display: none; }
  .layout-cathedral .card,
  .layout-command .card { width: clamp(68px, 8vw, 94px); }
}

/* The shop now moves from 3 columns to 2 and then 1 before any rail can force
   horizontal scrolling. */
@container app (max-width: 1100px) {
  .shop-body {
    grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
  }
  .shop-rail {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container app (max-width: 900px) {
  .blind-row { grid-template-columns: 1fr; max-width: 620px; }

  /* These rules intentionally come after the late fantasy fork treatment. */
  .fork-lane {
    min-height: 510px;
    grid-template-rows: 154px auto 104px 1fr auto;
  }
}

@container app (max-width: 760px) {
  .shop-body { grid-template-columns: minmax(0, 1fr); }
  .shop-rail {
    grid-column: auto;
    display: flex;
  }
  .keeper-panel {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas:
      "art name"
      "art quote";
    column-gap: 14px;
    text-align: left;
  }
  .shopkeeper-art { grid-area: art; width: 112px; }
  .shopkeeper-name { grid-area: name; align-self: end; }
  .shopkeeper-quote { grid-area: quote; align-self: start; }
}

@container app (max-width: 860px) {
  .combat .topbar { padding-right: 14px; }
}

@container app (max-width: 560px) {
  .screen.pack,
  .screen.over { padding-top: 14px; padding-bottom: 58px; }
  .blind-select .blind-select-head,
  .route-fork .blind-select-head,
  .shop .shop-head { margin-top: 0; }
  .combat.layout-cathedral,
  .combat.layout-command { padding-top: 8px; padding-bottom: 58px; }
  .fork-lane {
    min-height: 0;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "head" "context" "path" "stocks" "take";
  }
  .keeper-panel {
    display: flex;
    text-align: center;
  }
}

/* Classic combat remains a one-glance decision screen on common 720/768px
   laptop viewports. The generous card fan returns automatically on taller
   screens. */
@container app (max-height: 800px) and (min-width: 1121px) {
  /* The shop is also a one-glance decision screen at laptop height. Its
     generous display-case spacing remains on taller monitors, while these
     values keep the inventory, permanent upgrade and exit controls visible. */
  .screen.shop {
    gap: 8px;
    padding-bottom: 8px;
  }
  .shop .shop-head {
    padding: 7px 14px 9px;
  }
  .shop-head-left .screen-title { font-size: 27px; }
  .shop-kicker,
  .shop .blind-wallet-label { font-size: 8px; }
  .shop .purse {
    padding: 3px 16px;
    font-size: 22px;
  }
  .shop-body,
  .shop-centre,
  .shop-rail { gap: 10px; }
  .shop .shop-panel { padding: 9px; }
  .shop-panel .section-title { margin-bottom: 6px; }
  .shop .section-title { font-size: 10px; }
  .shopkeeper-art {
    width: 124px;
    max-width: 124px;
  }
  .shopkeeper-name { font-size: 13px; }
  .shopkeeper-quote {
    padding-top: 6px;
    font-size: 10px;
    line-height: 1.3;
  }
  .keeper-stocks {
    margin-top: 5px;
    font-size: 9px;
    line-height: 1.35;
  }
  .shop-grid,
  .pack-grid,
  .voucher-row { gap: 10px; }
  .shop .shop-item,
  .shop .pack-card {
    width: 182px;
    gap: 5px;
    padding: 11px 10px 9px;
  }
  .shop .voucher-card {
    width: 236px;
    gap: 5px;
    padding: 9px 9px 8px;
  }
  .shop .item-glyph,
  .shop .pack-glyph {
    width: 54px;
    height: 54px;
    font-size: 31px;
  }
  .shop .item-glyph.gem-glyph .gem-art {
    width: 52px;
    height: 52px;
  }
  .shop .arcana-art { width: 54px; }
  .shop .pack-wrapper {
    width: 54px;
    height: 54px;
  }
  .shop .pack-seal {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }
  .shop .item-name,
  .shop .pack-name,
  .shop .voucher-name { font-size: 12px; }
  .shop .item-text,
  .shop .pack-meta,
  .shop .voucher-text {
    font-size: 9px;
    line-height: 1.28;
  }
  .shop .buy { padding: 6px 12px; }
  .shop .inventory-panel .inventory {
    gap: 6px;
    max-height: 176px;
  }
  .shop .inventory-panel .inv-block { padding: 6px 8px; }
  .shop-controls {
    padding: 3px 0 0;
  }
  .shop-controls button { padding-block: 8px; }

  .combat.layout-classic {
    gap: 5px;
    padding-top: 6px;
    padding-bottom: 7px;
  }
  .layout-classic .encounter { gap: 2px; }
  .layout-classic .encounter-title { min-height: 15px; }
  .layout-classic .encounter-place { font-size: 8px; }
  .layout-classic .encounter-name { font-size: 11px; }
  .combat.layout-classic .enemy-row { padding: 1px 0; }
  .combat.layout-classic .enemy {
    width: clamp(112px, 12vw, 148px);
    padding: 4px 9px 7px;
  }
  .combat.layout-classic .enemy-name {
    margin: 1px 0 3px;
    font-size: 9px;
  }
  .combat.layout-classic .enemy-row.tier-patrol .enemy-portrait { --portrait: 58px; }
  .combat.layout-classic .enemy-row.tier-elite .enemy-portrait { --portrait: 70px; }
  .combat.layout-classic .enemy-row.tier-warden .enemy-portrait { --portrait: 76px; }
  .combat.layout-classic .enemy.boss .enemy-portrait { --portrait: 96px; }
  .combat.layout-classic .hp-bar { height: 12px; }
  .combat.layout-classic .hp-text { line-height: 11px; font-size: 9px; }
  .combat.layout-classic .intent { padding: 3px 12px; font-size: 10px; }
  .combat.layout-classic .meters { gap: 5px; }
  .combat.layout-classic .meter { padding: 3px 9px; }

  .combat.layout-classic .scoreboard {
    padding: 5px 10px;
    gap: 2px;
  }
  .combat.layout-classic .resolution-ribbon { display: none; }
  .combat.layout-classic .hand-name { min-height: 13px; font-size: 11px; }
  .combat.layout-classic .chips-box,
  .combat.layout-classic .mult-box {
    min-width: 88px;
    padding: 2px 12px;
  }
  .combat.layout-classic .total-box {
    min-width: 132px;
    padding: 2px 15px;
  }
  .combat.layout-classic .chips-value,
  .combat.layout-classic .mult-value { font-size: 19px; }
  .combat.layout-classic .total-value { font-size: 23px; }
  .combat.layout-classic .goal-bar { height: 7px; }
  .combat.layout-classic .goal-text { font-size: 8px; margin-top: 1px; }

  .combat.layout-classic .tableau { gap: 5px; min-height: 0; }
  .combat.layout-classic .tableau-lower {
    min-height: 66px;
    gap: 6px;
  }
  .combat.layout-classic .rail-block { padding: 5px 7px; }
  .combat.layout-classic .rail-title { margin-bottom: 3px; font-size: 8px; }
  .combat.layout-classic .gem-rail,
  .combat.layout-classic .consumable-rail { gap: 5px; }
  .combat.layout-classic .gem-empty { padding: 7px 5px; }
  .combat.layout-classic .play-area { min-height: 66px; }
  .combat.layout-classic .altar-prompt small { display: none; }

  .combat.layout-classic .hand-panel {
    padding: 6px 10px 7px;
    gap: 4px;
  }
  .combat.layout-classic .hand-tools { min-height: 24px; }
  .combat.layout-classic .hand-rail {
    min-height: 0;
    padding: 17px 5px 3px;
  }
  .combat.layout-classic .card { width: 76px; }
  .combat.layout-classic .card-centre { font-size: 27px; }
  .combat.layout-classic .actions { gap: 8px; }
  .combat.layout-classic .action {
    min-width: 124px;
    padding: 6px 15px;
  }
  .combat.layout-classic .action strong { font-size: 13px; }
  .combat.layout-classic .action small { font-size: 8px; }

  /* The rail arrangements use the same compact score and hand treatment, then
     spend the reclaimed height on their side columns. */
  .combat.layout-cathedral .encounter { gap: 2px; }
  .combat.layout-cathedral .enemy {
    padding: 6px 9px 8px;
    width: clamp(112px, 12vw, 148px);
  }
  .combat.layout-cathedral .enemy-name { margin: 1px 0 3px; font-size: 9px; }
  .combat.layout-cathedral .enemy-row.tier-patrol .enemy-portrait { --portrait: 66px; }
  .combat.layout-cathedral .enemy-row.tier-elite .enemy-portrait { --portrait: 78px; }
  .combat.layout-cathedral .enemy-row.tier-warden .enemy-portrait { --portrait: 84px; }
  .combat.layout-cathedral .enemy.boss .enemy-portrait { --portrait: 104px; }
  .combat.layout-cathedral .hp-bar { height: 12px; }
  .combat.layout-cathedral .hp-text { line-height: 11px; font-size: 9px; }

  .combat:is(.layout-cathedral, .layout-command) .scoreboard {
    padding: 5px 10px;
    gap: 2px;
  }
  .combat:is(.layout-cathedral, .layout-command) .resolution-ribbon { display: none; }
  .combat:is(.layout-cathedral, .layout-command) .hand-name {
    min-height: 13px;
    font-size: 11px;
  }
  .combat:is(.layout-cathedral, .layout-command) .chips-box,
  .combat:is(.layout-cathedral, .layout-command) .mult-box {
    min-width: 86px;
    padding: 2px 11px;
  }
  .combat:is(.layout-cathedral, .layout-command) .total-box {
    min-width: 126px;
    padding: 2px 14px;
  }
  .combat:is(.layout-cathedral, .layout-command) .chips-value,
  .combat:is(.layout-cathedral, .layout-command) .mult-value { font-size: 19px; }
  .combat:is(.layout-cathedral, .layout-command) .total-value { font-size: 23px; }
  .combat:is(.layout-cathedral, .layout-command) .goal-bar { height: 7px; }
  .combat:is(.layout-cathedral, .layout-command) .goal-text {
    margin-top: 1px;
    font-size: 8px;
  }
  .combat:is(.layout-cathedral, .layout-command) .play-area { min-height: 66px; }
  .combat:is(.layout-cathedral, .layout-command) .hand-panel {
    padding: 6px 9px 7px;
    gap: 4px;
  }
  .combat:is(.layout-cathedral, .layout-command) .hand-tools { min-height: 24px; }
  .combat:is(.layout-cathedral, .layout-command) .hand-rail {
    min-height: 0;
    padding: 17px 4px 3px;
  }
  .combat.layout-cathedral .card { width: 60px; }
  .combat.layout-command .card { width: 68px; }
  .combat:is(.layout-cathedral, .layout-command) .card-centre { font-size: 25px; }
  .combat:is(.layout-cathedral, .layout-command) .actions { gap: 7px; }
  .combat:is(.layout-cathedral, .layout-command) .action {
    min-width: 116px;
    padding: 6px 13px;
  }
  .combat:is(.layout-cathedral, .layout-command) .action strong { font-size: 12px; }
  .combat:is(.layout-cathedral, .layout-command) .action small { font-size: 8px; }
}

/* ==========================================================================
   Corner theme dropdown
   ========================================================================== */

.theme-switcher {
  position: relative;
  flex: 0 0 auto;
  color: var(--ink);
}
.theme-switcher-summary {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  list-style: none;
  cursor: pointer;
  border: 1px solid rgba(255, 211, 110, .42);
  border-radius: 50%;
  color: var(--gold);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.2), transparent 35%),
    linear-gradient(145deg, rgba(109,87,170,.88), rgba(25,26,64,.96));
  box-shadow:
    0 8px 24px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 18px rgba(157,123,255,.12);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, translate .15s ease, scale .15s ease;
}
.theme-switcher-summary::-webkit-details-marker { display: none; }
.theme-switcher-summary:hover {
  translate: 0 -2px;
  filter: brightness(1.15);
  box-shadow: 0 12px 28px rgba(0,0,0,.52), 0 0 20px rgba(157,123,255,.22);
}
.theme-switcher-summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.theme-switcher[open] .theme-switcher-summary {
  border-radius: 10px 10px 4px 10px;
  filter: brightness(1.15);
}
.theme-switcher-icon {
  font-size: 19px;
  line-height: 1;
  text-shadow: 0 0 10px currentColor;
}
.theme-switcher-current {
  position: absolute;
  right: 1px;
  bottom: 0;
  min-width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  padding: 0 3px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  color: #111426;
  background: var(--gold);
  font-family: var(--font-num);
  font-size: 8px;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

.theme-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 9px);
  right: 0;
  width: min(370px, calc(100vw - 24px));
  max-height: min(78vh, 720px);
  overflow: auto;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: 18px 5px 18px 18px;
  color: var(--ink);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(157,123,255,.19), transparent 62%),
    linear-gradient(160deg, rgba(21,24,58,.985), rgba(7,9,25,.99));
  box-shadow: 0 28px 80px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(20px);
}
.theme-menu-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 5px 10px;
  border-bottom: 1px solid var(--edge);
}
.theme-menu-head strong {
  font-family: var(--theme-display-font, var(--font));
  font-size: 17px;
  letter-spacing: .04em;
}
.theme-menu-head small { color: var(--ink-dim); font-size: 10px; line-height: 1.35; }
.theme-menu-kicker,
.theme-family-label {
  color: var(--gold);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.theme-family-label { padding: 11px 7px 4px; color: var(--ink-faint); }

button.theme-option {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 9px;
  margin: 0 0 4px;
  padding: 8px 9px;
  text-align: left;
  border-radius: 10px;
  border-color: transparent;
  background: rgba(255,255,255,.025);
  box-shadow: none;
}
button.theme-option:hover:not(:disabled) {
  translate: -2px 0;
  border-color: var(--edge-bright);
  background: rgba(255,255,255,.075);
  box-shadow: none;
}
button.theme-option.active {
  border-color: color-mix(in srgb, var(--gold) 52%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent);
}
.theme-option-code {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--edge-bright);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(0,0,0,.28);
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 900;
}
.theme-option-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-option-copy strong { font-size: 12px; color: var(--ink); }
.theme-option-copy small {
  overflow: hidden;
  color: var(--ink-dim);
  font-size: 9px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.theme-option-kind {
  padding: 2px 6px;
  border: 1px solid rgba(126,230,255,.28);
  border-radius: 99px;
  color: var(--ice);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
}
.theme-option-kind.art {
  color: var(--gold);
  border-color: rgba(255,211,110,.34);
}
.theme-option-check { color: var(--good); font-weight: 900; text-align: center; }

/* Build 2 shrinks all other corner buttons; keep the theme trigger aligned. */
.chrome .theme-switcher-summary { width: 29px; height: 29px; }
.chrome .theme-switcher-icon { font-size: 15px; }

@container app (max-width: 860px) {
  .theme-menu {
    top: auto;
    right: 0;
    bottom: calc(100% + 9px);
    border-radius: 18px 18px 5px 18px;
    max-height: min(68vh, 620px);
  }
}

/* ==========================================================================
   Theme token bridge
   ========================================================================== */

html[data-visual-theme]:not([data-visual-theme="default"]) {
  color-scheme: dark;
  --panel: var(--theme-surface);
  --panel-solid: var(--theme-surface-strong);
  --edge: var(--theme-edge);
  --edge-bright: var(--theme-edge-hot);
  --ink: var(--theme-ink);
  --ink-dim: var(--theme-dim);
  --ink-faint: var(--theme-faint);
  --gold: var(--theme-accent);
  --gold-deep: var(--theme-accent-deep);
  --ice: var(--theme-accent-2);
  --teal: var(--theme-accent-3);
  --r-sm: var(--theme-radius-sm);
  --r-md: var(--theme-radius-md);
  --r-lg: var(--theme-radius-lg);
  --shadow-1: var(--theme-shadow-1);
  --shadow-2: var(--theme-shadow-2);
  --shadow-3: var(--theme-shadow-3);
}

html[data-visual-theme]:not([data-visual-theme="default"]) body {
  background: var(--bg-0);
}
html[data-visual-theme]:not([data-visual-theme="default"]) body::before {
  inset: -12%;
  opacity: 1;
  background: var(--theme-css-backdrop);
  animation: themeDrift 32s ease-in-out infinite alternate;
}
html[data-visual-theme]:not([data-visual-theme="default"]) body::after {
  opacity: var(--theme-texture-opacity, .35);
  background-image: var(--theme-texture);
}

@keyframes themeDrift {
  from { transform: translate3d(-1.5%, -.7%, 0) scale(1.04); }
  to { transform: translate3d(1.8%, 1.2%, 0) scale(1.09); }
}

/* Remove Default's screen-specific scene art only for CSS-only themes. The
   illustrated partners replace it below; including them in this stronger
   selector caused Combat and Shop to win the cascade with `background: none`. */
html[data-scene-art="off"] .screen.combat,
html[data-scene-art="off"] .screen.shop {
  background: transparent;
}
html[data-scene-art="off"] .title::before {
  background: transparent;
  filter: none;
}
html[data-scene-art="off"] .deck-vault-overlay {
  background:
    linear-gradient(180deg, rgba(3,5,13,.86), rgba(3,5,13,.96)),
    var(--theme-css-backdrop);
}

/* Illustrated partners use the same image consistently across all phases. */
html[data-scene-art="on"] .screen {
  background:
    linear-gradient(180deg, var(--theme-scene-scrim-top), var(--theme-scene-scrim-bottom)),
    var(--theme-scene) var(--theme-scene-position, center) / cover fixed no-repeat,
    var(--bg-0);
}
html[data-scene-art="on"] .title::before {
  background:
    radial-gradient(68% 60% at 50% 43%, transparent 12%, rgba(2,4,12,.48) 100%),
    linear-gradient(180deg, var(--theme-scene-scrim-top), var(--theme-scene-scrim-bottom)),
    var(--theme-scene) var(--theme-scene-position, center) / cover no-repeat;
}
html[data-scene-art="on"] .deck-vault-overlay {
  background:
    linear-gradient(180deg, rgba(3,5,13,.78), rgba(3,5,13,.94)),
    var(--theme-scene) center / cover fixed no-repeat;
}

/* ==========================================================================
   Shared optional-theme component skin
   ========================================================================== */

html[data-visual-theme]:not([data-visual-theme="default"])
  :is(.title-panel, .topbar, .blind-select-head, .blind-card, .fork-truth,
      .fork-lane, .shop-head, .shop-panel, .pack-option, .scoreboard,
      .play-area, .hand-panel, .rail-block, .inv-block, .over-stat,
      .overlay-card, .tag-strip, .unlock-notice, .deck-picker-detail,
      .vault-deck, .panel-card) {
  border-color: var(--theme-edge);
  background-color: var(--theme-surface);
  box-shadow: var(--theme-shadow-2), inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(var(--theme-blur, 12px));
}

html[data-visual-theme]:not([data-visual-theme="default"])
  :is(.screen-title, .title-name, .encounter-name, .shopkeeper-name,
      .fork-lane-name, .overlay-card h2, .section-title, .blind-name) {
  font-family: var(--theme-display-font);
}

/* :not(.buy) - "you can afford this" has to stay the same unmistakable green
   on every theme. The blanket button reskin below was overriding .buy's own
   background with the generic themed one, so a purchasable item looked no
   different from a disabled one until you read the price. */
html[data-visual-theme]:not([data-visual-theme="default"]) button:not(.buy) {
  border-color: var(--theme-edge-hot);
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.018)),
    var(--theme-button);
  box-shadow: var(--theme-shadow-1), inset 0 1px 0 rgba(255,255,255,.13);
}
html[data-visual-theme]:not([data-visual-theme="default"]) button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--theme-accent) 68%, white);
  box-shadow: var(--theme-shadow-2), var(--theme-glow);
}
html[data-visual-theme]:not([data-visual-theme="default"]) .primary {
  color: var(--theme-primary-ink);
  border-color: color-mix(in srgb, var(--theme-accent) 72%, white);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--theme-accent) 70%, white),
      var(--theme-accent) 48%,
      var(--theme-accent-deep));
}
html[data-visual-theme]:not([data-visual-theme="default"])
  :is(.stat, .meter, .route-badge, .floor-node, .fork-node, .resolution-step) {
  border-color: var(--theme-edge);
  background-color: color-mix(in srgb, var(--theme-surface-strong) 88%, transparent);
}
html[data-visual-theme]:not([data-visual-theme="default"])
  :is(.enemy, .shop-item, .pack-card, .voucher-card, .inv-gem, .inv-consumable) {
  border-color: var(--theme-edge-hot);
  background:
    radial-gradient(110% 85% at 50% 0%, color-mix(in srgb, var(--theme-accent-2) 15%, transparent), transparent 66%),
    linear-gradient(180deg, var(--theme-card-top), var(--theme-card-bottom));
  box-shadow: var(--theme-shadow-2), inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-visual-theme]:not([data-visual-theme="default"]) .enemy::before {
  background: linear-gradient(90deg, transparent, var(--theme-accent-2), var(--theme-accent), transparent);
}
html[data-visual-theme]:not([data-visual-theme="default"]) #tooltip,
html[data-visual-theme]:not([data-visual-theme="default"]) .toast {
  color: var(--theme-ink);
  border-color: var(--theme-edge-hot);
  background: color-mix(in srgb, var(--theme-surface-strong) 96%, black);
  box-shadow: var(--theme-shadow-3);
}
html[data-visual-theme]:not([data-visual-theme="default"]) .overlay {
  background: color-mix(in srgb, var(--bg-0) 84%, transparent);
}
html[data-visual-theme]:not([data-visual-theme="default"]) .wipe-panel {
  border-color: var(--theme-edge);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-0));
}
html[data-visual-theme]:not([data-visual-theme="default"]) .chrome-btn,
html[data-visual-theme]:not([data-visual-theme="default"]) .theme-switcher-summary {
  border-color: var(--theme-edge-hot);
  color: var(--theme-accent);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.16), transparent 34%),
    var(--theme-button);
}
html[data-visual-theme]:not([data-visual-theme="default"]) .theme-menu {
  border-color: var(--theme-edge-hot);
  background:
    radial-gradient(95% 75% at 100% 0%, color-mix(in srgb, var(--theme-accent-2) 15%, transparent), transparent 64%),
    color-mix(in srgb, var(--theme-surface-strong) 97%, black);
  box-shadow: var(--theme-shadow-3);
}

/* Functional colours retain their meaning in every family. */
html[data-visual-theme]:not([data-visual-theme="default"]) {
  --strength: #ff8a3d;
  --agility: #46d66f;
  --elemental: #ff5fa2;
  --arcane: #b07cff;
  --chips: #6fb3ff;
  --mult: #ff6b6b;
  --danger: #ff4d6d;
  --good: #8bffb0;
}

/* ==========================================================================
   A / B — Ironkeep
   ========================================================================== */

html[data-theme-family="ironkeep"] {
  --bg-0: #080706;
  --bg-1: #17100c;
  --bg-2: #2b1d13;
  --theme-surface: rgba(31, 22, 16, .9);
  --theme-surface-strong: #1c140f;
  --theme-edge: rgba(199, 155, 82, .28);
  --theme-edge-hot: rgba(222, 181, 105, .56);
  --theme-ink: #f3e3c4;
  --theme-dim: #c2aa88;
  --theme-faint: #806d57;
  --theme-accent: #d3a553;
  --theme-accent-deep: #885820;
  --theme-accent-2: #9bb68d;
  --theme-accent-3: #b05a62;
  --theme-button: linear-gradient(180deg, rgba(72,52,36,.96), rgba(30,22,17,.98));
  --theme-card-top: rgba(61,43,32,.97);
  --theme-card-bottom: rgba(23,17,14,.99);
  --theme-primary-ink: #241707;
  --theme-radius-sm: 3px;
  --theme-radius-md: 6px;
  --theme-radius-lg: 9px;
  --theme-display-font: Georgia, "Times New Roman", serif;
  --theme-shadow-1: 0 4px 10px rgba(0,0,0,.48);
  --theme-shadow-2: 0 14px 34px rgba(0,0,0,.58);
  --theme-shadow-3: 0 30px 80px rgba(0,0,0,.76);
  --theme-glow: 0 0 24px rgba(211,165,83,.16);
  --theme-blur: 5px;
  --theme-texture-opacity: .48;
  --theme-texture:
    repeating-linear-gradient(90deg, rgba(255,226,166,.018) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 2px, transparent 2px 6px);
  --theme-css-backdrop:
    radial-gradient(46% 42% at 18% 20%, rgba(139,62,37,.24), transparent 72%),
    radial-gradient(38% 34% at 84% 76%, rgba(100,122,79,.17), transparent 72%),
    linear-gradient(145deg, #21150e, #090806 58%, #17100c);
}
html[data-visual-theme="ironkeep-scene"] {
  --theme-scene: url("./assets/themes/ironkeep-hall.jpg");
  --theme-scene-scrim-top: rgba(8,7,6,.42);
  --theme-scene-scrim-bottom: rgba(8,7,6,.76);
  --theme-scene-position: center;
}
html[data-theme-family="ironkeep"]
  :is(.title-panel, .topbar, .blind-select-head, .blind-card, .fork-lane,
      .shop-head, .shop-panel, .pack-option, .scoreboard, .play-area,
      .hand-panel, .rail-block, .overlay-card, .over-stat) {
  border-width: 1px;
  border-radius: 7px;
  background-image:
    linear-gradient(90deg, rgba(211,165,83,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,240,200,.035), transparent 34%);
  background-size: 22px 100%, 100% 100%;
  box-shadow:
    0 0 0 2px rgba(9,6,4,.78),
    0 0 0 3px rgba(199,155,82,.16),
    var(--theme-shadow-2),
    inset 0 1px 0 rgba(255,239,190,.07);
}
html[data-theme-family="ironkeep"] .screen-title,
html[data-theme-family="ironkeep"] .encounter-name {
  color: #f1d7aa;
  letter-spacing: .09em;
  text-shadow: 0 2px 0 #3e2613;
}
html[data-theme-family="ironkeep"] .stat {
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(53,38,27,.94), rgba(19,14,11,.95));
}
html[data-theme-family="ironkeep"] .action,
html[data-theme-family="ironkeep"] .fork-take {
  border-radius: 3px;
  clip-path: polygon(5% 0, 95% 0, 100% 24%, 100% 76%, 95% 100%, 5% 100%, 0 76%, 0 24%);
}
html[data-theme-family="ironkeep"] .enemy {
  border-radius: 54px 54px 5px 5px;
}
html[data-theme-family="ironkeep"] .card {
  box-shadow:
    0 2px 0 #5c3c22,
    0 12px 25px rgba(0,0,0,.7),
    0 0 14px rgba(var(--card-rgb),.12);
}

/* ==========================================================================
   C / D — Aether Bloom
   ========================================================================== */

html[data-theme-family="aether"] {
  --bg-0: #040b1d;
  --bg-1: #0b1b3f;
  --bg-2: #1b3470;
  --theme-surface: rgba(13, 30, 70, .79);
  --theme-surface-strong: #0b1940;
  --theme-edge: rgba(94, 235, 255, .24);
  --theme-edge-hot: rgba(124, 238, 255, .58);
  --theme-ink: #f3f7ff;
  --theme-dim: #b6c8ed;
  --theme-faint: #7186b3;
  --theme-accent: #ffe184;
  --theme-accent-deep: #d38e2c;
  --theme-accent-2: #5eebff;
  --theme-accent-3: #ff66bc;
  --theme-button: linear-gradient(150deg, rgba(35,73,142,.94), rgba(52,31,106,.96));
  --theme-card-top: rgba(30,64,129,.94);
  --theme-card-bottom: rgba(18,18,72,.98);
  --theme-primary-ink: #17152b;
  --theme-radius-sm: 10px;
  --theme-radius-md: 17px;
  --theme-radius-lg: 27px;
  --theme-display-font: ui-rounded, "SF Pro Rounded", "Segoe UI", sans-serif;
  --theme-shadow-1: 0 6px 18px rgba(2,5,28,.42);
  --theme-shadow-2: 0 18px 48px rgba(1,4,28,.52);
  --theme-shadow-3: 0 34px 100px rgba(0,2,20,.72);
  --theme-glow: 0 0 28px rgba(94,235,255,.23), 0 0 48px rgba(255,102,188,.12);
  --theme-blur: 18px;
  --theme-texture-opacity: .24;
  --theme-texture:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 73% 61%, rgba(94,235,255,.09) 0 1px, transparent 1.5px);
  --theme-css-backdrop:
    radial-gradient(48% 44% at 14% 23%, rgba(75,115,255,.48), transparent 67%),
    radial-gradient(44% 42% at 86% 72%, rgba(255,61,177,.34), transparent 68%),
    radial-gradient(36% 32% at 54% 4%, rgba(66,231,255,.3), transparent 72%),
    linear-gradient(155deg, #10295c, #050b20 58%, #230f45);
}
html[data-visual-theme="aether-scene"] {
  --theme-scene: url("./assets/themes/aether-bloom.jpg");
  --theme-scene-scrim-top: rgba(3,10,32,.34);
  --theme-scene-scrim-bottom: rgba(3,7,25,.67);
  --theme-scene-position: center;
}
html[data-theme-family="aether"] body::before {
  animation: aetherEbb 15s ease-in-out infinite alternate;
}
@keyframes aetherEbb {
  0% { transform: translate3d(-2%, -1%, 0) scale(1.04); filter: saturate(1) hue-rotate(0deg); }
  55% { transform: translate3d(1%, 1.5%, 0) scale(1.1); filter: saturate(1.12) hue-rotate(5deg); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.06); filter: saturate(1.04) hue-rotate(-4deg); }
}
html[data-theme-family="aether"]
  :is(.title-panel, .topbar, .blind-select-head, .blind-card, .fork-lane,
      .shop-head, .shop-panel, .pack-option, .scoreboard, .play-area,
      .hand-panel, .rail-block, .overlay-card, .over-stat) {
  background-image:
    radial-gradient(120% 100% at 0% 0%, rgba(94,235,255,.12), transparent 54%),
    radial-gradient(110% 90% at 100% 100%, rgba(255,102,188,.11), transparent 57%),
    linear-gradient(160deg, rgba(22,49,103,.78), rgba(10,17,58,.88));
  box-shadow:
    0 0 0 1px rgba(94,235,255,.1),
    var(--theme-shadow-2),
    0 0 32px rgba(94,235,255,.08),
    inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme-family="aether"] .title-name {
  background: linear-gradient(90deg, #8af5ff, #fff1a6 45%, #ff8fd0 78%, #bca0ff);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-theme-family="aether"] .enemy {
  border-radius: 80px 80px 22px 22px;
  box-shadow: var(--theme-shadow-2), 0 0 28px rgba(94,235,255,.12);
}
html[data-theme-family="aether"] .chips-box,
html[data-theme-family="aether"] .mult-box,
html[data-theme-family="aether"] .total-box {
  border-radius: 22px 7px;
  clip-path: none;
}
html[data-theme-family="aether"] .action {
  border-radius: 18px 6px;
  clip-path: none;
}
html[data-theme-family="aether"] .floor-node.current,
html[data-theme-family="aether"] .sort-btn.active {
  box-shadow: 0 0 20px rgba(94,235,255,.28), 0 0 34px rgba(255,102,188,.14);
}

/* ==========================================================================
   E / F — Illuminated Codex
   ========================================================================== */

html[data-theme-family="codex"] {
  --bg-0: #090a12;
  --bg-1: #11162a;
  --bg-2: #232b4b;
  --theme-surface: rgba(23, 25, 43, .91);
  --theme-surface-strong: #121523;
  --theme-edge: rgba(206, 176, 111, .26);
  --theme-edge-hot: rgba(231, 207, 147, .5);
  --theme-ink: #eee6d5;
  --theme-dim: #b6b1b2;
  --theme-faint: #77778c;
  --theme-accent: #d6ae58;
  --theme-accent-deep: #80602c;
  --theme-accent-2: #77cbd1;
  --theme-accent-3: #9779cf;
  --theme-button: linear-gradient(180deg, rgba(44,49,79,.96), rgba(18,21,36,.98));
  --theme-card-top: rgba(43,45,72,.97);
  --theme-card-bottom: rgba(17,19,34,.99);
  --theme-primary-ink: #21190d;
  --theme-radius-sm: 3px;
  --theme-radius-md: 5px;
  --theme-radius-lg: 7px;
  --theme-display-font: Georgia, "Times New Roman", serif;
  --theme-shadow-1: 0 5px 14px rgba(0,0,0,.48);
  --theme-shadow-2: 0 16px 42px rgba(0,0,0,.58);
  --theme-shadow-3: 0 34px 90px rgba(0,0,0,.78);
  --theme-glow: 0 0 25px rgba(119,203,209,.12);
  --theme-blur: 8px;
  --theme-texture-opacity: .33;
  --theme-texture:
    repeating-linear-gradient(117deg, transparent 0 42px, rgba(214,174,88,.018) 43px 44px),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.045) 0 1px, transparent 1.5px);
  --theme-css-backdrop:
    radial-gradient(42% 38% at 18% 78%, rgba(22,118,125,.2), transparent 70%),
    radial-gradient(46% 40% at 82% 18%, rgba(91,65,142,.3), transparent 72%),
    linear-gradient(150deg, #1b2038, #090a13 60%, #171125);
}
html[data-visual-theme="codex-scene"] {
  --theme-scene: url("./assets/themes/illuminated-codex.jpg");
  --theme-scene-scrim-top: rgba(4,7,19,.42);
  --theme-scene-scrim-bottom: rgba(5,6,16,.76);
  --theme-scene-position: center;
}
html[data-theme-family="codex"]
  :is(.title-panel, .topbar, .blind-select-head, .blind-card, .fork-lane,
      .shop-head, .shop-panel, .pack-option, .scoreboard, .play-area,
      .hand-panel, .rail-block, .overlay-card, .over-stat) {
  border-color: rgba(214,174,88,.34);
  background-image:
    linear-gradient(180deg, rgba(55,59,91,.42), rgba(14,17,31,.72)),
    repeating-linear-gradient(90deg, rgba(214,174,88,.025) 0 1px, transparent 1px 28px);
  box-shadow:
    0 0 0 3px rgba(7,9,18,.75),
    0 0 0 4px rgba(214,174,88,.15),
    var(--theme-shadow-2),
    inset 0 0 28px rgba(0,0,0,.28);
}
html[data-theme-family="codex"] .section-title,
html[data-theme-family="codex"] .screen-title,
html[data-theme-family="codex"] .encounter-name {
  color: #f0dfb9;
  font-variant: small-caps;
  letter-spacing: .12em;
}
html[data-theme-family="codex"] .section-title::before,
html[data-theme-family="codex"] .section-title::after {
  background: linear-gradient(90deg, transparent, rgba(214,174,88,.55), transparent);
}
html[data-theme-family="codex"] .stat,
html[data-theme-family="codex"] .resolution-step {
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(214,174,88,.06);
}
html[data-theme-family="codex"] .play-area::before {
  border-style: double;
  border-width: 3px;
  border-color: rgba(214,174,88,.22);
}
html[data-theme-family="codex"] .fork-node,
html[data-theme-family="codex"] .floor-node {
  border-radius: 50% 50% 44% 44%;
}
html[data-theme-family="codex"] .action {
  border-radius: 2px 12px;
  clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
}

/* ==========================================================================
   G / H — Verdant Reliquary
   ========================================================================== */

html[data-theme-family="verdant"] {
  --bg-0: #030a08;
  --bg-1: #071b14;
  --bg-2: #123527;
  --theme-surface: rgba(10, 32, 25, .88);
  --theme-surface-strong: #071d16;
  --theme-edge: rgba(109, 226, 180, .23);
  --theme-edge-hot: rgba(141, 235, 196, .48);
  --theme-ink: #e8ead3;
  --theme-dim: #adc5b3;
  --theme-faint: #68877a;
  --theme-accent: #e4b55f;
  --theme-accent-deep: #8c6528;
  --theme-accent-2: #6de2b4;
  --theme-accent-3: #72b9d9;
  --theme-button: linear-gradient(155deg, rgba(31,77,59,.96), rgba(9,34,26,.98));
  --theme-card-top: rgba(27,67,51,.97);
  --theme-card-bottom: rgba(7,25,20,.99);
  --theme-primary-ink: #182313;
  --theme-radius-sm: 7px 2px;
  --theme-radius-md: 15px 4px;
  --theme-radius-lg: 26px 7px;
  --theme-display-font: Georgia, "Times New Roman", serif;
  --theme-shadow-1: 0 5px 15px rgba(0,0,0,.46);
  --theme-shadow-2: 0 17px 44px rgba(0,0,0,.58);
  --theme-shadow-3: 0 34px 90px rgba(0,0,0,.78);
  --theme-glow: 0 0 28px rgba(109,226,180,.16), 0 0 45px rgba(228,181,95,.08);
  --theme-blur: 9px;
  --theme-texture-opacity: .38;
  --theme-texture:
    radial-gradient(ellipse at 20% 0%, rgba(109,226,180,.045) 0 2px, transparent 3px),
    repeating-radial-gradient(ellipse at 80% 110%, transparent 0 26px, rgba(228,181,95,.018) 27px 28px);
  --theme-css-backdrop:
    radial-gradient(42% 38% at 12% 20%, rgba(33,126,83,.34), transparent 70%),
    radial-gradient(38% 34% at 86% 72%, rgba(17,115,112,.24), transparent 72%),
    radial-gradient(30% 28% at 52% 0%, rgba(213,163,68,.14), transparent 70%),
    linear-gradient(150deg, #113429, #030b08 58%, #092019);
}
html[data-visual-theme="verdant-scene"] {
  --theme-scene: url("./assets/themes/verdant-reliquary.jpg");
  --theme-scene-scrim-top: rgba(2,10,7,.38);
  --theme-scene-scrim-bottom: rgba(2,8,6,.74);
  --theme-scene-position: center;
}
html[data-theme-family="verdant"]
  :is(.title-panel, .topbar, .blind-select-head, .blind-card, .fork-lane,
      .shop-head, .shop-panel, .pack-option, .scoreboard, .play-area,
      .hand-panel, .rail-block, .overlay-card, .over-stat) {
  border-radius: 24px 6px 24px 6px;
  background-image:
    radial-gradient(90% 90% at 0% 0%, rgba(109,226,180,.1), transparent 58%),
    radial-gradient(90% 90% at 100% 100%, rgba(228,181,95,.07), transparent 60%),
    linear-gradient(150deg, rgba(19,54,42,.9), rgba(5,22,17,.94));
  box-shadow:
    var(--theme-shadow-2),
    0 0 28px rgba(109,226,180,.06),
    inset 0 1px 0 rgba(211,255,232,.08);
}
html[data-theme-family="verdant"] .screen-title,
html[data-theme-family="verdant"] .encounter-name,
html[data-theme-family="verdant"] .section-title {
  color: #dfe8c8;
  text-shadow: 0 0 16px rgba(109,226,180,.16);
}
html[data-theme-family="verdant"] .enemy {
  border-radius: 70px 70px 26px 7px;
  background:
    radial-gradient(100% 76% at 50% 0%, rgba(109,226,180,.16), transparent 62%),
    linear-gradient(160deg, rgba(27,69,50,.94), rgba(5,22,18,.98));
}
html[data-theme-family="verdant"] .fork-lane {
  border-radius: 44% 44% 28px 7px / 12% 12% 28px 7px;
}
html[data-theme-family="verdant"] .action,
html[data-theme-family="verdant"] .fork-take {
  border-radius: 18px 4px;
  clip-path: none;
}
html[data-theme-family="verdant"] .gem,
html[data-theme-family="verdant"] .consumable {
  box-shadow: 0 0 20px rgba(109,226,180,.08), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ==========================================================================
   Motion and contrast safeguards
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html[data-visual-theme]:not([data-visual-theme="default"]) body::before {
    animation: none !important;
  }
}

@container app (max-width: 560px) {
  .theme-menu {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 50px;
    width: auto;
    max-height: calc(100vh - 70px);
  }
  .theme-option-copy small {
    white-space: normal;
  }
}