/* Colchis frame: every selector is fenced off [data-cf] (gen-css.mjs --fence). */
/* ===========================================================================
   mechanics.css — REX'S CALL, DJINN'S PACT, open gate odds, the buy menu.

   LOAD ORDER: after layout.css, before a11y.css.

   WHAT CHANGED
   ------------
   Both persistent panels used to be `position:fixed`, placed by transcribing
   the stage's own custom properties into coordinates, into "background that
   the verified stage already leaves empty". That is how DJINN'S PACT ended up
   as a 40px bar pinned to the bottom edge of the viewport, clipping its own
   percentage and prize inside its own border box — a defect no geometry gate
   could see, because the clipping was the component's, not the viewport's.

   Neither panel is positioned any more. REX'S CALL is a member of the control
   bar, beside the bet it shapes. DJINN'S PACT is a card in the feature panel,
   with every other bonus entry. Both use the one panel skin from
   mummies-layout.css, so the HUD has two surface treatments in total instead
   of four, and both size to their content, so neither can clip it.
   =========================================================================== */

:root:where(:not([data-cf],[data-cf] *)){
 --mech-ink:var(--ink);
 --mech-dim:var(--dim);
 --mech-gold:var(--gold);
 --mech-bar:var(--green);
}

/* ---------------------------------------------------------------------------
   1. OPEN ODDS ON EVERY GATE

   The gate is now a transparent, cell-aligned hit area over sealed board
   cells (cross-board.css §2), so the quote is simply another item in its flex
   line: no absolute positioning, no reserved padding, nothing that can be
   pushed out of a box.
--------------------------------------------------------------------------- */
.cross-game .gate-odds:where(:not([data-cf],[data-cf] *)){
 position:static;
 display:flex;align-items:center;justify-content:center;
 gap:var(--s1);line-height:1;pointer-events:none;min-width:0;
 font-family:var(--font);
}
.cross-game .cross-gate.left .gate-odds:where(:not([data-cf],[data-cf] *)),
.cross-game .cross-gate.right .gate-odds:where(:not([data-cf],[data-cf] *)),
.cross-game .corner-gate .gate-odds:where(:not([data-cf],[data-cf] *)){flex-direction:column;gap:2px;width:100%}
.cross-game .cross-gate:not(.has-odds) .gate-odds:where(:not([data-cf],[data-cf] *)),
.cross-game .corner-gate:not(.has-odds) .gate-odds:where(:not([data-cf],[data-cf] *)){display:none}

.cross-game .gate-chance:where(:not([data-cf],[data-cf] *)){font-size:var(--t-md);font-weight:800;letter-spacing:.04em;color:var(--gold-bright)}
.cross-game .gate-prize:where(:not([data-cf],[data-cf] *)){font-size:var(--t-sm);font-weight:700;text-decoration:none;color:var(--mech-bar);white-space:nowrap}
.cross-game .gate-bar:where(:not([data-cf],[data-cf] *)){
 display:block;width:clamp(24px,18%,70px);height:4px;border-radius:2px;flex:0 0 auto;
 background:#00000066;box-shadow:inset 0 0 0 1px #ffffff1f;overflow:hidden;
}
.cross-game .cross-gate.left .gate-bar:where(:not([data-cf],[data-cf] *)),
.cross-game .cross-gate.right .gate-bar:where(:not([data-cf],[data-cf] *)),
.cross-game .corner-gate .gate-bar:where(:not([data-cf],[data-cf] *)){width:78%;height:3px}
.cross-game .gate-bar>i:where(:not([data-cf],[data-cf] *)){
 display:block;height:100%;width:0;border-radius:2px;
 background:linear-gradient(90deg,#4f9f76,var(--mech-bar));
}
/* A corner is one cell: the word CORNER is redundant next to the arrow art and
   would only cost the price its legibility. */
.cross-game .corner-gate>span:where(:not([data-cf],[data-cf] *)){display:none}
.cross-game .corner-gate.has-odds small:where(:not([data-cf],[data-cf] *)){display:none}
/* The arm's chance already has a number beside it; the bar is the first thing
   to go when the line is tight, and on a one-cell-tall arm the line is always
   tight. */
.cross-game .cross-gate.top .gate-bar:where(:not([data-cf],[data-cf] *)),.cross-game .cross-gate.bottom .gate-bar:where(:not([data-cf],[data-cf] *)){display:none}
@container board (max-width:430px){.cross-game .corner-gate .gate-bar:where(:not([data-cf],[data-cf] *)){display:none}}


/* ---------------------------------------------------------------------------
   2. THE TWO PERSISTENT PANELS

   One skin, shared with every other readout (mummies-layout.css); these rules
   only say what goes inside, and where each panel's slot is.
--------------------------------------------------------------------------- */
.mech-panel:where(:not([data-cf],[data-cf] *)){
 position:relative;box-sizing:border-box;margin:0;
 display:flex;align-items:center;gap:var(--s2);
 padding:var(--s1) var(--s3);min-width:0;
 font-family:var(--font);color:var(--mech-ink);overflow:visible;
}
.mech-panel[hidden]:where(:not([data-cf],[data-cf] *)){display:none!important}
.mech-title:where(:not([data-cf],[data-cf] *)){
 flex:0 0 auto;font-size:var(--t-xs);font-weight:800;letter-spacing:.16em;
 color:var(--mech-gold);white-space:nowrap;text-transform:uppercase;
}

/* --- REX'S CALL ----------------------------------------------------------- */
#rex-call:where(:not([data-cf],[data-cf] *)){width:auto;max-width:100%}
.rex-call:where(:not([data-cf],[data-cf] *)){flex-direction:column;align-items:stretch;gap:3px;padding:var(--s1) var(--s2)}
.rex-call .mech-title:where(:not([data-cf],[data-cf] *)){text-align:center}
.rex-call .call-options:where(:not([data-cf],[data-cf] *)){display:flex;gap:3px;min-width:0}
.rex-call .call-option:where(:not([data-cf],[data-cf] *)){
 flex:1 1 0;min-width:0;margin:0;padding:3px var(--s2);
 display:flex;align-items:center;justify-content:center;
 font-family:inherit;color:var(--mech-dim);
 background:#04161a99;border:1px solid #3d5a4d;border-radius:4px;cursor:pointer;
}
.rex-call .call-option b:where(:not([data-cf],[data-cf] *)){font-size:var(--t-xs);font-weight:800;letter-spacing:.08em;white-space:nowrap}
.rex-call .call-option:hover:enabled:where(:not([data-cf],[data-cf] *)){color:var(--mech-ink);border-color:#6d9c7f}
.rex-call .call-option.on:where(:not([data-cf],[data-cf] *)){
 color:#0e1c14;background:linear-gradient(140deg,#d8ea9d,#8cc47a);
 border-color:#f0dc9a;box-shadow:0 0 10px #b9e59a55;
}
.rex-call .call-option[aria-disabled="true"]:where(:not([data-cf],[data-cf] *)),
.rex-call .call-option:disabled:where(:not([data-cf],[data-cf] *)){cursor:default;opacity:.55}
.rex-call .call-option[aria-disabled="true"]:where(:not([data-cf],[data-cf] *)){pointer-events:none}

/* On a phone the call is a one-line pill beside the bet, its name on the top
   edge like the bet's — the same compact grammar as reference 4's bet row. */
.cross-game:is(.stage-portrait,.stage-landscape) .rex-call:where(:not([data-cf],[data-cf] *)){
 --panel-weight:5px;flex:1 1 auto;
 height:var(--h-betline);padding:0 var(--s1);justify-content:center;
}
.cross-game:is(.stage-portrait,.stage-landscape) .rex-call .mech-title:where(:not([data-cf],[data-cf] *)){
 position:absolute;left:50%;top:0;transform:translate(-50%,-55%);
 padding:0 4px;background:#0b2228;border-radius:2px;line-height:1.1;
}
.cross-game:is(.stage-portrait,.stage-landscape) .rex-call .call-option:where(:not([data-cf],[data-cf] *)){padding:2px 3px}
.cross-game:is(.stage-portrait,.stage-landscape) .rex-call .call-option b:where(:not([data-cf],[data-cf] *)){letter-spacing:.02em}

/* --- DJINN'S PACT --------------------------------------------------------- */
/* Desktop: a card in the feature column, in a slot of fixed height that holds
   a quiet placeholder until an offer exists. The column never changes size,
   so nothing around it moves when the offer appears. */
.djinn-pact:where(:not([data-cf],[data-cf] *)){
 flex-direction:column;align-items:stretch;gap:var(--s1);
 padding:var(--s2);text-align:center;cursor:pointer;
}
.djinn-pact:hover:enabled:where(:not([data-cf],[data-cf] *)){filter:brightness(1.15)}
.djinn-pact:active:enabled:where(:not([data-cf],[data-cf] *)){filter:brightness(.88)}
.djinn-pact[aria-disabled="true"]:where(:not([data-cf],[data-cf] *)),.djinn-pact:disabled:where(:not([data-cf],[data-cf] *)){cursor:default;opacity:.6}
.djinn-pact[aria-disabled="true"]:where(:not([data-cf],[data-cf] *)){pointer-events:none}
.pact-portrait:where(:not([data-cf],[data-cf] *)){flex:0 0 auto;align-self:center;width:calc(44px * var(--ui));height:calc(44px * var(--ui));display:block}
.pact-portrait>i:where(:not([data-cf],[data-cf] *)){
 display:block;width:100%;height:100%;border-radius:4px;
 background:#0c1c20 center/cover no-repeat;box-shadow:inset 0 0 0 1px #a685cd;
}
.pact-body:where(:not([data-cf],[data-cf] *)){flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
.pact-title:where(:not([data-cf],[data-cf] *)){font-size:var(--t-xs);font-weight:800;letter-spacing:.14em;color:#d9b6ff}
.pact-swap:where(:not([data-cf],[data-cf] *)){font-size:var(--t-xs);color:var(--mech-dim);line-height:1.3;overflow-wrap:anywhere}
.pact-odds:where(:not([data-cf],[data-cf] *)){display:flex;align-items:center;justify-content:center;gap:var(--s1);min-width:0}
.pact-chance:where(:not([data-cf],[data-cf] *)){font-size:var(--t-sm);font-weight:800;color:var(--gold-bright);white-space:nowrap}
.pact-odds .gate-bar:where(:not([data-cf],[data-cf] *)){flex:1 1 20px;min-width:16px;height:4px;width:auto}
.pact-prize:where(:not([data-cf],[data-cf] *)){font-size:var(--t-xs);font-weight:700;text-decoration:none;color:var(--mech-bar);white-space:nowrap}
.pact-price:where(:not([data-cf],[data-cf] *)){flex:0 0 auto;font-size:var(--t-sm);font-weight:800;color:var(--mech-gold)}

.cross-game .feature-panel #djinn-pact:where(:not([data-cf],[data-cf] *)){height:var(--pact-slot,150px);justify-content:center}
.cross-game .feature-panel:has(#djinn-pact[hidden]):where(:not([data-cf],[data-cf] *))::after{
 content:"DJINN'S PACT\A may be offered after a win\A with a Potion Djinn on the board";
 white-space:pre-line;order:3;
 display:flex;align-items:center;justify-content:center;text-align:center;
 height:var(--pact-slot,150px);box-sizing:border-box;padding:var(--s2);
 font:600 var(--t-xs)/1.5 var(--font);letter-spacing:.1em;color:#8e7fa3;
 border:1px dashed #6b557f66;border-radius:4px;
}
.cross-game .feature-list:where(:not([data-cf],[data-cf] *)){
 margin:0;text-align:center;font:700 var(--t-xs)/1.7 var(--font);
 letter-spacing:.14em;color:var(--dim);
}

/* Phone: a medallion beside BONUS — the same round, gold-ringed family as
   every other control in the action row — with its chance as a badge and its
   price and prize as the caption. Fixed size, so an offer appearing can never
   move SPIN or the board. The full wording stays in the accessible name. */
body.cross-game .bar-right #djinn-pact:where(:not([data-cf],[data-cf] *)){
 position:relative;flex:0 0 auto;
 width:var(--medallion);height:var(--medallion);margin:0 0 20px;padding:0;
 border:0!important;border-image:none!important;border-radius:50%!important;
 background:transparent url(./assets/runtime-mummies/button-skin.webp) center/contain no-repeat!important;
 box-shadow:0 0 12px #9a6fd6aa!important;overflow:visible;
}
/* align-self:stretch matters: the base rule centres the portrait, and under
   CSS Box Alignment a centred absolute box shrinks to fit — to 0px here. */
.bar-right #djinn-pact .pact-portrait:where(:not([data-cf],[data-cf] *)){position:absolute;inset:17%;width:auto;height:auto;align-self:stretch;justify-self:stretch}
.bar-right #djinn-pact .pact-portrait>i:where(:not([data-cf],[data-cf] *)){border-radius:50%;box-shadow:inset 0 0 0 1px #c9a4f0}
/* game.css gives every button a square bevel ::before; a medallion has none. */
.bar-right #djinn-pact:where(:not([data-cf],[data-cf] *))::before,.bar-right #djinn-pact:where(:not([data-cf],[data-cf] *))::after{content:none!important;display:none!important}
.bar-right #djinn-pact .pact-title:where(:not([data-cf],[data-cf] *)),
.bar-right #djinn-pact .pact-swap:where(:not([data-cf],[data-cf] *)),
.bar-right #djinn-pact .gate-bar:where(:not([data-cf],[data-cf] *)){display:none}
.bar-right #djinn-pact .pact-body:where(:not([data-cf],[data-cf] *)){position:static}
.bar-right #djinn-pact .pact-odds:where(:not([data-cf],[data-cf] *)){position:static}
.bar-right #djinn-pact .pact-chance:where(:not([data-cf],[data-cf] *)){
 position:absolute;top:-5px;right:-5px;z-index:2;
 padding:1px 4px;border-radius:7px;font-size:var(--t-xs);line-height:1.2;
 color:#1a1206;background:linear-gradient(#ffe9a8,#d9a94a);box-shadow:0 1px 3px #000a;
}
.bar-right #djinn-pact .pact-price:where(:not([data-cf],[data-cf] *)),
.bar-right #djinn-pact .pact-prize:where(:not([data-cf],[data-cf] *)){
 position:absolute;left:50%;transform:translateX(-50%);
 font-size:var(--t-xs);line-height:1.1;white-space:nowrap;text-shadow:0 1px 2px #000;
}
.bar-right #djinn-pact .pact-price:where(:not([data-cf],[data-cf] *)){top:calc(100% + 1px)}
.bar-right #djinn-pact .pact-price:where(:not([data-cf],[data-cf] *))::before{content:"PACT ";color:#d9b6ff;letter-spacing:.08em}
.bar-right #djinn-pact .pact-prize:where(:not([data-cf],[data-cf] *)){top:calc(100% + 11px)}

/* A dialog is modal; nothing behind it may stay hit-testable or on top. */
body:has(dialog[open]) .mech-panel:where(:not([data-cf],[data-cf] *)){opacity:.25;pointer-events:none}


/* ---------------------------------------------------------------------------
   3. THE BUY MENU + the info tables (inside #modal, so no stage geometry)
--------------------------------------------------------------------------- */
#modal .bonus-lede:where(:not([data-cf],[data-cf] *)),#modal .bonus-footnote:where(:not([data-cf],[data-cf] *)){font-size:14px;line-height:1.5;max-width:70ch}
#modal .bonus-offers:where(:not([data-cf],[data-cf] *)){
 display:grid;gap:12px;margin:14px 0;
 grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
#modal .bonus-offer:where(:not([data-cf],[data-cf] *)){
 display:flex;flex-direction:column;align-items:flex-start;gap:6px;
 padding:12px;border:2px solid var(--panel-edge);border-radius:10px;
 background:var(--panel-fill);
}
#modal .bonus-offer h2:where(:not([data-cf],[data-cf] *)){margin:0;font-size:17px;letter-spacing:.5px;color:var(--mech-gold)}
#modal .bonus-price:where(:not([data-cf],[data-cf] *)){font-size:24px;line-height:1;color:var(--mech-ink)}
#modal .bonus-units:where(:not([data-cf],[data-cf] *)){font-size:11px;letter-spacing:1px;color:var(--mech-dim)}
#modal .vol-meter:where(:not([data-cf],[data-cf] *)){display:flex;gap:3px;align-items:flex-end;height:14px}
#modal .vol-meter i:where(:not([data-cf],[data-cf] *)){display:block;width:12px;height:6px;border-radius:2px;background:#ffffff26}
#modal .vol-meter i:nth-child(2):where(:not([data-cf],[data-cf] *)){height:10px}
#modal .vol-meter i:nth-child(3):where(:not([data-cf],[data-cf] *)){height:14px}
#modal .vol-meter i.on:where(:not([data-cf],[data-cf] *)){background:linear-gradient(180deg,var(--mech-gold),#a8762c)}
#modal .bonus-facts:where(:not([data-cf],[data-cf] *)){margin:2px 0;width:100%;font-size:12px}
#modal .bonus-facts>div:where(:not([data-cf],[data-cf] *)){display:flex;justify-content:space-between;gap:8px;padding:2px 0;border-bottom:1px solid #ffffff14}
#modal .bonus-facts dt:where(:not([data-cf],[data-cf] *)){color:var(--mech-dim)}
#modal .bonus-facts dd:where(:not([data-cf],[data-cf] *)){margin:0;font-weight:700;color:var(--mech-ink);text-align:right}
#modal .bonus-honest:where(:not([data-cf],[data-cf] *)){margin:2px 0 6px;font-size:12.5px;line-height:1.45;color:#dfe8d2}
#modal .bonus-offer .action:where(:not([data-cf],[data-cf] *)){width:100%;margin-top:auto}

#modal .mech-table:where(:not([data-cf],[data-cf] *)){width:100%;border-collapse:collapse;margin:10px 0;font-size:13px}
#modal .mech-table caption:where(:not([data-cf],[data-cf] *)){
 text-align:left;padding-bottom:6px;font-weight:800;letter-spacing:1px;color:var(--mech-gold);
}
#modal .mech-table th:where(:not([data-cf],[data-cf] *)),#modal .mech-table td:where(:not([data-cf],[data-cf] *)){
 padding:5px 7px;text-align:left;border-bottom:1px solid #ffffff1f;vertical-align:top;
}
#modal .mech-table thead th:where(:not([data-cf],[data-cf] *)){color:var(--mech-dim);font-size:11px;letter-spacing:.6px;text-transform:uppercase}
#modal .mech-table tbody th:where(:not([data-cf],[data-cf] *)){color:var(--mech-gold);white-space:nowrap}
#modal .pricing-rule:where(:not([data-cf],[data-cf] *)){
 margin:10px 0;padding:9px 11px;border-left:3px solid var(--mech-gold);
 background:#ffffff0d;font-size:14px;line-height:1.5;
}
@media(max-width:560px){
 #modal .mech-table:where(:not([data-cf],[data-cf] *)){font-size:11.5px}
 #modal .mech-table th:where(:not([data-cf],[data-cf] *)),#modal .mech-table td:where(:not([data-cf],[data-cf] *)){padding:4px}
}