/* td design kit — structure and components, ported from the designer's DC export
   (tmp/td/monobrand/Casino Dark.dc.html). COLOUR is not defined here: every rule
   reads the palette custom properties an inheriting theme's theme.css sets, so
   the same stylesheet serves the dark and the light site.

   The export styled everything inline and switched layouts from JS
   (`window.innerWidth < 1160`). Here the same breakpoint is a media query, so the
   markup ships one DOM that works before any script runs — which is what a static
   build needs.

   Sections: 1 base · 2 layout · 3 buttons · 4 header · 5 mobile nav + drawer
             6 modals/popups · 7 footer                                        */

/* ------------------------------------------------------------------ 1 base */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }
input, button, select, textarea { font: inherit; }
img { max-width: 100%; }
::selection { background: var(--brand); color: var(--brand-ink); }

@keyframes td-sheen { from { transform: translateX(-120%); } to { transform: translateX(220%); } }
@keyframes td-pulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes td-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------------------------------------------------------------- 2 layout */

.td-page {
  position: relative;
  min-height: 100vh;
  background: var(--bg);
  /* Just the closing gap under the footer. Below 1160px this grows to clear the
     fixed bottom bar (see the media query by .td-mobilenav). */
  padding-bottom: 24px;
  /* CLIP, not hidden. Both stop the aura blobs from producing a horizontal
     scrollbar, but `hidden` makes this element a scroll CONTAINER — and that is
     the container every descendant `position: sticky` then measures itself
     against, so nothing inside the page could ever stick (the document is what
     actually scrolls). `clip` clips without creating one. */
  overflow-x: clip;
}

/* The three blurred colour blobs behind everything (decorative, fixed). */
.td-aura { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.td-aura__blob { position: absolute; border-radius: 50%; }
.td-aura__blob--a {
  top: -10%; left: -8%; width: 52vw; height: 52vw; filter: blur(40px); opacity: .5;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--brand) 42%, transparent), transparent 68%);
}
.td-aura__blob--b {
  top: 24%; right: -14%; width: 46vw; height: 46vw; filter: blur(44px); opacity: .38;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 66%);
}
.td-aura__blob--c {
  bottom: -16%; left: 22%; width: 44vw; height: 44vw; filter: blur(50px); opacity: .3;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%);
}

/* Padding and gap are the export's own figures: the top padding is what lifts the
   first block clear of the sticky header, the gap is the rhythm between blocks. */
.td-main {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 30px) clamp(12px, 3vw, 26px) 0;
  display: flex;
  flex-direction: column;
  /* Named so a block that must sit CLOSER than the page rhythm can subtract it
     (see .td-crumbs, which belongs to the hero above it, not to the next block). */
  --stack-gap: clamp(44px, 6vw, 86px);
  gap: var(--stack-gap);
}

/* The frosted panel every block sits on. */
.td-pane {
  position: relative;
  border: 1px solid var(--stroke);
  border-radius: 24px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hi);
}

/* The top gloss of a frosted panel — its strength is palette-dependent
   (--pane-gloss), which is why it is a variable and not a literal. */
.td-pane__gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--pane-gloss), transparent var(--pane-gloss-stop, 42%));
}

.td-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

/* Title + a badge beside it (the "LIVE" pill on Now Winning). */
.td-section__headline { display: flex; align-items: center; gap: 12px; }

.td-section__title {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -.03em;
}

/* Figures — amounts, ranks, promo codes, counters — are set in the export's
   second face (Share Tech), which is what gives them their ticker look. */
.td-num { font-family: 'Share Tech', monospace; }

/* --------------------------------------------------------------- 3 buttons */

/* THE OFFER RULE. An offer CTA is a <button>: it performs an action (the tracker
   builds a URL and redirects) rather than pointing at a document — only a real
   page of this site is an <a>. Both wear the same component classes, so wherever
   one lands on a button the browser's own chrome has to go.
   :where() keeps this at zero specificity, so every component rule below still
   sets its own padding, border, colour and alignment on top. */
:where(
  button.td-btn, button.td-cta, button.td-navlink, button.td-navgroup__link,
  button.td-header__signin, button.td-footer__link, button.td-mobilenav__item,
  button.td-drawer__item, button.td-tile, button.td-winner, button.td-nowcard,
  .td-footer__social button
) {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.td-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.td-btn--primary {
  position: relative;
  overflow: hidden;
  font-weight: 800;
  color: var(--brand-ink);
  background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 88%, #fff), var(--brand));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.td-btn--primary:hover { color: var(--brand-ink); transform: translateY(-2px); }

/* The light sweep across the primary CTA. A span, not a pseudo-element, because
   the export animates it and per-site class mangling must be able to rename it. */
.td-btn__sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: td-sheen 3.4s ease-in-out infinite;
  pointer-events: none;
}

.td-btn--ghost {
  color: var(--text);
  background: var(--glass-2);
  border-color: var(--stroke);
}
.td-btn--ghost:hover { color: var(--brand); border-color: var(--brand-line); transform: translateY(-2px); }

.td-btn--quiet {
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-dim);
  background: transparent;
  border-color: var(--stroke);
}
.td-btn--quiet:hover { color: var(--brand); border-color: var(--brand-line); }

/* Round icon buttons — carousel arrows, modal close. */
.td-iconbtn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--stroke);
  border-radius: 50%;
  color: var(--text-dim);
  background: var(--glass-2);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.td-iconbtn:hover { color: var(--brand); border-color: var(--brand-line); }
.td-iconbtn[disabled] { opacity: .45; cursor: default; }
.td-iconbtn[disabled]:hover { color: var(--text-dim); border-color: var(--stroke); }

/* ---------------------------------------------------------------- 4 header */

.td-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 10px clamp(10px, 3vw, 22px) 0;
}

.td-header__bar {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--stroke);
  border-radius: 22px;
  background: var(--glass-2);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hi);
}

.td-logo { position: relative; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.td-logo__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #FF7A00));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 45%, transparent);
}
.td-logo__text { font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.td-logo__accent { color: var(--brand); }
/* A FIXED height, not a cap: a client wordmark whose SVG carries a viewBox but no
   width/height has no intrinsic size, and `max-height` alone lets the flex row
   resolve it to zero — the logo silently disappears. */
.td-logo__img { display: block; height: 34px; width: auto; }

.td-header__nav { flex: 1; display: flex; justify-content: center; gap: 2px; }
.td-header__spacer { flex: 1; }

.td-navlink {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  /* One line per entry — a wrapped page name would grow the whole header bar. */
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.td-navlink:hover { background: var(--glass-2); color: var(--text); }

/* Dropdown: hover on pointer devices, [data-open] for keyboard/touch. */
.td-navgroup { position: relative; }
.td-navgroup__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  margin: 6px 0 0;
  padding: 8px;
  min-width: 190px;
  max-height: 300px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--stroke-2);
  border-radius: 16px;
  background: var(--glass-2);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--shadow);
  display: none;
}
.td-navgroup:hover .td-navgroup__menu,
.td-navgroup:focus-within .td-navgroup__menu,
.td-navgroup[data-open] .td-navgroup__menu { display: block; }

.td-navgroup__link {
  display: block;
  padding: 10px 14px;
  border-radius: 11px;
  font-size: 14px;
  color: var(--text-dim);
  white-space: nowrap;
}
.td-navgroup__link:hover { background: var(--brand-soft); color: var(--brand); }

.td-header__signin {
  padding: 11px 16px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  transition: background .18s ease;
}
.td-header__signin:hover { background: var(--brand-soft); }

/* The export swapped the desktop nav for a bottom bar at 1160px. The NAV goes
   (the bottom bar carries those entries), but Sign In stays: it is one of the two
   things a player comes to the header for, and the bottom bar has no slot for it.
   It is the CTAs that shrink instead — see the steps below. */
@media (max-width: 1159px) {
  .td-header__nav { display: none; }
  .td-header__bar { padding: 10px 12px; }
}

/* Both CTAs must survive down to the narrowest phone next to a client wordmark of
   unknown length, so they step down in size rather than one of them disappearing.
   Neither ever wraps: a two-line CTA would grow the whole bar.
   Measured against the longest real labels (de: "Anmelden" + "Registrieren"). */
.td-header__signin,
.td-header__bar .td-btn { flex-shrink: 0; white-space: nowrap; }

/* On a phone the WORDMARK yields, never the CTAs. `.td-logo` is flex-shrink: 0
   for the desktop bar, which means a wide client wordmark (an 8:1 lettermark is
   normal) pushes Register clean off the bar — measured 73px past the edge at
   390px. So below the desktop breakpoint the logo may shrink, bounded by an
   explicit max-width per step; `object-fit: contain` keeps it undistorted while
   the height stays fixed (a bare max-height would collapse a viewBox-only SVG to
   zero — see .td-logo__img above). */
@media (max-width: 1159px) {
  .td-logo { min-width: 0; flex-shrink: 1; }
  .td-logo__img { max-width: 150px; object-fit: contain; object-position: left center; }
  .td-logo__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 700px) {
  .td-header__signin { padding: 9px 12px; font-size: 13px; }
  .td-header__bar .td-btn { padding: 10px 15px; font-size: 13px; }
}

@media (max-width: 480px) {
  .td-header__bar { padding: 9px 10px; gap: 2px; }
  .td-header__signin { padding: 8px 9px; font-size: 12.5px; border-radius: 11px; }
  .td-header__bar .td-btn { padding: 9px 12px; font-size: 12.5px; border-radius: 12px; }
  /* The wordmark gives up size first — it is recognisable smaller, a CTA that
     does not fit is simply gone. */
  .td-logo { gap: 7px; }
  .td-logo__mark { width: 30px; height: 30px; border-radius: 10px; }
  .td-logo__img { height: 30px; max-width: 116px; }
  .td-logo__text { font-size: 15px; }
}

@media (max-width: 380px) {
  .td-header__signin { padding: 7px 7px; font-size: 12px; }
  .td-header__bar .td-btn { padding: 8px 10px; font-size: 12px; }
  .td-logo__mark { width: 27px; height: 27px; }
  .td-logo__img { height: 27px; max-width: 92px; }
  .td-logo__text { font-size: 14px; }
}

/* -------------------------------------------------- 5 mobile nav + drawer */

.td-mobilenav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  align-items: stretch;
  justify-content: space-around;
  gap: 2px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--stroke);
  background: var(--glass-2);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
}

.td-mobilenav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  min-width: 0;
}
.td-mobilenav__item:hover { color: var(--brand); }
/* Page names are as long as the client's language makes them ("Bonus ohne
   Einzahlung"): two lines at most, so the bar keeps its height. */
.td-mobilenav__label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-align: center;
  line-height: 1.2;
}

@media (max-width: 1159px) {
  .td-mobilenav { display: flex; }
  .td-page { padding-bottom: 104px; }
}

/* Slide-in menu. Open state rides body[data-nav-open] — an ATTRIBUTE, never a
   class, so per-site class mangling cannot break the toggle. */
.td-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
}
body[data-nav-open] .td-drawer { display: block; }

.td-drawer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }

.td-drawer__panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 92px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--stroke-2);
  border-radius: 22px;
  background: var(--bg);
  box-shadow: var(--shadow);
  animation: td-rise .22s ease both;
}

.td-drawer__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.td-drawer__item:hover { border-color: var(--brand-line); color: var(--brand); }
.td-drawer__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
}
.td-drawer__label { flex: 1; }

.td-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border: 0;
  border-radius: 16px;
  background: var(--glass-2);
  color: var(--text-dim);
  font-weight: 700;
  cursor: pointer;
}

/* ------------------------------------------------------- 6 modals / popups */

.td-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.td-modal[data-open] { display: flex; }
.td-modal__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }

.td-modal__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--stroke-2);
  border-radius: 22px;
  background: var(--bg);
  box-shadow: var(--shadow);
}

.td-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.td-modal__title { margin: 0; font-size: 17px; font-weight: 800; }

.td-langgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.td-langgrid__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: var(--glass);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
}
.td-langgrid__item:hover { border-color: var(--brand-line); color: var(--brand); }
.td-langgrid__item[aria-current="true"] {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
}

/* Bottom-right offer popup. Dismissal is remembered in localStorage by kit.js. */
.td-popup {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 75;
  width: min(320px, calc(100vw - 36px));
  padding: 18px;
  border: 1px solid var(--brand-line);
  border-radius: 22px;
  background: var(--bg);
  box-shadow: var(--shadow);
  animation: td-rise .3s ease both;
}
.td-popup[hidden] { display: none; }
.td-popup__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 60%);
}
.td-popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--glass);
  color: var(--text-dim);
  cursor: pointer;
}
.td-popup__close:hover { color: var(--brand); }
.td-popup__label { position: relative; margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.td-popup__sub { position: relative; margin: 6px 0 0; font-size: 13px; color: var(--text-mute); }
.td-popup__offer { position: relative; margin: 12px 0 16px; font-size: 26px; color: var(--text); }
.td-popup__cta { position: relative; width: 100%; }

@media (max-width: 1159px) {
  .td-popup { bottom: 104px; }
}

/* ---------------------------------------------------------------- 7 footer */

.td-footer {
  position: relative;
  z-index: 1;
  margin-top: clamp(36px, 5vw, 64px);
  padding: 0 clamp(12px, 3vw, 26px);
}

.td-footer__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--stroke);
  border-radius: 26px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
}

.td-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

@media (max-width: 900px) {
  .td-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .td-footer__cols { grid-template-columns: 1fr; }
}

.td-footer__brandline { margin: 18px 0 10px; font-size: 16px; font-weight: 800; }
.td-footer__note { margin: 0 0 18px; font-size: 14px; line-height: 1.65; color: var(--text-mute); max-width: 34ch; }

.td-footer__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; max-width: 300px; }
.td-badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--glass-2);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mute);
}

/* Column headings are brand-coloured small caps in the export, not plain white. */
.td-footer__coltitle {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}
.td-footer__link { display: block; margin-bottom: 12px; font-size: 14px; color: var(--text-dim); }
.td-footer__link:hover { color: var(--brand); }

.td-footer__social { display: flex; gap: 10px; margin-top: 16px; }
.td-footer__social a,
.td-footer__social button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--glass-2);
  color: var(--text-dim);
}
.td-footer__social a:hover,
.td-footer__social button:hover { color: var(--brand); }

/* The footer's language button is a filled pill in the export, not an outline. */
.td-footer__lang {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border: 0;
  border-radius: 14px;
  background: var(--glass-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.td-footer__lang:hover { color: var(--brand); }

.td-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(20px, 3vw, 32px);
  padding-top: 18px;
  border-top: 1px solid var(--stroke);
  font-size: 13px;
  color: var(--text-mute);
}
.td-footer__bottom p { margin: 0; }
.td-footer__marks { display: flex; gap: 8px; }

/* ------------------------------------------------------------------ 8 hero */

/* Three layouts of the same slider, picked per site (a hash of the site slug):
     a — split: copy on the glass panel, photo on the right;
     b — full-bleed photo, centred copy, arrows + counter under it;
     c — full-bleed photo, copy bottom-left, dots + arrows bottom-right.
   The track slides with a transform; kit.js only moves an index, so a build
   without JS still shows the first slide. */

.td-hero {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.td-hero--a {
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hi);
}

.td-hero__track { display: flex; transition: transform .8s cubic-bezier(.65, 0, .2, 1); }

.td-hero__slide { position: relative; flex: 0 0 100%; }

/* -- variant a ------------------------------------------------------------ */
.td-hero--a .td-hero__slide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: stretch;
  min-height: clamp(320px, 34vw, 420px);
}
.td-hero--a .td-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 26px);
  padding: clamp(24px, 4vw, 52px) clamp(22px, 3.4vw, 46px) clamp(70px, 8vw, 86px);
}
.td-hero--a .td-hero__title {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.038em;
  text-wrap: pretty;
}
.td-hero--a .td-hero__media { position: relative; min-height: 220px; overflow: hidden; }
.td-hero--a .td-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.td-hero--a .td-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 45%, transparent) 34%, transparent 72%);
}

/* -- variants b + c (photo behind the copy) ------------------------------- */
.td-hero--b .td-hero__slide,
.td-hero--c .td-hero__slide { background: #0E0F12; display: flex; flex-direction: column; }
.td-hero--b .td-hero__slide {
  min-height: clamp(340px, 42vw, 520px);
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(20px, 2.6vw, 30px);
  padding: clamp(48px, 7vw, 86px) clamp(20px, 6vw, 90px) clamp(86px, 9vw, 110px);
}
.td-hero--c .td-hero__slide {
  min-height: clamp(330px, 38vw, 470px);
  justify-content: flex-end;
  gap: clamp(18px, 2.4vw, 26px);
  padding: clamp(56px, 8vw, 90px) clamp(22px, 3.6vw, 50px) clamp(26px, 3.4vw, 44px);
}
.td-hero--b .td-hero__slide > img,
.td-hero--c .td-hero__slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.td-hero--b .td-hero__scrim { position: absolute; inset: 0; background: radial-gradient(90% 90% at 50% 50%, rgba(6, 7, 9, .5), rgba(6, 7, 9, .86) 100%); }
.td-hero--c .td-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 7, 9, .15) 0%, rgba(6, 7, 9, .45) 45%, rgba(6, 7, 9, .92) 100%); }

.td-hero--b .td-hero__title,
.td-hero--c .td-hero__title {
  position: relative;
  margin: 0;
  font-weight: 800;
  color: var(--on-media);
}
.td-hero--b .td-hero__title {
  max-width: 15ch;
  font-size: clamp(30px, 5.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.042em;
  text-wrap: balance;
  text-shadow: 0 10px 44px rgba(0, 0, 0, .5);
}
.td-hero--c .td-hero__title {
  max-width: min(680px, 88%);
  font-size: clamp(26px, 4.2vw, 48px);
  line-height: 1.04;
  letter-spacing: -.04em;
  text-shadow: 0 8px 32px rgba(0, 0, 0, .45);
  text-wrap: pretty;
}

.td-hero__actions { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
.td-hero--b .td-hero__actions { justify-content: center; }

/* Pill CTAs — the hero's buttons are rounder and larger than the chrome's. */
.td-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  color: var(--brand-ink);
  background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 88%, #fff), var(--brand));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--brand) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform .25s ease;
}
.td-cta:hover { color: var(--brand-ink); transform: translateY(-2px); }

.td-cta--ghost {
  padding: 15px 24px;
  font-weight: 700;
  color: var(--text);
  background: var(--glass-2);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--hi);
  transition: transform .25s ease, border-color .25s ease, color .25s ease;
}
.td-cta--ghost:hover { transform: translateY(-2px); border-color: var(--brand-line); color: var(--brand); }

/* On a photo the ghost CTA keeps the light-on-media palette in both themes. */
.td-hero--b .td-cta--ghost,
.td-hero--c .td-cta--ghost {
  color: var(--on-media);
  background: var(--media-glass);
  border-color: var(--media-stroke);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* -- slider controls ------------------------------------------------------ */
.td-hero__nav { position: absolute; display: flex; align-items: center; gap: 14px; }
.td-hero--a .td-hero__nav { left: clamp(22px, 3.4vw, 46px); bottom: clamp(20px, 2.6vw, 30px); }
.td-hero--b .td-hero__nav { left: 50%; transform: translateX(-50%); bottom: clamp(18px, 2.6vw, 28px); gap: 8px; }
.td-hero--c .td-hero__nav { right: clamp(22px, 3.6vw, 50px); bottom: clamp(20px, 2.6vw, 30px); }

.td-dots { display: flex; align-items: center; gap: 7px; }
.td-dots__dot {
  width: 9px;
  height: 6px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: var(--stroke-2);
  cursor: pointer;
  transition: all .4s ease;
}
.td-dots__dot[aria-current="true"] { width: 30px; background: var(--brand); }
/* Over a photo the inactive dots need the light-on-media tint. */
.td-hero--c .td-dots__dot { background: rgba(255, 255, 255, .45); }
.td-hero--c .td-dots__dot[aria-current="true"] { background: var(--brand); }

.td-hero__arrows { display: flex; gap: 8px; }
.td-mediabtn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--media-stroke);
  background: var(--media-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  color: var(--on-media);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.td-mediabtn:hover { color: var(--brand); border-color: var(--brand-line); }

.td-hero__counter {
  display: grid;
  place-items: center;
  min-width: 74px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--media-stroke);
  background: var(--glass-2);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  font-size: 15px;
  color: var(--on-media);
}

/* A one-slide hero has nothing to navigate. */
/* Variant A puts the controls on the COPY PANEL, not on the photo — so they take
   the panel's foreground colour. In b/c the slide is one full-bleed image and
   the media colours (white on the scrim) are right. */
.td-hero--a .td-hero__nav .td-mediabtn {
  color: var(--text);
  border-color: var(--stroke-2);
  background: var(--glass-2);
}
.td-hero--a .td-hero__nav .td-mediabtn:hover { color: var(--brand); border-color: var(--brand-line); }

.td-hero[data-slides="1"] .td-hero__nav { display: none; }

/* Variant c keeps its controls in the bottom-right corner and its CTAs bottom-left,
   so the two share a row — fine until the row is too narrow to hold both. Below
   that the slide reserves a strip for them, the way a and b always do. */
@media (max-width: 560px) {
  .td-hero--c .td-hero__slide { padding-bottom: 76px; }
}

/* ----------------------------------------------------------- 9 game blocks */

/* Top Games: a grid that ships EVERY tile and clips itself to two rows until
   "See All" flips [data-expanded] — the tiles stay in the HTML for crawlers
   instead of being revealed by script. */
.td-games { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }

.td-games__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
}

@media (max-width: 1159px) { .td-games__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .td-games__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .td-games__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Collapsed: hide everything past the second row. The tile counts match the
   column counts above, so a row is never half-shown. */
.td-games__grid:not([data-expanded]) > *:nth-child(n+13) { display: none; }
@media (max-width: 1159px) { .td-games__grid:not([data-expanded]) > *:nth-child(n+9) { display: none; } }
@media (max-width: 720px)  { .td-games__grid:not([data-expanded]) > *:nth-child(n+7) { display: none; } }
@media (max-width: 460px)  { .td-games__grid:not([data-expanded]) > *:nth-child(n+5) { display: none; } }

.td-tile {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: var(--glass);
  box-shadow: inset 0 1px 0 var(--hi);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s ease;
}
.td-tile:hover { transform: translateY(-6px); border-color: var(--brand-line); }

.td-tile__media { display: block; position: relative; aspect-ratio: 1 / 1.2; overflow: hidden; }
.td-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.td-tile__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 7, 9, .9) 0%, rgba(6, 7, 9, 0) 52%); }

.td-tile__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.92);
  display: grid;
  place-items: center;
  width: clamp(56px, 32%, 74px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .42);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .6);
  color: #fff;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), background .3s ease, border-color .3s ease;
}
/* Hover alone (touch, no-JS) still tints and settles the badge; the MAGNETIC
   offset on top of it is an inline transform kit.js writes while the pointer is
   inside the tile — see its [data-magnetic] block. */
.td-tile:hover .td-tile__play { transform: translate(-50%, -50%) scale(1); background: color-mix(in srgb, var(--brand) 78%, transparent); }
.td-tile__play svg { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); margin-left: 2px; }

.td-tile__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 11px 12px; }
.td-tile__name {
  display: block;
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -- horizontal rails (Our Winners, Now Winning) -------------------------- */

.td-rail { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 20px); }
.td-rail__strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px 2px 6px;
}
.td-rail__strip::-webkit-scrollbar { display: none; }
.td-rail__arrows { display: flex; gap: 8px; }

.td-railbtn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 1px solid var(--stroke);
  background: var(--glass);
  color: var(--text);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.td-railbtn:hover { color: var(--brand); border-color: var(--brand-line); }

/* Our Winners card: avatar + game, nickname, amount. */
.td-winner {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 250px;
  padding: 11px;
  border-radius: 18px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 var(--hi);
}
.td-winner__avatar { width: 54px; height: 54px; border-radius: 13px; object-fit: cover; flex-shrink: 0; }
/* The card is a link (it goes through the tracker), so its lines are spans that
   have to be told to stack. */
.td-winner__body { display: block; min-width: 0; }
.td-winner__game { display: block; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-mute); }
.td-winner__name { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-winner__amount { display: block; margin-top: 2px; font-size: 16px; color: var(--brand); }

/* Now Winning card: a smaller tile with a live win pill. */
.td-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.td-live__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2FCF6B;
  animation: td-pulse 1.8s ease-in-out infinite;
}

.td-nowcard {
  flex: 0 0 auto;
  scroll-snap-align: start;
  /* Wide enough for a four-digit win with its currency next to the "Win" label —
     the export's demo amounts were two digits, the real ones are not. */
  width: 186px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 var(--hi);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s ease;
}
.td-nowcard:hover { transform: translateY(-5px); border-color: var(--brand-line); }
/* The card is a link, so its inner boxes are spans that have to be told to be
   boxes (aspect-ratio and absolute children need a block container). */
.td-nowcard__media { display: block; position: relative; aspect-ratio: 1 / 1.08; }
.td-nowcard__media img { width: 100%; height: 100%; object-fit: cover; }
.td-nowcard__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 7, 9, .88) 0%, rgba(6, 7, 9, 0) 55%); }
.td-nowcard__play {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(52px, 34%, 66px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .42);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
  color: #fff;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), background .3s ease;
}
.td-nowcard:hover .td-nowcard__play { background: color-mix(in srgb, var(--brand) 78%, transparent); }
.td-nowcard__win {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.td-nowcard__label {
  min-width: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.td-nowcard__amount {
  flex-shrink: 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 14px;
  /* One line, always: a wrapped pill breaks out of the card. */
  white-space: nowrap;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 40%, transparent);
}

/* --- live rotation ---------------------------------------------------------
   kit.js flags a card it is about to replace with data-live-swap, waits out the
   fade, rewrites the content, then fades it back.

   The transition lives on the ATTRIBUTE, not on the card, on purpose: every card
   type already transitions `transform` for its hover lift, and redeclaring
   `transition` on the base selector would silently kill that. Scoped this way
   the hover rule owns the card at rest and this one owns it only mid-swap.

   `translate` rather than `transform` for the same reason — it is an independent
   property, so the drift composes with a hover lift instead of replacing it. */
[data-live-card][data-live-swap] {
  transition: opacity .22s ease, translate .22s ease;
}
[data-live-card][data-live-swap="out"] { opacity: 0; translate: 0 7px; }
[data-live-card][data-live-swap="in"] { opacity: 1; translate: none; }

/* The ticker keeps rotating under reduced motion (the visitor asked for less
   movement, not for a dead lobby) but swaps instantly rather than fading. */
@media (prefers-reduced-motion: reduce) {
  [data-live-card][data-live-swap] { transition: none; }
}

/* ------------------------------------------------- 10 editorial (SEO body) */

/* The client's prose. The ingest wraps each <h2> region in <section class="td-seo">
   and turns an FAQ region into <details> pairs; everything inside is the client's
   own raw tags, styled here to match the export's blocks:
     <ol>    -> the "Numbered list" block (brand-chip counters);
     <ul>    -> the "Bulleted list" block (glass panel, glowing dots);
     <table> -> the "Info tables" block;
     <img>   -> full-width or floated, per the class the ingest assigns. */

/* Plain BLOCK flow on purpose, not a flex column: the prose has to wrap around
   the banners the ingest floats INSIDE it (.td-seo__img-float). A flex container
   is a block formatting context and would sit beside such a float at a narrowed
   width for its whole height instead of flowing under it.

   Which means the editorial rhythm is TOP MARGINS, carried by each element's own
   rule below (a `> * + *` shorthand would lose to them on specificity), with the
   opening element of a section reset back to zero. */
.td-seo { scroll-margin-top: 96px; }
.td-seo > * + * { margin-top: 16px; }
.td-seo > :first-child { margin-top: 0; }
.td-seo + .td-seo { margin-top: clamp(20px, 3vw, 34px); }

.td-seo h2 {
  margin: 0;
  font-size: clamp(23px, 3.1vw, 34px);
  font-weight: 800;
  letter-spacing: -.03em;
  text-wrap: pretty;
}
.td-seo h3 {
  margin: 26px 0 0;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.td-seo h4 {
  margin: 22px 0 0;
  font-size: 17px;
  font-weight: 800;
}
.td-seo p {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-dim);
  text-wrap: pretty;
}
.td-seo a { color: var(--brand); }
.td-seo strong { color: var(--text); }

/* Ordered list -> numbered cards with a brand chip. The counter is a ::before
   on the <li>, so the client's plain <ol><li> markup needs no extra elements. */
.td-seo ol {
  counter-reset: td-step;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 900px;
}
.td-seo ol > li {
  counter-increment: td-step;
  /* Absolute chip for the same reason as the bulleted list's dot: a flex <li>
     splits "<strong>Label</strong> sentence" into two columns. */
  position: relative;
  padding: 16px 18px 16px 72px;
  border-radius: 18px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 var(--hi);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-dim);
}
.td-seo ol > li::before {
  content: counter(td-step);
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--brand);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  font-family: 'Share Tech', monospace;
  font-size: 17px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 32%, transparent);
}

/* Unordered list -> one glass panel with glowing brand dots. */
.td-seo ul {
  margin: 16px 0 0;
  padding: clamp(16px, 2.2vw, 24px);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 900px;
  border-radius: 20px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 var(--hi);
}
/* The dot is ABSOLUTE, not a flex sibling. The client writes items as
   "<li><strong>Label:</strong> sentence</li>", and a flex <li> would turn the
   bold run and the sentence into two anonymous flex items — a ragged label
   column per item instead of one paragraph. */
.td-seo ul > li {
  position: relative;
  padding-left: 23px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-dim);
}
.td-seo ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft), 0 6px 14px color-mix(in srgb, var(--brand) 40%, transparent);
}

/* Tables -> the Info tables block. */
.td-seo table {
  width: 100%;
  max-width: 900px;
  border-collapse: collapse;
  font-size: 14px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 var(--hi);
}
.td-seo thead th {
  background: var(--glass-2);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.td-seo tr { border-bottom: 1px solid var(--stroke); }
.td-seo tr:last-child { border-bottom: 0; }
.td-seo th {
  text-align: left;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--text);
}
.td-seo tbody th { width: 42%; }
.td-seo td { padding: 14px 16px; color: var(--text-dim); }

/* A table wider than the panel scrolls inside it instead of the page. */
.td-seo__scroll { overflow-x: auto; }

/* Prose wrapped around a floated banner: the same rhythm, and the run's opening
   paragraph sits level with the top of the image. */
.td-seo__media-text > * + * { margin-top: 16px; }
.td-seo__media-text > img + p { margin-top: 0; }

/* Body imagery placed by the ingest (the archive's banners).

   The wide banner is capped at the resolution it actually HAS: the archive ships
   them 636-1280px wide, so drawing one across the full 1268px column upscales it
   — on a 2x display by up to 4x — and the art turns to mush. 720px is the widest
   it can be drawn while staying sharp. Left-aligned with the prose. */
.td-seo__img { display: block; width: 100%; max-width: 720px; border-radius: 20px; }
.td-seo__img-float { float: left; width: min(320px, 42%); margin: 4px 22px 14px 0; border-radius: 18px; }
.td-seo__media-text::after { content: ""; display: block; clear: both; }
@media (max-width: 640px) {
  .td-seo__img-float { float: none; width: 100%; margin: 0 0 14px; }
}

/* -- editorial runs + the blocks woven between them ------------------------ */

/* One run of prose sections between two promo blocks. The page's own flex gap is
   the airy one BETWEEN blocks; sections inside a run keep the tighter editorial
   rhythm of `.td-seo + .td-seo`, so the run is its own block formatting context. */
.td-editorial { display: flow-root; }

/* CARD placement: the operator's "50% banner, 50% text" — a promo card and one
   section of prose sharing a row, the side alternating down the page (jackpot and
   the bonus card on the right, the countdown on the left, as the export pairs
   them). The rest of the run continues full width underneath.

   A GRID, after two worse answers. Floating the card let only paragraphs wrap it:
   a list, a table or the FAQ grid beside one would narrow, collide or leave a
   hole. Putting the card in the flow at half width fixed that by giving up the
   text — and reserved half a row for nothing, which is the hole made permanent.
   A grid cell is its own formatting context, so whatever the prose contains lays
   itself out inside its column and can neither collide nor overflow.

   Source order follows visual order, so the stacked mobile layout reads the same
   way round as the desktop one and needs no `order` juggling. */
.td-editorial__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.6vw, 30px);
  /* Top-aligned: the card and the copy are rarely the same height, and stretching
     either to match the other would distort the card's art. */
  align-items: start;
}

/* The two are rarely the same height, and a section of prose is usually the
   taller one — top-aligning alone would just move the hole from beside the card
   to underneath it. Sticky keeps the offer in view for as long as its half of the
   row lasts, which fills that space with the one thing on the page that benefits
   from being followed. `align-items: start` above is what leaves the grid AREA
   full-height for it to travel inside.
   Offset clears the sticky header (.td-header, top: 0). */
.td-editorial__aside {
  position: sticky;
  top: clamp(78px, 9vw, 96px);
}

@media (max-width: 720px) {
  .td-editorial__split { grid-template-columns: 1fr; }
  /* One column: the card is its own row, so sticking would pin it to nothing. */
  .td-editorial__aside { position: static; }
}

/* -- FAQ accordion (native <details>, no script) --------------------------- */

.td-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; }
/* The section heading and any intro prose span the grid — only the accordion
   items are columns. Without this the <h2> takes a cell and the first row starts
   one column in. */
.td-faq > :not(details) { grid-column: 1 / -1; }

.td-faq__item {
  border-radius: 18px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 var(--hi);
  overflow: hidden;
  transition: border-color .3s ease;
}
.td-faq__item[open] { border-color: var(--brand-line); }

.td-faq__item > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.td-faq__item > summary::-webkit-details-marker { display: none; }
.td-faq__item > summary::after {
  content: "+";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 10px;
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  color: var(--brand);
  font-size: 18px;
  line-height: 1;
  transition: transform .35s ease;
}
.td-faq__item[open] > summary::after { transform: rotate(45deg); }
.td-faq__item > p,
.td-faq__item > div { margin: 0; padding: 0 16px 16px; font-size: 14px; line-height: 1.7; color: var(--text-dim); }

/* -------------------------------------------------- 11 editorial headline */

/* "Text block" — the H1 + intro panel above the table of content. Four layouts
   in the export; the site's is picked at ingest by hashing the slug. */
.td-lede {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px) clamp(22px, 4.5vw, 56px);
  border-radius: 28px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hi);
}
.td-lede__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 90% at 50% 0%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 62%);
}
.td-lede__seam {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 60%);
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
}
.td-lede__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.td-lede__title {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.038em;
  text-wrap: pretty;
}
.td-lede__title em { font-style: normal; color: var(--brand); }
.td-lede__text { margin: 0; font-size: clamp(13.5px, 1.3vw, 15.5px); line-height: 1.7; color: var(--text-dim); text-wrap: pretty; }
.td-lede__kicker {
  align-self: flex-start;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* a — centred; b — kicker above a left-aligned title; c — brand-tinted word in
   the title; d — a rule between title and copy. */
.td-lede--a { text-align: center; }
.td-lede--a .td-lede__inner { align-items: center; margin: 0 auto; }
.td-lede--b .td-lede__glow { background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%); }
.td-lede--d .td-lede__rule { height: 1px; background: var(--stroke); }

/* ------------------------------------------------ 12 toc + breadcrumbs */

.td-toc {
  padding: clamp(16px, 2.4vw, 26px);
  border-radius: 22px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 var(--hi);
}
.td-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.td-toc__title { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.td-toc__toggle {
  padding: 9px 15px;
  border: 1px solid var(--stroke);
  border-radius: 11px;
  background: var(--glass-2);
  color: var(--text-dim);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.td-toc__toggle:hover { color: var(--brand); border-color: var(--brand-line); }

/* A thirteen-heading article makes a thirteen-line panel: cap the list and let it
   scroll INSIDE the block instead of pushing the page down. The scrollbar is
   styled to the palette in both engines (standard properties + the WebKit
   pseudo-elements Safari/Chrome still need). */
.td-toc__list {
  margin: 14px 0 0;
  padding: 0 6px 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(46vh, 400px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* A non-default scrollbar-color is what takes the panel OUT of the platform's
     overlay scrollbars, so the brand-tinted bar is actually visible — which is
     the whole point of capping the list. The WebKit pseudo-elements below carry
     the same look for the engines that ignore the standard properties. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--brand) 55%, transparent) var(--glass-2);
  scrollbar-gutter: stable;
  /* …and a fade at the bottom edge, because a platform set to OVERLAY scrollbars
     draws nothing at all until the visitor already scrolls. */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
}
.td-toc__list::-webkit-scrollbar { width: 8px; }
.td-toc__list::-webkit-scrollbar-track { background: var(--glass-2); border-radius: 999px; }
.td-toc__list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid transparent;
  background: color-mix(in srgb, var(--brand) 55%, transparent);
  background-clip: padding-box;
}
.td-toc__list::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
  background-clip: padding-box;
}
/* Collapsed by attribute, not class (obfuscation contract). */
.td-toc[data-collapsed] .td-toc__list { display: none; }

.td-toc__item { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 12px; }
.td-toc__item:hover { background: var(--glass-2); }
.td-toc__num { flex-shrink: 0; font-size: 13px; color: var(--brand); }
.td-toc__link { font-size: 14.5px; color: var(--text-dim); }
.td-toc__link:hover { color: var(--brand); }

/* The trail reads as a caption to the hero, so it hangs 24px under it instead of
   a full page gap away. */
.td-crumbs { margin: calc(24px - var(--stack-gap, 0px)) 0 0; }
.td-crumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--text-mute);
}
.td-crumbs__list a { color: var(--text-dim); }
.td-crumbs__list a:hover { color: var(--brand); }
.td-crumbs__current { color: var(--brand); }

/* --------------------------------------------------------- 13 bonus blocks */

/* Jackpot banner: a photo panel with the running total. The amount is drawn ONCE
   at ingest (45 000–75 000, rounded to hundreds) into an editable field, so the
   build stays byte-reproducible while sibling sites differ. */
.td-jackpot {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 24px;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.td-jackpot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.td-jackpot__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6, 7, 9, .9) 0%, rgba(6, 7, 9, .5) 55%, rgba(6, 7, 9, .15) 100%); }
.td-jackpot__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: clamp(20px, 3vw, 30px);
}
.td-jackpot__label { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); }
/* The figure IS the block — sized to shout, not to fit the paragraph beside it. */
.td-jackpot__amount {
  margin: 0;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1;
  color: var(--on-media);
  text-shadow: 0 0 34px color-mix(in srgb, var(--brand) 55%, transparent), 0 4px 20px rgba(0, 0, 0, .5);
}
.td-jackpot__cta { align-self: flex-start; margin-top: 4px; border-radius: 16px; padding: 13px 22px; }

/* Bonus promo: the export's content-block card — the offer over the artwork, with
   its own CTA. Sits between two runs of prose (see .td-editorial__card). */
.td-bonus {
  position: relative;
  overflow: hidden;
  min-height: clamp(300px, 26vw, 380px);
  border-radius: 24px;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.td-bonus img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.td-bonus__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 7, 9, .25), rgba(6, 7, 9, .9)); }
.td-bonus__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  min-height: clamp(300px, 26vw, 380px);
  height: 100%;
  padding: clamp(18px, 3vw, 28px);
}
/* The title is words, not a figure, so a compound one ("Willkommensangebot") can
   outgrow a narrow card: hyphenate it, and break it as a last resort. */
.td-bonus__title {
  margin: 0;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--on-media);
  text-shadow: 0 6px 24px rgba(0, 0, 0, .4);
  hyphens: auto;
  overflow-wrap: break-word;
}
.td-bonus__note { margin: 0; max-width: 420px; font-size: 15px; color: var(--on-media-dim); }
.td-bonus__cta { align-self: flex-start; }

/* Countdown offer: three flip-cards. kit.js keeps the deadline in localStorage so
   it survives a reload, and freezes at zero with the CTA disabled. */
.td-countdown {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 24px;
  background: var(--glass-2);
  backdrop-filter: blur(var(--blur)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hi);
}
.td-countdown__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(100% 100% at 100% 0%, var(--brand-soft), transparent 62%); }
.td-countdown__body { position: relative; display: flex; flex-direction: column; gap: 14px; }
.td-countdown__title { margin: 0; font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -.035em; hyphens: auto; overflow-wrap: break-word; }
.td-countdown__note { margin: 0; font-size: 13px; color: var(--text-mute); }
.td-countdown__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.td-countdown__cell { text-align: center; padding: 14px 8px; border-radius: 16px; background: var(--glass); border: 1px solid var(--stroke); }
.td-countdown__value { margin: 0; font-size: clamp(26px, 3.4vw, 36px); color: var(--brand); }
.td-countdown__unit { margin: 4px 0 0; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.td-countdown__cta { align-self: stretch; margin-top: 24px; }
/* Expired: the offer freezes on zeros and the CTA stops being clickable. */
.td-countdown[data-expired] .td-countdown__value { color: var(--text-mute); }
.td-countdown[data-expired] .td-countdown__cta {
  pointer-events: none;
  opacity: .5;
  filter: grayscale(1);
}

/* Promo code strip: logo, badge, the dashed code, and the claim CTA. */
.td-promo { display: flex; flex-direction: column; gap: 14px; }
.td-promo__title { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: -.03em; }
.td-promo__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(14px, 2vw, 20px);
  border-radius: 22px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hi);
}
.td-promo__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 140% at 100% 0%, var(--brand-soft), transparent 60%); }
/* The client logo is a WORDMARK more often than a square mark, so the tile fits
   it whole (contain) instead of cropping its sides off (cover). */
.td-promo__logo {
  position: relative;
  width: 74px;
  height: 74px;
  padding: 9px;
  border-radius: 16px;
  object-fit: contain;
  background: var(--glass);
  border: 1px solid var(--stroke);
}
.td-promo__body { position: relative; flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 8px; }
.td-promo__badge {
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--brand);
}
.td-promo__meta { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text-dim); }
.td-promo__actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.td-promo__code {
  padding: 13px 16px;
  border-radius: 13px;
  border: 1px dashed var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 16px;
  letter-spacing: .08em;
}

/* Play demo — NOT used by monobrand; kept here for the coming slots theme. */
.td-demo { position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.td-demo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.td-demo__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 7, 9, .35), rgba(6, 7, 9, .88)); }
.td-demo__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(40px, 7vw, 90px) clamp(18px, 4vw, 40px);
}
.td-demo__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.td-demo__note {
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--media-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--media-stroke);
  font-size: 12.5px;
  color: var(--on-media-dim);
}