/* ============================================================
   MARKETING · shared primitives for per-game marketing pages
   ------------------------------------------------------------
   These pages are the SEO surface — one per game at /games/:slug.
   They are the ONLY pages besides Home that need to be crawlable.

   Page rhythm (top → bottom):
     1. .mk-topbar          — slim cinema-night banner with brand
     2. .mk-hero            — h1, lede, stats row, CTAs, phone preview
     3. .mk-section.how     — "How to play" 4-step ordered list
     4. .mk-section.sample  — "A round in the wild" — per-game widget
     5. .mk-section.why     — 3 USP slips (loud, snackable, friends)
     6. .mk-section.faq     — accordion FAQ for long-tail SEO
     7. .mk-section.related — "Also try" — 3 related game tiles
     8. .mk-final-cta       — lime card with stamp CTA
     9. .mk-footer          — brand + legal + sitemap row

   Everything sits on the Paan Pop tokens in _theme.css. To rebrand
   the marketing surface, edit _theme.css. To restructure the
   marketing page itself, edit THIS file. Per-page HTML files only
   carry copy + per-game preview/sample widgets.
   ============================================================ */

/* ---------- Reset for the marketing surface ---------- */
*, *::before, *::after { box-sizing: border-box; }

body.mk-body {
  margin: 0;
  background: var(--theme-bg);
  color: var(--theme-ink);
  font-family: var(--theme-font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.mk-body::before {
  /* corkboard receipt-grid backdrop — matches Home.vue and the gallery hub */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 30, 136, 0.06), transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(30, 164, 86, 0.05), transparent 70%),
    repeating-linear-gradient(45deg,
      rgba(164, 122, 59, 0.045) 0 2px,
      transparent 2px 6px),
    repeating-linear-gradient(-45deg,
      rgba(164, 122, 59, 0.045) 0 2px,
      transparent 2px 6px),
    var(--theme-bg);
}
body.mk-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(26, 20, 16, 0.07) 1px, transparent 1.5px);
  background-size: 18px 18px;
  mix-blend-mode: multiply;
  opacity: 0.40;
}

.mk-shell {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 22px 64px;
}

/* ============================================================
   1. TOP BAR — cinema-night strip with brand-mini + breadcrumbs
   ============================================================ */
.mk-topbar {
  position: relative;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 22px 14px;
  background:
    repeating-linear-gradient(45deg,
      rgba(164, 122, 59, 0.10) 0 3px,
      transparent 3px 9px),
    #0a1626;
  border-bottom: 1px dashed rgba(26, 20, 16, 0.30);
  color: #fffaee;
}
.mk-topbar-inner {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.mk-brand-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: #fffaee;
  text-decoration: none;
}
.mk-brand-mini::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--theme-accent);
  border: 1.5px solid #fffaee;
  box-shadow: 1px 1px 0 #fffaee;
}
.mk-breadcrumb {
  font-family: var(--theme-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 250, 238, 0.65);
}
.mk-breadcrumb a {
  color: rgba(255, 250, 238, 0.65);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 250, 238, 0.35);
}
.mk-breadcrumb a:hover { color: var(--theme-accent); }
.mk-breadcrumb .sep { margin: 0 6px; opacity: 0.5; }
.mk-breadcrumb .here { color: var(--theme-pop); }

/* ============================================================
   2. HERO — game name, lede, stats, CTA stack, phone preview
   ============================================================ */
.mk-hero {
  position: relative;
  padding: 36px 0 28px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 760px) {
  .mk-hero { grid-template-columns: 1fr; gap: 24px; padding: 28px 0 18px; }
}

.mk-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  background: var(--theme-pop);
  border: 1px solid var(--theme-ink);
  border-radius: var(--theme-r-tag);
  box-shadow: 1.5px 2px 0 var(--theme-ink);
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--theme-ink);
  transform: rotate(-1deg);
  margin-bottom: 14px;
}
.mk-hero-kicker::before {
  content: "★";
  color: var(--theme-accent);
  font-size: 12px;
  line-height: 1;
}

/* The h1 — large, ink, no shimmer. Keep it crawler-friendly text. */
.mk-h1 {
  margin: 0 0 12px;
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: clamp(38px, 6vw, 56px);
  letter-spacing: -0.025em;
  line-height: 0.96;
  color: var(--theme-ink);
}
.mk-h1 em {
  font-style: italic;
  color: var(--theme-accent-deep);
  background: var(--theme-pop);
  padding: 0 8px;
  display: inline-block;
  box-shadow: 2px 2px 0 var(--theme-ink);
  transform: rotate(-1.5deg);
}

.mk-hero-lede {
  margin: 0 0 18px;
  font-family: var(--theme-font-script);
  font-style: italic;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.5;
  color: var(--theme-ink-soft);
  max-width: 38ch;
}
.mk-hero-lede b {
  color: var(--theme-ink);
  font-weight: 700;
  background: var(--theme-pop);
  padding: 0 4px;
  box-shadow: 1px 1px 0 var(--theme-ink);
  display: inline-block;
  font-style: normal;
}

/* Stats row — three small cards under the lede. */
.mk-stats {
  display: flex;
  gap: 10px;
  margin: 0 0 22px;
  flex-wrap: wrap;
}
.mk-stat {
  padding: 8px 12px;
  background: var(--theme-bg-deep);
  border: 1.2px solid var(--theme-ink);
  border-radius: var(--theme-r-card);
  box-shadow: 2px 2px 0 var(--theme-ink);
  text-align: center;
  transform: rotate(-0.6deg);
  min-width: 92px;
}
.mk-stat:nth-child(2) { background: var(--theme-pop); transform: rotate(1deg); }
.mk-stat:nth-child(3) { background: #ffd2e3; transform: rotate(-0.4deg); }
.mk-stat b {
  display: block;
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 18px;
  color: var(--theme-accent-deep);
  line-height: 1.05;
  font-feature-settings: "tnum" 1;
}
.mk-stat small {
  display: block;
  margin-top: 2px;
  font-family: var(--theme-font-display);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--theme-ink-soft);
}

/* CTA stack — primary stamp + ghost secondary. */
.mk-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
}
.mk-cta-row .mk-stamp,
.mk-cta-row .mk-ghost {
  min-width: 0;
}
.mk-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--theme-accent);
  color: #fff;
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--theme-r-stamp);
  box-shadow: var(--theme-shadow-button);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  transform: rotate(-1.5deg);
  cursor: pointer;
  transition: filter 0.15s ease;
}
.mk-stamp:hover { filter: brightness(1.05); }
.mk-stamp:active { transform: rotate(-1.5deg) translate(2px, 2px); }
.mk-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--theme-font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--theme-ink);
  text-decoration: underline wavy var(--theme-accent);
  text-underline-offset: 4px;
}
.mk-ghost:hover { color: var(--theme-accent-deep); }

/* ---- Phone preview ----
   Frame + screen approximate a modern Android/iPhone (9:19.5).
   Earlier version was ~280×380 which read as a squat tablet; we
   now lock the aspect ratio on the screen with `aspect-ratio` and
   add a hole-punch camera dot + iOS-style home indicator so the
   shell reads as "phone" without ambiguity.

   Layout: `.mk-preview-screen` is a flex column. Per-page content
   stacks at the top; the OPTIONAL `.mk-preview-dock` element (added
   as the LAST child) gets `margin-top: auto` and anchors to the
   bottom — that's what keeps the taller screen from looking
   top-loaded with dead space below. */
.mk-preview-frame {
  position: relative;
  margin: 0 auto;
  width: 270px;
  max-width: 100%;
  background: var(--theme-ink);
  border-radius: 38px;
  padding: 10px 10px 16px;
  box-shadow:
    0 0 0 4px var(--theme-accent),
    0 0 0 6px var(--theme-ink),
    0 30px 60px -20px rgba(0, 0, 0, 0.55),
    0 0 70px -20px rgba(255, 46, 154, 0.55);
  transform: rotate(2deg);
}
@media (max-width: 760px) {
  .mk-preview-frame { width: 240px; }
}

/* Hole-punch camera dot — sits over the screen, top-center.
   Small enough that the statusbar still reads cleanly. */
.mk-preview-frame::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: var(--theme-ink);
  border-radius: 50%;
  z-index: 5;
  box-shadow: inset 0 0 0 1.5px rgba(255, 250, 238, 0.20);
  pointer-events: none;
}
/* iOS-style home indicator — anchored to the frame's bottom pad. */
.mk-preview-frame::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 4px;
  background: rgba(255, 250, 238, 0.55);
  border-radius: 2px;
  z-index: 5;
  pointer-events: none;
}

.mk-preview-screen {
  position: relative;
  aspect-ratio: 9 / 19.5;
  background: var(--theme-bg);
  border-radius: 30px;
  padding: 30px 14px 18px;
  overflow: hidden;
  color: var(--theme-ink);
  display: flex;
  flex-direction: column;
}
.mk-preview-screen::before {
  /* corkboard board-bg inside the phone */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 30, 136, 0.06), transparent 70%),
    repeating-linear-gradient(45deg,
      rgba(164, 122, 59, 0.05) 0 2px,
      transparent 2px 6px),
    repeating-linear-gradient(-45deg,
      rgba(164, 122, 59, 0.05) 0 2px,
      transparent 2px 6px);
}
.mk-preview-screen > * { position: relative; z-index: 1; flex-shrink: 0; }

.mk-preview-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--theme-font-display);
  font-weight: 800;
  font-size: 9.5px;
  color: var(--theme-ink-soft);
  margin-bottom: 10px;
}

/* Meta row — sits between the statusbar and the per-game widget.
   Pattern is identical across every preview: timer pill on the
   left, mono-typed "question / points / state" label on the right.
   Use `.mk-preview-meta-label.accent` for hot-pink stat callouts. */
.mk-preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}
.mk-preview-meta-label {
  font-family: var(--theme-font-mono);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--theme-ink-mute);
}
.mk-preview-meta-label.accent { color: var(--theme-accent-deep); }
.mk-preview-meta-label.pop    { color: var(--theme-pop-deep); }
.mk-preview-meta-label.green  { color: var(--theme-green-deep); }
.mk-preview-meta-label strong { font-weight: 900; }

/* Bottom-anchored "live" dock. Added as the LAST child of
   .mk-preview-screen so `margin-top: auto` pushes it to the bottom
   and the in-game content stays clustered at the top — the way a
   real game UI lays out with safe-area chrome at the bottom. */
.mk-preview-dock {
  margin-top: auto;
  padding: 6px 9px;
  background: var(--theme-bg-deep);
  border: 1px dashed var(--theme-ink);
  border-radius: var(--theme-r-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--theme-font-mono);
  font-weight: 800;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-ink-mute);
  gap: 8px;
}
.mk-preview-dock .live {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--theme-green);
  box-shadow: 0 0 4px var(--theme-green);
  margin-right: 5px;
  vertical-align: middle;
  animation: mk-dock-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.mk-preview-dock .room {
  color: var(--theme-accent-deep);
  font-weight: 900;
  letter-spacing: 0.18em;
}
.mk-preview-dock .stat {
  color: var(--theme-pop-deep);
  font-weight: 900;
}
@keyframes mk-dock-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-preview-dock .live { animation: none !important; }
}

/* Corner tacks on the hero block (pin it to the page). */
.mk-hero-tacks {
  position: absolute;
  inset: 28px 0 0;
  pointer-events: none;
}
.mk-hero-tacks .mk-tack {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    2px 3px 4px rgba(0, 0, 0, 0.32),
    inset -1px -1px 1.5px rgba(0, 0, 0, 0.28),
    inset 1px 1px 1.5px rgba(255, 255, 255, 0.6);
}
.mk-tack.pink   { background: radial-gradient(circle at 35% 30%, #ffd2e3 0%, var(--theme-accent) 50%, var(--theme-accent-deep) 100%); }
.mk-tack.green  { background: radial-gradient(circle at 35% 30%, #b9efd0 0%, var(--theme-green) 55%, var(--theme-green-deep) 100%); }
.mk-tack.lime   { background: radial-gradient(circle at 35% 30%, #fff9b0 0%, var(--theme-pop) 55%, var(--theme-pop-deep) 100%); }
.mk-tack.orange { background: radial-gradient(circle at 35% 30%, #ffd2a8 0%, var(--theme-saffron) 55%, #a14d00 100%); }

/* ============================================================
   GENERIC SECTION CHROME
   ============================================================ */
.mk-section {
  padding: 36px 0;
  border-top: 1.2px dashed var(--theme-hair);
}
.mk-sec-head {
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mk-sec-kicker {
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--theme-accent-deep);
}
.mk-sec-title {
  margin: 0;
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing: -0.018em;
  color: var(--theme-ink);
  max-width: 24ch;
}
.mk-sec-title em {
  font-style: italic;
  color: var(--theme-accent-deep);
  background: var(--theme-pop);
  padding: 0 6px;
  box-shadow: 1.5px 1.5px 0 var(--theme-ink);
  display: inline-block;
  transform: rotate(-1.2deg);
}

/* ============================================================
   3. HOW TO PLAY — numbered ordered list, sticky-note cards
   ============================================================ */
.mk-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  counter-reset: mk-step;
}
.mk-step {
  position: relative;
  padding: 22px 16px 16px;
  background: var(--theme-surface);
  border-radius: var(--theme-r-card);
  box-shadow: var(--theme-shadow-tag);
  counter-increment: mk-step;
}
.mk-step:nth-child(odd)  { transform: rotate(-0.6deg); }
.mk-step:nth-child(even) { transform: rotate(0.6deg); }
.mk-step::before {
  content: counter(mk-step, decimal-leading-zero);
  position: absolute;
  top: -12px;
  left: 14px;
  padding: 2px 8px;
  background: var(--theme-accent);
  color: #fff;
  font-family: var(--theme-font-mono);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  border: 1.5px solid var(--theme-ink);
  border-radius: 2px;
  box-shadow: 1.5px 1.5px 0 var(--theme-ink);
}
.mk-step h3 {
  margin: 0 0 6px;
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--theme-ink);
}
.mk-step p {
  margin: 0;
  font-size: 13px;
  color: var(--theme-ink-soft);
  line-height: 1.45;
}

/* ============================================================
   4. SAMPLE — "a round in the wild". Per-game widget lives
   inside .mk-sample-card; this gives it a unified frame.
   ============================================================ */
.mk-sample {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 28px;
  align-items: center;
}
@media (max-width: 760px) {
  .mk-sample { grid-template-columns: 1fr; }
}
.mk-sample-copy h3 {
  margin: 0 0 8px;
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--theme-ink);
}
.mk-sample-copy p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--theme-ink-soft);
  max-width: 38ch;
}
.mk-sample-copy ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--theme-ink-soft);
}
.mk-sample-copy ul li::marker {
  color: var(--theme-accent);
  font-weight: 900;
}
.mk-sample-card {
  position: relative;
  padding: 18px 16px;
  background: var(--theme-surface);
  border: var(--theme-bd-ink);
  border-radius: var(--theme-r-card);
  box-shadow: 4px 4px 0 var(--theme-accent);
  transform: rotate(-0.8deg);
}
.mk-sample-card .mk-sample-label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 8px;
  background: var(--theme-pop);
  border: 1px solid var(--theme-ink);
  border-radius: var(--theme-r-tag);
  box-shadow: 1.5px 1.5px 0 var(--theme-ink);
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

/* ============================================================
   5. WHY — three USP slips
   ============================================================ */
.mk-why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.mk-why-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--theme-surface);
  border-radius: var(--theme-r-card);
  box-shadow: var(--theme-shadow-tag);
}
.mk-why-item:nth-child(odd)  { transform: rotate(-0.6deg); }
.mk-why-item:nth-child(even) { transform: rotate(0.6deg); }
.mk-why-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: var(--theme-pop);
  border: 1.5px solid var(--theme-ink);
  border-radius: var(--theme-r-card);
  box-shadow: 2px 2px 0 var(--theme-ink);
  transform: rotate(-3deg);
}
.mk-why-icon.pink  { background: #ffd2e3; }
.mk-why-icon.green { background: #c6efd5; }
.mk-why-text { flex: 1; min-width: 0; }
.mk-why-text h4 {
  margin: 0 0 4px;
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--theme-ink);
}
.mk-why-text p {
  margin: 0;
  font-size: 13px;
  color: var(--theme-ink-soft);
  line-height: 1.45;
}

/* ============================================================
   6. FAQ — accordion, semantic <details>. Long-tail SEO targets.
   ============================================================ */
.mk-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
}
.mk-faq {
  background: var(--theme-surface);
  border: 1.2px solid var(--theme-ink);
  border-radius: var(--theme-r-card);
  box-shadow: 2px 3px 0 rgba(26, 20, 16, 0.10);
  padding: 0;
}
.mk-faq[open] {
  box-shadow: 3px 4px 0 var(--theme-accent);
}
.mk-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 14.5px;
  color: var(--theme-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after {
  content: "+";
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 20px;
  color: var(--theme-accent-deep);
  line-height: 1;
  transition: transform 0.15s ease;
}
.mk-faq[open] summary::after { transform: rotate(45deg); }
.mk-faq-body {
  padding: 0 16px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--theme-ink-soft);
}
.mk-faq-body p { margin: 0 0 8px; }
.mk-faq-body p:last-child { margin: 0; }

/* ============================================================
   7. RELATED — three game tiles. Re-uses the homepage's
   game-tag visual language so visitors recognise it.
   ============================================================ */
.mk-related-list {
  list-style: none;
  padding: 8px 4px 4px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px 14px;
}
.mk-related-item {
  position: relative;
  padding: 16px 14px 14px;
  background: var(--theme-surface);
  border-radius: var(--theme-r-card);
  box-shadow: var(--theme-shadow-tag);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 160px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.mk-related-item:nth-child(3n+1) { transform: rotate(-1.2deg); }
.mk-related-item:nth-child(3n+2) { transform: rotate(0.8deg); }
.mk-related-item:nth-child(3n)   { transform: rotate(-0.4deg); }
.mk-related-item:hover {
  transform: translate(-2px, -2px) rotate(-0.4deg);
  box-shadow: 6px 7px 14px rgba(26, 20, 16, 0.22);
}
.mk-related-item::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    #ffd2e3 0%, var(--theme-accent) 50%, var(--theme-accent-deep) 100%);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    2px 3px 4px rgba(0, 0, 0, 0.32),
    inset -1px -1px 1.5px rgba(0, 0, 0, 0.28),
    inset 1px 1px 1.5px rgba(255, 255, 255, 0.6);
}
.mk-related-item h3 {
  margin: 0;
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 15px;
  color: var(--theme-ink);
  letter-spacing: -0.005em;
}
.mk-related-item p {
  margin: 0;
  font-size: 12px;
  color: var(--theme-ink-soft);
  line-height: 1.45;
  flex: 1;
}
.mk-related-item .mk-related-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}
.mk-related-item .mk-meta-chip {
  display: inline-block;
  padding: 1.5px 6px;
  background: var(--theme-bg-deep);
  border: 1px solid var(--theme-ink);
  font-family: var(--theme-font-mono);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-ink);
}

/* ============================================================
   8. FINAL CTA — lime card, big stamp button
   ============================================================ */
.mk-final-cta {
  position: relative;
  margin: 36px 0 0;
  padding: 32px 26px;
  background: var(--theme-pop);
  border: 2px solid var(--theme-ink);
  border-radius: var(--theme-r-stamp);
  box-shadow:
    4px 5px 0 var(--theme-accent),
    7px 8px 12px rgba(26, 20, 16, 0.20);
  text-align: center;
  transform: rotate(-0.4deg);
}
.mk-final-cta h2 {
  margin: 0 0 8px;
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: -0.02em;
  color: var(--theme-ink);
}
.mk-final-cta h2 em {
  font-style: italic;
  color: var(--theme-accent-deep);
  background: var(--theme-bg);
  padding: 0 6px;
  box-shadow: 1.5px 1.5px 0 var(--theme-ink);
  display: inline-block;
  transform: rotate(-1.5deg);
}
.mk-final-cta p {
  margin: 0 0 18px;
  font-family: var(--theme-font-script);
  font-style: italic;
  font-size: 14px;
  color: var(--theme-ink-soft);
}

/* ============================================================
   9. FOOTER — brand + legal + sitemap
   ============================================================ */
.mk-footer {
  margin: 48px 0 0;
  padding: 22px 0 0;
  border-top: 1.2px dashed var(--theme-hair);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  font-family: var(--theme-font-display);
  font-size: 11px;
  color: var(--theme-ink-soft);
}
.mk-footer-brand {
  font-weight: 900;
  font-size: 13px;
  color: var(--theme-ink);
  letter-spacing: -0.005em;
}
.mk-footer-brand small {
  display: block;
  margin-top: 4px;
  font-family: var(--theme-font-script);
  font-style: italic;
  font-weight: 500;
  font-size: 12px;
  color: var(--theme-ink-mute);
}
.mk-footer-cols {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.mk-footer-col h5 {
  margin: 0 0 8px;
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme-accent-deep);
}
.mk-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mk-footer-col a {
  font-family: var(--theme-font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--theme-ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--theme-ink-mute);
}
.mk-footer-col a:hover { color: var(--theme-accent-deep); border-bottom-color: var(--theme-accent); }

/* Wide footer column: items flow horizontally as a middle-dot rack
   inside their cell instead of stacking into a tall list. Used for
   the Games index in the marketing footer so all 9 games fit on a
   line or two without dominating vertical space. */
.mk-footer-col.is-wide {
  flex: 1 1 320px;
  min-width: 0;
}
.mk-footer-col.is-wide ul {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.mk-footer-col.is-wide li {
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   PER-GAME SAMPLE WIDGETS — small atoms used inside .mk-sample-card.
   Each page can recombine these without inventing new chrome.
   ============================================================ */

/* Dialogue card — used by Dialogue Baazi, Mystery Masala */
.mk-quote {
  margin: 6px 0 12px;
  padding: 14px 16px;
  background: var(--theme-bg-deep);
  border-left: 4px solid var(--theme-accent);
  border-radius: 2px;
  font-family: var(--theme-font-script);
  font-style: italic;
  font-size: 17px;
  line-height: 1.35;
  color: var(--theme-ink);
}
.mk-quote::before { content: "“"; margin-right: 2px; color: var(--theme-accent-deep); font-weight: 800; }
.mk-quote::after  { content: "”"; margin-left: 2px;  color: var(--theme-accent-deep); font-weight: 800; }

/* Option list — MCQ buttons used by most games */
.mk-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mk-option {
  padding: 8px 10px;
  background: var(--theme-bg);
  border: 1.2px solid var(--theme-ink);
  border-radius: var(--theme-r-card);
  box-shadow: 1.5px 1.5px 0 var(--theme-ink);
  font-family: var(--theme-font-display);
  font-weight: 800;
  font-size: 11.5px;
  color: var(--theme-ink);
  line-height: 1.2;
  position: relative;
}
.mk-option .mk-opt-key {
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: 6px;
  text-align: center;
  background: var(--theme-pop);
  border: 1px solid var(--theme-ink);
  font-family: var(--theme-font-mono);
  font-size: 9px;
  font-weight: 800;
  border-radius: 2px;
  vertical-align: middle;
}
.mk-option.correct {
  background: var(--theme-green);
  color: #fff;
  border-color: var(--theme-green-deep);
  box-shadow: 1.5px 1.5px 0 var(--theme-green-deep);
}
.mk-option.correct .mk-opt-key {
  background: #fff;
  color: var(--theme-green-deep);
  border-color: var(--theme-green-deep);
}
.mk-option.picked {
  background: var(--theme-accent);
  color: #fff;
  border-color: var(--theme-accent-deep);
  box-shadow: 1.5px 1.5px 0 var(--theme-accent-deep);
}

/* Timer pill */
.mk-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--theme-ink);
  color: var(--theme-pop);
  border-radius: 999px;
  font-family: var(--theme-font-mono);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.mk-timer::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--theme-pop);
  box-shadow: 0 0 6px var(--theme-pop);
}

/* Generic placeholder "frame" — used for poster/scene image slots */
.mk-placeholder {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(45deg,
      rgba(26, 20, 16, 0.06) 0 6px,
      rgba(26, 20, 16, 0.02) 6px 12px),
    var(--theme-bg-deep);
  border: 1.5px dashed var(--theme-ink);
  border-radius: var(--theme-r-card);
  display: grid;
  place-items: center;
  font-family: var(--theme-font-display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--theme-ink-soft);
  margin: 0 0 10px;
}

/* ============================================================
   CASSETTE WIDGET · canonical reference for app backport
   ------------------------------------------------------------
   Spinning-reel mixtape. Used in the Guess the Song marketing
   preview (hero + sample card). The app's Guess the Song
   in-round screen does NOT have a cassette visual yet — this
   block is the canonical source to copy when we backport.

   MARKUP TEMPLATE (copy verbatim):
     <div class="mk-cassette">
       <div class="mk-cassette-label">SIDE A · VOL. 1</div>
       <div class="mk-cassette-reels">
         <div class="mk-cassette-reel"></div>
         <div class="mk-cassette-tape"></div>
         <div class="mk-cassette-reel"></div>
       </div>
     </div>

   TOKEN MAP (mocks _theme.css var → app src/scss/_tokens.scss):
     var(--theme-ink)          → $ink
     var(--theme-pop)          → bulb-yellow emphasis (current SCSS
                                 equivalent — confirm against
                                 _tokens.scss before porting)
     var(--theme-saffron)      → saffron accent
     var(--theme-font-display) → $font-display

   Reel-bronze hues (#e89a55, #5c2c0e, rgba(26,20,16,0.55),
   rgba(255,250,238,0.18)) are intentionally HARDCODED — they're
   not part of the Paan Pop token set. Keep them inline in the
   ported component, or promote to --theme-reel-* tokens if any
   other widget needs the same palette.

   APP BACKPORT TARGET:
     src/views/games/guess-the-song/index.vue
     (scoped <style lang="scss">, alongside the in-round /
      song-playing state. Swap into the screen when audio is live.)

   PORTABILITY CHECKLIST:
     - Markup template unchanged.
     - Rename .mk-cassette* → app convention (.cassette*).
     - Rename @keyframes mk-reel-spin → cassette-reel-spin (or local).
     - prefers-reduced-motion killswitch at the bottom MUST be carried
       over — without it the reels never park.
     - The two reels share a single keyframe; the right-hand reel
       takes a -0.6s animation-delay so they aren't frame-locked.
       Preserve this — it's what makes the spin feel mechanical
       rather than CSS-perfect.
   ============================================================ */
.mk-cassette {
  position: relative; aspect-ratio: 5/3;
  background: linear-gradient(180deg, #1a1410 0%, #2a2018 100%);
  border: 2px solid var(--theme-ink); border-radius: 8px;
  box-shadow: 3px 3px 0 var(--theme-ink);
  margin: 4px 0 10px; padding: 12px; display: grid;
  grid-template-rows: auto 1fr; gap: 8px;
}
.mk-cassette-label {
  background: var(--theme-pop); padding: 4px 8px;
  border: 1px solid var(--theme-ink); border-radius: 2px;
  font-family: var(--theme-font-display); font-weight: 900;
  font-size: 11px; letter-spacing: 0.08em; color: var(--theme-ink);
  text-align: center;
}
.mk-cassette-reels {
  display: flex; justify-content: space-around; align-items: center;
}

/* The reel itself is the bronze hub — static. The ::before
   carries the spoke pattern (conic-gradient striping) and is
   what spins; this way the rim and the dark centre dot stay
   rock-solid while only the spokes rotate, which is what makes
   the motion legible at 28px. */
.mk-cassette-reel {
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle, #e89a55 0%, #5c2c0e 100%);
  border: 1.5px solid var(--theme-ink);
  position: relative;
  overflow: hidden;
}
.mk-cassette-reel::before {
  content: "";
  position: absolute; inset: 2px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      rgba(26, 20, 16, 0.55) 0deg 18deg,
      transparent 18deg 60deg,
      rgba(26, 20, 16, 0.55) 60deg 78deg,
      transparent 78deg 120deg,
      rgba(26, 20, 16, 0.55) 120deg 138deg,
      transparent 138deg 180deg,
      rgba(26, 20, 16, 0.55) 180deg 198deg,
      transparent 198deg 240deg,
      rgba(26, 20, 16, 0.55) 240deg 258deg,
      transparent 258deg 300deg,
      rgba(26, 20, 16, 0.55) 300deg 318deg,
      transparent 318deg 360deg);
  animation: mk-reel-spin 2.4s linear infinite;
  transform-origin: 50% 50%;
}
/* Dark centre dot — sits on top of the spinning spokes so the
   hub reads as a fixed axle, not a rotating sticker. */
.mk-cassette-reel::after {
  content: "";
  position: absolute; inset: 10px;
  border-radius: 50%;
  background: var(--theme-ink);
  box-shadow: 0 0 0 1px rgba(255, 250, 238, 0.18);
}
/* Right-hand reel: -0.6s phase offset so the two reels aren't
   locked frame-perfect. Feels mechanical, not CSS. */
.mk-cassette-reels .mk-cassette-reel:last-child::before {
  animation-delay: -0.6s;
}
.mk-cassette-tape {
  flex: 1; height: 2px; background: var(--theme-saffron); margin: 0 -4px;
}
@keyframes mk-reel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Reduced-motion killswitch */
@media (prefers-reduced-motion: reduce) {
  .mk-cassette-reel::before { animation: none !important; }
  .mk-hero-kicker,
  .mk-h1 em,
  .mk-stat,
  .mk-stamp,
  .mk-step,
  .mk-why-item,
  .mk-related-item,
  .mk-final-cta,
  .mk-sample-card { transform: none !important; }
}