/* Colchis frame: every selector is fenced off [data-cf] (gen-css.mjs --fence). */
/* ===========================================================================
   layout.css — the stage.

   LOAD ORDER: after cross-board.css and mummies-layout.css.

   RULES THIS FILE KEEPS
   ---------------------
   1. The board's size is a function of the viewport ONLY. Every row around it
      has a stated height, so --cross-size is arithmetic, and nothing that
      happens during a round — a win, arms on offer, a DJINN'S PACT offer, the
      autoplay stop button — can change it. The previous pass let the Pact
      push in a row of its own: the board shrank by up to 23% mid-round and
      SPIN left the screen. Offers now live in fixed slots (the feature column
      on desktop, a medallion beside BONUS on a phone).
   2. The bar has an exact height. Its rows are fixed tracks; its contents are
      designed to fit them. tools/browser/05-composition.mjs asserts SPIN is
      fully on screen and the board is the same size in the busy state.
   3. SPIN sits on the bar's true centre line: the bar is `1fr auto 1fr`, so
      the two outer groups can hold anything without moving it.

   THE STAGES (one grid each, chosen by round-controls.mjs)
     stage-wide       side | board | side, brand band beside the board's top
     stage-mid        brand row, board | features, bar
     stage-portrait   brand, full-width board, bar
     stage-landscape  brand column | board | bar column
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. PAGE SHELL
--------------------------------------------------------------------------- */
html:has(body.cross-game):where(:not([data-cf],[data-cf] *)),body.cross-game:where(:not([data-cf],[data-cf] *)){
 height:100dvh!important;min-height:0!important;overflow:hidden!important;
}
body.cross-game:where(:not([data-cf],[data-cf] *)){
 display:grid!important;box-sizing:border-box;
 margin:0!important;padding:var(--g)!important;
 gap:var(--gap)!important;
}
.cross-game main:where(:not([data-cf],[data-cf] *)),.cross-game .machine:where(:not([data-cf],[data-cf] *)){
 display:contents!important;width:auto!important;height:auto!important;
 margin:0!important;padding:0!important;position:static!important;
}
.cross-game .quick-controls:where(:not([data-cf],[data-cf] *)),.cross-game .corner-round-actions:where(:not([data-cf],[data-cf] *)),.cross-game .action-row:where(:not([data-cf],[data-cf] *)),.cross-game .play-controls:where(:not([data-cf],[data-cf] *)),.cross-game .control-cluster:where(:not([data-cf],[data-cf] *)){display:none!important}
.cross-game .scenery:where(:not([data-cf],[data-cf] *)),.cross-game .vignette:where(:not([data-cf],[data-cf] *)){position:fixed!important;inset:0!important;z-index:0}
.cross-game>*:where(:not([data-cf],[data-cf] *)){position:relative;z-index:1}
/* Every painted control face is `position:absolute;inset:0` (game.css), so
   the button must be the containing block or the art walks up the tree. */
.cross-game button.round-control:where(:not([data-cf],[data-cf] *)){position:relative!important;overflow:visible!important}
/* game.css gives every <button> a bevel ::before at `position:absolute;inset:0`.
   On a button that is not itself positioned, that bevel resolves against the
   nearest positioned ancestor instead — the OPEN BOTH button's filled the whole
   status line with an olive band in the busy state. Painted controls carry
   their own art and never want it. */
.cross-game :is(header,footer,.feature-panel) button:where(:not([data-cf],[data-cf] *))::before{content:none!important;display:none!important}
.cross-game :is(.open-directions,.auto-indicator,.call-option,.paytable-toggle):where(:not([data-cf],[data-cf] *)){position:relative!important}

/* The mascot is gone from this game. Anything that still renders him — the
   scene figure, the win mascot, the strike animation — is removed from the
   stage here; the scripts that create them are being retired separately. */
.cross-game :is(.monster-rex,.scene-rex,.rex-win-mascot,.rex-win-animation,.rex-canonical-strike):where(:not([data-cf],[data-cf] *)){display:none!important}


/* ---------------------------------------------------------------------------
   2. TOKENS PER STAGE
   --h-bar is derived, never guessed: frame + padding + the bar's fixed rows.
--------------------------------------------------------------------------- */
.cross-game:where(:not([data-cf],[data-cf] *)){
 --g:8px;--gap:8px;--side-w:0px;
 --h-brand:56px;
 --spin:84px;--medallion:52px;
 --bar-frame:8px;--bar-pad:5px;--bar-gap:3px;
 --h-status:24px;--h-betline:0px;
 --bar-rows:calc(var(--h-status) + var(--bar-gap) + var(--spin));
 --h-bar:calc(2 * var(--bar-frame) + 2 * var(--bar-pad) + var(--bar-rows));
 --cross-size:max(160px,min(calc(100vw - 2 * var(--g)),calc(100dvh - 2 * var(--g) - 2 * var(--gap) - var(--h-brand) - var(--h-bar))));
}

/* Wide desktop: the brand band shares the board's first row, so the board
   rises to the top of the stage and gets that height back. */
.cross-game.stage-wide:where(:not([data-cf],[data-cf] *)){
 --side-w:320px;--h-brand:calc(var(--side-w) / 2.24 + 4px);--spin:96px;--gap:12px;
 --bar-frame:6px;--bar-pad:4px;
 /* The status line is a nameplate on the bar's top edge (section 6), so the
    bar is only as tall as SPIN. At 1366x768 that is the difference between a
    44% and a 45% board. */
 --bar-rows:var(--spin);
 --cross-size:max(200px,min(
   calc(100vw - 2 * var(--g) - 2 * var(--side-w) - 2 * var(--gap)),
   calc(100dvh - 2 * var(--g) - var(--gap) - var(--h-bar))));
}
@media(max-height:860px){.cross-game.stage-wide:where(:not([data-cf],[data-cf] *)){--spin:78px}}

.cross-game.stage-mid:where(:not([data-cf],[data-cf] *)){
 --side-w:232px;--h-brand:112px;--spin:84px;--h-betline:52px;--gap:12px;
 --bar-frame:6px;--bar-pad:4px;
 --bar-rows:calc(var(--h-betline) + var(--spin) + var(--bar-gap));
 --cross-size:max(200px,min(
   calc(100vw - 2 * var(--g) - var(--side-w) - var(--gap)),
   calc(100dvh - 2 * var(--g) - 2 * var(--gap) - var(--h-brand) - var(--h-bar))));
}

/* Portrait phone: the board is full width at every phone size. The header and
   SPIN scale with the slack a taller phone has; a short phone gets the minimum
   of both and still keeps a ~96% board. */
.cross-game.stage-portrait:where(:not([data-cf],[data-cf] *)){
 --g:8px;--gap:6px;
 --h-brand:clamp(60px,calc((100dvh - 100vw) * .3),120px);
 --spin:clamp(76px,calc(100dvh - 100vw - 300px),132px);
 --medallion:44px;
 --bar-frame:6px;--bar-pad:5px;--bar-gap:5px;
 --h-status:28px;--h-betline:34px;
 --bar-rows:calc(var(--h-status) + var(--h-betline) + var(--spin) + 2 * var(--bar-gap));
}
@media(max-width:365px){.cross-game.stage-portrait:where(:not([data-cf],[data-cf] *)){--medallion:40px}}
@media(min-height:800px) and (max-width:760px){
 .cross-game.stage-portrait:where(:not([data-cf],[data-cf] *)){--medallion:48px;--h-status:32px;--h-betline:40px;--bar-gap:10px}
}
/* On a phone the action row's width is the binding budget: four medallions, SPIN and the gaps must fit inside the bar, so SPIN is the smaller of what
   the height allows and what the width allows — and the row is exactly that
   tall, not a height SPIN never reaches. */
.cross-game.stage-portrait:where(:not([data-cf],[data-cf] *)){
 --spin:min(clamp(76px,calc(100dvh - 100vw - 300px),132px),
            calc(100vw - 2 * var(--g) - 2 * var(--bar-frame) - 2 * var(--s2) - 4 * var(--medallion) - 5 * var(--s2) - 8px));
}
.cross-game.stage-portrait footer:where(:not([data-cf],[data-cf] *)){column-gap:var(--s2)!important}

.cross-game.stage-landscape:where(:not([data-cf],[data-cf] *)){
 --g:8px;--gap:8px;--brand-w:140px;
 --spin:64px;--medallion:36px;
 --bar-frame:6px;--bar-pad:4px;--bar-gap:4px;
 --h-status:24px;--h-betline:32px;
 --bar-rows:calc(var(--h-status) + var(--h-betline) + var(--spin) + 2 * var(--bar-gap));
 --cross-size:max(140px,min(calc(100dvh - 2 * var(--g)),
   calc(100vw - 2 * var(--g) - 2 * var(--gap) - var(--brand-w) - 270px)));
}

/* One type multiplier per stage keeps the scale at six steps. */
.cross-game:where(:not([data-cf],[data-cf] *)){--ui:1}
.cross-game.stage-mid:where(:not([data-cf],[data-cf] *)),.cross-game.stage-portrait:where(:not([data-cf],[data-cf] *)){--ui:.92}
.cross-game.stage-landscape:where(:not([data-cf],[data-cf] *)){--ui:.82}
@media(max-width:365px),(max-height:700px){.cross-game.stage-portrait:where(:not([data-cf],[data-cf] *)){--ui:.84}}


/* ---------------------------------------------------------------------------
   3. THE GRID, PER STAGE (explicit lines: the board shares rows on desktop)
--------------------------------------------------------------------------- */
.cross-game.stage-wide:where(:not([data-cf],[data-cf] *)){
 grid-template-columns:var(--side-w) var(--cross-size) var(--side-w);
 grid-template-rows:var(--h-brand) calc(var(--cross-size) - var(--h-brand) - var(--gap)) var(--h-bar);
 justify-content:center;align-content:center;
}
.cross-game.stage-wide header:where(:not([data-cf],[data-cf] *)){grid-area:1/1/2/4}
.cross-game.stage-wide .frame:where(:not([data-cf],[data-cf] *)){grid-area:1/2/3/3}
.cross-game.stage-wide .character-paytable:where(:not([data-cf],[data-cf] *)){grid-area:2/1/3/2}
.cross-game.stage-wide .paytable-toggle:where(:not([data-cf],[data-cf] *)){grid-area:2/1/3/2}
.cross-game.stage-wide .feature-panel:where(:not([data-cf],[data-cf] *)){grid-area:2/3/3/4}
.cross-game.stage-wide footer:where(:not([data-cf],[data-cf] *)){grid-area:3/1/4/4}

.cross-game.stage-mid:where(:not([data-cf],[data-cf] *)){
 grid-template-columns:var(--cross-size) var(--side-w);
 grid-template-rows:var(--h-brand) var(--cross-size) var(--h-bar);
 justify-content:center;align-content:center;
}
.cross-game.stage-mid header:where(:not([data-cf],[data-cf] *)){grid-area:1/1/2/3}
.cross-game.stage-mid .frame:where(:not([data-cf],[data-cf] *)){grid-area:2/1/3/2}
.cross-game.stage-mid .feature-panel:where(:not([data-cf],[data-cf] *)){grid-area:2/2/3/3}
.cross-game.stage-mid footer:where(:not([data-cf],[data-cf] *)){grid-area:3/1/4/3}

.cross-game.stage-portrait:where(:not([data-cf],[data-cf] *)){
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:var(--h-brand) var(--cross-size) var(--h-bar);
 /* A tall phone's spare height is shared evenly around the three blocks
    rather than stretching the bar into a mostly empty plinth. */
 align-content:space-evenly;
}
.cross-game.stage-portrait header:where(:not([data-cf],[data-cf] *)){grid-area:1/1/2/2}
.cross-game.stage-portrait .frame:where(:not([data-cf],[data-cf] *)){grid-area:2/1/3/2}
.cross-game.stage-portrait footer:where(:not([data-cf],[data-cf] *)){grid-area:3/1/4/2}

.cross-game.stage-landscape:where(:not([data-cf],[data-cf] *)){
 grid-template-columns:var(--brand-w) var(--cross-size) minmax(0,1fr);
 grid-template-rows:minmax(0,1fr);
 align-content:center;
}
.cross-game.stage-landscape header:where(:not([data-cf],[data-cf] *)){grid-area:1/1/2/2;align-self:start}
.cross-game.stage-landscape .frame:where(:not([data-cf],[data-cf] *)){grid-area:1/2/2/3;align-self:center}
.cross-game.stage-landscape footer:where(:not([data-cf],[data-cf] *)){grid-area:1/3/2/4;align-self:center}

/* What a stage does not use takes no room at all. */
.cross-game .character-paytable:where(:not([data-cf],[data-cf] *)),.cross-game .paytable-toggle:where(:not([data-cf],[data-cf] *)){display:none}
.cross-game.stage-portrait .feature-panel:where(:not([data-cf],[data-cf] *)),.cross-game.stage-landscape .feature-panel:where(:not([data-cf],[data-cf] *)){display:none!important}
.cross-game #menu:where(:not([data-cf],[data-cf] *)){display:block}
.cross-game #menu[hidden]:where(:not([data-cf],[data-cf] *)){display:none!important}


/* ---------------------------------------------------------------------------
   4. THE BOARD
--------------------------------------------------------------------------- */
.cross-game .frame:where(:not([data-cf],[data-cf] *)){
 width:var(--cross-size)!important;height:var(--cross-size)!important;
 justify-self:center;align-self:start;max-width:100%!important;
}
.cross-game .frame:where(:not([data-cf],[data-cf] *)),.cross-game .board-wrap:where(:not([data-cf],[data-cf] *)),.cross-game #board:where(:not([data-cf],[data-cf] *)){aspect-ratio:1!important}


/* ---------------------------------------------------------------------------
   5. BRAND
--------------------------------------------------------------------------- */
.cross-game header:where(:not([data-cf],[data-cf] *)){
 display:flex!important;align-items:center;gap:var(--s2);
 width:auto!important;max-width:none!important;
 height:var(--h-brand)!important;min-height:0!important;
 margin:0!important;padding:0!important;position:relative!important;
}
/* The brand slot holds the wordmark and nothing else. It is a 2.4:1 box and
   the art is `contain`ed in it, so any wide wordmark between ~3:1 and ~2:1
   fits without distortion or clipping. */
.cross-game header .logo:where(:not([data-cf],[data-cf] *)){
 order:-1;position:relative!important;flex:0 1 auto;
 left:auto!important;top:auto!important;transform:none!important;
 height:calc(var(--h-brand) - 4px)!important;aspect-ratio:2.4;width:auto!important;
 max-width:100%!important;min-width:0!important;margin:0!important;
 background-repeat:no-repeat!important;background-position:left center!important;background-size:contain!important;
}
.cross-game header #menu:where(:not([data-cf],[data-cf] *)){
 order:-3;flex:0 0 auto;position:relative!important;
 left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
 width:calc(40px * var(--ui))!important;height:calc(40px * var(--ui))!important;
 margin:0!important;transform:none!important;translate:none!important;
}
.cross-game header #menu:where(:not([data-cf],[data-cf] *))::after{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 background-size:contain!important;transform:none!important;
}
.cross-game header .wallet:where(:not([data-cf],[data-cf] *)){order:1;margin-left:auto!important;padding:2px var(--s3)!important}
.cross-game header .wallet small:where(:not([data-cf],[data-cf] *)){display:none}
.cross-game header .wallet strong:where(:not([data-cf],[data-cf] *)){font-size:var(--t-lg)}
.cross-game header .board-controls:where(:not([data-cf],[data-cf] *)){
 order:2;position:relative!important;display:flex!important;flex-direction:row!important;
 left:auto!important;right:auto!important;top:auto!important;transform:none!important;
 width:auto!important;height:auto!important;align-items:center;gap:4px!important;margin:0!important;
}
.cross-game header .board-controls button:where(:not([data-cf],[data-cf] *)){
 width:calc(34px * var(--ui))!important;height:calc(34px * var(--ui))!important;
 flex:0 0 auto!important;min-width:0!important;
}
.cross-game header .board-controls .control-caption:where(:not([data-cf],[data-cf] *)){display:none!important}
.cross-game header .control-cluster:where(:not([data-cf],[data-cf] *)){display:none!important}

/* Wide: the band spans all three columns but only its two ends carry
   anything; the board rises through its middle, so the band must never
   intercept a click meant for the board's top row. The wordmark fills the
   left column's full width; balance and the icon rail sit top-right. */
.cross-game.stage-wide header:where(:not([data-cf],[data-cf] *)){pointer-events:none;z-index:2;align-items:flex-start}
.cross-game.stage-wide header>*:where(:not([data-cf],[data-cf] *)){pointer-events:auto}
.cross-game.stage-wide header .logo:where(:not([data-cf],[data-cf] *)){width:var(--side-w)!important;height:auto!important;aspect-ratio:2.24;background-position:center!important}
.cross-game.stage-wide header .wallet:where(:not([data-cf],[data-cf] *)){margin-top:2px!important}
.cross-game.stage-wide header .board-controls:where(:not([data-cf],[data-cf] *)){margin-top:6px!important}
.cross-game.stage-mid header .logo:where(:not([data-cf],[data-cf] *)){background-position:left center!important}

/* Portrait (reference 3): MENU left, logo centred, icon group top-right with
   BALANCE directly under it. */
.cross-game.stage-portrait header:where(:not([data-cf],[data-cf] *)){
 display:grid!important;
 grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:1fr 1fr;
 align-items:center;column-gap:var(--s2);row-gap:2px;
}
.cross-game.stage-portrait header #menu:where(:not([data-cf],[data-cf] *)){grid-area:1/1/3/2}
.cross-game.stage-portrait header .logo:where(:not([data-cf],[data-cf] *)){
 grid-area:1/2/3/3;justify-self:center;
 height:calc(var(--h-brand) - 8px)!important;max-height:100%;
 background-position:center!important;
}
.cross-game.stage-portrait header .board-controls:where(:not([data-cf],[data-cf] *)){grid-area:1/3/2/4;justify-self:end;align-self:end;gap:3px!important}
.cross-game.stage-portrait header .board-controls button:where(:not([data-cf],[data-cf] *)){width:28px!important;height:28px!important}
.cross-game.stage-portrait header .wallet:where(:not([data-cf],[data-cf] *)){
 grid-area:2/3/3/4;justify-self:end;align-self:start;margin:0!important;
 padding:0 var(--s2)!important;min-width:0!important;
 flex-direction:row!important;align-items:baseline!important;gap:var(--s1)!important;
}
.cross-game.stage-portrait header .wallet strong:where(:not([data-cf],[data-cf] *)){font-size:var(--t-md)}

/* Landscape: the brand stacks in its own column. */
.cross-game.stage-landscape header:where(:not([data-cf],[data-cf] *)){
 display:grid!important;height:auto!important;
 grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;
 gap:var(--s2);justify-items:stretch;
}
.cross-game.stage-landscape header .logo:where(:not([data-cf],[data-cf] *)){justify-self:start;width:100%!important;height:auto!important;aspect-ratio:2.4}
.cross-game.stage-landscape header .wallet:where(:not([data-cf],[data-cf] *)){margin:0!important}
.cross-game.stage-landscape header .board-controls:where(:not([data-cf],[data-cf] *)){justify-self:start}
.cross-game.stage-landscape header .board-controls button:where(:not([data-cf],[data-cf] *)){width:28px!important;height:28px!important}


/* ---------------------------------------------------------------------------
   6. THE CONTROL BAR — exact height, SPIN on the centre line

   Rows are fixed tracks. The status line (message, OPEN BOTH, autoplay stop,
   and on a phone the round total) is the bar's first row, not a separate band
   floating between board and bar.
--------------------------------------------------------------------------- */
body.cross-game footer:where(:not([data-cf],[data-cf] *)){--panel-weight:var(--bar-frame)}
.cross-game footer:where(:not([data-cf],[data-cf] *)){
 position:relative!important;box-sizing:border-box!important;
 display:grid!important;
 grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
 grid-template-rows:var(--spin);
 grid-template-areas:"left spin right";
 align-items:center;
 row-gap:var(--bar-gap)!important;column-gap:var(--s4)!important;
 width:auto!important;max-width:none!important;
 height:var(--h-bar)!important;min-height:0!important;
 left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
 margin:0!important;padding:var(--bar-pad) var(--s3)!important;
 transform:none!important;translate:none!important;
}
.cross-game.stage-mid footer:where(:not([data-cf],[data-cf] *)){
 grid-template-rows:var(--h-betline) var(--spin);
 grid-template-areas:"bet bet bet" "left spin right";
}
.cross-game.stage-portrait footer:where(:not([data-cf],[data-cf] *)),.cross-game.stage-landscape footer:where(:not([data-cf],[data-cf] *)){
 grid-template-rows:var(--h-status) var(--h-betline) var(--spin);
 grid-template-areas:"status status status" "bet bet bet" "left spin right";
}
/* A tall phone's bar is taller than its rows; the rows spread evenly rather
   than pooling the slack at one end. */
.cross-game.stage-portrait footer:where(:not([data-cf],[data-cf] *)){height:var(--h-bar)!important;align-content:center;padding-inline:var(--s2)!important}
.cross-game.stage-landscape footer:where(:not([data-cf],[data-cf] *)){padding-inline:var(--s2)!important}

.cross-game .bar-bet:where(:not([data-cf],[data-cf] *)){grid-area:bet;display:flex;align-items:center;justify-content:center;gap:var(--s3);min-width:0}
.cross-game .bar-left:where(:not([data-cf],[data-cf] *)){grid-area:left;display:flex;align-items:center;justify-content:flex-end;gap:var(--s3);min-width:0}
.cross-game .bar-right:where(:not([data-cf],[data-cf] *)){grid-area:right;display:flex;align-items:center;justify-content:flex-start;gap:var(--s3);min-width:0}
.cross-game.stage-wide .bar-bet:where(:not([data-cf],[data-cf] *)){display:none}
/* Wide bar, mirrored: the two money readouts hold the outer ends, the
   controls you press every spin hug SPIN. */
.cross-game.stage-wide .bar-left:where(:not([data-cf],[data-cf] *)){padding-left:var(--s3)}
.cross-game.stage-wide .bar-right:where(:not([data-cf],[data-cf] *)){padding-right:var(--s3)}
.cross-game.stage-wide .bar-left .stake-control:where(:not([data-cf],[data-cf] *)){margin-right:auto!important}
.cross-game.stage-wide .bar-right .round-summary:where(:not([data-cf],[data-cf] *)){margin-left:auto!important}
.cross-game.stage-mid .bar-bet:where(:not([data-cf],[data-cf] *)){gap:var(--s5)}
.cross-game.stage-portrait .bar-left:where(:not([data-cf],[data-cf] *)),.cross-game.stage-portrait .bar-right:where(:not([data-cf],[data-cf] *)),.cross-game.stage-landscape .bar-left:where(:not([data-cf],[data-cf] *)),.cross-game.stage-landscape .bar-right:where(:not([data-cf],[data-cf] *)){gap:var(--s2)}
.cross-game.stage-portrait .bar-bet:where(:not([data-cf],[data-cf] *)),.cross-game.stage-landscape .bar-bet:where(:not([data-cf],[data-cf] *)){gap:var(--s2)}

/* SPIN: the primary action and the largest control, by a clear margin. The
   disc is self-explanatory; its caption would only cost the bar a row. */
.cross-game footer #spin:where(:not([data-cf],[data-cf] *)){
 grid-area:spin;position:relative!important;
 width:var(--spin)!important;height:var(--spin)!important;
 min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;
 transform:none!important;flex:0 0 auto!important;
}
.cross-game footer #spin .control-caption:where(:not([data-cf],[data-cf] *)),.cross-game footer #spin small:where(:not([data-cf],[data-cf] *)){display:none!important}
.cross-game footer #spin:where(:not([data-cf],[data-cf] *))::after{inset:0!important;width:100%!important;height:100%!important;background-size:contain!important}

/* Medallions: TURBO, AUTO, and on a phone BONUS. Caption under each. */
.cross-game footer :is(#turbo,#auto,#buy-bonus):where(:not([data-cf],[data-cf] *)){
 position:relative!important;left:auto!important;top:auto!important;
 width:var(--medallion)!important;height:var(--medallion)!important;
 min-width:0!important;min-height:0!important;margin:0 0 10px!important;padding:0!important;
 transform:none!important;flex:0 0 auto!important;
}
.cross-game footer :is(#turbo,#auto,#buy-bonus):where(:not([data-cf],[data-cf] *))::after{inset:0!important;width:100%!important;height:100%!important;background-size:contain!important}
.cross-game .control-caption:where(:not([data-cf],[data-cf] *)){
 display:block!important;position:absolute!important;
 left:-20px!important;right:-20px!important;top:100%!important;bottom:auto!important;
 transform:none!important;margin-top:3px;text-align:center!important;z-index:5!important;
 /* One step up from the 9px caption: at 9px this face's hinting opens a gap
    before U ("A UTO", "BON US"). 11-12px renders the words whole. */
 font-size:var(--t-sm)!important;line-height:1!important;white-space:nowrap;letter-spacing:.04em!important;
}

/* The money readouts — one skin (mummies-layout.css), sized to the bar. */
.cross-game .meter:where(:not([data-cf],[data-cf] *)){
 box-sizing:border-box;position:relative;
 display:flex!important;flex-direction:column;align-items:center;justify-content:center;
 gap:1px;text-align:center;min-width:0;width:auto;
 translate:none!important;transform:none!important;
}
.cross-game .meter span:where(:not([data-cf],[data-cf] *)),.cross-game .meter label:where(:not([data-cf],[data-cf] *)){font-size:var(--t-xs);letter-spacing:.14em;color:var(--gold);line-height:1.15}
.cross-game .meter strong:where(:not([data-cf],[data-cf] *)){font-size:var(--t-lg);line-height:1.1;color:var(--ink);white-space:nowrap}
.cross-game .meter small:where(:not([data-cf],[data-cf] *)),.cross-game #bet-context:where(:not([data-cf],[data-cf] *)){font-size:var(--t-xs)!important;letter-spacing:.1em;color:var(--dim);line-height:1.15}
.cross-game .stake-control button:where(:not([data-cf],[data-cf] *)){font-size:0!important}

.cross-game footer .stake-control:where(:not([data-cf],[data-cf] *)){
 display:flex!important;align-items:center;gap:var(--s2)!important;
 width:auto!important;min-width:0!important;margin:0!important;padding:0!important;
 translate:none!important;transform:none!important;flex:0 0 auto!important;
}
.cross-game footer .stake-control button:where(:not([data-cf],[data-cf] *)){
 width:calc(38px * var(--ui))!important;height:calc(38px * var(--ui))!important;
 min-width:0!important;flex:0 0 auto!important;padding:0!important;margin:0!important;
}
.cross-game footer .stake-control .meter:where(:not([data-cf],[data-cf] *)){min-width:calc(100px * var(--ui))!important;padding:var(--s1) var(--s3)!important;margin:0!important}

/* The round total: same skin, one appearance in both of its homes. */
.cross-game .round-summary:where(:not([data-cf],[data-cf] *)){
 position:relative!important;transform:none!important;margin:0!important;
 display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:1px;
 padding:var(--s1) var(--s3)!important;min-height:0!important;height:auto!important;white-space:nowrap;
}
.cross-game .round-summary:where(:not([data-cf],[data-cf] *)){width:auto!important;text-align:center!important}
.cross-game .round-summary>span:where(:not([data-cf],[data-cf] *)){font-size:var(--t-xs);letter-spacing:.14em;color:var(--gold);line-height:1.15}
.cross-game .round-summary strong:where(:not([data-cf],[data-cf] *)){font-size:var(--t-lg)!important;line-height:1.1!important;margin:0!important;color:var(--gold-bright)}
.cross-game .round-summary small:where(:not([data-cf],[data-cf] *)){display:none}

/* --- Compact bet line on a phone (reference 4: one thin bar) ------------------
   Labels sit on the plates' top edges like a fieldset legend, so a plate is
   one text line tall instead of three. */
.cross-game:is(.stage-portrait,.stage-landscape) .bar-bet .meter:where(:not([data-cf],[data-cf] *)),.cross-game:is(.stage-portrait,.stage-landscape) .outcome .round-summary:where(:not([data-cf],[data-cf] *)){
 --panel-weight:5px;
 flex-direction:row!important;align-items:baseline;gap:var(--s1);
 height:var(--h-betline)!important;padding:0 var(--s2)!important;
}
.cross-game:is(.stage-portrait,.stage-landscape) .outcome .round-summary:where(:not([data-cf],[data-cf] *)){
 height:calc(var(--h-status) - 4px)!important;max-height:100%;
 /* centre, not baseline: baseline alignment dropped the value 7px and out of its pill */
 align-items:center!important;
}
.cross-game:is(.stage-portrait,.stage-landscape) .bar-bet .meter:where(:not([data-cf],[data-cf] *)){min-width:calc(78px * var(--ui))!important;justify-content:center}
.cross-game:is(.stage-portrait,.stage-landscape) .bar-bet .meter span:where(:not([data-cf],[data-cf] *)){
 position:absolute;left:50%;top:0;transform:translate(-50%,-55%);
 padding:0 4px;background:#0b2228;border-radius:2px;font-size:var(--t-xs);line-height:1.1;
}
.cross-game:is(.stage-portrait,.stage-landscape) .bar-bet .meter strong:where(:not([data-cf],[data-cf] *)){font-size:var(--t-md)}
.cross-game:is(.stage-portrait,.stage-landscape) #bet-context:where(:not([data-cf],[data-cf] *)){display:none!important}
.cross-game:is(.stage-portrait,.stage-landscape) footer .stake-control button:where(:not([data-cf],[data-cf] *)){width:30px!important;height:30px!important}
.cross-game.stage-landscape footer .stake-control button:where(:not([data-cf],[data-cf] *)){width:26px!important;height:26px!important}
.cross-game:is(.stage-portrait,.stage-landscape) .outcome .round-summary strong:where(:not([data-cf],[data-cf] *)){font-size:var(--t-md)!important;line-height:1!important}

/* --- Status line -------------------------------------------------------------
   One line, always the same height. When the board offers a purchase the
   button says so, and the sentence gives way rather than wrapping. */
.cross-game .outcome:where(:not([data-cf],[data-cf] *)){
 grid-area:status;position:relative!important;box-sizing:border-box;
 display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
 align-items:center;justify-content:center;gap:var(--s3)!important;
 width:auto!important;height:100%!important;min-height:0!important;
 margin:0!important;padding:0 var(--s1)!important;background:none!important;
 box-shadow:0 1px 0 #d8b46a2e;
}
.cross-game .outcome .round-summary:where(:not([data-cf],[data-cf] *)){order:1;flex:0 0 auto}
.cross-game #status:where(:not([data-cf],[data-cf] *)){
 order:2;flex:1 1 0!important;min-width:0!important;position:static!important;
 display:block!important;height:auto!important;margin:0!important;padding:0!important;
 font-size:var(--t-sm)!important;line-height:1.2!important;letter-spacing:.08em;
 text-align:center;color:var(--dim);
 white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;
}
.cross-game .outcome:has(.open-directions:not([hidden])) #status:where(:not([data-cf],[data-cf] *)),.cross-game.auto-active .outcome #status:where(:not([data-cf],[data-cf] *)){display:none!important}
.cross-game .outcome #win-label:where(:not([data-cf],[data-cf] *)){display:none!important}
.cross-game .open-directions:where(:not([data-cf],[data-cf] *)),.cross-game .auto-indicator:where(:not([data-cf],[data-cf] *)){
 order:3;flex:0 0 auto;margin:0 0 0 auto!important;position:static!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 height:calc(var(--h-status) - 4px)!important;max-height:100%;min-height:0!important;min-width:0!important;
 padding:0 var(--s4)!important;
 font:700 var(--t-sm) var(--font)!important;line-height:1!important;
 color:#eff5d4;white-space:nowrap;cursor:pointer;
 background:transparent url(./assets/runtime-mummies/buttons/action.webp) center/100% 100% no-repeat!important;
 border:0!important;box-shadow:none!important;overflow:visible!important;
}
.cross-game .open-directions[hidden]:where(:not([data-cf],[data-cf] *)),.cross-game .auto-indicator[hidden]:where(:not([data-cf],[data-cf] *)){display:none!important}
.cross-game .auto-indicator:where(:not([data-cf],[data-cf] *)){display:none!important}
.cross-game.auto-active .auto-indicator:where(:not([data-cf],[data-cf] *)){display:flex!important}
/* Desktop: the status line is a nameplate centred on the bar's top edge —
   the board's message sits between the board and the controls without
   costing the bar a row. Same skin as every other readout. */
.cross-game:is(.stage-wide,.stage-mid) .outcome:where(:not([data-cf],[data-cf] *)){
 grid-area:auto;position:absolute!important;
 left:50%;top:calc(-1 * var(--bar-frame));transform:translate(-50%,-50%);
 width:auto!important;max-width:calc(100% - 2 * var(--s6))!important;height:24px!important;
 padding:0 var(--s3)!important;z-index:3;
 border:5px solid transparent!important;
 border-image:var(--frame-cabinet) 20% / 5px / 0 stretch!important;
 background:var(--panel-fill)!important;box-shadow:0 2px 6px #0008!important;
}
.cross-game:is(.stage-wide,.stage-mid) #status:where(:not([data-cf],[data-cf] *)){flex:0 1 auto!important;color:var(--ink)}
.cross-game:is(.stage-wide,.stage-mid) .open-directions:where(:not([data-cf],[data-cf] *)),.cross-game:is(.stage-wide,.stage-mid) .auto-indicator:where(:not([data-cf],[data-cf] *)){height:14px!important;margin-left:0!important}
.cross-game:is(.stage-wide,.stage-mid) .outcome:has(.open-directions:not([hidden])) #status:where(:not([data-cf],[data-cf] *)){display:block!important}
/* A small win is announced in the status line itself — reference 3's WIN
   display — on every stage. For its moment it replaces the line's contents
   with one gold plate, rather than washing a flat band behind them. */
.cross-game .outcome:has(.win-celebration)>:not(.win-celebration):where(:not([data-cf],[data-cf] *)){visibility:hidden!important}
.cross-game .outcome .win-celebration:where(:not([data-cf],[data-cf] *)){
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 padding:0!important;margin:0!important;background:none!important;backdrop-filter:none!important;
 transform:none!important;animation:none!important;overflow:hidden!important;z-index:10!important;
}
.cross-game .outcome .win-celebration:where(:not([data-cf],[data-cf] *))::before,.cross-game .outcome .win-celebration:where(:not([data-cf],[data-cf] *))::after{display:none!important}
.cross-game .outcome .win-celebration :is(.win-medallion,.win-compact):where(:not([data-cf],[data-cf] *)){
 position:relative!important;inset:auto!important;
 display:flex!important;flex-direction:row!important;align-items:center!important;
 justify-content:center!important;gap:var(--s2)!important;
 width:auto!important;max-width:100%!important;height:100%!important;min-height:0!important;
 padding:0 var(--s4)!important;margin:0!important;transform:none!important;animation:none!important;
 box-sizing:border-box!important;border:4px solid transparent!important;
 border-image:var(--frame-gold) 20% / 4px / 0 stretch!important;
 background:var(--panel-fill)!important;box-shadow:0 0 14px #e8c07255!important;overflow:hidden!important;
}
.cross-game .outcome .win-celebration span:where(:not([data-cf],[data-cf] *)){font-size:var(--t-sm)!important;letter-spacing:.14em!important;color:var(--gold)!important}
.cross-game .outcome .win-celebration strong:where(:not([data-cf],[data-cf] *)){font-size:var(--t-md)!important;line-height:1!important;white-space:nowrap!important;color:var(--gold-bright)!important}
.cross-game .outcome .win-celebration small:where(:not([data-cf],[data-cf] *)){display:none!important}


/* ---------------------------------------------------------------------------
   7. SIDE PANELS — the roster and the feature column
--------------------------------------------------------------------------- */
.cross-game.stage-wide .character-paytable:where(:not([data-cf],[data-cf] *)){
 position:relative!important;display:flex!important;flex-direction:column;
 box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;
 padding:var(--s2);padding-top:28px;gap:var(--s2);
 transform:none!important;z-index:1;overflow:hidden;
}
.cross-game.stage-wide .character-paytable:where(:not([data-cf],[data-cf] *))::before{
 content:"SYMBOL PAYS";position:absolute;left:0;right:0;top:8px;
 font:800 var(--t-xs)/1 var(--font);letter-spacing:.16em;color:var(--gold);text-align:center;
}
.cross-game.stage-wide .character-paytable>h2:where(:not([data-cf],[data-cf] *)){display:none}
.cross-game.stage-wide.compact-cast .character-paytable:where(:not([data-cf],[data-cf] *)){display:none!important}
/* The toggle lives on the roster's own header line, so it is never loose on
   the page — and survives the roster being hidden, which it must. */
.cross-game.stage-wide .paytable-toggle:where(:not([data-cf],[data-cf] *)){
 display:block;align-self:start;justify-self:end;position:relative;z-index:3;
 margin:4px 10px 0 0;height:18px;padding:0 var(--s2);
 border:1px solid #967b45;border-radius:9px;background:#0d282be6;
 color:#eee3bb;font:var(--t-xs)/1 var(--font);letter-spacing:.1em;cursor:pointer;
}
.cross-game.stage-wide.compact-cast .paytable-toggle:where(:not([data-cf],[data-cf] *)){margin-top:0}

.cross-game .feature-panel:where(:not([data-cf],[data-cf] *)){
 display:flex;flex-direction:column;align-items:stretch;justify-content:space-evenly;
 gap:var(--s3);box-sizing:border-box;padding:var(--s3);padding-top:28px;
 width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;
}
.cross-game .feature-panel:where(:not([data-cf],[data-cf] *))::before{
 content:"BONUS FEATURES";position:absolute;left:0;right:0;top:8px;
 font:800 var(--t-xs)/1 var(--font);letter-spacing:.16em;color:var(--gold);text-align:center;
}
.cross-game .feature-panel #buy-bonus:where(:not([data-cf],[data-cf] *)){
 order:1;position:relative!important;left:auto!important;top:auto!important;
 flex:0 0 auto;align-self:center;
 width:min(100%,calc(128px * var(--ui)))!important;height:calc(128px * var(--ui))!important;
 min-width:0!important;min-height:0!important;margin:0 0 var(--s5)!important;padding:0!important;
 transform:none!important;
}
.cross-game .feature-panel #buy-bonus:where(:not([data-cf],[data-cf] *))::after{inset:0!important;width:100%!important;height:100%!important;background-size:contain!important}
.cross-game .feature-panel #buy-bonus .control-caption:where(:not([data-cf],[data-cf] *)){font-size:var(--t-sm)!important;letter-spacing:.12em!important;margin-top:4px}
.cross-game .feature-panel .feature-list:where(:not([data-cf],[data-cf] *)){order:2}
.cross-game .feature-panel #djinn-pact:where(:not([data-cf],[data-cf] *)){order:3}