/*!
Theme Name: yonogame
Description: yonogameskidukan directory theme. Vivid Indian gaming, mobile first.
Version: 3.0
*/

/* ==========================================================================
   yonogameskidukan
   Dark, locked. Committed red, gold reserved for money.
   Mobile first: every rule below is the phone rule until a min-width says so.
   Tokens and rationale documented in /PRODUCT.md and /DESIGN.md.
   ========================================================================== */

:root {
  /* ground */
  --bg:        oklch(0.15 0.018 28);
  --surface:   oklch(0.20 0.024 28);
  --raised:    oklch(0.25 0.028 28);
  --line:      oklch(0.31 0.032 28);
  --line-hi:   oklch(0.40 0.040 28);

  /* text */
  --ink:       oklch(0.98 0.006 60);
  --muted:     oklch(0.75 0.022 45);
  --faint:     oklch(0.60 0.022 45);

  /* brand + action */
  --red:       oklch(0.555 0.212 27);
  --red-hi:    oklch(0.620 0.200 29);
  --red-deep:  oklch(0.400 0.150 26);
  --orange:    oklch(0.700 0.185 52);

  /* money, and nothing else */
  --gold:      oklch(0.830 0.155 88);
  --gold-mid:  oklch(0.690 0.130 85);   /* 5.6:1 on --surface, the floor for small gold text */
  --gold-deep: oklch(0.560 0.120 80);   /* decorative only, never small text */
  --gold-soft: oklch(0.830 0.155 88 / .12);
  --gold-line: oklch(0.830 0.155 88 / .30);

  /* shape: containers 16, controls 12, chips pill */
  --r-box:  16px;
  --r-ctl:  12px;
  --r-pill: 999px;

  --shadow-card: 0 1px 0 oklch(1 0 0 / .04) inset, 0 8px 24px -12px oklch(0 0 0 / .8);
  --shadow-lift: 0 1px 0 oklch(1 0 0 / .06) inset, 0 16px 36px -14px oklch(0 0 0 / .9);
  --shadow-panel: 0 1px 0 oklch(1 0 0 / .06) inset, 0 28px 60px -24px oklch(0 0 0 / .95);

  --max: 1280px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);

  color-scheme: dark;
}

/* z-index scale, never arbitrary */
:root {
  --z-rail:   10;
  --z-header: 40;
  --z-nav:    50;
  --z-skip:   80;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 14px;
}
@media (min-width: 768px) { .wrap { padding-inline: 24px; } }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: var(--z-skip);
  background: var(--gold); color: oklch(0.18 0.02 60);
  padding: 10px 16px; border-radius: var(--r-ctl); font-weight: 700;
  transition: top .18s var(--ease-out);
}
.skip-link:focus { top: 12px; }

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

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-row {
  height: 58px;
  display: flex; align-items: center; gap: 10px;
}
@media (min-width: 900px) { .header-row { height: 68px; gap: 16px; } }

.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }

.brand-mark {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-ctl);
  background: linear-gradient(150deg, var(--red-hi), var(--red) 55%, var(--red-deep));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px; letter-spacing: -.02em;
  box-shadow: 0 0 0 1px oklch(1 0 0 / .10) inset;
}
@media (min-width: 900px) { .brand-mark { width: 40px; height: 40px; font-size: 17px; } }

.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-name {
  font-weight: 800; font-size: 15px; letter-spacing: -.025em;
  font-stretch: 108%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 900px) { .brand-name { font-size: 17px; } }
.brand-sub {
  font-size: 10.5px; color: var(--faint); letter-spacing: .01em; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.nav { margin-left: auto; display: none; align-items: center; gap: 2px; }
@media (min-width: 900px) { .nav { display: flex; } }

.nav a {
  padding: 8px 11px; border-radius: var(--r-ctl);
  font-size: 13.5px; font-weight: 550; color: var(--muted);
  white-space: nowrap;
  transition: background .16s var(--ease-out), color .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { background: var(--raised); color: var(--ink); }
}
.nav a[aria-current="page"] { color: var(--ink); background: var(--raised); }

.header-cta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  border-radius: var(--r-ctl);
  background: var(--raised);
  border: 1px solid var(--line-hi);
  color: var(--ink);
  font-size: 13px; font-weight: 650;
  transition: transform .14s var(--ease-out), border-color .16s var(--ease-out);
}
@media (min-width: 900px) { .header-cta { margin-left: 6px; } }
@media (hover: hover) and (pointer: fine) {
  .header-cta:hover { border-color: var(--red); }
}
.header-cta:active { transform: scale(.97); }
.header-cta i { font-size: 16px; color: var(--gold); }
.header-cta span { display: none; }
@media (min-width: 420px) { .header-cta span { display: inline; } }

.nav-toggle {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-hi); border-radius: var(--r-ctl);
  background: var(--raised); color: var(--ink);
  font-size: 19px; cursor: pointer;
  transition: transform .14s var(--ease-out);
}
.nav-toggle:active { transform: scale(.94); }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.mobile-nav {
  display: none;
  padding: 6px 0 12px;
  border-top: 1px solid var(--line);
}
.mobile-nav.is-open { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (min-width: 900px) { .mobile-nav, .mobile-nav.is-open { display: none; } }
.mobile-nav a {
  padding: 11px 12px; border-radius: var(--r-ctl);
  background: var(--raised); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.mobile-nav a[aria-current="page"] { color: var(--ink); border-color: var(--red); }

/* ==========================================================================
   HERO. Rebuilt as a scratch card: a raised panel with a perforated gold top
   edge sitting on a saturated ground. The stats are a divided strip fused to
   the bottom of the panel, not floating pills.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding: 18px 0 22px;
  background:
    radial-gradient(120% 100% at 82% -10%, oklch(0.48 0.20 34), transparent 60%),
    radial-gradient(90% 80% at 0% 110%, oklch(0.38 0.16 48 / .7), transparent 58%),
    linear-gradient(165deg, oklch(0.30 0.13 28), oklch(0.19 0.05 26) 78%);
}
@media (min-width: 900px) { .hero { padding: 34px 0 44px; } }

.hero-art {
  position: absolute; inset: 0; z-index: 0;
  opacity: .20;
  mask-image: linear-gradient(200deg, oklch(0 0 0 / .95), transparent 68%);
}
.hero-art img { width: 100%; height: 100%; object-fit: cover; }

.hero .wrap { position: relative; z-index: 1; }

.hero-card {
  position: relative;
  max-width: 660px;
  background: linear-gradient(178deg, oklch(0.19 0.028 28), oklch(0.155 0.02 28));
  border: 1px solid var(--line-hi);
  border-radius: var(--r-box);
  box-shadow: var(--shadow-panel);
  padding: 22px 16px 0;
}
@media (min-width: 900px) { .hero-card { padding: 32px 30px 0; } }

/* the perforation: gold rule with punched holes, the scratch-card tell */
.hero-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 10px; height: 9px;
  background:
    radial-gradient(circle at 5px 4.5px, oklch(0.30 0.13 28) 3.2px, transparent 3.4px) 0 0 / 14px 9px repeat-x,
    linear-gradient(90deg, transparent, var(--gold-line) 12%, var(--gold-line) 88%, transparent) center / 100% 1px no-repeat;
  pointer-events: none;
}

/* The hero title is client editable ACF copy and runs long for SEO, so the
   scale is tuned for a 9 word title rather than a 5 word one. */
.hero h1 {
  font-size: clamp(1.6rem, 6.2vw, 2.9rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -.03em;
  line-height: 1.04;
  margin-bottom: 9px;
}
.hero h1 .gold { color: var(--gold); }

.hero-card > p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 44ch;
}
@media (min-width: 900px) { .hero-card > p { font-size: 15.5px; } }

/* Search: the primary action on this page */
form.search {
  display: flex; align-items: center; gap: 8px;
  background: oklch(0.115 0.014 28);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-ctl);
  padding: 5px 5px 5px 12px;
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
form.search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
form.search > i { font-size: 18px; color: var(--faint); flex: none; }
form.search input {
  flex: 1; min-width: 0;
  height: 40px; border: 0; background: none; color: var(--ink);
  font-size: 15px; outline: none;
}
form.search input::placeholder { color: var(--faint); }
form.search button {
  flex: none; height: 40px; padding: 0 16px;
  border: 0; border-radius: 9px;
  background: linear-gradient(160deg, var(--orange), var(--red) 62%);
  color: #fff; font-weight: 750; font-size: 14px; letter-spacing: .01em;
  cursor: pointer;
  transition: transform .14s var(--ease-out), filter .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { form.search button:hover { filter: brightness(1.08); } }
form.search button:active { transform: scale(.97); }

/* Divided stats strip, fused to the panel base */
.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 18px -16px 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .hero-stats { margin: 24px -30px 0; } }

.hero-stats span {
  display: flex; flex-direction: column; gap: 1px;
  padding: 12px 10px 14px;
  text-align: center;
  font-size: 10.5px; font-weight: 550; color: var(--faint);
  line-height: 1.3;
}
.hero-stats span + span { border-left: 1px solid var(--line); }
.hero-stats b {
  font-size: 17px; font-weight: 800; color: var(--gold);
  letter-spacing: -.02em; font-stretch: 106%;
}
@media (min-width: 900px) { .hero-stats b { font-size: 20px; } }

/* ==========================================================================
   COMPLIANCE. Rebuilt as a full bleed regulatory band, not a rounded alert.
   ========================================================================== */

.compliance {
  background: oklch(0.185 0.028 60);
  border-block: 1px solid var(--gold-line);
}
.compliance-row {
  display: flex; align-items: center; gap: 12px;
  padding-block: 11px;
}
.compliance-age {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1.5px solid var(--gold);
  border-radius: var(--r-ctl);
  color: var(--gold);
  font-size: 14px; font-weight: 800; letter-spacing: -.02em;
}
.compliance p {
  margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted);
}
@media (min-width: 900px) { .compliance p { font-size: 13px; } }
.compliance b { color: var(--gold); font-weight: 750; }
.compliance a {
  color: var(--gold); font-weight: 650;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ==========================================================================
   ICON RAIL. Rebuilt as a dealt hand: icons overlap and alternate tilt.
   ========================================================================== */

.rail {
  position: relative; z-index: var(--z-rail);
  overflow: hidden;
  padding: 20px 0 22px;
  background: var(--bg);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.rail-track {
  display: flex; align-items: center; width: max-content;
  padding-left: 14px;
  animation: rail 52s linear infinite;
}
.rail-track img {
  width: 52px; height: 52px; flex: none;
  margin-right: 4px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--line-hi);
  box-shadow: 0 6px 16px -8px oklch(0 0 0 / .95);
  transform-origin: bottom center;
}
/* a dealt hand: alternating tilt, just enough overlap to read as a fan */
.rail-track img:nth-child(3n+1) { transform: rotate(-5deg) translateY(4px); }
.rail-track img:nth-child(3n+2) { transform: rotate(0deg)  translateY(-5px); z-index: 2; }
.rail-track img:nth-child(3n+3) { transform: rotate(5deg)  translateY(4px); }
@keyframes rail { to { transform: translateX(-50%); } }

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding: 22px 0; }
@media (min-width: 900px) { .section { padding: 40px 0; } }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.section-head h2 {
  font-size: clamp(1.45rem, 5.4vw, 2rem);
  font-weight: 750; font-stretch: 108%;
  letter-spacing: -.02em; line-height: 1.1;
}
.section-head p { margin: 5px 0 0; font-size: 13.5px; color: var(--muted); max-width: 56ch; }

/* ==========================================================================
   BANNERS. Peek carousel: the next slide is visible at the edge, so the strip
   reads as swipeable without a scroll cue. Dots become a segmented bar.
   ========================================================================== */

.banners { padding: 6px 0 0; }
.slider { position: relative; }
.slider-track {
  display: flex; gap: 10px; align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 14px;
  scrollbar-width: none;
  padding-inline: 14px;
  margin-inline: -14px;
}
@media (min-width: 768px) {
  .slider-track { scroll-padding-left: 0; padding-inline: 0; margin-inline: 0; }
}
.slider-track::-webkit-scrollbar { display: none; }

.slide { flex: 0 0 88%; scroll-snap-align: start; }
@media (min-width: 768px) { .slide { flex: 0 0 100%; } }

/* Banners are client uploaded promo artwork with text baked into the image.
   A fixed aspect-ratio plus object-fit:cover crops that text off, so the
   image keeps its own proportions and the strip takes the tallest slide. */
.slide img {
  width: 100%; height: auto;
  border-radius: var(--r-box);
  border: 1px solid var(--line);
}

.slider-dots { display: flex; gap: 5px; margin-top: 12px; }
.slider-dot {
  flex: 1; height: 3px; padding: 0;
  border: 0; border-radius: var(--r-pill);
  background: var(--line-hi); cursor: pointer;
  transition: background .22s var(--ease-out);
}
.slider-dot.is-active { background: var(--gold); }

/* ==========================================================================
   APP CARD. Rebuilt bonus forward.

   The old anatomy led with the icon and buried the bonus in a small pill at
   the bottom. He is comparing bonus amounts, so the money is now the anchor:
   full bleed icon, rating chip riding on it, the rupee figure set large in
   gold, title demoted to a supporting line.
   ========================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 860px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1140px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .14s var(--ease-out), border-color .18s var(--ease-out),
              box-shadow .18s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--gold-line); box-shadow: var(--shadow-lift); }
  .card:hover .card-cta { background: linear-gradient(160deg, var(--orange), var(--red) 62%); }
}
.card:active { transform: scale(.97); }

/* Fixed height plate showing the WHOLE thumbnail.

   object-fit: contain, never cover: a few featured images are not square
   (1280x720, and some 1024x178 banners) and a square cover crop cut the
   artwork in half. The plate is a fixed 159px so every card in a row lines
   up regardless of the image's own proportions; letterbox bars sit on the
   plate tone and read as intentional.

   The template pairs this with the soft cropped `medium` size, so the file
   itself is uncropped too. See template-parts/game-col.php. */
.card-media {
  position: relative;
  /* height: 159px; */
  background: oklch(0.13 0.016 28);
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

.card-flag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: oklch(0.20 0.03 60);
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  box-shadow: 0 2px 8px oklch(0 0 0 / .55);
}

.card-rate {
  position: absolute; bottom: 8px; left: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px 3px 6px;
  border-radius: var(--r-pill);
  background: oklch(0.12 0.02 28 / .82);
  border: 1px solid oklch(1 0 0 / .14);
  color: var(--ink);
  font-size: 11px; font-weight: 750;
}
.card-rate i { color: var(--gold); font-size: 12px; }

.card-body { padding: 11px 11px 11px; display: flex; flex-direction: column; flex: 1; gap: 6px; }

/* the money, set as the card's headline */
.card-bonus {
  display: flex; align-items: baseline; gap: 5px;
  color: var(--gold);
  line-height: 1;
  min-width: 0;
}
.card-bonus b {
  font-size: 21px; font-weight: 800; font-stretch: 108%;
  letter-spacing: -.03em;
}
@media (min-width: 860px) { .card-bonus b { font-size: 23px; } }
.card-bonus span {
  font-size: 10.5px; font-weight: 600; color: var(--gold-mid);
  white-space: nowrap;
}

.card-title {
  margin: 0;
  font-size: 12px; font-weight: 600; line-height: 1.32;
  letter-spacing: -.005em;
  color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 860px) { .card-title { font-size: 12.5px; } }

.card-cta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px;
  border-radius: var(--r-ctl);
  background: var(--red);
  color: #fff;
  font-size: 12.5px; font-weight: 750; letter-spacing: .01em;
  transition: background .18s var(--ease-out);
}
.card-cta i { font-size: 14px; }

/* Entry stagger, first 8 cards only. A 24-card cascade reads as lag. */
@media (prefers-reduced-motion: no-preference) {
  .grid > .card {
    opacity: 0;
    animation: cardIn .42s var(--ease-out) forwards;
  }
  .grid > .card:nth-child(1) { animation-delay: 0ms; }
  .grid > .card:nth-child(2) { animation-delay: 40ms; }
  .grid > .card:nth-child(3) { animation-delay: 80ms; }
  .grid > .card:nth-child(4) { animation-delay: 120ms; }
  .grid > .card:nth-child(5) { animation-delay: 160ms; }
  .grid > .card:nth-child(6) { animation-delay: 200ms; }
  .grid > .card:nth-child(7) { animation-delay: 240ms; }
  .grid > .card:nth-child(8) { animation-delay: 280ms; }
  .grid > .card:nth-child(n+9) { animation-delay: 300ms; }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   INSTALL STEPS. Rebuilt as a connected timeline. It is a real sequence, so
   the connector carries information: vertical rule on a phone, horizontal
   rule behind the nodes on desktop.
   ========================================================================== */

.steps { position: relative; display: grid; gap: 0; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 14px;
  padding-bottom: 20px;
}
.step:last-child { padding-bottom: 0; }
@media (min-width: 860px) {
  .step { grid-template-columns: 1fr; padding-bottom: 0; }
}

/* the connecting rule */
.step::before {
  content: "";
  position: absolute; left: 17px; top: 34px; bottom: -2px; width: 1px;
  background: linear-gradient(var(--gold-line), transparent);
}
.step:last-child::before { display: none; }
@media (min-width: 860px) {
  .step::before {
    left: 40px; right: -24px; top: 17px; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(90deg, var(--gold-line), transparent);
  }
}

.step-n {
  grid-row: span 2;
  position: relative; z-index: 1;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1.5px solid var(--gold-line);
  color: var(--gold);
  font-size: 15px; font-weight: 800; font-stretch: 108%;
  letter-spacing: -.02em;
}
@media (min-width: 860px) { .step-n { grid-row: auto; margin-bottom: 14px; } }

.step h3 { font-size: 15px; font-weight: 750; letter-spacing: -.01em; padding-top: 7px; }
@media (min-width: 860px) { .step h3 { padding-top: 0; } }
.step p { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ==========================================================================
   Pagination
   ========================================================================== */

.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 20px; }
.page-btn {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-hi); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--muted);
  font-size: 13.5px; font-weight: 650;
  transition: transform .14s var(--ease-out), border-color .16s var(--ease-out), color .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .page-btn:hover { border-color: var(--red); color: var(--ink); }
}
.page-btn:active { transform: scale(.95); }
.page-btn[aria-current="page"] {
  background: var(--red); border-color: var(--red); color: #fff;
}

/* ==========================================================================
   PAGE HEAD. Archives and static pages get the hero's perforated panel in a
   compact form, so the two entry points share a language without repeating
   the same block.
   ========================================================================== */

.page-head {
  padding: 16px 0 20px;
  background: linear-gradient(168deg, oklch(0.30 0.13 28), oklch(0.175 0.03 26) 82%);
}
@media (min-width: 900px) { .page-head { padding: 26px 0 34px; } }

.page-head-card {
  position: relative;
  background: linear-gradient(178deg, oklch(0.19 0.028 28), oklch(0.155 0.02 28));
  border: 1px solid var(--line-hi);
  border-radius: var(--r-box);
  box-shadow: var(--shadow-panel);
  padding: 18px 16px 16px;
}
@media (min-width: 900px) { .page-head-card { padding: 26px 28px 22px; } }

.page-head-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 9px; height: 9px;
  background:
    radial-gradient(circle at 5px 4.5px, oklch(0.30 0.13 28) 3.2px, transparent 3.4px) 0 0 / 14px 9px repeat-x,
    linear-gradient(90deg, transparent, var(--gold-line) 12%, var(--gold-line) 88%, transparent) center / 100% 1px no-repeat;
  pointer-events: none;
}

.page-head h1 {
  font-size: clamp(1.55rem, 6.2vw, 2.5rem);
  font-weight: 800; font-stretch: 110%;
  letter-spacing: -.03em; line-height: 1.07;
}
.page-lede { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); max-width: 54ch; }
.page-head form.search { margin-top: 14px; }

.page-head-meta {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin: 16px -16px -16px;
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .page-head-meta { margin: 20px -28px -22px; } }
.page-head-meta span {
  display: flex; flex-direction: column; gap: 1px;
  padding: 11px 10px 13px; text-align: center;
  font-size: 10.5px; font-weight: 550; color: var(--faint);
}
.page-head-meta span + span { border-left: 1px solid var(--line); }
.page-head-meta b {
  font-size: 16px; font-weight: 800; color: var(--gold);
  letter-spacing: -.02em;
}

.crumbs {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--faint); margin-bottom: 10px;
}
.crumbs a { color: var(--muted); font-weight: 600; }
.crumbs span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   APP DETAIL. Rebuilt around the ticket stub. The bonus is a torn stub with a
   real perforation, the specs are a divided inline strip instead of four
   boxes, and download is a full width bar with Telegram reduced to a square.
   ========================================================================== */

.app-head {
  padding: 14px 0 20px;
  background: linear-gradient(170deg, oklch(0.30 0.13 28), oklch(0.175 0.03 26) 78%);
}
@media (min-width: 900px) { .app-head { padding: 20px 0 32px; } }

.app-head-inner { display: flex; gap: 14px; align-items: center; }

.app-icon {
  width: 76px; height: 76px; flex: none;
  border-radius: var(--r-box);
  object-fit: cover;
  border: 1px solid oklch(1 0 0 / .16);
  box-shadow: var(--shadow-panel);
}
@media (min-width: 900px) { .app-icon { width: 116px; height: 116px; } }

.app-head h1 {
  font-size: clamp(1.2rem, 5.2vw, 2.1rem);
  font-weight: 800; font-stretch: 108%;
  letter-spacing: -.025em; line-height: 1.12;
}
/* Each fact carries its own leading separator, so a wrap never strands a
   lone middot at the end of a line. */
.app-pub {
  margin: 7px 0 0;
  font-size: 12.5px; color: var(--muted); font-weight: 550;
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px;
}
.app-pub i { color: var(--gold); font-size: 14px; vertical-align: -2px; margin-right: 4px; }
.app-pub .fact { white-space: nowrap; }
.app-pub .fact + .fact::before {
  content: "\00b7"; color: var(--faint); margin-right: 8px;
}

.app-actions { display: flex; gap: 8px; margin-top: 16px; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 20px; flex: 1;
  border: 0; border-radius: var(--r-ctl);
  background: linear-gradient(160deg, var(--orange), var(--red) 62%);
  color: #fff; font-size: 15.5px; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 10px 26px -12px oklch(0.55 0.21 30);
  transition: transform .14s var(--ease-out), filter .18s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { filter: brightness(1.08); } }
.btn-primary:active { transform: scale(.97); }
.btn-primary i { font-size: 20px; }

/* Telegram reduced to a square so Download owns the row */
.btn-square {
  flex: none;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border: 1px solid var(--line-hi); border-radius: var(--r-ctl);
  background: oklch(0.16 0.02 28 / .7);
  color: var(--gold); font-size: 21px;
  transition: transform .14s var(--ease-out), border-color .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn-square:hover { border-color: var(--gold); } }
.btn-square:active { transform: scale(.94); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 14px;
  border: 1px solid var(--line-hi); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 650;
  transition: transform .14s var(--ease-out), border-color .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { border-color: var(--red); } }
.btn-ghost:active { transform: scale(.97); }
.btn-ghost i { font-size: 16px; color: var(--gold); }

/* the stub */
.bonus-stub {
  position: relative; overflow: hidden;
  margin-top: 16px;
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 14px;
  padding: 15px 16px;
  border-radius: var(--r-box);
  background: linear-gradient(115deg, oklch(0.30 0.10 52), oklch(0.21 0.05 30));
  border: 1px solid var(--gold-line);
}
.bonus-stub-amount {
  font-size: 30px; font-weight: 800; font-stretch: 110%;
  color: var(--gold); letter-spacing: -.035em; line-height: 1;
}
@media (min-width: 900px) { .bonus-stub-amount { font-size: 38px; } }
.bonus-stub-label {
  margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45;
  max-width: 34ch;
}

/* the tear: a punched vertical perforation before the gift mark */
.bonus-stub-tear {
  position: relative;
  width: 1px; align-self: stretch;
  background: repeating-linear-gradient(var(--gold-line) 0 4px, transparent 4px 9px);
}
.bonus-stub > i { font-size: 28px; color: var(--gold); }

@media (prefers-reduced-motion: no-preference) {
  .bonus-stub::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 38%, oklch(1 0 0 / .14) 50%, transparent 62%);
    transform: translateX(-100%);
    animation: foil 4.5s var(--ease-out) infinite;
    pointer-events: none;
  }
}
@keyframes foil { 0%, 62% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* Specs as a divided strip, no boxes.

   Spec count varies per post: blank ACF fields are dropped, so a post can
   show anywhere from one to five rows. Flex with flex-grow means the items
   always fill the strip and never leave a dead cell, which a fixed 2 or 4
   column grid does on odd counts. */
.specs {
  display: flex; flex-wrap: wrap;
  margin: 16px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  background: oklch(0.16 0.02 28 / .6);
  overflow: hidden;
}
.spec {
  flex: 1 1 110px;
  padding: 11px 12px 12px;
  border-left: 1px solid var(--line);
}
.spec:first-child { border-left: 0; }
.spec dt { font-size: 10.5px; color: var(--faint); font-weight: 600; letter-spacing: .02em; }
.spec dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 750; color: var(--ink); }

/* ==========================================================================
   Prose
   ========================================================================== */

.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(1.35rem, 5vw, 1.8rem); font-weight: 750;
  letter-spacing: -.02em; margin: 24px 0 10px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1rem; font-weight: 700; margin: 22px 0 8px; }
.prose p { margin: 0 0 13px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 20px; color: var(--muted); font-size: 14.5px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose img { border-radius: var(--r-box); margin: 14px 0; border: 1px solid var(--line); }
.prose table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0 0 16px; }
.prose th, .prose td { padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--line); }
.prose th { color: var(--gold); font-weight: 700; }
.prose td { color: var(--muted); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
a.tag {
  padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--raised); border: 1px solid var(--line-hi);
  font-size: 12px; font-weight: 600; color: var(--muted);
  transition: transform .14s var(--ease-out), border-color .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { a.tag:hover { border-color: var(--gold); color: var(--ink); } }
a.tag:active { transform: scale(.96); }

/* ==========================================================================
   Empty state
   ========================================================================== */

.empty {
  text-align: center; padding: 40px 20px;
  border: 1px dashed var(--line-hi); border-radius: var(--r-box);
  background: var(--surface);
}
.empty i { font-size: 34px; color: var(--gold-deep); }
.empty h3 { margin: 10px 0 6px; font-size: 17px; font-weight: 750; }
.empty p { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); }

/* ==========================================================================
   FOOTER. Rebuilt left aligned and two column, with the age mark set as a
   large outlined block rather than a small centred pill.
   ========================================================================== */

.site-footer {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  background: oklch(0.175 0.022 28);
}

/* padding-block only: a `padding` shorthand here would reset .wrap's
   padding-inline and push the footer flush to the viewport edge. */
.footer-grid {
  display: grid; gap: 20px;
  padding-block: 26px 24px;
}
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: auto 1fr; gap: 36px;
    padding-block: 34px 30px; align-items: start;
  }
}

.age-block {
  display: flex; align-items: center; gap: 12px;
}
@media (min-width: 768px) { .age-block { flex-direction: column; align-items: flex-start; gap: 8px; } }
.age-mark {
  display: grid; place-items: center;
  width: 58px; height: 58px; flex: none;
  border: 1.5px solid var(--gold);
  border-radius: var(--r-box);
  color: var(--gold);
  font-size: 21px; font-weight: 800; letter-spacing: -.03em;
}
.age-block span { font-size: 12px; color: var(--faint); font-weight: 600; line-height: 1.4; }

.footer-body > p {
  margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 62ch;
}
.footer-row {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 14px 0 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.footer-row a {
  padding: 6px 10px; border-radius: var(--r-ctl);
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  transition: color .16s var(--ease-out), background .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .footer-row a:hover { color: var(--ink); background: var(--raised); }
}
.footer-row a:first-child { margin-left: -10px; }
.footer-copy { display: block; font-size: 11.5px; color: var(--faint); line-height: 1.6; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .rail-track { animation: none; }
  .grid > .card { opacity: 1; }
}

/* ==========================================================================
   WordPress only. Everything above is shared with the static prototype.
   ========================================================================== */

/* yono_pagination() emits nav.pagination; the prototype used .pager. */
.pagination {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 20px;
}

/* Editor alignment + caption classes, so pasted post content behaves. */
.prose .alignleft  { float: left;  margin: 6px 18px 12px 0; }
.prose .alignright { float: right; margin: 6px 0 12px 18px; }
.prose .aligncenter { display: block; margin-inline: auto; }
.prose .alignwide, .prose .alignfull { max-width: 100%; }
.prose figure { margin: 16px 0; }
.prose figcaption { font-size: 12px; color: var(--faint); margin-top: 6px; }
.prose iframe, .prose video { max-width: 100%; border-radius: var(--r-box); }
.prose .wp-block-table { overflow-x: auto; }

/* Post bodies arrive with their own headings; keep them on the type scale. */
.prose h4 { font-size: 1rem; font-weight: 700; margin: 20px 0 8px; }
.prose blockquote {
  margin: 16px 0; padding: 12px 16px;
  border: 1px solid var(--gold-line); border-radius: var(--r-box);
  background: var(--gold-soft); color: var(--muted);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Comments, if ever enabled. */
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: 12px 0; border-bottom: 1px solid var(--line); }

/* The admin bar offsets the sticky header when logged in. */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
@media only screen and (min-width: 320px) and (max-width: 786px){
  .card-media {
  height: 159px;
}
}