/* Colchis frame — the Tomb of Twenty-Five specifics. Loaded after colchis-frame.css.
   Geometry comes from colchis-frame.mjs layout() (Amber Swarm's layout, unchanged) through the --tv-* / --cf-* body variables. */

/* The previous Mummies chrome. Its controls stay in the DOM (hidden) because the frame proxies to them. */
html body.amber-frame > :is(header, footer, #cf-none),
html body.amber-frame :is(.left-panel, .machine-status, .feature-panel, .character-paytable, .paytable-toggle, #rex-call, .board-controls, .bolt, .scanline, #cf-none) { display: none !important; }

/* The board keeps its Mummies cells but sits exactly where Amber puts its board. */
body.amber-frame > main,
body.amber-frame .machine,
body.amber-frame .frame,
body.amber-frame .board-wrap { display: contents !important; }
body.amber-frame #board {
  position: fixed !important; inset: auto !important;
  left: var(--tv-bx) !important; top: var(--tv-by) !important;
  width: var(--tv-board) !important; height: var(--tv-board-h) !important;
  margin: 0 !important; padding: var(--cf-board-pad) !important; box-sizing: border-box !important;
  transform: none !important; translate: var(--fx-shake, 0px 0px) !important; scale: none !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
  gap: var(--cf-board-gap) !important;
  z-index: 2;
}
/* Amber's measured board: 6px padding, 6px gap (4px on a phone). */
body.amber-frame { --cf-board-gap: 6px; --cf-board-pad: 6px; }
body.amber-frame.amber-mobile { --cf-board-gap: 4px; }

/* Logo: the Tomb of Twenty-Five artwork in Amber's logo box. */
body.amber-frame .fx-logo.cf-logo { background-image: none !important; }
body.amber-frame .fx-logo.cf-logo > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none; user-select: none; }

/* Round offers (OPEN BOTH, DJINN'S PACT): Amber-style keys under the board, or over the bonus rail when there is no room. */
html body.amber-frame :is(#open-directions, #djinn-pact, .auto-indicator, #cf-none) { display: none !important; }
body.amber-frame .cf-offers {
  position: fixed; left: var(--cf-offers-x); top: var(--cf-offers-y); width: var(--cf-offers-w); height: var(--cf-offers-h);
  display: flex; align-items: center; justify-content: center; gap: 12px; z-index: 40; pointer-events: none; box-sizing: border-box;
}
/* Desktop: SPIN rises into the band under the board, so the offers flank it. */
body.amber-frame.cf-offers-flank:not(.cf-offers-tight) .cf-offers { justify-content: space-between; }
body.amber-frame.cf-offers-flank:not(.cf-offers-tight) .cf-offer-key { max-width: calc((100% - var(--amber-spin)) / 2 - 16px); }
body.amber-frame.cf-offers-flank:not(.cf-offers-tight) .cf-offer-key[data-offer="pact"] { margin-left: auto; }
body.amber-frame.cf-offers-tight .cf-offers { flex-direction: var(--cf-offers-dir, row); gap: 6px; }
body.amber-frame.cf-offers-tight.tv-landscape .cf-offers { --cf-offers-dir: column; }
body.amber-frame .cf-offer-key {
  pointer-events: auto; display: grid; place-content: center; gap: 2px; min-width: 0;
  height: min(100%, 64px); padding: 4px 18px; flex: 0 1 auto; max-width: 100%;
  background: #719354; border: 2px solid #153e35; border-radius: 28% 35% 27% 32% / 40% 45% 38% 42%;
  box-shadow: 0 3px 0 #173d33, inset 0 2px 0 #b1cba04d; color: #fff2ce; cursor: pointer;
  font: 700 clamp(11px, calc(var(--amber-font, 16px) * .72), 16px)/1.1 "Trebuchet MS", sans-serif; text-align: center; text-shadow: 0 1px 1px #000;
}
body.amber-frame.cf-offers-tight .cf-offer-key { flex: 1 1 0; height: 100%; width: 100%; padding: 4px 8px; }
body.amber-frame.cf-offers-tight .cf-offer-key :is(.cf-offer-title, .cf-offer-line) { white-space: normal; }
body.amber-frame .cf-offer-key[hidden] { display: none; }
body.amber-frame .cf-offer-key .cf-offer-line { font-size: .78em; font-weight: 700; color: #eed7af; white-space: nowrap; }
body.amber-frame .cf-offer-key .cf-offer-title { white-space: nowrap; }
body.amber-frame .cf-offer-key[data-offer="pact"] { background: #6d5a8f; }
body.amber-frame .cf-offer-key:hover:not(:disabled) { filter: brightness(1.08); }
body.amber-frame .cf-offer-key.tv-pressed, body.amber-frame .cf-offer-key:active:not(:disabled) { translate: 0 2px; box-shadow: 0 1px 0 #173d33, inset 0 2px 0 #b1cba04d; }
body.amber-frame .cf-offer-key:disabled { opacity: .5; cursor: default; }
body.amber-frame .cf-offer-key:focus-visible { outline: 3px solid #fff2ce; outline-offset: 2px; }

/* One bonus per rail key: the buy dialog shows only the card that was chosen (cf-base: outranks Amber's layered !important). */
@layer cf-base {
  html body #modal #modal-content.cf-single-bonus .bonus-offers { grid-template-columns: minmax(0, 420px) !important; justify-content: center !important; }
  html body #modal #modal-content.cf-single-bonus .bonus-offers > [hidden], html body #modal #modal-content [hidden] { display: none !important; }
}

/* The frame's own dialog is opened with showModal(); keep the page scroll locked like Amber. */
#cf-menu::backdrop { background: rgba(4, 12, 10, .62); }

/* Mummies dialog content on Amber's cream panel. Amber's dialog rules are layered !important, so these overrides live in
   cf-base, the first layer, whose !important declarations outrank every later layer and every unlayered rule. */
@layer cf-base {
  html body #modal #modal-content :is(p, li, dt, dd, small, span, td, th, label, strong, b, em, h2, h3, h4, summary, div, output, figcaption, a, dl, table, article, section):not(button, button *, .toon-lettering *, .toon-readable) {
    color: #284b35 !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; background-color: transparent !important; background-image: none !important;
  }
  html body #modal #modal-content h1:not(.toon-typeset) { color: #355938 !important; -webkit-text-fill-color: #355938 !important; }
  html body #modal #modal-content :is(h2, h3) { color: #355938 !important; letter-spacing: .06em !important; }
  html body #modal #modal-content :is(.bonus-offer, table, .rg-summary, dl.bonus-facts, fieldset) {
    background: #d5d8a8 !important; border: 2px solid #a9b884 !important; border-radius: 16px !important; box-shadow: none !important;
  }
  html body #modal #modal-content :is(td, th) { border-color: #a9b88488 !important; }
  html body #modal #modal-content :is(select, input:not([type="checkbox"]):not([type="radio"])) {
    background: #f1ecce !important; color: #284b35 !important; -webkit-text-fill-color: #284b35 !important; border: 2px solid #355938 !important; border-radius: 10px !important;
  }
  html body #modal #modal-content input:is([type="checkbox"], [type="radio"]) { accent-color: #355938 !important; }
  html body #modal #modal-content :is(.gate-bar, .gate-bar > i, .vol-meter i, meter) { background-color: #a9b884 !important; }
}

/* Auto round (Owner 2026-09-24): arms, corners and the Pact open by themselves, so nothing on the board is for sale. */
@layer cf-base {
  html body #board :is(.cross-gate, .corner-gate) { display: none !important; }
}

/* 2D cast rigs on the board and as the mascot (rig2d.mjs). */
@layer cf-base {
  html body #board .tile .art.has-rig { background-image: none !important; }
}
#board .tile .art > .rig2d { position: absolute; inset: 0; }
/* The game mascot always uses the complete 640×640 Pharaoh rig.  The tile
   portrait is intentionally waist-up and is for board cells only. */
body.amber-frame .imperial-mascot .cf-mascot-rig { position:absolute!important; inset:0 0 auto!important; width:100%!important; height:92%!important; overflow:visible!important; }
body.amber-frame .imperial-mascot .cf-mascot-rig > .rig2d { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; overflow:visible!important; }
/* The WILD is a living guide, not a sticker: each earned win gives the
   foreground Pharaoh a brief, readable response. External FX-library effects
   are anchored to this same element by tomb-fx-director.mjs. */
body.amber-frame .imperial-mascot { transform-origin: 50% 74%; will-change: filter; }
/* The Pharaoh stays grounded: glyph rituals sell the power, not a jump. */
body.amber-frame .imperial-mascot.mascot-react-win { animation: pharaoh-glyph-focus .82s ease-out both; }
body.amber-frame .imperial-mascot.mascot-react-wild { animation: pharaoh-glyph-focus 1.25s ease-out both; }
body.amber-frame .imperial-mascot.mascot-react-big { animation: pharaoh-glyph-focus 1.35s ease-out both; }
body.amber-frame .imperial-mascot.mascot-react-mega { animation: pharaoh-glyph-focus 2.1s ease-out both; }
@keyframes pharaoh-glyph-focus { 0%,100% { filter: drop-shadow(0 12px 12px #031a1599); } 24% { filter: brightness(1.18) saturate(1.12) drop-shadow(0 0 12px #f3c452); } 54% { filter: brightness(1.35) saturate(1.2) drop-shadow(0 0 22px #ffe49a); } 76% { filter: brightness(1.12) drop-shadow(0 0 8px #d8a845); } }
@media (prefers-reduced-motion: reduce) { body.amber-frame .imperial-mascot:is(.mascot-react-win,.mascot-react-wild,.mascot-react-big,.mascot-react-mega) { animation: none; filter: brightness(1.12); } }
/* Merged winning block: full-body rig over the (hidden) still. */
@layer cf-base { html body #board .merged-zombie .merged-portrait.has-rig { background-image: none !important; } }
#board .merged-zombie .merged-portrait > .rig2d { position: absolute; inset: 5% 6%; }

/* Owner 2026-09-25: every character keeps the same cell background (dark gradient, gold frame) in its OWN colour,
   chosen far from the character's dominant colour and from every other character's, so look-alikes separate at a glance.
   Hues: tools/rig2d (tile-hues), measured from each 640 px master. Empty and locked cells keep the original teal. */
@layer cf-base {
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="a"] { --cf-h: 169; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="ammo"] { --cf-h: 106; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="binoculars"] { --cf-h: 212; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="chainsaw"] { --cf-h: 254; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="drill"] { --cf-h: 64; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="fuel"] { --cf-h: 148; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="grenade"] { --cf-h: 275; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="j"] { --cf-h: 42; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="med"] { --cf-h: 233; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="q"] { --cf-h: 339; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="saw"] { --cf-h: 0; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="scatter"] { --cf-h: 21; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="tire"] { --cf-h: 127; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="torch"] { --cf-h: 191; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="wild"] { --cf-h: 318; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="wrench"] { --cf-h: 85; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol="zombie"] { --cf-h: 296; }
  html body #board :is(.tile, .merged-zombie, .spin-face)[data-symbol]:not([data-symbol=""], [data-symbol="blank"]) {
    background: linear-gradient(165deg, hsl(var(--cf-h) 58% 14%), hsl(var(--cf-h) 64% 6.5%)) !important;
  }
}

/* Win action layer (fx.mjs): canvas + flash above the board, never catching input. Board shake via --fx-shake. */
.fx-layer, .fx-flash { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.fx-layer { inset: 0 auto auto 0; }
.fx-flash { opacity: 0; z-index: 61; mix-blend-mode: screen; }
@layer cf-base { html body.amber-frame #board { translate: var(--fx-shake, 0px 0px) !important; } }

/* A cell inside a merged block never rises above the block, and its keyboard-focus frame is not drawn there
   (it showed as a small second cell inside the big one). */
@layer cf-base {
  html body #board .tile.merged-cell { z-index: auto !important; }
  html body #board .tile.merged-cell:is(:focus, :focus-visible) { outline: none !important; box-shadow: none !important; }
}

/* ── Tomb Raid free spins: HUD over the board's top edge + the big title banner (cartoon: sand / brown ink / gold) ── */
.cf-raid-hud{position:fixed;z-index:62;left:var(--amber-logo-x);top:var(--amber-logo-y);width:var(--amber-logo-w);height:var(--amber-logo-h);
 display:grid;grid-template-rows:auto auto auto auto;align-content:center;justify-items:center;gap:clamp(1px,.6vh,6px);padding:6px 8px;box-sizing:border-box;
 background:#F4E4BE;color:#3A2414;border:3px solid #3A2414;border-radius:18px 22px 17px 21px;box-shadow:0 4px 0 #3A2414;
 font:800 clamp(10px,calc(var(--amber-logo-h) * .1),17px)/1.05 "Alegreya Sans",system-ui,sans-serif;letter-spacing:.05em;pointer-events:none;text-align:center}
.cf-raid-hud[hidden]{display:none}
.cf-raid-hud .rh-name{color:#7a3b0c;font-size:1.05em}
.cf-raid-hud .rh-mult{min-width:3em;padding:2px 10px;background:#F2B233;border:2px solid #3A2414;border-radius:12px 14px 11px 13px;font-size:1.35em}
.cf-raid-hud .rh-total{display:grid}
.cf-raid-hud .rh-total small{font-size:.66em;opacity:.8}
.cf-raid-hud .rh-total strong{font-size:1.2em}
/* the logo gives its place to the raid scoreboard for the length of the raid */
@layer cf-base{html body.cf-raid-on .fx-logo{visibility:hidden!important}}
.cf-raid-banner{position:fixed;z-index:63;left:calc(var(--tv-bx) + var(--tv-board) * .06);width:calc(var(--tv-board) * .88);
 top:calc(var(--tv-by) + var(--tv-board-h) * .28);box-sizing:border-box;padding:18px 22px 16px;text-align:center;pointer-events:none;
 background:#F4E4BE;border:4px solid #3A2414;border-radius:26px 32px 24px 30px;box-shadow:0 6px 0 #3A2414,0 0 0 9999px rgba(20,10,4,.45)}
.cf-raid-banner[hidden]{display:none}
.cf-raid-banner .rb-title{margin:0;font:900 clamp(26px,4.2vw,58px)/1 "Alegreya Sans",system-ui,sans-serif;color:#F2B233;-webkit-text-stroke:2px #3A2414}
.cf-raid-banner .rb-title .toon-lettering{height:1.1em;max-width:100%}
.cf-raid-banner .rb-title .toon-outline path{stroke:#3A2414!important;stroke-width:18!important}
.cf-raid-banner .rb-title .toon-ink path{stroke:#F2B233!important;stroke-width:11!important}
.cf-raid-banner .rb-title .toon-readable{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.cf-raid-banner .rb-sub{margin:10px 0 0;color:#3A2414;font:800 clamp(13px,1.4vw,20px)/1.2 "Alegreya Sans",system-ui,sans-serif;letter-spacing:.08em}
.cf-raid-banner.rb-in{animation:cf-rb-in .5s cubic-bezier(.2,.9,.3,1.35) both}
@keyframes cf-rb-in{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@media (prefers-reduced-motion:reduce){.cf-raid-banner.rb-in{animation:none}}
/* during the raid the tomb darkens a little and the board glows gold */
body.cf-raid-on .scenery{filter:brightness(.72) saturate(1.1)}
body.cf-raid-on #board{box-shadow:0 0 0 3px #F2B233,0 0 34px 8px rgba(242,178,51,.55)!important}

/* The copied Amber sheet has several historical SPIN placements.  Bonus and
   raid state must only change its face (play/stop), never select a different
   placement rule.  One anchor in the fixed Tomb control bar wins for every
   landscape state, including active Tomb Raid free spins. */
@layer cf-base{
 html body.tv-shell.tv-landscape .fx-bar #spin:where([data-cf],[data-cf] *){
  position:fixed!important;inset:auto!important;left:50vw!important;top:calc(var(--amber-bar-y) + var(--amber-bar-h) / 2)!important;right:auto!important;bottom:auto!important;
  translate:-50% -50%!important;transform:none!important;margin:0!important;
 }
}

/* the HUD replaces the status pill during the raid (both sit just above the board) */
@layer cf-base{html body.cf-raid-on .fx-status{display:none!important}}
/* short phones: the logo slot is ~52 px tall — the scoreboard goes two-by-two */
@media (orientation:portrait) and (max-height:700px){
 .cf-raid-hud{grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:6px;row-gap:1px;padding:3px 6px;font-size:9.5px}
 .cf-raid-hud .rh-mult{padding:0 6px;font-size:1.15em}
 .cf-raid-hud .rh-total small{display:none}
}

/* Win block: the background itself burns (fx.fireFill canvas), the character stands in front of the fire. */
@layer cf-base {
  html body #board .merged-zombie > canvas.fx-block-fire { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important; margin: 0 !important; z-index: 0 !important; pointer-events: none !important;
    image-rendering: auto !important; filter: blur(1.6px) saturate(1.2) contrast(1.05) !important; opacity: 1 !important;
    -webkit-mask-image: linear-gradient(to top, #000 38%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.2)) !important; mask-image: linear-gradient(to top, #000 38%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.2)) !important; }
  html body #board .merged-zombie > .merged-portrait { z-index: 1 !important; }
  /* the old style shortened the portrait box to leave a label strip at the bottom, which pushed the character up:
     with a rig the portrait box fills the whole block and the character is centred in it */
  html body #board .merged-zombie > .merged-portrait.has-rig { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important;
    max-width: none !important; max-height: none !important; margin: 0 !important; translate: none !important; transform: none !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; }
  html body #board .merged-zombie > :is(.merged-size, .merged-charge) { z-index: 2 !important; }
  html body #board .merged-zombie[data-symbol] { background: #120502 !important; }
}
#board .merged-zombie > .merged-portrait > .rig2d { filter: drop-shadow(0 0 6px rgba(20,6,0,.85)) drop-shadow(0 4px 10px rgba(0,0,0,.6)); }

/* Spinning: whole cells roll through the window — each face carries the cell background (hue per character),
   the gold cell frame and the character; the cell's own static frame is hidden while it rolls. */
@layer cf-base {
  html body #board .tile.rolling::after { visibility: hidden !important; }
  html body #board .spin-strip.spin-reel { position: absolute !important; inset: 0 !important; z-index: 3 !important; }
  html body #board .spin-reel > .spin-face { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; box-sizing: border-box !important; }
  html body #board .spin-reel > .spin-face::after { content: "" !important; position: absolute !important; inset: -1px !important; pointer-events: none !important;
    border-image: var(--cf-cell-frame, url("./assets/runtime-mummies/frames/cabinet.webp")) 20% / 11px / 0 stretch !important; }
  html body #board .spin-reel > .spin-face > img { position: absolute !important; inset: 7% !important; width: 86% !important; height: 86% !important; padding: 0 !important;
    object-fit: contain !important; filter: drop-shadow(0 3px 3px rgba(2,8,7,.53)) !important; }
}
/* Small cells now retain the authored rig motion: each portrait breathes, its
   separate limbs/cloth react and its eyes blink. Their phases are unique per
   clone (rig2d.mjs), avoiding the old static-symbol look and any lockstep. */
@layer cf-base {
  html body #board .tile:not(.rolling) .art > .rig2d .rig2d-stage :is(img, .rig2d-group):not(.rig2d-blink) { animation-play-state: running; }
  html body #board .tile .art > .rig2d .rig2d-stage { rotate: var(--rj,0deg) !important; }
}
html.low-power #board .tile .art > .rig2d .rig2d-stage :is(img,.rig2d-group),
html.low-power #board .tile .art > .rig2d .rig2d-stage,
.effects-paused #board .tile .art > .rig2d .rig2d-stage :is(img,.rig2d-group),
.effects-paused #board .tile .art > .rig2d .rig2d-stage { animation: none !important; }

/* Background braziers (scene-fire.mjs): live flames screened over the painted ones, plus a flickering warm glow. */
.scenery .scene-fires { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.scenery .scene-fire { position: absolute; mix-blend-mode: screen; filter: blur(.7px) saturate(1.15) contrast(1.1); image-rendering: auto;
  -webkit-mask-image: linear-gradient(to top, #000 70%, transparent); mask-image: linear-gradient(to top, #000 70%, transparent); }
.scenery .scene-fire.small { filter: blur(.8px); }
.scenery .scene-glow { position: absolute; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,150,50,.22), rgba(255,110,30,.08) 55%, transparent); }