/* Politize: o jogo da conversa. Folha escrita à mão. Mobile-first: base 360 px em retrato.
   Legibilidade para quem tem 60+: corpo de 19 px no celular e 20 px no desktop, nada abaixo de 16 px,
   texto secundário com contraste de 7:1 ou mais, escala de letra em três níveis (--escala). */
*,*::before,*::after{box-sizing:border-box}
:root{
  --escala:1;--corpo:19px;
  --paper:#f7f5ee;--paper2:#efece2;--card:#fff;--ink:#151812;--ink2:#262b24;--muted:#3f4740;--line:#cfcbbd;--borda:#8a8676;
  --verde:#0b7a3b;--verde-esc:#095f2e;--verde-txt:#0a5a2c;--amarelo:#f2c230;--amarelo2:#ffcc29;--ouro-txt:#5c4300;
  --azul:#0d2238;--azul2:#1f5f9e;--azul-txt:#174a7d;--flavio:#1f5f9e;--lula:#c8412f;--lula-txt:#8e2a1a;
  --claro-escuro:#e6ebf0;
  --balao:#fff;--balao-borda:#151812;--balao-eu:#e3eef9;--legenda:#fff4c2;--legenda-borda:#5c4300;
  --conf-baixa:#c8412f;--conf-media:#d99a00;--conf-alta:#0b7a3b;
  --sel-boa:#0a5a2c;--sel-ruim:#8e2a1a;
  --cena-h:max(170px,22dvh);--cena-min:170px;--sobrepoe:22px;--av-s:320px;--av-x:150px;--medida:60ch;--leitura:1rem;
  --display:Fraunces,Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --raio:14px;--topo-h:56px;
}
html{font-size:calc(var(--corpo) * var(--escala));-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--azul-txt)}
a:hover{color:var(--azul)}
:focus-visible{outline:3px solid var(--azul2);outline-offset:3px;box-shadow:0 0 0 6px var(--amarelo2);border-radius:6px}
[tabindex="-1"]:focus{outline:none}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:99}
button{font:inherit;color:inherit}
[aria-disabled="true"]{cursor:default}

/* ---------- barra do topo ---------- */
.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:6px;
  min-height:56px;padding:4px max(10px,env(safe-area-inset-right)) 4px max(10px,env(safe-area-inset-left));
  padding-top:max(4px,env(safe-area-inset-top));background:var(--azul);color:#fff}
.topo :focus-visible{outline-color:#fff}
.topo-voltar{display:inline-flex;min-width:44px;align-items:center;gap:6px;min-height:48px;color:#fff;text-decoration:none;font-size:17px;font-weight:600;line-height:1.15}
.topo-voltar:hover{color:var(--amarelo2)}
.topo-acoes{display:flex;align-items:center;gap:4px}
.topo-btn{min-height:48px;min-width:46px;padding:6px 8px;white-space:nowrap;border:2px solid #8fa6bd;border-radius:10px;background:transparent;color:#fff;font-weight:700;font-size:17px;cursor:pointer}
.topo-btn:hover{border-color:var(--amarelo2)}
.topo-btn[aria-disabled="true"]{border-style:dashed;border-color:#6f86a0;color:#c8d3dd}
.topo-btn b{display:inline-block;min-width:1.6em;margin-left:4px;padding:0 6px;border-radius:999px;background:var(--amarelo);color:var(--ink);font-family:var(--mono);font-size:16px}
.escala{display:flex;gap:4px}
.escala-btn{padding:6px 4px;font-family:var(--sans);font-size:19px}
.escala-btn[aria-pressed="true"]{background:#1f3b5a}
@media (max-width:559px){.topo-voltar-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* ---------- moldura ---------- */
.jogo{display:block}
.coluna{min-width:0}
.tela{padding:20px 16px 32px}
.eyebrow{font-family:var(--mono);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ouro-txt);margin:0}
h1,h2{font-family:var(--display);letter-spacing:-.015em;line-height:1.08;overflow-wrap:break-word;hyphens:auto}
body{overflow-wrap:break-word}
p,li{max-width:var(--medida)}

/* ---------- menu ---------- */
.menu-capa{background:var(--azul);color:#fff;border-radius:var(--raio);padding:22px 18px;position:relative;overflow:hidden}
.menu-capa::after{content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;border:2px solid rgb(242 194 48 / 35%);transform:rotate(45deg) scaleX(.62);pointer-events:none}
.menu-capa .eyebrow{color:var(--amarelo2)}
.menu-capa h1{font-weight:900;font-size:clamp(2.1rem,9vw,3.3rem);margin:10px 0 0;color:#fff;max-width:14ch}
.menu-sub{color:var(--claro-escuro);font-size:1.1rem;margin:12px 0 0;max-width:46ch}
.menu-deck{color:var(--claro-escuro);font-size:1rem;margin:10px 0 0}
.menu-tutorial{margin:16px 0 0;padding:0;list-style:none;counter-reset:passo;display:grid;gap:10px}
.menu-tutorial li{counter-increment:passo;display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:start;font-size:1rem}
.menu-tutorial li::before{content:counter(passo);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--amarelo);color:var(--ink);font-family:var(--mono);font-weight:700}
.menu-capa .menu-tutorial li{color:var(--claro-escuro)}
.menu-recorde{margin:16px 0 0;font-family:var(--mono);font-size:.9rem;color:var(--amarelo2)}
.aviso-semente{margin:16px 0 0;border-left:5px solid var(--amarelo);background:#fff8dc;padding:12px 14px;border-radius:0 10px 10px 0;font-size:1rem}
.menu-h2{font-size:clamp(1.5rem,6vw,2rem);margin:26px 0 12px}
.personagens{display:grid;grid-template-columns:1fr;gap:14px;margin:0;padding:0;list-style:none}
.personagens>li{display:flex;max-width:none}
.personagem{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:start;width:100%;text-align:left;
  background:var(--card);border:2px solid var(--line);border-radius:var(--raio);padding:14px;cursor:pointer;min-height:56px}
.personagem:hover{border-color:var(--azul2);box-shadow:0 6px 18px rgb(13 34 56 / 12%)}
.personagem-av{width:120px;height:120px;border-radius:14px;background:var(--paper2);overflow:hidden}
.personagem-av svg{display:block;width:100%;height:100%}
.personagem-corpo{min-width:0}
.personagem-nome{display:block;font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.1;color:var(--ink)}
.personagem-idade{display:block;font-size:.95rem;color:var(--muted);margin-top:2px}
.personagem-fala{display:block;color:var(--ink2);margin:6px 0 0;font-size:1rem}
.personagem-bio{display:block;color:var(--ink2);font-size:1rem;margin:6px 0 0}
.personagem-tfs{display:grid;gap:8px;margin:10px 0 0;grid-column:1/-1}
.personagem-tf{display:block;font-size:1rem;color:var(--ink);border-left:4px solid var(--verde);padding:2px 0 2px 10px}
.personagem-tf.f{border-left-color:var(--lula)}
.personagem-tf b{display:block;font-weight:700;color:var(--verde-txt)}
.personagem-tf.f b{color:var(--lula-txt)}
.personagem-tf-txt{display:block}
.selo-jogado{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:999px;background:#dff1e5;border:2px solid var(--verde);color:var(--verde-txt);font-size:.9rem;font-weight:700}
.noscript{background:#fff8dc;border-left:5px solid var(--amarelo);padding:12px 14px}
@media (max-width:420px){
  .personagem{grid-template-columns:96px minmax(0,1fr)}
  .personagem-av{width:96px;height:96px}
}

/* ---------- palco ---------- */
.palco{display:flex;flex-direction:column;padding:0;height:calc(100vh - var(--topo-h));height:calc(100dvh - var(--topo-h));min-height:520px;background:var(--paper)}
.hud{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:6px 14px;background:#132e4a;color:#fff}
.hud p{margin:0}
.hud-dia{font-family:var(--mono);font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amarelo2)}
.hud-placar{font-family:var(--mono);font-size:.85rem;color:var(--claro-escuro);width:100%}
.dias{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.dias li{width:14px;height:14px;border-radius:50%;border:2px solid #8fa6bd;background:transparent;max-width:none}
.dias .dia-atual{width:18px;height:18px;border:3px solid var(--amarelo2);background:#132e4a}
.dias .dia-flavio{background:#5ea2e8;border-color:#5ea2e8}
.dias .dia-lula{background:#ef6a55;border-color:#ef6a55}
.dias .dia-nulo{background:#a9b3bd;border-color:#a9b3bd}
.dias .dia-sem_mudanca{background:transparent;border-color:#e6ebf0}
.dias .dia-futuro{border-color:#6f86a0;border-style:dotted}

.status{background:var(--card);border-bottom:2px solid var(--line)}
.confianca{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:6px 14px 4px}
.confianca-rot{font-family:var(--mono);font-size:.85rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.confianca-trilho{position:relative;height:16px;border-radius:999px;background:var(--paper2);border:2px solid var(--borda);overflow:hidden}
.confianca-barra{display:block;height:100%;width:0;background:var(--conf-media);border-radius:999px;transition:background-color .3s ease}
.confianca[data-nivel="fechado"] .confianca-barra{background:var(--conf-baixa)}
.confianca[data-nivel="aberto"] .confianca-barra{background:var(--conf-alta)}
.confianca-valor{font-family:var(--mono);font-size:.9rem;font-weight:700;color:var(--ink);white-space:nowrap;min-width:7.5ch;text-align:right}
.confianca-chips{position:absolute;right:calc(14px + 8.5ch);top:2px;pointer-events:none}
.chip-delta{position:absolute;right:0;top:0;padding:2px 10px;border-radius:999px;font-family:var(--mono);font-weight:700;font-size:1rem;color:#fff;white-space:nowrap;box-shadow:0 2px 8px rgb(0 0 0 / 25%)}
.chip-delta.pos{background:var(--sel-boa)}
.chip-delta.neg{background:var(--sel-ruim)}
.js .chip-delta{animation:chip 1.4s ease-out both}
@keyframes chip{0%{opacity:0;transform:translateY(14px)}15%{opacity:1;transform:translateY(0)}70%{opacity:1;transform:translateY(-12px)}100%{opacity:0;transform:translateY(-26px)}}

.trilha{display:flex;align-items:center;gap:0;margin:0;padding:0 14px 6px;list-style:none}
.trilha li{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;max-width:none;color:var(--muted);font-size:.85rem;font-weight:600}
.trilha li:first-child{flex:0 0 auto}
.trilha li+li::before{content:"";display:block;flex:1 1 14px;min-width:4px;max-width:40px;height:2px;background:var(--borda)}
.trilha-txt{white-space:nowrap}
.trilha-ponto{flex:0 0 auto}
.trilha-ponto{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--borda);background:var(--card);color:var(--muted);font-family:var(--mono);font-size:.85rem;font-weight:700;line-height:1}
.trilha .feita .trilha-ponto{background:var(--verde-txt);border-color:var(--verde-txt);color:#fff}
.trilha .atual .trilha-ponto{background:var(--azul);border-color:var(--azul);color:#fff;box-shadow:0 0 0 3px var(--amarelo2)}
.trilha .atual{color:var(--ink);font-weight:700}
/* Letra ampliada no celular: a barra ganha a linha inteira. */
@media (max-width:699px){
  html:not([data-escala="0"]) .confianca{grid-template-columns:1fr auto;row-gap:2px}
  html:not([data-escala="0"]) .confianca-trilho{grid-column:1/-1;grid-row:2}
}
@media (max-width:699px){
  .trilha li:not(.atual) .trilha-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

.cena{position:relative;flex:0 0 var(--cena-h);min-height:var(--cena-min);background:#cfd8e0;z-index:1;overflow:hidden}
.cena-fundo{position:absolute;inset:0;overflow:hidden}
.cena-fundo svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cena-nome{position:absolute;right:10px;bottom:calc(var(--sobrepoe) + 8px);max-width:calc(100% - var(--av-x) - 70px);text-align:right;line-height:1.2;margin:0;padding:3px 12px;border-radius:999px;background:rgb(13 34 56 / 92%);color:#fff;font-family:var(--display);font-weight:700;font-size:1rem;z-index:2}
.publico-selo{position:absolute;right:10px;top:10px;margin:0;padding:3px 12px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:.9rem;font-weight:700;z-index:2}
/* O NPC fica à esquerda e desce além da cena, por trás da faixa transparente do painel. */
/* Busto grande: a cabeça (37% da largura do SVG) ocupa ~120 px no celular; o corpo passa da borda e a cena corta. */
.npc-avatar{position:absolute;left:calc(var(--av-x) - var(--av-s) / 2);top:calc(6px - var(--av-s) * .225);width:var(--av-s);height:var(--av-s);z-index:1}
.npc-avatar svg{display:block;width:100%;height:100%}

.painel-baixo{position:relative;z-index:2;flex:1 1 auto;min-height:0;margin-top:calc(-1 * var(--sobrepoe));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(var(--sobrepoe) - 10px) 14px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom,transparent 0,transparent var(--sobrepoe),var(--paper) var(--sobrepoe));
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16px);mask-image:linear-gradient(to bottom,transparent 0,#000 16px)}
.conversa{display:flex;flex-direction:column;gap:14px}

/* balões em estilo de quadrinho */
.balao{position:relative;max-width:min(var(--medida),94%);border:2px solid var(--balao-borda);border-radius:18px;background:var(--balao);padding:10px 14px;box-shadow:3px 3px 0 rgb(21 24 18 / 18%)}
.balao p{margin:0}
.balao-npc{align-self:flex-start;margin:24px 0 0 6px;min-width:calc(var(--av-x) + 40px)}
.balao-npc::before,.balao-npc::after{content:"";position:absolute;left:calc(var(--av-x) - 40px);width:0;height:0;border-style:solid}
.balao-npc::before{top:-22px;border-width:0 6px 22px 16px;border-color:transparent transparent var(--balao-borda) transparent}
.balao-npc::after{top:-17px;left:calc(var(--av-x) - 37px);border-width:0 4px 18px 12px;border-color:transparent transparent var(--balao) transparent}
.balao .balao-nome{display:table;margin:-30px 0 0 0;padding:2px 10px;border:2px solid var(--balao-borda);border-radius:8px;background:var(--azul);color:#fff;font-family:var(--mono);font-size:.85rem;font-weight:700;line-height:1.25}
.balao-texto{font-size:var(--leitura);line-height:1.45;color:var(--ink);padding-top:6px}
.linha-eu{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;margin-top:8px}
.balao-eu{background:var(--balao-eu);border-color:var(--azul-txt);margin-right:6px}
.balao-eu .balao-nome{margin:-30px 0 0 auto;background:var(--azul-txt)}
.balao-eu::after{content:"";position:absolute;right:-14px;bottom:12px;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent var(--azul-txt)}
.eu-mini{flex:0 0 52px;width:52px;height:52px;border-radius:50%;overflow:hidden;background:#fff;border:3px solid var(--amarelo)}
.eu-mini svg{display:block;width:100%;height:100%}
.legenda{align-self:stretch;max-width:var(--medida);background:var(--legenda);border:2px solid var(--legenda-borda);border-radius:2px;padding:8px 12px;box-shadow:3px 3px 0 rgb(92 67 0 / 22%)}
.legenda p{margin:0}
.legenda-tit{font-weight:700;color:var(--ouro-txt)}
.legenda-texto{font-size:1rem;line-height:1.45;color:var(--ink)}

/* fase, dica e opções */
.fase-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;margin:12px 0 8px}
.fase-rot{margin:0;font-family:var(--mono);font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.btn-dica{min-height:44px;padding:6px 14px;border:2px solid var(--ouro-txt);border-radius:999px;background:var(--legenda);color:var(--ouro-txt);font-weight:700;font-size:.9rem;cursor:pointer}
.btn-dica:hover{background:#ffe98a}
.btn-dica[aria-disabled="true"]{border-style:dashed;background:transparent}
.dica{margin:0 0 10px;padding:12px 14px;border:2px solid var(--ouro-txt);border-left-width:8px;border-radius:12px;background:#fffbea}
.dica p{margin:0}
.dica p+p{margin-top:6px}
.dica-rot{font-weight:700;color:var(--ouro-txt)}
.dica-txt{font-size:var(--leitura);color:var(--ink)}
.dica-cuidado{color:var(--ink2)}
.dica-cuidado b{color:var(--lula-txt)}
.opcoes{display:grid;gap:10px}
.opcao{position:relative;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;width:100%;min-height:56px;text-align:left;
  padding:7px 12px 7px 8px;border:2px solid var(--azul2);border-radius:14px;background:var(--card);color:var(--ink);font-size:var(--leitura);line-height:1.45;cursor:pointer}
.opcao:hover{background:#e7eef6}
.opcao-n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--azul);color:#fff;font-family:var(--mono);font-weight:700;font-size:1.05rem}
.opcao-selo{grid-column:2;justify-self:start;display:inline-block;padding:2px 12px;border-radius:999px;background:#fff;font-weight:700;font-size:.9rem}
.opcao.escolhida-boa{background:var(--sel-boa);border-color:var(--sel-boa);color:#fff}
.opcao.escolhida-ruim{background:var(--sel-ruim);border-color:var(--sel-ruim);color:#fff}
.opcao.escolhida .opcao-n{background:#fff;color:var(--ink)}
.opcao.escolhida-boa .opcao-selo{color:var(--sel-boa)}
.opcao.escolhida-ruim .opcao-selo{color:var(--sel-ruim)}
.opcao.esmaecida{background:var(--paper2);border-style:dashed;border-color:var(--borda);color:var(--muted)}
.opcao.esmaecida .opcao-n{background:var(--borda);color:#fff}
.opcao[aria-disabled="true"]:hover{background:inherit}
.opcao.escolhida-boa[aria-disabled="true"]:hover{background:var(--sel-boa)}
.opcao.escolhida-ruim[aria-disabled="true"]:hover{background:var(--sel-ruim)}
.opcao.esmaecida[aria-disabled="true"]:hover{background:var(--paper2)}

.btn{min-height:56px;border-radius:12px;border:2px solid transparent;font-family:var(--sans);font-weight:700;font-size:1.05rem;padding:10px 22px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn-prim{background:var(--verde);color:#fff}
.btn-prim:hover{background:var(--verde-esc)}
.btn-sec{background:#fff;color:var(--azul);border-color:var(--azul)}
.btn-sec:hover{background:var(--azul);color:#fff}
.btn-largo{width:100%}

/* reação e lição */
.reacao{margin:14px 0 0;display:grid;gap:8px}
.auto-aviso{position:relative;margin:0;padding-bottom:8px;color:var(--muted);font-size:.95rem}
.auto-barra{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--verde);border-radius:4px;transform-origin:left}
.js .auto-barra{animation:esvazia 1.6s linear both}
@keyframes esvazia{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.nota-reacao{display:grid;gap:8px;max-width:var(--medida)}
.reacao-cab{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tipo-selo{display:inline-block;padding:3px 12px;border-radius:999px;font-weight:700;font-size:.95rem;border:2px solid currentColor}
.tipo-melhor,.tipo-ok{background:var(--sel-boa);border-color:var(--sel-boa);color:#fff}
.tipo-erro,.tipo-grave{background:var(--sel-ruim);border-color:var(--sel-ruim);color:#fff}
.delta{font-family:var(--mono);font-size:.95rem;font-weight:700}
.delta.pos{color:var(--verde-txt)}
.delta.neg{color:var(--lula-txt)}
.nota{margin:0;font-size:1rem;color:var(--lula-txt);font-weight:700}
.licao-card{border-left:6px solid var(--lula);background:#fbecea;border-radius:0 12px 12px 0;padding:12px 14px}
.licao-card.grave{border-left-color:var(--lula-txt);background:#f7dcd7}
.licao-card h3{margin:0;font-family:var(--mono);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--lula-txt)}
.licao-card p{margin:6px 0 0;font-size:1rem;color:var(--ink)}
.licao-card .fonte{color:var(--ink2)}
.licao-card .fonte b{font-weight:700;color:var(--ink)}
.desfecho{background:var(--azul);color:#fff;border-radius:var(--raio);padding:14px 16px;border-left:10px solid var(--borda)}
.desfecho.res-flavio{border-left-color:#5ea2e8}
.desfecho.res-lula{border-left-color:#ef6a55}
.desfecho.res-nulo{border-left-color:#a9b3bd}
.desfecho p{margin:0}
.desfecho .rot{font-family:var(--mono);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amarelo2)}
.desfecho .res{font-family:var(--display);font-weight:900;font-size:1.7rem;line-height:1.1;margin-top:4px;color:#fff}
.desfecho .vale{font-size:1rem;color:var(--claro-escuro);margin-top:4px}

/* ---------- placar e caderno ---------- */
.placar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.placar>div{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--muted);border-radius:10px;padding:8px 10px}
.placar>div.flavio{border-top-color:var(--flavio)}
.placar>div.lula{border-top-color:var(--lula)}
.placar>div.nulo{border-top-color:var(--amarelo)}
.placar>div.saldo{grid-column:1/-1;border-top-color:var(--verde)}
.placar dt{font-size:.9rem;font-weight:700;color:var(--muted)}
.placar dd{margin:0;font-family:var(--display);font-weight:900;font-size:1.7rem;line-height:1.1;color:var(--ink)}
.licoes{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.licoes li{max-width:var(--medida);background:var(--card);border:1px solid var(--line);border-left:6px solid var(--lula);border-radius:0 12px 12px 0;padding:12px 14px;font-size:1rem}
.licoes li.grave{border-left-color:var(--lula-txt)}
.licoes .quem{display:block;font-size:.9rem;font-weight:700;color:var(--muted)}
.licoes .disse{display:block;color:var(--ink2);margin:4px 0 0}
.licoes .li{display:block;margin:6px 0 0;color:var(--ink)}
.licoes .fonte{display:block;margin:6px 0 0;font-size:1rem;color:var(--ink2)}
.caderno-vazio{color:var(--muted);font-size:1rem;margin:0}
.lateral{background:var(--paper)}
.lateral h2{font-size:1.35rem;margin:18px 0 10px}
.lateral-cab{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lateral-cab h2{margin:0}
.lateral-fechar{border-color:var(--azul);color:var(--azul)}

/* No celular a lateral vira painel por cima do palco. */
@media (max-width:899px){
  .hud-placar{display:none}
  .lateral{position:fixed;inset:var(--topo-h) 0 0 0;z-index:30;overflow-y:auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgb(13 34 56 / 25%)}
  .lateral:not(.aberto){display:none!important}
}

/* ---------- fim ---------- */
.tela-fim .eyebrow{margin-top:4px}
.fim-grau{font-weight:900;font-size:clamp(2.2rem,10vw,3.4rem);margin:8px 0 0;color:#fff;background:var(--azul);border-left:10px solid var(--amarelo);border-radius:var(--raio);padding:16px 18px}
.fim-frase{font-size:1.1rem;margin:12px 0 12px}
.fim-resumo,.fim-erros{font-size:1rem;margin:0 0 12px}
.fim-erros{color:var(--ink2)}
.placar-fim{display:grid;gap:10px;margin:18px 0 12px;max-width:640px}
.linha-placar{display:grid;grid-template-columns:6.5em 1fr;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--borda);border-radius:0 12px 12px 0;padding:8px 12px}
.linha-placar.flavio{border-left-color:var(--flavio)}
.linha-placar.lula{border-left-color:var(--lula)}
.linha-placar.nulo{border-left-color:#7c8791}
.linha-placar.saldo{border-left-color:var(--verde);background:#eef7f0}
.linha-placar dt{font-weight:700;font-size:1rem;color:var(--ink)}
.linha-placar dd{margin:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px}
.linha-placar .num{font-family:var(--display);font-weight:900;font-size:48px;font-size:max(48px,2.5rem);line-height:1;color:var(--ink);min-width:1.6ch;text-align:left}
.barra-placar{display:block;height:18px;border-radius:999px;background:var(--paper2);border:1px solid var(--line);overflow:hidden}
.barra-placar-cheia{display:block;height:100%;background:var(--borda)}
.flavio .barra-placar-cheia{background:var(--flavio)}
.lula .barra-placar-cheia{background:var(--lula)}
.nulo .barra-placar-cheia{background:#7c8791}
.fim-dicas-n{font-size:1rem;color:var(--ink2);margin:0 0 12px}
.fim-recorde{font-family:var(--mono);font-size:.95rem;font-weight:700;color:var(--verde-txt);margin:0 0 12px}
.fim-acoes{display:grid;grid-template-columns:1fr;gap:10px;margin:16px 0 0}
.fim-acoes .btn{width:100%}
.fim-status{min-height:1.5em;color:var(--verde-txt);font-weight:700;margin:8px 0 0}
.dicas{margin:16px 0 0;padding-left:22px;color:var(--ink2)}
.dicas li{margin:0 0 6px}
.fim-semente{font-family:var(--mono);font-size:.9rem;color:var(--muted);margin:20px 0 0;overflow-wrap:anywhere}

/* ---------- ajuda ---------- */
.sobreposicao{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgb(13 34 56 / 72%)}
.caixa{width:min(600px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--card);border-radius:var(--raio);padding:20px 18px;border-top:6px solid var(--amarelo)}
.caixa h2{margin:0 0 10px;font-size:1.6rem}
.caixa p{margin:0 0 10px;font-size:1rem}
.caixa .menu-tutorial{margin:6px 0 16px}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--line);padding:18px 16px calc(24px + env(safe-area-inset-bottom));color:var(--muted);font-size:.95rem;text-align:center}
.rodape p{margin:4px auto}

/* ---------- animação leve só com JS ---------- */
.js .entra{animation:entra .28s ease-out both}
.js .npc-avatar.troca{animation:sobe .35s ease-out both}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- contraste reforçado ---------- */
@media (prefers-contrast:more){
  :root{--line:#5d5a4f;--borda:#3f4740;--muted:#262b24;--ink2:#151812}
  .opcao,.personagem,.balao,.legenda,.dica,.linha-placar,.licoes li,.placar>div{border-width:3px}
  .confianca-trilho{border-color:var(--ink)}
  .opcao.esmaecida{border-style:solid}
}

/* ---------- telas maiores ---------- */
@media (min-width:560px){
  .personagens{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fim-acoes{grid-template-columns:repeat(3,auto);justify-content:start}
  .fim-acoes .btn{width:auto}
  .eu-mini{flex-basis:60px;width:60px;height:60px}
}
@media (min-width:900px){
  :root{--corpo:20px;--leitura:1.05rem;--cena-h:clamp(240px,32dvh,300px);--cena-min:240px;--sobrepoe:26px;--av-s:405px;--av-x:240px}
  .jogo{display:grid;grid-template-columns:minmax(0,760px);justify-content:center;gap:24px;padding:24px 24px 0}
  body.em-jogo .jogo{grid-template-columns:minmax(0,760px) 320px}
  .tela{padding:0 0 32px}
  .palco{height:min(calc(100dvh - var(--topo-h) - 48px),940px);border-radius:var(--raio);overflow:hidden;box-shadow:0 18px 50px rgb(13 34 56 / 18%);padding:0}
  .lateral{position:sticky;top:calc(var(--topo-h) + 24px);align-self:start;max-height:calc(100dvh - var(--topo-h) - 48px);overflow-y:auto;padding:0 4px 24px}
  .lateral-fechar,#btn-caderno{display:none!important}
  .lateral-cab h2{margin-top:0}
}