/* ==========================================================================
   20Bet CL — components
   ========================================================================== */

/* ==========================================================================
   Hero slider (index)
   ========================================================================== */

.tb-hero {
  position: relative;
  border-radius: var(--tb-r);
  overflow: hidden;
  background: var(--tb-chrome-850);
  box-shadow: var(--tb-sh-2);
  margin-bottom: 16px;
}

/* All slides share one grid cell, so the track keeps the height of the
   TALLEST slide and the hero no longer shrinks when it rotates to a slide
   with a shorter headline. */
.tb-hero__track {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 340px;
}

.tb-hero__slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--tb-ease);
}
.tb-hero__slide.is-on { opacity: 1; visibility: visible; }

.tb-hero__left {
  position: relative;
  padding: 34px 30px;
  background: radial-gradient(120% 130% at 8% 20%, #1e3357 0%, #14243d 55%, #0e1a2c 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* decorative grid + glow */
.tb-hero__left::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(70% 90% at 30% 50%, #000 20%, transparent 75%);
}
.tb-hero__left::after {
  content: "";
  position: absolute;
  right: 6%;
  top: 50%;
  width: 300px;
  height: 300px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 106, 216, .35), transparent 65%);
  animation: tb-glow 5s var(--tb-ease) infinite;
}

.tb-hero__ttl {
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.12;
  max-width: 520px;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .5);
}

.tb-hero__sub {
  position: relative;
  z-index: 2;
  /* narrower than the title so the copy clears the artwork in the corner */
  max-width: 420px;
  margin-bottom: 20px;
  color: var(--tb-on-dark-2);
  font-size: 14.5px;
}

/* pseudo registration bar */
.tb-hero__form {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tb-hero__pick {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--tb-r-pill);
  background: #fff;
  color: var(--tb-ink);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--tb-sh-1);
  transition: transform .2s var(--tb-ease), box-shadow .2s var(--tb-ease);
}
.tb-hero__pick:hover { transform: translateY(-2px); box-shadow: var(--tb-sh-2); }
.tb-hero__pick > svg { width: 13px; height: 13px; color: var(--tb-ink-dim); }
.tb-hero__pick .tb-geo__flag { box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.tb-hero__pick--wide { max-width: 240px; }
.tb-hero__pick-2 { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tb-hero__pick-2 i {
  font-style: normal;
  font-size: 10.5px;
  color: var(--tb-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-hero__pick-2 b {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-hero__coin {
  width: 24px; height: 24px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(140deg, #ffd54a, #e79a12);
  display: grid;
  place-items: center;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(231, 154, 18, .5);
}

/* decorative gift art */
.tb-hero__art {
  position: absolute;
  right: -22px;
  bottom: -22px;
  z-index: 1;
  width: 252px;
  max-width: 42%;
  pointer-events: none;
  animation: tb-float 6s var(--tb-ease) infinite;
}
.tb-hero__art img { width: 100%; height: auto; }

/* right green offer panel */
.tb-hero__right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 26px 18px;
  background: linear-gradient(160deg, #55b52c, #327f14 70%, #276a0f);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.tb-hero__right::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 255, 255, .16) 85%, transparent);
  animation: tb-spin 14s linear infinite;
}
.tb-hero__right > * { position: relative; z-index: 1; }

.tb-hero__ol { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .92; }
.tb-hero__big {
  font-family: var(--tb-font-cond);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .35);
}
.tb-hero__mid { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .9; margin: 2px 0; }
.tb-hero__bot { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .92; max-width: 180px; margin-top: 4px; }

/* dots */
.tb-hero__dots {
  position: absolute;
  left: 0; right: 250px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.tb-hero__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transition: background .25s var(--tb-ease), transform .25s var(--tb-ease), width .25s var(--tb-ease);
}
.tb-hero__dot.is-on { background: #fff; width: 22px; border-radius: 4px; }
.tb-hero__dot:hover { background: rgba(255, 255, 255, .7); }

@media (max-width: 900px) {
  .tb-hero__slide { grid-template-columns: minmax(0, 1fr); }
  .tb-hero__right { padding: 20px; }
  .tb-hero__big { font-size: 44px; }
  .tb-hero__dots { right: 0; }
  .tb-hero__art { width: 190px; opacity: .32; }
  .tb-hero__ttl { font-size: 27px; }
}
@media (max-width: 560px) {
  .tb-hero__left { padding: 24px 18px; }
  .tb-hero__ttl { font-size: 23px; }
  .tb-hero__form { flex-direction: column; align-items: stretch; }
  .tb-hero__pick { width: 100%; max-width: none; }
  .tb-hero__art { display: none; }
}

/* ==========================================================================
   Dark page hero (app / betting / bonuses)
   ========================================================================== */

.tb-phero {
  position: relative;
  border-radius: var(--tb-r);
  overflow: hidden;
  margin-bottom: 18px;
  background: radial-gradient(130% 120% at 15% 15%, #1b3050 0%, #101d31 55%, #0a1220 100%);
  box-shadow: var(--tb-sh-2);
}

.tb-phero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(80% 100% at 25% 40%, #000 10%, transparent 78%);
}

.tb-phero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 26px;
  align-items: center;
  padding: 44px 36px;
}

.tb-phero__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }

.tb-phero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: var(--tb-r-pill);
  background: rgba(76, 169, 41, .16);
  border: 1px solid rgba(130, 219, 59, .32);
  color: var(--tb-green-bright);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tb-phero__eyebrow svg { width: 13px; height: 13px; }

.tb-phero__h1 {
  margin-bottom: 14px;
  color: #fff;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-shadow: 0 4px 22px rgba(0, 0, 0, .5);
}

.tb-phero__lead {
  max-width: 560px;
  margin-bottom: 20px;
  color: var(--tb-on-dark-2);
  font-size: 15.5px;
  line-height: 1.6;
}

.tb-phero__cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* fact pills under hero copy */
.tb-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tb-fact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--tb-r-pill);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--tb-on-dark-2);
  font-size: 12px;
  font-weight: 600;
  transition: background .2s var(--tb-ease), border-color .2s var(--tb-ease), transform .2s var(--tb-ease);
}
.tb-fact:hover { background: rgba(255, 255, 255, .1); border-color: rgba(130, 219, 59, .4); transform: translateY(-2px); }
.tb-fact svg { width: 14px; height: 14px; color: var(--tb-green-bright); flex: none; }
.tb-fact b { color: #fff; }

/* hero side art: offer stack */
.tb-phero__side { display: grid; gap: 10px; }

.tb-ocard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--tb-r);
  background: linear-gradient(120deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .12);
  overflow: hidden;
  transition: transform .25s var(--tb-ease), border-color .25s var(--tb-ease), background .25s var(--tb-ease);
}
.tb-ocard:hover {
  transform: translateX(4px);
  border-color: rgba(130, 219, 59, .45);
  background: linear-gradient(120deg, rgba(76, 169, 41, .18), rgba(255, 255, 255, .04));
}
.tb-ocard__ico {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--tb-r-sm);
  background: linear-gradient(150deg, var(--tb-green-l), var(--tb-green-d));
  color: #fff;
  box-shadow: 0 4px 12px rgba(76, 169, 41, .4);
}
.tb-ocard__ico svg { width: 20px; height: 20px; }
.tb-ocard--gold .tb-ocard__ico { background: linear-gradient(150deg, #ffd047, #dd9509); color: #2a1c00; box-shadow: 0 4px 12px rgba(221, 149, 9, .4); }
.tb-ocard--blue .tb-ocard__ico { background: linear-gradient(150deg, #4f8ef7, #1c50b0); box-shadow: 0 4px 12px rgba(28, 80, 176, .4); }
.tb-ocard--orange .tb-ocard__ico { background: linear-gradient(150deg, #ff8f5c, #d94d18); box-shadow: 0 4px 12px rgba(217, 77, 24, .4); }
.tb-ocard__b { display: block; min-width: 0; }
.tb-ocard__v {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}
.tb-ocard__v em { font-style: normal; color: var(--tb-green-bright); }
.tb-ocard__l { display: block; color: var(--tb-on-dark-dim); font-size: 11.5px; line-height: 1.4; }

@media (max-width: 900px) {
  .tb-phero__grid { grid-template-columns: minmax(0, 1fr); padding: 32px 22px; gap: 22px; }
  .tb-phero__h1 { font-size: 29px; }
}
@media (max-width: 520px) {
  .tb-phero__grid { padding: 26px 16px; }
  .tb-phero__h1 { font-size: 24px; }
  .tb-phero__lead { font-size: 14px; }
  .tb-phero__cta .tb-btn { width: 100%; }
}

/* ==========================================================================
   App hero (phone mockup)
   ========================================================================== */

.tb-apphero__display {
  margin: 0 0 10px;
  font-family: var(--tb-font-cond);
  font-size: 62px;
  font-weight: 700;
  line-height: .96;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: #fff;
}
.tb-apphero__display em { font-style: normal; color: var(--tb-gold); display: block; }

.tb-phone {
  position: relative;
  width: 240px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 9 / 18;
  border-radius: 30px;
  background: linear-gradient(160deg, #2a3b57, #131f34);
  padding: 9px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .14);
  animation: tb-float 7s var(--tb-ease) infinite;
}
.tb-phone::before {
  content: "";
  position: absolute;
  left: 50%; top: 14px;
  transform: translateX(-50%);
  width: 52px; height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .22);
  z-index: 3;
}
.tb-phone__scr {
  width: 100%; height: 100%;
  border-radius: 23px;
  overflow: hidden;
  background: linear-gradient(180deg, #0f1a2c, #16253d);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 8px 8px;
}
.tb-phone__scr img { width: 100%; height: 100%; object-fit: cover; border-radius: 23px; }

/* The supplied artwork is a whole device incl. its own bezel, so when it is
   present we stand down the CSS-drawn phone and the placeholder UI blocks
   instead of nesting one frame inside another. */
.tb-phone:has(img) {
  background: none;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}
.tb-phone:has(img)::before { display: none; }
.tb-phone:has(img) .tb-phone__scr {
  background: none;
  padding: 0;
  gap: 0;
  border-radius: 0;
  overflow: visible;
}
.tb-phone:has(img) .tb-phone__scr > :not(img) { display: none; }
.tb-phone:has(img) .tb-phone__scr img {
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .55));
}

.tb-phone__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tb-phone__box {
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .07);
  padding: 7px 8px;
  color: var(--tb-on-dark-2);
  font-size: 8.5px;
  line-height: 1.3;
  overflow: hidden;
}
.tb-phone__box b { display: block; color: #fff; font-size: 10px; }
.tb-phone__box--green { background: rgba(76, 169, 41, .2); border-color: rgba(130, 219, 59, .35); }
.tb-phone__box--red { background: rgba(224, 57, 43, .18); border-color: rgba(224, 57, 43, .35); }
.tb-phone__box--tall { grid-column: 1 / -1; min-height: 62px; }
.tb-phone__bal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.tb-phone__bal span {
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--tb-green);
  font-size: 8.5px;
  letter-spacing: .04em;
}
.tb-phone__bar {
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  background-size: 220% 100%;
  animation: tb-shimmer 2.6s linear infinite;
}
.tb-phone__tabbar {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.tb-phone__tabbar i {
  height: 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  display: block;
}
.tb-phone__tabbar i:nth-child(3) { background: var(--tb-green); }

/* QR block */
.tb-qr {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 400px;
  margin-top: 22px;
  padding: 16px;
  border-radius: var(--tb-r);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
}
.tb-qr__ico { display: flex; gap: 6px; color: #fff; }
.tb-qr__ico svg { width: 22px; height: 22px; }
.tb-qr__t { flex: 1 1 auto; color: var(--tb-on-dark-2); font-size: 12.5px; line-height: 1.45; }
.tb-qr__go {
  width: 48px; height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--tb-green-l), var(--tb-green-d));
  color: #fff;
  box-shadow: 0 6px 18px rgba(76, 169, 41, .45);
  transition: transform .25s var(--tb-ease);
}
.tb-qr__go:hover { transform: translateY(-3px) scale(1.06); }
.tb-qr__go svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .tb-apphero__display { font-size: 46px; }
  .tb-phone { width: 200px; }
}
@media (max-width: 520px) {
  .tb-apphero__display { font-size: 36px; }
  .tb-qr { flex-wrap: wrap; }
}

/* ==========================================================================
   Casino neon hero (bonuses page)
   ========================================================================== */

.tb-neon {
  position: relative;
  border-radius: var(--tb-r);
  overflow: hidden;
  margin-bottom: 18px;
  min-height: 300px;
  display: grid;
  align-items: center;
  background: #061226;
}

.tb-neon__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 78% 45%, rgba(0, 212, 255, .5), transparent 62%),
    radial-gradient(45% 70% at 92% 70%, rgba(130, 219, 59, .45), transparent 60%),
    radial-gradient(60% 90% at 12% 30%, rgba(28, 80, 176, .5), transparent 65%),
    linear-gradient(120deg, #05101f, #0a1e3a 50%, #061529);
}
.tb-neon__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* animated neon ribbons */
.tb-neon__wave {
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  opacity: .85;
}
.tb-neon__wave i {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #38e0ff, #82db3b, transparent);
  filter: blur(1px);
  animation: tb-ribbon 9s var(--tb-ease) infinite;
}
.tb-neon__wave i:nth-child(1) { top: 28%; animation-delay: 0s; }
.tb-neon__wave i:nth-child(2) { top: 42%; animation-delay: -1.6s; opacity: .7; }
.tb-neon__wave i:nth-child(3) { top: 56%; animation-delay: -3.2s; opacity: .55; }
.tb-neon__wave i:nth-child(4) { top: 70%; animation-delay: -4.8s; opacity: .4; }
@keyframes tb-ribbon {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-26px) scaleY(2.6); }
}

.tb-neon__in {
  position: relative;
  z-index: 2;
  padding: 44px 36px;
  max-width: 640px;
}

/* .tb-wins is an absolutely-positioned 290px panel shown from 1200px up,
   so reserve its lane or the offer frame slides underneath it */
@media (min-width: 1201px) {
  .tb-neon__in { max-width: min(640px, calc(100% - 344px)); }
}

.tb-neon__frame {
  padding: 26px 28px;
  border-radius: var(--tb-r-lg);
  background: rgba(4, 14, 27, .72);
  border: 1px solid rgba(130, 219, 59, .55);
  box-shadow: 0 0 34px rgba(130, 219, 59, .22), inset 0 0 34px rgba(0, 0, 0, .4);
  backdrop-filter: blur(3px);
}

.tb-neon__tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: var(--tb-r-sm);
  background: rgba(56, 224, 255, .18);
  border: 1px solid rgba(56, 224, 255, .4);
  color: #7fe9ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tb-neon__ttl {
  font-family: var(--tb-font-cond);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.02;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tb-neon__ttl em {
  font-style: normal;
  color: var(--tb-green-bright);
  text-shadow: 0 0 20px rgba(130, 219, 59, .7);
}
.tb-neon__spins {
  color: var(--tb-green-bright);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

@media (max-width: 900px) {
  .tb-neon__in { padding: 32px 20px; }
  .tb-neon__ttl { font-size: 34px; }
}
@media (max-width: 520px) {
  .tb-neon__frame { padding: 20px 18px; }
  .tb-neon__ttl { font-size: 27px; }
  .tb-neon__spins { font-size: 15px; }
}

/* ==========================================================================
   Jackpot / live-wins feed
   ========================================================================== */

.tb-wins {
  position: absolute;
  right: 26px; top: 26px;
  z-index: 3;
  width: 290px;
  border-radius: var(--tb-r);
  background: rgba(9, 20, 36, .82);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px);
  overflow: hidden;
  box-shadow: var(--tb-sh-dark);
}

/* 4 rows exactly, so the rotating feed never shows a half-clipped entry */
.tb-wins__list { max-height: 228px; overflow: hidden; }

.tb-win {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  animation: tb-slide-up-in .5s var(--tb-ease) both;
}
.tb-win__th {
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--tb-r-sm);
  overflow: hidden;
  background: linear-gradient(140deg, #2a3b57, #131f34);
  display: grid;
  place-items: center;
  font-size: 15px;
}
.tb-win__th img { width: 100%; height: 100%; object-fit: cover; }
.tb-win__b { min-width: 0; font-size: 11.5px; line-height: 1.45; color: var(--tb-on-dark-2); }
.tb-win__b u { text-decoration: none; color: #fff; font-weight: 700; }
.tb-win__b b { color: var(--tb-gold); }
.tb-win__b i { font-style: normal; color: var(--tb-green-bright); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tb-wins__jp {
  padding: 12px;
  text-align: center;
  background: rgba(0, 0, 0, .3);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
/* direct child only - the counter <span> lives inside the <b> below */
.tb-wins__jp > span { display: block; color: var(--tb-on-dark-dim); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tb-wins__jp b {
  display: block;
  margin-top: 3px;
  white-space: nowrap;
  font-family: var(--tb-font-cond);
  font-size: 23px;
  font-weight: 700;
  color: #e8ff5a;
  text-shadow: 0 0 18px rgba(232, 255, 90, .5);
  letter-spacing: .02em;
}

@media (max-width: 1200px) { .tb-wins { display: none; } }

/* ==========================================================================
   Game tiles
   ========================================================================== */

.tb-panel {
  padding: 18px;
  margin-bottom: 16px;
  border-radius: var(--tb-r);
  background: var(--tb-card);
  box-shadow: var(--tb-sh-1);
}
.tb-panel--flush { padding: 0; overflow: hidden; }
.tb-panel--dark {
  background: var(--tb-chrome-800);
  color: var(--tb-on-dark);
}
.tb-panel--dark .tb-sec__title,
.tb-panel--dark h2,
.tb-panel--dark h3 { color: #fff; }

.tb-games {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 150px;
  gap: 12px;
  padding-bottom: 10px;
}

.tb-game {
  position: relative;
  display: block;
}

.tb-game__pic {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--tb-r);
  overflow: hidden;
  background: linear-gradient(150deg, var(--g1, #2b3d5c), var(--g2, #101c31));
  box-shadow: var(--tb-sh-1);
  transition: transform .3s var(--tb-ease), box-shadow .3s var(--tb-ease);
}
.tb-game:hover .tb-game__pic {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 14px 30px rgba(12, 20, 37, .3);
}
.tb-game__pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--tb-ease);
}
.tb-game:hover .tb-game__pic img { transform: scale(1.09); }

/* text fallback when artwork absent */
.tb-game__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  text-align: center;
  color: #fff;
}
.tb-game__ph span {
  font-family: var(--tb-font-cond);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.tb-game__ph i {
  font-style: normal;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}
.tb-game__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .2), transparent 55%);
}

/* Artwork present -> drop the text placeholder. Game cards often carry
   transparent areas, and main.js removes any <img> that fails to load,
   so :has() is an accurate "did the art arrive?" test. */
.tb-game__pic:has(img) .tb-game__ph { display: none; }

.tb-game__rtp {
  position: absolute;
  right: 6px; top: 6px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(9, 20, 36, .8);
  backdrop-filter: blur(3px);
  line-height: 1.15;
}
.tb-game__rtp b { color: #fff; font-size: 11px; font-weight: 700; }
.tb-game__rtp i {
  font-style: normal;
  color: var(--tb-green-bright);
  font-size: 9.5px;
  font-weight: 700;
}
.tb-game__rtp span { color: var(--tb-on-dark-dim); font-size: 7.5px; letter-spacing: .06em; }

.tb-game__flag {
  position: absolute;
  left: 0; top: 6px;
  z-index: 3;
  padding: 3px 7px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, #7d2ae8, #b14ef5);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(125, 42, 232, .5);
}

.tb-game__play {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  background: rgba(6, 15, 28, .62);
  opacity: 0;
  transition: opacity .28s var(--tb-ease);
}
.tb-game:hover .tb-game__play { opacity: 1; }
.tb-game__play span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--tb-r-pill);
  background: linear-gradient(180deg, var(--tb-green-l), var(--tb-green-d));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: translateY(8px) scale(.94);
  transition: transform .3s var(--tb-ease-out);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.tb-game:hover .tb-game__play span { transform: none; }

.tb-game__t {
  display: block;
  margin-top: 8px;
  color: var(--tb-ink);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  transition: color .2s var(--tb-ease);
}
.tb-game:hover .tb-game__t { color: var(--tb-green); }
.tb-game__p { display: block; color: var(--tb-ink-dim); font-size: 11px; }

.tb-panel--dark .tb-game__t { color: #fff; }
.tb-panel--dark .tb-game__p { color: var(--tb-on-dark-dim); }

/* responsive grid variant */
.tb-games--grid {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  padding-bottom: 0;
}
@media (max-width: 520px) {
  .tb-games--grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
  .tb-games { grid-auto-columns: 124px; }
}

/* ==========================================================================
   Category tab bar (casino style)
   ========================================================================== */

.tb-cats {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 4px 0 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--tb-line-light);
}

.tb-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: none;
  min-width: 92px;
  padding: 10px 12px 12px;
  color: var(--tb-ink-dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  transition: color .2s var(--tb-ease);
}
.tb-cat svg { width: 22px; height: 22px; transition: transform .3s var(--tb-ease); }
.tb-cat::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: -9px;
  height: 3px;
  border-radius: 3px;
  background: var(--tb-green);
  transform: scaleX(0);
  transition: transform .3s var(--tb-ease);
}
.tb-cat:hover { color: var(--tb-ink); }
.tb-cat:hover svg { transform: translateY(-3px) scale(1.08); }
.tb-cat.is-on { color: var(--tb-ink); }
.tb-cat.is-on::after { transform: scaleX(1); }
.tb-cat.is-on svg { color: var(--tb-green); }

/* ==========================================================================
   Bet-combo cards ("Emocionantes combos")
   ========================================================================== */

.tb-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  border-radius: var(--tb-r);
  background: var(--tb-canvas);
}
.tb-tab {
  padding: 9px 20px;
  border-radius: var(--tb-r-sm);
  color: var(--tb-ink-dim);
  font-size: 12.5px;
  font-weight: 700;
  transition: background .25s var(--tb-ease), color .25s var(--tb-ease), box-shadow .25s var(--tb-ease);
}
.tb-tab.is-on {
  background: linear-gradient(180deg, var(--tb-orange-l), var(--tb-orange));
  color: #fff;
  box-shadow: 0 4px 12px rgba(242, 98, 42, .35);
}
.tb-tab:not(.is-on):hover { color: var(--tb-ink); background: #fff; }

@media (max-width: 620px) {
  .tb-tabs { display: flex; width: 100%; overflow-x: auto; }
  .tb-tab { flex: none; padding: 9px 15px; font-size: 12px; }
}

.tb-tabpane { display: none; animation: tb-slide-up-in .4s var(--tb-ease) both; }
.tb-tabpane.is-on { display: block; }

.tb-combos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 12px;
}

.tb-combo {
  border-radius: var(--tb-r);
  overflow: hidden;
  border: 1px solid var(--tb-line-light);
  background: var(--tb-card);
  transition: transform .25s var(--tb-ease), box-shadow .25s var(--tb-ease), border-color .25s var(--tb-ease);
}
.tb-combo:hover {
  transform: translateY(-4px);
  border-color: rgba(76, 169, 41, .5);
  box-shadow: var(--tb-sh-2);
}

.tb-combo__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--tb-canvas);
  border-bottom: 1px solid var(--tb-line-light);
}
.tb-combo__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--tb-r-sm);
  background: var(--tb-orange);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tb-combo__tag--low { background: var(--tb-blue-l); }
.tb-combo__nm {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--tb-ink-2);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-combo__see { color: var(--tb-orange); font-size: 11px; font-weight: 700; white-space: nowrap; }
.tb-combo__see:hover { text-decoration: underline; }

.tb-combo__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: linear-gradient(150deg, #1c2b45, #14243d);
  color: #fff;
}
.tb-combo__st {
  padding: 14px 8px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .07);
}
.tb-combo__st:last-child { border-right: 0; }
.tb-combo__st b {
  display: block;
  font-family: var(--tb-font-cond);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
}
.tb-combo__st.is-hot b { color: var(--tb-green-bright); }
.tb-combo__st span {
  display: block;
  margin-top: 2px;
  color: var(--tb-on-dark-dim);
  font-size: 9.5px;
  line-height: 1.35;
}

/* ==========================================================================
   Promotions carousel
   ========================================================================== */

.tb-carou { position: relative; }

.tb-carou__vp {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 10px;
}
.tb-carou__vp > * { scroll-snap-align: start; }

.tb-carou__nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(9, 20, 36, .78);
  color: #fff;
  box-shadow: var(--tb-sh-2);
  transition: background .2s var(--tb-ease), transform .2s var(--tb-ease);
}
.tb-carou__nav:hover { background: var(--tb-green); transform: translateY(-50%) scale(1.1); }
.tb-carou__nav svg { width: 18px; height: 18px; }
.tb-carou__nav--prev { left: -6px; }
.tb-carou__nav--next { right: -6px; }

.tb-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--tb-r);
  overflow: hidden;
  background: var(--tb-card);
  box-shadow: var(--tb-sh-1);
  transition: transform .28s var(--tb-ease), box-shadow .28s var(--tb-ease);
}
.tb-promo:hover { transform: translateY(-5px); box-shadow: var(--tb-sh-3); }

.tb-promo__pic {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(150deg, var(--g1, #22406e), var(--g2, #0d1b2f));
}
.tb-promo__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--tb-ease); }
.tb-promo:hover .tb-promo__pic img { transform: scale(1.07); }
.tb-promo__pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 25%, rgba(255, 255, 255, .18), transparent 55%);
  pointer-events: none;
}

.tb-promo__ribbon {
  position: absolute;
  right: 0; top: 12px;
  z-index: 2;
  padding: 4px 12px 4px 16px;
  background: linear-gradient(90deg, #8b5cf6, #a97bff);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(139, 92, 246, .5);
}
.tb-promo__ribbon--sport { background: linear-gradient(90deg, #f2622a, #ff9057); box-shadow: 0 2px 10px rgba(242, 98, 42, .5); }
.tb-promo__ribbon--vip { background: linear-gradient(90deg, #d99509, #ffd047); color: #2a1c00; box-shadow: 0 2px 10px rgba(217, 149, 9, .5); }

.tb-promo__chip {
  position: absolute;
  left: 50%; bottom: -22px;
  z-index: 3;
  transform: translateX(-50%);
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(12, 20, 37, .22);
  color: var(--tb-green);
}
.tb-promo__chip svg { width: 26px; height: 26px; }
.tb-promo__chip--sport { color: var(--tb-orange); }

.tb-promo__b {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 16px 16px;
  text-align: center;
}
.tb-promo__h {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tb-ink);
}
.tb-promo__h::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: var(--tb-line-light);
}
.tb-promo__d { color: var(--tb-ink-2); font-size: 13px; line-height: 1.55; flex: 1 1 auto; }
.tb-promo__d b { color: var(--tb-ink); }
.tb-promo__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
/* two buttons share a ~220px card, so the default 20px side padding clips the
   label (.tb-btn is nowrap + overflow:hidden for the sheen sweep) */
.tb-promo__acts .tb-btn {
  min-width: 0;
  padding: 7px 8px;
  font-size: 11.5px;
  letter-spacing: .015em;
  /* carousel cards can be as narrow as 230px at any viewport, so let the
     label wrap instead of relying on a breakpoint to save it */
  white-space: normal;
  line-height: 1.15;
}
/* below this the pair simply cannot hold two legible labels - stack them */
@media (max-width: 430px) {
  .tb-promo__acts { grid-template-columns: 1fr; gap: 7px; }
  .tb-promo__acts .tb-btn { font-size: 12.5px; padding: 0 16px; }
}

@media (max-width: 520px) {
  .tb-carou__vp { grid-auto-columns: minmax(230px, 1fr); }
  .tb-carou__nav { display: none; }
}

/* ==========================================================================
   Prose (PDF content) blocks
   ========================================================================== */

.tb-prose {
  padding: 26px 28px;
  margin-bottom: 16px;
  border-radius: var(--tb-r);
  background: var(--tb-card);
  box-shadow: var(--tb-sh-1);
  color: var(--tb-ink-2);
  font-size: 15px;
  line-height: 1.72;
}

.tb-prose > :first-child { margin-top: 0; }
.tb-prose > :last-child { margin-bottom: 0; }

.tb-prose h2 {
  position: relative;
  margin: 34px 0 16px;
  padding-left: 14px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.22;
}
.tb-prose h2::before {
  content: "";
  position: absolute;
  left: 0; top: .18em; bottom: .18em;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--tb-green-l), var(--tb-green-d));
}
.tb-prose h2:first-child { margin-top: 0; }

.tb-prose h3 {
  margin: 26px 0 12px;
  font-size: 18.5px;
  font-weight: 800;
  color: var(--tb-ink);
}
.tb-prose h3::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-top: 8px;
  border-radius: 3px;
  background: var(--tb-orange);
}

.tb-prose h4 {
  margin: 22px 0 10px;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--tb-ink);
  letter-spacing: .01em;
}

.tb-prose p { margin: 0 0 15px; }
.tb-prose strong { color: var(--tb-ink); font-weight: 700; }
.tb-prose a:not(.tb-btn) { color: var(--tb-green); font-weight: 600; }
.tb-prose a:not(.tb-btn):hover { text-decoration: underline; }
.tb-prose em { font-style: italic; }

/* lead / short sentence */
.tb-lead {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  margin: 0 0 20px;
  border-radius: var(--tb-r);
  background: linear-gradient(120deg, rgba(76, 169, 41, .1), rgba(76, 169, 41, .02));
  border-left: 4px solid var(--tb-green);
  color: var(--tb-ink);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.55;
}
.tb-lead svg { width: 22px; height: 22px; flex: none; color: var(--tb-green); margin-top: 2px; }

/* bullets */
.tb-bul { display: grid; gap: 10px; margin: 0 0 18px; }
.tb-bul li {
  position: relative;
  display: flex;
  gap: 11px;
  padding: 11px 14px;
  border-radius: var(--tb-r-sm);
  background: var(--tb-canvas);
  border-left: 3px solid var(--tb-green);
  transition: transform .22s var(--tb-ease), background .22s var(--tb-ease), border-color .22s var(--tb-ease);
}
.tb-bul li:hover {
  transform: translateX(4px);
  background: var(--tb-canvas-2);
  border-left-color: var(--tb-orange);
}
.tb-bul__i {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tb-green);
  color: #fff;
}
.tb-bul__i svg { width: 12px; height: 12px; }
.tb-bul__t { min-width: 0; }
.tb-bul__t b { color: var(--tb-ink); }

/* numbered steps */
.tb-steps { counter-reset: st; display: grid; gap: 12px; margin: 0 0 18px; }
.tb-steps li {
  position: relative;
  counter-increment: st;
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--tb-r);
  background: var(--tb-canvas);
  border: 1px solid var(--tb-line-light);
  transition: transform .22s var(--tb-ease), box-shadow .22s var(--tb-ease), border-color .22s var(--tb-ease);
}
.tb-steps li:hover {
  transform: translateY(-3px);
  border-color: rgba(76, 169, 41, .5);
  box-shadow: var(--tb-sh-2);
}
.tb-steps li::before {
  content: counter(st);
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--tb-green-l), var(--tb-green-d));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(76, 169, 41, .35);
}
.tb-steps li > div { min-width: 0; }
.tb-steps li b { color: var(--tb-ink); }

/* pros / cons */
.tb-pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 18px;
}
.tb-pc__box {
  padding: 18px;
  border-radius: var(--tb-r);
  border: 1px solid var(--tb-line-light);
  background: var(--tb-canvas);
}
.tb-pc__box--pro { border-top: 3px solid var(--tb-green); }
.tb-pc__box--con { border-top: 3px solid var(--tb-red); }
.tb-pc__h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tb-pc__h svg { width: 20px; height: 20px; }
.tb-pc__box--pro .tb-pc__h { color: var(--tb-green-d); }
.tb-pc__box--con .tb-pc__h { color: var(--tb-red); }
.tb-pc__l { display: grid; gap: 10px; }
.tb-pc__l li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tb-ink-2);
}
.tb-pc__l svg { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.tb-pc__box--pro .tb-pc__l svg { color: var(--tb-green); }
.tb-pc__box--con .tb-pc__l svg { color: var(--tb-red); }
.tb-pc__l b { color: var(--tb-ink); }

@media (max-width: 700px) { .tb-pc { grid-template-columns: 1fr; } }

/* ==========================================================================
   Tables
   ========================================================================== */

.tb-tbl-wrap {
  margin: 0 0 20px;
  border-radius: var(--tb-r);
  border: 1px solid var(--tb-line-light);
  overflow: hidden;
}
.tb-tbl-scroll { overflow-x: auto; }

.tb-tbl { min-width: 480px; font-size: 14px; }
.tb-tbl th,
.tb-tbl td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--tb-line-light);
}
.tb-tbl thead th {
  background: linear-gradient(150deg, #1c2b45, #14243d);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 0;
}
.tb-tbl tbody tr { background: var(--tb-card); transition: background .2s var(--tb-ease); }
.tb-tbl tbody tr:hover { background: rgba(76, 169, 41, .06); }
.tb-tbl tbody tr:last-child td { border-bottom: 0; }
.tb-tbl tbody th,
.tb-tbl td:first-child { font-weight: 700; color: var(--tb-ink); }
.tb-tbl td { color: var(--tb-ink-2); }
.tb-tbl__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-tbl__hi { color: var(--tb-green-d); font-weight: 800; }

/* mobile: table → cards */
@media (max-width: 620px) {
  .tb-tbl--cards { min-width: 0; }
  .tb-tbl--cards thead { display: none; }
  .tb-tbl--cards tbody tr {
    display: block;
    padding: 6px 0;
    border-bottom: 1px solid var(--tb-line-light);
  }
  .tb-tbl--cards tbody tr:last-child { border-bottom: 0; }
  .tb-tbl--cards td {
    display: flex;
    gap: 12px;
    padding: 7px 14px;
    border: 0;
    font-size: 13.5px;
  }
  .tb-tbl--cards td::before {
    content: attr(data-l);
    flex: 0 0 40%;
    color: var(--tb-ink-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding-top: 2px;
  }
  .tb-tbl--cards td:first-child {
    background: var(--tb-canvas);
    font-size: 14.5px;
    font-weight: 800;
  }
  .tb-tbl--cards td:first-child::before { display: none; }
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.tb-faq { display: grid; gap: 10px; margin: 0 0 18px; }

.tb-faq__i {
  border-radius: var(--tb-r);
  border: 1px solid var(--tb-line-light);
  background: var(--tb-canvas);
  overflow: hidden;
  transition: border-color .25s var(--tb-ease), box-shadow .25s var(--tb-ease);
}
.tb-faq__i.is-on { border-color: rgba(76, 169, 41, .55); box-shadow: var(--tb-sh-1); }

.tb-faq__q {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tb-ink);
  transition: color .2s var(--tb-ease);
}
.tb-faq__q:hover { color: var(--tb-green-d); }
/* must exclude .tb-faq__pm - it is also a <span>, and ".tb-faq__q span"
   outranks ".tb-faq__pm" on specificity, which stretched the +/- circle
   into a full-width ellipse. */
.tb-faq__q span:not(.tb-faq__pm) { flex: 1 1 auto; }
.tb-faq__pm {
  position: relative;
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--tb-green);
  transition: transform .3s var(--tb-ease), background .25s var(--tb-ease);
}
.tb-faq__pm::before,
.tb-faq__pm::after {
  content: "";
  position: absolute;
  inset: 50% 7px auto;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: #fff;
  transition: transform .3s var(--tb-ease);
}
.tb-faq__pm::after { transform: rotate(90deg); }
.tb-faq__i.is-on .tb-faq__pm { transform: rotate(180deg); background: var(--tb-orange); }
.tb-faq__i.is-on .tb-faq__pm::after { transform: rotate(0); }

.tb-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s var(--tb-ease);
}
.tb-faq__a > div {
  padding: 0 18px 18px;
  color: var(--tb-ink-2);
  font-size: 14.5px;
  line-height: 1.7;
}

/* ==========================================================================
   Reviews + rating
   ========================================================================== */

.tb-revs {
  display: grid;
  /* 268 rather than 250: at 250 the copy wrapped to ~3 words per line */
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  gap: 12px;
  margin: 0 0 20px;
}

/* Aggregate rating of the player reviews. Google's Rich Results Test raises a
   critical error when an item carries several review ratings but no
   aggregateRating, so it is required — and it has to be VISIBLE, otherwise it
   is structured data for hidden content. */
.tb-agg {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--tb-r);
  background: linear-gradient(140deg, #1c2b45, #101d31);
  color: #fff;
}

.tb-agg__score {
  display: flex;
  align-items: baseline;
  gap: 1px;
  flex: none;
  padding-right: 16px;
  border-right: 1px solid rgba(255, 255, 255, .13);
}
/* <data> rather than <b>: microdata only honours a machine-readable override
   on <meta content> and <data value>, so a <b content="4.6"> would have been
   read as the visible "4,6" (comma). */
.tb-agg__num {
  font-family: var(--tb-font-cond);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: var(--tb-green-bright);
  text-shadow: 0 0 20px rgba(130, 219, 59, .35);
}
.tb-agg__score span { color: var(--tb-on-dark-dim); font-size: 15px; font-weight: 700; }

.tb-agg__b { min-width: 0; }
.tb-agg__stars { display: flex; gap: 2px; color: var(--tb-gold); }
.tb-agg__stars svg { width: 16px; height: 16px; }
.tb-agg__stars svg.is-half { color: rgba(246, 179, 35, .42); }
.tb-agg__count {
  display: block;
  margin-top: 4px;
  color: var(--tb-on-dark-2);
  font-size: 12.5px;
}

@media (max-width: 460px) {
  .tb-agg { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tb-agg__score { padding-right: 0; border-right: 0; }
}

.tb-rev {
  position: relative;
  padding: 20px 18px 18px;
  border-radius: var(--tb-r);
  background: var(--tb-canvas);
  border: 1px solid var(--tb-line-light);
  color: var(--tb-ink-2);
  font-size: 14px;
  line-height: 1.65;
  transition: transform .25s var(--tb-ease), box-shadow .25s var(--tb-ease);
}
.tb-rev:hover { transform: translateY(-4px); box-shadow: var(--tb-sh-2); }
.tb-rev::before {
  content: "\201C";
  position: absolute;
  left: 14px; top: -2px;
  font-family: Georgia, serif;
  font-size: 54px;
  line-height: 1;
  color: rgba(76, 169, 41, .22);
}
.tb-rev__t { position: relative; padding-left: 22px; }
.tb-rev__st { display: flex; gap: 2px; margin-top: 12px; color: var(--tb-gold); }
.tb-rev__st svg { width: 15px; height: 15px; }

/* author row — the name must be visible, otherwise marking it up as
   schema.org/Person would be structured data for hidden content */
.tb-rev__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--tb-line-light);
}
.tb-rev__ava {
  width: 32px; height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--tb-green-l), var(--tb-green-d));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(76, 169, 41, .32);
}
.tb-rev__id { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.tb-rev__id b { display: block; color: var(--tb-ink); font-size: 13px; font-weight: 800; }
.tb-rev__id i {
  display: block;
  font-style: normal;
  color: var(--tb-ink-dim);
  font-size: 10.5px;
  letter-spacing: .03em;
}
.tb-rev__foot .tb-rev__st { margin-top: 0; flex: none; }

@media (max-width: 380px) {
  .tb-rev__foot { flex-wrap: wrap; }
  .tb-rev__foot .tb-rev__st { width: 100%; }
}

/* rating panel */
.tb-rate {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 22px;
  margin: 0 0 20px;
  border-radius: var(--tb-r);
  background: linear-gradient(140deg, #1c2b45, #101d31);
  color: #fff;
}
.tb-rate__score { text-align: center; }
.tb-rate__num {
  font-family: var(--tb-font-cond);
  font-size: 66px;
  font-weight: 700;
  line-height: 1;
  color: var(--tb-green-bright);
  text-shadow: 0 0 26px rgba(130, 219, 59, .4);
}
.tb-rate__num small { font-size: 26px; color: var(--tb-on-dark-dim); }
.tb-rate__lb {
  margin-top: 6px;
  color: var(--tb-on-dark-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tb-rate__st { display: flex; justify-content: center; gap: 3px; margin-top: 8px; color: var(--tb-gold); }
.tb-rate__st svg { width: 17px; height: 17px; }

.tb-rate__rows { display: grid; gap: 11px; }
.tb-rate__row { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 14px; align-items: center; }
.tb-rate__nm { color: var(--tb-on-dark-2); font-size: 13.5px; font-weight: 600; }
.tb-rate__bar {
  grid-column: 1 / -1;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.tb-rate__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--tb-green-d), var(--tb-green-bright));
  transition: width 1.2s var(--tb-ease-out);
}
.tb-rate__v {
  text-align: right;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .tb-rate { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .tb-rate__num { font-size: 52px; }
}

/* ==========================================================================
   Expert summary (author + verdict)
   ========================================================================== */

.tb-expert {
  margin: 0 0 20px;
  border-radius: var(--tb-r);
  border: 1px solid var(--tb-line-light);
  overflow: hidden;
  background: var(--tb-card);
}

.tb-expert__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(140deg, #1c2b45, #101d31);
  color: #fff;
}

.tb-expert__ava {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--tb-green-l), var(--tb-green-d));
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 4px 14px rgba(76, 169, 41, .4);
}

.tb-expert__who { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.tb-expert__who b { display: block; color: #fff; font-size: 15.5px; font-weight: 800; }
.tb-expert__who i {
  display: block;
  font-style: normal;
  color: var(--tb-green-bright);
  font-size: 12.5px;
  font-weight: 600;
}

.tb-expert__meta { flex: none; text-align: right; line-height: 1.35; }
.tb-expert__meta span {
  display: block;
  color: var(--tb-on-dark-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.tb-expert__meta b { display: block; color: var(--tb-on-dark-2); font-size: 13px; font-weight: 700; }

.tb-expert__score {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 1px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .12);
}
.tb-expert__score b {
  font-family: var(--tb-font-cond);
  font-size: 30px;
  font-weight: 700;
  color: var(--tb-green-bright);
  line-height: 1;
}
.tb-expert__score span { color: var(--tb-on-dark-dim); font-size: 14px; font-weight: 700; }

.tb-expert__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tb-expert__col { padding: 16px 18px; }
.tb-expert__col + .tb-expert__col { border-left: 1px solid var(--tb-line-light); }

.tb-expert__h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tb-expert__h svg { width: 17px; height: 17px; }
.tb-expert__col--pro .tb-expert__h { color: var(--tb-green-d); }
.tb-expert__col--con .tb-expert__h { color: #c07000; }

.tb-expert__col ul { display: grid; gap: 9px; }
.tb-expert__col li {
  position: relative;
  padding-left: 16px;
  color: var(--tb-ink-2);
  font-size: 13.5px;
  line-height: 1.55;
}
.tb-expert__col li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tb-green);
}
.tb-expert__col--con li::before { background: var(--tb-gold); }

@media (max-width: 680px) {
  .tb-expert__head { flex-wrap: wrap; gap: 12px; }
  .tb-expert__meta { text-align: left; }
  .tb-expert__score { padding-left: 0; border-left: 0; }
  .tb-expert__cols { grid-template-columns: 1fr; }
  .tb-expert__col + .tb-expert__col { border-left: 0; border-top: 1px solid var(--tb-line-light); }
}

/* ==========================================================================
   Stat tiles
   ========================================================================== */

.tb-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(155px, 100%), 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.tb-stat {
  position: relative;
  padding: 18px 16px;
  border-radius: var(--tb-r);
  background: var(--tb-card);
  border: 1px solid var(--tb-line-light);
  overflow: hidden;
  transition: transform .25s var(--tb-ease), box-shadow .25s var(--tb-ease), border-color .25s var(--tb-ease);
}
.tb-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(76, 169, 41, .5);
  box-shadow: var(--tb-sh-2);
}
.tb-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--tb-green-l), var(--tb-green-d));
}
.tb-stat__ico {
  width: 34px; height: 34px;
  margin-bottom: 10px;
  display: grid;
  place-items: center;
  border-radius: var(--tb-r-sm);
  background: rgba(76, 169, 41, .12);
  color: var(--tb-green-d);
}
.tb-stat__ico svg { width: 18px; height: 18px; }
.tb-stat__v {
  font-family: var(--tb-font-cond);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--tb-ink);
  letter-spacing: .01em;
}
.tb-stat__l { margin-top: 3px; color: var(--tb-ink-dim); font-size: 12px; line-height: 1.4; }

/* ==========================================================================
   Offer strip (banner text row)
   ========================================================================== */

.tb-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.tb-soffer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: var(--tb-r);
  background: linear-gradient(150deg, #1e3a63, #101d31);
  color: #fff;
  overflow: hidden;
  transition: transform .25s var(--tb-ease), box-shadow .25s var(--tb-ease);
}
.tb-soffer:hover { transform: translateY(-4px); box-shadow: var(--tb-sh-3); }
.tb-soffer::before {
  content: "";
  position: absolute;
  right: -26px; top: -26px;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(130, 219, 59, .35), transparent 68%);
  transition: transform .4s var(--tb-ease);
}
.tb-soffer:hover::before { transform: scale(1.35); }
.tb-soffer--sport { background: linear-gradient(150deg, #2f5019, #14240c); }
.tb-soffer--sport::before { background: radial-gradient(circle, rgba(242, 98, 42, .4), transparent 68%); }

.tb-soffer__k {
  position: relative;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tb-green-bright);
}
.tb-soffer--sport .tb-soffer__k { color: var(--tb-orange-l); }
.tb-soffer__v {
  position: relative;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.28;
}
.tb-soffer__d { position: relative; color: var(--tb-on-dark-dim); font-size: 12px; line-height: 1.45; }
.tb-soffer__go {
  position: relative;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tb-green-bright);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: gap .2s var(--tb-ease);
}
.tb-soffer:hover .tb-soffer__go { gap: 11px; }
.tb-soffer__go svg { width: 13px; height: 13px; }
.tb-soffer--sport .tb-soffer__go { color: var(--tb-orange-l); }

/* ==========================================================================
   Mid-content offer banner (inserted between prose blocks)
   ========================================================================== */

.tb-band {
  position: relative;
  padding: 20px 22px;
  margin: 0 0 16px;
  border-radius: var(--tb-r);
  overflow: hidden;
  background: radial-gradient(120% 140% at 12% 20%, #1e3357 0%, #14243d 55%, #0e1a2c 100%);
  box-shadow: var(--tb-sh-2);
}

.tb-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(80% 120% at 20% 50%, #000 15%, transparent 78%);
  pointer-events: none;
}

.tb-band::after {
  content: "";
  position: absolute;
  right: -60px; top: 50%;
  width: 260px; height: 260px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 169, 41, .28), transparent 66%);
  animation: tb-glow 5.5s var(--tb-ease) infinite;
  pointer-events: none;
}
.tb-band--sport::after { background: radial-gradient(circle, rgba(242, 98, 42, .28), transparent 66%); }
.tb-band--gold::after { background: radial-gradient(circle, rgba(246, 179, 35, .26), transparent 66%); }

.tb-band__lb {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 4px 11px;
  border-radius: var(--tb-r-pill);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--tb-green-bright);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tb-band__lb svg { width: 13px; height: 13px; }
.tb-band--sport .tb-band__lb { color: var(--tb-orange-l); }
.tb-band--gold .tb-band__lb { color: var(--tb-gold); }

.tb-band__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 10px;
  align-items: stretch;
}

.tb-band__cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.tb-band__note {
  position: relative;
  margin-top: 10px;
  color: var(--tb-on-dark-dim);
  font-size: 11.5px;
  line-height: 1.5;
}

/* the offer rows reuse .tb-ocard, but stretch to fill the band grid */
.tb-band__grid .tb-ocard { height: 100%; }

@media (max-width: 520px) {
  .tb-band { padding: 16px; }
  .tb-band__cta .tb-btn { width: 100%; }
}

/* ==========================================================================
   Odds ticker (betting page detail)
   ========================================================================== */

.tb-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 0 14px;
  margin-bottom: 16px;
  border-radius: var(--tb-r);
  background: var(--tb-chrome-800);
  overflow: hidden;
}
.tb-ticker__lb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tb-ticker__lb i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tb-red);
  animation: tb-blink 1.4s var(--tb-ease) infinite;
}
@keyframes tb-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.tb-ticker__vp { flex: 1 1 auto; overflow: hidden; padding: 11px 0; }
.tb-ticker__row {
  display: flex;
  gap: 26px;
  width: max-content;
  animation: tb-marquee 34s linear infinite;
}
.tb-ticker:hover .tb-ticker__row { animation-play-state: paused; }
@keyframes tb-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.tb-ticker__i {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tb-on-dark-2);
  font-size: 12.5px;
  white-space: nowrap;
}
.tb-ticker__i b { color: #fff; font-weight: 700; }
.tb-ticker__od {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--tb-r-sm);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tb-ticker__od svg { width: 11px; height: 11px; }
.tb-ticker__od--up { color: var(--tb-green-bright); }
.tb-ticker__od--dn { color: #ff7a6e; }

/* ==========================================================================
   Providers row
   ========================================================================== */

.tb-provs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.tb-prov {
  display: grid;
  place-items: center;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: var(--tb-r);
  background: var(--tb-canvas);
  border: 1px solid var(--tb-line-light);
  color: var(--tb-ink-2);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  transition: transform .25s var(--tb-ease), border-color .25s var(--tb-ease), color .25s var(--tb-ease), background .25s var(--tb-ease);
}
.tb-prov:hover {
  transform: translateY(-3px);
  background: #fff;
  border-color: rgba(76, 169, 41, .5);
  color: var(--tb-green-d);
}
.tb-prov img { max-height: 30px; width: auto; object-fit: contain; }

/* ==========================================================================
   Callout / note
   ========================================================================== */

.tb-note {
  display: flex;
  gap: 13px;
  padding: 16px 18px;
  margin: 0 0 18px;
  border-radius: var(--tb-r);
  background: rgba(246, 179, 35, .1);
  border-left: 4px solid var(--tb-gold);
  color: var(--tb-ink-2);
  font-size: 14px;
  line-height: 1.65;
}
.tb-note svg { width: 20px; height: 20px; flex: none; color: #c88a05; margin-top: 2px; }
.tb-note b { color: var(--tb-ink); }

.tb-note--rg { background: rgba(224, 57, 43, .08); border-left-color: var(--tb-red); }
.tb-note--rg svg { color: var(--tb-red); }

/* ==========================================================================
   SEO text block with "read more"
   ========================================================================== */

.tb-seo { position: relative; }
.tb-seo__body {
  position: relative;
  max-height: 168px;
  overflow: hidden;
  transition: max-height .5s var(--tb-ease);
}
.tb-seo__body::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 90px;
  background: linear-gradient(180deg, transparent, var(--tb-card));
  transition: opacity .35s var(--tb-ease);
}
.tb-seo.is-open .tb-seo__body { max-height: 4200px; }
.tb-seo.is-open .tb-seo__body::after { opacity: 0; }
.tb-seo__more {
  display: block;
  width: 100%;
  margin-top: 12px;
  color: var(--tb-green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  transition: color .2s var(--tb-ease);
}
.tb-seo__more:hover { color: var(--tb-green-d); }
.tb-seo__more span { display: inline-flex; align-items: center; gap: 6px; }
.tb-seo__more svg { width: 15px; height: 15px; transition: transform .3s var(--tb-ease); }
.tb-seo.is-open .tb-seo__more svg { transform: rotate(180deg); }

/* ==========================================================================
   Download buttons (app page)
   ========================================================================== */

.tb-dls { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }

.tb-dl {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 18px;
  border-radius: var(--tb-r);
  background: linear-gradient(150deg, #24344f, #141f34);
  color: #fff;
  box-shadow: var(--tb-sh-2);
  transition: transform .25s var(--tb-ease), box-shadow .25s var(--tb-ease);
}
.tb-dl:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(12, 20, 37, .34); }
.tb-dl svg { width: 28px; height: 28px; flex: none; }
.tb-dl__t { line-height: 1.25; }
.tb-dl__t { display: block; }
.tb-dl__t i { font-style: normal; display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-on-dark-dim); }
.tb-dl__t b { display: block; font-size: 15px; font-weight: 800; }
.tb-dl--green { background: linear-gradient(150deg, #4ca929, #2f7a17); }
.tb-dl--green .tb-dl__t i { color: rgba(255, 255, 255, .8); }

@media (max-width: 520px) {
  .tb-dls { flex-direction: column; }
  .tb-dl { justify-content: center; }
}

/* ==========================================================================
   Requirement spec cards
   ========================================================================== */

.tb-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.tb-spec {
  padding: 18px;
  border-radius: var(--tb-r);
  background: var(--tb-canvas);
  border: 1px solid var(--tb-line-light);
  transition: transform .25s var(--tb-ease), border-color .25s var(--tb-ease);
}
.tb-spec:hover { transform: translateY(-3px); border-color: rgba(76, 169, 41, .5); }
.tb-spec__h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--tb-ink);
}
.tb-spec__h svg { width: 20px; height: 20px; color: var(--tb-green-d); }
.tb-spec__l { display: grid; gap: 9px; }
.tb-spec__l li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--tb-line-light);
  font-size: 13.5px;
  color: var(--tb-ink-2);
}
.tb-spec__l li:last-child { border-bottom: 0; padding-bottom: 0; }
.tb-spec__l b { color: var(--tb-ink); text-align: right; }

/* ==========================================================================
   Anchor nav (in-page)
   ========================================================================== */

.tb-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 18px;
  margin-bottom: 16px;
  border-radius: var(--tb-r);
  background: var(--tb-card);
  box-shadow: var(--tb-sh-1);
}
.tb-anchors__lb {
  width: 100%;
  margin-bottom: 4px;
  color: var(--tb-ink-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tb-anchor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--tb-r-pill);
  background: var(--tb-canvas);
  border: 1px solid var(--tb-line-light);
  color: var(--tb-ink-2);
  font-size: 12.5px;
  font-weight: 600;
  transition: background .2s var(--tb-ease), color .2s var(--tb-ease), border-color .2s var(--tb-ease), transform .2s var(--tb-ease);
}
.tb-anchor:hover {
  background: var(--tb-chrome-800);
  border-color: var(--tb-chrome-800);
  color: #fff;
  transform: translateY(-2px);
}
.tb-anchor svg { width: 14px; height: 14px; }

/* ==========================================================================
   Filter pills (promotions)
   ========================================================================== */

.tb-fpills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.tb-fpill {
  padding: 9px 26px;
  border-radius: var(--tb-r-pill);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--tb-on-dark-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: background .25s var(--tb-ease), color .25s var(--tb-ease), border-color .25s var(--tb-ease), transform .2s var(--tb-ease);
}
.tb-fpill:hover { color: #fff; transform: translateY(-2px); }
.tb-fpill.is-on {
  background: linear-gradient(180deg, var(--tb-green-l), var(--tb-green-d));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(76, 169, 41, .4);
}

/* ==========================================================================
   404
   ========================================================================== */

.tb-404 {
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--tb-head-h));
  padding: 60px 20px;
  text-align: center;
}
.tb-404__n {
  font-family: var(--tb-font-cond);
  font-size: clamp(96px, 22vw, 210px);
  font-weight: 700;
  line-height: .9;
  color: var(--tb-green);
  text-shadow: 0 10px 40px rgba(76, 169, 41, .3);
}
.tb-404__t { margin: 6px 0 10px; font-size: 26px; font-weight: 800; }
.tb-404__p { max-width: 460px; margin: 0 auto 24px; color: var(--tb-ink-dim); }

/* ---- narrow-width combo header ------------------------------------------
   At 320-400px the tag + name + "Ver apuestas" row leaves the nowrap name a
   few pixels short, so text-overflow:ellipsis truncated a whole label
   ("UEFA Top Clu..."). Tightening the paddings and letter-spacing recovers
   ~16px - enough for the longest name used in this block. */
@media (max-width: 400px) {
  .tb-combo__top { gap: 7px; padding: 9px 10px; }
  .tb-combo__tag { padding: 3px 6px; letter-spacing: .03em; }
  .tb-combo__see { font-size: 10.5px; }
}