/* Self-hosted fonts (latin subset), replacing Google Fonts. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src:url(/assets/fonts/barlow-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src:url(/assets/fonts/barlow-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src:url(/assets/fonts/barlow-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 800; font-display: swap; src:url(/assets/fonts/barlow-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 900; font-display: swap; src:url(/assets/fonts/barlow-900.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* TuffPuff — brand palette taken from the operator's own stylesheet. */
:root{
  /* surfaces */
  --bg:#18143B; --bg2:#1F1A48; --panel:#221D50; --panel2:#2A2560;
  --line:rgba(81,77,114,.55); --line2:rgba(81,77,114,.3);
  /* ink */
  --ink:#FFFFFF; --muted:#ABA7C4; --muted2:#9591AE;
  /* brand accents */
  --lime:#59FF8B; --lime2:#7AFFA2; --yellow:#FAF77E; --glow:#B8FB92;
  --violet:#8844FF; --violet2:#7045ED; --pink:#FF4287; --gold:#FFE251; --red:#FF4B55;
  --grad-cta:linear-gradient(112.61deg,#7AFFA2 20.52%,#FAF77E 102.59%);
  --grad-violet:linear-gradient(135deg,#8844FF 0%,#FF4287 100%);
  /* type scale — one ladder, never deviate */
  --h1:clamp(1.9rem,1.3rem + 1.8vw,2.6rem); --h1-lh:1.1;
  --h2:clamp(1.45rem,1.15rem + 1vw,1.9rem); --h2-lh:1.2;
  --h3:clamp(1.15rem,1.05rem + .35vw,1.3rem); --h3-lh:1.25;
  --body:1rem; --small:.875rem; --xs:.75rem; --lead:1.125rem; --fig:1.5rem;
  --measure:70ch;
  /* spacing ladder */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --radius:16px; --radius-sm:11px;
  --shadow:0 18px 44px -26px rgba(0,0,0,.75);
  --wrap:1180px;
  /* the lobby components were written against these names; map them onto
     the palette above so cards, tickers and studio tiles get their surfaces */
  --op-panel:var(--panel); --op-line:#373454; --op-ink:#FFFFFF;
  --op-dim:var(--muted); --op-pct:var(--lime);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Barlow,"Segoe UI",system-ui,sans-serif;
  font-size:var(--body);line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--lime);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}

/* one container, one gutter — nothing drifts */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--s4)}

h1,h2,h3{font-family:Barlow,"Segoe UI",sans-serif;text-wrap:balance;margin:0}
h1{font-size:var(--h1);line-height:var(--h1-lh);font-weight:800;letter-spacing:-.02em;margin-bottom:var(--s4)}
h2{font-size:var(--h2);line-height:var(--h2-lh);font-weight:800;margin:var(--s7) 0 var(--s4)}
h3{font-size:var(--h3);line-height:var(--h3-lh);font-weight:700;margin:var(--s5) 0 var(--s3)}
h2+h3{margin-top:var(--s4)}
p{margin:0 0 var(--s4)}
ul,ol{margin:0 0 var(--s4);padding-left:1.25rem}
li{margin-bottom:var(--s2)}
strong{color:#fff;font-weight:700}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(24,20,59,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line2)}
.hdr__in{display:flex;align-items:center;gap:var(--s4);
  max-width:var(--wrap);margin:0 auto;padding:var(--s3) var(--s4)}
.hdr__logo{display:flex;align-items:center;flex:0 0 auto}
.hdr__logo img{height:38px;width:auto}
.nav{display:flex;gap:var(--s1);flex-wrap:wrap;margin-left:auto}
.nav a{color:var(--ink);font-weight:600;font-size:.92rem;padding:var(--s2) var(--s3);
  border-radius:9px;white-space:nowrap}
.nav a:hover{background:var(--line2);text-decoration:none}
.nav a[aria-current]{color:var(--lime);background:rgba(89,255,139,.1)}
.hdr__cta{flex:0 0 auto}

/* burger — mobile only */
.burger{display:none;background:none;border:0;cursor:pointer;padding:var(--s2);
  color:var(--ink);font-size:1.5rem;line-height:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:13px 26px;border-radius:999px;font-weight:800;font-size:.95rem;
  border:0;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s;
  min-height:46px}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--primary{background:var(--grad-cta);color:#0E2A17;box-shadow:0 0 22px -6px var(--glow)}
.btn--primary:hover{box-shadow:0 0 30px -4px var(--glow)}
.btn--violet{background:var(--grad-violet);color:#fff;box-shadow:0 0 22px -8px var(--violet)}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn--ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn--sm{padding:9px 18px;font-size:.85rem;min-height:40px}
.btn--wide{width:100%}

/* ---------- hero ---------- */
.hero{position:relative;margin:var(--s5) 0 var(--s6);
  background:radial-gradient(1100px 420px at 78% 42%,rgba(136,68,255,.42),transparent 62%),
             linear-gradient(135deg,#2B1D63 0%,#1B1545 58%,#18143B 100%);
  border:1px solid var(--line2);border-radius:26px;overflow:hidden}
.hero__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;gap:var(--s5);padding:var(--s7) var(--s6)}
.hero__kicker{display:inline-block;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  font-size:.78rem;color:var(--ink);background:rgba(255,255,255,.1);
  padding:6px 14px;border-radius:999px;margin-bottom:var(--s4)}
.hero__pct{font-size:clamp(3.2rem,2rem + 6vw,5.4rem);line-height:.92;font-weight:900;
  color:var(--lime);text-shadow:0 0 34px rgba(89,255,139,.45);margin:0 0 var(--s2);
  font-variant-numeric:tabular-nums}
.hero__upto{font-size:clamp(1.15rem,.95rem + .8vw,1.6rem);font-weight:700;margin:0 0 var(--s3)}
.hero__spins{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  padding:6px 15px;border-radius:999px;font-weight:700;font-size:.95rem;margin-left:var(--s2)}
.hero__note{color:var(--muted);font-size:var(--small);margin:var(--s4) 0 0}
/* In the hero the offer figure carries the weight, so the h1 sits under it
   at reading size. It is still the page's only h1. */
.hero__h1{font-size:clamp(1.05rem,.95rem + .45vw,1.3rem);line-height:1.35;font-weight:700;
  color:#EDEBF7;margin:var(--s3) 0 var(--s5);max-width:30ch}
.hero__art{justify-self:center;max-width:390px}
.hero__art img{filter:drop-shadow(0 22px 34px rgba(0,0,0,.5))}

/* ---------- generic panel ---------- */
.panel{background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);
  padding:var(--s5)}
.panel--flat{background:var(--bg2)}

/* ---------- key facts strip ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:var(--s3);
  margin:var(--s5) 0}
.fact{background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius-sm);
  padding:var(--s4)}
.fact__k{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.07em;font-weight:700;margin-bottom:4px}
.fact__v{font-size:1.06rem;font-weight:700;color:#fff}

/* ---------- category chips ---------- */
.cats{display:grid;gap:var(--s3);grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1080px){.cats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:860px){.cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cat{background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius-sm);
  padding:var(--s5) var(--s3) var(--s4);text-align:center;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;
  transition:border-color .15s,transform .15s}
.cat:hover{transform:translateY(-2px)}
.cat:hover{border-color:var(--lime);text-decoration:none}
.cat img{width:52px;height:52px;object-fit:contain;margin:0 auto var(--s2)}
.cat__n{font-weight:700;font-size:.92rem;display:block}
.cat__d{color:var(--muted);font-size:.78rem;display:block;margin-top:4px;line-height:1.35;text-wrap:balance}

/* ---------- game grid ---------- */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--s4)}
.game{background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius-sm);
  overflow:hidden;display:flex;flex-direction:column}
.game__img{aspect-ratio:1;background:var(--bg2)}
.game__img img{width:100%;height:100%;object-fit:cover}
.game__b{padding:var(--s3);display:flex;flex-direction:column;gap:3px;flex:1}
.game__n{font-weight:700;font-size:.9rem;line-height:1.25}
.game__p{color:var(--muted);font-size:.76rem}
.game__rtp{margin-top:auto;padding-top:var(--s2);color:var(--lime);font-weight:700;
  font-size:.8rem;font-variant-numeric:tabular-nums}

/* ---------- tables ---------- */
.tw{overflow-x:auto;border:1px solid var(--line2);border-radius:var(--radius-sm);margin:var(--s4) 0}
/* A scrollable table must announce itself, otherwise the last column simply
   looks missing on a phone. The label is a real element placed AFTER the
   scroll container, so the container's overflow can never clip it. */
.tw-hint{display:none;margin:-8px 0 var(--s5);text-align:right}
.tw-hint span{display:inline-block;background:var(--lime);color:#0E2A17;
  font-size:.7rem;font-weight:800;letter-spacing:.04em;padding:4px 11px;border-radius:999px}
.tw-hint.is-on{display:block}
/* A scrollable table has to announce itself, otherwise the last column just
   looks missing on a phone. The hint is added by JS only to tables that really
   overflow, so it never lies. */

table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line2)}
th{background:var(--panel2);font-weight:700;color:#fff;white-space:nowrap;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.04em}
td{color:#E7E5F2}
tr:last-child td{border-bottom:0}
td:nth-child(n+3){font-variant-numeric:tabular-nums}

/* ---------- pros / cons ---------- */
.pc{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:var(--s4);margin:var(--s5) 0}
.pc__box{background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);padding:var(--s5)}
.pc__box h3{margin-top:0}
.pc__box--good{border-left:3px solid var(--lime)}
.pc__box--bad{border-left:3px solid var(--red)}
.pc__box ul{margin:0;padding-left:1.1rem}

/* ---------- CTA band ---------- */
.cta{margin:var(--s7) 0;
  background:radial-gradient(800px 300px at 82% 50%,rgba(136,68,255,.4),transparent 60%),
             linear-gradient(135deg,#2B1D63,#1B1545);
  border:1px solid var(--line2);border-radius:22px;padding:var(--s6);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);align-items:center}
.cta h2{margin:0 0 var(--s2)}
.cta p{margin:0 0 var(--s4);color:var(--muted)}

/* ---------- FAQ ---------- */
.faq details{background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius-sm);
  padding:var(--s4);margin-bottom:var(--s3)}
.faq summary{cursor:pointer;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--lime);font-weight:800}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{margin-bottom:var(--s3)}
.faq p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
.ftr{margin-top:var(--s8);background:#140F32;border-top:1px solid var(--line2);
  padding:var(--s6) 0 var(--s5)}
.ftr__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--s5)}
.ftr h4,.ftr .ftr__h{color:#fff;font-size:.88rem;text-transform:uppercase;letter-spacing:.07em;
  margin:0 0 var(--s3);font-weight:800}
.ftr a{color:var(--muted);font-size:.9rem;display:block;margin-bottom:var(--s2)}
.ftr a:hover{color:var(--lime)}
.ftr__legal{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line2);
  color:var(--muted2);font-size:.82rem}
.ftr__legal p{margin:0 0 var(--s2)}
.age{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:2px solid var(--muted);border-radius:50%;
  font-weight:800;font-size:.8rem;color:var(--muted);margin-right:var(--s3);flex:0 0 auto}
.ftr__badges{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s3)}

/* breadcrumb */
.crumb{color:var(--muted);font-size:.85rem;margin:var(--s5) 0 var(--s2)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0}
.crumb li+li::before{content:"/";margin-right:var(--s2);color:var(--muted2)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--lime)}

/* ---------- MOBILE: its own composition, not a squeezed desktop ---------- */
@media(max-width:900px){
  .hero__in{grid-template-columns:1fr;text-align:center;padding:var(--s6) var(--s4) 0;gap:var(--s4)}
  .hero__art{max-width:260px;margin-top:var(--s2)}
  .hero .btn{width:100%}
  .cta{grid-template-columns:1fr;text-align:center;padding:var(--s5) var(--s4)}
  .cta .btn{width:100%}
}
@media(max-width:760px){
  .burger{display:block;margin-left:auto}
  .nav{display:none;order:3;width:100%;flex-direction:column;gap:2px;
    padding-top:var(--s3);border-top:1px solid var(--line2);margin-left:0}
  .nav.is-open{display:flex}
  .nav a{padding:11px var(--s3);font-size:.98rem}
  .hdr__cta{display:none}
  .games{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s3)}
  .cats{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:var(--s2)}
  .cat img{width:42px;height:42px}
  h2{margin-top:var(--s6)}
  .panel,.pc__box{padding:var(--s4)}
}
@media(max-width:420px){
  .games{grid-template-columns:1fr 1fr}
  .hero__spins{display:block;margin:var(--s3) 0 0}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- loyalty: three steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin:var(--s5) 0}
.step{background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);
  padding:var(--s5);position:relative}
.step__n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--grad-cta);color:#0E2A17;font-weight:900;font-size:1rem;
  margin-bottom:var(--s3)}
.step h3{margin:0 0 var(--s2)}
.step p{margin:0;color:var(--muted);font-size:.93rem}

/* ---------- loyalty: the two level tables side by side ---------- */
.lvls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);align-items:start}
.lvls .tw{margin:0}
.lvls table{min-width:0}
.lvls td:first-child{font-weight:700;color:#fff}
.lvls td:last-child{color:var(--lime);font-weight:700}

/* ---------- loyalty: rank cards ---------- */
.ranks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);margin:var(--s5) 0}
.rank{background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);
  border-top:3px solid var(--line)}
.rank--member{border-top-color:#9894B3}
.rank--silver{border-top-color:#C7CBD6}
.rank--gold{border-top-color:#FFE251}
.rank--platinum{border-top-color:#7AFFA2}
.rank--black{border-top-color:#FF4287}
.rank__head{display:flex;flex-direction:column;gap:2px}
.rank__name{font-weight:800;font-size:1.06rem}
.rank__lvl{color:var(--muted);font-size:.78rem;font-weight:600}
.rank__cb{display:flex;flex-direction:column;gap:1px;padding:var(--s3) 0;
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.rank__cbv{font-size:1.5rem;font-weight:900;color:var(--lime);line-height:1;
  font-variant-numeric:tabular-nums}
.rank__cbv--none{font-size:.95rem;color:var(--muted2);font-weight:700}
.rank__cbl{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  font-weight:700}
.rank__lim{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rank__lim li{margin:0;color:var(--muted);font-size:.76rem;display:flex;flex-direction:column}
.rank__lim span{color:#fff;font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums}

@media(max-width:1080px){
  .ranks{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:860px){
  .steps{grid-template-columns:1fr}
  .ranks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lvls{grid-template-columns:1fr;gap:var(--s3)}
}
@media(max-width:420px){
  .ranks{grid-template-columns:1fr}
}

/* ---------- login: showcase form beside the mascot ---------- */
.lg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:var(--s6);
  align-items:center;margin:var(--s5) 0 var(--s7)}
.lg__h1{margin:0 0 var(--s3)}
.lg__sub{color:var(--muted);font-size:.93rem;margin:0 0 var(--s5)}
.lg__field{margin-bottom:var(--s4)}
.lg__field label{display:block;font-size:.8rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.lg__field input{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:11px;padding:13px 15px;color:var(--ink);font-family:inherit;font-size:.98rem}
.lg__field input::placeholder{color:var(--muted2)}
.lg__field input:disabled{cursor:not-allowed;opacity:.85}
.lg__note{color:var(--muted2);font-size:.8rem;margin:var(--s3) 0 0;line-height:1.5}
.lg__alt{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line2);
  font-size:.92rem;color:var(--muted)}
.lg__alt a{display:flex;align-items:center;min-height:40px;margin-top:4px;font-weight:700}
.lg__art{justify-self:center}
.lg__art img{max-width:320px;filter:drop-shadow(0 20px 32px rgba(0,0,0,.5))}

@media(max-width:860px){
  /* Phone: the form leads, the mascot sits under it rather than squeezing the column. */
  .lg{grid-template-columns:1fr;gap:var(--s4);margin-bottom:var(--s6)}
  .lg__art{order:2}
  .lg__art img{max-width:220px}
}

/* Phone: the logo link is also a tap target back to the home page, so it gets
   the same 40px minimum as the rest of the navigation. */
@media (max-width:860px){
  .hdr__logo{min-height:40px;display:inline-flex;align-items:center}
}

/* Phone: the trail link is a tap target, so it carries the same 40px minimum
   as the navigation. The separator stays aligned to the text. */
@media (max-width:860px){
  .crumb li{display:flex;align-items:center;min-height:40px}
  .crumb a{display:inline-flex;align-items:center;min-height:40px}
}


/* =========================================================
   OPERATOR LAYOUT. The lobby's own composition: a fixed rail
   of section icons on the left, a full-width promo band, a
   row of category tiles and cards of games below it.
   ========================================================= */
.shell{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0;align-items:start}
.rail{position:sticky;top:0;align-self:start;height:100vh;background:var(--bg2);
  border-right:1px solid var(--line2);padding:var(--s4) 0;display:flex;
  flex-direction:column;gap:var(--s2);z-index:5}
.rail__i{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:var(--s3) var(--s2);margin:0 var(--s2);border-radius:var(--radius-sm);
  color:var(--muted);text-decoration:none;font-size:.66rem;letter-spacing:.02em;
  text-align:center;line-height:1.2;min-height:64px;justify-content:center}
.rail__i img{width:22px;height:22px;opacity:.85}
.rail__i:hover{background:var(--panel);color:var(--ink)}
.rail__i[aria-current]{background:var(--panel2);color:var(--ink)}
.rail__i[aria-current] img{opacity:1}

/* Promo band. The palm silhouettes and the glow are drawn in CSS, so no
   extra image is fetched for the background. */
.band{position:relative;overflow:hidden;border-radius:var(--radius);
  background:
    radial-gradient(120% 140% at 78% 10%, rgba(136,68,255,.55) 0%, rgba(136,68,255,0) 55%),
    radial-gradient(90% 120% at 12% 90%, rgba(89,255,139,.16) 0%, rgba(89,255,139,0) 60%),
    linear-gradient(105deg,#4b2bb5 0%,#6b34d6 42%,#8a3fe0 100%);
  padding:var(--s6) var(--s6);margin:var(--s5) 0 var(--s5);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);align-items:center;
  min-height:300px}
.band::before{content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(closest-side at 18% 100%, rgba(20,10,60,.5) 0 38%, transparent 40%),
    radial-gradient(closest-side at 42% 100%, rgba(20,10,60,.4) 0 30%, transparent 32%);
  pointer-events:none}
.band__in{position:relative;z-index:2;min-width:0}
.band__kick{font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  font-size:.8rem;color:#EADFFF;margin:0 0 var(--s2)}
.band__pct{font-family:Barlow,sans-serif;font-weight:900;line-height:.92;
  font-size:clamp(3rem,2rem + 5vw,4.8rem);color:var(--lime);
  text-shadow:0 0 34px rgba(89,255,139,.45);margin:0}
.band__upto{font-size:1.15rem;font-weight:700;margin:var(--s2) 0 var(--s4);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.band__spins{background:#fff;color:#2A2560;border-radius:99px;
  padding:5px 14px;font-size:.88rem;font-weight:700}
.band__art{position:relative;z-index:2;width:clamp(180px,26vw,300px);height:auto;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.45))}
.band__note{margin:var(--s4) 0 0;font-size:.82rem;color:#D9CFF5;max-width:52ch}

/* Category tiles, the row directly under the band. */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);
  margin:0 0 var(--s7)}
.tile{background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius-sm);
  padding:var(--s4) var(--s2);display:flex;flex-direction:column;align-items:center;
  gap:var(--s2);text-decoration:none;color:var(--ink);font-size:.82rem;font-weight:600;
  text-align:center;min-height:92px;justify-content:center}
.tile:hover{background:var(--panel2);border-color:var(--line)}
.tile img{width:30px;height:30px}

/* Promo cards: the ray fan behind each icon is CSS, the icon is the
   operator's own artwork. */
.promos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);
  margin:0 0 var(--s7)}
.promo{position:relative;overflow:hidden;border-radius:var(--radius);
  padding:var(--s5);text-align:center;isolation:isolate;
  background:linear-gradient(160deg,#6B34D6 0%,#3E1F8F 100%)}
.promo--b{background:linear-gradient(160deg,#2E8F6B 0%,#17523D 100%)}
.promo--c{background:linear-gradient(160deg,#B0357A 0%,#5E1B45 100%)}
.promo::before{content:"";position:absolute;inset:-40% -10%;z-index:-1;
  background:repeating-conic-gradient(from 0deg at 50% 45%,
    rgba(255,255,255,.10) 0deg 9deg, rgba(255,255,255,0) 9deg 18deg)}
.promo img{width:92px;height:92px;object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.4))}
.promo__t{font-weight:800;font-size:1.02rem;margin:var(--s3) 0 var(--s2)}
.promo__n{font-family:Barlow,sans-serif;font-weight:900;font-size:2.1rem;
  line-height:1;margin:0 0 var(--s2)}
.promo__s{font-size:.84rem;color:#EFE7FF;margin:0 0 var(--s4)}

/* Payment and licence marks in the footer. */
.pays{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;
  padding:var(--s5) 0;border-top:1px solid var(--line2);margin-top:var(--s5)}
.pays img{height:26px;width:auto;opacity:.75}
.pays img:hover{opacity:1}

@media (max-width:1040px){
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .promos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  /* On a phone the rail becomes a scrolling strip. A grid track sizes to its
     content, so the strip has to be pinned to the viewport width or it widens
     the whole page instead of scrolling inside itself. */
  .shell{display:block}
  .rail{position:static;height:auto;flex-direction:row;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--line2);padding:var(--s2);
    width:100%;max-width:100%;min-width:0}
  .rail__i{min-height:44px;flex:0 0 auto;flex-direction:row;gap:var(--s2);
    padding:var(--s2) var(--s3);font-size:.76rem}
  .band{grid-template-columns:minmax(0,1fr);text-align:center;padding:var(--s5) var(--s4);
    min-height:0}
  .band__art{margin:0 auto;width:min(60vw,220px)}
  .band__upto{justify-content:center}
  .band__note{margin-left:auto;margin-right:auto}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
  .promos{grid-template-columns:minmax(0,1fr)}
}


/* The rail carries the sections on desktop, so the masthead keeps only the
   logo and the offer button, the way the operator's own header is arranged.
   Below the rail breakpoint the top nav comes back, because the rail turns
   into a scrolling strip and no longer reads as the primary menu. */
@media (min-width:861px){
  .hdr .nav{display:none}
  .hdr .burger{display:none}
  .hdr__cta{margin-left:auto}
}


/* Ten tiles: two columns divide evenly, three leave one orphan on the last row. */
@media (max-width:860px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }


/* The rail carries the sections at every width, so the burger has nothing left
   to open. Hiding the control is better than leaving a button that does nothing. */
.burger{display:none!important}

/* =========================================================
   GAME SHELVES. The operator's lobby puts each category in a
   horizontal row: cover, title, studio. The row scrolls on
   its own rather than wrapping, so the page never widens.
   ========================================================= */
.shelf{margin:0 0 var(--s7)}
.shelf__h{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);margin:0 0 var(--s4)}
.shelf__t{margin:0}
.shelf__n{font-size:.78rem;color:var(--op-dim);white-space:nowrap}
.shelf__row{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(150px,1fr);gap:var(--s3);
  overflow-x:auto;overflow-y:hidden;padding-bottom:var(--s3);
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.shelf__row::-webkit-scrollbar{height:6px}
.shelf__row::-webkit-scrollbar-thumb{background:var(--op-line);border-radius:99px}
.gcard{scroll-snap-align:start;min-width:0}
.gcard__img{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  background:var(--op-panel);display:block}
.gcard__img img{width:100%;height:100%;object-fit:cover;display:block}
.gcard__tag{position:absolute;left:0;top:0;z-index:2;
  background:#FFE251;color:#2A2000;font-size:.58rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 7px;
  border-radius:12px 0 10px 0}
.gcard__n{display:block;margin:var(--s2) 0 2px;font-size:.84rem;font-weight:600;
  color:var(--op-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcard__p{display:block;font-size:.74rem;color:var(--op-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:860px){
  .shelf__row{grid-auto-columns:minmax(132px,1fr);gap:var(--s2)}
  .gcard__n{font-size:.78rem}
}


/* Banner proportion matched to the operator's own: their band runs about 3.1:1
   at desktop width, ours was 2.8:1 and sat too tall. */
@media (min-width:861px){
  .band{min-height:0;padding:var(--s5) var(--s6);
    aspect-ratio:auto;align-items:center}
  .band__in{padding-block:var(--s2)}
}

@media (min-width:861px){
  /* The operator keeps its banner to four short lines. Ours carries one more,
     so the supporting lines are set smaller and tighter rather than pulled out
     of the flow, which would let them sit on top of the button. */
  .band .hero__h1{font-size:1.4rem;line-height:1.22;margin:var(--s2) 0 var(--s3)}
  .band__note{font-size:.73rem;opacity:.75;margin-top:var(--s2);max-width:60ch}
  .band__upto{margin:var(--s1) 0 var(--s2)}
  .band__pct{line-height:.86}
  .band .btn{padding-block:11px;min-height:42px}
}

/* =========================================================
   TOURNAMENTS. The operator gives each one a card: state and
   studio as chips, the name, the prize pool set large, then a
   footer strip of duration, minimum bet and closing date.
   ========================================================= */
.tours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);
  margin:0 0 var(--s7)}
.tour{position:relative;overflow:hidden;border-radius:16px;
  background:var(--op-panel);border:1px solid var(--op-line);
  display:flex;flex-direction:column;min-width:0}
.tour__top{display:flex;gap:var(--s4);padding:var(--s5) var(--s5) var(--s4);
  align-items:flex-start;flex:1}
.tour__txt{min-width:0;flex:1}
.tour__chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--s3)}
.tour__st{font-size:.62rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border-radius:99px;
  background:#FFE251;color:#2A2000}
.tour__st--up{background:var(--op-line);color:var(--op-ink)}
.tour__by{font-size:.62rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border-radius:99px;
  background:rgba(255,255,255,.07);color:var(--op-dim)}
.tour__n{font-size:1.02rem;font-weight:700;line-height:1.25;margin:0 0 var(--s3);
  color:var(--op-ink)}
.tour__k{font-size:.72rem;color:var(--op-dim);margin:0 0 2px}
.tour__v{font-size:1.5rem;font-weight:800;line-height:1;margin:0;color:var(--op-ink)}
.tour__art{width:92px;height:92px;object-fit:contain;flex:none}
.tour__foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--op-line)}
.tour__cell{padding:var(--s3) var(--s4);min-width:0}
.tour__cell+.tour__cell{border-left:1px solid var(--op-line)}
.tour__cl{display:block;font-size:.64rem;color:var(--op-dim);margin-bottom:2px}
.tour__cv{display:block;font-size:.8rem;font-weight:600;color:var(--op-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* =========================================================
   PROVIDERS. A dense grid of studio marks, the way the
   operator closes its lobby.
   ========================================================= */
.provs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s3);
  margin:0 0 var(--s7)}
.prov{background:var(--op-panel);border:1px solid var(--op-line);border-radius:12px;
  padding:var(--s4) var(--s2);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s2);min-height:78px;min-width:0}
.prov img{height:24px;width:auto;max-width:82%;object-fit:contain;opacity:.9}
.prov span{font-size:.62rem;color:var(--op-dim);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* =========================================================
   BIG WINS. A ticker of recent payouts: player, amount, game.
   ========================================================= */
.wins{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);
  gap:var(--s3);overflow-x:auto;padding-bottom:var(--s3);margin:0 0 var(--s7)}
.win{background:var(--op-panel);border:1px solid var(--op-line);border-radius:12px;
  padding:var(--s4);min-width:0}
.win__p{display:block;font-size:.72rem;color:var(--op-dim);margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win__a{display:block;font-size:1.12rem;font-weight:800;color:var(--op-pct);
  margin-bottom:4px}
.win__g{display:block;font-size:.74rem;color:var(--op-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:1040px){
  .tours{grid-template-columns:repeat(2,minmax(0,1fr))}
  .provs{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:860px){
  .tours{grid-template-columns:minmax(0,1fr)}
  .provs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tour__art{width:64px;height:64px}
  .tour__v{font-size:1.28rem}
}


/* The tournament artwork sits in a tall column; centring it and letting it use
   the height stops the card reading as half empty on the right. */
.tour__top{align-items:center}
.tour__art{width:104px;height:104px;align-self:center}
@media (max-width:860px){
  .tour__art{width:72px;height:72px}
}





/* =========================================================
   ARTWORK BANNER. The offer now lives in the image, so the
   heading stays in the markup for search and screen readers
   without repeating the words a reader can already see.
   ========================================================= */
.banner{margin:var(--s5) 0 var(--s6)}
.banner__go{display:block;border-radius:16px;overflow:hidden;line-height:0}
.banner__go img{width:100%;height:auto;display:block}
.banner__go:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.banner__h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The same treatment for the closing call. */
.cta--art{margin:var(--s7) 0}
.cta--art a{display:block;border-radius:16px;overflow:hidden;line-height:0}
.cta--art img{width:100%;height:auto;display:block}

.cta__fine{font-size:.78rem;color:var(--muted2);margin:var(--s3) 0 0}


/* =========================================================
   HEADER AND RAIL. One header on the page ground, pinned at
   the top; the rail starts below it and stays with the page,
   so nothing slides underneath the header when you scroll.
   ========================================================= */
.hdr{position:sticky;top:0;z-index:30;height:65px;box-sizing:border-box;
  background:rgba(24,20,59,.94);border-bottom:1px solid #373454;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hdr__in{height:100%;display:flex;align-items:center;gap:var(--s4)}
.hdr__in > .hcta{margin-left:auto}
.hcta{min-height:42px;padding:0 22px;font-size:.84rem;white-space:nowrap}
@media (min-width:861px){
  .rail{top:65px;height:calc(100vh - 65px)}
}
@media (max-width:860px){
  .hdr{height:auto;min-height:60px}
  .hcta{min-height:40px;padding:0 16px;font-size:.78rem}
}


/* =========================================================
   RAIL FOLLOWS THE PAGE. As on the operator's lobby the rail
   stands the full height of the window, beside the footer as
   well, instead of scrolling away once the content ends.
   ========================================================= */
@media (min-width:861px){
  .shell{display:block;padding-left:96px}
  .rail{position:fixed;left:0;top:65px;bottom:0;width:96px;height:calc(100vh - 65px);
    z-index:20;overflow-y:auto;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .ftr{padding-left:96px}
}


/* =========================================================
   NO VISIBLE SCROLLBARS. Shelves page with arrow buttons the
   way the operator's lobby does; on a phone they swipe. The
   wins ticker has eight entries, so it simply sits as a grid.
   ========================================================= */
.shelf__row,.lane__row,.rail,.tw,.mast .nav{scrollbar-width:none;-ms-overflow-style:none}
.shelf__row::-webkit-scrollbar,.lane__row::-webkit-scrollbar,.rail::-webkit-scrollbar,
.tw::-webkit-scrollbar,.mast .nav::-webkit-scrollbar{display:none}
.shelf__row,.lane__row{padding-bottom:0;scroll-behavior:smooth}

.wins{display:grid;grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-columns:auto;overflow:visible;padding-bottom:0}
@media (max-width:860px){ .wins{grid-template-columns:repeat(2,minmax(0,1fr))} }

.arr{display:flex;gap:8px;margin-left:var(--s3)}
.arr button{width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:#2B2749;border:1px solid #373454;color:#FFFFFF;
  font-size:1.1rem;line-height:1;padding:0;transition:background .15s,opacity .15s}
.arr button:hover{background:#373454}
.arr button:focus-visible{outline:2px solid #59FF8B;outline-offset:2px}
.arr button:disabled{opacity:.35;cursor:default;background:#2B2749}
.shelf__h,.lane__h{align-items:center}
.shelf__n,.lane__n{margin-left:auto}
@media (max-width:860px){ .arr{display:none} }

@media (min-width:861px){
  /* The header centres over the same width as the content beside the rail,
     so the logo and the button sit on the page's own left and right edges. */
  .hdr{padding-left:96px}
}

@media (max-width:860px){
  /* Same header on a phone as the other three: logo left, the call on the right. */
  .hdr__cta{display:block;margin-left:auto}
  .hdr__cta .btn{min-height:40px;padding:0 16px;font-size:.8rem;display:inline-flex;align-items:center}
}


/* =========================================================
   PHONE RAIL. Four sections share the strip evenly, icon over
   label, so nothing is cut at the right edge and nothing scrolls.
   ========================================================= */
@media (max-width:860px){
  .rail{overflow-x:visible;gap:var(--s1);padding:var(--s2)}
  .rail__i{flex:1 1 0;min-width:0;margin:0;flex-direction:column;gap:4px;
    padding:var(--s2) var(--s1);min-height:56px;font-size:.78rem;font-weight:600;
    white-space:nowrap}
}


/* =========================================================
   POLISH. One small-text ladder (body / small / xs), no size
   under 12px; text blocks held to a readable measure; names,
   dates and amounts wrap instead of being cut with an ellipsis.
   ========================================================= */
.wrap p,.wrap li{max-width:var(--measure)}
.ftr__legal p,.ftr__badges span{max-width:110ch}
.cta p{max-width:none}

.btn{font-size:var(--body)}
.btn--sm,.hcta,.hdr__cta .btn{font-size:var(--small)}
.fact__k,.tw-hint span,.shelf__n,.gcard__p,.tour__st,.tour__by,.tour__k,.tour__cl,
.prov span,.win__p,.win__g,.cta__fine,.lg__field label,.lg__note,.age,.rail__i{font-size:var(--xs)}
.fact__v,.win__a{font-size:var(--lead)}
.tile,table,.ftr a,.ftr h4,.ftr .ftr__h,.ftr__legal,.crumb,.gcard__n,.tour__cv,.lg__sub,.lg__alt{font-size:var(--small)}
th{font-size:var(--xs)}
.tour__n{font-size:var(--body)}
.tour__v{font-size:var(--fig)}
.lg__field input{font-size:var(--body)}
.lg__sub{font-size:var(--body)}

/* names, dates, amounts: never cut */
.gcard__n,.gcard__p,.tour__cv,.prov span,.win__p,.win__g{
  white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.gcard__n{line-height:1.3}
.gcard__p{line-height:1.35}
.tour__cv{line-height:1.3}
.prov span{line-height:1.25}

/* the category tiles are labels, not links: no hover that promises a click */
.tile:hover{background:var(--panel);border-color:var(--line2)}

/* section rhythm: a shelf closes tighter than a section opens */
.shelf{margin-bottom:var(--s6)}
.shelf__h{margin-bottom:var(--s3)}
p+.shelf,p+.tours,p+.provs,p+.wins{margin-top:var(--s5)}

/* footer links are tap targets on a phone */
@media (max-width:860px){
  .ftr a{display:flex;align-items:center;min-height:40px;margin-bottom:0}
}

/* =========================================================
   PHONE TABLES. Wide tables restack as one card per row, each
   value under its column name (labels set by the footer script).
   Two-column tables simply fit the width.
   ========================================================= */
@media (max-width:600px){
  .tw--two table{min-width:0}
  .tw--stack{overflow:visible;border:0;border-radius:0}
  .tw--stack table{min-width:0;display:block}
  .tw--stack thead{display:none}
  .tw--stack tbody{display:grid;gap:var(--s3)}
  .tw--stack tr{display:block;background:var(--panel);border:1px solid var(--line2);
    border-radius:var(--radius-sm);padding:var(--s3) var(--s4)}
  .tw--stack td{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
    padding:var(--s2) 0;border-bottom:1px solid var(--line2);text-align:right}
  .tw--stack td::before{content:attr(data-label);color:var(--muted);font-size:var(--xs);
    font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:left;flex:0 0 auto;
    max-width:48%}
  .tw--stack td:first-child{display:block;text-align:left;font-weight:700;color:#fff;
    font-size:var(--body);padding-top:0}
  .tw--stack td:first-child::before{display:none}
  .tw--stack tr td:last-child{border-bottom:0;padding-bottom:0}
  .tw--stack + .tw-hint{display:none!important}
}

/* phone: key facts as a two-up grid rather than six full-width slabs */
@media (max-width:600px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
  .fact{padding:var(--s3)}
  .fact__k{letter-spacing:.04em}
}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:28px}
.faq summary::after{float:none;font-size:1.35rem;line-height:1;flex:0 0 auto}

/* ===== ALIGNMENT LAYER =====
   One column for the whole page: header, banner, cards, tables and running text
   all share the same left AND right edge, so nothing hangs short of the blocks
   around it. The column itself is narrow enough that prose stays readable. */
:root{--wrap:960px;--measure:none;--col:none}
/* six key facts: two full rows of three, never a half-empty second row */
.facts{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){ .facts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:601px){ .facts:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))} }


/* Home page: the visible H1 sits above the promo banner, with room under the masthead. */
main.wrap > h1:first-child{margin-top:var(--s6)}
main.wrap > h1:first-child + .lede{margin-bottom:var(--s5)}
@media (max-width:860px){main.wrap > h1:first-child{margin-top:var(--s5)}}

/* Login page: an address check instead of a mock form. */
.lg__check{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s2)}
.lg__check li{padding:var(--s3) var(--s4);background:var(--panel2,rgba(255,255,255,.04));border:1px solid var(--line2,rgba(255,255,255,.1));border-radius:10px;font-size:var(--small);line-height:1.5}
.lg__check strong{color:#fff}