:root {
  --bg-dark: #070913;
  --card-ratio: 0.714;
}
* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  background-color: #070913;
  color: #f8fafc;
  overflow-x: hidden;
}
.font-display {
  font-family: 'Outfit', 'Inter', sans-serif;
}

/* Arena background */
.arena-bg {
  background-image: linear-gradient(to bottom, rgba(7, 9, 19, 0.74), rgba(7, 9, 19, 0.95)), url("../assets/bg-arena.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* 3D Perspective & Card Containers */
.perspective-1000 {
  perspective: 1200px;
}
.card-3d-wrapper {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
.card-3d-wrapper.is-flipped {
  transform: rotateY(180deg);
}
.card-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
}
.card-face-front {
  transform: rotateY(180deg);
}

/* ==================== AVATAR CARD ARTWORK CROP ==================== */
/* Focuses & centers the card's illustration artwork window to perfectly fill the avatar square */
.card-avatar-crop {
  position: absolute;
  top: -27%;
  left: 50%;
  transform: translateX(-50%);
  width: 172%;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* ==================== REALISTIC POKEMON TCG HOLO & FOIL SYSTEM ==================== */
.card-foil-container {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

/* Base dynamic specular light glare that moves with 3D tilt (Dịu nhẹ, không chói gắt) */
.dynamic-holo-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: background, opacity;
}

/* Dynamic rainbow diffraction grating (Êm ái, sang trọng) */
.dynamic-rainbow-foil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0;
  background-size: 250% 250%;
  animation: ambientFoilDrift 8s ease-in-out infinite alternate;
  will-change: background-position, filter, opacity;
}

/* Realistic glitter / sparkle layer (Tinh tế, lấp lánh nhẹ) */
.dynamic-sparkle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  background-size: 130px 130px;
  background-image: 
    radial-gradient(1.2px 1.2px at 20px 30px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 45px 75px, #fef08a, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 55px 155px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.4px 1.4px at 90px 40px, #bae6fd, rgba(0,0,0,0)),
    radial-gradient(1.6px 1.6px at 125px 85px, #fbcfe8, rgba(0,0,0,0)),
    radial-gradient(1.2px 1.2px at 105px 115px, #ffffff, rgba(0,0,0,0));
  animation: ambientSparkleTwinkle 5s ease-in-out infinite alternate;
  will-change: background-position, opacity;
}

@keyframes ambientFoilDrift {
  0% { background-position: 0% 25%; }
  50% { background-position: 100% 75%; }
  100% { background-position: 25% 100%; }
}

@keyframes ambientSparkleTwinkle {
  0% { opacity: 0.15; }
  50% { opacity: 0.28; }
  100% { opacity: 0.18; }
}

/* 1. Holo Rare (R) */
.foil-R .dynamic-rainbow-foil {
  opacity: 0.22;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 120, 120, 0.25) 20%,
    rgba(255, 230, 100, 0.3) 35%,
    rgba(120, 255, 150, 0.3) 50%,
    rgba(100, 220, 255, 0.35) 65%,
    rgba(220, 120, 255, 0.25) 80%,
    transparent 100%
  );
}
.foil-R .dynamic-sparkle-layer { opacity: 0.18; }

/* 2. Pikachu Rare (PR) - 30th Gold Stamp & Sparkle */
.foil-PR .dynamic-rainbow-foil {
  opacity: 0.26;
  background: linear-gradient(
    135deg,
    rgba(250, 204, 21, 0.15) 0%,
    rgba(253, 224, 71, 0.4) 25%,
    rgba(56, 189, 248, 0.35) 50%,
    rgba(232, 121, 249, 0.35) 75%,
    rgba(250, 204, 21, 0.2) 100%
  );
}
.foil-PR .dynamic-sparkle-layer { opacity: 0.25; }

/* 3. Double Rare (DR) - Pokémon ex / Mega ex */
.foil-DR .dynamic-rainbow-foil {
  opacity: 0.24;
  background: repeating-linear-gradient(
    130deg,
    transparent 0px,
    rgba(255, 255, 255, 0.05) 12px,
    rgba(192, 132, 252, 0.3) 24px,
    rgba(56, 189, 248, 0.35) 36px,
    rgba(244, 114, 182, 0.25) 48px,
    transparent 60px
  );
  background-size: 200% 200%;
}
.foil-DR .dynamic-sparkle-layer { opacity: 0.18; }

/* 4. Illustration Rare (IR) & Special Illustration Rare (SIR) */
.foil-IR .dynamic-rainbow-foil,
.foil-SIR .dynamic-rainbow-foil {
  opacity: 0.28;
  background: linear-gradient(
    125deg,
    rgba(255, 0, 128, 0.3) 0%,
    rgba(255, 170, 0, 0.35) 18%,
    rgba(255, 255, 0, 0.38) 36%,
    rgba(0, 255, 170, 0.35) 52%,
    rgba(0, 180, 255, 0.4) 70%,
    rgba(180, 0, 255, 0.35) 86%,
    rgba(255, 0, 128, 0.3) 100%
  );
  background-size: 250% 250%;
}
.foil-IR .dynamic-sparkle-layer,
.foil-SIR .dynamic-sparkle-layer { opacity: 0.22; }

/* 5. Ultra Rare Full Art (UR) */
.foil-UR .dynamic-rainbow-foil {
  opacity: 0.25;
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(232, 121, 249, 0.35) 30%,
    rgba(56, 189, 248, 0.38) 60%,
    rgba(255, 255, 255, 0.1) 100%
  );
}
.foil-UR .dynamic-sparkle-layer { opacity: 0.18; }

/* 6. Classic Collection (CC) - Retro Holo Confetti */
.foil-CC .dynamic-rainbow-foil {
  opacity: 0.26;
  background: linear-gradient(
    115deg,
    rgba(245, 158, 11, 0.2) 0%,
    rgba(254, 240, 138, 0.45) 25%,
    rgba(56, 189, 248, 0.4) 50%,
    rgba(244, 114, 182, 0.4) 75%,
    rgba(245, 158, 11, 0.2) 100%
  );
}
.foil-CC .dynamic-sparkle-layer { opacity: 0.25; }

/* 7. Fractal Rare (FR) - Cyber Prismatic Grid */
.foil-FR .dynamic-rainbow-foil {
  opacity: 0.26;
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.35) 0%,
    rgba(217, 70, 239, 0.42) 45%,
    rgba(34, 211, 238, 0.38) 80%,
    rgba(240, 171, 252, 0.35) 100%
  );
}
.foil-FR .dynamic-sparkle-layer { opacity: 0.2; }

/* 8. Mega Hyper Rare (MHR / Gold UR) - Ấm áp ánh vàng sang trọng */
.foil-MHR .dynamic-rainbow-foil {
  opacity: 0.32;
  mix-blend-mode: soft-light;
  background: linear-gradient(
    125deg,
    rgba(245, 158, 11, 0.25) 0%,
    rgba(254, 240, 138, 0.5) 28%,
    rgba(250, 204, 21, 0.6) 50%,
    rgba(217, 119, 6, 0.45) 72%,
    rgba(254, 240, 138, 0.5) 100%
  );
  background-size: 220% 220%;
}
.foil-MHR .dynamic-sparkle-layer {
  opacity: 0.28;
  background-image: 
    radial-gradient(1.5px 1.5px at 25px 35px, #fef08a, rgba(0,0,0,0)),
    radial-gradient(1.8px 1.8px at 65px 75px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.4px 1.4px at 105px 125px, #fef08a, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 145px 55px, #ffffff, rgba(0,0,0,0));
}

/* 9. RGB Secret Rare - Laser Prism */
.foil-RGB .dynamic-rainbow-foil {
  opacity: 0.28;
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.38) 0%,
    rgba(16, 185, 129, 0.38) 33%,
    rgba(59, 130, 246, 0.38) 66%,
    rgba(239, 68, 68, 0.38) 100%
  );
  background-size: 300% 300%;
}
.foil-RGB .dynamic-sparkle-layer { opacity: 0.24; }

/* 10. Uncommon Foil / Reverse Holo / Foil cards */
.foil-U .dynamic-rainbow-foil {
  opacity: 0.18;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(52, 211, 153, 0.3) 45%,
    rgba(56, 189, 248, 0.3) 55%,
    rgba(255, 255, 255, 0.1) 75%,
    transparent 100%
  );
}
.foil-U .dynamic-sparkle-layer { opacity: 0.12; }
    transparent 100%
  );
}
.foil-U .dynamic-sparkle-layer { opacity: 0.22; }

/* Subtle Fallback Holographic Sheen */
.holo-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: 0.32;
  background: linear-gradient(
    125deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 32%,
    rgba(255, 235, 140, 0.36) 46%,
    rgba(120, 220, 255, 0.36) 50%,
    rgba(255, 130, 240, 0.32) 54%,
    rgba(255,255,255,0.08) 68%,
    rgba(255,255,255,0) 100%
  );
  background-size: 250% 250%;
  animation: holoShift 4.5s ease-in-out infinite;
}
@keyframes holoShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Rarity Outer Glows (preserving 100% of original card scan inside) */
.rarity-C {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.75), 0 0 0 1px rgba(148, 163, 184, 0.35);
}
.rarity-U {
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35), 0 0 0 1.5px rgba(52, 211, 153, 0.55);
}
.rarity-R {
  box-shadow: 0 6px 22px rgba(56, 189, 248, 0.45), 0 0 0 2px rgba(56, 189, 248, 0.65);
}
.rarity-PR {
  box-shadow: 0 6px 25px rgba(250, 204, 21, 0.55), 0 0 0 2px rgba(250, 204, 21, 0.8);
}
.rarity-DR {
  box-shadow: 0 8px 28px rgba(168, 85, 247, 0.65), 0 0 0 2px rgba(192, 132, 252, 0.85);
}
.rarity-IR {
  box-shadow: 0 8px 32px rgba(251, 191, 36, 0.75), 0 0 0 2px rgba(251, 191, 36, 0.9);
}
.rarity-UR {
  box-shadow: 0 8px 34px rgba(192, 132, 252, 0.85), 0 0 16px rgba(56, 189, 248, 0.65), 0 0 0 2.5px #e879f9;
}
.rarity-CC {
  box-shadow: 0 8px 36px rgba(245, 158, 11, 0.85), 0 0 0 2.5px #fde047;
}
.rarity-SIR {
  box-shadow: 0 0 40px rgba(236, 72, 153, 0.9), 0 0 18px rgba(56, 189, 248, 0.75), 0 0 0 2.5px #f472b6;
}
.rarity-FR {
  box-shadow: 0 0 46px rgba(6, 182, 212, 0.95), 0 0 22px rgba(217, 70, 239, 0.85), 0 0 0 2.5px #22d3ee;
}
.rarity-MHR {
  box-shadow: 0 0 52px rgba(250, 204, 21, 1), 0 0 85px rgba(245, 158, 11, 0.85), 0 0 0 3px #fef08a;
}
.rarity-RGB-R {
  box-shadow: 0 0 55px rgba(239, 68, 68, 1), 0 0 90px rgba(239, 68, 68, 0.75), 0 0 0 3px #f87171;
}
.rarity-RGB-G {
  box-shadow: 0 0 55px rgba(16, 185, 129, 1), 0 0 90px rgba(16, 185, 129, 0.75), 0 0 0 3px #34d399;
}
.rarity-RGB-B {
  box-shadow: 0 0 55px rgba(59, 130, 246, 1), 0 0 90px rgba(59, 130, 246, 0.75), 0 0 0 3px #60a5fa;
}

.cyber-grid {
  background-image: 
    linear-gradient(to right, rgba(6, 182, 212, 0.2) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(217, 70, 239, 0.2) 1px, transparent 1px);
  background-size: 14px 14px;
}

/* Pack wrapper animations */
@keyframes floatPack {
  0%, 100% { transform: translateY(0px) rotate(-0.8deg); }
  50% { transform: translateY(-9px) rotate(0.8deg); }
}
.pack-float {
  animation: floatPack 3.4s ease-in-out infinite;
}

@keyframes packVanish {
  0% { transform: scale(1) translateY(0); opacity: 1; filter: brightness(1); }
  40% { transform: scale(1.08) translateY(-6px); opacity: 0.9; filter: brightness(1.8); }
  100% { transform: scale(0.75) translateY(45px); opacity: 0; filter: brightness(2.5); }
}
.pack-vanishing {
  animation: packVanish 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes shakeIntense {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(0, 0) rotate(0deg); }
}
.screen-shake {
  /* Screen shake completely disabled to eliminate UI jerking/stutter on card reveal */
  animation: none !important;
}

@keyframes floatUpFade {
  0% { opacity: 1; transform: translateY(0) scale(0.85); }
  30% { opacity: 1; transform: translateY(-18px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-54px) scale(1); }
}
.reward-float {
  animation: floatUpFade 1.5s ease-out forwards;
}

/* Pack Top Tear Slice */
.pack-top-slice {
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}
.pack-top-slice.torn-off {
  transform: translate(150px, -120px) rotate(32deg) scale(0.88);
  opacity: 0;
}

/* Physical Card Stack & Drag-to-Pull Styling */
.physical-stack-card {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  touch-action: none;
  will-change: transform;
}
.physical-stack-card.spring-back {
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.physical-stack-card.fly-to-right {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease;
  transform: translate(320px, -15px) rotate(10deg) scale(0.9) !important;
  opacity: 0;
  pointer-events: none;
}

/* Horizontal Deal Animation for Fast Open */
@keyframes dealHorizontal {
  0% {
    opacity: 0;
    transform: translateX(-180px) translateY(20px) rotate(-12deg) scale(0.75);
  }
  70% {
    opacity: 1;
    transform: translateX(6px) translateY(-4px) rotate(1.5deg) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
}
.deal-card-anim {
  animation: dealHorizontal 0.48s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Fly-in animation for cards landing in the right-side pulled tray */
@keyframes landFromLeft {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.land-right-anim {
  animation: landFromLeft 0.26s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* ==================== POKE'CATCH STYLE LOGIN SCREEN ==================== */
.font-pixel {
  font-family: 'Silkscreen', 'Outfit', monospace;
}

.pokecatch-login-bg {
  background-color: #161822;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ffffff' stroke-opacity='0.032' stroke-width='2.2' fill='none'%3E%3Ccircle cx='30' cy='30' r='14'/%3E%3Ccircle cx='30' cy='30' r='4.5'/%3E%3Cline x1='16' y1='30' x2='25.5' y2='30'/%3E%3Cline x1='34.5' y1='30' x2='44' y2='30'/%3E%3Ccircle cx='90' cy='90' r='14'/%3E%3Ccircle cx='90' cy='90' r='4.5'/%3E%3Cline x1='76' y1='90' x2='85.5' y2='90'/%3E%3Cline x1='94.5' y1='90' x2='104' y2='90'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 110px 110px;
  animation: bgPatternScroll 38s linear infinite;
}

@keyframes bgPatternScroll {
  0% { background-position: 0px 0px; }
  100% { background-position: -220px -220px; }
}

.pixelated-sprite {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.55));
}

@keyframes spriteHop {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

.sprite-hop {
  animation: spriteHop 0.65s ease-in-out infinite;
}

.btn-pokecatch-red {
  background: #e94246;
  box-shadow: 0 4px 0 #9f2023, 0 8px 20px rgba(0, 0, 0, 0.45);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}
.btn-pokecatch-red:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #9f2023, 0 10px 24px rgba(233, 66, 70, 0.35);
}
.btn-pokecatch-red:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #9f2023;
}

.btn-pokecatch-dark {
  background: #1e2230;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 0 #0e1017, 0 6px 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease;
}
.btn-pokecatch-dark:hover {
  background: #272c3f;
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #0e1017, 0 8px 16px rgba(0, 0, 0, 0.5);
}
.btn-pokecatch-dark:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #0e1017;
}

.btn-pokecatch-discord {
  background: #5865F2;
  box-shadow: 0 4px 0 #3842b0, 0 8px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}
.btn-pokecatch-discord:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #3842b0, 0 10px 22px rgba(88, 101, 242, 0.35);
}
.btn-pokecatch-discord:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #3842b0;
}

.btn-pokecatch-google {
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 4px 0 #94a3b8, 0 8px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}
.btn-pokecatch-google:hover {
  filter: brightness(0.97);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #94a3b8, 0 10px 22px rgba(255, 255, 255, 0.18);
}
.btn-pokecatch-google:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #94a3b8;
}