:root { --ink: #1E2A4A; --paper: #FFF8EC; --verde: #B2CA4A; --laranja: #F8BC3B; --magenta: #C12160; --azul: #3990CB; --muted: #5A6482; --mau: #B23A22; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Trebuchet MS', 'Nunito', Arial, sans-serif; background: var(--paper); color: var(--ink); padding: 24px 16px 48px; }
main { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
.cab { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cab img { width: 96px; height: auto; }
h1 { font-size: clamp(34px, 7vw, 52px); margin: 0; line-height: 1; }
h2 { font-size: 26px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.sub { margin: 6px 0 0; color: var(--muted); font-size: 18px; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 4px solid var(--azul); outline-offset: 3px; }

.grande { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.botao { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 24px; padding: 26px 18px; box-shadow: 6px 6px 0 var(--ink); font-size: 24px; font-weight: 800; transition: transform .1s; }
.botao span.emo { font-size: 56px; line-height: 1; }
.botao:hover, .botao:focus-visible { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.botao.aluno { background: #E6F1FA; }
.prof { align-self: center; color: var(--muted); font-size: 16px; }

.passo { background: #fff; border: 3px solid var(--ink); border-radius: 24px; padding: 22px; box-shadow: 6px 6px 0 var(--ink); display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.passo h2 { justify-content: center; margin: 0; }
.campo { font-size: 32px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; text-align: center; width: min(320px, 100%); padding: 12px; border: 3px solid var(--ink); border-radius: 16px; }
.acao { border: 0; background: var(--ink); color: #fff; font-size: 22px; font-weight: 800; padding: 14px 30px; border-radius: 16px; }
.voltar { border: 0; background: none; color: var(--muted); font-size: 17px; text-decoration: underline; }
.nomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; width: 100%; }
.nome { background: #F3F6FD; border: 3px solid var(--ink); border-radius: 18px; padding: 18px 10px; font-size: 22px; font-weight: 800; }
.nome:hover { background: #E6F1FA; }
.pontos { display: flex; gap: 16px; }
.pontos i { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ink); }
.pontos i.cheio { background: var(--ink); }
.teclado { display: grid; grid-template-columns: repeat(3, 84px); gap: 12px; }
.teclado button { height: 72px; font-size: 32px; font-weight: 800; border: 3px solid var(--ink); border-radius: 18px; background: #fff; }
.teclado button:active { background: var(--laranja); }
.erro { color: var(--mau); font-weight: 800; font-size: 19px; min-height: 1.4em; }

.ola { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ola b { font-size: 28px; }
.sair { border: 2px solid var(--ink); background: #fff; border-radius: 12px; padding: 6px 14px; font-weight: 700; }
.missao { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); background: #FFF3D6; border: 3px solid var(--ink); border-radius: 18px; padding: 14px 18px; }
.missao .emo { font-size: 36px; } .missao.feita { background: #E3F5E8; }
.tema { border-top: 6px solid var(--cor, var(--laranja)); padding-top: 14px; }
.ano { background: var(--azul); color: #fff; border-radius: 999px; padding: 2px 14px; font-size: 18px; }
.area { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.jogos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
a.jogo { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 20px; padding: 18px; box-shadow: 5px 5px 0 var(--ink); position: relative; }
a.jogo:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
a.jogo .emo { font-size: 44px; line-height: 1; }
a.jogo b { font-size: 21px; }
a.jogo span { color: var(--muted); font-size: 16px; }
a.jogo.fechado { opacity: .6; }
.cadeado { position: absolute; top: 12px; right: 14px; font-size: 26px; }
.vazio { color: var(--muted); font-size: 16px; }
.aviso { background: #FFF3D6; border-radius: 12px; padding: 10px 14px; font-weight: 700; }

/* o meu progresso */
.progresso h3 { font-size: 20px; margin: 18px 0 10px; }
.contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.contador { background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.contador .emo { font-size: 34px; line-height: 1; }
.contador b { font-size: 34px; line-height: 1.1; }
.contador span:last-child { color: var(--muted); font-size: 15px; }
.medalhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.medalha { background: #F1F2F6; border: 2px dashed #B9BFCF; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; color: var(--muted); }
.medalha .emo { font-size: 34px; line-height: 1; filter: grayscale(1); opacity: .6; }
.medalha b { font-size: 15px; }
.medalha span:last-child:not(.emo) { font-size: 13px; }
.medalha.ganha { background: #FFF3D6; border: 3px solid var(--ink); color: var(--ink); }
.medalha.ganha .emo { filter: none; opacity: 1; }
.blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.bloco { background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.bloco.resolvido { background: #E3F5E8; }
.bloco .chaves { font-size: 15px; letter-spacing: 1px; word-break: break-all; }
.bloco .prova b { font-size: 18px; }
.treinar { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 17px; }
.chip { background: #FFE1D8; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 15px; }
.fortes .chip { background: #E3F5E8; }
.ir { margin-left: auto; font-weight: 800; color: var(--azul); }
a.jogo .barra { display: block; height: 10px; border-radius: 6px; background: #EEF1F5; overflow: hidden; margin-top: 4px; }
a.jogo .barra i { display: block; height: 100%; background: var(--verde); }
a.jogo .mini { font-size: 15px; }
a.ver-correcao { font-weight: 800; color: var(--azul); font-size: 15px; }
.correcao { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.correcao li { display: flex; gap: 12px; background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 12px 14px; font-size: 17px; }
.correcao li.errada { background: #FFF1EC; }
.correcao li .emo { font-size: 26px; }
.correcao li p { margin-top: 6px; }
.correcao .correta { color: #1D6B3A; }
.recados { display: flex; flex-direction: column; gap: 12px; }
.recado { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 14px 16px; }
.recado.novo { background: #FDEAF1; }
.recado .emo-recado { font-size: 48px; line-height: 1; flex: none; }
.recado .corpo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.recado .meta { color: var(--muted); font-size: 15px; }
.recado .novo-tag { color: var(--magenta); }
.recado .texto { font-size: 21px; font-weight: 700; overflow-wrap: anywhere; }
.reacoes { display: flex; gap: 8px; flex-wrap: wrap; }
.reacao { font-size: 26px; background: #F3F6FD; border: 2px solid #C9D1E4; border-radius: 14px; padding: 4px 10px; line-height: 1.2; }
.reacao.escolhida { background: #FFF3D6; border: 3px solid var(--ink); transform: scale(1.1); }