/* Classic Wood: shared game chrome. Loaded last so runtime-created controls
   receive the same finish. Geometry, artwork and gameplay remain component-owned. */
:root {
  --wood-shell: linear-gradient(180deg, #3a2118d9, #251710ed), var(--wood-grain);
  --wood-inset: #241a15;
  --wood-paper: #fff0d2;
  --wood-grain: url('../assets/ui/classic-wood-grain.png');
  --wood-ink: #3d2118;
  --wood-edge: #e5a447;
  --wood-shadow: #41201c;
  --wood-cream: #fff2cf;
  --wood-face: linear-gradient(180deg, #75401d99, #512613d9), var(--wood-grain);
  --panel-bg: #fff1d1;
  --panel-border: #70401f;
  --panel-shadow: #3d211c;
}

/* Only paint controls: never change the hit areas of map nodes or art cards. */
body button:where(:not(.map-node):not(.route-node):not(.draft-shop-card):not(.bench-slot):not(.merchant-board-buy)),
body input:is([type='button'], [type='submit']) {
  --wood-tint: linear-gradient(180deg, #78401666, #572819bb);
  background-image: var(--wood-tint), var(--wood-grain) !important;
  background-size: auto, 380px 380px !important;
  background-color: #88421f !important;
  border-color: var(--wood-edge) !important;
  border-style: solid;
  border-radius: 10px !important;
  color: var(--wood-cream) !important;
  text-shadow: 0 2px 1px #422017;
  box-shadow: inset 0 2px 0 #ffe7a780, inset 0 -3px 0 #562214b3,
    inset 0 0 0 2px #6c351e, 0 4px 0 var(--wood-shadow), 0 5px 7px #160c0840 !important;
  transition: filter 120ms ease, box-shadow 120ms ease;
}

body button:is(.btn-primary, .board-battle-btn, .btn-resume,
  .btn-claim-all-rewards, .btn-claim-treasure, .audio-done-btn, .confirm-btn-keep) {
  --wood-tint: linear-gradient(180deg, #ffcb4666, #b758052b);
  border-color: #ffdb78 !important;
  color: #fff8de !important;
  text-shadow: 0 2px 0 #783408, 1px 0 #783408, -1px 0 #783408;
}

body button:is(.btn-abandon, .confirm-btn-abandon, .btn-bounty-sacrifice, .btn-ware-buy.hp) {
  --wood-tint: linear-gradient(180deg, #b62920c9, #761b17de);
  border-color: #ecaa74 !important;
}

body button:is(.btn-reroll) {
  --wood-tint: linear-gradient(180deg, #67502bed, #3b2b19f2);
}

body button:is(.btn-buy-xp) {
  --wood-tint: linear-gradient(180deg, #78552aeb, #452b18f2);
}

body button:is(.active, .locked, [aria-selected='true'], [aria-pressed='true']) {
  border-color: #ffe59c !important;
  outline: 2px solid #ffc85b;
  outline-offset: -5px;
}

@media (hover: hover) {
  body button:not(:disabled):not([aria-disabled='true']):hover { filter: brightness(1.12); }
}
body button:not(:disabled):not([aria-disabled='true']):active {
  box-shadow: inset 0 3px 5px #35170b90, 0 1px 0 var(--wood-shadow) !important;
}
body button:focus-visible,
body [role='button']:focus-visible,
body input:focus-visible {
  outline: 3px solid #fff4b5 !important;
  outline-offset: 3px;
}
body button:is(:disabled, [aria-disabled='true'], .is-disabled) {
  filter: grayscale(.75) saturate(.3);
  opacity: .5;
  cursor: not-allowed;
  box-shadow: inset 0 1px 3px #25140c80 !important;
}

body button:is(.gear-menu-trigger, .gear-dropdown-btn, .combat-stats-info-btn,
  .pause-close-btn, .tt-close, .relic-popup-close-btn) {
  border-radius: 50% !important;
  border-width: 2px;
}

body button:is(.header-inventory-btn) {
  padding: 4px 12px 4px 8px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
}

/* Wood surrounds frame the existing readable content and scene artwork. */
body :is(.modal-card, .pause-modal-card, .start-menu-card, .intro-card, .node-briefing-popover,
  .champion-select-card, .unit-tooltip, .combat-stats-panel, .gear-menu-dropdown, .inventory-modal-card) {
  border-color: #ba762d;
  box-shadow: inset 0 0 0 2px #ffd58a80, 0 0 0 2px #512b20,
    0 7px 0 var(--wood-shadow), 0 18px 36px #160c0870;
  border-radius: 16px;
}

body .start-menu-card {
  background: var(--wood-face);
  background-size: auto, 540px 540px;
  border: 5px solid #c5893e;
  padding: 32px;
  max-width: 600px;
}
body .start-title {
  color: #ffe8a5;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  text-shadow: 0 4px 0 #49221b, 2px 0 #49221b, -2px 0 #49221b;
  margin-bottom: 12px;
}
body .start-subtitle { color: #ffe7c0; font-size: 14px; }
body .start-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 4px;
}
body .start-actions .btn-start-menu {
  padding: 15px 12px;
  font-size: 15px;
  line-height: 1.3;
  min-height: 54px;
}
body .start-actions :is(.btn-play, #btn-open-about) { grid-column: 1 / -1; }
body .start-actions .btn-play { font-size: 21px; min-height: 64px; }

body .start-beta-emblem {
  position: absolute;
  top: -18px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  background: linear-gradient(135deg, #a82315 0%, #76150b 50%, #4a0c06 100%);
  border: 2.5px solid #ffd58a;
  border-radius: 999px;
  box-shadow: 0 4px 0 #2e0805, 0 8px 18px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #ffe8a5;
  font-family: var(--font-title, serif);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-shadow: 0 2px 0 #2e0805;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
body .start-beta-emblem:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 0 #2e0805, 0 12px 24px rgba(220, 70, 40, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  filter: brightness(1.1);
}
body .start-beta-emblem:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 2px 0 #2e0805, 0 4px 8px rgba(0, 0, 0, 0.6);
}
body .start-footer-tag {
  color: #ffe7c0;
  font-size: 13px;
  margin-top: 14px;
  letter-spacing: 0.5px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
body .start-copyright-tag {
  color: #ffdca8;
  font-size: 11.5px;
  margin-top: 6px;
  letter-spacing: 0.5px;
  opacity: 0.85;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
body .start-legal-links {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
body .btn-legal-link {
  background: none;
  border: none;
  color: #ffd58a;
  cursor: pointer;
  text-decoration: underline;
  font-size: 11px;
  padding: 2px 4px;
  font-family: inherit;
  transition: color 0.15s;
}
body .btn-legal-link:hover {
  color: #fff;
}
body .legal-dot {
  color: #ba762d;
  font-size: 10px;
}
body .start-bottom-bar {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #f7dfb9;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px #000, 0 0 8px rgba(0,0,0,0.8);
  pointer-events: auto;
  white-space: nowrap;
  z-index: 10;
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 14px;
}
body .bottom-legal-link,
body .bottom-legal-link:visited {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  color: #f7dfb9;
  text-decoration: underline;
  pointer-events: auto;
  transition: color 0.15s;
}
body .bottom-legal-link:hover {
  color: #fff;
}

body .intro-card {
  background: linear-gradient(#fff3ddeb, #efd8aceb), var(--wood-grain);
  background-size: auto, 480px 480px;
}
body .champion-select-card {
  background: var(--wood-face);
  background-size: auto, 480px 480px;
  padding: 20px;
}
body .champion-choice { border-radius: 14px; border-color: #b97b36; }
body .choose-label {
  background: var(--wood-face);
  color: var(--wood-cream);
  border: 2px solid var(--wood-edge);
  border-radius: 8px;
  padding: 10px;
  text-shadow: 0 2px #48241a;
  box-shadow: 0 3px 0 var(--wood-shadow);
}
body #app:has(#modal-overlay:not(.hidden)) .top-right-gear-menu { display: none !important; }

body #main-header,
body :is(.drafting-panel.draft-shop-wrapper, .draft-shop-header, .bench-slots-wrap, .board-item-bag-dock) {
  background: var(--wood-face);
  background-size: auto, 480px 480px;
  border-color: #bc8038;
  box-shadow: inset 0 2px 0 #ffd28670, inset 0 -2px 0 #3c1c19, 0 3px 0 #38201b;
}
body .arena-container {
  border: 5px solid #a5682c;
  border-radius: 14px;
  box-shadow: 0 0 0 2px #49281c, inset 0 0 0 2px #efb654, 0 5px 0 #3c231e;
  overflow: visible !important;
}
body .arena-stage-box { gap: 10px; }
body .draft-shop-wrapper { border-radius: 12px; }
body .draft-shop-header { border-radius: 7px; }
body .draft-gold-tracker {
  background: #392116;
  border-color: #dc9e46;
  color: #fff0c9;
}
body .draft-card-bar {
  background: var(--wood-face);
  background-size: auto, 380px 380px;
  border-top: 1px solid #d79a43;
}
body .draft-card-beast-name { color: #fff0d0; }
body .draft-shop-card { border-radius: 10px; }
body .draft-actions-col { position: relative; gap: 9px; }
body .draft-action-btn {
  border: 3px solid #c58a3e !important;
  border-radius: 11px !important;
  box-shadow: inset 0 2px 0 #ffe0a05c, inset 0 -3px 0 #2e170d99, 0 4px 0 #321a10, 0 7px 12px #0006 !important;
}
body .draft-action-btn::before {
  height: auto;
  inset: 4px;
  border: 1px solid #f2c36b42;
  border-radius: 6px;
  background: linear-gradient(115deg, #ffffff12, transparent 42%, #00000012);
}
body .draft-action-btn.btn-reroll {
  --wood-tint: linear-gradient(180deg, #68502bd9, #382719ed);
  border-color: #caa04b !important;
}
body .draft-action-btn.btn-buy-xp {
  --wood-tint: linear-gradient(180deg, #7a5226df, #432918f2);
  border-color: #d29a46 !important;
}
body .draft-action-title { color: #fff0cb; text-shadow: 0 2px #29150c; }
body .draft-action-cost { color: #ffd474; text-shadow: 0 2px #32170b; }
body .draft-reroll-glyph { color: #bce589; text-shadow: 0 2px #213614; filter: drop-shadow(0 3px 2px #0008); }
body .draft-xp-level-badge {
  background: linear-gradient(#5f421f, #342416);
  border-color: #d9a452;
  box-shadow: inset 0 1px #ffe2a059, 0 2px 4px #0006;
}
body .draft-xp-lvl-num { color: #ffe29b; border-right-color: #d9a45266; text-shadow: 0 2px #32170b; }
body .draft-xp-val { color: #fff1ce; }
body .draft-xp-subbar { background: #25150d; border-top: 1px solid #8b5c2f; }
body .draft-xp-subbar-fill { background: linear-gradient(90deg, #7fa34d, #d7b64e, #f0d77a); box-shadow: 0 0 7px #d9bd58aa; }
body .bench-slots-wrap { border: 2px solid #c48a3f; border-radius: 10px; }
body .bench-slot {
  border-color: #be8a49;
  background-color: #4b2b1b9e;
  box-shadow: inset 0 2px 4px #20130975;
}
body :is(.item-bag-title, .item-bag-count, .item-tray-empty-hint, .bench-slot-number) {
  color: #fff0d0;
  text-shadow: 0 1px 1px #351c13;
}
body .draft-action-title { color: #fff2d3; }
body :is(.draft-xp-subbar, .tt-resource-track, .mini-xp-bar-wrap) {
  border: 1px solid #cd9140;
  background: #492820;
}
body .draft-xp-subbar-fill { background: linear-gradient(90deg, #7fa34d, #d7b64e, #f0d77a); box-shadow: 0 0 7px #d9bd58aa; }

/* Secondary details stay dark on parchment; only section frames gain timber. */
body :is(.pause-header, .audio-settings-header, .confirm-modal-header) {
  background: linear-gradient(#ffe8b8ed, #edc88ceb), var(--wood-grain);
  border-bottom-color: #bc813c;
}
body :is(.pause-action-copy strong, .pause-action-copy small, .pause-action-arrow) {
  color: #fff0cd;
}
body :is(.lore-main-nav, .lore-filter-tabs) { gap: 8px; }
body :is(.audio-slider) { accent-color: #bd772c; }

@media (min-width: 901px) {
  body .draft-actions-col { order: 1; }
  body .draft-cards-container { order: 2; }
}
@media (max-width: 768px) {
  body .start-screen-overlay {
    box-sizing: border-box;
    height: 100%;
    min-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: max(16px, env(safe-area-inset-top, 16px)) 16px max(24px, calc(16px + env(safe-area-inset-bottom, 24px)));
  }
  body .start-menu-card {
    box-sizing: border-box;
    width: 95%;
    max-width: calc(100% - 32px);
    padding-top: 42px;
    margin: auto 0 16px 0;
    flex-shrink: 0;
  }
  body .start-beta-emblem {
    top: 8px;
    right: auto;
    left: 50%;
    padding: 4px 12px;
    font-size: 11px;
    letter-spacing: 1.5px;
    transform: translateX(-50%);
  }
  body .start-beta-emblem:hover { transform: translateX(-50%) translateY(-2px) scale(1.05); }
  body .start-beta-emblem:active { transform: translateX(-50%) translateY(2px) scale(0.98); }

  body .start-bottom-bar {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin: 0 auto;
    margin-bottom: max(14px, env(safe-area-inset-bottom, 20px));
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 14px;
    white-space: normal;
    text-align: center;
    padding: 4px 12px;
    box-sizing: border-box;
    flex-shrink: 0;
  }
}

@media (max-width: 600px) {
  body .start-menu-card { padding: 42px 16px 22px; width: calc(100% - 32px); }
  body .start-actions { gap: 12px; }
  body .start-actions .btn-start-menu { font-size: 13px; padding: 12px 8px; }
  body .start-actions .btn-play { font-size: 18px; }
  body .arena-container { border-width: 3px; border-radius: 10px; }
  body .arena-stage-box { gap: 4px; }
  body .draft-shop-wrapper { border-radius: 10px; }
  body .bench-slots-wrap { border-width: 1px; }
}

@media (max-width: 768px), (max-width: 960px) and (max-height: 500px) {
  html, body, #app {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body .minimal-battle-view.hidden,
  body .minimal-battle-view[style*="none"],
  body .full-stage-view.hidden,
  body .full-stage-view[style*="none"] {
    display: none !important;
  }

  body .minimal-battle-view:not(.hidden):not([style*="none"]) {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
    padding: 2px 4px max(4px, env(safe-area-inset-bottom, 4px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  body .map-scroll-canvas {
    width: calc(100% - 10px) !important;
    margin: 6px auto max(4px, env(safe-area-inset-bottom, 4px)) !important;
  }

  body .arena-stage-box {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  body .arena-main-row {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    position: relative !important;
  }

  body .arena-main-row.synergy-elevated,
  body .arena-main-row:has(.board-synergies-tracker:hover),
  body .arena-main-row:has(.board-synergies-tracker.expanded),
  body .arena-main-row:has(.board-synergies-tracker.active-open),
  body .arena-main-row:has(.board-synergy-chip:hover),
  body .arena-main-row:has(.mobile-tooltip-active) {
    z-index: 90000 !important;
    overflow: visible !important;
  }

  body .arena-container {
    flex: 1 1 0 !important;
    min-height: 180px !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }

  body .drafting-panel.draft-shop-wrapper {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    z-index: 10 !important;
  }

  /* Mobile Champion Carousel */
  body .champion-screen-overlay {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding: 6px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body .champion-select-card {
    height: 100% !important;
    max-height: calc(100dvh - 12px) !important;
    width: 100% !important;
    max-width: 440px !important;
    padding: 8px 10px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body .champion-choice-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 2px 2px 4px !important;
  }

  body .champion-choice {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body button { transition: none !important; }
}

/* Full modal family: a dark carved surround separates amber actions from
   scene art. Explicit specificity also replaces legacy per-modal !important skins. */
html body :is(.modal-card, .pause-modal-card, .inventory-modal-card,
  .lore-modal-card, .run-stats-modal, .relic-popup-modal, .node-briefing-popover,
  .unit-tooltip, .combat-stats-panel, .gear-menu-dropdown) {
  background: var(--wood-shell) !important;
  background-size: auto, 540px 540px !important;
  border: 3px solid #bd873f !important;
  border-radius: 16px !important;
  color: #f6e5c8;
  box-shadow: inset 0 0 0 2px #f9ce7950, 0 0 0 2px #352019,
    0 7px 0 #241712, 0 22px 48px #0009 !important;
}
html body .casino-premium.casino-modal-card {
  background: var(--wood-shell) !important;
  background-size: auto, 540px 540px !important;
  border: 3px solid #bd873f !important;
}
html body :is(.modal-card, .pause-modal-card, .inventory-modal-card,
  .lore-modal-card, .run-stats-modal, .relic-popup-modal) > :is(h1, h2, h3),
html body :is(.lore-title, .inv-modal-title, .run-stats-title, .relic-popup-name) {
  color: #fff0c8 !important;
  text-shadow: 0 2px 2px #1a100c !important;
}
html body :is(.modal-card, .relic-popup-modal) > p {
  color: #f5e3c4;
}
html body :is(.event-art-frame, .tt-art-frame, .lore-dossier-art-frame) {
  border-color: #b98b4f !important;
  background-color: #201712;
  box-shadow: 0 0 0 2px #271911, 0 4px 10px #0006;
}

/* Quiet insets are deliberately untextured: body copy never fights the grain. */
html body :is(.event-story-box, .event-outcome-modal .event-outcome-content,
  .lore-dossier-panel, .lore-dossier-stats-grid, .lore-dossier-ability-box, .lore-dossier-passive-box,
  .inv-items-list-pane, .inv-item-inspector-pane, .inv-inspector-stats-box, .inv-inspector-effect-box,
  .market-ware-card, .market-bounty-item,
  .relic-popup-effect-card, .casino-rules, .market-stats-pill, .casino-stats-pill,
  .tt-ability-box, .tt-passive-box) {
  background: var(--wood-inset) !important;
  border: 1px solid #997246 !important;
  color: #f3e2c5 !important;
  box-shadow: inset 0 2px 5px #0005;
}
html body :is(.event-story-para, .event-outcome-content p,
  .relic-popup-effect-desc, .tt-ability-desc, .tt-passive-desc) {
  color: #f3e2c5 !important;
}
html body :is(.event-option-btn, .campfire-choice, .btn-reward-choice) {
  --wood-tint: linear-gradient(180deg, #5b3824e6, #34231aef);
  background-image: var(--wood-tint), var(--wood-grain) !important;
  border-color: #c89b5b !important;
  color: #fff0d4 !important;
}
html body :is(.event-option-title, .event-option-branch-icon, .campfire-choice-title, .campfire-choice-desc) {
  color: #fff0d4 !important;
  text-shadow: none !important;
}
html body .campfire-choice :is(span, strong, div, p) {
  text-shadow: none !important;
}
html body .campfire-choice-icon {
  filter: none !important;
}
html body .campfire-rest { border-left: 5px solid #75d9a0 !important; }
html body .campfire-train { border-left: 5px solid #82cbf4 !important; }
html body .campfire-transmute { border-left: 5px solid #d5adff !important; }
html body .campfire-choice-badge {
  background: #1d1713 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html body :is(.casino-tab, .casino-premium .casino-tab) {
  --wood-tint: linear-gradient(#543520ec, #342116f2);
  background-image: var(--wood-tint), var(--wood-grain) !important;
  border: 1px solid #ad8046 !important;
}
html body :is(.casino-tab.active, .lore-nav-tab.active, .lore-filter-tab.active) {
  --wood-tint: linear-gradient(#967033d9, #624317e8);
  color: #fff5d8 !important;
  border-bottom: 3px solid #ffce73 !important;
}
html body :is(.casino-subtitle, .market-subtitle, .casino-result,
  .event-roulette-subtitle, .relic-popup-type) { color: #e4ceb0; }

/* Parchment sections inside system menus retain dark text and trait colours. */
html body :is(.pause-synergies-column, .pause-settings-column,
  .audio-settings-content, .confirm-modal-content, .run-stats-scroll, .victory-hero) {
  background: #fff0d2;
  color: #4a2b1c;
  border: 1px solid #b88d52;
  border-radius: 12px;
  padding: 14px;
}
html body :is(.pause-header, .audio-settings-header, .confirm-modal-header) {
  background: linear-gradient(#f8dba6eb, #dfb77bea), var(--wood-grain);
  background-size: auto, 480px 480px;
  color: #462619;
  border-bottom: 2px solid #ae7e3c;
}
html body .run-stats-header { background: linear-gradient(#f8dba6eb, #dfb77bea), var(--wood-grain); background-size: auto, 480px 480px; border-bottom-color: #ae7e3c; }
html body .run-stats-header h2 { color: #462619; }
html body .victory-rewards-heading { color: #efdbb7; }
html body .victory-hero { margin-bottom: 14px; }
html body :is(.audio-settings-title, .pause-title, .confirm-modal-title) {
  color: #462619 !important;
  text-shadow: none;
}
html body :is(.audio-settings-subtitle, .pause-subtitle, .confirm-modal-subtitle) {
  color: #64452e;
}
html body :is(.audio-control-row, .relic-item-card) {
  background: #fff8e8;
  border-color: #cdb18b;
}
html body :is(.lore-beast-card, .lore-search) { background-color: #fff4df; }
html body :is(.modal-card, .pause-modal-card, .inventory-modal-card,
  .lore-modal-card, .lore-list-pane, .lore-dossier-panel) {
  scrollbar-color: #b38b52 #2d2017;
  scrollbar-width: thin;
}
html body .pause-content-grid { gap: 16px; }
html body .audio-settings-footer-actions { margin-top: 14px; background: transparent; border-color: #ad824b; }
html body :is(.inv-modal-header, .lore-header) { border-bottom-color: #ad824b; }
html body :is(.inv-modal-badge, .lore-counter-badge) {
  background: #302117;
  color: #ffe4a6;
  border-color: #bd914f;
}

/* Settings destinations share Audio's light wood header and cream reading cards. */
html body :is(.inventory-modal-card .inv-modal-header, .lore-modal-card .lore-header) {
  background: linear-gradient(#f8dba6eb, #dfb77bea), var(--wood-grain);
  background-size: auto, 480px 480px;
  padding: 16px;
  border: 1px solid #b88d52;
  border-radius: 12px;
  gap: 12px;
}
html body :is(.inventory-modal-card .inv-modal-title, .lore-modal-card .lore-title) {
  color: #462619 !important;
  text-shadow: none !important;
}
html body :is(.lore-modal-card .lore-list-pane, .lore-modal-card .lore-dossier-panel,
  .inventory-modal-card .inv-items-list-pane, .inventory-modal-card .inv-item-inspector-pane,
  .inventory-modal-card .inv-empty-state-full) {
  background: #fff0d2 !important;
  color: #4a2b1c !important;
  border: 1px solid #b88d52 !important;
  border-radius: 12px;
  padding: 14px;
  box-shadow: none;
}
html body :is(.lore-modal-card .lore-dossier-stats-grid,
  .lore-modal-card .lore-dossier-ability-box, .lore-modal-card .lore-dossier-passive-box,
  .inventory-modal-card .inv-inspector-stats-box, .inventory-modal-card .inv-inspector-effect-box,
  .inventory-modal-card .inv-item-row-card) {
  background: #fff8e8 !important;
  color: #4a2b1c !important;
  border: 1px solid #cdb18b !important;
  box-shadow: 0 3px 0 #bda889;
}
html body :is(.lore-dossier-name, .lore-dossier-title, .lore-ability-name,
  .lore-ability-desc, .lore-passive-name, .lore-passive-desc,
  .inv-item-row-name, .inv-inspector-name, .inv-inspector-type, .inv-pane-subtitle,
  .inv-inspector-section-label, .inv-inspector-desc, .inv-empty-state-full h3,
  .inv-empty-state-full p) {
  color: #4a2b1c !important;
  text-shadow: none;
}
html body .inv-item-row-card.active { outline: 2px solid #a66c21; outline-offset: -2px; }
html body :is(.lore-ability-cost-badge, .lore-passive-type-badge) {
  background: #e0eff5;
  color: #215267;
  border-color: #80a8b8;
}
html body :is(.inv-item-row-rarity, .inv-inspector-rarity-badge, .inv-empty-hint) {
  color: #714a18 !important;
}
html body :is(.lore-dossier-panel, .inv-item-inspector-pane) :is(.ev-hl-gold, .ev-tag-gold) { color: #88500c !important; }
@media (max-width: 600px) {
  html body :is(.inventory-modal-card .inv-modal-header, .lore-modal-card .lore-header,
    .lore-modal-card .lore-list-pane, .lore-modal-card .lore-dossier-panel,
    .inventory-modal-card .inv-items-list-pane, .inventory-modal-card .inv-item-inspector-pane) { padding: 10px; }
}

/* Announcements use the same material without the previous neon backdrop. */
html body .board-level-up-banner {
  background: var(--wood-shell);
  background-size: auto, 380px 380px;
  border: 3px solid #efba61;
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px #ffda8750, 0 5px 0 #382118, 0 12px 26px #0008;
}
html body .level-up-glow { display: none; }
html body .level-up-title { color: #fff1d0; text-shadow: 0 2px #23150e; }
html body .level-up-capacity { color: #ade9bd; text-shadow: 0 2px #23150e; }
html body :is(.battle-countdown-card, .battle-timer-pill, .toast) {
  background: var(--wood-shell);
  background-size: auto, 380px 380px;
  border-color: #efba61;
  color: #fff1d0;
}
@media (max-width: 600px) {
  html body :is(.pause-synergies-column, .pause-settings-column,
    .audio-settings-content, .confirm-modal-content) { padding: 10px; }
  html body .pause-content-grid { gap: 12px; }
}

/* Cream augment cards separate readable content from the timber frame. */
.black-market-modal-card .augment-help { color: #f4dfbb; font-size: 13px; }
.black-market-modal-card .augment-ware { background: #fff3db !important; border: 2px solid #b09b7c; color: #412c20; }
.black-market-modal-card .augment-ware[data-tier="gold"] { border-color: #efa92f; }
.black-market-modal-card .augment-ware[data-tier="prismatic"] { border-color: #b593f5; }
.black-market-modal-card .augment-ware .ware-name { color: #412c20 !important; }
.black-market-modal-card .augment-ware .ware-desc { color: #64503f !important; }
.black-market-modal-card .augment-ware .ware-icon {
  width: 112px;
  height: 112px;
  margin: 0 auto 8px;
  border-radius: 18px;
  background: radial-gradient(circle, #ffffff 0%, #fff3d5 62%, #d7a44c 100%);
  overflow: hidden;
}
.black-market-modal-card .augment-ware .ware-icon img { width: 100%; height: 100%; object-fit: contain; }
.black-market-modal-card .augment-ware .ware-icon span { width: 100%; height: 100%; place-items: center; font-size: 46px; }
.augment-ware .ware-rarity { display: block; font-size: 10px; margin: 5px 0; color: #594536; }
.augment-ware label { display: block; font-size: 12px; font-weight: 700; }
.augment-choice { display: block; width: 100%; min-height: 38px; margin-top: 6px; border: 1px solid #ac7a40; border-radius: 7px; background: #fffaf0; color: #412c20; padding: 6px; }
.augment-owned-list { display: flex; flex-wrap: wrap; gap: 8px; }
.augment-owned-list > div { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #bd8b43; border-radius: 8px; background: #fff3db; color: #412c20; }
.augment-owned-list img { width: 30px; height: 30px; object-fit: contain; }
.pause-augment { padding: 8px; margin-top: 6px; border: 1px solid #c69a5e; border-radius: 8px; color: #412c20; background: #fff4df; font-size: 12px; }
.pause-augment p { margin: 4px 0; }

/* Smuggler negotiation: dark carved cases, readable parchment text, hidden prices. */
.smugglers-augment-modal {
  --smuggler-cream: #fff2d0;
  --smuggler-muted: #dbc9a6;
  position: relative;
  padding: 0 26px 22px !important;
  background: linear-gradient(90deg, #2a130b, #522818 46%, #2a130b), var(--wood-grain) !important;
  background-blend-mode: multiply, overlay !important;
  border: 4px solid #bd7a2c !important;
  box-shadow: inset 0 0 0 2px #ffd27a66, inset 0 0 55px #100703, 0 24px 70px #000c !important;
}
.smugglers-augment-modal .smuggler-hero { position: relative; margin: 0 -26px 18px; min-height: 190px; overflow: hidden; border-bottom: 3px solid #b8752c; }
.smugglers-augment-modal .den-scene { width: 100%; height: clamp(190px, 27vh, 280px); margin: 0; border: 0; object-position: center 46%; }
.smuggler-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #120805e8 0%, #120805a8 48%, #12080545 100%), linear-gradient(0deg, #1e0e08 0%, transparent 58%); }
.smugglers-augment-modal .market-header { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 22px 34px; text-align: left; }
.smugglers-augment-modal .market-header h2 { margin: 7px 0 4px; color: #fff0c2 !important; font: 800 clamp(29px, 4vw, 43px)/1.05 Georgia, serif; text-shadow: 0 3px 8px #000; }
.smugglers-augment-modal .market-subtitle { max-width: 560px; margin: 0; color: #f2dfbd; font-size: 14px; font-style: normal; font-weight: 650; text-shadow: 0 2px 4px #000; }
.smugglers-augment-modal .market-stats-pill { margin-top: 12px; background: #190b07e8; border: 1px solid #efb853; color: #fff1cf; box-shadow: 0 3px 10px #0008; }
.augment-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; padding: 12px 15px; border: 1px solid #9c672f; border-radius: 10px; background: #1d0d08a8; }
.smugglers-augment-modal .market-section h3 { margin: 0 0 4px; padding: 0; border: 0; color: #ffd47c; font-size: 17px; text-shadow: 0 2px #190904; }
.augment-section-heading p { margin: 0; color: var(--smuggler-muted); font-size: 12px; line-height: 1.5; }
.augment-bargain-rule { flex: 0 0 auto; display: grid; grid-template-columns: 36px auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 7px 12px; border: 1px solid #d89b42; border-radius: 9px; color: #ffeac0; background: #3b1b0f; }
.augment-bargain-rule .mini-coin { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #ffe08a; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a5, #e69919 58%, #7b390e); color: #7b390e; }
.augment-bargain-rule strong { font-size: 14px; }
.augment-bargain-rule small { color: #cfb892; font-size: 10px; }
.smugglers-augment-modal .market-wares-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.smugglers-augment-modal .augment-ware {
  --tier-accent: #d8e1e5;
  min-height: 420px;
  padding: 15px !important;
  overflow: hidden;
  background: linear-gradient(165deg, #43251a 0%, #26120d 58%, #160a07 100%) !important;
  border: 2px solid var(--tier-accent) !important;
  border-radius: 13px;
  box-shadow: inset 0 0 0 1px #fff2d018, inset 0 -25px 40px #0006, 0 8px 16px #0006;
  color: var(--smuggler-cream);
}
.smugglers-augment-modal .augment-ware[data-tier="gold"] { --tier-accent: #ffc857; }
.smugglers-augment-modal .augment-ware[data-tier="prismatic"] { --tier-accent: #d8a0ff; }
.smugglers-augment-modal .augment-ware.is-price-revealed { box-shadow: inset 0 0 28px color-mix(in srgb, var(--tier-accent) 18%, transparent), 0 10px 24px #0009; transform: translateY(-3px); }
.augment-tier-ribbon { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 4px 9px; border: 1px solid var(--tier-accent); border-radius: 999px; background: #160a07dd; color: var(--tier-accent); font-size: 9px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.smugglers-augment-modal .augment-ware .ware-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 148px;
  margin: 0 0 12px;
  border: 1px solid #c58b4755;
  border-radius: 9px;
  background: radial-gradient(ellipse at 50% 50%, #31414a 0%, #142027 55%, #090e11 100%);
  filter: none;
  animation: none;
  box-shadow: inset 0 0 24px #0008;
  overflow: hidden;
  box-sizing: border-box;
}
.smugglers-augment-modal .augment-ware .ware-icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 7px 7px #0009);
  display: block;
}
.smugglers-augment-modal .augment-ware .ware-icon span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 54px;
}
.smugglers-augment-modal .augment-ware .ware-name { color: #fff1cc !important; font: 800 19px/1.15 Georgia, serif; text-shadow: 0 2px 3px #000; }
.smugglers-augment-modal .augment-ware .ware-rarity { display: inline-block; margin: 5px 0 7px; padding: 3px 8px; border: 1px solid var(--tier-accent); border-radius: 999px; color: var(--tier-accent); background: #0005; letter-spacing: 1px; }
.smugglers-augment-modal .augment-ware .ware-desc { min-height: 64px; margin: 4px 0 10px; color: #f0dfc0 !important; font-size: 13px; font-weight: 600; line-height: 1.48; }
.smugglers-augment-modal .augment-choice-label { color: #ffe5b2; }
.smugglers-augment-modal .augment-choice { border: 2px solid #bf8235; background: #fff3d8; color: #36190d; font-weight: 700; }
.smugglers-augment-modal .ware-buy-options { display: block; margin-top: auto; }
.btn-augment-inspect, .btn-augment-accept, .btn-augment-bargain { width: 100%; min-height: 42px; border-radius: 8px; font-weight: 900; cursor: pointer; }
.btn-augment-inspect { border: 2px solid #e8ad4e; background: linear-gradient(#d98424, #994015); color: #fff4d3; box-shadow: inset 0 1px #ffd786, 0 4px 0 #401608; }
.augment-negotiation { width: 100%; padding-top: 9px; border-top: 1px solid #d9a34a66; }
.augment-price-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #ddc7a3; font-size: 11px; }
.augment-price-row strong { color: #ffdf88; font-size: 20px; text-shadow: 0 2px #000; }
.augment-price-change { margin: 5px 0; padding: 4px; border-radius: 5px; font-size: 10px; font-weight: 900; }
.augment-price-change.won { background: #174c32; color: #8ff2b8; }
.augment-price-change.lost { background: #64241f; color: #ffb0a5; }
.augment-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.btn-augment-accept { border: 1px solid #ffcc64; background: linear-gradient(#c56c22, #7d2d10); color: #fff3cd; }
.btn-augment-bargain { border: 1px solid #a88bff; background: linear-gradient(#604092, #352457); color: #f2eaff; }
.btn-augment-inspect:hover, .btn-augment-accept:hover, .btn-augment-bargain:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-augment-accept:disabled, .btn-augment-bargain:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.augment-cannot-afford { display: block; margin-top: 7px; color: #ffafa5; font-weight: 700; }
.augment-acquired-stamp { padding: 10px; border: 2px solid #79d59d; border-radius: 8px; color: #9af1ba; background: #17462d; font-weight: 900; letter-spacing: 1px; }
.smugglers-augment-modal .augment-owned-section { padding-top: 12px; border-top: 1px solid #9c672f; }
.smugglers-augment-modal .augment-owned-list > p { color: #ead9bc; }
.augment-coin-overlay { position: absolute; z-index: 50; inset: 0; display: none; place-items: center; border-radius: inherit; background: #080301e8; backdrop-filter: blur(5px); }
.augment-coin-overlay.is-active { display: grid; }
.augment-coin-scene { text-align: center; color: #fff0c9; }
.augment-coin-scene h3 { margin: 22px 0 6px; color: #ffd67f; font: 800 25px Georgia, serif; }
.augment-coin-scene p { color: #ead8b6; font-size: 15px; }
.augment-flip-coin { position: relative; width: 112px; height: 112px; margin: auto; transform-style: preserve-3d; }
.augment-flip-coin span { position: absolute; inset: 0; display: grid; place-items: center; border: 7px double #ffdf7a; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff1a5, #e29118 55%, #743009); color: #6a2908; font: 900 30px Georgia, serif; backface-visibility: hidden; box-shadow: inset 0 0 0 4px #a94f0e, 0 10px 30px #000; }
.augment-flip-coin span:last-child { transform: rotateY(180deg); }
.augment-flip-coin.is-flipping { animation: augment-coin-flip 1.05s cubic-bezier(.25,.75,.3,1) both; }
.augment-coin-overlay.bargain-won .augment-flip-coin { filter: drop-shadow(0 0 18px #55e98f); }
.augment-coin-overlay.bargain-lost .augment-flip-coin { filter: drop-shadow(0 0 18px #f05e4e); }
@keyframes augment-coin-flip { 0% { transform: translateY(20px) rotateY(0); } 45% { transform: translateY(-150px) rotateY(900deg) rotateZ(12deg); } 100% { transform: translateY(0) rotateY(1800deg); } }
@media (max-width: 760px) {
  .smugglers-augment-modal .market-wares-grid { grid-template-columns: 1fr; }
  .smugglers-augment-modal .augment-ware { min-height: auto; }
  .augment-section-heading { align-items: stretch; flex-direction: column; }
  .augment-bargain-rule { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .augment-flip-coin.is-flipping { animation-duration: .01ms; } }

/* Battle rewards use one coherent timber shell with readable parchment rewards. */
html body .victory-modal-container {
  padding: 0 24px 24px !important;
  overflow: hidden auto;
  background: linear-gradient(#4b2919e8, #26130ced), var(--wood-grain) !important;
  background-size: auto, 460px 460px !important;
  border: 4px solid #c28232 !important;
  box-shadow: inset 0 0 0 2px #ffe0a14d, inset 0 0 42px #120704, 0 9px 0 #32170b, 0 28px 55px #000a !important;
}
html body .victory-modal-container .victory-hero {
  margin: 0 -24px 15px;
  padding: 21px 24px 19px;
  border: 0;
  border-bottom: 3px solid #d4973e;
  border-radius: 0;
  background: linear-gradient(#875022df, #4b2718ed), var(--wood-grain) !important;
  background-size: auto, 420px 420px !important;
  color: #fff0cc;
  box-shadow: inset 0 -15px 28px #16090666;
}
html body .victory-modal-container .victory-hero::before,
html body .victory-modal-container .victory-hero::after { border-color: #ffd8832b; }
html body .victory-modal-container .victory-eyebrow { color: #ffd37b; text-shadow: 0 2px #291006; }
html body .victory-modal-container .victory-title-anim { color: #fff0c5 !important; text-shadow: 0 3px 0 #351508, 0 0 15px #ffb33355 !important; }
html body .victory-modal-container .victory-gold-summary { color: #f5e3c6; }
html body .victory-modal-container .victory-gold-highlight { color: #ffc34d; -webkit-text-fill-color: #ffc34d; background: none; text-shadow: 0 2px #3b1708; }
html body .victory-modal-container .victory-xp-summary-badge {
  background: #183f50 !important;
  border: 1px solid #66c7e9 !important;
  color: #bcecff !important;
}
html body .victory-modal-container .victory-breakdown-chip {
  color: #f2dfbf;
  background: linear-gradient(#533321, #342016);
  border: 1px solid #a87540;
  box-shadow: inset 0 1px #ffe2ad20, 0 3px 5px #0004;
}
html body .victory-modal-container .victory-breakdown-chip strong { color: #ffc45b; }
html body .victory-modal-container .victory-breakdown-chip.victory-xp-chip { color: #c9efff; background: linear-gradient(#234b59, #18333e); border-color: #5798b0; }
html body .victory-modal-container .victory-breakdown-chip.victory-xp-chip strong { color: #79d7fa; }
html body .victory-modal-container .victory-rewards-heading { color: #ffe7ba !important; text-shadow: 0 2px #160806; }
html body .victory-modal-container .victory-rewards-heading::after { background: linear-gradient(90deg, #b57d3c, transparent); }
html body .victory-modal-container .victory-reward-count { color: #fff0cd; background: #6d4328; border: 1px solid #bd8342; }
html body .victory-modal-container .reward-tier-card {
  background: linear-gradient(#fff4d8, #ead4a8) !important;
  border-color: #b57a32 !important;
  color: #3c2115;
  box-shadow: inset 0 0 0 2px #fff9e477, 0 5px 0 #6d3517, 0 9px 15px #0005;
}
html body .victory-modal-container .reward-card-media { background: radial-gradient(circle, #fff7df 25%, #d9b875 100%); border-right-color: #c18a43; }
html body .victory-modal-container .reward-card-title { color: #351d13; }
html body .victory-modal-container .reward-card-desc { color: #634737; }
html body .victory-modal-container .reward-badge-pill { background: #f7ead0; color: #533622; border-color: #bd9662; }
html body .victory-modal-container .btn-claim-all-rewards { border: 3px solid #ffd071; background: linear-gradient(#d98126, #9b4216), var(--wood-grain); background-size: auto, 260px 260px; color: #fff5d6; text-shadow: 0 2px #4b1d08; box-shadow: inset 0 1px #ffe5a0, 0 5px 0 #542109, 0 9px 16px #0007; }

/* Wide carved battle plaque for countdown and the final FIGHT call. */
html body .battle-countdown-overlay { background: radial-gradient(ellipse at center, #07101370 0%, #07101324 48%, transparent 74%); }
html body .battle-countdown-card {
  position: relative;
  width: min(390px, 76vw);
  min-height: 190px;
  gap: 2px;
  padding: 22px 42px 18px;
  border: 4px solid #d18b37;
  border-radius: 22px;
  background: linear-gradient(#6b3a20e8, #32170deb), var(--wood-grain) !important;
  background-size: auto, 360px 360px !important;
  color: #fff0c8;
  box-shadow: inset 0 0 0 2px #ffe2a94d, inset 0 -24px 34px #17080588, 0 8px 0 #321409, 0 18px 35px #0009;
  transform: translateY(-8px);
}
html body .battle-countdown-card::before,
html body .battle-countdown-card::after { content: '◆'; position: absolute; top: 50%; translate: 0 -50%; color: #f2b651; font-size: 22px; text-shadow: 0 2px #4a1c08; }
html body .battle-countdown-card::before { left: 17px; }
html body .battle-countdown-card::after { right: 17px; }
html body .battle-countdown-label { color: #ffe29a; font-size: 17px; letter-spacing: 4px; text-shadow: 0 3px #351408, 0 0 12px #f3a72c66; }
html body .battle-countdown-digit {
  color: #fff1bd;
  background: none;
  -webkit-text-fill-color: #fff1bd;
  text-shadow: 0 5px 0 #6e2c0c, 0 9px 18px #000b;
  filter: none;
}
html body .battle-countdown-card.is-fight { width: min(520px, 86vw); min-height: 156px; background: linear-gradient(#84351fed, #42150ced), var(--wood-grain) !important; border-color: #ffba48; }
html body .battle-countdown-card.is-fight::before,
html body .battle-countdown-card.is-fight::after { color: #ffcf65; }
html body .battle-countdown-digit.is-fight {
  color: #fff0b0;
  background: none;
  -webkit-text-fill-color: #fff0b0;
  font-size: clamp(48px, 8vw, 72px);
  text-shadow: 0 5px 0 #721d0d, 0 9px 20px #000c, 0 0 22px #ff5b2e88;
  filter: none;
}
@media (max-width: 520px) {
  html body .victory-modal-container { padding: 0 14px 18px !important; }
  html body .victory-modal-container .victory-hero { margin-left: -14px; margin-right: -14px; }
  html body .battle-countdown-card { width: min(300px, 76vw); min-height: 155px; padding: 17px 32px 14px; }
  html body .battle-countdown-digit { font-size: 72px; }
  html body .battle-countdown-card.is-fight { width: min(350px, 86vw); }
}

/* Mystery uses the established fate-card shuffle shared with normal events. */
.mystery-shuffle-empty {
  position: absolute;
  inset: 0;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, #77808a 0%, #263844 34%, #07131a 76%);
  color: #d8e7ec;
  font-size: 96px;
  text-shadow: 0 0 28px #d8f5ff;
}
.mystery-shuffle-modal .event-tarot-card[data-outcome="legendary"] {
  border-color: #e7b4ff;
  box-shadow: 0 12px 30px #000b, 0 0 34px #a855f7cc;
}
.mystery-shuffle-modal .event-tarot-card[data-outcome="nothing"] {
  border-color: #77808a;
  box-shadow: 0 12px 30px #000b, 0 0 22px #64748b99;
}
.mystery-special-result-card { max-width: 560px; text-align: center; }
.mystery-special-result-card > img {
  display: block;
  width: min(330px, 78vw);
  max-height: 330px;
  margin: 14px auto;
  border: 3px solid #edc76d;
  border-radius: 16px;
  object-fit: contain;
  background: #09151c;
  box-shadow: 0 10px 24px #0009, 0 0 22px #d98cff88;
}
.mystery-special-result-card .btn-primary { margin-top: 14px; }
.mystery-result-mist { margin: 18px 0 8px; font-size: 112px; filter: drop-shadow(0 0 24px #d8f5ff88); }