/* ═══════════════════════════════════════════════════════════════
   OLHOS D'ÁGUA E ESTRELAS
   Identidade: três materiais, um rio.
   Ato I  azulejo colonial  · Ato II  papel de blueprint · Ato III  água
   Tipos: Bodoni Moda (romance oitocentista) + IBM Plex (era do IBM 7090)
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* base */
  --tinta:#0A0C16;
  --tinta-2:#111527;
  --tinta-3:#1A2038;
  --papel:#E9E4D8;
  --papel-fraco:#9AA0B4;
  --linha:rgba(233,228,216,.14);

  /* ato I — azulejo */
  --a1-fundo:#122B44;
  --a1-cor:#C98A3B;
  --a1-alt:#7A2E2E;
  --a1-claro:#E8D8B8;

  /* ato II — blueprint */
  --a2-fundo:#0E2A47;
  --a2-cor:#E8622C;
  --a2-alt:#EDF2F7;
  --a2-claro:#7FB6E0;

  /* ato III — água */
  --a3-fundo:#161B3C;
  --a3-cor:#2E9DA8;
  --a3-alt:#6E4A9E;
  --a3-claro:#8CE0DA;

  --acento:var(--a3-cor);

  --disp:"Bodoni Moda", "Didot", "Times New Roman", serif;
  --corpo:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --dado:"IBM Plex Mono", ui-monospace, monospace;

  /* o botão da trilha é fixo no canto: esta é a faixa que ele reserva
     (0.9rem de afastamento + 2.2rem de botão). Quem chega perto do canto
     desconta isto do próprio respiro para não passar por baixo dele. */
  --canto-trilha:3.1rem;
}

*{box-sizing:border-box;margin:0;padding:0}

/* O atributo hidden vem do estilo do navegador e perde para qualquer
   display: do autor. Sem esta regra, .veu{display:grid} mantinha o véu
   de pausa/fim sempre na frente do jogo. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  background:var(--tinta);
  color:var(--papel);
  font-family:var(--corpo);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* fundo: constelação discreta sobre tinta */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(233,228,216,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 14%, rgba(233,228,216,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 78%, rgba(233,228,216,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 62%, rgba(233,228,216,.3) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 60% 40%, rgba(140,224,218,.5) 50%, transparent 51%),
    radial-gradient(900px 600px at 70% -10%, rgba(46,157,168,.10), transparent 60%);
}

.tela{display:none;position:relative;z-index:1;height:100dvh;overflow:auto}
.tela.ativa{display:flex;flex-direction:column}

/* ─────────────────── botões ─────────────────── */
.btn{
  font-family:var(--corpo);font-weight:600;font-size:.92rem;letter-spacing:.02em;
  padding:.72rem 1.35rem;border-radius:2px;border:1px solid var(--linha);
  background:transparent;color:var(--papel);cursor:pointer;transition:.18s;
}
.btn:hover{background:rgba(233,228,216,.08)}
.btn:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.btn-forte{background:var(--acento);border-color:var(--acento);color:#07131A}
.btn-forte:hover{filter:brightness(1.12);background:var(--acento)}
.btn-forte:disabled{opacity:.3;cursor:not-allowed}
.btn-fraco{color:var(--papel-fraco)}
.btn-voltar{padding:.5rem .9rem;font-size:.82rem}

/* ─────────────────── capa ─────────────────── */
.capa{margin:auto;max-width:760px;padding:3rem 1.5rem;text-align:center}
.eyebrow{
  font-family:var(--dado);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--papel-fraco);margin-bottom:1.6rem;
}
.titulo{
  font-family:var(--disp);font-weight:900;font-size:clamp(2.6rem,8vw,5.4rem);
  line-height:.93;letter-spacing:-.015em;
}
.titulo .e{font-style:italic;font-weight:400;color:var(--a3-cor)}
.regua{
  width:64px;height:2px;margin:2rem auto;
  background:linear-gradient(90deg,var(--a1-cor),var(--a2-cor),var(--a3-cor));
}
.atos-lista{list-style:none;display:grid;gap:.9rem;text-align:left;margin:2rem 0 2.4rem}
.ato-item{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;
  padding:.9rem 1.1rem;border-left:2px solid var(--cor);background:rgba(255,255,255,.025);
}
.ato-item .num{font-family:var(--dado);font-size:.7rem;color:var(--cor);letter-spacing:.15em}
.ato-item h3{font-family:var(--disp);font-size:1.15rem;font-weight:700}
.ato-item p{font-size:.83rem;color:var(--papel-fraco);margin-top:.15rem;line-height:1.5}
.ato-item .autor{font-family:var(--dado);font-size:.68rem;color:var(--cor);opacity:.8}
.acoes{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.rodape{margin-top:2.4rem;font-size:.76rem;color:var(--papel-fraco);line-height:1.6}
.aviso{opacity:.6;font-size:.72rem}

/* ─────────────────── barras ─────────────────── */
.barra{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.4rem;padding-right:calc(1.4rem + var(--canto-trilha));
  border-bottom:1px solid var(--linha);background:rgba(10,12,22,.7);
  backdrop-filter:blur(6px);position:sticky;top:0;z-index:5;
}
.barra h2{font-family:var(--disp);font-size:1.35rem;font-weight:700;flex:1}
.placar-topo{font-family:var(--dado);font-size:.78rem;color:var(--papel-fraco)}
.placar-topo span{color:var(--acento);font-weight:600}
.filtros{display:flex;gap:.35rem}
.filtro{
  font-family:var(--dado);font-size:.7rem;letter-spacing:.08em;padding:.4rem .7rem;
  border:1px solid var(--linha);background:transparent;color:var(--papel-fraco);cursor:pointer;
}
.filtro.on{background:var(--papel);color:var(--tinta);border-color:var(--papel)}

/* ─────────────────── avatares ─────────────────── */
.grade-avatares{
  flex:1;display:grid;gap:.7rem;padding:1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));align-content:start;
}
.card{
  position:relative;padding:1rem;border:1px solid var(--linha);background:rgba(255,255,255,.02);
  cursor:pointer;transition:.18s;text-align:left;color:inherit;font:inherit;overflow:hidden;
}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--c1)}
.card:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}
.card.sel{border-color:var(--c1);background:rgba(255,255,255,.08)}
.card .sigla{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--c1);color:#0A0C16;font-family:var(--dado);font-weight:600;font-size:.8rem;
}
.card h3{font-family:var(--disp);font-size:1.08rem;margin:.55rem 0 .15rem;line-height:1.15}
.card .papel{font-size:.74rem;color:var(--papel-fraco);line-height:1.4;min-height:2.6em}
.card .obra{font-family:var(--dado);font-size:.6rem;letter-spacing:.1em;color:var(--c1);text-transform:uppercase;margin-top:.5rem}

/* ─────────────────── a tira das cinco armas ─────────────────── */
.tira-armas{padding-bottom:.2rem}
.tira-armas h3{
  font-family:var(--dado);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--papel-fraco);margin-bottom:.45rem;
}
.tira-armas h3 small{text-transform:none;letter-spacing:0;opacity:.7;margin-left:.5rem}
.armas{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem}
.arma{
  flex:1 1 0;min-width:168px;text-align:left;cursor:pointer;transition:.18s;
  padding:.55rem .7rem;border:1px solid var(--linha);background:rgba(255,255,255,.025);
  color:var(--papel);font:inherit;
}
.arma:hover:not(:disabled){border-color:var(--acento);background:rgba(255,255,255,.06)}
.arma.sel{border-color:var(--acento);background:color-mix(in srgb,var(--acento) 16%,transparent)}
.arma.trancada{opacity:.4;cursor:not-allowed}
.arma-topo{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.arma-topo b{font-size:.86rem}
.arma-topo i{font-family:var(--dado);font-size:.7rem;font-style:normal;color:var(--acento)}
.arma small{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:.2rem;font-size:.66rem;line-height:1.4;color:var(--papel-fraco);
}
.armas-sem{font-size:.72rem;color:var(--a2-cor);line-height:1.5}

/* véspera do chefe: os dois níveis antes dele avisam que apertam */
.vespera-selo{
  font-family:var(--dado);font-style:normal;font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;margin-left:.5rem;padding:.1rem .34rem;vertical-align:middle;
  border:1px solid var(--a2-cor);color:var(--a2-cor);opacity:.85;
}
.estacao.vespera .no{box-shadow:0 0 0 3px rgba(232,98,44,.18)}
.nota.aperta{border-color:var(--a2-cor)}
.nota.aperta b{color:var(--a2-cor)}
@media (max-width:640px){.arma{min-width:150px}}

.barra-baixo{
  display:flex;flex-direction:column;gap:.7rem;padding:.9rem 1.4rem 1rem;
  border-top:1px solid var(--linha);background:rgba(10,12,22,.94);position:sticky;bottom:0;
  backdrop-filter:blur(6px);
}
.linha-baixo{display:flex;gap:1rem;align-items:center}
.detalhe{flex:1;font-size:.8rem;line-height:1.55;color:var(--papel-fraco)}
.detalhe.vazio{opacity:.5}
.detalhe b{color:var(--papel)}
.detalhe .hab{color:var(--acento)}
.atributos{display:flex;gap:.9rem;margin-top:.45rem;flex-wrap:wrap}
.atributo{font-family:var(--dado);font-size:.68rem;color:var(--papel-fraco)}
.atributo i{display:inline-block;width:52px;height:4px;background:rgba(255,255,255,.12);margin-left:.35rem;vertical-align:middle;position:relative}
.atributo i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--acento)}

/* ─────────────────── mapa-rio (assinatura) ─────────────────── */
.mapa-cont{flex:1;display:grid;grid-template-columns:1fr 340px;overflow:hidden}
.rio{position:relative;overflow-y:auto;padding:2.5rem 1rem 4rem}
.rio svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.estacoes{position:relative;display:grid;gap:0;max-width:640px;margin:0 auto}
.estacao{
  position:relative;display:flex;align-items:center;gap:1rem;padding:.55rem 0;
  background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.estacao .no{
  flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--c);background:var(--tinta);
  font-family:var(--dado);font-size:.82rem;font-weight:600;color:var(--c);transition:.2s;
}
.estacao.chefe .no{width:56px;height:56px;border-width:2px;transform:rotate(45deg);border-radius:4px}
.estacao.chefe .no span{transform:rotate(-45deg)}
.estacao:hover .no{background:var(--c);color:var(--tinta);box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 18%,transparent)}
.estacao.sel .no{background:var(--c);color:var(--tinta)}
.estacao.trancada{cursor:not-allowed}
.estacao.trancada .no{border-color:rgba(233,228,216,.18);color:rgba(233,228,216,.3)}
.estacao.trancada .txt{opacity:.32}
.estacao .txt strong{font-family:var(--disp);font-size:1rem;display:block;line-height:1.2}
.estacao .txt small{font-family:var(--dado);font-size:.65rem;color:var(--papel-fraco);letter-spacing:.06em}
.estacao .medalha{margin-left:auto;font-size:.9rem}
.estacao:nth-child(even){padding-left:3.5rem}
.estacao:nth-child(3n){padding-left:1.8rem}

.selo-ato{
  margin:2.2rem 0 .8rem;padding-left:.2rem;
  font-family:var(--dado);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c);
  border-top:1px solid var(--linha);padding-top:1rem;
}

.painel-nivel{
  border-left:1px solid var(--linha);padding:1.6rem;overflow-y:auto;background:rgba(255,255,255,.02);
}
.painel-nivel .vazio{color:var(--papel-fraco);opacity:.5;font-size:.85rem}
.painel-nivel .selo{font-family:var(--dado);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.painel-nivel h3{font-family:var(--disp);font-size:1.5rem;margin:.5rem 0 .2rem;line-height:1.15}
.painel-nivel .local{font-size:.78rem;color:var(--papel-fraco);font-style:italic;margin-bottom:1rem}
.painel-nivel p.sin{font-size:.88rem;line-height:1.65;margin-bottom:1rem}
.nota{
  border-left:2px solid var(--c);padding:.6rem 0 .6rem .8rem;font-size:.76rem;
  color:var(--papel-fraco);line-height:1.55;margin-bottom:1rem;
}
.nota b{color:var(--c);font-family:var(--dado);font-size:.62rem;letter-spacing:.12em;display:block;margin-bottom:.25rem;text-transform:uppercase}
.objetivo{font-family:var(--dado);font-size:.76rem;color:var(--papel);background:rgba(255,255,255,.05);padding:.7rem;margin-bottom:1rem}
.painel-nivel .btn{width:100%}

/* ─────────────────── briefing ─────────────────── */
.briefing{margin:auto;max-width:640px;padding:2rem 1.5rem;text-align:center}
.briefing .selo{font-family:var(--dado);font-size:.68rem;letter-spacing:.2em;color:var(--c);text-transform:uppercase}
.briefing h2{font-family:var(--disp);font-size:clamp(1.8rem,5vw,2.8rem);margin:.6rem 0}
.briefing .local{font-style:italic;color:var(--papel-fraco);margin-bottom:1.4rem}
.briefing p.sin{line-height:1.75;font-size:1rem;margin-bottom:1.4rem}
.briefing .chefe-card{border:1px solid var(--c);padding:1.1rem;margin-bottom:1.4rem;text-align:left}
.briefing .chefe-card h4{font-family:var(--disp);font-size:1.25rem;color:var(--c)}
.briefing .chefe-card .tit{font-family:var(--dado);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--papel-fraco);margin-bottom:.5rem}
.briefing .chefe-card p{font-size:.82rem;line-height:1.6;color:var(--papel-fraco)}
.briefing .chefe-card .fraq{margin-top:.6rem;font-size:.8rem;color:var(--papel)}

/* ─────────────────── partida ─────────────────── */
#tela-jogo{align-items:center;justify-content:center;padding:1rem}
.palco{position:relative;width:min(100%,1100px);aspect-ratio:16/9;max-height:85dvh}
canvas{width:100%;height:100%;display:block;background:#080B14;border:1px solid var(--linha)}

.hud{position:absolute;inset:0;pointer-events:none;padding:.9rem 1.1rem;font-family:var(--dado)}
.hud-esq{position:absolute;top:.9rem;left:1.1rem}
.hud-avatar{display:flex;gap:.6rem;align-items:center}
.hud-avatar .sigla{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:var(--c1,#fff);color:#0A0C16;font-weight:600;font-size:.72rem;
}
.hud-avatar strong{font-family:var(--corpo);font-size:.85rem;display:block}
.barra-vida{width:170px;height:7px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.22);margin-top:.25rem}
.barra-vida i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#4FD18B,#8CE0C0);transition:width .12s}
.barra-vida i.baixa{background:linear-gradient(90deg,#E8622C,#F2A05B)}
.hud-metas{display:flex;gap:.8rem;margin-top:.55rem;font-size:.72rem;color:rgba(233,228,216,.8)}
.hud-metas span.ok{color:#8CE0C0}

.hud-dir{position:absolute;top:.9rem;right:1.1rem;text-align:right}
.pontos b{font-size:1.5rem;display:block;line-height:1}
.pontos small{font-size:.6rem;letter-spacing:.16em;color:var(--papel-fraco);text-transform:uppercase}
.combo{font-size:.8rem;color:var(--a2-cor);margin-top:.3rem;min-height:1.2em;font-weight:600}

.hud-chefe{position:absolute;top:.9rem;left:50%;transform:translateX(-50%);width:min(480px,60%)}
.chefe-nome{display:flex;justify-content:space-between;font-size:.72rem;margin-bottom:.25rem}
.chefe-nome b{font-family:var(--disp);font-size:.95rem;letter-spacing:.02em}
.chefe-nome span{color:var(--papel-fraco)}
.barra-chefe{height:9px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.28)}
.barra-chefe i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#7A2E2E,#E8622C);transition:width .15s}

.hud-hab{position:absolute;bottom:1rem;right:1.1rem;text-align:center;width:64px}
.anel{width:44px;height:44px;transform:rotate(-90deg)}
.anel circle{fill:rgba(0,0,0,.4);stroke:rgba(255,255,255,.16);stroke-width:3}
.anel #anel-hab{fill:none;stroke:var(--acento);stroke-dasharray:119.4;stroke-dashoffset:0;transition:stroke-dashoffset .1s}
.hud-hab #hab-tecla{
  position:absolute;top:12px;left:0;right:0;font-size:.75rem;font-weight:600;color:var(--papel);
}
.hud-hab small{display:block;font-size:.58rem;color:var(--papel-fraco);margin-top:.2rem;line-height:1.2}

.fala{
  position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);
  max-width:74%;padding:.7rem 1.1rem;background:rgba(8,11,20,.92);border-left:3px solid var(--c,#E8622C);
  font-family:var(--corpo);font-size:.86rem;font-style:italic;line-height:1.5;
}
.fala b{display:block;font-style:normal;font-family:var(--dado);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c,#E8622C);margin-bottom:.25rem}

.veu{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,11,20,.9);backdrop-filter:blur(3px);z-index:9}
.caixa{max-width:520px;padding:2rem;text-align:center}
.caixa h3{font-family:var(--disp);font-size:2rem;margin-bottom:.6rem}
.caixa p{color:var(--papel-fraco);font-size:.9rem;line-height:1.65;margin-bottom:1.2rem}
.caixa .acoes{margin-top:1.2rem}
.placar-fim{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:.6rem;margin:1.2rem 0;font-family:var(--dado)}
.placar-fim div{padding:.6rem;background:rgba(255,255,255,.05)}
.placar-fim b{display:block;font-size:1.2rem}
.placar-fim small{font-size:.58rem;letter-spacing:.12em;color:var(--papel-fraco);text-transform:uppercase}
.medalha-fim{font-size:2.4rem}
.recorde{color:var(--a2-cor);font-family:var(--dado);font-size:.72rem;letter-spacing:.1em}

.dica-teclado{margin-top:.8rem;font-family:var(--dado);font-size:.68rem;color:var(--papel-fraco);text-align:center}

/* toque (mobile) */
.toque{display:none;position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none}
.joy{
  position:absolute;left:4%;bottom:12%;width:112px;height:112px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.3);pointer-events:auto;touch-action:none;
}
.joy i{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(233,228,216,.5)}
.botoes{position:absolute;right:4%;bottom:10%;display:flex;gap:.6rem;pointer-events:auto}
.bt-toque{
  width:78px;height:78px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.35);color:var(--papel);font-family:var(--dado);font-size:.68rem;
  letter-spacing:.08em;touch-action:none;
}
.bt-toque.forte{background:color-mix(in srgb,var(--acento) 40%,transparent);border-color:var(--acento)}

@media (hover:none) and (pointer:coarse){
  .toque{display:block}
  .dica-teclado{display:none}
}
@media (max-width:900px){
  .mapa-cont{grid-template-columns:1fr}
  .painel-nivel{position:fixed;inset:auto 0 0 0;max-height:60dvh;border-left:0;border-top:1px solid var(--linha);background:var(--tinta-2);z-index:20;transform:translateY(101%);transition:.25s}
  .painel-nivel.aberto{transform:none}
  .hud-metas{font-size:.62rem;gap:.5rem}
  .barra-vida{width:120px}
}
/* O palco tem no máximo 1100px: abaixo disto ele encosta na borda e os
   pontos do HUD passariam por baixo do botão da trilha. */
@media (max-width:1200px){
  .hud-dir{right:calc(1.1rem + var(--canto-trilha))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ─────────────── retratos e avisos (correções) ─────────────── */
.retrato{display:block;border-radius:50%;overflow:hidden}
.card .retrato{margin-bottom:.2rem}
.detalhe{display:flex;gap:.9rem;align-items:flex-start}
.retrato-grande{flex:none}
.txt-det{flex:1}
.hud-avatar .sigla{background:transparent!important;padding:0;overflow:hidden}
.hud-avatar .sigla .retrato{width:34px;height:34px}
.briefing .quem{display:flex;align-items:center;gap:.8rem;justify-content:center;margin-bottom:1.2rem}
.briefing .quem div{text-align:left}
.briefing .quem strong{font-family:var(--disp);font-size:1.2rem;display:block}
.briefing .quem small{font-size:.75rem;color:var(--papel-fraco)}
.painel-nivel .quem{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}

.alerta{
  position:fixed;inset:0;z-index:999;display:grid;place-content:center;
  background:var(--tinta);padding:2rem;text-align:center;max-width:none;
  font-size:.95rem;line-height:1.7;color:var(--papel);
}
.alerta b{display:block;font-family:var(--disp);font-size:1.6rem;margin-bottom:.8rem;color:var(--a2-cor)}
.alerta code{font-family:var(--dado);background:rgba(255,255,255,.1);padding:.15rem .4rem;font-size:.85em}

/* ─────────────── conversa com o guia e perguntas do livro ─────────────── */
.balao{
  position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);
  max-width:80%;display:flex;gap:.8rem;align-items:flex-start;
  padding:.8rem 1.1rem;background:rgba(8,11,20,.94);border-left:3px solid var(--c,#2E9DA8);
  font-family:var(--corpo);z-index:8;
}
.balao .retrato{flex:none;width:48px;height:48px}
.balao b{display:block;font-family:var(--dado);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c,#2E9DA8);margin-bottom:.25rem}
.balao p{font-size:.88rem;line-height:1.5;font-style:italic}
.balao small{display:block;margin-top:.35rem;font-family:var(--dado);font-size:.6rem;color:var(--papel-fraco)}

.caixa-quiz{max-width:620px;width:92%;padding:1.8rem;text-align:left}
.caixa-quiz .obra{font-family:var(--dado);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acento)}
.caixa-quiz h3{font-family:var(--disp);font-size:1.5rem;margin:.6rem 0 1.2rem;line-height:1.3}
.opcoes{display:grid;gap:.5rem}
.opcao{
  display:flex;gap:.7rem;align-items:center;text-align:left;width:100%;
  padding:.75rem .9rem;border:1px solid var(--linha);background:rgba(255,255,255,.03);
  color:var(--papel);font:inherit;font-size:.9rem;cursor:pointer;transition:.15s;
}
.opcao:hover:not(:disabled){background:rgba(255,255,255,.09);border-color:var(--acento)}
.opcao:disabled{cursor:default}
.opcao .tecla{font-family:var(--dado);font-size:.7rem;color:var(--papel-fraco);
  border:1px solid var(--linha);padding:.1rem .4rem;flex:none}
.opcao.certa{border-color:#4FD18B;background:rgba(79,209,139,.14)}
.opcao.errada{border-color:#E8622C;background:rgba(232,98,44,.14)}
.explica{margin-top:1.1rem;padding:.9rem 1rem;border-left:3px solid var(--acento);
  background:rgba(255,255,255,.04);font-size:.85rem;line-height:1.6}
.explica b{display:block;font-family:var(--dado);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:.35rem}
.explica.ok b{color:#4FD18B} .explica.nao b{color:#E8622C}
.caixa-quiz .btn{margin-top:1.1rem;width:100%}
.selo-leitura{font-family:var(--dado);font-size:.72rem;letter-spacing:.1em;color:#4FD18B}

/* ───────────────────────── trilha ───────────────────────── */
.bt-som{
  position:fixed;top:.9rem;right:.9rem;z-index:90;
  width:2.2rem;height:2.2rem;line-height:1;
  display:grid;place-items:center;
  border:1px solid var(--linha);background:rgba(10,12,22,.62);
  color:var(--trilha-cor,var(--acento));font-size:1rem;cursor:pointer;
  backdrop-filter:blur(6px);transition:.2s;
}
.bt-som:hover{border-color:var(--trilha-cor,var(--acento));background:rgba(10,12,22,.9)}
.bt-som.mudo{color:var(--papel-fraco);opacity:.55}
@media (max-width:640px){.bt-som{top:.5rem;right:.5rem}}

/* canto da trilha: nome da faixa + botão de som */
.trilha-canto{
  position:fixed;top:.9rem;right:.9rem;z-index:90;
  /* column-reverse: o botão fica em cima e o nome da faixa aparece por baixo
     dele — passando na frente do conteúdo, nunca dos controles do topo. */
  display:flex;flex-direction:column-reverse;align-items:flex-end;gap:.4rem;pointer-events:none;
}
.trilha-canto .bt-som{position:static;pointer-events:auto}
.faixa-nome{
  font-family:var(--dado);font-size:.66rem;letter-spacing:.08em;
  color:var(--trilha-cor,var(--acento));
  background:rgba(10,12,22,.72);border:1px solid var(--linha);
  padding:.32rem .6rem;white-space:nowrap;backdrop-filter:blur(6px);
  opacity:0;transform:translateX(.6rem);transition:opacity .5s,transform .5s;
}
.faixa-nome.vendo{opacity:1;transform:none}
@media (max-width:640px){
  :root{--canto-trilha:2.7rem}
  .trilha-canto{top:.5rem;right:.5rem}
  .faixa-nome{max-width:42vw;overflow:hidden;text-overflow:ellipsis}
}

/* ─────────────────── portão: entrar ou criar conta ─────────────────── */
.portao{margin:auto;max-width:440px;padding:3rem 1.5rem;text-align:center;width:100%}
.abas{display:flex;gap:0;margin:2rem 0 1.6rem;border:1px solid var(--linha)}
.aba{
  flex:1;font-family:var(--dado);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.7rem .5rem;border:0;background:transparent;color:var(--papel-fraco);cursor:pointer;transition:.18s;
}
.aba:hover{background:rgba(233,228,216,.06);color:var(--papel)}
.aba.on{background:var(--papel);color:var(--tinta);font-weight:600}
.form-conta{display:grid;gap:.4rem;text-align:left}
.form-conta label{
  font-family:var(--dado);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--papel-fraco);margin-top:.7rem;
}
.form-conta input{
  font-family:var(--corpo);font-size:.95rem;padding:.75rem .85rem;
  border:1px solid var(--linha);background:rgba(255,255,255,.04);color:var(--papel);
}
.form-conta input:focus{outline:none;border-color:var(--acento);background:rgba(255,255,255,.07)}
.form-conta input::placeholder{color:var(--papel-fraco);opacity:.45}
.form-conta .btn{margin-top:1.3rem}
.recado{
  margin-top:.9rem;padding:.6rem .75rem;font-size:.8rem;line-height:1.5;
  border-left:3px solid #E8622C;background:rgba(232,98,44,.12);
}
.recado.ok{border-left-color:#4FD18B;background:rgba(79,209,139,.12)}
.quem-entrou{margin-top:1.6rem;font-family:var(--dado);font-size:.72rem;color:var(--papel-fraco)}
.quem-entrou b{color:var(--acento)}
.link{
  font:inherit;color:var(--papel-fraco);background:none;border:0;padding:0;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.link:hover{color:var(--papel)}
.btn-mini{padding:.3rem .7rem;font-size:.7rem;margin-left:.8rem;vertical-align:middle}

/* ─────────────────── ranking ─────────────────── */
.ranking-cont{flex:1;overflow:auto;padding:1.6rem 1.4rem 3rem;max-width:760px;margin:0 auto;width:100%}
.ranking{list-style:none;display:grid;gap:.35rem}
.ranking li{
  display:grid;grid-template-columns:2.6rem 1fr auto;gap:.9rem;align-items:center;
  padding:.7rem .9rem;border:1px solid var(--linha);background:rgba(255,255,255,.025);
}
.ranking li.voce{border-color:var(--acento);background:rgba(255,255,255,.07)}
.ranking .pos{font-family:var(--disp);font-size:1.3rem;color:var(--papel-fraco);text-align:right}
.ranking li:nth-child(1) .pos{color:#E3C05A}
.ranking li:nth-child(2) .pos{color:#C9CBD1}
.ranking li:nth-child(3) .pos{color:#C08A5E}
.ranking .nome{font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranking .feito{font-family:var(--dado);font-size:.68rem;color:var(--papel-fraco);margin-top:.15rem}
.ranking .pts{font-family:var(--dado);font-size:.95rem;color:var(--acento);font-weight:600;text-align:right}
.ranking .pts small{display:block;font-size:.6rem;letter-spacing:.14em;color:var(--papel-fraco);text-transform:uppercase}
.ranking-eu{margin-top:1.2rem;font-family:var(--dado);font-size:.75rem;color:var(--papel-fraco);text-align:center}
.ranking .carregando{
  display:block;text-align:center;padding:2rem;color:var(--papel-fraco);
  font-size:.85rem;border:1px dashed var(--linha);background:none;
}