/* Marca: emblema em pixel art e logotipo (emblema + nome). Classes com prefixo logo-; o HTML sai de
   public/js/sprites/logo.js (emblemHtml, logoHtml), que define --logo-size (lado do emblema), --logo-text (corpo do
   nome) e --logo-tag-size (corpo do slogan). O nome é ouro com contorno escuro: lê bem nos dois temas. */
:root {
  --logo-ink: #f2c94c;
  --logo-outline: #1a1410;
  --logo-drop: #1a1410;
  --logo-tag: var(--muted, #9db0a5);
  /* Nome pequeno (menos de 24 px): sem contorno, que embola as letras; no tema claro vira tinta escura. */
  --logo-ink-sm: #f2c94c;
  --logo-drop-sm: #1a1410;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --logo-ink-sm: #17231c; --logo-drop-sm: #e09b1a; }
}
:root[data-theme="light"] { --logo-ink-sm: #17231c; --logo-drop-sm: #e09b1a; }

.logo { display: inline-flex; align-items: center; gap: calc(var(--logo-size, 64px) / 4); line-height: 1; color: inherit; text-decoration: none; min-width: 0; }
a.logo:hover { text-decoration: none; }
.logo-v { flex-direction: column; gap: calc(var(--logo-size, 128px) / 8); text-align: center; }

.logo-emblem { position: relative; display: inline-block; flex: none; width: var(--logo-size, 64px); height: var(--logo-size, 64px); vertical-align: middle; }
.logo-emblem-img { display: block; width: 100%; height: 100%; image-rendering: pixelated; -webkit-user-drag: none; user-select: none; }

.logo-type { display: flex; flex-direction: column; gap: calc(var(--logo-text, 32px) / 4); min-width: 0; }
.logo-v .logo-type { align-items: center; }
/* Contorno de meio pixel da fonte (1/16 em) em oito direções e sombra de um pixel (1/8 em) para baixo. */
.logo-word {
  --u: calc(var(--logo-text, 32px) / 16);
  font-family: var(--font-pixel, 'Silkscreen'), 'Courier New', monospace;
  font-weight: 700; font-size: var(--logo-text, 32px); line-height: 1; letter-spacing: 0.0625em;
  text-transform: uppercase; white-space: nowrap; color: var(--logo-ink);
  padding: var(--u) var(--u) calc(var(--u) * 3);
  text-shadow:
    var(--u) 0 0 var(--logo-outline), calc(var(--u) * -1) 0 0 var(--logo-outline),
    0 var(--u) 0 var(--logo-outline), 0 calc(var(--u) * -1) 0 var(--logo-outline),
    var(--u) var(--u) 0 var(--logo-outline), calc(var(--u) * -1) var(--u) 0 var(--logo-outline),
    var(--u) calc(var(--u) * -1) 0 var(--logo-outline), calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--logo-outline),
    0 calc(var(--u) * 2) 0 var(--logo-drop), var(--u) calc(var(--u) * 2) 0 var(--logo-drop), calc(var(--u) * -1) calc(var(--u) * 2) 0 var(--logo-drop),
    0 calc(var(--u) * 3) 0 var(--logo-drop);
}
.logo-sm .logo-word { color: var(--logo-ink-sm); padding: 0 0 calc(var(--u) * 2); text-shadow: 0 var(--u) 0 var(--logo-drop-sm); }
.logo-tag {
  font-family: var(--font, 'Tiny5'), system-ui, sans-serif; font-size: var(--logo-tag-size, 16px); line-height: 1;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--logo-tag); white-space: nowrap;
}
.logo-h .logo-tag { padding-left: calc(var(--logo-text, 32px) / 16); }

/* ---- animação discreta: um brilho em degraus passa pelo ouro e pelo couro e a estrela pisca uma vez.
   A máscara (--logo-shine) vem de logo.js com o mesmo desenho do emblema. */
.logo-anim {
  --logo-spark-s: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'><path d='M2 1h1v3H2zM1 2h3v1H1z' fill='%23fff'/><rect x='2' y='2' width='1' height='1' fill='%23f2c94c'/></svg>");
  --logo-spark-b: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'><path d='M2 0h1v5H2zM0 2h5v1H0z' fill='%23fff'/><rect x='2' y='2' width='1' height='1' fill='%23f2c94c'/></svg>");
}
.logo-anim::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--logo-shine) 0 0 / 100% 100% no-repeat; mask: var(--logo-shine) 0 0 / 100% 100% no-repeat;
  background: linear-gradient(115deg, transparent 0 44%, rgba(255, 255, 255, 0.7) 44% 48%, transparent 48% 50%, rgba(255, 255, 255, 0.45) 50% 52%, transparent 52%) 100% 0 / 300% 100% no-repeat;
  animation: logo-glint 6s steps(10, end) 1.2s infinite;
}
.logo-anim::before {
  content: ''; position: absolute; z-index: 1; pointer-events: none; opacity: 0;
  left: calc(var(--logo-size) * 23 / 32); top: 0; width: calc(var(--logo-size) * 5 / 32); height: calc(var(--logo-size) * 5 / 32);
  background: var(--logo-spark-s) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: logo-twinkle 6s step-end 1.2s infinite;
}
@keyframes logo-glint {
  0% { background-position: 100% 0; }
  14%, 100% { background-position: 0 0; }
}
@keyframes logo-twinkle {
  0%, 9% { opacity: 0; }
  10% { opacity: 1; }
  13% { opacity: 1; background-image: var(--logo-spark-b); }
  18% { opacity: 1; background-image: var(--logo-spark-s); }
  21%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-anim::before, .logo-anim::after { animation: none; display: none; }
}