/* ============================================================
   FALAMIGO — Coach de inglês falado
   Identidade v4: a turma do Migo, em um mundo desenhado e acolhedor.
   Creme, menta, lavanda e pêssego; tintas legíveis e superfícies macias.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
[hidden]{display:none!important}
/* A tinta e a superfície de ação têm tokens distintos: o pastel nunca é texto. */
:root{
  --bg:#fffaf2;
  --bg-2:#f3f2ed;
  --card:#ffffff;
  --card-2:#f7f7f1;
  --line:#cbd9d2;
  --line-soft:#e5ebe5;
  --control-line:#7b938a;
  --ink:#344b54;
  --ink-2:#4b626a;
  --muted:#5b6b71;
  --deep:#386765;
  --deep-soft:#dff5ec;
  --on-deep:#ffffff;
  --on-deep-muted:#f0f5f2;
  --action:#dff5ec;
  --action-ink:#344b54;
  --action-edge:#adcbbb;
  --mint:#dff5ec;
  --lavender:#eee7fa;
  --peach:#ffe5d5;
  --sky:#e5f3ff;
  --butter:#fff1c9;
  --live:#ffe5d5;
  --live-soft:#fff0e6;
  --live-ink:#89503d;
  --on-live:#513e36;
  --live-edge:#dfbbaa;
  --ok:#648a72;
  --ok-soft:#e3f3e5;
  --ok-ink:#375f46;
  --warn:#9b7844;
  --warn-soft:#fff1d7;
  --warn-ink:#795a28;
  --gold:#b18437;
  --sh-1:0 3px 0 rgba(111,142,128,.09), 0 7px 22px rgba(92,111,105,.035);
  --sh-2:0 14px 42px rgba(59,78,76,.14);
  --sh-live:0 0 0 6px rgba(225,187,165,.18);
  --r-s:19px; --r-m:26px; --r-l:32px; --r-xl:40px;
  --f-display:ui-rounded,"Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif;
  --f-body:ui-rounded,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --f-mono:"SFMono-Regular",Consolas,monospace;
  --f-ipa:"Charis SIL","Doulos SIL","Gentium Plus","Times New Roman",Georgia,serif;
  --tab-h:74px;
  --maxw:640px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --bg:#202f39; --bg-2:#263640; --card:#2c3c47; --card-2:#32444c;
  --line:#59706f; --line-soft:#425960; --control-line:#9cafad;
  --ink:#f8f4ee; --ink-2:#dbe5e3; --muted:#c1ccd0;
  --deep:#b3e3d4; --deep-soft:#354d48;
  --on-deep:#253e42; --on-deep-muted:#344b54;
  --action:#354d48; --action-ink:#ecf7ef; --action-edge:#668779;
  --mint:#354d48; --lavender:#443f59; --peach:#57463f;
  --sky:#354c5c; --butter:#554c36;
  --live:#f5d6c5; --live-soft:#57463f;
  --live-ink:#ffe0ca; --on-live:#442e2a; --live-edge:#b98f7c;
  --ok:#a2c6ad; --ok-soft:#304b40; --ok-ink:#d0efda;
  --warn:#ddc193; --warn-soft:#514735; --warn-ink:#f9e4b9;
  --gold:#e8cb91;
  --sh-1:0 3px 0 rgba(10,22,29,.22), 0 6px 20px rgba(10,22,29,.12);
  --sh-2:0 16px 38px rgba(8,19,27,.32);
  --sh-live:0 0 0 6px rgba(245,214,197,.12);
  color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#202f39; --bg-2:#263640; --card:#2c3c47; --card-2:#32444c;
  --line:#59706f; --line-soft:#425960; --control-line:#9cafad;
  --ink:#f8f4ee; --ink-2:#dbe5e3; --muted:#c1ccd0;
  --deep:#b3e3d4; --deep-soft:#354d48;
  --on-deep:#253e42; --on-deep-muted:#344b54;
  --action:#354d48; --action-ink:#ecf7ef; --action-edge:#668779;
  --mint:#354d48; --lavender:#443f59; --peach:#57463f;
  --sky:#354c5c; --butter:#554c36;
  --live:#f5d6c5; --live-soft:#57463f;
  --live-ink:#ffe0ca; --on-live:#442e2a; --live-edge:#b98f7c;
  --ok:#a2c6ad; --ok-soft:#304b40; --ok-ink:#d0efda;
  --warn:#ddc193; --warn-soft:#514735; --warn-ink:#f9e4b9;
  --gold:#e8cb91;
  --sh-1:0 3px 0 rgba(10,22,29,.22), 0 6px 20px rgba(10,22,29,.12);
  --sh-2:0 16px 38px rgba(8,19,27,.32);
  --sh-live:0 0 0 6px rgba(245,214,197,.12);
  color-scheme:dark;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  overflow-wrap:anywhere;
}
h1,h2,h3,h4{font-family:var(--f-display); margin:0; text-wrap:balance; letter-spacing:-.018em; line-height:1.2}
h1{font-size:1.7rem; font-weight:800}
h2{font-size:1.28rem; font-weight:700}
h3{font-size:1.02rem; font-weight:700}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; border:0; background:none; touch-action:manipulation; min-height:44px; -webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--deep); outline-offset:3px; border-radius:10px}
.ipa{font-family:var(--f-ipa); letter-spacing:.01em}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.hide{display:none !important}
img,canvas{max-width:100%}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
a{color:var(--deep);text-underline-offset:.18em}
svg:not(.ic){max-width:100%}

/* rolagem sem barra feia */
.scroll-x{overflow-x:auto; scrollbar-width:thin; -webkit-overflow-scrolling:touch}
.scroll-x::-webkit-scrollbar{height:5px}
.scroll-x::-webkit-scrollbar-thumb{background:var(--line); border-radius:9px}

/* ---------- 3. SHELL ---------- */
#app{
  max-width:var(--maxw); margin:0 auto; height:100vh; height:100dvh;
  background:var(--bg); position:relative; display:flex; flex-direction:column;
  overflow:hidden; box-shadow:0 0 60px rgba(13,29,34,.07);
}
#shell{display:contents}
.screen{
  display:none; flex:1 1 auto; min-height:0; min-width:0; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:0 16px calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 18px);
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.screen.on{display:flex; animation:fadeUp .28s ease both}
@keyframes fadeUp{from{opacity:0; transform:translateY(6px)}to{opacity:1;transform:none}}
.screen.full{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
/* tamanho padrão dos ícones — sem isso eles esticam dentro do flex */
svg.ic{width:20px; height:20px; flex:0 0 auto}
.btn svg.ic{width:18px; height:18px}
.btn.xs svg.ic,.chip svg.ic,.bubble .say svg.ic{width:14px; height:14px}
.icon-btn svg.ic{width:19px; height:19px}
.listrow .lead svg.ic{width:19px; height:19px}
.soundtip .h svg.ic{width:17px; height:17px}
.banner svg.ic{width:18px; height:18px}
.gamecard .ic svg.ic{width:19px; height:19px}
.tabbar button svg.ic{width:23px; height:23px}
.opt .k svg.ic{width:15px; height:15px}

.topbar{
  position:sticky; top:0; z-index:30; background:var(--bg);
  padding:calc(env(safe-area-inset-top,0px) + 14px) 0 10px;
  display:flex; align-items:center; gap:12px;
  border-bottom:1px solid transparent;
}
.topbar.sticky-line{border-bottom-color:var(--line-soft)}
.topbar .grow{flex:1; min-width:0}
.topbar h1,.topbar h2{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.eyebrow{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}

/* barra de abas */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--maxw); z-index:50;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--card);
  background:color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px);
}
.tabbar button{
  height:var(--tab-h); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; color:var(--muted); font-size:.72rem;
  font-weight:600; letter-spacing:.01em; position:relative;
}
.tabbar button svg{width:23px; height:23px; stroke-width:1.7}
.tabbar button.on{color:var(--deep)}
.tabbar button.on::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 4px 4px; background:var(--deep);
}

/* ---------- 4. COMPONENTES ---------- */
.panel{
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--r-m); padding:16px; box-shadow:var(--sh-1);
}
.panel.flat{box-shadow:none; background:var(--card-2)}
.stack{display:flex; flex-direction:column; gap:12px}
.stack-lg{display:flex; flex-direction:column; gap:20px}
.row{display:flex; align-items:center; gap:10px}
.row.wrap{flex-wrap:wrap}
.spread{display:flex; align-items:center; justify-content:space-between; gap:10px}
.row>*,.spread>*,.banner>*,.lesson>*{min-width:0}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.center{text-align:center}
.small{font-size:.84rem}
.tiny{font-size:.74rem}
.muted{color:var(--muted)}
.b{font-weight:700}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 18px; border-radius:var(--r-s); font-weight:750; font-size:.95rem;
  background:var(--card); color:var(--ink); border:1.5px solid var(--line);
  transition:transform .12s ease, filter .15s ease; text-align:center;
  min-height:44px; min-width:0; max-width:100%; overflow-wrap:anywhere;
}
.btn:active{transform:scale(.975)}
.btn.block{width:100%}
.btn.primary{background:var(--action); color:var(--action-ink); border-color:var(--action-edge)}
.btn.live{background:var(--live); color:var(--on-live); border-color:var(--live-edge)}
.btn.ghost{background:transparent; border-color:var(--line)}
.btn.sm{padding:9px 14px; font-size:.85rem; border-radius:15px}
.btn.xs{padding:7px 11px; font-size:.77rem; border-radius:13px; font-weight:700}
.btn[disabled]{opacity:.45; pointer-events:none}
.icon-btn{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--line); flex:0 0 auto;
}
.icon-btn svg{width:19px; height:19px}

.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px;
  border-radius:999px; background:var(--card-2); border:1px solid var(--line-soft);
  font-size:.79rem; font-weight:600; color:var(--ink-2); white-space:normal;
  min-width:0; max-width:100%;
}
.chip.deep{background:var(--deep-soft); color:var(--deep); border-color:var(--action-edge)}
.chip.ok{background:var(--ok-soft); color:var(--ok-ink); border-color:transparent}
.chip.warn{background:var(--warn-soft); color:var(--warn-ink); border-color:transparent}
.chip.live{background:var(--live-soft); color:var(--live-ink); border-color:transparent}
.chip.tap{cursor:pointer; min-height:44px}
.chip.tap:active{transform:scale(.96)}

.bar{height:8px; border-radius:99px; background:var(--line-soft); overflow:hidden}
.bar > i{display:block; height:100%; border-radius:99px; background:var(--deep); transition:width .5s cubic-bezier(.2,.8,.2,1)}
.bar.thin{height:5px}

.divider{height:1px; background:var(--line-soft); margin:4px 0}

.toast{
  position:fixed; left:50%; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 22px); transform:translate(-50%,14px);
  background:var(--ink); color:var(--bg); padding:12px 17px; border-radius:20px;
  font-size:.86rem; font-weight:600; z-index:200; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; max-width:90%; text-align:center;
  box-shadow:var(--sh-2);
}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* folha inferior (modal) */
.sheet-bg{
  position:fixed; inset:0; background:rgba(38,57,63,.38); z-index:120;
  opacity:0; pointer-events:none; transition:opacity .22s;
  backdrop-filter:blur(5px);
}
.sheet-bg.on{opacity:1; pointer-events:auto}
.sheet{
  position:fixed; left:50%; bottom:0; transform:translate(-50%,100%);
  width:100%; max-width:var(--maxw); background:var(--card); z-index:130;
  border-radius:var(--r-l) var(--r-l) 0 0; padding:10px 18px calc(env(safe-area-inset-bottom,0px) + 22px);
  transition:transform .28s cubic-bezier(.2,.9,.25,1); max-height:88vh; overflow-y:auto;
  box-shadow:var(--sh-2);
  visibility:hidden;
  padding-left:max(18px,env(safe-area-inset-left,0px));
  padding-right:max(18px,env(safe-area-inset-right,0px));
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px);
  overscroll-behavior:contain;
}
.sheet.on{transform:translate(-50%,0); visibility:visible}
.sheet-toolbar{position:relative; display:flex; justify-content:flex-end; align-items:center; min-height:44px; margin-bottom:8px}
.sheet .grip{position:absolute; left:50%; transform:translateX(-50%); width:38px; height:4px; border-radius:9px; background:var(--line)}

/* ---------- 5. AVATAR / PALCO ---------- */
.stage{
  position:relative; display:grid; place-items:center;
  padding:6px 0 2px; flex:0 0 auto; min-height:150px;
  background:var(--bg); z-index:3;
}
.stage::after{content:""; position:absolute; left:0; right:0; bottom:-14px; height:14px;
  background:linear-gradient(to bottom, var(--bg), transparent); pointer-events:none}
.stage.withscene{border-radius:var(--r-l); overflow:hidden; background:transparent; padding:0; height:198px; min-height:198px}
.stage.withscene .scene{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.stage.withscene #av{position:relative; z-index:2; margin-bottom:-26px}
.stage.withscene::after{display:none}
.stage.withscene::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, transparent 45%, color-mix(in srgb, var(--bg) 78%, transparent));}

.avatar{display:block; overflow:visible}
.avatar .breathe{transform-origin:120px 275px; animation:breathe 4.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scaleY(1) translateY(0)}50%{transform:scaleY(1.012) translateY(-1.5px)}}
.avatar .lid{transform:scaleY(0); animation:blink 6.2s infinite}
.avatar .eye-r .lid{animation-delay:.04s}
@keyframes blink{0%,93.5%,100%{transform:scaleY(0)} 95.4%{transform:scaleY(1)} 97%{transform:scaleY(0)}}
.avatar .vis{transition:opacity .045s linear}
.avatar .arm-l,.avatar .arm-r{transition:transform .38s cubic-bezier(.2,.9,.3,1.25)}
.avatar .arm-r{transform-origin:34.5px 224px}
.avatar .arm-l{transform-origin:205.5px 224px}
.avatar .head{transform-origin:120px 180px; transition:transform .4s ease}
.avatar .brow-l,.avatar .brow-r{transition:transform .3s ease}
.avatar .iris{transition:transform .35s ease}
.avatar .eyes{transition:transform .3s ease}

/* expressões */
.emo-happy .brow-l{transform:translateY(-3px)} .emo-happy .brow-r{transform:translateY(-3px)}
.emo-think .brow-l{transform:translateY(-5px) rotate(-6deg)} .emo-think .brow-r{transform:translateY(1px)}
.emo-surprised .brow-l,.emo-surprised .brow-r{transform:translateY(-7px)}
.emo-surprised .eyes{transform:scaleY(1.12)}
.emo-sad .brow-l{transform:rotate(7deg) translateY(2px)} .emo-sad .brow-r{transform:rotate(-7deg) translateY(2px)}

/* poses — o braço direito abre para FORA com rotação positiva */
.pose-wave  .arm-r{animation:wave 1.8s ease-in-out 1 both}
@keyframes wave{0%{transform:rotate(0)}16%{transform:rotate(150deg)}32%{transform:rotate(126deg)}
  48%{transform:rotate(150deg)}64%{transform:rotate(126deg)}80%{transform:rotate(148deg)}100%{transform:rotate(0)}}
.pose-thumb .arm-r{transform:rotate(140deg)}
.pose-think .arm-r{transform:rotate(162deg)}
.pose-think .head{transform:rotate(-5deg)}
.pose-think .brow-l{transform:translateY(-5px) rotate(-6deg)}
.pose-laugh .head{transform:rotate(4deg) translateY(-3px)}
.pose-laugh .arm-l{transform:rotate(-32deg)}
.pose-laugh .arm-r{transform:rotate(32deg)}
.pose-laugh .lid{transform:scaleY(.75); animation:none}
.pose-clap  .arm-r{animation:clapr .3s ease-in-out 5}
.pose-clap  .arm-l{animation:clapl .3s ease-in-out 5}
@keyframes clapr{0%,100%{transform:rotate(-88deg)}50%{transform:rotate(-108deg)}}
@keyframes clapl{0%,100%{transform:rotate(88deg)}50%{transform:rotate(108deg)}}
.pose-point .arm-r{transform:rotate(94deg)}
.pose-shrug .arm-r{transform:rotate(36deg)}
.pose-shrug .arm-l{transform:rotate(-36deg)}
.pose-shrug .brow-l,.pose-shrug .brow-r{transform:translateY(-5px)}
.pose-celebrate .arm-r{transform:rotate(162deg)}
.pose-celebrate .arm-l{transform:rotate(-162deg)}
.pose-nod   .head{animation:nod .5s ease-in-out 2}
@keyframes nod{0%,100%{transform:translateY(0)}50%{transform:translateY(5px) rotate(2deg)}}

.speaking-halo{
  position:absolute; width:186px; height:186px; border-radius:50%;
  border:2px solid var(--deep); opacity:0; pointer-events:none;
}
.speaking .speaking-halo{animation:halo 1.7s ease-out infinite}
@keyframes halo{0%{transform:scale(.72); opacity:.45}100%{transform:scale(1.28); opacity:0}}

/* ---------- 6. CONVERSA ---------- */
.chat{flex:1 1 auto; min-height:120px; overflow-y:auto; display:flex; flex-direction:column;
  justify-content:flex-start; gap:12px; padding:12px 2px 6px}
.chat>:first-child{margin-top:auto}
.chat>*{flex-shrink:0}
.bubble{max-width:88%; padding:11px 14px; border-radius:18px; font-size:.96rem; box-shadow:var(--sh-1); animation:pop .25s ease both}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.bubble.them{background:var(--card); border:1px solid var(--line-soft); border-bottom-left-radius:10px; align-self:flex-start}
.bubble.me{background:var(--lavender); color:var(--ink); border:1px solid var(--line); border-bottom-right-radius:10px; align-self:flex-end}
.bubble.me .pt{color:var(--ink-2)}
.bubble .pt{display:block; margin-top:5px; font-size:.79rem; color:var(--muted); font-style:italic}
.bubble .say{display:inline-flex; align-items:center; gap:5px; margin-top:7px; min-height:44px; padding:4px 0; font-size:.72rem; font-weight:700; color:var(--deep); text-transform:uppercase; letter-spacing:.05em}
.bubble.sys{align-self:center; background:var(--warn-soft); color:var(--warn-ink); font-size:.8rem; font-weight:600; box-shadow:none; border-radius:12px; text-align:center}
.typing{display:inline-flex; gap:4px; align-items:center; padding:4px 2px}
.typing i{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:tdot 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{opacity:.28; transform:translateY(0)}30%{opacity:1; transform:translateY(-4px)}}

/* cartão de correção */
.fix{
  border:1px solid var(--line); border-left:4px solid var(--warn); background:var(--warn-soft);
  border-radius:19px; padding:11px 13px; font-size:.86rem; align-self:stretch;
}
.fix .bad{text-decoration:line-through; color:var(--muted)}
.fix .good{font-weight:700; color:var(--ink)}
.fix .why{display:block; margin-top:5px; color:var(--ink-2); font-size:.8rem}

/* barra de fala */
.speakbar{
  position:sticky; bottom:0; padding:10px 0 4px; background:linear-gradient(to top, var(--bg) 72%, transparent);
  display:flex; align-items:center; gap:10px;
}
.mic{
  position:relative; width:66px; height:66px; border-radius:50%; flex:0 0 auto;
  background:var(--live); color:var(--on-live); display:grid; place-items:center;
  box-shadow:0 4px 0 var(--live-edge),var(--sh-live); border:1.5px solid var(--live-edge); transition:transform .15s ease;
}
.mic:active{transform:scale(.94)}
.mic svg{width:27px; height:27px}
.mic.rec{animation:recpulse 1.2s ease-in-out infinite}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 6px rgba(225,187,165,.23)}50%{box-shadow:0 0 0 16px rgba(225,187,165,.07)}}
.mic.off{background:var(--card-2); color:var(--muted); border-color:var(--line); box-shadow:none}
.wave{width:100%; height:44px; display:block; border-radius:10px; background:var(--card-2); border:1px solid var(--line-soft)}
.mictip{flex:1; min-width:0; display:flex; align-items:center; gap:8px; min-height:48px; padding:8px 14px;
  border-radius:20px; background:var(--card-2); border:1.5px dashed var(--control-line);
  font-size:.8rem; color:var(--muted); font-weight:600}
.mictip svg.ic{width:15px;height:15px; opacity:.7}
.heard{
  flex:1; min-width:0; font-size:.9rem; color:var(--ink-2);
  background:var(--card); border:1.5px solid var(--control-line); border-radius:20px; padding:11px 14px;
}
.heard input{width:100%; border:0; background:none; outline:none}

/* ---------- 7. NOTA DE PRONÚNCIA ---------- */
.gauge{display:grid; place-items:center; position:relative}
.gauge svg{transform:rotate(-90deg)}
.gauge .val{position:absolute; font-family:var(--f-display); font-weight:800; font-size:1.5rem}
.gauge .val small{font-size:.7rem; font-weight:700}
.wordchip{
  display:inline-flex; flex-direction:column; align-items:center; gap:1px;
  padding:6px 9px; border-radius:9px; font-weight:700; font-size:.9rem; line-height:1.1;
}
.wordchip .ipa{font-size:.78rem; font-weight:500; opacity:.75}
.wordchip.ok{background:var(--ok-soft); color:var(--ok-ink)}
.wordchip.warn{background:var(--warn-soft); color:var(--warn-ink)}
.wordchip.miss{background:var(--live-soft); color:var(--live-ink)}
.soundtip{border:1px solid var(--action-edge); border-left:4px solid var(--deep); background:var(--deep-soft); padding:13px 15px; border-radius:20px}
.soundtip .h{font-weight:800; color:var(--deep); display:flex; gap:8px; align-items:center; font-size:.9rem}

/* ---------- 8. CARTÕES DE PERSONAGEM ---------- */
.charlist{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.charcard{
  position:relative; text-align:left; background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--r-m); padding:12px; box-shadow:var(--sh-1); overflow:hidden;
  transition:transform .14s ease, border-color .14s;
}
.charcard:active{transform:scale(.98)}
.charcard.sel{border-color:var(--deep); box-shadow:0 0 0 2px color-mix(in srgb,var(--deep) 30%, transparent)}
.charcard .bgtint{position:absolute; inset:0; opacity:.1; pointer-events:none}
.charcard .nm{font-family:var(--f-display); font-weight:800; font-size:1rem; margin-top:6px}
.charcard .flagline{display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--muted); font-weight:600}
.charcard .desc{font-size:.76rem; color:var(--ink-2); margin-top:5px; line-height:1.35}
.lvpill{
  position:absolute; top:10px; right:10px; font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.08em; background:var(--card-2); border:1px solid var(--line-soft);
  padding:3px 7px; border-radius:99px; color:var(--muted);
}

/* ---------- 9. JOGOS ---------- */
.gamegrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.gamecard{
  text-align:left; border-radius:var(--r-m); padding:13px; min-height:104px;
  display:flex; flex-direction:column; justify-content:space-between; gap:8px;
  border:1px solid var(--line-soft); background:var(--card); box-shadow:var(--sh-1);
  transition:transform .14s;
}
.gamecard:active{transform:scale(.98)}
.gamecard .ic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center}
.gamecard .ic svg{width:19px; height:19px}
.gamecard .t{font-family:var(--f-display); font-weight:700; font-size:.95rem}
.gamecard .d{font-size:.72rem; color:var(--muted); line-height:1.32; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.gamecard .t{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}

.opt{
  width:100%; text-align:left; padding:15px 16px; border-radius:14px;
  background:var(--card); border:1.5px solid var(--line); font-weight:600;
  display:flex; align-items:center; gap:12px; transition:.15s;
}
.opt:active{transform:scale(.99)}
.opt.right{border-color:var(--ok); background:var(--ok-soft); color:var(--ok-ink)}
.opt.wrong{border-color:var(--live); background:var(--live-soft); color:var(--live-ink)}
.opt .k{
  width:26px; height:26px; border-radius:8px; background:var(--card-2); flex:0 0 auto;
  display:grid; place-items:center; font-family:var(--f-mono); font-size:.72rem; color:var(--muted);
}
.opt.right .k,.opt.wrong .k{background:transparent; border:1px solid currentColor; color:inherit}

.tokens{display:flex; flex-wrap:wrap; gap:8px; min-height:52px; align-content:flex-start}
.token{
  padding:10px 14px; border-radius:16px; background:var(--card); border:1px solid var(--line);
  font-weight:650; min-height:44px; box-shadow:var(--sh-1); transition:transform .12s;
}
.token:active{transform:scale(.94)}
.dropzone{
  min-height:56px; border:1.5px dashed var(--control-line); border-radius:20px; padding:8px;
  background:var(--card-2); display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start;
}
.hud{display:flex; align-items:center; gap:12px; font-family:var(--f-mono); font-size:.8rem; color:var(--muted)}
.hud b{color:var(--ink); font-size:.95rem}
.timerbar{height:4px; border-radius:9px; background:var(--line-soft); overflow:hidden}
.timerbar>i{display:block; height:100%; background:var(--live-ink); transition:width .95s linear}

/* ---------- 10. INÍCIO / PROGRESSO ---------- */
.hero{
  border-radius:var(--r-l); padding:22px; color:var(--ink); position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--mint),var(--sky) 58%,var(--lavender)); border:1.5px solid var(--line);
}
.hero .glow{position:absolute; width:230px; height:230px; right:-70px; top:-90px; border-radius:50%; background:radial-gradient(circle,var(--peach),transparent 68%)}
.hero h2{color:var(--ink)}
.hero .sub{color:var(--ink-2); font-size:.88rem; line-height:1.55}
.ringwrap{position:relative; width:78px; height:78px; flex:0 0 auto}
.ringwrap svg{position:absolute; inset:0; transform:rotate(-90deg)}
.ringwrap .mid{position:absolute; inset:0; display:grid; place-items:center; text-align:center; line-height:1.05}
.ringwrap .mid b{font-family:var(--f-display); font-size:1.15rem}
.ringwrap .mid span{font-size:.72rem; color:var(--ink-2); text-transform:uppercase; letter-spacing:.08em}

.statgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.stat{background:var(--card); border:1px solid var(--line-soft); border-radius:14px; padding:12px 10px; text-align:center}
.stat b{display:block; font-family:var(--f-display); font-size:1.35rem; font-variant-numeric:tabular-nums}
.stat span{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}

.week{display:flex; gap:6px; justify-content:space-between}
.week div{flex:1; text-align:center; font-size:.72rem; color:var(--muted)}
.week i{
  display:block; height:34px; border-radius:8px; background:var(--line-soft); margin-bottom:4px;
  position:relative; overflow:hidden;
}
.week i b{position:absolute; bottom:0; left:0; right:0; background:var(--deep); border-radius:8px}
.week .today i{outline:2px solid var(--live-ink); outline-offset:1px}

.listrow{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft)}
.listrow:last-child{border-bottom:0}
.listrow .lead{width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto; background:var(--card-2)}
.listrow .grow{flex:1; min-width:0}
.listrow .t{font-weight:700; font-size:.92rem}
.listrow .s{font-size:.76rem; color:var(--muted)}

/* ---------- 11. TESTE DE NÍVEL ---------- */
.stepdots{display:flex; gap:4px}
.stepdots i{flex:1; height:4px; border-radius:9px; background:var(--line)}
.stepdots i.done{background:var(--deep)}
.stepdots i.now{background:var(--warn)}

.radar{width:100%; max-width:290px; margin:0 auto; display:block}

/* ---------- 12. LABORATÓRIO DE SONS ---------- */
.soundgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px}
.soundbtn{
  padding:12px 8px; border-radius:14px; background:var(--card); border:1px solid var(--line-soft);
  box-shadow:var(--sh-1); text-align:center; transition:transform .12s;
}
.soundbtn:active{transform:scale(.97)}
.soundbtn .sym{font-family:var(--f-ipa); font-size:1.4rem; font-weight:600; color:var(--deep); display:block}
.soundbtn .lb{font-size:.72rem; color:var(--muted); margin-top:2px; line-height:1.2; display:block}
.soundbtn .mini{height:3px; border-radius:9px; background:var(--line-soft); margin-top:7px; overflow:hidden}
.soundbtn .mini i{display:block; height:100%; background:var(--ok)}

.pairbtn{
  flex:1; padding:18px 10px; border-radius:16px; background:var(--card); border:1.5px solid var(--line);
  font-family:var(--f-display); font-weight:800; font-size:1.12rem; text-align:center;
}
.pairbtn .ipa{display:block; font-size:.72rem; font-weight:500; color:var(--muted); margin-top:3px}

/* ---------- 13. UTIL ---------- */
.banner{
  text-align:left;
  display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:14px;
  background:var(--deep-soft); color:var(--deep); font-size:.83rem; line-height:1.4;
}
.banner.warn{background:var(--warn-soft); color:var(--warn-ink)}
.banner svg{width:18px; height:18px; flex:0 0 auto; margin-top:1px}
.switch{position:relative; width:46px; height:27px; border-radius:99px; background:var(--line); transition:.2s; flex:0 0 auto}
.switch.on{background:var(--ok)}
.switch i{position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:var(--card); transition:.2s; box-shadow:0 1px 3px rgba(52,75,84,.2)}
.switch.on i{left:22px}
select,input[type=text],input[type=password],input[type=number],textarea{
  width:100%; min-width:0; max-width:100%; padding:11px 13px; border-radius:11px; border:1px solid var(--line);
  background:var(--card); outline:none;
}
select:focus,input:focus,textarea:focus{border-color:var(--deep); box-shadow:0 0 0 3px var(--deep-soft)}
select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--deep); outline-offset:2px}
.heard:focus-within{outline:3px solid var(--deep); outline-offset:2px}
label.fld{display:block; font-size:.78rem; font-weight:700; color:var(--ink-2); margin-bottom:5px}

.confetti{position:fixed; inset:0; pointer-events:none; z-index:300}

@media (min-width:640px){
  #app{border-left:1px solid var(--line); border-right:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .speaking-halo{display:none}
}

#shell{display:contents}
input[type=range]{accent-color:var(--deep)}

/* ============================================================
   14. TRILHA DO CURSO
   ============================================================ */
.lvhead{display:flex; align-items:center; gap:10px; margin:22px 0 12px}
.lvhead .tag{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border-radius:99px; color:var(--ink); background:var(--lavender)}
.lvhead .ln{flex:1; height:1px; background:var(--line)}
.path{position:relative; display:flex; flex-direction:column; gap:12px}
.path::before{content:""; position:absolute; left:31px; top:26px; bottom:26px; width:2px;
  background:linear-gradient(var(--line), var(--line-soft)); border-radius:2px}
.unit{position:relative; display:flex; gap:14px; align-items:flex-start; text-align:left;
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-m);
  padding:14px; box-shadow:var(--sh-1); width:100%; transition:transform .14s, border-color .14s}
.unit:active{transform:scale(.99)}
.unit.locked{box-shadow:none; background:var(--card-2)}
.unit.locked .t{color:var(--muted)}
.unit.locked .s,.unit.locked .meta{opacity:.7}
.unit.now{border-color:var(--deep); box-shadow:0 0 0 2px color-mix(in srgb,var(--deep) 22%, transparent), var(--sh-1)}
.unit .medal{position:relative; width:48px; height:48px; flex:0 0 auto; display:grid; place-items:center}
.unit .medal > svg{position:absolute; inset:0; transform:rotate(-90deg)}
.unit .medal .core{width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  color:var(--ink); background:var(--mint); font-family:var(--f-display); font-weight:800; font-size:.86rem}
.unit .medal .core svg.ic{width:18px; height:18px}
.unit .body{flex:1; min-width:0}
.unit .t{font-family:var(--f-display); font-weight:700; font-size:1rem; line-height:1.25}
.unit .s{font-size:.78rem; color:var(--muted); margin-top:2px; line-height:1.35}
.unit .meta{display:flex; gap:8px; align-items:center; margin-top:9px; font-size:.7rem; color:var(--muted)}
.unit .meta .bar{flex:1; max-width:120px}

/* lista de lições */
.lesson{display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px;
  background:var(--card); border:1px solid var(--line-soft); width:100%; text-align:left; transition:.14s}
.lesson:active{transform:scale(.99)}
.lesson.done{background:var(--card-2)}
.lesson .lic{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto}
.lesson .lt{font-weight:700; font-size:.92rem}
.lesson .ld{font-size:.74rem; color:var(--muted); line-height:1.3}
.lesson .lk{font-family:var(--f-mono); font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}

/* player de lição */
.lp{display:flex; flex-direction:column; min-height:0; flex:1}
.lp-top{display:flex; align-items:center; gap:10px; padding:calc(env(safe-area-inset-top,0px) + 12px) 0 10px}
.lp-dots{flex:1; display:flex; gap:3px}
.lp-dots i{flex:1; height:4px; border-radius:9px; background:var(--line)}
.lp-dots i.on{background:var(--deep)} .lp-dots i.cur{background:var(--warn)}
.lp-body{flex:1; min-height:0; display:flex; flex-direction:column; gap:14px; padding-bottom:10px}
.lp-foot{position:sticky; bottom:0; padding:10px 0 6px; background:linear-gradient(to top, var(--bg) 72%, transparent)}

/* cartão de palavra */
.flash{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-l);
  padding:26px 20px; text-align:center; box-shadow:var(--sh-1); position:relative; overflow:hidden}
.flash .w{font-family:var(--f-display); font-size:2rem; font-weight:800; line-height:1.1}
.flash .ipa{display:block; font-size:1rem; color:var(--deep); margin-top:6px}
.flash .pos{position:absolute; top:12px; right:12px; font-family:var(--f-mono); font-size:.72rem;
  color:var(--muted); border:1px solid var(--line); padding:2px 7px; border-radius:99px}
.flash .pt{font-size:1.05rem; font-weight:700; margin-top:14px}
.flash .ex{font-size:.88rem; color:var(--ink-2); margin-top:10px; line-height:1.45}
.flash .expt{font-size:.76rem; color:var(--muted); font-style:italic; margin-top:3px}
.syl{display:inline-flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:10px}
.syl span{padding:4px 9px; border-radius:8px; background:var(--card-2); font-family:var(--f-ipa); font-size:.9rem}
.syl span.on{background:var(--action); color:var(--action-ink); border:1px solid var(--action-edge); font-weight:750}

/* estúdio de prosódia */
.studio{background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-m); padding:18px; box-shadow:var(--sh-1)}
.contour{width:100%; height:118px; display:block; border-radius:12px; background:var(--card-2); border:1px solid var(--line-soft)}
.metrics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px}
.metric{background:var(--sky); border:1px solid var(--line-soft); border-radius:18px; padding:10px 8px; text-align:center}
.metric b{display:block; font-family:var(--f-display); font-size:1.15rem; font-variant-numeric:tabular-nums}
.metric span{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.metric.good b{color:var(--ok-ink)} .metric.warn b{color:var(--warn-ink)} .metric.bad b{color:var(--live-ink)}
.gaugebar{position:relative; height:26px; border-radius:99px; background:var(--line-soft); overflow:hidden; margin-top:6px}
.gaugebar .zone{position:absolute; top:0; bottom:0; background:color-mix(in srgb,var(--ok) 28%, transparent)}
.gaugebar .pin{position:absolute; top:-3px; bottom:-3px; width:4px; border-radius:3px; background:var(--live-ink)}
.gaugebar .lab{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; font-size:.72rem; color:var(--muted); font-family:var(--f-mono)}

/* mapa de calor de fonemas */
.heat{display:flex; flex-wrap:wrap; gap:5px}
.heat span{padding:5px 8px; border-radius:8px; font-family:var(--f-ipa); font-size:.86rem; font-weight:600}

/* comparação lado a lado */
.ab{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.ab button{padding:16px 11px; border-radius:22px; border:1.5px solid var(--line); background:var(--card);
  display:flex; flex-direction:column; align-items:center; gap:6px; font-weight:700; font-size:.85rem}
.ab button svg.ic{width:22px; height:22px}
.ab button.model{color:var(--deep)} .ab button.mine{color:var(--live-ink)}

@media (max-width:360px){
  .topbar{gap:8px}
  .panel,.hero{padding:13px}
  .row,.spread{gap:8px}
  .btn{padding-left:12px; padding-right:12px}
  .charlist,.gamegrid,.grid2{gap:8px}
  .statgrid,.metrics{gap:6px}
  .charcard{padding:10px}
  .unit{gap:10px; padding:12px}
  .hero>.spread{flex-wrap:wrap}
}

/* ---------- 15. ACABAMENTO / FORMAS, RITMO E ESTADOS ---------- */
body{background-image:radial-gradient(circle at 15% 10%,rgba(204,232,220,.46),transparent 35%),radial-gradient(circle at 85% 80%,rgba(230,219,245,.4),transparent 40%)}
#app{box-shadow:0 0 80px rgba(103,128,117,.09)}
.screen{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.topbar{gap:12px;padding-bottom:14px}
.topbar h1{font-size:1.55rem;letter-spacing:-.04em}
.eyebrow{font-family:var(--f-body);font-size:.72rem;font-weight:800;letter-spacing:.09em;line-height:1.5}
.panel{padding:18px;border-width:1.5px}
.stack{gap:14px}.stack-lg{gap:22px}
.btn{border-width:1.5px;box-shadow:0 3px 0 var(--line);font-weight:750;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;letter-spacing:-.015em}
.btn.primary{box-shadow:0 4px 0 var(--action-edge);border-bottom:1.5px solid var(--action-edge)}
.btn.live{box-shadow:0 4px 0 var(--live-edge)}
.btn.ghost{box-shadow:0 2px 0 var(--line-soft);background:var(--card-2)}
.btn.sm{border-radius:16px}.btn.xs{border-radius:14px}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.btn.primary:active{box-shadow:0 1px 0 var(--action-edge)}
.btn[disabled]{transform:none;box-shadow:none;opacity:.58}
.btn:focus-visible,.icon-btn:focus-visible,.opt:focus-visible{outline:3px solid var(--deep);outline-offset:4px}
button[aria-pressed="true"]:not(.switch){border-color:var(--deep)}
.icon-btn{border-radius:18px;box-shadow:0 2px 0 var(--line-soft);transition:transform .15s ease}
.icon-btn:active{transform:translateY(2px)}
.chip{font-size:.75rem;padding:6px 10px;font-weight:700}
.tabbar{border-radius:30px 30px 0 0;border:1px solid var(--line);border-bottom:0;box-shadow:0 -5px 24px rgba(39,65,70,.06);padding-top:4px}
.tabbar button{font-size:.72rem;gap:5px;font-weight:750}
.tabbar button svg.ic{position:relative;z-index:1}
.tabbar button.on::before{width:52px;height:34px;top:7px;border-radius:16px;background:var(--action);border:1px solid var(--action-edge)}
.tabbar button.on svg.ic{stroke-width:2.3}
.tabbar button.on::after{content:"";position:absolute;bottom:7px;width:5px;height:5px;background:var(--deep);border-radius:50%}
.hero{border-radius:34px;padding:24px;box-shadow:0 5px 0 var(--line-soft)}
.hero h2{font-size:1.4rem;letter-spacing:-.03em}
.stat{border-radius:22px;padding:14px 9px;box-shadow:0 3px 0 var(--line-soft)}
.stat b{font-size:1.6rem;letter-spacing:-.04em;line-height:1.15}
.stat span{font-size:.72rem;letter-spacing:.04em;display:block;margin-top:5px}
.listrow{gap:13px;padding:14px 0}.listrow .lead{width:42px;height:42px;border-radius:15px;background:var(--deep-soft);color:var(--deep)}
.bar{height:10px;border:1px solid rgba(29,82,87,.04)}
.bar>i{background:linear-gradient(90deg,var(--deep),var(--ok));position:relative}
.bar>i::after{content:"";position:absolute;top:2px;left:5px;right:5px;height:2px;background:rgba(255,255,255,.35);border-radius:10px}
.bar.thin{height:6px}
.banner{border:1px solid rgba(49,105,95,.10);border-radius:22px;padding:15px;line-height:1.55}
.sheet{border:1px solid var(--line);border-bottom:0;border-radius:36px 36px 0 0}
.sheet .grip{height:5px;width:42px}
.bubble{border-radius:25px;line-height:1.5;padding:13px 16px;max-width:90%}
.bubble.them{border-bottom-left-radius:10px;border-width:1.5px}
.bubble.me{border-bottom-right-radius:10px;box-shadow:0 3px 0 var(--line-soft)}
.bubble .say{font-size:.72rem;letter-spacing:.03em}
.chat{gap:14px;padding-top:16px}
.stage.withscene{height:220px;min-height:220px;border:1px solid var(--line);box-shadow:0 3px 0 var(--line-soft)}
.stage.withscene #av{margin-bottom:-20px}
.avatar-cartoon{filter:drop-shadow(0 3px 1px rgba(36,61,67,.04))}
.charcard{border-radius:29px;border-width:1.5px;padding:14px;display:flex;flex-direction:column;align-items:stretch;box-shadow:0 4px 0 var(--line-soft);isolation:isolate}
.charcard .bgtint{z-index:-1;opacity:.08}
.charcard>.center{position:relative;border-radius:18px;background:rgba(255,255,255,.35);padding-top:8px;overflow:hidden}
.charcard .nm{font-size:1.03rem;line-height:1.25;margin-top:9px}
.charcard .flagline{font-size:.7rem;line-height:1.4;margin-top:5px;align-items:flex-start}
.charcard .desc{line-height:1.5;margin-top:9px;font-size:.8rem}
.charcard.sel{box-shadow:0 4px 0 var(--deep-soft);border-width:2px}
.charcard.sel::after{content:"✓";position:absolute;right:12px;top:12px;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:var(--action);color:var(--action-ink);border:1px solid var(--action-edge);font-size:14px;font-weight:800;box-shadow:0 2px 0 rgba(0,0,0,.1)}
.charcard.sel .lvpill{right:43px}
.lvpill{font-family:var(--f-body);font-size:.72rem;letter-spacing:.02em;font-weight:800;padding:4px 8px;z-index:2}
.gamecard{border-radius:28px;border-width:1.5px;padding:17px;gap:12px;min-height:165px;box-shadow:0 4px 0 var(--line-soft);position:relative;overflow:hidden}
.gamecard::after{content:"";width:95px;height:95px;border-radius:50%;background:var(--deep-soft);position:absolute;top:-35px;right:-42px;opacity:.45;pointer-events:none}
.gamecard .ic{width:44px;height:44px;border-radius:15px;box-shadow:0 3px 0 rgba(44,74,76,.08)}
.gamecard .ic svg{width:24px;height:24px}
.gamecard .t{font-size:1rem;line-height:1.25;display:block;overflow:visible}
.gamecard .d{font-size:.8rem;line-height:1.5;display:block;overflow:visible}
.opt{border-radius:22px;border-width:2px;min-height:57px;box-shadow:0 3px 0 var(--line-soft);font-size:.97rem;padding:15px}
.opt.right{box-shadow:0 3px 0 var(--ok)}.opt.wrong{box-shadow:0 3px 0 var(--live)}
.opt .k{border-radius:12px;min-width:29px;min-height:29px}
.flash{border-width:1.5px;padding:32px 22px;box-shadow:0 5px 0 var(--line-soft);background-image:radial-gradient(circle at 100% 0%,var(--deep-soft),transparent 35%)}
.flash .w{font-size:2.2rem;letter-spacing:-.035em}
.flash .ex{line-height:1.6}
.soundbtn{border-width:1.5px;border-radius:24px;min-height:102px;box-shadow:0 3px 0 var(--line-soft)}
.soundbtn .sym{font-size:1.6rem}.soundbtn .lb{line-height:1.4;font-size:.72rem}
.pairbtn{border-width:2px;border-radius:25px;box-shadow:0 4px 0 var(--line-soft)}
.unit{border-radius:28px;border-width:1.5px;padding:17px;gap:16px;box-shadow:0 4px 0 var(--line-soft)}
.unit .medal{width:54px;height:54px}.unit .medal .core{width:40px;height:40px;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.unit .t{font-size:1.05rem;line-height:1.3}.unit .s{line-height:1.5;font-size:.79rem}
.unit .meta{flex-wrap:wrap;gap:7px}
.unit.now{border-width:2px;box-shadow:0 4px 0 var(--deep-soft)}
.path{gap:16px;padding:1px 0 5px}
.path::before{left:44px;background:none;border-left:3px dashed var(--line);width:0}
.lesson{padding:16px;border-width:1.5px;border-radius:24px;box-shadow:0 3px 0 var(--line-soft);gap:13px}
.lesson .lic{width:43px;height:43px;border-radius:15px}.lesson .ld{line-height:1.5}
.lesson-guide{display:flex;align-items:center;gap:12px;padding:12px 15px;background:var(--deep-soft);border-radius:20px;border:1px solid var(--line-soft);font-size:.83rem;line-height:1.5;color:var(--ink-2)}
.lesson-guide>.avatar,.lesson-guide>.migo{flex:0 0 64px;width:64px}
.lesson-guide>div{min-width:0}.lesson-guide .tiny{font-size:.72rem}
.lesson-feedback{border-radius:18px;padding:14px;background:var(--ok-soft);color:var(--ok-ink);font-weight:650;line-height:1.5}
.unit.optional .t{font-size:1rem}.unit.optional{border-style:dashed;background:var(--card-2)}
.lp-dots{gap:4px}.lp-dots i{height:6px}.lp-top{padding-bottom:17px}.lp-body{gap:17px}
select,input[type=text],input[type=password],input[type=number],textarea{border-width:1.5px;border-radius:19px;min-height:48px;font-size:1rem;border-color:var(--control-line)}
label.fld{font-size:.81rem;line-height:1.45}
.switch{min-width:46px;min-height:27px}
@media(hover:hover) and (pointer:fine){
 .btn:hover:not(:disabled),.icon-btn:hover,.gamecard:hover,.charcard:hover,.unit:not(.locked):hover,.lesson:hover,.soundbtn:hover,.opt:hover:not(:disabled){transform:translateY(-2px)}
 .btn:active,.gamecard:active,.charcard:active,.unit:active{transform:translateY(1px)}
 .gamecard:hover,.charcard:hover{border-color:var(--deep)}
}
@media(max-width:380px){
 .screen{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
 .topbar h1{font-size:1.35rem}.panel{padding:14px}.gamecard{padding:13px;min-height:158px}
 .charcard{padding:11px}.charcard .nm{font-size:.92rem}.charcard .flagline{font-size:.72rem}
 .unit{padding:13px;gap:10px}.unit .medal{width:46px;height:46px}.unit .t{font-size:.97rem}
 .stat b{font-size:1.4rem}.stat span{font-size:.72rem}.tabbar button{font-size:.72rem}
 .lesson-guide{padding:10px;gap:8px}.gamegrid,.charlist{gap:11px}
}
@media(prefers-reduced-motion:reduce){
 .avatar .breathe,.avatar .lid,.world-cloud,.world-plane,.migo *{animation:none!important}
 .avatar .lid{transform:scaleY(0)!important}
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
:root[data-motion="reduce"] .avatar .lid{transform:scaleY(0)!important}
:root[data-motion="reduce"] .speaking-halo{display:none}

/* A área de toque tem 44px; a trilha visual do interruptor continua com 27px. */
.switch{height:44px;min-height:44px;background:transparent;isolation:isolate}
.switch::before{content:"";position:absolute;inset:8.5px 0;border-radius:99px;background:var(--control-line);z-index:-1;transition:background .2s}
.switch.on{background:transparent}.switch.on::before{background:var(--deep)}
.switch i{top:11.5px}