@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@500;600;700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800;900&display=swap');

/* Instant Auth State Display to avoid landing flicker on refresh */
html.user-authenticated #auth-landing-screen { 
  display: none !important; 
}
html.user-authenticated #main-game-app { 
  display: flex !important; 
}

/* Custom Scrollbar */
::-webkit-scrollbar { 
  width: 6px; 
  height: 6px; 
}
::-webkit-scrollbar-track { 
  background: rgba(15, 23, 42, 0.6); 
}
::-webkit-scrollbar-thumb { 
  background: rgba(148, 163, 184, 0.3); 
  border-radius: 9999px; 
}
::-webkit-scrollbar-thumb:hover { 
  background: rgba(148, 163, 184, 0.6); 
}

/* Card 3D Tilt perspective */
.card-scene {
  perspective: 1000px;
}

.card-inner {
  transition: transform 0.15s ease-out, box-shadow 0.2s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Holographic and Foil overlays */
.holo-foil {
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 25%,
    rgba(255, 0, 150, 0.25) 45%,
    rgba(0, 255, 255, 0.3) 55%,
    rgba(255, 220, 0, 0.25) 70%,
    transparent 100%
  );
  background-size: 200% 200%;
  mix-blend-mode: color-dodge;
  pointer-events: none;
  animation: holoShine 4s ease infinite;
}

.mythic-shimmer {
  background: radial-gradient(circle at 50% 50%, rgba(244, 63, 94, 0.4), transparent 70%),
              repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 2px, transparent 2px, transparent 6px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

@keyframes holoShine {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(234, 179, 8, 0.4); }
  50% { box-shadow: 0 0 30px rgba(234, 179, 8, 0.8), 0 0 45px rgba(245, 158, 11, 0.5); }
}

.glow-gold {
  animation: pulseGlow 2.5s infinite;
}

@keyframes subtleOpeningImpulse {
  0% { transform: translateY(0); }
  30% { transform: translateY(2px) scale(0.995); }
  100% { transform: translateY(0) scale(1); }
}

.booster-opening-impulse {
  animation: subtleOpeningImpulse 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Authentic Pokémon-style Foil Booster Pack Silhouette Styles */
.pokemon-booster-silhouette {
  clip-path: polygon(
    0% 0%,                           /* Top Left corner */
    100% 0%,                         /* Top Right corner */
    100% 4.5%,                       /* Top Flap straight edge */
    98.5% 7.5%,                      /* Smooth gentle upper taper */
    97.5% 20%,                       /* Upper body */
    97.8% 50%,                       /* Subtle mid-pack card volume */
    97.5% 80%,                       /* Lower body */
    98.5% 92.5%,                     /* Smooth gentle lower taper */
    100% 95.5%,                      /* Bottom Flap straight edge */
    100% 100%,                       /* Bottom Right corner */
    0% 100%,                         /* Bottom Left corner */
    0% 95.5%,                        /* Bottom Flap straight edge */
    1.5% 92.5%,                      /* Smooth gentle lower taper */
    2.5% 80%,                        /* Lower body */
    2.2% 50%,                        /* Subtle mid-pack card volume */
    2.5% 20%,                        /* Upper body */
    1.5% 7.5%,                       /* Smooth gentle upper taper */
    0% 4.5%                          /* Top Flap straight edge */
  );
}

.pokemon-booster-top-cap {
  clip-path: polygon(
    0% 0%,        /* Top Left corner */
    100% 0%,      /* Top Right corner */
    100% 32%,     /* Top crimp fin straight edge */
    98.5% 55%,    /* Upper foil fold taper */
    97.5% 100%,   /* Tear line right */
    2.5% 100%,    /* Tear line left */
    1.5% 55%,     /* Upper foil fold taper */
    0% 32%        /* Top crimp fin straight edge */
  );
}

.pokemon-booster-bottom-sleeve {
  clip-path: polygon(
    2.5% 0%,      /* Tear line left */
    97.5% 0%,     /* Tear line right */
    97.5% 15%,    /* Upper body */
    97.8% 50%,    /* Mid-body card volume */
    97.5% 82%,    /* Lower body */
    98.5% 91.5%,  /* Lower foil fold taper */
    100% 95%,     /* Bottom crimp fin straight edge */
    100% 100%,    /* Bottom Right corner */
    0% 100%,      /* Bottom Left corner */
    0% 95%,       /* Bottom crimp fin straight edge */
    1.5% 91.5%,   /* Lower foil fold taper */
    2.5% 82%,     /* Lower body */
    2.2% 50%,     /* Mid-body card volume */
    2.5% 15%      /* Upper body */
  );
}

.booster-scene {
  perspective: 1000px;
}

#booster-pack-box {
  transform-style: preserve-3d;
  will-change: transform;
}

.pokemon-pack-shadow {
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 25px rgba(148, 163, 184, 0.25));
}

.booster-crimp-overlay {
  background: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.45) 0px,
    rgba(0, 0, 0, 0.45) 1px,
    rgba(255, 255, 255, 0.2) 1.5px,
    rgba(255, 255, 255, 0.35) 2.5px,
    rgba(0, 0, 0, 0.3) 3px,
    rgba(0, 0, 0, 0.45) 4px
  );
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.5), inset 0 -2px 3px rgba(0,0,0,0.5);
}

.foil-silver-rim {
  background: linear-gradient(90deg, #334155 0%, #cbd5e1 15%, #ffffff 50%, #cbd5e1 85%, #334155 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

.foil-pack-reflection {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.foil-pack-reflection::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -60%;
  width: 220%;
  height: 220%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.03) 42%,
    rgba(255, 255, 255, 0.22) 47%,
    rgba(203, 213, 225, 0.35) 50%,
    rgba(255, 255, 255, 0.22) 53%,
    rgba(255, 255, 255, 0.03) 58%,
    transparent 65%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: foilSweep 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes foilSweep {
  0% {
    transform: translateX(-100%);
  }
  35%, 100% {
    transform: translateX(100%);
  }
}

.pokemon-logo-text {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 
    -2px -2px 0 #0f172a,
     2px -2px 0 #0f172a,
    -2px  2px 0 #0f172a,
     2px  2px 0 #0f172a,
    -3px  0   0 #0f172a,
     3px  0   0 #0f172a,
     0   -3px 0 #0f172a,
     0    3px 0 #0f172a,
     0    5px 10px rgba(0, 0, 0, 0.9),
     0    0 20px rgba(255, 255, 255, 0.4);
}

.booster-crystal-shards {
  background-image: 
    linear-gradient(145deg, #1e293b 0%, #0f172a 40%, #020617 100%),
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.18) 0%, transparent 65%);
}

/* Booster Pack Tearing & Opening Physics */
@keyframes packTearOff {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
    filter: brightness(1);
  }
  25% {
    transform: translate(20px, -12px) rotate(8deg);
    filter: brightness(1.4);
    opacity: 0.95;
  }
  50% {
    transform: translate(65px, -45px) rotate(22deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(140px, -100px) rotate(35deg);
    opacity: 0;
  }
}

.pack-tear-off {
  animation: packTearOff 0.75s cubic-bezier(0.2, 0.8, 0.3, 1) forwards !important;
  transform-origin: bottom left;
}

@keyframes cardsRise {
  0% {
    transform: translate(-50%, 0px) scale(0.92);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -115px) scale(1.05);
    opacity: 1;
  }
}

.pack-cards-rise {
  animation: cardsRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes lightBurst {
  0% {
    height: 0px;
    opacity: 0;
  }
  30% {
    height: 160px;
    opacity: 1;
  }
  100% {
    height: 260px;
    opacity: 0;
  }
}

.booster-light-burst {
  animation: lightBurst 0.7s ease-out forwards !important;
}

/* Mobile Touch & Safe Area Support */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
}

.safe-area-bottom {
  padding-bottom: calc(0.5rem + var(--sab));
}

.safe-area-top {
  padding-top: calc(0.5rem + var(--sat));
}

/* Hide scrollbar on touch scroll containers */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================
   CARD RARITY BACKGROUNDS & LIGHTING THEMES
   ========================================== */

/* 1. Commune (Ardoise & Acier Sobre) */
.card-bg-commune, .card-bg-common {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 45%, #090d16 100%) !important;
}
.border-commune, .border-common { 
  border-color: #64748b !important; 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
}

/* 2. Rare (Saphir Céleste & Azure Électrique) */
.card-bg-rare {
  background: linear-gradient(180deg, #0c2d48 0%, #07192f 45%, #050f1d 100%) !important;
}
.border-rare { 
  border-color: #38bdf8 !important; 
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.4), inset 0 0 12px rgba(56, 189, 248, 0.15) !important; 
}
.rare-ambient-glow {
  background: radial-gradient(ellipse at 50% 15%, rgba(56, 189, 248, 0.2) 0%, transparent 65%);
  pointer-events: none;
}

/* 3. Épique (Améthyste Royale & Pourpre Arcane) */
.card-bg-epique, .card-bg-epic {
  background: linear-gradient(180deg, #3b0764 0%, #1e0538 45%, #100220 100%) !important;
}
.border-epique, .border-epic { 
  border-color: #c084fc !important; 
  box-shadow: 0 0 28px rgba(192, 132, 252, 0.45), inset 0 0 16px rgba(168, 85, 247, 0.22) !important; 
}
.epic-ambient-glow {
  background: radial-gradient(ellipse at 50% 15%, rgba(192, 132, 252, 0.25) 0%, transparent 65%);
  pointer-events: none;
}

/* 4. Légendaire (Or Solaire, Ambre Chaud & Flammèches Dorées) */
.card-bg-legendaire, .card-bg-legendary {
  background: linear-gradient(180deg, #451a03 0%, #220d02 45%, #130700 100%) !important;
}
.border-legendaire, .border-legendary { 
  border-color: #fbbf24 !important; 
  box-shadow: 0 0 32px rgba(251, 191, 36, 0.6), inset 0 0 18px rgba(251, 191, 36, 0.28) !important; 
}
.legendary-ambient-glow {
  background: radial-gradient(ellipse at 50% 12%, rgba(251, 191, 36, 0.3) 0%, transparent 65%),
              radial-gradient(ellipse at 50% 88%, rgba(245, 158, 11, 0.18) 0%, transparent 65%);
  pointer-events: none;
}

/* 5. Mythique (Rubis Cosmique, Sang de Dragon & Nébuleuse Carmin) */
.card-bg-mythique, .card-bg-mythic {
  background: linear-gradient(180deg, #4c0519 0%, #25020c 45%, #140106 100%) !important;
}
.border-mythique, .border-mythic { 
  border-color: #f43f5e !important; 
  box-shadow: 0 0 38px rgba(244, 63, 94, 0.75), inset 0 0 22px rgba(244, 63, 94, 0.35) !important; 
}
.mythic-ambient-glow {
  background: radial-gradient(ellipse at 50% 12%, rgba(244, 63, 94, 0.38) 0%, transparent 65%),
              radial-gradient(ellipse at 50% 88%, rgba(225, 29, 72, 0.28) 0%, transparent 65%);
  pointer-events: none;
}

/* Forge & Transmutation Crucible */
.forge-slot-item {
  transition: all 0.25s cubic-bezier(0.2, 0, 0.2, 1);
}
.forge-slot-item:hover {
  transform: translateY(-2px);
}

@keyframes forgeAuraGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), inset 0 0 15px rgba(245, 158, 11, 0.1);
  }
  50% {
    box-shadow: 0 0 35px rgba(245, 158, 11, 0.6), inset 0 0 25px rgba(245, 158, 11, 0.3);
  }
}

.forge-active-glow {
  animation: forgeAuraGlow 2s ease-in-out infinite;
}

@keyframes forgeSwirlPulse {
  0% { transform: scale(1) rotate(0deg); opacity: 0.9; }
  50% { transform: scale(1.04) rotate(180deg); opacity: 1; filter: brightness(1.3); }
  100% { transform: scale(1) rotate(360deg); opacity: 0.9; }
}

.forge-transmuting-pulse {
  animation: forgeSwirlPulse 1.2s ease-in-out infinite;
}

/* Hide scrollbar for clean carousels */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================
   SHOWCASE / VITRINE STYLES & PEDESTALS
   ========================================== */
.showcase-pedestal {
  background: radial-gradient(ellipse at 50% 100%, rgba(245, 158, 11, 0.15), rgba(15, 23, 42, 0.8) 70%);
  transition: all 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}
.showcase-pedestal:hover {
  transform: translateY(-4px);
}
.showcase-spotlight {
  background: radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, 0.25) 0%, transparent 70%);
}
.showcase-center-halo {
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.2), inset 0 0 20px rgba(245, 158, 11, 0.1);
}
@keyframes pedestalGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.3)); }
  50% { filter: drop-shadow(0 0 22px rgba(245, 158, 11, 0.6)); }
}
.showcase-glow-anim {
  animation: pedestalGlow 3s ease-in-out infinite;
}