/* LUMO — big screen: scenery, top bar, Lumo dock, map, zone, result, modals. */

/* ------------------------------------------------------------ scenery --- */
#bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
#bg .sky { position: absolute; inset: 0; background: linear-gradient(180deg, #a9dcff 0%, #d6efff 38%, #fff3dc 70%, #fff8ec 100%); transition: background 2s; }
#bg .sun { position: absolute; width: 22vmin; height: 22vmin; right: 9vw; top: 7vh; border-radius: 50%; background: radial-gradient(circle, #fff7c2 0 35%, #ffe17a 55%, rgba(255, 210, 90, 0) 72%); filter: blur(0.5px); animation: sunPulse 8s ease-in-out infinite; }
@keyframes sunPulse { 50% { transform: scale(1.06); } }
#bg .cloud { position: absolute; height: 7vmin; border-radius: 99px; background: #fff; opacity: 0.85; filter: drop-shadow(0 0.6rem 0.8rem rgba(80, 120, 170, 0.12)); animation: drift linear infinite; }
#bg .cloud::before, #bg .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
#bg .cloud::before { width: 55%; height: 160%; left: 14%; bottom: 20%; }
#bg .cloud::after { width: 38%; height: 120%; right: 12%; bottom: 25%; }
#bg .c1 { width: 22vmin; top: 12vh; left: -25vmin; animation-duration: 90s; }
#bg .c2 { width: 15vmin; top: 26vh; left: -25vmin; animation-duration: 120s; animation-delay: -50s; opacity: 0.7; }
#bg .c3 { width: 18vmin; top: 6vh; left: -25vmin; animation-duration: 105s; animation-delay: -80s; }
@keyframes drift { to { transform: translateX(calc(100vw + 50vmin)); } }
#bg .hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62vh; }
#bg .h3 { fill: #bfe6a6; } #bg .h2 { fill: #9fd889; } #bg .h1 { fill: #7cc96b; }
#bg .fireflies i { position: absolute; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #fff6a8; box-shadow: 0 0 0.8rem 0.3rem rgba(255, 230, 110, 0.7); opacity: 0; animation: firefly ease-in-out infinite; }
@keyframes firefly { 0%, 100% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 0.9; } 50% { transform: translate(3vw, -4vh); } 70% { opacity: 0.6; } }
body[data-time='dusk'] #bg .sky { background: linear-gradient(180deg, #8e8fe0 0%, #f6a8b8 45%, #ffd6a0 75%, #fff1dc 100%); }
body[data-time='dusk'] #bg .h3 { fill: #a9c995; } body[data-time='dusk'] #bg .h2 { fill: #8fbb7f; } body[data-time='dusk'] #bg .h1 { fill: #74ab68; }
body[data-time='night'] #bg .sky { background: linear-gradient(180deg, #1c1f4a 0%, #3a3a7a 55%, #6c5a9a 100%); }
body[data-time='night'] #bg .sun { background: radial-gradient(circle, #fffbe6 0 30%, rgba(255, 250, 220, 0.3) 45%, rgba(255, 250, 220, 0) 65%); }
body[data-time='night'] #bg .cloud { opacity: 0.18; }
body[data-time='night'] #bg .h3 { fill: #3d5a67; } body[data-time='night'] #bg .h2 { fill: #314c58; } body[data-time='night'] #bg .h1 { fill: #273f4a; }
body:not([data-time='night']) #bg .fireflies { opacity: 0.35; }
/* activity screens: calmer backdrop tinted by the zone */
body[data-screen='activity'] #bg::after, body[data-screen='result'] #bg::after, body[data-screen='zone'] #bg::after, body[data-screen='album'] #bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--zone) 18%, #fffaf1) 0%, #fffaf1 70%);
  opacity: 0.92; transition: opacity 0.6s;
}

/* ------------------------------------------------------------- top bar --- */
#hud { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 0.8rem; padding: max(0.8rem, env(safe-area-inset-top)) 1.2rem 0.8rem; pointer-events: none; }
#hud > * { pointer-events: auto; }
.hud-btn { position: relative; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.9); box-shadow: var(--lift-s); transition: transform 0.15s var(--ease); color: var(--ink); }
.hud-btn:hover { transform: translateY(-2px); }
.hud-btn:active { transform: scale(0.92); }
.hud-btn.off { opacity: 0.5; }
.hud-btn.off::after { content: ''; position: absolute; width: 60%; height: 3px; background: var(--ink); transform: rotate(-40deg); border-radius: 2px; }
.hud-dot { position: absolute; top: 0.2rem; right: 0.2rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0.15rem #fff; }
#btn-home { background: var(--zone); color: #fff; }
.hud-title { font-family: 'Fredoka'; font-weight: 600; font-size: 1.5rem; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-progress { display: flex; gap: 0.45rem; margin-left: 0.4rem; }
.hud-progress i { width: 0.85rem; height: 0.85rem; border-radius: 50%; background: rgba(43, 29, 69, 0.12); transition: all 0.3s var(--spring); }
.hud-progress i.done { background: var(--zone); }
.hud-progress i.now { background: #fff; box-shadow: 0 0 0 0.22rem var(--zone); transform: scale(1.15); }
.hud-right { margin-left: auto; display: flex; gap: 0.6rem; align-items: center; }
.hud-chip { display: flex; align-items: center; gap: 0.5rem; height: 3.2rem; padding: 0 1rem 0 0.4rem; border-radius: 99px; background: rgba(255, 255, 255, 0.92); box-shadow: var(--lift-s); }
.chip-art { width: 2.4rem; }
.chip-name { font-family: 'Fredoka'; font-weight: 600; }
.chip-stars { color: #e0900b; font-weight: 800; }

/* --------------------------------------------------------------- dock --- */
#dock { position: fixed; z-index: 15; left: 1.2rem; bottom: 1rem; display: flex; align-items: flex-end; gap: 0.6rem; pointer-events: none; transition: all 0.6s var(--ease); }
#dock[data-pos='center'] { left: 50%; bottom: 52%; transform: translate(-50%, 50%) scale(1.7); }
#dock[data-pos='hidden'] { transform: translateY(150%); }
body[data-screen='map'] #dock, body[data-screen='zone'] #dock, body[data-screen='profiles'] #dock { flex-direction: column-reverse; align-items: flex-start; }
body[data-screen='map'] #bubble, body[data-screen='zone'] #bubble, body[data-screen='profiles'] #bubble { margin: 0 0 -0.6rem 3.5rem; border-radius: 1.6rem 1.6rem 1.6rem 0.4rem; max-width: min(26rem, 40vw); }
#lumo-slot { order: 0; width: 9rem; height: 9rem; }
#bubble { order: 1; max-width: min(34rem, 60vw); margin-bottom: 4.5rem; padding: 1rem 1.4rem; border-radius: 1.6rem 1.6rem 1.6rem 0.4rem; background: #fff; box-shadow: var(--lift); font-size: 1.15rem; line-height: 1.35; }
#bubble p { margin: 0; }
#bubble.in { animation: popIn 0.35s var(--spring) both; transform-origin: bottom left; }
#dock[data-pos='center'] #bubble { display: none; }
.lumo { width: 100%; height: 100%; animation: float 3.2s ease-in-out infinite; filter: drop-shadow(0 0.8rem 1rem rgba(255, 170, 30, 0.35)); }
.lumo svg { width: 100%; height: 100%; overflow: visible; }
@keyframes float { 50% { transform: translateY(-8%); } }
.lumo .l-wing { transform-box: fill-box; animation: flap 0.22s ease-in-out infinite alternate; }
.lumo .l-wl { transform-origin: 100% 70%; } .lumo .l-wr { transform-origin: 0% 70%; }
@keyframes flap { to { transform: rotate(-18deg) scaleY(0.75); } }
.lumo .l-wr { animation-name: flapR; } @keyframes flapR { to { transform: rotate(18deg) scaleY(0.75); } }
.lumo .l-glow { animation: glow 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes glow { 50% { opacity: 0.6; transform: scale(0.92); } }
.lumo .l-tip { animation: tip 1.6s ease-in-out infinite; }
@keyframes tip { 50% { opacity: 0.55; } }
.lumo .l-happy, .lumo .l-closed { display: none; }
.lumo.blink .l-white, .lumo.blink .l-pupil { transform: scaleY(0.1); }
.lumo .l-white, .lumo .l-pupil { transition: transform 0.07s; transform-box: fill-box; transform-origin: center; }
.lumo.mood-happy .l-white, .lumo.mood-happy .l-pupil, .lumo.mood-cheer .l-white, .lumo.mood-cheer .l-pupil { display: none; }
.lumo.mood-happy .l-happy, .lumo.mood-cheer .l-happy { display: block; }
.lumo.mood-sleep .l-white, .lumo.mood-sleep .l-pupil { display: none; }
.lumo.mood-sleep .l-closed { display: block; }
.lumo.mood-sleep { animation-duration: 6s; }
.lumo.mood-sleep .l-wing { animation: none; }
.lumo .l-zzz { display: none; font: 700 22px Fredoka; fill: #6a5c86; }
.lumo.mood-sleep .l-zzz { display: block; }
.lumo.mood-sleep .l-zzz text { animation: zz 2.4s ease-in-out infinite; }
.lumo.mood-sleep .l-zzz text:nth-child(2) { animation-delay: 0.4s; } .lumo.mood-sleep .l-zzz text:nth-child(3) { animation-delay: 0.8s; }
@keyframes zz { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.lumo.mood-cheer { animation: cheer 0.5s var(--spring) 3; }
@keyframes cheer { 50% { transform: translateY(-22%) rotate(-6deg) scale(1.06); } }
.lumo.mood-oops { animation: oops 0.6s ease-in-out; }
@keyframes oops { 30% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } }
.lumo.mood-think .l-pupil { transform: translate(4px, -5px); }

/* ------------------------------------------------------------- screens --- */
#screen { position: fixed; inset: 0; z-index: 10; }
.scr { position: absolute; inset: 0; padding: 5.2rem 2rem 2rem; animation: scrIn 0.45s var(--ease) both; }
.scr.leaving { animation: scrOut 0.18s ease-in both; }
@keyframes scrIn { from { opacity: 0; transform: translateY(1.2rem) scale(0.985); } }
@keyframes scrOut { to { opacity: 0; transform: translateY(-0.6rem); } }
.h { margin: 0 0 1.4rem; text-align: center; font-size: 2.6rem; font-weight: 600; letter-spacing: 0.01em; text-shadow: 0 3px 0 rgba(255, 255, 255, 0.8); }
.sub { text-align: center; color: var(--ink-2); margin: -0.8rem 0 1.6rem; }

/* start */
.scr-start { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 7vh; gap: 1.2rem; }
.logo { position: absolute; top: 8vh; left: 0; right: 0; display: flex; justify-content: center; gap: 0.2em; font-size: clamp(4rem, 13vmin, 9rem); font-weight: 700; }
.logo span { display: inline-block; color: #fff; -webkit-text-stroke: 0.06em var(--ink); paint-order: stroke fill; text-shadow: 0 0.08em 0 var(--ink); animation: letter 2.8s ease-in-out infinite; }
.logo span:nth-child(1) { color: var(--coral); } .logo span:nth-child(2) { color: var(--sun); animation-delay: 0.15s; } .logo span:nth-child(3) { color: var(--leaf); animation-delay: 0.3s; } .logo span:nth-child(4) { color: var(--sky); animation-delay: 0.45s; }
@keyframes letter { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-0.12em) rotate(3deg); } }
.tagline { position: absolute; top: calc(8vh + clamp(4rem, 13vmin, 9rem) * 1.25); left: 0; right: 0; text-align: center; margin: 0; font-size: 1.3rem; color: var(--ink-2); }
.btn-play { font-size: 1.8rem; min-height: 4.6rem; padding: 0 3rem; --b: linear-gradient(180deg, #ffd84f, #ffa21a); --t: #4a2a00; --edge: #d9810a; animation: pulse 2.2s ease-in-out infinite; }
.play-tri { width: 0; height: 0; border-left: 1.1rem solid currentColor; border-top: 0.7rem solid transparent; border-bottom: 0.7rem solid transparent; }
.start-ways { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.start-ways div { display: flex; flex-direction: column; padding: 0.7rem 1.2rem; border-radius: 1.2rem; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(6px); box-shadow: var(--lift-s); text-align: center; }
.start-ways span { font-weight: 600; color: var(--ink-2); font-size: 0.85rem; }

/* profiles */
.scr-profiles { display: flex; flex-direction: column; justify-content: center; }
.profile-row { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
.profile-bubble { --c: var(--sun); position: relative; width: 11rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1.2rem 1rem 1rem; border-radius: 2rem; background: #fff; box-shadow: 0 0.4rem 0 color-mix(in srgb, var(--c) 70%, #000 0%), var(--lift); border: 0.25rem solid var(--c); transition: transform 0.25s var(--spring); animation: popIn 0.5s var(--spring) both; }
.profile-bubble:hover { transform: translateY(-0.4rem) rotate(-1.5deg); }
.pb-art { width: 7rem; }
.pb-name { font-family: 'Fredoka'; font-weight: 600; font-size: 1.5rem; }
.pb-age { color: var(--ink-2); font-size: 0.95rem; }
.profile-bubble.add { --c: #d9d2ea; border-style: dashed; justify-content: center; background: rgba(255, 255, 255, 0.6); box-shadow: none; }
.plus { font-size: 4rem; line-height: 1; color: var(--ink-2); }

/* new profile */
.scr-newprofile { overflow-y: auto; }
.np-grid { max-width: 56rem; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding: 1.6rem; border-radius: 2rem; background: rgba(255, 255, 255, 0.92); box-shadow: var(--lift); }
.np-field { display: flex; flex-direction: column; gap: 0.5rem; }
.np-field > span { font-family: 'Fredoka'; font-weight: 600; font-size: 1.1rem; }
.np-field.wide { grid-column: 1 / -1; }
.np-field input { height: 3.4rem; border-radius: 1rem; border: 0.18rem solid var(--line); padding: 0 1rem; font-size: 1.4rem; font-weight: 700; outline: none; background: var(--paper); }
.np-field input:focus { border-color: var(--sun); }
.ages { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.age { width: 3rem; height: 3rem; border-radius: 50%; background: var(--paper); font-family: 'Fredoka'; font-size: 1.2rem; font-weight: 600; box-shadow: inset 0 0 0 0.15rem var(--line); transition: all 0.2s var(--spring); }
.age.on, .av.on, .tone.on { background: #fff4d6; box-shadow: inset 0 0 0 0.22rem var(--sun), var(--lift-s); transform: scale(1.08); }
.avatars, .tones { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.av, .tone { width: 4.6rem; height: 4.6rem; padding: 0.5rem; border-radius: 1.2rem; background: var(--paper); box-shadow: inset 0 0 0 0.15rem var(--line); transition: all 0.2s var(--spring); }
.tone { width: 3.8rem; height: 3.8rem; }
.np-actions { display: flex; justify-content: center; gap: 1rem; margin-top: 1.4rem; }

/* map */
.scr-map { padding: 0; }
.world { position: absolute; left: 4vw; right: 4vw; top: 9vh; bottom: 22vh; }
.island { --c: var(--sun); position: absolute; transform: translate(-50%, 0); width: clamp(7rem, 15vmin, 12rem); display: flex; flex-direction: column; align-items: center; animation: islIn 0.7s var(--spring) both; }
@keyframes islIn { from { opacity: 0; transform: translate(-50%, 2rem) scale(0.7); } }
.island:hover .isl-art { transform: translateY(-12%) scale(1.06) rotate(-3deg); }
.island:active .isl-art { transform: scale(0.94); }
.isl-art { position: relative; z-index: 2; width: 72%; transition: transform 0.35s var(--spring); animation: bob 4s ease-in-out infinite; }
.island:nth-child(2n) .isl-art { animation-delay: -1.3s; } .island:nth-child(3n) .isl-art { animation-delay: -2.4s; }
@keyframes bob { 50% { transform: translateY(-6%); } }
.isl-base { position: absolute; z-index: 1; top: 40%; width: 100%; aspect-ratio: 2.4; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #ffffff 0%, color-mix(in srgb, var(--c) 35%, #fff) 60%, color-mix(in srgb, var(--c) 70%, #fff) 100%); box-shadow: 0 0.6rem 0 color-mix(in srgb, var(--c) 65%, #333 10%), 0 1.4rem 2rem rgba(43, 29, 69, 0.18); }
.isl-ring { position: absolute; z-index: 0; top: -6%; width: 104%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.45) 0); -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 70%, transparent 71%); mask: radial-gradient(circle, transparent 64%, #000 65%, #000 70%, transparent 71%); opacity: 0.9; }
.isl-name { position: relative; z-index: 3; margin-top: 0.8rem; padding: 0.3rem 1rem; border-radius: 99px; background: #fff; font-family: 'Fredoka'; font-weight: 600; font-size: 1.15rem; box-shadow: var(--lift-s); white-space: nowrap; border-bottom: 0.22rem solid var(--c); }
.isl-stars { position: relative; z-index: 3; margin-top: 0.3rem; font-size: 0.85rem; color: #fff; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.cta { position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%); display: flex; align-items: center; gap: 1.2rem; padding: 1rem 1.6rem 1rem 1rem; border-radius: 99px; background: linear-gradient(180deg, #ffd84f, #ffa21a); color: #4a2a00; box-shadow: 0 0.45rem 0 #d9810a, 0 1.2rem 2.4rem rgba(217, 129, 10, 0.4); animation: ctaIn 0.8s 0.4s var(--spring) both; transition: transform 0.2s var(--ease); }
.cta:hover { transform: translateX(-50%) translateY(-3px); }
.cta:active { transform: translateX(-50%) translateY(0.3rem); box-shadow: 0 0.1rem 0 #d9810a; }
@keyframes ctaIn { from { opacity: 0; transform: translate(-50%, 2rem); } }
.cta-play { width: 4.2rem; height: 4.2rem; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: inset 0 -0.25rem 0 rgba(0, 0, 0, 0.08); }
.cta-play::after { content: ''; margin-left: 0.4rem; border-left: 1.4rem solid #ff9c1a; border-top: 0.9rem solid transparent; border-bottom: 0.9rem solid transparent; }
.cta-txt { display: flex; flex-direction: column; text-align: left; }
.cta-txt b { font-family: 'Fredoka'; font-weight: 600; font-size: 1.6rem; }
.cta-txt small { font-size: 0.85rem; opacity: 0.8; }
.cta-icons { display: flex; gap: 0.4rem; margin-left: 0.4rem; }
.cta-step { width: 2.8rem; height: 2.8rem; padding: 0.35rem; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 0.2rem var(--c); }
.cta-step.done { opacity: 0.45; }

/* zone */
.scr-zone { overflow-y: auto; }
.zone-head { display: flex; align-items: center; gap: 1.4rem; max-width: 70rem; margin: 0 auto 1.6rem; }
.zone-art { width: 6rem; animation: bob 4s ease-in-out infinite; }
.zone-titles h1 { margin: 0; font-size: 2.4rem; font-weight: 600; }
.zone-titles p { margin: 0.2rem 0 0; color: var(--ink-2); }
.act-grid { max-width: 70rem; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.4rem; padding-bottom: 8rem; }
.act-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.4rem 1rem 1.1rem; border-radius: 1.8rem; background: #fff; box-shadow: 0 0.35rem 0 color-mix(in srgb, var(--zone) 55%, #fff), var(--lift); border: 0.2rem solid color-mix(in srgb, var(--zone) 30%, #fff); animation: popIn 0.5s var(--spring) both; transition: transform 0.25s var(--spring); }
.act-card:hover { transform: translateY(-0.4rem); }
.act-art { width: 5.4rem; }
.act-title { font-family: 'Fredoka'; font-weight: 600; font-size: 1.2rem; text-align: center; line-height: 1.15; }
.act-stars { display: flex; gap: 0.25rem; }
.act-stars i { width: 1.1rem; height: 1.1rem; background: #e7e1f2; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.act-stars i.on { background: #ffbf1f; }
.act-badge { position: absolute; top: -0.7rem; right: 0.8rem; padding: 0.15rem 0.7rem; border-radius: 99px; background: var(--rose); color: #fff; font-size: 0.72rem; box-shadow: var(--lift-s); }
.act-badge.tool { background: var(--sky); }

/* activity */
.scr-activity { display: flex; padding: 5.4rem 2rem 1.6rem 11rem; }
.game { position: relative; flex: 1; display: flex; }
.game > * { flex: 1; }
.game-in { animation: scrIn 0.4s var(--ease) both; }
.intro-card { align-self: center; justify-self: center; margin: auto; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 2rem 3rem; border-radius: 2.4rem; background: #fff; box-shadow: var(--lift); }
.intro-art { width: 9rem; animation: bob 3s ease-in-out infinite; }
.intro-card h2 { margin: 0.6rem 0 0; font-size: 2rem; font-weight: 600; }
.with-parent { margin: 0.6rem 0 0; padding: 0.3rem 1rem; border-radius: 99px; background: #ffe3ef; color: #b02a64; font-size: 0.95rem; }

/* result */
.scr-result, .scr-end, .scr-bye { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding-left: 11rem; }
.result-card { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1.6rem 2.6rem 1.8rem; border-radius: 2.4rem; background: #fff; box-shadow: var(--lift); max-width: 44rem; }
.stars-big { display: flex; gap: 1rem; }
.stars-big .star { width: 4.4rem; height: 4.4rem; background: #ece6f6; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars-big .star:nth-child(2) { transform: translateY(-0.8rem) scale(1.15); }
.stars-big .star.pop { background: linear-gradient(180deg, #ffe066, #ffab00); animation: starPop 0.6s var(--spring) both; }
.stars-big .star:nth-child(2).pop { animation-name: starPop2; }
@keyframes starPop { from { transform: scale(0.2) rotate(-40deg); } }
@keyframes starPop2 { from { transform: translateY(-0.8rem) scale(0.2) rotate(-40deg); } to { transform: translateY(-0.8rem) scale(1.15); } }
.sticker { width: 7rem; height: 7rem; padding: 0.8rem; border-radius: 50%; background: radial-gradient(circle, #fff 55%, color-mix(in srgb, var(--zone) 25%, #fff)); box-shadow: inset 0 0 0 0.3rem var(--zone); opacity: 0; transform: scale(0.3) rotate(-30deg); }
.sticker.reveal { animation: stickerIn 0.7s var(--spring) both; }
@keyframes stickerIn { to { opacity: 1; transform: none; } }
.learned { margin: 0.2rem 0 0; font-family: 'Fredoka'; font-weight: 500; font-size: 1.45rem; text-align: center; line-height: 1.3; }
.real { max-width: 44rem; display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; padding: 1rem 1.4rem; border-radius: 1.4rem; background: rgba(255, 255, 255, 0.82); box-shadow: var(--lift-s); border-left: 0.4rem solid var(--zone); }
.real b { grid-column: 1 / -1; font-family: 'Fredoka'; font-weight: 600; }
.real span { grid-column: 1 / -1; font-weight: 600; color: var(--ink-2); }
.real small { grid-column: 1 / -1; color: var(--ink-2); opacity: 0.7; font-size: 0.75rem; }
.result-btns { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* end */
.end-list { display: flex; flex-direction: column; gap: 0.6rem; max-width: 46rem; }
.end-item { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1.2rem 0.6rem 0.6rem; border-radius: 1.2rem; background: #fff; box-shadow: var(--lift-s); animation: popIn 0.5s var(--spring) both; }
.end-item .art { width: 3rem; flex: none; }
.end-stars { font-family: 'Fredoka'; font-weight: 600; font-size: 1.3rem; color: #d58a00; }

/* album */
.scr-album { overflow-y: auto; padding-bottom: 9rem; }
.album-zone { max-width: 70rem; margin: 0 auto 1.4rem; padding: 1rem 1.4rem; border-radius: 1.6rem; background: rgba(255, 255, 255, 0.85); box-shadow: var(--lift-s); border-top: 0.35rem solid var(--c); }
.album-zone h2 { margin: 0 0 0.6rem; font-weight: 600; }
.album-grid { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.album-slot { width: 4.6rem; height: 4.6rem; padding: 0.6rem; border-radius: 50%; background: #f1edf8; }
.album-slot .art { filter: grayscale(1) brightness(1.6) opacity(0.35); }
.album-slot.has { background: #fff; box-shadow: inset 0 0 0 0.22rem var(--c), var(--lift-s); }
.album-slot.has .art { filter: drop-shadow(0 0.2rem 0.2rem rgba(0, 0, 0, 0.15)); }

/* ------------------------------------------------------------- overlay --- */
#overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(43, 29, 69, 0.42); backdrop-filter: blur(6px); animation: fadeIn 0.25s both; }
@keyframes fadeIn { from { opacity: 0; } }
.modal { width: min(92vw, 46rem); max-height: 88vh; overflow: auto; padding: 1.6rem 2rem; border-radius: 2rem; background: #fff; box-shadow: var(--lift); animation: popIn 0.4s var(--spring) both; user-select: text; }
.modal h2 { margin: 0 0 0.6rem; font-weight: 600; }
.modal .close { margin-top: 1rem; }
.gate { text-align: center; }
.hold { --p: 0; position: relative; width: 9rem; height: 9rem; margin: 1rem auto; display: grid; place-items: center; border-radius: 50%; background: #f5f1fb; }
.hold svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.hold circle { fill: none; stroke: var(--violet); stroke-width: 8; stroke-dasharray: 327; stroke-dashoffset: calc(327 * (1 - var(--p))); stroke-linecap: round; }
.phone-body { display: flex; gap: 1.6rem; align-items: center; }
.qr { width: 15rem; flex: none; padding: 0.6rem; border-radius: 1rem; background: #fff; box-shadow: inset 0 0 0 0.15rem var(--line); }
.qr svg { width: 100%; height: auto; display: block; }
.phone ol { margin: 0; padding-left: 1.2rem; line-height: 1.5; }
.room b { font-family: 'Fredoka'; font-size: 1.6rem; letter-spacing: 0.15em; }
.pads { color: var(--ink-2); }
.phone-status { padding: 0.7rem 0.9rem; border-radius: 0.8rem; background: #fff5da; }
.phone-status[data-state="ready"] { background: #e7f7eb; color: #205c35; }
.phone-status[data-state="error"] { background: #fff0eb; color: #873e25; }
.phone .qr { min-height: 8rem; display: grid; place-items: center; text-align: center; font-size: 0.9rem; color: var(--ink-2); }
.phone-link { margin-top: 1rem; }
.phone-link label { display: block; margin-bottom: 0.4rem; font-size: 0.9rem; }
.phone-copy { display: flex; align-items: center; gap: 0.6rem; }
.phone-copy input { width: 100%; min-width: 0; padding: 0.65rem; border: 2px solid var(--line); border-radius: 0.7rem; font-size: 0.8rem; background: var(--paper); user-select: text; }
.phone-link a { display: inline-block; margin-top: 0.55rem; color: #5941b5; font-size: 0.85rem; }
.phone #phone-retry { margin: 0.5rem 0.6rem 0 0; }
.parent { width: min(94vw, 64rem); padding-top: 0.8rem; }
.tabs { display: flex; gap: 0.4rem; position: sticky; top: -0.8rem; padding: 0.4rem 0 0.8rem; background: #fff; z-index: 2; }
.tabs button { padding: 0.5rem 1rem; border-radius: 99px; font-weight: 800; color: var(--ink-2); }
.tabs button.on { background: var(--ink); color: #fff; }
.tabs .x { margin-left: auto; width: 2.6rem; background: #f3eff9; }
.pv-child { padding: 1rem 0 1.4rem; border-bottom: 1px solid var(--line); }
.pv-head { display: flex; align-items: center; gap: 0.8rem; }
.pv-head .art { width: 3rem; }
.pv-head h3 { margin: 0; }
.pv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin: 0.8rem 0; }
.pv-kpis div { padding: 0.6rem; border-radius: 1rem; background: #f7f4fb; text-align: center; }
.pv-kpis b { display: block; font-family: 'Fredoka'; font-size: 1.6rem; }
.pv-kpis span { font-size: 0.75rem; color: var(--ink-2); }
.pv-zone { display: grid; grid-template-columns: 9rem 1fr 15rem; align-items: center; gap: 0.8rem; margin: 0.35rem 0; font-size: 0.85rem; }
.pz-bar { position: relative; height: 0.8rem; border-radius: 99px; background: #efeaf6; overflow: hidden; }
.pz-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: color-mix(in srgb, var(--c) 40%, #fff); }
.pz-bar i.m { background: var(--c); }
.pz-n { color: var(--ink-2); }
.pv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.8rem; font-size: 0.9rem; font-weight: 600; }
.pv-cols h4 { margin: 0 0 0.3rem; }
.pv-cols p { margin: 0 0 0.4rem; }
.muted { color: var(--ink-2); }
.sv .row, .pa-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.sv .row span { display: flex; flex-direction: column; }
.sv small { color: var(--ink-2); font-weight: 600; }
.sv select, .sv input[type='range'], .pa-row select, .sv input[inputmode] { min-width: 10rem; height: 2.6rem; border-radius: 0.8rem; border: 0.15rem solid var(--line); background: var(--paper); padding: 0 0.6rem; }
.sv input[type='checkbox'] { width: 1.6rem; height: 1.6rem; accent-color: var(--violet); }
.pa-row .art { width: 2.6rem; }
.pa-row b { flex: 1; }
.pa > .btn { margin-top: 1rem; }
.about { font-weight: 600; line-height: 1.5; }
.about h3 { margin: 1rem 0 0.2rem; }

#toast { position: fixed; z-index: 50; left: 50%; top: 5.2rem; transform: translateX(-50%); padding: 0.6rem 1.4rem; border-radius: 99px; background: var(--ink); color: #fff; box-shadow: var(--lift); }
#toast.in { animation: popIn 0.35s var(--spring) both; }
#fx { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }

/* ------------------------------------------------- narrow / portrait --- */
@media (max-aspect-ratio: 1/1) {
  .world { position: relative; left: 0; right: 0; top: 0; bottom: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; padding: 5.6rem 1rem 10rem; height: 100%; overflow-y: auto; }
  .island { position: relative; left: auto !important; top: auto !important; transform: none; margin: 0 auto; }
  @keyframes islIn { from { opacity: 0; transform: translateY(2rem) scale(0.7); } }
  .cta { bottom: 2rem; width: calc(100% - 2rem); }
  .cta-icons { display: none; }
  .scr-activity { padding: 5rem 1rem 9rem; }
  .scr-result, .scr-end, .scr-bye { padding-left: 1rem; padding-bottom: 9rem; }
  #lumo-slot { width: 6rem; height: 6rem; }
  #bubble { margin-bottom: 2.6rem; font-size: 1rem; max-width: calc(100vw - 9rem); }
  .hud-title, #btn-album, .chip-name { display: none; }
  .np-grid { grid-template-columns: 1fr; }
  .phone-body { flex-direction: column; }
}
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  .scr-activity { padding-left: 8rem; }
  #lumo-slot { width: 6.5rem; height: 6.5rem; }
}

/* during activities and results the caption becomes a subtitle under the top bar, so it never hides an answer */
body[data-screen='activity'] #bubble, body[data-screen='result'] #bubble, body[data-screen='end'] #bubble {
  position: fixed; top: 4.6rem; left: 0; right: 0; width: fit-content; max-width: min(64rem, 70vw); margin: 0 auto;
  padding: 0.55rem 1.4rem; border-radius: 99px; font-size: 1.05rem; text-align: center; transform-origin: top center;
}
.scr-activity { padding-top: 8rem; }
.scr-result, .scr-end { padding-top: 7rem; }
body[data-time='night'] .h { color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
body[data-time='night'] .end-stars { color: #ffd45e; }