/* ==================================================================
 * temas.css — Padrão · Steampunk · Cyberpunk
 *
 * Valem para o shell (HOME) e para o modo Resistência. A tela do
 * Lobisomem tem paleta própria e NÃO participa: é decisão de produto,
 * não acidente.
 *
 * Por isso toda variável de tema é prefixada com `--t-`. O style.css do
 * Lobisomem define `--bg`, `--panel`, `--ink` e companhia em `:root`; se
 * os temas usassem os mesmos nomes, bastaria a ordem das folhas mudar
 * para a vila medieval ficar ciberpunk. Com prefixo, o vazamento é
 * impossível — não depende de escopo nem de ordem.
 * ================================================================== */

:root,
body[data-tema=""] {
  --t-bg:#060a10; --t-panel:#0b1420; --t-panel2:#0e1a2a; --t-controle:#0a111c;
  --t-linha:#1c2c40;
  --t-res:#2b6fb8; --t-res-vivo:#3f8fe0; --t-esp:#c0272d; --t-esp-vivo:#e04a3f;
  --t-texto:#dfe8f2; --t-mudo:#7b8ba0;
  --t-fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --t-fonte-titulo:var(--t-fonte);
  --t-radius:10px;
  --t-borda:1px solid var(--t-linha);
  --t-sombra:none;
  --t-textura:repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
  --t-brilho:radial-gradient(1200px 500px at 85% -10%, rgba(43,111,184,.14), transparent 60%),
             radial-gradient(900px 420px at 0% 108%, rgba(192,39,45,.12), transparent 60%);
}

body[data-tema="steampunk"] {
  --t-bg:#14100b; --t-panel:#1d1710; --t-panel2:#241c12; --t-controle:#171209;
  --t-linha:#3d3221;
  --t-res:#2e8c8c; --t-res-vivo:#45b3ae; --t-esp:#b33a2b; --t-esp-vivo:#d4593f;
  --t-texto:#e8ddc6; --t-mudo:#94886f;
  --t-fonte:Georgia,"Times New Roman",serif;
  --t-fonte-titulo:Georgia,"Times New Roman",serif;
  --t-radius:6px;
  --t-borda:2px solid #4a3b22;
  --t-sombra:inset 0 0 0 1px rgba(201,151,62,.22), inset 0 0 22px rgba(0,0,0,.45);
  --t-textura:repeating-linear-gradient(45deg, transparent 0 14px, rgba(201,151,62,.025) 14px 15px);
  --t-brilho:radial-gradient(800px 460px at 50% -12%, rgba(201,151,62,.10), transparent 60%),
             radial-gradient(600px 380px at 90% 112%, rgba(46,140,140,.07), transparent 60%);
}

body[data-tema="cyberpunk"] {
  --t-bg:#0a0a14; --t-panel:#10101e; --t-panel2:#131327; --t-controle:#0c0c18;
  --t-linha:#2a2a4a;
  --t-res:#00b8cc; --t-res-vivo:#00e5ff; --t-esp:#cc2470; --t-esp-vivo:#ff2e88;
  --t-texto:#e6f6ff; --t-mudo:#7a7fa8;
  --t-fonte:Consolas,"Courier New",monospace;
  --t-fonte-titulo:Consolas,"Courier New",monospace;
  --t-radius:4px;
  --t-borda:1px solid #2a2a4a;
  --t-sombra:0 0 14px rgba(0,229,255,.08), inset 0 0 20px rgba(107,47,214,.08);
  --t-textura:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,229,255,.02) 2px 3px);
  --t-brilho:radial-gradient(900px 480px at 85% -10%, rgba(255,46,136,.12), transparent 60%),
             radial-gradient(700px 420px at 0% 112%, rgba(0,229,255,.10), transparent 60%);
}

/* As telas tematizadas. O Lobisomem não tem `.tema` e segue intocado. */
.tela.tema{
  background:var(--t-textura), var(--t-brilho), var(--t-bg);
  color:var(--t-texto);
  font-family:var(--t-fonte);
}
.tela.tema h1,.tela.tema h2,.tela.tema h3{font-family:var(--t-fonte-titulo)}

/* ================= HOME ================= */
.h-topo{padding:calc(26px + var(--topo)) 22px 8px; text-align:center}
.h-marca{
  display:flex; align-items:center; justify-content:center; gap:11px; margin-bottom:6px;
}
.h-marca img{width:38px; height:38px; display:block}
.h-nome{font:600 25px/1.1 var(--t-fonte-titulo); letter-spacing:1.4px; color:var(--t-texto)}
.h-sub{font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--t-mudo)}

.h-body{flex:1; overflow-y:auto; padding:18px 20px 8px; display:flex; flex-direction:column; gap:12px}
.h-lbl{
  font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--t-mudo);
  margin-bottom:2px;
}

.h-jogo{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--t-panel); border:var(--t-borda); box-shadow:var(--t-sombra);
  border-radius:var(--t-radius); padding:16px 15px; color:var(--t-texto);
  transition:.14s;
}
.h-jogo:active{background:var(--t-panel2)}
.h-jogo .h-icone{
  flex:0 0 46px; width:46px; height:46px; border-radius:var(--t-radius);
  display:grid; place-items:center; background:var(--t-controle); border:1px solid var(--t-linha);
}
.h-jogo .h-icone img{width:30px; height:30px; display:block}
.h-jogo-txt{flex:1; min-width:0}
.h-jogo-txt b{display:block; font:600 17px/1.2 var(--t-fonte-titulo); margin-bottom:3px}
.h-jogo-txt span{display:block; font-size:11.5px; color:var(--t-mudo); line-height:1.45}
.h-jogo .h-seta{color:var(--t-mudo); font-size:18px}
.h-jogo .h-ultimo{
  font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--t-res-vivo);
  border:1px solid var(--t-res); border-radius:999px; padding:2px 7px; margin-top:6px;
  display:inline-block;
}

/* Idioma e tema — dois <select> no topo do setup, não uma fileira de
   botões: são escolhas de "configurar uma vez", não algo a comparar
   lado a lado, e um combo ocupa uma linha em vez de três blocos. */
.r-topobar{display:flex; gap:8px; padding:12px 20px 0}
.r-topobar select{
  flex:1; min-width:0; background:var(--t-controle); border:var(--t-borda);
  color:var(--t-texto); border-radius:var(--t-radius); padding:9px 10px;
  font:inherit; font-size:12.5px;
  -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--t-mudo) 50%),
                    linear-gradient(135deg, var(--t-mudo) 50%, transparent 50%);
  background-position:calc(100% - 16px) center, calc(100% - 11px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:26px;
}
.r-topobar select:focus{outline:1px solid var(--t-res-vivo); outline-offset:1px}

.h-foot{
  padding:12px 22px calc(20px + var(--base)); text-align:center;
  border-top:1px solid var(--t-linha);
}
.h-foot p{font-size:10.5px; color:var(--t-mudo); line-height:1.6}

/* ================= barra "‹ Jogos" ================= */
.voltar-jogos{
  background:none; border:0; color:var(--t-mudo); font:inherit; font-size:12px;
  padding:8px 10px 8px 0; text-align:left;
}
.tela:not(.tema) .voltar-jogos{color:var(--dim)}
.voltar-jogos.armado{color:var(--err)}