/* Secao 579: app de idiomas. Visual do mockup https://claude.ai/artifact/5snPbr8rNW1UTcPGMuCyFC
   (colorido e de jogo, na linha do EWA; mascote raposa do Kids). */
:root {
  --papel: #ffffff; --fundo: #ffffff; --tinta: #26233a; --suave: #7a768f; --linha: #e8e5f2; --cinza: #d9d6e4; --cinza2: #c3bfd2;
  --roxo: #7c4dff; --azul: #2f8cff; --azul-esc: #1f6ed4; --laranja: #ff8a1f; --ouro: #ffb800; --verde: #22b573; --rosa: #ff4d8d; --vermelho: #ff4b4b; --ceu: #e9f3ff;
  --acento-claro: #e7f1ff;
  --f-tit: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --f-ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --topo: env(safe-area-inset-top, 0px); --base: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root { --papel: #1d1a2c; --fundo: #16142a; --tinta: #f1eff9; --suave: #a9a4c0; --linha: #2e2a44; --cinza: #3a3652; --cinza2: #4a4566; --ceu: #1c2440; --acento-claro: #1f2b4a; color-scheme: dark; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--tinta); font: 16px/1.45 var(--f-ui); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--roxo); outline-offset: 2px; }
input:not([type=checkbox]), select, textarea { font-size: 16px; }
#tela { position: fixed; inset: 0; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; background: var(--fundo); overflow: hidden; }
#topo { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--topo) + 8px) 16px 8px; flex: none; min-height: 8px; }
#topo:empty { padding: var(--topo) 0 0; }
#rolagem { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; position: relative; -webkit-overflow-scrolling: touch; }
#corpo { padding: 0 16px calc(var(--base) + 130px); display: flex; flex-direction: column; gap: 14px; }
[hidden] { display: none !important; }

.bandeira { width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; font: 900 12px var(--f-ui); color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.12), inset 0 0 0 3px rgba(255,255,255,.6); }
.bandeira b { background: rgba(0,0,0,.35); border-radius: 6px; padding: 0 4px; }
.bandeira b:empty { display: none; }
.stat { display: flex; align-items: center; gap: 4px; font: 800 18px var(--f-tit); border: 0; background: none; }
.stat .em { font-size: 24px; line-height: 1; }
.stat.fogo { color: var(--laranja); }
.stat.fogo.zero { color: var(--cinza2); }
.stat.fogo.zero .em { filter: grayscale(1); opacity: .6; }
.stat.moeda { color: var(--ouro); }
.stat.xp { color: var(--roxo); }

.faixa { border-radius: 20px; padding: 14px 16px; color: #fff; display: flex; align-items: center; gap: 12px; box-shadow: 0 5px 0 rgba(0,0,0,.14); position: sticky; top: 0; z-index: 5; margin-top: 4px; }
.faixa .txt { flex: 1; min-width: 0; }
.faixa small { font-weight: 800; opacity: .9; text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; }
.faixa b { display: block; font: 800 20px/1.1 var(--f-tit); }
.faixa button { border: 0; background: rgba(255,255,255,.22); color: #fff; border-radius: 14px; width: 46px; height: 46px; font-size: 22px; flex: none; }
.caminho { position: relative; }
.caminho svg.fio { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.no { position: absolute; width: 132px; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translateX(-50%); }
.bola { width: 104px; height: 104px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 50px; position: relative; box-shadow: 0 7px 0 rgba(0,0,0,.18); transition: transform .12s; }
.bola:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.bola::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 3px solid rgba(255,255,255,.45); }
.no.trancado .bola { background: var(--cinza) !important; }
.no.trancado .bola span { filter: grayscale(1) brightness(.75) contrast(.4); opacity: .7; }
.no.atual .bola { animation: pula 1.6s ease-in-out infinite; }
@keyframes pula { 50% { transform: translateY(-6px); } }
.balao-comecar { position: absolute; top: -40px; background: var(--papel); border: 2px solid var(--linha); color: var(--azul); font: 800 14px var(--f-ui); padding: 4px 12px; border-radius: 12px; white-space: nowrap; box-shadow: 0 3px 0 var(--linha); }
.estrelas { display: flex; gap: 3px; font-size: 20px; line-height: 1; min-height: 22px; }
.estrelas i { font-style: normal; color: var(--cinza); }
.estrelas i.on { color: var(--ouro); text-shadow: 0 2px 0 #d98e00; }
.estrelas i:nth-child(2) { transform: translateY(5px); }
.no .rot { font: 800 17px var(--f-tit); text-align: center; line-height: 1.1; }
.continuar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--base) + 86px); z-index: 12; border: 0; border-radius: 18px; background: var(--azul); color: #fff; font: 800 22px var(--f-tit); padding: 8px 34px; box-shadow: 0 5px 0 var(--azul-esc); }
.chip-rev { position: fixed; left: 12px; bottom: calc(var(--base) + 150px); z-index: 12; border: 0; border-radius: 16px; background: linear-gradient(160deg, #ff5f9e, #c2185b); color: #fff; font: 800 14px var(--f-tit); padding: 8px 12px; box-shadow: 0 4px 0 rgba(0,0,0,.18); }

#abas { position: relative; background: var(--papel); border-top: 2px solid var(--linha); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 2px calc(var(--base) + 6px); z-index: 20; flex: none; }
.aba { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 1px; font: 800 12px var(--f-ui); color: var(--suave); padding: 4px 0; }
.aba .em { font-size: 26px; line-height: 1.15; filter: saturate(.85); }
.aba[aria-selected="true"] { color: var(--tinta); }
.aba[aria-selected="true"] .em { transform: scale(1.12); filter: none; }
.aba .ai { width: 30px; height: 26px; border-radius: 9px; background: linear-gradient(135deg, var(--roxo), var(--rosa)); color: #fff; font: 900 12px var(--f-ui); display: grid; place-items: center; margin: 2px 0 1px; }

/* entrada */
.entrada { display: flex; flex-direction: column; gap: 14px; padding-top: 30px; }
.entrada .mascote { font-size: 90px; text-align: center; line-height: 1; animation: pula 2s ease-in-out infinite; }
.entrada h1 { font: 800 34px/1.05 var(--f-tit); text-align: center; margin: 0; }
.entrada h1 em { font-style: normal; background: linear-gradient(90deg, var(--roxo), var(--rosa), var(--laranja)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.entrada p { text-align: center; color: var(--suave); font-weight: 700; margin: 0; }
.campo { display: flex; flex-direction: column; gap: 5px; font-weight: 800; font-size: 14px; color: var(--suave); }
.campo input, .campo select { min-height: 52px; border-radius: 16px; border: 2px solid var(--linha); background: var(--papel); padding: 0 14px; color: var(--tinta); font-weight: 700; }
.erro-form { color: var(--vermelho); font-weight: 800; text-align: center; min-height: 22px; margin: 0; }
.link { border: 0; background: none; color: var(--azul); font-weight: 800; text-decoration: underline; padding: 8px; }
.idiomas-escolha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lid { border: 2px solid var(--linha); border-bottom-width: 5px; background: var(--papel); border-radius: 18px; padding: 10px; display: flex; gap: 10px; align-items: center; text-align: left; }
.lid .bandeira { width: 38px; height: 38px; font-size: 11px; flex: none; }
.lid b { display: block; font-weight: 800; }
.lid span { font-size: 12px; color: var(--suave); font-weight: 700; }
.lid.ativo { border-color: var(--azul); background: var(--acento-claro); }

/* licao */
.licao-topo { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.fechar { width: 40px; height: 40px; border: 0; background: none; font-size: 22px; color: var(--suave); }
.barra-licao { flex: 1; height: 16px; border-radius: 8px; background: var(--linha); overflow: hidden; }
.barra-licao i { display: block; height: 100%; background: linear-gradient(90deg, var(--verde), #7be495); border-radius: 8px; transition: width .3s; box-shadow: inset 0 -4px 0 rgba(0,0,0,.1); }
.combo { font: 800 15px var(--f-tit); color: var(--laranja); white-space: nowrap; }
.personagem { display: flex; align-items: flex-end; gap: 10px; }
.personagem .rosto { font-size: 60px; line-height: 1; }
.fala { background: var(--papel); border: 2px solid var(--linha); border-radius: 18px; padding: 10px 14px; font: 700 18px var(--f-ui); position: relative; flex: 1; }
.fala::before { content: ""; position: absolute; left: -9px; bottom: 16px; width: 14px; height: 14px; background: var(--papel); border-left: 2px solid var(--linha); border-bottom: 2px solid var(--linha); transform: rotate(45deg); }
.ouvir-mini { border: 0; background: var(--azul); color: #fff; width: 34px; height: 34px; border-radius: 50%; margin-right: 6px; vertical-align: middle; font-size: 15px; }
.tipo { font: 800 13px var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--roxo); }
.pergunta { font: 800 22px/1.2 var(--f-tit); margin: 0; }
.opcoes { display: flex; flex-direction: column; gap: 10px; }
.opcao { border: 2px solid var(--linha); border-bottom-width: 5px; background: var(--papel); border-radius: 16px; padding: 14px; text-align: left; font: 700 17px var(--f-ui); }
.opcao.certa { border-color: var(--verde); background: #e3f9ee; color: #11734a; }
.opcao.errada { border-color: var(--vermelho); background: #ffe7e7; color: #b52b2b; }
.montar { min-height: 64px; border-bottom: 2px solid var(--linha); border-top: 2px solid var(--linha); display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; align-content: flex-start; }
.pecas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.peca { border: 2px solid var(--linha); border-bottom-width: 5px; background: var(--papel); border-radius: 14px; padding: 8px 14px; font: 700 17px var(--f-ui); }
.peca.usada { visibility: hidden; }
.mic { width: 110px; height: 110px; border-radius: 50%; border: 0; background: linear-gradient(160deg, var(--azul), var(--roxo)); color: #fff; font-size: 46px; align-self: center; box-shadow: 0 7px 0 #4b2bb8; }
.mic.gravando { background: linear-gradient(160deg, var(--rosa), var(--vermelho)); animation: pula .8s ease-in-out infinite; }
.ouvido { text-align: center; font-weight: 800; font-size: 18px; min-height: 26px; }
.nota-voz { text-align: center; color: var(--suave); font-weight: 700; }
.nota-voz b { display: block; font: 800 40px var(--f-tit); line-height: 1; }
textarea.escrever { width: 100%; min-height: 100px; border-radius: 16px; border: 2px solid var(--linha); background: var(--papel); padding: 12px; resize: none; }
.correcao { background: linear-gradient(135deg, #f1ebff, #ffe9f3); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; color: #2c2540; }
.selo-ia { display: inline-flex; gap: 6px; align-items: center; font: 900 11.5px var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--roxo); }
.selo-ia i { font-style: normal; background: linear-gradient(135deg, var(--roxo), var(--rosa)); color: #fff; border-radius: 6px; padding: 1px 5px; }
.rodape { position: fixed; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; padding: 14px 16px calc(var(--base) + 16px); background: var(--papel); border-top: 2px solid var(--linha); z-index: 25; }
.rodape.ok { background: #d7f7e6; border-color: #b4ecd0; color: #11734a; }
.rodape.erro { background: #ffe3e3; border-color: #ffc6c6; color: #b52b2b; }
.rodape p { margin: 0 0 8px; font: 800 18px var(--f-tit); }
.btn { border: 0; border-radius: 16px; min-height: 52px; padding: 0 16px; font: 800 18px var(--f-tit); width: 100%; background: var(--verde); color: #fff; box-shadow: 0 5px 0 #168a56; letter-spacing: .02em; }
.btn:disabled { background: var(--cinza); color: var(--suave); box-shadow: 0 5px 0 var(--cinza2); }
.btn.azul { background: var(--azul); box-shadow: 0 5px 0 var(--azul-esc); }
.btn.roxo { background: linear-gradient(135deg, var(--roxo), var(--rosa)); box-shadow: 0 5px 0 #4b2bb8; }
.btn.erro { background: var(--vermelho); box-shadow: 0 5px 0 #c42f2f; }
.btn.branco { background: var(--papel); color: var(--tinta); border: 2px solid var(--linha); box-shadow: 0 5px 0 var(--linha); }
.fim { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; padding-top: 20px; }
.fim .grande { font-size: 96px; line-height: 1; animation: pula 1.2s ease-in-out infinite; }
.fim h2 { font: 800 30px var(--f-tit); margin: 0; color: var(--ouro); }
.premios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.premio { border-radius: 16px; border: 2px solid; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; }
.premio small { font: 900 11px var(--f-ui); text-transform: uppercase; color: #fff; width: calc(100% + 8px); margin: -8px -4px 6px; padding: 3px; border-radius: 13px 13px 0 0; }
.premio b { font: 800 22px var(--f-tit); }
.confete { position: fixed; top: -10px; font-size: 20px; animation: cai 2.4s linear forwards; pointer-events: none; z-index: 30; }
@keyframes cai { to { transform: translateY(110vh) rotate(540deg); } }
.guia { background: var(--ceu); border-radius: 18px; padding: 12px 14px; font-weight: 600; }

/* leia */
.titulo { font: 800 28px/1.1 var(--f-tit); margin: 8px 0 0; }
.prateleira { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
.livro-capa { flex: none; width: 118px; display: flex; flex-direction: column; gap: 6px; border: 0; background: none; text-align: left; padding: 0; }
.livro-capa .c { height: 164px; border-radius: 14px; padding: 10px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 5px 0 rgba(0,0,0,.15); font: 800 15px/1.1 var(--f-tit); }
.livro-capa .c .em { font-size: 46px; align-self: center; }
.livro-capa .c .nv { align-self: flex-start; background: rgba(255,255,255,.28); border-radius: 8px; padding: 1px 6px; font: 900 11px var(--f-ui); }
.livro-capa span { font: 700 12.5px var(--f-ui); color: var(--suave); }
.secao { display: flex; justify-content: space-between; align-items: baseline; }
.secao b { font: 800 19px var(--f-tit); }
.secao span { color: var(--azul); font-weight: 800; font-size: 14px; }
.leitor { background: var(--papel); border: 2px solid var(--linha); border-radius: 20px; padding: 16px; font-size: 19px; line-height: 1.75; }
.leitor h3 { margin: 0; font: 800 22px var(--f-tit); }
.leitor .meta-l { font-size: 13px; color: var(--suave); font-weight: 700; margin-bottom: 8px; display: block; }
.leitor p { margin: 0 0 12px; }
.w { border-radius: 6px; padding: 0 1px; cursor: pointer; }
.w.lendo { background: #fff1c9; color: #2c2540; }
.w.salva { background: #e5dbff; border-bottom: 3px solid var(--roxo); color: #2c2540; }
.player { display: flex; gap: 10px; align-items: center; background: linear-gradient(135deg, var(--roxo), var(--azul)); border-radius: 18px; padding: 10px 12px; color: #fff; }
.player button { border: 0; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--roxo); font-size: 18px; flex: none; }
.player .tx { flex: 1; font-weight: 800; font-size: 14px; }
.player .tx small { display: block; font-weight: 700; opacity: .85; }
.player select { border: 0; border-radius: 10px; padding: 4px 6px; background: rgba(255,255,255,.25); color: #fff; font-weight: 800; font-size: 14px; }

/* jogue */
.jogos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jogo { border: 0; border-radius: 20px; padding: 14px; color: #fff; text-align: left; min-height: 130px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 5px 0 rgba(0,0,0,.18); }
.jogo .em { font-size: 40px; line-height: 1; }
.jogo b { font: 800 17px/1.1 var(--f-tit); }
.jogo small { font-weight: 700; opacity: .9; font-size: 12px; }
.jogo:disabled { opacity: .5; }
.pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.par { border: 2px solid var(--linha); border-bottom-width: 5px; background: var(--papel); border-radius: 16px; min-height: 58px; font: 800 16px var(--f-ui); padding: 4px; }
.par.sel { border-color: var(--azul); background: var(--acento-claro); color: var(--azul); }
.par.feito { opacity: .25; pointer-events: none; }
.par.mal { border-color: var(--vermelho); background: #ffe7e7; }
.relogio { display: flex; justify-content: space-between; font: 800 18px var(--f-tit); }
.tempo { height: 10px; border-radius: 5px; background: var(--linha); overflow: hidden; }
.tempo i { display: block; height: 100%; background: linear-gradient(90deg, var(--laranja), var(--ouro)); transition: width 1s linear; }
.flash { perspective: 900px; height: 240px; }
.flash-in { position: relative; width: 100%; height: 100%; transition: transform .5s; transform-style: preserve-3d; cursor: pointer; }
.flash.virado .flash-in { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 22px; background: var(--papel); border: 2px solid var(--linha); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; text-align: center; }
.face b { font: 800 30px var(--f-tit); }
.face span { color: var(--suave); font-size: 15px; font-weight: 700; }
.face.verso { transform: rotateY(180deg); background: #f1ebff; color: #2c2540; }
.srs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.srs button { border: 0; border-radius: 14px; padding: 10px 6px; font-weight: 800; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.srs small { font-weight: 600; font-size: 11.5px; opacity: .8; }
.srs .e { background: #ffe7e7; color: #c42f2f; }
.srs .d { background: #fff1c9; color: #a06b00; }
.srs .f { background: #e3f9ee; color: #11734a; }

/* tutor */
.tutor-cab { display: flex; gap: 12px; align-items: center; background: linear-gradient(135deg, #7c4dff, #ff4d8d); color: #fff; border-radius: 22px; padding: 14px; margin-top: 6px; }
.tutor-cab .rosto { font-size: 54px; line-height: 1; }
.tutor-cab b { font: 800 21px var(--f-tit); display: block; }
.tutor-cab span { font-size: 13.5px; font-weight: 700; opacity: .92; }
.carro-btn { border: 0; border-radius: 20px; padding: 14px; color: #fff; background: linear-gradient(135deg, #1b1830, #3a2f7a); display: flex; gap: 12px; align-items: center; text-align: left; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.carro-btn .em { font-size: 38px; }
.carro-btn b { font: 800 18px var(--f-tit); display: block; }
.carro-btn span { font-size: 13px; font-weight: 700; opacity: .85; }
.cenas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cena { border: 2px solid var(--linha); border-bottom-width: 5px; background: var(--papel); border-radius: 16px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 800 13px var(--f-ui); }
.cena .em { font-size: 30px; }
.cena.ativo { border-color: var(--roxo); background: #f1ebff; color: var(--roxo); }
.chat { display: flex; flex-direction: column; gap: 8px; }
.bolha { max-width: 85%; padding: 10px 13px; border-radius: 20px; font: 700 15.5px var(--f-ui); }
.bolha.ia { background: #f1ebff; color: #2c2540; border-bottom-left-radius: 6px; align-self: flex-start; }
.bolha.eu { background: var(--azul); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; }
.bolha .trad { display: block; font-size: 12.5px; opacity: .75; margin-top: 3px; font-weight: 600; }
.bolha .tocar { border: 0; background: rgba(124,77,255,.15); border-radius: 10px; padding: 2px 8px; margin-top: 4px; font-size: 13px; font-weight: 800; color: var(--roxo); }
.dica { align-self: flex-end; max-width: 85%; font-size: 13px; font-weight: 700; background: #fff4cc; color: #6b4b00; border-radius: 14px; padding: 8px 11px; }
.escrevendo { align-self: flex-start; color: var(--suave); font-weight: 800; }
.enviar { display: flex; gap: 8px; align-items: flex-end; }
.enviar textarea { flex: 1; min-height: 48px; max-height: 120px; border-radius: 16px; border: 2px solid var(--linha); background: var(--papel); padding: 11px 12px; resize: none; }
.enviar button { width: 52px; height: 52px; border-radius: 16px; border: 0; background: var(--azul); color: #fff; font-size: 22px; flex: none; box-shadow: 0 4px 0 var(--azul-esc); }
.enviar button.mic-p { background: linear-gradient(135deg, var(--roxo), var(--rosa)); box-shadow: 0 4px 0 #4b2bb8; }
.enviar button.mic-p.gravando { background: var(--vermelho); animation: pula .8s infinite; }

/* maos livres */
.maos { position: fixed; inset: 0; z-index: 1100; background: #0b0b14; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: calc(var(--topo) + 20px) 24px calc(var(--base) + 24px); text-align: center; }
.maos .onda-voz { display: flex; gap: 7px; align-items: center; height: 90px; }
.maos .onda-voz i { width: 12px; border-radius: 6px; background: linear-gradient(180deg, #7c4dff, #ff4d8d); height: 16px; }
.maos.falando .onda-voz i, .maos.ouvindo .onda-voz i { animation: onda 1s ease-in-out infinite; }
.maos .onda-voz i:nth-child(2) { animation-delay: .1s; } .maos .onda-voz i:nth-child(3) { animation-delay: .2s; } .maos .onda-voz i:nth-child(4) { animation-delay: .3s; } .maos .onda-voz i:nth-child(5) { animation-delay: .4s; }
@keyframes onda { 0%, 100% { height: 16px; } 50% { height: 84px; } }
.maos .estado { font: 800 26px var(--f-tit); color: #cfc9ff; }
.maos .frase { font: 700 22px/1.3 var(--f-ui); max-width: 30ch; min-height: 60px; }
.maos .pt { font-size: 15px; color: #9a95b8; font-weight: 700; min-height: 20px; }
.maos .controles { display: flex; gap: 12px; width: 100%; max-width: 360px; }
.maos .controles button { flex: 1; min-height: 64px; border-radius: 18px; border: 0; font: 800 20px var(--f-tit); }
.maos .pausa { background: #fff; color: #1b1830; }
.maos .sair { background: #2a2738; color: #fff; }
.maos .placar { font-weight: 800; color: #8fe3b0; }

/* perfil */
.perfil-cab { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 10px; }
.perfil-cab .av { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, var(--ouro), var(--laranja)); display: grid; place-items: center; font-size: 46px; box-shadow: 0 6px 0 rgba(0,0,0,.15); }
.perfil-cab b { font: 800 24px var(--f-tit); }
.perfil-cab span { color: var(--suave); font-weight: 700; font-size: 14px; }
.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.numero { border: 2px solid var(--linha); border-radius: 18px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; }
.numero .em { font-size: 28px; }
.numero b { font: 800 20px var(--f-tit); display: block; line-height: 1; }
.numero span { font-size: 12.5px; color: var(--suave); font-weight: 700; }
.cartao { border: 2px solid var(--linha); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cartao b { font: 800 17px var(--f-tit); }
.cartao p { margin: 0; color: var(--suave); font-weight: 600; font-size: 14px; }
.cartao code { background: var(--ceu); border-radius: 8px; padding: 2px 6px; font-size: 13px; word-break: break-all; }

.veu { position: fixed; inset: 0; background: rgba(20,10,40,.45); z-index: 1070; display: flex; align-items: flex-end; justify-content: center; }
.folha { background: var(--papel); width: 100%; max-width: 560px; border-radius: 28px 28px 0 0; padding: 10px 18px calc(var(--base) + 24px); display: flex; flex-direction: column; gap: 12px; max-height: 88%; overflow-y: auto; }
.puxador { width: 44px; height: 5px; background: var(--linha); border-radius: 3px; align-self: center; }
.folha h3 { margin: 0; font: 800 22px var(--f-tit); }
#toast { position: fixed; left: 50%; bottom: calc(var(--base) + 140px); transform: translateX(-50%); background: var(--tinta); color: var(--papel); padding: 10px 14px; border-radius: 14px; font-weight: 700; font-size: 14px; z-index: 1200; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
#toast.ver { opacity: 1; }
.carregando { text-align: center; padding: 60px 0; font-size: 40px; animation: pula 1s infinite; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Secao 588: pranchas na aba Leia (Livros | Pranchas), toque e ouca. */
.seg-leia { display: flex; gap: 4px; background: var(--acento-claro); border-radius: 14px; padding: 4px; }
.seg-leia button { flex: 1; border: 0; background: none; border-radius: 10px; padding: 9px 6px; font: 800 15px var(--f-ui); color: var(--suave); }
.seg-leia button[aria-selected="true"] { background: var(--papel); color: var(--tinta); box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.sub-pr { margin: 6px 0 0; font: 800 20px var(--f-tit); }
.dica-pr { margin: -10px 0 0; color: var(--suave); font-weight: 700; font-size: 14px; }
.grade-pr { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.pr-capa { border: 2px solid var(--linha); background: var(--papel); border-radius: 16px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; box-shadow: 0 3px 0 var(--linha); }
.pr-capa .ic { width: 64px; height: 64px; display: grid; place-items: center; }
.pr-capa .ic img { width: 64px; height: 64px; }
.pr-capa .ic .em { font-size: 40px; }
.pr-capa b { font: 800 14px/1.15 var(--f-ui); }
.pr-capa small { color: var(--suave); font-weight: 700; font-size: 12px; }
.acoes-pr { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--suave); font-weight: 800; }
.acoes-pr button { border: 2px solid var(--linha); background: var(--papel); border-radius: 12px; padding: 6px 10px; font: 800 13px var(--f-ui); }
.grade-fig { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.fig { border: 2px solid var(--linha); background: #fff; color: #26233a; border-radius: 18px; padding: 8px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; transition: transform .12s; }
.fig img { width: 92px; height: 92px; }
.fig b { font: 900 15px/1.15 var(--f-ui); }
.fig small { color: #7a768f; font-weight: 700; font-size: 12px; }
.fig small.uk { color: #b22234; }
.fig.g-m b { color: #2f6fde; }
.fig.g-f b { color: #e0337a; }
.fig.tocou, .lin-pr.tocou { transform: scale(.96); border-color: var(--azul); }
.bloco-pr { border: 2px solid var(--linha); border-radius: 18px; overflow: hidden; }
.cab-pr { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; color: #fff; font: 800 20px var(--f-tit); }
.cab-pr span { font: 900 17px var(--f-ui); }
.bloco-pr.c0 .cab-pr { background: #7c4dff; } .bloco-pr.c1 .cab-pr { background: #18a86b; } .bloco-pr.c2 .cab-pr { background: #2f6fde; }
.bloco-pr.c3 .cab-pr { background: #e0661a; } .bloco-pr.c4 .cab-pr { background: #e0337a; } .bloco-pr.c5 .cab-pr { background: #0e8f9a; }
.bloco-pr.c0 em { color: #7c4dff; } .bloco-pr.c1 em { color: #18a86b; } .bloco-pr.c2 em { color: #2f6fde; }
.bloco-pr.c3 em { color: #e0661a; } .bloco-pr.c4 em { color: #e0337a; } .bloco-pr.c5 em { color: #0e8f9a; }
.lin-pr { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 0; border-top: 1px solid var(--linha); background: none; padding: 9px 14px; text-align: left; transition: transform .12s; }
.lista-tx { border: 2px solid var(--linha); border-radius: 18px; overflow: hidden; }
.lista-tx .lin-pr:first-child { border-top: 0; }
.lin-pr > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.lin-pr b { font: 900 17px var(--f-ui); }
.lin-pr em { font-style: normal; }
.lin-pr small { color: var(--suave); font-weight: 700; font-size: 12.5px; }
.lin-pr .som { flex: none; font: 900 15px var(--f-ui); color: var(--azul-esc); text-align: right; }
.png-pr { width: 100%; height: auto; border-radius: 12px; }