/* ── Fonts ──────────────────────────────────────────────────────────
   Site typeface: FIGTREE (SIL Open Font License, /fonts/figtree/LICENSE) — the
   closest free match to Stake's Proxima Nova (round geometric caps, two-storey
   "a"). Self-hosted, latin subset, real files for weights 400/500/600/700/800.

   The CSS across the site refers to three legacy family names ("RM Neue",
   "RM Neue-Regular", "RM Neue-Bold"). Instead of rewriting 70+ stylesheets,
   those names are mapped here onto Figtree weight files, so every requested
   weight resolves to a real file (no faux bold). "RM Neue-Bold" always means
   bold. To go back to the old typeface, restore the /fonts/RMNeue-*.woff2
   @font-face rules (files are still in /public/fonts). The ascent/descent
   overrides are kept so text stays vertically centred in buttons/inputs. */
@font-face { font-family: "RM Neue"; src: url("/fonts/figtree/figtree-latin-400.woff2") format("woff2"); font-weight: 100 449; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "RM Neue"; src: url("/fonts/figtree/figtree-latin-500.woff2") format("woff2"); font-weight: 450 549; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "RM Neue"; src: url("/fonts/figtree/figtree-latin-600.woff2") format("woff2"); font-weight: 550 649; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "RM Neue"; src: url("/fonts/figtree/figtree-latin-700.woff2") format("woff2"); font-weight: 650 749; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "RM Neue"; src: url("/fonts/figtree/figtree-latin-800.woff2") format("woff2"); font-weight: 750 900; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "RM Neue-Regular"; src: url("/fonts/figtree/figtree-latin-400.woff2") format("woff2"); font-weight: 100 449; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "RM Neue-Regular"; src: url("/fonts/figtree/figtree-latin-500.woff2") format("woff2"); font-weight: 450 549; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "RM Neue-Regular"; src: url("/fonts/figtree/figtree-latin-600.woff2") format("woff2"); font-weight: 550 649; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "RM Neue-Regular"; src: url("/fonts/figtree/figtree-latin-700.woff2") format("woff2"); font-weight: 650 749; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "RM Neue-Regular"; src: url("/fonts/figtree/figtree-latin-800.woff2") format("woff2"); font-weight: 750 900; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "RM Neue-Bold"; src: url("/fonts/figtree/figtree-latin-700.woff2") format("woff2"); font-weight: 100 749; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "RM Neue-Bold"; src: url("/fonts/figtree/figtree-latin-800.woff2") format("woff2"); font-weight: 750 900; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
/* Never fake bold/italic — every weight above has a real file. */
html { font-synthesis: none; }
/* Browsers don't let form controls inherit the page font (Chrome on Windows
   falls back to Arial) — this is why Login / Join now / lobby tabs were Arial. */
button, input, select, textarea, optgroup { font-family: inherit; }
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== GLOBAL MOBILE TOUCH FIX =====
   On touch devices:
   1. touch-action: manipulation on all interactive elements
      → removes 300ms tap delay, disables double-tap-to-zoom per element
   2. Horizontal scroll containers get touch-action: manipulation
      → allows both horizontal scroll and vertical page scroll
   3. :active gives instant visual feedback (GPU-accelerated scale)
   4. Covers standard HTML + all custom interactive components
*/
@media (hover: none) and (pointer: coarse) {
  html { -webkit-tap-highlight-color: transparent; }
  a, button, [role="button"], input, select, textarea,
  [onclick], [data-clickable],
  .game-card, .slot-card, .originals-index-card, .original-card,
  .provider-card, .banner-card,
  .lobby-tab, .catnav-dd-btn, .catnav-dd-item,
  .slots-provider-panel-item, .slots-provider-btn-mobile,
  .btn-view-all, .btn-arrow,
  .mobile-account-menu__item, .mobile-bottom-nav__item {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

/* ===== GAME TEXT SELECTION PREVENTION =====
   Prevents text selection on all original game UI elements on touch devices.
   Double-tap on mobile no longer triggers text selection on buttons, labels,
   multipliers, bet amounts, etc. — the game feels like a native app.
   Only applied on touch devices to preserve desktop copy-paste where needed.
*/
@media (hover: none) and (pointer: coarse) {
  .pg-frame,
  .mn-page,
  .limbo-game-container,
  .game-viewport-wrapper,
  .wheel-game-root,
  .keno-container,
  .cf-page {
    -webkit-user-select: none;
    user-select: none;
  }
  /* Re-enable selection inside inputs so users can still edit bet amounts */
  .pg-frame input,
  .pg-frame textarea,
  .mn-page input,
  .mn-page textarea,
  .limbo-game-container input,
  .limbo-game-container textarea,
  .game-viewport-wrapper input,
  .game-viewport-wrapper textarea,
  .wheel-game-root input,
  .wheel-game-root textarea,
  .keno-container input,
  .keno-container textarea,
  .cf-page input,
  .cf-page textarea {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* WebKit/Chrome: RM Neue has tall line-box with line-height: 1.4; normal follows font metrics + overrides */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"] {
  line-height: normal;
}
/* ═══════════════════════════════════════════════════════════════════
   GLOBALNA UI TEMA — boje frejma, headera, sidebara, footera i
   recent-wins trake se menjaju OVDE, na jednom mestu.
   (frame.css se učitava prvi u main.tsx, pa promenljive važe svuda.)
   ═══════════════════════════════════════════════════════════════════ */
:root {
    /* ── Layout ── */
    --sidebar-w: 272px;           /* širina otvorenog sidebara (desktop); header/content/footer se pomeraju za isto */
    --header-h: 60px;             /* visina desktop headera (Stake: 60px); content/loaderi/sidebar top-bar prate ovo */

    /* ── Oblik (Stake-style) ── */
    --radius-sm: 4px;             /* sitni čipovi, badge-evi, progress barovi */
    --radius-md: 6px;             /* dugmad, inputi, tabovi, dropdown stavke */
    --radius-lg: 8px;             /* kartice, game tile-ovi, baneri, paneli, dropdown meniji */
    --radius-xl: 12px;            /* veliki modali / overlay paneli */

    /* ── Dubina (senke) ── */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.12);               /* dugmad, čipovi */
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);         /* kartice, tile-ovi, baneri */
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.18);       /* dropdown meniji, popoveri */
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.2);     /* modali */
    /* Motion: one curve + duration for hover lifts, so every card glides the same way */
    --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);   /* fast start, long soft settle */
    --dur-hover: 0.28s;                               /* colour hovers in header/notifications/rewards/profile — do not change */

    /* ── Motion scale (premium list item 18) — other stylesheets read these with fallbacks,
       so keep the names and values in sync with them ── */
    --dur-press: .08s;            /* :active press feedback */
    --dur-fast: .16s;             /* colour / opacity hovers */
    --dur-base: .22s;             /* panels and dropdowns opening */
    --dur-modal: .3s;             /* modal cards rising in */
    --dur-exit: .16s;             /* anything closing (≈70% of the opening time) */
    --dur-hover-in: .38s;         /* game tile lift on :hover */
    --dur-hover-out: .22s;        /* game tile settling back */
    --dur-sidebar: .4s;           /* sidebar width + page/header/footer offset, all in step (owner 2026-10-14: "sidebar opens too quick … make it smoother": was .26s) */
    --ease-sidebar: cubic-bezier(0.4, 0, 0.2, 1);   /* an even ease in and out (the "fast start" of --ease-premium snapped it open) */
    --dur-dock: .26s;             /* the chat / rewards panel docking on the right: its slide and the page's glide, in step (lib/dockShift.ts, 2026-10-23) */
    --ease-dock: cubic-bezier(0.22, 0.8, 0.24, 1);
    --ease-out: cubic-bezier(.33,1,.68,1);       /* hovers and small UI moves */
    --ease-in: cubic-bezier(.4,0,1,1);           /* things leaving */
    --ease-in-out: cubic-bezier(.65,0,.35,1);    /* scroll-like moves (row arrows) */
    --ease-hover: cubic-bezier(.33,1,.68,1);     /* tile lift */

    /* ── Lift and depth for hovered tiles/cards ── */
    --lift-tile: -5px;            /* game tiles */
    --lift-card: -4px;            /* wide cards: banners, providers */
    --lift-subtle: -2px;          /* account / rewards cards */
    --shadow-tile-hover: 0 14px 28px -10px rgba(0,0,0,.6);
    --ring-tile-hover: 0 0 0 1px rgba(143,214,255,.35);
    --glow-tile-hover: 0 0 16px rgba(80,170,255,.18);
    --ring-tile-inset: inset 0 0 0 1.5px rgba(143,214,255,.85);

    /* ── Tipografska skala (umesto 9 nasumičnih veličina) ── */
    --fs-xs: 12px;                /* meta tekst, badge, sitne oznake */
    --fs-sm: 14px;                /* sekundarni tekst, dugmad, tabovi, sidebar */
    --fs-md: 16px;                /* osnovni tekst */
    --fs-lg: 18px;                /* naslovi sekcija ("Originals", "Trending") */
    --fs-xl: 24px;                /* naslovi stranica */
    --fs-2xl: 32px;               /* hero / veliki brojevi */

    /* ── Pozadine ── */
    /* Stake paleta — vrednosti izmerene iz Stake screenshota (backup stare teme u ../theme-backup/) */
    --bg-primary: #162b39;        /* glavna pozadina stranice + header (Stake: isti ton) */
    --bg-primary-rgb: 22, 43, 57;
    --bg-sidebar: #0e202e;        /* kolona sidebara + footer (tamnija od stranice) */
    --bg-sidebar-rgb: 14, 32, 46;
    --bg-input: #101e27;          /* uvučena polja: search input, balans */
    --bg-secondary: #213545;      /* paneli i kartice na stranici (Stake "Casino" traka) */
    --bg-card: #2a4152;           /* izdignute površine na panelima: tooltipi, shimmer */
    --bg-card-rgb: 42, 65, 82;
    --bg-elevated: #3e596b;       /* siva dugmad (Sign In, social), dropdown meniji */
    --bg-popup: #162b39;          /* user meni, bet-detail popup */
    --bg-chip: #213545;           /* lobby tabovi, dugmad sekcija */
    --bg-chip-hover: #2a4152;
    --bg-elevated-hover: #4b6a7e; /* hover za siva dugmad / ivice inputa */
    --bg-secondary-rgb: 33, 53, 69;
    --bg-elevated-rgb: 62, 89, 107;
    --bg-chip-rgb: 33, 53, 69;
    --bg-popup-rgb: 22, 43, 57;

    /* ── Brend akcenat (plava, Stake; bilo zelena #48A111) ── */
    --accent: #1474e1;
    --accent-rgb: 20, 116, 225;
    --accent-light: #1474e1;          /* Stake dugmad su ravna — isti ton kao --accent */
    --accent-hover: #1a82f0;
    --accent-light-hover: #1a82f0;
    --accent-text: #fff;              /* tekst NA akcentnoj podlozi */
    --cashier: #1474e1;               /* Cashier/Deposit dugme */
    --cashier-hover: #1a82f0;
    --success: #2ddd1e;               /* dobici, live tačka */
    --success-rgb: 45, 221, 30;
    --success-shade: #00cc01;         /* the lower half of the dice bar's win side */

    /* ── Bet dugme u igrama (Stake zelena sa tamnim tekstom) ── */
    --bet: #00e701;
    --bet-rgb: 0, 231, 1;
    --bet-hover: #1fff20;
    --bet-text: #05080a;

    /* ── Teams (owner 2026-10-14: the Blue Crown and the Red Crown; the crowning art's team colours) ── */
    --team-blue: #2f6fd8;
    --team-blue-rgb: 47, 111, 216;
    --team-blue-light: #74a6ff;
    --team-red: #cc3a3a;
    --team-red-rgb: 204, 58, 58;
    --team-red-light: #ff8a7a;
    --team-red-vivid: #ff3d3d;        /* a true bright red for words on the night sky (the lobby's war banner) */
    --team-blue-vivid: #2156c8;       /* the war banner's blue Pepe's tunic (promo-war.png) — the war bar's blue side */

    /* ── Info / plava ── */
    --info: #38bdf8;                  /* aktivna valuta/jezik */
    --info-rgb: 56, 189, 248;
    --badge-blue: #3b82f6;            /* user badge */
    --badge-purple: #6367FF;          /* "NEW" badge u sidebaru */
    --progress: #22d3ee;              /* wager progres bar */
    --progress-dark: #0891b2;

    /* ── Upozorenje / crvena ── */
    --danger: #f87171;                /* logout — THE single red (errors, losses) */
    --danger-rgb: 248, 113, 113;
    /* --success above is THE single win green */

    /* ── Zlato / upozorenje (amber) ── */
    --gold: #ffd54a;                  /* THE single gold (big wins, VIP) */
    --gold-rgb: 255,213,74;
    --warning: #f59e0b;               /* pending / "only send X via Y" notes */
    --warning-rgb: 245,158,11;
    --warning-text: #fcd34d;          /* amber text on rgba(var(--warning-rgb), .08) */

    /* ── Tekst ── three greys only: muted > dim > disabled */
    --text-primary: #ffffff;
    --text-secondary: var(--accent);  /* legacy: akcentni tekst u headeru (prati brend boju) */
    --text-bright: #ffffff;           /* footer naslovi + hover */
    --text-muted: #a8bfdc;            /* footer linkovi, sekundarni tekst ("playing", placeholder) */
    --text-muted-2: #a8bfdc;          /* footer tagline */
    --text-dim: #82a0b6;              /* copyright, meta text (was #6b879c — too faint) */
    --text-disabled: rgba(168,191,220,.45); /* disabled labels, timestamps, placeholders */
    --border-color: #2f4553;          /* suptilne ivice panela (mora se razlikovati od --bg-card) */
    --border-strong: #445866;         /* razdelnici u sidebaru, ivica search inputa */

    /* ── Focus, fields, disabled, scrollbars (item 34) ── */
    --focus-ring: #8fd6ff;            /* keyboard focus outline */
    --field-border: var(--border-color);
    --field-border-hover: var(--border-strong);
    --field-border-focus: var(--bg-elevated-hover);
    --field-focus-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16);
    --disabled-opacity: .5;
    --scrollbar-size: 6px;
    --scrollbar-thumb: var(--bg-elevated);
    --scrollbar-thumb-hover: var(--bg-elevated-hover);

    /* ── Layers ── */
    --z-toast: 100010;                /* toast stack: above the cashier (99999) */
    --z-chat-bubble: 900;             /* live chat bubble: below popup backdrops */

    /* ── Legacy aliasi (stara imena koja se još koriste po fajlovima) ── */
    --accent-blue: var(--accent); --accent-pink: var(--accent); --accent-magenta: var(--accent);
}
/* the computer header a little taller above 1440 px (owner 2026-10-25: "make this top header slightly thicker and all the
   buttons text bigger with it"): 66 px, was 60 (769–1440 px: desktop-density.css, 62, was 56); its buttons 44 px with
   bigger words (header.css). Phones keep their own 62 px header and this token's 60. Undo
   ../removed-features-backup/header-thicker-2026-10-25/README.txt */
@media (min-width: 1441px) { :root { --header-h: 66px; } }
html { overflow-x: hidden; max-width: 100%; }
body { font-family: "RM Neue-Regular", Helvetica, Arial, sans-serif; background: var(--bg-primary); color: var(--text-primary); overflow-x: hidden; max-width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
/* phones: body is not a scroll box of its own (owner 2026-10-23, the phone list: "after scrolling, the bottom bar
   sometimes moved to the middle of the screen and stayed there"): with html AND body overflow-x: hidden, body computes
   overflow-y: auto — a second scroll box under the page's own, the case in which iPhone Safari draws position: fixed
   bars at a stale height when its address bar slides away. clip cuts the same sideways overflow without making a scroll
   box (html still hides it for the screen); browsers without clip keep hidden. Computers unchanged. Undo
   ../removed-features-backup/mobile-list-2026-10-23/README.txt (item 8); the rest: lib/phoneBar.ts, mobile-nav.css */
@supports (overflow-x: clip) {
  @media (max-width: 768px) { body { overflow-x: clip; } }
}
/* Compatibility only: normal-size layout no longer scales text or targets. */
@media (min-width: 769px) and (max-width: 1440px) {
    html[data-density="zoom"] body { zoom: 0.75; min-height: calc(100vh / 0.75); }
    html[data-density="zoom"] .sidebar { height: calc(100vh / 0.75) !important; }
    html[data-density="zoom"] .sg-wrapper { height: calc((100vh / 0.75) - var(--header-h) - 40px) !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    html[data-density="zoom"] body { zoom: 0.65; min-height: calc(100vh / 0.65); }
    html[data-density="zoom"] .sidebar { height: calc(100vh / 0.65) !important; }
    html[data-density="zoom"] .sg-wrapper { height: calc((100vh / 0.65) - var(--header-h) - 40px) !important; }
}
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
@media (max-width: 768px) { html, body { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; } }

/* ═══ PLAYER-ONLY GLOBALS (premium list items 17, 33, 34) ═══════════════
   admin-main.tsx imports this file too, and the admin panel always sets
   html[data-theme], so every global below is scoped to html:not([data-theme])
   and never reaches the panel. */

/* Dark native UI (selects, date pickers, checkboxes) + brand-coloured controls/selection */
html:not([data-theme]) { color-scheme: dark; accent-color: var(--accent); }
/* An iframe whose colour scheme differs from its embedder gets an opaque canvas;
   keep provider/slot iframes on the browser default so they stay as before. */
html:not([data-theme]) iframe { color-scheme: normal; }
html:not([data-theme]) ::selection { background: rgba(var(--accent-rgb), .45); color: #fff; }
/* Crisper white-on-dark text on macOS */
html:not([data-theme]) body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Keyboard focus: one branded ring. Text fields are left out — each field gets
   its own focus shadow (--field-focus-shadow) from the stylesheet that owns it.
   The player-only scope sits in :where() so it adds no specificity: a component's
   own :focus-visible rule (game tiles' glow in game-shine.css, header menus,
   recent-wins cards, inset rings in clipped lists) still replaces this ring. */
:where(html:not([data-theme])) :focus-visible:not(input, textarea, select) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:where(html:not([data-theme])) :focus:not(:focus-visible) { outline: none; }

/* Disabled: not-allowed cursor at zero specificity, so component/game rules still win */
:where(html:not([data-theme]) :is(button, input, select, textarea):disabled) { cursor: not-allowed; }
html:not([data-theme]) .btn:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }

/* Inner scroll areas: one thin scrollbar. Zero specificity (:where), so any element
   that styles or hides its own scrollbar keeps doing so, and the hidden html/body
   scrollbars above still win. The standard properties go to browsers without
   ::-webkit-scrollbar only (Firefox): in Chrome 121+ setting scrollbar-width on an
   element switches off its ::-webkit-scrollbar rules, which would bring back the
   scrollbars that rails/tabs hide with ::-webkit-scrollbar { display: none }. */
@supports not selector(::-webkit-scrollbar) {
  :where(html:not([data-theme]) *) { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
}
:where(html:not([data-theme]) *)::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); background: transparent; }
:where(html:not([data-theme]) *)::-webkit-scrollbar-track { background: transparent; }
:where(html:not([data-theme]) *)::-webkit-scrollbar-corner { background: transparent; }
:where(html:not([data-theme]) *)::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; }
:where(html:not([data-theme]) *)::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* LAYOUT */
#root { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.main-content { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; z-index: 0; background: var(--bg-primary); }
.content-container { margin: 0 auto; flex: 1; display: flex; flex-direction: column; width: 100% !important; min-height: 0; position: relative; }
@media (min-width: 769px) {
    /* A phone turned sideways (viewport-fit=cover): the notch / rounded corners take
       env(safe-area-inset-left/right). The in-flow page (content + footer) moves inside
       them here; the fixed sidebar and header add the same insets (sidebar.css, header.css).
       Every inset is 0 on a desktop, a tablet and a phone held upright. */
    body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
    /* Same duration + curve as the sidebar width, header padding and footer offset
       (--dur-sidebar), so all edges move together */
    .main-content { transition: margin-left var(--dur-sidebar) var(--ease-sidebar), width var(--dur-sidebar) var(--ease-sidebar); margin-top: var(--header-h); }
    body.sidebar-open .main-content { margin-left: var(--sidebar-w); width: calc(100% - var(--sidebar-w)); transition: margin-left var(--dur-sidebar) var(--ease-sidebar), width var(--dur-sidebar) var(--ease-sidebar); }
    body:not(.sidebar-open) .main-content { margin-left: 52px; width: calc(100% - 52px); }
    /* a right-hand panel docking (the chat, the rewards): the page takes its new width in ONE step and glides by
       transform instead (lib/dockShift.ts; owner 2026-10-23: "When I open the chat it laggy pushes the screen to left make
       it clean" — the width transition laid the whole page out again on every frame) */
    body.dock-snap :is(.main-content, .main-footer) { transition: none !important; }
    .section-header__view-all { display: flex !important; }
}
@media (max-width: 768px) {
    .main-content { margin-left: 0; margin-top: 62px; }
    .main-content { padding: 8px 16px 28px; max-width: 100vw; }
    .content-container { max-width: 100%; }
    /* Menu open (on phones body.sidebar-open = the menu sheet is up): keep the page in
       place behind the sheet so its scroll position survives, and hide it only once the
       0.3s slide (sidebar.css) has covered it. Closing shows it at once (no delay in the
       base rule). The root stops scrolling while the menu is open. */
    body.sidebar-open .main-content,
    body.sidebar-open .main-footer { visibility: hidden; transition: visibility 0s linear .3s; }
    html:has(body.sidebar-open) { overflow: hidden; }
}
@media (max-width: 480px) {
    .main-content { margin-top: 62px; padding: 8px 16px 28px; }
}

/* SHARED BUTTONS */
.btn { padding: 11px 24px; border-radius: var(--radius-md); font-weight: 600; font-size: var(--fs-sm); border: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.btn-login { background: var(--bg-elevated); color: var(--text-primary); border: none; border-radius: var(--radius-md); cursor: pointer; }
@media (hover: hover) { .btn-login:hover { background: var(--bg-elevated-hover); } }
.btn-register { background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%); color: var(--accent-text); cursor: pointer; }
@media (hover: hover) { .btn-register:hover { background: linear-gradient(180deg, var(--accent-light-hover) 0%, var(--accent-hover) 100%); cursor: pointer; } }

/* REGISTER / JOIN CTA GLOW — a slow, barely-there "breathing" halo.
   The pulse lives on a decorative ::after whose OPACITY is animated (compositor-only,
   no repaint); the button's own box-shadow stays free for the hover state, so hover
   can transition smoothly. Outer shadows are never painted inside the border box, so
   the layer never tints the label. Keyframes are shared: .home-hero__register
   (home-hero.css) and .vc-btn--primary (vip-club.css) reuse cta-glow-breathe. */
@keyframes cta-glow-breathe {
  from { opacity: 0.3; }
  to   { opacity: 0.85; }
}
.btn-register { position: relative; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.btn-register::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 4px 1px rgba(var(--accent-rgb), 0.5), 0 0 14px 2px rgba(var(--accent-rgb), 0.35); pointer-events: none; animation: cta-glow-breathe 3s ease-in-out infinite alternate; }
@media (hover: hover) { .btn-register:hover { box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.18); } }
@media (prefers-reduced-motion: reduce) { .btn-register::after { animation: none; opacity: 0.3; } }
.btn-login.btn--clicked { transition: background-color var(--dur-fast) var(--ease-out); }
.btn-login.btn--clicked { background: var(--bg-elevated-hover); }
@media (max-width: 768px) {
    .btn { padding: 11px 16px; font-size: var(--fs-sm); }
}

/* Guest visibility toggles */
/* (The phone balance pill is only rendered for a logged-in player, MobileHeader.tsx: no class toggle here,
   which hid it in the first frame after the profile arrived and made the balance fit measure nothing.) */
body:not(.user-logged-in) .header-balance-cashier-row .balance-dropdown-wrap { display: none !important; }
body:not(.user-logged-in) .header-balance-cashier-row, body:not(.user-logged-in) .header-right-section .header-icon-buttons, body:not(.user-logged-in) .header-right-section .header-user-wrap { display: none !important; }

/* ── Close button: the one "X" on the player site ──────────────────────────
   <button className="gz-close" aria-label={…}><CloseIcon /></button>
   (src/components/CloseIcon.tsx). Sizes: default 32px (dialogs, sheets, panels),
   --sm 24px (toasts, chips, clear-a-field), --lg 36px (full-screen sheets on
   phones); add --overlay when it sits on top of artwork or a photo. A component's own class on the same button only positions it
   (position / top / right / margin / display) — never its colour, background,
   size, padding or font. Single-class selectors on purpose: a component's
   display:none / position rules (loaded later) still win. */
.gz-close {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; padding: 0; margin: 0;
  border: none; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06); color: #b1bad3;
  font-size: 0; line-height: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.33,1,.68,1)), color var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.33,1,.68,1)), transform .12s ease;
}
@media (hover: hover) { .gz-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } }
.gz-close:active { transform: scale(0.92); }
.gz-close:focus-visible { outline: 2px solid #8fd6ff; outline-offset: 2px; }
.gz-close__icon { display: block; width: 14px; height: 14px; flex-shrink: 0; pointer-events: none; }
.gz-close--sm { width: 24px; height: 24px; border-radius: var(--radius-sm); }
.gz-close--sm .gz-close__icon { width: 11px; height: 11px; }
.gz-close--lg { width: 36px; height: 36px; }
.gz-close--lg .gz-close__icon { width: 16px; height: 16px; }
/* on top of artwork / photos: darker chip so the X stays readable */
.gz-close--overlay { background: rgba(0, 0, 0, 0.45); color: #fff; }
@media (hover: hover) { .gz-close--overlay:hover { background: rgba(0, 0, 0, 0.6); } }
@media (prefers-reduced-motion: reduce) { .gz-close { transition: none; } .gz-close:active { transform: none; } }
/* --block-m (owner 2026-10-23, the phone list: "restyle the X in the search bar to match the Providers button next to it
   (same size, shape, background, border, icon weight). Same for the X on the Wallet page."): on phones (≤ 768 px) a 42 px
   stone block like the Providers button, with the pixel X of the site's icon set (<CloseIcon pixelOnPhones />, 24 px,
   2-block strokes); its castle edges in theme-castle.css "THE PHONE X BLOCK". Computers keep the plain X. Used by the
   search pop-up's square X and the wallet's X. Undo ../removed-features-backup/mobile-list-2026-10-23/README.txt (item 6) */
.gz-close__px { display: none; }
@media (max-width: 768px) {
  .gz-close--block-m { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--bg-chip); color: var(--text-muted); }
  .gz-close--block-m .gz-close__icon { display: none; }
  .gz-close--block-m .gz-close__px { display: block; pointer-events: none; }
}
@media (max-width: 768px) and (hover: hover) { .gz-close--block-m:hover { background: var(--bg-chip-hover); color: #fff; } }
/* Touch screens (2026-10-09): the X keeps its look and size, and gets an invisible 44 x 44 tap
   area centred on it (a ::before; nothing moves). Zero specificity (:where), so a component's own
   position rule (absolute / fixed for an X laid over a panel) still wins and holds the area just as
   well. The small --sm X (toasts, chips, clear-a-field, a card's corner) keeps its own size: a
   44px area there would cover the text of the field or the card it sits on. */
@media (pointer: coarse) {
  :where(.gz-close:not(.gz-close--sm)) { position: relative; }
  :where(.gz-close:not(.gz-close--sm))::before {
    content: ''; position: absolute;
    top: calc(50% - 22px); left: calc(50% - 22px); width: 44px; height: 44px;
  }
}
/* --phone-lg (with --sm): small on computers, the --lg size of a full-screen sheet's X on phones, with the 44 x 44 tap
   area — the chat panel fills the screen there (owner 2026-10-16: "the x to close chat on mobile needs to be bigger") */
@media (max-width: 768px) {
  .gz-close--sm.gz-close--phone-lg { width: 36px; height: 36px; border-radius: var(--radius-md); }
  .gz-close--sm.gz-close--phone-lg .gz-close__icon { width: 16px; height: 16px; }
}
@media (pointer: coarse) and (max-width: 768px) {
  :where(.gz-close--phone-lg) { position: relative; }
  :where(.gz-close--phone-lg)::before {
    content: ''; position: absolute;
    top: calc(50% - 22px); left: calc(50% - 22px); width: 44px; height: 44px;
  }
}

/* DEPOSIT / AUTH OVERLAY */
.deposit-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99999; display: none; align-items: center; justify-content: center; padding: 0; }
.deposit-overlay.open { display: flex; }
.deposit-overlay__box { width: 100%; height: 100%; max-width: 100%; max-height: 100%; background: transparent; border-radius: 0; overflow: hidden; position: relative; box-shadow: none; }
.deposit-overlay__close { position: absolute; top: 12px; right: 12px; z-index: 10; width: 34px; height: 34px; border: none; background: rgba(255, 255, 255,0.15); color: #fff; border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; transition: background-color var(--dur-fast) var(--ease-out); }
.deposit-overlay__close:hover { background: rgba(255, 255, 255,0.25); }
.deposit-overlay__frame { width: 100%; height: 100%; min-height: 0; border: none; display: block; vertical-align: top; }
.deposit-overlay__box--fullscreen .deposit-overlay__frame { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
@media (max-width: 768px) {
    .deposit-overlay--mobile { inset: unset; top: 62px; left: 0; right: 0; bottom: 0; align-items: stretch; justify-content: stretch; background: rgba(0,0,0,0.5); }
    .deposit-overlay--mobile .deposit-overlay__box--fullscreen { position: relative; top: auto; height: 100%; }
}

/* SEARCH POPUP */
.search-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.45); z-index: 99998; justify-content: center; align-items: center; overflow: hidden; }
.search-popup.open { display: flex; }
/* the page behind stops scrolling but is never pinned (position: fixed collapsed it, so closing jumped — owner 2026-10-16:
   "Screen goes wierd after clicking off of things") */
body.search-open { overflow: hidden !important; }
html.search-open { overflow: hidden !important; }
html.search-open { padding-right: var(--scrollbar-w, 0px); }
html.search-open .header, html.search-open .sidebar { padding-right: 0; }
.search-popup-box { position: relative; width: 1000px; max-width: 95%; height: 840px; max-height: 840px; background: var(--bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--border-color); padding: 0; display: flex; flex-direction: column; gap: 0; min-height: 0; box-shadow: var(--shadow-xl); overflow: hidden; }
.search-popup-topbar { display: none; }
@media (min-width: 769px) { body.sidebar-open .search-popup { padding-left: calc(var(--sidebar-w) + env(safe-area-inset-left, 0px)); } body:not(.sidebar-open) .search-popup { padding-left: calc(52px + env(safe-area-inset-left, 0px)); } .search-popup { padding-right: env(safe-area-inset-right, 0px); } }
/* Phones: between the header (62px) and the bottom bar. The bar is 70px (66px at ≤480px) PLUS the
   home-indicator / gesture-bar safe area (mobile-nav.css), so the pop-up ends exactly on its top edge. */
@media (max-width: 768px) {
  .search-popup {
    top: 62px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0;
    width: auto; height: auto;
    align-items: stretch; justify-content: stretch;
    background: var(--bg-secondary); padding: 0;
  }
  .search-popup-box {
    width: 100%; max-width: none; height: 100%; max-height: none;
    margin: 0; border-radius: 0; border: none; box-shadow: none;
    position: relative;
  }
}
@media (max-width: 480px) {
  .search-popup { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* Auth overlay styles moved to auth.css */
/* Cashier overlay styles moved to cashier.css */

/* PAGE LOADER */
.page-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
}
@media (max-width: 768px) {
  .page-loader {
    min-height: calc(100vh - 62px);
  }
}
.page-loader--overlay {
  position: fixed;
  top: var(--header-h);
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  z-index: 950;
  background: var(--bg-primary);
  min-height: 0;
}
body:not(.sidebar-open) .page-loader--overlay {
  left: 52px;
}
@media (max-width: 768px) {
  .page-loader--overlay {
    top: 62px;
    left: 0;
  }
}

/* ROUTE PRELOADER (page transitions) */
.route-preloader {
  position: fixed;
  top: var(--header-h);
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  z-index: 950;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
body:not(.sidebar-open) .route-preloader {
  left: 52px;
}
.route-preloader.active {
  opacity: 1;
  pointer-events: auto;
}
.route-preloader.fade-out {
  opacity: 0;
  pointer-events: none;
}
.route-preloader__logo {
  position: relative;
  width: 160px;
  height: 38px;
}
.route-preloader__logo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.route-preloader__img-base {
  opacity: 0.12;
  filter: grayscale(1) brightness(0.6);
}
.route-preloader__img-fill {
  animation: routeWaterFill 2.2s linear infinite;
}
@keyframes routeWaterFill {
  /* empty — original wavy surface resting at the bottom */
  0% {
    clip-path: polygon(0% 100%, 100% 100%, 100% 110%, 67% 85%, 33% 110%, 0% 90%);
    opacity: 1;
  }
  /* FAST: reach ~70% full within the first 30% of the loop */
  30% {
    clip-path: polygon(0% 100%, 100% 100%, 100% 40%, 67% 15%, 33% 40%, 0% 20%);
    opacity: 1;
  }
  /* SLOW: the remaining ~30% of fill is spread over the next 55% of time */
  85% {
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 67% 0%, 33% 0%, 0% 0%);
    opacity: 1;
  }
  /* hold full briefly, then fade + reset for a clean loop */
  92% {
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 67% 0%, 33% 0%, 0% 0%);
    opacity: 1;
  }
  98% { opacity: 0; }
  99% {
    clip-path: polygon(0% 100%, 100% 100%, 100% 110%, 67% 85%, 33% 110%, 0% 90%);
    opacity: 0;
  }
  100% {
    clip-path: polygon(0% 100%, 100% 100%, 100% 110%, 67% 85%, 33% 110%, 0% 90%);
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .route-preloader {
    top: 62px;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
  body:not(.sidebar-open) .route-preloader {
    left: 0;
  }
  .route-preloader__logo {
    width: 140px;
    height: 33px;
  }
}

body.route-loading .main-footer,
body.route-loading .wr-loader,
body.route-loading .ch-loader,
body.route-loading .vt-loading,
body.route-loading .vt-dash__loader,
body.route-loading .slots-loading,
body.route-loading .fav-loading,
body.route-loading .rb-loading,
body.route-loading .rw-loading,
body.route-loading .rp-loading {
  display: none !important;
}
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ═══ REDUCED MOTION (premium list item 18) ═══════════════════════════════
   Site-wide promise from the Accessibility page (locales/pages/accessibility.ts):
   with the OS "reduce motion" setting on, animations and transitions finish
   instantly. Durations are .01ms rather than 0 so animationend / transitionend
   still fire for JS that waits on them. Player app only (html:not([data-theme])).
   The Originals game roots and everything inside them are excluded — their motion
   (result reveals, JS-timed animations) is handled by the Originals rebuild. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-theme]),
  html:not([data-theme]) *:not(:is(.pg-frame, .mn-page, .limbo-game-container, .game-viewport-wrapper, .wheel-game-root, .keno-container), :is(.pg-frame, .mn-page, .limbo-game-container, .game-viewport-wrapper, .wheel-game-root, .keno-container) *),
  html:not([data-theme]) *:not(:is(.pg-frame, .mn-page, .limbo-game-container, .game-viewport-wrapper, .wheel-game-root, .keno-container), :is(.pg-frame, .mn-page, .limbo-game-container, .game-viewport-wrapper, .wheel-game-root, .keno-container) *)::before,
  html:not([data-theme]) *:not(:is(.pg-frame, .mn-page, .limbo-game-container, .game-viewport-wrapper, .wheel-game-root, .keno-container), :is(.pg-frame, .mn-page, .limbo-game-container, .game-viewport-wrapper, .wheel-game-root, .keno-container) *)::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Loading spinners keep a slow spin, so "busy" never looks frozen. Matched by class
     token ENDING in "spinner" (.spinner, .acc-spinner, .lc-spinner, fa-spinner …),
     plus spinner rings and Font Awesome's fa-spin. A plain [class*="spinner"] would
     also catch one-shot reels (.spinner-overlay / -strip / -card …) and loop their
     fade-in forever. */
  html:not([data-theme]) :is([class$="spinner"], [class*="spinner "], [class*="spinner-ring"], .fa-spin):not(:is(.pg-frame, .mn-page, .limbo-game-container, .game-viewport-wrapper, .wheel-game-root, .keno-container) *) {
    animation-duration: 1.2s !important;
    animation-iteration-count: infinite !important;
  }
}

/* While the page scrolls (src/lib/scrollHoverPause.ts, computers only) a clear sheet lies over the page: the resting
   pointer is on it, so the game tiles sliding past never start their lift / glow / shine — those made the browser
   repaint the whole page on most frames of a scroll (2026-10-20, Aurėja: "i feel like im on 10 fps"). Gone 150 ms
   after the scroll stops, at once when the pointer moves; a press on it is handed to what lies under it (2026-10-21).
   One element: never turn the pointer off for the whole page again (that restyled every element, ~25 ms, twice per
   scroll, and a click in those 150 ms went nowhere). */
.scroll-hover-shield { display: none; }
html.is-scrolling .scroll-hover-shield {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  contain: strict;
  pointer-events: auto;
  background: transparent;
}