/* Preto com detalhes vermelhos (pedido da turma). Celular primeiro: tudo cabe em 360px de largura. */
:root {
  --fundo: #000;
  --cartao: #111;
  --cartao2: #1a1a1a;
  --borda: #2a2a2a;
  --texto: #f2f2f2;
  --apagado: #9a9a9a;
  --vermelho: #e10600;
  --vermelho-escuro: #8f0400;
  --vermelho-claro: #ff4d47;
  --ouro: #f5c242;
  --ok: #2ecc71;
  --GOL: #f5c242;
  --DEF: #4da3ff;
  --MEI: #2ecc71;
  --ATA: #ff4d47;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
button, input { font: inherit; color: inherit; }
.app { max-width: 560px; margin: 0 auto; padding: 0 16px 48px; }
.carregando { padding: 40px; text-align: center; color: var(--apagado); }
.tela { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }
h1, h2, h3 { margin: 0; }
h2 { font-size: 22px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--apagado); margin: 6px 0 2px; }
h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
small { color: var(--apagado); }
.centro { text-align: center; }
.dica { color: var(--apagado); font-size: 14px; margin: 0; }
.ouro { color: var(--ouro); }

.marca { font-size: 30px; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; padding: 18px 0 4px; border-bottom: 3px solid var(--vermelho); }
.camp-nome { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--vermelho-claro); font-weight: 700; }

.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 14px; }
.cartao > summary { cursor: pointer; font-weight: 600; }
.cartao.eu { display: flex; align-items: center; gap: 12px; }
.cartao.eu > div { flex: 1; display: flex; flex-direction: column; }

.btn { background: var(--cartao2); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 16px; cursor: pointer; text-decoration: none; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.grande { width: 100%; min-height: 58px; font-size: 18px; font-weight: 700; }
.btn.verde { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn.zap { background: #128c4a; border-color: #128c4a; color: #fff; }
.link { background: none; border: none; color: var(--vermelho-claro); cursor: pointer; padding: 6px; text-decoration: underline; }
.fila-botoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fila-botoes .btn { flex: 1; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--cartao2); border: 1px solid var(--borda); border-radius: 999px; padding: 10px 14px; cursor: pointer; min-height: 44px; }
.chip.ativo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; font-weight: 600; }

.grade-amigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.chip-amigo { background: var(--cartao); border: 2px solid var(--borda); border-radius: 14px; padding: 14px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 84px; }
.chip-amigo.ativo { border-color: var(--vermelho); background: #1d0605; }
.emoji { font-size: 22px; }
.emoji.grande { font-size: 34px; }

.campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--apagado); }
.campo input, .codigo { background: var(--cartao2); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; font-size: 18px; color: var(--texto); }
.campo input:focus, .codigo:focus { outline: 2px solid var(--vermelho); border-color: transparent; }
.linha-entrar { display: flex; gap: 10px; }
.codigo { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .3em; text-align: center; font-weight: 700; }

.topo { display: flex; align-items: center; gap: 10px; padding: 8px 0 10px; border-bottom: 2px solid var(--vermelho); font-size: 14px; }
.marca-peq { font-weight: 800; text-transform: uppercase; font-size: 12px; max-width: 34%; line-height: 1.1; }
.sala { color: var(--vermelho-claro); font-weight: 700; }
.eu-topo { flex: 1; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.codigo-grande { font-size: 46px; font-weight: 800; letter-spacing: .25em; color: var(--vermelho-claro); margin: 4px 0 10px; }
.lista-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-parts li { display: flex; align-items: center; gap: 10px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; }
.lista-parts .nome { flex: 1; }
.moedas { color: var(--ouro); font-weight: 600; }

/* ---------- leilão ---------- */
.lote-info { font-size: 14px; color: var(--apagado); }
.carta { background: linear-gradient(160deg, #1c1c1c, #0a0a0a); border: 2px solid var(--vermelho); border-radius: 18px; padding: 14px; display: flex; gap: 14px; align-items: center; }
.carta-info { flex: 1; min-width: 0; }
.carta-nome { overflow-wrap: anywhere; }

/* Foto do jogador: rosto fica no alto da foto da Wikipédia, por isso object-position top */
.foto { border-radius: 50%; object-fit: cover; object-position: center 15%; background: var(--cartao2); flex: none; display: inline-block; vertical-align: middle; }
.foto.quadrada { border-radius: 14px; border: 2px solid var(--borda); }
.foto.vazia { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #000; }
.foto.vazia.pos-GOL { background: var(--GOL); } .foto.vazia.pos-DEF { background: var(--DEF); }
.foto.vazia.pos-MEI { background: var(--MEI); } .foto.vazia.pos-ATA { background: var(--ATA); }
.mini { display: inline-flex; align-items: center; gap: 5px; }
.carta-topo { display: flex; align-items: baseline; gap: 10px; }
.carta-nota { font-size: 44px; font-weight: 800; line-height: 1; }
.carta-pos { font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .1em; }
.carta.pos-GOL .carta-pos { color: var(--GOL); } .carta.pos-DEF .carta-pos { color: var(--DEF); }
.carta.pos-MEI .carta-pos { color: var(--MEI); } .carta.pos-ATA .carta-pos { color: var(--ATA); }
.carta-nome { font-size: 26px; font-weight: 800; margin-top: 6px; }
.carta-clube { color: var(--apagado); }

.preco-bloco { text-align: center; min-height: 112px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.preco { display: flex; flex-direction: column; align-items: center; }
.preco .valor { font-size: 56px; font-weight: 800; line-height: 1; color: var(--ouro); }
.preco .quem { font-size: 16px; }
.barra { height: 10px; background: var(--cartao2); border-radius: 99px; overflow: hidden; }
.barra-enche { height: 100%; background: var(--texto); transition: width .1s linear; }
.barra-enche.urgente { background: var(--vermelho); }
.tempo { font-variant-numeric: tabular-nums; color: var(--apagado); font-size: 14px; }
.vendido { font-size: 22px; font-weight: 800; color: var(--ok); }
.sobrou { font-size: 22px; font-weight: 800; color: var(--apagado); }

.minha-situacao { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; background: var(--cartao); border-radius: 12px; padding: 10px 12px; border: 1px solid var(--borda); }
.minha-situacao span:nth-child(2) { text-align: center; flex: 1; }

/* Os botões de lance são grandes e bem separados: no outro site eles ficavam colados e o dedo errava. */
.lances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.btn.lance { min-height: 88px; flex-direction: column; gap: 2px; background: #1d0605; border: 2px solid var(--vermelho); border-radius: 16px; }
.btn.lance .inc { font-size: 28px; font-weight: 800; }
.btn.lance .vira { font-size: 13px; color: var(--apagado); }
.espaco-passar { height: 28px; }
.btn.segurar { position: relative; overflow: hidden; width: 100%; min-height: 56px; background: var(--cartao2); border: 1px dashed #555; color: var(--apagado); user-select: none; touch-action: none; }
.btn.segurar .enche { position: absolute; left: 0; top: 0; bottom: 0; background: var(--vermelho-escuro); }
.btn.segurar .rot { position: relative; font-weight: 700; letter-spacing: .05em; }

.elenco { padding: 8px 0; border-top: 1px solid var(--borda); }
.elenco.meu .elenco-cab b { color: var(--vermelho-claro); }
.elenco-cab { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.elenco-jog { display: flex; flex-wrap: wrap; gap: 6px; }
.mini { font-size: 12px; background: var(--cartao2); border-radius: 8px; padding: 4px 8px; border-left: 3px solid; }
.mini.pos-GOL { border-color: var(--GOL); } .mini.pos-DEF { border-color: var(--DEF); }
.mini.pos-MEI { border-color: var(--MEI); } .mini.pos-ATA { border-color: var(--ATA); }

/* ---------- time ---------- */
.escalacao { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.escalacao li { display: flex; align-items: center; gap: 10px; background: var(--cartao2); border: 2px solid var(--borda); border-radius: 12px; padding: 12px; cursor: pointer; min-height: 52px; }
.escalacao li.sel { border-color: var(--vermelho); background: #1d0605; }
.escalacao li.fora .nota { color: var(--vermelho-claro); }
.escalacao .nome { flex: 1; display: flex; flex-direction: column; }
.escalacao .nome small { color: var(--vermelho-claro); }
.escalacao .nota { font-weight: 800; font-size: 18px; }
.pos { font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 6px; color: #000; min-width: 38px; text-align: center; }
.pos-GOL.pos { background: var(--GOL); } .pos-DEF.pos { background: var(--DEF); }
.pos-MEI.pos { background: var(--MEI); } .pos-ATA.pos { background: var(--ATA); }

/* ---------- campeonato ---------- */
.etapa { font-size: 15px; }
.jogo { border-color: var(--vermelho); }
.minuto { text-align: center; color: var(--vermelho-claro); font-weight: 700; font-variant-numeric: tabular-nums; }
.placar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.placar .time { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.placar .time.dir { text-align: right; }
.placar .time.venceu { color: var(--ok); }
.placar .gols { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.jogo-mini { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 8px 12px; }
.jogo-mini .gols { font-size: 20px; }
.narracao { list-style: none; margin: 10px 0 0; padding: 0; max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.narracao li { padding: 6px 8px; border-radius: 8px; background: var(--cartao2); }
.narracao .l-gol { background: #2a0806; border-left: 3px solid var(--vermelho); font-weight: 700; }
.narracao .l-gol.meu { background: #0d2b18; border-left-color: var(--ok); }
.narracao .l-info { color: var(--apagado); background: none; text-align: center; }

/* Campinho: gramado escuro, linhas brancas finas, bola branca; lance de perigo em vermelho */
.campinho { position: relative; margin: 10px 0 4px; }
.campinho svg { width: 100%; display: block; }
.campinho .gramado { fill: #0f3d22; }
.campinho .linha { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: .4; }
.campinho .rede { fill: rgba(255, 255, 255, .15); stroke: rgba(255, 255, 255, .7); stroke-width: .3; }
.campinho .rede.balanca { fill: var(--vermelho); animation: balanca .25s 6 alternate; }
@keyframes balanca { from { transform: translateX(0); } to { transform: translateX(.8px); } }
.campinho .gramado { fill: #14502c; }
.campinho .gramado-faixa { fill: rgba(255, 255, 255, .035); }
/* passe/condução ~0,45 s; lançamento e bicuda mais lentos e "no ar"; jogadores correm um pouco mais devagar que a bola */
.campinho .bola-g { transition: transform .45s cubic-bezier(.3, .6, .4, 1); }
.campinho .bola-g.longo { transition: transform .75s cubic-bezier(.25, .5, .35, 1); }
.campinho .bola-g.longo .bola { animation: no-ar .75s ease-in-out 1; }
@keyframes no-ar { 50% { r: 2.5; } }
.campinho .jog-g { transition: transform .55s ease-in-out; }
.campinho .com-bola .jog { stroke: var(--ouro); stroke-width: .6; }
.campinho-legenda { font-size: 13px; text-align: center; color: #fff; margin-top: 4px; min-height: 18px; font-weight: 600; }
.campinho .time-a .jog { fill: var(--vermelho); stroke: #fff; stroke-width: .35; }
.campinho .time-b .jog { fill: #f2f2f2; stroke: #000; stroke-width: .35; }
.campinho .jog-nome { font-size: 2.6px; fill: rgba(255, 255, 255, .85); text-anchor: middle; font-weight: 600; paint-order: stroke; stroke: rgba(0, 0, 0, .7); stroke-width: .5px; }
.campinho .marcou .jog { animation: pisca .3s 6 alternate; }
@keyframes pisca { from { fill: var(--ouro); } to { fill: #fff; } }
.campinho .bola { fill: #fff; stroke: #000; stroke-width: .5; }
.campinho .bola.defesa { fill: var(--ouro); }
.campinho .bola.fora { fill: var(--vermelho-claro); }
.jogo-mini-cab { all: unset; display: block; width: 100%; cursor: pointer; box-sizing: border-box; }
.jogo-mini-cab small { display: block; margin-top: 2px; }
.jogo-mini.aberto { border-color: var(--vermelho); }
.campinho-times { display: flex; justify-content: space-between; font-size: 12px; color: var(--apagado); margin-top: 4px; }
.gol-festa { position: absolute; inset: 0 0 18px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 34px; font-weight: 900; color: #fff; text-shadow: 0 0 12px var(--vermelho), 0 2px 0 #000; background: rgba(225, 6, 0, .25); border-radius: 8px; animation: pulsa .5s ease-out; pointer-events: none; }
.gol-festa small { font-size: 16px; color: #fff; }
@keyframes pulsa { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Pênalti: cena v2 (estádio, gol com volume, goleiro e batedor desenhados, bola de gomos) */
.gol-batedor { width: 100%; display: block; margin: 8px 0; border-radius: 12px; background: #05070a; touch-action: manipulation; box-shadow: 0 6px 24px rgba(0, 0, 0, .6); }
.gol-batedor.tocavel { outline: 2px solid var(--vermelho); outline-offset: -2px; }
.gb-grama-a { fill: #2f8f46; }
.gb-grama-b { fill: #2a823f; }
.gb-cal { stroke: rgba(255, 255, 255, .92); stroke-width: .7; }
.gb-placa { fill: #0d0d0d; stroke: var(--vermelho); stroke-width: .6; }
.gb-placa-txt { font: 900 3.6px system-ui, sans-serif; fill: var(--vermelho); letter-spacing: .3px; text-anchor: middle; }
.gb-trave-sombra { filter: drop-shadow(.4px .6px .3px rgba(0, 0, 0, .55)); }
.gb-sombra { fill: rgba(0, 0, 0, .35); }
.gb-contorno { stroke: rgba(0, 0, 0, .35); stroke-width: .25; }
.gb-pele { fill: #c98e5e; }
.gb-cabelo-escuro { fill: #23160d; }
.gb-cabelo-claro { fill: #3b2414; }
.gb-chuteira { fill: #111; }

.gb-goleiro { transform-box: view-box; transform-origin: 50px 26px; }
/* só anima o CHUTE; a volta pra marca é instantânea (antes a bola "voltava" voando, 11/11) */
.gol-batedor.voando .gb-goleiro { transition: transform .55s cubic-bezier(.2, .8, .3, 1); }
.gol-batedor.voando .gb-bola-g { transition: transform .5s cubic-bezier(.25, .7, .35, 1); }
.gol-batedor.voando .gb-sombra-bola { transition: all .5s ease-out; }
.gb-gk-meiao { fill: #c4ee2a; stroke: rgba(0, 0, 0, .25); stroke-width: .15; }
.gb-gk-calcao { fill: #1b1b1b; stroke: rgba(255, 255, 255, .08); stroke-width: .15; }
.gb-gk-braco { fill: none; stroke: #a9d317; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.gb-luva { fill: #f4f4f4; stroke: #222; stroke-width: .3; }
.gb-luva-faixa { stroke: var(--vermelho); stroke-width: .45; }
.gb-gola { fill: none; stroke: #1b1b1b; stroke-width: .35; }
.gb-dobra { fill: none; stroke: rgba(0, 0, 0, .18); stroke-width: .3; stroke-linecap: round; }
.gb-olho { fill: #1a1a1a; }
.gb-boca { fill: none; stroke: #6b3b22; stroke-width: .18; stroke-linecap: round; }
.gb-mecha { fill: none; stroke: rgba(0, 0, 0, .35); stroke-width: .25; stroke-linecap: round; }
.gb-gk-numero { font: 900 3.6px system-ui, sans-serif; fill: #1b1b1b; text-anchor: middle; }
.gb-nome-gk { font: 700 2.6px system-ui, sans-serif; fill: rgba(255, 255, 255, .9); text-anchor: middle; paint-order: stroke; stroke: rgba(0, 0, 0, .8); stroke-width: .5px; }

.gb-batedor { transition: transform .3s ease-out; transform-box: view-box; }
.gb-batedor.chutou { transform: translate(5px, -3px) rotate(4deg); }
.gb-bat-meiao { fill: #f2f2f2; stroke: rgba(0, 0, 0, .2); stroke-width: .15; }
.gb-bat-faixa { fill: var(--vermelho); }
.gb-bat-listra { stroke: var(--vermelho); stroke-width: .55; }
.gb-bat-nome { font-weight: 900; font-family: system-ui, sans-serif; fill: #fff; text-anchor: middle; } /* sem letter-spacing: ele soma por fora do textLength e o nome vazava da camisa */
.gb-bat-numero { font: 900 6.4px system-ui, sans-serif; fill: #fff; text-anchor: middle; }

.gb-bola-gira { animation: gira .5s linear 1; transform-box: fill-box; transform-origin: center; }
@keyframes gira { to { transform: rotate(540deg); } }
/* Cavadinha: bola lenta (1,1 s) e em arco por cima; o goleiro já tá no chão quando ela chega */
.gol-batedor.cavadinha .gb-bola-g { transition: transform 1.1s cubic-bezier(.3, .2, .4, 1); }
.gb-lob { animation: lob 1.1s ease-in-out 1; }
@keyframes lob { 0% { transform: translateY(0); } 45% { transform: translateY(-14px); } 100% { transform: translateY(0); } }
.gb-bola-gira-lenta { animation: gira 1.1s linear 1; transform-box: fill-box; transform-origin: center; }

.gb-alvo-g { cursor: pointer; }
.gb-alvo-toque { fill: transparent; }
.gb-alvo { fill: rgba(255, 255, 255, .22); stroke: rgba(255, 255, 255, .9); stroke-width: .45; }
.gb-alvo-g:hover .gb-alvo { fill: rgba(255, 255, 255, .4); }
.gb-alvo-g.escolhido.chute .gb-alvo { fill: var(--vermelho); stroke: #fff; stroke-width: .8; }
.gb-alvo-g.escolhido.defesa .gb-alvo { fill: var(--ouro); stroke: #fff; stroke-width: .8; }
.gb-mira-feita { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: .4; stroke-dasharray: .8 .6; }

.penaltis { margin-top: 12px; padding: 12px; border-radius: 12px; background: #1d0605; border: 1px solid var(--vermelho); }
.pen-placar { text-align: center; font-weight: 800; font-size: 20px; }
.pen-bolinhas { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0; font-size: 14px; }
.pen-resultado { text-align: center; font-size: 22px; font-weight: 800; padding: 10px; }
.pen-resultado.gol { color: var(--ok); } .pen-resultado.defesa { color: var(--vermelho-claro); }
.pen-escolha p { text-align: center; margin: 6px 0 10px; }
.pen-botoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.btn.pen { min-height: 76px; font-weight: 700; border: 2px solid var(--vermelho); }
.btn.pen.ativo { background: var(--vermelho); color: #fff; opacity: 1; }

.rolar { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { padding: 6px 6px; text-align: center; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela th:nth-child(2), .tabela td:nth-child(2), .tabela td:first-child { text-align: left; }
.tabela tr.eu td { color: var(--vermelho-claro); font-weight: 700; }
.artilharia { margin: 0; padding-left: 22px; }
.hist { margin-top: 10px; }
.hist-jogo { font-size: 14px; color: var(--apagado); }
.ultimos { margin: 0; padding-left: 18px; font-size: 14px; }
.regras { margin: 10px 0 0; padding-left: 18px; color: var(--apagado); font-size: 14px; display: flex; flex-direction: column; gap: 6px; }

.campeao { border: 2px solid var(--ouro); }
.taca { font-size: 64px; }
.nome-campeao { font-size: 30px; font-weight: 800; color: var(--ouro); }
.resumo { white-space: pre-wrap; background: var(--cartao2); border-radius: 10px; padding: 12px; font: 14px/1.5 ui-monospace, Consolas, monospace; margin: 0 0 10px; }

.mural ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mural li { font-size: 14px; padding: 8px 10px; background: var(--cartao2); border-radius: 10px; border-left: 3px solid var(--borda); }
.mural li.m-compraCara, .mural li.m-comprouDoRival, .mural li.m-goleada, .mural li.m-campeao { border-left-color: var(--vermelho); }
.mural li.m-campeao { color: var(--ouro); font-weight: 700; }

.faixa { position: sticky; top: 0; z-index: 5; background: var(--vermelho); color: #fff; text-align: center; padding: 6px; font-size: 14px; margin: 0 -16px; }
.faixa-versao { display: block; width: calc(100% + 32px); border: none; cursor: pointer; font-weight: 700; background: var(--ouro); color: #000; }
/* Oferta fake (pegadinha da turma, 11/11) — cara de anúncio de jogo de celular de propósito */
.oferta-fundo { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .78); display: flex; align-items: center; justify-content: center; padding: 16px; }
.oferta { width: 100%; max-width: 360px; background: linear-gradient(180deg, #1a0000, #000 70%); border: 2px solid var(--ouro); border-radius: 18px; padding: 22px 18px 14px; text-align: center; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 0 40px rgba(245, 194, 66, .35); animation: pulsa .4s ease-out; }
.oferta-selo { align-self: center; background: var(--vermelho); color: #fff; font-weight: 900; font-size: 13px; letter-spacing: 1px; padding: 4px 12px; border-radius: 999px; }
.oferta-titulo { font-size: 22px; line-height: 1.25; color: #fff; }
.oferta-titulo b { color: var(--ouro); }
.oferta-preco s { color: var(--apagado); font-size: 16px; }
.oferta-preco span { color: var(--ok); font-size: 34px; font-weight: 900; margin-left: 6px; }
.oferta-tempo { font-size: 13px; color: var(--vermelho-claro); font-weight: 700; }
.oferta-quero { font-size: 18px; font-weight: 900; }
.oferta-caiu { font-size: 64px; line-height: 1; }
/* Loja do Pix manual (12/11/2026) */
.oferta.loja { max-height: calc(100vh - 32px); overflow-y: auto; }
.loja-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; }
.loja-item b { color: var(--ok); white-space: nowrap; }
.loja-botao { width: 100%; margin: 6px 0; border-color: var(--ouro); color: var(--ouro); }
.pix-qr { background: #fff; border-radius: 12px; padding: 8px; width: 220px; max-width: 100%; align-self: center; }
.pix-qr svg { display: block; width: 100%; height: auto; }
.pix-espera { color: var(--ouro); font-weight: 700; }
.devolver { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.btn-devolver { font-size: 13px; padding: 8px 10px; }
.btn-devolver.certeza { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.painel-dono { position: fixed; left: 8px; right: 8px; top: 8px; z-index: 25; background: #111; border: 2px solid var(--ouro); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; box-shadow: 0 6px 24px rgba(0, 0, 0, .6); }
.painel-dono-item { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--borda); padding-top: 6px; }
.painel-dono-item small { color: var(--apagado); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #fff; color: #000; padding: 12px 18px; border-radius: 12px; font-weight: 600; max-width: calc(100% - 32px); box-shadow: 0 6px 24px rgba(225, 6, 0, .4); z-index: 10; text-align: center; }

.lista-parts .vip { color: var(--ouro); font-weight: 700; }