/* TT88 - .tk-* operator casino floor.
   Near-black maroon ground, crimson as the lead colour, deep teal as the second accent and gold
   only as a hairline. Flat, 4px radii, 1px hairlines, no gradients outside the hero scrim and the
   wheel. Spacing runs on a 6px step (6/12/18/24/36/48), deliberately not the 8px step most shells
   use. The floor is ONE centred column at every width.

   TWO accent tokens, not one. --ac is the FILL (buttons, chips, pressed tabs); --acl is the same
   hue lifted for TEXT, because crimson on this maroon ground measures 3.1:1 and an underlined
   inline link has to clear 4.5:1. Use --acl wherever the colour lands on type. */

:root {
  --pg: #140000;
  --pn: #1e0708;
  --ch: #260a0c;
  --hl: #3d1518;
  --ac: #c8102e;
  --ad: #8f0b20;
  --acl: #ff6275;  /* the accent, lifted for type: 5.8:1 on --pg */
  --gd: #ffd700;   /* gold, hairlines only */
  --ink: #fff;
  --mut: #a8938f;
  --ok: #0e8c84;
  --w: 1180px;
  --bar: 56px;
  --s1: 6px;
  --s2: 12px;
  --s3: 18px;
  --s4: 24px;
  --s5: 36px;
  --s6: 48px;
}

* { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--pg);
  color: var(--ink);
  font: 15px/1.65 Inter, "Helvetica Neue", Arial, sans-serif;
  padding-bottom: calc(var(--bar) + 54px);
}

img {
  display: block;
  max-width: 100%;
  min-width: 0;
  height: auto;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.w {
  width: 100%;
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: var(--s3);
}

.tk-off { display: none !important; }

/* ---------------------------------------------------------------- buttons */
.tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 38px;
  padding: 0 var(--s3);
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s linear, border-color .15s linear;
}

.tk-btn.p { background: var(--ac); color: #fff; }
.tk-btn.p:hover { background: #2bc0f5; }
.tk-btn.q { background: #39414d; color: var(--ink); }
.tk-btn.q:hover { background: #46505e; }
.tk-btn.o { border-color: var(--hl); color: var(--ink); background: none; }
.tk-btn.o:hover { border-color: var(--acl); color: var(--acl); }
.tk-btn.g { background: none; border-color: var(--acl); color: var(--acl); }
.tk-btn.lg { min-height: 46px; padding: 0 var(--s4); font-size: 14px; }
.tk-btn.w { width: 100%; }

/* ---------------------------------------------------------------- header */
.tk-head { position: relative; z-index: 40; }

.tk-top { background: var(--pg); border-bottom: 1px solid var(--hl); }

.tk-top .w {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 62px;
}

.tk-logo { flex: 0 0 auto; min-width: 0; }
.tk-logo svg { width: 92px; height: 40px; display: block; }

.tk-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hl);
  border-radius: 4px;
  background: none;
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
}

.tk-auth {
  margin-left: auto;
  display: flex;
  gap: var(--s2);
  min-width: 0;
}

.tk-chrome { background: var(--ch); border-bottom: 1px solid var(--hl); }

.tk-chrome .w {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
}

.tk-verts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  min-width: 0;
}

.tk-verts a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #c3ccd6;
  padding: var(--s2) 0;
  border-bottom: 2px solid transparent;
}

.tk-verts a:hover { color: var(--acl); border-bottom-color: var(--acl); }

.tk-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: 11px;
  color: var(--mut);
  min-width: 0;
}

.clk { font-variant-numeric: tabular-nums; white-space: nowrap; }

.tk-lang { display: flex; gap: 2px; }

.tk-lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 3px 9px;
  border: 1px solid var(--hl);
  border-radius: 3px;
  font-size: 11px;
  color: var(--mut);
}

.tk-lang a.on { background: var(--ac); border-color: var(--acl); color: #fff; }

.tk-tick {
  overflow: hidden;
  background: var(--pn);
  border-bottom: 1px solid var(--hl);
  padding: var(--s1) 0;
}

.tk-tick span {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  font-size: 12px;
  color: #a7b2bd;
  animation: m8scroll 46s linear infinite;
}

@keyframes m8scroll { to { transform: translateX(-100%); } }

/* ---------------------------------------------------------------- hero */
.tk-hero { position: relative; margin-bottom: var(--s5); }

.tk-hero > img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.tk-hero .ov {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(8,12,14,.94) 0%, rgba(8,12,14,.72) 46%, rgba(8,12,14,0) 78%);
}

.tk-hero .eb {
  display: inline-block;
  margin-bottom: var(--s2);
  padding: 5px 12px;
  border: 1px solid var(--ac);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acl);
}

.tk-hero strong {
  display: block;
  max-width: 18ch;
  font-size: clamp(25px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.tk-hero .nums {
  display: flex;
  gap: var(--s5);
  margin: var(--s4) 0;
}

.tk-hero .nums b {
  display: block;
  font-size: 36px;
  font-weight: 800;
  color: var(--acl);
}

/* The hero carries the page's main offer, so its button is sized to the headline rather than
   to the sitewide .lg step. Scoped to .tk-hero: every other .lg button is unchanged. */
.tk-hero .tk-btn {
  min-height: 56px;
  padding: 0 var(--s5);
  font-size: 16px;
  letter-spacing: 0.04em;
}

.tk-hero .nums small {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mut);
}

/* ---------------------------------------------------------------- floor */
.tk-floor {
  width: 100%;
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}

.tk-sh {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--hl);
}

.tk-sh h2 { font-size: 17px; letter-spacing: 0; }

.tk-sh > a {
  margin-left: auto;
  font-size: 12px;
  color: var(--acl);
  white-space: nowrap;
}

/* --- recommended, vertical tabs --- */
.tk-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-left: auto;
}

.tk-tabs button {
  padding: 5px 11px;
  border: 1px solid var(--hl);
  border-radius: 3px;
  background: none;
  color: var(--mut);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.tk-tabs button.on { background: var(--ac); border-color: var(--acl); color: #fff; font-weight: 700; }

.tk-rec .bd {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}

.tk-feat {
  position: relative;
  display: block;
  min-width: 0;
  border: 1px solid var(--hl);
  border-radius: 4px;
  overflow: hidden;
}

.tk-feat img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.tk-feat .ov {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s4) var(--s3) var(--s3);
  background: linear-gradient(0deg, rgba(8,12,14,.95), rgba(8,12,14,0));
}

.tk-feat .ov b { display: block; font-size: 15px; }
.tk-feat .ov small { font-size: 11px; color: var(--mut); }

.tk-rec .panes { min-width: 0; }

.tk-rec .pane {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
}

.tk-rec .sq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-width: 0;
  min-height: 106px;
  padding: var(--s2);
  border: 1px solid var(--hl);
  border-radius: 4px;
  background: var(--pn);
  text-align: center;
}

.tk-rec .sq:hover { border-color: var(--acl); }

.tk-rec .sq .ic {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  min-height: 38px;
  padding: 4px 8px;
  border-radius: 3px;
  background: #fff;
}

.tk-rec .sq .ic img { max-height: 28px; width: auto; min-width: 0; object-fit: contain; }
.tk-rec .sq .ic.t { font-size: 15px; font-weight: 800; color: var(--acl); }
.tk-rec .sq > span:last-child { font-size: 11px; color: var(--mut); }

.tk-rec .dots { display: flex; justify-content: center; gap: var(--s1); margin-top: var(--s3); }
.tk-rec .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hl); }
.tk-rec .dots i.on { width: 20px; border-radius: 3px; background: var(--ac); }

/* --- game cards --- */
.tk-picks .gr {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s2);
}

.tk-game { display: block; min-width: 0; }

.tk-game .th {
  position: relative;
  display: block;
  border: 1px solid var(--hl);
  border-radius: 4px;
  overflow: hidden;
}

.tk-game .th img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.tk-game:hover .th { border-color: var(--acl); }

.tk-tag {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--ac);
}

.tk-tag.new { background: var(--ok); }

.tk-game b { display: block; margin-top: var(--s1); font-size: 12px; font-weight: 600; }

.tk-game small {
  display: flex;
  justify-content: space-between;
  gap: var(--s1);
  font-size: 10px;
  color: var(--mut);
}

.tk-game small i { font-style: normal; color: var(--ad); }

/* --- live dealer rail --- */
.tk-live .rail {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  padding-bottom: var(--s2);
  scroll-snap-type: x mandatory;
}

.tk-live .it { flex: 0 0 212px; min-width: 0; scroll-snap-align: start; }

.tk-live .im {
  position: relative;
  display: block;
  border: 1px solid var(--hl);
  border-radius: 4px;
  overflow: hidden;
}

.tk-live .im img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 32%; }

.tk-live .pl {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .15s linear;
}

.tk-live .pl::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 11px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform: translateX(2px);
}

.tk-live .it:hover .pl { opacity: 1; }

.tk-live .nm {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin-top: var(--s1);
  font-size: 12px;
  font-weight: 600;
}

.tk-live .nm em {
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  color: #fff;
  background: var(--ac);
}

.tk-live .nm em.new { background: var(--ok); }
.tk-live small { font-size: 10px; color: var(--mut); }

/* --- jackpot --- */
.tk-jp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  padding: var(--s5) var(--s3);
  border: 1px solid var(--hl);
  border-radius: 4px;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,174,239,.14), transparent 68%), var(--pn);
  text-align: center;
}

.tk-jp .k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acl);
}

.tk-jp b {
  font-size: clamp(30px, 6vw, 54px);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.tk-jp b i { font-style: normal; }
.tk-jp .s { font-size: 12px; color: var(--mut); }
.tk-jp .tk-btn { margin-top: var(--s3); }

/* --- paired boards --- */
.tk-boards .bd {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.tk-board {
  min-width: 0;
  border: 1px solid var(--hl);
  border-radius: 4px;
  background: var(--pn);
  overflow: hidden;
}

.tk-board .h {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--hl);
  background: var(--ch);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tk-board .live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--ok);
}

.tk-board .live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  animation: m8pulse 1.7s ease-in-out infinite;
}

@keyframes m8pulse { 50% { opacity: .25; } }

.tk-board table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tk-board td { padding: var(--s1) var(--s3); border-top: 1px solid rgba(42,49,59,.6); }
.tk-board td.a { text-align: right; font-variant-numeric: tabular-nums; color: var(--acl); }
.tk-board.wd td.a { color: var(--ok); }
.tk-board td.p { text-align: right; width: 34%; color: var(--mut); }

/* --- app block --- */
.tk-app .bd {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s5);
  align-items: center;
  justify-items: center;
  padding: var(--s5) var(--s3);
  border: 1px solid var(--hl);
  border-radius: 4px;
  background: var(--pn);
}

.tk-app .qr { display: block; text-align: center; min-width: 0; color: inherit; }

.tk-app .qr img {
  display: block;
  width: 104px;
  height: 104px;
  margin: 0 auto var(--s2);
  padding: 5px;
  border: 2px solid var(--ac);
  border-radius: 4px;
  background: #fff;
}

.tk-app .qr b { display: block; font-size: 13px; }
.tk-app .qr small { font-size: 11px; color: var(--mut); }

.tk-app .ph {
  min-width: 0;
  width: 182px;
  padding: 9px 7px;
  border: 2px solid #39414d;
  border-radius: 22px;
  background: #05090b;
}

.tk-app .ph img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }

.tk-app .fts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s2);
  margin-top: var(--s4);
}

.tk-app .ft {
  min-width: 0;
  padding: var(--s3);
  border: 1px solid var(--hl);
  border-radius: 4px;
  text-align: center;
}

.tk-app .ft .i { display: block; font-size: 21px; margin-bottom: var(--s1); }
.tk-app .ft b { display: block; font-size: 13px; }
.tk-app .ft small { font-size: 11px; color: var(--mut); }

/* --- provider wall --- */
.tk-wall .gr {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s2);
}

.tk-prov {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 62px;
  padding: var(--s2);
  border: 1px solid var(--hl);
  border-radius: 4px;
  background: var(--pn);
}

.tk-prov:hover .lg { box-shadow: 0 0 0 2px var(--ac); }

.tk-prov:hover { border-color: var(--acl); }

/* ONE treatment for every mark: a white chip, the logo in its own colour, no silhouetting.
   Three treatments at once (lifted / bare / solid badge) read as three different walls. */
.tk-prov .lg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 3px;
  background: #fff;
}

.tk-prov .lg img { max-height: 26px; width: auto; min-width: 0; object-fit: contain; }
.tk-prov .lg.t { font-size: 12px; color: var(--mut); }

/* --- testimonials --- */
.tk-testi .gr {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s2);
}

.tk-testi .bx {
  margin: 0;
  min-width: 0;
  padding: var(--s3);
  border: 1px solid var(--hl);
  border-radius: 4px;
  background: var(--pn);
}

.tk-testi .av { font-size: 21px; }
.tk-testi figcaption b { display: block; font-size: 13px; }
.tk-testi figcaption small { font-size: 11px; color: var(--mut); }
.tk-testi .st { display: block; margin: var(--s1) 0; font-size: 11px; color: var(--acl); letter-spacing: 1px; }
.tk-testi blockquote { margin: 0; font-size: 12px; line-height: 1.6; color: #c3ccd6; }

/* ---------------------------------------------------------------- article */
.tk-content {
  width: 100%;
  max-width: 900px;
  margin: var(--s6) auto 0;
  padding-inline: var(--s3);
}

.tk-content h1 {
  font-size: clamp(23px, 3.4vw, 34px);
  font-weight: 800;
  margin-bottom: var(--s3);
}

.tk-content .lead { font-size: 16px; line-height: 1.7; color: #c3ccd6; }

.tk-content h2 {
  margin: var(--s6) 0 var(--s2);
  padding-left: var(--s2);
  border-left: 3px solid var(--ac);
  font-size: 19px;
}

.tk-content h3 { margin: var(--s4) 0 var(--s1); font-size: 15px; }
.tk-content p { margin: 0 0 var(--s3); color: #c3ccd6; }
.tk-content a { color: var(--acl); text-decoration: underline; text-underline-offset: 2px; }
.tk-content ul, .tk-content ol { margin: 0 0 var(--s3); padding-left: var(--s4); color: #c3ccd6; }
.tk-content li { margin-bottom: var(--s1); }

.tk-ph {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--s5);
  align-items: center;
  margin-bottom: var(--s5);
}

.tk-ph img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }

.tk-ph .eb {
  display: inline-block;
  margin-bottom: var(--s2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acl);
}

.tk-ph .act, .tk-content .act { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.tk-content .act.utl { margin-bottom: var(--s5); }

.tk-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s2);
  margin: var(--s5) 0;
}

.tk-kpis > div {
  min-width: 0;
  padding: var(--s3);
  border: 1px solid var(--hl);
  border-radius: 4px;
  background: var(--pn);
}

.tk-kpis b { display: block; font-size: 23px; font-weight: 800; color: var(--acl); }
.tk-kpis span { font-size: 11px; color: var(--mut); }

.tk-steps { counter-reset: m8s; margin: var(--s4) 0; padding: 0; list-style: none; }

.tk-steps li {
  position: relative;
  counter-increment: m8s;
  margin-bottom: var(--s3);
  padding-left: var(--s6);
  color: #c3ccd6;
}

.tk-steps li::before {
  content: counter(m8s);
  position: absolute;
  left: 0;
  top: 0;
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ac);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--acl);
}

.tk-tw { overflow-x: auto; margin: var(--s4) 0; }

.tk-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid var(--hl);
}

.tk-tbl th {
  padding: var(--s2) var(--s3);
  background: var(--ch);
  border-bottom: 1px solid var(--hl);
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--acl);
}

.tk-tbl td { padding: var(--s2) var(--s3); border-top: 1px solid var(--hl); color: #c3ccd6; }
.tk-tbl tbody tr:nth-child(odd) { background: rgba(22,26,32,.6); }

.tk-faq { margin: var(--s4) 0; }

.tk-faq details {
  border: 1px solid var(--hl);
  border-radius: 4px;
  margin-bottom: var(--s1);
  background: var(--pn);
}

.tk-faq summary {
  padding: var(--s2) var(--s3);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.tk-faq p { margin: 0; padding: 0 var(--s3) var(--s3); font-size: 13px; }

.tk-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin: var(--s6) 0 var(--s4);
  padding: var(--s4);
  border: 1px solid var(--ac);
  border-radius: 4px;
  background: rgba(0,174,239,.07);
}

.tk-band b { flex: 1 1 260px; min-width: 0; font-size: 15px; font-weight: 600; }

/* ---------------------------------------------------------------- chrome overlays */
.tk-util {
  position: fixed;
  left: 0;
  top: 46%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tk-util a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 58px;
  padding: var(--s2) 4px;
  border: 1px solid var(--hl);
  border-left: none;
  border-radius: 0 4px 4px 0;
  background: var(--ch);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mut);
}

.tk-util a:hover { color: var(--acl); border-color: var(--acl); }
.tk-util .i { font-size: 16px; color: var(--acl); }

.tk-spin {
  position: fixed;
  right: var(--s3);
  bottom: calc(var(--bar) + 66px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
}

.tk-spin .wh {
  position: relative;
  width: 76px;
  height: 76px;
  border: 3px solid var(--ac);
  border-radius: 50%;
  background: conic-gradient(#12303b 0 45deg, #0e2531 45deg 90deg, #12303b 90deg 135deg,
    #0e2531 135deg 180deg, #12303b 180deg 225deg, #0e2531 225deg 270deg,
    #12303b 270deg 315deg, #0e2531 315deg 360deg);
  transition: transform 4s cubic-bezier(.17,.67,.2,1);
}

.tk-spin .wh ul { display: none; }

.tk-spin .pin {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid var(--ac);
  transform: translateX(-50%);
}

.tk-spin .tk-btn { min-height: 28px; padding: 0 var(--s2); font-size: 10px; }

/* Retire the floating extras once the footer is on screen. A fixed element passing over content
   while you scroll is what a fixed element does; one still sitting on top of a trust mark when
   the page has STOPPED is covered content, and that is a defect. At 320 the spin badge covered
   godaddy 90% and the util rail covered gamcare 41% and gamstop 52% at scroll-end.
   The sticky register bar and the bottom nav deliberately stay: they are the CTA. */
.tk-atfoot .tk-util,
.tk-atfoot .tk-spin { display: none; }

/* ---------------------------------------------------------------- popup */
.tk-pop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s3);
  background: rgba(4,8,10,.84);
}

.tk-pop.on { display: flex; }

.tk-pop .bx {
  position: relative;
  width: 100%;
  max-width: 430px;
  max-height: 92vh;
  overflow: hidden auto;
  border: 1px solid var(--hl);
  border-radius: 6px;
  background: var(--pn);
}

.tk-pop .x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 1px solid var(--hl);
  border-radius: 4px;
  background: rgba(12,17,19,.85);
  color: var(--ink);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.tk-pop .ix {
  display: flex;
  gap: 2px;
  /* The close button is absolutely positioned over this row's top-right. padding-right only
     adds trailing scroll space, so the box still extended under the X and clipped the last tab
     on a 320px screen. margin-right ends the box itself before the button. */
  margin-right: 46px;
  padding: var(--s2) 0 0 var(--s2);
  overflow-x: auto;
  scrollbar-width: none;
}

.tk-pop .ix button {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--hl);
  border-radius: 3px;
  background: none;
  color: var(--mut);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}

.tk-pop .ix button.on { background: var(--ac); border-color: var(--acl); color: #fff; }
.tk-pop .ix i { display: none; }
.tk-pop .pane { padding: var(--s2); }
.tk-pop .pane > span { display: block; }
.tk-pop .pane img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.tk-pop .cap { display: block; padding: var(--s3) var(--s1) 0; text-align: center; }
.tk-pop .cap b { display: block; font-size: 18px; font-weight: 800; color: var(--acl); }
.tk-pop .cap span { display: block; margin: var(--s1) 0 var(--s3); font-size: 13px; color: #c3ccd6; }

.tk-pop .pg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s3) 0 var(--s1);
}

.tk-pop .pg button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--hl);
  border-radius: 4px;
  background: none;
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
}

.tk-pop .pg .n { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- footer */
.tk-foot { margin-top: var(--s6); border-top: 1px solid var(--hl); background: #0a0e10; }

.tk-foot .r1, .tk-foot .r2 {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--s5);
  padding-block: var(--s5);
}

.tk-foot .r2 { border-top: 1px solid var(--hl); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tk-foot .c { min-width: 0; }

.tk-foot h4 {
  margin-bottom: var(--s2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--acl);
}

.tk-foot .c > a { display: block; font-size: 12px; color: var(--mut); margin-bottom: var(--s1); }
.tk-foot .c > a:hover { color: var(--ink); }
.tk-foot .brand svg { width: 86px; height: 36px; margin-bottom: var(--s2); }
.tk-foot .brand p { margin: 0 0 var(--s3); font-size: 12px; line-height: 1.7; color: var(--mut); }

.tk-foot .lic {
  display: inline-flex;
  flex-direction: column;
  padding: var(--s1) var(--s2);
  border-radius: 3px;
  background: #0f7a3d;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}

.tk-foot .lic i { font-size: 8px; font-style: normal; font-weight: 400; letter-spacing: 0.04em; }

.tk-foot .pay, .tk-foot .bd, .tk-foot .soc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  min-width: 0;
}

.tk-foot .pay span, .tk-foot .bd span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 28px;
  padding: 4px 7px;
  border-radius: 3px;
  background: #fff;
}

.tk-foot .pay img, .tk-foot .bd img {
  max-height: 18px;
  width: auto;
  min-width: 0;
  object-fit: contain;
}

.tk-foot .soc a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--hl);
  border-radius: 50%;
}

.tk-foot .soc svg { width: 15px; height: 15px; fill: var(--mut); }
.tk-foot .soc a:hover { border-color: var(--acl); }
.tk-foot .soc a:hover svg { fill: var(--ac); }

.tk-foot .legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding-block: var(--s3);
  border-top: 1px solid var(--hl);
  font-size: 11px;
  color: var(--mut);
}

.tk-foot .age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border: 1px solid #d4524a;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  color: #d4524a;
}

.tk-foot .cp { margin-left: auto; }

/* ---------------------------------------------------------------- fixed bars */
.tk-scta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--bar);
  z-index: 35;
  display: none;
  padding: var(--s1) var(--s3);
  border-top: 1px solid var(--hl);
  background: rgba(12,17,19,.96);
}

.tk-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 36;
  display: none;
  padding-top: 9px;
  border-top: 1px solid var(--hl);
  background: var(--ch);
}

.tk-nav a {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  min-height: 44px;
  padding-bottom: 5px;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mut);
}

.tk-nav .i { font-size: 15px; }

.tk-nav .coin .i {
  position: absolute;
  top: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--ch);
  border-radius: 50%;
  background: var(--ac);
  color: #fff;
  font-size: 21px;
}

.tk-nav .coin { color: var(--acl); padding-top: 25px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .tk-rec .bd { grid-template-columns: 220px minmax(0, 1fr); }
  .tk-picks .gr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tk-wall .gr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tk-testi .gr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-foot .r1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-foot .r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .tk-burger { display: block; }
  .tk-verts {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
  }
  .tk-head.open .tk-verts { display: flex; }
  .tk-head.open .tk-chrome .w { flex-wrap: wrap; padding-bottom: var(--s2); }
  .tk-verts a { width: 100%; padding: var(--s2) 0; border-bottom: 1px solid var(--hl); }
  .tk-meta { margin-left: auto; }
  .clk { display: none; }
  .tk-auth .tk-btn.q { display: none; }
  .tk-hero > img { aspect-ratio: 4 / 3; }
  .tk-hero .ov { background: linear-gradient(0deg, rgba(8,12,14,.96) 22%, rgba(8,12,14,.42) 100%); align-items: flex-end; }
  .tk-hero .ov .w { padding-bottom: var(--s4); }
  .tk-hero .nums { gap: var(--s4); margin: var(--s3) 0; }
  /* The desktop step would crowd a 375px screen; hold the phone at its old size. */
  .tk-hero .nums b { font-size: 26px; }
  .tk-hero .tk-btn { min-height: 46px; padding: 0 var(--s4); font-size: 14px; }
  .tk-rec .bd { grid-template-columns: minmax(0, 1fr); }
  .tk-feat img { aspect-ratio: 16 / 9; }
  .tk-boards .bd { grid-template-columns: minmax(0, 1fr); }
  .tk-app .bd { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .tk-app .fts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-ph { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .tk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-scta { display: block; }
  .tk-nav { display: flex; }
  .tk-util { top: auto; bottom: calc(var(--bar) + 66px); }
  .tk-util a:nth-child(n+2) { display: none; }
  .tk-spin { right: var(--s2); bottom: calc(var(--bar) + 150px); }
  .tk-spin .wh { width: 58px; height: 58px; }
  .tk-foot .cp { margin-left: 0; width: 100%; }
}

@media (max-width: 520px) {
  .tk-picks .gr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-wall .gr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-testi .gr { grid-template-columns: minmax(0, 1fr); }
  .tk-rec .pane { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-foot .r1, .tk-foot .r2 { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .tk-floor { gap: var(--s5); }
  .tk-live .it { flex-basis: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-tick span { animation: none; padding-left: 0; }
  .tk-board .live::before { animation: none; }
  .tk-spin .wh { transition: none; }
  * { scroll-behavior: auto !important; }
}