/* ═════════════════════════════════════════════════════════
   Skill Game Picks — static port of app/theme.css, app/globals.css
   and the CSS modules of the components the home page renders.
   ═════════════════════════════════════════════════════════ */

/* ── Tokens (app/theme.css) ────────────────────────────── */

/*
 * Skill Game Picks — design tokens.
 * The only place with raw colour values: every module reads these variables.
 *
 * Accent logic, taken from the ribbon "S" of the logo:
 * - pink / orchid  — action: offer buttons, link hover, keyboard focus;
 * - cyan / blue    — information: categories, facts, ranks 2–3, rating figures;
 * - yellow / orange — the top pick only (badge, button, aura) and the rating stars.
 */
:root {
  /* Backgrounds */
  --bg-base: #0b0b2b;
  --bg-elevated: #17104a;
  --bg-surface: #1e1660;
  --bg-card: #140f40;
  --bg-card-strong: #1b1452;
  --bg-sunken: #0e0c33;
  --bg-overlay: rgba(11, 11, 43, 0.86);

  /* Accents */
  --accent-deep: #3b0f8f;
  --accent-violet: #6c20d9;
  --accent-orchid: #b517d9;
  --accent-pink: #f02baa;
  --accent-cyan: #00cfff;
  --accent-blue: #1677ff;
  --accent-orange: #ff6a00;
  --accent-yellow: #ffc928;

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: rgba(245, 243, 255, 0.86);
  --text-muted: #aaa3d9;
  --text-inverse: #17104a;
  --text-inverse-muted: #4b3f8f;

  /* Light surface (logo plate) */
  --surface-light: #f5f3ff;

  /* Borders */
  --border-subtle: rgba(245, 243, 255, 0.08);
  --border-medium: rgba(245, 243, 255, 0.16);
  --border-violet: rgba(108, 32, 217, 0.6);
  --border-cyan: rgba(0, 207, 255, 0.55);
  --border-pink: rgba(240, 43, 170, 0.55);

  /* Tints */
  --tint-cyan: rgba(0, 207, 255, 0.1);
  --tint-violet: rgba(108, 32, 217, 0.18);
  --tint-pink: rgba(240, 43, 170, 0.12);
  --tint-yellow: rgba(255, 201, 40, 0.12);

  /* Gradients */
  --gradient-ribbon: linear-gradient(
    90deg,
    #00cfff,
    #1677ff 24%,
    #6c20d9 48%,
    #f02baa 74%,
    #ff6a00
  );
  --gradient-action: linear-gradient(120deg, #f02baa, #b517d9 55%, #8a1fd9);
  --gradient-top: linear-gradient(120deg, #ffc928, #ff9a14 50%, #ff6a00);
  --gradient-cool: linear-gradient(135deg, #00cfff, #1677ff);
  --gradient-card: linear-gradient(165deg, #1b1452, #120e3c);
  --gradient-panel: linear-gradient(160deg, #1e1660, #140f40 70%);
  --gradient-tile: radial-gradient(
    120% 120% at 30% 20%,
    #3b0f8f,
    #17104a 60%,
    #0e0c33
  );
  --gradient-bonus: linear-gradient(100deg, #ffc928, #ff6a00 45%, #f02baa);
  --gradient-sheen: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.34) 50%,
    transparent 70%
  );

  /* Glows and shadows */
  --glow-action: 0 10px 26px -12px rgba(240, 43, 170, 0.75);
  --glow-top: 0 0 0 1px rgba(255, 201, 40, 0.55), 0 16px 40px -14px rgba(255, 106, 0, 0.8);
  --glow-top-strong: 0 0 26px -2px rgba(255, 106, 0, 0.9), 0 0 56px -8px rgba(255, 201, 40, 0.7);
  --glow-cool: 0 0 0 1px rgba(0, 207, 255, 0.4), 0 14px 34px -18px rgba(0, 207, 255, 0.6);
  --shadow-card: 0 22px 46px -30px rgba(0, 0, 0, 0.9);
  --text-glow-hot: 0 0 22px rgba(240, 43, 170, 0.4);
  --text-glow-cool: 0 0 18px rgba(0, 207, 255, 0.35);
  --drop-glow-top: 0 0 10px rgba(255, 106, 0, 0.6);
  --drop-glow-bonus: 0 0 16px rgba(255, 106, 0, 0.45);

  /* Pattern ink */
  --pip: rgba(245, 243, 255, 0.075);
  --pip-strong: rgba(245, 243, 255, 0.18);

  /* Shape: radii follow hierarchy, from tags up to panels */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-tile: 28%;

  /* Layout */
  --page-gutter: 1rem;
  --container-max: 70rem;
}

/* Font variables: set by next/font on <html> in the source (app/fonts.ts). */
:root {
  --font-display: 'Unbounded';
  --font-body: 'Figtree';
}

/* ── Reset (app/globals.css) ───────────────────────────── */

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

html {
  font-family: var(--font-body), system-ui, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  background: var(--bg-base);
  color: var(--text-primary);
  scroll-behavior: smooth;
}

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

ul,
ol {
  padding: 0;
}

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

button {
  cursor: pointer;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: transparent;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  font-family: var(--font-display), var(--font-body), sans-serif;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

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

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

::selection {
  background: var(--accent-pink);
  color: var(--text-primary);
}

/* Anchor targets of the footer navigation: the same ids in both content modes. */
#selezione,
#confronto,
#come-funziona,
#categorie {
  scroll-margin-top: 1.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

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

/* Hidden extra features: .offer-featureItem sets display: grid, which beats the UA rule. */
[hidden] {
  display: none !important;
}

/* ── Site background (SiteBackground.module.css) ───────── */

.siteBackground {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-base);
}

.siteBackground-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.siteBackground-stopViolet {
  stop-color: var(--accent-violet);
  stop-opacity: 0.42;
}

.siteBackground-stopPink {
  stop-color: var(--accent-pink);
  stop-opacity: 0.22;
}

.siteBackground-stopOrangeSoft {
  stop-color: var(--accent-orange);
  stop-opacity: 0.06;
}

.siteBackground-stopCyan {
  stop-color: var(--accent-cyan);
  stop-opacity: 0.16;
}

.siteBackground-stopClear {
  stop-color: var(--bg-base);
  stop-opacity: 0;
}

.siteBackground-inkCyan {
  stop-color: var(--accent-cyan);
}

.siteBackground-inkViolet {
  stop-color: var(--accent-violet);
}

.siteBackground-inkPink {
  stop-color: var(--accent-pink);
}

.siteBackground-inkOrange {
  stop-color: var(--accent-orange);
}

.siteBackground-pip {
  fill: var(--pip-strong);
}

.siteBackground-maskOn {
  stop-color: var(--text-primary);
  stop-opacity: 0.55;
}

.siteBackground-maskOff {
  stop-color: var(--text-primary);
  stop-opacity: 0;
}

.siteBackground-ribbon {
  fill: none;
  stroke-width: 42;
  stroke-linecap: round;
  opacity: 0.07;
}

.siteBackground-ribbonThin {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.22;
}

/* ── Header (Header.module.css) ────────────────────────── */

.header {
  position: relative;
  z-index: 2;
}

/* Ribbon line along the very top: the logo tab hangs from it. */
.header-accentLine {
  height: 3px;
  background: var(--gradient-ribbon);
  box-shadow: 0 0 18px var(--accent-violet);
}

.header-inner {
  max-width: calc(var(--container-max) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  display: flex;
  justify-content: center;
}

/* Light tab behind the logo: the "Skill" wordmark is dark navy and needs a light ground. */
.header-logoTab {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem 0.5rem;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--surface-light);
  box-shadow:
    0 10px 24px -14px var(--accent-violet),
    inset 0 3px 0 var(--accent-violet);
  transition: box-shadow 0.2s ease;
}

.header-logoTab:hover {
  box-shadow:
    0 12px 26px -12px var(--accent-pink),
    inset 0 3px 0 var(--accent-pink);
}

.header-logo {
  width: auto;
  height: 2.75rem;
}

@media (min-width: 768px) {
  .header-logoTab {
    padding: 0.45rem 1rem 0.55rem;
  }

  .header-logo {
    height: 3.25rem;
  }
}

/* ── Home page frame (page.module.css) ─────────────────── */

.home-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.home-adNotice {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: 0 var(--page-gutter) 0.5rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.home-adNotice strong {
  font-weight: 700;
  color: var(--text-secondary);
}

.home-adNoticeLink {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-adNoticeLink:hover {
  color: var(--accent-pink);
}

/* ── Hero (Hero.module.css) ────────────────────────────── */

.hero {
  padding: 1.25rem var(--page-gutter) 0.5rem;
}

.hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  align-items: center;
  gap: 1.5rem;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-muted);
}

.hero-badge::before {
  content: '';
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--accent-cyan);
  box-shadow: var(--text-glow-cool);
  transform: rotate(45deg);
}

.hero-title {
  font-size: clamp(1.4rem, 1.02rem + 2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.12;
  max-width: 22ch;
}

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

.hero-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.5rem;
}

.hero-description {
  flex: 1 1 22rem;
  max-width: 56ch;
  font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1.02rem);
  line-height: 1.45;
  color: var(--text-secondary);
}

.hero-cta {
  display: none;
}

.hero-ctaIcon {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-art {
  display: none;
}

@media (min-width: 900px) {
  .hero {
    padding-top: 1.75rem;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr) 13rem;
  }

  .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    padding: 0.6rem 1rem;
    border: 1px solid var(--border-pink);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--tint-pink);
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease;
  }

  .hero-cta:hover {
    background: var(--accent-pink);
    border-color: var(--accent-pink);
  }

  .hero-art {
    display: block;
    width: 100%;
    height: auto;
    max-height: 9.5rem;
  }

  .hero-artCard rect {
    fill: var(--surface-light);
  }

  .hero-artCardSuit {
    fill: var(--accent-violet);
  }

  .hero-artDomino rect {
    fill: var(--bg-elevated);
    stroke: var(--accent-cyan);
    stroke-width: 2;
  }

  .hero-artDomino line {
    stroke: var(--border-cyan);
    stroke-width: 2;
  }

  .hero-artDomino circle {
    fill: var(--accent-cyan);
  }

  .hero-artPuzzle {
    fill: var(--accent-orange);
    opacity: 0.92;
  }
}

/* ── Offers section (Offers.module.css) ────────────────── */

.offers-container {
  max-width: calc(var(--container-max) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.offers-promoSection {
  padding: 1.1rem 0 1.5rem;
}

.offers-promoGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.offers-notes {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.offers-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.offers-ageMark,
.offers-infoMark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  border-radius: var(--radius-xs);
  font-size: 0.7rem;
  font-weight: 800;
}

.offers-ageMark {
  color: var(--text-inverse);
  background: var(--accent-cyan);
}

.offers-infoMark {
  color: var(--accent-cyan);
  border: 1px solid var(--border-cyan);
  font-family: var(--font-display), sans-serif;
}

.offers-promoSectionEnd {
  width: 100%;
  height: 1px;
}

/* ── Offer card (Offer.module.css) ─────────────────────── */

/* ── Base card ─────────────────────────────────────────── */
.offer-promoCard {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--gradient-card);
  box-shadow: var(--shadow-card);
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

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

/* ── Rank variants ─────────────────────────────────────── */

/* Top pick: a ribbon-coloured aura that drifts along the border. */
.offer-promoCardTop1 {
  border: 2px solid transparent;
  background:
    var(--gradient-card) padding-box,
    var(--gradient-ribbon) border-box;
  background-size:
    100% 100%,
    300% 100%;
  background-position:
    0 0,
    0% 50%;
  box-shadow: var(--shadow-card), var(--glow-top);
  animation: aura 5s ease-in-out infinite alternate;
}

.offer-promoCardTop1:hover {
  border-color: transparent;
}

@keyframes aura {
  from {
    background-position:
      0 0,
      0% 50%;
  }
  to {
    background-position:
      0 0,
      100% 50%;
  }
}

/* Places 2 and 3: identical, moderate, static. */
.offer-promoCardTop23 {
  border-color: var(--border-cyan);
  box-shadow: var(--shadow-card), var(--glow-cool);
}

/* ── Badge: a ribbon banner with notched ends across the top edge ── */
.offer-badge {
  position: absolute;
  top: -0.8rem;
  left: 1rem;
  z-index: 2;
  pointer-events: none;
  padding: 0.32rem 1.05rem;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - 0.55rem) 50%,
    100% 100%,
    0 100%,
    0.55rem 50%
  );
}

.offer-badgeTop1 {
  color: var(--text-inverse);
  background: var(--gradient-top);
  transform-origin: 0.6rem 50%;
  animation: ribbonSway 1.8s ease-in-out infinite alternate;
}

.offer-badgeTop23 {
  color: var(--text-inverse);
  background: var(--gradient-cool);
}

@keyframes ribbonSway {
  from {
    transform: rotate(-2.5deg) translateY(0);
  }
  to {
    transform: rotate(1.5deg) translateY(-1px);
  }
}

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

.offer-cardLink:focus-visible {
  outline-offset: 4px;
}

/* ── Card inner grid ───────────────────────────────────── */
.offer-cardInner {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem 0.8rem;
  padding: 1.1rem 1rem 1rem;
  pointer-events: none;
}

.offer-promoCardTop1 .offer-cardInner,
.offer-promoCardTop23 .offer-cardInner {
  padding-top: 1.4rem;
}

.offer-modeGames .offer-cardInner {
  grid-template-areas:
    'rank logo head'
    'desc desc desc'
    'details details details'
    'cta cta cta';
}

.offer-rankArea {
  grid-area: rank;
  display: flex;
  align-self: stretch;
  align-items: center;
}

.offer-logoArea {
  grid-area: logo;
}

.offer-headArea {
  grid-area: head;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}

.offer-descArea {
  grid-area: desc;
}

.offer-detailsArea {
  grid-area: details;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-medium);
}

.offer-extraArea,
.offer-featuresArea {
  min-width: 0;
}

.offer-ctaArea {
  grid-area: cta;
}

/* ── Logo cell: app-icon tile on a pip-textured glow ───── */
.offer-logoArea {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background:
    radial-gradient(var(--pip-strong) 1px, transparent 1.6px) 0 0 / 7px 7px,
    var(--gradient-tile);
  border: 1px solid var(--border-subtle);
}

.offer-modeGames .offer-logoArea {
  width: 4.5rem;
  height: 4.5rem;
  padding: 0.4rem;
}

.offer-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.offer-modeGames .offer-logo {
  border-radius: var(--radius-tile);
  box-shadow: 0 6px 16px -8px var(--bg-base);
}

.offer-promoCardTop1 .offer-logoArea {
  border-color: var(--accent-yellow);
}

.offer-promoCardTop23 .offer-logoArea {
  border-color: var(--border-cyan);
}

/* ── Name and tags (game catalogue) ────────────────────── */
.offer-name {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.offer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
}

.offer-tag {
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-xs);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.35;
}

.offer-tagCategory {
  color: var(--accent-cyan);
  background: var(--tint-cyan);
  border: 1px solid var(--border-cyan);
}

.offer-tagSkill {
  color: var(--text-secondary);
  background: var(--tint-violet);
  border: 1px solid var(--border-violet);
}

/* ── Facts (game catalogue) ────────────────────────────── */
.offer-facts {
  display: grid;
  gap: 0.55rem;
}

.offer-fact dt {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

.offer-fact dd {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

/* ── Features ──────────────────────────────────────────── */
.offer-featureList {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.offer-featureItems {
  display: grid;
  gap: 0.4rem;
  list-style: none;
}

.offer-featureItem {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.35rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.offer-featureIcon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.05rem;
  fill: none;
  stroke: var(--accent-pink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.offer-featureToggle {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  padding: 0.1rem 0;
  border: 0;
  background: none;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.offer-featureToggle:hover {
  color: var(--accent-pink);
}

/* ── CTA (styled div; the overlay link takes the click) ── */
.offer-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--gradient-action);
  box-shadow: var(--glow-action);
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  transition: filter 0.2s ease;
}

.offer-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-sheen);
  transform: translateX(-110%);
  animation: sheen 2.6s ease-in-out infinite alternate;
}

.offer-ctaIcon {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
}

.offer-promoCard:hover .offer-cta {
  filter: brightness(1.12) saturate(1.1);
}

.offer-promoCardTop1 .offer-cta {
  background: var(--gradient-top);
  color: var(--text-inverse);
  box-shadow: var(--glow-top);
  animation: ctaPulse 1.3s ease-in-out infinite alternate;
}

@keyframes sheen {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(110%);
  }
}

@keyframes ctaPulse {
  from {
    box-shadow: var(--glow-top);
  }
  to {
    box-shadow: var(--glow-top-strong);
  }
}

/* ── Desktop ───────────────────────────────────────────── */
@media (min-width: 960px) {
  .offer-cardInner {
    gap: 0.75rem 1.25rem;
    padding: 1.25rem 1.4rem;
  }

  .offer-promoCardTop1 .offer-cardInner,
  .offer-promoCardTop23 .offer-cardInner {
    padding-top: 1.4rem;
  }

  .offer-modeGames .offer-cardInner {
    grid-template-columns: 2rem auto minmax(0, 1.15fr) minmax(0, 1.3fr) 11.5rem;
    grid-template-areas:
      'rank logo head details cta'
      'rank logo desc details cta';
    align-items: start;
  }

  .offer-modeGames .offer-logoArea {
    width: 5.5rem;
    height: 5.5rem;
    align-self: center;
  }

  .offer-ctaArea {
    align-self: center;
  }

  .offer-modeGames .offer-detailsArea {
    align-self: center;
  }

  .offer-detailsArea {
    padding: 0 0 0 1.25rem;
    border-top: 0;
    border-left: 1px dashed var(--border-medium);
  }

  .offer-modeGames .offer-detailsArea {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
  }

  .offer-name {
    font-size: 1.1rem;
  }
}

/* ── Rank tile (RankTile.module.css) ───────────────────── */

.rankTile {
  display: inline-block;
  flex: none;
  width: 1.85rem;
  height: 3.2rem;
}

.rankTile svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rankTile-sm {
  width: 1.25rem;
  height: 2.15rem;
}

.rankTile-face {
  stroke-width: 1.5;
}

.rankTile-divider {
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Top pick: a gold tile with dark pips. */
.rankTile-top1 .rankTile-face {
  fill: var(--accent-yellow);
  stroke: var(--accent-orange);
}

.rankTile-top1 .rankTile-divider {
  stroke: var(--accent-orange);
}

.rankTile-top1 .rankTile-pip {
  fill: var(--text-inverse);
}

.rankTile-top1 svg {
  filter: drop-shadow(var(--drop-glow-top));
}

/* Places 2 and 3: cyan outline, cyan pips. */
.rankTile-top23 .rankTile-face {
  fill: var(--bg-sunken);
  stroke: var(--accent-cyan);
}

.rankTile-top23 .rankTile-divider {
  stroke: var(--border-cyan);
}

.rankTile-top23 .rankTile-pip {
  fill: var(--accent-cyan);
}

/* Everyone else: quiet lavender. */
.rankTile-rest .rankTile-face {
  fill: var(--bg-sunken);
  stroke: var(--border-medium);
}

.rankTile-rest .rankTile-divider {
  stroke: var(--border-medium);
}

.rankTile-rest .rankTile-pip {
  fill: var(--text-muted);
}

/* ── Rating stars (Rating.module.css) ──────────────────── */

.rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.45rem;
  --star: 0.95rem;
}

.rating-sm {
  --star: 0.78rem;
}

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

.rating-rowEmpty,
.rating-rowFull {
  display: inline-flex;
  gap: 0.12rem;
}

.rating-rowEmpty svg,
.rating-rowFull svg {
  width: var(--star);
  height: var(--star);
}

.rating-rowEmpty svg {
  fill: var(--border-medium);
}

.rating-rowFull {
  position: absolute;
  inset: 0;
  clip-path: inset(0 var(--fill) 0 0);
}

.rating-rowFull svg {
  fill: var(--accent-yellow);
}

.rating-figure {
  font-family: var(--font-display), sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-cyan);
  font-variant-numeric: tabular-nums;
}

.rating-sm .rating-figure {
  font-size: 0.74rem;
}

.rating-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ── Game description (BonusDisplay.module.css) ────────── */

/* Game description: smaller, wrapped, plain colour. */
.bonusDisplay-description {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-secondary);
  overflow-wrap: break-word;
}

/* ── Content sections (Sections.module.css) ────────────── */

/* ── Shared frame ──────────────────────────────────────── */
.sections-section {
  padding: 2.25rem 0;
}

.sections-container {
  max-width: calc(var(--container-max) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.sections-header {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.sections-title {
  font-size: clamp(1.2rem, 0.98rem + 1.1vw, 1.65rem);
  font-weight: 700;
}

.sections-meta {
  max-width: 64ch;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── Comparison table ──────────────────────────────────── */
.sections-tableWrap {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
}

/* Fade on the right edge: the table scrolls sideways on narrow screens. */
.sections-tableWrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.25rem;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bg-card));
}

.sections-tableScroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-violet) transparent;
}

.sections-tableScroll:focus-visible {
  outline-offset: -2px;
}

.sections-table {
  width: 100%;
  min-width: 56rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.sections-table th,
.sections-table td {
  padding: 0.85rem 0.9rem;
  text-align: left;
  vertical-align: middle;
}

.sections-table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-cyan);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border-medium);
  white-space: nowrap;
}

.sections-table tbody td,
.sections-table tbody th {
  border-top: 1px dashed var(--border-subtle);
  color: var(--text-secondary);
}

.sections-table tbody tr:first-child td,
.sections-table tbody tr:first-child th {
  border-top: 0;
}

/* The game column stays put while the rest scrolls. */
.sections-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 12rem;
  background: var(--bg-card);
  box-shadow: 1px 0 0 var(--border-subtle);
}

.sections-table thead th:first-child {
  background: var(--bg-sunken);
}

.sections-rowTop th:first-child {
  box-shadow:
    inset 3px 0 0 var(--accent-yellow),
    1px 0 0 var(--border-subtle);
}

.sections-rowTop td {
  background: var(--tint-yellow);
}

.sections-rowName {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--text-primary);
}

.sections-gameLink {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-pink);
  text-underline-offset: 3px;
}

.sections-gameLink:hover {
  color: var(--accent-pink);
}

.sections-scrollHint {
  margin-top: 0.5rem;
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* ── How it works: intro + domino-chained steps ────────── */
.sections-howGrid {
  display: grid;
  gap: 1.5rem;
}

.sections-howIntro {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.sections-lead {
  max-width: 60ch;
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.12rem);
  line-height: 1.6;
  color: var(--text-secondary);
}

.sections-steps {
  position: relative;
  display: grid;
  gap: 1rem;
  list-style: none;
}

/* The dashed line that chains the step tiles like a row of dominoes. */
.sections-steps::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 1.45rem;
  border-left: 2px dashed var(--border-cyan);
}

.sections-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.sections-stepMarker {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0.22rem;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0.55rem;
  border: 1.5px solid var(--accent-cyan);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
}

.sections-stepPip {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent-cyan);
}

.sections-stepTitle {
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.sections-stepText {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ── Categories / highlights ───────────────────────────── */
.sections-catGrid {
  display: grid;
  gap: 0.85rem;
  list-style: none;
}

.sections-catTile {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 1.1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--gradient-panel);
}

.sections-catHead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sections-catIcon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-sm);
  color: var(--accent-cyan);
  background: var(--tint-cyan);
}

.sections-catIcon svg {
  width: 1.45rem;
  height: 1.45rem;
}

.sections-catTitle {
  font-size: 0.98rem;
  font-weight: 700;
}

.sections-catCount {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

.sections-catText {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.sections-catGames {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
}

.sections-catGames li {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Side panel: mindful play / new players ────────────── */
.sections-panel {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
  padding: 1.2rem;
  border: 1px dashed var(--border-pink);
  border-radius: var(--radius-lg);
  background: var(--tint-pink);
}

.sections-panelTitle {
  font-size: 1rem;
  font-weight: 700;
}

.sections-tips {
  display: grid;
  gap: 0.7rem;
  list-style: none;
}

.sections-tip {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 0.6rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.sections-tipIcon {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--accent-pink);
}

/* ── Breakpoints ───────────────────────────────────────── */
@media (min-width: 640px) {
  .sections-catGrid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }

  .sections-tips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .sections-section {
    padding: 3rem 0;
  }

  .sections-howGrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 3rem;
    align-items: start;
  }

  .sections-panel {
    padding: 1.4rem 1.6rem;
  }

  .sections-tips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .sections-tableWrap::after,
  .sections-scrollHint {
    display: none;
  }

  .sections-table {
    min-width: 0;
  }
}

/* ── Important notice (ImportantNotice.module.css) ─────── */

.importantNotice-section {
  padding: 1rem 0 2.5rem;
}

.importantNotice-container {
  max-width: calc(var(--container-max) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.importantNotice-panel {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.5rem 1.25rem 1.25rem;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  background: var(--bg-sunken);
  overflow: hidden;
}

/* Ribbon edge along the top, the same gradient as the logo. */
.importantNotice-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-ribbon);
}

.importantNotice-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.importantNotice-icon {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--accent-cyan);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.importantNotice-iconDot {
  fill: var(--accent-cyan);
  stroke: none;
}

.importantNotice-title {
  font-size: 1.15rem;
  font-weight: 700;
}

.importantNotice-body {
  display: grid;
  gap: 0.7rem;
}

.importantNotice-paragraph {
  max-width: 78ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.importantNotice-age {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border-medium);
  font-size: 0.88rem;
  line-height: 1.45;
}

.importantNotice-age strong {
  font-weight: 700;
  color: var(--text-primary);
}

.importantNotice-ageMark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--accent-yellow);
  font-family: var(--font-display), sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--accent-yellow);
}

@media (min-width: 900px) {
  .importantNotice-panel {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1.25rem 2.5rem;
    padding: 2rem 2rem 1.5rem;
  }

  .importantNotice-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .importantNotice-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 2rem;
  }

  .importantNotice-age {
    grid-column: 1 / -1;
  }
}

/* ── Footer (Footer.module.css) ────────────────────────── */

.footer {
  margin-top: auto;
  padding-bottom: 1.5rem;
  background: linear-gradient(180deg, transparent, var(--bg-sunken) 4rem);
}

/* ── Ribbon wave divider ───────────────────────────────── */
.footer-divider {
  display: block;
  width: 100%;
  height: 2.25rem;
}

.footer-dividerGlow {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  opacity: 0.18;
}

.footer-dividerLine {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.footer-inkCyan {
  stop-color: var(--accent-cyan);
}

.footer-inkBlue {
  stop-color: var(--accent-blue);
}

.footer-inkViolet {
  stop-color: var(--accent-violet);
}

.footer-inkPink {
  stop-color: var(--accent-pink);
}

.footer-inkOrange {
  stop-color: var(--accent-orange);
}

/* ── Layout ────────────────────────────────────────────── */
.footer-inner {
  max-width: calc(var(--container-max) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: 1.25rem var(--page-gutter) 0;
}

.footer-columns {
  display: grid;
  gap: 1.75rem;
}

.footer-brand {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.footer-logoPlate {
  justify-self: start;
  display: inline-flex;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--surface-light);
}

.footer-logo {
  width: auto;
  height: 2.6rem;
}

.footer-description {
  max-width: 36ch;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.footer-email {
  justify-self: start;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.footer-email:hover {
  color: var(--accent-pink);
}

.footer-column {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.footer-columnTitle {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.footer-linkList {
  display: grid;
  gap: 0.5rem;
  list-style: none;
}

.footer-link {
  font-size: 0.88rem;
  color: var(--text-secondary);
  transition: color 0.15s ease;
}

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

/* ── Bottom tier: disclosure + copyright ───────────────── */
.footer-bottom {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

.footer-disclosure {
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.footer-disclosure strong {
  color: var(--text-secondary);
}

.footer-copy {
  font-size: 0.74rem;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .footer-columns {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
  }

  .footer-bottom {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 2.5rem;
  }
}

/* ── Legal pages (LegalPage.module.css) ────────────────── */

.legal-page {
  flex: 1;
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: 2rem var(--page-gutter) 3rem;
}

.legal-article {
  max-width: 72ch;
}

.legal-article h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 700;
}

.legal-updated {
  margin: 0 0 1.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.legal-intro {
  margin: 0 0 1.75rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-violet);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
}

.legal-article h2 {
  margin: 2rem 0 0.65rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.legal-article h3 {
  margin: 1.25rem 0 0.5rem;
  font-family: var(--font-body), sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
}

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

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

.legal-article ul,
.legal-article ol {
  display: grid;
  gap: 0.4rem;
  margin: 0.75rem 0;
  padding-left: 1.25rem;
}

.legal-article li::marker {
  color: var(--accent-cyan);
}

.legal-article strong {
  color: var(--text-primary);
}

.legal-article a {
  color: var(--accent-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-article a:hover {
  color: var(--accent-pink);
}

.legal-contactCard {
  display: grid;
  gap: 0.35rem;
  margin: 1.25rem 0;
  padding: 1.1rem 1.25rem;
  border: 1px dashed var(--border-cyan);
  border-radius: var(--radius-md);
  background: var(--tint-cyan);
}

.legal-contactLabel {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

.legal-contactValue {
  font-size: 1.05rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ── 404 (not-found.module.css) ────────────────────────── */

.notFound-page {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 3rem var(--page-gutter);
}

.notFound-card {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  max-width: 32rem;
  text-align: center;
}

.notFound-code {
  font-family: var(--font-display), sans-serif;
  font-size: clamp(3.5rem, 12vw, 6rem);
  font-weight: 800;
  line-height: 1;
  background: var(--gradient-ribbon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.notFound-title {
  font-size: clamp(1.3rem, 4vw, 1.75rem);
}

.notFound-text {
  color: var(--text-secondary);
  line-height: 1.6;
}

.notFound-link {
  margin-top: 0.5rem;
  display: inline-flex;
  padding: 0.75rem 1.2rem;
  border-radius: var(--radius-sm);
  background: var(--gradient-action);
  box-shadow: var(--glow-action);
  font-weight: 800;
  color: var(--text-primary);
}