* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background:
    radial-gradient(120% 70% at 50% 42%, var(--fundo-brilho) 0%, var(--fundo) 62%),
    var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* Três faixas centradas: título, roda e controles de altura fixa.
   Tudo cabe em 100dvh, sem rolagem, em qualquer proporção. */
.palco {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-content: center;
  gap: clamp(8px, 2dvh, 24px);
  padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.palco.pronto { opacity: 1; }

.titulo {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  font-size: clamp(22px, min(7.4vw, 5.2dvh), 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: center;
  max-width: 24ch;
  text-wrap: balance;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  -webkit-touch-callout: none;
  touch-action: none;
}

/* A faixa do meio é um container: a roda usa o menor entre a largura e a
   altura disponíveis, descontando o espaço do ponteiro em cima. */
.roda-area {
  container-type: size;
  width: 100%;
  /* Altura calculada no tela.js: o que sobra entre título e controles,
     limitada ao que a roda precisa pela largura. */
  height: var(--area-altura, 50dvh);
  display: grid;
  place-items: center;
}

.roda-caixa {
  --roda: min(100cqw, 100cqh / 1.16);
  position: relative;
  width: var(--roda);
  height: var(--roda);
  /* Respiro entre o título e a ponta de cima do ponteiro. */
  margin-top: calc(var(--roda) * 0.155);
}

.roda {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: pointer;
  will-change: transform;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
  outline: none;
}

.roda canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.ponteiro {
  position: absolute;
  /* viewBox com 6 unidades de folga em volta (contorno e quina não cortam).
     A ponta entra só até a borda colorida, sem cobrir o nome da fatia. */
  top: calc(var(--roda) * -0.142);
  left: 50%;
  width: calc(var(--roda) * 0.144);
  height: calc(var(--roda) * 0.184);
  margin-left: calc(var(--roda) * -0.072);
  overflow: visible;
  transform-origin: 50% 32.6%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.ponteiro-corpo {
  fill: var(--ponteiro);
  stroke: var(--ponteiro-borda);
  stroke-width: 4;
  stroke-linejoin: round;
}

.ponteiro-pivo { fill: var(--ponteiro-borda); }

/* Altura fixa: o botão e o bloco do vencedor cabem no mesmo espaço, então a
   roda não muda de tamanho quando o resultado aparece. */
.controles {
  display: grid;
  place-items: start center;
  width: 100%;
  height: clamp(100px, 18dvh, 190px);
}

.girar {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  font-size: clamp(20px, min(6vw, 4.2dvh), 34px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--botao-texto);
  background: var(--botao);
  border: 0;
  border-radius: 999px;
  padding: 0.55em 2.2em;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.28), 0 14px 30px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.2s ease;
}

.girar:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28); }
.girar:disabled { opacity: 0.45; cursor: default; }

.vencedor {
  display: grid;
  justify-items: center;
  gap: 0.3em;
  max-width: min(100%, 900px);
  max-height: 100%;
  padding: clamp(8px, 1.6dvh, 16px) clamp(16px, 4vw, 30px);
  border-radius: 20px;
  background: var(--vencedor-fundo);
  text-align: center;
  animation: entrar 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.vencedor-rotulo {
  font-size: clamp(13px, min(3.6vw, 2.4dvh), 20px);
  font-weight: 600;
  color: var(--texto-suave);
  letter-spacing: 0.04em;
}

.vencedor-nome {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  font-size: clamp(22px, min(9vw, 6dvh), 68px);
  line-height: 1.04;
  text-wrap: balance;
}

.vencedor-nome.longo { font-size: clamp(20px, min(7vw, 4.6dvh), 54px); }

@keyframes entrar {
  from { opacity: 0; transform: scale(0.6) translateY(12px); }
  to { opacity: 1; transform: none; }
}

.tela-cheia {
  position: fixed;
  bottom: max(10px, env(safe-area-inset-bottom));
  right: 10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--texto-suave);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.6s ease;
}

.tela-cheia.sumido { opacity: 0; pointer-events: none; }

.tela-cheia svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.confete {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}