/* ═══════════════════════════════════════════════════════════════════
   ORIGINALS UI KIT — the shared look of the 7 house games
   (Dice, Limbo, Keno, Wheel, Mines, HiLo, Blackjack). Class prefix "og-".

   One framed card per game:
       ┌──────────────┬───────────────────────────────┐
       │ .og-panel    │ .og-stage                     │
       │ (controls)   │ (the game itself)             │
       ├──────────────┴───────────────────────────────┤
       │ .og-toolbar  (icons …        currency · Fairness)
       └──────────────────────────────────────────────┘
   Phones (≤768px, or .og-shell--stacked): stage on top, panel under it,
   toolbar last — all full width.

   Colours: ONLY the site tokens from frame.css :root (plus soft rgba
   overlays of them). The in-game Bet button is the site blue (--accent; owner 2026-10-08).
   Look only: nothing here may hide, move out of reach or disable a control (one exception, opted
   into per button: a toolbar action with hideOnTouch, e.g. the Hotkeys list, is not shown on touch
   screens, which have no keys).

   The standard every game follows (owner polish pass, 2026-10-08):
   - Bet button .og-btn--bet: "Bet" / "Play Demo" (logged-out free round) / "Cash Out";
     auto-bet "Start Autobet" / "Stop Autobet" (+ .og-btn--stop). Normal case, never uppercase.
   - Labels in Title Case; the "Bet Amount" row shows the balance on the right (.og-label__value).
   - Profit read-outs: label above an .og-field (see "Profit read-outs" in section 8).
   - ∞ chip: .og-chip + .is-active / aria-pressed while infinite is on.
   - Card height: the kit default --og-min-h (games don't set their own).
   - Unopened tiles: .og-tile, or the --og-tile-* variables on .og-shell.
   - Phones: Bet first under the tabs (.og-mobile-first); secondary buttons are .og-btn (40px).
   - No RTP tag and no bet-limits lines at the foot of the panel (owner, 2026-10-09: "remove the rtp from
     showing on the ui when playing the house game"; for the limits "no need to show this on the games";
     the /fairness page lists both). The limits are still enforced: each game's max / min bet message
     under the bet field and the server's refusals. The .og-panel__foot / .pfk-* rules below stay for a
     game that would show RtpBadge or LimitsNotice again.
   - Money read-outs: the normal money format, the exact amount in a tip (<OgExactValue>, section 8).
   Imported by src/components/originals/OgToolbar.tsx and by each game
   (a repeated CSS import is free in Vite).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Shell (the framed card) ─────────────────────────────────────── */
.og-shell {
  /* sizes — a game may override these on its own .og-shell */
  --og-panel-w: 300px;           /* left control panel */
  --og-min-h: 700px;             /* desktop height of panel/stage row — the same for every game, so the
                                    card keeps its size when the player switches games (Keno's board
                                    and the Mines grid need ~700) */
  --og-stage-min-h-phone: 340px; /* stage height on phones */
  --og-pad: 12px;                /* panel padding */
  --og-gap: 12px;                /* space between panel groups */
  --og-ctl-h: 40px;              /* tabs, option buttons, secondary buttons */
  --og-field-h: 44px;            /* bet field and info fields */
  --og-bet-h: 48px;              /* the big Bet button */

  /* depth + accent helpers (derived from tokens only) */
  --og-raise: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .28);
  --og-sink: inset 0 1px 2px rgba(0, 0, 0, .3);
  --og-accent-tint: rgba(var(--accent-rgb), .18);
  --og-accent-ring: rgba(var(--accent-rgb), .5);
  --og-accent-text: color-mix(in srgb, var(--accent-hover) 68%, var(--text-primary));
  /* Unopened board tile (Keno numbers, Mines cells, HiLo pick cards …): .og-tile uses these; a game
     tile that can't take the class (own structure / animations) uses the same variables:
       background: var(--og-tile-bg); box-shadow: var(--og-tile-shadow);
       hover: var(--og-tile-bg-hover) + var(--og-tile-shadow-hover) + translateY(-2px).
     A tile drawn as a "face" layer over a ledge uses --og-tile-face-shadow on the face and
     --og-tile-ledge on the tile. */
  --og-tile-bg: var(--bg-card);
  --og-tile-bg-hover: var(--bg-elevated);
  --og-tile-fg: var(--text-muted);
  --og-tile-face-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .025);
  --og-tile-ledge: 0 3px 0 rgba(0, 0, 0, .3);
  --og-tile-ledge-hover: 0 5px 0 rgba(0, 0, 0, .3);
  --og-tile-shadow: var(--og-tile-face-shadow), var(--og-tile-ledge);
  --og-tile-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .03), var(--og-tile-ledge-hover);
  --og-ease: var(--ease-out, cubic-bezier(.33, 1, .68, 1));
  --og-dur: var(--dur-fast, .16s);
  --og-font: "RM Neue", "RM Neue-Regular", Helvetica, Arial, sans-serif;

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--og-panel-w) minmax(0, 1fr);
  grid-template-rows: minmax(var(--og-min-h), auto) auto;
  grid-template-areas:
    "panel   stage"
    "toolbar toolbar";
  width: 100%;
  min-width: 0;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
}
/* Type for the kit's own areas. Set here, not on .og-shell, so a game's stage keeps its own font,
   size and alignment. */
.og-panel, .og-toolbar, .og-stage-panel, .og-note {
  color: var(--text-primary);
  font-family: var(--og-font);
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
}
.og-note { text-align: center; }
/* Figures that must read exactly (multipliers, payouts, profits, chances): every figure one width. The castle theme puts
   them in the reading font (theme-castle.css, owner 2026-10-21: "in the pixel font the 9 looks like an 8"). */
.og-num { font-variant-numeric: tabular-nums; }
.og-group, .og-label-row, .og-amount, .og-field, .og-error, .og-help { font-family: var(--og-font); }
/* The game pages put their logo / favourite bar right under the game:
   square the bottom corners so the two read as one card. */
.og-shell--joined { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Shared reset for every kit control (site buttons keep browser chrome otherwise) */
.og-tab, .og-seg__btn, .og-btn, .og-chip, .og-tile, .og-label__hint,
.og-toolbar__icon, .og-currency, .og-currency-menu__item, .og-fair {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  font: inherit;
  font-family: var(--og-font);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color var(--og-dur) var(--og-ease),
    color var(--og-dur) var(--og-ease),
    box-shadow var(--og-dur) var(--og-ease),
    border-color var(--og-dur) var(--og-ease),
    opacity var(--og-dur) var(--og-ease),
    transform var(--dur-press, .08s) var(--og-ease);
}

/* ── 2. Panel (left controls) ───────────────────────────────────────── */
.og-panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  gap: var(--og-gap);
  min-width: 0;
  padding: var(--og-pad);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  border-top-left-radius: inherit;
}
/* Anything that should sit at the bottom of the panel (RTP chip, limits) */
.og-panel__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
/* The shared fairness pieces in the foot (RtpBadge + LimitsNotice, src/components/fairness) get ONE look
   in every game: a small rounded RTP tag and the bet limits in a quiet framed box. Scoped through
   .og-shell so this wins over the older per-game copies of the same look (games need no RTP CSS).
   RTP tag = a 2-column grid: shield | "RTP …". When the game also shows the house edge
   (RtpBadge showEdge: "· House edge …"), that part always gets its own line under "RTP …", lined up
   with it — the same two lines in every game and at every width, so the tag never wraps with a
   dangling "·". The "·" only separates two parts on one line, so on its own line just the dot is
   clipped (text-indent −0.44em: the dot + half the space after it in RM Neue / Helvetica / Arial);
   every word and figure stays visible, and the tag's tooltip still shows the full disclosure. */
.og-shell .og-panel__foot .pfk-rtp { max-width: 100%; align-self: flex-start; }
.og-shell .og-panel__foot .pfk-rtp-chip {
  display: inline-grid;
  grid-template-columns: auto minmax(0, max-content);
  align-items: center;
  justify-content: start;
  column-gap: 6px;
  row-gap: 1px;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}
.og-shell .og-panel__foot .pfk-rtp-chip > svg { grid-column: 1; grid-row: 1; flex: none; }
.og-shell .og-panel__foot .pfk-rtp-chip > span {
  grid-column: 2;
  min-width: 0;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}
.og-shell .og-panel__foot .pfk-rtp-chip > .pfk-rtp-edge {
  grid-row: 2;
  overflow: hidden;
  text-indent: -.44em;
}
.og-shell .og-panel__foot .pfk-limits { align-self: stretch; margin: 0; }
.og-shell .og-panel__foot .pfk-limits:not(.is-unavailable) {
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: rgba(var(--bg-sidebar-rgb), .35);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.45;
  gap: 2px 12px;
}
/* One labelled control: label row + field / buttons */
.og-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.og-divider {
  height: 1px;
  margin: 2px 0;
  background: var(--border-color);
  border: 0;
}

/* ── 3. Tabs (Manual | Auto | …) ────────────────────────────────────── */
.og-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--bg-input);
  border-radius: var(--radius-lg);
  box-shadow: var(--og-sink);
}
.og-tab {
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.og-tab:is(.is-active, [aria-selected="true"]) {
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--og-raise);
}
.og-tab:disabled { cursor: not-allowed; }
.og-tab:disabled:not(.is-active, [aria-selected="true"]) { opacity: .45; }

/* ── 4. Labels ──────────────────────────────────────────────────────── */
.og-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 18px;
  min-width: 0;
}
.og-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.og-label__hint {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
}
.og-label__hint svg { width: 14px; height: 14px; display: block; }
.og-label__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* the Bet Amount row's balance steps its font down instead of being cut (OgFreePlay.tsx useFitOneLine) */
.og-label__value.og-fit-1 { font-size: 11.5px; }
.og-label__value.og-fit-2 { font-size: 11px; letter-spacing: -0.01em; }
.og-label__value.og-fit-3 { font-size: 10.5px; letter-spacing: -0.02em; }
.og-label__value.og-fit-4 { font-size: 10px; letter-spacing: -0.02em; }
.og-label-row:has(> .og-label__value:is(.og-fit-2, .og-fit-3, .og-fit-4)) { column-gap: 6px; }

/* ── 5. Amount field (bet amount, number of bets, any editable number) ─ */
.og-amount {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: var(--og-field-h);
  padding: 0 4px 0 12px;
  background: var(--bg-input);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  box-shadow: var(--og-sink);
  transition: border-color var(--og-dur) var(--og-ease), box-shadow var(--og-dur) var(--og-ease), opacity var(--og-dur) var(--og-ease);
}
.og-amount:focus-within {
  border-color: var(--field-border-focus);
  box-shadow: var(--og-sink), var(--field-focus-shadow);
}
.og-amount.is-error { border-color: rgba(var(--danger-rgb), .7); }
/* A locked field fades as a whole… */
.og-amount.is-disabled,
.og-amount:has(> input:disabled):where(:not(:has(.og-chip:is(.is-active, [aria-pressed="true"])))) { opacity: .6; }
/* …except when an active chip switched the number off (∞ = no limit): then only the number fades and
   the lit ∞ chip stays bright, the same in every game (a disabled chip still fades on its own). */
.og-amount:has(> input:disabled):has(.og-chip:is(.is-active, [aria-pressed="true"])) > :is(input, .og-amount__coin, .og-amount__suffix) { opacity: .45; }
.og-amount > input,
.og-amount__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.og-amount > input::placeholder,
.og-amount__input::placeholder { color: var(--text-disabled); }
.og-amount > input::-webkit-outer-spin-button,
.og-amount > input::-webkit-inner-spin-button,
.og-amount__input::-webkit-outer-spin-button,
.og-amount__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.og-amount > input:disabled { cursor: not-allowed; }
/* Currency coin (or symbol text) at the start of a money field */
.og-amount__coin {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
img.og-amount__coin,
.og-amount__coin img { width: 18px; height: 18px; object-fit: contain; display: block; }
/* Unit after the number ("%", "×") */
.og-amount__suffix {
  flex: none;
  padding-right: 8px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
}
.og-amount__chips { flex: none; display: flex; gap: 4px; }

/* Small square chips inside a field: ½, 2×, ∞, swap … */
.og-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 36px;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--og-raise);
}
.og-chip svg { width: 14px; height: 14px; display: block; }
/* Touch screens: ½ / 2× / ∞ keep their size inside the 44px field but take taps on its full height
   (mobile QA 2026-10-08, LG-29). */
@media (hover: none) and (pointer: coarse) {
  .og-chip { position: relative; }
  .og-chip::after { content: ""; position: absolute; inset: -5px -2px; }
  /* the RTP tag in the panel foot (opens its explanation): 40px tall tap area */
  .og-shell .og-panel__foot .pfk-rtp-chip { position: relative; }
  .og-shell .og-panel__foot .pfk-rtp-chip::after { content: ""; position: absolute; inset: -6px 0; }
}
/* A switched-on chip (∞ = no limit on the number of bets): lit in the site blue, white glyph — the
   same in every game. Class doubled so a game's own chip tint can't dim it. Mark it with .is-active
   and/or aria-pressed="true". */
.og-chip.og-chip:is(.is-active, [aria-pressed="true"]) {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 0 0 1px rgba(var(--accent-rgb), .6),
    0 0 14px -4px rgba(var(--accent-rgb), .9);
}
.og-chip:disabled { opacity: .5; cursor: not-allowed; }

/* ── 6. Option buttons (Classic/Low/Medium/High, seats, grid size …) ── */
.og-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}
/* many options: wrap onto rows */
.og-seg--wrap {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
}
.og-seg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: var(--og-ctl-h);
  padding: 0 6px;
  border-radius: var(--radius-md);
  background: rgba(var(--bg-elevated-rgb), .55);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--og-raise);
}
.og-seg__btn:is(.is-active, [aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]) {
  background: var(--og-accent-tint);
  color: var(--og-accent-text);
  box-shadow: inset 0 0 0 1px var(--og-accent-ring);
}
.og-seg__btn:disabled { cursor: not-allowed; }
.og-seg__btn:disabled:not(.is-active, [aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]) { opacity: .45; }
/* Track variant: options sit in one dark rail (Roll Over / Roll Under, modes) */
.og-seg--track {
  gap: 4px;
  padding: 4px;
  background: var(--bg-input);
  border-radius: var(--radius-lg);
  box-shadow: var(--og-sink);
}
.og-seg--track .og-seg__btn {
  height: calc(var(--og-ctl-h) - 4px);
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
}
.og-seg--track .og-seg__btn:is(.is-active, [aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]) {
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--og-raise);
}
/* "Free play — no payout" with the bet button while the bet is exactly $0.00 (OgFreePlay.tsx; owner 2026-10-23: the
   only free play is a $0.00 bet — the Demo toggle that stood at the end of the "Bet Amount" row is gone). Quiet, like
   every notice (ui-status): a 6 px dot and one line. */
.og-free-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.og-free-note__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
/* Blackjack's rules in one line before a hand (QA audit 2026-10-26); "All rules" opens the toolbar's Rules window */
.og-rules-brief { margin: 8px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.45; text-align: center; }
.og-rules-brief__link { padding: 0; border: 0; background: none; color: var(--text-primary); font: inherit; text-decoration: underline; cursor: pointer; }
.og-rules-brief__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 7. Buttons ─────────────────────────────────────────────────────── */
.og-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: var(--og-ctl-h);
  padding: 0 16px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  /* button words are written as they should read ("Bet", "Cash Out", "Start Autobet"): never shouted */
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--og-raise);
}
.og-btn svg { width: 16px; height: 16px; flex: none; }
.og-btn--block { width: 100%; }
/* Primary: the in-game Bet / Play Demo / Cash Out button. Owner, 2026-10-08: blue like the site's
   other primary buttons (was the green --bet). White text on --accent = 4.55:1 (passes AA); hover =
   the site's --accent-hover like the header's "Join now" (3.8:1 while the pointer is on it, so a
   faint text shadow keeps the words crisp). Disabled = the kit's .5 opacity. Colours live in these
   variables — a game that needs another colour sets the variables (or uses a kit modifier below),
   never `background` directly, so hover keeps working. */
.og-btn--bet {
  --og-bet-bg: var(--accent);
  --og-bet-bg-hover: var(--accent-hover);
  --og-bet-fg: var(--accent-text);
  --og-bet-glow: rgba(var(--accent-rgb), .7);
  --og-bet-text-shadow: 0 1px 1px rgba(0, 0, 0, .22); /* keeps white words crisp on the lighter hover blue */
  height: var(--og-bet-h);
  background: var(--og-bet-bg);
  color: var(--og-bet-fg);
  font-size: 15px;
  font-weight: 800;
  text-shadow: var(--og-bet-text-shadow);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -2px 0 rgba(0, 0, 0, .12),
    0 6px 18px -10px var(--og-bet-glow);
}
/* A Bet button locked until the last result has landed (Dice, owner 2026-10-21: "show a subtle visual during the
   lock"): a little dimmer, no press, and a thin light running along its foot (transform only; none with reduced motion).
   Any kit button can carry it (the same evening, HiLo / Blackjack's waiting look: the pressed Hit, Stand, guess … while
   its request is out) — for a Bet button the rules below are exactly what they were. */
.og-btn.is-cooling { position: relative; overflow: hidden; opacity: .86; cursor: default; }
.og-btn.is-cooling:active { transform: none; }
.og-btn.is-cooling::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-100%);
  animation: og-bet-cool .32s linear infinite;
  pointer-events: none;
}
@keyframes og-bet-cool { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .og-btn.is-cooling::after { animation: none; transform: none; opacity: .5; } }
/* Cash Out's amount after its words (owner 2026-10-21: "The cashout button shows the cash-out amount"): the same colour,
   a figure that reads exactly (.og-num) */
.og-btn__amount { margin-left: 8px; font-variant-numeric: tabular-nums; }
/* Gold Bet button (a free / bonus round paid by the house, e.g. a Keno free play):
   class="og-btn og-btn--bet og-btn--gold". Dark text — white is unreadable on gold. */
.og-btn--bet.og-btn--gold {
  --og-bet-bg: var(--gold);
  --og-bet-bg-hover: color-mix(in srgb, var(--gold) 82%, #fff);
  --og-bet-fg: var(--bet-text, #05080a);
  --og-bet-glow: rgba(var(--gold-rgb), .6);
  --og-bet-text-shadow: none;
}
/* Stop auto-bet ("Stop Autobet"): red, also on a Bet button (.og-btn--bet.og-btn--stop wins over
   blue and gold) */
.og-btn--stop,
.og-btn--bet.og-btn--stop {
  background: rgba(var(--danger-rgb), .14);
  color: var(--danger);
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(var(--danger-rgb), .45);
}
.og-btn--bet.og-btn--stop { height: var(--og-bet-h); font-size: 15px; font-weight: 800; }
/* Quiet: outlined, for low-priority actions (Skip, Clear) */
.og-btn--quiet {
  background: transparent;
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.og-btn:disabled { opacity: var(--disabled-opacity, .5); cursor: not-allowed; }
/* Rows of buttons: equal widths; --grid makes a 2-column grid (Hit/Stand/Split/Double) */
.og-btn-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}
.og-btn-row--grid {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── 8. Read-only fields (Profit on Win, Current Profit …) ──────────── */
.og-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: var(--og-field-h);
  padding: 0 12px;
  background: var(--bg-input);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  box-shadow: var(--og-sink);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.og-field__value,
.og-field > input {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.og-field > input {
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.og-field__suffix { flex: none; color: var(--text-dim); font-size: 13px; font-weight: 700; }
/* Profit read-outs (Profit on Win, Current Profit, Last Game Profit …) — ONE pattern in every game:
     <div class="og-group">
       <div class="og-label-row"><span class="og-label">Current Profit</span>
                                 <span class="og-label__value">1.00×</span></div>   (optional, right)
       <div class="og-field [og-positive|og-negative]"><span class="og-field__value">$0.00</span></div>
     </div>
   White at zero; add .og-positive only when the amount is > 0 and .og-negative only when < 0.
   (The old "label inside the card" read-out, .og-stat, was removed in the polish pass: every game
   uses this pattern now.) */
/* Win / loss colour of a read-out: on the field itself, or on its value */
.og-positive,
.og-positive .og-field__value { color: var(--success); }
.og-negative,
.og-negative .og-field__value { color: var(--danger); }
/* Exact value tip (owner, 2026-10-09: a readable amount "with full precision available on demand"):
   <OgExactValue> (src/components/originals/OgExactValue.tsx) as the only child of a read-out's .og-field.
   The field shows the normal money format; the whole field is the button (hover / keyboard focus with a
   mouse, a tap on touch screens) and a tip above it shows the exact amount. A faint dotted underline says
   there is more. Tip look = the RTP tag's tip (fairness-modal.css .pfk-rtp-tip). */
.og-exact {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  min-width: 0;
  margin: 0 -12px;               /* over the field's side padding: the whole field is the touch target */
}
.og-exact__value {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: help;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.og-exact__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.7;              /* room under the baseline for the underline (overflow clips) */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.og-exact__value:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.og-exact__tip {
  position: absolute;
  z-index: 30;
  left: 0;
  bottom: calc(100% + 9px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  max-width: min(300px, calc(100vw - 32px));
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .3));
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--og-dur) var(--og-ease), transform var(--og-dur) var(--og-ease), visibility var(--og-dur);
  pointer-events: none;
}
.og-exact.is-below .og-exact__tip { bottom: auto; top: calc(100% + 9px); transform: translateY(-4px); }
.og-exact.is-open .og-exact__tip,
.og-exact__value:focus-visible + .og-exact__tip { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
  .og-exact:hover .og-exact__tip { opacity: 1; visibility: visible; transform: none; }
}
.og-exact__label { color: var(--text-dim); }
.og-exact__figure {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.og-exact__note { margin-top: 2px; color: var(--text-muted); font-weight: 500; }
/* Inline variant: a short value inside a label row (the multiplier on the right of "Current Profit" /
   "Current Payout"). It keeps the classes of the value it replaces (og-label__value …) but never clips its
   tip, which opens to the left from the value's right edge so it stays on screen. */
.og-exact--inline {
  flex: none;
  align-self: auto;
  display: inline-flex;
  margin: 0;
  overflow: visible;
}
.og-exact--inline .og-exact__value {
  width: auto;
  padding: 0;
  border-radius: 3px;
}
.og-exact--inline .og-exact__text {
  overflow: visible;
  line-height: inherit;
  text-underline-offset: 3px;
}
.og-exact--inline .og-exact__tip { left: auto; right: 0; }

/* STAT PANEL (src/components/originals/OgStats.tsx; owner 2026-10-21: "large bold numbers, current multiplier and
   profit in green, the next tile's multiplier/profit, a smooth count-up plus a pulse on change"): a sunken box of rows —
   the label on the left, the big figure and its multiplier on the right. win rows go green above zero, next rows are a
   step quieter, plain rows are facts. Figures pulse once when they change (transform only); none with reduced motion. */
.og-stats {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 4px 12px;
  background: var(--bg-input);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  box-shadow: var(--og-sink);
}
/* a bit smaller since 2026-10-21 (owner: "make this a bit smaller" … "not just for keno for all original"): 18 px figures,
   a 12 px multiplier, 34 px rows (were 22 / 14 / 40) */
.og-stats__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 34px;
  padding: 4px 0;
}
.og-stats__row + .og-stats__row { border-top: 1px solid rgba(255, 255, 255, .06); }
.og-stats__label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}
.og-stats__figures {
  display: flex;
  flex: 0 1 auto;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.og-stats__main,
.og-stats__side {
  display: inline-block;          /* the pulse is a transform */
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform-origin: 100% 60%;
}
.og-stats__main { color: var(--text-primary); font-size: 18px; font-weight: 800; line-height: 1.15; }
.og-stats__side { color: var(--text-muted); font-size: 12px; font-weight: 700; }
/* every row's figure the same size (owner 2026-10-21: "make both of these the same size for current and next tile"):
   the next row stays a step quieter by its colour only */
.og-stats__row--next .og-stats__main { color: color-mix(in srgb, var(--text-primary) 82%, var(--text-muted)); }
.og-stats__row--win.is-positive :is(.og-stats__main, .og-stats__side) { color: var(--success); }
.og-stats__exact { color: inherit; }
.og-stats :is(.og-stats__main, .og-stats__side).is-pulse { animation: og-stat-pulse .36s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes og-stat-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .og-stats :is(.og-stats__main, .og-stats__side).is-pulse { animation: none; }
}
/* inline: the rows side by side as cells, label above figure (a strip, e.g. Glass Bridge's dock) */
.og-stats--inline { flex-direction: row; padding: 2px 4px; }
.og-stats--inline .og-stats__row {
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 0;
  padding: 4px 8px;
}
.og-stats--inline .og-stats__row + .og-stats__row { border-top: 0; border-left: 1px solid rgba(255, 255, 255, .06); }
.og-stats--inline .og-stats__label { font-size: 11px; }
.og-stats--inline .og-stats__figures { justify-content: center; gap: 5px; }
.og-stats--inline .og-stats__main,
.og-stats--inline .og-stats__row--next .og-stats__main,
.og-stats--inline .og-stats__row--plain .og-stats__main { font-size: 16px; transform-origin: 50% 60%; }
.og-stats--inline .og-stats__side { font-size: 12px; }

/* On / off switch (Advanced, hotkeys …): <button role="switch" aria-checked class="og-switch"><span class="og-switch__knob"/></button> */
.og-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--bg-input);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--og-sink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color var(--og-dur) var(--og-ease), box-shadow var(--og-dur) var(--og-ease);
}
.og-switch::before { content: ""; position: absolute; inset: -11px -6px; } /* 44px-tall touch target */
.og-switch:is(.is-active, [aria-checked="true"], [aria-pressed="true"]) {
  background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.og-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  pointer-events: none;
  transition: transform var(--og-dur) var(--og-ease);
}
.og-switch:is(.is-active, [aria-checked="true"], [aria-pressed="true"]) .og-switch__knob { transform: translateX(18px); }
.og-switch:disabled { opacity: .45; cursor: not-allowed; }
/* Label + switch on one line ("Advanced  ◯") */
.og-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
  min-width: 0;
}

/* ── 9. Messages ────────────────────────────────────────────────────── */
/* Limit message right under one field ("Min bet is $0.10") */
/* (status UI family: light text, the colour only in a 6px dot — the field itself gets the red edge) */
.og-field-error {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #e9eff6;
  font-family: var(--og-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.og-field-error::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: calc(0.675em - 3px);
  border-radius: 50%;
  background: var(--danger);
}
/* Quiet hint box in the panel ("Enter a bet to play with real funds, or $0 for demo") */
.og-hint {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(var(--bg-elevated-rgb), .2);
  box-shadow: inset 0 0 0 1px rgba(var(--bg-elevated-rgb), .4);
  color: var(--text-muted);
  font-family: var(--og-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}
.og-error {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgba(var(--danger-rgb), .12);
  box-shadow: inset 0 0 0 1px rgba(var(--danger-rgb), .35);
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.og-help {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

/* ── 10. Stage (the game area) ──────────────────────────────────────── */
.og-stage {
  grid-area: stage;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  padding: 24px;
  background:
    radial-gradient(110% 85% at 50% 40%, rgba(var(--bg-secondary-rgb), .55) 0%, rgba(var(--bg-secondary-rgb), 0) 65%),
    var(--bg-sidebar);
  border-top-right-radius: inherit;
  box-shadow:
    inset 14px 0 24px -18px rgba(0, 0, 0, .55),
    inset 0 -14px 24px -18px rgba(0, 0, 0, .45);
}
/* Card-table texture (Blackjack, HiLo): very fine brushed lines */
.og-stage--felt {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .016) 0 1px, rgba(255, 255, 255, 0) 1px 7px),
    radial-gradient(90% 75% at 50% 45%, rgba(var(--bg-secondary-rgb), .6) 0%, rgba(var(--bg-secondary-rgb), 0) 70%),
    var(--bg-sidebar);
}
/* Content that should hug the top instead of being centred */
.og-stage--top { justify-content: flex-start; }
/* Inset box inside the stage (Dice/Limbo Multiplier · Target · Win chance) */
.og-stage-panel {
  width: 100%;
  min-width: 0;
  padding: 12px 16px 16px;
  background: rgba(var(--bg-secondary-rgb), .85);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 24px -14px rgba(0, 0, 0, .7);
}
/* Equal-width columns of groups (fields side by side) */
.og-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
/* Wide info strip ("Select 1–10 numbers to play") */
.og-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  background: rgba(var(--bg-secondary-rgb), .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
/* Raised board tile (Keno numbers, Mines cells) */
.og-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--og-tile-bg);
  color: var(--og-tile-fg);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--og-tile-shadow);
}
.og-tile.is-selected {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 3px 0 rgba(0, 0, 0, .3),
    0 0 18px -6px rgba(var(--accent-rgb), .8);
}
.og-tile.is-dim { opacity: .45; }
.og-tile:disabled { cursor: default; }
/* Soft corner brackets (Keno look) */
.og-tile--corners::before,
.og-tile--corners::after {
  content: "";
  position: absolute;
  width: clamp(6px, 14%, 13px);
  height: clamp(6px, 14%, 13px);
  border: 2px solid rgba(255, 255, 255, .08);
  pointer-events: none;
}
.og-tile--corners::before { top: clamp(3px, 6%, 6px); right: clamp(3px, 6%, 6px); border-left: 0; border-bottom: 0; border-top-right-radius: 4px; }
.og-tile--corners::after { bottom: clamp(3px, 6%, 6px); left: clamp(3px, 6%, 6px); border-right: 0; border-top: 0; border-bottom-left-radius: 4px; }

/* ── 11. Toolbar (bottom of the card) ───────────────────────────────── */
.og-toolbar {
  grid-area: toolbar;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 56px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.og-toolbar__left {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.og-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: none;
}
.og-toolbar__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
}
.og-toolbar__icon svg { width: 20px; height: 20px; display: block; }
/* Pressed / open (Live Stats while its panel is open): the neutral raised look of a selected tab, never a
   blue tint (owner 2026-10-09). */
.og-toolbar__icon:is(.is-active, [aria-pressed="true"]) {
  background: rgba(var(--bg-elevated-rgb), .55);
  color: var(--text-primary);
}
/* A toggle whose icon shows its own state (Sound: speaker with waves / with a cross — OgToolbarAction
   stateInIcon): the plain surface of its neighbours in both states; hover and focus as theirs. */
.og-toolbar__icon--state-in-icon:is(.is-active, [aria-pressed="true"]) {
  background: transparent;
  color: var(--text-muted);
}
.og-toolbar__icon:disabled { opacity: .45; cursor: not-allowed; }
/* OgToolbar action with hideOnTouch (e.g. Hotkeys): not shown on touch screens — phones and tablets
   have no keys to press. A narrow desktop window keeps it (its keyboard still works). */
@media (hover: none) and (pointer: coarse) {
  .og-toolbar__icon--no-touch { display: none; }
}

/* Hotkeys window (src/components/originals/hotkeys/OgHotkeys.tsx, every house game, owner 2026-10-13): the
   switch, the game's keys, three short notes. It is put on <body> (over the site header), outside the .og-shell
   card where the kit's variables are set, so the ones the switch reads are given here with the kit's values. */
.og-hk-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000; /* over the site header and side menu, like the Fairness window */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(var(--bg-sidebar-rgb), .78);
  backdrop-filter: blur(6px);
}
.og-hk {
  --og-sink: inset 0 1px 2px rgba(0, 0, 0, .3);
  --og-dur: var(--dur-fast, .16s);
  --og-ease: var(--ease-out, cubic-bezier(.33, 1, .68, 1));
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: min(90vh, 640px);
  overflow-y: auto;
  padding: 24px 24px 20px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-xl);
  outline: none;
}
/* Close X: look + size from .gz-close (frame.css); this only places it */
.og-hk__close { position: absolute; top: 16px; right: 16px; z-index: 2; }
.og-hk__title { margin: 0 40px 18px 0; color: var(--text-primary); font-size: 16px; font-weight: 700; }
.og-hk__switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}
.og-hk__switch-label { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.og-hk__list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; transition: opacity var(--og-dur) var(--og-ease); }
.og-hk__list.is-off { opacity: .55; }
.og-hk__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.og-hk__row dt { color: var(--text-muted); font-size: 13px; font-weight: 600; }
.og-hk__row dd { display: inline-flex; align-items: center; gap: 6px; margin: 0; flex: none; }
.og-hk__or { color: var(--text-dim); font-size: 12px; }
.og-hk__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 5px 9px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 0 rgba(0, 0, 0, .3);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
}
.og-hk__kbd--wide { min-width: 64px; }
.og-hk__note { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.5; }
@media (max-width: 550px) {
  .og-hk-backdrop { align-items: stretch; padding: max(26px, env(safe-area-inset-top)) 0 max(0px, env(safe-area-inset-bottom)); }
  .og-hk { max-width: none; max-height: none; height: 100%; border-left: none; border-right: none; border-radius: 0; }
}

/* Currency chip + its list */
.og-currency-wrap { position: relative; flex: none; }
.og-currency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--og-sink);
}
.og-currency__icon { width: 20px; height: 20px; flex: none; display: block; object-fit: contain; }
.og-currency__flag { font-size: 16px; line-height: 1; }
.og-currency__chev {
  width: 10px;
  height: 10px;
  flex: none;
  color: var(--text-dim);
  transition: transform var(--og-dur) var(--og-ease);
}
.og-currency[aria-expanded="true"] .og-currency__chev { transform: rotate(180deg); }
.og-currency:disabled { cursor: default; }
.og-currency-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 210px;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  transform-origin: bottom right;
  animation: og-pop var(--dur-base, .22s) var(--og-ease);
}
.og-currency-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}
.og-currency-menu__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
  font-weight: 500;
}
.og-currency-menu__item.is-active { background: rgba(var(--accent-rgb), .14); }
.og-currency-menu__check { width: 14px; height: 14px; flex: none; color: var(--og-accent-text); }

/* Fairness link */
.og-fair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.og-fair svg { width: 16px; height: 16px; flex: none; display: block; }

@keyframes og-pop {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ── 12. Hover / press (pointer devices only — no sticky hover on touch) */
@media (hover: hover) and (pointer: fine) {
  .og-tab:not(:disabled):not(.is-active, [aria-selected="true"]):hover {
    background: rgba(var(--bg-elevated-rgb), .3);
    color: var(--text-primary);
  }
  .og-amount:not(:focus-within):hover { border-color: var(--field-border-hover); }
  .og-chip:not(:disabled):not(.is-active, [aria-pressed="true"]):hover { background: var(--bg-elevated-hover); }
  .og-chip.og-chip:not(:disabled):is(.is-active, [aria-pressed="true"]):hover { background: var(--accent-hover); }
  .og-seg__btn:not(:disabled):not(.is-active, [aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]):hover {
    background: rgba(var(--bg-elevated-rgb), .85);
  }
  .og-seg--track .og-seg__btn:not(:disabled):not(.is-active, [aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]):hover {
    background: rgba(var(--bg-elevated-rgb), .3);
    color: var(--text-primary);
  }
  .og-btn:not(:disabled):hover { background: var(--bg-elevated-hover); }
  .og-btn--bet:not(:disabled):hover { background: var(--og-bet-bg-hover); }
  .og-btn--stop:not(:disabled):hover,
  .og-btn--bet.og-btn--stop:not(:disabled):hover { background: rgba(var(--danger-rgb), .22); }
  .og-btn--quiet:not(:disabled):hover { background: rgba(var(--bg-elevated-rgb), .3); color: var(--text-primary); }
  .og-tile:not(:disabled):not(.is-selected):hover {
    background: var(--og-tile-bg-hover);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: var(--og-tile-shadow-hover);
  }
  .og-label__hint:hover { color: var(--text-primary); }
  .og-toolbar__icon:not(:disabled):not(.is-active, [aria-pressed="true"]):hover,
  .og-toolbar__icon--state-in-icon:not(:disabled):hover {
    background: rgba(var(--bg-elevated-rgb), .35);
    color: var(--text-primary);
  }
  .og-currency:not(:disabled):hover { border-color: var(--border-strong); }
  .og-currency-menu__item:not(.is-active):hover { background: rgba(var(--bg-elevated-rgb), .5); }
  .og-fair:hover { background: rgba(var(--bg-elevated-rgb), .35); color: var(--text-primary); }
}
/* The like button (OgToolbar `favourite`, next to Fair Play; owner 2026-10-25): a plain heart like its neighbours, a
   filled red one once the game is liked — also while pointed at. */
.og-toolbar .og-toolbar__icon.og-toolbar__fav:is(.is-active, [aria-pressed="true"]) { color: var(--team-red-vivid); }
.og-chip:not(:disabled):active,
.og-seg__btn:not(:disabled):active,
.og-btn:not(:disabled):active { transform: translateY(1px); }
.og-tile:not(:disabled):active { transform: translateY(1px); }

/* ── 13. Keyboard focus (one ring, the site's --focus-ring) ─────────── */
.og-tab:focus-visible, .og-seg__btn:focus-visible, .og-btn:focus-visible,
.og-tile:focus-visible, .og-label__hint:focus-visible, .og-toolbar__icon:focus-visible,
.og-currency:focus-visible, .og-currency-menu__item:focus-visible, .og-fair:focus-visible,
.og-switch:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.og-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.og-currency-menu__item:focus-visible { outline-offset: -2px; }

/* ── 14. Phones: stage on top, panel under it, full width ───────────── */
@media (max-width: 768px) {
  .og-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "stage" "panel" "toolbar";
  }
  .og-shell > .og-stage {
    min-height: var(--og-stage-min-h-phone);
    padding: 16px;
    border-top-left-radius: inherit;
    box-shadow: inset 0 -14px 24px -18px rgba(0, 0, 0, .45);
  }
  .og-shell > .og-panel {
    border-right: 0;
    border-top: 1px solid var(--border-color);
    border-top-left-radius: 0;
  }
  .og-shell > .og-panel > .og-tabs { order: -2; }
  .og-shell > .og-panel > .og-mobile-first { order: -1; }
  .og-shell > .og-toolbar { min-height: 52px; padding: 6px 8px; gap: 8px; }
  .og-shell .og-toolbar__left { overflow-x: auto; scrollbar-width: none; }
  .og-shell .og-toolbar__left::-webkit-scrollbar { display: none; }
  .og-shell .og-toolbar__icon { width: 40px; height: 40px; }
  /* one row height on touch screens: currency + Fairness as tall as the icon buttons */
  .og-shell .og-currency, .og-shell .og-fair { height: 40px; }
  .og-shell .og-stage-panel { padding: 10px 12px 12px; }
  .og-shell .og-row { gap: 8px; }
}
/* Phones (stacked card) — toolbar and currency list (mobile QA 2026-10-08, LG-06 / LG-07):
   - the icon buttons never shrink under their own width (on a 320px phone the Sound button used to be
     cut and sat half under the currency chip); if a row really can't hold everything, the currency +
     Fair Play group moves onto its own line instead of overlapping;
   - the currency list opens from the toolbar's right edge (not the chip's), so on a 320px phone it no
     longer runs past the left edge of the screen, and it is never wider or taller than the screen. */
@media (max-width: 768px) {
  .og-shell > .og-toolbar { position: relative; flex-wrap: wrap; row-gap: 4px; }
  .og-shell .og-toolbar__left { flex: none; overflow: visible; }
  .og-shell .og-currency-wrap { position: static; }
  .og-shell .og-currency-menu {
    right: 8px;
    bottom: calc(100% + 4px);
    max-width: calc(100% - 16px);
    max-height: min(320px, 60vh);
    overflow-y: auto;
  }
}
.og-shell--stacked > .og-toolbar { position: relative; flex-wrap: wrap; row-gap: 4px; }
.og-shell--stacked .og-toolbar__left { flex: none; overflow: visible; }
.og-shell--stacked .og-currency-wrap { position: static; }
.og-shell--stacked .og-currency-menu {
  right: 8px;
  bottom: calc(100% + 4px);
  max-width: calc(100% - 16px);
  max-height: min(320px, 60vh);
  overflow-y: auto;
}
/* Short phones (iPhone SE 320×568 and the like): the game, the Manual / Auto tabs and the Bet button
   fit on the first screen together, between the phone header and the bottom menu bar, so the player
   doesn't scroll between the board and Bet / Cash Out every round (mobile QA 2026-10-08, LG-08).
   Taller phones keep the normal sizes. A game whose own stage is taller sets its own short-screen
   size in its stylesheet (Dice, Wheel, Blackjack). */
@media (max-width: 768px) and (max-height: 640px) and (orientation: portrait) {
  .og-shell { --og-stage-min-h-phone: 288px; }
  .og-shell > .og-stage { padding: 12px; }
  .og-shell > .og-panel { padding: 10px; gap: 10px; }
  .og-shell > .og-panel > .og-tabs { padding: 3px; }
  .og-shell > .og-panel > .og-tabs > .og-tab { height: 34px; }
}
/* Phones held sideways (and other short screens wider than 768px): the side-by-side card is as tall as
   the space under the header instead of the 700px desktop height, so the game and the Bet button are on
   screen together (a 390px-tall landscape phone showed the top of the stage and nothing else; mobile QA
   2026-10-08, LG-17 / LG-19). A panel or stage that needs more room still makes the card taller. */
@media (min-width: 769px) and (max-height: 500px) {
  .og-shell { --og-min-h: max(300px, calc(100dvh - var(--header-h, 60px) - 24px)); }
}
/* Small phones (iPhone SE, 320px): the toolbar row is tighter so two icon buttons, the currency chip
   and the "Fair Play" button (words kept) still fit on one line. */
@media (max-width: 359px) {
  .og-shell > .og-toolbar { padding: 6px; gap: 4px; }
  .og-shell .og-toolbar__right { gap: 4px; }
  .og-shell .og-currency { gap: 4px; padding: 0 6px; }
  .og-shell .og-fair { gap: 4px; padding: 0 6px; }
}
/* Same layout forced by the game (e.g. a game that switches to its phone view earlier) */
.og-shell.og-shell--stacked {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas: "stage" "panel" "toolbar";
}
.og-shell--stacked > .og-stage {
  min-height: var(--og-stage-min-h-phone);
  padding: 16px;
  border-top-left-radius: inherit;
  box-shadow: inset 0 -14px 24px -18px rgba(0, 0, 0, .45);
}
.og-shell--stacked > .og-panel {
  border-right: 0;
  border-top: 1px solid var(--border-color);
  border-top-left-radius: 0;
}
.og-shell--stacked > .og-panel > .og-tabs { order: -2; }
.og-shell--stacked > .og-panel > .og-mobile-first { order: -1; }
.og-shell--stacked > .og-toolbar { min-height: 52px; padding: 6px 8px; gap: 8px; }
.og-shell--stacked .og-toolbar__left { overflow-x: auto; scrollbar-width: none; }
.og-shell--stacked .og-toolbar__left::-webkit-scrollbar { display: none; }

/* ── 14b. Win card (owner 2026-10-09: "when you win on house games make that animation look better"; 2026-10-15:
   "needs to change its bad and not needed on some games … its not in the style of the site") ──
   <OgWinCard> (src/components/originals/OgWinCard.tsx) over the middle of the board in Mines, Keno, HiLo and Wheel
   (Dice, Limbo and Blackjack show none): the multiplier, a thin rule and the payout (counting up, the normal money
   format) on a small flat card. This is the plain look; the castle look is "THE WIN PLAQUE" in theme-castle.css.
   No glow, sweep or sparks; it pops in / goes with GSAP (opacity / scale, 0.2 s + 1.5 s + 0.2 s) and is never
   clickable. Placement: centred at 40% of the nearest positioned parent (the stage) by default; .og-win--below =
   bottom centre of the parent; a game can move it with its own class. */
.og-win {
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 120;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.og-win--below { top: auto; bottom: 6px; transform: translateX(-50%); }
.og-win__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 168px;
  overflow: hidden;
  border: 2px solid var(--success);
  border-radius: var(--radius-lg);
  background: var(--bg-input);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .6);
  font-family: var(--og-font, "RM Neue", Helvetica, Arial, sans-serif);
  text-align: center;
  white-space: nowrap;
  will-change: transform, opacity;
}
/* the two winking stars belong to the castle look */
.og-win__star { display: none; }
/* two bands (owner 2026-10-21, a reference card: the multiplier on the green top, the payout in USD on the dark bottom) */
.og-win__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 22px 9px;
  background: var(--success);
  color: #0b1a12;
}
.og-win__mult {
  color: inherit;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.og-win__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 16px;
  background: var(--bg-input);
}
.og-win__coin { flex: none; width: 16px; height: 16px; image-rendering: pixelated; }
.og-win__tag {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.og-win__amount {
  display: inline-grid;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
/* The final amount (hidden) and the counting one share one cell: the card never changes size */
.og-win__amount > span { grid-area: 1 / 1; }
.og-win__amount-room { visibility: hidden; }
.og-win__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 400px) {
  .og-win__card { min-width: 150px; }
  .og-win__mult { font-size: 28px; }
  .og-win__amount { font-size: 16px; }
}

/* ── 14c. Win effect (OgWinFx.tsx; owner 2026-10-21 "Win emphasis, all originals"): on every round that paid MORE than it
   staked, the game section glows green for a moment — ONE soft wash that fades in and out: no border, no rings, no hard
   flash (owner, the same evening: "make the green flash on the screen after an originals win less and dont have a border
   around it just glow the gmae section green for a tiny bit not harsh"; the pixel rings + flash of that morning are in
   ../removed-features-backup/win-glow-soft-2026-10-21/); a little stronger and longer with the multiplier (lib/audio/
   outcome.ts winTier), big = pixel coins too. No win plaque of its own (owner, the same day: "no winners banner"); Mines,
   Keno and HiLo have their own win card, sized by the same tier (.og-win--medium / --big below). Display only:
   pointer-events none. Auto-bet / fast play: .is-short. Reduced motion: the same fade, no coins (OgWinFx). ── */
.og-winfx {
  position: absolute;
  inset: 0;
  z-index: 110;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.og-winfx__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(ellipse 80% 75% at 50% 45%,
    rgba(var(--success-rgb), 0.11), rgba(var(--success-rgb), 0.05) 70%, rgba(var(--success-rgb), 0.035));
  animation: og-winfx-glow 0.56s both;
}
.og-winfx__glow.is-short { animation-duration: 0.36s; }
.og-winfx__glow--medium {
  background: radial-gradient(ellipse 80% 75% at 50% 45%,
    rgba(var(--success-rgb), 0.15), rgba(var(--success-rgb), 0.07) 70%, rgba(var(--success-rgb), 0.05));
  animation-duration: 0.9s;
}
.og-winfx__glow--medium.is-short { animation-duration: 0.6s; }
.og-winfx__glow--big {
  background: radial-gradient(ellipse 80% 75% at 50% 45%,
    rgba(var(--success-rgb), 0.2), rgba(var(--success-rgb), 0.1) 70%, rgba(var(--success-rgb), 0.07));
  animation-duration: 1.4s;
}
.og-winfx__glow--big.is-short { animation-duration: 1s; }
/* in quickly, out gently — never a blink or a step */
@keyframes og-winfx-glow {
  0% { opacity: 0; animation-timing-function: ease-out; }
  24% { opacity: 1; animation-timing-function: ease-in-out; }
  100% { opacity: 0; }
}

/* big: pixel coins (the site's gold coin) and square green sparks burst from the middle and fall away */
.og-winfx__coins {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 0;
  height: 0;
}
.og-winfx__coin,
.og-winfx__spark {
  position: absolute;
  top: -13px;
  left: -13px;
  width: 26px;
  height: 26px;
  opacity: 0;
  image-rendering: pixelated;
  animation: og-winfx-coin 1.6s both;
  will-change: transform, opacity;
}
.og-winfx__spark {
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  background: var(--success);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}
.og-winfx__coins.is-short > * { animation-duration: 1.1s; }
@keyframes og-winfx-coin {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); animation-timing-function: cubic-bezier(0.15, 0.7, 0.4, 1); }
  8% { opacity: 1; }
  42% { transform: translate(var(--x1), var(--y1)) scale(1) rotate(calc(var(--r) * 0.5)); animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.6); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x2), var(--y2)) scale(0.9) rotate(var(--r)); }
}

/* the win's size on the win card (Mines / Keno / HiLo): a bigger win, bigger figures; BIG WIN over the multiplier (in the
   green top band: the band's dark words) */
.og-win__kicker {
  color: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.og-win--medium .og-win__mult { font-size: 38px; }
.og-win--medium .og-win__amount { font-size: 19px; }
.og-win--big .og-win__card { min-width: 210px; }
.og-win--big .og-win__mult { font-size: 46px; }
.og-win--big .og-win__amount { font-size: 22px; }
@media (max-width: 400px) {
  .og-win--medium .og-win__mult { font-size: 32px; }
  .og-win--medium .og-win__amount { font-size: 18px; }
  .og-win--big .og-win__card { min-width: 190px; }
  .og-win--big .og-win__mult { font-size: 38px; }
  .og-win--big .og-win__amount { font-size: 21px; }
}

/* ── 14d. No sound button in a game on phones (owner 2026-10-24: "Audio button shouldn't show on games on mobile it
   should show that's it's in menu at the bottom maybe on the top right of the menu icon in footer is a little music thing
   just to let them know"): the toolbar's Sound button is hidden up to 768 px; sound and music are the menu's switches
   (SidebarSound.tsx) and the bottom bar's Menu carries a small music note (mobile-nav.css "the menu's music note").
   The phone speaker of 2026-10-23 in the card's corner (OgPhoneSpeaker.tsx, its strip over Mines / Keno / HiLo / Limbo,
   the "Tap to mute" bubble) is in ../removed-features-backup/phone-sound-in-menu-2026-10-24/ (undo there). */
@media (max-width: 768px) {
  .og-shell > .og-toolbar [data-action="sound"] { display: none; }
}

/* ── 15. Reduced motion: kit controls stop moving (game animations are the game's own) */
@media (prefers-reduced-motion: reduce) {
  .og-tab, .og-seg__btn, .og-btn, .og-chip, .og-tile, .og-label__hint, .og-amount,
  .og-toolbar__icon, .og-currency, .og-currency__chev, .og-currency-menu__item, .og-fair,
  .og-switch, .og-switch__knob {
    transition: none;
  }
  .og-chip:active, .og-seg__btn:active, .og-btn:active, .og-tile:active,
  .og-tile:hover { transform: none !important; }
  .og-currency-menu { animation: none; }
  .og-exact__tip { transition: none; transform: none !important; }
  /* Win card: a plain fade (OgWinCard skips the pop and the count-up); the castle look's stars stay still */
  .og-win__star { animation: none !important; }
}

/* Touch screens, every width (mobile QA 2026-10-08, LG-29): the toolbar's icon buttons, currency chip
   and Fair Play are 40px tall like on phones also when a touch screen gets the side-by-side card (a phone
   held sideways, a tablet), and the display-currency list has 40px rows (they were 38px; the list opens
   upwards, so it stays as short as it can be on a 390px-tall landscape screen). */
@media (hover: none) and (pointer: coarse) {
  .og-shell .og-toolbar__icon { width: 40px; height: 40px; }
  .og-shell .og-currency, .og-shell .og-fair { height: 40px; }
  .og-currency-menu__item { height: 40px; }
}