/* Storefront styling. This file is served to the public, so it names no operator: the design tokens
   below are the build's own, and every visible name comes from BRAND_NAME at runtime. */
:root {
  --background: #050608;
  --panel: #0e101d;
  --panel-2: #161a23;
  --card: #0f1218;
  --card-hover: #161a23;
  --card-secondary: #1a1d26;
  --surface-well: #0f1115;
  --card-gradient-start: #11151e;
  --card-gradient-end: #0c0f15;

  --accent: #1475e1;
  --accent-hover: #4c8bf6;
  --accent-secondary: #1475e129;
  --success: #23c469;
  --destructive: #ff5d6c;
  --warning: #f5b62e;
  --purple: #9a6bf0;

  --muted: #ffffffbf;
  --muted-foreground: #778295;
  --gray-250: #b1bad3;
  --border: #2a2e3a;
  --border-hover: #3a3f4d;
  --input-bg: #1a1d26;
  --input-active-bg: #22262f;

  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --blue-gradient: linear-gradient(143.32deg, #4c8bf6 7.76%, #2866ec 87.53%);
  --gradient-card: linear-gradient(180deg, var(--card-gradient-start) 0%, var(--card-gradient-end) 100%);
  --shadow-glow: 0 0 7.5px #4382f366;

  --font-sans: "Proxima Nova", system-ui, -apple-system, sans-serif;
  --header-h: 70px;
  --sidebar-w: 240px;
  --container: 1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--background);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------- header */
.top {
  height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.top__logo {
  font-weight: 800; font-size: 22px; letter-spacing: .5px;
  background: var(--blue-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap;
  /* It is the primary way back to the lobby, so it gets a real tap target rather than the height
     of its own glyphs. */
  display: flex; align-items: center; min-height: 44px;
}
.top__search {
  flex: 1; max-width: 440px; position: relative;
  display: flex; align-items: center;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 16px; height: 42px;
}
.top__search:focus-within { border-color: var(--accent); background: var(--input-active-bg); }
.top__search svg { flex: none; opacity: .6; }
.top__search input {
  flex: 1; background: none; border: none; outline: none; color: #fff;
  font-size: 14px; padding: 0 10px; font-family: inherit;
  /* Fill the pill so the tappable area is the control the user sees, not the text line. */
  height: 100%; min-width: 0;
}
.top__spacer { flex: 1; }
.top__actions { display: flex; align-items: center; gap: 10px; }
.balance {
  display: flex; align-items: center; gap: 8px;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 8px 14px; font-variant-numeric: tabular-nums;
}
.balance__amt { font-weight: 700; }
.balance__cur { color: var(--muted-foreground); font-size: 12px; }
.btn {
  background: var(--blue-gradient); color: #fff;
  border-radius: var(--radius-md); padding: 10px 18px; font-weight: 700; font-size: 14px;
  transition: filter .15s, transform .05s; white-space: nowrap;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.lang {
  background: var(--input-bg); border: 1px solid var(--border); color: var(--gray-250);
  border-radius: var(--radius-md); padding: 10px 12px; font-size: 13px; font-weight: 600;
  font-family: inherit; outline: none; cursor: pointer;
}
.lang:hover { background: var(--input-active-bg); color: #fff; }
.lang:focus { border-color: var(--accent); }
.btn--ghost { background: var(--input-bg); border: 1px solid var(--border); color: var(--gray-250); }
.btn--ghost:hover { background: var(--input-active-bg); border-color: var(--border-hover); filter: none; }

/* ---------------------------------------------------------------- layout */
.shell { display: flex; }
.side {
  width: var(--sidebar-w); flex: none;
  border-right: 1px solid var(--border);
  padding: 16px 12px; position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.side__group { margin-bottom: 20px; }
/* The application banner and the language picker at the foot of the panel, as the reference has.
   Separated by a rule rather than by space alone: they are not another navigation group, and on a
   long panel the eye needs to be told where the sections end. */
.side__app {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 12px; padding: 12px 10px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card);
}
.side__app-icon { font-size: 22px; line-height: 1; }
.side__app-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.side__app-text b { font-size: 13px; color: #fff; }
/* The hint can be a whole sentence on iOS ("tap Share, then Add to Home Screen"), so it wraps
   instead of being clipped — a truncated instruction is not an instruction. */
.side__app-text span { font-size: 11px; color: var(--muted-foreground); line-height: 1.35; }
.side__app .btn--sm { margin-left: auto; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.side__lang { border-top: 1px solid var(--border); padding-top: 12px; margin-bottom: 8px; }
.side__lang .lang { width: 100%; }
.side__title { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted-foreground); padding: 0 10px 8px; font-weight: 700; }
.side__link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: var(--radius-sm); color: var(--gray-250);
  font-weight: 600; font-size: 13px; transition: background .15s, color .15s;
}
.side__link:hover { background: var(--card-hover); color: #fff; }
.side__link[aria-current="true"] { background: var(--accent-secondary); color: #fff; }
.side__link .dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; opacity: .6; }

.main { flex: 1; min-width: 0; padding: 20px; max-width: var(--container); margin: 0 auto; }

/* ---------------------------------------------------------------- bottom nav (phones) */
.bnav { display: none; }
@media (max-width: 900px) {
  .side { display: none; }
  .bnav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 53;
    background: var(--panel); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bnav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 9px 2px; font-size: 10px; font-weight: 600; color: var(--muted-foreground);
    min-height: 56px; text-align: center; line-height: 1.2;
  }
  .bnav__item[aria-current="true"] { color: var(--accent-hover); }
  .bnav__icon { font-size: 19px; line-height: 1; }
  /* Keep the bottom nav from covering page content. The floating widgets are lifted at the end of
     this file instead — their base rules are declared later, so an override here would lose. */
  .main { padding-bottom: 84px; }
  .foot { margin-bottom: 68px; }
}

/* A landscape phone has about 390px of height, and a fixed 68px navigation bar takes a sixth of it
   — then sits on top of whatever is at the bottom of the page. Measured at 844x390: a tap on the
   right-hand end of the Bet button landed on a nav item on all seven Originals, which on Mines and
   Tower is the CASH OUT of a live round. Padding at the end of the document does not help; the bar
   is fixed and the control is mid-viewport. The bar is least useful exactly where it does the most
   damage — the header still carries the search, the balance and the account — so below this height
   it goes away and the space goes back to the game. */
@media (max-width: 900px) and (max-height: 500px) {
  .bnav { display: none; }
  .main { padding-bottom: 16px; }
  .foot { margin-bottom: 0; }
}

/* ---------------------------------------------------------------- header on narrow screens */
@media (max-width: 720px) {
  .top { gap: 8px; padding: 0 12px; }
  .top__logo { font-size: 17px; }
  /* The actions row is what pushed the page 305px wider than the viewport, so these two leave the
     header here — and reappear in the FOOTER, which is on every page (see .foot__actions at the end
     of this file). This comment used to claim they lived "on the profile page" and "in the
     sidebar/nav"; neither was ever built, so a phone player could not sign out or change language
     at all. If either is removed from the footer, remove this rule with it. */
  .top .lang, .top #rz-logout { display: none; }
  .top__search { height: 38px; padding: 0 12px; }
  .top__search input { font-size: 13px; padding: 0 8px; }
  .balance { padding: 6px 9px; gap: 5px; }
  .balance__amt { font-size: 13px; }
  .balance__cur { font-size: 10px; }
  .top__actions { gap: 6px; }
  .top__actions .btn { padding: 8px 11px; font-size: 12px; }
  .bell { width: 38px; height: 38px; }
}
@media (max-width: 420px) {
  /* At this width the search field and the actions cannot both fit; search moves to its own row. */
  .top { flex-wrap: wrap; height: auto; padding: 8px 10px; gap: 8px; }
  .top__search { order: 3; flex-basis: 100%; max-width: none; }
  .top__spacer { display: none; }
  .top__actions { margin-left: auto; }
}

/* ---------------------------------------------------------------- hero */
.hero {
  background: var(--blue-gradient);
  border-radius: var(--radius-lg); padding: 32px;
  margin-bottom: 24px; position: relative; overflow: hidden;
}
.hero h1 { margin: 0 0 8px; font-size: 28px; font-weight: 800; }
.hero p { margin: 0 0 18px; opacity: .9; max-width: 520px; }
.hero .btn { background: #fff; color: var(--accent); }

/* ---------------------------------------------------------------- shelves + grid */
.shelf { margin-bottom: 28px; }
.shelf__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.shelf__title { font-size: 18px; font-weight: 700; }
.shelf__more { color: var(--muted-foreground); font-size: 13px; font-weight: 600; }
.shelf__more:hover { color: #fff; }
.row { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.row .card { scroll-snap-align: start; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

.card {
  border-radius: var(--radius-md); overflow: hidden; cursor: pointer;
  background: var(--card); border: 1px solid var(--border);
  transition: transform .12s, border-color .15s, box-shadow .15s; position: relative;
}
.card:hover { transform: translateY(-4px); border-color: var(--border-hover); box-shadow: 0 10px 24px #0007; }
.card__media { position: relative; aspect-ratio: 3/4; background: #fff; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__ph { display: none; }
.card__media--empty { background: linear-gradient(160deg, #1c2130, #0f1218); }
.card__media--empty .card__ph {
  display: flex; position: absolute; inset: 0; align-items: center; justify-content: center;
  padding: 12px; text-align: center; font-size: 13px; font-weight: 700; color: var(--gray-250);
}
.card__badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--success); color: #041; font-size: 10px; font-weight: 800;
  padding: 3px 7px; border-radius: 6px; text-transform: uppercase; letter-spacing: .4px;
}
.card__badge--live { top: 8px; right: 8px; left: auto; background: var(--accent); color: #fff; }
.card__over {
  position: absolute; inset: 0; background: #050608cc; opacity: 0;
  display: flex; align-items: center; justify-content: center; transition: opacity .15s; z-index: 3;
}
.card:hover .card__over { opacity: 1; }
.card__play { background: var(--blue-gradient); color: #fff; border-radius: 999px; padding: 10px 20px; font-weight: 700; font-size: 13px; }
.card__foot { padding: 8px 10px; }
.card__name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__prov { font-size: 11px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.section-head h1 { font-size: 22px; margin: 0; }
.count { color: var(--muted-foreground); font-size: 13px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  background: var(--card); border: 1px solid var(--border); color: var(--gray-250);
  border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 600;
}
.chip:hover { background: var(--card-hover); color: #fff; }
.chip[aria-pressed="true"] { background: var(--accent-secondary); border-color: var(--accent); color: #fff; }

.more-wrap { display: flex; justify-content: center; margin-top: 24px; }
.empty { text-align: center; color: var(--muted-foreground); padding: 60px 20px; }

/* ---------------------------------------------------------------- game player */
.player { max-width: var(--container); margin: 0 auto; padding: 20px; }
.player__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 12px; }
.player__title { font-size: 20px; font-weight: 700; }
.player__prov { color: var(--muted-foreground); font-size: 13px; }
.player__framewrap {
  position: relative; width: 100%; aspect-ratio: 16/10;
  background: #000; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border);
}
.player__framewrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__demoflag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--warning); color: #2a1e00; font-weight: 800; font-size: 11px;
  padding: 4px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: .4px;
}

/* ---------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--border); background: var(--panel); margin-top: 40px; }
.foot__inner { max-width: var(--container); margin: 0 auto; padding: 32px 20px; display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 28px; }
@media (max-width: 800px) { .foot__inner { grid-template-columns: 1fr 1fr; } }
.foot__brand { font-weight: 800; font-size: 20px; background: var(--blue-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; }
.foot__col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted-foreground); margin: 0 0 12px; }
.foot__col a { display: block; color: var(--gray-250); font-size: 13px; padding: 5px 0; }
.foot__col a:hover { color: #fff; }
.foot__legal { border-top: 1px solid var(--border); padding: 18px 20px; text-align: center; color: var(--muted-foreground); font-size: 12px; max-width: var(--container); margin: 0 auto; }

/* ---------------------------------------------------------------- modal / toast */
.modal { position: fixed; inset: 0; background: #000b; display: none; align-items: center; justify-content: center; z-index: 60; padding: 20px; }
.modal[open] { display: flex; }
.modal__box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; max-width: 420px; width: 100%; }
.modal__box h3 { margin: 0 0 6px; font-size: 20px; }
.modal__box p { color: var(--muted-foreground); font-size: 13px; margin: 0 0 18px; }
.modal .field { margin-bottom: 12px; }
.modal input { width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; color: #fff; font-size: 14px; font-family: inherit; outline: none; }
.modal input:focus { border-color: var(--accent); }
.modal .btn { width: 100%; padding: 13px; margin-top: 4px; }
.modal__age { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 14px; cursor: pointer;
  color: var(--muted-foreground); font-size: 12px; line-height: 1.55; }
/* The 18+ declaration is the most consequential control a finger ever lands on here, and the box
   itself is 18px — under the 24x24 minimum for a pointer target, on a phone, which is where this
   product is used.

   Padding does not fix it: a browser ignores padding on input[type=checkbox], so styling that looks
   like a bigger target measures 18px all the same. What actually works is the one already in the
   markup — the whole thing is a <label>, so the sentence is the target and it is 68px tall. That is
   verified by a test that TAPS THE SENTENCE, not by this comment.

   The box is 18 rather than 16 so it is at least visible next to the text it belongs to. */
.modal__age input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }
/* Vertical room so the label's own hit area comfortably clears the minimum. */
.modal__age { padding: 8px 0; }
.modal__age a { color: var(--accent); }
.modal__alt { text-align: center; color: var(--muted-foreground); font-size: 13px; margin-top: 14px; }
.modal__alt a { color: var(--accent); font-weight: 600; }
.skel { background: linear-gradient(90deg, #12151d 25%, #1a1f2a 50%, #12151d 75%); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--card-secondary); border: 1px solid var(--border); padding: 12px 20px; border-radius: var(--radius-md); font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 70; }
.toast[data-show] { opacity: 1; }
.toast--err { border-color: var(--destructive); color: var(--destructive); }

/* ---------------------------------------------------------------- notifications */
/* (mobile lifts for the floating widgets live at the very end of this file — see the note there) */
.bell-wrap { position: relative; }
.bell {
  width: 42px; height: 42px; border-radius: var(--radius-md);
  background: var(--input-bg); border: 1px solid var(--border); color: var(--gray-250);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.bell:hover { background: var(--input-active-bg); color: #fff; }
.bell__dot {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--destructive); color: #fff;
  font-size: 10px; font-weight: 800; display: none;
  align-items: center; justify-content: center; border: 2px solid var(--panel);
}
.bell__dot[data-n] { display: flex; }
.notif {
  position: absolute; right: 0; top: 52px; width: 340px; max-width: calc(100vw - 32px);
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  display: none; z-index: 58; overflow: hidden; box-shadow: 0 16px 40px #000a;
}
.notif[open] { display: block; }
.notif__list { max-height: 420px; overflow-y: auto; }
.notif__item {
  display: flex; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.notif__item:last-child { border-bottom: none; }
.notif__item:hover { background: var(--card-hover); }
.notif__item--new { background: var(--accent-secondary); }
.notif__icon { font-size: 18px; flex: none; line-height: 1.3; }
.notif__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif__body b { font-size: 13px; }
.notif__body span { font-size: 12px; color: var(--muted-foreground); line-height: 1.5; }
.notif__body time { font-size: 10px; color: var(--muted-foreground); opacity: .7; margin-top: 2px; }
.notif__empty { padding: 34px 20px; text-align: center; color: var(--muted-foreground); font-size: 13px; line-height: 1.6; }

/* ---------------------------------------------------------------- install prompt */
.install {
  position: fixed; left: 22px; bottom: 22px; z-index: 54;
  max-width: 380px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px; display: flex; gap: 14px;
  align-items: center; box-shadow: 0 12px 32px #000a;
}
.install__text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; }
.install__text b { display: block; margin-bottom: 2px; }
.install__text span { color: var(--muted-foreground); font-size: 12px; }
.install__actions { display: flex; gap: 8px; flex: none; }
.install__actions .btn { padding: 8px 14px; font-size: 12px; }
@media (max-width: 640px) { .install { left: 12px; right: 12px; max-width: none; bottom: 88px; } }

/* ---------------------------------------------------------------- support chat */
.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 55;
  width: 54px; height: 54px; border-radius: 999px;
  background: var(--blue-gradient); color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px #0009; transition: transform .12s;
}
.chat-fab:hover { transform: scale(1.06); }
.chat-fab__dot {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--destructive); color: #fff;
  font-size: 10px; font-weight: 800; display: none;
  align-items: center; justify-content: center; border: 2px solid var(--panel);
}
.chat-fab__dot[data-n] { display: flex; }
.chat {
  position: fixed; right: 22px; bottom: 88px; z-index: 56;
  width: 360px; max-width: calc(100vw - 44px); height: 480px; max-height: calc(100vh - 130px);
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  display: none; flex-direction: column; overflow: hidden; box-shadow: 0 16px 48px #000a;
}
.chat[open] { display: flex; }
.chat__head {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.chat__title { font-weight: 700; font-size: 14px; }
.chat__sub { color: var(--muted-foreground); font-size: 11px; }
/* A real target. It measured 22x20 — under half the 44px minimum — on the one control whose whole
   job is to let a player out of a window they opened by accident. */
.chat__close {
  color: var(--muted-foreground); font-size: 20px; line-height: 1;
  min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  margin: -12px -10px -12px 0;
}
.chat__close:hover { color: #fff; }
.chat__log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
.msg--player { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg--support { align-self: flex-start; background: var(--card-secondary); color: var(--gray-250); border-bottom-left-radius: 4px; }
.msg__meta { font-size: 10px; color: var(--muted-foreground); margin-top: 4px; }
.chat__empty { color: var(--muted-foreground); font-size: 13px; text-align: center; margin: auto; padding: 0 20px; line-height: 1.6; }
.chat__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.chat__form textarea {
  flex: 1; resize: none; background: var(--input-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; color: #fff; font: inherit; font-size: 13px;
  outline: none; height: 40px; max-height: 90px;
}
.chat__form textarea:focus { border-color: var(--accent); }
.chat__send { background: var(--blue-gradient); color: #fff; border-radius: var(--radius-sm); padding: 0 16px; font-weight: 700; }
.chat__send:disabled { opacity: .5; }

/* ----------------------------------------------------------------------------
   Mobile lifts for the floating widgets.

   These must come last. The bottom nav is declared near the top of this file,
   but .chat-fab, .chat and .install are defined further down — a media query
   placed with the nav would lose to those later base rules at equal
   specificity, and the chat button would sit on top of the Profile nav item.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .chat-fab { bottom: 84px; }
  .chat     { bottom: 148px; height: min(480px, calc(100vh - 240px)); }
  .install  { bottom: 150px; }
  .toast    { bottom: 92px; }
}

/* Language and Log out in the footer: the phone's only route to either, because the header hides
   both below 720px to keep the actions row from overflowing the viewport. Above that width the
   header carries them and these would be duplicates, so they are hidden there instead. */
.foot__actions { display: none; gap: 10px; align-items: center; padding: 0 0 14px; }
@media (max-width: 720px) {
  .foot__actions { display: flex; }
  /* The notification panel is positioned `right: 0` against .bell-wrap, which sits inside the
     header's actions row — hidden on a phone, so the panel anchored to a zero-width box and hung
     129px off the left edge of a 390px screen. Pinned to the viewport instead. */
  .notif { position: fixed; left: 8px; right: 8px; width: auto; max-width: none; top: 64px; }
}

/* Shown only when the page could not reach the server — see components.js mount(). Deliberately
   loud and at the very top: during an outage the cached shell is otherwise indistinguishable from
   a working casino with an empty account. */
.offline-banner {
  position: sticky; top: 0; z-index: 9999;
  background: var(--warning, #f5b62e); color: #1a1200;
  font-size: 13px; font-weight: 700; line-height: 1.5;
  padding: 10px 16px; text-align: center;
}

/* Said in words where a progress bar would have lied: an account that has never been funded has a
   wagering requirement of zero, and zero is not a requirement that has been met. */
.allow__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted-foreground);
  border-left: 2px solid var(--border);
  padding-left: 10px;
}

/* ---- shelf controls ---------------------------------------------------------------
   A strip that scrolls but shows no way to scroll it reads as a cut-off row: the tiles
   at the right edge look clipped rather than continued. The arrows are the affordance;
   they disable themselves at each end so a control is never live and inert at once. */
.shelf__tools { display: flex; align-items: center; gap: 6px; }
.shelf__arrow {
  width: 28px; height: 28px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--gray-250);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.shelf__arrow:hover:not(:disabled) { background: var(--card-hover); border-color: var(--border-hover); color: #fff; }
.shelf__arrow:disabled { opacity: .35; cursor: default; }
/* Touch has no hover, so on a phone the arrows are dead weight next to a strip the player
   can already swipe. The heading keeps its "View all" link, which is the useful control. */
@media (hover: none) { .shelf__tools .shelf__arrow { display: none; } }

/* ---- the house's own games --------------------------------------------------------
   Flat colour rather than artwork: these are ours, they have no supplier thumbnail, and a
   tile that states its own name is honest about that instead of showing an empty frame. */
.card--original .card__media--flat {
  background: linear-gradient(165deg, var(--tint), #0b0d12 165%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.card--original .card__ph {
  display: block; position: static;
  font-size: 20px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: #fff; text-align: center; text-shadow: 0 2px 8px #0006; padding: 0 8px;
}
.card--original .card__tag {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #ffffffb0;
}

/* ---- leaderboards -----------------------------------------------------------------*/
.board { margin-top: 32px; }
.board__tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.board__tab {
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--muted-foreground);
  padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.board__tab.is-on { background: var(--accent); color: #fff; }
.board__tab:not(.is-on):hover { background: var(--card-hover); color: #fff; }
/* The table is the one block here with a fixed minimum width, so it gets its own scroller.
   Without this the whole page scrolls sideways on a phone. */
.board__wrap {
  background: var(--surface-well); border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px); overflow-x: auto;
}
.board__table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 13px; }
.board__table th {
  text-align: left; padding: 12px 16px; font-weight: 600;
  color: var(--muted-foreground); border-bottom: 1px solid var(--border);
}
.board__table td { padding: 11px 16px; border-bottom: 1px solid #ffffff08; }
.board__table tr:last-child td { border-bottom: 0; }
.board__table .num { text-align: right; }
.board__game { color: #fff; font-weight: 600; }
.board__game:hover { color: var(--accent-hover); }
.board__when { color: var(--muted-foreground); white-space: nowrap; }
.board__empty { text-align: center; color: var(--muted-foreground); padding: 28px 16px; }
.pill {
  display: inline-block; border-radius: 999px; padding: 3px 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.pill--win { background: #23c46926; color: var(--success); }
.pill--loss { background: #ffffff10; color: var(--muted-foreground); }

/* A support address is ONE unbreakable token, and one such token sets the minimum width of the whole
   layout. Measured on the live host at 320px: support@31.76.101.104.sslip.io has a min-content width
   of 177px, which pushed the layout viewport to 336px — so the browser zoomed the entire site out to
   fit it, on every page, not just the one with the footer. A real domain behaves the same way.
   Addresses and long policy links have to be allowed to break. */
.foot a, .foot__col a, .foot p, .foot__brand { overflow-wrap: anywhere; }

/* ---- sidebar, four groups with submenus ------------------------------------------- */
.side__group { padding: 8px 0; border-bottom: 1px solid var(--border); }
.side__group:last-child { border-bottom: 0; }
.side__link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--gray-250); font-size: 14px; font-weight: 500;
}
.side__link:hover { background: var(--card-hover); color: #fff; }
.side__link.is-on { background: var(--card-secondary); color: #fff; }
.side__icon { width: 20px; flex: none; text-align: center; font-size: 15px; }
.side__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A section that does not exist yet says so, rather than being hidden — the same claim the
   reference makes, and an honest one: the link goes to a page that states it plainly. */
.side__soon, .side__tag {
  flex: none; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; background: var(--input-bg); color: var(--muted-foreground);
}
.side__tag { background: #23c46926; color: var(--success); }
.side__badge {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.side__sub { padding-left: 30px; }
.side__link--sub { padding: 6px 12px; font-size: 13px; color: var(--muted-foreground); }

/* ---- footer: four columns, as the reference lays them out ------------------------- */
.foot__inner { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px; }
@media (max-width: 900px) { .foot__inner { grid-template-columns: 1fr 1fr; gap: 22px; } }
@media (max-width: 520px) { .foot__inner { grid-template-columns: 1fr; } }

/* The age mark. Fixed, above the chat button's resting corner but out of its way — it is a claim,
   not a control, so it never competes with anything that moves money. */
.age-mark {
  /* Beside the support button, not on top of it. Both were pinned to right:22px/bottom:22px and
     overlapped exactly — the same class of defect as the chat button over the Bet button, caught by
     measuring rather than by looking at it. */
  position: fixed; right: 86px; bottom: 32px; z-index: 53;
  width: 34px; height: 34px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--destructive); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 4px 14px #0008;
}
/* Out from under the support button and the bottom navigation on a phone. */
@media (max-width: 900px) { .age-mark { right: 22px; bottom: 148px; } }

/* ---- hero carousel ---------------------------------------------------------------- */
.hero-car { position: relative; overflow: hidden; border-radius: var(--radius-lg); margin-bottom: 28px; }
.hero-car__track { display: flex; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.hero-car__slide {
  flex: 0 0 100%; min-width: 100%; padding: 44px 40px 52px; color: #fff; display: block;
  /* Three layers, and the order is the whole argument: the scrim on top so the white headline has
     something to sit on, the artwork under it, and the flat gradient LAST so a banner that 404s or
     never arrives leaves colour rather than white text on nothing. --art and --tint are set per
     slide from index.html. */
  background:
    linear-gradient(90deg, rgba(6,9,20,.93) 0%, rgba(6,9,20,.78) 38%, rgba(6,9,20,.30) 72%, rgba(6,9,20,.12) 100%),
    var(--art) center / cover no-repeat,
    var(--tint);
}
.hero-car__title { font-size: 30px; font-weight: 800; margin: 0 0 8px; }
.hero-car__sub { font-size: 15px; line-height: 1.6; margin: 0 0 20px; max-width: 46ch; color: #ffffffd0; }
.hero-car__cta { background: #fff; color: #10131a; }
.hero-car__dots { position: absolute; left: 40px; bottom: 20px; display: flex; gap: 7px; }
.hero-car__dot {
  width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: #ffffff59;
}
.hero-car__dot.is-on { background: #fff; width: 22px; }
@media (max-width: 720px) {
  /* A 21:9 banner in a phone-width box is cropped by HEIGHT, which drags the bright subject in from
     the right and puts it directly under the headline — measured at 390px: contrast 2.69 and 1.82
     against white, both below the 4.5 the text needs. Two changes, not one: the crop moves left onto
     the calm part of the art, and the scrim becomes vertical so it covers the full width rather than
     fading out where the text now is. */
  .hero-car__slide {
    padding: 30px 22px 44px;
    background:
      linear-gradient(180deg, rgba(6,9,20,.93) 0%, rgba(6,9,20,.88) 55%, rgba(6,9,20,.72) 100%),
      var(--art) 18% center / cover no-repeat,
      var(--tint);
  }
  .hero-car__title { font-size: 22px; }
  .hero-car__dots { left: 22px; }
}

/* ---- game tile: the caption sits over the artwork, as the reference lays it out ---- */
.card { position: relative; }
.card__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 22px 9px 8px;
  background: linear-gradient(to top, #000000e6 30%, #0000);
  opacity: 0; transition: opacity .15s;
  pointer-events: none;
}
/* Shown on hover, on focus, and always on touch — where there is no hover and the caption is the
   only way to read a title the artwork may not carry. */
.card:hover .card__cap, .card:focus-within .card__cap { opacity: 1; }
@media (hover: none) { .card__cap { opacity: 1; } }
/* A tile with no artwork keeps its caption permanently: nothing else names it. */
.card__media--empty ~ .card__cap { opacity: 1; }

/* ---- support chat on a short screen ----------------------------------------------
   Support is the channel a player uses when something has gone wrong with their money, and on a
   landscape phone it was unusable: at 844x390 the panel's fixed height left a 28px slit of message
   log against a 232px reply, and at 568x320 the panel collapsed to 80px — less than its own header —
   so `overflow: hidden` clipped the title, the "answers are automated" disclosure and the Close
   button out of existence. The Close button's geometry then landed on the page header, so a tap
   where Close belongs opened the cashier.

   Below this height the panel becomes what every mobile chat is: a full-screen sheet. That removes
   the whole class rather than tuning a height that will be wrong on the next device. */
@media (max-height: 560px), (max-width: 480px) {
  .chat {
    right: 0; left: 0; top: 0; bottom: 0;
    width: 100%; max-width: 100%; height: 100%; max-height: 100%;
    border-radius: 0; border: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* The log must be the part that grows, and it must be allowed to shrink inside a flex column —
     without min-height:0 a long reply pushes the composer off the screen instead of scrolling. */
  .chat__log { min-height: 0; }
  .chat__head { position: sticky; top: 0; background: var(--panel); z-index: 1; }
  /* The floating button would sit on top of the sheet it opened. */
  body.chat-open .chat-fab, body.chat-open .age-mark { display: none; }
}

/* ---- the phone drawer -------------------------------------------------------------
   Below 900px the sidebar is hidden and there was no way to open it, so five sections had no phone
   route at all and signing in removed the last link to Promotions. The bottom bar's fifth slot is
   now a toggle for the whole navigation rather than one more destination. */
@media (max-width: 900px) {
  body.nav-open .side {
    display: block; position: fixed; left: 0; top: 0; bottom: 0; z-index: 57;
    width: min(300px, 86vw); overflow-y: auto;
    background: var(--panel); border-right: 1px solid var(--border);
    padding: 14px 12px calc(84px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 0 40px #000b;
  }
  /* A scrim, so the page behind is visibly inert and a tap anywhere on it closes the drawer. */
  body.nav-open::before {
    content: ''; position: fixed; inset: 0; z-index: 56; background: #000a;
  }
  /* The drawer covers the page, so the floating controls must not sit on top of it. */
  body.nav-open .chat-fab, body.nav-open .age-mark { display: none; }
}
.bnav__item { background: none; border: 0; font: inherit; cursor: pointer; }

/* The drawer's opener, in the header where nothing conditional can take it away. Hidden on desktop,
   where the sidebar is simply there. */
.top__menu {
  display: none; background: none; border: 0; color: var(--gray-250);
  font-size: 20px; line-height: 1; cursor: pointer;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}
.top__menu:hover { color: #fff; }
@media (max-width: 900px) { .top__menu { display: flex; } }

/* The header's own overflow band, and it is wider than the phone breakpoint.
   Signed in, .top__actions is the language select, the bell, the balance, Deposit and Log out —
   468px of fixed content. The rule that trims it was written at 720px, so between 721px and 912px
   (a small laptop window, a tablet, a split screen) the row simply hung off the side: Log out and
   the balance sat outside the viewport and every page scrolled sideways by up to 193px. The trim
   has to start where the content stops fitting, not where phones start. */
@media (max-width: 912px) {
  .top .lang, .top #rz-logout { display: none; }
}

/* The age mark against the INSTALL BAR, which is the one thing it was never measured against.
   Below 640px the bar spans the full width and sits in the same corner, so the mark was completely
   hidden and untappable — the claim a gambling site is most obliged to make, covered by a prompt to
   install an app. While the bar is up, the mark moves above it. */
body.install-open .age-mark { bottom: 232px; }
@media (min-width: 901px) { body.install-open .age-mark { bottom: 110px; } }

/* The search box gives way before the account controls do.
   The header is logo + search + actions, and the actions are the balance and the buttons a player
   needs. With the search at a fixed width the row simply overflowed — 15px at 721px, which is a
   sideways scroll on every page. Letting the search shrink is the general fix; trimming yet another
   control would only move the same problem to the next width. */
.top__search { flex: 1 1 120px; min-width: 0; }
.top__actions { flex: 0 0 auto; }

/* Environment-variable names are single unbreakable tokens, and a page that lists them sets its own
   minimum width by the longest one. /sports and /markets each print a handful — SPORTSBOOK_OPERATOR
   is 21 characters — so at 320px the whole document scrolled sideways. The same class as the support
   address in the footer, in the one place that documents an integration. */
.vert__env code, .vert code { overflow-wrap: anywhere; word-break: break-all; }