/* trc-eco.css — economia: pill de moedas, painel de perfil, baús e itens.
   Usa os MESMOS tokens do trc-games.css (--card, --borda, --neon…) pra o painel
   parecer parte do site tanto no candy (home) quanto no arcade (página de jogo). */

/* ── o topo abre espaço pro pill ──
   .tg-top é grid 44px/1fr/44px. Com o pill vira 3ª coluna "auto" na home e 4ª
   coluna na página de jogo (que ainda tem o ✕). Sem isto o grid quebra linha. */
.tg-top.tg-tem-eco{grid-template-columns:44px 1fr auto}
body.tg-full .tg-top.tg-tem-eco{grid-template-columns:44px 1fr auto auto;gap:6px}

/* ── pill de moedas no topo ── */
.tg-eco-pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);
  border:1px solid var(--borda);color:var(--texto);border-radius:999px;padding:7px 14px;
  font:700 14px/1 inherit;cursor:pointer;box-shadow:var(--sombra);transition:.15s}
.tg-eco-pill:active{transform:scale(.96)}
.tg-eco-pill b{color:var(--sol,#F59E0B);font-weight:800}
body.tg-full .tg-eco-pill{background:#121828;border-color:#24345A;box-shadow:none}

/* ── aviso de moeda ganha ── */
.tg-eco-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);z-index:2147483001;
  background:#0F172A;color:#FDE68A;border:1px solid #F59E0B;border-radius:999px;
  padding:9px 18px;font:800 14px/1 system-ui,sans-serif;opacity:0;transition:.28s;pointer-events:none}
.tg-eco-toast.on{opacity:1;transform:translate(-50%,0)}

/* ── painel ── */
html.tg-eco-travado,html.tg-eco-travado body{overflow:hidden}
.tg-eco-painel{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center}
.tg-eco-bk{position:absolute;inset:0;background:rgba(6,10,20,.72);backdrop-filter:blur(3px)}
.tg-eco-caixa{position:relative;width:100%;max-width:520px;max-height:92vh;overflow:auto;
  background:#0F1522;border:1px solid #24345A;border-radius:22px 22px 0 0;color:#E6EBF7;
  -webkit-overflow-scrolling:touch}
@media(min-width:560px){.tg-eco-painel{align-items:center}
  .tg-eco-caixa{border-radius:22px;max-height:88vh}}
.tg-eco-corpo{padding:16px 16px 22px;font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.tg-eco-carrega{padding:40px 0;text-align:center;color:#8794B3}

.tg-eco-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.tg-eco-saldo{font:800 20px/1 system-ui,sans-serif;color:#FDE68A}
.tg-eco-x{background:transparent;border:0;color:#8794B3;font-size:20px;cursor:pointer;padding:4px 8px}

.tg-eco-abas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
.tg-eco-aba{background:#141B2B;border:1px solid #24345A;color:#8794B3;border-radius:11px;
  padding:9px 4px;font:700 13px/1 system-ui,sans-serif;cursor:pointer}
.tg-eco-aba.on{background:#1C2740;color:#E6EBF7;border-color:#3B82F6}

/* ── perfil ── */
.tg-eco-perfil{text-align:center}
.tg-eco-av{position:relative;margin:6px auto 12px;border-radius:50%;padding:5px;
  display:flex;align-items:center;justify-content:center}
.tg-eco-av-in{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font:800 36px/1 system-ui,sans-serif;color:#E6EBF7;text-shadow:0 2px 8px #0008}
.tg-eco-av-hat{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:34px;
  filter:drop-shadow(0 3px 5px #0009)}
.tg-eco-nome{font:800 19px/1.2 system-ui,sans-serif;margin-bottom:4px}
.tg-eco-sub{color:#8794B3;font-size:13.5px;margin-bottom:14px}
.tg-eco-sub b{color:#E6EBF7}

.tg-eco-btn{display:block;width:100%;margin-top:10px;border:0;border-radius:12px;padding:13px;
  font:800 15px/1 system-ui,sans-serif;cursor:pointer;color:#fff;
  background:linear-gradient(90deg,#8B3BF5,#A855F7)}
.tg-eco-btn:disabled{opacity:.45;cursor:default}
.tg-eco-btn.fraco{background:#1C2740;color:#8794B3;border:1px solid #24345A}

.tg-eco-form{margin-top:6px;text-align:left}
.tg-eco-troca{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.tg-eco-troca button{background:#141B2B;border:1px solid #24345A;color:#8794B3;border-radius:10px;
  padding:8px;font:700 13px/1 system-ui,sans-serif;cursor:pointer}
.tg-eco-troca button.on{background:#1C2740;color:#E6EBF7;border-color:#3B82F6}
.tg-eco-form input{width:100%;margin-bottom:8px;background:#0B1120;border:1px solid #24345A;
  color:#E6EBF7;border-radius:10px;padding:12px;font:15px/1 system-ui,sans-serif}
.tg-eco-erro{margin-top:9px;color:#FCA5A5;font-size:13px;text-align:center}

/* ── baús ── */
.tg-eco-dica{color:#8794B3;font-size:13px;margin-bottom:12px;text-align:center}
.tg-eco-baus{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tg-eco-bau{background:#141B2B;border:1px solid #24345A;border-radius:16px;padding:14px 10px;text-align:center}
.tg-eco-bau .emo{font-size:40px;line-height:1}
.tg-eco-bau .nom{font:800 13.5px/1.3 system-ui,sans-serif;margin:6px 0 7px}
.tg-eco-bau .chan{display:flex;justify-content:center;gap:6px;margin-bottom:9px}
.tg-eco-chip{font:800 10.5px/1 system-ui,sans-serif}
.tg-eco-bau .tg-eco-btn{margin-top:0;padding:10px;font-size:14px}

/* ── itens ── */
.tg-eco-sec{font:800 12px/1 system-ui,sans-serif;letter-spacing:1.4px;text-transform:uppercase;
  color:#8794B3;margin:14px 0 8px;display:flex;align-items:center;gap:8px}
.tg-eco-tirar{background:transparent;border:1px solid #24345A;color:#8794B3;border-radius:7px;
  padding:3px 8px;font:600 10.5px/1 system-ui,sans-serif;cursor:pointer;letter-spacing:0;text-transform:none}
.tg-eco-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tg-eco-item{position:relative;background:#141B2B;border:1px solid #24345A;border-radius:13px;
  padding:11px 6px;cursor:pointer;color:#E6EBF7;display:flex;flex-direction:column;align-items:center;gap:6px}
.tg-eco-item.on{border-color:var(--rar);box-shadow:inset 0 0 0 1px var(--rar)}
.tg-eco-item .pre{width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.tg-eco-item .pre.emo{font-size:30px}
.tg-eco-item .pre.am{border-radius:9px}
.tg-eco-item .pre.am.anel{border-radius:50%}
.tg-eco-item .nm{font:600 11px/1.2 system-ui,sans-serif;text-align:center}
.tg-eco-item .qt{position:absolute;top:5px;right:7px;font:800 10px/1 system-ui,sans-serif;color:#8794B3}
.tg-eco-vazio{color:#8794B3;text-align:center;padding:26px 0;font-size:14px}

/* ── abertura do baú (animação Meteoro Cósmico) ── */
.tg-eco-abrindo{text-align:center}
.tg-eco-anim{border-radius:14px;overflow:hidden;border:1px solid #24345A}
.tg-eco-depois{margin-top:12px}

.tgb-palco{position:relative;height:300px;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,#141B2B,#080C14 70%);
  display:flex;align-items:center;justify-content:center}
.tgb-palco canvas{position:absolute;inset:0;width:100%;height:100%}
.tgb-palco.tgb-tremendo{animation:tgbSh .5s}
@keyframes tgbSh{0%,100%{transform:translate(0,0)}20%{transform:translate(-5px,3px)}
  40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(4px,2px)}}

.tgb-item{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0}
.tgb-item.mostra{opacity:1;animation:tgbPop .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes tgbPop{0%{transform:scale(.3)}100%{transform:scale(1)}}
.tgb-art{font-size:74px;line-height:1;filter:drop-shadow(0 0 22px var(--glow)) drop-shadow(0 0 40px var(--glow))}
.tgb-amostra{display:block;width:74px;height:74px;border-radius:14px;
  box-shadow:0 0 22px var(--glow),0 0 40px var(--glow)}
.tgb-amostra.anel{border-radius:50%}
/* o nome cai em cima do campo de partículas: sombra dura pra ler sempre */
.tgb-nome{font:800 15px/1 system-ui,sans-serif;color:#fff;
  text-shadow:0 1px 3px #000,0 0 10px #000,0 0 18px #000}
.tgb-rar{font:800 11px/1 system-ui,sans-serif;letter-spacing:2px;text-transform:uppercase;
  color:var(--glow);text-shadow:0 1px 3px #000,0 0 10px #000}
.tgb-fita{font:900 11px/1 system-ui,sans-serif;letter-spacing:3px;color:#111;background:var(--glow);
  padding:3px 12px;border-radius:4px;box-shadow:0 0 20px var(--glow)}
.tgb-dup{font:700 11px/1 system-ui,sans-serif;color:#8794B3;letter-spacing:1px;text-transform:uppercase}

/* ── os 2 botões do fim de partida ── */
.tgj-btn-grande.tgj-btn-reviver{background:linear-gradient(90deg,#DC2626,#F97316)}
.tgj-btn-grande.tg-eco-dobro{background:linear-gradient(90deg,#7C3AED,#A855F7);margin-top:8px}
.tgj-btn-grande.tg-eco-dobro b{color:#FDE68A}
.tgj-btn-grande.tg-eco-dobro:disabled{opacity:.65}
.tgj-btn-grande.tg-eco-dobro.simples{background:linear-gradient(90deg,#0EA5E9,#22D3EE)}
.tgj-btn-grande.tg-eco-dobro.ganhou{background:linear-gradient(90deg,#0d3a2e,#10B981)}