/* ===== Tara! Filipino — app shell (loaded after style.css, index.html only) ===== */

html,body.appmode{height:100%;overflow:hidden}
body.appmode{background:#efe4d3}

/* the "phone": fixed-height shell. Every screen lives inside it. */
.app{
  position:relative;margin:0 auto;width:100%;height:100vh;height:100dvh;max-width:430px;
  background:var(--bg);overflow:hidden;
}
@media(min-width:520px) and (min-height:760px){
  body.appmode{display:flex;align-items:center;justify-content:center}
  .app{height:min(860px,94vh);border-radius:34px;border:8px solid #3c3229;box-shadow:0 20px 60px rgba(60,50,41,.28)}
}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.scr.scroll{overflow-y:auto}

/* ---- top strip ---- */
.top{flex:none;display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:2px solid var(--line)}
.top .brand{font-size:1.2rem}
.me-chip{display:flex;align-items:center;gap:6px;padding:2px 10px 2px 2px;border-radius:999px;background:var(--card);border:2px solid var(--line)}
.me-chip .mini{width:28px;height:28px;border-radius:50%;overflow:hidden;background:#fdf1de;display:flex;align-items:flex-end;justify-content:center}
.me-chip b{font-size:.8rem;color:var(--blue)}

/* ---- tabs ---- */
.panes{flex:1;min-height:0;position:relative}
.pane{position:absolute;inset:0;display:none;flex-direction:column}
.pane.on{display:flex}
.tabs{flex:none;display:flex;border-top:2px solid var(--line);background:var(--bg);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 0;border-radius:12px;color:var(--ink-soft);font-size:.7rem}
.tab span{font-size:1.4rem;line-height:1.1;filter:grayscale(1);opacity:.7}
.tab.on{color:var(--blue);background:rgba(61,127,224,.1)}
.tab.on span{filter:none;opacity:1}

/* ---- learn: one unit at a time ---- */
.banner{flex:none;margin:12px 14px 0;border-radius:18px;padding:10px 8px 10px 14px;color:#fff;
  display:flex;align-items:center;gap:8px;box-shadow:0 4px 0 rgba(0,0,0,.18);transition:background .25s}
.banner .em{font-size:1.8rem;line-height:1}
.banner .t{flex:1;min-width:0}
.banner h2{font-size:1.15rem;line-height:1.05}
.banner p{margin:1px 0 0;font-size:.78rem;opacity:.92}
.arrow{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:1.1rem}
.arrow:disabled{opacity:.3;cursor:default}
.dots{flex:none;display:flex;justify-content:center;gap:6px;padding:8px 0 0}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:all .2s}
.dots i.on{width:18px;border-radius:5px;background:var(--ink-soft)}
.pathbox{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:pan-y;overflow-y:auto}
.app .path{margin-top:0;gap:6px}
.app .node{gap:2px}
.app .node.o1{transform:translateX(-46px)}
.app .node.o2{transform:translateX(46px)}
.app .bubble{width:62px;height:62px;font-size:1.6rem;box-shadow:0 5px 0 rgba(0,0,0,.2)}
.app .bubble.locked{box-shadow:0 5px 0 #c8bbaa}
.bubble.start{animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 5px 0 rgba(0,0,0,.2),0 0 0 8px rgba(47,181,106,.25)}}
.app .node small{font-size:.68rem;height:12px}
.app .crowns{height:10px}

/* ---- words ---- */
.chips{flex:none;display:flex;gap:6px;overflow-x:auto;padding:12px 14px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:6px 12px;border-radius:999px;border:2px solid var(--line);font-size:.85rem;background:var(--card)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.list{flex:1;overflow-y:auto;padding:8px 14px 14px}
.list .row{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 12px;margin-bottom:8px}

/* ---- avatar tab ---- */
.av-hero{flex:none;display:flex;flex-direction:column;align-items:center;padding:8px 14px 0;
  background:radial-gradient(circle at 50% 60%,#fdecc8 0,#fff8ef 70%)}
.av-hero .stagebox{height:190px;display:flex;align-items:flex-end;justify-content:center}
.av-hero svg{height:190px;width:auto}
.lvl{display:flex;align-items:center;gap:8px;width:100%;margin:6px 0 8px}
.lvl .badge{flex:none;background:var(--blue);color:#fff;border-radius:12px;padding:3px 10px;font-family:'Baloo 2';font-size:1rem}
.lvl .meter{flex:1;height:12px;border-radius:8px;background:#eadfd0;overflow:hidden}
.lvl .meter i{display:block;height:100%;background:var(--yellow);border-radius:8px;transition:width .3s}
.lvl small{flex:none;font-size:.7rem;color:var(--ink-soft)}
.grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:6px 14px 14px;align-content:start}
.opt{position:relative;aspect-ratio:1;border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;font-size:.62rem;color:var(--ink-soft)}
.opt.sel{border-color:var(--blue);background:#eaf2ff}
.opt{padding:4px 2px 3px;justify-content:space-between;gap:1px}
.opt svg{width:auto;max-width:92%;height:auto;flex:1;min-height:0;max-height:70%}
.opt > span:not(.lock){flex:none;line-height:1.1}
.opt .sw,.opt .ic{margin:auto}
.opt .sw{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--line)}
.opt .ic{font-size:1.7rem;line-height:1}
.opt.locked{background:#f2eadf}
.opt.locked > *{opacity:.35}
.opt .lock{position:absolute;inset:auto 0 3px 0;opacity:1!important;font-size:.62rem;color:var(--ink);font-weight:800}
.opt .lock::before{content:'🔒 '}
.toast{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:8px 14px;border-radius:12px;font-size:.85rem;z-index:50;pointer-events:none;white-space:nowrap}

/* ---- me tab ---- */
.me{flex:1;overflow-y:auto;padding:18px 18px 14px;text-align:center}
.me h2{font-size:1.5rem}
.me .codebox{margin:10px 0 6px;font-size:1.3rem;padding:10px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.tile{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px;font-size:.8rem;color:var(--ink-soft)}
.tile b{display:block;font-size:1.4rem;font-family:'Baloo 2';color:var(--ink)}

/* ---- lesson: full-screen, one card at a time ---- */
.app .lesson-top{flex:none;position:static;max-width:none;margin:0;width:100%}
.app .stage{flex:1;min-height:0;max-width:none;width:100%;margin:0;overflow-y:auto;padding:4px 18px 12px;
  display:flex;flex-direction:column;justify-content:safe center}
.app .prompt{text-align:center;margin:6px 0 10px;font-size:1.1rem}
.app .big-emoji{font-size:4.2rem;margin:4px 0}
.app .word-card{padding:14px;margin:6px 0}
.app .word-tl{font-size:2rem}
.app .speaker{margin-top:8px;padding:9px 18px}
.app .speaker.big{padding:22px}
.app .choice{padding:13px}
.app .choice.pic{font-size:2.6rem;padding:14px 8px}
.app .answer-line{margin-bottom:16px}
.app .footer{position:static;flex:none;padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
.app .footer .inner{max-width:none}
.app .verdict{margin-bottom:10px}

/* ---- done / level-up ---- */
.app .done{flex:1;overflow-y:auto;padding:30px 16px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.levelup{margin:0 0 18px;padding:12px 16px;border-radius:16px;background:#fff3cf;border:3px solid var(--yellow);width:100%;max-width:340px}
.levelup h3{color:#c77d00;font-size:1.3rem}
.levelup p{margin:4px 0 0;font-size:.9rem;color:var(--ink)}
.done .btn{max-width:340px;margin-left:auto;margin-right:auto}
.done .btn + .linky{margin-top:6px}

/* ---- welcome ---- */
.app .welcome{padding:30px 22px 40px}

/* avatar tiles: keep the drawing inside its tile, one label only */
.opt svg{overflow:hidden!important}
.opt.locked > span:not(.lock){visibility:hidden}