/* TOTO88 live-table casino, shell B: a phone column on an ink field.
   Deep plum #3A0A11, magenta #E06A12, gold #FFC94D, ink #1B0509.
   Section order B: hero, category rail, jackpot, game grid, live ticker, VIP ladder,
   payments, app, FAQ, trust. Hand written, namespaced .tz-

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

:root {
  --ink: #1B0509;
  --plum: #3A0A11;
  --plum-2: #4A0D14;
  --plum-3: #5E1119;
  --plum-4: #73161F;
  --mag: #E06A12;
  --mag-2: #B4500A;
  --mag-3: #F2954A;
  --gold: #FFC94D;
  --gold-2: #C9951F;
  --gold-3: #FFE09A;
  --txt: #FBEFE4;
  --soft: #E8D2BE;
  --mut: #C4A58C;
  --line: rgba(255,201,77,.24);
  --line-2: rgba(251,239,228,.09);
  --mline: rgba(224,106,18,.34);
  --ok: #4ADE9B;
  --col: 512px;
  --bar: 64px;
  --pad: 14px;
  --font: "Trebuchet MS","Segoe UI",Roboto,"Noto Sans SC","PingFang SC",Arial,sans-serif;

  /* named values used more than once */
  --u-sp1: 1px;
  --u-sp2: 2px;
  --u-sp3: 3px;
  --u-sp4: 4px;
  --u-sp5: 5px;
  --u-sp6: 6px;
  --u-sp7: 7px;
  --u-sp8: 8px;
  --u-sp9: 9px;
  --u-sp10: 10px;
  --u-sp11: 11px;
  --u-sp12: 12px;
  --u-sp13: 13px;
  --u-sp14: 14px;
  --u-sp15: 15px;
  --u-sp16: 16px;
  --u-sp17: 18px;
  --u-sp18: 19px;
  --u-sp19: 20px;
  --u-sp20: 24px;
  --u-fs1: 8.5px;
  --u-fs2: 9.5px;
  --u-fs3: 10px;
  --u-fs4: 10.5px;
  --u-fs5: 11px;
  --u-fs6: 11.5px;
  --u-fs7: 12px;
  --u-fs8: 12.5px;
  --u-fs9: 13px;
  --u-fs10: 13.5px;
  --u-fs11: 14px;
  --u-fs12: 17px;
  --u-fs13: 18px;
  --u-fs14: 20px;
  --u-fs15: 21px;
  --u-fs16: 25px;
  --u-lh1: 1;
  --u-lh2: 1.55;
  --u-lh3: 1.6;
}
*{box-sizing: border-box;}
html{-webkit-text-size-adjust: 100%; overflow-x: clip; max-width: 100%;}
body{
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  color: var(--txt);
  font-family: var(--font);
  line-height: 1.62;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: calc(var(--bar) + 20px);
  padding-left: 0px;
  background: radial-gradient(760px 420px at 12% -40px,rgba(224,106,18,.20),transparent 70%),
    radial-gradient(640px 380px at 88% 8%,rgba(255,201,77,.12),transparent 72%),
    var(--ink);
}
a{color: var(--gold); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
img,svg{max-width: 100%; display: block;}
img{height: auto;}
h1,h2,h3,h4{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 1.3;}
table{border-collapse: collapse; width: 100%;}
.tz-note{margin-top: var(--u-sp10); margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--u-fs6); color: var(--mut); line-height: var(--u-lh2);}

/* The whole site is one handset-width column, on a monitor as much as on a phone. */
.tz-shell{
  width: min(var(--col),100%);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  background: var(--plum);
  min-height: 100vh;
  box-shadow: 0 0 0 1px var(--line-2),0 30px 90px rgba(0,0,0,.6);
}

/* ---------- brand art slots ---------- */
.tz-art{width: 100%; height: auto; object-fit: cover; border-radius: 0px;}
.tz-art.hr{aspect-ratio: 2/1; border-radius: 0px;}
.tz-art.mh{aspect-ratio: 16/9; border-radius: 16px 16px 0px 0px;}
.tz-art.ap{aspect-ratio: 4/3; border-radius: 14px; min-width: 0px;}

/* ---------- buttons ---------- */
.tz-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--u-sp8);
  column-gap: var(--u-sp8);
  min-height: 46px;
  padding-top: 0px;
  padding-right: var(--u-sp18);
  padding-bottom: 0px;
  padding-left: var(--u-sp18);
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--u-fs11);
  border-width: 1.5px;
  border-style: solid;
  border-color: transparent;
  text-align: center;
  line-height: 1.2;
  letter-spacing: .01em;
}
.tz-btn.p{
  background: linear-gradient(104deg,var(--mag),var(--mag-2));
  color: #fff;
  box-shadow: 0 6px 18px rgba(224,106,18,.34);
}
.tz-btn.g{background: linear-gradient(104deg,var(--gold-3),var(--gold-2)); color: #3A0A11;}
.tz-btn.o{background: transparent; color: var(--gold); border-color: var(--line);}
.tz-btn.w{width: 100%;}

/* ---------- header ---------- */
.tz-head{position: sticky; top: 0px; z-index: 40; background: var(--ink);}
.tz-head .util{
  display: flex;
  align-items: center;
  row-gap: var(--u-sp10);
  column-gap: var(--u-sp10);
  padding-top: var(--u-sp6);
  padding-right: var(--pad);
  padding-bottom: var(--u-sp6);
  padding-left: var(--pad);
  font-size: var(--u-fs5);
  color: var(--mut);
  background: #140407;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--line-2);
}
.tz-head .util .dom{font-weight: 700; color: var(--gold); flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.tz-head .util .tag{flex-grow: 1; flex-shrink: 1; flex-basis: 0%; min-width: 0px; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; white-space: nowrap;}
.tz-head .lang{display: flex; row-gap: var(--u-sp4); column-gap: var(--u-sp4); flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.tz-head .lang a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 30px;
  border-radius: 999px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
  color: var(--mut);
  font-size: var(--u-fs4);
  font-weight: 700;
  padding-top: 0px;
  padding-right: var(--u-sp7);
  padding-bottom: 0px;
  padding-left: var(--u-sp7);
  white-space: nowrap;
}
.tz-head .lang a.on{background: var(--mag); color: #fff; border-color: transparent;}
.tz-head .bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--u-sp12);
  column-gap: var(--u-sp12);
  padding-top: var(--u-sp9);
  padding-right: var(--pad);
  padding-bottom: var(--u-sp9);
  padding-left: var(--pad);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--mline);
}
.tz-logo{display: flex; align-items: center; row-gap: var(--u-sp9); column-gap: var(--u-sp9); min-width: 0px;}
.tz-logo svg{width: 33px; height: 33px; flex-grow: 0; flex-shrink: 0; flex-basis: auto; min-width: 0px;}
.tz-logo b{
  font-size: var(--u-fs14);
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
  background: linear-gradient(96deg,var(--gold-3),var(--gold) 42%,var(--mag));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tz-head .acts{display: flex; row-gap: var(--u-sp8); column-gap: var(--u-sp8); flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.tz-head .acts .tz-btn{min-height: 38px; padding-top: 0px; padding-right: var(--u-sp15); padding-bottom: 0px; padding-left: var(--u-sp15); font-size: var(--u-fs8);}

/* ---------- 1. hero ---------- */
.tz-hero{position: relative; margin-top: 0px; margin-right: 0px; margin-bottom: var(--u-sp17); margin-left: 0px;}
.tz-hero .bd{
  position: relative;
  display: grid;
  row-gap: var(--u-sp11);
  column-gap: var(--u-sp11);
  padding-top: var(--u-sp16);
  padding-right: var(--pad);
  padding-bottom: var(--u-sp19);
  padding-left: var(--pad);
  margin-top: var(--u-sp12);
  margin-right: var(--pad);
  margin-bottom: 0px;
  margin-left: var(--pad);
  border-radius: 20px;
  background: linear-gradient(170deg,rgba(74,13,20,.97),rgba(27,5,9,.98));
  border-width: 1px;
  border-style: solid;
  border-color: var(--mline);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.tz-hero .eb{
  font-size: var(--u-fs3);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mag-3);
}
.tz-hero h1{font-size: var(--u-fs16); font-weight: 800; letter-spacing: -.01em;}
.tz-hero p.lead{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--u-fs11); color: var(--soft); line-height: var(--u-lh3);}
.tz-hero .act{display: flex; flex-wrap: wrap; row-gap: var(--u-sp10); column-gap: var(--u-sp10); margin-top: var(--u-sp3);}
.tz-hero .act .tz-btn{flex-grow: 1; flex-shrink: 1; flex-basis: auto; min-width: 0px;}
.tz-hero .hint{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--u-fs6); color: var(--mut);}

/* ---------- 2. category rail ---------- */
.tz-rail{margin-top: 0px; margin-right: 0px; margin-bottom: var(--u-sp19); margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;}
.tz-rail .tr{
  display: flex;
  row-gap: var(--u-sp9);
  column-gap: var(--u-sp9);
  overflow-x: auto;
  padding-top: var(--u-sp2);
  padding-right: var(--pad);
  padding-bottom: var(--u-sp10);
  padding-left: var(--pad);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.tz-rail .tr::-webkit-scrollbar{display: none;}
.tz-rail a{
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  scroll-snap-align: start;
  display: grid;
  justify-items: center;
  row-gap: var(--u-sp6);
  column-gap: var(--u-sp6);
  min-width: 74px;
  padding-top: var(--u-sp11);
  padding-right: var(--u-sp10);
  padding-bottom: var(--u-sp11);
  padding-left: var(--u-sp10);
  border-radius: 16px;
  background: var(--plum-2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
  color: var(--txt);
  font-size: var(--u-fs5);
  font-weight: 700;
  text-align: center;
}
.tz-rail a span{font-size: var(--u-fs15); line-height: var(--u-lh1);}
.tz-rail a.on{border-color: var(--gold); background: var(--plum-3); color: var(--gold);}

/* ---------- 3. jackpot panel ---------- */
.tz-jp{
  display: grid;
  row-gap: var(--u-sp11);
  column-gap: var(--u-sp11);
  justify-items: center;
  margin-top: 0px;
  margin-right: var(--pad);
  margin-bottom: 22px;
  margin-left: var(--pad);
  padding-top: var(--u-sp17);
  padding-right: var(--u-sp14);
  padding-bottom: var(--u-sp17);
  padding-left: var(--u-sp14);
  border-radius: 20px;
  text-align: center;
  background: radial-gradient(240px 120px at 50% 0,rgba(224,106,18,.3),transparent 70%),
    linear-gradient(180deg,var(--plum-3),var(--plum));
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.tz-jp .eb{
  font-size: var(--u-fs3);
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold);
}
.tz-jp .dg{display: flex; justify-content: center; align-items: center; row-gap: var(--u-sp5); column-gap: var(--u-sp5); flex-wrap: wrap;}
.tz-jp .dg b{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 29px;
  height: 42px;
  border-radius: 9px;
  font-size: var(--u-fs16);
  font-weight: 900;
  color: var(--gold-3);
  background: linear-gradient(180deg,#120726,#2B1148);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  box-shadow: inset 0 -2px 0 rgba(255,201,77,.18);
}
.tz-jp .dg i{font-style: normal; color: var(--mag-3); font-weight: 900; font-size: var(--u-fs15); padding-top: 0px; padding-right: var(--u-sp1); padding-bottom: 0px; padding-left: var(--u-sp1);}
.tz-jp .lb{
  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--u-sp9);
  column-gap: var(--u-sp9);
  font-size: var(--u-fs6);
  color: var(--mut);
  flex-wrap: wrap;
}
.tz-jp .lb em{font-style: normal; font-weight: 900; color: var(--mag-3); letter-spacing: .12em; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.tz-jp .tz-btn{max-width: 280px;}

/* ---------- 4. sections and the game grid ---------- */
.tz-sec{margin-top: 0px; margin-right: 0px; margin-bottom: var(--u-sp20); margin-left: 0px; padding-top: 0px; padding-right: var(--pad); padding-bottom: 0px; padding-left: var(--pad);}
.tz-sec .sh{
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--u-sp12);
  column-gap: var(--u-sp12);
  margin-bottom: var(--u-sp12);
}
.tz-sec .sh h2{font-size: 16px; font-weight: 800; color: var(--txt); min-width: 0px;}
.tz-sec .sh h2::after{
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  margin-top: var(--u-sp6);
  background: linear-gradient(90deg,var(--mag),var(--gold));
}
.tz-sec .sh a{flex-grow: 0; flex-shrink: 0; flex-basis: auto; font-size: var(--u-fs7); font-weight: 700; color: var(--mag-3);}
.gg{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--u-sp10); column-gap: var(--u-sp10);}
.gc{
  position: relative;
  display: block;
  border-radius: 14px;
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--plum-2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
  min-width: 0px;
}
.gc img{width: 100%; aspect-ratio: 1/1; object-fit: cover; min-width: 0px;}
.gc b{
  display: block;
  padding-top: var(--u-sp8);
  padding-right: var(--u-sp9);
  padding-bottom: var(--u-sp10);
  padding-left: var(--u-sp9);
  font-size: var(--u-fs5);
  font-weight: 700;
  color: var(--txt);
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gc em{
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 2;
  font-style: normal;
  font-size: var(--u-fs1);
  font-weight: 900;
  letter-spacing: .08em;
  padding-top: var(--u-sp3);
  padding-right: var(--u-sp7);
  padding-bottom: var(--u-sp3);
  padding-left: var(--u-sp7);
  border-radius: 999px;
  background: var(--mag);
  color: #fff;
}

/* ---------- 5. live transaction ticker ---------- */
.tz-tick{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); row-gap: var(--u-sp11); column-gap: var(--u-sp11);}
.tz-tick .cl{
  min-width: 0px;
  border-radius: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--plum-2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
}
.tz-tick h3{
  padding-top: var(--u-sp9);
  padding-right: var(--u-sp11);
  padding-bottom: var(--u-sp9);
  padding-left: var(--u-sp11);
  font-size: var(--u-fs4);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
}
.tz-tick .up h3{background: linear-gradient(96deg,var(--mag),var(--mag-2));}
.tz-tick .dn h3{background: linear-gradient(96deg,var(--gold-2),#8A6410);}
.tz-tick .rl{display: grid;}
.tz-tick .rw{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  row-gap: var(--u-sp2);
  column-gap: var(--u-sp8);
  align-items: center;
  padding-top: var(--u-sp8);
  padding-right: var(--u-sp11);
  padding-bottom: var(--u-sp8);
  padding-left: var(--u-sp11);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--line-2);
}
.tz-tick .rw:first-child{border-top-width: 0px; border-top-style: none; border-top-color: currentcolor;}
.tz-tick .ph{
  font-size: var(--u-fs5);
  font-weight: 700;
  color: var(--soft);
  min-width: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tz-tick .pv{
  grid-column: 1;
  font-size: var(--u-fs3);
  color: var(--mut);
  min-width: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tz-tick .am{
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: var(--u-fs8);
  font-weight: 900;
  color: var(--ok);
  text-align: right;
  white-space: nowrap;
}

/* ---------- 6. VIP ladder ---------- */
.tz-vip{display: grid; row-gap: var(--u-sp12); column-gap: var(--u-sp12);}
.tz-vip p{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--u-fs7); color: var(--mut); line-height: var(--u-lh2);}
.tz-vip .pc{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding-top: var(--u-sp3);
  padding-right: var(--u-sp9);
  padding-bottom: var(--u-sp3);
  padding-left: var(--u-sp9);
  border-radius: 999px;
  font-weight: 800;
  font-size: var(--u-fs6);
  color: #3A0A11;
  background: linear-gradient(96deg,var(--gold-3),var(--gold));
}

/* ---------- 7. payments ---------- */
.tz-pay{display: flex; flex-wrap: wrap; row-gap: var(--u-sp9); column-gap: var(--u-sp9);}
.tz-pay span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  height: 36px;
  padding-top: 0px;
  padding-right: var(--u-sp12);
  padding-bottom: 0px;
  padding-left: var(--u-sp12);
  border-radius: 10px;
  background: #FDF4EC;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(58,10,17,.12);
}
.tz-pay img{max-height: 19px; width: auto; min-width: 0px; object-fit: contain; flex-grow: 0; flex-shrink: 1; flex-basis: auto;}

/* ---------- 8. app strip ---------- */
.tz-app{
  display: grid;
  row-gap: var(--u-sp14);
  column-gap: var(--u-sp14);
  padding-top: var(--u-sp15);
  padding-right: var(--u-sp15);
  padding-bottom: var(--u-sp15);
  padding-left: var(--u-sp15);
  border-radius: 20px;
  background: linear-gradient(165deg,var(--plum-3),var(--plum-2));
  border-width: 1px;
  border-style: solid;
  border-color: var(--mline);
}
.tz-app .bd{display: grid; row-gap: var(--u-sp10); column-gap: var(--u-sp10); min-width: 0px;}
.tz-app .bd>b{font-size: var(--u-fs12); font-weight: 800; color: var(--gold);}
.tz-app .bd>p{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--u-fs9); color: var(--soft); line-height: var(--u-lh2);}
.tz-app .sp{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--u-sp8); column-gap: var(--u-sp8);}
.tz-app .sp>div{
  display: grid;
  row-gap: var(--u-sp2);
  column-gap: var(--u-sp2);
  justify-items: center;
  min-width: 0px;
  padding-top: var(--u-sp9);
  padding-right: var(--u-sp5);
  padding-bottom: var(--u-sp9);
  padding-left: var(--u-sp5);
  border-radius: 12px;
  background: rgba(13,6,24,.55);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
  text-align: center;
}
.tz-app .sp span{font-size: var(--u-fs2); letter-spacing: .06em; text-transform: uppercase; color: var(--mut);}
.tz-app .sp b{font-size: var(--u-fs9); font-weight: 900; color: var(--gold-3);}

/* ---------- 10. trust ---------- */
.tz-trust{
  display: grid;
  row-gap: var(--u-sp12);
  column-gap: var(--u-sp12);
  padding-top: var(--u-sp15);
  padding-right: var(--u-sp15);
  padding-bottom: var(--u-sp15);
  padding-left: var(--u-sp15);
  border-radius: 20px;
  background: var(--plum-2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
}
.tz-trust .bg{display: flex; flex-wrap: wrap; row-gap: var(--u-sp9); column-gap: var(--u-sp9);}
.tz-trust .bg span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  height: 38px;
  padding-top: 0px;
  padding-right: var(--u-sp13);
  padding-bottom: 0px;
  padding-left: var(--u-sp13);
  border-radius: 10px;
  background: #FDF4EC;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(58,10,17,.12);
}
.tz-trust .bg img{max-height: 21px; width: auto; min-width: 0px; object-fit: contain; flex-grow: 0; flex-shrink: 1; flex-basis: auto;}
.tz-trust p{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--u-fs6); color: var(--mut); line-height: var(--u-lh3);}

/* ---------- written content ---------- */
.tz-content{padding-top: 0px; padding-right: var(--pad); padding-bottom: 0px; padding-left: var(--pad); margin-top: 0px; margin-right: 0px; margin-bottom: var(--u-sp20); margin-left: 0px;}
.tz-content.tail{margin-bottom: 26px;}
.tz-content h2{font-size: var(--u-fs13); font-weight: 800; color: var(--gold); margin-top: var(--u-sp20); margin-right: 0px; margin-bottom: var(--u-sp10); margin-left: 0px;}
.tz-content h2:first-child{margin-top: 0px;}
.tz-content p{margin-top: 0px; margin-right: 0px; margin-bottom: var(--u-sp13); margin-left: 0px; font-size: var(--u-fs10); color: var(--soft);}
.tz-content ul{
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: var(--u-sp15);
  margin-left: 0px;
  padding-left: 21px;
  display: grid;
  row-gap: var(--u-sp7);
  column-gap: var(--u-sp7);
  color: var(--soft);
  font-size: var(--u-fs10);
}
.tz-kpis{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); row-gap: var(--u-sp10); column-gap: var(--u-sp10); margin-top: 0px; margin-right: 0px; margin-bottom: var(--u-sp19); margin-left: 0px;}
.tz-kpis>div{
  display: grid;
  row-gap: var(--u-sp3);
  column-gap: var(--u-sp3);
  min-width: 0px;
  padding-top: var(--u-sp13);
  padding-right: var(--u-sp13);
  padding-bottom: var(--u-sp13);
  padding-left: var(--u-sp13);
  border-radius: 14px;
  background: linear-gradient(165deg,var(--plum-3),var(--plum-2));
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
}
.tz-kpis b{font-size: var(--u-fs14); font-weight: 900; color: var(--gold-3); line-height: 1.15;}
.tz-kpis span{font-size: var(--u-fs5); color: var(--mut); line-height: 1.4;}
.tz-steps{counter-reset: s; list-style-type: none; list-style-position: outside; list-style-image: none; margin-top: 0px; margin-right: 0px; margin-bottom: var(--u-sp19); margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display: grid; row-gap: var(--u-sp9); column-gap: var(--u-sp9);}
.tz-steps li{
  counter-increment: s;
  position: relative;
  padding-top: var(--u-sp12);
  padding-right: var(--u-sp14);
  padding-bottom: var(--u-sp12);
  padding-left: 48px;
  border-radius: 14px;
  background: var(--plum-2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
  font-size: var(--u-fs9);
  color: var(--soft);
}
.tz-steps li::before{
  content: counter(s);
  position: absolute;
  left: 13px;
  top: 11px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 900;
  font-size: var(--u-fs8);
  background: linear-gradient(140deg,var(--mag),var(--mag-2));
  color: #fff;
}
.tz-tw{overflow-x: auto; border-radius: 14px; border-width: 1px; border-style: solid; border-color: var(--line-2); margin-top: 0px; margin-right: 0px; margin-bottom: var(--u-sp19); margin-left: 0px;}
.tz-vip .tz-tw{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}
.tz-tbl{font-size: var(--u-fs8); min-width: 360px; background: var(--plum-2);}
.tz-tbl th{
  background: #140829;
  color: var(--gold);
  text-align: left;
  padding-top: var(--u-sp10);
  padding-right: var(--u-sp12);
  padding-bottom: var(--u-sp10);
  padding-left: var(--u-sp12);
  font-size: var(--u-fs4);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 800;
}
.tz-tbl td{
  padding-top: var(--u-sp10);
  padding-right: var(--u-sp12);
  padding-bottom: var(--u-sp10);
  padding-left: var(--u-sp12);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--line-2);
  color: var(--soft);
  vertical-align: top;
}
.tz-tbl td b{color: var(--txt);}
.tz-faq{display: grid; row-gap: var(--u-sp9); column-gap: var(--u-sp9); margin-top: 0px; margin-right: 0px; margin-bottom: var(--u-sp19); margin-left: 0px;}
.tz-faq details{border-radius: 14px; border-width: 1px; border-style: solid; border-color: var(--line-2); background: var(--plum-2);}
.tz-faq summary{cursor: pointer; padding-top: var(--u-sp13); padding-right: var(--u-sp15); padding-bottom: var(--u-sp13); padding-left: var(--u-sp15); font-weight: 700; font-size: var(--u-fs10); color: var(--gold);}
.tz-faq p{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: var(--u-sp15); padding-bottom: var(--u-sp14); padding-left: var(--u-sp15); font-size: var(--u-fs9); color: var(--soft);}
.tz-band{
  display: grid;
  row-gap: var(--u-sp12);
  column-gap: var(--u-sp12);
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-top: var(--u-sp17);
  padding-right: var(--u-sp17);
  padding-bottom: var(--u-sp17);
  padding-left: var(--u-sp17);
  border-radius: 20px;
  background: linear-gradient(140deg,var(--mag-2),#3A0E47);
  border-width: 1px;
  border-style: solid;
  border-color: var(--mline);
}
.tz-band b{font-size: 15.5px; font-weight: 800; line-height: 1.45; color: #fff;}

/* ---------- footer ---------- */
.tz-foot{
  display: grid;
  row-gap: var(--u-sp16);
  column-gap: var(--u-sp16);
  padding-top: var(--u-sp20);
  padding-right: var(--pad);
  padding-bottom: 28px;
  padding-left: var(--pad);
  background: #140407;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--mline);
}
.tz-foot .brand{display: grid; row-gap: var(--u-sp10); column-gap: var(--u-sp10);}
.tz-foot p{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--u-fs7); color: var(--mut); line-height: 1.65;}
.tz-foot .links{display: flex; flex-wrap: wrap; row-gap: var(--u-sp8); column-gap: var(--u-sp8);}
.tz-foot .links a{
  font-size: var(--u-fs7);
  color: var(--txt);
  padding-top: var(--u-sp9);
  padding-right: var(--u-sp12);
  padding-bottom: var(--u-sp9);
  padding-left: var(--u-sp12);
  border-radius: 999px;
  background: var(--plum-2);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.tz-foot .pay{display: flex; flex-wrap: wrap; row-gap: var(--u-sp8); column-gap: var(--u-sp8);}
.tz-foot .pay span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  height: 32px;
  padding-top: 0px;
  padding-right: var(--u-sp10);
  padding-bottom: 0px;
  padding-left: var(--u-sp10);
  border-radius: 9px;
  background: #FDF4EC;
}
.tz-foot .pay img{max-height: 17px; width: auto; min-width: 0px; object-fit: contain; flex-grow: 0; flex-shrink: 1; flex-basis: auto;}
.tz-foot .legal{
  display: flex;
  align-items: flex-start;
  row-gap: var(--u-sp11);
  column-gap: var(--u-sp11);
  padding-top: var(--u-sp14);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--line-2);
}
.tz-foot .age{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  border-color: var(--mag);
  color: var(--mag-3);
  font-weight: 900;
  font-size: var(--u-fs6);
}
.tz-foot small{font-size: var(--u-fs5); color: var(--mut);}

/* ---------- fixed furniture: the sticky CTA lives here, in the thumb zone ---------- */
.tz-bar{
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  width: min(var(--col),100%);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  height: var(--bar);
  padding-top: var(--u-sp10);
  background: linear-gradient(180deg,#1B0C30,#09030F);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--mline);
}
.tz-bar a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: var(--u-sp3);
  column-gap: var(--u-sp3);
  color: var(--mut);
  font-size: var(--u-fs2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  position: relative;
  min-width: 0px;
  padding-top: 0px;
  padding-right: var(--u-sp2);
  padding-bottom: 0px;
  padding-left: var(--u-sp2);
  text-align: center;
}
.tz-bar a .i{font-size: var(--u-fs12); line-height: var(--u-lh1);}
/* The centre slot is the register CTA, lifted into a coin that overhangs the bar. */
.tz-bar a.mid{color: var(--gold-3); justify-content: flex-end; padding-bottom: var(--u-sp8);}
.tz-bar a.mid .i{
  position: absolute;
  top: -21px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 26px;
  color: #fff;
  background: linear-gradient(140deg,var(--mag),var(--mag-2));
  border-width: 3px;
  border-style: solid;
  border-color: #1B0509;
  box-shadow: 0 5px 16px rgba(224,106,18,.5);
}
.tz-side{position: fixed; right: 10px; bottom: calc(var(--bar) + 18px); z-index: 55; display: grid; row-gap: var(--u-sp10); column-gap: var(--u-sp10);}
.tz-side a{
  display: grid;
  justify-items: center;
  row-gap: var(--u-sp2);
  column-gap: var(--u-sp2);
  width: 54px;
  padding-top: var(--u-sp9);
  padding-right: var(--u-sp3);
  padding-bottom: var(--u-sp9);
  padding-left: var(--u-sp3);
  border-radius: 16px;
  background: rgba(58,10,17,.95);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--txt);
}
.tz-side a span{font-size: var(--u-fs13); line-height: var(--u-lh1);}
.tz-side a em{
  font-style: normal;
  font-size: var(--u-fs1);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--mut);
}

/* ---------- paged entry modal: ONE offer and ONE button per screen ---------- */
.tz-pop{
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(8,3,15,.84);
  display: none;
  align-items: center;
  justify-content: center;
  padding-top: var(--u-sp16);
  padding-right: var(--u-sp16);
  padding-bottom: var(--u-sp16);
  padding-left: var(--u-sp16);
}
.tz-pop.on{display: flex;}
.tz-pop .bx{
  position: relative;
  width: min(380px,100%);
  max-height: 92vh;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 18px;
  background: var(--plum);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  box-shadow: 0 26px 70px rgba(0,0,0,.7);
  display: flex;
  flex-direction: column;
}
/* The close control lives INSIDE the card: .bx clips its corners, so an overhanging
   button would lose its top half. */
.tz-pop .x{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
  background: rgba(10,4,20,.88);
  color: var(--txt);
  font-size: var(--u-fs14);
  line-height: var(--u-lh1);
  cursor: pointer;
}
/* The card itself never grows past 92vh and never scrolls, so the close control and the
   pager stay put; only the offer panel scrolls if its text runs long. */
.tz-pop .pgs{display: block; min-height: 0px; overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.tz-pop .pgs .pg{display: none;}
.tz-pop .pgs .pg.on{display: block;}
.tz-pop .pg .bd{display: grid; row-gap: var(--u-sp10); column-gap: var(--u-sp10); padding-top: var(--u-sp15); padding-right: var(--u-sp16); padding-bottom: var(--u-sp4); padding-left: var(--u-sp16);}
.tz-pop .pg .bd em{
  justify-self: start;
  font-style: normal;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .02em;
  padding-top: var(--u-sp4);
  padding-right: var(--u-sp12);
  padding-bottom: var(--u-sp4);
  padding-left: var(--u-sp12);
  border-radius: 999px;
  background: linear-gradient(96deg,var(--gold-3),var(--gold));
  color: #3A0A11;
}
.tz-pop .pg .bd b{font-size: var(--u-fs12); font-weight: 800; color: var(--txt); line-height: 1.35;}
.tz-pop .pg .bd p{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--u-fs9); color: var(--soft); line-height: var(--u-lh2);}
.tz-pop .pager{display: flex; align-items: center; row-gap: var(--u-sp10); column-gap: var(--u-sp10); padding-top: var(--u-sp14); padding-right: var(--u-sp16); padding-bottom: var(--u-sp4); padding-left: var(--u-sp16);}
.tz-pop .pager button{
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  background: var(--plum-2);
  color: var(--gold);
  font-size: 19px;
  line-height: var(--u-lh1);
  cursor: pointer;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}
.tz-pop .pager .dots{display: flex; row-gap: var(--u-sp7); column-gap: var(--u-sp7); flex-grow: 1; flex-shrink: 1; flex-basis: 0%; min-width: 0px; justify-content: center;}
.tz-pop .pager .dots button{
  width: 9px;
  height: 9px;
  min-width: 9px;
  min-height: 9px;
  border-radius: 50%;
  border-width: 0px;
  border-style: none;
  border-color: currentcolor;
  background: var(--plum-4);
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}
.tz-pop .pager .dots button.on{background: var(--mag); width: 22px; min-width: 22px; border-radius: 5px;}
.tz-pop .pager .cnt{flex-grow: 0; flex-shrink: 0; flex-basis: auto; font-size: var(--u-fs6); font-weight: 800; color: var(--mut); white-space: nowrap;}
.tz-pop .later{
  display: block;
  width: 100%;
  min-height: 46px;
  border-width: 0px;
  border-style: none;
  border-color: currentcolor;
  background: none;
  color: var(--mut);
  font-style: normal;
  font-variant: normal;
  font-weight: 700;
  font-stretch: normal;
  font-size: var(--u-fs9);
  line-height: normal;
  font-family: var(--font);
  cursor: pointer;
  padding-top: 0px;
  padding-right: var(--u-sp16);
  padding-bottom: var(--u-sp14);
  padding-left: var(--u-sp16);
}

/* ---------- breakpoints ---------- */
@media(min-width:1024px){
  /* Still the handset column, floated on the ink field with the rail beside it, not over it. */
  .tz-shell{margin-top: var(--u-sp19); margin-right: auto; margin-bottom: 0px; margin-left: auto; border-radius: 22px; min-height: 0px; overflow-x: hidden; overflow-y: hidden;}
  body{padding-bottom: calc(var(--bar) + 40px);}
  .tz-side{right: calc(50% - var(--col)/2 - 74px);}
  .tz-art.hr{aspect-ratio: 16/9;}
  .tz-hero h1{font-size: 27px;}
}
@media(max-width:412px){
  :root{--pad: 12px;}
  .gg{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
  .tz-hero h1{font-size: 22px;}
  /* Phone: shorten the hero art and lift the CTA pair above the lead, so the primary
     button lands inside the thumb zone on a 375x667 screen instead of under the fold. */
  .tz-art.hr{aspect-ratio: 5/2;}
  .tz-hero .bd .eb{order: 1;}
  .tz-hero .bd h1{order: 2;}
  .tz-hero .bd .act{order: 3;}
  .tz-hero .bd p.lead{order: 4; font-size: var(--u-fs10);}
  .tz-hero .bd .hint{order: 5;}
  .tz-head .acts .tz-btn{padding-top: 0px; padding-right: var(--u-sp12); padding-bottom: 0px; padding-left: var(--u-sp12); font-size: var(--u-fs6);}
  .tz-logo b{font-size: var(--u-fs13);}
  .tz-jp .dg b{min-width: 25px; height: 37px; font-size: var(--u-fs15);}
  .tz-app .sp{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
  .tz-side a{width: 48px;}
}
@media(max-width:430px){
  .tz-tick{grid-template-columns: minmax(0,1fr);}
  .tz-hero .act .tz-btn{flex-grow: 1; flex-shrink: 1; flex-basis: 100%;}
}
@media(prefers-reduced-motion:reduce){
  .tz-rail .tr{scroll-behavior: auto;}
}

/* ---- the draw calendar. This site's exclusive 4D strip: next draw + the three draw days. ---- */
.tz-draw .nx{
  background: #4A0D14;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(255,201,77,.28);
  border-radius: 14px;
  padding-top: var(--pad);
  padding-right: var(--pad);
  padding-bottom: var(--pad);
  padding-left: var(--pad);
  text-align: center;
  margin-bottom: var(--pad);
}
.tz-draw .nx .lb{
  display: block;
  font-size: var(--u-fs7);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.tz-draw .nx strong{
  display: block;
  margin-top: var(--u-sp6);
  margin-right: 0px;
  margin-bottom: var(--u-sp6);
  margin-left: 0px;
  font-style: normal;
  font-variant: normal;
  font-weight: 800;
  font-stretch: normal;
  font-size: 30px;
  line-height: 1.1;
  font-family: var(--font);
  color: var(--txt);
  font-variant-numeric: tabular-nums;
}
.tz-draw .nx small{display: block; color: var(--soft); font-size: var(--u-fs8); line-height: var(--u-lh2);}
.tz-draw .dys{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--u-sp8); column-gap: var(--u-sp8); margin-bottom: var(--pad);}
.tz-draw .dy{
  background: #3A0A11;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(255,201,77,.2);
  border-radius: 10px;
  padding-top: var(--u-sp10);
  padding-right: var(--u-sp6);
  padding-bottom: var(--u-sp10);
  padding-left: var(--u-sp6);
  text-align: center;
  min-width: 0px;
}
.tz-draw .dy b{display: block; color: var(--gold); font-size: var(--u-fs11);}
.tz-draw .dy span{display: block; color: var(--mut); font-size: var(--u-fs7); margin-top: var(--u-sp2);}
.tz-draw .tz-btn.w{display: flex; width: 100%; text-align: center;}