/* eu9official.net - the operator casino floor.
   Near-black #0E0F12 ground, maroon #9B0D1C and brick #C0392B as the primary pair, chrome for
   type and gold kept strictly for money. That is the live floor's own wheel. The organising idea
   is the cashier working in public: the free daily spin and the paired deposit / withdraw boards
   on the left, the studio-tabbed shelf in the middle, and the balance, the odds and the
   multiplier podium on the right.
   Namespace: .e9-

   Conventions in here:
     - The gaps and insets, the corner radii, the font weights, the shadows and the line
       heights used more than once are named once in :root as --w-* 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;
     - the font shorthand is opened out into its longhands. */

:root {
  --ink: #0E0F12;
  /* page ground: near-black */
  --ink2:#171A1F;
  /* raised panel */
  --pan: #13161B;
  /* inset panel */
  --line: #2B3038;
  --red: #C0392B;
  /* the primary: brick, buttons and active state */
  --red2:#9B0D1C;
  /* maroon, the darker half of every gradient */
  --redlt: #E0604E;
  --gold: #E9B949;
  /* money only: amounts and the top wheel segment */
  --gold2:#A8832C;
  --text: #EDEFF2;
  --mute: #9BA3AE;
  --chrome: #C9CED6;
  --win: #C9CED6;
  /* deposits going in */
  --out: #E9B949;
  /* withdrawals coming out */
  --rad: 14px;
  --mx: 1320px;

  /* named values used more than once */
  --w-sp1: .4em;
  --w-sp2: 1px;
  --w-sp3: 2px;
  --w-sp4: 4px;
  --w-sp5: 5px;
  --w-sp6: 6px;
  --w-sp7: 7px;
  --w-sp8: 8px;
  --w-sp9: 9px;
  --w-sp10: 10px;
  --w-sp11: 11px;
  --w-sp12: 12px;
  --w-sp13: 13px;
  --w-sp14: 14px;
  --w-sp15: 15px;
  --w-sp16: 16px;
  --w-sp17: 18px;
  --w-sp18: 19px;
  --w-sp19: 22px;
  --w-sp20: 24px;
  --w-sp21: 26px;
  --w-sp22: 30px;
  --w-rad1: 8px;
  --w-rad2: 9px;
  --w-rad3: 10px;
  --w-rad4: 11px;
  --w-rad5: 12px;
  --w-rad6: 999px;
  --w-wt1: 700;
  --w-wt2: 800;
  --w-wt3: 600;
}

*{box-sizing: border-box;}
html{overflow-x: clip;}   /* body-only overflow-x fools Chromium but not iOS */
body{
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  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: 100%; height: auto; min-width: 0;}   /* height:auto or injected attrs beat aspect-ratio */
a{color: inherit; text-decoration: none;}
h1,h2,h3{line-height: 1.25; margin-top: 0; margin-right: 0; margin-bottom: .5em; margin-left: 0;}
h1{font-size: clamp(1.5625rem,4.1vw,2.625rem); letter-spacing: -.01em;}
h2{font-size: clamp(1.25rem,2.7vw,1.8125rem);}
h3{font-size: 1.125rem;}
p{margin-top: 0; margin-right: 0; margin-bottom: 1em; margin-left: 0;}
main{display: block;}
table{border-collapse: collapse;}

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

/* ---------------------------------------------------------------- buttons */
.e9-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--w-sp7);
  column-gap: var(--w-sp7);
  padding-top: var(--w-sp11);
  padding-right: var(--w-sp17);
  padding-bottom: var(--w-sp11);
  padding-left: var(--w-sp17);
  border-radius: var(--w-rad3);
  font-weight: var(--w-wt1);
  font-size: 0.875rem;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: transparent;
  cursor: pointer;
  min-height: 2.75rem;
  text-align: center;
}
.e9-btn.p,.e9-btn.g{
  background: linear-gradient(180deg,var(--redlt),var(--red2));
  color: #1B0608;
  box-shadow: 0 0.375rem 1.125rem rgba(192,57,43,.3);
}
.e9-btn.o{background: transparent; border-color: var(--red); color: var(--redlt);}
.e9-btn.lg{padding-top: var(--w-sp14); padding-right: var(--w-sp20); padding-bottom: var(--w-sp14); padding-left: var(--w-sp20); font-size: 1rem; min-height: 3.125rem;}

/* ---------------------------------------------------------------- chrome */
.e9-head{
  position: static;
  background: linear-gradient(180deg,#1A1C22,var(--ink));
  border-bottom-width: 0.0625rem;
  border-bottom-style: solid;
  border-bottom-color: var(--line);
}
.e9-head .bar{
  max-width: var(--mx);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  row-gap: var(--w-sp12);
  column-gap: var(--w-sp12);
  padding-top: var(--w-sp10);
  padding-right: var(--w-sp16);
  padding-bottom: var(--w-sp10);
  padding-left: var(--w-sp16);
  flex-wrap: wrap;
  row-gap: var(--w-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. */
.e9-logo{display: flex; align-items: center; row-gap: var(--w-sp9); column-gap: var(--w-sp9); font-weight: var(--w-wt2); min-width: 0;}
/* 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. */
.e9-logo svg{flex-grow: 0; flex-shrink: 0; flex-basis: auto; width: 2.125rem; height: 2.125rem;}
.e9-foot .e9-logo svg{width: 1.875rem; height: 1.875rem;}
.e9-logo .wm{display: flex; flex-direction: column; line-height: 1.05; min-width: 0;}
.e9-logo .wm b{
  font-size: 1.3125rem;
  color: var(--gold);
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow: 0 0 0.875rem rgba(192,57,43,.4);
}
.e9-logo .wm small{
  font-size: 0.59375rem;
  color: var(--mute);
  letter-spacing: .11em;
  min-width: 0;
  overflow-wrap: anywhere;
}
@media(max-width:420px){.e9-logo .wm small{font-size: 0.53125rem; letter-spacing: .06em;}}
.e9-burger{
  width: 2.75rem;
  height: 2.75rem;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--ink2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--w-rad3);
  color: var(--text);
  font-size: 1.0625rem;
  cursor: pointer;
}
.e9-acct{display: flex; row-gap: var(--w-sp8); column-gap: var(--w-sp8); align-items: center; margin-left: auto;}
.e9-lang{display: flex; row-gap: var(--w-sp5); column-gap: var(--w-sp5);}
.e9-lang a{
  white-space: nowrap;
  font-size: 0.75rem;
  padding-top: var(--w-sp7);
  padding-right: var(--w-sp10);
  padding-bottom: var(--w-sp7);
  padding-left: var(--w-sp10);
  border-radius: var(--w-rad6);
  background: var(--ink2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  color: var(--mute);
  min-height: 2.125rem;
  display: inline-flex;
  align-items: center;
}
.e9-lang a.on{background: var(--gold); color: #1B0608; border-color: var(--gold); font-weight: var(--w-wt1);}

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

.e9-tick{background: #0A0B0E; border-bottom-width: 0.0625rem; border-bottom-style: solid; border-bottom-color: var(--line); overflow-x: hidden; overflow-y: hidden;}
.e9-tick p{
  max-width: var(--mx);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: var(--w-sp7);
  padding-right: var(--w-sp16);
  padding-bottom: var(--w-sp7);
  padding-left: var(--w-sp16);
  font-size: 0.8125rem;
  color: var(--mute);
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
}

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

/* 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. */
.e9-hero{
  max-width: var(--mx);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: var(--w-sp17);
  padding-right: var(--w-sp16);
  padding-bottom: var(--w-sp4);
  padding-left: var(--w-sp16);
  display: grid;
  row-gap: var(--w-sp17);
  column-gap: var(--w-sp17);
  grid-template-columns: 1fr;
  align-items: center;
}
@media(min-width:1040px){
  .e9-hero{grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); row-gap: var(--w-sp22); column-gap: var(--w-sp22); padding-top: var(--w-sp21);}
  .e9-hero img{order: 1;}.e9-hero .tx{order: 2;}
}
.e9-hero img{
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--rad);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  min-width: 0;
}
.e9-hero .tx{min-width: 0;}
.e9-hero .eb{
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--pan);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--w-rad6);
  padding-top: var(--w-sp5);
  padding-right: var(--w-sp11);
  padding-bottom: var(--w-sp5);
  padding-left: var(--w-sp11);
  margin-bottom: var(--w-sp12);
}
.e9-hero h1{margin-bottom: var(--w-sp1);}
.e9-hero .lead{font-size: 0.96875rem; color: var(--mute); margin-bottom: var(--w-sp16); max-width: 58ch;}
.e9-hero .act{display: flex; row-gap: var(--w-sp10); column-gap: var(--w-sp10); flex-wrap: wrap;}

/* the live transactions ledger - this brand's signature */
.e9-ledger{
  background: var(--ink2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  overflow-x: hidden;
  overflow-y: hidden;
}
.e9-ledger .hd{
  display: flex;
  align-items: center;
  row-gap: var(--w-sp8);
  column-gap: var(--w-sp8);
  padding-top: var(--w-sp10);
  padding-right: var(--w-sp13);
  padding-bottom: var(--w-sp10);
  padding-left: var(--w-sp13);
  background: var(--pan);
  border-bottom-width: 0.0625rem;
  border-bottom-style: solid;
  border-bottom-color: var(--line);
  font-size: 0.8125rem;
}
.e9-ledger .hd em{
  font-style: normal;
  color: #ff6b6b;
  font-size: 0.6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-left: auto;
}
.e9-ledger .dot{
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: #ff6b6b;
  box-shadow: 0 0 0 0 rgba(255,107,107,.7);
  animation: e9pulse 2s infinite;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}
@keyframes e9pulse{70%{box-shadow: 0 0 0 0.4375rem rgba(255,107,107,0);}
                   100%{box-shadow: 0 0 0 0 rgba(255,107,107,0);}}
@media(prefers-reduced-motion:reduce){.e9-ledger .dot{animation: none;}}
.e9-ledger table{width: 100%; font-size: 0.78125rem; font-variant-numeric: tabular-nums;}
.e9-ledger th{
  background: var(--pan);
  color: var(--mute);
  font-weight: var(--w-wt3);
  padding-top: var(--w-sp7);
  padding-right: var(--w-sp10);
  padding-bottom: var(--w-sp7);
  padding-left: var(--w-sp10);
  text-align: left;
  font-size: 0.65625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.e9-ledger td{padding-top: var(--w-sp7); padding-right: var(--w-sp10); padding-bottom: var(--w-sp7); padding-left: var(--w-sp10); border-top-width: 0.0625rem; border-top-style: solid; border-top-color: rgba(43,48,56,.6);}
.e9-ledger .ph{color: var(--mute);}
.e9-ledger .am{text-align: right; font-weight: var(--w-wt1);}
.e9-ledger .am.in{color: var(--win);}
.e9-ledger .am.out{color: var(--out);}

.e9-ref{
  background: linear-gradient(145deg,#2A1114,#121419);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-top: var(--w-sp15);
  padding-right: var(--w-sp15);
  padding-bottom: var(--w-sp15);
  padding-left: var(--w-sp15);
}
.e9-ref b{display: block; color: var(--gold); font-size: 0.9375rem; margin-bottom: var(--w-sp6);}
.e9-ref p{font-size: 0.8125rem; color: var(--mute); margin-bottom: var(--w-sp11);}

.e9-acct-panel{
  background: var(--ink2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-top: var(--w-sp14);
  padding-right: var(--w-sp14);
  padding-bottom: var(--w-sp14);
  padding-left: var(--w-sp14);
  display: flex;
  flex-direction: column;
  row-gap: var(--w-sp11);
  column-gap: var(--w-sp11);
}
.e9-acct-panel .btns{display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--w-sp8); column-gap: var(--w-sp8);}
.e9-acct-panel .btns .e9-btn{padding-top: var(--w-sp11); padding-right: var(--w-sp6); padding-bottom: var(--w-sp11); padding-left: var(--w-sp6); font-size: 0.8125rem;}
.e9-acct-panel .bal{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  row-gap: var(--w-sp8);
  column-gap: var(--w-sp8);
  padding-top: var(--w-sp10);
  padding-right: var(--w-sp12);
  padding-bottom: var(--w-sp10);
  padding-left: var(--w-sp12);
  background: var(--pan);
  border-radius: var(--w-rad3);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
}
.e9-acct-panel .bal span{font-size: 0.75rem; color: var(--mute);}
.e9-acct-panel .bal b{font-size: 1.1875rem; color: var(--gold); font-variant-numeric: tabular-nums;}
.e9-acct-panel .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--w-sp8);
  column-gap: var(--w-sp8);
  padding-top: var(--w-sp11);
  padding-right: var(--w-sp12);
  padding-bottom: var(--w-sp11);
  padding-left: var(--w-sp12);
  border-radius: var(--w-rad3);
  background: var(--pan);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  min-height: 2.75rem;
}
.e9-acct-panel .row b{font-size: 0.84375rem;}
.e9-acct-panel .row em{font-style: normal; font-size: 0.75rem; color: var(--mute);}
.e9-acct-panel .note{font-size: 0.75rem; color: var(--mute); margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}
.e9-acct-panel .chan{display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--w-sp8); column-gap: var(--w-sp8);}
.e9-acct-panel .ch{
  display: flex;
  flex-direction: column;
  row-gap: var(--w-sp2);
  column-gap: var(--w-sp2);
  padding-top: var(--w-sp9);
  padding-right: var(--w-sp10);
  padding-bottom: var(--w-sp9);
  padding-left: var(--w-sp10);
  border-radius: var(--w-rad3);
  background: var(--pan);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  min-height: 2.75rem;
  justify-content: center;
  min-width: 0;
}
.e9-acct-panel .ch b{font-size: 0.78125rem;}
.e9-acct-panel .ch em{font-style: normal; font-size: 0.65625rem; color: var(--mute);}
.e9-acct-panel .ch.tg b{color: #5ac4ff;}
.e9-acct-panel .ch.wa b{color: var(--redlt);}

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

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

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

/* ---------------------------------------------------------------- registers */
.e9-spin,.e9-live,.e9-odds,.e9-winners,.e9-pool,.e9-wall,.e9-apk{
  max-width: var(--mx);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: var(--w-sp19);
  margin-left: auto;
  padding-top: 0;
  padding-right: var(--w-sp16);
  padding-bottom: 0;
  padding-left: var(--w-sp16);
}
.e9-spin .hd h2,.e9-odds .hd h2,.e9-winners .hd h2{margin-bottom: .3em;}
.e9-spin .hd p,.e9-odds .hd p,.e9-winners .hd p,.e9-live p{color: var(--mute); font-size: 0.875rem; max-width: 66ch;}
.e9-tw{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--rad);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
}
.e9-tbl{
  width: 100%;
  background: var(--ink2);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.e9-tbl th{
  background: var(--pan);
  color: var(--mute);
  text-align: left;
  padding-top: var(--w-sp10);
  padding-right: var(--w-sp13);
  padding-bottom: var(--w-sp10);
  padding-left: var(--w-sp13);
  font-size: 0.71875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.e9-tbl td{padding-top: var(--w-sp10); padding-right: var(--w-sp13); padding-bottom: var(--w-sp10); padding-left: var(--w-sp13); border-top-width: 0.0625rem; border-top-style: solid; border-top-color: rgba(43,48,56,.6);}
.e9-tbl .amt{text-align: right; color: var(--gold); font-weight: var(--w-wt1);}
.e9-live .e9-btn,.e9-spin .e9-btn,.e9-odds .e9-btn,.e9-winners .e9-btn{margin-top: var(--w-sp13);}

/* provider wall */
.e9-wall .logos{display: flex; flex-wrap: wrap; row-gap: var(--w-sp9); column-gap: var(--w-sp9); margin-bottom: var(--w-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. */
.e9-wall .dark{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background: #F4F5F7;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: #D5D9E0;
  border-radius: var(--w-rad3);
  padding-top: var(--w-sp10);
  padding-right: var(--w-sp14);
  padding-bottom: var(--w-sp10);
  padding-left: var(--w-sp14);
  height: 3.375rem;
}
.e9-wall .dark img{max-height: 1.625rem; width: auto; min-width: 0; object-fit: contain;}
.e9-wall .sub{font-size: 0.8125rem; color: var(--mute); margin-top: 0; margin-right: 0; margin-bottom: var(--w-sp8); margin-left: 0;}
.e9-wall .chips{display: flex; flex-wrap: wrap; row-gap: var(--w-sp7); column-gap: var(--w-sp7);}
.e9-wall .chip{
  font-size: 0.75rem;
  color: var(--mute);
  background: var(--pan);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--w-rad6);
  padding-top: var(--w-sp6);
  padding-right: var(--w-sp11);
  padding-bottom: var(--w-sp6);
  padding-left: var(--w-sp11);
}

/* jackpot pool */
.e9-pool{
  text-align: center;
  background: linear-gradient(145deg,#2A1114,#0C0D10);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--gold2);
  border-radius: var(--rad);
  padding-top: var(--w-sp19);
  padding-right: var(--w-sp16);
  padding-bottom: var(--w-sp19);
  padding-left: var(--w-sp16);
  max-width: calc(var(--mx) - 2rem);
}
.e9-pool .jp{display: flex; align-items: baseline; justify-content: center; row-gap: var(--w-sp9); column-gap: var(--w-sp9); margin-bottom: var(--w-sp9);}
.e9-pool .jp span{font-size: 0.875rem; color: var(--mute); letter-spacing: .1em;}
.e9-pool .jp b{
  font-size: clamp(1.75rem,5.5vw,2.875rem);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 1.375rem rgba(192,57,43,.34);
}
.e9-pool p{color: var(--mute); font-size: 0.84375rem; max-width: 62ch; margin-top: 0; margin-right: auto; margin-bottom: var(--w-sp13); margin-left: auto;}

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

/* ---------------------------------------------------------------- page body */
.e9-content{max-width: 53.75rem; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: 0; padding-right: var(--w-sp16); padding-bottom: var(--w-sp21); padding-left: var(--w-sp16);}
.e9-content h2{margin-top: 1.5em;}
.e9-content a{color: var(--gold); text-decoration: underline; text-underline-offset: 0.125rem;}
.e9-kpis{
  display: grid;
  row-gap: var(--w-sp10);
  column-gap: var(--w-sp10);
  grid-template-columns: 1fr 1fr;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1.25rem;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  list-style: none;
}
@media(min-width:640px){.e9-kpis{grid-template-columns: 1fr 1fr 1fr 1fr;}}
.e9-kpis li{background: var(--ink2); border-width: 0.0625rem; border-style: solid; border-color: var(--line); border-radius: var(--w-rad5); padding-top: var(--w-sp13); padding-right: var(--w-sp13); padding-bottom: var(--w-sp13); padding-left: var(--w-sp13);}
.e9-kpis b{display: block; font-size: 1.25rem; color: var(--gold); font-variant-numeric: tabular-nums;}
.e9-kpis span{font-size: 0.75rem; color: var(--mute);}
.e9-steps{list-style: none; counter-reset: s; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 0; margin-right: 0; margin-bottom: var(--w-sp19); margin-left: 0;}
.e9-steps li{counter-increment: s; position: relative; padding-top: 0; padding-right: 0; padding-bottom: var(--w-sp14); padding-left: 2.75rem;}
.e9-steps li::before{
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.9375rem;
  height: 1.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: #1B0608;
  font-weight: var(--w-wt2);
  font-size: 0.875rem;
}
.e9-steps b{display: block; margin-bottom: var(--w-sp3);}
.e9-content .e9-tw{margin-top: 0; margin-right: 0; margin-bottom: var(--w-sp19); margin-left: 0;}
.e9-faq{margin-top: 0; margin-right: 0; margin-bottom: var(--w-sp19); margin-left: 0;}
.e9-faq details{
  background: var(--ink2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--w-rad4);
  padding-top: var(--w-sp12);
  padding-right: var(--w-sp15);
  padding-bottom: var(--w-sp12);
  padding-left: var(--w-sp15);
  margin-bottom: var(--w-sp9);
}
.e9-faq summary{cursor: pointer; font-weight: var(--w-wt1); min-height: 1.75rem;}
.e9-band{
  background: linear-gradient(145deg,#2A1114,#0C0D10);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--gold2);
  border-radius: var(--rad);
  padding-top: var(--w-sp18);
  padding-right: var(--w-sp18);
  padding-bottom: var(--w-sp18);
  padding-left: var(--w-sp18);
  margin-top: 0;
  margin-right: 0;
  margin-bottom: var(--w-sp19);
  margin-left: 0;
  text-align: center;
}
.e9-band b{display: block; font-size: 1.125rem; color: var(--gold); margin-bottom: var(--w-sp6);}
.e9-band p{color: var(--mute); font-size: 0.875rem;}

/* ---------------------------------------------------------------- footer */
.e9-foot{background: #0A0B0E; border-top-width: 0.0625rem; border-top-style: solid; border-top-color: var(--line); padding-top: var(--w-sp21); padding-right: 0; padding-bottom: 6rem; padding-left: 0; margin-top: var(--w-sp21);}
.e9-foot .cols{
  max-width: var(--mx);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 0;
  padding-right: var(--w-sp16);
  padding-bottom: 0;
  padding-left: var(--w-sp16);
  display: grid;
  row-gap: var(--w-sp19);
  column-gap: var(--w-sp19);
  grid-template-columns: 1fr;
}
@media(min-width:760px){.e9-foot .cols{grid-template-columns: 2fr 1fr 1fr;}}
.e9-foot .w h4,.e9-foot .w b{
  font-size: 0.75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: var(--w-sp9);
  margin-left: 0;
}
.e9-foot ul{list-style: none; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}
.e9-foot li{margin-bottom: var(--w-sp6); font-size: 0.84375rem; color: var(--mute);}
.e9-foot .ab{font-size: 0.8125rem; color: var(--mute); max-width: 56ch;}
.e9-foot .e9-logo{margin-bottom: var(--w-sp10);}
.e9-foot .pay,.e9-foot .trust{display: flex; flex-wrap: wrap; row-gap: var(--w-sp8); column-gap: var(--w-sp8); margin-top: var(--w-sp11);}
.e9-foot .pay span,.e9-foot .trust span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background: #F4F5F7;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: #D5D9E0;
  border-radius: var(--w-rad1);
  padding-top: var(--w-sp7);
  padding-right: var(--w-sp10);
  padding-bottom: var(--w-sp7);
  padding-left: var(--w-sp10);
  height: 2.5rem;
}
.e9-foot .pay img,.e9-foot .trust img{max-height: 1.375rem; width: auto; min-width: 0; object-fit: contain;}
.e9-foot .soc{display: flex; flex-wrap: wrap; row-gap: var(--w-sp8); column-gap: var(--w-sp8); margin-top: var(--w-sp11);}
.e9-foot .lic,.e9-foot .rg{font-size: 0.78125rem; color: var(--mute); margin-top: var(--w-sp11); margin-right: 0; margin-bottom: 0; margin-left: 0;}
.e9-foot .cr{
  max-width: var(--mx);
  margin-top: var(--w-sp16);
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: var(--w-sp13);
  padding-right: var(--w-sp16);
  padding-bottom: 0;
  padding-left: var(--w-sp16);
  border-top-width: 0.0625rem;
  border-top-style: solid;
  border-top-color: var(--line);
  font-size: 0.75rem;
  color: var(--mute);
}
.coin{
  display: inline-flex;
  align-items: center;
  row-gap: var(--w-sp6);
  column-gap: var(--w-sp6);
  font-size: 0.8125rem;
  color: var(--gold);
  min-height: 2.75rem;
}

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

/* ---------------------------------------------------------------- entry modal */
.e9-pop{
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6,7,9,.88);
  display: none;
  align-items: center;
  justify-content: center;
  padding-top: var(--w-sp16);
  padding-right: var(--w-sp16);
  padding-bottom: var(--w-sp16);
  padding-left: var(--w-sp16);
}
.e9-pop.on{display: flex;}
.e9-pop .bx{
  position: relative;
  background: var(--ink2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--gold2);
  border-radius: 1rem;
  max-width: 23.75rem;
  width: 100%;
  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 */
.e9-pop .x{
  position: absolute;
  top: 0.5625rem;
  right: 0.5625rem;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--pan);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  color: var(--text);
  z-index: 2;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1;
}
.e9-pop .hd{padding-top: var(--w-sp16); padding-right: var(--w-sp17); padding-bottom: 0; padding-left: var(--w-sp17);}
.e9-pop .panes{overflow-y: auto;}
.e9-pop .pane{padding-top: var(--w-sp17); padding-right: var(--w-sp17); padding-bottom: var(--w-sp17); padding-left: var(--w-sp17);}
.e9-pop .eb{
  display: inline-block;
  font-size: 0.65625rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--w-sp6);
}
.e9-pop .big{
  display: block;
  font-size: 1.625rem;
  color: var(--gold);
  font-weight: var(--w-wt2);
  margin-bottom: var(--w-sp7);
  font-variant-numeric: tabular-nums;
}
.e9-pop p{font-size: 0.875rem; color: var(--mute); margin-bottom: var(--w-sp15);}
.e9-pop .pg{
  display: flex;
  align-items: center;
  row-gap: var(--w-sp8);
  column-gap: var(--w-sp8);
  padding-top: var(--w-sp11);
  padding-right: var(--w-sp16);
  padding-bottom: var(--w-sp11);
  padding-left: var(--w-sp16);
  border-top-width: 0.0625rem;
  border-top-style: solid;
  border-top-color: var(--line);
  background: var(--pan);
}
.e9-pop .pv,.e9-pop .nx{
  width: 2.375rem;
  height: 2.375rem;
  border-radius: var(--w-rad2);
  background: var(--ink2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  color: var(--text);
  cursor: pointer;
  font-size: 0.9375rem;
}
.e9-pop .ct{font-size: 0.75rem; color: var(--mute); margin-left: auto; font-variant-numeric: tabular-nums;}
.e9-pop .dots{display: flex; row-gap: var(--w-sp5); column-gap: var(--w-sp5);}
.e9-pop .dot{
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--line);
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  cursor: pointer;
}
.e9-pop .dot.on{background: var(--gold);}

/* ---------------------------------------------------------------- phones */
@media(max-width:1039px){
  .e9-burger{display: flex;}
  .e9-menu{overflow-x: auto; scrollbar-width: none; justify-content: flex-start;}
  .e9-menu::-webkit-scrollbar{display: none;}
  .e9-menu .pan{display: none !important;}   /* no hover on touch; the bar scrolls instead */
  .e9-acct{
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: var(--w-sp8);
    min-width: 0;
  }
  .e9-acct .e9-btn{flex-grow: 1; flex-shrink: 1; flex-basis: auto; max-width: 11.875rem; min-width: 0;}
  .e9-lang{min-width: 0; 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. */
  .e9-acct{justify-content: flex-start; row-gap: var(--w-sp8); column-gap: var(--w-sp8);}
  .e9-lang{flex-grow: 1; flex-shrink: 1; flex-basis: 100%; order: -1;}
  .e9-acct .e9-btn{flex-grow: 1; flex-shrink: 1; flex-basis: calc(50% - 0.25rem); max-width: none;}
  .e9-lang a{padding-top: var(--w-sp6); padding-right: var(--w-sp9); padding-bottom: var(--w-sp6); padding-left: var(--w-sp9); font-size: 0.71875rem;}
  .e9-floor{padding-top: var(--w-sp12); padding-right: var(--w-sp12); padding-bottom: var(--w-sp12); padding-left: var(--w-sp12);}
  .e9-games{row-gap: var(--w-sp8); column-gap: var(--w-sp8);}
  .e9-ledger table{font-size: 0.71875rem;}
  .e9-ledger td,.e9-ledger th{padding-top: var(--w-sp6); padding-right: var(--w-sp8); padding-bottom: var(--w-sp6); padding-left: var(--w-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. */
.e9-spin .wheel{
  display: flex;
  row-gap: var(--w-sp9);
  column-gap: var(--w-sp9);
  overflow-x: auto;
  padding-top: var(--w-sp3);
  padding-right: var(--w-sp3);
  padding-bottom: var(--w-sp9);
  padding-left: var(--w-sp3);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.e9-spin .sg{
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 5.375rem;
  scroll-snap-align: start;
  background: var(--pan);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--w-rad5);
  padding-top: var(--w-sp12);
  padding-right: var(--w-sp9);
  padding-bottom: var(--w-sp12);
  padding-left: var(--w-sp9);
  text-align: center;
  display: flex;
  flex-direction: column;
  row-gap: var(--w-sp5);
  column-gap: var(--w-sp5);
  min-width: 0;
}
.e9-spin .sg em{font-style: normal; font-size: 0.71875rem; color: var(--mute); letter-spacing: .04em;}
.e9-spin .sg b{
  font-size: 1.0625rem;
  font-weight: var(--w-wt2);
  color: var(--redlt);
  font-variant-numeric: tabular-nums;
}
.e9-spin .sg.pay{
  background: linear-gradient(160deg,#2A1E08,#14161B);
  border-color: var(--gold2);
  box-shadow: 0 0 0 0.0625rem rgba(233,185,73,.2);
}
.e9-spin .sg.pay b{color: var(--gold); font-size: 1.1875rem;}
.e9-spin .sg.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. */
.e9-odds .fxs{display: grid; row-gap: var(--w-sp12); column-gap: var(--w-sp12); grid-template-columns: 1fr;}
@media(min-width:760px){.e9-odds .fxs{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}}
@media(min-width:1100px){.e9-odds .fxs{grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}}
.e9-odds .fx{
  background: var(--ink2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-top: var(--w-sp13);
  padding-right: var(--w-sp13);
  padding-bottom: var(--w-sp13);
  padding-left: var(--w-sp13);
  min-width: 0;
}
.e9-odds .fx .lg{
  display: flex;
  justify-content: space-between;
  align-items: center;
  row-gap: var(--w-sp8);
  column-gap: var(--w-sp8);
  font-size: 0.71875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--w-sp9);
  min-width: 0;
}
.e9-odds .fx .lg b{
  font-weight: var(--w-wt1);
  color: var(--redlt);
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.e9-odds .fx .lg em{font-style: normal; flex-grow: 0; flex-shrink: 0; flex-basis: auto; font-variant-numeric: tabular-nums;}
.e9-odds .fx .tm{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  row-gap: var(--w-sp8);
  column-gap: var(--w-sp8);
  margin-bottom: var(--w-sp11);
  font-size: 0.90625rem;
  font-weight: var(--w-wt3);
  min-width: 0;
}
.e9-odds .fx .tm span{min-width: 0; overflow-wrap: anywhere;}
.e9-odds .fx .tm span:last-child{text-align: right;}
.e9-odds .fx .tm i{font-style: normal; color: var(--mute); font-size: 0.75rem;}
.e9-odds .fx .od{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--w-sp7); column-gap: var(--w-sp7);}
.e9-odds .fx .o{
  background: var(--pan);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--w-rad2);
  padding-top: var(--w-sp8);
  padding-right: var(--w-sp4);
  padding-bottom: var(--w-sp8);
  padding-left: var(--w-sp4);
  text-align: center;
  display: flex;
  flex-direction: column;
  row-gap: var(--w-sp3);
  column-gap: var(--w-sp3);
  min-height: 3rem;
  justify-content: center;
  min-width: 0;
}
.e9-odds .fx .o em{font-style: normal; font-size: 0.6875rem; color: var(--mute);}
.e9-odds .fx .o b{font-size: 0.9375rem; color: var(--gold); font-variant-numeric: tabular-nums;}
.e9-odds .fine{color: var(--mute); font-size: 0.78125rem; margin-top: var(--w-sp12); margin-right: 0; margin-bottom: 0; margin-left: 0;}

/* ---------------------------------------------------------------- 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. */
.e9-winners .pod{display: grid; row-gap: var(--w-sp11); column-gap: var(--w-sp11); grid-template-columns: 1fr;}
@media(min-width:720px){
  .e9-winners .pod{grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); align-items: end;}
  .e9-winners .wn.p1{order: 2;}.e9-winners .wn.p2{order: 1;}.e9-winners .wn.p3{order: 3;}
  .e9-winners .wn.p1{padding-top: var(--w-sp20);}
}
.e9-winners .wn{
  background: var(--ink2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-top: var(--w-sp14);
  padding-right: var(--w-sp14);
  padding-bottom: var(--w-sp14);
  padding-left: var(--w-sp14);
  display: flex;
  flex-direction: column;
  row-gap: var(--w-sp5);
  column-gap: var(--w-sp5);
  align-items: center;
  text-align: center;
  min-width: 0;
}
.e9-winners .wn.p1{border-color: var(--gold2); background: linear-gradient(170deg,#241D08,#171A1F);}
.e9-winners .pl{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--pan);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  font-size: 0.8125rem;
  font-weight: var(--w-wt2);
  color: var(--mute);
}
.e9-winners .wn.p1 .pl{
  background: linear-gradient(160deg,var(--gold),var(--gold2));
  color: #2a2003;
  border-color: var(--gold);
}
.e9-winners .st{font-size: 0.875rem; font-weight: var(--w-wt1); color: var(--redlt); overflow-wrap: anywhere;}
.e9-winners .id{font-size: 0.78125rem; color: var(--mute); font-variant-numeric: tabular-nums;}
.e9-winners .amt{
  font-style: normal;
  font-size: 1.1875rem;
  font-weight: var(--w-wt2);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.e9-winners .x{font-size: 0.75rem; 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. */
.e9-ph{
  max-width: var(--mx);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: var(--w-sp19);
  margin-left: auto;
  padding-top: 0;
  padding-right: var(--w-sp16);
  padding-bottom: 0;
  padding-left: var(--w-sp16);
  display: grid;
  row-gap: var(--w-sp16);
  column-gap: var(--w-sp16);
  grid-template-columns: 1fr;
  align-items: center;
}
@media(min-width:900px){
  .e9-ph{grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); row-gap: var(--w-sp21); column-gap: var(--w-sp21); margin-bottom: 1.75rem;}
  .e9-ph .tx{order: 1;}.e9-ph img{order: 2;}
}
.e9-ph img{
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--rad);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  min-width: 0;
}
.e9-ph .tx{min-width: 0;}
.e9-ph .eb{
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--redlt);
  background: var(--pan);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--w-rad6);
  padding-top: var(--w-sp5);
  padding-right: var(--w-sp11);
  padding-bottom: var(--w-sp5);
  padding-left: var(--w-sp11);
  margin-bottom: var(--w-sp11);
}
.e9-ph h1{margin-bottom: var(--w-sp1);}
.e9-ph .lead{font-size: 0.9375rem; color: var(--mute); margin-bottom: var(--w-sp15); max-width: 60ch;}
.e9-ph .act{display: flex; row-gap: var(--w-sp9); column-gap: var(--w-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. */
.e9-floor .col .e9-odds,.e9-floor .col .e9-winners,.e9-floor .col .e9-spin{max-width: none; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;}
.e9-floor .col .e9-spin .hd h2{font-size: 1.0625rem;}
.e9-floor .col .e9-spin .hd p{font-size: 0.78125rem;}
.e9-floor .col .e9-spin .sg{flex-grow: 1; flex-shrink: 0; flex-basis: 4rem; padding-top: var(--w-sp9); padding-right: var(--w-sp5); padding-bottom: var(--w-sp9); padding-left: var(--w-sp5);}
.e9-floor .col .e9-spin .sg em{font-size: 0.65625rem;}
.e9-floor .col .e9-spin .sg b{font-size: 0.875rem;}
.e9-floor .col .e9-spin .sg.pay b{font-size: 0.9375rem;}
.e9-floor .col .e9-odds .hd h2,.e9-floor .col .e9-winners .hd h2{font-size: 1.0625rem;}
.e9-floor .col .e9-odds .hd p,.e9-floor .col .e9-winners .hd p{font-size: 0.78125rem;}
.e9-floor .col .e9-odds .fxs{grid-template-columns: 1fr;}
.e9-floor .col .e9-winners .pod{grid-template-columns: 1fr;}
.e9-floor .col .e9-winners .wn.p1{padding-top: var(--w-sp14); order: 0;}
.e9-floor .col .e9-winners .wn.p2{order: 0;}
.e9-floor .col .e9-winners .wn.p3{order: 0;}
.e9-floor .col .e9-odds .fine{font-size: 0.71875rem;}
@media(min-width:1040px){
  /* a sticky rail cannot be taller than the viewport or its foot is unreachable */
  .e9-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. */
.e9-lang a{min-height: 2.75rem; display: inline-flex; align-items: center;}
.e9-menu .it>a{min-height: 2.75rem; display: inline-flex; align-items: center;}
.e9-shelf .lnk{min-height: 2.75rem; display: inline-flex; align-items: center; padding-top: 0; padding-right: var(--w-sp4); padding-bottom: 0; padding-left: var(--w-sp4);}
@media(max-width:700px){.e9-lang a{padding-top: var(--w-sp6); padding-right: var(--w-sp12); padding-bottom: var(--w-sp6); padding-left: var(--w-sp12); min-height: 2.75rem;}}
/* 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. */
.e9-foot .cols>div>a{
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.84375rem;
  color: var(--mute);
}
.e9-foot .cols>div>a:hover{color: var(--redlt);}