/* =========================================================
   DESEMPENHO — a pergunta de cada carregamento, a escolha do topo e o
   modo desempenho. "Experiência imersiva" é o site de sempre, sem
   nenhuma mudança; tudo aqui vale só com o modo desempenho ligado
   (html.pc-fraco; também enquanto a pergunta está na tela), além da
   própria pergunta e da escolha.
   desempenho.js liga <html class="pc-fraco"> e troca de lado os
   blocos @media (prefers-reduced-motion) de todas as folhas: tudo que
   já fica parado com "menos movimento" fica parado aqui também. Este
   arquivo cuida do resto: os enfeites que rodam sem parar mesmo com
   "menos movimento", as camadas de tela cheia e os desfoques.
   Celular: bloco "DESEMPENHO" no fim do mobile.css.
   Prefixo: .pcf-
   ========================================================= */

/* ---------- a pergunta de cada carregamento (#pcf-pergunta, no começo do <body>) ----------
   Fita VHS como o portão: fundo quase preto, título em serifa creme, detalhe vermelho. Sem desfoque e sem
   animação: abre leve até num aparelho fraco (o site por trás também está leve enquanto ela está na tela). */
.pcf-perg {
  width: min(660px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0;
  overflow: auto; overscroll-behavior: contain;
  border: 1px solid #5a1016; border-radius: 4px;
  background: #0b0506; color: #efe6d6;
  box-shadow: 0 0 0 1px #000, 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(224, 32, 46, 0.16);
}
.pcf-perg::backdrop { background: rgba(3, 1, 2, 0.9); }
.pcf-perg-caixa { padding: 26px 28px 22px; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px); }
.pcf-perg-sinal { margin: 0 0 10px; font: 20px/1 var(--font-crt); letter-spacing: 0.12em; text-transform: uppercase; color: #ff5252; }
.pcf-perg-titulo { margin: 0 0 22px; font: 700 clamp(19px, 2.6vw, 24px)/1.3 var(--font-logo); color: #fff4e2; text-wrap: balance; }
.pcf-perg-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pcf-perg-op {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  min-height: 44px; padding: 18px 16px 14px;
  border: 1px solid #3d2c2e; border-radius: 3px;
  background: #150a0c; color: inherit;
  font: 14px/1.45 var(--font-type); text-align: left;
  cursor: pointer;
}
.pcf-perg-op:hover { border-color: #8a2a30; background: #1d0d10; }
.pcf-perg-op:focus-visible { outline: 3px solid #ffc764; outline-offset: 3px; }
.pcf-perg-imersiva { border-color: #b3262f; box-shadow: inset 0 0 0 1px rgba(224, 32, 46, 0.3), 0 0 18px rgba(224, 32, 46, 0.18); }
.pcf-perg-nome { font: 700 17px/1.2 var(--font-ui); color: #fff; }
.pcf-perg-tag { position: absolute; top: -10px; right: 12px; padding: 2px 8px; background: #d11f2c; color: #fff; font: 700 11px/1.4 var(--font-small); letter-spacing: 0.06em; text-transform: uppercase; }
.pcf-perg-desc { color: #dccfbe; }
/* a última escolha deste aparelho: moldura dourada e o aviso embaixo (e o foco já nela: Enter confirma) */
.pcf-perg-marca { display: none; margin-top: auto; padding-top: 4px; font: 700 11px/1.3 var(--font-small); letter-spacing: 0.04em; text-transform: uppercase; color: #ffc764; }
.pcf-perg-ultima { border-color: #d9a441; }
.pcf-perg-ultima .pcf-perg-marca { display: block; }
.pcf-perg-nota { margin: 18px 0 0; font: 13px/1.5 var(--font-small); color: #bcae9a; }

/* ---------- a escolha do topo: [✨ Imersiva | ⚡ Desempenho] ---------- */
.pcf-modo {
  display: inline-flex; align-items: stretch; gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: linear-gradient(rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.pcf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 4px 10px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.66);
  font: 700 11px var(--font-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.pcf-btn:hover { color: #fff; }
.pcf-btn[aria-pressed="true"] { color: #fff; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55); cursor: default; }
.pcf-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pcf-ico { font-size: 13px; line-height: 1; }
.theme-upside .pcf-btn[aria-pressed="true"] { background: #2a0508; color: #ffe1e1; box-shadow: inset 0 0 0 1px rgba(224, 32, 46, 0.6); }
/* Hawkins: a mesma matéria da chave dos mundos em cada página (cores do cromo de cada lugar) */
.theme-hawkins .pcf-modo { background: var(--hk-ctl-bg); border: 1px solid var(--hk-ctl-line); box-shadow: none; }
/* o não escolhido puxa um quarto para a tinta de cada página: contraste de pelo menos 4,5:1 até no papel do jornal
   e no mural de cortiça (medido por pixels) */
.theme-hawkins .pcf-btn { color: color-mix(in srgb, var(--hk-ctl-dim) 75%, var(--hk-ctl-ink)); }
.theme-hawkins .pcf-btn:hover { color: var(--hk-ctl-ink); }
.theme-hawkins .pcf-btn[aria-pressed="true"] { background: var(--hk-ctl-ink); color: #14171b; box-shadow: none; }
.theme-hawkins .pcf-btn:focus-visible { outline-color: var(--hk-focus); }
.theme-hawkins[data-page="jornal"] .pcf-modo { border-radius: 1px; }
.theme-hawkins[data-page="jornal"] .pcf-btn { border-radius: 0; }
.theme-hawkins[data-page="jornal"] .pcf-btn[aria-pressed="true"] { color: #f4ecd8; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .pcf-modo { border-width: 2px; border-radius: 0; box-shadow: 2px 2px 0 #111; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .pcf-btn { border-radius: 0; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .pcf-btn[aria-pressed="true"] { color: #fff; }
/* thefacebook: botões "saltados" do Windows; o escolhido fica afundado */
.theme-hawkins[data-page="rede"] .pcf-modo { gap: 0; padding: 2px; border: 1px solid; border-color: #fff #777 #777 #fff; border-radius: 0; background: #f0f0f0; }
.theme-hawkins[data-page="rede"] .pcf-btn { border-radius: 0; color: #6c6c6c; font: 700 10px Tahoma, sans-serif; letter-spacing: 0.04em; }
.theme-hawkins[data-page="rede"] .pcf-btn:hover { color: #333; }
.theme-hawkins[data-page="rede"] .pcf-btn[aria-pressed="true"] { background: #fff; color: #3b5998; box-shadow: inset 1px 1px 0 #777, inset -1px -1px 0 #fff; }

/* ---------- modo desempenho (e enquanto a pergunta está na tela) ---------- */
/* camadas de tela cheia redesenhadas o tempo todo: chuvisco, vaga-lumes/esporos, rastro do cursor
   (as veias das vinhas já somem com o "menos movimento") */
html.pc-fraco :is(.grain, #spores, #cursor-fx) { display: none; }
/* enfeites que continuam rodando mesmo com "menos movimento" */
html.pc-fraco :is(.hero-clouds, .hero-fog, .red-pulse, .starburst, .hero-logo, .dot, .nq-cursor, .vhs-blink, .gate-btn,
  .hl-bulb, .hk-window-glass, .hk-arcade-name, .hk-fog, .eq i, .ticker-move, .mvs-marquee span),
html.pc-fraco :is(.typewriter, .typing, .cls-board, .gate)::after,
html.pc-fraco :is(.hk-fog, .gate)::before { animation: none !important; }
/* letreiros parados: a notícia rola com o dedo/mouse em vez de correr sozinha */
html.pc-fraco .ticker-track { overflow-x: auto; }
html.pc-fraco .mvs-marquee { padding-left: 12px; padding-right: 12px; text-overflow: ellipsis; }
html.pc-fraco .mvs-marquee span { display: inline; padding-left: 0; }
/* desfoque do fundo das janelas: o véu escuro já cobre o site */
html.pc-fraco ::backdrop, html.pc-fraco .wz-foot { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* lanterna do Invertido parada no meio da tela (não segue o mouse: repintar a escuridão a cada movimento é caro) */
html.pc-fraco .darkness { --mx: 50% !important; --my: 45% !important; }