/* Tomb of Twenty-Five — cartoon "Tomb" skin for the Colchis frame (Owner directive 2026-09-25, revision 2: plain cartoon keys).
   Amber Swarm's cartoon language (flat fill, dark ink outline, hand-drawn radius, solid drop edge, small inset highlight)
   in a desert palette: SAND fill, DARK BROWN ink, GOLD only for on/active + the SPIN face, CARNELIAN only for STOP/destructive.
   Visual only — geometry stays Amber's (no size, position, padding, font-size or border-width changes; radii are Amber's own).
   Amber's rules are layered !important; the first declared layer (cf-base) outranks every later layer and unlayered CSS,
   so everything below lives in @layer cf-base with !important. Loaded as the LAST stylesheet. Art: ./assets/tomb-ui/. */

:root {
  --tt-sand: #e6c27f; --tt-sand-hi: #efd29a; --tt-sand-lo: #d7ae63; --tt-hl: #f7e3b4;
  --tt-ink: #3a2414; --tt-ink-2: #5c3a1c;
  --tt-gold: #f2b233; --tt-gold-hi: #f7c55a; --tt-gold-hl: #fde39a;
  --tt-carn: #b8412a; --tt-carn-hi: #c9523a; --tt-carn-hl: #e08a70; --tt-cream: #fff3d6;
  --tt-paper: #f4e4be; --tt-paper-2: #ecd6a4; --tt-paper-3: #fbf1d8;
  --tt-edge: 0 3px 0 var(--tt-ink);
  --tt-key: 0 3px 0 var(--tt-ink), inset 0 2px 0 var(--tt-hl);
  --tt-key-press: 0 1px 0 var(--tt-ink), inset 0 2px 0 var(--tt-sand-lo);
  --tt-key-gold: 0 3px 0 var(--tt-ink), inset 0 2px 0 var(--tt-gold-hl);
  --tt-key-carn: 0 3px 0 var(--tt-ink), inset 0 2px 0 var(--tt-carn-hl);
}

@layer cf-base {

/* ───────────── Bottom bar: the metrics panel ───────────── */
html body [data-cf] .amber-metrics {
  background: var(--tt-sand) !important; background-image: none !important;
  border-color: var(--tt-ink) !important; border-style: solid !important;
  box-shadow: var(--tt-key) !important; color: var(--tt-ink) !important;
}
html body [data-cf] .amber-metrics :is(.fx-cap, .fx-cap b, .fx-cap i, .tv-bet-cap, .tv-volume-row > span, .fx-sub, .tv-volume-scale span) {
  color: var(--tt-ink-2) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important;
}
html body [data-cf] .amber-metrics :is(.tv-bet-readout, .fx-val, .fx-val .toon-readable) { color: var(--tt-ink) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; }
/* Lettered readouts (cartoon-type.mjs): brown ink with a light sand halo. */
html body [data-cf] .toon-lettering .toon-outline path { stroke: var(--tt-hl) !important; }
html body [data-cf] .toon-lettering .toon-ink path { stroke: var(--tt-ink) !important; }
/* Phone landscape: the bet caption and scale label sat on the panel's top and bottom edges — nudge them inside (translate only, no layout change). */
@media (orientation: landscape) and (max-height: 500px) {
  html body [data-cf] .fx-bet .fx-cap-row { translate: 0 4px !important; }
  html body [data-cf] .fx-bet [data-fx="betsub"] { translate: 0 -6px !important; }
}

/* ───────────── Keys: flat sand, brown ink ───────────── */
html body [data-cf] :where(#less, #more, #fx-menu, .fx-auto button, .fx-turbo button, .amber-system > button, #tv-direct-bonuses > button, .cf-offer-key) {
  background: var(--tt-sand) !important; background-image: none !important;
  border-color: var(--tt-ink) !important; border-style: solid !important;
  box-shadow: var(--tt-key) !important;
  color: var(--tt-ink) !important; text-shadow: none !important; filter: none !important;
}
html body [data-cf] :where(#less, #more, #fx-menu, .fx-auto button, .fx-turbo button, .amber-system > button, #tv-direct-bonuses > button) :is(.cartoon-icon svg, .cartoon-icon svg *, span > svg, span > svg *, .fx-ico, .fx-ico *) {
  stroke: var(--tt-ink) !important; color: var(--tt-ink) !important; filter: none !important;
}
html body [data-cf] :where(#less, #more, #fx-menu, .fx-auto button, .fx-turbo button, .amber-system > button, #tv-direct-bonuses > button, .cf-offer-key) :is(.cartoon-label, .tv-switch-glass-text, small, b, i, .tv-game-bonus-name, .tv-game-bonus-name *, .tv-game-bonus-state, .cf-offer-title, .cf-offer-line) {
  color: var(--tt-ink) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important;
}
html body [data-cf] .tv-switch-label { color: var(--tt-ink) !important; text-shadow: none !important; }

/* States shared by every key. */
html body [data-cf] :where(#less, #more, #fx-menu, .fx-auto button, .fx-turbo button, .amber-system > button, #tv-direct-bonuses > button, .cf-offer-key):hover:not(:disabled, [aria-disabled="true"]) {
  background-color: var(--tt-sand-hi) !important;
}
html body [data-cf] :where(#less, #more, #fx-menu, .fx-auto button, .fx-turbo button, .amber-system > button, #tv-direct-bonuses > button, .cf-offer-key):is(.tv-pressed, :active:not(:disabled)) {
  background-color: var(--tt-sand-lo) !important; box-shadow: var(--tt-key-press) !important;
}
html body [data-cf] :where(#less, #more, #spin, #fx-menu, .fx-auto button, .fx-turbo button, .amber-system > button, #tv-direct-bonuses > button, .cf-offer-key):focus-visible {
  outline: 3px solid var(--tt-cream) !important; outline-offset: 3px !important;
}
html body [data-cf] :where(#less, #more, #fx-menu, .fx-auto button, .fx-turbo button, .amber-system > button, #tv-direct-bonuses > button, .cf-offer-key):is(:disabled, [aria-disabled="true"]) {
  filter: saturate(.35) brightness(.8) !important;
}

/* On / active: gold. */
html body [data-cf] :where(.fx-auto button, .fx-turbo button)[aria-checked="true"],
html body [data-cf] .amber-system > button[aria-pressed="true"],
html body [data-cf] #tv-direct-bonuses > button[aria-pressed="true"] {
  background: var(--tt-gold) !important; background-image: none !important; box-shadow: var(--tt-key-gold) !important;
}
html body [data-cf] :where(.fx-auto button, .fx-turbo button)[aria-checked="true"]:hover:not(:disabled),
html body [data-cf] .amber-system > button[aria-pressed="true"]:hover:not(:disabled),
html body [data-cf] #tv-direct-bonuses > button[aria-pressed="true"]:hover:not(:disabled) { background-color: var(--tt-gold-hi) !important; }

/* ───────────── SPIN: gold cartoon disc, brown ray ring, brown play glyph; STOP = carnelian ───────────── */
html body [data-cf] #spin {
  background: url("./assets/tomb-ui/spin-rays.svg") center / 100% 100% no-repeat, var(--tt-gold) !important;
  border-color: var(--tt-ink) !important; border-style: solid !important;
  box-shadow: 0 5px 0 var(--tt-ink), inset 0 3px 0 var(--tt-gold-hl) !important;
  color: var(--tt-ink) !important; filter: none !important;
}
html body [data-cf] #spin::after, html body [data-cf] #spin::before { content: none !important; display: none !important; background: none !important; }
html body [data-cf] #spin :is(.cartoon-icon svg, .cartoon-icon svg *) { fill: var(--tt-ink) !important; stroke: var(--tt-ink) !important; color: var(--tt-ink) !important; filter: none !important; }
html body [data-cf] #spin :is(.fx-spin-face svg, .fx-spin-face svg *) { fill: var(--tt-ink) !important; color: var(--tt-ink) !important; }
html body [data-cf] #spin :is(.cartoon-label, small, .control-caption) { color: var(--tt-ink) !important; text-shadow: none !important; }
html body [data-cf] #spin:hover:not(:disabled, [aria-disabled="true"]) { background-color: var(--tt-gold-hi) !important; }
html body [data-cf] #spin:is(.tv-pressed, :active:not(:disabled)) { box-shadow: 0 2px 0 var(--tt-ink), inset 0 3px 0 var(--tt-gold) !important; }
html body [data-cf] #spin:focus-visible { outline: 3px solid var(--tt-cream) !important; outline-offset: 4px !important; }
html body [data-cf] #spin:is([data-cartoon-state="stop"], [data-cartoon-state="skip"]),
html body.auto-active [data-cf] #spin {
  background: url("./assets/tomb-ui/spin-rays.svg") center / 100% 100% no-repeat, var(--tt-carn) !important;
  box-shadow: 0 5px 0 var(--tt-ink), inset 0 3px 0 var(--tt-carn-hl) !important;
}
html body [data-cf] #spin:is([data-cartoon-state="stop"], [data-cartoon-state="skip"]):hover:not(:disabled),
html body.auto-active [data-cf] #spin:hover:not(:disabled) { background-color: var(--tt-carn-hi) !important; }
html body [data-cf] #spin:is([data-cartoon-state="stop"], [data-cartoon-state="skip"]) :is(.cartoon-icon svg *, .tv-spin-stop, .tv-spin-stop *),
html body.auto-active [data-cf] #spin .cartoon-icon svg * { fill: var(--tt-cream) !important; stroke: var(--tt-ink) !important; }
html body [data-cf] #spin .tv-spin-stop :is(i, b) { background-color: var(--tt-cream) !important; border-color: var(--tt-ink) !important; }
html body [data-cf] #spin[data-tv-auto="run"] { opacity: 1 !important; }
html body [data-cf] #spin:is(:disabled, [aria-disabled="true"]):not([data-cartoon-state="stop"], [data-cartoon-state="skip"]) { filter: saturate(.35) brightness(.8) !important; }

/* The actual debit is a first-class part of the spin key. */
/* Keep the frame-owned absolute/fixed SPIN anchor; captions are already positioned inside it. */
html body [data-cf] #spin .tt-spin-price { position: absolute !important; z-index: 3 !important; left: 50% !important; bottom: 8px !important; translate: -50% 0 !important; color: var(--tt-ink) !important; font: 900 clamp(12px,1.15vw,16px)/1 "Alegreya Sans",sans-serif !important; letter-spacing: .03em !important; white-space: nowrap !important; text-shadow: 0 1px var(--tt-gold-hl) !important; pointer-events: none !important; }
html body [data-cf] #spin:is([data-cartoon-state="stop"], [data-cartoon-state="skip"]) .tt-spin-price,
html body.auto-active [data-cf] #spin .tt-spin-price { display: none !important; }

/* First-visit learning and one-time option confirmation use the game's papyrus
   language, not a generic product dialog. */
html body #modal .tt-first-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 16px 0; }
html body #modal .tt-first-steps article { min-height: 116px; display: grid; align-content: start; gap: 7px; padding: 12px 10px; border: 2px solid var(--tt-ink); border-radius: 12px; background: linear-gradient(135deg,var(--tt-paper-3),var(--tt-paper)); box-shadow: 0 3px 0 var(--tt-ink); color: var(--tt-ink); }
html body #modal .tt-first-steps b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--tt-gold); border: 2px solid var(--tt-ink); font: 900 16px/1 sans-serif; }
html body #modal .tt-first-steps strong { font: 900 13px/1.05 "Alegreya Sans",sans-serif; letter-spacing: .04em; }
html body #modal .tt-first-steps span { font: 700 13px/1.15 "Alegreya Sans",sans-serif; color: var(--tt-ink-2); }
html body #modal .cf-confirm-price { display: grid; justify-items: center; gap: 3px; margin: 18px 0; padding: 14px; border: 2px solid var(--tt-ink); background: var(--tt-paper-3); box-shadow: inset 0 0 0 3px var(--tt-sand-hi); }
html body #modal .cf-confirm-price small { font-weight: 800; letter-spacing: .08em; color: var(--tt-ink-2); }
html body #modal .cf-confirm-price strong { font: 900 clamp(30px,6vw,44px)/1 "Alegreya Sans",sans-serif; color: var(--tt-carn); }
html body #modal .modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
html body #modal .modal-actions .action { flex: 1 1 190px; }
@media (max-width:560px) { html body #modal .tt-first-steps { grid-template-columns: 1fr; } html body #modal .tt-first-steps article { min-height: 0; grid-template-columns: 30px 1fr; } html body #modal .tt-first-steps span { grid-column: 2; } }

/* Round offers, status pill, board notice. */
html body [data-cf] .fx-status, html body .fx-status[data-cf] {
  background: var(--tt-sand) !important; background-image: none !important; border-color: var(--tt-ink) !important;
  box-shadow: var(--tt-key) !important; color: var(--tt-ink) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important;
}
html body .tv-board-notice {
  background: rgba(58, 36, 20, .86) !important; background-image: none !important;
  color: var(--tt-cream) !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 0 var(--tt-ink) !important;
}

/* Autoplay running card (responsible-gaming.mjs). */
html body .rg-autoplay {
  background: var(--tt-paper) !important; background-image: none !important;
  border: 3px solid var(--tt-ink) !important; box-shadow: 0 4px 0 var(--tt-ink), 0 10px 24px rgba(0, 0, 0, .4) !important;
  color: var(--tt-ink) !important;
}
html body .rg-autoplay :is(p, span, b, strong, small, div) { color: var(--tt-ink) !important; text-shadow: none !important; }
html body .rg-autoplay button {
  background: var(--tt-carn) !important; background-image: none !important; border: 2px solid var(--tt-ink) !important; border-image: none !important;
  box-shadow: var(--tt-key-carn) !important; color: var(--tt-cream) !important; text-shadow: none !important;
}
html body .rg-autoplay button:hover { background-color: var(--tt-carn-hi) !important; }
html body .rg-autoplay button:focus-visible { outline: 3px solid var(--tt-ink) !important; outline-offset: 3px !important; }

/* Amber-equivalent autoplay setup, dressed as a compact papyrus control
   tablet. The numbered chips are the actual settings and the live AUTO key is
   always the stop key once a run has begun. */
html body #modal .tt-autoplay-card { color: var(--tt-ink) !important; }
html body #modal .tt-auto-eyebrow { display: block; margin-top: 18px; color: var(--tt-ink-2) !important; font: 900 11px/1.2 var(--fx-font, sans-serif); letter-spacing: .16em; text-align: center; }
html body #modal .tt-autoplay-card h1 { margin: 3px 0 4px !important; text-align: center; }
html body #modal .tt-auto-lede { max-width: 42rem; margin: 0 auto 14px !important; text-align: center; color: var(--tt-ink-2) !important; }
html body #modal .tt-auto-field { margin: 10px 0; padding: 10px; border: 2px solid var(--tt-ink); border-radius: 12px; background: color-mix(in srgb, var(--tt-paper-2) 72%, transparent); }
html body #modal .tt-auto-field h2 { margin: 0 0 8px !important; color: var(--tt-ink) !important; font-size: 13px !important; letter-spacing: .055em; text-transform: uppercase; }
html body #modal .tt-auto-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 7px; }
html body #modal .tt-auto-chip { min-height: 37px; padding: 6px 8px !important; border: 2px solid var(--tt-ink) !important; border-radius: 9px !important; background: var(--tt-paper) !important; background-image: none !important; box-shadow: 0 2px 0 var(--tt-ink) !important; color: var(--tt-ink) !important; font: 900 12px/1 var(--fx-font, sans-serif) !important; letter-spacing: .025em; text-shadow: none !important; }
html body #modal .tt-auto-chip:hover { background: var(--tt-gold-hi) !important; }
html body #modal .tt-auto-chip[aria-checked="true"] { transform: translateY(2px); background: var(--tt-gold) !important; box-shadow: 0 0 0 var(--tt-ink), inset 0 2px 0 var(--tt-cream) !important; }
html body #modal .tt-auto-chip:focus-visible { outline: 3px solid var(--tt-carn) !important; outline-offset: 2px !important; }
html body #modal .tt-autoplay-card .rg-check { margin: 8px 1px !important; font-weight: 700; }
html body #modal .tt-auto-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }
html body #modal .tt-auto-actions .action { margin: 0 !important; }
html body #modal .tt-auto-actions .tt-auto-cancel { background: var(--tt-paper-2) !important; color: var(--tt-ink) !important; }

/* ───────────── Dialogs: flat papyrus sheet, brown ink ───────────── */
html body :is(#modal, #cf-menu)[open] { background-color: rgba(28, 17, 8, .74) !important; background-image: none !important; }
html body #modal::backdrop, html body #cf-menu::backdrop { background: rgba(28, 17, 8, .6) !important; }

html body #modal #modal-content, html body #cf-menu #cf-menu-content {
  background: url("./assets/tomb-ui/winged-sun.svg") center 10px / 132px 26px no-repeat local, var(--tt-paper) !important;
  border-color: var(--tt-ink) !important; border-style: solid !important;
  box-shadow: 0 7px 0 var(--tt-ink), 0 16px 40px rgba(0, 0, 0, .45), inset 0 0 0 5px var(--tt-paper-2) !important;
  color: var(--tt-ink) !important;
  scrollbar-color: var(--tt-ink-2) var(--tt-paper-2) !important;
}
html body #modal #modal-content::-webkit-scrollbar-thumb, html body #cf-menu #cf-menu-content::-webkit-scrollbar-thumb { background: var(--tt-ink-2) !important; border-radius: 6px !important; }
html body #modal #modal-content::-webkit-scrollbar-track, html body #cf-menu #cf-menu-content::-webkit-scrollbar-track { background: var(--tt-paper-2) !important; }

/* Titles: gold cartoon lettering with a brown outline; plain headings in brown. */
html body :is(#modal, #cf-menu) h1 .toon-lettering .toon-outline path { stroke: var(--tt-ink) !important; }
html body :is(#modal, #cf-menu) h1 .toon-lettering .toon-ink path { stroke: var(--tt-gold) !important; }
html body :is(#modal, #cf-menu) h1 .toon-lettering { filter: none !important; }
html body #modal #modal-content h1:not(.toon-typeset) { color: var(--tt-ink) !important; -webkit-text-fill-color: var(--tt-ink) !important; text-shadow: none !important; }
html body #modal #modal-content :is(h2, h3):not(.toon-typeset), html body #cf-menu #cf-menu-content :is(h2, h3):not(.toon-typeset) {
  color: var(--tt-ink) !important; -webkit-text-fill-color: var(--tt-ink) !important; text-shadow: none !important;
}

/* Body copy: brown ink on papyrus. */
html body #modal #modal-content :is(p, li, dt, dd, small, span, td, th, label, strong, b, em, h4, summary, div, output, figcaption, caption, a, dl, table, article, section, legend):not(button, button *, .toon-lettering *, .toon-readable) {
  color: var(--tt-ink) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important;
}
html body #modal #modal-content :is(p, li, dt, dd, small, span, td, th, label, strong, b, em, h4, summary, div, output, figcaption, a, dl, article, section):not(button, button *, .toon-lettering *, .toon-readable, .bonus-offer, table, .rg-summary, dl.bonus-facts, fieldset, .payout-character) {
  background-color: transparent !important; background-image: none !important;
}
html body #modal #modal-content :is(.guide-eyebrow, .rg-note, small):not(button *) { color: var(--tt-ink-2) !important; }
html body #cf-menu #cf-menu-content :is(p, .settings-hint) { color: var(--tt-ink-2) !important; }

/* Cards, tables, fact lists, fieldsets: a slightly deeper papyrus with a brown line. */
html body #modal #modal-content :is(.bonus-offer, table, .rg-summary, dl.bonus-facts, fieldset) {
  background: var(--tt-paper-3) !important; background-image: none !important;
  border: 2px solid var(--tt-ink) !important; box-shadow: 0 3px 0 var(--tt-ink) !important;
}
html body #modal #modal-content :is(td, th) { border-color: rgba(58, 36, 20, .25) !important; }
html body #modal #modal-content :is(select, input:not([type="checkbox"]):not([type="radio"])) {
  background: var(--tt-paper-3) !important; color: var(--tt-ink) !important; -webkit-text-fill-color: var(--tt-ink) !important;
  border: 2px solid var(--tt-ink) !important; box-shadow: 0 2px 0 var(--tt-ink) !important;
}
html body #modal #modal-content :is(select, input):focus-visible { outline: 3px solid var(--tt-gold) !important; outline-offset: 2px !important; }
html body #modal #modal-content input:is([type="checkbox"], [type="radio"]) { accent-color: var(--tt-ink) !important; }
html body #modal #modal-content :is(.gate-bar, .gate-bar > i, meter) { background-color: var(--tt-gold) !important; }
html body #modal #modal-content .pricing-rule { border-color: var(--tt-gold) !important; }

/* Dialog buttons: the same cartoon keys. Secondary = sand, primary = gold, destructive = carnelian. */
html body #modal #modal-content :is(button, .action):not(.settings-switch, .close),
html body #cf-menu #cf-menu-content .action {
  background: var(--tt-sand) !important; background-image: none !important;
  border-color: var(--tt-ink) !important; border-style: solid !important;
  box-shadow: var(--tt-key) !important;
  color: var(--tt-ink) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; filter: none !important;
}
html body #modal #modal-content :is(button, .action):not(.settings-switch, .close) *,
html body #cf-menu #cf-menu-content .action * { color: inherit !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
html body #modal #modal-content :is([data-action="begin"], [data-action="auto"], [data-buy], [data-confirm-bonus], [data-action="new-round"]):not(.settings-switch, .close) {
  background: var(--tt-gold) !important; box-shadow: var(--tt-key-gold) !important;
}
html body #modal #modal-content :is([data-action="rg-reset-session"], [data-action="reset"]):not(.settings-switch, .close),
html body #cf-menu #cf-menu-content .action[data-action="reset"] {
  background: var(--tt-carn) !important; box-shadow: var(--tt-key-carn) !important; color: var(--tt-cream) !important;
}
html body #modal #modal-content :is(button, .action):not(.settings-switch, .close):hover:not(:disabled),
html body #cf-menu #cf-menu-content .action:hover:not(:disabled) { filter: brightness(1.07) !important; }
html body #modal #modal-content :is(button, .action):not(.settings-switch, .close):is(:active, .tv-pressed):not(:disabled),
html body #cf-menu #cf-menu-content .action:is(:active, .tv-pressed):not(:disabled) { box-shadow: 0 1px 0 var(--tt-ink) !important; filter: brightness(.94) !important; }
html body #modal #modal-content :is(button, .action):not(.settings-switch, .close):disabled,
html body #cf-menu #cf-menu-content .action:disabled { filter: saturate(.3) !important; opacity: .6 !important; }
html body :is(#modal, #cf-menu) :is(button, .action, .settings-switch):focus-visible { outline: 3px solid var(--tt-ink) !important; outline-offset: 3px !important; }

/* Close key: sand disc, brown cross. */
html body :is(#modal, #cf-menu) > .close {
  background: var(--tt-sand) !important; background-image: none !important;
  border-color: var(--tt-ink) !important; border-style: solid !important;
  box-shadow: var(--tt-key) !important; color: var(--tt-ink) !important;
}
html body :is(#modal, #cf-menu) > .close::before { background-color: var(--tt-ink) !important; box-shadow: none !important; }
html body :is(#modal, #cf-menu) > .close :is(.cartoon-icon svg, .cartoon-icon svg *) { stroke: var(--tt-ink) !important; }
html body :is(#modal, #cf-menu) > .close:hover { background-color: var(--tt-sand-hi) !important; }
html body :is(#modal, #cf-menu) > .close:focus-visible { outline: 3px solid var(--tt-cream) !important; outline-offset: 3px !important; }

html body :is(#modal, #cf-menu) .fx-more-cue {
  color: var(--tt-ink) !important; background: var(--tt-sand) !important; background-image: none !important; border-color: var(--tt-ink) !important;
  text-shadow: none !important; box-shadow: var(--tt-edge) !important;
}

/* Menu rows and switches. */
html body #cf-menu #cf-menu-content .settings-row {
  background: var(--tt-paper-3) !important; background-image: none !important;
  border-color: var(--tt-ink) !important; box-shadow: 0 2px 0 var(--tt-ink) !important;
}
html body #cf-menu #cf-menu-content .settings-row b { color: var(--tt-ink) !important; -webkit-text-fill-color: currentColor !important; }
html body #cf-menu #cf-menu-content .settings-row small { color: var(--tt-ink-2) !important; -webkit-text-fill-color: currentColor !important; }
html body :is(#cf-menu, #modal) .settings-switch {
  background: var(--tt-sand) !important; background-image: none !important;
  border-color: var(--tt-ink) !important; box-shadow: var(--tt-key) !important; color: var(--tt-ink) !important;
}
html body :is(#cf-menu, #modal) .settings-switch::before { color: var(--tt-ink) !important; text-shadow: none !important; }
html body :is(#cf-menu, #modal) .settings-switch::after {
  background: var(--tt-paper-3) !important; background-image: none !important; color: transparent !important;
  box-shadow: inset 0 0 0 2px var(--tt-ink) !important; filter: none !important;
}
html body :is(#cf-menu, #modal) .settings-switch span { color: var(--tt-ink) !important; text-shadow: none !important; }
html body :is(#cf-menu, #modal) .settings-switch[aria-checked="true"] { background: var(--tt-gold) !important; box-shadow: var(--tt-key-gold) !important; }
html body :is(#cf-menu, #modal) .settings-switch[aria-checked="true"]::after {
  background: var(--tt-ink) !important; color: var(--tt-gold) !important; box-shadow: none !important; filter: none !important;
}
html body :is(#cf-menu, #modal) .settings-switch:disabled { filter: saturate(.3) !important; opacity: .6 !important; }

/* Paytable dialog: the cast was built for a side panel (h3 hidden, cards stretched to fill a fixed-height grid), which left
   a tall empty band in the dialog. Lay it out as a card grid that sizes to its content. */
html body #modal #modal-content .payout-cast {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important; grid-auto-rows: auto !important;
  gap: 12px !important; flex: none !important; height: auto !important; min-height: 0 !important; margin: 12px 0 4px !important;
}
html body #modal #modal-content .payout-character {
  grid-column: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important;
  height: auto !important; min-height: 0 !important; padding: 8px 6px 10px !important; gap: 4px !important;
  background: var(--tt-paper-3) !important; background-image: none !important; border: 2px solid var(--tt-ink) !important; border-radius: 14px 18px 13px 17px !important;
  box-shadow: 0 3px 0 var(--tt-ink) !important;
}
html body #modal #modal-content .payout-character img { flex: none !important; width: 100% !important; height: auto !important; aspect-ratio: 1 !important; object-fit: contain !important; }
html body #modal #modal-content .payout-character h3 { display: block !important; margin: 0 !important; font-size: 13px !important; line-height: 1.15 !important; text-align: center !important; letter-spacing: .04em !important; }
html body #modal #modal-content .payout-character strong { font-size: 15px !important; line-height: 1.1 !important; white-space: normal !important; text-align: center !important; }

}

/* ───────────── Popup audit fixes (2026-09-25) ───────────── */
@layer cf-base {
/* Titles the cartoon lettering cannot draw (apostrophes, "?", arrows) fall back to text: give them the same look —
   gold letters with a brown cartoon outline, heavy weight, centred. */
html body #modal #modal-content h1:not(.toon-typeset) {
  color: var(--tt-gold) !important; -webkit-text-fill-color: var(--tt-gold) !important;
  font-weight: 800 !important; letter-spacing: .03em !important; text-align: center !important;
  text-shadow: 2px 0 0 var(--tt-ink), -2px 0 0 var(--tt-ink), 0 2px 0 var(--tt-ink), 0 -2px 0 var(--tt-ink),
    1.5px 1.5px 0 var(--tt-ink), -1.5px 1.5px 0 var(--tt-ink), 1.5px -1.5px 0 var(--tt-ink), -1.5px -1.5px 0 var(--tt-ink), 0 3px 0 var(--tt-ink) !important;
}
/* Buttons that sit side by side (KEEP PLAYING / START NEW ROUND, START AUTOPLAY / CANCEL, CONTINUE / RESET) touched. */
html body #modal #modal-content .action { margin: 8px 12px 0 0 !important; }
/* Bonus card: fact rows ran into the card's edges; the volatility meter showed every step lit. */
html body #modal #modal-content .bonus-offer dl.bonus-facts {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  border-top: 2px dashed rgba(58, 36, 20, .35) !important; border-bottom: 2px dashed rgba(58, 36, 20, .35) !important;
  margin: 8px 12px !important; padding: 6px 2px !important;
}
html body #modal #modal-content .bonus-offer dl.bonus-facts > div { padding: 2px 0 !important; }
html body #modal #modal-content .vol-meter i { background-color: var(--tt-paper-2) !important; box-shadow: inset 0 0 0 1px var(--tt-ink-2) !important; }
html body #modal #modal-content .vol-meter i.on { background-color: var(--tt-gold) !important; box-shadow: inset 0 0 0 1px var(--tt-ink) !important; }
/* Autoplay form: the three limits and two stop rules flowed into one ragged line — one tidy row each. */
html body #modal #modal-content .rg-options { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; margin: 12px 0 !important; }
html body #modal #modal-content .rg-options .rg-field { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: auto !important; margin: 0 !important; }
html body #modal #modal-content .rg-options .rg-check { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; }
html body #modal #modal-content .rg-options select { min-width: 180px !important; }
}

/* ───────────── Bonus popup (coordinator contract .cf-bonus-pop, modelled on Amber's raid popup) ───────────── */
@layer cf-base {
html body #modal #modal-content .cf-bonus-pop {
  display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important;
  gap: 12px !important; padding: 30px 12px 4px !important; margin: 0 auto !important; max-width: 560px !important; box-sizing: border-box !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
}
html body #modal #modal-content .cf-bonus-pop .cf-bp-emblem { display: flex !important; flex-direction: column !important; align-items: center !important; margin: 0 !important; background: none !important; }
html body #modal #modal-content .cf-bonus-pop .cf-bp-art {
  display: block !important; width: 150px !important; height: 172px !important; object-fit: contain !important; object-position: center 70% !important;
  box-sizing: border-box !important; padding: 10px 8px 14px !important;
  background: var(--tt-gold) !important; border: 3px solid var(--tt-ink) !important; border-radius: 50% / 46% !important;
  box-shadow: 0 4px 0 var(--tt-ink), inset 0 0 0 5px var(--tt-sand), inset 0 0 0 7px var(--tt-ink) !important;
}
/* Title: gold cartoon lettering, overlapping the foot of the cartouche like Amber's badge. */
html body.tv-shell #modal#modal #modal-content .cf-bonus-pop h1.cf-bp-title {
  position: relative !important; clip: auto !important; overflow: visible !important; width: auto !important; max-width: 100% !important; height: auto !important;
  min-height: 0 !important; max-height: none !important; margin: -26px 0 0 !important; padding: 0 !important; display: block !important;
  font-size: 34px !important; line-height: 1.05 !important; background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important;
}
html body.tv-shell #modal#modal #modal-content .cf-bonus-pop h1.cf-bp-title::before, html body.tv-shell #modal#modal #modal-content .cf-bonus-pop h1.cf-bp-title::after { content: none !important; display: none !important; }
html body #modal #modal-content .cf-bonus-pop h1.cf-bp-title .toon-lettering { display: block !important; height: 50px !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; }
html body #modal #modal-content .cf-bonus-pop h1.cf-bp-title .toon-lettering .toon-outline path { stroke: var(--tt-ink) !important; stroke-width: 20px !important; }
html body #modal #modal-content .cf-bonus-pop h1.cf-bp-title .toon-lettering .toon-ink path { stroke: var(--tt-gold) !important; stroke-width: 11px !important; }
html body #modal #modal-content .cf-bonus-pop .cf-bp-lede { margin: 2px 0 0 !important; max-width: 500px !important; font-size: 17px !important; line-height: 1.4 !important; color: var(--tt-ink) !important; }
html body #modal #modal-content .cf-bonus-pop .cf-bp-facts { margin: 0 !important; max-width: 500px !important; font-size: 15px !important; line-height: 1.4 !important; color: var(--tt-ink-2) !important; }
html body #modal #modal-content .cf-bonus-pop .cf-bp-facts b { color: var(--tt-ink) !important; font-weight: 800 !important; }
html body #modal #modal-content .cf-bonus-pop .cf-bp-price {
  display: grid !important; justify-items: center !important; gap: 2px !important; width: min(440px, 100%) !important; box-sizing: border-box !important;
  margin: 4px 0 0 !important; padding: 10px 16px 12px !important;
  background: var(--tt-paper-3) !important; border: 2px solid var(--tt-ink) !important; border-radius: 16px 21px 17px 20px !important; box-shadow: 0 3px 0 var(--tt-ink) !important;
}
html body #modal #modal-content .cf-bonus-pop .cf-bp-price small { font-size: 14px !important; font-weight: 700 !important; letter-spacing: .12em !important; color: var(--tt-ink-2) !important; line-height: 1.2 !important; }
html body #modal #modal-content .cf-bonus-pop .cf-bp-price .cf-bp-base { letter-spacing: .06em !important; font-weight: 600 !important; }
html body #modal #modal-content .cf-bonus-pop .cf-bp-amount {
  display: block !important; font: 800 44px/1.05 'Alegreya Sans', system-ui, sans-serif !important; letter-spacing: .02em !important;
  color: var(--tt-gold) !important; -webkit-text-fill-color: var(--tt-gold) !important;
  text-shadow: 3px 0 0 var(--tt-ink), -3px 0 0 var(--tt-ink), 0 3px 0 var(--tt-ink), 0 -3px 0 var(--tt-ink), 2px 2px 0 var(--tt-ink), -2px 2px 0 var(--tt-ink), 2px -2px 0 var(--tt-ink), -2px -2px 0 var(--tt-ink), 0 5px 0 var(--tt-ink) !important;
}
/* If cartoon-type letters the amount, colour its strokes the same way. */
html body #modal #modal-content .cf-bonus-pop .cf-bp-amount .toon-lettering { display: block !important; height: 52px !important; width: auto !important; margin: 0 auto !important; }
html body #modal #modal-content .cf-bonus-pop .cf-bp-amount .toon-lettering .toon-outline path { stroke: var(--tt-ink) !important; }
html body #modal #modal-content .cf-bonus-pop .cf-bp-amount .toon-lettering .toon-ink path { stroke: var(--tt-gold) !important; }
html body #modal #modal-content .cf-bonus-pop .cf-bp-toggle {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: min(440px, 100%) !important; min-height: 56px !important; margin: 6px 0 0 !important; padding: 8px 16px !important; box-sizing: border-box !important;
  border: 3px solid var(--tt-ink) !important; border-radius: 18px 24px 17px 23px !important;
  font: 800 22px/1 'Alegreya Sans', system-ui, sans-serif !important; letter-spacing: .08em !important;
}
html body #modal #modal-content .cf-bonus-pop .cf-bp-toggle[aria-pressed="true"] { background: var(--tt-gold) !important; box-shadow: var(--tt-key-gold) !important; }
html body #modal #modal-content .cf-bonus-pop .cf-bp-hint { margin: 0 !important; font-size: 15px !important; color: var(--tt-ink-2) !important; }

/* Phones (portrait). */
@media (max-width: 600px) {
  html body #modal #modal-content .cf-bonus-pop { gap: 9px !important; padding: 30px 4px 2px !important; }
  html body #modal #modal-content .cf-bonus-pop .cf-bp-art { width: 116px !important; height: 134px !important; }
  html body.tv-shell #modal#modal #modal-content .cf-bonus-pop h1.cf-bp-title { margin-top: -22px !important; }
  html body #modal #modal-content .cf-bonus-pop h1.cf-bp-title .toon-lettering { height: 40px !important; }
  html body #modal #modal-content .cf-bonus-pop .cf-bp-lede { font-size: 15px !important; }
  html body #modal #modal-content .cf-bonus-pop .cf-bp-facts { font-size: 13.5px !important; }
  html body #modal #modal-content .cf-bonus-pop .cf-bp-amount { font-size: 36px !important; }
  html body #modal #modal-content .cf-bonus-pop .cf-bp-toggle { min-height: 50px !important; font-size: 19px !important; }
}
/* Phones (landscape): emblem on the left, the rest on the right. */
@media (orientation: landscape) and (max-height: 500px) {
  html body #modal #modal-content .cf-bonus-pop {
    display: grid !important; grid-template-columns: 150px minmax(0, 1fr) !important; grid-template-rows: auto !important;
    column-gap: 18px !important; row-gap: 6px !important; max-width: 700px !important; padding: 6px 4px 2px !important; text-align: left !important; align-items: center !important;
  }
  html body #modal #modal-content .cf-bonus-pop .cf-bp-emblem { grid-column: 1 !important; grid-row: 1 / span 5 !important; align-self: center !important; }
  html body #modal #modal-content .cf-bonus-pop > :not(.cf-bp-emblem) { grid-column: 2 !important; justify-self: stretch !important; }
  html body #modal #modal-content .cf-bonus-pop .cf-bp-art { width: 112px !important; height: 128px !important; }
  html body.tv-shell #modal#modal #modal-content .cf-bonus-pop h1.cf-bp-title { margin-top: -20px !important; }
  html body #modal #modal-content .cf-bonus-pop h1.cf-bp-title .toon-lettering { height: 34px !important; }
  html body #modal #modal-content .cf-bonus-pop .cf-bp-lede { font-size: 14px !important; line-height: 1.3 !important; }
  html body #modal #modal-content .cf-bonus-pop .cf-bp-facts { font-size: 12.5px !important; line-height: 1.3 !important; }
  html body #modal #modal-content .cf-bonus-pop .cf-bp-price { width: 100% !important; padding: 4px 12px 6px !important; grid-template-columns: auto auto !important; column-gap: 12px !important; align-items: baseline !important; justify-content: center !important; margin: 0 !important; }
  html body #modal #modal-content .cf-bonus-pop .cf-bp-price .cf-bp-base { grid-column: 1 / -1 !important; }
  html body #modal #modal-content .cf-bonus-pop .cf-bp-amount { font-size: 28px !important; }
  html body #modal #modal-content .cf-bonus-pop .cf-bp-toggle { width: 100% !important; min-height: 42px !important; font-size: 17px !important; margin: 0 !important; }
  html body #modal #modal-content .cf-bonus-pop .cf-bp-hint { font-size: 12.5px !important; text-align: center !important; }
}
}

@layer cf-base {
/* Amber lays a dark glass sheen (::before) over dialog buttons — not part of the flat cartoon key. */
html body #modal #modal-content :is(button, .action):not(.settings-switch, .close)::before,
html body #cf-menu #cf-menu-content .action::before { content: none !important; display: none !important; background: none !important; box-shadow: none !important; }
html body #modal #modal-content .cf-bonus-pop .cf-bp-art { object-fit: cover !important; object-position: 50% 18% !important; padding: 8px !important; }
@media (orientation: landscape) and (max-height: 500px) {
  html body #modal #modal-content .cf-bonus-pop :is(.cf-bp-lede, .cf-bp-facts) { margin-right: 44px !important; }
}
}

@layer cf-base {
/* How to play: the character cards still wore the old Mummies cabinet frame (border-image) — same cartoon card as the paytable. */
html body #modal #modal-content .guide-cast { gap: 12px !important; }
html body #modal #modal-content .guide-character {
  border-image: none !important; border: 2px solid var(--tt-ink) !important; border-radius: 14px 18px 13px 17px !important;
  background: var(--tt-paper-3) !important; background-image: none !important; box-shadow: 0 3px 0 var(--tt-ink) !important; padding: 8px 6px 10px !important;
}
html body #modal #modal-content .guide-character::before, html body #modal #modal-content .guide-character::after { content: none !important; display: none !important; }
html body #modal #modal-content .guide-character :is(h3, p) { margin: 2px 0 0 !important; text-align: center !important; }
/* Tables: readable cell padding; on phones a smaller type size and a horizontal scroll instead of one-word-per-line columns. */
html body #modal #modal-content table.mech-table :is(td, th) { padding: 5px 8px !important; }
@media (max-width: 600px) {
  html body #modal #modal-content table.mech-table { display: block !important; max-width: 100% !important; overflow-x: auto !important; font-size: 13px !important; }
  html body #modal #modal-content table.mech-table :is(td, th) { padding: 4px 6px !important; min-width: 64px !important; }
}
}

/* Bonus popup: the same ON/OFF switch row as the menu (Owner 2026-09-25). */
@layer cf-base {
  html body #modal .cf-bonus-pop .cf-bp-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important;
    width: 100% !important; box-sizing: border-box !important; margin: 10px 0 0 !important; padding: 12px 14px 12px 16px !important; text-align: left !important;
    background: #FBF0D8 !important; border: 3px solid #3A2414 !important; border-radius: 16px 20px 15px 19px !important; box-shadow: 0 3px 0 #3A2414 !important; }
  html body #modal .cf-bonus-pop .cf-bp-row > div { display: grid !important; gap: 3px !important; min-width: 0 !important; }
  html body #modal .cf-bonus-pop .cf-bp-row b { color: #3A2414 !important; font: 800 15px/1.1 "Alegreya Sans", system-ui, sans-serif !important; letter-spacing: .08em !important; }
  html body #modal .cf-bonus-pop .cf-bp-row small { color: #5a3d24 !important; font: 500 12.5px/1.3 "Alegreya Sans", system-ui, sans-serif !important; }
  html body #modal .cf-bonus-pop .cf-bp-row .settings-switch { flex: none !important; }

  /* Bonus rail: an armed option is unmistakable — gold key, thick ink ring, "ON" tag, slow glow. */
  html body #tv-direct-bonuses > button[aria-pressed="true"] { background-color: #F2B233 !important; outline: 3px solid #3A2414 !important; outline-offset: 3px !important;
    animation: cf-bonus-on 1.8s ease-in-out infinite !important; position: relative !important; overflow: visible !important; }
  html body #tv-direct-bonuses > button[aria-pressed="true"]::after { content: "ON" !important; position: absolute !important; top: -9px !important; right: -9px !important; left: auto !important; bottom: auto !important;
    width: auto !important; height: auto !important; inset: -9px -9px auto auto !important; padding: 2px 7px !important; border-radius: 10px 12px 9px 11px !important; background: #C2401B !important; color: #FFF4DC !important;
    border: 2px solid #3A2414 !important; box-shadow: 0 2px 0 #3A2414 !important; font: 900 11px/1.2 "Alegreya Sans", system-ui, sans-serif !important; letter-spacing: .08em !important;
    display: block !important; opacity: 1 !important; transform: none !important; z-index: 3 !important; background-image: none !important; }
}
@keyframes cf-bonus-on { 0%,100% { box-shadow: 0 3px 0 #3A2414, 0 0 0 0 rgba(242,178,51,.0); } 50% { box-shadow: 0 3px 0 #3A2414, 0 0 18px 6px rgba(242,178,51,.75); } }
@media (prefers-reduced-motion: reduce) { html body #tv-direct-bonuses > button[aria-pressed="true"] { animation: none !important; } }

/* Autoplay keeps Amber's proven controls and exact spacing, but it belongs to
   the Tomb: papyrus rather than forest green, brown ink rather than teal, and
   the same gold/carnelian hierarchy used by every other Tomb popup. */
@layer cf-base {
  html body.tv-shell.amber-frame > .tv-auto-setup:not([hidden]) { background: rgba(36,22,9,.82) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-card {
    background: linear-gradient(135deg,var(--tt-paper-3),var(--tt-paper) 54%,var(--tt-paper-2)) !important;
    border-color: var(--tt-ink) !important;
    box-shadow: 0 7px 0 var(--tt-ink),0 18px 46px rgba(0,0,0,.52),inset 0 0 0 5px var(--tt-sand-hi) !important;
    color: var(--tt-ink) !important; scrollbar-color: var(--tt-ink-2) var(--tt-paper-2) !important;
  }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-title {
    background: url("./assets/tomb-ui/winged-sun.svg") center 13px / 132px 26px no-repeat !important;
    color: var(--tt-ink) !important;
  }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-title .toon-outline { stroke: var(--tt-ink) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-title .toon-ink { stroke: var(--tt-gold) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-close { color: var(--tt-ink) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-field > span,
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-money span { color: var(--tt-ink-2) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-chip {
    background: var(--tt-paper-3) !important; border-color: var(--tt-ink) !important; color: var(--tt-ink) !important;
    box-shadow: 0 3px 0 var(--tt-ink),inset 0 2px 0 var(--tt-cream) !important;
  }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-chip:hover { background: var(--tt-sand-hi) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-chip[aria-checked="true"] {
    background: var(--tt-gold) !important; color: var(--tt-ink) !important; border-color: var(--tt-ink) !important;
    box-shadow: 0 3px 0 var(--tt-ink),inset 0 2px 0 var(--tt-gold-hl) !important;
  }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-chip[aria-checked="true"]::after { background: var(--tt-carn) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-money { border-top-color: var(--tt-sand-lo) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-money b { color: var(--tt-ink) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-keys > button {
    background: var(--tt-sand) !important; border-color: var(--tt-ink) !important; color: var(--tt-ink) !important;
    box-shadow: var(--tt-key) !important;
  }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-keys > .tv-auto-start {
    background: var(--tt-gold) !important; border-color: var(--tt-ink) !important; color: var(--tt-ink) !important;
    box-shadow: var(--tt-key-gold) !important;
  }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-keys > :is(button:hover,button:focus-visible) { background-color: var(--tt-sand-hi) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-keys > .tv-auto-start:is(:hover,:focus-visible) { background-color: var(--tt-gold-hi) !important; }
}
/* Popup switch = the menu switch, drawn explicitly (the menu's sizing rules are scoped to #cf-menu). */
@layer cf-base {
  html body #modal .cf-bp-row .settings-switch { display: flex !important; position: relative !important; width: 86px !important; height: 46px !important; min-width: 86px !important;
    padding: 0 10px !important; margin: 0 !important; border: 2px solid #3A2414 !important; border-radius: 24px !important; box-sizing: border-box !important;
    align-items: center !important; justify-content: flex-start !important; background: #E6C27F !important; box-shadow: 0 3px 0 #3A2414 !important; cursor: pointer !important; }
  html body #modal .cf-bp-row .settings-switch[aria-checked="true"] { background: #F2B233 !important; }
  html body #modal .cf-bp-row .settings-switch > :is(span, i) { display: none !important; }
  html body #modal .cf-bp-row .settings-switch::before { content: "OFF" !important; display: block !important; position: static !important; margin-left: 4px !important;
    font: 800 12px/12px "Trebuchet MS", sans-serif !important; color: #3A2414 !important; background: none !important; width: auto !important; height: auto !important;
    text-shadow: none !important; -webkit-text-stroke: 0 !important; filter: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; opacity: 1 !important; }
  html body #modal .cf-bp-row .settings-switch[aria-checked="true"]::before { content: "ON" !important; }
  html body #modal .cf-bp-row .settings-switch::after { content: "" !important; position: absolute !important; top: 8px !important; right: 7px !important; left: auto !important; bottom: auto !important;
    width: 26px !important; height: 26px !important; border-radius: 50% !important; box-sizing: content-box !important; background: #FBF0D8 !important; border: 0 !important;
    box-shadow: inset 0 0 0 2px #3A2414 !important; display: grid !important; place-items: center !important; font: 700 16px/16px "Trebuchet MS", sans-serif !important; color: #F2B233 !important; }
  html body #modal .cf-bp-row .settings-switch[aria-checked="true"]::after { content: "✓" !important; background: #3A2414 !important; box-shadow: none !important; }
}
/* exact match with the menu switch (measured): inset highlight, font, no text shadow, label offset, knob position, no hover brightening */
@layer cf-base {
  html body #modal .cf-bp-row .settings-switch { box-shadow: 0 3px 0 #3A2414, inset 0 2px 0 #FDE39A !important; font: 800 16px/19.2px "Alegreya Sans", sans-serif !important; text-shadow: none !important; }
  html body #modal .cf-bp-row .settings-switch:is(:hover, :active, :focus) { filter: none !important; transform: none !important; translate: none !important; }
  html body #modal .cf-bp-row .settings-switch::before { position: relative !important; top: 0 !important; left: 0 !important; margin-left: 0 !important; }
  html body #modal .cf-bp-row .settings-switch::after { right: 6px !important; text-shadow: none !important; font: 700 16px/16px "Trebuchet MS" !important; }
}

/* The Amber frame's money labels are kept, but their information hierarchy is
   tomb-specific: the base bet and the real spin price are separate facts. */
html body [data-cf] .fx-bet [data-fx="betsub"] { color: var(--tt-ink-2) !important; font-weight: 800 !important; }
html body [data-cf] .fx-win [data-fx="next"] { color: var(--tt-ink-2) !important; font-weight: 800 !important; }
html body [data-cf] .fx-win.fx-lit { box-shadow: var(--tt-key), 0 0 0 2px color-mix(in srgb, var(--tt-gold) 48%, transparent) !important; }

/* Amber's exact active AUTO key: the remaining number becomes the stop key. */
@layer cf-base {
  html body.amber-frame [data-cf] .fx-auto > button.auto-counting { background: #f1c45d !important; border-color: #79632d !important; box-shadow: 0 3px 0 #755025,inset 0 2px 0 #ffe8a0 !important; color: #173b2d !important; }
  html body [data-cf] .fx-auto > button.auto-counting .cartoon-icon { display: none !important; }
  html body [data-cf] .fx-auto > button .auto-queue-count { display: none !important; }
  html body.amber-frame [data-cf] .fx-auto > button.auto-counting .auto-queue-count { position: absolute !important; inset: 4px 2px 17px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #173b2d !important; font: 900 clamp(19px, 2vw, 28px)/1 var(--fx-font, sans-serif) !important; font-variant-numeric: tabular-nums !important; pointer-events: none !important; }
  html body.amber-frame [data-cf] .fx-auto > button.auto-counting .cartoon-label { position: absolute !important; inset: auto 0 5px !important; width: 100% !important; height: 12px !important; color: #173b2d !important; font-size: 11px !important; line-height: 1 !important; text-align: center !important; }
}

/* Exact Amber autoplay surface. It is a body-level sheet, never the generic
   Mummies dialog: same 620px card, canopy title, three chip fields and keys.
   These rules deliberately live in cf-base because that layer owns the copied
   Amber frame's high-priority layout declarations. */
@layer cf-base {
  html body.tv-shell.amber-frame > .tv-auto-setup:not([hidden]) { position: fixed !important; z-index: 1300 !important; display: grid !important; box-sizing: border-box !important; inset: 0 !important; width: 100% !important; height: 100dvh !important; max-height: 100dvh !important; padding: 20px !important; overflow: auto !important; place-content: safe center !important; grid-template-columns: minmax(0,1fr) !important; background: #09271ee0 !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup[hidden] { display: none !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-card { position: relative !important; display: flex !important; flex-direction: column !important; width: min(620px,100%) !important; max-width: 100% !important; max-height: calc(100dvh - 40px) !important; min-height: 0 !important; margin: 0 auto !important; overflow: auto !important; overscroll-behavior: contain !important; padding: 20px 32px 26px !important; gap: 20px !important; box-sizing: border-box !important; background: #e8dfb4 !important; border: 3px solid #203f2d !important; border-image: none !important; border-radius: 38px 45px 35px 42px / 33px 38px 42px 35px !important; box-shadow: 0 7px #122e24,0 16px 40px #00181066,inset 0 0 0 5px #c7cb91 !important; color: #284b35 !important; scrollbar-width: thin !important; scrollbar-color: #708851 #e8dfb4 !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-close { position: absolute !important; z-index: 2 !important; top: 17px !important; right: 28px !important; width: 34px !important; height: 34px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #284b35 !important; box-shadow: none !important; font: 800 28px/1 Arial,sans-serif !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-title { flex: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: end !important; gap: 2px !important; position: relative !important; width: 100% !important; max-width: 100% !important; align-self: center !important; height: 124px !important; min-height: 124px !important; max-height: none !important; margin: -12px 0 0 !important; padding: 0 !important; border: 0 !important; background: url("./assets/amber/autoplay-canopy.svg?v=amber-1to1") center top / 100% 88px no-repeat !important; aspect-ratio: auto !important; font-size: 35px !important; line-height: 1 !important; color: #284b35 !important; letter-spacing: 0 !important; text-shadow: none !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-title > .toon-lettering { height: 49px !important; width: 260px !important; max-width: 85% !important; margin: 0 !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-title .toon-outline { stroke: #294c35 !important; stroke-width: 12 !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-title .toon-ink { stroke: #ffe397 !important; stroke-width: 7 !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-field { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-field > span { font: 800 14px/1.2 "Alegreya Sans",sans-serif !important; letter-spacing: .09em !important; color: #39583a !important; padding-left: 3px !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-chips { display: flex !important; flex-flow: row wrap !important; gap: 8px !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup select { display: none !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-chip { position: relative !important; flex: 1 1 0 !important; min-width: 0 !important; min-height: 72px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 9px 8px !important; border: 2px solid #81915e !important; border-image: none !important; border-radius: 15px 19px 14px 18px !important; background: #d4d5a4 !important; color: #284b35 !important; box-shadow: 0 3px #a3ad78 !important; font: 800 18px/1.05 "Alegreya Sans",sans-serif !important; letter-spacing: 0 !important; text-shadow: none !important; white-space: nowrap !important; cursor: pointer !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-chip:nth-child(2n) { border-radius: 19px 14px 18px 15px !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-chip[aria-checked="true"] { background: #47724c !important; color: #fff2bc !important; border-color: #244c35 !important; box-shadow: 0 3px #214330,inset 0 2px #94ad6e !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-chip[aria-checked="true"]::after { content: "" !important; position: absolute !important; right: 7px !important; top: 5px !important; width: 5px !important; height: 5px !important; background: #f6d581 !important; border-radius: 50% !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-money { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-auto-flow: column !important; grid-template-rows: auto auto !important; text-align: center !important; gap: 3px 12px !important; margin: 1px 0 -1px !important; padding: 13px 4px 0 !important; border-top: 1px dashed #9caa75 !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-money span { font: 800 11px/1.2 "Alegreya Sans",sans-serif !important; letter-spacing: .09em !important; color: #52704a !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-money b { font: 800 23px/1.2 "Alegreya Sans",sans-serif !important; color: #284b35 !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-keys { display: grid !important; grid-template-columns: 1fr 1.7fr !important; gap: 12px !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-keys > button { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 64px !important; min-width: 0 !important; width: 100% !important; padding: 12px !important; border: 2px solid #567349 !important; border-image: none !important; border-radius: 19px 23px 17px 22px !important; background: #cbd1a1 !important; color: #36533a !important; box-shadow: 0 4px #a0ac77 !important; font: 800 17px/1.1 "Alegreya Sans",sans-serif !important; letter-spacing: .02em !important; text-shadow: none !important; cursor: pointer !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-keys > .tv-auto-start { background: #507e4d !important; color: #fff0b8 !important; border-color: #264d35 !important; box-shadow: 0 4px #24492f,inset 0 2px #97b46c !important; }
  @media (max-width:600px) { html body.tv-shell.amber-frame > .tv-auto-setup:not([hidden]) { padding: 14px !important; } html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-card { padding: 16px 18px 22px !important; max-height: calc(100dvh - 28px) !important; gap: 17px !important; border-radius: 28px 34px 26px 31px !important; } html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-title { height: 108px !important; min-height: 108px !important; background-size: 100% 70px !important; } html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-chip { font-size: 15px !important; padding: 8px 4px !important; min-height: 50px !important; } }
}

/* Must follow the copied Amber setup rules: functional geometry is retained,
   while the surface is unambiguously Tomb papyrus, ink and gold. */
@layer cf-base {
  html body.tv-shell.amber-frame > .tv-auto-setup:not([hidden]) { background: rgba(36,22,9,.82) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-card { background: linear-gradient(135deg,var(--tt-paper-3),var(--tt-paper) 54%,var(--tt-paper-2)) !important; border-color: var(--tt-ink) !important; box-shadow: 0 7px 0 var(--tt-ink),0 18px 46px rgba(0,0,0,.52),inset 0 0 0 5px var(--tt-sand-hi) !important; color: var(--tt-ink) !important; scrollbar-color: var(--tt-ink-2) var(--tt-paper-2) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-title { background: url("./assets/tomb-ui/winged-sun.svg") center 13px / 132px 26px no-repeat !important; color: var(--tt-ink) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-title .toon-outline { stroke: var(--tt-ink) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-title .toon-ink { stroke: var(--tt-gold) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-close { color: var(--tt-ink) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup :is(.tv-auto-field > span,.tv-auto-money span) { color: var(--tt-ink-2) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-chip { background: var(--tt-paper-3) !important; border-color: var(--tt-ink) !important; color: var(--tt-ink) !important; box-shadow: 0 3px 0 var(--tt-ink),inset 0 2px 0 var(--tt-cream) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-chip:hover { background: var(--tt-sand-hi) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-chip[aria-checked="true"] { background: var(--tt-gold) !important; color: var(--tt-ink) !important; border-color: var(--tt-ink) !important; box-shadow: 0 3px 0 var(--tt-ink),inset 0 2px 0 var(--tt-gold-hl) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-chip[aria-checked="true"]::after { background: var(--tt-carn) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-money { border-top-color: var(--tt-sand-lo) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-money b { color: var(--tt-ink) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-keys > button { background: var(--tt-sand) !important; border-color: var(--tt-ink) !important; color: var(--tt-ink) !important; box-shadow: var(--tt-key) !important; }
  html body.tv-shell.amber-frame > .tv-auto-setup .tv-auto-keys > .tv-auto-start { background: var(--tt-gold) !important; border-color: var(--tt-ink) !important; color: var(--tt-ink) !important; box-shadow: var(--tt-key-gold) !important; }
}

/* September 30 review: full readable price and explicit charge multipliers. */
html body [data-cf] .tt-full-price { position:absolute!important; left:0!important; bottom:-21px!important; width:100%!important; box-sizing:border-box!important; padding:2px 6px!important; font:700 13px/1.25 'Alegreya Sans',sans-serif!important; color:#ffe7ad!important; text-align:center!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; text-shadow:0 1px 3px #000!important; pointer-events:none; }
html body [data-cf] #spin .tt-spin-price {display:none!important;}
html body #board .merged-charge {font-size:clamp(20px,2.4vw,32px)!important;line-height:1.05!important;padding:5px 8px!important;background:#20110bef!important;color:#ffe2a0!important;border:1px solid #efc16f!important;border-radius:7px!important;text-shadow:0 1px 2px #000!important;}
html body #board .merged-charge small {display:block;font:700 9px/1.1 'Alegreya Sans',sans-serif;letter-spacing:.07em;}
#modal[data-view="bonus-summary"]>.close {display:none!important;}
.tt-bonus-summary dl {display:grid;gap:12px;margin:24px 0;}
.tt-bonus-summary dl>div {display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #c39a6055;padding:10px 0;}
.tt-bonus-summary dd {margin:0;font-size:1.6em;font-weight:800;font-variant-numeric:tabular-nums;}
@media(max-width:500px){html body [data-cf] .tt-full-price{bottom:-17px!important;font-size:11px!important;}html body #board .merged-charge{font-size:20px!important;padding:3px 5px!important;}}

#board>.tt-local-lightning {position:relative;align-self:stretch;justify-self:stretch;min-width:0;min-height:0;z-index:35;overflow:hidden;contain:paint;pointer-events:none;border-radius:5px;}
#board>.tt-local-lightning svg {display:block;width:100%;height:100%;overflow:hidden;}
#board>.tt-local-lightning path {fill:none;stroke:#ffe5a0;stroke-width:3;filter:drop-shadow(0 0 3px #ff7c22);}
#board>.tt-direction-reveal {align-self:end;z-index:36;padding:2px;background:#20110be8;color:#ffe5a0;font:700 10px/1.1 'Alegreya Sans',sans-serif;pointer-events:none;}

/* TASK-006: keep the original Amber control zones without inherited anchor
   conflicts. Portrait SPIN is centered in its action row; phone landscape
   uses the dedicated right-hand action slot, not the desktop money row. */
@layer cf-base {
 html body.tv-shell.amber-frame.amber-mobile .fx-bar #spin {
  position:absolute!important;left:50%!important;top:50%!important;
  right:auto!important;bottom:auto!important;translate:none!important;
  transform:translate(-50%,-50%)!important;margin:0!important;
 }
 html body.tv-shell.amber-frame.amber-mobile-landscape .fx-bar #spin {
  position:fixed!important;left:var(--land-spin-x)!important;top:var(--land-spin-y)!important;
  right:auto!important;bottom:auto!important;translate:none!important;
  transform:none!important;margin:0!important;
 }
}
/* Tier overlays are body children in the Colchis shell, never cells in its
   legacy body grid. Keep the existing gold frame and tier entrance animation. */
@layer cf-base {
 html body.amber-frame > .win-celebration:is(.power,.big,.mega) {
  position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;
  min-width:0!important;max-width:none!important;max-height:none!important;
  margin:0!important;padding:16px!important;box-sizing:border-box!important;
  display:grid!important;place-items:center!important;overflow:hidden!important;
  transform:none!important;translate:none!important;z-index:10000!important;pointer-events:none!important;
 }
 html body.amber-frame > .win-celebration:is(.power,.big,.mega) > :is(.win-medallion,.win-compact) {
  position:relative!important;inset:auto!important;display:grid!important;
  width:min(560px,100%)!important;min-width:0!important;max-width:100%!important;
  height:auto!important;max-height:calc(100dvh - 32px)!important;box-sizing:border-box!important;
  margin:0!important;padding:22px 16px!important;gap:6px!important;
  justify-items:center!important;text-align:center!important;z-index:2!important;
 }
 html body.amber-frame > .win-celebration.power > .win-compact {width:min(380px,100%)!important;}
 html body.amber-frame > .win-celebration:is(.power,.big,.mega) .win-title {
  font-size:clamp(22px,6vw,44px)!important;line-height:1.1!important;
 }
 html body.amber-frame > .win-celebration:is(.power,.big,.mega) :is(.win-caption,.win-round-total) {
  display:block!important;font-size:12px!important;line-height:1.2!important;
 }
 html body.amber-frame > .win-celebration:is(.power,.big,.mega) .win-value {
  display:block!important;max-width:100%!important;font-size:clamp(26px,7vw,64px)!important;
  line-height:1.2!important;margin:4px 0!important;
 }
}
/* TASK-007: preserve the authored portraits, but give their silhouettes more
   space inside a quieter gold rim. Rolling faces use the same safe inset. */
@layer cf-base {
 html body.amber-frame #board { --tt-cell-rim:clamp(4px,calc(var(--tv-board) * .014),7px); }
 html body.amber-frame #board .tile:not(.locked)::after,
 html body.amber-frame #board .spin-reel > .spin-face::after {
  border-image-width:var(--tt-cell-rim)!important;opacity:.82!important;
 }
 html body.amber-frame #board .tile .art {
  inset:3%!important;width:94%!important;height:94%!important;
  background-size:contain!important;background-position:center!important;
 }
 html body.amber-frame #board .spin-reel > .spin-face > img {
  inset:3%!important;width:94%!important;height:94%!important;object-fit:contain!important;
 }
}
/* TASK-008: input lock is restricted to round controls/dialogs. SPIN retains
   its celebration-skip path; summary Continue works once busy is cleared. */
@layer cf-base {
 html body[data-busy="true"] :is(#tv-direct-bonuses,#modal[open],#cf-menu[open]),
 html body[data-busy="true"] :is(#tv-direct-bonuses,#modal[open],#cf-menu[open]) * {
  pointer-events:none!important;
 }
 @media (max-width:600px) {
  html body #modal #modal-content :is(button,.action),
  html body #cf-menu #cf-menu-content :is(button,.action) {min-height:44px!important;min-width:44px!important;}
  html body #modal #modal-content,html body #cf-menu #cf-menu-content {
   max-height:calc(100dvh - 32px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;
  }
 }
}
/* TASK-010: rail selects the next option; the exact SPIN debit stays visible. */
@layer cf-base {
 html body #tv-direct-bonuses > button :is(.tv-game-bonus-name,.tv-game-bonus-state,.cartoon-label) {display:none!important;}
 html body #tv-direct-bonuses > button {display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:3px!important;padding:4px!important;}
 html body #tv-direct-bonuses > button > .cartoon-icon {flex:none!important;width:24px!important;height:24px!important;}
 html body #tv-direct-bonuses .cf-buy-copy {display:grid!important;gap:2px!important;min-width:0!important;max-width:100%!important;text-align:center!important;}
 html body #tv-direct-bonuses .cf-buy-name {font:800 10px/1.1 'Alegreya Sans',sans-serif!important;color:var(--tt-ink)!important;}
 html body #tv-direct-bonuses .cf-buy-price {font:900 13px/1.1 'Alegreya Sans',sans-serif!important;color:var(--tt-ink)!important;white-space:normal!important;font-variant-numeric:tabular-nums!important;}
 html body.amber-mobile #tv-direct-bonuses > button {flex-direction:row!important;gap:4px!important;}
 html body.amber-mobile #tv-direct-bonuses > button > .cartoon-icon {width:20px!important;height:20px!important;}
 html body.amber-mobile #tv-direct-bonuses .cf-buy-price {font-size:12px!important;}
 html body.amber-mobile-landscape #tv-direct-bonuses > button > .cartoon-icon {display:none!important;}
 html body.amber-mobile-landscape #tv-direct-bonuses .cf-buy-price {font-size:12px!important;}
}
@layer cf-base {
 html body #tv-direct-bonuses .cf-select-state {font:800 9px/1.1 'Alegreya Sans',sans-serif!important;letter-spacing:.04em!important;color:var(--tt-ink-2)!important;}
 html body #tv-direct-bonuses > button[aria-pressed="true"] {animation:none!important;}
 html body #tv-direct-bonuses > button[aria-pressed="true"]::after {content:none!important;display:none!important;}
 html body #tv-direct-bonuses > button > .cartoon-icon {width:20px!important;height:20px!important;}
 html body #tv-direct-bonuses .cf-buy-copy {gap:1px!important;}
}
/* TASK-011: the selected option's full debit, never just its base bet. The
   absolute strip uses the existing reserved gap, so SPIN never moves on select. */
@layer cf-base {
 html body [data-cf] .tt-full-price {
  display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
 }
 html body [data-cf] .tt-price-label {font:700 11px/1 'Alegreya Sans',sans-serif!important;}
 html body [data-cf] .tt-price-amount {font:800 13px/1 'Alegreya Sans',sans-serif!important;font-variant-numeric:tabular-nums!important;}
 html body [data-cf] .tt-full-price[data-selected="true"] {
  height:22px!important;bottom:-24px!important;padding:0 4px!important;
  background:#241608f5!important;color:#ffe1a0!important;border-radius:4px!important;
 }
 html body [data-cf] .tt-full-price[data-selected="true"] .tt-price-amount {
  font-size:18px!important;font-weight:900!important;color:#fff3ca!important;
 }
 html body.amber-mobile [data-cf] .tt-full-price[data-selected="true"] {
  height:26px!important;bottom:-28px!important;
 }
 html body.amber-mobile [data-cf] .tt-full-price[data-selected="true"] .tt-price-amount {font-size:20px!important;}
}