/* Aulas como jogo: estrelas, elementos descobertos, desafios do tópico, missão do dia e revelação */
.estrelas{display:inline-flex;gap:1px;line-height:1;vertical-align:middle}
.estrelas i{font-style:normal;font-size:14px;color:color-mix(in srgb,var(--muted) 35%,transparent)}
.estrelas i.on{color:#F5B301;text-shadow:0 1px 0 rgb(0 0 0 / .12)}
.estrelas.grande i{font-size:34px}
.estrelas i.nova{animation:estrela-nova .7s var(--mola,ease) both;animation-delay:calc(.25s + var(--k) * .18s)}
@keyframes estrela-nova{0%{transform:scale(0) rotate(-90deg);opacity:0}60%{transform:scale(1.45) rotate(10deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.pc-faixa .estrelas i{font-size:16px;letter-spacing:0}
.pc-faixa .estrelas i:not(.on){color:rgb(255 255 255 / .35)}
.passo.st-pendente .pc-faixa .estrelas i:not(.on),.passo.st-proximo .pc-faixa .estrelas i:not(.on){color:rgb(12 27 51 / .25)}

/* placar com 5 números */
.aulas-placar{grid-template-columns:repeat(5,minmax(0,1fr))!important}
@media (max-width:820px){.aulas-placar{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:480px){.aulas-placar{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* grade de módulos: o elemento "enche" conforme as aulas; descoberto ganha cor e brilho */
.aula-mod{background-image:linear-gradient(to top,color-mix(in srgb,var(--naipe,var(--navy)) 13%,transparent) var(--fill,0%),transparent var(--fill,0%))}
.aula-mod.oculto-el .am-simb{filter:grayscale(1);opacity:.4}
.aula-mod.descoberto{border-color:var(--naipe-tx,var(--naipe));box-shadow:0 0 0 3px color-mix(in srgb,var(--naipe,var(--navy)) 22%,transparent),0 8px 22px -12px var(--naipe,var(--navy))}
.aula-mod.descoberto .am-simb{text-shadow:0 0 18px color-mix(in srgb,var(--naipe,var(--navy)) 55%,transparent)}
.aula-mod.descoberto::after{content:"✦";position:absolute;right:10px;bottom:8px;font-size:15px;color:var(--naipe-tx,var(--naipe))}
.am-est{font-size:12px;font-weight:800;color:#B07A00}
.am-est small{font-weight:600;color:var(--muted)}

/* lista: estrelas por aula */
.al-aula{grid-template-columns:26px minmax(0,1fr) auto auto!important}
@media (max-width:560px){.al-aula{grid-template-columns:26px minmax(0,1fr) auto!important}}
.al-corpo .desafio-btn,.al-corpo .desafio-trava,.al-corpo .desafio-selo{margin-left:24px;justify-self:start}

/* desafio do tópico */
.pt-desafio{grid-column:2/4;justify-self:start;margin-top:8px}
.mg .pt-desafio{grid-column:2/4}
@media (max-width:560px){.pt-desafio{grid-column:1}}
.desafio-btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#2B1B5A,#0C1B33);color:#fff;border-color:#2B1B5A}
.desafio-btn i{font-style:normal;color:#F5B301}
.desafio-btn small{opacity:.75;font-weight:600}
.desafio-btn:hover{filter:brightness(1.15)}
.desafio-trava,.desafio-selo{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:999px}
.desafio-trava{color:var(--muted);background:var(--surface-2,#eef1f5);border:1.5px dashed var(--line)}
.desafio-trava i,.desafio-selo i{font-style:normal}
.desafio-selo{color:#7A5200;background:#FFF4D1;border:1.5px solid #F5B301}
.desafio-selo .btn{margin-left:4px}
.desafio-trava.sm,.desafio-selo.sm{font-size:11.5px;padding:3px 9px}

/* missão de aulas do dia */
.missao-aulas{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(150px,220px);align-items:center;gap:10px 16px;padding:12px 16px;border-radius:14px;background:var(--surface);border:2px solid var(--orange);box-shadow:var(--sombra-1)}
.missao-aulas.feita{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,var(--surface))}
.ma-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:800;background:var(--orange);color:#0C1B33}
.missao-aulas.feita .ma-ic{background:var(--ok);color:#fff}
.ma-txt{display:grid;gap:4px;min-width:0}
.ma-txt b{font-size:15px}
.ma-itens{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.ma-itens i{font-style:normal;margin-right:4px}
.ma-itens .ok{color:var(--ok);font-weight:700}
.ma-xp{font-family:var(--f-mono,monospace);font-size:13px;font-weight:800;color:#7A5200;background:#FFF4D1;border-radius:8px;padding:4px 8px;white-space:nowrap}
.ma-nivel{display:grid;gap:3px}
.ma-nivel small{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ma-nivel b{font-size:13px}
.ma-nivel .alb-xp,.fp-nivel .alb-xp{height:8px;background:var(--surface-2,#e6eaf0)}
.ma-nivel .alb-xp i,.fp-nivel .alb-xp i{background:linear-gradient(90deg,#7B5CFF,#2EC5E8);box-shadow:none}
@media (max-width:700px){.missao-aulas{grid-template-columns:auto minmax(0,1fr)}.ma-xp{grid-column:2;justify-self:start}.ma-nivel{grid-column:1/-1}}

/* HUD das questões */
.hud-aula{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);position:relative}
.hud-meta{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.hud-meta b{font-size:18px;color:var(--ink)}
.hud-meta .estrelas i{font-size:22px}
.hud-dir{display:inline-flex;align-items:center;gap:8px;min-height:26px}
.hud-combo{font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,#FF7A1A,#F5B301);padding:3px 10px;border-radius:999px;animation:hud-pulo .45s var(--mola,ease) both}
.hud-pop{font-weight:800;font-size:13px;color:var(--ok);animation:hud-sobe 1.1s ease both}
@keyframes hud-pulo{0%{transform:scale(.4)}70%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes hud-sobe{0%{transform:translateY(8px);opacity:0}25%{opacity:1}100%{transform:translateY(-14px);opacity:0}}

/* fim da aula */
.fp-estrelas{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fp-estrelas small{font-size:13px;font-weight:700;color:var(--muted)}
.fp-recomp{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.fp-xp{font-family:var(--f-display);font-size:26px;color:#7A5200;background:#FFF4D1;border:2px solid #F5B301;border-radius:12px;padding:2px 12px;animation:hud-pulo .55s var(--mola,ease) .5s both}
.fp-nivel{display:grid;gap:4px;min-width:180px;flex:1;max-width:320px}
.fp-nivel small{font-size:12px;font-weight:700;color:var(--muted)}
.fp-missao{font-size:13px;font-weight:800;color:var(--ok)}
.fp-desafio{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:linear-gradient(135deg,#2B1B5A,#0C1B33);color:#fff}
.fp-desafio span{display:grid;gap:2px}
.fp-desafio small{opacity:.8}
.fp-ver-el{justify-self:start}

/* carta do elemento */
.carta-el{position:relative;width:min(300px,82vw);display:grid;gap:8px;justify-items:center;text-align:center;padding:18px 18px 16px;border-radius:20px;color:#fff;background:radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--naipe) 70%,#fff 10%),color-mix(in srgb,var(--naipe) 75%,#000) 75%);border:3px solid color-mix(in srgb,var(--naipe) 40%,#fff);box-shadow:0 20px 50px -18px var(--naipe),inset 0 0 0 2px rgb(255 255 255 / .12);overflow:hidden}
.ce-brilho{position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 70%,rgb(255 255 255 / .35) 80%,transparent 90%);animation:ce-gira 5s linear infinite;pointer-events:none}
@keyframes ce-gira{to{transform:rotate(360deg)}}
.ce-topo{width:100%;display:flex;justify-content:space-between;align-items:center;position:relative}
.ce-topo small{font-family:var(--f-mono,monospace);font-weight:700;opacity:.85}
.ce-pur{font-size:11px;font-weight:800;letter-spacing:.04em;background:rgb(255 255 255 / .18);border-radius:99px;padding:2px 8px}
.ce-simb{position:relative;font-family:var(--f-display);font-weight:400;font-size:84px;line-height:1;text-shadow:0 4px 0 rgb(0 0 0 / .2),0 0 30px rgb(255 255 255 / .35)}
.ce-nome{position:relative;font-weight:800;font-size:16px;line-height:1.2}
.carta-el .estrelas{position:relative;flex-wrap:wrap;justify-content:center;max-width:100%}
.carta-el .estrelas i{font-size:13px;color:rgb(255 255 255 / .3)}
.carta-el .estrelas i.on{color:#FFD54A}
.ce-sub{position:relative;font-size:12px;opacity:.85}
.ce-cur{position:relative;margin:4px 0 0;font-size:13px;line-height:1.4;background:rgb(0 0 0 / .22);border-radius:12px;padding:10px 12px;text-align:left}
.ce-cur span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#FFD54A;margin-bottom:3px}
.carta-el.revelar{animation:ce-vira .9s var(--mola,ease) both}
@keyframes ce-vira{0%{transform:perspective(800px) rotateY(90deg) scale(.6);opacity:0}60%{transform:perspective(800px) rotateY(-12deg) scale(1.06);opacity:1}100%{transform:perspective(800px) rotateY(0) scale(1)}}

/* revelação */
.revela{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:auto;padding:16px max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgb(6 12 26 / .78);backdrop-filter:blur(4px);animation:rv-fundo .3s ease both}
@keyframes rv-fundo{from{opacity:0}}
.rv-caixa{display:grid;gap:14px;justify-items:center;max-width:420px;text-align:center;color:#fff}
.rv-caixa p{color:rgb(255 255 255 / .85);margin:0}
.rv-eb{font-family:var(--f-display);font-size:26px;letter-spacing:.04em;text-transform:uppercase;color:#FFD54A;text-shadow:0 0 22px rgb(255 213 74 / .5);animation:hud-pulo .5s var(--mola,ease) both}
.rv-carta{position:relative;display:grid;place-items:center}
.rv-misterio{width:200px;height:260px;border-radius:20px;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#16264a 0 12px,#1c2f5a 12px 24px);border:3px solid #34508a;animation:rv-treme .6s ease-in-out both}
.rv-misterio b{font-family:var(--f-display);font-size:90px;color:#FFD54A}
@keyframes rv-treme{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg) scale(1.02)}40%{transform:rotate(4deg) scale(1.04)}60%{transform:rotate(-3deg) scale(1.06)}80%{transform:rotate(2deg) scale(1.08)}}
.rv-faiscas{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.rv-faiscas i{position:absolute;width:9px;height:9px;border-radius:50%;background:#FFD54A;box-shadow:0 0 10px #FFD54A;animation:rv-faisca 1.1s ease-out both;animation-delay:var(--dl)}
.rv-faiscas i:nth-child(3n){background:#2EC5E8;box-shadow:0 0 10px #2EC5E8}
.rv-faiscas i:nth-child(4n){background:#FF7A1A;box-shadow:0 0 10px #FF7A1A}
@keyframes rv-faisca{0%{transform:rotate(var(--a)) translateX(0) scale(1);opacity:1}100%{transform:rotate(var(--a)) translateX(var(--r)) scale(.2);opacity:0}}
.revela .btn.ghost{color:#fff;border-color:rgb(255 255 255 / .4)}
.mcap-leg li.est i{background:#F5B301}
@media (prefers-reduced-motion: reduce){.estrelas i.nova,.carta-el.revelar,.rv-misterio,.rv-faiscas i,.ce-brilho,.hud-combo,.hud-pop,.fp-xp{animation:none}}
.ce-est{position:relative;display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:4px 6px;width:100%}
.ce-est b{color:#FFD54A;font-size:20px}
.ce-est small{opacity:.8}
.ce-barra{align-self:center;height:8px;border-radius:99px;background:rgb(255 255 255 / .18);overflow:hidden}
.ce-barra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#FFD54A,#fff)}

@media (max-height:700px){.revela{place-items:start center}.ce-cur{font-size:12px}}
.revela-fechar{position:absolute;top:max(10px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));width:40px;height:40px;border-radius:50%;border:0;background:rgb(255 255 255 / .15);color:#fff;font-size:22px;cursor:pointer}
.revela-fechar:focus-visible{outline:3px solid #FFD54A}