/* starbucks88official.com - the operator casino floor.
   Near-black ground with leaf green as the primary and gold kept for money, which is the brand's
   own colour wheel off the live floor. The organising idea is the cashier working in public: the
   seven-day check-in strip and the paired live top-up / withdraw boards, with the studio-tabbed
   shelf in the middle and the balance, odds and winners rail on the right.
   Namespace: .sb-

   Spelling rules for this sheet:
     - The gaps and insets, the corner radii, the type sizes and the fixed widths and
       heights used more than once are named once in :root as --n-* and called by name
       everywhere else;
     - box properties keep their physical names, one edge per declaration;
     - every border is split into width, style and colour;
     - gap is row-gap plus column-gap;
     - overflow is overflow-x plus overflow-y;
     - a transition is spelled out as property, duration, timing and delay;
     - an animation names all eight of its parts. */

:root {
  --ink: #07120b;
  /* page ground: near-black with a green cast */
  --ink2:#0d1f14;
  /* raised panel */
  --pan: #0a1810;
  /* inset panel */
  --line: #1d3a26;
  --grn: #44b335;
  /* the primary: leaf green, buttons and active state */
  --grn2:#2e8a27;
  --grnlt: #6fdc5c;
  --gold: #f2c230;
  /* money only: amounts, the coin, the day-seven tile */
  --gold2:#b8860b;
  --text: #e9f3ea;
  --mute: #93ad99;
  --win: #4ade80;
  /* deposits in */
  --out: #f2c230;
  /* withdrawals out */
  --rad: 14px;
  --mx: 1320px;

  /* named values used more than once */
  --n-sp1: .4em;
  --n-sp2: 1px;
  --n-sp3: 2px;
  --n-sp4: 4px;
  --n-sp5: 5px;
  --n-sp6: 6px;
  --n-sp7: 7px;
  --n-sp8: 8px;
  --n-sp9: 9px;
  --n-sp10: 10px;
  --n-sp11: 11px;
  --n-sp12: 12px;
  --n-sp13: 13px;
  --n-sp14: 14px;
  --n-sp15: 15px;
  --n-sp16: 16px;
  --n-sp17: 18px;
  --n-sp18: 19px;
  --n-sp19: 22px;
  --n-sp20: 24px;
  --n-sp21: 26px;
  --n-sp22: 30px;
  --n-rad1: 8px;
  --n-rad2: 9px;
  --n-rad3: 10px;
  --n-rad4: 11px;
  --n-rad5: 12px;
  --n-rad6: 999px;
  --n-fs1: 10.5px;
  --n-fs2: 11px;
  --n-fs3: 11.5px;
  --n-fs4: 12px;
  --n-fs5: 12.5px;
  --n-fs6: 13px;
  --n-fs7: 13.5px;
  --n-fs8: 14px;
  --n-fs9: 14.5px;
  --n-fs10: 15px;
  --n-fs11: 17px;
  --n-fs12: 18px;
  --n-fs13: 19px;
  --n-sz1: 44px;
  --n-sz2: 100%;
  --n-sz3: 34px;
  --n-sz4: 28px;
  --n-sz5: 22px;
  --n-sz6: 30px;
  --n-sz7: 31px;
  --n-sz8: 38px;
  --n-sz9: 40px;
  --n-sz10: 54px;
  --n-sz11: 7px;
  --n-sz12: 9px;
}

*{box-sizing: border-box;}
html{overflow-x: clip;}   /* body-only overflow-x fools Chromium but not iOS */
body{
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  background: var(--ink);
  color: var(--text);
  font: 16px/1.65 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,
       "PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-text-size-adjust: 100%;
}
img{max-width: var(--n-sz2); height: auto; min-width: 0px;}   /* height:auto or injected attrs beat aspect-ratio */
a{color: inherit; text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
h1,h2,h3{line-height: 1.25; margin-top: 0px; margin-right: 0px; margin-bottom: .5em; margin-left: 0px;}
h1{font-size: clamp(25px,4.1vw,42px); letter-spacing: -.01em;}
h2{font-size: clamp(20px,2.7vw,29px);}
h3{font-size: var(--n-fs12);}
p{margin-top: 0px; margin-right: 0px; margin-bottom: 1em; margin-left: 0px;}
main{display: block;}
table{border-collapse: collapse;}

/* A hide utility has to beat every rule it switches off. */
.sb-hide{display: none !important;}
.sb-off{display: none !important;}

/* ---------------------------------------------------------------- buttons */
.sb-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--n-sp7);
  column-gap: var(--n-sp7);
  padding-top: var(--n-sp11);
  padding-right: var(--n-sp17);
  padding-bottom: var(--n-sp11);
  padding-left: var(--n-sp17);
  border-radius: var(--n-rad3);
  font-weight: 700;
  font-size: var(--n-fs8);
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  cursor: pointer;
  min-height: var(--n-sz1);
  text-align: center;
}
.sb-btn.p,.sb-btn.g{
  background: linear-gradient(180deg,var(--grnlt),var(--grn2));
  color: #04210a;
  box-shadow: 0 6px 18px rgba(68,179,53,.26);
}
.sb-btn.o{background: transparent; border-color: var(--grn); color: var(--grnlt);}
.sb-btn.lg{padding-top: var(--n-sp14); padding-right: var(--n-sp20); padding-bottom: var(--n-sp14); padding-left: var(--n-sp20); font-size: 16px; min-height: 50px;}

/* ---------------------------------------------------------------- chrome */
.sb-head{
  position: static;
  background: linear-gradient(180deg,#0e2416,var(--ink));
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--line);
}
.sb-head .bar{
  max-width: var(--mx);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  display: flex;
  align-items: center;
  row-gap: var(--n-sp12);
  column-gap: var(--n-sp12);
  padding-top: var(--n-sp10);
  padding-right: var(--n-sp16);
  padding-bottom: var(--n-sp10);
  padding-left: var(--n-sp16);
  flex-wrap: wrap;
  row-gap: var(--n-sp10);
}
/* The whole lockup must NOT be nowrap. The subtitle is 22 characters at .13em tracking, which
   is wider than a 375 viewport, and a nowrap ancestor made it push the document 155px sideways
   from inside the footer -- where nothing measured "wider than the viewport", because the
   element itself was not oversized, only unbreakable. */
.sb-logo{display: flex; align-items: center; row-gap: var(--n-sp9); column-gap: var(--n-sp9); font-weight: 800; min-width: 0px;}
/* The inline mark carries a viewBox but no width/height, so as a flex item with width:auto it
   takes its max-content and fills the column -- in the footer it measured 343px and pushed the
   wordmark to x=368 on a 375 viewport. An SVG in a flex cell always needs an explicit box. */
.sb-logo svg{flex-grow: 0; flex-shrink: 0; flex-basis: auto; width: var(--n-sz3); height: var(--n-sz3);}
.sb-foot .sb-logo svg{width: var(--n-sz6); height: var(--n-sz6);}
.sb-logo .wm{display: flex; flex-direction: column; line-height: 1.05; min-width: 0px;}
.sb-logo .wm b{
  font-size: 21px;
  color: var(--gold);
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(68,179,53,.35);
}
.sb-logo .wm small{
  font-size: 9.5px;
  color: var(--mute);
  letter-spacing: .11em;
  min-width: 0px;
  overflow-wrap: anywhere;
}
@media(max-width:420px){.sb-logo .wm small{font-size: 8.5px; letter-spacing: .06em;}}
.sb-burger{
  width: var(--n-sz1);
  height: var(--n-sz1);
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--n-rad3);
  color: var(--text);
  font-size: var(--n-fs11);
  cursor: pointer;
}
.sb-acct{display: flex; row-gap: var(--n-sp8); column-gap: var(--n-sp8); align-items: center; margin-left: auto;}
.sb-lang{display: flex; row-gap: var(--n-sp5); column-gap: var(--n-sp5);}
.sb-lang a{
  white-space: nowrap;
  font-size: var(--n-fs4);
  padding-top: var(--n-sp7);
  padding-right: var(--n-sp10);
  padding-bottom: var(--n-sp7);
  padding-left: var(--n-sp10);
  border-radius: var(--n-rad6);
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--mute);
  min-height: var(--n-sz3);
  display: inline-flex;
  align-items: center;
}
.sb-lang a.on{background: var(--gold); color: #04210a; border-color: var(--gold); font-weight: 700;}

/* category bar, with the studio panel that drops from each item */
.sb-menu{background: var(--ink2); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--line); position: relative;}
.sb-menu{max-width: none; display: flex; justify-content: center;}
.sb-menu .it{position: relative; display: inline-block;}
.sb-menu .it>a{
  display: block;
  padding-top: var(--n-sp12);
  padding-right: var(--n-sp15);
  padding-bottom: var(--n-sp12);
  padding-left: var(--n-sp15);
  font-size: var(--n-fs8);
  color: var(--mute);
  white-space: nowrap;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}
.sb-menu .it:hover>a,.sb-menu .it:focus-within>a{color: var(--gold); border-bottom-color: var(--gold);}
.sb-menu .pan{
  display: none;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 30;
  min-width: 280px;
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: 0px 0px 12px 12px;
  padding-top: var(--n-sp12);
  padding-right: var(--n-sp12);
  padding-bottom: var(--n-sp12);
  padding-left: var(--n-sp12);
  row-gap: var(--n-sp9);
  column-gap: var(--n-sp9);
  flex-wrap: wrap;
}
.sb-menu .it:hover .pan,.sb-menu .it:focus-within .pan{display: flex;}
.sb-menu .pan .dark{
  background: #f0faf1;
  border-radius: var(--n-rad1);
  padding-top: var(--n-sp8);
  padding-right: var(--n-sp11);
  padding-bottom: var(--n-sp8);
  padding-left: var(--n-sp11);
  height: var(--n-sz1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
.sb-menu .pan .dark img{max-height: var(--n-sz5); width: auto; min-width: 0px; object-fit: contain;}

.sb-tick{background: #050f09; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--line); overflow-x: hidden; overflow-y: hidden;}
.sb-tick p{
  max-width: var(--mx);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  padding-top: var(--n-sp7);
  padding-right: var(--n-sp16);
  padding-bottom: var(--n-sp7);
  padding-left: var(--n-sp16);
  font-size: var(--n-fs6);
  color: var(--mute);
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- the floor */
.sb-floor{
  max-width: var(--mx);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  padding-top: var(--n-sp16);
  padding-right: var(--n-sp16);
  padding-bottom: var(--n-sp16);
  padding-left: var(--n-sp16);
  display: grid;
  row-gap: var(--n-sp16);
  column-gap: var(--n-sp16);
  grid-template-columns: 1fr;
}
.sb-floor .col{display: flex; flex-direction: column; row-gap: var(--n-sp16); column-gap: var(--n-sp16); min-width: 0px;}
/* phone order: the account panel (register button) first, in the thumb zone */
.sb-floor .col.r{order: 1;}
.sb-floor .col.l{order: 2;}
.sb-floor .col.m{order: 3;}
@media(min-width:1040px){
  .sb-floor{grid-template-columns: 300px minmax(0,1fr) 268px; align-items: start;}
  .sb-floor .col.l{order: 1;}
  .sb-floor .col.m{order: 2;}
  .sb-floor .col.r{order: 3; position: sticky; top: 12px;}
}

/* The hero is full width above the floor. It used to sit as a card inside the 300px left
   rail, which squeezed the H1 into four lines and left the right rail empty below the
   account panel. Text first on a phone, a two-column split from 1040 with the picture on
   the left. */
.sb-hero{
  max-width: var(--mx);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  padding-top: var(--n-sp17);
  padding-right: var(--n-sp16);
  padding-bottom: var(--n-sp4);
  padding-left: var(--n-sp16);
  display: grid;
  row-gap: var(--n-sp17);
  column-gap: var(--n-sp17);
  grid-template-columns: 1fr;
  align-items: center;
}
@media(min-width:1040px){
  .sb-hero{grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); row-gap: var(--n-sp22); column-gap: var(--n-sp22); padding-top: var(--n-sp21);}
  .sb-hero img{order: 1;}.sb-hero .tx{order: 2;}
}
.sb-hero img{
  display: block;
  width: var(--n-sz2);
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--rad);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  min-width: 0px;
}
.sb-hero .tx{min-width: 0px;}
.sb-hero .eb{
  display: inline-block;
  font-size: var(--n-fs2);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--n-rad6);
  padding-top: var(--n-sp5);
  padding-right: var(--n-sp11);
  padding-bottom: var(--n-sp5);
  padding-left: var(--n-sp11);
  margin-bottom: var(--n-sp12);
}
.sb-hero h1{margin-bottom: var(--n-sp1);}
.sb-hero .lead{font-size: 15.5px; color: var(--mute); margin-bottom: var(--n-sp16); max-width: 58ch;}
.sb-hero .act{display: flex; row-gap: var(--n-sp10); column-gap: var(--n-sp10); flex-wrap: wrap;}

/* the live transactions ledger - this brand's signature */
.sb-ledger{
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  overflow-x: hidden;
  overflow-y: hidden;
}
.sb-ledger .hd{
  display: flex;
  align-items: center;
  row-gap: var(--n-sp8);
  column-gap: var(--n-sp8);
  padding-top: var(--n-sp10);
  padding-right: var(--n-sp13);
  padding-bottom: var(--n-sp10);
  padding-left: var(--n-sp13);
  background: var(--pan);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--line);
  font-size: var(--n-fs6);
}
.sb-ledger .hd em{
  font-style: normal;
  color: #ff6b6b;
  font-size: var(--n-fs2);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-left: auto;
}
.sb-ledger .dot{
  width: var(--n-sz11);
  height: var(--n-sz11);
  border-radius: 50%;
  background: #ff6b6b;
  box-shadow: 0 0 0 0 rgba(255,107,107,.7);
  animation-name: sbpulse;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}
@keyframes sbpulse{70%{box-shadow: 0 0 0 7px rgba(255,107,107,0);}
                   100%{box-shadow: 0 0 0 0 rgba(255,107,107,0);}}
@media(prefers-reduced-motion:reduce){.sb-ledger .dot{animation-name: none; animation-duration: 0s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; animation-play-state: running;}}
.sb-ledger table{width: var(--n-sz2); font-size: var(--n-fs5); font-variant-numeric: tabular-nums;}
.sb-ledger th{
  background: var(--pan);
  color: var(--mute);
  font-weight: 600;
  padding-top: var(--n-sp7);
  padding-right: var(--n-sp10);
  padding-bottom: var(--n-sp7);
  padding-left: var(--n-sp10);
  text-align: left;
  font-size: var(--n-fs1);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sb-ledger td{padding-top: var(--n-sp7); padding-right: var(--n-sp10); padding-bottom: var(--n-sp7); padding-left: var(--n-sp10); border-top-width: 1px; border-top-style: solid; border-top-color: rgba(29,58,38,.6);}
.sb-ledger .ph{color: var(--mute);}
.sb-ledger .am{text-align: right; font-weight: 700;}
.sb-ledger .am.in{color: var(--win);}
.sb-ledger .am.out{color: var(--out);}

.sb-ref{
  background: linear-gradient(145deg,#163024,#0a1a11);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-top: var(--n-sp15);
  padding-right: var(--n-sp15);
  padding-bottom: var(--n-sp15);
  padding-left: var(--n-sp15);
}
.sb-ref b{display: block; color: var(--gold); font-size: var(--n-fs10); margin-bottom: var(--n-sp6);}
.sb-ref p{font-size: var(--n-fs6); color: var(--mute); margin-bottom: var(--n-sp11);}

.sb-acct-panel{
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-top: var(--n-sp14);
  padding-right: var(--n-sp14);
  padding-bottom: var(--n-sp14);
  padding-left: var(--n-sp14);
  display: flex;
  flex-direction: column;
  row-gap: var(--n-sp11);
  column-gap: var(--n-sp11);
}
.sb-acct-panel .btns{display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--n-sp8); column-gap: var(--n-sp8);}
.sb-acct-panel .btns .sb-btn{padding-top: var(--n-sp11); padding-right: var(--n-sp6); padding-bottom: var(--n-sp11); padding-left: var(--n-sp6); font-size: var(--n-fs6);}
.sb-acct-panel .bal{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  row-gap: var(--n-sp8);
  column-gap: var(--n-sp8);
  padding-top: var(--n-sp10);
  padding-right: var(--n-sp12);
  padding-bottom: var(--n-sp10);
  padding-left: var(--n-sp12);
  background: var(--pan);
  border-radius: var(--n-rad3);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.sb-acct-panel .bal span{font-size: var(--n-fs4); color: var(--mute);}
.sb-acct-panel .bal b{font-size: var(--n-fs13); color: var(--gold); font-variant-numeric: tabular-nums;}
.sb-acct-panel .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--n-sp8);
  column-gap: var(--n-sp8);
  padding-top: var(--n-sp11);
  padding-right: var(--n-sp12);
  padding-bottom: var(--n-sp11);
  padding-left: var(--n-sp12);
  border-radius: var(--n-rad3);
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  min-height: var(--n-sz1);
}
.sb-acct-panel .row b{font-size: var(--n-fs7);}
.sb-acct-panel .row em{font-style: normal; font-size: var(--n-fs4); color: var(--mute);}
.sb-acct-panel .note{font-size: var(--n-fs4); color: var(--mute); margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}
.sb-acct-panel .chan{display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--n-sp8); column-gap: var(--n-sp8);}
.sb-acct-panel .ch{
  display: flex;
  flex-direction: column;
  row-gap: var(--n-sp2);
  column-gap: var(--n-sp2);
  padding-top: var(--n-sp9);
  padding-right: var(--n-sp10);
  padding-bottom: var(--n-sp9);
  padding-left: var(--n-sp10);
  border-radius: var(--n-rad3);
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  min-height: var(--n-sz1);
  justify-content: center;
  min-width: 0px;
}
.sb-acct-panel .ch b{font-size: var(--n-fs5);}
.sb-acct-panel .ch em{font-style: normal; font-size: var(--n-fs1); color: var(--mute);}
.sb-acct-panel .ch.tg b{color: #5ac4ff;}
.sb-acct-panel .ch.wa b{color: var(--grnlt);}

.sb-trust{display: flex; flex-wrap: wrap; row-gap: var(--n-sp8); column-gap: var(--n-sp8);}
.sb-trust span{
  display: flex;
  align-items: center;
  row-gap: var(--n-sp6);
  column-gap: var(--n-sp6);
  font-size: var(--n-fs5);
  color: var(--mute);
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--n-rad6);
  padding-top: var(--n-sp7);
  padding-right: var(--n-sp12);
  padding-bottom: var(--n-sp7);
  padding-left: var(--n-sp12);
}
.sb-trust i{color: var(--gold); font-style: normal;}

/* ---------------------------------------------------------------- shelf */
.sb-shelf{background: var(--ink2); border-width: 1px; border-style: solid; border-color: var(--line); border-radius: var(--rad); padding-top: var(--n-sp14); padding-right: var(--n-sp14); padding-bottom: var(--n-sp14); padding-left: var(--n-sp14);}
.sb-shelf .hd{display: flex; align-items: baseline; row-gap: var(--n-sp10); column-gap: var(--n-sp10); margin-bottom: var(--n-sp11);}
.sb-shelf .hd h2{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--n-fs12);}
.sb-shelf .lnk{margin-left: auto; font-size: var(--n-fs5); color: var(--gold);}
.sb-shelf .tabs{display: flex; row-gap: var(--n-sp6); column-gap: var(--n-sp6); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--n-sp12);}
.sb-shelf .tabs::-webkit-scrollbar{display: none;}
.sb-shelf .tb{
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--mute);
  padding-top: var(--n-sp9);
  padding-right: var(--n-sp14);
  padding-bottom: var(--n-sp9);
  padding-left: var(--n-sp14);
  border-radius: var(--n-rad6);
  font-size: var(--n-fs6);
  white-space: nowrap;
  min-height: var(--n-sz9);
  cursor: pointer;
}
.sb-shelf .tb.on{background: var(--gold); border-color: var(--gold); color: #04210a; font-weight: 700;}
.sb-games{display: grid; row-gap: var(--n-sp10); column-gap: var(--n-sp10); grid-template-columns: 1fr 1fr;}
@media(min-width:560px){.sb-games{grid-template-columns: 1fr 1fr 1fr;}}
.gc{
  display: block;
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--n-rad4);
  overflow-x: hidden;
  overflow-y: hidden;
  min-width: 0px;
}
.gc img{display: block; width: var(--n-sz2); aspect-ratio: 1/1; object-fit: cover;}
.gc .mt{padding-top: var(--n-sp7); padding-right: var(--n-sp9); padding-bottom: var(--n-sp7); padding-left: var(--n-sp9); display: flex; flex-direction: column; row-gap: var(--n-sp2); column-gap: var(--n-sp2); min-width: 0px;}
.gc .mt b{font-size: var(--n-fs5); white-space: nowrap; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; display: block;}
.gc .mt em{font-style: normal; font-size: var(--n-fs2); color: var(--gold2);}

/* category tiles */
.sb-cats{display: grid; row-gap: var(--n-sp10); column-gap: var(--n-sp10); grid-template-columns: 1fr 1fr;}
@media(min-width:720px){.sb-cats{grid-template-columns: 1fr 1fr 1fr;}}
.sb-cats .tile{
  position: relative;
  border-radius: var(--n-rad5);
  overflow-x: hidden;
  overflow-y: hidden;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  min-width: 0px;
}
.sb-cats .tile img{display: block; width: var(--n-sz2); aspect-ratio: 4/3; object-fit: cover;}
.sb-cats .cap{
  position: absolute;
  inset: auto 0 0 0;
  padding-top: var(--n-sp9);
  padding-right: var(--n-sp11);
  padding-bottom: var(--n-sp9);
  padding-left: var(--n-sp11);
  background: linear-gradient(180deg,rgba(7,18,11,0),rgba(7,18,11,.95) 55%);
  display: flex;
  flex-direction: column;
  row-gap: var(--n-sp2);
  column-gap: var(--n-sp2);
  min-width: 0px;
}
.sb-cats .cap b{font-size: var(--n-fs7); color: var(--gold);}
.sb-cats .cap em{font-style: normal; font-size: var(--n-fs3); color: var(--mute); line-height: 1.35;}

/* ---------------------------------------------------------------- registers */
.sb-checkin,.sb-live,.sb-odds,.sb-winners,.sb-pool,.sb-wall,.sb-apk{
  max-width: var(--mx);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: var(--n-sp19);
  margin-left: auto;
  padding-top: 0px;
  padding-right: var(--n-sp16);
  padding-bottom: 0px;
  padding-left: var(--n-sp16);
}
.sb-checkin .hd h2,.sb-odds .hd h2,.sb-winners .hd h2{margin-bottom: .3em;}
.sb-checkin .hd p,.sb-odds .hd p,.sb-winners .hd p,.sb-live p{color: var(--mute); font-size: var(--n-fs8); max-width: 66ch;}
.sb-tw{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--rad);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.sb-tbl{
  width: var(--n-sz2);
  background: var(--ink2);
  font-size: var(--n-fs8);
  font-variant-numeric: tabular-nums;
}
.sb-tbl th{
  background: var(--pan);
  color: var(--mute);
  text-align: left;
  padding-top: var(--n-sp10);
  padding-right: var(--n-sp13);
  padding-bottom: var(--n-sp10);
  padding-left: var(--n-sp13);
  font-size: var(--n-fs3);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sb-tbl td{padding-top: var(--n-sp10); padding-right: var(--n-sp13); padding-bottom: var(--n-sp10); padding-left: var(--n-sp13); border-top-width: 1px; border-top-style: solid; border-top-color: rgba(29,58,38,.6);}
.sb-tbl .amt{text-align: right; color: var(--gold); font-weight: 700;}
.sb-live .sb-btn,.sb-checkin .sb-btn,.sb-odds .sb-btn,.sb-winners .sb-btn{margin-top: var(--n-sp13);}

/* provider wall */
.sb-wall .logos{display: flex; flex-wrap: wrap; row-gap: var(--n-sp9); column-gap: var(--n-sp9); margin-bottom: var(--n-sp12);}
/* ONE chip treatment sitewide (feedback_one_chip_per_site): pale plate, so a dark-ink or
   thin-stroke wordmark cannot wash out against the indigo ground. */
.sb-wall .dark{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background: #f0faf1;
  border-width: 1px;
  border-style: solid;
  border-color: #cfe6d3;
  border-radius: var(--n-rad3);
  padding-top: var(--n-sp10);
  padding-right: var(--n-sp14);
  padding-bottom: var(--n-sp10);
  padding-left: var(--n-sp14);
  height: var(--n-sz10);
}
.sb-wall .dark img{max-height: 26px; width: auto; min-width: 0px; object-fit: contain;}
.sb-wall .sub{font-size: var(--n-fs6); color: var(--mute); margin-top: 0px; margin-right: 0px; margin-bottom: var(--n-sp8); margin-left: 0px;}
.sb-wall .chips{display: flex; flex-wrap: wrap; row-gap: var(--n-sp7); column-gap: var(--n-sp7);}
.sb-wall .chip{
  font-size: var(--n-fs4);
  color: var(--mute);
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--n-rad6);
  padding-top: var(--n-sp6);
  padding-right: var(--n-sp11);
  padding-bottom: var(--n-sp6);
  padding-left: var(--n-sp11);
}

/* jackpot pool */
.sb-pool{
  text-align: center;
  background: linear-gradient(145deg,#163024,#09160e);
  border-width: 1px;
  border-style: solid;
  border-color: var(--gold2);
  border-radius: var(--rad);
  padding-top: var(--n-sp19);
  padding-right: var(--n-sp16);
  padding-bottom: var(--n-sp19);
  padding-left: var(--n-sp16);
  max-width: calc(var(--mx) - 32px);
}
.sb-pool .jp{display: flex; align-items: baseline; justify-content: center; row-gap: var(--n-sp9); column-gap: var(--n-sp9); margin-bottom: var(--n-sp9);}
.sb-pool .jp span{font-size: var(--n-fs8); color: var(--mute); letter-spacing: .1em;}
.sb-pool .jp b{
  font-size: clamp(28px,5.5vw,46px);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(68,179,53,.3);
}
.sb-pool p{color: var(--mute); font-size: var(--n-fs7); max-width: 62ch; margin-top: 0px; margin-right: auto; margin-bottom: var(--n-sp13); margin-left: auto;}

/* APK block */
.sb-apk{display: grid; row-gap: var(--n-sp16); column-gap: var(--n-sp16); grid-template-columns: 1fr; align-items: center;}
@media(min-width:820px){.sb-apk{grid-template-columns: 270px minmax(0,1fr);}}
.sb-apk img{border-radius: var(--rad); border-width: 1px; border-style: solid; border-color: var(--line); width: var(--n-sz2);}
.sb-apk .tx p{color: var(--mute); font-size: var(--n-fs9);}
.sb-apk .meta{display: flex; flex-wrap: wrap; row-gap: var(--n-sp7); column-gap: var(--n-sp7); margin-bottom: var(--n-sp13);}
.sb-apk .meta span{
  font-size: var(--n-fs4);
  color: var(--mute);
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--n-rad6);
  padding-top: var(--n-sp6);
  padding-right: var(--n-sp11);
  padding-bottom: var(--n-sp6);
  padding-left: var(--n-sp11);
}

/* ---------------------------------------------------------------- page body */
.sb-content{max-width: 860px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: var(--n-sp16); padding-bottom: var(--n-sp21); padding-left: var(--n-sp16);}
.sb-content h2{margin-top: 1.5em;}
.sb-content a{color: var(--gold); text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto; text-underline-offset: 2px;}
.sb-kpis{
  display: grid;
  row-gap: var(--n-sp10);
  column-gap: var(--n-sp10);
  grid-template-columns: 1fr 1fr;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 20px;
  margin-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  list-style-type: none;
  list-style-position: outside;
  list-style-image: none;
}
@media(min-width:640px){.sb-kpis{grid-template-columns: 1fr 1fr 1fr 1fr;}}
.sb-kpis li{background: var(--ink2); border-width: 1px; border-style: solid; border-color: var(--line); border-radius: var(--n-rad5); padding-top: var(--n-sp13); padding-right: var(--n-sp13); padding-bottom: var(--n-sp13); padding-left: var(--n-sp13);}
.sb-kpis b{display: block; font-size: 20px; color: var(--gold); font-variant-numeric: tabular-nums;}
.sb-kpis span{font-size: var(--n-fs4); color: var(--mute);}
.sb-steps{list-style-type: none; list-style-position: outside; list-style-image: none; counter-reset: s; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: var(--n-sp19); margin-left: 0px;}
.sb-steps li{counter-increment: s; position: relative; padding-top: 0px; padding-right: 0px; padding-bottom: var(--n-sp14); padding-left: 44px;}
.sb-steps li::before{
  content: counter(s);
  position: absolute;
  left: 0px;
  top: 0px;
  width: var(--n-sz7);
  height: var(--n-sz7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: #04210a;
  font-weight: 800;
  font-size: var(--n-fs8);
}
.sb-steps b{display: block; margin-bottom: var(--n-sp3);}
.sb-content .sb-tw{margin-top: 0px; margin-right: 0px; margin-bottom: var(--n-sp19); margin-left: 0px;}
.sb-faq{margin-top: 0px; margin-right: 0px; margin-bottom: var(--n-sp19); margin-left: 0px;}
.sb-faq details{
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--n-rad4);
  padding-top: var(--n-sp12);
  padding-right: var(--n-sp15);
  padding-bottom: var(--n-sp12);
  padding-left: var(--n-sp15);
  margin-bottom: var(--n-sp9);
}
.sb-faq summary{cursor: pointer; font-weight: 700; min-height: var(--n-sz4);}
.sb-band{
  background: linear-gradient(145deg,#163024,#09160e);
  border-width: 1px;
  border-style: solid;
  border-color: var(--gold2);
  border-radius: var(--rad);
  padding-top: var(--n-sp18);
  padding-right: var(--n-sp18);
  padding-bottom: var(--n-sp18);
  padding-left: var(--n-sp18);
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: var(--n-sp19);
  margin-left: 0px;
  text-align: center;
}
.sb-band b{display: block; font-size: var(--n-fs12); color: var(--gold); margin-bottom: var(--n-sp6);}
.sb-band p{color: var(--mute); font-size: var(--n-fs8);}

/* ---------------------------------------------------------------- footer */
.sb-foot{background: #040c07; border-top-width: 1px; border-top-style: solid; border-top-color: var(--line); padding-top: var(--n-sp21); padding-right: 0px; padding-bottom: 96px; padding-left: 0px; margin-top: var(--n-sp21);}
.sb-foot .cols{
  max-width: var(--mx);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  padding-top: 0px;
  padding-right: var(--n-sp16);
  padding-bottom: 0px;
  padding-left: var(--n-sp16);
  display: grid;
  row-gap: var(--n-sp19);
  column-gap: var(--n-sp19);
  grid-template-columns: 1fr;
}
@media(min-width:760px){.sb-foot .cols{grid-template-columns: 2fr 1fr 1fr;}}
.sb-foot .w h4,.sb-foot .w b{
  font-size: var(--n-fs4);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: var(--n-sp9);
  margin-left: 0px;
}
.sb-foot ul{list-style-type: none; list-style-position: outside; list-style-image: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}
.sb-foot li{margin-bottom: var(--n-sp6); font-size: var(--n-fs7); color: var(--mute);}
.sb-foot .ab{font-size: var(--n-fs6); color: var(--mute); max-width: 56ch;}
.sb-foot .sb-logo{margin-bottom: var(--n-sp10);}
.sb-foot .pay,.sb-foot .trust{display: flex; flex-wrap: wrap; row-gap: var(--n-sp8); column-gap: var(--n-sp8); margin-top: var(--n-sp11);}
.sb-foot .pay span,.sb-foot .trust span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background: #f0faf1;
  border-width: 1px;
  border-style: solid;
  border-color: #cfe6d3;
  border-radius: var(--n-rad1);
  padding-top: var(--n-sp7);
  padding-right: var(--n-sp10);
  padding-bottom: var(--n-sp7);
  padding-left: var(--n-sp10);
  height: var(--n-sz9);
}
.sb-foot .pay img,.sb-foot .trust img{max-height: var(--n-sz5); width: auto; min-width: 0px; object-fit: contain;}
.sb-foot .soc{display: flex; flex-wrap: wrap; row-gap: var(--n-sp8); column-gap: var(--n-sp8); margin-top: var(--n-sp11);}
.sb-foot .lic,.sb-foot .rg{font-size: var(--n-fs5); color: var(--mute); margin-top: var(--n-sp11); margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}
.sb-foot .cr{
  max-width: var(--mx);
  margin-top: var(--n-sp16);
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  padding-top: var(--n-sp13);
  padding-right: var(--n-sp16);
  padding-bottom: 0px;
  padding-left: var(--n-sp16);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--line);
  font-size: var(--n-fs4);
  color: var(--mute);
}
.coin{
  display: inline-flex;
  align-items: center;
  row-gap: var(--n-sp6);
  column-gap: var(--n-sp6);
  font-size: var(--n-fs6);
  color: var(--gold);
  min-height: var(--n-sz1);
}

/* bottom app bar + sticky CTA */
.sb-bar{
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  background: var(--pan);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--line);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.sb-bar a{
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--n-sp3);
  column-gap: var(--n-sp3);
  padding-top: var(--n-sp8);
  padding-right: var(--n-sp4);
  padding-bottom: var(--n-sp8);
  padding-left: var(--n-sp4);
  font-size: var(--n-fs1);
  color: var(--mute);
  min-height: var(--n-sz10);
  justify-content: center;
  text-align: center;
}
.sb-bar .i{font-style: normal; font-size: var(--n-fs11); color: var(--gold);}
@media(min-width:1040px){.sb-bar{display: none;}.sb-foot{padding-bottom: var(--n-sp21);}}
.sb-scta{position: fixed; inset: auto 14px 64px auto; z-index: 41;}
@media(min-width:1040px){.sb-scta{inset: auto 20px 20px auto;}}

/* ---------------------------------------------------------------- entry modal */
.sb-pop{
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(3,9,5,.86);
  display: none;
  align-items: center;
  justify-content: center;
  padding-top: var(--n-sp16);
  padding-right: var(--n-sp16);
  padding-bottom: var(--n-sp16);
  padding-left: var(--n-sp16);
}
.sb-pop.on{display: flex;}
.sb-pop .bx{
  position: relative;
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--gold2);
  border-radius: 16px;
  max-width: 380px;
  width: var(--n-sz2);
  max-height: 92vh;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}
/* .bx is overflow:hidden for its corners, so the close control lives INSIDE it */
.sb-pop .x{
  position: absolute;
  top: 9px;
  right: 9px;
  width: var(--n-sz3);
  height: var(--n-sz3);
  border-radius: 50%;
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--text);
  z-index: 2;
  cursor: pointer;
  font-size: var(--n-fs10);
  line-height: 1;
}
.sb-pop .hd{padding-top: var(--n-sp16); padding-right: var(--n-sp17); padding-bottom: 0px; padding-left: var(--n-sp17);}
.sb-pop .panes{overflow-y: auto;}
.sb-pop .pane{padding-top: var(--n-sp17); padding-right: var(--n-sp17); padding-bottom: var(--n-sp17); padding-left: var(--n-sp17);}
.sb-pop .eb{
  display: inline-block;
  font-size: var(--n-fs1);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--n-sp6);
}
.sb-pop .big{
  display: block;
  font-size: 26px;
  color: var(--gold);
  font-weight: 800;
  margin-bottom: var(--n-sp7);
  font-variant-numeric: tabular-nums;
}
.sb-pop p{font-size: var(--n-fs8); color: var(--mute); margin-bottom: var(--n-sp15);}
.sb-pop .pg{
  display: flex;
  align-items: center;
  row-gap: var(--n-sp8);
  column-gap: var(--n-sp8);
  padding-top: var(--n-sp11);
  padding-right: var(--n-sp16);
  padding-bottom: var(--n-sp11);
  padding-left: var(--n-sp16);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--line);
  background: var(--pan);
}
.sb-pop .pv,.sb-pop .nx{
  width: var(--n-sz8);
  height: var(--n-sz8);
  border-radius: var(--n-rad2);
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--text);
  cursor: pointer;
  font-size: var(--n-fs10);
}
.sb-pop .ct{font-size: var(--n-fs4); color: var(--mute); margin-left: auto; font-variant-numeric: tabular-nums;}
.sb-pop .dots{display: flex; row-gap: var(--n-sp5); column-gap: var(--n-sp5);}
.sb-pop .dot{
  width: var(--n-sz12);
  height: var(--n-sz12);
  border-radius: 50%;
  background: var(--line);
  border-width: 0px;
  border-style: none;
  border-color: currentcolor;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  cursor: pointer;
}
.sb-pop .dot.on{background: var(--gold);}

/* ---------------------------------------------------------------- phones */
@media(max-width:1039px){
  .sb-burger{display: flex;}
  .sb-menu{overflow-x: auto; scrollbar-width: none; justify-content: flex-start;}
  .sb-menu::-webkit-scrollbar{display: none;}
  .sb-menu .pan{display: none !important;}   /* no hover on touch; the bar scrolls instead */
  .sb-acct{
    order: 3;
    width: var(--n-sz2);
    margin-left: 0px;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: var(--n-sp8);
    min-width: 0px;
  }
  .sb-acct .sb-btn{flex-grow: 1; flex-shrink: 1; flex-basis: auto; max-width: 190px; min-width: 0px;}
  .sb-lang{min-width: 0px; flex-wrap: wrap;}
}
@media(max-width:400px){
  /* At 320 the three language chips plus Login and Register overflow a single row by 19px.
     Give the chips their own line; the two buttons then split the width underneath. */
  .sb-acct{justify-content: flex-start; row-gap: var(--n-sp8); column-gap: var(--n-sp8);}
  .sb-lang{flex-grow: 1; flex-shrink: 1; flex-basis: 100%; order: -1;}
  .sb-acct .sb-btn{flex-grow: 1; flex-shrink: 1; flex-basis: calc(50% - 4px); max-width: none;}
  .sb-lang a{padding-top: var(--n-sp6); padding-right: var(--n-sp9); padding-bottom: var(--n-sp6); padding-left: var(--n-sp9); font-size: var(--n-fs3);}
  .sb-floor{padding-top: var(--n-sp12); padding-right: var(--n-sp12); padding-bottom: var(--n-sp12); padding-left: var(--n-sp12);}
  .sb-games{row-gap: var(--n-sp8); column-gap: var(--n-sp8);}
  .sb-ledger table{font-size: var(--n-fs3);}
  .sb-ledger td,.sb-ledger th{padding-top: var(--n-sp6); padding-right: var(--n-sp8); padding-bottom: var(--n-sp6); padding-left: var(--n-sp8);}
}

/* ---------------------------------------------------------------- the check-in streak
   The brand's own device: seven day tiles, the seventh one gold because it is the only one
   that pays. The strip scrolls rather than wrapping on a phone, so day seven stays on the
   same line as the rest and the shape of a streak survives the breakpoint. */
.sb-checkin .days{
  display: flex;
  row-gap: var(--n-sp9);
  column-gap: var(--n-sp9);
  overflow-x: auto;
  padding-top: var(--n-sp3);
  padding-right: var(--n-sp3);
  padding-bottom: var(--n-sp9);
  padding-left: var(--n-sp3);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.sb-checkin .d{
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 86px;
  scroll-snap-align: start;
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--n-rad5);
  padding-top: var(--n-sp12);
  padding-right: var(--n-sp9);
  padding-bottom: var(--n-sp12);
  padding-left: var(--n-sp9);
  text-align: center;
  display: flex;
  flex-direction: column;
  row-gap: var(--n-sp5);
  column-gap: var(--n-sp5);
  min-width: 0px;
}
.sb-checkin .d em{font-style: normal; font-size: var(--n-fs3); color: var(--mute); letter-spacing: .04em;}
.sb-checkin .d b{
  font-size: var(--n-fs11);
  font-weight: 800;
  color: var(--grnlt);
  font-variant-numeric: tabular-nums;
}
.sb-checkin .d.pay{
  background: linear-gradient(160deg,#2a2208,#111c0d);
  border-color: var(--gold2);
  box-shadow: 0 0 0 1px rgba(242,194,48,.18);
}
.sb-checkin .d.pay b{color: var(--gold); font-size: var(--n-fs13);}
.sb-checkin .d.pay em{color: #d9c489;}

/* ---------------------------------------------------------------- the odds strip
   Fixture cards with three prices. The three buttons are a grid rather than a flex row so a
   long club name cannot push the third price out of its card at 320. */
.sb-odds .fxs{display: grid; row-gap: var(--n-sp12); column-gap: var(--n-sp12); grid-template-columns: 1fr;}
@media(min-width:760px){.sb-odds .fxs{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}}
@media(min-width:1100px){.sb-odds .fxs{grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}}
.sb-odds .fx{
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-top: var(--n-sp13);
  padding-right: var(--n-sp13);
  padding-bottom: var(--n-sp13);
  padding-left: var(--n-sp13);
  min-width: 0px;
}
.sb-odds .fx .lg{
  display: flex;
  justify-content: space-between;
  align-items: center;
  row-gap: var(--n-sp8);
  column-gap: var(--n-sp8);
  font-size: var(--n-fs3);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--n-sp9);
  min-width: 0px;
}
.sb-odds .fx .lg b{
  font-weight: 700;
  color: var(--grnlt);
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0px;
}
.sb-odds .fx .lg em{font-style: normal; flex-grow: 0; flex-shrink: 0; flex-basis: auto; font-variant-numeric: tabular-nums;}
.sb-odds .fx .tm{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  row-gap: var(--n-sp8);
  column-gap: var(--n-sp8);
  margin-bottom: var(--n-sp11);
  font-size: var(--n-fs9);
  font-weight: 600;
  min-width: 0px;
}
.sb-odds .fx .tm span{min-width: 0px; overflow-wrap: anywhere;}
.sb-odds .fx .tm span:last-child{text-align: right;}
.sb-odds .fx .tm i{font-style: normal; color: var(--mute); font-size: var(--n-fs4);}
.sb-odds .fx .od{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--n-sp7); column-gap: var(--n-sp7);}
.sb-odds .fx .o{
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--n-rad2);
  padding-top: var(--n-sp8);
  padding-right: var(--n-sp4);
  padding-bottom: var(--n-sp8);
  padding-left: var(--n-sp4);
  text-align: center;
  display: flex;
  flex-direction: column;
  row-gap: var(--n-sp3);
  column-gap: var(--n-sp3);
  min-height: 48px;
  justify-content: center;
  min-width: 0px;
}
.sb-odds .fx .o em{font-style: normal; font-size: var(--n-fs2); color: var(--mute);}
.sb-odds .fx .o b{font-size: var(--n-fs10); color: var(--gold); font-variant-numeric: tabular-nums;}
.sb-odds .fine{color: var(--mute); font-size: var(--n-fs5); margin-top: var(--n-sp12); margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}

/* ---------------------------------------------------------------- the winners podium
   Three cards, the first one lifted. On a phone they stack in rank order rather than keeping
   the podium shape, because a 1-2-3 podium at 375 leaves the winner two thirds of a card wide. */
.sb-winners .pod{display: grid; row-gap: var(--n-sp11); column-gap: var(--n-sp11); grid-template-columns: 1fr;}
@media(min-width:720px){
  .sb-winners .pod{grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); align-items: end;}
  .sb-winners .wn.p1{order: 2;}.sb-winners .wn.p2{order: 1;}.sb-winners .wn.p3{order: 3;}
  .sb-winners .wn.p1{padding-top: var(--n-sp20);}
}
.sb-winners .wn{
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-top: var(--n-sp14);
  padding-right: var(--n-sp14);
  padding-bottom: var(--n-sp14);
  padding-left: var(--n-sp14);
  display: flex;
  flex-direction: column;
  row-gap: var(--n-sp5);
  column-gap: var(--n-sp5);
  align-items: center;
  text-align: center;
  min-width: 0px;
}
.sb-winners .wn.p1{border-color: var(--gold2); background: linear-gradient(170deg,#1d1a07,#0d1f14);}
.sb-winners .pl{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--n-sz4);
  height: var(--n-sz4);
  border-radius: 50%;
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  font-size: var(--n-fs6);
  font-weight: 800;
  color: var(--mute);
}
.sb-winners .wn.p1 .pl{
  background: linear-gradient(160deg,var(--gold),var(--gold2));
  color: #2a2003;
  border-color: var(--gold);
}
.sb-winners .st{font-size: var(--n-fs8); font-weight: 700; color: var(--grnlt); overflow-wrap: anywhere;}
.sb-winners .id{font-size: var(--n-fs5); color: var(--mute); font-variant-numeric: tabular-nums;}
.sb-winners .amt{
  font-style: normal;
  font-size: var(--n-fs13);
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.sb-winners .x{font-size: var(--n-fs4); color: var(--mute); font-variant-numeric: tabular-nums;}

/* ---------------------------------------------------------------- the page hero
   The 14 keyword pages, and a deliberately different shape from the home hero: text first on a
   phone with the picture under it, then a two-column split from 900 with the image on the right. */
.sb-ph{
  max-width: var(--mx);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: var(--n-sp19);
  margin-left: auto;
  padding-top: 0px;
  padding-right: var(--n-sp16);
  padding-bottom: 0px;
  padding-left: var(--n-sp16);
  display: grid;
  row-gap: var(--n-sp16);
  column-gap: var(--n-sp16);
  grid-template-columns: 1fr;
  align-items: center;
}
@media(min-width:900px){
  .sb-ph{grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); row-gap: var(--n-sp21); column-gap: var(--n-sp21); margin-bottom: 28px;}
  .sb-ph .tx{order: 1;}.sb-ph img{order: 2;}
}
.sb-ph img{
  display: block;
  width: var(--n-sz2);
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--rad);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  min-width: 0px;
}
.sb-ph .tx{min-width: 0px;}
.sb-ph .eb{
  display: inline-block;
  font-size: var(--n-fs2);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grnlt);
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--n-rad6);
  padding-top: var(--n-sp5);
  padding-right: var(--n-sp11);
  padding-bottom: var(--n-sp5);
  padding-left: var(--n-sp11);
  margin-bottom: var(--n-sp11);
}
.sb-ph h1{margin-bottom: var(--n-sp1);}
.sb-ph .lead{font-size: var(--n-fs10); color: var(--mute); margin-bottom: var(--n-sp15); max-width: 60ch;}
.sb-ph .act{display: flex; row-gap: var(--n-sp9); column-gap: var(--n-sp9); flex-wrap: wrap;}

/* ---------------------------------------------------------------- rail variants
   The odds strip and the winners' podium are full-width sections on their own, and cards in
   the right rail on the home floor. Scope the overrides rather than duplicating the blocks. */
.sb-floor .col .sb-odds,.sb-floor .col .sb-winners,.sb-floor .col .sb-checkin{max-width: none; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;}
.sb-floor .col .sb-checkin .hd h2{font-size: var(--n-fs11);}
.sb-floor .col .sb-checkin .hd p{font-size: var(--n-fs5);}
.sb-floor .col .sb-checkin .d{flex-grow: 1; flex-shrink: 0; flex-basis: 64px; padding-top: var(--n-sp9); padding-right: var(--n-sp5); padding-bottom: var(--n-sp9); padding-left: var(--n-sp5);}
.sb-floor .col .sb-checkin .d em{font-size: var(--n-fs1);}
.sb-floor .col .sb-checkin .d b{font-size: var(--n-fs8);}
.sb-floor .col .sb-checkin .d.pay b{font-size: var(--n-fs10);}
.sb-floor .col .sb-odds .hd h2,.sb-floor .col .sb-winners .hd h2{font-size: var(--n-fs11);}
.sb-floor .col .sb-odds .hd p,.sb-floor .col .sb-winners .hd p{font-size: var(--n-fs5);}
.sb-floor .col .sb-odds .fxs{grid-template-columns: 1fr;}
.sb-floor .col .sb-winners .pod{grid-template-columns: 1fr;}
.sb-floor .col .sb-winners .wn.p1{padding-top: var(--n-sp14); order: 0;}
.sb-floor .col .sb-winners .wn.p2{order: 0;}
.sb-floor .col .sb-winners .wn.p3{order: 0;}
.sb-floor .col .sb-odds .fine{font-size: var(--n-fs3);}
@media(min-width:1040px){
  /* a sticky rail cannot be taller than the viewport or its foot is unreachable */
  .sb-floor .col.r{position: static;}
}

/* ---------------------------------------------------------------- tap targets
   Every control is at least 44px high: the language chips, the nav links and the "View all"
   link were all shorter than that and were raised to meet it. */
.sb-lang a{min-height: var(--n-sz1); display: inline-flex; align-items: center;}
.sb-menu .it>a{min-height: var(--n-sz1); display: inline-flex; align-items: center;}
.sb-shelf .lnk{min-height: var(--n-sz1); display: inline-flex; align-items: center; padding-top: 0px; padding-right: var(--n-sp4); padding-bottom: 0px; padding-left: var(--n-sp4);}
@media(max-width:700px){.sb-lang a{padding-top: var(--n-sp6); padding-right: var(--n-sp12); padding-bottom: var(--n-sp6); padding-left: var(--n-sp12); min-height: var(--n-sz1);}}
/* The footer column links are plain <a> in flow at 18px tall, which is every remaining
   tap-target warning. They are the same three links on all 54 pages, so one rule clears 80. */
.sb-foot .cols>div>a{
  display: flex;
  align-items: center;
  min-height: var(--n-sz1);
  font-size: var(--n-fs7);
  color: var(--mute);
}
.sb-foot .cols>div>a:hover{color: var(--grnlt);}