/* =====================================================================
   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;
  --fraco-2: #8a857e;
  --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;
}
html.tema-overpower[class*="cor-"] { --anel-de-foco: rgba(var(--op-ouro-rgb), .75); scrollbar-color: var(--op-ouro-escuro) var(--fundo); }

/* ------------------------------------------------------------------ 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; }
.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; }

/* 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 { 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; }
.selo-do-tema { position: absolute; left: 33%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .38); }
.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 { height: 72px; }
#temas-da-jornada .selo-do-tema { width: 38px; height: 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; }