/* Mesa de truco: sala de espera, feltro, cartas, gritos e bate-papo. */
.tela.centro, .centro { text-align: center; }
.tela.centro { padding-top: 60px; }
.macacos.grande { font-size: 3.4rem; }
.emoji-grande { font-size: 3.6rem; line-height: 1; margin-bottom: 6px; }
.btn-icone { min-width: 40px; padding: 6px 8px; position: relative; }
.btn.desligado { opacity: .55; }
.badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px;
  background: var(--rosa); color: #fff; font: 800 .72rem/20px 'Nunito', sans-serif; border: 2px solid var(--marrom); }
.conexao { position: sticky; top: 58px; z-index: 6; background: #ffe1e1; border-bottom: 2px solid var(--vermelho); text-align: center;
  font-weight: 800; padding: 6px; }
.mini { font: 800 .8rem 'Nunito', sans-serif; border: 2px solid var(--marrom); border-radius: 8px; background: var(--creme);
  color: var(--marrom); padding: 2px 7px; cursor: pointer; }

/* ---------- Avatares (recortes da arte do grupo) ---------- */
.avatar {
  --tam: 48px; --x: 320; --y: 345; --r: 190;
  width: var(--tam); height: var(--tam); border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  border: 3px solid var(--marrom); background-color: var(--ceu-2);
  background-image: url('../assets/los-monkeys.jpg');
  background-size: calc(var(--tam) * 640 / var(--r));
  background-position: calc(var(--tam) / 2 - var(--tam) * var(--x) / var(--r)) calc(var(--tam) / 2 - var(--tam) * var(--y) / var(--r));
}
.av-0 { --x: 322; --y: 350; --r: 200; }                              /* violão */
.av-1 { --x: 100; --y: 395; --r: 215; }                              /* chapéu */
.av-2 { --x: 525; --y: 385; --r: 205; }                              /* fone */
.av-3 { --x: 322; --y: 350; --r: 200; transform: scaleX(-1); filter: hue-rotate(-35deg) saturate(1.3); }
.avatar.vazio { background: var(--creme-2); font: 400 1.4rem 'Luckiest Guy', sans-serif; color: var(--marrom-suave); border-style: dashed; }

/* ---------- Sala de espera ---------- */
.cabeca-mesa { text-align: center; margin-bottom: 8px; }
.cabeca-mesa .sobre { margin: 0; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }
.codigo-mesa { margin: 0; font-size: 2.6rem; letter-spacing: .12em; color: var(--laranja); -webkit-text-stroke: 1.5px var(--marrom);
  text-shadow: 3px 3px 0 var(--marrom); }

.mesa-espera {
  position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto auto; gap: 6px;
  align-items: center; justify-items: center; margin: 0 auto 18px; max-width: 460px; padding: 16px 8px;
  background: radial-gradient(ellipse at center, #2aa37f 0%, #1a7a5c 70%); border: 8px solid #c58b4a; border-radius: 40px;
  box-shadow: inset 0 0 0 3px rgba(59, 36, 18, .35), var(--sombra-dura);
}
.cadeira-espera { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; max-width: 130px;
  background: var(--creme); border: 3px solid var(--marrom); border-radius: 14px; padding: 8px 6px; position: relative; width: 100%; }
.cadeira-espera strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cadeira-espera span:not(.avatar) { font-size: .75rem; color: var(--marrom-suave); font-weight: 700; }
.cadeira-espera.vazia { background: rgba(255, 248, 230, .7); border-style: dashed; }
.cadeira-espera.vazia .avatar { animation: pulsar 1.6s ease-in-out infinite; }
.cadeira-espera.offline { opacity: .6; }
.cadeira-espera.trocando { outline: 3px solid var(--azul); }
.cadeira-espera.rel-2 { grid-column: 2; grid-row: 1; }
.cadeira-espera.rel-3 { grid-column: 1; grid-row: 2; }
.cadeira-espera.rel-1 { grid-column: 3; grid-row: 2; }
.cadeira-espera.rel-0 { grid-column: 2; grid-row: 3; }
.cadeira-espera.rel-0, .cadeira-espera.rel-2 { box-shadow: 0 0 0 3px var(--laranja); }
.mesa-espera::after { content: 'NÓS × ELES'; grid-column: 2; grid-row: 2; font: 400 .85rem 'Luckiest Guy', sans-serif; color: var(--creme);
  letter-spacing: .05em; text-align: center; }
.cadeira-acoes { display: flex; gap: 4px; margin-top: 4px; }
@keyframes pulsar { 50% { scale: 1.08; } }

.passos { display: grid; gap: 14px; }
.passo { border: 2px dashed rgba(59, 36, 18, .35); border-radius: 14px; padding: 12px; display: grid; gap: 8px; }
.passo.feito { border-style: solid; border-color: var(--ok); background: #eef9f1; }
.passo.bloqueado { opacity: .75; }
.passo-cabeca { display: flex; align-items: center; gap: 8px; }
.passo-cabeca h2 { margin: 0; font-size: 1.15rem; flex: 1; }
.passo-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--laranja);
  border: 2px solid var(--marrom); font: 400 1.1rem 'Luckiest Guy', sans-serif; }
.passo .link { justify-self: start; }
.convite { display: grid; gap: 8px; }
input[type="tel"], select { font: inherit; font-size: 1.05rem; width: 100%; padding: 10px 12px; border-radius: 12px;
  border: 2px solid var(--marrom); background: #fff; color: var(--marrom); }
.config-grade { display: grid; gap: 10px; margin-top: 4px; }
fieldset.voz { border: 2px solid var(--marrom); border-radius: 12px; padding: 6px 10px 10px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
fieldset.voz legend { font-weight: 800; padding: 0 4px; }

/* ---------- Contagem ---------- */
.contagem, .grito { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(59, 36, 18, .55); }
.contagem-caixa { text-align: center; background: var(--creme); border: 4px solid var(--marrom); border-radius: 24px; padding: 18px 26px;
  box-shadow: var(--sombra-dura); }
.contagem-caixa p { margin: 0; font-weight: 800; font-size: 1.2rem; }
.contagem-caixa strong { display: block; font: 400 6rem/1 'Luckiest Guy', sans-serif; color: var(--laranja); -webkit-text-stroke: 3px var(--marrom);
  text-shadow: 5px 6px 0 var(--marrom); margin: 8px 0 12px; }

/* ---------- Partida ---------- */
.pagina-mesa .jogo { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 8px 10px 110px; display: flex; flex-direction: column; gap: 6px; }
.placar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: stretch; }
.time { background: var(--creme); border: 3px solid var(--marrom); border-radius: 14px; text-align: center; padding: 4px; box-shadow: 0 3px 0 var(--marrom); }
.time-nos { background: #ffe6b3; }
.time-nome { display: block; font: 400 .9rem 'Luckiest Guy', sans-serif; text-transform: uppercase; }
.time strong { font: 400 2.1rem/1 'Luckiest Guy', sans-serif; color: var(--laranja); -webkit-text-stroke: 1.5px var(--marrom); }
.time-eles strong { color: var(--azul); }
.info-mao { display: flex; gap: 6px; align-items: center; background: var(--creme); border: 3px solid var(--marrom); border-radius: 14px;
  padding: 4px 8px; position: relative; }
.info-mao[data-queda]::after { content: attr(data-queda); position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  font-size: .65rem; font-weight: 800; background: var(--marrom); color: var(--creme); padding: 0 6px; border-radius: 6px; white-space: nowrap; }
.info-mao > div { display: flex; flex-direction: column; align-items: center; }
.mini-rotulo { font-size: .62rem; font-weight: 800; text-transform: uppercase; color: var(--marrom-suave); }
.valor-box strong, .manilha-box strong { font: 400 1.6rem/1 'Luckiest Guy', sans-serif; }
.especial { font-size: .62rem; font-weight: 800; color: #fff; background: var(--vermelho); border-radius: 6px; padding: 0 4px; white-space: nowrap; }
.rodadas { display: flex; justify-content: center; gap: 14px; font-size: 1.1rem; font-weight: 800; }

.feltro {
  position: relative; display: grid; grid-template-columns: 1fr 1.5fr 1fr; grid-template-rows: auto 1fr auto; gap: 4px;
  min-height: 300px; padding: 8px; border-radius: 36px;
  background: radial-gradient(ellipse at center, #2aa37f 0%, #177257 75%); border: 8px solid #c58b4a;
  box-shadow: inset 0 0 0 3px rgba(59, 36, 18, .35), inset 0 0 40px rgba(0, 0, 0, .25), var(--sombra-dura);
}
.lugar { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.lugar[data-rel="2"] { grid-column: 2; grid-row: 1; }
.lugar[data-rel="3"] { grid-column: 1; grid-row: 2; align-self: center; }
.lugar[data-rel="1"] { grid-column: 3; grid-row: 2; align-self: center; }
.lugar[data-rel="0"] { grid-column: 2; grid-row: 3; }
.lugar-info { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lugar .avatar { --tam: 44px; transition: box-shadow .2s; }
.lugar.nos .avatar { border-color: var(--laranja-escuro); }
.lugar.agindo .avatar { box-shadow: 0 0 0 4px var(--laranja-2), 0 0 18px var(--laranja-2); animation: pulsar 1.2s ease-in-out infinite; }
.lugar.offline .avatar { filter: grayscale(1); }
.av-3.avatar { transform: scaleX(-1); }
.lugar-nome { font-size: .78rem; font-weight: 800; color: var(--creme); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); max-width: 110px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartas-costas { display: flex; }
.cartas-costas .carta { margin-left: -14px; }
.cartas-costas .carta:first-child { margin-left: 0; }

.centro-mesa { grid-column: 2; grid-row: 2; position: relative; min-height: 150px; }
.centro-mesa .carta { position: absolute; left: 50%; top: 50%; animation: jogar-carta .25s ease-out; }
.centro-mesa .pos-0 { transform: translate(-50%, -8%) rotate(-2deg); }
.centro-mesa .pos-2 { transform: translate(-50%, -92%) rotate(3deg); }
.centro-mesa .pos-1 { transform: translate(-2%, -50%) rotate(6deg); }
.centro-mesa .pos-3 { transform: translate(-98%, -50%) rotate(-6deg); }
.centro-mesa .vencedora { box-shadow: 0 0 0 4px var(--laranja-2), 0 0 20px var(--laranja-2); z-index: 2; }
@keyframes jogar-carta { from { opacity: 0; scale: 1.3; } }

.log { margin: 0; text-align: center; font-weight: 800; min-height: 1.4em; font-size: .95rem; }

/* ---------- Cartas ---------- */
.carta {
  --w: 62px; width: var(--w); height: calc(var(--w) * 1.42); border-radius: 9px; background: #fffdf6; border: 2px solid var(--marrom);
  position: relative; color: #1d1d1d; box-shadow: 2px 3px 0 rgba(59, 36, 18, .55); font-family: 'Nunito', sans-serif; padding: 0; flex: none;
}
.carta .canto { position: absolute; top: 3px; left: 5px; font-weight: 800; font-size: calc(var(--w) * .27); line-height: 1; }
.carta .meio { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--w) * .55); padding-top: 12%; }
.carta.vermelha { color: var(--vermelho); }
.carta.manilha { border-color: #b8860b; box-shadow: 0 0 0 2px var(--laranja-2), 2px 3px 0 rgba(59, 36, 18, .55); background: linear-gradient(160deg, #fffdf6 60%, #fff0c2); }
.carta .estrela { position: absolute; right: 4px; bottom: 2px; color: #d99a00; font-size: calc(var(--w) * .26); }
.carta.verso { background: repeating-linear-gradient(45deg, var(--laranja) 0 6px, var(--laranja-2) 6px 12px); display: grid; place-items: center; }
.carta.verso span { font-size: calc(var(--w) * .45); filter: drop-shadow(0 1px 0 var(--marrom)); }
.carta.pequena { --w: 30px; border-width: 1.5px; border-radius: 5px; box-shadow: 1px 1px 0 rgba(59, 36, 18, .5); }
.carta.pequena .canto { top: 1px; left: 3px; }
.vira-box .carta.pequena { --w: 34px; }

.minha-mao { display: flex; justify-content: center; gap: 10px; min-height: 124px; align-items: flex-end; padding-top: 6px; }
.minha-mao .carta { --w: 82px; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.minha-mao.minha-vez .carta:not(:disabled):hover, .minha-mao.minha-vez .carta:not(:disabled):focus-visible { transform: translateY(-12px); }
.minha-mao.minha-vez .carta:not(:disabled) { box-shadow: 0 0 0 3px var(--laranja-2), 3px 4px 0 var(--marrom); }
.minha-mao .carta:disabled { cursor: default; filter: saturate(.85); }
.mao-parceiro { display: flex; gap: 6px; justify-content: center; margin: 6px 0; }
.mao-parceiro .carta.pequena { --w: 46px; }

.acoes-jogo { display: grid; gap: 6px; }
.linha-acoes { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; min-height: 10px; }
.btn-truco { background: linear-gradient(180deg, #ff6b6b, var(--vermelho)); color: #fff; font-size: 1.5rem; padding: 10px 26px;
  -webkit-text-stroke: 1px var(--marrom); text-shadow: 2px 2px 0 var(--marrom); touch-action: none; user-select: none; -webkit-user-select: none; }
[data-grito] { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.encoberta { background: var(--creme); border: 2px solid var(--marrom); border-radius: 12px; padding: 6px 10px; }
.resposta { background: var(--creme); border: 3px solid var(--vermelho); border-radius: 16px; padding: 10px; text-align: center; box-shadow: var(--sombra-dura);
  animation: tremer .4s; }
.resposta p { margin: 0 0 8px; font-weight: 800; }
.resposta .acoes .btn { flex: 1 1 90px; }
.dica-grito { margin: 0; text-align: center; font-size: .8rem; color: var(--marrom-suave); }
.painel-onze { background: var(--creme); border: 3px solid var(--laranja-escuro); border-radius: 16px; padding: 10px; text-align: center; }
.painel-onze p { margin: 0; }
@keyframes tremer { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.barra-tempo { position: fixed; left: 0; right: 0; bottom: 0; height: 8px; background: rgba(59, 36, 18, .25); z-index: 8; }
.barra-tempo i { display: block; height: 100%; width: 100%; background: var(--azul); transition: width .2s linear; }
.barra-tempo.minha i { background: var(--laranja); }
.barra-tempo.urgente i { background: var(--vermelho); }

/* Balões em cima das cadeiras */
.bolha { position: absolute; bottom: calc(100% - 6px); left: 50%; transform: translateX(-50%); z-index: 5; max-width: 150px; width: max-content;
  background: #fff; border: 2px solid var(--marrom); border-radius: 12px; padding: 4px 8px; font-size: .78rem; font-weight: 800;
  box-shadow: 2px 2px 0 var(--marrom); animation: aparecer .2s ease-out; }
.bolha.secreta { background: #1f1f1f; color: #fff; }
.lugar[data-rel="2"] .bolha { bottom: auto; top: calc(100% - 4px); }
@keyframes aparecer { from { opacity: 0; transform: translateX(-50%) scale(.6); } }

/* ---------- Grito ---------- */
.grito { background: radial-gradient(circle, rgba(255, 201, 74, .55), rgba(59, 36, 18, .6)); pointer-events: none; }
.grito-caixa { text-align: center; display: flex; flex-direction: column; align-items: center; }
.grito-caixa span { font-weight: 800; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); font-size: 1.2rem; }
.grito-caixa strong { font: 400 clamp(4rem, 22vw, 9rem)/1 'Luckiest Guy', sans-serif; color: var(--laranja-2); -webkit-text-stroke: 3px var(--marrom);
  text-shadow: 6px 7px 0 var(--marrom); }
.grito.anima strong { animation: grito .7s cubic-bezier(.2, 1.6, .4, 1); }
.grito-audio { font-size: 2rem !important; animation: pulsar .6s infinite; }
@keyframes grito { 0% { transform: scale(.2) rotate(-12deg); } 60% { transform: scale(1.15) rotate(4deg); } 80% { transform: rotate(-3deg); } }

.gravando { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 35; background: var(--vermelho); color: #fff;
  border: 3px solid var(--marrom); border-radius: 999px; padding: 10px 18px; font-weight: 800; box-shadow: var(--sombra-dura); white-space: nowrap; }
.gravando small { opacity: .85; margin-left: 4px; }
.gravando .ponto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #fff; margin-right: 6px; animation: pulsar .8s infinite; }

/* ---------- Sinais ---------- */
.sinais { position: fixed; left: 50%; bottom: 140px; transform: translateX(-50%); z-index: 25; width: min(420px, calc(100vw - 24px));
  background: #1f1f1f; color: #fff; border: 3px solid var(--marrom); border-radius: 18px; padding: 12px; box-shadow: var(--sombra-dura); }
.sinais p { margin: 0 0 8px; font-weight: 800; }
.grade-sinais { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.grade-sinais button { font: 800 .9rem 'Nunito', sans-serif; background: #333; color: #fff; border: 2px solid #555; border-radius: 10px; padding: 8px; cursor: pointer; }
.grade-sinais button:hover { background: #444; }

/* ---------- Menu ---------- */
.menu-flutuante { position: fixed; top: 60px; right: 12px; z-index: 40; width: min(300px, calc(100vw - 24px)); display: grid; gap: 10px;
  background: var(--creme); border: 3px solid var(--marrom); border-radius: 16px; padding: 12px; box-shadow: var(--sombra-dura); }
.campo-volume input { width: 100%; accent-color: var(--laranja-escuro); }

/* ---------- Bate-papo ---------- */
.papo { position: fixed; z-index: 28; right: 0; bottom: 0; width: min(380px, 100vw); height: min(75vh, 620px); display: flex; flex-direction: column;
  background: var(--creme); border: 3px solid var(--marrom); border-radius: 20px 20px 0 0; box-shadow: 0 -4px 0 rgba(59, 36, 18, .3); }
.papo-topo { display: flex; gap: 8px; align-items: center; padding: 8px; border-bottom: 2px solid var(--marrom); }
.papo-abas { flex: 1; margin: 0; }
.papo-lista { list-style: none; margin: 0; padding: 10px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.papo-vazio { color: var(--marrom-suave); text-align: center; margin: auto; padding: 20px; }
.msg { background: #fff; border: 2px solid var(--marrom); border-radius: 14px 14px 14px 4px; padding: 6px 10px; max-width: 85%; align-self: flex-start; }
.msg.minha { align-self: flex-end; background: #ffe6b3; border-radius: 14px 14px 4px 14px; }
.msg.msg-grito { background: #ffd4d4; }
.msg-topo { display: flex; gap: 8px; align-items: center; font-size: .78rem; }
.msg-topo span { color: var(--marrom-suave); }
.msg p { margin: 2px 0 0; overflow-wrap: anywhere; }
.msg-mais { margin-left: auto; background: none; border: 0; font-weight: 800; cursor: pointer; color: var(--marrom-suave); padding: 0 4px; }
.msg-audio { margin-top: 4px; font: 800 .85rem 'Nunito', sans-serif; border: 2px solid var(--marrom); border-radius: 999px; background: var(--ceu-2);
  padding: 3px 10px; cursor: pointer; }
.msg-opcoes { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.msg-opcoes button { font: 700 .8rem 'Nunito', sans-serif; border: 1.5px solid var(--marrom); border-radius: 8px; background: var(--creme); padding: 3px 8px; cursor: pointer; }
.frases { display: flex; gap: 6px; overflow-x: auto; padding: 6px 8px; border-top: 1px dashed rgba(59, 36, 18, .3); scrollbar-width: none; }
.frase { flex: none; font: 700 .82rem 'Nunito', sans-serif; border: 2px solid var(--marrom); border-radius: 999px; background: var(--ceu-2);
  padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.papo-form { display: flex; gap: 6px; padding: 8px; border-top: 2px solid var(--marrom); }
.papo-form input { flex: 1; min-width: 0; }
#papo-mic { touch-action: none; user-select: none; -webkit-user-select: none; }

/* ---------- Fim ---------- */
.fim { display: grid; gap: 10px; justify-items: center; }
.fim h2 { font-size: 1.8rem; margin: 0; }
.acoes.col { flex-direction: column; width: 100%; }

@media (min-width: 900px) {
  .papo { top: 70px; bottom: 12px; right: 12px; height: auto; border-radius: 20px; }
}
@media (max-width: 380px) {
  .minha-mao .carta { --w: 72px; }
  .carta { --w: 54px; }
  .btn-truco { font-size: 1.3rem; padding: 8px 18px; }
}

/* ---------- Par ou ímpar ---------- */
.titulo-pi { margin: 0; font-size: clamp(2.2rem, 11vw, 3.2rem); color: var(--laranja); -webkit-text-stroke: 1.5px var(--marrom);
  text-shadow: 3px 3px 0 var(--marrom); }
.pi-relogio { margin: 2px 0 0; font-weight: 800; }
.pi-botoes { justify-content: center; }
.btn-pi { flex: 1 1 120px; font-size: 1.6rem; padding: 14px 10px; }
.pi-cartas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; justify-items: center; margin-top: 8px; }
.pi-cartas .carta { --w: min(58px, 15vw); cursor: pointer; transition: transform .15s; }
.pi-cartas .carta:not(:disabled):hover, .pi-cartas .carta:not(:disabled):focus-visible { transform: translateY(-6px); }
.pi-cartas .carta:disabled { cursor: default; opacity: .45; }
.pi-cartas .carta.escolhida { opacity: 1; box-shadow: 0 0 0 4px var(--laranja-2), 0 0 16px var(--laranja-2); transform: translateY(-6px); }
.pi-jogadores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.pi-jogador { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--creme); border: 3px solid var(--marrom);
  border-radius: 14px; padding: 10px 6px; text-align: center; min-width: 0; }
.pi-jogador.nos { background: #ffe6b3; }
.pi-jogador strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-jogador.primeiro { box-shadow: 0 0 0 4px var(--laranja-2), var(--sombra-dura); }
.pi-status { font-size: .85rem; font-weight: 800; color: var(--marrom-suave); min-height: 44px; display: grid; place-items: center; }
.pi-status .carta.pequena { --w: 32px; animation: jogar-carta .35s ease-out; }
.pi-resultado { animation: aparecer-caixa .35s ease-out; }
.pi-conta { font: 800 1.3rem 'Nunito', sans-serif; margin: 0; }
.pi-tipo { display: block; font: 400 clamp(3rem, 16vw, 4.6rem)/1.05 'Luckiest Guy', sans-serif; color: var(--laranja-2);
  -webkit-text-stroke: 2px var(--marrom); text-shadow: 4px 5px 0 var(--marrom); }
@keyframes aparecer-caixa { from { opacity: 0; transform: scale(.85); } }

/* ---------- Macacada (lista de jogadores) e convites no app ---------- */
.lista-jogadores { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.jogador { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: #fff;
  border: 2px solid var(--marrom); border-radius: 14px; padding: 8px 10px; }
.jogador.st-off { background: var(--creme-2); }
.jogador.st-off .jogador-avatar { filter: grayscale(.7); opacity: .75; }
.jogador-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 400 1.05rem 'Luckiest Guy', sans-serif;
  border: 2px solid var(--marrom); position: relative; text-shadow: 1px 1px 0 var(--marrom); }
.jogador.st-on .jogador-avatar::after, .jogador.st-mesa .jogador-avatar::after, .jogador.st-jogando .jogador-avatar::after {
  content: ''; position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; background: #22c55e; }
.jogador.st-mesa .jogador-avatar::after { background: var(--laranja); }
.jogador.st-jogando .jogador-avatar::after { background: var(--azul); }
.jogador-info { min-width: 0; display: flex; flex-direction: column; }
.jogador-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jogador-info span { font-size: .8rem; color: var(--marrom-suave); font-weight: 700; }
.jogador-info .jogador-extra { color: var(--laranja-escuro); }
.jogador-acoes { display: flex; gap: 6px; }
.painel-chamar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px dashed rgba(59, 36, 18, .3); }
.painel-chamar > p { width: 100%; margin: 0; font-weight: 800; }
.painel-chamar > p.nota { font-weight: 400; }
.painel-chamar.grade { display: grid; grid-template-columns: 1fr 1fr; }
.painel-chamar .btn { flex: 1 1 auto; }
.busca-jogadores { font: inherit; width: 100%; padding: 9px 12px; border-radius: 12px; border: 2px solid var(--marrom); background: #fff; margin-top: 6px; }
.resumo-online { margin: 6px 0 0; font-weight: 800; }
.macacada { display: grid; gap: 4px; }
.convite-app { text-align: center; }
.convite-app .convite-cartas { font-size: 2.6rem; animation: balancar 1.2s ease-in-out infinite; }
.convite-app h2 { margin: 4px 0 8px; font-size: 1.6rem; }
.convite-app .acoes { justify-content: center; margin-top: 10px; }
.convite-app .acoes .btn { flex: 1 1 120px; }