/* Screens of the Pavio (site/js/pavio/telas.js): lobby, countdown, results. Loaded after estilo.css. */

/* The countdown sits on the arena: its sizes follow the arena's height, so two new powers still fit on a phone. */
.pavio-arena {
  container-type: size;
}

.pavio-aviso--contagem .pavio-mapa {
  font-size: clamp(20px, 10cqh, 44px);
}

.pavio-aviso--contagem .pavio-numero {
  font-size: clamp(40px, 22cqh, 150px);
}

@container (max-height: 400px) {
  .pavio-aviso--contagem {
    gap: 4px;
  }

  .pavio-aviso--contagem .pavio-poder-descricao,
  .pavio-aviso--contagem > p:not(.pavio-sobretitulo):not(.pavio-poder):not(.pavio-pilula) {
    display: none;
  }
}

.pavio-prontos li.fora {
  border-color: rgba(255, 212, 59, 0.6);
}

/* A full-screen card keeps its height and the notice around it scrolls (a short phone in landscape with 8 players
   would otherwise squeeze the card and cut the ready button off). */
.pavio-aviso--cartao > .pavio-cartao {
  flex-shrink: 0;
}

/* Home screen: the device profile (site/js/perfil.js). */
.perfil {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  background: #0f1822;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.perfil-topo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.perfil-boneco {
  display: grid;
  flex: none;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 60%, rgba(255, 138, 61, 0.18), transparent 70%);
}

.perfil-marca {
  width: 54px;
  height: 54px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16), 0 8px 18px rgba(0, 0, 0, 0.35);
  animation: perfil-respira 2.6s ease-in-out infinite;
}

.perfil-retrato {
  display: block;
  width: 72px;
  height: 72px;
}

@keyframes perfil-respira {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.04); }
}

.perfil-identidade {
  flex: 1;
  min-width: 0;
}

/* Label on top, the eight colors on one row (they shrink on a narrow phone), the hint below. */
.perfil-cores {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: center;
  gap: 6px 4px;
}

.perfil-cores-rotulo {
  grid-column: 1 / -1;
  color: var(--texto-suave);
  font-size: 14px;
  font-weight: 600;
}

.perfil-cor {
  display: grid;
  justify-self: center;
  place-items: center;
  width: min(36px, 100%);
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}

.perfil-cor .marca-jogador {
  width: 72%;
  height: 72%;
}

.perfil-cor:hover {
  transform: scale(1.08);
}

.perfil-cor[aria-checked='true'] {
  border-color: var(--destaque);
  transform: scale(1.12);
}

.perfil-cor:focus-visible {
  outline: 3px solid rgba(255, 138, 61, 0.6);
  outline-offset: 1px;
}

.perfil-cores-dica {
  grid-column: 1 / -1;
}

.perfil-cores-dica,
.perfil-numeros {
  width: 100%;
  margin: 0;
  color: var(--texto-suave);
  font-size: 13px;
}

.perfil-outro {
  margin-top: 14px;
  color: var(--texto-suave);
  font-size: 14px;
}

.perfil-outro summary {
  cursor: pointer;
  text-decoration: underline;
}

.perfil-outro-corpo {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.perfil-outro-corpo p {
  margin: 0;
}

.perfil-outro-corpo .botao {
  justify-self: start;
}

.perfil-codigo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.perfil-codigo code {
  padding: 6px 10px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--texto);
  font-size: 14px;
  letter-spacing: 1px;
  word-break: break-all;
}

/* An invitation stands out: it is what the person came for. */
.convite {
  padding: 12px 14px 4px;
  background: rgba(255, 138, 61, 0.08);
  border: 2px solid rgba(255, 138, 61, 0.55);
  border-radius: var(--raio);
}

.convite p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .perfil-marca {
    animation: none;
  }
}

/* Lobby: each person's connection to the host. */
.pavio-conexao {
  flex: none;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(30, 43, 59, 0.9);
  color: var(--texto-suave);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pavio-conexao--boa {
  color: #8ce99a;
}

.pavio-conexao--media {
  color: #ffd43b;
}

.pavio-conexao--ruim {
  color: #ff8787;
}

/* Lobby: the invitation (code, share or copy, QR code). */
.pavio-convite {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(520px, 100%);
  padding: 10px 12px;
  background: rgba(14, 20, 28, 0.6);
  border: 1px dashed rgba(255, 138, 61, 0.5);
  border-radius: 14px;
}

.pavio-convite-titulo {
  margin: 0;
  color: var(--texto-suave);
  font-size: 14px;
}

.pavio-convite-titulo strong {
  color: var(--destaque);
  letter-spacing: 3px;
}

.pavio-convite-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.pavio-aviso .pavio-convite .botao {
  min-width: 0;
  margin-top: 0;
}

.pavio-convite-qr {
  width: 168px;
  height: 168px;
  border-radius: 10px;
  image-rendering: pixelated;
}

.pavio-convite-erro {
  margin: 0;
  color: #ffc9c9;
  font-size: 13px;
}

/* The countdown arrives with a short zoom, so the start of a match reads as a moment. */
.pavio-aviso--contagem {
  animation: contagem-entra 0.32s ease-out;
}

@keyframes contagem-entra {
  0% { opacity: 0; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pavio-aviso--contagem {
    animation: none;
  }
}

/* Home screen: the site was updated after this page was opened. */
.versao-nova {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: rgba(255, 212, 59, 0.1);
  border: 1px solid rgba(255, 212, 59, 0.55);
  border-radius: var(--raio);
  color: #ffe066;
  font-size: 14px;
  font-weight: 600;
}

.versao-nova[hidden] {
  display: none;
}

/* Result and round end: highlights, the timeline of eliminations, achievements. */
.pavio-destaques,
.pavio-conquistas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
  width: min(560px, 100%);
  margin: 2px 0;
  padding: 0;
  list-style: none;
}

.pavio-destaque,
.pavio-conquista {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(14, 20, 28, 0.7);
  border: 1px solid var(--borda);
  border-radius: 12px;
  text-align: left;
  animation: destaque-entra 0.4s ease-out both;
}

.pavio-destaque:nth-child(2),
.pavio-conquista:nth-child(2) {
  animation-delay: 0.08s;
}

.pavio-destaque:nth-child(3),
.pavio-conquista:nth-child(3) {
  animation-delay: 0.16s;
}

.pavio-destaque:nth-child(n + 4),
.pavio-conquista:nth-child(n + 4) {
  animation-delay: 0.24s;
}

@keyframes destaque-entra {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.pavio-conquista {
  border-color: rgba(255, 212, 59, 0.45);
}

.pavio-destaque-icone {
  flex: none;
  font-size: 20px;
}

.pavio-destaque-texto {
  display: grid;
  min-width: 0;
}

.pavio-destaque-titulo {
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 700;
}

.pavio-destaque-quem {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pavio-destaque-quem .marca-jogador {
  width: 14px;
  height: 14px;
}

.pavio-linha-tempo {
  width: min(560px, 100%);
  color: var(--texto-suave);
  font-size: 13px;
  text-align: left;
}

.pavio-linha-tempo summary {
  cursor: pointer;
  text-align: center;
}

.pavio-linha-tempo ol {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.pavio-linha-tempo li {
  display: flex;
  gap: 8px;
}

.pavio-linha-tempo-hora {
  flex: none;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.pavio-linha-tempo .marca-jogador {
  width: 14px;
  height: 14px;
}

.pavio-aviso .pavio-pular {
  min-width: 0;
}

.pavio-final-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .pavio-destaque,
  .pavio-conquista {
    animation: none;
  }
}

/* First-time tips at the bottom of the arena (site/js/pavio/dicas.js). */
.pavio-dica-jogo {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 4;
  max-width: calc(100% - 24px);
  padding: 8px 14px;
  background: rgba(10, 14, 20, 0.85);
  border: 1px solid rgba(255, 212, 59, 0.6);
  border-radius: 999px;
  color: #ffe066;
  font-size: clamp(11px, 3.6cqh, 15px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
  animation: dica-entra 0.3s ease-out;
}

.pavio-dica-jogo[hidden] {
  display: none;
}

@keyframes dica-entra {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .pavio-dica-jogo {
    animation: none;
  }
}

/* Settings dialog (site/js/configuracoes.js), on the same overlay as the connection notices. */
.config-cartao {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  text-align: left;
}

.config-cartao h2 {
  margin: 0;
  text-align: center;
}

.config-linha {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
}

.config-linha[hidden] {
  display: none;
}

.config-linha label {
  grid-column: 1 / -1;
  color: var(--texto-suave);
  font-size: 14px;
  font-weight: 600;
}

.config-linha input[type='range'] {
  width: 100%;
  accent-color: var(--destaque);
}

.config-linha output {
  min-width: 44px;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.config-linha--marcar {
  grid-template-columns: auto 1fr;
}

.config-linha--marcar label {
  grid-column: auto;
}

.config-linha--marcar input {
  width: 20px;
  height: 20px;
  accent-color: var(--destaque);
}

.config-linha--dicas {
  grid-template-columns: auto 1fr;
  font-size: 13px;
}

.config-linha--dicas span {
  color: var(--texto-suave);
}

/* The take-out ✕ of a robot sits in its card's corner, so the name keeps the room on a narrow phone. */
.pavio-prontos-robo {
  position: relative;
}

.pavio-prontos-robo .pavio-robo-tirar {
  position: absolute;
  top: 3px;
  right: 6px;
}

/* Short screens (phone in landscape): highlights and achievements two by two and tighter. */
@media (max-height: 500px) {
  .pavio-destaques,
  .pavio-conquistas {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 4px;
  }

  .pavio-destaque,
  .pavio-conquista {
    gap: 6px;
    padding: 3px 8px;
  }

  .pavio-destaque-icone {
    font-size: 16px;
  }

  .pavio-destaque-quem {
    font-size: 13px;
  }
}

/* Text for screen readers only. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Home and room screens slide in when they replace each other. */
.tela-entra {
  animation: tela-entra 0.28s ease-out;
}

@keyframes tela-entra {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .tela-entra {
    animation: none;
  }
}

/* The shape badge in the corner of the profile's character, as on the lobby cards. */
.perfil-boneco {
  position: relative;
}

.perfil-marca-canto {
  position: absolute;
  right: 2px;
  bottom: 4px;
  width: 22px;
  height: 22px;
  box-shadow: 0 0 0 2px #0f1822;
}

/* Home screen: the profile's latest matches and the ranking. */
.perfil-lista {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.perfil-lista li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  padding: 6px 10px;
  background: #0f1822;
  border: 1px solid var(--borda);
  border-radius: 10px;
}

.perfil-lista li.venceu,
.perfil-lista li.eu {
  border-color: rgba(255, 138, 61, 0.55);
}

.perfil-lista-principal {
  color: var(--texto);
  font-weight: 700;
}

.perfil-lista-principal .marca-jogador {
  width: 16px;
  height: 16px;
}

.perfil-lista-detalhe,
.perfil-lista-vazia {
  color: var(--texto-suave);
  font-size: 13px;
}

/* Room list: a name keeps room for a few letters, and the labels go to a second line when they do not fit. */
.lista-membros li {
  flex-wrap: wrap;
}

.membro-nome {
  min-width: 4.5em;
}

/* Portrait touch play: the player list would sit under the stick and the bomb button (the touch layer covers it anyway), so it steps aside during the countdown and the match, and the arena is centered above a strip kept for the thumbs. */
@media (orientation: portrait) and (max-width: 900px) {
  .sala:has(.pavio-toque:not([hidden])) .painel {
    display: none;
  }

  .sala:has(.pavio-toque:not([hidden])) .pavio {
    justify-content: center;
    padding-bottom: calc(180px + env(safe-area-inset-bottom));
  }
}