* { font-family: 'Inter', sans-serif; }

/* =====================================================
   TEMA (LIGHT/DARK) — variaveis CSS
===================================================== */
:root {
  --bg-page:      #f9fafb;
  --bg-card:      #ffffff;
  --bg-card-2:    #f3f4f6;
  --bg-header:    #ffffff;
  --bg-nav:       #ffffff;
  --border:       #e5e7eb;
  --border-2:     #d1d5db;
  --text:         #111827;
  --text-2:       #4b5563;
  --text-muted:   #9ca3af;
  --text-onbtn:   #ffffff;
  --hero-from:    #ffffff;
  --hero-mid:     #f9fafb;
  --hero-to:      #ecfdf5;
  --shadow:       0 4px 12px rgba(0,0,0,0.08);
}

[data-theme="dark"] {
  --bg-page:      #0b1220;
  --bg-card:      #131c2e;
  --bg-card-2:    #1c2742;
  --bg-header:    #0b1220;
  --bg-nav:       #0b1220;
  --border:       #1f2a44;
  --border-2:     #2a3958;
  --text:         #f3f4f6;
  --text-2:       #cbd5e1;
  --text-muted:   #64748b;
  --text-onbtn:   #ffffff;
  --hero-from:    #131c2e;
  --hero-mid:     #0e1626;
  --hero-to:      #042f2e;
  --shadow:       0 4px 12px rgba(0,0,0,0.4);
}

/* Header */
header { background: var(--bg-header) !important; border-color: var(--border) !important; }
header .text-gray-900 { color: var(--text) !important; }
header .text-gray-500 { color: var(--text-muted) !important; }

/* Brasil header theme */
/* brasil-header styles live in index.html inline <style> block */

/* Hero section override */
.hero-section {
  background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-mid) 60%, var(--hero-to) 100%) !important;
  border-color: var(--border) !important;
}

/* SUPER PRÊMIO highlight — high contrast on light backgrounds */
.super-premio-highlight {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  color: #fff;
  padding: 0 .35em;
  border-radius: .25em;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35), inset 0 -2px 0 rgba(0,0,0,0.15);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  -webkit-text-fill-color: #fff;
}
[data-theme="dark"] .super-premio-highlight {
  background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
  text-shadow: none;
}
[data-theme="dark"] .hero-section h1 { color: var(--text) !important; }
[data-theme="dark"] .hero-section p { color: var(--text-2) !important; }

/* Cards genericos com bg branco */
.bg-white { background: var(--bg-card) !important; }
.bg-gray-50 { background: var(--bg-card-2) !important; }
.bg-gray-100 { background: var(--bg-card-2) !important; }
.border-gray-200, .border-gray-300 { border-color: var(--border) !important; }
.text-gray-900 { color: var(--text) !important; }
.text-gray-700, .text-gray-600 { color: var(--text-2) !important; }
.text-gray-500, .text-gray-400 { color: var(--text-muted) !important; }

/* Bottom nav */
nav.fixed { background: var(--bg-nav) !important; border-color: var(--border) !important; }

/* Inputs */
[data-theme="dark"] input,
[data-theme="dark"] textarea {
  background: var(--bg-card-2);
  color: var(--text);
  border-color: var(--border-2);
}

/* Modal */
[data-theme="dark"] .modal {
  background: var(--bg-card);
  color: var(--text);
}

/* Album slots */
[data-theme="dark"] .album-slot.empty { background: var(--bg-card-2); }
[data-theme="dark"] .album-slot.owned { background: #1f2937; }
[data-theme="dark"] .album-page-tab { background: var(--bg-card); color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .album-page-tab:hover { background: var(--bg-card-2); }

/* Toggle button (lua/sol) */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  transition: all .2s;
}
.theme-toggle:hover {
  background: var(--bg-card-2);
  color: var(--text);
  transform: rotate(20deg);
}

/* Logo escudo */
.logo-shield {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.brand-logo {
  height: 48px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  background: #0f172a;
  padding: 6px 14px;
  border-radius: 10px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}

/* Tier colors */
.tier-classica   { --tier: #10b981; }
.tier-selecao    { --tier: #3b82f6; }
.tier-rara       { --tier: #a855f7; }
.tier-epica      { --tier: #f97316; }
.tier-lendaria   { --tier: #eab308; }

/* =====================================================
   HERO - 3 figurinhas em destaque (GRANDES, sem frame)
===================================================== */
.hero-section {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 60%, #ecfdf5 100%);
  position: relative;
  overflow: hidden;
}
.hero-bg-decor {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 75% 30%, rgba(251,191,36,0.15) 0, transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(16,185,129,0.12) 0, transparent 35%);
  pointer-events: none;
}
.hero-cards-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  align-items: end;
  gap: 6px;
  padding: 16px 0 2px 0;
  overflow: visible;
  max-width: 100%;
  min-width: 0;
  max-height: 420px;
}
.hero-card {
  position: relative;
  width: 100%;
  max-width: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s;
}
.hero-card:nth-child(2) {
  z-index: 3;
  transform: translateY(0) scale(1.08);
  max-width: 260px;
}
.hero-card:nth-child(1) { z-index: 1; transform: translateY(10px); }
.hero-card:nth-child(3) { z-index: 2; transform: translateY(10px); }

/* Badge de PRÊMIO em cima da figurinha — verde brilhante, animado */
.hero-card-prize-overlay {
  position: absolute;
  bottom: calc(100% - 4px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  padding: 2px 7px;
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 55%, #15803d 100%);
  border: 1.5px solid #86efac;
  border-radius: 10px;
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.25),
    0 0 10px rgba(34, 197, 94, 0.6),
    0 0 20px rgba(34, 197, 94, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3);
  animation: heroPrizeGlow 2.2s ease-in-out infinite, heroPrizeFloat 3.2s ease-in-out infinite;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
}
.hero-card-prize-overlay::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 20px;
  background: radial-gradient(closest-side, rgba(34, 197, 94, 0.55), transparent 70%);
  filter: blur(10px);
  z-index: -1;
  animation: heroPrizePulse 2.2s ease-in-out infinite;
}
.hero-card-prize-label {
  color: #dcfce7;
  font-weight: 800;
  font-size: 7px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.hero-card-prize-value {
  color: #ffffff;
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 0 8px rgba(255, 255, 255, 0.55),
    0 0 16px rgba(134, 239, 172, 0.75);
}
.hero-card:nth-child(2) .hero-card-prize-overlay {
  transform: translateX(-50%) scale(1.08);
}
@keyframes heroPrizeGlow {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(34, 197, 94, 0.25),
      0 0 14px rgba(34, 197, 94, 0.55),
      0 0 28px rgba(34, 197, 94, 0.35),
      0 6px 14px rgba(0, 0, 0, 0.25);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(134, 239, 172, 0.5),
      0 0 24px rgba(34, 197, 94, 0.95),
      0 0 48px rgba(34, 197, 94, 0.75),
      0 6px 18px rgba(0, 0, 0, 0.3);
  }
}
@keyframes heroPrizePulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}
@keyframes heroPrizeFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

/* Card frame portrait — recorta imagem panorâmica em portrait estilo FUT */
.hero-card-img {
  width: 100%;
  aspect-ratio: 3 / 4.5;
  position: relative;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hero-card-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  padding: 0;
  box-sizing: border-box;
}
.hero-card-img::after { display: none; }

.hero-card-name-overlay {
  text-align: center;
  margin-top: 14px;
}
.hero-card-name {
  color: #111827;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hero-card-price-tag {
  background: linear-gradient(180deg, #fde047, #f59e0b);
  color: #1f2937;
  font-weight: 900;
  font-size: 18px;
  padding: 6px 20px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(245,158,11,0.45);
}
@media (max-width: 768px) {
  .hero-card { width: 100%; }
  .hero-card-name { font-size: 11px; }
  .hero-card-price-tag { font-size: 14px; padding: 4px 14px; }
}

/* RESET: garante zero outline indesejado no hero stage, mas permite border/shadow no card-frame */
.hero-cards-stage,
.hero-cards-stage * {
  outline: 0 !important;
}
.hero-cards-stage img {
  border: 0 !important;
}
.hero-cards-stage *:not(.hero-card-price-tag):not(.hero-card-img) {
  box-shadow: none !important;
}

/* Gradient escuro na base da hero card para legibilidade do preço */
.hero-card-img::after {
  content: '';
  position: absolute;
  inset: 50% 0 0 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.72) 100%);
  border-radius: 0 0 12px 12px;
  pointer-events: none;
  z-index: 2;
}

.card-thumb { position: relative; }
.card-thumb-stand-price {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(10px, 1.2vw, 14px);
  letter-spacing: 1.2px;
  white-space: nowrap;
  text-transform: uppercase;
  color: #fde047;
  text-shadow: 0 -1px 0 #fef3c7, 0 1px 0 #92400e, 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(251,191,36,0.5);
  pointer-events: none;
  z-index: 3;
}
.album-slot { position: relative; }
.album-slot-stand-price {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  white-space: nowrap;
  text-transform: uppercase;
  color: #fde047;
  text-shadow: 0 -1px 0 #fef3c7, 0 1px 0 #92400e, 0 1px 2px rgba(0,0,0,0.9);
  pointer-events: none;
  z-index: 3;
}

/* =====================================================
   PACK CARDS (mais realistas, com brilho)
===================================================== */
.pack-mini {
  width: 64px;
  height: 90px;
  border-radius: 10px;
  background: linear-gradient(180deg, #022c22 0%, #064e3b 30%, #022c22 70%, #064e3b 100%);
  padding: 4px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
  flex-shrink: 0;
  position: relative;
  border: 2px solid #fbbf24;
  overflow: hidden;
}
.pack-mini::before {
  content: '';
  position: absolute;
  top: 0; left: -50%; right: -50%; bottom: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
  animation: shimmer 3s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.pack-mini-inner {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.pack-card-art {
  width: 100px;
  height: 140px;
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 24px -4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}
.pack-card-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.35), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.3), transparent 50%);
  pointer-events: none;
}
.pack-card-art.green {
  background: linear-gradient(180deg, #064e3b 0%, #022c22 40%, #052e16 70%, #064e3b 100%);
  border: 3px solid #10b981;
  box-shadow: 0 12px 24px -4px rgba(16,185,129,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.pack-card-art.blue {
  background: linear-gradient(180deg, #1e3a8a 0%, #0c1e3a 40%, #1e3a8a 70%, #0c1e3a 100%);
  border: 3px solid #3b82f6;
  box-shadow: 0 12px 24px -4px rgba(59,130,246,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.pack-card-art.purple {
  background: linear-gradient(180deg, #581c87 0%, #2e1065 40%, #581c87 70%, #2e1065 100%);
  border: 3px solid #a855f7;
  box-shadow: 0 12px 24px -4px rgba(168,85,247,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.pack-card-art.orange {
  background: linear-gradient(180deg, #7c2d12 0%, #431407 40%, #7c2d12 70%, #431407 100%);
  border: 3px solid #f97316;
  box-shadow: 0 12px 24px -4px rgba(249,115,22,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.pack-card-art.yellow {
  background: linear-gradient(180deg, #713f12 0%, #422006 40%, #713f12 70%, #422006 100%);
  border: 3px solid #eab308;
  box-shadow: 0 12px 24px -4px rgba(234,179,8,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
}
.pack-card-art-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  position: relative;
  z-index: 1;
  line-height: 1;
}
.pack-card-art-number {
  font-size: 42px;
  font-weight: 900;
  color: white;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  line-height: 1;
  margin: 6px 0;
}

.pack-hexa-mini {
  width: 48px;
  height: 68px;
  border-radius: 6px;
  padding: 3px;
  background: linear-gradient(180deg, #064e3b, #022c22);
  border: 1.5px solid #fbbf24;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* =====================================================
   COLLECTION CARDS (com fotos dos jogadores)
===================================================== */
.collection-hero {
  height: 100px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}
.collection-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.6));
  pointer-events: none;
}
.collection-hero-imgs {
  position: absolute;
  inset: 0;
  display: flex;
}
.collection-hero-imgs img {
  width: 33.333%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.9;
  padding: 4px;
  box-sizing: border-box;
}
.collection-emoji {
  font-size: 48px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6));
}

/* =====================================================
   CARD THUMB (figurinhas no álbum/feed)
===================================================== */
.card-thumb {
  position: relative;
  aspect-ratio: 3 / 4.2;
  border-radius: 8px;
  overflow: hidden;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.25));
  transition: transform 0.2s;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  box-sizing: border-box;
}
.card-thumb.unowned img {
  filter: grayscale(1) brightness(0.4);
}

/* =====================================================
   MODAL
===================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal {
  background: white;
  border-radius: 1.5rem;
  padding: 1.5rem;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

/* Card reveal animation */
@keyframes cardReveal {
  0%   { transform: rotateY(90deg) scale(0.5); opacity: 0; }
  60%  { transform: rotateY(-15deg) scale(1.05); opacity: 1; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
.card-reveal {
  animation: cardReveal 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* =====================================================
   ROTATIVA
===================================================== */
/* rotativa-card removed — replaced with inline styles in HTML */

/* =====================================================
   GOL DO BRASIL banner
===================================================== */
.gol-brasil-banner {
  background: linear-gradient(135deg, #047857 0%, #10b981 40%, #14532d 100%);
  position: relative;
  overflow: hidden;
}
.gol-brasil-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(251,191,36,0.3), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(251,191,36,0.2), transparent 40%);
}

/* =====================================================
   ALBUM VIEW
===================================================== */
.album-page-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: white;
  color: #6b7280;
  text-decoration: none;
  transition: all 0.2s;
  min-height: 70px;
}
.album-page-tab:hover {
  border-color: #10b981;
  background: #f0fdf4;
}
.album-page-tab.active {
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 640px) {
  .album-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 768px) {
  .album-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 1024px) {
  .album-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
@media (min-width: 1280px) {
  .album-grid { grid-template-columns: repeat(5, 1fr); gap: 22px; }
}

.album-slot {
  background: white;
  border: 3px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  aspect-ratio: 3 / 4.2;
  display: flex;
  flex-direction: column;
}
.album-slot:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.album-slot.owned { background: #fffbeb; }
.album-slot.empty { background: #f3f4f6; }

.album-slot-number {
  position: absolute;
  top: 6px;
  left: 6px;
  color: white;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 999px;
  z-index: 2;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.album-slot-img {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  box-sizing: border-box;
}
.album-slot-qty {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,0.7);
  color: white;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 999px;
  z-index: 2;
}
.album-slot-info {
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 6px 6px;
  text-align: center;
}
.album-slot-name {
  color: white;
  font-size: 10px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.album-slot-price {
  color: #4ade80;
  font-size: 11px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,1);
}
.album-slot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px;
  text-align: center;
}

/* Pack com imagem real */
.pack-img-wrapper {
  width: 100px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pack-real-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35));
}

/* MARKETPLACE */
.market-tab {
  padding: 8px 16px;
  border-radius: 8px;
  color: #6b7280;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.15s;
}
.market-tab:hover { background: #f3f4f6; color: #111827; }
.market-tab-active {
  background: #10b981;
  color: white;
}
.market-tab-active:hover { background: #059669; color: white; }
[data-theme="dark"] .market-tab { color: var(--text-muted); }
[data-theme="dark"] .market-tab:hover { background: var(--bg-card-2); color: var(--text); }
[data-theme="dark"] .market-tab-active { background: #10b981; color: white; }

.trade-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px;
  transition: all 0.2s;
}
.trade-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
[data-theme="dark"] .trade-card { background: var(--bg-card); border-color: var(--border); }

.trade-arrow {
  font-size: 24px;
  color: #10b981;
  text-align: center;
  margin: 0 8px;
}

.trade-mini-card {
  width: 80px;
  height: 110px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
.trade-mini-card img {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
  box-sizing: border-box;
}

/* =====================================================
   RESPONSIVIDADE GERAL (mobile-first improvements)
===================================================== */
@media (max-width: 640px) {
  /* Header */
  header .text-[10px] { display: none; }  /* esconde slogan no header pequeno */

  /* Hero hero text reduzir */
  #hero h1 { font-size: 1.5rem !important; line-height: 1.2 !important; }
  #hero p { font-size: 0.875rem !important; }

  /* Pack cards em mobile: empilha verticalmente */
  #packs-grid { gap: 12px !important; }
  #packs-grid > div { padding: 12px !important; }

  /* Rotativa + Big wins lado a lado no desktop, empilhado no mobile */
  /* já vem do grid responsive Tailwind */

  /* Album page tabs: scroll horizontal em vez de 5 colunas apertadas */
  .album-page-tab {
    min-width: 80px;
    min-height: 64px;
    flex-shrink: 0;
  }

  /* Bottom nav: textos menores */
  nav.fixed .text-2xl { font-size: 1.25rem !important; }
  nav.fixed div.text-\\[10px\\] { font-size: 9px !important; }

  /* Modal */
  .modal { padding: 1rem !important; max-width: 95vw !important; }

  /* Admin sidebar: vira topo em mobile */
  .admin-sidebar {
    width: 100% !important;
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .admin-sidebar nav {
    display: flex;
    overflow-x: auto;
    padding: 0 8px;
  }
  .admin-nav-link {
    white-space: nowrap;
    padding: 8px 12px;
    border-left: none !important;
    border-bottom: 3px solid transparent;
  }
  .admin-nav-link.active {
    border-bottom-color: #10b981;
    border-left-color: transparent !important;
  }
  .flex.min-h-screen { flex-direction: column; }

  /* Tabelas admin: scroll horizontal */
  .admin-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Coleções: 2 colunas em mobile (não 5) */
  #collections-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Tablet: 3 colunas pra coleções */
@media (min-width: 641px) and (max-width: 768px) {
  #collections-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Garante que botoes não fiquem cortados */
button { min-height: 32px; }

/* object-position unificado — imagens já são portrait 600x900 */

/* =====================================================
   ALBUM REDESIGN - estilo Panini com cadeado
===================================================== */
.album-progress-card {
  background: linear-gradient(135deg, #064e3b 0%, #052e16 100%);
  border: 2px solid #10b981;
  border-radius: 16px;
  padding: 16px;
  color: white;
}
.album-progress-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 6px solid rgba(16,185,129,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
.album-progress-ring-fill {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 6px solid #10b981;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(45deg);
}

.album-tabs {
  display: flex;
  gap: 4px;
  background: rgba(0,0,0,0.3);
  padding: 4px;
  border-radius: 12px;
}
.album-tab {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  color: #94a3b8;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.album-tab.active {
  background: #10b981;
  color: white;
}

.album-card-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 2px dashed rgba(251,191,36,0.45);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(251,191,36,0.10), transparent 65%),
    linear-gradient(160deg, #0b1220 0%, #1f2937 55%, #0b1220 100%);
  aspect-ratio: 3 / 4.4;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.album-card-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
}
.album-card-frame.owned {
  border-style: solid;
  border-color: #fbbf24;
  box-shadow:
    0 4px 14px rgba(251,191,36,0.18),
    inset 0 0 0 1px rgba(251,191,36,0.35);
}
.album-card-frame.owned:hover {
  box-shadow:
    0 10px 26px rgba(251,191,36,0.28),
    inset 0 0 0 1px rgba(251,191,36,0.5);
}
.album-card-frame.locked {
  background:
    linear-gradient(160deg, #1f2937 0%, #111827 60%, #0b1220 100%);
  border-color: rgba(148,163,184,0.35);
}
.album-card-frame.locked .album-card-img {
  filter: grayscale(1) brightness(0.45);
  opacity: 0.85;
}
.album-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  box-sizing: border-box;
}
.album-card-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: rgba(255,255,255,0.95);
  background: rgba(0,0,0,0.55);
  border-radius: 999px;
  backdrop-filter: blur(3px);
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  z-index: 2;
}
.album-card-qty-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #10b981;
  color: white;
  font-weight: 900;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  z-index: 2;
}
.album-bottom-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78) 60%);
  padding: 10px 4px 3px;
  text-align: center;
  font-size: 9px;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 1px;
  pointer-events: none;
  text-transform: uppercase;
}

.coin-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.4);
  padding: 4px 10px;
  border-radius: 999px;
  color: #fbbf24;
  font-weight: 800;
  font-size: 12px;
}

/* =====================================================
   PACK OPEN ANIMATION (portada do projeto antigo)
===================================================== */
 * BUY PACK FLOW - Modal de confirmacao + animacao de abertura + resultado
 * ============================================ */

/* === FASE 1: CONFIRMACAO === */
.pack-confirm-img {
  width: 140px;
  height: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 24px rgba(250, 204, 21, 0.4));
  animation: pack-confirm-float 3s ease-in-out infinite;
}
@keyframes pack-confirm-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}

/* === FASE 2: ANIMACAO DE ABERTURA === */
.pack-open-stage {
  position: relative;
  width: 100%;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* raios dourados de fundo girando */
.pack-open-rays {
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(250, 204, 21, 0.15) 10deg, transparent 20deg,
      transparent 60deg, rgba(250, 204, 21, 0.2) 70deg, transparent 80deg,
      transparent 120deg, rgba(250, 204, 21, 0.15) 130deg, transparent 140deg,
      transparent 180deg, rgba(250, 204, 21, 0.2) 190deg, transparent 200deg,
      transparent 240deg, rgba(250, 204, 21, 0.15) 250deg, transparent 260deg,
      transparent 300deg, rgba(250, 204, 21, 0.2) 310deg, transparent 320deg);
  animation: rays-spin 12s linear infinite;
  opacity: 0.6;
}
@keyframes rays-spin {
  to { transform: rotate(360deg); }
}

/* glow central */
.pack-open-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.55) 0%, rgba(250, 204, 21, 0.15) 40%, transparent 70%);
  animation: glow-pulse 1.6s ease-in-out infinite;
  z-index: 1;
}
@keyframes glow-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  50%      { transform: scale(1.15); opacity: 0.85; }
}

/* pacote no centro - aparece com shake */
.pack-open-pack-wrap {
  position: relative;
  width: 160px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  animation: pack-arrive 0.4s ease-out, pack-shake 0.6s ease-in-out 0.4s 2;
}
.pack-open-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 12px 40px rgba(250, 204, 21, 0.7)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
}
/* SPRITE 3 FRAMES: fechado (visivel inicialmente), meio (transicao), rasgado (climax).
 * Tres imagens empilhadas (position absolute), controladas por opacity + classes do stage. */
.pack-open-img-closed,
.pack-open-img-mid,
.pack-open-img-opened {
  position: absolute;
  top: 0; left: 0;
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.pack-open-img-mid,
.pack-open-img-opened {
  opacity: 0;
}
.pack-open-img-mid    { transform: scale(1.02); }
.pack-open-img-opened { transform: scale(1.04); }

/* MEIO: closed → mid */
.pack-open-stage.mid .pack-open-img-closed { opacity: 0; }
.pack-open-stage.mid .pack-open-img-mid {
  opacity: 1;
  transform: scale(1);
  animation: pack-rip-flash 0.25s ease-out;
}

/* RASGADO: mid → opened (ou closed → opened se nao tem mid) */
.pack-open-stage.opening .pack-open-img-closed,
.pack-open-stage.opening .pack-open-img-mid {
  opacity: 0;
}
.pack-open-stage.opening .pack-open-img-opened {
  opacity: 1;
  transform: scale(1);
  animation: pack-rip-flash 0.35s ease-out;
}

/* flash branco no momento de cada transicao */
@keyframes pack-rip-flash {
  0%   { filter: brightness(2.2) drop-shadow(0 0 28px white); }
  100% { filter: drop-shadow(0 12px 40px rgba(250, 204, 21, 0.7)); }
}
@keyframes pack-arrive {
  0%   { transform: scale(0.3) rotate(-180deg); opacity: 0; }
  100% { transform: scale(1)   rotate(0);       opacity: 1; }
}
@keyframes pack-shake {
  0%, 100% { transform: translateX(0)    rotate(0); }
  20%      { transform: translateX(-10px) rotate(-5deg); }
  40%      { transform: translateX(10px)  rotate(5deg); }
  60%      { transform: translateX(-8px)  rotate(-3deg); }
  80%      { transform: translateX(8px)   rotate(3deg); }
}

/* explode: scale + rotate + fade. Glow flasha branco */
.pack-open-stage.exploding .pack-open-pack-wrap {
  animation: pack-explode 0.7s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}
@keyframes pack-explode {
  0%   { transform: scale(1)   rotate(0);    opacity: 1; filter: brightness(1); }
  35%  { transform: scale(1.5) rotate(15deg); opacity: 1; filter: brightness(3); }
  65%  { transform: scale(2)   rotate(40deg); opacity: 0.5; filter: brightness(5); }
  100% { transform: scale(0.1) rotate(360deg); opacity: 0; }
}
.pack-open-stage.exploding .pack-open-glow {
  animation: glow-explode 0.7s ease-out forwards;
}
@keyframes glow-explode {
  0%   { transform: scale(1);   opacity: 0.7; background: radial-gradient(circle, rgba(250, 204, 21, 0.55), transparent 70%); }
  40%  { transform: scale(2.5); opacity: 1;   background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(250, 204, 21, 0.5) 40%, transparent 70%); }
  100% { transform: scale(4);   opacity: 0; }
}

/* sparkles brilhantes em volta */
.pack-open-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 10px white, 0 0 20px rgba(250, 204, 21, 0.8);
  z-index: 4;
  animation: sparkle-twinkle 1.4s ease-in-out infinite;
}
.pack-open-sparkle-1 { top: 18%; left: 22%; animation-delay: 0s; }
.pack-open-sparkle-2 { top: 28%; right: 20%; animation-delay: 0.3s; }
.pack-open-sparkle-3 { bottom: 22%; left: 18%; animation-delay: 0.6s; }
.pack-open-sparkle-4 { bottom: 30%; right: 24%; animation-delay: 0.9s; }
.pack-open-sparkle-5 { top: 50%; left: 12%; animation-delay: 1.1s; }
@keyframes sparkle-twinkle {
  0%, 100% { transform: scale(0.3); opacity: 0.3; }
  50%      { transform: scale(1.4); opacity: 1; }
}

.pack-open-label {
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(250, 204, 21, 0.85);
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.6);
  animation: label-pulse 0.8s ease-in-out infinite;
}
@keyframes label-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.pack-open-stage.exploding .pack-open-label {
  display: none;
}

/* === FASE 3: RESULTADO. Cards aparecem em escala+fade com delay escalonado === */
.pack-result-card {
  opacity: 0;
  animation: card-reveal 0.5s ease-out forwards;
}
.pack-result-card-inner {
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.4));
}
@keyframes card-reveal {
  0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); filter: drop-shadow(0 0 0 transparent); }
  60%  { opacity: 1; transform: scale(1.12) rotate(3deg); }
  100% { opacity: 1; transform: scale(1)    rotate(0); }
}

/* ============================================
 * PACK PRODUCT CARD - card de produto vertical (Loja + Compre seu pacote)
 * Imagem grande em cima, titulo + botao embaixo. Hover effect dourado.
 * ============================================ */
.pack-product-card {
  background:
    radial-gradient(ellipse at top, rgba(250, 204, 21, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(14, 61, 37, 0.6), rgba(10, 46, 28, 0.6));
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.pack-product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(250, 204, 21, 0.55);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(250, 204, 21, 0.3),
    0 0 40px rgba(250, 204, 21, 0.18);
}
.pack-product-image {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse at center, rgba(250, 204, 21, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(5, 29, 18, 0.4), rgba(5, 29, 18, 0.7));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  overflow: hidden;
}
.pack-product-img-tag {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease-out;
}
.pack-product-card:hover .pack-product-img-tag {
  transform: scale(1.06) rotate(-1deg);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 12px rgba(250, 204, 21, 0.3));
}
.pack-product-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: linear-gradient(135deg, #facc15, #f59e0b);
  color: #051d12;
  font-size: 0.6rem;
  font-weight: 900;


/* =====================================================
   AJUSTES FINOS - aproximar conteúdo, packs maiores, big wins
===================================================== */

/* Conteúdo principal mais próximo do menu (era max-w-7xl com p-4) */
@media (min-width: 641px) {
  main.max-w-7xl,
  body > header .max-w-7xl,
  main {
    max-width: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body > header .max-w-7xl {
    margin: 0 !important;
  }
}

/* PACK CARDS maiores - imagem do pack ocupa mais espaço */
.pack-img-wrapper {
  width: 140px !important;
  height: 200px !important;
}
.pack-real-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.4)) !important;
}
.pack-card-art {
  width: 140px !important;
  height: 190px !important;
}
.pack-card-art-number {
  font-size: 52px !important;
}
.pack-card-art-label {
  font-size: 13px !important;
}

/* PACK CARDS no grid: padding maior + min-height */
#packs-grid > div {
  padding: 18px !important;
  min-height: 220px;
  gap: 18px !important;
}
#packs-grid .text-lg {
  font-size: 22px !important;
}
#packs-grid button {
  font-size: 18px !important;
  padding: 14px 0 !important;
}

/* ÚLTIMAS GRANDES FIGURINHAS - card maior + responsivo */
#big-wins {
  gap: 12px !important;
}
#big-wins > div {
  padding: 12px !important;
}
#big-wins .card-thumb {
  max-width: none !important;
}
#big-wins .text-\\[10px\\] { font-size: 12px !important; }
#big-wins .text-\\[9px\\] { font-size: 11px !important; }
#big-wins .text-sm { font-size: 16px !important; }

/* Section que contém Rotativa + Big wins: dá mais altura */
.grid.md\\:grid-cols-12 > .md\\:col-span-7 {
  min-height: 380px;
}

/* MOBILE: pack cards empilhados verticalmente sem cortar a imagem */
@media (max-width: 640px) {
  .pack-img-wrapper { width: 110px !important; height: 155px !important; }
  .pack-card-art { width: 110px !important; height: 150px !important; }
  .pack-card-art-number { font-size: 40px !important; }
  #big-wins { grid-template-columns: repeat(2, 1fr) !important; }
}

/* TABLET (641-1024): big-wins 4 colunas grandes */
@media (min-width: 641px) and (max-width: 1024px) {
  #big-wins > div { padding: 10px !important; }
}


/* =====================================================
   TEMA DARK REALMENTE PRETO + PACKS GIGANTES + BOTÕES POLIDOS
===================================================== */

/* Substitui paleta dark de azul pra preto-com-sutileza */
[data-theme="dark"] {
  --bg-page:    #0a0a0a !important;
  --bg-card:    #141414 !important;
  --bg-card-2:  #1f1f1f !important;
  --bg-header:  #0a0a0a !important;
  --bg-nav:     #0a0a0a !important;
  --border:     #2a2a2a !important;
  --border-2:   #3a3a3a !important;
  --text:       #f5f5f5 !important;
  --text-2:     #d4d4d4 !important;
  --text-muted: #8a8a8a !important;
  --hero-from:  #141414 !important;
  --hero-mid:   #0e0e0e !important;
  --hero-to:    #0a1a0e !important;
}

[data-theme="dark"] body { background: #0a0a0a !important; color: #f5f5f5 !important; }
[data-theme="dark"] header { background: #0a0a0a !important; border-bottom-color: #2a2a2a !important; }
[data-theme="dark"] #sidebar { background: #0a0a0a !important; border-top-color: #2a2a2a !important; }
[data-theme="dark"] .bg-white { background: #141414 !important; }
[data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-gray-100 { background: #1f1f1f !important; }
[data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-gray-300 { border-color: #2a2a2a !important; }
[data-theme="dark"] .hero-section {
  background: linear-gradient(135deg, #141414 0%, #0a0a0a 50%, #141414 100%) !important;
  border-color: #2a2a2a !important;
}

/* PACKS COM IMAGEM GIGANTE */
.pack-img-wrapper {
  width: 180px !important;
  height: 250px !important;
}
.pack-real-img {
  filter: drop-shadow(0 16px 36px rgba(0,0,0,0.55)) !important;
  transition: transform 0.25s !important;
}
#packs-grid > div:hover .pack-real-img {
  transform: scale(1.05) translateY(-4px);
}

/* CARD do pack: melhor padding + glow no hover */
#packs-grid > div {
  padding: 22px !important;
  min-height: 280px !important;
  transition: all 0.25s !important;
  position: relative;
  overflow: hidden;
}
#packs-grid > div:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.15) !important;
}
[data-theme="dark"] #packs-grid > div:hover {
  box-shadow: 0 16px 32px rgba(0,0,0,0.5) !important;
}

/* BOTÕES DE PREÇO BONITOS */
#packs-grid button[onclick^="buyPack"] {
  font-family: 'Oswald', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  letter-spacing: 2px !important;
  padding: 16px 0 !important;
  border-radius: 14px !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all 0.2s !important;
  position: relative;
  overflow: hidden;
}
#packs-grid button[onclick^="buyPack"]::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.6s;
}
#packs-grid button[onclick^="buyPack"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}
#packs-grid button[onclick^="buyPack"]:hover::before { left: 100%; }

/* Gradients refinados por cor */
#packs-grid button.bg-green-500 {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
}
#packs-grid button.bg-blue-500 {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
}
#packs-grid button.bg-purple-500 {
  background: linear-gradient(180deg, #a855f7 0%, #7c3aed 100%) !important;
}

/* Title color brighter no dark */
[data-theme="dark"] #packs-grid .text-green-600 { color: #34d399 !important; }
[data-theme="dark"] #packs-grid .text-blue-600 { color: #60a5fa !important; }
[data-theme="dark"] #packs-grid .text-purple-600 { color: #c084fc !important; }

/* MOBILE: pack maior também */
@media (max-width: 640px) {
  .pack-img-wrapper { width: 130px !important; height: 180px !important; }
  #packs-grid > div { padding: 14px !important; min-height: 200px !important; }
  #packs-grid button[onclick^="buyPack"] { font-size: 20px !important; padding: 12px 0 !important; }
}



/* OVERRIDE FINAL DARK: garante preto em TODO container */
[data-theme="dark"] main,
[data-theme="dark"] #view-home,
[data-theme="dark"] #view-album,
[data-theme="dark"] #view-marketplace,
[data-theme="dark"] #view-perfil { background: #0a0a0a !important; }

[data-theme="dark"] .hero-section,
[data-theme="dark"] section,
[data-theme="dark"] .rotativa-card,
[data-theme="dark"] .gol-brasil-banner {
  background: #141414 !important;
  border-color: #2a2a2a !important;
}

/* Pack img wrapper - regra final com max specificity */
#packs-grid > div .pack-img-wrapper {
  width: 180px !important;
  height: 250px !important;
}
#packs-grid > div .pack-real-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: drop-shadow(0 16px 36px rgba(0,0,0,0.55)) !important;
}
@media (max-width: 640px) {
  #packs-grid > div .pack-img-wrapper {
    width: 130px !important;
    height: 180px !important;
  }
}

/* =====================================================
   FIX FINAL DARK - pintar html + tudo de preto
===================================================== */
html { background: #0a0a0a !important; }
[data-theme="dark"] html,
[data-theme="dark"] body { background: #0a0a0a !important; }

/* Tudo que tinha classe Tailwind cinza/branco vira preto */
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-gray-200,
[data-theme="dark"] .bg-white { background-color: #141414 !important; }
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] .bg-slate-200,
[data-theme="dark"] .bg-blue-50 { background-color: #141414 !important; }

/* main e wrappers principais ficam transparent (deixa o body preto aparecer) */
[data-theme="dark"] main { background: transparent !important; }

/* Hero, cards, sections — vão pro cinza-preto pra contraste com o body */
[data-theme="dark"] section,
[data-theme="dark"] .hero-section,
[data-theme="dark"] .rotativa-card,
[data-theme="dark"] .gol-brasil-banner,
[data-theme="dark"] .trade-card,
[data-theme="dark"] .album-progress-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] [class*="border-gray"] { background: #141414 !important; border-color: #2a2a2a !important; }

/* texto branco em tudo que era preto */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-black,
[data-theme="dark"] .text-slate-900 { color: #f5f5f5 !important; }

/* =====================================================
   ALBUM CARDS GRID — clamp em telas grandes
===================================================== */
.album-cards-grid {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 380px) {
  .album-cards-grid { gap: 8px !important; }
  .album-card-img { padding: 4px 4px 14px !important; }
  .album-bottom-tag { font-size: 8px; padding: 8px 3px 2px; }
  .album-card-qty-badge { font-size: 10px; padding: 1px 6px; }
}

/* Dark theme: frame mantém o gradient escuro (não vira branco com .bg-white override) */
[data-theme="dark"] .album-card-frame {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(251,191,36,0.12), transparent 65%),
    linear-gradient(160deg, #0a0a0a 0%, #1a1a1a 55%, #050505 100%) !important;
}
[data-theme="dark"] .album-card-frame.locked {
  background: linear-gradient(160deg, #141414 0%, #0a0a0a 100%) !important;
}

/* Trade mini-card no dark fica com fundo escuro também */
[data-theme="dark"] .trade-mini-card { background: #1a1a1a; }
[data-theme="dark"] .card-thumb { background: transparent; }

/* =====================================================
   MOBILE RESPONSIVENESS OVERHAUL (Task #13)
   Mobile-first, dvh/svh units, fluid type, safe-area insets,
   touch targets ≥ 44px. Desktop ≥1024px preserved.
===================================================== */

/* --- Foundations: prevent horizontal overflow & enable safe areas --- */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; position: relative; }
/* Belt-and-suspenders: clip any descendant that tries to push past the viewport */
@media (max-width: 1023px) {
  body > *, main, header, #sidebar, #modal-root { max-width: 100vw; }
  main, .hero-section, #view-home, #view-album, #view-marketplace, #view-perfil { overflow-x: clip; max-width: 100vw; }
  /* Any grid/section that uses md:grid-cols-12 — keep contained */
  .grid.md\:grid-cols-12 { max-width: 100%; min-width: 0; }
  .grid.md\:grid-cols-12 > * { min-width: 0; max-width: 100%; }
  /* Headers and inner wrappers cannot exceed viewport */
  header > *, main > * { max-width: 100%; min-width: 0; }
  /* SVG safety: never let an SVG without explicit size grow huge */
  svg:not([width]):not([height]) { max-width: 100%; height: auto; }
  /* Confetti/decor layers should never spill */
  .hero-bg-decor, .confetti-particles { max-width: 100%; overflow: hidden; }
}

/* Sticky header respects iOS notch */
header.sticky {
  padding-top: env(safe-area-inset-top);
}

/* Touch targets — links/buttons in nav/header pad properly on touch */
@media (hover: none) and (pointer: coarse) {
  .sb-item { min-width: 44px !important; min-height: 44px !important; }
  header button, header a { min-height: 44px; }
  #packs-grid button,
  .album-tab,
  .market-tab,
  .album-page-tab { min-height: 44px; }
}

/* Fluid typography for hero */
#hero h1 {
  font-size: clamp(1.6rem, 5.4vw, 3rem) !important;
  line-height: 1.1 !important;
}
#hero p {
  font-size: clamp(0.9rem, 2.4vw, 1.125rem) !important;
}

/* Full-screen modals & album/pack open use dynamic viewport (no iOS chrome cut) */
.modal { max-height: 90dvh; }
@media (max-width: 640px) {
  .modal-backdrop { padding: 0.5rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); align-items: flex-end; }
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    padding: 1rem !important;
  }
}

/* Pack open stage scales for mobile */
.pack-open-stage { height: clamp(280px, 60dvh, 420px); }

/* --- HOME: hero cards stage --- */
@media (max-width: 480px) {
  .hero-cards-stage { gap: 6px; padding: 38px 0 4px 0; }
  .hero-card { width: 100%; }
  .hero-card-prize-value { font-size: 14px; }
  .hero-card-prize-overlay { padding: 5px 10px; }
  .hero-card-prize-label { font-size: 8px; letter-spacing: 1.5px; }
}

/* --- HOME: pack grid layout (≥140px wide cards on mobile) --- */
#packs-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 640px) {
  #packs-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  #packs-grid > div { padding: 14px !important; min-height: 0 !important; gap: 14px !important; }
  #packs-grid .text-lg { font-size: 18px !important; }
  #packs-grid > div .pack-img-wrapper { width: 120px !important; height: 168px !important; }
}

/* --- HOME: Rotativa layout — mobile-first --- */
/* rotativa-inner/info removed — replaced with inline styles in HTML */

/* --- HOME: collections grid: bigger thumbs on mobile, fluid on tablet+ --- */
#collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
@media (min-width: 768px) {
  #collections-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
}

/* --- ALBUM: cards grid — 3 cols on mobile (≥~110px wide), 4 sm, 5 md, 6 lg+ --- */
.album-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}
@media (min-width: 480px) {
  .album-cards-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; }
}
@media (min-width: 768px) {
  .album-cards-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 16px !important; }
}
@media (min-width: 1024px) {
  .album-cards-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 18px !important; }
}
@media (min-width: 1280px) {
  .album-cards-grid { grid-template-columns: repeat(7, 1fr) !important; gap: 20px !important; }
}

/* Album page tabs: horizontal scroll on small screens, no cramping */
@media (max-width: 640px) {
  .album-page-tab { padding: 6px 4px; min-height: 56px; }
  .album-page-tab .text-2xl { font-size: 1.1rem !important; }
}

/* Album sub-tabs (Álbum / Acervo / Duplicadas): keep readable on narrow phones */
@media (max-width: 380px) {
  .album-tab { padding: 8px 6px; font-size: 11px; }
}

/* --- HEADER: balance bar shows on mobile too (compact) --- */
@media (max-width: 768px) {
  #balance-bar { display: flex !important; padding: 4px 10px !important; gap: 6px !important; }
  #balance-bar svg { width: 18px !important; height: 18px !important; }
  #balance-bar #balance-display { font-size: 13px !important; }
  #balance-bar > div > div:first-child { display: none; }
  #balance-bar button { width: 32px !important; height: 32px !important; font-size: 16px !important; margin-left: 6px !important; }
  header .brand-logo { height: 36px; padding: 4px 8px; max-width: 160px; }
}
/* Compact header on small mobile to prevent horizontal overflow */
@media (max-width: 480px) {
  header .max-w-7xl { gap: 6px !important; padding-left: 8px !important; padding-right: 8px !important; flex-wrap: nowrap !important; min-width: 0; }
  header .max-w-7xl > * { min-width: 0; }
  header .brand-logo { height: 32px; padding: 3px 6px; max-width: 120px; }
  #balance-bar { display: none !important; }
  #theme-toggle { width: 34px !important; height: 34px !important; padding: 6px !important; flex-shrink: 0; }
  #theme-toggle svg { width: 18px !important; height: 18px !important; }
  #user-area { gap: 6px !important; flex-shrink: 0; }
  #user-area > div.w-10 { width: 32px !important; height: 32px !important; font-size: 13px !important; flex-shrink: 0; }
  #user-area button { font-size: 11px !important; padding: 4px 6px !important; }
}

/* --- TRADE / MARKETPLACE: mini-cards scale on mobile --- */
@media (max-width: 480px) {
  .trade-mini-card { width: 64px; height: 90px; }
  .trade-arrow { font-size: 18px; margin: 0 4px; }
  .market-tab { padding: 10px 14px; font-size: 12px; }
}

/* --- ADMIN/AFFILIATE pages — table scroll containers, inputs full-width --- */
@media (max-width: 640px) {
  .admin-table { display: block; overflow-x: auto; white-space: nowrap; }
  input, select, textarea { width: 100%; box-sizing: border-box; min-height: 44px; }
  .aff-stat { padding: 12px; }
  .aff-stat-value { font-size: 18px; }
}

/* --- Bottom nav: ensure tap items are 44px on iOS, respect notch already on nav itself --- */
#sidebar .sb-item { min-width: 44px; min-height: 44px; }

/* --- Pack-result reveal grid: 2 cols on phone, 3 on tablet+ --- */
@media (max-width: 480px) {
  .modal .grid.grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}

/* --- Final defensive: prevent any wide image from busting layout --- */
img { max-width: 100%; }

/* =====================================================
   DESKTOP RESPONSIVENESS OVERHAUL
   Fluid typography, breathable spacing, and grids that
   scale smoothly from 1024px to 1920px+ without leaving
   awkward gaps or oversized text.
===================================================== */

/* --- Container: let content breathe on wide screens --- */
@media (min-width: 1280px) {
  main.max-w-7xl { max-width: min(96vw, 1360px) !important; }
}
@media (min-width: 1536px) {
  main.max-w-7xl { max-width: min(92vw, 1480px) !important; }
}
@media (min-width: 1920px) {
  main.max-w-7xl { max-width: 1560px !important; }
}

/* --- Header: scale logo and balance bar cleanly on wide --- */
@media (min-width: 1024px) {
  header .max-w-7xl { padding-top: 14px; padding-bottom: 14px; }
  header .brand-logo { height: clamp(44px, 3.4vw, 56px); }
  #balance-bar { padding: 8px 18px; }
  #balance-bar #balance-display { font-size: clamp(1rem, 1.3vw, 1.25rem); }
}

/* --- Hero: fluid typography that grows AND caps cleanly on large screens --- */
@media (min-width: 769px) {
  #hero h1 {
    font-size: clamp(2rem, 3.4vw + 0.5rem, 3.75rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em;
  }
  #hero p {
    font-size: clamp(1rem, 0.9vw + 0.7rem, 1.25rem) !important;
    max-width: 56ch;
  }
  #hero {
    padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 3rem) clamp(0.75rem, 1.5vw, 1.25rem) !important;
  }
}
@media (min-width: 1440px) {
  #hero h1 { font-size: clamp(3rem, 2.6vw + 1rem, 4.25rem) !important; }
}

.hero-deposit-btn {
  font-size: clamp(0.95rem, 0.4vw + 0.8rem, 1.1rem);
}

/* --- Section headings: fluid + consistent vertical rhythm --- */
@media (min-width: 1024px) {
  #view-home > section { margin-bottom: clamp(1.5rem, 2.2vw, 2.5rem); }
  #view-home > section > h2,
  #view-home > section .text-lg.font-black {
    font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.35rem) !important;
    margin-bottom: clamp(0.75rem, 1vw, 1.25rem) !important;
  }
}

/* --- Packs grid: fluid columns, never tiny, never gappy --- */
@media (min-width: 1024px) {
  #packs-grid {
    grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 18vw, 280px), 1fr)) !important;
    gap: clamp(14px, 1.4vw, 22px) !important;
  }
  #packs-grid > div { padding: clamp(14px, 1.2vw, 22px) !important; }
  #packs-grid .pack-img-wrapper {
    width: clamp(140px, 12vw, 200px) !important;
    height: clamp(196px, 17vw, 280px) !important;
  }
}

/* --- Rotativa + Big Wins row: spacing + readable text on wide --- */
@media (min-width: 1024px) {
  #view-home section.grid.md\:grid-cols-12 { gap: clamp(1rem, 1.6vw, 1.75rem) !important; }
  #view-home section.grid.md\:grid-cols-12 > div { padding: clamp(1rem, 1.4vw, 1.5rem) !important; }
  #rotativa-jackpot { font-size: clamp(1.5rem, 1.4vw + 0.5rem, 2rem) !important; }
  #big-wins { gap: clamp(8px, 0.8vw, 14px) !important; }
}

/* --- Collections grid: fluid 5→6 cols on wide screens --- */
@media (min-width: 1024px) {
  #collections-grid {
    grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 14vw, 220px), 1fr)) !important;
    gap: clamp(14px, 1.2vw, 20px) !important;
  }
}

/* --- Album cards: scale up gracefully past 1280px without becoming huge --- */
@media (min-width: 1280px) {
  .album-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 9.5vw, 170px), 1fr)) !important;
    gap: clamp(16px, 1.2vw, 22px) !important;
  }
}

/* --- Modals on desktop: comfortable max-width + readable body text --- */
@media (min-width: 1024px) {
  .modal {
    max-width: min(560px, 92vw) !important;
    padding: clamp(1.25rem, 1.6vw, 2rem) !important;
  }
  .modal h2 { font-size: clamp(1.25rem, 0.6vw + 1rem, 1.6rem) !important; }
}

/* --- Defensive: no horizontal scroll at any width --- */
@media (min-width: 1024px) {
  body, main { overflow-x: clip; }
}

/* =====================================================
   TASK #14 — Mobile fine-tuning (hero, packs, big wins)
   Hard overrides for ≤768px; desktop ≥1024px untouched.
===================================================== */

/* --- 1) Eliminate horizontal scroll at the root --- */
@media (max-width: 1023px) {
  html, body { overflow-x: clip !important; }
  #view-home, #view-home > section { max-width: 100%; min-width: 0; overflow-x: clip; }
  #view-home .grid > * { min-width: 0; max-width: 100%; }
  /* Hero internals never push past their column */
  #hero, #hero * { min-width: 0; }
  .hero-section { overflow-x: clip; }
  .hero-bg-decor, .confetti-particles { left: 0; right: 0; width: 100%; }
  /* Badge nowrap must not push the parent wider */
  .hero-card-prize-overlay { max-width: calc(100% + 30px); }
}

/* --- 2) Hero: tighter section padding so cards have room --- */
@media (max-width: 640px) {
  #hero {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 18px !important;
  }
}
@media (max-width: 380px) {
  #hero { padding-left: 10px !important; padding-right: 10px !important; }
}

/* --- Desktop: figurinhas do hero maiores --- */
@media (min-width: 768px) {
  .hero-cards-stage {
    max-height: 280px !important;
    overflow: visible !important;
    padding: 32px 0 4px 0 !important;
    gap: 12px !important;
  }
  .hero-card { max-width: 150px !important; }
  .hero-card:nth-child(2) { max-width: 170px !important; transform: translateY(0) scale(1.08) !important; }
  .hero-card:nth-child(1), .hero-card:nth-child(3) { transform: translateY(16px) !important; }
  .hero-card-prize-overlay { padding: 4px 12px !important; }
  .hero-card-prize-label { font-size: 8px !important; letter-spacing: 1.5px !important; }
  .hero-card-prize-value { font-size: 14px !important; }
}
@media (min-width: 1024px) {
  .hero-cards-stage {
    max-height: 400px !important;
    overflow: visible !important;
    gap: 20px !important;
    padding: 40px 0 4px 0 !important;
  }
  .hero-card { max-width: 220px !important; width: 100% !important; }
  .hero-card:nth-child(2) { max-width: 250px !important; transform: translateY(0) scale(1.08) !important; }
  .hero-card:nth-child(1), .hero-card:nth-child(3) { transform: translateY(22px) !important; }
  .hero-card-prize-value { font-size: 18px !important; }
  .hero-card-prize-label { font-size: 9px !important; }
  .hero-card-prize-overlay { padding: 5px 14px !important; }
}

/* --- 3) Hero cards stage: bigger cards, smaller top reserve --- */
@media (max-width: 640px) {
  .hero-cards-stage {
    gap: 10px;
    padding: 34px 0 4px 0;
  }
  .hero-card-img { aspect-ratio: 3 / 4.2; }
  .hero-card:nth-child(2) { transform: translateY(0) scale(1.06); }
  .hero-card:nth-child(1) { transform: translateY(10px); }
  .hero-card:nth-child(3) { transform: translateY(10px); }
}
@media (max-width: 480px) {
  .hero-cards-stage { gap: 8px; padding: 30px 0 4px 0; }
  .hero-card:nth-child(2) { transform: translateY(0) scale(1.04); }
  .hero-card:nth-child(1) { transform: translateY(8px); }
  .hero-card:nth-child(3) { transform: translateY(8px); }
}

/* --- 4) Hero prize badge: proportional to card --- */
@media (max-width: 640px) {
  .hero-card-prize-overlay {
    padding: 3px 9px !important;
    border-radius: 10px !important;
    border-width: 1px !important;
    gap: 0 !important;
    bottom: calc(100% - 4px) !important;
    box-shadow:
      0 0 0 1px rgba(34, 197, 94, 0.25),
      0 0 10px rgba(34, 197, 94, 0.55),
      0 4px 10px rgba(0, 0, 0, 0.3) !important;
  }
  .hero-card-prize-label { font-size: 7px !important; letter-spacing: 1px !important; }
  .hero-card-prize-value { font-size: 12px !important; }
  .hero-card:nth-child(2) .hero-card-prize-overlay {
    transform: translateX(-50%) scale(1) !important;
  }
}
@media (max-width: 380px) {
  .hero-card-prize-overlay { padding: 2px 7px !important; }
  .hero-card-prize-value { font-size: 11px !important; }
  .hero-card-prize-label { font-size: 6px !important; letter-spacing: 0.8px !important; }
}

/* --- 5) Packs: legible typography on mobile --- */
@media (max-width: 640px) {
  #packs-grid > div { padding: 16px !important; gap: 16px !important; }
  #packs-grid .font-black.text-lg { font-size: 20px !important; line-height: 1.15 !important; }
  #packs-grid .text-xs { font-size: 13px !important; line-height: 1.45 !important; }
  #packs-grid .text-xs.text-gray-500 { font-size: 12px !important; letter-spacing: 0.5px; }
  #packs-grid button[onclick^="buyPack"] {
    font-size: 22px !important;
    padding: 14px 0 !important;
    letter-spacing: 1.5px !important;
  }
}
@media (max-width: 380px) {
  #packs-grid > div { padding: 14px !important; gap: 12px !important; }
  #packs-grid > div .pack-img-wrapper { width: 108px !important; height: 152px !important; }
  #packs-grid .font-black.text-lg { font-size: 18px !important; }
}

/* --- 6) Big Wins: 2 columns up to 767px, larger thumbs + text --- */
@media (max-width: 767px) {
  #big-wins {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  #big-wins > div {
    padding: 12px !important;
    min-width: 0;
    background: rgba(0,0,0,0.02);
    border-radius: 14px;
  }
  [data-theme="dark"] #big-wins > div { background: rgba(255,255,255,0.03); }
  #big-wins .card-thumb {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 3 / 4.2 !important;
  }
  #big-wins .card-thumb-stand-price { font-size: 14px !important; padding: 4px 10px !important; }
  #big-wins .text-\[10px\] { font-size: 13px !important; }
  #big-wins .text-\[9px\]  { font-size: 11px !important; }
  #big-wins .w-5.h-5 { width: 22px !important; height: 22px !important; }
}

/* --- 7) Big Wins section card: don't force min-height on mobile --- */
@media (max-width: 1023px) {
  .grid.md\:grid-cols-12 > .md\:col-span-7 { min-height: 0 !important; }
}

/* =====================================================
   PACK GRID — layout vertical desktop (3 packs)
===================================================== */
.pack-grid-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #1a1a2e;
  border: 1.5px solid #2a2a3e;
  border-radius: 20px;
  padding: 28px 24px 24px;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.pack-grid-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.45);
}
.pack-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}
.pack-grid-card .pack-img-wrapper {
  width: 130px !important;
  height: 185px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 16px;
  transition: transform 0.25s;
}
.pack-grid-card:hover .pack-img-wrapper {
  transform: scale(1.06) translateY(-4px);
}
.pack-grid-card .pack-real-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 16px 36px rgba(0,0,0,0.6)) !important;
}
.pack-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.pack-name {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.1;
  margin-bottom: 4px;
}
.pack-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #6b7280;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pack-sub {
  font-size: 13px;
  font-weight: 600;
  color: #9ca3af;
  margin-bottom: 3px;
}
.pack-desc {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 18px;
  line-height: 1.5;
}
.pack-buy-btn {
  width: 100%;
  color: #fff !important;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 14px 0;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.18s, box-shadow 0.18s;
  position: relative;
  overflow: hidden;
}
.pack-buy-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}
.pack-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.pack-buy-btn:hover::after { left: 100%; }

/* Mobile: horizontal layout */
@media (max-width: 639px) {
  .pack-grid-card {
    flex-direction: row;
    align-items: flex-start;
    padding: 14px;
    gap: 14px;
    border-radius: 16px;
  }
  .pack-grid-card .pack-img-wrapper {
    width: 100px !important;
    height: 140px !important;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .pack-info { align-items: flex-start; text-align: left; }
  .pack-name { font-size: 18px; }
  .pack-count { font-size: 10px; margin-bottom: 3px; }
  .pack-sub { font-size: 11px; margin-bottom: 2px; }
  .pack-desc { font-size: 10px; margin-bottom: 10px; }
  .pack-buy-btn { font-size: 18px; padding: 10px 0; border-radius: 10px; }
  .pack-badge { top: 8px; right: 8px; font-size: 8px; }
}

/* Tablet */
@media (min-width: 640px) and (max-width: 1023px) {
  .pack-grid-card .pack-img-wrapper { width: 130px !important; height: 185px !important; }
  .pack-name { font-size: 20px; }
  .pack-buy-btn { font-size: 22px; padding: 12px 0; }
}