/* Self-hosted fonts (latin subset), replacing Google Fonts. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src:url(/assets/fonts/fraunces-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: 'Fraunces'; font-style: normal; font-weight: 700; font-display: swap; src:url(/assets/fonts/fraunces-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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src:url(/assets/fonts/ibm-plex-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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src:url(/assets/fonts/ibm-plex-mono-500.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: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src:url(/assets/fonts/inter-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: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src:url(/assets/fonts/inter-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: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src:url(/assets/fonts/inter-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: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src:url(/assets/fonts/inter-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 Deck. Red premium, after the EE build: a wine-dark casino lounge,
   ember red against gold, Fraunces display over Inter. The lobby is the page. */

:root{
  --bg:#18143B; --panel:#2B2749; --panel2:#221D50; --panel3:#332D63;
  --line:#373454; --line2:rgba(81,77,114,.35);
  --text:#FFFFFF; --muted:#ABA7C4; --muted2:#ABA7C4;
  --gold:#F0B93B; --gold2:#f6cf6b; --gold-dim:#3a2c12;
  --red:#E11D2A; --red2:#b3151f; --red-dim:#3a1218;
  --ok:#3fbf7f; --ok-dim:#123024;
  --grad-go:linear-gradient(135deg,#8844FF 0%,#7045ED 100%);

  --font:'Inter',system-ui,'Segoe UI',Arial,sans-serif;
  --disp:'Fraunces','Playfair Display',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;

  --h1:clamp(2.1rem,1.4rem + 2.6vw,3.4rem); --h1-lh:1.05;
  --h2:clamp(1.5rem,1.2rem + 1.3vw,2.1rem); --h2-lh:1.14;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --radius:14px; --radius-sm:10px; --wrap:1180px; --col:70ch;
  --shadow:0 22px 55px -26px rgba(20,4,8,.75);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:
  radial-gradient(880px 480px at 84% -6%, rgba(225,29,42,.18), transparent 60%),
  radial-gradient(640px 400px at 6% 2%, rgba(240,185,59,.08), transparent 58%),
  var(--bg);
  background-attachment:fixed;color:var(--text);
  font-family:var(--font);font-size:1.01rem;line-height:1.66;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold2);text-underline-offset:3px}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--s5)}

/* ---- bar ---- */
.bar{background:rgba(26,14,18,.9);border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:30}
.bar__in{max-width:var(--wrap);margin:0 auto;padding:var(--s4) var(--s5);
  display:flex;align-items:center;gap:var(--s5)}
.bar__logo img{height:30px;width:auto}
.bar__nav{margin-left:auto;display:flex;gap:var(--s2);align-items:center}
.bar__nav a{padding:9px 16px;border-radius:99px;color:var(--muted);text-decoration:none;
  font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.bar__nav a:hover{color:var(--text);background:var(--panel2)}
.bar__nav a[aria-current]{background:var(--grad-go);color:#fff;
  box-shadow:0 8px 22px -10px rgba(225,29,42,.8)}

.btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad-go);color:#fff;padding:15px 30px;border-radius:99px;
  text-decoration:none;font-weight:700;font-size:.9rem;min-height:50px;border:0;
  letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 12px 30px -10px rgba(225,29,42,.75)}
.btn:hover{filter:brightness(1.08);color:#fff}
.btn--gold{background:linear-gradient(135deg,var(--gold),#d99c22);color:#2a1d05;
  box-shadow:0 12px 30px -10px rgba(240,185,59,.7)}
.btn--gold:hover{color:#2a1d05}

/* ---- hero: a lounge banner, the bonus in gold ---- */
.hero{max-width:var(--wrap);margin:var(--s6) auto 0;padding-inline:var(--s5)}
.hero__in{background:
  radial-gradient(520px 320px at 88% 40%, rgba(225,29,42,.3), transparent 62%),
  linear-gradient(135deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:20px;
  padding:var(--s7) var(--s7);display:grid;
  grid-template-columns:minmax(0,1fr) 300px;gap:var(--s6);align-items:center;
  box-shadow:var(--shadow)}
.hero__tag{display:inline-block;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold-dim);background:rgba(240,185,59,.1);
  padding:5px 13px;border-radius:99px;margin-bottom:var(--s4)}
.hero__pct{font-family:var(--disp);font-weight:700;
  font-size:clamp(3.2rem,2.2rem + 5vw,5.6rem);line-height:.9;color:var(--gold);
  letter-spacing:-.02em;margin:0;text-shadow:0 0 50px rgba(240,185,59,.4)}
.hero__sub{font-size:1.06rem;color:var(--text);margin:var(--s3) 0 var(--s5);font-weight:600}
.hero__art img{width:250px;margin-inline:auto;
  filter:drop-shadow(0 26px 46px rgba(225,29,42,.5))}

h1{font-family:var(--disp);font-weight:700;font-size:var(--h1);line-height:var(--h1-lh);
  letter-spacing:-.015em;margin:var(--s8) 0 var(--s5);color:var(--text);
  max-width:24ch;text-wrap:balance}
h2{font-family:var(--disp);font-weight:600;font-size:var(--h2);line-height:var(--h2-lh);
  color:var(--text);margin:var(--s8) 0 var(--s4);max-width:26ch;text-wrap:balance;
  display:flex;align-items:center;gap:var(--s4)}
h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
main.wrap{padding-bottom:var(--s9)}
p{margin:0 0 var(--s4);color:var(--muted)}
p strong,p b{color:var(--text);font-weight:600}

/* ---- chips: the headline numbers ---- */
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--s4);margin:var(--s6) 0}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s5);display:flex;flex-direction:column;gap:2px}
.chip b{font-family:var(--disp);font-size:1.75rem;color:var(--gold);line-height:1;
  font-weight:700;font-variant-numeric:tabular-nums}
.chip span{font-size:.78rem;color:var(--muted2);letter-spacing:.06em;text-transform:uppercase}

/* ---- category tiles ---- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:var(--s3);margin:var(--s5) 0}
.cat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--s4);text-align:center;transition:border-color .15s}
.cat:hover{border-color:var(--gold)}
.cat img{width:42px;height:42px;object-fit:contain;margin:0 auto var(--s2)}
.cat span{font-size:.78rem;color:var(--muted);font-weight:600}

/* ---- game plates ---- */
/* 16 plates: 4 across gives four full rows. auto-fill gave 6+6+4, and the
   short last row with a hole on the right is what the eye catches. */
.deck{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s4);margin:var(--s6) 0}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;transition:transform .15s,border-color .15s}
.tile:hover{transform:translateY(-3px);border-color:var(--gold)}
.tile img{width:100%;aspect-ratio:1;object-fit:cover}
.tile__b{padding:var(--s3) var(--s4) var(--s4);display:flex;flex-direction:column;gap:2px}
.tile__n{font-size:.84rem;font-weight:700;color:var(--text)}
.tile__m{font-size:.74rem;color:var(--muted2)}

/* ---- tables ---- */
.tw{overflow-x:auto;margin:var(--s5) 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:520px}
caption{text-align:left;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted2);padding-bottom:var(--s3)}
th[scope=col]{text-align:left;background:var(--panel2);color:var(--gold);
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;padding:var(--s3) var(--s4);white-space:nowrap}
th[scope=col]:first-child{border-radius:var(--radius-sm) 0 0 0}
th[scope=col]:last-child{border-radius:0 var(--radius-sm) 0 0}
th[scope=row]{text-align:left;font-weight:600;color:var(--text);
  padding:13px var(--s4);border-bottom:1px solid var(--line);white-space:normal}
td{padding:13px var(--s4);border-bottom:1px solid var(--line);color:var(--muted);
  vertical-align:top;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--panel2)}
.tw-hint{display:none;font-family:var(--mono);font-size:.68rem;color:var(--muted2);
  margin:calc(var(--s4) * -1) 0 var(--s5)}
.tw-hint.is-on{display:block}

/* ---- note panel ---- */
.note{border:1px solid var(--line2);border-left:3px solid var(--gold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:rgba(240,185,59,.07);padding:var(--s4) var(--s5);margin:var(--s6) 0;
  max-width:var(--col);color:#e8d5b4;line-height:1.6;font-size:.95rem}
.note__tag{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--s2);font-weight:500}

/* ---- closing CTA ---- */
.cta{background:
  radial-gradient(520px 260px at 82% 30%, rgba(225,29,42,.35), transparent 64%),
  linear-gradient(135deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:20px;padding:var(--s7) var(--s6);
  margin:var(--s9) 0 0;display:flex;gap:var(--s5);align-items:center;
  justify-content:space-between;flex-wrap:wrap;box-shadow:var(--shadow)}
.cta__t{font-family:var(--disp);font-weight:700;font-size:1.55rem;line-height:1.18;
  margin:0 0 var(--s2);color:var(--text);max-width:34ch}
.cta__s{margin:0;font-family:var(--mono);font-size:.72rem;color:var(--muted2);letter-spacing:.05em}

/* ---- footer ---- */
.ftr{border-top:1px solid var(--line);margin-top:var(--s9);background:rgba(26,14,18,.55)}
.ftr__in{max-width:var(--wrap);margin:0 auto;padding:var(--s7) var(--s5) var(--s6)}
.ftr__nav{display:flex;gap:var(--s5);flex-wrap:wrap;padding-bottom:var(--s5);
  border-bottom:1px solid var(--line);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600}
.ftr__nav a{color:var(--muted);text-decoration:none}
.ftr__nav a:hover{color:var(--gold)}
.ftr p{font-size:.82rem;color:var(--muted2);margin:var(--s4) 0 0;max-width:84ch;line-height:1.65}
.ftr strong{color:var(--muted)}
.age{font-family:var(--mono);font-size:.7rem;font-weight:700;border:1.5px solid var(--gold);
  color:var(--gold);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(--panel);border-radius:var(--radius-sm);
  padding:var(--s4);margin:var(--s4) 0;max-width:var(--col);color:var(--muted2);
  font-family:var(--mono);font-size:.84rem;line-height:1.5}
.slot__tag{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--gold);margin-bottom:var(--s2);font-weight:500}

/* =========================================================
   MOBILE: the banner stacks, the mascot rides above the
   figure, chips go two-up then one, every CTA spans.
   ========================================================= */
@media (max-width:900px){
  .hero{margin-top:var(--s5)}
  .hero__in{grid-template-columns:1fr;gap:var(--s5);padding:var(--s5)}
  .hero__art{order:-1}
  .hero__art img{width:150px;margin-inline:0}
  .hero .btn{width:100%}
  h1{margin-top:var(--s7)}
  h2{margin-top:var(--s7)}
  .chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .chip{padding:var(--s4)}
  .cta{flex-direction:column;align-items:flex-start;padding:var(--s6) var(--s5)}
  .cta .btn{width:100%}
  p,.note{max-width:100%}
}
@media (max-width:560px){
  .bar__nav{gap:var(--s1)}
  .bar__nav a{padding:8px 11px;font-size:.72rem}
  .chips{grid-template-columns:1fr}
  .deck{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .cats{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------
   Bind to the class names the templates actually use: the
   nav is a bare <nav> inside .bar__in, the offer figure is
   .hero__big, and the category grid is .shelf / .shelf__i.
   --------------------------------------------------------- */
.bar__in > nav{margin-left:auto;display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.bar__in > nav a{padding:9px 16px;border-radius:99px;color:var(--muted);
  text-decoration:none;font-size:.8rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap}
.bar__in > nav a:hover{color:var(--text);background:var(--panel2)}
.bar__in > nav a[aria-current]{background:var(--grad-go);color:#fff;
  box-shadow:0 8px 22px -10px rgba(225,29,42,.8)}

.hero__big{font-family:var(--disp);font-weight:700;
  font-size:clamp(3.2rem,2.2rem + 5vw,5.6rem);line-height:.9;color:var(--gold);
  letter-spacing:-.02em;text-shadow:0 0 50px rgba(240,185,59,.4)}

/* 8 shelves: 4 across gives two full rows, not 7 and a lone one. */
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s3);margin:var(--s5) 0}
.shelf__i{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:var(--s4);text-align:center;
  transition:border-color .15s,transform .15s}
.shelf__i:hover{border-color:var(--gold);transform:translateY(-2px)}
.shelf__i img{width:40px;height:40px;object-fit:contain;margin:0 auto var(--s2)}
.shelf__i span{font-size:.78rem;color:var(--muted);font-weight:600;display:block}

@media (max-width:560px){
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bar__in > nav{gap:var(--s1)}
  .bar__in > nav a{padding:8px 11px;font-size:.7rem}
}

/* Every top-level block runs the full content width, so the page has ONE left
   and ONE right border down its whole length. Readability is protected inside
   the block by a text column, not by shrinking the block itself: a narrowed
   paragraph next to a full-width table is exactly what reads as wandering. */
main > h1,main > h2,main > h3,main > p,main > ul,main > ol,
main > div,main > section,main > figure,main > table{max-width:none}
main > p,main > ul,main > ol{width:100%}
main > p{max-width:none}
main > h2{max-width:none}

/* The real mark needs room: the old 110x32 box squashed it. */
.bar__logo img{height:40px;width:auto}

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

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

/* =========================================================
   MOBILE, to the mobile-optimize rules: touch targets at
   least 40px tall, and the primary call full width.
   ========================================================= */
@media (max-width:860px){
  .bar__in > nav a{min-height:40px;display:inline-flex;align-items:center}
  .hero .btn,.cta .btn{width:100%}
}

/* Path back to the lobby. Set in the deck's own display face, with a thin rule
   under it so it reads as a step above the heading rather than part of it. */
.path{margin:var(--s5) 0 var(--s4);padding-bottom:var(--s3);
  border-bottom:1px solid var(--line);font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase}
.path ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s3);margin:0;padding:0}
.path li+li::before{content:"\2014";margin-right:var(--s3);color:var(--muted2)}
.path a{color:var(--gold);text-decoration:none}
.path a:hover{text-decoration:underline}
.path li[aria-current]{color:var(--muted)}

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

/* Operator surfaces mapped onto this site's palette. The band runs in the
   deck's crimson, with the operator's green kept for the headline figure. */
: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}
}


/* 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){ .bar__in > 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.
   ========================================================= */
.lane{margin:0 0 var(--s7)}
.lane__h{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);margin:0 0 var(--s4)}
.lane__t{margin:0}
.lane__n{font-size:.78rem;color:var(--op-dim);white-space:nowrap}
.lane__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}
.lane__row::-webkit-scrollbar{height:6px}
.lane__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){
  .lane__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:.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 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}
.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}


/* =========================================================
   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.
   ========================================================= */
.bar{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)}
.bar__in{height:100%;display:flex;align-items:center;gap:var(--s4)}
.bar__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){
  .bar{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} }

@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. */
  .bar{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. */
.bar__in > nav{display:none!important}
@media (max-width:860px){
  .bar__in{display:flex;align-items:center;flex-wrap:nowrap}
}


/* =========================================================
   RACKS. This site's own shelf index: a horizontal card per
   shelf with a round icon well, a line on what a running
   bonus allows there, and a status chip where the rule is
   clear-cut. Eight shelves sit four across, two rows.
   ========================================================= */
.racks{list-style:none;margin:0 0 var(--s7);padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.rack{display:flex;align-items:center;gap:var(--s3);min-width:0;
  padding:14px 16px;border-radius:14px;background:#221D50;
  border:1px solid #373454;transition:border-color .15s,background .15s}
.rack:hover{background:#2B2749;border-color:#4A4570}
.rack__ico{flex:none;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%,rgba(136,68,255,.38),rgba(136,68,255,.08) 70%);
  box-shadow:inset 0 0 0 1px rgba(136,68,255,.35)}
.rack__ico img{width:28px;height:28px}
.rack__txt{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.rack__n{font-weight:700;font-size:.95rem;color:#FFFFFF;line-height:1.2}
.rack__d{font-size:.74rem;color:#ABA7C4;line-height:1.3}
.rack__tag{flex:none;font-size:.64rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:4px 8px;border-radius:99px;white-space:nowrap}
.rack--ok .rack__tag{background:rgba(89,255,139,.14);color:#59FF8B}
.rack--no .rack__tag{background:rgba(255,106,120,.14);color:#FF8A94}
.rack--cap .rack__tag{background:rgba(255,226,81,.14);color:#FFE251}
@media (max-width:1040px){ .racks{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){
  .racks{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .rack{padding:12px 14px}
}

/* The chip rides on the name line, so the note below gets the full width and
   every card in both rows keeps one height. */
.rack{min-height:78px}
.rack__top{display:flex;align-items:center;gap:8px;min-width:0}
.rack__top .rack__n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rack__d{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rack__tag{font-size:.6rem;padding:3px 7px}

@media (max-width:560px){
  /* A phone stacks the eight shelves, so each card gets tighter to keep the
     list to about one screen. */
  .rack{min-height:0;padding:9px 12px;gap:10px;border-radius:12px}
  .rack__ico{width:38px;height:38px}
  .rack__ico img{width:22px;height:22px}
  .rack__n{font-size:.9rem}
  .rack__d{font-size:.72rem}
  .racks{gap:6px}
}


/* =========================================================
   POLISH LAYER. One type scale, one small-text scale, one
   reading measure. Everything below overrides the layers
   above it on purpose; component rules no longer size
   headings themselves.
   ========================================================= */
:root{
  --h1:clamp(2rem,1.45rem + 2.2vw,3.1rem); --h1-lh:1.1;
  --h2:clamp(1.55rem,1.25rem + 1.1vw,2.05rem); --h2-lh:1.18;
  --h3:clamp(1.2rem,1.1rem + .45vw,1.4rem); --h3-lh:1.25;
  --fs-body:1.0625rem; --fs-sm:.875rem; --fs-xs:.75rem;
  --measure:72ch;
}
body{font-size:var(--fs-body);line-height:1.6}

h1{font-size:var(--h1);line-height:var(--h1-lh);margin:var(--s7) 0 var(--s5)}
h2{font-size:var(--h2);line-height:var(--h2-lh);margin:var(--s8) 0 var(--s4)}
h3{font-family:var(--disp);font-weight:600;font-size:var(--h3);line-height:var(--h3-lh);
  color:var(--text);margin:var(--s6) 0 var(--s3);letter-spacing:-.005em}
.path + script + h1{margin-top:var(--s6)}

/* Reading measure: text runs to ~72 characters, blocks keep the full width. */
main > p,main > ul:not(.racks),main > ol,.note,.cta__fine{max-width:var(--measure)}
main > ul:not(.racks),main > ol{padding-left:1.2em;color:var(--muted)}
main > ul:not(.racks) li,main > ol li{margin-bottom:var(--s2)}

/* Shelf headings sit on the H3 step; the count and the arrows share its line. */
.lane{margin:var(--s6) 0 var(--s7)}
.lane__h{margin:0 0 var(--s3)}
.lane__n{font-size:var(--fs-xs);color:var(--muted)}

/* Names, dates and amounts wrap instead of being cut with an ellipsis. */
.gcard__n,.gcard__p,.tour__cv,.win__p,.win__g,.prov span,.rack__d,.rack__top .rack__n{
  white-space:normal;overflow:visible;text-overflow:clip}
.gcard__n{font-size:var(--fs-sm);line-height:1.3;margin-top:var(--s2)}
.gcard__p{font-size:var(--fs-xs);line-height:1.35;color:var(--muted)}
.gcard__tag{font-size:.68rem}
.tour__st,.tour__by{font-size:.68rem}
.tour__k,.tour__cl{font-size:var(--fs-xs)}
.tour__cv{font-size:var(--fs-sm);line-height:1.3}
.tour__foot{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr)}
.tour__cell:first-child .tour__cv{white-space:nowrap}
.win__p{font-size:var(--fs-xs);color:var(--muted)}
.win__g{font-size:var(--fs-sm);line-height:1.35}
.prov span{font-size:.7rem;line-height:1.25;color:var(--muted)}
.rack__d{font-size:.8rem;line-height:1.35}
.rack__tag{font-size:.68rem}
.chip span{font-size:var(--fs-xs)}
.cta__fine{font-size:.8rem;color:var(--muted)}
.ftr p{max-width:90ch}
.ftr__badges{flex-wrap:nowrap;align-items:center}
.ftr__badges span:last-child{flex:1 1 auto;min-width:0}

/* Tables: header row styled whatever the th scope, readable sizes. */
table{font-size:.95rem}
td{font-variant-numeric:normal}
thead th{text-align:left;background:var(--panel2);color:var(--gold);
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;padding:var(--s3) var(--s4);white-space:nowrap}
thead th:first-child{border-radius:var(--radius-sm) 0 0 0}
thead th:last-child{border-radius:0 var(--radius-sm) 0 0}
caption{font-size:var(--fs-xs);line-height:1.5}
.tw{margin:var(--s5) 0 var(--s6)}
.tw--fit table{min-width:0;max-width:640px}

/* Loyalty ladder: five rungs that step up left to right. */
.ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);
  margin:var(--s5) 0 var(--s6);align-items:end}
.rung{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:var(--radius);padding:var(--s4);display:flex;flex-direction:column;min-width:0}
.rung--0{border-top-color:#5a5680}
.rung--1{border-top-color:#b9b6d3}
.rung--2{border-top-color:var(--gold)}
.rung--3{border-top-color:#d9d4ff}
.rung--4{border-top-color:#8844FF}
@media (min-width:1041px){
  .rung{padding-top:calc(var(--s4) + var(--lift,0px))}
  .rung--1{--lift:14px}.rung--2{--lift:28px}.rung--3{--lift:42px}.rung--4{--lift:56px}
}
.rung__n{font-family:var(--disp);font-weight:700;font-size:var(--h3);line-height:var(--h3-lh);color:var(--text)}
.rung__l{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);letter-spacing:.06em;
  text-transform:uppercase;margin:2px 0 var(--s4)}
.rung__c{font-family:var(--disp);font-weight:700;font-size:1.9rem;line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums}
.rung__c--none{font-family:var(--font);font-size:1.05rem;font-weight:600;color:var(--muted);line-height:1.9rem}
.rung__x{font-size:var(--fs-xs);color:var(--muted);margin:4px 0 var(--s4);text-transform:uppercase;letter-spacing:.06em}
.rung__w{font-size:var(--fs-sm);color:var(--muted);border-top:1px solid var(--line);padding:var(--s2) 0 0;margin-top:var(--s2)}
.rung__w b{display:block;color:var(--text);font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}
@media (max-width:1040px){ .ladder{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* Spacing at the end of the page: one gap, not two stacked. */
main.wrap{padding-bottom:var(--s8)}
.ftr{margin-top:0}
.cta{margin:var(--s8) 0 0}
.cta h2{margin:0 0 var(--s3);max-width:30ch}
.cta h2::after{display:none}
.cta p{margin:0}

/* Hover and focus for the remaining controls. */
.btn:focus-visible,.hcta:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rail__i:focus-visible,.ftr__nav a:focus-visible,.path a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cta--art a:focus-visible{outline:3px solid var(--op-pct);outline-offset:3px}
.cta--art a:hover img,.banner__go:hover img{filter:brightness(1.05)}

/* =========================================================
   PHONE. Own composition at 390: two-up chips, stacked
   tables as cards, 40px tap targets, rank rungs as rows.
   ========================================================= */
@media (max-width:860px){
  h1{margin-top:var(--s6)}
  h2{margin-top:var(--s7)}
  main > p,.note,.cta__fine{max-width:none}
  .ftr__nav{gap:0 var(--s5)}
  .ftr__nav a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:560px){
  .chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .chip{padding:var(--s4)}
  .chip b{font-size:1.5rem}

  .tw--stack{overflow:visible}
  .tw--stack table{min-width:0}
  .tw--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tw--stack caption{display:block;padding-bottom:var(--s3)}
  .tw--stack tbody{display:grid;gap:var(--s2)}
  .tw--stack tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s1) var(--s4);
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s3) var(--s4)}
  .tw--stack tbody tr:hover{background:var(--panel)}
  .tw--stack th[scope=row]{grid-column:1/-1;padding:0 0 var(--s1);border:0;font-size:1rem}
  .tw--stack td{padding:0;border:0;display:flex;flex-direction:column;color:var(--text)}
  .tw--stack td[data-label=Timing]{grid-column:1/-1}
  .tw--stack td::before{content:attr(data-label);font-family:var(--mono);font-size:.7rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}

  .ladder{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .rung{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s4);
    border-top-width:1px;border-top-color:var(--line);border-left:3px solid var(--gold);padding:var(--s3) var(--s4)}
  .rung--0{border-left-color:#5a5680}.rung--1{border-left-color:#b9b6d3}
  .rung--3{border-left-color:#d9d4ff}.rung--4{border-left-color:#8844FF}
  .rung__n{grid-column:1;grid-row:1}
  .rung__l{grid-column:1;grid-row:2;margin:0 0 var(--s2)}
  .rung__c{grid-column:2;grid-row:1;text-align:right;font-size:1.5rem}
  .rung__c--none{font-size:.9rem;line-height:1.5rem}
  .rung__x{grid-column:2;grid-row:2;text-align:right;margin:0 0 var(--s2)}
  .rung__w{grid-row:3}
  .rung__w:last-child{grid-column:2;text-align:right}

  .provs{gap:var(--s2)}
  .prov{min-height:70px}
}

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

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