/* @studio/game-ui stylesheet. Colours / fonts / shapes come ONLY from theme tokens (--gu-<token>, src/themes.js); positions and
   sizes come from the layout variables set by createGameUI (--gu-u, --gu-k, --gu-safe-*, --gu-p, --gu-btn, --gu-main, --gu-w-*,
   see src/layout.js layoutVars). The LOOK of a piece is written with :where() (lowest specificity: a game's own CSS beats it);
   its PLACE in an arrangement uses [data-dock="row|columns|stack"] on .gu-frame. Places follow the colleague's mock-up 1:1. */

/* ------------------------------------------------------------------ frame and layers */
html.gu-fullpage,html.gu-fullpage body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
.gu{position:absolute;inset:0;overflow:hidden;background:var(--gu-page,#000);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.gu.gu-whole{position:fixed}
.gu-probe{position:absolute;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.gu-frame{position:absolute;overflow:hidden;background:var(--gu-stage,#000);color:var(--gu-text,#fff);font-family:var(--gu-font,system-ui,sans-serif);
  line-height:1.2;-webkit-user-select:none;user-select:none;box-sizing:border-box;-webkit-font-smoothing:antialiased;
  --gu-p:56px;--gu-btn:48px;--gu-main-d:80px;--gu-pm:48px;--gu-gap:16px;--gu-pad:16px;--gu-pad-x:8px;--gu-tight:8px;--gu-k:1}
.gu-frame *,.gu-frame *::before,.gu-frame *::after{box-sizing:border-box}
.gu-frame[data-window]{border-radius:var(--gu-window-radius,14px);box-shadow:var(--gu-window-shadow,none)}
.gu-scene{position:absolute;inset:0;z-index:0}
.gu-scene>canvas{display:block;width:100%;height:100%}
.gu-hud{position:absolute;inset:0;z-index:10;pointer-events:none}
.gu-layers{position:absolute;inset:0;z-index:20;pointer-events:none}
.gu-overlays{position:absolute;inset:0;z-index:40;pointer-events:none}
.gu-overlays>*{pointer-events:auto}
/* a drop or a sheet is open: the HUD stays live above it (the mock-up keeps the keypad over the panel's hit box) */
.gu-frame[data-live-hud] .gu-hud{z-index:25}
.gu-park{display:none !important}
.gu-frame [hidden]{display:none !important}
.gu-frame button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;margin:0}
.gu-frame button:disabled{cursor:default}
.gu .gu-frame :focus-visible{outline:2px solid var(--gu-focus,#fff);outline-offset:3px}
/* GU-024: a layer box that holds the focus after a mouse / touch open (tabindex -1) never shows a ring */
.gu .gu-frame [tabindex="-1"]:is(.gu-panel,.gu-overlay):focus{outline:none}
.gu-i{display:block;width:1em;height:1em;flex:none;overflow:visible}
.gu-iw{display:inline-grid;place-items:center;line-height:1}

/* ------------------------------------------------------------------ HUD pieces: look */
.gu-dock,.gu-g,.gu-plate{pointer-events:none}
.gu-dock button,.gu-dock .gu-val{pointer-events:auto}
:where(.gu-plate){display:flex;align-items:center;height:var(--gu-p);padding:0 var(--gu-pad-x);background:var(--gu-plate);
  border:1px solid var(--gu-plate-border,transparent);border-radius:calc(var(--gu-p)*var(--gu-radius-k,.34));box-shadow:var(--gu-plate-shadow,none);flex:none}
/* a value: the number on top, the caption with the currency in brackets under it ("2,00" / "BET (€)") */
:where(.gu-val){position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--gu-p)*.05);flex:none;
  padding:0;margin:0;border:0;background:none;color:var(--gu-value);font:inherit;line-height:1;white-space:nowrap;align-self:stretch;
  --gu-slot:64px;width:var(--gu-slot)}
:where(.gu-bet){--gu-slot:var(--gu-w-bet,64px)} :where(.gu-win){--gu-slot:var(--gu-w-win,72px)} :where(.gu-bal){--gu-slot:var(--gu-w-bal,88px)}
:where(.gu-cap){display:block;font-size:max(10px,calc(var(--gu-p)*.19));font-weight:700;letter-spacing:.06em;text-transform:var(--gu-caps,uppercase);color:var(--gu-cap,var(--gu-label))}
:where(.gu-num){display:block;width:100%;text-align:center;font-weight:var(--gu-weight,800);font-variant-numeric:tabular-nums;color:var(--gu-value);
  font-size:min(calc(var(--gu-p)*.36),calc((var(--gu-slot) - 6px)/(var(--gu-n,6)*.56)));line-height:1.1}
:where(.gu-win[data-won]) .gu-num{color:var(--gu-win-text)}
/* a divider between two values of one plate (the layout counts 2 * tight + 2 px for it) */
.gu-plate>.gu-val+.gu-val{margin-left:calc(var(--gu-tight)*2 + 2px)}
.gu-plate>.gu-val+.gu-val::before{content:"";position:absolute;left:calc(-1*var(--gu-tight) - 2px);top:22%;bottom:22%;width:2px;border-radius:1px;background:var(--gu-sep)}
:where(.gu-bet):not(:disabled){cursor:pointer}
@media (hover:hover){:where(.gu-bet):hover:not(:disabled) .gu-num{color:var(--gu-accent)}}
:where(.gu-bet[aria-expanded]) .gu-num{color:var(--gu-accent)}

/* round buttons: menu, turbo, autoplay, bet (the bet panel on phones) */
:where(.gu-btn){position:relative;isolation:isolate;display:grid;place-items:center;flex:none;padding:0;border:0;color:var(--gu-icon);line-height:1;
  transition:transform .08s,background-color .12s,opacity .15s,color .12s}
:where(.gu-round){width:var(--gu-btn);height:var(--gu-btn);min-width:44px;min-height:44px;border-radius:var(--gu-round-radius,50%);background:var(--gu-round);
  box-shadow:var(--gu-plate-shadow,none);font-size:calc(var(--gu-btn)*var(--gu-round-icon,.46))}
[data-img~="round"] :where(.gu-round){background:var(--gu-img-round) center/100% 100% no-repeat}
:where(.gu-round.on){background:var(--gu-accent);color:var(--gu-on-accent)}
/* the autoplay button shows the rounds left inside it while autoplay runs (the mock-up's number on the autoplay button) */
:where(.gu-badge){position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--gu-btn)*.34);font-weight:900;font-variant-numeric:tabular-nums;color:inherit}
.gu-badge:empty{display:none}
.gu-auto[data-count]>.gu-i{display:none}
/* − / +: a thin ring in a hit box as tall as the plate */
:where(.gu-pm){width:var(--gu-pm);height:var(--gu-p);min-width:44px;min-height:44px;background:none;font-size:calc(var(--gu-p)*.34)}
:where(.gu-pm)::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:calc(var(--gu-p)*.62);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:var(--gu-round-radius,50%);border:2px solid var(--gu-ring);transition:border-color .12s}
/* the main button: dark face, a thin rim, a thick accent ring; icon + caption, or the autoplay counter */
:where(.gu-main){position:relative;isolation:isolate;display:grid;place-items:center;flex:none;padding:0;border:0;border-radius:50%;
  width:var(--gu-main-d);height:var(--gu-main-d);min-width:64px;min-height:64px;background:var(--gu-main);color:var(--gu-main-text);
  box-shadow:inset 0 0 0 calc(var(--gu-main-d)*.045) var(--gu-main),inset 0 0 0 calc(var(--gu-main-d)*.105) var(--gu-main-ring),var(--gu-plate-shadow,none);
  transition:transform .08s,background-color .12s,opacity .15s,filter .12s}
:where(.gu-main-c){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--gu-main-d)*.03);pointer-events:none}
/* the icon alone: the two arrows (spin), skip or stop, about half of the diameter; a caption only for "start autoplay N" */
:where(.gu-main-i){font-size:calc(var(--gu-main-d)*var(--gu-main-icon,.52));line-height:0;transform-origin:50% 50%}
:where(.gu-main-t){font-weight:800;font-size:calc(var(--gu-main-d)*.13);letter-spacing:.03em;text-transform:var(--gu-caps,uppercase);white-space:nowrap;transform-origin:50% 50%}
.gu-main-t:empty{display:none}
:where(.gu-main[data-mode="stop"],.gu-main[data-mode="skip"]) .gu-main-i{font-size:calc(var(--gu-main-d)*var(--gu-main-icon,.52)*.8)}
/* a round is played: the arrows turn - an ease-in start (one turn), then a steady turn per .35 s; the end of the round eases
   them out from where they are (JS sets --gu-a0). The button is inactive but not dimmed: it says "the game is going". */
.gu-main[data-mode="spinning"] .gu-main-i{animation:gu-rot-in .7s cubic-bezier(.5,0,.75,.5),gu-rot .35s linear .7s infinite}
.gu-main .gu-main-i.gu-rot-out{animation:gu-rot-out .8s cubic-bezier(.2,.6,.35,1)}
.gu-frame .gu-main[data-mode="spinning"]:disabled{opacity:1}
@keyframes gu-rot-in{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes gu-rot{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* ends on --gu-a1, a multiple of 180° (the arrows are symmetric by 180°): the resting icon at 0° looks the same (GU-010) */
@keyframes gu-rot-out{from{transform:rotate(var(--gu-a0,0deg))}to{transform:rotate(var(--gu-a1,360deg))}}
@media (prefers-reduced-motion:reduce){.gu-main[data-mode="spinning"] .gu-main-i{opacity:.5}}
:where(.gu-main-n){display:none;font-weight:800;font-size:calc(var(--gu-main-d)*.3);line-height:1;font-variant-numeric:tabular-nums}
.gu-main[data-count] .gu-main-n{display:block}
.gu-main[data-count] .gu-main-i{display:none}
:where(.gu-main[data-mode="stop"],.gu-main[data-mode="skip"]){background:var(--gu-main-stop)}
:where(.gu-main[data-mode="stop"]) .gu-main-t,:where(.gu-main[data-mode="skip"]:not(:disabled)) .gu-main-t{color:var(--gu-accent)}
/* phones: a number chosen in the autoplay panel turns the main button into "start autoplay N" */
:where(.gu-main[data-mode="autostart"]){background:var(--gu-accent);color:var(--gu-on-accent);animation:gu-pulse 1.6s ease-in-out infinite}
[data-img~="main"] :where(.gu-main){background:var(--gu-img-main) center/100% 100% no-repeat;box-shadow:none;border-radius:0}
[data-img~="mainStop"] :where(.gu-main[data-mode="stop"],.gu-main[data-mode="skip"]){background:var(--gu-img-mainStop) center/100% 100% no-repeat}
.gu-frame[data-img~="main"] .gu-main,.gu-frame[data-img~="main"] .gu-main:hover{background-color:transparent}
/* "start autoplay N" with a painted main button: the same accent disc as the generic face (on-accent text, round pulse), not
   the theme's picture with accent-text colours on it (GU-014) */
.gu-frame[data-img~="main"] .gu-main[data-mode="autostart"],.gu-frame[data-img~="main"] .gu-main[data-mode="autostart"]:hover{
  background:var(--gu-accent);color:var(--gu-on-accent);border-radius:50%}
/* optional painted states (0.3.4, IMAGES mainPressed / mainDisabled / mainStopPressed / mainStopDisabled / roundPressed /
   roundDisabled): a picture per state instead of the CSS state. A round that turns keeps the normal face (inactive, not dimmed). */
.gu-frame[data-img~="mainPressed"] .gu-main:active:not(:disabled):not([data-mode="stop"]):not([data-mode="skip"]):not([data-mode="autostart"]),
.gu-frame[data-img~="mainPressed"] .gu-main[data-force="active"]:not([data-mode="stop"]):not([data-mode="skip"]):not([data-mode="autostart"]){background-image:var(--gu-img-mainPressed)}
.gu-frame[data-img~="mainDisabled"] .gu-main:disabled:not([data-mode="spinning"]):not([data-mode="stop"]):not([data-mode="skip"]):not([data-mode="autostart"]){background-image:var(--gu-img-mainDisabled);opacity:1}
.gu-frame[data-img~="mainStopPressed"] .gu-main:is([data-mode="stop"],[data-mode="skip"]):active:not(:disabled),
.gu-frame[data-img~="mainStopPressed"] .gu-main:is([data-mode="stop"],[data-mode="skip"])[data-force="active"]{background-image:var(--gu-img-mainStopPressed)}
.gu-frame[data-img~="mainStopDisabled"] .gu-main:is([data-mode="stop"],[data-mode="skip"]):disabled{background-image:var(--gu-img-mainStopDisabled);opacity:1}
/* painted round faces: no CSS face colour behind the picture; hover brightens, selected shows the pressed face and an accent glyph */
.gu-frame[data-img~="round"] .gu-round,.gu-frame[data-img~="round"] .gu-round:hover{background-color:transparent}
@media (hover:hover){.gu-frame[data-img~="round"] .gu-round:hover:not(:disabled){filter:brightness(1.12)}}
/* selected (turbo on, autoplay running, menu open): the pressed face, an accent glyph, an accent ring and a strong glow, so it reads
   at a glance next to the normal faces (QA 0.3.4) */
.gu-frame[data-img~="round"] .gu-round.on{color:var(--gu-accent);box-shadow:0 0 0 2px var(--gu-accent),0 0 16px 5px var(--gu-buy-glow)}
.gu-frame[data-img~="roundPressed"] .gu-round:active:not(:disabled),.gu-frame[data-img~="roundPressed"] .gu-round.on,
.gu-frame[data-img~="roundPressed"] .gu-round[data-force="active"]{background-image:var(--gu-img-roundPressed)}
.gu-frame[data-img~="roundDisabled"] .gu-round:disabled{background-image:var(--gu-img-roundDisabled);opacity:1}
/* round-time ring (features.minRoundMs with features.skip: skip is off until the ring is full) */
.gu-main-ring{position:absolute;inset:0;display:none;pointer-events:none}
.gu-main[data-ring] .gu-main-ring{display:block}
.gu-main-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.gu-main-ring circle{fill:none;stroke:var(--gu-main-progress);stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100}
.gu-main.gu-ringgo .gu-main-ring circle{animation:gu-ring var(--gu-ring-ms,2500ms) linear forwards}
@keyframes gu-ring{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
/* the feature-buy button (mock-up HudBuyButton; owner 2026-10-16: a ROUNDED RECTANGLE, not round): a cart and "BUY", an accent
   rim and glow, no price. Size from the layout (--gu-w-buy × --gu-h-buy: as tall as the plates / buttons of its row); corners
   --gu-buy-radius-k of its height (the theme's; not a full pill). Cart + caption in one line; in the narrow left column of
   844×390 the cart over the caption (a tile). The caption is fitted by JS (src/fit.js fitBuyLabel): never smaller than the bet
   caption, then an ellipsis; the cart always stays inside. */
:where(.gu-buy){position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:calc(var(--gu-h-buy,56px)*.14);flex:none;
  width:var(--gu-w-buy,120px);height:var(--gu-h-buy,56px);min-width:44px;min-height:44px;padding:0 9px;border:0;
  border-radius:calc(var(--gu-h-buy,56px)*var(--gu-buy-radius-k,.3));overflow:hidden;
  background:var(--gu-plate);color:var(--gu-text);box-shadow:inset 0 0 0 2px var(--gu-accent),0 0 14px var(--gu-buy-glow),var(--gu-plate-shadow,none);
  font-weight:var(--gu-weight,800);transition:transform .08s,background-color .12s,opacity .15s}
[data-img~="buy"] :where(.gu-buy){background:var(--gu-img-buy) center/100% 100% no-repeat;box-shadow:none}
:where(.gu-buy-i){flex:none;color:var(--gu-accent);font-size:calc(var(--gu-h-buy,56px)*.42);line-height:0}
:where(.gu-buy-t){flex:none;min-width:0;font-size:calc(var(--gu-h-buy,56px)*.3);line-height:1.1;text-transform:var(--gu-caps,uppercase);letter-spacing:.04em;white-space:nowrap}
/* 844×390 (and a desktop window too small for the row): a tile in the narrow left side, the cart over the caption */
.gu-frame[data-dock="columns"] .gu-buy{flex-direction:column;gap:calc(var(--gu-h-buy,64px)*.06)}
.gu-frame[data-dock="columns"] .gu-buy-i{font-size:calc(var(--gu-h-buy,64px)*.4)}
.gu-frame[data-dock="columns"] .gu-buy-t{font-size:calc(var(--gu-h-buy,64px)*.2)}
.gu-sp{display:block;flex:none;width:var(--gu-btn);height:var(--gu-btn);visibility:hidden}

/* states of every HUD button: hover lighter, pressed 0.94, disabled 0.4 (selected = .on, focus = ring) */
@media (hover:hover){
  :where(.gu-round):hover:not(:disabled):not(.on){background-color:var(--gu-round-hover)}
  :where(.gu-pm):hover:not(:disabled)::before{border-color:var(--gu-ring-hover)}
  :where(.gu-main):hover:not(:disabled){background-color:var(--gu-main-hover);filter:brightness(1.06)}
  :where(.gu-buy):hover:not(:disabled){background-color:var(--gu-plate-hover)}
  :where(.gu-round.on):hover:not(:disabled){filter:brightness(1.1)}
}
:where(.gu-btn,.gu-main,.gu-buy):active:not(:disabled){transform:scale(.94)}
/* style-guide hooks: data-force="hover|active|focus" shows a state without a pointer (demo/components.html) */
:where(.gu-round)[data-force="hover"]:not(.on){background-color:var(--gu-round-hover)}
:where(.gu-pm)[data-force="hover"]::before{border-color:var(--gu-ring-hover)}
:where(.gu-main)[data-force="hover"]{background-color:var(--gu-main-hover);filter:brightness(1.06)}
:where(.gu-buy)[data-force="hover"]{background-color:var(--gu-plate-hover)}
:where(.gu-tab)[data-force="hover"]{background:var(--gu-input);color:var(--gu-text)}
:where(.gu-btn,.gu-main,.gu-buy)[data-force="active"]{transform:scale(.94)}
.gu-frame [data-force="focus"]{outline:2px solid var(--gu-focus,#fff);outline-offset:3px}
/* inactive (owner, 0.3.4): NEVER opacity on the element (it let the plate, its edge and the shadows show through the face).
   The face stays solid (its usual colour; with the glass, the usual glass), the glyph turns icon-off, the rings turn the muted
   main-ring-off, the shadows / glows go away. Painted faces: their mainDisabled / roundDisabled picture, else the picture greyed. */
:where(.gu-btn,.gu-buy,.gu-val):disabled{color:var(--gu-icon-off)}
:where(.gu-round):disabled{box-shadow:none}
:where(.gu-pm):disabled::before{border-color:var(--gu-main-ring-off)}
:where(.gu-buy):disabled{box-shadow:inset 0 0 0 2px var(--gu-main-ring-off)}
:where(.gu-buy):disabled .gu-buy-i{color:var(--gu-icon-off)}
.gu-frame:not([data-img~="main"]) .gu-main:disabled:not([data-mode="spinning"]){color:var(--gu-icon-off);
  box-shadow:inset 0 0 0 calc(var(--gu-main-d)*.045) var(--gu-main),inset 0 0 0 calc(var(--gu-main-d)*.105) var(--gu-main-ring-off)}
.gu-frame[data-img~="main"]:not([data-img~="mainDisabled"]) .gu-main:disabled:not([data-mode="spinning"]){filter:grayscale(.85) brightness(.7)}
.gu-frame[data-img~="round"]:not([data-img~="roundDisabled"]) .gu-round:disabled{filter:grayscale(.85) brightness(.7)}
/* a round is being played: the bet plate's numbers dim a little (the plate itself stays as it is, nothing shows through) */
.gu-frame:is([data-state="playing"],[data-auto],[data-fs]) .gu-plate-bet :is(.gu-num,.gu-cap){opacity:.72}

/* top strip (clock, the game's status), the free spins plaque and the message line */
.gu-top{position:absolute;left:calc(var(--gu-safe-l) + 12px);right:calc(var(--gu-safe-r) + 12px);top:calc(var(--gu-safe-t) + 6px);display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none}
.gu-top>*{pointer-events:auto}
/* the clock never covers a panel's head or its × (owner, 0.3.6): on phones / tablets every sheet, page and window starts at the
   top edge, so the clock steps aside while one is open (the drops under the HUD buttons leave it); desktop windows are centred
   below it */
.gu-frame:not([data-dock="row"])[data-layer]:not([data-layer="drop"]) .gu-clock{visibility:hidden}
/* 844×390: the right column of buttons starts at the top edge, so the clock sits left of it, not over its top button */
.gu-frame[data-dock="columns"] .gu-top{right:calc(var(--gu-safe-r) + var(--gu-side) + 4px)}
.gu-clock{margin-left:auto;font-size:calc(13px*var(--gu-k));font-weight:700;color:var(--gu-muted);text-shadow:var(--gu-text-shadow);font-variant-numeric:tabular-nums}
:where(.gu-fsplaque){position:absolute;left:50%;top:calc(var(--gu-safe-t) + 12px*var(--gu-k));transform:translateX(-50%);padding:calc(7px*var(--gu-k)) calc(16px*var(--gu-k));
  border-radius:999px;background:var(--gu-plate);border:1px solid var(--gu-plate-border,transparent);box-shadow:var(--gu-plate-shadow,none);color:var(--gu-text);
  font-weight:800;font-size:calc(15px*var(--gu-k));letter-spacing:.04em;text-transform:var(--gu-caps,uppercase);white-space:nowrap;font-variant-numeric:tabular-nums;animation:gu-in .2s}
.gu-msg{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--gu-safe-b) + var(--gu-zone,100px) + 10px);max-width:90%;padding:8px 16px;border-radius:999px;
  background:var(--gu-plate);color:var(--gu-text);font-weight:700;font-size:calc(14px*var(--gu-k));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;animation:gu-in .18s}
.gu-frame[data-dock="columns"] .gu-msg{bottom:calc(var(--gu-safe-b) + var(--gu-strip-h) + 10px)}
/* free spins granted: the dialog is over the game, the bottom panel is not shown (mock-up board) */
.gu-frame[data-grant] .gu-dock,.gu-frame[data-grant] .gu-msg{visibility:hidden}

/* ------------------------------------------------------------------ ROW (desktop): Menu | Buy | − Bet + | Turbo SPIN Autoplay | Win | Balance */
.gu-frame[data-dock="row"] .gu-dock{position:absolute;left:50%;bottom:calc(var(--gu-safe-b) + var(--gu-pad));transform:translateX(-50%);display:flex;align-items:center;gap:var(--gu-gap)}
.gu-frame[data-dock="row"] .gu-g{display:flex;align-items:center;gap:var(--gu-gap)}
.gu-frame[data-dock="row"] .gu-g-left{width:var(--gu-side);justify-content:flex-end}
.gu-frame[data-dock="row"] .gu-g-left>.gu-menu{margin-right:auto}
/* without the buy feature the menu stands right next to the bet (the mock-up's no-buyfeature offsets) */
.gu-frame[data-dock="row"]:not([data-buy]) .gu-g-left>.gu-menu{margin-right:0}
.gu-frame[data-dock="row"] .gu-g-right{width:var(--gu-side);justify-content:flex-start}
.gu-frame[data-dock="row"] .gu-g-center{width:var(--gu-w-center);justify-content:center}
.gu-frame[data-dock="row"][data-fit~="flow"] .gu-g-left,.gu-frame[data-dock="row"][data-fit~="flow"] .gu-g-right{width:auto}
.gu-frame[data-dock="row"][data-fit~="flow"] .gu-g-left>.gu-menu{margin-right:0}
.gu-frame[data-dock="row"] .gu-plate-bet{width:var(--gu-w-betplate)}
.gu-frame[data-dock="row"] .gu-plate-money{width:var(--gu-w-money)}

/* ------------------------------------------------------------------ STACK (portrait): Buy / Menu Turbo SPIN Autoplay Bet / Bet | Win | Balance */
.gu-frame[data-dock="stack"] .gu-dock{position:absolute;left:calc(var(--gu-safe-l) + var(--gu-pad));right:calc(var(--gu-safe-r) + var(--gu-pad));bottom:calc(var(--gu-safe-b) + var(--gu-pad));
  display:flex;flex-direction:column;gap:var(--gu-row-gap)}
.gu-frame[data-dock="stack"] .gu-g{display:flex;align-items:center;gap:var(--gu-gap)}
.gu-frame[data-dock="stack"] .gu-g-r0{justify-content:center}
.gu-frame[data-dock="stack"] .gu-g-r1{justify-content:space-between}
.gu-frame[data-dock="stack"] .gu-plate-money{width:var(--gu-w-money)}
.gu-frame[data-dock="stack"] .gu-sp{width:var(--gu-btn)}

/* ------------------------------------------------------------------ COLUMNS (phone sideways): one column at the right + money strip */
.gu-frame[data-dock="columns"] .gu-dock{position:absolute;left:var(--gu-safe-l);right:var(--gu-safe-r);top:var(--gu-safe-t);bottom:var(--gu-safe-b)}
.gu-frame[data-dock="columns"] .gu-g-colL,.gu-frame[data-dock="columns"] .gu-g-colR{position:absolute;top:0;bottom:var(--gu-strip-h);width:var(--gu-side);display:flex;flex-direction:column;align-items:center;padding:var(--gu-pad) 0}
.gu-frame[data-dock="columns"] .gu-g-colL{left:0;justify-content:flex-end}
.gu-frame[data-dock="columns"] .gu-g-colR{right:0;justify-content:center;gap:var(--gu-gap)}
.gu-frame[data-dock="columns"] .gu-g-strip{position:absolute;left:0;right:0;bottom:0;height:var(--gu-strip-h);display:flex;justify-content:center;align-items:center;gap:calc(28px*var(--gu-u));
  background:var(--gu-strip);padding:0 var(--gu-side);
  /* GU-029: a flat dark floor under the strip's gradient (an inset shadow, so any strip value works), so its captions keep
     >= 4.5:1 over white game art without the text-shadow */
  box-shadow:inset 0 0 0 999px var(--gu-strip-floor,rgba(0,0,0,.35))}
.gu-frame[data-dock="columns"] .gu-g-strip::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--gu-sep);opacity:.6}
/* in the strip the caption goes first: "BET (€) 2,00" */
.gu-frame[data-dock="columns"] .gu-g-strip .gu-val{width:auto;flex-direction:row;align-items:baseline;gap:6px;align-self:center;text-shadow:var(--gu-text-shadow)}
.gu-frame[data-dock="columns"] .gu-g-strip .gu-cap{order:-1;font-size:calc(11px*var(--gu-u))}
.gu-frame[data-dock="columns"] .gu-g-strip .gu-num{width:auto;font-size:calc(15px*var(--gu-u))}
/* the bet amount is a button: its own box is 44 px high (and at least 44 wide), the text stays small */
.gu-frame[data-dock="columns"] .gu-g-strip .gu-bet{min-height:44px;min-width:44px;padding:0 6px;align-items:center}
.gu-frame[data-dock="columns"][data-layer="sheet"] .gu-g-colL{visibility:hidden} /* the left panel covers the buy corner */

/* ------------------------------------------------------------------ HUD 'bar': the same arrangement inside a solid bottom bar
   (the mock-up's keypadUI). Plates are placed by JS from layout.plates; the look is the theme's bar tokens: a soft vertical
   gradient, a thin light edge towards the game, a shadow on the game, a blur of the game under it. */
.gu-bar{position:absolute;inset:0;pointer-events:none}
:where(.gu-barplate){position:absolute;pointer-events:auto;background:var(--gu-bar);-webkit-backdrop-filter:blur(var(--gu-hud-blur,0px)) saturate(var(--gu-glass-saturate,1));backdrop-filter:blur(var(--gu-hud-blur,0px)) saturate(var(--gu-glass-saturate,1));
  box-shadow:inset 0 1px 0 var(--gu-bar-edge),var(--gu-bar-shadow,none)}
:where(.gu-barplate-side){box-shadow:inset 1px 0 0 var(--gu-bar-edge),var(--gu-bar-shadow,none)}
:where(.gu-barplate-tab){border-top-right-radius:var(--gu-radius);box-shadow:inset 0 1px 0 var(--gu-bar-edge),inset -1px 0 0 var(--gu-bar-edge),var(--gu-bar-shadow,none)}
.gu-frame[data-grant] .gu-bar{visibility:hidden}
.gu-frame[data-dock="columns"][data-layer="sheet"] .gu-barplate-tab{visibility:hidden}
/* fields and buttons on the bar: darker inset pills, lighter round buttons (enough contrast on the bar's own colour) */
.gu-frame[data-hud="bar"] .gu-dock .gu-plate{background:var(--gu-bar-field);border:0;box-shadow:inset 0 0 0 1px var(--gu-bar-field-border);border-radius:calc(var(--gu-p)*var(--gu-bar-radius-k,.5))}
.gu-frame[data-hud="bar"]:not([data-img~="round"]) .gu-dock .gu-round:not(.on){background-color:var(--gu-bar-round);box-shadow:inset 0 0 0 1px var(--gu-bar-field-border)}
@media (hover:hover){.gu-frame[data-hud="bar"]:not([data-img~="round"]) .gu-dock .gu-round:hover:not(:disabled):not(.on){background-color:var(--gu-bar-round-hover)}}
.gu-frame[data-hud="bar"]:not([data-img~="round"]) .gu-dock .gu-round[data-force="hover"]:not(.on){background-color:var(--gu-bar-round-hover)}
/* desktop: one row on the bar's centre line; every control is one height; the main button rests on the bar's bottom inset
   and rises above its top edge; win and balance are two fields; BUY is a wide pill "cart BUY" */
.gu-frame[data-hud="bar"][data-dock="row"] .gu-dock{bottom:calc(var(--gu-safe-b) + var(--gu-bar-py));height:var(--gu-p);gap:var(--gu-group-gap)}
.gu-frame[data-hud="bar"][data-dock="row"] .gu-g{height:var(--gu-p)}
.gu-frame[data-hud="bar"][data-dock="row"] .gu-g-center>.gu-main{align-self:flex-end;margin-bottom:calc(var(--gu-main-inset) - var(--gu-bar-py))}
.gu-frame[data-hud="bar"][data-dock="row"] .gu-plate-bet{padding:0 var(--gu-pad-pm)}
.gu-frame[data-hud="bar"][data-dock="row"] .gu-plate-win{width:var(--gu-w-winp)}
.gu-frame[data-hud="bar"][data-dock="row"] .gu-plate-bal{width:var(--gu-w-balp)}
.gu-frame[data-hud="bar"][data-dock="row"] .gu-plate-win,.gu-frame[data-hud="bar"][data-dock="row"] .gu-plate-bal{justify-content:center}
/* BUY on the bar: the same rounded rectangle (corners --gu-buy-radius-k, not the fields' pill), on the bar's field face */
.gu-frame[data-hud="bar"][data-dock="row"] .gu-buy:not(:disabled){box-shadow:inset 0 0 0 2px var(--gu-accent),0 0 12px var(--gu-buy-glow)}
/* GU-026: disabled on the bar = the common disabled look (muted rim, no glow) */
.gu-frame[data-hud="bar"][data-dock="row"] .gu-buy:disabled{box-shadow:inset 0 0 0 2px var(--gu-main-ring-off)}
.gu-frame[data-hud="bar"][data-dock="row"]:not([data-img~="buy"]) .gu-buy:not(.on){background-color:var(--gu-bar-field)}
/* portrait: the bar holds the button row and the money field; every button of the row on one line, the main button rises
   above the bar; BUY stays centred above the main button (mock-up place), just over the bar */
.gu-frame[data-hud="bar"][data-dock="stack"] .gu-dock{bottom:calc(var(--gu-safe-b) + var(--gu-bar-pb))}
/* sideways: the money strip is the bottom of the bar, the column sits on a plate along the right edge, BUY on a tab */
.gu-frame[data-hud="bar"][data-dock="columns"] .gu-g-strip{background:none;box-shadow:none}
.gu-frame[data-hud="bar"][data-dock="columns"] .gu-g-strip::before{display:none}
.gu-frame[data-hud="bar"][data-dock="columns"] .gu-g-strip .gu-val{text-shadow:none}

/* ------------------------------------------------------------------ layers: scrim, panels, dialogs */
:where(.gu-scrim){position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--gu-scrim);pointer-events:auto;animation:gu-in .16s ease-out;
  padding:max(8px,var(--gu-safe-t)) max(8px,var(--gu-safe-r)) max(8px,var(--gu-safe-b)) max(8px,var(--gu-safe-l))}
:where(.gu-panel){position:relative;display:flex;flex-direction:column;max-height:100%;max-width:100%;overflow:hidden;color:var(--gu-text);
  background:var(--gu-panel) var(--gu-img-panelBg,none) center/cover;border:1px solid var(--gu-panel-border);border-radius:var(--gu-radius);box-shadow:var(--gu-panel-shadow);
  -webkit-backdrop-filter:blur(var(--gu-panel-blur,0px)) saturate(var(--gu-glass-saturate,1));backdrop-filter:blur(var(--gu-panel-blur,0px)) saturate(var(--gu-glass-saturate,1));font-size:calc(15px*var(--gu-k));-webkit-user-select:text;user-select:text}
:where(.gu-panel-head){position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:calc(52px*var(--gu-k));padding:4px 56px;background:var(--gu-panel-head);box-shadow:0 8px 16px -12px rgba(0,0,0,.6)} /* 0.3.4: a soft shadow instead of a hard rule */
:where(.gu-panel-title){min-width:0;margin:0;font-family:var(--gu-font-display,inherit);font-size:calc(17px*var(--gu-k));font-weight:800;letter-spacing:.06em;text-transform:var(--gu-caps,uppercase);
  text-align:center;line-height:1.15;overflow-wrap:anywhere}
:where(.gu-x){position:absolute;right:8px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--gu-muted);font-size:22px}
@media (hover:hover){:where(.gu-x):hover{color:var(--gu-text);background:var(--gu-input)}}
:where(.gu-panel-body){flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(12px*var(--gu-k)) calc(16px*var(--gu-k));
  scrollbar-width:thin;scrollbar-color:var(--gu-accent) transparent}
:where(.gu-panel-foot){display:flex;gap:10px;padding:calc(10px*var(--gu-k)) calc(16px*var(--gu-k)) calc(14px*var(--gu-k));border-top:1px solid var(--gu-panel-border)}
:where(.gu-act){position:relative;overflow:hidden;flex:1;min-height:max(44px,calc(50px*var(--gu-k)));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:6px 14px;
  border-radius:var(--gu-radius-btn);border:1px solid var(--gu-panel-border);background:var(--gu-input);color:var(--gu-text);font-weight:800;font-size:calc(15px*var(--gu-k));
  letter-spacing:.04em;text-transform:var(--gu-caps,uppercase);transition:transform .08s,filter .12s,opacity .15s}
:where(.gu-act-s){font-size:.75em;font-weight:600;text-transform:none;letter-spacing:0;opacity:.85}
:where(.gu-act.gu-primary){background:var(--gu-accent);border-color:var(--gu-accent);color:var(--gu-on-accent)}
@media (hover:hover){:where(.gu-act):hover:not(:disabled){filter:brightness(1.12)}}
:where(.gu-act):active:not(:disabled){transform:scale(.97)}
:where(.gu-act):disabled{color:var(--gu-icon-off);background:var(--gu-input);border-color:var(--gu-panel-border);box-shadow:none} /* no opacity on inactive controls (owner, 0.3.4) */

/* drop: right above its HUD button (left / bottom set by JS), no dimming */
.gu-scrim-drop{background:none;padding:0;animation:none}
.gu-drop{position:absolute;animation:gu-up .16s ease-out;font-size:calc(15px*var(--gu-k))}
.gu-drop .gu-panel-body{padding:6px;overflow:visible}
/* sheet: phones; from the top upright, a left panel sideways (× on the left); no dimming */
.gu-scrim-sheet{background:none}
.gu-frame[data-dock="stack"] .gu-scrim-sheet{align-items:flex-start;padding:0}
.gu-frame[data-dock="stack"] .gu-sheet{width:100%;max-height:70%;border-radius:0 0 var(--gu-radius) var(--gu-radius);border-top:0;padding-top:var(--gu-safe-t);animation:gu-down .2s ease-out}
.gu-frame[data-dock="columns"] .gu-scrim-sheet{justify-content:flex-start;align-items:stretch;padding:0 0 calc(var(--gu-safe-b) + var(--gu-strip-h)) 0}
/* 844x390 (bet-phone-landscape, autoplay-phone-landscape): a layer across the whole width up to the HUD column, the title
   across its top, × at the left, the field in the middle, the limits arrow in a narrow strip at the right; − and + under the number */
.gu-frame[data-dock="columns"] .gu-sheet{width:calc(100% - var(--gu-side) - var(--gu-safe-r));max-width:none;border-radius:0 0 var(--gu-radius) 0;border-left:0;border-top:0;
  padding-left:var(--gu-safe-l);animation:gu-right .2s ease-out}
.gu-frame[data-dock="columns"] .gu-sheet .gu-stepper{flex-wrap:wrap;justify-content:center;row-gap:10px;column-gap:24px}
.gu-frame[data-dock="columns"] .gu-sheet .gu-step-v{flex:1 0 100%;order:-1}
.gu-frame[data-dock="columns"] :where(.gu-sheet,.gu-buypanel .gu-dialog) .gu-x{right:auto;left:4px}
.gu-sheet .gu-panel-body{display:flex;flex-direction:column}
/* page: the window with the icon column (desktop), the whole screen with an icon row and the title under it (phones) */
.gu-page{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"tabs head" "tabs body"}
.gu-page>.gu-tabs{grid-area:tabs}
.gu-page>.gu-panel-head{grid-area:head}
.gu-page>.gu-panel-body{grid-area:body}
.gu-page>.gu-panel-foot{display:none}
.gu-frame[data-dock="row"] .gu-page{width:70%;height:77%;margin-top:-4%}
.gu-frame[data-dock="row"] .gu-page>.gu-tabs{flex-direction:column;justify-content:center;width:calc(72px*var(--gu-k));padding:8px;gap:8px;background:var(--gu-panel-head);box-shadow:8px 0 16px -12px rgba(0,0,0,.6)}
.gu-frame:not([data-dock="row"]) .gu-scrim-page{padding:0}
.gu-frame:not([data-dock="row"]) .gu-page{width:100%;height:100%;border-radius:0;border:0;padding:var(--gu-safe-t) var(--gu-safe-r) var(--gu-safe-b) var(--gu-safe-l);
  grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"tabs" "head" "body"}
.gu-frame:not([data-dock="row"]) .gu-page>.gu-tabs{flex-direction:row;justify-content:space-around;padding:4px 52px 4px 8px;background:var(--gu-panel-head);border-bottom:1px solid var(--gu-panel-border)}
.gu-frame:not([data-dock="row"]) .gu-page>.gu-panel-head{position:static;padding:8px 12px;min-height:0;background:none}
.gu-frame:not([data-dock="row"]) .gu-page .gu-x{top:calc(var(--gu-safe-t) + 8px);right:calc(var(--gu-safe-r) + 6px);transform:none}
/* portrait (info-portrait, settings-*-portrait): the HUD row and the money strip stay on top of the window's bottom; the text ends above them */
/* the window's scroll area itself stops above the HUD (zone = button row + money strip, + BUY / the bar's rise): nothing of
   the text can be scrolled behind them; the window's surface still runs on under the HUD (GU-013) */
.gu-frame[data-dock="stack"] .gu-page{padding-bottom:calc(var(--gu-safe-b) + var(--gu-zone) + 8px)}
.gu-frame[data-dock="stack"] .gu-page>.gu-panel-body{padding-bottom:calc(16px*var(--gu-k));border-bottom:1px solid var(--gu-panel-border)}
/* the HUD over a page / the buy window on phones (data-live-hud); a dialog over that window dims it and makes it inert */
.gu-frame[data-hud-under] .gu-hud{z-index:25;opacity:.35}
.gu-frame[data-hud-under] .gu-hud *{pointer-events:none !important}
/* 844x390 (mock-up): the title bar across the top, the icon column (Info, Settings, Home, ×) at the left, the content at the
   right of it; the page stops at the HUD column and the money strip, which stay visible (dimmed) */
.gu-frame[data-dock="columns"] .gu-scrim-page{justify-content:flex-start;align-items:stretch;padding:0 calc(var(--gu-safe-r) + var(--gu-side)) calc(var(--gu-safe-b) + var(--gu-strip-h)) 0}
.gu-frame[data-dock="columns"] .gu-page{grid-template-columns:auto 1fr;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"head head" "tabs body";
  padding:var(--gu-safe-t) 0 0 var(--gu-safe-l);border-radius:0 0 var(--gu-radius) 0}
.gu-frame[data-dock="columns"] .gu-page>.gu-tabs{flex-direction:column;justify-content:space-around;padding:6px 6px 58px;border-bottom:0;box-shadow:8px 0 16px -12px rgba(0,0,0,.6)}
.gu-frame[data-dock="columns"] .gu-page>.gu-panel-head{padding:6px 12px;background:var(--gu-panel-head);border-bottom:1px solid var(--gu-panel-border)}
.gu-frame[data-dock="columns"] .gu-page .gu-x{top:auto;right:auto;bottom:8px;left:calc(var(--gu-safe-l) + 10px)}
/* dialog: a small centred card */
.gu-dialog{width:min(calc(420px*var(--gu-k)),92%);text-align:center}
.gu-dialog .gu-panel-foot{border-top:0;padding-top:0}
:where(.gu-dlg-text){margin:calc(14px*var(--gu-k)) 0 4px;font-size:calc(17px*var(--gu-k));line-height:1.35;font-weight:600}
.gu-confirm .gu-panel-body{padding-top:calc(20px*var(--gu-k))}

/* ------------------------------------------------------------------ form pieces */
:where(.gu-sec){margin:0 0 calc(14px*var(--gu-k))}
:where(.gu-sec-t){margin:calc(6px*var(--gu-k)) 0 4px;font-size:calc(13px*var(--gu-k));font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gu-accent);text-align:left}
:where(.gu-field){margin:0 0 12px}
:where(.gu-field-l){font-size:calc(12px*var(--gu-k));font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gu-muted);margin-bottom:8px;text-align:center}
:where(.gu-chips){display:flex;flex-wrap:wrap;gap:8px}
:where(.gu-chip){min-width:52px;min-height:44px;padding:4px 12px;border-radius:var(--gu-radius-btn);border:1px solid var(--gu-panel-border);background:var(--gu-input);color:var(--gu-text);
  font-weight:800;font-size:calc(15px*var(--gu-k));font-variant-numeric:tabular-nums}
:where(.gu-chip.on){background:var(--gu-accent);border-color:var(--gu-accent);color:var(--gu-on-accent)}
@media (hover:hover){:where(.gu-chip):hover:not(:disabled):not(.on){border-color:var(--gu-accent)}}
:where(.gu-chip):disabled{color:var(--gu-icon-off);border-color:transparent}
:where(.gu-stepper){display:flex;align-items:center;gap:10px;width:min(100%,calc(320px*var(--gu-k)));margin:0 auto}
:where(.gu-step-b){display:grid;place-items:center;width:48px;height:48px;flex:none;padding:0;border-radius:var(--gu-round-radius,50%);border:2px solid var(--gu-ring);background:none;color:var(--gu-text);font-size:22px}
@media (hover:hover){:where(.gu-step-b):hover:not(:disabled){border-color:var(--gu-ring-hover)}}
:where(.gu-step-b):active:not(:disabled){transform:scale(.94)}
:where(.gu-step-b):disabled{color:var(--gu-icon-off);border-color:var(--gu-main-ring-off)}
:where(.gu-step-v){flex:1;display:grid;place-items:center;min-height:48px;border-radius:999px;background:var(--gu-input);color:var(--gu-accent);font-weight:800;font-size:calc(20px*var(--gu-k));font-variant-numeric:tabular-nums}
:where(.gu-slide){display:block;margin:0 0 10px}
:where(.gu-slide-l){display:flex;justify-content:space-between;gap:8px;margin-bottom:2px;font-size:calc(14px*var(--gu-k));color:var(--gu-muted)}
:where(.gu-slide-v){color:var(--gu-accent)}
:where(.gu-range){-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:none;cursor:pointer}
.gu-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--gu-accent) var(--gu-fill,0%),var(--gu-input) var(--gu-fill,0%))}
.gu-range::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--gu-accent) var(--gu-fill,0%),var(--gu-input) var(--gu-fill,0%))}
.gu-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--gu-switch-knob);box-shadow:0 1px 4px rgba(0,0,0,.5)}
.gu-range::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:var(--gu-switch-knob)}
:where(.gu-row){display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--gu-panel-border);text-align:left}
:where(.gu-row-t){font-weight:700;font-size:calc(15px*var(--gu-k));text-transform:var(--gu-caps,uppercase);letter-spacing:.03em}
:where(.gu-row-d){margin-top:3px;font-size:calc(12px*var(--gu-k));color:var(--gu-muted);text-transform:var(--gu-caps,uppercase);letter-spacing:.02em;line-height:1.3}
:where(.gu-switch){position:relative;flex:none;width:58px;height:44px;padding:0;border:0;background:none}
:where(.gu-switch)::before{content:"";position:absolute;left:4px;right:4px;top:10px;height:24px;border-radius:12px;background:var(--gu-switch-off);transition:background-color .12s}
:where(.gu-switch-k){position:absolute;left:7px;top:13px;width:18px;height:18px;border-radius:50%;background:var(--gu-switch-knob);transition:left .12s}
:where(.gu-switch.on)::before{background:var(--gu-accent)}
:where(.gu-switch.on) .gu-switch-k{left:33px;background:var(--gu-on-accent)}

/* bet panel: the desktop list (▲ amounts ▼) and the phone field */
.gu-betpanel .gu-drop .gu-panel-body{display:flex;flex-direction:column;align-items:stretch;padding:4px;width:calc(var(--gu-w-bet,88px) + 40px)}
:where(.gu-blist-arr){display:grid;place-items:center;height:44px;padding:0;border:0;border-radius:var(--gu-radius-btn);background:none;color:var(--gu-accent);font-size:20px}
:where(.gu-blist-arr):disabled{color:var(--gu-icon-off)}
@media (hover:hover){:where(.gu-blist-arr):hover:not(:disabled){background:var(--gu-input)}}
:where(.gu-blist-view){height:calc(var(--gu-rows,5)*44px);overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;scroll-snap-type:y proximity}
.gu-blist-view::-webkit-scrollbar{display:none}
:where(.gu-blist-i){display:block;width:100%;height:44px;padding:0 8px;border:0;border-radius:var(--gu-radius-btn);background:none;color:var(--gu-muted);
  font-weight:800;font-size:calc(17px*var(--gu-k));font-variant-numeric:tabular-nums;scroll-snap-align:center}
:where(.gu-blist-i.on){color:var(--gu-accent);background:var(--gu-input)}
@media (hover:hover){:where(.gu-blist-i):hover:not(:disabled):not(.on){color:var(--gu-text);background:var(--gu-input)}}
:where(.gu-blist-i):disabled{color:var(--gu-icon-off)}
:where(.gu-sheet-main){display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(10px*var(--gu-k)) 0 calc(14px*var(--gu-k))}
.gu-frame[data-dock="columns"] .gu-sheet-main{flex:1;min-width:min(260px,36vw)}

/* autoplay: the desktop list (100 / 50 / 25 / 10) or the phone counter, the arrow, the folded limits */
:where(.gu-autobox){display:flex;align-items:stretch} /* not .gu-auto: that is the HUD autoplay button */
.gu-frame[data-dock="stack"] .gu-autobox{flex-direction:column}
.gu-frame[data-dock="columns"] .gu-autobox{flex:1}
:where(.gu-auto-list){display:flex;flex-direction:column;gap:2px;width:calc(76px*var(--gu-k))}
:where(.gu-auto-i){height:44px;padding:0;border:0;border-radius:var(--gu-radius-btn);background:none;color:var(--gu-text);font-weight:800;font-size:calc(18px*var(--gu-k));font-variant-numeric:tabular-nums}
@media (hover:hover){:where(.gu-auto-i):hover:not(:disabled){color:var(--gu-accent);background:var(--gu-input)}}
:where(.gu-auto-i):active:not(:disabled){transform:scale(.96)}
:where(.gu-auto-i):disabled{color:var(--gu-icon-off)}
:where(.gu-adv-t){display:grid;place-items:center;flex:none;padding:0;border:0;background:var(--gu-input);color:var(--gu-accent);font-size:20px;transition:background-color .12s}
.gu-adv-t .gu-i{transition:transform .15s}
.gu-adv-t.open .gu-i{transform:rotate(180deg)}
@media (hover:hover){:where(.gu-adv-t):hover{filter:brightness(1.25)}}
.gu-frame:not([data-dock="stack"]) .gu-adv-t{width:44px;min-height:44px;margin:0 0 0 6px;border-radius:var(--gu-radius-btn)}
.gu-frame[data-dock="columns"] .gu-adv-t{margin:-12px 0 -12px 8px;border-radius:0}
.gu-frame[data-dock="stack"] .gu-adv-t{width:calc(100% + 32px*var(--gu-k));height:44px;margin:0 calc(-16px*var(--gu-k)) -12px}
.gu-frame[data-dock="stack"] .gu-adv-open .gu-adv-t{margin-bottom:10px}
:where(.gu-adv){display:flex;flex-direction:column;justify-content:center;padding:4px 4px 0 16px;width:min(calc(320px*var(--gu-k)),62vw)}
.gu-frame[data-dock="stack"] .gu-adv{width:auto;padding:0 4px}
:where(.gu-adv-h){margin:0 0 6px;font-size:calc(13px*var(--gu-k));font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gu-accent);text-align:center}
:where(.gu-adv-need){margin:0 0 6px;color:var(--gu-danger);font-weight:700;font-size:calc(13px*var(--gu-k));text-align:center}
.gu-autopanel .gu-drop .gu-panel-body{padding:6px}

/* feature buy: one offer - bet per spin and total bet at the left, one big BUY at the right */
.gu-buypanel .gu-dialog{width:min(calc(560px*var(--gu-k)),94%)}
/* portrait (buy-portrait): the whole screen - the "BUY FEATURE" strip with × at the right, then a column: bet per spin, total
   bet, BUY; the HUD stays on top of the window's bottom (the content ends above it); no dimming */
.gu-frame[data-dock="stack"] .gu-scrim.gu-buypanel{padding:0;align-items:stretch;background:none}
.gu-frame[data-dock="stack"] .gu-buypanel .gu-dialog{width:100%;height:100%;max-width:none;border:0;border-radius:0;
  padding:var(--gu-safe-t) var(--gu-safe-r) calc(var(--gu-safe-b) + var(--gu-zone)) var(--gu-safe-l)}
.gu-frame[data-dock="stack"] .gu-buypanel .gu-panel-body{display:flex;flex-direction:column;justify-content:flex-start;padding-top:calc(24px*var(--gu-k))}
/* 844x390 (buy-phone-landscape): the whole height, against the LEFT edge, × at the left; the HUD column and the strip on top */
.gu-frame[data-dock="columns"] .gu-scrim.gu-buypanel{padding:0 0 calc(var(--gu-safe-b) + var(--gu-strip-h)) 0;justify-content:flex-start;align-items:stretch;background:none}
.gu-frame[data-dock="columns"] .gu-buypanel .gu-dialog{height:100%;width:min(640px,calc(100% - var(--gu-side) - var(--gu-safe-r)));border-radius:0 var(--gu-radius) var(--gu-radius) 0;border-left:0;
  padding-left:var(--gu-safe-l)}
.gu-frame[data-dock="columns"] .gu-buypanel .gu-panel-body{display:flex;align-items:center;justify-content:center}
.gu-frame[data-dock="columns"][data-buy-open] .gu-g-colL,.gu-frame[data-dock="columns"][data-buy-open] .gu-barplate-tab{visibility:hidden}
/* the rules / settings window covers the bottom-left corner too (× at the bottom of its icon column): no BUY over it (GU-012) */
.gu-frame[data-dock="columns"][data-page-open] .gu-g-colL,.gu-frame[data-dock="columns"][data-page-open] .gu-barplate-tab{visibility:hidden}
/* the HUD BUY while its window is open: selected */
:where(.gu-buy.on){background-color:var(--gu-accent);color:var(--gu-on-accent)}
:where(.gu-buy.on) .gu-buy-i{color:var(--gu-on-accent)}
/* buy window (0.3.4, owner): the offer (picture, title, "price: 70 × bet") at the left; at the right the bet per spin as one
   − value + control, then the total as the window's main figure and BUY (with the price) on one line; narrow: one column */
:where(.gu-bf){display:flex;align-items:center;justify-content:center;gap:calc(32px*var(--gu-k));padding:calc(8px*var(--gu-k)) 0}
.gu-frame[data-dock="stack"] .gu-bf{flex-direction:column;gap:calc(24px*var(--gu-k))}
:where(.gu-bf-feat){display:flex;flex-direction:column;align-items:center;gap:calc(8px*var(--gu-k));flex:0 1 calc(200px*var(--gu-k));min-width:0;text-align:center}
:where(.gu-bf-art){display:block;width:min(100%,calc(180px*var(--gu-k)));aspect-ratio:1/1;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
:where(.gu-bf-feat-t){display:flex;flex-direction:column;gap:4px}
:where(.gu-bf-name){margin:0;font-family:var(--gu-font-display,inherit);font-size:calc(20px*var(--gu-k));line-height:1.15;color:var(--gu-text);text-transform:var(--gu-caps,uppercase)}
:where(.gu-bf-px){margin:0;font-size:calc(13px*var(--gu-k));color:var(--gu-muted);font-variant-numeric:tabular-nums}
:where(.gu-bf-ctl){display:flex;flex-direction:column;gap:calc(24px*var(--gu-k));flex:1 1 auto;min-width:0}
:where(.gu-bf-field){display:flex;flex-direction:column;align-items:flex-start}
.gu-frame[data-dock="stack"] :where(.gu-bf-field){align-items:center}
/* the bet per spin: one control - a pill with − value + inside, the value white */
.gu-bf-bet .gu-stepper{width:min(100%,calc(280px*var(--gu-k)));margin:0;gap:0;padding:4px;border-radius:999px;background:var(--gu-input);border:1px solid var(--gu-glass-edge,var(--gu-panel-border))}
.gu-frame[data-dock="stack"] .gu-bf-bet .gu-stepper{margin:0 auto}
.gu-bf-bet .gu-step-b{border-color:transparent;width:44px;height:44px}
@media (hover:hover){.gu-bf-bet .gu-step-b:hover:not(:disabled){border-color:transparent;background:var(--gu-input)}}
.gu-bf-bet .gu-step-v{background:none;color:var(--gu-text);min-height:44px}
/* the total: the main figure (no field), and BUY with the price next to it */
:where(.gu-bf-deal){display:flex;align-items:flex-end;justify-content:space-between;gap:calc(16px*var(--gu-k));flex-wrap:wrap}
.gu-frame[data-dock="stack"] :where(.gu-bf-deal){flex-direction:column;align-items:stretch;text-align:center}
:where(.gu-bf-sum){display:flex;flex-direction:column;gap:2px;min-width:0}
:where(.gu-bf-sum-l){font-size:calc(12px*var(--gu-k));font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gu-muted)}
:where(.gu-bf-total){display:block;padding:0;background:none;border-radius:0;font-weight:900;font-size:calc(32px*var(--gu-k));line-height:1.1;color:var(--gu-accent);font-variant-numeric:tabular-nums;white-space:nowrap}
:where(.gu-bf-go){display:flex;flex-direction:column;align-items:stretch;gap:4px;flex:0 1 auto}
:where(.gu-bf-buy){display:flex;align-items:center;justify-content:center;gap:10px;min-width:calc(200px*var(--gu-k));min-height:max(48px,calc(56px*var(--gu-k)));padding:6px 24px;
  border:1px solid var(--gu-primary-border,var(--gu-accent));border-radius:999px;background:var(--gu-primary-bg,var(--gu-accent));color:var(--gu-on-accent);box-shadow:0 0 10px var(--gu-buy-glow);
  font-weight:900;font-size:calc(18px*var(--gu-k));letter-spacing:.06em;text-transform:var(--gu-caps,uppercase);white-space:nowrap;transition:transform .08s,filter .12s}
:where(.gu-bf-buy-p){font-weight:800;letter-spacing:0;font-variant-numeric:tabular-nums}
:where(.gu-bf-buy-p)::before{content:"·";margin-right:10px;opacity:.7}
@media (hover:hover){:where(.gu-bf-buy):hover:not(:disabled){filter:brightness(1.08)}}
:where(.gu-bf-buy):active:not(:disabled){transform:scale(.97)}
:where(.gu-bf-buy):disabled{background:var(--gu-input);border-color:var(--gu-main-ring-off);color:var(--gu-icon-off);box-shadow:none}
:where(.gu-bf-hint){margin:0;font-size:calc(12px*var(--gu-k));font-weight:700;color:var(--gu-danger);text-align:center}
:where(.gu-bf-offers){display:flex;flex-wrap:wrap;gap:calc(16px*var(--gu-k));justify-content:center}
:where(.gu-bf-offer){display:flex;flex-direction:column;align-items:center;gap:calc(8px*var(--gu-k))}
.gu-buypanel .gu-dialog{width:min(calc(640px*var(--gu-k)),94%)}
.gu-buypanel .gu-dialog .gu-panel-body{padding:calc(16px*var(--gu-k)) calc(24px*var(--gu-k)) calc(24px*var(--gu-k))}
/* 844×390: picture and controls side by side, compact */
.gu-frame[data-dock="columns"] .gu-bf{gap:20px}
.gu-frame[data-dock="columns"] .gu-bf-art{width:120px}
.gu-frame[data-dock="columns"] .gu-bf-ctl{gap:14px}
.gu-frame[data-dock="columns"] .gu-bf-total{font-size:26px}

/* free spins granted: "Congratulations!", a divider, one sentence, OK */
:where(.gu-grant) .gu-panel-head{background:none;border-bottom:0;padding-top:calc(14px*var(--gu-k))}
:where(.gu-grant) .gu-panel-title{color:var(--gu-accent);font-family:var(--gu-font-display,inherit);font-size:calc(24px*var(--gu-k))}
:where(.gu-grant) .gu-panel-body{position:relative;padding-top:0}
:where(.gu-grant) .gu-panel-body::before{content:"";display:block;height:2px;margin:2px 10% 0;background:linear-gradient(90deg,transparent,var(--gu-accent),transparent);opacity:.6}

/* tabs of a page (info | settings | home): icons only, with tooltips */
:where(.gu-tabs){display:flex;gap:6px;flex:none}
:where(.gu-tab){position:relative;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:var(--gu-radius-btn);background:none;color:var(--gu-muted);font-size:24px}
:where(.gu-tab.on){color:var(--gu-accent);background:var(--gu-input)}
.gu-frame[data-dock="row"] :where(.gu-tab.on)::before{content:"";position:absolute;left:-6px;top:20%;bottom:20%;width:4px;border-radius:2px;background:var(--gu-accent)}
.gu-frame:not([data-dock="row"]) :where(.gu-tab.on)::before{content:"";position:absolute;bottom:-4px;left:22%;right:22%;height:3px;border-radius:2px;background:var(--gu-accent)}
.gu-frame[data-dock="columns"] :where(.gu-tab.on)::before{bottom:20%;top:20%;left:-6px;right:auto;width:4px;height:auto}
@media (hover:hover){:where(.gu-tab):hover:not(.on){color:var(--gu-text);background:var(--gu-input)}}

/* menu: three icons in a column right over the menu button, each a round button of the menu button's own size and look (.gu-btn
   .gu-round); no box behind them. They grow out of the menu button (--gu-dx / --gu-dy: from the item to the button's centre,
   set by JS), the nearest first, and go back into it faster. 844x390 (phoneMenu: 'icons'): a row at the left of the button. */
.gu-menupop .gu-drop{background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible;animation:none;-webkit-user-select:none;user-select:none}
.gu-menupop .gu-drop .gu-panel-body{padding:0;overflow:visible}
:where(.gu-menulist){display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:10px;max-height:var(--gu-room,none)}
.gu-menupop .gu-drop[data-side="left"] .gu-menulist{flex-direction:row;max-height:none;max-width:var(--gu-room,none)}
:where(.gu-menu-i[aria-pressed="false"]){color:var(--gu-icon-off)}
.gu-menupop .gu-menu-i{animation:gu-grow var(--gu-in-ms,140ms) cubic-bezier(.2,.9,.3,1.12) var(--gu-in,0ms) backwards}
.gu-menupop.gu-closing{pointer-events:none}
.gu-menupop.gu-closing .gu-menu-i{animation:gu-shrink var(--gu-out-ms,100ms) cubic-bezier(.5,0,.9,.5) var(--gu-out,0ms) forwards}
@keyframes gu-grow{from{transform:translate(var(--gu-dx,0px),var(--gu-dy,0px)) scale(.35);opacity:0}to{transform:none;opacity:1}}
@keyframes gu-shrink{from{transform:none;opacity:1}to{transform:translate(var(--gu-dx,0px),var(--gu-dy,0px)) scale(.35);opacity:0}}
/* hud: 'bar' - the menu button lies on the bar: the items wear the bar's face under the bar's round face, so they look the same
   over the game */
.gu-frame[data-hud="bar"]:not([data-img~="round"]) .gu-menupop .gu-menu-i{background:linear-gradient(var(--gu-bar-round),var(--gu-bar-round)),var(--gu-bar);
  box-shadow:inset 0 0 0 1px var(--gu-bar-field-border),var(--gu-plate-shadow,none)} /* solid bar face, no blur: they are animated */
@media (hover:hover){.gu-frame[data-hud="bar"]:not([data-img~="round"]) .gu-menupop .gu-menu-i:hover:not(:disabled){background:linear-gradient(var(--gu-bar-round-hover),var(--gu-bar-round-hover)),var(--gu-bar)}}
/* the item's name: a small label at its side on hover and on keyboard focus (touch has the icon alone; aria-label always) */
.gu-menu-i::after{content:attr(data-tip);position:absolute;z-index:1;left:calc(100% + 10px);top:50%;transform:translate(-4px,-50%);padding:6px 10px;
  border-radius:var(--gu-radius-btn,8px);background:var(--gu-panel);border:1px solid var(--gu-panel-border);box-shadow:var(--gu-panel-shadow,none);color:var(--gu-text);
  font:700 calc(13px*var(--gu-k))/1.2 var(--gu-font,system-ui,sans-serif);letter-spacing:.02em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s}
.gu-drop[data-side="left"] .gu-menu-i::after{left:50%;top:auto;bottom:calc(100% + 10px);transform:translate(-50%,4px)}
@media (hover:hover){.gu-menu-i:hover::after{opacity:1;transform:translate(0,-50%)}
  .gu-drop[data-side="left"] .gu-menu-i:hover::after{transform:translate(-50%,0)}}
.gu-menu-i:focus-visible::after,.gu-menu-i[data-force="hover"]::after{opacity:1;transform:translate(0,-50%)}
.gu-drop[data-side="left"] .gu-menu-i:focus-visible::after{transform:translate(-50%,0)}
.gu-menupop.gu-closing .gu-menu-i::after{opacity:0}
/* one label at a time (GU-016): while the mouse is over the menu, only the hovered item's label shows (the keyboard-focus label
   of another item hides; no :has() needed) */
@media (hover:hover){.gu-menulist:hover .gu-menu-i:focus-visible:not(:hover)::after{opacity:0}}
/* the menu button's icon (≡ / ×) turns in when it changes (JS adds .gu-turn on a change only; at rest no animation) */
.gu-menu>.gu-i.gu-turn{animation:gu-turn .18s ease-out}
@keyframes gu-turn{from{transform:rotate(-90deg) scale(.6);opacity:0}to{transform:none;opacity:1}}

/* rules & paytable */
:where(.gu-divider){height:2px;margin:calc(18px*var(--gu-k)) 6%;border:0;background:linear-gradient(90deg,transparent,var(--gu-sep),transparent)}
:where(.gu-rules-logo){display:grid;place-items:center;margin:4px 0 16px}
:where(.gu-logo-text){margin:0;font-family:var(--gu-font-display,inherit);font-weight:800;font-size:calc(30px*var(--gu-k));letter-spacing:.04em;text-transform:var(--gu-caps,uppercase);text-align:center}
.gu-logo-img{display:block;max-width:min(360px,80%);max-height:160px;object-fit:contain}
/* GU-028: the text measure of the rules / paytable. 1ch is the width of "0"; Latin text averages ~.8ch per character, Cyrillic
   ~1ch, so 56ch keeps every locale at <= 70 characters per line (RU ~56-60, EN ~65-69) */
:where(.gu-frame,.gu-panel){--gu-measure:56ch}
:where(.gu-rule){display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;text-align:center}
:where(.gu-feature-t){margin:0 0 4px;font-family:var(--gu-font-display,inherit);font-size:calc(26px*var(--gu-k));font-weight:800;color:var(--gu-accent);text-align:center;text-transform:var(--gu-caps,uppercase);letter-spacing:.04em}
:where(.gu-rule-text) p,:where(.gu-rule-p){margin:0 auto 8px;max-width:var(--gu-measure);line-height:1.5;color:var(--gu-text)}
:where(.gu-rule-art,.gu-pay-art,.gu-splash-art,.gu-example){display:block;width:min(100%,calc(320px*var(--gu-k)));aspect-ratio:4/3;object-fit:contain;border-radius:var(--gu-radius-btn)}
.gu-art-ph{display:grid;place-items:center;border:1px dashed var(--gu-panel-border);color:var(--gu-muted);font-size:12px;text-align:center;padding:6px}
:where(.gu-paytable){text-align:center}
:where(.gu-curbet){margin:0 0 12px;font-weight:700;color:var(--gu-muted)}
:where(.gu-payrow){display:flex;flex-wrap:wrap;justify-content:center;gap:calc(14px*var(--gu-k)) calc(20px*var(--gu-k));margin:0 0 calc(16px*var(--gu-k))}
:where(.gu-pay){display:flex;align-items:center;gap:10px;min-width:calc(180px*var(--gu-k))}
:where(.gu-pay-art){width:calc(96px*var(--gu-k));aspect-ratio:1}
:where(.gu-pay-rows){display:flex;flex-direction:column;gap:2px;text-align:left}
:where(.gu-pay-name){font-weight:800;text-transform:var(--gu-caps,uppercase);font-size:.85em;color:var(--gu-muted)}
:where(.gu-pay-row){display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
:where(.gu-pay-row) span{color:var(--gu-muted);font-weight:700}
:where(.gu-pay-dot){font-style:normal;color:var(--gu-muted)}
:where(.gu-pay-row) b{color:var(--gu-text)}
:where(.gu-pay-text){margin:0 auto calc(16px*var(--gu-k));max-width:var(--gu-measure);color:var(--gu-text)}
:where(.gu-examples) .gu-example{width:min(46%,calc(260px*var(--gu-k)))}
:where(.gu-rules){margin:0 auto;padding:0 0 0 1.2em;max-width:var(--gu-measure);text-align:left;line-height:1.5}
:where(.gu-rules) li{margin:0 0 6px}
:where(.gu-rules) li::marker{color:var(--gu-accent)}
/* rules & paytable look (0.3.4, owner). Sections and their order stay as in the mock-up; the first screen shows information:
   a compact logo, sections "picture at the left, title and text at the right" (left-aligned, lines <= 70 characters), the pays
   as a grid of cards, a thin themed scrollbar and soft fades at the scroll edges. */
.gu-page .gu-panel-body{padding-inline:max(calc(16px*var(--gu-k)),calc((100% - 880px)/2));padding-block:calc(16px*var(--gu-k)) calc(24px*var(--gu-k))}
.gu-page .gu-rules-logo{margin:0 0 calc(16px*var(--gu-k))}
.gu-page .gu-rules-logo .gu-logo-img{max-height:calc(112px*var(--gu-k));max-width:min(320px,70%)}
.gu-page :where(.gu-divider){margin:calc(24px*var(--gu-k)) 0;opacity:.6}
.gu-page :where(.gu-rule){display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"art title" "art text";column-gap:calc(24px*var(--gu-k));row-gap:calc(8px*var(--gu-k));align-items:start;text-align:left}
.gu-page :where(.gu-rule)>.gu-feature-t{grid-area:title}
.gu-page :where(.gu-rule)>.gu-rule-art{grid-area:art;width:calc(112px*var(--gu-k));aspect-ratio:1/1}
.gu-page :where(.gu-rule)>.gu-rule-text{grid-area:text}
.gu-page :where(.gu-rule:not(:has(> .gu-rule-art))){grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "text"}
.gu-page :where(.gu-feature-t){text-align:left;font-size:calc(22px*var(--gu-k));margin:0}
.gu-page :where(.gu-rule-text) p,.gu-page :where(.gu-rule-p){margin:0 0 8px;max-width:var(--gu-measure)}
.gu-page :where(.gu-paytable){text-align:left}
.gu-page :where(.gu-curbet){margin:4px 0 calc(16px*var(--gu-k))}
.gu-page :where(.gu-payrow){display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(240px*var(--gu-k)),1fr));gap:calc(8px*var(--gu-k));justify-content:stretch;margin:0 0 calc(8px*var(--gu-k))}
.gu-page :where(.gu-payrow-wide){grid-template-columns:1fr}
.gu-page :where(.gu-pay){min-width:0;gap:calc(16px*var(--gu-k));padding:calc(8px*var(--gu-k)) calc(16px*var(--gu-k)) calc(8px*var(--gu-k)) calc(8px*var(--gu-k));border-radius:var(--gu-radius-btn);
  background:var(--gu-input);border:1px solid var(--gu-glass-edge,var(--gu-panel-border))}
.gu-page :where(.gu-pay-art){width:calc(88px*var(--gu-k));flex:none}
.gu-page :where(.gu-pay-wide) .gu-pay-art{width:calc(112px*var(--gu-k))}
.gu-page :where(.gu-pay-row){display:grid;grid-template-columns:2.4em auto;gap:8px}
.gu-page :where(.gu-pay-dot){display:none}
.gu-page :where(.gu-pay-row) b{font-size:1.05em}
.gu-page :where(.gu-pay-note){margin:6px 0 0;max-width:var(--gu-measure);color:var(--gu-muted);font-size:.92em;line-height:1.45;white-space:normal}
.gu-page :where(.gu-pay-text){margin:0 0 calc(16px*var(--gu-k));text-align:left}
.gu-page :where(.gu-rules){margin:0;max-width:var(--gu-measure)}
/* thin themed scrollbar, no arrow buttons; soft fades at the top (once scrolled) and at the bottom */
.gu-page .gu-panel-body::-webkit-scrollbar{width:6px}
.gu-page .gu-panel-body::-webkit-scrollbar-thumb{background:var(--gu-accent);border-radius:3px}
.gu-page .gu-panel-body::-webkit-scrollbar-track{background:transparent}
.gu-page .gu-panel-body::-webkit-scrollbar-button{display:none;height:0}
.gu-page .gu-panel-body{-webkit-mask-image:linear-gradient(to bottom,black calc(100% - 24px),transparent);mask-image:linear-gradient(to bottom,black calc(100% - 24px),transparent)}
.gu-page[data-scrolled] .gu-panel-body{-webkit-mask-image:linear-gradient(to bottom,transparent,black 24px,black calc(100% - 24px),transparent);mask-image:linear-gradient(to bottom,transparent,black 24px,black calc(100% - 24px),transparent)}

/* ------------------------------------------------------------------ overlays: loading, splash */
:where(.gu-overlay){position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(22px*var(--gu-k));
  padding:calc(var(--gu-safe-t) + 16px) calc(var(--gu-safe-r) + 16px) calc(var(--gu-safe-b) + 16px) calc(var(--gu-safe-l) + 16px);
  background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--gu-accent) 14%,var(--gu-stage)),var(--gu-stage) 70%);color:var(--gu-text);animation:gu-in .2s}
.gu-overlay.gu-out{opacity:0;transition:opacity .25s}
.gu-loading{background:var(--gu-img-loadingBg,none) center/cover,var(--gu-stage)}
.gu-frame[data-mode="portrait"] .gu-loading{background:var(--gu-img-loadingBgTall,var(--gu-img-loadingBg,none)) center/cover,var(--gu-stage)}
/* features.loadingLogo (0.3.4, off by default: the mock-up's loading has no logo): the game logo over the loading background */
:where(.gu-load-logo){display:block;max-width:min(78%,calc(640px*var(--gu-k)));max-height:46%;object-fit:contain}
:where(.gu-spinner){width:calc(52px*var(--gu-k));height:calc(52px*var(--gu-k));border-radius:50%;border:calc(5px*var(--gu-k)) solid var(--gu-progress-track);border-top-color:var(--gu-progress);animation:gu-spin .9s linear infinite}
:where(.gu-load-t){display:flex;align-items:baseline;color:var(--gu-text);font-weight:700;letter-spacing:.14em;text-transform:var(--gu-caps,uppercase);font-size:calc(20px*var(--gu-k))}
:where(.gu-dot){animation:gu-blink 1.2s infinite both}
.gu-dot2{animation-delay:.2s}.gu-dot3{animation-delay:.4s}
.gu-splash{background:var(--gu-img-splashBg,none) center/cover,radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--gu-accent) 16%,var(--gu-stage)),var(--gu-stage) 72%);gap:calc(12px*var(--gu-k));overflow:hidden}
.gu-frame[data-mode="portrait"] .gu-splash{background-image:var(--gu-img-splashBgTall,var(--gu-img-splashBg,none)),radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--gu-accent) 16%,var(--gu-stage)),var(--gu-stage) 72%)}
:where(.gu-splash-logo){display:grid;place-items:center}
:where(.gu-splash-logo.gu-logo-text){font-size:calc(56px*var(--gu-k));line-height:1}
:where(.gu-sp-div){width:min(760px,80%);margin:0}
:where(.gu-sp-car){width:min(calc(880px*var(--gu-k)),100%);border-radius:var(--gu-radius);overflow:hidden;background:var(--gu-panel);border:1px solid var(--gu-panel-border)}
:where(.gu-sp-win){overflow:hidden}
:where(.gu-sp-track){display:flex;transition:transform .45s ease;touch-action:pan-y}
:where(.gu-sp-page){flex:0 0 100%;display:flex;align-items:center;gap:calc(36px*var(--gu-k));padding:calc(24px*var(--gu-k)) calc(40px*var(--gu-k));min-width:0}
:where(.gu-sp-page) .gu-splash-art{flex:0 0 36%;width:36%}
:where(.gu-sp-text){display:flex;flex-direction:column;gap:10px;min-width:0;text-align:left}
:where(.gu-splash-t){margin:0;font-family:var(--gu-font-display,inherit);font-size:calc(32px*var(--gu-k));line-height:1.1;font-weight:800;color:var(--gu-accent);text-transform:var(--gu-caps,uppercase)}
:where(.gu-splash-d){margin:0;color:var(--gu-text);font-size:calc(18px*var(--gu-k));line-height:1.4}
:where(.gu-sp-nav){display:flex;align-items:center;gap:2px;height:44px}
:where(.gu-sp-arr){display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--gu-input);color:var(--gu-text);font-size:22px}
@media (hover:hover){:where(.gu-sp-arr):hover{color:var(--gu-accent)}}
:where(.gu-sp-dot){position:relative;width:44px;height:44px;padding:0;border:0;background:none} /* the dot is small, the hit area 44 px */
:where(.gu-sp-dot)::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--gu-muted)}
:where(.gu-sp-dot.on)::before{width:12px;height:12px;border:0;background:var(--gu-text)}
:where(.gu-splash-meta){display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
:where(.gu-stamp){padding:6px 14px;border-radius:999px;border:1px solid var(--gu-panel-border);background:var(--gu-panel);font-weight:800;font-size:calc(13px*var(--gu-k));letter-spacing:.06em;text-transform:uppercase}
/* Continue is the loading bar until the game has loaded */
.gu-splash-go{flex:none;width:min(calc(300px*var(--gu-k)),80vw);min-height:max(48px,calc(60px*var(--gu-k)));border-radius:999px;font-size:calc(20px*var(--gu-k))}
.gu-splash-go:not([data-loading]){animation:gu-pulse 1.6s ease-in-out infinite}
.gu-splash-go>.gu-act-t{position:relative}
.gu-go-fill{position:absolute;left:0;top:0;bottom:0;width:0;display:none;background:color-mix(in srgb,var(--gu-progress) 45%,transparent);border-right:3px solid var(--gu-progress);transition:width .1s linear}
.gu-splash-go[data-loading]{background:var(--gu-input);border-color:var(--gu-panel-border);color:var(--gu-muted);opacity:1}
.gu-splash-go[data-loading] .gu-go-fill{display:block}
.gu-frame[data-mode="portrait"] .gu-sp-page{flex-direction:column;text-align:center;gap:14px;padding:20px}
.gu-frame[data-mode="portrait"] .gu-sp-page .gu-splash-art{width:min(100%,320px);flex:none}
.gu-frame[data-mode="portrait"] .gu-sp-text{text-align:center}
.gu-frame[data-dock="columns"] .gu-splash{gap:6px;padding-top:calc(var(--gu-safe-t) + 8px);padding-bottom:calc(var(--gu-safe-b) + 8px)}
.gu-frame[data-dock="columns"] .gu-splash-logo.gu-logo-text{font-size:34px}
.gu-frame[data-dock="columns"] .gu-sp-car{width:min(640px,100%)}
/* GU-022: the card takes the height left between the logo and the nav / foot; the slide fills it and the feature art fits it
   whole (contain by the card's height), no clipping */
.gu-frame[data-dock="columns"] .gu-splash>*{flex:none}
.gu-frame[data-dock="columns"] .gu-splash>.gu-sp-car{flex:1 1 auto;min-height:0;display:flex}
.gu-frame[data-dock="columns"] .gu-sp-win{flex:1 1 auto;min-width:0;min-height:0}
.gu-frame[data-dock="columns"] .gu-sp-track{height:100%}
.gu-frame[data-dock="columns"] .gu-splash .gu-logo-img{max-height:64px}
.gu-frame[data-dock="columns"] .gu-sp-page{gap:22px;padding:10px 24px;height:100%;min-height:0}
.gu-frame[data-dock="columns"] .gu-sp-page .gu-splash-art{flex:0 1 auto;width:auto;height:100%;max-width:34%;aspect-ratio:1/1;object-fit:contain;min-height:0}
.gu-frame[data-dock="columns"] .gu-splash-t{font-size:22px}
.gu-frame[data-dock="columns"] .gu-splash-d{font-size:14px}
.gu-frame[data-dock="columns"] .gu-sp-nav{height:36px}
.gu-frame[data-dock="columns"] .gu-splash-go{min-height:48px;font-size:17px;width:min(220px,32vw)}
/* GU-022: the stamps in one row next to Continue (smaller, no wrapping) */
.gu-frame[data-dock="columns"] .gu-sp-foot .gu-splash-meta{flex-wrap:nowrap;gap:6px}
.gu-frame[data-dock="columns"] .gu-sp-foot .gu-stamp{padding:5px 10px;font-size:11px;white-space:nowrap;letter-spacing:.04em}
.gu-sp-foot{display:contents}
.gu-frame[data-dock="columns"] .gu-sp-div2{display:none}
.gu-frame[data-dock="columns"] .gu-sp-foot{display:flex;align-items:center;justify-content:center;gap:20px;width:min(640px,100%);margin-top:4px}
.gu-frame[data-dock="columns"] .gu-sp-foot .gu-splash-meta{justify-content:flex-start;flex:1 1 auto;min-width:0}

/* ------------------------------------------------------------------ splash look (0.3.4, owner). The mock-up's structure stays:
   logo, the feature carousel (art + title + text), its navigation, the stamps with the volatility, Continue = the loading bar. */
/* on the game's art (splash.background, else the theme's splashBg), dimmed so the card and the text read */
.gu-splash{gap:calc(16px*var(--gu-k));
  background:linear-gradient(var(--gu-scrim),var(--gu-scrim)),var(--gu-sp-bg,var(--gu-img-splashBg,none)) center/cover,radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--gu-accent) 16%,var(--gu-stage)),var(--gu-stage) 72%)}
.gu-frame[data-mode="portrait"] .gu-splash{background:linear-gradient(var(--gu-scrim),var(--gu-scrim)),var(--gu-sp-bg-tall,var(--gu-img-splashBgTall,var(--gu-img-splashBg,none))) center/cover,var(--gu-stage)}
.gu-splash .gu-logo-img{max-height:calc(120px*var(--gu-k))}
.gu-sp-div{display:none} /* no thin rules above / below the card */
/* the card: glass, the arrows at its sides, the art big and breaking out over its top edge */
:where(.gu-sp-car){position:relative;display:flex;align-items:center;overflow:visible;border-radius:var(--gu-radius);background:var(--gu-panel);
  border:1px solid var(--gu-glass-edge,var(--gu-panel-border));box-shadow:var(--gu-panel-shadow,none)}
:where(.gu-sp-win){flex:1 1 auto;min-width:0;overflow:visible;clip-path:inset(-48px 0 -8px 0)}
:where(.gu-sp-page){gap:calc(32px*var(--gu-k));padding:calc(24px*var(--gu-k)) calc(64px*var(--gu-k));align-items:center}
:where(.gu-sp-page) .gu-splash-art{flex:0 0 auto;width:min(40%,calc(280px*var(--gu-k)));aspect-ratio:1/1;margin:calc(-40px*var(--gu-k)) 0 calc(-8px*var(--gu-k));filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}
:where(.gu-sp-text){justify-content:center;gap:calc(8px*var(--gu-k))}
:where(.gu-splash-t){font-size:calc(36px*var(--gu-k));letter-spacing:.02em}
:where(.gu-splash-d){max-width:42ch;font-size:calc(18px*var(--gu-k));line-height:1.45;color:var(--gu-text)}
.gu-sp-car>.gu-sp-arr{position:absolute;top:50%;z-index:2;transform:translateY(-50%);background:var(--gu-panel);border:1px solid var(--gu-glass-edge,var(--gu-panel-border))}
.gu-sp-car>.gu-sp-arr:first-child{left:calc(8px*var(--gu-k))}
.gu-sp-car>.gu-sp-arr:last-child{right:calc(8px*var(--gu-k))}
/* page pills: 44×44 hit area each, the active pill longer and filling up until the page turns by itself */
:where(.gu-sp-nav){gap:0;height:auto}
:where(.gu-sp-dot)::before{width:8px;height:8px;border:0;border-radius:4px;background:var(--gu-muted);transition:width .2s,background-color .2s}
:where(.gu-sp-dot.on)::before{width:32px;height:8px;background:var(--gu-input)}
:where(.gu-sp-dot.on)::after{content:"";position:absolute;left:calc(50% - 16px);top:calc(50% - 4px);width:0;height:8px;border-radius:4px;background:var(--gu-accent);
  animation:gu-sp-prog var(--gu-sp-ms,4s) linear forwards}
@keyframes gu-sp-prog{to{width:32px}}
@media (prefers-reduced-motion:reduce){.gu-frame .gu-sp-dot.on::after{width:32px}}
/* stamps: chips "caption + value" on one row; volatility as a scale of marks */
:where(.gu-splash-meta){flex-wrap:nowrap;gap:calc(8px*var(--gu-k))}
:where(.gu-stamp){display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:calc(6px*var(--gu-k)) calc(14px*var(--gu-k));
  border-radius:var(--gu-radius-btn);border:1px solid var(--gu-glass-edge,var(--gu-panel-border));background:var(--gu-panel);text-transform:none;letter-spacing:0;white-space:nowrap}
:where(.gu-stamp-l){font-size:calc(10px*var(--gu-k));font-weight:700;letter-spacing:.08em;text-transform:var(--gu-caps,uppercase);color:var(--gu-label);line-height:1.1}
:where(.gu-stamp-v){display:flex;align-items:center;min-height:calc(18px*var(--gu-k));font-size:calc(16px*var(--gu-k));font-weight:800;color:var(--gu-text);line-height:1.1;font-variant-numeric:tabular-nums}
:where(.gu-vol-scale){display:inline-flex;align-items:flex-end;gap:3px}
:where(.gu-vol-mark){display:block;width:6px;height:calc(14px*var(--gu-k));border-radius:2px;background:var(--gu-input);transform:skewX(var(--gu-vol-skew,0deg))}
:where(.gu-vol-mark.on){background:var(--gu-accent)}
.gu-frame[data-dock="columns"] .gu-sp-foot .gu-stamp{padding:4px 10px}
.gu-frame[data-dock="columns"] .gu-stamp-l{font-size:9px}
.gu-frame[data-dock="columns"] .gu-stamp-v{font-size:13px;min-height:14px}
.gu-frame[data-dock="columns"] .gu-vol-mark{height:11px;width:5px}
/* portrait: the art above the text, centred */
.gu-frame[data-mode="portrait"] .gu-sp-page{flex-direction:column;gap:calc(16px*var(--gu-k));padding:calc(24px*var(--gu-k)) calc(56px*var(--gu-k))}
.gu-frame[data-mode="portrait"] .gu-sp-page .gu-splash-art{width:min(70%,calc(240px*var(--gu-k)));margin:calc(-48px*var(--gu-k)) 0 0}
.gu-frame[data-mode="portrait"] .gu-splash-d{margin:0 auto}
.gu-frame[data-mode="portrait"] .gu-splash{padding-top:calc(var(--gu-safe-t) + 48px)}
/* 844×390 (GU-022): the art fits the card's height, no breaking out (there is no room above) */
.gu-frame[data-dock="columns"] .gu-splash{gap:8px}
.gu-frame[data-dock="columns"] .gu-sp-page .gu-splash-art{margin:0;filter:none}
.gu-frame[data-dock="columns"] .gu-sp-page{padding:8px 56px}
.gu-frame[data-dock="columns"] .gu-sp-win{clip-path:none;overflow:hidden}
/* Continue: the theme's call-to-action face (primary-bg), the loading bar inside it until the game has loaded */
:where(.gu-act.gu-primary:not(:disabled)){background:var(--gu-primary-bg,var(--gu-accent));border-color:var(--gu-primary-border,var(--gu-accent))}

/* ------------------------------------------------------------------ glass (0.3.4, owner: "half-transparent, the game blurred
   under it"): HUD plates, CSS round buttons, BUY, the 844×390 strip, the bar and the panels let the game through, blurred and a
   little more saturated, with a 1 px light edge. The transparency is in the BACKGROUND colour (color-mix with the theme's
   colour), never opacity on the element. Painted faces (theme pictures) stay opaque art. Browsers without backdrop-filter keep
   the solid theme colours (this block does not apply). No blur on what moves: the main button, the menu items while they grow,
   the message line, and the controls inside the bar (the bar blurs once for all of them). */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) and (color:color-mix(in srgb,red 50%,transparent)){
  :where(.gu-plate,.gu-buy:not(.on)){background-color:color-mix(in srgb,var(--gu-plate) var(--gu-hud-glass,64%),transparent)}
  :where(.gu-round:not(.on)){background-color:color-mix(in srgb,var(--gu-round) var(--gu-hud-glass,64%),transparent)}
  :where(.gu-plate,.gu-buy,.gu-round),.gu-frame[data-dock="columns"] .gu-g-strip{
    -webkit-backdrop-filter:blur(var(--gu-hud-blur,14px)) saturate(var(--gu-glass-saturate,1.2));backdrop-filter:blur(var(--gu-hud-blur,14px)) saturate(var(--gu-glass-saturate,1.2))}
  :where(.gu-plate,.gu-round:not(:disabled)){box-shadow:inset 0 0 0 1px var(--gu-glass-edge),var(--gu-plate-shadow,none)}
  :where(.gu-round:disabled){box-shadow:inset 0 0 0 1px var(--gu-glass-edge)}
  :where(.gu-barplate){background:var(--gu-bar-glass,var(--gu-bar))}
  /* text on the glass keeps >= 4.5:1 over bright spots of the game (fire, windows): a soft dark halo under it */
  :where(.gu-plate,.gu-g-strip) :is(.gu-num,.gu-cap){text-shadow:var(--gu-text-shadow,none)}
  :where(.gu-panel,.gu-sp-car,.gu-stamp,.gu-sp-car>.gu-sp-arr){background-color:color-mix(in srgb,var(--gu-panel) var(--gu-panel-glass,62%),transparent)}
  :where(.gu-sp-car,.gu-stamp){-webkit-backdrop-filter:blur(var(--gu-panel-blur,16px)) saturate(var(--gu-glass-saturate,1.2));backdrop-filter:blur(var(--gu-panel-blur,16px)) saturate(var(--gu-glass-saturate,1.2))}
  .gu-frame[data-img~="round"] .gu-round,.gu-frame[data-hud="bar"] .gu-dock :is(.gu-round,.gu-plate,.gu-buy),.gu-menupop .gu-menu-i{
    -webkit-backdrop-filter:none;backdrop-filter:none}
  /* the menu items grow out of the button (animated): no blur, so their face stays the solid round colour */
  .gu-frame:not([data-img~="round"]) .gu-menupop .gu-menu-i:not(.on){background-color:var(--gu-round)}
}

@keyframes gu-in{from{opacity:0}to{opacity:1}}
@keyframes gu-up{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes gu-down{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes gu-right{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes gu-spin{to{transform:rotate(360deg)}}
@keyframes gu-blink{0%,80%,100%{opacity:.15}40%{opacity:1}}
@keyframes gu-pulse{0%,100%{box-shadow:0 0 6px 0 var(--gu-buy-glow)}50%{box-shadow:0 0 18px 4px var(--gu-buy-glow)}}
@media (prefers-reduced-motion:reduce){.gu-frame *{transition:none !important;animation:none !important}}