:root{
 --fundo:#080d11; --sup:#0f1a21; --sup2:#132029; --linha:#1e2f3a; --linha2:#2a3f4d;
 --txt:#eaf0f4; --sv:#8d9daa; --verde:#2ee6a6; --verdeF:rgba(46,230,166,.13);
 --ambar:#f5a623; --ambarF:rgba(245,166,35,.14); --vm:#e0685c; --vmF:rgba(224,104,92,.13);
 --r:16px; --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
/* BARRA_FINA: no telemovel a altura em percentagem conta com a barra do browser e
   sobra sempre um bocado que nao se ve, o que fazia a barra de scroll aparecer sem
   ser precisa. O dvh e a altura que o ecra tem mesmo, neste momento. Fica dentro de
   um @supports para os browsers antigos ficarem como estavam. [Claude, 20-09-2026] */
@supports (height:100dvh){html,body{height:100dvh}}
body{margin:0;background:var(--fundo);color:var(--txt);font-family:var(--f);
 -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow:hidden;
 -webkit-tap-highlight-color:transparent}
button{font-family:inherit;color:inherit}
.lado{padding-inline:20px}
/* ---------- topo ---------- */
.topo{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding-block:12px;border-bottom:1px solid var(--linha)}
.marca{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--verde)}
.passo{font-size:.74rem;font-weight:700;color:var(--sv);font-variant-numeric:tabular-nums}
.esp{flex:1}
.seq{display:none;align-items:center;gap:5px;padding:3px 9px;border-radius:100px;
 background:var(--ambarF);color:var(--ambar);font-size:.72rem;font-weight:800;font-variant-numeric:tabular-nums}
.seq.on{display:inline-flex}
.seq.big{animation:pulsa .45s ease}
/* MENOS_NUMEROS: o contador de pontos da barra de cima esta escondido, com hidden no
   proprio HTML: a meio da ronda nao interessa saber quantos pontos se leva, e a barra
   de cima ja tem nivel, energia e dias seguidos. O elemento continua no DOM porque o
   contarAte escreve nele, e estas regras ficam aqui caso um dia volte a aparecer.
   Para o fazer voltar basta tirar o hidden. [Claude, 20-09-2026] */
.placar{display:flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums}
.placar b{font-size:1.1rem;font-weight:800}
.placar span{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sv)}
.barra{flex:0 0 3px;background:var(--linha)}
.barra i{display:block;height:100%;width:0;background:var(--verde);transition:width .4s cubic-bezier(.4,0,.2,1)}
.nivel{display:none;align-items:center;gap:7px}
.nivel.on{display:inline-flex}
.nivel b{font-size:.7rem;font-weight:800;color:var(--verde);white-space:nowrap;font-variant-numeric:tabular-nums}
.nivel i{display:block;width:54px;height:5px;border-radius:3px;background:var(--linha);overflow:hidden}
.nivel u{display:block;height:100%;background:var(--verde);width:0;transition:width .6s cubic-bezier(.4,0,.2,1)}
.energia{display:none;align-items:center;gap:6px}
.energia.on{display:inline-flex}
.energia b{font-size:.7rem;font-weight:800;color:var(--ambar);white-space:nowrap;
 font-variant-numeric:tabular-nums}
.energia b::before{content:"\26A1";margin-right:3px;font-weight:400}
.energia i{display:block;width:40px;height:5px;border-radius:3px;background:var(--linha);overflow:hidden}
.energia u{display:block;height:100%;background:var(--ambar);width:0;
 transition:width .5s cubic-bezier(.4,0,.2,1)}
/* ENERGIA_NA_LOJA: o fundo laranja so vai para a barra. No numero tapava o proprio
   numero, e no telemovel, onde a barra esta escondida, via-se um quadrado laranja. */
.energia.pouca b{color:#ff9a3c} .energia.pouca u{background:#ff9a3c}
.energia.zero b{color:var(--sv)} .energia.zero u{background:var(--sv)}
/* LCR_NA_BARRA: o saldo de LCR ao lado da energia, com o mesmo peso visual dela. So
   aparece a quem tem conta de membro: o servidor manda saldo null a quem joga anonimo,
   e null quer dizer "nao e membro", nao quer dizer zero. Por isso, com null, nao se
   mostra nada: nem um zero nem um traco. A moeda e desenhada em CSS, nao ha imagem
   nenhuma para carregar. Quando o saldo sobe entre duas leituras o numero conta para
   cima e a moeda da um brilho, sem janelas nem avisos. [Claude, 20-09-2026] */
.lcr{position:relative;display:none;align-items:center;gap:5px}
.lcr.on{display:inline-flex}
/* LOGO_DO_LCR: a moeda deixou de ser um disco amarelo desenhado em CSS e passa a ser
   o proprio logotipo do LCR, a mesma imagem que a aldeia ja usa no mapa (e que por
   isso ja esta no cache do browser, sem pedido novo). O numero passou a branco, que
   e o que o Gustavo quer ver: logo, numero, LCR. [Claude, 20-09-2026] */
.lcr .moeda{flex:0 0 auto;width:17px;height:17px;object-fit:contain;display:block}
.lcr b{font-size:.72rem;font-weight:800;color:var(--txt);white-space:nowrap;
 font-variant-numeric:tabular-nums}
.lcr .un{font-size:.62rem;font-weight:700;letter-spacing:.1em;color:var(--sv)}
/* SOMA_DA_CARTEIRA: o brilho do contador tinha a classe "subiu", que ja existe no
   ecra do fim com moldura, espacamento e fundo proprios. Quando o saldo subia, o
   contador da barra apanhava tambem esse feitio e alargava a barra de cima ate
   transbordar nos ecras estreitos. A classe passa a ser so dele. [Claude, 20-09-2026] */
.lcr.lcrSubiu .moeda{animation:lcrBrilho .9s ease}
@keyframes lcrBrilho{
 0%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),0 0 0 0 rgba(255,215,106,.6)}
 60%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),0 0 0 8px rgba(255,215,106,0)}
 100%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),0 0 0 0 rgba(255,215,106,0)}}
.lcr .nota{position:absolute;top:calc(100% + 8px);right:0;z-index:60;white-space:nowrap;
 padding:6px 11px;border-radius:9px;font-size:.74rem;font-weight:700;color:var(--txt);
 background:var(--sup2);border:1px solid var(--linha2);box-shadow:0 10px 26px rgba(0,0,0,.5)}
@media (max-width:430px){.lcr .un{display:none}}
@media (max-width:360px){.lcr .nota{right:auto;left:50%;transform:translateX(-50%)}}
/* GANHA_LCR: a frase e comprida e tem um link; a ponte cobre o espaco entre o contador e a etiqueta */
.lcr .nota.longa{white-space:normal;width:min(300px,82vw);line-height:1.45}
.lcr .nota::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.lcr .nota .lcrDep{border:0;background:none;padding:0;margin:0;color:#ffd76a;font:inherit;font-weight:800;text-decoration:underline;cursor:pointer}
/* LOJA_E_QUADRO_MES: tres pecas novas em volta do LCR.
   1) lcrAviso: a linha que aparece no lugar do contador quando a conta nao e de
      membro. E discreta de proposito e nao e janela nenhuma; o resto da explicacao
      fica na etiqueta que aparece ao passar o rato ou ao tocar.
   2) btLoja: o botao que abre a loja, so aparece quando ha contador.
   3) velho: com o saldo visto ha mais de uma hora o numero fica esbatido, sem dizer
      nada. [Claude, 20-09-2026] */
/* SALDO_SEM_ESBATIDO: o saldo lido ha mais de uma hora ficava esbatido, e o Gustavo
   nao quer. Havia pior: a opacidade estava no .lcr inteiro, e uma opacidade abaixo
   de 1 cria um contexto de empilhamento novo. A etiqueta (.nota) e filha do .lcr e
   ficava presa la dentro, esbatida tambem e com o z-index:60 a nao valer contra o
   resto da pagina: o jogo pintava-se por cima de mais de metade dela. Numa pagina
   acabada de abrir nao se via; numa pagina aberta o dia todo via-se sempre.
   Saiu a regra. A classe "velho" continua a ser posta pelo pintarLcr, sem efeito
   nenhum, para ficar um gancho se um dia se quiser outro sinal. [Claude, 25-09-2026] */
.lcrAviso{position:relative;display:none;align-items:center;cursor:default}
.lcrAviso.on{display:inline-flex}
.lcrAviso .tx{font-size:.62rem;font-weight:700;letter-spacing:.04em;color:var(--sv);white-space:nowrap}
.lcrAviso .nota{position:absolute;top:calc(100% + 8px);right:0;z-index:60;max-width:70vw;
 padding:6px 11px;border-radius:9px;font-size:.74rem;font-weight:700;color:var(--txt);
 background:var(--sup2);border:1px solid var(--linha2);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.btLoja{padding:4px 11px;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}
/* DEPOSITO_A_VISTA: o botao de depositar, no canto de cima da LOJA e do Balcao. E de
   contorno e nao cheio, para nao competir com os botoes de comprar da lista. */
.deporLinha{display:flex;align-items:center;justify-content:space-between;gap:10px;
 flex-wrap:wrap;margin:0 0 14px}
.cxQuadro .deporLinha .sub{margin:0}
/* SALDO_SO_DO_JOGO: o botao ganhou peso. E a ponte entre a carteira e o saldo que se
   gasta, e agora que os dois aparecem separados tem de se ver que e por ali. */
.deporBt{flex:0 0 auto;border:1px solid var(--verde);background:var(--verde);color:#04231a;
 border-radius:100px;padding:5px 12px;font-size:.72rem;font-weight:700;cursor:pointer;
 white-space:nowrap;font-family:inherit;transition:background .15s}
.deporBt{padding:7px 14px;font-size:.8rem;font-weight:800;box-shadow:0 0 0 3px rgba(46,230,166,.14)}
.deporBt:hover{background:#5ff0bd;border-color:#5ff0bd}
.painel.fixo{position:fixed}
.lojaLista{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.lojaArt{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;
 background:var(--sup);border:1px solid var(--linha)}
.lojaArt .nm3{flex:1;min-width:0;font-size:.92rem;font-weight:700;overflow-wrap:anywhere}
.lojaArt .pr{font-size:.8rem;font-weight:800;color:#ffd76a;white-space:nowrap;
 font-variant-numeric:tabular-nums}
.lojaArt button{border:0;border-radius:100px;background:var(--verde);color:#04231a;
 padding:7px 15px;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;white-space:nowrap}
.lojaArt button[disabled]{background:var(--sup2);color:var(--sv);cursor:default}
#lojaRecado{margin:0 0 12px;color:var(--ambar)}
.abas{display:flex;gap:6px;margin:0 0 12px}
.abas .aba{border:1px solid var(--linha2);background:transparent;color:var(--sv);
 border-radius:100px;padding:5px 14px;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}
.abas .aba[aria-pressed="true"]{background:var(--verdeF);border-color:var(--verde);color:var(--verde)}
.euLugar{margin:0 0 14px;color:var(--verde);font-weight:700}
/* A barra de cima e estreita e o LCR mais a loja nao cabiam la em telemovel. Em vez de
   andar a cacar pixeis largura a largura, tira-se o que ali ha de mais dispensavel: as
   barrinhas finas do nivel e da energia. Os numeros, que sao o que interessa, ficam.
   Isto ja se fazia abaixo de 340 px; passa a fazer-se abaixo de 480. [Claude, 20-09-2026] */
@media (max-width:480px){
 .topo{gap:6px}
 .lcr{gap:4px}
 .btLoja{padding:4px 7px;letter-spacing:.02em}
 .lcrAviso .tx{font-size:.58rem}
 .topo .nivel i,.topo .energia i{display:none}
}
/* MENOS_NUMEROS: a chama com os dias seguidos esta escondida, com hidden no proprio
   HTML, pela mesma razao do contador de pontos: a barra de cima tem de dizer pouco.
   O numero continua a chegar do servidor em dias_seguidos e continua a aparecer no
   cartao de subir de nivel. Para a fazer voltar a barra basta tirar o hidden.
   [Claude, 20-09-2026] */
.fogo{display:none;align-items:center;gap:4px;font-size:.72rem;font-weight:800;color:var(--ambar)}
.fogo.on{display:inline-flex}
/* ---------- ecras ---------- */
main{flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column;min-height:0}
/* ARRANQUE_RAPIDO: enquanto o jogo fala com o servidor a caixa ficava vazia, sem nada
   que dissesse que estava a acontecer alguma coisa. Isto aparece na primeira imagem,
   antes de qualquer pedido, e o mostrar() faz-lhe desaparecer. [Claude, 20-09-2026] */
.carregar{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
 justify-content:center;gap:12px;color:var(--sv);font-size:.9rem}
.carregar[hidden]{display:none}
.carregar .pt{width:34px;height:34px;border-radius:50%;border:2px solid var(--linha2);
 border-top-color:var(--verde);animation:roda .8s linear infinite}
@keyframes roda{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.carregar .pt{animation-duration:2.4s}}
.ecra{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:16px;
 padding-block:22px;max-width:660px;width:100%;margin-inline:auto;overflow-y:auto}
.ecra[hidden]{display:none}
h1{font-size:clamp(1.6rem,5.5vw,2.2rem);font-weight:800;letter-spacing:-.03em;margin:0;line-height:1.08;text-wrap:balance}
.sub{margin:0;color:var(--sv);font-size:.95rem;line-height:1.5;max-width:42ch}
.rot{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sv);margin:2px 0 0}
/* ---------- aldeia ---------- */
#eAldeia{padding:0;max-width:none;justify-content:stretch;gap:0;position:relative;overflow:hidden}
#mapa{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}
.hud{position:absolute;left:0;right:0;bottom:0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));
 display:flex;flex-direction:column;gap:8px;pointer-events:none;
 background:linear-gradient(180deg,rgba(8,13,17,0),rgba(8,13,17,.9) 62%)}
.hud>*{pointer-events:auto}
.dica2{margin:0;font-size:.78rem;color:var(--sv);text-align:center;line-height:1.4}
.accao{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.bt3{border:0;border-radius:100px;background:var(--verde);color:#04231a;padding:12px 22px;
 font-size:.92rem;font-weight:800;cursor:pointer;box-shadow:0 6px 22px rgba(46,230,166,.22);
 animation:sobe .3s cubic-bezier(.34,1.56,.64,1);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt3.cinza{background:var(--sup2);color:var(--txt);border:1px solid var(--linha2);box-shadow:none}
.pers.presa{opacity:.4;cursor:not-allowed}
.mini.destaque{border-color:var(--verde);color:var(--verde);
 box-shadow:0 0 0 0 rgba(46,230,166,.5);animation:bate 2.6s ease-out infinite}
@keyframes bate{0%{box-shadow:0 0 0 0 rgba(46,230,166,.45)}
 70%{box-shadow:0 0 0 7px rgba(46,230,166,0)}100%{box-shadow:0 0 0 0 rgba(46,230,166,0)}}
/* SEM_EXPLICACAO: aqui vivia a caixa verde com o porque da resposta e o botao
   Continuar. Saiu toda. [Claude, 20-09-2026] */
.painel{position:absolute;inset:0;z-index:40;display:flex;align-items:center;
 justify-content:center;padding:18px;background:rgba(6,11,14,.82);
 backdrop-filter:blur(3px)}
.painel[hidden]{display:none}
.cxQuadro{width:min(420px,100%);max-height:82%;overflow:auto;border-radius:16px;
 padding:20px;background:var(--sup2);border:1px solid var(--linha2);
 box-shadow:0 18px 48px rgba(0,0,0,.5);position:relative}
/* X_NAS_JANELAS: cada janela fecha-se pelo seu canto, para ninguem ter de procurar o
   botao la em baixo nem carregar no X do jogo sem querer. [Claude, 20-09-2026] */
.xCanto{position:absolute;top:12px;right:12px;width:30px;height:30px;padding:0;
 border-radius:50%;border:1px solid var(--linha2);background:transparent;color:var(--sv);
 font-size:19px;line-height:1;cursor:pointer;font-family:inherit;display:flex;
 align-items:center;justify-content:center}
.xCanto:hover{color:var(--txt);border-color:var(--sv)}
.cxQuadro h2{padding-right:34px}
.cxQuadro h2{margin:0 0 4px;font-size:1.15rem}
.cxQuadro .sub{margin:0 0 14px;font-size:.82rem;color:var(--sv)}
ol.quadro{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:2px}
ol.quadro li{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:9px;
 font-size:.92rem}
ol.quadro li.eu{background:rgba(46,230,166,.12);font-weight:700}
ol.quadro .pos{min-width:1.6em;color:var(--sv);font-variant-numeric:tabular-nums}
ol.quadro .nm2{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ol.quadro li:not(:has(.pos)) .nm2{white-space:normal;overflow:visible;line-height:1.45}
ol.quadro .xp{font-variant-numeric:tabular-nums;color:var(--verde);font-weight:700}
/* BOTOES_POR_CIMA: os nomes das casas feitos em HTML (NFTs antigos, Torneio, o nome do
   jogador) tem z-index 3 e passavam por cima dos botoes. Os botoes ficam a 5, os avisos
   a 6 e os paineis continuam a 40. [Claude Cajo do jogo, 29-09-2026] */
.cantoTD{position:absolute;top:10px;right:12px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:60%;z-index:5}
.mini{border:1px solid var(--linha);background:rgba(15,26,33,.82);color:var(--sv);border-radius:100px;
 padding:5px 11px;font-size:.7rem;font-weight:700;cursor:pointer;white-space:nowrap}
.mini[aria-pressed="true"]{border-color:var(--verde);color:var(--verde)}
/* SELECTOR_LINGUA: o par PT/EN fica ao lado do Quadro mas nao compete com ele. Sem
   fundo e sem borda, so as duas siglas: a que esta a valer clara, a outra apagada.
   Mostram-se as duas em vez de so a lingua de destino, porque um botao que diz "EN"
   tanto pode querer dizer "estas em ingles" como "carrega para ir para ingles", e das
   duas leituras so uma e a certa. Com as duas a vista nao ha o que interpretar.
   A borda so aparece com o rato, para o alvo se dar a conhecer sem estar sempre a
   pedir atencao. [Claude, 24-09-2026] */
.mini.lingua{display:inline-flex;align-items:center;gap:5px;background:transparent;
 border-color:transparent;padding:5px 9px;letter-spacing:.05em;
 transition:border-color .15s}
.mini.lingua span{color:var(--sv);opacity:.45;transition:opacity .15s,color .15s}
.mini.lingua i{font-style:normal;color:var(--sv);opacity:.28}
.mini.lingua:hover:not(:disabled){border-color:var(--linha)}
.mini.lingua:hover:not(:disabled) span{opacity:.75}
.mini.lingua[data-lingua="pt"] .lgPT,
.mini.lingua[data-lingua="en"] .lgEN{color:var(--txt);opacity:1}
.mini.lingua:disabled{opacity:.4;cursor:default}
.aviso{position:absolute;left:50%;top:14px;transform:translateX(-50%);max-width:min(92%,420px);
 border:1px solid var(--verde);background:rgba(15,26,33,.95);border-radius:14px;padding:12px 15px;
 display:flex;align-items:center;gap:10px;flex-wrap:wrap;animation:sobe .3s cubic-bezier(.34,1.56,.64,1);z-index:6}
.aviso .tx{flex:1 1 140px;min-width:0;font-size:.86rem;font-weight:700;line-height:1.35}
.aviso .tx small{display:block;font-weight:500;color:var(--sv);font-size:.76rem;margin-top:2px}
.aviso button{border:0;border-radius:100px;padding:8px 15px;font-size:.8rem;font-weight:800;cursor:pointer;
 background:var(--verde);color:#04231a;transition:border-color .15s,color .15s,filter .15s}
.aviso button.n{background:transparent;border:1px solid var(--linha2);color:var(--sv)}
/* BOTOES_COM_RATO: os botoes do cartao de premio nao respondiam ao rato. Cada um passa
   a responder como o seu tipo responde no resto do jogo, e nao todos da mesma maneira:
   o de contorno fica verde na borda e no texto, como o .bt2; o cheio aclara, como o
   .bt, porque uma borda verde por cima de fundo verde nao se veria. O "ver a entrega"
   e um link e ja tinha o seu verde no .vencTx, por isso nao se mexe.
   Um botao desligado nao responde a nada, como ja acontece no .op: depois de se juntar
   o LCR a carteira o botao fica "Adicionado" e desligado, e nao deve continuar a
   parecer que se pode carregar nele. [Claude, 24-09-2026] */
.aviso button:hover:not(:disabled){filter:brightness(1.08)}
.aviso button.n:hover:not(:disabled){border-color:var(--verde);color:var(--verde);filter:none}
.aviso button:disabled{opacity:.55;cursor:default}
/* SEM_CURSOR_DE_TEXTO: o cursor de texto a piscar aparecia nos nomes das casas e nos
   titulos (clique ou navegacao com cursor do browser). Fica so nos campos onde se escreve.
   [Claude Cajo do jogo, 29-09-2026] */
body{caret-color:transparent}
input,textarea,select,[contenteditable="true"]{caret-color:auto}
#tqRotulo,#nfRotulo,#nmMeu,.cantoTD,.topo,#mapa{-webkit-user-select:none;user-select:none}
/* ---------- personagens ---------- */
.elenco{display:flex;gap:10px;flex-wrap:wrap}
.pers{border:1px solid var(--linha);background:var(--sup);border-radius:var(--r);
 padding:9px 8px 7px;width:76px;cursor:pointer;transition:border-color .15s,transform .15s,background .15s}
.pers:hover{border-color:var(--linha2);transform:translateY(-2px)}
.pers[aria-pressed="true"]{border-color:var(--verde);background:var(--verdeF)}
.pers svg{width:44px;height:44px;display:block;margin:0 auto}
.pers .nm{display:block;text-align:center;font-size:.66rem;font-weight:700;margin-top:4px;color:var(--sv)}
.pers[aria-pressed="true"] .nm{color:var(--verde)}
/* ESCOLHA_SEM_SCROLL: o ecra de escolher o boneco crescia mais do que a janela e
   aparecia uma barra de scroll ao lado. Aperta-se o titulo, os cartoes e os espacos
   entre blocos; com os cartoes mais estreitos cabem todos numa linha e poupa-se uma
   fila inteira. [Claude, 19-09-2026] */
#eEscolha{gap:10px}
#eEscolha h1{font-size:clamp(1.3rem,3.4vw,1.7rem)}
#eEscolha .sub{font-size:.88rem;line-height:1.45}
#eEscolha .elenco{gap:8px}
#eEscolha .pers{width:68px;padding:7px 6px 5px}
#eEscolha .pers svg{width:38px;height:38px}
#eEscolha .pers .nm{font-size:.62rem;margin-top:3px}
/* NIVEL_FECHA_A_PORTA: o recado de porta fechada sobe do sitio onde se clicou, com
   a mesma animacao dos pontos mas em surdina. [Claude, 19-09-2026] */
.voa.cadeado{font-size:.92rem;font-weight:700;color:#cfe0ea;animation-duration:1.5s}
.palco{display:flex;align-items:center;gap:14px}
.palco .bicho{flex:0 0 auto;width:74px;height:74px}
.palco .bicho svg{width:100%;height:100%;display:block;animation:bob 2.6s ease-in-out infinite}
.bicho.salta svg{animation:salta .55s cubic-bezier(.34,1.56,.64,1)}
.bicho.treme svg{animation:treme .45s ease}
.balao{flex:1 1 auto;min-width:0;position:relative;background:var(--sup);border:1px solid var(--linha);
 border-radius:var(--r);padding:13px 15px}
.balao::before{content:"";position:absolute;left:-7px;top:26px;width:12px;height:12px;
 background:var(--sup);border-left:1px solid var(--linha);border-bottom:1px solid var(--linha);transform:rotate(45deg)}
.balao .fala{margin:0;font-size:.86rem;font-weight:700;line-height:1.4}
.balao .dica{margin:3px 0 0;font-size:.78rem;color:var(--sv);line-height:1.4}
/* ---------- temas ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--linha);background:var(--sup);border-radius:100px;padding:7px 13px;
 font-size:.82rem;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}
.chip .n{color:var(--sv);font-size:.72rem;margin-left:5px;font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--linha2)}
.chip[aria-pressed="true"]{border-color:var(--verde);background:var(--verdeF)}
.chip[aria-pressed="true"] .n{color:var(--verde)}
/* ---------- botoes ---------- */
.acoes{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.bt{border:0;border-radius:100px;background:var(--verde);color:#04231a;padding:14px 28px;
 font-size:.98rem;font-weight:800;cursor:pointer;transition:filter .15s,transform .1s}
.bt:hover{filter:brightness(1.08)}
.bt:active{transform:translateY(1px)}
.bt2{border:1px solid var(--linha2);background:transparent;border-radius:100px;padding:11px 20px;
 font-size:.86rem;font-weight:700;cursor:pointer;transition:border-color .15s,color .15s}
.bt2:hover{border-color:var(--verde);color:var(--verde)}
/* ---------- pergunta ---------- */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;
 border-radius:5px;background:rgba(255,255,255,.06);color:var(--sv)}
.tag.d2{background:var(--ambarF);color:var(--ambar)}
.tag.d3{background:var(--vmF);color:var(--vm)}
.perg{font-size:clamp(1.08rem,3.4vw,1.34rem);font-weight:700;line-height:1.38;margin:0;text-wrap:balance}
.relo{height:4px;border-radius:2px;background:var(--linha);overflow:hidden}
.relo i{display:block;height:100%;background:var(--ambar);width:100%;transition:background .3s}
.relo i.fim{background:var(--vm)}
.ops{display:flex;flex-direction:column;gap:8px}
.op{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;border:1px solid var(--linha);
 background:var(--sup);border-radius:13px;padding:13px 15px;font-size:.93rem;line-height:1.4;cursor:pointer;
 transition:border-color .15s,background .15s,transform .12s,opacity .2s;opacity:0;transform:translateY(6px)}
.op.entra{opacity:1;transform:none}
.op:hover:not(:disabled){border-color:var(--linha2);transform:translateX(3px)}
.op:disabled{cursor:default}
.op .k{flex:0 0 21px;height:21px;border-radius:6px;background:rgba(255,255,255,.07);display:grid;
 place-items:center;font-size:.7rem;font-weight:800;color:var(--sv);margin-top:1px}
.op .t{flex:1 1 auto;min-width:0}
.op.ok{border-color:var(--verde);background:var(--verdeF)}
.op.ok .k{background:var(--verde);color:#04231a}
.op.no{border-color:var(--vm);background:var(--vmF)}
.op.no .k{background:var(--vm);color:#2a0f0c}
.op.off{opacity:.38}
.voa{position:fixed;font-weight:900;font-size:1.5rem;color:var(--verde);pointer-events:none;
 animation:voa 1s ease-out forwards;z-index:50;font-variant-numeric:tabular-nums}
/* ---------- fim ---------- */
.tiles{display:flex;flex-wrap:wrap;gap:9px}
.tl{flex:1 1 104px;border:1px solid var(--linha);background:var(--sup);border-radius:13px;padding:14px 16px}
.tl b{display:block;font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.05}
.tl span{display:block;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sv);margin-top:4px}
.tl.d b{color:var(--verde)}
/* ECRA_FIM_SEM_SCROLL: o ecra de resultados crescia mais do que a janela e aparecia
   uma barra de scroll pelo meio dos numeros. Alem de lhe terem saido o desafio por
   link e o jogar outra vez, aqui aperta-se o que sobra: menos espaco entre blocos,
   caixas mais baixas, e os blocos que ficam vazios (o duelo, por exemplo) deixam de
   ocupar um espacamento a toa. [Claude, 19-09-2026] */
#eFim{gap:9px}
#eFim>div:empty,#eFim>p:empty{display:none}
#eFim .tl{padding:11px 14px}
#eFim .tl b{font-size:1.45rem}
#eFim .subiu{padding:8px 12px;gap:10px}
#eFim .rv{padding:10px 12px}
#eFim .duelo{padding:10px 13px}
#eFim .palco{gap:11px}
#eFim .rev{gap:6px}
/* BARRA_FINA: quando o ecra de fim nao cabe mesmo (oito perguntas falhadas, ou uma
   janela baixa), tem de aparecer uma barra, senao ninguem percebe que ha mais texto
   por baixo. O que nao pode e ser a barra cinzenta do sistema, com setas, encostada
   ao painel. Aqui fica fina, escura e discreta, igual em todos os ecras do jogo. O
   overflow-y ja era auto, por isso ela continua a so aparecer quando faz falta; o
   que mudou foi o aspeto, e uns pixeis a menos no ecra de fim para os casos que
   transbordavam por pouco deixarem de transbordar. Nada de zoom nem de scale: isso
   desfoca o texto e estraga os alvos de toque no telemovel. [Claude, 20-09-2026] */
/* BARRAS_DO_JOGO: a mesma barra em tudo o que desliza no jogo, uma pilula com a cor do
   jogo (verde; dourada nos paineis da Lua, que mudam --barraA e --barraB), sem setas e
   sem a calha cinzenta do sistema. No Chrome e no Safari desenha-se com
   ::-webkit-scrollbar; o scrollbar-color so entra onde isso nao existe (Firefox),
   porque no Chrome ele anulava o desenho. [Claude, 26-09-2026] */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:100px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--barraA,#7ff5cb),var(--barraB,#1fae7e));border-radius:100px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{border-width:1px}
*::-webkit-scrollbar-button{display:none;width:0;height:0}
*::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--barraB,#2ee6a6) transparent}}
/* MORTE_NO_ABISMO: o aviso depois de o Abismo apanhar alguem. Discreto, escuro, em
   baixo, por cima da linha das teclas, e some sozinho. [Claude, 26-09-2026] */
.avisoMorte{position:fixed;left:50%;bottom:74px;z-index:80;display:flex;align-items:center;gap:10px;
 max-width:min(440px,calc(100vw - 32px));padding:10px 16px 10px 12px;border-radius:12px;
 background:linear-gradient(180deg,rgba(14,9,14,.94),rgba(6,4,8,.96));border:1px solid rgba(150,30,50,.45);
 box-shadow:0 0 22px rgba(110,10,30,.35),inset 0 0 14px rgba(0,0,0,.7);color:#d8d0c2;font-size:13.5px;
 line-height:1.35;letter-spacing:.02em;font-style:italic;opacity:0;transform:translate(-50%,10px);
 transition:opacity .8s ease,transform .8s ease;pointer-events:none}
.avisoMorte.ve{opacity:.94;transform:translate(-50%,0)}
.avisoMorte .amCav{font-size:18px;font-style:normal;filter:grayscale(.3) drop-shadow(0 0 6px rgba(160,30,50,.6));animation:amTreme 2.4s ease-in-out infinite}
@keyframes amTreme{0%,100%{opacity:.85}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.avisoMorte .amCav{animation:none}}
#eFim{gap:8px;padding-block:14px}
#eFim .palco .bicho{width:62px;height:62px}
#eFim .rv{padding:9px 12px}
#eFim .acoes{margin-top:2px}
.duelo{border:1px solid var(--linha);background:var(--sup);border-radius:13px;padding:13px 15px;
 display:flex;align-items:center;gap:12px;font-size:.88rem;flex-wrap:wrap}
.duelo .vs{font-weight:800;color:var(--sv);font-size:.7rem;letter-spacing:.1em}
.duelo b{font-variant-numeric:tabular-nums}
.rev{display:flex;flex-direction:column;gap:7px}
.rv{border:1px solid var(--linha);border-left:3px solid var(--vm);background:var(--sup);
 border-radius:0 11px 11px 0;padding:10px 13px}
.rv.g{border-left-color:var(--verde)}
.rv .q{font-size:.84rem;font-weight:600;line-height:1.35}
.rv .a{font-size:.8rem;color:var(--sv);margin-top:3px}
.rv .a b{color:var(--verde)}
.cx{border:1px solid rgba(245,166,35,.3);background:rgba(245,166,35,.07);color:var(--ambar);
 border-radius:11px;padding:12px 15px;font-size:.86rem;line-height:1.5}
.campo{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.campo input{flex:1 1 160px;min-width:0;background:var(--sup);border:1px solid var(--linha2);color:var(--txt);
 border-radius:100px;padding:11px 17px;font-size:.9rem;font-family:inherit}
.campo input:focus{border-color:var(--verde);outline:none}
.subiu{display:flex;align-items:center;gap:12px;border:1px solid var(--verde);background:var(--verdeF);
 border-radius:13px;padding:14px 17px;animation:sobe .5s cubic-bezier(.34,1.56,.64,1)}
.subiu .big{font-size:1.5rem;font-weight:800;color:var(--verde);line-height:1;font-variant-numeric:tabular-nums}
.subiu .tx{font-size:.9rem;font-weight:700}
.subiu .tx small{display:block;font-weight:500;color:var(--sv);font-size:.8rem;margin-top:2px}
/* ---------- rodape ---------- */
.rod{flex:0 0 auto;padding-block:9px;border-top:1px solid var(--linha);display:flex;align-items:center;
 gap:9px;font-size:.7rem;color:var(--sv)}
.rod .mini{background:transparent}
.rod .dir{margin-left:auto;display:flex;gap:5px;align-items:center}
:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes salta{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-16px) scale(1.06)}100%{transform:translateY(0) scale(1)}}
@keyframes treme{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes voa{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-52px) scale(1.15)}}
@keyframes pulsa{0%,100%{transform:scale(1)}45%{transform:scale(1.22)}}
@keyframes sobe{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.op{opacity:1;transform:none}}
@media (max-width:560px){
 .lado{padding-inline:15px}
 .ecra{gap:13px;padding-block:16px}
 .palco .bicho{width:58px;height:58px}
 .op{padding:12px 13px;font-size:.89rem}
 .pers{width:68px}
 .pers svg{width:38px;height:38px}
 .nivel i{width:40px}
}
.conta{font-size:.72rem;letter-spacing:.02em;white-space:nowrap}
.conta.ok{color:#2ee6a6}
.conta.alerta{color:#f5a623}
.conta.puxa{animation:contaPulsa 2.4s ease-in-out infinite}
@keyframes contaPulsa{0%,100%{opacity:1}50%{opacity:.45}}
#nota.mau{color:#f5a623}
#contaMsg.mau{color:#f5a623}
.topo .conta{padding:3px 9px;font-size:.66rem}
/* ---- telemovel estreito: a barra de topo tem de caber [Claude 13-09-2026] ----
   Medido: abaixo de ~405px a barra transbordava e o chip da conta ("Guardar")
   ficava fora do ecra. A 320px ficava INTEIRAMENTE escondido, e e justamente o
   botao que guarda o progresso do jogador. Liberta-se espaco por ordem de quem
   faz menos falta: primeiro a marca (o jogo ja abre numa janela que diz Aldeia
   Lucrar), depois as barrinhas e a palavra PTS. */
@media (max-width:430px){
 .topo{gap:7px}
 .topo .marca{display:none}
 .lado{padding-inline:12px}
 body{overflow-x:hidden}
}
@media (max-width:360px){
 .topo{gap:5px}
 .nivel i{width:30px}
 .energia i{width:30px}
 .placar span{display:none}
}
#eConta .campo{max-width:320px;margin-left:auto;margin-right:auto}
/* ---- ecra da conta, v32: um passo de cada vez [Claude 2026-09-11] ---- */
#eConta{align-items:center;text-align:center}
.cx-conta{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:14px}
.cx-conta h1{font-size:clamp(1.45rem,5vw,1.9rem)}
.cx-conta .sub{max-width:34ch;margin:0}
.cx-conta .passo{width:100%;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.cx-conta .passo.feito{align-items:center}
#eConta .cx-conta .campo{max-width:none;margin:0;width:100%}
.cx-conta .campo input{width:100%;padding:14px 18px;font-size:1rem;text-align:center}
.cx-conta input.codigo{font-size:1.7rem;letter-spacing:.45em;font-weight:800;font-variant-numeric:tabular-nums;padding:12px 10px 12px 18px}
.cx-conta .bt.largo{width:100%;padding:14px 20px}
.cx-conta .ligs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:4px 0 0}
.cx-conta .lig{background:none;border:0;color:var(--sv);font:inherit;font-size:.86rem;cursor:pointer;padding:6px 2px;text-decoration:underline;text-underline-offset:3px}
/* SALTAR_PERGUNTA: no mesmo canto onde antes estava o x de sair esta agora o Saltar.
   Deixou de haver maneira de abandonar a ronda a meio; o que ha e passar a pergunta
   a frente, uma a uma, e assim a ronda acaba depressa. Fica longe das opcoes, para
   ninguem lhe tocar sem querer a responder. [Claude, 20-09-2026] */
.tags{align-items:center}
.saltarR{margin-left:auto;flex:0 0 auto;border:1px solid var(--linha2);background:var(--sup);
 color:var(--sv);font:inherit;font-size:.68rem;font-weight:800;letter-spacing:.08em;
 text-transform:uppercase;padding:6px 13px;border-radius:100px;cursor:pointer;
 display:inline-flex;align-items:center;gap:7px;line-height:1.2;white-space:nowrap}
.saltarR::after{content:"\00bb";font-size:1rem;font-weight:400;line-height:1}
.saltarR:hover{color:var(--txt);border-color:var(--sv)}
.saltarR:disabled{opacity:.35;cursor:default}
.cx-conta .lig:hover{color:var(--txt)}
.cx-conta .lig.vm{color:var(--vm)}
.cx-conta .chipEmail{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--verde);background:var(--verdeF);border-radius:100px;padding:10px 18px;font-weight:700;font-size:.95rem;max-width:100%;overflow-wrap:anywhere}
.cx-conta .chipEmail .ok{color:var(--verde);font-weight:800}
.cx-conta #contaMsg{margin:0}
.cx-conta .selo{width:54px;height:54px;border-radius:50%;border:2px solid var(--linha2);display:flex;align-items:center;justify-content:center;color:var(--verde);font-weight:800;font-size:1.3rem;margin-bottom:-2px}
.cx-conta .selo.on{border-color:var(--verde);background:var(--verdeF)}
/* fim da ronda: proximo objetivo e nome [Claude 2026-09-11] */
.subiu.prox{border-color:var(--linha2);background:var(--sup)}
.subiu.prox .big{color:var(--txt)}
.nomeFim{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border:1px solid var(--linha2);
  background:var(--sup);border-radius:13px;padding:12px 14px;margin-top:10px}
.nomeFim p{margin:0;font-size:.86rem;color:var(--sv);flex:1 1 190px}
.nomeFim input{flex:1 1 130px;min-width:0;background:var(--sup2);border:1px solid var(--linha2);
  color:var(--txt);border-radius:100px;padding:9px 15px;font-size:.86rem;font-family:inherit}
.nomeFim button{border:0;border-radius:100px;background:var(--verde);color:#04231a;
  padding:9px 18px;font-size:.84rem;font-weight:800;cursor:pointer;font-family:inherit}
#btDiario{padding:7px 14px;font-size:.74rem}
/* PREMIO_A_VISTA: o premio da epoca e quem ganhou da ultima vez, no cimo do quadro. */
.venc{border:1px solid var(--linha2);background:var(--sup);border-radius:13px;
  padding:10px 12px;margin:0 0 14px}
.venc p{margin:0}
.venc p + p{margin-top:7px}
.vencAgora{font-size:.84rem;font-weight:700;color:var(--verde)}
.vencAnt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.82rem}
.vencEtq{color:var(--sv)}
.vencNome{font-weight:700;color:var(--txt);overflow-wrap:anywhere}
.vencLcr{background:var(--verdeF);border:1px solid var(--verde);color:var(--verde);
  border-radius:100px;padding:2px 9px;font-size:.76rem;font-weight:800;white-space:nowrap}
.vencTx{color:var(--sv);font-size:.76rem;text-decoration:underline}
.vencTx:hover{color:var(--verde)}
.vencNota{font-size:.72rem;color:var(--sv)}