/* ===========================================================================
   ORIGINALS — site chrome
   ---------------------------------------------------------------------------
   The frame around the site pages: Casino (casino/index.html, with High Scores
   inside it) and Sportsbook. Games do NOT load this file — they sit in
   shared/shell.css's app frame and carry the compact breadcrumb sitebar.

   NAVIGATION, in two shapes for one set of links:
     desktop   a top bar — the Casino | Sportsbook toggle top-left, the logo
               centred, and Chat / balance / Wallet / avatar on the right.
     mobile    the top bar keeps logo + balance + Wallet + avatar, and a fixed
               bottom bar carries Chat | Casino | Sportsbook, icon above label.
   Both are rendered from the same list in shared/site.js, so a section is
   declared once and cannot fall out of step between the two.

   The switch is at 1000px, the same width the old single top nav gave up at.
   =========================================================================== */
: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:64px;
  --tabH:62px;      /* bottom tab bar; 0 on desktop, see the media query */
  --chatW:380px;    /* desktop chat panel */
}
*{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)}

/* ================= top bar =================
   Three columns — the toggle, the logo dead centre, the account cluster —
   as a GRID with shrinkable outer columns, not an absolutely centred logo:
   under browser zoom (Ctrl +/-) the bar is 900–1100 CSS pixels wide with
   desktop-sized contents, and an absolute logo sat on top of the balance.
   Each cluster gives up its words before anything overlaps: the wordmark
   under 1180px, the wallet's label under 1100px, the toggle's labels under
   1060px, and the balance pill ellipsises last. */
.topbar{
  position:sticky;top:0;z-index:50;height:var(--barH);display:flex;align-items:center;gap:18px;
  padding:0 clamp(14px,3vw,28px);background:var(--nav);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.3px;flex:none;min-width:0}
.brand .mark{width:26px;height:26px;flex:none}
@media (min-width:1001px){
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px}
  .brand{justify-self:center}
  .seg{justify-self:start}
  .barright{justify-self:end;min-width:0;margin-left:0;max-width:100%}
  .barright .signedin,.barright .signedout{min-width:0}
}
#moreBtn{display:none}   /* shown by the ≤1100 tier below; declared first so the tier wins */
/* THE COLLAPSE ORDER under zoom (a zoom level is a narrower viewport with
   desktop content: 1440 at 125% is 1152px, at 150% 960px). Tier by tier,
   never all at once, and the bar itself never scrolls:
     ≤1180  the wordmark
     ≤1100  the Wallet label, and the Chat icon folds into the ⋯ menu
     ≤1060  the toggle's labels (icons only)
     ≤1000  the phone layout: toggle and Chat live in the bottom tab bar
   The ⋯ menu (#moreBtn) groups what was folded — Chat, Account, Cashier,
   Sign out — so nothing becomes unreachable; it is hidden while everything
   fits. Above 300% the layout is allowed to break. */
@media (min-width:1001px) and (max-width:1180px){ .brand .wm{display:none} }
@media (min-width:1001px) and (max-width:1100px){ .walletbtn span{display:none} .walletbtn{padding:10px 12px} #chatBtn{display:none} #moreBtn{display:grid} }
@media (min-width:1001px) and (max-width:1060px){ .seg a span{display:none} .seg a{padding:0 11px} .seg a svg{width:18px;height:18px} }
.moremenu{position:fixed;z-index:80;min-width:190px;background:var(--panel);border:1px solid var(--stroke);border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);padding:6px;display:flex;flex-direction:column;gap:2px}
.moremenu a,.moremenu button{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border-radius:8px;
  font-weight:700;font-size:13.5px;color:var(--text);text-align:left;width:100%}
.moremenu a:hover,.moremenu button:hover{background:var(--inset)}
.moremenu svg{width:17px;height:17px;color:var(--muted);flex:none}

/* the Casino | Sportsbook toggle: one pill, two options, the current one filled */
.seg{display:flex;align-items:center;gap:3px;flex:none;padding:4px;border-radius:11px;
  background:var(--inset);border:1px solid var(--stroke)}
.seg a{display:flex;align-items:center;gap:7px;height:34px;padding:0 15px;border-radius:8px;
  font-weight:700;font-size:14px;color:var(--muted);white-space:nowrap;transition:color .15s,background .15s}
.seg a svg{width:16px;height:16px;opacity:.85}
.seg a:hover{color:var(--text)}
.seg a.on{color:#fff;background:var(--indigo);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.seg a.on svg{opacity:1}

.barright{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.iconbtn{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--panel);border:1px solid var(--stroke);color:var(--muted);transition:color .15s,background .15s}
.iconbtn svg{width:18px;height:18px}
.iconbtn:hover{color:var(--text);background:var(--card)}
.iconbtn.on{color:#fff;background:var(--indigo);border-color:var(--indigo)}
.coins{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--stroke);
  border-radius:9px;padding:9px 14px;font-weight:700;font-variant-numeric:tabular-nums;font-size:14px;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coins .sym{font-size:.85em;font-weight:600;color:var(--muted)}
.coins svg{width:18px;height:18px;flex:none}
/* the balance in the bar is the demo balance while the player is in demo */
.coins .cv{display:flex;align-items:baseline;gap:6px;min-width:0}
.coins .usd{font-size:.8em;font-weight:600;color:var(--muted);white-space:nowrap}
/* narrower bars: the dollar value stacks under the amount, in the same pill */
@media (max-width:1180px){
  .coins .cv{flex-direction:column;align-items:flex-start;gap:0;line-height:1.12}
  .coins .usd{font-size:10.5px}
  .coins:has(.usd){padding-top:5px;padding-bottom:5px}
}
.chat-bot{display:inline-block;margin:0 2px 0 5px;padding:0 5px;border-radius:5px;font-size:9.5px;font-weight:800;letter-spacing:.5px;
  line-height:1.6;vertical-align:1px;background:#3b4070;color:#c8cdff}
.coins .modetag{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#231500;background:#f5a623;border-radius:999px;padding:2px 7px}
.walletbtn{display:flex;align-items:center;gap:7px;background:var(--indigo);border-radius:9px;
  padding:10px 15px;font-weight:700;font-size:14px;white-space:nowrap;
  box-shadow:0 2px 0 rgba(0,0,0,.28);transition:background .15s}
.walletbtn:hover{background:var(--indigo-hi)}
.walletbtn svg{width:16px;height:16px;flex:none}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(140deg,#5b5be2,#8b46d6);
  display:grid;place-items:center;font-weight:800;font-size:12px;letter-spacing:.5px;flex:none}

/* 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}
}

/* ================= bottom tab bar (mobile) ================= */
/* Hidden outright on desktop rather than merely off-screen, so it cannot trap
   a tab stop or read out to a screen reader while the top toggle is showing. */
.tabbar{display:none}
@media (max-width:1000px){
  .seg,.iconbtn,#moreBtn{display:none}
  .tabbar{
    display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--nav);border-top:1px solid rgba(255,255,255,.07);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    height:calc(var(--tabH) - 1px);font-size:11px;font-weight:600;color:var(--dim);position:relative;border-radius:0}
  /* (-1px: the bar's top border is inside --tabH, so the bar is exactly that tall
     and the chat panel above it meets it with no gap and no overlap) */
  .tabbar svg{width:21px;height:21px}
  .tabbar .on{color:var(--text)}
  .tabbar .on svg{color:var(--indigo-hi)}
  /* the active tab reads as active from the icon tint AND a bar, so it does not
     rely on colour alone */
  .tabbar .on::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2.5px;
    border-radius:0 0 3px 3px;background:var(--indigo)}
  /* while a panel is open its button is the active one, not the page's section */
  body.chat-open .tabbar a.on{color:var(--dim)}
  body.chat-open .tabbar a.on svg{color:inherit}
  body.chat-open .tabbar a.on::before{display:none}
  /* keep the page's last row clear of the fixed bar */
  body{padding-bottom:calc(var(--tabH) + env(safe-area-inset-bottom))}
}

/* ================= chat panel ================= */
/* desktop: a column pinned to the right edge under the top bar.
   mobile:  fills the space between the top bar and the bottom tab bar. */
.chat{position:fixed;top:var(--barH);right:0;bottom:0;z-index:55;width:var(--chatW);max-width:100%;
  display:flex;flex-direction:column;background:var(--nav);border-left:1px solid rgba(255,255,255,.06);
  box-shadow:-18px 0 44px rgba(0,0,0,.45);transform:translateX(16px);opacity:0;transition:transform .18s,opacity .18s}
.chat.in{transform:none;opacity:1}
.chat-head{display:flex;align-items:center;gap:10px;height:54px;padding:0 12px 0 16px;flex:none;
  border-bottom:1px solid rgba(255,255,255,.06)}
.chat-head h3{margin:0;font-size:15px;font-weight:800}
.chat-chip{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#b9c0e8;
  background:rgba(91,91,226,.16);border:1px solid rgba(91,91,226,.4);padding:3px 8px;border-radius:999px}
.chat-online{font-size:12px;color:var(--dim);white-space:nowrap}
.chat-online::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px}
.chat-close{margin-left:auto;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--stroke);color:var(--muted)}
.chat-close svg{width:15px;height:15px}
.chat-close:hover{color:var(--text)}
.chat-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 12px;display:flex;flex-direction:column;gap:6px;
  scrollbar-width:thin;scrollbar-color:#3b4070 transparent}
.chat-row{display:flex;align-items:flex-start;gap:9px;background:var(--panel);border-radius:10px;padding:9px 11px;
  font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.chat-row.me{background:rgba(91,91,226,.16);box-shadow:inset 2px 0 0 var(--indigo)}
.chat-av{flex:none;width:18px;height:18px;border-radius:50%;margin-top:1px;
  background:hsl(var(--h) 55% 58%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.3)}
.chat-txt b{font-weight:700;color:#cfd4ff}
.chat-txt .chat-you{color:#a9a9ff}
.chat-form{display:flex;gap:8px;padding:10px 12px;flex:none;border-top:1px solid rgba(255,255,255,.06)}
.chat-form input{flex:1;min-width:0;height:42px;border-radius:9px;padding:0 13px;font:inherit;color:var(--text);
  background:var(--inset);border:1px solid var(--stroke);outline:none}
.chat-form input::placeholder{color:var(--dim)}
.chat-form input:focus{border-color:var(--indigo)}
.chat-form button{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;background:var(--indigo);color:#fff}
.chat-form button svg{width:17px;height:17px}
.chat-form button:hover{background:var(--indigo-hi)}
.chat-foot{flex:none;padding:8px 14px 10px;font-size:11px;line-height:1.5;color:var(--dim)}
@media (max-width:1000px){
  .chat{left:0;right:0;width:auto;bottom:calc(var(--tabH) + env(safe-area-inset-bottom));
    border-left:0;box-shadow:none;transform:translateY(10px)}
  .chat.in{transform:none}
  .chat-foot{padding-bottom:8px}
}

/* ================= wallet sheet ================= */
.wsheet{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;
  background:rgba(4,6,18,.66);backdrop-filter:blur(2px)}
.wsheet .card2{width:min(400px,100%);background:var(--panel);border:1px solid var(--stroke);
  border-radius:16px;padding:22px;box-shadow:0 26px 64px rgba(0,0,0,.6)}
.wsheet h3{margin:0 0 4px;font-size:17px;font-weight:800}
.wsheet .bal{display:flex;align-items:center;gap:10px;margin:14px 0 6px;font-size:30px;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.6px}
.wsheet .bal svg{width:28px;height:28px;flex:none}
.wsheet .k{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.wsheet p{margin:12px 0 0;font-size:13px;line-height:1.65;color:var(--muted)}
.wsheet .actions{display:flex;gap:10px;margin-top:18px}
.wsheet .actions a,.wsheet .actions button{flex:1;text-align:center;border-radius:10px;padding:12px;
  font-weight:700;font-size:14px}
.wsheet .go{background:var(--indigo)}
.wsheet .go:hover{background:var(--indigo-hi)}
.wsheet .close{background:var(--inset);border:1px solid var(--stroke);color:var(--muted)}
.wsheet .close:hover{color:var(--text)}
.wsheet .acct{margin:2px 0 12px;font-size:12.5px;color:var(--muted)}
.wsheet .acct b{color:var(--text);font-weight:700}
.wsheet .actions.minor{margin-top:10px}
.wsheet .wmode{display:flex;align-items:center;gap:8px;margin:8px 0 14px}
.wsheet .wnote{font-size:12px;line-height:1.55}
.wsheet .wassets[hidden],.wsheet .wnote[hidden]{display:none}
.wsheet .actions.minor button{padding:10px;font-size:13px}

/* ================= 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 three-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,188px);gap:16px;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}
.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 ================= */
/* Tall rounded tile: the artwork fills a 165x222 frame with a badge pinned
   top-left, and the title + subtitle sit UNDER the art rather than over it, so
   a busy illustration can never eat the label. */
.tile{display:block;min-width:0}
.tile-art{position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--card);
  aspect-ratio:165/222;border:1px solid rgba(255,255,255,.06);
  transition:transform .18s cubic-bezier(.3,1.3,.5,1),box-shadow .18s}
.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-name{display:block;margin-top:10px;font-size:14.5px;font-weight:700;letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-sub{display:block;margin-top:1px;font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile:hover .tile-art{transform:translateY(-5px);box-shadow:0 16px 34px rgba(0,0,0,.55)}
.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:minmax(172px,1fr);gap:16px;
  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: the column count is pinned to DIVISORS OF 12 (6 / 4 / 3 / 2) so the
   twelve titles always fill their rows exactly — auto-fill would happily land
   on 5 and leave a two-card orphan row. */
/* five a row on every desktop width: fifteen titles come to three full rows
   (5-5-5). Columns stay at the tile's own 188px (the podium's size) and the
   block is centred; a narrow window lets them shrink rather than overflow. */
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,188px));justify-content:center;gap:16px;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)}

/* ================= 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}
.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 ================= */


/* ---- mobile tiles (≤1000px, the same width the nav switches at) ----
   The whole catalogue on one phone screen, density taken from the Duel mobile
   reference: three cards a row, each column capped at --tileW so the grid is a
   narrow centred block rather than edge to edge, 6px gaps, and the name +
   subtitle INSIDE the card over a dark scrim along its bottom edge. Four rows
   of 12 cards come to ~486px, which fits between the bars at 375x812 once the
   two headings above the grid are trimmed (see below). The art SVGs are
   `xMidYMid slice`, so the slightly squarer frame crops, never stretches.
   Names wrap to a second line rather than clip; the subtitle stays on one
   line and ellipsises, since some are long.
   A SHORT phone (under 740px tall, a 320x700 say) takes a squarer 92:100
   frame, so a fifth row of cards — the catalogue past twelve titles — still
   sits between the bars. Taller phones keep 92:117. */
@media (max-width:1000px) and (max-height:740px){ html:root{--tileH:100} }   /* html:root outranks the :root below */
@media (max-width:1000px){
  :root{--tileW:92;--tileH:117;--tileGap:6px}   /* unitless: the frame ratio reuses them */
  .grid{grid-template-columns:repeat(3,minmax(0,calc(var(--tileW) * 1px)));justify-content:center;gap:var(--tileGap);padding-bottom:0}
  /* the rail stops being a rail and becomes the same grid */
  .rail{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,calc(var(--tileW) * 1px)));justify-content:center;gap:var(--tileGap);
    overflow-x:visible;padding-bottom:0}
  .tile{position:relative;border-radius:10px;overflow:hidden}
  .tile-art{border-radius:10px;aspect-ratio:var(--tileW)/var(--tileH)}
  .tile-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;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-name,.tile-sub{position:absolute;left:0;right:0;z-index:2;margin:0;padding:0 5px;text-align:center}
  .tile-name{bottom:16px;font-size:12.5px;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:5px;font-size:9px;line-height:1.2;color:#9aa1c9}
  .tile:hover .tile-art{transform:none;box-shadow:none}
  /* 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:calc(var(--tileW) * 3px + var(--tileGap) * 2);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{grid-template-columns:repeat(3,minmax(0,calc(var(--tileW) * 1px)));gap:var(--tileGap);padding-top:8px}
  .pod{aspect-ratio:var(--tileW)/var(--tileH);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 288px column */
  body.casino .sec-live .wrap{max-width:none;padding:0 min(24px, calc((100% - 288px) / 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}
  .topbar{gap:10px;padding:0 12px}
  /* the bar has no centred logo here, so the right cluster may take the room and shrink the balance readout */
  .barright{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:8px}
  .barright .signedin,.barright .signedout{min-width:0;gap:8px}
  .coins{padding:8px 10px;font-size:13px;flex:0 1 auto}
  .walletbtn{padding:9px 12px;flex:none}
  .avatar{width:32px;height:32px}
  /* the wordmark goes before the balance does: a phone bar with the mark,
     the balance, Wallet and the avatar still reads as ours */
  .brand{flex:0 1 auto}
  .brand .wm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:520px){ .brand .wm{display:none} .brand{gap:0} }
/* the narrowest phones: the balance pill alone would push Wallet off the bar */
@media (max-width:400px){
  .coins{padding:8px 9px;gap:6px}
  .coins .sym{display:none}                /* the number stays; the symbol is in the wallet sheet */
  .walletbtn span{display:none}
  .walletbtn{padding:10px 11px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

/* wallet sheet: per-asset balances */
.wsheet .usd{display:block;font-size:13px;color:#9aa0c8;font-weight:600;margin-top:2px}
.wassets{display:flex;flex-direction:column;gap:6px;margin:12px 0 4px}
.wasset{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--stroke,#262a45);background:#0f1122;color:#e6e8f5;font:inherit;cursor:pointer;min-height:44px;text-align:left}
.wasset.on{border-color:#5b5be2;box-shadow:inset 0 0 0 1px #5b5be2}
.wasset .sym{font-weight:800}.wasset .amt{font-weight:700}.wasset .usd{margin:0;font-size:12px}

/* notices */
.toasts{position:fixed;left:50%;bottom:calc(var(--tabH,0px) + 16px);transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:60;pointer-events:none}
.toast{background:#12152a;border:1px solid #5b5be2;color:#e6e8f5;border-radius:12px;padding:10px 16px;font-weight:700;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.4);transition:opacity .4s,transform .4s}
.toast.out{opacity:0;transform:translateY(8px)}

/* signed out: the bar offers sign in and sign up in the account's place */
.signedin,.signedout{display:flex;align-items:center;gap:10px}
.signedin[hidden],.signedout[hidden]{display:none}
.authbtn{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:9px;background:var(--indigo);color:#fff;font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap}
.authbtn.ghost{background:var(--panel);border:1px solid var(--stroke);color:var(--text)}
@media (max-width:400px){ .authbtn{padding:0 10px;font-size:13px} .authbtn.ghost{display:none} }

/* 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; }