/* ==========================================================================
   PowerUp Casino Guide (CA) — "apx-" namespaced Retro-Arcade Casino theme.
   Mobile-first. apx- prefix is the mandatory anti-footprint namespace (see
   CONTRACT.md) — the donor's "vlt-" felt-table/gold-emerald VIP-lounge system
   does not appear anywhere in this file.

   Visual divergence from the donor (vlt-deck.css), concretely:
   - Palette LOGIC: dark arcade-cabinet base + electric purple/cyan neon,
     not felt-table emerald + brass/gold.
   - Type stack: condensed system sans for display + monospace for numeric/
     badge chips (LED-display feel), not a serif display face.
   - Radii: large "console button" rounding (12-16px), not the donor's sharp
     6px hairline-bordered cards.
   - Shadows: neon glow (cyan/purple), not a gold drop-shadow.
   - Grid: NO right sticky sidebar. Single wide content column with inline
     insets (TOC + bonus promo card) and a homepage-only "Hot Picks" tile
     strip — a structurally different composition, not a re-skin.
   ========================================================================== */

:root {
  /* Spacing scale — 4/8/12/16/24/32/48/64, CSS custom properties only. */
  --apx-space-xs: 4px;
  --apx-space-sm: 8px;
  --apx-space-md: 12px;
  --apx-space-lg: 16px;
  --apx-space-xl: 24px;
  --apx-space-2xl: 32px;
  --apx-space-3xl: 48px;
  --apx-space-4xl: 64px;

  /* Color system — dark arcade cabinet + neon purple/cyan (not the donor's
     felt-green + gold). */
  --apx-ink: #0a0714;
  --apx-ink-alt: #150f2690;
  --apx-panel: #150f28;
  --apx-panel-2: #1e1638;
  --apx-line: #382a5c;
  --apx-text: #f1edff;
  --apx-text-dim: #a79fc9;
  --apx-purple: #8b5cf6;
  --apx-purple-bright: #b794f6;
  --apx-cyan: #22d3ee;
  --apx-cyan-bright: #67e8f9;
  --apx-pink: #ec4899;
  --apx-mint: #34d399;
  --apx-amber: #fbbf24;

  /* Named z-index layers — see Layout-Regel, no magic numbers. */
  --apx-layer-sticky: 20;
  --apx-layer-nav: 50;
  --apx-layer-menu: 150;

  /* Large "console button" radii — opposite direction from the donor's sharp
     6px cards. */
  --apx-radius: 16px;
  --apx-radius-sm: 10px;
  --apx-radius-pill: 999px;
  --apx-header-h: 68px;
  --apx-max-width: 1160px;
  --apx-content-width: 800px;

  /* Condensed system-sans for display headings (arcade marquee register),
     monospace for numeric/badge chips (LED-display feel) — two distinct
     stacks, neither is the donor's Georgia/Trebuchet pair. */
  --apx-font-display: 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --apx-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --apx-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--apx-font-body);
  background: var(--apx-ink);
  background-image:
    radial-gradient(70% 50% at 15% 0%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(60% 45% at 100% 10%, rgba(34,211,238,.12), transparent 55%);
  background-attachment: fixed;
  color: var(--apx-text);
  line-height: 1.65;
  font-size: 16px;
  /* No overflow-x:hidden on body — would disable position:sticky on
     .apx-header (Layout-Regel). */
}

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

a { color: var(--apx-cyan); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

[id] { scroll-margin-top: calc(var(--apx-header-h) + var(--apx-space-lg)); }

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

.apx-skip-link {
  position: absolute;
  left: var(--apx-space-lg);
  top: -60px;
  background: var(--apx-cyan);
  color: #04141c;
  font-weight: 700;
  padding: var(--apx-space-sm) var(--apx-space-lg);
  border-radius: var(--apx-radius-sm);
  z-index: 500;
  transition: top .15s ease;
}
.apx-skip-link:focus { top: var(--apx-space-sm); }

/* ==========================================================================
   Buttons / CTA
   ========================================================================== */

.apx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--apx-space-sm);
  min-height: 44px;
  padding: var(--apx-space-md) var(--apx-space-xl);
  border-radius: var(--apx-radius-pill);
  background: linear-gradient(135deg, var(--apx-purple), var(--apx-cyan));
  color: #0a0714;
  font-family: var(--apx-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(139,92,246,.4), 0 8px 24px -10px rgba(139,92,246,.65);
  transition: transform .15s ease, box-shadow .15s ease;
}
.apx-btn:hover, .apx-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(34,211,238,.5), 0 14px 28px -8px rgba(34,211,238,.6);
  text-decoration: none;
}
.apx-btn-hero { margin-top: var(--apx-space-lg); }

/* {{cta:Label}} (src/lib/markdown.js applyCtaPlaceholders) is always promoted
   to its own block-level div AFTER the paragraph that contained it — never
   inline mid-sentence. Generous margin top/bottom so the button gets air on
   both sides instead of sitting glued to the preceding paragraph, and
   text-align:center keeps a single pill button from stretching edge-to-edge
   in the narrow content column. */
.apx-cta-block {
  margin: var(--apx-space-2xl) 0;
  text-align: left;
}
.apx-cta-block:first-child { margin-top: 0; }
.apx-cta-block:last-child { margin-bottom: 0; }

/* ==========================================================================
   Header + navigation (single <nav>, JS click-driven burger — no CSS :hover
   dropdown anywhere on this site).
   ========================================================================== */

.apx-header {
  position: sticky;
  top: 0;
  z-index: var(--apx-layer-nav);
  background: rgba(10,7,20,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--apx-line);
}

.apx-header-inner {
  max-width: var(--apx-max-width);
  margin: 0 auto;
  min-height: var(--apx-header-h);
  padding: var(--apx-space-sm) var(--apx-space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--apx-space-lg);
  flex-wrap: wrap;
}

.apx-brand { display: inline-flex; align-items: center; gap: var(--apx-space-sm); }
.apx-brand-mark { flex: none; }
.apx-brand-word {
  font-family: var(--apx-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--apx-text), var(--apx-cyan-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.apx-header-actions {
  display: flex;
  align-items: center;
  gap: var(--apx-space-md);
  order: 3;
}

/* Language switch — two plain links/one chip, no dropdown (mechanics per
   css-layout skill: avoid dropdowns where a click-toggle isn't needed). */
.apx-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-pill);
  font-family: var(--apx-font-mono);
  font-size: .72rem;
  text-transform: uppercase;
}
.apx-lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--apx-space-sm);
  border-radius: var(--apx-radius-pill);
  color: var(--apx-text-dim);
  white-space: nowrap;
}
.apx-lang-link:hover, .apx-lang-link:focus-visible { color: var(--apx-text); text-decoration: none; }
.apx-lang-link--current {
  background: var(--apx-panel-2);
  color: var(--apx-cyan-bright);
  font-weight: 700;
}

.apx-nav { position: relative; order: 2; flex: 1 1 auto; }

.apx-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-sm);
  cursor: pointer;
}
.apx-nav-toggle-bars,
.apx-nav-toggle-bars::before,
.apx-nav-toggle-bars::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--apx-cyan-bright);
  border-radius: 2px;
  position: relative;
}
.apx-nav-toggle-bars::before { position: absolute; top: -6px; }
.apx-nav-toggle-bars::after { position: absolute; top: 6px; }

.apx-nav-list {
  list-style: none;
  margin: var(--apx-space-sm) 0 0;
  padding: var(--apx-space-sm);
  display: none;
  flex-direction: column;
  gap: var(--apx-space-xs);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--apx-panel);
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius);
  box-shadow: 0 20px 44px -14px rgba(0,0,0,.7);
  z-index: var(--apx-layer-menu);
}
.apx-nav-list.is-open { display: flex; }

.apx-nav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--apx-space-sm) var(--apx-space-lg);
  color: var(--apx-text);
  border-radius: var(--apx-radius-sm);
  font-weight: 600;
  white-space: nowrap;
}
.apx-nav-link:hover, .apx-nav-link:focus-visible { background: var(--apx-panel-2); text-decoration: none; }
.apx-nav-link[aria-current="page"] { color: var(--apx-cyan-bright); }
.apx-nav-link--go {
  color: var(--apx-ink);
  background: linear-gradient(135deg, var(--apx-purple), var(--apx-cyan));
  font-weight: 700;
}
.apx-nav-link--go:hover, .apx-nav-link--go:focus-visible { background: linear-gradient(135deg, var(--apx-purple-bright), var(--apx-cyan-bright)); }

/* 1100px, not 880px: with white-space:nowrap on the nav labels (needed so
   "PowerUp Casino"/"Play now" don't wrap mid-word), the unwrapped single-row
   nav needs ~1099px of intrinsic width — verified by sweeping viewport
   widths in the preview harness. Below this the burger-menu layout (already
   confirmed overflow-free down to 320px) stays active instead. */
@media (min-width: 1100px) {
  .apx-header-inner { flex-wrap: nowrap; }
  .apx-nav-toggle { display: none; }
  .apx-nav-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: static;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: 2px;
  }
  /* Same single element as the mobile dropdown's outward CTA (one <a> in the
     DOM, see partials.js renderNav) — only its position/shape changes here,
     never duplicated as a second header button (Layout-Regel). */
  .apx-nav-link--go {
    margin-left: var(--apx-space-md);
    padding: var(--apx-space-sm) var(--apx-space-xl);
    border-radius: var(--apx-radius-pill);
  }
}

/* ==========================================================================
   Hero — CSS-drawn arcade marquee, no photo dependency.
   ========================================================================== */

/* Full-bleed arcade-cabinet backdrop: base gradient + scanlines + a faint
   neon grid, THEN the two radial glows on top (painted after in DOM order via
   ::before, so it always sits behind .apx-hero-glow/.apx-hero-inner). Gives
   the hero a deliberate textured surface instead of reading as an empty gap
   before the text starts. */
.apx-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--apx-line);
  background: linear-gradient(180deg, var(--apx-panel) 0%, var(--apx-ink) 100%);
}
.apx-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(241,237,255,.05) 0px, rgba(241,237,255,.05) 1px, transparent 1px, transparent 3px),
    linear-gradient(rgba(139,92,246,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.12) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 92%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 92%);
  pointer-events: none;
}
.apx-hero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 140%;
  background:
    radial-gradient(45% 60% at 20% 0%, rgba(139,92,246,.35), transparent 70%),
    radial-gradient(40% 55% at 90% 10%, rgba(34,211,238,.28), transparent 65%);
  pointer-events: none;
}
/* Same reading column as .apx-content-col/.apx-breadcrumb below (Layout-Regel
   §6 — one shared grid). .apx-content-col sits INSIDE .apx-main's own
   16px-padded box, so matching its text edge here needs the content width
   PLUS that same padding baked into this box (not .apx-main's own 1160px
   outer max-width, which was the bug: it aligned to .apx-main's edge, not to
   the narrower centered column .apx-main actually renders). */
.apx-hero-inner {
  position: relative;
  max-width: calc(var(--apx-content-width) + (2 * var(--apx-space-lg)));
  margin: 0 auto;
  padding: var(--apx-space-3xl) var(--apx-space-lg) var(--apx-space-2xl);
}
/* Decorative marquee rule — pure CSS, no text node (a baked English phrase
   here would leak untranslated onto fr-CA pages). */
.apx-hero-badge {
  width: 96px;
  height: 3px;
  margin-bottom: var(--apx-space-lg);
  border-radius: var(--apx-radius-pill);
  background: repeating-linear-gradient(90deg, var(--apx-cyan) 0 10px, transparent 10px 16px);
}
.apx-hero-title {
  font-family: var(--apx-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0 0 var(--apx-space-md);
  max-width: 780px;
  color: var(--apx-text);
}
.apx-hero-desc {
  color: var(--apx-text-dim);
  font-size: clamp(.95rem, 1.8vw, 1.05rem);
  max-width: 640px;
  margin: 0;
}

/* ==========================================================================
   Main layout — single wide content column, NO sticky sidebar. Insets (TOC,
   bonus promo card) live inline in the flow between introHtml/midHtml/
   tailHtml (see layout.js).
   ========================================================================== */

.apx-main { max-width: var(--apx-max-width); margin: 0 auto; padding: var(--apx-space-2xl) var(--apx-space-lg) var(--apx-space-4xl); }
.apx-content-col { max-width: var(--apx-content-width); margin: 0 auto; }
.apx-intro { margin-bottom: var(--apx-space-xl); }
.apx-content { max-width: 100%; }

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

/* Already inside .apx-main's own padded box (no extra side padding needed
   here) — matches .apx-content-col's width so its text lines up with the
   intro/body column beneath it (Layout-Regel §6). */
.apx-breadcrumb { max-width: var(--apx-content-width); margin: 0 auto var(--apx-space-lg); font-size: .82rem; }
.apx-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--apx-space-sm); margin: 0; padding: 0; color: var(--apx-text-dim); }
.apx-breadcrumb a { color: var(--apx-text-dim); }
.apx-breadcrumb li[aria-current="page"] { color: var(--apx-text); }
.apx-breadcrumb-sep { opacity: .5; }

/* ==========================================================================
   Table of contents — inline collapsible inset (not a sidebar module).
   ========================================================================== */

.apx-toc {
  margin: 0 0 var(--apx-space-xl);
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius);
  background: var(--apx-panel);
}
.apx-toc-summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: var(--apx-space-md) var(--apx-space-lg);
  font-family: var(--apx-font-mono);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--apx-cyan-bright);
}
.apx-toc-summary::-webkit-details-marker { display: none; }
.apx-toc-summary::after { content: '+'; margin-left: auto; }
.apx-toc[open] .apx-toc-summary::after { content: '\2212'; }
.apx-toc-list {
  margin: 0;
  padding: 0 var(--apx-space-lg) var(--apx-space-lg);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.apx-toc-link {
  display: block;
  min-height: 32px;
  padding: var(--apx-space-xs) var(--apx-space-sm);
  border-radius: var(--apx-radius-sm);
  color: var(--apx-text-dim);
  font-size: .85rem;
}
.apx-toc-link:hover, .apx-toc-link:focus-visible { background: var(--apx-panel-2); color: var(--apx-text); text-decoration: none; }
.apx-toc-link.is-active { color: var(--apx-cyan-bright); font-weight: 700; }

/* ==========================================================================
   Bonus inset — inline promo card between midHtml and tailHtml. Extra margin
   top/bottom (space-3xl, more than the plain .apx-cta-block's space-2xl) so
   it reads as its own distinct section rather than glued to whatever CTA
   button the copywriter placed at the end of the preceding content — most
   pages end their prose with one, right before this inset.
   ========================================================================== */

.apx-inset {
  margin: var(--apx-space-3xl) 0;
  padding: var(--apx-space-xl);
  border-radius: var(--apx-radius);
  border: 1px solid var(--apx-purple);
  background: linear-gradient(160deg, var(--apx-panel-2), var(--apx-panel));
  box-shadow: 0 0 0 1px rgba(139,92,246,.25), 0 20px 40px -24px rgba(139,92,246,.5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--apx-space-lg);
}
.apx-inset-copy { flex: 1 1 260px; min-width: 0; }
.apx-inset-eyebrow {
  margin: 0 0 var(--apx-space-xs);
  font-family: var(--apx-font-mono);
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--apx-cyan-bright);
}
.apx-inset-headline {
  margin: 0 0 var(--apx-space-xs);
  font-family: var(--apx-font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--apx-text);
  overflow-wrap: anywhere;
}
.apx-inset-meta {
  margin: 0;
  color: var(--apx-text-dim);
  font-size: .88rem;
}
.apx-inset-cta { flex: none; }

/* ==========================================================================
   Homepage "Hot Picks" showcase strip (src/templates/lobby.js).
   ========================================================================== */

.apx-showcase {
  margin: 0 0 var(--apx-space-2xl);
  padding: var(--apx-space-xl);
  border-radius: var(--apx-radius);
  border: 1px solid var(--apx-line);
  background: var(--apx-panel);
}
.apx-showcase-inner { max-width: 100%; }
.apx-showcase-head { margin-bottom: var(--apx-space-lg); }
.apx-showcase-title {
  margin: 0;
  font-family: var(--apx-font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--apx-text);
}
.apx-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--apx-space-md);
}
/* lobby.js now shows slots only (SLOT_TILES has 9 entries, MAX_TILES=10) —
   3 columns divides 9 evenly into 3 full rows with no orphan, so the ladder
   steps 2 -> 3 instead of the old 2 -> 5 tuned for a mixed 10-tile set. */
@media (min-width: 560px) { .apx-showcase-grid { grid-template-columns: repeat(3, 1fr); gap: var(--apx-space-lg); } }

.apx-showcase-tile {
  display: flex;
  flex-direction: column;
  color: var(--apx-text);
  opacity: 0;
  animation: apx-tile-in .45s ease forwards;
  animation-delay: var(--apx-showcase-delay, 0ms);
}
@keyframes apx-tile-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 3:4 to match the same 480x640 source crop as the body tile grids (see
   .apx-tile-frame above) — was 1:1, cropping ~33% off every tile's art. */
.apx-showcase-tile-frame {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--apx-radius-sm);
  border: 1px solid var(--apx-line);
  background: var(--apx-panel-2);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.apx-showcase-tile-frame img { width: 100%; height: 100%; object-fit: cover; }
.apx-showcase-tile-name { margin-top: var(--apx-space-sm); font-size: .82rem; font-weight: 700; line-height: 1.25; }
.apx-showcase-tile-provider { font-size: .7rem; color: var(--apx-text-dim); }

@media (hover: hover) and (pointer: fine) {
  .apx-showcase-tile:hover .apx-showcase-tile-frame,
  .apx-showcase-tile:focus-visible .apx-showcase-tile-frame {
    border-color: var(--apx-cyan);
    transform: translateY(-3px);
    box-shadow: 0 14px 26px -14px rgba(34,211,238,.55);
  }
}
.apx-showcase-tile:focus-visible { outline: 2px solid var(--apx-cyan); outline-offset: 2px; border-radius: var(--apx-radius-sm); }
.apx-showcase-foot { display: flex; justify-content: center; margin-top: var(--apx-space-xl); }
.apx-btn-showcase { min-width: 220px; }

/* ==========================================================================
   Content typography (introHtml/midHtml/tailHtml from markdown.js)
   ========================================================================== */

.apx-content h2,
.apx-intro h2 {
  font-family: var(--apx-font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  margin: var(--apx-space-3xl) 0 var(--apx-space-lg);
  padding-top: var(--apx-space-md);
  border-top: 2px solid var(--apx-line);
  color: var(--apx-cyan-bright);
}
.apx-content h2:first-child,
.apx-intro h2:first-child { border-top: none; margin-top: var(--apx-space-lg); padding-top: 0; }
.apx-content h3,
.apx-intro h3 {
  font-family: var(--apx-font-display);
  text-transform: uppercase;
  font-size: 1.05rem;
  margin: var(--apx-space-xl) 0 var(--apx-space-sm);
  color: var(--apx-purple-bright);
}
.apx-content p,
.apx-intro p { margin: 0 0 var(--apx-space-lg); color: var(--apx-text); }
.apx-content ul, .apx-content ol,
.apx-intro ul, .apx-intro ol { margin: 0 0 var(--apx-space-lg); padding-left: 1.3em; }
.apx-content li,
.apx-intro li { margin-bottom: var(--apx-space-xs); }
.apx-content strong,
.apx-intro strong { color: #fff; }

/* ==========================================================================
   Tables — one <table>, cards on mobile via data-label, no duplication.
   ========================================================================== */

.apx-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  margin: 0 0 var(--apx-space-xl);
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius);
}
.apx-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  background: var(--apx-panel);
}
.apx-table th, .apx-table td {
  text-align: left;
  padding: var(--apx-space-md) var(--apx-space-lg);
  border-bottom: 1px solid var(--apx-line);
}
.apx-table thead th {
  background: var(--apx-panel-2);
  color: var(--apx-cyan-bright);
  font-family: var(--apx-font-mono);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.apx-table tbody tr:last-child td { border-bottom: none; }
.apx-table tbody tr:hover { background: var(--apx-ink-alt); }

@media (max-width: 680px) {
  .apx-table-wrap { overflow-x: visible; border: none; }
  .apx-table { min-width: 0; }
  .apx-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .apx-table, .apx-table tbody, .apx-table tr, .apx-table td { display: block; width: 100%; }
  .apx-table tr {
    margin-bottom: var(--apx-space-md);
    border: 1px solid var(--apx-line);
    border-radius: var(--apx-radius);
    padding: var(--apx-space-sm) var(--apx-space-lg);
    background: var(--apx-panel);
  }
  .apx-table td {
    border: 0;
    border-bottom: 1px dashed var(--apx-line);
    padding: var(--apx-space-sm) 0;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .apx-table tr td:last-child { border-bottom: none; }
  .apx-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--apx-font-mono);
    font-weight: 700;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--apx-text-dim);
    margin-bottom: var(--apx-space-xs);
  }
}

/* ==========================================================================
   Tile grids — {{tiles:slots}}/{{tiles:live}} (src/lib/markdown.js
   tileGridHtml/tileHtml). Both kinds ship as 480x640 (3:4) portrait crops
   (see src/data/inventory.js sourcing note) and markdown.js emits
   width="240" height="320" on every tile image regardless of kind — so the
   frame's aspect-ratio has to be 3:4 for slots too, not just live. It used
   to default to a square 1:1 box, which cropped ~33% off every slot tile's
   art under object-fit:cover. `.apx-tile-grid--slots`/`--live` stay as
   separate classes for content-targeting hooks, not because the ratio
   differs anymore.
   ========================================================================== */

.apx-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--apx-space-md);
  margin: var(--apx-space-lg) 0 var(--apx-space-xl);
}
.apx-tile { display: flex; flex-direction: column; color: var(--apx-text); }
.apx-tile-frame {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-sm);
  background: var(--apx-panel);
  transition: border-color .15s ease, transform .15s ease;
}
.apx-tile-frame img { width: 100%; height: 100%; object-fit: cover; }
.apx-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,7,20,.78);
  color: #fff;
  font-weight: 700;
  opacity: 0;
  transition: opacity .15s ease;
}
.apx-tile-name { margin-top: var(--apx-space-sm); font-size: .82rem; font-weight: 600; line-height: 1.25; }
.apx-tile-provider { font-size: .72rem; color: var(--apx-text-dim); }

/* data-category on live tiles carries no visible text (open-ended internal
   key, not a translated label) — just a small corner indicator dot. */
.apx-tile[data-category] .apx-tile-frame::before {
  content: '';
  position: absolute;
  top: var(--apx-space-sm);
  left: var(--apx-space-sm);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--apx-purple-bright);
  box-shadow: 0 0 0 3px rgba(139,92,246,.25);
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .apx-tile:hover .apx-tile-frame,
  .apx-tile:focus-visible .apx-tile-frame { border-color: var(--apx-cyan); transform: translateY(-2px); }
  .apx-tile:hover .apx-tile-overlay,
  .apx-tile:focus-visible .apx-tile-overlay { opacity: 1; }
}
.apx-tile:focus-visible { outline: 2px solid var(--apx-cyan); outline-offset: 2px; border-radius: var(--apx-radius-sm); }

/* ==========================================================================
   Bonus banners — {{banners}} (src/lib/markdown.js bannersHtml/bannerHtml).
   `<article class="apx-banner">` = image on top + `.apx-banner-body` card
   below it (headline + meta text rendered by the frontend from
   BONUS_BANNERS[key], never baked into the artwork — see inventory.js).
   The image itself is NEVER cropped with object-fit:cover — width:100%/
   height:auto takes the ratio straight from the file.
   ========================================================================== */

.apx-banner-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--apx-space-lg);
  margin: var(--apx-space-lg) 0 var(--apx-space-xl);
}
@media (min-width: 640px) {
  .apx-banner-row { grid-template-columns: repeat(2, 1fr); }
  /* Главный оффер во всю ширину: он же убирает сироту в последнем ряду при
     нечётном числе карточек. */
  .apx-banner-row > .apx-banner:first-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
}
.apx-banner {
  position: relative;
  display: block;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius);
  overflow: hidden;
  background: var(--apx-panel);
  aspect-ratio: 16 / 9;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* Картинка — фон карточки, а не блок над текстом: подпись с суммой должна
   лежать НА баннере. Отдельная картинка сверху и подпись под ней читаются как
   случайная иллюстрация с комментарием, а не как промо-баннер. */
.apx-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Текст прижат к низу и лежит на градиентной подложке: объекты на баннерах
   стоят в правой/центральной части кадра, нижняя полоса свободна на всех пяти. */
.apx-banner-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--apx-space-xs);
  padding: var(--apx-space-md);
  background:
    linear-gradient(to right, rgba(9, 6, 20, .9) 0%, rgba(9, 6, 20, .55) 45%, rgba(9, 6, 20, 0) 78%),
    linear-gradient(to top, rgba(9, 6, 20, .92) 0%, rgba(9, 6, 20, .55) 38%, rgba(9, 6, 20, 0) 72%);
}
/* Текст держится левой части кадра, объект остаётся видимым справа. */
.apx-banner-headline,
.apx-banner-meta { max-width: 62%; }
/* На узком экране объект и так уходит правее кадра — жать текст до 62% незачем. */
@media (max-width: 639px) {
  .apx-banner-headline,
  .apx-banner-meta,
  .apx-banner-row > .apx-banner:first-child .apx-banner-headline,
  .apx-banner-row > .apx-banner:first-child .apx-banner-meta { max-width: 78%; }
}
.apx-banner-row > .apx-banner:first-child .apx-banner-headline,
.apx-banner-row > .apx-banner:first-child .apx-banner-meta { max-width: 46%; }
.apx-banner-headline {
  margin: 0;
  font-family: var(--apx-font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.15;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
  overflow-wrap: anywhere;
}
.apx-banner-meta {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: .82rem;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.apx-banner .apx-btn-banner {
  margin-top: var(--apx-space-xs);
  align-self: flex-start;
  padding: .5rem 1.1rem;
  font-size: .78rem;
}
.apx-banner:hover,
.apx-banner:focus-within {
  transform: translateY(-2px);
  border-color: var(--apx-cyan);
  box-shadow: 0 14px 26px -16px rgba(34,211,238,.5);
}

/* ==========================================================================
   Icon rows — {{payments}}/{{providers}} (src/lib/markdown.js
   iconRowHtml/iconHtml). Same component for both, but the plaque background
   is NOT shared — measured average pixel colour of the source files:
   7 of 9 provider logos average RGB 240-255 (near-white, transparent PNG/
   webp monochrome marks per src/data/inventory.js sourcing note) — on a
   white plaque they read as an empty rectangle. Payment icons are the
   opposite mix: Visa/Mastercard/Interac/crypto are in full brand colour, and
   Neteller measures near-black (~20,20,20) — a dark plaque would erase THAT
   one instead. So: dark plaque for providers, white plaque for payments,
   same markup/component, two modifier backgrounds.
   ========================================================================== */

.apx-icon-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--apx-space-md);
  margin: var(--apx-space-lg) 0 var(--apx-space-xl);
}
.apx-icon-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-sm);
  padding: var(--apx-space-sm);
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.apx-icon-row--payments .apx-icon-item {
  background: #fff;
}
.apx-icon-row--providers .apx-icon-item {
  background: var(--apx-panel-2);
  border-color: var(--apx-line);
}
.apx-icon-item:hover { border-color: var(--apx-cyan); transform: translateY(-1px); }
.apx-icon-row--providers .apx-icon-item:hover {
  box-shadow: 0 0 0 1px rgba(34,211,238,.3), 0 10px 20px -12px rgba(34,211,238,.55);
}
.apx-icon-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.apx-icon-item img { max-width: 100%; height: 28px; width: auto; }

/* ==========================================================================
   Pros / Cons
   ========================================================================== */

.apx-proscons {
  border-radius: var(--apx-radius);
  padding: var(--apx-space-lg) var(--apx-space-xl);
  margin: 0 0 var(--apx-space-lg);
  border: 1px solid var(--apx-line);
  background: var(--apx-panel);
}
.apx-pros { border-left: 4px solid var(--apx-mint); }
.apx-cons { border-left: 4px solid var(--apx-pink); }
.apx-proscons-title { margin: 0 0 var(--apx-space-sm); }
.apx-proscons-list { margin: 0; padding-left: 1.2em; }

/* ==========================================================================
   FAQ accordion — native <details>, no JS gap-trap.
   ========================================================================== */

.apx-faq { margin: var(--apx-space-lg) 0 var(--apx-space-xl); display: flex; flex-direction: column; gap: var(--apx-space-sm); }
.apx-faq-item { border: 1px solid var(--apx-line); border-radius: var(--apx-radius); background: var(--apx-panel); padding: 0; }
.apx-faq-q {
  cursor: pointer;
  list-style: none;
  padding: var(--apx-space-lg);
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 700;
  gap: var(--apx-space-sm);
}
.apx-faq-q::-webkit-details-marker { display: none; }
.apx-faq-q::after { content: '+'; margin-left: auto; color: var(--apx-cyan-bright); font-size: 1.2rem; }
.apx-faq-item[open] .apx-faq-q::after { content: '\2212'; }
.apx-faq-a { padding: 0 var(--apx-space-lg) var(--apx-space-lg); color: var(--apx-text-dim); }
.apx-faq-a p:last-child { margin-bottom: 0; }

/* ==========================================================================
   404 — not-found page
   ========================================================================== */

.apx-404 { max-width: var(--apx-max-width); margin: 0 auto; padding: var(--apx-space-4xl) var(--apx-space-lg); text-align: center; }
.apx-404-code {
  margin: 0;
  font-family: var(--apx-font-mono);
  font-size: clamp(2.8rem, 11vw, 4.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--apx-purple-bright);
}
.apx-404-title {
  margin: var(--apx-space-lg) 0 var(--apx-space-md);
  font-family: var(--apx-font-display);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3.6vw, 2rem);
  color: var(--apx-text);
}
.apx-404-text { max-width: 560px; margin: 0 auto var(--apx-space-xl); color: var(--apx-text-dim); }
.apx-404-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--apx-space-md) var(--apx-space-xl);
  list-style: none;
  margin: 0 0 var(--apx-space-2xl);
  padding: 0;
}
.apx-404-links a { color: var(--apx-cyan); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

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

.apx-footer { border-top: 1px solid var(--apx-line); margin-top: var(--apx-space-4xl); }
.apx-footer-inner { max-width: var(--apx-max-width); margin: 0 auto; padding: var(--apx-space-2xl) var(--apx-space-lg); color: var(--apx-text-dim); font-size: .85rem; }
.apx-footer-disclaimer { margin: 0 0 var(--apx-space-md); }
.apx-footer-age { margin: 0 0 var(--apx-space-md); }
.apx-footer-help-lead { margin: 0 0 var(--apx-space-sm); font-weight: 600; color: var(--apx-text); }
.apx-footer-help-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--apx-space-sm) var(--apx-space-xl);
  margin: 0 0 var(--apx-space-lg);
  padding: 0;
}
.apx-footer-help-list a { color: var(--apx-cyan); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.apx-footer-payments-eyebrow {
  margin: 0 0 var(--apx-space-sm);
  font-family: var(--apx-font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--apx-text-dim);
}
/* Reuses .apx-icon-row/-item (see markdown.js {{payments}}/{{providers}})
   at a smaller footprint — same component, footer-scoped sizing only. */
.apx-footer-payments {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: var(--apx-space-sm);
  margin: 0 0 var(--apx-space-lg);
  max-width: 420px;
}
.apx-footer-payments .apx-icon-item { min-height: 32px; padding: var(--apx-space-xs); }
.apx-footer-payments .apx-icon-item img { height: 18px; }
.apx-footer-copy { margin: 0; opacity: .75; }

/* ==========================================================================
   prefers-reduced-motion — global kill-switch.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .apx-showcase-tile { opacity: 1; }
}