/* ============================================================
   MÉTIERS EN CARTES — Styles
   Aesthetic: dark space · cyan #00eaff · magenta #ff00d4
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  --bg:        #0a0c12;
  --bg2:       #0b1220;
  --ink:       #e8f0ff;
  --muted:     #9aa7c0;
  --accent:    #00eaff;
  --accent-2:  #ff00d4;
  --card-radius: 16px;
  --nav-h:     76px;
  --transition-card: 0.46s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

/* ============================================================
   ANIMATED BACKGROUND
   ============================================================ */
.bg-wrapper {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 50% -200px, #142038 0%, var(--bg2) 40%, var(--bg) 60%),
    radial-gradient(800px 400px at 20% 110%, #12051c 0%, transparent 60%),
    radial-gradient(900px 500px at 80% 110%, #031b1c 0%, transparent 60%),
    var(--bg);
  animation: bgPulse 10s ease-in-out infinite alternate;
}
@keyframes bgPulse {
  from { filter: hue-rotate(0deg) brightness(1);   }
  to   { filter: hue-rotate(15deg) brightness(1.08); }
}

.bg-stars { position: absolute; inset: 0; }
.star {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #8fffff 60%, transparent 70%);
  animation: twinkle var(--dur, 3s) ease-in-out infinite var(--delay, 0s);
}
.star:nth-child(3n) { background: radial-gradient(circle, #fff, #ff66f2 60%, transparent 70%); }

@keyframes twinkle {
  0%,100% { opacity: 0.1; transform: scale(1); }
  50%     { opacity: 0.8; transform: scale(1.4); }
}

/* ============================================================
   APP LAYOUT
   ============================================================ */
.app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100dvh;
  padding: 8px 12px var(--nav-h);
  gap: 4px;
  overflow: hidden;
}

/* ============================================================
   HEADER
   ============================================================ */
.app-header { text-align: center; flex-shrink: 0; }

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.logo-text {
  font-family: 'Bangers', cursive;
  font-size: clamp(1.5rem, 5vw, 2rem);
  letter-spacing: 2px;
  background: linear-gradient(90deg, #f9ca24, #f0932b, #eb4d4b, #6c5ce7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(249,202,36,0.35));
}
.tagline {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 1px;
}

/* ============================================================
   COLLECTION BADGE
   ============================================================ */
.collection-badge {
  background: rgba(0,234,255,.05);
  border: 1px solid rgba(0,234,255,.18);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 3px 14px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: all 0.3s ease;
  box-shadow: 0 0 12px rgba(0,234,255,.08);
}
.collection-badge span {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(0,234,255,.6);
}

/* ============================================================
   CARD ARENA
   ============================================================ */
.card-arena {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}

/* The "track" defines the card size — portrait ratio like a real card */
.card-track {
  position: relative;
  height: min(520px, calc(100% - 4px));
  aspect-ratio: 2.5 / 3.5;
}

/* ============================================================
   CARD BASE
   ============================================================ */
.card {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  cursor: grab;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --holo-angle: 135;

  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: perspective(1200px) scale(0.92) translateY(20px);
  transition: var(--transition-card);
}

.card.active {
  opacity: 1;
  pointer-events: all;
  z-index: 5;
  transform: perspective(1200px) scale(1) translateY(0px);
}

/* Slide animations */
.card.slide-out-left {
  opacity: 0 !important;
  transform: perspective(1200px) translateX(-130%) rotate(-12deg) scale(0.85) !important;
  transition: var(--transition-card) !important;
}
.card.slide-out-right {
  opacity: 0 !important;
  transform: perspective(1200px) translateX(130%) rotate(12deg) scale(0.85) !important;
  transition: var(--transition-card) !important;
}
@keyframes slideInLeft {
  from { opacity:0; transform: perspective(1200px) translateX(-130%) rotate(-12deg) scale(0.85); }
  to   { opacity:1; transform: perspective(1200px) scale(1); }
}
@keyframes slideInRight {
  from { opacity:0; transform: perspective(1200px) translateX(130%) rotate(12deg) scale(0.85); }
  to   { opacity:1; transform: perspective(1200px) scale(1); }
}
.card.slide-in-left  { animation: slideInLeft  var(--transition-card); }
.card.slide-in-right { animation: slideInRight var(--transition-card); }

.card:active { cursor: grabbing; }

/* ============================================================
   CARD INNER — the visible card surface
   ============================================================ */
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: rgba(6,10,18,.85);

  box-shadow:
    0 0 0 1px rgba(0,234,255,.15),
    0 0 0 4px rgba(0,0,0,.55),
    0 24px 70px rgba(0,0,0,.65),
    0 0 40px rgba(0,234,255,.06);

  transition: box-shadow 0.3s ease;
}
.card.active .card-inner {
  box-shadow:
    0 0 0 1px rgba(0,234,255,.35),
    0 0 0 4px rgba(0,0,0,.5),
    0 28px 80px rgba(0,0,0,.7),
    0 0 60px rgba(0,234,255,.25),
    0 0 100px rgba(255,0,212,.12);
  animation: cardGlow 4s ease-in-out infinite alternate;
}
@keyframes cardGlow {
  from {
    box-shadow:
      0 0 0 1px rgba(0,234,255,.35), 0 0 0 4px rgba(0,0,0,.5),
      0 28px 80px rgba(0,0,0,.7),
      0 0 60px rgba(0,234,255,.25), 0 0 100px rgba(255,0,212,.12);
  }
  to {
    box-shadow:
      0 0 0 1px rgba(255,0,212,.35), 0 0 0 4px rgba(0,0,0,.5),
      0 28px 80px rgba(0,0,0,.7),
      0 0 60px rgba(255,0,212,.25), 0 0 100px rgba(0,234,255,.12);
  }
}

/* ============================================================
   CARD IMAGE
   ============================================================ */
.card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--card-radius);
  display: block;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.card-image.loaded { opacity: 1; }

/* ============================================================
   HOLOGRAPHIC FOIL EFFECT
   ============================================================ */
.card-holo {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;

  background:
    radial-gradient(
      ellipse 75% 55% at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255,255,255,0.3) 0%,
      rgba(255,255,255,0.08) 35%,
      transparent 65%
    ),
    repeating-linear-gradient(
      calc(var(--holo-angle, 135) * 1deg),
      rgba(255,  20, 147, 0.32)  0%,
      rgba(255, 110,  30, 0.32)  8%,
      rgba(255, 230,  30, 0.32) 16%,
      rgba( 30, 220,  80, 0.32) 24%,
      rgba( 30, 160, 255, 0.32) 32%,
      rgba(170,  30, 255, 0.32) 40%,
      rgba(255,  20, 147, 0.32) 48%
    );

  mix-blend-mode: screen;
}

/* Sparkle dots layer */
.card-sparkle {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  z-index: 11;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  mix-blend-mode: screen;

  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.95) 0px, transparent 2px),
    radial-gradient(circle at 38%  8%, rgba(255,255,255,0.85) 0px, transparent 1.5px),
    radial-gradient(circle at 68% 15%, rgba(255,255,255,0.9)  0px, transparent 2px),
    radial-gradient(circle at 88% 42%, rgba(255,255,255,0.8)  0px, transparent 1.5px),
    radial-gradient(circle at 22% 62%, rgba(255,255,255,0.9)  0px, transparent 2px),
    radial-gradient(circle at 52% 78%, rgba(255,255,255,0.85) 0px, transparent 1.5px),
    radial-gradient(circle at 82% 88%, rgba(255,255,255,0.9)  0px, transparent 2px),
    radial-gradient(circle at  8% 92%, rgba(255,255,255,0.75) 0px, transparent 1.5px),
    radial-gradient(circle at 45% 45%, rgba(255,255,255,0.6)  0px, transparent 1px);
}
.card-sparkle.visible {
  opacity: 1;
  animation: sparkleDrift 1.8s ease-in-out infinite alternate;
}
@keyframes sparkleDrift {
  from { opacity: 0.6; background-position: 0 0; }
  to   { opacity: 1.0; background-position: 3px 3px; }
}

/* Subtle idle shimmer on active cards */
.card.active .card-holo {
  opacity: 0.08;
  animation: idleShimmer 4s ease-in-out infinite;
}
.card.active:hover .card-holo {
  animation: none;
}
@keyframes idleShimmer {
  0%,100% { opacity: 0.04; --holo-angle: 125; }
  50%     { opacity: 0.12; --holo-angle: 145; }
}

/* ============================================================
   CARD CAPTION
   ============================================================ */
.card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 12px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  pointer-events: none;

  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.card.active:hover .card-caption { opacity: 1; transform: translateY(0); }

.caption-num {
  font-family: 'Bangers', cursive;
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(0,234,255,.5), 0 1px 4px rgba(0,0,0,0.8);
}

/* ============================================================
   SWIPE INDICATORS
   ============================================================ */
.swipe-indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0,234,255,.06);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,234,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.2s;
}
.swipe-indicator.left  { left: 2px; }
.swipe-indicator.right { right: 2px; }
.swipe-arrow { font-size: 0.9rem; color: var(--accent); }

/* ============================================================
   HINT TEXT
   ============================================================ */
.hint-text {
  font-size: 0.63rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.8px;
  text-align: center;
  flex-shrink: 0;
  transition: opacity 0.8s ease;
  height: 14px;
  text-transform: uppercase;
  opacity: 0.5;
}
.hint-text.hidden { opacity: 0; pointer-events: none; }

/* ============================================================
   BOTTOM NAVIGATION
   ============================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(6, 10, 18, 0.92);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0,234,255,.1);
  z-index: 100;
}

.nav-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(0,234,255,.25);
  background: rgba(0,234,255,.06);
  color: var(--accent);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.nav-btn:hover   {
  background: rgba(0,234,255,.14);
  border-color: var(--accent);
  transform: scale(1.08);
  box-shadow: 0 0 14px rgba(0,234,255,.3);
}
.nav-btn:active  { transform: scale(0.93); }
.nav-btn:disabled {
  opacity: 0.2;
  cursor: default;
  transform: none !important;
  box-shadow: none !important;
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.dot-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 240px;
}

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(0,234,255,.15);
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.dot.active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.45);
  box-shadow: 0 0 10px rgba(0,234,255,.7);
}
.dot.visited {
  background: rgba(0,234,255,.3);
  border-color: rgba(0,234,255,.2);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: rgba(0,234,255,.03);
  border: 2px dashed rgba(0,234,255,.2);
  border-radius: var(--card-radius);
  color: var(--muted);
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
}
.empty-icon { font-size: 3rem; }

/* ============================================================
   MODE TABS
   ============================================================ */
.mode-tabs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.mode-tab {
  border: 1px solid rgba(0,234,255,.18);
  background: rgba(0,234,255,.04);
  color: var(--muted);
  font-family: 'Nunito', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 5px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mode-tab:hover {
  background: rgba(0,234,255,.1);
  color: var(--ink);
}
.mode-tab.active {
  background: rgba(0,234,255,.15);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(0,234,255,.2);
}

/* ============================================================
   MODE SECTIONS
   ============================================================ */
.mode-section {
  display: none;
  flex: 1;
  width: 100%;
  min-height: 0;
  flex-direction: column;
  align-items: center;
}
.mode-section.active { display: flex; }

/* ============================================================
   GALLERY MODE
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 8px 4px 16px;
  overflow-y: auto;
  width: 100%;
  max-width: 560px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,234,255,.3) transparent;
}
.gallery-item {
  aspect-ratio: 2.5 / 3.5;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(0,234,255,.15);
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.gallery-item:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,234,255,.3), 0 0 20px rgba(255,0,212,.15);
  border-color: var(--accent);
  z-index: 2;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: rgba(6,10,18,.85);
  display: block;
}

/* Gallery modal */
.gallery-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.gallery-modal.open { opacity: 1; pointer-events: all; }
.gallery-modal-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.9);
  backdrop-filter: blur(12px);
}
.gallery-modal-content {
  position: relative; z-index: 1;
  max-height: 88vh;
  aspect-ratio: 2.5 / 3.5;
  border-radius: 16px; overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,234,255,.35),
    0 0 60px rgba(0,234,255,.3),
    0 0 100px rgba(255,0,212,.15);
  animation: modalPop 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalPop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
#galleryModalImg {
  width: 100%; height: 100%;
  object-fit: contain;
  background: rgba(6,10,18,.9);
  display: block;
}
.gallery-modal-close {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.65);
  color: #fff; font-size: 0.85rem;
  cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.gallery-modal-close:hover { background: rgba(255,0,0,.4); }

/* ============================================================
   PACK OPENING MODE
   ============================================================ */
.pack-arena {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex: 1; width: 100%; gap: 14px;
  padding: 0 8px;
}
.pack-info {
  font-size: 0.75rem; font-weight: 800;
  color: var(--muted); letter-spacing: 1px;
  text-transform: uppercase; min-height: 18px;
  text-align: center;
}

/* 5 cards in a row */
.pack-row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 560px;
}

/* Each flip card in the pack */
.pack-flip {
  flex: 1;
  max-width: 100px;
  aspect-ratio: 2.5 / 3.5;
  perspective: 900px;
  cursor: pointer;
}
.pack-flip-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 1.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  border-radius: var(--card-radius);
}
.pack-flip.flipped .pack-flip-inner {
  transform: rotateY(180deg);
}
.pack-face {
  position: absolute; inset: 0;
  border-radius: var(--card-radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.pack-face-front { transform: rotateY(180deg); }

/* Card back design (CSS) */
.card-back-design {
  width: 100%; height: 100%;
  background: radial-gradient(ellipse 85% 85% at 50% 50%, #1a3a6b 0%, #0a1830 45%, #050e1f 100%);
  border: 2px solid #1e4d8a;
  border-radius: var(--card-radius);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,234,255,.15), inset 0 0 40px rgba(30,77,138,.4);
}
.cb-swirl {
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(100,160,255,.12) 60deg,
    transparent 120deg, rgba(100,160,255,.12) 180deg,
    transparent 240deg, rgba(100,160,255,.12) 300deg,
    transparent 360deg);
  animation: swirlRotate 8s linear infinite;
}
@keyframes swirlRotate { to { transform: rotate(360deg); } }
.cb-logo {
  font-family: 'Bangers', cursive;
  font-size: clamp(1.2rem, 5vw, 2.8rem);
  letter-spacing: 4px;
  color: #f9ca24;
  text-shadow:
    -2px -2px 0 #1e4d8a, 2px -2px 0 #1e4d8a,
    -2px  2px 0 #1e4d8a, 2px  2px 0 #1e4d8a,
    0 0 16px rgba(249,202,36,.5);
  z-index: 1; user-select: none;
}
/* Unflipped card: hover effect */
.pack-flip:not(.flipped):hover .pack-flip-inner {
  transform: rotateY(12deg) scale(1.05);
  box-shadow: 0 8px 24px rgba(0,234,255,.3);
}
.pack-flip:not(.flipped) { cursor: pointer; }
.pack-flip.flipped       { cursor: default; }
.pack-flip.revealed      { cursor: zoom-in; }

/* Revealed front face */
.pack-face-front img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: rgba(6,10,18,.9);
  display: block;
}
/* Holo overlay on revealed card */
.pack-holo {
  position: absolute; inset: 0;
  border-radius: var(--card-radius);
  pointer-events: none; z-index: 5;
  mix-blend-mode: screen;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,20,147,.22) 0%, rgba(255,110,30,.22) 8%,
    rgba(255,230,30,.22) 16%, rgba(30,220,80,.22) 24%,
    rgba(30,160,255,.22) 32%, rgba(170,30,255,.22) 40%,
    rgba(255,20,147,.22) 48%
  );
  opacity: 0; transition: opacity 0.4s;
  animation: holoShift 3s ease-in-out infinite alternate;
}
.pack-flip.flipped .pack-holo { opacity: 1; }
@keyframes holoShift {
  from { background-position: 0 0;     filter: hue-rotate(0deg); }
  to   { background-position: 30px 30px; filter: hue-rotate(30deg); }
}

/* Glow on revealed card */
.pack-flip.revealed .pack-flip-inner {
  box-shadow:
    0 0 0 2px rgba(0,234,255,.5),
    0 0 20px rgba(0,234,255,.5),
    0 0 40px rgba(255,0,212,.25);
  animation: revealGlow 3s ease-out forwards;
}
@keyframes revealGlow {
  0%   { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 40px rgba(0,234,255,1), 0 0 80px rgba(255,0,212,.9); }
  100% { box-shadow: 0 0 0 2px rgba(0,234,255,.5), 0 0 20px rgba(0,234,255,.5), 0 0 40px rgba(255,0,212,.25); }
}

/* Pack buttons */
.pack-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pack-btn {
  border: 1px solid rgba(0,234,255,.35);
  background: rgba(0,234,255,.1);
  color: var(--accent);
  font-family: 'Nunito', sans-serif;
  font-size: 0.88rem; font-weight: 900;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 11px 26px; border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 18px rgba(0,234,255,.12);
}
.pack-btn:hover {
  background: rgba(0,234,255,.2);
  box-shadow: 0 0 28px rgba(0,234,255,.3), 0 0 50px rgba(255,0,212,.15);
  transform: scale(1.04);
}
.pack-btn:active  { transform: scale(0.97); }
.pack-btn:disabled { opacity: 0.3; cursor: default; transform: none; box-shadow: none; }

.pack-done, .pack-all-done {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}
.pack-done-text {
  font-size: 1rem; font-weight: 900;
  color: var(--accent); text-align: center;
  text-shadow: 0 0 18px rgba(0,234,255,.5);
}

/* ============================================================
   LIGHT BURST OVERLAY
   ============================================================ */
.light-burst-overlay {
  position: fixed; inset: 0; z-index: 150;
  pointer-events: none; opacity: 0;
}
.light-burst-overlay.burst {
  animation: lightBurst 2s ease-out forwards;
}
@keyframes lightBurst {
  0%   { opacity: 0; background: radial-gradient(ellipse 20% 20% at 50% 50%, rgba(0,234,255,0) 0%, transparent 100%); }
  15%  { opacity: 0.7; background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(0,234,255,.35) 0%, rgba(255,0,212,.25) 45%, transparent 80%); }
  40%  { opacity: 0.5; background: radial-gradient(ellipse 120% 150% at 50% 50%, rgba(0,234,255,.18) 0%, rgba(255,0,212,.15) 40%, transparent 70%); }
  75%  { opacity: 0.2; background: radial-gradient(ellipse 200% 250% at 50% 50%, transparent 0%, rgba(0,234,255,.08) 50%, transparent 80%); }
  100% { opacity: 0; }
}