/* happy888 my: the game floor. Ink ground, crimson for action, gold kept for money,
   bone text. Room by room rather than wallet first: shelves, studios, the Happy Club ladder,
   the RTP board and the draw calendar. Namespace .hy-  Static file, not regenerated.

   Spelling rules for this sheet:
     - The corner radii, the fixed widths and heights, the line heights, the font stacks and
       the durations used more than once are named once in :root as --g-* and called by name
       everywhere else;
     - box properties are written in logical names (block-start, inline-end) so a modifier
       resets the one edge it means to;
     - 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 {
  --crim: #c0380e;
  /* action: the brand's crimson */
  --ink:#14100f;          /* page ground: deep indigo, almost black */
  --ink2:#241a17;         /* raised panel */
  --pan:#1c1513;          /* inset panel */
  --line:#3d2c25;
  --gold:#e0a93b;         /* money, CTAs, the wordmark */
  --gold2:#9c6a14;
  --text:#f3e9dc;
  --mute:#b6a493;
  --win:#4bbf7a;          /* deposits in */
  --out:#e08b3b;          /* withdrawals out */
  --rad:14px;
  --mx:1320px;;

  /* named values used more than once */
  --g-rad1: 8px;
  --g-rad2: 10px;
  --g-rad3: 11px;
  --g-rad4: 12px;
  --g-rad5: 999px;
  --g-sz1: 44px;
  --g-sz2: 100%;
  --g-sz3: 34px;
  --g-sz4: 22px;
  --g-sz5: 30px;
  --g-sz6: 31px;
  --g-sz7: 38px;
  --g-sz8: 40px;
  --g-sz9: 54px;
  --g-sz10: 7px;
  --g-sz11: 9px;
}

*{box-sizing: border-box;}
html{overflow-x: clip;}   /* body-only overflow-x fools Chromium but not iOS */
body{
  margin-block: 0px;
  margin-inline: 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(--g-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-block-start: 0px; margin-inline-end: 0px; margin-block-end: .5em; margin-inline-start: 0px;}
h1{font-size: clamp(25px,4.1vw,42px); letter-spacing: -.01em;}
h2{font-size: clamp(20px,2.7vw,29px);}
h3{font-size: 18px;}
p{margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 1em; margin-inline-start: 0px;}
main{display: block;}
table{border-collapse: collapse;}

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

/* ---------------------------------------------------------------- buttons */
.hy-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: 7px;
  column-gap: 7px;
  padding-block: 11px;
  padding-inline: 18px;
  border-radius: var(--g-rad2);
  font-weight: 700;
  font-size: 14px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  cursor: pointer;
  min-height: var(--g-sz1);
  text-align: center;
}
.hy-btn.p{background: linear-gradient(180deg,#d6481c,var(--crim)); color: #fff5ec; box-shadow: 0 2px 0 rgba(0,0,0,.35);}
.hy-btn.g{
  background: linear-gradient(180deg,var(--gold),var(--gold2));
  color: #1a0f06;
  box-shadow: 0 6px 18px rgba(224,169,59,.22);
}
.hy-btn.o{background: transparent; border-color: var(--gold); color: var(--gold);}
.hy-btn.lg{padding-block: 14px; padding-inline: 24px; font-size: 16px; min-height: 50px;}

/* ---------------------------------------------------------------- chrome */
.hy-head{
  position: static;
  background: linear-gradient(180deg,#211915,#14100f);
  border-block-end-width: 1px;
  border-block-end-style: solid;
  border-block-end-color: var(--line);
}
.hy-head .bar{
  max-width: var(--mx);
  margin-block: 0px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  row-gap: 12px;
  column-gap: 12px;
  padding-block: 10px;
  padding-inline: 16px;
  flex-wrap: wrap;
  row-gap: 10px;
}
/* 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. */
.hy-logo{display: flex; align-items: center; row-gap: 9px; column-gap: 9px; 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. */
.hy-logo svg{flex-grow: 0; flex-shrink: 0; flex-basis: auto; width: var(--g-sz3); height: var(--g-sz3);}
.hy-foot .hy-logo svg{width: var(--g-sz5); height: var(--g-sz5);}
.hy-logo .wm{display: flex; flex-direction: column; line-height: 1.05; min-width: 0px;}
.hy-logo .wm b{
  font-size: 21px;
  color: var(--gold);
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(224,169,59,.35);
}
.hy-logo .wm small{
  font-size: 9.5px;
  color: var(--mute);
  letter-spacing: .11em;
  min-width: 0px;
  overflow-wrap: anywhere;
}
@media(max-width:420px){.hy-logo .wm small{font-size: 8.5px; letter-spacing: .06em;}}
.hy-burger{
  width: var(--g-sz1);
  height: var(--g-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(--g-rad2);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
}
.hy-acct{display: flex; row-gap: 8px; column-gap: 8px; align-items: center; margin-inline-start: auto;}
.hy-lang{display: flex; row-gap: 5px; column-gap: 5px;}
.hy-lang a{
  white-space: nowrap;
  font-size: 12px;
  padding-block: 7px;
  padding-inline: 10px;
  border-radius: var(--g-rad5);
  min-height: var(--g-sz1);
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--mute);
  min-height: var(--g-sz3);
  display: inline-flex;
  align-items: center;
}
.hy-lang a.on{background: var(--gold); color: #1a0f06; border-color: var(--gold); font-weight: 700;}

/* category bar, with the studio panel that drops from each item */
.hy-menu{background: var(--ink2); border-block-end-width: 1px; border-block-end-style: solid; border-block-end-color: var(--line); position: relative;}
.hy-menu{max-width: none; display: flex; justify-content: center;}
.hy-menu .it{position: relative; display: inline-block;}
.hy-menu .it>a{
  display: block;
  padding-block: 12px;
  padding-inline: 15px;
  font-size: 14px;
  color: var(--mute);
  white-space: nowrap;
  border-block-end-width: 2px;
  border-block-end-style: solid;
  border-block-end-color: transparent;
}
.hy-menu .it:hover>a,.hy-menu .it:focus-within>a{color: var(--gold); border-block-end-color: var(--gold);}
.hy-menu .pan{
  display: none;
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 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-block: 12px;
  padding-inline: 12px;
  row-gap: 9px;
  column-gap: 9px;
  flex-wrap: wrap;
}
.hy-menu .it:hover .pan,.hy-menu .it:focus-within .pan{display: flex;}
.hy-menu .pan .dark{
  background: #fbf4ea;
  border-radius: var(--g-rad1);
  padding-block: 8px;
  padding-inline: 11px;
  height: var(--g-sz1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
.hy-menu .pan .dark img{max-height: var(--g-sz4); width: auto; min-width: 0px; object-fit: contain;}

.hy-tick{background: #0e0b0a; border-block-end-width: 1px; border-block-end-style: solid; border-block-end-color: var(--line); overflow-x: hidden; overflow-y: hidden;}
.hy-tick p{
  max-width: var(--mx);
  margin-block: 0px;
  margin-inline: auto;
  padding-block: 7px;
  padding-inline: 16px;
  font-size: 13px;
  color: var(--mute);
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
}

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

/* The hero sits in a ~300px column, so an absolutely positioned caption over a fixed-aspect
   image clips whatever does not fit -- and what it clipped was the H1 and the eyebrow, the two
   things that must never be cut. Stack instead: the picture keeps its aspect, the words sit
   under it in normal flow and the box grows to hold them. */
.hy-hero{
  position: relative;
  border-radius: var(--rad);
  overflow-x: hidden;
  overflow-y: hidden;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  background: var(--ink2);
  display: flex;
  flex-direction: column;
}
.hy-hero img{display: block; width: var(--g-sz2); aspect-ratio: 16/10; object-fit: cover; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.hy-hero .tx{position: static; padding-block-start: 14px; padding-inline-end: 16px; padding-block-end: 16px; padding-inline-start: 16px; background: var(--ink2);}
.hy-hero .eb{
  display: inline-block;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-block-end: 6px;
}
.hy-hero h1{font-size: clamp(20px,2.4vw,26px); margin-block-end: .4em;}
.hy-hero .lead{font-size: 13.5px; color: var(--mute); margin-block-end: 12px;}
.hy-hero .act{display: flex; row-gap: 9px; column-gap: 9px; flex-wrap: wrap;}

/* the live transactions ledger - this brand's signature */
.hy-ledger{
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  overflow-x: hidden;
  overflow-y: hidden;
}
.hy-ledger .hd{
  display: flex;
  align-items: center;
  row-gap: 8px;
  column-gap: 8px;
  padding-block: 10px;
  padding-inline: 13px;
  background: var(--pan);
  border-block-end-width: 1px;
  border-block-end-style: solid;
  border-block-end-color: var(--line);
  font-size: 13px;
}
.hy-ledger .hd em{
  font-style: normal;
  color: #c0380e;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-inline-start: auto;
}
.hy-ledger .dot{
  width: var(--g-sz10);
  height: var(--g-sz10);
  border-radius: 50%;
  background: #c0380e;
  box-shadow: 0 0 0 0 rgba(192,56,14,.7);
  animation-name: c9pulse;
  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 c9pulse{70%{box-shadow: 0 0 0 7px rgba(192,56,14,0);}
                   100%{box-shadow: 0 0 0 0 rgba(192,56,14,0);}}
@media(prefers-reduced-motion:reduce){.hy-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;}}
.hy-ledger table{width: var(--g-sz2); font-size: 12.5px; font-variant-numeric: tabular-nums;}
.hy-ledger th{
  background: var(--pan);
  color: var(--mute);
  font-weight: 600;
  padding-block: 7px;
  padding-inline: 10px;
  text-align: left;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hy-ledger td{padding-block: 7px; padding-inline: 10px; border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: rgba(61,44,37,.6);}
.hy-ledger .ph{color: var(--mute);}
.hy-ledger .am{text-align: right; font-weight: 700;}
.hy-ledger .am.in{color: var(--win);}
.hy-ledger .am.out{color: var(--out);}

.hy-ref{
  background: linear-gradient(145deg,#2e211c,#1f1714);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-block: 15px;
  padding-inline: 15px;
}
.hy-ref b{display: block; color: var(--gold); font-size: 15px; margin-block-end: 6px;}
.hy-ref p{font-size: 13px; color: var(--mute); margin-block-end: 11px;}

.hy-acct-panel{
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  padding-block: 14px;
  padding-inline: 14px;
  display: flex;
  flex-direction: column;
  row-gap: 11px;
  column-gap: 11px;
}
.hy-acct-panel .btns{display: grid; grid-template-columns: 1fr 1fr; row-gap: 8px; column-gap: 8px;}
.hy-acct-panel .btns .hy-btn{padding-block: 11px; padding-inline: 6px; font-size: 13px;}
.hy-acct-panel .bal{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  row-gap: 8px;
  column-gap: 8px;
  padding-block: 10px;
  padding-inline: 12px;
  background: var(--pan);
  border-radius: var(--g-rad2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.hy-acct-panel .bal span{font-size: 12px; color: var(--mute);}
.hy-acct-panel .bal b{font-size: 19px; color: var(--gold); font-variant-numeric: tabular-nums;}
.hy-acct-panel .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: 8px;
  column-gap: 8px;
  padding-block: 11px;
  padding-inline: 12px;
  border-radius: var(--g-rad2);
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  min-height: var(--g-sz1);
}
.hy-acct-panel .row b{font-size: 13.5px;}
.hy-acct-panel .row em{font-style: normal; font-size: 12px; color: var(--mute);}
.hy-acct-panel .note{font-size: 12px; color: var(--mute); margin-block: 0px; margin-inline: 0px;}
.hy-acct-panel .chan{display: grid; grid-template-columns: 1fr 1fr; row-gap: 8px; column-gap: 8px;}
.hy-acct-panel .ch{
  display: flex;
  flex-direction: column;
  row-gap: 1px;
  column-gap: 1px;
  padding-block: 9px;
  padding-inline: 10px;
  border-radius: var(--g-rad2);
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  min-height: var(--g-sz1);
  justify-content: center;
  min-width: 0px;
}
.hy-acct-panel .ch b{font-size: 12.5px;}
.hy-acct-panel .ch em{font-style: normal; font-size: 10.5px; color: var(--mute);}
.hy-acct-panel .ch.tg b{color: #d2693c;}
.hy-acct-panel .ch.wa b{color: #4bbf7a;}

.hy-trust{display: flex; flex-wrap: wrap; row-gap: 8px; column-gap: 8px;}
.hy-trust span{
  display: flex;
  align-items: center;
  row-gap: 6px;
  column-gap: 6px;
  font-size: 12.5px;
  color: var(--mute);
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--g-rad5);
  padding-block: 7px;
  padding-inline: 12px;
}
.hy-trust i{color: var(--gold); font-style: normal;}

/* ---------------------------------------------------------------- shelf */
.hy-shelf{background: var(--ink2); border-width: 1px; border-style: solid; border-color: var(--line); border-radius: var(--rad); padding-block: 14px; padding-inline: 14px;}
.hy-shelf .hd{display: flex; align-items: baseline; row-gap: 10px; column-gap: 10px; margin-block-end: 11px;}
.hy-shelf .hd h2{margin-block: 0px; margin-inline: 0px; font-size: 18px;}
.hy-shelf .lnk{margin-inline-start: auto; font-size: 12.5px; color: var(--gold);}
.hy-shelf .tabs{display: flex; row-gap: 6px; column-gap: 6px; overflow-x: auto; scrollbar-width: none; margin-block-end: 12px;}
.hy-shelf .tabs::-webkit-scrollbar{display: none;}
.hy-shelf .tb{
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--mute);
  padding-block: 9px;
  padding-inline: 14px;
  border-radius: var(--g-rad5);
  font-size: 13px;
  white-space: nowrap;
  min-height: var(--g-sz8);
  cursor: pointer;
}
.hy-shelf .tb.on{background: var(--gold); border-color: var(--gold); color: #1a0f06; font-weight: 700;}
.hy-games{display: grid; row-gap: 10px; column-gap: 10px; grid-template-columns: 1fr 1fr;}
@media(min-width:560px){.hy-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(--g-rad3);
  overflow-x: hidden;
  overflow-y: hidden;
  min-width: 0px;
}
.gc img{display: block; width: var(--g-sz2); aspect-ratio: 1/1; object-fit: cover;}
.gc .mt{padding-block: 7px; padding-inline: 9px; display: flex; flex-direction: column; row-gap: 1px; column-gap: 1px; min-width: 0px;}
.gc .mt b{font-size: 12.5px; white-space: nowrap; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; display: block;}
.gc .mt em{font-style: normal; font-size: 11px; color: var(--gold2);}

/* category tiles */
.hy-cats{display: grid; row-gap: 10px; column-gap: 10px; grid-template-columns: 1fr 1fr;}
@media(min-width:720px){.hy-cats{grid-template-columns: 1fr 1fr 1fr;}}
.hy-cats .tile{
  position: relative;
  border-radius: var(--g-rad4);
  overflow-x: hidden;
  overflow-y: hidden;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  min-width: 0px;
}
.hy-cats .tile img{display: block; width: var(--g-sz2); aspect-ratio: 4/3; object-fit: cover;}
.hy-cats .cap{
  position: absolute;
  inset-block-start: auto;
  inset-inline-end: 0px;
  inset-block-end: 0px;
  inset-inline-start: 0px;
  padding-block: 9px;
  padding-inline: 11px;
  background: linear-gradient(180deg,rgba(20,16,15,0),rgba(20,16,15,.95) 55%);
  display: flex;
  flex-direction: column;
  row-gap: 1px;
  column-gap: 1px;
  min-width: 0px;
}
.hy-cats .cap b{font-size: 13.5px; color: var(--gold);}
.hy-cats .cap em{font-style: normal; font-size: 11.5px; color: var(--mute); line-height: 1.35;}

/* ---------------------------------------------------------------- registers */
.hy-limits,.hy-live,.hy-esp,.hy-pool,.hy-wall,.hy-apk{
  max-width: var(--mx);
  margin-block-start: 0px;
  margin-inline-end: auto;
  margin-block-end: 22px;
  margin-inline-start: auto;
  padding-block: 0px;
  padding-inline: 16px;
}
.hy-limits .hd h2{margin-block-end: .3em;}
.hy-limits .hd p,.hy-live p{color: var(--mute); font-size: 14px; max-width: 66ch;}
.hy-tw{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--rad);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.hy-tbl,.hy-limits table{
  width: var(--g-sz2);
  background: var(--ink2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.hy-limits table{border-width: 1px; border-style: solid; border-color: var(--line); border-radius: var(--rad); overflow-x: hidden; overflow-y: hidden;}
.hy-tbl th,.hy-limits th{
  background: var(--pan);
  color: var(--mute);
  text-align: left;
  padding-block: 10px;
  padding-inline: 13px;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hy-tbl td,.hy-limits td{padding-block: 10px; padding-inline: 13px; border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: rgba(61,44,37,.6);}
.hy-tbl .amt{text-align: right; color: var(--gold); font-weight: 700;}
.hy-live .hy-btn,.hy-limits .hy-btn{margin-block-start: 13px;}

/* provider wall */
.hy-wall .logos{display: flex; flex-wrap: wrap; row-gap: 9px; column-gap: 9px; margin-block-end: 12px;}
/* 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. */
.hy-wall .dark{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background: #fbf4ea;
  border-width: 1px;
  border-style: solid;
  border-color: #e4d6c6;
  border-radius: var(--g-rad2);
  padding-block: 10px;
  padding-inline: 14px;
  height: var(--g-sz9);
}
.hy-wall .dark img{max-height: 26px; width: auto; min-width: 0px; object-fit: contain;}
.hy-wall .sub{font-size: 13px; color: var(--mute); margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 8px; margin-inline-start: 0px;}
.hy-wall .chips{display: flex; flex-wrap: wrap; row-gap: 7px; column-gap: 7px;}
.hy-wall .chip{
  font-size: 12px;
  color: var(--mute);
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--g-rad5);
  padding-block: 6px;
  padding-inline: 11px;
}

/* esports board */
.hy-esp{display: grid; row-gap: 16px; column-gap: 16px; grid-template-columns: 1fr; align-items: center;}
@media(min-width:900px){.hy-esp{grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);}}
.hy-esp .tx .eb{
  display: inline-block;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-block-end: 6px;
}
.hy-esp .tx p{color: var(--mute); font-size: 14.5px;}
.hy-esp .mk{list-style-type: none; list-style-position: outside; list-style-image: none; padding-block: 0px; padding-inline: 0px; margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 15px; margin-inline-start: 0px; display: flex; flex-wrap: wrap; row-gap: 7px; column-gap: 7px;}
.hy-esp .mk li{
  font-size: 12.5px;
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--g-rad5);
  padding-block: 6px;
  padding-inline: 12px;
  color: var(--mute);
}
.hy-esp .ti{display: flex; flex-wrap: wrap; row-gap: 9px; column-gap: 9px; align-content: start;}
.hy-esp .t{
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--gold2);
  border-radius: var(--g-rad2);
  padding-block: 11px;
  padding-inline: 14px;
}
.hy-esp .bk{flex-grow: 1; flex-shrink: 1; flex-basis: 100%; font-size: 12.5px; color: var(--mute); margin-block-start: 4px;}

/* jackpot pool */
.hy-pool{
  text-align: center;
  background: linear-gradient(145deg,#2e211c,#1a1412);
  border-width: 1px;
  border-style: solid;
  border-color: var(--gold2);
  border-radius: var(--rad);
  padding-block: 22px;
  padding-inline: 16px;
  max-width: calc(var(--mx) - 32px);
}
.hy-pool .jp{display: flex; align-items: baseline; justify-content: center; row-gap: 9px; column-gap: 9px; margin-block-end: 9px;}
.hy-pool .jp span{font-size: 14px; color: var(--mute); letter-spacing: .1em;}
.hy-pool .jp b{
  font-size: clamp(28px,5.5vw,46px);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(224,169,59,.3);
}
.hy-pool p{color: var(--mute); font-size: 13.5px; max-width: 62ch; margin-block-start: 0px; margin-inline-end: auto; margin-block-end: 13px; margin-inline-start: auto;}

/* APK block */
.hy-apk{display: grid; row-gap: 16px; column-gap: 16px; grid-template-columns: 1fr; align-items: center;}
@media(min-width:820px){.hy-apk{grid-template-columns: 270px minmax(0,1fr);}}
.hy-apk img{border-radius: var(--rad); border-width: 1px; border-style: solid; border-color: var(--line); width: var(--g-sz2);}
.hy-apk .tx p{color: var(--mute); font-size: 14.5px;}
.hy-apk .meta{display: flex; flex-wrap: wrap; row-gap: 7px; column-gap: 7px; margin-block-end: 13px;}
.hy-apk .meta span{
  font-size: 12px;
  color: var(--mute);
  background: var(--pan);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--g-rad5);
  padding-block: 6px;
  padding-inline: 11px;
}

/* ---------------------------------------------------------------- page body */
.hy-content{max-width: 860px; margin-block: 0px; margin-inline: auto; padding-block-start: 0px; padding-inline-end: 16px; padding-block-end: 26px; padding-inline-start: 16px;}
.hy-content h2{margin-block-start: 1.5em;}
.hy-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;}
.hy-kpis{
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-block-start: 0px;
  margin-inline-end: 0px;
  margin-block-end: 20px;
  margin-inline-start: 0px;
  padding-block: 0px;
  padding-inline: 0px;
  list-style-type: none;
  list-style-position: outside;
  list-style-image: none;
}
@media(min-width:640px){.hy-kpis{grid-template-columns: 1fr 1fr 1fr 1fr;}}
.hy-kpis li{background: var(--ink2); border-width: 1px; border-style: solid; border-color: var(--line); border-radius: var(--g-rad4); padding-block: 13px; padding-inline: 13px;}
.hy-kpis b{display: block; font-size: 20px; color: var(--gold); font-variant-numeric: tabular-nums;}
.hy-kpis span{font-size: 12px; color: var(--mute);}
.hy-steps{list-style-type: none; list-style-position: outside; list-style-image: none; counter-reset: s; padding-block: 0px; padding-inline: 0px; margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 22px; margin-inline-start: 0px;}
.hy-steps li{counter-increment: s; position: relative; padding-block-start: 0px; padding-inline-end: 0px; padding-block-end: 14px; padding-inline-start: 44px;}
.hy-steps li::before{
  content: counter(s);
  position: absolute;
  inset-inline-start: 0px;
  inset-block-start: 0px;
  width: var(--g-sz6);
  height: var(--g-sz6);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: #1a0f06;
  font-weight: 800;
  font-size: 14px;
}
.hy-steps b{display: block; margin-block-end: 2px;}
.hy-content .hy-tw{margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 22px; margin-inline-start: 0px;}
.hy-faq{margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 22px; margin-inline-start: 0px;}
.hy-faq details{
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--g-rad3);
  padding-block: 12px;
  padding-inline: 15px;
  margin-block-end: 9px;
}
.hy-faq summary{cursor: pointer; font-weight: 700; min-height: 28px;}
.hy-band{
  background: linear-gradient(145deg,#2e211c,#1a1412);
  border-width: 1px;
  border-style: solid;
  border-color: var(--gold2);
  border-radius: var(--rad);
  padding-block: 19px;
  padding-inline: 19px;
  margin-block-start: 0px;
  margin-inline-end: 0px;
  margin-block-end: 22px;
  margin-inline-start: 0px;
  text-align: center;
}
.hy-band b{display: block; font-size: 18px; color: var(--gold); margin-block-end: 6px;}
.hy-band p{color: var(--mute); font-size: 14px;}

/* ---------------------------------------------------------------- footer */
.hy-foot{background: #0b0908; border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: var(--line); padding-block-start: 26px; padding-inline-end: 0px; padding-block-end: 96px; padding-inline-start: 0px; margin-block-start: 26px;}
.hy-foot .cols{
  max-width: var(--mx);
  margin-block: 0px;
  margin-inline: auto;
  padding-block: 0px;
  padding-inline: 16px;
  display: grid;
  row-gap: 22px;
  column-gap: 22px;
  grid-template-columns: 1fr;
}
@media(min-width:760px){.hy-foot .cols{grid-template-columns: 2fr 1fr 1fr;}}
.hy-foot .w h4,.hy-foot .w b{
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-block-start: 0px;
  margin-inline-end: 0px;
  margin-block-end: 9px;
  margin-inline-start: 0px;
}
.hy-foot ul{list-style-type: none; list-style-position: outside; list-style-image: none; padding-block: 0px; padding-inline: 0px; margin-block: 0px; margin-inline: 0px;}
.hy-foot li{margin-block-end: 6px; font-size: 13.5px; color: var(--mute);}
.hy-foot .ab{font-size: 13px; color: var(--mute); max-width: 56ch;}
.hy-foot .hy-logo{margin-block-end: 10px;}
.hy-foot .pay,.hy-foot .trust{display: flex; flex-wrap: wrap; row-gap: 8px; column-gap: 8px; margin-block-start: 11px;}
.hy-foot .pay span,.hy-foot .trust span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background: #fbf4ea;
  border-width: 1px;
  border-style: solid;
  border-color: #e4d6c6;
  border-radius: var(--g-rad1);
  padding-block: 7px;
  padding-inline: 10px;
  height: var(--g-sz8);
}
.hy-foot .pay img,.hy-foot .trust img{max-height: var(--g-sz4); width: auto; min-width: 0px; object-fit: contain;}
.hy-foot .soc{display: flex; flex-wrap: wrap; row-gap: 8px; column-gap: 8px; margin-block-start: 11px;}
.hy-foot .lic,.hy-foot .rg{font-size: 12.5px; color: var(--mute); margin-block-start: 11px; margin-inline-end: 0px; margin-block-end: 0px; margin-inline-start: 0px;}
.hy-foot .cr{
  max-width: var(--mx);
  margin-block-start: 16px;
  margin-inline-end: auto;
  margin-block-end: 0px;
  margin-inline-start: auto;
  padding-block-start: 13px;
  padding-inline-end: 16px;
  padding-block-end: 0px;
  padding-inline-start: 16px;
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-start-color: var(--line);
  font-size: 12px;
  color: var(--mute);
}
.coin{
  display: inline-flex;
  align-items: center;
  row-gap: 6px;
  column-gap: 6px;
  font-size: 13px;
  color: var(--gold);
  min-height: var(--g-sz1);
}

/* bottom app bar + sticky CTA */
.hy-bar{
  position: fixed;
  inset-block-start: auto;
  inset-inline-end: 0px;
  inset-block-end: 0px;
  inset-inline-start: 0px;
  z-index: 40;
  background: var(--pan);
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-start-color: var(--line);
  display: flex;
  padding-block-end: env(safe-area-inset-bottom);
}
.hy-bar a{
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 2px;
  column-gap: 2px;
  padding-block: 8px;
  padding-inline: 4px;
  font-size: 10.5px;
  color: var(--mute);
  min-height: var(--g-sz9);
  justify-content: center;
  text-align: center;
}
.hy-bar .i{font-style: normal; font-size: 17px; color: var(--gold);}
@media(min-width:1040px){.hy-bar{display: none;}.hy-foot{padding-block-end: 26px;}}
.hy-scta{position: fixed; inset-block-start: auto; inset-inline-end: 14px; inset-block-end: 64px; inset-inline-start: auto; z-index: 41;}
@media(min-width:1040px){.hy-scta{inset-block-start: auto; inset-inline-end: 20px; inset-block-end: 20px; inset-inline-start: auto;}}

/* ---------------------------------------------------------------- entry modal */
.hy-pop{
  position: fixed;
  inset-block: 0px;
  inset-inline: 0px;
  z-index: 60;
  background: rgba(10,7,6,.84);
  display: none;
  align-items: center;
  justify-content: center;
  padding-block: 16px;
  padding-inline: 16px;
}
.hy-pop.on{display: flex;}
.hy-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(--g-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 */
.hy-pop .x{
  position: absolute;
  inset-block-start: 9px;
  inset-inline-end: 9px;
  width: var(--g-sz3);
  height: var(--g-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: 15px;
  line-height: 1;
}
.hy-pop .hd{padding-block-start: 16px; padding-inline-end: 18px; padding-block-end: 0px; padding-inline-start: 18px;}
.hy-pop .panes{overflow-y: auto;}
.hy-pop .pane{padding-block: 18px; padding-inline: 18px;}
.hy-pop .eb{
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-block-end: 6px;
}
.hy-pop .big{
  display: block;
  font-size: 26px;
  color: var(--gold);
  font-weight: 800;
  margin-block-end: 7px;
  font-variant-numeric: tabular-nums;
}
.hy-pop p{font-size: 14px; color: var(--mute); margin-block-end: 15px;}
.hy-pop .pg{
  display: flex;
  align-items: center;
  row-gap: 8px;
  column-gap: 8px;
  padding-block: 11px;
  padding-inline: 16px;
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-start-color: var(--line);
  background: var(--pan);
}
.hy-pop .pv,.hy-pop .nx{
  width: var(--g-sz7);
  height: var(--g-sz7);
  border-radius: 9px;
  background: var(--ink2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
}
.hy-pop .ct{font-size: 12px; color: var(--mute); margin-inline-start: auto; font-variant-numeric: tabular-nums;}
.hy-pop .dots{display: flex; row-gap: 5px; column-gap: 5px;}
.hy-pop .dot{
  width: var(--g-sz11);
  height: var(--g-sz11);
  border-radius: 50%;
  background: var(--line);
  border-width: 0px;
  border-style: none;
  border-color: currentcolor;
  padding-block: 0px;
  padding-inline: 0px;
  cursor: pointer;
}
.hy-pop .dot.on{background: var(--gold);}

/* ---------------------------------------------------------------- phones */
@media(max-width:1039px){
  .hy-burger{display: flex;}
  .hy-menu{overflow-x: auto; scrollbar-width: none; justify-content: flex-start;}
  .hy-menu::-webkit-scrollbar{display: none;}
  .hy-menu .pan{display: none !important;}   /* no hover on touch; the bar scrolls instead */
  .hy-acct{
    order: 3;
    width: var(--g-sz2);
    margin-inline-start: 0px;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 8px;
    min-width: 0px;
  }
  .hy-acct .hy-btn{flex-grow: 1; flex-shrink: 1; flex-basis: auto; max-width: 190px; min-width: 0px;}
  .hy-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. */
  .hy-acct{justify-content: flex-start; row-gap: 8px; column-gap: 8px;}
  .hy-lang{flex-grow: 1; flex-shrink: 1; flex-basis: 100%; order: -1;}
  .hy-acct .hy-btn{flex-grow: 1; flex-shrink: 1; flex-basis: calc(50% - 4px); max-width: none;}
  .hy-lang a{padding-block: 6px; padding-inline: 9px; font-size: 11.5px;}
  .hy-floor{padding-block: 12px; padding-inline: 12px;}
  .hy-games{row-gap: 8px; column-gap: 8px;}
  .hy-ledger table{font-size: 11.5px;}
  .hy-ledger td,.hy-ledger th{padding-block: 6px; padding-inline: 8px;}
}

/* 44px tap floor on the shelf headers' view-all control (mobile audit). */
.hy-sh .va,.hy-sh a.va,.hy-head .va{min-height: var(--g-sz1); display: inline-flex; align-items: center;}

/* Tap target floor: category nav, shelf headers and footer links all measured 18-23px high
   against the 44px minimum in the mobile audit. Raise the hit area, not the type size. */
.hy-menu .it > a, a.lnk, .hy-drawer a {
  min-height: var(--g-sz1);
  display: inline-flex;
  align-items: center;
}
.hy-menu .it > a {
  padding-block-start: 11px;
  padding-block-end: 11px;
  min-width: 44px;
  justify-content: center;
}
a.lnk {min-width: 44px;}

/* Footer link columns are stacked lists, so the anchor should fill the column rather
   than shrink to the width of a two-character label like 4D. */
.hy-foot .cols a {min-height: var(--g-sz1); display: flex; align-items: center;}