/* =========================================================
   Cavendrix — Lucky Ox's Golden Blessing, executed in a fresh
   "Belle Époque Gilt" register (champagne gold + Parisian cream
   + wrought-iron black, ornate 1890s-exposition chrome).
   INTL-social (social-v2 track) — bespoke build, prefix "psp".
   Mobile-first: base styles = mobile, min-width media queries
   raise the design up, never max-width. No Bootstrap grid —
   this track uses its own CSS architecture (custom flex/grid).
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

:root {
  /* ---- required sv2-* aliases (auth modal / cookie banner CSS depend on these exact names) ---- */
  --sv2-gold: #d8b45a;
  --sv2-gold-deep: #a3791f;
  --sv2-white: #f7ecd8;
  --sv2-ink: #1b1310;
  --sv2-text-dim: #d9c39a;
  --sv2-card-bg: rgba(247, 236, 216, .07);
  --sv2-card-border: rgba(216, 180, 90, .38);
  --sv2-radius-lg: 6px;

  /* ---- Cavendrix palette: an ornate gilded-exposition register laid
     over the reused Lucky Ox world (imperial gold, aged wine-red,
     deep jade, wrought iron) — richer/darker than a flat lucky-red ---- */
  --psp-wine: #6e1a2c;
  --psp-wine-deep: #3f0e19;
  --psp-wine-vivid: #8c2138;
  --psp-gold: var(--sv2-gold);
  --psp-gold-deep: var(--sv2-gold-deep);
  --psp-jade: #1d5c46;
  --psp-jade-deep: #123a2c;
  --psp-ink: var(--sv2-ink);
  --psp-white: var(--sv2-white);
  --psp-text-dim: var(--sv2-text-dim);
  --psp-surface: #2a1c15;
  --psp-surface-2: #1c130e;
  --psp-card-bg: var(--sv2-card-bg);
  --psp-card-border: var(--sv2-card-border);
  --psp-radius-lg: var(--sv2-radius-lg);
  --psp-radius-md: 3px;
  --psp-radius-sm: 2px;
  --psp-font-display: 'Cinzel Decorative', 'Cormorant', Georgia, serif;
  --psp-font-body: 'Cormorant', Georgia, serif;
  --psp-shadow-card: 0 16px 36px rgba(8, 3, 2, .55);
  --psp-utility-h: 30px;
  --psp-bar-h: 64px;
  --psp-nav-h: 94px;
}
@media (min-width: 900px) {
  :root { --psp-utility-h: 34px; --psp-bar-h: 84px; --psp-nav-h: 118px; }
}

/* ---------- reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--psp-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--psp-white);
  background: var(--psp-wine-deep);
  min-height: 100vh;
}
/* Site-wide static backdrop — a real fixed-position element behind
   everything, not `background-attachment:fixed` (unreliable on iOS Safari
   and on full-page screenshot captures). Same cartoon fairy-tale-city image
   on every page, never scrolls; page content scrolls normally over it. */
.psp-site-bg {
  position: fixed; inset: 0; z-index: -2;
  background-size: cover; background-position: center 30%; background-repeat: no-repeat;
}
.psp-site-scrim {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(27,19,16,.82) 0%, rgba(27,19,16,.98) 100%);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--psp-font-display); font-weight: 700; margin: 0 0 .5em; line-height: 1.2; letter-spacing: .01em; }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; font-size: 16px; }

.psp-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .psp-wrap { padding: 0 32px; } }

main { display: block; padding-top: var(--psp-nav-h); }

.psp-section { padding: 48px 0; }
@media (min-width: 900px) { .psp-section { padding: 76px 0; } }
.psp-section--alt { background: rgba(0, 0, 0, .18); }

.psp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--psp-font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--psp-gold);
  margin-bottom: 10px;
}
.psp-section-head { max-width: 640px; margin-bottom: 30px; }
.psp-section-head h2 { font-size: 1.7rem; }
@media (min-width: 900px) { .psp-section-head h2 { font-size: 2.2rem; } }
.psp-section-head p { color: var(--psp-text-dim); font-size: 1.08rem; }

/* buttons */
.psp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 28px;
  border-radius: var(--psp-radius-sm); border: 1px solid transparent;
  font-family: var(--psp-font-display); font-weight: 700; font-size: .98rem; letter-spacing: .02em;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.psp-btn[hidden] { display: none; }
.psp-btn--gold { background: linear-gradient(135deg, var(--psp-gold), var(--psp-gold-deep)); color: var(--psp-ink); box-shadow: 0 8px 22px rgba(163, 121, 31, .45); border-color: rgba(255, 244, 214, .4); }
.psp-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(163, 121, 31, .55); }
.psp-btn--ghost { background: rgba(247, 236, 216, .08); color: var(--psp-white); border: 1px solid rgba(247, 236, 216, .3); }
.psp-btn--ghost:hover { background: rgba(247, 236, 216, .16); }
.psp-btn--sm { min-height: 44px; padding: 10px 18px; font-size: .86rem; }
.psp-btn--lg { min-height: 54px; padding: 14px 34px; font-size: 1.05rem; }
.psp-btn--jade { background: linear-gradient(135deg, var(--psp-jade), var(--psp-jade-deep)); color: var(--psp-white); }

/* =========================================================
   PROVIDERS MARQUEE — studio-logo carousel between the hero
   and the first alt section. Auto-scrolling row of rectangular
   game-image tiles, darkened, each with a studio logo chip
   overlaid on top. The tile list is rendered twice in the HTML
   (7 real + 7 aria-hidden duplicates). The loop distance is an
   EXACT pixel value (7 tiles + 7 gaps, via calc() on the same
   custom properties the tile width/gap are built from) rather
   than translateX(-50%) — 50% of a 14-tile+13-gap track is off
   by half a gap from one true repeating period, which reads as
   a visible stutter at the loop point. calc() keeps both perfectly
   in sync, including across the tile-size breakpoint below.
   ========================================================= */
.psp-providers {
  --psp-ptile-w: 104px; --psp-ptile-h: 62px; --psp-ptile-gap: 12px;
  overflow: hidden; padding: 22px 0; background: rgba(0,0,0,.22); border-block: 1px solid rgba(216,180,90,.18);
}
@media (min-width: 640px) { .psp-providers { --psp-ptile-w: 132px; --psp-ptile-h: 76px; } }
.psp-providers__track {
  display: flex; align-items: center; gap: var(--psp-ptile-gap); width: max-content;
  animation: psp-providers-scroll 52s linear infinite;
}
.psp-providers:hover .psp-providers__track { animation-play-state: paused; }
@keyframes psp-providers-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-7 * (var(--psp-ptile-w) + var(--psp-ptile-gap)))); }
}
.psp-providers__tile {
  position: relative; flex: 0 0 auto;
  width: var(--psp-ptile-w); height: var(--psp-ptile-h); border-radius: var(--psp-radius-md);
  background-size: cover; background-position: center;
  overflow: hidden; border: 1px solid rgba(216,180,90,.3);
}
.psp-providers__scrim { position: absolute; inset: 0; background: rgba(15,10,7,.6); }
.psp-providers__chip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 76%; height: 56%; padding: 5px 8px;
  background: rgba(247,236,216,.94); border-radius: var(--psp-radius-sm);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.psp-providers__chip img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.psp-providers__note {
  max-width: 720px; margin: 14px auto 0; padding: 0 20px;
  text-align: center; font-size: .82rem; color: var(--psp-text-dim);
}

/* =========================================================
   UTILITY STRIP + HEADER — "gilt-scallop-twin-tier-header"
   (bespoke, never shipped before). Tier 1: a slim dark utility
   strip (age note, coin balance, player-care link). Tier 2: the
   main gilt bar with a decorative scalloped bottom edge, brand
   medallion left, primary nav center, auth controls right.
   Mobile: hamburger opens a full-width slide-down curtain panel,
   NOT a circular FAB/radial dial.
   ========================================================= */
.psp-utility {
  position: fixed; top: 0; left: 0; right: 0; z-index: 62; height: var(--psp-utility-h);
  background: var(--psp-ink); border-bottom: 1px solid rgba(216, 180, 90, .2);
  display: flex; align-items: center;
}
.psp-utility__inner {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-size: .72rem; letter-spacing: .04em;
}
@media (min-width: 640px) { .psp-utility__inner { padding: 0 32px; font-size: .78rem; } }
.psp-utility__badge { color: var(--psp-text-dim); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psp-utility__balance { color: var(--psp-gold); font-weight: 700; white-space: nowrap; flex-shrink: 0; }

.psp-header {
  position: fixed; top: var(--psp-utility-h); left: 0; right: 0; z-index: 60;
  height: var(--psp-bar-h);
  background: linear-gradient(180deg, #3a2415, #241407);
  border-bottom: 1px solid rgba(216, 180, 90, .3);
}
.psp-header__bar {
  position: relative; z-index: 1; height: 100%;
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
@media (min-width: 640px) { .psp-header__bar { padding: 0 32px; } }
.psp-header__scallop {
  position: absolute; left: 0; right: 0; top: 100%; height: 12px; z-index: 0;
  background-image: radial-gradient(circle at 10px 0, transparent 9px, #241407 9.5px);
  background-size: 20px 12px; background-repeat: repeat-x;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.35));
}

.psp-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 44px; }
.psp-brand__mark {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 32% 28%, #fff3d0, var(--psp-gold) 55%, var(--psp-gold-deep) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--psp-ink); box-shadow: 0 0 0 3px rgba(216, 180, 90, .22), 0 0 0 1px rgba(0,0,0,.3);
}
.psp-brand__mark svg { width: 24px; height: 24px; }
.psp-brand__word { display: flex; flex-direction: column; line-height: 1.1; font-family: var(--psp-font-display); font-weight: 700; font-size: 1.2rem; color: var(--psp-white); letter-spacing: .02em; }
.psp-brand__tagline { font-family: var(--psp-font-body); font-weight: 700; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: #ffffff; }

.psp-primary-nav { display: none; }
@media (min-width: 940px) {
  .psp-primary-nav { display: flex; align-items: center; }
  .psp-primary-nav ul { display: flex; align-items: center; gap: 2px; }
  .psp-primary-nav li:not(:last-child)::after { content: "❖"; color: rgba(216,180,90,.5); font-size: .6rem; margin: 0 14px; }
  .psp-primary-nav li { display: flex; align-items: center; }
  .psp-primary-nav a {
    display: inline-flex; align-items: center; min-height: 44px;
    font-weight: 600; font-size: .92rem; color: var(--psp-text-dim);
    border-bottom: 2px solid transparent; padding: 0 2px;
  }
  .psp-primary-nav a:hover, .psp-primary-nav a.is-active { color: var(--psp-gold); border-bottom-color: var(--psp-gold); }
}

.psp-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.psp-header__account { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--psp-text-dim); }
.psp-header__account[hidden] { display: none; }
.psp-menu-toggle {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 44px; height: 44px; border-radius: var(--psp-radius-sm);
  background: rgba(216, 180, 90, .12); border: 1px solid rgba(216, 180, 90, .3);
}
@media (min-width: 940px) { .psp-menu-toggle { display: none; } }
.psp-menu-toggle span { width: 18px; height: 2px; background: var(--psp-gold); transition: transform .2s ease, opacity .2s ease; }
.psp-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.psp-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.psp-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* mobile curtain drawer (NOT a radial FAB dial) */
.psp-menu-drawer {
  position: fixed; left: 0; right: 0; top: calc(var(--psp-utility-h) + var(--psp-bar-h) + 12px);
  z-index: 58; max-height: 0; overflow: hidden;
  background: linear-gradient(180deg, #2a1a10, var(--psp-ink));
  border-bottom: 1px solid rgba(216,180,90,.3);
  transition: max-height .32s cubic-bezier(.3,.8,.3,1);
}
.psp-menu-drawer.is-open { max-height: 70vh; overflow-y: auto; }
@media (min-width: 940px) { .psp-menu-drawer { display: none !important; } }
.psp-menu-drawer nav ul { padding: 10px 20px 20px; display: flex; flex-direction: column; }
.psp-menu-drawer nav a { display: flex; align-items: center; min-height: 48px; font-weight: 600; color: var(--psp-white); border-bottom: 1px solid rgba(255,255,255,.06); }

/* =========================================================
   AGE BADGE — "gilt-ribbon-corner-standalone-seal" (bespoke,
   category: standalone). A dedicated ribbon seal pinned to the
   corner of the hero's floating CTA card — never fused into the
   header/brand/CTA chrome itself.
   ========================================================= */
.psp-age-seal {
  position: absolute; top: -14px; right: -10px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  min-width: 52px; min-height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--psp-wine-vivid), var(--psp-wine-deep));
  border: 2px solid var(--psp-gold);
  color: var(--psp-white); font-family: var(--psp-font-display); font-weight: 700; font-size: .82rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
  transform: rotate(-8deg);
}

/* =========================================================
   HERO — hero-split-copy-visual, stacked+center-anchored per
   text_block_position (not a side-by-side grid): a framed portrait
   medallion on top, centered pill-row + punchy H1 + inline dual-stat
   pair below, and a single primary CTA inside a visually DETACHED
   floating card overlapping the frame (cta_placement: floating-card).
   ========================================================= */
.psp-hero { position: relative; padding: 44px 0 30px; text-align: center; overflow: visible; }
.psp-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(27,19,16,.3) 0%, rgba(27,19,16,.5) 55%, var(--psp-ink) 100%);
}
.psp-hero > :not(.psp-hero__scrim) { position: relative; z-index: 2; }
.psp-hero__frame { position: relative; max-width: 360px; margin: 0 auto 26px; }
.psp-hero__portrait {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 50%; border: 6px solid var(--psp-gold);
  box-shadow: 0 0 0 3px var(--psp-wine-deep), 0 20px 50px rgba(0,0,0,.55);
}
.psp-hero__frame-ornament {
  position: absolute; inset: -14px; border-radius: 50%;
  border: 1px dashed rgba(216, 180, 90, .5); pointer-events: none;
}
.psp-hero__floatcard {
  position: relative; display: inline-flex; margin: 8px auto 0;
  background: linear-gradient(160deg, #3a2415, var(--psp-surface-2));
  border: 1px solid rgba(216,180,90,.5); border-radius: var(--psp-radius-md);
  box-shadow: var(--psp-shadow-card);
  padding: 18px 22px;
}
.psp-hero__pillrow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.psp-pill {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: 6px 15px; border-radius: var(--psp-radius-sm);
  background: rgba(216, 180, 90, .14); border: 1px solid rgba(216, 180, 90, .48);
  font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--psp-gold);
}
.psp-hero__h1 { font-size: 2rem; color: var(--psp-white); text-shadow: 0 2px 16px rgba(0,0,0,.45); max-width: 640px; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { .psp-hero__h1 { font-size: 2.6rem; } }
@media (min-width: 900px) { .psp-hero__h1 { font-size: 3.1rem; } }

/* proof block: feature-icon-list, placed beside-headline-inline (an
   inline wrapped row directly under the H1, not a separate section) */
.psp-hero__features { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px; margin: 10px auto 0; max-width: 620px; }
.psp-hero__features li { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--psp-white); font-size: .95rem; }
.psp-hero__features li .ic { font-size: 1.1rem; }

/* stats-strip (also reused on other pages) */
.psp-stats { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 480px) { .psp-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .psp-stats { grid-template-columns: repeat(4, 1fr); } }
.psp-stats__cell { background: var(--psp-card-bg); border: 1px solid var(--psp-card-border); border-radius: var(--psp-radius-md); padding: 18px; text-align: center; }
.psp-stats__num { font-family: var(--psp-font-display); font-size: 1.6rem; color: var(--psp-gold); display: block; }
.psp-stats__label { font-size: .82rem; color: var(--psp-text-dim); }

/* =========================================================
   GAME CATALOG STACK — curated shelves reusing the same 24 games.
   Card design: "gilt-locket-flip-reveal-card" (bespoke) — art
   cropped into a round gilt LOCKET, title/rating/CTA live on a
   separate plate beneath (not a hover-tilt tray) — uniform grid
   browsing pattern, direct-play interaction.
   ========================================================= */
.psp-catalog-row { margin-bottom: 36px; }
.psp-catalog-row__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; gap: 10px; }
.psp-catalog-row__head h3 { font-size: 1.22rem; color: var(--psp-white); }
.psp-catalog-row__count { font-size: .8rem; color: var(--psp-gold); font-weight: 700; white-space: nowrap; }
.psp-catalog-row__scroller {
  display: flex; gap: 18px; overflow-x: auto; padding: 6px 4px 12px; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.psp-catalog-row__scroller::-webkit-scrollbar { height: 6px; }
.psp-catalog-row__scroller::-webkit-scrollbar-thumb { background: rgba(216,180,90,.4); border-radius: 4px; }
.psp-catalog-foot { text-align: center; margin-top: 10px; }
.psp-catalog-foot a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--psp-gold); border-bottom: 2px solid rgba(216,180,90,.5); }

.psp-grid { display: grid; grid-template-columns: 1fr; gap: 20px 16px; }
@media (min-width: 420px) { .psp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 560px) { .psp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .psp-grid { grid-template-columns: repeat(4, 1fr); gap: 26px 20px; } }
@media (min-width: 1180px) { .psp-grid { grid-template-columns: repeat(4, 1fr); } }

.psp-card { flex: 0 0 148px; scroll-snap-align: start; text-align: center; }
.psp-grid .psp-card { flex-basis: auto; width: 100%; }
@media (min-width: 900px) { .psp-card { flex-basis: 204px; } }
.psp-card__locket {
  position: relative; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--psp-gold-deep); box-shadow: var(--psp-shadow-card), inset 0 0 0 3px rgba(0,0,0,.35);
  margin: 0 auto 10px; transition: transform .3s ease, border-color .3s ease;
}
.psp-card a.psp-card__locket-link { display: block; }
.psp-card:hover .psp-card__locket, .psp-card:focus-within .psp-card__locket { transform: scale(1.04) rotate(-1deg); border-color: var(--psp-gold); }
.psp-card__locket img { width: 100%; height: 100%; object-fit: cover; }
.psp-card__seal {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  background: rgba(27,19,16,.85); color: var(--psp-gold);
  font-size: .64rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.psp-card__plate { padding: 0 4px; }
.psp-card__title { font-size: .9rem; font-weight: 700; color: var(--psp-white); margin: 0 0 4px; }
.psp-card__rating { display: block; font-size: .7rem; color: var(--psp-text-dim); margin-bottom: 8px; }
.psp-card__cta {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  min-height: 44px; padding: 8px 10px; border: 1px solid var(--psp-gold-deep); border-radius: var(--psp-radius-sm);
  background: transparent; color: var(--psp-gold);
  font-family: var(--psp-font-display); font-weight: 700; font-size: .78rem;
}
.psp-card__cta:hover { background: var(--psp-gold); color: var(--psp-ink); }

/* live-player-counter */
.psp-live-counter {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--psp-card-bg); border: 1px solid var(--psp-card-border); border-radius: var(--psp-radius-md);
  padding: 22px; text-align: center; flex-wrap: wrap;
}
.psp-live-counter__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--psp-jade); box-shadow: 0 0 0 4px rgba(29,92,70,.3); animation: pspPulseDot 1.8s ease-in-out infinite; }
@keyframes pspPulseDot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.psp-live-counter__num { font-family: var(--psp-font-display); font-size: 1.9rem; color: var(--psp-gold); }
.psp-live-counter__label { font-size: .84rem; color: var(--psp-text-dim); text-transform: uppercase; letter-spacing: .05em; }

/* vip-teaser-band / promo band */
.psp-promo { background: linear-gradient(120deg, var(--psp-wine-deep), var(--psp-wine)); border-radius: var(--psp-radius-lg); padding: 30px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; border: 1px solid rgba(216,180,90,.35); }
@media (min-width: 760px) { .psp-promo { flex-direction: row; align-items: center; justify-content: space-between; } }

/* faq-teaser-band */
.psp-faq-teaser { display: flex; flex-direction: column; gap: 12px; }

/* =========================================================
   SLOT MACHINE — "gilt-proscenium-reel-theatre" (bespoke chrome).
   The reel grid sits inside a small ornate theatre proscenium:
   an arched gilt frame with a swagged curtain border along the
   top; HUD stats render as two brass plaques below the stage.
   ========================================================= */
.psp-slot { position: relative; padding: 40px 0 60px; }
.psp-slot__stage {
  position: relative; border-radius: var(--psp-radius-lg);
  background-size: cover; background-position: center;
  padding: 30px 16px 22px; overflow: hidden;
  border: 1px solid rgba(216,180,90,.3);
}
.psp-slot__stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,19,16,.6), rgba(27,19,16,.9)); }
.psp-slot__stage::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px;
  background-image: radial-gradient(circle at 13px 0, transparent 12px, var(--psp-gold-deep) 12.5px);
  background-size: 26px 26px; background-repeat: repeat-x;
  opacity: .85;
}
.psp-slot__stage.is-flash .psp-slot__flashlayer {
  content: ""; position: absolute; inset: 0; border-radius: var(--psp-radius-lg);
  background: radial-gradient(circle, rgba(216,180,90,.55), transparent 70%);
  animation: pspFlash .6s ease-out;
}
.psp-slot__flashlayer { position: absolute; inset: 0; pointer-events: none; }
@keyframes pspFlash { from { opacity: 1; } to { opacity: 0; } }
.psp-slot__inner { position: relative; z-index: 1; }
.psp-slot__cabinet { position: relative; max-width: 560px; margin: 0 auto; }
.psp-slot__proscenium {
  border-radius: 18px 18px 4px 4px; border: 8px solid var(--psp-gold-deep);
  box-shadow: inset 0 0 0 3px rgba(216,180,90,.35), 0 0 30px rgba(0,0,0,.5);
  padding: 14px; background: linear-gradient(180deg, var(--psp-surface), var(--psp-ink));
}
/* fixed 5-reel slot-machine grid, intentional fixed column count at every viewport */
/* game-ui */
.psp-slot__reels {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  background: var(--psp-ink); border-radius: var(--psp-radius-md); padding: 8px;
}
.psp-slot__reels.is-spinning .psp-slot__cell img { filter: blur(2px); }
.psp-slot__cell {
  aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden;
  background: var(--psp-surface-2); border: 1px solid rgba(216,180,90,.22);
  transition: box-shadow .2s ease;
}
.psp-slot__cell img { width: 100%; height: 100%; object-fit: cover; }
.psp-slot__cell.is-win { box-shadow: 0 0 0 3px var(--psp-gold), 0 0 18px rgba(216,180,90,.7); }

.psp-slot__hud { display: flex; justify-content: center; gap: 16px; margin: 22px 0; flex-wrap: wrap; }
.psp-slot__plaque {
  min-width: 120px; padding: 10px 18px; border-radius: var(--psp-radius-sm);
  background: linear-gradient(180deg, #4a3418, #241407);
  border: 1px solid var(--psp-gold-deep);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.psp-slot__plaque-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--psp-text-dim); }
.psp-slot__plaque-value { font-family: var(--psp-font-display); font-weight: 700; font-size: 1.05rem; color: var(--psp-gold); }
.psp-slot__plaque--bet { flex-direction: row; gap: 8px; }
.psp-slot__bet-btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(216,180,90,.2); color: var(--psp-white); font-weight: 800; font-size: 1.1rem; flex-shrink: 0; }

.psp-slot__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.psp-slot__spin-btn {
  width: 76px; height: 76px; border-radius: 50%; border: 4px solid var(--psp-gold);
  background: radial-gradient(circle at 35% 30%, #fff3d0, var(--psp-gold-deep));
  color: var(--psp-ink); font-size: 1.6rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.psp-slot__spin-btn.is-spinning { animation: pspSpin .9s linear; }
@keyframes pspSpin { to { transform: rotate(360deg); } }
.psp-slot__auto-btn { min-height: 44px; padding: 10px 18px; border-radius: var(--psp-radius-sm); border: 2px solid var(--psp-gold); background: transparent; color: var(--psp-gold); font-weight: 700; }
.psp-slot__auto-btn.is-active { background: var(--psp-gold); color: var(--psp-ink); }
.psp-slot__info-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(247,236,216,.3); background: rgba(247,236,216,.1); color: var(--psp-white); }

.psp-slot__win {
  text-align: center; margin-top: 16px; font-family: var(--psp-font-display); font-weight: 700; color: var(--psp-gold);
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
}
.psp-slot__win.is-visible { opacity: 1; transform: translateY(0); }
.psp-slot__note--legal { font-size: .82rem; color: var(--psp-text-dim); text-align: center; max-width: 620px; margin: 20px auto 0; }

/* paytable dialog */
.psp-paytable { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; }
.psp-paytable[hidden] { display: none; }
.psp-paytable__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.psp-paytable__sheet { position: relative; z-index: 1; width: 100%; max-height: 82vh; overflow-y: auto; background: var(--psp-ink); border-radius: 14px 14px 0 0; padding: 20px; border-top: 2px solid var(--psp-gold-deep); }
@media (min-width: 700px) { .psp-paytable { align-items: center; justify-content: center; } .psp-paytable__sheet { max-width: 560px; border-radius: 8px; } }
/* paytable row (icon + name + 3 fixed payout columns), intentional fixed layout */
/* game-ui */
.psp-paytable__row { display: grid; grid-template-columns: 34px 1fr 50px 50px 50px; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.psp-paytable__row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.psp-paytable__row .name { font-size: .85rem; }
.psp-paytable__row .val { text-align: right; font-size: .8rem; color: var(--psp-gold); }
.psp-paytable__line { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: .8rem; }
/* payline indicator grid mirrors the fixed 5x3 reel layout, intentional fixed columns */
/* game-ui */
.psp-paytable__line-grid { display: grid; grid-template-columns: repeat(5, 8px); grid-template-rows: repeat(3, 8px); gap: 2px; }
.psp-paytable__line-dot { width: 8px; height: 8px; border-radius: 1px; background: rgba(255,255,255,.15); }
.psp-paytable__line-dot.is-on { background: var(--psp-gold); }

/* win coin particles: "gilt-fan-unfurl-coin-bloom" (bespoke, physics: fan-unfurl).
   A fan of gilt coin-cards unfurls from the spin button's center like a
   hand of cards spreading open, each rotating out to its own fixed angle
   and settling — NOT a burst/rain/cascade. */
.psp-coin-fan {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 28px; margin: -14px 0 0 -10px;
  border-radius: 3px;
  background: linear-gradient(160deg, #fff3d0, var(--psp-gold) 55%, var(--psp-gold-deep) 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 6px 14px rgba(0,0,0,.4);
  pointer-events: none; z-index: 6; opacity: 0; transform-origin: 50% 100%;
  animation: pspFanUnfurl 900ms cubic-bezier(.2,.85,.3,1) forwards;
  animation-delay: var(--psp-fan-delay, 0ms);
}
@keyframes pspFanUnfurl {
  0% { opacity: 0; transform: rotate(0deg) translateY(0) scale(.4); }
  12% { opacity: 1; }
  70% { opacity: 1; transform: rotate(var(--psp-fan-angle, 0deg)) translateY(-64px) scale(1); }
  100% { opacity: 0; transform: rotate(var(--psp-fan-angle, 0deg)) translateY(-74px) scale(1); }
}

/* faq accordion (used on faq.php and the homepage faq-teaser-band) */
.psp-faq { display: flex; flex-direction: column; gap: 10px; }
.psp-faq__item { background: var(--psp-card-bg); border: 1px solid var(--psp-card-border); border-radius: var(--psp-radius-md); overflow: hidden; }
.psp-faq__q { width: 100%; text-align: left; padding: 16px; min-height: 44px; background: transparent; border: none; color: var(--psp-white); font-weight: 700; font-family: var(--psp-font-display); display: flex; justify-content: space-between; align-items: center; }
.psp-faq__a { padding: 0 16px 16px; color: var(--psp-text-dim); display: none; }
.psp-faq__item.is-open .psp-faq__a { display: block; }
.psp-faq__item.is-open .psp-faq__q .ic { transform: rotate(45deg); }
.psp-faq__q .ic { transition: transform .2s ease; font-size: 1.2rem; color: var(--psp-gold); }

/* =========================================================
   FOOTER — "gilded-ledger-scroll-footer" (bespoke). A single
   vertically-stacked composition: a centered brand seal band on
   top, a 3-column ledger of link groups beneath it, then a base
   plinth bar — NOT a left/right balance-tray split.
   ========================================================= */
.psp-footer { background: var(--psp-ink); padding: 54px 0 0; margin-top: 40px; border-top: 4px double var(--psp-gold-deep); }
.psp-footer__seal { text-align: center; margin-bottom: 40px; }
.psp-footer__seal .psp-brand { justify-content: center; margin-bottom: 12px; }
.psp-footer__disclaimer { color: var(--psp-text-dim); font-size: .9rem; max-width: 460px; margin: 0 auto; }
.psp-footer__ledger { display: grid; grid-template-columns: 1fr; gap: 30px; padding-bottom: 10px; }
@media (min-width: 720px) { .psp-footer__ledger { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1080px) { .psp-footer__ledger { grid-template-columns: repeat(4, 1fr); } }
.psp-footer__col h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--psp-gold); margin-bottom: 14px; }
.psp-footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.psp-footer__col a { color: var(--psp-text-dim); font-size: .92rem; min-height: 44px; display: flex; align-items: center; }
.psp-footer__col a:hover { color: var(--psp-white); }

.psp-footer__address { font-style: normal; display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.psp-footer__contact-row { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: .88rem; color: var(--psp-text-dim); line-height: 1.4; }
.psp-footer__contact-row .ic { flex-shrink: 0; }
.psp-footer__contact-row a { min-height: 0; color: var(--psp-text-dim); }
.psp-footer__contact-row a:hover { color: var(--psp-white); }
.psp-footer__socials { display: flex; flex-wrap: wrap; gap: 10px; }
.psp-footer__social {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(247,236,216,.08); border: 1px solid rgba(216,180,90,.3);
  color: var(--psp-gold); transition: background .15s ease, color .15s ease;
}
.psp-footer__social:hover { background: var(--psp-gold); color: var(--psp-ink); }
.psp-footer__social svg { width: 20px; height: 20px; }

.psp-footer__map-wrap { padding-bottom: 34px; }
.psp-footer__map {
  width: 100%; height: 220px; border: 1px solid rgba(216,180,90,.3); border-radius: var(--psp-radius-md);
  filter: saturate(.6) sepia(.15);
}
@media (min-width: 720px) { .psp-footer__map { height: 280px; } }
.psp-footer__care-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--psp-text-dim); font-size: .85rem; text-decoration: underline; margin-top: 6px; }
.psp-footer__care-note { margin-top: 10px; font-size: .8rem; line-height: 1.5; color: var(--psp-text-dim); }
.psp-footer__care-note a { display: inline; min-height: 0; color: var(--psp-gold); text-decoration: underline; }

.psp-footer__orgs { display: flex; flex-wrap: wrap; gap: 10px; }
.psp-footer__org {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--psp-surface); border-radius: var(--psp-radius-sm);
  padding: 8px 12px; min-height: 44px;
}
.psp-footer__org img { max-height: 26px; width: auto; }
.psp-footer__org--text { color: var(--psp-white); font-size: .78rem; font-weight: 700; text-align: center; }

.psp-footer__plinth {
  margin-top: 30px; border-top: 1px solid rgba(216,180,90,.22);
  padding: 18px 0; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center;
}
@media (min-width: 640px) { .psp-footer__plinth { flex-direction: row; justify-content: space-between; text-align: left; } }
.psp-footer__plinth p { margin: 0; font-size: .8rem; color: var(--psp-text-dim); }

/* =========================================================
   AUTH MODAL — "gilt-frame-portrait-easel" (bespoke chrome).
   Presented as an ornate picture frame propped on an easel: the
   frame swings/tilts upright into place on open, with a small
   decorative "easel leg" wedge beneath it. Required IDs/data-attrs
   match SOCIAL_V2_CONTRACT.md §B.1.
   ========================================================= */
.psp-auth { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.psp-auth[hidden] { display: none; }
.psp-auth__backdrop { position: absolute; inset: 0; background: rgba(15, 6, 4, .8); border: none; padding: 0; margin: 0; cursor: default; }
.psp-auth__easel { position: relative; z-index: 1; width: 100%; max-width: 460px; }
.psp-auth__frame {
  max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, #3a2415, var(--psp-ink));
  border: 6px solid var(--psp-gold-deep);
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(216,180,90,.3), 0 30px 60px rgba(0,0,0,.55);
  animation: pspEaselUp .38s cubic-bezier(.2,.85,.3,1);
  transform-origin: bottom center;
}
@keyframes pspEaselUp { from { transform: scale(.85) rotate(-3deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } }
.psp-auth__easel::after {
  content: ""; display: block; width: 3px; height: 18px; margin: 0 auto; background: var(--psp-gold-deep);
}
.psp-auth__frame-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 0; }
.psp-auth__frame-head h3 { font-size: 1.2rem; }
.psp-auth__close { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(247,236,216,.1); color: var(--psp-white); font-size: 1.1rem; }
.psp-auth__canvas { padding: 12px 22px 26px; }
.psp-auth__lead { color: var(--psp-text-dim); margin-bottom: 16px; }

/* auth_form_layout: "split-columns" — providers left / email fields
   right at >=640px, stacked below that */
.psp-auth__split { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 640px) { .psp-auth__split { flex-direction: row; } }
.psp-auth__col { flex: 1; min-width: 0; }
.psp-auth__divider { display: flex; align-items: center; gap: 10px; color: var(--psp-text-dim); font-size: .78rem; margin: 14px 0; }
@media (min-width: 640px) {
  .psp-auth__divider { flex-direction: column; margin: 0; }
  .psp-auth__divider::before, .psp-auth__divider::after { content: ""; flex: 1; width: 1px; background: rgba(255,255,255,.15); }
}
.psp-auth__divider::before, .psp-auth__divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.15); }

.psp-auth__provider {
  position: relative;
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px;
  padding: 10px 16px; margin-bottom: 10px; border-radius: var(--psp-radius-sm);
  background: rgba(247,236,216,.06); border: 1px solid rgba(247,236,216,.16);
  color: var(--psp-white); font-weight: 600; font-size: .92rem;
}
.psp-auth__provider-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.psp-auth__provider-icon svg { width: 20px; height: 20px; }
.psp-auth__provider.is-glow { animation: pspGlow 1.1s ease-in-out 2; }
.psp-auth__google-real { display: flex; justify-content: center; width: 100%; min-height: 48px; margin-bottom: 18px; overflow: hidden; }
.psp-auth__google-error { margin: -10px 0 16px; padding: 8px 12px; border-radius: var(--psp-radius-sm); background: rgba(140,33,56,.25); border: 1px solid rgba(140,33,56,.5); color: var(--psp-white); font-size: .82rem; text-align: center; }
@keyframes pspGlow { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 0 3px rgba(216,180,90,.6); } }

/* provider notice: "wax-seal-peel-back-notice" — a small wax-seal
   disc appears over the CLICKED provider button and peels back like
   a letter seal, revealing the notice text underneath */
.psp-auth__seal-notice {
  position: absolute; inset: 0; z-index: 3; border-radius: var(--psp-radius-sm);
  display: flex; align-items: center; padding: 0 14px;
  background: var(--psp-wine-vivid); color: var(--psp-white); font-size: .78rem; font-weight: 600;
  clip-path: circle(0% at 92% 50%);
  transition: clip-path .42s cubic-bezier(.3,.9,.3,1);
  pointer-events: none;
}
.psp-auth__seal-notice.is-visible { clip-path: circle(150% at 92% 50%); pointer-events: auto; }
.psp-auth__seal-notice .wax { margin-right: 6px; }

.psp-auth__field { display: block; margin-bottom: 14px; }
.psp-auth__field span { display: block; font-size: .82rem; color: var(--psp-text-dim); margin-bottom: 6px; }
.psp-auth__field input {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--psp-radius-sm);
  border: 1px solid rgba(247,236,216,.2); background: rgba(247,236,216,.06); color: var(--psp-white); font-size: 1rem;
}
.psp-auth__fine { font-size: .74rem; color: var(--psp-text-dim); margin-top: 12px; }
.psp-auth__back { background: none; border: none; color: var(--psp-gold); font-weight: 700; margin-bottom: 10px; min-height: 44px; padding: 0; }
.psp-auth__submit { width: 100%; margin-top: 4px; }
.psp-auth__error { color: #ffb4b4; font-size: .82rem; min-height: 1.2em; margin-top: 8px; }
[data-auth-when="user"] { display: none; }
.is-authed [data-auth-when="user"] { display: initial; }
.is-authed [data-auth-when="guest"] { display: none; }

/* =========================================================
   COOKIE CONSENT — required tokens (.nj-cookie* renamed to
   .psp-cookie*) — behaviour verbatim from cookie-consent template
   ========================================================= */
.psp-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; }
.psp-cookie[hidden] { display: none; }
.psp-cookie__panel { background: var(--psp-ink); border-top: 2px solid var(--psp-gold-deep); padding: 20px; max-width: 640px; margin: 0 auto; border-radius: 10px 10px 0 0; }
.psp-cookie__panel[hidden] { display: none; }
.psp-cookie__panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.psp-cookie__panel-intro { color: var(--psp-text-dim); font-size: .85rem; }
.psp-cookie__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); }
.psp-cookie__row-copy strong { display: block; font-size: .92rem; }
.psp-cookie__row-copy span { font-size: .78rem; color: var(--psp-text-dim); }
.psp-cookie__locked-badge { font-size: .7rem; background: rgba(255,255,255,.12); padding: 4px 10px; border-radius: 999px; }
.psp-cookie__toggle { width: 46px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.15); border: none; position: relative; flex-shrink: 0; }
.psp-cookie__toggle-dot { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--psp-white); transition: transform .2s ease; }
.psp-cookie__toggle.is-on { background: var(--psp-jade); }
.psp-cookie__toggle.is-on .psp-cookie__toggle-dot { transform: translateX(20px); }
.psp-cookie__panel-actions { display: flex; gap: 10px; margin-top: 14px; justify-content: flex-end; }
.psp-cookie__bar { background: var(--psp-surface); border-top: 1px solid rgba(216,180,90,.28); padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.psp-cookie__text { flex: 1; min-width: 240px; font-size: .82rem; color: var(--psp-text-dim); margin: 0; }
.psp-cookie__text a { color: var(--psp-gold); text-decoration: underline; }
.psp-cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* legal page layout: accordion clause presentation — genuinely
   different structural technique than a sidebar TOC (SOCIAL_V2_CONTRACT.md
   §C.14) */
.psp-legal-intro { max-width: 640px; }
.psp-clauses { display: flex; flex-direction: column; gap: 10px; counter-reset: clause; }
.psp-clause { background: var(--psp-card-bg); border: 1px solid var(--psp-card-border); border-radius: var(--psp-radius-md); overflow: hidden; counter-increment: clause; }
.psp-clause__q {
  width: 100%; text-align: left; padding: 16px 18px; min-height: 44px; background: transparent; border: none;
  color: var(--psp-white); font-weight: 700; font-family: var(--psp-font-display);
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
}
.psp-clause__q .num { color: var(--psp-gold); font-size: .9rem; flex-shrink: 0; }
.psp-clause__q .label { flex: 1; text-align: left; }
.psp-clause__a { padding: 0 18px 18px 46px; color: var(--psp-text-dim); display: none; }
.psp-clause.is-open .psp-clause__a { display: block; }
.psp-clause.is-open .psp-clause__q .ic { transform: rotate(45deg); }
.psp-clause__q .ic { transition: transform .2s ease; font-size: 1.2rem; color: var(--psp-gold); flex-shrink: 0; }
.psp-clause__a ul { padding-left: 20px; list-style: disc; }
.psp-clause__a p:last-child { margin-bottom: 0; }

.psp-page-footnote { font-size: .82rem; color: var(--psp-text-dim); border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; margin-top: 30px; }

/* game-detail pages */
.psp-gamehead { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 30px; text-align: center; }
@media (min-width: 780px) { .psp-gamehead { flex-direction: row; align-items: center; text-align: left; } }
.psp-gamehead__art { width: 100%; max-width: 220px; border-radius: 50%; overflow: hidden; border: 5px solid var(--psp-gold); box-shadow: var(--psp-shadow-card); flex-shrink: 0; }
.psp-quickfacts { background: var(--psp-card-bg); border: 1px solid var(--psp-card-border); border-radius: var(--psp-radius-md); padding: 18px; margin: 20px 0; }
.psp-quickfacts dl { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; }
@media (min-width: 480px) { .psp-quickfacts dl { grid-template-columns: repeat(2, 1fr); } }
.psp-quickfacts dt { font-size: .72rem; text-transform: uppercase; color: var(--psp-gold); letter-spacing: .06em; }
.psp-quickfacts dd { margin: 2px 0 0; font-weight: 700; }
.psp-tips { counter-reset: tip; display: flex; flex-direction: column; gap: 14px; padding-left: 0; }
.psp-tips li { counter-increment: tip; display: flex; gap: 12px; }
.psp-tips li::before { content: counter(tip); flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--psp-gold); color: var(--psp-ink); font-weight: 800; display: flex; align-items: center; justify-content: center; font-family: var(--psp-font-display); }
.psp-related__heading { font-size: 1.2rem; color: var(--psp-white); margin: 30px 0 14px; }

/* rewards / achievements / tournaments simple layouts */
.psp-badges { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 480px) { .psp-badges { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .psp-badges { grid-template-columns: repeat(4, 1fr); } }
.psp-badge { background: var(--psp-card-bg); border: 1px solid var(--psp-card-border); border-radius: var(--psp-radius-md); padding: 18px; text-align: center; }
.psp-badge__icon { font-size: 1.8rem; margin-bottom: 8px; }
.psp-lb { display: flex; flex-direction: column; gap: 10px; }
.psp-lb__row { display: flex; align-items: center; gap: 14px; background: var(--psp-card-bg); border: 1px solid var(--psp-card-border); border-radius: var(--psp-radius-md); padding: 12px 16px; }
.psp-lb__rank { font-family: var(--psp-font-display); font-size: 1.3rem; color: var(--psp-gold); width: 34px; }
.psp-lb__name { flex: 1; font-weight: 700; }
.psp-lb__amount { color: var(--psp-gold); font-weight: 800; }

.psp-news-grid { display: grid; gap: 20px; }
@media (min-width: 700px) { .psp-news-grid { grid-template-columns: repeat(2, 1fr); } }
.psp-news-card { background: var(--psp-card-bg); border: 1px solid var(--psp-card-border); border-radius: var(--psp-radius-md); padding: 20px; }
.psp-news-card__date { font-size: .74rem; color: var(--psp-gold); text-transform: uppercase; letter-spacing: .06em; }

.psp-contact-form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.psp-contact-form label span { display: block; font-size: .82rem; color: var(--psp-text-dim); margin-bottom: 6px; }
.psp-contact-form input, .psp-contact-form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--psp-radius-sm);
  border: 1px solid rgba(247,236,216,.2); background: rgba(247,236,216,.06); color: var(--psp-white); font-size: 1rem;
}
.psp-contact-form textarea { min-height: 120px; resize: vertical; }

/* =========================================================
   SECONDARY-PAGE LAYOUTS — library / the-ascension / the-hall /
   the-winners-circle / first-spin-guide / quick-answers / reach-us.
   Each page uses a genuinely different structural technique, not a
   reskin of the flat "section-head + one grid + footnote" shape.
   ========================================================= */

/* library.php: filter rail + grouped galleries (not one flat grid) */
.psp-library-rail { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.psp-library-rail a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
  border-radius: 999px; background: var(--psp-card-bg); border: 1px solid var(--psp-card-border);
  color: var(--psp-gold); font-weight: 700; font-size: .82rem;
}
.psp-library-rail a:hover { background: rgba(216, 180, 90, .18); }
.psp-library-groups { display: flex; flex-direction: column; gap: 46px; }
.psp-library-group__head { margin-bottom: 16px; max-width: 640px; }
.psp-library-group__head h3 { font-size: 1.28rem; color: var(--psp-white); margin-bottom: 4px; }
.psp-library-group__head p { color: var(--psp-text-dim); font-size: .92rem; margin: 0; }

/* the-ascension.php: vertical alternating tier ladder (loyalty-tiers) */
.psp-tier-ladder { display: flex; flex-direction: column; gap: 16px; }
.psp-tier-step {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--psp-card-bg); border: 1px solid var(--psp-card-border);
  border-radius: var(--psp-radius-lg); padding: 18px;
}
.psp-tier-step__marker {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--psp-gold-deep); box-shadow: var(--psp-shadow-card);
}
.psp-tier-step__marker img { width: 100%; height: 100%; object-fit: cover; }
.psp-tier-step__content { flex: 1; min-width: 0; }
.psp-tier-step__rank-no { display: block; font-size: .7rem; color: var(--psp-gold); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.psp-tier-step__content h3 { font-size: 1.08rem; margin-bottom: 2px; }
.psp-tier-step__threshold { font-size: .8rem; color: var(--psp-gold); margin: 0 0 8px; font-weight: 700; }
.psp-tier-step__perk { color: var(--psp-text-dim); font-size: .92rem; margin: 0 0 4px; }
.psp-tier-progress { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 10px; }
.psp-tier-progress__fill { height: 100%; background: linear-gradient(90deg, var(--psp-gold-deep), var(--psp-gold)); }
.psp-tier-progress__label { display: block; font-size: .72rem; color: var(--psp-gold); margin-top: 6px; }
@media (min-width: 760px) {
  .psp-tier-step--right { flex-direction: row-reverse; margin-left: 9%; }
  .psp-tier-step--left { margin-right: 9%; }
  .psp-tier-step--right .psp-tier-step__content { text-align: right; }
  .psp-tier-step--right .psp-tier-progress__label { text-align: right; }
}

/* the-hall.php: two-level grouped curated lists (hall-of-fame) */
.psp-hall-groups { display: flex; flex-direction: column; gap: 38px; }
.psp-hall-group__head { max-width: 640px; margin-bottom: 14px; }
.psp-hall-group__head h3 { font-size: 1.24rem; margin-bottom: 4px; }
.psp-hall-group__head p { color: var(--psp-text-dim); font-size: .9rem; margin: 0; }
.psp-hall-list { display: flex; flex-direction: column; gap: 8px; counter-reset: hallrank; margin: 0; padding: 0; }
.psp-hall-list li {
  counter-increment: hallrank; display: flex; align-items: center; gap: 14px;
  background: var(--psp-card-bg); border: 1px solid var(--psp-card-border);
  border-radius: var(--psp-radius-md); padding: 12px 16px;
}
.psp-hall-list li::before {
  content: counter(hallrank); flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--psp-gold-deep); color: var(--psp-white); font-weight: 800;
  font-family: var(--psp-font-display); font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
}
.psp-hall-list .who { flex: 1; font-weight: 700; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.psp-hall-list .what { color: var(--psp-text-dim); font-weight: 400; font-size: .82rem; }
.psp-hall-list .amt { color: var(--psp-gold); font-weight: 800; white-space: nowrap; font-size: .88rem; }

/* the-winners-circle.php: asymmetric featured card + compact ticker feed (winners-wall) */
.psp-winfeed { display: flex; flex-direction: column; gap: 0; }
.psp-winfeed__featured {
  display: flex; flex-direction: column; gap: 16px;
  background: linear-gradient(120deg, var(--psp-wine-deep), var(--psp-wine));
  border: 1px solid rgba(216, 180, 90, .4); border-radius: var(--psp-radius-lg);
  padding: 22px; margin-bottom: 22px;
}
@media (min-width: 640px) { .psp-winfeed__featured { flex-direction: row; align-items: center; } }
.psp-winfeed__featured-art { width: 100%; max-width: 200px; aspect-ratio: 1 / 1; border-radius: var(--psp-radius-md); overflow: hidden; border: 3px solid var(--psp-gold); flex-shrink: 0; }
.psp-winfeed__featured-art img { width: 100%; height: 100%; object-fit: cover; }
.psp-winfeed__featured-body { flex: 1; }
.psp-winfeed__tag {
  display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px; border-radius: 999px;
  background: rgba(216, 180, 90, .2); color: var(--psp-gold); font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px;
}
.psp-winfeed__amount { font-family: var(--psp-font-display); font-size: 1.6rem; color: var(--psp-gold); display: block; }
.psp-winfeed__ticker { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, .1); }
.psp-winfeed__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 4px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.psp-winfeed__row .who { font-weight: 700; min-width: 96px; }
.psp-winfeed__row .what { flex: 1; color: var(--psp-text-dim); font-size: .86rem; min-width: 140px; }
.psp-winfeed__row .amt { color: var(--psp-gold); font-weight: 800; white-space: nowrap; }
.psp-winfeed__row .when { color: var(--psp-text-dim); font-size: .74rem; white-space: nowrap; margin-left: auto; }

/* first-spin-guide.php: sequential numbered step list (how-to-play) */
.psp-guide-steps { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 0; }
.psp-guide-step { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.psp-guide-step:last-child { border-bottom: none; }
.psp-guide-step__badge {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--psp-gold), var(--psp-gold-deep)); color: var(--psp-ink);
  font-family: var(--psp-font-display); font-weight: 800; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
}
.psp-guide-step__body h3 { font-size: 1.08rem; margin-bottom: 4px; }
.psp-guide-step__body p { color: var(--psp-text-dim); margin: 0; font-size: .94rem; }
.psp-guide-callout {
  margin-top: 30px; background: var(--psp-card-bg); border: 1px solid var(--psp-card-border);
  border-radius: var(--psp-radius-lg); padding: 22px; display: flex; flex-direction: column;
  gap: 14px; align-items: flex-start;
}
@media (min-width: 640px) { .psp-guide-callout { flex-direction: row; align-items: center; justify-content: space-between; } }

/* quick-answers.php: FAQ grouped into labeled categories (not one flat list) */
.psp-faq-categories { display: flex; flex-direction: column; gap: 32px; }
.psp-faq-cat__head { font-size: 1.05rem; color: var(--psp-gold); margin-bottom: 12px; font-family: var(--psp-font-display); }

/* reach-us.php: two-column form + support-info layout (not single centered column) */
.psp-reach-grid { display: flex; flex-direction: column; gap: 30px; }
@media (min-width: 820px) {
  .psp-reach-grid { flex-direction: row; align-items: flex-start; }
  .psp-reach-grid__form { flex: 1.1; min-width: 0; }
  .psp-reach-grid__info { flex: .9; min-width: 0; }
}
.psp-reach-grid__form .psp-contact-form { max-width: none; }
.psp-reach-info-block { background: var(--psp-card-bg); border: 1px solid var(--psp-card-border); border-radius: var(--psp-radius-md); padding: 18px; margin-bottom: 16px; }
.psp-reach-info-block:last-child { margin-bottom: 0; }
.psp-reach-info-block h4 { font-size: .82rem; color: var(--psp-gold); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
.psp-reach-info-block p { color: var(--psp-text-dim); font-size: .9rem; margin: 0; }
.psp-reach-info-block ul { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 8px 0 0; }
.psp-reach-info-block ul li { color: var(--psp-text-dim); font-size: .9rem; }
.psp-reach-info-block a { color: var(--psp-gold); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }

/* utility */
.psp-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }