/* O SORTEIO A PASSAR: as sacas, a carta e o quadro a encher-se.
 *
 * ⚠️ AS CORES VÊM DE FORA. Isto passa em três sítios com fundos diferentes (o
 * painel, a página pública e uma cena do OBS, que é transparente por baixo), e
 * uma folha que pintasse o fundo dava um retângulo preto por cima do vídeo. Só
 * se pintam as PEÇAS, com as variáveis abaixo, e quem usa isto redefine as que
 * quiser. Por omissão é a paleta da casa: preto e dourado.
 */
.sorteio-vista {
  --sv-ouro: #d8b45c;
  --sv-ouro-claro: #f2e0b4;
  --sv-ouro-escuro: #a98431;
  --sv-tinta: #f4f1ea;
  --sv-fraco: #b7b0a2;
  --sv-caixa: rgba(18, 15, 10, .72);
  --sv-caixa2: rgba(32, 27, 18, .9);
  --sv-fio: rgba(216, 180, 92, .34);
  --sv-mono: "Cascadia Mono", "Roboto Mono", Consolas, ui-monospace, monospace;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  color: var(--sv-tinta);
}

/* ── O cabeçalho: o que se está a sortear, e por onde vai ──────────────── */
.sorteio-vista .sv-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.sorteio-vista .sv-titulo {
  margin: 0; font-size: 19px; font-weight: 900; letter-spacing: .3px; color: var(--sv-tinta);
}
.sorteio-vista .sv-conta {
  font-family: var(--sv-mono); font-size: 13px; font-weight: 700; color: var(--sv-ouro);
  letter-spacing: 1px;
}

/* ── O palco: as sacas e a carta ───────────────────────────────────────── */
.sorteio-vista .sv-cena {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 22px;
  min-height: 190px; padding: 10px 0;
}
/* ⚠️ A CARTA TEM PISTA PRÓPRIA, e não para em cima da saca.
   Ao princípio a carta vinha parar ao meio do palco, e com uma saca só o meio
   do palco era exatamente onde a saca estava: a carta tapava-a, e o que se via
   era uma carta a aparecer do nada. Com duas, tapava as duas. A saca fica de um
   lado, a pista do outro, e vê-se de onde é que a pessoa saiu. */
.sorteio-vista .sv-palco { flex: 0 0 auto; width: 210px; height: 170px; }
/* Parado (o quadro ja' cheio, de quem chega tarde) nao ha palco nenhum: nada
   esta' a sair da saca naquele momento. */
.sorteio-vista.sv-parado .sv-cena { display: none; }
.sorteio-vista .sv-saca {
  position: relative; flex: 0 0 auto;
  width: 106px; padding: 56px 8px 12px;
  border-radius: 14px 14px 26px 26px / 10px 10px 40px 40px;
  background: linear-gradient(180deg, var(--sv-caixa2), var(--sv-caixa));
  border: 1px solid var(--sv-fio);
  text-align: center;
}
/* A boca da saca: um escuro mais fundo em cima, que é o que a faz parecer uma
   saca e não uma caixa. Sem física nenhuma de propósito: bolas a cair umas nas
   outras engasgam um tablet e não acrescentam nada. */
.sorteio-vista .sv-saca::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: 8px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #000 0%, rgba(0,0,0,.75) 60%, transparent 100%);
  border: 1px solid var(--sv-fio);
}
.sorteio-vista .sv-saca b {
  display: block; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--sv-ouro); font-weight: 800;
}
.sorteio-vista .sv-saca span {
  display: block; margin-top: 2px; font-family: var(--sv-mono); font-size: 17px;
  font-weight: 800; color: var(--sv-tinta);
}
.sorteio-vista .sv-saca.a-abanar { animation: sv-abana .45s ease-in-out; }
@keyframes sv-abana {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-4px) rotate(-2.5deg); }
  75% { transform: translateX(4px) rotate(2.5deg); }
}

/* A carta que sai da saca. Vive solta por cima de tudo e é movida por
   `transform`: é a única maneira de ela voar de um sítio para o outro sem
   obrigar o browser a recalcular a página a cada fotograma. */
.sorteio-vista .sv-carta {
  position: absolute; left: 0; top: 0; z-index: 5;
  width: 188px; margin: 0; padding: 12px;
  border-radius: 14px; text-align: center; pointer-events: none;
  background: linear-gradient(180deg, rgba(40, 33, 20, .97), rgba(16, 13, 8, .97));
  border: 1px solid var(--sv-ouro-escuro);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(242, 224, 180, .14) inset;
  opacity: 0; transform-origin: 50% 50%;
}
.sorteio-vista .sv-carta img {
  display: block; width: 86px; height: 86px; margin: 0 auto 8px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--sv-ouro); background: #0d0b07;
}
.sorteio-vista .sv-carta .sv-nome {
  font-size: 15px; font-weight: 900; line-height: 1.2; color: var(--sv-tinta);
  overflow-wrap: anywhere;
}
.sorteio-vista .sv-carta .sv-donde {
  margin-top: 4px; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 800; color: var(--sv-ouro);
}

/* ── O quadro a encher-se ──────────────────────────────────────────────── */
/* O quadro ao meio do que lhe sobra: uma prova de oito num ecrã de televisão
   ficava encostada ao cimo, com meio ecrã vazio por baixo. O `safe` é para que
   um quadro GRANDE, que não caiba, continue a começar no princípio em vez de
   lhe fugir o topo para fora. */
.sorteio-vista .sv-quadro {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; justify-content: safe center; gap: 12px;
}
.sorteio-vista .sv-grupo h4 {
  margin: 0 0 7px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sv-ouro); font-weight: 800;
}
.sorteio-vista .sv-jogos { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sorteio-vista .sv-jogo {
  display: flex; align-items: stretch; gap: 1px;
  border: 1px solid var(--sv-fio); border-radius: 10px; overflow: hidden;
  background: var(--sv-caixa);
}
.sorteio-vista .sv-jogo .sv-num {
  flex: 0 0 auto; display: flex; align-items: center; padding: 0 9px;
  font-family: var(--sv-mono); font-size: 12px; font-weight: 800; color: var(--sv-fraco);
  background: rgba(0, 0, 0, .3);
}
.sorteio-vista .sv-lados { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sorteio-vista .sv-lado {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px; min-height: 36px;
  font-size: 13px; line-height: 1.2; color: var(--sv-fraco);
}
.sorteio-vista .sv-lado + .sv-lado { border-top: 1px solid rgba(255, 255, 255, .07); }
.sorteio-vista .sv-lado img {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 1px solid var(--sv-fio); background: #0d0b07; opacity: 0;
}
.sorteio-vista .sv-lado .sv-quem { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Um lugar à espera mostra a linha a pontinhos: vê-se o quadro todo desde o
   princípio, e vê-se onde é que ainda falta gente. */
.sorteio-vista .sv-lado.a-espera .sv-quem {
  color: rgba(183, 176, 162, .5); font-style: italic;
}
.sorteio-vista .sv-lado.vaga .sv-quem { color: rgba(183, 176, 162, .38); }
.sorteio-vista .sv-lado.cheio { color: var(--sv-tinta); font-weight: 700; }
.sorteio-vista .sv-lado.cheio img { opacity: 1; }
.sorteio-vista .sv-lado.acabou-de-cair { animation: sv-acende 1.1s ease-out; }
@keyframes sv-acende {
  0% { background: rgba(216, 180, 92, .55); }
  100% { background: transparent; }
}

/* ── Os botões ─────────────────────────────────────────────────────────── */
.sorteio-vista .sv-bts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sorteio-vista .sv-bt {
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--sv-fio); background: var(--sv-caixa); color: var(--sv-tinta);
  font-size: 12.5px; font-weight: 700; font-family: inherit;
}
.sorteio-vista .sv-bt:hover { border-color: var(--sv-ouro); }
.sorteio-vista .sv-bt.forte {
  background: linear-gradient(180deg, var(--sv-ouro-claro), var(--sv-ouro-escuro));
  border-color: var(--sv-ouro-escuro); color: #130f08;
}

/* ⚠️ QUEM PEDIU MENOS MOVIMENTO LEVA MENOS MOVIMENTO. O sistema sabe dizê-lo, e
   há quem fique enjoado com coisas a voar pelo ecrã. O sorteio continua a
   passar, passo a passo: o que sai é o voo. */
@media (prefers-reduced-motion: reduce) {
  .sorteio-vista .sv-carta { transition: opacity .2s linear !important; }
  .sorteio-vista .sv-saca.a-abanar { animation: none; }
  .sorteio-vista .sv-lado.acabou-de-cair { animation-duration: .4s; }
}