/* ==========================================================================
   Yabo — front-end design system ("Yabo Tight")
   Every colour derives from the four imported tokens printed inline by
   inc/core/tokens.php (--yabo-bg, --yabo-text, --yabo-accent, --yabo-header-bg)
   plus --yabo-on-accent and --yabo-font. Mobile-first; breakpoints (min-width):
   sm 600px · md 768px · lg 1100px (sidebar column) · xl 1440px.

   Sections: tokens · reset/base · layout · header · drawer · hero · prose ·
   toc · faq · game strip · sidebar · promo bar & scratch card · affiliate bar ·
   modal · footer · utilities · admin bar · print · reduced motion
   ========================================================================== */


/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
  /* Imported tokens, with the theme defaults as fallbacks */
  --bg: var(--yabo-bg, #0b0b10);
  --text: var(--yabo-text, #eaeaea);
  --accent: var(--yabo-accent, #e3b505);
  --on-accent: var(--yabo-on-accent, #111);
  --font: var(--yabo-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Colour roles */
  --header-bg: var(--yabo-header-bg, color-mix(in srgb, var(--bg) 92%, #000));
  --surface-1: color-mix(in srgb, var(--text) 4%, var(--bg));
  --surface-2: color-mix(in srgb, var(--text) 7%, var(--bg));
  --surface-3: color-mix(in srgb, var(--text) 11%, var(--bg));
  --surface-4: color-mix(in srgb, var(--text) 18%, var(--bg));
  --border-subtle: color-mix(in srgb, var(--text) 12%, var(--bg));
  --border: color-mix(in srgb, var(--text) 20%, var(--bg));
  --border-strong: color-mix(in srgb, var(--text) 55%, var(--bg));
  --text-muted: color-mix(in srgb, var(--text) 72%, var(--bg));
  --text-subtle: color-mix(in srgb, var(--text) 64%, var(--bg));
  --accent-hover: color-mix(in srgb, var(--accent) 88%, var(--text));
  --accent-press: color-mix(in srgb, var(--accent) 85%, var(--bg));
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--bg));
  /* Current menu item: a tint over whatever surface is behind, never darker than it */
  --accent-tint: color-mix(in srgb, var(--accent) 16%, transparent);
  /* Accent-coloured text on tinted fills: nudged towards --text for contrast in any palette */
  --accent-text: color-mix(in srgb, var(--accent) 78%, var(--text));
  --accent-line: color-mix(in srgb, var(--accent) 45%, var(--border));
  --focus-ring: var(--accent);
  --scrim: rgb(0 0 0 / 0.64);
  /* Partner logos are light artwork: they always sit on a dark plate, whatever the palette */
  --logo-plate: #161618;

  /* Typography (28/22/19px on phones → 48/32/24px on desktop) */
  --fs-h1: clamp(1.75rem, 1.2rem + 2.25vw, 3rem);
  --fs-h2: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.45vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-prose: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-display: 2rem; /* scratch-card amount */
  --fs-md: 1.0625rem;
  --fs-base: 1rem;
  --fs-ui: 0.9375rem;
  --fs-sm: 0.875rem;
  --fs-fine: 0.8125rem; /* fine print: legal line, 18+ notice, scratch strip */
  --fs-xs: 0.75rem;
  --lh-prose: 1.65;
  /* Prose line length (~68 characters of body text); rem, so every element shares one edge */
  --measure: 41.25rem;

  /* Spacing (4/8 rhythm) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Radius: tight corners (6px buttons and fields, 8px cards and panels); --r-pill only for dots and round icon buttons */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 8px 24px rgb(0 0 0 / 0.45);
  --shadow-3: 0 24px 64px rgb(0 0 0 / 0.6);
  --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 8px 24px color-mix(in srgb, var(--accent) 18%, transparent);

  /* Stacking (dialogs live in the top layer above all of these; --z-dialog only without <dialog> support) */
  --z-header: 100;
  --z-bar: 200;
  --z-sheet: 300;
  --z-dialog: 500;
  --z-skip: 600;

  /* Motion */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layout */
  --container: 1360px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --sidebar-w: 320px;
  --header-h: 105px; /* phones: 56px brand row + 48px Login / Sign up row + 1px border; app.js then sets the real height */
  --logo-h: 36px; /* height-fitted; wide logos are capped by max-width instead */
  --bar-h: 0px;
  --admin-bar: 0px;

  color-scheme: dark;
}

/* Light palettes (inc/core/tokens.php sets color-scheme from the background): softer shadows, darker accent text and
   stronger subtle text (fine print on --surface-1 / --surface-2 stays above 4.5:1). Dark palettes resolve to the
   values above. */
@supports (color: light-dark(#000, #fff)) {
  :root {
    --text-subtle: light-dark(color-mix(in srgb, var(--text) 68%, var(--bg)), color-mix(in srgb, var(--text) 64%, var(--bg)));
    --accent-text: light-dark(color-mix(in srgb, var(--accent) 55%, var(--text)), color-mix(in srgb, var(--accent) 78%, var(--text)));
    --shadow-1: 0 1px 2px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.4));
    --shadow-2: 0 8px 24px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.45));
    --shadow-3: 0 24px 64px light-dark(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.6));
  }
}

@media (min-width: 768px) {
  :root {
    --header-h: 64px;
    --logo-h: 44px;
  }
}


/* ==========================================================================
   Reset / base
   ========================================================================== */

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

:root {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--admin-bar) + var(--header-h) + var(--space-4));
  /* Keeps focused and scrolled-to elements clear of the fixed bottom bar (--bar-h is set on the root while one shows) */
  scroll-padding-bottom: calc(var(--bar-h) + var(--space-4));
  scrollbar-gutter: stable;
}

/* Below lg back-to-top floats in the corner, above the sidebar button on pages that have one (until that is tucked
   away at the footer): scrolled-to elements clear the whole stack too (html.yabo-sidebar-fab / .yabo-fab-tucked are
   set by app.js; the :has() rule covers the first paint) */
@media (max-width: 1099px) {
  :root {
    scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + var(--space-3) + 44px + var(--space-4));
  }

  :root.yabo-sidebar-fab:not(.yabo-fab-tucked) {
    scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + var(--space-3) + 2 * 44px + var(--space-2) + var(--space-4));
  }

  :root:has(.sidebar-fab:not(.is-tucked)) {
    scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + var(--space-3) + 2 * 44px + var(--space-2) + var(--space-4));
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

/* Column flow keeps the footer at the bottom of short pages */
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: var(--bar-h);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked {
  overflow: hidden;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre) {
  margin: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

:where(img, svg, video, canvas, iframe) {
  display: block;
  max-width: 100%;
}

:where(img, video) {
  height: auto;
}

:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(a) {
  color: var(--accent);
  text-decoration-thickness: from-font;
  text-underline-offset: 0.18em;
  transition: color var(--dur-1) var(--ease);
}

:where(a:hover) {
  color: var(--accent-hover);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Programmatic focus targets (headings reached from the TOC): ring for keyboard users only */
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

.prose [tabindex="-1"]:focus-visible {
  outline-offset: 4px;
  border-radius: var(--r-xs);
}

::selection {
  background: color-mix(in srgb, var(--accent) 35%, var(--bg));
  color: var(--text);
}

/* --- Buttons (also styles core's search and post-password submits and the affiliate bar link) */

.btn,
.search-submit,
.post-password-form [type="submit"],
.affiliate-bar__link {
  --btn-h: 44px;
  --btn-px: 20px;
  --btn-fs: var(--fs-ui);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--btn-fs);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.btn--sm {
  --btn-h: 36px;
  --btn-px: 14px;
  --btn-fs: var(--fs-sm);
  border-radius: var(--r-sm);
  font-weight: 600;
}

.btn--lg {
  --btn-h: 56px;
  --btn-px: 28px;
  --btn-fs: var(--fs-h4);
}

@media (pointer: coarse) {
  .btn--sm {
    --btn-h: 44px;
  }
}

.btn--primary,
.search-submit,
.post-password-form [type="submit"],
.affiliate-bar__link {
  background-color: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-1);
}

.btn--primary:hover,
.search-submit:hover,
.post-password-form [type="submit"]:hover,
.affiliate-bar__link:hover {
  background-color: var(--accent-hover);
  color: var(--on-accent);
  box-shadow: var(--glow-accent);
}

.btn--primary:active,
.search-submit:active,
.post-password-form [type="submit"]:active,
.affiliate-bar__link:active {
  background-color: var(--accent-press);
}

.btn--outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.btn--outline:hover,
.btn--outline:active {
  background: var(--surface-3);
  color: var(--text);
}

.btn--ghost {
  background: var(--surface-3);
  color: var(--text);
}

.btn--ghost:hover,
.btn--ghost:active {
  background: var(--surface-4);
  color: var(--text);
}

/* Tonal: accent-tinted secondary CTA (Login beside Sign up); the tint sits on whatever background is behind it */
.btn--tonal {
  background-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--text);
}

.btn--tonal:hover,
.btn--tonal:active {
  background-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--text);
}

/* Hover sheen on the filled CTAs: a light band sweeps across once, nothing changes size. The transition is declared
   on :hover only, so the band resets at once when the pointer leaves. */
.btn--primary,
.btn--tonal,
.search-submit,
.post-password-form [type="submit"],
.affiliate-bar__link {
  background-image: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.3) 50%, transparent 65%);
  background-repeat: no-repeat;
  background-position: 120% 0;
  background-size: 250% 100%;
}

.btn--primary:hover,
.btn--tonal:hover,
.search-submit:hover,
.post-password-form [type="submit"]:hover,
.affiliate-bar__link:hover {
  background-position: -20% 0;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), background-position 800ms ease-in-out;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}

.icon-btn:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--surface-3);
}

/* aria-disabled keeps the control focusable (carousel ends) */
.icon-btn:is(:disabled, [aria-disabled="true"]) {
  opacity: 0.4;
  cursor: default;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

/* --- Caps labels, badge & card ------------------------------------------ */

.badge,
.drawer__label,
.toc__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-1) 10px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-text);
  white-space: nowrap;
}

.badge--outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.card {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

/* --- Shared keyframes --------------------------------------------------- */

@keyframes yabo-fade-in {
  from { opacity: 0; }
}

@keyframes yabo-slide-in {
  from { transform: translateX(var(--slide-from, -100%)); }
}

@keyframes yabo-rise {
  from { opacity: 0; transform: translateY(100%); }
}

@keyframes yabo-pop {
  from { opacity: 0; transform: scale(0.98); }
}

@keyframes yabo-nudge {
  50% { transform: scale(1.08); }
}


/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-main {
  display: block;
  flex: 1 0 auto;
  padding-block: var(--space-4) var(--space-16);
}

.site-main:focus {
  outline: none;
}

.hero + .site-layout {
  margin-top: var(--space-6);
}

.site-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.site-content {
  min-width: 0;
}

@media (min-width: 1100px) {
  .site-main {
    padding-top: var(--space-6);
  }

  .hero + .site-layout {
    margin-top: var(--space-10);
  }

  .site-layout--with-sidebar {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
    column-gap: var(--space-12);
    align-items: start;
  }

  /* The sidebar TOC replaces the inline one */
  .site-layout--with-sidebar .toc--inline {
    display: none;
  }
}

/* --- Entry, page headers, listings -------------------------------------- */

/* One H1 style for templates and imported content */
.entry-title,
.page-title,
.prose :where(h1) {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.entry-header {
  margin-bottom: var(--space-4);
}

.page-header {
  display: grid;
  gap: var(--space-3);
  max-width: 52rem; /* same as .entry-list */
  margin-bottom: var(--space-8);
}

.page-header__eyebrow {
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.page-header__description,
.error-404__text {
  color: var(--text-muted);
  font-size: var(--fs-lead);
}

.entry-list {
  display: grid;
  gap: var(--space-4);
  max-width: 52rem;
}

.entry-card {
  position: relative;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  transition: border-color var(--dur-1) var(--ease);
}

.entry-card:hover,
.entry-card:focus-within {
  border-color: var(--accent-line);
}

.entry-card__title {
  font-size: var(--fs-h3);
  overflow-wrap: anywhere;
}

.entry-card__title a {
  color: var(--text);
  text-decoration: none;
}

/* The whole card is the link's hit area */
.entry-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.entry-card__title a:hover {
  color: var(--accent);
}

.entry-card__excerpt {
  margin-top: var(--space-2);
  color: var(--text-muted);
}

.entry-empty,
.error-404 {
  display: grid;
  justify-items: start;
  gap: var(--space-6);
  max-width: var(--measure);
}

.error-404 .page-header {
  margin-bottom: 0;
}

/* --- Pagination & search form ------------------------------------------- */

.pagination {
  margin-top: var(--space-8);
}

.nav-links,
.post-nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.post-nav-links {
  margin-top: var(--space-8);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.page-numbers,
.post-page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-ui);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

a.page-numbers:hover,
a.post-page-numbers:hover {
  background: var(--surface-3);
  color: var(--text);
}

.page-numbers.current,
.post-page-numbers.current {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.page-numbers.dots {
  border-color: transparent;
}

.search-form {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  max-width: 32rem;
}

.search-form label {
  flex: 1;
  min-width: 0;
}

.search-field,
.post-password-form [type="password"] {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text);
  appearance: none;
}

.search-field::placeholder {
  color: var(--text-subtle);
}

/* Core's form for password-protected posts: same field and button as the search form */
.post-password-form {
  max-width: 32rem;
}

.post-password-form p + p {
  margin-top: var(--space-4);
}

.post-password-form label {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-weight: 600;
}


/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: var(--admin-bar);
  z-index: var(--z-header);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--header-bg);
  transition: box-shadow var(--dur-2) var(--ease);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-2);
}

/* 63px + the 1px bottom border = the 64px --header-h fallback. Not var(--header-h): app.js sets that from the real
   header height, which would then never shrink again. */
.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 63px;
}

.site-header__start {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.site-header__end {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
}

/* Bare menu toggle: three rounded bars, no plate; pulled out so the bars line up with the content edge */
.site-header__burger,
.site-header__burger:hover:not(:disabled, [aria-disabled="true"]) {
  border-color: transparent;
  background: none;
}

.site-header__burger {
  margin-inline-start: -9px;
}

.site-header__burger:hover {
  color: var(--accent-text);
}

.burger {
  display: grid;
  gap: 5px;
  width: 26px;
}

.burger > span {
  height: 3px;
  border-radius: var(--r-pill);
  background: currentColor;
}

/* Phones: two rows. The menu toggle with the brand centred, then Login and Sign up side by side across the width
   (--header-h in the tokens matches the total height). */
@media (max-width: 767px) {
  .site-header__row {
    flex-wrap: wrap;
    gap: 0;
    min-height: 0;
    padding-bottom: var(--space-2);
  }

  .site-header__start {
    display: grid;
    flex-basis: 100%;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: var(--space-2);
    min-height: 56px;
  }

  .site-header__start .site-brand {
    justify-content: center;
  }

  .site-header__start .custom-logo {
    object-position: 50% 50%;
  }

  .site-header__end {
    display: grid;
    flex-basis: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-header__end .btn {
    --btn-h: 40px;
    --btn-px: var(--space-3);
    min-width: 0;
  }
}

/* --- Inline primary menu (setting "Menu always visible", desktop only) ---
   One row after the brand, which never shrinks; the menu takes only the room left and never wraps or paints over the
   logo or the buttons. When it does not fit, app.js sets body.is-nav-collapsed: the menu toggle and the drawer come
   back. Parent items open their sub-menu as a dropdown (toggle added by app.js). */

.site-nav {
  display: none;
  min-width: 0;
}

@media (min-width: 1100px) {
  .has-inline-nav .site-header__burger {
    display: none;
  }

  /* Wide logos are capped by .custom-logo's max-width; a long text name is cut with an ellipsis */
  .has-inline-nav .site-brand {
    flex: none;
    max-width: 18rem;
  }

  .has-inline-nav .site-nav {
    display: block;
    margin-inline-start: var(--space-4);
  }

  .has-inline-nav.is-nav-collapsed .site-header__burger {
    display: inline-grid;
  }

  /* Still laid out, so app.js can measure when the menu fits again */
  .has-inline-nav.is-nav-collapsed .site-nav {
    visibility: hidden;
  }
}

/* overflow-x: clip cuts a row that does not fit (until app.js collapses it), but not the dropdowns: they are positioned
   against the header. The inline padding (offset by the margin) keeps the end items' focus rings visible. */
.site-nav__menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-5);
  margin: 0 calc(-1 * var(--space-1));
  padding: 0 var(--space-1);
  overflow-x: clip;
  list-style: none;
}

.site-nav__menu > li {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-1);
}

.site-nav__menu > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease);
}

/* Accent bar under the link: grows from the centre on hover, stays under the current page (or its parent) */
.site-nav__menu > li > a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 4px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--dur-2) var(--ease);
}

.site-nav__menu > li > a:hover,
.site-nav__menu > .current-menu-item > a,
.site-nav__menu > .current-menu-ancestor > a,
.site-nav__menu > li > a[aria-current="page"] {
  color: var(--accent);
}

.site-nav__menu > li > a:hover::after,
.site-nav__menu > .current-menu-item > a::after,
.site-nav__menu > .current-menu-ancestor > a::after,
.site-nav__menu > li > a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Sub-menu toggle: the drawer's round accent toggle, compact (24px target) */
.site-nav__toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}

.site-nav__toggle:hover {
  background: var(--accent-hover);
}

.site-nav__toggle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-2) var(--ease);
}

.site-nav__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Dropdown panel just under the header (.site-header is its containing block), horizontally at its item's start (the
   static position; app.js moves it back with a negative margin when it would run past the header row). A long one
   ends above the bottom bar (or the window bottom) and scrolls on its own: the sticky header cannot be scrolled to
   show more of it. The scroll padding keeps a focused item's ring inside the panel. */
.site-nav__menu .sub-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  z-index: 1;
  display: grid;
  gap: 2px;
  min-width: 13rem;
  max-width: 20rem;
  max-height: calc(100vh - var(--admin-bar) - var(--header-h) - var(--bar-h) - env(safe-area-inset-bottom, 0px) - var(--space-4));
  max-height: calc(100dvh - var(--admin-bar) - var(--header-h) - var(--bar-h) - env(safe-area-inset-bottom, 0px) - var(--space-4));
  margin: 0;
  padding: var(--space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--header-bg);
  box-shadow: var(--shadow-2);
  list-style: none;
  scrollbar-color: var(--border) transparent;
  scrollbar-width: thin;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}

/* Bridges the gap between the parent link and its open panel, so the pointer can travel into it (on the link: the
   panel's own scrolling would clip a bridge on the panel). From the toggle, app.js's close delay covers the gap. */
.site-nav__menu.is-enhanced > .is-open > a::before,
.site-nav__menu:not(.is-enhanced) > li:hover > a:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: var(--space-6);
}

.site-nav__menu .is-open > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s;
}

/* Before app.js (or without it): hover and keyboard focus open the panel */
.site-nav__menu:not(.is-enhanced) li:hover > .sub-menu,
.site-nav__menu:not(.is-enhanced) li:focus-within > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.site-nav__menu .sub-menu a {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.site-nav__menu .sub-menu a:hover {
  background: var(--surface-2);
  color: var(--text);
}

.site-nav__menu .sub-menu .current-menu-item > a,
.site-nav__menu .sub-menu a[aria-current="page"] {
  background: var(--accent-tint);
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--accent-text);
}

[dir="rtl"] .site-nav__menu .sub-menu .current-menu-item > a,
[dir="rtl"] .site-nav__menu .sub-menu a[aria-current="page"] {
  box-shadow: inset -3px 0 0 var(--accent);
}

/* --- Left sidebar menu (setting "Sidebar on the left", from 1280px) ------
   Fixed column under the header; page content, footer and bottom bars shift right by its width.
   Below 1280px the burger drawer is used (the column would squeeze content + TOC sidebar). */

.side-nav {
  display: none;
}

@media (min-width: 1280px) {
  .has-side-nav {
    --side-nav-w: 15.5rem;
  }

  .has-side-nav .site-header__burger {
    display: none;
  }

  /* The brand sits above the sidebar column, the CTAs at the far end */
  .has-side-nav .site-header__row {
    max-width: none;
    padding-inline: var(--space-6);
  }

  .has-side-nav .side-nav {
    position: fixed;
    inset-block: calc(var(--admin-bar) + var(--header-h)) var(--bar-h);
    inset-inline-start: 0;
    z-index: calc(var(--z-header) - 1);
    display: block;
    width: var(--side-nav-w);
    padding: var(--space-6) var(--space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-inline-end: 1px solid var(--border-subtle);
    background: var(--header-bg);
  }

  .has-side-nav .site-main,
  .has-side-nav .site-footer {
    margin-inline-start: var(--side-nav-w);
  }

  .has-side-nav .promo-bar,
  .has-side-nav .affiliate-bar {
    inset-inline-start: var(--side-nav-w);
  }
}

.side-nav__menu,
.side-nav__menu .sub-menu {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-nav__menu .sub-menu {
  margin-top: var(--space-1);
  padding-inline-start: var(--space-3);
}

.side-nav__menu a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.side-nav__menu .sub-menu a {
  min-height: 2.25rem;
  font-size: var(--fs-sm);
}

.side-nav__menu a[href]:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* A parent linking only to "#" is rendered without href (inc/core/navigation.php): a label over its sub-items */
.side-nav__menu a:not([href]) {
  color: var(--text);
  cursor: default;
}

.side-nav__menu .current-menu-item > a,
.side-nav__menu a[aria-current="page"] {
  background: var(--accent-tint);
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--accent-text);
}

[dir="rtl"] .side-nav__menu .current-menu-item > a,
[dir="rtl"] .side-nav__menu a[aria-current="page"] {
  box-shadow: inset -3px 0 0 var(--accent);
}

/* --- Brand (logo or text fallback, header and drawer) ------------------- */

.site-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.site-logo-link {
  display: flex;
  align-items: center;
  min-width: 0;
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
}

.custom-logo {
  width: auto;
  height: var(--logo-h);
  max-width: min(200px, 42vw);
  object-fit: contain;
  object-position: 0 50%;
}

.site-logo--text {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.site-logo--text:hover {
  color: var(--accent);
}


/* ==========================================================================
   Drawer (offcanvas site menu, native <dialog>)
   ========================================================================== */

.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  inset-inline: 0 auto;
  width: min(22.5rem, 100vw - 3rem);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-inline-end: 1px solid var(--border-subtle);
  background: var(--surface-1);
  color: var(--text);
  box-shadow: var(--shadow-3);
}

.drawer[open] {
  display: flex;
  flex-direction: column;
  animation: yabo-slide-in var(--dur-3) var(--ease);
}

[dir="rtl"] .drawer {
  --slide-from: 100%;
}

.drawer::backdrop {
  background: var(--scrim);
  animation: yabo-fade-in var(--dur-3) var(--ease);
}

/* Brand centred on top (the side padding keeps it clear of the close button), round close in the corner */
.drawer__header {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: var(--space-3) 60px var(--space-2);
}

.drawer__title {
  --logo-h: 36px;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.drawer__title .custom-logo {
  object-position: 50% 50%;
}

.drawer__close,
.drawer__sub-toggle {
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}

.drawer__close:hover,
.drawer__sub-toggle:hover {
  background: var(--accent-hover);
}

.drawer__close {
  position: absolute;
  top: var(--space-3);
  inset-inline-end: var(--space-3);
  width: 40px;
  height: 40px;
  box-shadow: var(--shadow-1);
}

.drawer__close svg {
  width: 20px;
  height: 20px;
}

/* Login and Sign up, stacked full width under the brand */
.drawer__cta {
  display: grid;
  flex: none;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5) var(--space-4);
}

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

.drawer__label {
  padding: var(--space-2) var(--space-3);
  color: var(--text-subtle);
}

/* Every item is its own filled block */
.drawer__menu,
.drawer__menu .sub-menu {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer__menu .sub-menu {
  margin-top: var(--space-2);
  padding-inline-start: var(--space-4);
}

.drawer__menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  background: var(--surface-3);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.drawer__menu .sub-menu a {
  min-height: 44px;
  background: var(--surface-2);
  font-size: var(--fs-ui);
}

.drawer__menu a:hover {
  background: var(--surface-4);
  color: var(--text);
}

.drawer__menu a[aria-current],
.drawer__menu .current-menu-item > a {
  background: var(--accent-tint);
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--accent-text);
}

[dir="rtl"] .drawer__menu a[aria-current],
[dir="rtl"] .drawer__menu .current-menu-item > a {
  box-shadow: inset -3px 0 0 var(--accent);
}

/* Parent items: round toggle on the link's row (added by app.js; without it the sub-menus simply stay open) */
.drawer__menu .has-sub-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.drawer__menu .has-sub-toggle > a {
  grid-area: 1 / 1;
  padding-inline-end: 56px;
}

.drawer__sub-toggle {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: end;
  width: 32px;
  height: 32px;
  margin-inline-end: var(--space-2);
}

.drawer__sub-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-2) var(--ease);
}

.drawer__sub-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}


/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.hero__link {
  display: block;
}

/* Inside the clipped banner, so the ring is drawn inset */
.hero__link:focus-visible {
  outline-offset: -4px;
}

/* Wide banners keep a readable minimum height on phones (cropped, centred) */
.hero__img {
  width: 100%;
  min-height: 10rem;
  object-fit: cover;
}

.hero__overlay {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
}

.hero__copy {
  display: grid;
  gap: var(--space-2);
}

.hero__text {
  max-width: 24ch;
  color: var(--text);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.2;
  text-wrap: balance;
}

.hero__subtext {
  max-width: 36ch;
  color: var(--text-muted);
  font-size: var(--fs-lead);
  line-height: 1.4;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .hero {
    border-radius: var(--r-lg);
  }

  .hero__link + .hero__overlay {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    justify-content: center;
    width: min(36rem, 62%);
    padding: var(--space-8) var(--space-10);
    background: linear-gradient(to right, color-mix(in srgb, var(--bg) 88%, transparent), transparent);
    pointer-events: none;
  }

  [dir="rtl"] .hero__link + .hero__overlay {
    background: linear-gradient(to left, color-mix(in srgb, var(--bg) 88%, transparent), transparent);
  }

  .hero__btn {
    pointer-events: auto;
  }
}

/* --- Slider (extra hero slides): crossfading images, the overlay stays put --- */

.hero__slides {
  position: relative;
  display: grid;
}

.hero__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms var(--ease), visibility 0s linear 600ms;
}

.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms var(--ease), visibility 0s;
}

.hero__slide .hero__img {
  height: 100%;
}

.hero__controls {
  position: absolute;
  inset-inline: 0;
  bottom: var(--space-2);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

/* 24px targets around small visual marks */
.hero__dot,
.hero__pause {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 60%, transparent);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3);
  transition: width var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}

.hero__dot[aria-current="true"]::before {
  width: 20px;
  background: var(--accent);
}

.hero__dot:focus-visible,
.hero__pause:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

/* Pause: two bars; play (pressed): a triangle */
.hero__pause-icon {
  width: 8px;
  height: 10px;
  border-inline: 3px solid #fff;
  filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.6));
}

.hero__pause[aria-pressed="true"] .hero__pause-icon {
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
  border-inline-start: 9px solid #fff;
  border-inline-end: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide,
  .hero__slide.is-active {
    transition: none;
  }
}

@media (min-width: 768px) {
  /* Slides are backgrounds: the copy sits centred between the artwork's figures */
  .hero--slider .hero__overlay {
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-10) var(--space-12);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 72%, transparent), transparent);
    text-align: center;
    pointer-events: none;
  }

  .hero--slider .hero__copy {
    justify-items: center;
  }

  .hero--slider .hero__text {
    max-width: 18ch;
    color: var(--accent-text);
    font-size: var(--fs-h1);
    line-height: 1.1;
    text-shadow: 0 2px 16px color-mix(in srgb, var(--bg) 70%, transparent);
  }

  .hero--slider .hero__subtext {
    color: var(--text);
    font-size: var(--fs-h4);
    font-weight: 600;
    text-shadow: 0 1px 10px color-mix(in srgb, var(--bg) 70%, transparent);
  }

  .hero__controls {
    bottom: var(--space-3);
  }
}

/* --- Artwork hero (no image): theme-coloured SVG behind the text + button --- */

.hero--art {
  display: flex;
  align-items: center;
  min-height: 13rem;
}

.hero__art {
  position: absolute;
  inset: 0;
}

.hero-art {
  display: block;
  width: 100%;
  height: 100%;
}

.hero--art .hero__overlay {
  position: relative;
  max-width: 34rem;
  padding: var(--space-6) var(--space-5);
}

.hero--art .hero__text,
.hero--art .hero__subtext {
  text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 60%, transparent);
}

.hero--art .hero__subtext {
  color: var(--text);
}

.hero-art__stop-surface { stop-color: var(--surface-2); }
.hero-art__stop-bg { stop-color: var(--bg); }
.hero-art__stop-accent { stop-color: var(--accent); }
.hero-art__stop--clear { stop-opacity: 0; }
.hero-art__accent { fill: var(--accent); }
.hero-art__text { fill: var(--text); }
.hero-art__ring { fill: none; stroke: var(--accent); stroke-width: 2; }
.hero-art__line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.hero-art__coin-rim { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, var(--bg)); stroke-width: 3; }
.hero-art__o-08 { opacity: 0.08; }
.hero-art__o-15 { opacity: 0.15; }
.hero-art__o-20 { opacity: 0.2; }
.hero-art__o-25 { opacity: 0.25; }
.hero-art__o-30 { opacity: 0.3; }
.hero-art__o-40 { opacity: 0.4; }
.hero-art__o-50 { opacity: 0.5; }
.hero-art__o-70 { opacity: 0.7; }
.hero-art__o-85 { opacity: 0.85; }

/* Phones: the drawing sits behind the text, so it is dimmed for contrast */
@media (max-width: 767px) {
  .hero--art .hero__art {
    opacity: 0.55;
  }
}

@media (min-width: 768px) {
  /* max-width: the min-height would otherwise widen the box through the ratio (overflow at 768-860px) */
  .hero--art {
    aspect-ratio: 1360 / 380;
    max-width: 100%;
    min-height: 15rem;
  }

  .hero--art .hero__overlay {
    padding: var(--space-8) var(--space-10);
  }
}


/* ==========================================================================
   Prose (post content)
   Element rules use :where() so component classes inside the content win.
   ========================================================================== */

.prose {
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
  overflow-wrap: anywhere;
}

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

/* Text blocks keep a reading measure only when the sidebar column sits beside them;
   otherwise the content uses the full width of the hero / container. */
@media (min-width: 1100px) {
  .site-layout--with-sidebar .prose :where(p, ul, ol, dl, h1, h2, h3, h4, h5, h6, blockquote, .yabo-faq, .yabo-faq-list) {
    max-width: var(--measure);
  }
}

/* --- Typography --------------------------------------------------------- */

.prose :where(h1) {
  margin-bottom: var(--space-4);
}

.prose :where(h2) {
  margin: var(--space-10) 0 var(--space-3);
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.prose :where(h3) {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}

.prose :where(h4, h5, h6) {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.35;
}

.prose :where(p, ul, ol, dl) {
  margin: 0 0 var(--space-4);
}

.prose :where(p) {
  text-wrap: pretty;
}

.prose :where(h1 + p) {
  color: var(--text-muted);
  font-size: var(--fs-lead);
}

.prose :where(hr) {
  height: 0;
  margin: var(--space-10) 0;
  border: 0;
  border-top: 1px solid var(--border-subtle);
}

.prose :where(code, kbd, samp, pre) {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.prose :where(pre) {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  overflow-x: auto;
  border-radius: var(--r-md);
  background: var(--surface-1);
  overflow-wrap: normal;
}

@media (min-width: 1100px) {
  .prose :where(h2) {
    margin: var(--space-12) 0 var(--space-4);
  }
}

/* --- Lists -------------------------------------------------------------- */

.prose :where(ul, ol) {
  padding-inline-start: var(--space-6);
  list-style: none;
}

.prose :where(ol) {
  padding-inline-start: var(--space-8);
  counter-reset: yabo-ol;
}

.prose :where(li) {
  position: relative;
}

.prose :where(li + li) {
  margin-top: var(--space-2);
}

.prose :where(li > ul, li > ol) {
  margin: var(--space-2) 0 0;
}

.prose :where(ul > li)::before {
  content: "";
  position: absolute;
  top: calc(0.825em - 3px);
  inset-inline-start: -1.125rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.prose :where(ol > li) {
  counter-increment: yabo-ol;
}

.prose :where(ol > li)::before {
  content: counter(yabo-ol);
  position: absolute;
  /* Centred on the first line; rem-based because this pseudo-element has its own (smaller) font size */
  top: calc((var(--fs-prose) * var(--lh-prose) - 1.5rem) / 2);
  inset-inline-start: calc(-1 * var(--space-8));
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* --- Tables: hug their content, scroll inside themselves when too wide -- */

.prose :where(table) {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: var(--space-6) 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow-wrap: break-word;
}

.prose :where(th, td) {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  text-align: start;
  vertical-align: top;
}

.prose :where(th) {
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Wide tables scroll rather than squeezing cells to one word per line */
.prose :where(td) {
  min-width: 7.5rem;
}

.prose :where(td:first-child) {
  font-weight: 600;
}

.prose :where(tr:last-child > td) {
  border-bottom: 0;
}

.prose :where(tbody tr) {
  transition: background-color var(--dur-1) var(--ease);
}

.prose :where(tbody tr:hover) {
  background: var(--surface-1);
}

@media (min-width: 768px) {
  .prose :where(th, td) {
    padding: 14px var(--space-5);
  }
}

/* --- Blockquote --------------------------------------------------------- */

.prose :where(blockquote) {
  margin: var(--space-6) 0;
  padding-block: var(--space-1);
  padding-inline: var(--space-5) 0;
  border-inline-start: 3px solid var(--accent);
  color: var(--text-muted);
  font-size: var(--fs-lead);
}

.prose :where(blockquote > :last-child) {
  margin-bottom: 0;
}

/* --- Media & WordPress content classes ---------------------------------- */

.prose :where(img, video) {
  border-radius: var(--r-sm);
}

.prose :where(figure, .wp-caption, .wp-block-image) {
  max-width: 100%;
  margin: var(--space-6) 0;
}

.prose :where(figcaption, .wp-caption-text) {
  margin-top: var(--space-2);
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-align: start; /* lines up with the image, which starts at the inline start */
}

.prose :where(.aligncenter figcaption, .aligncenter .wp-caption-text) {
  text-align: center;
}

.prose :where(.alignleft) {
  float: inline-start;
  max-width: 50%;
  margin: var(--space-1) var(--space-6) var(--space-4) 0;
  margin-inline: 0 var(--space-6);
}

.prose :where(.alignright) {
  float: inline-end;
  max-width: 50%;
  margin: var(--space-1) 0 var(--space-4) var(--space-6);
  margin-inline: var(--space-6) 0;
}

.prose :where(.aligncenter) {
  display: block;
  margin-inline: auto;
}

.prose::after {
  content: "";
  display: block;
  clear: both;
}


/* ==========================================================================
   Table of contents (sidebar card + collapsible inline variant)
   ========================================================================== */

.toc__title {
  margin: 0;
  color: var(--text-subtle);
}

/* A thin track runs down the start edge of the list; the active section lights up its stretch of it in the accent,
   with a glow fading out from the bar. Square ends keep the track straight. */
.toc__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc__link {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding-block: var(--space-2);
  padding-inline: var(--space-4) 0;
  border-inline-start: 2px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.43;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.toc__link:hover {
  border-inline-start-color: var(--border-strong);
  color: var(--text);
}

.toc__link[aria-current]:not([aria-current="false"]) {
  border-inline-start-color: var(--accent);
  background: linear-gradient(to right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 85%);
  color: var(--text);
}

[dir="rtl"] .toc__link[aria-current]:not([aria-current="false"]) {
  background: linear-gradient(to left, color-mix(in srgb, var(--accent) 14%, transparent), transparent 85%);
}

/* The title lines up with the track */
.toc--sidebar {
  padding: var(--space-5) var(--space-4);
}

.toc--sidebar .toc__title {
  padding-bottom: var(--space-3);
}

.toc--inline {
  margin-bottom: var(--space-6);
  padding: 0;
}

.toc__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border-radius: inherit;
  cursor: pointer;
  list-style: none;
}

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

.toc__summary .toc__title {
  color: var(--text);
  font-size: var(--fs-ui);
  letter-spacing: 0;
  text-transform: none;
}

.toc__count {
  min-width: 1.5rem;
  padding: 2px var(--space-2);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.34;
  text-align: center;
}

/* Chevron */
.toc__summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-inline: auto var(--space-1);
  border: solid var(--text-muted);
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-2) var(--ease);
}

.toc--inline[open] > .toc__summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.toc--inline[open] > .toc__summary {
  border-bottom: 1px solid var(--border-subtle);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

/* The track lines up with the summary text */
.toc--inline .toc__list {
  padding: var(--space-3) var(--space-4) var(--space-4);
}


/* ==========================================================================
   FAQ accordion (server-rendered <details>)
   ========================================================================== */

.yabo-faq-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

.yabo-faq-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-1);
  transition: border-color var(--dur-2) var(--ease);
}

.yabo-faq-item[open] {
  border-color: var(--accent-line);
}

.yabo-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  border-radius: inherit;
  cursor: pointer;
  list-style: none;
}

.yabo-faq-question::-webkit-details-marker {
  display: none;
}

.yabo-faq-heading {
  max-width: none;
  margin: 0;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  transition: color var(--dur-1) var(--ease);
}

.yabo-faq-question:hover .yabo-faq-heading,
.yabo-faq-item[open] .yabo-faq-heading {
  color: var(--accent);
}

.yabo-faq-icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform var(--dur-2) var(--ease);
}

.yabo-faq-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 8px;
  height: 8px;
  margin: auto;
  border: solid var(--text-muted);
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}

.yabo-faq-item[open] .yabo-faq-icon {
  transform: rotate(180deg);
}

.yabo-faq-answer {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text-muted);
}

.yabo-faq-answer > :last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   Game strip (horizontal card carousel injected into the content)
   ========================================================================== */

.game-strip {
  margin: var(--space-6) 0;
  container-type: inline-size;
}

.game-strip__track {
  --cols: 2.3;
  --gaps: 2;
  --gap: var(--space-3);
  display: grid;
  grid-auto-columns: calc((100% - var(--gaps) * var(--gap)) / var(--cols));
  grid-auto-flow: column;
  gap: var(--gap);
  /* Bleeds to the screen edge on phones while cards stay aligned with the text */
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.game-strip__track::-webkit-scrollbar {
  display: none;
}

.game-strip__track:focus-visible {
  outline-offset: 4px;
}

@container (min-width: 30rem) {
  .game-strip__track {
    --cols: 3.3;
    --gaps: 3;
  }
}

@container (min-width: 40rem) {
  .game-strip__track {
    --cols: 4.3;
    --gaps: 4;
    --gap: var(--space-4);
  }
}

@container (min-width: 52rem) {
  .game-strip__track {
    --cols: 5;
    --gaps: 4;
  }
}

.game-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-1);
  scroll-snap-align: start;
  transition: border-color var(--dur-1) var(--ease);
}

.game-card:hover,
.game-card:focus-within {
  border-color: var(--accent-line);
}

.game-card__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0;
  background: var(--surface-2);
}

/* Bottom-aligned, so a card without an image still lines up with its neighbours */
.game-card__body {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-3);
}

.game-card__name {
  max-width: none;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Always stacked: every card width gets the same two full-width buttons */
.game-card__actions {
  display: grid;
  gap: var(--space-2);
}

.game-card__actions .btn {
  padding-inline: var(--space-2);
}

.game-strip__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.game-strip__prev,
.game-strip__next {
  border-color: var(--border);
}

[dir="rtl"] .game-strip__controls .icon {
  transform: scaleX(-1);
}

.game-strip__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.game-strip__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
}

.game-strip__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  transition: background-color var(--dur-2) var(--ease);
}

.game-strip__dot:hover::before {
  background: var(--text-muted);
}

.game-strip__dot[aria-current]:not([aria-current="false"])::before {
  width: 24px;
  background: var(--accent);
}

@media (min-width: 1100px) {
  .game-strip {
    margin: var(--space-8) 0;
  }

  .game-strip__track {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
}


/* ==========================================================================
   Sidebar
   < lg: off-canvas sheet from the inline end (scratch card), opened by a FAB.
   ≥ lg: sticky second grid column (TOC card).
   ========================================================================== */

/* Compact, translucent and tucked into the corner so it covers as little text as possible */
.sidebar-fab {
  position: fixed;
  inset-inline-end: calc(var(--space-3) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-3) + var(--bar-h) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-bar);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-2);
  font-size: 1.25rem;
  line-height: 1;
  animation: yabo-nudge 0.6s var(--ease) 1.5s 2;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur-1) var(--ease);
}

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

/* Set by app.js while the button (or back-to-top above it) would cover footer content or the open inline TOC. It stays
   in the tab order and reappears when focused from the keyboard. */
.sidebar-fab.is-tucked:not(:focus-visible) {
  opacity: 0;
  transform: translateY(var(--space-2)) scale(0.9);
  pointer-events: none;
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sheet) - 1);
  background: var(--scrim);
  animation: yabo-fade-in var(--dur-3) var(--ease);
}

.site-sidebar {
  position: fixed;
  inset-block: var(--admin-bar) 0;
  inset-inline-end: 0;
  z-index: var(--z-sheet);
  display: flex;
  flex-direction: column;
  width: min(24rem, 100vw - 3rem);
  border-inline-start: 1px solid var(--border-subtle);
  background: var(--surface-1);
  box-shadow: var(--shadow-3);
  visibility: hidden;
  transform: translateX(var(--sheet-from, 100%));
  /* Hidden only after the slide-out; visible immediately on open so focus can move in */
  transition: transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
}

[dir="rtl"] .site-sidebar {
  --sheet-from: -100%;
}

.site-sidebar.is-open {
  visibility: visible;
  transform: none;
  transition: transform var(--dur-3) var(--ease), visibility 0s;
}

.site-sidebar__head {
  display: flex;
  flex: none;
  justify-content: flex-end;
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.site-sidebar__body {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: var(--space-4);
  min-height: 0;
  padding: var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--border) transparent;
  scrollbar-width: thin;
}

/* The inline TOC covers small screens; the sheet only holds the scratch card */
.site-sidebar .toc--sidebar {
  display: none;
}

@media (min-width: 1100px) {
  .sidebar-fab,
  .sidebar-backdrop,
  .site-sidebar__head,
  .site-sidebar .scratch-card--sheet,
  .site-layout:not(.site-layout--with-sidebar) > .site-sidebar {
    display: none;
  }

  .site-sidebar {
    position: sticky;
    inset: auto;
    top: calc(var(--admin-bar) + var(--header-h) + var(--space-6));
    z-index: auto;
    width: auto;
    max-height: calc(100vh - var(--admin-bar) - var(--header-h) - var(--bar-h) - var(--space-12));
    max-height: calc(100dvh - var(--admin-bar) - var(--header-h) - var(--bar-h) - var(--space-12));
    border: 0;
    background: none;
    box-shadow: none;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .site-sidebar__body {
    padding: 0;
  }

  .site-sidebar .toc--sidebar {
    display: block;
  }
}


/* ==========================================================================
   Promo bar (desktop bottom bar) & scratch card
   ========================================================================== */

.promo-bar {
  display: none;
}

@media (min-width: 1100px) {
  /* Set on the root so its scroll-padding can keep focused elements clear of the bar. app.js flags html.yabo-promo-bar
     while the bar holds the bottom slot (also where :has() is missing); the :has() rule covers the first paint, as
     app.js is deferred. A dismissal earlier in this session (html.yabo-promo-dismissed, set by the head script in
     inc/core/assets.php before first paint) releases the space at once. */
  :root.yabo-promo-bar {
    --bar-h: 4rem;
  }

  :root:has(> body.has-promo-bar):not(.yabo-promo-dismissed) {
    --bar-h: 4rem;
  }

  .promo-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-bar);
    display: block;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-1);
    box-shadow: var(--shadow-2);
    animation: yabo-rise var(--dur-3) var(--ease);
  }

  .promo-bar.is-dismissed,
  .yabo-promo-dismissed .promo-bar {
    display: none;
  }

  body.is-locked .promo-bar {
    visibility: hidden;
  }

  .promo-bar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 4rem;
    padding-block: var(--space-2);
  }

  /* Badge and headline share one text flow: a single row when there is room, two lines for long translations
     (clamped as a last resort). The intro and the 18+ notice take space from the scratch strip first. */
  .promo-bar__intro {
    display: -webkit-box;
    flex: 1 1 20rem;
    min-width: 11rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
  }

  .promo-bar__intro .badge {
    margin-inline-end: var(--space-2);
    vertical-align: middle;
  }

  .promo-bar__text {
    display: inline;
  }

  .promo-bar .scratch-card--bar {
    flex: 0 3 18rem;
    min-width: 12rem;
  }

  /* Wraps onto two lines only when the translation is longer than 11rem */
  .promo-bar__rg {
    flex: none;
    max-width: 11rem;
    color: var(--text-subtle);
    font-size: var(--fs-fine);
    line-height: 1.35;
    text-wrap: balance;
  }
}

@media (min-width: 1440px) {
  .promo-bar__inner {
    gap: var(--space-6);
  }
}

/* --- Scratch card ------------------------------------------------------- */

.scratch-card__surface {
  position: relative;
  overflow: hidden;
  border: 1px dashed var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-soft);
}

.scratch-card__reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  padding: var(--space-3);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

/* Reward text from the settings editor: paragraphs are lines, bold is the prize */
.scratch-card__reward > * {
  margin: 0;
}

.scratch-card__reward :where(strong, b) {
  color: var(--accent-text);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* A colour picked in the editor wins over the accent */
.scratch-card__reward [style*="color"] :where(strong, b) {
  color: inherit;
}

.scratch-card__reward a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Focused by app.js after a keyboard reveal: the ring stays inside the clipped surface */
.scratch-card__reward:focus-visible {
  outline-offset: -2px;
}

.scratch-card__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  transition: opacity var(--dur-3) var(--ease);
}

.scratch-card.is-revealed .scratch-card__canvas {
  opacity: 0;
  pointer-events: none;
}

/* Keyboard path to the reward (shown by app.js): a real button over the cover, visible while it has focus */
.scratch-card__reveal {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: fit-content;
  height: fit-content;
  max-width: calc(100% - var(--space-4));
  margin: auto;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: var(--shadow-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.43;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}

.scratch-card__reveal:focus {
  opacity: 1;
  pointer-events: auto;
}

.scratch-card--sheet {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  text-align: center;
}

.scratch-card__head {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}

.scratch-card__head p {
  color: var(--text);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
}

.scratch-card--sheet .scratch-card__surface {
  aspect-ratio: 16 / 9;
}

/* The bar strip holds one flow of text: the prize and the next line side by side when they fit, else wrapped. It is
   cut after two lines with an ellipsis (the sheet card shows everything), so the first line always stays in view. */
.scratch-card--bar .scratch-card__surface {
  display: grid;
  align-items: center;
  height: 2.5rem;
  border-radius: var(--r-sm);
}

.scratch-card--bar .scratch-card__reward {
  display: -webkit-box;
  height: auto;
  padding: 0 var(--space-3);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: var(--fs-fine);
  line-height: 1.2;
}

/* Paragraphs as runs of one text flow (inside .scratch-card__flow, as -webkit-box would turn its own children into blocks) */
.scratch-card__flow > * {
  display: inline;
}

.scratch-card__flow > * + * {
  margin-inline-start: var(--space-1);
}

.scratch-card--bar .scratch-card__reward :where(strong, b) {
  font-size: var(--fs-h4);
}


/* ==========================================================================
   Affiliate bar (shown by app.js after the demo modal closes)
   ========================================================================== */

/* html.yabo-affiliate-bar from app.js (also where :has() is missing); after the promo bar rules, so this one wins */
:root.yabo-affiliate-bar {
  --bar-h: 4.5rem;
}

:root:has(> body > .affiliate-bar:not([hidden])) {
  --bar-h: 4.5rem;
}

.affiliate-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--gutter);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-1);
  box-shadow: var(--shadow-2);
  animation: yabo-rise var(--dur-3) var(--ease);
}

/* Button base and fill come from .btn / .btn--primary */
.affiliate-bar__link {
  --btn-h: 48px;
  --btn-fs: var(--fs-base);
  flex: 0 1 28rem;
  min-width: 0;
}


/* ==========================================================================
   Modal (game demo, native <dialog>)
   ========================================================================== */

.modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--surface-1);
  color: var(--text);
  box-shadow: var(--shadow-3);
}

.modal[open] {
  display: flex;
  flex-direction: column;
  animation: yabo-pop var(--dur-2) var(--ease);
}

.modal::backdrop {
  background: var(--scrim);
  animation: yabo-fade-in var(--dur-2) var(--ease);
}

/* Title + 44px close */
.modal__header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding-inline: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.modal__title {
  overflow: hidden;
  font-size: var(--fs-base);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.demo-modal__body {
  overflow: hidden;
  background: var(--bg);
}

.demo-modal__frame {
  width: 100%;
  height: 100%;
  border: 0;
}

/* "Play for real" card, centred over a scrim on the running demo */
.demo-modal__cta {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  width: min(26rem, 100% - 2rem);
  height: fit-content;
  margin: auto;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: 0 0 0 100vmax var(--scrim), var(--shadow-3);
  text-align: center;
  animation: yabo-pop var(--dur-3) var(--ease);
}

.demo-modal__cta-close {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
}

.demo-modal__cta-title {
  padding-inline: var(--space-8);
  color: var(--text);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
}

.demo-modal__cta-text {
  margin-bottom: var(--space-2);
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .modal {
    width: min(75rem, 100% - 4rem);
    height: min(50rem, 100% - 4rem);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
  }
}

/* --- Without <dialog> support (drawer and modal) ------------------------
   An unknown element would show permanently: closed dialogs stay hidden. app.js toggles [open] there instead of
   calling showModal(); .is-fallback stands in for the top layer and its backdrop. */

:where(.drawer, .modal):not([open]) {
  display: none;
}

:where(.drawer, .modal).is-fallback[open] {
  position: fixed;
  z-index: var(--z-dialog);
  box-shadow: 0 0 0 100vmax var(--scrim), var(--shadow-3);
}

.modal.is-fallback[open] {
  inset: 0;
}


/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding-block: var(--space-10) var(--space-8);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-1);
  color: var(--text-muted);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-6);
}

/* The group gap is wider than the tile gap, so payments and providers read as two sets */
.footer-logos {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.footer-logos__group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-logos__item {
  display: grid;
  place-items: center;
  height: 52px;
  padding-inline: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--logo-plate);
}

/* An odd last tile is centred in the two-column phone grid */
.footer-logos__item:where(:last-child:nth-child(odd)) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - var(--space-1));
}

/* Full colour (several marks are unreadable in greyscale), slightly dimmed until hovered.
   Wordmarks share one box (28px high, at most 110px wide, so wide tiles do not blow them up);
   compact stacked marks (--mark) get more height so every tile carries the same optical weight. */
.footer-logos__item img {
  width: auto;
  height: 28px;
  max-width: min(100%, 110px);
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--dur-2) var(--ease);
}

.footer-logos__item--mark img {
  height: 40px;
}

.footer-logos__item:hover img {
  opacity: 1;
}

/* --- Responsible-gambling trust logos: official artwork on light tiles --- */

.footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-trust__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.75rem;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-sm);
  background: #fff;
  transition: transform var(--dur-1) var(--ease);
}

a.footer-trust__link:hover {
  transform: translateY(-1px);
}

/* Light-on-transparent artwork (e.g. the Australian set) sits on the same dark plate as the payment logos */
.footer-trust__link--dark {
  border: 1px solid var(--border-subtle);
  background: var(--logo-plate);
}

.footer-trust__link img {
  width: auto;
  max-width: 9.5rem;
  height: 100%;
  max-height: 2.75rem;
  object-fit: contain;
}

/* White-on-colour artwork keeps its official brand background */
.footer-trust__link--openovergokken {
  background: #921074;
}

/* Organisations without a usable logo: their name on the same light tile */
.footer-trust__link--text {
  color: #1d2433;
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.site-footer__links {
  font-size: var(--fs-sm);
}

.site-footer__links a {
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: none;
}

.site-footer__links a:hover {
  color: var(--text);
  text-decoration: underline;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-subtle);
  font-size: var(--fs-fine);
}

/* --- Service pages (Privacy Policy, Terms…) and the consent line --- */

.footer-service__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.footer-service__list a {
  display: inline-block;
  padding-block: 2px;
  color: var(--text-muted);
  text-decoration: none;
}

.footer-service__list a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Back-to-top (below lg with the sidebar button under it) floats over the footer's inline end: every footer row keeps
   its content out of that column (a row's separator still runs the full width), wherever the page is scrolled */
.site-footer__inner > * {
  padding-inline-end: 3.5rem;
}

/* The last line of the page */
.site-footer__consent {
  color: var(--text-subtle);
  font-size: var(--fs-fine);
  line-height: 1.5;
}

.site-footer__consent a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer__consent a:hover {
  color: var(--text);
}

@media (min-width: 600px) {
  .footer-logos__group {
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  }

  .footer-logos__item:where(:last-child:nth-child(odd)) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .footer-trust,
  .footer-service,
  .site-footer__consent {
    grid-column: 1 / -1;
  }

  /* Shares its row with the © line, which takes the inline end (and keeps it clear) */
  .site-footer__links {
    padding-inline-end: 0;
  }

  .footer-logos {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: var(--space-4) var(--space-8);
  }

  .footer-logos__group {
    display: flex;
    flex-wrap: wrap;
  }

  .footer-logos__item {
    width: 8.5rem;
  }
}


/* ==========================================================================
   Back to top (shown by app.js after scrolling down)
   ========================================================================== */

.to-top {
  position: fixed;
  inset-inline-end: calc(var(--space-3) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-3) + var(--bar-h) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-bar);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), bottom var(--dur-2) var(--ease);
}

.to-top:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  transform: translateY(-2px);
}

.to-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Phones and tablets: the sidebar button (when the page has one) owns the corner, so this one sits right above it.
   While that button is tucked away at the footer, this one drops into the corner. html.yabo-sidebar-fab /
   .yabo-fab-tucked come from app.js; the :has() rule covers the first paint. */
@media (max-width: 1099px) {
  :root.yabo-sidebar-fab:not(.yabo-fab-tucked) .to-top {
    bottom: calc(var(--space-3) + 44px + var(--space-2) + var(--bar-h) + env(safe-area-inset-bottom, 0px));
  }

  body:has(.sidebar-fab:not(.is-tucked)) .to-top {
    bottom: calc(var(--space-3) + 44px + var(--space-2) + var(--bar-h) + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top,
  .to-top:hover {
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   Utilities
   ========================================================================== */

[hidden] {
  display: none !important;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  top: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: var(--z-skip);
  width: auto;
  height: auto;
  padding: var(--space-3) var(--space-4);
  clip-path: none;
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text);
  font-weight: 700;
}

/* --skip-top: where it shows on focus (under the admin bar, see Admin bar); hidden above the viewport until then */
.skip-link {
  --skip-top: calc(var(--admin-bar) + var(--space-2));
  position: fixed;
  top: var(--skip-top);
  inset-inline-start: var(--space-2);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--skip-top) - var(--space-2)));
  transition: transform var(--dur-2) var(--ease);
}

.skip-link:focus {
  color: var(--on-accent);
  transform: none;
}


/* ==========================================================================
   Admin bar (logged-in users). WordPress positions the bar absolutely ≤ 600px,
   so sticky/fixed offsets only apply above that.
   ========================================================================== */

@media (min-width: 601px) {
  :root {
    --admin-bar: var(--wp-admin--admin-bar--height, 0px);
  }
}

/* The bar still covers the top of the page before it scrolls away: the skip link opens below it */
@media (max-width: 600px) {
  .admin-bar .skip-link {
    --skip-top: calc(var(--wp-admin--admin-bar--height, 46px) + var(--space-2));
  }
}


/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  :root {
    --bg: #fff;
    --text: #111;
    --accent: #111;
    --on-accent: #fff;
    --bar-h: 0px;
  }

  body {
    padding: 0;
  }

  body :is(.site-header, .skip-link, .drawer, .drawer[open], .site-sidebar, .sidebar-fab, .sidebar-backdrop, .promo-bar,
  .affiliate-bar, .modal, .modal[open], .game-strip, .toc, .footer-logos) {
    display: none;
  }

  .site-main {
    padding: 0;
  }

  .site-layout {
    display: block;
  }

  .hero {
    break-inside: avoid;
  }

  .prose :where(h1, h2, h3, h4) {
    break-after: avoid;
  }

  .prose :where(table, figure, img, blockquote, .yabo-faq-item) {
    break-inside: avoid;
  }

  .prose :where(a[href^="http"])::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    overflow-wrap: anywhere;
  }

  .site-footer {
    padding-block: var(--space-4) 0;
    background: none;
  }

  /* Closed FAQ answers still print (browsers supporting ::details-content) */
  .yabo-faq-item::details-content {
    content-visibility: visible;
    display: block;
  }
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  ::backdrop {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* 0s, not 0.01ms: properties without a declared transition (e.g. an inherited visibility flip) must switch at
       once, or app.js cannot move focus into a sheet that is still "hidden" for one frame */
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}