/* Worm do Payat — interface (identidade PAYAT GAMER: mesmos tokens do site, assets/css/app.css) */
:root {
  --bg: #0A0820; --bg2: #0E0B28; --bg3: #15113A; --bg4: #1C1748;
  --borda: #2E2868; --borda2: #3B3480;
  --texto: #EDEBFF; --texto2: #9892C6; --texto3: #5E5890;
  --hot: #FF4D6D; --ciano: #37E2FF; --ouro: #FFD23F; --roxo: #8B6CFF; --roxo2: #B8A6FF; --verde: #3DFFA2; --vermelho: #FF3355;
  --sobre-destaque: #0A0820;
  --f-pesada: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --f-corpo: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --raio: 16px;
  --vidro: rgba(14, 11, 40, 0.72);
  --sombra-neon: 0 0 0 1px rgba(139,108,255,.35), 0 10px 40px rgba(0,0,0,.55), 0 0 40px rgba(139,108,255,.12);
  --tinta3: rgba(255,255,255,.03); --tinta4: rgba(255,255,255,.04); --tinta5: rgba(255,255,255,.05);
  --tinta6: rgba(255,255,255,.06); --tinta7: rgba(255,255,255,.07); --tinta8: rgba(255,255,255,.08);
  --veu: rgba(5,4,15,.55); --veu-forte: rgba(5,4,15,.62); --veu-modal: rgba(3,2,10,.92); --marca-p: #fff;
  color-scheme: dark; accent-color: var(--verde);
}
/* ── tema claro (Configurar → Geral → Tema): fundo claro, letra escura; os campos nativos (seleção, caixa, marcação) seguem junto ── */
:root[data-tema="claro"] {
  --bg: #F4F2FF; --bg2: #FFFFFF; --bg3: #EEEBFF; --bg4: #E2DDFF;
  --borda: #D9D3F5; --borda2: #BDB4EC;
  --texto: #18142F; --texto2: #4A4478; --texto3: #7A74A6;
  --hot: #D92A4C; --ciano: #0A88A8; --ouro: #A87800; --roxo: #6A4BE0; --roxo2: #5A3FCC; --verde: #0F9E62; --vermelho: #D61F42;
  --sobre-destaque: #FFFFFF;
  --vidro: rgba(255,255,255,0.94);
  --sombra-neon: 0 0 0 1px rgba(106,75,224,.25), 0 10px 30px rgba(24,20,47,.18);
  --tinta3: rgba(24,20,47,.03); --tinta4: rgba(24,20,47,.04); --tinta5: rgba(24,20,47,.06);
  --tinta6: rgba(24,20,47,.07); --tinta7: rgba(24,20,47,.08); --tinta8: rgba(24,20,47,.10);
  --veu: rgba(236,233,252,.62); --veu-forte: rgba(236,233,252,.72); --veu-modal: rgba(222,218,244,.92); --marca-p: #18142F;
  color-scheme: light; accent-color: var(--verde);
}
/* no claro, os botões de destaque continuam com letra escura sobre o verde/ciano e o dourado */
:root[data-tema="claro"] .btn-play, :root[data-tema="claro"] .btn-salvar, :root[data-tema="claro"] .fx-aba.on,
:root[data-tema="claro"] .visual-filtros .btn-sec.on, :root[data-tema="claro"] .fx-nivel { color: #0A0820; }
:root[data-tema="claro"] .marca .m-g { text-shadow: none; }
:root[data-tema="claro"] input, :root[data-tema="claro"] select, :root[data-tema="claro"] textarea { color: var(--texto); background-color: var(--bg2); }
:root[data-tema="claro"] option { color: #18142F; background: #FFFFFF; }
option { color: #EDEBFF; background: #15113A; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #05040F; color: var(--texto); font-family: var(--f-corpo);
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: none; }
button, input, select { font-family: inherit; color: inherit; }
button { cursor: pointer; }
.oculto { display: none !important; }

#tela { position: fixed; inset: 0; display: block; cursor: crosshair; }
.camada, .modal, .cartao, .lab { touch-action: pan-y; }

/* ── marca ── */
.marca { font-family: var(--f-pesada); font-weight: 900; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.marca .m-p { color: var(--marca-p); }
.marca .m-g { color: var(--ouro); margin-left: .28em; text-shadow: 0 0 18px rgba(255,210,63,.55); }
.marca-grande { font-size: clamp(22px, 7.4vw, 34px); text-align: center; filter: drop-shadow(0 0 22px rgba(139,108,255,.35)); }
.marca-hud { font-size: 15px; opacity: .92; }

/* ── camadas de tela cheia ── */
.camada { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 30%, rgba(139,108,255,.18), transparent 60%), var(--veu);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#morte, #pausa { background: var(--veu-forte); }

.cartao { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 26px 24px 22px; border-radius: var(--raio); background: var(--vidro);
  border: 1px solid var(--borda2); box-shadow: var(--sombra-neon); text-align: center; }
.cartao::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; border-radius: var(--raio) var(--raio) 0 0;
  background: linear-gradient(90deg, var(--hot), var(--roxo), var(--ciano), var(--verde)); }
.cartao h2 { font-family: var(--f-pesada); font-size: 22px; margin-bottom: 12px; }
.cartao h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ciano); margin: 18px 0 8px; text-align: left; }

.titulo-jogo { font-family: var(--f-pesada); font-size: clamp(22px, 5vw, 30px); margin-top: 14px;
  background: linear-gradient(120deg, var(--verde), var(--ciano) 55%, var(--roxo2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { color: var(--texto2); font-size: 14px; margin: 4px 0 18px; }

.campo { display: block; text-align: left; margin-bottom: 14px; }
.campo span, .rotulo { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto2); margin-bottom: 6px; }
.campo input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; font-size: 18px; font-weight: 600;
  background: var(--tinta5); border: 1px solid var(--borda2); outline: none; transition: border-color .2s, box-shadow .2s;
  -webkit-user-select: text; user-select: text; }
.campo input:focus { border-color: var(--ciano); box-shadow: 0 0 0 3px rgba(55,226,255,.18); }

.skin-sel { text-align: left; margin-bottom: 18px; }
.skin-linha { display: flex; align-items: center; gap: 8px; }
.skin-linha canvas { flex: 1; min-width: 0; height: 64px; border-radius: 12px; background: var(--tinta3); border: 1px solid var(--borda); }
.btn-seta { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--borda2); background: var(--tinta4); font-size: 16px; }
.btn-seta:hover { border-color: var(--ciano); color: var(--ciano); }
.skin-nome { display: block; text-align: center; margin-top: 6px; color: var(--texto2); font-size: 13px; }

/* ── botões ── */
.btn-play { position: relative; width: 100%; height: 58px; border: 0; border-radius: 14px; overflow: hidden;
  font-family: var(--f-pesada); font-weight: 900; font-size: 20px; letter-spacing: .12em; color: var(--sobre-destaque);
  background: linear-gradient(135deg, var(--verde), var(--ciano));
  box-shadow: 0 0 0 1px rgba(61,255,162,.5), 0 8px 28px rgba(61,255,162,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .15s, box-shadow .2s; }
.btn-play::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-100%); animation: brilho 2.8s ease-in-out infinite; }
.btn-play:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(61,255,162,.7), 0 12px 36px rgba(61,255,162,.5), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-play:active { transform: translateY(0) scale(.99); }
.btn-play.pequeno { height: 48px; font-size: 15px; margin-top: 18px; }
@keyframes brilho { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.menu-sec { display: flex; gap: 10px; margin-top: 12px; }
.btn-sec { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid var(--borda2); background: var(--tinta4);
  font-weight: 600; font-size: 14px; transition: border-color .2s, color .2s; }
.btn-sec:hover { border-color: var(--roxo2); color: var(--roxo2); }
.nota { margin-top: 14px; color: var(--texto2); font-size: 13px; line-height: 1.5; }
.nota.pequena { font-size: 11.5px; color: var(--texto3); margin-top: 8px; }

/* ── fachada: tela inicial em 3 colunas (sobre · jogar · jogador) ── */
.camada-fachada { display: grid; align-items: start; justify-items: center; }
.camada-fachada.fundo-proprio { background: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)), var(--fundo-lobby) center / cover no-repeat; }   /* v0.38: fundo do jogador */
.fachada { margin: auto 0; width: min(1760px, 100%); display: grid; gap: 18px; align-items: stretch; justify-content: center;
  grid-template-columns: minmax(240px, 1fr) minmax(400px, 1.55fr) minmax(270px, 1fr); }
.camada-fachada { padding: 52px clamp(12px, 2.4vw, 40px) 16px; }
.btn-tela-cheia { position: fixed; z-index: 31; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--borda2);
  background: var(--vidro); color: var(--texto); font-size: 12.5px; font-weight: 600; backdrop-filter: blur(6px); }
.btn-tela-cheia:hover { border-color: var(--ciano); color: var(--ciano); }
.btn-tela-cheia kbd { font-family: var(--f-mono); font-size: 10.5px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--borda2); color: var(--texto2); }
body.toque .btn-tela-cheia kbd { display: none; }
.fachada .cartao { width: auto; max-height: none; overflow: visible; }
.fx-col { text-align: left; min-width: 0; }
.fx-centro { text-align: center; }
.fx-titulo { font-family: var(--f-pesada); font-size: 26px; letter-spacing: .04em; margin-bottom: 10px;
  background: linear-gradient(120deg, var(--verde), var(--ouro)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-texto { color: var(--texto2); font-size: 14px; line-height: 1.55; }
.fachada .fx-h3 { margin: 16px 0 6px; }
.fx-lista { list-style: none; display: grid; gap: 6px; font-size: 13.5px; color: var(--texto2); margin-bottom: 14px; }
.fx-lista li { padding-left: 16px; position: relative; line-height: 1.45; }
.fx-lista li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 2px; background: var(--verde); transform: rotate(45deg); }
.fx-salas-lista b { color: var(--texto); font-family: var(--f-pesada); font-size: 11px; letter-spacing: .06em; }
.fx-esq .btn-sec { width: 100%; }

.fx-logo { display: flex; align-items: center; justify-content: center; gap: 12px; }
.fx-logo .marca-grande { font-size: clamp(22px, 3.2vw, 32px); }
.fx-escudo { flex: none; width: 58px; height: 58px; background: var(--logo-site, none) center / contain no-repeat; filter: drop-shadow(0 0 12px rgba(255,210,63,.35)); }
.fx-escudo.sem-logo { background: linear-gradient(135deg, var(--ouro), #E8A400); clip-path: polygon(50% 0, 100% 22%, 100% 70%, 50% 100%, 0 70%, 0 22%); }
.fx-sub { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: var(--ciano); margin: 8px 0 18px; }
.fx-centro .skin-nome { display: inline-block; margin-top: 8px; padding: 4px 14px; border-radius: 8px; border: 1px solid var(--borda2);
  background: var(--tinta4); color: var(--texto); font-weight: 600; }
.fx-centro .skin-sel { text-align: center; }
.fx-centro .skin-sel .rotulo { text-align: left; }
.fx-login { margin-top: 8px; font-size: 13px; color: var(--texto2); }
.fx-login a, .fx-conta a.btn-sec { color: var(--ciano); }

.fx-salas { margin-top: 18px; text-align: left; }
.fx-abas { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin-bottom: 8px; }
.fx-aba.fechada { opacity: .7; }
.fx-aba { min-height: 38px; border-radius: 10px; border: 1px solid var(--borda2); background: var(--tinta4);
  font-family: var(--f-pesada); font-size: 11px; letter-spacing: .06em; color: var(--texto2); }
.fx-aba.on { color: var(--sobre-destaque); background: linear-gradient(135deg, var(--ouro), #FFB13F); border-color: transparent; }
.fx-aba small { display: block; font-family: var(--f-corpo); font-size: 9.5px; letter-spacing: .04em; opacity: .8; }
.fx-servidores { display: grid; gap: 6px; }
.fx-serv { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left;
  border-radius: 10px; border: 1px solid var(--borda); background: var(--tinta3); }
.fx-serv.on { border-color: var(--verde); box-shadow: 0 0 0 1px rgba(61,255,162,.3) inset; }
.fx-serv:disabled { opacity: .5; cursor: not-allowed; }
.fx-serv svg { width: 26px; height: 18px; border-radius: 3px; display: block; }
.fx-serv b { display: block; font-size: 13px; letter-spacing: .06em; }
.fx-serv small { color: var(--texto2); font-size: 11.5px; }
.fx-serv .fx-lot { font-family: var(--f-mono); font-size: 12px; color: var(--texto2); text-align: right; min-width: 64px; }
.fx-serv .fx-lot i { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--tinta8); overflow: hidden; }
.fx-serv .fx-lot i::after { content: ''; display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--verde), var(--ouro)); }
.fx-aviso-sala { font-size: 12.5px; color: var(--texto2); padding: 8px 2px; }

.fx-botoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.fx-botoes .btn-sec { font-family: var(--f-pesada); font-size: 10.5px; letter-spacing: .06em; padding: 0 6px; }
/* v0.41: os 3 banners ficam numa linha embaixo das colunas, todos da mesma altura */
.fx-banner { position: relative; display: grid; place-items: center; height: clamp(72px, 13vh, 140px); min-width: 0; border-radius: 10px; overflow: hidden;
  border: 1px dashed var(--borda2); background: var(--tinta3); color: var(--texto3); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.fx-banner.oculto { display: none; }
.fx-banner .fx-google { width: 100%; height: 100%; display: grid; place-items: center; }
.fx-banner .fx-google ins { display: block; width: 100%; height: 100%; }
.fx-banner.com-anuncio { border-style: solid; }
.fx-banner a { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; pointer-events: none; }
.fx-banner a.on { opacity: 1; pointer-events: auto; }
.fx-banner img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* marcas: PAYAT GAMER no alto da coluna da esquerda; logo + nome do koBRasil no meio */
.fx-logo-payat { justify-content: flex-start; margin-bottom: 14px; }
.fx-logo-payat .fx-escudo { width: 46px; height: 46px; }
.fx-logo-payat .marca-grande { font-size: clamp(20px, 2.2vw, 28px); }
.fx-logo-ko { gap: 10px; margin-bottom: 12px; }
.fx-ko-logo { width: clamp(52px, 5vw, 76px); height: auto; filter: drop-shadow(0 0 14px rgba(55,226,255,.35)); }
.fx-ko-txt { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.fx-ko-nome { width: clamp(180px, 20vw, 300px); max-width: 100%; height: auto; filter: drop-shadow(0 0 16px rgba(47,91,255,.35)); }
.fx-logo-ko .fx-sub { margin: 0; font-family: var(--f-corpo); font-weight: 700; font-size: clamp(9.5px, .8vw, 11.5px); letter-spacing: .06em; color: var(--texto2); }
/* "Visual" e o nome da skin, um ao lado do outro, começando na borda esquerda da prévia (depois da seta) */
.fx-centro .skin-cab { justify-content: flex-start; align-items: center; padding-left: 52px; }
.fx-banner a span { position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 700; letter-spacing: .14em; padding: 3px 8px; border-radius: 3px;
  background: rgba(4,4,12,.75); color: var(--ouro); }

.fx-perfil { display: flex; align-items: center; gap: 12px; }
.fx-avatar { position: relative; flex: none; width: 60px; height: 60px; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--roxo), var(--ciano)); font-family: var(--f-pesada); font-size: 24px; color: #fff; }
.fx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fx-quem { flex: 1; min-width: 0; }
.fx-quem b { display: block; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-quem small { font-family: var(--f-mono); font-size: 12px; color: var(--ciano); }
.fx-nivel { flex: none; min-width: 46px; padding: 6px 8px; border-radius: 10px; text-align: center; font-family: var(--f-pesada); font-size: 15px;
  color: var(--sobre-destaque); background: linear-gradient(135deg, var(--ouro), #FFB13F); box-shadow: 0 0 16px rgba(255,210,63,.35); }
.fx-nivel small { display: block; font-family: var(--f-corpo); font-size: 9px; letter-spacing: .1em; }
.fx-xp { margin-top: 12px; }
.fx-xp-barra { height: 10px; border-radius: 6px; background: var(--tinta7); overflow: hidden; border: 1px solid var(--borda); }
.fx-xp-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--verde), var(--ciano)); }
.fx-xp small { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: 11.5px; color: var(--texto2); text-align: right; }
.fx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.fx-stats div { padding: 8px 10px; border-radius: 10px; background: var(--tinta4); border: 1px solid var(--borda); }
.fx-stats small { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto2); }
.fx-stats b { font-family: var(--f-mono); font-size: 17px; }
.fx-conta { margin-top: 14px; display: grid; gap: 8px; }
.fx-conta p { font-size: 13px; color: var(--texto2); line-height: 1.5; }
.fx-conta .btn-play.pequeno { margin-top: 0; display: grid; place-items: center; text-decoration: none; }
.fx-conta a.btn-sec { display: grid; place-items: center; text-decoration: none; }
.fx-vip-status { font-size: 13px; color: var(--texto2); }
.fx-vip-status b { color: var(--ouro); }
.fx-planos { display: grid; gap: 8px; margin-top: 8px; }
.fx-presente { width: 100%; margin-top: 8px; min-height: 38px; }
.pz-ajuste { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 12px; align-items: center; margin: 8px 0; }
.pz-ajuste > b, .pz-ajuste > small, .pz-ajuste-pecas { grid-column: 1 / -1; }
.pz-ajuste-pecas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--texto2); }
.pz-ajuste-pecas button { padding: 4px 12px; border-radius: 8px; border: 1px solid var(--borda2); background: var(--tinta4); color: var(--texto); font-size: 12px; font-weight: 700; }
.pz-ajuste-pecas button.on { background: var(--ouro); color: #15113A; border-color: transparent; }
#visualPrevia { cursor: grab; touch-action: none; }
#visualPrevia:active { cursor: grabbing; }
/* v0.42: marcas da tela inicial com folga nas bordas */
.fx-logo-payat .marca-grande { font-size: clamp(16px, 1.6vw, 23px); white-space: nowrap; }
.fx-logo-payat { padding-right: 8px; min-width: 0; }
.fx-ko-logo { width: clamp(52px, 4.6vw, 72px); height: auto; flex: none; object-fit: contain; }
.pz-ajuste label { display: grid; gap: 2px; font-size: 12px; color: var(--texto2); }
.pz-ajuste input[type=range] { width: 100%; accent-color: var(--ouro); }
.pz-colecao { display: grid; gap: 6px; justify-items: center; margin-top: 8px; }
.pz-colecao-lista { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pz-colecao-lista button { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ouro); background: rgba(255,210,63,.08); font-size: 12px; }
.pz-colecao-lista button.on { background: var(--ouro); color: var(--sobre-destaque); }
.pz-cla { display: grid; gap: 6px; justify-items: center; margin-top: 8px; text-align: center; }
.pz-cla .nota { margin: 0; }
.fx-plano.teste { border-style: dashed; }
.fx-plano { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,210,63,.35); background: rgba(255,210,63,.05); }
.fx-plano b { display: flex; justify-content: space-between; gap: 8px; color: var(--ouro); font-size: 14px; }
.fx-plano b span { color: var(--texto); font-family: var(--f-mono); font-size: 13px; }
.fx-plano.meu { border-color: var(--verde); background: rgba(61,255,162,.06); }
.fx-plano.meu b { color: var(--verde); }
.fx-plano small { display: block; margin-top: 4px; font-size: 12px; color: var(--texto2); line-height: 1.4; }

/* telas médias: jogar + jogador lado a lado, "sobre" embaixo */
@media (max-width: 1080px) {
  .fachada { grid-template-columns: minmax(320px, 1.5fr) minmax(250px, 1fr); }
  .fx-esq { grid-column: 1 / -1; order: 3; }
  .fx-banner { grid-column: 1 / -1; order: 4; height: auto; aspect-ratio: 840 / 220; }
}
/* celular em pé: uma coluna, jogar primeiro */
@media (max-width: 640px) {
  .fachada { grid-template-columns: 1fr; gap: 12px; }
  .fx-centro { order: 1; } .fx-dir { order: 2; } .fx-esq { order: 3; }
  .fx-botoes .btn-sec { font-size: 9.5px; }
}

/* ── morte ── */
.morte-cartao h2 { color: var(--hot); text-shadow: 0 0 20px rgba(255,77,109,.45); }
.morte-causa { color: var(--texto2); margin-bottom: 16px; min-height: 1.4em; }
.morte-causa b { color: var(--texto); }
.tag-bot { display: inline-block; font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; padding: 1px 5px; margin-left: 5px;
  border-radius: 5px; border: 1px solid var(--texto3); color: var(--texto2); vertical-align: 1px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.status-combate { margin-top: 6px; }
.status-combate b { color: var(--hot); }
.stats div { padding: 12px 8px; border-radius: 12px; background: var(--tinta4); border: 1px solid var(--borda); }
.stats small { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto2); }
.stats b { display: block; font-family: var(--f-pesada); font-size: 24px; margin-top: 4px; color: var(--ouro); }
.recorde { color: var(--verde); font-weight: 700; margin-bottom: 12px; }

/* ── modais ── */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5,4,15,.7); }
.modal-cartao { width: min(520px, 100%); text-align: left; }
.modal-cartao p, .modal-cartao li { color: var(--texto2); font-size: 14px; line-height: 1.6; }
.modal-cartao ul { padding-left: 18px; }
/* boas-vindas e relato de experiência */
.boas-vindas-texto { white-space: pre-line; font-size: 15px !important; margin-bottom: 10px; }
.boas-vindas .btn-play { width: 100%; margin-top: 10px; }
.relato-campo { display: grid; gap: 4px; margin: 10px 0; font-size: 13px; color: var(--texto2); }
.relato-campo select, .relato-campo textarea { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--borda2); background: var(--tinta5);
  color: var(--texto); font-family: var(--f-corpo); font-size: 14px; }
.relato-campo textarea { resize: vertical; min-height: 84px; }
.btn-relatar { width: 100%; margin-top: 8px; border-color: var(--ciano); }
.modal-cartao .destaque { color: var(--ouro); margin-top: 8px; }
.linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 14px; }
.linha input[type=range] { width: 46%; accent-color: var(--ciano); }
.linha input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--verde); flex: none; }
/* Configurar: a caixinha fica à esquerda do texto */
.config-aba .linha:has(> input[type=checkbox]) { flex-direction: row-reverse; justify-content: flex-end; cursor: pointer; }
.config-aba .linha:has(> input[type=checkbox]) > span { flex: 1; }
.linha select { min-height: 36px; padding: 0 8px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--borda2); }
.btn-tecla { min-width: 110px; min-height: 36px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--borda2); font-family: var(--f-mono); font-size: 13px; }
.btn-tecla.ouvindo { border-color: var(--ouro); color: var(--ouro); }

/* ── HUD ── */
.hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
/* v0.45: faixa deslizante no alto (embaixo dos painéis do HUD, por cima da arena) */
.faixa-jogo { position: fixed; top: 0; left: 0; right: 0; z-index: 9; display: flex; align-items: center; overflow: hidden; pointer-events: none; }
.faixa-jogo.oculto { display: none; }
.faixa-jogo span { position: absolute; left: 0; white-space: nowrap; will-change: transform; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
@keyframes faixa-passa { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
.hud-topo-esq { position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }
.status { display: flex; gap: 8px; margin-top: 8px; }
.status div { padding: 6px 10px; border-radius: 10px; background: var(--vidro); border: 1px solid var(--borda); min-width: 72px; }
.status small { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto2); }
.status b { font-family: var(--f-pesada); font-size: 17px; color: var(--ouro); }

.coluna-dir { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: 230px;
  display: flex; flex-direction: column; gap: 8px; }
.placar { padding: 10px 12px; border-radius: 14px; background: var(--vidro); border: 1px solid var(--borda); }
.placar-hs h3 { color: var(--hot); }
.placar-hs li .pts { color: var(--hot); }
.placar-hs li.vazio { color: var(--texto3); font-size: 12px; }

/* feed de eliminações */
.feed { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 56px); left: 50%; transform: translateX(-50%);
  width: min(420px, 60vw); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.feed div { max-width: 100%; padding: 3px 12px; border-radius: 999px; background: var(--vidro); border: 1px solid var(--borda);
  font-size: 13px; color: var(--texto2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: feedEntra .25s ease-out; transition: opacity .6s; }
.feed div b { color: var(--texto); font-weight: 700; }
.feed div.eu b.eu { color: var(--verde); }
.feed div .hs { color: var(--hot); font-weight: 800; margin-left: 4px; }
.feed div.sai { opacity: 0; }
@keyframes feedEntra { from { opacity: 0; transform: translateY(-6px); } }

/* anúncio central: HEADSHOT / BOA! */
.anuncio { position: absolute; z-index: 5; left: 50%; top: 12%; transform: translate(-50%, -50%); text-align: center; opacity: 0; pointer-events: none; white-space: nowrap;
  filter: opacity(var(--anuncio-alfa, 1)); }   /* altura, tamanho e transparência: Configurar → Tela do jogo (longe da cabeça) */
.anuncio-off { display: none !important; }
.anuncio b { display: block; font-family: var(--f-pesada); font-weight: 900; font-size: calc(clamp(26px, 5vw, 56px) * var(--anuncio-tam, 1)); letter-spacing: .04em; line-height: 1; }
.anuncio small { display: block; margin-top: 6px; font-weight: 700; font-size: calc(clamp(14px, 2.2vw, 20px) * var(--anuncio-tam, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--texto); }
.anuncio.hs b { color: var(--hot); text-shadow: 0 0 18px rgba(255,77,109,.85), 0 0 46px rgba(255,77,109,.5), 0 4px 0 #5a0f22; }
.anuncio.marco b { color: var(--ouro); text-shadow: 0 0 22px rgba(255,210,63,.9), 0 0 60px rgba(255,77,109,.6), 0 4px 0 #6a5000; }
.anuncio.redline b { color: var(--vermelho); text-shadow: 0 0 20px rgba(255,51,85,.8), 0 3px 0 #5a0f22; }
.anuncio.boa b { font-size: calc(clamp(26px, 5vw, 48px) * var(--anuncio-tam, 1)); color: var(--verde); text-shadow: 0 0 18px rgba(61,255,162,.7), 0 3px 0 #0c5a37; }
.anuncio.on { animation: anuncio 1.5s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes anuncio {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(.94); }
  22% { transform: translate(-50%, -50%) scale(1.04); }
  30%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1); }
}

/* efeitos de orbes ativos */
.efeitos { position: absolute; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 86px); transform: translateX(-50%); display: flex; gap: 8px; }
.efeito { --p: 0; position: relative; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.efeito::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--c) calc((1 - var(--p)) * 1turn), var(--tinta8) 0); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%); }
.efeito img { width: 38px; height: 38px; }
.efeito span { position: absolute; bottom: -6px; right: -6px; min-width: 22px; padding: 1px 4px; border-radius: 8px; background: var(--bg); border: 1px solid var(--c);
  font-family: var(--f-mono); font-size: 11px; text-align: center; }
.efeito.acabando { animation: piscar .4s steps(2) infinite; }
@keyframes piscar { 50% { opacity: .35; } }
.placar h3 { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ciano); margin-bottom: 6px; }
.placar ol { list-style: none; font-size: 13px; }
.placar li { display: flex; align-items: center; gap: 6px; height: 21px; color: var(--texto2); }
.placar li .pos { width: 20px; text-align: right; font-family: var(--f-mono); font-size: 11px; color: var(--texto3); }
.placar li .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placar li .pts { font-family: var(--f-mono); font-size: 12px; }
.placar li:first-child .pos, .placar li:first-child .pts { color: var(--ouro); }
.placar li.eu { color: var(--verde); font-weight: 700; }
.placar li.eu .pts { color: var(--verde); }
.placar li.sep { height: 8px; border-top: 1px dashed var(--borda); margin-top: 4px; }

.hud-acoes { position: absolute; top: max(12px, env(safe-area-inset-top)); right: calc(max(14px, env(safe-area-inset-right)) + 242px); display: flex; gap: 8px; pointer-events: auto; }
.btn-icone { width: 40px; height: 40px; border-radius: 12px; background: var(--vidro); border: 1px solid var(--borda); font-size: 15px; transition: border-color .2s, color .2s; }
.btn-icone:hover { border-color: var(--ciano); color: var(--ciano); }

.hud-escondido { display: none !important; }
.relogio { position: absolute; left: 14px; bottom: 14px; width: 120px; height: 120px; }
.btn-visual { width: 100%; margin-top: 8px; min-height: 40px; }
.visual-salas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.visual-sala { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-height: 36px; max-width: 200px; padding: 4px 12px 4px 4px; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--tinta3); font-size: 12.5px; white-space: nowrap; }
.visual-sala img { width: 54px; height: 28px; object-fit: cover; border-radius: 6px; }
.visual-sala span { overflow: hidden; text-overflow: ellipsis; }
.visual-sala:not(:has(img)) { padding-left: 12px; }
.visual-sala.on { border-color: var(--ouro); color: var(--ouro); }
.btn-minha-sala { width: 100%; margin-top: 10px; min-height: 40px; }
.minha-sala { margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px dashed var(--ouro); }
.minha-sala h3 { margin-top: 0; }
.sala-linha { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; align-items: center; }
.sala-linha input[type=text], .sala-linha select { flex: 1; min-width: 140px; min-height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--borda2); background: var(--tinta5); }
.btn-arquivo { position: relative; display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--borda2); cursor: pointer; font-size: 13px; overflow: hidden; }
.btn-arquivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sala-itens { display: grid; gap: 6px; }
.sala-item { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--tinta4); font-size: 13px; }
.sala-item small { flex: 1; color: var(--texto2); }
.vip-status { font-size: 11px; color: var(--ouro); letter-spacing: 0; text-transform: none; }
.vip-bloco { position: relative; border-radius: 10px; }
.vip-bloco .vip-tranca { display: none; }
.vip-bloco.trancado { opacity: .5; }
.vip-bloco.trancado .vip-tranca { display: inline-block; position: absolute; right: 0; top: -2px; padding: 1px 8px; border-radius: 8px; background: var(--ouro); color: var(--sobre-destaque); font-size: 11px; font-weight: 700; }
.vip-cor { display: inline-flex; gap: 6px; align-items: center; }
.vip-cor input { width: 46px; height: 32px; padding: 0; border: 1px solid var(--borda2); border-radius: 8px; background: none; }
.vip-som { display: inline-flex; gap: 6px; align-items: center; }
.vip-som small { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto2); }
.visual-cartao { width: min(640px, 100%); }
.visual-previa { display: block; width: 100%; height: auto; aspect-ratio: 560 / 180; border-radius: 14px; background: var(--tinta3); border: 1px solid var(--borda); margin-bottom: 12px; }
.visual-abas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.visual-abas .btn-sec { flex: 0 1 auto; min-height: 38px; padding: 0 14px; }
.visual-abas .btn-sec.on { border-color: var(--ouro); color: var(--ouro); }
.visual-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: min(320px, 40dvh); overflow-y: auto; padding: 2px; }
.visual-opcao { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 12px; border: 1px solid var(--borda); background: var(--tinta3); font-size: 12.5px; }
.visual-opcao canvas { width: 100%; height: auto; aspect-ratio: 180 / 72; }
.visual-opcao.on { border-color: var(--ouro); box-shadow: 0 0 0 2px rgba(255,210,63,.25); color: var(--ouro); }
.minimapa { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 130px; height: 130px; }

/* habilidades: estado por forma + texto, não só por cor (HAB-05) */
.habs { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 10px; pointer-events: auto; }
.hab { --p: 0; position: relative; width: 82px; height: 74px; border-radius: 14px; overflow: hidden; touch-action: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--vidro); border: 2px solid var(--borda2); transition: border-color .15s, box-shadow .15s, transform .1s; }
.hab::before { content: ''; position: absolute; inset: 0; background: conic-gradient(rgba(5,4,15,.72) calc(var(--p) * 1turn), transparent 0); pointer-events: none; }
.hab > * { position: relative; }
.hab .ico { font-size: 22px; line-height: 1; }
.hab .tecla { font-family: var(--f-mono); font-size: 10px; color: var(--texto3); }
.hab .estado { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--texto2); }
.hab.pronta { border-color: var(--verde); }
.hab.pronta .estado { color: var(--verde); }
.hab.pronta .estado::before { content: '✓ '; }
.hab.ativa { border-style: double; border-width: 4px; border-color: var(--ouro); box-shadow: 0 0 22px rgba(255,210,63,.45); transform: scale(1.04); }
.hab.ativa .estado { color: var(--ouro); }
.hab.ativa .estado::before { content: '▶ '; }
.hab.recarga { border-style: dashed; opacity: .8; }
.hab.recarga .estado::before { content: '⏳ '; }
.hab.bloq { border-style: dotted; opacity: .55; }

.dica { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); max-width: min(560px, 92vw); padding: 10px 18px; border-radius: 999px;
  background: rgba(10,8,32,.85); border: 1px solid var(--roxo); color: var(--texto); font-size: 15px; text-align: center;
  box-shadow: 0 0 24px rgba(139,108,255,.3); opacity: 0; transition: opacity .4s; }
.dica.on { opacity: 1; }
.fps { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); font-family: var(--f-mono); font-size: 12px; color: var(--texto2); }

/* joystick flutuante */
.joy { position: fixed; z-index: 20; display: none; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(55,226,255,.5); background: radial-gradient(circle, rgba(55,226,255,.12), rgba(10,8,32,.35)); }
.joy.on { display: block; }
.joy-pino { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; border-radius: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle at 35% 30%, #fff, var(--ciano) 45%, #1677a0); box-shadow: 0 0 18px rgba(55,226,255,.6); }

/* ── celular / toque ── */
body.toque .habs { left: auto; transform: none; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  flex-direction: column-reverse; align-items: flex-end; gap: 12px; }
body.toque .hab { width: 76px; height: 76px; border-radius: 50%; }
body.toque .hab[data-hab="turbo"] { width: 96px; height: 96px; }
body.toque .hab .tecla { display: none; }
body.toque.lado-esq .habs { right: auto; left: max(16px, env(safe-area-inset-left)); align-items: flex-start; }
body.toque .minimapa { width: 84px; height: 84px; right: auto; bottom: auto; left: max(14px, env(safe-area-inset-left)); top: calc(max(12px, env(safe-area-inset-top)) + 122px); opacity: .85; }
body.toque.lado-esq .minimapa { left: auto; right: max(14px, env(safe-area-inset-right)); top: auto; bottom: 120px; }
body.toque .dica { bottom: auto; top: 30%; }
body.toque #tela { cursor: default; }

@media (max-width: 760px), (max-height: 520px) {
  .coluna-dir { width: 170px; gap: 6px; }
  .placar { padding: 8px 10px; }
  .feed div { font-size: 12px; }
  .placar li { height: 18px; font-size: 12px; }
  .hud-acoes { right: calc(max(14px, env(safe-area-inset-right)) + 180px); }
  .btn-icone { width: 36px; height: 36px; }
  .marca-hud { font-size: 12px; }
  .status div { min-width: 0; padding: 4px 8px; }
  .status b { font-size: 14px; }
}
@media (max-height: 520px) {
  .placar ol li:nth-child(n+6):not(.eu):not(.sep) { display: none; }
  .placar-hs ol li:nth-child(n+3) { display: none; }
  .placar h3 { margin-bottom: 2px; }
  .efeitos { left: max(14px, env(safe-area-inset-left)); transform: none; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 4px); }
  body:not(.toque) .efeitos { left: 50%; transform: translateX(-50%); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 86px); }
  /* celular deitado: feed curto no canto de baixo, acima dos efeitos */
  body.toque .feed { top: auto; left: max(14px, env(safe-area-inset-left)); transform: none; align-items: flex-start;
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 62px); width: min(300px, 42vw); }
  body.toque .feed div:nth-child(n+3) { display: none; }
  .efeito { width: 44px; height: 44px; }
  .efeito img { width: 32px; height: 32px; }
  /* celular deitado: fachada compacta para o JOGAR aparecer sem rolar */
  .fx-centro { padding: 14px 16px; }
  .fx-logo .marca-grande { font-size: 22px; }
  .fx-escudo { width: 34px; height: 34px; }
  .fx-sub { margin: 2px 0 8px; font-size: 10px; }
  .fx-centro .campo { margin-bottom: 8px; }
  .fx-centro .campo input { height: 40px; }
  .fx-centro .skin-sel { margin-bottom: 8px; }
  .fx-centro .skin-linha canvas { height: 44px; }
  .fx-centro .btn-play { height: 48px; }
  .morte-cartao { width: min(620px, 100%); padding: 16px 18px; }
  .morte-cartao .stats { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .morte-cartao .stats div { padding: 8px 4px; }
  .status-combate { margin-top: 4px; }
  .morte-cartao .stats b { font-size: 20px; }
  body.toque .habs { flex-direction: row-reverse; align-items: flex-end; }
  body.toque.lado-esq .habs { flex-direction: row; }
}

.girar { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(5,4,15,.92); text-align: center; padding: 24px; }
.girar span { font-size: 64px; color: var(--ciano); animation: girarAnim 1.8s ease-in-out infinite; }
@keyframes girarAnim { 50% { transform: rotate(90deg); } }

/* ── laboratório ── */
.lab { position: fixed; left: 12px; top: 120px; z-index: 40; width: 330px; max-height: calc(100dvh - 140px); overflow-y: auto;
  padding: 12px; border-radius: 12px; background: rgba(5,4,15,.9); border: 1px solid var(--ouro);
  font-family: var(--f-mono); font-size: 11px; pointer-events: auto; -webkit-user-select: text; user-select: text; }
.lab h3 { color: var(--ouro); font-family: var(--f-corpo); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.lab pre { white-space: pre-wrap; color: var(--texto); line-height: 1.5; }
.lab-aviso { color: var(--hot); margin: 6px 0; }
.lab-regras { display: grid; gap: 4px; margin: 8px 0; }
.lab-regras label { display: flex; justify-content: space-between; align-items: center; }
.lab-hs { border-top: 1px dashed rgba(255,77,109,.4); padding-top: 6px; }
.lab-hs label { gap: 6px; }
.lab-hs input[type=range] { flex: 1; accent-color: var(--hot); }
.lab-hs output { min-width: 34px; text-align: right; color: var(--ciano); }
.lab-hs button { min-height: 30px; border-radius: 8px; background: var(--bg3); border: 1px solid var(--hot); font-family: var(--f-corpo); font-size: 12px; margin-top: 4px; }
.lab-hs button.on { background: var(--hot); color: var(--sobre-destaque); }
.lab-regras select { background: var(--bg3); border: 1px solid var(--borda2); border-radius: 6px; font-family: var(--f-mono); font-size: 11px; padding: 2px 4px; }
.lab-botoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.lab-botoes button { flex: 1 1 auto; min-height: 30px; padding: 0 8px; border-radius: 8px; background: var(--bg3); border: 1px solid var(--borda2); font-family: var(--f-corpo); font-size: 12px; }
.lab-botoes button:hover { border-color: var(--ouro); }
.lab-res { min-height: 1.2em; color: var(--verde); }
.lab table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.lab td { padding: 2px 3px; border-bottom: 1px solid var(--tinta6); vertical-align: top; }
.lab td.v { color: var(--ciano); text-align: right; }
.selo { display: inline-block; padding: 0 4px; border-radius: 4px; font-size: 9px; }
.selo.PROVISORIO { background: rgba(255,77,109,.2); color: var(--hot); }
.selo.DESIGN { background: rgba(139,108,255,.2); color: var(--roxo2); }
.selo.PAINEL { background: rgba(55,226,255,.2); color: var(--ciano); }
.selo.medido { background: rgba(61,255,162,.2); color: var(--verde); }

@media (prefers-reduced-motion: reduce) {
  .btn-play::after, .girar span { animation: none; }
}

/* ── v0.10: cabeçalho dos modais com Sair / Salvar no canto de cima à direita ── */
.modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.modal-topo h2 { margin: 0; }
.modal-topo-botoes { display: flex; gap: 8px; flex: none; }
.modal-topo-botoes .btn-sec { flex: none; min-height: 38px; padding: 0 14px; }
/* v0.41: janelas com o título e o botão fixos no topo; só o conteúdo rola (Como jogar, Atalhos) */
.cartao.com-rolagem { display: flex; flex-direction: column; overflow: hidden; }
.com-rolagem > .modal-topo { flex: none; }
.com-rolagem > .modal-rolagem { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.perfil-copiar { margin-left: 8px; padding: 2px 10px; font-size: 12px; vertical-align: middle; }
.btn-salvar { min-height: 38px; padding: 0 16px; border: 0; border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--sobre-destaque);
  background: linear-gradient(135deg, var(--verde), var(--ciano)); box-shadow: 0 4px 16px rgba(61,255,162,.3); }
.btn-salvar:hover { filter: brightness(1.08); }

/* fachada: apelido só no 1º acesso, nome da skin ao lado de "Visual" */
.campo-dica { display: block; margin-top: 4px; font-size: 12px; color: var(--texto2); text-transform: none; letter-spacing: 0; }
.campo-dica.erro { color: var(--hot); }
.skin-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.skin-cab .rotulo { margin: 0; }
.fx-centro .skin-cab .skin-nome { margin: 0; padding: 2px 12px; font-size: 13.5px; color: var(--ouro); }
.fx-centro .skin-linha canvas { height: 96px; }

/* VIP em sanfona: nome + preço e 1 linha; o quadro completo abre num popup */
.fx-plano { display: block; width: 100%; text-align: left; cursor: pointer; transition: border-color .2s, transform .15s; }
.fx-plano:hover { transform: translateY(-1px); border-color: var(--ouro); }
.fx-plano { overflow: hidden; }
.fx-plano small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-plano .fx-mais { float: right; margin-left: 6px; color: var(--ciano); font-size: 11px; }
.vip-pop { width: min(460px, 100%); }
.vip-pop h2 { color: var(--ouro); text-shadow: 0 0 18px rgba(255,210,63,.35); }
.vip-pop-preco { font-family: var(--f-mono); font-size: 18px !important; color: var(--texto) !important; margin-bottom: 8px; }
.vip-pop-lista { list-style: none; padding: 0 !important; display: grid; gap: 6px; margin: 10px 0; }
.vip-pop-lista li { padding-left: 24px; position: relative; }
.vip-pop-lista li::before { content: '✔'; position: absolute; left: 2px; color: var(--verde); }
.vip-pop-botoes { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 14px; align-items: center; }
.vip-pop-botoes .btn-play.pequeno { margin-top: 0; }

/* Personalizar: filtros Do jogo / VIPs / Todos */
.visual-filtros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 8px; }
.visual-filtros .btn-sec { min-height: 38px; }
.visual-filtros .btn-sec.on { border-color: var(--ouro); color: var(--sobre-destaque); background: linear-gradient(135deg, var(--ouro), #FFB13F); }
.visual-sala .tag-restrita { font-size: 10px; color: var(--ciano); margin-left: 4px; }

/* Configurar em abas */
.config-cartao { width: min(680px, 100%); }
.config-abas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.config-abas .btn-sec { flex: 0 1 auto; min-height: 36px; padding: 0 12px; font-size: 13px; }
.config-abas .btn-sec.on { border-color: var(--ciano); color: var(--sobre-destaque); background: var(--ciano); }
.config-aba .linha { border-bottom: 1px solid var(--tinta5); }
.config-aba .linha > span:first-child small { display: block; font-size: 11.5px; color: var(--texto3); }
.linha-alta { min-height: 56px; }
.linha-off { opacity: .5; }
.cfg-id { display: flex; gap: 8px; align-items: center; }
.cfg-id code { font-family: var(--f-mono); font-size: 15px; color: var(--ouro); }
.cfg-apelido { display: flex; gap: 6px; }
.cfg-apelido input, .config-aba select, .config-aba input[type=text], .config-aba textarea {
  min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--borda2); background: var(--tinta5); -webkit-user-select: text; user-select: text; }
.config-aba textarea { width: 100%; padding: 8px 10px; resize: vertical; font-family: var(--f-mono); font-size: 13px; }
.cfg-apelido input { width: 150px; }
.atalhos { display: grid; gap: 6px; }
.atalhos div { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 10px; align-items: center; }
.atalhos kbd { display: block; text-align: center; padding: 8px 6px; border-radius: 8px; border: 1px solid var(--borda2); background: var(--tinta4);
  font-family: var(--f-mono); font-size: 11.5px; color: var(--texto); }
.atalhos span { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--borda); font-size: 13.5px; }
.minha-sala { margin-top: 0; }
.sala-bloco { display: grid; gap: 2px; margin-bottom: 10px; }
.sala-bloco > .btn-sec { margin-top: 8px; }
.sala-capa { display: flex; gap: 8px; align-items: center; }
.sala-capa img { width: 120px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borda2); }

/* recorte de imagem */
.recorte-cartao { width: min(780px, 100%); }
.recorte-tela { display: block; width: 100%; height: auto; border-radius: 10px; background: #05040F; cursor: grab; touch-action: none; margin: 8px 0; }
.recorte-tela:active { cursor: grabbing; }
.recorte-ctrl { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.recorte-ctrl .linha { flex: 1; min-width: 200px; }
.recorte-ctrl input[type=range] { flex: 1; }
.recorte-ctrl input[type=number] { width: 64px; min-height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--borda2); background: var(--tinta5); }
.recorte-ctrl .btn-sec { flex: none; padding: 0 14px; }
@media (max-width: 640px) {
  .modal-topo { flex-wrap: wrap; }
  .atalhos div { grid-template-columns: 1fr; }
}

/* janelas que abrem por cima de outras */
#recorte, #vipPopup { z-index: 60; }

/* ── v0.11: tela inicial sempre no tamanho máximo (não encolhe ao trocar de aba) e janelas opacas ── */
.fx-servidores { min-height: 112px; align-content: start; }
@media (min-width: 1081px) and (min-height: 600px) {
  .camada-fachada { overflow: hidden; }
  .fachada { width: 100%; height: calc(100dvh - 52px - 16px); margin: 0; align-items: stretch; }
  .fachada .cartao { height: 100%; overflow-y: auto; }
  .fx-centro { display: flex; flex-direction: column; }
  .fachada { grid-template-rows: minmax(0, 1fr) auto; row-gap: 12px; }
}
/* janelas secundárias: fundo sólido (nada do jogo aparece por trás) e tamanho fixo grande */
.modal { background: var(--veu-modal); }
.modal .cartao { background: var(--bg2); backdrop-filter: none; -webkit-backdrop-filter: none; }
.config-cartao, .visual-cartao, .perfil-cartao { width: min(1100px, 100%); height: min(820px, calc(100dvh - 32px)); max-height: none; }
/* perfil do jogador */
.fx-perfil { cursor: pointer; border-radius: 12px; transition: background .2s; }
.fx-perfil:hover { background: var(--tinta4); }
.perfil-cab { display: flex; align-items: center; gap: 14px; min-width: 0; }
.perfil-avatar { width: 84px; height: 84px; font-size: 34px; }
.perfil-id { font-family: var(--f-mono); color: var(--ciano); font-size: 13px; }
.perfil-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 16px 0; }
.perfil-grade div { padding: 12px 14px; border-radius: 12px; background: var(--tinta4); border: 1px solid var(--borda); }
.perfil-grade small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto2); }
.perfil-grade b { font-family: var(--f-mono); font-size: 22px; }
.perfil-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--tinta6); }
.perfil-linha small { display: block; font-size: 11.5px; color: var(--texto3); }
.perfil-tokens { display: flex; align-items: center; gap: 10px; }
.perfil-tokens b { font-family: var(--f-mono); font-size: 20px; color: var(--ouro); }
/* celular: botões da linha para o centro (L) e de girar (G), acima do turbo */
.atalhos-toque { display: none; }
body.toque .atalhos-toque { display: flex; flex-direction: column; gap: 10px; position: absolute; pointer-events: auto;
  right: calc(max(16px, env(safe-area-inset-right)) + 22px); bottom: calc(max(18px, env(safe-area-inset-bottom)) + 110px); }
body.toque.lado-esq .atalhos-toque { right: auto; left: calc(max(16px, env(safe-area-inset-left)) + 22px); }
.btn-atalho { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; touch-action: none;
  background: var(--vidro); border: 2px solid var(--borda2); box-shadow: 0 4px 14px rgba(0,0,0,.45); transition: border-color .15s, box-shadow .15s; }
.dev-fantasma { position: fixed; bottom: 118px; left: 50%; transform: translateX(-50%); z-index: 32; padding: 6px 14px; border-radius: 12px; pointer-events: none;
  background: rgba(55,226,255,.14); border: 1px dashed var(--ciano); color: var(--texto); font-size: 12.5px; white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }
.dev-fantasma b { color: var(--ciano); }
.escolher-atalhos { display: grid; gap: 4px; margin: 10px 0; }
.escolher-atalhos label { display: flex; gap: 10px; align-items: center; min-height: 42px; padding: 0 6px; border-bottom: 1px solid var(--tinta5); cursor: pointer; }
.escolher-atalhos .ico { width: 30px; text-align: center; font-size: 20px; }
.btn-atalho.mais { opacity: .7; font-size: 18px; }
.btn-atalho.on { border-color: var(--hot); box-shadow: 0 0 0 3px rgba(255,77,109,.25), 0 4px 14px rgba(0,0,0,.45); }
[data-acao-toque=girar].on { border-color: var(--ciano); box-shadow: 0 0 0 3px rgba(55,226,255,.25), 0 4px 14px rgba(0,0,0,.45); }
[data-acao-toque=girar].on span { animation: girarIco 1s linear infinite; }
@keyframes girarIco { to { transform: rotate(360deg); } }
.ico-linha { width: 24px; height: 24px; position: relative; }
.ico-linha::before { content: ''; position: absolute; left: 2px; bottom: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.ico-linha::after { content: ''; position: absolute; left: 6px; bottom: 6px; width: 22px; height: 2px; background: var(--hot); transform-origin: left center; transform: rotate(-45deg); }
@media (max-height: 520px) {
  body.toque .atalhos-toque { right: calc(max(16px, env(safe-area-inset-right)) + 108px); bottom: max(18px, env(safe-area-inset-bottom)); }
  body.toque.lado-esq .atalhos-toque { left: calc(max(16px, env(safe-area-inset-left)) + 108px); }
}
/* cards da tela do jogo: escondidos pelo jogador / modo de arrastar (VIP-Total) */
.hud-oculto-jogador { display: none !important; }
/* Ajustar tela: oculto aparece apagado só durante a edição; 👁 em cima de cada elemento */
.hud-oculto-edicao { opacity: .28; filter: grayscale(1); }
.hud-olhos { position: fixed; inset: 0; z-index: 69; pointer-events: none; }
.hud-olho { position: fixed; pointer-events: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px;
  background: var(--bg2); border: 2px solid var(--ciano); box-shadow: 0 3px 12px rgba(0,0,0,.55); cursor: pointer; touch-action: manipulation; }
.hud-olho.off { border-color: var(--hot); background: var(--bg3); }
.atalho-ajuste { position: fixed; top: 4px; left: 50%; transform: translateX(-50%); z-index: 31; pointer-events: auto;
  padding: 3px 10px; border-radius: 0 0 10px 10px; border: 1px solid var(--borda2); border-top: 0; background: rgba(10,8,32,.55);
  color: var(--texto2); font-size: 11px; letter-spacing: .04em; opacity: .55; transition: opacity .2s; }
.atalho-ajuste:hover, .atalho-ajuste:focus-visible { opacity: 1; }
body.toque .atalho-ajuste { top: 0; padding: 5px 12px; font-size: 12px; }
.cfg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 24px; margin-bottom: 10px; }
.hud-edicao { position: fixed; z-index: 70; top: 58%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 16px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--ciano); box-shadow: 0 8px 30px rgba(0,0,0,.6); font-size: 13.5px; white-space: nowrap; }
.hud-edicao .btn-sec { flex: none; min-height: 36px; padding: 0 12px; }
body.hud-editando .hud { background: rgba(3,2,10,.35); }
body.hud-editando .hud-topo-esq, body.hud-editando .coluna-dir, body.hud-editando .hud-acoes, body.hud-editando #relogio, body.hud-editando #minimapa,
body.hud-editando #feed, body.hud-editando #efeitos, body.hud-editando #habs {
  pointer-events: auto !important; cursor: move; outline: 2px dashed var(--ciano); outline-offset: 4px; border-radius: 10px; touch-action: none; min-width: 60px; min-height: 40px; }
.visual-remover { display: flex; gap: 8px; justify-content: flex-end; margin: -4px 0 10px; }
/* clã */
.cla-cab { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--cla, var(--ouro)); background: var(--tinta3); margin-bottom: 6px; }
.cla-cab .cla-tag, .fx-quem .cla-tag { color: var(--cla, var(--ouro)); font-family: var(--f-mono); }
.cla-cab small { display: block; color: var(--texto2); margin-top: 2px; }
.cla-sair { display: flex; justify-content: flex-end; margin-top: 14px; }
.sala-item .btn-tecla { margin-left: 6px; }
/* sala privada (online) */
.cfg-privada { margin: 10px 0; }
.cfg-privada b { margin-top: 4px; }
.cfg-privada input { text-transform: uppercase; }
.fx-privada { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--borda2); font-size: 13px; }
.fx-privada b { flex: 1 1 100%; font-size: 12px; letter-spacing: .06em; color: var(--texto2); }
.fx-privada input { width: 92px; min-height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--borda2); background: var(--tinta5);
  font-family: var(--f-mono); text-transform: uppercase; -webkit-user-select: text; user-select: text; }
/* modo desenvolvedor (admin) */
.dev-barra { position: fixed; z-index: 45; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 24px); padding: 8px 10px 8px 14px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--ciano); box-shadow: 0 8px 30px rgba(0,0,0,.45); font-size: 12.5px; }
.dev-barra b { white-space: nowrap; color: var(--ciano); }
body.modo-dev #skinPrevia, body.modo-dev #visualPrevia { cursor: move; touch-action: none; }
.dev-barra { top: max(10px, env(safe-area-inset-top)); bottom: auto; left: max(12px, env(safe-area-inset-left)); transform: none; max-width: calc(100% - 190px); padding: 5px 8px 5px 12px; }
.dev-barra > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--texto2); }
.dev-barra .btn-tecla, .dev-barra .btn-salvar { white-space: nowrap; min-height: 30px; font-size: 12px; }
@media (max-width: 1100px) { .dev-barra > span { display: none; } }
.dev-aneis { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.dev-aneis input { width: 110px; }
.dev-aneis output { font-family: var(--f-mono); min-width: 38px; }
/* mensagens do Gestor */
.fx-msgs { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 12px; min-height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--borda2); background: var(--tinta4); font-weight: 600; text-align: left; }
.fx-msgs b { margin-left: auto; min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; background: var(--hot); color: #fff; font-size: 12px; }
.msgs-cartao { width: min(640px, 100%); }
.msgs-lista { display: grid; gap: 10px; }
.msg { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borda); background: var(--tinta4); }
.msg.nova { border-color: var(--ciano); }
.msg small { display: block; color: var(--texto3); font-size: 11.5px; margin: 2px 0 6px; }
.msg p { margin: 0; color: var(--texto); white-space: pre-line; }
.msg-punicao { border-left: 4px solid var(--ouro); } .msg-banimento { border-left: 4px solid var(--hot); } .msg-promocao { border-left: 4px solid var(--verde); }
.btn-banido { filter: grayscale(1); cursor: not-allowed; }

/* ── ranking (v0.17) ── */
.rank-cartao { width: min(560px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.rank-abas { display: grid; gap: 6px; margin: 4px 0 6px; }
.rank-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rank-seg .btn-sec { min-height: 36px; }
.rank-seg .btn-sec.on { border-color: var(--ouro); color: var(--sobre-destaque); background: linear-gradient(135deg, var(--ouro), #FFB13F); }
.rank-lista { overflow-y: auto; min-height: 120px; display: grid; gap: 4px; align-content: start; }
.rank-linha { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--veu1, rgba(255,255,255,.04)); }
.rank-linha.eu { outline: 2px solid var(--ouro); }
.rank-pos { font-weight: 800; text-align: center; font-size: 17px; }
.rank-nome, .rank-num { display: grid; line-height: 1.2; min-width: 0; }
.rank-nome b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-num { text-align: right; }
.rank-nome small, .rank-num small { opacity: .65; font-size: 11px; }
.rank-eu { margin: 8px 0 0; font-weight: 700; color: var(--ouro); min-height: 1em; }
.m-xp { margin: 4px 0 10px; font-weight: 800; color: var(--ouro); }
.morte-cartao .menu-sec { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ── Personalizar (v0.21): pastas à esquerda, peça em destaque à direita, prévia montada embaixo ── */
.visual-cartao { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; width: min(960px, 100%); height: auto; max-height: calc(100dvh - 32px); }
.pz-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pz-topo h2 { margin: 0; font-size: 26px; letter-spacing: .5px; text-transform: uppercase; }
.pz-partes { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }
.pz-acoes { display: flex; gap: 6px; margin-left: auto; }
.pz-roxo, .pz-amarelo, .pz-verde, .pz-vermelho { border: 0; border-radius: 8px; font-weight: 800; cursor: pointer; text-transform: uppercase; letter-spacing: .3px; }
.pz-roxo { background: #A000F0; color: #fff; min-height: 30px; padding: 0 14px; font-size: 12px; }
.pz-roxo.on { background: #fff; color: #6A00A8; box-shadow: 0 0 0 2px #A000F0 inset; }
.pz-acoes .pz-roxo { font-size: 14px; min-height: 34px; }
.pz-amarelo { background: #FFE600; color: #1A1530; min-height: 34px; padding: 0 12px; font-size: 14px; }
.pz-amarelo.on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #A000F0; }
.pz-verde { background: #7ED957; color: #10260A; min-height: 34px; font-size: 14px; }
.pz-vermelho { background: #FF3B3B; color: #fff; min-height: 34px; font-size: 14px; }
.pz-roxo:disabled, .pz-amarelo:disabled, .pz-verde:disabled, .pz-vermelho:disabled { opacity: .45; cursor: default; }
.pz-filtros { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pz-meio { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 10px; min-height: 0; }
.pz-pastas { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 10px; background: var(--tinta3); border: 1px solid var(--borda);
  max-height: min(270px, 32dvh); overflow-y: auto; }
.pz-pasta { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 3px 10px 3px 3px; border: 2px solid transparent; border-radius: 8px;
  background: #FFE600; color: #1A1530; font-weight: 800; text-align: left; cursor: pointer; text-transform: uppercase; font-size: 13px; }
.pz-pasta.on { border-color: #fff; box-shadow: 0 0 0 2px #A000F0; }
.pz-logo { flex: 0 0 auto; width: 48px; height: 28px; border-radius: 6px; background: #120F2E; color: #fff; display: grid; place-items: center; font-size: 12px; overflow: hidden; border: 2px solid #1A1530; }
.pz-logo img { width: 100%; height: 100%; object-fit: cover; }
.pz-pasta-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-pasta small { opacity: .6; font-weight: 700; }
.pz-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pz-item-tela { width: 100%; height: auto; aspect-ratio: 560 / 200; border-radius: 4px; background: var(--tinta3); border: 2px solid #8A3BFF; }
.pz-item-nome { margin: 0; text-align: center; font-size: 13px; color: var(--texto); min-height: 1.2em; }
.pz-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pz-previa { border-radius: 10px; background: var(--tinta3); border: 1px solid var(--borda); padding: 10px 14px; }
.pz-previa h3 { margin: 0 0 4px; font-size: 14px; text-transform: uppercase; letter-spacing: .4px; opacity: .85; }
.pz-previa-tela { display: block; width: 100%; height: auto; aspect-ratio: 900 / 220; }
.pz-montada { margin: 4px 0 0; font-size: 12px; opacity: .75; }
@media (max-width: 760px) {
  .pz-meio { grid-template-columns: 1fr; }
  .pz-pastas { max-height: 160px; }
  .pz-nav { grid-template-columns: 1fr 1fr; }
  .pz-topo h2 { font-size: 20px; }
}
.visual-cartao > * { flex-shrink: 0; }
.pz-item-tela { max-height: 26dvh; width: auto; max-width: 100%; margin: 0 auto; }
.pz-previa-tela { max-height: 24dvh; width: auto; max-width: 100%; margin: 0 auto; }
.pz-pastas { align-self: start; }
#feed div.premio { border-color: #FFD23F; color: #FFE98A; box-shadow: 0 0 12px rgba(255,210,63,.35); }

/* Bancada de testes (F3): lado direito, cabe na altura da tela */
.bancada { left: auto; right: 12px; top: 70px; max-height: calc(100dvh - 90px); width: 340px; z-index: 45; }
.bancada h3 small { color: var(--texto); opacity: .6; letter-spacing: 0; }
.bc-bloco { display: grid; gap: 5px; margin: 8px 0; padding-top: 8px; border-top: 1px dashed var(--borda2); }
.bc-bloco > small { opacity: .7; }
.bc-bloco label { display: flex; align-items: center; gap: 6px; }
.bc-bloco label input[type=range] { flex: 1; accent-color: var(--ouro); }
.bc-bloco output { min-width: 44px; text-align: right; color: var(--ciano); font-family: var(--f-mono); }
.bc-bloco select { flex: 1; background: var(--bg3); border: 1px solid var(--borda2); border-radius: 6px; font-size: 12px; padding: 2px 4px; }
.bc-orbes { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 6px; align-items: center; }
.bc-orbes button { min-height: 26px; padding: 0 8px; border-radius: 7px; background: var(--bg3); border: 1px solid var(--borda2); font-size: 12px; }
.bc-orbes button:hover, .bc-orbes button.on { border-color: var(--ouro); }
.bc-check { cursor: pointer; }