:root{--paper: #FAF8F3;--paper-soft: #FFFFFF;--cream: #FFF6E8;--ink: #1F2A37;--ink-soft: #5A6573;--amber: #FF7A45;--amber-soft: #FFD3BD;--forest: #2D6A4F;--forest-soft: #D6E7DD;--sky: #6FA8C9;--sky-soft: #D6E8F2;--violet: #7E6FB8;--violet-soft: #E1DCF1;--danger: #B23A2E;--danger-soft: #F4D8D3;--twilight-top: #0e1330;--twilight-mid: #1a2440;--twilight-low: #2a2a4a;--twilight-glow: #ff9c66;--radius-card: 20px;--radius-pill: 999px;--shadow-card: 0 1px 2px rgba(15, 20, 40, .18), 0 12px 32px rgba(15, 20, 40, .28);--shadow-soft: 0 8px 24px rgba(15, 20, 40, .16);--font-display: "Fredoka", "Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;--font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden}html{background:var(--twilight-top)}body{font-family:var(--font-body);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:manipulation}button{font-family:inherit;cursor:pointer}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}#forest{position:fixed;inset:0;width:100%;height:100%;z-index:0;background:radial-gradient(120% 70% at 50% 100%,rgba(255,156,102,.22),transparent 55%),linear-gradient(180deg,var(--twilight-top) 0%,var(--twilight-mid) 60%,var(--twilight-low) 100%)}.app{position:fixed;inset:0;z-index:1;display:flex;align-items:stretch;justify-content:stretch;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}.scene-root{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden}.cora-hud{position:absolute;left:clamp(12px,3vw,28px);bottom:clamp(12px,3vw,28px);display:flex;align-items:flex-end;gap:12px;z-index:4;pointer-events:none;max-width:min(440px,80vw)}.cora-avatar{width:clamp(64px,12vw,96px);height:clamp(64px,12vw,96px);flex-shrink:0;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));transition:transform .22s cubic-bezier(.5,0,.2,1)}.cora-avatar.is-bounce{animation:cora-bounce .7s cubic-bezier(.5,0,.2,1)}@keyframes cora-bounce{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-8px) scale(1.05)}to{transform:translateY(0) scale(1)}}.cora-bubble{background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:18px 18px 18px 6px;box-shadow:var(--shadow-soft);font-size:clamp(.875rem,2.2vw,1rem);line-height:1.4;max-width:320px;animation:bubble-in .28s cubic-bezier(.2,.8,.2,1);pointer-events:none}@keyframes bubble-in{0%{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.top-hud{position:absolute;top:clamp(10px,2.5vw,20px);right:clamp(12px,3vw,28px);display:flex;gap:8px;z-index:4;pointer-events:auto}.chip{background:#0f14288c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--paper);font-family:var(--font-display);font-weight:500;font-size:.95rem;padding:8px 14px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.1);display:inline-flex;align-items:center;gap:6px}.chip svg{width:18px;height:18px}.chip-stars{color:var(--amber-soft)}.overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:safe center;justify-content:safe center;padding:clamp(20px,4vw,40px);background:radial-gradient(60% 60% at 50% 50%,#0f142859,#0f1428b3);animation:overlay-in .28s ease-out;overflow-y:auto;overscroll-behavior:contain}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.panel{background:var(--paper);color:var(--ink);border-radius:var(--radius-card);padding:clamp(24px,5vw,40px);box-shadow:var(--shadow-card);max-width:520px;width:100%;text-align:center;animation:panel-in .36s cubic-bezier(.2,.8,.2,1);margin:auto}@keyframes panel-in{0%{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.panel h1,.panel h2{font-family:var(--font-display);margin:0 0 8px;color:var(--ink);letter-spacing:-.01em}.panel h1{font-size:clamp(1.5rem,5vw,2.2rem)}.panel h2{font-size:clamp(1.2rem,4vw,1.6rem)}.panel p{margin:0 0 16px;color:var(--ink-soft);font-size:clamp(.95rem,2.4vw,1.05rem);line-height:1.55}.panel-mascot{width:96px;height:96px;margin:0 auto 12px;display:block}.btn-primary{background:var(--amber);color:var(--paper);border:none;font-family:var(--font-display);font-weight:500;font-size:1.125rem;padding:14px 28px;min-height:52px;border-radius:var(--radius-pill);box-shadow:0 6px 16px #ff7a4559;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.btn-primary:hover{background:#ff8a5a}.btn-primary:active{transform:translateY(1px);box-shadow:0 3px 10px #ff7a454d}.btn-primary:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.btn-secondary{background:transparent;color:var(--ink-soft);border:none;font-family:var(--font-body);font-size:.95rem;padding:10px 14px;margin-top:8px;text-decoration:underline;text-underline-offset:3px}.btn-secondary:hover{color:var(--ink)}.btn-secondary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}.card-backdrop{position:absolute;inset:0;z-index:6;display:flex;align-items:safe center;justify-content:safe center;padding:clamp(12px,3vw,28px);background:#0f14288c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:overlay-in .22s ease-out;overflow-y:auto;overscroll-behavior:contain}.card{background:var(--cream);color:var(--ink);border-radius:var(--radius-card);padding:clamp(18px,4vw,32px);box-shadow:var(--shadow-card);max-width:560px;width:100%;animation:panel-in .32s cubic-bezier(.2,.8,.2,1);margin:auto}.card-kicker{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--amber);font-weight:600;margin-bottom:6px}.card-prompt{font-family:var(--font-display);font-size:clamp(1.25rem,3.6vw,1.6rem);margin:0 0 4px;line-height:1.25;color:var(--ink)}.card-hint{color:var(--ink-soft);font-size:.95rem;margin:0 0 18px}.card-target{font-family:var(--font-display);font-weight:500;font-size:clamp(1.4rem,5vw,2.2rem);text-align:center;letter-spacing:.08em;margin:4px 0 14px;color:var(--ink);background:var(--paper);border-radius:14px;padding:12px}.card-emoji{font-size:clamp(2.5rem,9vw,4rem);text-align:center;margin:0 0 12px;line-height:1}.options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.options-letters{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));max-width:360px;margin:0 auto}.opt{background:var(--paper-soft);color:var(--ink);border:2px solid transparent;border-radius:14px;padding:14px 12px;min-height:56px;font-family:var(--font-display);font-weight:500;font-size:clamp(1rem,2.6vw,1.15rem);box-shadow:0 2px 6px #0f14280f;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease}.opt:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px #0f14281a;border-color:var(--amber-soft)}.opt:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.opt:disabled{cursor:default;opacity:.85}.opt.is-correct{background:var(--forest-soft);border-color:var(--forest);color:var(--forest)}.opt.is-wrong{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}.opt.is-faded{opacity:.55}.opt-icon{display:inline-block;margin-right:6px;vertical-align:-3px}.btn-tts{display:flex;align-items:center;gap:6px;width:fit-content;margin:0 auto 12px;padding:8px 14px;background:var(--cream);color:var(--ink);border:2px solid var(--amber-soft);border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:500;font-size:.95rem;box-shadow:0 2px 6px #0f14280f;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.btn-tts:hover:not(:disabled){transform:translateY(-1px);border-color:var(--amber);box-shadow:0 6px 16px #0f14281a}.btn-tts:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.feedback{margin-top:16px;padding:12px 14px;border-radius:12px;font-size:.95rem;line-height:1.5;display:flex;gap:10px;align-items:flex-start;animation:bubble-in .24s ease-out}.feedback-correct{background:var(--forest-soft);color:var(--forest)}.feedback-wrong{background:var(--danger-soft);color:var(--danger)}.feedback strong{font-family:var(--font-display);font-weight:500}.card-actions{display:flex;justify-content:flex-end;margin-top:18px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 6px}.stat{background:var(--paper-soft);border-radius:14px;padding:12px 8px}.stat-value{font-family:var(--font-display);font-size:1.6rem;color:var(--amber);line-height:1.1}.stat-label{font-size:.75rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}.echo{position:absolute;width:clamp(64px,12vw,96px);height:clamp(64px,12vw,96px);background:transparent;border:none;padding:0;cursor:pointer;transform:translate(-50%,-50%);z-index:3;color:var(--paper);-webkit-tap-highlight-color:transparent}.echo:focus-visible{outline:none}.echo:focus-visible .echo-orb{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--ink),0 0 24px var(--echo-color, var(--amber)),inset 0 0 12px #fff6}.echo-halo{position:absolute;inset:-40%;border-radius:50%;background:radial-gradient(circle,var(--echo-color, var(--amber)) 0%,transparent 60%);opacity:var(--echo-life, .7);transition:opacity .7s linear;pointer-events:none}.echo-orb{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95) 0%,var(--echo-color, var(--amber)) 45%,rgba(0,0,0,.25) 100%);box-shadow:0 0 24px var(--echo-color, var(--amber)),inset 0 0 12px #fff6;animation:echo-pulse 2.4s ease-in-out infinite}.echo-label{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);font-family:var(--font-display);font-weight:500;font-size:.9rem;color:var(--paper);text-shadow:0 1px 6px rgba(0,0,0,.55);white-space:nowrap;pointer-events:none}.echo.is-dim .echo-orb{animation:none;opacity:.35}.echo.is-gone{animation:echo-fade .36s ease forwards;pointer-events:none}@keyframes echo-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes echo-fade{to{opacity:0;transform:translate(-50%,-50%) scale(.7)}}.echo-float{animation:echo-float 5.5s ease-in-out infinite}@keyframes echo-float{0%,to{translate:0 0}50%{translate:0 -8px}}.chip-back{background:#0f14288c;color:var(--paper);border:1px solid rgba(255,255,255,.12);cursor:pointer;font-family:var(--font-display);gap:6px}.chip-back:hover{background:#0f1428bf}.chip-back:focus-visible{outline:3px solid var(--paper);outline-offset:2px}.chip-back svg{width:18px;height:18px}.chip-combo{background:linear-gradient(135deg,#ff7a458c,#7e6fb88c);color:var(--paper);border:1px solid rgba(255,255,255,.2);transition:transform .2s ease,box-shadow .2s ease;animation:combo-pop .28s cubic-bezier(.2,.8,.2,1)}.chip-combo.is-tier-1{box-shadow:0 0 18px #ffd3bd73}.chip-combo.is-tier-2{box-shadow:0 0 22px #ff9c668c}.chip-combo.is-tier-3{box-shadow:0 0 28px #ffd3bdb3;animation:combo-pulse 1.8s ease-in-out infinite}@keyframes combo-pop{0%{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}@keyframes combo-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.combo-icon{font-size:1.1em}.panel-kicker{font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;letter-spacing:.12em;color:var(--amber);margin-bottom:6px}.panel-meta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}.meta-chip{background:var(--forest-soft);color:var(--forest);font-size:.8rem;padding:6px 12px;border-radius:var(--radius-pill);font-family:var(--font-display)}.meta-chip-warm{background:var(--amber-soft);color:var(--amber)}.result-badge{margin:16px 0 0;padding:14px;border-radius:14px;background:var(--cream);display:flex;align-items:center;justify-content:center;gap:10px;border:2px solid var(--amber-soft)}.result-badge .badge-icon{font-size:2rem;line-height:1}.result-badge strong{font-family:var(--font-display);font-weight:500;color:var(--ink)}.result-unlock{margin:14px 0 0;padding:14px;border-radius:14px;background:var(--forest-soft);color:var(--forest);display:flex;flex-direction:column;align-items:center;gap:4px;animation:bubble-in .3s ease-out}.result-unlock strong{font-family:var(--font-display);font-weight:500}.result-actions{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:18px}.overlay-map{background:radial-gradient(60% 60% at 50% 50%,#0f142880,#0f1428d9);padding:clamp(12px,3vw,28px)}.map-frame{background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-card);max-width:760px;width:100%;height:100%;max-height:min(92vh,100%);min-height:0;overflow:hidden;display:flex;flex-direction:column;position:relative;animation:panel-in .36s cubic-bezier(.2,.8,.2,1)}.map-header{display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,2.5vw,22px) clamp(16px,3vw,28px) 8px;flex-wrap:wrap;gap:10px}.map-title{font-family:var(--font-display);font-size:clamp(1.3rem,4vw,1.8rem);margin:0;color:var(--ink)}.map-stats{display:flex;gap:8px;flex-wrap:wrap}.map-stats .chip{background:var(--cream);color:var(--ink);border:1px solid var(--amber-soft)}.map-stage{position:relative;flex:1 1 auto;min-height:0;background:linear-gradient(180deg,#1a2440,#2d2855 70%,#4a3d72);overflow:hidden}.map-svg{width:100%;height:100%;display:block}.map-trail{fill:none;stroke:url(#trail-grad);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:2 1.6;opacity:.85}.map-node{cursor:pointer;transition:transform .2s ease}.map-node:focus{outline:none}.map-node:focus-visible .map-node-bg{stroke:var(--paper);stroke-width:.6}.map-node-bg{fill:var(--cream);stroke:#fff6;stroke-width:.3;transition:fill .24s ease,transform .24s ease}.map-node-ring{fill:none;stroke:transparent;stroke-width:.6;transition:stroke .2s ease,transform .2s ease}.map-node-icon{font-size:5.2px;pointer-events:none;user-select:none}.map-node-label{fill:var(--paper);font-family:var(--font-display);font-weight:500;pointer-events:none;paint-order:stroke;stroke:#0f142899;stroke-width:.3}.map-node-star{fill:var(--amber);pointer-events:none}.map-node.is-locked{cursor:not-allowed}.map-node.is-locked .map-node-bg{fill:#ffffff1f}.map-node.is-locked .map-node-icon,.map-node.is-locked .map-node-label{opacity:.5}.map-node.is-unlocked .map-node-bg{fill:var(--cream)}.map-node.is-pulse .map-node-bg{fill:var(--amber-soft)}.map-node.is-pulse .map-node-ring{stroke:var(--amber);animation:map-pulse 2.2s ease-in-out infinite}@keyframes map-pulse{0%,to{stroke-opacity:.4;transform:scale(1)}50%{stroke-opacity:1;transform:scale(1.4)}}.map-node.is-completed .map-node-bg{fill:var(--forest-soft)}.map-node.is-mastery .map-node-bg{fill:#ffe48a}.map-node.is-mastery .map-node-ring{stroke:#ffd37a;stroke-opacity:.9}.map-cora{position:absolute;bottom:clamp(40px,8%,88px);right:clamp(8px,2vw,18px);width:clamp(48px,10vw,80px);height:clamp(48px,10vw,80px);pointer-events:none;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}@media (max-height: 480px){.map-cora{display:none}}.map-badges{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:14px clamp(14px,3vw,22px) 18px;background:var(--paper-soft);border-top:1px solid var(--amber-soft)}.badge{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:12px;opacity:.35;transition:opacity .2s ease}.badge.is-got{opacity:1}.badge.is-gold{background:linear-gradient(135deg,#ffe9b0,#ffd37a)}.badge .badge-icon{font-size:1.4rem;line-height:1}.badge .badge-name{font-size:.65rem;text-align:center;line-height:1.1;color:var(--ink-soft);font-family:var(--font-display)}.badge.is-got .badge-name{color:var(--ink)}@media (max-width: 520px){.map-badges{grid-template-columns:repeat(3,1fr)}}@media (max-height: 480px){.map-badges{padding:6px 10px;gap:2px}.map-badges .badge{padding:4px 2px}.map-badges .badge .badge-name{display:none}.map-header{padding:8px 16px 4px}.map-title{font-size:clamp(1rem,3vw,1.3rem)}}@media (max-width: 480px){.map-node-label{font-size:4.8px}.map-node-icon{font-size:6px}}.echo-falling .echo-orb{box-shadow:0 0 30px var(--echo-color, var(--amber)),0 0 60px #ffffff2e,inset 0 0 12px #ffffff80}.echo-falling .echo-halo{background:radial-gradient(circle,rgba(255,255,255,.5),transparent 60%)}.silabas-slots{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px 0}.silaba-slot{background:var(--paper);border:2px dashed var(--amber-soft);border-radius:12px;padding:14px 18px;min-width:64px;min-height:56px;font-family:var(--font-display);font-weight:500;font-size:clamp(1rem,3vw,1.25rem);color:var(--ink);cursor:pointer;transition:background .16s,border-color .16s}.silaba-slot.is-filled{border-style:solid;border-color:var(--forest);background:var(--forest-soft);color:var(--forest)}.silaba-slot.is-correct{border-color:var(--forest);background:var(--forest-soft);color:var(--forest)}.silaba-slot.is-wrong{border-color:var(--danger);background:var(--danger-soft);color:var(--danger);animation:shake .22s ease-in-out 2}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.silabas-tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 4px}.silaba-tile{background:var(--paper-soft);color:var(--ink);border:2px solid transparent;border-radius:12px;padding:12px 16px;min-height:56px;font-family:var(--font-display);font-weight:500;font-size:clamp(1rem,2.6vw,1.1rem);box-shadow:0 2px 6px #0f142814;transition:transform .1s,box-shadow .12s,opacity .12s;cursor:pointer}.silaba-tile:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 14px #0f14281a}.silaba-tile:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.silaba-tile.is-used{opacity:.35;cursor:default}.pares-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 4px}.pares-col{display:flex;flex-direction:column;gap:8px}.par-card{background:var(--paper-soft);color:var(--ink);border:2px solid transparent;border-radius:14px;padding:14px 12px;min-height:60px;font-family:var(--font-display);font-weight:500;font-size:clamp(1rem,2.5vw,1.15rem);box-shadow:0 2px 6px #0f14280f;cursor:pointer;transition:transform .12s,border-color .12s,opacity .2s}.par-card-img{font-size:clamp(2rem,6vw,2.6rem);padding:8px}.par-card:hover:not(:disabled){transform:translateY(-1px)}.par-card:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.par-card.is-selected{border-color:var(--amber);background:var(--amber-soft)}.par-card.is-matched{opacity:.3;pointer-events:none;border-color:var(--forest);background:var(--forest-soft)}.par-card.is-wrong{animation:shake .22s ease-in-out 2;border-color:var(--danger);background:var(--danger-soft)}@media (prefers-reduced-motion: reduce){.overlay,.panel,.card-backdrop,.card,.cora-bubble,.chip-combo,.result-unlock,.map-frame,.cora-avatar.is-bounce,.map-node.is-pulse .map-node-ring,.silaba-slot.is-wrong,.par-card.is-wrong{animation:none!important}.btn-primary,.opt,.silaba-tile,.par-card{transition:none!important}}