/* ==========================================================================
   Gazeta Games — base.css
   Design system compartilhado por todos os jogos do portal.
   Paleta extraída diretamente da logo e das artes oficiais (pasta Material).
   ========================================================================== */

:root {
  /* --- Cores da marca ---------------------------------------------------- */
  --gz-navy: #021c55;          /* azul da tipografia da logo */
  --gz-navy-700: #06266e;
  --gz-navy-600: #0b2e7a;
  --gz-navy-400: #2b4c9b;      /* faixa do mascote */
  --gz-blue: #2b5bc4;
  --gz-sky: #5aa9f5;           /* bico do foguete */

  --gz-yellow: #feca1e;        /* amarelo do "G" */
  --gz-yellow-600: #e9ae00;
  --gz-orange: #f58b1b;        /* laranja do "G" e do foguete */
  --gz-orange-600: #d97406;

  --gz-red: #e23b2e;           /* crista do galo Bartimeu */
  --gz-green: #17a05b;         /* cauda do galo Bartimeu */
  --gz-purple: #7c4dff;

  /* --- Superfícies ------------------------------------------------------- */
  --gz-paper: #ffffff;
  --gz-cream: #fff8e9;
  --gz-cream-200: #ffeec9;
  --gz-ink: #0e1b3d;
  --gz-ink-soft: #4a5878;
  --gz-line: #d9e0f0;
  --gz-surface: #f3f6fc;       /* fundo claro das páginas */
  --gz-line-soft: #e2e9f6;     /* borda leve de cartões e cabeçalho */

  /* --- Tipografia -------------------------------------------------------- */
  --gz-font: "Fredoka", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  --gz-font-pixel: "Press Start 2P", "Courier New", monospace;

  /* --- Forma e profundidade ---------------------------------------------- */
  --gz-radius: 18px;
  --gz-radius-lg: 28px;
  --gz-radius-pill: 999px;
  --gz-border: 3px;

  /* Sombra "adesivo de arcade": deslocamento sólido, sem blur */
  --gz-shadow-sm: 0 3px 0 rgba(2, 28, 85, 0.25);
  --gz-shadow: 0 5px 0 rgba(2, 28, 85, 0.28);
  --gz-shadow-lg: 0 10px 0 rgba(2, 28, 85, 0.22), 0 18px 40px rgba(2, 28, 85, 0.28);

  --gz-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------------------------------------
   Reset enxuto
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--gz-font);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.5;
  color: var(--gz-ink);
  background-color: var(--gz-navy);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Fundo "espacial" — remete ao foguete "Para o conhecimento e além!"
   -------------------------------------------------------------------------- */
.gz-space {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1100px 620px at 12% -8%, #12439e 0%, transparent 62%),
    radial-gradient(900px 520px at 92% 4%, #123a8c 0%, transparent 58%),
    linear-gradient(178deg, #04246b 0%, var(--gz-navy) 48%, #010f34 100%);
}

/* Campo de estrelas em duas camadas, feito só com gradientes */
.gz-space::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255, 255, 255, 0.9) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 76% 12%, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 42% 32%, var(--gz-yellow) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 88% 44%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 24% 62%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 62% 78%, var(--gz-yellow) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 8% 86%, rgba(255, 255, 255, 0.65) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 88%, rgba(255, 255, 255, 0.7) 50%, transparent 51%);
  background-size: 620px 620px;
  opacity: 0.85;
  animation: gz-twinkle 5s ease-in-out infinite alternate;
}

@keyframes gz-twinkle {
  from { opacity: 0.5; }
  to   { opacity: 0.95; }
}

/* --------------------------------------------------------------------------
   Degradê azul da marca, com figuras de contorno espalhadas.
   Tons e vocabulário tirados das artes de referência (_Material):
   quebra-cabeça, livro, controle, lápis, foguete e estrelas — só contorno,
   com rastros pontilhados finos.

   `.gz-degrade`          — degradê + figuras
   `.gz-degrade--bordas`  — figuras só nas bordas, centro limpo (para quando
                            há texto ou cartas por cima)
   -------------------------------------------------------------------------- */
.gz-degrade {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 40%,
      #0337be 0%, #012699 38%, #011e86 64%, #020a5b 100%);
}

.gz-degrade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'><g fill='none' stroke='%23336CF5' stroke-opacity='.85' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(28 26)'><path d='M6 6h12a6 6 0 0 1 12 0h12v12a6 6 0 0 1 0 12v12H30a6 6 0 0 0-12 0H6V30a6 6 0 0 0 0-12z'/></g><g transform='translate(352 34)'><path d='M2 8c9-5 18-5 27 0v30c-9-5-18-5-27 0z'/><path d='M56 8c-9-5-18-5-27 0v30c9-5 18-5 27 0z'/><path d='M8 15h15M8 22h15M8 29h15M35 15h15M35 22h15M35 29h15'/></g><g transform='translate(36 372)'><path d='M17 9h28c9 0 14 8 15 19 .9 8-2 13-7 13-4 0-6-3-9-7H26c-3 4-5 7-9 7-5 0-8-5-7-13C11 17 8 9 17 9z'/><path d='M17 20v9M12.5 24.5h9'/><circle cx='45' cy='19' r='2.6'/><circle cx='52' cy='25' r='2.6'/><circle cx='45' cy='31' r='2.6'/><circle cx='38' cy='25' r='2.6'/></g><g transform='translate(452 268)'><g transform='rotate(38 22 26)'><path d='M17 4h10v34l-5 9-5-9z'/><path d='M17 38h10'/><path d='M17 10h10'/></g></g><g transform='translate(336 404)'><path d='M18 2c7 7 11 16 11 26v10H7V28C7 18 11 9 18 2z'/><circle cx='18' cy='20' r='5'/><path d='M7 30L1 41v8l6-5z'/><path d='M29 30l6 11v8l-6-5z'/><path d='M13 41h10v6H13z'/></g><g transform='translate(150 168)'><path d='M6 6h12a6 6 0 0 1 12 0h12v12a6 6 0 0 1 0 12v12H30a6 6 0 0 0-12 0H6V30a6 6 0 0 0 0-12z'/></g><g stroke-dasharray='1 8'><path d='M330 452c-28 26-60 40-96 44'/><path d='M120 92c22-18 26-44 6-52'/><path d='M470 190c-26 14-30 44-8 58'/></g><path transform='translate(228 60) scale(0.9)' d='M10 1.5l2.6 5.9 6.4.7-4.8 4.3 1.3 6.3L10 15.5l-5.5 3.2 1.3-6.3L1 8.1l6.4-.7z'/><path transform='translate(96 250) scale(0.7)' d='M10 1.5l2.6 5.9 6.4.7-4.8 4.3 1.3 6.3L10 15.5l-5.5 3.2 1.3-6.3L1 8.1l6.4-.7z'/><path transform='translate(410 168) scale(0.8)' d='M10 1.5l2.6 5.9 6.4.7-4.8 4.3 1.3 6.3L10 15.5l-5.5 3.2 1.3-6.3L1 8.1l6.4-.7z'/><path transform='translate(268 336) scale(0.65)' d='M10 1.5l2.6 5.9 6.4.7-4.8 4.3 1.3 6.3L10 15.5l-5.5 3.2 1.3-6.3L1 8.1l6.4-.7z'/><path transform='translate(508 430) scale(0.85)' d='M10 1.5l2.6 5.9 6.4.7-4.8 4.3 1.3 6.3L10 15.5l-5.5 3.2 1.3-6.3L1 8.1l6.4-.7z'/><path transform='translate(176 470) scale(0.75)' d='M10 1.5l2.6 5.9 6.4.7-4.8 4.3 1.3 6.3L10 15.5l-5.5 3.2 1.3-6.3L1 8.1l6.4-.7z'/></g><g fill='none' stroke='%23F2C33C' stroke-opacity='.95' stroke-width='2.3' stroke-linejoin='round'><path transform='translate(300 18) scale(0.85)' d='M10 1.5l2.6 5.9 6.4.7-4.8 4.3 1.3 6.3L10 15.5l-5.5 3.2 1.3-6.3L1 8.1l6.4-.7z'/><path transform='translate(24 196) scale(0.8)' d='M10 1.5l2.6 5.9 6.4.7-4.8 4.3 1.3 6.3L10 15.5l-5.5 3.2 1.3-6.3L1 8.1l6.4-.7z'/><path transform='translate(516 108) scale(0.7)' d='M10 1.5l2.6 5.9 6.4.7-4.8 4.3 1.3 6.3L10 15.5l-5.5 3.2 1.3-6.3L1 8.1l6.4-.7z'/><path transform='translate(196 384) scale(0.9)' d='M10 1.5l2.6 5.9 6.4.7-4.8 4.3 1.3 6.3L10 15.5l-5.5 3.2 1.3-6.3L1 8.1l6.4-.7z'/><path transform='translate(426 496) scale(0.75)' d='M10 1.5l2.6 5.9 6.4.7-4.8 4.3 1.3 6.3L10 15.5l-5.5 3.2 1.3-6.3L1 8.1l6.4-.7z'/></g></svg>");
  background-size: 560px 560px;
}

/* Concentra as figuras nas bordas: o miolo fica livre para o conteúdo. */
.gz-degrade--bordas::before {
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, transparent 38%, #000 84%);
  mask-image: radial-gradient(120% 100% at 50% 50%, transparent 38%, #000 84%);
}

/* --------------------------------------------------------------------------
   Container e cabeçalho
   -------------------------------------------------------------------------- */
.gz-wrap {
  width: min(1140px, 100% - 2rem);
  margin-inline: auto;
}

/* Cabeçalho fixo — o mesmo na capa e nas páginas de jogo. */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gz-line-soft);
}

.topo__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
}

.topo__logo img {
  height: clamp(36px, 5.4vw, 50px);
  width: auto;
}

.topo__nav {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.topo__link {
  padding: 0.5rem 0.9rem;
  font-weight: 500;
  color: var(--gz-navy);
  text-decoration: none;
  border-radius: var(--gz-radius-pill);
  transition: background 0.15s ease;
}

.topo__link:hover { background: #e9effb; }

@media (max-width: 560px) {
  .topo__link--secundario { display: none; }
}

/* --------------------------------------------------------------------------
   Painéis
   -------------------------------------------------------------------------- */
.gz-panel {
  background: var(--gz-paper);
  border: var(--gz-border) solid var(--gz-navy);
  border-radius: var(--gz-radius-lg);
  box-shadow: var(--gz-shadow-lg);
}

.gz-panel--cream { background: var(--gz-cream); }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.gz-btn {
  --btn-bg: var(--gz-yellow);
  --btn-fg: var(--gz-navy);
  --btn-shadow: var(--gz-yellow-600);
  --btn-borda: var(--gz-navy);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid var(--btn-borda);
  border-radius: var(--gz-radius-pill);
  /* Sombra fina: mantém o ar de botão de videogame sem o bloco pesado. */
  box-shadow: 0 3px 0 var(--btn-shadow);
  text-decoration: none;        /* <a class="gz-btn"> não pode sair sublinhado */
  cursor: pointer;
  transition: transform 0.12s var(--gz-ease-bounce), box-shadow 0.12s ease, filter 0.12s ease;
}

.gz-btn:hover { filter: brightness(1.05); }

.gz-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--btn-shadow);
}

/* Ícone de "play" desenhado, para não depender de emoji do sistema. */
.gz-btn__play {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}

.gz-btn--primary {
  --btn-bg: var(--gz-orange);
  --btn-fg: var(--gz-navy);     /* azul-marinho: contraste melhor que o branco */
  --btn-shadow: var(--gz-orange-600);
  font-size: 1.08rem;
  padding: 0.85rem 1.8rem;
}

/* Secundário do hero: azul com contorno branco fino. */
.gz-btn--azul {
  --btn-bg: var(--gz-blue);
  --btn-fg: #fff;
  --btn-shadow: #1c3f8f;
  --btn-borda: rgba(255, 255, 255, 0.9);
  font-size: 1.08rem;
  padding: 0.85rem 1.8rem;
}

/* Ocupa a linha inteira — usado nos botões de "começar". */
.gz-btn--bloco { width: 100%; }

.gz-btn--ghost {
  --btn-bg: var(--gz-paper);
  --btn-fg: var(--gz-navy);
  --btn-shadow: var(--gz-line);
}

.gz-btn--navy {
  --btn-bg: var(--gz-navy);
  --btn-fg: #fff;
  --btn-shadow: #000d2c;
}

.gz-btn--danger {
  --btn-bg: #fff;
  --btn-fg: var(--gz-red);
  --btn-shadow: #f3c6c2;
  border-color: var(--gz-red);
}

.gz-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.gz-btn--sm {
  padding: 0.45rem 0.95rem;
  font-size: 0.9rem;
  box-shadow: 0 3px 0 var(--btn-shadow);
}

.gz-btn--icon {
  padding: 0.45rem;
  width: 2.65rem;
  height: 2.65rem;
}

/* --------------------------------------------------------------------------
   Campos de formulário
   -------------------------------------------------------------------------- */
.gz-field { display: grid; gap: 0.4rem; }

.gz-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gz-navy);
}

.gz-label small {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--gz-ink-soft);
}

.gz-input {
  font: inherit;
  font-weight: 500;
  padding: 0.75rem 1rem;
  color: var(--gz-ink);
  background: #fff;
  border: var(--gz-border) solid var(--gz-navy);
  border-radius: var(--gz-radius);
  box-shadow: inset 0 2px 0 rgba(2, 28, 85, 0.06);
  width: 100%;
}

.gz-input::placeholder { color: #9aa6c2; font-weight: 400; }

.gz-input:focus-visible {
  outline: none;
  border-color: var(--gz-orange);
  box-shadow: 0 0 0 4px rgba(245, 139, 27, 0.28);
}

.gz-input[aria-invalid="true"] {
  border-color: var(--gz-red);
  box-shadow: 0 0 0 4px rgba(226, 59, 46, 0.2);
}

.gz-erro {
  min-height: 1.1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gz-red);
}

/* --------------------------------------------------------------------------
   Foco visível global (acessibilidade)
   -------------------------------------------------------------------------- */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 4px solid var(--gz-sky);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Utilitários
   -------------------------------------------------------------------------- */
.gz-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.gz-hidden { display: none !important; }

.gz-pixel {
  font-family: var(--gz-font-pixel);
  letter-spacing: 0;
  line-height: 1.6;
}

.gz-flutua { animation: gz-flutua 3.6s ease-in-out infinite; }

@keyframes gz-flutua {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-12px) rotate(1.5deg); }
}

/* --=========================================================================
   Rodapé
   =========================================================================- */
.rodape {
  margin-top: clamp(2rem, 6vw, 4rem);
  padding-block: clamp(2rem, 5vw, 3rem);
  color: #b9cbf0;
}

.rodape__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.rodape__marca {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  background: #fff;
  border-radius: var(--gz-radius-pill);
}

.rodape__marca img { height: 40px; width: auto; }

.rodape__nota { margin: 0.6rem 0 0; font-size: 0.88rem; max-width: 42ch; }

.rodape__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  font-size: 0.9rem;
}

.rodape__links a {
  color: var(--gz-yellow);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.rodape__links a:hover { border-bottom-color: currentColor; }

.rodape__creditos {
  margin: 1.6rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.82rem;
  color: #8ea6d8;
}

/* --------------------------------------------------------------------------
   Rodapé de demonstração
   -------------------------------------------------------------------------- */
.gz-demo-nota {
  margin: 2rem 0 3rem;
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  color: #c9d6f2;
  background: rgba(255, 255, 255, 0.06);
  border: 2px dashed rgba(255, 255, 255, 0.28);
  border-radius: var(--gz-radius);
}

.gz-demo-nota strong { color: var(--gz-yellow); }

/* --------------------------------------------------------------------------
   Preferência por menos movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}