/* ==========================================================================
   Tokens — src/styles/theme.css, verbatim
   ========================================================================== */

/**
 * Design tokens. Every colour and layout dimension in the project resolves
 * here — hardcoded hex in a `*.module.css` file is not allowed.
 *
 * Black / white / green. The surfaces are near-black, the accent is a signal
 * green, and `--accent-alt` (white with a mint cast) is reserved for the one
 * thing that must not look like every other button: the top-1 call to action.
 */
:root {
  /* --- Type --- */
  --tracking-display: -0.015em;
  --tracking-body: 0.005em;

  /* --- Surfaces --- */
  --bg-base: #050505;
  --bg-elevated: #0b0c0b;
  --bg-surface: #111312;
  --bg-card: #171a18;
  --bg-card-hover: #1e221f;
  --bg-overlay: rgba(0, 0, 0, 0.78);
  --bg-logo: #07100a;

  /* --- Accents --- */
  --accent: #00c853;
  --accent-bright: #3dff8a;
  --accent-deep: #00692b;
  --accent-soft: rgba(0, 200, 83, 0.14);
  --accent-glow: rgba(61, 255, 138, 0.42);
  --accent-muted: #12a049;
  --accent-alt: #eafff1;
  --accent-alt-deep: #8ff5b8;
  --accent-alt-glow: rgba(234, 255, 241, 0.55);

  /* --- Text --- */
  --text-primary: #f5f6f5;
  --text-secondary: #b6bab7;
  --text-muted: #7f8581;
  --text-inverse: #050505;
  --text-on-accent: #03140a;
  --text-silver: #dadedb;

  /* --- Lines --- */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-accent: rgba(0, 200, 83, 0.55);
  --border-dashed: rgba(255, 255, 255, 0.28);

  /* --- Gradients --- */
  --gradient-accent: linear-gradient(180deg, #3dff8a 0%, #00a843 100%);
  --gradient-accent-hover: linear-gradient(180deg, #7dffb0 0%, #00c853 100%);
  --gradient-accent-line: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-deep) 12%,
    var(--accent-bright) 50%,
    var(--accent-deep) 88%,
    transparent 100%
  );
  --gradient-alt: linear-gradient(180deg, #ffffff 0%, #9dffc4 100%);
  --gradient-alt-hover: linear-gradient(180deg, #ffffff 0%, #c4ffdc 100%);
  --gradient-silver: linear-gradient(180deg, #ffffff 0%, #c2c8c4 100%);
  --gradient-bonus: linear-gradient(100deg, #ffffff 0%, #3dff8a 70%);
  --gradient-card: linear-gradient(
    145deg,
    rgba(26, 30, 28, 0.94) 0%,
    rgba(15, 17, 16, 0.92) 55%,
    rgba(8, 24, 14, 0.94) 100%
  );
  --gradient-card-top1: linear-gradient(
    145deg,
    rgba(10, 52, 28, 0.96) 0%,
    rgba(10, 24, 16, 0.94) 45%,
    rgba(5, 12, 8, 0.96) 100%
  );
  --gradient-card-top2: linear-gradient(
    145deg,
    rgba(14, 36, 24, 0.94) 0%,
    rgba(14, 20, 16, 0.92) 55%,
    rgba(10, 13, 11, 0.94) 100%
  );
  --gradient-logo: linear-gradient(
    150deg,
    rgba(0, 200, 83, 0.34) 0%,
    rgba(0, 105, 43, 0.12) 55%,
    rgba(255, 255, 255, 0.06) 100%
  );
  --gradient-hero-glow: radial-gradient(
    ellipse 60% 70% at 18% 0%,
    rgba(0, 200, 83, 0.22) 0%,
    transparent 70%
  );

  /* --- Shadows --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 26px rgba(0, 200, 83, 0.32);
  --shadow-glow-strong: 0 0 44px rgba(61, 255, 138, 0.55);

  /* --- Layout ---
     One width for the header, the footer, the offer grid and the sticky bar. */
  --layout-max-width: 1120px;
  --layout-padding-x: 1.25rem;
  --content-max-width: 860px;

  /* --- Radius --- no pill: informational elements stay squared. */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 22px;
}

/* Font variables — the `<style is:global>` block of src/layouts/Base.astro. */
:root {
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
}

/* ==========================================================================
   Reset — src/styles/global.css, verbatim
   ========================================================================== */

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

html {
  font-family: var(--font-body), system-ui, sans-serif;
  letter-spacing: var(--tracking-body);
  font-size: 16px;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

/* Load-bearing. `hidden` is how AgeGate, AccessDenied, PromoModal and
   CookieBanner are toggled, and the UA rule behind it is `[hidden] {
   display: none }` from the browser's own stylesheet — any `display` in a
   component's CSS module outranks it. An overlay with `display: flex` then
   stays on screen with its attribute dutifully flipped and nothing to show for
   it: the age gate's denied panel covered the page permanently, and "Verify
   age again" looked dead. Keep the `!important`; it is what makes the
   attribute win against a component that sets `display`. */
[hidden] {
  display: none !important;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--bg-base);
  color: var(--text-primary);
  overflow-x: clip;
}

/* Everything except the fixed background sits above it. The cookie banner is
   fixed itself; forcing `relative` on it puts it back in the flow below the
   footer. */
body > :not([data-site-bg]):not([data-cookie-banner]) {
  position: relative;
  z-index: 1;
}

body > header {
  z-index: 300;
}

/* Anchor targets of the footer navigation and the hero CTA. The header is not
   sticky, so this is breathing room rather than an offset. The ids are the same
   in both content modes. */
[id='pelit'],
[id='aloitus'],
[id='valikoima'],
[id='edut'] {
  scroll-margin-top: 1.5rem;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display), system-ui, sans-serif;
  letter-spacing: var(--tracking-display);
}

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

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

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Keeps a control operable by keyboard while invisible — used by the CSS-only
   disclosure toggles, which must not fall out of the tab order. */
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Site background — SiteBackground.module.css
   ========================================================================== */

.root {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100lvh;
  overflow: hidden;
  pointer-events: none;
}

.svg {
  display: block;
}

.stopGreen {
  stop-color: var(--accent);
}

.stopHaze {
  stop-color: var(--accent-alt);
}

.cross {
  stroke: var(--text-primary);
  stroke-opacity: 0.055;
}

.pixel {
  fill: var(--accent-bright);
  fill-opacity: 0.4;
}

.pixelDim {
  fill: var(--accent);
  fill-opacity: 0.18;
}

/* ==========================================================================
   Header — Header.module.css
   ========================================================================== */

.header {
  width: 100%;
  background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.headerInner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0.8rem var(--layout-padding-x);
  display: flex;
  align-items: center;
}

.homeLink {
  display: inline-flex;
  line-height: 0;
  transition: opacity 0.2s ease;
}

.homeLink:hover {
  opacity: 0.85;
}

.headerLogo {
  width: auto;
  height: 30px;
  max-width: min(200px, 62vw);
  object-fit: contain;
}

/* The accent line: a thin gradient rule that fades out at both ends. */
.line {
  height: 2px;
  background: var(--gradient-accent-line);
  box-shadow: 0 0 14px var(--accent-glow);
}

/* ==========================================================================
   Page — src/styles/page.module.css
   ========================================================================== */

.main {
  flex: 1;
}

/* ==========================================================================
   Hero — Hero.module.css
   ========================================================================== */

/* The hero stays under 30dvh: one badge, a headline, a single supporting line
   and one button. The offers start right below it. */
.hero {
  position: relative;
  max-height: 30dvh;
  display: flex;
  align-items: center;
  background: var(--gradient-hero-glow);
  border-bottom: 1px solid var(--border);
}

.heroInner {
  width: 100%;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 1rem var(--layout-padding-x);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 0.55rem;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
}

.heroUpdated {
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--text-muted);
}

.flag {
  display: inline-block;
  height: 0.7em;
  width: auto;
  margin-left: 0.2em;
  vertical-align: baseline;
  border: 1px solid var(--border);
}

.heroBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.6rem 0.2rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-on-accent);
  background: var(--gradient-accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.heroTitle {
  max-width: 32ch;
  font-size: clamp(1.45rem, 4.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.08;
  color: var(--text-primary);
  text-wrap: balance;
}

.accent {
  background: var(--gradient-bonus);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.heroDescription {
  display: none;
  max-width: 56ch;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.heroCta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
  padding: 0.5rem 1rem 0.5rem 1.1rem;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm) var(--radius-lg) var(--radius-sm)
    var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.heroCta:hover {
  border-color: var(--accent-bright);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: var(--shadow-glow);
}

@media (min-width: 640px) {
  .heroDescription {
    display: block;
  }

  .heroInner {
    gap: 0.65rem;
  }
}

/* ==========================================================================
   Offers list — Offers.module.css
   ========================================================================== */

.container {
  /* Same token as the header, the footer and the sticky bar. */
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--layout-padding-x);
}

.promoSection {
  padding: 1.75rem 0 2.5rem;
}

.promoGrid {
  display: grid;
  grid-template-columns: 1fr;
  /* Room for the rank pennants that hang from the top edge of the cards. */
  gap: 1.35rem;
}

/* Sentinel the promo modal observes. */
.promoSectionEnd {
  width: 100%;
  height: 1px;
}

/* ==========================================================================
   Offer card — Offer.module.css
   (payments and terms are not rendered on the fallback cards: not carried)
   ========================================================================== */

/* ── Base card ─────────────────────────────────────────────
   Leaf-shaped: tight corners top-left and bottom-right, generous ones on the
   other diagonal. The logo cell mirrors it. */
.promoCard {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-xl) var(--radius-sm)
    var(--radius-xl);
  background: var(--gradient-card);
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.promoCard:hover {
  border-color: var(--border-strong);
}

/* ── Rank 2 and 3: identical, moderate emphasis, no card animation ───── */
.promoCardTop23 {
  border-color: var(--border-accent);
  background: var(--gradient-card-top2);
  box-shadow:
    inset 3px 0 0 var(--accent-muted),
    var(--shadow-sm);
}

.promoCardTop23:hover {
  border-color: var(--accent);
}

/* ── Rank 1: the aggressive one ───────────────────────────── */
.promoCardTop1 {
  border: 2px solid var(--accent-bright);
  background: var(--gradient-card-top1);
  animation: top1Glow 2.2s ease-in-out infinite alternate;
}

.promoCardTop1:hover {
  border-color: var(--accent-alt);
}

@keyframes top1Glow {
  from {
    box-shadow:
      0 0 0 0 var(--accent-soft),
      0 0 18px var(--accent-soft),
      var(--shadow-md);
  }

  to {
    box-shadow:
      0 0 0 4px var(--accent-soft),
      0 0 46px var(--accent-glow),
      var(--shadow-md);
  }
}

/* ── Rank pennant ──────────────────────────────────────────
   Hangs from the top edge with a swallow-tail. Not a pill. */
.offerBadge {
  position: absolute;
  top: -1px;
  left: 18px;
  z-index: 2;
  padding: 0.3rem 0.7rem 0.7rem;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-on-accent);
  background: var(--gradient-accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6px), 0 100%);
  pointer-events: none;
}

.promoCardTop23 .offerBadge {
  background: var(--accent-muted);
}

/* Rank 1: a lighter pennant with a light that travels along it. */
.promoCardTop1 .offerBadge {
  background: linear-gradient(
    100deg,
    var(--accent-alt-deep) 0%,
    var(--accent-alt) 35%,
    var(--accent-alt-deep) 70%,
    var(--accent-alt) 100%
  );
  background-size: 220% 100%;
  animation: badgeShine 1.8s ease-in-out infinite alternate;
}

@keyframes badgeShine {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

/* ── Card overlay link ─────────────────────────────────── */
.cardLink {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* ── Card inner grid container ─────────────────────────── */
.cardInner {
  --areas-m: 'logo bonus' 'features payments' 'cta cta' 'terms terms';
  --areas-d: 'logo bonus features payments cta' 'terms terms terms terms terms';
  --cols-d: 168px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.7fr) auto;

  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
  grid-template-areas: var(--areas-m);
  column-gap: 0.9rem;
  row-gap: 0.85rem;
  padding: 1rem;
  position: relative;
  /* Always none: the whole card is clickable through .cardLink above.
     Interactive children opt back in with pointer-events + z-index: 2. */
  pointer-events: none;
}

.ranked .cardInner {
  padding-top: 1.9rem;
}

.noPayments .cardInner {
  --areas-m: 'logo bonus' 'features features' 'cta cta' 'terms terms';
  --areas-d: 'logo bonus features cta' 'terms terms terms terms';
  --cols-d: 168px minmax(0, 1.1fr) minmax(0, 1fr) auto;
}

.untracked .cardInner {
  --areas-m: 'logo bonus' 'features payments' 'cta cta';
  --areas-d: 'logo bonus features payments cta';
}

.untracked.noPayments .cardInner {
  --areas-m: 'logo bonus' 'features features' 'cta cta';
  --areas-d: 'logo bonus features cta';
}

/* ── Grid areas ────────────────────────────────────────── */
.logoArea {
  grid-area: logo;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.bonusArea {
  grid-area: bonus;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  min-width: 0;
}

.featuresArea {
  grid-area: features;
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

/* Wrapper carries the glow (a drop-shadow follows the clipped shape); the
   styled span inside is the button. A styled element, not a button or a link —
   the overlay handles the click. Deliberately given neither pointer-events nor
   z-index. */
.ctaArea {
  grid-area: cta;
  display: flex;
  align-items: stretch;
  filter: drop-shadow(0 0 10px var(--accent-glow));
  animation: ctaBreath 1.9s ease-in-out infinite alternate;
}

.offerCta {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.8rem 1.4rem;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  color: var(--text-on-accent);
  background: var(--gradient-accent);
  clip-path: polygon(
    12px 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%,
    0 12px
  );
  transition: background 0.2s ease;
}

/* A bright band that sweeps across the button, there and back. */
.offerCta::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    color-mix(in srgb, var(--accent-alt) 70%, transparent) 50%,
    transparent 100%
  );
  transform: translateX(-130%) skewX(-18deg);
  animation: ctaSweep 2.4s ease-in-out infinite alternate;
}

.promoCard:hover .offerCta {
  background: var(--gradient-accent-hover);
}

@keyframes ctaBreath {
  from {
    filter: drop-shadow(0 0 5px var(--accent-soft));
  }

  to {
    filter: drop-shadow(0 0 14px var(--accent-glow));
  }
}

@keyframes ctaSweep {
  from {
    transform: translateX(-130%) skewX(-18deg);
  }

  to {
    transform: translateX(330%) skewX(-18deg);
  }
}

/* Rank 1: a different colour (white with a mint cast, dark type) and a much
   stronger, faster-breathing glow. */
.promoCardTop1 .ctaArea {
  animation: ctaBreathStrong 1.1s ease-in-out infinite alternate;
}

.promoCardTop1 .offerCta {
  background: var(--gradient-alt);
}

.promoCardTop1:hover .offerCta {
  background: var(--gradient-alt-hover);
}

.promoCardTop1 .offerCta::after {
  background: linear-gradient(
    100deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 55%, transparent) 50%,
    transparent 100%
  );
  animation-duration: 1.5s;
}

@keyframes ctaBreathStrong {
  from {
    filter: drop-shadow(0 0 8px var(--accent-glow))
      drop-shadow(0 0 2px var(--accent-alt-glow));
  }

  to {
    filter: drop-shadow(0 0 26px var(--accent-bright))
      drop-shadow(0 0 8px var(--accent-alt-glow));
  }
}

/* ── Logo cell ─────────────────────────────────────────────
   Never a flat colour: a green-to-white gradient with a dotted texture. */
.logoFrame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 168 / 104;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg)
    var(--radius-sm);
  background-color: var(--bg-logo);
  background-image:
    radial-gradient(
      circle at 1px 1px,
      color-mix(in srgb, var(--text-primary) 16%, transparent) 1px,
      transparent 1.5px
    ),
    var(--gradient-logo);
  background-size:
    9px 9px,
    100% 100%;
}

.offerLogo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
}

/* Fallback art is a screenshot, not a logo: it fills the cell. */
.untracked .offerLogo {
  object-fit: cover;
  padding: 0;
}

.untracked .logoFrame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 55%,
    color-mix(in srgb, var(--bg-base) 55%, transparent) 100%
  );
  pointer-events: none;
}

/* ── Name (fallback games only) ────────────────────────── */
.name {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* ── Rating: custom star, two stacked rows ─────────────── */
.rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.stars {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.starRow {
  display: flex;
  gap: 2px;
}

.starFill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
}

.star {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: color-mix(in srgb, var(--text-primary) 18%, transparent);
}

.starLit {
  fill: var(--accent-bright);
  filter: drop-shadow(0 0 3px var(--accent-glow));
}

.ratingValue {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-silver);
}

/* ── Features: CSS-only disclosure, zero JS ────────────── */
.featureList {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.featureItem {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* A small chamfered square instead of a bullet. */
.featureItem::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 7px;
  height: 7px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
}

/* Flex ordering puts the revealed items ABOVE the toggle, matching the
   original layout where "less" sat below the full list. */
.featureDetails {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.featureExtra {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.featureToggle {
  order: 2;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-bright);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
  pointer-events: auto;
  z-index: 2;
  position: relative;
  list-style: none;
}

.featureToggle::-webkit-details-marker {
  display: none;
}

.featureToggle .lessLabel,
.featureDetails[open] .featureToggle .moreLabel {
  display: none;
}

.featureDetails[open] .featureToggle .lessLabel {
  display: inline;
}

/* ── Desktop: single horizontal row ────────────────────── */
@media (min-width: 769px) {
  .cardInner {
    grid-template-columns: var(--cols-d);
    grid-template-areas: var(--areas-d);
    align-items: center;
    column-gap: 1.4rem;
    row-gap: 0.7rem;
    padding: 1.1rem 1.4rem;
  }

  .ranked .cardInner {
    padding-top: 1.6rem;
  }

  .logoFrame {
    width: 168px;
  }

  .bonusArea {
    align-self: center;
  }

  .featuresArea {
    align-self: center;
  }

  .offerCta {
    min-width: 11.5rem;
    padding: 0.95rem 1.6rem;
  }
}

/* ==========================================================================
   Game description — BonusDisplay.module.css (compact mode only)
   ========================================================================== */

/* Fallback description: smaller, wraps, never leaves the card. */
.bonusDescription {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-wrap: balance;
  background: var(--gradient-bonus);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px var(--accent-glow));
}

/* ==========================================================================
   Home sections — src/styles/sections.module.css
   ========================================================================== */

/* Shared by GameSections and CasinoSections: same ids, same structure, same
   styles — only the copy differs between the two content modes. */
.sections {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 1rem var(--layout-padding-x) 3.5rem;
  display: grid;
  gap: 3.75rem;
}

.heading {
  font-size: clamp(1.45rem, 3.6vw, 2.15rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--text-primary);
  text-wrap: balance;
}

.lead {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 62ch;
}

/* ── 1. Start: statement on the left, a ruled ledger on the right ───── */
.start {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.startIntro {
  display: grid;
  align-content: start;
  gap: 0.9rem;
}

.ledger {
  margin: 0;
  display: grid;
  border-top: 1px solid var(--border-strong);
}

.ledgerRow {
  display: grid;
  gap: 0.3rem;
  padding: 1.05rem 0 1.05rem 1.6rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.ledgerRow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.45rem;
  width: 10px;
  height: 10px;
  background: var(--gradient-accent);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 100%, 0 100%);
}

.ledgerTerm {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.ledgerText {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ── 2. Range: a bento of unequal tiles ─────────────────── */
.range {
  display: grid;
  gap: 1.5rem;
}

.rangeHead {
  display: grid;
  gap: 0.7rem;
}

.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-xl) var(--radius-sm)
    var(--radius-xl);
  background: var(--gradient-card);
  overflow: hidden;
}

.tileBig {
  background:
    radial-gradient(circle at 82% 18%, var(--accent-glow) 0%, transparent 52%),
    var(--gradient-card-top1);
  border-color: var(--border-accent);
}

.tileWide {
  border-radius: var(--radius-xl) var(--radius-sm) var(--radius-xl)
    var(--radius-sm);
  background: var(--gradient-card-top2);
}

.glyph {
  width: 44px;
  height: 44px;
  padding: 9px;
  color: var(--text-on-accent);
  background: var(--gradient-accent);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}

.tileBig .glyph {
  width: 64px;
  height: 64px;
  padding: 13px;
}

.tileTitle {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.tileBig .tileTitle {
  font-size: 1.5rem;
}

.tileText {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ── 3. Perks: one loud callout beside two quiet notes ─────────────── */
.perks {
  display: grid;
  gap: 1.5rem;
}

.perksBody {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.callout {
  display: grid;
  align-content: center;
  gap: 0.7rem;
  padding: 1.6rem 1.5rem 1.6rem 1.75rem;
  border-left: 4px solid var(--accent-bright);
  border-radius: var(--radius-sm) var(--radius-xl) var(--radius-sm)
    var(--radius-xl);
  background:
    linear-gradient(100deg, var(--accent-soft) 0%, transparent 75%),
    var(--bg-surface);
  box-shadow: var(--shadow-glow);
}

.calloutTitle {
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
}

.calloutText {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-silver);
}

.notes {
  display: grid;
  gap: 1.25rem;
  align-content: center;
}

.note {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--accent-deep);
}

.noteTitle {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.noteText {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (min-width: 769px) {
  .start {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3rem;
    align-items: start;
  }

  .ledgerRow {
    grid-template-columns: 11rem 1fr;
    gap: 1.25rem;
    align-items: baseline;
  }

  .rangeHead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: end;
  }

  .tiles {
    grid-template-columns: 1.15fr 1fr;
    grid-template-areas:
      'big a'
      'big b'
      'wide wide';
    gap: 1rem;
  }

  .tileBig {
    grid-area: big;
    padding: 1.75rem;
    align-content: end;
    min-height: 12rem;
  }

  .tileA {
    grid-area: a;
  }

  .tileB {
    grid-area: b;
  }

  .tileWide {
    grid-area: wide;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1.25rem;
  }

  .tileWide .glyph {
    grid-row: span 2;
  }

  .perksBody {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2.5rem;
    align-items: stretch;
  }

  .note:nth-child(2) {
    margin-left: 2rem;
  }
}

/* ==========================================================================
   Footer — Footer.module.css
   ========================================================================== */

.footer {
  margin-top: auto;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* A gradient rule with a soft halo, instead of a grey line. */
.divider {
  height: 3px;
  background: var(--gradient-accent-line);
  box-shadow:
    0 0 18px var(--accent-glow),
    0 0 2px var(--accent-bright);
}

.footerInner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 2.25rem var(--layout-padding-x) 1.25rem;
}

.columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  max-width: 26rem;
}

.logoLink {
  display: inline-flex;
  line-height: 0;
}

.logoLink:hover {
  opacity: 0.85;
}

.footerLogo {
  width: auto;
  height: 28px;
  max-width: min(190px, 62vw);
  object-fit: contain;
}

.footerDescription {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  font-size: 0.9rem;
}

.contactLabel {
  color: var(--text-muted);
}

.email {
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-accent);
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.email:hover {
  color: var(--accent-bright);
  border-color: var(--accent-bright);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.navHeading {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  list-style: none;
}

.link {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.link:hover {
  color: var(--accent-bright);
}

.bottom {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

.legalLine {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 1.5rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.copy {
  white-space: nowrap;
}

@media (min-width: 769px) {
  .columns {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr) minmax(0, 0.8fr);
    gap: 2.5rem;
    align-items: start;
  }
}

/* ==========================================================================
   Legal pages — src/styles/legal.module.css
   ========================================================================== */

.page {
  flex: 1;
  width: 100%;
  max-width: calc(var(--content-max-width) + 2 * var(--layout-padding-x));
  margin: 0 auto;
  padding: 2rem var(--layout-padding-x) 3.5rem;
}

.article {
  padding: 1.5rem 1.25rem 1.75rem;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-sm) var(--radius-xl) var(--radius-sm)
    var(--radius-xl);
  background: var(--gradient-card);
  color: var(--text-primary);
}

.page h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
}

.legalUpdated {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.page h2 {
  margin: 1.9rem 0 0.6rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.page p,
.page li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.page p + p {
  margin-top: 0.75rem;
}

.page ul {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
}

.page li + li {
  margin-top: 0.35rem;
}

.page li::marker {
  color: var(--accent);
}

.page a:not([class]) {
  color: var(--accent-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 769px) {
  .article {
    padding: 2.25rem 2.5rem 2.5rem;
  }
}

/* ==========================================================================
   404 — src/styles/interstitial.module.css
   ========================================================================== */

.wrapper {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.card {
  max-width: 640px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  background: var(--bg-surface);
}

.interstitialTitle {
  margin: 0 0 12px;
}

.interstitialDescription {
  margin: 0 0 16px;
  color: var(--text-secondary);
}

.backLink {
  display: inline-block;
  text-decoration: underline;
}

.code {
  display: block;
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--text-muted);
}