/* =========================================================
   POKIES VAULT — Design System v0.2
   Based on the Aristocrat Gaming web language (aristocratgaming.com) + corporate accents (aristocrat.com).
   Their licensed fonts are replaced with free look-alikes:
     Sugo Pro Display  → Squada One        (display / headings / nav)
     Circular Std      → Figtree           (body / UI)
     Baloo Thambi 2    → Baloo Thambi 2    (numbers, same as aristocrat.com)
   ========================================================= */

:root {
  /* ---- Brand surfaces (theme gradients, 1:1 from reference) ---- */
  --night: #13051c;
  --plum: #300c46;
  --plum-deep: #300c4b;
  --indigo: #2d2e83;
  --midnight: #09091a;
  --navy: #072c51;            /* corporate */

  --grad-purple: linear-gradient(90deg, #13051c 25.71%, #300c46 60.12%, #2d2e83 100%);
  --grad-midnight: linear-gradient(90deg, #09091a 25%, #2d2e83 100%);
  --grad-header: linear-gradient(90deg, #2a0f45 0%, #2d3c8f 100%);

  /* ---- Accent gradients ---- */
  --grad-gold: linear-gradient(90deg, #ff9b00 0%, #ffe000 100%);
  --grad-hot: linear-gradient(90deg, #e83f40 0%, #e50f7c 100%);
  --grad-violet: linear-gradient(90deg, #4c1d95 0%, #2d2e83 100%);

  /* ---- Solid accents ---- */
  --gold: #ffc247;
  --orange: #ff9b00;
  --yellow: #ffe000;
  --red: #e83f40;
  --pink: #e50f7c;
  --sky: #7fd9ff;             /* link on dark */
  --sky-visited: #5ea1bd;
  --blue: #3b63fb;
  --violet: #786cff;
  --teal: #75bbb9;            /* corporate stat */
  --green: #8fe388;

  /* ---- Neutrals ---- */
  --white: #ffffff;
  --text-on-dark: #f3f3f3;
  --muted-on-dark: #d9d9d9;
  --ink: #131313;
  --ink-2: #1a1a1a;
  --grey-text: #545454;
  --light: #f3f3f3;
  --line-on-dark: rgba(255, 255, 255, .4);

  /* ---- Type ---- */
  --f-display: "Squada One", "Arial Narrow", sans-serif;
  --f-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --f-num: "Baloo Thambi 2", "Figtree", sans-serif;

  /* scale (reference: h1 64/77, h2 42.7/53, h3 32/41, teaser eyebrow 24/31, body 16/20, small 13.3) */
  --fs-h1: clamp(2.6rem, 1.6rem + 3.4vw, 4rem);
  --fs-h2: clamp(2rem, 1.4rem + 2vw, 2.67rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-eyebrow: 1.5rem;
  --fs-lead: clamp(1.1rem, 1rem + .4vw, 1.33rem);
  --fs-body: 1rem;
  --fs-small: .833rem;
  --fs-xs: .667rem;

  --container: 1280px;
  --gutter: 16px;
  --radius: 4px;
  --nav-h: 88px;
}
@media (min-width: 900px) { :root { --gutter: 80px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--text-on-dark); font: 400 var(--fs-body)/1.5 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: 72px; }
@media (min-width: 900px) { .section { padding-block: 96px; } }

/* ---------- Themes (section-level, like the reference) ---------- */
.theme-purple { background: var(--grad-purple); color: var(--text-on-dark); }
.theme-midnight { background: var(--grad-midnight); color: var(--text-on-dark); }
.theme-light { background: var(--light); color: var(--ink-2); }
.theme-navy { background: var(--navy); color: #fff; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, .display { font-family: var(--f-display); font-weight: 400; margin: 0; letter-spacing: .005em; }
h1 { font-size: var(--fs-h1); line-height: 1.2; }
h2 { font-size: var(--fs-h2); line-height: 1.24; }
h3 { font-size: var(--fs-h3); line-height: 1.28; }
.upper { text-transform: uppercase; }
p { margin: 0; }

/* gradient headings: gold on dark, hot on light — exactly like reference */
.theme-purple .grad, .theme-midnight .grad, .grad-gold { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.theme-light .grad, .grad-hot { background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }

.eyebrow { font: 400 var(--fs-eyebrow)/1.3 var(--f-display); color: #fff; margin-bottom: 8px; display: block; }
.theme-light .eyebrow { color: var(--ink-2); }
.lead { font-size: var(--fs-lead); line-height: 1.35; }
.small { font-size: var(--fs-small); line-height: 1.35; }

/* links */
.link { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; font-size: var(--fs-small); }
.link:hover { color: var(--gold); }
.theme-light .link { color: var(--plum-deep); }
.theme-light .link:hover { color: var(--pink); }

/* ---------- Buttons (rectangular, 4px, gradient — reference) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 32px; border: 0; border-radius: var(--radius); font: 700 var(--fs-small)/1 var(--f-body); color: #fff; cursor: pointer; transition: filter .15s, transform .15s; white-space: nowrap; }
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn--hot { background: var(--grad-hot); }
.btn--gold { background: var(--grad-gold); color: var(--ink-2); }
.btn--violet { background: var(--grad-violet); }
.btn--outline { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.btn--sm { min-height: 36px; padding: 0 18px; }

/* ---------- Search field (teaser search, reference) ---------- */
.search { position: relative; display: flex; align-items: center; width: 100%; max-width: 406px; }
.search svg { position: absolute; left: 12px; width: 16px; height: 16px; opacity: .8; }
.search input { width: 100%; height: 40px; padding: 8px 12px 8px 37px; border: 0; border-radius: var(--radius); background: rgba(243, 243, 243, .05); color: var(--text-on-dark); font-size: var(--fs-small); outline: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.search input::placeholder { color: var(--text-on-dark); opacity: .9; }

/* ---------- Descriptor row (pipe-separated, reference) ---------- */
.descriptor { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.descriptor span { padding-right: 16px; border-right: 1px solid var(--line-on-dark); color: var(--muted-on-dark); font-size: 1rem; }
.descriptor span:last-child { border-right: 0; }

/* ---------- Card (thin white outline on dark, reference "Discover Your Next Play") ---------- */
.card { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.85); background: rgba(19, 5, 28, .35); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.8); }
.card__media { aspect-ratio: 1 / 1.04; overflow: hidden; background: #000; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; flex: 1; }
.card__title { font: 400 1.5rem/1.3 var(--f-display); color: var(--muted-on-dark); }
.card__text { font-size: var(--fs-small); line-height: 1.35; color: #fff; }
.card__more { margin-top: auto; align-self: flex-end; }

/* ---------- Key-art tile (stand-in for game artwork, slot-logo lockup) ---------- */
.keyart { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; isolation: isolate; }
.keyart::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ka-bg); }
.keyart::after { content: ""; position: absolute; inset: -40%; z-index: -1; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.09) 0 7deg, transparent 7deg 20deg); }
.keyart__logo { text-align: center; font: 400 clamp(1.7rem, 3.2vw, 3.2rem)/.86 "Lilita One", var(--f-display); text-transform: uppercase; color: var(--ka-fill, #fff);
  -webkit-text-stroke: 2px var(--ka-stroke, #2a0f45); paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ka-stroke, #2a0f45), 0 7px 0 rgba(0,0,0,.35), 0 0 28px var(--ka-glow, rgba(255,255,255,.4)); transform: rotate(-4deg); padding: 0 12px; }
.keyart__logo small { display: block; font-size: .38em; letter-spacing: .08em; margin-top: 6px; -webkit-text-stroke-width: 1px; }

/* ---------- Stat (corporate "Number crunch") ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; }
.stat__bar { height: 6px; margin-bottom: 20px; background: var(--c); }
.stat__num { font: 700 clamp(2.4rem, 2rem + 1.6vw, 3.4rem)/1 var(--f-num); color: var(--c); }
.stat__label { font: 700 1.35rem/1.15 var(--f-num); color: var(--c); margin-top: 6px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* key-art with generated artwork underneath + logo lockup at the bottom */
.keyart--art { place-items: end center; }
.keyart--art::before { display: none; }
.keyart--art > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.keyart--art::after { inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(10, 3, 20, .78) 100%); }
.keyart--art .keyart__logo { font-size: clamp(1.4rem, 2.4vw, 2.3rem); margin-bottom: 16px; transform: rotate(-3deg); }
.card:hover .keyart--art > img { transform: scale(1.05); }