/* Colchis frame: every selector is fenced off [data-cf] (gen-css.mjs --fence). */
/* ===========================================================================
   mummies-layout.css — the design tokens for Rex vs Mummies.

   LOAD ORDER: after cross-board.css, before layout.css. Custom properties are
   resolved where they are USED, not where they are declared, so every sheet in
   the build can read these regardless of link order.

   This file is the answer to two of the Owner's defects:

     "four visual treatments in one column"  -> ONE panel skin (§3), with a
       single emphasised variant. Nothing in the HUD may invent a third.
     "no typographic hierarchy"              -> ONE six-step type scale (§2),
       multiplied by a single per-breakpoint --ui factor so the steps stay six
       distinct values at every size instead of drifting into fourteen.

   Art direction is unchanged: dark Egyptian tomb, gold and lapis, the same
   painted frames and portraits. This is proportion and grouping, not a reskin.
   =========================================================================== */

:root:where(:not([data-cf],[data-cf] *)){
 /* ---- 1. palette (unchanged hues, named so they stop being re-typed) ---- */
 --gold:#e8c072;
 --gold-bright:#ffe9a8;
 --gold-dim:#a98846;
 --lapis:#143a4d;
 --ink:#f4e9c5;
 --dim:#9fb8ae;
 --green:#8fe3b0;
 --lime:#e6d080;
 --cyan:#66e3d7;
 --amber:#efd399;
 --metal:#ba913e;

 /* ---- 2. type scale: six steps, ratio ~1.33, one breakpoint multiplier --- */
 --ui:1;
 --t-xs:calc(9px * var(--ui));    /* captions under painted buttons          */
 --t-sm:calc(12px * var(--ui));   /* labels, gate wording, segmented control */
 --t-md:calc(16px * var(--ui));   /* secondary values                        */
 --t-lg:calc(21px * var(--ui));   /* gate "+3", bet value                    */
 --t-xl:calc(28px * var(--ui));   /* balance                                 */
 --t-2xl:calc(37px * var(--ui));  /* the round win — the only hero number    */

 /* ---- 3. spacing scale ---------------------------------------------------*/
 --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
 --gutter:var(--s3);

 /* ---- 4. the ONE panel skin ---------------------------------------------*/
 /* Every readout, every grouped container and every gate tag uses this.
    `--panel-frame` is the only thing that changes for the emphasised state. */
 --frame-cabinet:url(./assets/runtime-mummies/frames/cabinet.webp);
 --frame-gold:url(./assets/runtime-mummies/frames/gold.webp);
 --panel-frame:var(--frame-cabinet);
 /* Opaque: at 95% the bright desert horizon behind the bar bled through as a
    pale band across the status line. */
 --panel-fill:linear-gradient(160deg,#0a1f26,#102c2f);
 --panel-shadow:inset 0 0 22px #04141899, 0 3px 10px #00000055;
 --panel-slice:20% / 10px / 0 stretch;
}

body:where(:not([data-cf],[data-cf] *)){background:#082127;color:var(--ink)}
#loading:where(:not([data-cf],[data-cf] *)){background:radial-gradient(ellipse at 50% 35%,#254840,#071d23 72%)!important}

/* ---------------------------------------------------------------------------
   ONE SKIN, TWO SCALES, ONE EMPHASIS.

   The Owner's defect list: "four visual treatments in one column: heavy gold
   frame, flat grey rectangle, thin outline bar, gradient bar." There is now
   exactly one frame in the HUD — the same carved cabinet plate the symbol
   cards already used — drawn at two scales:

     containers (the control bar, the feature column, the roster)   14px
     readouts   (balance, bet, round win, REX'S CALL)                8px

   and one emphasised state, the gold plate, reserved for a live offer. A
   third treatment is a defect, not a decision:
   tools/browser/05-composition.mjs counts them and fails the build at three.
--------------------------------------------------------------------------- */
.panel:where(:not([data-cf],[data-cf] *)),body.cross-game footer:where(:not([data-cf],[data-cf] *)),body.cross-game .feature-panel:where(:not([data-cf],[data-cf] *)),body.cross-game .character-paytable:where(:not([data-cf],[data-cf] *)),body.cross-game .meter:where(:not([data-cf],[data-cf] *)),body.cross-game .round-summary:where(:not([data-cf],[data-cf] *)),body.cross-game .mech-panel:where(:not([data-cf],[data-cf] *)){
 box-sizing:border-box;
 border:var(--panel-weight,10px) solid transparent!important;
 border-image:var(--panel-frame) 20% / var(--panel-weight,10px) / 0 stretch!important;
 border-radius:0!important;
 background:var(--panel-fill)!important;
 box-shadow:var(--panel-shadow)!important;
 color:var(--ink);
 font-family:var(--font);
 outline:0!important;
}
body.cross-game footer:where(:not([data-cf],[data-cf] *)),body.cross-game .feature-panel:where(:not([data-cf],[data-cf] *)),body.cross-game .character-paytable:where(:not([data-cf],[data-cf] *)){--panel-weight:14px}
body.cross-game .meter:where(:not([data-cf],[data-cf] *)),body.cross-game .round-summary:where(:not([data-cf],[data-cf] *)),body.cross-game .mech-panel:where(:not([data-cf],[data-cf] *)){--panel-weight:8px}
@media(max-width:760px){
 body.cross-game footer:where(:not([data-cf],[data-cf] *)),body.cross-game .feature-panel:where(:not([data-cf],[data-cf] *)),body.cross-game .character-paytable:where(:not([data-cf],[data-cf] *)){--panel-weight:10px}
 body.cross-game .meter:where(:not([data-cf],[data-cf] *)),body.cross-game .round-summary:where(:not([data-cf],[data-cf] *)),body.cross-game .mech-panel:where(:not([data-cf],[data-cf] *)){--panel-weight:7px}
}
/* The one emphasised state: a live, priced offer. */
.panel--lit:where(:not([data-cf],[data-cf] *)),body.cross-game .djinn-pact:where(:not([data-cf],[data-cf] *)){--panel-frame:var(--frame-gold)}
button.round-control:where(:not([data-cf],[data-cf] *))::after{mask-image:none!important;-webkit-mask-image:none!important;background-size:contain!important}