/* On Training — Missões (modo lição) · v1 · 2026-10-19 */
.lc,.lc *{box-sizing:border-box}
.lc{position:fixed;inset:0;z-index:2147481000;display:flex;flex-direction:column;height:100vh;height:100dvh;background:#f3faf8;color:#081b3a;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:contain}
.lc.in{animation:lc-in .28s cubic-bezier(.2,.8,.2,1) both}.lc.out{animation:lc-out .2s ease both}
@keyframes lc-in{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}@keyframes lc-out{to{opacity:0;transform:translateY(14px)}}
.lc .material-symbols-outlined{font-size:1.35rem;line-height:1;font-variation-settings:'FILL' 1,'wght' 600;flex:none}
.lc button{font:inherit;cursor:pointer;touch-action:manipulation}
.lc button:focus-visible,.lc input:focus-visible{outline:3px solid #0b7ad1;outline-offset:2px}

/* topo */
.lc-top{display:flex;align-items:center;gap:.7rem;padding:max(12px,env(safe-area-inset-top)) 16px 10px;max-width:760px;width:100%;margin:0 auto}
.lc-x,.lc-snd{flex:none;width:44px;height:44px;border-radius:14px;border:2px solid #d8e6e2;background:#fff;color:#64748b;display:grid;place-items:center;transition:transform .12s,background .15s}
.lc-x:hover,.lc-snd:hover{background:#eef6f3}.lc-x:active,.lc-snd:active{transform:scale(.92)}
.lc-bar{position:relative;flex:1;height:16px;border-radius:999px;background:#dbe9e5;overflow:hidden;box-shadow:inset 0 2px 0 rgba(8,27,58,.06)}
.lc-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(180deg,#2de0bb,#00b894);transition:width .55s cubic-bezier(.3,1.3,.5,1);position:relative}
.lc-bar i::after{content:"";position:absolute;left:8px;right:8px;top:3px;height:4px;border-radius:99px;background:rgba(255,255,255,.45)}
.lc-streak{flex:none;display:inline-flex;align-items:center;gap:.15rem;min-width:52px;justify-content:center;height:36px;padding:0 .6rem;border-radius:999px;background:#fff4dc;color:#c2410c;font-weight:900;border:2px solid #fcd9a0}
.lc-streak .material-symbols-outlined{color:#f97316}.lc-streak[hidden]{display:none}
.lc-streak.pop{animation:lc-pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes lc-pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

/* palco */
.lc-stage{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:6px 16px 20px}
.lc-in{max-width:640px;margin:0 auto}
.lc-q{animation:lc-slide .38s cubic-bezier(.2,.9,.3,1) both}
@keyframes lc-slide{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
.lc-q.shake{animation:lc-shake .5s}@keyframes lc-shake{0%,100%{transform:none}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.lc-qh{display:flex;gap:.7rem;align-items:flex-start;margin:.4rem 0 1.1rem}
.lc-bub{position:relative;flex:1;min-width:0;background:#fff;border:2px solid #d8e6e2;border-radius:1.1rem;padding:.7rem .95rem}
.lc-bub::before{content:"";position:absolute;left:-9px;top:18px;width:14px;height:14px;background:#fff;border-left:2px solid #d8e6e2;border-bottom:2px solid #d8e6e2;transform:rotate(45deg)}
.lc-bub small{display:block;font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#008b76;margin-bottom:.15rem}
.lc-bub p{margin:0;font-size:1.12rem;line-height:1.35;font-weight:800;color:#081b3a;overflow-wrap:anywhere}
.lc-t-order .lc-bub p,.lc-t-grid .lc-bub p{font-size:1.05rem}

/* mascote */
.lc-cel{width:64px;height:64px;flex:none;display:block;overflow:visible}.lc-cel-sm{width:54px;height:54px}.lc-cel-md{width:78px;height:78px}.lc-cel-lg{width:112px;height:112px}
.lc-cel .lc-m{display:none}.lc-cel[data-mood="happy"] .lc-m-h,.lc-cel:not([data-mood]) .lc-m-h{display:block}.lc-cel[data-mood="sad"] .lc-m-s{display:block}.lc-cel[data-mood="cheer"] .lc-m-c{display:block}
.lc-cel[data-mood="sad"] .lc-bl{opacity:0}
.lc-cel-b{transform-origin:40px 70px;animation:lc-idle 3.2s ease-in-out infinite}.lc-cel[data-mood="cheer"] .lc-cel-b{animation:lc-jump .6s cubic-bezier(.3,1.5,.5,1)}.lc-cel[data-mood="sad"] .lc-cel-b{animation:lc-sag .5s ease both}
.lc-eyes{transform-origin:40px 36px;animation:lc-blink 4.5s infinite}
@keyframes lc-idle{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-2px) scaleY(1.02)}}
@keyframes lc-jump{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(5px) scale(1.08,.9)}60%{transform:translateY(-16px) scale(.94,1.1)}100%{transform:translateY(0) scale(1,1)}}
@keyframes lc-sag{0%{transform:scale(1,1)}40%{transform:scale(1.05,.93)}100%{transform:scale(1,.97) rotate(-3deg)}}
@keyframes lc-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}

/* opções (múltipla escolha e V/F) */
.lc-opts{display:grid;gap:.7rem}
.lc-opt{position:relative;display:flex;align-items:center;gap:.8rem;width:100%;min-height:58px;text-align:left;padding:.75rem 1rem;border-radius:1.05rem;border:2px solid #d8e6e2;border-bottom-width:5px;background:#fff;color:#0f2a4a;font-size:1.02rem;font-weight:700;line-height:1.3;transition:transform .1s,border-color .15s,background .15s}
.lc-opt kbd{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;border:2px solid #d8e6e2;background:#f6fbf9;font:800 .82rem Inter,Arial,sans-serif;color:#64748b}
.lc-opt span{min-width:0;overflow-wrap:anywhere}
@media (hover:hover){.lc-opt:not(:disabled):hover{background:#f1fbf8;border-color:#a8e6d8}}
.lc-opt:not(:disabled):active{transform:translateY(3px);border-bottom-width:2px}
.lc-opt.is-sel{border-color:#38bdf8;background:#e8f6ff;color:#075985;animation:lc-bump .25s}.lc-opt.is-sel kbd{border-color:#38bdf8;background:#fff;color:#0369a1}
@keyframes lc-bump{50%{transform:scale(1.025)}}
.lc-opt.is-ok{border-color:#00b894;background:#e1fbf3;color:#065f46;animation:lc-bump .35s}.lc-opt.is-ok kbd{background:#00b894;border-color:#00b894;color:#fff}
.lc-opt.is-bad{border-color:#f87171;background:#fff0f0;color:#9f1239}.lc-opt.is-bad kbd{background:#f87171;border-color:#f87171;color:#fff}
.lc-opt:disabled{cursor:default}
.lc-tf{grid-template-columns:1fr 1fr}.lc-tf .lc-opt{flex-direction:column;justify-content:center;gap:.3rem;min-height:104px;text-align:center;font-size:1.1rem;position:relative}
.lc-tf .lc-opt kbd{position:absolute;left:10px;top:10px}.lc-tf .lc-opt .material-symbols-outlined{font-size:2rem}
.lc-tf .lc-opt[data-v="1"] .material-symbols-outlined{color:#00b894}.lc-tf .lc-opt[data-v="0"] .material-symbols-outlined{color:#f87171}

/* pares */
.lc-match{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.lc-col{display:grid;gap:.6rem;align-content:start}
.lc-pc{min-height:56px;padding:.6rem .7rem;border-radius:1rem;border:2px solid #d8e6e2;border-bottom-width:5px;background:#fff;color:#0f2a4a;font-weight:700;font-size:.92rem;line-height:1.25;text-align:center;overflow-wrap:anywhere;transition:transform .1s,background .15s}
.lc-pc:active{transform:translateY(3px);border-bottom-width:2px}
.lc-pc.is-sel{border-color:#38bdf8;background:#e8f6ff;color:#075985}
.lc-pc.is-ok{border-color:#00b894;background:#e1fbf3;color:#065f46;opacity:.75;animation:lc-bump .35s}
.lc-pc.is-bad{border-color:#f87171;background:#fff0f0;animation:lc-shake .45s}.lc-pc.is-nudge{animation:lc-shake .4s}

/* ordem */
.lc-order{display:grid;gap:.9rem}
.lc-hint{margin:0;color:#64748b;font-size:.86rem;font-weight:700;text-align:center}
.lc-line{list-style:none;margin:0;padding:.7rem;border-radius:1.1rem;border:2px dashed #b9d9d1;background:#fff;display:grid;gap:.5rem;min-height:72px;counter-reset:s;align-content:start}
.lc-line.is-empty::after{content:"";display:block;height:44px}
.lc-line li{counter-increment:s;display:flex;align-items:center;gap:.6rem}.lc-line li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;background:#00cca3;color:#04372e;display:grid;place-items:center;font-weight:900;font-size:.82rem}
.lc-line .lc-chip{flex:1}
.lc-pool{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center}
.lc-chip{padding:.65rem .9rem;border-radius:.95rem;border:2px solid #d8e6e2;border-bottom-width:5px;background:#fff;color:#0f2a4a;font-weight:700;font-size:.95rem;line-height:1.25;text-align:left;overflow-wrap:anywhere;animation:lc-bump .25s}
.lc-pool .lc-chip{text-align:center}.lc-chip:active{transform:translateY(3px);border-bottom-width:2px}
.lc-chip.is-ok{border-color:#00b894;background:#e1fbf3;color:#065f46}.lc-chip.is-bad{border-color:#f87171;background:#fff0f0;color:#9f1239}

/* planilha (toque em células) */
.lc-grid-w{display:grid;gap:.6rem}
.lc-grid{display:grid;grid-template-columns:34px repeat(6,minmax(0,1fr));border:2px solid #b7d8cf;border-radius:.9rem;overflow:hidden;background:#fff;user-select:none;-webkit-user-select:none}
.lc-gc{min-height:40px;padding:0;border:0;border-right:1px solid #dbe9e5;border-bottom:1px solid #dbe9e5;background:#fff;color:#0f2a4a;font-size:.78rem;position:relative}
.lc-gc:nth-child(7n){border-right:0}
.lc-gh{background:#e7f4f0;color:#0f5c4c;font-weight:900;font-size:.82rem}.lc-gh:hover{background:#d5efe7}.lc-grh,.lc-gcorner{background:#e7f4f0}
.lc-gcell:hover{background:#f1fbf8}
.lc-gc.is-pick{background:#d9f3ff;box-shadow:inset 0 0 0 1px #38bdf8}.lc-gc.is-anchor{box-shadow:inset 0 0 0 3px #0b7ad1;animation:lc-bump .3s}
.lc-gh.is-pick{background:#38bdf8;color:#fff}
.lc-gc.is-ok{background:#c9f6e9;box-shadow:inset 0 0 0 2px #00b894}.lc-gc.is-bad{background:#ffe0e0;box-shadow:inset 0 0 0 2px #f87171}
.lc-gc.is-want{background:#fff1c9;box-shadow:inset 0 0 0 3px #f59e0b;animation:lc-glow 1s ease-in-out 2}
@keyframes lc-glow{50%{background:#ffe09a}}
.lc-gc.is-nudge{animation:lc-shake .4s}

/* digitar */
.lc-type{display:grid;gap:.8rem}
.lc-inp{width:100%;height:58px;border-radius:1rem;border:2px solid #d8e6e2;border-bottom-width:5px;padding:0 1rem;font:800 1.25rem Inter,Arial,sans-serif;color:#081b3a;background:#fff;text-align:center;letter-spacing:.02em}
.lc-inp:focus{border-color:#38bdf8;outline:0;background:#f4fbff}.lc-inp.is-ok{border-color:#00b894;background:#e1fbf3}.lc-inp.is-bad{border-color:#f87171;background:#fff0f0}
.lc-xl{display:grid;grid-template-columns:minmax(0,110px) 1fr;gap:.5rem;align-items:center;background:#107c41;padding:.8rem;border-radius:1rem;position:relative}
.lc-xl-n{position:absolute;top:-.55rem;left:.9rem;background:#f59e0b;color:#3b2500;font:900 .68rem Inter,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:.1rem .5rem;border-radius:99px}
.lc-xl .lc-inp{height:48px;font-size:1.1rem;border-radius:.6rem;border-bottom-width:2px;text-align:left}
.lc-xl-fx{display:flex;align-items:center;height:48px;padding:0 .9rem;background:#fff;border-radius:.6rem;font:italic 800 1rem Inter,Arial,sans-serif;color:#6b7280}

/* rodapé e feedback */
.lc-foot{flex:none;background:#fff;border-top:2px solid #e3eeea;transition:background .25s,border-color .25s}
.lc.st-ok .lc-foot{background:#dcfaf0;border-color:#9be7d2}.lc.st-no .lc-foot{background:#ffe9e9;border-color:#f8b4b4}
.lc-fb{max-width:640px;margin:0 auto;padding:0 16px;display:none;gap:.75rem;align-items:flex-start}
.lc-fb.in{display:flex;padding-top:14px;animation:lc-up .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes lc-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.lc-fb-i .material-symbols-outlined{font-size:2.1rem}.lc-fb.is-ok .lc-fb-i{color:#00a07f}.lc-fb.is-no .lc-fb-i{color:#e11d48}
.lc-fb-t{display:grid;gap:.15rem;min-width:0}.lc-fb-t b{font-size:1.12rem;font-weight:900}.lc-fb.is-ok b{color:#065f46}.lc-fb.is-no b{color:#9f1239}
.lc-fb-t span{font-size:.92rem;line-height:1.4;color:#334155;overflow-wrap:anywhere}.lc-fb-t strong{font-weight:900;color:#0f2a4a}
.lc-act{max-width:640px;margin:0 auto;padding:12px 16px max(14px,env(safe-area-inset-bottom))}
.lc-go{display:block;width:100%;min-height:54px;border:0;border-radius:1rem;background:#00b894;color:#fff;font-weight:900;font-size:1.02rem;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 5px 0 #008b76;transition:transform .1s,box-shadow .1s,background .15s}
.lc-go:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 #008b76}
.lc-go:disabled{background:#d6e3df;color:#94a8a2;box-shadow:0 5px 0 #bccdc8;cursor:not-allowed}
.lc-go.is-no{background:#ef4444;box-shadow:0 5px 0 #b91c1c}.lc-go.is-hidden{display:none}
.lc-go.is-ok{background:#00b894}
.lc.st-ok .lc-go.is-ok{background:#00a07f}
.lc-ghost{display:block;width:100%;min-height:48px;margin-top:.5rem;border:0;background:transparent;color:#64748b;font-weight:900;letter-spacing:.04em;text-transform:uppercase}

/* abertura e encerramento */
.lc-hero,.lc-end{display:grid;justify-items:center;text-align:center;gap:.6rem;padding:1.4rem 0 .5rem;animation:lc-slide .45s cubic-bezier(.2,.9,.3,1) both}
.lc-hero h2,.lc-end h2{margin:.4rem 0 0;font-size:1.6rem;line-height:1.2;font-weight:900;color:#081b3a}.lc-hero p,.lc-end p{margin:0;max-width:34rem;color:#475569;font-size:1rem;line-height:1.5}
.lc-meta{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.lc-meta li{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .65rem;border-radius:999px;background:#fff;border:2px solid #d8e6e2;font-weight:800;font-size:.8rem;color:#334155}.lc-meta .material-symbols-outlined{font-size:1.05rem;color:#00a07f}
.lc-stars{display:flex;gap:.4rem;margin:.3rem 0}
.lc-star .material-symbols-outlined{font-size:3rem;color:#d3dedb;font-variation-settings:'FILL' 1,'wght' 500}.lc-star.on .material-symbols-outlined{color:#f59e0b;animation:lc-star .6s cubic-bezier(.3,1.7,.5,1) both;animation-delay:var(--d,0s)}
@keyframes lc-star{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
.lc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;width:100%;max-width:26rem;margin-top:.4rem}
.lc-stats div{padding:.7rem .4rem;border-radius:1rem;background:#fff;border:2px solid #d8e6e2;display:grid;gap:.1rem}.lc-stats b{font-size:1.4rem;font-weight:900;color:#081b3a}.lc-stats span{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
.lc-xp{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;padding:.55rem 1rem;border-radius:999px;background:#fff4dc;border:2px solid #fcd9a0;font-weight:900;color:#9a3412}.lc-xp .material-symbols-outlined{color:#f59e0b}.lc-xp b{font-size:1.4rem}.lc-xp span:last-child{font-size:.8rem}
.lc-flash{position:absolute;left:50%;top:max(62px,calc(env(safe-area-inset-top) + 60px));transform:translateX(-50%);display:flex;gap:.4rem;align-items:center;padding:.55rem 1.1rem;border-radius:999px;background:#081b3a;color:#fff;font-weight:900;box-shadow:0 14px 30px -10px rgba(0,0,0,.55);animation:lc-fl 1.5s ease both;z-index:5;white-space:nowrap}.lc-flash .material-symbols-outlined{color:#fb923c}
@keyframes lc-fl{0%{opacity:0;transform:translate(-50%,-14px) scale(.8)}12%,80%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-8px)}}
.lc-conf{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.lc-sheet{position:absolute;inset:0;z-index:8;background:rgba(8,27,58,.55);display:grid;align-items:end;animation:lc-fade .2s both}
@keyframes lc-fade{from{opacity:0}}
.lc-sheet-b{max-width:520px;width:100%;margin:0 auto;background:#fff;border-radius:1.4rem 1.4rem 0 0;padding:1.2rem 1.2rem max(18px,env(safe-area-inset-bottom));display:grid;justify-items:center;text-align:center;gap:.4rem;animation:lc-up .28s cubic-bezier(.2,.9,.3,1) both}
.lc-sheet-b h3{margin:.2rem 0 0;font-size:1.3rem;font-weight:900}.lc-sheet-b p{margin:0 0 .6rem;color:#475569}

/* cartão da missão dentro da aula */
.lc-card{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center;padding:1.2rem;border-radius:1.4rem;border:2px solid #9be7d2;border-bottom-width:6px;background:linear-gradient(135deg,#eafcf6,#fff 60%);box-shadow:0 18px 40px -26px rgba(0,120,100,.6)}
.lc-card .lc-cel{width:96px;height:96px}
.lc-card-b small{display:block;font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#008b76}
.lc-card-b h4{margin:.1rem 0 .3rem;font-size:1.3rem;line-height:1.2;font-weight:900;color:#081b3a}.lc-card-b p{margin:0 0 .6rem;color:#475569;font-size:.95rem;line-height:1.45}
.lc-card-b .lc-meta{justify-content:flex-start;margin:0 0 .7rem}
.lc-card-s{display:flex;align-items:center;gap:.15rem;margin:-.2rem 0 .7rem}.lc-card-s .lc-star .material-symbols-outlined{font-size:1.5rem}.lc-card-s em{font-style:normal;font-weight:800;font-size:.8rem;color:#64748b;margin-left:.4rem}
.lc-card-go{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:0 1.6rem;border:0;border-radius:1rem;background:#00b894;color:#fff;font-weight:900;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 5px 0 #008b76;transition:transform .1s,box-shadow .1s}
.lc-card-go:hover{background:#00a888}.lc-card-go:active{transform:translateY(4px);box-shadow:0 1px 0 #008b76}.lc-card-go:focus-visible{outline:3px solid #0b7ad1;outline-offset:3px}

@media (max-width:640px){
  .lc-card{grid-template-columns:auto 1fr;gap:.8rem;padding:1rem;align-items:start}.lc-card .lc-cel{width:64px;height:64px}.lc-card-b h4{font-size:1.1rem}.lc-card-b p{display:none}.lc-card-b .lc-meta{margin-bottom:.6rem}.lc-card-go{width:100%}.lc-card-b{display:contents}.lc-card-b>small,.lc-card-b>h4{grid-column:2}.lc-card-b>small{margin-top:.2rem}.lc-card-m{grid-row:1/3;grid-column:1}.lc-card-b>.lc-meta,.lc-card-b>.lc-card-s,.lc-card-b>.lc-card-go{grid-column:1/-1}
  .lc-bub p{font-size:1.04rem}.lc-opt{font-size:.98rem}.lc-tf{gap:.5rem}.lc-tf .lc-opt{min-height:92px}
  .lc-match{gap:.5rem}.lc-pc{font-size:.84rem;padding:.55rem .45rem}.lc-gc{min-height:36px}.lc-grid{grid-template-columns:30px repeat(6,minmax(0,1fr))}
  .lc-hero h2,.lc-end h2{font-size:1.4rem}
}
@media (max-height:640px){.lc-cel-lg{width:80px;height:80px}.lc-hero,.lc-end{padding-top:.4rem}.lc-star .material-symbols-outlined{font-size:2.3rem}}
@media (prefers-reduced-motion:reduce){.lc *,.lc{animation:none!important;transition:none!important}}

body.lc-open .otfb-btn,body.lc-open .ott-fab{display:none!important}