/* =========================================================
   CARTÕES GENÉRICOS DA LOJA
   ====================================================== */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:
    transform .18s ease,
    opacity .15s ease,
    box-shadow .2s ease,
    border-color .18s ease,
    background .18s ease;
}

/* brilho suave entrando pelo topo */
.card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at 0 0, rgba(250,204,21,.16), transparent 60%);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}

.card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(15,23,42,.22);
  border-color:rgba(250,204,21,.8);
  background:linear-gradient(135deg, rgba(15,23,42,.02), rgba(250,204,21,.05));
}
.card:hover::before{
  opacity:1;
  transform:translateY(0);
}

.card:active{
  transform:translateY(-1px) scale(.99);
  box-shadow:0 10px 20px rgba(15,23,42,.18);
}

/* acessibilidade pra navegação por teclado */
.card:focus-visible{
  outline:2px solid var(--gold2);
  outline-offset:3px;
}

.item-modal .item-emoji{
  width:64px;
  height:64px;
  border-radius:18px;
  margin:6px auto 8px;
  display:grid;
  place-items:center;
  font-size:34px;
  background:#fff7e1;
  border:1px solid #ffe6a8;
  box-shadow:0 10px 24px rgba(250,204,21,.22);
}

body:not(.theme-light) .item-modal .item-emoji{
  background:#111827;
  border-color:#fde68a;
}

.item-modal #itemInfoDesc {
  margin-bottom: 1.2rem !important;
}

.item-modal #itemInfoList li {
  margin-bottom: 6px;
  line-height: 1.45;
}


.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}
.card-emoji{
  font-size:56px;
  line-height:1;
  margin:6px 0 6px;
}
.card-title{
  margin:.2rem 0 .4rem;
  font-weight:800;
}
.muted{ color:var(--muted); }
.price{
  background:linear-gradient(90deg,var(--gold3),var(--gold2));
  color:#2b2b2b;
  font-weight:800;
  padding:6px 10px;
  border-radius:10px;
  border:none;
  box-shadow:0 8px 22px rgba(255,179,0,.12);
}

/* =========================================================
   GRID DE PRODUTOS
   ====================================================== */
.shop-grid{ gap:14px; }

/* cards filtrados somem do grid */
.shop-grid .card.is-hidden{
  display:none;
}

/* =========================================================
   MODAL BASE (COINS / CONFIRM / INVENTÁRIO)
   ====================================================== */
.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:60;
  padding:18px;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  align-items:center;
  justify-content:center;
}
.modal.open{ display:flex; }

.modal-content{
  width:100%;
  max-width:420px;
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 20px 40px rgba(15,23,42,.35);
  padding:18px 20px 16px;
  position:relative;
  text-align:center;
}
.modal-content.small{ max-width:420px; }

.close{
  position:absolute;
  right:14px;
  top:10px;
  background:none;
  border:none;
  font-size:26px;
  color:var(--muted);
  cursor:pointer;
  padding:0;
  line-height:1;
}
.close:hover{ color:var(--ink); }

.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:16px;
}

/* =========================================================
   BOTÕES
   ====================================================== */
.btn{
  height:36px;
  padding:0 12px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:800;
  background:linear-gradient(90deg,var(--gold2),var(--gold));
  color:#2b2b2b;
  box-shadow:0 8px 22px rgba(255,179,0,.18);
}
.btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
  filter:grayscale(.2);
}
.btn--full{ width:100%; }
.btn-ghost{
  height:36px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--ink);
  font-weight:800;
  cursor:pointer;
}
.btn-ghost:hover{
  background:#fff;
}

/* =========================================================
   CTAs (COMPRAR COINS / VER ITENS)
   ====================================================== */
.cta-primary,
.cta-secondary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  border:none;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    color .16s ease,
    border-color .16s ease;
}

.cta-primary{
  background:linear-gradient(90deg,var(--gold3),var(--gold2));
  color:#111827;
  box-shadow:0 10px 26px rgba(255,179,0,.20);
}
.cta-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(255,179,0,.26);
}
.cta-primary:active{
  transform:translateY(0);
  box-shadow:0 6px 16px rgba(255,179,0,.18);
}

.cta-secondary{
  background:#ffffff;
  color:#111827;
  border:1px solid #e5e7eb;
  box-shadow:0 6px 14px rgba(15,23,42,.06);
}
.cta-secondary:hover{
  background:#f9fafb;
  border-color:#d1d5db;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.10);
}
.cta-secondary:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(15,23,42,.06);
}

.cta-primary i,
.cta-secondary i{
  font-size:15px;
}

/* CTA secundário específico do inventário */
.cta-inventory{
  font-size:13px;
  padding-inline:16px;
}

/* =========================================================
   WALLET CARD — versão minimalista, alinhada e suave
   ====================================================== */

.wallet-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px;

  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px 26px;

  box-shadow:0 6px 18px rgba(0,0,0,.04);
  position:relative;
}

/* Subtle gradient background */
.wallet-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    135deg,
    rgba(250,204,21,.18) 0%,
    rgba(250,204,21,.05) 28%,
    transparent 60%
  );
  pointer-events:none;
  border-radius:20px;
  z-index:0;
}

.wallet-card > *{
  position:relative;
  z-index:2;
}

/* Ícone circular */
.wallet-emoji{
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:32px;

  background:#fff8dc;
  border:1px solid #ffe8a1;

  box-shadow:0 3px 6px rgba(0,0,0,.05);
}

/* Texto */
.wallet-info strong{
  font-size:17px;
  font-weight:900;
}
.wallet-info small{
  color:var(--muted);
  font-size:13px;
}

/* Pill de saldo — agora ALINHADO com o ícone */
.wallet-pill{
  margin-top:8px;

  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:8px 18px;
  border-radius:14px;

  background:#fff;
  border:1px solid #e6cf82;
  color:#5c4a00;

  font-size:18px;
  font-weight:900;

  box-shadow:0 3px 10px rgba(0,0,0,.06);
}

.wallet-pill i{
  font-size:18px;
}

/* Botão de comprar coins */
.wallet-actions .cta-primary{
  padding:10px 18px;
  border-radius:999px;

  background:#ffe799;
  border:1px solid #e9c667;
  color:#3b2a00;
  box-shadow:0 4px 14px rgba(234,179,8,.18);
}

.wallet-actions .cta-primary:hover{
  background:#ffe18a;
  transform:translateY(-1px);
}

/* =========================================================
   INVENTÁRIO — versão alinhada com a carteira
   ====================================================== */

.inv-banner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:20px;
  align-items:center;

  padding:18px 24px;
  margin-top:14px;

  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}

.inv-banner .icon{
  width:54px;
  height:54px;
  border-radius:14px;
  display:grid;
  place-items:center;

  background:#fff8dc;
  border:1px solid #ffe8a1;
  font-size:26px;
}

.inv-banner .copy strong{
  font-size:17px;
  font-weight:900;
}

.inv-banner .copy small{
  font-size:13px;
  color:var(--muted);
}

/* Botão de ver itens */
.cta-inventory{
  padding:9px 18px;
  border-radius:999px;

  background:#fff;
  border:1px solid var(--line);
  color:#111;
  font-weight:800;

  box-shadow:0 3px 10px rgba(0,0,0,.05);
}
.cta-inventory:hover{
  background:#fafafa;
  transform:translateY(-1px);
}

/* =========================================================
   MODAL DO INVENTÁRIO – LAYOUT PRO
   ====================================================== */
.inv-modal{
  max-width:820px;
  text-align:left;
  padding:20px 22px 18px;
}

.inv-modal h2{
  font-size:22px;
  font-weight:900;
  margin:0 0 4px;
  display:flex;
  align-items:center;
  gap:8px;
}
.inv-modal h2 i{
  font-size:20px;
}

.inv-modal > p{
  margin:.25rem 0 1rem;
  font-size:13px;
  color:var(--muted);
}

/* lista geral */
.inv-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* área rolável */
.inv-scroll{
  max-height:58vh;
  overflow:auto;
  padding-right:2px;
}

/* scrollbar suave */
.inv-scroll::-webkit-scrollbar{
  width:6px;
}
.inv-scroll::-webkit-scrollbar-track{
  background:transparent;
}
.inv-scroll::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.7);
  border-radius:999px;
}

/* linha de item */
.inv-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  box-shadow:0 4px 10px rgba(15,23,42,.02);
  transition:border-color .18s ease, box-shadow .18s ease, transform .16s ease, background .18s ease;
}
.inv-item:hover{
  border-color:rgba(234,179,8,.7);
  box-shadow:0 10px 24px rgba(15,23,42,.18);
  transform:translateY(-1px);
}

/* ícone à esquerda */
.icon-wrap{
  width:44px;
  height:44px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#fff7e1;
  border:1px solid #ffe6a8;
  color:#7a5600;
  font-size:18px;
}
.icon-wrap.on{
  background:linear-gradient(135deg,var(--gold3),var(--gold2));
  border:none;
  color:#3b2a00;
  box-shadow:0 10px 22px rgba(234,179,8,.24);
}

/* bloco de textos */
.inv-item .meta{
  min-width:0;
}
.inv-item .meta .line1{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.inv-item .meta .name{
  font-weight:900;
  font-size:16px;
}
.inv-item .meta .qty{
  margin-left:auto;
  font-weight:800;
  color:#a07800;
  font-size:13px;
}

/* pílulas de status (Ativo / Expirado etc.) */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  background:#e5e7eb;
  border:1px solid #d1d5db;
  color:#4b5563;
}
.badge.on{
  background:#dcfce7;
  border-color:#86efac;
  color:#166534;
}
.badge.expired{
  background:#fee2e2;
  border-color:#fecaca;
  color:#b91c1c;
}

/* linha secundária: descrição + infos extras */
.inv-item .meta .line2{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:2px;
  font-size:12px;
}
.inv-item .meta .line2 .muted{
  font-size:12px;
}
.inv-item .meta .expires{
  color:#2463a9;
  font-weight:700;
}

/* lado direito: ações */
.inv-item .actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.inv-item .actions .btn-ghost,
.inv-item .actions .btn{
  height:32px;
  padding:0 14px;
  font-size:12px;
  border-radius:999px;
}

.inv-item .actions .btn-ghost[disabled]{
  background:#f9fafb;
  color:#4b5563;
  border-color:#e5e7eb;
  font-weight:800;
}

/* estado de item vazio */
.inv-empty{
  text-align:center;
  padding:18px;
}

/* responsivo inventário */
@media (max-width:640px){
  .inv-item{
    grid-template-columns:1fr;
    align-items:flex-start;
  }
  .inv-item .actions{
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
  }
}

/* =========================================================
   TAGS “POPULAR / NEW / LIMITED / HARD / CONTROL”
   ====================================================== */
.tag-top{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:#fff;
  border:1px solid var(--line);
  color:var(--muted);
}

/* POPULAR / TOP / HOT → dourado */
.tag-top--popular,
.tag-top--top,
.tag-top--hot{
  background:#fff7e1;
  border-color:#ffe6a8;
  color:#8a6300;
}

/* NEW → azul claro */
.tag-top--new{
  background:#edf7ff;
  border-color:#d8ecff;
  color:#245b8a;
}

/* LIMITED → laranja */
.tag-top--limited{
  background:#fff3e0;
  border-color:#ffe0b2;
  color:#a55a00;
}

/* HARD / CONTROL → lilás */
.tag-top--tryhard,
.tag-top--control{
  background:#f3e8ff;
  border-color:#e0ccff;
  color:#5f3ab2;
}

/* badge de quantidade (ex: 5x) */
.tag-multi{
  display:inline-block;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
  vertical-align:middle;
  background:#f3e8ff;
  border:1px solid #e0ccff;
  color:#5f3ab2;
  text-align: center;
}

/* =========================================================
   TOOLTIP “COMO USAR”
   ====================================================== */
.tip-btn{ position:relative; }
.tip-btn:hover::after{
  content:attr(data-tip);
  position:absolute;
  left:auto;
  right:0;
  bottom:calc(100% + 8px);
  white-space:nowrap;
  background:#111827;
  color:#f9fafb;
  font-size:12px;
  font-weight:700;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #333;
  box-shadow:0 10px 20px rgba(0,0,0,.2);
  z-index:99999;
}

/* =========================================================
   CONTROLES DO MODAL DE COINS
   ====================================================== */
.coins-control{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  margin:12px 0;
}
.coins-control button{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--ink);
  font-size:22px;
  font-weight:900;
  cursor:pointer;
}
.coins-control span{
  font-weight:800;
  font-size:22px;
}
.coins-price{
  margin:8px 0 16px;
  color:#6a5a00;
  font-weight:800;
}

/* =========================================================
   HERO / LAYOUT
   ====================================================== */
.hero{
  grid-template-columns:1fr; /* hero em 1 coluna, banner ocupa a largura toda */
}

/* =========================================================
   TABS DA LOJA
   ====================================================== */
.tabs .tab{ cursor:pointer; }
.tabs .tab.is-active{
  background:linear-gradient(90deg,var(--gold3),var(--gold2));
  color:#2b2b2b;
  font-weight:900;
  border-color:transparent;
}

/* =========================================================
   AJUSTES RESPONSIVOS GERAIS
   ====================================================== */
@media (max-width:960px){
  .wallet-card{
    flex-direction:column;
    align-items:flex-start;
  }
  .wallet-actions{
    width:100%;
    align-items:stretch;
  }
  .wallet-actions .cta-primary{
    width:100%;
  }
}
@media (max-width:720px){
  .inv-banner{
    grid-template-columns:1fr;
    text-align:left;
  }
  .inv-banner .actions{
    justify-content:flex-start;
  }
  .cta-inventory{
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   DARK THEME OVERRIDES
   ====================================================== */
body:not(.theme-light) .modal-content{
  background:#020617;
  border-color:#1f2933;
  color:#e5e7eb;
}
body:not(.theme-light) .inv-item{
  background:#020617;
  border-color:#1f2933;
}
body:not(.theme-light) .inv-item:hover{
  background:#020617;
  border-color:#eab308;
}
body:not(.theme-light) .icon-wrap{
  background:#111827;
  border-color:#374151;
  color:#e5e7eb;
}
body:not(.theme-light) .badge{
  background:#111827;
  border-color:#374151;
  color:#e5e7eb;
}
body:not(.theme-light) .badge.expired{
  background:#4b1010;
  border-color:#7f1d1d;
  color:#fecaca;
}
body:not(.theme-light) .inv-item .actions .btn-ghost[disabled]{
  background:#020617;
  border-color:#1f2933;
  color:#e5e7eb;
}

/* =========================================================
   TOOLTIP / OVERFLOW FIX
   ====================================================== */
.modal,
.modal-content,
.inv-modal,
.inv-scroll,
.inv-item{
  overflow:visible !important;
}