/* cozycatpuzzle.com. Pages are their approved mockups (1024 px plates) with the
   live parts drawn over them in mockup units, so type scales with the plate:
   1 mockup px = 100cqw / 1024 inside a .crop. */

@font-face { font-family: "Nunito"; src: url("/assets/fonts/Nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/assets/fonts/Fredoka.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }

:root {
  --paper: #fbf6ee;
  --card: #fefdf7;
  --line: #ece5da;
  --ink: #0c0e14;
  --text: #3d4150;
  --soft: #5d6375;
  --navy: #2b3553;
  --coral: #f0604f;
  --coral-deep: #e6382f;
  --coral-soft: #ffe9e3;
  --mu: calc(100cqw / 1024);
}

* { box-sizing: border-box; }
/* Real text shared across phone and desktop, below the illustrated home. */
.game-info { max-width: 1080px; margin: 0 auto; padding: 52px 40px; color: var(--text); }
.game-info-kicker { margin: 0 0 12px; color: #a23d32; font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.game-info h1, .game-info h2, .game-info h3, .play-intro h1 { font-family: "Fredoka", sans-serif; font-weight: 500; color: var(--navy); line-height: 1.2; }
.game-info h1 { max-width: 760px; margin: 0 0 18px; font-size: clamp(28px, 4vw, 42px); }
.game-info h2 { margin: 0 0 14px; font-size: 26px; }
.game-info h3 { margin: 0 0 14px; font-size: 23px; }
.game-info p, .game-info li { font-size: 17px; line-height: 1.7; }
.game-info-lead { max-width: 760px; margin: 0 0 30px; }
.game-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.game-info-grid > div { padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.game-info-grid p { margin: 0 0 16px; }
.game-info ol { padding-left: 22px; margin-top: 0; }
.game-info li + li { margin-top: 12px; }
.game-info-link { display: inline-block; color: #914034; font-weight: 800; text-underline-offset: 4px; margin: 4px 20px 8px 0; }
.game-info-button { display: inline-block; padding: 13px 22px; border-radius: 30px; background: #ad3c30; color: white; font-weight: 800; text-decoration: none; }
.game-info a:focus-visible { outline: 3px solid var(--navy); outline-offset: 5px; }
.game-info-more { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.page-home .m-footer { display: flex; }
.play-intro { max-width: 1000px; margin: 0 auto; padding: 8px 24px 20px; text-align: center; }
.play-intro h1 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 8px; }
.play-intro p { margin: 0; line-height: 1.5; }
.demo-guide { margin-top: 24px; border-radius: 26px; background: var(--paper); }
@media (max-width: 759px) {
  .game-info { padding: 36px 22px; }
  .game-info-grid { grid-template-columns: 1fr; gap: 18px; }
  .game-info-grid > div { padding: 22px; }
  .game-info p, .game-info li { font-size: 16px; }
  .play-intro { padding-top: 20px; }
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Nunito", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }

.sr, .skip:not(:focus) {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip { position: fixed; top: 8px; left: 8px; z-index: 50; background: #fff; padding: 8px 14px; border-radius: 10px; }

/* ------------------------------------------------------------ plates */

.desktop { max-width: 1229px; margin: 0 auto; }
.mobile { display: none; }

.crop { position: relative; overflow: hidden; width: 100%; container-type: inline-size; }
.crop > img, .crop > picture > img { position: absolute; max-width: none; height: auto; display: block; user-select: none; -webkit-user-drag: none; }

.spot {
  position: absolute; display: block; border-radius: calc(16 * var(--mu));
  transition: background-color .15s ease, box-shadow .15s ease;
}
.spot.pill { border-radius: 999px; }
.spot:hover { background: rgba(255, 255, 255, .16); }
.spot.pill:hover { box-shadow: 0 0 0 calc(2 * var(--mu)) rgba(255, 255, 255, .35) inset; }
/* Worlds CTAs use the baked button artwork without a tinted hover layer. */
.page-worlds .desktop .spot.pill:hover {
  background: transparent;
  box-shadow: none;
}
.spot:active { background: rgba(0, 0, 0, .06); }
.spot:focus-visible, .nav-links a:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
button.spot { border: 0; padding: 0; background: transparent; cursor: pointer; }
button.spot:hover { background: rgba(255, 255, 255, .16); }


/* Crisp desktop Home CTAs replace the soft lettering baked into the plate.
   The link itself paints the full pill, so hover and focus share its bounds. */
.home-mockup .spot.home-cta {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(11 * var(--mu));
  border: calc(1 * var(--mu)) solid rgba(105, 64, 53, .14);
  border-radius: 999px;
  color: #171719;
  background: #fffdf8;
  box-shadow: 0 calc(2 * var(--mu)) calc(4 * var(--mu)) rgba(69, 48, 30, .13);
  font: 600 calc(22 * var(--mu))/1 "Fredoka", "Nunito", sans-serif;
  letter-spacing: -.018em;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s ease, box-shadow .15s ease;
}
.home-mockup .spot.home-cta svg {
  width: calc(19 * var(--mu));
  height: calc(21 * var(--mu));
  flex: none;
}
.home-mockup .spot.home-play {
  color: white;
  background: linear-gradient(#ff6760, #fb5951);
  border-color: #ee5149;
  box-shadow: 0 calc(2 * var(--mu)) calc(3 * var(--mu)) rgba(148, 66, 50, .22);
}
.home-mockup .spot.home-waitlist { font-size: calc(20 * var(--mu)); }
.home-mockup .spot.home-waitlist-bottom { font-size: calc(21 * var(--mu)); }
.home-mockup .spot.home-cta:hover {
  background-color: #fffdf8;
  box-shadow: 0 calc(2 * var(--mu)) calc(5 * var(--mu)) rgba(69, 48, 30, .19);
  filter: brightness(1.035);
}
.home-mockup .spot.home-play:hover {
  background: linear-gradient(#ff6760, #fb5951);
  box-shadow: 0 calc(2 * var(--mu)) calc(5 * var(--mu)) rgba(148, 66, 50, .27);
}
.home-mockup .spot.home-cta:active { filter: brightness(.98); }

.anchor { position: absolute; left: 0; width: 1px; height: 1px; }

.nav-links {
  position: absolute; display: flex; align-items: center; justify-content: space-between;
  font-size: calc(12.5 * var(--mu));
}
.nav-links a {
  position: relative; text-decoration: none; color: #2e3448; font-weight: 500; white-space: nowrap;
  padding: calc(6 * var(--mu)) 0;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: #1b1e2a; font-weight: 800; }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-4 * var(--mu));
  height: calc(3 * var(--mu)); border-radius: 3px; background: var(--coral);
}

/* ------------------------------------------------------------ game */

.game-slot { position: absolute; }
.game-frame {
  position: absolute; z-index: 5; overflow: hidden; background: #f4efe7;
  border-radius: 18px 18px 12px 12px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}
.game-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.game-frame:fullscreen { width: 100vw !important; height: 100vh !important; border-radius: 0; background: #fbf6ee; }
.game-frame:-webkit-full-screen { width: 100vw !important; height: 100vh !important; border-radius: 0; }

/* ------------------------------------------------------------ phone header and footer */

.m-header {
  display: none; position: sticky; top: 0; z-index: 20; height: 58px; padding: 0 16px;
  align-items: center; gap: 10px; background: rgba(254, 252, 247, .96);
  border-bottom: 1px solid var(--line);
}
.m-play {
  background: var(--coral); color: #fff; text-decoration: none; font-weight: 800; font-size: 14px;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap; flex: none;
}
.m-menu { width: 42px; height: 42px; border: 0; background: transparent; display: grid; place-content: center; gap: 5px; cursor: pointer; }
.m-menu span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--ink); }
.m-nav { position: sticky; top: 58px; z-index: 19; background: var(--card); border-bottom: 1px solid var(--line); }
.m-links { display: flex; flex-direction: column; padding: 6px 16px 12px; }
.m-links a { padding: 12px 4px; text-decoration: none; font-weight: 600; font-size: 17px; color: var(--ink); border-bottom: 1px solid var(--line); }
.m-links a:last-child { border-bottom: 0; }

.m-footer {
  display: none; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1229px; margin: 0 auto; padding: 14px 16px 22px;
}
.m-footer a:last-child { font-size: 14px; color: var(--ink); }

.m-game { padding: 8px 16px 4px; }
.m-game .game-slot {
  position: relative; margin: 0 auto;
  width: min(100%, calc((100svh - 130px) * 390 / 693)); aspect-ratio: 390 / 693;
}
.m-fullscreen {
  display: block; margin: 12px auto 4px; font: inherit; font-weight: 700; font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 20px; cursor: pointer;
}

/* ------------------------------------------------------------ privacy (live document) */

.doc-page .m-footer { display: flex; }
.doc {
  position: relative; max-width: 1229px; margin: -10px auto 0; padding: 0 24px 150px 30px;
  display: grid; grid-template-columns: 235px 1fr; gap: 12px; align-items: start;
}
.card {
  position: relative; z-index: 1; background: var(--card); border: 1px solid #f1ebe1;
  border-radius: 22px; box-shadow: 0 2px 10px rgba(80, 60, 30, .04);
}
.toc { position: sticky; top: 20px; padding: 26px 12px 20px; }
.toc h2 { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 20px; color: var(--ink); margin: 0 8px 18px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a {
  position: relative; display: block; padding: 11px 18px; border-radius: 14px; text-decoration: none;
  font-size: 16.5px; color: #2d3142;
}
.toc a:hover { background: #fbf1eb; }
.toc a.on { background: var(--coral-soft); }
.toc a.on::before { content: ""; position: absolute; left: -2px; top: 6px; bottom: 6px; width: 6px; border-radius: 3px; background: #fc4a3f; }
.policy { padding: 30px 36px 34px; }
.policy h1 {
  display: flex; align-items: center; gap: 14px; margin: 0 0 6px;
  font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 50px; color: var(--ink);
  -webkit-text-stroke: 1.2px var(--ink); letter-spacing: -.5px;
}
.policy h1 img { width: 48px; height: auto; }
.effective { color: var(--soft); margin: 0 0 8px; }
.policy section { border-top: 1px solid #e6e4e0; padding: 18px 0 10px; scroll-margin-top: 20px; }
.policy section:first-of-type { border-top: 0; }
.policy h2 { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 26px; color: var(--ink); margin: 4px 0 10px; }
.policy h3 { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 18px; color: var(--ink); margin: 18px 0 4px; }
.policy p, .policy li { font-size: 16.5px; line-height: 1.65; color: var(--text); }
.policy ul { padding-left: 22px; }
.policy li { margin: 6px 0; }
.policy a { color: var(--coral-deep); }
.back { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 22px; border-top: 1px solid #e6e4e0; width: 100%; color: var(--coral-deep); font-size: 17px; text-decoration: none; font-weight: 500; }
.back span { font-size: 24px; }
.plant { position: absolute; z-index: 0; bottom: 0; pointer-events: none; }
.plant.left { left: 0; width: 210px; }
.plant.right { right: 0; width: 164px; }

/* ------------------------------------------------------------ phones */

@media (max-width: 759px) {
  .desktop { display: none; }
  .mobile { display: block; }
  .m-header { display: flex; }
  .m-footer { display: flex; }

  .doc { grid-template-columns: 1fr; padding: 0 12px 110px; margin-top: 4px; }
  .toc { display: none; }
  .policy { padding: 22px 18px 26px; }
  .policy h1 { font-size: 36px; -webkit-text-stroke: .8px var(--ink); }
  .policy h1 img { width: 36px; }
  .plant.left { width: 130px; }
  .plant.right { width: 100px; }
}

/* ------------------------------------------------------------ waitlist form
   Laid out in the mockup card's own pixels: 1 --fu = 1 px of the 428 px card. */

/* The card's parent is the size reference, so the card and its contents
   share one unit. */
.wl-slot, .wl-plain, .wl-mobile { container-type: inline-size; }
.wl-slot { position: absolute; }
.wl-card {
  --fu: calc(100cqw / 428);
  position: relative; width: 100%; min-height: 100%; margin: 0;
  background: #fdfaf3; border: 1px solid #f0e8dc; border-radius: calc(28 * var(--fu));
  box-shadow: 0 calc(8 * var(--fu)) calc(28 * var(--fu)) rgba(120, 80, 40, .08);
  padding: calc(40 * var(--fu)) calc(33 * var(--fu)) calc(26 * var(--fu));
  color: #1b1e2a; font-size: calc(17 * var(--fu));
}
.wl-card * { font-size: inherit; }
.wl-title {
  margin: 0 0 calc(22 * var(--fu)); text-align: center; line-height: 1.1;
  font-family: "Fredoka", sans-serif; font-weight: 700; font-size: calc(46 * var(--fu)) !important; color: var(--ink);
  -webkit-text-stroke: calc(1.9 * var(--fu)) var(--ink); letter-spacing: calc(-.4 * var(--fu));
}
.wl-label { display: block; font-weight: 800; font-size: calc(18.5 * var(--fu)) !important; margin: 0 0 calc(9 * var(--fu)); padding: 0; color: #1b1e2a; }
.wl-input {
  display: block; width: 100%; height: calc(55 * var(--fu)); padding: 0 calc(16 * var(--fu));
  border: calc(1.5 * var(--fu)) solid #e3ddd4; border-radius: calc(14 * var(--fu)); background: #fff;
  font: inherit; font-size: calc(19.5 * var(--fu)) !important; color: #1b1e2a;
}
.wl-input::placeholder { color: #9a9aa3; }
.wl-input:focus, .wl-option:focus-within, .wl-consent:focus-within .wl-check { outline: 3px solid rgba(240, 96, 79, .45); outline-offset: 1px; }
.wl-devices { border: 0; margin: calc(24 * var(--fu)) 0 0; padding: 0; }
.wl-option {
  position: relative; display: flex; align-items: center; gap: calc(14 * var(--fu));
  height: calc(57 * var(--fu)); margin-bottom: calc(10 * var(--fu)); padding: 0 calc(16 * var(--fu));
  border: calc(1.5 * var(--fu)) solid #e7e1d8; border-radius: calc(14 * var(--fu)); background: #fffdf9;
  font-size: calc(19.5 * var(--fu)) !important; cursor: pointer;
}
.wl-option:hover { border-color: #f3b3a6; }
.wl-option input, .wl-consent input { position: absolute; opacity: 0; pointer-events: none; }
.wl-radio { width: calc(25 * var(--fu)); height: calc(25 * var(--fu)); border-radius: 50%; border: calc(1.5 * var(--fu)) solid #b9b3aa; background: #fff; flex: none; }
.wl-option input:checked ~ .wl-radio { border-color: var(--coral); box-shadow: inset 0 0 0 calc(5 * var(--fu)) #fff; background: var(--coral); }
.wl-option:has(input:checked) { border-color: var(--coral); background: #fff7f4; }
.wl-icons { display: flex; gap: calc(2 * var(--fu)); margin-left: calc(10 * var(--fu)); }
.wl-icons svg { width: calc(30 * var(--fu)); height: calc(30 * var(--fu)); }
.wl-consent { position: relative; display: flex; align-items: center; gap: calc(12 * var(--fu)); margin: calc(18 * var(--fu)) 0 0; font-size: calc(15 * var(--fu)) !important; letter-spacing: calc(-.2 * var(--fu)); white-space: nowrap; font-weight: 600; cursor: pointer; }
.wl-check { width: calc(30 * var(--fu)); height: calc(29 * var(--fu)); border: calc(1.5 * var(--fu)) solid #d7d1c8; border-radius: calc(6 * var(--fu)); background: #fff; flex: none; position: relative; }
.wl-consent input:checked + .wl-check { background: var(--coral); border-color: var(--coral); }
.wl-consent input:checked + .wl-check::after {
  content: ""; position: absolute; left: 32%; top: 14%; width: 26%; height: 50%;
  border: solid #fff; border-width: 0 calc(3 * var(--fu)) calc(3 * var(--fu)) 0; transform: rotate(45deg);
}
.wl-submit {
  display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--fu));
  width: 100%; height: calc(58 * var(--fu)); margin-top: calc(20 * var(--fu)); border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(#fb7b65, #f25e4d); color: #fff; box-shadow: 0 calc(4 * var(--fu)) 0 rgba(200, 70, 50, .18);
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: calc(25 * var(--fu)) !important;
}
.wl-submit svg { width: calc(15 * var(--fu)); height: calc(18 * var(--fu)); }
.wl-submit:hover { filter: brightness(1.04); }
.wl-submit:disabled { opacity: .7; cursor: default; }
.wl-status { margin: calc(8 * var(--fu)) 0 0; min-height: 0; text-align: center; font-size: calc(15 * var(--fu)) !important; font-weight: 700; }
.wl-status:empty { display: none; }
.wl-status[data-kind="error"] { color: var(--coral-deep); }
.wl-status[data-kind="ok"] { color: #3c8a3c; }
.wl-small { margin: calc(12 * var(--fu)) 0 0; text-align: center; font-size: calc(15 * var(--fu)) !important; color: #4a4f5c; }
.wl-small + .wl-small { margin-top: calc(8 * var(--fu)); }
.wl-small a { color: #1b1e2a; }
.wl-card.done .wl-input, .wl-card.done .wl-devices, .wl-card.done .wl-consent, .wl-card.done .wl-submit { opacity: .45; pointer-events: none; }
.wl-plain { max-width: 428px; margin: 40px auto 60px; }
.wl-mobile { max-width: 428px; margin: 8px auto 18px; padding: 0 12px; }
.wl-mobile .wl-card { min-height: 0; }

/* ------------------------------------------------------------ brand and header
   The header pill is live on every page, over the plate's baked one: the real
   app icon as a rounded tile, the wordmark set in Fredoka, the nav and the
   Play Demo button. Sizes in mockup px (--mu). */

.hdr {
  position: absolute; z-index: 4; border-radius: 999px;
  background: rgba(255, 254, 251, .97);
  box-shadow: 0 calc(3 * var(--mu)) calc(14 * var(--mu)) rgba(120, 80, 40, .10);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; color: #111; }
.brand .icon {
  display: block; border-radius: 23%;
  box-shadow: 0 0 0 1px #efe6d8, 0 2px 6px rgba(150, 90, 40, .18);
}
.brand .wordmark {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: "Fredoka", sans-serif; font-weight: 700; color: #111; -webkit-text-stroke: .045em #111; letter-spacing: -.01em;
}
.brand .paw { display: block; height: auto; }
.hdr .brand { position: absolute; left: calc(32 * var(--mu)); top: 0; bottom: 0; gap: calc(14 * var(--mu)); }
.hdr .brand .icon { width: calc(43 * var(--mu)); height: calc(43 * var(--mu)); box-shadow: 0 0 0 calc(1 * var(--mu)) #efe6d8, 0 calc(2 * var(--mu)) calc(6 * var(--mu)) rgba(150, 90, 40, .18); }
/* The game's own title art (assets/wordmark.webp, 800 x 96). */
.brand img.wordmark { display: block; height: auto; }
/* The same size as the phone header's title (172 px) at the 1024 px design width. */
.hdr .brand img.wordmark { width: calc(172 * var(--mu)); }
.hdr .nav-links { left: calc(394 * var(--mu)); top: 0; width: calc(312 * var(--mu)); height: 100%; }
.hdr-play {
  position: absolute; left: calc(732 * var(--mu)); top: calc(9 * var(--mu));
  width: calc(167 * var(--mu)); height: calc(41 * var(--mu)); border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: calc(9 * var(--mu));
  background: linear-gradient(#fb7b65, #f25e4d); color: #fff; text-decoration: none;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: calc(17.5 * var(--mu));
  box-shadow: 0 calc(2 * var(--mu)) calc(5 * var(--mu)) rgba(200, 70, 50, .22);
}
.hdr-play svg { width: calc(11 * var(--mu)); height: calc(13 * var(--mu)); }
.hdr-play:hover { filter: brightness(1.05); }
.hdr-play:focus-visible, .brand:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* The footer logo on a plate, on a patch of the footer's own cream. */
/* Feathered, so it melts into the footer's gradient instead of showing as a box. */
.flogo-patch { position: absolute; z-index: 3; border-radius: calc(14 * var(--mu)); box-shadow: 0 0 calc(var(--feather) * 1.6 * var(--mu)) calc(var(--feather) * var(--mu)) var(--patch); }
.flogo { position: absolute; z-index: 4; display: flex; align-items: center; }
.flogo .brand { height: 100%; gap: calc(var(--fs) * .3 * var(--mu)); }
.flogo .brand .icon { width: calc(var(--fs) * var(--mu)); height: calc(var(--fs) * var(--mu)); }
.flogo .brand img.wordmark { width: calc(var(--fs) * 7.3 * var(--mu)); }

/* Phone header and footers: the same mark in px. */
.m-header .brand { gap: 9px; margin-right: auto; }
.m-header .brand .icon { width: 36px; height: 36px; }
.m-header .brand img.wordmark { width: min(172px, calc(100vw - 244px)); }
.m-footer .brand { gap: 8px; }
.m-footer .brand .icon { width: 28px; height: 28px; }
.m-footer .brand img.wordmark { width: 140px; }

/* ------------------------------------------------------------ phone layout
   Each page as one fluid page: live type, soft-edged art from the mockups,
   sections joined by waves. */

.m-page { max-width: 560px; margin: 0 auto; overflow: hidden; }
.m-sec { position: relative; padding: 8px 16px 34px; text-align: center; color: var(--ink); }
.m-hero {
  padding: 26px 16px 0;
  background: radial-gradient(120% 70% at 50% 0%, #fff1dc 0%, #fdeedd 35%, var(--paper) 75%);
}
.m-wave { display: block; width: 100%; height: 30px; margin: -1px 0 -1px; }
.m-wave.flip { transform: scaleY(-1); }
.m-coral { background: linear-gradient(90deg, #f7836f, #f4a08b); }

.m-wordmark {
  display: block; margin: 0 0 10px;
  font-family: "Fredoka", sans-serif; font-weight: 700; font-size: clamp(38px, 12vw, 54px); line-height: 1;
  color: #1d2029; letter-spacing: -.01em;
}
.m-wordmark span { white-space: nowrap; }
.m-wordmark img { width: .42em; margin-left: .06em; vertical-align: .1em; }
/* Phone titles: Fredoka without the desktop mockups' extra outline. */
.m-h1, .m-h2 {
  margin: 0 0 10px; font-family: "Fredoka", sans-serif; font-weight: 700; color: #1d2029; line-height: 1.1;
  letter-spacing: -.01em;
}
.m-h2 { font-weight: 600; }
.m-h1 { font-size: clamp(32px, 9.6vw, 44px); }
.m-h2 { font-size: clamp(24px, 7vw, 32px); }
.m-h1 .m-paw, .m-h2 .m-paw { width: .7em; vertical-align: middle; margin: 0 .2em; -webkit-text-stroke: 0; }
.m-p { margin: 0 auto 12px; max-width: 34em; font-size: 16px; line-height: 1.5; color: var(--text); }
.m-lead { font-size: 19px; font-weight: 600; color: var(--navy); }
.m-soft { font-size: 15px; color: var(--soft); }
.m-hero .m-soft { margin-top: -6px; }

.m-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 18px 0 16px; }
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 230px; padding: 13px 26px; border-radius: 999px; text-decoration: none;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 20px;
}
.m-btn svg { width: 12px; height: 14px; }
.m-btn.coral { background: linear-gradient(#fb7b65, #f25e4d); color: #fff; box-shadow: 0 4px 0 rgba(200, 70, 50, .18); }
.m-btn.cream { background: #fffdf8; color: #1b1e2a; border: 1px solid #efe7db; box-shadow: 0 3px 10px rgba(120, 80, 40, .08); }
.m-btn.white { background: #fff; color: #1b1e2a; box-shadow: 0 4px 12px rgba(170, 60, 40, .18); }
.m-btn.white-soft { background: rgba(255, 255, 255, .85); color: #1b1e2a; }
.m-btn.white svg path, .m-btn.cream svg path { fill: #f25e4d; }
.m-btn span { font-size: 26px; line-height: 0; }

.m-badges { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 4px 0 6px; color: #3b4152; }
.m-badges i { width: 1px; height: 30px; background: #d9d2c7; }
.m-badge { display: flex; align-items: center; gap: 8px; text-align: left; line-height: 1.15; }
.m-badge svg { width: 24px; height: 24px; }
.m-badge small { display: block; font-size: 11px; color: var(--soft); }
.m-badge b { font-size: 14px; font-weight: 700; }

.m-art { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.m-bleed { width: calc(100% + 32px); max-width: none; margin: 10px -16px 0; }
.m-sleepy { width: 82%; margin: 8px auto 4px; }
.m-board { width: 88%; margin-top: 12px; }
.m-board-cat { width: 90%; margin-top: 12px; }
.m-blob { width: 100%; margin-bottom: 6px; }

.m-worlds { display: grid; gap: 18px; margin-top: 18px; }
.m-world { display: block; text-decoration: none; color: var(--ink); }
.m-world .m-art { width: 100%; }
.m-world b { display: block; margin-top: 2px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 22px; }
.m-world span { display: block; font-size: 15px; color: var(--soft); }

.m-steps { display: grid; gap: 14px; margin: 14px 0 6px; text-align: left; }
.m-step { display: grid; grid-template-columns: 42px 110px 1fr; align-items: center; gap: 8px; }
.m-num {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(#fb7b65, #ef5a48); color: #fff; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 18px;
}
.m-step .m-art { width: 110px; }
.m-step > div b { display: block; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 19px; color: #111; }
.m-step > div span { display: block; font-size: 14.5px; line-height: 1.4; color: var(--text); }
.m-world-sec .m-num { margin: -18px auto 6px; position: relative; }
.m-num.playhouse { background: linear-gradient(#78aee8, #5a92d6); }
.m-num.woodland { background: linear-gradient(#8cc56d, #6aad4c); }
.m-anchor { position: absolute; top: -70px; }

/* The official trailer's card: shared by the mobile section (.m-trailer) and
   the live desktop section (.lg) it sits between, spliced into the plate
   crop. Its thumbnail loads from YouTube's own CDN, never baked. */
.trailer-card { position: relative; display: block; overflow: hidden; border-radius: 20px; box-shadow: 0 16px 40px -16px rgba(30, 20, 10, .3); }
.trailer-card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #e7ddc8; }
.trailer-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(10, 8, 6, .42) 100%); }
.trailer-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 999px; background: rgba(255, 255, 255, .95);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
.trailer-play svg { width: 20px; height: 23px; }
.trailer-card:hover .trailer-play, .trailer-card:focus-visible .trailer-play { transform: translate(-50%, -50%) scale(1.06); }
.trailer-badge { position: absolute; right: 14px; top: 14px; background: rgba(12, 14, 20, .65); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
/* The card, once clicked: an inline embed in the same box (site.js). */
.trailer-embed { display: block; width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 20px; box-shadow: 0 16px 40px -16px rgba(30, 20, 10, .3); background: #000; }
.trailer-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 15px; color: var(--coral-deep); text-decoration: none; }
.trailer-link span { font-size: 20px; line-height: 0; }
.m-trailer { margin-top: 6px; }

/* Desktop only: the live section between the home plate's two crops. */
.trailer-sec { background: #eef4e6; text-align: center; padding: 6px 64px 70px; }
.trailer-sec h2 { margin: 0; display: flex; align-items: center; justify-content: center; gap: 14px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 36px; color: var(--ink); }
.trailer-sec h2 img { width: 30px; }
.trailer-sec p { margin: 10px 0 0; font-size: 17px; color: var(--soft); }
.trailer-sec .trailer-card.lg, .trailer-sec .trailer-embed.lg { width: 760px; max-width: 100%; margin: 28px auto 0; }
.trailer-sec .trailer-card.lg .trailer-play { width: 84px; height: 84px; }
.trailer-sec .trailer-card.lg .trailer-play svg { width: 28px; height: 32px; }
.trailer-sec .trailer-link { font-size: 16px; }

.m-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.m-tool .m-art { width: 64px; }
.m-tool b { display: block; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 18px; color: #111; }
.m-tool span { display: block; font-size: 13px; line-height: 1.35; color: var(--text); }

.m-form { container-type: inline-size; max-width: 428px; margin: 6px auto 26px; padding: 0 12px; }

/* ------------------------------------------------------------ the Play page
   The game sized to the screen, so it plays without scrolling. */

.play-page { background: var(--paper) url("/assets/m/play-bg.webp") center / cover fixed no-repeat; --hdr: calc(min(100vw, 1229px) * 94 / 1024); }
.play-page .desktop { max-width: 1229px; }
.play-page .m-footer { display: flex; }
.hdr-strip { position: relative; container-type: inline-size; }
.play-stage { display: flex; justify-content: center; align-items: flex-start; gap: 28px; padding: 0 16px 12px; }
.play-main { position: relative; display: flex; flex-direction: column; align-items: center; }
.play-card {
  padding: 10px; border-radius: 26px; background: rgba(253, 250, 243, .96);
  box-shadow: 0 10px 30px rgba(120, 80, 40, .14); border: 1px solid #f0e7da;
}
.play-card .game-slot {
  position: relative; --gh: clamp(420px, calc(100svh - var(--hdr) - 184px), 1100px);
  height: var(--gh); width: min(calc(var(--gh) * 390 / 693), calc(100vw - 52px));
}
.play-fs {
  position: static; order: 3; margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 16px; border-radius: 999px; border: 1px solid #efe7db; background: #fffdf8; color: #1b1e2a;
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 3px 10px rgba(120, 80, 40, .08);
}
.play-fs svg { width: 15px; height: 15px; }
.play-hint { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; color: var(--navy); font-size: 14px; line-height: 1.35; text-align: left; }
.play-hint img { width: 26px; }
.play-side {
  width: 240px; margin-top: 0; padding: 12px 14px 18px; border-radius: 24px; text-align: center; color: var(--ink);
  background: rgba(253, 250, 243, .96); border: 1px solid #f0e7da; box-shadow: 0 10px 30px rgba(120, 80, 40, .12);
}
.play-side-cat { width: 100%; border-radius: 16px; }
.play-side h2 { margin: 8px 0 6px; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 27px; line-height: 1.05; -webkit-text-stroke: .04em #111; color: #111; }
@media (max-width: 759px) { .play-side h2 { -webkit-text-stroke: 0; color: #1d2029; } }
.play-side p { margin: 0 0 12px; color: #3a6ea8; font-size: 16px; line-height: 1.35; }
.play-side .m-badges { flex-direction: column; gap: 10px; margin-bottom: 14px; }
.play-side .m-badges i { width: 70%; height: 1px; }
.play-side .m-btn { min-width: 0; width: 100%; font-size: 18px; padding: 11px 16px; }
.play-page .sr + .game-frame, .play-page .game-frame { border-radius: 18px; }

/* Desktop: the game sits in the middle of the page and the waitlist card to its
   right; the empty left column mirrors the card's width (Full screen sits in it). */
@media (min-width: 900px) {
  .play-stage { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; }
  .play-main { grid-column: 2; }
  .play-side { grid-column: 3; justify-self: start; }
  .play-card .game-slot { width: min(calc(var(--gh) * 390 / 693), calc(100vw - 2 * (240px + 28px + 16px) - 22px)); }
}

@media (max-width: 899px) {
  .play-stage { flex-direction: column; align-items: center; gap: 18px; }
  .play-fs { position: static; order: 3; margin-top: 10px; }
  .play-side { width: min(360px, 100%); margin: 0 auto 24px; }
}

/* ------------------------------------------------------------ phones */

@media (max-width: 759px) {
  .play-page { --hdr: 58px; background-attachment: scroll; }
  .play-stage { padding-top: 10px; }
  .play-card { padding: 6px; border-radius: 20px; }
  .play-card .game-slot { --gh: clamp(380px, calc(100svh - 58px - 222px), 900px); width: min(calc(var(--gh) * 390 / 693), calc(100vw - 44px)); }
}

/* Home's short How to Play: art, step number and one line each. */
.m-steps-short .m-step { grid-template-columns: 110px 1fr; }
.m-steps-short .m-step b { color: #ef5a48; font-size: 16px; }
.m-how .m-btn { margin-top: 8px; }


/* Home: measured player interior in the approved 1024 x 1536 mockup.
   Its enclosing crop is 1478px tall because the existing footer is separate. */
.home-trailer {
  position: absolute; left: 43.75%; top: 6.9689%; width: 49.8047%; height: 22.7334%;
  overflow: hidden; border-radius: calc(22 * var(--mu)); background: #171710;
}
.home-trailer .trailer-card, .home-trailer .trailer-embed {
  width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border: 0;
  border-radius: 0; box-shadow: none;
}
.home-trailer .trailer-card > img { width: 100%; height: 100%; object-fit: cover; }
.home-trailer .trailer-badge { display: none; }
.home-trailer .trailer-play { width: calc(88 * var(--mu)); height: calc(88 * var(--mu)); }
.home-trailer-label {
  position: absolute; right: calc(10 * var(--mu)); top: calc(8 * var(--mu));
  padding: calc(6 * var(--mu)) calc(12 * var(--mu)); border-radius: 999px;
  background: #fffaf0; color: var(--ink); font-size: calc(13 * var(--mu)); font-weight: 800;
  pointer-events: none;
}
.home-trailer:has(.trailer-embed) .home-trailer-label { display: none; }
.home-trailer .trailer-card:focus-visible { outline-offset: -4px; }
.m-hero-trailer { margin: 22px auto 14px; max-width: 480px; }
.m-hero-trailer .m-p { margin-top: 10px; font-size: 14px; }


/* Searchable guides share the established cream cards and illustration palette. */
.guide-page .desktop { max-width: 1229px; }
.guide-page .m-footer { display: flex; }
.guide-content { padding-top: 28px; }
.guide-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.guide-steps > div { padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; }
.guide-step-art { height: 130px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.guide-steps img { width: 160px; height: auto; display: block; }
.guide-steps h2 { font-size: 23px; }
.world-jump { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 560px; margin: 24px 0 32px; padding: 6px; border: 1px solid var(--line); border-radius: 20px; background: #f1e9dd; }
.world-jump a { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 8px; border: 1px solid #e4d8c8; border-radius: 14px; background: var(--card); color: var(--navy); font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 3px rgba(60, 40, 20, .05); }
@media (max-width: 759px) { .world-jump { gap: 4px; padding: 4px; } .world-jump a { font-size: 13px; padding: 10px 4px; } }
.world-detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: 36px; padding: 32px 0; border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.world-detail img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
#beginner-tips { scroll-margin-top: 84px; }
@media (max-width: 759px) {
  .guide-steps, .world-detail { grid-template-columns: 1fr; gap: 20px; }
  .world-detail img { max-width: 330px; margin: auto; }
  .guide-steps img { width: 180px; }
}

/* Illustrated, readable SEO sections. Artwork uses the site's existing approved assets. */
.page-home .home-story { max-width: none; margin: 0; padding: 0; }
.home-story-intro { max-width: 790px; margin: 0 auto; padding: 78px 28px 68px; text-align: center; }
.home-story-intro h1 { max-width: none; font-size: clamp(34px, 4vw, 51px); }
.home-story-intro .game-info-lead { max-width: 720px; margin: 0 auto; font-size: 19px; }
.home-story-features { padding: 70px 32px; background: #eef4e6; }
.story-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 24px; max-width: 1120px; margin: 0 auto 25px; }
.story-feature:last-child { margin-bottom: 0; }
.story-feature-reverse .story-art { order: 2; }
.story-art { display: grid; place-items: center; min-height: 350px; overflow: hidden; border-radius: 28px; }
.story-art-sage { background: radial-gradient(circle at 25% 80%, #fff5e5 0 12%, transparent 12.5%), linear-gradient(145deg, #e1f1e9, #bdddc8); }
.story-art-peach { background: radial-gradient(circle at 75% 85%, #fff5e5 0 16%, transparent 16.5%), linear-gradient(145deg, #ffe9d7, #f6c8b9); }
.story-art img { display: block; width: min(82%, 390px); max-height: 310px; object-fit: contain; filter: drop-shadow(0 14px 15px rgba(65, 55, 40, .13)); }
.story-art-peach img { width: min(76%, 310px); }
.story-art-sage img { width: min(94%, 485px); }
.story-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px 44px; border: 1px solid #ebe2d6; border-radius: 28px; background: #fffcf7; box-shadow: 0 9px 26px rgba(75, 54, 30, .06); }
.story-copy h2 { font-size: clamp(27px, 3vw, 37px); }
.story-copy p { margin: 0 0 16px; }
.story-copy .game-info-kicker { margin-bottom: 10px; }
.story-copy .game-info-link, .story-copy .game-info-button { margin-top: 7px; }
.home-worlds { padding: 78px 32px 82px; text-align: center; }
.home-worlds > p:not(.game-info-kicker) { max-width: 780px; margin: 0 auto 28px; }
.home-worlds h2 { font-size: clamp(28px, 3vw, 39px); }
.home-world-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1120px; margin: 0 auto 27px; }
.home-world-cards a { display: block; min-width: 0; overflow: hidden; border: 1px solid #ebe2d6; border-radius: 25px; background: #fffcf7; box-shadow: 0 7px 19px rgba(75, 54, 30, .07); text-align: left; text-decoration: none; }
.home-world-cards a:focus-visible { outline-offset: 4px; }
.home-world-cards img { display: block; width: 100%; height: 225px; padding: 12px; object-fit: contain; background: #eaf2e5; }
.home-world-cards a:nth-child(2) img { background: #fae7d9; }
.home-world-cards a:nth-child(3) img { background: #dcebe1; }
.home-world-cards span { display: block; padding: 16px 22px 20px; font-family: "Fredoka", sans-serif; font-size: 24px; color: var(--navy); }
.home-story-cta { padding: 55px 24px 62px; background: #ef8472; color: white; text-align: center; }
.home-story-cta h2 { color: white; font-size: clamp(27px, 3vw, 38px); }
.home-story-cta p { margin-bottom: 20px; }
.home-story-cta .game-info-button { background: #fffdf8; color: var(--navy); }

.guide-page .guide-content { max-width: 1160px; padding: 60px 36px 80px; }
.guide-content > .game-info-kicker, .guide-content > h1, .guide-content > .game-info-lead { text-align: center; margin-left: auto; margin-right: auto; }
.guide-content > h1 { max-width: 800px; font-size: clamp(34px, 4vw, 50px); }
.guide-content > .game-info-lead { max-width: 730px; font-size: 19px; }
.how-layout > .game-info-button { display: table; margin: 0 auto; }
.how-layout .guide-steps { gap: 18px; margin: 46px 0 55px; }
.how-layout .guide-steps > div { overflow: hidden; padding: 0 26px 28px; background: #fffcf7; border-radius: 27px; box-shadow: 0 8px 24px rgba(75, 54, 30, .07); }
.how-layout .guide-step-art { height: 190px; margin: 0 -26px 24px; background: #e7f1e5; }
.how-layout .guide-steps > div:nth-child(2) .guide-step-art { background: #f9e8d9; }
.how-layout .guide-steps > div:nth-child(3) .guide-step-art { background: #e4efe8; }
.how-layout .guide-steps img { width: min(86%, 260px); max-height: 170px; object-fit: contain; }
.how-layout .guide-steps h2 { font-size: 23px; }
.how-layout .guide-steps p { margin-bottom: 0; font-size: 16px; }
.how-layout .game-info-more { margin: 28px 0; padding: 32px 38px; border: 0; border-radius: 27px; background: #eef4e6; }
.how-layout .game-info-more + .game-info-more { background: #fae9df; }
.how-layout .game-info-more .game-info-grid > div { background: #fffcf7; }
.how-layout > p:last-child { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 36px; }

.worlds-layout .world-jump { display: flex; justify-content: center; max-width: none; gap: 10px; margin: 0 auto 45px; padding: 0; background: none; border: 0; }
.worlds-layout .world-jump a { min-width: 145px; border-radius: 999px; background: #fffcf7; }
.worlds-layout .world-detail { grid-template-columns: 1fr 1fr; gap: 44px; margin: 22px 0; padding: 36px 42px; border: 0; border-radius: 29px; background: #edf4e8; }
.worlds-layout .world-detail:nth-of-type(even) { background: #faeadf; }
.worlds-layout .world-detail:nth-of-type(even) img { order: 2; }
.worlds-layout .world-detail img { display: block; width: 100%; max-height: 390px; object-fit: contain; filter: drop-shadow(0 12px 13px rgba(65, 55, 40, .09)); }
.worlds-layout .world-detail h2 { font-size: clamp(28px, 3vw, 38px); }
.worlds-layout .world-detail p { margin: 0 0 17px; }
.worlds-layout .world-detail .game-info-kicker { margin-bottom: 10px; }
.worlds-layout > .game-info-more { margin-top: 45px; padding: 34px 40px; border: 0; border-radius: 27px; background: #fff1e4; }

.demo-guide { max-width: 1080px; margin-top: 34px; margin-bottom: 55px; padding: 40px; background: #eef4e6; }
.demo-guide .game-info-grid { gap: 18px; }
.demo-guide .game-info-grid > div { background: #fffcf7; box-shadow: 0 5px 18px rgba(75, 54, 30, .06); }

@media (max-width: 759px) {
  .home-story-intro { padding: 48px 22px 45px; text-align: left; }
  .home-story-intro h1 { font-size: 34px; }
  .home-story-intro .game-info-lead { font-size: 17px; }
  .home-story-features { padding: 44px 20px; }
  .story-feature { grid-template-columns: 1fr; gap: 0; margin-bottom: 24px; }
  .story-feature-reverse .story-art { order: 0; }
  .story-art { min-height: 235px; border-radius: 25px 25px 0 0; }
  .story-art img { max-height: 215px; }
  .story-copy { padding: 26px 24px 30px; border-radius: 0 0 25px 25px; }
  .story-copy h2 { font-size: 28px; }
  .home-worlds { padding: 51px 20px 58px; }
  .home-world-cards { grid-template-columns: 1fr; gap: 16px; }
  .home-world-cards img { height: 205px; }
  .home-story-cta { padding: 44px 22px 52px; }
  .guide-page .guide-content { padding: 42px 20px 60px; }
  .guide-content > .game-info-kicker, .guide-content > h1, .guide-content > .game-info-lead { text-align: left; }
  .guide-content > h1 { font-size: 34px; }
  .guide-content > .game-info-lead { font-size: 17px; }
  .how-layout > .game-info-button { margin: 0; }
  .how-layout .guide-steps { margin: 36px 0 42px; }
  .how-layout .guide-steps, .how-layout .game-info-grid { grid-template-columns: 1fr; }
  .how-layout .guide-steps > div { padding: 0 22px 26px; }
  .how-layout .guide-step-art { margin: 0 -22px 20px; }
  .how-layout .game-info-more, .worlds-layout > .game-info-more { padding: 26px 23px; }
  .worlds-layout .world-jump { gap: 5px; margin-bottom: 30px; }
  .worlds-layout .world-jump a { min-width: 0; flex: 1; font-size: 13px; padding: 9px 4px; }
  .worlds-layout .world-detail { grid-template-columns: 1fr; gap: 14px; margin: 18px 0; padding: 20px 22px 28px; }
  .worlds-layout .world-detail:nth-of-type(even) img { order: 0; }
  .worlds-layout .world-detail img { max-height: 285px; }
  .worlds-layout .world-detail h2 { font-size: 29px; }
  .demo-guide { margin: 25px 20px 42px; padding: 28px 20px; }
}