* { box-sizing: border-box; }

/* Tudo é medido em rem: a interface cresce junto com a tela (notebook → monitor 2K/4K) */
html { font-size: clamp(16px, min(1.15vw, 2vh), 34px); }

:root {
  --rosa: #ff6fae;
  --rosa-escuro: #d63384;
  --lilas: #b57edc;
  --lilas-claro: #ecdcff;
  --creme: #fff7fb;
  --borda: #f6b3d4;
  --texto: #5a2a4a;
  --texto-suave: #93658d;
  --texto-mudo: #a07a92;
  --lilas-texto: #9962ba;
  --rosa-claro: #ffe0f0;
  --rosa-selecao: #ffd6ea;
  --foco: #7653b3;
  --raio-sm: 1rem;
  --raio-md: 1.125rem;
  --raio-card: 1.625rem;
  --raio-grande: 2rem;
  --borda-fina: .125rem;
  --borda-media: .188rem;
  --borda-forte: .25rem;
  --borda-modal: .375rem;
  --sombra-3d: 0 .375rem 0;
  --dur-rapida: .2s;
  --dur-media: .3s;
  --dur-susto: 2.2s;
  --sucesso: #2fa35a;
  --sucesso-claro: #b8f2c9;
  --erro: #e0465f;
  --erro-claro: #ffd0d8;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Fredoka", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
  color: var(--texto);
  background:
    radial-gradient(circle at 10% 15%, rgba(255,255,255,.7) 0 0.125rem, transparent 0.188rem) 0 0 / 3.75rem 3.75rem,
    linear-gradient(160deg, var(--rosa-claro) 0%, #f0e2ff 55%, #dff3ff 100%);
  -webkit-user-select: none;
  user-select: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  color: inherit;
}

.tela { display: none; }
.tela.ativa { display: block; }

/* ---------- Tela inicial ---------- */
#tela-inicio {
  max-width: 45rem;
  margin: 0 auto;
  padding: 1rem;
  text-align: center;
}

h1 {
  font-size: clamp(1.875rem, 6.5vw, 3.375rem);
  font-weight: 700;
  margin: 1rem 0 0.25rem;
  color: var(--rosa-escuro);
  text-shadow: 0.188rem 0.188rem 0 #fff, 0.313rem 0.313rem 0 rgba(181,126,220,.35);
}

.subtitulo { font-size: 1.375rem; margin: 0 0 1rem; }

.caixa {
  background: var(--creme);
  border: var(--borda-forte) solid var(--borda);
  border-radius: var(--raio-card);
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  box-shadow: var(--sombra-3d) rgba(214,51,132,.15);
}

.caixa h2 { margin: 0.25rem 0 0.625rem; font-size: 1.5rem; font-weight: 600; color: var(--rosa-escuro); }

.botoes-linha {
  display: flex;
  gap: 0.625rem;
  justify-content: center;
  flex-wrap: wrap;
}

.escolha {
  font-size: 1.5rem;
  min-width: 4rem;
  padding: 0.625rem 1.125rem;
  border-radius: var(--raio-md);
  border: var(--borda-media) solid var(--borda);
  background: #fff;
}

.escolha.selecionado {
  background: var(--rosa);
  border-color: var(--rosa-escuro);
  color: #fff;
  transform: scale(1.08);
}

.jogador-config input {
  font-family: inherit;
  font-size: 1.375rem;
  color: var(--texto);
  padding: 0.5rem 0.75rem;
  border-radius: var(--raio-sm);
  border: var(--borda-media) solid var(--borda);
  width: min(100%, 17.5rem);
  margin-bottom: 0.625rem;
  text-align: center;
}

.bichos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.375rem; }

.bicho-btn {
  position: relative;
  min-width: 0;
  border-radius: var(--raio-md);
  border: var(--borda-fina) solid #f1e5ed;
  background: linear-gradient(#fff, #fff7fb);
  padding: 0.25rem 0.125rem 0.5rem;
  transition: border-color var(--dur-rapida) ease, background var(--dur-rapida) ease, box-shadow var(--dur-rapida) ease;
}

.bicho-btn.selecionado {
  border-color: var(--rosa-escuro);
  background: var(--rosa-selecao);
  box-shadow: 0 0.2rem 0 #ecc0d8;
}

.bicho-btn:disabled { opacity: 0.38; cursor: not-allowed; background: #f3edf1; }
.bicho-btn.selecionado::after {
  content: "✓";
  position: absolute;
  top: -0.375rem;
  right: -0.25rem;
  background: var(--rosa-escuro);
  color: #fff;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  font-size: .75rem;
  line-height: 1.125rem;
}
.bicho-nome { display: block; font-size: .65rem; font-weight: 600; }
.squishy-escolhido { margin: .125rem 0 .75rem; font-size: .875rem; color: var(--texto-suave); }
.squishy { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 90%; }
.squishy-avatar { display: inline-flex; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; }
.squishy-avatar .squishy { height: 100%; }
button:focus-visible, [role="button"]:focus-visible { outline: .2rem solid var(--foco); outline-offset: .2rem; }

.squishy-hero { position: relative; padding: 1.5rem .25rem .5rem; }
.hero-etiqueta {
  display: inline-block;
  padding: .375rem .875rem;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #ffffff9e;
  color: var(--texto-suave);
  font-size: .8125rem;
  letter-spacing: .045em;
}
.squishy-hero h1 { margin: .75rem 0 .5rem; font-size: clamp(2.25rem, 7vw, 3.5rem); line-height: 1.05; }
.squishy-hero h1 span { display: block; color: var(--lilas-texto); font-size: 1.3em; }
.squishy-hero .subtitulo { font-size: 1rem; color: var(--texto-suave); margin: .75rem 0 0; }
.turma-squishy { display: flex; align-items: flex-end; justify-content: center; gap: .75rem; margin: .75rem auto 0; }
.hero-squishy { border: 0; background: none; width: 7.25rem; padding: .25rem; }
.hero-squishy:nth-child(2) { width: 9rem; }
.hero-squishy span { display: inline-block; border-radius: 999px; background: #fff9; padding: .25rem .625rem; font-size: .75rem; color: var(--texto-suave); }
.hero-dica { font-size: .875rem; color: var(--texto-suave); margin: .875rem 0 .75rem; }
.hero-dica > span { display: block; margin-top: .375rem; color: var(--rosa-escuro); }
.icone-inline { display: inline-block; width: 1.5em; vertical-align: middle; }

.btn-grande {
  font-size: 1.875rem;
  font-weight: 600;
  padding: 0.875rem 2.5rem;
  margin: 1rem 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8cc0, var(--rosa));
  color: #fff;
  box-shadow: var(--sombra-3d) var(--rosa-escuro);
}

.btn-grande:active { transform: translateY(.25rem); box-shadow: 0 .125rem 0 var(--rosa-escuro); }

.btn-secundario {
  display: block;
  margin: 0 auto;
  font-size: 1.125rem;
  min-height: 2.75rem;
  padding: .5rem 1rem;
  background: none;
  border: none;
  text-decoration: underline;
}

[hidden] { display: none !important; }

/* Telão: só assiste, quem joga são os celulares */
.so-tv, .tv .so-celular { display: none !important; }
.tv .so-tv { display: block !important; }
.endereco-dica { margin: 0.25rem 0; font-size: 1.125rem; }
.endereco { margin: 0.5rem 0; font-size: 2rem; font-weight: 700; color: var(--rosa); word-break: break-all; }
.tv .sala-lista .tirar { display: none; }

.btn-grande:disabled { opacity: 0.45; cursor: default; box-shadow: var(--sombra-3d) var(--rosa-escuro); transform: none; }

.btn-entrar { margin-top: 0.75rem; font-weight: 600; }

.sala-lista { list-style: none; padding: 0; margin: 0 auto; max-width: 22rem; font-size: 1.375rem; }

.sala-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: #fff;
  border: 0.188rem solid var(--cor, var(--borda));
  border-radius: 999px;
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  margin: 0.375rem 0;
}

.sala-lista li.vazio { justify-content: center; border-style: dashed; color: var(--texto-mudo); }
.sala-lista li > span:not(.squishy-avatar) { flex: 1; text-align: left; }

.sala-lista .tirar {
  border: none;
  background: var(--rosa-claro);
  border-radius: 50%;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1rem;
}

.sala-status { font-size: 1.125rem; margin: 0.5rem 0 0; min-height: 1.5rem; }

/* ---------- Tela do jogo ---------- */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
}

.vez {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: clamp(1.375rem, 4vw, 2.125rem);
  font-weight: 600;
  background: var(--creme);
  border: var(--borda-forte) solid var(--borda);
  border-radius: 999px;
  padding: 0.25rem 1.375rem;
}

.barra-botoes { display: flex; gap: 0.5rem; }

.btn-icone {
  font-size: 1.75rem;
  background: var(--creme);
  border: var(--borda-media) solid var(--borda);
  border-radius: 50%;
  width: 3.375rem;
  height: 3.375rem;
}

.area-jogo {
  display: flex;
  gap: 1rem;
  padding: 0 1rem 1rem;
  align-items: flex-start;
  justify-content: center;
}

.tabuleiro {
  position: relative;
  container-type: inline-size;
  width: min(100%, calc((100vh - 7rem) * 920 / 700));
  aspect-ratio: 920 / 700;
  border: 0.5rem solid #fff;
  border-radius: var(--raio-grande);
  overflow: hidden;
  box-shadow: 0 0.625rem 0 rgba(181,126,220,.35), 0 0.75rem 1.875rem rgba(90,42,74,.2);
  background: #c9f2d6;
}

#cenario { display: block; width: 100%; height: 100%; }
#cenario text { font-family: "Fredoka", system-ui, sans-serif; }

/* Squishies com sombra no chão e marcador da cor do jogador. */
.peca {
  position: absolute;
  width: 9cqw;
  height: 9cqw;
  margin: -8cqw 0 0 -4.5cqw;
  border-radius: 35%;
  background: transparent;
  border: 0;
  padding: 0;
  line-height: 1;
  transition: left 0.25s ease, top 0.25s ease;
  z-index: 2;
}

.peca::after {
  content: "";
  position: absolute;
  bottom: -.15cqw;
  left: 27%;
  width: 46%;
  height: .65cqw;
  border-radius: 50%;
  background: var(--cor, var(--rosa));
  border: .15cqw solid #fff;
}

.peca.atual { z-index: 3; }

/* Halo da vez: só transform/opacity, que o Chrome anima na GPU sem repintar */
.peca.atual::before {
  content: "";
  position: absolute;
  inset: 30% 0 0;
  border-radius: 50%;
  border: 0.4cqw solid rgba(255,255,255,.9);
  will-change: transform, opacity;
  animation: brilho 1.1s ease-in-out infinite;
}

@keyframes brilho {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.25); opacity: .3; }
}

.peca.pulo .squishy { animation: pulo 0.32s ease-out; }
.peca.atual:not(.pulo) .squishy { animation: respira-squishy 2.8s ease-in-out infinite; }
.peca.dormindo .squishy-olhos { transform: translateY(57px) scaleY(.18); transform-origin: 0 0; }
.peca.dormindo::before { content: "zZ"; position: absolute; top: 8%; right: -10%; font-size: 1.8cqw; color: var(--foco); }

@keyframes respira-squishy {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.035, .965); }
}

@keyframes pulo {
  0% { transform: scale(1.12, .82); }
  40% { transform: translateY(-1.8cqw) scale(.92, 1.1); }
  75% { transform: scale(1.1, .88); }
  100% { transform: translateY(0) scale(1); }
}

/* O cenário é estático de propósito: animar elementos dentro do SVG faz o Chrome
   redesenhar o cenário inteiro (centenas de emojis) a cada quadro, e no telão isso travava. */
.brilha { opacity: .85; }

/* ---------- Painel ---------- */
.painel {
  width: 14.375rem;
  flex-shrink: 0;
  background: var(--creme);
  border: var(--borda-forte) solid var(--borda);
  border-radius: var(--raio-card);
  padding: 0.875rem;
  text-align: center;
}
.painel-titulo { margin: 0 0 .875rem; font-size: 1.25rem; font-weight: 600; color: var(--lilas-texto); }
.dica-squishy { font-size: .8rem; color: var(--texto-suave); margin: .75rem 0; }

.dado {
  --lado-dado: 5.35rem;
  --meio-dado: calc(var(--lado-dado) / 2);
  position: relative;
  margin-inline: auto;
  width: 8.5rem;
  height: 9rem;
  background: none;
  border: 0;
  border-radius: 1.5rem;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.dado-perspectiva {
  position: absolute;
  inset: 0 0 1.4rem;
  display: grid;
  place-items: center;
  perspective: 24rem;
  transition: translate var(--dur-rapida) ease;
}

.dado-cubo {
  position: relative;
  display: block;
  width: var(--lado-dado);
  height: var(--lado-dado);
  transform-style: preserve-3d;
  transform: translateY(0) rotateX(-18deg) rotateY(-24deg) rotateX(var(--dado-x, 0deg)) rotateY(var(--dado-y, 0deg)) rotateZ(0deg) scale(1, 1);
}

.dado-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: calc(var(--lado-dado) * .035);
  padding: calc(var(--lado-dado) * .14);
  border-radius: calc(var(--lado-dado) * .12);
  border: .1rem solid #edd7ef;
  background: radial-gradient(ellipse at 25% 15%, #fff 10%, #fff8fc 50%, #f2d9ef 100%);
  box-shadow: inset .1rem .15rem .25rem #fff, inset -.15rem -.2rem .4rem #dab8d455;
  backface-visibility: hidden;
}

.dado-face.face-1 { transform: translateZ(var(--meio-dado)); }
.dado-face.face-2 { transform: rotateX(90deg) translateZ(var(--meio-dado)); }
.dado-face.face-3 { transform: rotateY(90deg) translateZ(var(--meio-dado)); }
.dado-face.face-4 { transform: rotateY(-90deg) translateZ(var(--meio-dado)); }
.dado-face.face-5 { transform: rotateX(-90deg) translateZ(var(--meio-dado)); }
.dado-face.face-6 { transform: rotateY(180deg) translateZ(var(--meio-dado)); }

.dado-sombra {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 1.65rem;
  height: .85rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, #aa77b8, #d6b4dd 65%, transparent 72%);
  opacity: .3;
}

.dado-legenda {
  position: absolute;
  left: -.75rem;
  right: -.75rem;
  bottom: .125rem;
  font-size: .875rem;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
  color: var(--lilas-texto);
}

.dado:disabled { cursor: default; }
.dado:disabled:not(.rolando) .dado-legenda { color: var(--texto-mudo); }
.dado.rolando .dado-cubo { will-change: transform; }
.dado.rolando .dado-legenda { color: var(--rosa-escuro); }
@media (hover: hover) {
  .dado:not(:disabled):hover .dado-perspectiva { translate: 0 -.2rem; }
}

.ponto { display: flex; align-items: center; justify-content: center; }
.ponto.on::after {
  content: "";
  width: 85%;
  height: 85%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #db9acb, #b769a9 50%, #8f4d88 100%);
  box-shadow: inset 0 .075rem .125rem #78346744, 0 .075rem .075rem #fff;
}

.dica { font-size: 1.125rem; margin: 0.625rem 0; }

.mensagem {
  min-height: 4rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--rosa-escuro);
}

.placar {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  font-size: 1.125rem;
  text-align: left;
}

.placar li { display: flex; align-items: center; gap: .25rem; padding: 0.25rem 0.375rem; border-radius: var(--raio-sm); border-left: 0.3rem solid var(--cor); margin: 0.188rem 0; }
.placar li.atual { background: var(--rosa-claro); }

.legenda {
  font-size: 1rem;
  text-align: left;
  border-top: 0.125rem dashed var(--borda);
  padding-top: 0.5rem;
  line-height: 1.6;
}
.legenda-fantasma, .legenda-asset { display: flex; align-items: center; gap: .3rem; }
#legenda-fantasma, .legenda-asset > span { display: inline-block; width: 1.5rem; flex-shrink: 0; }

/* ---------- Modais ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(90,42,74,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10;
}

.modal.escondido { display: none; }

.modal-caixa {
  background: var(--creme);
  border: var(--borda-modal) solid var(--rosa);
  border-radius: var(--raio-grande);
  padding: 1.25rem 1.75rem;
  text-align: center;
  max-width: 32.5rem;
  width: 100%;
  box-shadow: 0 .625rem 0 var(--rosa-escuro);
  animation: aparecer var(--dur-media) ease-out;
}

@keyframes aparecer {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-caixa h2 { font-size: 1.75rem; font-weight: 600; margin: 0.375rem 0 0.75rem; color: var(--rosa-escuro); }

.conta-texto { font-size: 4rem; font-weight: 700; margin: 0.5rem 0 1rem; }

.opcoes { display: flex; gap: 0.875rem; justify-content: center; }

.opcoes button {
  font-size: 2.75rem;
  font-weight: 700;
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
  border: var(--borda-forte) solid var(--borda);
  background: #fff;
  box-shadow: var(--sombra-3d) var(--borda);
}

.opcoes button.certa { background: var(--sucesso-claro); border-color: var(--sucesso); box-shadow: var(--sombra-3d) var(--sucesso); }
.opcoes button.errada { background: var(--erro-claro); border-color: var(--erro); box-shadow: var(--sombra-3d) var(--erro); }
.opcoes button.cor, .opcoes button.cor.certa, .opcoes button.cor.errada { background: var(--cor); }

.resultado-conta { min-height: 2.75rem; font-size: 1.625rem; font-weight: 600; margin-top: 0.875rem; }

.vencedor-bicho { width: 10rem; max-width: 40vw; margin: 0 auto; cursor: pointer; animation: pulo-grande 1.4s ease-in-out infinite; }
.vitoria-turma { display: flex; justify-content: center; align-items: flex-end; gap: .5rem; }
.vitoria-turma .vencedor-bicho { margin: 0; }
.castelo-vitoria { width: 8rem; max-width: 32vw; padding: 0; border: 0; background: none; }
@keyframes pulo-grande {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.875rem); }
}

/* ---------- Susto do fantasminha ---------- */
.modal.susto { background: rgba(40, 20, 70, 0.75); }

.susto-caixa { text-align: center; color: #fff; }

.susto-monstro {
  display: block;
  width: min(48vw, 16rem);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  animation: assombra var(--dur-susto) ease-out forwards;
}
.susto-monstro .squishy { animation: fantasma-macio .75s ease-in-out infinite; }

@keyframes fantasma-macio {
  0%, 100% { transform: scale(1.06, .94); }
  50% { transform: translateY(-.5rem) scale(.95, 1.05); }
}

@keyframes assombra {
  0%   { transform: scale(0.1) rotate(-20deg); opacity: 0; }
  20%  { transform: scale(1.2) rotate(8deg); opacity: 1; }
  30%, 50%, 70% { transform: scale(1) translateX(-.875rem) rotate(-6deg); }
  40%, 60%, 80% { transform: scale(1) translateX(.875rem) rotate(6deg); }
  100% { transform: scale(1) translateX(0); }
}

.susto-buu {
  font-size: min(16vw, 5.625rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0.25rem 0.25rem 0 #9b5de5, 0.5rem 0.5rem 0 #5b3a86;
  animation: aparecer 0.4s 0.3s ease-out both;
}

.susto-texto { font-size: 1.625rem; font-weight: 600; margin-top: 0.5rem; }

/* ---------- Confete ---------- */
#confete { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }

.confete {
  position: absolute;
  top: -1.875rem;
  font-size: 1.375rem;
  animation: cair linear forwards;
}
.confete .squishy { width: 1.8rem; }

@keyframes cair {
  to { transform: translateY(110vh) rotate(540deg); }
}

/* ---------- Telas menores (tablet em pé / celular) ---------- */
@media (max-width: 820px) {
  .area-jogo { flex-direction: column; align-items: center; padding: 0 0.25rem 0.5rem; gap: 0.5rem; }
  .barra { padding: 0.375rem 0.5rem; }
  .tabuleiro { width: 100%; border-width: 0.25rem; border-radius: var(--raio-sm); }
  .painel {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.875rem;
    align-items: center;
    text-align: left;
  }
  .painel .dado { grid-row: span 3; width: 6.25rem; height: 7.5rem; --lado-dado: 4.3rem; }
  .painel .legenda { display: none; }
  .painel-titulo, .dica-squishy { display: none; }
  .painel .placar { grid-column: 2; font-size: .9375rem; margin: 0; }
  .painel .squishy-avatar { width: 1.75rem; height: 1.75rem; flex-basis: 1.75rem; }
  .dica { margin: 0; }
}

@media (max-width: 540px) {
  #tela-inicio { padding: .75rem; }
  .bichos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
  .bicho-btn .squishy { max-width: 4.75rem; margin-inline: auto; }
  .bicho-nome { font-size: .75rem; }
  .hero-squishy { width: 5.75rem; }
  .hero-squishy:nth-child(2) { width: 7rem; }
  .turma-squishy { gap: .125rem; }
  .vez { font-size: 1.125rem; padding: .25rem .625rem; min-width: 0; }
  .barra-botoes { gap: .25rem; }
  .btn-icone { width: 3rem; height: 3rem; font-size: 1.375rem; flex-shrink: 0; }
  .squishy-hero { padding-top: .5rem; }
}

/* ---------- Celular deitado: tabuleiro ocupa a altura toda ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  html { font-size: 14px; }
  .barra { padding: 0.286rem 0.571rem; }
  .vez { font-size: 1.143rem; padding: 0.143rem 0.857rem; border-width: 0.214rem; }
  .btn-icone { width: 3.429rem; height: 3.429rem; font-size: 1.429rem; }
  .area-jogo { flex-direction: row; align-items: flex-start; padding: 0 0.571rem 0.571rem; gap: 0.571rem; }
  .tabuleiro { width: min(100%, calc((100vh - 4rem) * 920 / 700)); border-width: 0.286rem; border-radius: 1.286rem; }
  .painel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 10.714rem;
    flex-shrink: 0;
    padding: 0.571rem;
    border-radius: 1.286rem;
    text-align: center;
  }
  .painel .dado { width: 6rem; height: 6.571rem; --lado-dado: 3.35rem; }
  .placar { width: 100%; text-align: left; }
  .dado-legenda { font-size: 0.786rem; }
  .dica { font-size: 0.929rem; margin: 0.286rem 0; }
  .mensagem { font-size: 1rem; min-height: 2.857rem; }
  .placar { font-size: 0.929rem; }
  .legenda { display: none; }
  .modal-caixa { padding: 0.714rem 1.143rem; }
  .conta-texto { font-size: 2.857rem; margin: 0.286rem 0 0.571rem; }
  .opcoes button { width: 5.429rem; height: 5.429rem; font-size: 2.429rem; }
  .susto-monstro { width: min(30vh, 10rem); }
  .susto-buu { font-size: 3.571rem; }
  .vencedor-bicho { font-size: 4.571rem; }
  .vencedor-bicho { width: 6rem; }
  .castelo-vitoria { width: 5rem; }
  .modal-caixa h2 { font-size: 1.429rem; margin: 0.286rem 0 0.429rem; }
  .modal-caixa .btn-grande { font-size: 1.571rem; padding: 0.571rem 2rem; margin: 0.571rem 0; }
}

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

/* Feedback de toque compartilhado pelos botões redondos e de escolha */
.escolha:active, .btn-icone:active, .opcoes button:active { transform: translateY(.125rem) scale(.97); }

/* Ícones vetoriais da interface (herdam a cor do texto) */
.icone-ui { width: 1.1em; height: 1.1em; vertical-align: -.18em; flex: none; }
.icone-inline-ui, .btn-icone > span, .legenda-asset > .icone-lua { display: inline-flex; vertical-align: middle; }
.btn-icone .icone-ui { width: 1em; height: 1em; vertical-align: middle; }
.icone-lua { color: #9b82d6; }
.legenda-asset > .icone-lua .icone-ui { width: 1.2rem; height: 1.2rem; margin: 0 auto; }
.sala-lista .tirar .icone-ui { width: .9rem; height: .9rem; vertical-align: middle; color: var(--rosa-escuro); }
.confete .icone-ui { width: 1.6rem; height: 1.6rem; }

/* Bolinhas coloridas da pergunta de mistura de cores */
.bolinha-cor { display: inline-block; width: .75em; height: .75em; border-radius: 50%; background: var(--cor); border: var(--borda-fina) solid #fff; box-shadow: 0 0 0 .1rem var(--borda); vertical-align: middle; }
.confirmar-botoes { display: flex; flex-direction: column; align-items: center; }

/* ---------- Salas com código ---------- */
.so-tv-texto { display: none; }
.tv .so-tv-texto { display: inline; }
.tv .so-celular-texto { display: none; }

.campo-codigo {
  display: block;
  margin: 0.5rem auto;
  width: 11rem;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
}
.codigo-grande {
  margin: 0.25rem 0;
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: 0.5rem;
  color: var(--rosa);
  user-select: all;
}
.endereco-link { color: var(--texto-suave); word-break: break-all; }
.sala-vagas { font-size: 1rem; color: var(--texto-suave); font-weight: 400; }
.sala-status.erro { color: var(--erro); font-weight: 600; }
.sala-lista li.offline { opacity: 0.6; border-style: dashed; }
.sala-lista .selo {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lilas-texto);
  background: var(--lilas-claro);
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
  white-space: nowrap;
}
.sala-lista .selo.sem-conexao { color: var(--erro); background: var(--erro-claro); }

.aviso-conexao {
  position: fixed;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  background: var(--erro);
  color: #fff;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2);
}
.aviso-conexao.escondido { display: none; }
.campo-codigo {
  font-family: inherit;
  color: var(--texto);
  padding: 0.5rem 0.75rem;
  border-radius: var(--raio-sm);
  border: var(--borda-media) solid var(--borda);
}

.qr-sala { width: min(60vw, 13rem); margin: 0.5rem auto; border-radius: var(--raio-sm); overflow: hidden; border: var(--borda-media) solid var(--borda); background: #fff; }
.qr-sala svg { display: block; width: 100%; height: auto; }
.tv .qr-sala { width: min(40vh, 24rem); }
.modal-qr { overflow-y: auto; align-items: flex-start; }
.caixa-qr { position: relative; margin: auto; padding-top: 0.75rem; }
.caixa-qr .codigo-grande { font-size: 2.25rem; margin: 0.25rem 0; }
.caixa-qr h2 { font-size: 1.375rem; margin: 0.25rem 2rem 0.5rem; }
.qr-modal { width: min(70vw, 42vh, 22rem); }
.qr-x { position: absolute; top: 0.5rem; right: 0.5rem; }
.btn-sair-sala {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: min(100%, 22rem);
  min-height: 3rem;
  margin: 0.75rem auto;
  padding: 0.5rem 1.25rem;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--erro);
  background: #fff;
  border: var(--borda-media) solid var(--erro);
  border-radius: 999px;
}
.btn-sair-sala:active { transform: translateY(.125rem) scale(.98); }