/* ============================================================
   PLAY TEOLÓGICO — Landing "O Jogo da Vida"
   Tokens e chrome pixel reaproveitados do arcade.css do quiz.
   ============================================================ */

@font-face {
  font-family: "Press Start 2P";
  src: url("./assets/fonts/PressStart2P-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("./assets/fonts/VT323-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --pt-bg: #150f31;
  --pt-bg2: #1d1545;
  --pt-panel: #241a52;
  --pt-ink: #0c0823;
  --pt-accent: #f042f0;   /* magenta */
  --pt-accent2: #3ce8e0;  /* ciano */
  --pt-yellow: #ffd820;
  --pt-yellow-deep: #b8860b;
  --pt-red: #ff4d4d;
  --pt-green: #3cf08a;
  --pt-gold: #ffb700;
  --pt-muted: #8d85c0;

  --font-pixel: "Press Start 2P", monospace;
  --font-mono: "VT323", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--pt-bg2) 0%, var(--pt-bg) 60%, #0e0a24 100%);
  color: #fff;
  font-family: var(--font-mono);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body {
  /* estrelas de fundo */
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff8 1px, transparent 1px),
    radial-gradient(1px 1px at 70% 60%, #fff6 1px, transparent 1px),
    radial-gradient(2px 2px at 40% 80%, #fff5 1px, transparent 1px);
  background-size: 320px 320px, 220px 220px, 380px 380px;
  background-repeat: repeat;
  background-attachment: fixed;
  animation: pt-twinkle 6s steps(2) infinite;
}

@keyframes pt-twinkle {
  0%, 100% { background-position: 0 0, 0 0, 0 0; }
  50%      { background-position: 8px 8px, -6px 4px, 4px -8px; }
}

/* Overlay CRT: scanlines + vinheta — fixo, não bloqueia clique */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0.18) 1px,
      rgba(0,0,0,0.18) 2px
    ),
    radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.55) 100%);
}

/* ===== Top bar ===== */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--pt-muted);
  position: relative;
  z-index: 2;
}
.topbar .crt-on {
  color: var(--pt-green);
  animation: pt-blink 1.6s steps(2) infinite;
}
@keyframes pt-blink { 0%,49% {opacity:1;} 50%,100% {opacity:.35;} }

/* ===== Container principal ===== */
.wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: 8px 18px 48px;
  position: relative;
  z-index: 2;
}

/* ===== Logo ===== */
.logo {
  display: block;
  max-width: 280px;
  width: 80%;
  margin: 8px auto 18px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 14px rgba(240, 66, 240, 0.35));
}

/* ===== Eyebrow + títulos ===== */
.eyebrow {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--pt-accent2);
  text-align: center;
  margin: 4px 0 14px;
  animation: pt-blink 2.4s steps(2) infinite;
}

h1.title {
  font-family: var(--font-pixel);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 1px;
  text-align: center;
  margin: 0 0 14px;
  color: var(--pt-yellow);
  text-shadow: 0 2px 0 var(--pt-yellow-deep);
}

.subtitle {
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  margin: 0 0 22px;
}

.subtitle b { color: var(--pt-accent2); font-weight: normal; }

/* ===== Painel pixel (chrome) ===== */
.px-panel {
  background: var(--pt-accent);
  padding: 4px;
  clip-path: polygon(
    0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px,
    calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px),
    calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px),
    4px calc(100% - 8px), 0 calc(100% - 8px)
  );
  margin: 18px 0;
}
.px-panel-inner {
  background: var(--pt-panel);
  padding: 18px 18px 20px;
  clip-path: polygon(
    0 4px, 4px 4px, 4px 0,
    calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px),
    0 calc(100% - 4px)
  );
}

/* ===== Capa do ebook ===== */
.cover-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 18px;
}
.cover {
  width: 220px;
  max-width: 60%;
  box-shadow:
    0 8px 0 var(--pt-yellow-deep),
    0 0 0 4px var(--pt-yellow),
    0 0 30px rgba(255, 216, 32, 0.35);
  image-rendering: auto;
}

/* ===== Lista de bullets (3 perguntas) ===== */
.perguntas {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: q;
}
.perguntas li {
  position: relative;
  padding: 10px 0 10px 36px;
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.15;
  color: #fff;
  border-bottom: 2px dashed #3a2f6e;
  counter-increment: q;
}
.perguntas li:last-child { border-bottom: none; }
.perguntas li::before {
  content: counter(q);
  position: absolute;
  left: 0;
  top: 8px;
  width: 26px;
  height: 26px;
  background: var(--pt-yellow);
  color: var(--pt-ink);
  font-family: var(--font-pixel);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 var(--pt-yellow-deep);
}

/* ===== Formulário ===== */
.form-label {
  display: block;
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--pt-accent2);
  margin: 14px 0 6px;
}
.form-input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: var(--pt-yellow);
  border: none;
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--pt-ink);
  box-shadow: 0 5px 0 var(--pt-yellow-deep);
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
}
.form-input::placeholder { color: rgba(12, 8, 35, 0.45); }
.form-input:focus {
  box-shadow:
    0 5px 0 var(--pt-yellow-deep),
    0 0 0 3px var(--pt-accent);
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 6px;
  font-family: var(--font-mono);
  font-size: 19px;
  line-height: 1.2;
  color: var(--pt-muted);
  cursor: pointer;
  user-select: none;
}
.form-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 3px solid var(--pt-yellow);
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.form-checkbox input:checked {
  background: var(--pt-yellow);
}
.form-checkbox input:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--pt-ink);
}

/* ===== Botão arcade ===== */
.btn-arcade {
  display: block;
  width: 100%;
  padding: 16px 18px;
  margin-top: 22px;
  background: var(--pt-yellow);
  color: var(--pt-ink);
  font-family: var(--font-pixel);
  font-size: 13px;
  letter-spacing: 2px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--pt-yellow-deep);
  transition: transform .05s steps(1), box-shadow .05s steps(1);
  text-align: center;
  text-decoration: none;
}
.btn-arcade:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow: 0 1px 0 var(--pt-yellow-deep);
}
.btn-arcade:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-secondary {
  display: block;
  text-align: center;
  margin: 14px 0 0;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--pt-accent2);
  text-decoration: none;
}
.btn-secondary:hover { color: var(--pt-yellow); }

/* ===== Mensagens ===== */
.error-msg {
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--pt-red);
  margin-top: 10px;
  min-height: 24px;
  text-align: center;
}

.muted-note {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--pt-muted);
  text-align: center;
  margin-top: 18px;
  line-height: 1.25;
}

/* ===== Tela "obrigado" ===== */
.center-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.parabens {
  font-family: var(--font-pixel);
  font-size: 18px;
  color: var(--pt-green);
  letter-spacing: 2px;
  text-shadow: 0 2px 0 #0b6a3a;
  margin: 6px 0 4px;
}

.score-line {
  font-family: var(--font-mono);
  font-size: 22px;
  color: #fff;
  line-height: 1.3;
}

/* ===== Footer ===== */
.footer {
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 7px;
  letter-spacing: 2px;
  color: var(--pt-muted);
  padding: 24px 14px 28px;
  position: relative;
  z-index: 2;
}

/* ===== Animações ===== */
@keyframes pt-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.pulse { animation: pt-pulse 1.8s steps(2) infinite; }

/* ============================================================
   Arcade band — animação no rodapé com fantasminha + pellets
   ============================================================ */
.arcade-band {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  pointer-events: none;
  z-index: 55;
  overflow: hidden;
  background: linear-gradient(to top, rgba(7, 4, 23, 0.7), transparent);
}

.arcade-band .ground {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 4px;
  background: repeating-linear-gradient(
    to right,
    var(--pt-accent2) 0 6px,
    transparent 6px 14px
  );
  opacity: 0.55;
  animation: ab-ground 1.2s linear infinite;
}

@keyframes ab-ground {
  to { transform: translateX(-14px); }
}

.arcade-band .pellets {
  position: absolute;
  left: 0;
  bottom: 22px;
  width: 200%;
  height: 6px;
  background: repeating-linear-gradient(
    to right,
    var(--pt-yellow) 0 4px,
    transparent 4px 64px
  );
  opacity: 0.9;
  animation: ab-pellets 5s linear infinite;
}

@keyframes ab-pellets {
  to { transform: translateX(-128px); }
}

.arcade-band .runner {
  position: absolute;
  bottom: 8px;
  left: -40px;
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(240, 66, 240, 0.6));
  animation:
    ab-run 11s linear infinite,
    ab-bob 0.32s steps(2) infinite;
}

@keyframes ab-run {
  from { left: -40px; }
  to   { left: 100%; }
}
@keyframes ab-bob {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-3px); }
}

/* Sobe um pouco o conteúdo pra não esconder atrás da band */
.wrap, .admin-wrap { padding-bottom: 72px; }
.footer { padding-bottom: 64px; }

/* Se usuário desligou animações, banda some */
@media (prefers-reduced-motion: reduce) {
  .arcade-band { display: none; }
  body { animation: none; }
}

/* ============================================================
   CTA "VAI MAIS FUNDO" — obrigado.html
   ============================================================ */
.level-up-panel { margin-top: 26px; }
.level-up-panel .px-panel-inner { padding: 22px 18px 22px; }
.level-up-title {
  font-family: var(--font-pixel);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--pt-yellow);
  text-shadow: 0 2px 0 var(--pt-yellow-deep);
  text-align: center;
  margin: 8px 0 14px;
  line-height: 1.4;
}
.level-up-body {
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.25;
  color: #fff;
  text-align: center;
  margin: 0 0 22px;
}
.level-up-body b { color: var(--pt-accent2); font-weight: normal; }