/* Snug and the Dark v2: painted scenes, read-along voice, the child as the hero. Loaded after snug-and-the-dark.css and fullscreen.css. */

/* the picture is 16:9 now, shown whole */
.art{aspect-ratio:16/9;width:min(100cqw,177.78cqh);background:#0B1130}
.artwrap{height:56.25vw;max-height:62dvh}
@media (min-aspect-ratio:1/1){.artwrap{height:auto;max-height:none}}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;pointer-events:none;user-select:none;-webkit-user-drag:none}
.bg.show{opacity:1}
.bg.slow{transition-duration:1.6s}

/* cover title, painted on the wall */
.ctitle{position:absolute;left:4%;top:7%;width:46%;z-index:3;pointer-events:none;opacity:0;transition:opacity .6s}
.ctitle.show{opacity:1}
.ctitle h1{margin:0;font:400 clamp(26px,5.4cqw,74px)/1 var(--display);color:var(--sun);-webkit-text-stroke:2px var(--ink);paint-order:stroke;text-shadow:0 4px 0 var(--ink),0 8px 22px rgba(0,0,0,.45)}
.ctitle p{margin:.5em 0 0;font:700 clamp(14px,1.9cqw,26px)/1.25 var(--read);color:#E8E6FF;text-shadow:0 2px 6px rgba(0,0,0,.8)}
.ctitle p b{color:#fff}

/* Snug matches the light in the scene */
.snugR{transition:left .5s ease,top .5s ease,width .5s ease,opacity .35s,filter 1.2s ease}
.snugR.dimmed{filter:brightness(.5) saturate(.7)}
.snugR.lit{filter:brightness(.9) sepia(.18) saturate(1.05)}

/* Flipsy hiding styles (harder on each page) */
.flipsy{aspect-ratio:4/5;transition:left .5s ease,top .5s ease,width .5s ease,opacity .3s,filter .4s}
.flipsy.h-dim{filter:brightness(.62) saturate(.8)}
.flipsy.h-dark{filter:brightness(.38) saturate(.6)}
.flipsy.h-shadow{filter:brightness(0) blur(1.5px);opacity:.42}
.flipsy.h-quilt{filter:saturate(.55) brightness(.8) contrast(.9);opacity:.72}
.flipsy.h-half{clip-path:inset(0 0 46% 0)}
.flipsy.got{filter:none;opacity:1;clip-path:none}

/* words light up as they are read */
.story .w{transition:color .15s,background-color .15s;border-radius:6px;padding:0 .04em}
.story .w.now{background:rgba(255,201,40,.32);color:#fff}
.story.reading .w:not(.done):not(.now){opacity:.78}
.story .say{color:#FFE27A}
.story .sfx{font-family:var(--display);font-weight:400;color:#FF7A6E;letter-spacing:.02em}
.story .flip-line{display:block;margin-top:.45em;font-size:.82em;color:#C9F2D6}
.story{cursor:pointer}
body.novoice .story{cursor:default}

/* voice loading hint */
.vload{position:absolute;right:12px;bottom:12px;z-index:9;display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:16px;background:rgba(20,27,68,.8);color:#fff;font:700 13px var(--read);opacity:0;transition:opacity .3s;pointer-events:none}
.vload.on{opacity:1}
.vload i{width:14px;height:14px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:var(--sun);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* end page */
.endnote{margin:6px 0 0;font:700 clamp(15px,1.5vw + 8px,22px)/1.35 var(--read);color:#FFE27A}
.endrow .endbtn.small{height:38px;font-size:14px;padding:0 14px}

/* the name screen */
.namebox{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(11,17,48,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.namebox[hidden]{display:none}
.ncard{width:min(460px,100%);background:var(--paper);color:var(--paperInk);border-radius:24px;padding:26px 24px 22px;box-shadow:0 0 0 4px var(--ink),0 20px 50px rgba(0,0,0,.5);text-align:center}
.ncard h2{margin:0 0 6px;font:400 clamp(26px,6vw,36px)/1.05 var(--display);color:var(--paperInk)}
.ncard p{margin:0 0 16px;font:16px/1.4 var(--read);color:#4A4F70}
.ncard input{width:100%;height:56px;border-radius:16px;border:3px solid var(--ink);padding:0 16px;font:700 22px var(--read);text-align:center;color:var(--ink);background:#fff}
.ncard input:focus{outline:3px solid var(--sky);outline-offset:2px}
.ncard .err{min-height:20px;margin:8px 0 4px;color:#C0352B;font:700 14px var(--read)}
.ncard .go{width:100%;height:56px;margin-top:4px;border-radius:28px;border:3px solid var(--ink);background:var(--sun);color:var(--ink);font:700 20px var(--read);cursor:pointer}
.ncard .go:disabled{opacity:.6;cursor:wait}
.ncard .skip{margin-top:12px;background:none;border:0;color:#4A4F70;font:600 15px var(--read);text-decoration:underline;cursor:pointer}
.ncard .fine{margin:14px 0 0;font-size:12px;color:#7A7F9C}
@media (prefers-reduced-motion:reduce){.bg,.ctitle,.story .w{transition:none}}

/* ---------- the hero child, drawn into the pictures ---------- */
.hero{position:absolute;z-index:5;pointer-events:none;transition:opacity .45s ease}
.hero.off{opacity:0}
.hero canvas{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;transition:opacity .9s ease}
.hero canvas:first-child{position:relative;display:block}
.hero canvas.show{opacity:1}
.hero canvas.slow{transition-duration:1.6s}

/* "make your hero" on the name screen */
.ncard{max-height:calc(100dvh - 24px);overflow-y:auto}
.heropick{margin:14px 0 6px;padding:12px;border-radius:18px;background:#fff;border:3px solid var(--ink)}
.heropick[hidden],.heropick.nohero{display:none}
.heropick .ph{margin:0 0 8px;font:700 16px var(--read);color:var(--paperInk)}
.heropick .wrap{display:flex;gap:12px;align-items:center}
.heropick canvas{flex:0 0 96px;width:96px;height:112px;border-radius:14px;background:radial-gradient(circle at 50% 60%,#FFE9A8,#F7D27A 70%);border:3px solid var(--ink)}
.heropick .rows{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.heropick .row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.heropick .row b{flex:0 0 100%;font:700 12px var(--read);letter-spacing:.04em;text-transform:uppercase;color:#6A6F90}
.heropick .opt{cursor:pointer;border:3px solid var(--ink);background:#fff;color:var(--ink);padding:0;touch-action:manipulation}
.heropick .opt.sw{width:30px;height:30px;border-radius:50%;background:var(--c)}
.heropick .opt.txt{height:30px;padding:0 10px;border-radius:15px;font:700 14px var(--read)}
.heropick .opt[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--sky)}
.heropick .opt.txt[aria-pressed="true"]{background:var(--sun)}
@media (max-width:380px){.heropick canvas{flex-basis:72px;width:72px;height:88px}.heropick .opt.sw{width:26px;height:26px}}