/* ==========================================================================
   Fonts — the variables `next/font` used to set on <html>. Same names, so every
   rule below keeps resolving them.
   ========================================================================== */
:root {
  --font-fraunces: 'Fraunces';
  --font-public-sans: 'Public Sans';
}

/* ==========================================================================
   Tokens — app/theme.css, verbatim
   ========================================================================== */
/**
 * Design tokens. Every colour on the site comes from here — hardcoded hex in a
 * `*.module.css` is not allowed (the one exception is `global-error.module.css`, which
 * renders without the layout and therefore without this file).
 *
 * The palette runs cool: a readable deep green is the ground and the cards are wells cut
 * *into* it rather than panels raised above it. Emerald is reserved for action, gold for
 * the single top-ranked offer and the age mark — spending gold on hairlines everywhere
 * would flatten the one signal it is here to carry.
 */
:root {
  color-scheme: dark;

  /* Surfaces */
  --color-bg: #052018;
  --color-well: #03130e;
  --color-raised: #0a3326;
  --color-raised-hover: #0e422f;

  /* Action */
  --color-emerald: #00a86b;
  --color-emerald-lit: #12d888;
  --color-green-deep: #006b4f;

  /* Distinction — top-ranked offer and the age mark, nowhere else */
  --color-gold: #d8b56a;
  --color-gold-lit: #efd396;

  /* Text */
  --color-ivory: #f5f1e8;
  --color-text-muted: #9bb3a6;
  --color-text-subtle: #6e8a7c;
  --color-text-inverse: #03130e;

  /* Lines */
  --color-border: rgba(245, 241, 232, 0.1);
  --color-border-strong: rgba(245, 241, 232, 0.18);
  --color-border-gold: rgba(216, 181, 106, 0.55);
  --color-border-emerald: rgba(0, 168, 107, 0.38);

  /* Washes */
  --color-emerald-soft: rgba(0, 168, 107, 0.14);
  --color-gold-soft: rgba(216, 181, 106, 0.12);

  /* Blocking overlays — the age gate and the refusal screens read as one surface */
  --color-scrim: rgba(3, 19, 14, 0.78);

  /* Plate behind logos — agency marks, brand marks and payment icons.
     Deliberately a mid-tone rather than a light one: the artwork that lands here is not all
     of one kind. Official marks are usually dark on transparent, brand marks are often
     light on transparent, and a plate at either end of the scale hides one of the two.
     This value sits near the middle of the luminance range, so dark artwork reads at about
     5:1 against it and light artwork at about 4:1 — both clear of the 3:1 floor for
     non-text contrast. The hue is a desaturated sage, which keeps it inside the palette
     instead of punching a grey hole in the page. */
  --color-plate: #4f5f58;

  /* Glows and auras. Kept as tokens so no module has to spell a colour out. */
  --glow-gold: drop-shadow(0 0 10px rgba(216, 181, 106, 0.55));
  --glow-emerald: drop-shadow(0 0 8px rgba(0, 168, 107, 0.4));
  --aura-gold-min: 0 0 0 1px rgba(216, 181, 106, 0.5),
    0 0 16px -8px rgba(216, 181, 106, 0.9);
  --aura-gold-max: 0 0 0 1px rgba(216, 181, 106, 0.8),
    0 0 34px -4px rgba(216, 181, 106, 0.9);
  --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.32);

  /* Type */
  --font-display: var(--font-fraunces), Georgia, 'Times New Roman', serif;
  --font-body: var(--font-public-sans), -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Arial, sans-serif;

  /* The single horizontal padding for every container. Media queries never override it. */
  --pad-x: 1.25rem;

  /* Shared container width, so the header, the offers block and the footer line up. */
  --width-content: 62.5rem;
}

/* ==========================================================================
   Reset — app/globals.css, verbatim
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

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;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-ivory);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
}

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

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

:focus-visible {
  outline: 2px solid var(--color-emerald-lit);
  outline-offset: 2px;
}

/* Anchor targets clear the top of the viewport. Every id listed here exists in
   `SECTION_IDS` (`app/content.ts`); the two lists are meant to be read together. */
#ofertas,
#transparencia,
#bonus-de-boas-vindas,
#jogos-e-mesas,
#levantamentos {
  scroll-margin-top: 1.5rem;
}

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

/* The age gate and the refusal screen are `display: flex`; without this the `hidden`
   attribute would not hide them. */
[hidden] {
  display: none !important;
}

/* ==========================================================================
   Site background — SiteBackground.module.css
   ========================================================================== */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--color-bg);
  pointer-events: none;
}

.site-bg-lattice {
  position: absolute;
  inset: 0;
  /* `currentColor` inside the SVG resolves to this. */
  color: var(--color-emerald);
  opacity: 0.055;
}

/* One bloom, anchored where the hero sits, so the top of the page lifts slightly off the
   ground colour without any element having to carry a gradient of its own. */
.site-bg-bloom {
  position: absolute;
  top: -18rem;
  left: -12rem;
  width: 46rem;
  height: 46rem;
  background: radial-gradient(
    circle,
    var(--color-emerald-soft) 0%,
    transparent 68%
  );
}

@media (max-width: 48rem) {
  .site-bg-bloom {
    top: -14rem;
    left: -16rem;
    width: 34rem;
    height: 34rem;
  }
}

/* ==========================================================================
   Header — Header.module.css
   ========================================================================== */
.header {
  width: 100%;
}

.header-inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 1rem var(--pad-x);
  display: flex;
  align-items: center;
}

.header-home {
  display: inline-flex;
  align-items: center;
}

.header-logo {
  width: 164px;
  height: auto;
}

/* The accent rule reads the palette left to right: action, ground, distinction. It is the
   header's whole identity, so it is a real element rather than a border. */
.header-rule {
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--color-emerald) 0%,
    var(--color-green-deep) 46%,
    var(--color-gold) 100%
  );
}

@media (max-width: 40rem) {
  .header-inner {
    padding: 0.75rem var(--pad-x);
    justify-content: center;
  }

  .header-logo {
    width: 132px;
  }
}

/* ==========================================================================
   Home page — page.module.css
   ========================================================================== */
.main {
  flex: 1;
}

/* ==========================================================================
   Hero — Hero.module.css
   ========================================================================== */
/* No min-height, no max-height: the hero is as tall as what it holds. */
.hero {
  padding: 1rem 0 1rem;
}

.hero-inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  margin: 0;
  max-width: 20ch;
}

.hero-line {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 600;
  color: var(--color-ivory);
}

/* The emphasised line: larger, and underscored only as wide as itself. */
.hero-accent {
  align-self: flex-start;
  padding-bottom: 0.28rem;
  border-bottom: 2px solid var(--color-gold);
  font-size: clamp(2rem, 6vw, 3.1rem);
  font-weight: 900;
  line-height: 1.02;
  color: var(--color-ivory);
}

.hero-description {
  max-width: 46ch;
  margin: 1.1rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (max-width: 40rem) {
  .hero {
    padding: 1rem 0 0;
  }

  .hero-title {
    max-width: 100%;
  }
}

/* ==========================================================================
   Age notice — AgeNotice.module.css
   ========================================================================== */
.age-notice {
  padding: 0.35rem 0 0.15rem;
}

.age-notice-inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.age-notice-text {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.45rem 0.75rem;
  border-left: 3px solid var(--color-gold);
  background: var(--color-gold-soft);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* Square-cornered on purpose: informational elements on this site never take a pill. */
.age-notice-marker {
  flex-shrink: 0;
  padding: 0.2rem 0.42rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-text-inverse);
  background: var(--color-gold);
  border-radius: 3px;
}

@media (max-width: 30rem) {
  .age-notice-text {
    align-items: flex-start;
  }
}

/* ==========================================================================
   Offers block — Offers.module.css
   ========================================================================== */
.offers-container {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.offers {
  padding: 1.25rem 0 1.75rem;
}

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

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

/* ==========================================================================
   Offer card — Offer.module.css
   ========================================================================== */
/* ── Card frame ────────────────────────────────────────────
   `.offer-card` carries the border and the background; `.offer-inner` is only the grid.
   The licence line is a sibling of the grid and the last child of this element. */
.offer-card {
  position: relative;
  overflow: hidden;
  background: var(--color-well);
  border: 1px solid var(--color-border);
  /* Asymmetric on purpose: one radius on everything is the tell of a card kit. */
  border-radius: 4px 20px 4px 20px;
  box-shadow: var(--shadow-card);
}

/* ── Rank rail ─────────────────────────────────────────────
   Rank is encoded by the rail, not by a numbered chip: the eye reads the left edge before
   it reads any label. */
.offer-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--color-border-strong);
  border-radius: 4px 0 0 20px;
}

.offer-rail--high {
  background: var(--color-green-deep);
}

.offer-rail--apex {
  background: var(--color-gold);
}

/* ── Rank distinction ──────────────────────────────────────
   Only the first card is loud. Two and three are identical to each other and quiet; the
   rest carry no treatment at all. */
.offer-card--high {
  border-color: var(--color-border-emerald);
}

.offer-card--apex {
  border-color: transparent;
  animation: apexAura 3.4s ease-in-out infinite alternate;
}

@keyframes apexAura {
  from {
    box-shadow: var(--shadow-card), var(--aura-gold-min);
  }
  to {
    box-shadow: var(--shadow-card), var(--aura-gold-max);
  }
}

/* ── Badge ─────────────────────────────────────────────────
   A tab cut into the top edge beside the rail, not a chip floating over the border. */
.offer-badge {
  position: absolute;
  top: 0;
  left: 4px;
  padding: 0.3rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--color-ivory);
  background: var(--color-green-deep);
  border-radius: 0 0 10px 0;
}

.offer-card--apex .offer-badge {
  color: var(--color-text-inverse);
  animation: apexBadge 2.6s ease-in-out infinite alternate;
}

@keyframes apexBadge {
  from {
    background: var(--color-gold);
  }
  to {
    background: var(--color-gold-lit);
  }
}

/* ── Grid ────────────────────────────────────────────────── */
.offer-inner {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1rem 1rem 1.25rem;
  position: relative;
  pointer-events: none;
}

.offer-card--apex .offer-inner,
.offer-card--high .offer-inner {
  padding-top: 2.1rem;
}

/* Mark, score, welcome line, button — in that order on a narrow screen. */
.offer-inner--compact {
  grid-template-columns: 1fr;
  grid-template-areas:
    'logo'
    'rating'
    'bonus'
    'cta';
  justify-items: center;
  text-align: center;
  gap: 1rem;
}

/* ── Areas ─────────────────────────────────────────────── */
.offer-logo-area {
  grid-area: logo;
  display: flex;
  align-items: center;
}

.offer-bonus-area {
  grid-area: bonus;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* ── Score ─────────────────────────────────────────────────
   Derived from the rank. The figure is set in the display face so it reads as a verdict
   rather than as another number in the copy. */
.offer-rating-area {
  grid-area: rating;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.offer-rating-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-ivory);
}

.offer-card--apex .offer-rating-value {
  color: var(--color-gold);
}

.offer-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

.offer-star {
  position: relative;
  display: inline-flex;
  width: 14px;
  height: 14px;
}

.offer-star-empty {
  color: var(--color-border-strong);
}

.offer-star-full,
.offer-star-half {
  position: absolute;
  inset: 0;
  color: var(--color-gold);
}

/* Half star: the same glyph, clipped down the middle. */
.offer-star-half {
  clip-path: inset(0 50% 0 0);
}

/* ── Logo plate ────────────────────────────────────────────
   Marks are raster artwork with transparency and sink into the dark well, so they sit on a
   plate. The plate is a mid-tone (see `--color-plate`) because the marks arrive both dark and
   light, and either extreme would swallow one of the two. */
.offer-logo-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 80px;
  padding: 0.5rem 0.5rem;
  background: var(--color-plate);
  border-radius: 3px 12px 3px 12px;
}

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

/* ── CTA ───────────────────────────────────────────────────
   The only link on the card. The grid above sets `pointer-events: none`, so the anchor
   switches it back on for itself rather than inheriting it. */
.offer-cta-area {
  grid-area: cta;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.offer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.72rem 1.15rem;
  background: var(--color-emerald);
  color: var(--color-text-inverse);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 0.7rem),
    calc(100% - 0.7rem) 100%,
    0 100%
  );
  transition: background-color 0.18s ease;
}

.offer-card:hover .offer-cta {
  background: var(--color-emerald-lit);
}

.offer-card--apex .offer-cta {
  background: var(--color-gold);
  filter: var(--glow-gold);
}

.offer-card--apex:hover .offer-cta {
  background: var(--color-gold-lit);
}

/* ── Licence line ──────────────────────────────────────────
   Sits inside the framed element, below the grid. */
.offer-licence {
  margin: 0;
  padding: 0.55rem 1rem 0.7rem 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--color-text-subtle);
  text-align: center;
}

.offer-licence-label {
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ── Desktop ───────────────────────────────────────────── */
@media (min-width: 769px) {
  .offer-inner {
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem 1rem 1.5rem;
  }

  /* The mark spans both rows on the left, the button spans both on the right, and the score
     sits directly above the welcome line it qualifies. */
  .offer-inner--compact {
    grid-template-columns: 148px minmax(0, 1fr) auto;
    grid-template-areas:
      'logo rating cta'
      'logo bonus  cta';
    justify-items: stretch;
    text-align: left;
    gap: 0.5rem 1.5rem;
  }

  .offer-inner--compact .offer-logo-area,
  .offer-inner--compact .offer-cta-area {
    align-self: center;
  }
}

/* ==========================================================================
   Card description — BonusDisplay.module.css (descriptive variant)
   ========================================================================== */
/* Compact card: the field holds a description, not a figure. Small, wrapping, and measured
   so a long string can never push past the card edge. */
.bonus-descriptive {
  margin: 0;
  max-width: 34ch;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ==========================================================================
   Transparency notice — TransparencyNotice.module.css
   ========================================================================== */
.transparency {
  padding: 1.5rem 0 2.5rem;
}

.transparency-inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.transparency-title {
  margin: 0 0 1.25rem;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
}

.transparency-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.transparency-block {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}

.transparency-heading {
  margin: 0 0 0.4rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-ivory);
}

.transparency-text {
  margin: 0;
  max-width: 62ch;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--color-text-subtle);
}

@media (min-width: 769px) {
  .transparency-columns {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--color-border);
  }

  .transparency-block {
    padding: 1.1rem 1.4rem;
    border-bottom: 0;
    border-left: 1px solid var(--color-border);
  }

  .transparency-block:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .transparency-block:last-child {
    padding-right: 0;
  }
}

/* ==========================================================================
   Age gate — AgeGate.module.css
   ========================================================================== */
/* Fixed and full-viewport: it has to cover the page rather than land in the document flow
   above it. */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-x);
  background: var(--color-scrim);
  backdrop-filter: blur(3px);
}

.age-gate-card {
  width: 100%;
  max-width: 30rem;
  padding: 1.75rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-gold);
  border-radius: 4px 20px 4px 20px;
  text-align: center;
}

.age-gate-marker {
  display: inline-block;
  margin: 0 0 0.9rem;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-text-inverse);
  background: var(--color-gold);
  border-radius: 3px;
}

.age-gate-title {
  margin: 0 0 0.7rem;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  color: var(--color-ivory);
}

.age-gate-text {
  margin: 0 auto;
  max-width: 42ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.age-gate-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.age-gate-accept,
.age-gate-decline {
  padding: 0.8rem 1rem;
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: 3px;
  cursor: pointer;
}

.age-gate-accept {
  border: 0;
  background: var(--color-emerald);
  color: var(--color-text-inverse);
}

.age-gate-accept:hover {
  background: var(--color-emerald-lit);
}

.age-gate-decline {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
}

.age-gate-decline:hover {
  color: var(--color-ivory);
  border-color: var(--color-border-emerald);
}

@media (min-width: 33rem) {
  .age-gate-actions {
    grid-template-columns: 1.6fr 1fr;
  }
}

/* ==========================================================================
   Refusal screen — AccessDenied.module.css
   ========================================================================== */
/* Shares the age gate's surface treatment: the two screens are one moment, and the visitor
   should not feel handed to a different site between them. */
.access-denied {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-x);
  background: var(--color-scrim);
  backdrop-filter: blur(3px);
}

.access-denied-card {
  width: 100%;
  max-width: 32rem;
  padding: 1.75rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: 4px 20px 4px 20px;
  text-align: center;
}

.access-denied-marker {
  display: inline-block;
  margin: 0 0 0.85rem;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-text-inverse);
  background: var(--color-gold);
  border-radius: 3px;
}

.access-denied-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-subtle);
}

.access-denied-title {
  margin: 0 0 0.7rem;
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  color: var(--color-ivory);
}

.access-denied-text {
  margin: 0 auto;
  max-width: 44ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.access-denied-button {
  margin-top: 1.35rem;
  padding: 0.75rem 1.25rem;
  background: transparent;
  color: var(--color-ivory);
  border: 1px solid var(--color-border-strong);
  border-radius: 3px;
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
}

.access-denied-button:hover {
  border-color: var(--color-border-emerald);
}

/* ==========================================================================
   Footer — Footer.module.css
   ========================================================================== */
/* Separated from the content by a gradient rather than a grey rule: the footer carries the
   compliance blocks, and it should read as a different surface, not as one more section. */
.footer {
  margin-top: auto;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--color-well) 22%,
    var(--color-well) 100%
  );
  border-top: 1px solid var(--color-border);
}

.footer-inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 1.75rem var(--pad-x) 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-brand {
  display: inline-flex;
  align-self: flex-start;
}

.footer-brand-logo {
  width: 140px;
  height: auto;
}

/* ── Licence disclaimer ────────────────────────────────── */
.footer-disclaimer {
  padding: 1.1rem 1.2rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-gold);
  border-radius: 4px 16px 4px 16px;
}

.footer-disclaimer-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: var(--color-gold);
}

.footer-disclaimer-text {
  margin: 0 0 0.7rem;
  max-width: 88ch;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.footer-disclaimer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gold);
  text-decoration: underline;
}

.footer-disclaimer-link:hover {
  color: var(--color-gold-lit);
}

/* ── Compliance grid ───────────────────────────────────── */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
}

.footer-block-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-ivory);
}

.footer-block-text {
  margin: 0 0 0.3rem;
  font-size: 0.78125rem;
  line-height: 1.6;
  color: var(--color-text-subtle);
}

.footer-inline-link {
  color: var(--color-text-muted);
  text-decoration: underline;
}

.footer-inline-link:hover {
  color: var(--color-ivory);
}

.footer-licence-list {
  margin: 0;
  list-style: none;
}

.footer-licence-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border);
}

.footer-licence-item:last-child {
  border-bottom: 0;
}

.footer-licence-brand {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-ivory);
}

.footer-licence-meta {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.footer-service + .footer-service {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
}

.footer-service-name {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Official marks are artwork on a transparent ground and are unreadable straight on the
   dark surface. The plate under them is a mid-tone rather than white, so a light mark keeps
   contrast too — see `--color-plate`. */
.footer-plate-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
  padding: 0.35rem 0.55rem;
  background: var(--color-plate);
  border-radius: 3px;
}

.footer-plate-logo {
  width: auto;
  height: 34px;
  object-fit: contain;
}

/* ── Bottom row ────────────────────────────────────────── */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
}

.footer-age-mark {
  flex-shrink: 0;
  padding: 0.28rem 0.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-gold);
  border: 2px solid var(--color-border-gold);
  border-radius: 3px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}

.footer-link {
  font-size: 0.78125rem;
  color: var(--color-text-muted);
}

.footer-link:hover {
  color: var(--color-ivory);
  text-decoration: underline;
}

/* ── Identity and meta ─────────────────────────────────── */
.footer-company {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.footer-meta {
  margin: 0;
  font-size: 0.71875rem;
  line-height: 1.6;
  color: var(--color-text-subtle);
}

@media (max-width: 40rem) {
  .footer-brand {
    align-self: center;
  }
}

/* ==========================================================================
   Legal pages — LegalPage.module.css
   ========================================================================== */
.legal {
  flex: 1;
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: 2rem var(--pad-x) 3rem;
}

.legal h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  color: var(--color-ivory);
}

.legal h2 {
  margin: 2rem 0 0.6rem;
  font-size: 1.2rem;
  color: var(--color-gold);
}

.legal h3 {
  margin: 1.4rem 0 0.4rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-ivory);
}

.legal p,
.legal li {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}

.legal p {
  margin: 0 0 0.75rem;
  max-width: 74ch;
}

.legal ul,
.legal ol {
  margin: 0 0 0.9rem;
  padding-left: 1.25rem;
  max-width: 74ch;
}

.legal li {
  margin-bottom: 0.35rem;
}

.legal a {
  color: var(--color-gold);
  text-decoration: underline;
}

.legal a:hover {
  color: var(--color-gold-lit);
}

.legal strong {
  color: var(--color-ivory);
  font-weight: 700;
}

/* Standfirst under the page title. */
.legal-lead {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.legal-updated {
  margin: 0 0 1.75rem;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

/* Contact card used by the compliance pages for an organisation's details. */
.legal-contact-card {
  margin: 0 0 0.9rem;
  padding: 0.9rem 1.05rem;
  background: var(--color-well);
  border: 1px solid var(--color-border);
  border-radius: 4px 14px 4px 14px;
}

.legal-contact-name {
  margin: 0 0 0.3rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-ivory);
}

.legal-contact-line {
  margin: 0 0 0.2rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-subtle);
}

/* Self-assessment questionnaire on the responsible-play page. */
.legal-self-test {
  margin: 0 0 0.9rem;
  padding: 1rem 1.15rem;
  background: var(--color-well);
  border-left: 3px solid var(--color-gold);
}

/* ==========================================================================
   404 — not-found.module.css
   ========================================================================== */
.not-found {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 3rem var(--pad-x);
}

.not-found-card {
  width: 100%;
  max-width: 34rem;
  padding: 1.75rem 1.5rem;
  background: var(--color-well);
  border: 1px solid var(--color-border);
  border-radius: 4px 20px 4px 20px;
  text-align: center;
}

.not-found-code {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  color: var(--color-gold);
}

.not-found-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  color: var(--color-ivory);
}

.not-found-text {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.5rem;
}

.not-found-link {
  padding: 0.65rem 1.2rem;
  background: var(--color-emerald);
  color: var(--color-text-inverse);
  font-weight: 700;
  font-size: 0.9375rem;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 0.6rem),
    calc(100% - 0.6rem) 100%,
    0 100%
  );
  transition: background-color 0.18s ease;
}

.not-found-link:hover {
  background: var(--color-emerald-lit);
}

.not-found-link-muted {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: underline;
}

.not-found-link-muted:hover {
  color: var(--color-ivory);
}