/* =========================================================
   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 */
.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);
}

.card:focus-visible{
  outline:2px solid var(--gold2);
  outline-offset:3px;
}

.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; }
.shop-grid .card.is-hidden{ display:none; }

/* =========================================================
   MODAL BASE
   ====================================================== */

.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;

  /* acessibilidade / scroll em telas baixas */
  max-height:calc(100dvh - 36px);
  overflow:auto;
}

.modal-content.small{ max-width:420px; }

/* Currency dropdown styles (moved from inline in loja.ejs) */
#coinsModal .modal-content { overflow: visible; }
.currency-dropdown{position:relative; display:inline-block}
.currency-btn{display:flex; align-items:center; gap:10px; border:1px solid #eceff1; padding:6px 8px; border-radius:10px; background:#ffffff; cursor:pointer; box-shadow:0 1px 0 rgba(16,24,40,0.02); font-weight:600}
.currency-btn .currency-flag{font-size:16px}
.currency-btn .currency-label{font-size:13px; color:#111827}
.currency-btn .caret{margin-left:6px; transform:translateY(0); transition:transform .15s ease}
.currency-btn.open .caret{transform:rotate(180deg)}
.currency-menu{position:absolute; top:calc(100% + 6px); left:0; background:#fff; border:1px solid #eef2f7; box-shadow:0 10px 30px rgba(2,6,23,0.08); border-radius:10px; min-width:160px; display:none; z-index:900; overflow:hidden}
.currency-menu.open{display:block}
.currency-option{padding:10px 12px; display:flex; align-items:center; gap:10px; cursor:pointer}
.currency-option:hover{background:#f8fafc}
.currency-option.active{background:#eef2ff}
.currency-flag{font-size:18px}
.currency-label{font-size:14px}
.modal .currency-dropdown{display:inline-block}

/* Wallet actions: place dropdown beside Comprar Coins */
.wallet-actions{display:flex; gap:10px; align-items:center}
.wallet-actions .currency-dropdown{order:0}


.close{
  position:absolute;
  right:14px;
  top:10px;

  background:none;
  border:none;

  font-size:26px;
  color:var(--muted);

  cursor:pointer;
  padding:6px;            /* tap target melhor */
  line-height:1;
  border-radius:10px;
}

.close:hover{ color:var(--ink); }

.close:focus-visible{
  outline:2px solid var(--gold2);
  outline-offset:2px;
}

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

/* =========================================================
   BOTÕES
   ====================================================== */

.btn{
  min-height:44px;         /* acessibilidade mobile */
  padding:0 14px;
  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:focus-visible{
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:2px;
}

.btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(.2);
  box-shadow:none;
}

.btn--full{ width:100%; }

.btn-ghost{
  min-height:44px;         /* acessibilidade mobile */
  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; }

.btn-ghost:focus-visible{
  outline:2px solid var(--gold2);
  outline-offset:2px;
}

/* =========================================================
   CTAs (COMPRAR COINS / VER ITENS)
   ====================================================== */

.cta-primary,
.cta-secondary{
  display:inline-flex;
  align-items:center;
  gap:8px;

  min-height:44px;       /* tap target */
  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-primary:focus-visible{
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:2px;
}

.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-secondary:focus-visible{
  outline:2px solid var(--gold2);
  outline-offset:2px;
}

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

/* CTA inventário */
.cta-inventory{
  font-size:13px;
  padding-inline:16px;
  justify-content:center;
}

/* =========================================================
   WALLET CARD
   ====================================================== */

.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;
}

.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;
}

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

.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);
}

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

.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; }

.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 — BANNER
   ====================================================== */

.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);
}

/* =========================================================
   MODAL DO INVENTÁRIO
   ====================================================== */

.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);
}

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

.inv-scroll{
  max-height:58vh;
  overflow:auto;
  padding-right:2px;
}

.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;
}

.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);
}

.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);
}

.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;
}

/* STATUS BADGE */
.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;
}

.inv-item .meta .line2{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:2px;
  font-size:12px;
}

.inv-item .meta .line2 .expires{
  color:#2463a9;
  font-weight:700;
}

/* ações do item */
.inv-item .actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

/* só ajustando tamanho dos botões dentro do item */
.inv-item .actions .btn-ghost,
.inv-item .actions .btn{
  min-height:36px;
  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;
}

.inv-empty{
  text-align:center;
  padding:18px;
}

/* =========================================================
   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);
}

.tag-top--popular,
.tag-top--top,
.tag-top--hot{
  background:#fff7e1;
  border-color:#ffe6a8;
  color:#8a6300;
}

.tag-top--new{
  background:#edf7ff;
  border-color:#d8ecff;
  color:#245b8a;
}

.tag-top--limited{
  background:#fff3e0;
  border-color:#ffe0b2;
  color:#a55a00;
}

.tag-top--tryhard,
.tag-top--control{
  background:#f3e8ff;
  border-color:#e0ccff;
  color:#5f3ab2;
}

.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”
   - hover é ok no desktop
   - adiciona focus-visible p/ teclado
   ====================================================== */

.tip-btn{ position:relative; }

.tip-btn:hover::after,
.tip-btn:focus-visible::after{
  content:attr(data-tip);
  position:absolute;
  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;
}

.tip-btn:focus-visible{
  outline:2px solid var(--gold2);
  outline-offset:2px;
  border-radius:10px;
}

/* =========================================================
   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 button:focus-visible{
  outline:2px solid var(--gold2);
  outline-offset:2px;
}

.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;
}

/* =========================================================
   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;
}

/* =========================================================
   RESPONSIVO (CORRIGINDO O QUE NÃO PEGAVA)
   ====================================================== */

@media (max-width:960px){
  /* wallet-card é GRID, então troca o grid no mobile */
  .wallet-card{
    grid-template-columns:1fr;
    gap:14px;
    padding:18px 18px;
  }

  .wallet-actions{
    width:100%;
  }

  .wallet-actions .cta-primary{
    width:100%;
    justify-content:center;
  }
}

@media (max-width:720px){
  .inv-banner{
    grid-template-columns:1fr;
  }

  .cta-inventory{
    width:100%;
  }
}

/* inventário no celular: empilha item e coloca ações lado a lado */
@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;
    flex-wrap:wrap;
  }
}

/* =========================================================
   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;
}