:root {
  --fundo: #120a1c;
  --vidro: rgba(24, 12, 36, .64);
  --vidro-2: rgba(40, 20, 58, .74);
  --linha: rgba(255, 255, 255, .14);
  --texto: #f7f3e8;
  --texto-2: #cbbfd9;
  --ouro: #ff8a1f;
  --ouro-2: #ffc46b;
  --vermelho: #e2453c;
  --azul: #2f6fdb;
  --amarelo: #e3a20f;
  --verde: #2e9e4f;
  --raio: 18px;
  --sombra: 0 24px 60px -24px rgba(0, 0, 0, .75);
  --titulo: "Fredoka", "Nunito", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: "Nunito", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;
  isolation: isolate;
}
/* Noite de Halloween: lua cheia, céu roxo e silhueta de cemitério no pé da tela. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background:
    url(fundo-halloween.svg) bottom center / 100% auto no-repeat,
    radial-gradient(circle at 84% 14%, #fff3c4 0 46px, rgba(255, 214, 120, .35) 48px, rgba(255, 160, 60, .12) 130px, transparent 260px),
    radial-gradient(ellipse at 50% 110%, rgba(255, 110, 20, .22), transparent 55%),
    linear-gradient(180deg, #0d0618 0%, #241238 55%, #2e1640 100%);
}
button { font: inherit; cursor: pointer; border: 0; }
h1, h2, h3 { margin: 0; font-family: var(--titulo); font-weight: 700; letter-spacing: -.01em; }
.sec { color: var(--texto-2); }

.vidro {
  background: var(--vidro);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.dourado {
  background: linear-gradient(180deg, var(--ouro-2), var(--ouro) 55%, #d4560c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 22px rgba(255, 120, 20, .35));
}

.botao {
  background: linear-gradient(180deg, var(--ouro-2), var(--ouro));
  color: #2a1000; font-weight: 900;
  padding: 14px 28px; border-radius: 999px; font-size: 18px;
  box-shadow: 0 5px 0 #b4480a, 0 14px 30px -10px rgba(255, 120, 20, .6);
  transition: transform .1s, box-shadow .1s;
}
.botao:active { transform: translateY(4px); box-shadow: 0 1px 0 #b4480a; }
.botao:disabled { opacity: .4; cursor: default; }
.botao.fantasma {
  background: rgba(255, 255, 255, .06); color: var(--texto);
  border: 1px solid var(--linha); box-shadow: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

.avatar {
  --tam: 56px;
  width: var(--tam); height: var(--tam); border-radius: 50%;
  flex: none; position: relative; overflow: hidden;
  box-shadow: 0 0 0 3px var(--anel, var(--ouro)), 0 8px 20px -6px rgba(0, 0, 0, .6);
  background: var(--cor, #3a2352);
  display: grid; place-items: center;
  font-weight: 800; font-size: calc(var(--tam) * .38); color: #fff;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Opções estilo Kahoot, com volume. */
.op-0 { --c1: #f0574d; --c2: #c9322a; --c3: #8f1f19; }
.op-1 { --c1: #4a87ef; --c2: #2459c2; --c3: #173c86; }
.op-2 { --c1: #f2b52a; --c2: #d08c0a; --c3: #8f5f05; }
.op-3 { --c1: #43b866; --c2: #23853f; --c3: #165a2a; }
.op-0, .op-1, .op-2, .op-3 {
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: 0 6px 0 var(--c3), 0 18px 30px -12px rgba(0, 0, 0, .6);
  color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}
.forma {
  flex: none; display: grid; place-items: center;
  width: 1.9em; height: 1.9em; border-radius: 50%;
  background: rgba(255, 255, 255, .22); font-size: 1em; line-height: 1;
}

/* Morcegos voando e brasas subindo */
.noite { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.noite .morcego {
  position: absolute; left: -60px; font-size: var(--t); opacity: .8; filter: brightness(.35) drop-shadow(0 0 6px rgba(0, 0, 0, .6));
  animation: voa linear infinite;
}
.noite .morcego span { display: inline-block; animation: bate .35s ease-in-out infinite alternate; }
@keyframes voa {
  0% { transform: translate(0, 0); }
  25% { transform: translate(28vw, -40px); }
  50% { transform: translate(56vw, 20px); }
  75% { transform: translate(84vw, -30px); }
  100% { transform: translate(calc(100vw + 120px), 10px); }
}
@keyframes bate { to { transform: scaleY(.6); } }
.noite .brasa {
  position: absolute; bottom: -10px; border-radius: 50%; background: #ffb347;
  box-shadow: 0 0 8px 2px rgba(255, 140, 30, .7);
  animation: brasa linear infinite;
}
@keyframes brasa { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(var(--vai), -70vh); opacity: 0; } }

@keyframes entra { from { transform: scale(.4); opacity: 0; } }
@keyframes sobe { from { transform: translateY(18px); opacity: 0; } }