/* =====================================================================
   OS TEMAS DO PAINEL (03/10/2026)
   O dono: "no Overpower opcao de tema, e no PRO opcao de tema claro e escuro" e "temas desbloqueados conforme o
   avanco na Jornada". Quem pode o que: saas/temas.py. A escolha: static/cedo.js (antes da primeira pintura).
   Funciona porque as cores fixas das folhas viraram FICHAS (lote 122): o "branco por cima do escuro" de fundos e
   bordas e rgba(var(--tinta-rgb), a); os cinzas escuros de fundo sao var(--fundo|--painel...); o ouro e a brasa do
   Overpower sao var(--op-ouro-rgb) e var(--op-brasa-rgb). Esta folha carrega depois de todas: so troca fichas e
   acerta o que o claro pede. Nada aqui anima.
   ===================================================================== */

/* ------------------------------------------------------------------ O CLARO (PRO e Overpower) */
html.tema-claro {
  color-scheme: light;
  --tinta-rgb: 40, 36, 32;
  --fundo: #f3f2ef;
  --fundo-2: #ecebe7;
  --painel: #ffffff;
  --painel-2: #f6f5f2;
  --painel-3: #eeede9;
  --linha: #e2dfd9;
  --linha-viva: #cdc8c0;
  --texto: #1c1b19;
  --fraco: #625e58;
  /* lote 265: era #8a857e (3,7:1 no branco, a cor dos rotulos miudos); #77726b da 4,8:1 */
  --fraco-2: #77726b;
  /* lote 265: a borda transparente do cartao (app.css) precisa de mais tinta no branco para dar a mesma linha */
  --borda-do-cartao: rgba(var(--tinta-rgb), .14);
  --vermelho: #d81b3a;
  --vermelho-claro: #c0142f;
  --vermelho-escuro: #9e0f25;
  --coral: #cf2e48;
  --osso: #2b2824;
  --prata: #6d6359;
  --ok: #0e9a60;
  --atencao: #b5730a;
  scrollbar-color: #c9c4bc #f3f2ef;
}
html.tema-claro body { background: var(--fundo); color: var(--texto); }
html.tema-claro ::selection { background: rgba(216, 27, 58, .18); color: var(--texto); }
/* o trilho e a barra do topo: claros, com a linha discreta */
html.tema-claro .trilho, html.tema-claro .comando, html.tema-claro .barra-de-baixo { background: var(--painel); border-color: var(--linha); }
/* sombras pretas fortes do escuro viram sombras macias */
html.tema-claro .cartao, html.tema-claro .numero { box-shadow: 0 1px 2px rgba(28, 24, 20, .05), 0 8px 24px rgba(28, 24, 20, .05); }

/* as cores de TEXTO claras e coloridas (ouro, verde, rosa) viraram var(--ct-<hex>, #<hex>) nas folhas: no escuro
   vale a propria cor; aqui, a mesma cor escurecida para ler no branco (gerado pelo textos_claros.py) */
html.tema-claro {
  --ct-3ddc97: #1f9864;
  --ct-5ec8ff: #0577b3;
  --ct-c69cff: #4f05b3;
  --ct-ccffee: #05b379;
  --ct-cfe0ff: #0542b3;
  --ct-e0a33a: #815b18;
  --ct-e8f0ff: #0541b3;
  --ct-f0596b: #a51324;
  --ct-f5b83d: #8e630b;
  --ct-f5c56a: #8c600d;
  --ct-f7d27a: #8d670c;
  --ct-ff4d6a: #b30521;
  --ct-ff6b7d: #b3051a;
  --ct-ffd84d: #957504;
  --ct-ffd98a: #956604;
  --ct-ffe2a0: #956904;
  --ct-ffe9b0: #956d04;
  --ct-fff1c2: #957404;
  --ct-fff3d6: #956b04;
}
/* o aviso flutuante: cartao claro, com a cor do tom so de leve */
html.tema-claro .aviso-flutuante { background: linear-gradient(135deg, color-mix(in srgb, var(--tom) 10%, var(--painel)), var(--painel) 55%);
  box-shadow: 0 16px 40px rgba(28, 24, 20, .16), 0 0 0 1px var(--linha); }
/* as transformacoes da Jornada: a cor viva e para o escuro; no claro vai a cor funda (--cor-t2) */
html.tema-claro .selo-da-transformacao:not(.transformacao-ssj):not(.transformacao-ssj2):not(.transformacao-ssj3):not(.transformacao-deus):not(.transformacao-blue):not(.transformacao-destruicao),
html.tema-claro .titulo-colorido,
html.tema-claro .jornada-heroi[class*="transformacao-"] .miolo-do-anel b,
html.tema-claro .atalho-da-jornada[class*="transformacao-"] .nivel-redondo b { color: var(--cor-t2); }
/* o avatar VIP: o miolo vira o painel claro, a letra vai em ouro escuro */
html.tema-claro .avatar.vip { color: #7a5300; }
/* o "+X de poder no mes" e o assunto marcado no Garimpo (branco sobre um tom claro) */
html.tema-claro .poder-do-mes { color: var(--ok); }
html.tema-claro .ficha-de-assunto input:checked + span { color: var(--texto); }
/* rotulos cinza-claros fixos de Resultados */
html.tema-claro body.v3 .o-mes .rotulo, html.tema-claro body.v3 .o-mes .variacao.nova { color: var(--fraco); }
/* Resultados: o numero grande do mes era branco */
html.tema-claro body.v3 .o-mes .mes-numero strong { color: var(--texto); }

/* ------------------------------------------------------------------ AS CORES DO OVERPOWER (a Jornada libera)
   Cada uma troca o ouro, a brasa e o tom dos paineis; o resto do Overpower (HUD, marca, brilhos) segue igual. */
html.tema-overpower.cor-saiyajin {
  --op-ouro: #ff7a45; --op-ouro-rgb: 255, 122, 69; --op-ouro-vivo: #ff9561; --op-ouro-vivo-rgb: 255, 149, 97;
  --op-ouro-claro: #ffd2b8; --op-ouro-claro-rgb: 255, 210, 184; --op-ouro-escuro: #d9481c; --op-ouro-escuro-rgb: 217, 72, 28;
  --op-tinta-no-ouro: #2a0e04; --op-brasa: #e0203f; --op-brasa-rgb: 224, 32, 63; --op-texto-ouro: #ffd9c4;
  --fundo: #080404; --fundo-2: #0e0605; --painel: #150a08; --painel-2: #1d0e0b; --painel-3: #26130f;
  --linha: #2e1712; --linha-viva: #4d2419; --prata: #f0b9a3;
}
html.tema-overpower.cor-dourado {
  --op-ouro: #ffd84d; --op-ouro-rgb: 255, 216, 77; --op-ouro-vivo: #ffe680; --op-ouro-vivo-rgb: 255, 230, 128;
  --op-ouro-claro: #fff6c9; --op-ouro-claro-rgb: 255, 246, 201; --op-ouro-escuro: #e0a800; --op-ouro-escuro-rgb: 224, 168, 0;
  --op-tinta-no-ouro: #2a2000; --op-brasa: #f59e0b; --op-brasa-rgb: 245, 158, 11; --op-texto-ouro: #fff0b8;
  --fundo: #080703; --fundo-2: #0d0b04; --painel: #141107; --painel-2: #1b170a; --painel-3: #241e0d;
  --linha: #2c250f; --linha-viva: #4d4116; --prata: #f1dd8f;
}
html.tema-overpower.cor-relampago {
  --op-ouro: #6cc4ff; --op-ouro-rgb: 108, 196, 255; --op-ouro-vivo: #8fd3ff; --op-ouro-vivo-rgb: 143, 211, 255;
  --op-ouro-claro: #d6efff; --op-ouro-claro-rgb: 214, 239, 255; --op-ouro-escuro: #2b8fe0; --op-ouro-escuro-rgb: 43, 143, 224;
  --op-tinta-no-ouro: #03121f; --op-brasa: #ffd23f; --op-brasa-rgb: 255, 210, 63; --op-texto-ouro: #cfe9ff;
  --fundo: #04060a; --fundo-2: #070a10; --painel: #0b111a; --painel-2: #0f1724; --painel-3: #141e2e;
  --linha: #1a2638; --linha-viva: #2a3d5a; --prata: #a9cdee;
}
html.tema-overpower.cor-deus {
  --op-ouro: #ff5c7a; --op-ouro-rgb: 255, 92, 122; --op-ouro-vivo: #ff7d95; --op-ouro-vivo-rgb: 255, 125, 149;
  --op-ouro-claro: #ffd1db; --op-ouro-claro-rgb: 255, 209, 219; --op-ouro-escuro: #c81e4a; --op-ouro-escuro-rgb: 200, 30, 74;
  --op-tinta-no-ouro: #2a0410; --op-brasa: #be123c; --op-brasa-rgb: 190, 18, 60; --op-texto-ouro: #ffd6df;
  --fundo: #090306; --fundo-2: #0e0409; --painel: #16070d; --painel-2: #1e0a12; --painel-3: #280e18;
  --linha: #30111d; --linha-viva: #521d31; --prata: #f2a9bb;
}
html.tema-overpower.cor-blue {
  --op-ouro: #5ee3f5; --op-ouro-rgb: 94, 227, 245; --op-ouro-vivo: #8aeefb; --op-ouro-vivo-rgb: 138, 238, 251;
  --op-ouro-claro: #d3fbff; --op-ouro-claro-rgb: 211, 251, 255; --op-ouro-escuro: #0ea5c6; --op-ouro-escuro-rgb: 14, 165, 198;
  --op-tinta-no-ouro: #02161b; --op-brasa: #0284c7; --op-brasa-rgb: 2, 132, 199; --op-texto-ouro: #c9f7fd;
  --fundo: #03070a; --fundo-2: #050c10; --painel: #081419; --painel-2: #0b1b22; --painel-3: #0f242d;
  --linha: #122c36; --linha-viva: #1e4a59; --prata: #9fe0ec;
}
html.tema-overpower.cor-hakai {
  --op-ouro: #b48bff; --op-ouro-rgb: 180, 139, 255; --op-ouro-vivo: #c7a6ff; --op-ouro-vivo-rgb: 199, 166, 255;
  --op-ouro-claro: #ebdfff; --op-ouro-claro-rgb: 235, 223, 255; --op-ouro-escuro: #7c3aed; --op-ouro-escuro-rgb: 124, 58, 237;
  --op-tinta-no-ouro: #14062b; --op-brasa: #6d28d9; --op-brasa-rgb: 109, 40, 217; --op-texto-ouro: #e2d4ff;
  --fundo: #06040a; --fundo-2: #0a0610; --painel: #110a1a; --painel-2: #170e24; --painel-3: #1e122f;
  --linha: #241638; --linha-viva: #3d2560; --prata: #cdb7f5;
}
/* lote 159: Namekusei (nivel 5), Majin (nivel 16), Shenlong (por conquista) e o Instinto Superior (so o dono) */
html.tema-overpower.cor-namek {
  --op-ouro: #4ade80; --op-ouro-rgb: 74, 222, 128; --op-ouro-vivo: #7bea9f; --op-ouro-vivo-rgb: 123, 234, 159;
  --op-ouro-claro: #d3f9df; --op-ouro-claro-rgb: 211, 249, 223; --op-ouro-escuro: #16a34a; --op-ouro-escuro-rgb: 22, 163, 74;
  --op-tinta-no-ouro: #03200e; --op-brasa: #0d9488; --op-brasa-rgb: 13, 148, 136; --op-texto-ouro: #c9f5d8;
  --fundo: #030805; --fundo-2: #050d08; --painel: #08150d; --painel-2: #0c1d12; --painel-3: #102718;
  --linha: #142f1d; --linha-viva: #235234; --prata: #a3e0b8;
}
html.tema-overpower.cor-majin {
  --op-ouro: #ff7ac8; --op-ouro-rgb: 255, 122, 200; --op-ouro-vivo: #ff9bd6; --op-ouro-vivo-rgb: 255, 155, 214;
  --op-ouro-claro: #ffdcf0; --op-ouro-claro-rgb: 255, 220, 240; --op-ouro-escuro: #db2e8f; --op-ouro-escuro-rgb: 219, 46, 143;
  --op-tinta-no-ouro: #2a0419; --op-brasa: #a21caf; --op-brasa-rgb: 162, 28, 175; --op-texto-ouro: #ffd3ec;
  --fundo: #090308; --fundo-2: #0e050c; --painel: #160813; --painel-2: #1e0b1a; --painel-3: #280f22;
  --linha: #30122a; --linha-viva: #521f47; --prata: #f0a9d6;
}
html.tema-overpower.cor-shenlong {
  --op-ouro: #2dd4bf; --op-ouro-rgb: 45, 212, 191; --op-ouro-vivo: #5eead4; --op-ouro-vivo-rgb: 94, 234, 212;
  --op-ouro-claro: #ccfbf1; --op-ouro-claro-rgb: 204, 251, 241; --op-ouro-escuro: #0d9488; --op-ouro-escuro-rgb: 13, 148, 136;
  --op-tinta-no-ouro: #02201c; --op-brasa: #f5b83d; --op-brasa-rgb: 245, 184, 61; --op-texto-ouro: #c9f7ee;
  --fundo: #030908; --fundo-2: #050e0c; --painel: #081613; --painel-2: #0b1e1a; --painel-3: #0f2823;
  --linha: #13302a; --linha-viva: #20534a; --prata: #9fe3d6;
}
html.tema-overpower.cor-instinto {
  --op-ouro: #dfe6ff; --op-ouro-rgb: 223, 230, 255; --op-ouro-vivo: #f3f5ff; --op-ouro-vivo-rgb: 243, 245, 255;
  --op-ouro-claro: #ffffff; --op-ouro-claro-rgb: 255, 255, 255; --op-ouro-escuro: #8f9bd6; --op-ouro-escuro-rgb: 143, 155, 214;
  --op-tinta-no-ouro: #0b0d1a; --op-brasa: #9b8cff; --op-brasa-rgb: 155, 140, 255; --op-texto-ouro: #e9ecff;
  --fundo: #05060a; --fundo-2: #080a10; --painel: #0c0f18; --painel-2: #111522; --painel-3: #171c2c;
  --linha: #1d2336; --linha-viva: #2f3857; --prata: #c9d0ee;
}
html.tema-overpower[class*="cor-"] { --anel-de-foco: rgba(var(--op-ouro-rgb), .75); scrollbar-color: var(--op-ouro-escuro) var(--fundo); }

/* ------------------------------------------------------------------ OS TONS (lote 159: PRO e Overpower)
   O dono: "temas, so que mais simples, para quem e Scouter Pro tambem". O escuro do Scouter com outro fundo: trocam
   SO as fichas de superficie (fundo, paineis, linhas) e a luz do ambiente. O vermelho da marca, os botoes e as cores
   de aviso (certo, atencao, erro) continuam os mesmos - por isso sao simples, e por isso nenhuma tela desanda. */
html.tom-meianoite { --amb-rgb: 72, 124, 255; --fundo: #05070d; --fundo-2: #080b14; --painel: #0c111d; --painel-2: #111827;
  --painel-3: #172033; --linha: #1c2740; --linha-viva: #2c3d63; scrollbar-color: #2c3d63 #05070d; }
html.tom-grafite { --amb-rgb: 190, 194, 204; --fundo: #101113; --fundo-2: #141518; --painel: #1a1b1f; --painel-2: #212328;
  --painel-3: #292b31; --linha: #32343b; --linha-viva: #4a4d57; scrollbar-color: #4a4d57 #101113; }
html.tom-floresta { --amb-rgb: 61, 190, 120; --fundo: #050a07; --fundo-2: #08100b; --painel: #0c1710; --painel-2: #112016;
  --painel-3: #16291d; --linha: #1c3325; --linha-viva: #2c5039; scrollbar-color: #2c5039 #050a07; }
html.tom-vinho { --amb-rgb: 224, 32, 96; --fundo: #0b0508; --fundo-2: #12070c; --painel: #1a0b12; --painel-2: #220f18;
  --painel-3: #2b131f; --linha: #351826; --linha-viva: #55263c; scrollbar-color: #55263c #0b0508; }

/* ------------------------------------------------------------------ O SELETOR (Preferencias e Jornada) */
.seletor-de-temas { margin-bottom: 18px; }
.grade-de-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tema-opcao { position: relative; display: grid; gap: 6px; align-content: start; padding: 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--linha-viva); border-radius: 14px; background: var(--painel-2); color: var(--texto); font: inherit;
  transition: border-color .16s ease, transform .16s ease; }
/* lote 265: o hover que sobe so com mouse - no toque ele ficava preso no cartao depois do dedo sair */
@media (hover: hover) { .tema-opcao:hover:not(:disabled) { border-color: var(--prata); transform: translateY(-1px); } }
.tema-opcao.atual { border-color: var(--t-cor); box-shadow: 0 0 0 1px var(--t-cor); }
.tema-opcao.travado { cursor: not-allowed; opacity: .55; }
.amostra-do-tema { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; height: 54px; padding: 6px;
  border-radius: 10px; background: var(--t-fundo); border: 1px solid rgba(128, 128, 128, .25); }
.amostra-do-tema i { border-radius: 5px; background: var(--t-painel); }
.amostra-do-tema i:first-child { grid-row: 1 / 3; }
.amostra-do-tema i:last-child { background: var(--t-cor); }
.nome-do-tema b { font: 700 14px/1.2 var(--fonte-titulo); }
.tema-opcao small { color: var(--fraco); font-size: 12px; line-height: 1.35; }
.tema-opcao.atual .nome-do-tema b::after { content: " ✓"; color: var(--t-cor); }
.cadeado { font-size: 12px; }

/* ===================================================================== AS CORES DO OVERPOWER, INTEGRADAS (03/10/2026)
   O dono: "os temas da Jornada podiam ser mais bonitos, com mais efeitos, mais tematizados; nao esta tao bem integrado
   quanto o tema original". Cada cor agora troca tambem o vermelho do ambiente (brilho do fundo, luz dos cartoes,
   "Indique e ganhe": --amb-rgb), os links e destaques (--vermelho-claro/--coral; o --vermelho fica, ele e o "parado")
   e as brasas (overpower.js le as fichas). E ganha um efeito proprio no fundo (.ambiente-do-tema, de auras.py). */
html.tema-overpower.cor-saiyajin { --amb-rgb: 255, 122, 69; --vermelho-claro: #ff9561; --coral: #ff9561; }
html.tema-overpower.cor-dourado { --amb-rgb: 255, 216, 77; --vermelho-claro: #ffe680; --coral: #ffe680; }
html.tema-overpower.cor-relampago { --amb-rgb: 108, 196, 255; --vermelho-claro: #8fd3ff; --coral: #8fd3ff; }
html.tema-overpower.cor-deus { --amb-rgb: 255, 92, 122; --vermelho-claro: #ff7d95; --coral: #ff7d95; }
html.tema-overpower.cor-blue { --amb-rgb: 94, 227, 245; --vermelho-claro: #8aeefb; --coral: #8aeefb; }
html.tema-overpower.cor-hakai { --amb-rgb: 180, 139, 255; --vermelho-claro: #c7a6ff; --coral: #c7a6ff; }
html.tema-overpower.cor-namek { --amb-rgb: 74, 222, 128; --vermelho-claro: #7bea9f; --coral: #7bea9f; }
html.tema-overpower.cor-majin { --amb-rgb: 255, 122, 200; --vermelho-claro: #ff9bd6; --coral: #ff9bd6; }
html.tema-overpower.cor-shenlong { --amb-rgb: 45, 212, 191; --vermelho-claro: #5eead4; --coral: #5eead4; }
html.tema-overpower.cor-instinto { --amb-rgb: 200, 208, 255; --vermelho-claro: #f3f5ff; --coral: #dfe6ff; }

/* o efeito de cada cor: so o da cor escolhida aparece (o resto e display:none e nao anima) */
.ambiente-do-tema { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambiente-do-tema .sinal { display: none; position: absolute; inset: 0; }
html.tema-overpower.cor-dourado .sinal-dourado, html.tema-overpower.cor-relampago .sinal-relampago,
html.tema-overpower.cor-deus .sinal-deus, html.tema-overpower.cor-blue .sinal-blue,
html.tema-overpower.cor-hakai .sinal-hakai, html.tema-overpower.cor-saiyajin .sinal-saiyajin,
html.tema-overpower.cor-namek .sinal-namek, html.tema-overpower.cor-majin .sinal-majin,
html.tema-overpower.cor-shenlong .sinal-shenlong, html.tema-overpower.cor-instinto .sinal-instinto { display: block; }
.ambiente-do-tema i { position: absolute; display: block; }
.brilho-de-cima { left: 50%; top: -34vh; width: 120vw; height: 72vh; margin-left: -60vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--op-ouro-rgb), .15), rgba(var(--op-brasa-rgb), .05) 60%, transparent);
  animation: ceu-respira 7s ease-in-out infinite; }
@keyframes ceu-respira { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
/* Dourado: raios de luz girando devagar a partir do topo */
.raios-de-luz { left: 50%; top: -70vmax; width: 140vmax; height: 140vmax; margin-left: -70vmax;
  background: repeating-conic-gradient(from 0deg, rgba(var(--op-ouro-rgb), .075) 0deg 3deg, transparent 3deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 72%); mask: radial-gradient(closest-side, #000 20%, transparent 72%);
  animation: gira-devagar 120s linear infinite; }
@keyframes gira-devagar { to { transform: rotate(360deg); } }
/* Relampago: raios estalando no ceu da pagina, de vez em quando */
.raio-do-ceu { position: absolute; width: 120px; height: 132px; overflow: visible; opacity: 0;
  animation: raio-no-ceu var(--d) linear var(--a) infinite; }
@keyframes raio-no-ceu { 0%, 100% { opacity: 0; } 1% { opacity: .9; } 2% { opacity: .15; } 3.2% { opacity: 1; } 5.5% { opacity: 0; } }
/* Deus: o halo carmesim respirando no canto */
.halo-divino { right: -16vmax; top: -16vmax; width: 64vmax; height: 64vmax; border-radius: 50%;
  background: radial-gradient(closest-side, transparent 60%, rgba(var(--op-ouro-rgb), .16) 69%, rgba(var(--op-brasa-rgb), .09) 78%, transparent 88%);
  animation: ceu-respira 6s ease-in-out infinite; }
/* Blue: estrelinhas de ki piscando */
.estrela-de-ki { width: 10px; height: 10px; opacity: 0;
  background: radial-gradient(closest-side, #fff, rgba(var(--op-ouro-rgb), .9) 45%, transparent);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: estrela-pisca var(--d) ease-in-out var(--a) infinite; }
@keyframes estrela-pisca { 0%, 100% { opacity: 0; transform: scale(calc(var(--t) * .4)); } 50% { opacity: .9; transform: scale(calc(var(--t) * 1.6)); } }
/* Hakai: o orbe de destruicao com os aneis girando */
.orbe-hakai { right: 7vw; top: 14vh; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(var(--op-ouro-claro-rgb), .22), rgba(var(--op-ouro-rgb), .16) 30%, rgba(20, 6, 40, .55) 62%, transparent 72%);
  animation: ceu-respira 5s ease-in-out infinite; }
.anel-hakai { right: calc(7vw - 40px); top: calc(14vh - 40px); width: 270px; height: 270px; border-radius: 50%;
  border: 1px dashed rgba(var(--op-ouro-rgb), .38); animation: gira-devagar 40s linear infinite; }
.anel-hakai.segundo { right: calc(7vw - 75px); top: calc(14vh - 75px); width: 340px; height: 340px; border-style: dotted;
  border-color: rgba(var(--op-brasa-rgb), .32); animation-duration: 65s; animation-direction: reverse; }
/* Saiyajin: o calor subindo do rodape */
.calor-de-baixo { left: -10vw; right: -10vw; bottom: -32vh; height: 64vh; border-radius: 50%; transform-origin: 50% 100%;
  background: radial-gradient(closest-side, rgba(var(--op-ouro-rgb), .18), rgba(var(--op-brasa-rgb), .07) 60%, transparent);
  animation: calor-sobe 4s ease-in-out infinite; }
@keyframes calor-sobe { 0%, 100% { transform: scaleY(.92); opacity: .75; } 50% { transform: scaleY(1.06); opacity: 1; } }
html.menos-movimento .ambiente-do-tema * { animation: none !important; }
html.menos-movimento .raio-do-ceu, html.menos-movimento .estrela-de-ki { display: none; }
/* no celular e na tela de toque so os brilhos (os raios, as estrelas e os raios de luz ficam para o computador) */
@media (max-width: 920px), (hover: none) { .raio-do-ceu, .estrela-de-ki, .raios-de-luz { display: none; } }

/* o seletor: a aura de cada tema no selo da amostra */
.amostra-do-tema { position: relative; }
/* A AURA CABE NA MOLDURA (lote 265, 10/10/2026; o print do dono: o coracao da Black Friday, com a aura dourada,
   passando para FORA do quadradinho). Duas causas:
   (1) a folha da aba Vitrine (telas/vitrine.css) tem a PROPRIA .amostra-do-tema - 40 x 30 px, de bolinhas - e ficava
       ligada depois de abrir a Vitrine: aqui o quadradinho encolhia e a aura de 50 px vazava. O navegacao.js agora
       desliga a folha de outra tela; as regras abaixo pesam mais que as dela, de garantia;
   (2) a aura sobe mais do que desce (as linguas de fogo: ate 0,85 do selo para cima e 0,66 para baixo, medido no SVG
       de saas/auras.py): o selo COM aura desce 0,095 do proprio tamanho e o conjunto fica no meio, com folga em cima
       e embaixo (o teste do lote 265 refaz a conta com o SVG de cada tema). */
.tema-opcao .amostra-do-tema { display: grid; grid-row: auto; align-self: auto; align-items: stretch; justify-content: normal;
  width: auto; height: 54px; gap: 4px; border-radius: 10px; background: var(--t-fundo); box-shadow: none; }
.tema-opcao .amostra-do-tema i { display: block; width: auto; height: auto; border-radius: 5px; background: var(--t-painel); }
.tema-opcao .amostra-do-tema i:nth-child(2) { background: var(--t-painel); }
/* a terceira faixa e a COR do tema: o ":last-child" la de cima nunca casava (o selo e o ultimo filho da amostra) */
.tema-opcao .amostra-do-tema i:nth-child(3) { display: block; background: var(--t-cor); }
.selo-do-tema { --selo: 30px; position: absolute; left: 33%; top: 50%; width: var(--selo); height: var(--selo);
  transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .38); }
/* so o selo COM aura desce (o tema sem aura continua com o selo no meio) */
.selo-do-tema:has(> svg.aura-de-ki) { top: calc(50% + var(--selo) * .095); }
.selo-do-tema b { position: relative; z-index: 1; font-size: 15px; line-height: 1; }
.selo-do-tema svg.aura-de-ki { position: absolute; left: -33.333%; top: -33.333%; width: 166.667%; height: 166.667%;
  max-width: none; overflow: visible; pointer-events: none; }
.tema-opcao.travado .selo-do-tema svg.aura-de-ki { opacity: .35; }
#temas-da-jornada .grade-de-temas { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
#temas-da-jornada .amostra-do-tema, #temas-da-jornada .tema-opcao .amostra-do-tema { height: 72px; }
#temas-da-jornada .selo-do-tema { --selo: 38px; }
#temas-da-jornada .selo-do-tema b { font-size: 19px; }

/* A AURA DA LOGO (Overpower): no lugar da mira, atras do simbolo, na cor do tema; os raios so no Relampago */
.aura-da-marca { display: none; }
html.tema-overpower .aura-da-marca { display: block; position: relative; grid-row: 1; grid-column: 1; justify-self: center; align-self: center;
  width: 46px; height: 46px; z-index: 0; pointer-events: none; }
html.tema-overpower .marca-do-trilho .mira { position: relative; z-index: 1; }
.aura-da-marca svg.aura-de-ki { position: absolute; left: -33.333%; top: -33.333%; width: 166.667%; height: 166.667%; max-width: none; overflow: visible; }
.aura-da-marca .eletricidade { display: none; }
html.tema-overpower.cor-relampago .aura-da-marca .eletricidade { display: inline; }

/* AS ESCURAS (lote 165, 05/10/2026): o preto de verdade e a cor so nos detalhes */
html.tema-overpower.cor-carbono {
  --op-ouro: #ff3048; --op-ouro-rgb: 255, 48, 72; --op-ouro-vivo: #ff5466; --op-ouro-vivo-rgb: 255, 84, 102;
  --op-ouro-claro: #ffd0d6; --op-ouro-claro-rgb: 255, 208, 214; --op-ouro-escuro: #b3132a; --op-ouro-escuro-rgb: 179, 19, 42;
  --op-tinta-no-ouro: #1a0207; --op-brasa: #ff6a3d; --op-brasa-rgb: 255, 106, 61; --op-texto-ouro: #ffd9de;
  --fundo: #030303; --fundo-2: #070707; --painel: #0c0c0d; --painel-2: #111112; --painel-3: #18181a;
  --linha: #1d1d20; --linha-viva: #2e2e33; --prata: #c9c9cf;
}
html.tema-overpower.cor-neon {
  --op-ouro: #ff3fd8; --op-ouro-rgb: 255, 63, 216; --op-ouro-vivo: #ff6be2; --op-ouro-vivo-rgb: 255, 107, 226;
  --op-ouro-claro: #ffd6f6; --op-ouro-claro-rgb: 255, 214, 246; --op-ouro-escuro: #b0189a; --op-ouro-escuro-rgb: 176, 24, 154;
  --op-tinta-no-ouro: #1c0218; --op-brasa: #22d3ee; --op-brasa-rgb: 34, 211, 238; --op-texto-ouro: #ffd9f7;
  --fundo: #040306; --fundo-2: #07060a; --painel: #0d0b11; --painel-2: #110f15; --painel-3: #18151d;
  --linha: #1f1b26; --linha-viva: #322b3d; --prata: #d2c9e0;
}
html.tema-overpower.cor-platina {
  --op-ouro: #d9dce3; --op-ouro-rgb: 217, 220, 227; --op-ouro-vivo: #f1f3f7; --op-ouro-vivo-rgb: 241, 243, 247;
  --op-ouro-claro: #ffffff; --op-ouro-claro-rgb: 255, 255, 255; --op-ouro-escuro: #8d929c; --op-ouro-escuro-rgb: 141, 146, 156;
  --op-tinta-no-ouro: #0b0c0e; --op-brasa: #9aa3b2; --op-brasa-rgb: 154, 163, 178; --op-texto-ouro: #eef0f4;
  --fundo: #050505; --fundo-2: #09090a; --painel: #0f0f11; --painel-2: #141416; --painel-3: #1b1b1e;
  --linha: #222226; --linha-viva: #34343a; --prata: #d9dce3;
}
html.tema-overpower.cor-carbono { --amb-rgb: 255, 48, 72; --vermelho-claro: #ff5466; --coral: #ff5466; }
html.tema-overpower.cor-neon { --amb-rgb: 255, 63, 216; --vermelho-claro: #ff6be2; --coral: #22d3ee; }
html.tema-overpower.cor-platina { --amb-rgb: 217, 220, 227; --vermelho-claro: #f1f3f7; --coral: #d9dce3; }
html.tema-overpower.cor-carbono .sinal-carbono, html.tema-overpower.cor-neon .sinal-neon,
html.tema-overpower.cor-platina .sinal-platina { display: block; }

/* O RELAMPAGO MENOS AZUL (lote 165, o dono: "fica azulado demais... o fundo muito exagerado"): o raio continua
   azul; o fundo e os paineis quase pretos, so com um fio de azul */
html.tema-overpower.cor-relampago {
  --fundo: #040507; --fundo-2: #07080b; --painel: #0c0e12; --painel-2: #111419; --painel-3: #171b22;
  --linha: #1c212a; --linha-viva: #2b3340;
}

/* ===================================================================== A BLACK FRIDAY (lote 240, 09/10/2026)
   O dono: "quero ver como e que esta o tema novo de Black Friday, e como e que vai ficar o painel, tanto na versao Pro
   quanto na versao Overpower". Dois temas de EVENTO (saas/temas.py: so na semana da Black Friday; o dono ve sempre):
     - PRO (html.evento-black-friday): o escuro do Scouter em preto profundo; o vermelho da marca fica e o ouro entra
       discreto nos detalhes (o degrade do selo PRO, a luz do ambiente, as linhas) e na faixa "BLACK FRIDAY" do menu;
     - Overpower (html.tema-overpower.cor-black-friday-overpower): preto absoluto com ouro e brasa, o brilho mais forte
       (os raios de luz, a luz de cima e o calor de baixo de auras.ambiente_do_tema) e a faixa acesa.
   E a cara da Black nos itens do evento na Jornada, no seletor de temas e na pilula da previa do dono.
   A REGRA DA CASA: nada aqui faz transicao (nem de cor): so fichas; o que mexe e opacity/transform e para com "menos
   movimento". Vem ANTES do fundo preto do lote 165 (ele continua ganhando de todas as cores). O teste do lote 240 varre
   este bloco ate "FIM DA BLACK FRIDAY". */
html.evento-black-friday {
  --amb-rgb: 212, 160, 72;
  --fundo: #030303; --fundo-2: #060606; --painel: #0b0b0b; --painel-2: #111111; --painel-3: #181816;
  --linha: #1f1d19; --linha-viva: #3b3224; --coral: #d9a441; --prata: #d6c39b;
  scrollbar-color: #3b3224 #030303;
}
html.tema-overpower.cor-black-friday-overpower {
  --op-ouro: #f5c451; --op-ouro-rgb: 245, 196, 81; --op-ouro-vivo: #ffd76e; --op-ouro-vivo-rgb: 255, 215, 110;
  --op-ouro-claro: #fff1c7; --op-ouro-claro-rgb: 255, 241, 199; --op-ouro-escuro: #b8860b; --op-ouro-escuro-rgb: 184, 134, 11;
  --op-tinta-no-ouro: #1a1203; --op-brasa: #ff4d1f; --op-brasa-rgb: 255, 77, 31; --op-texto-ouro: #ffe9b0;
  --fundo: #000000; --fundo-2: #030303; --painel: #080807; --painel-2: #0c0b09; --painel-3: #13110d;
  --linha: #1c1912; --linha-viva: #3a301c; --prata: #e6d3a3;
}
html.tema-overpower.cor-black-friday-overpower { --amb-rgb: 245, 196, 81; --vermelho-claro: #ffd76e; --coral: #ff6a3d; }
html.tema-overpower.cor-black-friday-overpower .sinal-black-friday-overpower { display: block; }

/* a faixa no pe do menu: sutil no PRO, acesa (e respirando) no Overpower */
html.evento-black-friday .trilho-pe::before,
html.tema-overpower.cor-black-friday-overpower .trilho-pe::before {
  content: "BLACK FRIDAY"; display: block; padding: 6px 8px; border-radius: 8px; text-align: center; white-space: nowrap;
  overflow: hidden; font: 700 10px/1 var(--fonte-titulo); letter-spacing: .34em; color: #d9a441;
  border: 1px solid rgba(217, 164, 65, .32);
  background: linear-gradient(90deg, rgba(224, 32, 63, .12), rgba(0, 0, 0, .55) 50%, rgba(217, 164, 65, .12));
}
html.tema-overpower.cor-black-friday-overpower .trilho-pe::before {
  color: var(--op-ouro-vivo); border-color: rgba(var(--op-ouro-rgb), .6); text-shadow: 0 0 10px rgba(var(--op-ouro-rgb), .7);
  background: linear-gradient(90deg, rgba(var(--op-brasa-rgb), .2), rgba(0, 0, 0, .7) 50%, rgba(var(--op-ouro-rgb), .2));
  box-shadow: 0 0 18px rgba(var(--op-ouro-rgb), .2), inset 0 0 12px rgba(var(--op-brasa-rgb), .14);
  animation: faixa-da-black 3.6s ease-in-out infinite;
}
@keyframes faixa-da-black { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
html.menos-movimento.tema-overpower.cor-black-friday-overpower .trilho-pe::before { animation: none; }
/* o menu recolhido (so os icones) nao cabe a palavra inteira */
html.evento-black-friday body.trilho-recolhido .trilho-pe::before,
html.tema-overpower.cor-black-friday-overpower body.trilho-recolhido .trilho-pe::before { content: "BF"; letter-spacing: .1em; }
@media (max-width: 920px) {
  html.evento-black-friday body.trilho-recolhido .trilho-pe::before,
  html.tema-overpower.cor-black-friday-overpower body.trilho-recolhido .trilho-pe::before { content: "BLACK FRIDAY"; letter-spacing: .34em; }
}

/* o seletor (templates/_temas.html): o selo "Evento", ate quando vale e o aviso de tema liberado */
.selo-de-evento { display: inline-block; margin-left: 4px; padding: 2px 6px; border-radius: 999px; vertical-align: 2px;
  font: 700 9.5px/1.2 var(--fonte-texto); letter-spacing: .08em; text-transform: uppercase; color: #1a1203; background: #e9b949; }
.janela-do-tema { display: block; margin-top: 3px; color: var(--ct-f5c56a, #f5c56a); }
.aviso-de-tema-de-evento { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4;
  color: var(--texto); border: 1px solid rgba(233, 185, 73, .45); background: rgba(233, 185, 73, .08); }
.aviso-de-tema-de-evento b { color: var(--ct-f5c56a, #f5c56a); }

/* os itens da Black na Jornada (o aro do broche e de saas/emblemas.py): preto e ouro no lugar do laranja do Halloween */
.item-da-capsula.evento-black-friday { border-color: rgba(245, 196, 81, .55); }
.item-da-capsula.evento-black-friday.tem { box-shadow: 0 0 16px rgba(245, 196, 81, .22); }
.titulo-da-capsula.evento-black-friday, .lista-do-ranking .quem em.titulo-da-capsula.evento-black-friday { color: #f5c451;
  background: linear-gradient(90deg, #0b0b0b, #2a2110 55%, #0b0b0b); box-shadow: 0 0 0 1px rgba(245, 196, 81, .55), 0 0 12px rgba(245, 196, 81, .22); }
.nome-cor-ouro_negro { color: #f5c451; text-shadow: 0 1px 0 #000, 0 0 10px rgba(245, 196, 81, .45); }
html.tema-claro .nome-cor-ouro_negro { color: #8a6410; text-shadow: none; }
.capsula-aberta.evento-black-friday { --rar: 245, 196, 81; }
.capsula-aberta.revelado.evento-black-friday .palco-da-capsula { border-color: rgba(245, 196, 81, .8); box-shadow: 0 0 50px rgba(245, 196, 81, .3); }
.capsula-aberta.evento-black-friday .raridade-do-premio { color: #f5c451; }
.faixa-do-evento.evento-black-friday { border-color: rgba(245, 196, 81, .5);
  background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(245, 196, 81, .1)); }
html.tema-claro .faixa-do-evento.evento-black-friday { background: rgba(245, 196, 81, .12); }
.faixa-do-evento .nota-da-previa { display: block; margin-top: 4px; font-style: normal; color: var(--ct-f5c56a, #f5c56a); }
/* o coracao preto da Black sumia no fundo preto (o item trancado, o selo do seletor): um contorno de ouro, parado.
   Sombra de texto e nao "filter" (o teste do lote 124: nada de filter nestas folhas, pesa na tela inteira) */
.item-da-capsula.evento-black-friday .cadeado,
.tema-opcao[data-escolher-tema="evento-black-friday"] .selo-do-tema b,
.tema-opcao[data-escolher-tema="black-friday-overpower"] .selo-do-tema b { text-shadow: 0 0 1.5px #f5c451, 0 0 2px #f5c451, 0 0 7px rgba(245, 196, 81, .6); }

/* A PREVIA DO EVENTO (so o dono; base.html): a pilula embaixo, com o "Sair da previa" (um link comum) */
.pilula-da-previa { position: fixed; left: 50%; bottom: 16px; z-index: 95; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 7px 7px 7px 14px; border-radius: 16px;
  color: #f5e6c0; background: #0b0b0b; border: 1px solid rgba(245, 196, 81, .6); box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  font-size: 12.5px; line-height: 1.35; }
.pilula-da-previa p { margin: 0; min-width: 0; }
.pilula-da-previa p b { color: #f5c451; }
.pilula-da-previa a { flex: none; padding: 6px 12px; border-radius: 999px; color: #1a1203; background: #f5c451; font-weight: 700;
  text-decoration: none; white-space: nowrap; }
@media (max-width: 920px) {
  .pilula-da-previa { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); font-size: 12px; }
  .pilula-da-previa .so-no-computador { display: none; }
}
/* FIM DA BLACK FRIDAY (lote 240) */

/* O FUNDO PRETO (lote 165, o dono: "temas mais escuros, que sejam escuros com detalhes de certas cores"): uma chave
   do seletor (localStorage "scouter-fundo-op", classe op-preto pelo cedo.js) que vale para TODAS as cores do
   Overpower. O fundo e os paineis viram preto neutro; a cor da escolha fica nos botoes, linhas, textos de destaque e
   na aura; a luz do ambiente fica mais fraca. Vem no fim do arquivo: ganha das fichas de cada cor. */
html.tema-overpower.op-preto {
  --fundo: #030303; --fundo-2: #060606; --painel: #0b0b0c; --painel-2: #101011; --painel-3: #161618;
  --linha: #1c1c1f; --linha-viva: #2b2b30;
}
html.tema-overpower.op-preto .ambiente-do-tema { opacity: .38; }
html.tema-overpower.op-preto body.v3::after, html.tema-overpower.op-preto .brilho-que-passa { opacity: .45; }
html.tema-overpower.op-preto .brasas-do-fundo { opacity: .5; }
/* a chave no seletor */
.fundo-preto-do-tema { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--linha); background: var(--painel-2); cursor: pointer; }
.fundo-preto-do-tema input { width: 20px; height: 20px; accent-color: var(--vermelho); flex: none; }
.fundo-preto-do-tema b { display: block; font-size: 14px; }
.fundo-preto-do-tema small { color: var(--fraco); font-size: 12.5px; }
html:not(.tema-overpower) .fundo-preto-do-tema { opacity: .6; }