/*
  Loja do EMBATE — implementação do design "Loja Beta EMBATE v2".

  As variáveis, tamanhos e famílias abaixo saem do design; o que mudou de forma foi só o que o canvas
  de design não tem como expressar:

  - o alternador desktop/mobile virou @media, porque no site de verdade quem escolhe é o aparelho;
  - as fontes (Silkscreen, Figtree) são servidas por nós em /font, e não pelo Google: a CSP da loja é
    'self', e CDN de fonte seria um terceiro vendo cada visita e um ponto de falha fora do nosso
    controle no dia do lançamento.
*/
@import url("/font/fonts.css");

:root {
    --bg: #0f0f0f; --surf: #161616; --deep: #0f0f0f; --line: #262626;
    --bd: #404040; --bdh: #8a8a8a;
    --tx: #ffffff; --tx2: #d4d4d4; --mut: #a3a3a3; --dim: #737373; --faint: #525252;
    --sel: #111a11;
    --grn: #55ff55; --grn-ink: #0a1a0a; --grn-sh: #2b8a2b; --grn-hov: #7bff7b;
    --ylw: #ffd94a; --ylw-ink: #1a1500; --ylw-sh: #8a7020; --ylw-hov: #ffe680;
    --cyn: #55ffff; --cyn-ink: #0a1a0a; --cyn-sh: #1f8a8a; --cyn-hov: #8affff;
    --pnk: #f8a3ff;
    --red: #ff5555; --red-ink: #1a0a0a; --red-bd: #402020; --red-bg: #1a1010;
    --pix: Silkscreen, ui-monospace, monospace;
}

:root[data-theme="light"] {
    --bg: #f5f5f5; --surf: #ffffff; --deep: #fafafa; --line: #d4d4d4;
    --bd: #b8b8b8; --bdh: #525252;
    --tx: #0f0f0f; --tx2: #404040; --mut: #525252; --dim: #8a8a8a; --faint: #a3a3a3;
    --sel: #eef7ee;
    --grn: #1f8a2b; --grn-ink: #ffffff; --grn-sh: #0f5c1c; --grn-hov: #2ba33a;
    --ylw: #8a6a10; --ylw-ink: #fffbe8; --ylw-sh: #5c4508; --ylw-hov: #a37d18;
    --cyn: #0f7a8a; --cyn-ink: #ffffff; --cyn-sh: #0a5560; --cyn-hov: #149aad;
    --pnk: #a03bb0;
    --red: #c62828; --red-ink: #ffffff; --red-bd: #e0b4b4; --red-bg: #fdf0f0;
}

* { box-sizing: border-box; }

/*
  O atributo hidden vale mais que display.

  A folha do navegador aplica [hidden] { display: none }, mas isso perde pra qualquer display vindo
  de classe ou de style inline — e a tela do Pix usa os dois. O resultado era o bloco "escondido"
  aparecendo assim mesmo: a área do QR ficava visível e vazia enquanto a cobrança era criada, que é
  exatamente o "tá sem nada" que se via. Uma linha resolve pra sempre.
*/
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--tx);
    font-family: Figtree, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    /* O design é pixel art: escalar imagem com suavização estraga o serrilhado de propósito. */
    image-rendering: pixelated;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

a { color: var(--tx); text-decoration: none; }
a:hover { color: var(--mut); }
::selection { background: var(--tx); color: var(--bg); }

/* ---- Tipografia do design ------------------------------------------------------------------- */

.px { font-family: var(--pix); }
h1, h2 { font-family: var(--pix); font-weight: 700; margin: 0; }
h1 { font-size: 32px; line-height: 1.24; letter-spacing: .01em; }
h2 { font-size: 20px; letter-spacing: .02em; }
.rotulo { font-family: var(--pix); font-size: 9px; letter-spacing: .08em; color: var(--mut); }
.num { font-variant-numeric: tabular-nums; }
.mut { color: var(--mut); }
.faint { color: var(--faint); font-size: 13px; }

/* ---- Botões -------------------------------------------------------------------------------- */

button { font-family: var(--pix); border-radius: 0; cursor: pointer; }

/* Botão "de bloco", com sombra sólida embaixo — a assinatura visual do design. */
.bt {
    padding: 15px 18px;
    font-size: 13px;
    letter-spacing: .06em;
    border: 0;
    color: var(--grn-ink);
    background: var(--grn);
    box-shadow: 0 6px 0 var(--grn-sh);
}
.bt:hover { background: var(--grn-hov); }
.bt:active { box-shadow: 0 2px 0 var(--grn-sh); transform: translateY(4px); }
.bt.ciano { color: var(--cyn-ink); background: var(--cyn); box-shadow: 0 5px 0 var(--cyn-sh); }
.bt.ciano:hover { background: var(--cyn-hov); }
.bt.ciano:active { box-shadow: 0 2px 0 var(--cyn-sh); transform: translateY(3px); }
.bt.amarelo { color: var(--ylw-ink); background: var(--ylw); box-shadow: 0 5px 0 var(--ylw-sh); }
.bt.amarelo:hover { background: var(--ylw-hov); }
.bt.menor { padding: 13px 18px; font-size: 11px; }
.bt[disabled] {
    color: var(--dim); background: var(--line); box-shadow: 0 6px 0 var(--bd);
    cursor: not-allowed;
}
.bt[disabled]:active { transform: none; box-shadow: 0 6px 0 var(--bd); }

/* Botão de contorno */
.bo {
    padding: 9px 12px;
    font-size: 9px;
    letter-spacing: .06em;
    color: var(--tx);
    background: var(--surf);
    border: 2px solid var(--bd);
}
.bo:hover { border-color: var(--bdh); }
.bo.media { padding: 12px 18px; font-size: 10px; }
.bo.grande { padding: 15px 20px; font-size: 11px; }
.bo.quadrado { width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; }
.bo.ativo { color: var(--bg); background: var(--tx); border-color: var(--tx); }

.icone-botao {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0;
    color: var(--mut); background: transparent; border: 0;
}
.icone-botao:hover { color: var(--tx); }

/* ---- Campos -------------------------------------------------------------------------------- */

input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-family: var(--pix);
    font-size: 13px;
    color: var(--tx);
    background: var(--surf);
    border: 2px solid var(--bd);
    border-radius: 0;
}
input:focus { outline: 2px solid var(--tx); outline-offset: 0; }
input.ok { border-color: var(--grn); }
input.erro { border-color: var(--red); }

/* ---- Estrutura ----------------------------------------------------------------------------- */

header {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 0 36px;
    height: 62px;
    flex: none;
    border-bottom: 4px solid var(--line);
}
header .logo {
    font-family: var(--pix);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: .04em;
    margin-right: auto;
}
header nav { display: flex; align-items: center; gap: 22px; }

main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tela { flex: 1; min-height: 0; display: none; }
.tela.ativa { display: grid; }

/*
   Coluna única SÓ no carrinho, e por id de propósito.

   Aqui morava um `.tela.ativa { grid-template-columns: ... }` que quebrou todas as outras telas: ele
   tem duas classes de especificidade e passava por cima do `.col-pagamento`, de uma só — resultado,
   pagamento e aprovado viraram uma coluna, com cara de celular no desktop.

   O minmax(0, 1fr) continua sendo necessário: com coluna `auto`, um filho de width:100% e a coluna
   que se dimensiona pelo filho entram em referência circular e o resultado é largura zero.
*/
#tela-carrinho.ativa { grid-template-columns: minmax(0, 1fr); }
.tela.ativa.centrada { display: flex; align-items: center; justify-content: center; }


.col-pagamento { grid-template-columns: 1fr 440px; }
.col-ok { grid-template-columns: 1fr 520px; }

.painel { padding: 28px 32px; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.painel.divisor { border-right: 4px solid var(--line); }

.cartao { border: 2px solid var(--bd); background: var(--surf); padding: 12px; }
.topo-linha { padding-top: 16px; border-top: 4px solid var(--line); }

/* ---- Cartão do servidor (MOTD) ------------------------------------------------------------- */

.motd { display: flex; gap: 12px; flex: none; }
.motd .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.motd .linha-ip { display: flex; align-items: baseline; gap: 8px; }
.motd .ip { font-family: var(--pix); font-size: 11px; letter-spacing: .04em; }
.motd .versao { font-family: var(--pix); font-size: 10px; line-height: 1.7; color: var(--cyn); }
.motd .modo { font-family: var(--pix); font-size: 10px; line-height: 1.7; }
.sinal { display: flex; align-items: flex-end; gap: 2px; height: 10px; margin-left: auto; }
.sinal span { width: 2px; background: var(--grn); }

.arte {
    width: 100%;
    flex: 1;
    min-height: 0;
    object-fit: cover;
    border: 2px solid var(--bd);
    background: var(--surf);
}

/* Bloco de placeholder pra item sem arte: xadrez, no espírito do próprio design. */
.icone {
    width: 56px; height: 56px; flex: none;
    border: 2px solid var(--bd);
    background:
        repeating-conic-gradient(var(--line) 0% 25%, var(--surf) 0% 50%) 0 0 / 14px 14px;
    object-fit: cover;
}

/* ---- Itens do carrinho --------------------------------------------------------------------- */

.itens { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }

.item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 2px solid var(--bd);
    background: var(--surf);
    cursor: pointer;
    user-select: none;
    text-align: left;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}
.item:hover { border-color: var(--bdh); }
.item[aria-pressed="true"] { border-color: var(--grn); background: var(--sel); }
.item .info { flex: 1; }
.item .nome { font-family: var(--pix); font-size: 14px; letter-spacing: .02em; }
.item .desc { font-size: 13px; color: var(--mut); margin-top: 4px; }
.item .prazo { font-family: var(--pix); font-size: 9px; letter-spacing: .06em; color: var(--cyn); margin-top: 6px; }
.item .valores { text-align: right; font-variant-numeric: tabular-nums; }
.item .cheio { font-size: 12px; color: var(--dim); text-decoration: line-through; }
.item .preco { font-family: var(--pix); font-size: 15px; color: var(--ylw); }
.item.brinde { border-color: var(--grn); background: var(--sel); cursor: default; }
.item.brinde:hover { border-color: var(--grn); }
.item .selo-brinde { font-family: var(--pix); font-size: 15px; color: var(--grn); }

/* ---- Rodapé do carrinho -------------------------------------------------------------------- */

.fechamento {
    flex: none;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 22px;
    align-items: end;
}
.campo { display: flex; flex-direction: column; gap: 7px; }
.total-bloco { display: flex; flex-direction: column; gap: 10px; }
.total-linha {
    display: flex; align-items: baseline; justify-content: space-between;
    font-variant-numeric: tabular-nums;
}
.total-valor { text-align: right; }
.total-cheio { font-size: 12px; color: var(--dim); text-decoration: line-through; }
.total-num { font-family: var(--pix); font-size: 26px; line-height: 1.2; color: var(--ylw); }
.nick-msg { font-size: 12px; color: var(--dim); }
.nick-msg.ok { color: var(--grn); }
.nick-msg.erro { color: var(--red); }

/* ---- Pagamento ----------------------------------------------------------------------------- */

.abas { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.abas button { padding: 11px 14px; font-size: 10px; letter-spacing: .06em; }
.aba-corpo {
    flex: 1; min-height: 0;
    border: 2px solid var(--bd);
    background: var(--surf);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.aba-painel { display: none; flex: 1; min-height: 0; }
.aba-painel.ativa { display: flex; flex-direction: column; gap: 16px; }
.pix-area { align-items: center; justify-content: center; text-align: center; }
.pix-qr {
    width: 300px; max-width: 100%; height: auto;
    background: #fff; padding: 8px;
    border: 2px solid var(--bd);
}
.pix-codigo {
    width: 100%; max-width: 560px;
    font-family: var(--pix); font-size: 9px; line-height: 1.9;
    color: var(--mut); word-break: break-all;
    padding: 12px; border: 2px solid var(--bd); background: var(--bg);
}
.resumo-linha { display: flex; align-items: center; gap: 12px; padding: 12px; border: 2px solid var(--bd); background: var(--surf); }
.resumo-linha .nome { flex: 1; font-family: var(--pix); font-size: 11px; line-height: 1.5; }
.resumo-linha .valor { font-family: var(--pix); font-size: 12px; color: var(--ylw); font-variant-numeric: tabular-nums; }
.resumo-linha .brinde { font-family: var(--pix); font-size: 12px; color: var(--grn); }
.entrega { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 2px solid var(--bd); background: var(--surf); flex: none; }
.entrega .nick { font-family: var(--pix); font-size: 14px; }
.rodape-resumo { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.links-doc { display: flex; gap: 12px; justify-content: center; font-size: 11px; }
.links-doc a { color: var(--mut); text-decoration: underline; }

/* ---- Telas de estado ----------------------------------------------------------------------- */

.estado-centro {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 16px; text-align: center; padding: 40px;
}
.selo-quadrado {
    width: 44px; height: 44px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--pix); font-size: 20px;
}
.selo-quadrado.verde { background: var(--grn); color: var(--grn-ink); }
.selo-quadrado.vermelho { background: var(--red); color: var(--red-ink); }
.selo-quadrado.amarelo { background: var(--ylw); color: var(--ylw-ink); }
.titulo-estado { font-family: var(--pix); font-weight: 700; font-size: 34px; line-height: 1.25; }
.titulo-estado.verde { color: var(--grn); }
.titulo-estado.vermelho { color: var(--red); }
.motivo { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border: 2px solid var(--red-bd); background: var(--red-bg); }
.ativos { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 2px solid var(--bd); background: var(--surf); flex: none; }
.ativos div { font-family: var(--pix); font-size: 10px; line-height: 1.7; color: var(--grn); }

/* Barrinhas pulsando: "estamos esperando o gateway". */
.pulso { display: flex; align-items: flex-end; gap: 5px; height: 22px; }
.pulso span { width: 9px; background: var(--cyn); animation: emb-pulse 1.2s infinite; }
.pulso span:nth-child(1) { height: 9px; animation-delay: 0s; }
.pulso span:nth-child(2) { height: 14px; animation-delay: .2s; }
.pulso span:nth-child(3) { height: 20px; animation-delay: .4s; }
@keyframes emb-pulse { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }

/* Confete das laterais na tela de aprovado. */
.confete { position: absolute; top: 0; bottom: 0; width: 64px; overflow: hidden; pointer-events: none; z-index: 2; opacity: .8; }
.confete.esq { left: 0; }
.confete.dir { right: 0; }
.confete span { position: absolute; top: -20px; animation: emb-fall 3.5s infinite linear; }
@keyframes emb-fall {
    0% { opacity: 0; transform: translateY(-40px) rotate(0deg) }
    18% { opacity: 1 }
    100% { opacity: 0; transform: translateY(620px) rotate(220deg) }
}

/* ---- Consulta de pedido -------------------------------------------------------------------- */

.consulta { width: 100%; max-width: 720px; padding: 40px 36px; display: flex; flex-direction: column; gap: 20px; margin: 0 auto; }
.busca { display: flex; gap: 10px; align-items: flex-end; }
.busca .campo { flex: 1; }
.busca button { height: 46px; padding: 0 20px; font-size: 11px; box-shadow: 0 5px 0 var(--cyn-sh); }
.pedido-cartao { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 2px solid var(--bd); background: var(--surf); }
.pedido-topo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pedido-topo .numero { font-family: var(--pix); font-size: 14px; }
.pedido-topo .estado { font-family: var(--pix); font-size: 9px; letter-spacing: .08em; }
.pedido-topo .valor { margin-left: auto; font-family: var(--pix); font-size: 13px; color: var(--ylw); font-variant-numeric: tabular-nums; }
.trilha { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 2px solid var(--line); }
.trilha div { display: flex; align-items: center; gap: 10px; font-family: var(--pix); font-size: 10px; color: var(--mut); }
.trilha div.feito { color: var(--grn); }
.trilha .marca { width: 12px; height: 12px; flex: none; border: 2px solid var(--bd); }
.trilha div.feito .marca { background: var(--grn); border-color: var(--grn); }
.cor-ylw { color: var(--ylw); }
.cor-grn { color: var(--grn); }
.cor-red { color: var(--red); }
.cor-cyn { color: var(--cyn); }
.cor-pnk { color: var(--pnk); }

/* ---- Discord no cabeçalho -------------------------------------------------------------------- */

/* Era uma badge fixa no rodapé; ali ela tapava o botão de pagar no celular e competia com o próprio
   conteúdo da loja. No cabeçalho ela fica ao lado do tema, onde mora o resto do que não é compra. */
.discord-icone { color: var(--tx); text-decoration: none; }
.discord-icone:hover { color: var(--cyn); border-color: var(--bdh); }

/* ---- Modal --------------------------------------------------------------------------------- */

.modal {
    position: fixed; inset: 0; z-index: 40;
    display: none; align-items: center; justify-content: center;
    padding: 32px; background: rgba(0, 0, 0, .7);
}
.modal.aberto { display: flex; }
.modal-caixa {
    width: 100%; max-width: 620px; max-height: 100%; overflow-y: auto;
    display: flex; flex-direction: column; gap: 16px;
    padding: 24px; border: 2px solid var(--bd); background: var(--surf);
}
.modal-topo { display: flex; align-items: center; gap: 14px; }
.modal-topo .titulo { flex: 1; font-family: var(--pix); font-size: 14px; line-height: 1.5; }
.modal-item { display: flex; flex-direction: column; gap: 5px; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.modal-item .h { font-family: var(--pix); font-size: 10px; letter-spacing: .06em; color: var(--ylw); }
.modal-item .t { font-size: 13px; color: var(--mut); line-height: 1.65; }

/* ---- Aviso de erro ------------------------------------------------------------------------- */

#aviso {
    display: none;
    padding: 12px 16px;
    border: 2px solid var(--red-bd);
    background: var(--red-bg);
    color: var(--tx2);
    font-size: 14px;
}
#aviso.visivel { display: block; }

/* ---- Mobile: o que o alternador do design fazia, agora por aparelho ------------------------ */

@media (max-width: 900px) {
    header { padding: 0 18px; gap: 14px; height: auto; min-height: 62px; flex-wrap: wrap; }
    header .logo { font-size: 16px; }
    .col-carrinho, .col-pagamento, .col-ok { grid-template-columns: 1fr; }
    .painel { padding: 20px 18px; }
    .painel.divisor { border-right: 0; border-bottom: 4px solid var(--line); }
    h1 { font-size: 24px; }
    .arte { min-height: 160px; max-height: 220px; flex: none; }
    .fechamento { grid-template-columns: 1fr; }
    .itens .item { flex: none; }
    .consulta { padding: 24px 18px; }
    .discord { padding: 10px 12px; font-size: 9px; }
    .confete { display: none; }
}

/* ---- Formulário de cartão (Checkout Transparente) ------------------------------------------- */

.grade-cartao {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}
.grade-cartao .col2 { grid-column: span 2; }
.grade-cartao input { background: var(--bg); }

@media (max-width: 900px) {
    .grade-cartao { grid-template-columns: 1fr; }
    .grade-cartao .col2 { grid-column: span 1; }
}

/* ---- Boleto ---------------------------------------------------------------------------------- */

/* As barras são decorativas, como no design: quem paga usa a linha digitável ou o app do banco. */
.codigo-barras { display: flex; align-items: center; gap: 5px; height: 52px; }
.codigo-barras span { height: 100%; background: var(--tx); }

/* ---- Tela de aprovado: centro vertical e palco da skin --------------------------------------- */

.centro-vertical { justify-content: center; }

/* O palco reserva a altura antes de o 3D carregar, pra tela não pular quando ele aparece. */
.skin-palco {
    flex: 1;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bd);
    background: var(--surf);
}
.skin-palco canvas { max-width: 100%; height: auto; }

/* ---- Campo obrigatório que ficou vazio ------------------------------------------------------- */

/* Vermelho em volta do campo, e a mensagem embaixo dele: erro que não diz QUAL campo é só
   frustração — e o vermelho sozinho não serve pra quem não distingue a cor. */
input.faltando { border-color: var(--red); outline-color: var(--red); }
.erro-campo { font-size: 12px; color: var(--red); }

/* ---- Título inline, em cima dos itens -------------------------------------------------------- */

.titulo-itens { flex: none; }
.titulo-itens h1 { font-size: 22px; line-height: 1.2; }

/* ---- Campo com rótulo flutuante --------------------------------------------------------------

   O rótulo começa DENTRO do campo, no lugar do placeholder, e sobe pra cima da borda quando o
   campo recebe foco ou já tem texto. Economiza a linha que um rótulo fixo ocuparia, e o campo
   nunca fica sem legenda — o problema clássico do placeholder puro, em que a pessoa esquece o que
   era pra digitar assim que começa a digitar.

   O fundo do rótulo tem que ser o mesmo do campo pra ele "cortar" a borda ao subir. Como o
   formulário de cartão usa outro fundo, quem manda é a variável --fundo-campo.
*/

.campo-flutuante {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    --fundo-campo: var(--surf);
}

.campo-flutuante > label {
    position: absolute;
    top: 23px;
    left: 12px;
    transform: translateY(-50%);
    padding: 0 4px;
    font-family: var(--pix);
    font-size: 10px;
    letter-spacing: .06em;
    color: var(--mut);
    background: transparent;
    pointer-events: none;
    transition: top .15s ease, font-size .15s ease, color .15s ease;
}

/* Subiu: encosta na linha de cima da caixa e ganha o fundo, que abre o "corte" na borda. */
.campo-flutuante > input:focus + label,
.campo-flutuante > input:not(:placeholder-shown) + label {
    top: 0;
    font-size: 9px;
    color: var(--tx);
    background: var(--fundo-campo);
}

.campo-flutuante > input.faltando + label { color: var(--red); }

.grade-cartao .campo-flutuante { --fundo-campo: var(--bg); }

/* ---- Esqueleto de carregamento --------------------------------------------------------------- */

/* Ocupa o mesmo espaço que o conteúdo real vai ocupar, pra tela não pular quando o Pix chega. */
.esqueleto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.esqueleto-bloco {
    background: var(--line);
    animation: esqueleto-pulso 1.4s ease-in-out infinite;
}
@keyframes esqueleto-pulso {
    0%, 100% { opacity: .35 }
    50% { opacity: .75 }
}

/* ---- Vitrine numa coluna só ------------------------------------------------------------------

   Sem o MOTD e a imagem do lobby ao lado, a lista sozinha esticaria de ponta a ponta num monitor
   largo, e linha de texto muito longa é cansativa de ler. Uma largura máxima com margem automática
   resolve, e em tela pequena a margem simplesmente desaparece.
*/
.coluna-unica {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* ---- MOTD no cabeçalho ----------------------------------------------------------------------- */

.motd-topo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: auto;
    min-width: 0;
}
.motd-topo .linha-ip { display: flex; align-items: center; gap: 10px; }
/* O botão de copiar pertence ao IP, então cola nele e fica longe do resto. */
.motd-topo .linha-ip .icone-botao { margin-left: -8px; }
.motd-topo .ip { font-family: var(--pix); font-size: 13px; letter-spacing: .04em; }
.motd-topo .sinal { margin-left: 0; }
.motd-topo #motd-jogadores { font-size: 10px; color: var(--mut); }
/* O sinal vem depois da contagem: primeiro quantos estão jogando, depois a qualidade da conexão. */
.motd-topo .sinal { order: 3; }
.motd-linha {
    font-family: var(--pix);
    font-size: 9px;
    line-height: 1.5;
    color: var(--mut);
    max-width: 60ch;
}
/* Duas linhas de MOTD são a regra no Minecraft, não a exceção: cada uma vira uma linha aqui, com
   corte por reticências só se estourar a largura. */
.motd-linha-texto {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Servidor fora do ar: as barrinhas de sinal apagam, em vez de mentirem que está tudo bem. */
.motd-topo.offline .sinal span { background: var(--bd); }
.motd-topo.offline .motd-linha { color: var(--faint); }

@media (max-width: 900px) {
    .motd-linha { display: none; }
    .motd-topo .ip { font-size: 11px; }
}

/* ---- Aba com logo em vez de texto ------------------------------------------------------------ */

.abas .aba-logo { display: flex; align-items: center; padding: 8px 12px; }
.abas .aba-logo img { display: block; height: 18px; width: auto; }
/* A logo é escura; no tema escuro ela precisa de um fundo claro pra existir, e quando a aba está
   selecionada o fundo já é claro — então só o estado não-selecionado ganha a caixinha. */
.abas .aba-logo:not(.ativo) img { background: #fff; padding: 3px 6px; }

/* ---- Carteiras ------------------------------------------------------------------------------- */

.carteiras-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.carteira {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px;
    border: 2px solid var(--bd);
    background: var(--bg);
}
.carteira .px { font-size: 10px; letter-spacing: .05em; }
.carteira .mut { font-size: 12px; }

.passos-carteira {
    margin: 0;
    padding-left: 20px;
    color: var(--mut);
    font-size: 13px;
    line-height: 1.9;
}
.passos-carteira strong { color: var(--tx); }

/* ---- Fechamento: botão na mesma linha do campo ------------------------------------------------

   O aviso da grafia saiu de dentro do campo e virou uma terceira célula que ocupa a largura toda.
   Enquanto ele morava junto do input, a coluna da esquerda ficava mais alta que a da direita e o
   botão nunca encostava na mesma linha do campo — que era o desalinhamento que incomodava.
*/
.fechamento {
    grid-template-rows: auto auto;
    row-gap: 8px;
}
.fechamento .campo-flutuante { grid-column: 1; grid-row: 1; }
.fechamento .total-bloco { grid-column: 2; grid-row: 1; }
.fechamento .nick-msg { grid-column: 1 / -1; grid-row: 2; }

/* ---- Celular: o que precisa vir DEPOIS ------------------------------------------------------ ---

   Este bloco fica no fim do arquivo de propósito. As regras de posição do .fechamento lá em cima
   têm a mesma especificidade que as daqui, e nesse empate quem vence é a última do arquivo — uma
   media query no meio do caminho simplesmente não pegava.
*/
@media (max-width: 900px) {
    /* Empilhado: campo, aviso da grafia, e por último o total com o botão. Desfazer as posições
       explícitas é obrigatório: um grid-column: 2 sobrevivente cria uma segunda coluna IMPLÍCITA e
       come a largura do campo, mesmo com uma coluna declarada. */
    .fechamento .campo-flutuante { grid-column: 1; grid-row: 1; }
    .fechamento .nick-msg { grid-column: 1; grid-row: 2; }
    .fechamento .total-bloco { grid-column: 1; grid-row: 3; }

    /* A badge do Discord some no celular: ela é fixa no rodapé e tapava o botão de pagar. */
    .discord { display: none; }
}

/* O botão de ir pro checkout mora dentro da própria aba de carteiras, e não no resumo: lá ele diria
   "PAGAR R$ 19,00", e aqui não se paga nada — sai-se da loja pra pagar no app do banco. */
#bt-carteira { align-self: flex-start; }

/* ---- Barra de cenários (só em desenvolvimento) ----------------------------------------------- */

/* Existe pra conferir cada tela sem provocar o caminho inteiro: pagamento recusado, boleto emitido,
   pedido aprovado. O servidor só manda o sinal de dev quando HG_LOJA_DEV=true, então ela não existe
   em produção — nem o HTML dela chega a ser preenchido. */
#dev-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    /* Uma linha só, rolando de lado. Quebrando linha, os dezesseis cenários viravam 222px de altura
       num celular de 375px — um terço da tela coberta pela ferramenta de conferir a tela. */
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--deep);
    border-top: 2px solid var(--ylw);
}
#dev-barra .etiqueta,
#dev-barra button { flex: 0 0 auto; }
#dev-barra .etiqueta {
    font-family: var(--pix);
    font-size: 9px;
    letter-spacing: .08em;
    color: var(--ylw);
    margin-right: 6px;
}
#dev-barra button {
    padding: 5px 8px;
    font-size: 8px;
    letter-spacing: .04em;
    color: var(--tx);
    background: var(--surf);
    border: 2px solid var(--bd);
}
#dev-barra button:hover { border-color: var(--ylw); }