/* =========================================================
   HAWKINS — o ambiente de cada página (só o tema Hawkins)
   Tudo aqui começa com .theme-hawkins: o Mundo Invertido continua
   inteiro no style.css e não é tocado. O <body> recebe data-page
   (app.js → activatePage) e cada página monta o próprio lugar em
   volta do conteúdo, em Hawkins, Indiana, 2003:
     Início ......... a rua à noite (casas, fliperama, poste, névoa)
     thefacebook .... a web de 2003 (portal cinza, abas, Verdana)
     Classes ........ o mural de cortiça da Hawkins High
     Melvald's ...... dentro da loja (madeira, toldo, caixa registradora)
     Loja online .... um computador de 2003 num quarto escuro (CRT)
     Jornal ......... a redação do Hawkins Post (papel, tinta, vermelho)
     Moradores ...... a revista em quadrinhos: página do álbum de cartas
     Minha Ficha .... a mesma revista: a página da ficha do personagem
   As animações só existem para quem aceita movimento e quase todas
   rodam uma vez: elementos dentro de uma página escondida (display:none)
   voltam a animar quando a página reaparece.
   Prefixo das peças novas: .hk-
   ========================================================= */

/* ---------- base: noite de cidade pequena, sem o roxo do portal antigo ---------- */
body.theme-hawkins { background-color: #0f1216; background-image: none; }
.theme-hawkins #site {
  --bg: #0f1216; --panel: #171b21; --panel-2: #1f242c; --line: #343b46;
  --text: #ece6da; --muted: #a9a396; --red: #cf4a3b; --red-deep: #a3342a; --red-glow: rgba(207, 74, 59, 0.35);
  --teal: #8cc9c2; --gold: #e8b964;
  /* cromo do site: cada página troca estes valores */
  --hk-accent: #e8b964;
  --hk-focus: #f2c46b;
  --hk-top-bg: #0a0d10; --hk-top-ink: #9a9487; --hk-top-strong: #ece6da; --hk-top-link: #e8b964; --hk-top-line: rgba(255, 255, 255, 0.06);
  --hk-head-bg: linear-gradient(#161a1f, #12151a); --hk-head-ink: #f1ebdd; --hk-head-sub: #a39d90; --hk-head-line: #262b33;
  --hk-brand-font: 700 23px/1.1 var(--font-logo); --hk-brand-b: #e8b964;
  --hk-orb-bg: radial-gradient(circle at 50% 42%, #d45544, #8d2a20); --hk-orb-ink: #fff4e2; --hk-orb-line: #f1d7a8; --hk-orb-radius: 50%;
  --hk-ctl-bg: #1b1f25; --hk-ctl-line: #353c46; --hk-ctl-ink: #f1ebdd; --hk-ctl-dim: #9b978e;
  --hk-nav-bg: #111418; --hk-nav-line: #262b33; --hk-nav-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  --hk-nav-font: 700 14px var(--font-ui); --hk-nav-case: none; --hk-nav-track: 0.01em;
  --hk-tab-ink: #a8a295; --hk-tab-hover: #f1ebdd; --hk-tab-hover-bg: transparent; --hk-tab-on-ink: #fff4dc; --hk-tab-on-bg: transparent; --hk-tab-mark: #e8b964;
  --hk-foot-bg: #0a0d10; --hk-foot-ink: #8c877b; --hk-foot-link: #e8b964; --hk-foot-line: #20252c;
  /* botões: tinta esmaltada com borda de apoio (afunda ao apertar), nada de brilho de gel */
  --hk-btn-bg: #b8412f; --hk-btn-ink: #fff3e3; --hk-btn-edge: #6c2419; --hk-btn-radius: 3px; --hk-btn-font: 700 15px var(--font-ui);
  --hk-btn2-bg: #2b3139; --hk-btn2-ink: #f1ebdd; --hk-btn2-edge: #12161b;
  --hk-box-bg: #171b21; --hk-box-line: #2c323b; --hk-boxhead-bg: #1d2128; --hk-boxhead-ink: #f1ebdd; --hk-boxhead-line: #e8b964;
}

/* ---------- barrinha, cabeçalho, abas e rodapé (a estrutura é a mesma; a matéria muda por página) ---------- */
.theme-hawkins .topbar { background: var(--hk-top-bg); border-bottom: 1px solid var(--hk-top-line); color: var(--hk-top-ink); }
.theme-hawkins .topbar b { color: var(--hk-top-strong); }
.theme-hawkins .topbar a, .theme-hawkins .wallet-chip a { color: var(--hk-top-link); }
.theme-hawkins .masthead { background: var(--hk-head-bg); border-bottom: 1px solid var(--hk-head-line); box-shadow: none; }
.theme-hawkins .brand { color: var(--hk-head-ink); }
.theme-hawkins .brand-text { font: var(--hk-brand-font); text-shadow: none; }
.theme-hawkins .brand-text b { color: var(--hk-brand-b); }
.theme-hawkins .brand-text small { color: var(--hk-head-sub); }
.theme-hawkins .orb { width: 50px; height: 50px; border-radius: var(--hk-orb-radius); background: var(--hk-orb-bg); color: var(--hk-orb-ink); font: 700 18px var(--font-logo); text-shadow: none; box-shadow: inset 0 0 0 2px var(--hk-orb-line), inset 0 0 0 4px rgba(0, 0, 0, 0.25), 0 3px 8px rgba(0, 0, 0, 0.4); transition: transform 0.25s ease; }
.theme-hawkins .orb::after { display: none; }
.theme-hawkins .brand:hover .orb { transform: rotate(-6deg); }
.theme-hawkins .brand:focus-visible { outline: 2px solid var(--hk-focus); outline-offset: 4px; }
.theme-hawkins .theme-switch { background: var(--hk-ctl-bg); border: 1px solid var(--hk-ctl-line); box-shadow: none; color: var(--hk-ctl-dim); }
.theme-hawkins .theme-switch .sw-h { color: var(--hk-ctl-ink); }
.theme-hawkins .theme-switch:focus-visible { outline: 2px solid var(--hk-focus); outline-offset: 3px; }
.theme-hawkins .sw-track { background: #0c0e11; }
.theme-hawkins .tabs-nav { background: var(--hk-nav-bg); border-bottom: 1px solid var(--hk-nav-line); box-shadow: var(--hk-nav-shadow); }
.theme-hawkins .tabs-in { gap: 2px; padding-top: 0; }
.theme-hawkins .tabs-nav a { position: relative; padding: 12px 14px 11px; border: 0; border-radius: 0; background: var(--hk-tab-bg, none); color: var(--hk-tab-ink); font: var(--hk-nav-font); letter-spacing: var(--hk-nav-track); text-transform: var(--hk-nav-case); text-shadow: none; transition: color 0.15s, background-color 0.15s; }
.theme-hawkins .tabs-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: var(--hk-tab-mark); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease; }
.theme-hawkins .tabs-nav a:hover { color: var(--hk-tab-hover); background: var(--hk-tab-hover-bg); }
.theme-hawkins .tabs-nav a:hover::after { transform: scaleX(0.3); }
.theme-hawkins .tabs-nav a.active { color: var(--hk-tab-on-ink); background: var(--hk-tab-on-bg); text-shadow: none; }
.theme-hawkins .tabs-nav a.active::after { transform: none; }
.theme-hawkins .tabs-nav a:focus-visible { outline: 2px solid var(--hk-focus); outline-offset: -3px; }
.theme-hawkins .footer { background: var(--hk-foot-bg); border-top: 1px solid var(--hk-foot-line); color: var(--hk-foot-ink); }
.theme-hawkins .footer-links a { color: var(--hk-foot-link); }
.theme-hawkins .footer a:focus-visible, .theme-hawkins .topbar a:focus-visible { outline: 2px solid var(--hk-focus); outline-offset: 2px; }

/* ---------- peças comuns dentro do site (valem para Admin e XP; as páginas trocam o que precisam) ---------- */
.theme-hawkins #site .box { border-radius: 4px; background: var(--hk-box-bg); border-color: var(--hk-box-line); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32); }
.theme-hawkins #site .box-head { background: var(--hk-boxhead-bg); border-bottom: 2px solid var(--hk-boxhead-line); box-shadow: none; }
.theme-hawkins #site .box-head h2 { color: var(--hk-boxhead-ink); font: 700 18px var(--font-logo); text-shadow: none; }
.theme-hawkins #site .box-icon { background: none; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--hk-boxhead-line); }
.theme-hawkins #site .box-tag { border-radius: 2px; background: rgba(0, 0, 0, 0.3); color: var(--hk-boxhead-ink); }
.theme-hawkins #site .widget { border-radius: 4px; background: var(--hk-box-bg); border-color: var(--hk-box-line); }
.theme-hawkins #site .widget-head { background: var(--hk-boxhead-bg); box-shadow: none; text-shadow: none; border-bottom: 2px solid var(--hk-boxhead-line); color: var(--hk-boxhead-ink); }
.theme-hawkins #site .gloss-btn { border: 1px solid var(--hk-btn-edge); border-radius: var(--hk-btn-radius); background: var(--hk-btn-bg); color: var(--hk-btn-ink); font: var(--hk-btn-font); text-shadow: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 3px 0 var(--hk-btn-edge), 0 6px 12px rgba(0, 0, 0, 0.25); transition: transform 0.08s ease, filter 0.15s, box-shadow 0.08s ease; }
.theme-hawkins #site .gloss-small { font-size: 13px; }
.theme-hawkins #site .gloss-btn:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 3px 0 var(--hk-btn-edge), 0 8px 16px rgba(0, 0, 0, 0.3); }
.theme-hawkins #site .gloss-btn:active { transform: translateY(3px); filter: brightness(0.96); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 var(--hk-btn-edge), 0 2px 4px rgba(0, 0, 0, 0.25); }
.theme-hawkins #site .gloss-btn:focus-visible { outline: 2px solid var(--hk-focus); outline-offset: 3px; }
.theme-hawkins #site .gloss-btn.gloss-alt { --hk-btn-bg: var(--hk-btn2-bg); --hk-btn-ink: var(--hk-btn2-ink); --hk-btn-edge: var(--hk-btn2-edge); }
.theme-hawkins #site :is(input, select, textarea):focus { border-color: var(--hk-focus); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px color-mix(in srgb, var(--hk-focus) 30%, transparent); }
.theme-hawkins #site .lead { color: var(--muted); }
.theme-hawkins #site ::selection { background: color-mix(in srgb, var(--hk-accent) 45%, transparent); }

/* ---------- troca de página: a sala fica no escuro e o fio de luzes de Natal da parede da Joyce acende ----------
   (a base está em style.css → .page-transition; aqui as lâmpadas coloridas, em onda limpa, sem queimadas).
   A página em si não anima: cada uma tem a própria entrada (mais abaixo). */
.theme-hawkins .page-transition::before { background: radial-gradient(ellipse 120% 75% at 50% 0%, rgba(38, 24, 40, 0.97), rgba(4, 4, 9, 0.985) 72%); }
.theme-hawkins .ptx-wire path { stroke: #17271c; }
.theme-hawkins .ptx-bulb { --c: var(--hc); background: radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.3) 0 9%, transparent 24%), color-mix(in srgb, var(--c) 30%, #0b0a10); }
.theme-hawkins .ptx-bulb::before { background: #122416; }
.theme-hawkins .page-transition.playing .ptx-bulb i { animation-name: ptxBulb; animation-delay: calc(40ms + var(--p) * 240ms); }
@keyframes ptxBulb { 0% { opacity: 0; } 12% { opacity: 1; } 19% { opacity: 0.35; } 28%, 72% { opacity: 1; } 100% { opacity: 0.25; } }
.theme-hawkins #site.site-pages .site-page.page-entering { animation: none; }

/* grão de filme por página (a web e a tela do computador ficam limpas) */
.theme-hawkins .grain { opacity: 0.045; }
.theme-hawkins:is([data-page="rede"], [data-page="compras"]) .grain { display: none; }
.theme-hawkins[data-page="jornal"] .grain { opacity: 0.06; }

/* ---------- rádio WSQK: um rádio de verdade (plástico preto, visor âmbar, alto-falante) igual em todas as páginas ---------- */
.theme-hawkins #site .widget.radio-float { border: 1px solid #07080a; border-radius: 10px; background: linear-gradient(#2d2f33, #1c1d20 55%, #151618); color: #e9e4d8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.55); }
.theme-hawkins #site .radio-float .radio-head { margin: 8px 8px 0; padding: 5px 6px 9px 10px; border: 1px solid #000; border-radius: 4px; border-bottom: 0; background: repeating-linear-gradient(90deg, rgba(255, 196, 92, 0.55) 0 1px, transparent 1px 9px) left bottom / 100% 5px no-repeat, linear-gradient(#141210, #0b0a09); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8); color: #ffc764; font: 20px/1 var(--font-crt); letter-spacing: 0.06em; text-shadow: 0 0 6px rgba(255, 180, 70, 0.55); }
.theme-hawkins #site .radio-float .radio-min { border-color: #5b5e64; border-radius: 3px; background: linear-gradient(#4a4d53, #2c2e32); color: #e9e4d8; font-size: 11px; }
.theme-hawkins #site .radio-float .radio-body { padding: 10px 12px 12px; }
.theme-hawkins #site .radio-float .eq { padding: 4px; border-radius: 3px; background: #0b0b0a; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.9); }
.theme-hawkins #site .radio-float .eq i { border-radius: 0; background: linear-gradient(to top, #62d77f, #e6c957 65%, #e35a3b); -webkit-mask: repeating-linear-gradient(to top, #000 0 3px, transparent 3px 4px); mask: repeating-linear-gradient(to top, #000 0 3px, transparent 3px 4px); }
.theme-hawkins #site .radio-float .radio-now { color: #b9b3a6; }
.theme-hawkins #site .radio-float .radio-now a { color: #ffc764; }
.theme-hawkins #site .radio-float :is(.radio-power, .radio-volume button) { border: 1px solid #000; background: linear-gradient(#3b3e44, #222428); color: #f1ebdd; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 #000; }
.theme-hawkins #site .radio-float .radio-power { border-radius: 5px; font: 700 12px var(--font-small); }
.theme-hawkins #site .radio-float :is(.radio-power, .radio-volume button):active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 #000; }
.theme-hawkins #site .radio-on .radio-power { background: linear-gradient(#b8412f, #8e2c1f); border-color: #3d110b; }
.theme-hawkins #site .radio-float .radio-volume input { accent-color: #ffc764; }
.theme-hawkins #site .radio-float .radio-volume output { color: #ffc764; font-family: var(--font-crt); font-size: 15px; }
.theme-hawkins #site .radio-float :is(button, input, a):focus-visible { outline-color: #ffc764; }
/* encolhido: o alto-falante redondo com a luzinha de "no ar" */

/* ---------- avisos: cada página fala com o próprio papel (mais abaixo) ---------- */
.theme-hawkins .toast { border: 1px solid #3a3f47; border-left: 4px solid #e8b964; border-radius: 3px; background: #1b1d21; color: #f1ebdd; text-shadow: none; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); }
.theme-hawkins:is([data-page="rede"], [data-page="compras"]) .toast { border: 1px solid #000; border-radius: 6px; background: #ffffe1; color: #000; font: 12px Tahoma, Verdana, sans-serif; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.35); }
.theme-hawkins[data-page="jornal"] .toast { border: 1px solid #24212b; border-top: 3px double #24212b; border-radius: 0; background: #efe7d2; color: #24212b; font: 700 14px "Newsreader", Georgia, serif; }
.theme-hawkins[data-page="loja"] .toast { border: 0; border-radius: 0; background: #fffdf5; color: #2c2620; font: 700 13px var(--font-type); clip-path: polygon(0 0, 100% 0, 100% 86%, 96% 100%, 92% 86%, 88% 100%, 84% 86%, 80% 100%, 76% 86%, 72% 100%, 68% 86%, 64% 100%, 60% 86%, 56% 100%, 52% 86%, 48% 100%, 44% 86%, 40% 100%, 36% 86%, 32% 100%, 28% 86%, 24% 100%, 20% 86%, 16% 100%, 12% 86%, 8% 100%, 4% 86%, 0 100%); padding-bottom: 16px; }
.theme-hawkins[data-page="classes"] .toast { border: 0; border-top: 6px solid #d34b3c; border-radius: 2px; background: #fbf6e8; color: #2a2420; font: 700 13px var(--font-type); }

@media (prefers-reduced-motion: reduce) {
  .theme-hawkins .grain { animation: none; }
}
.theme-hawkins :is(.radio-float.radio-mini, #site:has(.page-active :is(.jn-ed-bar, .xp-post), .rede-wrap.page-active) .radio-float:not(.radio-peek)) .radio-open { border: 2px solid #5b5e64; background: radial-gradient(circle, #0e0f11 1.2px, transparent 1.6px) 0 0 / 5px 5px, radial-gradient(circle at 50% 38%, #3a3d42, #16171a 70%); color: #f1ebdd; box-shadow: inset 0 0 0 3px #111214, 0 6px 16px rgba(0, 0, 0, 0.55); }

/* =========================================================
   INÍCIO — Hawkins, Indiana, 2003, à noite.
   O céu é a página inteira; o letreiro de Stranger Things fica no céu
   sobre a rua (casas com janelas acesas, o Palace Arcade, a caixa-d'água,
   postes com fios, o poste de luz com uma bicicleta encostada). Os botões
   viram placas de rua; o letreiro de notícias é o painel de LED da cidade.
   Movimento só ambiente: janelas que apagam, o poste que falha às vezes,
   névoa bem leve, lâmpadas que respiram.
   ========================================================= */
.theme-hawkins[data-page="inicio"] { background-color: #060a13; }
.theme-hawkins[data-page="inicio"] #site {
  --hk-top-bg: #04070d; --hk-top-line: rgba(160, 180, 220, 0.08);
  --hk-head-bg: linear-gradient(#050910, #070c16); --hk-head-line: transparent;
  --hk-nav-bg: linear-gradient(#070c16, #081020); --hk-nav-line: rgba(160, 180, 220, 0.1); --hk-nav-shadow: none;
  --hk-tab-ink: #9aa3b5; --hk-tab-hover: #fff1cf; --hk-tab-on-ink: #ffe7b0; --hk-tab-mark: #ffc764;
  --hk-foot-bg: #07090c; --hk-foot-line: #14181e;
}
.theme-hawkins[data-page="inicio"] .tabs-nav a.active { text-shadow: 0 0 12px rgba(255, 199, 100, 0.55); }
.theme-hawkins[data-page="inicio"] .tabs-nav a.active::after { box-shadow: 0 0 10px rgba(255, 199, 100, 0.7); }
.theme-hawkins #inicio.hero-wrap { max-width: none; padding: 0; background: #07090c; }
.theme-hawkins .hero { min-height: clamp(540px, calc(100vh - 150px), 820px); padding: 84px 16px clamp(150px, 20vw, 230px); border: 0; border-radius: 0; box-shadow: none; }
.theme-hawkins .hero::after { display: none; }
.theme-hawkins .hero .scanlines, .theme-hawkins .aurora, .theme-hawkins .bokeh, .theme-hawkins .starburst { display: none; }
/* céu: azul-noite em cima, clareando no horizonte com a luz da cidade */
.theme-hawkins .sky-h { background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 170, 90, 0.16), transparent 70%), linear-gradient(#060a13 0%, #0a1222 36%, #111c31 64%, #1c2539 86%, #2a2b3a 100%); }
.theme-hawkins .sky-h::before { inset: 0 0 38% 0; animation-duration: 9s; }
.theme-hawkins .hk-street { inset: 0; overflow: hidden; }
.hk-moon { position: absolute; right: 13%; top: 13%; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #f8f2de, #ddd5bd 58%, #bfb79e); box-shadow: 0 0 40px 8px rgba(240, 232, 200, 0.16), 0 0 140px 50px rgba(160, 175, 215, 0.08); opacity: 0.92; }
.hk-moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 64% 60%, rgba(150, 140, 115, 0.35) 0 9%, transparent 10%), radial-gradient(circle at 36% 68%, rgba(150, 140, 115, 0.25) 0 6%, transparent 7%), radial-gradient(circle at 58% 30%, rgba(150, 140, 115, 0.22) 0 5%, transparent 6%); }
.hk-town { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(170px, 25vw, 320px); }
.hk-trees-far { fill: #0e1a26; }
.hk-trees { fill: #09121b; }
.hk-houses, .hk-arcade > path { fill: #060b11; }
.hk-tower > path:first-child { fill: none; stroke: #0b131c; stroke-width: 4; }
.hk-tower rect, .hk-tower > path:nth-of-type(2) { fill: #0b131c; }
.hk-tower text { fill: #1d2a38; font: 700 11px "Barlow Condensed", sans-serif; letter-spacing: 0.14em; text-anchor: middle; }
.hk-win { fill: #f2c26a; }
.hk-win-off { fill: #0e1620; }
.hk-win-late { animation: hkWinLate 46s ease-in-out infinite; }
.hk-win-tv { fill: #a9c8ec; animation: hkTv 9s steps(1) infinite; }
.hk-win-arc { fill: #6fb6f0; opacity: 0.55; }
.hk-arcade-sign { fill: #150d1b; stroke: #ff5fae; stroke-width: 1.6; filter: drop-shadow(0 0 3px rgba(255, 95, 174, 0.8)); }
.hk-arcade-name { fill: #ffd3ea; font: 700 13px "Barlow Condensed", sans-serif; letter-spacing: 0.16em; text-anchor: middle; filter: drop-shadow(0 0 3px rgba(255, 95, 174, 0.9)); animation: hkNeon 13s steps(1) infinite; }
.hk-arcade-door { fill: #2b2140; }
.hk-poles path { fill: none; stroke: #070b10; stroke-width: 5; }
.hk-wires { fill: none; stroke: #04070b; stroke-width: 1.4; }
.hk-lamp-post { fill: none; stroke: #070b10; stroke-width: 6; }
.hk-lamp-head { fill: #1a2027; }
.hk-cone { fill: url(#hk-cone-g); }
.hk-lamp-glow { fill: url(#hk-glow-g); }
.hk-cone, .hk-lamp-glow { animation: hkLamp 11s linear infinite; }
.hk-flyer rect { fill: #efe3c3; }
.hk-flyer text { fill: #b3261e; font: 900 9px Arial, sans-serif; text-anchor: middle; }
.hk-flyer .hk-flyer-y { fill: #2a2420; font-size: 10px; }
.hk-tape { fill: rgba(236, 226, 196, 0.7); }
.hk-bike { fill: none; stroke: #070b10; stroke-width: 3; }
.hk-road { fill: #05070a; }
.hk-fog { position: absolute; left: -10%; right: -10%; bottom: 0; height: 42%; pointer-events: none; background: radial-gradient(ellipse 40% 60% at 28% 100%, rgba(170, 186, 214, 0.1), transparent 70%), radial-gradient(ellipse 34% 52% at 76% 100%, rgba(170, 186, 214, 0.08), transparent 70%); animation: hkFog 70s ease-in-out infinite alternate; }
@keyframes hkWinLate { 0%, 58%, 100% { fill: #f2c26a; } 61%, 88% { fill: #0e1620; } }
@keyframes hkTv { 0%, 100% { fill: #a9c8ec; } 18% { fill: #8fb0d8; } 37% { fill: #c1d6f0; } 55% { fill: #7e9dc6; } 74% { fill: #b5cdec; } }
@keyframes hkNeon { 0%, 71%, 74%, 100% { opacity: 1; } 72% { opacity: 0.35; } 73% { opacity: 0.9; } }
@keyframes hkLamp { 0%, 63%, 64.6%, 66%, 100% { opacity: 1; } 63.6% { opacity: 0.25; } 65.3% { opacity: 0.55; } }
@keyframes hkFog { to { transform: translateX(6%); } }
/* lâmpadas penduradas sobre a rua: cada uma respira no próprio tempo; nada de pisca-pisca correndo */
.theme-hawkins .hero-lights .wire { stroke: #03050a; }
.theme-hawkins .hl-bulb { filter: none; box-shadow: 0 0 6px 1px var(--c), 0 0 18px 4px color-mix(in srgb, var(--c) 32%, transparent); animation: hkBulb 7s ease-in-out infinite; animation-delay: calc(var(--i) * -0.9s); }
.theme-hawkins .hl-bulb:nth-child(9n + 5) { animation: hkBulbOld 17s steps(1) infinite; animation-delay: calc(var(--i) * -1.3s); }
@keyframes hkBulb { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }
@keyframes hkBulbOld { 0%, 80%, 82%, 100% { opacity: 1; } 81% { opacity: 0.2; } 81.5% { opacity: 0.8; } }
/* o letreiro no céu, com a legenda datilografada logo abaixo */
.theme-hawkins .hero-tag { max-width: 560px; color: #efe7d4; text-shadow: 0 1px 2px #000, 0 0 18px rgba(0, 0, 0, 0.9); }
.theme-hawkins .typewriter::after { color: #ffc764; }
/* placas de rua: verde refletivo com borda branca; passar o mouse é o farol de um carro passando */
.theme-hawkins .hero-cta { gap: 16px; }
.theme-hawkins #site .hero-cta .gloss-btn { position: relative; overflow: hidden; padding: 10px 22px 9px; border: 0; border-radius: 6px; background: #17683f; color: #fbfaf4; font: 700 19px/1.1 "Barlow Condensed", var(--font-ui); letter-spacing: 0.05em; text-transform: uppercase; box-shadow: inset 0 0 0 3px #17683f, inset 0 0 0 5px #f1efe6, 0 1px 0 #0a3a22, 0 10px 18px rgba(0, 0, 0, 0.5); transition: transform 0.2s ease, filter 0.2s; }
.theme-hawkins #site .hero-cta .gloss-alt { background: #1d4f8f; box-shadow: inset 0 0 0 3px #1d4f8f, inset 0 0 0 5px #f1efe6, 0 1px 0 #0d2b52, 0 10px 18px rgba(0, 0, 0, 0.5); }
.theme-hawkins #site .hero-cta .gloss-btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; }
.theme-hawkins #site .hero-cta .gloss-btn:hover { transform: translateY(-2px) rotate(-0.6deg); filter: brightness(1.12); }
.theme-hawkins #site .hero-cta .gloss-btn:hover::before { opacity: 1; animation: hkHeadlight 0.7s ease-out; }
.theme-hawkins #site .hero-cta .gloss-btn:active { transform: translateY(1px); }
.theme-hawkins #site .hero-cta .gloss-btn:focus-visible { outline: 3px solid #ffc764; outline-offset: 4px; }
@keyframes hkHeadlight { from { left: -60%; } to { left: 130%; } }
/* painel de LED da cidade (as manchetes do Hawkins Post passando) */
.theme-hawkins #inicio .ticker { position: relative; max-width: 1052px; margin: 0 auto 30px; padding: 6px; border: 0; border-radius: 4px; background: linear-gradient(#24262b, #111215); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px #000, 0 12px 26px rgba(0, 0, 0, 0.6); }
.theme-hawkins #inicio .ticker-label { margin: 0 6px 0 0; padding: 4px 10px; border-radius: 2px; background: #efe6cf; color: #24212b; font: 700 12px "Barlow Condensed", var(--font-ui); letter-spacing: 0.14em; box-shadow: none; }
.theme-hawkins #inicio .ticker-track { position: relative; min-height: 30px; border-radius: 2px; background: #0b0703; box-shadow: inset 0 1px 6px #000; }
.theme-hawkins #inicio .ticker-track::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, transparent 0.9px, rgba(11, 7, 3, 0.55) 1.4px) 0 0 / 3px 3px; }
.theme-hawkins #inicio .ticker-move { color: #ffb13b; font: 21px/1 var(--font-crt); letter-spacing: 0.08em; text-shadow: 0 0 6px rgba(255, 150, 40, 0.7); animation-duration: 60s; }
.theme-hawkins #inicio .ticker-move span::before { content: "◆ "; color: #ff6a3d; }
.theme-hawkins[data-page="inicio"] .footer { background: linear-gradient(#0b0d11, #07090c); }
/* a cidade "acende" quando a página abre: o céu clareia, as janelas acendem, o letreiro sobe */
@media (prefers-reduced-motion: no-preference) {
  .theme-hawkins .hk-street { animation: hkDusk 1.6s ease-out both; }
  .theme-hawkins .hk-windows { animation: hkLightsOn 2.4s steps(6) both; }
  .theme-hawkins .hero-content { animation: hkRise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
@keyframes hkDusk { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes hkLightsOn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hkRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .theme-hawkins .hero { min-height: 520px; padding: 64px 12px 150px; }
  .hk-moon { right: 8%; top: 8%; width: 38px; height: 38px; }
  .hk-flyer, .hk-tower text { display: none; }
  .theme-hawkins #site .hero-cta .gloss-btn { font-size: 17px; padding: 9px 16px 8px; }
  .theme-hawkins #inicio .ticker { margin: 0 12px 24px; }
  .theme-hawkins #inicio .ticker-label { font-size: 11px; padding: 3px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .hk-win-late, .hk-win-tv, .hk-arcade-name, .hk-cone, .hk-lamp-glow, .hk-fog, .theme-hawkins .hl-bulb, .theme-hawkins .sky-h::before { animation: none; }
  .theme-hawkins #inicio .ticker-track { overflow-x: auto; }
  .theme-hawkins #inicio .ticker-move { animation: none; }
}

/* A rua em profundidade: materiais discretos, volumes e silhuetas orgânicas.
   Cada elemento continua dentro de #inicio e não altera o Mundo Invertido. */
.theme-hawkins #inicio .sky-h {
  background: radial-gradient(ellipse 58% 32% at 51% 100%, rgba(200, 115, 66, .23), transparent 73%),
              linear-gradient(180deg, #040812 0%, #091222 43%, #17263a 76%, #303140 100%);
}
.theme-hawkins #inicio .sky-h::after {
  content: ""; position: absolute; top: 19%; left: 4%; width: 95px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 247, 224, .95), transparent);
  box-shadow: 0 0 7px 1px rgba(255, 243, 213, .65);
  transform: rotate(-21deg) translateX(-220px); opacity: 0;
  animation: hkShootingStar 37s 12s linear infinite;
}
.theme-hawkins #inicio .hk-street::before,
.theme-hawkins #inicio .hk-street::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.theme-hawkins #inicio .hk-street::before {
  z-index: 0;
  background: radial-gradient(ellipse 38% 11% at 27% 62%, rgba(158, 172, 186, .12), transparent 90%),
              radial-gradient(ellipse 31% 8% at 77% 67%, rgba(185, 176, 165, .1), transparent 90%);
  opacity: .8; animation: hkHighMist 25s ease-in-out infinite alternate;
}
.theme-hawkins #inicio .hk-street::after {
  z-index: 2;
  background: linear-gradient(106deg, transparent 42%, rgba(255, 226, 170, .06) 50%, transparent 59%);
  transform: translateX(-110%); animation: hkPassingLight 29s 18s ease-in-out infinite;
}
.theme-hawkins #inicio .hk-moon { z-index: 1; box-shadow: 0 0 40px 8px rgba(240,232,200,.15), 0 0 160px 65px rgba(172,188,221,.11); animation: hkMoonReveal 2.6s ease-out both, hkMoonHalo 13s 3s ease-in-out infinite alternate; }
.theme-hawkins #inicio .hk-town { z-index: 1; overflow: visible; filter: drop-shadow(0 -5px 14px rgba(3, 7, 12, .32)); }
.theme-hawkins #inicio .hk-horizon { fill: #1d2d3a; }
.theme-hawkins #inicio .hk-pine-far > path:not(.hk-trunk) { fill: #172937; }
.theme-hawkins #inicio .hk-pine-far:nth-child(3n) > path:not(.hk-trunk) { fill: #1d303d; }
.theme-hawkins #inicio .hk-trunk { fill: #0c1922; }
.theme-hawkins #inicio .hk-limbs { fill: none; stroke: #0b1721; stroke-width: 5; stroke-linecap: round; }
.theme-hawkins #inicio .hk-oak-middle .hk-foliage { fill: #111f2a; }
.theme-hawkins #inicio .hk-oak-middle .hk-foliage-1 { fill: #172733; }
.theme-hawkins #inicio .hk-oak-middle .hk-foliage-2 { fill: #1b2c37; }
.theme-hawkins #inicio .hk-oak-front .hk-foliage { fill: #08151d; }
.theme-hawkins #inicio .hk-oak-front .hk-foliage-1 { fill: #0d1c25; }
.theme-hawkins #inicio .hk-oak-front .hk-foliage-2 { fill: #12222b; }
.theme-hawkins #inicio .hk-oak-front .hk-limbs { stroke: #07121a; stroke-width: 8; }
.theme-hawkins #inicio .hk-leaf-detail { fill: none; stroke: #75858c; stroke-opacity: .12; stroke-width: .8; stroke-linecap: round; }
.theme-hawkins #inicio .hk-oak { transform-box: fill-box; transform-origin: 50% 100%; animation: hkBranches var(--sway) ease-in-out infinite alternate; }
.theme-hawkins #inicio .hk-house-shadow { fill: rgba(0, 0, 0, .6); }
.theme-hawkins #inicio .hk-house-wall { fill: url(#hk-wall); stroke: #34414b; stroke-opacity: .36; stroke-width: 1; }
.theme-hawkins #inicio .hk-siding { fill: none; stroke: #91a1aa; stroke-opacity: .12; stroke-width: .75; }
.theme-hawkins #inicio .hk-chimney { fill: #0c151d; stroke: #24313a; stroke-width: 2; }
.theme-hawkins #inicio .hk-roof { fill: url(#hk-roof); stroke: #050b11; stroke-width: 2; }
.theme-hawkins #inicio .hk-roof-grain { fill: url(#hk-shingles); opacity: .65; }
.theme-hawkins #inicio .hk-roof-edge { fill: none; stroke: #61707a; stroke-opacity: .35; stroke-width: 1.3; }
.theme-hawkins #inicio .hk-house-gable { fill: #17232d; stroke: #52616b; stroke-opacity: .35; }
.theme-hawkins #inicio .hk-porch-roof { fill: #131e27; stroke: #3e4b52; stroke-opacity: .55; }
.theme-hawkins #inicio .hk-porch-posts, .theme-hawkins #inicio .hk-steps { fill: none; stroke: #53606a; stroke-opacity: .55; stroke-width: 2; }
.theme-hawkins #inicio .hk-door { fill: #0a121a; stroke: #43515b; stroke-width: 1; }
.theme-hawkins #inicio .hk-door-knob { fill: #d1a467; }
.theme-hawkins #inicio .hk-window-halo { fill: url(#hk-window-halo); }
.theme-hawkins #inicio .hk-window-glass { fill: url(#hk-glass); stroke: #080e16; stroke-width: 2; }
.theme-hawkins #inicio .hk-window-off .hk-window-halo { opacity: 0; }
.theme-hawkins #inicio .hk-window-off .hk-window-glass { fill: #121b24; }
.theme-hawkins #inicio .hk-window-tv .hk-window-halo { fill: #a5c9e8; opacity: .17; }
.theme-hawkins #inicio .hk-window-tv .hk-window-glass { fill: #a5c4df; animation: hkTelevision 10s steps(1) infinite; }
.theme-hawkins #inicio .hk-window-person { fill: #17222e; animation: hkCurtainVisitor 23s steps(1) infinite; }
.theme-hawkins #inicio .hk-curtain { fill: #16202a; opacity: .68; }
.theme-hawkins #inicio .hk-window-frame, .theme-hawkins #inicio .hk-window-sill { fill: none; stroke: #7b8890; stroke-width: 1.7; }
.theme-hawkins #inicio .hk-window-sill { stroke: #46545e; stroke-width: 2.5; }
.theme-hawkins #inicio .hk-tower > path:first-child { fill: none; stroke: #101d26; stroke-width: 4; }
.theme-hawkins #inicio .hk-tower rect, .theme-hawkins #inicio .hk-tower > path:nth-of-type(2) { fill: #17252f; stroke: #394751; stroke-width: 1; }
.theme-hawkins #inicio .hk-tower text { fill: #5d6d77; }
.theme-hawkins #inicio .hk-tower-beacon { fill: #c45545; filter: drop-shadow(0 0 3px #ed5a49); animation: hkBeacon 14s steps(1) infinite; }
.theme-hawkins #inicio .hk-arcade-wall { fill: #0d1720; stroke: #41505a; stroke-width: 2; }
.theme-hawkins #inicio .hk-arcade-bricks { fill: url(#hk-bricks); }
.theme-hawkins #inicio .hk-arcade-cornice { fill: #1c2933; stroke: #53616b; stroke-width: 1; }
.theme-hawkins #inicio .hk-arcade-sign { fill: #1b1023; stroke: #ff6da8; stroke-width: 1.8; filter: drop-shadow(0 0 5px #dc3f8f); }
.theme-hawkins #inicio .hk-arcade-name { fill: #ffd3ea; filter: drop-shadow(0 0 3px #ff5fae); animation: hkNeon 13s steps(1) infinite; }
.theme-hawkins #inicio .hk-arcade-awning { fill: #17232e; stroke: #506471; stroke-width: 1; }
.theme-hawkins #inicio .hk-arcade-glass { fill: #3c7297; opacity: .75; stroke: #34434d; stroke-width: 2; animation: hkArcadeScreen 8s ease-in-out infinite alternate; }
.theme-hawkins #inicio .hk-arcade-reflect { stroke: #93bbd1; stroke-opacity: .23; stroke-width: 2; }
.theme-hawkins #inicio .hk-arcade-door { fill: #30273d; stroke: #685174; stroke-width: 1.5; }
.theme-hawkins #inicio .hk-arcade-doorline { stroke: #82708a; stroke-opacity: .5; stroke-width: 1; }
.theme-hawkins #inicio .hk-arcade-score { fill: #b470a6; font: 600 6px var(--font-crt); letter-spacing: .1em; text-anchor: middle; animation: hkScore 15s steps(1) infinite; }
.theme-hawkins #inicio .hk-poles path { fill: none; stroke: #080e16; stroke-width: 5; stroke-linecap: square; }
.theme-hawkins #inicio .hk-poles .hk-pole-brace { stroke: #35414a; stroke-width: 1.2; }
.theme-hawkins #inicio .hk-wires { stroke: #060c12; stroke-width: 1.5; fill: none; }
.theme-hawkins #inicio .hk-lamp-post { fill: none; stroke: #0b121a; stroke-width: 6; }
.theme-hawkins #inicio .hk-lamp-head { fill: #29343c; stroke: #7f765d; stroke-width: 1; }
.theme-hawkins #inicio .hk-lamp-pool { fill: rgba(224, 172, 91, .19); animation: hkLamp 11s steps(1) infinite; }
.theme-hawkins #inicio .hk-flyer { transform-box: fill-box; transform-origin: top center; animation: hkFlyer 7s ease-in-out infinite alternate; }
.theme-hawkins #inicio .hk-flyer > path:first-child { fill: #e2d6ba; }
.theme-hawkins #inicio .hk-flyer text { fill: #ae261e; font: 900 9px Arial, sans-serif; text-anchor: middle; }
.theme-hawkins #inicio .hk-flyer-year { fill: #1c2024 !important; }
.theme-hawkins #inicio .hk-bike { fill: none; stroke: #080e15; stroke-width: 2.7; }
.theme-hawkins #inicio .hk-bike-reflector { fill: #d76848; stroke: none; animation: hkReflector 17s steps(1) infinite; }
.theme-hawkins #inicio .hk-road-surface { fill: url(#hk-roadlight); }
.theme-hawkins #inicio .hk-road-glint { fill: none; stroke: #a5a9a3; stroke-opacity: .25; stroke-width: .8; }
.theme-hawkins #inicio .hk-car { fill: #080d12; stroke: #080d12; opacity: 0; animation: hkNightCar 34s 14s linear infinite; }
.theme-hawkins #inicio .hk-car-headlight { fill: #ffe1a0; stroke: none; opacity: .36; }
.theme-hawkins #inicio .hk-fog { z-index: 3; bottom: -10px; height: 38%; background: radial-gradient(ellipse 34% 47% at 17% 100%, rgba(174, 194, 208, .16), transparent 75%), radial-gradient(ellipse 35% 57% at 73% 90%, rgba(185, 196, 211, .14), transparent 78%); filter: blur(10px); animation: hkFog 45s ease-in-out infinite alternate; }
.theme-hawkins #inicio .hk-fog::before { content: ""; position: absolute; inset: -15% -15%; background: radial-gradient(ellipse 29% 38% at 64% 76%, rgba(179, 194, 208, .17), transparent 82%); animation: hkFogSecond 36s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: no-preference) {
  .theme-hawkins #inicio .hk-street { animation: hkSceneReveal 2.5s ease-out both; }
  .theme-hawkins #inicio .hk-middle-trees { animation: hkTreeReveal 2.2s .3s ease-out both; }
  .theme-hawkins #inicio .hk-neighborhood { animation: hkHousesReveal 1.9s .5s ease-out both; }
  .theme-hawkins #inicio .hk-arcade { animation: hkHousesReveal 1.8s .9s ease-out both; }
  .theme-hawkins #inicio .hk-window { animation: hkWindowWake .18s steps(1) var(--in) both; }
  .theme-hawkins #inicio .hero-content { animation: hkRise 1.1s .4s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes hkSceneReveal { from { opacity: .08; filter: brightness(.36); } to { opacity: 1; filter: brightness(1); } }
@keyframes hkTreeReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hkHousesReveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes hkWindowWake { from { opacity: 0; } to { opacity: 1; } }
@keyframes hkMoonReveal { from { opacity: 0; transform: scale(.75); } to { opacity: .92; transform: scale(1); } }
@keyframes hkMoonHalo { to { box-shadow: 0 0 53px 12px rgba(240,232,200,.2), 0 0 190px 75px rgba(172,188,221,.13); } }
@keyframes hkBranches { to { transform: rotate(.75deg) translateX(1px); } }
@keyframes hkHighMist { to { transform: translateX(7%); opacity: .48; } }
@keyframes hkFogSecond { to { transform: translateX(-8%); opacity: .55; } }
@keyframes hkPassingLight { 0%, 82%, 100% { transform: translateX(-110%); opacity: 0; } 86% { opacity: 1; } 92% { transform: translateX(110%); opacity: .65; } 93% { opacity: 0; } }
@keyframes hkShootingStar { 0%, 61%, 100% { transform: rotate(-21deg) translateX(-220px); opacity: 0; } 62% { opacity: 1; } 64% { transform: rotate(-21deg) translateX(420px); opacity: 0; } }
@keyframes hkTelevision { 0%, 100% { fill: #9ebed9; } 22% { fill: #c6d9e9; } 47% { fill: #6f98c7; } 72% { fill: #adc5de; } }
@keyframes hkCurtainVisitor { 0%, 77%, 83%, 100% { opacity: 0; } 78%, 82% { opacity: .9; } }
@keyframes hkBeacon { 0%, 91%, 94%, 100% { opacity: .12; } 92%, 93% { opacity: 1; } }
@keyframes hkArcadeScreen { to { fill: #557f9a; opacity: .6; } }
@keyframes hkScore { 0%, 84%, 100% { opacity: .58; } 85%, 89% { opacity: 1; } }
@keyframes hkFlyer { to { transform: rotate(3deg); } }
@keyframes hkReflector { 0%, 68%, 70%, 100% { opacity: .2; } 69% { opacity: 1; } }
@keyframes hkNightCar { 0%, 69%, 100% { opacity: 0; transform: translateX(-150px); } 70% { opacity: .9; transform: translateX(-150px); } 91% { opacity: .8; transform: translateX(1780px); } 92% { opacity: 0; transform: translateX(1780px); } }
@media (prefers-reduced-motion: reduce) {
  .theme-hawkins #inicio .sky-h::after, .theme-hawkins #inicio .hk-street::before, .theme-hawkins #inicio .hk-street::after,
  .theme-hawkins #inicio .hk-moon, .theme-hawkins #inicio .hk-oak, .theme-hawkins #inicio .hk-window,
  .theme-hawkins #inicio .hk-window-glass, .theme-hawkins #inicio .hk-window-person, .theme-hawkins #inicio .hk-tower-beacon,
  .theme-hawkins #inicio .hk-arcade-glass, .theme-hawkins #inicio .hk-arcade-score, .theme-hawkins #inicio .hk-flyer,
  .theme-hawkins #inicio .hk-bike-reflector, .theme-hawkins #inicio .hk-lamp-pool, .theme-hawkins #inicio .hk-car,
  .theme-hawkins #inicio .hk-fog::before { animation: none; }
  .theme-hawkins #inicio .hk-window { opacity: 1; }
  .theme-hawkins #inicio .hk-car { display: none; }
}
@media (max-width: 500px) {
  /* enquadra o Palace, as árvores e a casa central no recorte estreito */
  .theme-hawkins #inicio .hk-town { left: 13%; }
}

/* =========================================================
   THEFACEBOOK — a web de 2003, sem animação de enfeite.
   O site em volta vira um portal da época: faixa cinza, Verdana 11,
   links azuis sublinhados, abas quadradas de borda fina e botões
   "saltados" do Windows. O Internet Explorer fica maximizado.
   ========================================================= */
.theme-hawkins[data-page="rede"] { background-color: #e4e4e4; }
.theme-hawkins[data-page="rede"] #site {
  --hk-accent: #3b5998; --hk-focus: #f7b82d;
  --hk-top-bg: #f7f7f7; --hk-top-ink: #666; --hk-top-strong: #333; --hk-top-link: #3b5998; --hk-top-line: #ccc;
  --hk-head-bg: #fff; --hk-head-ink: #3b5998; --hk-head-sub: #6f6f6f; --hk-head-line: #ccc;
  --hk-brand-font: 700 22px/1.1 Tahoma, Verdana, sans-serif; --hk-brand-b: #6d84b4;
  --hk-orb-bg: #3b5998; --hk-orb-ink: #fff; --hk-orb-line: #6d84b4; --hk-orb-radius: 3px;
  --hk-nav-bg: #fff; --hk-nav-line: #3b5998; --hk-nav-shadow: none;
  --hk-nav-font: 700 11px/1 Verdana, Tahoma, sans-serif; --hk-nav-track: 0;
  --hk-tab-ink: #3b5998; --hk-tab-bg: #eceff5; --hk-tab-hover: #3b5998; --hk-tab-hover-bg: #eceff5; --hk-tab-on-ink: #fff; --hk-tab-on-bg: #3b5998;
  --hk-foot-bg: #f7f7f7; --hk-foot-ink: #6f6f6f; --hk-foot-link: #3b5998; --hk-foot-line: #ccc;
  --hk-btn-bg: #f0f0f0; --hk-btn-ink: #222; --hk-btn-edge: #777; --hk-btn-radius: 0; --hk-btn-font: 11px Tahoma, Verdana, sans-serif;
}
.theme-hawkins[data-page="rede"] :is(.topbar, .footer) { font-family: Verdana, Tahoma, sans-serif; font-size: 11px; }
.theme-hawkins[data-page="rede"] :is(.topbar, .footer) a { text-decoration: underline; }
.theme-hawkins[data-page="rede"] .brand-text small { font: 11px Verdana, Tahoma, sans-serif; }
.theme-hawkins[data-page="rede"] .orb { width: 42px; height: 42px; font: 700 16px Tahoma, sans-serif; box-shadow: 1px 1px 0 #29447e; }
.theme-hawkins[data-page="rede"] .brand:hover .orb { transform: none; }
.theme-hawkins[data-page="rede"] .masthead-in { padding-top: 10px; padding-bottom: 10px; }
.theme-hawkins[data-page="rede"] .theme-switch { border: 1px solid; border-color: #fff #777 #777 #fff; border-radius: 0; background: #f0f0f0; color: #6c6c6c; font: 700 10px Tahoma, sans-serif; }
.theme-hawkins[data-page="rede"] .theme-switch .sw-h { color: #3b5998; }
.theme-hawkins[data-page="rede"] .sw-track { border-radius: 0; background: #fff; box-shadow: inset 1px 1px 0 #777; }
.theme-hawkins[data-page="rede"] .sw-knob { border-radius: 0; background: #3b5998; box-shadow: none; }
.theme-hawkins[data-page="rede"] #site .gloss-btn { border-color: #fff #777 #777 #fff; box-shadow: 1px 1px 0 #333; transition: none; }
.theme-hawkins[data-page="rede"] #site .gloss-btn:active { transform: none; border-color: #777 #fff #fff #777; box-shadow: none; }
.theme-hawkins[data-page="rede"] #site .gloss-btn:hover { filter: none; background: #f7f7f7; box-shadow: 1px 1px 0 #333; }
/* abas quadradas de portal: cinza-azulado com borda fina; a aberta é azul como a barra do thefacebook */
.theme-hawkins[data-page="rede"] .tabs-nav { border-bottom-width: 3px; }
.theme-hawkins[data-page="rede"] .tabs-in { gap: 3px; padding-top: 6px; }
.theme-hawkins[data-page="rede"] .tabs-nav a { padding: 7px 10px 6px; border: 1px solid #bdc7d8; border-bottom: 0; transition: none; }
.theme-hawkins[data-page="rede"] .tabs-nav a::after { display: none; }
.theme-hawkins[data-page="rede"] .tabs-nav a:hover { text-decoration: underline; }
.theme-hawkins[data-page="rede"] .tabs-nav a.active { border-color: #3b5998; text-decoration: none; }
.theme-hawkins #rede.rede-wrap { max-width: 1100px; padding-top: 12px; padding-bottom: 18px; }
.theme-hawkins #rede .browser.ie { border-radius: 0; box-shadow: 0 0 0 1px #0831d9, 4px 4px 0 rgba(0, 0, 0, 0.18); }
.theme-hawkins #rede .ie-view { height: min(740px, calc(100vh - 150px)); min-height: 420px; }
.theme-hawkins[data-page="rede"] .footer { padding: 12px 0 18px; }

/* =========================================================
   LOJA ONLINE — um computador em Hawkins, 2003, à noite.
   A janela do Internet Explorer mora dentro de um monitor CRT bege
   (moldura grossa, vidro escuro na borda, plaquinha da marca, LED
   verde). O quarto está escuro e a luz azulada da tela bate na parede.
   Ao abrir a página, o tubo liga (linha que se abre) e a barra de
   status carrega em blocos verdes. Reflexo e linhas de varredura
   quase invisíveis: a leitura vem antes do efeito.
   ========================================================= */
.theme-hawkins[data-page="compras"] { background-color: #0a0c10; }
.theme-hawkins[data-page="compras"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(110, 160, 225, 0.2), transparent 70%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 46px), linear-gradient(#0c0f15, #080a0d); }
.theme-hawkins[data-page="compras"] #site {
  --hk-accent: #9cc4ff; --hk-focus: #9cc4ff;
  --hk-top-bg: #07090c; --hk-top-link: #9cc4ff; --hk-top-line: rgba(120, 160, 220, 0.08);
  --hk-head-bg: #0b0d12; --hk-head-line: rgba(120, 160, 220, 0.1); --hk-brand-b: #9cc4ff;
  --hk-orb-bg: radial-gradient(circle at 50% 40%, #3d6fb8, #172a4a); --hk-orb-line: #9cc4ff;
  --hk-nav-bg: #0b0d12; --hk-nav-line: rgba(120, 160, 220, 0.12); --hk-nav-shadow: none;
  --hk-tab-ink: #8990a0; --hk-tab-hover: #dfe9ff; --hk-tab-on-ink: #e6efff; --hk-tab-mark: #9cc4ff;
  --hk-foot-bg: #07090c; --hk-foot-link: #9cc4ff; --hk-foot-line: #141820;
  --hk-btn-bg: #2c3a52; --hk-btn-edge: #0e1520;
}
.theme-hawkins[data-page="compras"] .tabs-nav a.active { text-shadow: 0 0 10px rgba(156, 196, 255, 0.5); }
/* o monitor: plástico bege, cantos arredondados, a plaquinha da marca e o LED de ligado */
.theme-hawkins #compras.buy-wrap { position: relative; max-width: 1110px; margin: 26px auto 44px; padding: 30px 32px 62px; width: calc(100% - 28px); border-radius: 26px 26px 34px 34px; background: radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, 0.35), transparent 60%), linear-gradient(#e7e0cd, #d3cbb6 70%, #c3baa3); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -4px 0 rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 90px rgba(110, 160, 225, 0.18); }
.theme-hawkins #compras.buy-wrap::after { content: "HAWKTRON  ·  17\""; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 3px 12px; border-radius: 3px; background: linear-gradient(#cfc7b1, #bdb49c); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.5); color: #6e6655; font: 700 11px "Barlow Condensed", var(--font-ui); letter-spacing: 0.34em; white-space: pre; }
.theme-hawkins #compras.buy-wrap::before { content: ""; position: absolute; right: 46px; bottom: 28px; width: 8px; height: 8px; border-radius: 50%; background: #5cf07e; box-shadow: 0 0 6px #5cf07e, 0 0 14px rgba(92, 240, 126, 0.5), inset 0 -1px 1px rgba(0, 0, 0, 0.3); }
/* a tela: vidro escuro em volta, brilho azulado para fora */
.theme-hawkins #compras .browser.ie { position: relative; border-radius: 10px; box-shadow: 0 0 0 10px #15171b, 0 0 0 11px #8c846f, 0 0 26px 10px rgba(110, 160, 225, 0.25); }
.theme-hawkins #compras .browser.ie::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255, 255, 255, 0.07) 0 16%, transparent 28%), radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.16) 100%); }
.theme-hawkins #compras .ie-view::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 20, 60, 0.03) 2px 3px); }
.theme-hawkins #compras .ie-status { position: relative; }
.theme-hawkins #compras .ie-zone::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 1px; background: #38b24a; vertical-align: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* o tubo liga: uma linha clara se abre no meio e a imagem aparece */
  .theme-hawkins #compras .ie-view::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(transparent calc(50% - 1px), rgba(235, 245, 255, 0.95) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), #05070a; animation: hkCrtOn 0.75s cubic-bezier(0.3, 0.1, 0.2, 1) 0.1s both; }
  /* a barra de progresso do Explorer enche em blocos e some */
  .theme-hawkins #compras .ie-status::after { content: ""; position: absolute; right: 120px; top: 50%; width: 132px; height: 11px; margin-top: -6px; border: 1px solid #7f9db9; background: repeating-linear-gradient(90deg, #37b24b 0 7px, transparent 7px 9px) 2px 1px / 0 7px no-repeat, #fff; animation: hkIeLoad 1.4s steps(14) 0.2s both; }
  .theme-hawkins #compras .ie-zone::before { animation: hkModem 0.18s steps(1) 7; }
}
@keyframes hkCrtOn { 0% { opacity: 1; } 45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hkIeLoad { 0% { background-size: 0 7px, auto; opacity: 1; } 85% { background-size: 126px 7px, auto; opacity: 1; } 100% { background-size: 126px 7px, auto; opacity: 0; } }
@keyframes hkModem { 50% { background: #d6f5dc; } }
@media (max-width: 760px) {
  .theme-hawkins #compras.buy-wrap { width: calc(100% - 16px); margin: 14px auto 28px; padding: 12px 12px 34px; border-radius: 16px 16px 20px 20px; }
  .theme-hawkins #compras.buy-wrap::after { bottom: 10px; font-size: 9px; letter-spacing: 0.2em; }
  .theme-hawkins #compras.buy-wrap::before { right: 22px; bottom: 14px; }
  .theme-hawkins #compras .browser.ie { box-shadow: 0 0 0 5px #15171b, 0 0 0 6px #8c846f, 0 0 18px 6px rgba(110, 160, 225, 0.22); }
  .theme-hawkins #compras .ie-status::after { display: none; }
}

/* =========================================================
   CLASSES — o corredor da Hawkins High.
   Parede de blocos pintada, armários no cabeçalho, uma moldura de
   madeira com o mural de cortiça; o título é um quadro de letras de
   feltro e o texto de abertura é um memorando preso com tachinha.
   Dentro de uma classe: folha de caderno pautada, fichinhas e um post-it.
   As cartas entram como se alguém as prendesse no mural.
   ========================================================= */
.theme-hawkins[data-page="classes"] { background-color: #cfcab8; }
.theme-hawkins[data-page="classes"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, 0.05), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.12)),
    repeating-linear-gradient(0deg, rgba(90, 84, 70, 0.22) 0 2px, transparent 2px 48px),
    repeating-linear-gradient(90deg, rgba(90, 84, 70, 0.16) 0 2px, transparent 2px 100px) 0 0 / 100px 96px,
    repeating-linear-gradient(90deg, rgba(90, 84, 70, 0.16) 0 2px, transparent 2px 100px) 50px 48px / 100px 96px,
    linear-gradient(#d8d3c1, #c9c3af); }
.theme-hawkins[data-page="classes"] #site {
  --hk-accent: #c8392b; --hk-focus: #1f5c8f;
  --hk-top-bg: #1d2a27; --hk-top-ink: #b9c4bd; --hk-top-strong: #fff; --hk-top-link: #ffd46b; --hk-top-line: #0f1715;
  --hk-head-bg: linear-gradient(rgba(12, 26, 23, 0.45), rgba(12, 26, 23, 0.2)), repeating-linear-gradient(90deg, #2f5d55 0 3px, #36685f 3px 74px, #264c45 74px 78px); --hk-head-ink: #fffaf0; --hk-head-sub: #cfe0d9; --hk-head-line: #1a302c;
  --hk-brand-b: #ffd46b; --hk-orb-bg: radial-gradient(circle at 50% 40%, #e2822f, #a2481b); --hk-orb-line: #fff2d6;
  --hk-ctl-bg: rgba(9, 22, 19, 0.55); --hk-ctl-line: #1a302c;
  --hk-nav-bg: linear-gradient(#8f6437, #74502b); --hk-nav-line: #6b4a27; --hk-nav-shadow: 0 3px 0 #6b4a27, 0 8px 14px rgba(0, 0, 0, 0.25);
  --hk-nav-font: 700 13px var(--font-type); --hk-nav-case: uppercase; --hk-nav-track: 0.06em;
  --hk-tab-ink: #fff5e2; --hk-tab-hover: #2a211a; --hk-tab-hover-bg: #f6eed9; --hk-tab-on-ink: #2a211a; --hk-tab-on-bg: #fffaf0; --hk-tab-mark: #c8392b;
  --hk-foot-bg: #2a211a; --hk-foot-ink: #cbbca6; --hk-foot-link: #ffd46b; --hk-foot-line: #6b4a27;
  --hk-btn-bg: #c8392b; --hk-btn-ink: #fff; --hk-btn-edge: #7a1f16; --hk-btn2-bg: #1f5c8f; --hk-btn2-edge: #0f3252; --hk-btn2-ink: #fff;
}
/* armários: as frestas de ventilação no alto de cada porta */
.theme-hawkins[data-page="classes"] .masthead { position: relative; }
.theme-hawkins[data-page="classes"] .masthead::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 22px; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(10, 24, 21, 0.55) 0 2px, transparent 2px 5px); -webkit-mask: repeating-linear-gradient(90deg, transparent 0 20px, #000 20px 56px, transparent 56px 78px); mask: repeating-linear-gradient(90deg, transparent 0 20px, #000 20px 56px, transparent 56px 78px); }
.theme-hawkins[data-page="classes"] .masthead-in { position: relative; }
.theme-hawkins[data-page="classes"] .tabs-in { gap: 6px; padding-top: 6px; padding-bottom: 6px; }
.theme-hawkins[data-page="classes"] .tabs-nav a { padding: 7px 12px 6px; border-radius: 1px; }
.theme-hawkins[data-page="classes"] .tabs-nav a::after { display: none; }
.theme-hawkins[data-page="classes"] .tabs-nav a.active { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); transform: rotate(-1deg); }
.theme-hawkins[data-page="classes"] .tabs-nav a.active::before { content: ""; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 15%, #d63a2c 45%, #7a1a12); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.theme-hawkins[data-page="classes"] .tabs-nav a:hover { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25); }
/* a moldura de madeira e a cortiça */
.theme-hawkins #classes.cls-wrap { padding-top: 26px; padding-bottom: 34px; }
.theme-hawkins #site #classes .cls { overflow: visible; border: 0; border-radius: 3px; padding: 14px; background: linear-gradient(135deg, #9a6b3b, #7b5129 40%, #8d5f33 70%, #6b4522); box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 20px 40px rgba(40, 30, 15, 0.45); }
.theme-hawkins #classes .cls-board { border-radius: 1px; padding: 22px clamp(14px, 3vw, 30px) 32px;
  background:
    radial-gradient(circle at 20% 30%, rgba(90, 55, 25, 0.35) 0 1px, transparent 1.6px) 0 0 / 7px 9px,
    radial-gradient(circle at 70% 60%, rgba(255, 235, 200, 0.25) 0 1px, transparent 1.4px) 0 0 / 11px 8px,
    radial-gradient(circle at 40% 80%, rgba(70, 40, 15, 0.3) 0 1.4px, transparent 2px) 3px 2px / 13px 12px,
    linear-gradient(160deg, #c89a64, #b9864f 50%, #aa7843);
  box-shadow: inset 0 3px 10px rgba(50, 28, 10, 0.55), inset 0 0 0 1px rgba(50, 28, 10, 0.4); }
/* o título: quadro de feltro preto com letras brancas encaixadas nas ranhuras */
.theme-hawkins #site #classes .cls > .box-head { position: relative; margin: 0 0 12px; padding: 10px 16px 9px; border: 0; border-radius: 2px; background: repeating-linear-gradient(0deg, #151515 0 3px, #1f1f1f 3px 5px); box-shadow: inset 0 0 0 4px #3b2a19, inset 0 0 0 5px #0a0a0a, 0 4px 8px rgba(0, 0, 0, 0.35); }
.theme-hawkins #site #classes .cls > .box-head h2 { color: #f4f1ea; font: 700 22px/1 "Barlow Condensed", var(--font-ui); letter-spacing: 0.22em; text-transform: uppercase; text-shadow: 0 1px 0 #000, 0 -1px 0 rgba(255, 255, 255, 0.2); }
.theme-hawkins #site #classes .cls > .box-head .box-icon { color: #f4f1ea; box-shadow: none; font-size: 16px; }
.theme-hawkins #site #classes .cls > .box-head .box-tag { background: none; color: #d8d3c6; font: 700 13px "Barlow Condensed", var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; }
/* memorando preso com tachinha */
.theme-hawkins #classes .cls-lead { position: relative; width: fit-content; max-width: min(68ch, 100%); margin: 6px 0 16px; padding: 14px 18px 12px; background: linear-gradient(#fffdf6, #f5efdf); color: #2e2a24; font: 14px/1.55 var(--font-file); transform: rotate(-0.7deg); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 8px 14px -6px rgba(40, 25, 10, 0.5); }
.theme-hawkins #classes .cls-lead::before { content: ""; position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, #2c7ad0 42%, #123e70); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }
.theme-hawkins #classes .cls-lead::after { content: "Secretaria · Hawkins High School"; display: block; margin-top: 8px; padding-top: 6px; border-top: 1px dashed rgba(46, 42, 36, 0.3); font: 700 10px var(--font-type); letter-spacing: 0.16em; text-transform: uppercase; color: #8b3a2e; }
.theme-hawkins #classes .cls-app .muted { color: #3b2a19; }
/* cartas presas: sombra de papel sobre cortiça */
.theme-hawkins #classes .cls-face { box-shadow: 0 2px 2px rgba(40, 25, 10, 0.25), 0 14px 22px -8px rgba(40, 25, 10, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.theme-hawkins #classes .cls-card:hover .cls-face { box-shadow: 0 4px 4px rgba(40, 25, 10, 0.2), 0 26px 32px -10px rgba(40, 25, 10, 0.65), 0 0 0 3px color-mix(in srgb, var(--c) 45%, transparent); }
.theme-hawkins #classes .cls-card:hover .cls-face { transform: rotate(calc(var(--tilt, 0deg) * -0.6)) translateY(-8px); }
.theme-hawkins #classes .cls-card:hover .cls-pin { transform: translateY(-2px) rotate(-12deg); }
/* dentro de uma classe: a folha de caderno com o nome escrito à mão */
.theme-hawkins #classes .cls-bar { padding: 8px 10px; border-radius: 2px; background: rgba(255, 250, 238, 0.85); box-shadow: 0 6px 12px -6px rgba(40, 25, 10, 0.5); }
.theme-hawkins #classes .cls-crumb { color: #6b5c49; }
.theme-hawkins #classes .cls-crumb b { color: #2a211a; }
.theme-hawkins #classes .cls-hero-text { position: relative; padding: 18px 20px 18px 54px; color: #2a2620; background: linear-gradient(90deg, transparent 38px, rgba(214, 70, 60, 0.55) 38px 40px, transparent 40px), repeating-linear-gradient(transparent 0 25px, rgba(60, 110, 180, 0.28) 25px 26px), #fdfbf4; background-position: 0 0, 0 12px, 0 0; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12), 0 18px 24px -12px rgba(40, 25, 10, 0.6); transform: rotate(0.4deg); }
.theme-hawkins #classes .cls-hero-text::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 12px; width: 12px; background: radial-gradient(circle, #b98a55 0 4px, rgba(0, 0, 0, 0.25) 4.5px, transparent 5.5px) 0 0 / 12px 60px repeat-y; }
.theme-hawkins #classes .cls-kicker { color: var(--c-ink); }
.theme-hawkins #classes .cls-hero-name { color: var(--c-ink); font-family: var(--font-paint); font-weight: 400; letter-spacing: 0.02em; text-shadow: none; transform: rotate(-1deg); }
.theme-hawkins #classes .cls-intro { color: #2a2620; font: 15px/26px var(--font-type); }
.theme-hawkins #classes .cls-ranks li { border: 1px solid rgba(42, 38, 32, 0.25); border-radius: 2px; background: #fffaf0; color: #5a5146; }
.theme-hawkins #classes .cls-ranks b { color: #2a2620; }
.theme-hawkins #classes .cls-subs-head { padding: 10px 12px; border: 0; border-radius: 2px; background: rgba(255, 250, 238, 0.9); box-shadow: 0 6px 12px -6px rgba(40, 25, 10, 0.5); }
.theme-hawkins #classes .cls-subs-title { color: #2a211a; }
.theme-hawkins #classes .cls-legend { color: #5a5146; }
.theme-hawkins #classes .cls-sub-face { box-shadow: 0 2px 2px rgba(40, 25, 10, 0.2), 0 10px 16px -6px rgba(40, 25, 10, 0.55); }
.theme-hawkins #classes .cls-sub:hover .cls-sub-face { transform: translateY(-6px) rotate(-1.2deg); box-shadow: 0 4px 4px rgba(40, 25, 10, 0.2), 0 20px 26px -10px rgba(40, 25, 10, 0.6), 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent); }
.theme-hawkins #classes .cls-foot { width: fit-content; max-width: 100%; padding: 12px 14px; background: #fff27a; color: #3b3413; font: 13px/1.45 var(--font-type); transform: rotate(0.8deg); box-shadow: 0 10px 14px -8px rgba(40, 25, 10, 0.55); }
.theme-hawkins #classes .cls-limits { color: #2a2620; }
/* selos de líder e vice: adesivos de papelaria, sem brilho de gel */
.theme-hawkins #classes .cls-rank[data-rank="lider"] { border: 1.5px solid #6b4a00; border-radius: 3px; background: #ffd23f; color: #3a2400; box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.25); transform: rotate(-3deg); }
.theme-hawkins #classes .cls-rank[data-rank="vice"] { border: 1.5px solid #5d6680; border-radius: 3px; background: #e6e9f1; color: #26314d; box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2); transform: rotate(2deg); }
/* a ficha da subclasse (janela): fichário escolar com a faixa lisa da cor da classe */
.theme-hawkins #classes .cls-sheet::backdrop { background: rgba(38, 26, 14, 0.74); }
.theme-hawkins #classes .cls-sheet-in { border-radius: 4px; box-shadow: 0 2px 0 #d9ccb4, 0 30px 60px rgba(20, 12, 4, 0.6); }
.theme-hawkins #classes .cls-sheet-head { background: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.5px) 0 0 / 6px 6px, var(--c-ink); border-bottom: 3px solid rgba(0, 0, 0, 0.2); text-shadow: none; }
.theme-hawkins #classes .cls-x { border: 2px solid rgba(255, 255, 255, 0.8); background: none; }
.theme-hawkins #classes .cls-x:hover { background: rgba(0, 0, 0, 0.2); }
.theme-hawkins #classes .cls-x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* entrada: cada carta é presa no mural em sequência, e a tachinha vem por último */
@media (prefers-reduced-motion: no-preference) {
  .theme-hawkins #classes .cls-lead { animation: hkPinNote 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .theme-hawkins #classes .cls-slot .cls-face, .theme-hawkins #classes .cls-subs li .cls-sub-face { animation: hkPinCard 0.55s cubic-bezier(0.2, 0.8, 0.25, 1.1) backwards; }
  .theme-hawkins #classes .cls-slot .cls-pin { animation: hkPinDrop 0.3s ease-out backwards; }
  .theme-hawkins #classes :is(.cls-slot, .cls-subs li):nth-child(1) :is(.cls-face, .cls-sub-face) { animation-delay: 0.08s; }
  .theme-hawkins #classes :is(.cls-slot, .cls-subs li):nth-child(2) :is(.cls-face, .cls-sub-face) { animation-delay: 0.16s; }
  .theme-hawkins #classes :is(.cls-slot, .cls-subs li):nth-child(3) :is(.cls-face, .cls-sub-face) { animation-delay: 0.24s; }
  .theme-hawkins #classes :is(.cls-slot, .cls-subs li):nth-child(4) :is(.cls-face, .cls-sub-face) { animation-delay: 0.32s; }
  .theme-hawkins #classes :is(.cls-slot, .cls-subs li):nth-child(5) :is(.cls-face, .cls-sub-face) { animation-delay: 0.4s; }
  .theme-hawkins #classes .cls-subs li:nth-child(6) .cls-sub-face { animation-delay: 0.48s; }
  .theme-hawkins #classes .cls-subs li:nth-child(7) .cls-sub-face { animation-delay: 0.56s; }
  .theme-hawkins #classes .cls-subs li:nth-child(8) .cls-sub-face { animation-delay: 0.64s; }
  .theme-hawkins #classes .cls-slot:nth-child(1) .cls-pin { animation-delay: 0.5s; }
  .theme-hawkins #classes .cls-slot:nth-child(2) .cls-pin { animation-delay: 0.58s; }
  .theme-hawkins #classes .cls-slot:nth-child(3) .cls-pin { animation-delay: 0.66s; }
  .theme-hawkins #classes .cls-slot:nth-child(4) .cls-pin { animation-delay: 0.74s; }
  .theme-hawkins #classes .cls-slot:nth-child(5) .cls-pin { animation-delay: 0.82s; }
  .theme-hawkins #classes .cls-hero-text { animation: hkPinNote 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
@keyframes hkPinCard { from { opacity: 0; transform: translateY(-22px) rotate(calc(var(--tilt, 0deg) - 5deg)) scale(1.04); } 60% { opacity: 1; } }
@keyframes hkPinDrop { from { opacity: 0; transform: translateY(-14px) scale(1.5); } }
@keyframes hkPinNote { from { opacity: 0; transform: translateY(-10px) rotate(-3deg); } }
@media (max-width: 760px) {
  .theme-hawkins #site #classes .cls { padding: 8px; }
  .theme-hawkins #classes .cls-board { padding: 14px 10px 20px; }
  .theme-hawkins #site #classes .cls > .box-head h2 { font-size: 18px; letter-spacing: 0.14em; }
  .theme-hawkins #classes .cls-hero-text { padding: 14px 14px 14px 44px; transform: none; }
  .theme-hawkins #classes .cls-hero-text::before { left: 8px; }
  .theme-hawkins #classes .cls-lead { transform: none; }
}

/* =========================================================
   MELVALD'S — dentro da loja (armazém de cidade pequena, não faroeste).
   Parede de tábuas com luz quente de lâmpada; o cabeçalho é a fachada
   pintada de verde com friso dourado e a prateleira com as etiquetas
   de preço; o toldo listrado abre a loja. Por dentro: placa pintada,
   visor da caixa registradora, cartão de catálogo, etiqueta pendurada,
   teclas de caixa, carteira de couro, ordem de pagamento do Correio e
   o livro-caixa. Toda a economia continua a mesma (economy.js).
   ========================================================= */
.theme-hawkins[data-page="loja"] { background-color: #3a2415; }
.theme-hawkins[data-page="loja"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 50% at 18% 0, rgba(255, 196, 110, 0.22), transparent 70%),
    radial-gradient(ellipse 40% 50% at 82% 0, rgba(255, 196, 110, 0.18), transparent 70%),
    linear-gradient(transparent 60%, rgba(0, 0, 0, 0.35)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0 2px, rgba(255, 220, 170, 0.05) 2px 3px, transparent 3px 118px),
    repeating-linear-gradient(90deg, #5a3a22 0 60px, #553620 60px 118px);
}
.theme-hawkins[data-page="loja"] #site {
  --hk-accent: #d9a441; --hk-focus: #f0c35a;
  --hk-top-bg: #1d130b; --hk-top-ink: #cdb99a; --hk-top-strong: #fff3dd; --hk-top-link: #f0c35a; --hk-top-line: #120b06;
  --hk-head-bg: linear-gradient(#244532, #1d3a2a); --hk-head-ink: #f6ead2; --hk-head-sub: #cbd7c2; --hk-head-line: #0f2118;
  --hk-brand-b: #e8c16a; --hk-orb-bg: radial-gradient(circle at 50% 40%, #b3261e, #6e150f); --hk-orb-line: #e8c16a;
  --hk-ctl-bg: #16301f; --hk-ctl-line: #0f2118;
  --hk-nav-bg: linear-gradient(#c9a24a 0 3px, #3a2415 3px, #2c1a0e); --hk-nav-line: #120b06; --hk-nav-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
  --hk-nav-font: 700 12px var(--font-type); --hk-nav-case: uppercase; --hk-nav-track: 0.06em;
  --hk-tab-ink: #2a1c12; --hk-tab-bg: #efe2c4; --hk-tab-hover: #2a1c12; --hk-tab-hover-bg: #fff6e0; --hk-tab-on-ink: #fff4e2; --hk-tab-on-bg: #b3261e; --hk-tab-mark: transparent;
  --hk-foot-bg: #1d130b; --hk-foot-ink: #b8a68a; --hk-foot-link: #f0c35a; --hk-foot-line: #120b06;
  --hk-btn-bg: #b3261e; --hk-btn-ink: #fff6e6; --hk-btn-edge: #5e120d; --hk-btn2-bg: #efe2c4; --hk-btn2-ink: #2a1c12; --hk-btn2-edge: #8a7658;
}
.theme-hawkins[data-page="loja"] .masthead { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(232, 193, 106, 0.18); }
.theme-hawkins[data-page="loja"] .brand-text { font-family: var(--font-logo); letter-spacing: 0.01em; }
.theme-hawkins[data-page="loja"] .tabs-in { gap: 8px; padding-top: 9px; padding-bottom: 6px; }
.theme-hawkins[data-page="loja"] .tabs-nav a { padding: 5px 10px 4px 16px; border-radius: 2px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.35); }
.theme-hawkins[data-page="loja"] .tabs-nav a::after { display: none; }
/* o furinho da etiqueta de preço */
.theme-hawkins[data-page="loja"] .tabs-nav a::before { content: ""; position: absolute; left: 6px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #2c1a0e; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6); }
.theme-hawkins[data-page="loja"] .tabs-nav a:hover { transform: rotate(-1.5deg); }
.theme-hawkins[data-page="loja"] .tabs-nav a.active { transform: rotate(-2deg); }
/* a loja */
.theme-hawkins #loja { --text: #2a1c12; --muted: #6b5845; --line: rgba(58, 36, 21, 0.24); --teal: #1e6b3c; color: var(--text); }
.theme-hawkins #loja.shop-wrap { padding-top: 26px; padding-bottom: 40px; }
.theme-hawkins #site #loja .shop { border: 0; border-radius: 3px; background: #2c1a0e; box-shadow: 0 0 0 1px #120b06, 0 24px 50px rgba(0, 0, 0, 0.55); }
/* a viga de cima, com a plaquinha de latão e o visor do caixa */
.theme-hawkins #site #loja .shop > .box-head { padding: 10px 16px; border-bottom: 0; background: linear-gradient(#3e2716, #2c1a0e); box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.12); }
.theme-hawkins #site #loja .shop > .box-head h2 { flex: 0 1 auto; margin-right: auto; padding: 4px 12px; border-radius: 2px; background: linear-gradient(#e2c078, #b8903f); color: #2c1a0e; font: 700 13px "Barlow Condensed", var(--font-ui); letter-spacing: 0.24em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5); }
.theme-hawkins #site #loja .shop > .box-head .box-icon { color: #e2c078; }
.theme-hawkins #site #loja .shop > .box-head .box-tag { padding: 4px 10px; border-radius: 2px; background: #0a0d0a; color: #86ffae; font: 20px/1 var(--font-crt); letter-spacing: 0.08em; text-shadow: 0 0 6px rgba(80, 255, 140, 0.6); box-shadow: inset 0 1px 4px #000, 0 0 0 2px #4a4a42; }
/* dentro: lambri creme com luz de lâmpada e o toldo listrado no alto */
.theme-hawkins #site #loja .shop > .box-body { position: relative; padding: 48px clamp(12px, 2.4vw, 26px) 26px; background: radial-gradient(ellipse 70% 40% at 50% 0, rgba(255, 214, 140, 0.35), transparent 70%), repeating-linear-gradient(90deg, rgba(120, 90, 50, 0.16) 0 2px, transparent 2px 38px), linear-gradient(#f1e5c8, #e6d6b2); }
.theme-hawkins #site #loja .shop > .box-body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; pointer-events: none; background: repeating-linear-gradient(90deg, #b3261e 0 34px, #f5ecd8 34px 68px); box-shadow: 0 4px 6px rgba(60, 30, 10, 0.25); -webkit-mask: linear-gradient(#000 0 0) top / 100% 13px no-repeat, radial-gradient(circle 17px at 50% 13px, #000 98%, transparent 100%) 0 0 / 34px 30px repeat-x; mask: linear-gradient(#000 0 0) top / 100% 13px no-repeat, radial-gradient(circle 17px at 50% 13px, #000 98%, transparent 100%) 0 0 / 34px 30px repeat-x; }
/* a placa pintada: verde, letras douradas, friso e a luz da lâmpada em cima */
.theme-hawkins #loja .mv-sign { border: 0; border-radius: 4px; background: radial-gradient(ellipse 60% 70% at 50% 0, rgba(255, 220, 150, 0.22), transparent 70%), linear-gradient(#264a36, #1b3727); box-shadow: inset 0 0 0 4px #1b3727, inset 0 0 0 5px #d4ae5c, inset 0 0 0 7px #1b3727, 0 3px 0 #0f2118, 0 14px 24px -10px rgba(40, 25, 10, 0.7); color: #f6ead2; }
.theme-hawkins #loja .mv-sign::before { inset: 11px; border: 1px dashed rgba(212, 174, 92, 0.35); }
.theme-hawkins #loja .mv-sign::after { left: 20%; right: 20%; bottom: auto; top: 0; height: 60%; border-radius: 50%; background: radial-gradient(ellipse at 50% 0, rgba(255, 230, 170, 0.28), transparent 70%); box-shadow: none; animation: hkShopLamp 14s linear infinite; }
.theme-hawkins #loja .mv-sign b { color: #e9c46a; text-shadow: 0 2px 0 #0f2118, 0 0 1px #6b4a17; animation: none; }
.theme-hawkins #loja :is(.mv-est, .mv-sub) { color: #e6dcc4; }
@keyframes hkShopLamp { 0%, 88%, 89.5%, 91%, 100% { opacity: 1; } 88.6% { opacity: 0.4; } 90.2% { opacity: 0.75; } }
/* o visor da caixa registradora: fósforo verde num gabinete de metal */
.theme-hawkins #loja .mk { border: 0; border-radius: 3px; background: linear-gradient(#0c100d, #070907); color: #d8e8da; box-shadow: inset 0 2px 8px #000, 0 0 0 6px #45443d, 0 0 0 7px #26251f, 0 10px 18px -6px rgba(40, 25, 10, 0.6); }
.theme-hawkins #loja .mk::after { background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.25) 3px 4px); }
.theme-hawkins #loja .mk-price b { color: #86ffae; text-shadow: 0 0 8px rgba(80, 255, 140, 0.55); }
.theme-hawkins #loja .mk-price span::before { background: #86ffae; box-shadow: 0 0 8px #86ffae; }
.theme-hawkins #loja .mk-bar { border-color: rgba(134, 255, 174, 0.25); background: rgba(134, 255, 174, 0.06); }
.theme-hawkins #loja .mk-bar i { background: linear-gradient(90deg, #3fa65f, #86ffae 70%, #e8c16a); box-shadow: 0 0 8px rgba(80, 255, 140, 0.45); }
/* o cartão de catálogo do produto, com o nicho de madeira iluminado onde a moeda fica */
.theme-hawkins #loja .mv-product { border: 1px solid #cbb78f; border-radius: 3px; background: linear-gradient(#fffaf0, #f6ecd6); color: #2a1c12; box-shadow: 0 2px 0 #d8c7a2, 0 16px 26px -12px rgba(60, 35, 15, 0.6); }
.theme-hawkins #loja .mv-product::before { display: none; }
.theme-hawkins #loja .mv-product:hover { transform: none; box-shadow: 0 2px 0 #d8c7a2, 0 20px 30px -12px rgba(60, 35, 15, 0.65); }
.theme-hawkins #loja .mv-shelf { border: 0; border-radius: 2px; background: radial-gradient(ellipse 45% 70% at 50% 0, rgba(255, 220, 150, 0.45), transparent 75%), linear-gradient(#4a2d18, #2f1c0e 70%); box-shadow: inset 0 0 0 5px #6b4424, inset 0 -8px 0 #7a4f2a, inset 0 6px 14px rgba(0, 0, 0, 0.6); }
.theme-hawkins #loja .mv-shelf::before { background: rgba(255, 210, 130, 0.25); }
.theme-hawkins #loja .mv-shelf::after { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.08) 42%, transparent 50%); }
/* "NOVIDADE!": cartaz amarelo escrito à mão, preso por um fio; balança quando você chega perto */
.theme-hawkins #loja .mv-new { top: 12px; right: 12px; padding: 5px 10px 4px; border: 0; border-radius: 1px; background: #ffe45c; color: #b3261e; font: 400 15px/1 var(--font-paint); letter-spacing: 0.02em; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.35); transform: rotate(6deg); transform-origin: 50% -14px; }
.theme-hawkins #loja .mv-new::before { content: ""; position: absolute; left: 50%; top: -14px; width: 1px; height: 14px; background: rgba(40, 25, 10, 0.6); }
.theme-hawkins #loja .mv-product:hover .mv-new { animation: hkSwing 1.1s ease-out; }
@keyframes hkSwing { 0% { transform: rotate(6deg); } 25% { transform: rotate(-5deg); } 50% { transform: rotate(3.5deg); } 75% { transform: rotate(-1deg); } 100% { transform: rotate(6deg); } }
.theme-hawkins #loja .mv-product h3 { color: #2a1c12; text-shadow: none; }
.theme-hawkins #loja .mv-product h3 small { color: #b3261e; }
.theme-hawkins #loja .mv-desc { color: #5a4636; }
/* teclas da caixa registradora */
.theme-hawkins #loja .mv-mode button { border: 1px solid #8a7658; border-radius: 4px; background: linear-gradient(#fbf4e3, #eadcbd); color: #2a1c12; font: 700 13px var(--font-type); letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 3px 0 #8a7658, 0 4px 6px rgba(60, 35, 15, 0.3); transition: transform 0.08s, box-shadow 0.08s, background 0.15s; }
.theme-hawkins #loja .mv-mode button:hover { border-color: #6b5639; box-shadow: 0 3px 0 #6b5639, 0 5px 8px rgba(60, 35, 15, 0.35); }
.theme-hawkins #loja .mv-mode button.on { transform: translateY(3px); border-color: #5e120d; background: linear-gradient(#c7382b, #a3261c); color: #fff6e6; box-shadow: 0 0 0 #5e120d, inset 0 2px 3px rgba(0, 0, 0, 0.3); }
.theme-hawkins #loja .mv-mode button:focus-visible { outline: 2px solid #1e6b3c; outline-offset: 3px; }
/* a etiqueta de preço pendurada por um barbante */
.theme-hawkins #loja .mv-tag { position: relative; margin-left: 12px; padding: 7px 14px 7px 26px; border: 1px solid #c4a86e; border-radius: 2px 10px 10px 2px; background: linear-gradient(#f6e4b6, #eed397); color: #3a2a17; box-shadow: 2px 3px 0 rgba(60, 35, 15, 0.18); clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); font: 13px var(--font-type); }
.theme-hawkins #loja .mv-tag::before { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fffaf0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); }
.theme-hawkins #loja .mv-tag b { color: #a3261c; font: 700 22px/1 var(--font-type); letter-spacing: 0; text-shadow: none; }
.theme-hawkins #loja :is(.mv-insider, .mv-lim, .mv-total) { color: #2a1c12; }
.theme-hawkins #loja .mv-total b { color: #1e6b3c; }
.theme-hawkins #loja .mv-warn { color: #b3261e; }
.theme-hawkins #loja .mv-buy label { color: #5a4636; }
.theme-hawkins #loja :is(.mv-buy, .send-form) :is(input, select) { border: 1px solid #b9a47e; border-radius: 2px; background: #fffdf7; color: #2a1c12; box-shadow: inset 0 1px 3px rgba(60, 35, 15, 0.15); }
.theme-hawkins #loja :is(.mv-buy, .send-form) :is(input, select)::placeholder { color: #9b8a6e; }
.theme-hawkins #loja :is(.mv-buy, .send-form) :is(input, select):focus-visible { outline: 2px solid #1e6b3c; outline-offset: 1px; border-color: #1e6b3c; }
.theme-hawkins #loja .mv-quick button { border: 1px solid #b9a47e; border-radius: 999px; background: #f6ecd6; color: #2a1c12; box-shadow: 0 2px 0 #b9a47e; transition: transform 0.08s, box-shadow 0.08s, background 0.15s; }
.theme-hawkins #loja .mv-quick button:hover, .theme-hawkins #loja .mv-quick button:focus-visible { border-color: #1e6b3c; background: #fffaf0; box-shadow: 0 2px 0 #1e6b3c; }
.theme-hawkins #loja .mv-quick button:active { transform: translateY(2px); box-shadow: none; }
/* o botão de comprar é a tecla grande do caixa */
.theme-hawkins #site #loja .mv-buy .gloss-btn { padding: 13px 20px; font: 700 15px var(--font-type); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 0 var(--hk-btn-edge), 0 8px 14px rgba(60, 35, 15, 0.35); }
.theme-hawkins #site #loja .mv-buy .gloss-btn:active { transform: translateY(4px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3), 0 0 0 var(--hk-btn-edge); }
.theme-hawkins #site #loja .mv .gloss-btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 0 var(--hk-btn-edge), 0 10px 16px rgba(60, 35, 15, 0.4); }
/* carteira de couro com costura */
.theme-hawkins #loja .mv-wallet { border: 0; border-radius: 6px; background: radial-gradient(ellipse at 30% 0, rgba(255, 220, 170, 0.18), transparent 60%), linear-gradient(135deg, #6b4428, #4a2c17 60%, #3d2412); color: #f6ead2; box-shadow: inset 0 0 0 6px transparent, 0 3px 0 #2c1a0e, 0 14px 22px -10px rgba(40, 25, 10, 0.7); outline: 1.5px dashed rgba(246, 222, 180, 0.4); outline-offset: -8px; }
.theme-hawkins #loja .mv-wallet b { color: #fff3dd; }
/* ordem de pagamento do Correio de Hawkins: papel esverdeado com trama de segurança */
.theme-hawkins #loja .send-form { border: 1px solid #8fa47f; border-radius: 2px; background: repeating-radial-gradient(circle at 100% 0, rgba(60, 100, 60, 0.07) 0 1px, transparent 1px 7px), linear-gradient(#eef3e2, #e1ead0); color: #22361f; box-shadow: 0 2px 0 #b9c7a8, 0 14px 22px -12px rgba(40, 25, 10, 0.55); }
.theme-hawkins #loja .send-form::before { left: 0; right: 0; height: 5px; background: repeating-linear-gradient(90deg, #22361f 0 10px, transparent 10px 14px); box-shadow: none; opacity: 0.5; }
.theme-hawkins #loja .mv .send-title { color: #22361f; text-shadow: none; }
.theme-hawkins #loja .mv .send-title::before { content: "✉"; color: #b3261e; text-shadow: none; }
.theme-hawkins #loja .send-form label { color: #3c5236; }
.theme-hawkins #loja .mv .send-info { border-top-color: rgba(34, 54, 31, 0.25); color: #3c5236; }
.theme-hawkins #site #loja .send-form .gloss-btn { --hk-btn-bg: #2f5d3a; --hk-btn-edge: #15301b; }
/* o livro-caixa: papel pautado com a margem vermelha */
.theme-hawkins #loja .mv .led-title { color: #2a1c12; text-shadow: none; }
.theme-hawkins #loja .mv .ledger { padding: 4px 10px 6px 30px; background: linear-gradient(90deg, transparent 20px, rgba(179, 38, 30, 0.45) 20px 21px, transparent 21px), #fffaf0; box-shadow: 0 2px 0 #d8c7a2, 0 14px 22px -12px rgba(60, 35, 15, 0.5); font-family: var(--font-type); }
.theme-hawkins #loja .mv .ledger li { border-bottom: 1px solid rgba(60, 110, 180, 0.25); background: none; }
.theme-hawkins #loja .led-block { color: #1f5c8f; }
.theme-hawkins #loja .led-date { color: #7a6a55; }
/* ao entrar na loja: a placa balança, a etiqueta gira no barbante; os números do visor acendem sempre que mudam */
@media (prefers-reduced-motion: no-preference) {
  .theme-hawkins #loja.page-entering .mv-sign { animation: hkSignSwing 0.42s ease-out; transform-origin: 50% -30px; }
  .theme-hawkins #loja.page-entering .mv-tag { animation: hkTagTurn 0.42s ease-out; transform-origin: 0 50%; }
  .theme-hawkins #loja .mk-price b, .theme-hawkins #site #loja .shop > .box-head .box-tag { animation: hkVfd 0.4s steps(4); }
}
@keyframes hkSignSwing { 0% { transform: rotate(-1.6deg) translateY(-4px); } 55% { transform: rotate(0.8deg); } 100% { transform: none; } }
@keyframes hkTagTurn { 0% { transform: rotateY(60deg); } 100% { transform: none; } }
@keyframes hkVfd { 0% { opacity: 0.15; } 50% { opacity: 0.8; } 75% { opacity: 0.45; } 100% { opacity: 1; } }
@media (max-width: 760px) {
  .theme-hawkins #site #loja .shop > .box-body { padding-top: 42px; }
  .theme-hawkins #site #loja .shop > .box-head h2 { letter-spacing: 0.12em; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-hawkins #loja .mv-sign::after, .theme-hawkins #loja .mv-product:hover .mv-new { animation: none; }
}

/* =========================================================
   JORNAL — a redação do The Hawkins Post.
   Em volta da edição, uma mesa coberta de jornais velhos (papel mais
   cinzento, colunas de texto vistas de longe); o cabeçalho do site vira
   a faixa de seções de um jornal (creme, tinta preta, filete duplo e o
   vermelho editorial). A edição é uma pilha de folhas; as matérias
   mostram a linha de recorte ao passar o mouse; as fotos "imprimem".
   ========================================================= */
.theme-hawkins[data-page="jornal"] { background-color: #c9c0ad; }
.theme-hawkins[data-page="jornal"]::before { content: ""; position: fixed; inset: -8%; z-index: 0; pointer-events: none; transform: rotate(-2.5deg);
  background:
    repeating-linear-gradient(90deg, transparent 0 150px, #c6bda9 150px 168px),
    repeating-linear-gradient(0deg, rgba(40, 34, 28, 0.1) 0 1px, transparent 1px 6px),
    linear-gradient(#c9c0ad, #c2b8a3); }
.theme-hawkins[data-page="jornal"]::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 70% at 50% 35%, transparent 55%, rgba(60, 45, 30, 0.35) 100%); }
.theme-hawkins[data-page="jornal"] #site {
  --hk-accent: #8e1b2c; --hk-focus: #8e1b2c;
  --hk-top-bg: #24212b; --hk-top-ink: #cfc6b3; --hk-top-strong: #fff8e8; --hk-top-link: #f0d9a0; --hk-top-line: #000;
  --hk-head-bg: linear-gradient(90deg, #e3d8bf, #efe7d2 12%, #f4edda 50%, #efe7d2 88%, #e3d8bf); --hk-head-ink: #24212b; --hk-head-sub: #5b554c; --hk-head-line: transparent;
  --hk-brand-font: 800 24px/1.05 "Newsreader", Georgia, serif; --hk-brand-b: #8e1b2c;
  --hk-orb-bg: #24212b; --hk-orb-ink: #efe7d2; --hk-orb-line: #efe7d2;
  --hk-ctl-bg: #e6dcc4; --hk-ctl-line: #24212b; --hk-ctl-ink: #24212b; --hk-ctl-dim: #666054;
  --hk-nav-bg: #efe7d2; --hk-nav-line: #24212b; --hk-nav-shadow: 0 1px 0 #efe7d2, 0 3px 0 #8e1b2c, 0 8px 14px rgba(40, 30, 20, 0.2);
  --hk-nav-font: 700 14px/1 "Barlow Condensed", var(--font-ui); --hk-nav-case: uppercase; --hk-nav-track: 0.14em;
  --hk-tab-ink: #3d3943; --hk-tab-hover: #8e1b2c; --hk-tab-on-ink: #efe7d2; --hk-tab-on-bg: #24212b; --hk-tab-mark: #8e1b2c;
  --hk-foot-bg: #efe7d2; --hk-foot-ink: #4b4652; --hk-foot-link: #8e1b2c; --hk-foot-line: #24212b;
  --hk-btn-bg: #24212b; --hk-btn-ink: #efe7d2; --hk-btn-edge: #000; --hk-btn-radius: 1px; --hk-btn-font: 700 14px "Barlow Condensed", var(--font-ui);
  --hk-btn2-bg: #efe7d2; --hk-btn2-ink: #24212b; --hk-btn2-edge: #24212b;
  --hk-box-bg: #efe7d3; --hk-box-line: #24212b; --hk-boxhead-bg: #24212b; --hk-boxhead-ink: #efe7d2; --hk-boxhead-line: #8e1b2c;
}
.theme-hawkins[data-page="jornal"] .masthead { border-top: 3px double #24212b; }
.theme-hawkins[data-page="jornal"] .orb { border-radius: 50%; font-family: "Newsreader", Georgia, serif; box-shadow: inset 0 0 0 2px #efe7d2, inset 0 0 0 3px #24212b; }
.theme-hawkins[data-page="jornal"] .theme-switch { border-radius: 1px; }
.theme-hawkins[data-page="jornal"] .sw-track { background: #cfc4aa; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.theme-hawkins[data-page="jornal"] .tabs-nav { border-top: 1px solid #24212b; border-bottom: 3px double #24212b; }
.theme-hawkins[data-page="jornal"] .tabs-in { gap: 0; }
.theme-hawkins[data-page="jornal"] .tabs-nav a { padding: 10px 14px 8px; border-left: 1px solid rgba(36, 33, 43, 0.3); }
.theme-hawkins[data-page="jornal"] .tabs-nav a:first-child { border-left: 0; }
.theme-hawkins[data-page="jornal"] .tabs-nav a::after { left: 14px; right: 14px; bottom: 4px; height: 1px; }
.theme-hawkins[data-page="jornal"] .tabs-nav a.active::after { display: none; }
.theme-hawkins[data-page="jornal"] .footer { border-top: 3px double #24212b; font-family: var(--font-type); }
/* a página do jornal: tinta, filetes e as cores da redação também nos painéis da redação */
.theme-hawkins #jornal { --text: #24212b; --muted: #5b554c; --line: rgba(36, 33, 43, 0.3); --teal: #8e1b2c; --panel: #efe7d3; --panel-2: #e5dbc4; --red: #8e1b2c; --red-glow: rgba(142, 27, 44, 0.35); color: var(--text); }
.theme-hawkins #jornal.jn-wrap { padding-top: 18px; padding-bottom: 40px; }
.theme-hawkins #jornal .jn-wrap :focus-visible, .theme-hawkins #jornal :focus-visible { outline-color: #8e1b2c; }
/* índice das seções do jornal (Capa · Arquivo · Redação) */
.theme-hawkins #jornal .jn-bar { gap: 0; padding: 0 0 6px; border-bottom: 1px solid #24212b; font: 700 14px "Barlow Condensed", var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; }
.theme-hawkins #jornal .jn-bar-link { position: relative; padding: 6px 12px 4px; border-radius: 0; color: #3d3943; }
.theme-hawkins #jornal .jn-bar-link + .jn-bar-link { border-left: 1px solid rgba(36, 33, 43, 0.3); }
.theme-hawkins #jornal .jn-bar-link:hover { background: none; color: #8e1b2c; }
.theme-hawkins #jornal .jn-bar-link.is-on { background: none; color: #24212b; text-shadow: none; box-shadow: inset 0 -3px 0 #8e1b2c; }
.theme-hawkins #jornal .jn-bar-desk { margin-left: 0; border: 0; border-left: 1px solid rgba(36, 33, 43, 0.3); }
.theme-hawkins #jornal .jn-bar-brand { color: #4b4652; opacity: 1; }
.theme-hawkins #jornal .jn-crumb a, .theme-hawkins #jornal .jn-back a { color: #8e1b2c; }
/* a edição é uma pilha: duas folhas de baixo aparecem pelas bordas */
.theme-hawkins #jornal .jn-paper { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 30px 50px -26px rgba(40, 28, 16, 0.65), 7px 7px 0 -1px #ddd2b8, 7px 7px 0 0 rgba(36, 33, 43, 0.12), -6px 13px 0 -2px #d4c8ab, -6px 13px 0 -1px rgba(36, 33, 43, 0.1); }
/* matéria reage como recorte: aparece a linha pontilhada da tesoura */
@media (hover: hover) and (pointer: fine) {
  .theme-hawkins #jornal .jn-story, .theme-hawkins #jornal .jn-nota { outline: 1px dashed transparent; outline-offset: 7px; transition: outline-color 0.2s, background-color 0.2s; }
  .theme-hawkins #jornal .jn-story:hover, .theme-hawkins #jornal .jn-nota:hover { outline-color: rgba(36, 33, 43, 0.35); background-color: rgba(255, 250, 235, 0.35); }
}
/* arquivo: recortes sobre a mesa */
.theme-hawkins #jornal .jn-sec { color: #24212b; }
.theme-hawkins #jornal .jn-sec::after { height: 0; border-top: 3px double #24212b; }
.theme-hawkins #jornal .jn-sec small { color: #4b4652; }
.theme-hawkins #jornal .jn-arq-link { box-shadow: 0 10px 22px -10px rgba(40, 28, 16, 0.55), 0 2px 0 -1px var(--jn-paper-3); }
.theme-hawkins #jornal .jn-arq-item:hover, .theme-hawkins #jornal .jn-arq-item:focus-within { transform: rotate(0deg) translateY(-4px) scale(1.01); }
.theme-hawkins #jornal .jn-arq-empty { color: #4b4652; }
/* estados e redação: papel e tinta em vez dos painéis escuros */
.theme-hawkins #jornal .jn-wait { color: #4b4652; }
.theme-hawkins #jornal .jn-wait-dot { background: #8e1b2c; box-shadow: none; }
.theme-hawkins #jornal :is(.jn-error, .jn-denied) { border: 1px solid #24212b; border-top: 3px double #24212b; border-radius: 0; background: #efe7d3; }
.theme-hawkins #jornal .jn-btn { border-color: #24212b; border-radius: 1px; background: #efe7d3; color: #24212b; }
.theme-hawkins #jornal .jn-btn:hover { background: #24212b; color: #efe7d3; }
.theme-hawkins #jornal .jn-btn-ink { background: #24212b; color: #efe7d3; }
.theme-hawkins #jornal .jn-btn-ink:hover { background: #8e1b2c; border-color: #8e1b2c; }
.theme-hawkins #jornal .jn-btn-danger { border-color: #8e1b2c; color: #8e1b2c; }
.theme-hawkins #jornal .jn-btn-danger:hover { background: #8e1b2c; color: #efe7d3; }
.theme-hawkins #site #jornal .box { border-radius: 1px; box-shadow: 0 24px 40px -22px rgba(40, 28, 16, 0.6); }
.theme-hawkins #site #jornal .box-head h2 { font: 700 18px/1.1 "Barlow Condensed", var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.theme-hawkins #jornal :is(input, select, textarea) { border: 1px solid rgba(36, 33, 43, 0.45); border-radius: 1px; background: #fbf7ec; color: #24212b; box-shadow: inset 0 1px 2px rgba(36, 33, 43, 0.12); }
.theme-hawkins #jornal .jn-ed-story { border-radius: 1px; background: #f6f0e1; }
.theme-hawkins #jornal .jn-ed-bar { background: #e5dbc4; border-top: 3px double #24212b; box-shadow: 0 -8px 16px rgba(40, 28, 16, 0.2); }
.theme-hawkins #jornal .jn-dirty { color: #8e1b2c; }
.theme-hawkins #jornal .jn-ed-hint code { color: #8e1b2c; }
.theme-hawkins #jornal .jn-st-draft { background: #f0d9a0; color: #3d2a00; }
.theme-hawkins #jornal .jn-st-pub { background: #24212b; color: #efe7d2; }
.theme-hawkins #jornal .jn-row-publicada td { background: rgba(36, 33, 43, 0.04); }
/* ao abrir: a folha é posta na mesa (um pouco torta, depois assenta); as fotos saem da prensa */
@media (prefers-reduced-motion: no-preference) {
  .theme-hawkins #jornal .jn-paper { animation: hkSheetDown 0.6s cubic-bezier(0.2, 0.75, 0.25, 1) backwards; }
  .theme-hawkins #jornal .jn-arq-item { animation: hkClip 0.5s ease-out backwards; }
  .theme-hawkins #jornal .jn-arq-item:nth-child(2) { animation-delay: 0.08s; }
  .theme-hawkins #jornal .jn-arq-item:nth-child(3) { animation-delay: 0.16s; }
  .theme-hawkins #jornal .jn-arq-item:nth-child(n + 4) { animation-delay: 0.24s; }
  .theme-hawkins #jornal .jn-photo.is-loaded img { animation: hkPress 1.2s ease-out; }
}
@keyframes hkSheetDown { from { opacity: 0; transform: translate(-10px, 22px) rotate(-1.2deg); box-shadow: 0 60px 70px -30px rgba(40, 28, 16, 0.5); } }
@keyframes hkClip { from { opacity: 0; transform: translateY(10px) rotate(calc(var(--tilt, 0deg) + 3deg)); } }
@keyframes hkPress { 0% { opacity: 0; filter: grayscale(1) contrast(0.4) brightness(1.7); } 40% { opacity: 1; } 100% { filter: grayscale(0.92) contrast(1.06) sepia(0.16) brightness(0.98); } }
@media (max-width: 640px) {
  .theme-hawkins[data-page="jornal"] .tabs-nav a { padding: 10px 10px 8px; }
  .theme-hawkins #jornal .jn-paper { box-shadow: 0 20px 36px -22px rgba(40, 28, 16, 0.65), 4px 5px 0 -1px #ddd2b8, 4px 5px 0 0 rgba(36, 33, 43, 0.12); }
}

/* =========================================================
   MORADORES — a mesma revista em quadrinhos da Minha Ficha:
   a página do álbum de figurinhas da série "Moradores de Hawkins".
   O cromo (fundo de retícula, cabeçalho, menu, rodapé, avisos) é o mesmo
   da Minha Ficha (bloco seguinte). Aqui: a página de HQ com o título em
   letras de capa, o recordatório amarelo, o álbum num quadro de tinta,
   cada carta num quadrinho com sombra dura, e na lateral o painel da
   cidade, a lista de chegadas, as tags como etiquetas e os adesivos.
   ========================================================= */
.theme-hawkins #moradores { --text: #111; --muted: #4d463d; --line: #111; color: var(--text); }
.theme-hawkins #site #moradores.box { overflow: visible; border: 3px solid #111; border-radius: 0; background: radial-gradient(rgba(30, 20, 20, 0.11) 1.1px, transparent 1.7px) 0 0 / 7px 7px, #f7f2e6; box-shadow: 10px 10px 0 #111, 10px 10px 0 3px #f7f2e6, 0 30px 60px rgba(0, 0, 0, 0.6); }
/* o título da página */
.theme-hawkins #site #moradores > .box-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 18px 12px; border: 0; border-bottom: 3px solid #111; background: #fff; }
.theme-hawkins #site #moradores > .box-head .box-icon { display: none; }
.theme-hawkins #site #moradores > .box-head h2 { flex: 1 1 auto; color: #e8352a; font: 400 clamp(28px, 4.2vw, 44px)/1 var(--font-paint); letter-spacing: 0.01em; text-shadow: 3px 3px 0 #111; transform: rotate(-1.2deg); }
/* o número de cartas: um balão de efeito redondo */
.theme-hawkins #site #moradores > .box-head .box-tag { order: 2; display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px; border: 3px solid #111; border-radius: 50%; background: #ffe45c; color: #111; font: 800 22px/1 "Barlow Condensed", var(--font-ui); box-shadow: 3px 3px 0 #111; transform: rotate(8deg); }
.theme-hawkins #site #moradores > .box-head::after { content: "Álbum oficial · Série 2003"; order: 3; padding: 3px 9px; border: 2px solid #111; background: #ffe45c; color: #111; font: 800 12px/1.3 "Barlow Condensed", var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 3px 3px 0 #111; }
.theme-hawkins #site #moradores > .box-body { padding: 20px clamp(14px, 2.6vw, 26px) 22px; }
.theme-hawkins #site #moradores > .box-body::after { content: "Moradores de Hawkins · Série 2003 · pág. 2"; display: block; margin-top: 18px; font: 800 11px "Barlow Condensed", var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; text-align: center; color: #55504a; }
/* recordatório de abertura */
.theme-hawkins #moradores .lead { width: fit-content; max-width: 100%; margin: 0 0 20px; padding: 8px 14px; border: 2.5px solid #111; background: #ffe45c; color: #111; font: 700 14px/1.4 var(--font-type); text-align: left; box-shadow: 4px 4px 0 #111; }
/* o álbum: um quadro grande de tinta com retícula vermelha no canto */
.theme-hawkins #moradores .card-album { padding: 16px 16px 20px; border: 3px solid #111; border-radius: 0; background: radial-gradient(rgba(232, 53, 42, 0.14) 1.1px, transparent 1.7px) 0 0 / 6px 6px, #fffdf8; box-shadow: 7px 7px 0 #111; }
.theme-hawkins #moradores .card-album-cap { display: flex; flex-wrap: wrap; gap: 4px 10px; width: fit-content; max-width: 100%; margin: 0 0 18px; padding: 4px 10px; border: 2px solid #111; border-radius: 0; background: #111; color: #ffe45c; font: 800 12px "Barlow Condensed", var(--font-ui); letter-spacing: 0.14em; text-shadow: none; box-shadow: 3px 3px 0 #e8352a; transform: rotate(-0.8deg); }
.theme-hawkins #moradores .card-album-cap span + span::before { content: "· "; }
.theme-hawkins #moradores .res-search-lbl { color: #111; font: 800 13px "Barlow Condensed", var(--font-ui); letter-spacing: 0.12em; }
.theme-hawkins #moradores .res-search-in { height: 42px; border: 2.5px solid #111; border-radius: 0; background: #fff; color: #111; font: 700 14px var(--font-type); box-shadow: 4px 4px 0 #111; }
.theme-hawkins #moradores .res-search-in::placeholder { color: #5e574d; }
.theme-hawkins #moradores .res-search-in:focus-visible { outline: 3px solid #e8352a; outline-offset: 2px; }
.theme-hawkins #moradores .res-search-x { color: #111; }
.theme-hawkins #moradores .res-search-x:hover, .theme-hawkins #moradores .res-search-x:focus-visible { background: #ffe45c; }
.theme-hawkins #moradores .res-pick-lbl { color: #111; font: 800 13px "Barlow Condensed", var(--font-ui); letter-spacing: 0.12em; }
.theme-hawkins #moradores .res-pick-sel { height: 42px; border: 2.5px solid #111; border-radius: 0; background: #fff; color: #111; font: 700 14px var(--font-type); box-shadow: 4px 4px 0 #111; }
.theme-hawkins #moradores .res-pick-sel option { background: #fff; color: #111; }
.theme-hawkins #moradores .res-pick-sel:focus, .theme-hawkins #moradores .res-pick-sel:focus-visible { border-color: #111; outline: 3px solid #e8352a; outline-offset: 2px; box-shadow: 4px 4px 0 #111; }
.theme-hawkins #moradores .res-search-none { border: 2px dashed #111; color: #4d463d; }
.theme-hawkins #moradores .card-minis { gap: 20px 18px; }
/* cada carta num quadrinho branco de borda grossa; a carta fica levemente torta dentro */
.theme-hawkins #moradores .card-mini-slot { padding: 8px; border: 2.5px solid #111; border-radius: 0; background: #fff; box-shadow: 4px 4px 0 #111; transform: none; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.theme-hawkins #moradores .card-mini-slot:hover, .theme-hawkins #moradores .card-mini-slot:focus-within { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #111; }
.theme-hawkins #moradores .card-mini { transform: rotate(var(--rot)); }
.theme-hawkins #moradores .card-mini-in { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3); }
.theme-hawkins #moradores .card-mini:hover .card-mini-in, .theme-hawkins #moradores .card-mini:focus-visible .card-mini-in { transform: translateY(-4px) rotate(calc(var(--rot) * -1)) scale(1.02); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 2.5px #111, 4px 6px 0 2.5px #e8352a; }
.theme-hawkins #moradores .card-mini:focus-visible .card-mini-in { outline: 3px solid #e8352a; outline-offset: 4px; }
/* reflexo que corre pela foto ao passar o mouse */
.theme-hawkins #moradores .card-mini-photo::after { content: ""; position: absolute; inset: -20%; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.3) 48%, transparent 56%); transform: translateX(-70%); }
.theme-hawkins #moradores .card-mini:hover .card-mini-photo::after, .theme-hawkins #moradores .card-mini:focus-visible .card-mini-photo::after { transform: translateX(70%); transition: transform 0.7s ease; }
/* "Inspecionar" vira um recordatório amarelo */
.theme-hawkins #moradores .card-mini-cta { border: 2px solid #111; border-radius: 0; background: #ffe45c; color: #111; font: 800 12px "Barlow Condensed", var(--font-ui); letter-spacing: 0.12em; box-shadow: 3px 3px 0 #111; }
.theme-hawkins #moradores > .box-body > .muted, .theme-hawkins #moradores .players > .muted { padding: 14px; border: 2px dashed #111; color: #4d463d; }
/* ---------- a coluna lateral: quadrinhos da mesma página ---------- */
.theme-hawkins[data-page="moradores"] .side-col { gap: 22px; }
.theme-hawkins[data-page="moradores"] #site .side-col .widget { overflow: visible; border: 3px solid #111; border-radius: 0; background: radial-gradient(rgba(30, 20, 20, 0.1) 1.1px, transparent 1.7px) 0 0 / 7px 7px, #fffdf8; color: #111; box-shadow: 6px 6px 0 #111; transform: none; }
.theme-hawkins[data-page="moradores"] #site .side-col .widget-head { position: relative; top: -12px; left: -10px; width: fit-content; max-width: calc(100% + 10px); margin-bottom: -6px; padding: 4px 10px 3px; border: 2.5px solid #111; background: #ffe45c; color: #111; font: 800 14px/1.2 "Barlow Condensed", var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; text-shadow: none; box-shadow: 3px 3px 0 #111; }
.theme-hawkins[data-page="moradores"] #site .side-col .widget-body { padding: 6px 14px 14px; }
/* Status da cidade: o painel com o contador de moradores em letras de efeito */
.theme-hawkins[data-page="moradores"] .status p { font: 700 14px var(--font-ui); color: #111; }
.theme-hawkins[data-page="moradores"] .status b { color: #111; }
.theme-hawkins[data-page="moradores"] .status .dot { background: #1faa4a; box-shadow: 0 0 0 2px #111; animation-duration: 2.4s; }
.theme-hawkins[data-page="moradores"] .status-label { margin-bottom: 6px; color: #e8352a; font: 800 11px "Barlow Condensed", var(--font-ui); letter-spacing: 0.16em; }
.theme-hawkins[data-page="moradores"] .lcd { position: relative; display: block; width: fit-content; padding: 6px 14px 4px; border: 3px solid #111; border-radius: 0; background: #111; color: #ffe45c; font: 34px/1 var(--font-crt); letter-spacing: 0.18em; text-shadow: 2px 2px 0 #e8352a; box-shadow: 4px 4px 0 #e8352a; transform: rotate(-1.5deg); }
/* Chegaram agora: cada um é uma cabecinha num círculo, com o nome ao lado */
.theme-hawkins[data-page="moradores"] .latest { padding: 4px 14px 12px; }
.theme-hawkins[data-page="moradores"] .latest li { gap: 10px; padding: 7px 0; border-bottom: 2px solid #111; font: 700 14px/1.2 var(--font-ui); }
.theme-hawkins[data-page="moradores"] .latest li:last-child { border-bottom: 0; }
.theme-hawkins[data-page="moradores"] .latest small { margin-top: 2px; color: #4d463d; font: 11px var(--font-type); }
.theme-hawkins[data-page="moradores"] .latest .mini { width: 32px; height: 32px; border: 2.5px solid #111; background: hsl(var(--hue) 75% 72%); color: #111; font: 800 12px "Barlow Condensed", var(--font-ui); box-shadow: 2px 2px 0 #111; }
.theme-hawkins[data-page="moradores"] .latest .muted { color: #4d463d; }
/* Tags: etiquetas de efeito, sobem quando o mouse passa */
.theme-hawkins[data-page="moradores"] .tags { line-height: 1; padding: 10px 14px 16px; }
.theme-hawkins[data-page="moradores"] .tags .t-h { display: flex; flex-wrap: wrap; gap: 9px 8px; }
.theme-hawkins[data-page="moradores"] .tags a { margin: 0; padding: 5px 9px 4px; border: 2px solid #111; border-radius: 0; color: #111; font: 800 13px "Barlow Condensed", var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; box-shadow: 2px 2px 0 #111; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.theme-hawkins[data-page="moradores"] .tags .s1 { background: #fff; }
.theme-hawkins[data-page="moradores"] .tags .s2 { background: #bfe3f2; }
.theme-hawkins[data-page="moradores"] .tags .s3 { background: #ffe45c; font-size: 14px; }
.theme-hawkins[data-page="moradores"] .tags .s4 { background: #d22217; color: #fff; font-size: 15px; }
.theme-hawkins[data-page="moradores"] .tags a:hover { transform: translate(-2px, -2px) rotate(-2deg); box-shadow: 4px 4px 0 #111; text-decoration: none; }
/* Links: adesivos colados na página, tortos, com borda de tinta */
.theme-hawkins[data-page="moradores"] .badges { gap: 12px 10px; padding: 12px 14px 16px; }
.theme-hawkins[data-page="moradores"] .badge { width: auto; min-width: 104px; height: auto; padding: 6px 9px; border: 2.5px solid #111; border-radius: 0; font: 800 10px/1.2 "Barlow Condensed", var(--font-ui); letter-spacing: 0.08em; box-shadow: 3px 3px 0 #111; transform: rotate(-3deg); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.theme-hawkins[data-page="moradores"] .badge b { font-size: 14px; }
.theme-hawkins[data-page="moradores"] .badge:nth-child(2n) { transform: rotate(2.5deg); }
.theme-hawkins[data-page="moradores"] .badge:nth-child(3n) { transform: rotate(-1deg); }
.theme-hawkins[data-page="moradores"] .badge:hover { transform: rotate(0) translate(-2px, -2px); box-shadow: 5px 5px 0 #111; }
.theme-hawkins[data-page="moradores"] .b1 { background: #1f5c8f; color: #fff; }
.theme-hawkins[data-page="moradores"] .b2 { background: #ffe45c; color: #111; }
.theme-hawkins[data-page="moradores"] .b3 { background: #19873b; color: #fff; }
.theme-hawkins[data-page="moradores"] .b4 { background: #111; color: #ffe45c; }
.theme-hawkins[data-page="moradores"] .b5 { background: #d22217; color: #fff; }
.theme-hawkins[data-page="moradores"] .b6 { background: #fff; color: #111; }
/* a janela de um morador (abre por cima): fundo de tinta e o vermelho da revista */
.theme-hawkins[data-page="moradores"] .card-dialog::backdrop { background: radial-gradient(rgba(255, 228, 92, 0.12) 1.4px, transparent 2px) 0 0 / 14px 14px, rgba(17, 15, 20, 0.9); }
.theme-hawkins[data-page="moradores"] :is(.card-dialog, .card-dialog .card, .card-dialog .card-view-record), .theme-hawkins #moradores .card-mini { --k-neon: #e8352a; --k-glow: rgba(232, 53, 42, 0.35); }
/* o registro ao lado da carta: um quadro da revista (tinta preta, papel branco, recordatórios amarelos) */
.theme-hawkins[data-page="moradores"] .card-dialog .card-view-record { --k-ink: #111; --k-paper: #fffdf8; --k-paper-2: #f9f3e6; --k-paper-3: #cfc4a9; --k-dot: rgba(232, 53, 42, 0.16); --k-bal: #fff; --k-cap: #ffe45c; --k-cap-text: #111; --k-red-ink: #d0261b; --k-wine: #111; --k-text: #111; --k-soft: #55504a;
  border: 3px solid #111; border-radius: 0; background: radial-gradient(var(--k-dot) 1.1px, transparent 1.7px) 0 0 / 6px 6px, #fffdf8; box-shadow: 8px 8px 0 #111, 8px 8px 0 3px #f7f2e6; }
.theme-hawkins[data-page="moradores"] .card-dialog .rec-head { border-bottom: 3px solid #111; }
.theme-hawkins[data-page="moradores"] .card-dialog .rec-kicker { width: fit-content; padding: 1px 7px; border: 2px solid #111; background: #ffe45c; color: #111; font: 800 11px "Barlow Condensed", var(--font-ui); letter-spacing: 0.14em; box-shadow: 2px 2px 0 #111; }
.theme-hawkins[data-page="moradores"] .card-dialog .rec-name { color: #e8352a; font: 400 clamp(26px, 3.4vw, 36px)/1.05 var(--font-paint); text-shadow: 2px 2px 0 #111; }
.theme-hawkins[data-page="moradores"] .card-dialog .rec-tabs { gap: 8px; padding: 0 0 8px; border-bottom: 3px solid #111; }
.theme-hawkins[data-page="moradores"] .card-dialog .rec-tabs [role="tab"] { bottom: 0; padding: 6px 12px 5px; border: 2.5px solid #111; border-radius: 0; background: #ffe45c; color: #111; font: 800 13px "Barlow Condensed", var(--font-ui); letter-spacing: 0.12em; box-shadow: 3px 3px 0 #111; }
.theme-hawkins[data-page="moradores"] .card-dialog .rec-tabs [role="tab"]:hover { background: #fff; }
.theme-hawkins[data-page="moradores"] .card-dialog .rec-tabs [role="tab"][aria-selected="true"] { background: #111; color: #ffe45c; box-shadow: 1px 1px 0 #111; transform: translate(2px, 2px); }
.theme-hawkins[data-page="moradores"] .card-dialog .rec-tabs [role="tab"]:focus-visible { outline: 3px solid #e8352a; outline-offset: 3px; }
.theme-hawkins[data-page="moradores"] .card-dialog :is(.stn-cap, .stn-bal) h4 { color: #d0261b; }
.theme-hawkins[data-page="moradores"] .card-dialog .stn-cap > p { border-width: 2.5px; box-shadow: 4px 4px 0 #111; }
.theme-hawkins[data-page="moradores"] .card-dialog :is(.stn-rec, .stn-hist, .stn-attrs) { border-top: 0; background: none; box-shadow: none; padding-left: 0; padding-right: 0; }
.theme-hawkins[data-page="moradores"] .card-dialog .stn-attr-table thead th { border-bottom: 3px solid #111; color: #d0261b; }
/* abas Ficha e Perks da janela: os mesmos quadros de tinta da aba Ficha de Minha Ficha */
.theme-hawkins[data-page="moradores"] .card-dialog .stn-data { gap: 0; padding: 0; background: none; border: 1.5px solid #111; outline: 1.5px solid #111; }
.theme-hawkins[data-page="moradores"] .card-dialog .stn-data > div { padding: 10px 12px 9px; border: 1.5px solid #111; background: #fff; }
.theme-hawkins[data-page="moradores"] .card-dialog .stn-data dt { display: inline-block; margin-bottom: 5px; padding: 1px 6px; border: 1.5px solid #111; background: #ffe45c; color: #111; font: 800 9.5px "Barlow Condensed", var(--font-ui); letter-spacing: 0.14em; }
.theme-hawkins[data-page="moradores"] .card-dialog .stn-data dd { font: 700 14px/1.35 var(--font-ui); color: #111; }
.theme-hawkins[data-page="moradores"] .card-dialog .stn-data-xp .card-xp-lvl { color: #d0261b; }
.theme-hawkins[data-page="moradores"] .card-dialog .stn-data .card-xp-bar { border-color: #111; }
.theme-hawkins[data-page="moradores"] .card-dialog .stn-data .card-xp-bar i { background: #e8352a; box-shadow: none; }
.theme-hawkins[data-page="moradores"] .card-dialog .rpk-item { border: 2.5px solid #111; border-radius: 0; box-shadow: 4px 4px 0 #111; }
.theme-hawkins[data-page="moradores"] .card-dialog .rpk-icon { border: 2px solid #111; border-radius: 0; background: #ffe45c; }
.theme-hawkins[data-page="moradores"] .card-dialog .rpk-body h4 small { border-radius: 0; background: #111; color: #ffe45c; }
.theme-hawkins[data-page="moradores"] .card-dialog :is(.rpk-left, .rpk-none) { border: 2px dashed #111; color: #3b352d; }
/* o botão de fechar: um "X" de efeito num quadradinho amarelo */
.theme-hawkins[data-page="moradores"] .card-dialog .card-x { border: 3px solid #111; border-radius: 0; background: #ffe45c; color: #111; font-weight: 800; box-shadow: 3px 3px 0 #111; }
.theme-hawkins[data-page="moradores"] .card-dialog .card-x:hover { background: #d22217; color: #fff; box-shadow: 3px 3px 0 #111; }
.theme-hawkins[data-page="moradores"] .card-dialog .card-x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* ao abrir: os quadrinhos entram um a um, a lateral chega de lado */
@media (prefers-reduced-motion: no-preference) {
  .theme-hawkins #moradores .card-mini-slot { animation: hkPop 0.42s cubic-bezier(0.2, 0.8, 0.2, 1.25) backwards; animation-delay: calc(min(var(--i, 0), 14) * 0.05s); }
  .theme-hawkins #moradores .lead { animation: hkPop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.25) backwards; }
  .theme-hawkins[data-page="moradores"] #site .side-col .widget { animation: hkSlide 0.45s ease-out backwards; }
  .theme-hawkins[data-page="moradores"] #site .side-col .widget:nth-child(2) { animation-delay: 0.08s; }
  .theme-hawkins[data-page="moradores"] #site .side-col .widget:nth-child(3) { animation-delay: 0.16s; }
  .theme-hawkins[data-page="moradores"] #site .side-col .widget:nth-child(4) { animation-delay: 0.24s; }
  .theme-hawkins #site #moradores > .box-head .box-tag { animation: hkBurst 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) 0.2s backwards; }
}
@keyframes hkPop { from { opacity: 0; transform: scale(0.92); } }
@keyframes hkSlide { from { opacity: 0; transform: translateX(16px); } }
@keyframes hkBurst { from { opacity: 0; transform: scale(2) rotate(-20deg); } }
@media (max-width: 760px) {
  .theme-hawkins #site #moradores.box { box-shadow: 6px 6px 0 #111, 6px 6px 0 3px #f7f2e6; }
  .theme-hawkins #site #moradores > .box-head h2 { flex-basis: 100%; }
  .theme-hawkins #moradores .card-album { box-shadow: 4px 4px 0 #111; }
}
@media (max-width: 520px) {
  .theme-hawkins #moradores .card-album { padding: 12px 10px 14px; }
  .theme-hawkins #moradores .card-minis { gap: 14px 12px; }
  .theme-hawkins #moradores .card-mini-slot { padding: 5px; box-shadow: 3px 3px 0 #111; }
  .theme-hawkins #moradores .card-mini { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-hawkins #moradores .card-mini:hover .card-mini-photo::after { transition: none; }
}

/* =========================================================
   MINHA FICHA — uma página de gibi mostrando a revista da ficha.
   O site em volta é tinta preta com retícula de impressão; a caixa é a
   página de HQ: papel branco-creme com retícula, quadros de tinta preta
   grossa com sombra dura, recordatórios amarelos (as legendas), o título
   com letras de capa de gibi e o carimbo APROVADO em letras de efeito.
   O cromo (fundo, cabeçalho, menu, rodapé, avisos) vale também para Moradores,
   que é outra página da mesma revista. A carta (que já é retícula de HQ) fica num quadro; as abas são os
   recordatórios de cada quadro; história são os balões de sempre.
   ========================================================= */
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) { background-color: #16131b; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"])::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0, rgba(232, 53, 42, 0.16), transparent 70%),
    radial-gradient(rgba(255, 228, 92, 0.16) 1.6px, transparent 2.2px) 0 0 / 16px 16px,
    radial-gradient(rgba(232, 53, 42, 0.14) 1.6px, transparent 2.2px) 8px 8px / 16px 16px,
    linear-gradient(#1b1721, #120f16); }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) #site {
  --hk-accent: #e8352a; --hk-focus: #e8352a;
  --hk-top-bg: #111; --hk-top-ink: #cfc8bb; --hk-top-strong: #fff; --hk-top-link: #ffe45c; --hk-top-line: #000;
  --hk-head-bg: #f7f1e3; --hk-head-ink: #111; --hk-head-sub: #5a534a; --hk-head-line: #111;
  --hk-brand-font: 800 26px/1 "Barlow Condensed", var(--font-ui); --hk-brand-b: #e8352a;
  --hk-orb-bg: #ffe45c; --hk-orb-ink: #111; --hk-orb-line: #111; --hk-orb-radius: 50%;
  --hk-ctl-bg: #fff; --hk-ctl-line: #111; --hk-ctl-ink: #111; --hk-ctl-dim: #797469;
  --hk-nav-bg: #f7f1e3; --hk-nav-line: #111; --hk-nav-shadow: none;
  --hk-nav-font: 800 13px/1 "Barlow Condensed", var(--font-ui); --hk-nav-case: uppercase; --hk-nav-track: 0.1em;
  --hk-tab-ink: #111; --hk-tab-bg: #ffe45c; --hk-tab-hover: #111; --hk-tab-hover-bg: #fff; --hk-tab-on-ink: #ffe45c; --hk-tab-on-bg: #111; --hk-tab-mark: transparent;
  --hk-foot-bg: #f7f1e3; --hk-foot-ink: #3b352d; --hk-foot-link: #d22217; --hk-foot-line: #111;
  /* letra branca pequena pede o vermelho um tom mais fundo que o dos títulos (#e8352a) */
  --hk-btn-bg: #d22217; --hk-btn-ink: #fff; --hk-btn-edge: #111; --hk-btn-radius: 0; --hk-btn-font: 800 15px/1.1 "Barlow Condensed", var(--font-ui);
  --hk-btn2-bg: #ffe45c; --hk-btn2-ink: #111; --hk-btn2-edge: #111;
}
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .brand-text { letter-spacing: 0.04em; text-transform: uppercase; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .brand-text small { text-transform: none; letter-spacing: 0; font-family: var(--font-type); }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .masthead { border-bottom-width: 3px; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .orb { box-shadow: 0 0 0 3px #111, 3px 3px 0 3px #111; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .theme-switch { border-width: 2px; border-radius: 0; box-shadow: 2px 2px 0 #111; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .sw-track { border-radius: 0; background: #ddd5c4; box-shadow: inset 0 0 0 1px #111; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .sw-knob { border-radius: 0; background: #e8352a; box-shadow: none; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .tabs-nav { border-bottom-width: 3px; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .tabs-in { gap: 8px; padding: 8px 14px 9px; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .tabs-nav a { padding: 6px 11px 5px; border: 2px solid #111; border-radius: 0; box-shadow: 3px 3px 0 #111; transition: transform 0.1s, box-shadow 0.1s, background-color 0.15s, color 0.15s; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .tabs-nav a::after { display: none; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .tabs-nav a:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #111; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .tabs-nav a.active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #111; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .footer { border-top-width: 3px; font-family: var(--font-type); }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .footer .wrap::before { content: "Continua na próxima edição…"; display: block; margin: 0 0 8px; font: 400 22px var(--font-paint); color: #e8352a; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) #site .gloss-btn { border-width: 2px; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 4px 4px 0 #111; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) #site .gloss-btn:hover { filter: none; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #111; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) #site .gloss-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #111; }
.theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .toast { border: 2.5px solid #111; border-radius: 0; background: #ffe45c; color: #111; font: 800 15px "Barlow Condensed", var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 5px 5px 0 #111; }
/* a página do gibi */
.theme-hawkins #conta { --text: #111; --muted: #4d463d; --line: #111; --teal: #e8352a; color: var(--text); }
.theme-hawkins #conta :is(.stn, .card-home) { --k-neon: #e8352a; --k-glow: rgba(232, 53, 42, 0.35); }
/* dentro dos quadros (não na carta): tinta preta, papel branco, recordatório amarelo */
.theme-hawkins #conta .stn-desk, .theme-hawkins #conta .stn-editor .card-side { --k-ink: #111; --k-paper: #fffdf8; --k-paper-2: #f9f3e6; --k-paper-3: #cfc4a9; --k-dot: rgba(30, 20, 20, 0.16); --k-bal: #fff; --k-bar: #fff; --k-cap: #ffe45c; --k-cap-text: #111; --k-red-ink: #d0261b; --k-red: #e8352a; --k-wine: #111; --k-wine-2: #2a2a2a; --k-text: #111; --k-soft: #55504a; }
.theme-hawkins #site #conta.box { overflow: visible; margin-top: 26px; border: 3px solid #111; border-radius: 0; background: radial-gradient(rgba(30, 20, 20, 0.11) 1.1px, transparent 1.7px) 0 0 / 7px 7px, #f7f2e6; box-shadow: 10px 10px 0 #111, 10px 10px 0 3px #f7f2e6, 0 30px 60px rgba(0, 0, 0, 0.6); }
/* o título da revista */
.theme-hawkins #site #conta > .box-head { position: static; display: flex; align-items: center; gap: 14px; min-height: 0; padding: 14px 18px 12px; border: 0; border-bottom: 3px solid #111; background: #fff; }
.theme-hawkins #site #conta > .box-head h2 { flex: 1; color: #e8352a; font: 400 clamp(30px, 4.6vw, 46px)/1 var(--font-paint); letter-spacing: 0.01em; text-shadow: 3px 3px 0 #111; transform: rotate(-1.5deg); }
.theme-hawkins #site #conta > .box-head .box-icon { display: none; }
.theme-hawkins #site #conta > .box-head::after { content: "Moradores de Hawkins · edição especial"; flex: 0 1 auto; padding: 3px 9px; border: 2px solid #111; background: #ffe45c; color: #111; font: 800 12px/1.3 "Barlow Condensed", var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 3px 3px 0 #111; }
.theme-hawkins #site #conta > .box-body { border-radius: 0; background: none; }
.theme-hawkins #site #conta > .box-body::after { content: "Moradores de Hawkins · Série 2003 · pág. 1"; display: block; padding: 0 0 12px; font: 800 11px "Barlow Condensed", var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; text-align: center; color: #55504a; }
.theme-hawkins #conta .profile { padding: 0 clamp(14px, 3vw, 32px) 26px; background: none; color: #111; }
/* recordatório do registro + o carimbo em letras de efeito */
.theme-hawkins #conta .profile-head { position: relative; margin: 20px 0 0; min-height: 0; padding: 10px 16px; border: 3px solid #111; border-radius: 0; background: #ffe45c; color: #111; box-shadow: 6px 6px 0 #111; }
.theme-hawkins #conta .profile-head::before { display: none; }
.theme-hawkins #conta .profile-id { align-items: center; gap: 6px 16px; }
.theme-hawkins #conta .profile-label { color: #111; font: 800 12px "Barlow Condensed", var(--font-ui); letter-spacing: 0.16em; opacity: 1; }
.theme-hawkins #conta .profile-number { padding: 0; color: #111; font: 800 clamp(34px, 4.6vw, 48px)/1 "Barlow Condensed", var(--font-ui); letter-spacing: 0.06em; }
.theme-hawkins #conta .profile-id::after { content: ""; width: 110px; height: 28px; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 12px, #111 12px 13px, transparent 13px 16px); }
.theme-hawkins #conta .file-stamp { padding: 6px 14px 4px; border: 3px solid #111; border-radius: 0; background: #fff; color: #e8352a; font: 400 26px/1 var(--font-paint); letter-spacing: 0.04em; opacity: 1; transform: rotate(-7deg); box-shadow: 4px 4px 0 #111; -webkit-mask: none; mask: none; }
/* a carta num quadro da página */
.theme-hawkins #conta .stn { gap: 26px; }
.theme-hawkins #conta .stn-card-hold { padding: 12px; border: 3px solid #111; background: radial-gradient(circle at 100% 0, rgba(232, 53, 42, 0.18) 0 18%, transparent 19%), #fff; box-shadow: 7px 7px 0 #111; }
.theme-hawkins #conta .stn-card-hold::before, .theme-hawkins #conta .stn-card-hold::after { display: none; }
.theme-hawkins #conta .stn-card-hold .card { filter: none; }
.theme-hawkins #conta .stn-card-acts { margin-top: 4px; }
/* as abas: recordatórios amarelos; o aberto vira tinta preta */
.theme-hawkins #conta .stn-tabs { padding: 0; border-bottom: 3px solid #111; display: flex; flex-wrap: wrap; gap: 6px; }
.theme-hawkins #conta .stn-tabs [role="tab"] { bottom: 0; margin-bottom: 8px; padding: 7px 14px 6px; border: 2.5px solid #111; border-radius: 0; background: #ffe45c; color: #111; font: 800 13px "Barlow Condensed", var(--font-ui); letter-spacing: 0.12em; clip-path: none; box-shadow: 3px 3px 0 #111; transition: transform 0.1s, box-shadow 0.1s, background-color 0.15s, color 0.15s; }
.theme-hawkins #conta .stn-tabs [role="tab"]:hover { color: #111; background: #fff; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #111; }
.theme-hawkins #conta .stn-tabs [role="tab"][aria-selected="true"] { padding-bottom: 6px; background: #111; border-color: #111; color: #ffe45c; box-shadow: 1px 1px 0 #111; transform: translate(2px, 2px); }
.theme-hawkins #conta .stn-tabs [role="tab"]:focus-visible { outline: 3px solid #e8352a; outline-offset: 3px; }
.theme-hawkins #conta .stn-panel { padding-top: 14px; }
/* os quadros: papel branco com retícula num canto, tinta grossa, sombra dura */
.theme-hawkins #conta :is(.stn-rec, .stn-hist, .stn-attrs, #stn-inventario, #stn-perks) { border: 3px solid #111; border-top-width: 3px; border-radius: 0; color: #111; box-shadow: 7px 7px 0 #111; background: radial-gradient(circle at 100% 100%, rgba(232, 53, 42, 0.22) 0 1.2px, transparent 1.8px) 0 0 / 6px 6px, #fffdf8; background-clip: padding-box; }
.theme-hawkins #conta :is(.stn-rec, .stn-hist, .stn-attrs, #stn-inventario, #stn-perks) { background-image: linear-gradient(135deg, transparent 72%, rgba(255, 253, 248, 0) 72%), radial-gradient(rgba(232, 53, 42, 0.16) 1.1px, transparent 1.7px); background-size: auto, 6px 6px; }
.theme-hawkins #conta .stn-rec-top { border-bottom: 3px solid #111; }
.theme-hawkins #conta .stn-rec .card-status { font: 800 20px "Barlow Condensed", var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; }
.theme-hawkins #conta .stn-hint, .theme-hawkins #conta .stn-note, .theme-hawkins #conta .stn-attrs-foot { color: #55504a; }
.theme-hawkins #conta .stn-data { gap: 0; padding: 0; background: none; border: 1.5px solid #111; outline: 1.5px solid #111; }
.theme-hawkins #conta .stn-data > div { padding: 10px 12px 9px; border: 1.5px solid #111; background: #fff; }
.theme-hawkins #conta .stn-data dt { display: inline-block; margin-bottom: 5px; padding: 1px 6px; border: 1.5px solid #111; background: #ffe45c; color: #111; font: 800 9.5px "Barlow Condensed", var(--font-ui); letter-spacing: 0.14em; }
.theme-hawkins #conta .stn-data dd { font: 700 14px/1.35 var(--font-ui); color: #111; }
.theme-hawkins #conta .stn-free { color: #d0261b; }
.theme-hawkins #conta .card-perk-btn { border: 2px solid #111; border-radius: 0; background: #ffe45c; color: #111; font: 800 12px "Barlow Condensed", var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 2px 2px 0 #111; }
.theme-hawkins #conta .card-perk-btn:hover { background: #d22217; border-color: #111; color: #fff; }
.theme-hawkins #conta .stn-data-xp .card-xp-lvl { color: #d0261b; }
.theme-hawkins #conta .card-xp-bar { border-color: #111; }
.theme-hawkins #conta .card-xp-bar i { background: #e8352a; box-shadow: none; }
/* história: recordatório amarelo e balões brancos de tinta preta (o desenho é o de sempre) */
.theme-hawkins #conta :is(.stn-cap, .stn-bal) h4 { color: #d0261b; }
.theme-hawkins #conta .stn-cap > p { border-width: 2.5px; box-shadow: 4px 4px 0 #111; }
.theme-hawkins #conta .stn-bal > p { border-width: 2.5px; }
/* atributos: a tabela com filetes de tinta */
.theme-hawkins #conta .stn-attr-table thead th { border-bottom: 3px solid #111; color: #d0261b; }
.theme-hawkins #conta .stn-attr { border-bottom-color: #d9d0bb; }
.theme-hawkins #conta .stn-attr:hover, .theme-hawkins #conta .stn-attr[aria-describedby] { background: rgba(255, 228, 92, 0.35); }
.theme-hawkins #conta .stn-attr:focus-visible { outline-color: #e8352a; }
.theme-hawkins #conta .stn-attr-play { background: rgba(255, 228, 92, 0.22); }
.theme-hawkins #conta .stn-attr-none { color: #cfc4a9; }
.theme-hawkins #conta .stn-attrs-empty { border: 2px dashed #111; color: #55504a; }
/* ---------- inventário: os quadros da revista ---------- */
.theme-hawkins #conta #stn-inventario { margin-top: 10px; padding: 0 0 16px; }
.theme-hawkins #conta .stn-inv-hero { min-height: 0; margin: 0 0 14px; padding: 12px 18px 11px; border: 0; border-bottom: 3px solid #111; border-radius: 0; background: #111; }
.theme-hawkins #conta .stn-inv-hero::after { display: none; }
.theme-hawkins #conta .stn-inv-kicker { color: #ffe45c; font: 800 10px "Barlow Condensed", var(--font-ui); letter-spacing: 0.2em; }
.theme-hawkins #conta .stn-inv-hero h3 { color: #fff; font: 400 clamp(26px, 3.4vw, 34px)/1 var(--font-paint); letter-spacing: 0.02em; text-shadow: 2px 2px 0 #e8352a; }
.theme-hawkins #conta .stn-inv-hero p { margin-top: 3px; color: #d9d2c4; font: 12px var(--font-type); }
.theme-hawkins #conta #stn-inventario .gear { padding: 0 16px; }
.theme-hawkins #conta .tile-bar { background: rgba(17, 17, 17, 0.12); }
.theme-hawkins #conta .stn-inv-empty { border: 2px dashed #111; color: #55504a; }
/* ---------- perks: o mesmo quadro (o style.css escurece esta aba por id; aqui volta ao papel) ---------- */
.theme-hawkins #conta #stn-perks { margin-top: 10px; padding: 16px 18px 6px; }
.theme-hawkins #stn-perks .perks { border-top: 0; padding-top: 0; color: #111; }
.theme-hawkins #stn-perks .pk-kicker { color: #d0261b; font: 800 11px "Barlow Condensed", var(--font-ui); letter-spacing: 0.2em; }
.theme-hawkins #stn-perks .pk-kicker span { color: #111; }
.theme-hawkins #stn-perks .pk-head h3, .theme-hawkins #stn-perks .pk-picker-head h4 { color: #e8352a; font: 400 clamp(26px, 3.4vw, 34px)/1.1 var(--font-paint); text-shadow: 2px 2px 0 #111; }
.theme-hawkins #stn-perks .pk-body h4 { color: #111; }
.theme-hawkins #stn-perks .pk-lead, .theme-hawkins #stn-perks .pk-body p, .theme-hawkins #stn-perks .pk-picker-head p, .theme-hawkins #stn-perks .pk-slot-lock p { color: #3b352d; }
.theme-hawkins #stn-perks .pk-lead b, .theme-hawkins #stn-perks .pk-picker-head b { color: #d0261b; }
.theme-hawkins #stn-perks .pk-slot, .theme-hawkins #stn-perks .pk-grid > li { border: 2.5px solid #111; border-radius: 0; background: #fff; box-shadow: 4px 4px 0 #111; }
.theme-hawkins #stn-perks .pk-slot-free { border-style: dashed; }
.theme-hawkins #stn-perks .pk-slot-lock { opacity: 0.7; } /* esmaecido, mas o "Nível 9" ainda se lê */
.theme-hawkins #stn-perks .pk-lvl { padding: 1px 6px; border: 1.5px solid #111; background: #ffe45c; color: #111; font: 800 10px "Barlow Condensed", var(--font-ui); letter-spacing: 0.14em; }
.theme-hawkins #stn-perks .pk-picker { border: 2.5px solid #111; border-radius: 0; background: #f9f3e6; box-shadow: 6px 6px 0 #111; }
.theme-hawkins #stn-perks .pk-icon { border: 2px solid #111; border-radius: 0; background: #ffe45c; }
.theme-hawkins #stn-perks .pk-body h4 small { border-radius: 0; background: #111; color: #ffe45c; }
.theme-hawkins #stn-perks .pk-choose { border: 2.5px solid #111; border-radius: 0; background: #ffe45c; color: #111; font: 800 15px "Barlow Condensed", var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 4px 4px 0 #111; }
.theme-hawkins #stn-perks .pk-choose:hover { background: #d22217; color: #fff; }
.theme-hawkins #stn-perks .pk-choose:focus-visible { outline: 3px solid #e8352a; }
.theme-hawkins #stn-perks .pk-x { border: 2px solid #111; border-radius: 0; background: #fff; color: #111; }
.theme-hawkins #stn-perks .pk-unique { color: #d0261b; }
/* senha do fliperama (perk trancada): campo de gibi, preto no branco */
.theme-hawkins #stn-perks .pk-key { border-top: 2px dashed #111; }
.theme-hawkins #stn-perks .pk-key-field { color: #111; font: 800 12px "Barlow Condensed", var(--font-ui); letter-spacing: 0.14em; }
.theme-hawkins #stn-perks .pk-key-field input { border: 2.5px solid #111; border-radius: 0; background: #fff; color: #111; box-shadow: 3px 3px 0 #111; }
.theme-hawkins #stn-perks .pk-key-field input:focus-visible { outline: 3px solid #e8352a; border-color: #111; }
.theme-hawkins #stn-perks .pk-key-msg { color: #b3140c !important; }
.theme-hawkins #stn-perks .stn-empty { border: 2px dashed #111; color: #55504a; }
/* configurações e sair: mais dois quadros */
.theme-hawkins #conta .acct-config { border: 3px solid #111; border-radius: 0; background: #fff; color: #111; box-shadow: 6px 6px 0 #111; }
.theme-hawkins #conta .acct-config > summary { font: 800 15px "Barlow Condensed", var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.theme-hawkins #conta .acct-config[open] > summary { border-bottom: 3px solid #111; }
.theme-hawkins #conta .acct-config > summary:focus-visible { outline-color: #e8352a; }
.theme-hawkins #conta .acct-title { color: #d0261b; }
.theme-hawkins #conta .acct-form label { color: #3b352d; }
.theme-hawkins #conta .acct-form input { border: 2px solid #111; border-radius: 0; background: #fff; color: #111; box-shadow: none; }
.theme-hawkins #conta #btn-logout { margin-top: 14px; }
.theme-hawkins #conta .stn-empty { border: 2px dashed #111; color: #55504a; }
.theme-hawkins #conta .stn-editor .card-side { border: 3px solid #111; background: #fff; color: #111; box-shadow: 6px 6px 0 #111; }
.theme-hawkins #conta .stn-editor .card-side-kicker { color: #d0261b; }
.theme-hawkins #conta .stn-editor .card-points { border-color: #111; }
/* quadro "Identidade" (admin editando a própria ficha, ficha.js .fid-): o mesmo quadrinho dos campos da conta */
.theme-hawkins #conta .stn-editor .fid-box { border: 2px solid #111; border-radius: 0; background: #fffdf8; }
.theme-hawkins #conta .stn-editor .fid-legend { color: #d0261b; }
.theme-hawkins #conta .stn-editor :is(.fid-note, .fid-hint, .fid-row > label small, .fid-at > span) { color: #55504a; }
.theme-hawkins #conta .stn-editor .fid-row input { border: 2px solid #111; border-radius: 0; background: #fff; color: #111; box-shadow: none; }
.theme-hawkins #conta .stn-editor .fpk-add select { border: 2px solid #111; border-radius: 0; background: #fff; color: #111; box-shadow: none; }
.theme-hawkins #conta .stn-editor .fpk-item { border: 2px solid #111; border-radius: 0; background: #fff; color: #111; }
.theme-hawkins #conta .stn-editor .fpk-del { border: 2px solid #111; border-radius: 0; color: #b0201a; }
.theme-hawkins #conta .stn-editor .fid-row input[aria-invalid="true"] { border-color: #d0261b; }
/* movimento: o carimbo é batido, os quadros entram como se fossem desenhados, a barra de XP enche */
@media (prefers-reduced-motion: no-preference) {
  .theme-hawkins #conta .file-stamp { animation: hkStamp 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 0.35s backwards; }
  .theme-hawkins #conta .stn-panel:not([hidden]) { animation: hkPanel 0.28s cubic-bezier(0.2, 0.8, 0.2, 1.2); }
  .theme-hawkins #conta .card-xp-bar i { animation: hkXp 1.1s cubic-bezier(0.25, 0.8, 0.3, 1) 0.2s backwards; transform-origin: left; }
  .theme-hawkins #conta .stn-card { animation: hkDoc 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .theme-hawkins #conta .profile-head { animation: hkDoc 0.4s ease-out backwards; }
}
@keyframes hkStamp { 0% { opacity: 0; transform: scale(2.2) rotate(-18deg); } 60% { opacity: 1; transform: scale(0.94) rotate(-6deg); } 100% { opacity: 1; transform: rotate(-7deg); } }
@keyframes hkPanel { from { opacity: 0; transform: scale(0.97); } }
@keyframes hkXp { from { transform: scaleX(0); } }
@keyframes hkDoc { from { opacity: 0; transform: translate(-8px, 6px); } }
@media (min-width: 521px) and (max-width: 1100px) {
  .theme-hawkins #conta .stn-tabs [role="tab"] { padding: 6px 10px 5px; font-size: 12px; letter-spacing: 0.08em; }
}
@media (max-width: 760px) {
  .theme-hawkins #site #conta.box { margin-top: 14px; box-shadow: 6px 6px 0 #111, 6px 6px 0 3px #f7f2e6; }
  .theme-hawkins #site #conta > .box-head { flex-wrap: wrap; gap: 8px; padding: 12px 14px 10px; }
  .theme-hawkins #site #conta > .box-head h2 { flex-basis: 100%; }
  .theme-hawkins #conta .profile-id::after { display: none; }
  .theme-hawkins #conta .profile-head { margin-top: 16px; box-shadow: 4px 4px 0 #111; }
  .theme-hawkins #conta .file-stamp { font-size: 20px; }
  .theme-hawkins #conta :is(.stn-rec, .stn-hist, .stn-attrs, #stn-inventario, #stn-perks, .stn-card-hold, .acct-config) { box-shadow: 4px 4px 0 #111; }
}
@media (max-width: 520px) {
  .theme-hawkins #conta .stn-tabs { display: flex; gap: 6px; }
  .theme-hawkins #conta .stn-tabs [role="tab"] { flex: 1 1 30%; padding: 7px 4px 6px; }
  .theme-hawkins #conta .stn-tabs [role="tab"]:hover { transform: none; box-shadow: 3px 3px 0 #111; }
  .theme-hawkins #conta :is(#stn-inventario) { padding-bottom: 12px; }
  .theme-hawkins #conta #stn-inventario .gear { padding: 0 10px; }
  .theme-hawkins #conta #stn-perks { padding: 12px 12px 4px; }
}

/* =========================================================
   ADMIN e XP (só administradores): o escritório da prefeitura,
   no padrão neutro de Hawkins (azul-noite, âmbar de luz de sódio).
   ========================================================= */
.theme-hawkins:is([data-page="admin"], [data-page="xp"], [data-page="historico"], [data-page="validacao"], [data-page="discord"]) { background-color: #12161b; }
.theme-hawkins:is([data-page="admin"], [data-page="xp"], [data-page="historico"], [data-page="validacao"], [data-page="discord"]) #site .site-controls { border-color: #2c323b; background: #13171c; }
/* interruptores do painel: chave de parede, âmbar quando ligada */
.theme-hawkins #site .ctl-switch { background: #262b33; }
.theme-hawkins #site .ctl-switch::after { background: radial-gradient(circle at 40% 35%, #fff, #d6d0c2); }
.theme-hawkins #site .ctl input:checked + .ctl-switch { background: #c98f2c; }
.theme-hawkins #site .ctl input:focus-visible + .ctl-switch { outline-color: var(--hk-focus); }

/* Classes: catálogo do anuário de 2003. As quatro turmas compartilham a mesma
   impressão e as 32 fichas usam recortes enquadrados sem ampliar células vizinhas. */
#classes .cls-illustration:not(.cls-photo)::before {
  inset: 0;
  background-size: 400% 200%;
  background-position: var(--art-x) var(--art-y);
}
#classes .cls-illustration,
#classes .cls-class-illustration { isolation: isolate; }
#classes .cls-sub-meta { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font: 700 9px/1.2 var(--font-type); letter-spacing: .08em; text-transform: uppercase; opacity: .68; }
#classes .cls-sub-open { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding-top: 7px; border-top: 1px solid currentColor; font: 700 10px/1.2 var(--font-type); letter-spacing: .04em; opacity: .78; }
#classes .cls-sub-open b { font: 20px/12px Georgia, serif; transition: transform .25s ease; }
#classes .cls-sub:hover .cls-sub-open b,
#classes .cls-sub:focus-visible .cls-sub-open b { transform: translate(2px, -2px); }
#classes .cls-sub-ico { position: relative; overflow: hidden; }
#classes .cls-sub-ico::after { content: ""; position: absolute; inset: auto 6px 2px; height: 1px; background: currentColor; opacity: .14; }
#classes .cls-sub-row { align-items: center; min-height: 110px; }
#classes .cls-sub-name { line-height: 1.1; }
#classes .cls-sub-arch { min-height: 32px; }
#classes .cls-sub-top span { border-radius: 2px; }
#classes .cls-sheet-ico .cls-illustration { max-width: 100%; }
#classes .cls-tip.scrollable .cls-tip-box::after { content: "Role para ler ↓"; position: absolute; z-index: 3; right: 13px; bottom: 11px; padding: 3px 7px; border: 1px solid rgba(255, 196, 145, .55); background: #351219; color: #fff0de; font: 700 11px/1.2 var(--font-type); letter-spacing: .02em; pointer-events: none; box-shadow: 0 2px 8px #000; }
#classes .cls-tip.scrollable .cls-tip-screen { padding-bottom: 30px; scrollbar-color: #cd554a #220c10; scrollbar-width: thin; }

.theme-hawkins #classes .cls-board { background:
  radial-gradient(circle at 20% 30%, rgba(82, 48, 22, .24) 0 1px, transparent 1.5px) 0 0 / 9px 10px,
  radial-gradient(circle at 80% 70%, rgba(255, 231, 190, .17) 0 1px, transparent 1.5px) 0 0 / 13px 12px,
  #b98754; }
.theme-hawkins #classes .cls-picker { gap: 18px; padding-top: 25px; }
.theme-hawkins #classes .cls-slot { min-width: 0; }
.theme-hawkins #classes .cls-face { border-radius: 3px; padding: 15px 13px 17px; gap: 8px; background: #f5efdf; border: 1px solid #dfd1b7; transform: rotate(var(--tilt, 0deg)); }
.theme-hawkins #classes .cls-face::before { inset: 5px; border: 1px solid color-mix(in srgb, var(--c-ink) 62%, #d3b58d); border-radius: 1px; opacity: 1; }
.theme-hawkins #classes .cls-face::after { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--c-ink); border-radius: 3px 3px 0 0; opacity: .9; }
.theme-hawkins #classes .cls-card:hover .cls-face,
.theme-hawkins #classes .cls-card:focus-visible .cls-face { transform: rotate(0deg) translateY(-5px); box-shadow: 0 6px 4px rgba(40,25,10,.16), 0 22px 28px -8px rgba(40,25,10,.6); }
.theme-hawkins #classes .cls-pin { background: radial-gradient(circle at 34% 27%, #fff 0 10%, #b52826 45%, #5f1715 85%); }
.theme-hawkins #classes .cls-top { position: relative; z-index: 1; padding: 2px 4px 0; color: #62594c; font: 700 10px/1.25 var(--font-type); letter-spacing: .06em; }
.theme-hawkins #classes .cls-art { aspect-ratio: 1/.92; border-radius: 1px; background:
  repeating-linear-gradient(0deg, transparent 0 16px, rgba(66,58,45,.055) 16px 17px),
  #e9dfcc; box-shadow: inset 0 0 0 1px #c9bda7; }
.theme-hawkins #classes .cls-art .cls-class-illustration { width: 87%; aspect-ratio: 1; }
.theme-hawkins #classes .cls-art .cls-emb { filter: drop-shadow(0 8px 5px rgba(40,25,10,.22)); }
.theme-hawkins #classes .cls-name { position: relative; z-index: 1; min-height: 47px; color: var(--c-ink); font: 700 clamp(18px,1.7vw,23px)/1.02 var(--font-logo); text-shadow: none; overflow-wrap: anywhere; }
.theme-hawkins #classes .cls-desc { position: relative; z-index: 1; color: #3f3a33; font: 13px/1.5 var(--font-file); }
.theme-hawkins #classes .cls-cta { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; width: calc(100% - 8px); box-sizing: border-box; margin: 7px 4px 0; padding: 6px 0 3px; border-radius: 0; border-top: 1px solid #cbbda5; background: none; box-shadow: none; color: var(--c-ink); font: 700 12px/1.2 var(--font-type); }
.theme-hawkins #classes .cls-cta b { font-size: 18px; }
.theme-hawkins #classes .cls-card[data-cls="cheerleaders"] .cls-name { font: 800 25px/1 "Barlow Condensed", var(--font-ui); letter-spacing: .015em; overflow-wrap: normal; }
/* fileira de 5 cartas (desktop): a carta ficou mais estreita */
@media (min-width: 981px) { .theme-hawkins #classes .cls-card[data-cls="cheerleaders"] .cls-name { font-size: clamp(17px, 1.55vw, 20px); letter-spacing: 0; } }
.theme-hawkins #classes .cls-view[data-cls="cheerleaders"] .cls-name { font: 800 17px/1 "Barlow Condensed", var(--font-ui); letter-spacing: .01em; overflow-wrap: normal; }
.theme-hawkins #classes .cls-view[data-cls="cheerleaders"] .cls-hero-name { font: 800 clamp(38px,4vw,52px)/1 "Barlow Condensed", var(--font-ui); letter-spacing: .01em; }
.theme-hawkins #classes .cls-hero { gap: clamp(18px,3vw,32px); align-items: stretch; }
.theme-hawkins #classes .cls-hero-card .cls-face { min-height: 100%; }
.theme-hawkins #classes .cls-hero-card .cls-name { min-height: auto; text-align: center; }
.theme-hawkins #classes .cls-hero-text { transform: rotate(.2deg); padding-top: 23px; padding-bottom: 21px; }
.theme-hawkins #classes .cls-hero-name { font-family: var(--font-logo); font-weight: 700; letter-spacing: -.035em; transform: none; font-size: clamp(31px,4.2vw,50px); overflow-wrap: anywhere; }
.theme-hawkins #classes .cls-intro { max-width: 65ch; font: 15px/26px var(--font-file); }
.theme-hawkins #classes .cls-ranks li { padding: 5px 8px; font: 11px/1.2 var(--font-type); }
.theme-hawkins #classes .cls-subs-head { border-left: 4px solid var(--c-ink); }
.theme-hawkins #classes .cls-subs-title { font: 700 15px/1.1 var(--font-logo); letter-spacing: .07em; }
.theme-hawkins #classes .cls-subs { gap: 16px; }
.theme-hawkins #classes .cls-sub-face { min-height: 268px; gap: 4px; border: 1px solid #d5c9b5; border-top: 4px solid var(--c-ink); border-radius: 2px; padding: 12px 12px 10px; background: #f8f3e9; color: #24221e; }
.theme-hawkins #classes .cls-sub:hover .cls-sub-face,
.theme-hawkins #classes .cls-sub:focus-visible .cls-sub-face { transform: translateY(-5px) rotate(0deg); box-shadow: 0 5px 4px rgba(40,25,10,.15), 0 17px 20px -6px rgba(40,25,10,.55); }
.theme-hawkins #classes .cls-sub-ico { width: min(110px,72%); height: 110px; filter: drop-shadow(0 6px 4px rgba(43,31,23,.16)); }
.theme-hawkins #classes .cls-sub-pts { color: var(--c-ink); font-size: 23px; }
.theme-hawkins #classes .cls-sub-name { font: 700 18px/1.08 var(--font-logo); }
.theme-hawkins #classes .cls-sub-arch { color: #555047; font: 12px/1.3 var(--font-file); }
.theme-hawkins #classes .cls-sub-top { gap: 4px; padding-top: 7px; }
.theme-hawkins #classes .cls-sub-top span { background: transparent; box-shadow: inset 0 0 0 1px var(--star-solid); font: 700 10px var(--font-type); }
.theme-hawkins #classes .cls-rank { z-index: 2; top: -12px; right: 5px; }
.theme-hawkins #classes .cls-sheet-in { background: #f5efdf; border: 7px solid #d8c9ad; border-radius: 3px; }
.theme-hawkins #classes .cls-sheet-head { color: #2d2923; background: #efe5d0; border-bottom: 3px solid var(--c-ink); text-shadow: none; }
.theme-hawkins #classes .cls-sheet-kicker { color: var(--c-ink); }
.theme-hawkins #classes .cls-sheet-head h3 { color: #25211d; }
.theme-hawkins #classes .cls-x { color: #2d2923; border: 2px solid #7e7567; }
.theme-hawkins #classes .cls-x:hover { background: #e1d5bf; }
.theme-hawkins #classes .cls-x:focus-visible { outline-color: #8f292b; }
.theme-hawkins #classes .cls-edit-btn { color: #fff; background: #744624; }
.theme-hawkins #classes .cls-edit-btn:hover { background: #533016; }
.theme-hawkins #classes .cls-sheet-body { background: repeating-linear-gradient(0deg, transparent 0 26px, rgba(77,112,144,.08) 26px 27px), #fbf7ef; }
.theme-hawkins #classes .cls-sheet-desc { color: #302d28; }
.theme-upside #classes .cls-sub-meta,
.theme-upside #classes .cls-sub-open { color: #9aa6b5; }
.theme-upside #classes .cls-board { background: radial-gradient(ellipse at 50% 110%, rgba(92, 20, 30, .19), transparent 65%), #10151d; }
.theme-upside #classes .cls-lead { max-width: 68ch; padding: 13px 16px; border-left: 3px solid #a83845; background: #18202a; color: #e3e0de; font: 14px/1.6 var(--font-file); box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.theme-upside #classes .cls-face { background: #171c24; border-color: #62404a; }
.theme-upside #classes .cls-face::before { box-shadow: none; border-color: color-mix(in srgb, var(--c) 75%, #777); }
.theme-upside #classes .cls-art { background: #11161d; box-shadow: inset 0 0 0 1px #665159; }
.theme-upside #classes .cls-art .cls-emb { filter: drop-shadow(0 6px 4px rgba(0,0,0,.7)); }
.theme-upside #classes .cls-card:hover .cls-emb,
.theme-upside #classes .cls-card:focus-visible .cls-emb { animation: none; }
.theme-upside #classes .cls-name { color: #f4e4e2; text-shadow: none; }
.theme-upside #classes .cls-desc { color: #d2cfcc; }
.theme-upside #classes .cls-cta { color: #ff929a; }
.theme-upside #classes .cls-bar { border-bottom: 1px solid #75505a; }
.theme-upside #classes .cls-intro { color: #e5e1df; }
.theme-upside #classes .cls-subs-title { color: #f3e7e5; }
.theme-upside #classes .cls-legend { color: #c2cbd4; }
.theme-upside #classes .cls-sub-face { background: #191e26; border-color: #71414a; box-shadow: 0 9px 18px rgba(0,0,0,.55); }
.theme-upside #classes .cls-sub-ico { filter: drop-shadow(0 7px 5px rgba(0,0,0,.65)); }
.theme-upside #classes .cls-sub-name { color: #f0e7e4; }
.theme-upside #classes .cls-sub-arch { color: #c8c5c3; }
.theme-upside #classes .cls-sub-open { color: #e5c8c7; }

@media (prefers-reduced-motion: no-preference) {
  .theme-hawkins #classes .cls-slot .cls-class-illustration { animation: clsPrintIn .65s ease-out both; animation-delay: calc(.14s + .08s * var(--seq, 0)); }
  .theme-hawkins #classes .cls-slot:nth-child(2) { --seq: 1; }
  .theme-hawkins #classes .cls-slot:nth-child(3) { --seq: 2; }
  .theme-hawkins #classes .cls-slot:nth-child(4) { --seq: 3; }
  .theme-hawkins #classes .cls-slot:nth-child(5) { --seq: 4; }
  .theme-hawkins #classes .cls-card:hover .cls-class-illustration,
  .theme-hawkins #classes .cls-card:focus-visible .cls-class-illustration { transform: scale(1.045) rotate(-2deg); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .theme-hawkins #classes .cls-sub:hover .cls-illustration,
  .theme-hawkins #classes .cls-sub:focus-visible .cls-illustration { transform: translateY(-3px) scale(1.035); }
}
@keyframes clsPrintIn { from { opacity: .12; filter: grayscale(1) contrast(.65); } to { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  #classes .cls-class-illustration,
  #classes .cls-illustration,
  #classes .cls-sub-open b { animation: none !important; transition: none !important; }
  #classes .cls-card:hover .cls-class-illustration,
  #classes .cls-sub:hover .cls-illustration { transform: none; }
}

/* ---------- Livro de builds (sinergias) em Hawkins: folha de caderno presa no mural (2026-09-28) ---------- */
.theme-hawkins #classes .syn-book { border: 1px solid #d5c9b5; border-radius: 2px; background: #f8f3e9; color: #24221e; box-shadow: 0 6px 14px rgba(40, 26, 10, 0.25); }
.theme-hawkins #classes :is(.syn-book-kicker, .syn-book-sum small, .syn-book-h small, .syn-dnd) { color: #5f564a; }
.theme-hawkins #classes .syn-book-sum b { color: #2a2620; }
.theme-hawkins #classes .syn-book-sum::after { color: #5f564a; }
.theme-hawkins #classes :is(.syn-book-lead, .syn-desc, .syn-mae) { font-family: var(--font-type); }
.theme-hawkins #classes .syn-card { border: 1px solid #d5c9b5; border-top: 3px solid #6b3fa0; border-radius: 2px; background: #fffaf0; }
.theme-hawkins #classes .syn-secret { border-style: dashed; border-top-color: #8a8173; background: #f3ede0; }
.theme-hawkins #classes .syn-attr { color: #3b3228; }
.theme-hawkins #classes .syn-attr .cls-ico { color: #3b3228; }

/* =========================================================
   SISTEMAS — o porão do Hellfire: a mesa de jogo (2026-09-28)
   Feltro verde da mesa de RPG com a luz da luminária no meio; o
   manual (sistemas.js, .sis-) fica aberto em cima dela. Cabeçalho
   de madeira escura, menu de couro vinho com as abas em papel.
   ========================================================= */
.theme-hawkins[data-page="sistemas"] { background-color: #173427; }
.theme-hawkins[data-page="sistemas"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(255, 236, 170, 0.16), transparent 70%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45)),
    radial-gradient(rgba(0, 0, 0, 0.16) 1px, transparent 1.3px) 0 0 / 3px 3px,
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.3px) 1px 2px / 5px 5px,
    linear-gradient(#1d4232, #143026); }
.theme-hawkins[data-page="sistemas"] #site {
  --hk-accent: #e9c877; --hk-focus: #f2d27e;
  --hk-top-bg: #0e1f18; --hk-top-ink: #a9bfb2; --hk-top-strong: #fff; --hk-top-link: #f2d27e; --hk-top-line: #07120d;
  --hk-head-bg: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.35)), repeating-linear-gradient(90deg, #3a2518 0 3px, #452c1c 3px 120px, #33200f 120px 124px); --hk-head-ink: #f6ead0; --hk-head-sub: #cdb893; --hk-head-line: #1c110a;
  --hk-brand-b: #e9c877; --hk-orb-bg: radial-gradient(circle at 50% 40%, #b8412f, #6e1d14); --hk-orb-line: #f2d27e;
  --hk-ctl-bg: rgba(20, 12, 7, 0.5); --hk-ctl-line: #1c110a; --hk-ctl-dim: #cdb893;
  --hk-nav-bg: linear-gradient(#5e1712, #481009); --hk-nav-line: #2e0906; --hk-nav-shadow: 0 3px 0 #2e0906, 0 8px 16px rgba(0, 0, 0, 0.35);
  --hk-nav-font: 700 14px/1 "Barlow Condensed", var(--font-ui); --hk-nav-case: uppercase; --hk-nav-track: 0.1em;
  --hk-tab-ink: #f3dcb0; --hk-tab-hover: #2a1a12; --hk-tab-hover-bg: #f6ecd6; --hk-tab-on-ink: #2a1a12; --hk-tab-on-bg: #fbf6ea; --hk-tab-mark: #e9c877;
  --hk-foot-bg: #0e1f18; --hk-foot-ink: #a9bfb2; --hk-foot-link: #f2d27e; --hk-foot-line: #07120d;
  --hk-btn-bg: #a3241a; --hk-btn-ink: #fff; --hk-btn-edge: #5e1712; --hk-btn2-bg: #1d4232; --hk-btn2-edge: #0e1f18; --hk-btn2-ink: #fff;
}
.theme-hawkins[data-page="sistemas"] #sistemas { position: relative; z-index: 1; }
/* com a aba Sistemas, o menu de Classes (letra de máquina, espaçada) e o da Melvald's (etiquetas com
   folga) passavam do limite entre 1001 e ~1070 px; só nessa faixa as abas ficam mais juntas (acima,
   nada muda; abaixo de 1001 o menu já é a tira rolável do mobile.css) */
@media (min-width: 1001px) and (max-width: 1100px) {
  .theme-hawkins[data-page="classes"] .tabs-in { gap: 3px; }
  .theme-hawkins[data-page="classes"] .tabs-nav a { padding-left: 10px; padding-right: 10px; }
  .theme-hawkins[data-page="loja"] .tabs-in { gap: 4px; }
  .theme-hawkins[data-page="loja"] .tabs-nav a { padding-left: 12px; padding-right: 8px; }
}
.theme-hawkins[data-page="sistemas"] .toast { border: 0; border-top: 6px solid #a3241a; border-radius: 2px; background: #fbf6ea; color: #211a17; }

/* ---------- perks, quarta leva (2026-09-30): filtro, troca da Polivalente e lembretes da mesa, no traço de gibi ---------- */
.theme-hawkins #stn-perks .pk-tagbtn { border: 2px solid #111; border-radius: 0; background: #fff; color: #111; box-shadow: 2px 2px 0 #111; font-family: "Barlow Condensed", var(--font-ui); font-size: 14px; letter-spacing: 0.03em; }
.theme-hawkins #stn-perks .pk-tagbtn small { color: #4f4a44; }
.theme-hawkins #stn-perks .pk-tagbtn:hover { background: #ffe45c; }
.theme-hawkins #stn-perks .pk-tagbtn.on { background: #111; color: #ffe45c; box-shadow: none; transform: translate(2px, 2px); }
.theme-hawkins #stn-perks .pk-tagbtn.on small { color: #fff; }
.theme-hawkins #stn-perks .pk-tagbtn:focus-visible, .theme-hawkins #stn-perks .pk-swap-out:focus-visible { outline-color: #d0261b; }
.theme-hawkins #stn-perks .pk-swap { border: 2.5px dashed #111; border-radius: 0; background: #fff; }
.theme-hawkins #stn-perks .pk-swap p, .theme-hawkins #stn-perks .pk-swap-done { color: #3b352d; }
.theme-hawkins #stn-perks .pk-swap p b, .theme-hawkins #stn-perks .pk-swap-done b { color: #d0261b; }
.theme-hawkins #stn-perks .pk-swap-out { border: 2px solid #111; border-radius: 0; background: #ffe45c; color: #111; box-shadow: 2px 2px 0 #111; }
.theme-hawkins #stn-perks .pk-swap-out:hover { background: #e8352a; color: #fff; }
.theme-hawkins #stn-perks .pk-none { color: #4f4a44; }
.theme-hawkins #conta .pkm-notes { border-color: #111; border-radius: 0; background: #fff; color: #111; }
.theme-hawkins #conta .pkm-btn { border-color: #111; border-radius: 0; background: #ffe45c; color: #111; box-shadow: 2px 2px 0 #111; }
.theme-hawkins #conta .pkm-btn.is-used { background: #111; color: #ffe45c; box-shadow: none; }
.theme-hawkins .xp-diario { color: #8a5a00; }

/* Histórico (só admins, historico.js .hst-): o mesmo escritório da prefeitura do painel (azul-noite, âmbar) */
.theme-hawkins #historico .hst-tab[aria-selected="true"] { border-color: #c98f2c; background: rgba(201, 143, 44, 0.14); }
.theme-hawkins #historico .hst-cat.on { border-color: #c98f2c; background: rgba(201, 143, 44, 0.14); }
.theme-hawkins #historico :is(.hst-item, .hst-tab, .hst-cat, .hst-by) { border-color: #2c323b; }
.theme-hawkins #historico .hst-item { background: #13171c; }
.theme-hawkins #historico .hst-item.hst-pego { border-color: #b8463c; background: rgba(184, 70, 60, 0.12); }
/* catálogo de perks (só para olhar): mesma caixa tracejada da troca da Polivalente */
.theme-hawkins #stn-perks .pk-browse { border: 2.5px dashed #111; border-radius: 0; background: #fff; }
.theme-hawkins #stn-perks .pk-browse p { color: #3b352d; }
.theme-hawkins #stn-perks .pk-browse p b { color: #d0261b; }
.theme-hawkins #stn-perks .pk-wait { color: #4f4a44; }

/* Celebridade local (perk, quinta leva): em Moradores, a moldura de quadrinho da carta fica dourada */
.theme-hawkins #moradores .card-mini-slot:has(.card-mini-celeb) { border-color: #6b4a00; background: linear-gradient(135deg, #fff1c2, #f0c75a 48%, #d9a21f 52%, #ffe9a3); box-shadow: 4px 4px 0 #6b4a00; }
.theme-hawkins #moradores .card-mini-celeb .card-mini-in { box-shadow: inset 0 0 0 3px #b8860b, 0 0 14px rgba(232, 194, 94, 0.75); }