/* ===========================================================================
   BLUFFWIN — the site pages
   ---------------------------------------------------------------------------
   The layout and components of the site pages: Casino (casino/index.html,
   with High Scores), Sports (the sportsbook), Settings, Advanced account,
   Verify, the cashier and the help pages — tiles, podium, leaderboard,
   footer, and the page-level rules that answer to the bars.

   The bars themselves (top bar, bottom tab bar, menus, chat panel, notices)
   are in shared/chrome.css, drawn by shared/site.js from one list of
   sections. They live apart because the game pages carry them too, on top
   of shared/shell.css, and nothing in this file is written to sit beside a
   game's frame. Games do NOT load this file.

   Every page that loads this file loads shared/chrome.css after it, bar or
   no bar (login, admin and terms draw none): the bar geometry (--barH,
   --tabH, --safeB) is declared there once, and the rules here read it.
   =========================================================================== */
:root{
  --page:#0a0b18;
  --nav:#11132b;
  --panel:#191c38;
  --card:#232544;
  --inset:#15172c;
  --stroke:#2a2d55;
  --text:#eef0ff;
  --muted:#8b91bd;
  --dim:#666c99;
  --indigo:#5b5be2;
  --indigo-hi:#6a6aec;
  --gold:#f5a623;
  --green:#4ade80;

  --wrapW:1256px;   /* same centred container the game frame uses (--appW) */
  --wrapPad:24px;
  /* --barH, --tabH, --safeB and --chatW: shared/chrome.css */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--page);color:var(--text);
  font:500 14px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100svh;-webkit-text-size-adjust:100%;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
[hidden]{display:none!important}
.wrap{max-width:var(--wrapW);margin:0 auto;padding:0 var(--wrapPad)}

/* The top bar, the bottom tab bar, the menus, the chat panel and the notices
   are in shared/chrome.css, which every site page loads after this file. */

/* a row a mouse can drag: the hand, and no text selection while dragging */
@media (hover:hover) and (pointer:fine){
  .can-drag{cursor:grab}
  .can-drag.dragging{cursor:grabbing;user-select:none;scroll-behavior:auto}
  .can-drag.dragging *{pointer-events:none}
}

/* keep the page's last row clear of the fixed bottom tab bar (shared/chrome.css) */
@media (max-width:1000px){ body{padding-bottom:calc(var(--tabH) + var(--safeB))} }

/* ================= the Casino page ================= */
/* One column for everything. On desktop that is the usual .wrap; on mobile the
   `casino` body class pins every .wrap — hero copy, podium, grid, live bets
   and the footer — to the exact width of the four-up tile grid, so the page
   keeps one pair of edges from top to bottom. */
.sec{position:relative;z-index:1;margin-top:44px}
.stitle{margin:0 0 18px;text-align:center;font-size:24px;font-weight:800;letter-spacing:-.4px}

/* ---- hero: an atmosphere in the palette, fading into the page ---- */
/* overflow-x:clip, not hidden: the atmosphere's glows reach past the viewport on a
   320px phone and must not become a horizontal scroll, while the fade still runs on
   under the Originals title below (clip keeps vertical overflow visible) */
.hero{position:relative;padding:54px 0 8px;text-align:center;overflow-x:clip}
.hero-bg{position:absolute;left:0;right:0;top:0;bottom:-200px;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(58% 46% at 16% 10%, rgba(91,91,226,.50), rgba(91,91,226,0) 72%),
    radial-gradient(48% 40% at 86% 18%, rgba(139,70,214,.42), rgba(139,70,214,0) 72%),
    radial-gradient(56% 42% at 50% 62%, rgba(77,255,190,.14), rgba(77,255,190,0) 70%),
    radial-gradient(70% 60% at 50% 100%, rgba(27,74,110,.32), rgba(27,74,110,0) 70%),
    linear-gradient(#0f1233, #0b0d22)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(10,11,24,0) 0%, rgba(10,11,24,0) 40%, var(--page) 100%)}
.hero-shapes{position:absolute;inset:0;width:100%;height:100%}
.hero-copy{position:relative;z-index:1;padding-bottom:30px}
.hero h1{margin:0;font-size:clamp(26px,3.4vw,44px);line-height:1.12;font-weight:800;letter-spacing:-1px;
  text-shadow:0 4px 26px rgba(3,6,20,.8)}
.hero p{margin:12px auto 0;max-width:460px;font-size:clamp(13.5px,1.3vw,16px);line-height:1.55;color:#c3c9ea}
.hero .wrap{position:relative;z-index:1}

/* ---- podium: the top three as cards that match the game tiles ---- */
.podium{display:grid;grid-template-columns:repeat(3,var(--tw));gap:var(--gridGap);justify-content:center;align-items:end;padding-top:12px}
.pod{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0;
  aspect-ratio:165/222;border-radius:14px;padding:14px 10px;text-align:center;
  background:var(--card);border:1px solid rgba(255,255,255,.06);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.pod-2{order:1}.pod-1{order:2}.pod-3{order:3}
/* a short desktop window makes the cards narrow: the podium sheds its extras first */
@media (min-width:1001px) and (max-height:820px){ .pod{padding:10px 8px;gap:5px} .pod-av{width:40px!important;height:40px!important;font-size:14px!important} .pod-meta{display:none} }
.pod-1{transform:translateY(-12px);border-color:rgba(245,196,81,.5);
  box-shadow:0 0 0 1px rgba(245,196,81,.22),0 0 40px rgba(245,166,35,.16),0 16px 34px rgba(0,0,0,.5)}
.pod.me{box-shadow:inset 0 0 0 1px rgba(91,91,226,.6),0 12px 30px rgba(0,0,0,.4)}
.pod-rank{position:absolute;left:9px;top:9px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-weight:800;font-size:12px;font-variant-numeric:tabular-nums}
.pod-rank.r1{background:linear-gradient(150deg,#f5c451,#c98a12);color:#2a1c02}
.pod-rank.r2{background:linear-gradient(150deg,#d5dbf0,#8f97b8);color:#1d2033}
.pod-rank.r3{background:linear-gradient(150deg,#dd9c63,#a36430);color:#2a1806}
.pod-av{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:17px;color:#0d0f1f;
  box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.pod-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:14.5px;letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod-score{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums}
.pod-score.up{color:var(--green)}.pod-score.down{color:var(--muted)}
.pod-score svg{width:14px;height:14px;flex:none}
.pod-meta{font-size:11.5px;color:var(--muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.more-c{display:block;text-align:center;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--muted)}
.more-c:hover{color:var(--text)}

/* ================= section headers ================= */
.script{margin:46px 0 24px;text-align:center;font-size:clamp(32px,4.6vw,46px);font-weight:400;
  font-family:"Snell Roundhand","Apple Chancery","Segoe Script","Brush Script MT","URW Chancery L","Z003","Bradley Hand",cursive;letter-spacing:.5px}
.sechead{display:flex;align-items:baseline;gap:14px;margin:40px 0 18px}
.sechead h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.3px}
.sechead .more{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.sechead .more:hover{color:var(--text)}
.sechead .count{font-size:13px;color:var(--dim);font-weight:600}

/* ================= game tiles ================= */
/* THE CATALOGUE FITS ONE SCREEN (owner, 26 Sep 2026; 9 Oct 2026: twenty
   titles, FIVE across by four rows on a desktop, FOUR across by five rows on
   a phone — "one screen is important"). --cols and --rows are the grid; one
   length decides the rest: --tw, a tile's width, is the SMALLER of
     - the width that puts --cols columns across the page, and
     - the width whose tile height puts --rows rows and the "Originals" title
       between the bars (100svh less the bars and the title's allowance),
   with a floor so a landscape phone or a huge zoom degrades to a scroll
   rather than to postage stamps. --arW / --arH is the art frame: square on a
   desktop, the taller 92:117 on a phone. The art SVGs are `xMidYMid slice`,
   so a frame crops, never stretches. The name and subtitle sit INSIDE the
   card over a dark scrim at the bottom edge — the only way four rows of real
   art fit a 900px desktop. Type scales with the tile. */
:root{
  --arW:1;--arH:1;--gridGap:16px;--tileR:12px;--cols:5;--rows:4;
  /* the desktop keeps SLACK round the grid (owner, 26 Sep 2026: a full-height
     grid needed a little scroll to line up): the title allowance is 190px, not
     the ~60px it takes, and a tile is at most 184px */
  --tw:max(96px, min(184px, calc((100vw - 64px - (var(--cols) - 1) * var(--gridGap)) / var(--cols)),
    calc((100svh - var(--barH) - 190px - (var(--rows) - 1) * var(--gridGap)) / var(--rows) * var(--arW) / var(--arH))));
  --gridW:calc(var(--tw) * var(--cols) + var(--gridGap) * (var(--cols) - 1));
}
.tile{position:relative;display:block;min-width:0;border-radius:var(--tileR);overflow:hidden;
  transition:transform .18s cubic-bezier(.3,1.3,.5,1),box-shadow .18s}
.tile-art{position:relative;display:block;border-radius:var(--tileR);overflow:hidden;background:var(--card);
  aspect-ratio:var(--arW) / var(--arH);border:1px solid rgba(255,255,255,.06)}
.tile-art svg.art{position:absolute;inset:0;width:100%;height:100%}
.tile-art img.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1;
  background:linear-gradient(to top,rgba(8,11,26,.95) 0%,rgba(8,11,26,.74) 45%,rgba(8,11,26,0) 100%)}
.tile{--subF:clamp(8px, calc(var(--tw) * .045 + 4.5px), 12px);--subB:clamp(4px, calc(var(--tw) * .05), 11px)}
.tile-name,.tile-sub{position:absolute;left:0;right:0;z-index:2;margin:0;padding:0 5px;text-align:center}
.tile-name{bottom:calc(var(--subB) + var(--subF) * 1.25 + 1px);font-size:clamp(10px, calc(var(--tw) * .07 + 5px), 15.5px);
  font-weight:700;letter-spacing:-.2px;line-height:1.1;white-space:normal;overflow:visible;text-overflow:clip;
  overflow-wrap:normal;word-break:normal;hyphens:none;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.tile-sub{bottom:var(--subB);font-size:var(--subF);line-height:1.2;color:#9aa1c9;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a COVER carries its own title and "BLUFFWIN" line (tools/build-covers.mjs):
   no scrim over it, and the tile's name and subtitle stay in the page only for
   screen readers and search */
.tile.covered .tile-art::after{display:none}
.tile.covered .tile-name,.tile.covered .tile-sub{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (hover:hover) and (min-width:1001px){
  .tile:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.5)}
  .tile:hover .tile-name{color:#cfd4ff}
}

/* the rail: one horizontal row on desktop, scrolled rather than wrapped */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:var(--tw);gap:var(--gridGap);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  padding-bottom:12px;scrollbar-width:thin;scrollbar-color:#3b4070 transparent}
.rail::-webkit-scrollbar{height:7px}
.rail::-webkit-scrollbar-track{background:transparent}
.rail::-webkit-scrollbar-thumb{background:#3b4070;border-radius:4px}
.rail > .tile{scroll-snap-align:start}

/* the grid: --cols columns, pinned (never auto-fill), so twenty titles fill
   four full rows on a desktop and five on a phone; a twenty-first starts a
   row that no longer fits one screen — keep the count in mind before adding
   a title (--cols / --rows and the nav-test assertions move together). */
.grid{display:grid;grid-template-columns:repeat(var(--cols),var(--tw));justify-content:center;gap:var(--gridGap);padding-bottom:8px}

/* ================= leaderboard ================= */
.lbd{background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.42)}
/* the filters over the table: Real money | Demo, the window, the game */
.lbd-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px}
.lbd-seg{display:inline-flex;background:var(--inset);border:1px solid var(--stroke);border-radius:11px;padding:3px;gap:2px}
.lbd-seg button{font:inherit;font-size:13px;font-weight:700;color:var(--muted);background:none;border:0;border-radius:8px;
  padding:0 14px;height:36px;cursor:pointer;white-space:nowrap}
.lbd-seg button[aria-pressed="true"]{background:#333760;color:#fff}
.lbd-seg[data-k="mode"] button[data-v="demo"][aria-pressed="true"]{background:#f5a623;color:#231500}
.lbd-game{font:inherit;font-size:14px;font-weight:600;color:var(--text);background:var(--inset);border:1px solid var(--stroke);
  border-radius:11px;height:44px;padding:0 12px;min-width:150px}
.lbd-bot,.lbd-guest{flex:none;display:inline-block;padding:1px 6px;border-radius:5px;font-size:9.5px;font-weight:800;letter-spacing:.5px;line-height:1.6}
.lbd-bot{background:#3b4070;color:#c8cdff}
.lbd-guest{background:rgba(245,166,35,.16);color:#f5a623}
.pod-badge{line-height:1;margin-top:-3px}
.more-c .podcap{color:var(--dim);font-weight:600}
.more-c .podcap:not(:empty)::after{content:" \00b7"}
@media (max-width:640px){
  .lbd-ctl{gap:8px}
  .lbd-seg{width:100%}.lbd-seg button{flex:1;height:44px;padding:0 6px}
  .lbd-game{width:100%}
}
.lbd-r{display:grid;align-items:center;gap:12px;padding:0 16px;
  grid-template-columns:52px minmax(120px,1.3fr) minmax(110px,1fr) minmax(76px,.55fr)
                        minmax(90px,.7fr) minmax(110px,.9fr)}
.lbd-hr{height:40px;font-size:12.5px;font-weight:600;color:var(--muted);
  border-bottom:1px solid rgba(255,255,255,.06)}
.lbd-b .lbd-r{height:56px;font-size:13.5px;border-bottom:1px solid rgba(255,255,255,.04)}
.lbd-b .lbd-r:last-child{border-bottom:0}
.lbd-b .lbd-r.me{background:rgba(91,91,226,.14);box-shadow:inset 2px 0 0 var(--indigo)}
.lbd-num{text-align:right;font-variant-numeric:tabular-nums}
.lbd-rank{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--inset);
  color:var(--muted);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums}
.lbd-rank.r1{background:linear-gradient(150deg,#f5c451,#c98a12);color:#2a1c02}
.lbd-rank.r2{background:linear-gradient(150deg,#d5dbf0,#8f97b8);color:#1d2033}
.lbd-rank.r3{background:linear-gradient(150deg,#dd9c63,#a36430);color:#2a1806}
.lbd-p{display:flex;align-items:center;gap:10px;min-width:0}
.lbd-p b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbd-av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;color:#0d0f1f}
.lbd-me{background:var(--indigo);color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px}
.lbd-score{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;font-weight:700}
.lbd-score svg{width:15px;height:15px;flex:none}
.lbd-score.up{color:var(--green)}
.lbd-score.down{color:var(--muted)}
.lbd-mult{font-weight:700;color:var(--gold)}
.lbd-rounds{color:var(--muted)}
.lbd-g{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbd-foot{padding:13px 16px;font-size:12px;color:var(--dim);line-height:1.6;
  border-top:1px solid rgba(255,255,255,.06)}
.lbd-empty{padding:34px 16px;text-align:center;color:var(--dim);font-size:13.5px}
/* a row that just changed rank flashes once so live movement is visible */
@keyframes lbdIn{from{background:rgba(91,91,226,.26)}to{background:transparent}}
.lbd-b .lbd-r.bump{animation:lbdIn .9s ease-out}

/* ================= coming soon ================= */
.soon-wrap{max-width:560px;margin:0 auto;text-align:center;padding:70px 20px 40px}
.soon-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:#b9c0e8;background:rgba(91,91,226,.16);border:1px solid rgba(91,91,226,.4);
  padding:6px 13px;border-radius:999px}
.soon-wrap h1{margin:20px 0 0;font-size:clamp(28px,4.4vw,42px);font-weight:800;letter-spacing:-1px}
.soon-wrap p{margin:14px auto 0;color:var(--muted);font-size:15px;line-height:1.7;max-width:440px}
.soon-art{width:min(380px,100%);height:auto;margin:34px auto 0;display:block;opacity:.9}
.soon-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:34px 0 0;padding:0;list-style:none}
.soon-list li{background:var(--panel);border:1px solid var(--stroke);border-radius:12px;padding:16px 12px;
  font-size:13px;color:var(--muted)}
.soon-list li b{display:block;color:var(--text);font-size:13.5px;font-weight:700;margin-bottom:3px}
.soon-cta{display:inline-flex;align-items:center;gap:8px;margin-top:32px;background:var(--indigo);
  border-radius:11px;padding:13px 22px;font-weight:700;font-size:14.5px}
.soon-cta:hover{background:var(--indigo-hi)}

/* ================= supported coins strip (Casino home only) ================= */
/* A muted band above the footer, no labels, no hover — a visual trust signal
   that the eight listed coins are what real balances are held in. The band
   uses the footer's own background so the two read as one continuous chrome
   section, with a hairline separating them. */
.supported{margin-top:56px;background:#080a16;border-top:1px solid rgba(255,255,255,.06);padding:22px 0}
.supported ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px}
.supported li{width:44px;height:44px;border-radius:50%;overflow:hidden;background:#11132b;
  border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center}
.supported img{display:block;width:100%;height:100%}
@media (max-width:640px){
  .supported{padding:18px 0}
  .supported ul{gap:20px}
  .supported li{width:40px;height:40px}
  /* let the strip's wrap use the page's normal gutters, not the tile-grid width */
  body.casino .supported .wrap{max-width:none;padding:0 var(--wrapPad)}
}
/* eight coins in one row on a phone... */
@media (max-width:480px){
  .supported ul{gap:10px}
  .supported li{width:32px;height:32px}
}
/* ...and two even rows of four where even that does not fit */
@media (max-width:360px){
  .supported ul{display:grid;grid-template-columns:repeat(4,32px);justify-content:center;gap:12px 20px}
}

/* ================= footer ================= */
/* group heading, then its links inline and wrapping across rows */
footer{margin-top:56px;border-top:1px solid rgba(255,255,255,.06);background:#080a16}
/* the supported strip provides the border and the spacing, so the footer sits directly under it on Casino */
body.casino .supported + footer{margin-top:0;border-top:0}
.fcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding:44px 0 8px}
.fcols h4{margin:0 0 10px;font-size:14.5px;font-weight:700}
.fcols ul{margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.fcols li{list-style:none;color:var(--muted);font-size:13.5px;padding:0;white-space:nowrap}
.social{display:flex;gap:9px;margin-top:2px}
.social span{width:34px;height:34px;border-radius:8px;background:var(--panel);display:grid;place-items:center;color:var(--muted)}
.social svg{width:16px;height:16px}
.legal{padding:26px 0 40px;color:#5d6390;font-size:12.5px;line-height:1.75;max-width:980px}
.legal b{color:#8b91bd}
.legal .rule{height:1px;background:rgba(255,255,255,.06);margin:0 0 22px}

/* ================= responsive ================= */


/* ---- phone tiles (≤1000px, the same width the nav switches at) ----
   Four across by five rows (twenty titles), in the taller 92:117 frame, 6px
   gaps, 16px page gutters. At 375x812 the tiles are ~81px and the whole grid,
   title included, sits between the top bar and the bottom tab bar; a short
   phone (375x667) shrinks them to ~75px and a 360x640 one to ~71px so the
   fifth row still fits. The floor (66px) only binds in landscape, which
   scrolls. */
@media (max-width:1000px){
  :root{--arW:92;--arH:117;--gridGap:6px;--tileR:10px;--cols:4;--rows:5;
    --tw:max(64px, min(calc((100vw - 32px - (var(--cols) - 1) * var(--gridGap)) / var(--cols)),
      max(66px, calc((100svh - var(--barH) - var(--tabH) - 58px - (var(--rows) - 1) * var(--gridGap)) / var(--rows) * var(--arW) / var(--arH)))))}
  .grid{padding-bottom:0}
  /* the rail stops being a rail and becomes the same grid */
  .rail{grid-auto-flow:row;grid-template-columns:repeat(var(--cols),var(--tw));justify-content:center;overflow-x:visible;padding-bottom:0}
  /* the headings above the grid give up their desktop air so the grid starts high */
  .script{margin:12px 0 4px;font-size:28px}
  .sechead{margin:28px 0 8px}   /* the Originals heading itself carries margin-top:0 inline */

  /* ---- the Casino page column: every section on the grid's edges ---- */
  body.casino .wrap{max-width:var(--gridW);padding:0}
  .sec{margin-top:30px}
  .stitle{margin:0 0 12px;font-size:19px}
  .hero{padding:26px 0 4px}
  .hero-bg{bottom:-140px}
  .hero-copy{padding-bottom:18px}
  .hero h1{font-size:23px;letter-spacing:-.6px}
  .hero p{margin-top:8px;font-size:12.5px}
  .podium{padding-top:8px}
  .pod{aspect-ratio:var(--arW) / var(--arH);border-radius:10px;padding:8px 5px;gap:3px;box-shadow:none}
  .pod-1{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(245,196,81,.22),0 0 24px rgba(245,166,35,.14)}
  .pod-rank{left:4px;top:4px;width:18px;height:18px;font-size:9.5px;border-radius:5px}
  .pod-av{width:30px;height:30px;font-size:11px;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
  .pod-name{font-size:11px}
  .pod-score{font-size:10px;gap:3px}
  .pod-score svg{width:11px;height:11px}
  .pod-meta{display:none}
  .more-c{margin-top:10px;font-size:12px}

  /* live bets at the column width: Player / Payout / Multi (the coin icon rides
     on the payout), fewer rows, smaller type, and the same corner radius as the
     cards. livebets.js injects its own stylesheet after this one, so these carry
     the body class for weight. Row cells come Game, Player, Wager, Multi,
     Payout, Bet ID; `order` puts Payout before Multi. */
  body.casino .sec-live{margin-top:52px}
  /* nearly full width: 24px gutters, shrinking on the narrowest phones so the
     board is never narrower than the tile column */
  body.casino .sec-live .wrap{max-width:none;padding:0 min(24px, calc((100% - var(--gridW)) / 2))}
  body.casino .livebets{margin-top:0;border-radius:10px;box-shadow:none;border:1px solid rgba(255,255,255,.06)}
  body.casino .lb-head{padding:8px 8px 6px;gap:8px}
  body.casino .lb-tabs{padding:3px}
  body.casino .lb-tabs button{padding:6px 9px;font-size:11.5px}
  body.casino .lb-live .lb-lbl{font-size:11px}
  body.casino .lb-sw{width:36px;height:21px}
  body.casino .lb-sw::after{width:15px;height:15px}
  body.casino .lb-sw[aria-pressed="true"]::after{transform:translateX(15px)}
  body.casino .lb-table{padding:0 4px 2px}
  body.casino .lb-r{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.7fr);gap:8px;padding:0 8px;font-size:12.5px}
  body.casino .lb-r > :nth-child(1),body.casino .lb-r > :nth-child(3),body.casino .lb-r > :nth-child(6){display:none}  /* Game, Wager, Bet ID */
  body.casino .lb-r > .lb-p,body.casino .lb-r > .lb-ph{display:block;order:1}
  body.casino .lb-r > :nth-child(5){order:2}          /* Payout, coin + amount */
  body.casino .lb-r > :nth-child(4){order:3}          /* Multi */
  body.casino .lb-hr > .lb-ph{color:var(--muted,#8b91bd)}
  body.casino .lb-hr{height:30px;font-size:11px}
  body.casino .lb-body{max-height:260px}
  body.casino .lb-body .lb-r{height:42px}
  body.casino .lb-foot{padding:6px 10px 10px;font-size:10px}
  body.casino .lb-body .lb-r.fresh{animation:lbGrowC .26s cubic-bezier(.22,.9,.3,1),lbIn .3s ease-out}
  @keyframes lbGrowC{from{height:0;opacity:0}to{height:42px;opacity:1}}

  /* footer: one group under the next, links inline */
  body.casino footer{margin-top:36px}
  body.casino .fcols{grid-template-columns:1fr;gap:22px;padding:28px 0 6px}
  body.casino .legal{padding:20px 0 28px;font-size:12px}
}
@media (max-width:860px){
  .lbd-r{grid-template-columns:44px minmax(90px,1.4fr) minmax(96px,1fr);padding:0 12px}
  .lbd-hr .col-game,.lbd-b .lbd-g,.lbd-hr .col-rounds,.lbd-b .lbd-rounds,
  .lbd-hr .col-mult,.lbd-b .lbd-mult{display:none}
}
@media (max-width:640px){
  :root{--wrapPad:14px}
  /* the header wraps rather than squeezing the title into two words a line:
     name and link on the first row, the count under them */
  .sechead{flex-wrap:wrap;row-gap:2px}
  .sechead .count{order:3;flex:1 1 100%}
  .fcols{grid-template-columns:1fr;gap:18px;padding-top:32px}
  .soon-list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }


/* the one link inside the legal block (About our odds) has to look like one */
footer .legal a{ color:var(--indigo-hi); text-decoration:none; font-weight:700; }
footer .legal a:hover{ text-decoration:underline; }