/* Zeynep's Magic Pets — the home page only.
   Loads after tokens.css and ui.css; the shared chrome (.zmp-*) is styled
   there, this sheet owns the hero, the game cards and the page scaffold. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  /* No background-attachment: fixed — it paints only the first viewport on
     long pages in some engines and is broken on iOS Safari. */
  background-color: var(--bg1);
  background-image: radial-gradient(1300px 900px at 50% -20%, var(--bg2), var(--bg1) 65%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font);
}

#app { display: flex; flex-direction: column; min-height: 100vh; }

/* The shared bar's 🏠 leads home — on the home page itself it is a self-link,
   so it steps aside and the brand takes the left edge. */
.zmp-topbar[data-where="home"] .zmp-home { display: none; }

main.home {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px 8px;
  flex: 1;
}

/* ------------------------------------------------------------------- hero */

.hero { position: relative; text-align: center; padding: 34px 8px 22px; }
.wordmark {
  margin: 0;
  font-size: clamp(30px, 7.5vw, 54px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 30px rgba(255, 194, 71, .35);
}
.tagline {
  margin: 10px auto 0;
  max-width: 44ch;
  color: var(--dim);
  font-size: clamp(15px, 2.4vw, 18px);
}
.spark { position: absolute; pointer-events: none; animation: floaty 4.5s ease-in-out infinite; }
.spark.s1 { left: 12%; top: 12px; font-size: 17px; }
.spark.s2 { right: 14%; top: 30px; font-size: 13px; animation-delay: 1.4s; }
.spark.s3 { right: 6%; bottom: 6px; font-size: 15px; animation-delay: 2.6s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); opacity: .85; }
  50% { transform: translateY(-7px); opacity: .45; }
}

/* ------------------------------------------------------------------ cards */

.cards { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 14px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  --accent: var(--gold);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-story { --accent: #ffc247; --halo: rgba(255, 194, 71, .28); }
.card-snake { --accent: #4ade80; --halo: rgba(74, 222, 128, .25); }
.card-pet   { --accent: #ff8fb8; --halo: rgba(255, 143, 184, .27); }

.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 26px var(--halo);
}
.card:active { transform: translateY(-1px) scale(.99); }
.card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.card-art { display: block; aspect-ratio: 16 / 9; background: var(--plum-800); }
.card-art svg { display: block; width: 100%; height: 100%; }
.card-art .tw { animation: tw 2.8s ease-in-out infinite; }
.card-art .tw:nth-of-type(2n) { animation-delay: .9s; }
.card-art .tw:nth-of-type(3n) { animation-delay: 1.7s; }
@keyframes tw { 50% { opacity: .2; } }

.card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 16px; }
.card-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--accent); }
.card-desc { margin: 0; color: var(--dim); font-size: 14.5px; line-height: 1.45; }
.card-teaser { margin: 2px 0 0; font-size: 13.5px; font-weight: 700; color: var(--accent); }

/* ----------------------------------------------------- playing now strip */

.playing { margin-top: 24px; }
.playing .zmp-others {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}

/* ------------------------------------------------------------ scoreboards */

.section-title { margin: 28px 0 12px; font-size: 20px; color: var(--paper); }
.boards { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 700px) { .boards { grid-template-columns: repeat(3, 1fr); } }

/* ----------------------------------------------------------------- footer */

.foot { text-align: center; color: var(--dim); font-size: 13.5px; padding: 26px 12px 30px; }
.foot b { color: var(--coral); }

@media (prefers-reduced-motion: reduce) {
  .card, .icon-btn { transition: none; }
  .spark, .card-art .tw { animation: none; }
}