/* =========================================================================
   Salas (jogos entre jogadores)
   ========================================================================= */
.salas-topo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.salas-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px; background: linear-gradient(130deg, rgba(255, 61, 154, 0.22), rgba(155, 92, 255, 0.2)), var(--painel); }
.salas-intro h2 { font-family: var(--fonte-titulo); font-weight: 400; font-size: 34px; }
.jogos-de-sala { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-jogo { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; }
.mini-jogo b { display: block; }
.mini-jogo span { font-size: 12px; color: var(--texto-3); }
.lista-salas { display: flex; flex-direction: column; gap: 10px; }
.sala-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; flex-wrap: wrap; }
.sala-info { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.sala-info span { font-size: 13px; color: var(--texto-3); }
.linha-codigo { display: flex; gap: 8px; max-width: 420px; }
.linha-codigo .entrada { text-transform: uppercase; letter-spacing: 3px; font-weight: 800; }

.janela { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(60, 10, 70, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.janela-caixa { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; background: var(--solido); }
.janela-caixa h3 { font-family: var(--fonte-titulo); font-weight: 400; font-size: 26px; display: flex; align-items: center; gap: 8px; }
.escolha-jogo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.escolha-jogo button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; border: 2px solid var(--borda); background: var(--painel-2); cursor: pointer; font-size: 13px; }
.escolha-jogo button.ativo { border-color: var(--rosa); box-shadow: 0 0 0 4px rgba(255, 61, 154, 0.18); }

.sala-cabeca { display: flex; align-items: center; gap: 18px; padding: 18px 22px; flex-wrap: wrap; }
.sala-cabeca h2 { font-family: var(--fonte-titulo); font-weight: 400; font-size: 30px; }
.sala-cabeca .sub { margin: 4px 0 0; }
.codigo { letter-spacing: 2px; color: var(--rosa); }
.pote { display: flex; flex-direction: column; align-items: flex-end; padding: 12px 18px; border-radius: 18px; background: var(--gradiente-ouro); color: #5a2a00; box-shadow: 0 5px 0 #a35200; }
.pote span { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.pote b { font-family: var(--fonte-titulo); font-weight: 400; font-size: 30px; line-height: 1; }
.pote small { font-size: 12px; font-weight: 700; }
.sala-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; }
.lista-jogadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-bottom: 14px; }
.jogador { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: var(--painel-2); border: 1px solid var(--borda); min-width: 0; flex-wrap: wrap; }
.jogador img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; }
.jogador b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jogador.dono { border-color: rgba(245, 167, 0, 0.6); }
.jogador.vago { opacity: 0.5; border-style: dashed; }
.jogador.vago span { width: 34px; height: 34px; border-radius: 50%; background: var(--painel-3); }
.acoes-sala { align-items: center; }
.palco-sala { min-height: 320px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; position: relative; overflow: hidden; }
.vencedor-sala { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 18px; background: var(--gradiente); color: #fff; box-shadow: 0 6px 0 #9d174d; animation: entrar 0.3s ease-out; }
.vencedor-sala.eu { background: linear-gradient(90deg, #22c55e, #16a34a); box-shadow: 0 6px 0 #14532d; }
.vencedor-sala img { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; }
.vencedor-sala span { font-weight: 800; }
.vencedor-sala b { font-family: var(--fonte-titulo); font-weight: 400; font-size: 26px; }

/* Corrida */
.pista { width: 100%; display: flex; flex-direction: column; gap: 6px; position: relative; padding: 8px; border-radius: 16px; background: repeating-linear-gradient(90deg, rgba(34, 197, 94, 0.25) 0 40px, rgba(34, 197, 94, 0.15) 40px 80px); }
.raia { display: flex; align-items: center; gap: 8px; }
.raia img { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; flex: none; }
.trilha { position: relative; flex: 1; height: 38px; border-bottom: 2px dashed rgba(255, 255, 255, 0.6); }
.cavalo { position: absolute; left: 0; top: 0; width: 38px; height: 38px; transition-property: left; transition-timing-function: cubic-bezier(0.3, 0.1, 0.4, 1); }
.arte-cavalo { width: 38px; height: 38px; }
.chegada { position: absolute; right: 6%; top: 0; bottom: 0; width: 6px; background: repeating-linear-gradient(0deg, #111 0 8px, #fff 8px 16px); }
/* Rinha e roleta */
.arena-sala { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.lutador { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; transition: opacity 0.4s, transform 0.4s, filter 0.4s; }
.lutador img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; box-shadow: var(--sombra); }
.lutador span { font-size: 12px; font-weight: 700; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lutador.fora { opacity: 0.3; filter: grayscale(1); transform: scale(0.85) rotate(-8deg); }
.lutador.campeao img { border-color: #ffc21a; box-shadow: 0 0 0 5px rgba(255, 194, 26, 0.5), 0 0 30px #ffc21a; animation: pulsar 0.6s ease-in-out infinite alternate; }
.girando-sala { animation: rodar-x 0.25s linear infinite; }
@keyframes rodar-x { to { transform: rotateX(360deg); } }
.moeda3d .face .ic-coroa { width: 56%; height: 56%; }

@media (max-width: 860px) {
  .salas-topo, .sala-corpo { grid-template-columns: 1fr; }
  .escolha-jogo { grid-template-columns: repeat(2, 1fr); }
}
.escolha-jogo button:disabled { opacity: 0.45; cursor: not-allowed; } .escolha-jogo button small { font-size: 11px; color: var(--texto-3); }

/* Aviso quando o dono muda a aposta ou o jogo, e o relógio de fechar */
.aviso-sala { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: rgba(251, 191, 36, 0.18); border: 1px solid rgba(251, 191, 36, 0.55); font-weight: 700; animation: entrar 0.3s ease-out; }
.aviso-sala svg { width: 18px; height: 18px; color: #d97706; flex: none; }
.sala-fecha { margin: 10px 0 0; }
.jogador.na-vez { box-shadow: 0 0 0 2px #fde047, 0 0 18px rgba(253, 224, 71, 0.45); }

/* Últimas partidas da sala */
.sala-historico { display: flex; flex-direction: column; gap: 6px; }
.hist-sala { display: grid; grid-template-columns: 44px 36px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--borda); }
.hist-rodada { font-weight: 900; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.hist-sala .arte-mini { width: 36px; height: 36px; }
.hist-info { display: flex; flex-direction: column; min-width: 0; }
.hist-info small { color: var(--texto-3); font-size: 12px; }
.hist-vence { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.hist-vence img { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px #fde047; }
.hist-pote { color: var(--verde); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .hist-sala { grid-template-columns: 36px minmax(0, 1fr) auto; } .hist-rodada, .hist-sala .arte-mini { display: none; } .hist-vence span { display: none; } }

/* Blackjack da sala: uma mão por jogador */
.sj-mesa { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; padding: 16px; border-radius: 22px; background: radial-gradient(120% 100% at 50% 0%, #16a34a, #14532d 70%); box-shadow: inset 0 0 0 4px rgba(253, 230, 138, 0.5); }
.sj-mao { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; border-radius: 16px; background: rgba(0, 0, 0, 0.18); transition: box-shadow 0.3s ease, opacity 0.3s ease, transform 0.3s ease; }
.sj-mao.vez { box-shadow: 0 0 0 3px #fde047, 0 0 24px rgba(253, 224, 71, 0.5); transform: translateY(-3px); }
.sj-mao.estourou { opacity: 0.5; }
.sj-mao.venceu { box-shadow: 0 0 0 3px #4ade80, 0 0 30px rgba(74, 222, 128, 0.6); }
.sj-mao.eu .sj-quem b { color: #fde047; }
.sj-quem { display: flex; align-items: center; gap: 8px; color: #fff; }
.sj-quem img { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.sj-quem b { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-pts { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #14532d; font-weight: 900; }
.sj-cartas { display: flex; min-height: 94px; }
.sj-cartas .carta { width: 62px; height: 88px; }
.sj-cartas .carta .canto { font-size: 15px; }
.sj-cartas .carta .centro { font-size: 30px; }
.sj-cartas .carta + .carta { margin-left: -26px; }
.sj-mao em { font-style: normal; font-size: 12px; font-weight: 800; color: #dcfce7; text-transform: uppercase; letter-spacing: 0.5px; }
.sj-vez { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--painel-2); }
.sj-tempo { padding: 4px 10px; border-radius: 999px; background: var(--painel-3); font-weight: 900; font-variant-numeric: tabular-nums; }

/* Jogo da velha da sala */
.sv-mesa { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sv-lados { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sv-lados em { font-style: normal; font-weight: 900; color: var(--texto-3); }
.sv-lado { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--painel-2); border: 1px solid var(--borda); transition: box-shadow 0.3s ease; }
.sv-lado.vez { box-shadow: 0 0 0 2px #fde047, 0 0 16px rgba(253, 224, 71, 0.45); }
.sv-lado img { width: 30px; height: 30px; border-radius: 50%; }
.sv-sim { font-style: normal; font-family: var(--fonte-titulo); font-size: 20px; }
.sv-sim.X, .sv-casa.X span { color: #ef4444; }
.sv-sim.O, .sv-casa.O span { color: #3b82f6; }
.sv-tabuleiro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(330px, 100%); padding: 12px; border-radius: 22px; background: #7c2d12; box-shadow: inset 0 0 0 4px #fde68a, 0 14px 30px rgba(0, 0, 0, 0.3); }
.sv-casa { aspect-ratio: 1; border: 0; border-radius: 14px; background: #fff7ed; cursor: pointer; display: grid; place-items: center; box-shadow: inset 0 -5px 0 #fed7aa; transition: transform 0.15s ease, background 0.2s ease; }
.sv-casa:not(:disabled):hover { transform: translateY(-3px); background: #ffedd5; }
.sv-casa:disabled { cursor: default; }
.sv-casa span { font-family: var(--fonte-titulo); font-size: clamp(42px, 10vw, 64px); line-height: 1; animation: sv-marca 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.sv-casa.linha { background: #bbf7d0; box-shadow: 0 0 0 3px #22c55e, 0 0 20px rgba(34, 197, 94, 0.6); }
@keyframes sv-marca { from { transform: scale(0.2) rotate(-30deg); opacity: 0; } }