/* PurrNap layer over the imported framework. Baloo 2 is the app's own font.
   Smoothness: everything that moves is opacity/transform (GPU); nothing is drawn per frame.
   Phones: the frame takes the clip's own shape (--clip-ar), so a clip is never cropped, padded or blurred. */
@font-face { font-family: "Baloo 2"; src: url(/fonts/baloo2-latin.woff2) format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
:root {
  --page: #5aa6f5; --paper: #fbf9ff; --cream: #eee8ff; --ink: #241452; --ink2: #574b7d; --night: #22164d;
  --green: #ffad35; --green-hi: #ffd46f; --green-lo: #c86917; --green-ln: #7b3500;
  --blue: #6b43e8; --blue-hi: #9e7bff; --blue-lo: #3d218d;
  --gold: #ffc74d; --gold-ln: #7b3f00; --purple: #7e57ff; --line: #b8abec;
  --hero-fg: #241452; --hero-fg2: #4c3b79; --pill: rgba(250, 247, 255, .92);
  --plum: #3b1f78; --plum-deep: #1e0f45;
  --f-display: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  --out: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.3, 1.6, .5, 1);
  --clip-ar: 9 / 20; --ar-w: 9; --ar-h: 20;   /* the gameplay clips' own shape: FORGE's full-screen 720x1600 clips */
  --bezel: #0d0b16;
}
body { background: var(--page); font-weight: 500; }
svg.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pl, .logo, .btn, .intro-t, .pu h3, .tv-cap .t { font-family: var(--f-display); font-weight: 800; }
.pl { line-height: 1.05; letter-spacing: -.005em; }
.logo span, .pl, .pl .c, .lite .pl, .lite .logo span { background: none; filter: none; color: #ffcf45; -webkit-text-stroke: .075em #512383; paint-order: stroke fill; text-shadow: 0 .075em 0 #32145d; }
.nav, .lite .nav { background: rgba(249, 246, 255, .96); backdrop-filter: none; -webkit-backdrop-filter: none; }
.progress i { transform-origin: 0 50%; transform: scaleX(0); width: 100%; background: repeating-linear-gradient(90deg, #ffb13d 0 14px, #ff68bf 14px 28px, #8257ff 28px 42px, #4ecdf5 42px 56px, #ffe66d 56px 70px); }

/* ---- sky: five gradient layers cross-fading on the GPU ---- */
.sky { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: #5aa6f5; contain: strict; }
.sky-l, .sky-stars { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.sky-l.on { opacity: 1; }
.sky-day { background: linear-gradient(#5aa6f5, #bde7fb); }
.sky-dusk { background: linear-gradient(#3d3384, #f39a63); }
.sky-night { background: linear-gradient(#0d1836, #2d4485); }
.sky-orbit { background: linear-gradient(#070d24, #2a2f78); }
.sky-dawn { background: linear-gradient(#5c4a9a, #ffb27a); }
.sky-stars { bottom: 30%; background-image:
  radial-gradient(1.6px 1.6px at 8% 18%, #fff 60%, transparent 62%), radial-gradient(1.2px 1.2px at 22% 42%, #fff 60%, transparent 62%),
  radial-gradient(2px 2px at 37% 12%, #fff6c9 60%, transparent 62%), radial-gradient(1.3px 1.3px at 51% 33%, #fff 60%, transparent 62%),
  radial-gradient(1.7px 1.7px at 66% 9%, #fff 60%, transparent 62%), radial-gradient(1.2px 1.2px at 79% 28%, #fff 60%, transparent 62%),
  radial-gradient(1.9px 1.9px at 91% 15%, #fff6c9 60%, transparent 62%), radial-gradient(1.1px 1.1px at 14% 64%, #fff 60%, transparent 62%),
  radial-gradient(1.4px 1.4px at 45% 58%, #fff 60%, transparent 62%), radial-gradient(1.2px 1.2px at 72% 52%, #fff 60%, transparent 62%);
  background-size: 640px 420px; }
.sky.starry .sky-stars { opacity: .45; } .sky.dense .sky-stars { opacity: .95; }


/* language switch: links to /, /es/, /pt-br/ */
.langs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(36, 20, 82, .08); }
.langs a { min-width: 40px; height: 34px; display: grid; place-items: center; padding: 0 8px; border-radius: 999px; font-weight: 800; font-size: 14px; color: var(--ink2); text-decoration: none; }
.langs a[aria-current="true"] { background: var(--blue); color: #fff; }
.langs a:hover:not([aria-current="true"]) { background: rgba(36, 20, 82, .1); }
.links a.on { color: var(--blue); }

/* ---- the phone: a thin dark bezel around the clip, shaped by the clip ---- */
.phone { --pp: 7px; position: relative; display: inline-block; padding: var(--pp); border-radius: 34px; background: var(--bezel); rotate: 0deg;
  box-shadow: 0 0 0 1.5px #3b3552, inset 0 0 0 1px rgba(255, 255, 255, .07), 0 26px 50px rgba(16, 8, 48, .35); }
.phone video, .phone img { display: block; width: 100%; height: auto; aspect-ratio: var(--clip-ar); object-fit: contain; background: #120c26; border-radius: 27px; }
/* sized by height: the width follows the clip's exact ratio, so the clip fills the screen with nothing cropped */
.phone.by-h { height: var(--ph); width: calc((var(--ph) - 2 * var(--pp)) * var(--ar-w) / var(--ar-h) + 2 * var(--pp)); }
.phone.by-h video { height: 100%; width: 100%; aspect-ratio: auto; }

/* ---- hero ---- */
.hero { background: radial-gradient(circle at 73% 22%, rgba(255, 255, 255, .45), transparent 24%); }
.hero .orb { background: radial-gradient(circle, #fff9d6 0 34%, #ffd95d 35% 62%, rgba(255, 217, 93, .28) 63% 100%); }
.hero-grid { align-items: center; }
.hero-hills { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none; z-index: 0; }
.hero-hills svg { width: 100%; height: 100%; display: block; }
.lockup { --S: clamp(60px, min(9vw, 14vh), 124px); position: relative; display: inline-block; padding-top: calc(var(--S) * 1.3); margin-bottom: 18px; }
.lockup .rig { position: absolute; z-index: 0; width: calc(var(--S) * 2.25); right: calc(var(--S) * .1); top: 0; }
.word { position: relative; z-index: 1; display: block; font: 800 var(--S)/.86 var(--f-display); color: var(--plum); -webkit-text-stroke: calc(var(--S) * .13) var(--plum); paint-order: stroke fill; text-shadow: 0 calc(var(--S) * .09) 0 var(--plum-deep); }
.word::after { content: attr(data-w); position: absolute; inset: 0; -webkit-text-stroke: 0; text-shadow: none; color: transparent; background: linear-gradient(180deg, #fff3b0 10%, var(--gold) 52%, #ff9d1f 92%); -webkit-background-clip: text; background-clip: text; }
.plate { position: relative; z-index: 1; display: block; width: max-content; white-space: nowrap; margin: calc(var(--S) * .16) auto 0; font: 800 calc(var(--S) * .42)/1 var(--f-display); letter-spacing: .03em; color: #20184a; -webkit-text-stroke: .24em #20184a; paint-order: stroke fill; text-shadow: 0 .12em 0 #120c2c; }
.plate::after { content: attr(data-w); position: absolute; inset: 0; -webkit-text-stroke: 0; text-shadow: none; color: #fff; }
.hero .claim { font: 800 clamp(30px, 3.6vw, 46px)/1.08 var(--f-display); color: var(--hero-fg); margin: 6px 0 12px; max-width: 15em; }
.hero .lead { max-width: 30em; color: var(--hero-fg2); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.chips { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.store { display: inline-block; line-height: 0; border-radius: 12px; }
.store img { height: 58px; width: auto; }
.store.off { cursor: default; }
a.store { transition: transform .15s var(--out); } a.store:hover { transform: translateY(-2px); }
.hero-art { display: grid; place-items: center; position: relative; z-index: 1; }
.hero-copy { position: relative; z-index: 1; }
.hero .hero-clouds { display: none; }
.hero-art .phone { --ph: min(64vh, 600px); }

/* Momo's rig: the app's own art layers */
.rig { position: relative; aspect-ratio: 1; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.rig-body { position: absolute; inset: 0; transform-origin: 50% 88%; animation: breathe 4.8s ease-in-out infinite; will-change: transform; }
.paused .rig-body, .paused .zz { animation-play-state: paused; }

@keyframes breathe { 50% { transform: scale(1.008, 1.018); } }
.rig img { position: absolute; max-width: none; }
.rig .base { inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 14px 18px rgba(12, 8, 36, .4)); }
.eye { position: absolute; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.eye img { inset: 0; width: 100%; height: 100%; }
.eye.L { left: 50.877%; top: 34.928%; width: 14.833%; height: 12.919%; -webkit-mask-image: url(/img/eyeL_white.webp); mask-image: url(/img/eyeL_white.webp); }
.eye.R { left: 70.813%; top: 28.150%; width: 12.121%; height: 14.035%; -webkit-mask-image: url(/img/eyeR_white.webp); mask-image: url(/img/eyeR_white.webp); }
.shut { opacity: 0; }
.rig .shut, .rig .mouth { height: auto; }   /* their width/height attributes must not fix the height: they scale with their width */
.shut.L { left: 48.405%; top: 33.732%; width: 18.341%; }
.shut.R { left: 70.335%; top: 27.352%; width: 15.311%; }
.rig.asleep .shut, .rig.blink .shut { opacity: 1; }
.rig.asleep .eye, .rig.blink .eye { opacity: 0; }
.rig .mouth { left: 61.882%; top: 42.026%; width: 17.065%; opacity: 0; }
.rig.mo .mouth { opacity: 1; }
.zz { position: absolute; left: 84%; top: 4%; font: 800 24px/1 var(--f-display); color: #e4deff; opacity: 0; pointer-events: none; }
.zz.b { left: 89%; top: -1%; font-size: 18px; } .zz.c { left: 93%; top: -6%; font-size: 14px; }
.rig.asleep .zz { animation: zz 4.4s ease-in-out infinite; }
.rig.asleep .zz.b { animation-delay: 1.45s; } .rig.asleep .zz.c { animation-delay: 2.9s; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 8px); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(18px, -46px); } }
.heart { position: absolute; left: 60%; top: 2%; width: 28px; height: 28px; opacity: 0; pointer-events: none; }
.heart.go { animation: heart 1s var(--out); }
@keyframes heart { 0% { opacity: 0; transform: translateY(10px) scale(.5); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(10px, -56px); } }

/* ---- ribbon: game names with the app's Records icons, CSS marquee ---- */
.rb-run { display: flex; align-items: center; }

/* ---- trailer: a dark stage with the phone in the middle ---- */
.tv-scr { background: radial-gradient(circle at 50% 45%, #3b2a7a, #160f33 70%); height: clamp(480px, 74vh, 660px); }
.tv-fg { position: absolute; top: 50%; left: 50%; translate: -50% -50%; height: calc(100% - 36px); width: auto; aspect-ratio: var(--clip-ar); object-fit: contain;
  border: 8px solid var(--bezel); border-radius: 34px; background: #120c26; box-shadow: 0 0 0 1.5px #3b3552, 0 24px 50px rgba(0, 0, 0, .45); }
.tv-ch b { width: 100% !important; transform-origin: 0 50%; transform: scaleX(0); }
.tv-ch b.done { transform: scaleX(1); }
.tv-ch b.run { animation: tvfill var(--cap, 6000ms) linear forwards; }
@keyframes tvfill { to { transform: scaleX(1); } }
.tv-rail { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.soc svg { width: 30px; height: 30px; flex: none; }
.soc { text-decoration: none; }

/* ---- shelves: a native swipe/scroll carousel; the phone is sized by the panel's height, so it always fits ---- */
.shelves { padding: 96px 0 72px; }
.sh-head { margin-bottom: 26px; }
.sh-head .lede { max-width: 38em; }
.sh-track { --pad: max(24px, calc((100vw - 1180px) / 2)); display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  padding: 8px var(--pad) 26px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sh-track::-webkit-scrollbar { display: none; }
.sh-panel { --H: clamp(440px, 64vh, 560px); flex: none; width: min(960px, 84vw); height: var(--H); scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px;
  padding: 32px 44px; border-radius: 32px; background: rgba(251, 249, 255, .96); box-shadow: 0 10px 0 rgba(36, 20, 82, .18); overflow: hidden; }
.sh-phone .phone { --ph: calc(var(--H) - 64px); }
.sh-text .tag { display: inline-flex; gap: 8px; align-items: center; padding: 4px 14px; border-radius: 999px; background: var(--night); color: #fff; font-weight: 800; }
.sh-text .tag b { color: var(--gold); }
.sh-text h3 { font: 800 clamp(30px, 3.4vw, 46px)/1.06 var(--f-display); color: var(--ink); margin: 16px 0 18px; }
.sh-games { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sh-panel .sh-games li { padding: 7px 15px; border-radius: 999px; background: #ece6ff; color: var(--ink); font-weight: 800; font-size: 16px; line-height: 1.2; box-shadow: inset 0 -2px 0 rgba(36, 20, 82, .1); }
.sh-panel .sh-games li.more { background: transparent; box-shadow: none; color: var(--ink2); }
.sh-ui { display: flex; align-items: center; gap: 16px; }
.sh-arr { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: rgba(251, 249, 255, .96); box-shadow: 0 4px 0 rgba(36, 20, 82, .25); transition: transform .12s, opacity .2s; }
.sh-arr svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sh-arr:active { transform: translateY(3px); }
.sh-arr:disabled { opacity: .35; cursor: default; }
.sh-rail { flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.sh-rail i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffb13d, #ff68bf, #8257ff); transform-origin: 0 50%; transform: scaleX(.04); }

/* ---- features ---- */
.pu { cursor: default; }
.pu img { width: 76px; height: 76px; border-radius: 20px; margin-bottom: 12px; display: inline-block; }
.pu h3 { font-size: 22px; letter-spacing: 0; }
.pu:hover { transform: translateY(-4px); }
.pu:hover svg { transform: none; }

/* ---- explorer ---- */
.gx { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; padding: 28px; border-radius: 32px; background: rgba(251, 249, 255, .96); box-shadow: 0 10px 0 rgba(36, 20, 82, .16); }
.gx-stage { display: grid; gap: 18px; width: 260px; align-content: start; }
.gx-stage .phone { width: 100%; }
.gx-info h3 { font: 800 30px/1.1 var(--f-display); color: var(--ink); margin: 8px 0 6px; }
.gx-info p { color: var(--ink2); margin: 0 0 14px; min-height: 3.1em; }
.gx-shelf { display: inline-block; padding: 3px 12px; border-radius: 999px; font-weight: 800; font-size: 14px; color: #fff; background: var(--blue); }
.gx-shelf.sh-puzzle { background: #6b43e8; } .gx-shelf.sh-brain { background: #2f7be0; } .gx-shelf.sh-board { background: #e0662f; } .gx-shelf.sh-arcade { background: #d6249f; }
.ytb { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ytb svg { width: 24px; height: 24px; }
.ytb[hidden] { display: none; }
.gx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gx-chips button { border: 0; cursor: pointer; padding: 7px 14px; border-radius: 999px; background: var(--cream); color: var(--ink); font-weight: 800; }
.gx-chips button b { opacity: .55; margin-left: 2px; }
.gx-chips button[aria-pressed="true"] { background: var(--night); color: #fff; }
.gx-grid { list-style: none; padding: 6px; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; max-height: 520px; overflow: auto; overscroll-behavior: contain; }
.gx-grid li[hidden] { display: none; }
.gx-tile { position: relative; width: 100%; border: 0; padding: 0; border-radius: 15px; overflow: hidden; cursor: pointer; background: #2c1b62; box-shadow: 0 5px 0 #1b103d; transition: transform .12s; }
.gx-tile img { width: 100%; height: auto; aspect-ratio: 360 / 494; object-fit: cover; display: block; }
.gx-tile:hover { transform: translateY(-3px); }
.gx-tile[aria-pressed="true"] { outline: 3px solid var(--gold); outline-offset: 2px; }
.gx-tile.lit { outline: 3px solid #ff68bf; outline-offset: 2px; transform: translateY(-4px); }

/* ---- get ---- */
.get { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 34px; align-items: center; padding: 34px; }
.get-icon { width: 128px; height: 128px; border-radius: 30px; box-shadow: 0 8px 0 rgba(36, 20, 82, .2); }
.get-main .lede { margin: 6px 0 18px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 20px 0 0; }
.facts div { display: flex; flex-direction: column; }
.facts dt { font-size: 14px; color: var(--ink2); font-weight: 700; }
.facts dd { margin: 0; font-weight: 800; color: var(--ink); }
.ticket { display: flex; gap: 14px; align-items: center; max-width: 300px; padding: 14px; border-radius: 22px; background: var(--cream); }
.ticket img { width: 110px; height: 110px; border-radius: 12px; background: #fff; }
.ticket span { display: block; font-size: 15px; color: var(--ink2); }

/* ---- Ask Momo ---- */
.faq-grid { display: grid; grid-template-columns: minmax(200px, 340px) minmax(0, 1fr); gap: 40px; align-items: start; }
.faq-momo { position: sticky; top: 96px; }
.faq-momo .rig { width: 100%; }
.sec-head.left { text-align: left; margin-left: 0; }
.qas { display: grid; gap: 10px; }
.qa { border-radius: 18px; background: rgba(251, 249, 255, .96); box-shadow: 0 5px 0 rgba(36, 20, 82, .14); }
.qa summary { cursor: pointer; list-style: none; padding: 16px 52px 16px 20px; font-weight: 800; font-size: 18px; color: var(--ink); position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 18px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--cream); font-weight: 800; transition: rotate .2s var(--out); }
.qa[open] summary::after { rotate: 45deg; background: var(--gold); }
.qa p { margin: 0; padding: 0 20px 18px; color: var(--ink2); }
.ask-more { margin: 18px 0 0; font-weight: 600; color: #fff; }
.mail { font-weight: 800; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgba(127, 110, 200, .5); }
.mail:hover { text-decoration-color: currentColor; }
.studio { display: flex; gap: 18px; align-items: center; margin-top: 22px; padding: 18px; }
.studio img { width: 72px; height: auto; border-radius: 16px; flex: none; }
.studio b { color: var(--ink); }
.studio p { margin: 4px 0 0; color: var(--ink2); }
.studio .mail { color: var(--ink); }

/* ---- closing + footer ---- */
.closing .ctas { justify-content: center; }
.close-socs { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.close-socs a, .foot-socs a { width: 46px; height: 46px; display: inline-grid; place-items: center; border-radius: 50%; background: rgba(251, 249, 255, .96); box-shadow: 0 4px 0 rgba(36, 20, 82, .2); }
.close-socs svg, .foot-socs svg { width: 24px; height: 24px; }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
footer .mm { width: 44px; height: auto; border-radius: 10px; }
footer a { font-weight: 700; }
.foot-socs { display: inline-flex; gap: 8px; margin-left: auto; }
footer .legal { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; opacity: .8; }

/* ---- final-check fixes: reading, touch, anchors ---- */
section[id] { scroll-margin-top: 76px; }
h1, h2, h3 { text-wrap: balance; } p, li, dd { text-wrap: pretty; }
a, button, summary, .rig { touch-action: manipulation; }
.tool, .langs a, .tv-pp { position: relative; }
.langs a::after, .tool::after, .tv-pp::after { content: ""; position: absolute; inset: -5px -2px; }
.tv-ch { padding-block: 18px 10px; }
.gx-chips button { min-height: 44px; }
.ytb { min-height: 44px; }
.tv-bar small { font-size: 14px; } .soc small { font-size: 13.5px; }
.segui { padding: 20px 24px; border-radius: 24px; background: rgba(251, 249, 255, .96); box-shadow: 0 8px 0 rgba(36, 20, 82, .16); }
.segui h3 { color: var(--ink); font-weight: 800; } .segui p { color: var(--ink2); }
.soc { color: var(--ink); text-shadow: none; } .soc small { color: var(--ink2); opacity: 1; }
.ask-more { display: inline-block; padding: 10px 16px; border-radius: 14px; background: rgba(251, 249, 255, .96); color: var(--ink); box-shadow: 0 4px 0 rgba(36, 20, 82, .14); }
.ask-more .mail { color: var(--ink); }
.hero-note { margin: 12px 0 0; font-weight: 700; font-size: 15px; color: var(--hero-fg2); }
video[data-clip] { cursor: pointer; }
.err404 { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 40px 20px; }
.err404 .rig { width: min(280px, 60vw); margin: 0 auto 10px; cursor: default; }
.err404 h1 { font: 800 clamp(34px, 6vw, 56px)/1.05 var(--f-display); }
.err404 p { margin: 10px auto 22px; max-width: 26em; color: var(--ink); font-weight: 600; background: rgba(251, 249, 255, .96); padding: 10px 16px; border-radius: 14px; display: inline-block; }

/* ---- phones ---- */
@media (max-width: 899px) {
  .shelves { padding: 72px 0 48px; }
  .sh-panel { --H: auto; width: 84vw; height: auto; scroll-snap-align: center; grid-template-columns: 1fr; gap: 16px; padding: 22px 20px; align-content: start; }
  .sh-phone { display: grid; place-items: center; }
  .sh-phone .phone { --ph: min(52vh, 380px); --pp: 6px; border-radius: 26px; }
  .sh-phone .phone video { border-radius: 20px; }
  .sh-text h3 { font-size: 26px; margin: 12px 0; }
  .sh-panel .sh-games li { font-size: 14px; padding: 5px 11px; }
  .gx { grid-template-columns: 1fr; padding: 18px; gap: 20px; }
  .gx-stage { width: auto; grid-template-columns: 46% minmax(0, 1fr); gap: 16px; align-items: center; scroll-margin-top: 80px; }
  .gx-stage .phone { --pp: 6px; border-radius: 24px; }
  .gx-info .ytb { font-size: 14px; padding: 8px 12px; }
  .hero .hero-clouds { display: none; }
  .tv-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 4px; }
  .gx-stage .phone video { border-radius: 18px; }
  .gx-info h3 { font-size: 24px; }
  .gx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 440px; }
  .get { grid-template-columns: 1fr; text-align: center; padding: 26px 20px; justify-items: center; }
  .get-icon { width: 96px; height: 96px; }
  .facts { justify-content: center; }
  .faq-grid { grid-template-columns: 1fr; gap: 10px; }
  .faq-momo { position: static; width: min(56%, 220px); margin: 0 auto -10px; }
  .foot-socs { margin-left: 0; }
}
@media (max-width: 700px) {
  .tv-cap { position: static; translate: none; width: auto; padding: 14px 4px 0; background: none; gap: 4px; }
  .tv-cap .m { display: block; color: #e9e4ff; font-size: 15px; line-height: 1.4; }
  .tv-claim { display: none; }
  .pus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pus .pu:last-child { grid-column: 1 / -1; }
  .tv-scr { height: auto; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; padding: 16px 12px 18px; overflow: visible; }
  .tv-fg { position: static; translate: none; height: min(60vh, 500px); width: auto; aspect-ratio: var(--clip-ar); border-width: 6px; border-radius: 26px; }
  .tv-cap { text-align: center; justify-items: center; }
  .hero-art .phone { --ph: min(56vh, 440px); }
  .store img { height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .rig-body, .floater { animation: none !important; }
  .rv, .pop .c, .lit .wd, .fan .pu, .pop-w, .lit-w { opacity: 1 !important; transform: none !important; transition: none !important; }
  .gx-tile, a.store, .sh-arr { transition: none; }
}

/* ==== round 3: the Topplers feel, smooth ==== */
/* intro: night */
.intro { background: radial-gradient(circle at 50% 38%, #2d4485, #0d1836 72%); }
.intro-t span { color: #ffcf45; -webkit-text-stroke: .075em #512383; paint-order: stroke fill; text-shadow: 0 .075em 0 #32145d; }

/* ribbons: Topplers' chunky bands, gold then blue, every game with its Records icon */
.ribbon-box { position: relative; z-index: 3; overflow: hidden; padding-block: 30px; pointer-events: none; }
.ribbon-box.r1 { margin-block: -26px 0; } .ribbon-box.r2 { margin-block: 6px; }
.ribbon { position: relative; width: 112%; margin-left: -6%; overflow: hidden; background: linear-gradient(#ffc94a, #ff9a1f 55%, #ed6b12); border-block: 4px solid #8c2b0d; box-shadow: 0 6px 0 #ba4512; padding-block: 12px 14px; }
.ribbon-box.r1 .ribbon { rotate: -1.8deg; }
.ribbon-box.r2 .ribbon { rotate: 1.6deg; background: linear-gradient(#9e7bff, #6b43e8 60%, #3d218d); border-color: #24125a; box-shadow: 0 6px 0 #1b0d45; }
.rb-track { display: flex; width: max-content; animation: marquee 90s linear infinite; will-change: transform; }
.ribbon[data-dir="1"] .rb-track { animation-direction: reverse; }
.ribbon.off .rb-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
.rb-run { display: flex; align-items: center; }
.rb-item { display: inline-flex; align-items: center; gap: 14px; padding: 0 30px; font: 800 clamp(26px, 3.8vw, 44px)/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: #fffbea; text-shadow: 0 3px 0 rgba(140, 43, 13, .75); white-space: nowrap; }
.r2 .rb-item { text-shadow: 0 3px 0 rgba(27, 13, 69, .85); }
.rb-item img { width: clamp(44px, 4.6vw, 64px); height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .25)); }

/* titles pop in letter by letter */
.pop .w { display: inline-block; white-space: nowrap; }
.pop .c { display: inline-block; opacity: 0; transform: translate3d(0, .55em, 0) rotate(var(--rr, -12deg)) scale(.35); }
.pop .w:nth-child(odd) .c:nth-child(odd) { --rr: 16deg; } .pop .w .c:nth-child(3n) { --rr: -22deg; }
.pop.in .c { opacity: 1; transform: none; transition: transform .72s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * 24ms + var(--d, 0ms)), opacity .25s ease calc(var(--i) * 24ms + var(--d, 0ms)); }
/* intro lines light up word by word */
.lit .wd { opacity: .22; transition: opacity .45s ease calc(var(--i) * 45ms + var(--d, 0ms) + 200ms); }
.lit.in .wd { opacity: 1; }
/* phones: the whole title springs in, the intro line fades in */
.pop-w { opacity: 0; transform: translate3d(0, 34px, 0) scale(.9) rotate(-2deg); }
.pop-w.in { opacity: 1; transform: none; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0ms), opacity .3s ease var(--d, 0ms); }
.lit-w { opacity: 0; transform: translate3d(0, 16px, 0); }
.lit-w.in { opacity: 1; transform: none; transition: opacity .5s ease calc(var(--d, 0ms) + 120ms), transform .5s var(--out) calc(var(--d, 0ms) + 120ms); }
/* cards land with a little tilt and bounce */
.rv { opacity: 0; transform: translate3d(0, 64px, 0) rotate(var(--tilt, 0deg)) scale(.94); }
.rv.in { opacity: 1; transform: none; transition: transform .8s cubic-bezier(.34, 1.45, .64, 1) var(--d, 0ms), opacity .45s ease var(--d, 0ms); }
/* feature cards fan out from a stack */
.fan .pu { transform: translate3d(var(--fx, 0), 30px, 0) rotate(var(--fr, 0deg)); opacity: 0; }
.fan .pu:nth-child(1) { --fx: 210%; --fr: -14deg; } .fan .pu:nth-child(2) { --fx: 105%; --fr: -7deg; } .fan .pu:nth-child(3) { --fx: 0%; --fr: 4deg; }
.fan .pu:nth-child(4) { --fx: -105%; --fr: 9deg; } .fan .pu:nth-child(5) { --fx: -210%; --fr: 15deg; }
.fan.in .pu { transform: none; opacity: 1; transition: transform .9s cubic-bezier(.34, 1.35, .64, 1), opacity .35s ease; }
.fan.in .pu:nth-child(2) { transition-delay: 60ms; } .fan.in .pu:nth-child(3) { transition-delay: 120ms; } .fan.in .pu:nth-child(4) { transition-delay: 180ms; } .fan.in .pu:nth-child(5) { transition-delay: 240ms; }
.fan.in .pu:hover { transform: translateY(-6px) rotate(-1.5deg); transition-delay: 0ms; }
/* phones tilt toward the cursor; buttons lean to it */
@media (hover: hover) and (pointer: fine) {
  [data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
  .btn, a.store { translate: var(--mx, 0px) var(--my, 0px); transition: translate .4s cubic-bezier(.34, 1.56, .64, 1); }
}
.hero-art, #orb { will-change: transform; }

/* the close: game objects in two balanced clusters */
.closing { position: relative; min-height: 640px; display: grid; align-content: center; }
.closing .pila { position: absolute; inset: 0; pointer-events: none; }
.floater { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: auto; transform: rotate(var(--r)); animation: bob 5.5s ease-in-out infinite alternate; filter: drop-shadow(0 8px 10px rgba(20, 8, 50, .3)); }
@keyframes bob { to { transform: translate3d(0, -14px, 0) rotate(calc(var(--r) + 5deg)); } }
.pila.off .floater { animation-play-state: paused; }

@media (max-width: 899px) {
  .ribbon-box { padding-block: 22px; }
  .rb-item { padding: 0 20px; gap: 10px; }
  .fan .pu:nth-child(n) { --fx: 0%; }
  .fan .pu:nth-child(odd) { --fr: -6deg; } .fan .pu:nth-child(even) { --fr: 6deg; }
  .closing { min-height: 0; }
  .closing .pila { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0 16px 18px; }
  .floater { position: static; width: 54px; animation: none; transform: rotate(var(--r)); }
  .floater:nth-child(n + 9) { display: none; }
}

/* spacing: tighter rhythm, no empty bands */
section { padding-block: 72px; }
#get { padding-block: 40px 56px; }
#faq { padding-top: 56px; }
.shelves { padding: 72px 0 56px; }
.sec-head { margin-bottom: 30px; }
@media (max-width: 899px) { section { padding-block: 52px; } #get { padding-block: 28px 40px; } .shelves { padding: 52px 0 40px; } }

/* ==== round 4 ==== */
/* shelves, pinned: the section height is set by script (viewport + sideways distance) */
.shelves.pin { padding: 0; }
.shelves.pin .sh-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 0; overflow: hidden; padding: 64px 0 24px; }
.shelves.pin .sh-track { overflow: visible; scroll-snap-type: none; will-change: transform; padding-bottom: 18px; }
.shelves.pin .sh-panel { scroll-snap-align: none; --H: min(520px, calc(100svh - 300px)); }
.shelves.pin .sh-head { margin-bottom: 18px; }
.shelves.pin .sh-ui { margin-top: 10px; }
.shelves.swipe .sh-track { overflow-x: auto; }
@media (max-width: 899px) {
  .shelves.pin .sh-sticky { padding: 58px 0 14px; justify-content: flex-start; }
  .shelves.pin .sh-panel { --H: auto; }
  .shelves.pin .sh-phone .phone { --ph: min(42svh, 360px); }
  .shelves.pin .sh-head .lede { display: none; }
}

/* YouTube / Instagram buttons: light pills so the logos sit on white, not on red */
.soc { background: rgba(251, 249, 255, .98); color: var(--ink); text-shadow: none; box-shadow: 0 5px 0 rgba(36, 20, 82, .2); border: 2px solid rgba(36, 20, 82, .08); padding: 11px 20px 12px 14px; }
a.soc:hover { box-shadow: 0 8px 0 rgba(36, 20, 82, .2); }
a.soc:active { box-shadow: 0 2px 0 rgba(36, 20, 82, .2); }
.soc small { color: var(--ink2); opacity: 1; }

/* no green hills: the close fades into the footer instead */
.closing::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(transparent, rgba(20, 12, 44, .35)); pointer-events: none; }

/* the block tower */
.btower { --c: 26px; position: fixed; z-index: 40; right: 18px; bottom: 0; width: calc(var(--c) * 4); pointer-events: none; display: none; }
.btower.on { display: block; }
.bt-stack { position: relative; height: calc(var(--c) * 9); }
.bt-piece { position: absolute; inset: 0; transform: translate3d(0, -110vh, 0); opacity: 0; }
.bt-piece.in { transform: none; opacity: 1; transition: transform .75s cubic-bezier(.3, 1.35, .55, 1), opacity .15s ease; }
.bt-piece i { position: absolute; left: calc(var(--x) * var(--c)); bottom: calc(var(--y) * var(--c)); width: var(--c); height: var(--c); background: var(--tile) center / 100% 100% no-repeat; }
/* Block Puzzle's own tiles, from the app */
.c-pink { --tile: url(/img/bt/pink.png); } .c-cyan { --tile: url(/img/bt/cyan.png); } .c-yellow { --tile: url(/img/bt/yellow.png); }
.c-orange { --tile: url(/img/bt/orange.png); } .c-green { --tile: url(/img/bt/green.png); }
.bt-base { height: 14px; margin: 0 -6px; border-radius: 8px 8px 0 0; background: linear-gradient(#5b4aa8, #3b2a7a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25); }
.bt-momo { position: absolute; left: calc(var(--c) * .2); bottom: calc(var(--c) * 8); width: calc(var(--c) * 2.2); height: auto; border-radius: 12px; opacity: 0; transform: translate3d(0, -30px, 0) scale(.6); }
.bt-stack.done .bt-momo { opacity: 1; transform: none; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) .7s, opacity .2s ease .7s; }
html.has-tower .progress { display: none; }
@media (max-width: 899px) { .closing { padding-bottom: 28px; } .closing .inner { padding-bottom: 0; margin-bottom: 0; } .closing::after { height: 60px; } }

.btower { transition: opacity .4s ease, transform .5s var(--out); }
.btower.away { opacity: 0; transform: translate3d(60px, 0, 0); }
.has-tower .closing .pila { right: 150px; }
.soc { font-weight: 800; }

/* landscape clips: Pool plays its table sideways in the app, so its phone turns sideways too */
.phone.land video { aspect-ratio: 20 / 9; }
.tv-fg.land { height: auto; width: min(calc(100% - 48px), 900px); aspect-ratio: 20 / 9; }
@media (max-width: 899px) { .gx-stage .phone.land { grid-column: 1 / -1; } }
@media (max-width: 700px) { .tv-fg.land { height: auto; width: 100%; } }