/* Impostor · identidade "Auditório de Domingo": estúdio escuro, papelaria colorida, letreiro de lâmpadas. */
:root {
  --estudio: #0c1a20;
  --tinta: #11242b;
  --tinta-2: #1b3540;
  --papel: #fff4e2;
  --papel-2: #f1e1c4;
  --papelao: #d2a577;
  --papelao-2: #b98b5c;
  --cortina: #e3342f;
  --lampada: #ffc93c;
  --latao: #c49559;
  --amarela: #ffe45c;
  --verde: #b9f14b;
  --rosa: #ff5da8;
  --ceu: #7cc8ff;
  --p0: #ffc13d;
  --p1: #51adfa;
  --p2: #73d589;
  --p3: #f58bad;
  --display: 'Londrina Solid', 'Archivo', system-ui, sans-serif;
  --texto: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --marcador: 'Permanent Marker', 'Londrina Solid', cursive;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --kb: 0px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: var(--estudio); color: var(--papel); font-family: var(--texto); touch-action: manipulation; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
input { user-select: text; -webkit-user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }
input { font: inherit; }
h1, h2, h3, p { margin: 0; }
.ico { width: 1.3em; height: 1.3em; display: inline-block; vertical-align: middle; flex: none; --accent: var(--lampada); }
.invisivel { visibility: hidden; pointer-events: none; }
.grow { flex: 1; }
.muted { opacity: .72; }
.nota { font: 600 13px/1.35 var(--texto); opacity: .75; }
.nota.centro, .centro { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

/* ---------- Camadas ---------- */
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#shade { position: fixed; inset: 0; z-index: 1; pointer-events: none; transition: background .5s; }
body[data-screen="home"] #shade { background: linear-gradient(180deg, rgba(12,26,32,.55) 0%, rgba(12,26,32,0) 32%, rgba(12,26,32,0) 42%, rgba(12,26,32,.88) 72%); }
body[data-screen="salas"] #shade, body[data-screen="abrir"] #shade, body[data-screen="codigo"] #shade, body[data-screen="ranking"] #shade { background: rgba(12,26,32,.45); }
body[data-screen="game"] #shade { background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(12,26,32,.55)); }
body[data-screen="lobby"] #shade { background: linear-gradient(180deg, rgba(12,26,32,.6), rgba(12,26,32,0) 22%); }
#tags { position: fixed; inset: 0; z-index: 12; pointer-events: none; overflow: hidden; }
#app { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }
#grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .06; background-image: 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'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
/* Na partida (60 qps) o ruído sai: é uma camada de tela cheia a mais para o compositor misturar a cada quadro, e a 6 % ninguém nota. */
body[data-screen="game"] #grain { display: none; }

.screen { position: absolute; inset: 0; margin: 0 auto; max-width: 520px; display: flex; flex-direction: column; padding: calc(var(--safe-t) + 12px) 16px calc(var(--safe-b) + 12px); pointer-events: auto; animation: entra .35s ease both; }
.screen.sem-anim, .screen.sem-anim * { animation-delay: 0s !important; }
.screen.sem-anim { animation: none; }
.screen.sem-anim .assento { animation: none; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 52px; padding: 0 20px; border: 3px solid var(--tinta); border-radius: 14px; background: var(--lampada); color: var(--tinta); font: 400 22px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 5px 0 var(--tinta); transition: transform .08s, box-shadow .08s; }
.btn .ico { width: 1.15em; height: 1.15em; --accent: var(--papel); }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--tinta); }
.btn:disabled { filter: grayscale(.7); opacity: .7; }
.btn.big { width: 100%; min-height: 60px; font-size: 26px; }
.btn.small { min-height: 42px; padding: 0 14px; font-size: 18px; border-radius: 12px; box-shadow: 0 3px 0 var(--tinta); }
.btn.papel { background: var(--papel); }
.btn.verde { background: var(--verde); }
.btn.rosa { background: var(--rosa); }
.btn.amarela { background: var(--amarela); }
.btn.cortina { background: var(--cortina); color: var(--papel); }
.link { display: inline-flex; align-items: center; gap: 6px; font: 700 14px var(--texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.link .ico { width: 20px; height: 20px; }
.link.mini { font-size: 12px; }

.round-btn { position: relative; display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 50%; background: var(--papel); color: var(--tinta); border: 3px solid var(--tinta); box-shadow: 0 4px 0 var(--tinta); }
.round-btn .ico { width: 28px; height: 28px; }
.round-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); }
.round-btn.small { width: 44px; height: 44px; }
.round-btn.small .ico { width: 24px; height: 24px; }
.round-btn.mini { width: 32px; height: 32px; border-width: 2px; box-shadow: 0 2px 0 var(--tinta); }
.round-btn.mini .ico { width: 16px; height: 16px; }
.round-btn em { position: absolute; right: -8px; top: -8px; padding: 2px 6px; border-radius: 999px; background: var(--cortina); color: var(--papel); border: 2px solid var(--tinta); font: 400 13px/1.1 var(--display); font-style: normal; }

/* ---------- Letreiro de lâmpadas ---------- */
.letreiro { position: relative; align-self: center; margin: 14px auto 0; padding: 20px 28px 14px; border: 4px solid var(--latao); border-radius: 18px; background: linear-gradient(180deg, #1c333c, #0f2128); box-shadow: 0 0 0 3px var(--tinta), 0 8px 0 3px var(--tinta), inset 0 0 26px rgba(0,0,0,.65); text-align: center; transform: rotate(-1.5deg); }
.letreiro h1 { font: 900 clamp(46px, 15vw, 70px)/.9 var(--display); color: var(--papel); letter-spacing: .03em; text-shadow: 0 0 2px #fff, 0 0 16px rgba(255,201,60,.6), 3px 3px 0 var(--cortina), 6px 6px 0 var(--tinta); white-space: nowrap; }
.letreiro .sub { margin-top: 6px; font: 400 18px var(--marcador); color: var(--lampada); transform: rotate(-2deg); }
.letreiro .eye { position: relative; display: inline-block; width: .74em; height: .74em; margin: 0 .02em; vertical-align: -.02em; border-radius: 50%; background: var(--papel); border: .06em solid var(--tinta); box-shadow: 3px 3px 0 var(--cortina), 6px 6px 0 var(--tinta), 0 0 14px rgba(255,201,60,.5); }
.letreiro .eye i { position: absolute; left: 50%; top: 50%; width: .3em; height: .3em; margin: -.15em 0 0 -.15em; border-radius: 50%; background: var(--tinta); transition: transform .12s ease-out; }
.bulb { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: #6b5326; box-shadow: 0 0 0 2px var(--tinta); }
/* A lâmpada acesa é um pseudo-elemento que só anima opacidade: roda no compositor, sem recalcular estilo das 34 lâmpadas a cada quadro. */
.bulb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #fff1b8; box-shadow: 0 0 0 2px var(--tinta), 0 0 10px 3px rgba(255,201,60,.85); will-change: opacity; animation: bulbo 1.2s steps(1) infinite; animation-delay: calc(var(--i) * -.4s); }
@keyframes bulbo { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
.letreiro.pequeno { transform: rotate(-1.5deg) scale(.82); }

/* ---------- Ticker ---------- */
.ticker { display: flex; align-items: stretch; height: 30px; margin: 10px -16px calc(-1 * (var(--safe-b) + 12px)); padding-bottom: var(--safe-b); box-sizing: content-box; background: var(--cortina); border-top: 3px solid var(--tinta); color: var(--papel); overflow: hidden; }
.ticker-tag { display: grid; place-items: center; padding: 0 10px; background: var(--lampada); color: var(--tinta); font: 400 15px var(--display); letter-spacing: .04em; border-right: 3px solid var(--tinta); z-index: 1; }
.ticker-window { flex: 1; overflow: hidden; display: flex; align-items: center; }
.ticker-track { display: flex; align-items: center; width: max-content; animation: corre 60s linear infinite; }
.ticker-track span { font: 400 16px var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ticker-track i { width: 8px; height: 8px; margin: 0 14px; border-radius: 50%; background: var(--lampada); flex: none; }
@keyframes corre { to { transform: translateX(-50%); } }

/* ---------- Início ---------- */
.topbar { display: flex; align-items: center; gap: 10px; }
.me-chip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(12,26,32,.78); border: 2px solid rgba(255,244,226,.2); text-align: left; }
.me-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.me-text > b { font: 800 16px var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-text .faixa { align-self: flex-start; }
.me-text .xpbar { max-width: 150px; }
.menu { display: flex; flex-direction: column; gap: 16px; margin-bottom: 14px; }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cartolina { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 14px 14px; border: 3px solid var(--tinta); border-radius: 6px 12px 8px 10px; background: var(--c, var(--amarela)); color: var(--tinta); box-shadow: 0 6px 0 var(--tinta); transform: rotate(var(--r, 0deg)); text-align: left; transition: transform .1s; }
.cartolina::before { content: ''; position: absolute; top: -11px; left: 50%; width: 70px; height: 20px; background: rgba(255,244,226,.78); transform: translateX(-50%) rotate(-4deg); clip-path: polygon(3% 0, 97% 6%, 100% 100%, 0 94%); }
.cartolina:active { transform: rotate(var(--r, 0deg)) translateY(4px); box-shadow: 0 2px 0 var(--tinta); }
.cart-ico .ico { width: 46px; height: 46px; --accent: var(--papel); }
.cartolina.big .cart-ico .ico { width: 60px; height: 60px; }
.cart-txt { display: flex; flex-direction: column; min-width: 0; }
.cart-txt h3 { font: 400 26px/.95 var(--display); text-transform: uppercase; }
.cartolina.big .cart-txt h3 { font-size: 34px; }
.cart-txt p { margin-top: 3px; font: 700 13px/1.2 var(--texto); opacity: .8; }
.menu-row .cartolina { flex-direction: column; align-items: flex-start; gap: 6px; }
.live { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: var(--tinta); color: var(--papel); font: 800 12px var(--texto); }
.rec { width: 9px; height: 9px; border-radius: 50%; background: var(--cortina); box-shadow: 0 0 0 2px rgba(227,52,47,.35); animation: rec 1.2s infinite; display: inline-block; flex: none; }
@keyframes rec { 50% { opacity: .35; } }
.missoes { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 10px 12px; border-radius: 14px; background: rgba(12,26,32,.85); border: 2px solid rgba(255,244,226,.2); color: var(--papel); text-align: left; }
.missoes.compacta { flex-direction: row; align-items: center; gap: 10px; padding: 11px 14px; }
.missoes.compacta b { font: 400 17px var(--display); text-transform: uppercase; color: var(--lampada); letter-spacing: .02em; white-space: nowrap; }
.missoes.compacta em { font: 900 14px var(--texto); font-style: normal; }
.missoes.compacta small { margin-left: auto; font: 600 12px var(--texto); opacity: .7; white-space: nowrap; }
.m-pills { display: flex; gap: 4px; }
.m-pills i { width: 24px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--verde) var(--p, 0%), rgba(255,244,226,.2) 0); }
.m-pills i.ok { background: var(--verde); }
.missoes-head { display: flex; align-items: baseline; gap: 8px; }
.missoes-head b { font: 400 18px var(--display); text-transform: uppercase; color: var(--lampada); letter-spacing: .02em; }
.missoes-head em { font: 900 14px var(--texto); font-style: normal; }
.missoes-head small { margin-left: auto; font: 600 12px var(--texto); opacity: .7; }
.missao { display: grid; grid-template-columns: 1fr 64px 42px; align-items: center; gap: 8px; font-size: 13px; }
.missao.vazia { display: block; opacity: .8; }
.m-txt { display: flex; flex-direction: column; min-width: 0; }
.m-txt b { font-weight: 800; }
.m-txt small { opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-bar { height: 8px; border-radius: 4px; background: rgba(255,244,226,.18); overflow: hidden; }
.m-bar i { display: block; height: 100%; background: var(--verde); border-radius: 4px; transition: width .6s; }
.m-xp { font: 800 12px var(--texto); text-align: right; }
.missao.ok .m-xp { color: var(--verde); }
.missao.agora { animation: pisca .5s 4; }
@keyframes pisca { 50% { background: rgba(185,241,75,.25); } }
.home-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.home-foot .sep { width: 5px; height: 5px; border-radius: 50%; background: var(--papel); opacity: .5; }

/* ---------- Folhas (telas de papel) ---------- */
.sheet-screen { justify-content: flex-end; }
.folha { position: relative; max-height: 76dvh; overflow-y: auto; overscroll-behavior: contain; margin: 0 -16px calc(-1 * (var(--safe-b) + 12px)); padding: 16px 16px calc(var(--safe-b) + 20px); background: var(--papel); color: var(--tinta); border: 3px solid var(--tinta); border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -6px 0 rgba(0,0,0,.25); animation: sobe .35s cubic-bezier(.2,.9,.3,1.1) both; }
.folha.alta { height: 80dvh; max-height: 80dvh; }
.sem-anim .folha { animation: none; }
.folha-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.folha-head h2 { flex: 1; text-align: center; font: 400 30px/1 var(--display); text-transform: uppercase; }
.folha-head .head-gap { width: 44px; flex: none; }
.secao { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 10px; font: 400 20px var(--display); text-transform: uppercase; letter-spacing: .02em; }
.secao small { font: 600 12px var(--texto); text-transform: none; opacity: .6; letter-spacing: 0; }
.secao-mini { display: block; margin: 12px 0 6px; font: 800 11px var(--texto); text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
.folha .missao { color: var(--tinta); }
.folha .m-bar { background: rgba(17,36,43,.12); }
.folha .missao.ok .m-xp { color: #3d7a00; }
.campo { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; }
.campo span { font: 800 12px var(--texto); text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.campo input, .nome-input { width: 100%; padding: 12px 14px; border: 3px solid var(--tinta); border-radius: 12px; background: #fff; color: var(--tinta); font: 700 18px var(--texto); outline: 0; }
.campo input:focus, .nome-input:focus { box-shadow: 0 0 0 3px var(--lampada); }
.segmentado { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.segmentado button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 3px solid var(--tinta); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--tinta); }
.segmentado button .ico { width: 34px; height: 34px; }
.segmentado b { font: 400 20px var(--display); text-transform: uppercase; }
.segmentado small { font: 600 12px var(--texto); opacity: .7; }
.segmentado .on { background: var(--verde); }
.folha > .nota { margin: 4px 0 14px; }
.code-input { width: 100%; margin: 6px 0 16px; padding: 12px 0 10px .45em; border: 3px solid var(--tinta); border-radius: 16px; background: #fff; color: var(--tinta); font: 400 58px/1 var(--display); letter-spacing: .45em; text-align: center; text-transform: uppercase; outline: 0; }
.shake { animation: treme .4s; }
@keyframes treme { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.online-pill { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; font: 700 14px var(--texto); }
.room-list { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.ingresso { position: relative; display: flex; align-items: stretch; width: 100%; text-align: left; background: var(--amarela); color: var(--tinta); border: 3px solid var(--tinta); border-radius: 12px; box-shadow: 0 4px 0 var(--tinta); }
.ingresso::before, .ingresso::after { content: ''; position: absolute; right: 80px; width: 20px; height: 20px; border-radius: 50%; background: var(--papel); border: 3px solid var(--tinta); }
.ingresso::before { top: -12px; clip-path: inset(50% 0 0 0); }
.ingresso::after { bottom: -12px; clip-path: inset(0 0 50% 0); }
.ing-l { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; min-width: 0; }
.ing-l b { font: 400 22px/1 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ing-l small { display: flex; align-items: center; gap: 4px; font: 700 12px var(--texto); opacity: .8; }
.ing-l small .ico { width: 16px; height: 16px; }
.ing-seats { display: flex; gap: 5px; margin-top: 2px; }
.ing-seats i { width: 18px; height: 18px; border-radius: 50%; border: 2px dashed rgba(17,36,43,.45); }
.ing-seats i[style] { border: 2px solid var(--tinta); }
.ing-r { width: 90px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-left: 3px dashed var(--tinta); }
.ing-r small { font: 400 16px var(--display); }
.carimbo { padding: 3px 8px 1px; border: 3px solid var(--cortina); border-radius: 6px; color: var(--cortina); font: 400 18px var(--display); text-transform: uppercase; transform: rotate(-8deg); }
.ingresso.fechado { background: var(--papel-2); opacity: .8; }
.ingresso.fechado .carimbo { color: var(--tinta); border-color: var(--tinta); }
.vazio { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 8px; text-align: center; }
.vazio-ico .ico { width: 70px; height: 70px; --accent: var(--amarela); }
.vazio h3 { font: 400 24px var(--display); text-transform: uppercase; }
.vazio p { font: 600 14px var(--texto); opacity: .75; margin-bottom: 10px; }

/* ---------- Abas, ranking ---------- */
.abas { display: flex; gap: 6px; padding: 4px; margin-bottom: 10px; border: 3px solid var(--tinta); border-radius: 14px; background: #fff; }
.abas button { flex: 1; padding: 8px 4px; border-radius: 9px; font: 400 16px var(--display); text-transform: uppercase; white-space: nowrap; }
.abas .on { background: var(--tinta); color: var(--papel); }
.contagem { text-align: center; font: 600 14px var(--texto); }
.premios { margin-top: 4px; text-align: center; font: 700 12px var(--texto); opacity: .7; }
.podio { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 14px 0 8px; }
.podio-lugar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.podio-lugar b { max-width: 100%; font: 800 13px var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podio-lugar small { font: 700 11px var(--texto); opacity: .7; }
.podio-bloco { width: 100%; display: grid; place-items: center; border: 3px solid var(--tinta); border-bottom: 0; border-radius: 10px 10px 0 0; font: 400 26px var(--display); margin-top: 4px; }
.p1 .podio-bloco { height: 84px; background: var(--lampada); }
.p2 .podio-bloco { height: 60px; background: #dfe6ee; }
.p3 .podio-bloco { height: 46px; background: #e0a46a; }
.podio-lugar.vago { opacity: .35; }
.rank-list { display: flex; flex-direction: column; gap: 2px; }
.rank-row { display: grid; grid-template-columns: 34px auto 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; }
.rank-row:nth-child(odd) { background: rgba(17,36,43,.06); }
.rank-row.eu { background: var(--amarela); border: 2px solid var(--tinta); }
.pos { font: 400 20px var(--display); text-align: center; }
.pos .ico { width: 22px; height: 22px; }
.rank-nome { display: flex; flex-direction: column; min-width: 0; }
.rank-nome b { font: 800 15px var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-nome small { font: 600 12px var(--texto); opacity: .7; }
.score { font: 400 20px var(--display); }
.me-bar { position: sticky; bottom: calc(-1 * (var(--safe-b) + 20px)); padding: 12px 0 calc(var(--safe-b) + 6px); margin-top: 6px; background: linear-gradient(rgba(255,244,226,0), var(--papel) 22%); }

/* ---------- Avatar, anel de nível, molduras ---------- */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes gira { to { --a: 360deg; } }
.fr-simples { --frame: var(--papel); }
.fr-bronze { --frame: conic-gradient(from var(--a), #7a4a22, #e7a86b, #8a5a2b, #d18c4f, #7a4a22); }
.fr-prata { --frame: conic-gradient(from var(--a), #7f8b98, #f5f8fb, #8d99a6, #d6dde4, #7f8b98); }
.fr-ouro { --frame: conic-gradient(from var(--a), #a8780b, #ffe58a, #b8860b, #ffd24a, #a8780b); }
.fr-neon { --frame: conic-gradient(from var(--a), #00f0ff, #ff3df0, #00f0ff); box-shadow: 0 0 10px rgba(0,240,255,.65); animation: gira 3s linear infinite; }
.fr-fogo { --frame: conic-gradient(from var(--a), #ff3b1f, #ffb000, #ff3b1f, #ff7a00, #ff3b1f); box-shadow: 0 0 10px rgba(255,90,0,.6); animation: gira 2.4s linear infinite; }
.fr-arcoiris { --frame: conic-gradient(from var(--a), #ff4d4d, #ffb84d, #fff04d, #6dff6d, #4dd2ff, #8a6dff, #ff4dd2, #ff4d4d); animation: gira 4s linear infinite; }
.fr-lendaria { --frame: conic-gradient(from var(--a), #ffd24a, #fff7d6, #ffb300, #fff7d6, #ffd24a); box-shadow: 0 0 14px rgba(255,210,74,.9); animation: gira 3s linear infinite; }
.avatar { --s: 48px; position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); padding: 3px; border-radius: 50%; background: var(--frame, var(--papel)); }
.avatar-in { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 2px solid var(--tinta); background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.45), transparent 62%), var(--c); }
.avatar .thumb { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.22) translateY(8%); }
.thumb { opacity: 0; transition: opacity .25s; }
.thumb.ok { opacity: 1; }
.avatar .lv { position: absolute; right: -5px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--tinta); color: var(--lampada); border: 2px solid var(--papel); font: 400 14px/18px var(--display); text-align: center; }
.ring { --s: 26px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); padding: 3px; border-radius: 50%; background: var(--frame, var(--papel)); }
.ring b { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--tinta); color: var(--papel); font: 400 calc(var(--s) * .5)/1 var(--display); }
.ring.grande { --s: 88px; padding: 6px; }
.ring.bot { background: var(--papel); }
.ring.bot .ico { width: 18px; height: 18px; color: var(--tinta); }
.badge { flex: none; vertical-align: middle; }

/* ---------- Faixa e botton ---------- */
.faixa { display: inline-block; max-width: 100%; padding: 0 12px; background: var(--cortina); color: var(--papel); font: 400 15px/24px var(--display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%, 7px 50%); }
.faixa.mini { padding: 0 10px; font-size: 12px; line-height: 18px; }
.faixa.grande { margin: 6px 0 12px; padding: 0 24px; font-size: 24px; line-height: 40px; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%); }
.faixa.atual { background: var(--lampada); color: var(--tinta); }
.bottons { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px 8px; }
.botton { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pin { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.75), transparent 38%), var(--c); border: 3px solid var(--tinta); box-shadow: 0 4px 0 var(--tinta), inset 0 -5px 0 rgba(0,0,0,.12); }
.pin b { font: 400 18px/.95 var(--display); color: var(--tinta); text-align: center; }
.botton small { font: 700 11px/1.15 var(--texto); text-align: center; }
.botton.off .pin { background: #d9cdb8; }
.botton.off { opacity: .55; }

/* ---------- Perfil (provador: palquinho 3D em cima, folha embaixo) ---------- */
body[data-screen="perfil"] #shade { background: linear-gradient(180deg, rgba(12,26,32,.55), rgba(12,26,32,0) 24%); }
.perfil .folha { height: 56dvh; max-height: 56dvh; }
.palco { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; touch-action: none; cursor: grab; }
.palco:active { cursor: grabbing; }
.palco-head { display: flex; align-items: center; gap: 10px; }
.palco-head .head-gap { width: 44px; flex: none; }
.palco-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 14px; background: rgba(12,26,32,.8); text-align: center; }
.palco-titulo small { font: 800 11px var(--texto); text-transform: uppercase; letter-spacing: .12em; color: var(--lampada); }
.palco-titulo b { font: 400 22px/1.05 var(--display); text-transform: uppercase; }
.palco-dica { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 700 12px var(--texto); color: rgba(255,244,226,.6); text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none; }
.prova-aviso { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%) rotate(-2deg); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 14px 6px; border: 3px solid var(--tinta); border-radius: 10px; background: var(--lampada); color: var(--tinta); white-space: nowrap; box-shadow: 0 4px 0 var(--tinta); animation: sobe .3s cubic-bezier(.2,.9,.3,1.3); pointer-events: none; }
.prova-aviso[hidden] { display: none; }
.prova-aviso b { display: inline-flex; align-items: center; gap: 6px; font: 400 20px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.prova-aviso .ico { width: 18px; height: 18px; --accent: var(--cortina); }
.prova-aviso small { font: 700 11px var(--texto); opacity: .75; }
.perfil-topo { display: flex; align-items: center; gap: 12px; }
.perfil-topo .ring { --s: 50px; padding: 4px; }
.perfil-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.perfil-info .faixa { align-self: flex-start; }
.nome-input { padding: 8px 12px; font-size: 20px; }
.xpbar { display: block; height: 10px; border-radius: 6px; background: rgba(255,244,226,.2); border: 2px solid var(--tinta); overflow: hidden; }
.xpbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--lampada), var(--verde)); transition: width .8s cubic-bezier(.2,.9,.3,1); }
.xpbar.grande { height: 16px; border-radius: 9px; }
.folha .xpbar { background: rgba(17,36,43,.12); }
.cores { display: flex; gap: 12px; }
.cores button { width: 46px; height: 46px; border-radius: 50%; background: var(--c); border: 3px solid var(--tinta); box-shadow: 0 3px 0 var(--tinta); }
.cores .on { outline: 4px solid var(--tinta); outline-offset: 3px; }
.itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border: 3px solid var(--tinta); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--tinta); }
.item .thumb { width: 74px; height: 74px; }
.item small { font: 700 12px/1.1 var(--texto); text-align: center; }
.item.on { background: var(--verde); }
.item.locked .thumb { filter: grayscale(.8) brightness(.8); }
.item.locked small { opacity: .6; }
.item.experimentando { background: var(--amarela); box-shadow: 0 0 0 3px var(--lampada), 0 3px 0 var(--tinta); }
.item.experimentando .thumb { filter: none; }
.lock { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 3px; border-radius: 999px; background: var(--tinta); color: var(--papel); font: 400 13px/1 var(--display); font-style: normal; }
.lock .ico { width: 13px; height: 13px; --accent: var(--lampada); }
.pack-head .lock, .pacote .lock { position: static; }
.molduras { display: flex; flex-wrap: wrap; gap: 12px; }
.moldura { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; }
.moldura .ring { --s: 50px; padding: 5px; }
.moldura small { font: 700 11px var(--texto); }
.moldura.locked .ring { filter: grayscale(.9); opacity: .5; }
.moldura.on small { text-decoration: underline 2px; }
.moldura .lock { top: -4px; right: 0; }
.plaquinhas { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.placa-mini { position: relative; display: inline-block; transform: rotate(var(--r, -2deg)); }
.placa-mini:nth-child(2n) { --r: 2deg; }
.placa-mini > span { display: block; padding: 6px 10px 5px; background: var(--papelao); border: 3px solid var(--tinta); border-radius: 4px; color: var(--tinta); font: 400 15px var(--marcador); white-space: nowrap; box-shadow: 0 3px 0 var(--tinta); }
.placa-mini.locked > span { background: #b5a48f; opacity: .7; }
.placa-mini .lock { top: -10px; right: -8px; }
button.placa-mini:active { transform: rotate(var(--r, -2deg)) translateY(3px); }
.temas { display: flex; flex-wrap: wrap; gap: 12px; }
.tema { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 72px; }
.tema > i:first-child { width: 60px; height: 40px; border-radius: 50% / 45%; background: var(--felt); border: 3px solid var(--latao); box-shadow: 0 0 0 2px var(--tinta), inset 0 -6px 10px rgba(0,0,0,.3); }
.tema.t-neon > i:first-child { box-shadow: 0 0 0 2px var(--tinta), 0 0 12px var(--felt), inset 0 -6px 10px rgba(0,0,0,.3); }
.tema small { font: 700 11px/1.1 var(--texto); text-align: center; }
.tema.on > i:first-child { outline: 3px solid var(--tinta); outline-offset: 3px; }
.tema.on small { text-decoration: underline 2px; }
.tema.locked > i:first-child { filter: grayscale(.8); opacity: .5; }
.tema .lock { top: -6px; right: 0; }
.pacotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pacote { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 2px solid var(--tinta); border-radius: 10px; background: #fff; }
.pacote-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pacote .pacote-desc { color: var(--tinta); opacity: .65; font: 600 11px/1.25 var(--texto); }
.pack-desc { margin: -2px 0 8px; font: 600 12px/1.3 var(--texto); opacity: .65; }
.pacote b { font: 400 16px var(--display); text-transform: uppercase; }
.pacote small { font: 700 11px var(--texto); color: #3d7a00; }
.pacote.locked { opacity: .55; }
.lista-missoes { display: flex; flex-direction: column; gap: 10px; }
.bonus-dia { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding: 12px; border: 2px dashed var(--tinta); border-radius: 12px; font: 600 13px var(--texto); }
.bonus-dia > b { font: 400 18px var(--display); text-transform: uppercase; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border: 2px solid var(--tinta); border-radius: 12px; background: #fff; text-align: center; }
.stat b { font: 400 26px var(--display); }
.stat small { font: 700 11px/1.15 var(--texto); opacity: .75; }
.faixas { display: flex; flex-wrap: wrap; gap: 8px; }
.faixa-item { display: inline-flex; align-items: center; gap: 4px; }
.faixa-item small { font: 400 14px var(--display); opacity: .6; }
.faixa-item.locked { opacity: .35; }

/* ---------- Sala de espera ---------- */
.lobby-head { display: flex; align-items: center; gap: 10px; }
.lobby-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 14px; background: rgba(12,26,32,.8); text-align: center; }
.lobby-title small { font: 800 11px var(--texto); text-transform: uppercase; letter-spacing: .12em; color: var(--lampada); }
.lobby-title b { max-width: 100%; font: 400 22px/1.05 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby-folha { max-height: 68dvh; }
.bilhete { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border: 3px solid var(--tinta); border-radius: 14px; background: var(--amarela); box-shadow: 0 4px 0 var(--tinta); }
.bilhete-l { flex: 1; display: flex; flex-direction: column; }
.bilhete-l small { font: 800 11px var(--texto); text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
.bilhete-l strong { font: 400 44px/1 var(--display); letter-spacing: .18em; }
.share-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 4px; }
.share-row .btn { padding: 0 8px; font-size: 17px; }
.assentos { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.assento { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--tinta); border-radius: 14px; background: #fff; animation: entra .35s ease both; }
.assento.vazio { border-style: dashed; background: transparent; opacity: .65; }
.assento.falando { border-color: #3d7a00; box-shadow: 0 0 0 3px var(--verde); }
.assento.longe { opacity: .55; }
.voltando { padding: 1px 6px; border-radius: 6px; background: var(--papel-2); font: 800 10px var(--texto); text-transform: uppercase; letter-spacing: .06em; }
.tag.longe .cracha { opacity: .55; filter: grayscale(.7); }
.assento.falando .assento-txt > b::after { content: 'falando'; padding: 1px 6px; border-radius: 6px; background: var(--verde); font: 800 10px var(--texto); text-transform: uppercase; letter-spacing: .06em; }
.cadeira { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px dashed var(--tinta); }
.cadeira .ico { width: 26px; height: 26px; --accent: transparent; }
.assento-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.assento-txt > b { display: flex; align-items: center; gap: 5px; max-width: 100%; font: 800 16px var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assento-txt > small { font: 600 12px var(--texto); opacity: .65; }
.dono .ico { width: 20px; height: 20px; }
.voce { padding: 1px 6px; border-radius: 6px; background: var(--tinta); color: var(--papel); font: 800 10px var(--texto); text-transform: uppercase; letter-spacing: .06em; }
.bot-tag { padding: 1px 7px; border-radius: 6px; background: var(--papel-2); font: 700 11px var(--texto); opacity: 1 !important; }
.assento-st { display: flex; align-items: center; gap: 6px; }
.assento-st .rank, .assento-st .trofeus { display: inline-flex; align-items: center; gap: 2px; font: 400 16px var(--display); font-style: normal; }
.assento-st .trofeus .ico { width: 18px; height: 18px; }
.bloco { margin-top: 6px; }
.bloco.linha { display: flex; align-items: baseline; justify-content: space-between; }
.tema-nome { font: 700 14px var(--texto); }
.pack { margin-bottom: 12px; }
.pack-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pack-head b { font: 400 17px var(--display); text-transform: uppercase; }
.pack.locked { opacity: .6; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-cat { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 2px solid var(--tinta); border-radius: 999px; background: #fff; color: var(--tinta); font: 700 14px var(--texto); }
.chip-cat small { font-size: 11px; opacity: .55; }
.chip-cat.on { background: var(--verde); box-shadow: 0 2px 0 var(--tinta); }
.chip-cat:disabled { opacity: .5; }
.placar { margin-top: 14px; }
.placar-row { display: grid; grid-template-columns: 28px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px 10px; border-left: 6px solid var(--c); border-radius: 8px; background: rgba(17,36,43,.05); margin-bottom: 4px; }
.placar-row .pos { grid-row: span 2; font-size: 18px; }
.placar-row b { font: 800 15px var(--texto); }
.placar-row small { grid-column: 2; font: 600 11px var(--texto); opacity: .7; }
.placar-row em { grid-column: 3; grid-row: 1 / span 2; font: 400 22px var(--display); font-style: normal; }
.placar-row.lider { background: var(--amarela); }
.lobby-foot { position: sticky; bottom: calc(-1 * (var(--safe-b) + 20px)); display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 10px -16px 0; padding: 16px 16px calc(var(--safe-b) + 10px); background: linear-gradient(rgba(255,244,226,0), var(--papel) 24%); }
.esperando { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 12px; font: 400 20px var(--display); text-transform: uppercase; text-align: center; }
.reticencias { display: inline-flex; gap: 3px; margin-left: 4px; }
.reticencias i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pula 1s infinite; }
.reticencias i:nth-child(2) { animation-delay: .15s; }
.reticencias i:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 30% { transform: translateY(-5px); } 60% { transform: none; } }

/* ---------- Mesa (HUD) ---------- */
.game { max-width: none; padding: calc(var(--safe-t) + 10px) 12px calc(var(--safe-b) + 10px); }
.hud-top { position: relative; z-index: 2; display: grid; grid-template-columns: 58px 1fr 58px; align-items: start; gap: 6px; max-width: 560px; width: 100%; margin: 0 auto; }
.hud-left { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ao-vivo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 6px; background: rgba(12,26,32,.8); border: 2px solid var(--cortina); color: var(--papel); font: 800 9px var(--texto); letter-spacing: .12em; white-space: nowrap; }
.ao-vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--cortina); animation: rec 1.2s infinite; }
.hud-center { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.tarja { display: flex; max-width: 100%; transform: rotate(-1deg); filter: drop-shadow(0 3px 0 var(--tinta)); }
.tarja b, .tarja span { padding: 5px 12px 3px; font: 400 17px/1.1 var(--display); text-transform: uppercase; white-space: nowrap; }
.tarja b { background: var(--cortina); color: var(--papel); padding-right: 16px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.tarja span { margin-left: -8px; padding-left: 16px; background: var(--papel); color: var(--tinta); clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%); }
.tarja span:empty { display: none; }
.vez { max-width: 100%; padding: 5px 12px; border-radius: 999px; background: rgba(12,26,32,.82); border: 2px solid rgba(255,244,226,.16); color: var(--c, var(--papel)); font: 800 13px/1.2 var(--texto); text-align: center; }
.vez.minha { background: var(--lampada); color: var(--tinta); border-color: var(--tinta); }
.vez.entra { animation: entra .3s ease; }
.vez:empty { display: none; }
.timer { position: relative; width: 58px; height: 58px; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 6; }
.timer .track { stroke: rgba(12,26,32,.75); fill: rgba(12,26,32,.75); }
.timer .bar { stroke: var(--lampada); stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.timer span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 24px var(--display); color: var(--papel); }
.timer.pouco .bar { stroke: var(--cortina); }
.timer.pouco span { color: var(--cortina); animation: treme .5s infinite; }
.hud-bottom { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: calc(var(--safe-b) + 10px); max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; transition: transform .15s; }
.action { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.action:empty { display: none; }
.dica { align-self: center; padding: 8px 14px; border-radius: 12px; background: rgba(12,26,32,.85); font: 600 14px/1.3 var(--texto); text-align: center; }
.dica b { color: var(--lampada); }
.action .btn.small { align-self: center; }
.hud-buttons { display: flex; align-items: flex-end; gap: 6px; }
.hud-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 58px; color: var(--papel); }
.hud-btn .ico { width: 50px; height: 50px; padding: 9px; border-radius: 50%; background: var(--papel); color: var(--tinta); border: 3px solid var(--tinta); box-shadow: 0 4px 0 var(--tinta); --accent: var(--lampada); transition: transform .08s, box-shadow .08s; }
.hud-btn small { font: 800 10.5px var(--texto); white-space: nowrap; text-shadow: 0 1px 3px #000, 0 0 2px #000; }
.hud-btn em { font-style: normal; color: var(--lampada); }
.hud-btn:active:not(:disabled) .ico { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); }
.hud-btn:disabled { opacity: .45; }
.hud-btn.on .ico { background: var(--verde); }
.hud-btn.chama .ico { background: var(--lampada); --accent: var(--papel); animation: chama 1s infinite; }
@keyframes chama { 50% { transform: translateY(-4px) rotate(-6deg); } }
.hud-btn.novo::after { content: ''; position: absolute; top: 0; right: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--cortina); border: 2px solid var(--papel); }
.hud-btn.sirene .ico { --accent: var(--cortina); }
.hud-btn.puxada .ico { background: var(--cortina); color: var(--papel); --accent: var(--lampada); animation: sirene .6s infinite alternate; }
@keyframes sirene { to { box-shadow: 0 4px 0 var(--tinta), 0 0 18px 4px rgba(227,52,47,.8); } }
.composer { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; border: 3px solid var(--tinta); border-radius: 16px; background: var(--papel); box-shadow: 0 4px 0 var(--tinta); }
.composer input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--tinta); font: 700 16px var(--texto); }
.composer input::placeholder { color: rgba(17,36,43,.5); }
.composer button { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--lampada); border: 2px solid var(--tinta); }
.composer button .ico { width: 24px; height: 24px; color: var(--tinta); --accent: var(--papel); }
.composer .count { font: 800 12px var(--texto); color: var(--cortina); }
.composer.minha { background: var(--amarela); animation: borda 1.2s infinite; }
@keyframes borda { 50% { box-shadow: 0 4px 0 var(--tinta), 0 0 0 4px rgba(255,201,60,.55); } }
.center-msg { position: fixed; z-index: 25; left: 50%; top: 38%; text-align: center; pointer-events: none; animation: carimbo 1.9s ease forwards; }
.center-msg b { display: block; font: 900 clamp(52px, 16vw, 84px)/.9 var(--display); color: var(--papel); text-transform: uppercase; -webkit-text-stroke: 2px var(--tinta); text-shadow: 4px 4px 0 var(--cortina), 7px 7px 0 var(--tinta); white-space: nowrap; }
.center-msg small { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 6px; background: var(--tinta); color: var(--lampada); font: 700 15px var(--texto); }
@keyframes carimbo { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-3deg) scale(2.2); } 14% { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) scale(.94); } 22% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-3deg) scale(1.04); } }

/* Crachás, balões e plaquinhas sobre os bonecos */
.tag { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity .2s; }
.cracha { position: absolute; left: 0; bottom: 4px; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; padding: 3px 10px 3px 3px; border: 2px solid var(--c); border-radius: 999px; background: rgba(12,26,32,.9); color: var(--papel); font: 800 13px var(--texto); white-space: nowrap; pointer-events: auto; box-shadow: 0 3px 0 rgba(0,0,0,.45); transition: box-shadow .1s; }
.cracha .ring { --s: 24px; padding: 2px; }
.cracha .extra { display: inline-flex; align-items: center; gap: 3px; }
.cracha .extra:empty { display: none; }
.cracha .extra em { font: 400 13px var(--display); font-style: normal; color: var(--lampada); }
.cracha .extra .ico { width: 16px; height: 16px; }
.cracha .pediu { --accent: var(--cortina); color: var(--papel); }
.tag.vez .cracha { background: var(--lampada); color: var(--tinta); border-color: var(--tinta); animation: pulsa 1s infinite; }
@keyframes pulsa { 50% { transform: translateX(-50%) scale(1.08); } }
.tag.alvo .cracha { outline: 2px dashed rgba(255,244,226,.7); outline-offset: 3px; }
.tag.meu-voto .cracha { background: var(--cortina); border-color: var(--papel); }
.tag.falando .cracha { box-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 0 calc(2px + var(--vol, 0) * 8px) rgba(185,241,75,.75); }
.bubble-slot { position: absolute; left: 0; bottom: 42px; width: max-content; max-width: 230px; transform: translateX(calc(-50% + var(--dx, 0px))); }
.bubble { position: relative; max-width: min(46vw, 220px); padding: 6px 12px; border: 3px solid var(--tinta); border-radius: 14px; background: var(--papel); color: var(--tinta); font: 700 14px/1.25 var(--texto); text-align: center; overflow-wrap: anywhere; box-shadow: 0 3px 0 rgba(0,0,0,.4); animation: balao .3s cubic-bezier(.2,.9,.3,1.4); }
.bubble::after { content: ''; position: absolute; left: clamp(14px, calc(50% - var(--dx, 0px)), calc(100% - 14px)); bottom: -9px; width: 13px; height: 13px; background: inherit; border-right: 3px solid var(--tinta); border-bottom: 3px solid var(--tinta); transform: translateX(-50%) rotate(45deg); }
.bubble.clue { padding: 8px 14px 6px; background: var(--amarela); font: 400 20px/1.05 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.bubble.note { background: var(--tinta); color: var(--papel); border-color: var(--papel); font-size: 12px; }
.bubble.note::after { border-color: var(--papel); }
@keyframes balao { from { transform: scale(.4) translateY(10px); opacity: 0; } }
.tag-votes { position: absolute; left: 0; top: 28px; display: flex; gap: 3px; transform: translateX(-50%); }
.tag-votes i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--tinta); box-shadow: 0 2px 0 rgba(0,0,0,.4); animation: balao .3s; }
.plaquinha { position: absolute; z-index: 3; pointer-events: none; transform-origin: 50% 100%; animation: placa 2.6s cubic-bezier(.2,.9,.3,1.3) forwards; }
.plaquinha span { display: block; padding: 8px 12px 6px; border: 3px solid var(--tinta); border-radius: 5px; background: var(--papelao); color: var(--tinta); font: 400 22px var(--marcador); white-space: nowrap; box-shadow: 0 4px 0 var(--tinta); }
.plaquinha::after { content: ''; display: block; width: 9px; height: 30px; margin: -3px auto 0; background: #8a5a2b; border: 3px solid var(--tinta); border-top: 0; border-radius: 0 0 4px 4px; }
@keyframes placa {
  0% { opacity: 0; transform: translate(-50%, -60%) rotate(var(--r)) scale(.6); }
  12% { opacity: 1; transform: translate(-50%, -100%) rotate(var(--r)) scale(1.06); }
  20% { transform: translate(-50%, -100%) rotate(calc(var(--r) * -1)) scale(1); }
  30%, 85% { opacity: 1; transform: translate(-50%, -100%) rotate(var(--r)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -112%) rotate(var(--r)) scale(1); }
}

/* Popovers e conversa */
.popover { position: fixed; z-index: 35; animation: balao .2s ease; }
.menu-pop { padding: 6px; border: 3px solid var(--tinta); border-radius: 14px; background: var(--papel); color: var(--tinta); box-shadow: 0 4px 0 var(--tinta); }
.menu-pop button { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font: 700 15px var(--texto); }
.menu-pop .ico { width: 22px; height: 22px; }
.popover.reacoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; max-width: 520px; margin: 0 auto; padding: 16px 12px; border: 3px solid var(--papel); border-radius: 18px; background: var(--tinta); }
.drawer { position: fixed; z-index: 20; left: 10px; right: 10px; bottom: calc(var(--safe-b) + 10px + var(--kb)); max-width: 520px; max-height: 58dvh; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 3px solid var(--tinta); border-radius: 18px; background: var(--papel); color: var(--tinta); box-shadow: 0 6px 0 var(--tinta); animation: sobe .25s ease; }
.drawer header { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 0 6px; font: 400 20px var(--display); text-transform: uppercase; }
.log { flex: 1; min-height: 80px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.log-titulo { margin-top: 4px; font: 800 11px var(--texto); text-transform: uppercase; letter-spacing: .1em; opacity: .6; }
.linha { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-left: 5px solid var(--c); border-radius: 8px; background: #fff; font: 600 14px/1.3 var(--texto); }
.linha b { flex: none; font-weight: 800; }
.linha span { overflow-wrap: anywhere; }
.linha.nota span { opacity: .6; font-style: italic; }
.linha:not(.chat):not(.nota) span { font: 400 17px var(--display); text-transform: uppercase; letter-spacing: .02em; }

/* ---------- Sobreposições ---------- */
.overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px); background: rgba(6,14,18,.62); animation: aparece .2s ease; }
.overlay.baixo { align-items: flex-end; background: rgba(6,14,18,.38); }
.overlay.resultado-ov { align-items: flex-end; padding-bottom: 0; background: linear-gradient(rgba(6,14,18,0) 20%, rgba(6,14,18,.6)); }
@keyframes aparece { from { opacity: 0; } }
.panel { width: min(440px, 100%); max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 32px); overflow-y: auto; padding: 20px 18px; border: 3px solid var(--tinta); border-radius: 20px; background: var(--papel); color: var(--tinta); box-shadow: 0 8px 0 var(--tinta); animation: sobe .35s cubic-bezier(.2,.9,.3,1.2); }
.panel h2 { margin-bottom: 6px; font: 400 30px/1 var(--display); text-transform: uppercase; }
.passos { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 16px; }
.passo { display: flex; align-items: center; gap: 12px; }
.passo-ico { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--c); border: 3px solid var(--tinta); }
.passo-ico .ico { width: 32px; height: 32px; --accent: var(--papel); }
.passo b { display: block; font: 400 19px/1.05 var(--display); text-transform: uppercase; }
.passo span { font: 600 13px/1.3 var(--texto); opacity: .8; }

/* Envelope */
.envelope-palco { display: flex; flex-direction: column; align-items: center; gap: 26px; width: min(340px, 88vw); }
.envelope { position: relative; width: 100%; aspect-ratio: 1.45; margin-top: 150px; perspective: 900px; }
.env-fundo { position: absolute; inset: 0; z-index: 0; border: 3px solid var(--tinta); border-radius: 10px; background: var(--papelao-2); }
.carta { position: absolute; z-index: 1; left: 7%; right: 7%; top: 6%; height: 88%; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 14px; border: 3px solid var(--tinta); border-radius: 12px; background: var(--papel); color: var(--tinta); text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.25); transition: transform .75s cubic-bezier(.2,.9,.25,1.15) .3s; }
.envelope.aberto .carta { transform: translateY(-64%) rotate(-2deg); }
.carta small { font: 800 11px var(--texto); text-transform: uppercase; letter-spacing: .14em; opacity: .65; }
.carta strong { font: 400 clamp(30px, 10vw, 42px)/.95 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.carta .cat { padding: 2px 10px; border-radius: 6px; background: var(--tinta); color: var(--lampada); font: 700 12px var(--texto); }
.carta p { font: 600 12px/1.3 var(--texto); opacity: .75; }
.carta.impostor { background: var(--cortina); color: var(--papel); }
.carta.impostor .cat { background: var(--papel); color: var(--cortina); }
.env-frente { position: absolute; inset: 0; z-index: 2; background: var(--papelao); border: 3px solid var(--tinta); border-radius: 10px; clip-path: polygon(0 30%, 50% 64%, 100% 30%, 100% 100%, 0 100%); }
.env-frente::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, transparent 49.2%, var(--tinta) 49.5%, var(--tinta) 50.5%, transparent 50.8%) left / 50% 100% no-repeat, linear-gradient(200deg, transparent 49.2%, var(--tinta) 49.5%, var(--tinta) 50.5%, transparent 50.8%) right / 50% 100% no-repeat; opacity: .55; }
.env-selo { position: absolute; z-index: 1; left: 50%; top: 58%; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--cortina); border: 3px solid var(--tinta); }
.env-selo .ico { width: 26px; height: 26px; color: var(--papel); --accent: var(--cortina); }
.env-aba { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 66%; transform-origin: 50% 0; background: var(--papelao); border: 3px solid var(--tinta); clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform .45s ease, z-index 0s .22s; }
.envelope.aberto .env-aba { transform: rotateX(180deg); z-index: 0; }
.envelope.aberto .env-selo { opacity: 0; transition: opacity .2s; }
.overlay.clarao::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(227,52,47,0) 25%, rgba(227,52,47,.7)); animation: clarao 1.6s ease-out forwards; }
@keyframes clarao { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: .25; } }

/* Valendo a vitória */
.ultima-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tarja-mini { padding: 3px 10px 1px; border-radius: 4px; background: var(--cortina); color: var(--papel); font: 400 16px var(--display); text-transform: uppercase; }
.mini-timer { font: 400 28px var(--display); color: var(--cortina); }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 6px; }
.opcao { padding: 14px 6px 12px; border: 3px solid var(--tinta); border-radius: 12px; background: var(--amarela); color: var(--tinta); font: 400 19px/1 var(--display); text-transform: uppercase; box-shadow: 0 4px 0 var(--tinta); overflow-wrap: anywhere; }
.opcao:disabled { opacity: .9; }
.opcao.escolhida { background: var(--cortina); color: var(--papel); }

/* Resultado */
.resultado { width: min(480px, 100%); max-height: 88dvh; padding: 0 0 calc(var(--safe-b) + 6px); border-bottom: 0; border-radius: 24px 24px 0 0; }
.res-topo { padding: 18px 18px 14px; border-bottom: 3px solid var(--tinta); text-align: center; }
.res-topo.ganhou { background: var(--verde); }
.res-topo.perdeu { background: var(--rosa); }
.res-kicker { display: inline-block; padding: 3px 10px 1px; border-radius: 6px; background: var(--tinta); color: var(--lampada); font: 400 16px var(--display); text-transform: uppercase; transform: rotate(-2deg); }
.res-topo h2 { margin: 8px 0 4px; font: 400 34px/.95 var(--display); }
.res-topo p { font: 600 15px/1.3 var(--texto); }
.res-revela { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; }
.res-quem small, .res-palavra small { display: block; font: 800 10px var(--texto); text-transform: uppercase; letter-spacing: .1em; opacity: .65; }
.res-quem b { font: 400 26px/1 var(--display); }
.res-palavra { padding: 6px 10px; border: 2px solid var(--tinta); border-radius: 10px; background: var(--amarela); text-align: right; transform: rotate(2deg); }
.res-palavra b { display: block; font: 400 22px/1 var(--display); text-transform: uppercase; }
.res-palavra span { font: 600 11px var(--texto); opacity: .7; }
.res-pistas { margin: 0 16px 10px; padding: 10px 12px; border: 2px dashed var(--tinta); border-radius: 12px; }
.res-pistas small { font: 800 10px var(--texto); text-transform: uppercase; letter-spacing: .1em; opacity: .65; }
.res-pistas > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.res-pistas span { padding: 4px 10px 2px; border: 2px solid var(--tinta); border-radius: 6px; background: var(--papelao); font: 400 16px var(--marcador); }
.res-votos { display: grid; gap: 4px; margin: 0 16px 10px; }
.voto { display: flex; align-items: center; gap: 6px; font: 700 13px var(--texto); }
.voto .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--tinta); flex: none; }
.voto .seta { opacity: .5; font-weight: 900; }
.res-mvp { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 16px; font: 600 14px var(--texto); }
.res-mvp:empty { display: none; }
.res-mvp .ico { width: 24px; height: 24px; }
.provoca { margin: 8px 16px; text-align: center; font: 400 21px var(--marcador); color: var(--cortina); transform: rotate(-1.5deg); }
.xp-box { margin: 6px 16px 12px; padding: 12px; border-radius: 14px; background: var(--tinta); color: var(--papel); }
.xp-box .nota { opacity: .8; }
.xp-linha { display: flex; justify-content: space-between; gap: 10px; font: 600 14px var(--texto); opacity: 0; transform: translateX(-8px); transition: .25s; }
.xp-linha.show { opacity: 1; transform: none; }
.xp-linha b { color: var(--verde); white-space: nowrap; }
.xp-total { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 0; font: 400 30px var(--display); color: var(--lampada); }
.xp-total small { font: 700 13px var(--texto); color: var(--papel); opacity: .8; }
.xp-box .xpbar { background: rgba(255,244,226,.18); border-color: var(--papel); }
.xp-nivel { display: flex; justify-content: space-between; margin-top: 4px; font: 700 12px var(--texto); opacity: .85; }
.res-missoes .missao { color: var(--papel); }
[data-result-buttons] { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 14px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.duo .btn:only-child { grid-column: 1 / -1; }

/* Subiu de nível */
.subiu { text-align: center; }
.subiu-anel { display: grid; place-items: center; margin-bottom: 6px; }
.subiu-anel .ring { --s: 110px; padding: 8px; animation: estoura .9s cubic-bezier(.2,.9,.3,1.5); }
@keyframes estoura { 0% { transform: scale(.2) rotate(-40deg); } 70% { transform: scale(1.12); } }
.liberou { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 4px 0 12px; }
.liberou-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; }
.liberou-item .thumb { width: 86px; height: 86px; border: 3px solid var(--tinta); border-radius: 16px; background: #fff; }
.liberou-item .ring { --s: 60px; padding: 6px; }
.liberou-item small { font: 700 12px/1.15 var(--texto); }

/* ---------- Carregando e aviso ---------- */
.carregando { align-items: center; justify-content: center; gap: 18px; text-align: center; }
.carregando > p { font: 400 20px var(--display); text-transform: uppercase; letter-spacing: .04em; }
.carregando .nota { font-family: var(--texto); text-transform: none; }
.barra { width: min(260px, 70vw); height: 14px; border: 3px solid var(--papel); border-radius: 8px; overflow: hidden; }
.barra i { display: block; height: 100%; width: 6%; background: var(--lampada); transition: width .3s; }
#toast { position: fixed; z-index: 45; left: 50%; top: calc(var(--safe-t) + 12px); max-width: calc(100vw - 32px); padding: 10px 16px; border: 3px solid var(--tinta); border-radius: 12px; background: var(--papel); color: var(--tinta); box-shadow: 0 4px 0 var(--tinta); font: 700 15px/1.3 var(--texto); text-align: center; transform: translate(-50%, calc(-100% - 30px)); transition: transform .3s cubic-bezier(.2,.9,.3,1.2); pointer-events: none; }
#toast.show { transform: translate(-50%, 0); }
#reconectando { position: fixed; z-index: 46; left: 50%; bottom: calc(var(--safe-b) + 110px); display: none; align-items: center; gap: 8px; padding: 8px 14px; border: 3px solid var(--tinta); border-radius: 999px; background: var(--lampada); color: var(--tinta); box-shadow: 0 4px 0 var(--tinta); font: 400 18px var(--display); text-transform: uppercase; transform: translateX(-50%); }
body.reconectando #reconectando { display: flex; }
body.reconectando #app { filter: saturate(.6); }
#toast.bad { background: var(--cortina); color: var(--papel); }

@keyframes entra { from { opacity: 0; transform: translateY(12px); } }
@keyframes sobe { from { transform: translateY(40px); opacity: 0; } }

/* ---------- Telas baixas ---------- */
@media (max-height: 760px) {
  .letreiro { margin-top: 8px; padding: 16px 22px 10px; }
  .letreiro h1 { font-size: clamp(40px, 13vw, 56px); }
  .menu { gap: 12px; }
  .cartolina { padding: 12px 12px 10px; }
  .cartolina.big .cart-txt h3 { font-size: 28px; }
  .cartolina.big .cart-ico .ico { width: 48px; height: 48px; }
  .missao small { display: none; }
}
@media (max-height: 670px) {
  .missoes.compacta small { display: none; }
  .letreiro .sub { display: none; }
  .home .ticker { display: none; }
  .home-foot { margin-top: 8px; }
}
@media (min-width: 700px) {
  .folha { margin-left: 0; margin-right: 0; border-left: 3px solid var(--tinta); border-right: 3px solid var(--tinta); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}