:root{--color-sky:#bfe6f2;--color-sky-deep:#6cc3dd;--color-leaf:#1f7a5a;--color-leaf-soft:#8fd19e;--color-sun:#f6c343;--color-sun-deep:#e09a1a;--color-earth:#7a4b2a;--color-batik:#5b2c1a;--color-cream:#fff8e7;--color-ink:#2a1d14;--color-ink-soft:#5c4a3c;--color-danger:#c2412d;--color-surface:#fffdf6;--color-focus:#2563eb;--font-display:"Baloo 2", "Nunito", system-ui, sans-serif;--font-body:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;--text-sm:clamp(.95rem, .9rem + .2vw, 1.05rem);--text-base:clamp(1.05rem, 1rem + .3vw, 1.2rem);--text-lg:clamp(1.3rem, 1.1rem + .8vw, 1.7rem);--text-hero:clamp(2.3rem, 1.4rem + 4vw, 4.4rem);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--radius-sm:10px;--radius-md:18px;--radius-lg:28px;--radius-pill:999px;--shadow-soft:0 6px 18px #2a1d141f;--shadow-press:0 4px 0 #2a1d1440;--tap-min:48px;--duration-fast:.15s;--duration-normal:.3s;--ease-bounce:cubic-bezier(.34, 1.56, .64, 1)}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-ink);background:var(--color-sky);-webkit-font-smoothing:antialiased;line-height:1.5}h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.1}button,input,select{font:inherit}:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.page{min-height:100%;padding:var(--space-6) var(--space-4)}.loading-screen{place-content:center;justify-items:center;gap:var(--space-4);min-height:100%;font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-leaf);display:grid}.loading-screen__sun{background:radial-gradient(circle at 35% 35%, #fff4c2, var(--color-sun) 60%, var(--color-sun-deep));border-radius:50%;width:64px;height:64px;animation:1.4s ease-in-out infinite sun-pulse}@keyframes sun-pulse{50%{transform:scale(1.12)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--tap-min);padding:var(--space-2) var(--space-6);border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:700;font-size:var(--text-base);cursor:pointer;transition:transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background-color var(--duration-fast) ease;border:0;text-decoration:none;display:inline-flex}.btn:disabled{cursor:progress;opacity:.7}.btn--primary{color:var(--color-batik);background:var(--color-sun);box-shadow:0 5px 0 var(--color-sun-deep)}.btn--primary:hover:not(:disabled){box-shadow:0 7px 0 var(--color-sun-deep);transform:translateY(-2px)}.btn--primary:active:not(:disabled){box-shadow:0 1px 0 var(--color-sun-deep);transform:translateY(4px)}.btn--ghost{color:var(--color-leaf);box-shadow:inset 0 0 0 2px var(--color-leaf);background:#fffdf6d9}.btn--ghost:hover{background:var(--color-surface)}.btn--block{width:100%}.btn--hero{min-height:60px;padding-inline:var(--space-8);font-size:var(--text-lg)}.brand{align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);color:var(--color-batik);text-decoration:none;display:inline-flex}.brand__mark{background:var(--color-leaf);width:40px;height:40px;color:var(--color-sun);border-radius:12px;place-items:center;font-size:1.3rem;display:grid;transform:rotate(-6deg)}.form{gap:var(--space-4);display:grid}.field{gap:var(--space-1);display:grid}.field__label{color:var(--color-ink);font-weight:700}.field__control{display:flex;position:relative}.field__input{width:100%;min-height:var(--tap-min);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);color:var(--color-ink);transition:border-color var(--duration-fast) ease;background:#fff;border:2px solid #d9cbb0}.field__input:focus-visible{border-color:var(--color-focus);outline:none;box-shadow:0 0 0 3px #2563eb33}.field--invalid .field__input{border-color:var(--color-danger)}.field__toggle{padding:0 var(--space-3);background:var(--color-cream);color:var(--color-leaf);font-weight:700;font-size:var(--text-sm);cursor:pointer;border:0;border-radius:8px;position:absolute;inset:4px 4px 4px auto}.field__hint,.check__note{font-size:var(--text-sm);color:var(--color-ink-soft);margin:0}.field__error,.form__error,.check--invalid+.check__note{font-size:var(--text-sm);color:var(--color-danger);margin:0;font-weight:700}.form__error:empty{display:none}.check{align-items:center;gap:var(--space-3);min-height:var(--tap-min);font-weight:600;display:flex}.check input{width:24px;height:24px;accent-color:var(--color-leaf);flex-shrink:0}.check__note{margin-top:calc(var(--space-3) * -1)}.scene{isolation:isolate;min-height:100%;position:relative;overflow:hidden}.landscape{z-index:-1;width:100%;height:100%;position:fixed;inset:0}.landscape__sun{transform-origin:1120px 210px;animation:6s ease-in-out infinite sun-breathe}.landscape__clouds{animation:40s linear infinite alternate clouds-drift}.landscape__palm{transform-box:fill-box}@keyframes sun-breathe{50%{transform:scale(1.06)}}@keyframes clouds-drift{to{transform:translate(80px)}}.welcome{gap:var(--space-8);max-width:1180px;min-height:100dvh;padding:var(--space-4) var(--space-4) var(--space-6);flex-direction:column;margin:0 auto;display:flex}.welcome__top{justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}.welcome__hero{max-width:720px;padding-top:clamp(var(--space-4), 6vh, var(--space-12))}.welcome__eyebrow,.auth__eyebrow{margin:0 0 var(--space-3);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--color-leaf);color:var(--color-cream);font-weight:700;font-size:var(--text-sm);letter-spacing:.02em;display:inline-block}.welcome__title{font-size:var(--text-hero);color:var(--color-batik);text-wrap:balance;text-shadow:0 3px #fff8e7b3;font-weight:800}.welcome__title-accent{color:var(--color-leaf);display:block}.welcome__lead{max-width:34rem;margin:var(--space-4) 0 var(--space-6);font-size:var(--text-lg);color:var(--color-ink);text-shadow:0 0 12px #fff8e7e6,0 0 4px #fff8e7e6;font-weight:600}.welcome__actions{align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.welcome__hint{margin:0;font-weight:700}.welcome__hint a,.auth__switch a,.form__error a{color:var(--color-leaf);font-weight:800}.welcome__note{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-ink-soft);text-align:center;background:#fffdf6d9;margin-top:auto;font-weight:600}.zones-strip__list{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin:0;padding:0;list-style:none;display:grid}.zone-chip{column-gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--color-surface);border-bottom:5px solid var(--zone-color);box-shadow:var(--shadow-soft);transition:transform var(--duration-normal) var(--ease-bounce);grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;display:grid}.zone-chip:nth-child(odd){transform:rotate(-1.2deg)}.zone-chip:nth-child(2n){transform:rotate(1deg)}.zone-chip:hover{transform:translateY(-4px)rotate(0)}.zone-chip__emoji{grid-row:span 2;font-size:1.8rem}.zone-chip__name{font-family:var(--font-display);font-weight:700;line-height:1.1}.zone-chip__meta{color:var(--color-ink-soft);font-size:.85rem;font-weight:600}.zone-chip--soon{background:#fffdf6b3}.zone-chip--soon .zone-chip__emoji{filter:grayscale(.6);opacity:.75}.auth{align-content:start;justify-items:center;gap:var(--space-6);min-height:100dvh;padding:var(--space-4) var(--space-4) var(--space-12);display:grid}.auth>.brand{justify-self:start}.auth__card{width:100%;max-width:440px;padding:var(--space-8) var(--space-6) var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface);position:relative;box-shadow:0 0 0 6px #fffdf680,0 24px 48px #2a1d142e}.auth__card:before{content:"";border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:repeating-linear-gradient(90deg, var(--color-batik) 0 14px, var(--color-sun-deep) 14px 20px, var(--color-leaf) 20px 34px, var(--color-sun-deep) 34px 40px);height:10px;position:absolute;inset:0 0 auto}.auth__title{color:var(--color-batik);font-size:clamp(2rem,1.6rem + 2vw,2.6rem);font-weight:800}.auth__subtitle{margin:var(--space-2) 0 var(--space-6);color:var(--color-ink-soft);font-weight:600}.auth__switch{margin:var(--space-6) 0 0;text-align:center;font-weight:600}@media (width>=768px){.auth{align-content:center}.auth>.brand{top:var(--space-4);left:var(--space-6);position:absolute}}.profiles{align-items:center;gap:var(--space-6);max-width:1000px;min-height:100dvh;padding:var(--space-4) var(--space-4) var(--space-12);flex-direction:column;margin:0 auto;display:flex}.profiles__top{justify-content:flex-end;align-items:center;gap:var(--space-3);width:100%;display:flex}.profiles__admin-link{margin-right:auto}.profiles__account{padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);font-size:var(--text-sm);color:var(--color-ink-soft);text-overflow:ellipsis;white-space:nowrap;background:#fffdf6cc;font-weight:700;overflow:hidden}.profiles__title{margin-top:clamp(var(--space-2), 4vh, var(--space-8));color:var(--color-batik);text-align:center;text-shadow:0 3px #fff8e7b3;font-size:clamp(2rem,1.3rem + 3vw,3.4rem);font-weight:800}.profiles__manage{align-self:center}.profiles__panel{width:100%;max-width:620px;padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:0 24px 48px #2a1d142e}.profiles__panel:focus{outline:none}.profiles__panel-title{margin-bottom:var(--space-4);font-size:var(--text-lg);color:var(--color-batik)}.child-grid{justify-content:center;align-items:start;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(140px,180px));width:100%;margin:0;padding:0;list-style:none;display:grid}.child-card{align-content:start;gap:var(--space-2);justify-items:center;display:grid}.child-card__play{justify-items:center;gap:var(--space-2);width:100%;padding:var(--space-4) var(--space-3);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-soft);color:inherit;cursor:pointer;transition:transform var(--duration-normal) var(--ease-bounce), box-shadow var(--duration-fast) ease;border:0;display:grid}button.child-card__play:hover{transform:translateY(-6px)rotate(-1deg);box-shadow:0 16px 28px #2a1d1433}button.child-card__play:active{transform:translateY(2px)}.child-card--managing .child-card__play{cursor:default;opacity:.85}.child-card__name{font-family:var(--font-display);font-size:var(--text-lg);text-align:center;overflow-wrap:anywhere;font-weight:700;line-height:1.1}.child-card--add .child-card__play{background:#fffdf699;box-shadow:inset 0 0 0 3px #1f7a5a66}.child-card__tools,.child-card__confirm{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.child-card__confirm p{width:100%;font-size:var(--text-sm);text-align:center;margin:0;font-weight:700}.child-card__tools .btn,.child-card__confirm .btn{padding-inline:var(--space-4)}.avatar{background:radial-gradient(circle at 35% 30%, #fff8 0 20%, transparent 21%), var(--avatar-color,var(--color-leaf-soft));border-radius:50%;flex-shrink:0;place-items:center;line-height:1;display:grid;box-shadow:inset 0 -5px #0000001f}.avatar--md{width:56px;height:56px;font-size:2rem}.avatar--lg{width:96px;height:96px;font-size:3.4rem}.avatar--add{background:var(--color-cream);color:var(--color-leaf);font-family:var(--font-display);font-weight:800}.level-tag{padding:2px var(--space-3);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:800}.level--mudah{--level-color:#2e8b57;--level-bg:#dff3e4}.level--sedang{--level-color:#b26a00;--level-bg:#fff0cc}.level--sulit{--level-color:#b3261e;--level-bg:#fde2df}.level-tag{background:var(--level-bg);color:var(--level-color)}.choice{gap:var(--space-2);border:0;margin:0;padding:0;display:grid}.choice__grid{gap:var(--space-2);display:grid}.choice__grid--avatars{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}.choice__grid--levels{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.choice__item{align-content:start;justify-items:center;gap:var(--space-1);padding:var(--space-3) var(--space-2);border-radius:var(--radius-md);background:var(--color-cream);text-align:center;cursor:pointer;transition:border-color var(--duration-fast) ease, transform var(--duration-fast) ease;border:3px solid #0000;display:grid;position:relative}.choice__item input{opacity:0;pointer-events:none;position:absolute}.choice__item:hover{transform:translateY(-2px)}.choice__item:has(input:checked){border-color:var(--color-leaf);box-shadow:var(--shadow-soft);background:#fff}.choice__item:has(input:focus-visible){outline:3px solid var(--color-focus);outline-offset:2px}.choice__item--level:has(input:checked){border-color:var(--level-color)}.choice__label{font-weight:800;font-size:var(--text-sm);line-height:1.2}.choice__item--level .choice__label{font-family:var(--font-display);font-size:var(--text-lg);color:var(--level-color)}.choice__meta{color:var(--color-ink-soft);font-size:.85rem;font-weight:600;line-height:1.25}.choice__grid--voices{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.choice__item--voice{text-align:left;justify-items:start}.reader-voice{gap:var(--space-3);border:0;min-width:0;margin:0;padding:0;display:grid}.reader-voice__rate{gap:var(--space-1);display:grid}.reader-voice__rate output{color:var(--color-leaf)}.reader-voice__rate input[type=range]{width:100%;min-height:var(--tap-min);accent-color:var(--color-leaf)}.reader-voice__scale{color:var(--color-ink-soft);justify-content:space-between;font-size:.85rem;font-weight:600;display:flex}.reader-voice__preview{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.reader-voice__credit{color:var(--color-ink-soft);font-size:.85rem}.child-form__actions{justify-content:flex-end;gap:var(--space-3);flex-wrap:wrap;display:flex}.btn--danger{color:#fff;background:var(--color-danger);box-shadow:0 4px #8f2d1f}.btn--ghost-danger{color:var(--color-danger);box-shadow:inset 0 0 0 2px var(--color-danger)}.notice{justify-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-soft);text-align:center;display:grid}.notice p{margin:0;font-weight:700}.notice--error p{color:var(--color-danger)}@media (width<=480px){.child-grid{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr))}.avatar--lg{width:76px;height:76px;font-size:2.6rem}}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.game{background:var(--color-sky);touch-action:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0;overflow:hidden}.world-layer{z-index:0;position:absolute;inset:0}.world-canvas{z-index:0;inset:0;position:absolute!important}.game .loading-screen{z-index:5;background:var(--color-sky);position:absolute;inset:0}.hud-top{top:max(var(--space-3), env(safe-area-inset-top));left:max(var(--space-3), env(safe-area-inset-left));right:max(var(--space-3), env(safe-area-inset-right));justify-content:space-between;align-items:center;gap:var(--space-3);pointer-events:none;z-index:10;display:flex;position:absolute}.hud-top>*{pointer-events:auto}.hud-player{align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-4) var(--space-1) var(--space-1);border-radius:var(--radius-pill);box-shadow:var(--shadow-soft);background:#fffdf6e6;display:flex}.hud-player__name{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);color:var(--color-batik)}.touch-controls{z-index:10;padding:0 max(var(--space-6), env(safe-area-inset-right)) max(var(--space-6), env(safe-area-inset-bottom)) max(var(--space-6), env(safe-area-inset-left));pointer-events:none;justify-content:space-between;align-items:flex-end;display:flex;position:absolute;inset:auto 0 0}.joystick,.run-button{pointer-events:auto;touch-action:none;-webkit-touch-callout:none}.joystick{--joystick-size:clamp(116px, 30vw, 150px);width:var(--joystick-size);height:var(--joystick-size);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:background-color var(--duration-fast) ease;background:radial-gradient(circle,#0000 38%,#ffffff40 39% 41%,#0000 42%),#2a1d1438;border-radius:50%;place-items:center;display:grid;position:relative;box-shadow:inset 0 0 0 3px #fffdf6b3,0 8px 20px #2a1d1433}.joystick--active{background-color:#2a1d1452}.joystick__knob{background:radial-gradient(circle at 35% 30%, #fff8dc, var(--color-sun) 55%, var(--color-sun-deep));width:42%;height:42%;box-shadow:0 4px 0 var(--color-sun-deep), 0 8px 14px #2a1d144d;will-change:transform;border-radius:50%}.joystick:not(.joystick--active) .joystick__knob{transition:transform var(--duration-normal) var(--ease-bounce)}.run-button{background:var(--color-surface);width:clamp(80px,22vw,96px);height:clamp(80px,22vw,96px);color:var(--color-leaf);font-family:var(--font-display);box-shadow:inset 0 0 0 3px var(--color-leaf), 0 6px 0 #1f7a5a73;-webkit-user-select:none;user-select:none;border:0;border-radius:50%;align-content:center;place-items:center;font-weight:800;display:grid}.run-button--active{background:var(--color-leaf);color:var(--color-cream);transform:translateY(4px);box-shadow:0 2px #1f7a5a73}.run-button__icon{font-size:1.8rem;line-height:1}.run-button__label{font-size:var(--text-sm)}.hud-stars{margin-left:var(--space-1);padding:2px var(--space-3);border-radius:var(--radius-pill);color:var(--color-sun-deep);font-family:var(--font-display);font-weight:800;font-size:var(--text-base);background:#fff0cc;align-items:center;gap:4px;display:inline-flex}.hud-stars--pop{animation:stars-pop .6s var(--ease-bounce)}@keyframes stars-pop{40%{transform:scale(1.35)}}.hud-actions{gap:var(--space-2);display:flex}.hud-button{align-items:center;gap:var(--space-2);min-height:var(--tap-min);padding:0 var(--space-4);border-radius:var(--radius-pill);color:var(--color-leaf);font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);cursor:pointer;box-shadow:inset 0 0 0 2px var(--color-leaf), var(--shadow-soft);background:#fffdf6f0;border:0;text-decoration:none;display:inline-flex}.hud-button>span:first-child{font-size:1.2rem}.hud-button[aria-pressed=false]{opacity:.75}.hud-button:hover{background:#fff}@media (width<=640px){.hud-button{width:var(--tap-min);justify-content:center;padding:0}.hud-button__label{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.hud-player__name{text-overflow:ellipsis;white-space:nowrap;max-width:7ch;overflow:hidden}}.minimap{top:calc(max(var(--space-3), env(safe-area-inset-top)) + 64px);right:max(var(--space-3), env(safe-area-inset-right));z-index:10;width:clamp(120px,22vw,180px);box-shadow:var(--shadow-soft);pointer-events:none;background:#fffdf6e0;border-radius:50%;margin:0;padding:6px;position:absolute}.minimap svg{width:100%;height:auto;display:block}.minimap__ground{fill:#8fd18a;stroke:#5fa864;stroke-width:1.5px}.minimap__path{stroke:#d9b27c;stroke-width:3px;stroke-linecap:round}.minimap__plaza{fill:#e8d3a8}.minimap__zone{stroke:#fff;stroke-width:1.5px}.minimap__zone--soon{opacity:.45}.minimap__emoji{text-anchor:middle;font-size:7px}.minimap__check{fill:#1f7a5a;paint-order:stroke;stroke:#fff;stroke-width:2px;font-size:7px;font-weight:900}.minimap__view{fill:#ffffff8c}.minimap__player{fill:var(--color-danger);stroke:#fff;stroke-width:1.5px}.hud-exit{box-shadow:inset 0 0 0 2px var(--color-leaf), var(--shadow-soft)}.zone-prompt{left:50%;bottom:max(var(--space-6), env(safe-area-inset-bottom));z-index:15;align-items:center;gap:var(--space-3);max-width:calc(100% - 2 * var(--space-4));padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:var(--color-surface);box-shadow:inset 0 0 0 3px var(--zone-color,var(--color-leaf)), 0 12px 28px #2a1d1440;animation:prompt-pop var(--duration-normal) var(--ease-bounce);display:flex;position:absolute;transform:translate(-50%)}.touch-controls~.zone-prompt{bottom:calc(max(var(--space-6), env(safe-area-inset-bottom)) + 150px)}.zone-prompt:has(~.touch-controls){bottom:calc(max(var(--space-6), env(safe-area-inset-bottom)) + 150px)}.zone-prompt__emoji{font-size:2rem;line-height:1}.zone-prompt__text{line-height:1.2;display:grid}.zone-prompt__text strong{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-batik)}.zone-prompt__text span{font-size:var(--text-sm);color:var(--color-ink-soft);font-weight:700}@keyframes prompt-pop{0%{opacity:0;transform:translate(-50%,16px)scale(.9)}}.activity-backdrop{z-index:30;padding:var(--space-4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:backdrop-in var(--duration-normal) ease;background:#1f322873;place-items:center;display:grid;position:absolute;inset:0}.activity-panel{border-radius:var(--radius-lg);background:var(--color-surface);width:min(760px,100%);max-height:min(92dvh,720px);animation:panel-in var(--duration-normal) var(--ease-bounce);flex-direction:column;display:flex;overflow:hidden;box-shadow:0 30px 60px #140c0659}.activity-panel__header{align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-4) var(--space-4) var(--space-6);background:var(--zone-color,var(--color-leaf));background:color-mix(in srgb, var(--zone-color,var(--color-leaf)) 55%, #000);color:#fff;display:flex}.activity-panel__header>div{flex:1;min-width:0}.activity-panel__emoji{background:#ffffff40;border-radius:16px;place-items:center;width:56px;height:56px;font-size:2rem;display:grid}.activity-panel__title{text-shadow:0 2px #00000026;font-size:clamp(1.6rem,1.2rem + 1.5vw,2.2rem)}.activity-panel__subject{opacity:.92;margin:0;font-weight:700}.activity-panel__close{width:var(--tap-min);height:var(--tap-min);color:var(--color-batik);cursor:pointer;background:#ffffffeb;border:0;border-radius:50%;place-items:center;font-size:1.3rem;font-weight:800;display:grid}.activity-panel__close:hover{background:#fff}.activity-panel__body{padding:var(--space-6);overflow-y:auto}.activity-panel__credit{padding:var(--space-1) var(--space-6) var(--space-2);text-align:right;color:var(--color-ink-soft);margin:0;font-size:.8rem}@keyframes backdrop-in{0%{opacity:0}}@keyframes panel-in{0%{opacity:0;transform:translateY(24px)scale(.96)}}.zone-hub__empty,.coming-soon__lead{font-size:var(--text-lg);text-align:center;margin:0;font-weight:600}.zone-hub__list{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0;padding:0;list-style:none;display:grid}.zone-hub__intro{margin:0 0 var(--space-3);color:var(--color-ink-soft);font-weight:700}.activity-card{gap:var(--space-1);width:100%;padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-cream);color:inherit;text-align:left;cursor:pointer;transition:transform var(--duration-normal) var(--ease-bounce), box-shadow var(--duration-fast) ease;border:0;justify-items:start;display:grid;box-shadow:inset 0 -4px #2a1d1414,inset 0 0 0 2px #0000}.activity-card:hover{box-shadow:inset 0 -4px 0 #2a1d1414, inset 0 0 0 3px var(--zone-color,var(--color-leaf));transform:translateY(-3px)}.star-row{gap:2px;font-size:1.3rem;line-height:1;display:inline-flex}.star-row__on{color:var(--color-sun-deep)}.star-row__off{color:#d9ccb4}.activity-panel__icon-button{width:var(--tap-min);height:var(--tap-min);color:#fff;cursor:pointer;background:#ffffff40;border:0;border-radius:14px;flex-shrink:0;place-items:center;font-size:1.4rem;font-weight:800;display:grid}.activity-panel__icon-button:hover{background:#ffffff61}.activity-loading{text-align:center;color:var(--color-ink-soft);margin:0;font-weight:700}.quiz{gap:var(--space-4);display:grid}.quiz__progress{justify-content:center;gap:var(--space-2);margin:0;padding:0;list-style:none;display:flex}.quiz__dot{width:12px;height:12px;transition:transform var(--duration-fast) ease;background:#e3d6bd;border-radius:50%}.quiz__dot--done{background:var(--color-leaf-soft)}.quiz__dot--current{background:var(--zone-color,var(--color-leaf));transform:scale(1.35)}.quiz__question{align-items:center;gap:var(--space-2) var(--space-3);grid-template-columns:1fr auto;display:grid}.quiz__visual{padding:var(--space-3);border-radius:var(--radius-md);background:var(--color-cream);text-align:center;letter-spacing:.08em;overflow-wrap:anywhere;grid-column:1/-1;margin:0;font-size:clamp(1.8rem,1.4rem + 2vw,2.6rem);line-height:1.35}.quiz__prompt{font-family:var(--font-display);margin:0;font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem);font-weight:700;line-height:1.25}.speak-button{width:var(--tap-min);height:var(--tap-min);background:var(--color-cream);cursor:pointer;border:0;border-radius:50%;place-items:center;font-size:1.4rem;display:grid;box-shadow:inset 0 0 0 2px #e3d6bd}.quiz__choices{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));display:grid}.choice{align-items:center;gap:var(--space-2);min-height:64px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:var(--color-ink);font-family:var(--font-display);font-size:var(--text-lg);text-align:left;cursor:pointer;transition:transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, opacity var(--duration-fast) ease;background:#fff;border:0;font-weight:700;display:flex;position:relative;box-shadow:inset 0 0 0 3px #e3d6bd,0 4px #e3d6bd}.choice:hover:not(:disabled){box-shadow:inset 0 0 0 3px var(--zone-color,var(--color-leaf)), 0 6px 0 #e3d6bd;transform:translateY(-2px)}.choice:active:not(:disabled){box-shadow:inset 0 0 0 3px var(--zone-color,var(--color-leaf)), 0 1px 0 #e3d6bd;transform:translateY(3px)}.choice:disabled{cursor:default}.choice__key{background:var(--color-cream);width:28px;height:28px;color:var(--color-ink-soft);border-radius:8px;flex-shrink:0;place-items:center;font-size:.9rem;display:grid}.choice__emoji{font-size:1.6rem}.choice--correct{background:#dff3e4;box-shadow:inset 0 0 0 3px #2e8b57,0 4px #2e8b57}.choice--wrong{box-shadow:inset 0 0 0 3px var(--color-danger), 0 4px 0 var(--color-danger);background:#fde2df;animation:.36s shake}.choice--dim{opacity:.55}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}.quiz__feedback{justify-items:center;gap:var(--space-2);text-align:center;min-height:3rem;display:grid}.quiz__feedback p{margin:0}.feedback--good,.feedback--try{font-family:var(--font-display);font-size:var(--text-lg);font-weight:800}.feedback--good{color:#2e8b57}.feedback--try{color:var(--color-danger)}.quiz__explanation{color:var(--color-ink-soft);font-weight:600}.quiz__stage-hint{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--color-ink-soft);text-align:center;background:#8fd05a2e;margin:0;font-weight:700}.sequence{gap:var(--space-4);display:grid}.sequence__slots{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}.slot{align-items:center;gap:var(--space-3);width:100%;min-height:56px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--color-cream);color:var(--color-ink);font:inherit;text-align:left;cursor:default;border:3px dashed #d9c9a8;font-weight:700;display:flex}.slot--filled{border-style:solid;border-color:var(--zone-color,var(--color-leaf));cursor:pointer;background:#fff}.slot--filled:disabled{cursor:default}.slot--right{background:#dff3e4;border-color:#2e8b57}.slot--wrong{border-color:var(--color-danger);background:#fde2df}.slot__number{background:var(--zone-color,var(--color-leaf));background:color-mix(in srgb, var(--zone-color,var(--color-leaf)) 55%, #000);color:#fff;width:32px;height:32px;font-family:var(--font-display);border-radius:50%;flex-shrink:0;place-items:center;font-weight:800;display:grid}.slot__emoji{font-size:1.6rem}.sequence__pool{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.card-chip{align-items:center;gap:var(--space-2);min-height:var(--tap-min);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);color:var(--color-ink);font:inherit;cursor:pointer;transition:transform var(--duration-fast) ease;background:#fff;border:0;font-weight:700;display:inline-flex;box-shadow:inset 0 0 0 3px #e3d6bd,0 4px #e3d6bd}.card-chip span{font-size:1.4rem}.card-chip:hover{box-shadow:inset 0 0 0 3px var(--zone-color,var(--color-leaf)), 0 6px 0 #e3d6bd;transform:translateY(-2px)}.sequence--letters .sequence__slots{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.sequence--letters .slot{width:clamp(44px,11vw,60px);height:clamp(52px,13vw,70px);min-height:0;font-family:var(--font-display);justify-content:center;padding:0;font-size:clamp(1.6rem,1.2rem + 2vw,2.2rem)}.sequence--letters .card-chip{width:clamp(48px,12vw,62px);height:clamp(48px,12vw,62px);font-family:var(--font-display);border-radius:14px;justify-content:center;padding:0;font-size:clamp(1.5rem,1.2rem + 1.5vw,2rem)}.how-to{width:min(480px,100%)}.how-to__title{margin-bottom:var(--space-2);color:var(--color-batik);text-align:center;font-size:clamp(1.6rem,1.3rem + 1.2vw,2.1rem)}.how-to__lead{margin:0 0 var(--space-4);text-align:center;color:var(--color-ink-soft);font-weight:600}.how-to__list{gap:var(--space-2);margin:0 0 var(--space-4);display:grid}.how-to__row{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--color-cream);grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.how-to__row dt,.how-to__row dd{margin:0}.how-to__row dd{font-weight:700}.how-to kbd{padding:2px var(--space-2);font-family:var(--font-body);font-weight:800;font-size:var(--text-sm);background:#fff;border-radius:8px;display:inline-block;box-shadow:inset 0 0 0 2px #e3d6bd,0 2px #e3d6bd}.passport__header{background:linear-gradient(135deg,#2c4f8a,#1f3a66)}.passport__owner{align-items:center;gap:var(--space-3);margin:0 0 var(--space-4);font-weight:700;display:flex}.passport__grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(120px,1fr));margin:0;padding:0;list-style:none;display:grid}.stamp{padding:var(--space-3) var(--space-2);border-radius:var(--radius-md);background:var(--color-cream);text-align:center;border:3px dashed #d9c9a8;justify-items:center;gap:2px;display:grid}.stamp__seal{filter:grayscale();opacity:.45;border-radius:50%;place-items:center;width:64px;height:64px;font-size:2rem;display:grid}.stamp__name{font-family:var(--font-display);font-weight:700;line-height:1.1}.stamp__meta{color:var(--color-ink-soft);font-size:.85rem;font-weight:700}.stamp--earned,.stamp--gold{border-style:solid;border-color:var(--zone-color);background:#fff}.stamp--earned .stamp__seal,.stamp--gold .stamp__seal{filter:none;opacity:1;border:4px double var(--zone-color);animation:stamp-in .42s var(--ease-bounce) both;transform:rotate(-12deg)}.stamp--gold .stamp__seal{border-color:var(--color-sun-deep);background:radial-gradient(circle,#fff6cf,#f8cf4f);box-shadow:0 0 0 3px #fff0cc}.stamp--locked{opacity:.6}@keyframes stamp-in{0%{opacity:0;transform:scale(1.8)rotate(-30deg)}}.passport__hint{margin:var(--space-4) 0 0;font-size:var(--text-sm);color:var(--color-ink-soft);text-align:center;font-weight:600}.reward{justify-items:center;gap:var(--space-2);text-align:center;display:grid}.reward__stars{gap:var(--space-2);font-size:clamp(3rem,2rem + 5vw,4.5rem);line-height:1;display:flex}.reward__star{color:#e3d6bd}.reward__star--earned{color:var(--color-sun);text-shadow:0 4px 0 var(--color-sun-deep);animation:star-pop .52s var(--ease-bounce) both}.reward__star:nth-child(2){transform:translateY(-12px)}@keyframes star-pop{0%{opacity:0;transform:scale(.2)rotate(-40deg)}}.reward__message{margin:var(--space-2) 0 0;font-family:var(--font-display);color:var(--color-batik);font-size:clamp(1.5rem,1.2rem + 1.5vw,2rem);font-weight:800}.reward__score,.reward__save{color:var(--color-ink-soft);margin:0;font-weight:700}.reward__badge{padding:var(--space-1) var(--space-4);border-radius:var(--radius-pill);color:var(--color-sun-deep);background:#fff0cc;margin:0;font-weight:800}.reward__actions{justify-content:center;gap:var(--space-3);margin-top:var(--space-2);flex-wrap:wrap;display:flex}.link-button{color:var(--color-leaf);font:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-weight:800;text-decoration:underline}.activity-card__emoji{font-size:2rem}.activity-card__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700}.activity-card__desc{font-size:var(--text-sm);color:var(--color-ink-soft)}.coming-soon{justify-items:center;gap:var(--space-4);display:grid}.coming-soon__lock{margin:0;font-size:3.5rem;line-height:1}.fact-card{width:100%;padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);border-left:6px solid var(--color-sun);background:#fff6d8}.fact-card__title{margin:0 0 var(--space-1);font-family:var(--font-display);color:var(--color-sun-deep);font-weight:800}.fact-card__text{margin:0;font-weight:600}@media (width<=480px){.activity-backdrop{align-items:end;padding:0}.activity-panel{border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:94dvh}.activity-panel__body{padding:var(--space-4)}}.world-layer--hidden{visibility:hidden}.zone-scene{z-index:40;background:var(--color-sky);position:absolute;inset:0}.zone-scene__stage{animation:.7s both scene-reveal;position:absolute;inset:0}.zone-scene__canvas{inset:0;position:absolute!important}.zone-scene__ui{pointer-events:none;position:absolute;inset:0}.zone-scene__ui>*{pointer-events:auto}.zone-scene__hud{top:max(var(--space-3), env(safe-area-inset-top));left:max(var(--space-3), env(safe-area-inset-left));right:max(var(--space-3), env(safe-area-inset-right));align-items:center;gap:var(--space-3);pointer-events:none;display:flex;position:absolute}.zone-scene__hud>*{pointer-events:auto}.zone-scene__title{align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-4);border-radius:var(--radius-pill);box-shadow:var(--shadow-soft);font-size:var(--text-lg);background:#fffdf6e0;margin-right:auto;display:flex}.zone-scene__title h2{font-family:var(--font-display);font-size:var(--text-lg);color:color-mix(in srgb, var(--zone-color,var(--color-leaf)) 55%, #000);margin:0}.scene-panel{top:calc(max(var(--space-3), env(safe-area-inset-top)) + var(--tap-min) + var(--space-3));right:max(var(--space-4), env(safe-area-inset-right));bottom:max(var(--space-4), env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);width:min(460px,44vw);max-height:none;animation:scene-panel-in .45s var(--ease-bounce) both;background:#fffdf6f0;animation-delay:.15s;position:absolute}.zone-scene__credit{left:max(var(--space-3), env(safe-area-inset-left));bottom:max(var(--space-2), env(safe-area-inset-bottom));padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);color:var(--color-ink-soft);background:#fffdf6d9;margin:0;font-size:.8rem;position:absolute}.zone-loading{z-index:2;place-content:center;justify-items:center;gap:var(--space-4);padding:var(--space-6);text-align:center;color:var(--color-ink);display:grid;position:absolute;inset:0}.zone-loading__emoji{filter:drop-shadow(0 10px 12px #2a1d1433);font-size:clamp(4rem,3rem + 5vw,7rem);line-height:1;animation:1.1s ease-in-out infinite loading-hop}.zone-loading__title{font-family:var(--font-display);font-size:var(--text-hero);color:color-mix(in srgb, var(--zone-color,var(--color-leaf)) 55%, #000);margin:0;font-weight:800;line-height:1.05}.zone-loading__bar{border-radius:var(--radius-pill);width:min(360px,80vw);height:18px;box-shadow:inset 0 0 0 2px var(--zone-color,var(--color-leaf));background:#fffdf6cc;padding:3px}.zone-loading__fill{border-radius:inherit;background:linear-gradient(90deg, var(--color-sun), var(--zone-color,var(--color-leaf)));min-width:12px;height:100%;transition:width var(--duration-normal) ease;display:block}.zone-loading__tip{max-width:34rem;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);font-size:var(--text-base);color:var(--color-ink-soft);background:#fffdf6d9;margin:0}.zone-loading__tip strong{color:color-mix(in srgb, var(--zone-color,var(--color-leaf)) 55%, #000);font-family:var(--font-display);display:block}@keyframes scene-reveal{0%{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}@keyframes scene-panel-in{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:none}}@keyframes loading-hop{0%,to{transform:translateY(0)rotate(-4deg)}50%{transform:translateY(-18px)rotate(4deg)}}@media (width<=720px){.scene-panel{border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:auto;max-height:62dvh;animation-name:scene-sheet-in;inset:auto 0 0}.zone-scene__credit{top:calc(max(var(--space-3), env(safe-area-inset-top)) + var(--tap-min) + var(--space-2));bottom:auto}@keyframes scene-sheet-in{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}}@media (prefers-reduced-motion:reduce){.zone-scene__stage,.scene-panel,.zone-loading__emoji{animation:none}}