/* ===========================================================================
   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 ================= */
.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}
.brand .mark{width:26px;height:26px;flex:none}
/* desktop: the toggle owns the left edge and the logo sits dead centre */
@media (min-width:1001px){
  .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
}

/* 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}
.coins svg{width:18px;height:18px;flex:none}
.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}

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

/* ================= 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 ---- */
.hero{position:relative;padding:54px 0 8px;text-align:center}
.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%;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-badge{position:absolute;left:9px;top:9px;z-index:2;font-size:10.5px;font-weight:700;
  background:rgba(8,11,26,.8);color:var(--green);padding:4px 8px;border-radius:6px;letter-spacing:.2px}
.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. */
.grid{display:grid;grid-template-columns:repeat(6,1fr);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)}
.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 ================= */
@media (max-width:1160px){ .grid{grid-template-columns:repeat(4,1fr)} }

/* ---- 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. */
@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-badge{left:4px;top:4px;font-size:8px;padding:2px 4px;border-radius:4px;letter-spacing:0}
  .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:12px;padding:0 14px}
  .coins{padding:8px 11px;font-size:13px}
  .walletbtn{padding:9px 13px}
  .avatar{width:32px;height:32px}
}
/* the narrowest phones: the balance pill alone would push Wallet off the bar */
@media (max-width:400px){
  .coins{padding:8px 9px;gap:6px}
  .walletbtn span{display:none}
  .walletbtn{padding:10px 11px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }