/* Trambique Poker: salão clandestino, anos 70.
   Tudo o que é mesa mora no #palco (1920×1080, coordenadas da foto). O painel do humano (#hud) mora na tela. */

:root {
  /* metais */
  --ouro: #c9a14a;
  --ouro-claro: #f2d58c;
  --ouro-escuro: #4a3010;       /* letra gravada na plaquinha */
  --latao: linear-gradient(160deg, #f4dc97 0%, #c79a45 28%, #8c6220 52%, #d9b260 74%, #9b7028 100%);
  --latao-liso: linear-gradient(180deg, #e9c97a 0%, #b8892f 48%, #8a6320 54%, #d4ac58 100%);
  /* esmaltes */
  --vinho: #6e1423;
  --vinho-claro: #a3263a;
  --vinho-fundo: #2a0a10;
  --verde: #24563b;
  --verde-claro: #3b8a5f;
  --fumo: #2d2420;
  --rubi: #b0122a;
  /* papel e tinta */
  --creme: #f1e4c6;
  --papel: #efe0bd;
  --tinta: #21170f;
  --naipe-vermelho: #a3192a;
  --carimbo: #a8161f;
  --ambar: #f0a83c;
  --noite: #140708;

  --f-titulo: 'Fraunces', 'Georgia', serif;
  --f-texto: 'Alegreya Sans', 'Segoe UI', sans-serif;

  --ruido: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .22  0 0 0 0 .1  0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --sombra-peca: 0 2px 3px rgba(0, 0, 0, .45), 0 10px 22px rgba(0, 0, 0, .4);
  --s: 1;           /* escala do palco, escrita pelo tela.js */
  --hf: 16px;       /* tamanho de letra do painel, escrito pelo tela.js */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--noite); color: var(--creme); }
body { font-family: var(--f-texto); -webkit-font-smoothing: antialiased; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--ouro-claro); outline-offset: 3px; }
img { -webkit-user-drag: none; user-select: none; }

/* ---------- fundo: a mesma foto, desfocada e escura, nas sobras ---------- */
#fundo {
  position: fixed; inset: -60px;
  background: url(../assets/cenario/mesa9.webp) center / cover no-repeat;
  filter: blur(28px) brightness(.38) saturate(1.15);
}

.tela { position: fixed; inset: 0; display: none; }
.tela.ativa { display: block; }

/* ---------- moldura de latão (porta-retrato) ---------- */
.quadro {
  position: absolute; width: var(--qw, 170px); aspect-ratio: 596 / 800;
  container-type: inline-size;
}
.quadro .q-fundo { position: absolute; inset: 5% 4% 4%; background: #120806; border-radius: 3%; }
.quadro .q-foto { position: absolute; inset: 13% 18%; overflow: hidden; background: #0d0606; }
.quadro .q-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  opacity: 0; transition: filter .4s;
}
.quadro .q-foto img.on { opacity: 1; }
.quadro .q-foto::after { /* vidro e luz quente vindo de cima */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(170deg, rgba(255, 220, 160, .14), transparent 35%, rgba(20, 5, 0, .35));
}
.quadro .q-moldura { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 .8cqw 1.4cqw rgba(0, 0, 0, .7)); }
.plaquinha {
  position: absolute; left: 50%; top: 92.6%; transform: translate(-50%, -50%);
  font: 650 max(5.6cqw, var(--min-plaq, 11px)) / 1 var(--f-titulo);
  font-variation-settings: 'opsz' 14, 'SOFT' 30;
  height: 1.95em; line-height: 1.95em; min-width: 37cqw; padding: 0 .1em; white-space: nowrap; text-align: center;
  border-style: solid; border-width: 0 1.45em;
  border-image: var(--plaq, linear-gradient(#d9b260, #8a6320)) 0 48 fill / 0 1.45em stretch;
  color: var(--ouro-escuro);
  text-shadow: 0 1px 0 rgba(255, 238, 190, .6), 0 -1px 0 rgba(40, 20, 0, .45);
  letter-spacing: .01em;
}

/* ---------- letreiro (o balão do Bené) ---------- */
.letreiro {
  position: relative; margin: 0; padding: .55em 1.1em .62em;
  font: italic 800 1em / 1.08 var(--f-titulo); font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1;
  color: #fff3d6; text-wrap: balance;
  text-shadow: 0 0 .35em rgba(255, 190, 90, .55), 0 2px 0 rgba(60, 0, 10, .8);
  background:
    radial-gradient(120% 140% at 50% 0%, #a3263a 0%, #6e1423 55%, #3d0912 100%) padding-box,
    var(--latao) border-box;
  border: .22em solid transparent; border-radius: .5em;
  box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .6), inset 0 0 0 .12em rgba(0, 0, 0, .35), inset 0 .2em .5em rgba(255, 200, 160, .18);
}
.letreiro::before, .letreiro::after { /* lâmpadas do letreiro, piscando em corrida */
  content: ''; position: absolute; inset: .2em; border-radius: .35em; pointer-events: none;
  border: .2em dotted #ffd98c; opacity: .9;
  filter: drop-shadow(0 0 .18em #ffb340);
}
.letreiro::after { inset: .2em; transform: translate(.2em, 0); border-color: #fff1c9; animation: lampadas 1.1s steps(2) infinite; opacity: 0; }
@keyframes lampadas { 50% { opacity: .85; } }
.letreiro .ponta { /* plaquinha de latão que prende o letreiro do lado do Bené */
  position: absolute; left: -1.05em; top: 50%; width: 1em; height: .8em; transform: translateY(-50%);
  background: var(--latao-liso); clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

/* ======================================================================
   ENTRADA
   ====================================================================== */
.escolha {
  position: absolute; inset: 0; padding: 2vh 3vw 2.5vh;
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto 1fr auto; align-items: center; justify-items: center;
}
.marca { grid-area: 1 / 2; margin: 0; line-height: 0; }
.marca img { height: min(31vh, 26vw); width: auto; filter: drop-shadow(0 1.2vh 2vh rgba(0, 0, 0, .7)); }
.escolha-bene { grid-area: 1 / 1; justify-self: start; display: flex; align-items: center; gap: 1.6vw; padding-left: 1vw; }
.escolha-bene .quadro { position: relative; --qw: min(11.5vw, 22vh); flex: none; }
.letreiro-escolha { font-size: clamp(13px, 2.3vh, 24px); max-width: min(16em, 22vw); }
.grade { grid-area: 2 / 1 / 3 / 4; display: flex; gap: 2.6vw; align-items: flex-start; justify-content: center; }
.cartao {
  background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: .6vh;
  border-radius: 1vh;
}
.cartao .quadro { position: relative; --qw: min(17vw, 33vh); --min-plaq: 11px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.cartao .q-moldura { transition: filter .35s; }
.cartao:hover .quadro, .cartao:focus-visible .quadro { transform: translateY(-1vh) scale(1.03); }
.cartao:hover .q-moldura, .cartao:focus-visible .q-moldura {
  filter: drop-shadow(0 0 1.6vh rgba(255, 196, 100, .85)) brightness(1.18) saturate(1.1);
}
.cartao:focus-visible { outline: none; }
.cartao .classe {
  font: italic 700 clamp(12px, 2.1vh, 20px) / 1.1 var(--f-titulo); font-variation-settings: 'SOFT' 100, 'WONK' 1;
  color: var(--ambar); text-shadow: 0 2px 4px #000;
}
.legenda {
  grid-area: 3 / 1 / 4 / 4; margin: 0; max-width: 62ch; min-height: 2.6em; text-align: center;
  font: 400 clamp(13px, 2.2vh, 19px) / 1.35 var(--f-texto); color: #e9dcc0; text-shadow: 0 1px 3px #000;
}
.legenda b { font-family: var(--f-titulo); color: var(--ouro-claro); font-weight: 700; }

/* ======================================================================
   MESA
   ====================================================================== */
#palco {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden;
  transform-origin: 0 0; background: #160a07;
  --min-plaq: calc(11.5px / var(--s));
  --min-txt: calc(12px / var(--s));
}
.foto-mesa { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; object-fit: cover; object-position: top; }
/* camadas no palco: salão < sentados (1) < borda da mesa (2) < fumaça e vinheta (3) < Bené (4) < placas, cartas e fichas (5+) */
.frente-mesa { position: absolute; left: 283px; top: 568px; width: 1359px; height: 505px; z-index: 2; pointer-events: none; }
.fumaca, .vinheta { z-index: 3; }
.pote, .comunitarias, .espiada { z-index: 5; }
.brilho {
  position: absolute; left: 560px; top: 150px; width: 800px; height: 720px; pointer-events: none;
  background: radial-gradient(ellipse 48% 42% at 50% 22%, rgba(255, 206, 128, .32), rgba(255, 170, 80, .1) 55%, transparent 75%);
  mix-blend-mode: screen; animation: tremula 7s ease-in-out infinite;
}
@keyframes tremula { 0%, 100% { opacity: 1; } 45% { opacity: .82; } 52% { opacity: .95; } }
.fumaca { position: absolute; inset: 0; pointer-events: none; opacity: .55; }
.fumaca i {
  position: absolute; width: 1500px; height: 760px; left: 200px; top: 60px; border-radius: 50%; will-change: transform;
  background:
    radial-gradient(closest-side at 30% 45%, rgba(225, 205, 180, .16), transparent),
    radial-gradient(closest-side at 70% 60%, rgba(225, 205, 180, .11), transparent);
  animation: deriva 46s ease-in-out infinite alternate;
}
.fumaca i + i { left: -300px; top: 160px; animation-duration: 63s; animation-direction: alternate-reverse; opacity: .8; }
@keyframes deriva { from { transform: translate3d(-120px, 20px, 0) scale(1); } to { transform: translate3d(180px, -50px, 0) scale(1.15); } }
.vinheta {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 70% at 50% 56%, transparent 55%, rgba(12, 3, 2, .62) 100%),
    linear-gradient(180deg, rgba(10, 2, 2, .35), transparent 22%);
}

/* Bené, de frente, no lugar 1 (posição no tela.js); o letreiro sai acima da cabeça dele */
.bene { position: absolute; pointer-events: none; filter: brightness(.86) sepia(.12) drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); }
.letreiro-caixa { position: absolute; left: 0; right: 0; top: 230px; z-index: 8; display: flex; justify-content: center; pointer-events: none; }
.letreiro-mesa {
  position: relative; max-width: 560px; text-align: center;
  font-size: max(34px, calc(12.5px / var(--s))); transform-origin: 50% 100%; opacity: 0;
}
.letreiro-mesa .ponta { left: 50%; top: auto; bottom: -.95em; transform: translateX(-50%) rotate(-90deg); }

/* ---------- lugares: personagem sentado atrás da borda da mesa, placa acima da cabeça; o seu é só a placa, embaixo ---------- */
.lugar { position: absolute; inset: 0; pointer-events: none; } /* sem z-index: os filhos se intercalam com a borda da mesa */
.lugar > * { position: absolute; }
.sentado { z-index: 1; transform: translateX(-50%); aspect-ratio: 1; /* largo o bastante para a máscara não cortar braço */ transition: filter .4s;
  /* luz quente do lustre e sombra de contato com a cadeira */
  filter: brightness(.9) sepia(.12) saturate(1.04) drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }
/* a base de cada recorte some aos poucos: onde a borda da mesa não cobre (cadeiras 4 e 7), não aparece o corte reto */
/* só a borda do recorte some, e só nas cadeiras 4 e 7 (a borda da mesa não cobre ali). Máscara mais alta deixava o corpo translúcido. */
.lugar[data-assento="4"] .sentado, .lugar[data-assento="7"] .sentado { -webkit-mask-image: linear-gradient(#000 93%, transparent); mask-image: linear-gradient(#000 93%, transparent); }
.sentado img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); opacity: 0; }
.sentado img.on { opacity: 1; }
.sentado.espelho img { transform: translateX(-50%) scaleX(-1); }
.lugar[data-assento="2"] .sentado, .lugar[data-assento="9"] .sentado { filter: brightness(.82) sepia(.14) drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); }
/* as cadeiras da ponta ficam sob a vinheta: um pouco mais de luz para não sumirem no escuro */
.lugar[data-assento="5"] .sentado, .lugar[data-assento="6"] .sentado { filter: brightness(1.12) sepia(.1) saturate(1.05) drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }
.lugar.vez .sentado { filter: brightness(1) sepia(.1) drop-shadow(0 0 16px rgba(255, 190, 90, .75)); }
.lugar.vencedor .sentado { filter: brightness(1.08) sepia(.08) drop-shadow(0 0 26px rgba(255, 220, 130, .9)); }
.lugar.desistiu .sentado, .lugar.fora .sentado { filter: brightness(.62) contrast(1.12) saturate(.75) drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); }
.lugar.desistiu .cartas-lugar { opacity: .35; }
.lugar.fora .cartas-lugar, .lugar.fora .placa-fichas { opacity: 0; }

.placa-lugar {
  z-index: 6; pointer-events: auto; transform: translate(-50%, -100%); transform-origin: 50% 100%;
  display: flex; align-items: center; gap: .35em; white-space: nowrap; transition: transform .2s;
  font-size: max(24px, calc(10.5px / var(--s))); padding: .18em .8em .18em .2em; border-radius: 2em;
  background: linear-gradient(180deg, rgba(40, 14, 10, .9), rgba(18, 6, 5, .9)) padding-box, var(--latao) border-box;
  border: .09em solid transparent; box-shadow: 0 .2em .5em rgba(0, 0, 0, .6);
}
#palco.cheia .placa-lugar { font-size: max(21px, calc(9.5px / var(--s))); }
.lugar.eu .placa-lugar, #palco.cheia .lugar.eu .placa-lugar { font-size: max(34px, calc(13px / var(--s))); transform: translate(-50%, -50%); transform-origin: 50% 50%; padding-right: 1em; }
.lugar.eu .placa-lugar.ampliada { transform: translate(-50%, -50%) scale(1.25); }
.lugar.eu .medalhao-mesa { width: 2.5em; }
.placa-lugar.ampliada { transform: translate(-50%, -100%) scale(1.6); z-index: 9; }
.lugar.vez .placa-lugar { box-shadow: 0 0 .8em rgba(255, 190, 90, .85), 0 .2em .5em rgba(0, 0, 0, .6); animation: halo 1.6s ease-in-out infinite; }
@keyframes halo { 50% { box-shadow: 0 0 .3em rgba(255, 190, 90, .4), 0 .2em .5em rgba(0, 0, 0, .6); } }
.placa-texto { display: flex; flex-direction: column; line-height: 1.05; }
.placa-nome { font: 700 .82em var(--f-titulo); color: var(--creme); max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.placa-fichas { font: 800 .9em var(--f-titulo); color: var(--ouro-claro); }
.placa-fichas::before { content: ''; display: inline-block; width: .85em; height: .85em; margin-right: .25em; vertical-align: -.1em; background: url(../assets/pecas/ficha-ambar.webp) center / contain no-repeat; }

.pensando {
  position: absolute; left: 50%; top: -.3em; transform: translate(-50%, -100%); white-space: nowrap; opacity: 0;
  font: italic 600 .8em / 1 var(--f-titulo); color: var(--ouro-claro); text-shadow: 0 2px 6px #000;
  transition: opacity .25s; pointer-events: none;
}
.lugar.a-pensar .pensando { opacity: 1; }
.pensando::after { content: '...'; display: inline-block; width: 1em; text-align: left; animation: reticencias 1.2s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes reticencias { from { width: 0; } to { width: 1em; } }

.mudo {
  position: relative; width: 1.25em; aspect-ratio: 1; border-radius: 50%; padding: 0; display: grid; place-items: center; flex: none;
  border: 0; background: var(--latao-liso); color: #3a2208; box-shadow: 0 2px 5px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.mudo svg { width: 62%; height: 62%; display: block; }
.mudo[aria-pressed="true"] { background: linear-gradient(#7a1a28, #3d0912); color: var(--creme); }
.mudo[aria-pressed="true"] .onda { display: none; }

/* selos: carimbo de tinta e etiqueta de papel, logo abaixo da placa */
.selos { position: absolute; left: 50%; top: 100%; transform: translate(-50%, .25em); display: flex; flex-direction: column; align-items: center; gap: .3em; pointer-events: none; font-size: .78em; }
.selo {
  font: 800 1em / 1 var(--f-titulo); font-variation-settings: 'opsz' 30; white-space: nowrap;
  color: var(--carimbo); border: .14em double currentColor; padding: .22em .45em .18em; border-radius: .15em;
  transform: rotate(-9deg); mix-blend-mode: multiply; background: rgba(236, 222, 190, .82);
  -webkit-mask: var(--ruido), linear-gradient(#000, #000); -webkit-mask-composite: source-over;
  box-shadow: 0 0 0 .05em rgba(168, 22, 31, .25);
}
.selo.desistiu { color: #2c3a5a; background: rgba(230, 220, 196, .78); transform: rotate(7deg); }
.selo.allin { color: #8a1020; font-size: 1.25em; transform: rotate(-12deg); border-width: .16em; }
.selo.fora { color: #2a2a2a; }
.selo.caloteiro { font-size: 1.2em; transform: rotate(-14deg); }
.selo.devendo { /* etiqueta de papel amarrada com barbante */
  mix-blend-mode: normal; color: var(--tinta); border: 0; background: var(--papel) var(--ruido); border-radius: .1em .5em .5em .1em;
  font: 700 .82em / 1.1 var(--f-texto); padding: .3em .6em .3em .9em; transform: rotate(4deg);
  box-shadow: 0 .15em .4em rgba(0, 0, 0, .55); -webkit-mask: none;
}
.selo.devendo::before { content: ''; display: inline-block; width: .35em; height: .35em; border-radius: 50%; background: #4d3a28; margin: 0 .4em .05em -.5em; }

.dealer {
  z-index: 5; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; transform: translate(-50%, -50%);
  font: 900 22px / 1 var(--f-titulo); color: #3a2208; background: radial-gradient(circle at 35% 30%, #fbe7ae, #c99a45 55%, #7c561b);
  box-shadow: 0 3px 0 #5d3f12, 0 6px 10px rgba(0, 0, 0, .6);
}
.cartas-lugar { z-index: 5; transform: translate(-50%, -50%); }
.cartas-lugar.minhas { z-index: 7; transform: translate(-50%, -50%) rotate(-3deg); }
.aposta { z-index: 5; }

/* pilhas de fichas sobre o feltro */
.pilha-fichas { display: flex; align-items: flex-end; gap: 2px; --fw: 58px; }
.pilha-fichas .col { position: relative; width: var(--fw); }
.pilha-fichas img {
  position: absolute; left: 0; width: var(--fw); height: calc(var(--fw) * .6);
  filter: brightness(var(--b, 1));
}
.pilha-fichas .col::after { /* sombra de contato no feltro */
  content: ''; position: absolute; left: -10%; right: -10%; bottom: -6%; height: calc(var(--fw) * .5);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); z-index: -1;
}
.aposta { transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.aposta .valor {
  font: 700 max(19px, calc(11px / var(--s))) / 1 var(--f-titulo); color: var(--creme); text-shadow: 0 2px 4px #000, 0 0 6px #000;
}

/* ---------- cartas ---------- */
.cartas-lugar { display: flex; perspective: 900px; }
.carta {
  position: relative; width: var(--cw, 100px); aspect-ratio: 5 / 7; flex: none;
  border-radius: calc(var(--cw, 100px) * .075); transform-style: preserve-3d;
}
.carta > div { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.c-verso { background: url(../assets/pecas/verso.webp) center / 100% 100%; transform: rotateY(180deg); box-shadow: var(--sombra-peca); }
.carta.so-verso .c-verso { transform: none; }
.c-frente {
  --c: var(--tinta); color: var(--c); overflow: hidden;
  background: var(--ruido), radial-gradient(ellipse at 40% 30%, #f8eed6, var(--papel) 60%, #e3cfa3);
  box-shadow: var(--sombra-peca), inset 0 0 0 1px rgba(90, 60, 20, .35), inset 0 0 calc(var(--cw) * .06) rgba(120, 80, 30, .25);
}
.c-frente.vermelha { --c: var(--naipe-vermelho); }
.c-frente.c-foto { background: center / 100% 100% no-repeat; }
.c-frente.c-foto::before { content: none; }
.c-frente::before { /* filete art déco por dentro da borda */
  content: ''; position: absolute; inset: 4.5%; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: calc(var(--cw) * .04);
}
.c-frente svg { fill: currentColor; display: block; }
.idx { position: absolute; left: 6%; top: 4%; display: flex; flex-direction: column; align-items: center; width: 24%; }
.idx b { font: 760 calc(var(--cw) * .27) / .92 var(--f-titulo); font-variation-settings: 'opsz' 36, 'SOFT' 50; letter-spacing: -.04em; }
.idx svg { width: 70%; aspect-ratio: 1; margin-top: 4%; }
.idx.fim { left: auto; top: auto; right: 6%; bottom: 4%; transform: rotate(180deg); }
.c-meio { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.c-meio.as { width: 52%; }
.c-meio.as::after { content: ''; position: absolute; inset: -18%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); box-shadow: inset 0 0 0 3px rgba(201, 161, 74, .4); }
.c-meio svg { width: 100%; height: 100%; }
.carta.revelada .c-frente { box-shadow: 0 0 0 4px var(--ouro-claro), 0 0 30px rgba(255, 200, 100, .8); }

.comunitarias {
  position: absolute; left: 960px; top: 775px; display: flex; gap: 12px; --cw: 100px;
  transform: translate(-50%, -50%) perspective(1500px) rotateX(40deg); transform-style: preserve-3d;
}
.vaga { width: var(--cw); aspect-ratio: 5 / 7; border-radius: 8px; border: 2px solid rgba(240, 230, 200, .09); flex: none; }

/* pote */
.pote { position: absolute; left: 960px; top: 668px; display: flex; align-items: center; gap: 18px; transform: translate(-50%, -50%); }
.pote .pilha-fichas { --fw: 62px; }
.placa-pote {
  display: flex; flex-direction: column; align-items: center; padding: .25em .7em .3em; border-radius: .3em; line-height: 1;
  font: 800 max(28px, calc(12.5px / var(--s))) var(--f-titulo); color: var(--ouro-escuro);
  background: var(--latao-liso); text-shadow: 0 1px 0 rgba(255, 238, 190, .6);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(80, 50, 10, .35), inset 0 0 0 4px rgba(255, 230, 160, .3);
}
.placa-pote span { font: italic 600 .5em var(--f-titulo); letter-spacing: .02em; }

/* espiadinha: a carta é do humano e fica na mão dele */
.espiada { position: absolute; left: 1610px; top: 900px; display: flex; flex-direction: column; align-items: center; --cw: 100px; transform: rotate(4deg); }
.espiada .carta { box-shadow: 0 0 0 4px rgba(242, 213, 140, .9), 0 0 34px rgba(255, 190, 90, .55); border-radius: 8px; }
.etiqueta {
  margin-top: -14px; position: relative; z-index: 2; white-space: nowrap;
  font: italic 700 max(20px, calc(11px / var(--s))) / 1 var(--f-titulo); color: var(--tinta);
  background: var(--papel) var(--ruido); padding: .3em .6em; border-radius: .15em; transform: rotate(-6deg);
  box-shadow: 0 .15em .4em rgba(0, 0, 0, .6);
}

/* falas dos jogadores e voos */
.balao {
  position: absolute; max-width: 360px; padding: .45em .7em; border-radius: .25em; z-index: 8;
  font: italic 500 max(22px, var(--min-txt)) / 1.2 var(--f-texto); color: var(--tinta);
  background: var(--papel) var(--ruido); box-shadow: 0 .2em .6em rgba(0, 0, 0, .6); width: max-content;
}
.voo { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 20; }
.voo.ficha-voo { width: 46px; height: 28px; }
.provocacao-voo { display: flex; flex-direction: column; align-items: center; z-index: 30; }
.provocacao-voo .bezel { width: 150px; height: 150px; border-radius: 50%; padding: 7px; background: var(--latao); box-shadow: 0 8px 20px rgba(0, 0, 0, .6); }
.provocacao-voo img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.provocacao-voo .balao { position: relative; margin-top: -10px; }

/* ======================================================================
   PAINEL DO HUMANO (#hud): em pixels de tela, não do palco
   ====================================================================== */
#hud { position: fixed; left: 0; top: 0; bottom: 0; width: var(--hud-w, 100vw); pointer-events: none; font-size: var(--hf); }
#hud > * { pointer-events: auto; }

#log {
  position: absolute; left: .8em; top: .7em; margin: 0; padding: .5em 1.4em .5em .8em; list-style: none; max-width: 24em;
  font: 400 .88em / 1.32 var(--f-texto); color: #eadcc0; pointer-events: none;
  background: linear-gradient(90deg, rgba(18, 6, 5, .72), rgba(18, 6, 5, .4) 70%, transparent);
  border-left: 2px solid rgba(201, 161, 74, .6);
}
#log li { opacity: .55; text-shadow: 0 1px 2px #000; }
#log li:last-child { opacity: 1; color: #fff4dc; }

#topo-dir { position: absolute; right: .8em; top: .7em; display: flex; align-items: center; gap: .7em; }
#mao-num { font: italic 700 1em var(--f-titulo); font-variation-settings: 'SOFT' 100; color: var(--ouro-claro); text-shadow: 0 2px 4px #000; }
.btn-mini {
  display: inline-flex; align-items: center; gap: .35em; padding: .38em .75em; border-radius: .35em;
  font: 650 .86em / 1.1 var(--f-titulo); font-variation-settings: 'opsz' 14; color: var(--creme);
  background: linear-gradient(180deg, #3a1a14, #1d0b08) padding-box, var(--latao) border-box; border: 1.5px solid transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}
.btn-mini svg { width: 1.1em; height: 1.1em; }
.btn-mini:hover:not(:disabled) { filter: brightness(1.25); }
.btn-mini[aria-pressed="true"] { background: var(--latao-liso) padding-box, var(--latao) border-box; color: #2e1a05; }
.pingo { min-width: 1.4em; padding: .1em .35em; border-radius: 1em; background: var(--rubi); color: #fff; font: 700 .8em var(--f-texto); }

/* placas de esmalte com borda de latão */
.placa {
  --e1: #a3263a; --e2: #5a0f1a;
  position: relative; display: block; width: 100%; padding: .66em 1.6em .7em;
  font: 720 1.12em / 1.05 var(--f-titulo); font-variation-settings: 'opsz' 24, 'SOFT' 60; color: #fff2d8; letter-spacing: .005em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
  border: .2em solid transparent; border-radius: .5em;
  background:
    radial-gradient(circle at .78em 50%, #f6dc96 0 .14em, #6b4a17 .16em .2em, transparent .22em),
    radial-gradient(circle at calc(100% - .78em) 50%, #f6dc96 0 .14em, #6b4a17 .16em .2em, transparent .22em),
    linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 45%),
    linear-gradient(180deg, var(--e1), var(--e2)) padding-box,
    var(--latao) border-box;
  box-shadow: 0 .25em .7em rgba(0, 0, 0, .55), inset 0 -.25em .5em rgba(0, 0, 0, .35);
  transition: transform .12s, filter .15s, opacity .2s;
}
.placa:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-1px); }
.placa:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 .1em .3em rgba(0, 0, 0, .6), inset 0 .2em .5em rgba(0, 0, 0, .45); }
.placa:disabled { opacity: .38; filter: saturate(.35); }
.placa-verde { --e1: #3b8a5f; --e2: #163b27; }
.placa-fumo { --e1: #4a3c35; --e2: #1b1411; }
.placa-ouro { --e1: #f0d084; --e2: #a77a2a; color: #2e1a05; text-shadow: 0 1px 0 rgba(255, 240, 200, .6); }
.placa-eagora { --e1: #e2213e; --e2: #6d0717; font-style: italic; font-weight: 900; }

.dica-vez {
  margin: 0 0 .1em; text-align: center; min-height: 1.3em;
  font: italic 700 1.02em / 1.2 var(--f-titulo); font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--ouro-claro); text-shadow: 0 2px 5px #000;
}
.dica-vez.minha { color: #ffd27a; text-shadow: 0 0 .6em rgba(255, 170, 60, .8), 0 2px 4px #000; }

/* raise: trilho de latão */
.aumento {
  position: absolute; right: calc(100% + .8em); bottom: 0; width: 17em; padding: .9em 1em 1em; border-radius: .6em;
  background: linear-gradient(180deg, #34140f, #170807) padding-box, var(--latao) border-box; border: .18em solid transparent;
  box-shadow: 0 .5em 1.4em rgba(0, 0, 0, .7); display: flex; flex-direction: column; gap: .7em;
}
.aumento[hidden] { display: none; }
.aumento label { font: 600 .95em var(--f-titulo); color: var(--creme); }
.aumento label b { font-size: 1.35em; color: var(--ouro-claro); margin-left: .2em; }
.atalhos { display: flex; gap: .4em; }
.atalhos .btn-mini { flex: 1; justify-content: center; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2.2em; background: none; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track {
  height: .55em; border-radius: 1em; background: var(--latao-liso);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 230, 170, .3);
}
input[type="range"]::-moz-range-track { height: .55em; border-radius: 1em; background: var(--latao-liso); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 2em; height: 2em; margin-top: -.73em; border: 0; border-radius: 50%;
  background: url(../assets/pecas/ficha-vinho.webp) center / cover; box-shadow: 0 3px 6px rgba(0, 0, 0, .7);
}
input[type="range"]::-moz-range-thumb { width: 2em; height: 2em; border: 0; border-radius: 50%; background: url(../assets/pecas/ficha-vinho.webp) center / cover; }

/* truques: fichas de latão com ícone desenhado e cargas */
.truque {
  display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center; gap: .15em; text-align: center; min-width: 6.2em;
  padding: .3em .5em .32em; border-radius: .8em; border: .14em solid transparent;
  background: linear-gradient(180deg, #2a3a2f, #0f1a14) padding-box, var(--latao) border-box;
  box-shadow: 0 .25em .6em rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
  font: 680 .98em / 1.05 var(--f-titulo); font-variation-settings: 'opsz' 18; color: var(--creme);
  transition: transform .12s, filter .15s, opacity .2s;
}
.truque .ic {
  width: 2.2em; height: 2.2em; padding: .38em; border-radius: 50%; color: #3a2208;
  background: radial-gradient(circle at 35% 30%, #fbe7ae, #c99a45 55%, #7c561b); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .5);
}
.truque:hover:not(:disabled) { filter: brightness(1.18); transform: translateY(-2px); }
.truque:active:not(:disabled) { transform: translateY(1px); }
.truque:disabled { opacity: .42; filter: saturate(.3); }
.cargas { display: flex; gap: .22em; font: 700 .78em var(--f-texto); color: var(--ouro-claro); white-space: nowrap; }
.cargas i { width: .62em; height: .62em; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 .4em rgba(255, 170, 60, .8), inset 0 -1px 1px rgba(0, 0, 0, .4); }
.cargas i.gasta { background: #2b221d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7); }
/* o É Agora! é o mais dramático: rubi, lâmpadas e pulso */
.truque-eagora {
  position: relative; padding-block: .5em; font-size: 1.16em; font-weight: 900; font-style: italic; font-variation-settings: 'opsz' 48, 'SOFT' 100, 'WONK' 1;
  background: radial-gradient(120% 160% at 30% 0%, #ef3150, #9c0c22 55%, #4b0410) padding-box, var(--latao) border-box;
  text-shadow: 0 0 .4em rgba(255, 200, 120, .6), 0 2px 0 rgba(60, 0, 10, .8);
}
.truque-eagora::before, .truque-eagora::after {
  content: ''; position: absolute; inset: .18em; border-radius: 2em; border: .16em dotted #ffd98c; pointer-events: none; opacity: .8;
}
.truque-eagora::after { border-color: #fff4d0; transform: translateX(.16em); animation: lampadas .9s steps(2) infinite; opacity: 0; }
.truque-eagora:not(:disabled) { animation: chama 1.8s ease-in-out infinite; }
.truque-eagora:disabled::after { animation: none; }
@keyframes chama { 50% { box-shadow: 0 0 1.4em rgba(255, 70, 70, .65), 0 .25em .6em rgba(0, 0, 0, .55); } }

.flash {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(160, 10, 30, .55), rgba(20, 0, 4, .75) 70%);
}
.flash span {
  font: italic 900 min(19vw, 30vh) / 1 var(--f-titulo); font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff3c8 10%, #f2c25a 45%, #a86a14 60%, #f6d98a 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .04em 0 #5a0010) drop-shadow(0 0 .12em rgba(255, 80, 60, .7));
}

/* ---------- conversa ---------- */
.chat {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(23em, 92vw); z-index: 40; font-size: var(--hf);
  display: flex; flex-direction: column; gap: .6em; padding: 1em;
  background: linear-gradient(180deg, #2c0d12, #160608) padding-box, var(--latao) border-box;
  border-left: .2em solid transparent; box-shadow: -1em 0 2.4em rgba(0, 0, 0, .6);
  transform: translateX(105%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.chat.aberto { transform: none; }
body.chat-doca .chat { transform: none; width: 340px; box-shadow: none; }
body.chat-fixo #chat-mini, body.chat-fixo #fechar-chat, body.guiando #chat-mini { display: none; }
#palco { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
#hud { transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.chat header { display: flex; align-items: center; justify-content: space-between; }
.chat h2 { margin: 0; font: italic 800 1.25em var(--f-titulo); font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--ouro-claro); }
#chat-lista { flex: 1; overflow-y: auto; margin: 0; padding: .6em .7em; list-style: none; display: flex; flex-direction: column; gap: .45em;
  background: var(--papel) var(--ruido); color: var(--tinta); border-radius: .3em; box-shadow: inset 0 2px 8px rgba(80, 50, 10, .4);
  font: 400 .95em / 1.3 var(--f-texto); }
#chat-lista li.sistema { font-style: italic; color: #6b4a17; }
#chat-lista b { font-family: var(--f-titulo); font-weight: 700; color: var(--vinho); }
.frases { display: flex; flex-wrap: wrap; gap: .35em; }
#chat-form { display: flex; gap: .4em; }
#chat-form input { flex: 1; min-width: 0; padding: .55em .7em; border-radius: .3em; border: 1.5px solid var(--ouro); background: #fbf3df; color: var(--tinta); font: 1em var(--f-texto); }
.chat-aviso { margin: 0; min-height: 1.2em; font: italic .88em var(--f-texto); color: #ffb3a8; }

/* ---------- roda de provocações: anel de latão ---------- */
.roda { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; background: rgba(12, 3, 3, .6); font-size: var(--hf); }
.roda[hidden] { display: none; }
.roda-anel {
  --r: min(30em, 86vmin); position: relative; width: var(--r); height: var(--r); border-radius: 50%;
  background:
    radial-gradient(circle, #24100c 0 54%, transparent 54.5%),
    conic-gradient(from 20deg, #f4dc97, #8c6220, #e2bd6a, #7a5418, #f2d58c, #9b7028, #f4dc97);
  box-shadow: 0 1.5em 3em rgba(0, 0, 0, .7), inset 0 0 0 .5em rgba(60, 35, 8, .5), inset 0 0 0 .8em rgba(255, 230, 160, .25);
}
.roda-anel::after { content: ''; position: absolute; inset: 22.5%; border-radius: 50%; border: 2px solid rgba(201, 161, 74, .6); pointer-events: none; }
.roda-centro { position: absolute; inset: 27%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; text-align: center; z-index: 1; }
.roda-titulo { font: italic 800 1.2em var(--f-titulo); font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--ouro-claro); }
#roda-alvos { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em; }
.provo {
  position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; padding: 4px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbe7ae, #c99a45 55%, #7c561b);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--r) * -.385)) rotate(calc(-1 * var(--a)));
  box-shadow: 0 .3em .7em rgba(0, 0, 0, .6);
}
.provo img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.provo:hover { filter: brightness(1.15); }
.provo:hover::after { content: attr(aria-label); position: absolute; left: 50%; bottom: -1.3em; transform: translateX(-50%); white-space: nowrap; font: 600 .8em var(--f-titulo); color: var(--creme); text-shadow: 0 1px 3px #000; }

/* ---------- aviso, diálogos, fim, girar ---------- */
.aviso {
  position: fixed; left: 50%; top: 1em; z-index: 60; max-width: min(34em, 90vw); padding: .6em 1em; font-size: var(--hf);
  transform: translateX(-50%) rotate(-1deg); border-radius: .2em; color: var(--tinta);
  background: var(--papel) var(--ruido); box-shadow: 0 .4em 1em rgba(0, 0, 0, .6);
  font: 500 1em / 1.3 var(--f-texto);
}
.dialogo {
  max-width: min(31em, 92vw); max-height: 92vh; padding: 1.4em 1.6em; border-radius: .8em; color: var(--creme); font-size: var(--hf);
  background: radial-gradient(120% 90% at 50% 0%, #4a1019, #1e070a 70%) padding-box, var(--latao) border-box;
  border: .25em solid transparent; box-shadow: 0 2em 4em rgba(0, 0, 0, .8);
  font-family: var(--f-texto); line-height: 1.4;
}
.dialogo::backdrop { background: rgba(10, 3, 3, .65); }
.dialogo h2 { margin: 0 0 .4em; font: italic 900 1.9em / 1 var(--f-titulo); font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1; color: var(--ouro-claro); text-shadow: 0 2px 0 #3d0912; }
.dialogo p { margin: .5em 0; }
.dialogo menu { display: flex; flex-wrap: wrap; gap: .6em; justify-content: flex-end; padding: 0; margin: 1em 0 0; }
.dialogo menu .placa { width: auto; font-size: 1em; }
.letras-miudas { font-size: .88em; color: #e2cfa8; padding-left: 1.2em; margin: .6em 0 0; }
#emp-valor { margin: .4em 0; }

#tela-fim { display: none; place-items: center; }
#tela-fim.ativa { display: grid; }
.placa-fim {
  width: min(36em, 92vw); max-height: 94vh; overflow: auto; padding: 1.6em 2em; text-align: center; font-size: var(--hf);
  background: radial-gradient(120% 80% at 50% 0%, #4a1019, #1a0608 70%) padding-box, var(--latao) border-box;
  border: .3em solid transparent; border-radius: 1em; box-shadow: 0 2em 4em rgba(0, 0, 0, .8);
}
.titulo-fim { margin: 0; font: italic 900 3em / 1 var(--f-titulo); font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; color: var(--ouro-claro); text-shadow: 0 3px 0 #3d0912, 0 0 .5em rgba(255, 180, 80, .4); }
.sub { color: #e8d8b6; margin: .5em 0 1em; }
.ranking { list-style: none; padding: 0; margin: 0 0 1em; display: flex; flex-direction: column; gap: .35em; }
.ranking li { display: flex; align-items: center; gap: .7em; padding: .3em .6em; border-radius: .4em; background: rgba(0, 0, 0, .25); text-align: left; font: 600 1em var(--f-titulo); }
.ranking li.humano { background: rgba(201, 161, 74, .22); }
.ranking img { width: 2.6em; height: 2.6em; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 2px solid var(--ouro); }
.ranking small { margin-left: auto; font: italic 500 .85em var(--f-texto); color: #e0c48a; }
.resumo { display: grid; grid-template-columns: 1fr auto; gap: .25em 1em; margin: 0 0 1.2em; text-align: left; font-size: .95em; }
.resumo dt { color: #d7c39b; }
.resumo dd { margin: 0; font: 700 1em var(--f-titulo); }

#girar { display: none; position: fixed; inset: 0; z-index: 100; flex-direction: column; align-items: center; justify-content: center; gap: .6em; padding: 2em; text-align: center;
  background: radial-gradient(circle at 50% 40%, #4a1019, #120506 70%); }
.girar-icone { width: 84px; color: var(--ouro-claro); animation: girar 2.4s ease-in-out infinite; }
@keyframes girar { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
.girar-titulo { margin: 0; font: italic 900 2em var(--f-titulo); font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--ouro-claro); }
@media (orientation: portrait) and (max-width: 820px) { #girar { display: flex; } }

/* ---------- telas baixas (celular deitado) ---------- */
@media (max-height: 520px) {
  #log { font-size: .78em; max-width: 17em; }
  #log li:nth-last-child(n + 4) { display: none; }
  .aumento { width: 15em; }
}

@media (prefers-reduced-motion: reduce) {
  .fumaca i, .brilho, .letreiro::after, .truque-eagora, .truque-eagora::after, .lugar.vez .placa-lugar, .girar-icone, .pensando::after { animation: none !important; }
  .chat { transition: none; }
}

/* ---------- ajustes de estado ---------- */
[hidden] { display: none !important; }
.cartao .quadro { display: block; }
.cartao .quadro > * { display: block; }
.acoes.entre-maos .placa:not(#proxima), .acoes.entre-maos .dica-vez { display: none; }
#proxima { font-size: 1.2em; padding-block: .8em; white-space: nowrap; }
#hud > #flash, #hud > #log { pointer-events: none; }

.truque { position: relative; }
#cargas-divida {
  position: absolute; right: -.5em; top: -.7em; padding: .15em .45em; border-radius: .15em; transform: rotate(5deg);
  font: 700 .74em / 1.1 var(--f-texto); color: var(--tinta); background: var(--papel) var(--ruido); box-shadow: 0 .1em .3em rgba(0, 0, 0, .6);
}
#cargas-divida:empty { display: none; }

/* ======================================================================
   MEDALHÃO DO JOGADOR: a foto (ou as iniciais) num círculo de latão, o selo de quem joga
   ====================================================================== */
.medalhao {
  display: grid; place-items: center; aspect-ratio: 1; padding: 0; border-radius: 50%; overflow: hidden;
  border: .16em solid transparent;
  background: radial-gradient(circle at 45% 32%, #8a1a2c, #3d0912 70%, #22060b) padding-box, var(--latao) border-box;
  box-shadow: 0 .15em .45em rgba(0, 0, 0, .7), inset 0 0 0 .07em rgba(40, 18, 0, .55), inset 0 .25em .5em rgba(255, 220, 160, .12);
}
.medalhao img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.medalhao-iniciais {
  font: italic 900 1em / 1 var(--f-titulo); font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1; letter-spacing: -.02em;
  color: var(--ouro-claro); text-shadow: 0 .06em 0 #3d0912, 0 0 .3em rgba(255, 190, 90, .35);
}
/* na placa do lugar: tocar abre o perfil (no celular, o primeiro toque amplia) */
.medalhao-mesa { width: 2.2em; flex: none; border-width: .12em; cursor: pointer; font-size: inherit; }
.medalhao-mesa .medalhao-iniciais { font-size: .8em; }
.medalhao-mesa:hover, .medalhao-mesa:focus-visible { filter: brightness(1.18); }
/* na conversa, ao lado das suas mensagens */
.medalhao-chat { display: inline-grid; width: 1.7em; margin-right: .4em; vertical-align: -.5em; border-width: .1em; }
.medalhao-chat .medalhao-iniciais { font-size: .72em; }

/* ======================================================================
   MÃO GUIADA DO BENÉ: sombra com recortes, anel de luz no alvo, letreiro e Pular
   ====================================================================== */
.guia { position: fixed; inset: 0; z-index: 50; pointer-events: none; font-size: var(--hf); }
.guia-sombra { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .3s, visibility .3s; }
.guia-sombra > rect { fill: rgba(12, 3, 3, .68); }
.guia-anel { fill: none; stroke: #ffd98c; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(255, 180, 70, .9)); animation: anel 1.3s ease-in-out infinite; }
@keyframes anel { 50% { stroke-opacity: .35; } }
.letreiro-guia {
  position: absolute; left: 50%; top: 20%; pointer-events: auto; font-size: 1.32em; transform-origin: 0 30%;
  display: flex; flex-direction: column; align-items: flex-start; gap: .6em; padding: .7em 1.15em .8em;
}
.letreiro-guia p { position: relative; z-index: 1; margin: 0; }
.letreiro-guia .placa { position: relative; z-index: 1; align-self: flex-end; width: auto; font-size: .6em; font-style: normal; padding-inline: 1.6em; }
.letreiro-guia .ponta { left: auto; right: -1.05em; top: auto; bottom: .9em; transform: none; clip-path: polygon(100% 50%, 0 0, 0 100%); }
.letreiro-guia.acima .ponta { right: auto; left: 50%; bottom: -.9em; transform: rotate(90deg); }
.guia.vazia .guia-sombra, .guia.vazia .letreiro-guia { opacity: 0; visibility: hidden; }
.guia-pular { position: absolute; left: 50%; top: .7em; transform: translateX(-50%); pointer-events: auto; padding-inline: 1.3em; }
@media (prefers-reduced-motion: reduce) { .guia-anel { animation: none; } }
@media (max-height: 520px) { .letreiro-guia { font-size: 1.12em; } }

/* ======================================================================
   PERFIL: medalhão com a cor do perfil, dados, trambiqueiros e os botões sociais (em breve)
   ====================================================================== */
.medalhao-mesa, .medalhao-cartao {
  background: radial-gradient(circle at 45% 32%, color-mix(in srgb, var(--cor, #8a1a2c) 82%, #fff), var(--cor, #8a1a2c) 58%, color-mix(in srgb, var(--cor, #8a1a2c) 40%, #000)) padding-box, var(--latao) border-box;
}
.dlg-perfil { max-width: min(26em, 92vw); }
.perfil-topo { display: flex; align-items: center; gap: 1em; margin-bottom: 1em; }
.perfil-topo h2 { margin: 0; }
.perfil-topo p { margin: .3em 0 0; color: #d7c39b; }
.medalhao-cartao { width: 4.6em; flex: none; border-width: .22em; }
.medalhao-cartao .medalhao-iniciais { font-size: 1.9em; }

.perfil-rotulo { margin: .8em 0 .35em; font: italic 700 .9em var(--f-titulo); color: var(--ouro-claro); }
.perfil-tramb { display: flex; flex-wrap: wrap; gap: .5em; }
.tramb { display: flex; align-items: center; gap: .35em; font: 600 .85em var(--f-titulo); }
.tramb img { width: 2em; height: 2em; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 2px solid var(--ouro); }
.perfil-social { display: flex; flex-wrap: wrap; gap: .4em; }
.perfil-social .perfil-rotulo { flex-basis: 100%; margin-bottom: 0; }
.perfil-social small, .chat-abas small { font-size: .72em; font-style: italic; opacity: .85; }

/* ======================================================================
   CONVERSA COMPACTA: as 2 últimas mensagens no alto da mesa; tocar abre a conversa inteira
   ====================================================================== */
.chat-mini {
  position: absolute; left: 50%; top: .6em; transform: translateX(-50%); width: min(26em, 40%); padding: .35em 2.2em .35em .7em;
  display: block; text-align: left; border: .08em solid transparent; border-radius: .5em;
  background: linear-gradient(180deg, rgba(40, 14, 10, .78), rgba(18, 6, 5, .78)) padding-box, var(--latao) border-box;
  box-shadow: 0 .2em .6em rgba(0, 0, 0, .55);
}
.chat-mini ul { margin: 0; padding: 0; list-style: none; font: 400 .82em / 1.3 var(--f-texto); color: #eadcc0; }
.chat-mini li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-mini li.sistema { font-style: italic; opacity: .75; }
.chat-mini b { font-family: var(--f-titulo); color: var(--ouro-claro); }
.chat-mini .medalhao-chat { display: none; }
.chat-mini-ic { position: absolute; right: .55em; top: 50%; width: 1.1em; height: 1.1em; transform: translateY(-50%); color: var(--ouro-claro); }
.chat-mini .pingo { position: absolute; right: -.4em; top: -.4em; }
.chat-abas { display: flex; gap: .3em; }
.aba { flex: 1; padding: .35em .5em; border: 0; border-radius: .3em .3em 0 0; font: 700 .9em var(--f-titulo); color: var(--creme); background: rgba(255, 255, 255, .06); }
.aba[aria-selected="true"] { background: var(--latao-liso); color: #2e1a05; }
.aba:disabled { opacity: .55; }
mark.marca { background: rgba(201, 161, 74, .35); color: inherit; border-radius: .2em; padding: 0 .15em; font-weight: 700; }
mark.marca.eu { background: #c9a14a; color: #2e1a05; }
#chat-form { position: relative; }
.marcar {
  position: absolute; left: 0; bottom: 100%; margin: 0 0 .3em; padding: .25em; list-style: none; min-width: 12em; max-height: 12em; overflow-y: auto;
  background: #fbf3df; color: var(--tinta); border: 1.5px solid var(--ouro); border-radius: .3em; box-shadow: 0 .3em .8em rgba(0, 0, 0, .5);
}
.marcar li { padding: .3em .5em; border-radius: .2em; cursor: pointer; font: 600 .95em var(--f-texto); }
.marcar li[aria-selected="true"], .marcar li:hover { background: rgba(201, 161, 74, .35); }
@media (max-height: 520px) { .chat-mini { width: min(19em, 34%); font-size: .9em; } }
/* celular deitado: placa só com medalhão e fichas; o primeiro toque amplia e mostra o nome */
@media (max-height: 520px) {
  .placa-lugar:not(.ampliada) .placa-nome, .placa-lugar:not(.ampliada) .mudo { display: none; }
  .placa-lugar { padding-right: .55em; }
}
.perfil-social .btn-mini:disabled { opacity: .6; }

/* ======================================================================
   BARRA DO JOGADOR: couro escuro com filete de latão; retrato (reage à mão), truques e ações.
   Fica fora do palco (tela.js desconta a altura dela), então nunca cobre cartas.
   ====================================================================== */
.barra {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 1em;
  padding: .4em 1em .45em 7.2em; font-size: clamp(11px, 1.75vh, 16px);
  background:
    linear-gradient(180deg, rgba(255, 220, 160, .07), transparent 40%),
    radial-gradient(120% 220% at 50% 0%, #3a1510, #1a0806 60%, #0d0403);
  border-top: .2em solid transparent; border-image: var(--latao) 1;
  box-shadow: 0 -.5em 1.4em rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 230, 170, .18);
}
.meu-retrato { position: absolute; left: .7em; bottom: .3em; --qw: 5.6em; --min-plaq: 9px; pointer-events: none; }
.barra .truques { display: flex; gap: .45em; }
.barra .acoes { position: relative; margin-left: auto; display: flex; align-items: center; gap: .5em; }
.barra .acoes .placa { width: auto; min-width: 7.2em; white-space: nowrap; font-size: 1.05em; padding: .6em 1.4em .64em; }
.barra .dica-vez { position: absolute; right: 0; bottom: calc(100% + .55em); margin: 0; white-space: nowrap; font-size: 1.1em; pointer-events: none; }
.barra .aumento { right: 0; bottom: calc(100% + 2.2em); }
.barra #proxima { min-width: 11em; }
.truque-eagora { padding-block: .3em; }
.truque-eagora::before, .truque-eagora::after { border-radius: .8em; }
.truque .rotulo { white-space: nowrap; }
@media (max-height: 520px) {
  .barra { padding: .25em .5em .3em 4.4em; gap: .45em; font-size: 11px; }
  .meu-retrato { --qw: 3.6em; left: .4em; bottom: .2em; }
  .truque { min-width: 0; padding: .2em .35em; font-size: .86em; }
  .truque .ic { width: 1.8em; height: 1.8em; padding: .3em; }
  .barra .acoes .placa { min-width: 0; padding: .5em .8em; font-size: .95em; }
  .barra .dica-vez { font-size: 1em; }
}