/* PlayMyTale staging site. Tokens from UX.md §8; look from BRAND.md v2. Light theme only (UX §0.10). */
@font-face{font-family:'Fredoka';src:url(/fonts/fredoka-var.woff2) format('woff2');font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito';src:url(/fonts/nunito-var.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --c-paper:#FBF4E8; --c-paper-2:#F4EAD8; --c-white:#FFFDF8;
  --c-ink:#1F2A44; --c-ink-2:#4A5468;
  --c-blue:#2F5DA8; --c-blue-edge:#1F427D;
  --c-red:#D8443A; --c-red-btn:#C23A31; --c-red-edge:#8E2A23; --c-red-text:#B3322A;
  --c-sun:#F4C64E; --c-sun-edge:#B8902A;
  --c-meadow:#6FA36B; --c-meadow-ink:#3F7A3B;
  --c-sky:#CFE3EE; --c-teal:#2E8C8A;
  --c-pencil:#D9CBB4; --c-field:#8A7A60; --c-stack:#E6D8BF;
  --c-night:#18202F; --c-on-night:#F3EBDD; --c-focus:#2F5DA8;
  --tint-blue:#D9E6F3; --tint-red:#F7D9D2; --tint-sun:#FAE7B0; --tint-night:#2A3448;
  --f-head:'Fredoka',ui-rounded,system-ui,sans-serif;
  --f-body:'Nunito',ui-rounded,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-7:32px;--s-8:48px;--s-9:64px;--s-10:96px;
  --r-sm:8px;--r-md:12px;--r-btn:16px;--r-card:20px;--r-modal:24px;--r-pill:999px;
  --gutter:16px; --maxw:1120px;
  --m-press:80ms ease-out; --m-fast:160ms ease-out; --m-base:240ms cubic-bezier(.2,.8,.2,1); --m-pop:250ms cubic-bezier(.3,1.6,.5,1);
  --app-h:100vh;
}
@supports (height:100dvh){:root{--app-h:100dvh}}
@media (min-width:768px){:root{--gutter:24px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--c-paper) url(/img/paper-grain.webp) repeat;color:var(--c-ink);font:400 17px/26px var(--f-body);-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
@media (min-width:768px){body{font-size:18px;line-height:28px}}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--c-blue);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--c-blue-edge)}
p{margin:0 0 var(--s-4)}
h1,h2,h3,h4{margin:0;font-weight:600}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.i{width:24px;height:24px;flex:none}

.wrap{width:100%;max-width:calc(var(--maxw) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:calc(640px + 2*var(--gutter))}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--c-ink);color:var(--c-paper);padding:12px 16px;border-radius:var(--r-md);font-weight:800}
.skip:focus{top:8px}

/* type */
.h1{font-family:var(--f-head);font-weight:600;font-size:36px;line-height:40px;letter-spacing:-.01em;color:var(--c-ink);text-wrap:balance}
.h2{font-family:var(--f-head);font-size:28px;line-height:32px;letter-spacing:-.005em;text-wrap:balance}
.h3{font-family:var(--f-head);font-size:20px;line-height:26px}
@media (min-width:768px){.h1{font-size:52px;line-height:56px}.h2{font-size:40px;line-height:44px}.h3{font-size:24px;line-height:30px}}
.label{font:800 15px/20px var(--f-body);margin:0}
.eyebrow{font:800 14px/20px var(--f-body);letter-spacing:.02em;color:var(--c-ink-2);margin:0}
.lead{color:var(--c-ink-2);max-width:640px}
.fine{font:700 13px/18px var(--f-body);color:var(--c-ink-2);margin:var(--s-3) 0 0}
.center{text-align:center}
.text-link{display:inline-flex;align-items:center;gap:6px;min-height:48px;font-weight:800;color:var(--c-blue);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.text-link .i{width:20px;height:20px}

/* buttons (UX §8.4) */
.btn{--edge:var(--c-ink);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:0;border-radius:var(--r-btn);font:800 18px/22px var(--f-body);text-decoration:none;cursor:pointer;user-select:none;-webkit-user-select:none;box-shadow:0 4px 0 var(--edge);transform:translateY(0);transition:transform var(--m-press),box-shadow var(--m-press),background-color var(--m-fast);touch-action:manipulation;white-space:nowrap}
.btn .i{width:22px;height:22px}
.btn:active,.btn.is-pressed{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}
.btn-md{min-height:48px}
.btn-lg{min-height:56px;font-size:20px;line-height:24px}
.btn-xl{min-height:72px;font-size:22px;border-radius:20px}
.btn-block{display:flex;width:100%}
.btn-center{display:flex;width:max-content;margin:var(--s-6) auto 0}
.btn-play{--edge:var(--c-red-edge);background:var(--c-red-btn);color:#fff}
.btn-play:hover{background:#cc4339;color:#fff}
.btn-primary{--edge:var(--c-blue-edge);background:var(--c-blue);color:#fff}
.btn-primary:hover{background:#3866b2;color:#fff}
.btn-secondary{--edge:var(--c-ink);background:var(--c-paper);color:var(--c-ink);border:2px solid var(--c-ink)}
.btn-secondary:hover{background:var(--c-white);color:var(--c-ink)}
.btn-ghost{background:transparent;color:var(--c-on-night);border:2px solid var(--c-on-night);box-shadow:none}
.btn-ghost:active{transform:translateY(1px);box-shadow:none}
.btn-ghost:hover{color:#fff;background:rgba(243,235,221,.08)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;box-shadow:none;transform:none;cursor:default}
.btn .spinner{display:none;width:20px;height:20px;border-radius:50%;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite}
.btn.is-loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.link-btn{background:none;border:0;padding:0 4px;min-height:44px;color:var(--c-blue);font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* chips (UX §8.5) */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s-2)}
.chip{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 10px;border-radius:var(--r-pill);font:700 13px/18px var(--f-body);white-space:nowrap}
.chip-free{background:var(--c-meadow);color:var(--c-ink)}
.chip-outline{border:1.5px solid var(--c-ink);color:var(--c-ink)}
.chip-outline-night{border:1.5px solid var(--c-on-night);color:var(--c-on-night);vertical-align:middle}
.chip-soon{background:var(--c-sun);color:var(--c-ink);border:2px solid var(--c-ink)}
.chip-mock{background:rgba(31,42,68,.85);color:var(--c-paper)}
.tag-soon{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--c-sun);border:2px solid var(--c-ink);font:800 14px/18px var(--f-body);color:var(--c-ink);margin-bottom:var(--s-3)}

/* header */
.site-header{background:var(--c-paper);border-bottom:1.5px solid transparent;z-index:40;position:relative}
.header-row{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:inline-flex;align-items:center;min-height:48px}
.logo img{height:32px;width:auto}
.site-header .btn{min-height:48px;padding:0 18px;font-size:17px}
@media (min-width:768px){.site-header{position:sticky;top:0;border-bottom-color:var(--c-pencil)}.header-row{height:72px}.logo img{height:36px}}
.banner-404{background:var(--c-sun);border-bottom:2px solid var(--c-ink);font-weight:800;padding:12px 0}
.banner-404 .wrap{display:flex;align-items:center;gap:8px}

/* sections */
.section{padding:var(--s-8) 0}
@media (min-width:768px){.section{padding:80px 0}}
.section .h2{margin-bottom:var(--s-4)}

/* hero (UX §5.1) */
.hero{padding:var(--s-2) 0 var(--s-2);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr;grid-template-areas:"eyebrow" "h1" "art" "cta" "sub" "more";row-gap:0}
.hero-eyebrow{grid-area:eyebrow;margin:var(--s-2) 0 var(--s-2)}
.hero-h1{grid-area:h1;margin-bottom:var(--s-5)}
.hero-sub{grid-area:sub;margin:var(--s-5) 0 0;max-width:34em}
.hero-art{grid-area:art;position:relative;margin-bottom:var(--s-6)}
.hero-art::before{content:"";position:absolute;inset:-14px -40px 18px 24%;background:var(--c-sky);border-radius:48% 52% 44% 56%/60% 50% 50% 40%;transform:rotate(-3deg);z-index:-1}
.hero-frame{border:2.5px solid var(--c-ink);border-radius:var(--r-card);overflow:hidden;box-shadow:0 6px 0 var(--c-stack);background:var(--c-sky);aspect-ratio:16/9}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.hero-cta{grid-area:cta}
.cta-note{font:700 14px/20px var(--f-body);color:var(--c-ink-2);text-align:center;margin:var(--s-3) 0 0}
.hero-waitlist{display:none;text-align:center;margin:var(--s-1) 0 0}
[data-angle-waitlist] .hero-waitlist{display:block}
.hero-return{margin-top:var(--s-4);background:var(--c-white);border:2px solid var(--c-ink);border-radius:var(--r-btn);padding:12px 16px;box-shadow:0 4px 0 var(--c-stack)}
.hero-return p{margin:0}
.hero-restart{text-align:center;margin:0}
.hero-more{grid-area:more;margin:var(--s-2) 0 0}
.hero-more .i{width:20px;height:20px}
.hero.wiggle #hero-cta{animation:wiggle .4s ease-in-out 1}
@keyframes wiggle{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@media (min-width:768px){
  .hero{padding:var(--s-8) 0 80px}
  .hero-grid{grid-template-columns:5fr 7fr;column-gap:48px;grid-template-areas:"eyebrow art" "h1 art" "sub art" "cta art" "more art";grid-template-rows:auto auto auto auto 1fr;align-items:start}
  .hero-eyebrow{align-self:end;margin-top:var(--s-6)}
  .hero-sub{margin:0 0 var(--s-6)}
  .hero-art{align-self:center;margin:0}
  .hero-cta .btn{width:auto;display:inline-flex}
  .cta-note,.hero-waitlist{text-align:left}
}

/* how it works */
.how{padding-top:var(--s-5)}
.steps{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;gap:var(--s-5)}
.step{display:grid;grid-template-columns:132px 1fr;gap:var(--s-4);align-items:start}
.step-img{position:relative}
.step-img img{border-radius:var(--r-md);border:2px solid var(--c-ink);aspect-ratio:4/3;object-fit:cover;width:100%}
.step-num{position:absolute;left:-8px;top:-8px;width:32px;height:32px;border-radius:50%;background:var(--c-sun);border:2px solid var(--c-ink);font:800 16px/28px var(--f-body);text-align:center}
.step .h3{font-size:19px;line-height:24px;margin:2px 0 6px}
.step p{font-size:15px;line-height:22px;margin:0;color:var(--c-ink-2)}
.shot-note{font:700 13px/18px var(--f-body);color:var(--c-ink-2);margin:var(--s-5) 0 0}
@media (min-width:768px){
  .steps{grid-template-columns:repeat(3,1fr);gap:var(--s-7)}
  .step{grid-template-columns:1fr;gap:var(--s-4)}
  .step .h3{font-size:22px;line-height:28px}
  .step p{font-size:16px;line-height:24px}
}

/* characters */
.chars{background:linear-gradient(var(--c-paper-2),var(--c-paper-2)) no-repeat 0 62%/100% 40%}
.char-scroller{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:var(--s-5) 0 var(--s-5)}
.char-scroller::-webkit-scrollbar{display:none}
.char-list{list-style:none;margin:0;padding:0 var(--gutter);display:flex;gap:var(--s-4);width:max-content}
.char-card{width:272px;scroll-snap-align:center;background:var(--c-paper);border:1.5px solid var(--c-pencil);border-radius:var(--r-card);box-shadow:0 4px 0 var(--c-stack);overflow:hidden}
.char-band{--band:var(--tint-blue);--deep:var(--c-blue);height:228px;position:relative;background:radial-gradient(circle at 50% 58%,rgba(255,253,248,.85) 0 34%,rgba(255,253,248,0) 35%),var(--band);border-bottom:8px solid var(--deep);overflow:hidden}
.char-band img{position:absolute;left:50%;bottom:-6px;height:96%;width:auto;transform:translateX(-50%);filter:drop-shadow(0 3px 0 rgba(31,42,68,.12))}
.char-card--anna .char-band{--band:var(--tint-red);--deep:var(--c-red)}
.char-card--leona .char-band{--band:var(--tint-sun);--deep:var(--c-sun)}
.char-body{padding:var(--s-4) var(--s-5) var(--s-5)}
.char-body .h3{font-size:24px;line-height:28px}
.char-role{font:800 14px/20px var(--f-body);color:var(--c-ink-2);margin:2px 0 var(--s-2)}
.char-body p:last-child{font-size:15px;line-height:22px;margin:0}
.family-line{font-size:15px;line-height:22px;max-width:640px;margin:var(--s-2) 0 0}
@media (min-width:768px){
  .char-scroller{overflow:visible;padding:var(--s-6) 0}
  .char-list{width:auto;max-width:calc(var(--maxw) + 2*var(--gutter));margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
  .char-card{width:auto}
  .char-band{height:280px}
}

/* story covers: a series look built from character art, until real covers exist (UX A30-A36) */
.cover{--band:var(--tint-red);--deep:var(--c-red);position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden;background:radial-gradient(circle at 50% 75%,rgba(255,253,248,.7) 0 30%,rgba(255,253,248,0) 31%),var(--band);border:2px solid var(--c-ink)}
.cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9%;background:var(--deep)}
.cover img{position:absolute;left:50%;bottom:-38%;height:128%;width:auto;max-width:none;transform:translateX(-50%)}
.cover--levi{--band:var(--tint-blue);--deep:var(--c-blue)}
.cover--leona{--band:var(--tint-sun);--deep:var(--c-sun-edge)}
.cover--leona img{bottom:-30%;height:118%}
.cover--both{--band:var(--tint-sun);--deep:var(--c-red)}
.cover--both img:first-child{left:32%}
.cover--both img:nth-child(2){left:70%}
.cover-motif{position:absolute;right:6px;top:6px;width:34%;height:auto;aspect-ratio:1;padding:6%;background:var(--c-paper);border:2px solid var(--c-ink);border-radius:50%;color:var(--c-ink);z-index:2}
.cover--plain{display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,rgba(255,253,248,.75) 0 34%,rgba(255,253,248,0) 35%),var(--band)}
.cover--plain .cover-motif{position:static;width:56%;padding:0;background:none;border:0;border-radius:0}
.cover--anna{--band:var(--tint-red);--deep:var(--c-red)}
.cover--photo{background:var(--c-sky)}
.cover--photo::after{display:none}
.cover--photo img{position:static;transform:none;width:100%;height:100%;object-fit:cover}

.story-grid{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;gap:var(--s-4)}
.story-card{display:grid;grid-template-columns:112px 1fr;gap:var(--s-4);padding:var(--s-3);background:var(--c-paper);border:1.5px solid var(--c-pencil);border-radius:var(--r-card);box-shadow:0 4px 0 var(--c-stack);color:inherit;text-decoration:none;height:100%}
.story-card .h3{font-size:19px;line-height:24px;margin-bottom:4px}
.story-card p{font-size:15px;line-height:21px;margin:0 0 var(--s-3);color:var(--c-ink-2)}
.story-card .soon-note{font:700 13px/18px var(--f-body);color:var(--c-ink-2);margin:0}
.story-card--live{border:2px solid var(--c-ink);transition:transform var(--m-press)}
.story-card--live:hover{color:inherit}
.story-card--live:active{transform:translateY(2px)}
.story-card--live .btn{min-height:44px;padding:0 16px;font-size:16px;pointer-events:none}
.story-body{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.more-h{margin:var(--s-8) 0 0}
.more-scroller{overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none;padding:var(--s-4) 0 var(--s-2)}
.more-scroller::-webkit-scrollbar{display:none}
.more-list{list-style:none;margin:0;padding:0 var(--gutter);display:flex;gap:var(--s-4);width:max-content}
.mini{width:150px;scroll-snap-align:start}
.mini .chip{margin:10px 0 6px}
.mini h4{font:600 17px/22px var(--f-head);margin:0 0 4px}
.mini p{font-size:14px;line-height:20px;color:var(--c-ink-2);margin:0}
.stories-note{margin:var(--s-6) 0 0;color:var(--c-ink-2);max-width:640px}
@media (min-width:768px){
  .story-grid{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
  .story-card{grid-template-columns:132px 1fr;padding:var(--s-4)}
  .more-scroller{overflow:visible}
  .more-list{width:auto;max-width:calc(var(--maxw) + 2*var(--gutter));margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
  .mini{width:auto;display:grid;grid-template-columns:96px 1fr;column-gap:var(--s-4);align-items:start}
  .mini .cover{grid-row:span 3}
  .mini .chip{margin:0 0 6px;justify-self:start}
}
@media (min-width:1100px){.more-list{grid-template-columns:repeat(6,1fr)}.mini{display:block}.mini .chip{margin:10px 0 6px}}

/* parents */
.parents-grid{display:grid;grid-template-areas:"h2" "art" "list" "cta"}
.parents-grid>div{display:contents}
.parents .h2{grid-area:h2}
.benefits{grid-area:list;list-style:none;margin:0 0 var(--s-6);padding:0;display:grid;gap:var(--s-5)}
.parents-grid>div>.btn{grid-area:cta;justify-self:start}
.benefits li{display:grid;grid-template-columns:48px 1fr;gap:var(--s-4);align-items:start}
.benefits p{margin:4px 0 0;font-size:16px;line-height:24px;color:var(--c-ink-2)}
.icon-tile{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;border:2px solid var(--c-ink);background:var(--tint-sun)}
.icon-tile--sky{background:var(--c-sky)}
.icon-tile--red{background:var(--tint-red)}
.parents-art{grid-area:art;position:relative;margin:var(--s-2) 0 var(--s-6);aspect-ratio:16/10;max-width:420px;width:100%;justify-self:center}
.parents-art::before{content:"";position:absolute;inset:10% 8% 4% 8%;transform:rotate(-4deg);background:var(--tint-sun);border-radius:46% 54% 50% 50%/55% 45% 55% 45%}
.parents-art img{position:absolute;bottom:0;height:auto}
.pa-levi{left:12%;width:37%}
.pa-leona{right:12%;width:31%}
@media (min-width:768px){
  .parents-grid{grid-template-columns:7fr 5fr;grid-template-areas:"h2 art" "list art" "cta art";column-gap:64px;align-items:start}
  .parents-art{margin:0;align-self:center;aspect-ratio:5/4;max-width:460px}
  .pa-levi{left:8%;width:44%}
  .pa-leona{right:8%;width:37%}
}

/* safety band (UX §5.6) */
.safety{position:relative;margin:var(--s-6) 0}
.torn{width:100%;height:24px;fill:var(--c-sky);display:block}
.torn-top{margin-bottom:-1px}.torn-bottom{margin-top:-1px}
.safety-inner{background:var(--c-sky);padding:var(--s-6) 0 var(--s-6)}
.shield-badge{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--c-paper);border:2px solid var(--c-ink);margin-bottom:var(--s-4)}
.shield-badge .i{width:30px;height:30px}
.safety .h2{margin-bottom:var(--s-5)}
.safety-list{list-style:none;margin:0 0 var(--s-4);padding:0;display:grid;gap:var(--s-4);max-width:720px}
.safety-list li{display:grid;grid-template-columns:32px 1fr;gap:var(--s-3);align-items:start;font-size:16px;line-height:24px}
.safety-list .i{width:28px;height:28px}
@media (min-width:768px){.safety-list{grid-template-columns:1fr 1fr;column-gap:var(--s-8);max-width:none}.torn{height:40px}.safety-inner{padding:var(--s-7) 0}}

/* premium teaser */
.premium-grid{display:grid;gap:var(--s-6)}
.premium-art{position:relative;background:var(--c-paper-2);border:1.5px solid var(--c-pencil);border-radius:var(--r-card);box-shadow:0 4px 0 var(--c-stack);padding:var(--s-5) var(--s-4) 0;overflow:hidden}
.team{display:flex;align-items:flex-end;justify-content:center;gap:2%;height:220px}
.team img{height:94%;width:auto}
.team-slot{position:relative;height:86%;aspect-ratio:120/260;color:var(--c-field)}
.team-slot svg{width:100%;height:100%}
.team-plus{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--c-sun);border:2px solid var(--c-ink);display:grid;place-items:center;color:var(--c-ink)}
.premium-art .chip-mock{position:absolute;left:12px;bottom:12px}
.price-line{font-weight:800;font-size:17px;line-height:24px;margin-bottom:6px}
.offer-line{color:var(--c-meadow-ink);font-weight:700}
[data-pv="A"] .pv-b,[data-pv="B"] .pv-a{display:none}
html:not([data-pv]) .pv-b{display:none}
@media (min-width:768px){.premium-grid{grid-template-columns:1fr 1fr;gap:64px;align-items:center}.team{height:320px}}

/* faq */
.faq-list{margin-top:var(--s-5);border-top:1.5px solid var(--c-pencil)}
.faq details{border-bottom:1.5px solid var(--c-pencil)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:56px;padding:12px 0;font:800 17px/24px var(--f-body);cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{transition:transform var(--m-base)}
.faq details[open] summary .i{transform:rotate(180deg)}
.faq details p{margin:0 0 var(--s-5);color:var(--c-ink-2);max-width:60ch}

/* footer */
.site-footer{background:var(--c-night);color:var(--c-on-night);padding:var(--s-8) 0 calc(var(--s-8) + env(safe-area-inset-bottom))}
.page-landing .site-footer{padding-bottom:calc(var(--s-8) + 72px + env(safe-area-inset-bottom))}
.site-footer .logo img{height:36px}
.footer-tag{font-family:var(--f-head);font-size:20px;margin:var(--s-3) 0 var(--s-5)}
.footer-links{display:flex;flex-wrap:wrap;column-gap:var(--s-5);margin-bottom:var(--s-4)}
.footer-links a{display:inline-flex;align-items:center;min-height:48px;color:var(--c-on-night);font-weight:700;text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.site-footer a{color:var(--c-on-night)}
.footer-contact,.footer-small{font-size:14px;line-height:20px;color:#CFC6B6}
.footer-small{margin:0}
.site-footer :focus-visible{outline-color:var(--c-on-night)}
@media (min-width:768px){.page-landing .site-footer,.site-footer{padding-bottom:var(--s-8)}}

/* sticky CTA (UX §8.7) */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--c-paper);border-top:1.5px solid var(--c-pencil);transform:translateY(110%);transition:transform var(--m-base);visibility:hidden}
.sticky-cta[data-show="1"]{transform:none;visibility:visible}
.sticky-cta img{width:40px;height:40px;border-radius:50%;border:2px solid var(--c-ink)}
.sticky-cta .btn{flex:1}
@media (min-width:768px){.sticky-cta{display:none}}
.fade-night{position:fixed;inset:0;background:var(--c-night);opacity:0;pointer-events:none;z-index:200;transition:opacity 150ms ease-out}
.fade-night.on{opacity:1}

/* form pages (sign-up, premium) */
.mini-header{background:var(--c-paper)}
.mini-row{display:flex;align-items:center;justify-content:space-between;min-height:60px}
.back-link{display:inline-flex;align-items:center;gap:4px;min-height:48px;padding-right:12px;font-weight:800;color:var(--c-ink);text-decoration:none}
.back-link .i{width:22px;height:22px}
.logo-sm img{height:26px;width:auto}
.form-page{padding:var(--s-2) 0 var(--s-9)}
.form-grid{display:grid;gap:var(--s-5);max-width:calc(560px + 2*var(--gutter))}
.form-h1{font-size:32px;line-height:36px;margin-bottom:var(--s-3)}
.form-sub{color:var(--c-ink-2);margin:0}
.duo-art{position:relative;height:150px;margin:0 0 var(--s-4)}
.duo-art::before{content:"";position:absolute;left:0;top:14px;width:200px;height:124px;background:var(--tint-sun);border-radius:46% 54% 50% 50%/55% 45% 55% 45%;transform:rotate(-4deg)}
.duo-art img{position:absolute;bottom:0;height:150px;width:auto}
.duo-levi{left:18px}.duo-anna{left:104px;height:146px!important}
.card{background:var(--c-paper);border:1.5px solid var(--c-pencil);border-radius:var(--r-modal);box-shadow:0 6px 0 var(--c-stack);padding:var(--s-5)}
.form .field{margin-bottom:var(--s-4)}
.form .label{display:block;margin-bottom:var(--s-2)}
.input-wrap{position:relative}
input[type=email],input[type=text]{width:100%;height:56px;border:2px solid var(--c-field);border-radius:var(--r-btn);background:var(--c-white);color:var(--c-ink);font:400 17px/24px var(--f-body);padding:0 48px 0 16px;-webkit-appearance:none;appearance:none}
input[type=email]::placeholder{color:#7A7262}
input[type=email]:focus{outline:3px solid var(--c-focus);outline-offset:2px;border-color:var(--c-ink)}
.input-ok{position:absolute;right:14px;top:16px;color:var(--c-meadow-ink);opacity:0;transition:opacity var(--m-fast)}
.field.is-valid .input-ok{opacity:1}
.field.is-error input{border-color:var(--c-red-text)}
.field-msg{margin:6px 0 0;font:700 15px/20px var(--f-body);color:var(--c-red-text);min-height:0}
.field-msg:empty{display:none}
.field-msg::before{content:"";display:inline-block;width:16px;height:16px;margin:0 6px -3px 0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.3v.2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.3v.2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.typo{margin:8px 0 0;font-size:15px;line-height:22px;background:var(--tint-sun);border-radius:var(--r-md);padding:4px 4px 4px 12px}
.check{position:relative;display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;min-height:48px;padding:10px 0;font-size:15px;line-height:22px;cursor:pointer}
.check input{position:absolute;opacity:0;width:28px;height:28px;margin:10px 0 0;left:0;top:0}
.check .box{width:28px;height:28px;border:2px solid var(--c-field);border-radius:8px;background:var(--c-white);display:grid;place-items:center;color:#fff}
.check .box .i{width:20px;height:20px;opacity:0}
.check input:checked+.box{background:var(--c-blue);border-color:var(--c-blue)}
.check input:checked+.box .i{opacity:1}
.check input:focus-visible+.box{outline:3px solid var(--c-focus);outline-offset:2px}
.check.is-error .box{border-color:var(--c-red-text)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-banner{background:#FBE3DF;border:2px solid var(--c-red-text);color:var(--c-ink);border-radius:var(--r-md);padding:10px 14px;font-weight:700;font-size:15px;line-height:22px}
.form .btn{margin-top:var(--s-2)}
.success{text-align:center}
.success .h2{margin:var(--s-3) 0 var(--s-2)}
.success-tick{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--c-meadow);border:2px solid var(--c-ink);color:var(--c-ink)}
.success-tick .i{width:34px;height:34px}
@media (min-width:768px), (orientation:landscape) and (min-width:640px){
  .form-grid{grid-template-columns:2fr 3fr;max-width:calc(var(--maxw) + 2*var(--gutter));gap:var(--s-8);align-items:start}
  .form-col{padding-top:var(--s-2)}
}
@media (min-width:768px){.form-page{padding-top:var(--s-7)}.form-h1{font-size:44px;line-height:48px}.duo-art{height:220px}.duo-art img{height:220px}.duo-anna{left:130px;height:214px!important}.duo-art::before{width:300px;height:180px}}

/* premium page */
.premium-art--page{margin-top:var(--s-4)}
.premium-art--page .team{height:180px}
.price-card{text-align:left}
.price-big{font-family:var(--f-head);font-size:44px;line-height:48px;margin:0 0 4px;color:var(--c-ink)}
.price-big .per{font-size:22px}
.price-small{font:700 15px/20px var(--f-body);color:var(--c-ink-2);margin:0 0 var(--s-4)}
.includes{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid;gap:10px}
.includes li{display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:16px;line-height:24px}
.includes .i{color:var(--c-meadow-ink)}
.reveal{margin-top:var(--s-5)}
.reveal .h2{margin-bottom:var(--s-3)}
.offer-band{background:var(--c-sun);border:2px solid var(--c-ink);border-radius:var(--r-md);padding:10px 14px;font-weight:800}
.page-premium .success{margin-top:var(--s-5)}
@media (min-width:768px){.premium-art--page .team{height:300px}}

/* doc pages */
.doc{padding:var(--s-4) 0 var(--s-9)}
.doc .h1{font-size:32px;line-height:38px;margin:var(--s-2) 0 var(--s-4)}
.doc .h3{margin:var(--s-7) 0 var(--s-2)}
.doc p,.doc li{font-size:17px;line-height:28px}
.doc-intro{font-size:18px}
.doc-date{font:700 14px/20px var(--f-body);color:var(--c-ink-2);margin:var(--s-5) 0 0}
.draft-banner{background:var(--tint-sun);border:2px solid var(--c-ink);border-radius:var(--r-md);padding:14px 16px;font-size:15px;line-height:22px}
.draft-banner strong{display:block;margin-bottom:4px}
.short-box{background:var(--c-white);border:2px solid var(--c-ink);border-radius:var(--r-card);padding:var(--s-5);box-shadow:0 4px 0 var(--c-stack);margin:var(--s-6) 0}
.short-box ul{margin:var(--s-3) 0 0;padding-left:20px}
mark.todo{background:#FFE89A;color:var(--c-ink);padding:0 3px;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.builder-note{background:var(--c-paper-2);border-left:4px solid var(--c-field);padding:12px 14px;font-size:15px!important;line-height:22px!important;border-radius:0 var(--r-md) var(--r-md) 0}

/* ---------- parental gate (UX §8.10) ---------- */
.gate{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgba(24,32,47,.6)}
.game .gate{position:absolute}
.gate-card{position:relative;background:var(--c-paper);color:var(--c-ink);border-radius:var(--r-modal);box-shadow:0 12px 0 rgba(24,32,47,.18);width:min(100%,400px);max-height:100%;overflow:auto;padding:56px 20px 20px;display:grid;gap:16px}
.gate-close{position:absolute;left:8px;top:8px;width:48px;height:48px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--c-ink)}
.gate-h{font:600 26px/30px var(--f-head);margin:0}
.gate-prompt{margin:4px 0 2px;font-size:16px;line-height:22px}
.gate-words{font:800 22px/28px var(--f-body);margin:0;color:var(--c-blue)}
.gate-slots{display:flex;gap:10px;margin:12px 0 4px}
.gate-slots span{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--c-ink)}
.gate-slots span.on{background:var(--c-ink)}
.gate-why{font-size:14px;line-height:20px;color:var(--c-ink-2);margin:6px 0 0}
.gate-msg{font:800 15px/20px var(--f-body);color:var(--c-red-text);margin:8px 0 0;min-height:20px}
.gate-pad{display:grid;grid-template-columns:repeat(3,64px);gap:12px;justify-content:center}
.gate-pad button{width:64px;height:64px;border-radius:var(--r-btn);border:2px solid var(--c-ink);background:var(--c-paper);box-shadow:0 4px 0 var(--c-ink);font:800 28px/1 var(--f-body);color:var(--c-ink);cursor:pointer;touch-action:manipulation;transition:transform var(--m-press),box-shadow var(--m-press)}
.gate-pad button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--c-ink)}
.gate-pad button:last-child{grid-column:2}
.gate-pad button[disabled]{opacity:.4}
.gate.shake .gate-card{animation:shake .3s linear}
@keyframes shake{0%,100%{transform:none}17%,50%,83%{transform:translateX(-6px)}33%,67%{transform:translateX(6px)}}
.gate.pass .gate-slots span{background:var(--c-meadow);border-color:var(--c-meadow-ink)}
.gate-locked{text-align:center;display:grid;gap:12px;justify-items:center}
@media (orientation:landscape) and (max-height:600px){
  body:not(.page-play) .gate-card{width:min(100%,720px);grid-template-columns:1fr auto;align-items:center;padding:52px 20px 16px;column-gap:28px}
  body:not(.page-play) .gate-pad{grid-template-columns:repeat(4,58px);gap:10px}
  body:not(.page-play) .gate-pad button{width:58px;height:58px}
  body:not(.page-play) .gate-pad button:last-child{grid-column:auto}
}
/* inside /play the gate follows the game box (which is rotated in Sideways mode), not the phone */
@container (orientation:landscape) and (max-height:600px){
  .gate{padding:10px}
  .gate-card{width:min(100%,720px);grid-template-columns:1fr auto;align-items:center;padding:48px 20px 14px;column-gap:28px;gap:8px 28px}
  .gate-pad{grid-template-columns:repeat(4,58px);gap:10px}
  .gate-pad button{width:58px;height:58px}
  .gate-pad button:last-child{grid-column:auto}
  .gate-h{font-size:24px;line-height:28px}
}

/* ---------- /play ---------- */
.play-html,.page-play{height:100%;overflow:hidden;background:var(--c-night);overscroll-behavior:none}
.page-play{color:var(--c-on-night);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:fixed;inset:0}
.page-play :focus-visible{outline-color:var(--c-sun)}
.game{position:fixed;left:0;top:0;width:100%;height:var(--app-h);overflow:hidden;background:var(--c-night);container-type:size}
.stage-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--c-night)}
body.sideways .game{width:var(--app-h);height:100vw;transform-origin:top left;transform:translate(100vw,0) rotate(90deg)}
body.sideways.flipped .game{transform:translate(0,var(--app-h)) rotate(-90deg)}
.layer{position:absolute;inset:0;z-index:5}

.start{background:rgba(24,32,47,.5);display:grid;place-items:center}
.start-title{position:absolute;left:max(76px,calc(env(safe-area-inset-left) + 72px));top:16px;margin:0;font:600 20px/26px var(--f-head);font-size:clamp(16px,5cqh,28px);color:var(--c-on-night);text-shadow:0 2px 6px rgba(0,0,0,.4);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.start-center{display:grid;justify-items:center;text-align:center}
.kid-play{position:relative;width:140px;height:140px;width:max(120px,36cqh);height:max(120px,36cqh);border-radius:50%;border:0;background:var(--c-sun);color:#4A3200;box-shadow:0 6px 0 var(--c-sun-edge),0 0 0 6px rgba(244,198,78,.25);display:grid;place-items:center;cursor:pointer;animation:pulse 1s ease-in-out infinite alternate;touch-action:manipulation}
.kid-play .i{width:46%;height:46%;margin-left:8%}
.kid-play:active{transform:translateY(4px) scale(.98);box-shadow:0 2px 0 var(--c-sun-edge)}
.kid-play[disabled]{animation:none;background:#D9B65A;cursor:progress}
.kid-play[disabled] .i{opacity:.55}
.kid-play .ring{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);transform:rotate(-90deg);pointer-events:none}
.kid-play .ring circle{fill:none;stroke:var(--c-on-night);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0)*100);transition:stroke-dashoffset .3s}
.kid-play:not([disabled]) .ring{display:none}
@keyframes pulse{to{transform:scale(1.08)}}
.start-label{margin:18px 0 0;font:800 18px/22px var(--f-body);font-size:clamp(15px,4.6cqh,22px);text-shadow:0 2px 6px rgba(0,0,0,.5)}
.start-status{margin:8px 0 0;max-width:min(520px,80cqw);display:grid;gap:2px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.start-status .ss-main{font:800 15px/20px var(--f-body)}
.start-status .ss-sub{font:700 14px/19px var(--f-body);opacity:.9}
.start.is-ready .start-status{display:none}
.trot{position:absolute;bottom:6px;left:0;height:64px;height:clamp(48px,16cqh,90px);width:auto;animation:trot 6s linear infinite;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.start.is-ready .trot{display:none}
@keyframes trot{0%{transform:translateX(-120px)}100%{transform:translateX(calc(100cqw + 40px))}}

.grownup-btn{position:absolute;z-index:6;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));width:48px;height:48px;border-radius:50%;border:2px solid rgba(243,235,221,.8);background:rgba(24,32,47,.55);color:var(--c-on-night);opacity:.65;display:grid;place-items:center;cursor:pointer;touch-action:none;-webkit-touch-callout:none}
.grownup-btn .i{width:24px;height:24px}
.grownup-btn .ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg)}
.grownup-btn .ring circle{fill:none;stroke:var(--c-sun);stroke-width:8;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}
.grownup-btn.holding{opacity:1}
.grownup-btn.holding .ring circle{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s linear}

.menu{background:rgba(24,32,47,.72);display:grid;place-items:center;padding:12px}
.menu-card{background:var(--c-paper);color:var(--c-ink);border-radius:var(--r-modal);padding:20px 24px;display:grid;justify-items:center;gap:14px;max-width:min(92cqw,640px);box-shadow:0 12px 0 rgba(0,0,0,.25)}
.menu-h{font:600 28px/32px var(--f-head);margin:0}
.menu-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.menu-leave{display:inline-flex;align-items:center;min-height:48px;font-weight:800;color:var(--c-blue)}
.page-play .menu :focus-visible{outline-color:var(--c-focus)}

.end{background:linear-gradient(rgba(24,32,47,.25),rgba(24,32,47,.8));display:grid;grid-template-rows:auto 1fr;align-items:center;padding:8px max(16px,env(safe-area-inset-right)) 12px max(72px,calc(env(safe-area-inset-left) + 68px))}
.end-top{display:grid;justify-items:center;gap:6px;text-align:center}
.end-h{font:600 40px/1 var(--f-head);font-size:clamp(28px,10cqh,64px);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.35);margin:0;animation:popin var(--m-pop) both .05s}
.sticker{width:clamp(84px,30cqh,200px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid #fff;box-shadow:0 6px 0 rgba(0,0,0,.25);transform:rotate(-7deg);animation:stickerin .45s cubic-bezier(.3,1.6,.5,1) both .25s;background:#fff}
.sticker img{width:100%;height:100%;object-fit:cover}
@keyframes stickerin{from{transform:rotate(-30deg) scale(.3);opacity:0}}
.end-show{margin:0;font:800 16px/20px var(--f-body);font-size:clamp(14px,4.4cqh,22px);color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.6)}
@keyframes popin{from{transform:scale(.5);opacity:0}}
.end-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,3cqw,32px);align-items:center;align-self:end}
.end-kid{display:grid;justify-items:center;gap:6px}
.kid-round{width:96px;height:96px;width:clamp(80px,24cqh,120px);height:clamp(80px,24cqh,120px);border-radius:50%;border:0;background:var(--c-sun);color:#4A3200;box-shadow:0 6px 0 var(--c-sun-edge);display:grid;place-items:center;cursor:pointer;animation:popin var(--m-pop) both .2s}
.kid-round .i{width:50%;height:50%}
.kid-round:active{transform:translateY(4px);box-shadow:0 2px 0 var(--c-sun-edge)}
.end-kid-label{font:800 16px/20px var(--f-body);text-shadow:0 1px 4px rgba(0,0,0,.6)}
.end-tiles{list-style:none;margin:0;padding:0;display:flex;gap:clamp(10px,2.5cqw,20px);justify-self:start}
.end-tile{display:block;width:clamp(96px,28cqh,150px);aspect-ratio:4/3;border-radius:16px;border:4px solid #fff;overflow:hidden;background:#fff;box-shadow:0 5px 0 rgba(0,0,0,.3);animation:popin var(--m-pop) both .3s}
.end-tile img{width:100%;height:100%;object-fit:cover}
.end-tile:active{transform:translateY(3px)}
.end-grownups{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));min-height:44px;padding:0 16px;font-size:15px}
/* grown-ups sheet: only built after the grown-up check (CRO v3 4.2) */
.gsheet{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));background:rgba(24,32,47,.6)}
.gs-card{width:min(100%,780px);max-height:100%;overflow:auto;background:#FFFAF0;color:var(--c-ink);border:3px solid var(--c-ink);border-radius:24px;box-shadow:0 6px 0 var(--c-ink);padding:12px 18px 16px}
.gs-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gs-kicker{margin:0;font:800 14px/18px var(--f-body)}
.gs-back{min-height:44px;padding:0 14px;font-size:15px}
.gs-h{margin:4px 0 10px;font:700 24px/28px var(--f-head);font-size:clamp(19px,6cqh,26px)}
.gs-h:focus{outline:none}
.gs-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end}
@container (max-width:560px){.gs-cols{grid-template-columns:1fr}}
.gs-art{display:flex;align-items:flex-end;justify-content:center;gap:8px;height:clamp(64px,19cqh,104px);margin-bottom:8px}
.gs-art img{height:100%;width:auto}
.gs-slot{display:grid;place-items:center;width:clamp(48px,14cqh,72px);aspect-ratio:1;margin-bottom:6px;border-radius:50%;border:3px dashed var(--c-ink);background:#fff}
.gs-note{margin:8px 0 0;font:700 13px/18px var(--f-body)}
.gs-chip{display:inline-block;padding:1px 8px;border:2px solid var(--c-ink);border-radius:999px;background:#EDE4FF;font-size:12px}
.gs-lib-h{margin:0 0 8px;font:800 15px/20px var(--f-body)}
.gs-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.gs-tile{position:relative;display:flex;flex-direction:column;height:clamp(60px,18cqh,84px);border:2.5px solid var(--c-ink);border-radius:12px;overflow:hidden;background:#FFFAF0;color:var(--c-ink);text-decoration:none}
.gs-tile .lt-band{display:block;height:16px;border-bottom:2.5px solid var(--c-ink)}
.gs-tile.lt-0 .lt-band{background:#FFD233}.gs-tile.lt-1 .lt-band{background:#FFC2E2}.gs-tile.lt-2 .lt-band{background:#4CC94C}
.gs-tile .lt-title{padding:4px 22px 0 6px;font:800 12px/14px var(--f-body)}
.gs-tile .lt-lock{position:absolute;right:4px;bottom:4px;width:16px;height:16px}
.gs-card .btn-upgrade{--edge:#3A1B8C;background:#5B2ED0;color:#fff;border:3px solid var(--c-ink)}
.gs-card .btn{min-height:48px;font-size:16px;white-space:normal;text-align:center}

.flip-chip{position:absolute;z-index:7;right:12px;top:12px;width:48px;height:48px;border-radius:50%;border:2px solid var(--c-on-night);background:rgba(24,32,47,.7);color:var(--c-on-night);display:grid;place-items:center;cursor:pointer}

/* ready card (P1) */
.ready{position:fixed;inset:0;z-index:20;background:var(--c-night);overflow-y:auto;-webkit-overflow-scrolling:touch;user-select:text;-webkit-user-select:text}
.ready-inner{max-width:440px;margin:0 auto;padding:max(8px,env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));display:grid;gap:14px}
.ready-back{justify-self:start;margin-top:4px;padding:0 14px 0 8px}
.ready-art{border-radius:var(--r-card);overflow:hidden;border:2px solid rgba(243,235,221,.25);height:min(42vh,420px);height:min(42dvh,420px)}
.ready-art img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ready-h{font:600 28px/32px var(--f-head);color:var(--c-on-night);margin:4px 0 0}
.ready-len{margin:0;font:700 15px/22px var(--f-body);color:#CFC6B6;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ready-play{overflow:hidden}
.ready-progress{position:absolute;left:0;bottom:0;height:5px;width:100%;background:rgba(0,0,0,.18)}
.ready-progress span{display:block;height:100%;width:0;background:var(--c-sun);transition:width .3s}
.ready-play.loaded .ready-progress{display:none}
.tips{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.tips li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:15px;line-height:22px;color:var(--c-on-night)}

/* rotate prompt (P2) and load error */
.rotate,.loadfail{position:fixed;inset:0;z-index:25;background:var(--c-night);display:grid;place-items:center;text-align:center;padding:24px}
.rotate-inner{display:grid;justify-items:center;gap:12px;max-width:340px}
.rotate-art svg{width:200px;height:200px}
.rotate-art .phone{transform-origin:120px 120px;animation:turnphone 2.3s ease-in-out infinite}
.rotate-art rect:first-child{fill:var(--c-paper);stroke:var(--c-ink);stroke-width:4}
.rotate-art .screen{fill:var(--c-sky)}
.rotate-art circle{fill:var(--c-ink)}
.rotate-art .arrow,.rotate-art .arrow-head{fill:none;stroke:var(--c-sun);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
@keyframes turnphone{0%,10%{transform:rotate(0)}49%,79%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
.rotate-h{font:600 24px/30px var(--f-head);margin:0;color:var(--c-on-night)}
.rotate-sub{margin:0;color:#CFC6B6}
.rotate-help{display:grid;justify-items:center;gap:8px;margin-top:16px;animation:fadein .4s both}
.rotate-help p{font-size:14px;line-height:20px;color:#CFC6B6;margin:0}
@keyframes fadein{from{opacity:0}}

/* debug overlay (?debug=1) */
.st-debug{position:fixed;z-index:9999;right:6px;bottom:6px;width:min(360px,calc(100vw - 12px));max-height:45vh;display:flex;flex-direction:column;background:rgba(15,20,30,.92);color:#E8F0D8;font:11px/15px ui-monospace,Menlo,Consolas,monospace;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.35);pointer-events:auto}
.st-debug header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.15);font-weight:700}
.st-debug header button{background:#2F5DA8;color:#fff;border:0;border-radius:6px;font:700 11px/1 ui-monospace,monospace;padding:8px 10px;min-height:32px;cursor:pointer}
.st-debug ol{list-style:none;margin:0;padding:4px 8px;overflow:auto}
.st-debug li{padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.1);word-break:break-word}
.st-debug li b{color:#F4C64E}
.st-debug.min ol{display:none}
.st-debug.min{width:auto}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .btn:active{transition-duration:80ms!important}
  .kid-play{box-shadow:0 6px 0 var(--c-sun-edge),0 0 0 8px var(--c-on-night)}
  .rotate-art .phone{transform:rotate(-90deg)}
  .trot{display:none}
}
.game .st-debug{bottom:auto;top:6px;max-height:40%}
/* v4 end-card grown-ups sheet: one app button (Coming soon) + Play another story */
.gs-body{margin:0 0 12px;font-size:16px;line-height:22px}
.gs-app{white-space:normal;gap:8px;flex-wrap:wrap}
.gs-chip{background:#FFD233;color:var(--c-ink);font:800 13px/18px var(--f-body);padding:0 8px}
.soon-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;margin-left:6px;border-radius:999px;background:#FFD233;color:#1A1D3D;border:2px solid #1A1D3D;font:800 13px/1 var(--f-body);white-space:nowrap}