/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4
 * Hallmark · genre: playful · macrostructure: Workbench · theme: Hum
 * tone: carnival · audience: casual phone players · use: plant toys, pop balloons
 * enrichment: E5 canvas juice · nav: N7 via hub bar · footer: none
 */
@import url("../css/tokens.css");

:root {
  --pop-ink: oklch(24% 0.1 330);
  --pop-cream: oklch(98% 0.03 95);
  --pop-mag: oklch(62% 0.28 350);
  --pop-lemon: oklch(88% 0.22 95);
  --pop-teal: oklch(68% 0.16 185);
  --pop-mint: oklch(82% 0.2 150);
}

html, body { overflow-x: clip; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--color-paper);
  background-image:
    radial-gradient(ellipse 90% 60% at 0% 0%, var(--color-blob-1) 0 36%, transparent 58%),
    radial-gradient(ellipse 80% 55% at 100% 8%, var(--color-blob-2) 0 34%, transparent 56%),
    radial-gradient(ellipse 70% 50% at 85% 100%, var(--color-blob-3) 0 32%, transparent 54%),
    radial-gradient(ellipse 60% 45% at 5% 95%, var(--color-blob-4) 0 30%, transparent 52%);
  background-attachment: fixed;
  color: var(--pop-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 12% 18%, oklch(78% 0.28 350) 0 1.15rem, transparent 1.2rem),
    radial-gradient(circle at 80% 14%, oklch(86% 0.24 95) 0 1.45rem, transparent 1.5rem),
    radial-gradient(circle at 90% 52%, oklch(72% 0.24 185) 0 1rem, transparent 1.05rem),
    radial-gradient(circle at 8% 74%, oklch(80% 0.22 150) 0 1.25rem, transparent 1.3rem),
    radial-gradient(circle at 58% 88%, oklch(74% 0.24 250) 0 0.95rem, transparent 1rem);
}
body > * { position: relative; z-index: 1; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.kicker {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--page-gutter);
  background: var(--pop-mag);
  color: var(--pop-cream);
}
.hub-bar a {
  color: var(--pop-lemon);
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.hub-bar a:hover { text-decoration: underline; }

.playyard-ad { padding: var(--space-sm) var(--page-gutter); }

#title, #how, #maps { display: none; padding: var(--space-lg) var(--page-gutter) var(--space-xl); }
body[data-screen="title"] #title,
body[data-screen="how"] #how,
body[data-screen="maps"] #maps { display: block; }
#play { display: none; }
body[data-screen="play"] #play { display: block; }
body[data-screen="play"] { overflow: hidden; }
body[data-screen="play"] .playyard-ad,
body[data-screen="play"] .below { display: none; }

.hero {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--space-lg);
  background: color-mix(in oklch, var(--pop-cream) 88%, transparent);
  border: 3px solid var(--pop-ink);
  border-radius: 28px;
  box-shadow: 8px 8px 0 oklch(62% 0.22 350);
}
.hero h1 { margin: 0 0 var(--space-sm); font-size: clamp(2.2rem, 8vw, 3.4rem); }
.lede { margin: 0 0 var(--space-md); font-size: var(--text-lg); }
.demo-wrap {
  margin: 0 0 var(--space-md);
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid var(--pop-ink);
  background: oklch(72% 0.16 145);
  height: min(78vw, 520px);
}
#demo { width: 100%; height: 100%; display: block; touch-action: none; }
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
  padding: 0;
  margin: 0 0 var(--space-md);
  list-style: none;
}
.facts li {
  padding: var(--space-xs) var(--space-sm);
  background: var(--pop-lemon);
  border: 2px solid var(--pop-ink);
  border-radius: 12px;
  font-size: var(--text-sm);
}
.facts b { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.btn {
  appearance: none;
  min-height: 48px;
  padding: 0.7rem 1.1rem;
  border: 2px solid var(--pop-ink);
  border-radius: 999px;
  background: var(--pop-lemon);
  color: var(--pop-ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--pop-ink);
}
.btn:hover { transform: translate(-1px, -1px); }
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--pop-ink); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn--soft { background: var(--pop-cream); }
.btn--mag { background: var(--pop-mag); color: var(--pop-cream); }
.btn.is-on, .btn[aria-pressed="true"] { background: var(--pop-teal); }

.how-copy, .below { max-width: 40rem; margin: 0 auto; }
.steps { padding-left: 1.2rem; }
.steps li { margin-bottom: var(--space-sm); }

.map-tray {
  display: grid;
  gap: var(--space-sm);
  max-width: 40rem;
  margin: 0 auto var(--space-md);
}
.map-card {
  text-align: left;
  padding: var(--space-md);
  border: 3px solid var(--pop-ink);
  border-radius: 20px;
  background: var(--pop-cream);
  box-shadow: 5px 5px 0 oklch(68% 0.16 185);
  cursor: pointer;
  font: inherit;
}
.map-card h3 { margin: 0 0 var(--space-2xs); }
.map-card p { margin: 0; }
.map-meta { margin-top: var(--space-xs); font-size: var(--text-sm); font-family: var(--font-label); }

.play-rail {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: calc(100dvh - 3.25rem);
  gap: 0;
  padding: 0;
}
@media (min-width: 960px) {
  .play-rail {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) 17rem;
    height: calc(100dvh - 3.25rem);
  }
}
.arena { position: relative; min-height: 0; height: 100%; display: grid; }
.hud {
  position: absolute;
  z-index: 2;
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: center;
  pointer-events: none;
}
.hud .btn { pointer-events: auto; min-height: 44px; padding: 0.45rem 0.8rem; box-shadow: 2px 2px 0 var(--pop-ink); }
.stat {
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  background: color-mix(in oklch, var(--pop-cream) 88%, transparent);
  border: 2px solid var(--pop-ink);
  border-radius: 999px;
  font-weight: 800;
}
.stat b { color: var(--pop-mag); }
.stage-wrap {
  height: 100%;
  min-height: 22rem;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: oklch(72% 0.16 145);
  box-shadow: none;
}
#stage { width: 100%; height: 100%; display: block; touch-action: none; }
.play-ad {
  background: color-mix(in oklch, var(--pop-cream) 92%, transparent);
  border-top: 3px solid var(--pop-ink);
  padding: 0.55rem 0.7rem 0.75rem;
}
@media (min-width: 960px) {
  .play-ad { border-top: 0; border-left: 3px solid var(--pop-ink); overflow: auto; }
}
@media (max-width: 959px) {
  body[data-screen="play"] .play-ad .ad-well { display: none; }
}

.shop {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
}
.shop .btn { width: 100%; border-radius: 16px; text-align: left; box-shadow: 2px 2px 0 var(--pop-ink); }
.shop .btn.toy { display: flex; align-items: center; gap: 0.45rem; }
.toy-icon { width: 3.1rem; height: 3.1rem; flex: 0 0 auto; }
.shop .btn small, .shop .cost { display: block; font-weight: 600; font-size: var(--text-sm); }
.map-card[data-map="1"] { box-shadow: 5px 5px 0 oklch(68% 0.16 145); }
.map-card[data-map="2"] { box-shadow: 5px 5px 0 oklch(58% 0.16 300); background: oklch(94% 0.04 300); }
.map-card[data-map="3"] { box-shadow: 5px 5px 0 oklch(68% 0.14 230); background: oklch(96% 0.04 95); }
.controls, .inspect { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.inspect {
  padding: var(--space-sm);
  background: color-mix(in oklch, var(--pop-mint) 70%, white);
  border: 2px solid var(--pop-ink);
  border-radius: 16px;
}
.inspect[hidden] { display: none; }
.hint { margin: 0.35rem 0 0; font-size: var(--text-sm); }

.below { padding: var(--space-xl) var(--page-gutter); }
.below h2 { margin-top: 0; }

.overlay[hidden] { display: none; }
.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: oklch(20% 0.08 330 / 0.55);
  display: grid;
  place-items: center;
  padding: var(--space-md);
}
.sheet {
  width: min(28rem, 100%);
  padding: var(--space-lg);
  background: var(--pop-cream);
  border: 3px solid var(--pop-ink);
  border-radius: 24px;
  box-shadow: 8px 8px 0 var(--pop-mag);
}