/* Day OFF · sistema visual "equipamento ludico de precisao"
   spec: docs/superpowers/specs/2026-07-24-dayoff-redesign-design.md

   Tres regras que carregam o resto:
   1. um trabalho por cor. ambar e acao, coral e travado, sage e concluido.
   2. elevacao SOLIDA: fio de 1px mais aresta inferior escura. nunca sombra borrada.
   3. no maximo UMA tecla ambar por tela, e ela e sempre o proximo passo. */

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

/* sem isso, display:grid/flex ignora o atributo hidden do HTML */
[hidden] { display: none !important; }

:root {
  /* o chao. O fundo da pagina e o creme FUNDO, nao o claro:
     creme claro em area grande lava a tela e o cartao branco some dentro dele. */
  --creme:        #FFF8ED;
  --creme-fundo:  #F6E7CE;
  --creme-meio:   #FBF1E1;
  --painel:       #FFFFFF;

  /* a tinta */
  --petroleo:     #2F6F7D;
  --tinta:        #24393E;
  /* o tom antigo (#5C757C) dava 4.02:1 sobre o creme FUNDO, abaixo do minimo de
     4.5, e ele carrega texto de leitura: o paragrafo de abertura das 11 paginas
     de lista, o rodape e a explicacao do backup. Este da 4.99:1 sobre o fundo,
     6.08:1 sobre o cartao branco, e continua o mesmo cinza-azulado. */
  --tinta-suave:  #4F666D;
  --grafite:      #303638;

  /* o ambar e a cor da marca, entao ele APARECE, nao e exceção rara.
     Acao continua sendo so uma tecla por tela, mas o ambar tambem
     assina fios, rotulos, numeros e a faixa do acervo. */
  --ambar:        #F3B53F;
  --ambar-claro:  #F7C25E;
  --ambar-base:   #C4881B;
  --ambar-fundo:  #FDEFC9;
  --ambar-texto:  #8A5E0F;   /* ambar escuro o bastante pra carregar texto (5.2:1) */
  --ambar-tinta:  #3A2A05;
  --coral:        #E66F5D;
  /* o coral da marca so passa 3.09:1 sobre branco, entao ele NAO pode carregar
     texto. Este e o par escuro dele (5.8:1 no branco, 4.8:1 no creme fundo),
     do mesmo jeito que --ambar-texto e o par escuro do ambar. */
  --coral-texto:  #B0402D;
  --sage:         #78A98C;

  /* o escuro raro: so a janela da bancada, o palco do sorteio e o Modo Foco */
  --noite:        #101C21;

  /* construcao. O fio tem calor de ambar dentro: fio cinza-azulado sobre creme
     e o que fazia a tela parecer lavada. */
  --fio:          rgba(138,94,15,.20);
  --fio-forte:    rgba(138,94,15,.36);
  --base:         rgba(58,42,5,.24);
  --sombra-curta: 0 2px 0 rgba(58,42,5,.06), 0 6px 16px -10px rgba(58,42,5,.38);
  --raio:         6px;

  /* movimento */
  --curva-saida:  cubic-bezier(.16, 1, .3, 1);
  --curva-tecla:  cubic-bezier(.2, 0, 0, 1);

  /* escala. o contraste entre 11px de rotulo e 96px de numero
     e o que faz o olho ler "isso foi desenhado". */
  --t-rotulo: 11px;
  --t-micro:  13px;
  --t-corpo:  17px;
  --t-h3:     20px;
  --t-h2:     clamp(24px, 5vw, 34px);
  --t-h1:     clamp(34px, 9vw, 68px);
  --t-numero: clamp(40px, 12vw, 96px);

  /* a estrela da marca, extraida de logo.svg sem alterar a geometria */
  --mask-estrela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 20C63.8 39 73.4 48.8 94.4 53.7C107.8 56.5 107.8 63.5 94.4 66.3C73.4 71.2 63.8 81 60 100C56.2 81 46.6 71.2 25.6 66.3C12.2 63.5 12.2 56.5 25.6 53.7C46.6 48.8 56.2 39 60 20Z'/%3E%3C/svg%3E");
}

/* ============ CHAO ============ */

body {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--tinta);
  background-color: var(--creme-fundo);
  /* luz ambiente quente, nao decoracao. Sobre o creme fundo ela da profundidade
     em vez de lavar a tela. */
  background-image: radial-gradient(130% 55% at 50% 0%, var(--creme) 0%, rgba(255,248,237,0) 72%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* grao de papel: tira o plastico do creme chapado */
.grao {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* ============ TIPOGRAFIA ============ */

.display, h1, h2, h3, h4 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wdth' 125;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.05;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

/* mono: todo dado, todo rotulo, todo numero.
   tabular-nums e obrigatorio: sem isso o mostrador treme ao passar de 9 pra 10. */
.dado, .rotulo, .num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.rotulo { font-size: var(--t-rotulo); color: var(--ambar-texto); font-weight: 600; }
.dado   { font-size: var(--t-micro); color: var(--tinta-suave); }
.num    { font-size: var(--t-numero); color: var(--tinta); letter-spacing: .02em; line-height: 1; }
.num em { font-style: normal; color: var(--ambar-base); }

a { color: var(--petroleo); text-underline-offset: 3px; }

/* ============ CONSTRUCAO: A PECA TEM ESPESSURA ============ */

/* A peca: fio quente, aresta inferior escura, sombra de contato curta e um
   FIO AMBAR no topo. E o fio ambar que faz a peca ler como acabamento e nao
   como caixa de formulario. */
.peca {
  position: relative;
  background: var(--painel);
  border: 1px solid var(--fio);
  border-bottom: 3px solid var(--base);
  border-radius: var(--raio);
  box-shadow: var(--sombra-curta);
  overflow: hidden;
}
.peca::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--ambar), var(--ambar-base));
}

/* ============ AS TECLAS ============ */

.tecla {
  display: inline-block;
  font-family: 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wdth' 110;
  font-weight: 600;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 14px 20px;
  border-radius: var(--raio);
  background: var(--painel);
  color: var(--tinta);
  border: 1px solid var(--fio-forte);
  border-bottom: 4px solid var(--base);
  cursor: pointer;
  text-decoration: none;
  transition: transform .07s var(--curva-tecla),
              border-bottom-width .07s var(--curva-tecla),
              background .15s ease;
}
.tecla:hover { background: var(--ambar-fundo); border-color: var(--ambar-base); }
.tecla:active { transform: translateY(3px); border-bottom-width: 1px; }
.tecla:disabled { opacity: .45; cursor: not-allowed; transform: none; border-bottom-width: 4px; }

/* a UNICA ambar da tela: sempre o proximo passo */
.tecla-acao {
  background: var(--ambar);
  color: var(--ambar-tinta);
  border-color: var(--ambar-base);
  border-bottom-color: var(--ambar-base);
  font-size: var(--t-corpo);
  padding: 16px 26px;
}
.tecla-acao:hover { background: var(--ambar-claro); }

/* travada: sinal coral, sem acao */
.tecla-travada {
  background: var(--painel);
  color: var(--tinta-suave);
  border-color: var(--coral);
  border-bottom-color: var(--coral);
  cursor: default;
}
.tecla-travada:hover { background: var(--painel); }
.tecla-travada:active { transform: none; border-bottom-width: 4px; }

.link-texto {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--petroleo); font: inherit; font-size: var(--t-micro);
  text-decoration: underline; text-underline-offset: 3px;
}

:where(button, a, input, textarea, select):focus-visible {
  outline: 3px solid var(--petroleo);
  outline-offset: 2px;
}

/* ============ O MOTIVO DA PAUSA ============
   As duas barras vem de dentro da estrela do logo. Pausa e o verbo da marca,
   entao ela vira o dispositivo estrutural do site, no lugar do antigo ornamento. */

.pausa { display: inline-flex; gap: 3px; vertical-align: middle; }
.pausa::before, .pausa::after {
  content: ''; width: 3px; height: 11px; border-radius: 1.5px;
  background: currentColor;
}
.divisor {
  display: flex; justify-content: center; align-items: center;
  margin: 34px 0; color: var(--petroleo); opacity: .22;
}

/* ============ O MOSTRADOR ============
   Telemetria real, em toda tela. E a peca pela qual o site e lembrado. */

#mostrador {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  height: 44px; padding: 0 14px;
  background: var(--painel);
  border-bottom: 1px solid var(--fio-forte);
  box-shadow: 0 1px 0 var(--base);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-rotulo);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.mostrador-marca {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--petroleo); font-weight: 600; flex: none;
  text-decoration: none; border-radius: 3px; padding: 3px 5px; margin-left: -5px;
}
/* quem entra em /classicos/ ficava preso: o logo nao levava a lugar nenhum */
a.mostrador-marca:hover { background: var(--ambar-fundo); color: var(--ambar-texto); }
#mostrador-obra {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  color: var(--tinta);
}
#mostrador-progresso { flex: none; color: var(--tinta-suave); }
#mostrador.travado .mostrador-marca { color: var(--coral-texto); }
#mostrador-foco {
  flex: none; width: 30px; height: 30px; border-radius: var(--raio);
  border: 1px solid var(--fio); background: transparent;
  color: var(--petroleo); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
#mostrador-foco:hover { background: var(--creme-fundo); }
#mostrador-foco svg { width: 15px; height: 15px; display: block; }

/* o contador da caca. Fica ao lado do foco, sempre visivel: e ele que conta
   que existe uma caca acontecendo. Sem contador, ninguem procura. */
#mostrador-estrelas {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 9px; border-radius: var(--raio);
  border: 1px solid var(--fio); background: transparent;
  color: var(--ambar-texto); cursor: pointer;
  font-family: inherit; font-size: var(--t-rotulo); letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  transition: background .15s ease, border-color .15s ease;
}
#mostrador-estrelas:hover { background: var(--ambar-fundo); border-color: var(--ambar-base); }
#mostrador-estrelas i {
  width: 11px; height: 11px; flex: none; background: currentColor;
  -webkit-mask: var(--mask-estrela) center / contain no-repeat;
          mask: var(--mask-estrela) center / contain no-repeat;
}
#mostrador-estrelas.completo {
  background: var(--ambar); color: var(--ambar-tinta); border-color: var(--ambar-base);
}

/* Em celular estreito nao cabe tudo, e overflow:hidden DECEPA o texto.
   Entao o campo menos importante sai de cena em vez de ser cortado pela metade. */
#m-acervo, #mostrador-progresso { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 620px) {
  #mostrador { gap: 10px; padding: 0 12px; }
  #m-acervo { display: none; }
  #mostrador-estrelas { padding: 0 7px; letter-spacing: .04em; }
  /* o nome da obra saia truncado em "sc…", que nao informa nada. A regua
     fixa no rodape ja mostra a obra inteira, entao aqui ele sai de cena. */
  #mostrador-obra { display: none; }
}
@media (max-width: 380px) {
  #mostrador { letter-spacing: .1em; gap: 8px; }
  #mostrador-progresso { display: none; }
}

/* ============ A CACA AS ESTRELAS ============
   Cinco por pagina, na geometria da estrela da marca. A 22% de opacidade ela
   e achavel por quem olha e invisivel pra quem passa: e exatamente essa a
   fronteira que a marca defende. */

.estrela-escondida {
  position: absolute; z-index: 6;
  width: 28px; height: 28px; padding: 0;   /* alvo de toque: 28px, desenho: 18px */
  border: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.estrela-escondida::before {
  content: ''; position: absolute; inset: 5px;
  background: var(--ambar); opacity: .22;
  -webkit-mask: var(--mask-estrela) center / contain no-repeat;
          mask: var(--mask-estrela) center / contain no-repeat;
  transition: opacity .25s ease, transform .3s var(--curva-saida);
}
.estrela-escondida:hover::before { opacity: .6; transform: scale(1.12); }
.estrela-escondida.achada { cursor: default; }
.estrela-escondida.achada::before {
  opacity: 1; transform: none;
  filter: drop-shadow(0 0 9px rgba(243,181,63,.8));
  animation: estrelaAchada .8s var(--curva-saida);
}
.estrela-escondida.sem-animacao::before { animation: none; }
@keyframes estrelaAchada {
  0%   { transform: scale(.5) rotate(-40deg); }
  55%  { transform: scale(1.5) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

/* sobre a janela escura a estrela e creme, senao some no azul da noite */
.estrela-escondida.em-noite::before { background: #FFF6EA; opacity: .26; }
/* ⚠️ o `opacity: 1` PRECISA ser repetido aqui: `.estrela-escondida.em-noite::before`
   tem a mesma especificidade de `.estrela-escondida.achada::before` e vem depois,
   entao sem isto a estrela achada continuava apagada. */
.estrela-escondida.em-noite.achada::before {
  opacity: 1; filter: drop-shadow(0 0 10px rgba(255,246,234,.9));
}
/* sobre a faixa dourada ela e escura, senao ambar sobre ambar nao existe */
.estrela-escondida.em-ouro::before { background: var(--ambar-tinta); opacity: .3; }
.estrela-escondida.em-ouro.achada::before {
  opacity: 1; filter: drop-shadow(0 0 8px rgba(58,42,5,.5));
}
.estrela-escondida.em-noite:hover::before,
.estrela-escondida.em-ouro:hover::before { opacity: .65; }

/* posicoes: sempre canto de peca, nunca por cima de texto */
.ee-tr { top: 8px;  right: 8px; }
.ee-br { bottom: 8px; right: 8px; }
.ee-bl { bottom: 8px; left: 8px; }
.ee-tl { top: 8px;  left: 8px; }

/* o aviso e FIXO: a estrela pode estar no rodape, e um balao preso nela
   sairia da tela. Fixo, aparece sempre onde o olho ja esta. */
#estrela-aviso {
  position: fixed; z-index: 95; top: 56px; left: 50%;
  max-width: min(92vw, 420px);
  padding: 12px 18px; border-radius: var(--raio);
  background: var(--painel); color: var(--tinta);
  border: 1px solid var(--ambar-base); border-bottom: 3px solid var(--ambar-base);
  box-shadow: 0 10px 30px -14px rgba(58,42,5,.6);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t-micro); line-height: 1.5; text-align: center;
  transform: translateX(-50%);
}
#estrela-aviso.entra { animation: avisoEntra .4s var(--curva-saida); }
#estrela-aviso.selo { background: var(--ambar); color: var(--ambar-tinta); font-weight: 600; }
@keyframes avisoEntra {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============ A FAIXA DOURADA ============
   A peca mais bonita que o site tem. Era exclusiva da home; agora assina
   qualquer placar do sistema. */
.faixa-ouro {
  display: grid; grid-template-columns: repeat(2, 1fr);
  background: var(--ambar); color: var(--ambar-tinta);
  border-bottom: 3px solid var(--ambar-base);
}
.faixa-ouro > span {
  padding: 15px 18px; display: flex; flex-direction: column; gap: 3px;
  border-right: 1px solid rgba(58,42,5,.18);
  border-top: 1px solid rgba(58,42,5,.18);
}
.faixa-ouro > span:nth-child(-n+2) { border-top: 0; }
.faixa-ouro > span:nth-child(2n) { border-right: 0; }
@media (min-width: 720px) {
  .faixa-ouro { grid-template-columns: repeat(4, 1fr); }
  .faixa-ouro > span { border-top: 0; border-right: 1px solid rgba(58,42,5,.18); }
  .faixa-ouro > span:last-child { border-right: 0; }
}
.faixa-ouro b {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
  font-size: 30px; line-height: 1; letter-spacing: .01em;
}
.faixa-ouro i {
  font-style: normal;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t-rotulo); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(58,42,5,.72);
}

/* ============ A REGUA ============
   Barra fixa que mostra SEMPRE o proximo passo, e so ele. O botao de concluir
   estava a 1.457px do topo da ficha: tres telas e meia de rolagem pra fazer
   a unica coisa que o produto pede. */
#barra-acao {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--painel);
  border-top: 3px solid var(--ambar-base);
  box-shadow: 0 -10px 30px -18px rgba(58,42,5,.7);
}
#barra-acao .ba-capa {
  flex: none; width: 34px; height: 50px; border-radius: 3px; overflow: hidden;
  position: relative; background: var(--creme-fundo);
  box-shadow: 0 0 0 1px var(--fio);
}
#barra-acao .ba-capa img,
#barra-acao .ba-capa .capa-auto { position: absolute; inset: 0; width: 100%; height: 100%; }
#barra-acao .ba-capa img { object-fit: cover; }
.ba-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ba-rotulo {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ambar-texto); font-weight: 600;
}
.ba-obra {
  font-family: 'Archivo', system-ui, sans-serif; font-variation-settings: 'wdth' 112;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  font-size: var(--t-micro); color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#barra-acao #area-concluir { display: flex; gap: 8px; flex: none; margin: 0; }
#barra-acao .tecla-acao { padding: 13px 22px; font-size: var(--t-micro); }

/* em celular o segundo botao ("vi 10+ episodios") nao cabe ao lado:
   ele desce pra uma segunda linha em vez de espremer o principal */
@media (max-width: 560px) {
  #barra-acao { flex-wrap: wrap; gap: 10px 12px; }
  #barra-acao .ba-capa { width: 28px; height: 42px; }
  #barra-acao #area-concluir { flex: 1 1 100%; }
  #barra-acao #area-concluir .tecla { flex: 1 1 auto; text-align: center; }
}

/* a barra cobre o fim da pagina; o rodape ganha folga do tamanho dela */
body.com-barra { padding-bottom: 96px; }
@media (max-width: 560px) { body.com-barra { padding-bottom: 148px; } }

/* ============ O CEU DE VERDADE ============
   Estrela comum e ponto redondo. So as poucas MUITO brilhantes recebem os
   quatro raios, porque quatro raios sao difracao de verdade, e e por isso
   que a estrela da marca ja era realismo. */

.ceu { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ceu .camada { position: absolute; inset: 0; }
.ceu .camada-media { transition: transform .9s var(--curva-saida);
  transform: translate(calc(var(--mx, 0) * 4px),  calc(var(--my, 0) * 4px)); }
.ceu .camada-alta  { transition: transform .9s var(--curva-saida);
  transform: translate(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 10px)); }

/* a Via Lactea: custa um gradiente e entrega metade do realismo */
.ceu .via-lactea {
  position: absolute; left: -20%; top: -10%; width: 140%; height: 120%;
  background: linear-gradient(74deg,
    transparent 34%, rgba(214,226,238,.055) 46%, rgba(226,232,240,.075) 50%,
    rgba(214,226,238,.05) 55%, transparent 68%);
}

/* os pontos comuns: redondos, PARADOS, com temperatura de cor */
.ceu .poeira, .ceu .pequena {
  position: absolute; border-radius: 50%;
  background: var(--cor, #fff);
}
.ceu .pequena { box-shadow: 0 0 4px 1px rgba(255,255,255,.20); }

/* as notaveis: as unicas com a forma da marca e as unicas que se mexem */
.ceu .notavel {
  position: absolute;
  -webkit-mask: var(--mask-estrela) center / contain no-repeat;
          mask: var(--mask-estrela) center / contain no-repeat;
  background: #FFF6EA;
  filter: drop-shadow(0 0 6px rgba(255,246,234,.5));
  animation: cintilar 6s ease-in-out infinite;
  will-change: opacity;
}
.ceu .notavel.ambar {
  background: var(--ambar);
  filter: drop-shadow(0 0 12px rgba(243,181,63,.6));
}
@keyframes cintilar {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ============ MOVIMENTO REDUZIDO ============ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ceu .notavel { opacity: .8; }
}