/* NossaTela Cine — visual de cinema (telas do produto) */

:root {
  --bg: #07050a;
  --bg-2: #10080c;
  --panel: #141015;
  --panel-2: #1b1418;
  --line: rgba(212, 176, 104, 0.22);
  --gold: #e2c17a;
  --gold-2: #c9a35a;
  --gold-dim: #8a7340;
  --cream: #f6f0e4;
  --muted: #b5ab9c;
  --muted-2: #8a8176;
  --velvet: #7a1a28;
  --velvet-deep: #3d0c14;
  --velvet-lit: #b02a3a;
  --seat-glow: rgba(226, 193, 122, 0.45);
  --ok: #8fbf88;
  --danger: #d36a6a;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --sans: "Outfit", system-ui, sans-serif;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { background: var(--bg); }
body {
  font-family: var(--sans);
  color: var(--cream);
  background: var(--bg);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea { font-family: inherit; }
button { cursor: pointer; }
a { color: var(--gold); text-decoration: none; }
img { display: block; max-width: 100%; }

/* Atmosphere */
.grain, .vignette, .cortinas { pointer-events: none; }
.grain {
  position: fixed; inset: 0; z-index: 40;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.vignette {
  position: fixed; inset: 0; z-index: 39;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.62) 100%);
}
body[data-tela="sala"] .vignette {
  background: radial-gradient(ellipse at 38% 42%, transparent 30%, rgba(0,0,0,0.72) 100%);
}

/* Screens */
.tela { display: none; }
body[data-tela="nome"] #tela-nome,
body[data-tela="intro"] #tela-intro,
body[data-tela="bonequinho"] #tela-bonequinho,
body[data-tela="poltronas"] #tela-poltronas,
body[data-tela="animacao"] #tela-animacao,
body[data-tela="sala"] #tela-sala { display: block; }

/* Wordmark */
.marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  user-select: none;
}
.marca-icone { width: 44px; height: 44px; margin-bottom: 8px; filter: drop-shadow(0 0 12px rgba(226,193,122,0.35)); }
.marca-nossa {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2.75rem;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--cream);
}
.marca-cine {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 7px;
  margin-left: 0.46em;
}
.marca.compacta { flex-direction: row; align-items: baseline; gap: 10px; }
.marca.compacta .marca-icone { width: 28px; height: 28px; margin: 0 2px 0 0; }
.marca.compacta .marca-nossa { font-size: 1.45rem; }
.marca.compacta .marca-cine { font-size: 0.62rem; letter-spacing: 0.34em; margin: 0 0 1px; }

/* ========== ENTRADA (nome) ========== */
#tela-nome {
  position: relative;
  min-height: 100dvh;
  padding: calc(32px + var(--safe-t)) 24px calc(32px + var(--safe-b));
  display: none;
  overflow: hidden;
}
body[data-tela="nome"] #tela-nome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cortina {
  position: absolute; top: 0; bottom: 0; width: 26vw; min-width: 140px;
  background:
    repeating-linear-gradient(90deg,
      #4a0d16 0 14px,
      #5c101c 14px 18px,
      #3a0a12 18px 28px,
      #641320 28px 32px);
  box-shadow: inset -40px 0 60px rgba(0,0,0,0.45);
  opacity: 0.72;
}
.cortina.esq { left: 0; mask-image: linear-gradient(90deg, #000 40%, transparent); }
.cortina.dir { right: 0; transform: scaleX(-1); mask-image: linear-gradient(90deg, #000 40%, transparent); }
.palco-fundo {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, 70vw);
  height: 180px;
  background: linear-gradient(180deg, #1c120c 0%, #0a0708 100%);
  border-radius: 6px 6px 2px 2px;
  box-shadow: 0 0 80px 20px rgba(226, 193, 122, 0.12), 0 0 160px 20px rgba(176, 42, 58, 0.08);
  overflow: hidden;
}
.palco-fundo::after {
  content: "TELA";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  letter-spacing: 0.5em;
  color: rgba(246,240,228,0.18);
  background: radial-gradient(ellipse at 50% 40%, rgba(255,220,160,0.16), transparent 70%);
}
#tela-nome .marca { position: relative; z-index: 2; }
.tagline {
  position: relative;
  z-index: 2;
  margin: 14px 0 36px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--muted);
  font-weight: 500;
}
.cartao {
  position: relative;
  z-index: 2;
  width: min(420px, 100%);
  background: linear-gradient(180deg, rgba(28,20,24,0.92), rgba(14,10,12,0.92));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 26px 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.rotulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cream);
}
.obrigatorio {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.campo {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font-size: 16px; /* evita zoom no iPhone */
  color: var(--cream);
  background: #0c0a0d;
  border: 1px solid rgba(226,193,122,0.28);
  border-radius: 12px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.campo:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(226,193,122,0.16); }
.campo::placeholder { color: #6f675c; }
.ajuda {
  margin: 10px 0 22px;
  font-size: 0.8rem;
  color: var(--muted-2);
  line-height: 1.45;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1a1008;
  background: linear-gradient(180deg, #efd39a, var(--gold-2));
  box-shadow: 0 8px 24px rgba(201,163,90,0.28), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn:hover { filter: brightness(1.05); }
.btn.largo { width: auto; padding: 0 28px; min-width: 180px; }
.atalho {
  margin-top: 16px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted-2);
}

/* ========== ESCOLHA DE POLTRONAS ========== */
#tela-poltronas, #tela-animacao {
  min-height: 100dvh;
  padding: calc(16px + var(--safe-t)) 24px calc(24px + var(--safe-b));
  background:
    radial-gradient(ellipse at 50% 0%, rgba(176,42,58,0.16), transparent 50%),
    var(--bg);
}
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto 8px;
}
.ola { font-size: 0.9rem; color: var(--muted); }
.ola strong { color: var(--cream); font-weight: 600; }
.titulo-sala {
  text-align: center;
  margin: 6px auto 6px;
}
.titulo-sala h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2.15rem;
  letter-spacing: -0.02em;
}
.titulo-sala p { margin-top: 4px; color: var(--muted); font-size: 0.92rem; }

.teatro {
  position: relative;
  max-width: 820px;
  margin: 12px auto 0;
  padding: 12px 12px 20px;
}
.tela-cinema {
  position: relative;
  width: 86%;
  margin: 0 auto 36px;
  height: 54px;
  background: linear-gradient(180deg, #2a2218 0%, #0c0a0c 100%);
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  box-shadow: 0 8px 40px rgba(226,193,122,0.18), 0 0 80px rgba(226,193,122,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.55em;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(246,240,228,0.55);
}
.tela-cinema::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,230,180,0.28), transparent 70%);
}
.plateia { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.fileira { display: flex; align-items: flex-end; justify-content: center; gap: 28px; width: 100%; }
.fileira.meio { gap: 10px; }
.corredor {
  width: 72px;
  height: 86px;
  background: linear-gradient(90deg, transparent, rgba(122,26,40,0.35) 20%, rgba(90,16,24,0.5) 50%, rgba(122,26,40,0.35) 80%, transparent);
  border-left: 1px dashed rgba(226,193,122,0.18);
  border-right: 1px dashed rgba(226,193,122,0.18);
}
.fileira.fundo { margin-top: 4px; }

/* Aisle carpet running the full height — used in animation */
.passagem {
  position: absolute;
  left: 50%;
  top: 70px;
  bottom: 20px;
  width: 56px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(122,26,40,0.28) 18%, rgba(90,16,24,0.42) 50%, rgba(122,26,40,0.28) 82%, transparent);
  pointer-events: none;
  z-index: 1;
}

.loveseat {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 16px 10px 10px;
  background: linear-gradient(180deg, rgba(90,16,24,0.35), rgba(30,8,12,0.5));
  border: 1px solid rgba(226,193,122,0.3);
  border-radius: 20px 20px 16px 16px;
  box-shadow: inset 0 1px 0 rgba(255,200,210,0.08), 0 8px 20px rgba(0,0,0,0.35);
}
.loveseat .faixa {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  background: #140a0c;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(226,193,122,0.35);
  white-space: nowrap;
  z-index: 2;
}
.loveseat .faixa::before { content: "♡ "; }

.poltrona {
  position: relative;
  width: 70px;
  height: 78px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
}
.poltrona .encosto,
.poltrona .banco {
  position: absolute;
  left: 8px; right: 8px;
  background:
    linear-gradient(180deg, #c43b4c 0%, #8a1f2e 38%, #54141c 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,190,200,0.28),
    inset 0 -10px 12px rgba(0,0,0,0.35),
    0 4px 0 #2a0a0e;
}
.poltrona .encosto {
  top: 4px;
  height: 40px;
  border-radius: 16px 16px 8px 8px;
}
.poltrona .banco {
  top: 40px;
  height: 22px;
  left: 5px; right: 5px;
  border-radius: 6px 6px 12px 12px;
  background: linear-gradient(180deg, #9a2433, #3f0e14);
}
.poltrona .braco {
  position: absolute;
  width: 7px;
  height: 28px;
  bottom: 16px;
  border-radius: 4px;
  background: linear-gradient(180deg, #6a1822, #2c0a0e);
  box-shadow: inset 0 1px 0 rgba(255,180,190,0.2);
}
.poltrona .braco.e { left: 1px; }
.poltrona .braco.d { right: 1px; }
.poltrona .numero {
  position: absolute;
  top: 12px;
  left: 0; right: 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
  z-index: 2;
  pointer-events: none;
}
.ocupante {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translate(-50%, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 3;
  width: 80px;
}
.ocupante .avatar-mini {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--gold);
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.ocupante .nome-mini {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--cream);
  white-space: nowrap;
}

/* States */
.poltrona.livre .encosto,
.poltrona.livre .banco {
  box-shadow:
    inset 0 2px 0 rgba(255,190,200,0.3),
    0 0 14px rgba(226,193,122,0.35),
    0 0 28px rgba(176,42,58,0.35),
    0 4px 0 #2a0a0e;
}
.poltrona.livre { animation: pulsar 2.8s ease-in-out infinite; }
@keyframes pulsar {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
body[data-tela="animacao"] .poltrona.livre,
body[data-tela="sala"] .poltrona.livre { animation: none; }

.poltrona.ocupada { cursor: default; }
.poltrona.ocupada .encosto,
.poltrona.ocupada .banco {
  background: linear-gradient(180deg, #5a1520, #2a0a0e);
  filter: brightness(0.78);
  box-shadow: inset 0 2px 0 rgba(255,180,190,0.08), 0 3px 0 #1a0708;
}
.poltrona.ocupada .numero { color: rgba(226,193,122,0.45); }

.poltrona.selecionada .encosto,
.poltrona.selecionada .banco {
  box-shadow:
    inset 0 2px 0 rgba(255,230,180,0.4),
    0 0 0 2px var(--gold),
    0 0 22px rgba(226,193,122,0.55),
    0 4px 0 #2a0a0e;
}
.poltrona.selecionada { animation: none; filter: brightness(1.15); }

.legenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 22px;
  margin: 36px auto 16px;
  max-width: 720px;
  font-size: 0.78rem;
  color: var(--muted);
}
.legenda span { display: inline-flex; align-items: center; gap: 8px; }
.ponto {
  width: 12px; height: 12px; border-radius: 4px;
  background: #8a1f2e;
  box-shadow: 0 0 8px rgba(226,193,122,0.5);
}
.ponto.ocup { box-shadow: none; background: #3a1014; }
.ponto.sel { box-shadow: 0 0 0 2px var(--gold); }
.ponto.casal { background: linear-gradient(90deg, #8a1f2e, #c9a35a); }

.barra-acao {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  max-width: 820px;
  margin: 8px auto 0;
  padding: 16px 18px calc(10px + var(--safe-b));
  background: linear-gradient(180deg, transparent, rgba(7,5,10,0.92) 30%);
}
.escolha { text-align: right; }
.escolha strong { display: block; font-size: 1rem; }
.escolha span { font-size: 0.8rem; color: var(--muted); }

/* ========== BONECO / ANIMAÇÃO ========== */
.bonequinho {
  position: absolute;
  z-index: 5;
  width: 36px;
  height: 66px;
  transform: translate(-50%, -86%);
  left: var(--x, 50%);
  top: var(--y, 80%);
  filter: drop-shadow(0 6px 4px rgba(0,0,0,0.45));
}
.bonequinho.andando { z-index: 7; }
.bonequinho.andando::before,
.bonequinho.andando::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(226,193,122,0.35);
  z-index: 0;
}
.bonequinho.andando::before { bottom: -14px; transform: translateX(-8px); }
.bonequinho.andando::after { bottom: -22px; transform: translateX(4px); width: 4px; height: 4px; }
.bonequinho .sombra {
  position: absolute;
  left: 50%; bottom: -4px;
  width: 22px; height: 6px;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.45);
  border-radius: 50%;
  filter: blur(1px);
}
.bonequinho .cabeca {
  position: absolute;
  left: 50%; top: 0;
  width: 18px; height: 18px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3d2b8, #c99572 70%);
  z-index: 2;
}
.bonequinho .cabelo {
  position: absolute;
  left: 50%; top: -4px;
  width: 20px; height: 13px;
  transform: translateX(-50%);
  border-radius: 10px 10px 4px 4px;
  z-index: 3;
}
.bonequinho .tronco {
  position: absolute;
  left: 50%; top: 17px;
  width: 18px; height: 20px;
  transform: translateX(-50%);
  border-radius: 7px 7px 5px 5px;
  z-index: 1;
}
.bonequinho .perna {
  position: absolute;
  bottom: 2px;
  width: 6px; height: 20px;
  border-radius: 3px;
  background: #2a2428;
}
.bonequinho .perna.e { left: 8px; transform: rotate(16deg); transform-origin: top; }
.bonequinho .perna.d { right: 8px; transform: rotate(-20deg); transform-origin: top; }
.bonequinho.andando .tronco { transform: translateX(-50%) rotate(-6deg); }
.bonequinho.andando .perna.e { transform: rotate(28deg); height: 18px; }
.bonequinho.andando .perna.d { transform: rotate(-36deg); height: 22px; }

.tom-moss .cabelo { background: #3d2a1c; }
.tom-moss .tronco { background: linear-gradient(180deg, #d9c4a0, #b08a4e); }
.tom-maria .cabelo { background: #1a1210; width: 20px; border-radius: 10px 10px 8px 8px; height: 14px; }
.tom-maria .tronco { background: linear-gradient(180deg, #b04a5a, #7a2230); }
.tom-pedro .cabelo { background: #1c1a1a; }
.tom-pedro .tronco { background: linear-gradient(180deg, #3d6d6a, #1e3c3a); }
.tom-ana .cabelo { background: #7a3c22; border-radius: 12px; height: 14px; }
.tom-ana .tronco { background: linear-gradient(180deg, #d4a24a, #8a6230); }
.tom-sofia .cabelo { background: #2c2430; height: 10px; }
.tom-sofia .tronco { background: linear-gradient(180deg, #8a6aaa, #4a3860); }

.placa-nome {
  position: absolute;
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--cream);
  background: rgba(20,10,12,0.85);
  border: 1px solid var(--line);
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.status-animacao {
  text-align: center;
  margin-top: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--gold);
}
.status-animacao small {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--muted);
}

.emoji-balao {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.05rem;
  background: #1a1214;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2px 7px 3px;
  z-index: 8;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.emoji-balao::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px; height: 8px;
  background: #1a1214;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
}

/* Seated character on a seat (picker occupied or mini map) */
.poltrona .bonequinho.sentado {
  position: absolute;
  left: 50%;
  top: 22px;
  width: 24px;
  height: 32px;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45));
  pointer-events: none;
  z-index: 3;
}
.poltrona .bonequinho.sentado .cabeca { width: 14px; height: 14px; top: 0; }
.poltrona .bonequinho.sentado .cabelo { width: 16px; height: 11px; top: -3px; }
.poltrona .bonequinho.sentado .tronco { top: 13px; height: 15px; width: 16px; border-radius: 6px 6px 3px 3px; }
.poltrona .bonequinho.sentado .perna { display: none; }
.poltrona .bonequinho.sentado .sombra { display: none; }

/* ========== SALA ========== */
#tela-sala {
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: #050308;
  display: none;
  flex-direction: column;
}
body[data-tela="sala"] #tela-sala { display: flex; }
body[data-tela="sala"] { background: #050308; }

.sala-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + var(--safe-t)) 18px 10px;
  border-bottom: 1px solid rgba(226,193,122,0.1);
  background: rgba(8,6,10,0.88);
  flex-shrink: 0;
}
.sala-meta { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--muted); }
.codigo {
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.btn-texto {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream);
  font-size: 0.75rem;
  font-weight: 500;
  width: auto;
}
.sala-corpo {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  min-height: 0;
}
.palco {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 18px 18px;
  background: radial-gradient(ellipse at 50% 30%, rgba(40,24,16,0.4), transparent 55%);
}
.player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(226,193,122,0.12), 0 0 80px rgba(226,193,122,0.08), 0 30px 60px rgba(0,0,0,0.55);
}
.cartaz {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 72% 28%, rgba(255,200,140,0.2), transparent 28%),
    radial-gradient(circle at 30% 70%, rgba(120,80,180,0.25), transparent 32%),
    radial-gradient(circle at 50% 40%, #1a1630, #07060c 70%);
}
.cartaz .lua {
  position: absolute;
  top: 16%;
  right: 22%;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f7e7c3, #c9a35a 70%);
  box-shadow: 0 0 40px rgba(247,231,195,0.45);
}
.cartaz .orbe {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.7;
}
.cartaz .titulo-filme {
  position: absolute;
  left: 0; right: 0; bottom: 78px;
  text-align: center;
}
.cartaz .titulo-filme h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--cream);
  text-shadow: 0 6px 24px rgba(0,0,0,0.6);
}
.cartaz .titulo-filme p {
  margin-top: 4px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--gold);
}
.controles {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 16px 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  font-size: 0.75rem;
}
.btn-play {
  width: 32px; height: 32px;
  border: 0;
  background: var(--cream);
  color: #111;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.barra-tempo { flex: 1; height: 4px; background: rgba(255,255,255,0.2); border-radius: 4px; overflow: hidden; }
.barra-tempo i { display: block; width: 28%; height: 100%; background: var(--gold); }
.palco-nota {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--muted);
}

.lateral {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid rgba(226,193,122,0.1);
  background: #0c0a0e;
}
.mini-cinema {
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(226,193,122,0.1);
}
.mini-cinema header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mini-cinema h3 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.mini-cinema .trocar {
  font-size: 0.72rem;
  color: var(--cream);
  border: 0;
  background: none;
  width: auto;
  height: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.mini-plateia { transform: none; }
.mini-cinema .tela-cinema { height: 16px; margin-bottom: 18px; font-size: 0.5rem; width: 88%; letter-spacing: 0.4em; }
.mini-cinema .plateia { gap: 16px; }
.mini-cinema .fileira { gap: 14px; }
.mini-cinema .fileira.meio { gap: 6px; }
.mini-cinema .corredor { width: 28px; height: 40px; }
.mini-cinema .loveseat { padding: 14px 7px 8px; border-radius: 12px; gap: 3px; }
.mini-cinema .loveseat .faixa { font-size: 0; top: -8px; padding: 2px 7px; }
.mini-cinema .loveseat .faixa::before { font-size: 0.62rem; content: "♡"; }
.mini-cinema .poltrona { width: 40px; height: 46px; }
.mini-cinema .poltrona .encosto { height: 22px; left: 4px; right: 4px; border-radius: 8px 8px 4px 4px; }
.mini-cinema .poltrona .banco { top: 22px; height: 12px; left: 3px; right: 3px; }
.mini-cinema .poltrona .braco { display: none; }
.mini-cinema .poltrona .numero { top: 5px; font-size: 0.52rem; }
.mini-cinema .poltrona .bonequinho.sentado { top: 16px; width: 18px; height: 24px; }
.mini-cinema .poltrona .bonequinho.sentado .cabeca { width: 11px; height: 11px; }
.mini-cinema .poltrona .bonequinho.sentado .cabelo { width: 13px; height: 8px; }
.mini-cinema .poltrona .bonequinho.sentado .tronco { top: 10px; width: 12px; height: 11px; }
.mini-cinema .emoji-balao { top: -22px; font-size: 0.85rem; padding: 1px 5px; }
.mini-cinema .ocupante { bottom: -1px; width: 48px; }
.mini-cinema .ocupante .avatar-mini { display: none; }
.mini-cinema .ocupante .nome-mini { font-size: 0.58rem; color: var(--muted); }
.mini-cinema .resumo {
  margin-top: 20px;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}

.abas { display: flex; border-bottom: 1px solid rgba(226,193,122,0.1); }
.aba {
  flex: 1;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-size: 0.78rem;
  font-weight: 500;
  width: auto;
  border-bottom: 2px solid transparent;
}
.aba.ativa { color: var(--gold); border-bottom-color: var(--gold); }

.painel { display: none; flex: 1; min-height: 0; flex-direction: column; }
.painel.ativo { display: flex; }

.chat {
  flex: 1;
  overflow: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg { max-width: 95%; }
.msg .quem { font-size: 0.68rem; color: var(--gold-2); font-weight: 600; margin-bottom: 2px; }
.msg .bolha {
  display: inline-block;
  padding: 8px 11px;
  background: #1a161c;
  border-radius: 4px 12px 12px 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--cream);
}
.msg.eu { align-self: flex-end; text-align: right; }
.msg.eu .bolha { background: #2a2018; border-radius: 12px 4px 12px 12px; }
.msg.sistema { align-self: center; text-align: center; }
.msg.sistema .bolha {
  background: transparent;
  color: var(--muted-2);
  font-size: 0.72rem;
  font-style: italic;
  padding: 0;
  font-family: var(--serif);
}
.chat-input {
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + var(--safe-b));
  border-top: 1px solid rgba(226,193,122,0.1);
}
.chat-input input {
  flex: 1;
  height: 42px;
  font-size: 16px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(226,193,122,0.2);
  background: #0a080a;
  color: var(--cream);
  outline: none;
  min-width: 0;
}
.chat-input button {
  width: 42px; height: 42px;
  border: 0;
  border-radius: 10px;
  background: var(--gold-2);
  color: #1a1008;
  font-weight: 700;
}

.fila { padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.item-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #161216;
}
.item-fila.tocando { outline: 1px solid rgba(226,193,122,0.35); background: #1c1610; }
.thumb {
  width: 48px; height: 32px;
  border-radius: 4px;
  background: linear-gradient(135deg, #2a2038, #1a1020);
  flex-shrink: 0;
}
.item-fila .info { flex: 1; min-width: 0; }
.item-fila .info strong { display: block; font-size: 0.8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-fila .info span { font-size: 0.68rem; color: var(--muted-2); }
.tag-agora { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); font-weight: 600; }

/* Lights dim already applied on sala; slightly darker chrome is enough */

/* ========== MOBILE ========== */
@media (max-width: 820px) {
  .cortina { display: none; }
  .palco-fundo { width: 92vw; height: 120px; }
  .marca-nossa { font-size: 2.3rem; }
  .tagline { font-size: 1.15rem; margin-bottom: 28px; }
  .titulo-sala h1 { font-size: 1.7rem; }
  .teatro { padding: 8px 0 12px; }
  .tela-cinema { width: 94%; height: 40px; margin-bottom: 28px; }
  .plateia { gap: 32px; }
  .fileira { gap: 14px; }
  .fileira.meio { gap: 6px; }
  .corredor { width: 22px; height: 70px; }
  .poltrona { width: 56px; height: 70px; }
  .loveseat { padding: 14px 6px 8px; }
  .passagem { width: 22px; }
  .barra-acao { flex-direction: column; text-align: center; gap: 10px; }
  .escolha { text-align: center; }
  .btn.largo { width: 100%; }

  .sala-corpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .palco { padding: 8px 10px 6px; }
  .player { border-radius: 10px; }
  .cartaz .titulo-filme { bottom: 58px; }
  .cartaz .titulo-filme h2 { font-size: 1.6rem; }
  .lateral { border-left: 0; border-top: 1px solid rgba(226,193,122,0.1); }
  .mini-cinema { padding: 10px 8px 8px; }
  .mini-plateia { transform: scale(1); }
  .mini-cinema .resumo { margin-top: 22px; }
  .sala-topo { padding-left: 12px; padding-right: 12px; }
  .marca.compacta .marca-nossa { font-size: 1.2rem; }
}

@media (max-width: 400px) {
  .poltrona { width: 50px; height: 66px; }
  .loveseat .faixa { font-size: 0.55rem; }
  .ocupante { width: 70px; }
  .ocupante .nome-mini { font-size: 0.62rem; }
}

@media (min-width: 821px) {
  #tela-sala .abas { display: none; }
  #tela-sala .painel,
  #tela-sala .painel[hidden] {
    display: flex !important;
  }
  #tela-sala .mini-cinema { order: 1; }
  #painel-fila {
    order: 2;
    flex: 0 0 auto;
    max-height: 200px;
    border-bottom: 1px solid rgba(226,193,122,0.1);
    overflow: auto;
  }
  #painel-chat { order: 3; }
  #painel-fila::before {
    content: "Fila";
    display: block;
    padding: 8px 14px 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
  }
  #painel-chat { flex: 1; min-height: 0; }
}

@media (max-width: 820px) {
  .sala-meta { flex-shrink: 0; }
  .codigo { white-space: nowrap; font-size: 0.72rem; }
  .btn-texto { white-space: nowrap; }
  .mini-cinema .resumo { margin-top: 16px; }
  .cartaz .lua { width: 36px; height: 36px; }
  .palco-nota { gap: 8px; }
}

.fila-faixa { display: none; }
@media (max-width: 820px) {
  .fila-faixa {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #161216;
    font-size: 0.72rem;
    color: var(--cream);
  }
  .fila-faixa strong {
    color: var(--gold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.6rem;
  }
  .fila-faixa span { color: var(--muted); }
  .mini-cinema .plateia { gap: 8px; }
  .mini-cinema .loveseat { padding: 12px 6px 6px; }
  .mini-cinema .resumo { margin-top: 10px; }
  .chat { padding-top: 6px; gap: 7px; }
  .msg.sistema .bolha { font-size: 0.68rem; }
  .palco-nota { margin-top: 6px; font-size: 0.72rem; }
}


@media (max-width: 820px) {
  .palco-nota { display: none; }
  .mini-cinema { padding: 8px 8px 6px; }
  .mini-cinema .tela-cinema { height: 12px; margin-bottom: 8px; }
  .mini-cinema .plateia { gap: 6px; }
  .mini-cinema .fileira { gap: 10px; }
  .mini-cinema .poltrona { width: 34px; height: 38px; }
  .mini-cinema .poltrona .encosto { height: 18px; }
  .mini-cinema .poltrona .banco { top: 18px; height: 10px; }
  .mini-cinema .poltrona .numero { top: 3px; }
  .mini-cinema .poltrona .bonequinho.sentado { top: 12px; }
  .mini-cinema .resumo { margin-top: 8px; font-size: 0.68rem; }
  .fila-faixa { margin-top: 6px; padding: 6px 8px; }
  .abas .aba { height: 36px; }
}

/* —— Live app additions (keeps the cinema look) —— */
.opcional {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
}
.entrar-em {
  text-align: center;
  font-size: 0.85rem;
  color: var(--gold);
  margin-bottom: 16px;
}
.erro-msg {
  margin: 0 0 12px;
  font-size: 0.8rem;
  color: var(--danger);
}
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 80;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 16px;
  border-radius: 12px;
  background: #2a1810;
  border: 1px solid var(--line);
  color: var(--cream);
  font-size: 0.85rem;
  box-shadow: var(--shadow);
}
#bloco-criar .rotulo, #bloco-entrar .rotulo { margin-top: 14px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; }

#yt-host, #video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  border: 0;
}
#video { object-fit: contain; display: none; }
#yt-host { display: none; }
#yt-host iframe { width: 100%; height: 100%; border: 0; }
.player.tem-video .cartaz { display: none; }
.player.tem-video.modo-video #video { display: block; }
.player.tem-video.modo-yt #yt-host { display: block; }

.unlock {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, 0.58);
  z-index: 6;
  padding: 20px;
}
body.precisa-toque .unlock { display: grid; }

.add-url {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.add-url .campo { flex: 1; height: 44px; min-width: 0; }
.add-url .btn { width: auto; height: 44px; padding: 0 16px; flex-shrink: 0; }

.btn-rate {
  border: 0;
  background: transparent;
  color: var(--cream);
  font-size: 0.75rem;
  font-weight: 600;
  width: auto;
  height: auto;
  padding: 4px 6px;
}
.barra-tempo { cursor: pointer; }
.barra-tempo i { display: block; width: 0; height: 100%; background: var(--gold); }

.reacoes {
  position: fixed;
  z-index: 70;
  display: flex;
  gap: 4px;
  padding: 6px;
  background: #1a1214;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.reacoes button {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 1.05rem;
  border-radius: 50%;
}
.reacoes button:hover { background: rgba(226,193,122,0.12); }
.msg { cursor: pointer; }
.msg .rx {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.msg .rx span {
  font-size: 0.72rem;
  background: #1a161c;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 6px;
}
.item-fila { cursor: pointer; }
.item-fila .tirar {
  border: 0;
  background: none;
  color: var(--muted-2);
  width: auto;
  height: auto;
  font-size: 0.75rem;
}

body.luzes-apagadas #tela-sala {
  background: #030206;
}
body.luzes-apagadas .player {
  box-shadow: 0 0 0 1px rgba(226,193,122,0.16), 0 0 100px rgba(226,193,122,0.14), 0 30px 60px rgba(0,0,0,0.55);
}
body.luzes-apagadas .lateral { background: #09070a; }

.poltrona.offline { opacity: 0.62; }
.poltrona.minha.ocupada { cursor: default; }

@keyframes passo-e {
  0%, 100% { transform: rotate(26deg); }
  50% { transform: rotate(-30deg); }
}
@keyframes passo-d {
  0%, 100% { transform: rotate(-30deg); }
  50% { transform: rotate(26deg); }
}
.bonequinho.andando .perna.e { animation: passo-e 0.38s linear infinite; transform-origin: top; }
.bonequinho.andando .perna.d { animation: passo-d 0.38s linear infinite; transform-origin: top; }

@media (max-width: 820px) {
  .add-url { flex-direction: column; }
  .add-url .btn { width: 100%; }
}


/* —— Bonequinho customizer + looks —— */
#tela-bonequinho {
  min-height: 100dvh;
  padding: calc(16px + var(--safe-t)) 20px calc(28px + var(--safe-b));
  background:
    radial-gradient(ellipse at 50% 0%, rgba(176,42,58,0.16), transparent 50%),
    var(--bg);
}
.atelier { max-width: 640px; margin: 0 auto; }
.palco-bonequinho {
  height: 210px;
  display: grid;
  place-items: center;
  margin: 8px auto 20px;
  padding: 18px 0 10px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(226,193,122,0.14), transparent 60%),
    linear-gradient(180deg, #181015, #0c090c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
.bonequinho.vitrine {
  position: relative;
  left: auto;
  top: auto;
  transform: scale(2.7);
  width: 36px;
  height: 66px;
  z-index: 1;
  filter: drop-shadow(0 8px 6px rgba(0,0,0,0.55));
}

.opcoes fieldset {
  border: 0;
  margin: 0 0 14px;
  padding: 0;
}
.opcoes legend {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(226,193,122,0.25);
  background: #141015;
  color: var(--cream);
  font-size: 0.8rem;
  font-weight: 500;
  width: auto;
}
.chip.ativa {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(226,193,122,0.22);
  background: #1c1610;
}
.chip.pele {
  width: 36px;
  padding: 0;
  border-radius: 50%;
}
.chip.pele i {
  display: block;
  width: 22px;
  height: 22px;
  margin: 6px auto;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.chip.cor-cabelo { width: 36px; padding: 0; border-radius: 50%; }
.chip.cor-cabelo i {
  display: block;
  width: 22px; height: 22px;
  margin: 6px auto;
  border-radius: 50%;
}

.roupas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.roupa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  border-radius: 14px;
  border: 1px solid rgba(226,193,122,0.22);
  background: #141015;
  color: var(--cream);
  width: auto;
  height: auto;
  min-height: 92px;
}
.roupa.ativa {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(226,193,122,0.2);
  background: #1c1610;
}
.roupa .mini-look {
  width: 28px;
  height: 48px;
  position: relative;
  transform: scale(1.15);
}
.roupa .mini-look .bonequinho { position: relative; left: auto; top: auto; transform: none; height: 48px; width: 26px; filter: none; }
.roupa span.nome-look {
  font-size: 0.68rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  color: var(--muted);
}
.roupa.ativa span.nome-look { color: var(--gold); }
#tela-bonequinho .btn.largo { width: 100%; margin-top: 8px; }

/* Skin, hair color */
.bonequinho[data-skin="s1"] { --skin: #f6e0c8; --skin-2: #e0b48a; }
.bonequinho[data-skin="s2"] { --skin: #efd0a8; --skin-2: #d09a6a; }
.bonequinho[data-skin="s3"] { --skin: #e0b07a; --skin-2: #b07848; }
.bonequinho[data-skin="s4"] { --skin: #c48a54; --skin-2: #8a5630; }
.bonequinho[data-skin="s5"] { --skin: #8d5a36; --skin-2: #5a3218; }
.bonequinho[data-skin="s6"] { --skin: #5a3824; --skin-2: #2e1a10; }
.bonequinho[data-cor="preto"] { --hair: #1a1210; }
.bonequinho[data-cor="castanho"] { --hair: #4a2e18; }
.bonequinho[data-cor="loiro"] { --hair: #e0c070; }
.bonequinho[data-cor="ruivo"] { --hair: #b44820; }

.bonequinho .cabeca {
  background: radial-gradient(circle at 35% 30%, var(--skin, #f3d2b8), var(--skin-2, #c99572) 70%);
}
.bonequinho .cabelo { background: var(--hair, #3d2a1c); }

/* Hair styles */
.bonequinho[data-hair="curto"] .cabelo {
  width: 20px; height: 12px; top: -3px; border-radius: 10px 10px 4px 4px;
}
.bonequinho[data-hair="medio"] .cabelo {
  width: 22px; height: 16px; top: -3px; border-radius: 11px 11px 8px 8px;
}
.bonequinho[data-hair="longo"] .cabelo {
  width: 22px; height: 26px; top: -2px; border-radius: 12px 12px 10px 10px; z-index: 1;
}
.bonequinho[data-hair="cacheado"] .cabelo {
  width: 24px; height: 16px; top: -5px; border-radius: 50% 50% 40% 40%;
  box-shadow: 6px 4px 0 var(--hair), -6px 4px 0 var(--hair);
}
.bonequinho[data-hair="raspado"] .cabelo {
  width: 18px; height: 6px; top: 0; border-radius: 8px 8px 2px 2px; opacity: 0.7;
}
.bonequinho[data-hair="coque"] .cabelo {
  width: 20px; height: 12px; top: -3px; border-radius: 10px 10px 4px 4px;
}
.bonequinho[data-hair="coque"] .cabelo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 10px; height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--hair);
}

/* Hats */
.bonequinho .chapeu {
  position: absolute;
  left: 50%;
  z-index: 4;
  pointer-events: none;
  transform: translateX(-50%);
  background: #222;
}
.bonequinho[data-hat="nenhum"] .chapeu { display: none; }
.bonequinho[data-hat="bone"] .chapeu {
  top: -7px;
  width: 22px;
  height: 10px;
  border-radius: 11px 11px 2px 2px;
  background: #1c1c1c;
}
.bonequinho[data-hat="bone"] .chapeu::before {
  content: "";
  position: absolute;
  right: -8px;
  top: 5px;
  width: 11px;
  height: 4px;
  background: #1c1c1c;
  border-radius: 0 3px 3px 0;
}
.bonequinho[data-hat="gorro"] .chapeu {
  top: -9px;
  width: 22px;
  height: 16px;
  border-radius: 12px 12px 3px 3px;
  background: #7a2430;
  box-shadow: inset 0 -3px 0 #5a1420;
}
.bonequinho[data-hat="gorro"] .chapeu::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 7px; height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #f0e6d8;
}
.bonequinho[data-hat="bucket"] .chapeu {
  top: -4px;
  width: 26px;
  height: 10px;
  border-radius: 12px 12px 2px 2px;
  background: #3a5a38;
  box-shadow: 0 6px 0 -3px #3a5a38;
}

/* Outfits */
.bonequinho[data-outfit="box-vermelho"] .tronco {
  background: #c41e2a;
  width: 18px;
}
.bonequinho[data-outfit="box-vermelho"] .detalhe {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 11px;
  height: 7px;
  transform: translateX(-50%);
  background: #8a1018;
  border: 1px solid rgba(255,230,230,0.35);
  border-radius: 1px;
}
.bonequinho[data-outfit="monograma-luxo"] .tronco {
  width: 19px;
  background:
    repeating-linear-gradient(45deg, #9a7448 0 3px, #6e4e2c 3px 4px),
    repeating-linear-gradient(-45deg, #c4a06a 0 3px, transparent 3px 6px);
  background-color: #8a6238;
  box-shadow: inset 0 1px 0 rgba(255,220,160,0.3);
}
.bonequinho[data-outfit="track-retro"] .tronco {
  background: linear-gradient(90deg, #1c3a68 0 4px, #d8c8a0 4px 6px, #8a2030 6px 8px, #1c3a68 8px 100%);
  width: 18px;
}
.bonequinho[data-outfit="conjunto-pista"] .tronco {
  background: linear-gradient(90deg, #1a1a1a 0 5px, #e8e8e8 5px 7px, #c9a35a 7px 9px, #1a1a1a 9px 100%);
  width: 18px;
}
.bonequinho[data-outfit="conjunto-pista"] .perna,
.bonequinho[data-outfit="track-retro"] .perna {
  background: #1a1a1a;
}
.bonequinho[data-outfit="puffer"] .tronco {
  width: 20px;
  background:
    repeating-linear-gradient(180deg, #2a3a28 0 4px, #1a2418 4px 5px);
  border-radius: 8px 8px 5px 5px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
.bonequinho[data-outfit="moletom"] .tronco {
  width: 20px;
  background: #3a3a42;
  border-radius: 8px 8px 5px 5px;
}
.bonequinho[data-outfit="moletom"] .tronco::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 16px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 8px 8px 0 0;
  background: #3a3a42;
  z-index: 0;
}
.bonequinho[data-hat="nenhum"][data-outfit="moletom"] .tronco::before { opacity: 0.95; }

.bonequinho .detalhe { display: block; pointer-events: none; }
.bonequinho .tronco { position: absolute; overflow: hidden; }

/* Seated tweaks for hats/hair */
.poltrona .bonequinho.sentado .chapeu { transform: translateX(-50%) scale(0.9); }
.poltrona .bonequinho.sentado[data-hair="longo"] .cabelo { height: 14px; }
.mini-cinema .poltrona .bonequinho.sentado .chapeu { transform: translateX(-50%) scale(0.8); }

.link-bonequinho {
  display: block;
  text-align: center;
  margin: 4px auto 0;
  font-size: 0.78rem;
  color: var(--muted);
  background: none;
  border: 0;
  width: auto;
  height: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 820px) {
  .palco-bonequinho { height: 170px; }
  .bonequinho.vitrine { transform: scale(2.85); }
  .roupas { grid-template-columns: repeat(2, 1fr); }
}

.roupa .mini-look .bonequinho,
.roupa .mini-look .bonequinho.sentado {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: 22px;
  height: 36px;
  filter: none;
}
.roupa .mini-look .bonequinho.sentado .tronco { top: 14px; }

#tela-bonequinho { overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 480px) {
  .roupas { grid-template-columns: repeat(2, 1fr); }
  .palco-bonequinho { height: 150px; margin-bottom: 14px; }
  .bonequinho.vitrine { transform: scale(2.7); }
  #tela-bonequinho { padding-left: 16px; padding-right: 16px; }
}

.link-bonequinho { color: var(--gold); }
@media (min-width: 860px) {
  .atelier {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 12px 28px;
    align-items: start;
    max-width: 860px;
  }
  .palco-bonequinho {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 320px;
    margin: 0;
    position: sticky;
    top: 12px;
  }
  .bonequinho.vitrine { transform: scale(3.1); }
  .opcoes { grid-column: 2; grid-row: 1; }
  .rodape-bonequinho {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 4px;
  }
}



/* —— Mobile layout: bonequinho, nome, poltronas (desktop 860+ unchanged) —— */
@media (max-width: 859px) {
  body[data-tela="bonequinho"] #tela-bonequinho {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    padding: calc(8px + var(--safe-t)) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l));
  }
  #tela-bonequinho .topo {
    flex-shrink: 0;
    margin-bottom: 2px;
    gap: 8px;
  }
  #tela-bonequinho .titulo-sala {
    flex-shrink: 0;
    margin: 0 0 8px;
  }
  #tela-bonequinho .titulo-sala h1 { font-size: 1.45rem; }
  #tela-bonequinho .titulo-sala p {
    font-size: 0.78rem;
    line-height: 1.3;
    margin-top: 2px;
  }
  #tela-bonequinho .atelier {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  #tela-bonequinho .palco-bonequinho {
    flex: 0 0 auto;
    height: 108px;
    min-height: 108px;
    margin: 0 0 8px;
    padding: 6px 0 4px;
    border-radius: 14px;
    position: sticky;
    top: 0;
    z-index: 3;
  }
  #tela-bonequinho .bonequinho.vitrine { transform: scale(1.7); }
  #tela-bonequinho .opcoes {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 6px;
  }
  #tela-bonequinho .topo,
  #tela-poltronas .topo,
  #tela-animacao .topo {
    gap: 8px;
    max-width: 100%;
    min-width: 0;
  }
  #tela-bonequinho .marca.compacta,
  #tela-poltronas .marca.compacta,
  #tela-animacao .marca.compacta {
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
  }
  #tela-bonequinho .marca.compacta .marca-icone,
  #tela-poltronas .marca.compacta .marca-icone,
  #tela-animacao .marca.compacta .marca-icone { width: 22px; height: 22px; }
  #tela-bonequinho .marca.compacta .marca-nossa,
  #tela-poltronas .marca.compacta .marca-nossa,
  #tela-animacao .marca.compacta .marca-nossa { font-size: 1.15rem; }
  #tela-bonequinho .marca.compacta .marca-cine,
  #tela-poltronas .marca.compacta .marca-cine,
  #tela-animacao .marca.compacta .marca-cine { font-size: 0.52rem; letter-spacing: 0.28em; }
  #tela-bonequinho .ola,
  #tela-poltronas .ola,
  #tela-animacao .ola { font-size: 0.8rem; flex: 0 0 auto; white-space: nowrap; }
  #tela-bonequinho .opcoes fieldset {
    margin: 0 0 10px;
    min-width: 0;
    max-width: 100%;
  }
  #tela-bonequinho .opcoes legend { margin-bottom: 6px; font-size: 0.66rem; }
  #tela-bonequinho .chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 8px;
    margin: 0 -2px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  #tela-bonequinho .chips::-webkit-scrollbar { display: none; height: 0; }
  #tela-bonequinho .chip { flex: 0 0 auto; }
  #tela-bonequinho .roupas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #tela-bonequinho .roupa {
    min-width: 0;
    min-height: 0;
    width: 100%;
    padding: 8px 6px 6px;
  }
  #tela-bonequinho .roupa span.nome-look {
    font-size: 0.64rem;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    width: 100%;
  }
  #tela-bonequinho .rodape-bonequinho {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0;
    padding: 8px 0 calc(10px + var(--safe-b));
    background: linear-gradient(180deg, transparent, var(--bg) 10px);
  }
  #tela-bonequinho .rodape-bonequinho .btn.largo,
  #tela-bonequinho .btn.largo {
    width: 100%;
    margin: 0;
  }

  /* Name: allow scroll if the form is taller than the screen; don't clip */
  body[data-tela="nome"] #tela-nome {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 100dvh;
    padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
  }

  /* Seats: header stays put, theater can scroll, Sentar always reachable */
  body[data-tela="poltronas"] #tela-poltronas,
  body[data-tela="animacao"] #tela-animacao {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    padding: calc(8px + var(--safe-t)) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l));
  }
  #tela-poltronas .topo,
  #tela-animacao .topo,
  #tela-poltronas .titulo-sala,
  #tela-animacao .titulo-sala {
    flex-shrink: 0;
  }
  #tela-poltronas .titulo-sala h1,
  #tela-animacao .titulo-sala h1 { font-size: 1.45rem; }
  #tela-poltronas .titulo-sala p,
  #tela-animacao .titulo-sala p { font-size: 0.78rem; }
  #tela-poltronas .teatro,
  #tela-animacao .teatro {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    margin: 4px auto 0;
    padding: 4px 0 8px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #tela-poltronas .tela-cinema,
  #tela-animacao .tela-cinema { height: 28px; margin-bottom: 14px; }
  #tela-poltronas .plateia,
  #tela-animacao .plateia { gap: 16px; }
  #tela-poltronas .legenda {
    flex-shrink: 0;
    margin: 4px 0 0;
    gap: 8px 12px;
  }
  #tela-poltronas .barra-acao {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 5;
    width: 100%;
    margin: 0;
    padding: 8px 0 calc(10px + var(--safe-b));
    background: linear-gradient(180deg, transparent, var(--bg) 10px);
  }
}

@media (max-width: 859px) and (max-height: 700px) {
  #tela-bonequinho .titulo-sala p { display: none; }
  #tela-bonequinho .palco-bonequinho {
    height: 88px;
    min-height: 88px;
  }
  #tela-bonequinho .bonequinho.vitrine { transform: scale(1.45); }
  body[data-tela="nome"] #tela-nome { justify-content: flex-start; }
  #tela-poltronas .tela-cinema,
  #tela-animacao .tela-cinema { height: 22px; margin-bottom: 8px; }
  #tela-poltronas .plateia,
  #tela-animacao .plateia { gap: 10px; }
  #tela-poltronas .fileira,
  #tela-animacao .fileira { gap: 8px; }
  #tela-poltronas .loveseat,
  #tela-animacao .loveseat { padding: 10px 4px 4px; }
  #tela-poltronas .poltrona,
  #tela-animacao .poltrona { width: 46px; height: 58px; }
}


/* —— Screen share (phase 2) —— */
.share-video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050308;
  z-index: 3;
}
.player.modo-share .share-video { display: block; }
.player.modo-share .cartaz,
.player.modo-share #yt-host,
.player.modo-share #video,
.player.modo-share .controles { visibility: hidden; }
.share-overlay {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  z-index: 4;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}
.share-overlay[hidden] { display: none; }
.share-status {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cream);
}
.share-qualidade {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--gold);
  font-weight: 500;
}
.share-aviso {
  margin-top: 4px;
  font-size: 0.68rem;
  color: var(--muted);
  max-width: 36rem;
  line-height: 1.35;
}
.acoes-share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.btn-share {
  height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(226,193,122,0.35);
  background: #141015;
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
  width: auto;
}
.btn-share:hover { border-color: var(--gold); }
.btn-share.ativa {
  background: #2a1214;
  border-color: var(--velvet-lit);
  color: #f0d0d0;
}
body.precisa-toque-share .unlock { display: grid; }
@media (max-width: 820px) {
  .btn-share { width: 100%; }
  .acoes-share { width: 100%; }
}


/* —— Welcome intro —— */
body[data-tela="intro"] #tela-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background: #050308;
}
.intro-palco {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.intro-fundo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(226,193,122,0.16), transparent 42%),
    radial-gradient(ellipse at 50% 100%, rgba(80,12,20,0.45), transparent 55%),
    linear-gradient(180deg, #12080c 0%, #07050a 55%, #050308 100%);
}
.intro-tela-cinema {
  position: absolute;
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, 72%);
  height: 22%;
  min-height: 110px;
  background: linear-gradient(180deg, #2a2218 0%, #0c0a0c 100%);
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  box-shadow: 0 0 80px 16px rgba(226,193,122,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.55em;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(246,240,228,0.22);
  opacity: 0;
  animation: intro-tela 8.2s ease forwards;
}
.intro-feixe {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 8px;
  height: 70%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,230,180,0.0), rgba(255,230,180,0.22) 18%, rgba(255,220,160,0.08) 100%);
  clip-path: polygon(50% 0, 50% 0, 220% 100%, -120% 100%);
  filter: blur(1px);
  opacity: 0;
  animation: intro-feixe 8.2s ease forwards;
  pointer-events: none;
}
.intro-feixe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,240,200,0.18), transparent 60%);
  filter: blur(16px);
}
.intro-cortina {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background:
    repeating-linear-gradient(90deg,
      #4a0d16 0 16px,
      #5c101c 16px 22px,
      #3a0a12 22px 34px,
      #641320 34px 40px);
  z-index: 6;
}
.intro-cortina.esq {
  left: 0;
  transform-origin: left center;
  box-shadow: inset -30px 0 50px rgba(0,0,0,0.45), 0 0 40px rgba(0,0,0,0.5);
  animation: intro-abre-e 8.2s cubic-bezier(.65,.05,.2,1) forwards;
}
.intro-cortina.dir {
  right: 0;
  left: auto;
  transform-origin: right center;
  box-shadow: inset 30px 0 50px rgba(0,0,0,0.45), 0 0 40px rgba(0,0,0,0.5);
  animation: intro-abre-d 8.2s cubic-bezier(.65,.05,.2,1) forwards;
}
.intro-poeira {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 30%, rgba(255,230,190,0.7), transparent),
    radial-gradient(1px 1px at 28% 62%, rgba(255,230,190,0.55), transparent),
    radial-gradient(1.4px 1.4px at 47% 22%, rgba(255,240,210,0.8), transparent),
    radial-gradient(1px 1px at 63% 48%, rgba(255,230,190,0.5), transparent),
    radial-gradient(1.2px 1.2px at 78% 36%, rgba(255,230,190,0.65), transparent),
    radial-gradient(1px 1px at 18% 78%, rgba(255,230,190,0.4), transparent),
    radial-gradient(1.3px 1.3px at 86% 70%, rgba(255,230,190,0.6), transparent),
    radial-gradient(1px 1px at 54% 84%, rgba(255,230,190,0.45), transparent),
    radial-gradient(1px 1px at 35% 40%, rgba(255,230,190,0.5), transparent),
    radial-gradient(1.2px 1.2px at 70% 18%, rgba(255,230,190,0.55), transparent);
  animation: intro-poeira 8.2s linear forwards;
  opacity: 0;
  mix-blend-mode: screen;
}
.intro-marca {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -40%);
  z-index: 5;
  text-align: center;
  width: min(560px, 88%);
}
.intro-bemvindo {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  color: var(--muted);
  letter-spacing: 0.04em;
  opacity: 0;
  animation: intro-sobe 8.2s ease forwards;
}
.intro-wordmark {
  margin: 10px auto 0;
  opacity: 0;
  filter: drop-shadow(0 0 0 rgba(226,193,122,0));
  animation: intro-marca 8.2s ease forwards;
}
.intro-wordmark .marca-nossa {
  font-size: clamp(2.8rem, 9vw, 5rem);
  line-height: 0.86;
}
.intro-wordmark .marca-cine {
  font-size: clamp(0.82rem, 2.4vw, 1.15rem);
  letter-spacing: 0.5em;
  margin-top: 10px;
}
.intro-wordmark .marca-icone {
  width: clamp(46px, 8vw, 72px);
  height: clamp(46px, 8vw, 72px);
  margin-bottom: 10px;
}
.intro-ola {
  margin-top: 28px;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.4vw, 2rem);
  color: var(--cream);
  opacity: 0;
  animation: intro-ola 8.2s ease forwards;
}
.intro-ola strong { color: var(--gold); font-weight: 600; }
.intro-controles {
  position: absolute;
  right: calc(16px + var(--safe-r));
  bottom: calc(16px + var(--safe-b));
  z-index: 8;
  display: flex;
  gap: 8px;
}
.btn-intro {
  height: 40px;
  padding: 0 14px;
  width: auto;
  border-radius: 999px;
  border: 1px solid rgba(226,193,122,0.3);
  background: rgba(10,8,10,0.7);
  color: var(--cream);
  font-size: 0.8rem;
  font-weight: 500;
  backdrop-filter: blur(8px);
}
.btn-intro:hover { border-color: var(--gold); color: var(--gold); }

@keyframes intro-abre-e {
  0%, 6% { transform: translateX(0); }
  28%, 86% { transform: translateX(-102%); }
  100% { transform: translateX(-102%); opacity: 0.3; }
}
@keyframes intro-abre-d {
  0%, 6% { transform: translateX(0); }
  28%, 86% { transform: translateX(102%); }
  100% { transform: translateX(102%); opacity: 0.3; }
}
@keyframes intro-feixe {
  0%, 8% { opacity: 0; transform: translateX(-50%) scaleY(0.4); }
  22% { opacity: 0.85; transform: translateX(-50%) scaleY(1); }
  88% { opacity: 0.75; }
  100% { opacity: 0; }
}
@keyframes intro-tela {
  0%, 10% { opacity: 0; }
  24%, 86% { opacity: 1; }
  100% { opacity: 0.4; }
}
@keyframes intro-poeira {
  0%, 12% { opacity: 0; transform: translateY(12px); }
  30% { opacity: 0.85; }
  100% { opacity: 0.3; transform: translateY(-28px); }
}
@keyframes intro-sobe {
  0%, 28% { opacity: 0; transform: translateY(16px); }
  40%, 86% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}
@keyframes intro-marca {
  0%, 34% { opacity: 0; transform: scale(0.92); filter: drop-shadow(0 0 0 rgba(226,193,122,0)); }
  48% { opacity: 1; transform: scale(1.03); filter: drop-shadow(0 0 28px rgba(226,193,122,0.55)); }
  58%, 86% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 16px rgba(226,193,122,0.35)); }
  100% { opacity: 0; }
}
@keyframes intro-ola {
  0%, 54% { opacity: 0; transform: translateY(12px); }
  66%, 88% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}

@media (max-width: 859px) {
  .intro-tela-cinema { width: 86%; top: 10%; height: 18%; min-height: 86px; }
  .intro-marca { top: 48%; }
  .intro-ola { margin-top: 20px; }
  .intro-controles { left: calc(12px + var(--safe-l)); right: calc(12px + var(--safe-r)); justify-content: space-between; }
  .btn-intro { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #tela-intro * { animation: none !important; }
  .intro-cortina.esq { transform: translateX(-102%); }
  .intro-cortina.dir { transform: translateX(102%); }
  .intro-feixe, .intro-tela-cinema, .intro-poeira,
  .intro-bemvindo, .intro-wordmark, .intro-ola { opacity: 1; transform: none; filter: none; }
}

/* —— Seat gestures —— */
#gesto-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 55;
}
.pipoca-grao {
  position: absolute;
  width: 9px;
  height: 8px;
  margin: 0;
  border-radius: 50% 40% 50% 45%;
  background: radial-gradient(circle at 35% 35%, #fff6d8, #e2c17a 60%, #b8893c);
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
  offset-path: none;
  animation: pipoca-arco 0.9s cubic-bezier(.2,.7,.25,1) both;
  animation-delay: var(--delay, 0s);
  left: var(--x0);
  top: var(--y0);
}
@keyframes pipoca-arco {
  0% { transform: translate(0, 0) scale(0.6) rotate(0); opacity: 1; }
  45% { transform: translate(calc(var(--x) * 0.5), calc(var(--y) * 0.4 - 46px)) scale(1) rotate(140deg); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(0.75) rotate(280deg); opacity: 0; }
}
.bonequinho.gesto-pipoca .tronco {
  animation: arremesso 0.7s ease;
}
@keyframes arremesso {
  0% { transform: translateX(-50%) rotate(0); }
  30% { transform: translateX(-50%) rotate(-28deg) translateY(-3px); }
  100% { transform: translateX(-50%) rotate(0); }
}
.bonequinho.gesto-recoil {
  animation: recoil 0.5s ease;
}
@keyframes recoil {
  0%, 100% { transform: translateX(-50%); }
  28% { transform: translateX(-50%) translateY(-4px) rotate(-10deg); }
  55% { transform: translateX(-50%) rotate(8deg); }
}
.bonequinho .shiu-mao,
.bonequinho .fala-shiu { display: none; }
.bonequinho.gesto-shiu .shiu-mao {
  display: block;
  position: absolute;
  left: 62%;
  top: 8px;
  width: 6px;
  height: 10px;
  border-radius: 4px;
  background: var(--skin, #e0b07a);
  z-index: 5;
  box-shadow: 0 -3px 0 -1px var(--skin, #e0b07a);
  transform: rotate(-18deg);
}
.bonequinho.gesto-shiu {
  animation: shiu-lean 1.6s ease;
}
@keyframes shiu-lean {
  0%, 100% { transform: translateX(-50%); }
  20%, 70% { transform: translateX(-50%) translateY(-3px) rotate(-6deg); }
}
.bonequinho .fala-shiu {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a1008;
  background: var(--gold);
  border-radius: 8px 8px 8px 2px;
  padding: 2px 6px;
  white-space: nowrap;
  z-index: 6;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.bonequinho.gesto-shiu .fala-shiu { display: block; animation: shiu-fala 1.6s ease; }
@keyframes shiu-fala {
  0% { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.8); }
  18%, 75% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}
.mini-cinema .bonequinho.gesto-shiu .fala-shiu { font-size: 0.52rem; top: -14px; padding: 1px 4px; }
.mini-cinema .bonequinho .shiu-mao { top: 6px; width: 4px; height: 7px; }

.barra-gestos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  justify-content: center;
}
.barra-gestos button {
  height: 32px;
  padding: 0 10px;
  width: auto;
  border-radius: 999px;
  border: 1px solid rgba(226,193,122,0.22);
  background: #141015;
  color: var(--cream);
  font-size: 0.72rem;
  font-weight: 500;
}
.barra-gestos button:hover { border-color: var(--gold); }
.barra-gestos button[disabled] { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 820px) {
  .barra-gestos {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .barra-gestos::-webkit-scrollbar { display: none; }
  .barra-gestos button { flex: 0 0 auto; }
}