:root {
  --fundo: #0d0a12;
  --fundo2: #130f1b;
  --painel: #1a1524;
  --painel2: #221b30;
  --slot: #0f0c16;
  --borda: #2f2640;
  --texto: #f4f1fa;
  --suave: #a79fb8;
  --ouro: #ffc21a;
  --ouro2: #ff9f0a;
  --ouro-escuro: #a8650a;
  --vermelho: #e8332c;
  --vermelho2: #ff4a3d;
  --roxo: #b04aff;
  --ciano: #3fd8ff;
  --verde: #55ff55;
  --pixel: "Tiny5", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  color: var(--texto);
  font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: var(--fundo);
  /* grade de blocos bem sutil */
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 32px 32px;
  min-height: 100vh;
}
a { color: inherit; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.px { display: inline-flex; vertical-align: -3px; }
.px svg { display: block; }

.faixa-teste {
  background: repeating-linear-gradient(45deg, #b45309, #b45309 12px, #92400e 12px, #92400e 24px);
  text-align: center; font: 600 13px var(--pixel); padding: 6px 16px; letter-spacing: .06em;
}

/* ---------- Botão estilo Minecraft ---------- */
.mc-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 16px var(--pixel); letter-spacing: .02em; text-decoration: none; color: #fff;
  background: linear-gradient(#6b6b78, #4a4a56);
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .28), inset -2px -3px 0 rgba(0, 0, 0, .35);
  padding: 10px 18px; border-radius: 2px; text-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
  transition: filter .12s, transform .06s;
}
.mc-botao:hover { filter: brightness(1.15); }
.mc-botao:active { transform: translateY(1px); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .35); }
.mc-botao:disabled { filter: grayscale(.6); cursor: wait; }
.mc-botao.ouro { background: linear-gradient(#ffd23a, #f29a0a); color: #3a2200; text-shadow: 1px 1px 0 rgba(255, 255, 255, .35); }
.mc-botao.teste { background: linear-gradient(#a16207, #78350f); margin-top: 12px; }
.mc-botao.largo { width: 100%; }

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: 20; background: rgba(13, 10, 18, .86); backdrop-filter: blur(10px); border-bottom: 2px solid #000; box-shadow: 0 1px 0 var(--borda); }
.topo-dentro { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.marca img { width: 40px; height: 40px; border-radius: 8px; box-shadow: 0 0 18px rgba(232, 51, 44, .35); }
.marca-nome { font: 700 22px var(--pixel); letter-spacing: .03em; text-shadow: 2px 2px 0 #000; }
.marca-nome { color: var(--vermelho2); }
.marca-nome b { color: #fff; }
.marca-tag { font: 600 11px var(--pixel); color: #fff; background: var(--vermelho); padding: 2px 6px; border-radius: 2px; letter-spacing: .1em; }
.topo-nav { display: flex; gap: 4px; margin-left: 8px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.topo-nav::-webkit-scrollbar { display: none; }
.topo-nav a { font: 600 15px var(--pixel); text-decoration: none; color: var(--suave); padding: 8px 12px; border-radius: 4px; white-space: nowrap; }
.topo-nav a:hover, .topo-nav a.ativa { color: var(--texto); background: var(--painel); }
.ip { flex: none; display: flex; align-items: center; gap: 10px; background: var(--painel); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--borda); color: var(--texto); border-radius: 6px; padding: 6px 12px; text-align: left; }
.ip:hover { box-shadow: inset 0 0 0 1px var(--ouro); }
.ip-ponto { width: 10px; height: 10px; background: #777; flex: none; box-shadow: 0 0 0 2px #000; }
.ip-ponto.on { background: var(--verde); box-shadow: 0 0 0 2px #000, 0 0 12px var(--verde); animation: piscar 2s infinite; }
@keyframes piscar { 50% { opacity: .55; } }
.ip-textos { display: grid; line-height: 1.15; }
.ip-textos b { font: 600 14px var(--pixel); }
.ip-textos small { color: var(--suave); font-size: 12px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 2px solid #000; background: radial-gradient(900px 420px at 72% 40%, rgba(255, 159, 10, .16), transparent 70%), radial-gradient(700px 400px at 15% 0%, rgba(176, 74, 255, .14), transparent 70%); }
#fogos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-dentro { position: relative; max-width: 1240px; margin: 0 auto; padding: 48px 16px 40px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: center; }
.hero-chip { display: inline-block; font: 600 13px var(--pixel); color: var(--ouro); border: 2px solid var(--ouro-escuro); background: rgba(255, 194, 26, .08); padding: 3px 10px; border-radius: 2px; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { font: 700 clamp(36px, 5.6vw, 64px)/1.02 var(--pixel); margin: 14px 0 12px; text-shadow: 4px 4px 0 #000; }
.hero h1 span { background: linear-gradient(180deg, #fff2a8, var(--ouro) 45%, var(--ouro2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(3px 3px 0 #000); text-shadow: none; }
.hero p { color: var(--suave); font-size: 17px; max-width: 560px; margin: 0 0 22px; }
.hero-botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-botoes .mc-botao { font-size: 18px; padding: 12px 22px; }
.selos { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px 18px; flex-wrap: wrap; color: var(--suave); font-size: 14px; }
.selos li { display: flex; align-items: center; gap: 6px; }
.hero-logo { position: relative; display: grid; place-items: center; }
.hero-logo img { width: min(420px, 100%); height: auto; aspect-ratio: 1; border-radius: 24px; position: relative; animation: flutuar 5s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 72%); mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 72%); }
.hero-brilho { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 194, 26, .35), transparent 65%); filter: blur(20px); animation: pulsar 5s ease-in-out infinite; }
@keyframes flutuar { 50% { transform: translateY(-12px) rotate(-1.5deg); } }
@keyframes pulsar { 50% { transform: scale(1.12); opacity: .7; } }

/* ---------- Conteúdo ---------- */
.conteudo { max-width: 1240px; margin: 0 auto; padding: 28px 16px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; align-items: start; }

.categorias { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 22px; }
.cat {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px;
  background: var(--painel); color: var(--suave); border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .05), inset -2px -2px 0 rgba(0, 0, 0, .3);
  font: 600 16px var(--pixel); border-radius: 4px; transition: transform .12s, color .12s;
}
.cat:hover { color: var(--texto); transform: translateY(-2px); }
.cat .px svg { width: 34px; height: 34px; }
.cat.ativa { color: #3a2200; background: linear-gradient(#ffd23a, #f29a0a); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35), inset -2px -3px 0 rgba(0, 0, 0, .25), 0 6px 24px -6px rgba(255, 159, 10, .6); }

.categoria-topo { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.categoria-topo h2 { font: 700 30px var(--pixel); margin: 0; text-shadow: 3px 3px 0 #000; }
.categoria-topo p { margin: 2px 0 0; color: var(--suave); }
.busca { display: flex; align-items: center; gap: 8px; background: var(--slot); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--borda); padding: 0 10px; border-radius: 4px; min-width: 220px; }
.busca input { border: 0; background: none; padding: 10px 0; outline: none; }

.subabas { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.subaba { font: 600 15px var(--pixel); background: var(--painel); color: var(--suave); border: 2px solid #000; padding: 8px 16px; border-radius: 4px; }
.subaba:hover { color: var(--texto); }
.subaba.ativa { color: #000; background: var(--cor, var(--ouro)); box-shadow: 0 0 18px -4px var(--cor, var(--ouro)); }
.subaba small { opacity: .7; margin-left: 4px; }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
.grade.kits { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.vazio-busca { color: var(--suave); }

/* Cartão = slot de inventário */
.cartao {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--painel2), var(--painel));
  border: 2px solid #000; border-radius: 6px; padding: 16px;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .05), inset -2px -2px 0 rgba(0, 0, 0, .35);
  transition: transform .15s, box-shadow .15s;
  animation: entrar .3s ease both;
}
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }
.cartao:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--cor, var(--ouro)), 0 12px 30px -12px var(--cor, var(--ouro)); }
.cartao.destaque { box-shadow: inset 0 0 0 2px var(--cor, var(--ouro)), 0 10px 34px -14px var(--cor, var(--ouro)); }
.selo { position: absolute; top: -10px; right: 12px; font: 700 12px var(--pixel); color: #000; background: var(--cor, var(--ouro)); border: 2px solid #000; padding: 1px 8px; border-radius: 2px; letter-spacing: .05em; }
.cartao-topo { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.slot {
  width: 64px; height: 64px; flex: none; display: grid; place-items: center;
  background: var(--slot); border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .55), inset -2px -2px 0 rgba(255, 255, 255, .07);
  border-radius: 2px;
}
.slot svg { width: 44px; height: 44px; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .5)); transition: transform .2s; }
.cartao:hover .slot svg { transform: scale(1.12) rotate(-4deg); }
.slot.grande { width: 72px; height: 72px; }
.slot.grande svg { width: 50px; height: 50px; }
.cartao h3 { margin: 0; font: 700 21px/1.1 var(--pixel); color: var(--cor, var(--texto)); text-shadow: 2px 2px 0 #000; }
.cartao .sub { display: block; color: var(--suave); font-size: 13px; margin-top: 2px; }
.lista { list-style: none; margin: 0 0 14px; padding: 0; color: var(--suave); font-size: 14px; flex: 1; }
.lista li { position: relative; padding: 3px 0 3px 18px; }
.lista li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 7px; height: 7px; background: var(--cor, var(--ouro)); box-shadow: 1px 1px 0 #000; }
.precos { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.preco { font: 700 28px var(--pixel); color: var(--ouro); text-shadow: 2px 2px 0 #000; }
.preco small { font-size: 15px; margin-right: 2px; }
.preco-antes { color: var(--suave); text-decoration: line-through; font-size: 14px; }
.economia { font: 600 12px var(--pixel); color: #000; background: var(--verde); padding: 1px 6px; border-radius: 2px; }
.cartao .mc-botao { width: 100%; }
.cartao.kit { padding: 14px; }
.cartao.kit .lista { font-size: 13px; }
.cartao.kit h3 { font-size: 19px; }
.cartao.kit .preco { font-size: 24px; }

/* ---------- Lateral ---------- */
.lateral { display: grid; gap: 14px; position: sticky; top: 84px; }
.painel { background: var(--painel); border: 2px solid #000; border-radius: 6px; padding: 14px 16px; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .04), inset -2px -2px 0 rgba(0, 0, 0, .3); }
.painel h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 17px var(--pixel); }
.xp { position: relative; height: 18px; background: #1c1c1c; border: 2px solid #000; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .5); }
.xp-barra { height: 100%; width: 0; background: linear-gradient(#a8ff60, #4fc21a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35); transition: width 1.2s ease; }
.xp-nivel { position: absolute; inset: 0; display: grid; place-items: center; font: 700 13px var(--pixel); color: #b8ff6a; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.meta-texto { margin: 8px 0 0; color: var(--suave); font-size: 13px; }
.top, .ultimas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.top li, .ultimas li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top img, .ultimas img { width: 32px; height: 32px; image-rendering: pixelated; border: 2px solid #000; background: var(--slot); flex: none; }
.top .pos { width: 20px; font: 700 16px var(--pixel); color: var(--suave); text-align: center; flex: none; }
.top li:nth-child(1) .pos { color: #ffd23a; }
.top li:nth-child(2) .pos { color: #d4d4e0; }
.top li:nth-child(3) .pos { color: #e08a3a; }
.top .nome { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .valor { color: var(--ouro); font: 600 14px var(--pixel); }
.ultimas .txt { display: grid; min-width: 0; font-size: 13px; line-height: 1.3; }
.ultimas .txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ultimas .txt span { color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vazio { color: var(--suave); font-size: 14px; }
.passos { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--suave); }
.passos b { color: var(--texto); }
.nota { color: var(--suave); font-size: 13px; margin: 10px 0 0; }
.centro { text-align: center; }

/* ---------- Dúvidas e rodapé ---------- */
.duvidas { max-width: 1240px; margin: 0 auto; padding: 8px 16px 48px; }
.duvidas h2 { font: 700 28px var(--pixel); margin: 0 0 16px; text-shadow: 3px 3px 0 #000; }
.duvidas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.duvidas details { background: var(--painel); border: 2px solid #000; border-radius: 6px; padding: 12px 16px; }
.duvidas summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.duvidas summary::after { content: "+"; font: 700 20px var(--pixel); color: var(--ouro); line-height: 1; }
.duvidas details[open] summary::after { content: "−"; }
.duvidas details p { color: var(--suave); margin: 8px 0 0; }
.rodape { border-top: 2px solid #000; background: var(--fundo2); text-align: center; color: var(--suave); font-size: 13px; padding: 28px 16px 44px; }
.rodape img { border-radius: 10px; }
.rodape p { margin: 4px 0; }
.rodape b { color: var(--texto); font-family: var(--pixel); font-size: 15px; }

/* ---------- Janela (estilo GUI) ---------- */
.fundo { position: fixed; inset: 0; background: rgba(5, 3, 8, .78); display: grid; place-items: center; padding: 16px; z-index: 50; backdrop-filter: blur(3px); }
.janela { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--painel); border: 3px solid #000; border-radius: 6px; box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .06), inset -3px -3px 0 rgba(0, 0, 0, .4), 0 30px 80px -20px #000; animation: subir .2s ease; }
@keyframes subir { from { transform: translateY(12px) scale(.98); opacity: 0; } }
.janela-barra { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--fundo2); border-bottom: 2px solid #000; font: 600 16px var(--pixel); }
.fechar { background: none; border: 0; color: var(--suave); font-size: 28px; line-height: 1; padding: 0 4px; }
.fechar:hover { color: var(--vermelho); }
.janela-produto { display: flex; gap: 14px; align-items: center; padding: 16px 18px 4px; }
.janela-produto b { display: block; font: 700 21px/1.1 var(--pixel); }
.janela-produto small { display: block; color: var(--suave); }
.j-preco { display: block; margin-top: 2px; font: 700 22px var(--pixel); color: var(--ouro); }
.passo { padding: 8px 18px 20px; }
.passo h3 { font: 700 22px var(--pixel); margin: 6px 0; }
label { display: block; font-weight: 700; margin: 12px 0 6px; font-size: 14px; }
input { width: 100%; background: var(--slot); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--borda); border-radius: 4px; color: var(--texto); padding: 11px 12px; font: inherit; }
input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ouro); }
.campo-nick { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.campo-nick img { width: 46px; height: 46px; image-rendering: pixelated; border: 2px solid #000; background: var(--slot); flex: none; }
#bloco-antigo { margin-bottom: 4px; }
.erro { background: rgba(232, 51, 44, .12); border: 2px solid rgba(232, 51, 44, .6); color: #ffb4ae; border-radius: 4px; padding: 10px 12px; font-size: 14px; margin: 12px 0 0; }
#gerar { margin-top: 14px; }
.resumo { color: var(--suave); margin: 6px 0 12px; }
.resumo b { color: var(--texto); }
.qr { background: #fff; border: 3px solid #000; border-radius: 4px; padding: 10px; width: 220px; height: 220px; margin: 0 auto 4px; display: grid; place-items: center; color: #111; text-align: center; font: 600 15px var(--pixel); }
.qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.copia { display: flex; gap: 8px; }
.copia input { font-size: 13px; min-width: 0; }
.copia .mc-botao { padding: 8px 14px; font-size: 15px; }
.esperando { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--suave); font-size: 14px; }
.esperando #tempo { margin-left: auto; font: 600 15px var(--pixel); color: var(--texto); }
.giro { width: 14px; height: 14px; background: var(--ouro); animation: girar 1s steps(4) infinite; box-shadow: 0 0 0 2px #000; flex: none; }
@keyframes girar { to { transform: rotate(360deg); } }
.ok-icone { width: 88px; height: 88px; margin: 6px auto 8px; display: grid; place-items: center; background: rgba(85, 255, 85, .1); border: 2px solid #000; animation: pulo .6s ease; }
@keyframes pulo { 40% { transform: scale(1.15); } }

.aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--painel2); border: 2px solid #000; box-shadow: 0 0 0 1px var(--ouro); padding: 10px 16px; border-radius: 4px; font: 600 15px var(--pixel); z-index: 60; max-width: calc(100% - 32px); text-align: center; }

/* ---------- Telas menores ---------- */
@media (max-width: 1020px) {
  .conteudo { grid-template-columns: 1fr; }
  .lateral { position: static; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .topo-nav { display: none; }
  .topo-dentro { justify-content: space-between; }
}
@media (max-width: 760px) {
  .hero-dentro { grid-template-columns: 1fr; padding-top: 28px; text-align: center; }
  .hero p { margin-left: auto; margin-right: auto; }
  .hero-botoes, .selos { justify-content: center; }
  .hero-logo { order: -1; }
  .hero-logo img { width: 220px; }
  .categorias { grid-template-columns: repeat(5, minmax(64px, 1fr)); gap: 6px; }
  .cat { font-size: 13px; padding: 10px 4px; }
  .cat .px svg { width: 26px; height: 26px; }
}
@media (max-width: 480px) {
  .marca-tag, .ip-textos small { display: none; }
  .marca-nome { font-size: 18px; }
  .ip { padding: 6px 10px; }
  .ip-textos b { font-size: 12px; }
  .grade, .grade.kits { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cartao { padding: 12px; }
  .cartao-topo { flex-direction: column; align-items: flex-start; gap: 8px; }
  .slot { width: 52px; height: 52px; }
  .slot svg { width: 36px; height: 36px; }
  .cartao h3 { font-size: 17px; }
  .preco { font-size: 22px; }
  .lista { font-size: 12.5px; }
  .busca { min-width: 0; width: 100%; }
  .duvidas-grade { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.nome-rede { color: var(--vermelho2) !important; letter-spacing: .03em; }
.nome-rede span { color: #fff; }

/* ---------- Forma de pagamento ---------- */
.metodos { margin-top: 14px; }
.metodos .rotulo { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.metodos-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metodo { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--slot); color: var(--texto); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--borda); border-radius: 4px; padding: 10px; font: 600 16px var(--pixel); }
.metodo small { display: block; font: 500 12px Inter, sans-serif; color: var(--suave); }
.metodo .px svg { width: 26px; height: 26px; }
.metodo:hover { box-shadow: inset 0 0 0 1px var(--suave); }
.metodo.ativo { box-shadow: inset 0 0 0 2px var(--ouro), 0 0 16px -6px var(--ouro); background: rgba(255, 194, 26, .06); }
.cartao-caixa { display: flex; gap: 12px; align-items: center; background: var(--slot); border: 2px solid #000; border-radius: 4px; padding: 12px; margin-bottom: 14px; color: var(--suave); font-size: 14px; }
.cartao-caixa p { margin: 0; }
.cartao-caixa b { color: var(--texto); }

/* Modos onde o kit vale */
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 10px; }
.tag { font: 600 11px var(--pixel); color: var(--texto); background: var(--slot); border: 1px solid var(--borda); padding: 1px 6px; border-radius: 2px; letter-spacing: .03em; }

.pedido-ok { margin: 10px 0 0; font: 600 16px var(--pixel); color: var(--suave); }
.pedido-ok b, .resumo .num-pedido { color: var(--ouro); }

/* ---------- Avisos (toasts) ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: grid; gap: 8px; max-width: min(380px, calc(100% - 32px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--painel2); border: 2px solid #000; border-left: 4px solid var(--ouro); border-radius: 4px;
  padding: 10px 14px; font-size: 14px; box-shadow: 0 12px 30px -10px #000; cursor: pointer; animation: toastEntra .25s ease; }
.toast.ok { border-left-color: var(--verde); }
.toast.erro { border-left-color: var(--vermelho2); }
.toast-icone { font: 700 16px var(--pixel); line-height: 1.2; color: var(--ouro); flex: none; }
.toast.ok .toast-icone { color: var(--verde); }
.toast.erro .toast-icone { color: var(--vermelho2); }
.toast.saindo { opacity: 0; transform: translateX(20px); transition: .3s; }
@keyframes toastEntra { from { opacity: 0; transform: translateY(10px); } }
.aviso { display: none !important; }

/* ---------- Janelas de confirmar/perguntar ---------- */
.ui-fundo { z-index: 70; }
.ui-janela { max-width: 420px; }
.ui-janela.perigo .janela-barra { background: linear-gradient(90deg, rgba(232, 51, 44, .25), transparent); }
.ui-texto { color: var(--suave); margin: 4px 0 6px; line-height: 1.55; }
.ui-dica { display: block; color: var(--suave); margin-top: 4px; font-size: 12px; }
.ui-atalhos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ui-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.mc-botao.perigo { background: linear-gradient(#ff5a4f, #b3241d); }
select { width: 100%; background: var(--slot); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--borda); border-radius: 4px; color: var(--texto); padding: 10px 12px; font: inherit; }
select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ouro); }
.mini { background: var(--slot); border: 1px solid var(--borda); color: var(--suave); border-radius: 4px; padding: 3px 8px; font: 600 12px Inter, sans-serif; cursor: pointer; }
.mini:hover { color: var(--texto); border-color: var(--ouro); }

/* ---------- Loja: validação do nick e "acabou de comprar" ---------- */
.nick-dica { display: block; min-height: 18px; font-size: 12px; margin: 2px 0 0 56px; color: var(--suave); }
.nick-dica.ok { color: #7dff7d; }
.nick-dica.ruim { color: #ffb4ae; }
.prova { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: flex; gap: 10px; align-items: center; background: var(--painel2); border: 2px solid #000;
  border-radius: 6px; padding: 8px 14px 8px 8px; font-size: 13px; box-shadow: 0 12px 30px -10px #000; max-width: min(340px, calc(100% - 32px));
  animation: toastEntra .3s ease; }
.prova img { width: 36px; height: 36px; image-rendering: pixelated; border: 2px solid #000; flex: none; }
.prova b { color: var(--ouro); }
.prova small { display: block; color: var(--suave); }
.prova.saindo { opacity: 0; transform: translateY(10px); transition: .4s; }
@media (max-width: 520px) { .prova { display: none; } }