/* As tags animadas (monkey-hvh/tags/index.php, 18/10/2026; layout de uma tela
   só no mesmo dia, pedido dele: "é tudo muito longo"). As cores, fontes e peças
   das outras páginas do Monkey (loja/custom, perfil): o palco do jogo e a fita
   de quadros de um lado, as opções em abas do outro. A fita é onde a animação
   se lê e se edita, quadro por quadro. */

:root{
    --bg:#050507;--bg2:#0a0a0f;--bg3:#111118;--bg4:#16161f;
    --border:#1a1a25;--border2:#252535;
    --text:#eeeef0;--muted:#7a7a90;--muted2:#9d9db5;
    --gold:#f5a623;--gold2:#ffc344;--gold-tinta:rgba(245,166,35,.09);
    --red:#e74c3c;--green:#2ecc71;
    --sagui:#6ec1ff;--vip:#3ddc84;--gorila:#a77bff;--custom:#f5a623;
    --raio:14px;--raio-sm:10px;
    --curva:cubic-bezier(.23,1,.32,1);
    --e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:24px;--e6:32px;--e7:48px;
    --simbolos:'Inter','Noto Sans Symbols','Noto Sans Math','Segoe UI Symbol','Cambria Math',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scrollbar-gutter:stable;scrollbar-color:var(--border2) var(--bg)}
html,body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{padding-top:64px;min-height:100vh;font-size:15px;line-height:1.5;caret-color:var(--gold);animation:pageIn .35s ease-out}
body.page-out{animation:pageOut .25s ease-in forwards}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pageOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
::selection{background:rgba(245,166,35,.32);color:#fff}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.grid-bg::before{content:'';position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
    background-size:60px 60px}

.pagina{position:relative;z-index:1;max-width:1680px;margin:0 auto;padding:20px 32px 16px}

/* O topo numa linha: o título com o plano, e as tags da pessoa do lado. */
.topo{display:flex;align-items:center;gap:var(--e5);margin-bottom:14px;min-height:58px}
.topo-titulo{display:flex;align-items:center;gap:var(--e3);flex-shrink:0}
.voltar{display:inline-flex;align-items:center;gap:4px;font-size:.82rem;font-weight:700;color:var(--muted2);padding:6px 12px 6px 8px;border:1px solid var(--border2);border-radius:999px;background:var(--bg2);white-space:nowrap;text-decoration:none;transition:color .18s,border-color .18s}
.voltar svg{width:15px;height:15px}
@media (hover:hover){.voltar:hover{color:var(--text);border-color:var(--gold)}}
h1{font-size:1.4rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.plano{display:inline-flex;align-items:center;gap:var(--e2);font-size:.8rem;color:var(--muted2);padding:4px 11px;border:1px solid var(--border2);border-radius:999px;background:var(--bg2);white-space:nowrap}
.plano b{color:var(--nivel,var(--gold));font-weight:700;letter-spacing:.02em}
.plano i{font-style:normal;font-family:'JetBrains Mono',monospace;color:var(--text)}

/* Quebra em outra linha em vez de rolar: o VIP Custom chega a 10 tags. O
   status fica embaixo da tag, porque em espanhol ele não cabe ao lado do número. */
.slots{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;padding:2px;margin-left:auto;min-width:0}
.slot{flex:0 0 auto;min-width:150px;text-align:left;display:grid;align-content:start;gap:2px;padding:7px 11px;border:1px solid var(--border);border-radius:var(--raio-sm);
    background:var(--bg2);cursor:pointer;transition:border-color .18s ease,background-color .18s ease}
@media (hover:hover){.slot:hover{border-color:var(--border2)}}
.slot[aria-current=true]{border-color:var(--gold);background:var(--gold-tinta)}
.slot-cab{display:flex;align-items:center;justify-content:space-between;gap:6px}
.slot-n{font-size:.68rem;color:var(--muted);font-weight:600;letter-spacing:.05em;white-space:nowrap}
.slot-tag{font:600 .9rem var(--simbolos);white-space:pre;overflow:hidden;height:1.45em}
.slot-st{display:flex;align-items:center;gap:5px;font-size:.68rem;color:var(--muted2);white-space:nowrap}
.slot-st::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--st,var(--border2));flex-shrink:0}
.st-jogo{--st:var(--green)}.st-espera{--st:var(--gold)}.st-recusada{--st:var(--red)}.st-guardada{--st:var(--muted)}
.slot.nova{border-style:dashed}
.slot.nova .slot-tag{display:flex;align-items:center;gap:6px;color:var(--muted2);font:600 .85rem Inter,sans-serif}
.slot.nova svg{width:13px;height:13px}

.aviso{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e4);
    padding:var(--e4) var(--e5);margin-bottom:14px;border:1px solid var(--border2);border-radius:var(--raio);background:var(--bg2)}
.aviso p{color:var(--muted2);max-width:90ch}
.aviso p b{color:var(--text);font-weight:600}

/* O estúdio: o palco com a fita de um lado, as opções em abas do outro. A
   página pode descer um pouco; o que não pode é virar um scroll gigante, e
   nada rola por dentro de caixa (pedido dele, 18/10/2026). */
.estudio{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:var(--e4)}
.palco{display:flex;flex-direction:column;gap:var(--e3);min-width:0}
.editor{min-width:0}

/* As duas colunas acabam juntas: a cena do jogo cresce quando o editor é mais alto, e o cartão do editor quando a cena é. */
.jogo{flex:1 0 auto;border-radius:var(--raio);padding:var(--e4) var(--e5);display:grid;gap:var(--e4);align-content:center;
    background:radial-gradient(120% 90% at 50% 0%,#24313f 0%,#141c26 55%,#0b1016 100%);border:1px solid #1e2935}

.placar{display:grid;gap:2px;border-radius:8px;padding:.5rem .6rem .6rem;background:linear-gradient(180deg,#3b3933,#2d2c28);
    font-family:'Barlow Condensed',sans-serif;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.placar-cab,.placar-linha{display:grid;grid-template-columns:30px 26px minmax(0,1fr) 34px 34px 34px 46px;gap:3px;align-items:center}
.placar-cab{padding-bottom:.3rem;color:#c4c6c9;font-size:.78rem;font-weight:500;text-align:center}
.placar-cab span:nth-child(3){text-align:left;padding-left:.2rem}
.placar-linha{height:34px;border-radius:2px;background:#566b8c;font-size:1.05rem;font-weight:600;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.35);text-align:center}
/* No placar do CS2 a linha de quem está jogando é a mais clara; a dos outros, apagada. */
.placar-linha.outro{background:rgba(86,107,140,.4);color:#dbe2ec;font-weight:500}
.placar-linha.eu{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.pl-ping{color:#a9b5c6;font-weight:500}
.pl-av{width:26px;height:26px;border-radius:2px;background:#2b3442 center/cover no-repeat}
.pl-av.av1{background:#8a6d3b}.pl-av.av2{background:#3b6d8a}.pl-av.av3{background:#5a3b8a}.pl-av.av4{background:#3b8a5a}
.pl-quem{display:flex;align-items:center;gap:.3rem;min-width:0;padding-left:.2rem;text-align:left;white-space:pre;overflow:hidden}
.pl-tag,.kf-tag,.ch-tag{font-family:var(--simbolos);white-space:pre}
.pl-tag:empty,.kf-tag:empty{display:none}
.pl-nome{overflow:hidden;text-overflow:ellipsis}

/* O chat embaixo à esquerda e o killfeed à direita, como na tela do jogo. */
.jogo-baixo{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e4);min-width:0}
/* Com a coluna estreita, o chat encolhe (reticências) e o killfeed fica com a metade dele: um não passa por cima do outro. */
.chat{flex:1 1 0;display:grid;gap:4px;justify-items:start;min-width:0}
.chat .chat-linha{max-width:100%}
.kills{flex:0 1 auto;max-width:55%;display:grid;gap:4px;justify-items:end;min-width:0}
.kills .killfeed{max-width:100%}
.killfeed.outro{box-shadow:none;color:#e8e8e8}
.killfeed.outro .kf-quem{color:#8fc1ff}
.killfeed.outro .kf-vitima{color:#ffd28a}
.ch-ouro{color:#e4ae39}
.killfeed{display:flex;align-items:center;gap:8px;min-width:0;padding:5px 10px;border-radius:3px;
    background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 1px #c33c3c;font:600 .95rem 'Barlow Condensed',sans-serif;white-space:pre;overflow:hidden}
.kf-quem{color:#ffd28a;display:flex;gap:.3rem;min-width:0;overflow:hidden}
.kf-arma{height:15px;width:auto;flex-shrink:0;opacity:.92}
.kf-vitima{color:#8fc1ff}
.chat-linha{min-width:0;background:rgba(0,0,0,.42);border-radius:3px;padding:.32rem .6rem;
    font-weight:600;font-size:.92rem;text-shadow:0 1px 2px #000;white-space:pre;overflow:hidden;text-overflow:ellipsis}
.ch-nome,.ch-msg{color:#fff}

/* A fita: tocar e pausar, passar quadro a quadro, e editar o quadro parado. */
.fita{display:grid;gap:var(--e3);min-width:0;border:1px solid var(--border);border-radius:var(--raio);background:var(--bg2);padding:var(--e3) var(--e4) var(--e4)}
.fita-cab{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap}
.transporte{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--border2);border-radius:999px;background:var(--bg3)}
.passo{width:34px;height:34px;border-radius:50%;border:0;background:none;color:var(--muted2);display:grid;place-items:center;cursor:pointer;
    transition:background-color .15s ease,color .15s ease}
@media (hover:hover){.passo:hover{background:var(--bg4);color:var(--text)}}
.passo svg{width:15px;height:15px}
.tocar{height:34px;min-width:104px;padding:0 14px 0 12px;border-radius:999px;border:0;background:var(--bg4);color:var(--text);
    display:flex;align-items:center;justify-content:center;gap:7px;font-weight:700;font-size:.84rem;cursor:pointer;
    transition:background-color .18s ease,color .18s ease}
@media (hover:hover){.tocar:hover{background:#1e1e2a}}
.tocar svg{width:13px;height:13px;flex-shrink:0}
.tocar .i-tocar{display:none}
.fita.parada .tocar{background:var(--gold);color:#1a1205}
@media (hover:hover){.fita.parada .tocar:hover{background:var(--gold2)}}
.fita.parada .tocar .i-tocar{display:block}
.fita.parada .tocar .i-pausa{display:none}
.fita-conta{font:500 .82rem 'JetBrains Mono',monospace;color:var(--text);font-variant-numeric:tabular-nums}
.fita-ciclo{margin-left:auto;font:400 .76rem 'JetBrains Mono',monospace;color:var(--muted)}

/* A fita anda para o lado sem barra: a roda do mouse rola para o lado (tags.js), e a ponta esmaece quando há mais. */
.quadros{list-style:none;display:flex;gap:6px;overflow-x:auto;padding:2px;scrollbar-width:none;min-width:0}
.quadros::-webkit-scrollbar{display:none}
.quadros.tem-mais{mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.quadro{flex:0 0 auto;min-width:44px;height:44px;padding:0 10px;display:grid;grid-template-rows:auto 1fr;justify-items:center;align-items:center;
    border:1px solid var(--border);border-radius:9px;background:var(--bg3);cursor:pointer;
    transition:border-color .15s ease,background-color .15s ease}
@media (hover:hover){.quadro:hover{border-color:var(--border2)}}
.q-n{font:500 .6rem 'JetBrains Mono',monospace;color:var(--muted);line-height:1;padding-top:5px}
.q-txt{font:600 .84rem var(--simbolos);white-space:pre;color:var(--muted2);line-height:1.2}
.quadro.vazio .q-txt{font:500 .68rem 'JetBrains Mono',monospace;color:var(--muted)}
.quadro[aria-current=true]{border-color:var(--gold);background:var(--gold-tinta)}
.quadro[aria-current=true] .q-txt{color:var(--gold2)}
.quadro[aria-current=true] .q-n{color:var(--gold)}
.quadro.mais{border-style:dashed;grid-template-rows:1fr;color:var(--muted2)}
.quadro.mais svg{width:14px;height:14px}
.quadro.mais:disabled{opacity:.35;cursor:default}

/* O quadro parado aberto para editar: o texto, a fonte só dele e os símbolos,
   em grade que quebra linha (nada de rolagem para o lado). */
.edicao{display:grid;gap:var(--e3);padding:var(--e3);border:1px solid var(--border2);border-radius:12px;background:var(--bg3)}
.ed-topo{display:flex;align-items:center;gap:var(--e2);min-width:0}
.ed-n{font:700 .74rem 'JetBrains Mono',monospace;color:#1a1205;background:var(--gold);border-radius:7px;padding:0 9px;height:28px;display:grid;place-items:center;white-space:nowrap}
.ed-campo{position:relative;flex:1;min-width:0}
.ed-campo input[type=text]{height:40px;font-size:1rem;padding-right:56px;background:var(--bg2)}
.ed-campo .conta{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none}
.ed-acoes{display:flex;gap:1px;padding:2px;border:1px solid var(--border);border-radius:10px;background:var(--bg2)}
.ed-acoes .icone{width:32px;height:32px}

.ed-escolha{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);flex-wrap:wrap}
.mini-seg{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--bg2);border:1px solid var(--border)}
.mini-seg button{height:28px;padding:0 12px;border:0;border-radius:7px;background:none;font-weight:600;font-size:.78rem;color:var(--muted2);cursor:pointer;
    transition:background-color .15s ease,color .15s ease}
.mini-seg button[aria-checked=true]{background:var(--bg4);color:var(--text);box-shadow:inset 0 0 0 1px var(--border2)}
.grupos{display:flex;flex-wrap:wrap;gap:2px}
.grupos button{height:28px;padding:0 9px;border:0;border-radius:7px;background:none;font-weight:600;font-size:.76rem;color:var(--muted);cursor:pointer}
@media (hover:hover){.grupos button:hover{color:var(--text)}}
.grupos button[aria-checked=true]{color:var(--gold2);background:var(--gold-tinta)}

.grade-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:5px}
.grade-chips .chip.igual{grid-column:span 2}
.grade-simbolos{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:4px}
.chip{height:36px;padding:0 8px;border:1px solid var(--border);border-radius:9px;background:var(--bg2);
    font:600 .84rem var(--simbolos);white-space:pre;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
@media (hover:hover){.chip:hover{border-color:var(--border2)}}
.chip[aria-checked=true]{border-color:var(--gold);background:var(--gold-tinta);color:var(--gold2)}
.chip.simbolo{padding:0;font-size:1rem}
.chip.igual{font:600 .74rem Inter,sans-serif;color:var(--muted2)}
.chip.igual[aria-checked=true]{color:var(--gold2)}

.fita-pe{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);flex-wrap:wrap}
.fita-dica{font-size:.8rem;color:var(--muted2)}
.fita-dica b{color:var(--text);font-weight:600}

.fita-tempo{display:flex;min-width:0;align-items:center;gap:var(--e3);flex-wrap:wrap;padding-top:var(--e3);border-top:1px solid var(--border)}
.fita-tempo>label:first-child{font-size:.8rem;font-weight:600;white-space:nowrap}
.fita-tempo input[type=range]{flex:1;min-width:120px}
.fita-tempo .chave{font-size:.84rem}
.alerta-bytes{font-size:.8rem;color:#ffb08a;flex-shrink:0}

/* As opções: o texto e o modo em cima, as abas embaixo. */
.editor{border:1px solid var(--border);border-radius:var(--raio);background:var(--bg2)}
.editor-topo{display:grid;gap:var(--e3);padding:var(--e4) var(--e4) var(--e3)}
.campo-texto{display:grid;gap:6px}
.campo-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3)}
.campo-cab label{font-weight:600;font-size:.86rem}
.conta{font:400 .76rem 'JetBrains Mono',monospace;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.conta.no-limite{color:var(--gold)}
.nota{font-size:.8rem;color:var(--muted)}

input[type=text],select{height:46px;border-radius:var(--raio-sm);border:1px solid var(--border2);background:var(--bg3);padding:0 14px;
    font:600 1.05rem var(--simbolos);outline:none;transition:border-color .18s ease;width:100%}
input[type=text]::placeholder{color:var(--muted);font-weight:500}
input[type=text]:focus,select:focus{border-color:var(--gold)}
select{font:500 .85rem Inter,sans-serif;width:auto;cursor:pointer}

.segmento{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:var(--bg3);border:1px solid var(--border)}
.segmento button{height:36px;border:0;border-radius:9px;background:none;font-weight:600;font-size:.86rem;color:var(--muted2);cursor:pointer;
    transition:background-color .18s ease,color .18s ease}
.segmento button[aria-checked=true]{background:var(--bg4);color:var(--text);box-shadow:inset 0 0 0 1px var(--border2)}

.abas{display:flex;gap:2px;padding:0 var(--e3);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.abas button{position:relative;height:42px;padding:0 12px;border:0;background:none;font-weight:600;font-size:.84rem;color:var(--muted2);cursor:pointer;white-space:nowrap;
    transition:color .15s ease}
@media (hover:hover){.abas button:hover{color:var(--text)}}
.abas button[aria-selected=true]{color:var(--text)}
.abas button[aria-selected=true]::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--gold)}
.aba-corpo{padding:var(--e4)}
.painel{display:grid;gap:var(--e3)}

/* As peças: cada uma já mostra o seu texto do jeito dela. */
.pecas{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:6px}
.peca{display:grid;gap:3px;padding:9px 6px 7px;border:1px solid var(--border);border-radius:var(--raio-sm);background:var(--bg3);cursor:pointer;text-align:center;
    transition:border-color .15s ease,background-color .15s ease}
@media (hover:hover){.peca:hover{border-color:var(--border2)}}
.peca[aria-checked=true]{border-color:var(--gold);background:var(--gold-tinta)}
.peca-mostra{font:600 .88rem var(--simbolos);white-space:pre;overflow:hidden;height:1.5em;line-height:1.5em;color:var(--text)}
.peca-nome{font-size:.7rem;color:var(--muted2);font-weight:500}
.peca[aria-checked=true] .peca-nome{color:var(--gold2)}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--gold) var(--p,20%),var(--border2) var(--p,20%))}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--border2)}
input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--gold)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;margin-top:-7px;box-shadow:0 1px 4px rgba(0,0,0,.5)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}

.chave{display:flex;align-items:flex-start;gap:var(--e3);cursor:pointer;font-size:.9rem;font-weight:500}
.chave input{appearance:none;width:38px;height:22px;border-radius:999px;background:var(--border2);position:relative;cursor:pointer;flex-shrink:0;margin:0;transition:background-color .18s ease}
.chave input::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s var(--curva)}
.chave input:checked{background:var(--gold)}
.chave input:checked::after{transform:translateX(16px)}
.chave small{display:block;color:var(--muted);font-size:.78rem;font-weight:400}

.molduras{display:flex;flex-wrap:wrap;gap:6px}
.moldura{min-width:50px;height:36px;padding:0 10px;border:1px solid var(--border);border-radius:9px;background:var(--bg3);font:500 1rem var(--simbolos);cursor:pointer;
    transition:border-color .15s ease}
.moldura.sem{font:600 .78rem Inter,sans-serif;color:var(--muted2)}
.moldura[aria-checked=true]{border-color:var(--gold);background:var(--gold-tinta)}

.pincel{display:flex;flex-wrap:wrap;gap:var(--e2)}
.cor{width:28px;height:28px;border-radius:50%;border:0;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.cor[aria-checked=true]{box-shadow:0 0 0 2px var(--bg2),0 0 0 4px var(--text)}
.pintar-tudo{font:600 .78rem Inter,sans-serif;color:var(--muted2);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border2);white-space:nowrap}
.tinta{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:var(--e5) var(--e3);border-radius:12px;
    background:radial-gradient(ellipse at 50% 0%,#1d2633 0%,#0d1117 75%);user-select:none;-webkit-user-select:none}
.letra{min-width:36px;height:50px;padding:0 4px;display:grid;place-items:center;font:800 1.5rem var(--simbolos);border-radius:8px;border:0;background:none;cursor:crosshair;
    text-shadow:0 2px 6px rgba(0,0,0,.6);transition:background-color .12s ease}
@media (hover:hover){.letra:hover{background:rgba(255,255,255,.06)}}
.letra.espaco{min-width:14px;cursor:default}
.letra.borda{opacity:.85}

.icone{width:30px;height:30px;border-radius:8px;border:0;background:none;color:var(--muted2);display:grid;place-items:center;cursor:pointer}
@media (hover:hover){.icone:hover{background:var(--bg4);color:var(--text)}}
.icone:disabled{opacity:.3;cursor:default}
.icone svg{width:15px;height:15px}
.botao-linha{height:32px;padding:0 12px;border-radius:9px;border:1px solid var(--border2);background:none;font-weight:600;font-size:.8rem;color:var(--text);cursor:pointer;white-space:nowrap;
    transition:border-color .15s ease}
@media (hover:hover){.botao-linha:hover{border-color:var(--gold)}}

/* A barra de salvar: sempre à mão, com o que vai acontecer escrito do lado. */
.barra{position:sticky;bottom:12px;z-index:5;margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e3);
    padding:10px 10px 10px var(--e5);border:1px solid var(--border2);border-radius:var(--raio);
    background:rgba(10,10,15,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.barra-status{font-size:.86rem;color:var(--muted2);max-width:70ch}
.barra-status b{color:var(--text);font-weight:600}
.barra-acoes{display:flex;gap:var(--e2);margin-left:auto}
.botao{height:42px;padding:0 22px;border:0;border-radius:var(--raio-sm);background:var(--gold);color:#1a1205;font-weight:700;font-size:.92rem;cursor:pointer;
    transition:background-color .18s ease,transform .12s ease}
@media (hover:hover){.botao:hover{background:var(--gold2)}}
.botao:active{transform:scale(.98)}
.botao:disabled{opacity:.45;cursor:default;transform:none}
.botao-quieto{height:42px;padding:0 14px;border:0;border-radius:var(--raio-sm);background:none;color:var(--muted2);font-weight:600;font-size:.86rem;cursor:pointer}
@media (hover:hover){.botao-quieto:hover{color:#ff9b8f}}

.toast{position:fixed;left:50%;bottom:1.5rem;z-index:1000;max-width:calc(100vw - 2rem);background:var(--bg3);border:1px solid var(--border2);
    border-radius:12px;padding:12px 18px;font-size:.88rem;transform:translate(-50%,20px);opacity:0;pointer-events:none;
    transition:transform .25s var(--curva),opacity .25s ease;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.aberto{transform:translate(-50%,0);opacity:1}
.toast.erro{border-color:color-mix(in srgb,var(--red) 60%,transparent);color:#ff9b8f}

footer{position:relative;z-index:1;border-top:1px solid var(--border);margin-top:var(--e7);padding:2rem 2.5rem;display:flex;justify-content:space-between;
    align-items:center;flex-wrap:wrap;gap:1rem;color:var(--muted);font-size:.82rem}
footer a{color:var(--muted2);transition:color .2s}
footer a:hover{color:var(--gold)}
.footer-links{display:flex;gap:1.25rem;flex-wrap:wrap}
.footer-termos{margin-left:.75rem}

/* Tablet e celular: uma coluna, e o palco do jogo grudado no alto enquanto
   a pessoa mexe na fita e nas abas (a tag sempre à vista). */
@media (max-width:980px){
    .topo{flex-wrap:wrap;gap:var(--e3)}
    .slots{margin-left:0;width:100%;justify-content:flex-start}
    .estudio{grid-template-columns:minmax(0,1fr)}
    .palco{display:contents}
    .extra{display:none!important}
    .jogo{position:sticky;top:64px;z-index:4;box-shadow:0 -14px 0 var(--bg),0 12px 24px rgba(5,5,7,.65)}
}
@media (max-width:980px){
    .pagina{padding:16px 16px 16px}
}
@media (max-width:560px){
    .pagina{padding-top:14px}
    .topo-titulo{flex-wrap:wrap;flex-shrink:1;min-width:0;row-gap:var(--e2)}
    h1{font-size:1.25rem}
    .jogo{padding:var(--e3);gap:var(--e2)}
    .placar{padding:.35rem .4rem .45rem}
    .placar-cab{display:none}
    .placar-linha{grid-template-columns:22px minmax(0,1fr) 30px 30px 30px}
    .placar-linha .pl-ping,.placar-linha span:nth-child(7){display:none}
    .killfeed{display:none}
    .fita{padding:var(--e3)}
    .fita-ciclo{margin-left:0;width:100%}
    .ed-topo{flex-wrap:wrap}
    .ed-campo{flex-basis:calc(100% - 96px)}
    .ed-acoes{margin-left:auto}
    .grade-chips{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
    .editor-topo,.aba-corpo{padding:var(--e3)}
    .pecas{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
    .barra{bottom:8px;padding:var(--e3)}
    .barra-acoes{width:100%}
    .barra-acoes .botao{flex:1}
    footer{padding:1.5rem 1rem}
}
@media (prefers-reduced-motion:reduce){
    body,body.page-out{animation:none}
    *{transition:none!important;scroll-behavior:auto!important}
}