/* Self-hosted fonts (latin subset), replacing Google Fonts. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src:url(/assets/fonts/bricolage-grotesque-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: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src:url(/assets/fonts/bricolage-grotesque-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: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src:url(/assets/fonts/jetbrains-mono-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: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src:url(/assets/fonts/jetbrains-mono-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: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src:url(/assets/fonts/source-serif-4-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: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src:url(/assets/fonts/source-serif-4-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; }

/* TuffPuff Plain. Gintaras / Baltic Amber, after the LT build: warm honey paper,
   amber resin accent, and the inverted pairing we use there: a grotesque for
   display against a serif for body. Light, warm, and deliberately unglossy. */

:root{
  --bg:#18143B; --panel:#2B2749; --panel2:#221D50; --panel3:#332D63;
  --line:#373454; --line2:rgba(81,77,114,.35);
  --text:#FFFFFF; --body:#DAD7EC; --muted:#B9B5D1; --muted2:#A29EBD;
  --amber:#F2A93B; --amber2:#FFC24D; --amber-deep:#FFD37A;
  --amber-soft:rgba(242,169,59,.14);
  --pine:#59FF8B; --pine-soft:rgba(89,255,139,.10);
  --clay:#FF8A7A; --clay-soft:rgba(255,138,122,.12);
  --grad-go:linear-gradient(135deg,#FF4287 0%,#D62E6E 100%);

  --font:'Source Serif 4',Georgia,'Times New Roman',serif;
  --disp:'Bricolage Grotesque','Inter Tight',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:40px; --s7:64px; --s8:96px; --s9:128px;
  --radius:12px; --radius-sm:8px; --wrap:1180px; --col:68ch; --measure:74ch;
  --shadow:0 18px 44px -28px rgba(62,36,16,.4);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:1.125rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber-deep);text-underline-offset:3px}
a:hover{color:var(--text)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--s5)}

/* ---- nameplate: amber rule instead of the old double line ---- */
.top{background:var(--panel);border-bottom:2px solid var(--amber)}
.top__in{max-width:var(--wrap);margin:0 auto;padding:var(--s4) var(--s5);
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.top__n{font-family:var(--disp);font-size:1.4rem;font-weight:700;color:var(--text);
  text-decoration:none;letter-spacing:-.015em}
.top__n b{font-weight:700;color:var(--amber)}
.top__nav{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap}
.top__nav a{font-family:var(--disp);font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  padding:8px 15px;border-radius:99px;white-space:nowrap}
.top__nav a:hover{color:var(--text);background:var(--panel2)}
.top__nav a[aria-current]{background:var(--amber-soft);color:var(--amber-deep)}

.btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad-go);color:#2A0A18;padding:15px 30px;border-radius:99px;
  font-family:var(--disp);text-decoration:none;font-weight:700;font-size:.92rem;
  min-height:50px;border:0;letter-spacing:.02em;
  box-shadow:0 12px 28px -12px rgba(200,106,30,.65)}
.btn:hover{filter:brightness(1.05);color:#2a1405}

/* ---- hero: honey panel, grotesque headline ---- */
.hero{background:var(--panel2);
  border-bottom:1px solid var(--line)}
.hero__in{max-width:var(--wrap);margin:0 auto;padding:var(--s7) var(--s5) var(--s6);
  display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:var(--s7);align-items:center}
.hero__kick{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-deep);margin:0 0 var(--s3)}
h1{font-family:var(--disp);font-weight:700;
  font-size:clamp(2.4rem,1.6rem + 3.4vw,4.2rem);line-height:1.06;letter-spacing:-.025em;
  margin:0 0 var(--s4);text-wrap:balance;color:var(--text)}
.lede{font-size:1.25rem;line-height:1.55;color:var(--body);max-width:var(--measure);margin:0}
.hero__art img{width:250px;margin-inline:auto;
  filter:drop-shadow(0 22px 40px rgba(200,106,30,.35))}

/* ---- body ---- */
main.wrap{padding-top:var(--s7);padding-bottom:var(--s8)}
/* The last block meets the footer at one fixed distance: main's own padding. */
h2{font-family:var(--disp);font-weight:700;
  font-size:clamp(1.6rem,1.2rem + 1.5vw,2.3rem);line-height:1.15;letter-spacing:-.02em;
  margin:var(--s8) 0 var(--s4);text-wrap:balance;position:relative;max-width:none;
  padding-bottom:var(--s3)}
/* the amber rule is a fixed-length mark, not a box drawn round the words: an
   inline-block heading made every rule a different length, which read as a
   wandering right edge down the page. */
h2::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:2px;
  background:var(--amber)}
main > h2:first-child{margin-top:0}
/* One H3 for the whole site: the sub-heads under a section (the lobby shelves). */
h3{font-family:var(--disp);font-weight:700;font-size:1.35rem;line-height:1.2;
  letter-spacing:-.01em;margin:var(--s6) 0 var(--s3);color:var(--text)}
p{margin:0 0 var(--s4)}
main p{color:var(--body)}
/* Running text keeps a reading measure; tables, grids and banners still span. */
main > p,main > .mark,main > .lede{max-width:var(--measure)}
main p strong,main p b{color:var(--text);font-weight:600}

/* ---- the figures: amber resin cards, the site signature ---- */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s3);margin:var(--s6) 0}
.figs__r{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.figs__n{font-family:var(--disp);font-size:clamp(1.7rem,1.3rem + 1.2vw,2.3rem);
  line-height:1;color:var(--amber-deep);font-weight:700;font-variant-numeric:tabular-nums}
.figs__c{font-family:var(--font);font-size:.95rem;line-height:1.4;color:var(--muted)}

/* ---- pulled-out note ---- */
.mark{border-left:3px solid var(--pine);background:var(--pine-soft);
  padding:var(--s4) var(--s5);margin:var(--s6) 0;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.mark p{margin:0;color:var(--text)}
.mark b{color:var(--pine)}

/* ---- tables ---- */
.tw{overflow-x:auto;margin:var(--s6) 0;-webkit-overflow-scrolling:touch}
/* Separate borders so the rounded panel needs no overflow:hidden, which was
   clipping the first letter of each caption. */
table{border-collapse:separate;border-spacing:0;width:100%;font-size:1rem;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius)}
thead th:first-child{border-top-left-radius:var(--radius)}
thead th:last-child{border-top-right-radius:var(--radius)}
caption{text-align:left;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding:0 0 var(--s3) 1px}
th[scope=col]{text-align:left;background:var(--panel3);color:var(--amber-deep);
  font-family:var(--disp);font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:var(--s3) var(--s4);white-space:nowrap}
th[scope=row]{text-align:left;font-weight:600;color:var(--text);
  padding:13px var(--s4);border-top:1px solid var(--line);white-space:normal}
td{padding:13px var(--s4);border-top:1px solid var(--line);color:var(--muted);
  vertical-align:top;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--panel2)}

/* Phone: each table row becomes a card, the method as its title and every
   other column as a labelled line, so nothing scrolls sideways. */
@media (max-width:560px){
  .tw--cards{overflow:visible}
  .tw--cards table,.tw--cards tbody,.tw--cards tr,.tw--cards th,.tw--cards td{display:block}
  .tw--cards table{background:none;border:0;border-radius:0}
  .tw--cards caption{display:block}
  .tw--cards thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .tw--cards tr{background:var(--panel);border:1px solid var(--line);
    border-radius:var(--radius);padding:var(--s3) var(--s4);margin:0 0 var(--s2)}
  .tw--cards tbody tr:hover{background:var(--panel)}
  .tw--cards th[scope=row]{border:0;padding:0 0 var(--s2);font-family:var(--disp);
    font-size:1.02rem;line-height:1.3}
  .tw--cards td{border:0;padding:3px 0;display:grid;grid-template-columns:7.5rem minmax(0,1fr);
    gap:var(--s3);font-size:.98rem;line-height:1.45;color:var(--body)}
  .tw--cards td::before{content:attr(data-label);font-family:var(--disp);font-size:.72rem;
    font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--amber-deep);
    padding-top:3px}
}

/* ---- game plates ---- */
/* 12 plates, so the grid is set to counts that divide it evenly: 6 across on
   a wide screen, 4 on a tablet, 3 on a phone. auto-fill left a ragged last row
   with a hole on the right, which is what the eye catches. */
.plates{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--s4);margin:var(--s6) 0}
.plate{margin:0}
.plate img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--panel2)}
.plate figcaption{font-size:.8rem;line-height:1.35;color:var(--muted2);margin-top:var(--s2)}
.plate figcaption b{display:block;color:var(--text);font-weight:600;font-size:.86rem;
  font-family:var(--disp)}

/* ---- closing CTA ---- */
.cta{background:var(--panel2);
  border:1px solid var(--line2);border-radius:var(--radius);padding:var(--s6);
  margin:var(--s8) 0 0;display:flex;gap:var(--s5);align-items:center;
  justify-content:space-between;flex-wrap:wrap}
.cta__t{font-family:var(--disp);font-weight:700;font-size:1.5rem;line-height:1.16;
  margin:0 0 var(--s2);max-width:32ch;color:var(--text);letter-spacing:-.015em}
.cta__s{margin:0;font-family:var(--mono);font-size:.74rem;color:var(--muted2);letter-spacing:.04em}

/* ---- colophon ---- */
/* The footer used a white panel against the cream page, which read as a
   foreign block at the bottom. It now sits on the same paper stock as the
   hero and the closing panel. */
.ftr{border-top:2px solid var(--amber);margin-top:0;background:var(--panel2)}
.ftr__in{max-width:var(--wrap);margin:0 auto;padding:var(--s6) var(--s5)}
.ftr__nav{display:flex;gap:var(--s5);flex-wrap:wrap;font-family:var(--disp);
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  padding-bottom:var(--s5);border-bottom:1px solid var(--line)}
.ftr__nav a{color:var(--muted);text-decoration:none}
.ftr__nav a:hover{color:var(--amber-deep)}
.ftr p{font-size:.9rem;color:var(--muted);margin:var(--s4) 0 0;max-width:82ch;line-height:1.65}
.ftr strong{color:var(--muted)}
.age{font-family:var(--mono);font-size:.7rem;font-weight:700;border:2px solid var(--amber);
  color:var(--amber-deep);border-radius:50%;width:34px;height:34px;display:inline-flex;
  align-items:center;justify-content:center;flex:none;margin-right:var(--s3)}

/* ---- unfilled slot ---- */
.slot{border:1px dashed var(--line2);background:var(--panel2);border-radius:var(--radius-sm);
  padding:var(--s4);margin:var(--s4) 0;max-width:var(--col);font-family:var(--mono);
  font-size:.84rem;color:var(--muted2);line-height:1.5}
.slot__tag{display:inline-block;background:var(--amber-soft);color:var(--amber-deep);
  font-size:.68rem;padding:2px 8px;border-radius:4px;margin-right:var(--s2);
  letter-spacing:.08em;text-transform:uppercase;font-family:var(--disp);font-weight:700}

/* =========================================================
   MOBILE: nameplate stacks, mascot above the headline,
   figures fold to two then one, every CTA spans.
   ========================================================= */
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:var(--s5);padding:var(--s6) var(--s5) var(--s5)}
  .hero__art{order:-1}
  .hero__art img{width:150px;margin-inline:0}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta{flex-direction:column;align-items:flex-start;padding:var(--s5)}
  .cta .btn{width:100%}
  h2{margin-top:var(--s7)}
  p,.mark{max-width:100%}
}
@media (max-width:560px){
  body{font-size:1.0625rem}
  /* Two compact tiles across, number over its label: the old one-column row
     parked the label far right of the number with a dead gap between. */
  .figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
  .figs__r{padding:var(--s4) var(--s3) var(--s4) var(--s4);gap:6px}
  .figs__n{font-size:1.75rem}
  .figs__c{font-size:.9rem;line-height:1.35}
  .top__nav{margin-left:0;width:100%}
  .top__nav a{padding:7px 12px;font-size:.72rem}
  .plates{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Every top-level block runs the full content width, so the page keeps ONE left
   and ONE right border down its whole length, the way site 1 does. A narrowed
   paragraph sitting next to a full-width table is what reads as wandering. */
main > h1,main > h2,main > h3,main > ul,main > ol,
main > section,main > figure,main > table{max-width:none}

/* Nameplate carries the real mark; the word beside it stays in the display face. */
.top__n{display:inline-flex;align-items:center;gap:var(--s3)}
.top__n img{height:40px;width:auto;flex:none}
.top__n b{font-family:var(--disp);font-size:1.3rem;font-weight:700;
  color:var(--amber-deep);line-height:1}

@media (max-width:1040px) and (min-width:561px){
  .plates{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* CTA is two columns: the text block on the left, the button on the right.
   Three loose children in a space-between row pushed the small print onto its
   own line and left a gap through the middle of the panel. */
.cta__txt{flex:1 1 380px;min-width:0}
.cta__t{font-family:var(--disp);font-weight:700;font-size:1.32rem;line-height:1.24;
  letter-spacing:-.015em;color:var(--text);margin:0 0 var(--s2);max-width:46ch}
.cta__s{font-family:var(--font);font-size:.86rem;line-height:1.5;color:var(--muted2);
  margin:0;max-width:60ch;letter-spacing:0}
.cta .btn{flex:none}
/* Stacked on a tablet or phone the panel is a column, where a 380px flex-basis
   became 380px of height and opened a hole above the button. */
@media (max-width:900px){ .cta__txt{flex:0 0 auto;width:100%} }

/* Footer: the age badge sits on the same line as the line it qualifies, and the
   legal paragraphs run to the same border as the rest of the page. */
.ftr__badges{display:flex;align-items:center;gap:var(--s3);
  padding:var(--s5) 0 0;flex-wrap:wrap}
.ftr__badges span:last-child{font-size:.9rem;color:var(--muted);flex:1 1 320px;min-width:0}
.ftr p{max-width:96ch}

/* =========================================================
   PHONE. The layout is recomposed rather than shrunk: plates
   drop to two across, the menu reaches a 40px touch target,
   and the call runs the full width of the panel. Placed last
   so the desktop flex rules above cannot undo it.
   ========================================================= */
@media (max-width:560px){
  .plates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top__nav a{min-height:40px;display:inline-flex;align-items:center;padding:0 12px}
  .cta .btn{flex:1 1 100%;width:100%;min-height:48px;
    display:inline-flex;align-items:center;justify-content:center}
}

/* Hero call. The page runs long, so the offer and the visit link sit with the
   headline rather than only at the foot of the article. */
.hero__offer{font-family:var(--disp);font-weight:600;font-size:1.02rem;
  color:var(--text);margin:var(--s4) 0 var(--s3)}
.hero__btn{margin:0}
.hero__fine{font-size:.78rem;color:var(--muted2);margin:var(--s3) 0 0}
@media (max-width:560px){
  .hero__btn{width:100%;min-height:48px;
    display:inline-flex;align-items:center;justify-content:center}
}

/* Step back to the verdict. Serif, lower case and quiet: this page is a long
   read, so the trail stays out of the way of the heading under it. */
.back{margin:var(--s6) 0 var(--s5);font-size:.86rem;color:var(--muted2)}
.back ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0}
.back li+li::before{content:"\2192";margin-right:var(--s2);color:var(--muted2)}
.back a{color:var(--amber-deep);text-decoration:none}
.back a:hover{text-decoration:underline}

/* 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){
  .back li{display:flex;align-items:center;min-height:40px}
  .back a{display:inline-flex;align-items:center;min-height:40px}
}

/* A lede that stands in the article flow needs its own space below it. In the
   hero it is the last element, so the margin is set only where it is followed. */
.wrap > .lede{margin-bottom:var(--s5)}

/* Operator surfaces mapped onto this site's palette. The page is light, so
   the band is the single dark block and carries the operator's violet. */
:root{
  --op-rail:#18143B; --op-panel:#2B2749; --op-line:#373454;
  --op-ink:#FFFFFF; --op-dim:#9894B3;
  --op-band: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%);
  --op-kick:#EADFFF; --op-pct:#59FF8B; --op-bandink:#FFFFFF;
  --op-chip:#FFFFFF; --op-chipink:#2A2560; --op-bandnote:#D9CFF5;
  --op-page:#18143B;
}
/* =========================================================
   OPERATOR LAYOUT. The lobby's composition: a rail of section
   icons on the left, a promo band, a row of category tiles.
   Colours come from this site's own tokens, so the structure
   is shared but the look is not.
   ========================================================= */
.shell{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:start}
.rail{position:sticky;top:0;align-self:start;height:100vh;background:var(--op-rail);
  border-right:1px solid var(--op-line);padding:16px 0;display:flex;
  flex-direction:column;gap:8px;z-index:5}
.rail__i{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 8px;margin:0 8px;border-radius:11px;color:var(--op-dim);
  text-decoration:none;font-size:.66rem;text-align:center;line-height:1.2;
  min-height:64px;justify-content:center}
.rail__i img{width:22px;height:22px;opacity:.8}
.rail__i:hover{background:var(--op-panel);color:var(--op-ink)}
.rail__i[aria-current]{background:var(--op-panel);color:var(--op-ink)}
.rail__i[aria-current] img{opacity:1}

.band{position:relative;overflow:hidden;border-radius:16px;
  background:var(--op-band);padding:32px;margin:24px 0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
  min-height:300px}
.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:var(--op-kick);margin:0 0 8px}
.band__pct{font-weight:900;line-height:.92;font-size:clamp(3rem,2rem + 5vw,4.8rem);
  color:var(--op-pct);margin:0}
.band__upto{font-size:1.15rem;font-weight:700;margin:8px 0 16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--op-bandink)}
.band__spins{background:var(--op-chip);color:var(--op-chipink);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:16px 0 0;font-size:.82rem;color:var(--op-bandnote);max-width:52ch}
.band h1{margin:0 0 16px;color:var(--op-bandink)}

.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 48px}
.tile{background:var(--op-panel);border:1px solid var(--op-line);border-radius:11px;
  padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--op-ink);font-size:.82rem;font-weight:600;text-align:center;
  min-height:92px;justify-content:center}
.tile img{width:30px;height:30px}

.pays{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  padding:24px 0;border-top:1px solid var(--op-line);margin-top:24px}
.pays img{height:26px;width:auto;opacity:.7}
.pays img:hover{opacity:1}

@media (max-width:1040px){ .tiles{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:861px){ .hdr .nav,.hdr .burger,.mast__nav{display:none} }
@media (max-width:860px){
  /* A grid track sizes to its content, so on a phone the rail is pinned to the
     viewport width and scrolls inside itself instead of widening the page. */
  .shell{display:block}
  .rail{position:static;height:auto;flex-direction:row;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--op-line);padding:8px;
    width:100%;max-width:100%;min-width:0}
  .rail__i{min-height:44px;flex:0 0 auto;flex-direction:row;gap:8px;
    padding:8px 12px;font-size:.76rem}
  .band{grid-template-columns:minmax(0,1fr);text-align:center;padding:24px 16px;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:8px}
}


/* This page is light, so the operator's white rail icons need inverting to
   read at all, and six tiles divide evenly by three rather than five. */
.rail__i img{filter:none}
.rail__i[aria-current] img{filter:none}
.tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
.tile{font-family:var(--disp);font-size:.95rem;min-height:104px;gap:10px}
.tile img{width:36px;height:36px}
/* Six tiles: six across on a wide screen, three by two below that. */
@media (max-width:1040px){ .tiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){
  .tiles{gap:var(--s2)}
  .tile{min-height:84px;padding:var(--s3) var(--s1);font-size:.86rem;gap:6px}
  .tile img{width:30px;height:30px}
}


/* The rail carries the sections on desktop, so the top strip keeps only the
   brand. Below the rail breakpoint the strip comes back as the primary menu. */
@media (min-width:861px){ .top__nav{display:none} }

/* =========================================================
   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 titles are the page's H3s and take the global H3 size. */
.shelf__t{margin:0}
main > p + .shelf{margin-top:var(--s6)}
.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}
}

/* =========================================================
   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:.74rem;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 lives in the image; the heading
   stays in the markup for search and screen readers.
   ========================================================= */
.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(--op-pct);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}
.cta--art{margin:var(--s7) 0 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(--op-dim);margin:var(--s3) 0 0}


/* Text runs border to border, the same edge as the tables and cards around it. */
.cta__t, .cta__s{max-width:none}


/* =========================================================
   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.
   ========================================================= */
.top{position:sticky;top:0;z-index:30;height:72px;box-sizing:border-box;
  background:rgba(24,20,59,.94);border-bottom:1px solid #373454;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.top__in{height:100%;display:flex;align-items:center;gap:var(--s4)}
.top__in > .hcta{margin-left:auto}
.hcta{min-height:42px;padding:0 22px;font-size:.84rem;white-space:nowrap}
@media (min-width:861px){
  .rail{top:72px;height:calc(100vh - 72px)}
}
@media (max-width:860px){
  .top{height:auto;min-height:60px}
  .hcta{min-height:40px;padding:0 16px;font-size:.78rem}
}


/* Footer on the operator's ground, matching the header above it. */
.ftr{background:#140F32;border-top:1px solid #373454}


/* =========================================================
   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:72px;bottom:0;width:96px;height:calc(100vh - 72px);
    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} }

/* The banner starts the same distance under the header as on the other sites. */
.shell > main.wrap{padding-top:0}

@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. */
  .top{padding-left:96px}
}

/* One menu at every width: the rail carries the sections (a strip on a phone),
   so the header keeps only the logo and the call. */
.top__nav{display:none!important}
@media (max-width:860px){
  .top__in{display:flex;align-items:center;flex-wrap:nowrap}
}

/* =========================================================
   NAMES AND FIGURES ARE NEVER CUT. Game, studio, player and
   date labels wrap to a second line instead of ending in an
   ellipsis.
   ========================================================= */
.gcard__n,.gcard__p,.win__p,.win__g,.prov span,.tour__cv{
  white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
.gcard__n{line-height:1.3}
.prov span{line-height:1.25}

/* Footer links are tap targets on a phone too. */
@media (max-width:560px){
  .ftr__nav{gap:0 var(--s4)}
  .ftr__nav a{min-height:40px;display:inline-flex;align-items:center}
}

/* Small operator labels raised to a readable floor. */
.tour__cl{font-size:.72rem}
.tour__cv{font-size:.86rem}
.tour__st,.tour__by{font-size:.68rem}
.win__p{font-size:.8rem}
.win__g{font-size:.8rem}
.gcard__p{font-size:.78rem}

/* ===== 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}
/* studio wall on phones: four across so every row is full (40 and 32 logos) */
@media (max-width:560px){ .provs{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)}}

/* Contrast: the studio line on tournament cards needs 4.5:1 on the card ground. */
.tour__by{color:#BDB9D4}