/* Paleta padrão do KV "meli quest · Muda o jogo". As quatro cores principais são
   sobrescritas pelo tema salvo no admin (Configurações › Tema). */
:root {
  --bg: #ffe600;
  --surface: #ffffff;
  --text: #1b2470;
  --accent: #2b3cc4;
  --edge: var(--text);
  --muted: color-mix(in srgb, var(--text) 72%, transparent);
  --line: color-mix(in srgb, var(--text) 14%, transparent);
  --shadow: 0 10px 30px color-mix(in srgb, var(--text) 16%, transparent);
  --ok: #00a650;
  --bad: #e4253a;
  --radius: 20px;
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  color-scheme: light;
}

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

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: default;
}

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

.hidden {
  display: none !important;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

/* Letreiro 3D do KV: face amarela, contorno azul e extrusão azul por baixo. */
.quest {
  color: #fff27a;
  font-weight: 900;
  letter-spacing: -0.035em;
  -webkit-text-stroke: 0.07em var(--edge);
  paint-order: stroke fill;
  text-shadow:
    0 0.025em 0 var(--edge),
    0 0.05em 0 var(--edge),
    0 0.075em 0 var(--edge),
    0 0.1em 0 var(--edge),
    0 0.16em 0.12em color-mix(in srgb, var(--edge) 35%, transparent);
}

.hand {
  font-family: var(--hand);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
}

/* Tudo que tem cor de time ganha contorno: o amarelo do time some no fundo amarelo sem ele. */
.edge {
  box-shadow: inset 0 0 0 3px var(--edge);
}

@keyframes pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rise {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes pulse {
  50% {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}