/* happy888 official: the platform. Deep navy ground, ice blue, amber for
   money, deposit green and withdraw red for the two cashier actions. Rebuilt from the live
   happyhappy88king platform: a wallet panel first, odds cards, 4D, a live ledger and a five
   tab bottom bar. Namespace .hk-  Static file: the build does NOT regenerate it.

   The way this sheet is written:
     - The gaps and insets, the corner radii, the fixed widths and heights and the durations
       used more than once are named once in :root as --m-* and called by name everywhere
       else;
     - box properties keep their physical names, one edge per declaration;
     - 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;
     - the font shorthand is opened out into its longhands. */

:root {
  --vio: #061026;
  --vio-2: #0a1733;
  --vio-3: #10254c;
  --vio-4: #173a72;
  --mag: #3f9fff;
  --mag-2: #1657b8;
  --pur: #2f7ad6;
  --pur-2: #1b4f9e;
  --gold: #ffc247;
  --gold-2: #e09b12;
  --ink: #eaf3ff;
  --mut: #9db4d8;
  --line: rgba(99,160,255,.28);
  --dep: #35d07f;
  --wd: #ff6b6b;
  --font: Arial,"Helvetica Neue",Helvetica,"Noto Sans SC",sans-serif;

  /* named values used more than once */
  --m-sp1: 1px;
  --m-sp2: 2px;
  --m-sp3: 3px;
  --m-sp4: 4px;
  --m-sp5: 5px;
  --m-sp6: 6px;
  --m-sp7: 7px;
  --m-sp8: 8px;
  --m-sp9: 9px;
  --m-sp10: 10px;
  --m-sp11: 11px;
  --m-sp12: 12px;
  --m-sp13: 13px;
  --m-sp14: 14px;
  --m-sp15: 15px;
  --m-sp16: 16px;
  --m-sp17: 18px;
  --m-sp18: 20px;
  --m-sp19: 22px;
  --m-sp20: 26px;
  --m-rad1: 3px;
  --m-rad2: 7px;
  --m-rad3: 9px;
  --m-rad4: 11px;
  --m-rad5: 12px;
  --m-rad6: 13px;
  --m-rad7: 14px;
  --m-rad8: 20px;
  --m-sz1: 100%;
  --m-sz2: 44px;
  --m-sz3: 30px;
  --m-sz4: 1460px;
  --m-sz5: 22px;
  --m-sz6: 16px;
  --m-sz7: 24px;
  --m-sz8: 36px;
  --m-sz9: 40px;
  --m-sz10: 4px;
}
*{box-sizing: border-box;}
html{-webkit-text-size-adjust: 100%; overflow-x: clip; max-width: var(--m-sz1);}
body{
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
  padding-bottom: var(--m-sp8);
  background: radial-gradient(1200px 520px at 50% -40px,#15356b 0%,var(--vio-2) 46%,var(--vio) 100%) no-repeat,var(--vio);
}
a{color: var(--mag); text-decoration: none;}
img{max-width: var(--m-sz1); height: auto; display: block;}
h1,h2,h3,h4{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; line-height: 1.25;}
table{border-collapse: collapse; width: var(--m-sz1);}

/* ---------- header ---------- */
.hk-head{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg,#11284f,#091429);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
.hk-head .row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  row-gap: var(--m-sp10);
  column-gap: var(--m-sp10);
  padding-top: var(--m-sp8);
  padding-right: var(--m-sp14);
  padding-bottom: var(--m-sp8);
  padding-left: var(--m-sp14);
  max-width: var(--m-sz4);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}
/* Controls are kept at the 44px tap target on every width, including the language chips. */
.hk-burger{
  justify-self: start;
  background: linear-gradient(180deg,var(--pur),var(--pur-2));
  border: 0;
  color: #fff;
  font-size: 17px;
  line-height: 1;
  min-width: 44px;
  min-height: var(--m-sz2);
  padding-top: 0;
  padding-right: var(--m-sp12);
  padding-bottom: 0;
  padding-left: var(--m-sp12);
  border-radius: var(--m-rad3);
  cursor: pointer;
}
.hk-logo{display: flex; align-items: center; row-gap: var(--m-sp9); column-gap: var(--m-sp9); justify-self: center;}
.hk-logo svg{width: var(--m-sz8); height: var(--m-sz8); flex: none;}
.hk-logo .wm{display: flex; flex-direction: column; line-height: 1;}
.hk-logo .wm b{
  font-family: "Arial Black",Arial,sans-serif;
  font-size: 23px;
  letter-spacing: .01em;
  white-space: nowrap;
  background: linear-gradient(92deg,#6fbcff,#ffc247 62%,#a7d8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hk-logo .wm small{font-size: 8.5px; letter-spacing: .34em; color: var(--mut); font-weight: 700; margin-top: var(--m-sp4); white-space: nowrap;}
.hk-tools{justify-self: end; display: flex; align-items: center; row-gap: var(--m-sp7); column-gap: var(--m-sp7);}
.hk-lang{display: flex; row-gap: var(--m-sp3); column-gap: var(--m-sp3);}
.hk-lang a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--mut);
  border: 1px solid var(--line);
  border-radius: var(--m-rad2);
  min-width: 40px;
  min-height: var(--m-sz2);
  padding-top: 0;
  padding-right: var(--m-sp7);
  padding-bottom: 0;
  padding-left: var(--m-sp7);
  line-height: 1;
  white-space: nowrap;
}
.hk-lang a.on{color: #06182b; background: linear-gradient(180deg,var(--gold),var(--gold-2)); border-color: transparent;}
.hk-tick{
  background: linear-gradient(90deg,var(--gold-2),var(--gold) 45%,#fff3cf);
  color: #06182b;
  overflow-x: hidden;
  overflow-y: hidden;
  font-weight: 800;
  font-size: 12.5px;
  padding-top: var(--m-sp5);
  padding-right: 0;
  padding-bottom: var(--m-sp5);
  padding-left: 0;
  white-space: nowrap;
}
.hk-tick span{display: inline-block; padding-left: 100%; animation-name: kyroll; animation-duration: 34s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running;}
@keyframes kyroll{to{transform: translateX(-100%);}}
@media (prefers-reduced-motion:reduce){.hk-tick span{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; padding-left: var(--m-sp14); white-space: normal;}}
.hk-drawer{display: none; background: #0a1733; border-top: 1px solid var(--line); padding-top: var(--m-sp6); padding-right: var(--m-sp10); padding-bottom: var(--m-sp10); padding-left: var(--m-sp10);}
.hk-drawer a{display: block; color: var(--ink); font-weight: 700; font-size: 14px; padding-top: var(--m-sp10); padding-right: var(--m-sp6); padding-bottom: var(--m-sp10); padding-left: var(--m-sp6); border-bottom: 1px solid var(--line);}
.hk-open .hk-drawer{display: block;}

/* ---------- stage grid ---------- */
.hk-stage{
  display: grid;
  grid-template-columns: 292px minmax(0,1fr) 316px;
  row-gap: var(--m-sp14);
  column-gap: var(--m-sp14);
  align-items: start;
  max-width: var(--m-sz4);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: var(--m-sp14);
  padding-right: var(--m-sp14);
  padding-bottom: var(--m-sp14);
  padding-left: var(--m-sp14);
}
.hk-col{display: grid; row-gap: var(--m-sp12); column-gap: var(--m-sp12); min-width: 0;}
.hk-card{
  background: linear-gradient(180deg,rgba(72,22,140,.72),rgba(28,7,66,.86));
  border: 1px solid var(--line);
  border-radius: var(--m-rad6);
  padding-top: var(--m-sp11);
  padding-right: var(--m-sp11);
  padding-bottom: var(--m-sp11);
  padding-left: var(--m-sp11);
  min-width: 0;
}
.hk-card>.h{display: flex; align-items: center; justify-content: space-between; row-gap: var(--m-sp8); column-gap: var(--m-sp8); margin-top: 0; margin-right: 0; margin-bottom: var(--m-sp9); margin-left: 0;}
.hk-card>.h b{font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--gold);}
.hk-card>.h .live{font-size: 10px; font-weight: 800; color: #fff; background: var(--mag-2); border-radius: var(--m-rad8); padding-top: var(--m-sp3); padding-right: var(--m-sp8); padding-bottom: var(--m-sp3); padding-left: var(--m-sp8);}

/* promo banner */
.hk-promo{position: relative; border-radius: var(--m-rad6); overflow-x: hidden; overflow-y: hidden; border: 1px solid var(--line);}
.hk-promo img{width: var(--m-sz1); aspect-ratio: 16/9; object-fit: cover;}
.hk-promo .ov{
  position: absolute;
  inset: auto 0 0 0;
  padding-top: var(--m-sp12);
  padding-right: var(--m-sp13);
  padding-bottom: var(--m-sp12);
  padding-left: var(--m-sp13);
  background: linear-gradient(180deg,rgba(6,18,38,0),rgba(6,18,38,.88) 58%);
}
.hk-promo .ov strong{display: block; font-size: 17px; line-height: 1.2; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6);}
.hk-promo .ov em{display: block; font-style: normal; font-size: 11.5px; color: var(--gold); margin-top: var(--m-sp4); margin-right: 0; margin-bottom: var(--m-sp9); margin-left: 0; font-weight: 700;}

/* live transaction feed */
.hk-txn table{font-size: 12px;}
.hk-txn th{
  text-align: left;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
  padding-top: 0;
  padding-right: 0;
  padding-bottom: var(--m-sp6);
  padding-left: 0;
  font-weight: 800;
}
.hk-txn td{padding-top: var(--m-sp5); padding-right: 0; padding-bottom: var(--m-sp5); padding-left: 0; border-top: 1px solid rgba(99,160,255,.16); color: #d9e8fb; font-variant-numeric: tabular-nums;}
.hk-txn td.d{color: var(--dep); font-weight: 700;}
.hk-txn td.w{color: var(--wd); font-weight: 700;}
.hk-txn td.a{text-align: right; font-weight: 800; color: #fff;}

/* referral card */
.hk-ref .pct{display: flex; align-items: baseline; row-gap: var(--m-sp7); column-gap: var(--m-sp7); margin-top: 0; margin-right: 0; margin-bottom: var(--m-sp8); margin-left: 0;}
.hk-ref .pct b{font-size: 30px; line-height: 1; color: var(--gold); font-family: "Arial Black",Arial,sans-serif;}
.hk-ref .pct span{font-size: 11.5px; color: var(--mut); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;}
.hk-ref img{width: var(--m-sz1); aspect-ratio: 16/9; object-fit: cover; border-radius: var(--m-rad3); margin-bottom: var(--m-sp9);}
.hk-ref .btns{display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--m-sp7); column-gap: var(--m-sp7);}

/* side strips */
.hk-strip{
  display: flex;
  flex-direction: column;
  row-gap: var(--m-sp2);
  column-gap: var(--m-sp2);
  background: linear-gradient(100deg,#0d6fcf,#46b4ff);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  border-radius: var(--m-rad4);
  padding-top: var(--m-sp11);
  padding-right: var(--m-sp13);
  padding-bottom: var(--m-sp11);
  padding-left: var(--m-sp13);
}
.hk-strip small{font-weight: 600; font-size: 11px; opacity: .9;}
.hk-strip.app{background: linear-gradient(100deg,var(--mag-2),var(--pur));}

/* ---------- centre: categories, providers, games ---------- */
.hk-cats{display: flex; row-gap: var(--m-sp8); column-gap: var(--m-sp8); overflow-x: auto; padding-top: var(--m-sp2); padding-right: var(--m-sp2); padding-bottom: var(--m-sp6); padding-left: var(--m-sp2); scrollbar-width: none;}
.hk-cats::-webkit-scrollbar{display: none;}
.hk-cats a{
  flex: none;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--m-sp5);
  column-gap: var(--m-sp5);
  background: linear-gradient(180deg,rgba(94,33,178,.6),rgba(26,6,60,.8));
  border: 1px solid var(--line);
  border-radius: var(--m-rad4);
  padding-top: var(--m-sp9);
  padding-right: var(--m-sp4);
  padding-bottom: var(--m-sp9);
  padding-left: var(--m-sp4);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.hk-cats a .i{font-size: 21px; line-height: 1;}
.hk-cats a.on{border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset,0 6px 16px rgba(255,200,61,.18);}
.hk-sh{display: flex; align-items: center; justify-content: space-between; row-gap: var(--m-sp10); column-gap: var(--m-sp10); margin-top: var(--m-sp16); margin-right: 0; margin-bottom: var(--m-sp9); margin-left: 0;}
.hk-sh h2{font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: #fff;}
.hk-sh h2:before{
  content: "";
  display: inline-block;
  width: var(--m-sz10);
  height: 14px;
  border-radius: var(--m-rad1);
  margin-right: var(--m-sp8);
  vertical-align: -2px;
  background: linear-gradient(180deg,var(--mag),var(--gold));
}
.hk-sh a{display: inline-flex; align-items: center; min-height: var(--m-sz2); padding-top: 0; padding-right: var(--m-sp4); padding-bottom: 0; padding-left: var(--m-sp4); font-size: 11.5px; font-weight: 800; color: var(--gold);}
.hk-provs{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--m-sp9); column-gap: var(--m-sp9);}
.hk-prov{
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--m-sp6);
  column-gap: var(--m-sp6);
  min-width: 0;
  background: linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: var(--m-rad4);
  padding-top: var(--m-sp10);
  padding-right: var(--m-sp6);
  padding-bottom: var(--m-sp10);
  padding-left: var(--m-sp6);
  color: var(--mut);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.hk-prov .lg{
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--m-sz1);
  height: 52px;
  padding-top: 0;
  padding-right: var(--m-sp10);
  padding-bottom: 0;
  padding-left: var(--m-sp10);
  background: #fff;
  border-radius: var(--m-rad2);
  padding-top: var(--m-sp4);
  padding-right: var(--m-sp4);
  padding-bottom: var(--m-sp4);
  padding-left: var(--m-sp4);
}
.hk-prov .lg.dark{background: #081527; border: 1px solid var(--line);}
.hk-prov .lg img{max-height: var(--m-sz9); max-width: var(--m-sz1); min-width: 0; width: auto; object-fit: contain;}
.hk-prov .lg.t{background: none; color: var(--ink); font-size: 11px; font-weight: 800;}
.hk-prov span{width: var(--m-sz1); overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; white-space: nowrap;}
.hk-games{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--m-sp10); column-gap: var(--m-sp10);}
.hk-game{
  position: relative;
  display: block;
  min-width: 0;
  border-radius: var(--m-rad4);
  overflow-x: hidden;
  overflow-y: hidden;
  border: 1px solid var(--line);
  background: #0a1b35;
}
.hk-game img{width: var(--m-sz1); aspect-ratio: 1/1; object-fit: cover;}
.hk-game .m{padding-top: var(--m-sp7); padding-right: var(--m-sp8); padding-bottom: var(--m-sp8); padding-left: var(--m-sp8); background: linear-gradient(180deg,rgba(26,6,60,.2),#0a1b35);}
.hk-game .m b{display: block; font-size: 11.5px; color: #fff; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; white-space: nowrap;}
.hk-game .m small{
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--m-sp6);
  column-gap: var(--m-sp6);
  margin-top: var(--m-sp3);
  font-size: 9.5px;
  color: var(--mut);
  font-weight: 700;
}
.hk-game .m small i{font-style: normal; color: #06182b; background: var(--gold); border-radius: 4px; padding-top: var(--m-sp1); padding-right: var(--m-sp5); padding-bottom: var(--m-sp1); padding-left: var(--m-sp5); font-weight: 900;}
.hk-tag{
  position: absolute;
  top: 7px;
  left: 7px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #fff;
  background: var(--mag-2);
  border-radius: 5px;
  padding-top: var(--m-sp2);
  padding-right: var(--m-sp6);
  padding-bottom: var(--m-sp2);
  padding-left: var(--m-sp6);
}
.hk-row{display: flex; flex-wrap: wrap; row-gap: var(--m-sp8); column-gap: var(--m-sp8); align-items: center;}
.hk-chip{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 62px;
  background: #fff;
  border-radius: 8px;
  padding-top: var(--m-sp5);
  padding-right: var(--m-sp9);
  padding-bottom: var(--m-sp5);
  padding-left: var(--m-sp9);
}
.hk-chip img{max-height: var(--m-sz5); width: auto; object-fit: contain;}
.hk-chip.t{background: rgba(255,255,255,.08); border: 1px solid var(--line); color: var(--ink); font-size: 11px; font-weight: 800;}

/* ---------- right: wallet panel ---------- */
.hk-wallet .two{display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--m-sp8); column-gap: var(--m-sp8); margin-bottom: var(--m-sp11);}
.hk-bal{background: rgba(4,12,27,.5); border: 1px solid var(--line); border-radius: var(--m-rad4); padding-top: var(--m-sp11); padding-right: var(--m-sp12); padding-bottom: var(--m-sp11); padding-left: var(--m-sp12);}
.hk-bal .k{font-size: 11px; color: var(--mut); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;}
.hk-bal .v{font-size: 27px; font-family: "Arial Black",Arial,sans-serif; color: var(--gold); line-height: 1.15; margin-top: var(--m-sp2); margin-right: 0; margin-bottom: var(--m-sp7); margin-left: 0;}
.hk-bal .meta{font-size: 11.5px; color: var(--mut); line-height: 1.7;}
.hk-bal .meta b{color: #fff;}
.hk-wallet .stack{display: grid; row-gap: var(--m-sp7); column-gap: var(--m-sp7); margin-top: var(--m-sp11);}
.hk-tips{position: relative; border-radius: var(--m-rad6); overflow-x: hidden; overflow-y: hidden; border: 1px solid var(--line);}
.hk-tips img{width: var(--m-sz1); aspect-ratio: 16/9; object-fit: cover;}
.hk-tips .ov{
  position: absolute;
  inset: auto 0 0 0;
  padding-top: var(--m-sp10);
  padding-right: var(--m-sp12);
  padding-bottom: var(--m-sp10);
  padding-left: var(--m-sp12);
  text-align: center;
  background: linear-gradient(180deg,rgba(6,18,38,0),rgba(6,18,38,.9) 60%);
}
.hk-tips .ov b{display: block; font-size: 14px; color: #fff; margin-bottom: var(--m-sp7);}
.hk-floor dl{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; display: grid; row-gap: var(--m-sp1); column-gap: var(--m-sp1); background: rgba(99,160,255,.16); border-radius: var(--m-rad3); overflow-x: hidden; overflow-y: hidden;}
.hk-floor dl>div{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  row-gap: var(--m-sp10);
  column-gap: var(--m-sp10);
  padding-top: var(--m-sp8);
  padding-right: var(--m-sp10);
  padding-bottom: var(--m-sp8);
  padding-left: var(--m-sp10);
  background: rgba(5,15,32,.55);
}
.hk-floor dt{font-size: 11.5px; color: var(--mut); margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}
.hk-floor dd{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; font-size: 13px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums;}
.hk-save li{color: #cfe1f6; font-size: 12px; margin-top: 0; margin-right: 0; margin-bottom: var(--m-sp6); margin-left: 0; line-height: 1.5;}
.hk-save ul{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-left: 17px;}

/* ---------- buttons ---------- */
.hk-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--m-sp6);
  column-gap: var(--m-sp6);
  border-radius: 10px;
  padding-top: var(--m-sp11);
  padding-right: var(--m-sp14);
  padding-bottom: var(--m-sp11);
  padding-left: var(--m-sp14);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  text-align: center;
  border: 0;
  cursor: pointer;
}
.hk-btn.p{background: linear-gradient(180deg,#56aaff,var(--mag-2)); box-shadow: 0 6px 16px rgba(22,87,184,.34);}
.hk-btn.g{background: linear-gradient(180deg,var(--gold),var(--gold-2)); color: #06182b;}
.hk-btn.o{background: rgba(255,255,255,.07); border: 1px solid var(--line); color: var(--ink);}
.hk-btn.lg{padding-top: var(--m-sp14); padding-right: var(--m-sp19); padding-bottom: var(--m-sp14); padding-left: var(--m-sp19); font-size: 15px; border-radius: var(--m-rad5);}
.hk-btn.w{width: var(--m-sz1);}
.hk-pill{
  display: inline-flex;
  align-items: center;
  border-radius: var(--m-rad8);
  padding-top: var(--m-sp8);
  padding-right: var(--m-sp16);
  padding-bottom: var(--m-sp8);
  padding-left: var(--m-sp16);
  font-weight: 800;
  font-size: 12.5px;
  color: #06182b;
  background: linear-gradient(180deg,var(--gold),var(--gold-2));
}

/* ---------- article / inner pages ---------- */
.hk-content{max-width: 1120px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: var(--m-sp18); padding-right: var(--m-sp16); padding-bottom: 34px; padding-left: var(--m-sp16);}
.hk-content h1{font-size: 30px; letter-spacing: -.01em; color: #fff;}
.hk-content h2{font-size: 21px; margin-top: var(--m-sp20); margin-right: 0; margin-bottom: var(--m-sp9); margin-left: 0; color: #fff;}
.hk-content h2:before{
  content: "";
  display: inline-block;
  width: var(--m-sz10);
  height: 17px;
  border-radius: var(--m-rad1);
  margin-right: var(--m-sp9);
  vertical-align: -2px;
  background: linear-gradient(180deg,var(--mag),var(--gold));
}
.hk-content p{margin-top: 0; margin-right: 0; margin-bottom: var(--m-sp13); margin-left: 0; color: #d4e4f8;}
.hk-content ul{margin-top: 0; margin-right: 0; margin-bottom: var(--m-sp14); margin-left: 0; padding-left: var(--m-sp18); color: #d4e4f8;}
.hk-content li{margin-top: 0; margin-right: 0; margin-bottom: var(--m-sp6); margin-left: 0;}
.hk-content .lead{font-size: 16.5px; color: #e9f2fd;}
.hk-ph{display: grid; grid-template-columns: minmax(0,1fr) 332px; row-gap: var(--m-sp19); column-gap: var(--m-sp19); align-items: center; margin-bottom: var(--m-sp8);}
.hk-ph .eb{
  display: inline-block;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius: var(--m-rad8);
  padding-top: var(--m-sp5);
  padding-right: var(--m-sp11);
  padding-bottom: var(--m-sp5);
  padding-left: var(--m-sp11);
  margin-bottom: var(--m-sp11);
}
.hk-ph .act{display: flex; flex-wrap: wrap; row-gap: var(--m-sp9); column-gap: var(--m-sp9); margin-top: var(--m-sp15);}
.hk-ph>img{width: var(--m-sz1); aspect-ratio: 4/3; object-fit: cover; border-radius: var(--m-rad7); border: 1px solid var(--line);}
.hk-kpis{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--m-sp10); column-gap: var(--m-sp10); margin-top: var(--m-sp17); margin-right: 0; margin-bottom: var(--m-sp6); margin-left: 0;}
.hk-kpis>div{
  background: linear-gradient(180deg,rgba(94,33,178,.5),rgba(26,6,60,.72));
  border: 1px solid var(--line);
  border-radius: var(--m-rad5);
  padding-top: var(--m-sp13);
  padding-right: var(--m-sp12);
  padding-bottom: var(--m-sp13);
  padding-left: var(--m-sp12);
  min-width: 0;
}
.hk-kpis b{display: block; font-size: 21px; color: var(--gold); font-family: "Arial Black",Arial,sans-serif; line-height: 1.2;}
.hk-kpis span{display: block; font-size: 11.5px; color: var(--mut); margin-top: var(--m-sp3);}
.hk-steps{counter-reset: ky; margin-top: 0; margin-right: 0; margin-bottom: var(--m-sp16); margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; list-style: none;}
.hk-steps li{
  counter-increment: ky;
  position: relative;
  padding-top: var(--m-sp11);
  padding-right: var(--m-sp12);
  padding-bottom: var(--m-sp11);
  padding-left: 46px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: var(--m-sp8);
  margin-left: 0;
  color: #d4e4f8;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: var(--m-rad4);
}
.hk-steps li:before{
  content: counter(ky);
  position: absolute;
  left: 12px;
  top: 10px;
  width: var(--m-sz7);
  height: var(--m-sz7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 12px;
  color: #06182b;
  background: linear-gradient(180deg,var(--gold),var(--gold-2));
}
.hk-tw{overflow-x: auto; margin-top: 0; margin-right: 0; margin-bottom: var(--m-sp16); margin-left: 0;}
.hk-tbl{font-size: 13.5px; min-width: 440px;}
.hk-tbl th{
  text-align: left;
  padding-top: var(--m-sp10);
  padding-right: var(--m-sp12);
  padding-bottom: var(--m-sp10);
  padding-left: var(--m-sp12);
  background: linear-gradient(180deg,var(--pur),var(--pur-2));
  color: #fff;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hk-tbl td{padding-top: var(--m-sp10); padding-right: var(--m-sp12); padding-bottom: var(--m-sp10); padding-left: var(--m-sp12); border-top: 1px solid var(--line); color: #d4e4f8;}
.hk-tbl tr:nth-child(even) td{background: rgba(255,255,255,.035);}
.hk-faq{margin-top: 0; margin-right: 0; margin-bottom: var(--m-sp17); margin-left: 0;}
.hk-faq details{border: 1px solid var(--line); border-radius: var(--m-rad4); padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 0; margin-right: 0; margin-bottom: var(--m-sp8); margin-left: 0; background: rgba(255,255,255,.04);}
.hk-faq summary{cursor: pointer; padding-top: var(--m-sp12); padding-right: var(--m-sp14); padding-bottom: var(--m-sp12); padding-left: var(--m-sp14); font-weight: 800; color: #fff; font-size: 14px; list-style: none;}
.hk-faq summary::-webkit-details-marker{display: none;}
.hk-faq summary:after{content: "+"; float: right; color: var(--gold); font-weight: 900;}
.hk-faq details[open] summary:after{content: "\2013";}
.hk-faq p{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: var(--m-sp14); padding-bottom: var(--m-sp13); padding-left: var(--m-sp14); color: #cfe1f6; font-size: 13.5px;}
.hk-band{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--m-sp14);
  column-gap: var(--m-sp14);
  margin-top: var(--m-sp19);
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: var(--m-sp17);
  padding-right: var(--m-sp18);
  padding-bottom: var(--m-sp17);
  padding-left: var(--m-sp18);
  border-radius: var(--m-rad7);
  border: 1px solid var(--line);
  background: linear-gradient(100deg,rgba(22,87,184,.4),rgba(47,122,214,.32));
}
.hk-band b{font-size: 17px; color: #fff; max-width: 46ch;}

/* ---------- footer ---------- */
.hk-foot{background: linear-gradient(180deg,#081629,#040c1b); border-top: 1px solid var(--line); margin-top: var(--m-sp19);}
.hk-foot .w{max-width: var(--m-sz4); margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: var(--m-sp20); padding-right: var(--m-sp16); padding-bottom: var(--m-sp19); padding-left: var(--m-sp16);}
.hk-foot .cols{display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; row-gap: var(--m-sp19); column-gap: var(--m-sp19);}
.hk-foot h4{font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-top: 0; margin-right: 0; margin-bottom: var(--m-sp11); margin-left: 0;}
.hk-foot a{display: flex; align-items: center; min-height: var(--m-sz2); color: #b9cfe8; font-size: 13px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}
.hk-foot p{color: var(--mut); font-size: 13px;}
.hk-foot .soc{display: flex; row-gap: var(--m-sp9); column-gap: var(--m-sp9); margin-top: var(--m-sp13);}
.hk-foot .soc a{
  width: var(--m-sz2);
  height: var(--m-sz2);
  border-radius: var(--m-rad3);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}
.hk-foot .soc svg{width: var(--m-sz6); height: var(--m-sz6); fill: #d6e6fa;}
.hk-foot .pay,.hk-foot .trust{display: flex; flex-wrap: wrap; row-gap: var(--m-sp8); column-gap: var(--m-sp8); align-items: center; margin-top: var(--m-sp17);}
.hk-foot .pay span,.hk-foot .trust span{
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--m-sz3);
  background: #fff;
  border-radius: var(--m-rad2);
  padding-top: var(--m-sp4);
  padding-right: var(--m-sp8);
  padding-bottom: var(--m-sp4);
  padding-left: var(--m-sp8);
}
.hk-foot .pay img,.hk-foot .trust img{max-height: 20px; width: auto; object-fit: contain;}
.hk-foot .legal{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: var(--m-sp10);
  column-gap: var(--m-sp10);
  margin-top: var(--m-sp18);
  padding-top: var(--m-sp15);
  border-top: 1px solid var(--line);
  color: var(--mut);
  font-size: 12px;
}
.hk-foot .age{
  display: inline-grid;
  place-items: center;
  width: var(--m-sz5);
  height: var(--m-sz5);
  border-radius: 50%;
  background: var(--mag-2);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  margin-right: var(--m-sp7);
  vertical-align: -6px;
}

/* ---------- bottom app nav + sticky cta ---------- */
.hk-nav{display: none;}
.hk-scta{display: none;}

/* ---------- entry popup ---------- */
.hk-pop{
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6,1,16,.82);
  display: none;
  align-items: center;
  justify-content: center;
  padding-top: var(--m-sp16);
  padding-right: var(--m-sp16);
  padding-bottom: var(--m-sp16);
  padding-left: var(--m-sp16);
}
.hk-pop.on{display: flex;}
.hk-pop .bx{
  position: relative;
  width: min(760px,100%);
  max-height: 92vh;
  overflow-x: auto;
  overflow-y: auto;
  border-radius: 16px;
  padding-top: var(--m-sp16);
  padding-right: var(--m-sp16);
  padding-bottom: var(--m-sp16);
  padding-left: var(--m-sp16);
  display: grid;
  grid-template-columns: 200px minmax(0,1fr);
  row-gap: var(--m-sp14);
  column-gap: var(--m-sp14);
  border: 1px solid var(--line);
  background: linear-gradient(180deg,#12294f,#071324);
}
.hk-pop .tb{display: flex; flex-direction: column; row-gap: var(--m-sp7); column-gap: var(--m-sp7);}
.hk-pop .tb button{
  text-align: left;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: #c9dcf2;
  padding-top: var(--m-sp11);
  padding-right: var(--m-sp12);
  padding-bottom: var(--m-sp11);
  padding-left: var(--m-sp12);
  font-style: normal;
  font-variant: normal;
  font-weight: 800;
  font-stretch: normal;
  font-size: 12.5px;
  line-height: normal;
  font-family: var(--font);
  border-radius: var(--m-rad3);
  cursor: pointer;
}
.hk-pop .tb button.on{background: linear-gradient(180deg,var(--mag),var(--mag-2)); color: #fff; border-color: transparent;}
.hk-pop .im img{width: var(--m-sz1); height: auto; max-height: 52vh; object-fit: contain; border-radius: var(--m-rad4); background: #050f20;}
.hk-pop .cap{text-align: center; margin-top: var(--m-sp11);}
.hk-pop .cap b{display: block; font-size: 18px; color: #fff;}
.hk-pop .cap span{display: block; font-size: 12.5px; color: var(--mut); margin-top: var(--m-sp5); margin-right: 0; margin-bottom: var(--m-sp11); margin-left: 0;}
.hk-pop .x{
  position: absolute;
  top: 8px;
  right: 10px;
  width: var(--m-sz3);
  height: var(--m-sz3);
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.4);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
/* must beat `.hk-pop .cap` (0,2,0); a bare .hk-hide is (0,1,0) and loses */
.hk-hide{display: none;}
.hk-pop .cap.hk-hide,.hk-pop .pane>.hk-hide{display: none;}

/* ---------- responsive ---------- */
@media(max-width:1340px){
  .hk-stage{grid-template-columns: 256px minmax(0,1fr) 288px;}
  .hk-games{grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}
  .hk-provs{grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}
}
@media(max-width:1100px){
  .hk-stage{grid-template-columns: minmax(0,1fr) 300px;}
  .hk-col.l{grid-column: 1/-1; grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
  .hk-col.l .hk-promo{grid-column: 1/-1;}
  .hk-ph{grid-template-columns: minmax(0,1fr) 264px; row-gap: var(--m-sp16); column-gap: var(--m-sp16);}
  .hk-kpis{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
}
@media(max-width:860px){
  body{padding-bottom: 116px;}
  .hk-stage{grid-template-columns: minmax(0,1fr); padding-top: var(--m-sp12); padding-right: var(--m-sp12); padding-bottom: var(--m-sp12); padding-left: var(--m-sp12);}
  .hk-col.l{grid-template-columns: minmax(0,1fr);}
  .hk-content{padding-top: var(--m-sp17); padding-right: var(--m-sp14); padding-bottom: 30px; padding-left: var(--m-sp14);}
  .hk-content h1{font-size: 25px;}
  .hk-content h2{font-size: 19px;}
  .hk-ph{grid-template-columns: minmax(0,1fr); row-gap: var(--m-sp14); column-gap: var(--m-sp14);}
  .hk-ph>img{order: -1; aspect-ratio: 16/10;}
  .hk-games{grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}
  .hk-provs{grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}
  .hk-foot .cols{grid-template-columns: 1fr 1fr;}
  .hk-band{padding-top: var(--m-sp16); padding-right: var(--m-sp16); padding-bottom: var(--m-sp16); padding-left: var(--m-sp16);}
  .hk-band b{font-size: 15px;}
  .hk-pop .bx{grid-template-columns: minmax(0,1fr);}
  .hk-pop .tb{flex-direction: row; overflow-x: auto;}
  .hk-pop .tb button{flex: none;}
  .hk-nav{
    display: grid;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    height: 56px;
    background: linear-gradient(180deg,#16356a,#081528);
    border-top: 1px solid var(--line);
  }
  .hk-nav a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: var(--m-sp2);
    column-gap: var(--m-sp2);
    color: #d6e6fa;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
  }
  .hk-nav a .i{font-size: 18px; line-height: 1;}
  .hk-nav a.on{color: var(--gold);}
  .hk-scta{
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 56px;
    z-index: 59;
    padding-top: var(--m-sp8);
    padding-right: var(--m-sp10);
    padding-bottom: var(--m-sp8);
    padding-left: var(--m-sp10);
    background: rgba(7,20,41,.95);
    border-top: 1px solid var(--line);
  }
  .hk-scta a{display: flex; width: var(--m-sz1); justify-content: center; font-size: 15px; padding-top: var(--m-sp12); padding-right: var(--m-sp12); padding-bottom: var(--m-sp12); padding-left: var(--m-sp12); border-radius: var(--m-rad4);}
}
@media(max-width:560px){
  .hk-head .row{padding-top: var(--m-sp7); padding-right: var(--m-sp10); padding-bottom: var(--m-sp7); padding-left: var(--m-sp10); row-gap: var(--m-sp6); column-gap: var(--m-sp6);}
  .hk-logo .wm b{font-size: 19px;}
  .hk-logo svg{width: var(--m-sz3); height: var(--m-sz3);}
  .hk-lang a{min-width: 38px; padding-top: 0; padding-right: var(--m-sp5); padding-bottom: 0; padding-left: var(--m-sp5); font-size: 11px;}
  .hk-games{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
  .hk-provs{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
  .hk-foot .cols{grid-template-columns: 1fr;}
  .hk-content h1{font-size: 22px;}
  .hk-kpis{row-gap: var(--m-sp8); column-gap: var(--m-sp8);}
  .hk-kpis b{font-size: 19px;}
}

/* Footer payment and certification marks were set on 24px chips and read as specks.
   Same treatment: taller chip, the mark allowed most of the width. */
.hk-foot .pay span, .hk-foot .trust span {height: var(--m-sz9); padding-top: 0; padding-right: var(--m-sp10); padding-bottom: 0; padding-left: var(--m-sp10);}
.hk-foot .pay img, .hk-foot .trust img {
  max-height: 28px;
  max-width: var(--m-sz1);
  min-width: 0;
  width: auto;
  object-fit: contain;
}

/* Small phones. Burger, lockup and language pills are all nowrap with their own minimums, so at
   320 the head row measured 330px and dragged the document sideways. Trim the wordmark and the
   pills; every control keeps its touch height. */
@media(max-width:400px){
  .hk-head .row{row-gap: var(--m-sp4); column-gap: var(--m-sp4);}
  .hk-logo{row-gap: var(--m-sp6); column-gap: var(--m-sp6);}
  .hk-logo .wm b{font-size: 17px;}
  .hk-logo .wm small{font-size: 8px; letter-spacing: .2em;}
  .hk-lang a{min-width: 32px; padding-top: 0; padding-right: var(--m-sp4); padding-bottom: 0; padding-left: var(--m-sp4);}
}