/* Kibo lobby, after real casino lobbies (app shell, sidebar, portrait game tiles, ranked rows, live wins), in the
   games' Inlay design language: true navy, open sections divided by space and full-width hairlines, cut corners
   (top-left and bottom-right) on controls and tiles, gold as the one fill and only for the money action (Deposit,
   then Register), a 1.5 px gold inlay only on hover or what is selected, Outfit for words and Big Shoulders Display
   for numbers. Each game's colour lives only on its tile; VIP tiers wear their own metal; win/loss colours only
   for money. Corners: controls 10 px cut, tabs and chips 6, tiles 12; rounded only for inputs and dialogs. */

@font-face { font-family: "Outfit"; src: url("/fonts/Outfit-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Big Shoulders"; src: url("/fonts/BigShoulders-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("/fonts/BigShoulders-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("/fonts/BigShouldersDisplay-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("/fonts/BigShouldersDisplay-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  /* Inlay: the games' palette (static/game.css), the site's names for it */
  --shell: #060b1a; --panel: #0f1931; --stage: #0a1227; --well: #050a18;
  --cell: #1a2850; --cell-hi: #23356a; --cell-dn: #141f40;
  --ink: #eef2fb; --ink-2: #97a4c6; --ink-3: #5d6b92;
  --gold: #f2b94a; --gold-hi: #ffc95f; --gold-lo: #dba237; --gold-line: #d8a548; --on-gold: #241600;
  --win: #1ee27f; --loss: #ff4d67; --back: #b9c5e3;
  --hair: rgb(151 164 198 / .32);        /* a secondary control's hairline */
  --field-line: rgb(151 164 198 / .22);  /* a real input's outline */
  --e-out: cubic-bezier(.2, .8, .2, 1);
  --bg: var(--shell);
  --side: var(--shell);
  --surface: var(--panel);
  --surface-2: var(--cell);
  --line: #16213f;          /* full-width section rules */
  --line-strong: #2a3a6c;
  --text: var(--ink);
  --text-2: var(--ink-2);
  --muted: #7d8bb0;         /* ink-2 and ink-3 between: small print that still reads on the shell */
  --accent: var(--gold);
  --accent-hover: var(--gold-hi);
  --accent-ink: var(--on-gold);
  --accent-wash: rgb(242 185 74 / .12);
  --discord: #5865f2;
  --discord-hover: #4752c4;
  --discord-ink: #ffffff;
  --live: #ff4d5e;
  --banner-ink: var(--ink-2);
  --shade: rgba(4, 9, 15, .55);
  --shade-deep: rgba(4, 9, 15, .85);
  --rose-ink: #f2c7cf;
  --rose-line: #7a3b47;
  --rose-wash: #2b1820;
  --promo-blue: #2a4f9e;  --promo-blue-2: #1b3266;  --promo-blue-3: #132035;
  --promo-green: #1d6b4a; --promo-green-2: #143a30; --promo-green-3: #141f25;
  --promo-violet: #5b3aa0; --promo-violet-2: #2d2154; --promo-violet-3: #161b2b;
  --promo-gold: #7a4f0e;  --promo-gold-2: #3a2a12;
  --card-paper: #fbfcff; --card-paper-2: #e6ebf3; --card-ink: #121826; --card-red: #d42a3c;
  --card-back: #2a3f8f; --card-back-2: #21357a; --chip-hi: #ffe39a; --chip-lo: #b9831f; --ball-edge: #b9c4d6;
  --prize-paper: #fff6d6; --foil-1: #c9d1db; --foil-2: #f5f7fa; --foil-3: #a9b2be; --foil-4: #e3e8ee;
  --tile-hi: #2f4762; --tile-lo: #1d2f43; --tile-open-hi: #3d6b94; --tile-open-lo: #2a5072;
  --road: #2b2f38; --road-line: #f1f3f6; --road-curb: #c8ced6; --roll-lose: #d9485a; --roll-win: #2fbf71;
  --up: var(--win);  /* money up, on the site (the tiles' scenes keep their own greens and reds) */
  --dust: rgba(231, 214, 186, .75); --wood: #5a3a1c; --felt-green: #138a42;
  --tile-dark: #050a10;
  --tile-light: #ffffff;
  --r-control: 10px;
  --r-badge: 6px;
  --r-card: 14px;
  --r-banner: 16px;
  --k: 10px;  /* the cut on a control's top-left and bottom-right corners */
  --top: 64px;
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-num: "Big Shoulders Display", "Big Shoulders", "Outfit", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + 12px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration-color: var(--gold-line); text-underline-offset: 3px; }
a:hover { color: var(--gold-hi); }
img { display: block; max-width: 100%; height: auto; }
b { font-weight: 700; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
h2 { font-size: 1.35rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
:focus-visible { outline: 1.5px solid var(--gold-line); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 30; background: var(--surface); color: var(--text); padding: 8px 14px; border-radius: var(--r-control); }
.skip:focus { left: 16px; }
.muted { color: var(--text-2); }
.small { font-size: .9rem; }
.lead { font-size: 1.1rem; color: var(--text-2); max-width: 62ch; }
.dc { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- buttons: cut corners; gold fills only the money action, everything else is a hairline ---------- */
/* The hairline is a cut-corner ring (clip-path polygon, evenodd) on ::before, so it works over any background.
   --k is the cut; --lnc the ring's colour (gold-line on hover, as the games' secondary buttons do). */
.btn { --k: 10px; --lnc: transparent; --fill: transparent; position: relative; isolation: isolate; display: inline-flex; align-items: center;
       justify-content: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 0; background: var(--fill);
       clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
       font: 600 15px/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
       transition: background-color 120ms var(--e-out), color 120ms var(--e-out), transform 80ms var(--e-out); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--lnc); transition: background-color 120ms var(--e-out);
  clip-path: polygon(evenodd, var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k), var(--k) 0,
    calc(var(--k) + .62px) 1.5px, 1.5px calc(var(--k) + .62px), 1.5px calc(100% - 1.5px), calc(100% - var(--k) - .62px) calc(100% - 1.5px),
    calc(100% - 1.5px) calc(100% - var(--k) - .62px), calc(100% - 1.5px) 1.5px, calc(var(--k) + .62px) 1.5px); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn:focus-visible { outline: 0; --lnc: var(--gold-line); }
.btn-primary { --fill: var(--gold); color: var(--on-gold); font-weight: 700; }
.btn-primary:hover { --fill: var(--gold-hi); color: var(--on-gold); }
.btn-primary:active { --fill: var(--gold-lo); }
.btn-primary:focus-visible { --lnc: var(--on-gold); }
.btn-primary:disabled { --fill: var(--gold); }
.btn-ghost, .btn-discord { --lnc: var(--hair); color: var(--ink); }
.btn-ghost:hover, .btn-discord:hover { --lnc: var(--gold-line); --fill: var(--cell); color: var(--ink); }
.btn-discord .dc { color: var(--discord); }
.btn-lg { min-height: 52px; padding: 0 28px; font-size: 16px; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 20; height: var(--top); display: flex; align-items: center; gap: 20px;
          padding: 0 16px; background: var(--shell); border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .topbar { padding: 0 24px; } }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.brand:hover { color: var(--text); }
/* the main places as text tabs, underlined in gold where you are */
.top-nav { display: none; align-self: stretch; gap: 6px; margin-left: 16px; }
@media (min-width: 820px) { .top-nav { display: flex; } }
.top-link { display: flex; align-items: center; padding: 0 10px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px; transition: color 120ms var(--e-out); }
.top-link:hover { color: var(--ink); }
.top-link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold-line); }
.top-link:focus-visible { outline: 0; color: var(--ink); border-bottom-color: var(--gold-line); }
.top-cta { margin-left: auto; display: flex; gap: 10px; }
/* Deposit is the loudest thing on every page: the one gold fill in the bar, the tallest, with the coin on it */
.btn-deposit { --fill: var(--gold); color: var(--on-gold); font-weight: 700; font-size: 15px; padding: 0 20px 0 16px; }
.btn-deposit:hover { --fill: var(--gold-hi); color: var(--on-gold); }
.btn-deposit:active { --fill: var(--gold-lo); }
.btn-deposit:focus-visible { --lnc: var(--on-gold); }
.btn-deposit .dep-ico { width: 20px; height: 20px; flex: none; fill: rgb(36 22 0 / .14); stroke: var(--on-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 559px) { .top-cta .long { display: none; } }
@media (max-width: 419px) { .top-cta .btn { min-height: 38px; padding: 0 12px; font-size: 14px; gap: 6px; } .brand { font-size: 1.05rem; }
  .brand img { width: 26px; height: 26px; } .topbar { gap: 10px; } }
.preview-bar { position: sticky; top: var(--top); z-index: 19; padding: 8px 16px; background: var(--rose-wash); color: var(--rose-ink);
               border-bottom: 1px solid var(--rose-line); font-weight: 600; font-size: 14px; text-align: center; }

.confirm-bar { padding: 9px max(16px, env(safe-area-inset-left, 0px)); background: #5a1426; color: #ffd9e0;
               border-bottom: 1px solid #ff4d67; font-size: 14px; font-weight: 600; text-align: center; }
.confirm-bar b { color: #fff; font-weight: 700; }
.test-bar { padding: 9px max(16px, env(safe-area-inset-left, 0px)); background: #4a3206; color: #ffe2a8;
            border-bottom: 1px solid #f2b94a; font-size: 14px; font-weight: 600; text-align: center; }
.test-bar b { color: #fff; font-weight: 700; letter-spacing: .02em; }
.confirm-again { margin-left: 6px; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 700;
                 text-decoration: underline; text-decoration-color: #ff4d67; text-underline-offset: 3px; cursor: pointer; }
.confirm-again:hover { color: #ff8a9c; }
.confirm-again:disabled { opacity: .5; cursor: default; }
.confirm-said { color: #ffd9e0; }

/* ---------- shell and sidebar ---------- */
.shell { display: block; }
@media (min-width: 1024px) { .shell.has-sidebar { display: grid; grid-template-columns: 248px minmax(0, 1fr); } }
.sidebar { display: none; }
@media (min-width: 1024px) {
  .sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: var(--top); height: calc(100dvh - var(--top));
             overflow-y: auto; scrollbar-width: thin; padding: 18px 14px; background: var(--shell); border-right: 1px solid var(--line); }
}
/* a real input: the well, with a field outline; gold when you type in it */
.search input { width: 100%; min-height: 42px; padding: 0 14px 0 38px; border-radius: var(--r-control); border: 0; background: var(--well)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%2397a4c6' stroke-width='2'/%3E%3Cpath d='m15 15 5 5' stroke='%2397a4c6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 12px center / 18px no-repeat;
  box-shadow: inset 0 0 0 1px var(--field-line); color: var(--ink); font: 500 15px var(--font); }
.search input:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.search input::placeholder { color: var(--ink-3); }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.side-more { padding-top: 14px; border-top: 1px solid var(--line); }
/* a place in the menu: hover and where you are get a plain surface, never a coloured bar */
.side-link { --k: 8px; display: flex; align-items: center; gap: 12px; padding: 9px 10px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px;
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  transition: background-color 120ms var(--e-out), color 120ms var(--e-out); }
.side-link:hover { background: var(--panel); color: var(--ink); }
.side-link[aria-current="page"] { background: var(--cell); color: var(--ink); }
.side-link:focus-visible { outline: 0; background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
/* the menu's icons: the games' house style, a line drawing with a wash of its own colour */
.side-ico { flex: none; width: 20px; height: 20px; overflow: visible; fill: currentColor; fill-opacity: .16; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms var(--e-out), fill-opacity 120ms var(--e-out); }
.side-ico .ln { fill: none; }
.side-link:hover .side-ico, .side-link[aria-current="page"] .side-ico { fill-opacity: .3; transform: scale(1.1); }
.count { margin-left: auto; font: 700 15px/1 var(--display-num); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* a category's games, folded under it; open on hover (lobby.js) or keyboard focus */
.side-games { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.side-games > div { min-height: 0; overflow: hidden; display: grid; gap: 1px; padding-left: 20px; }
.side-group.open .side-games, .side-group:focus-within .side-games, .side-group.here .side-games { grid-template-rows: 1fr; }
.side-group.open .side-games > div, .side-group:focus-within .side-games > div, .side-group.here .side-games > div { padding-bottom: 8px; }
.side-group.open > .side-link { color: var(--ink); }
.side-game { --k: 6px; display: flex; align-items: center; gap: 10px; padding: 5px 10px; margin-left: 1px;
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; transition: color 120ms, background-color 120ms; }
.side-games > div { box-shadow: inset 1px 0 0 var(--line); }
.side-game:hover, .side-game:focus-visible { outline: 0; color: var(--ink); background: var(--panel); }
.side-game[aria-current="page"] { color: var(--ink); background: var(--cell); }
/* a game's thumb: its tile in small, the flat panel in its colour with its object (pages.game_mark, static/tiles.js) */
.side-thumb { --k: 5px; display: grid; place-items: center; flex: none; width: 26px; height: 26px; background: var(--c);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); }
.side-thumb canvas { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .side-games { transition: none; } .side-ico { transition: none; } }
.side-join { margin-top: auto; }
.side-join .btn { width: 100%; }

main { min-width: 0; padding: 16px 16px 0; }
@media (min-width: 720px) { main { padding: 24px 28px 0; } }
.page-home main > * + * { margin-top: 40px; }

/* ---------- categories on phones and tablets: text tabs on one hairline (the sidebar takes over on desktop) ---------- */
.chips { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; box-shadow: inset 0 -1px 0 var(--line); }
.chips::-webkit-scrollbar { display: none; }
.chips a { flex: none; padding: 10px 10px 11px; border-bottom: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14px; }
.chips a:hover, .chips a:focus-visible { outline: 0; color: var(--ink); border-bottom-color: var(--gold-line); }
@media (min-width: 720px) { .chips { margin: 0 -28px; padding: 0 28px; } }
.page-home main > .chips + * { margin-top: 18px; }
@media (min-width: 1024px) { .chips { display: none; } .page-home main > .chips + * { margin-top: 0; } }

/* ---------- the welcome: one banner (the games' panel, a soft navy fall across it) with the offer as its hero and the
   Kibo coin among the games' line pictures on it at every width, and the three promises in a strip under it ---------- */
.promos { display: grid; gap: 14px; }
.promo { position: relative; overflow: hidden; text-decoration: none; color: var(--text); }
.promo-main { display: flex; align-items: center; padding: 26px 20px 24px; border-radius: var(--r-banner); isolation: isolate;
  background: linear-gradient(118deg, #0f1931 0%, #111c39 48%, #17264d 100%); }
@media (min-width: 720px) { .promo-main { min-height: 340px; padding: 38px 44px; } }
@media (min-width: 1280px) { .promo-main { min-height: 372px; padding: 44px 56px; } }
.promo-copy { position: relative; z-index: 1; max-width: 34rem; }
@media (min-width: 720px) { .promo-copy { max-width: min(34rem, 62%); } }
.promo-tag { display: none; }
/* the offer is the hero: the coins in the number face, flat gold, and what they are under it */
.hero-offer { display: flex; flex-direction: column; margin: 0 0 14px; }
.hero-big { color: var(--gold); font: 900 clamp(4.6rem, 8.4vw, 8.4rem)/.8 var(--display-num); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hero-words { margin-top: 8px; font-size: clamp(1.6rem, 2.5vw, 2.35rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.hero-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 24px; color: var(--ink-2); font-size: clamp(.95rem, 1.4vw, 1.08rem); }
.hero-line b { color: var(--ink); font-weight: 700; }
.hero-line span { color: var(--gold-line); font-weight: 700; }
/* the figure in a promise's title in the games' number face */
.hero-n { font: 900 1.3em/.8 var(--display-num); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.promo-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 18px 0 0; color: var(--ink-2); font-size: 15px; }
.hero-stats span { display: inline-flex; align-items: center; gap: 6px; }
.hero-stats i { width: 8px; height: 8px; border-radius: 50%; background: var(--back); }
.hero-stats b { font: 800 1.1em/1 var(--display-num); color: var(--ink); }
.promo-worth { color: var(--ink); }
.notice-gold { margin: 0 0 18px; max-width: 62ch; font-size: 15px; color: var(--ink-2); }
.notice-gold b { color: var(--ink); }
.trust { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 20px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.trust li { white-space: nowrap; }
@media (max-width: 559px) { .trust { flex-wrap: nowrap; gap: 14px; font-size: 13px; } .trust li:nth-child(n + 3) { display: none; }
  .hero-line { flex-direction: column; gap: 2px; } .hero-line span { display: none; } }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust li::before { content: ""; width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.1 3.1L13 4.6' fill='none' stroke='%2397a4c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.promo-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--ink); font-weight: 600; font-size: 14px;
  text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 4px; }
.promo-link:hover { color: var(--gold-hi); }
/* phones: a bar with Deposit always in reach (the top bar's buttons are small there) */
.mobile-cta { display: none; }
@media (max-width: 719px) {
  .mobile-cta { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--shell); border-top: 1px solid var(--line); }
  .mobile-cta .btn { width: 100%; min-height: 46px; }
  body:has(.mobile-cta) { padding-bottom: 72px; }
}
/* the banner's art over the whole panel, behind the words (static/tiles.js S.hero): the coin on the right, or top right
   and partly cropped on a phone, and its faint gold arcs */
.promo-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.promo-art canvas { display: block; width: 100%; height: 100%; }
/* the three promises: rows on the page split by hairlines; hovering one lays the gold inlay round it */
.promo-side { --k: 12px; display: flex; align-items: center; gap: 16px; padding: 18px 14px; border-top: 1px solid var(--line);
  transition: background-color 120ms var(--e-out); }
.promo-sides { display: grid; }
.promo-sides .promo-side:first-child { border-top: 0; }
@media (min-width: 720px) { .promo-sides { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; } .promo-sides .promo-side { border-top: 0; } }
.promo-side::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: transparent; transition: background-color 120ms var(--e-out);
  clip-path: polygon(evenodd, var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k), var(--k) 0,
    calc(var(--k) + .62px) 1.5px, 1.5px calc(var(--k) + .62px), 1.5px calc(100% - 1.5px), calc(100% - var(--k) - .62px) calc(100% - 1.5px),
    calc(100% - 1.5px) calc(100% - var(--k) - .62px), calc(100% - 1.5px) 1.5px, calc(var(--k) + .62px) 1.5px); }
.promo-side:hover { color: var(--text); background: var(--panel);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); }
.promo-side:hover::before, .promo-side:focus-visible::before { background: var(--gold-line); }
.promo-side:hover + .promo-side { border-top-color: transparent; }
.promo-side:focus-visible { outline: 0; }
.promo-side .la { width: 80px; height: 80px; }
.promo-side > span { display: flex; flex-direction: column; gap: 4px; }
.promo-side b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.promo-side b .hero-n { font-size: 1.2em; color: var(--ink); }
.promo-side span span { color: var(--ink-2); font-size: .95rem; line-height: 1.4; }
@media (min-width: 720px) { .promos .promo-side { padding: 12px 14px; gap: 14px; } .promos .promo-side .la { width: 56px; height: 56px; } }

/* ---------- rows ---------- */
.row-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.row-head h2 { font-size: 1.3rem; }
.row-count { color: var(--ink-3); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* game tiles: portrait; a flat panel in the game's own colour (pages.panel_colour: every game at one depth) with its one
   object drawn solid on a canvas by static/tiles.js, its name and its RTP in the site's type under it. Inlay's cut
   corners, and the gold inlay traced inside the edge while it's hovered, as its game's story plays. A slot machine's
   tile is its cover, in its own kit: its stage in its accent, its emblem, its line symbols and its wells' pattern. */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
@media (max-width: 719px) { .tiles { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 40%; overflow-x: auto;
  scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; } .tiles > * { scroll-snap-align: start; } }
.tile { --k: 12px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px;
        aspect-ratio: 3 / 4; padding: 10px 8px 11px; overflow: hidden; isolation: isolate;
        clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
        color: var(--ink); text-decoration: none; text-align: center; background: var(--c);
        transition: transform 160ms var(--e-out); }
.tile::before { --k: 10.34px; content: ""; position: absolute; inset: 4px; z-index: 3; pointer-events: none; background: transparent;
  transition: background-color 120ms var(--e-out);
  clip-path: polygon(evenodd, var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k), var(--k) 0,
    calc(var(--k) + .62px) 1.5px, 1.5px calc(var(--k) + .62px), 1.5px calc(100% - 1.5px), calc(100% - var(--k) - .62px) calc(100% - 1.5px),
    calc(100% - 1.5px) calc(100% - var(--k) - .62px), calc(100% - 1.5px) 1.5px, calc(var(--k) + .62px) 1.5px); }
a.tile:is(:hover, :focus-visible)::before { background: var(--gold-line); }
a.tile:focus-visible { outline: 0; }
a.tile:hover { color: var(--ink); transform: translateY(-4px); }
a.tile:active { transform: translateY(-1px) scale(.98); }
/* the art: one canvas under the words, the whole tile (its scenes use all of it) */
.tile-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tile-art canvas { display: block; width: 100%; height: 100%; }
.tile-name { font: 700 15px/1.15 var(--font); letter-spacing: -.01em; text-wrap: balance; }
.tile-sub { color: rgb(238 242 251 / .74); font: 600 13px/1.25 var(--font); font-variant-numeric: tabular-nums; }
.tile-badge { --k: 6px; position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px;
              clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
              background: rgb(5 10 24 / .72); color: var(--ink); font-size: 13px; font-weight: 700; }
.tile-badge.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.tile-badge.web { background: var(--accent); color: var(--accent-ink); }  /* playable right here on the site */
@media (prefers-reduced-motion: no-preference) { .tile-badge.live i { animation: pulse 1.6s ease-in-out infinite; } }
@keyframes pulse { 50% { opacity: .35; } }

/* popular: a ranked row with big numerals, as casino "Top 10" rows do */
.ranked { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1199px) { .ranked { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(200px, 42%);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 6px; } .ranked > li { scroll-snap-align: start; } }
.ranked-item { display: grid; grid-template-columns: 36% 1fr; align-items: end; }
.ranked-item .tile { margin-left: -22%; position: relative; z-index: 1; }
:where(.ranked-item) > .rank { font: 800 clamp(6rem, 9vw, 9rem)/.76 var(--display-num); color: var(--shell); -webkit-text-stroke: 2px var(--cell-hi);
        text-align: left; letter-spacing: -.02em; user-select: none; position: relative; z-index: 0; }
.no-match { color: var(--text-2); }

/* ---------- live wins: a slow, endless strip (paused on hover, still for reduced motion); open, split by hairlines ---------- */
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--win); margin-right: 10px; vertical-align: middle;
            box-shadow: 0 0 0 4px rgb(30 226 127 / .16); }
@media (prefers-reduced-motion: no-preference) { .live-dot { animation: pulse 1.6s ease-in-out infinite; } }
.wins-viewport { overflow: hidden; margin: 0 -16px; padding: 4px 16px 4px;
                 -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 92%, transparent);
                 mask-image: linear-gradient(to right, transparent, #000 3%, #000 92%, transparent); }
@media (min-width: 720px) { .wins-viewport { margin: 0 -28px; padding: 4px 28px 4px; } }
.wins-track { display: flex; gap: 0; width: max-content; }
.wins-list { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
@media (prefers-reduced-motion: no-preference) {
  .wins-track { animation: wins-scroll calc(var(--n) * 3.2s) linear infinite; }
  .wins-viewport:hover .wins-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .wins-viewport { overflow-x: auto; } .wins-list[aria-hidden="true"] { display: none; } }
@keyframes wins-scroll { to { transform: translateX(-50%); } }
/* the strip's wins, scoped to it (:where keeps the old weight): a game's own .win / .mult can never pick these up */
:where(.wins-list) > .win { display: flex; align-items: center; gap: 12px; width: 232px; flex: none; padding: 6px 16px; border-left: 1px solid var(--line); }
.win-art, .gm-mark { --k: 8px; display: grid; place-items: center; width: 48px; height: 48px; flex: none; background: var(--c);
           clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); }
.win-art canvas, .gm-mark canvas { width: 40px; height: 40px; }
.win-info { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.win-info b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-info span { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.win-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.win-amt b { display: inline-flex; align-items: center; gap: 5px; color: var(--win); font: 800 19px/1 var(--display-num); font-variant-numeric: tabular-nums; }
:where(.win-amt) > .mult { color: var(--ink-2); font: 700 15px/1 var(--display-num); font-variant-numeric: tabular-nums; }
/* the casino coin, flat (the games' .gm-coin): wherever an amount of coins is shown */
.coin { display: inline-block; flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--gold); box-shadow: inset 0 0 0 3px #d39a32; }

/* ---------- promotions: flat banners on a rail, each with its own art; the gold inlay while hovered ---------- */
.promo-banners { display: grid; gap: 12px; }
@media (min-width: 720px) { .promo-banners { grid-template-columns: 1fr 1fr; } .promo-banners > :first-child { grid-column: 1 / -1; } }
.promo-banner { --k: 14px; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 148px;
                padding: 22px 18px 22px 24px; overflow: hidden; background: var(--panel);
                clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); }
.promo-banner::before { --k: 12.34px; content: ""; position: absolute; inset: 4px; pointer-events: none; background: transparent; transition: background-color 120ms var(--e-out);
  clip-path: polygon(evenodd, var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k), var(--k) 0,
    calc(var(--k) + .62px) 1.5px, 1.5px calc(var(--k) + .62px), 1.5px calc(100% - 1.5px), calc(100% - var(--k) - .62px) calc(100% - 1.5px),
    calc(100% - 1.5px) calc(100% - var(--k) - .62px), calc(100% - 1.5px) 1.5px, calc(var(--k) + .62px) 1.5px); }
.promo-banner:hover::before, .promo-banner:focus-within::before { background: var(--gold-line); }
.promo-banner > div { position: relative; z-index: 1; }
.promo-banner b { display: block; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 8px; }
.promo-banner p { margin: 0; color: var(--ink-2); max-width: 32ch; font-size: .96rem; }
.promo-banner .promo-link:focus-visible { outline: 0; }

/* ---------- VIP club: open on the page; a podium you climb, from Bronze to Obsidian, each step in its metal ---------- */
.vip { display: grid; gap: 28px; align-items: end; padding: 36px 0 0; border-top: 1px solid var(--line); }
@media (min-width: 980px) { .vip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); } }
.vip-copy { padding-bottom: 6px; align-self: center; }
@media (min-width: 980px) { .vip-copy { padding-bottom: 34px; } }
.vip-copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 10px; }
.vip-copy p { color: var(--ink-2); max-width: 42ch; margin-bottom: 18px; }
.vip-join { display: inline-flex; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 4px; }
.vip-join::after { content: "→"; margin-left: 8px; transition: transform .2s ease; }
.vip-join:hover { color: var(--gold-hi); }
.vip-join:hover::after { transform: translateX(3px); }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
@media (min-width: 900px) { .ladder { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.rung { display: flex; flex-direction: column; align-items: center; }
.podium-step { --k: 12px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; width: 100%;
        height: calc(94px + var(--step) * 18px); padding-top: 14px; text-align: center;
        clip-path: polygon(var(--k) 0, 100% 0, 100% 100%, 0 100%, 0 var(--k));
        background: linear-gradient(var(--t), var(--t)) top / 100% 2px no-repeat, color-mix(in srgb, var(--t) 14%, var(--panel)); }
.podium-step b { font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 800; }
.podium-step span { color: var(--ink-2); font-size: 13px; font-weight: 600; }

/* ---------- the Discord band: open on the page, Discord's logo in its own colour ---------- */
.discord-band { display: grid; gap: 18px; align-items: center; padding: 30px 0 0; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .discord-band { grid-template-columns: auto 1fr auto; } }
.discord-logo .dc { width: 48px; height: 48px; color: var(--discord); }
.discord-band h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: 6px; }
.discord-band p { color: var(--ink-2); margin: 0; max-width: 60ch; }

/* ---------- footer ---------- */
.foot { margin-top: 56px; padding: 32px 0 36px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot-top { display: grid; gap: 28px; margin-bottom: 28px; }
@media (min-width: 820px) { .foot-top { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.foot-brand p { margin: 10px 0 14px; max-width: 36ch; }
.foot-col { display: flex; flex-direction: column; gap: 8px; }
.foot-col b { color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.foot-col a, .foot a { color: var(--ink-2); text-decoration: none; }
.foot-col a:hover, .foot a:hover { color: var(--ink); }
.foot-legal { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--line); }
.foot-legal p { margin: 0; max-width: 90ch; }
.foot-legal a { text-decoration: underline; text-decoration-color: var(--gold-line); }
.age { --k: 8px; position: relative; isolation: isolate; flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px;
       background: var(--hair); clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
       color: var(--ink); font: 800 16px/1 var(--display-num); }
.age::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--shell);
  clip-path: polygon(calc(var(--k) - .88px) 0, 100% 0, 100% calc(100% - calc(var(--k) - .88px)), calc(100% - calc(var(--k) - .88px)) 100%, 0 100%, 0 calc(var(--k) - .88px)); }
.foot-credits { margin: 0; font-size: 13px; }

/* ---------- the wallet (and Register / Sign in): a dialog over the dimmed page, as casinos do it ---------- */
body.has-modal { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; justify-items: center; align-items: start;
                  padding: 56px 16px 32px; overflow-y: auto; background: rgb(3 6 16 / .8); }
.wallet { width: min(100%, 440px); background: var(--panel); border-radius: var(--r-banner);
          box-shadow: 0 0 0 1px rgb(151 164 198 / .18), 0 24px 64px rgb(3 6 16 / .72); }
.wallet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 10px 20px; }
.wallet-head h1 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: 0; }
.wallet-close { --k: 6px; display: grid; place-items: center; width: 32px; height: 32px; color: var(--ink-2); text-decoration: none; font-size: 22px; line-height: 1;
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); }
.wallet-close:hover { color: var(--ink); background: var(--cell); }
/* the tabs: cut-corner hairlines side by side; the one you're on wears the gold inlay */
.wallet-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 20px; }
.wallet-tabs button { --k: 6px; --lnc: var(--hair); --fill: transparent; position: relative; isolation: isolate; min-height: 38px; border: 0; background: var(--fill);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  color: var(--ink-2); cursor: pointer; font: 600 14px var(--font); transition: background-color 120ms var(--e-out), color 120ms var(--e-out); }
.wallet-tabs button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lnc); transition: background-color 120ms var(--e-out);
  clip-path: polygon(evenodd, var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k), var(--k) 0,
    calc(var(--k) + .62px) 1.5px, 1.5px calc(var(--k) + .62px), 1.5px calc(100% - 1.5px), calc(100% - var(--k) - .62px) calc(100% - 1.5px),
    calc(100% - 1.5px) calc(100% - var(--k) - .62px), calc(100% - 1.5px) 1.5px, calc(var(--k) + .62px) 1.5px); }
.wallet-tabs button:hover { --fill: var(--cell); color: var(--ink); }
.wallet-tabs button[aria-selected="true"] { --lnc: var(--gold-line); --fill: var(--cell); color: var(--ink); }
.wallet-tabs button:focus-visible { outline: 0; --lnc: var(--gold-line); }
.wallet-body { padding: 18px 20px 20px; }
.wallet .field { margin-bottom: 14px; }
.field-name { display: block; margin: 0 0 6px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.wallet .field { position: relative; }
.wallet input { width: 100%; min-height: 44px; font-size: 15px; }

/* a dropdown with the coins' and networks' own logos (wallet.js builds it over the native select, which keeps the value) */
.select { position: relative; }
.select-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; cursor: pointer; border: 0;
              border-radius: var(--r-control); background: var(--well); box-shadow: inset 0 0 0 1px var(--field-line); color: var(--ink); font: 600 15px var(--font); }
.select-btn:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.select-btn:focus-visible, .select-btn[aria-expanded="true"] { outline: 0; box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.select-btn.only { cursor: default; }
.select-btn.only .chev { display: none; }
.select-now { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.select-now img, .select-opt img { width: 20px; height: 20px; flex: none; }
.opt-note { color: var(--ink-3); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.chev { width: 8px; height: 8px; flex: none; margin: -4px 2px 0 0; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
        transform: rotate(45deg); transition: transform .15s ease; }
.select-btn[aria-expanded="true"] .chev { margin-top: 4px; transform: rotate(-135deg); }
.select-list { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; max-height: 300px; overflow-y: auto; margin: 0;
               padding: 6px; list-style: none; border-radius: var(--r-control); background: var(--panel);
               box-shadow: 0 0 0 1px rgb(151 164 198 / .22), 0 18px 40px rgb(3 6 16 / .7); }
.select-opt { --k: 6px; display: flex; align-items: center; gap: 10px; padding: 9px 10px; cursor: pointer; font-size: 15px; font-weight: 600; white-space: nowrap;
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); }
.select-opt:hover, .select-opt:focus { background: var(--cell); outline: none; }
.select-opt[aria-selected="true"] { background: var(--cell); box-shadow: inset 2px 0 0 transparent; }
.select-opt[aria-selected="true"]::after { content: ""; margin-left: auto; width: 12px; height: 7px; border-left: 2px solid var(--gold-line);
  border-bottom: 2px solid var(--gold-line); transform: translateY(-2px) rotate(-45deg); }

.switch { display: flex; gap: 4px; margin: 0 0 14px; }
.switch button { padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink-2); cursor: pointer; font: 600 13px var(--font); }
.switch button:hover { color: var(--ink); }
.switch button[aria-selected="true"] { background: var(--cell); color: var(--ink); }
/* the address: a real field (you copy from it), Copy as a small cut button inside it */
.copy-field { display: flex; align-items: center; border-radius: var(--r-control); background: var(--well); box-shadow: inset 0 0 0 1px var(--field-line); }
.copy-field code { flex: 1; min-width: 0; padding: 10px 12px; color: var(--ink); word-break: break-all;
                   font: 600 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; }
#withdraw-to, #txid { font: 600 13px ui-monospace, "SF Mono", Menlo, monospace; }
#copy { --k: 5px; flex: none; margin: 5px; min-height: 34px; padding: 0 14px; border: 0; background: var(--cell); color: var(--ink);
        clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
        cursor: pointer; font: 600 13px var(--font); transition: background-color 120ms var(--e-out), transform 80ms var(--e-out); }
#copy:hover { background: var(--cell-hi); }
#copy:active { transform: scale(.95); }
.qr-frame { display: grid; place-items: center; margin: 14px 0 12px; }
.qr { width: 120px; height: 120px; padding: 6px; border-radius: 6px; background: #fff; }
.wallet-hint { margin: 0 0 4px; color: var(--ink-2); font-size: 13px; line-height: 1.45; text-align: left; }
.wallet-hint.muted { color: var(--ink-3); }
.convert { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--line); }
.wallet-more { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.wallet-more summary { cursor: pointer; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.wallet-more[open] summary { margin-bottom: 10px; }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; min-width: 0; }
.amount-field { display: flex; align-items: center; border-radius: var(--r-control); background: var(--well); box-shadow: inset 0 0 0 1px var(--field-line); }
.amount-field input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; font: 700 17px var(--display-num); font-size: 19px; }
.amount-field input:focus { outline: none; box-shadow: none; }
.amount-field:focus-within { box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.amount-field > span { padding: 0 12px; color: var(--ink-2); font: 700 17px var(--display-num); font-variant-numeric: tabular-nums; }
#amount-coin { padding: 0 12px; color: var(--muted); font-size: 13px; font-weight: 700; }
.quick { display: flex; gap: 6px; margin-top: 8px; }
.quick:empty { display: none; }
.quick-btn { --k: 5px; flex: 1; min-height: 32px; border: 0; background: var(--cell); color: var(--ink-2);
             clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
             cursor: pointer; font: 600 13px var(--font); }
.quick-btn:hover { color: var(--ink); background: var(--cell-hi); }
.wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.wallet-actions .btn[hidden] { display: none; }
.wallet-actions:has(> .btn[hidden]) { grid-template-columns: 1fr; }
.btn-block { width: 100%; }
.wallet .btn-block { min-height: 50px; font-size: 16px; }
.wallet .status { margin-top: 12px; padding: 0; border: 0; background: none; font-size: 14px; }
.wallet-notice { margin: 0 0 14px; font-size: 13px; color: var(--ink-2); }
.wallet-foot { margin: 0; padding: 14px 20px 18px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.wallet-body .wallet-foot { padding: 14px 0 0; margin-top: 16px; }
.wallet-body .wallet-foot:empty { display: none; }
.wallet-foot b { color: var(--ink-2); }
.wallet-foot a { color: var(--ink-2); }
/* history: a compact list split by hairlines, no box */
.wallet-sub { margin: 18px 0 4px; color: var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.wallet-sub:first-child { margin-top: 0; }
.history { margin: 0; padding: 0; list-style: none; }
.history-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 9px 0; }
.history-row > span:first-child:empty { display: none; }
.history-row + .history-row { border-top: 1px solid var(--line); }
.history-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.history-main b { font-size: 14px; font-weight: 600; }
.history-main span { color: var(--ink-3); font-size: 13px; }
.history-main span:empty { display: none; }
.history-state { color: var(--ink-2); font-size: 13px; font-weight: 600; text-align: right; }
.history-state.wait { color: var(--back); }
.history-state.done, .history-state.done a { color: var(--win); }
.facts { display: grid; gap: 0; margin: 0 0 16px; }
.facts div { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: baseline; padding: 8px 0; font-size: 14px; }
.facts div + div { border-top: 1px solid var(--line); }
.facts dt { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.facts dd { margin: 0; min-width: 0; }
.facts code { font: 600 13px/1.45 ui-monospace, "SF Mono", Menlo, monospace; word-break: break-all; }
.wallet-page { display: grid; justify-items: center; padding: 40px 0 8px; }
@media (max-width: 559px) {
  .modal-backdrop { padding: 0; align-items: stretch; }
  .wallet { width: 100%; min-height: 100dvh; border-radius: 0; box-shadow: none; }
  .field-pair { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- inner pages (deposit, privacy, responsible gaming) ---------- */
.page { max-width: 760px; padding: 28px 0 8px; }
.page h1 { font-size: clamp(2rem, 4vw, 2.7rem); margin-bottom: 14px; }
/* the ways to go on (deposit page, the Deposit dialog for a visitor): rows split by hairlines; a plain surface on hover */
.options { display: grid; gap: 0; margin: 20px 0; }
.option { --k: 10px; display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 14px 14px; border: 0; border-top: 1px solid var(--line);
          background: none; color: var(--ink-2); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer;
          transition: background-color 120ms var(--e-out); }
.option:first-child { border-top: 0; }
.option:hover, .option:focus-visible { outline: 0; color: var(--ink-2); background: var(--cell);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); }
.option:hover + .option, .option:focus-visible + .option { border-top-color: transparent; }
.option b { color: var(--ink); font-size: 1.05rem; }
.option b::after { content: " →"; color: var(--gold-line); }
/* a warning: plain text in rose, never a tinted box */
.notice { margin: 0 0 16px; color: var(--rose-ink); font-weight: 600; }

.step { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.step legend, .field-label { display: block; font-weight: 700; color: var(--text); margin-bottom: 10px; padding: 0; }
.amount-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: center; }
/* a real input: the well with a field outline, gold while you type in it */
input { min-height: 46px; padding: 0 14px; border-radius: var(--r-control); border: 0; background: var(--well); box-shadow: inset 0 0 0 1px var(--field-line);
        color: var(--ink); font: 500 16px var(--font); flex: 1 1 200px; min-width: 0; }
input:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--gold-line); }
input::placeholder { color: var(--ink-3); }
#amount { font-weight: 700; max-width: 220px; }
.tabs { display: flex; gap: 4px; margin: 6px 0 18px; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-2); padding: 10px 12px; margin-bottom: -1px;
               font: 600 15px var(--font); cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--text); border-color: var(--gold-line); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.address { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 20px; padding: 10px 12px;
           border-radius: var(--r-control); background: var(--well); box-shadow: inset 0 0 0 1px var(--field-line); }
.address code { font: 600 .95rem/1.4 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); word-break: break-all; flex: 1 1 260px; }
/* a result or a status: open text under a hairline, rose when it went wrong */
.status { margin-top: 20px; padding: 16px 0 0; border-top: 1px solid var(--line); }
.status.bad { color: var(--rose-ink); }
.status p { margin: 0 0 .4em; } .status p:last-child { margin: 0; }
/* the reading pages (privacy, responsible gaming, provably fair): sections open on the page, a hairline over each */
.prose h2 { font-size: 1.35rem; margin: 2em 0 .6em; padding-top: 1.4em; border-top: 1px solid var(--line); }
.prose p, .prose li { color: var(--text-2); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--ink-3); }
.prose b, .prose strong { color: var(--ink); }
/* an error page: what happened, and the way back */
.page-error { padding-top: 48px; }
.page-error .lead { margin-bottom: 22px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .promo-side:hover, .option:hover, a.tile:hover, .btn:active { transform: none; }
}
.wallet-hint.left { text-align: left; }

/* ---------- provably fair ---------- */
.fair-band { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin: 28px 0; padding: 30px 0 0;
             border-top: 1px solid var(--line); }
.fair-band .la { width: 72px; height: 72px; }
.fair-band h2 { margin: 0 0 4px; }
.fair-band p { margin: 0; color: var(--text-2); max-width: 70ch; }
.fair-band .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 720px) { .fair-band { grid-template-columns: auto 1fr auto; } .fair-band .btn { grid-column: auto; } }
/* the steps: a numbered list on row rules, the numbers in the number face */
.fair-steps { display: grid; gap: 0; margin: 24px 0 0; padding: 0; list-style: none; counter-reset: fair; }
.fair-steps li { position: relative; padding: 14px 0 14px 40px; border-top: 1px solid var(--line); counter-increment: fair; }
.fair-steps li:first-child { border-top: 0; }
.fair-steps li::before { content: counter(fair); position: absolute; left: 0; top: 16px; color: var(--ink-3); font: 800 24px/1 var(--display-num); }
.fair-steps li + li { margin-top: 0; }
.fair-steps code, .fair-page code { font: 600 .9em ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); }
/* the checker: real fields on the page, no box around them */
.fair-tool { display: grid; gap: 8px; max-width: 640px; margin: 18px 0; }
.fair-tool input { width: 100%; font: 600 13px ui-monospace, "SF Mono", Menlo, monospace; }
.fair-tool .field-name { margin-top: 6px; }
.fair-pair { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.fair-tool .btn { justify-self: start; margin-top: 8px; }
.fair-out { max-width: 640px; word-break: break-all; }
.fair-out .ok { color: var(--win); font-weight: 700; }
.fair-out .bad { color: var(--rose-ink); font-weight: 700; }
.fair-out .muted { color: var(--text-2); }
.fair-nums { margin: 6px 0; font: 600 13px ui-monospace, "SF Mono", Menlo, monospace; }

/* the wallet page (wallet.js) */
.wallet-tabs.three { grid-template-columns: 1fr 1fr 1fr; }
/* the balance: plain text, the figure in the games' number face */
.wallet-balance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 20px 14px; }
.wallet-balance:empty { display: none; }
.wallet-balance b { font: 800 28px/1 var(--display-num); font-variant-numeric: tabular-nums; }
.wallet-balance span { color: var(--ink-2); font-size: 14px; }
.wallet-balance small { flex-basis: 100%; color: var(--ink-3); font-size: 13px; line-height: 1.4; }
/* the same height and look as the text fields beside it (Safari ignores min-height on a native select) */
.native-select { width: 100%; height: 46px; padding: 0 40px 0 14px; border: 0; box-shadow: inset 0 0 0 1px var(--field-line); border-radius: var(--r-control);
  -webkit-appearance: none; appearance: none; cursor: pointer; color: var(--text); font: inherit; font-size: 15px;
  background: var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2397a4c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center; }
.native-select:focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--gold-line); }
/* a native select under a logo dropdown (wallet.js): kept for its value and events, out of sight */
.native-select.under { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.wallet .status.ok { color: var(--ink); }
.wallet .status.bad { color: var(--rose-ink); }

/* the staff dashboard (/admin): the site's own colours and type, laid out as one board of bands divided by lines
   (no tray of boxed cards), with a strip of headline figures in the display face */
.admin { max-width: 1240px; margin: 0 auto; padding: 28px 0 40px; }
.admin-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px; }
.admin-head h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.admin-head p { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; }
.admin .tabs { margin: 18px 0 0; overflow-x: auto; scrollbar-width: none; }
.admin .tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: -1px; white-space: nowrap;
  border-bottom: 2px solid transparent; color: var(--text-2); font: 600 15px var(--font); text-decoration: none; }
.admin .tabs a:hover { color: var(--text); }
.admin .tabs a[aria-current="page"] { color: var(--text); border-color: var(--gold-line); }
.admin .tabs a:focus-visible { outline: 0; color: var(--ink); border-color: var(--gold-line); }
/* what waits on a tab: its figure in the number face, in the loss colour (no pill) */
.admin .count { margin: 0; color: var(--loss); font: 700 16px/1 var(--display-num); font-variant-numeric: tabular-nums; }
/* a done / failed message: one line of text under a hairline, not a tinted box */
.admin .flash { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; font-weight: 600; }
.admin .flash.bad { color: var(--rose-ink); }

/* open, not boxed: the dashboard's sections sit on the page, divided by hairlines and space */
.admin .board { margin-top: 8px; }
.admin .band { padding: 30px 0; border-top: 1px solid var(--line); }
.admin .band:first-child { border-top: 0; }
.admin .label { margin-bottom: 6px; color: var(--ink); font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.admin .note { max-width: 74ch; margin: 0 0 14px; color: var(--ink-2); font-size: 14px; }
.admin .figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px 0; }
.admin .figure { padding: 2px 20px; border-left: 1px solid var(--line); }
.admin .figure:first-child { border-left: 0; padding-left: 0; }
.admin .figure-label { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.admin .figure-value { margin-top: 4px; font: 700 34px/1.05 var(--display-num); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.admin .figure-sub { margin-top: 3px; color: var(--ink-3); font-size: 13px; }
.admin .good { color: var(--win); }
.admin .bad { color: var(--loss); }
.admin .split { display: grid; gap: 24px; }
.admin .split > * { min-width: 0; }
@media (min-width: 960px) {
  .admin .split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; }
  .admin .split > * + * { padding-left: 32px; border-left: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .admin .band { padding: 24px 0; }
  .admin .figure { border-left: 0; padding-left: 0; }
}

.admin .chart { display: block; width: 100%; height: 220px; }
.admin .chart .grid { stroke: var(--line); stroke-width: 1; }
.admin .chart .axis { fill: var(--ink-2); font: 13px var(--font); }
.admin .chart .bar-in { fill: var(--accent); }
.admin .chart .bar-out { fill: var(--banner-ink); opacity: .55; }
.admin .chart .ggr { fill: none; stroke: var(--win); stroke-width: 2; }
.admin .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; color: var(--text-2); font-size: 13px; }
.admin .legend i { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 3px; }
.admin .legend .in { background: var(--accent); }
.admin .legend .out { background: var(--banner-ink); opacity: .55; }
.admin .legend .ggr { background: var(--win); }

.admin .dash-list { margin: 0; padding: 0; list-style: none; }
.admin .dash-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--line); font-size: 14px; }
.admin .dash-list li:first-child { border-top: 0; }
.admin .dash-list b { font-variant-numeric: tabular-nums; }
.admin .dash-list + .label { margin-top: 24px; }
.admin .table-scroll { overflow-x: auto; }
.admin table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin th { padding: 8px 12px; border-bottom: 1px solid var(--line-strong); color: var(--ink-2); font-size: 13px; font-weight: 600;
  text-align: left; white-space: nowrap; }
.admin td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin tbody tr:last-child td { border-bottom: 0; }
.admin th:first-child, .admin td:first-child { padding-left: 0; }
.admin .r { text-align: right; font-variant-numeric: tabular-nums; }
.admin td small { color: var(--ink-3); font-size: 13px; }
/* a row that needs someone: the panel's surface under it, no coloured bar */
.admin tr.urgent td { background: var(--panel); }
.admin tr.urgent td:first-child { padding-left: 10px; }
.admin .empty { padding: 16px 0; color: var(--ink-2); }
.admin code { font: 13px/1.45 ui-monospace, "SF Mono", Menlo, monospace; word-break: break-all; }
/* a state: a dot and its word, as plain text (no pill) */
.admin .badge { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.admin .badge::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.admin .badge.warning { color: var(--back); }
.admin .badge.danger { color: var(--loss); }
.admin .badge.success { color: var(--win); }
.admin .badge.info { color: #aab3ff; }
.admin form.act { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.admin form.act input { flex: 1; min-width: 150px; min-height: 38px; font-size: 13px; }
.admin .btn-ghost.danger { color: var(--rose-ink); }
.admin .btn-ghost.danger:hover { --lnc: var(--loss); }
/* the period: text tabs, underlined in gold where you are */
.admin .periods { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 14px; }
.admin .periods a { padding: 8px 10px; border-bottom: 2px solid transparent; color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.admin .periods a:first-child { padding-left: 0; }
.admin .periods a:hover { color: var(--ink); }
.admin .periods a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold-line); }
.admin table.pnl td { padding-top: 8px; padding-bottom: 8px; }
.admin table.pnl td:nth-child(2) { white-space: nowrap; }
.admin tr.sub td { padding-top: 3px; padding-bottom: 3px; border-bottom: 0; color: var(--text-2); font-size: 13px; }
.admin tr.total td { border-top: 1px solid var(--line-strong); font-weight: 700; }
.admin tr.total td:nth-child(2) { font: 700 20px/1.1 var(--display-num); }

/* the Marketing tab (marketingpage.py): its views and periods side by side, and plain forms laid out on a grid */
.admin .subnav { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.admin .grid-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 16px; align-items: start; }
.admin .grid-form .field { display: grid; gap: 6px; min-width: 0; }
.admin .grid-form .field.wide { grid-column: span 2; }
.admin .grid-form .field > span { color: var(--text-2); font-size: 13px; font-weight: 600; }
.admin .grid-form .field small { color: var(--ink-3); font-size: 13px; }
.admin .grid-form .field.submit { align-self: end; }
.admin .grid-form input, .admin .grid-form select { width: 100%; min-height: 42px; font-size: 14px; }
.admin .grid-form input[type="checkbox"] { width: 20px; min-height: 20px; height: 20px; box-shadow: none; accent-color: var(--gold); }
/* a select: the same well and field outline as a text field */
.admin select { min-height: 42px; padding: 0 36px 0 12px; border: 0; border-radius: var(--r-control); box-shadow: inset 0 0 0 1px var(--field-line);
  -webkit-appearance: none; appearance: none; color: var(--ink); font: 500 14px var(--font); cursor: pointer;
  background: var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2397a4c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center; }
.admin select:focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.admin textarea { width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-control); background: var(--well); box-shadow: inset 0 0 0 1px var(--field-line);
  color: var(--ink); font: 400 14px/1.5 var(--font); }
.admin textarea:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.admin td form.act { margin: 0 0 6px; }
.admin small.bad { color: var(--loss); }
.admin .nowrap { white-space: nowrap; }
.admin details summary { cursor: pointer; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.admin details summary:hover { color: var(--ink); }
.admin details .note { margin: 8px 0 0; max-width: none; line-height: 1.7; }
@media (max-width: 560px) { .admin .grid-form .field.wide { grid-column: auto; } }

/* ---------- line pictures (pages.line_art): the promotions and the VIP ladder in the games' icon style, a 2.2 px line
   over an 18% wash of the same colour (ivory; the welcome offer and the top tier in gold, the other tiers in their
   metal). Each plays its own story once on hover: coins out of the bag, the page torn off to today's star, the
   rakeback arrow drawn round its coin, the cup filling, the arrow hitting the target, the reels landing on three
   stars, the weekend stamped 2x, a coin dropping on the stack, the gift's lid lifting, the medal swinging on its
   ribbon, the diamond turning, the crown's jewels lighting. ---------- */
.la { --ivory: #f3ead6; display: block; flex: none; overflow: visible; color: var(--ivory); fill: none; stroke: currentColor;
      stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.la :is(path, circle, ellipse, rect) { vector-effect: non-scaling-stroke; }
.la .w { fill: currentColor; fill-opacity: .18; }
.la text { fill: currentColor; stroke: none; font: 800 13px var(--display-num); }
.la :is(.cn, .body, .sheet, .st, .coin, .arrow, .ping, .spin, .drop, .lid, .disc, .gem, .facet, .crown, .x2, .d1, .d2) { transform-box: view-box; }
.la .cn, .la .ping { opacity: 0; }
.la .fill { fill: currentColor; fill-opacity: .5; stroke: none; transform: translateY(15px); }
.la .facet { stroke: none; fill: currentColor; fill-opacity: 0; }
.la .jw { fill: currentColor; fill-opacity: .18; }
.la-gift .st { opacity: 0; }
.promo-banner .la { width: 112px; height: 112px; }
.rung .la { width: min(100%, calc(64px + var(--step) * 12px)); height: auto; aspect-ratio: 1; margin-bottom: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .la-host:is(:hover, :focus-within) .la-bag .body { transform-origin: 24px 42px; animation: la-jiggle .7s ease-in-out both; }
  .la-host:is(:hover, :focus-within) .la-bag .c1 { animation: la-c1 .8s .25s cubic-bezier(.2, .7, .4, 1) both; }
  .la-host:is(:hover, :focus-within) .la-bag .c2 { animation: la-c2 .8s .35s cubic-bezier(.2, .7, .4, 1) both; }
  .la-host:is(:hover, :focus-within) .la-bag .c3 { animation: la-c3 .8s .45s cubic-bezier(.2, .7, .4, 1) both; }
  .la-host:is(:hover, :focus-within) .la-calendar .sheet { transform-origin: 8px 12px; animation: la-tear .55s ease-in both; }
  .la-host:is(:hover, :focus-within) .la-calendar .st { transform-origin: 24px 28px; animation: la-stamp .6s .45s cubic-bezier(.3, 1.5, .5, 1) both; }
  .la-host:is(:hover, :focus-within) .la-rakeback .arc { stroke-dasharray: 1; animation: la-draw .9s cubic-bezier(.5, 0, .3, 1) both; }
  .la-host:is(:hover, :focus-within) .la-rakeback .tip { animation: la-in .2s .85s both; }
  .la-host:is(:hover, :focus-within) .la-rakeback .coin { transform-origin: 24px 24px; animation: la-turn .7s .75s ease-in-out both; }
  .la-host:is(:hover, :focus-within) .la-trophy .fill { animation: la-fill 1.2s cubic-bezier(.3, .6, .3, 1) both; }
  .la-host:is(:hover, :focus-within) .la-target .arrow { animation: la-shoot .45s cubic-bezier(.5, 0, .9, .5) both, la-quiver .4s .45s ease-out; transform-origin: 22px 26px; }
  .la-host:is(:hover, :focus-within) .la-target .ping { transform-origin: 22px 26px; animation: la-ping .6s .45s ease-out both; }
  .la-host:is(:hover, :focus-within) .la-reels .spin { animation: la-reel 1s cubic-bezier(.25, .8, .35, 1.08) both; }
  .la-host:is(:hover, :focus-within) .la-reels .r1 .spin { animation-duration: 1.25s; }
  .la-host:is(:hover, :focus-within) .la-reels .r2 .spin { animation-duration: 1.55s; }
  .la-host:is(:hover, :focus-within) .la-weekend .x2 { transform-origin: 24px 25px; animation: la-stamp .55s cubic-bezier(.3, 1.5, .5, 1) both; }
  .la-host:is(:hover, :focus-within) .la-weekend .d1 { animation: la-day .3s .5s both; }
  .la-host:is(:hover, :focus-within) .la-weekend .d2 { animation: la-day .3s .75s both; }
  .la-host:is(:hover, :focus-within) .la-coins .drop { animation: la-drop .75s cubic-bezier(.5, 0, .7, .4) both; }
  .la-host:is(:hover, :focus-within) .la-gift .lid { transform-origin: 8px 22px; animation: la-lid .6s cubic-bezier(.3, .7, .4, 1) both; }
  .la-host:is(:hover, :focus-within) .la-gift .st { transform-origin: 24px 28px; animation: la-rise .6s .35s cubic-bezier(.3, 1.4, .5, 1) both; }
  .la-host:is(:hover, :focus-within) .la-medal .disc { transform-origin: 24px 19px; animation: la-swing 1.3s ease-in-out both; }
  .la-host:is(:hover, :focus-within) .la-gem .gem { transform-origin: 24px 24px; animation: la-turn .8s ease-in-out both; }
  .la-host:is(:hover, :focus-within) .la-gem .facet { animation: la-glint .5s .55s ease-out both; }
  .la-host:is(:hover, :focus-within) .la-shield .chk { stroke-dasharray: 1; animation: la-draw .5s .15s cubic-bezier(.4, 0, .2, 1) both; }
  .la-host:is(:hover, :focus-within) .la-shield .ping { transform-origin: 24px 24px; animation: la-ping .7s .55s ease-out both; }
  .la-host:is(:hover, :focus-within) .la-crown .crown { animation: la-lift .7s cubic-bezier(.3, .7, .4, 1) both; }
  .la-host:is(:hover, :focus-within) .la-crown .j1 { animation: la-jewel .25s .35s both; }
  .la-host:is(:hover, :focus-within) .la-crown .j2 { animation: la-jewel .25s .5s both; }
  .la-host:is(:hover, :focus-within) .la-crown .j3 { animation: la-jewel .25s .65s both; }
}
@keyframes la-jiggle { 0%, 100% { transform: none; } 20% { transform: rotate(-7deg) scale(1.03, .96); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } }
@keyframes la-c1 { 0% { opacity: 0; transform: translate(0, 8px); } 25% { opacity: 1; } 55% { transform: translate(-9px, -10px); } 100% { opacity: 1; transform: translate(-15px, 1px); } }
@keyframes la-c2 { 0% { opacity: 0; transform: translate(0, 8px); } 25% { opacity: 1; } 55% { transform: translate(1px, -13px); } 100% { opacity: 1; transform: translate(0, -9px); } }
@keyframes la-c3 { 0% { opacity: 0; transform: translate(0, 8px); } 25% { opacity: 1; } 55% { transform: translate(10px, -10px); } 100% { opacity: 1; transform: translate(15px, 1px); } }
@keyframes la-tear { 0% { transform: none; opacity: 1; } 100% { transform: translate(6px, -10px) rotate(-16deg); opacity: 0; } }
@keyframes la-stamp { 0% { transform: scale(1.9); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes la-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes la-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes la-turn { 0%, 100% { transform: none; } 50% { transform: scaleX(.12); } }
@keyframes la-fill { from { transform: translateY(15px); } to { transform: translateY(0); } }
@keyframes la-shoot { from { transform: translate(18px, -18px); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes la-quiver { 0%, 100% { transform: none; } 25% { transform: rotate(4deg); } 55% { transform: rotate(-3deg); } 80% { transform: rotate(1.5deg); } }
@keyframes la-ping { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(1.35); } }
@keyframes la-reel { from { transform: translateY(0); } to { transform: translateY(42px); } }
@keyframes la-day { from { fill-opacity: .18; } to { fill-opacity: .6; } }
@keyframes la-drop { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 75% { transform: translateY(12.2px); } 87% { transform: translateY(10.4px); } 100% { transform: translateY(12.2px); opacity: 1; } }
@keyframes la-lid { 0% { transform: none; } 100% { transform: translate(-3px, -9px) rotate(-16deg); } }
@keyframes la-rise { from { opacity: 0; transform: translateY(4px) scale(.6); } to { opacity: 1; transform: translateY(-13px); } }
@keyframes la-swing { 0%, 100% { transform: none; } 18% { transform: rotate(16deg); } 40% { transform: rotate(-11deg); } 62% { transform: rotate(6deg); } 82% { transform: rotate(-2.5deg); } }
@keyframes la-glint { 0% { fill-opacity: 0; } 40% { fill-opacity: .55; } 100% { fill-opacity: .12; } }
@keyframes la-lift { 0%, 100% { transform: none; } 40% { transform: translateY(-5px); } 70% { transform: translateY(1px); } }
@keyframes la-jewel { from { fill-opacity: .18; } to { fill-opacity: 1; } }

/* signed in: the balance joined to Deposit, then the avatar menu (pages._top_cta, lobby.js) */
.top-cta { align-items: center; }
.top-money { display: flex; align-items: center; gap: 0; }
.bal { position: relative; }
/* the balance: a well with the figure in the number face, its right edge tucked under Deposit's cut corner */
.bal-pill { --k: 10px; --lnc: var(--field-line); position: relative; isolation: isolate; display: flex; align-items: center; gap: 8px; height: 44px;
  padding: 0 22px 0 14px; margin-right: -10px; border: 0; background: var(--well); clip-path: polygon(var(--k) 0, 100% 0, 100% 100%, 0 100%, 0 var(--k));
  color: var(--ink); font: 800 19px/1 var(--display-num); font-variant-numeric: tabular-nums; cursor: pointer; }
.bal-pill::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lnc); transition: background-color 120ms var(--e-out);
  clip-path: polygon(evenodd, var(--k) 0, 100% 0, 100% 100%, 0 100%, 0 var(--k), var(--k) 0, calc(var(--k) + .62px) 1.5px, 1.5px calc(var(--k) + .62px),
    1.5px calc(100% - 1.5px), calc(100% - 1.5px) calc(100% - 1.5px), calc(100% - 1.5px) 1.5px, calc(var(--k) + .62px) 1.5px); }
.bal-pill:hover, .bal-pill[aria-expanded="true"] { --lnc: var(--line-strong); }
.bal-pill:focus-visible { outline: 0; --lnc: var(--gold-line); }
.bal-pill .coin { width: 16px; height: 16px; }
.bal-pill b { font-weight: 800; }
.top-money .btn-deposit { position: relative; z-index: 1; }
/* the bar's menus: the games' settings menu (a panel with a hairline edge) */
.tb-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; min-width: 240px; padding: 8px;
  border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1px rgb(151 164 198 / .22), 0 18px 40px rgb(3 6 16 / .7); }
.tb-pop[hidden] { display: none; }
.bal-pop { right: auto; left: 0; width: 280px; padding: 14px 16px; }
.bal-pop p { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0; padding: 10px 0; }
.bal-pop p:first-child { padding-top: 0; }
.bal-pop p + p { border-top: 1px solid var(--line); }
.bal-pop span { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.bal-pop b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 800 22px/1 var(--display-num); font-variant-numeric: tabular-nums; }
.bal-pop small { color: var(--ink-3); font-size: 13px; }
.pop-link { display: block; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600;
  font-size: 14px; text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 4px; }
.me { position: relative; }
/* the avatar: a cut cell with the initial, its VIP tier's metal as the hairline */
.me-btn { --k: 8px; position: relative; isolation: isolate; display: grid; place-items: center; width: 42px; height: 42px; border: 0; background: var(--tier, var(--hair));
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  color: var(--ink); font: 800 19px/1 var(--display-num); cursor: pointer; transition: transform 80ms var(--e-out); }
.me-btn::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--cell); transition: background-color 120ms var(--e-out);
  clip-path: polygon(calc(var(--k) - .88px) 0, 100% 0, 100% calc(100% - calc(var(--k) - .88px)), calc(100% - calc(var(--k) - .88px)) 100%, 0 100%, 0 calc(var(--k) - .88px)); }
.me-btn:hover::after, .me-btn[aria-expanded="true"]::after { background: var(--cell-hi); }
.me-btn:active { transform: scale(.95); }
.me-btn:focus-visible { outline: 0; --tier: var(--gold-line); }
.me-btn[data-tier="bronze"] { --tier: #c27a3e; }
.me-btn[data-tier="silver"] { --tier: #c9d3dd; }
.me-btn[data-tier="gold"] { --tier: #e0b24f; }
.me-btn[data-tier="platinum"] { --tier: #7fe3d6; }
.me-btn[data-tier="diamond"] { --tier: #7fb7ff; }
.me-btn[data-tier="obsidian"] { --tier: #b48cff; }
.me-pop a { --k: 6px; display: block; padding: 9px 12px; color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none;
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); }
.me-pop a:hover, .me-pop a:focus-visible { outline: 0; background: var(--cell); color: var(--ink); }
.me-who { display: grid; gap: 2px; margin: 0 0 6px; padding: 8px 12px 12px; border-bottom: 1px solid var(--line); }
.me-who small { color: var(--ink-2); font-size: 13px; }
.me-out { margin-top: 6px; color: var(--ink-3) !important; }
@media (max-width: 559px) {
  .top-cta .dep-t { display: none; }
  .top-money .btn-deposit { padding: 0 12px; }
  .me { display: none; }  /* the bottom bar's Account does it on a phone */
  .bal-pill { height: 40px; padding: 0 18px 0 10px; font-size: 17px; }
  .top-money .btn-deposit { min-height: 40px; }
  .bal-pop { left: auto; right: -52px; width: min(280px, calc(100vw - 32px)); }
}