/* LASTDRIB — loja (tela cheia). Base 1366×768, escalada via --st-zoom em shop-ui.js */
.st-root {
  position: fixed; inset: 0; z-index: 65; color: var(--ld-text, #f1f1f4);
  font-family: var(--ld-body, Inter, 'Segoe UI', sans-serif);
  background:
    radial-gradient(ellipse at 70% 0%, rgba(255, 160, 30, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(6, 7, 10, 0.9), rgba(6, 7, 10, 0.97)),
    #07080b url('/assets/lobby/lobby-scenery.jpg') center / cover;
  backdrop-filter: blur(6px);
}
.st-root.hidden { display: none; }
.st-frame { position: absolute; inset: 0; zoom: var(--st-zoom, 1); display: flex; flex-direction: column; }
.st-root button { font-family: inherit; color: inherit; }
.st-ico, .st-cur { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle; }

/* TOPO */
.st-top {
  flex: none; height: 74px; display: flex; align-items: center; gap: 26px; padding: 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2));
}
.st-title { display: flex; align-items: center; gap: 10px; }
.st-title-ico { width: 26px; height: 26px; color: var(--ld-gold, #ffc21a); }
.st-title h2 { font: 600 36px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 1.5px; padding-top: 4px; }
.st-tabs { display: flex; gap: 4px; height: 100%; }
.st-tabs button {
  position: relative; border: 0; background: transparent; cursor: pointer; padding: 0 16px;
  font: 600 18px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 1px; color: #9a9ca8; transition: color 0.15s;
}
.st-tabs button:hover { color: #fff; }
.st-tabs button.on { color: #fff; }
.st-tabs button.on::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
  background: var(--ld-gold, #ffc21a); box-shadow: 0 0 12px var(--ld-gold, #ffc21a);
}
.st-wallet { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.st-bal {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 10px; min-width: 128px;
  background: rgba(10, 11, 15, 0.85); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 4px;
}
.st-bal .st-cur { width: 20px; height: 20px; }
.st-bal b { flex: 1; font: 600 20px/1 var(--ld-head, Teko, sans-serif); padding-top: 3px; }
.st-bal button {
  width: 28px; height: 28px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06); cursor: pointer; display: grid; place-items: center;
}
.st-bal button:hover { border-color: var(--ld-gold, #ffc21a); background: rgba(255, 194, 26, 0.18); }
.st-plus { width: 12px; height: 12px; }
.st-close {
  width: 38px; height: 38px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05); cursor: pointer; font-size: 16px; margin-left: 6px;
}
.st-close:hover { border-color: #ff5a5a; color: #ff7a7a; }

/* CORPO */
.st-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 390px; gap: 18px; padding: 18px 24px 20px; }
.st-main { min-height: 0; display: flex; flex-direction: column; gap: 14px; }

.st-hero {
  flex: none; position: relative; height: 190px; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255, 194, 26, 0.3);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.1) 55%), url('/assets/lobby/shop-hero.jpg') right 30% / cover;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.st-hero.hidden { display: none; }
.st-hero-copy { position: absolute; left: 26px; top: 22px; max-width: 420px; }
.st-hero-copy span { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--ld-gold, #ffc21a); }
.st-hero-copy h3 { font: italic 700 48px/0.9 var(--ld-head, Teko, sans-serif); letter-spacing: 1px; margin: 6px 0 6px; }
.st-hero-copy h3 b { color: var(--ld-gold, #ffc21a); }
.st-hero-copy p { font-size: 13px; color: #cfd0d6; margin-bottom: 12px; }
.st-hero-copy .st-btn { width: auto; padding: 0 22px; height: 38px; }
.st-hero-timer {
  position: absolute; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 6px;
  font-style: normal; font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 4px; background: rgba(0, 0, 0, 0.6);
}

.st-filters { flex: none; display: flex; gap: 6px; }
.st-filters.hidden { display: none; }
.st-filters button {
  height: 30px; padding: 0 14px; border-radius: 15px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(10, 11, 15, 0.7);
  font: 600 14px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 0.8px; color: #b8b9c2; padding-top: 2px;
}
.st-filters button[style] { color: var(--rc); }
.st-filters button.on { border-color: var(--rc, var(--ld-gold, #ffc21a)); background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: inset 0 -2px 0 var(--rc, var(--ld-gold, #ffc21a)); }

.st-grid {
  flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 2px 6px 6px 2px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.st-card {
  position: relative; display: flex; flex-direction: column; height: 214px; padding: 0; cursor: pointer; text-align: left;
  border-radius: 6px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(22, 24, 30, 0.95), rgba(10, 11, 15, 0.97));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.st-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rc); box-shadow: 0 0 12px var(--rc); }
.st-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--rc) 60%, transparent); }
.st-card.sel { border-color: var(--ld-gold, #ffc21a); box-shadow: 0 0 0 1px var(--ld-gold, #ffc21a), 0 0 26px rgba(255, 194, 26, 0.25); }
.st-rar {
  position: absolute; left: 8px; top: 8px; z-index: 1; padding: 3px 7px 2px; border-radius: 3px;
  font: 600 12px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 1px; color: #fff;
  background: color-mix(in srgb, var(--rc) 75%, #000);
}
.st-rar.inline { position: static; display: inline-block; }
.st-eq {
  position: absolute; right: 8px; top: 8px; z-index: 1; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: #3ee66b; color: #04210d;
}
.st-eq-ico { width: 14px; height: 14px; }
.st-thumb { flex: 1; min-height: 0; display: grid; place-items: center; padding: 26px 10px 4px; }
.st-thumb-img {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  object-fit: contain; object-position: center 85%; display: block;
  opacity: 0; transition: opacity 0.3s; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6));
}
.st-thumb-img.on { opacity: 1; }
.st-thumb:has(.st-char-art) { padding: 0; }
.st-char-art {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center; transform: scale(1.1); transform-origin: center 15%;
  transition: transform 0.25s;
}
.st-card:hover .st-char-art { transform: scale(1.16); }
.st-gun-art { transform: scale(1); transform-origin: center 45%; object-position: 55% center; }
.st-card:hover .st-gun-art { transform: scale(1.06); }
.st-card-foot { position: relative; z-index: 1; }
.st-card-foot {
  flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 8px 10px 11px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent);
}
.st-card-foot b { display: block; font: 600 19px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 0.5px; color: #fff; }
.st-card-foot small { font-size: 10px; color: #8d8f9a; font-weight: 600; }
.st-price { display: flex; align-items: center; gap: 4px; white-space: nowrap; font: 600 18px/1 var(--ld-head, Teko, sans-serif); }
.st-price .st-cur { width: 15px; height: 15px; }
.st-price.coin { color: #ffd86a; }
.st-price.gem { color: #7ecbff; }
.st-price.free { color: #6dff95; font-size: 15px; }
.st-price.own { color: #8d8f9a; font-size: 14px; letter-spacing: 0.6px; }
.st-price.real { color: #fff; font-size: 16px; }
.st-card.owned .st-thumb-img { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)) saturate(0.9); }

.st-pack-img {
  height: 100%; max-height: 150px; aspect-ratio: 1; object-fit: contain; mix-blend-mode: screen;
  transform: scale(var(--s, 1)); transition: transform 0.2s;
}
.st-card:hover .st-pack-img { transform: scale(calc(var(--s, 1) * 1.06)); }
.st-pack-img.big { display: block; width: 220px; height: 220px; max-height: none; margin: 0 auto; }

/* DETALHE */
.st-detail {
  min-height: 0; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden;
  background: rgba(10, 11, 15, 0.88); border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.st-stage {
  position: relative; flex: none; height: 250px;
  background:
    radial-gradient(ellipse at 50% 85%, rgba(255, 160, 40, 0.28), transparent 60%),
    linear-gradient(180deg, #171a22, #0b0c11);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.st-stage[data-kind='coins'] .st-canvas, .st-stage[data-kind='gems'] .st-canvas,
.st-stage[data-kind='coins'] .st-drag, .st-stage[data-kind='gems'] .st-drag { visibility: hidden; }
.st-stage[data-kind='coins'], .st-stage[data-kind='gems'] { display: none; }
.st-canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.st-canvas:active { cursor: grabbing; }
.st-stage-status { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font-size: 12px; color: #8d8f9a; pointer-events: none; }
.st-drag { position: absolute; right: 10px; bottom: 8px; font-size: 10px; color: #6a6c78; pointer-events: none; }
.st-detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.st-d-head h3 { font: 600 34px/0.95 var(--ld-head, Teko, sans-serif); letter-spacing: 0.8px; margin: 8px 0 2px; }
.st-d-head small { font-size: 12px; color: #8d8f9a; font-weight: 600; }
.st-d-head .st-rar { background: color-mix(in srgb, var(--rc) 75%, #000); }
.st-note { font-size: 12px; color: #b8b9c2; line-height: 1.5; }
.st-note b { color: #fff; }
.st-stats { display: grid; gap: 7px; }
.st-stat { display: grid; grid-template-columns: 82px 1fr 58px; align-items: center; gap: 10px; font-size: 11px; color: #b8b9c2; font-weight: 600; }
.st-stat b { text-align: right; color: #fff; font-size: 12px; }
.st-stat-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.st-stat-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #ffc21a); border-radius: inherit; }
.st-guns { display: flex; flex-wrap: wrap; gap: 6px; }
.st-gun {
  position: relative; height: 28px; padding: 0 10px; border-radius: 4px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04);
  font: 600 14px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 0.6px; color: #c8c9d0; padding-top: 2px;
}
.st-gun:hover { border-color: rgba(255, 194, 26, 0.5); }
.st-gun.on { border-color: var(--ld-gold, #ffc21a); color: #fff; background: rgba(255, 194, 26, 0.14); }
.st-gun i { position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: #a855f7; box-shadow: 0 0 6px #a855f7; }
.st-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.st-btn {
  width: 100%; height: 48px; border: 0; border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 20px/1 var(--ld-head, Teko, sans-serif) !important; letter-spacing: 1px; padding-top: 3px;
  transition: filter 0.15s, transform 0.08s;
}
.st-btn .st-cur { width: 18px; height: 18px; margin-top: -3px; }
.st-btn.buy {
  color: #140b00 !important; background: linear-gradient(180deg, #ffd84a, #ffc21a 45%, #f5a000);
  box-shadow: 0 0 24px rgba(255, 180, 20, 0.3);
}
.st-btn.equip { color: #031424 !important; background: linear-gradient(180deg, #7fdcff, #2b9fe0); }
.st-btn.on { color: #6dff95 !important; background: rgba(62, 230, 107, 0.1); border: 1px solid rgba(62, 230, 107, 0.4); cursor: default; }
.st-btn.ghost { height: 38px; font-size: 16px !important; color: #c8c9d0 !important; background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); }
.st-btn.ghost:hover { border-color: var(--ld-gold, #ffc21a); color: var(--ld-gold, #ffc21a) !important; }
.st-btn:hover:not(:disabled) { filter: brightness(1.08); }
.st-btn:active:not(:disabled) { transform: translateY(1px); }
.st-btn:disabled:not(.on) { filter: grayscale(0.7) brightness(0.6); cursor: not-allowed; }
.st-empty { color: #8d8f9a; font-size: 13px; padding: 20px; }

.st-toast {
  position: absolute; left: 50%; bottom: 26px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 12px 22px; border-radius: 5px; font-size: 14px; font-weight: 700;
  background: rgba(10, 11, 15, 0.95); border: 1px solid rgba(62, 230, 107, 0.6); color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); transition: opacity 0.2s, transform 0.2s;
}
.st-toast.show { opacity: 1; transform: translate(-50%, 0); }
.st-toast.err { border-color: rgba(255, 90, 90, 0.7); }

/* INVENTÁRIO */
.st-invbar {
  flex: none; display: flex; align-items: stretch; gap: 10px; height: 76px; padding: 10px; border-radius: 8px;
  background:
    radial-gradient(ellipse at 85% 50%, rgba(255, 170, 30, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(22, 24, 30, 0.95), rgba(10, 11, 15, 0.97));
  border: 1px solid rgba(255, 194, 26, 0.25); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.st-invbar.hidden { display: none; }
.st-inv-stat {
  width: 108px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 5px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07);
}
.st-inv-stat b { font: 600 30px/1 var(--ld-head, Teko, sans-serif); padding-top: 3px; }
.st-inv-stat small { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; color: #8d8f9a; }
.st-inv-stat.gift { border-color: rgba(168, 85, 247, 0.45); background: rgba(168, 85, 247, 0.1); }
.st-inv-stat.gift b { color: #d7b4ff; }
.st-inv-worth { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 14px; }
.st-inv-worth small { font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px; color: #8d8f9a; }
.st-inv-worth span { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.st-inv-worth .st-cur { width: 20px; height: 20px; margin-top: -3px; }
.st-inv-worth b { font: 600 30px/1 var(--ld-head, Teko, sans-serif); color: #ffd86a; margin-right: 10px; }
.st-invbar > .st-btn { width: 120px; height: auto; align-self: stretch; }
.st-sellv { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.st-sellv small { font-size: 8.5px !important; font-weight: 800; letter-spacing: 1.2px; color: #6f717c !important; }
.st-sellv .st-price { font-size: 16px; }
.st-odds { padding: 10px 12px; border-radius: 5px; background: color-mix(in srgb, var(--rc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); }
.st-odds small { display: block; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; color: #8d8f9a; }
.st-odds b { font-size: 13px; color: #fff; }
.st-btn.ghost.sell { height: 44px; font-size: 18px !important; color: #ffd86a !important; border-color: rgba(255, 194, 26, 0.35); }
.st-btn.ghost.sell .st-cur { width: 16px; height: 16px; }
.st-btn.ghost.sell:hover { background: rgba(255, 194, 26, 0.1); }
.st-note.center { text-align: center; color: #6f717c; }
.st-inv-empty {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 60px 20px; text-align: center;
  border-radius: 8px; border: 1px dashed rgba(255, 255, 255, 0.14); background: rgba(10, 11, 15, 0.6);
}
.st-inv-empty-ico { width: 56px; height: 56px; color: var(--ld-gold, #ffc21a); opacity: 0.85; }
.st-inv-empty b { font: 600 28px/1 var(--ld-head, Teko, sans-serif); }
.st-inv-empty small { font-size: 13px; color: #9a9ca8; max-width: 380px; }
.st-inv-empty .st-btn { width: 220px; margin-top: 8px; }

.st-reveal {
  position: absolute; inset: 0; z-index: 5; display: none; place-items: center;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 25%, transparent), rgba(3, 4, 6, 0.9) 60%);
  backdrop-filter: blur(4px);
}
.st-reveal.show { display: grid; animation: st-fade 0.25s ease-out; }
@keyframes st-fade { from { opacity: 0; } }
.st-reveal-card {
  position: relative; width: 380px; padding: 30px 30px 24px; text-align: center; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 22, 29, 0.97), rgba(9, 10, 13, 0.98));
  border: 1px solid color-mix(in srgb, var(--rc) 70%, transparent);
  box-shadow: 0 0 60px color-mix(in srgb, var(--rc) 45%, transparent), 0 30px 80px rgba(0, 0, 0, 0.7);
  animation: st-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes st-pop { from { transform: scale(0.6); opacity: 0; } }
.st-reveal-burst {
  position: absolute; left: 50%; top: 100px; width: 420px; height: 420px; transform: translate(-50%, -50%); pointer-events: none;
  background: repeating-conic-gradient(color-mix(in srgb, var(--rc) 22%, transparent) 0 10deg, transparent 10deg 24deg);
  mask: radial-gradient(circle, #000 20%, transparent 65%); animation: st-spin 12s linear infinite;
}
@keyframes st-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.st-reveal-card > small { position: relative; font-size: 10px; font-weight: 800; letter-spacing: 2px; color: #b8b9c2; }
.st-reveal-ico {
  position: relative; display: grid; place-items: center; width: 110px; height: 110px; margin: 16px auto 14px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 40%, transparent), transparent 70%);
  color: var(--rc);
}
.st-reveal-svg { width: 62px; height: 62px; filter: drop-shadow(0 0 16px var(--rc)); }
.st-reveal-card .st-rar { position: relative; background: color-mix(in srgb, var(--rc) 75%, #000); }
.st-reveal-card h3 { position: relative; font: 600 40px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 1px; margin: 10px 0 4px; }
.st-reveal-card p { position: relative; font-size: 13px; color: #9a9ca8; margin-bottom: 18px; }
.st-reveal-card .st-btn { position: relative; }