/* BRASA — estilo do jogo. Pixel 16 bits dark fantasy: noite fria (índigo, lilás) contra fogo quente (coral, ouro).
   Tokens do PLANO 7.5 (paleta Magikarp só como cor + tema noite). Um só tema, escuro de propósito. */
:root {
  color-scheme: dark;
  --noite: #171312; --noite-2: #1f1a1d; --ceu-alto: #120f22; --ceu-baixo: #2a2147;
  --pedra: #2a2326; --pedra-2: #352c30; --pedra-3: #463a3e; --borda: #0c090a; --borda-luz: #4e4246;
  --texto: #f2ede6; --texto-2: #bfb3aa; --texto-3: #8e837c;
  --coral: #f27a61; --coral-escuro: #cf6a57; --ouro: #fce06b; --creme: #f6c278; --tinta: #2c1b17;
  --lua: #83bed0; --lua-escura: #183b4a; --lilas: #a99bd8; --indigo: #3a3170; --sangue: #d9363e;
  --ok: #8fd18a; --ok-escuro: #23351f;
  --carmesim: #c8312c; --carmesim-escuro: #7e1b19; --carmesim-borda: #e2645c; --brilho-carmesim: rgba(229, 57, 53, .38);
  --ouro-velho: #8a6a3a; --ouro-claro: #e6c98a; --painel-a: #1a1214; --painel-b: #0e0a0b; --linha: #3a2224;
  --fonte-titulo: "Palatino", "Palatino Linotype", "Book Antiqua", "Baskerville", Georgia, "Times New Roman", serif;
  --raio: 0px; --px: 4px;
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-en: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --seguro-topo: env(safe-area-inset-top, 0px); --seguro-baixo: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0b0809; color: var(--texto); }
body { background: radial-gradient(120% 60% at 50% 0%, #1d0f12 0%, #0b0809 60%) fixed, #0b0809; }
body { font: 17px/1.45 var(--fonte); overscroll-behavior: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input { font: inherit; color: inherit; }
img, canvas { max-width: 100%; }
.pixel, .pixel-texto { image-rendering: pixelated; image-rendering: crisp-edges; }
[hidden] { display: none !important; }
.oculto-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- estrutura ---------- */
#app { min-height: 100%; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; position: relative; }
.tela { flex: 1; display: flex; flex-direction: column; padding: calc(12px + var(--seguro-topo)) max(16px, env(safe-area-inset-right, 0px)) calc(16px + var(--seguro-baixo)) max(16px, env(safe-area-inset-left, 0px)); gap: 14px; animation: entra .28s ease-out both; }
.tela.com-nav { padding-bottom: calc(86px + var(--seguro-baixo)); }
.tela[data-tela="hoje"] { gap: 10px; padding-top: calc(6px + var(--seguro-topo)); }
.tela[data-tela="hoje"] .topo { min-height: 40px; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
html[data-movimento="reduzido"] * { animation-duration: .01ms !important; transition-duration: .01ms !important; }

/* ---------- painel de pedra (borda de pixel com canto recortado) ---------- */
.painel {
  position: relative; background: linear-gradient(180deg, var(--painel-a), var(--painel-b)); border: 1px solid var(--linha); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 1px #050304, 0 8px 22px rgba(0, 0, 0, .45); padding: 16px; margin: 0;
}
.painel::before, .painel::after { content: ""; position: absolute; width: 7px; height: 7px; background: var(--ouro-velho); transform: rotate(45deg); box-shadow: 0 0 6px rgba(230, 201, 138, .35); pointer-events: none; }
.painel::before { left: -4px; top: -4px; } .painel::after { right: -4px; bottom: -4px; }
.painel.escuro { background: linear-gradient(180deg, #141012, #0a0708); }
.painel.brilha { animation: brilha .6s ease-out; }
@keyframes brilha { 0% { box-shadow: 0 0 0 2px var(--creme), 0 0 30px rgba(246, 194, 120, .55); } 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 1px #050304, 0 8px 22px rgba(0, 0, 0, .45); } }
.painel.treme { animation: treme .35s ease-in-out; }
@keyframes treme { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 20px; border-radius: 10px;
  border: 1px solid #4a3438; background: linear-gradient(180deg, #2a1e21, #171113); color: var(--texto); font-weight: 650; letter-spacing: .01em; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px #050304; margin: 0;
  user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: transform .06s, filter .12s, box-shadow .2s;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); filter: brightness(.95); }
.btn:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.btn:disabled { filter: grayscale(.6) brightness(.65); cursor: default; }
.btn.primario { background: linear-gradient(180deg, #d3392f, #8e1f1c); border-color: var(--carmesim-borda); color: #fff3ee; font-family: var(--fonte-titulo); font-size: 19px; letter-spacing: .06em; text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
  box-shadow: 0 0 0 1px #2a0a0a, 0 0 18px var(--brilho-carmesim), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .25); }
.btn.primario:hover { filter: brightness(1.06); }
.btn.ouro { background: linear-gradient(180deg, #f2d08f, #c9964f); border-color: #f6dca8; color: var(--tinta); box-shadow: 0 0 0 1px #2a1a08, 0 0 14px rgba(246, 194, 120, .25), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn.fantasma { background: transparent; border-color: transparent; box-shadow: none; color: var(--texto-2); min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.btn.largo { width: calc(100% - 8px); }
.btn.icone { min-height: 48px; min-width: 48px; padding: 8px; }
.btn.pequeno { min-height: 44px; padding: 8px 14px; font-size: 15px; }
.rodape-acoes { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.acao-fixa-sem-nav { position: sticky; bottom: calc(8px + var(--seguro-baixo)); z-index: 5; padding-top: 10px; background: linear-gradient(180deg, rgba(23, 19, 18, 0), var(--noite) 26%); }
.acao-fixa > p { margin-top: 10px !important; }
.acao-fixa { position: sticky; bottom: calc(74px + var(--seguro-baixo)); z-index: 5; padding-top: 10px; background: linear-gradient(180deg, rgba(23, 19, 18, 0), var(--noite) 26%); }

/* ---------- topo de tela ---------- */
.topo { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.topo .titulo { flex: 1; display: flex; align-items: center; gap: 8px; }
.barra-progresso { flex: 1; display: flex; gap: 3px; height: 12px; }
.barra-progresso i { flex: 1; background: #2a1e21; border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.barra-progresso i.feito { background: linear-gradient(180deg, #f6dca8, #c9964f); }
.barra-progresso i.atual { background: linear-gradient(180deg, #e2645c, #a52722); box-shadow: 0 0 10px var(--brilho-carmesim); }

/* ---------- o mundo (Home): camadas de pixel art ---------- */
.mundo { position: relative; width: calc(100% + 32px); margin: 0 -16px; aspect-ratio: 4 / 3; max-height: 43vh; min-height: 210px; overflow: hidden; background: #0d0b1c; border-bottom: 1px solid var(--linha); }
.camada { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; pointer-events: none; }
.mundo-vilao { position: absolute; left: 50%; bottom: 30%; width: 70%; transform-origin: 50% 100%; transition: transform 1.6s ease-in-out, opacity 1.6s ease-in-out, filter 1.6s ease-in-out; pointer-events: none; }
.mundo-vilao img { width: 100%; display: block; }
.mundo-nucleo { position: absolute; left: 50%; top: 76%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 60, 60, .75) 0%, rgba(217, 54, 62, .35) 35%, rgba(217, 54, 62, 0) 70%); mix-blend-mode: screen; animation: pulsa 3.2s ease-in-out infinite; opacity: 0; }
@keyframes pulsa { 0%, 100% { transform: translate(-50%, -50%) scale(.9); } 50% { transform: translate(-50%, -50%) scale(1.15); } }
.mundo[data-fase="-1"] .mundo-vilao { transform: translateX(-50%) translateY(26%) scale(.5); opacity: .32; filter: brightness(.5) saturate(.6); }
.mundo[data-fase="0"] .mundo-vilao { transform: translateX(-50%) translateY(22%) scale(.6); opacity: .42; filter: brightness(.55) saturate(.7); }
.mundo[data-fase="1"] .mundo-vilao { transform: translateX(-50%) translateY(16%) scale(.74); opacity: .58; filter: brightness(.65); }
.mundo[data-fase="2"] .mundo-vilao { transform: translateX(-50%) translateY(10%) scale(.9); opacity: .74; filter: brightness(.78); }
.mundo[data-fase="3"] .mundo-vilao { transform: translateX(-50%) translateY(4%) scale(1.08); opacity: .9; filter: brightness(.9); }
.mundo[data-fase="4"] .mundo-vilao { transform: translateX(-50%) translateY(0) scale(1.3); opacity: 1; filter: brightness(1.02) saturate(1.15); }
.mundo[data-fase="2"] .mundo-nucleo { opacity: .35; } .mundo[data-fase="3"] .mundo-nucleo { opacity: .7; } .mundo[data-fase="4"] .mundo-nucleo { opacity: 1; }
.mundo[data-fase="4"] .camada-ceu { filter: hue-rotate(-28deg) saturate(1.4) brightness(.85); }
.mundo[data-fase="3"] .camada-ceu { filter: hue-rotate(-14deg) saturate(1.15) brightness(.92); }
.mundo-nevoa { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: .85; pointer-events: none; }
.mundo-brilho { position: absolute; left: 50%; bottom: 0; width: 80%; height: 48%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 68%, rgba(242, 122, 97, .5) 0%, rgba(246, 194, 120, .18) 34%, rgba(242, 122, 97, 0) 66%); mix-blend-mode: screen; pointer-events: none; transition: opacity .3s; }
.mundo-fogo { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); display: block; pointer-events: none; }
.mundo-andarilho { position: absolute; left: 31%; bottom: 8%; width: 15%; height: auto; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.fala-vilao { text-align: center; margin: -4px 0 0; }
.fala-vilao .en { font: italic 600 17px/1.3 Georgia, "Times New Roman", serif; color: var(--lilas); letter-spacing: .01em; }
.fala-vilao .pt { font-size: 13px; color: var(--texto-3); }

.numeros { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; align-items: center; padding: 10px 8px; }
.numero { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; }
.numero .rot { font-size: 12px; color: var(--texto-2); text-align: center; line-height: 1.25; }
.faixa { position: absolute; left: 12px; right: 12px; top: 66px; z-index: 6; padding: 8px 12px; font-size: 14px; line-height: 1.35; text-align: center; background: rgba(10, 18, 24, .82); color: #d7eef5; box-shadow: 0 0 0 2px rgba(131, 190, 208, .5); }
.faixa.quente { background: rgba(30, 16, 10, .85); color: var(--creme); box-shadow: 0 0 0 2px rgba(246, 194, 120, .55); }
.anel { justify-content: center; }
.anel .brasas { display: flex; gap: 5px; padding: 6px 0 4px; }
.anel .brasas i { width: 10px; height: 10px; background: var(--pedra-3); box-shadow: 0 0 0 2px var(--borda); }
.anel .brasas i.acesa { background: var(--coral); box-shadow: 0 0 0 2px var(--borda), 0 0 10px rgba(242, 122, 97, .7); }
.anel .brasas i.hoje { outline: 2px dashed var(--texto-3); outline-offset: 3px; }
.aviso { padding: 10px 14px; background: linear-gradient(180deg, rgba(24, 59, 74, .65), rgba(12, 30, 38, .65)); border: 1px solid rgba(131, 190, 208, .35); border-radius: 10px; color: #d7eef5; font-size: 15px; }
.aviso.quente { background: linear-gradient(180deg, rgba(74, 40, 18, .7), rgba(40, 20, 10, .7)); border-color: rgba(246, 194, 120, .4); color: var(--creme); }

/* ---------- navegação de baixo ---------- */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; background: linear-gradient(180deg, #140d0f, #0a0708); border-top: 1px solid var(--linha); box-shadow: 0 -10px 24px rgba(0, 0, 0, .5); padding: 6px max(12px, env(safe-area-inset-right, 0px)) calc(6px + var(--seguro-baixo)) max(12px, env(safe-area-inset-left, 0px)); }
.nav .itens { display: flex; width: 100%; max-width: 560px; }
.nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 58px; background: none; border: 0; color: var(--texto-3); font-size: 12px; cursor: pointer; }
.nav button[aria-current="page"] { color: #ffd9cf; }
.nav button[aria-current="page"] canvas { background: radial-gradient(circle, rgba(229, 57, 53, .55), rgba(229, 57, 53, 0) 70%); border-radius: 8px; box-shadow: 0 0 14px var(--brilho-carmesim); }
.nav button:focus-visible { outline: 2px solid var(--ouro); }

/* ---------- exercício ---------- */
.enunciado { font-size: 15px; color: var(--texto-2); margin: 0 0 6px; }
.alvo-pt { font-size: 30px; line-height: 1.2; font-weight: 750; margin: 0; color: var(--texto); text-wrap: balance; }
.palavra-en { font: 800 40px/1.1 var(--fonte-en); color: var(--ouro); margin: 0; letter-spacing: .01em; word-break: break-word; text-shadow: 2px 2px 0 #000; }
.fala-se { font-size: 16px; color: var(--texto-2); letter-spacing: .04em; }
.traducao { font-size: 20px; font-weight: 650; color: var(--texto); }
.frase-en { font: 600 19px/1.4 var(--fonte-en); color: var(--texto); margin: 0; }
.frase-en .lacuna { display: inline-block; min-width: 72px; border-bottom: 3px solid var(--coral); color: var(--coral); text-align: center; }
.frase-pt { font-size: 15px; color: var(--texto-2); margin: 4px 0 0; }
.linha-ouvir { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.opcoes { display: grid; gap: 10px; }
.opcoes .btn { justify-content: flex-start; font: 700 22px/1.2 var(--fonte-en); min-height: 60px; padding-left: 18px; }
.opcoes .btn.certa { background: linear-gradient(180deg, #284a2a, #15281a); border-color: #6fbf70; color: #e2f7dc; box-shadow: 0 0 16px rgba(111, 191, 112, .35); }
.opcoes .btn.errada { background: linear-gradient(180deg, #4a1c1d, #2a0f10); border-color: var(--carmesim-borda); color: #f7d4d4; box-shadow: 0 0 16px var(--brilho-carmesim); }
.opcoes .btn.opcao-pt { font: 650 19px/1.25 var(--fonte); }
.opcoes .btn.marcada { box-shadow: 0 0 0 3px var(--creme), 0 -4px 0 0 var(--borda), 0 4px 0 0 var(--borda); }
.resposta-montada { display: flex; flex-wrap: wrap; gap: 6px; min-height: 64px; align-items: center; padding: 10px; background: #0a0708; border: 1px solid var(--linha); border-radius: 10px; box-shadow: inset 0 2px 10px rgba(0, 0, 0, .6); }
.resposta-montada .slot { min-width: 30px; height: 44px; border-bottom: 3px solid var(--pedra-3); }
.resposta-montada .peca { pointer-events: none; }
.pecas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.peca { min-width: 48px; min-height: 52px; padding: 6px 12px; font: 800 24px/1 var(--fonte-en); text-transform: lowercase; border-color: #6b5332; background: linear-gradient(180deg, #2c2124, #161012); color: var(--ouro-claro); }
.peca.usada { visibility: hidden; }
.campo { width: 100%; min-height: 56px; padding: 12px 14px; font: 700 24px/1.2 var(--fonte-en); color: var(--ouro); background: #0a0708; border: 1px solid #4a3438; border-radius: 10px; box-shadow: inset 0 2px 10px rgba(0, 0, 0, .6); caret-color: var(--coral); }
.campo:focus { outline: none; border-color: var(--carmesim-borda); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .6), 0 0 14px var(--brilho-carmesim); }
.linha-acoes { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.btn-dica { position: relative; overflow: hidden; }
.btn-dica .carga { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--creme); width: 0; animation: carga 5s linear forwards; }
@keyframes carga { to { width: 100%; } }
.pontos-dica { display: inline-flex; gap: 3px; } .pontos-dica i { width: 6px; height: 6px; background: var(--creme); } .pontos-dica i.gasto { background: var(--pedra-3); }
.dicas { display: grid; gap: 8px; }
.dica { padding: 10px 12px; background: linear-gradient(90deg, rgba(246, 194, 120, .14), rgba(246, 194, 120, .04)); border: 1px solid rgba(246, 194, 120, .3); border-left: 3px solid var(--creme); border-radius: 8px; color: var(--creme); font-size: 16px; }
.dica b { color: var(--ouro); }
.feedback { display: grid; gap: 10px; }
.feedback .selo { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 20px; }
.feedback.certo .selo { color: var(--ok); }
.feedback.erro .selo { color: var(--creme); }
.xp { font: 800 16px/1 var(--fonte-en); color: var(--ouro); animation: sobe 1.2s ease-out both; }
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } 30% { opacity: 1; } to { opacity: 0; transform: translateY(-18px); } }
.diff .m { color: var(--ok); } .diff .x { color: #ff9b9b; text-decoration: line-through; } .diff .f { color: var(--ouro); text-decoration: underline; }

/* ---------- a "visão" (cena absurda, moldura de vitral) ---------- */
.visao { position: relative; padding: 14px; background: linear-gradient(160deg, #2a1622, #1a1220 60%, #120d17); color: #f3e7f2; border: 1px solid #6b5332; border-radius: 12px; box-shadow: inset 0 0 0 3px #0c080b, inset 0 0 0 4px rgba(230, 201, 138, .35), 0 0 22px rgba(169, 155, 216, .18); margin: 0; font-size: 16px; }
.visao img { width: 100%; display: block; border-radius: 6px; margin-bottom: 10px; image-rendering: auto; box-shadow: 0 0 0 1px #000; background: #0b0809; aspect-ratio: 3 / 4; object-fit: cover; }
.visao .rot { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--creme); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.visao .ponte { color: var(--ouro); font-weight: 700; }
.visao img { width: 100%; display: block; margin-bottom: 10px; image-rendering: auto; }

/* ---------- listas ---------- */
.lista { display: grid; gap: 8px; }
.item-palavra { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; background: linear-gradient(180deg, #1a1214, #100b0c); border: 1px solid var(--linha); border-radius: 10px; cursor: pointer; color: var(--texto); }
.item-palavra .en { font: 750 18px/1.2 var(--fonte-en); color: var(--texto); }
.item-palavra .pt { font-size: 14px; color: var(--texto-2); }
.item-palavra .quando { font-size: 12px; color: var(--texto-3); text-align: right; }
.item-palavra.fora { opacity: .55; }
.secao { font: 600 14px/1.2 var(--fonte-titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--ouro-velho); margin: 14px 4px 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 44px; padding: 8px 14px; background: linear-gradient(180deg, #2a1e21, #171113); border: 1px solid #4a3438; border-radius: 10px; color: var(--texto); cursor: pointer; font-size: 15px; }
.chip[aria-pressed="true"] { background: linear-gradient(180deg, #d3392f, #8e1f1c); border-color: var(--carmesim-borda); color: #fff3ee; font-weight: 700; box-shadow: 0 0 12px var(--brilho-carmesim); }
.linha-config { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; flex-wrap: wrap; }
.linha-config + .linha-config { border-top: 2px solid var(--borda); }
.mudo-texto { font-size: 14px; color: var(--texto-3); }
.capitulo { white-space: normal; }
.capitulo p { font: 18px/1.6 Georgia, "Times New Roman", serif; color: #e9e0d6; margin: 0 0 14px; }
.centro { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.titulo-serifa { font: 600 30px/1.1 var(--fonte-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-claro); margin: 0; text-shadow: 0 0 18px rgba(229, 57, 53, .45), 0 2px 0 #000; }
.logo { font: 700 28px/1 var(--fonte-titulo); letter-spacing: .22em; text-transform: uppercase; background: linear-gradient(180deg, #fff0c8, #e6b45e 55%, #a86a2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(229, 57, 53, .45)) drop-shadow(0 2px 0 #000); }
.logo.grande { font-size: 52px; letter-spacing: .26em; }
.grande { font-size: 22px; font-weight: 700; text-wrap: balance; }
.sub { color: var(--texto-2); font-size: 16px; }
.folha { position: fixed; inset: 0; z-index: 40; background: rgba(8, 6, 7, .78); display: flex; align-items: flex-end; justify-content: center; }
.folha .conteudo { width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; background: var(--noite-2); padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(18px + var(--seguro-baixo)) max(16px, env(safe-area-inset-left, 0px)); box-shadow: 0 -4px 0 0 var(--borda), 0 -8px 0 0 var(--borda-luz); animation: entra .25s ease-out; }
.toast { position: fixed; left: 50%; bottom: calc(96px + var(--seguro-baixo)); transform: translateX(-50%); z-index: 50; background: #0e0b0c; color: var(--creme); padding: 10px 16px; box-shadow: 0 0 0 3px var(--creme); font-size: 15px; animation: entra .2s ease-out; max-width: calc(100% - 32px); }

/* ---------- HUD do jogador (Home) ---------- */
.hud { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 7; display: flex; align-items: center; gap: 10px; }
.hud .retrato { width: 46px; height: 46px; border-radius: 8px; border: 1px solid var(--ouro-velho); background: radial-gradient(circle at 50% 30%, #3a2a30, #120c0e); box-shadow: 0 0 0 1px #000, 0 0 12px rgba(0, 0, 0, .6); display: grid; place-items: center; overflow: hidden; }
.hud .retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 4%; transform: scale(2.2); transform-origin: 40% 0%; image-rendering: pixelated; }
.hud .info { flex: 1; min-width: 0; text-shadow: 0 1px 2px #000; }
.hud .patente { font: 600 15px/1.1 var(--fonte-titulo); letter-spacing: .06em; color: var(--ouro-claro); }
.hud .barra { height: 7px; margin-top: 5px; background: rgba(0, 0, 0, .55); border: 1px solid #3a2224; border-radius: 4px; overflow: hidden; }
.hud .barra i { display: block; height: 100%; background: linear-gradient(90deg, #8e1f1c, #e2645c); box-shadow: 0 0 8px var(--brilho-carmesim); }
.hud .fogo-dias { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; background: rgba(10, 6, 7, .72); border: 1px solid #4a2a20; color: var(--creme); font-weight: 700; }
.chip-confronto { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--carmesim-borda); background: linear-gradient(90deg, rgba(126, 27, 25, .85), rgba(26, 10, 12, .9)); color: #ffe3dc; font: 600 16px/1.2 var(--fonte-titulo); letter-spacing: .05em; box-shadow: 0 0 18px var(--brilho-carmesim); cursor: pointer; text-align: left; }
.chip-confronto img { width: 40px; height: 40px; object-fit: cover; object-position: 50% 58%; border-radius: 6px; border: 1px solid #000; image-rendering: pixelated; }

/* ---------- Confronto ---------- */
.palco-vilao { position: relative; margin: -12px -16px 0; height: 46vh; min-height: 260px; overflow: hidden; background: radial-gradient(70% 55% at 50% 70%, #3a1020 0%, #160b18 55%, #07050a 100%); }
.palco-vilao img { position: absolute; left: 50%; bottom: -6%; width: 104%; transform: translateX(-50%); transform-origin: 50% 100%; animation: respira 6s ease-in-out infinite; }
.palco-vilao .nucleo-brilho { position: absolute; left: 50%; bottom: 13%; width: 34%; aspect-ratio: 1; transform: translate(-50%, 0); background: radial-gradient(circle, rgba(255, 70, 60, .7), rgba(217, 54, 62, .25) 40%, rgba(217, 54, 62, 0) 70%); mix-blend-mode: screen; animation: pulsa 2.6s ease-in-out infinite; }
.palco-vilao::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(180deg, rgba(11, 8, 9, 0), #0b0809); }
.palco-vilao.grande img { width: 118%; }
.palco-vilao.recuou img { filter: brightness(.45) grayscale(.5); transform: translateX(-50%) translateY(14%) scale(.82); animation: none; transition: transform 1.6s ease-out; }
.palco-vilao.recuou .nucleo-brilho { opacity: .25; }
.palco-vilao.aperta img { filter: brightness(1.08) saturate(1.2); }
@keyframes respira { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.025); } }
.hud-chefe { display: flex; align-items: center; gap: 10px; }
.retrato-chefe { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; border: 1px solid var(--carmesim-borda); box-shadow: 0 0 12px var(--brilho-carmesim); background: #07050a; }
.retrato-chefe img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 57%; transform: scale(2.6); transform-origin: 50% 57%; image-rendering: pixelated; }
.nome-chefe { font: 600 15px/1 var(--fonte-titulo); letter-spacing: .16em; color: #ffd9cf; margin-bottom: 6px; }
.vida-chefe { height: 10px; background: #1a0a0b; border: 1px solid #5a1c1e; border-radius: 5px; overflow: hidden; }
.vida-chefe i { display: block; height: 100%; background: linear-gradient(90deg, #7e1b19, #e2645c); box-shadow: 0 0 10px var(--brilho-carmesim); transition: width .6s ease; }
.anotado { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: 12px 22px; border-radius: 10px; background: rgba(10, 6, 7, .9); border: 1px solid var(--ouro-velho); font: 600 20px/1 var(--fonte-titulo); letter-spacing: .1em; color: var(--ouro-claro); animation: entra .2s ease-out; z-index: 30; }
.faixa-prova { padding: 4px 6px; }
.faixa-trilho { position: relative; height: 16px; border-radius: 8px; background: #1a1214; border: 1px solid var(--linha); }
.faixa-banda { position: absolute; top: 2px; bottom: 2px; border-radius: 6px; background: linear-gradient(90deg, rgba(246, 194, 120, .35), rgba(246, 194, 120, .6)); }
.faixa-ponto { position: absolute; top: -5px; width: 4px; height: 26px; margin-left: -2px; background: var(--ouro); box-shadow: 0 0 10px rgba(252, 224, 107, .8); border-radius: 2px; }
.faixa-rotulos { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-3); margin-top: 4px; }

/* ---------- mapa ---------- */
.mapa { position: relative; margin: -12px -16px 0; overflow: hidden; border-bottom: 1px solid var(--linha); }
.mapa img.fundo { display: block; width: 100%; image-rendering: pixelated; }
.mapa .marco { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 4px; cursor: pointer; color: inherit; }
.mapa .marco .rot { padding: 5px 10px; border-radius: 8px; background: rgba(10, 6, 7, .82); border: 1px solid var(--ouro-velho); color: var(--ouro-claro); font: 600 13px/1.15 var(--fonte-titulo); letter-spacing: .04em; white-space: nowrap; text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.mapa .marco.livre .rot { border-color: #6fbf70; color: #e2f7dc; }
.mapa .marco.atual .rot { border-color: var(--carmesim-borda); color: #fff3ee; box-shadow: 0 0 16px var(--brilho-carmesim); }
.mapa .marco.trancado .rot { opacity: .8; }

/* atmosfera das telas de estudo: o céu da noite bem escuro atrás dos painéis */
.tela[data-tela="missao"], .tela[data-tela="fecho"], .tela[data-tela="capitulo"], .tela[data-tela="confronto"] { position: relative; isolation: isolate; }
.tela[data-tela="missao"]::before, .tela[data-tela="fecho"]::before, .tela[data-tela="capitulo"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 8, 9, .78), rgba(11, 8, 9, .93) 55%, #0b0809), url("../assets/mundo/ceu.png") center top / cover no-repeat; image-rendering: pixelated; }

/* ícones pintados */
.icone-pintado { display: inline-block; flex: none; vertical-align: middle; object-fit: contain; }
/* painel com a moldura dourada pintada (9 fatias) */
.painel.ornado { border: 16px solid transparent; border-image: url("../assets/ui/painel.png") 16 fill / 16px stretch; background: none; box-shadow: none; padding: 6px 8px; image-rendering: pixelated; }
.painel.ornado::before, .painel.ornado::after { display: none; }
.numeros.painel.ornado { padding: 2px 4px; }
/* quadro da visão com moldura dourada */
.visao .quadro { border: 16px solid transparent; border-image: url("../assets/ui/painel.png") 16 / 16px stretch; margin: -4px -4px 10px; image-rendering: pixelated; }
.visao .quadro img { margin: 0; border-radius: 0; box-shadow: none; }
/* insígnia da patente */
.insignia { width: 48px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(230, 201, 138, .35)); }
.hud .insignia { width: 26px; height: 26px; margin-right: 4px; vertical-align: -6px; }
/* Confronto: catedral em ruínas sob a lua vermelha atrás do MORROW */
.palco-vilao { background: url("../assets/mundo/confronto.png") center 30% / cover no-repeat, #07050a; image-rendering: pixelated; }
.palco-vilao img { image-rendering: pixelated; }

.carregando { margin-top: 40vh; text-align: center; }
.sem-js { padding: 24px; color: #f2ede6; background: #171312; }