/* Base visual dos jogos dos totens Affusão (usada com comum/base.js).
   Palco de 1080×1920 com a identidade da marca: fundo preto, grafite e um só destaque verde-limão. */
:root {
  --bg: #0b0b0b; --bg-2: #111111; --card: #1b1b1b; --card-2: #242424; --line: #3a3a3a;
  --neon: #c8f31d; --neon-dark: #86a812; --fg: #ffffff; --muted: #c9c9c9; --dim: #8f8f8f;
  --titulo: "Outfit", system-ui, sans-serif; --corpo: "Inter", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--corpo);
  overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: none; }
.neon { color: var(--neon); }

#palco { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 0 0; overflow: hidden; background: var(--bg); }

/* Fundo e topo */
.j-brilho { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 58%, rgba(200, 243, 29, 0.1) 0, rgba(200, 243, 29, 0) 50%); }
.j-canto { position: absolute; right: 0; top: 0; width: 230px; height: 230px; border-bottom-left-radius: 100%; background: var(--neon); opacity: 0.92; pointer-events: none; }
.j-folhas { position: absolute; left: -150px; bottom: -120px; width: 780px; opacity: 0.06; pointer-events: none; }
.j-logo { position: absolute; left: 350px; top: 104px; width: 380px; height: auto; z-index: 3; }
.j-titulo { position: absolute; left: 0; top: 270px; width: 100%; margin: 0; z-index: 2; text-align: center; font: 800 120px/1 var(--titulo); letter-spacing: -0.035em; white-space: nowrap; pointer-events: none; }
.j-sub { position: absolute; left: 0; top: 424px; width: 100%; margin: 0; z-index: 2; text-align: center; font: 500 40px/1.2 var(--corpo); color: var(--muted); pointer-events: none; transition: color 0.3s, opacity 0.3s; }
.j-sub.alerta { color: var(--neon); font-weight: 700; }
.j-sub.oculto { opacity: 0; }
.j-cena { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.j-rodape { position: absolute; left: 0; bottom: 64px; width: 100%; margin: 0; z-index: 2; text-align: center; font: 500 30px/1 var(--corpo); color: var(--dim); letter-spacing: 0.08em; pointer-events: none; }

/* Convite quando ninguém está jogando */
.j-convite { position: absolute; left: 50%; top: var(--convite-y, 1690px); z-index: 6; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -50%);
  padding: 34px 70px; border-radius: 999px; background: var(--neon); color: var(--bg); font: 800 50px/1 var(--titulo); letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 0 0 14px var(--bg), 0 30px 90px rgba(0, 0, 0, 0.7); transition: opacity 0.4s; }
.j-convite.visivel { opacity: 1; animation: jPulsar 1.6s ease-in-out infinite; }
@keyframes jPulsar { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.06); } }

/* Placar em blocos (tempo, pontos...) */
.j-placar { position: absolute; left: 48px; top: 512px; width: 984px; display: flex; z-index: 2; }
.j-bloco { flex: 1; margin: 0 12px; padding: 22px 10px 24px; border-radius: 32px; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); text-align: center; }
.j-bloco span { display: block; font: 700 26px/1 var(--corpo); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.j-bloco b { display: block; margin-top: 12px; font: 800 64px/1 var(--titulo); font-variant-numeric: tabular-nums; }
.j-bloco.urgente { box-shadow: inset 0 0 0 3px var(--neon); }
.j-bloco.urgente b, .j-bloco.destaque b { color: var(--neon); }

/* Camadas: resultado e painel do operador */
.j-camada { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: rgba(11, 11, 11, 0.9); opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.j-camada.aberta { opacity: 1; pointer-events: auto; }
.j-cartao { width: 920px; padding: 90px 70px 80px; border-radius: 56px; background: var(--card); text-align: center;
  box-shadow: 0 0 0 3px var(--line), 0 40px 120px rgba(0, 0, 0, 0.6); transform: scale(0.94); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.j-camada.aberta .j-cartao { transform: none; }
.j-chapeu { font: 700 40px/1 var(--corpo); letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon); }
.j-cartao h2 { margin: 36px 0 0; font: 800 112px/1.02 var(--titulo); letter-spacing: -0.03em; text-wrap: balance; }
.j-texto { margin: 36px 0 0; font: 500 42px/1.35 var(--corpo); color: var(--muted); }
.j-numeros { margin: 26px 0 0; font: 700 40px/1.3 var(--titulo); color: var(--fg); }
.j-texto:empty, .j-numeros:empty { display: none; }
.j-extra { margin-top: 30px; }
.j-extra:empty { display: none; }
.j-botao { display: inline-flex; align-items: center; justify-content: center; margin-top: 60px; min-width: 480px; padding: 38px 64px; border-radius: 999px;
  background: var(--neon); color: var(--bg); font: 800 50px/1 var(--titulo); box-shadow: 0 18px 60px rgba(200, 243, 29, 0.3); }
.j-botao:active { transform: scale(0.97); }
.j-contagem { margin-top: 34px; font: 500 32px/1 var(--corpo); color: var(--dim); }

/* Ranking */
.j-ranking { margin: 0; padding: 0; list-style: none; text-align: left; }
.j-ranking li { display: flex; align-items: center; padding: 20px 6px; border-bottom: 2px solid var(--line); font: 700 40px/1 var(--titulo); }
.j-ranking li i { flex: 0 0 auto; width: 76px; font-style: normal; color: var(--dim); }
.j-ranking li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-ranking li b { flex: 0 0 auto; margin-left: 20px; font-variant-numeric: tabular-nums; }
.j-ranking li:first-child b { color: var(--neon); }
.j-ranking li.voce { margin: 0 -18px; padding-left: 24px; padding-right: 24px; border-radius: 22px; border-bottom-color: transparent; background: var(--neon); color: var(--bg); }
.j-ranking li.voce i, .j-ranking li.voce b { color: var(--bg); }
.j-ranking li.vazio { display: block; font: 500 34px/1.3 var(--corpo); color: var(--dim); }

/* Painel do operador */
.j-cartao-painel { width: 960px; padding: 70px 60px; text-align: left; }
.j-cartao-painel h2 { margin-top: 24px; font-size: 76px; }
.j-resumo { margin: 24px 0 12px; font: 600 36px/1.3 var(--corpo); color: var(--muted); }
.j-painel-conteudo { max-height: 900px; overflow: hidden; }
.j-linha { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; border-bottom: 2px solid var(--line); }
.j-linha b { display: block; font: 700 42px/1.15 var(--titulo); }
.j-linha small { display: block; margin-top: 10px; font: 500 30px/1.2 var(--corpo); color: var(--dim); }
.j-ajuste { display: flex; align-items: center; margin-left: 24px; }
.j-ajuste > * + * { margin-left: 16px; }
.j-ajuste button { width: 88px; height: 88px; border-radius: 50%; background: var(--card-2); box-shadow: inset 0 0 0 2px var(--line); font: 700 50px/1 var(--titulo); }
.j-ajuste output { min-width: 110px; text-align: center; font: 800 48px/1 var(--titulo); }
.j-acoes { display: flex; flex-wrap: wrap; margin: 34px -10px 0; }
.j-acoes button { flex: 1 1 40%; margin: 10px; padding: 32px 20px; border-radius: 28px; background: var(--card-2); box-shadow: inset 0 0 0 2px var(--line); font: 700 36px/1.1 var(--titulo); }
.j-acoes button.principal { background: var(--neon); color: var(--bg); box-shadow: none; }

.j-confete { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; z-index: 40; pointer-events: none; }
.j-tremer { animation: jTremer 0.4s ease-in-out; }
@keyframes jTremer { 20%, 60% { transform: translateX(-12px); } 40%, 80% { transform: translateX(12px); } }