/* Toy Club: the game's look on the web. The sky of the app icon and loading screen, cream cards with a soft lip, the
   white Lilita One titles with a thick navy outline the game uses for every heading, and Fredoka for body text. Same
   structure as the Word Arrow Escape page (top bar, hero, sections, legal pages on legal.css). No framework, no build. */

@font-face { font-family: "Lilita One"; src: url("/fonts/LilitaOne.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/fonts/Fredoka-Bold.ttf") format("truetype"); font-weight: 600 800; font-display: swap; }

:root {
  --navy: #141a30;      /* the game's outline ink (UI.Navy) */
  --navy-soft: #2b3f6e; /* body ink on light panels */
  --sky: #3fa9f5;
  --sky-light: #8fd3ff;
  --sky-pale: #dff2ff;
  --cream: #fff6de;
  --lip: #e7d6ae;
  --ink: #2b3f6e;
  --gold: #ffc83d;
  --gold-deep: #f59e0b;
  --lime: #7ed321;
  --coral: #ff5d6c;
  --teal: #35b9b0;
  --link: #1f5fbf;
  --radius: 22px;
  --shadow: 0 10px 24px rgba(20, 26, 48, .2);
  --page: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  overflow-x: clip;
  font: 500 18px/1.55 "Fredoka", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--navy);
  background: var(--cream);
}
img, video { max-width: 100%; display: block; }
a { color: var(--link); }
h2, h3 { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--cream); padding: 8px 14px; border-radius: 10px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Display headings, built like the game's titles: white fill over a thick navy outline. Two layers, because a browser
   draws -webkit-text-stroke over the fill and would eat it; the fill layer is the heading's data-text. */
.display {
  position: relative;
  font: 400 clamp(34px, 5vw, 54px)/1.1 "Lilita One", "Fredoka", sans-serif;
  letter-spacing: .5px;
  text-align: center;
  color: var(--navy);
  -webkit-text-stroke: 10px var(--navy);
  filter: drop-shadow(0 5px 0 rgba(20, 26, 48, .35));
  margin-bottom: 36px;
}
.display::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  -webkit-text-stroke: 0;
  color: #fff;
}
.display.gold::after { color: var(--gold); }

/* ---------------------------------------------------------------- top bar */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px clamp(16px, 4vw, 40px);
  background: rgba(255, 246, 222, .93);
  backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--navy);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); font: 400 22px "Lilita One", sans-serif; }
.brand img { border-radius: 10px; }
.topbar nav { display: flex; gap: clamp(10px, 2.4vw, 28px); }
.topbar nav a { color: var(--navy); text-decoration: none; font-weight: 700; font-size: 16px; }
.topbar nav a:hover { color: var(--coral); }
@media (max-width: 720px) { .topbar nav { display: none; } }

/* ---------------------------------------------------------------- hero: the loading screen's sky */
.sky {
  background:
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(ellipse 50% 30% at 85% 10%, rgba(255, 255, 255, .45), transparent 70%),
    linear-gradient(180deg, var(--sky-light) 0%, var(--sky) 100%);
}
.hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 4vw, 56px);
  padding: clamp(32px, 6vw, 72px) max(clamp(16px, 5vw, 56px), calc((100% - var(--page)) / 2)) clamp(48px, 7vw, 96px);
  border-bottom: 4px solid var(--navy);
}
.hero-icon { width: 112px; height: 112px; border-radius: 26px; box-shadow: var(--shadow); margin-bottom: 18px; }
.wordmark { margin: 0; }
.wordmark-img { display: block; width: min(440px, 100%); height: auto; }
.tagline { font: 400 clamp(22px, 2.6vw, 28px)/1.2 "Lilita One", sans-serif; color: var(--navy); margin: 18px 0 8px; }
.lede { font-size: clamp(17px, 1.6vw, 20px); max-width: 34em; margin: 0 0 26px; color: var(--navy); }
.fineprint { font-size: 14px; margin: 14px 0 0; color: var(--navy); opacity: .85; }

.hero-phone { display: flex; justify-content: center; }
.phone {
  width: min(300px, 70vw); aspect-ratio: 9 / 19.5; padding: 10px;
  background: var(--navy); border-radius: 44px; box-shadow: var(--shadow), 0 0 0 4px rgba(255, 255, 255, .35) inset;
  transform: rotate(3deg);
}
.phone-screen { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; background: var(--sky); }
@media (prefers-reduced-motion: reduce) { .phone { transform: none; } }

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .hero-icon, .lede { margin-left: auto; margin-right: auto; }
  .wordmark-img { margin-left: auto; margin-right: auto; width: min(360px, 100%); }
  .badges { justify-content: center; }
}

/* ---------------------------------------------------------------- badges (placeholders until the official art) */
.badges { display: flex; flex-wrap: wrap; gap: 14px; }
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 18px 0 14px;
  background: #000; color: #fff; text-decoration: none;
  border-radius: 10px; border: 1px solid #a6a6a6;
}
.badge svg { width: 26px; height: 26px; flex: none; }
.badge span { display: flex; flex-direction: column; font: 600 21px/1.05 system-ui, -apple-system, sans-serif; letter-spacing: -.2px; }
.badge small { font-size: 11px; font-weight: 500; letter-spacing: .2px; }
.badge-google small { text-transform: uppercase; }

/* ---------------------------------------------------------------- band sections: the hub's blue stage */
.band {
  background: radial-gradient(ellipse at 50% 0%, #5cbcff 0%, var(--sky) 45%, #2b8fdc 100%);
  padding: clamp(56px, 8vw, 96px) clamp(16px, 5vw, 56px);
  border-bottom: 4px solid var(--navy);
}
.card {
  background: var(--cream); color: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 6px 0 var(--lip), var(--shadow);
}

.steps { list-style: none; margin: 0 auto; padding: 0; max-width: var(--page); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.steps .card { padding: 34px 26px 28px; position: relative; }
.steps h3 { font: 400 26px "Lilita One", sans-serif; color: var(--navy); margin-bottom: 8px; }
.steps p { margin: 0; }
.step-num {
  position: absolute; top: -18px; left: 22px;
  width: 44px; height: 44px; display: grid; place-items: center;
  font: 400 24px "Lilita One", sans-serif; color: #fff;
  background: var(--coral); border: 4px solid var(--navy); border-radius: 50%;
}
.step-art { position: absolute; top: -26px; right: 18px; width: 64px; height: 64px; }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 34px; } }

/* ---------------------------------------------------------------- features */
.features { padding: clamp(56px, 8vw, 96px) clamp(16px, 5vw, 56px); background: var(--cream); }
.features .display::after { color: var(--gold); }
.feature-grid { list-style: none; margin: 0 auto; padding: 0; max-width: var(--page); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.feature {
  background: #fff; border: 4px solid var(--navy); border-radius: var(--radius);
  padding: 26px 24px; text-align: center; box-shadow: 0 6px 0 var(--navy);
}
.feature > img { margin: 0 auto 12px; height: 96px; width: auto; }
.feature h3 { font: 400 24px "Lilita One", sans-serif; margin-bottom: 6px; }
.feature p { margin: 0; color: var(--navy-soft); }
.feature-row { display: flex; justify-content: center; gap: 4px; margin-bottom: 12px; height: 96px; align-items: center; }
.feature-row img { height: 72px; width: auto; margin: 0; }
.langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 14px; min-height: 84px; align-content: center; }
.langs span { background: var(--sky-pale); border-radius: 10px; padding: 3px 10px; font-weight: 700; color: var(--navy-soft); box-shadow: 0 3px 0 #b9dcf5; }
@media (max-width: 960px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- screenshots */
.strip {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  max-width: var(--page); margin: 0 auto; padding: 4px 4px 22px;
  scrollbar-width: thin;
}
.strip > * {
  flex: 0 0 auto; width: min(260px, 64vw); aspect-ratio: 1320 / 2868; scroll-snap-align: center;
  border-radius: 26px; border: 6px solid var(--navy); box-shadow: var(--shadow);
}
.strip img { height: auto; }
.strip:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; border-radius: 12px; }
.strip-nav { display: flex; justify-content: center; gap: 16px; margin-top: 10px; }
.round {
  width: 52px; height: 52px; border-radius: 50%; border: 4px solid var(--navy);
  background: var(--gold); color: var(--navy); font: 400 32px/1 "Lilita One", sans-serif; cursor: pointer;
  box-shadow: 0 4px 0 var(--navy);
}
.round:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }

/* ---------------------------------------------------------------- FAQ */
.faq { padding: clamp(56px, 8vw, 96px) clamp(16px, 5vw, 56px); max-width: 860px; margin: 0 auto; }
.faq .display::after { color: var(--gold); }
.faq details { padding: 0; margin-bottom: 18px; }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 56px 18px 22px; position: relative;
  font: 400 21px "Lilita One", sans-serif; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 12px; font-size: 30px; color: var(--coral); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 22px 20px; }

/* ---------------------------------------------------------------- final CTA + footer */
.cta { text-align: center; padding: clamp(56px, 8vw, 96px) 16px; border-top: 4px solid var(--navy); }
.cta-art { width: min(420px, 80vw); height: auto; margin: 0 auto 18px; filter: drop-shadow(0 14px 18px rgba(20, 26, 48, .25)); }
.cta .display { margin-bottom: 26px; }
.cta .badges { justify-content: center; }

.footer { background: var(--navy); color: #dfe3ff; text-align: center; padding: 36px 16px 44px; font-size: 15px; }
.footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-bottom: 14px; }
.footer a { color: #fff; font-weight: 700; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer p { margin: 6px auto; max-width: 720px; }
.footer .tm { font-size: 12px; opacity: .75; }