:root {
  --bg: #0b0f19;
  --bg2: #111726;
  --panel: #161f33;
  --line: rgba(255, 255, 255, 0.12);
  --text: #f8fafc;
  --muted: #94a3b8;
  --tier1: #0284c7;
  --tier2: #10b981;
  --tier3: #ef4444;
  --tier4: #f59e0b;
  --accent: #f59e0b;
  --bg-grad-1: #131b2e;
  --bg-grad-2: #080c14;
  --font-display: 'Chakra Petch', 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Premier Glassmorphic Gaming System --- */
  --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(15, 22, 36, 0.82);
  --glass-bg-hover: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%), rgba(20, 29, 48, 0.9);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-border-highlight: rgba(255, 255, 255, 0.45);
  --glass-specular: inset 0 1px 1px 0 rgba(255, 255, 255, 0.35);
  --glass-inner-bevel: inset 0 -1px 2px 0 rgba(0, 0, 0, 0.4);
  --glass-shadow-3d: 0 16px 36px -6px rgba(0, 0, 0, 0.6), 0 4px 12px -2px rgba(0, 0, 0, 0.4);
  --glass-blur: blur(20px) saturate(180%);
}

/* ---------- Themes ----------
   Dark is the default (:root above). Light and Pink override the same
   variable set, so every component in the app re-themes automatically -
   nothing else needs to change per-theme. */
html.theme-light {
  --bg: #f4f1ea;
  --bg2: #ffffff;
  --panel: #ffffff;
  --line: #ddd6c9;
  --text: #24211c;
  --muted: #6b6558;
  --tier1: #2f6fa8;
  --tier2: #3f8a4f;
  --tier3: #b83a32;
  --tier4: #c97821;
  --accent: #c97821;
  --bg-grad-1: #fdfbf6;
  --bg-grad-2: #ece6d8;

  /* 3D Liquid Glass for Light Theme */
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.45) 100%), rgba(245, 243, 238, 0.82);
  --glass-bg-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%), rgba(255, 255, 255, 0.92);
  --glass-border: rgba(0, 0, 0, 0.12);
  --glass-border-highlight: rgba(255, 255, 255, 0.95);
  --glass-specular: inset 0 1px 1px 0 rgba(255, 255, 255, 0.9);
  --glass-inner-bevel: inset 0 -1px 2px 0 rgba(0, 0, 0, 0.08);
  --glass-shadow-3d: 0 12px 30px -4px rgba(50, 45, 35, 0.15), 0 2px 6px -1px rgba(50, 45, 35, 0.1);
}
/* Verdant - reward for beating Easy. The gentlest reward: a fresh, simple
   green palette with no special effects, fitting for the entry difficulty. */
html.theme-verdant {
  --bg: #eef7ee;
  --bg2: #ffffff;
  --panel: #ffffff;
  --line: #cde3cd;
  --text: #1c2e1c;
  --muted: #5d7a5d;
  --tier1: #3E7CB1;
  --tier2: #2f8f4e;
  --tier3: #C1443C;
  --tier4: #E08A2C;
  --accent: #2f8f4e;
  --bg-grad-1: #f4fbf4;
  --bg-grad-2: #dcebdc;
}
html.theme-pink {
  --bg: #2a1220;
  --bg2: #35162b;
  --panel: #3d1a33;
  --line: #6b2c56;
  --text: #ffe9f5;
  --muted: #e2a8cd;
  --tier1: #7fb3e0;
  --tier2: #7fe0a8;
  --tier3: #ff6f91;
  --tier4: #ffb86b;
  --accent: #ff5fa8;
  --bg-grad-1: #4a1d3d;
  --bg-grad-2: #1f0d19;
}
/* Storm - reward for beating every difficulty (the secret 6th theme, swapped
   with Flame). A genuine supercell: a deep indigo-charcoal sky, a violet
   storm-glow horizon, wind-blown streaks, four independent lightning bolts,
   a much denser rainfall, and a full-sky flash layer that fires alongside
   the bolts so a strike reads as a real flash-of-lightning moment instead
   of a subtle top-band glow. */
html.theme-storm {
  --bg: #05070c;
  --bg2: #0d131c;
  --panel: #111a26;
  --line: #2e4258;
  --text: #e2ecf7;
  --muted: #8298b3;
  --tier1: #5aa8e8;
  --tier2: #4C9A5B;
  --tier3: #C1443C;
  --tier4: #E08A2C;
  --accent: #9fe0ff;
  --bg-grad-1: #131c2c;
  --bg-grad-2: #020407;
}
/* Aurora - reward for beating Expert. Deep space with flowing aurora
   ribbons of green, violet, and teal drifting behind the stars. */
html.theme-aurora {
  --bg: #060a14;
  --bg2: #0a0f1e;
  --panel: #0d1428;
  --line: #253a5c;
  --text: #e4f1ff;
  --muted: #7f9bc4;
  --tier1: #4a90d9;
  --tier2: #34d399;
  --tier3: #C1443C;
  --tier4: #E08A2C;
  --accent: #34d399;
  --bg-grad-1: #0d1a2e;
  --bg-grad-2: #020408;
}
/* Flame - reward for beating Hard difficulty. Intense abyssal midnight backdrop
   with a living wall of roaring cerulean, sapphire, and electric-cyan blue fire. */
html.theme-flame {
  --bg: #04060d;
  --bg2: #080d1a;
  --panel: #0d1424;
  --line: #1c2b4d;
  --text: #f0f6ff;
  --muted: #8ca3cf;
  --tier1: #38bdf8;
  --tier2: #34d399;
  --tier3: #f87171;
  --tier4: #fbbf24;
  --accent: #38bdf8;
  --bg-grad-1: #09132b;
  --bg-grad-2: #020308;
}
/* Sovereign - reward for beating Master. Obsidian and gold, with a slow
   regal glow sweeping behind the app instead of the flame theme's fire. */
html.theme-sovereign {
  --bg: #0d0a06;
  --bg2: #17110a;
  --panel: #1c150d;
  --line: #4a3a1f;
  --text: #f5e9d0;
  --muted: #baa578;
  --tier1: #3E7CB1;
  --tier2: #4C9A5B;
  --tier3: #C1443C;
  --tier4: #E08A2C;
  --accent: #d4af37;
  --bg-grad-1: #241a0c;
  --bg-grad-2: #050402;
}
/* Mr Money - a purchasable theme (1000 Bux in the Shop, not quest-earned).
   Rich money-green with bills raining down the screen. */
html.theme-mrmoney {
  --bg: #04170a;
  --bg2: #062610;
  --panel: #0a3016;
  --line: #1f5c34;
  --text: #e8ffe8;
  --muted: #7fcf9a;
  --tier1: #3E7CB1;
  --tier2: #4C9A5B;
  --tier3: #C1443C;
  --tier4: #E08A2C;
  --accent: #3ddc63;
  --bg-grad-1: #0d3a1a;
  --bg-grad-2: #020e06;
}

html.theme-mrmoney #secret-m-trigger {
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

* { box-sizing: border-box; }

/* Progress bar used by the Daily Challenge panel (3D Liquid Glass) */
.challenge-progress-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  margin: 12px 0 6px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.challenge-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  transition: width .4s cubic-bezier(.22,1,.36,1);
}
.challenge-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 700;
}
.challenge-streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 4px 14px 4px 14px;
  background: rgba(249, 115, 22, 0.16);
  border: 1.5px solid rgba(249, 115, 22, 0.45);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 800;
  color: #fdba74;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
}
.daily-reroll-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 4px 14px 4px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-family: var(--font-display, sans-serif);
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease;
}
.daily-reroll-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  transform: translateY(-1px) scale(1.02);
  box-shadow: none !important;
}
.daily-reroll-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: none !important;
}
.daily-reroll-btn .reroll-cost {
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 7px;
  border-radius: 3px 8px 3px 8px;
  color: #facc15;
  font-size: 0.68rem;
  font-weight: 800;
  border: 1px solid rgba(250, 204, 21, 0.35);
}

/* Achievement rows — reuses the quest-row shell but with a locked/
   unlocked state and a reward tag. */
.achievement-row { position: relative; }
.achievement-row.locked { opacity: 0.55; filter: grayscale(45%); }
.achievement-reward {
  font-family: var(--font-display); font-size: 0.66rem; color: var(--accent);
  font-weight: 700; margin-top: 3px;
}

/* Modals must always be able to appear above the tutorial spotlight overlay,
   in the rare case one gets triggered while a guided tutorial is active. */
#patchnotes-overlay, #gameover-overlay, #options-overlay { z-index: 600; }

/* ---------- Flame theme: animated fire rising from the bottom of the
   screen, deep purple at the base fading through violet-blue to pale ice
   blue at the tips. This sits ABOVE #app (not behind it) using
   mix-blend-mode:screen, which only ever brightens/adds color and never
   darkens - so it reads as a glowing wall of fire behind the UI's cards and
   panels rather than being invisibly hidden behind their opaque
   backgrounds (an earlier version put this at z-index:-1, which meant it
   never showed at all on any normal-width screen - fixed here). ---------- */
#theme-flame-bg { display: none; }
html.theme-flame #theme-flame-bg {
  display: block; position: fixed; inset: 0;
  z-index: 2; overflow: hidden; pointer-events: none;
  mix-blend-mode: screen;
}

/* Subterranean blue thermal surge: deep breathing radiant energy */
.flame-ambient-surge {
  position: absolute; left: 50%; bottom: -14vh; width: 118vw; height: 52vh;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, rgba(0, 210, 255, 0.42), rgba(37, 99, 235, 0.28) 45%, rgba(109, 40, 217, 0.16) 72%, transparent 88%);
  filter: blur(40px);
  animation: flameSurgePulse 5.2s ease-in-out infinite alternate;
}
@keyframes flameSurgePulse {
  0%   { opacity: 0.58; transform: translateX(-50%) scale(0.95); }
  50%  { opacity: 0.96; transform: translateX(-50%) scale(1.07); }
  100% { opacity: 0.58; transform: translateX(-50%) scale(0.95); }
}

/* Atmospheric sapphire and violet convective haze */
.flame-cavern-haze {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(56, 189, 248, 0.08), transparent 68%),
              linear-gradient(180deg, transparent 40%, rgba(30, 27, 75, 0.16) 72%, rgba(2, 132, 199, 0.28) 100%);
  pointer-events: none;
}

/* Rolling liquid blue plasma fire beds */
.flame-bed-back {
  position: absolute; bottom: -5vh; left: -10vw; width: 120vw; height: 22vh;
  background: radial-gradient(ellipse at 50% 100%, rgba(37, 99, 235, 0.82), rgba(79, 70, 229, 0.5) 50%, transparent 82%);
  filter: blur(16px);
  animation: flameBedBackRoll 5.8s ease-in-out infinite alternate;
  border-radius: 40% 40% 0 0 / 60% 60% 0 0;
}
.flame-bed-front {
  position: absolute; bottom: -7vh; left: -5vw; width: 110vw; height: 17vh;
  background: linear-gradient(to top, rgba(56, 189, 248, 0.85) 0%, rgba(2, 132, 199, 0.55) 50%, transparent 100%);
  filter: blur(9px);
  animation: flameBedFrontRoll 4.0s ease-in-out infinite alternate;
  border-radius: 50% 50% 0 0 / 70% 70% 0 0;
}
@keyframes flameBedBackRoll {
  0%   { transform: translateY(0) scaleY(1); opacity: 0.72; }
  100% { transform: translateY(-2vh) scaleY(1.18); opacity: 0.98; }
}
@keyframes flameBedFrontRoll {
  0%   { transform: translateY(0) scaleY(1); opacity: 0.78; }
  100% { transform: translateY(-2.5vh) scaleY(1.22); opacity: 1; }
}

/* Organic living blue flame plumes: smooth fluid contours with layered thermal cores */
.flame-tongue {
  position: absolute; bottom: -5vh; transform-origin: bottom center;
  border-radius: 50% 50% 20% 20% / 65% 65% 30% 30%;
  background: linear-gradient(
    to top,
    rgba(20, 10, 45, 0.98) 0%,
    rgba(30, 27, 75, 0.94) 18%,
    rgba(29, 78, 216, 0.9) 42%,
    rgba(2, 132, 199, 0.92) 68%,
    rgba(56, 189, 248, 0.96) 86%,
    rgba(224, 242, 254, 1) 96%,
    #ffffff 100%
  );
  filter: blur(1px) drop-shadow(0 0 16px rgba(56, 189, 248, 0.75)) drop-shadow(0 0 36px rgba(37, 99, 235, 0.55));
  animation: flamePlumeDance ease-in-out infinite, flameSinuousSway ease-in-out infinite;
}

/* Middle inner plasma mantle */
.flame-tongue::before {
  content: ''; position: absolute; left: 16%; right: 16%; bottom: 0; top: 16%;
  border-radius: 50% 50% 25% 25% / 70% 70% 30% 30%;
  background: linear-gradient(
    to top,
    rgba(37, 99, 235, 0.92) 0%,
    rgba(56, 189, 248, 0.96) 46%,
    rgba(186, 230, 253, 1) 86%,
    #ffffff 100%
  );
  filter: blur(0.6px);
  animation: flameInnerLick 1.35s ease-in-out infinite alternate;
}

/* Hottest white-hot filament nucleus */
.flame-tongue::after {
  content: ''; position: absolute; left: 32%; right: 32%; bottom: 0; top: 36%;
  border-radius: 50% 50% 30% 30% / 75% 75% 35% 35%;
  background: linear-gradient(
    to top,
    rgba(56, 189, 248, 0.85) 0%,
    rgba(224, 242, 254, 1) 50%,
    #ffffff 100%
  );
  box-shadow: 0 0 12px #ffffff, 0 0 24px rgba(56, 189, 248, 0.85);
  animation: flameCoreLeap 0.92s ease-in-out infinite alternate;
}

/* Varied plume sizes, positions, and fluid timing across the screen */
.flame-tongue.f1  { left: -3%; width: 22vw; max-width: 210px; height: 42vh; animation-duration: 1.12s, 2.7s; animation-delay: 0s, .1s; }
.flame-tongue.f2  { left: 8%;  width: 17vw; max-width: 175px; height: 51vh; animation-duration: 0.94s, 3.2s; animation-delay: .3s, .4s; }
.flame-tongue.f3  { left: 21%; width: 20vw; max-width: 195px; height: 38vh; animation-duration: 1.24s, 2.5s; animation-delay: .15s, 0s; }
.flame-tongue.f4  { left: 35%; width: 18vw; max-width: 180px; height: 53vh; animation-duration: 1.02s, 3.4s; animation-delay: .5s, .6s; }
.flame-tongue.f5  { left: 49%; width: 21vw; max-width: 205px; height: 41vh; animation-duration: 1.18s, 2.8s; animation-delay: .25s, .2s; }
.flame-tongue.f6  { left: 63%; width: 18vw; max-width: 180px; height: 48vh; animation-duration: 0.98s, 3.1s; animation-delay: .4s, .5s; }
.flame-tongue.f7  { left: 77%; width: 17vw; max-width: 175px; height: 36vh; animation-duration: 1.08s, 2.6s; animation-delay: .1s, .15s; }
.flame-tongue.f8  { left: -9%; width: 15vw; max-width: 155px; height: 32vh; animation-duration: 1.28s, 3.0s; animation-delay: .2s, .35s; }
.flame-tongue.f9  { left: 43%; width: 13vw; max-width: 135px; height: 30vh; animation-duration: 0.88s, 2.3s; animation-delay: .45s, .1s; }
.flame-tongue.f10 { left: 89%; width: 15vw; max-width: 155px; height: 34vh; animation-duration: 1.34s, 3.5s; animation-delay: .05s, .5s; }
.flame-tongue.f11 { left: -14%;width: 14vw; max-width: 145px; height: 25vh; animation-duration: 1.04s, 2.4s; animation-delay: .35s, .05s; }
.flame-tongue.f12 { left: 2%;  width: 11vw; max-width: 115px; height: 44vh; animation-duration: 0.84s, 3.7s; animation-delay: .55s, .3s; }
.flame-tongue.f13 { left: 15%; width: 14vw; max-width: 140px; height: 29vh; animation-duration: 1.22s, 2.2s; animation-delay: .1s, .6s; }
.flame-tongue.f14 { left: 28%; width: 12vw; max-width: 120px; height: 47vh; animation-duration: 0.96s, 3.3s; animation-delay: .4s, .15s; }
.flame-tongue.f15 { left: 42%; width: 15vw; max-width: 150px; height: 27vh; animation-duration: 1.12s, 2.7s; animation-delay: .2s, .45s; }
.flame-tongue.f16 { left: 56%; width: 11vw; max-width: 110px; height: 42vh; animation-duration: 0.92s, 3.1s; animation-delay: .5s, .1s; }
.flame-tongue.f17 { left: 70%; width: 14vw; max-width: 140px; height: 31vh; animation-duration: 1.26s, 2.5s; animation-delay: .3s, .55s; }
.flame-tongue.f18 { left: 83%; width: 12vw; max-width: 120px; height: 38vh; animation-duration: 0.99s, 3.4s; animation-delay: .15s, .35s; }
.flame-tongue.f19 { left: 95%; width: 10vw; max-width: 100px; height: 26vh; animation-duration: 1.16s, 2.3s; animation-delay: .45s, .05s; }
.flame-tongue.f20 { left: -18%;width: 10vw; max-width: 100px; height: 35vh; animation-duration: 0.86s, 3.0s; animation-delay: .25s, .5s; }

/* Fluid thermal stretch and natural lick dynamics */
@keyframes flamePlumeDance {
  0% {
    transform: translateY(0) scaleY(1) scaleX(1);
    opacity: 0.88;
  }
  25% {
    transform: translateY(-2.5%) scaleY(1.12) scaleX(0.94);
    opacity: 0.98;
  }
  50% {
    transform: translateY(1%) scaleY(0.92) scaleX(1.05);
    opacity: 0.82;
  }
  75% {
    transform: translateY(-3.5%) scaleY(1.18) scaleX(0.91);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
    opacity: 0.88;
  }
}

/* Aerodynamic sinuous swaying in convection currents */
@keyframes flameSinuousSway {
  0%, 100% {
    transform: rotate(0deg) skewX(0deg);
  }
  30% {
    transform: rotate(-3.5deg) skewX(-3.8deg);
  }
  65% {
    transform: rotate(4deg) skewX(4.2deg);
  }
  85% {
    transform: rotate(-1.5deg) skewX(-2deg);
  }
}

@keyframes flameInnerLick {
  0%   { transform: scaleY(0.9) translateY(2%); opacity: 0.85; }
  100% { transform: scaleY(1.16) translateY(-4%); opacity: 1; }
}

@keyframes flameCoreLeap {
  0%   { transform: scaleY(0.85) scaleX(0.9); opacity: 0.9; }
  100% { transform: scaleY(1.22) scaleX(1.12); opacity: 1; }
}

/* Rising incandescent blue embers with convective aerodynamic drafts */
.ember {
  position: absolute; bottom: 2vh; border-radius: 50%; pointer-events: none;
  background: #e0f2fe;
  box-shadow: 0 0 8px #38bdf8, 0 0 16px rgba(56, 189, 248, 0.75);
  animation: blueEmberDraft linear infinite;
}
.ember.e1  { left: 6%;  width: 4px; height: 4px; animation-duration: 4.2s; animation-delay: 0s; }
.ember.e2  { left: 18%; width: 3px; height: 3px; animation-duration: 5.1s; animation-delay: 1.1s; }
.ember.e3  { left: 33%; width: 5px; height: 5px; animation-duration: 4.6s; animation-delay: .4s; }
.ember.e4  { left: 48%; width: 3px; height: 3px; animation-duration: 5.6s; animation-delay: 2.0s; }
.ember.e5  { left: 62%; width: 4px; height: 4px; animation-duration: 4.0s; animation-delay: .8s; }
.ember.e6  { left: 76%; width: 3px; height: 3px; animation-duration: 5.3s; animation-delay: 1.6s; }
.ember.e7  { left: 89%; width: 4px; height: 4px; animation-duration: 4.8s; animation-delay: .2s; }
.ember.e8  { left: 2%;  width: 3px; height: 3px; animation-duration: 5.4s; animation-delay: 2.4s; }
.ember.e9  { left: 25%; width: 4px; height: 4px; animation-duration: 4.4s; animation-delay: .6s; }
.ember.e10 { left: 40%; width: 3px; height: 3px; animation-duration: 5.9s; animation-delay: 1.7s; }
.ember.e11 { left: 55%; width: 5px; height: 5px; animation-duration: 4.7s; animation-delay: .3s; }
.ember.e12 { left: 68%; width: 3px; height: 3px; animation-duration: 5.2s; animation-delay: 2.1s; }
.ember.e13 { left: 82%; width: 4px; height: 4px; animation-duration: 4.3s; animation-delay: 1.0s; }
.ember.e14 { left: 95%; width: 3px; height: 3px; animation-duration: 5.7s; animation-delay: .5s; }
.ember.e15 { left: 10%; width: 4px; height: 4px; animation-duration: 4.9s; animation-delay: 1.9s; }
.ember.e16 { left: 30%; width: 3px; height: 3px; animation-duration: 5.5s; animation-delay: .8s; }
.ember.e17 { left: 46%; width: 5px; height: 5px; animation-duration: 4.1s; animation-delay: 2.3s; }
.ember.e18 { left: 63%; width: 3px; height: 3px; animation-duration: 5.8s; animation-delay: .4s; }
.ember.e19 { left: 77%; width: 4px; height: 4px; animation-duration: 4.5s; animation-delay: 1.3s; }
.ember.e20 { left: 92%; width: 3px; height: 3px; animation-duration: 5.1s; animation-delay: 2.6s; }

@keyframes blueEmberDraft {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  50% {
    transform: translateY(-42vh) translateX(18px) scale(0.9);
    opacity: 0.88;
  }
  82% {
    transform: translateY(-76vh) translateX(-14px) scale(0.65);
    opacity: 0.6;
    background: #93c5fd;
    box-shadow: 0 0 6px #60a5fa;
  }
  100% {
    transform: translateY(-102vh) translateX(22px) scale(0.3);
    opacity: 0;
  }
}

/* High-velocity electric blue sparks */
.spark {
  position: absolute; bottom: 3vh; border-radius: 50%; pointer-events: none;
  background: #ffffff;
  box-shadow: 0 0 8px #a5f3fc, 0 0 16px #38bdf8;
  animation: blueSparkPop cubic-bezier(0.12, 0.75, 0.38, 1) infinite;
}
.spark.sp1 { left: 12%; width: 2px; height: 2px; animation-duration: 2.1s; animation-delay: 0s; }
.spark.sp2 { left: 27%; width: 3px; height: 3px; animation-duration: 2.6s; animation-delay: .5s; }
.spark.sp3 { left: 41%; width: 2px; height: 2px; animation-duration: 1.9s; animation-delay: .9s; }
.spark.sp4 { left: 58%; width: 2px; height: 2px; animation-duration: 2.4s; animation-delay: .2s; }
.spark.sp5 { left: 70%; width: 3px; height: 3px; animation-duration: 2.2s; animation-delay: 1.3s; }
.spark.sp6 { left: 83%; width: 2px; height: 2px; animation-duration: 2.8s; animation-delay: .7s; }
.spark.sp7 { left: 95%; width: 2px; height: 2px; animation-duration: 2.0s; animation-delay: 1.6s; }

@keyframes blueSparkPop {
  0% {
    transform: translate(0, 0) scale(1.4);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  60% {
    transform: translate(8px, -36vh) scale(0.9);
    opacity: 0.92;
  }
  100% {
    transform: translate(-14px, -68vh) scale(0.3);
    opacity: 0;
  }
}

/* Ethereal violet-blue billowing smoke wisps */
.smoke-wisp {
  position: absolute; bottom: 26vh; border-radius: 50%; filter: blur(14px);
  background: radial-gradient(
    ellipse,
    rgba(56, 189, 248, 0.24) 0%,
    rgba(99, 102, 241, 0.14) 45%,
    rgba(30, 27, 75, 0.06) 72%,
    transparent 88%
  );
  pointer-events: none;
  animation: blueSmokeConvection linear infinite;
}
.smoke-wisp.sm1  { left: 4%;  width: 11vw; height: 20vh; animation-duration: 8.5s;  animation-delay: 0s; }
.smoke-wisp.sm2  { left: 20%; width: 13vw; height: 24vh; animation-duration: 10.5s; animation-delay: 1.5s; }
.smoke-wisp.sm3  { left: 34%; width: 10vw; height: 19vh; animation-duration: 9.5s;  animation-delay: 3s; }
.smoke-wisp.sm4  { left: 48%; width: 14vw; height: 26vh; animation-duration: 11.5s; animation-delay: .8s; }
.smoke-wisp.sm5  { left: 60%; width: 11vw; height: 21vh; animation-duration: 9.0s;  animation-delay: 4s; }
.smoke-wisp.sm6  { left: 72%; width: 13vw; height: 23vh; animation-duration: 11.0s; animation-delay: 2s; }
.smoke-wisp.sm7  { left: 84%; width: 10vw; height: 18vh; animation-duration: 10.0s; animation-delay: 5s; }
.smoke-wisp.sm8  { left: 92%; width: 12vw; height: 22vh; animation-duration: 12.5s; animation-delay: 1s; }
.smoke-wisp.sm9  { left: 12%; width: 9vw;  height: 17vh; animation-duration: 8.0s;  animation-delay: 5.5s; }
.smoke-wisp.sm10 { left: 55%; width: 9vw;  height: 17vh; animation-duration: 9.2s;  animation-delay: 3.5s; }

@keyframes blueSmokeConvection {
  0% {
    transform: translate(0, 0) scale(0.75) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.65;
  }
  75% {
    opacity: 0.35;
  }
  100% {
    transform: translate(4vw, -56vh) scale(2.2) rotate(35deg);
    opacity: 0;
  }
}

/* Card tactile reactivity in Flame theme */
html.theme-flame .card {
  border-color: rgba(56, 189, 248, 0.38);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 14px rgba(56, 189, 248, 0.18);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
html.theme-flame .card:hover {
  border-color: #38bdf8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 22px rgba(56, 189, 248, 0.55), inset 0 0 10px rgba(56, 189, 248, 0.22);
}

/* Elevated menu-footer over blue fire flames */
html.theme-flame .menu-footer {
  background: rgba(4, 6, 13, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.6) !important;
  padding: 4px !important;
  gap: 4px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: calc(100% - 20px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html.theme-flame .menu-footer .link-btn {
  color: #f0f6ff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
  font-weight: 500;
}
html.theme-flame .menu-footer .link-btn:hover {
  color: #7dd3fc;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.9);
}
html.theme-flame .menu-footer .footer-dot {
  color: rgba(56, 189, 248, 0.6);
}

#theme-sovereign-bg { display: none; }
html.theme-sovereign #theme-sovereign-bg {
  display: block; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  overflow: hidden; mix-blend-mode: screen;
}
html.theme-sovereign #theme-sovereign-bg::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top, rgba(212,175,55,0.32), transparent 60%);
  animation: sovereignGlow 5s ease-in-out infinite;
}
html.theme-sovereign #theme-sovereign-bg::after {
  content: ''; position: absolute; inset: -20% -10%;
  background: conic-gradient(from 0deg at 50% -10%,
    transparent 0deg, rgba(212,175,55,0.12) 8deg, transparent 20deg,
    transparent 160deg, rgba(212,175,55,0.1) 172deg, transparent 184deg,
    transparent 340deg, rgba(212,175,55,0.14) 352deg, transparent 360deg);
  animation: sovereignRays 22s linear infinite;
}
@keyframes sovereignGlow {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
@keyframes sovereignRays {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.gold-mote {
  position: absolute; bottom: 0; border-radius: 50%; pointer-events: none;
  background: #f3d98a; box-shadow: 0 0 6px #d4af37, 0 0 12px rgba(212,175,55,0.6);
  animation: moteRise linear infinite;
}
.gold-mote.m1 { left: 8%;  width: 3px; height: 3px; animation-duration: 7.5s; animation-delay: 0s; }
.gold-mote.m2 { left: 22%; width: 2px; height: 2px; animation-duration: 8.4s; animation-delay: 1.4s; }
.gold-mote.m3 { left: 39%; width: 3px; height: 3px; animation-duration: 6.8s; animation-delay: 2.6s; }
.gold-mote.m4 { left: 55%; width: 2px; height: 2px; animation-duration: 9.1s; animation-delay: .6s; }
.gold-mote.m5 { left: 71%; width: 3px; height: 3px; animation-duration: 7.2s; animation-delay: 3.3s; }
.gold-mote.m6 { left: 87%; width: 2px; height: 2px; animation-duration: 8.7s; animation-delay: 1.9s; }
@keyframes moteRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 0.7; }
  100% { transform: translateY(-95vh) translateX(-16px); opacity: 0; }
}

#theme-pink-bg { display: none; }
html.theme-pink #theme-pink-bg {
  display: block; position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
}
.pink-sparkle {
  position: absolute; bottom: -4vh; color: #ff8fc4; font-size: 1rem;
  text-shadow: 0 0 8px rgba(255,95,168,0.8); animation: sparkleRise linear infinite;
}
.pink-sparkle.p1 { left: 12%; animation-duration: 8s; animation-delay: 0s; }
.pink-sparkle.p2 { left: 30%; animation-duration: 9.5s; animation-delay: 2s; font-size: 0.7rem; }
.pink-sparkle.p3 { left: 52%; animation-duration: 7.2s; animation-delay: 1s; }
.pink-sparkle.p4 { left: 71%; animation-duration: 10s; animation-delay: 3.5s; font-size: 0.75rem; }
.pink-sparkle.p5 { left: 88%; animation-duration: 8.6s; animation-delay: 0.6s; }
@keyframes sparkleRise {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-90vh) rotate(180deg); opacity: 0; }
}

#theme-mrmoney-bg { display: none; }
html.theme-mrmoney #theme-mrmoney-bg {
  display: block; position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  mix-blend-mode: screen;
}
html.theme-mrmoney #theme-mrmoney-bg::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(61,220,99,0.22), transparent 62%);
  animation: moneyGlow 4s ease-in-out infinite;
}
@keyframes moneyGlow {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.money-bill {
  position: absolute; top: -8vh; font-size: 1.6rem; pointer-events: none;
  animation: moneyFall linear infinite;
  filter: drop-shadow(0 0 5px rgba(61,220,99,0.65));
}
.money-bill.mb1  { left: 3%;  animation-duration: 6.4s; animation-delay: 0s; }
.money-bill.mb2  { left: 12%; animation-duration: 7.6s; animation-delay: 1.1s; font-size: 1.3rem; }
.money-bill.mb3  { left: 21%; animation-duration: 6.9s; animation-delay: 2.2s; }
.money-bill.mb4  { left: 30%; animation-duration: 8.1s; animation-delay: 0.4s; font-size: 1.4rem; }
.money-bill.mb5  { left: 39%; animation-duration: 6.2s; animation-delay: 3.0s; }
.money-bill.mb6  { left: 48%; animation-duration: 7.3s; animation-delay: 1.6s; font-size: 1.5rem; }
.money-bill.mb7  { left: 57%; animation-duration: 6.7s; animation-delay: 2.6s; }
.money-bill.mb8  { left: 66%; animation-duration: 8.4s; animation-delay: 0.8s; font-size: 1.3rem; }
.money-bill.mb9  { left: 75%; animation-duration: 6.0s; animation-delay: 3.4s; }
.money-bill.mb10 { left: 84%; animation-duration: 7.8s; animation-delay: 1.3s; font-size: 1.45rem; }
.money-bill.mb11 { left: 93%; animation-duration: 6.5s; animation-delay: 2.9s; }
.money-bill.mb12 { left: -3%; animation-duration: 7.1s; animation-delay: 0.6s; font-size: 1.35rem; }
.money-bill.mb13 { left: 55%; animation-duration: 8.6s; animation-delay: 4.0s; }
.money-bill.mb14 { left: 8%;  animation-duration: 7.4s; animation-delay: 4.6s; font-size: 1.4rem; }
@keyframes moneyFall {
  0%   { transform: translateY(-10vh) rotate(-12deg); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(115vh) rotate(28deg); opacity: 0.9; }
}

#theme-storm-bg { display: none; }
html.theme-storm #theme-storm-bg {
  display: block; position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
}
/* A violet-tinged storm-glow horizon band ties the whole sky together, sitting
   behind the clouds/bolts so it reads as ambient supercell light rather than
   competing with the strikes themselves. */
html.theme-storm #theme-storm-bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(120,90,220,0.22), transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(20,30,60,0.5), transparent 60%);
}
/* Full-sky flash - fires in sync with the bolts below via the same timeline,
   so a strike genuinely lights up the whole scene for an instant instead of
   only glowing near the top of the screen. */
.storm-flash {
  position: absolute; inset: 0; background: rgba(210,230,255,0.9);
  opacity: 0; mix-blend-mode: screen; animation: stormFullFlash 6.4s infinite;
}
@keyframes stormFullFlash {
  0%, 90.3% { opacity: 0; }
  90.6%     { opacity: 0.55; }
  90.9%     { opacity: 0.05; }
  91.3%     { opacity: 0.4; }
  91.8%     { opacity: 0; }
  100%      { opacity: 0; }
}
.storm-cloud {
  position: absolute; top: -8vh; border-radius: 50%; filter: blur(24px); opacity: 0.65;
  background: radial-gradient(ellipse at 38% 35%, #5d6f92, #1c2530 75%);
  animation: cloudDrift ease-in-out infinite;
}
.storm-cloud.c1 { left: -10%; width: 46vw; height: 20vh; animation-duration: 26s; animation-delay: 0s; }
.storm-cloud.c2 { left: 20%;  width: 40vw; height: 17vh; animation-duration: 32s; animation-delay: 4s; }
.storm-cloud.c3 { left: 50%;  width: 48vw; height: 22vh; animation-duration: 29s; animation-delay: 8s; }
.storm-cloud.c4 { left: 74%;  width: 34vw; height: 16vh; animation-duration: 24s; animation-delay: 2s; }
.storm-cloud.c5 { left: 4%;   width: 30vw; height: 14vh; animation-duration: 20s; animation-delay: 6s; opacity: 0.4; }
.storm-cloud.c6 { left: 40%;  width: 26vw; height: 12vh; animation-duration: 18s; animation-delay: 3s; opacity: 0.5; background: radial-gradient(ellipse at 40% 35%, #6f5f9e, #1c2530 75%); }
.storm-cloud.c7 { left: 88%;  width: 22vw; height: 11vh; animation-duration: 22s; animation-delay: 5s; opacity: 0.35; }
@keyframes cloudDrift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4vw); }
}
.lightning-bolt {
  position: absolute; top: 2vh; width: 5vw; max-width: 46px; height: 32vh;
  background: linear-gradient(to bottom, #fff8d8, #cbe6ff 55%, transparent);
  clip-path: polygon(45% 0%, 60% 0%, 40% 35%, 58% 35%, 25% 100%, 42% 45%, 28% 45%);
  opacity: 0; filter: drop-shadow(0 0 14px #cfe8ff) drop-shadow(0 0 26px rgba(159,224,255,0.6));
  animation: boltStrike 6.4s infinite;
}
.lightning-bolt.b1 { left: 14%; animation-delay: 0s; }
.lightning-bolt.b2 { left: 63%; animation-delay: 1.4s; animation-duration: 9.1s; }
.lightning-bolt.b3 { left: 38%; top: 4vh; height: 26vh; width: 4vw; max-width: 36px; animation-delay: 3.6s; animation-duration: 7.8s; transform: scaleX(-1); }
.lightning-bolt.b4 { left: 82%; top: 1vh; height: 30vh; animation-delay: 5.2s; animation-duration: 8.5s; }
@keyframes boltStrike {
  0%, 90.5% { opacity: 0; }
  91%       { opacity: 1; }
  91.4%     { opacity: 0.15; }
  91.9%     { opacity: 0.9; }
  92.6%     { opacity: 0; }
  100%      { opacity: 0; }
}
/* Wind-blown streaks - fast, nearly-horizontal faint lines that sell the
   sense of a violent gust tearing across the whole scene, distinct from the
   more vertical rain below. */
.wind-streak {
  position: absolute; height: 1px; width: 18vw;
  background: linear-gradient(to right, transparent, rgba(159,224,255,0.35), transparent);
  animation: windGust linear infinite;
}
.wind-streak.w1 { top: 12%; animation-duration: 2.6s; animation-delay: 0s; }
.wind-streak.w2 { top: 24%; animation-duration: 3.1s; animation-delay: .6s; }
.wind-streak.w3 { top: 38%; animation-duration: 2.3s; animation-delay: 1.1s; }
.wind-streak.w4 { top: 55%; animation-duration: 2.9s; animation-delay: .3s; }
.wind-streak.w5 { top: 68%; animation-duration: 2.5s; animation-delay: 1.6s; }
.wind-streak.w6 { top: 80%; animation-duration: 3.3s; animation-delay: .9s; }
@keyframes windGust {
  0%   { transform: translateX(-25vw); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.5; }
  100% { transform: translateX(125vw); opacity: 0; }
}
.rain-streak {
  position: absolute; top: -12%; width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(159,224,255,0.75), transparent);
  animation: rainFall linear infinite;
}
.rain-streak.r1 { left: 4%;  height: 12vh; animation-duration: 0.85s; animation-delay: 0s; }
.rain-streak.r2 { left: 12%; height: 16vh; animation-duration: 1.05s; animation-delay: .2s; }
.rain-streak.r3 { left: 19%; height: 10vh; animation-duration: 0.75s; animation-delay: .4s; }
.rain-streak.r4 { left: 27%; height: 14vh; animation-duration: 0.95s; animation-delay: .1s; }
.rain-streak.r5 { left: 35%; height: 12vh; animation-duration: 0.9s;  animation-delay: .5s; }
.rain-streak.r6 { left: 43%; height: 17vh; animation-duration: 1.1s;  animation-delay: .3s; }
.rain-streak.r7 { left: 51%; height: 11vh; animation-duration: 0.8s;  animation-delay: .15s; }
.rain-streak.r8 { left: 58%; height: 15vh; animation-duration: 1.0s;  animation-delay: .45s; }
.rain-streak.r9  { left: 65%; height: 13vh; animation-duration: 0.88s; animation-delay: .35s; }
.rain-streak.r10 { left: 71%; height: 16vh; animation-duration: 1.0s;  animation-delay: .6s; }
.rain-streak.r11 { left: 78%; height: 10vh; animation-duration: 0.78s; animation-delay: .05s; }
.rain-streak.r12 { left: 85%; height: 14vh; animation-duration: 0.98s; animation-delay: .5s; }
.rain-streak.r13 { left: 91%; height: 12vh; animation-duration: 0.83s; animation-delay: .25s; }
.rain-streak.r14 { left: 8%;  height: 15vh; animation-duration: 1.08s; animation-delay: .55s; }
.rain-streak.r15 { left: 47%; height: 11vh; animation-duration: 0.8s;  animation-delay: .4s; }
.rain-streak.r16 { left: 96%; height: 13vh; animation-duration: 0.92s; animation-delay: .3s; }
.rain-streak.r17 { left: 24%; height: 13vh; animation-duration: 0.7s;  animation-delay: .12s; }
.rain-streak.r18 { left: 56%; height: 15vh; animation-duration: 0.93s; animation-delay: .48s; }
.rain-streak.r19 { left: 68%; height: 11vh; animation-duration: 0.82s; animation-delay: .22s; }
.rain-streak.r20 { left: 88%; height: 14vh; animation-duration: 1.02s; animation-delay: .58s; }
@keyframes rainFall {
  0%   { transform: translateY(-15vh); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(115vh); opacity: 0.25; }
}

/* ---------- Cyber Neon theme (Shop cosmetic, 1200 Bux): a neon-lit
   cyberpunk grid with drifting glyph particles and a subtle scanline
   overlay. ---------- */
html.theme-cyberneon {
  --bg: #050110;
  --bg2: #0b0620;
  --panel: #140a30;
  --line: #3d2a6e;
  --text: #eafcff;
  --muted: #9a8fc9;
  --tier1: #3E7CB1;
  --tier2: #4C9A5B;
  --tier3: #C1443C;
  --tier4: #E08A2C;
  --accent: #ff2ec4;
  --bg-grad-1: #1a0a3d;
  --bg-grad-2: #020103;
}
#theme-cyberneon-bg { display: none; }
html.theme-cyberneon #theme-cyberneon-bg {
  display: block; position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
}
/* Neon grid floor receding toward a horizon glow - the classic cyberpunk
   "digital plain" look, built from two perpendicular repeating-linear
   gradients rather than a heavier 3D-perspective trick. */
html.theme-cyberneon #theme-cyberneon-bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,46,196,0.14) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(56,224,255,0.14) 0 1px, transparent 1px 64px),
    radial-gradient(ellipse at 50% 8%, rgba(255,46,196,0.28), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(56,224,255,0.18), transparent 60%);
  animation: cyberGridPulse 5s ease-in-out infinite;
}
@keyframes cyberGridPulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}
/* Thin horizontal scanlines drifting slowly downward, like an old CRT. */
html.theme-cyberneon #theme-cyberneon-bg::after {
  content: ''; position: absolute; inset: -10% 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px);
  animation: cyberScan 9s linear infinite;
  opacity: 0.5;
}
@keyframes cyberScan {
  0%   { transform: translateY(0); }
  100% { transform: translateY(3px); }
}
.neon-particle {
  position: absolute; bottom: -6vh; font-family: var(--font-display); font-weight: 700;
  font-size: 0.9rem; color: #38e0ff; text-shadow: 0 0 8px rgba(56,224,255,0.9), 0 0 16px rgba(255,46,196,0.5);
  animation: neonRise linear infinite;
}
.neon-particle.np1 { left: 6%;  animation-duration: 9s;  animation-delay: 0s; }
.neon-particle.np2 { left: 18%; animation-duration: 7.5s; animation-delay: 1.5s; color: #ff2ec4; }
.neon-particle.np3 { left: 32%; animation-duration: 10s; animation-delay: 3s; }
.neon-particle.np4 { left: 47%; animation-duration: 8.2s; animation-delay: .8s; color: #ff2ec4; font-size: 0.7rem; }
.neon-particle.np5 { left: 61%; animation-duration: 9.4s; animation-delay: 2.4s; }
.neon-particle.np6 { left: 74%; animation-duration: 7.8s; animation-delay: 4s; color: #ff2ec4; }
.neon-particle.np7 { left: 86%; animation-duration: 10.5s; animation-delay: 1.1s; }
.neon-particle.np8 { left: 94%; animation-duration: 8.6s; animation-delay: 3.4s; color: #ff2ec4; font-size: 0.7rem; }
@keyframes neonRise {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.95; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(-100vh) rotate(8deg); opacity: 0; }
}

/* ---------- Abyss theme (Shop cosmetic, 1200 Bux): a bioluminescent deep-
   sea vault - drifting jellyfish glow, rising bubbles, and caustic light
   rays filtering down from above. ---------- */
html.theme-abyss {
  --bg: #01050a;
  --bg2: #031019;
  --panel: #06161f;
  --line: #0e3a4f;
  --text: #dffbff;
  --muted: #7fb8c9;
  --tier1: #3E7CB1;
  --tier2: #22e6c8;
  --tier3: #C1443C;
  --tier4: #E08A2C;
  --accent: #22e6c8;
  --bg-grad-1: #052030;
  --bg-grad-2: #00080d;
}
#theme-abyss-bg { display: none; }
html.theme-abyss #theme-abyss-bg {
  display: block; position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  mix-blend-mode: screen;
}
/* Caustic light rays sweeping slowly, as if sunlight is filtering down
   through open water above the vault. */
html.theme-abyss #theme-abyss-bg::before {
  content: ''; position: absolute; inset: -20% -10%;
  background: conic-gradient(from 200deg at 50% -10%,
    transparent 0deg, rgba(34,230,200,0.12) 10deg, transparent 22deg,
    transparent 150deg, rgba(120,200,255,0.10) 162deg, transparent 176deg,
    transparent 320deg, rgba(34,230,200,0.14) 332deg, transparent 344deg);
  animation: abyssCaustics 26s linear infinite;
}
@keyframes abyssCaustics {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
html.theme-abyss #theme-abyss-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(34,230,200,0.18), transparent 60%);
  animation: abyssGlow 5s ease-in-out infinite;
}
@keyframes abyssGlow {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.abyss-jelly {
  position: absolute; border-radius: 50%; filter: blur(30px); opacity: 0.5;
  animation: jellyDrift ease-in-out infinite;
}
.abyss-jelly.j1 { left: 8%;  top: 15%; width: 26vw; height: 22vh; background: radial-gradient(ellipse, #22e6c8, transparent 70%); animation-duration: 13s; }
.abyss-jelly.j2 { left: 55%; top: 45%; width: 30vw; height: 24vh; background: radial-gradient(ellipse, #8a6fe8, transparent 70%); animation-duration: 17s; animation-delay: 3s; }
.abyss-jelly.j3 { left: 30%; top: 70%; width: 22vw; height: 18vh; background: radial-gradient(ellipse, #38bdf8, transparent 70%); animation-duration: 15s; animation-delay: 5s; opacity: 0.4; }
@keyframes jellyDrift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(3vw,-2vh) scale(1.12); }
}
.abyss-bubble {
  position: absolute; bottom: -6vh; border-radius: 50%;
  border: 1px solid rgba(223,251,255,0.5);
  background: radial-gradient(circle at 35% 30%, rgba(223,251,255,0.35), transparent 70%);
  animation: bubbleRise linear infinite;
}
.abyss-bubble.bb1 { left: 5%;  width: 8px;  height: 8px;  animation-duration: 8s;  animation-delay: 0s; }
.abyss-bubble.bb2 { left: 16%; width: 5px;  height: 5px;  animation-duration: 6.5s; animation-delay: 1.2s; }
.abyss-bubble.bb3 { left: 27%; width: 10px; height: 10px; animation-duration: 9.5s; animation-delay: 2.4s; }
.abyss-bubble.bb4 { left: 38%; width: 6px;  height: 6px;  animation-duration: 7.2s; animation-delay: .6s; }
.abyss-bubble.bb5 { left: 49%; width: 7px;  height: 7px;  animation-duration: 8.8s; animation-delay: 3.1s; }
.abyss-bubble.bb6 { left: 60%; width: 9px;  height: 9px;  animation-duration: 6.9s; animation-delay: 1.8s; }
.abyss-bubble.bb7 { left: 71%; width: 5px;  height: 5px;  animation-duration: 9.1s; animation-delay: 2.9s; }
.abyss-bubble.bb8 { left: 81%; width: 8px;  height: 8px;  animation-duration: 7.6s; animation-delay: .3s; }
.abyss-bubble.bb9 { left: 90%; width: 6px;  height: 6px;  animation-duration: 8.3s; animation-delay: 2s; }
.abyss-bubble.bb10 { left: 96%; width: 10px; height: 10px; animation-duration: 6.4s; animation-delay: 1s; }
@keyframes bubbleRise {
  0%   { transform: translate(0,0); opacity: 0; }
  8%   { opacity: 0.9; }
  50%  { transform: translate(6px, -55vh); }
  100% { transform: translate(-4px, -110vh); opacity: 0; }
}

/* ---------- Magma theme (Shop cosmetic, 1200 Bux): a living volcanic core —
   undulating molten lava waves, buoyant rising embers, glowing fissure veins,
   and seismic thermal surges. ---------- */
html.theme-magma {
  --bg: #0d0402;
  --bg2: #160704;
  --panel: #200b06;
  --line: #45170d;
  --text: #fff3eb;
  --muted: #c98875;
  --tier1: #38bdf8;
  --tier2: #34d399;
  --tier3: #ef4444;
  --tier4: #f97316;
  --accent: #ff5500;
  --bg-grad-1: #2c0e06;
  --bg-grad-2: #090201;
}
#theme-magma-bg { display: none; }
html.theme-magma #theme-magma-bg {
  display: block; position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
}

/* Seismic subterranean heat surge: breathing glowing core */
.magma-heat-surge {
  position: absolute; left: 50%; bottom: -15vh; width: 110vw; height: 50vh;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 75, 0, 0.38), rgba(255, 140, 0, 0.18) 45%, transparent 75%);
  filter: blur(40px);
  animation: magmaSurge 6s ease-in-out infinite alternate;
}
@keyframes magmaSurge {
  0%   { opacity: 0.55; transform: translateX(-50%) scale(0.95); }
  50%  { opacity: 0.95; transform: translateX(-50%) scale(1.08); filter: blur(35px); }
  100% { opacity: 0.55; transform: translateX(-50%) scale(0.95); }
}

.magma-cavern-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 15%, rgba(255, 60, 0, 0.08), transparent 70%),
              linear-gradient(180deg, transparent 40%, rgba(255, 50, 0, 0.12) 80%, rgba(255, 90, 0, 0.28) 100%);
  pointer-events: none;
}

.magma-smoke-layer {
  position: absolute; bottom: 8vh; left: 0; right: 0; height: 35vh;
  background: radial-gradient(ellipse at 30% 60%, rgba(40, 15, 10, 0.65), transparent 60%),
              radial-gradient(ellipse at 75% 50%, rgba(45, 18, 12, 0.55), transparent 60%);
  filter: blur(25px);
  opacity: 0.6;
  animation: magmaSmokeDrift 14s ease-in-out infinite alternate;
}
@keyframes magmaSmokeDrift {
  0%   { transform: translateX(-2vw) scaleY(0.95); }
  100% { transform: translateX(2vw) scaleY(1.1); }
}

/* Jagged basalt rock crags framing the bottom corners */
.magma-rock-crags {
  position: absolute; bottom: 0; width: 24vw; height: 22vh; min-width: 140px;
  background: linear-gradient(135deg, #180805 0%, #0c0302 70%, #050100 100%);
  border-top: 2px solid rgba(255, 90, 0, 0.35);
  box-shadow: 0 0 25px rgba(255, 70, 0, 0.25);
  z-index: 1;
}
.magma-rock-crags.left {
  left: -2vw;
  clip-path: polygon(0% 100%, 0% 15%, 35% 40%, 65% 15%, 85% 55%, 100% 100%);
}
.magma-rock-crags.right {
  right: -2vw;
  clip-path: polygon(0% 100%, 15% 55%, 35% 15%, 65% 40%, 100% 15%, 100% 100%);
}

/* Pulsing molten fissures / magma veins */
.magma-fissure {
  position: absolute; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 230, 100, 0.95), rgba(255, 80, 0, 0.85), transparent);
  filter: drop-shadow(0 0 8px #ff4500) drop-shadow(0 0 16px #ff8800);
  border-radius: 2px;
}
.magma-fissure.f1 {
  left: 5vw; bottom: 4vh; width: 3px; height: 12vh;
  transform: rotate(-18deg);
  animation: fissurePulse 3.8s ease-in-out infinite alternate;
}
.magma-fissure.f2 {
  right: 6vw; bottom: 5vh; width: 3px; height: 14vh;
  transform: rotate(22deg);
  animation: fissurePulse 4.6s ease-in-out infinite alternate 1.2s;
}
.magma-fissure.f3 {
  left: 12vw; bottom: 2vh; width: 2px; height: 8vh;
  transform: rotate(12deg);
  animation: fissurePulse 3.2s ease-in-out infinite alternate 0.5s;
}
@keyframes fissurePulse {
  0%   { opacity: 0.4; filter: drop-shadow(0 0 4px #ff3300); }
  50%  { opacity: 1; filter: drop-shadow(0 0 10px #ff7700) drop-shadow(0 0 20px #ffa500); }
  100% { opacity: 0.4; filter: drop-shadow(0 0 4px #ff3300); }
}

/* Layered undulating molten lava waves at base */
.magma-sea-back {
  position: absolute; bottom: -8px; left: -10%; right: -10%; height: 75px;
  background: radial-gradient(ellipse at 50% 0%, #ff8800, #ff3700 45%, #7a0c00 90%);
  border-top: 2px solid rgba(255, 220, 120, 0.85);
  box-shadow: 0 -10px 30px rgba(255, 75, 0, 0.5);
  border-radius: 50% 50% 0 0 / 25px 25px 0 0;
  animation: magmaWaveBack 5.5s ease-in-out infinite alternate;
  z-index: 1;
}
@keyframes magmaWaveBack {
  0%   { transform: translateY(0) scaleX(1); }
  50%  { transform: translateY(-8px) scaleX(1.03); }
  100% { transform: translateY(4px) scaleX(0.98); }
}

.magma-sea-front {
  position: absolute; bottom: -12px; left: -15%; right: -15%; height: 55px;
  background: linear-gradient(180deg, #ffdd44 0%, #ff5500 40%, #500800 100%);
  border-top: 3px solid #fff5cc;
  box-shadow: 0 -8px 25px rgba(255, 140, 0, 0.65), inset 0 2px 10px #ffffff;
  border-radius: 45% 55% 0 0 / 20px 20px 0 0;
  animation: magmaWaveFront 4.2s ease-in-out infinite alternate;
  z-index: 2;
}
@keyframes magmaWaveFront {
  0%   { transform: translateY(2px) scaleX(1.02); }
  50%  { transform: translateY(-6px) scaleX(0.98); }
  100% { transform: translateY(3px) scaleX(1.03); }
}

/* Boiling and popping magma surface bubbles */
.magma-bubble {
  position: absolute; bottom: 35px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffae0 0%, #ffa500 50%, #ff3300 100%);
  box-shadow: 0 0 12px rgba(255, 140, 0, 0.9);
  opacity: 0; z-index: 3;
  animation: magmaBubblePop linear infinite;
}
.magma-bubble.mb1 { left: 18%; width: 14px; height: 12px; animation-duration: 4.2s; animation-delay: 0.2s; }
.magma-bubble.mb2 { left: 34%; width: 18px; height: 15px; animation-duration: 5.1s; animation-delay: 1.8s; }
.magma-bubble.mb3 { left: 52%; width: 12px; height: 10px; animation-duration: 3.8s; animation-delay: 0.9s; }
.magma-bubble.mb4 { left: 68%; width: 16px; height: 13px; animation-duration: 4.7s; animation-delay: 2.5s; }
.magma-bubble.mb5 { left: 82%; width: 14px; height: 11px; animation-duration: 4.4s; animation-delay: 1.3s; }

@keyframes magmaBubblePop {
  0%   { opacity: 0; transform: scale(0.2) translateY(8px); }
  45%  { opacity: 0.95; transform: scale(1) translateY(0); }
  75%  { opacity: 1; transform: scale(1.35) translateY(-3px); }
  85%  { opacity: 0.8; transform: scale(1.6) translateY(-5px); filter: brightness(1.6); }
  90%  { opacity: 0; transform: scale(2.2) translateY(-7px); }
  100% { opacity: 0; }
}

/* Swirling rising embers & fiery cinders */
.magma-ember {
  position: absolute; bottom: -2vh; border-radius: 50%;
  background: #fff0bb;
  box-shadow: 0 0 6px #ff8800, 0 0 14px #ff2200, 0 0 22px rgba(255, 60, 0, 0.8);
  opacity: 0; z-index: 2;
  animation: magmaEmberRise linear infinite;
}
.magma-ember.e1  { left: 8%;  width: 4px; height: 4px; animation-duration: 6.8s; animation-delay: 0.3s; }
.magma-ember.e2  { left: 16%; width: 3px; height: 3px; animation-duration: 8.2s; animation-delay: 1.7s; }
.magma-ember.e3  { left: 24%; width: 5px; height: 5px; animation-duration: 5.9s; animation-delay: 3.1s; }
.magma-ember.e4  { left: 32%; width: 3px; height: 3px; animation-duration: 7.4s; animation-delay: 0.8s; }
.magma-ember.e5  { left: 41%; width: 6px; height: 6px; animation-duration: 6.2s; animation-delay: 2.2s; }
.magma-ember.e6  { left: 49%; width: 4px; height: 4px; animation-duration: 7.9s; animation-delay: 4.0s; }
.magma-ember.e7  { left: 57%; width: 3px; height: 3px; animation-duration: 6.5s; animation-delay: 1.1s; }
.magma-ember.e8  { left: 65%; width: 5px; height: 5px; animation-duration: 8.5s; animation-delay: 2.9s; }
.magma-ember.e9  { left: 73%; width: 4px; height: 4px; animation-duration: 6.1s; animation-delay: 0.5s; }
.magma-ember.e10 { left: 81%; width: 3px; height: 3px; animation-duration: 7.7s; animation-delay: 3.6s; }
.magma-ember.e11 { left: 89%; width: 5px; height: 5px; animation-duration: 6.9s; animation-delay: 1.9s; }
.magma-ember.e12 { left: 95%; width: 4px; height: 4px; animation-duration: 7.2s; animation-delay: 2.7s; }
.magma-ember.e13 { left: 28%; width: 2px; height: 2px; animation-duration: 9.0s; animation-delay: 4.5s; }
.magma-ember.e14 { left: 62%; width: 3px; height: 3px; animation-duration: 8.8s; animation-delay: 5.2s; }

@keyframes magmaEmberRise {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  10%  { opacity: 0.95; transform: translate(4px, -10vh) scale(1); }
  35%  { transform: translate(-8px, -35vh) scale(0.95); }
  65%  { transform: translate(10px, -65vh) scale(0.85); opacity: 0.85; }
  90%  { opacity: 0.6; }
  100% { transform: translate(-5px, -105vh) scale(0.4); opacity: 0; }
}

/* Card tactile reactivity in Magma theme */
html.theme-magma .card {
  border-color: rgba(255, 90, 0, 0.38);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 12px rgba(255, 75, 0, 0.18);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
html.theme-magma .card:hover {
  border-color: #ff7700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 22px rgba(255, 110, 0, 0.55), inset 0 0 10px rgba(255, 70, 0, 0.25);
}

/* Elevated menu-footer over magma surface */
html.theme-magma .menu-footer {
  background: rgba(13, 4, 2, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(255, 85, 0, 0.45) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.6) !important;
  padding: 4px !important;
  gap: 4px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: calc(100% - 20px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html.theme-magma .menu-footer .link-btn {
  color: #ffedd5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
  font-weight: 500;
}
html.theme-magma .menu-footer .link-btn:hover {
  color: #ffaa44;
  text-shadow: 0 0 10px rgba(255, 170, 68, 0.9);
}
html.theme-magma .menu-footer .footer-dot {
  color: rgba(255, 140, 50, 0.7);
}

/* ---------- Astral Void Theme (Trial Tower Floor 30 cosmetic): a deep celestial
   singularity — swirling dimensional accretion vortex, cosmic pulsar beams,
   glowing stardust nebulas, gravitationally lensed orbiting particles, and
   shooting chromatic starbursts. ---------- */
html.theme-astral {
  --bg: #04010a;
  --bg2: #0b0417;
  --panel: #110724;
  --line: #331557;
  --text: #f5f3ff;
  --muted: #a78bfa;
  --tier1: #38bdf8;
  --tier2: #34d399;
  --tier3: #f43f5e;
  --tier4: #c084fc;
  --accent: #a855f7;
  --bg-grad-1: #190736;
  --bg-grad-2: #020006;
}
#theme-astral-bg { display: none; }
html.theme-astral #theme-astral-bg {
  display: block; position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
}

.astral-space-gradient {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(60, 16, 110, 0.45) 0%, rgba(17, 6, 38, 0.75) 45%, rgba(4, 1, 10, 0.98) 100%);
}

.astral-nebula {
  position: absolute; border-radius: 50%; filter: blur(65px); pointer-events: none;
}
.astral-nebula.n1 {
  width: 580px; height: 580px; top: 8%; left: 15%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.28) 0%, rgba(56, 189, 248, 0.16) 55%, transparent 80%);
  animation: astralNebulaDrift 20s ease-in-out infinite alternate;
}
.astral-nebula.n2 {
  width: 650px; height: 500px; bottom: 8%; right: 8%;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.22) 0%, rgba(192, 132, 252, 0.18) 50%, transparent 80%);
  animation: astralNebulaDrift 24s ease-in-out infinite alternate-reverse;
}
.astral-nebula.n3 {
  width: 420px; height: 420px; top: 48%; left: 52%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.18) 0%, rgba(139, 92, 246, 0.16) 60%, transparent 80%);
  animation: astralNebulaDrift 16s ease-in-out infinite alternate;
}
@keyframes astralNebulaDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(45px, -35px) scale(1.15); }
  100% { transform: translate(-35px, 45px) scale(0.9); }
}

/* Central rotating singularity and accretion vortex */
.astral-vortex-outer {
  position: absolute; top: 35%; left: 50%; width: 480px; height: 480px;
  margin: -240px 0 0 -240px;
  border-radius: 50%;
  border: 1.5px dashed rgba(192, 132, 252, 0.35);
  box-shadow: 0 0 60px rgba(168, 85, 247, 0.3), inset 0 0 60px rgba(56, 189, 248, 0.25);
  animation: astralSpin 40s linear infinite;
}
.astral-vortex-inner {
  position: absolute; top: 35%; left: 50%; width: 300px; height: 300px;
  margin: -150px 0 0 -150px;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 40px rgba(244, 63, 94, 0.3);
  animation: astralSpinRev 25s linear infinite;
}
.astral-accretion-disk {
  position: absolute; top: 35%; left: 50%; width: 380px; height: 100px;
  margin: -50px 0 0 -190px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(236, 72, 153, 0.4) 0%, rgba(168, 85, 247, 0.25) 50%, transparent 80%);
  filter: blur(10px);
  transform: rotate(-25deg);
  animation: accretionPulse 5s ease-in-out infinite alternate;
}
.astral-singularity-core {
  position: absolute; top: 35%; left: 50%; width: 80px; height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  background: #020005;
  box-shadow: 0 0 30px 10px rgba(168, 85, 247, 0.9), 0 0 70px 22px rgba(56, 189, 248, 0.55);
  animation: singularityBreathe 4s ease-in-out infinite alternate;
}
@keyframes astralSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes astralSpinRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes accretionPulse {
  0% { transform: rotate(-25deg) scale(0.9); opacity: 0.6; }
  100% { transform: rotate(-25deg) scale(1.15); opacity: 1; filter: blur(6px); }
}
@keyframes singularityBreathe {
  0% { transform: scale(0.9); box-shadow: 0 0 24px 8px rgba(168, 85, 247, 0.7), 0 0 50px 15px rgba(56, 189, 248, 0.4); }
  100% { transform: scale(1.12); box-shadow: 0 0 42px 15px rgba(192, 132, 252, 1), 0 0 85px 30px rgba(244, 63, 94, 0.6); }
}

/* Pulsar energy beams */
.astral-pulsar-beam {
  position: absolute; top: 35%; left: 50%; pointer-events: none;
}
.astral-pulsar-beam.v {
  width: 2.5px; height: 100vh; margin: -50vh 0 0 -1.25px;
  background: linear-gradient(180deg, transparent 0%, rgba(56, 189, 248, 0.7) 35%, #fff 50%, rgba(192, 132, 252, 0.7) 65%, transparent 100%);
  filter: blur(1.5px);
  animation: pulsarBeamFlicker 3s ease-in-out infinite alternate;
}
.astral-pulsar-beam.h {
  width: 100vw; height: 2px; margin: -1px 0 0 -50vw;
  background: linear-gradient(90deg, transparent 0%, rgba(244, 63, 94, 0.5) 35%, #fff 50%, rgba(168, 85, 247, 0.5) 65%, transparent 100%);
  filter: blur(1px);
  animation: pulsarBeamFlicker 4.2s ease-in-out infinite alternate-reverse;
}
@keyframes pulsarBeamFlicker {
  0% { opacity: 0.4; transform: scaleY(0.92); }
  100% { opacity: 0.95; transform: scaleY(1.08); }
}

/* Celestial runes / geometric glyphs */
.astral-glyph {
  position: absolute; border: 1.5px solid rgba(168, 85, 247, 0.35); border-radius: 50%;
}
.astral-glyph.g1 {
  top: 18%; left: 14%; width: 150px; height: 150px;
  border-top-color: rgba(56, 189, 248, 0.8);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
  animation: astralSpin 30s linear infinite;
}
.astral-glyph.g2 {
  bottom: 22%; right: 16%; width: 190px; height: 190px;
  border-bottom-color: rgba(244, 63, 94, 0.75);
  box-shadow: 0 0 18px rgba(244, 63, 94, 0.2);
  animation: astralSpinRev 36s linear infinite;
}

/* Stars */
.astral-star {
  position: absolute; border-radius: 50%; background: #ffffff;
  box-shadow: 0 0 6px 2px rgba(192, 132, 252, 0.85);
  animation: astralStarTwinkle 3.8s ease-in-out infinite alternate;
}
.astral-star.as1 { top: 8%;  left: 12%; width: 3px; height: 3px; animation-delay: 0.2s; }
.astral-star.as2 { top: 15%; left: 78%; width: 4px; height: 4px; animation-delay: 1.1s; }
.astral-star.as3 { top: 22%; left: 38%; width: 2px; height: 2px; animation-delay: 2.3s; }
.astral-star.as4 { top: 32%; left: 88%; width: 3px; height: 3px; animation-delay: 0.7s; }
.astral-star.as5 { top: 48%; left: 14%; width: 4px; height: 4px; animation-delay: 1.8s; }
.astral-star.as6 { top: 58%; left: 82%; width: 2px; height: 2px; animation-delay: 2.9s; }
.astral-star.as7 { top: 68%; left: 28%; width: 3px; height: 3px; animation-delay: 0.4s; }
.astral-star.as8 { top: 78%; left: 72%; width: 4px; height: 4px; animation-delay: 1.5s; }
.astral-star.as9 { top: 86%; left: 45%; width: 3px; height: 3px; animation-delay: 2.1s; }
.astral-star.as10{ top: 92%; left: 18%; width: 2px; height: 2px; animation-delay: 0.9s; }
.astral-star.as11{ top: 12%; left: 52%; width: 3px; height: 3px; animation-delay: 1.7s; }
.astral-star.as12{ top: 42%; left: 6%;  width: 4px; height: 4px; animation-delay: 2.6s; }
.astral-star.as13{ top: 62%; left: 94%; width: 3px; height: 3px; animation-delay: 0.5s; }
.astral-star.as14{ top: 82%; left: 62%; width: 2px; height: 2px; animation-delay: 1.3s; }

@keyframes astralStarTwinkle {
  0% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.4); box-shadow: 0 0 12px 4px rgba(56, 189, 248, 1); }
  100% { opacity: 0.4; transform: scale(0.9); }
}

/* Comets */
.astral-comet {
  position: absolute; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(192, 132, 252, 0.7), transparent);
  border-radius: 50%; filter: blur(0.5px);
  transform: rotate(-35deg);
  opacity: 0;
}
.astral-comet.ac1 {
  width: 150px; top: 10%; left: 82%;
  animation: astralCometShoot 8.5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  animation-delay: 1s;
}
.astral-comet.ac2 {
  width: 190px; top: 44%; left: 96%;
  animation: astralCometShoot 11s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  animation-delay: 6s;
}
@keyframes astralCometShoot {
  0% { opacity: 0; transform: translate(0, 0) rotate(-35deg); }
  5% { opacity: 1; }
  22% { transform: translate(-360px, 240px) rotate(-35deg); opacity: 0; }
  100% { opacity: 0; }
}

/* Card tactile reactivity in Astral Void theme */
html.theme-astral .card {
  border-color: rgba(168, 85, 247, 0.45);
  background: linear-gradient(145deg, #15082e 0%, #0c041b 100%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.85), 0 0 16px rgba(168, 85, 247, 0.25);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
html.theme-astral .card:hover {
  border-color: #c084fc;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.92), 0 0 26px rgba(192, 132, 252, 0.7), inset 0 0 14px rgba(56, 189, 248, 0.35);
}

/* Elevated menu-footer in Astral Void theme */
html.theme-astral .menu-footer {
  background: rgba(13, 6, 28, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.6) !important;
  padding: 4px !important;
  gap: 4px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: calc(100% - 20px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html.theme-astral .menu-footer .link-btn {
  color: #f5f3ff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
  font-weight: 500;
}
html.theme-astral .menu-footer .link-btn:hover {
  color: #ddd6fe;
  text-shadow: 0 0 12px rgba(221, 214, 254, 0.95);
}
html.theme-astral .menu-footer .footer-dot {
  color: rgba(192, 132, 252, 0.7);
}

/* ==========================================================================
   THEME: QUANTUM FLUX (Trial Tower Floor 10 Reward)
   ========================================================================== */
html.theme-quantum {
  --bg: #020617;
  --bg2: #051329;
  --panel: #0a1e3f;
  --line: #0284c7;
  --text: #f0f9ff;
  --muted: #38bdf8;
  --accent: #00f2fe;
  --bg-grad-1: #031838;
  --bg-grad-2: #010814;
}

#theme-quantum-bg {
  display: none;
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
html.theme-quantum #theme-quantum-bg { display: block; }

.quantum-space-mesh {
  position: absolute; inset: 0;
  background-image: 
    linear-gradient(to right, rgba(0, 242, 254, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 242, 254, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 40%, transparent 85%);
  animation: quantumMeshShift 24s linear infinite;
}
@keyframes quantumMeshShift {
  0% { transform: translateY(0); }
  100% { transform: translateY(40px); }
}

.quantum-core-pulse {
  position: absolute; top: 50%; left: 50%; width: 420px; height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 242, 254, 0.22) 0%, rgba(14, 165, 233, 0.08) 50%, transparent 75%);
  filter: blur(28px);
  animation: quantumCorePulse 6s ease-in-out infinite alternate;
}
@keyframes quantumCorePulse {
  0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0.95; }
}

.quantum-time-ribbon {
  position: absolute; height: 3px; border-radius: 50%; filter: blur(2px); opacity: 0.6;
}
.quantum-time-ribbon.r1 {
  width: 140%; top: 28%; left: -20%;
  background: linear-gradient(90deg, transparent, #00f2fe 30%, #3b82f6 70%, transparent);
  transform: rotate(-6deg);
  animation: quantumRibbonWave 9s ease-in-out infinite alternate;
}
.quantum-time-ribbon.r2 {
  width: 140%; bottom: 32%; left: -20%;
  background: linear-gradient(90deg, transparent, #38bdf8 30%, #6366f1 70%, transparent);
  transform: rotate(8deg);
  animation: quantumRibbonWave 12s ease-in-out infinite alternate-reverse;
}
@keyframes quantumRibbonWave {
  0% { transform: translateY(-20px) rotate(-6deg) scaleY(1); opacity: 0.4; }
  100% { transform: translateY(25px) rotate(-4deg) scaleY(2); opacity: 0.8; }
}

.quantum-tachyon-ring {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1.5px dashed rgba(0, 242, 254, 0.4);
  transform: translate(-50%, -50%);
}
.quantum-tachyon-ring.tr1 {
  width: 320px; height: 320px;
  animation: quantumSpin 20s linear infinite;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.15);
}
.quantum-tachyon-ring.tr2 {
  width: 520px; height: 520px;
  border-color: rgba(56, 189, 248, 0.25);
  animation: quantumSpinRev 32s linear infinite;
}
.quantum-tachyon-ring.tr3 {
  width: 760px; height: 760px;
  border-color: rgba(99, 102, 241, 0.2);
  animation: quantumSpin 48s linear infinite;
}
@keyframes quantumSpin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes quantumSpinRev {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

.quantum-node {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px 3px rgba(0, 242, 254, 0.9);
  animation: quantumNodeFlicker 3s ease-in-out infinite alternate;
}
.quantum-node.qn1 { top: 18%; left: 24%; animation-delay: 0.2s; }
.quantum-node.qn2 { top: 32%; left: 78%; animation-delay: 1.1s; }
.quantum-node.qn3 { top: 68%; left: 16%; animation-delay: 0.7s; }
.quantum-node.qn4 { top: 74%; left: 84%; animation-delay: 1.8s; }
.quantum-node.qn5 { top: 12%; left: 62%; animation-delay: 2.3s; }
.quantum-node.qn6 { top: 88%; left: 42%; animation-delay: 0.5s; }
.quantum-node.qn7 { top: 48%; left: 8%;  animation-delay: 1.4s; }
.quantum-node.qn8 { top: 52%; left: 92%; animation-delay: 2.1s; }
@keyframes quantumNodeFlicker {
  0% { opacity: 0.2; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.4); box-shadow: 0 0 14px 4px #00f2fe; }
  100% { opacity: 0.3; transform: scale(0.9); }
}

.quantum-stream {
  position: absolute; width: 2px; height: 120px;
  background: linear-gradient(180deg, #00f2fe, rgba(56, 189, 248, 0.4), transparent);
  border-radius: 2px;
  opacity: 0;
  animation: quantumStreamUp 6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.quantum-stream.s1 { left: 15%; top: 60%; animation-delay: 0.5s; }
.quantum-stream.s2 { left: 35%; top: 70%; animation-delay: 2.5s; }
.quantum-stream.s3 { left: 55%; top: 55%; animation-delay: 1.2s; }
.quantum-stream.s4 { left: 75%; top: 65%; animation-delay: 4.1s; }
.quantum-stream.s5 { left: 88%; top: 50%; animation-delay: 3.3s; }
.quantum-stream.s6 { left: 25%; top: 80%; animation-delay: 5.0s; }
@keyframes quantumStreamUp {
  0% { transform: translateY(80px); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { transform: translateY(-220px); opacity: 0; }
}

html.theme-quantum .card {
  border-color: rgba(0, 242, 254, 0.35);
  background: linear-gradient(145deg, #091a38 0%, #030c1e 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 242, 254, 0.18);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
html.theme-quantum .card:hover {
  border-color: #00f2fe;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.92), 0 0 24px rgba(0, 242, 254, 0.65), inset 0 0 12px rgba(56, 189, 248, 0.3);
}
html.theme-quantum .menu-footer {
  background: rgba(5, 19, 41, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(0, 242, 254, 0.45) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.6) !important;
  padding: 4px !important;
  gap: 4px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: calc(100% - 20px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html.theme-quantum .menu-footer .link-btn { color: #f0f9ff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95); }
html.theme-quantum .menu-footer .link-btn:hover { color: #38bdf8; text-shadow: 0 0 12px rgba(56, 189, 248, 0.95); }
html.theme-quantum .menu-footer .footer-dot { color: rgba(0, 242, 254, 0.6); }

/* ==========================================================================
   THEME: GLACIAL FROST (Trial Tower Floor 15 Reward)
   ========================================================================== */
html.theme-glacier {
  --bg: #020d18;
  --bg2: #061e33;
  --panel: #0a2d4c;
  --line: #0284c7;
  --text: #f0fdfa;
  --muted: #67e8f9;
  --accent: #00f5d4;
  --bg-grad-1: #072a48;
  --bg-grad-2: #010a14;
}

#theme-glacier-bg {
  display: none;
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
html.theme-glacier #theme-glacier-bg { display: block; }

.glacier-subzero-haze {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(0, 245, 212, 0.12) 0%, rgba(6, 30, 51, 0.4) 60%, transparent 90%);
}

.glacier-aurora-wave {
  position: absolute; width: 140%; height: 350px; left: -20%;
  filter: blur(40px); opacity: 0.35; mix-blend-mode: screen;
}
.glacier-aurora-wave.gw1 {
  top: -80px;
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.45), rgba(56, 189, 248, 0.25), transparent);
  animation: glacierAuroraFloat 16s ease-in-out infinite alternate;
}
.glacier-aurora-wave.gw2 {
  top: 10%;
  background: linear-gradient(110deg, rgba(14, 165, 233, 0.35), rgba(167, 139, 250, 0.2), transparent);
  animation: glacierAuroraFloat 22s ease-in-out infinite alternate-reverse;
}
.glacier-aurora-wave.gw3 {
  bottom: 0;
  background: linear-gradient(70deg, rgba(0, 245, 212, 0.25), rgba(34, 211, 238, 0.3), transparent);
  animation: glacierAuroraFloat 18s ease-in-out infinite alternate;
}
@keyframes glacierAuroraFloat {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(-30px, 20px) scale(1.08) rotate(2deg); }
  100% { transform: translate(40px, -25px) scale(0.95) rotate(-2deg); }
}

.glacier-crystal-spires {
  position: absolute; bottom: 0; width: 340px; height: 260px;
  opacity: 0.22; pointer-events: none;
}
.glacier-crystal-spires.left {
  left: -40px;
  background: linear-gradient(45deg, rgba(0, 245, 212, 0.4) 0%, rgba(56, 189, 248, 0.15) 60%, transparent 80%);
  clip-path: polygon(0 100%, 20% 40%, 45% 70%, 70% 20%, 90% 65%, 100% 100%);
}
.glacier-crystal-spires.right {
  right: -40px;
  background: linear-gradient(-45deg, rgba(0, 245, 212, 0.4) 0%, rgba(14, 165, 233, 0.15) 60%, transparent 80%);
  clip-path: polygon(0 100%, 15% 60%, 40% 25%, 65% 75%, 85% 35%, 100% 100%);
}

.glacier-ice-prism {
  position: absolute; border: 1.5px solid rgba(0, 245, 212, 0.5);
  box-shadow: 0 0 16px rgba(0, 245, 212, 0.25), inset 0 0 10px rgba(103, 232, 249, 0.2);
  backdrop-filter: blur(4px);
}
.glacier-ice-prism.ip1 {
  width: 50px; height: 50px; top: 22%; left: 12%;
  transform: rotate(45deg);
  animation: glacierPrismRotate 14s linear infinite;
}
.glacier-ice-prism.ip2 {
  width: 70px; height: 70px; top: 65%; right: 10%;
  transform: rotate(30deg);
  animation: glacierPrismRotate 18s linear infinite reverse;
}
.glacier-ice-prism.ip3 {
  width: 35px; height: 35px; bottom: 25%; left: 8%;
  transform: rotate(60deg);
  animation: glacierPrismRotate 11s linear infinite;
}
@keyframes glacierPrismRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.glacier-cryo-flake {
  position: absolute; border-radius: 50%; background: #ffffff;
  box-shadow: 0 0 8px 2px rgba(0, 245, 212, 0.8);
  opacity: 0.7;
  animation: glacierFlakeFall 10s linear infinite;
}
.glacier-cryo-flake.f1  { width: 4px; height: 4px; left: 8%;  animation-duration: 9s;  animation-delay: 0s; }
.glacier-cryo-flake.f2  { width: 3px; height: 3px; left: 18%; animation-duration: 12s; animation-delay: 2s; }
.glacier-cryo-flake.f3  { width: 5px; height: 5px; left: 28%; animation-duration: 8s;  animation-delay: 4s; }
.glacier-cryo-flake.f4  { width: 2px; height: 2px; left: 38%; animation-duration: 14s; animation-delay: 1s; }
.glacier-cryo-flake.f5  { width: 4px; height: 4px; left: 48%; animation-duration: 11s; animation-delay: 5s; }
.glacier-cryo-flake.f6  { width: 3px; height: 3px; left: 58%; animation-duration: 9s;  animation-delay: 3s; }
.glacier-cryo-flake.f7  { width: 5px; height: 5px; left: 68%; animation-duration: 13s; animation-delay: 0.5s;}
.glacier-cryo-flake.f8  { width: 2px; height: 2px; left: 78%; animation-duration: 15s; animation-delay: 2.5s;}
.glacier-cryo-flake.f9  { width: 4px; height: 4px; left: 88%; animation-duration: 10s; animation-delay: 4.5s;}
.glacier-cryo-flake.f10 { width: 3px; height: 3px; left: 94%; animation-duration: 12s; animation-delay: 1.5s;}
.glacier-cryo-flake.f11 { width: 4px; height: 4px; left: 22%; animation-duration: 11s; animation-delay: 6s; }
.glacier-cryo-flake.f12 { width: 3px; height: 3px; left: 82%; animation-duration: 9s;  animation-delay: 7s; }
@keyframes glacierFlakeFall {
  0% { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  10% { opacity: 0.85; }
  90% { opacity: 0.85; }
  100% { transform: translate(30px, 105vh) rotate(360deg); opacity: 0; }
}

html.theme-glacier .card {
  border-color: rgba(0, 245, 212, 0.4);
  background: linear-gradient(145deg, #0c2745 0%, #051424 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85), 0 0 16px rgba(0, 245, 212, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
html.theme-glacier .card:hover {
  border-color: #00f5d4;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.92), 0 0 28px rgba(0, 245, 212, 0.7), inset 0 0 14px rgba(103, 232, 249, 0.35);
}
html.theme-glacier .menu-footer {
  background: rgba(6, 30, 51, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(0, 245, 212, 0.45) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.6) !important;
  padding: 4px !important;
  gap: 4px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: calc(100% - 20px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html.theme-glacier .menu-footer .link-btn { color: #f0fdfa; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95); }
html.theme-glacier .menu-footer .link-btn:hover { color: #00f5d4; text-shadow: 0 0 12px rgba(0, 245, 212, 0.95); }
html.theme-glacier .menu-footer .footer-dot { color: rgba(0, 245, 212, 0.6); }

/* ==========================================================================
   THEME: CELESTIAL DIVINITY (Trial Tower Floor 50 Pinnacle Reward)
   ========================================================================== */
html.theme-celestial {
  --bg: #060212;
  --bg2: #13072b;
  --panel: #200d45;
  --line: #7c3aed;
  --text: #fffbeb;
  --muted: #fde047;
  --accent: #ffd700;
  --bg-grad-1: #240b54;
  --bg-grad-2: #05020f;
}

#theme-celestial-bg {
  display: none;
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
html.theme-celestial #theme-celestial-bg { display: block; }

.celestial-heavens-glow {
  position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.28) 0%, rgba(147, 51, 234, 0.15) 50%, transparent 80%);
  filter: blur(45px);
  animation: celestialHeavenPulse 7s ease-in-out infinite alternate;
}
@keyframes celestialHeavenPulse {
  0% { opacity: 0.5; transform: translateX(-50%) scale(0.9); }
  100% { opacity: 0.95; transform: translateX(-50%) scale(1.15); }
}

.celestial-god-ray {
  position: absolute; top: 0; width: 140px; height: 110vh;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.22) 0%, rgba(253, 224, 71, 0.08) 50%, transparent 90%);
  transform-origin: top center;
  filter: blur(16px);
  opacity: 0.45;
}
.celestial-god-ray.ray1 { left: 15%; transform: rotate(18deg); animation: celestialRaySway 14s ease-in-out infinite alternate; }
.celestial-god-ray.ray2 { left: 38%; transform: rotate(6deg);  animation: celestialRaySway 18s ease-in-out infinite alternate-reverse; }
.celestial-god-ray.ray3 { right: 38%; transform: rotate(-8deg); animation: celestialRaySway 16s ease-in-out infinite alternate; }
.celestial-god-ray.ray4 { right: 15%; transform: rotate(-20deg); animation: celestialRaySway 20s ease-in-out infinite alternate-reverse; }
@keyframes celestialRaySway {
  0% { opacity: 0.25; transform: rotate(var(--base-rot, 10deg)) skewX(0deg); }
  50% { opacity: 0.6; }
  100% { opacity: 0.35; transform: rotate(var(--base-rot, 10deg)) skewX(4deg); }
}

.celestial-mandala-outer {
  position: absolute; top: 50%; left: 50%; width: 680px; height: 680px;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(255, 215, 0, 0.25);
  border-radius: 50%;
  box-shadow: 0 0 35px rgba(255, 215, 0, 0.12);
  animation: celestialMandalaSpin 60s linear infinite;
}
.celestial-mandala-mid {
  position: absolute; top: 50%; left: 50%; width: 460px; height: 460px;
  transform: translate(-50%, -50%);
  border: 1.5px dashed rgba(253, 224, 71, 0.35);
  border-radius: 50%;
  animation: celestialMandalaSpinRev 40s linear infinite;
}
.celestial-mandala-inner {
  position: absolute; top: 50%; left: 50%; width: 280px; height: 280px;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(255, 215, 0, 0.45);
  border-radius: 50%;
  animation: celestialMandalaSpin 25s linear infinite;
}
@keyframes celestialMandalaSpin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes celestialMandalaSpinRev {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

.celestial-divine-orb {
  position: absolute; top: 50%; left: 50%; width: 140px; height: 140px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fffbeb 0%, #ffd700 40%, rgba(245, 158, 11, 0.6) 70%, transparent 95%);
  border-radius: 50%;
  box-shadow: 0 0 60px 25px rgba(255, 215, 0, 0.45), 0 0 120px 50px rgba(168, 85, 247, 0.3);
  filter: blur(3px);
  animation: celestialOrbCorona 4.5s ease-in-out infinite alternate;
}
@keyframes celestialOrbCorona {
  0% { transform: translate(-50%, -50%) scale(0.85); box-shadow: 0 0 45px 15px rgba(255, 215, 0, 0.35); }
  100% { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 0 85px 35px rgba(255, 215, 0, 0.65); }
}

.celestial-halo-ring {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1.5px solid rgba(255, 215, 0, 0.4);
  transform: translate(-50%, -50%) rotateX(65deg);
}
.celestial-halo-ring.hr1 {
  width: 600px; height: 600px;
  animation: celestialHaloRotate 20s linear infinite;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.25);
}
.celestial-halo-ring.hr2 {
  width: 820px; height: 820px;
  border-color: rgba(234, 179, 8, 0.25);
  animation: celestialHaloRotate 35s linear infinite reverse;
}
@keyframes celestialHaloRotate {
  0% { transform: translate(-50%, -50%) rotateX(65deg) rotateZ(0deg); }
  100% { transform: translate(-50%, -50%) rotateX(65deg) rotateZ(360deg); }
}

.celestial-stardust {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px 3px rgba(255, 215, 0, 0.95);
  animation: celestialStardustAscend 8s linear infinite;
}
.celestial-stardust.st1  { left: 12%; bottom: 0; animation-duration: 9s;  animation-delay: 0s; }
.celestial-stardust.st2  { left: 22%; bottom: 0; animation-duration: 12s; animation-delay: 1.5s; }
.celestial-stardust.st3  { left: 34%; bottom: 0; animation-duration: 7s;  animation-delay: 3s; }
.celestial-stardust.st4  { left: 45%; bottom: 0; animation-duration: 11s; animation-delay: 0.5s; }
.celestial-stardust.st5  { left: 56%; bottom: 0; animation-duration: 8s;  animation-delay: 4s; }
.celestial-stardust.st6  { left: 67%; bottom: 0; animation-duration: 13s; animation-delay: 2s; }
.celestial-stardust.st7  { left: 78%; bottom: 0; animation-duration: 10s; animation-delay: 5s; }
.celestial-stardust.st8  { left: 88%; bottom: 0; animation-duration: 14s; animation-delay: 1s; }
.celestial-stardust.st9  { left: 28%; bottom: 0; animation-duration: 9s;  animation-delay: 6s; }
.celestial-stardust.st10 { left: 62%; bottom: 0; animation-duration: 11s; animation-delay: 3.5s; }
.celestial-stardust.st11 { left: 82%; bottom: 0; animation-duration: 8s;  animation-delay: 2.2s; }
.celestial-stardust.st12 { left: 16%; bottom: 0; animation-duration: 10s; animation-delay: 4.8s; }
@keyframes celestialStardustAscend {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  15% { opacity: 1; transform: translateY(-100px) scale(1.3); }
  85% { opacity: 0.9; }
  100% { transform: translateY(-110vh) scale(0.8); opacity: 0; }
}

html.theme-celestial .card {
  border-color: rgba(255, 215, 0, 0.45);
  background: linear-gradient(145deg, #220c4a 0%, #0d041e 100%);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.88), 0 0 18px rgba(255, 215, 0, 0.25);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
html.theme-celestial .card:hover {
  border-color: #ffd700;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.95), 0 0 32px rgba(255, 215, 0, 0.8), inset 0 0 16px rgba(253, 224, 71, 0.4);
}
html.theme-celestial .menu-footer {
  background: rgba(19, 7, 43, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(255, 215, 0, 0.45) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.6) !important;
  padding: 4px !important;
  gap: 4px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: calc(100% - 20px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html.theme-celestial .menu-footer .link-btn { color: #fffbeb; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95); }
html.theme-celestial .menu-footer .link-btn:hover { color: #ffd700; text-shadow: 0 0 12px rgba(255, 215, 0, 0.95); }
html.theme-celestial .menu-footer .footer-dot { color: rgba(255, 215, 0, 0.7); }

/* ===== SECRET TERMINAL MODAL STYLES ===== */
#secret-menu-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(3, 2, 7, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
#secret-menu-overlay.hidden { display: none !important; }

.secret-terminal-card {
  width: 100%; max-width: 520px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, #0f0920 0%, #080412 100%);
  border: 1px solid rgba(139, 92, 246, 0.5);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.9), 0 0 30px rgba(139, 92, 246, 0.35);
  padding: 24px;
  position: relative;
  overflow: hidden;
  color: #f3efff;
}
.secret-terminal-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #38bdf8, #a855f7, #f43f5e);
}

.secret-terminal-topbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.terminal-dots { display: flex; gap: 6px; }
.terminal-dots .dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal-dots .dot.d-red { background: #ef4444; }
.terminal-dots .dot.d-yellow { background: #eab308; }
.terminal-dots .dot.d-green { background: #22c55e; }
.terminal-chip {
  font-family: monospace; font-size: 0.72rem; letter-spacing: 0.1em;
  color: #a855f7; background: rgba(168, 85, 247, 0.15);
  padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(168, 85, 247, 0.3);
}

.secret-stage { text-align: center; flex-shrink: 0; }
.secret-stage.hidden { display: none !important; }

#secret-stage-unlocked {
  overflow-y: auto;
  max-height: calc(90vh - 85px);
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.5) rgba(15, 9, 32, 0.5);
}
#secret-stage-unlocked::-webkit-scrollbar {
  width: 6px;
}
#secret-stage-unlocked::-webkit-scrollbar-track {
  background: rgba(15, 9, 32, 0.5);
  border-radius: 4px;
}
#secret-stage-unlocked::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.5);
  border-radius: 4px;
}
.secret-hologram-glyph {
  font-size: 2.8rem; margin-bottom: 8px;
  filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.8));
}
.secret-hologram-glyph.glow-cyan {
  filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.9));
}

.secret-terminal-heading {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  letter-spacing: 0.04em; margin: 0 0 6px;
  color: #f3efff;
}
.cyan-glow-text {
  color: #38bdf8;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.6);
}
.secret-desc {
  font-size: 0.9rem; color: #a691df; margin: 0 0 20px; line-height: 1.4;
}

.secret-auth-form { width: 100%; margin: 0 auto; }
.secret-field-box {
  display: flex; align-items: center; gap: 8px;
  background: rgba(5, 3, 11, 0.8);
  border: 1px solid rgba(139, 92, 246, 0.6);
  border-radius: 10px;
  padding: 6px 10px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.6);
}
.secret-prompt-symbol {
  color: #38bdf8; font-family: monospace; font-size: 1.1rem; font-weight: bold;
}
.secret-cipher-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #ffffff; font-family: monospace; font-size: 1rem;
  letter-spacing: 0.08em;
}
.secret-cipher-input::placeholder { color: rgba(166, 145, 223, 0.5); }
.secret-btn-submit {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border: none; border-radius: 8px; color: #ffffff;
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.06em; padding: 10px 16px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.secret-btn-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.7);
}
.secret-btn-submit:active { transform: translateY(1px); }

.secret-status-line {
  font-family: monospace; font-size: 0.8rem; margin-top: 12px;
  min-height: 20px; transition: color 0.2s ease;
}
.secret-status-line.error { color: #f87171; text-shadow: 0 0 8px rgba(248, 113, 113, 0.5); }
.secret-status-line.success { color: #4ade80; text-shadow: 0 0 8px rgba(74, 222, 128, 0.5); }

.secret-commands-matrix {
  display: flex; flex-direction: column; gap: 12px; margin-top: 16px;
}
.secret-cmd-card {
  display: flex; align-items: center; gap: 14px;
  background: rgba(19, 10, 42, 0.75);
  border: 1px solid rgba(139, 92, 246, 0.5);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  color: #f3efff;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.secret-cmd-card:hover {
  background: rgba(30, 15, 65, 0.9);
  border-color: #38bdf8;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6), 0 0 16px rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
}
.secret-cmd-card:active { transform: translateY(1px); }

.cmd-icon-box {
  font-size: 1.8rem;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(139, 92, 246, 0.2);
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, 0.4);
}
.cmd-info { flex: 1; }
.cmd-title {
  display: block; font-weight: 700; font-size: 1rem; color: #ffffff;
  margin-bottom: 2px;
}
.cmd-subtitle {
  display: block; font-size: 0.78rem; color: #a691df; line-height: 1.3;
}
.cmd-arrow {
  font-size: 1.2rem; color: #38bdf8; font-weight: bold;
}

.secret-exec-result {
  margin-top: 16px; padding: 10px 14px; border-radius: 8px;
  font-family: monospace; font-size: 0.85rem; line-height: 1.4;
}
.secret-exec-result.success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86efac;
}

.secret-codes-panel {
  margin-top: 14px;
  background: rgba(8, 4, 18, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 12px;
  padding: 12px;
  max-height: 270px;
  overflow-y: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.6);
}
.secret-codes-panel.hidden { display: none !important; }
.secret-code-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(22, 11, 48, 0.7);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.secret-code-item:hover {
  background: rgba(34, 17, 72, 0.9);
  border-color: rgba(56, 189, 248, 0.65);
}
.secret-code-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.secret-code-tag {
  font-family: monospace;
  font-size: 0.92rem;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 0.05em;
}
.secret-code-desc {
  font-size: 0.74rem;
  color: #c4b5fd;
  line-height: 1.25;
}
.secret-code-redeem-btn {
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-display);
  border-radius: 6px;
  border: none;
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  color: #fff;
  cursor: pointer !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.secret-code-redeem-btn:hover {
  transform: scale(1.04);
  filter: brightness(1.15);
}
.secret-code-redeem-btn.redeemed {
  background: rgba(100, 116, 139, 0.3);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
  cursor: default !important;
  box-shadow: none;
}

.terminal-shake {
  animation: termShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes termShake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(3px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-5px, 0, 0); }
  40%, 60% { transform: translate3d(5px, 0, 0); }
}

#theme-aurora-bg { display: none; }
html.theme-aurora #theme-aurora-bg {
  display: block; position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  mix-blend-mode: screen;
}
html.theme-aurora #theme-aurora-bg::before {
  content: ''; position: absolute; inset: -10%;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 28% 68%, #cfe0ff, transparent),
    radial-gradient(1.6px 1.6px at 44% 14%, #fff, transparent),
    radial-gradient(1px 1px at 61% 52%, #d8e6ff, transparent),
    radial-gradient(1.3px 1.3px at 77% 30%, #fff, transparent),
    radial-gradient(1px 1px at 85% 78%, #cfe0ff, transparent),
    radial-gradient(1.5px 1.5px at 6% 85%, #fff, transparent),
    radial-gradient(1px 1px at 94% 12%, #d8e6ff, transparent),
    radial-gradient(1.2px 1.2px at 52% 88%, #fff, transparent),
    radial-gradient(1px 1px at 36% 40%, #cfe0ff, transparent);
  background-size: 100% 100%;
  animation: starfieldTwinkle 4s ease-in-out infinite;
}
@keyframes starfieldTwinkle {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}
.galaxy-core {
  position: absolute; top: 18%; left: 50%; width: 65vw; height: 65vw; max-width: 620px; max-height: 620px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, rgba(190,210,255,0.5) 6%, transparent 16%),
    conic-gradient(from 0deg,
      rgba(52,211,153,0.22) 0deg, rgba(167,139,250,0.22) 60deg, rgba(56,189,248,0.22) 120deg,
      rgba(52,211,153,0.22) 180deg, rgba(167,139,250,0.22) 240deg, rgba(56,189,248,0.22) 300deg, rgba(52,211,153,0.22) 360deg);
  filter: blur(10px);
  animation: galaxySpin 70s linear infinite, galaxyPulse 5s ease-in-out infinite;
}
@keyframes galaxySpin {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes galaxyPulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}
.solar-system {
  position: absolute; top: 6%; right: 2%; width: 46vmin; height: 46vmin;
  pointer-events: none;
}
.solar-system .sun {
  position: absolute; top: 50%; left: 50%; width: 7%; height: 7%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #fff8d8, #ffd166 55%, #ff9d3d 100%);
  box-shadow: 0 0 12px 4px rgba(255,209,102,0.7), 0 0 30px 10px rgba(255,157,61,0.35);
  animation: sunPulse 4s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 1; }
}
.orbit {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1px solid rgba(190,210,255,0.16);
  animation: orbitSpin linear infinite;
}
.orbit.o1 { width: 16%;  height: 16%;  margin: -8% 0 0 -8%;     animation-duration: 6s; }
.orbit.o2 { width: 24%;  height: 24%;  margin: -12% 0 0 -12%;   animation-duration: 10s; }
.orbit.o3 { width: 34%;  height: 34%;  margin: -17% 0 0 -17%;   animation-duration: 16s; }
.orbit.o4 { width: 45%;  height: 45%;  margin: -22.5% 0 0 -22.5%; animation-duration: 24s; }
.orbit.o5 { width: 60%;  height: 60%;  margin: -30% 0 0 -30%;   animation-duration: 40s; }
.orbit.o6 { width: 74%;  height: 74%;  margin: -37% 0 0 -37%;   animation-duration: 55s; }
.orbit.o7 { width: 88%;  height: 88%;  margin: -44% 0 0 -44%;   animation-duration: 72s; }
.orbit.o8 { width: 100%; height: 100%; margin: -50% 0 0 -50%;   animation-duration: 90s; }
@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.planet {
  position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  border-radius: 50%;
}
.planet-mercury { width: 4px; height: 4px; background: #b8b0a6; box-shadow: 0 0 3px rgba(184,176,166,0.85); }
.planet-venus   { width: 5px; height: 5px; background: #e8c98a; box-shadow: 0 0 4px rgba(232,201,138,0.85); }
.planet-earth   { width: 5px; height: 5px; background: #4a90d9; box-shadow: 0 0 4px rgba(74,144,217,0.85); }
.planet-mars    { width: 4px; height: 4px; background: #c1543c; box-shadow: 0 0 3px rgba(193,84,60,0.85); }
.planet-jupiter { width: 8px; height: 8px; background: linear-gradient(#d9b48a, #b98a5e); box-shadow: 0 0 5px rgba(217,180,138,0.75); }
.planet-saturn  { width: 7px; height: 7px; background: #e6d1a0; box-shadow: 0 0 5px rgba(230,209,160,0.75); }
.planet-saturn::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 5px;
  border: 1px solid rgba(230,209,160,0.6); border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
}
.planet-uranus  { width: 5px; height: 5px; background: #9fd8d0; box-shadow: 0 0 4px rgba(159,216,208,0.85); }
.planet-neptune { width: 5px; height: 5px; background: #4a6fd9; box-shadow: 0 0 4px rgba(74,111,217,0.85); }
.aurora-ribbon { position: absolute; border-radius: 50%; filter: blur(38px); opacity: 0.5; animation: auroraDrift ease-in-out infinite; }
.aurora-ribbon.a1 { top: -12%; left: -12%; width: 70vw; height: 42vh; background: radial-gradient(ellipse, #34d399, transparent 70%); animation-duration: 14s; }
.aurora-ribbon.a2 { top: 2%; right: -18%; width: 62vw; height: 46vh; background: radial-gradient(ellipse, #a78bfa, transparent 70%); animation-duration: 18s; animation-delay: 2s; }
.aurora-ribbon.a3 { top: 22%; left: 18%; width: 55vw; height: 36vh; background: radial-gradient(ellipse, #38bdf8, transparent 70%); animation-duration: 16s; animation-delay: 4s; }
.aurora-ribbon.a4 { top: 44%; left: -20%; width: 58vw; height: 40vh; background: radial-gradient(ellipse, #f472b6, transparent 70%); animation-duration: 20s; animation-delay: 1s; }
.aurora-ribbon.a5 { top: 58%; right: -14%; width: 50vw; height: 38vh; background: radial-gradient(ellipse, #facc15, transparent 72%); animation-duration: 22s; animation-delay: 6s; opacity: 0.35; }
@keyframes auroraDrift {
  0%, 100% { transform: translate(0,0) rotate(0deg) scale(1); }
  50%      { transform: translate(4%,3%) rotate(6deg) scale(1.12); }
}
.aurora-star {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff;
  animation: starTwinkle ease-in-out infinite;
}
.aurora-star.s1 { top: 8%;  left: 15%; animation-duration: 2.4s; animation-delay: 0s; }
.aurora-star.s2 { top: 14%; left: 68%; animation-duration: 3.1s; animation-delay: .5s; }
.aurora-star.s3 { top: 22%; left: 40%; animation-duration: 2.7s; animation-delay: 1s; }
.aurora-star.s4 { top: 6%;  left: 82%; animation-duration: 3.4s; animation-delay: .2s; }
.aurora-star.s5 { top: 30%; left: 8%;  animation-duration: 2.9s; animation-delay: 1.4s; }
.aurora-star.s6 { top: 18%; left: 55%; animation-duration: 2.5s; animation-delay: .8s; }
.aurora-star.s7 { top: 42%; left: 25%; animation-duration: 2.6s; animation-delay: .3s; width: 3px; height: 3px; }
.aurora-star.s8 { top: 50%; left: 72%; animation-duration: 3.2s; animation-delay: 1.1s; }
.aurora-star.s9 { top: 65%; left: 12%; animation-duration: 2.8s; animation-delay: .6s; width: 3px; height: 3px; }
.aurora-star.s10 { top: 74%; left: 48%; animation-duration: 3.5s; animation-delay: 1.7s; }
.aurora-star.s11 { top: 82%; left: 85%; animation-duration: 2.3s; animation-delay: .9s; }
.aurora-star.s12 { top: 90%; left: 30%; animation-duration: 3.0s; animation-delay: .4s; width: 3px; height: 3px; }
@keyframes starTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.8); }
}
.shooting-star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 1px #fff;
  animation: shootingStarFly linear infinite;
}
.shooting-star::before {
  content: ''; position: absolute; top: 50%; right: 100%; width: 90px; height: 1px;
  background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
  transform: translateY(-50%);
}
.shooting-star.ss1 { top: 12%; left: 8%;  animation-duration: 7s; animation-delay: 1s; }
.shooting-star.ss2 { top: 34%; left: -4%; animation-duration: 9s; animation-delay: 5s; }
@keyframes shootingStarFly {
  0%   { transform: translate(0,0); opacity: 0; }
  2%   { opacity: 1; }
  14%  { transform: translate(46vw, 22vh); opacity: 0; }
  100% { transform: translate(46vw, 22vh); opacity: 0; }
}

#tutorial-overlay { position: fixed; inset: 0; z-index: 300; }
#tutorial-overlay.hidden { display: none; }
.tut-mask {
  position: fixed; background: rgba(6, 8, 14, 0.8); pointer-events: auto;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
#tut-highlight-ring {
  position: fixed; border: 2px solid var(--accent); border-radius: 12px;
  pointer-events: none; z-index: 301;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
  animation: tutRingPulse 1.4s ease-in-out infinite;
}
@keyframes tutRingPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(224,138,44,0.25), 0 0 18px rgba(224,138,44,0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(224,138,44,0.15), 0 0 26px rgba(224,138,44,0.85); }
}
#tut-callout {
  position: fixed; width: 290px; max-width: calc(100vw - 24px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.55); z-index: 302;
  transition: top .25s ease, left .25s ease;
}
#tut-callout.centered {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px;
}
#tut-callout-step {
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.05em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 4px;
}
#tut-callout-text { font-size: 0.9rem; line-height: 1.5; margin-bottom: 12px; color: var(--text); }
#tut-callout-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#tut-callout-arrow {
  position: absolute; width: 14px; height: 14px; background: var(--panel);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  display: none;
}
#tut-callout-arrow.top { top: -8px; transform: rotate(45deg); }
#tut-callout-arrow.bottom { bottom: -8px; transform: rotate(225deg); }

.reduced-motion, .reduced-motion * , .reduced-motion *::before, .reduced-motion *::after {
  animation-duration: 0.001s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
  scroll-behavior: auto !important;
}

*, *::before, *::after {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
}

html, body {
  margin: 0; padding: 0;
  background: radial-gradient(ellipse at top, var(--bg-grad-1) 0%, var(--bg-grad-2) 70%);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  cursor: default;
}

/* Prevent text/type I-beam cursor anywhere on hover */
p, span, h1, h2, h3, h4, h5, h6, label, div, section, article, header, footer,
main, aside, table, td, th, li, ul, ol, blockquote, pre, code, strong, em, b, i,
#secret-m-trigger {
  cursor: default;
}

/* Interactive elements use pointer cursor */
button, .btn, .link-btn, a, .card, .slot, .clickable, select,
.tab-btn, .toggle-btn, .badge-item, .shop-item, .quest-card, .deck-filter-pill,
.stepper-btn, .primary-btn, .secondary-btn, .theme-btn, .mode-card,
.avatar-item, .deck-preset-btn, .modern-shop-card,
[role="button"] {
  cursor: pointer !important;
}

/* Inputs also avoid I-beam text cursor */
input, textarea {
  cursor: pointer;
}

#app {
  position: relative;
  z-index: 5;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 12px 24px;
  min-height: 100vh;
}

#top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px 10px;
}
.brand {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.brand-mark { color: var(--accent); }
#top-bar-info { font-size: 0.8rem; color: var(--muted); }

/* Hide top-bar branding on the main menu, while keeping it visible in matches and other screens */
#app:has(#screen-menu:not(.hidden)) #top-bar .brand {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

#secret-m-trigger {
  user-select: none;
}

.screen {
  display: block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.screen.active-screen {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.screen.hidden { display: none !important; }

.hero { padding: 30px 4px 10px; }
.hero-centered { text-align: center; padding-top: 8vh; }
.hero-centered .sub { margin-left: auto; margin-right: auto; }

.game-title {
  position: relative;
  display: inline-block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.4rem, 13.5vw, 6.2rem); line-height: 1.02;
  letter-spacing: 0.02em; margin: 0 0 16px;
  animation: heroGlow 2.5s ease-in-out infinite, logoBreathing 3s ease-in-out infinite;
  user-select: none;
}

.title-word {
  display: inline-block;
  white-space: nowrap;
}

.title-letter {
  display: inline-block;
  cursor: pointer !important;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  background: linear-gradient(120deg, #ff0055, #ff5e00, #ffbe00, #00ff77, #00e1ff, #a200ff, #ff0055);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: heroGradientShift 3s linear infinite;
  transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.3), filter 0.18s ease;
  position: relative;
  will-change: transform, filter;
}

.title-letter:hover {
  transform: translateY(-4px) scale(1.15);
  filter: drop-shadow(0 0 14px var(--live-glow, rgba(62, 124, 177, 0.95))) drop-shadow(0 0 28px var(--live-glow, rgba(76, 154, 91, 0.75)));
}

.tagline {
  font-family: var(--font-display); font-weight: 600; color: #c9cfda;
  font-size: clamp(1rem, 2.6vw, 1.3rem); margin: 0 0 14px;
}
@keyframes heroGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes heroGlow {
  0%, 100% {
    filter: drop-shadow(0 0 12px rgba(255, 0, 85, 0.8)) drop-shadow(0 0 24px rgba(0, 225, 255, 0.5));
  }
  25% {
    filter: drop-shadow(0 0 14px rgba(255, 94, 0, 0.8)) drop-shadow(0 0 26px rgba(162, 0, 255, 0.55));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(255, 190, 0, 0.85)) drop-shadow(0 0 28px rgba(0, 255, 119, 0.6));
  }
  75% {
    filter: drop-shadow(0 0 14px rgba(0, 255, 119, 0.8)) drop-shadow(0 0 26px rgba(255, 0, 85, 0.55));
  }
}
@keyframes logoBreathing {
  0%, 100% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.05);
  }
}
/* ==========================================================================
   --- 3D LIQUID GLASS INTERFACE SYSTEM (JAGGED & VIBRANT) ---
   Tactile liquid glass styling with subtle 10px frosted blurs,
   semi-transparent white borders, zero drop shadows, sharp jagged
   angular cuts, crystalline surface roughness, and electric neon colors.
   ========================================================================== */

#screen-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.menu-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  clip-path: none !important;
  filter: none !important;
  padding: 20px 22px !important;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(15, 22, 36, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45), inset 0 1px 1px 0 rgba(255, 255, 255, 0.25) !important;
  cursor: pointer;
  color: var(--text);
  text-align: left;
  transform: translateY(0);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease,
              background 0.2s ease;
  will-change: transform, box-shadow;
  
  --card-color: var(--accent);
}

.menu-card:nth-child(even) {
  border-radius: 16px !important;
}

/* Subtle corner highlight */
.menu-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--card-color) 25%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

/* Silky Sheen Sweep on Hover */
.menu-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 30%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.03) 70%,
    transparent 100%
  );
  transform: rotate(25deg);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 2;
}

/* Modern Glowing Glass Icon Pod */
.menu-icon-pod {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--card-color) 12%, rgba(255, 255, 255, 0.05));
  border: 1px solid color-mix(in srgb, var(--card-color) 35%, rgba(255, 255, 255, 0.2));
  border-radius: 14px;
  clip-path: none !important;
  color: var(--card-color);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.35), inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
}

.menu-icon-pod .glass-icon {
  width: 26px;
  height: 26px;
  stroke-width: 2.2;
  transition: transform 0.22s ease;
}

/* Glass SVG Icon Utilities */
.glass-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: block;
}

.glass-icon-large {
  width: 32px;
  height: 32px;
}

.glass-icon-small {
  width: 18px;
  height: 18px;
}

.tab-icon-svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: inline-block;
  vertical-align: middle;
}

.badge-icon-svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: inline-block;
}

/* Body typography */
.menu-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.menu-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
  transition: color 0.18s ease;
}

html.theme-light .menu-card-title {
  color: #0f172a;
}

.menu-card-sub {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

html.theme-light .menu-card-sub {
  color: #64748b;
}

/* Smooth Arrow Pill Pod */
.menu-card-arrow {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  clip-path: none !important;
  color: #94a3b8;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
}

.menu-card-arrow svg {
  width: 16px;
  height: 16px;
  display: block;
  transition: transform 0.2s ease;
}

/* Hover & Interactive States */
.menu-card:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.65), 0 0 24px -4px color-mix(in srgb, var(--card-color) 40%, transparent), inset 0 1px 2px 0 rgba(255, 255, 255, 0.4) !important;
}

.menu-card:hover .menu-icon-pod {
  transform: scale(1.08);
  box-shadow: 0 0 20px -2px color-mix(in srgb, var(--card-color) 60%, transparent), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  border-color: color-mix(in srgb, var(--card-color) 70%, rgba(255, 255, 255, 0.5));
}

.menu-card:hover .menu-card-arrow {
  color: #ffffff;
  background: var(--card-color);
  border-color: var(--card-color);
  transform: translateX(4px);
  box-shadow: 0 0 16px -2px var(--card-color);
}

.menu-card:hover .menu-card-arrow svg {
  transform: translateX(2px);
}

.menu-card:hover::after {
  opacity: 1;
  transform: rotate(25deg) translate(250%, 0);
}

.menu-card:hover::before {
  transform: scale(1.2);
  background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--card-color) 85%, #ffffff) 50%);
}

.menu-card:hover::after {
  opacity: 1;
  transform: rotate(20deg) translateX(360%);
}

.menu-card:hover .menu-card-title {
  color: #ffffff;
  text-shadow: 0 0 12px var(--card-color);
}

.menu-card:hover .menu-icon-pod {
  color: #ffffff;
  background: linear-gradient(135deg, var(--card-color) 0%, color-mix(in srgb, var(--card-color) 70%, #000) 100%);
  border-color: rgba(255, 255, 255, 0.65);
}

.menu-card:hover .menu-icon-pod .glass-icon {
  transform: scale(1.1);
}

.menu-card:hover .menu-card-arrow {
  transform: translateX(4px);
  color: #ffffff;
  background: var(--card-color);
  border-color: rgba(255, 255, 255, 0.5);
}

.menu-card.pressed,
.menu-card:active {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Vibrant Color Personalities & Gradients
   ========================================================================== */

/* Main Menu */
#btn-single-player {
  --card-color: #00f0ff;
  --card-bg-gradient: linear-gradient(135deg, rgba(0, 240, 255, 0.28) 0%, rgba(14, 165, 233, 0.12) 50%, rgba(8, 18, 30, 0.88) 100%);
  --card-bg-hover: linear-gradient(135deg, rgba(0, 240, 255, 0.44) 0%, rgba(14, 165, 233, 0.24) 50%, rgba(10, 24, 40, 0.92) 100%);
  --card-pod-bg: linear-gradient(135deg, rgba(0, 240, 255, 0.45) 0%, rgba(14, 165, 233, 0.18) 100%);
}

#btn-shop {
  --card-color: #ffbe00;
  --card-bg-gradient: linear-gradient(135deg, rgba(255, 190, 0, 0.28) 0%, rgba(245, 158, 11, 0.12) 50%, rgba(30, 20, 8, 0.88) 100%);
  --card-bg-hover: linear-gradient(135deg, rgba(255, 190, 0, 0.44) 0%, rgba(245, 158, 11, 0.24) 50%, rgba(40, 28, 10, 0.92) 100%);
  --card-pod-bg: linear-gradient(135deg, rgba(255, 190, 0, 0.45) 0%, rgba(245, 158, 11, 0.18) 100%);
}

#btn-multiplayer {
  --card-color: #ff0077;
  --card-bg-gradient: linear-gradient(135deg, rgba(255, 0, 119, 0.28) 0%, rgba(236, 72, 153, 0.12) 50%, rgba(30, 8, 20, 0.88) 100%);
  --card-bg-hover: linear-gradient(135deg, rgba(255, 0, 119, 0.44) 0%, rgba(236, 72, 153, 0.24) 50%, rgba(40, 10, 28, 0.92) 100%);
  --card-pod-bg: linear-gradient(135deg, rgba(255, 0, 119, 0.45) 0%, rgba(236, 72, 153, 0.18) 100%);
}

/* Single Player & Modes */
#btn-story-mode {
  --card-color: #38bdf8;
  --card-bg-gradient: linear-gradient(135deg, rgba(56, 189, 248, 0.28) 0%, rgba(2, 132, 199, 0.12) 50%, rgba(8, 20, 32, 0.88) 100%);
  --card-bg-hover: linear-gradient(135deg, rgba(56, 189, 248, 0.44) 0%, rgba(2, 132, 199, 0.24) 50%, rgba(10, 26, 42, 0.92) 100%);
  --card-pod-bg: linear-gradient(135deg, rgba(56, 189, 248, 0.45) 0%, rgba(2, 132, 199, 0.18) 100%);
}

#btn-practice-bot {
  --card-color: #10b981;
  --card-bg-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.28) 0%, rgba(5, 150, 105, 0.12) 50%, rgba(6, 26, 16, 0.88) 100%);
  --card-bg-hover: linear-gradient(135deg, rgba(16, 185, 129, 0.44) 0%, rgba(5, 150, 105, 0.24) 50%, rgba(8, 34, 22, 0.92) 100%);
  --card-pod-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.45) 0%, rgba(5, 150, 105, 0.18) 100%);
}

#btn-trial-tower-menu {
  --card-color: #a855f7;
  --card-bg-gradient: linear-gradient(135deg, rgba(168, 85, 247, 0.28) 0%, rgba(126, 34, 206, 0.12) 50%, rgba(22, 10, 32, 0.88) 100%);
  --card-bg-hover: linear-gradient(135deg, rgba(168, 85, 247, 0.44) 0%, rgba(126, 34, 206, 0.24) 50%, rgba(30, 14, 42, 0.92) 100%);
  --card-pod-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.45) 0%, rgba(126, 34, 206, 0.18) 100%);
}

#btn-bot-mode-normal,
#btn-host-mode-normal,
#btn-collection-book-cards {
  --card-color: #3b82f6;
  --card-bg-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.28) 0%, rgba(29, 78, 216, 0.12) 50%, rgba(8, 16, 32, 0.88) 100%);
  --card-bg-hover: linear-gradient(135deg, rgba(59, 130, 246, 0.44) 0%, rgba(29, 78, 216, 0.24) 50%, rgba(10, 22, 42, 0.92) 100%);
  --card-pod-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.45) 0%, rgba(29, 78, 216, 0.18) 100%);
}

#btn-bot-mode-wager,
#btn-host-mode-wager {
  --card-color: #eab308;
  --card-bg-gradient: linear-gradient(135deg, rgba(234, 179, 8, 0.28) 0%, rgba(161, 98, 7, 0.12) 50%, rgba(28, 20, 6, 0.88) 100%);
  --card-bg-hover: linear-gradient(135deg, rgba(234, 179, 8, 0.44) 0%, rgba(161, 98, 7, 0.24) 50%, rgba(38, 26, 8, 0.92) 100%);
  --card-pod-bg: linear-gradient(135deg, rgba(234, 179, 8, 0.45) 0%, rgba(161, 98, 7, 0.18) 100%);
}

#btn-host-menu {
  --card-color: #06b6d4;
  --card-bg-gradient: linear-gradient(135deg, rgba(6, 182, 212, 0.28) 0%, rgba(14, 116, 144, 0.12) 50%, rgba(6, 22, 28, 0.88) 100%);
  --card-bg-hover: linear-gradient(135deg, rgba(6, 182, 212, 0.44) 0%, rgba(14, 116, 144, 0.24) 50%, rgba(8, 28, 36, 0.92) 100%);
  --card-pod-bg: linear-gradient(135deg, rgba(6, 182, 212, 0.45) 0%, rgba(14, 116, 144, 0.18) 100%);
}

#btn-join-menu {
  --card-color: #f43f5e;
  --card-bg-gradient: linear-gradient(135deg, rgba(244, 63, 94, 0.28) 0%, rgba(190, 18, 60, 0.12) 50%, rgba(30, 8, 16, 0.88) 100%);
  --card-bg-hover: linear-gradient(135deg, rgba(244, 63, 94, 0.44) 0%, rgba(190, 18, 60, 0.24) 50%, rgba(40, 10, 22, 0.92) 100%);
  --card-pod-bg: linear-gradient(135deg, rgba(244, 63, 94, 0.45) 0%, rgba(190, 18, 60, 0.18) 100%);
}

#btn-collection-book-themes {
  --card-color: #10b981;
  --card-bg-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.28) 0%, rgba(5, 150, 105, 0.12) 50%, rgba(6, 26, 16, 0.88) 100%);
  --card-bg-hover: linear-gradient(135deg, rgba(16, 185, 129, 0.44) 0%, rgba(5, 150, 105, 0.24) 50%, rgba(8, 34, 22, 0.92) 100%);
  --card-pod-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.45) 0%, rgba(5, 150, 105, 0.18) 100%);
}

/* Subtle Ambient Card Floating (Zero Drop Shadows) */
#btn-single-player:not(:hover):not(.pressed),
#btn-shop:not(:hover):not(.pressed),
#btn-multiplayer:not(:hover):not(.pressed) {
  animation: glassCardFloat 5s ease-in-out infinite !important;
}
#btn-single-player:not(:hover):not(.pressed) { animation-delay: 0s !important; }
#btn-shop:not(:hover):not(.pressed)          { animation-delay: 1.6s !important; }
#btn-multiplayer:not(:hover):not(.pressed)   { animation-delay: 3.2s !important; }

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

.hidden {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .game-title { animation: none; }
  #btn-single-player, #btn-shop, #btn-multiplayer { animation: none !important; }
}
.sub { color: var(--muted); font-size: 0.95rem; max-width: 60ch; line-height: 1.5; }
.sub.small { font-size: 0.8rem; }

/* Menu Grid layout */
.menu-grid {
  display: grid;
  gap: 14px;
  margin: 22px auto 14px;
  grid-template-columns: 1fr;
  max-width: 780px;
  width: 100%;
}
@media (min-width: 680px) {
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
}
.menu-grid.two-col {
  max-width: 620px;
}
@media (min-width: 620px) {
  .menu-grid.two-col { grid-template-columns: repeat(2, 1fr); }
}

/* Perfectly Centered Floating Glass Pill Footer */
.menu-footer {
  position: relative;
  z-index: 10;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: fit-content !important;
  max-width: calc(100% - 24px) !important;
  margin: 18px auto 12px auto !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(10, 15, 26, 0.90) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

html.theme-light .menu-footer {
  background: rgba(245, 243, 238, 0.88) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.1) !important;
}

/* Glass Pill Button */
.glass-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 9999px !important;
  clip-path: none !important;
  filter: none !important;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none !important;
  cursor: pointer;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none !important;
}

.glass-pill-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

.glass-pill-btn:active {
  transform: translateY(0);
}

.glass-btn-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  flex-shrink: 0;
}

.screen-sub-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.new-badge {
  background: linear-gradient(120deg, #ff5f6d, #f59e0b);
  color: #0f172a; font-family: var(--font-display); font-weight: 800;
  font-size: 0.62rem; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 9999px;
  animation: newBadgePulse 1.6s ease-in-out infinite; vertical-align: middle;
}
@keyframes newBadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(245,158,11,0); }
  50%      { transform: scale(1.1); box-shadow: 0 0 12px rgba(245,158,11,0.6); }
}

.last-played-tag {
  position: absolute; top: 6px; right: 10px; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.03em; color: var(--accent); text-transform: uppercase;
  background: rgba(0,0,0,0.4); padding: 2px 8px; border-radius: 9999px;
}
.footer-dot { color: var(--muted); }
#btn-version { font-family: var(--font-display); letter-spacing: 0.03em; }
#record-display { text-align: center; }

/* Modern Difficulty Cards */
.diff-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  max-width: 480px;
  margin: 22px auto;
}

.diff-easy   { --diff-color: #10b981; }
.diff-medium { --diff-color: #f59e0b; }
.diff-hard   { --diff-color: #f97316; }
.diff-expert { --diff-color: #ef4444; }
.diff-master { --diff-color: #c084fc; }
.diff-adaptive { --diff-color: #06b6d4; }

.diff-card {
  width: 100%;
  border-radius: 14px !important;
  clip-path: none !important;
  filter: none !important;
  padding: 16px 20px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--diff-color) 16%, rgba(15, 22, 36, 0.85)) 0%, rgba(15, 22, 36, 0.85) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.22s ease, background 0.2s ease !important;
}

.diff-card:nth-child(even) {
  border-radius: 14px !important;
}

.diff-card:hover {
  transform: translateY(-3px) scale(1.015) !important;
  border-color: color-mix(in srgb, var(--diff-color) 60%, rgba(255, 255, 255, 0.4)) !important;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.6), 0 0 16px -2px color-mix(in srgb, var(--diff-color) 35%, transparent) !important;
}

.diff-card:active {
  transform: translateY(0) scale(0.99) !important;
}

.diff-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.diff-card b {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-transform: uppercase;
}

.diff-card span {
  color: #94a3b8;
  font-size: 0.82rem;
  line-height: 1.4;
}

.diff-card .reward-badge {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  clip-path: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--diff-color) 20%, rgba(255, 255, 255, 0.05));
  border: 1px solid color-mix(in srgb, var(--diff-color) 45%, rgba(255, 255, 255, 0.2));
  color: var(--diff-color);
  transition: all 0.2s ease;
}
  transition: all 0.2s ease;
}

.diff-card .badge-icon-svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

.diff-card:hover {
  transform: translateY(-2px) scale(1.015) !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--diff-color) 40%, transparent) 0%, rgba(20, 28, 42, 0.92) 100%) !important;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1.5px, transparent 1.5px, transparent 10px), linear-gradient(135deg, color-mix(in srgb, var(--diff-color) 40%, transparent) 0%, rgba(20, 28, 42, 0.92) 100%) !important;
  box-shadow: none !important;
}

.diff-card:hover .reward-badge {
  color: #ffffff;
  background: var(--diff-color);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: none !important;
}

.diff-card.pressed,
.diff-card:active {
  transform: scale(0.98) !important;
  box-shadow: none !important;
}

.link-btn {
  background: none; border: none; color: var(--muted); font-family: var(--font-body);
  font-size: 0.88rem; text-decoration: underline; cursor: pointer; padding: 10px 2px;
  transition: transform .18s ease, color .18s ease; display: inline-block;
}
.link-btn:hover { transform: translateY(-2px); color: var(--accent); }
.link-btn:active { transform: translateY(0); }
.back-btn { display: block; margin-top: 10px; }

.primary-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px !important;
  clip-path: none !important;
  filter: none !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 12px 24px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.45);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s ease,
              filter 0.15s ease;
}
.primary-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  filter: brightness(1.08);
}
.primary-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
  filter: brightness(0.95);
}
.primary-btn.small {
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: 9px !important;
}

#bux-counter {
  position: fixed; top: 14px; right: 14px; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(26, 32, 48, 0.95) 0%, rgba(12, 16, 26, 0.98) 100%);
  border: 1.5px solid rgba(250, 204, 21, 0.6);
  border-radius: 9999px !important;
  padding: 6px 18px 6px 10px;
  font-family: 'Chakra Petch', var(--font-display), sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px -2px rgba(250, 204, 21, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.22s, filter 0.2s;
  clip-path: none !important;
  filter: none !important;
}
#bux-counter:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: #ffd700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}
#bux-counter:active {
  transform: translateY(0) scale(0.98);
}
#bux-counter .bux-chip-inner {
  display: flex; flex-direction: row !important; align-items: center; gap: 8px; white-space: nowrap;
}
#bux-counter .bux-icon-wrapper {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
#bux-counter .bux-svg {
  width: 100%; height: 100%; display: block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#bux-counter .bux-value-container {
  display: flex; align-items: center; line-height: 1;
}
#bux-counter-value {
  font-size: 1.35rem; font-weight: 900; font-style: italic; color: #ffffff;
  font-family: 'Chakra Petch', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 2px rgba(255,255,255,0.3);
}
#bux-counter:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: #ffffff;
  box-shadow: 0 8px 24px rgba(255,215,0,0.35), 0 6px 16px rgba(0,0,0,0.5);
}
#bux-counter:hover .bux-svg {
  transform: scale(1.22) rotate(15deg);
}
#bux-counter:active {
  transform: translateY(0) scale(0.96);
}
#bux-counter.hidden { display: none; }
@media (max-width: 480px) {
  #bux-counter {
    top: 8px; right: 8px; padding: 4px 12px 4px 6px; border-radius: 0 !important;
    border-width: 1.5px;
  }
  #bux-counter-value {
    font-size: 1.05rem;
  }
  #bux-counter .bux-icon-wrapper {
    width: 22px; height: 22px;
  }
}

#wager-picker, #wager-picker-host { margin: 16px 0; }
.wager-label {
  font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.05em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 8px;
}
#wager-presets, #wager-presets-host { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.wager-btn.active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
#wager-custom-input, #wager-custom-input-host {
  display: block; width: 100%; max-width: 220px; font-size: 1rem;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; font-family: var(--font-body);
}

.deck-builder-section { margin: 20px 0; }
.deck-builder-heading {
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 800; color: #ffffff;
  margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline;
  letter-spacing: 0.04em;
}
.deck-builder-heading span:last-child { color: var(--accent); font-weight: 800; }
#deck-completeness-hint {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px;
  background: rgba(56, 189, 248, 0.16); border: 1.5px solid rgba(56, 189, 248, 0.45);
  border-radius: 4px 14px 4px 14px; color: #7dd3fc;
  font-family: var(--font-display); font-weight: 800; font-size: 0.8rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important; margin-left: 10px; vertical-align: middle;
}
#btn-autofill-deck {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px 14px 4px 14px; color: #ffffff;
  font-family: var(--font-display); font-weight: 800; font-size: 0.78rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: pointer; box-shadow: none !important; transition: transform .15s ease, border-color .15s ease, background .15s ease;
  margin: 8px 0 14px 0;
}
#btn-autofill-deck:hover {
  transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.16);
}

.deck-builder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }
.dcard {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.78);
  border: 1.5px solid rgba(255, 255, 255, 0.2); border-radius: 4px 14px 4px 14px; padding: 12px 10px;
  text-align: left; color: #ffffff; cursor: pointer; font-size: 0.78rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), border-color .2s ease, background .2s ease;
}
.dcard:hover:not(.locked) {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none !important;
}
.dcard.selected {
  border-color: rgba(56, 189, 248, 0.85) !important;
  outline: 1.5px solid #38bdf8;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22) 0%, rgba(14, 165, 233, 0.06) 100%), rgba(18, 24, 36, 0.88) !important;
  box-shadow: none !important;
}
.dcard.locked { opacity: 0.45; cursor: not-allowed; border-style: dashed; border-color: rgba(255, 255, 255, 0.18); }
.dcard-name { font-family: var(--font-display); font-weight: 800; font-size: 0.84rem; margin-bottom: 4px; color: #ffffff; position: relative; z-index: 2; }
.dcard-text { color: rgba(255, 255, 255, 0.75); font-size: 0.72rem; line-height: 1.35; position: relative; z-index: 2; }
.dcard-lock { margin-top: 6px; font-size: 0.68rem; color: var(--accent); font-weight: 700; position: relative; z-index: 2; }

.deck-presets-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.deck-preset-chip {
  display: flex; align-items: stretch; border-radius: 4px 14px 4px 14px; overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.74);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
  transition: border-color .15s ease, transform .15s ease;
}
.deck-preset-chip:hover { border-color: rgba(255, 255, 255, 0.55); transform: translateY(-2px); }
.deck-preset-load {
  background: none; border: none; color: #ffffff; cursor: pointer;
  padding: 9px 12px; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700;
}
.deck-preset-delete {
  background: rgba(239, 68, 68, 0.18); border: none; border-left: 1.5px solid rgba(255, 255, 255, 0.16);
  color: #fca5a5; cursor: pointer; padding: 9px 11px; font-size: 0.78rem;
  transition: background .15s ease, color .15s ease;
}
.deck-preset-delete:hover { background: rgba(239, 68, 68, 0.5); color: #ffffff; }
.deck-presets-save-row { display: flex; gap: 8px; flex-wrap: wrap; }
#deck-preset-name-input {
  flex: 1; min-width: 160px;
  background: rgba(0, 0, 0, 0.35); color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.2); border-radius: 4px 14px 4px 14px; padding: 10px 12px;
  font-family: var(--font-body); font-size: 0.85rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#deck-preset-name-input:focus { border-color: #38bdf8; outline: none; }
#btn-save-deck-preset {
  border-radius: 4px 14px 4px 14px;
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #ffffff; font-family: var(--font-display); font-weight: 800;
  box-shadow: none !important;
}
#btn-save-deck-preset:disabled { opacity: 0.4; cursor: not-allowed; }

.unit-dcard { cursor: default; }

.dcard {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.dcard-rarity-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
  opacity: 0.7;
  transition: opacity .25s ease;
}

.dcard:hover .dcard-rarity-glow {
  opacity: 1;
}

.dcard-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}

.dcard-rarity-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
}

.dcard-pill-gem {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
}

.dcard-stat-pill {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
}

/* Tier 1: Blue (Common) */
.unit-dcard.tier1 {
  border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
  border-left: 4px solid #38bdf8 !important;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 10px rgba(56, 189, 248, 0.18) !important;
}
.unit-dcard.tier1:hover:not(.locked) {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 18px rgba(56, 189, 248, 0.38) !important;
  border-color: rgba(56, 189, 248, 0.7) !important;
}
.dcard-rarity-glow.tier1 {
  background: radial-gradient(circle at 10% 10%, rgba(56, 189, 248, 0.18), transparent 70%);
}
.dcard-rarity-pill.tier1 {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}
.dcard-rarity-pill.tier1 .dcard-pill-gem {
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
}
.dcard-stat-pill.tier1 {
  background: rgba(56, 189, 248, 0.12);
  color: #7dd3fc;
}

/* Tier 2: Green (Uncommon) */
.unit-dcard.tier2 {
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
  border-left: 4px solid #34d399 !important;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.12) 0%, rgba(15, 23, 42, 0.88) 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 14px rgba(52, 211, 153, 0.28) !important;
  animation: dbTier2GlowPulse 4s ease-in-out infinite alternate;
}
.unit-dcard.tier2:hover:not(.locked) {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 22px rgba(52, 211, 153, 0.5) !important;
  border-color: rgba(52, 211, 153, 0.85) !important;
}
.dcard-rarity-glow.tier2 {
  background: radial-gradient(circle at 15% 15%, rgba(52, 211, 153, 0.22), transparent 70%);
}
.dcard-rarity-pill.tier2 {
  background: rgba(52, 211, 153, 0.2);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.5);
}
.dcard-rarity-pill.tier2 .dcard-pill-gem {
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
}
.dcard-stat-pill.tier2 {
  background: rgba(52, 211, 153, 0.14);
  color: #a7f3d0;
}
@keyframes dbTier2GlowPulse {
  0% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 10px rgba(52, 211, 153, 0.2); }
  100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 18px rgba(52, 211, 153, 0.4); }
}

/* Tier 3: Red (Rare - Fiery Surge) */
.unit-dcard.tier3 {
  border: 1.5px solid rgba(248, 113, 113, 0.5) !important;
  border-left: 4px solid #f87171 !important;
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.16) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(248, 113, 113, 0.38) !important;
  animation: dbTier3GlowPulse 2.8s ease-in-out infinite alternate;
}
.unit-dcard.tier3:hover:not(.locked) {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 28px rgba(248, 113, 113, 0.65) !important;
  border-color: rgba(248, 113, 113, 0.95) !important;
}
.dcard-rarity-glow.tier3 {
  background: radial-gradient(circle at 15% 15%, rgba(248, 113, 113, 0.28), transparent 65%);
}
.dcard-rarity-pill.tier3 {
  background: rgba(248, 113, 113, 0.22);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.6);
}
.dcard-rarity-pill.tier3 .dcard-pill-gem {
  background: #f87171;
  box-shadow: 0 0 10px #f87171;
}
.dcard-stat-pill.tier3 {
  background: rgba(248, 113, 113, 0.16);
  color: #fca5a5;
}
@keyframes dbTier3GlowPulse {
  0% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 14px rgba(248, 113, 113, 0.28); }
  100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 26px rgba(248, 113, 113, 0.55), inset 0 0 12px rgba(248, 113, 113, 0.12); }
}

/* Tier 4: Orange (Apex Legendary - Solar Radiance) */
.unit-dcard.tier4 {
  border: 1.5px solid rgba(251, 146, 60, 0.65) !important;
  border-left: 4px solid #fb923c !important;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.22) 0%, rgba(245, 158, 11, 0.1) 45%, rgba(15, 23, 42, 0.92) 100%) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 26px rgba(251, 146, 60, 0.5), 0 0 8px rgba(245, 158, 11, 0.6) !important;
  animation: dbTier4ApexRadiance 2.2s ease-in-out infinite alternate;
}
.unit-dcard.tier4:hover:not(.locked) {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 36px rgba(251, 146, 60, 0.8), 0 0 16px rgba(245, 158, 11, 0.9) !important;
  border-color: rgba(251, 191, 36, 1) !important;
}
.dcard-rarity-glow.tier4 {
  background: radial-gradient(circle at 20% 20%, rgba(251, 146, 60, 0.35), rgba(245, 158, 11, 0.15) 50%, transparent 75%);
}
.dcard-rarity-pill.tier4 {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.32), rgba(245, 158, 11, 0.32));
  color: #fde047;
  border: 1px solid rgba(251, 191, 36, 0.75);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.45);
}
.dcard-rarity-pill.tier4 .dcard-pill-gem {
  background: #fbbf24;
  box-shadow: 0 0 10px #fbbf24, 0 0 16px #f59e0b;
}
.dcard-stat-pill.tier4 {
  background: rgba(251, 146, 60, 0.2);
  color: #fef08a;
  font-weight: 800;
}
@keyframes dbTier4ApexRadiance {
  0% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 18px rgba(251, 146, 60, 0.4), 0 0 6px rgba(245, 158, 11, 0.4); }
  100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 32px rgba(251, 146, 60, 0.7), 0 0 14px rgba(245, 158, 11, 0.85), inset 0 0 14px rgba(251, 146, 60, 0.18); }
}

/* Spells & Chips Deck Builder Cards */
.spell-dcard {
  border: 1.5px solid rgba(192, 132, 252, 0.4) !important;
  border-left: 4px solid #c084fc !important;
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.12) 0%, rgba(15, 23, 42, 0.88) 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 14px rgba(192, 132, 252, 0.25) !important;
}
.spell-dcard:hover:not(.locked) {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 22px rgba(192, 132, 252, 0.5) !important;
}
.dcard-rarity-pill.spell {
  background: rgba(192, 132, 252, 0.2);
  color: #c084fc;
  border: 1px solid rgba(192, 132, 252, 0.5);
}
.dcard-rarity-pill.spell .dcard-pill-gem {
  background: #c084fc;
  box-shadow: 0 0 8px #c084fc;
}
.dcard-stat-pill.spell {
  background: rgba(192, 132, 252, 0.14);
  color: #e9d5ff;
}

.chip-dcard {
  border: 1.5px solid rgba(34, 211, 238, 0.4) !important;
  border-left: 4px solid #22d3ee !important;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.12) 0%, rgba(15, 23, 42, 0.88) 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 14px rgba(34, 211, 238, 0.25) !important;
}
.chip-dcard:hover:not(.locked) {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 22px rgba(34, 211, 238, 0.5) !important;
}
.dcard-rarity-pill.chip {
  background: rgba(34, 211, 238, 0.2);
  color: #22d3ee;
  border: 1px solid rgba(34, 211, 238, 0.5);
}
.dcard-rarity-pill.chip .dcard-pill-gem {
  background: #22d3ee;
  box-shadow: 0 0 8px #22d3ee;
}
.dcard-stat-pill.chip {
  background: rgba(34, 211, 238, 0.14);
  color: #a5f3fc;
}

/* Floating Particle Accents in Card Thumbnails */
.dcard-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.dcard-p-dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
}
.particle-blue .p1 { width: 3px; height: 3px; top: 18%; right: 14%; background: #38bdf8; box-shadow: 0 0 6px #38bdf8; animation: dcardFloat 3s ease-in-out infinite; }
.particle-blue .p2 { width: 2px; height: 2px; bottom: 25%; left: 10%; background: #7dd3fc; animation: dcardFloat 4s ease-in-out infinite 1s; }
.particle-blue .p3 { width: 2px; height: 2px; top: 60%; right: 20%; background: #38bdf8; animation: dcardFloat 3.5s ease-in-out infinite 0.5s; }

.particle-green .p1 { width: 3px; height: 3px; top: 15%; right: 12%; background: #34d399; box-shadow: 0 0 8px #34d399; animation: dcardFloat 2.8s ease-in-out infinite; }
.particle-green .p2 { width: 4px; height: 4px; bottom: 20%; left: 8%; background: #10b981; box-shadow: 0 0 6px #10b981; animation: dcardFloat 3.2s ease-in-out infinite 0.8s; }
.particle-green .p3 { width: 2px; height: 2px; top: 55%; right: 18%; background: #6ee7b7; animation: dcardFloat 2.5s ease-in-out infinite 1.4s; }

.particle-red .p1 { width: 4px; height: 4px; top: 12%; right: 10%; background: #f87171; box-shadow: 0 0 10px #f87171; animation: dcardSpark 1.8s ease-in-out infinite; }
.particle-red .p2 { width: 3px; height: 3px; bottom: 18%; left: 12%; background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: dcardSpark 2.2s ease-in-out infinite 0.5s; }
.particle-red .p3 { width: 3px; height: 3px; top: 48%; right: 15%; background: #fca5a5; box-shadow: 0 0 6px #fca5a5; animation: dcardSpark 2s ease-in-out infinite 1s; }

.particle-orange .p1 { width: 5px; height: 5px; top: 10%; right: 8%; background: #fbbf24; box-shadow: 0 0 12px #fbbf24, 0 0 20px #f59e0b; animation: dcardSpark 1.4s ease-in-out infinite; }
.particle-orange .p2 { width: 4px; height: 4px; bottom: 15%; left: 10%; background: #fb923c; box-shadow: 0 0 10px #fb923c; animation: dcardSpark 1.7s ease-in-out infinite 0.4s; }
.particle-orange .p3 { width: 3px; height: 3px; top: 42%; right: 12%; background: #fde047; box-shadow: 0 0 8px #fde047; animation: dcardSpark 1.6s ease-in-out infinite 0.8s; }

@keyframes dcardFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
  50% { transform: translateY(-6px) scale(1.3); opacity: 0.85; }
}

@keyframes dcardSpark {
  0%, 100% { transform: translate(0, 0) scale(0.9); opacity: 0.5; }
  50% { transform: translate(-3px, -8px) scale(1.4); opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
}
.dcard-stepper { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.stepper-btn {
  width: 28px; height: 28px; border-radius: 3px 9px 3px 9px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff; font-family: var(--font-display); font-weight: 800; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: none !important;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.stepper-btn:hover:not(:disabled) { transform: scale(1.12); border-color: #ffffff; background: rgba(255, 255, 255, 0.22); }
.stepper-btn:active:not(:disabled) { transform: scale(0.92); }
.stepper-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
.stepper-count { font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; min-width: 18px; text-align: center; color: #ffffff; }

#deck-builder-tools input,
#deck-builder-tools select {
  border-radius: 4px 14px 4px 14px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #ffffff !important;
}
#btn-deck-builder-confirm {
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  border-radius: 0 !important;
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: none !important;
  font-family: var(--font-display); font-weight: 900; font-size: 1.05rem;
  padding: 14px 28px;
}

.cosmetics-list { display: flex; flex-direction: column; gap: 10px; margin: 16px auto; max-width: 480px; }
.cosmetic-card { display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%; }
.cosmetic-card.owned { border-color: var(--accent); }
.cosmetic-status { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; color: var(--accent); margin-top: 2px; }
.primary-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; filter: none !important; }

#room-code {
  font-family: var(--font-display); font-size: 2.6rem; letter-spacing: 0.15em;
  color: var(--accent); background: var(--panel); border: 1px dashed var(--line);
  border-radius: 12px; padding: 18px; text-align: center; margin: 16px 0;
}

#join-code-input {
  display: block; width: 100%; max-width: 260px; font-size: 1.3rem; letter-spacing: 0.2em;
  text-align: center; text-transform: uppercase; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 16px 0 10px;
  font-family: var(--font-display);
}

.rules-body p { color: #c9cfda; line-height: 1.6; font-size: 0.92rem; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.tag.tier1 { background: color-mix(in srgb, var(--tier1) 30%, transparent); color: #9cc4e5; }
.tag.tier2 { background: color-mix(in srgb, var(--tier2) 30%, transparent); color: #a4d9ae; }
.tag.tier3 { background: color-mix(in srgb, var(--tier3) 30%, transparent); color: #eba39e; }
.tag.tier4 { background: color-mix(in srgb, var(--tier4) 30%, transparent); color: #f5c48b; }

#ready-indicators {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.match-player-chip {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 7px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.match-player-name {
  display: none !important;
}

.match-hud-vs-tag {
  display: none !important;
}

.match-avatar-badge {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  box-sizing: border-box !important;
  transition: all .25s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.match-avatar-particle-canvas {
  position: absolute !important;
  top: -8px !important;
  left: -8px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.match-avatar-circle {
  position: relative !important;
  z-index: 2 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.75rem !important;
  color: #ffffff !important;
  background: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(4px) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  transition: all .25s ease !important;
}

.match-avatar-badge.ready {
  border-color: #22c55e !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.75) !important;
}

@media (max-width: 680px) {
  #ready-indicators { gap: 4px !important; }
  .match-player-chip { padding: 2px 7px 2px 3px !important; gap: 5px !important; }
  .match-player-name { font-size: 0.70rem !important; max-width: 68px !important; }
  .match-avatar-badge { width: 28px !important; height: 28px !important; }
  .match-avatar-circle { width: 22px !important; height: 22px !important; font-size: 0.68rem !important; }
  .match-avatar-particle-canvas { width: 42px !important; height: 42px !important; top: -7px !important; left: -7px !important; }
}

@media (max-width: 400px) {
  .match-player-name { max-width: 52px !important; }
}

.icon-btn {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--line); color: var(--text); cursor: pointer;
  font-size: 0.95rem; transition: transform .2s ease, border-color .2s ease;
}
.icon-btn:hover { transform: translateY(-2px) rotate(25deg) scale(1.08); border-color: var(--accent); }
.icon-btn:active { transform: scale(0.92); }

.player-board-wrapper {
  position: relative;
  width: 100%;
}

.board {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
  padding: 8px 2px; min-height: 108px; width: 100%; box-sizing: border-box;
}
.board .slot,
.board .card {
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.board.opponent { border-bottom: 2px solid var(--line); }

.player-streak-badge {
  display: none !important;
}

@keyframes pulse-streak {
  0%, 100% {
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.2), inset 0 0 6px rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.45);
  }
  50% {
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.4), inset 0 0 10px rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.85);
  }
}

html.theme-light .player-streak-badge {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #b91c1c !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.1) !important;
}

/* --- Streak Shattered Post-Game Visuals --- */
.streak-shattered-banner {
  position: relative;
  margin: 14px auto 8px auto;
  padding: 12px 18px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.5);
  color: #fca5a5;
  font-family: var(--font-display);
  text-align: center;
  border-radius: 0 !important; /* Square-themed aesthetic */
  box-shadow: 0 0 24px rgba(220, 38, 38, 0.15), inset 0 0 8px rgba(220, 38, 38, 0.1);
  overflow: hidden;
  max-width: 440px;
  animation: shatter-shake 0.45s cubic-bezier(.36,.07,.19,.97) both;
}

.streak-shattered-shards {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 10;
}

.shattered-icon {
  display: block;
  font-size: 1.8rem;
  margin-bottom: 4px;
  animation: shatter-icon-spin 0.5s ease-out;
}

.shattered-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #ef4444;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  margin-bottom: 2px;
}

.shattered-desc {
  display: block;
  font-size: 0.78rem;
  opacity: 0.9;
  line-height: 1.4;
}

.glow-num {
  color: #fca5a5;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
}

.shattered-glass-shard {
  position: absolute;
  width: 8px; height: 8px;
  background: rgba(239, 68, 68, 0.85);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  animation: shard-fly 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  pointer-events: none;
}

@keyframes shatter-shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

@keyframes shatter-icon-spin {
  0% { transform: scale(3) rotate(-45deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes shard-fly {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rot)) scale(0.3); opacity: 0; }
}

/* --- Player Board Milestone Animations --- */
.milestone-celebrate {
  animation: milestone-board-shake 0.8s ease-out both;
}

.player-board-milestone-glow {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border: 4px solid #fbbf24;
  box-shadow: 0 0 45px #fbbf24, inset 0 0 35px #fbbf24;
  border-radius: 0 !important; /* Square aesthetic */
  z-index: 45;
  pointer-events: none;
  animation: board-glow-expand 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.milestone-burst-particle {
  position: absolute;
  pointer-events: none;
  z-index: 48;
  animation: milestone-particle-blast 1.4s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes milestone-board-shake {
  0%, 100% { transform: scale(1); }
  10%, 30% { transform: scale(1.02) rotate(-1deg); }
  20%, 40% { transform: scale(1.02) rotate(1deg); }
  50% { transform: scale(1.04) translate3d(0, -3px, 0); }
}

@keyframes board-glow-expand {
  0% { opacity: 1; transform: scale(0.98); border-width: 6px; }
  40% { opacity: 0.85; border-width: 2px; }
  100% { opacity: 0; transform: scale(1.1); border-width: 1px; }
}

@keyframes milestone-particle-blast {
  0% { transform: translate3d(-50%, -50%, 0) scale(1) rotate(0deg); opacity: 1; }
  80% { opacity: 0.85; }
  100% { transform: translate3d(calc(-50% + var(--tx)), calc(-50% + var(--ty)), 0) scale(0.2) rotate(360deg); opacity: 0; }
}

.slot {
  background: rgba(14, 20, 32, 0.65);
  border: 1.5px dashed rgba(255, 255, 255, 0.16);
  border-radius: 12px !important;
  clip-path: none !important;
  filter: none !important;
  min-height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}
.slot.selectable { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3) inset; }
.slot.targetable { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35) inset; }
.slot.drop-target {
  border-color: #38bdf8;
  border-style: solid;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.45), 0 0 0 3px rgba(56, 189, 248, 0.35) inset;
  background: rgba(56, 189, 248, 0.15);
  transform: scale(1.04);
  z-index: 10;
}
.slot.residual-charge {
  animation: residualGlowFade 2.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes residualGlowFade {
  0% {
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.75) inset, 0 0 10px rgba(0, 240, 255, 0.45);
    border-color: #00f0ff !important;
    background: rgba(0, 240, 255, 0.09) !important;
  }
  50% {
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.35) inset, 0 0 4px rgba(0, 240, 255, 0.2);
    border-color: rgba(0, 240, 255, 0.55) !important;
    background: rgba(0, 240, 255, 0.03) !important;
  }
  100% {
    box-shadow: none;
    background: var(--bg2);
  }
}

.board .card,
.board .slot {
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
#hand-row .card[data-tier="1"],
#hand-row .card:not(.blueprint-card) {
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
#hand-row .card.blueprint-card {
  touch-action: pan-x pinch-zoom;
}
.card.dragging-source {
  opacity: 0.28 !important;
  filter: grayscale(0.4) brightness(0.7);
  transform: scale(0.92);
}
.drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  box-shadow: 0 16px 36px rgba(0,0,0,0.7), 0 0 0 2px rgba(255,255,255,0.5);
  transform: translate3d(0, 0, 0) scale(1.08);
  opacity: 0.98;
  border-radius: 12px !important;
  clip-path: none !important;
  filter: none !important;
  will-change: transform, left, top;
}

.card {
  width: 100%; height: 100%;
  border-radius: 12px !important;
  clip-path: none !important;
  filter: none !important;
  padding: 6px 7px 7px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #ffffff; font-size: 0.68rem; cursor: pointer; position: relative;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 1px 0 rgba(255, 255, 255, 0.35);
  contain: layout style;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease,
              filter 0.2s ease;
  will-change: transform, box-shadow;
  transform-origin: center center;
  transform-style: preserve-3d;
}

.card:hover {
  transform: translateY(-8px) scale(1.05) rotate(-0.5deg);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 18px 36px -4px rgba(0, 0, 0, 0.65), 0 0 20px -2px var(--card-color, #38bdf8), inset 0 1px 2px rgba(255, 255, 255, 0.55);
  z-index: 40;
}

/* Dynamic Holographic Specular Glare Layer */
.card-holo-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.1) 35%, transparent 70%);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 12;
  mix-blend-mode: overlay;
}
.card:hover .card-holo-shine, .sc-card:hover .card-holo-shine {
  opacity: 1;
}

/* Hand Entry: Smooth slide-glide from the right edge with a dynamic twist scale */
.card.pop-in-hand, #hand-row .card.pop-in {
  animation: cardSlideInHand 0.72s cubic-bezier(0.19, 1, 0.22, 1) both;
}
@keyframes cardSlideInHand {
  0% {
    transform: translateX(100vw) translateY(12px) scale(0.4) rotate(16deg);
    opacity: 0;
    box-shadow: -12px 12px 24px rgba(0, 0, 0, 0.65);
    filter: brightness(1.3);
  }
  50% {
    transform: translateX(-18px) translateY(-6px) scale(1.05) rotate(-3deg);
    opacity: 0.95;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    filter: brightness(1.1);
  }
  75% {
    transform: translateX(4px) translateY(1px) scale(0.98) rotate(1deg);
    opacity: 1;
  }
  100% {
    transform: translateX(0) translateY(0) scale(1) rotate(0deg);
    opacity: 1;
    filter: brightness(1);
  }
}

/* Board Placement Entry: Smooth downward float entry into board slot */
.card.pop-in-board, .board .card.pop-in {
  animation: cardFloatOnBoard 0.44s cubic-bezier(0.175, 0.885, 0.32, 1.25) both;
}
@keyframes cardFloatOnBoard {
  0% {
    transform: translateY(-28px) scale(1.18) rotate(3deg);
    opacity: 0;
    box-shadow: 0 14px 32px rgba(56, 189, 248, 0.55), 0 0 18px rgba(0, 242, 254, 0.4);
    filter: brightness(1.3);
  }
  45% {
    transform: translateY(4px) scale(0.96) rotate(-1deg);
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    filter: brightness(1.1);
  }
  75% {
    transform: translateY(-2px) scale(1.02) rotate(0.5deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
    filter: brightness(1);
  }
}

@keyframes rocketExplodeRing {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  60% { opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

@keyframes suddenDeathFade {
  0% { opacity: 0; transform: scale(0.95); }
  20% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.glitch-pulse {
  animation: glitchPulseAnim 0.3s ease infinite alternate;
  border-color: #10b981 !important;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.8) !important;
}
@keyframes glitchPulseAnim {
  0% { transform: translate(1px, -1px) skewX(-2deg); filter: hue-rotate(90deg) brightness(1.3); }
  100% { transform: translate(-1px, 1px) skewX(2deg); filter: hue-rotate(180deg) brightness(1.5); }
}

/* Spells and Chips Entry */
.sc-card.pop-in {
  animation: scCardFloatIn 0.38s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
@keyframes scCardFloatIn {
  0%   { transform: translateY(22px) scale(0.72); opacity: 0; box-shadow: 0 12px 24px rgba(0,0,0,0.5); }
  60%  { transform: translateY(-5px) scale(1.06); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Card Hover Effects */
.card:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55), 0 0 16px rgba(255, 255, 255, 0.35);
  filter: brightness(1.1);
  z-index: 100;
}

#hand-row .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
}
#hand-row .card:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), 0 0 16px rgba(125, 211, 252, 0.45);
  filter: brightness(1.15);
  border-color: rgba(125, 211, 252, 0.85);
  z-index: 100;
}

.board .slot {
  position: relative;
}
.board .slot:hover {
  z-index: 100;
}
.board .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.board .card:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 255, 255, 0.35);
  filter: brightness(1.1);
  z-index: 110;
}

#spells-chips-row .sc-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
}
#spells-chips-row .sc-card:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(168, 85, 247, 0.45);
  filter: brightness(1.15);
  border-color: rgba(168, 85, 247, 0.85);
  z-index: 100;
}

.card:active { transform: scale(0.97); }
.card.selected { box-shadow: 0 0 0 3px #fff, 0 0 14px rgba(255,255,255,0.5); }

.card.merge-picked {
  box-shadow: 0 0 0 3px #7dd3fc, 0 0 16px rgba(125,211,252,0.65);
  animation: mergePickPulse 1s ease-in-out infinite;
}
@keyframes mergePickPulse {
  0%, 100% { box-shadow: 0 0 0 3px #7dd3fc, 0 0 10px rgba(125,211,252,0.5); }
  50%      { box-shadow: 0 0 0 3px #bae6fd, 0 0 20px rgba(125,211,252,0.9); }
}
.merge-pick-badge {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%;
  background: #0d1720; border: 2px solid #7dd3fc; color: #bfe9ff;
  font-family: var(--font-display); font-weight: 700; font-size: 0.68rem;
  display: flex; align-items: center; justify-content: center; z-index: 6;
  box-shadow: 0 0 8px rgba(125,211,252,0.7);
}

#btn-confirm-merge.hidden { display: none; }
#btn-confirm-merge {
  background: linear-gradient(120deg, #7dd3fc, #38bdf8); color: #06131c;
  box-shadow: 0 4px 14px rgba(56,189,248,0.35);
}
#btn-confirm-merge:hover:not(:disabled) { transform: translateY(-2px) scale(1.04); }
#btn-confirm-merge:disabled { opacity: 0.5; cursor: not-allowed; }

.mode-btn[data-mode="merge"].active { border-color: #7dd3fc; color: #7dd3fc; box-shadow: 0 0 10px rgba(125,211,252,0.35); }

/* ---------- Merge Preview: live "what will this become" panel shown while
   picking cards in Combine mode, before the player commits to a fusion. ---------- */
#merge-preview { flex-basis: 100%; margin-top: 2px; }
#merge-preview.hidden { display: none; }
.merge-preview-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: 10px; border: 1px dashed #7dd3fc; background: rgba(125,211,252,0.08);
  animation: mergePreviewIn .2s ease;
}
@keyframes mergePreviewIn {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
.merge-preview-swatch {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.merge-preview-body { display: flex; flex-direction: column; gap: 2px; }
.merge-preview-stats { display: flex; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: var(--text); }
.merge-preview-note { color: var(--muted); font-size: 0.7rem; }
.merge-preview-note.warn { color: #ff8a80; font-weight: 600; }

/* ---------- Options: volume & ambient slider rows ---------- */
#volume-row,
#ambient-volume-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 4px 0 14px; padding: 0 2px;
}
#volume-row label,
#ambient-volume-row label { font-size: 0.82rem; color: var(--muted); flex-shrink: 0; }
#volume-slider,
#ambient-volume-slider { flex: 1; accent-color: var(--accent); cursor: pointer; }
#volume-value,
#ambient-volume-value {
  font-family: var(--font-display); font-weight: 700; font-size: 0.76rem;
  color: var(--accent); min-width: 34px; text-align: right;
}

/* ---------- Options: Reset Progress (danger zone) ---------- */
#reset-progress-section {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}

.card.low-hp .card-stats .hp { animation: lowHpBlink 1s ease-in-out infinite; font-weight: 700; }
.card.low-hp { animation: lowHpEdge 1s ease-in-out infinite; }
@keyframes lowHpBlink {
  0%, 100% { color: #ffd8d8; }
  50%      { color: #ff4b4b; }
}
@keyframes lowHpEdge {
  0%, 100% { box-shadow: none; }
  50%      { box-shadow: 0 0 8px 1px rgba(255,60,60,0.55); }
}

.card.defending {
  border-color: #7cf0ff;
  box-shadow: 0 0 10px 2px rgba(124,240,255,0.55), inset 0 0 16px rgba(124,240,255,0.35);
}
.card.defending::before {
  content: '🛡';
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: rgba(190,245,255,0.9); border-radius: 8px;
  background:
    repeating-linear-gradient(0deg, rgba(124,240,255,0.10) 0px, rgba(124,240,255,0.10) 2px, transparent 2px, transparent 6px),
    radial-gradient(circle, rgba(124,240,255,0.28), transparent 72%);
  animation: shieldPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
.card.blueprint-card { border-style: dashed; border-width: 2px; opacity: 0.85; }
.card.blueprint-card::after {
  content: '🧩'; position: absolute; top: 2px; left: 4px; font-size: 0.7rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}

/* ---- Dynamic Combat Animations: Attack Impact & Damage Shake ---- */
@keyframes cardAttackPopPlayer {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    filter: brightness(1);
  }
  14% {
    transform: translateY(5px) scale(0.95) rotate(1.5deg);
    filter: brightness(1.15);
  }
  36% {
    transform: translateY(-24px) scale(1.18) rotate(-3deg);
    filter: brightness(1.75) drop-shadow(0 0 16px rgba(255, 195, 50, 0.9));
    box-shadow: 0 0 22px rgba(255, 185, 40, 0.7);
    z-index: 15;
  }
  50% {
    transform: translateY(-16px) scale(1.1) rotate(2deg);
    filter: brightness(1.4) drop-shadow(0 0 10px rgba(255, 195, 50, 0.6));
  }
  68% {
    transform: translateY(-3px) scale(1.03) rotate(-1deg);
  }
  84% {
    transform: translateY(2px) scale(0.98) rotate(0.5deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: brightness(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  }
}

@keyframes cardAttackPopOpponent {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    filter: brightness(1);
  }
  14% {
    transform: translateY(-5px) scale(0.95) rotate(-1.5deg);
    filter: brightness(1.15);
  }
  36% {
    transform: translateY(24px) scale(1.18) rotate(3deg);
    filter: brightness(1.75) drop-shadow(0 0 16px rgba(255, 195, 50, 0.9));
    box-shadow: 0 0 22px rgba(255, 185, 40, 0.7);
    z-index: 15;
  }
  50% {
    transform: translateY(16px) scale(1.1) rotate(-2deg);
    filter: brightness(1.4) drop-shadow(0 0 10px rgba(255, 195, 50, 0.6));
  }
  68% {
    transform: translateY(3px) scale(1.03) rotate(1deg);
  }
  84% {
    transform: translateY(-2px) scale(0.98) rotate(-0.5deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: brightness(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  }
}

@keyframes cardAttackPopGeneric {
  0%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  15% { transform: scale(0.94) rotate(-1.5deg); filter: brightness(1.15); }
  38% { transform: scale(1.24) rotate(-4deg); filter: brightness(1.7) drop-shadow(0 0 16px rgba(255, 195, 50, 0.85)); }
  56% { transform: scale(0.92) rotate(3deg); filter: brightness(1.3); }
  75% { transform: scale(1.07) rotate(-1.5deg); }
  90% { transform: scale(0.98) rotate(0.5deg); }
}

.card.anim-attack {
  animation: cardAttackPopGeneric 0.52s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 10;
  will-change: transform, filter;
}

#player-board .card.anim-attack {
  animation: cardAttackPopPlayer 0.54s cubic-bezier(0.25, 1, 0.5, 1);
}

#opponent-board .card.anim-attack {
  animation: cardAttackPopOpponent 0.54s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ---- Card Damage Shake / Impact Shockwave ---- */
@keyframes cardDamageImpactShake {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    filter: brightness(1) saturate(1);
  }
  10% {
    transform: translate(-7px, -4px) scale(1.12) rotate(-3.5deg);
    filter: brightness(2.6) saturate(1.8) drop-shadow(0 0 18px rgba(255, 45, 45, 0.95));
    border-color: #ff3b30;
  }
  22% {
    transform: translate(7px, 4px) scale(0.92) rotate(3.5deg);
    filter: brightness(2.1) saturate(1.5) drop-shadow(0 0 14px rgba(255, 60, 60, 0.85));
  }
  34% {
    transform: translate(-6px, 3px) scale(1.06) rotate(-2.5deg);
    filter: brightness(1.6) saturate(1.3) drop-shadow(0 0 10px rgba(255, 60, 60, 0.7));
  }
  48% {
    transform: translate(5px, -3px) scale(0.96) rotate(2deg);
    filter: brightness(1.35);
  }
  62% {
    transform: translate(-4px, 2px) scale(1.03) rotate(-1.5deg);
    filter: brightness(1.2);
  }
  76% {
    transform: translate(3px, -1px) scale(0.98) rotate(1deg);
    filter: brightness(1.1);
  }
  88% {
    transform: translate(-1px, 1px) scale(1.01) rotate(-0.5deg);
    filter: brightness(1.05);
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    filter: brightness(1) saturate(1);
  }
}

.card.anim-hit {
  animation: cardDamageImpactShake 0.44s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 9;
  will-change: transform, filter;
}

@keyframes deathShatter {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
    filter: brightness(1) saturate(1);
  }
  14% {
    transform: translate(-7px, -4px) scale(1.2) rotate(-5deg);
    filter: brightness(2.8) saturate(2) drop-shadow(0 0 20px rgba(255, 40, 40, 1));
  }
  28% {
    transform: translate(7px, 4px) scale(1.14) rotate(6deg);
    filter: brightness(2.2) drop-shadow(0 0 16px rgba(255, 60, 60, 0.9));
  }
  45% {
    transform: scale(0.92) rotate(-3deg);
    filter: brightness(1.8);
    opacity: 0.9;
  }
  100% {
    transform: scale(0.12) rotate(22deg) translateY(24px);
    opacity: 0;
    filter: brightness(0.2) saturate(0) blur(2px);
  }
}
.card.anim-death {
  animation: deathShatter 0.62s ease forwards;
  z-index: 12;
  will-change: transform, opacity, filter;
}

@media (prefers-reduced-motion: reduce) {
  .card:hover, .board .card:hover, #hand-row .card:hover, #spells-chips-row .sc-card:hover { transform: none !important; }
  .card.anim-attack { animation: none !important; }
  .card.anim-hit { animation: none !important; opacity: 0.85; }
  .card.anim-death { animation: none !important; opacity: 0; }
}

@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-5px, 4px); }
  80% { transform: translate(4px, -2px); }
}
.game-title {
  position: relative;
  display: inline-block;
}

.minecraft-splash-text {
  position: absolute;
  right: -16px;
  bottom: 0px;
  font-family: var(--font-display), 'Chakra Petch', sans-serif;
  font-weight: 900;
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  color: #ffff00;
  text-shadow: 
    2px 2px 0px #000000,
    -2px -2px 0px #000000,
    2px -2px 0px #000000,
    -2px 2px 0px #000000,
    0 0 12px rgba(255, 255, 0, 0.85);
  transform: rotate(-15deg);
  white-space: nowrap;
  pointer-events: none;
  z-index: 25;
  animation: minecraftSplashPulse 0.8s ease-in-out infinite alternate;
  transform-origin: center center;
  user-select: none;
}

@keyframes minecraftSplashPulse {
  0% {
    transform: rotate(-15deg) scale(1);
  }
  100% {
    transform: rotate(-15deg) scale(1.18);
  }
}

#screen-game { position: relative; }
#screen-game.screen-shake { animation: screenShake 0.4s ease; }

.lightning-fx {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 8; animation: spellLightningFlash 0.5s ease forwards;
}
.lightning-fx svg { width: 60%; height: 90%; filter: drop-shadow(0 0 6px #fff8b0); }
@keyframes spellLightningFlash {
  0%   { opacity: 0; transform: scale(0.6); }
  15%  { opacity: 1; transform: scale(1.15); }
  30%  { opacity: 0.4; transform: scale(0.95); }
  45%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1); }
}
.card.spell-struck { animation: hitFlash 0.4s ease; }

.cast-fx {
  position: absolute; inset: -4px; border-radius: 12px; pointer-events: none; z-index: 7;
  animation: castPulse 0.55s ease forwards;
}
@keyframes castPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); opacity: 1; }
  100% { box-shadow: 0 0 0 18px rgba(255,255,255,0); opacity: 0; }
}

.merge-fx {
  position: absolute; inset: -6px; border-radius: 14px; pointer-events: none; z-index: 7;
  animation: mergeBurst 0.5s ease forwards;
}

.card-just-merged {
  animation: cardMergeSmoothBounce 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes cardMergeSmoothBounce {
  0%   { transform: scale(0.85) rotate(-3deg); filter: brightness(1.5); }
  50%  { transform: scale(1.18) rotate(3deg); filter: brightness(1.8) drop-shadow(0 0 16px rgba(245, 158, 11, 0.8)); }
  100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}
@keyframes mergeBurst {
  0%   { box-shadow: 0 0 0 0 rgba(224,138,44,0.8), inset 0 0 0 0 rgba(255,255,255,0.9); opacity: 1; transform: scale(0.9); }
  40%  { transform: scale(1.06); }
  100% { box-shadow: 0 0 0 22px rgba(224,138,44,0), inset 0 0 20px 0 rgba(255,255,255,0); opacity: 0; transform: scale(1); }
}

.merge-fx-big {
  animation: mergeBurstBig 0.78s cubic-bezier(.2,.9,.3,1.2) forwards;
}
@keyframes mergeBurstBig {
  0%   { box-shadow: 0 0 0 0 rgba(224,138,44,0.95), inset 0 0 0 0 rgba(255,255,255,0.95); opacity: 1; transform: scale(0.8) rotate(0deg); }
  35%  { transform: scale(1.16) rotate(4deg); }
  100% { box-shadow: 0 0 0 34px rgba(224,138,44,0), inset 0 0 30px 0 rgba(255,255,255,0); opacity: 0; transform: scale(1.02) rotate(0deg); }
}
.merge-particle {
  position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #fff8d8, #ffd166 55%, #ff9d3d 100%);
  box-shadow: 0 0 8px rgba(255,209,102,0.9);
  pointer-events: none; z-index: 9;
  animation: mergeParticleFly 0.7s ease-out forwards;
}
@keyframes mergeParticleFly {
  0%   { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(46px) scale(0.2); opacity: 0; }
}

.chip-fx {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 8; animation: chipSnap 0.45s ease forwards;
}
.chip-fx::before {
  content: '✦'; font-size: 1.4rem; color: #7cf0ff; text-shadow: 0 0 10px rgba(124,240,255,0.9);
}
@keyframes chipSnap {
  0%   { opacity: 0; transform: scale(2) rotate(-25deg); }
  40%  { opacity: 1; transform: scale(0.9) rotate(8deg); }
  100% { opacity: 0; transform: scale(1) rotate(0deg); }
}

.ability-fx {
  position: absolute; inset: 0; border-radius: 9px; pointer-events: none; z-index: 7;
  animation: abilityPulse 0.5s ease forwards;
}
@keyframes abilityPulse {
  0%   { box-shadow: 0 0 0 0 rgba(178,60,240,0.75); opacity: 1; }
  100% { box-shadow: 0 0 0 16px rgba(178,60,240,0); opacity: 0; }
}

.refresh-fx {
  position: absolute; inset: -4px; border-radius: 12px; pointer-events: none; z-index: 7;
  animation: refreshRing 0.55s ease forwards;
}
@keyframes refreshRing {
  0%   { box-shadow: 0 0 0 0 rgba(124,240,255,0.8); opacity: 1; }
  100% { box-shadow: 0 0 0 18px rgba(124,240,255,0); opacity: 0; }
}

.shield-slam-fx {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; pointer-events: none; z-index: 8; animation: shieldSlam 0.45s cubic-bezier(.2,.9,.3,1.3) forwards;
  text-shadow: 0 0 10px rgba(124,240,255,0.9);
}
@keyframes shieldSlam {
  0%   { opacity: 0; transform: translateY(-30px) scale(1.4); }
  60%  { opacity: 1; transform: translateY(2px) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(1); }
}

.death-cause {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  font-size: 0.6rem; font-weight: 700; color: #ffb4b4; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9); pointer-events: none; z-index: 9;
  animation: deathCauseIn 0.3s ease forwards;
}
@keyframes deathCauseIn {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

#attack-lines-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 45; overflow: visible;
}
.attack-line {
  stroke: var(--accent); stroke-width: 3; stroke-linecap: round; opacity: 0.95;
  filter: drop-shadow(0 0 5px rgba(224,138,44,0.85));
  animation: attackLineDraw 0.22s ease-out forwards, attackLineFade 0.4s ease-in 0.18s forwards;
}
.attack-line.blocked { stroke: #7cf0ff; filter: drop-shadow(0 0 5px rgba(124,240,255,0.85)); }
@keyframes attackLineDraw { to { stroke-dashoffset: 0; } }
@keyframes attackLineFade { to { opacity: 0; } }
.attack-impact {
  fill: var(--accent); opacity: 0; animation: impactBurst 0.4s ease-out 0.2s forwards;
}
.attack-impact.blocked { fill: #7cf0ff; }
@keyframes impactBurst {
  0%   { r: 2; opacity: 1; }
  100% { r: 18; opacity: 0; }
}

.lightning-arc-fx {
  fill: none;
  stroke: #c8ffff;
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px #00f0ff);
  animation: lightningFlicker 0.45s ease-out forwards;
}

@keyframes lightningFlicker {
  0% { opacity: 0; stroke-width: 6px; }
  10% { opacity: 1; stroke-width: 4px; }
  25% { opacity: 0.25; stroke-width: 5px; }
  40% { opacity: 1; stroke-width: 3px; }
  55% { opacity: 0.4; stroke-width: 4px; }
  70% { opacity: 1; stroke-width: 2px; }
  100% { opacity: 0; stroke-width: 1px; }
}

.lightning-path-guide {
  fill: none;
  stroke: rgba(0, 240, 255, 0.28);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.45));
  animation: guideFade 1.2s ease-out forwards;
}

.lightning-path-spark {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px #00f0ff);
  opacity: 0.95;
}

@keyframes guideFade {
  0% { opacity: 1; }
  60% { opacity: 0.8; }
  100% { opacity: 0; }
}

.float-num {
  position: absolute; left: 50%; top: 28%; transform: translate(-50%, 0);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  pointer-events: none; z-index: 9; animation: floatUp 0.9s ease forwards;
  text-shadow: 0 2px 5px rgba(0,0,0,0.7); white-space: nowrap;
}
.float-damage { color: #ff6b6b; }
.float-heal { color: #8CF08C; }
.float-block { color: #7cf0ff; font-size: 0.68rem; }
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.8); }
  15%  { opacity: 1; transform: translate(-50%, -6px) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -36px) scale(1); }
}

#record-display { margin-top: 6px; }

#themes-overlay {
  position: fixed; inset: 0; background: rgba(8,9,12,0.85); display: flex;
  align-items: center; justify-content: center; z-index: 600; padding: 20px;
}
#themes-overlay.hidden { display: none; }
#themes-card {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; max-width: 440px; width: 100%; max-height: 82vh; overflow-y: auto;
  animation: modalPopIn .3s cubic-bezier(.34,1.56,.64,1);
}
#themes-card h2 { margin-top: 0; margin-bottom: 4px; font-family: var(--font-display); }
#theme-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 10px; margin-top: 14px; }
.theme-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.74);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.22); border-radius: 4px 14px 4px 14px; padding: 12px 6px;
  color: #ffffff; font-size: 0.78rem; font-family: var(--font-display); font-weight: 800; cursor: pointer;
  box-shadow: none !important;
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), border-color .2s ease, background .2s ease;
}
.theme-btn .theme-icon { font-size: 1.35rem; }
.theme-btn:hover:not(.locked) {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none !important;
}
.theme-btn.active {
  border-color: #ffffff !important;
  outline: 2px solid var(--accent);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25) 0%, rgba(14, 165, 233, 0.08) 100%), rgba(18, 24, 36, 0.88) !important;
  box-shadow: none !important;
  transform: scale(1.02);
}
.theme-btn.locked { cursor: not-allowed; opacity: 0.5; border-style: dashed; border-color: rgba(255, 255, 255, 0.18); }
.theme-btn.locked:hover { transform: none; }
.theme-lock-icon {
  position: absolute; top: 4px; right: 5px; font-size: 0.65rem;
  background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 3px 8px 3px 8px; padding: 2px 4px; line-height: 1;
  backdrop-filter: blur(4px);
}
/* Lock icon visibility check */
.theme-btn:not(.locked) .theme-lock-icon { display: none; }
.theme-btn#theme-btn-dark:not(.locked).active { outline-color: #38bdf8; background: linear-gradient(135deg, rgba(56, 189, 248, 0.25) 0%, rgba(15, 23, 42, 0.88) 100%) !important; }
.theme-btn#theme-btn-light:not(.locked).active { outline-color: #f59e0b; background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(254, 243, 199, 0.2) 100%) !important; }
.theme-btn#theme-btn-verdant:not(.locked) { border-color: rgba(16, 185, 129, 0.45); }
.theme-btn#theme-btn-verdant:not(.locked).active { outline-color: #10b981; background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(18, 24, 36, 0.88) 100%) !important; }
.theme-btn#theme-btn-pink:not(.locked) { border-color: rgba(236, 72, 153, 0.45); }
.theme-btn#theme-btn-pink:not(.locked).active { outline-color: #ec4899; background: linear-gradient(135deg, rgba(236, 72, 153, 0.25) 0%, rgba(18, 24, 36, 0.88) 100%) !important; }
.theme-btn#theme-btn-storm:not(.locked) { border-color: rgba(56, 189, 248, 0.45); }
.theme-btn#theme-btn-storm:not(.locked).active { outline-color: #38bdf8; background: linear-gradient(135deg, rgba(56, 189, 248, 0.25) 0%, rgba(18, 24, 36, 0.88) 100%) !important; }
.theme-btn#theme-btn-aurora:not(.locked) { border-color: rgba(52, 211, 153, 0.45); }
.theme-btn#theme-btn-aurora:not(.locked).active { outline-color: #34d399; background: linear-gradient(135deg, rgba(52, 211, 153, 0.25) 0%, rgba(18, 24, 36, 0.88) 100%) !important; }
.theme-btn#theme-btn-flame:not(.locked) { border-color: rgba(249, 115, 22, 0.45); }
.theme-btn#theme-btn-flame:not(.locked).active { outline-color: #f97316; background: linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(18, 24, 36, 0.88) 100%) !important; }
.theme-btn#theme-btn-sovereign:not(.locked) { border-color: rgba(234, 179, 8, 0.45); }
.theme-btn#theme-btn-sovereign:not(.locked).active { outline-color: #eab308; background: linear-gradient(135deg, rgba(234, 179, 8, 0.25) 0%, rgba(18, 24, 36, 0.88) 100%) !important; }
.theme-btn#theme-btn-mrmoney:not(.locked) { border-color: rgba(34, 197, 94, 0.45); }
.theme-btn#theme-btn-mrmoney:not(.locked).active { outline-color: #22c55e; background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(18, 24, 36, 0.88) 100%) !important; }
.theme-btn#theme-btn-cyberneon:not(.locked) { border-color: rgba(255, 46, 196, 0.45); }
.theme-btn#theme-btn-cyberneon:not(.locked).active { outline-color: #ff2ec4; background: linear-gradient(135deg, rgba(255, 46, 196, 0.25) 0%, rgba(18, 24, 36, 0.88) 100%) !important; }
.theme-btn#theme-btn-abyss:not(.locked) { border-color: rgba(20, 184, 166, 0.45); }
.theme-btn#theme-btn-abyss:not(.locked).active { outline-color: #14b8a6; background: linear-gradient(135deg, rgba(20, 184, 166, 0.25) 0%, rgba(18, 24, 36, 0.88) 100%) !important; }
.theme-btn#theme-btn-magma:not(.locked) { border-color: rgba(239, 68, 68, 0.45); }
.theme-btn#theme-btn-magma:not(.locked).active { outline-color: #ef4444; background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(18, 24, 36, 0.88) 100%) !important; }
.theme-btn#theme-btn-astral:not(.locked) { border-color: rgba(168, 85, 247, 0.45); }
.theme-btn#theme-btn-astral:not(.locked).active { outline-color: #a855f7; background: linear-gradient(135deg, rgba(168, 85, 247, 0.25) 0%, rgba(18, 24, 36, 0.88) 100%) !important; }
.theme-btn#theme-btn-quantum:not(.locked) { border-color: rgba(6, 182, 212, 0.45); }
.theme-btn#theme-btn-quantum:not(.locked).active { outline-color: #06b6d4; background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, rgba(18, 24, 36, 0.88) 100%) !important; }
.theme-btn#theme-btn-glacier:not(.locked) { border-color: rgba(0, 245, 212, 0.45); }
.theme-btn#theme-btn-glacier:not(.locked).active { outline-color: #00f5d4; background: linear-gradient(135deg, rgba(0, 245, 212, 0.25) 0%, rgba(18, 24, 36, 0.88) 100%) !important; }
.theme-btn#theme-btn-celestial:not(.locked) { border-color: rgba(251, 191, 36, 0.45); }
.theme-btn#theme-btn-celestial:not(.locked).active { outline-color: #fbbf24; background: linear-gradient(135deg, rgba(251, 191, 36, 0.25) 0%, rgba(18, 24, 36, 0.88) 100%) !important; }
.theme-btn#theme-btn-prism:not(.locked) { border-color: rgba(56, 189, 248, 0.5); }
.theme-btn#theme-btn-prism:not(.locked).active { outline-color: #38bdf8; background: linear-gradient(135deg, rgba(56, 189, 248, 0.25) 0%, rgba(168, 85, 247, 0.2) 100%) !important; }

.reward-badge {
  display: inline-block; font-size: 0.85rem; margin-left: 4px; cursor: help;
  animation: rewardBadgeShine 1.8s ease-in-out infinite;
}
.verdant-badge { filter: drop-shadow(0 0 4px rgba(47,143,78,0.7)); }
.verdant-badge.unlocked { animation: rewardBadgeShine 1.8s ease-in-out infinite, verdantBadgeHue 3.2s linear infinite; }
.pink-badge { filter: drop-shadow(0 0 4px rgba(255,95,168,0.7)); }
.pink-badge.unlocked { animation: rewardBadgeShine 1.8s ease-in-out infinite, pinkBadgeHue 3.2s linear infinite; }
.flame-badge { filter: drop-shadow(0 0 4px rgba(125,211,252,0.75)); }
.flame-badge.unlocked { animation: rewardBadgeShine 1.8s ease-in-out infinite, flameBadgeHue 3.2s linear infinite; }
.aurora-badge { filter: drop-shadow(0 0 4px rgba(52,211,153,0.75)); }
.aurora-badge.unlocked { animation: rewardBadgeShine 1.8s ease-in-out infinite, auroraBadgeHue 3.2s linear infinite; }
.sovereign-badge { filter: drop-shadow(0 0 4px rgba(212,175,55,0.75)); }
.sovereign-badge.unlocked { animation: rewardBadgeShine 1.8s ease-in-out infinite, sovereignBadgeHue 3.2s linear infinite; }
@keyframes rewardBadgeShine {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.22); opacity: 1; }
}
@keyframes verdantBadgeHue {
  0%   { filter: drop-shadow(0 0 4px rgba(47,143,78,0.7)) hue-rotate(0deg); }
  100% { filter: drop-shadow(0 0 4px rgba(47,143,78,0.7)) hue-rotate(25deg); }
}
@keyframes pinkBadgeHue {
  0%   { filter: drop-shadow(0 0 4px rgba(255,95,168,0.7)) hue-rotate(0deg); }
  100% { filter: drop-shadow(0 0 4px rgba(255,95,168,0.7)) hue-rotate(20deg); }
}
@keyframes flameBadgeHue {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(125,211,252,0.75)) brightness(1); }
  50%      { filter: drop-shadow(0 0 9px rgba(125,211,252,0.95)) brightness(1.3); }
}
@keyframes auroraBadgeHue {
  0%   { filter: drop-shadow(0 0 4px rgba(52,211,153,0.75)) hue-rotate(0deg); }
  100% { filter: drop-shadow(0 0 4px rgba(52,211,153,0.75)) hue-rotate(60deg); }
}
@keyframes sovereignBadgeHue {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(212,175,55,0.75)) brightness(1); }
  50%      { filter: drop-shadow(0 0 8px rgba(212,175,55,0.95)) brightness(1.25); }
}

#quests-overlay {
  position: fixed; inset: 0; background: rgba(8,9,12,0.85); display: flex;
  align-items: center; justify-content: center; z-index: 600; padding: 20px;
}
#quests-overlay.hidden { display: none; }
#quests-card {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; max-width: 680px; width: 95%; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
#quests-card h2 { margin-top: 0; }
#quests-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

/* --- 2.0 Quests Hub Styles (3D Liquid Glass Redesign) --- */
.quests-2-tabs {
  display: flex;
  gap: 8px;
  margin: 16px 0 16px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.12);
}
.quests-2-tabs::-webkit-scrollbar { height: 4px; }
.quests-2-tabs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 2px; }

.quests-2-tab-btn {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.84rem;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 0 !important; /* Strictly rectangular */
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.quests-2-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}
.quests-2-tab-btn:active {
  background: rgba(56, 189, 248, 0.24) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.6) !important;
  transform: scale(0.97);
}
.quests-2-tab-btn.active {
  color: #ffffff !important;
  background: rgba(56, 189, 248, 0.2) !important;
  border: 1px solid #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45), inset 0 0 8px rgba(56, 189, 248, 0.25) !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
.quests-2-content { min-height: 200px; }
.quests-2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 600px) {
  #quests-card { padding: 18px 14px; max-height: 92vh; }
  .quests-2-grid { grid-template-columns: 1fr; }
  .quests-2-tabs { gap: 6px; }
  .quests-2-tab-btn { font-size: 0.74rem; padding: 6px 12px; min-height: 36px; }
}

/* --- 2.0 Daily Bounties & Liquid Glass Cards --- */
.bounty-card {
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px 18px 4px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  box-shadow: none !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.22s ease, border-color 0.22s ease;
}
.bounty-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%), rgba(22, 30, 46, 0.86);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
  box-shadow: none !important;
}
.bounty-card.ready-to-claim {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(245, 158, 11, 0.12) 100%), rgba(18, 24, 36, 0.85);
  border-color: rgba(52, 211, 153, 0.75);
  box-shadow: none !important;
}
.bounty-card.claimed-card {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.28);
  opacity: 0.88;
  box-shadow: none !important;
}

.bounty-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.bounty-title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.bounty-icon {
  font-size: 1.45rem;
  line-height: 1.1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  flex-shrink: 0;
}
.bounty-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.bounty-desc {
  font-size: 0.75rem;
  color: var(--muted, #94a3b8);
  margin-top: 3px;
  line-height: 1.4;
}

.bounty-status-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 3px 10px 3px 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: none !important;
}
.bounty-status-badge.in-progress {
  background: rgba(56, 189, 248, 0.16);
  color: #38bdf8;
  border: 1.5px solid rgba(56, 189, 248, 0.45);
}
.bounty-status-badge.ready {
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  border: 1.5px solid rgba(245, 158, 11, 0.75);
  animation: bountyPulse 2s infinite ease-in-out;
}
.bounty-status-badge.claimed {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1.5px solid rgba(16, 185, 129, 0.45);
}

@keyframes bountyPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.05); filter: brightness(1.2); }
}

.bounty-progress-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.bounty-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
}
.bounty-progress-steps {
  font-weight: 800;
  color: #7dd3fc;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bounty-reward-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #34d399;
  font-size: 0.72rem;
}

.bounty-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}
.bounty-progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: linear-gradient(90deg, #0284c7, #38bdf8);
}
.bounty-progress-fill.completed {
  background: linear-gradient(90deg, #059669, #34d399);
}

.bounty-step-pips {
  display: flex;
  gap: 5px;
  width: 100%;
  margin-top: 3px;
}
.bounty-step-pip {
  flex: 1;
  height: 6px;
  border-radius: 2px 5px 2px 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
}
.bounty-step-pip.active {
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  border-color: #7dd3fc;
}
.bounty-step-pip.completed {
  background: linear-gradient(90deg, #059669, #10b981);
  border-color: #34d399;
}

.bounty-claim-btn {
  width: 100%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  font-family: var(--font-display, sans-serif);
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  padding: 9px 14px !important;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px) !important;
  border-radius: 0 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: none !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease, border-color 0.2s ease !important;
  margin-top: 6px;
  color: #ffffff !important;
}
.bounty-claim-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  border-color: #ffffff !important;
  box-shadow: none !important;
}

.bounty-summary-banner {
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.12) 0%, rgba(14, 165, 233, 0.04) 100%), rgba(18, 24, 36, 0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: 4px 18px 4px 18px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: none !important;
}
.bounty-summary-text {
  font-size: 0.75rem;
  color: #bae6fd;
  line-height: 1.4;
}
.bounty-reset-pill {
  font-size: 0.68rem;
  font-weight: 800;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  padding: 4px 12px;
  border-radius: 4px 12px 4px 12px;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
}

/* Quest Row & Milestone Cards in Liquid Glass */
.quest-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px 16px 4px 16px;
  padding: 12px 14px;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.quest-row:hover {
  border-color: rgba(255, 255, 255, 0.38);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%), rgba(22, 30, 46, 0.84);
}
.quest-row.complete {
  border-color: rgba(56, 189, 248, 0.65);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.16) 0%, rgba(14, 165, 233, 0.05) 100%), rgba(18, 24, 36, 0.84);
}
.quest-icon { font-size: 1.5rem; flex-shrink: 0; width: 36px; text-align: center; }
.quest-body { flex: 1; min-width: 0; }
.quest-title { font-family: var(--font-display); font-weight: 800; font-size: 0.92rem; margin-bottom: 2px; color: #ffffff; }
.quest-desc { font-size: 0.76rem; color: var(--muted); line-height: 1.35; }
.quest-status { font-size: 1.1rem; flex-shrink: 0; }
.quest-row.complete .quest-status { color: #38bdf8; }

.milestone-card-item {
  padding: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.76) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px 18px 4px 18px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: none !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.milestone-card-item:hover {
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%), rgba(22, 30, 46, 0.86) !important;
  transform: translateY(-2px);
  box-shadow: none !important;
}
.milestone-card-item.unlocked-milestone {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.22) 0%, rgba(16, 185, 129, 0.12) 100%), rgba(18, 24, 36, 0.86) !important;
  border-color: rgba(250, 204, 21, 0.7) !important;
  box-shadow: none !important;
}

#enemy-count-label {
  text-align: center; font-size: 0.78rem; color: var(--muted);
  margin: 0 2px 6px; display: flex; align-items: center; justify-content: center; gap: 5px;
}
#enemy-count { color: var(--accent); font-weight: 700; font-family: var(--font-display); }

#patchnotes-overlay {
  position: fixed; inset: 0; background: rgba(8,9,12,0.85); display: flex;
  align-items: center; justify-content: center; z-index: 55; padding: 20px;
}
#patchnotes-overlay.hidden { display: none; }
#patchnotes-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px 30px; text-align: left; position: relative;
  width: min(520px, 100%); max-height: 78vh; overflow-y: auto;
  animation: modalPopIn .3s cubic-bezier(.34,1.56,.64,1);
}
#patchnotes-card h2 { font-family: var(--font-display); margin: 0 0 14px; text-align: center; }
.patch-entry { padding: 12px 0; border-top: 1px solid var(--line); }
.patch-entry:first-of-type { border-top: none; }
.patch-version {
  font-family: var(--font-display); font-weight: 700; color: var(--accent);
  font-size: 0.95rem; display: flex; align-items: center; gap: 8px;
}
.patch-version .current-tag {
  font-family: var(--font-body); font-weight: 600; font-size: 0.65rem; color: #14171c;
  background: var(--accent); padding: 1px 7px; border-radius: 20px;
}
.patch-entry ul { margin: 8px 0 0; padding-left: 18px; }
.patch-entry li { color: #c9cfda; font-size: 0.82rem; line-height: 1.5; margin-bottom: 3px; }
.card.tier1 { background: linear-gradient(160deg, var(--tier1), #2c5c85); }
.card.tier2 { background: linear-gradient(160deg, var(--tier2), #386f43); }
.card.tier3 { background: linear-gradient(160deg, var(--tier3), #8f302a); }
.card.tier4 { background: linear-gradient(160deg, var(--tier4), #a8631a); }
.card-name { font-family: var(--font-display); font-weight: 600; font-size: 0.66rem; line-height: 1.1; }
.tier-glyph { display: inline-block; margin-right: 3px; opacity: 0.85; font-size: 0.85em; }
.card-ability { font-size: 0.56rem; opacity: 0.85; line-height: 1.1; max-height: 2.2em; overflow: hidden; }
.card-stats { display: flex; justify-content: space-between; font-weight: 700; font-size: 0.72rem; }
.card-stats .hp { color: #ffd8d8; }
.card-stats .dmg { color: #ffe9b8; }
.card-stats .sp { color: #d8e9ff; }

#mode-bar { display: flex; align-items: center; gap: 10px; padding: 10px 4px; flex-wrap: wrap; }
.mode-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text);
  border-radius: 9999px !important;
  clip-path: none !important;
  filter: none !important;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none !important;
}
.mode-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
.mode-btn:active { transform: translateY(0); }
.mode-btn.active {
  background: color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.1));
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 0 14px -2px var(--accent) !important;
}
#hint-text { display: none !important; }

#emergency-conversion-container {
  display: flex;
  justify-content: center;
  margin: 10px 0;
  animation: bountyPulse 2s infinite ease-in-out;
}
#emergency-conversion-container.hidden {
  display: none !important;
}
.emergency-btn {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
  border: 1px solid #f87171 !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.emergency-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

#hand-row {
  display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px; margin-top: 2px; margin-bottom: 2px; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#spells-chips-row {
  display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px; margin-top: 4px; border-top: 1px solid var(--line); -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#hand-row .card, #spells-chips-row .sc-card { flex: 0 0 74px; height: 100px; }

#bot-thinking-indicator {
  text-align: center; color: var(--muted); font-size: 0.8rem; font-style: italic;
  margin: 2px 2px 6px; animation: botThinkPulse 1.1s ease-in-out infinite;
}
#bot-thinking-indicator.hidden { display: none; }
#quit-match-section.hidden { display: none; }
@keyframes botThinkPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

#forced-merge-banner {
  background: linear-gradient(90deg, rgba(224,138,44,0.18), rgba(193,68,60,0.18));
  border: 1px solid var(--tier4); color: #ffd8a8; border-radius: 10px !important;
  clip-path: none !important;
  padding: 10px 14px; font-size: 0.85rem; font-weight: 600; margin: 4px 2px;
  animation: bannerPulse 1.6s ease-in-out infinite;
}
#forced-merge-banner.hidden { display: none; }
@keyframes bannerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,138,44,0.35); }
  50% { box-shadow: 0 0 14px 2px rgba(224,138,44,0.35); }
}
.card.tier1.force-glow {
  animation: blueGlow 1.1s ease-in-out infinite;
  border-color: #bfe6ff;
}
@keyframes blueGlow {
  0%, 100% { box-shadow: 0 0 4px 1px rgba(120,200,255,0.4); }
  50% { box-shadow: 0 0 16px 5px rgba(120,200,255,0.85); }
}
.action-disabled { opacity: 0.4; pointer-events: none; }

#hand-label {
  font-family: var(--font-display); font-size: 0.8rem; color: var(--muted);
  padding: 4px 2px 0; display: flex; gap: 6px; align-items: baseline;
}
#hand-count { color: var(--accent); font-weight: 700; }

#deck-section { margin-top: 4px; padding: 6px 2px 2px; border-top: 1px solid var(--line); }
#deck-label {
  font-family: var(--font-display); font-size: 0.8rem; color: var(--muted);
  padding: 4px 2px; display: flex; gap: 6px; align-items: baseline;
}
#deck-count { color: var(--accent); font-weight: 700; }
#deck-row {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch;
}
#deck-row .card { flex: 0 0 62px; height: 84px; font-size: 0.56rem; opacity: 0.82; pointer-events: none; }
#deck-row .card .card-ability { display: none; }
.sc-card {
  border-radius: 12px !important; padding: 6px 7px 7px; color: #ffffff; font-size: 0.62rem; cursor: pointer;
  clip-path: none !important;
  filter: none !important;
  background: linear-gradient(155deg, #3730a3 0%, #1e1b4b 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 1px 0 rgba(255, 255, 255, 0.35);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.2s ease;
}
.sc-card:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.6), 0 0 16px -2px #a855f7;
  border-color: rgba(255, 255, 255, 0.5);
  z-index: 100;
  position: relative;
}
.sc-card:active { transform: scale(0.97); }
.sc-card.spell {
  background: linear-gradient(155deg, #7c3aed 0%, #4c1d95 100%);
  color: #ffffff;
  border: 1px solid rgba(216, 180, 254, 0.45);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  font-weight: 700;
}
.sc-card.spell:hover {
  border-color: #e9d5ff;
  box-shadow: 0 14px 30px rgba(124, 58, 237, 0.6), 0 0 20px rgba(168, 85, 247, 0.8);
}

.sanctioned-cracked {
  position: relative;
  border-color: #eab308 !important;
  box-shadow: 0 0 14px rgba(234, 179, 8, 0.7) !important;
}
.sanctioned-cracked::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, transparent 30%, rgba(250, 204, 21, 0.25) 100%),
                    linear-gradient(45deg, transparent 45%, #facc15 48%, #eab308 52%, transparent 55%),
                    linear-gradient(-45deg, transparent 40%, #facc15 43%, #fef08a 47%, transparent 50%);
  border-radius: inherit;
  opacity: 0.85;
}

.yellow-zap-glow {
  animation: yellowZapPulse 0.3s ease infinite alternate;
  border-color: #facc15 !important;
  box-shadow: 0 0 22px #facc15, inset 0 0 14px #fef08a !important;
}
@keyframes yellowZapPulse {
  0% { filter: brightness(1.1) drop-shadow(0 0 8px #facc15); transform: scale(1.02); }
  100% { filter: brightness(1.4) drop-shadow(0 0 18px #fef08a); transform: scale(0.98); }
}

.all-aura-glow {
  border-color: #facc15 !important;
  box-shadow: 0 0 16px #facc15, 0 0 32px #eab308 !important;
  animation: allAuraPulse 1.2s ease-in-out infinite alternate;
}
@keyframes allAuraPulse {
  0% { box-shadow: 0 0 12px #facc15, 0 0 24px #eab308; }
  100% { box-shadow: 0 0 22px #fef08a, 0 0 42px #facc15; }
}
.sc-card.chip { background: linear-gradient(160deg, #8a5fd9, #4a2c72); color: #fff; }
.sc-card.selected { box-shadow: 0 0 0 3px #fff; }

#log-panel {
  position: fixed; right: 8px; bottom: 8px; width: min(320px, 90vw); max-height: 45vh;
  overflow-y: auto; background: rgba(20,23,28,0.96); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px; font-size: 0.74rem; color: var(--muted); z-index: 30;
}
#log-panel.hidden { display: none; }
#log-panel div { padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }

#toast {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%) translateY(-8px) scale(0.9);
  background: #23262f; border: 1px solid var(--line); padding: 8px 16px; border-radius: 30px;
  font-size: 0.82rem; opacity: 0; pointer-events: none; transition: all .25s cubic-bezier(.34,1.56,.64,1); z-index: 40;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* --- Copy button tactile success pulse --- */
.copy-success-pulse {
  animation: copySuccessBlink 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes copySuccessBlink {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); box-shadow: 0 0 14px rgba(34, 197, 94, 0.4); }
  100% { transform: scale(1); }
}

#gameover-overlay {
  position: fixed; inset: 0; background: rgba(8,9,12,0.85); display: flex;
  align-items: center; justify-content: center; z-index: 50;
}
#gameover-overlay.hidden { display: none; }
#gameover-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 34px 42px; text-align: center; position: relative; overflow: hidden;
  animation: gameOverIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
}
#gameover-card.is-win {
  border-color: rgba(74, 222, 128, 0.6);
  box-shadow: 0 0 50px rgba(74, 222, 128, 0.25), 0 30px 90px rgba(0,0,0,0.6);
}
#gameover-card.is-loss {
  border-color: rgba(248, 113, 113, 0.5);
  box-shadow: 0 0 50px rgba(248, 113, 113, 0.2), 0 30px 90px rgba(0,0,0,0.6);
}

/* Tactical Match Analytics Dashboard */
.gameover-analytics-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px;
  border-radius: 12px;
  margin: 18px 0;
  text-align: left;
  backdrop-filter: blur(8px);
}

.analytics-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #94a3b8;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}

.analytics-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.analytics-row strong {
  color: #38bdf8;
  font-weight: 700;
}

@keyframes gameOverIn {
  0% { transform: scale(0.7) translateY(30px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

#gameover-particles {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;
}
.gameover-particle {
  position: absolute; border-radius: 50%; opacity: 0;
  animation: particleFloat 2s ease-in-out infinite;
}
@keyframes particleFloat {
  0% { transform: translateY(20px) scale(0); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { transform: translateY(-80px) scale(1.2); opacity: 0; }
}
#gameover-title { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 4px; }
#gameover-duration { margin: 0 0 16px; }
#gameover-buttons { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#gameover-buttons .primary-btn { min-width: 160px; }

#options-overlay {
  position: fixed; inset: 0; background: rgba(8,9,12,0.85); display: flex;
  align-items: center; justify-content: center; z-index: 55;
  padding: 16px;
}
#options-overlay.hidden { display: none; }

#options-card.settings-modal-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), #0d131f !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 20px !important;
  clip-path: none !important;
  filter: none !important;
  padding: 26px 30px;
  text-align: left;
  position: relative;
  max-width: 540px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
  animation: modalPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
  box-sizing: border-box;
}

.settings-modal-header {
  position: relative;
  margin-bottom: 14px;
  padding-right: 32px;
}

.settings-modal-header .modal-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.settings-modal-header h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.15;
}

.settings-modal-subtitle {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

/* In-Match Banner */
.match-pause-card {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg2));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.match-pause-card.hidden { display: none !important; }

.match-pause-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.match-pause-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 800;
  color: #5efc82;
  letter-spacing: 0.04em;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5efc82;
  box-shadow: 0 0 8px #5efc82;
  animation: pulseDotAnim 1.8s ease-in-out infinite;
}
@keyframes pulseDotAnim {
  0%, 100% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
}

.match-pause-pill {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: rgba(0,0,0,0.3);
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--line);
}

.match-pause-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  padding: 8px 12px;
}

.pause-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.pause-stat-item .stat-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}

.pause-stat-item .stat-val {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
}
.pause-stat-item.you .stat-val { color: #8cf08c; }
.pause-stat-item.opp .stat-val { color: #ff8a80; }

.pause-stat-vs {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  color: var(--muted);
}

.match-pause-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resume-btn {
  width: 100%;
  padding: 10px 16px;
  font-size: 0.92rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  border-radius: 0 !important; /* Strictly square/rectangular */
  border: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.resume-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.resume-btn .hotkey-pill {
  font-size: 0.65rem;
  background: rgba(0,0,0,0.25);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.quit-action-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.quit-action-box.hidden { display: none !important; }

.danger-outline-btn {
  background: transparent;
  color: #ff8a80;
  border: 1px solid rgba(255, 107, 107, 0.4);
  border-radius: 0 !important; /* Strictly square/rectangular */
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: all 0.16s ease;
}
.danger-outline-btn:hover {
  background: rgba(255, 107, 107, 0.12);
  border-color: #ff8a80;
  color: #ffaba5;
}

.quit-sub-note {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0;
  text-align: center;
}

/* Category Tabs */
.settings-tabs-nav {
  display: flex;
  gap: 8px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
  flex-shrink: 0;
  background: none;
  box-shadow: none;
}

.settings-tab-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.84rem;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 0 !important; /* Strictly rectangular */
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.settings-tab-btn .tab-icon-svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  flex-shrink: 0;
}
.settings-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}
.settings-tab-btn:active {
  background: rgba(56, 189, 248, 0.24) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.6) !important;
  transform: scale(0.97);
}
.settings-tab-btn.active {
  color: #ffffff !important;
  background: rgba(56, 189, 248, 0.2) !important;
  border: 1px solid #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45), inset 0 0 8px rgba(56, 189, 248, 0.25) !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* Light Theme overrides for settings-tabs */
html.theme-light .settings-tabs-nav {
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.08) !important;
}
html.theme-light .settings-tab-btn {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #57534e !important;
}
html.theme-light .settings-tab-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1c1917 !important;
}
html.theme-light .settings-tab-btn.active {
  color: #0284c7 !important;
  background: rgba(14, 165, 233, 0.12) !important;
  border: 1px solid rgba(14, 165, 233, 0.5) !important;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.25), inset 0 0 6px rgba(14, 165, 233, 0.08) !important;
}

/* Light Theme overrides for locker-tabs */
html.theme-light .locker-main-tabs {
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.08) !important;
}
html.theme-light .locker-main-tab-btn {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #57534e !important;
}
html.theme-light .locker-main-tab-btn:hover {
  background: rgba(14, 165, 233, 0.05) !important;
  border-color: rgba(14, 165, 233, 0.25) !important;
  color: #0369a1 !important;
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.12) !important;
}
html.theme-light .locker-main-tab-btn.active {
  color: #0284c7 !important;
  background: rgba(14, 165, 233, 0.12) !important;
  border: 1px solid rgba(14, 165, 233, 0.5) !important;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.25), inset 0 0 6px rgba(14, 165, 233, 0.08) !important;
}

/* Panels Container */
.settings-panels-container {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
  max-height: calc(88vh - 200px);
}
.settings-panels-container::-webkit-scrollbar {
  width: 5px;
}
.settings-panels-container::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}
.settings-panels-container::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

.settings-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-panel.hidden { display: none !important; }

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-group-title {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* Settings Items */
.settings-card-item {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.settings-card-item:hover {
  border-color: rgba(255, 255, 255, 0.14);
}
.settings-card-item.highlight-card {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg2));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

.settings-item-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.settings-item-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-item-title .item-icon {
  font-size: 1rem;
}

.settings-item-desc {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.35;
}

/* Toggles & Pill Buttons */
.settings-pill-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.settings-pill-toggle:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.settings-pill-toggle:active {
  transform: translateY(0);
}
.settings-pill-toggle[data-state="on"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, var(--panel));
  color: #fff;
}
.settings-pill-toggle[data-state="off"] {
  opacity: 0.8;
  border-color: var(--line);
  color: var(--muted);
}

/* Sliders */
.settings-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 2px 0 0;
  padding: 2px 0;
}

.slider-min-icon {
  font-size: 0.8rem;
  color: var(--muted);
}

.settings-range-slider {
  flex: 1;
  accent-color: var(--accent);
  cursor: pointer;
  height: 6px;
  background: var(--panel);
  border-radius: 4px;
  outline: none;
}

.slider-badge {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.76rem;
  color: var(--accent);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
  min-width: 40px;
  text-align: center;
}

/* Switch Toggle (iOS style) */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-slider {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--line);
  border-radius: 24px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.switch-slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.switch-toggle input:checked + .switch-slider {
  background-color: var(--accent);
  border-color: var(--accent);
}
.switch-toggle input:checked + .switch-slider::before {
  transform: translateX(20px);
}

/* Danger Zone */
.settings-danger-card {
  background: rgba(255, 75, 75, 0.05);
  border: 1px solid rgba(255, 75, 75, 0.3);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-danger-card.hidden { display: none !important; }

.danger-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.danger-card-header .danger-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}
.danger-title {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  color: #ff8a80;
}
.danger-desc {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 2px;
}

.status-pill {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.status-pill.green {
  background: rgba(94, 252, 130, 0.12);
  color: #5efc82;
  border: 1px solid rgba(94, 252, 130, 0.3);
}

.modal-close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: none !important;
  color: var(--text); cursor: pointer;
  font-size: 0.85rem; display: flex; align-items: center; justify-content: center;
  transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1), background .2s ease, border-color .2s ease, color .2s ease;
  z-index: 10;
}
.modal-close:hover {
  transform: scale(1.1);
  background: rgba(244, 63, 94, 0.35);
  border-color: rgba(255, 255, 255, 0.75);
  color: #ffffff;
  box-shadow: none !important;
}
.modal-close:active { transform: scale(0.92); box-shadow: none !important; }
.primary-btn.danger { background: var(--tier3); margin-top: 14px; }

#quests-overlay, #themes-overlay, #options-overlay, #patchnotes-overlay, #gameover-overlay, #confirm-overlay, #secret-menu-overlay, #player-name-overlay, #collection-book-overlay, #stats-hub-overlay, #profile-overlay, #vr-prompt-overlay {
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  animation: overlayFadeIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
  z-index: 2000 !important;
}

@keyframes overlayFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

#quests-card, #themes-card, #options-card, #patchnotes-card, #gameover-card, #confirm-card, #collection-book-card, #player-name-card, #stats-hub-card, .profile-panel, #vr-prompt-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%), rgba(18, 24, 36, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 0 !important;
  clip-path: polygon(
    0 0,
    16px 5px,
    calc(100% - 16px) 5px,
    100% 0,
    calc(100% - 5px) 16px,
    calc(100% - 5px) calc(100% - 16px),
    100% 100%,
    calc(100% - 16px) calc(100% - 5px),
    16px calc(100% - 5px),
    0 100%,
    5px calc(100% - 16px),
    5px 16px
  );
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.35));
  box-shadow: none !important;
  animation: modalPopIn 0.28s cubic-bezier(.34,1.4,.64,1) both;
}

html.theme-light #quests-card,
html.theme-light #themes-card,
html.theme-light #options-card,
html.theme-light #patchnotes-card,
html.theme-light #gameover-card,
html.theme-light #confirm-card,
html.theme-light #collection-book-card,
html.theme-light #player-name-card,
html.theme-light #stats-hub-card,
html.theme-light .profile-panel,
html.theme-light #vr-prompt-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.65) 100%), rgba(246, 244, 239, 0.94) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.16) !important;
  box-shadow: none !important;
}

html.theme-light .theme-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 100%), rgba(246, 244, 239, 0.94) !important;
  color: #1c1917 !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
}
html.theme-light .theme-btn.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(255, 255, 255, 0.9) 100%) !important;
  border-color: #f59e0b !important;
}
html.theme-light .dcard {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 100%), rgba(246, 244, 239, 0.94) !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
  color: #1c1917 !important;
}
html.theme-light .dcard-name { color: #1c1917 !important; }
html.theme-light .dcard-text { color: #57534e !important; }
html.theme-light .deck-builder-dashboard {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 100%), rgba(246, 244, 239, 0.94) !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
}
html.theme-light .db-dash-header { color: #1c1917 !important; border-bottom-color: rgba(0, 0, 0, 0.12) !important; }
html.theme-light .db-dash-metric,
html.theme-light .db-dash-metric-wide,
html.theme-light .db-tier-item {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #1c1917 !important;
}
html.theme-light .deck-builder-heading { color: #1c1917 !important; }
html.theme-light .profile-stat-pill {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 100%), rgba(246, 244, 239, 0.94) !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
}
html.theme-light .profile-stat-pill b { color: #1c1917 !important; }
html.theme-light .profile-prog-card { border-color: rgba(0, 0, 0, 0.14) !important; }
html.theme-light .profile-prog-card .ppc-title { color: #1c1917 !important; }
html.theme-light .profile-section-heading { color: #1c1917 !important; }
html.theme-light .ledger-list > div,
html.theme-light .activity-list > div {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%), rgba(246, 244, 239, 0.94) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
html.theme-light .ledger-list span,
html.theme-light .activity-list p { color: #1c1917 !important; }
#confirm-overlay, #vr-prompt-overlay {
  position: fixed; inset: 0; background: rgba(8,9,12,0.85); display: flex;
  align-items: center; justify-content: center; z-index: 700; padding: 20px;
}
#confirm-overlay.hidden, #vr-prompt-overlay.hidden { display: none; }
#confirm-card, #vr-prompt-card {
  position: relative;
  border: 1px solid var(--line); border-radius: 16px;
  padding: 28px 32px; text-align: center; max-width: 400px; width: 100%;
}
#confirm-card h2 { font-family: var(--font-display); margin: 0 0 8px; font-size: 1.35rem; }
#confirm-actions {
  display: flex; gap: 10px; justify-content: center; margin-top: 20px;
}
#confirm-actions .primary-btn { margin-top: 0; }
.modal-kicker {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px;
}

@keyframes modalPopIn {
  0% { transform: scale(0.92) translateY(8px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.confetti-piece {
  position: absolute; top: -10px; width: 8px; height: 14px; opacity: 0.9;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  to { transform: translateY(340px) rotate(540deg); opacity: 0; }
}

.screen:not(.hidden) { 
  animation: screenSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; 
}
@keyframes screenSlideIn {
  0% { opacity: 0; transform: translateY(12px) scale(0.992); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Staggered smooth entrance for primary screen sections */
.screen:not(.hidden) > h2,
.screen:not(.hidden) > .hero,
.screen:not(.hidden) > .menu-grid,
.screen:not(.hidden) > .menu-footer,
.screen:not(.hidden) > .diff-list,
.screen:not(.hidden) > .tower-page-wrapper,
.screen:not(.hidden) > .shop-top-nav,
.screen:not(.hidden) > #shop-cosmetics-list,
.screen:not(.hidden) > .deck-builder-section,
.screen:not(.hidden) > .locker-header,
.screen:not(.hidden) > .locker-category-tabs,
.screen:not(.hidden) > .search-pulse-container {
  animation: screenChildSlideIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Interactive Deck Synergy Analytics Widget */
.deck-synergy-widget {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 12px 0 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dsw-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.dsw-rating {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: #38bdf8;
  letter-spacing: 0.02em;
}

.dsw-counts {
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
}

.dsw-bar-wrap {
  display: flex;
  height: 8px;
  border-radius: 9999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.dsw-bar {
  height: 100%;
  transition: width 0.3s ease;
}

.dsw-bar.t1 { background: #38bdf8; }
.dsw-bar.t2 { background: #4ade80; }
.dsw-bar.t3 { background: #f87171; }
.dsw-bar.t4 { background: #fb923c; }

.dsw-legend {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: #cbd5e1;
  font-weight: 600;
  flex-wrap: wrap;
}

.dsw-advice {
  font-size: 0.78rem;
  color: #fef08a;
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.22);
  padding: 6px 10px;
  border-radius: 8px;
  line-height: 1.35;
}

@keyframes screenChildSlideIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .screen,
  .screen:not(.hidden),
  .screen:not(.hidden) > *,
  #quests-overlay, #themes-overlay, #options-overlay, #patchnotes-overlay, #gameover-overlay, #confirm-overlay, #secret-menu-overlay, #player-name-overlay,
  #quests-card, #themes-card, #options-card, #patchnotes-card, #gameover-card, #confirm-card {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 480px) {
  #app { padding-bottom: 40px; }
  .board { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 2px !important; width: 100% !important; min-height: 82px !important; }
  .slot { min-height: 82px !important; min-width: 0 !important; }
  .board .card { font-size: 0.58rem !important; min-width: 0 !important; padding: 2px !important; }
  .board .card-stats {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.5px !important;
  }
  .board .card-stats .hp,
  .board .card-stats .dmg,
  .board .card-stats .sp {
    padding: 1px 1px !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
  }
  .menu-footer {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin-top: 14px;
    margin-bottom: 8px;
    padding: 5px 8px !important;
  }
}

#player-name-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(4,7,12,.92);
}
#player-name-overlay.hidden { display: none; }
#player-name-card {
  width: min(420px, 100%); box-sizing: border-box; padding: 28px;
  border-radius: 18px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,.45); text-align: center;
}
#player-name-card h2 { margin: 0 0 8px; font-family: var(--font-display); }
#player-name-card input {
  width: 100%; box-sizing: border-box; margin: 14px 0 8px; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg2);
  color: var(--text); font: inherit;
}
#player-name-error { min-height: 1.2em; color: #ff8a8a; margin-bottom: 8px; }

/* ---------- PRISM CORE THEME: LIVING DIAMOND CRYSTAL REFRACTORS ----------
   A radiant, pristine diamond crystal theme with real-time chromatic spectrum dispersion,
   multi-faceted obsidian glass card framing, sweeping caustics, and celestial harmonic caustics. ---------- */
html.theme-prism,
html.theme-darkmatter {
  --bg: #020610;
  --bg2: #050d1e;
  --panel: rgba(4, 13, 26, 0.94);
  --line: rgba(0, 240, 255, 0.5);
  --text: #f0fdf4;
  --muted: #93c5fd;
  --accent: #00f0ff;
  --accent-cyan: #38bdf8;
  --accent-purple: #8b5cf6;
  --bg-grad-1: #0a192f;
  --bg-grad-2: #020610;
  background:
    radial-gradient(circle at 50% 20%, rgba(0, 240, 255, 0.15), transparent 45%),
    radial-gradient(circle at 15% 40%, rgba(139, 92, 246, 0.16), transparent 40%),
    radial-gradient(circle at 85% 65%, rgba(251, 191, 36, 0.12), transparent 42%),
    radial-gradient(circle at 30% 85%, rgba(16, 185, 129, 0.14), transparent 40%),
    radial-gradient(circle at 75% 15%, rgba(244, 63, 94, 0.12), transparent 38%),
    linear-gradient(140deg, #02050e 0%, #030a18 50%, #040814 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Ambient Prismatic Refraction Particles & Stardust */
html.theme-prism::before,
html.theme-darkmatter::before {
  content: '';
  position: fixed;
  inset: -15%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.6px) 0 0 / 52px 48px,
    radial-gradient(circle, rgba(0, 240, 255, 0.8) 0 1.2px, transparent 1.8px) 26px 24px / 76px 70px,
    radial-gradient(circle, rgba(251, 191, 36, 0.75) 0 1px, transparent 1.5px) 16px 32px / 92px 84px,
    radial-gradient(circle, rgba(139, 92, 246, 0.7) 0 1.4px, transparent 2px) 44px 52px / 110px 100px;
  animation: prismStardustFloat 30s linear infinite;
}

/* Full-viewport chromatic dispersion wave */
html.theme-prism::after,
html.theme-darkmatter::after {
  content: '';
  position: fixed;
  inset: -25%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    130deg,
    transparent 0%,
    rgba(0, 240, 255, 0.12) 18%,
    rgba(16, 185, 129, 0.14) 34%,
    rgba(251, 191, 36, 0.15) 50%,
    rgba(244, 63, 94, 0.14) 66%,
    rgba(139, 92, 246, 0.15) 82%,
    transparent 100%
  );
  background-size: 240% 240%;
  filter: blur(32px);
  animation: prismDispersionSweep 16s ease-in-out infinite alternate;
}

html.theme-prism #app,
html.theme-darkmatter #app {
  position: relative;
  z-index: 3;
}

/* ==========================================================================
   PRISM CORE: DIAMOND CRYSTAL FORGED CARDS & INTERFACE SURFACES
   ========================================================================== */
html.theme-prism .card,
html.theme-prism .sc-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid transparent !important;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.05)),
    linear-gradient(135deg, #00f0ff 0%, #ec4899 25%, #f59e0b 50%, #10b981 75%, #a855f7 100%, #00f0ff 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 200% 200%;
  animation: prismGradientBorderShift 5s linear infinite;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 18px rgba(0, 240, 255, 0.4),
    0 0 35px rgba(139, 92, 246, 0.3),
    0 0 50px rgba(251, 191, 36, 0.2),
    inset 0 0 18px rgba(255, 255, 255, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.85) !important;
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.24s ease;
}

html.theme-prism .card.active,
html.theme-prism .card:hover,
html.theme-prism .card.selected,
html.theme-prism .sc-card:hover {
  animation-duration: 2.2s;
  box-shadow:
    0 0 0 1.5px #ffffff,
    0 0 25px rgba(0, 240, 255, 0.8),
    0 0 45px rgba(236, 72, 153, 0.6),
    0 0 65px rgba(251, 191, 36, 0.5),
    inset 0 0 22px rgba(255, 255, 255, 0.3),
    0 16px 40px rgba(0, 0, 0, 0.95) !important;
}

@keyframes prismGradientBorderShift {
  0%   { background-position: 0% 0%, 0% 0%; }
  50%  { background-position: 0% 0%, 100% 100%; }
  100% { background-position: 0% 0%, 200% 0%; }
}

html.theme-darkmatter .card,
html.theme-darkmatter .sc-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1.5px solid rgba(0, 240, 255, 0.65) !important;
  background:
    linear-gradient(135deg,
      #030914 0%,
      #08172c 25%,
      #0b2240 50%,
      #061528 75%,
      #020610 100%
    ) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 18px rgba(0, 240, 255, 0.35),
    0 0 35px rgba(139, 92, 246, 0.25),
    0 0 50px rgba(251, 191, 36, 0.15),
    inset 0 0 20px rgba(0, 240, 255, 0.15),
    0 12px 32px rgba(0, 0, 0, 0.85) !important;
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.24s ease, border-color 0.24s ease;
}

/* Multi-faceted diamond refraction crystal facets - allows native blue, green, red, gold & chip colors to shine through */
html.theme-prism .card::before,
html.theme-prism .sc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 30%),
    linear-gradient(315deg, rgba(0, 240, 255, 0.35) 0%, transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.35), transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.35), transparent 48%),
    linear-gradient(45deg, rgba(255, 0, 128, 0.2), rgba(0, 240, 255, 0.2), rgba(255, 215, 0, 0.2));
  background-size: 100% 100%;
  mix-blend-mode: overlay;
  opacity: 0.92;
}

html.theme-darkmatter .card::before,
html.theme-darkmatter .sc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, transparent 26%),
    linear-gradient(315deg, rgba(0, 240, 255, 0.24) 0%, transparent 32%),
    radial-gradient(circle at 80% 20%, rgba(251, 191, 36, 0.2), transparent 42%),
    radial-gradient(circle at 20% 80%, rgba(244, 63, 94, 0.2), transparent 45%);
  background-size: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0.95;
}

/* Dynamic High-End Glass Glare & Specular Sheen Beam for Prism Core Cards */
html.theme-prism .card::after,
html.theme-prism .sc-card::after {
  content: '';
  position: absolute;
  inset: -100%;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    125deg,
    transparent 38%,
    rgba(255, 255, 255, 0.08) 44%,
    rgba(255, 255, 255, 0.85) 48%,
    rgba(0, 240, 255, 0.95) 50%,
    rgba(255, 215, 0, 0.8) 52%,
    rgba(255, 255, 255, 0.12) 56%,
    transparent 62%
  );
  mix-blend-mode: color-dodge;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.85));
  transform: translateX(-150%) translateY(-150%) rotate(25deg);
  animation: prismGlassGlarePan 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  opacity: 0.9;
}

html.theme-prism .card:hover::after,
html.theme-prism .sc-card:hover::after {
  animation-duration: 2s;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 25px rgba(0, 240, 255, 0.9));
}

html.theme-darkmatter .card::after,
html.theme-darkmatter .sc-card::after {
  content: '';
  position: absolute;
  inset: -60%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    115deg,
    transparent 36%,
    rgba(255, 255, 255, 0.35) 47%,
    rgba(0, 240, 255, 0.6) 50%,
    rgba(251, 191, 36, 0.45) 53%,
    transparent 64%
  );
  transform: translateX(-100%) translateY(-100%) rotate(28deg);
  animation: prismDiamondSheenSweep 7s ease-in-out infinite;
  opacity: 0.85;
}

/* Hover State: Radiant diamond flare & chromatic aura */
html.theme-prism .card:hover,
html.theme-prism .sc-card:hover,
html.theme-darkmatter .card:hover,
html.theme-darkmatter .sc-card:hover {
  border-color: #38bdf8 !important;
  box-shadow:
    0 0 0 1.5px #ffffff,
    0 0 25px rgba(0, 240, 255, 0.7),
    0 0 50px rgba(139, 92, 246, 0.45),
    0 0 75px rgba(251, 191, 36, 0.35),
    inset 0 0 24px rgba(0, 240, 255, 0.3),
    0 16px 40px rgba(0, 0, 0, 0.9) !important;
}

/* Crystalline card typography */
html.theme-prism .card .card-name,
html.theme-prism .sc-card .card-name,
html.theme-darkmatter .card .card-name,
html.theme-darkmatter .sc-card .card-name {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 240, 255, 0.7);
  color: #ffffff !important;
}
html.theme-prism .card .card-stats,
html.theme-prism .sc-card .card-stats {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.theme-darkmatter .card .card-stats,
html.theme-darkmatter .sc-card .card-stats {
  background: rgba(3, 10, 22, 0.88);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.45), inset 0 0 8px rgba(0, 240, 255, 0.2);
}

/* Bux Counter - Obsidian Glass with Ice Cyan Bevel Glow */
html.theme-prism #bux-counter,
html.theme-darkmatter #bux-counter {
  border-color: #00f0ff;
  background: rgba(4, 13, 26, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 20px rgba(0, 240, 255, 0.45),
    inset 0 0 18px rgba(139, 92, 246, 0.25);
}

/* Theme Button in Options Modal */
html.theme-prism .theme-btn[data-theme="prism"],
html.theme-darkmatter .theme-btn[data-theme="prism"],
.theme-btn[data-theme="prism"],
.theme-btn[data-theme="darkmatter"] {
  border-color: #00f0ff;
  background:
    linear-gradient(135deg, #020610 0%, #08172c 30%, #00f0ff 60%, #8b5cf6 85%, #fbbf24 100%);
  background-size: 200% 200%;
  animation: prismBtnGlint 6s ease-in-out infinite alternate;
  box-shadow:
    0 0 0 1px rgba(0, 240, 255, 0.5),
    0 0 20px rgba(0, 240, 255, 0.4);
}

#theme-btn-prism.active,
#theme-btn-darkmatter.active {
  animation: prismThemeBtnActivePulse 2s ease-in-out infinite;
}

/* Locker Theme Preview Tile for Prism Core */
.theme-tile-prism,
.theme-tile-darkmatter,
.locker-tile[data-locker-item-id="prism"],
.locker-tile[data-locker-item-id="darkmatter"] {
  background:
    linear-gradient(135deg,
      #030914 0%,
      #08172c 20%,
      #0e2a4e 40%,
      #00f0ff 60%,
      #8b5cf6 78%,
      #fbbf24 92%,
      #ffffff 100%
    ) !important;
  background-size: 240% 240% !important;
  border-color: #00f0ff !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 0 22px rgba(0, 240, 255, 0.5),
    0 0 35px rgba(139, 92, 246, 0.3) !important;
  animation: prismLockerWave 6s ease-in-out infinite alternate !important;
}

html.theme-prism #collection-book-card,
html.theme-darkmatter #collection-book-card {
  background: rgba(4, 13, 26, 0.96) !important;
  border: 1px solid rgba(0, 240, 255, 0.6) !important;
  box-shadow: 0 0 45px rgba(0, 240, 255, 0.35), inset 0 0 22px rgba(139, 92, 246, 0.25) !important;
}

/* KEYFRAMES FOR PRISM CORE */
@keyframes prismDispersionSweep {
  0%   { background-position: 0% 0%; opacity: 0.65; }
  50%  { background-position: 100% 50%; opacity: 0.95; }
  100% { background-position: 50% 100%; opacity: 0.65; }
}

@keyframes prismStardustFloat {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-48px) rotate(8deg); }
}

@keyframes prismGlassGlarePan {
  0% {
    transform: translateX(-150%) translateY(-150%) rotate(25deg);
    opacity: 0;
  }
  12% {
    opacity: 0.95;
  }
  42% {
    transform: translateX(150%) translateY(150%) rotate(25deg);
    opacity: 0.95;
  }
  48% {
    opacity: 0;
  }
  100% {
    transform: translateX(150%) translateY(150%) rotate(25deg);
    opacity: 0;
  }
}

@keyframes prismDiamondSheenSweep {
  0%   { transform: translateX(-120%) translateY(-120%) rotate(28deg); opacity: 0; }
  25%  { opacity: 0.85; }
  50%  { transform: translateX(120%) translateY(120%) rotate(28deg); opacity: 0.95; }
  55%  { opacity: 0; }
  100% { transform: translateX(120%) translateY(120%) rotate(28deg); opacity: 0; }
}

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

@keyframes prismThemeBtnActivePulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 22px rgba(0, 240, 255, 0.6);
  }
  50% {
    filter: brightness(1.25);
    box-shadow: 0 0 0 2px #ffffff, 0 0 35px rgba(0, 240, 255, 0.85), 0 0 50px rgba(139, 92, 246, 0.55);
  }
}

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

@property --darkmatter-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-prism::before,
  html.theme-prism::after,
  html.theme-prism #app::before,
  html.theme-prism #app::after,
  html.theme-prism .card::before,
  html.theme-prism .sc-card::before,
  html.theme-prism #theme-btn-prism.active,
  html.theme-darkmatter::before,
  html.theme-darkmatter::after,
  html.theme-darkmatter #app::before,
  html.theme-darkmatter #app::after,
  html.theme-darkmatter .card::before,
  html.theme-darkmatter .sc-card::before,
  html.theme-darkmatter #theme-btn-darkmatter.active {
    animation: none !important;
  }
}

html.sleeve-prismatic .card {
  outline: 2px solid;
  outline-offset: 2px;
  animation: sleevePrismatic 3s linear infinite;
}
@keyframes sleevePrismatic {
  0% { outline-color:#ff5f6d; }
  20% { outline-color:#ffc371; }
  40% { outline-color:#47e08a; }
  60% { outline-color:#46a0ff; }
  80% { outline-color:#b06cff; }
  100% { outline-color:#ff5f6d; }
}
html.sleeve-void .card {
  outline: 2px solid #9b7cff;
  outline-offset: 2px;
  box-shadow: 0 0 10px rgba(155,124,255,.38);
}
html.sleeve-cyber .card {
  outline: 2px solid #06b6d4;
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.5);
}
html.sleeve-frost .card {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.6);
}
html.sleeve-phoenix .card {
  outline: 2px solid #f97316;
  outline-offset: 2px;
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.7);
}
html.sleeve-emerald .card {
  outline: 2px solid #10b981;
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}
html.sleeve-obsidian .card {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.75);
}
#theme-btn-darkmatter:not(.locked) {
  border-color: #d946ef;
  box-shadow: 0 0 16px rgba(217, 70, 239, 0.4);
}

#collection-book-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 5, 12, .86);
  backdrop-filter: blur(12px);
}
#collection-book-overlay.hidden { display: none; }
#collection-book-card {
  width: min(680px, 100%);
  box-sizing: border-box;
  padding: 30px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.06), transparent 42%),
    var(--panel);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  text-align: center;
}
.collection-book-emblem {
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(247,215,116,.16), rgba(99,231,255,.12));
  border: 1px solid rgba(247,215,116,.28);
  font-size: 30px;
  box-shadow: 0 0 28px rgba(247,215,116,.12);
}
.collection-book-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.collection-book-option {
  min-height: 150px;
  text-align: left;
}
.collection-book-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 14px;
}
html.theme-darkmatter #collection-book-card {
  border-color: rgba(217, 70, 239, 0.6);
  box-shadow:
    0 0 0 1px rgba(217, 70, 239, 0.25),
    0 0 60px rgba(168, 85, 247, 0.35),
    0 30px 100px rgba(0, 0, 0, 0.85);
  background: rgba(14, 5, 26, 0.96) !important;
}
html.theme-darkmatter #collection-book-overlay {
  background: rgba(5, 2, 10, 0.88);
}
@media (max-width: 620px) {
  .collection-book-options { grid-template-columns: 1fr; }
}

.game-feature-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 auto 6px;
  max-width: 640px;
}
.feature-strip-card small.ready { color: var(--tier2); font-weight: 700; }
.feature-strip-card {
  display: flex; align-items: center; gap: 11px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); color: var(--text);
  cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.feature-strip-card:hover {
  transform: translateY(-2px); border-color: var(--accent);
  box-shadow: 0 10px 25px rgba(0,0,0,.22);
}
.feature-strip-icon {
  width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 9px; background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: 17px;
}
.feature-strip-card b { display: block; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.04em; }
.feature-strip-card small { display: block; color: var(--muted); margin-top: 2px; font-size: 0.68rem; }

.feature-overlay {
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  padding:20px; background:rgba(3,5,10,.82); backdrop-filter:blur(10px);
}
.feature-panel {
  width:min(520px,100%); box-sizing:border-box; position:relative;
  padding:28px; border:1px solid var(--line); border-radius:18px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%),
    var(--panel);
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  animation: modalPopIn .3s cubic-bezier(.34,1.56,.64,1);
}
.feature-close {
  position:absolute; top:13px; right:13px; border:0; background:transparent;
  color: var(--muted); cursor:pointer; font-size:16px;
  transition: transform .18s ease, color .18s ease;
}
.feature-close:hover { transform: rotate(90deg) scale(1.1); color: var(--tier3); }
.feature-kicker {
  color: var(--accent); font:900 .62rem var(--font-display); letter-spacing:.16em;
}
.feature-panel h2 { margin:7px 0 6px; font:900 1.9rem var(--font-display); color: var(--text); }
.feature-panel p { color: var(--muted); margin:0 0 20px; line-height:1.5; }
.stats-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:14px;
}
.stats-grid > div {
  padding:12px 8px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:7px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.stats-grid b { display:block; font:900 1.15rem var(--font-display); color: var(--text); }
.stats-grid span { display:block; margin-top:3px; color: var(--muted); font:800 .5rem var(--font-display); }
.stats-ledger {
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  padding:11px;
  border-radius:7px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  color: var(--muted);
  font:800 .57rem var(--font-display);
}
.stats-ledger b { color: var(--tier2); }
.ledger-list, .radar-list { display:grid; gap:8px; margin-top:14px; }
.ledger-list > div {
  display:grid;
  grid-template-columns:85px 1fr;
  gap:8px;
  padding:10px 12px;
  border-radius:4px 12px 4px 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.68);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none !important;
}
.ledger-list b { font:900 .72rem var(--font-display); }
.ledger-list .gain b { color: var(--tier2); }
.ledger-list .loss b { color: var(--tier3); }
.ledger-list span { color: #ffffff; font-size:.7rem; opacity: .9; }
.ledger-list small { grid-column:2; color: var(--muted); font-size:.58rem; margin-top: 2px; }
.radar-list > div { display:grid; grid-template-columns:1fr auto; gap:5px; }
.radar-list b, .radar-list span { font-size:.6rem; }
.radar-list span { color: var(--muted); }
.radar-list i {
  grid-column:1/-1;
  height:5px;
  border-radius:5px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  overflow:hidden;
}
.radar-list i em { display:block; height:100%; background: var(--accent); }
.activity-list { display:grid; gap:8px; margin-top:16px; }
.activity-list > div {
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; border-radius:4px 12px 4px 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.68);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none !important;
}
.activity-list > div > span { color: var(--accent); font-weight: 800; }
.activity-list p { margin:0; color: #ffffff; font-size:.7rem; line-height:1.4; }
.activity-list small { display:block; margin-top:3px; color: var(--muted); font-size:.58rem; }
.activity-empty { color: var(--muted); font-size:.7rem; }

.collection-tools {
  display:flex;
  gap:8px;
  margin:12px auto 16px;
  max-width:900px;
}
.collection-tools input,
.collection-tools select {
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.09);
  border-radius:6px;
  background:#0d121a;
  color:#dce3ee;
  padding:9px 11px;
  font:600 .68rem var(--font-display);
  outline:none;
}
.collection-tools input { flex:1; min-width:0; }
.collection-tools select { width:150px; }
.collection-tools input:focus,
.collection-tools select:focus { border-color:rgba(111,156,255,.45); }
@media (max-width:600px) {
  .collection-tools { flex-direction:column; }
  .collection-tools select { width:100%; }
  .game-feature-strip { grid-template-columns: 1fr; }
}

.deck-completeness-hint {
  display:inline-block;
  margin-left:8px;
  color:#dca866;
  font:900 .55rem var(--font-display);
  letter-spacing:.06em;
}
.deck-completeness-hint.complete { color: var(--tier2); animation: deckReadyPulse 1.4s ease-in-out infinite; }
@keyframes deckReadyPulse {
  0%, 100% { text-shadow: 0 0 0 rgba(76,154,91,0); }
  50%      { text-shadow: 0 0 10px rgba(76,154,91,0.8); }
}

.card-mastery-badge {
  position:absolute;
  right:4px;
  bottom:4px;
  z-index:4;
  min-width:22px;
  padding:3px 4px;
  border-radius:4px;
  text-align:center;
  background:rgba(10,13,20,.92);
  border:1px solid rgba(234,215,121,.32);
  color:#ead779;
  font:900 .48rem var(--font-display);
  letter-spacing:.03em;
  pointer-events:none;
}

.shop-top-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 2px 14px;
}
.shop-exit-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #f4f6fb;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  text-decoration: none;
  cursor: pointer;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.shop-exit-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateX(-3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.shop-exit-btn:active {
  transform: translateX(-1px) scale(0.97);
}
.shop-esc-hint {
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 2px 6px;
  pointer-events: none;
  line-height: 1;
}
@media (max-width: 768px) {
  .shop-esc-hint {
    display: none !important;
  }
}

/* ============================================================
   FORTNITE ITEM SHOP STYLING
   Clean, Bold, High-Contrast Vertical Poster Tiles
   ============================================================ */
.shop-top-nav {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 12px;
}
.shop-exit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  font-family: var(--font-display, sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 8px 16px;
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
  cursor: pointer;
}
.shop-exit-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(30, 41, 59, 0.9);
  transform: translateX(-3px);
}

.fn-shop {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-bottom: 50px;
}

/* Header Bar */
.fn-shop-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 16px;
  flex-wrap: wrap;
}
.fn-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fn-shop-title {
  margin: 0;
  font-family: var(--font-display, sans-serif);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.fn-countdown-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display, sans-serif);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.6);
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: fit-content;
}
.fn-timer-icon { font-size: 0.85rem; }
.fn-countdown-pill strong { color: #38bdf8; font-variant-numeric: tabular-nums; }

.fn-wallet-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  border: 2px solid #f59e0b;
  padding: 8px 18px;
  border-radius: 9999px;
  font-family: var(--font-display, sans-serif);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
}
.fn-wallet-coin {
  color: #fbbf24;
  font-size: 1.15rem;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
}
.fn-wallet-amount {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fef08a;
}
.fn-wallet-unit {
  font-size: 0.65rem;
  font-weight: 800;
  color: #f59e0b;
  letter-spacing: 0.1em;
}

/* Sections & Grids */
.fn-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fn-section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 4px solid #38bdf8;
  padding-left: 12px;
}
.fn-section-title {
  margin: 0;
  font-family: var(--font-display, sans-serif);
  font-size: 1.25rem;
  font-weight: 900;
  color: #f8fafc;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fn-section-badge {
  font-family: var(--font-display, sans-serif);
  font-size: 0.7rem;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 3px 10px;
  border-radius: 9999px;
}

.fn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.fn-grid-packs {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Fortnite Poster Cards with High-Energy Rarity Styling */
.fn-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.fn-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 4px, transparent 4px 20px);
  pointer-events: none;
  z-index: 1;
}
.fn-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0) 80%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
  z-index: 3;
}
.fn-tile:hover {
  transform: translateY(-6px) scale(1.03);
  z-index: 2;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
  border-color: #ffffff;
}
.fn-tile:hover::after {
  transform: translateX(100%);
}
.fn-tile.is-owned {
  opacity: 0.88;
}

/* Rarity Color Themes & Radial Energy Core */
.fn-mythic {
  background: radial-gradient(circle at 50% 35%, #fbbf24 0%, #d97706 45%, #451a03 100%);
  border-color: #f59e0b;
}
.fn-mythic:hover {
  border-color: #fef08a;
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.7);
}

.fn-legendary {
  background: radial-gradient(circle at 50% 35%, #ff6b00 0%, #c2410c 45%, #431407 100%);
  border-color: #f97316;
}
.fn-legendary:hover {
  border-color: #ffedd5;
  box-shadow: 0 0 30px rgba(249, 115, 22, 0.7);
}

.fn-epic {
  background: radial-gradient(circle at 50% 35%, #c084fc 0%, #7e22ce 45%, #2e0754 100%);
  border-color: #a855f7;
}
.fn-epic:hover {
  border-color: #f3e8ff;
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.7);
}

.fn-rare {
  background: radial-gradient(circle at 50% 35%, #38bdf8 0%, #0284c7 45%, #072a40 100%);
  border-color: #0ea5e9;
}
.fn-rare:hover {
  border-color: #e0f2fe;
  box-shadow: 0 0 30px rgba(14, 165, 233, 0.7);
}

.fn-uncommon {
  background: radial-gradient(circle at 50% 35%, #4ade80 0%, #15803d 45%, #032410 100%);
  border-color: #22c55e;
}
.fn-uncommon:hover {
  border-color: #dcfce7;
  box-shadow: 0 0 30px rgba(34, 197, 94, 0.7);
}

/* Card Header Elements */
.fn-tile-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  pointer-events: none;
}
.fn-tag {
  font-family: var(--font-display, sans-serif);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.fn-tag-sale {
  background: #ef4444;
  border-color: #fca5a5;
  color: #ffffff;
  font-weight: 900;
}
.fn-power-tag {
  font-family: var(--font-display, sans-serif);
  font-size: 0.62rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #fef08a;
  border: 1px solid rgba(254, 240, 138, 0.4);
  backdrop-filter: blur(6px);
}

/* Center Art Focus */
.fn-tile-art {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  padding: 10px;
}
.fn-tile-icon {
  font-size: 4rem;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.75));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.fn-tile:hover .fn-tile-icon {
  transform: scale(1.18) rotate(2deg);
}

/* Sleek Integrated Footer (No Clunky Black Box) */
.fn-tile-footer {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 30%, rgba(0, 0, 0, 0.92) 100%);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.fn-tile-name {
  font-family: var(--font-display, sans-serif);
  font-size: 0.95rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}
.fn-tile-sub {
  font-family: var(--font-display, sans-serif);
  font-size: 0.62rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.fn-tile-price-row {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fn-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-display, sans-serif);
}
.fn-coin {
  color: #fbbf24;
  font-size: 0.85rem;
}
.fn-cost {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 900;
}
.fn-del {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.7rem;
  text-decoration: line-through;
  margin-left: 2px;
}

.fn-pill {
  font-family: var(--font-display, sans-serif);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}
.fn-pill-owned {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
  border: 1px solid #10b981;
}
.fn-pill-equipped {
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  border: 1px solid #0284c7;
}

/* Code Redemption */
.fn-code-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fn-code-input-row {
  display: flex;
  gap: 10px;
}
.fn-code-input {
  flex: 1;
  background: #020617;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 14px;
  color: #ffffff;
  font-family: var(--font-display, sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  outline: none;
}
.fn-code-input:focus {
  border-color: #38bdf8;
}
.fn-code-btn {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-family: var(--font-display, sans-serif);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  padding: 0 20px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.fn-code-btn:hover {
  filter: brightness(1.15);
}
.fn-quick-codes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fn-quick-label {
  font-family: var(--font-display, sans-serif);
  font-size: 0.65rem;
  font-weight: 800;
  color: #64748b;
}
.fn-quick-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 4px 10px;
  color: #cbd5e1;
  font-family: var(--font-display, sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.fn-quick-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #ffffff;
}

@media (max-width: 640px) {
  .fn-grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 10px;
  }
  .fn-shop-title {
    font-size: 1.6rem;
  }
}

/* ============================================================
   VICTORY ANIMATIONS (cosmetic category) — Meteor Shower
   A full-screen, shared celebration that plays for BOTH players the
   instant a match ends, before the "You Win"/"You Lose" card appears,
   if the winner owns this cosmetic. Deliberately rendered as a plain
   fixed overlay appended to <body> (like the other dynamic feature
   overlays) rather than tucked inside #screen-game, so it's never
   affected by the screen-transition animation.
   ============================================================ */
.meteor-shower-overlay {
  position: fixed; inset: 0; z-index: 9997; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse at 50% 25%, rgba(255,140,40,0.14), transparent 65%);
  animation: meteorBgFlash 1.5s ease forwards;
}
@keyframes meteorBgFlash {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  75%  { opacity: 0.8; }
  100% { opacity: 0; }
}
.meteor-streak {
  position: absolute; top: -12%; width: 3px; height: 130px;
  background: linear-gradient(to bottom, #ffffff, #ffcf8a 35%, rgba(255,140,40,0.5) 70%, transparent);
  border-radius: 3px;
  filter: drop-shadow(0 0 8px rgba(255,170,60,0.85));
  transform-origin: top center;
  animation: meteorFall ease-in forwards;
}
.meteor-streak::before {
  content: ''; position: absolute; top: 0; left: -3px; width: 9px; height: 9px;
  border-radius: 50%; background: #fff8e0; box-shadow: 0 0 12px 3px rgba(255,214,140,0.9);
}
@keyframes meteorFall {
  0%   { transform: translate(0, -20vh) rotate(35deg) scale(var(--meteor-scale, 1)); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translate(55vw, 120vh) rotate(35deg) scale(var(--meteor-scale, 1)); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .meteor-shower-overlay, .meteor-streak { animation: none !important; display: none; }
}

/* ============================================================
   FORTNITE LOCKER UI (Collection Book Redesign)
   ============================================================ */
.locker-screen {
  position: relative;
  padding: 24px 20px 40px;
  background: var(--panel);
  background-image:
    radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.05), transparent 45%),
    radial-gradient(circle at 10% 80%, rgba(255, 255, 255, 0.03), transparent 40%),
    linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  min-height: 80vh;
  box-sizing: border-box;
  color: var(--text);
}

.locker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.locker-title-wrap {
  display: flex;
  align-items: center;
}

.locker-title-box {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #0b0f19;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 22px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transform: skewX(-8deg);
}

/* Primary Top Tabs: CARDS, VICTORY EFFECTS, THEMES, SLEEVES */
.locker-main-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
  flex-shrink: 0;
}

.locker-main-tab-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.84rem;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 0 !important; /* Strictly rectangular */
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none;
}

.locker-main-tab-btn .tab-icon-svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  flex-shrink: 0;
}

.locker-main-tab-btn:hover {
  color: #ffffff;
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2), inset 0 0 5px rgba(56, 189, 248, 0.1);
}
.locker-main-tab-btn:active {
  background: rgba(56, 189, 248, 0.24) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.6) !important;
  transform: scale(0.97);
}
.locker-main-tab-btn.active {
  color: #ffffff !important;
  background: rgba(56, 189, 248, 0.2) !important;
  border: 1px solid #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45), inset 0 0 8px rgba(56, 189, 248, 0.25) !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.locker-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.locker-tab-btn,
.locker-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--glass-specular), 0 3px 10px rgba(0, 0, 0, 0.25);
}

.locker-tab-btn:hover,
.locker-back-btn:hover {
  background: var(--glass-bg-hover);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--glass-specular), 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Category Navigation Tabs */
.locker-category-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.locker-cat-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.locker-cat-btn .tab-icon-svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
}

.locker-cat-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.locker-cat-btn.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 100%), var(--accent);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Tools Bar */
.locker-tools-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.locker-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
}

.locker-search-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
}

.locker-filter-box select {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 9px 14px;
  outline: none;
  cursor: pointer;
}

.locker-stats-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--accent);
}

.locker-stats-badge span {
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

.locker-stats-badge strong {
  font-weight: 900;
  font-size: 0.82rem;
}

/* Main Content Split Layout */
.locker-content-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 22px;
  align-items: start;
}

@media (max-width: 900px) {
  .locker-content-layout {
    grid-template-columns: 1fr;
  }
}

.locker-grid-scroll {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@keyframes lockerCategoryFadeIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.locker-category-group {
  animation: lockerCategoryFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.locker-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

.rarity-tag {
  font-size: 0.6rem;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  transform: skewX(-8deg);
}

.rarity-tag.rare { background: #2d88ff; color: #ffffff; }
.rarity-tag.uncommon { background: #3ee075; color: #0a2412; }
.rarity-tag.epic { background: #e03eb3; color: #ffffff; }
.rarity-tag.legendary { background: #ffaa00; color: #2e1800; }
.rarity-tag.exotic { background: #06b6d4; color: #04242b; }
.rarity-tag.mythic { background: #a855f7; color: #ffffff; }

/* Grid of Fortnite Tiles */
.locker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 12px;
}

/* Individual Fortnite Locker Tile */
.locker-tile {
  position: relative;
  aspect-ratio: 1 / 1.18;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: #0d1322;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px;
  box-sizing: border-box;
  text-align: left;
  outline: none;
  
  /* AAA Hardware Accelerated Smoothness */
  will-change: transform, box-shadow, border-color;
  transform: scale(1) translateZ(0);
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.25, 1), 
              border-color 0.16s ease, 
              box-shadow 0.16s ease, 
              filter 0.16s ease;
}

.locker-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

/* Subtle lift & scale animation for cards in grid */
.locker-tile:hover,
.locker-tile:focus-visible {
  transform: scale(1.08) translateY(-6px) translateZ(0);
  z-index: 10;
  border-color: #ffffff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.65), 0 0 16px rgba(255, 255, 255, 0.25);
}

.locker-tile:hover::before,
.locker-tile:focus-visible::before {
  opacity: 1;
}

/* Tactile Active (Click Down) State */
.locker-tile:active {
  transform: scale(0.97) translateY(-1px) translateZ(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition-duration: 0.05s;
}

.locker-tile.selected {
  border-color: #facc15 !important;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.5), 0 12px 32px rgba(250, 204, 21, 0.35) !important;
  transform: scale(1.06) translateY(-2px) translateZ(0);
  z-index: 11;
}

/* Tier & Custom Rarity Visual Cues for Tiles */
.locker-tile.rare,
.locker-tile.tier1 {
  background: linear-gradient(150deg, #1b4382 0%, #0d2142 100%);
  border: 2px solid #2d88ff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(45, 136, 255, 0.25);
}
.locker-tile.rare:hover,
.locker-tile.tier1:hover,
.locker-tile.rare:focus-visible,
.locker-tile.tier1:focus-visible {
  border-color: #60a5fa;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.65), 0 0 20px rgba(45, 136, 255, 0.7), inset 0 0 12px rgba(45, 136, 255, 0.4);
}

.locker-tile.uncommon,
.locker-tile.tier2 {
  background: linear-gradient(150deg, #184e2a 0%, #0d2916 100%);
  border: 2px solid #3ee075;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(62, 224, 117, 0.25);
}
.locker-tile.uncommon:hover,
.locker-tile.tier2:hover,
.locker-tile.uncommon:focus-visible,
.locker-tile.tier2:focus-visible {
  border-color: #4ade80;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.65), 0 0 20px rgba(62, 224, 117, 0.7), inset 0 0 12px rgba(62, 224, 117, 0.4);
}

.locker-tile.epic,
.locker-tile.tier3 {
  background: linear-gradient(150deg, #571b3e 0%, #2e0c20 100%);
  border: 2px solid #e03eb3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(224, 62, 179, 0.25);
}
.locker-tile.epic:hover,
.locker-tile.tier3:hover,
.locker-tile.epic:focus-visible,
.locker-tile.tier3:focus-visible {
  border-color: #f472b6;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.65), 0 0 22px rgba(224, 62, 179, 0.75), inset 0 0 12px rgba(224, 62, 179, 0.4);
}

.locker-tile.legendary,
.locker-tile.tier4 {
  background: linear-gradient(150deg, #6b380d 0%, #381c04 100%);
  border: 2px solid #ffaa00;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(255, 170, 0, 0.3);
}
.locker-tile.legendary:hover,
.locker-tile.tier4:hover,
.locker-tile.legendary:focus-visible,
.locker-tile.tier4:focus-visible {
  border-color: #fbbf24;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.65), 0 0 24px rgba(255, 170, 0, 0.8), inset 0 0 14px rgba(255, 170, 0, 0.45);
}

.locker-tile.exotic {
  background: linear-gradient(150deg, #134e54 0%, #08262a 100%);
  border: 2px solid #06b6d4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(6, 182, 212, 0.3);
}
.locker-tile.exotic:hover,
.locker-tile.exotic:focus-visible {
  border-color: #22d3ee;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.65), 0 0 24px rgba(6, 182, 212, 0.85), inset 0 0 14px rgba(6, 182, 212, 0.45);
}

.locker-tile.mythic {
  background: linear-gradient(150deg, #441852 0%, #210829 100%);
  border: 2px solid #a855f7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(168, 85, 247, 0.35);
}
.locker-tile.mythic:hover,
.locker-tile.mythic:focus-visible {
  border-color: #c084fc;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.65), 0 0 26px rgba(168, 85, 247, 0.9), inset 0 0 16px rgba(168, 85, 247, 0.5);
}

.locker-tile.locked {
  filter: grayscale(0.85);
  opacity: 0.6;
}

.tile-rarity-tag {
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.48rem;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  pointer-events: none;
}

.tile-rarity-tag.rare { color: #60a5fa; }
.tile-rarity-tag.uncommon { color: #4ade80; }
.tile-rarity-tag.epic { color: #f472b6; }
.tile-rarity-tag.legendary { color: #fbbf24; }
.tile-rarity-tag.exotic { color: #22d3ee; }
.tile-rarity-tag.mythic { color: #c084fc; }

.tile-fav-star {
  position: absolute;
  top: 4px;
  right: 5px;
  color: #facc15;
  font-size: 0.75rem;
  text-shadow: 0 0 6px rgba(250, 204, 21, 0.8);
}

.tile-equipped-badge {
  position: absolute;
  top: 4px;
  right: 5px;
  background: #22c55e;
  color: #052e16;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.48rem;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.6);
  text-transform: uppercase;
  transform: skewX(-6deg);
  pointer-events: none;
  z-index: 5;
}

/* Theme Tile Mini UI Mockup preview */
.tile-mini-mockup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 80%;
  padding: 4px 6px;
  border-radius: 6px;
  margin-top: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.tile-mini-hp {
  height: 4px;
  width: 100%;
  border-radius: 2px;
  opacity: 0.9;
}

.tile-mini-btns {
  display: flex;
  gap: 4px;
  width: 100%;
}

.tile-mini-btn {
  flex: 1;
  height: 6px;
  border-radius: 3px;
}

.tile-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  text-align: center;
}

.tile-glyph {
  font-size: 1.8rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.tile-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.68rem;
  line-height: 1.15;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hover Tooltip for Key Stats */
.tile-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px) scale(0.95);
  background: rgba(11, 15, 25, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  padding: 5px 9px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s cubic-bezier(0.2, 0.8, 0.25, 1), 
              transform 0.18s cubic-bezier(0.2, 0.8, 0.25, 1), 
              visibility 0.18s;
  z-index: 50;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7), 0 0 12px rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 900;
  color: #ffffff;
}

/* Tooltip arrow indicator */
.tile-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: rgba(11, 15, 25, 0.94) transparent transparent transparent;
}

.locker-tile:hover .tile-tooltip,
.locker-tile:focus-visible .tile-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

.tile-tooltip-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  letter-spacing: 0.02em;
}

.tile-tooltip-stat.hp { color: #f87171; text-shadow: 0 0 6px rgba(248, 113, 113, 0.4); }
.tile-tooltip-stat.dmg { color: #fbbf24; text-shadow: 0 0 6px rgba(251, 191, 36, 0.4); }
.tile-tooltip-stat.sp { color: #60a5fa; text-shadow: 0 0 6px rgba(96, 165, 250, 0.4); }
.tile-tooltip-stat.effect { color: #38bdf8; text-shadow: 0 0 6px rgba(56, 189, 248, 0.4); }

.tile-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 13, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #facc15;
}

/* Showcase Panel (Right Column) */
.locker-showcase-panel {
  position: sticky;
  top: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.showcase-bg-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  height: 260px;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

.showcase-bg-glow.glow-rare { background: #2d88ff; }
.showcase-bg-glow.glow-uncommon { background: #3ee075; }
.showcase-bg-glow.glow-epic { background: #e03eb3; }
.showcase-bg-glow.glow-legendary { background: #ffaa00; }
.showcase-bg-glow.glow-exotic { background: #06b6d4; }
.showcase-bg-glow.glow-mythic { background: #a855f7; }

.showcase-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.showcase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.showcase-rarity-pill {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: 4px;
  color: #ffffff;
  transform: skewX(-10deg);
}

.showcase-rarity-pill.rare { background: #2d88ff; }
.showcase-rarity-pill.uncommon { background: #3ee075; color: #071f0f; }
.showcase-rarity-pill.epic { background: #e03eb3; }
.showcase-rarity-pill.legendary { background: #ffaa00; color: #2b1400; }
.showcase-rarity-pill.exotic { background: #06b6d4; color: #021a21; }
.showcase-rarity-pill.mythic { background: #a855f7; }

.showcase-category {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

.showcase-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transform: skewX(-4deg);
}

.showcase-card-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
  perspective: 1200px;
}

.showcase-card-wrapper {
  width: 100%;
  max-width: 200px;
  perspective: 1200px;
}

.flip-card-3d {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.35;
  transform-style: preserve-3d;
  will-change: transform;
}

.flip-card-3d.is-flipping {
  animation: card3DFlip 0.55s cubic-bezier(0.36, 0, 0.66, -0.56);
  animation-fill-mode: forwards;
}

@keyframes card3DFlip {
  0% {
    transform: rotateY(0deg) scale(1);
  }
  50% {
    transform: rotateY(180deg) scale(1.12);
  }
  100% {
    transform: rotateY(360deg) scale(1);
  }
}

.flip-card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
}

.flip-card-front {
  transform: rotateY(0deg);
  z-index: 2;
}

.flip-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--bg2) 0%, var(--panel) 100%);
  border: 2px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), inset 0 0 16px rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}

.card-back-inner {
  width: 100%;
  height: 100%;
  border: 1px dashed var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
}

.card-back-emblem {
  font-size: 2.4rem;
  filter: drop-shadow(0 0 10px var(--accent));
}

.card-back-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
}

/* Stats reveal glow animation */
.sc-reveal-anim {
  animation: statsGlowReveal 0.4s cubic-bezier(0.2, 0.8, 0.25, 1);
}

@keyframes statsGlowReveal {
  0% {
    opacity: 0.2;
    transform: translateY(10px) scale(0.97);
    filter: brightness(1.5);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

.showcase-card-hero {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: #090f1d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  will-change: transform;
  transform: translate3d(0, 0, 0) skewX(-3deg);
  animation: showcaseFloat 4s ease-in-out infinite;
}

@keyframes showcaseFloat {
  0%, 100% { transform: translate3d(0, 0, 0) skewX(-3deg); }
  50%      { transform: translate3d(0, -6px, 0) skewX(-3deg); }
}

.showcase-card-hero.rare,
.showcase-card-hero.tier1 { background: linear-gradient(150deg, #1b4382 0%, #0d2142 100%); border-color: #2d88ff; }
.showcase-card-hero.uncommon,
.showcase-card-hero.tier2 { background: linear-gradient(150deg, #184e2a 0%, #0d2916 100%); border-color: #3ee075; }
.showcase-card-hero.epic,
.showcase-card-hero.tier3 { background: linear-gradient(150deg, #571b3e 0%, #2e0c20 100%); border-color: #e03eb3; }
.showcase-card-hero.legendary,
.showcase-card-hero.tier4 { background: linear-gradient(150deg, #6b380d 0%, #381c04 100%); border-color: #ffaa00; }
.showcase-card-hero.exotic,
.showcase-card-hero.spell { background: linear-gradient(150deg, #134e54 0%, #08262a 100%); border-color: #06b6d4; }
.showcase-card-hero.mythic,
.showcase-card-hero.chip  { background: linear-gradient(150deg, #441852 0%, #210829 100%); border-color: #a855f7; }

.sc-hero-glyph { font-size: 3.2rem; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)); }
.sc-hero-name { font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; color: #ffffff; text-transform: uppercase; }

.sc-hero-stats {
  display: flex;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  color: #ffe9a8;
}

.sc-hero-fav {
  position: absolute;
  top: 8px;
  right: 10px;
  color: #facc15;
  font-size: 1.1rem;
}

.sc-hero-lock {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 13, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.9rem;
  color: #facc15;
  border-radius: 10px;
}

.showcase-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.sc-stat-box {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 4px;
  text-align: center;
}

.sc-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.sc-stat-box strong {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--text);
}

.showcase-desc {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.showcase-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.locker-action-btn {
  border: none;
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  transform: skewX(-8deg);
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.locker-action-btn.primary {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
  color: #0b0f19;
  box-shadow: 0 6px 20px rgba(250, 204, 21, 0.35);
}

.locker-action-btn.primary:hover {
  filter: brightness(1.1);
  transform: skewX(-8deg) translateY(-2px);
  box-shadow: 0 8px 24px rgba(250, 204, 21, 0.45);
}

.locker-action-btn.secondary {
  background: linear-gradient(135deg, #2d88ff 0%, #1754bf 100%);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(45, 136, 255, 0.35);
}

.locker-action-btn.secondary:hover {
  filter: brightness(1.1);
  transform: skewX(-8deg) translateY(-2px);
  box-shadow: 0 8px 24px rgba(45, 136, 255, 0.45);
}

.locker-action-btn.equipped {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
  cursor: default;
}

.locker-action-btn.equipped:hover {
  filter: brightness(1.05);
  transform: skewX(-8deg);
}

.locker-action-btn.unequip {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
}

/* ============================================================
   LIVE COSMETIC SHOWCASE PREVIEW COMPONENTS
   ============================================================ */

/* Theme Background Container Default Hiding */
body > [id^="theme-"][id$="-bg"] {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.showcase-theme-bg-layer [id^="theme-"][id$="-bg"] {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 1 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Cyber Neon Grid & Horizon */
html.theme-cyberneon #theme-cyberneon-bg {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.showcase-theme-bg-layer #theme-cyberneon-bg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.cyber-perspective-grid {
  position: absolute;
  inset: -60% -50% 0 -50%;
  background-image: 
    linear-gradient(0deg, rgba(244, 63, 94, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.4) 1px, transparent 1px);
  background-size: 36px 36px;
  transform: perspective(250px) rotateX(60deg);
  animation: cyberGridMove 3.5s linear infinite;
  transform-origin: 50% 100%;
}

@keyframes cyberGridMove {
  0% { background-position: 0 0; }
  100% { background-position: 0 36px; }
}

.cyber-horizon-glow {
  position: absolute;
  left: 0; right: 0;
  top: 35%; height: 3px;
  background: #f43f5e;
  box-shadow: 0 0 20px #f43f5e, 0 0 40px #38bdf8;
}

/* Verdant Leaf & Spore Animation */
html.theme-verdant #theme-verdant-bg {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.showcase-theme-bg-layer #theme-verdant-bg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.verdant-canopy-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(34, 197, 94, 0.25), transparent 70%);
}

.verdant-leaf-shape {
  position: absolute;
  width: 14px; height: 18px;
  background: linear-gradient(135deg, #4ade80, #15803d);
  border-radius: 0 80% 0 80%;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  animation: leafFloat 8s ease-in-out infinite;
}

.verdant-leaf-shape.vl1 { left: 15%; top: 80%; animation-delay: 0s; }
.verdant-leaf-shape.vl2 { left: 55%; top: 90%; animation-delay: 2.5s; width: 18px; height: 22px; }
.verdant-leaf-shape.vl3 { left: 82%; top: 75%; animation-delay: 5s; }

@keyframes leafFloat {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { transform: translateY(-160px) rotate(360deg); opacity: 0; }
}

/* ---------- UNIVERSAL THEME BACKGROUND SYSTEM ---------- */
#theme-bg-container > [id$="-bg"] {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

html[class*="theme-"]:not(.theme-dark) #theme-bg-container,
body[class*="theme-"]:not(.theme-dark) #theme-bg-container {
  background: transparent !important;
}

html[class*="theme-"]:not(.theme-dark) #theme-bg-container::before,
html[class*="theme-"]:not(.theme-dark) #theme-bg-container::after,
body[class*="theme-"]:not(.theme-dark) #theme-bg-container::before,
body[class*="theme-"]:not(.theme-dark) #theme-bg-container::after {
  display: none !important;
  opacity: 0 !important;
}

/* ---------- PRISM CORE BACKGROUND SYSTEM ---------- */
html.theme-prism #theme-prism-bg,
html.theme-prism #theme-darkmatter-bg,
html.theme-darkmatter #theme-prism-bg,
html.theme-darkmatter #theme-darkmatter-bg {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.prism-chromatic-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 70vmax; height: 70vmax;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid transparent;
  background: conic-gradient(
    from 0deg,
    rgba(255, 0, 128, 0.22),
    rgba(0, 240, 255, 0.28),
    rgba(255, 215, 0, 0.25),
    rgba(139, 92, 246, 0.28),
    rgba(16, 185, 129, 0.22),
    rgba(255, 0, 128, 0.22)
  );
  filter: blur(28px);
  animation: prismChromaticRotate 20s linear infinite;
  opacity: 0.85;
}

@keyframes prismSparkleFloat {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(0deg); }
  25%  { opacity: 1; transform: translate(-50%, -18px) scale(1.1) rotate(45deg); }
  100% { opacity: 0; transform: translate(-50%, -45px) scale(0.2) rotate(180deg); }
}

/* 3D Wireframe Octahedron Crystal */
.prism-crystal-octahedron {
  position: absolute;
  top: 48%; left: 50%;
  width: 220px; height: 220px;
  margin-left: -110px; margin-top: -110px;
  perspective: 1000px;
  transform-style: preserve-3d;
  animation: prismOctaRotate 18s linear infinite;
  pointer-events: none;
  opacity: 0.85;
}

.prism-crystal-octahedron .octa-face {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(0, 240, 255, 0.6);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(139, 92, 246, 0.2), rgba(251, 191, 36, 0.15));
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
  backdrop-filter: blur(4px);
}
.prism-crystal-octahedron .octa-face.f1 { transform: rotateY(0deg) rotateX(30deg) translateZ(40px); }
.prism-crystal-octahedron .octa-face.f2 { transform: rotateY(90deg) rotateX(30deg) translateZ(40px); }
.prism-crystal-octahedron .octa-face.f3 { transform: rotateY(180deg) rotateX(30deg) translateZ(40px); }
.prism-crystal-octahedron .octa-face.f4 { transform: rotateY(270deg) rotateX(30deg) translateZ(40px); }

@keyframes prismOctaRotate {
  0%   { transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg); }
  50%  { transform: rotateX(45deg) rotateY(180deg) rotateZ(180deg); }
  100% { transform: rotateX(15deg) rotateY(360deg) rotateZ(360deg); }
}

/* Vertical Laser Spectrum Energy Pillars */
.prism-laser-pillar {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 240, 255, 0.8) 25%, rgba(244, 63, 94, 0.8) 50%, rgba(251, 191, 36, 0.8) 75%, transparent 100%);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.9), 0 0 30px rgba(236, 72, 153, 0.7);
  animation: prismPillarPulse 4s ease-in-out infinite alternate;
}
.prism-laser-pillar.p1 { left: 18%; animation-delay: 0s; }
.prism-laser-pillar.p2 { right: 18%; animation-delay: 2s; }

@keyframes prismPillarPulse {
  0%   { opacity: 0.3; transform: scaleX(0.8); }
  50%  { opacity: 0.95; transform: scaleX(2.2); }
  100% { opacity: 0.3; transform: scaleX(0.8); }
}

/* Slowly Drifting Cosmic Dust Particle Effect */
.prism-cosmic-dust {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.9), 0 0 12px rgba(236, 72, 153, 0.7);
  pointer-events: none;
  animation: prismCosmicDustFloat 16s ease-in-out infinite alternate;
  opacity: 0.65;
}

.prism-cosmic-dust.cd1  { top: 12%; left: 15%; animation-delay: 0s;  width: 2px; height: 2px; }
.prism-cosmic-dust.cd2  { top: 28%; left: 82%; animation-delay: 2s;  width: 4px; height: 4px; background: #38bdf8; }
.prism-cosmic-dust.cd3  { top: 45%; left: 24%; animation-delay: 4s;  width: 3px; height: 3px; background: #fbbf24; }
.prism-cosmic-dust.cd4  { top: 62%; left: 75%; animation-delay: 1s;  width: 2px; height: 2px; background: #ec4899; }
.prism-cosmic-dust.cd5  { top: 80%; left: 35%; animation-delay: 5s;  width: 4px; height: 4px; background: #34d399; }
.prism-cosmic-dust.cd6  { top: 18%; left: 60%; animation-delay: 3s;  width: 3px; height: 3px; background: #a855f7; }
.prism-cosmic-dust.cd7  { top: 38%; left: 42%; animation-delay: 7s;  width: 2px; height: 2px; }
.prism-cosmic-dust.cd8  { top: 70%; left: 88%; animation-delay: 6s;  width: 3px; height: 3px; background: #38bdf8; }
.prism-cosmic-dust.cd9  { top: 85%; left: 12%; animation-delay: 8s;  width: 4px; height: 4px; background: #fbbf24; }
.prism-cosmic-dust.cd10 { top: 52%; left: 92%; animation-delay: 2.5s; width: 2px; height: 2px; background: #f43f5e; }
.prism-cosmic-dust.cd11 { top: 22%; left: 32%; animation-delay: 4.5s; width: 3px; height: 3px; background: #10b981; }
.prism-cosmic-dust.cd12 { top: 68%; left: 55%; animation-delay: 6.5s; width: 2px; height: 2px; background: #a855f7; }

@keyframes prismCosmicDustFloat {
  0% {
    transform: translateY(0px) translateX(0px) scale(0.8);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-40px) translateX(25px) scale(1.3);
    opacity: 0.85;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
  }
  100% {
    transform: translateY(-80px) translateX(-20px) scale(0.7);
    opacity: 0.3;
  }
}

/* Spectrum Chromatic UI Elements */
html.theme-prism .screen-title,
html.theme-prism .mode-card-title,
html.theme-prism .section-title {
  background: linear-gradient(90deg, #ffffff 0%, #38bdf8 25%, #f43f5e 50%, #f59e0b 75%, #10b981 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: prismSpectrumShift 6s linear infinite;
}

@keyframes prismSpectrumShift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.prism-core-pulse {
  position: absolute;
  top: 45%; left: 50%;
  width: 480px; height: 480px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.42) 0%, rgba(0, 240, 255, 0.28) 35%, rgba(139, 92, 246, 0.18) 65%, transparent 80%);
  filter: blur(22px);
  animation: prismCoreHeartbeat 4.5s ease-in-out infinite alternate;
}

@keyframes prismCoreHeartbeat {
  0%   { transform: translate(-50%, -50%) scale(0.82); opacity: 0.6; }
  50%  { transform: translate(-50%, -50%) scale(1.15); opacity: 0.95; }
  100% { transform: translate(-50%, -50%) scale(0.82); opacity: 0.6; }
}

.prism-light-beam {
  position: absolute;
  top: -30%; left: -20%;
  width: 140vw; height: 160px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 240, 255, 0.35) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(251, 191, 36, 0.35) 70%, transparent 100%);
  filter: blur(14px);
  transform: rotate(-28deg);
  animation: prismBeamSweep 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.prism-light-beam.b2 {
  top: auto; bottom: -30%; left: -20%;
  transform: rotate(28deg);
  animation-delay: 6s;
  background: linear-gradient(90deg, transparent 0%, rgba(236, 72, 153, 0.35) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(139, 92, 246, 0.35) 70%, transparent 100%);
}

@keyframes prismBeamSweep {
  0%   { opacity: 0; transform: translateY(-80px) rotate(-28deg) scaleY(0.6); }
  20%  { opacity: 0.75; }
  50%  { opacity: 0.9; transform: translateY(40px) rotate(-28deg) scaleY(1.2); }
  80%  { opacity: 0.75; }
  100% { opacity: 0; transform: translateY(160px) rotate(-28deg) scaleY(0.6); }
}

.showcase-theme-bg-layer #theme-prism-bg,
.showcase-theme-bg-layer #theme-darkmatter-bg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.prism-obsidian-bedrock,
.darkmatter-void-bedrock {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(0, 240, 255, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 75% 15%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(1.5px 1.5px at 45% 75%, rgba(251, 191, 36, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 85% 80%, rgba(139, 92, 246, 0.85), transparent),
    radial-gradient(circle at 50% 50%, #061528 0%, #020610 100%);
  background-size: 140px 140px, 180px 180px, 160px 160px, 200px 200px, 100% 100%;
}

/* Primary flowing diamond refraction caustics */
.prism-refraction-caustic-primary,
.darkmatter-plasma-stream-primary {
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    135deg,
    rgba(2, 6, 16, 0) 0%,
    rgba(0, 240, 255, 0.15) 15%,
    rgba(56, 189, 248, 0.28) 30%,
    rgba(255, 255, 255, 0.38) 45%,
    rgba(251, 191, 36, 0.25) 60%,
    rgba(139, 92, 246, 0.28) 75%,
    rgba(2, 6, 16, 0) 100%
  );
  background-size: 240% 240%;
  filter: blur(30px);
  animation: prismCausticStreamFlow 14s ease-in-out infinite alternate;
}

@keyframes prismCausticStreamFlow {
  0%   { background-position: 0% 0%; opacity: 0.7; }
  50%  { background-position: 100% 50%; opacity: 0.95; }
  100% { background-position: 50% 100%; opacity: 0.7; }
}

/* Secondary counter-dispersion refractive wave */
.prism-refraction-caustic-secondary,
.darkmatter-plasma-stream-secondary {
  position: absolute;
  inset: -35%;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(0, 240, 255, 0.25) 28%,
    rgba(139, 92, 246, 0.2) 52%,
    rgba(16, 185, 129, 0.15) 70%,
    transparent 85%
  );
  filter: blur(36px);
  animation: prismCausticCounterWave 16s ease-in-out infinite alternate;
}

@keyframes prismCausticCounterWave {
  0%   { transform: translate(-3%, -2%) scale(0.95); opacity: 0.6; }
  50%  { transform: translate(3%, 3%) scale(1.1); opacity: 0.9; }
  100% { transform: translate(-2%, 4%) scale(1.02); opacity: 0.65; }
}

/* Prismatic Dispersion Rays radiating from crystal core */
.prism-dispersion-ray {
  position: absolute;
  top: -20%;
  width: 120px;
  height: 140%;
  pointer-events: none;
  filter: blur(20px);
  opacity: 0.35;
  transform: rotate(35deg);
}

.prism-dispersion-ray.ray1 {
  left: 20%;
  background: linear-gradient(to bottom, transparent, rgba(0, 240, 255, 0.5), transparent);
  animation: prismRayPulse 8s ease-in-out infinite alternate;
}

.prism-dispersion-ray.ray2 {
  left: 55%;
  background: linear-gradient(to bottom, transparent, rgba(251, 191, 36, 0.45), transparent);
  animation: prismRayPulse 10s ease-in-out infinite alternate 1.5s;
}

.prism-dispersion-ray.ray3 {
  left: 80%;
  background: linear-gradient(to bottom, transparent, rgba(139, 92, 246, 0.5), transparent);
  animation: prismRayPulse 9s ease-in-out infinite alternate 3s;
}

@keyframes prismRayPulse {
  0%   { opacity: 0.2; transform: rotate(35deg) scaleX(0.8); }
  50%  { opacity: 0.5; transform: rotate(37deg) scaleX(1.2); }
  100% { opacity: 0.25; transform: rotate(34deg) scaleX(0.9); }
}

/* Harmonic vortex */
.prism-plasma-vortex,
.darkmatter-plasma-vortex {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85vmax;
  height: 85vmax;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0, 240, 255, 0.22) 70deg,
    rgba(255, 255, 255, 0.28) 140deg,
    rgba(251, 191, 36, 0.2) 210deg,
    rgba(139, 92, 246, 0.25) 290deg,
    transparent 360deg
  );
  filter: blur(40px);
  animation: prismVortexRotate 28s linear infinite;
}

@keyframes prismVortexRotate {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(0.92); }
  50%  { transform: translate(-50%, -50%) rotate(180deg) scale(1.06); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.92); }
}

/* Crystal Facet Lattice */
.prism-crystal-lattice,
.darkmatter-crystal-lattice {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(30deg, rgba(0, 240, 255, 0.3) 12%, transparent 12.5%, transparent 87%, rgba(0, 240, 255, 0.3) 87.5%, rgba(0, 240, 255, 0.3)),
    linear-gradient(150deg, rgba(255, 255, 255, 0.25) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.25) 87.5%, rgba(255, 255, 255, 0.25));
  background-size: 68px 118px;
  animation: prismLatticeDrift 28s linear infinite;
}

@keyframes prismLatticeDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 68px 118px; }
}

/* Linear light sheen sweep */
.prism-light-sweep,
.darkmatter-specular-sweep {
  position: absolute;
  inset: -60%;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 38%,
    rgba(255, 255, 255, 0.25) 48%,
    rgba(0, 240, 255, 0.45) 50%,
    rgba(251, 191, 36, 0.35) 52%,
    transparent 62%
  );
  transform: translateX(-100%) translateY(-100%) rotate(30deg);
  animation: prismBgLightSweep 10s ease-in-out infinite;
}

@keyframes prismBgLightSweep {
  0%   { transform: translateX(-120%) translateY(-120%) rotate(30deg); opacity: 0; }
  25%  { opacity: 0.8; }
  50%  { transform: translateX(120%) translateY(120%) rotate(30deg); opacity: 0.9; }
  55%  { opacity: 0; }
  100% { transform: translateX(120%) translateY(120%) rotate(30deg); opacity: 0; }
}

/* Floating 3D Geometric Diamond Shards */
.prism-diamond-shard,
.darkmatter-crystal-facet {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(0, 240, 255, 0.8) 45%, rgba(139, 92, 246, 0.65) 80%, rgba(251, 191, 36, 0.7));
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  box-shadow: 0 0 16px #ffffff, 0 0 26px #00f0ff, 0 0 38px #8b5cf6;
  animation: prismShardFloat 8s ease-in-out infinite alternate;
}

.prism-diamond-shard.ds1, .darkmatter-crystal-facet.cf1 { width: 14px; height: 18px; left: 14%; top: 22%; animation-delay: 0s; transform: rotate(15deg); }
.prism-diamond-shard.ds2, .darkmatter-crystal-facet.cf2 { width: 10px; height: 14px; left: 82%; top: 28%; animation-delay: 1.4s; transform: rotate(-25deg); }
.prism-diamond-shard.ds3, .darkmatter-crystal-facet.cf3 { width: 16px; height: 22px; left: 28%; top: 72%; animation-delay: 2.8s; transform: rotate(45deg); }
.prism-diamond-shard.ds4, .darkmatter-crystal-facet.cf4 { width: 12px; height: 16px; left: 88%; top: 68%; animation-delay: 4.2s; transform: rotate(-12deg); }
.prism-diamond-shard.ds5, .darkmatter-crystal-facet.cf5 { width: 15px; height: 20px; left: 52%; top: 16%; animation-delay: 5.6s; transform: rotate(32deg); }
.prism-diamond-shard.ds6, .darkmatter-crystal-facet.cf6 { width: 11px; height: 15px; left: 68%; top: 82%; animation-delay: 2.1s; transform: rotate(-40deg); }
.prism-diamond-shard.ds7, .darkmatter-crystal-facet.cf7 { width: 13px; height: 17px; left: 8%; top: 60%; animation-delay: 3.5s; transform: rotate(20deg); }
.prism-diamond-shard.ds8, .darkmatter-crystal-facet.cf8 { width: 9px; height: 12px; left: 44%; top: 88%; animation-delay: 4.9s; transform: rotate(-18deg); }

@keyframes prismShardFloat {
  0%   { transform: translateY(0px) rotate(0deg) scale(0.9); opacity: 0.65; }
  50%  { transform: translateY(-18px) rotate(22deg) scale(1.15); opacity: 1; }
  100% { transform: translateY(-32px) rotate(42deg) scale(0.95); opacity: 0.7; }
}

/* Floating Rising Refractor Sparkles */
.prism-refractor-sparkle,
.darkmatter-plasma-ember {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  animation: prismSparkleRise 8.5s linear infinite;
}

.prism-refractor-sparkle:nth-child(4n),
.darkmatter-plasma-ember:nth-child(3n)   { background: #ffffff; box-shadow: 0 0 8px #ffffff, 0 0 16px #00f0ff; }
.prism-refractor-sparkle:nth-child(4n+1),
.darkmatter-plasma-ember:nth-child(3n+1) { background: #00f0ff; box-shadow: 0 0 8px #00f0ff, 0 0 14px #38bdf8; }
.prism-refractor-sparkle:nth-child(4n+2),
.darkmatter-plasma-ember:nth-child(3n+2) { background: #fbbf24; box-shadow: 0 0 8px #fbbf24, 0 0 14px #f59e0b; }
.prism-refractor-sparkle:nth-child(4n+3) { background: #c084fc; box-shadow: 0 0 8px #c084fc, 0 0 14px #8b5cf6; }

.prism-refractor-sparkle.ps1,  .darkmatter-plasma-ember.pe1  { left: 10%; bottom: -10px; animation-delay: 0s;   animation-duration: 7.2s; }
.prism-refractor-sparkle.ps2,  .darkmatter-plasma-ember.pe2  { left: 22%; bottom: -10px; animation-delay: 1.1s; animation-duration: 8.5s; }
.prism-refractor-sparkle.ps3,  .darkmatter-plasma-ember.pe3  { left: 34%; bottom: -10px; animation-delay: 2.3s; animation-duration: 6.8s; }
.prism-refractor-sparkle.ps4,  .darkmatter-plasma-ember.pe4  { left: 46%; bottom: -10px; animation-delay: 3.5s; animation-duration: 9.1s; }
.prism-refractor-sparkle.ps5,  .darkmatter-plasma-ember.pe5  { left: 58%; bottom: -10px; animation-delay: 1.7s; animation-duration: 7.6s; }
.prism-refractor-sparkle.ps6,  .darkmatter-plasma-ember.pe6  { left: 70%; bottom: -10px; animation-delay: 2.9s; animation-duration: 8.2s; }
.prism-refractor-sparkle.ps7,  .darkmatter-plasma-ember.pe7  { left: 82%; bottom: -10px; animation-delay: 4.1s; animation-duration: 6.9s; }
.prism-refractor-sparkle.ps8,  .darkmatter-plasma-ember.pe8  { left: 94%; bottom: -10px; animation-delay: 0.7s; animation-duration: 8.8s; }
.prism-refractor-sparkle.ps9,  .darkmatter-plasma-ember.pe9  { left: 16%; bottom: -10px; animation-delay: 5.2s; animation-duration: 7.9s; }
.prism-refractor-sparkle.ps10, .darkmatter-plasma-ember.pe10 { left: 28%; bottom: -10px; animation-delay: 3.8s; animation-duration: 8.4s; }
.prism-refractor-sparkle.ps11, .darkmatter-plasma-ember.pe11 { left: 40%; bottom: -10px; animation-delay: 6.0s; animation-duration: 7.1s; }
.prism-refractor-sparkle.ps12, .darkmatter-plasma-ember.pe12 { left: 52%; bottom: -10px; animation-delay: 4.6s; animation-duration: 9.3s; }
.prism-refractor-sparkle.ps13, .darkmatter-plasma-ember.pe13 { left: 64%; bottom: -10px; animation-delay: 1.9s; animation-duration: 6.7s; }
.prism-refractor-sparkle.ps14, .darkmatter-plasma-ember.pe14 { left: 76%; bottom: -10px; animation-delay: 5.5s; animation-duration: 8.0s; }
.prism-refractor-sparkle.ps15, .darkmatter-plasma-ember.pe15 { left: 88%; bottom: -10px; animation-delay: 2.7s; animation-duration: 7.5s; }
.prism-refractor-sparkle.ps16, .darkmatter-plasma-ember.pe16 { left: 5%;  bottom: -10px; animation-delay: 6.3s; animation-duration: 8.9s; }

@keyframes prismSparkleRise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  15%  { opacity: 0.95; }
  85%  { opacity: 0.9; }
  100% { transform: translateY(-105vh) scale(1.3); opacity: 0; }
}

/* Valentine Rose Petals */
html.theme-valentine #theme-valentine-bg {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.showcase-theme-bg-layer #theme-valentine-bg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.valentine-rose-haze {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(251, 113, 133, 0.2), transparent 75%);
}

.valentine-petal-shape {
  position: absolute; width: 12px; height: 16px;
  background: #fb7185; border-radius: 50% 50% 50% 0;
  box-shadow: 0 0 10px rgba(251, 113, 133, 0.6);
  animation: petalDrift 7s linear infinite;
}

.valentine-petal-shape.vp1 { left: 20%; top: -10%; animation-delay: 0s; }
.valentine-petal-shape.vp2 { left: 60%; top: -10%; animation-delay: 2.2s; }
.valentine-petal-shape.vp3 { left: 85%; top: -10%; animation-delay: 4.5s; }

@keyframes petalDrift {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { transform: translateY(280px) rotate(270deg); opacity: 0; }
}

/* Sakura Cherry Blossom Petals */
html.theme-sakura #theme-sakura-bg {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.showcase-theme-bg-layer #theme-sakura-bg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.sakura-petal-vector {
  position: absolute; width: 10px; height: 14px;
  background: #fbcfe8; border-radius: 60% 40% 70% 30%;
  box-shadow: 0 0 8px rgba(251, 207, 232, 0.8);
  animation: sakuraFlutter 8s ease-in-out infinite;
}

.sakura-petal-vector.sp1 { left: 10%; top: -10%; animation-delay: 0s; }
.sakura-petal-vector.sp2 { left: 35%; top: -10%; animation-delay: 1.8s; }
.sakura-petal-vector.sp3 { left: 65%; top: -10%; animation-delay: 3.6s; }
.sakura-petal-vector.sp4 { left: 88%; top: -10%; animation-delay: 5.4s; }

@keyframes sakuraFlutter {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  20% { opacity: 0.85; }
  80% { opacity: 0.85; }
  100% { transform: translateY(280px) translateX(30px) rotate(360deg); opacity: 0; }
}

/* Solar Flare Rays & Corona */
html.theme-solar #theme-solar-bg {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.showcase-theme-bg-layer #theme-solar-bg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.solar-corona-core {
  position: absolute; left: 50%; top: 50%;
  width: 140px; height: 140px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, #fde047 10%, #f97316 50%, transparent 80%);
  box-shadow: 0 0 50px #f97316, 0 0 100px #eab308;
  animation: solarPulse 4s ease-in-out infinite alternate;
}

@keyframes solarPulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.9; }
}

/* Steampunk Rotating Gears */
html.theme-steampunk #theme-steampunk-bg {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.showcase-theme-bg-layer #theme-steampunk-bg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.steampunk-gear-ring {
  position: absolute; border: 3px dashed #ca8a04; border-radius: 50%;
  box-shadow: 0 0 12px rgba(202, 138, 4, 0.5);
  animation: gearSpin 14s linear infinite;
}

.steampunk-gear-ring.gr1 { left: 10%; top: 20%; width: 60px; height: 60px; animation-duration: 12s; }
.steampunk-gear-ring.gr2 { right: 15%; top: 40%; width: 90px; height: 90px; animation-duration: 18s; animation-direction: reverse; }

@keyframes gearSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Galaxy Spiral Stars */
html.theme-galaxy #theme-galaxy-bg {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.showcase-theme-bg-layer #theme-galaxy-bg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.galaxy-spiral-arm {
  position: absolute; inset: -20%;
  background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.25), transparent 70%);
}

.galaxy-star-particle {
  position: absolute; width: 3px; height: 3px; background: #ffffff;
  border-radius: 50%; box-shadow: 0 0 6px #a855f7, 0 0 12px #38bdf8;
  animation: starTwinkle 3s ease-in-out infinite alternate;
}

.galaxy-star-particle.gs1 { left: 20%; top: 25%; animation-delay: 0s; }
.galaxy-star-particle.gs2 { left: 75%; top: 35%; animation-delay: 0.7s; }
.galaxy-star-particle.gs3 { left: 40%; top: 70%; animation-delay: 1.4s; }
.galaxy-star-particle.gs4 { left: 85%; top: 80%; animation-delay: 2.1s; }

/* Theme Showcase Canvas (Pure background effects preview) */
.showcase-theme-canvas {
  width: 100%;
  height: 260px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 18px;
  box-sizing: border-box;
}

.showcase-theme-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Ensure theme background layers render inside showcase canvas */
.showcase-theme-bg-layer > * {
  display: block !important;
  visibility: visible !important;
}

.showcase-theme-badge {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.showcase-theme-badge-emblem {
  font-size: 1.6rem;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
}

.showcase-theme-badge-title {
  font-family: var(--font-display, sans-serif);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Theme Swatch & Mini Screen on Locker Grid Tiles */
.tile-mini-screen {
  width: 100%;
  border-radius: 8px;
  padding: 6px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.tile-mini-screen-header {
  font-family: var(--font-display, sans-serif);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 2px 4px;
  border-radius: 4px;
  text-align: center;
  text-transform: uppercase;
}

.tile-mini-screen-card {
  padding: 4px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.tile-mini-text {
  font-family: var(--font-display, sans-serif);
  font-size: 0.58rem;
  font-weight: 800;
}

.theme-palette-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.theme-preview-mock-ui {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-mock-hp-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.theme-mock-hp-fill {
  height: 100%;
  width: 75%;
  border-radius: 4px;
}

.theme-mock-buttons {
  display: flex;
  gap: 6px;
}

.theme-mock-btn {
  flex: 1;
  padding: 6px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.65rem;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Sleeve Showcase 3D Live Card */
.showcase-sleeve-stage {
  width: 100%;
  max-width: 200px;
  perspective: 1200px;
  margin: 0 auto;
}

.sleeve-preview-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.35;
  border-radius: 12px;
  background: #0d1322;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px;
  box-sizing: border-box;
  text-align: center;
  transform: skewX(-3deg);
  animation: showcaseFloat 4s ease-in-out infinite;
}

/* Specific Sleeve border animations */
.sleeve-preview-hero.sleeve-none {
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

.sleeve-preview-hero.sleeve-holo {
  border: 2px solid #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.6), 0 0 35px rgba(236, 72, 153, 0.4);
  background: linear-gradient(150deg, #091a2e 0%, #170b28 100%);
  animation: holoSheen 3s ease infinite, showcaseFloat 4s ease-in-out infinite;
}

.sleeve-preview-hero.sleeve-gold {
  border: 2px solid #facc15;
  box-shadow: 0 0 24px rgba(250, 204, 21, 0.7), inset 0 0 14px rgba(250, 204, 21, 0.4);
  background: linear-gradient(150deg, #2a1f05 0%, #150f02 100%);
  animation: goldPulse 2.5s ease-in-out infinite, showcaseFloat 4s ease-in-out infinite;
}

.sleeve-preview-hero.sleeve-prismatic {
  border: 2px solid transparent;
  background: linear-gradient(#0b0f19, #0b0f19) padding-box,
              linear-gradient(90deg, #ff0055, #ffaa00, #33ff00, #00ffff, #7700ff, #ff0055) border-box;
  box-shadow: 0 0 26px rgba(168, 85, 247, 0.75);
  animation: prismaticShift 4s linear infinite, showcaseFloat 4s ease-in-out infinite;
}

.sleeve-preview-hero.sleeve-void {
  border: 2px solid #a855f7;
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.9), inset 0 0 18px rgba(168, 85, 247, 0.5);
  background: radial-gradient(circle at center, #1b072c 0%, #05020a 100%);
  animation: voidPulse 3s ease-in-out infinite, showcaseFloat 4s ease-in-out infinite;
}

.sleeve-preview-hero.sleeve-cyber {
  border: 2px solid #06b6d4;
  box-shadow: 0 0 28px rgba(6, 182, 212, 0.8), inset 0 0 16px rgba(6, 182, 212, 0.4);
  background: linear-gradient(150deg, #032b38 0%, #02121a 100%);
  animation: showcaseFloat 4s ease-in-out infinite;
}

.sleeve-preview-hero.sleeve-frost {
  border: 2px solid #38bdf8;
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.85), inset 0 0 18px rgba(56, 189, 248, 0.45);
  background: radial-gradient(circle at center, #0c334e 0%, #03111c 100%);
  animation: showcaseFloat 4s ease-in-out infinite;
}

.sleeve-preview-hero.sleeve-phoenix {
  border: 2px solid #f97316;
  box-shadow: 0 0 32px rgba(249, 115, 22, 0.9), inset 0 0 20px rgba(249, 115, 22, 0.5);
  background: radial-gradient(circle at center, #3d1403 0%, #170400 100%);
  animation: goldPulse 2s ease-in-out infinite, showcaseFloat 4s ease-in-out infinite;
}

.sleeve-preview-hero.sleeve-emerald {
  border: 2px solid #10b981;
  box-shadow: 0 0 28px rgba(16, 185, 129, 0.8), inset 0 0 16px rgba(16, 185, 129, 0.4);
  background: linear-gradient(150deg, #042e20 0%, #01140d 100%);
  animation: showcaseFloat 4s ease-in-out infinite;
}

.sleeve-preview-hero.sleeve-obsidian {
  border: 2px solid #ef4444;
  box-shadow: 0 0 32px rgba(239, 68, 68, 0.85), inset 0 0 20px rgba(239, 68, 68, 0.45);
  background: radial-gradient(circle at center, #260507 0%, #0a0102 100%);
  animation: showcaseFloat 4s ease-in-out infinite;
}

/* Victory Animation Interactive Preview Stage */
.showcase-victory-stage {
  width: 100%;
  border-radius: 12px;
  background: #05070e;
  border: 2px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
}

.victory-preview-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.fullscreen-victory-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: strict;
}

.shake-light { animation: shakeLight 0.35s cubic-bezier(.36,.07,.19,.97) both; }
.shake-medium { animation: shakeMedium 0.45s cubic-bezier(.36,.07,.19,.97) both; }
.shake-heavy { animation: shakeHeavy 0.55s cubic-bezier(.36,.07,.19,.97) both; }

@keyframes shakeLight {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, -1px, 0); }
  40%, 60% { transform: translate3d(3px, 1px, 0); }
}

@keyframes shakeMedium {
  10%, 90% { transform: translate3d(-2px, -1px, 0); }
  20%, 80% { transform: translate3d(4px, 2px, 0); }
  30%, 50%, 70% { transform: translate3d(-5px, -3px, 0); }
  40%, 60% { transform: translate3d(5px, 3px, 0); }
}

@keyframes shakeHeavy {
  10%, 90% { transform: translate3d(-4px, -2px, 0); }
  20%, 80% { transform: translate3d(8px, 4px, 0); }
  30%, 50%, 70% { transform: translate3d(-10px, -6px, 0); }
  40%, 60% { transform: translate3d(10px, 6px, 0); }
}

.menu-grid.three-col { max-width: 780px; }
@media (min-width: 620px) { .menu-grid.three-col { grid-template-columns: repeat(3, 1fr); } }

.search-pulse-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 40px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   REDESIGNED MODERN MATCHMAKING & FINDING OPPONENT SCREEN
   ========================================================================== */
#screen-matchmaking {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  max-width: 960px;
  margin: 0 auto;
  min-height: 78vh;
  position: relative;
  overflow-x: clip;
}

.matchmaking-header-hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 2.25rem;
  flex-wrap: wrap;
}

.mm-hud-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 0.45rem 1.25rem;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  backdrop-filter: blur(16px);
  color: #38bdf8;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.mm-node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: mmDotBlink 1.8s ease-in-out infinite;
}

@keyframes mmDotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.mm-ping-val { color: #38bdf8; font-weight: 800; }
.mm-ping-label { color: #64748b; font-size: 0.68rem; font-weight: 600; }

.mm-versus-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  width: 100%;
  max-width: 880px;
  margin-bottom: 2.5rem;
  position: relative;
  overflow: visible;
  perspective: 1000px;
}

/* Entrance Animation Sequence for Multiplayer Match Screen */
.mm-card-local.mm-fly-in {
  animation: mmFlyInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  will-change: transform, opacity;
}

.mm-card-remote.mm-fly-in {
  animation: mmFlyInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  will-change: transform, opacity;
}

.mm-center-radar.mm-fly-in {
  animation: mmRadarEntrance 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
  will-change: transform, opacity;
}

.mm-vs-badge.mm-fly-in {
  animation: mmVsSlam 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.12s forwards !important;
}

.matchmaking-header-hud.mm-fly-in {
  animation: mmHeaderSlideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes mmFlyInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-100vw, 0, 0) rotate(-14deg) scale(0.8);
    filter: blur(8px);
  }
  65% {
    opacity: 1;
    transform: translate3d(16px, 0, 0) rotate(2deg) scale(1.04);
    filter: blur(0);
  }
  85% {
    transform: translate3d(-4px, 0, 0) rotate(-0.5deg) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    filter: blur(0);
  }
}

@keyframes mmFlyInRight {
  0% {
    opacity: 0;
    transform: translate3d(100vw, 0, 0) rotate(14deg) scale(0.8);
    filter: blur(8px);
  }
  65% {
    opacity: 1;
    transform: translate3d(-16px, 0, 0) rotate(-2deg) scale(1.04);
    filter: blur(0);
  }
  85% {
    transform: translate3d(4px, 0, 0) rotate(0.5deg) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    filter: blur(0);
  }
}

@keyframes mmRadarEntrance {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(-180deg);
  }
  65% {
    opacity: 1;
    transform: scale(1.08) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes mmVsSlam {
  0% {
    opacity: 0;
    transform: scale(2.6) translateY(-40px);
    filter: drop-shadow(0 0 40px rgba(251, 191, 36, 1));
  }
  60% {
    opacity: 1;
    transform: scale(0.9) translateY(4px);
    filter: drop-shadow(0 0 25px rgba(251, 191, 36, 0.8));
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.45));
  }
}

@keyframes mmHeaderSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-35px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .mm-versus-stage {
    flex-direction: column;
    gap: 1.5rem;
  }
}

.mm-player-card {
  position: relative;
  flex: 1;
  max-width: 270px;
  width: 100%;
  background: linear-gradient(155deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.92));
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 18px;
  padding: 2rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: mmRadarSyncGlowBlue 3s ease-in-out infinite;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.mm-player-card.searching {
  border-color: rgba(236, 72, 153, 0.45);
  animation: mmRadarSyncGlowRed 3s ease-in-out infinite;
}

/* Radar-Synchronized Refined Ambient Glow Animations (3s Cycle) */
@keyframes mmRadarSyncGlowBlue {
  0%, 100% {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.55), 0 0 12px rgba(56, 189, 248, 0.15);
  }
  50% {
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 24px rgba(56, 189, 248, 0.45);
  }
}

@keyframes mmRadarSyncGlowRed {
  0%, 100% {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.55), 0 0 12px rgba(236, 72, 153, 0.15);
  }
  50% {
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 24px rgba(236, 72, 153, 0.45);
  }
}

@keyframes mmRadarSyncGlowYellow {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 10px rgba(251, 191, 36, 0.15);
  }
  50% {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 22px rgba(251, 191, 36, 0.45);
  }
}

.mm-card-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.2), transparent 70%);
  z-index: 0;
}

.mm-card-glow.remote {
  background: radial-gradient(circle at 50% 0%, rgba(236, 72, 153, 0.2), transparent 70%);
}

.mm-card-avatar-frame {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(139, 92, 246, 0.35));
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  z-index: 1;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  overflow: visible !important;
}

.mm-avatar-particle-canvas {
  position: absolute;
  top: -18px;
  left: -18px;
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.mm-card-avatar-frame.searching-frame {
  border-color: rgba(236, 72, 153, 0.6);
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(251, 191, 36, 0.2));
  animation: framePulse 2.2s ease-in-out infinite alternate;
}

@keyframes framePulse {
  0% { box-shadow: 0 0 15px rgba(236, 72, 153, 0.4); }
  100% { box-shadow: 0 0 30px rgba(236, 72, 153, 0.8), 0 0 45px rgba(251, 191, 36, 0.4); }
}

.mm-card-avatar {
  position: relative;
  z-index: 2;
  font-size: 2.85rem;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

.mm-card-avatar.pulse-avatar {
  animation: avatarSpinPulse 3.5s ease-in-out infinite;
}

@keyframes avatarSpinPulse {
  0% { transform: scale(0.92) rotate(-5deg); filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.5)); }
  50% { transform: scale(1.08) rotate(5deg); filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8)); }
  100% { transform: scale(0.92) rotate(-5deg); filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.5)); }
}

.mm-card-badge {
  position: absolute;
  z-index: 3;
  bottom: -9px;
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.6);
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.mm-card-badge.searching-badge {
  border-color: rgba(236, 72, 153, 0.6);
  color: #ec4899;
}

.mm-card-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin-top: 0.35rem;
  letter-spacing: 0.03em;
  z-index: 1;
}

.mm-card-deck {
  font-size: 0.82rem;
  color: #94a3b8;
  margin-top: 0.25rem;
  font-weight: 600;
  z-index: 1;
}

.mm-card-status {
  margin-top: 1.35rem;
  padding: 0.4rem 1.1rem;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  z-index: 1;
}

.mm-card-status.ready {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.45);
}

.mm-card-status.searching {
  background: rgba(236, 72, 153, 0.16);
  color: #f43f5e;
  border: 1px solid rgba(236, 72, 153, 0.45);
}

.status-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
  animation: mmDotBlink 1.4s infinite;
}

.status-radar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 0 10px #f43f5e;
  animation: mmDotBlink 0.8s infinite;
}

/* Center Orbital Radar & VS Emblem */
.mm-center-radar {
  position: relative;
  width: 155px;
  height: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mm-radar-ring {
  position: absolute;
  border-radius: 50%;
}

.mm-radar-ring.outer {
  inset: 0;
  border: 1.5px dashed rgba(56, 189, 248, 0.35);
  animation: radarSpinClockwise 18s linear infinite;
}

.mm-radar-ring.middle {
  inset: 18px;
  border: 1.5px solid rgba(236, 72, 153, 0.35);
  animation: radarSpinCounter 12s linear infinite;
}

.mm-radar-ring.inner {
  inset: 36px;
  border: 1.5px solid rgba(251, 191, 36, 0.4);
}

@keyframes radarSpinClockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes radarSpinCounter {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

.mm-radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg, 
    transparent 0deg, 
    transparent 180deg, 
    rgba(56, 189, 248, 0.04) 220deg, 
    rgba(236, 72, 153, 0.18) 280deg, 
    rgba(56, 189, 248, 0.45) 345deg, 
    rgba(0, 240, 255, 0.85) 360deg
  );
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.5));
  animation: radarSweep 2.8s linear infinite;
  pointer-events: none;
}

/* Secondary ghost after-image trail layer for rotating radar */
.mm-radar-sweep::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg, 
    transparent 0deg, 
    transparent 220deg, 
    rgba(236, 72, 153, 0.12) 290deg, 
    rgba(56, 189, 248, 0.3) 350deg, 
    rgba(56, 189, 248, 0.6) 360deg
  );
  filter: blur(6px);
  transform: rotate(-12deg);
  pointer-events: none;
}

@keyframes radarSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.mm-radar-beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.95), rgba(236, 72, 153, 0.95), rgba(56, 189, 248, 0.95), transparent);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.9), 0 0 22px rgba(236, 72, 153, 0.7);
  animation: radarBeamSweep 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 4;
}

/* Fading phosphorescent after-image tail following behind the scanner beam */
.mm-radar-beam::after {
  content: '';
  position: absolute;
  top: -24px;
  left: 5%;
  right: 5%;
  height: 24px;
  background: linear-gradient(to top, rgba(56, 189, 248, 0.35), rgba(236, 72, 153, 0.12), transparent);
  filter: blur(2px);
  pointer-events: none;
}

/* Secondary lingering ghost bloom */
.mm-radar-beam::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 10%;
  right: 10%;
  height: 12px;
  background: linear-gradient(to top, rgba(0, 240, 255, 0.45), transparent);
  filter: blur(4px);
  pointer-events: none;
}

@keyframes radarBeamSweep {
  0% {
    top: -5%;
    opacity: 0;
  }
  15% {
    opacity: 0.95;
  }
  85% {
    opacity: 0.95;
  }
  100% {
    top: 105%;
    opacity: 0;
  }
}

.mm-center-radar.locked-in .mm-radar-ring,
.mm-center-radar.locked-in .mm-radar-sweep {
  animation-play-state: paused !important;
  opacity: 0.3;
}

.mm-center-radar.locked-in .mm-radar-beam {
  animation: none !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 1 !important;
  height: 4px;
  background: #00f0ff !important;
  box-shadow: 0 0 25px #00f0ff, 0 0 45px #38bdf8 !important;
}

.mm-center-radar.locked-in .mm-target-reticle {
  border-color: #10b981 !important;
  box-shadow: 0 0 20px #10b981;
}

.mm-player-card.mm-card-remote.locked-in {
  border-color: #10b981 !important;
  animation: cardLockInSlide 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(16, 185, 129, 0.5) !important;
}

@keyframes cardLockInSlide {
  0% {
    opacity: 0;
    transform: translateX(40px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.mm-vs-badge {
  position: relative;
  z-index: 5;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border: 2px solid rgba(251, 191, 36, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.45), inset 0 0 10px rgba(251, 191, 36, 0.25);
  animation: vsPulse 2s ease-in-out infinite alternate;
}

@keyframes vsPulse {
  0% { transform: scale(0.96); box-shadow: 0 0 15px rgba(251, 191, 36, 0.4); }
  100% { transform: scale(1.08); box-shadow: 0 0 30px rgba(251, 191, 36, 0.8), 0 0 45px rgba(236, 72, 153, 0.5); }
}

.mm-vs-text {
  font-size: 1.1rem;
  font-weight: 900;
  color: #f59e0b;
  font-style: italic;
  line-height: 1;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.85);
}

.mm-vs-lightning {
  font-size: 0.65rem;
  color: #fbbf24;
  margin-top: -2px;
}

.mm-orbit-blip {
  position: absolute;
  font-size: 0.95rem;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.85));
  pointer-events: none;
}

.mm-orbit-blip.b1 { top: 8px; left: 8px; animation: orbitBlip1 6s linear infinite; }
.mm-orbit-blip.b2 { bottom: 8px; right: 8px; animation: orbitBlip2 8s linear infinite; }
.mm-orbit-blip.b3 { top: 50%; right: 4px; animation: orbitBlip3 7s linear infinite; }

@keyframes orbitBlip1 {
  0% { transform: rotate(0deg) translate(50px) rotate(0deg); }
  100% { transform: rotate(360deg) translate(50px) rotate(-360deg); }
}

@keyframes orbitBlip2 {
  0% { transform: rotate(180deg) translate(40px) rotate(-180deg); }
  100% { transform: rotate(-180deg) translate(40px) rotate(180deg); }
}

@keyframes orbitBlip3 {
  0% { transform: rotate(90deg) translate(60px) rotate(-90deg); }
  100% { transform: rotate(450deg) translate(60px) rotate(-450deg); }
}

/* Status & Live Queue HUD */
.mm-status-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 520px;
  margin-bottom: 2.25rem;
}

.mm-status-label {
  font-size: 0.98rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 0.85rem;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.mm-timer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(251, 191, 36, 0.45);
  padding: 0.45rem 1.35rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: 1.1rem;
  backdrop-filter: blur(16px);
  animation: mmRadarSyncGlowYellow 3s ease-in-out infinite;
}

.mm-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-bottom: 1.25rem;
}

/* Tactical Tip Carousel Card */
.mm-tip-card {
  width: 100%;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  text-align: left;
  transition: border-color 0.3s ease, transform 0.2s ease;
}

.mm-tip-card:hover {
  border-color: rgba(56, 189, 248, 0.45);
}

.mm-tip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}

.mm-tip-badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #38bdf8;
  text-transform: uppercase;
}

.mm-tip-next-btn {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.2s ease;
}

.mm-tip-next-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: rgba(56, 189, 248, 0.6);
  transform: translateX(2px);
}

.mm-tip-body {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #cbd5e1;
  font-weight: 500;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.mm-tip-body.fade-out {
  opacity: 0;
  transform: translateY(-4px);
}

.mm-progress-bar {
  position: absolute;
  inset: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, #38bdf8, #ec4899, #f59e0b, transparent);
  border-radius: 4px;
  animation: mmProgressSweep 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes mmProgressSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.mm-cancel-btn {
  border-color: rgba(244, 63, 94, 0.45) !important;
  color: #f43f5e !important;
  background: rgba(244, 63, 94, 0.1) !important;
  font-weight: 800 !important;
  padding: 0.7rem 2rem !important;
  border-radius: 9999px !important;
  letter-spacing: 0.06em !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 18px rgba(244, 63, 94, 0.25) !important;
  transition: all 0.25s ease !important;
}

.mm-cancel-btn:hover {
  background: rgba(244, 63, 94, 0.22) !important;
  border-color: rgba(244, 63, 94, 0.75) !important;
  box-shadow: 0 6px 24px rgba(244, 63, 94, 0.45) !important;
  transform: translateY(-2px) !important;
}

.search-pulse-icon {
  font-size: 2.5rem;
  z-index: 10;
  animation: pulseRotate 2s linear infinite;
}

.search-pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid var(--accent);
  border-radius: 50%;
  animation: pulseRing 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  opacity: 0;
}

.search-pulse-ring:nth-child(2) {
  animation-delay: 0.5s;
}

.search-pulse-ring:nth-child(3) {
  animation-delay: 1.0s;
}

@keyframes pulseRing {
  0% {
    transform: scale(0.3);
    opacity: 0.8;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes pulseRotate {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@media (max-width: 600px) {
  .secret-terminal-card {
    padding: 16px;
    max-height: 94vh;
  }
  #secret-stage-unlocked {
    max-height: calc(94vh - 75px);
  }
  .secret-cmd-card {
    padding: 10px 12px;
    gap: 10px;
  }
  .cmd-icon-box {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
  }
  .cmd-title {
    font-size: 0.9rem;
  }
  .cmd-subtitle {
    font-size: 0.74rem;
  }
}

.emote-bubble {
  position: absolute;
  background: rgba(15, 9, 32, 0.92);
  border: 1px solid rgba(139, 92, 246, 0.6);
  color: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 1.4rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 20px rgba(139, 92, 246, 0.4);
  z-index: 100;
  pointer-events: none;
  animation: emotePopBounce 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.emote-bubble.text-bubble {
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 12px;
  font-family: var(--font-display);
  padding: 8px 14px;
}
@keyframes emotePopBounce {
  0% {
    transform: scale(0.3) translateY(20px);
    opacity: 0;
  }
  15% {
    transform: scale(1.15) translateY(-6px);
    opacity: 1;
  }
  30% {
    transform: scale(0.95) translateY(2px);
    opacity: 1;
  }
  45% {
    transform: scale(1.02) translateY(-1px);
    opacity: 1;
  }
  75% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  100% {
    transform: scale(0.9) translateY(-35px);
    opacity: 0;
  }
}

.emote-picker-wrapper {
  position: relative;
  display: inline-block;
}
#emotes-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  background: linear-gradient(160deg, #150d2a 0%, #0a0516 100%);
  border: 1px solid rgba(139, 92, 246, 0.5);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.8), 0 0 20px rgba(139, 92, 246, 0.3);
  z-index: 999;
  width: 220px;
  animation: modalPopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#emotes-popover.hidden {
  display: none !important;
}
.emotes-emoji-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.emote-btn {
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.emote-btn:hover {
  background: rgba(139, 92, 246, 0.35);
  border-color: #38bdf8;
  transform: translateY(-2px) scale(1.1);
}
.quick-chat-divider {
  height: 1px;
  background: rgba(139, 92, 246, 0.25);
  margin: 8px 0;
}
.quick-chat-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quick-chat-btn {
  background: rgba(25, 15, 45, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  text-align: left;
  color: #f3efff;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.quick-chat-btn:hover {
  background: rgba(139, 92, 246, 0.3);
  border-color: #38bdf8;
  transform: translateX(2px);
}

#replay-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
#replay-controls.hidden { display: none !important; }
#replay-controls button { font-size: 1.2rem; margin: 0; padding: 5px 10px; }
#replay-speed-container { display: flex; align-items: center; gap: 8px; margin-left: 10px; border-left: 1px solid var(--border); padding-left: 15px; }
#replay-speed { width: 80px; }

/* ============================================================
   FLOATING BUX REWARD TOAST & SPARKLER EFFECT
   ============================================================ */
#bux-gain-container {
  position: fixed;
  top: 64px;
  right: 20px;
  z-index: 999999;
  pointer-events: none;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
}

@media (max-width: 480px) {
  #bux-gain-container {
    top: 52px;
    right: 12px;
  }
}

.bux-gain-toast-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: buxToastLifecycle 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bux-gain-toast {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 8px 12px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(32, 24, 10, 0.96) 0%, rgba(16, 12, 4, 0.98) 100%);
  border: 2px solid #facc15;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7),
              0 0 24px rgba(250, 204, 21, 0.5),
              inset 0 0 14px rgba(250, 204, 21, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: visible;
}

.bux-gain-toast::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  animation: buxToastShine 1.4s ease infinite;
}

.bux-gain-coin {
  font-size: 1.3rem;
  display: inline-block;
  animation: buxCoinPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 8px #facc15);
}

.bux-gain-amount {
  font-family: var(--font-display), 'Chakra Petch', sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #fffbeb;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.8), 0 2px 4px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

.bux-gain-label {
  font-family: var(--font-display), 'Chakra Petch', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #facc15;
  text-transform: uppercase;
}

/* Sparkler Shockwave Ring */
.bux-sparkler-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid rgba(250, 204, 21, 0.8);
  box-shadow: 0 0 15px #facc15;
  pointer-events: none;
  animation: buxRingExpand 0.7s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

/* Sparkler Floating Particles */
.bux-sparkler-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  user-select: none;
  font-family: sans-serif;
  line-height: 1;
  transform-origin: center center;
  animation: sparklerBurstFloat var(--dur, 0.95s) cubic-bezier(0.12, 0.8, 0.32, 1) var(--delay, 0s) forwards;
}

.bux-sparkler-particle.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pcolor, #facc15);
  box-shadow: 0 0 8px var(--pcolor, #facc15);
}

.bux-sparkler-particle.star {
  font-size: var(--psize, 14px);
  color: var(--pcolor, #facc15);
  text-shadow: 0 0 8px var(--pcolor, #facc15), 0 0 14px rgba(255, 255, 255, 0.8);
}

/* Header HUD Pulse when Bux are gained */
#bux-counter.bux-pulse-glow {
  animation: buxCounterPulse 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes buxToastLifecycle {
  0% {
    transform: translateY(24px) scale(0.5);
    opacity: 0;
    filter: brightness(2.2);
  }
  15% {
    transform: translateY(-6px) scale(1.1);
    opacity: 1;
    filter: brightness(1.2);
  }
  28% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: brightness(1);
  }
  75% {
    transform: translateY(-12px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-38px) scale(0.92);
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes buxToastShine {
  0% { left: -100%; }
  60%, 100% { left: 160%; }
}

@keyframes buxCoinPop {
  0% { transform: scale(0.3) rotate(-25deg); }
  50% { transform: scale(1.35) rotate(15deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes buxRingExpand {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(4.8);
    opacity: 0;
  }
}

@keyframes sparklerBurstFloat {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translate(-50%, -50%) translate(calc(var(--dx) * 0.7), calc(var(--dy) * 0.7)) scale(1.35) rotate(var(--rot));
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1) rotate(calc(var(--rot) * 1.5));
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) translate(calc(var(--dx) * 1.15), calc(var(--dy) + 26px)) scale(0.2) rotate(calc(var(--rot) * 2));
    opacity: 0;
  }
}

@keyframes buxCounterPulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.22);
    border-color: #facc15 !important;
    box-shadow: 0 0 24px #facc15, 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  }
  100% {
    transform: scale(1);
  }
}

/* ==========================================
   THEME-REACTIVE GAME BOARD ATMOSPHERE
   ========================================== */

/* 1. FLAME THEME */
html.theme-flame .slot {
  animation: flameHeatPulse 4s ease-in-out infinite alternate;
}
@keyframes flameHeatPulse {
  0% { border-color: rgba(239, 68, 68, 0.4); box-shadow: inset 0 0 4px rgba(239, 68, 68, 0.1); }
  100% { border-color: rgba(249, 115, 22, 0.85); box-shadow: inset 0 0 10px rgba(249, 115, 22, 0.25); }
}

/* 2. VERDANT THEME */
html.theme-verdant .slot {
  animation: verdantPulse 5s ease-in-out infinite alternate;
}
@keyframes verdantPulse {
  0% { border-color: rgba(34, 197, 94, 0.3); box-shadow: inset 0 0 4px rgba(34, 197, 94, 0.05); }
  100% { border-color: rgba(16, 185, 129, 0.7); box-shadow: inset 0 0 12px rgba(16, 185, 129, 0.2); }
}

/* 3. STORM & CYBERNEON THEMES */
html.theme-storm .slot,
html.theme-cyberneon .slot {
  animation: cyberSpark 3s ease-in-out infinite;
}
@keyframes cyberSpark {
  0%, 100% { border-color: rgba(168, 85, 247, 0.4); box-shadow: inset 0 0 4px rgba(168, 85, 247, 0.1); }
  50% { border-color: rgba(59, 130, 246, 0.9); box-shadow: inset 0 0 12px rgba(59, 130, 246, 0.3), 0 0 4px rgba(59, 130, 246, 0.2); }
}

/* 4. ABYSS THEME */
html.theme-abyss .slot {
  animation: abyssPulse 6s ease-in-out infinite alternate;
}
@keyframes abyssPulse {
  0% { border-color: rgba(30, 58, 138, 0.4); box-shadow: inset 0 0 6px rgba(30, 58, 138, 0.15); }
  100% { border-color: rgba(14, 165, 233, 0.75); box-shadow: inset 0 0 16px rgba(14, 165, 233, 0.3); }
}

/* 5. MAGMA THEME */
html.theme-magma .slot {
  animation: magmaFlow 4s ease-in-out infinite alternate;
}
@keyframes magmaFlow {
  0% { border-color: rgba(220, 38, 38, 0.4); box-shadow: inset 0 0 8px rgba(220, 38, 38, 0.2); }
  100% { border-color: rgba(234, 88, 12, 0.9); box-shadow: inset 0 0 16px rgba(234, 88, 12, 0.45); }
}

/* 6. GLACIER & QUANTUM THEMES */
html.theme-glacier .slot,
html.theme-quantum .slot {
  animation: glacierGleam 4.5s ease-in-out infinite alternate;
}
@keyframes glacierGleam {
  0% { border-color: rgba(147, 197, 253, 0.3); box-shadow: inset 0 0 4px rgba(147, 197, 253, 0.05); }
  100% { border-color: rgba(56, 189, 248, 0.8); box-shadow: inset 0 0 14px rgba(56, 189, 248, 0.25); }
}

/* 7. GALAXY, ASTRAL & CELESTIAL THEMES */
html.theme-galaxy .slot,
html.theme-astral .slot,
html.theme-celestial .slot {
  animation: cosmicShimmer 7s ease-in-out infinite alternate;
}
@keyframes cosmicShimmer {
  0% { border-color: rgba(124, 58, 237, 0.35); box-shadow: inset 0 0 5px rgba(124, 58, 237, 0.1); }
  100% { border-color: rgba(236, 72, 153, 0.75); box-shadow: inset 0 0 14px rgba(236, 72, 153, 0.25); }
}

/* 8. MRMONEY THEME */
html.theme-mrmoney .slot {
  animation: luxuryGlint 5s ease-in-out infinite alternate;
}
@keyframes luxuryGlint {
  0% { border-color: rgba(212, 175, 55, 0.35); box-shadow: inset 0 0 4px rgba(212, 175, 55, 0.1); }
  100% { border-color: rgba(253, 224, 71, 0.85); box-shadow: inset 0 0 14px rgba(253, 224, 71, 0.3); }
}

/* ==========================================
   VISUAL WIN-STREAK TRACKER STYLING
   ========================================== */
.profile-streak-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.78);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px 16px 4px 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
  transition: all 0.3s ease;
}
.profile-streak-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: translateX(-100%);
  animation: shineStreak 3s infinite;
}
@keyframes shineStreak {
  100% { transform: translateX(100%); }
}

/* Sparked state (>0) */
.profile-streak-banner.sparked {
  border-color: rgba(249, 115, 22, 0.6);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.18) 0%, rgba(18, 24, 36, 0.85) 100%);
  box-shadow: none !important;
}
.profile-streak-banner.sparked .psb-flame {
  animation: flameBounce 1.2s ease-in-out infinite alternate;
}

/* On Fire state (>=3) */
.profile-streak-banner.on-fire {
  border-color: rgba(250, 204, 21, 0.85);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.22) 0%, rgba(249, 115, 22, 0.15) 50%, rgba(18, 24, 36, 0.9) 100%);
  box-shadow: none !important;
}
.profile-streak-banner.on-fire .psb-flame {
  text-shadow: 0 0 12px #ff4500, 0 0 24px #ffd700;
  font-size: 1.6rem;
  animation: extremeFlame 0.4s ease-in-out infinite alternate;
}

.profile-streak-banner.extinguished .psb-flame {
  filter: grayscale(1) opacity(0.4);
}

.psb-flame {
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.psb-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.psb-title {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: #fff;
  text-transform: uppercase;
}
.psb-title b {
  color: #f97316;
}
.profile-streak-banner.on-fire .psb-title b {
  color: #facc15;
}
.psb-subtitle {
  font-size: 0.76rem;
  color: #a1a1aa;
}
.psb-badge {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  background: #f97316;
  color: #fff;
  padding: 3px 10px;
  border-radius: 3px 10px 3px 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: none !important;
}
.profile-streak-banner.on-fire .psb-badge {
  background: #eab308;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: none !important;
}

@keyframes flameBounce {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-4px) scale(1.1); }
}
@keyframes extremeFlame {
  0% { transform: scale(1) rotate(-3deg); }
  100% { transform: scale(1.25) rotate(3deg); }
}

/* Rematch call-to-action button pulse */
.pulse-accent {
  animation: rematchBtnPulse 1.2s infinite alternate ease-in-out !important;
}
@keyframes rematchBtnPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(224, 138, 44, 0.4);
    filter: brightness(1);
  }
  100% {
    transform: scale(1.04);
    box-shadow: 0 0 16px rgba(224, 138, 44, 0.8);
    filter: brightness(1.15);
  }
}

@keyframes chartLineDraw {
  from { stroke-dashoffset: 1200; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes chartPointFadeIn {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.25); }
  100% { transform: scale(1); opacity: 1; }
}
.d3-animated-path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: chartLineDraw 1.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes profileTabSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-tab-content {
  animation: profileTabSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   ❄️ THERMAL & BATTERY SAVER MODE (MOBILE HARDWARE COOLING & POWER SAVER)
   ========================================================================== */
html.battery-saver #theme-bg-container,
.battery-saver #theme-bg-container,
#app.battery-saver #theme-bg-container {
  display: none !important;
}

/* Hardware containment and GPU layer promotion to eliminate CPU repaints */
html.battery-saver .screen,
html.battery-saver .board,
html.battery-saver .card,
html.battery-saver #screen-game,
html.battery-saver #screen-menu,
html.battery-saver #screen-collection {
  contain: layout paint;
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Disable continuous idle shimmer & pulse loops that churn mobile GPUs */
html.battery-saver .card-foil-shimmer,
html.battery-saver .holographic-glint,
html.battery-saver .mythic-glow-pulse,
html.battery-saver .all-aura-glow,
html.battery-saver .sovereign-badge.unlocked,
html.battery-saver .darkmatter-card-prism,
html.battery-saver .sleeve-prismatic {
  animation: none !important;
}

/* Simplify text-shadow and glowing box-shadows in battery saver */
html.battery-saver .title-wordmark,
html.battery-saver .logo-text,
html.battery-saver .sparkle,
html.battery-saver .floating-bux-coin {
  text-shadow: none !important;
  filter: none !important;
}

html.battery-saver .card:not(:hover):not(:active) {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
}

/* Mobile-first passive cooling overrides */
@media (max-width: 768px) {
  #theme-bg-container {
    contain: strict;
  }
}

/* ==========================================================================
   🌊 LIQUID GRADIENT BACKGROUND ENGINE FOR #theme-bg-container
   Animated, slow-moving organic liquid gradients using radial gradients
   and CSS keyframes to complement the liquid glass glassmorphism effect.
   ========================================================================== */
#theme-bg-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 15% 15%, rgba(6, 182, 212, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 70% 55% at 85% 75%, rgba(139, 92, 246, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse 65% 70% at 50% 110%, rgba(236, 72, 153, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 90% 75% at 50% 50%, rgba(15, 23, 42, 0.95) 0%, rgba(8, 11, 18, 0.98) 100%);
}

#theme-bg-container::before,
#theme-bg-container::after {
  content: '';
  position: absolute;
  inset: -35%;
  width: 170%;
  height: 170%;
  pointer-events: none;
  border-radius: 42% 58% 68% 32% / 38% 45% 55% 62%;
  will-change: transform;
}

#theme-bg-container::before {
  background:
    radial-gradient(circle at 28% 32%, rgba(56, 189, 248, 0.28) 0%, transparent 45%),
    radial-gradient(circle at 76% 24%, rgba(168, 85, 247, 0.26) 0%, transparent 48%),
    radial-gradient(circle at 66% 76%, rgba(244, 63, 94, 0.18) 0%, transparent 42%),
    radial-gradient(circle at 18% 78%, rgba(16, 185, 129, 0.18) 0%, transparent 40%);
  filter: blur(55px);
  -webkit-filter: blur(55px);
  animation: liquidMotionOne 28s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  opacity: 0.85;
}

#theme-bg-container::after {
  background:
    radial-gradient(circle at 58% 38%, rgba(99, 102, 241, 0.24) 0%, transparent 50%),
    radial-gradient(circle at 24% 66%, rgba(245, 158, 11, 0.18) 0%, transparent 42%),
    radial-gradient(circle at 82% 58%, rgba(14, 165, 233, 0.24) 0%, transparent 45%),
    radial-gradient(circle at 44% 86%, rgba(192, 132, 252, 0.22) 0%, transparent 45%);
  filter: blur(65px);
  -webkit-filter: blur(65px);
  animation: liquidMotionTwo 36s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate-reverse;
  opacity: 0.75;
}

@keyframes liquidMotionOne {
  0% {
    transform: translate3d(-6%, -4%, 0) rotate(0deg) scale(1);
    border-radius: 42% 58% 68% 32% / 38% 45% 55% 62%;
  }
  33% {
    transform: translate3d(5%, -7%, 0) rotate(120deg) scale(1.08);
    border-radius: 56% 44% 38% 62% / 60% 35% 65% 40%;
  }
  66% {
    transform: translate3d(-3%, 6%, 0) rotate(240deg) scale(0.96);
    border-radius: 35% 65% 52% 48% / 44% 58% 42% 56%;
  }
  100% {
    transform: translate3d(4%, 4%, 0) rotate(360deg) scale(1.04);
    border-radius: 50% 50% 40% 60% / 55% 45% 55% 45%;
  }
}

@keyframes liquidMotionTwo {
  0% {
    transform: translate3d(5%, 6%, 0) rotate(360deg) scale(1.05);
    border-radius: 52% 48% 35% 65% / 45% 55% 45% 55%;
  }
  33% {
    transform: translate3d(-7%, 3%, 0) rotate(220deg) scale(0.94);
    border-radius: 38% 62% 60% 40% / 52% 38% 62% 48%;
  }
  66% {
    transform: translate3d(4%, -6%, 0) rotate(100deg) scale(1.06);
    border-radius: 65% 35% 45% 55% / 40% 60% 40% 60%;
  }
  100% {
    transform: translate3d(-5%, -5%, 0) rotate(0deg) scale(1);
    border-radius: 46% 54% 58% 42% / 48% 52% 48% 52%;
  }
}

/* Light Theme Animated Liquid Gradient */
html.theme-light #theme-bg-container {
  background:
    radial-gradient(ellipse 80% 60% at 15% 15%, rgba(56, 189, 248, 0.2) 0%, transparent 65%),
    radial-gradient(ellipse 70% 55% at 85% 75%, rgba(245, 158, 11, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 65% 70% at 50% 110%, rgba(168, 85, 247, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 90% 75% at 50% 50%, #fbf9f4 0%, #ede7db 100%) !important;
}
html.theme-light #theme-bg-container::before {
  background:
    radial-gradient(circle at 28% 32%, rgba(56, 189, 248, 0.28) 0%, transparent 45%),
    radial-gradient(circle at 76% 24%, rgba(245, 158, 11, 0.24) 0%, transparent 48%),
    radial-gradient(circle at 66% 76%, rgba(236, 72, 153, 0.2) 0%, transparent 42%),
    radial-gradient(circle at 18% 78%, rgba(52, 211, 153, 0.22) 0%, transparent 40%) !important;
  opacity: 0.75;
}
html.theme-light #theme-bg-container::after {
  background:
    radial-gradient(circle at 58% 38%, rgba(129, 140, 248, 0.22) 0%, transparent 50%),
    radial-gradient(circle at 24% 66%, rgba(251, 146, 60, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 82% 58%, rgba(56, 189, 248, 0.24) 0%, transparent 45%),
    radial-gradient(circle at 44% 86%, rgba(192, 132, 252, 0.22) 0%, transparent 45%) !important;
  opacity: 0.65;
}

/* Custom theme dynamic background transparency overrides */
html[class*="theme-"]:not(.theme-dark):not(.theme-light) #theme-bg-container {
  background: transparent !important;
}
html[class*="theme-"]:not(.theme-dark):not(.theme-light) #theme-bg-container::before,
html[class*="theme-"]:not(.theme-dark):not(.theme-light) #theme-bg-container::after {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

/* Pause animations for battery-saver and prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #theme-bg-container::before,
  #theme-bg-container::after {
    animation: none !important;
  }
}
html.battery-saver #theme-bg-container::before,
html.battery-saver #theme-bg-container::after {
  animation: none !important;
  display: none !important;
}

/* Light theme overrides for Quests and Trial Tower */
html.theme-light .bounty-card,
html.theme-light .milestone-card-item,
html.theme-light .quest-row {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
}
html.theme-light .bounty-title,
html.theme-light .quest-title {
  color: #1e293b !important;
}
html.theme-light .bounty-summary-banner {
  background: rgba(224, 242, 254, 0.75) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}
html.theme-light .bounty-summary-text {
  color: #0369a1 !important;
}
html.theme-light .quests-2-tab-btn {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #57534e !important;
}
html.theme-light .quests-2-tab-btn.active {
  background: rgba(14, 165, 233, 0.12) !important;
  border-color: rgba(14, 165, 233, 0.5) !important;
  color: #0284c7 !important;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.25), inset 0 0 6px rgba(14, 165, 233, 0.08) !important;
}

/* ==========================================================================
   MODERN DECK BUILDER & CARD PICKER REDESIGN
   ========================================================================== */

.db-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.db-guide-details {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin: 10px 0 16px 0;
  padding: 10px 14px;
  transition: all 0.2s ease;
}
.db-guide-details[open] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}
.db-guide-summary {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  user-select: none;
  outline: none;
  display: list-item;
}
.db-guide-content {
  margin-top: 8px;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.45;
}

.db-top-controls {
  margin-bottom: 16px;
}
.db-top-controls .auto-fill-btn {
  width: 100%;
  padding: 12px;
  border-radius: 4px 14px 4px 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  transition: all 0.2s ease;
}
.db-top-controls .auto-fill-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}

.db-presets-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px 16px 4px 16px;
  padding: 14px;
  margin-bottom: 24px;
}

/* Active Deck Workspace */
.active-deck-workspace {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%), rgba(10, 15, 25, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px 20px 4px 20px;
  padding: 16px;
  margin-bottom: 28px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.active-deck-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.active-deck-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  color: #ffffff;
}
.active-deck-summary {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.8rem;
  color: #38bdf8;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.active-deck-grid-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.active-deck-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.active-deck-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
}
.count-pill {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #ffffff;
}

.active-deck-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
}

/* Individual Active Slots */
.active-card-slot {
  aspect-ratio: 1 / 1.15;
  border-radius: 4px 10px 4px 10px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  user-select: none;
}

.active-card-slot.empty {
  border: 1.5px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.01);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.2);
}
.active-card-slot.empty .empty-plus {
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1;
}

.active-card-slot.populated {
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%), rgba(15, 22, 36, 0.85);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.active-card-slot.populated.tier1 {
  border-color: rgba(56, 189, 248, 0.35);
  border-left: 3px solid #38bdf8;
}
.active-card-slot.populated.tier2 {
  border-color: rgba(52, 211, 153, 0.35);
  border-left: 3px solid #34d399;
}
.active-card-slot.populated.tier3 {
  border-color: rgba(248, 113, 113, 0.35);
  border-left: 3px solid #f87171;
}
.active-card-slot.populated.tier4 {
  border-color: rgba(251, 146, 60, 0.35);
  border-left: 3px solid #fb923c;
}
.active-card-slot.populated.spell {
  border-color: rgba(168, 85, 247, 0.35);
  border-left: 3px solid #a855f7;
}
.active-card-slot.populated.chip {
  border-color: rgba(234, 179, 8, 0.35);
  border-left: 3px solid #eab308;
}

.active-card-slot.populated:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}

.active-card-tag {
  font-size: 0.52rem;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
}
.active-card-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.65rem;
  line-height: 1.2;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-card-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.85);
  border: none;
  color: #ffffff;
  font-size: 0.58rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
  z-index: 2;
}
.active-card-slot.populated:hover .active-card-remove {
  opacity: 1;
}
.active-card-remove:hover {
  background: #ef4444;
  transform: scale(1.15);
}

/* Category Tab Panel */
.deck-pool-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

.pool-category-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.pool-tab-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.84rem;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 0 !important; /* Strictly rectangular */
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.pool-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}
.pool-tab-btn:active {
  background: rgba(56, 189, 248, 0.24) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.6) !important;
  transform: scale(0.97);
}
.pool-tab-btn.active {
  color: #ffffff !important;
  background: rgba(56, 189, 248, 0.2) !important;
  border: 1px solid #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45), inset 0 0 8px rgba(56, 189, 248, 0.25) !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.tab-icon {
  font-size: 0.95rem;
}

/* Pool layout tools & inputs overrides */
.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
}
.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.45);
}
.search-input-wrap input {
  width: 100%;
  padding-left: 28px !important;
}

.filter-select-wrap {
  position: relative;
  min-width: 140px;
}
.filter-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.45);
}
.filter-select-wrap select {
  width: 100%;
  padding-left: 28px !important;
  background-color: rgba(0, 0, 0, 0.35);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px 14px 4px 14px;
  padding: 10px 12px;
  font-size: 0.85rem;
  cursor: pointer;
}
.filter-select-wrap select:focus {
  border-color: #38bdf8;
  outline: none;
}

/* Pool item selected count badge floating on pool card */
.dcard-count-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  border: 1.5px solid #ffffff;
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 800;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 10;
}
.dcard-count-badge.spell {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.db-footer-row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  justify-content: flex-end;
  flex-wrap: wrap-reverse;
}
.db-footer-row button {
  min-width: 140px;
}

/* Light Theme Enhancements for modern deck builder */
html.theme-light .db-guide-details {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
html.theme-light .db-guide-summary {
  color: #1c1917 !important;
}
html.theme-light .db-guide-content {
  color: #44403c !important;
}

html.theme-light .db-top-controls .auto-fill-btn {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #1c1917 !important;
}
html.theme-light .db-top-controls .auto-fill-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
}

html.theme-light .db-presets-panel {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html.theme-light .active-deck-workspace {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}
html.theme-light .active-deck-title {
  color: #1c1917 !important;
}
html.theme-light .active-deck-summary {
  color: #0284c7 !important;
}
html.theme-light .count-pill {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1c1917 !important;
}

html.theme-light .active-card-slot.empty {
  border-color: rgba(0, 0, 0, 0.12) !important;
  background: rgba(0, 0, 0, 0.01) !important;
  color: rgba(0, 0, 0, 0.25) !important;
}
html.theme-light .active-card-slot.populated {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}
html.theme-light .active-card-name {
  color: #1c1917 !important;
}
html.theme-light .active-card-tag {
  color: #78716c !important;
}

html.theme-light .pool-category-tabs {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html.theme-light .pool-tab-btn {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #57534e !important;
}
html.theme-light .pool-tab-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1c1917 !important;
}
html.theme-light .pool-tab-btn.active {
  color: #0284c7 !important;
  background: rgba(14, 165, 233, 0.12) !important;
  border-color: rgba(14, 165, 233, 0.5) !important;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.25), inset 0 0 6px rgba(14, 165, 233, 0.08) !important;
}

html.theme-light .filter-select-wrap select {
  background-color: #ffffff !important;
  color: #1c1917 !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
}
html.theme-light .filter-select-wrap select:focus {
  border-color: #0284c7 !important;
}
html.theme-light .search-icon,
html.theme-light .filter-icon {
  color: rgba(0, 0, 0, 0.45) !important;
}

html.theme-light .dcard-count-badge {
  border-color: #ffffff !important;
}

/* Tier separator dividers inside card pool */
.tier-separator {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 10px 0;
  user-select: none;
}
.tier-separator-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.tier-separator-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}
.tier-separator-text.tier1 { background: rgba(56, 189, 248, 0.12); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.25); }
.tier-separator-text.tier2 { background: rgba(52, 211, 153, 0.12); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.25); }
.tier-separator-text.tier3 { background: rgba(248, 113, 113, 0.12); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.25); }
.tier-separator-text.tier4 { background: rgba(251, 146, 60, 0.12); color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.25); }

html.theme-light .tier-separator-line {
  background: rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   GRAND UI & UX REDESIGN SYSTEM
   Complete cohesive visual overhaul across every game surface:
   - Modern, high-polish digital card battler aesthetic
   - Ergonomic border radii (12px cards, 16px menu cards, 10px buttons, 20px modals)
   - Luminous glassmorphism, specular highlights, and ambient glow
   - Tactile card interaction physics, holographic reflections, and stat shields
   - High-impact combat HUD with pulsating Ready/End-Turn CTA & power meter
   - Pristine typography, contrast hierarchy, and responsive polish
   ========================================================================== */

/* 1. Global Reset of Obsolete Clipping and Scanline Overlays */
.card,
.sc-card,
.menu-card,
.diff-card,
.unit-dcard,
.deck-card,
.shop-card,
.cosmetic-card,
.pack-card,
.packopen-card,
.tower-mission-card,
.tower-stat-chip,
.settings-card-item,
.settings-danger-card,
.modal-card,
.popup-card,
#patchnotes-card,
#quests-card,
#themes-card,
#options-card,
#gameover-card,
#confirm-card,
#collection-book-card,
#player-name-card,
#stats-hub-card,
.profile-panel,
#vr-prompt-card,
.match-pause-card,
button,
.btn,
.primary-btn,
.secondary-btn,
.glass-pill-btn,
.mode-btn,
.tab-btn,
.stepper-btn,
.action-btn,
.modal-close,
.resume-btn,
.danger-outline-btn,
.shop-buy-btn,
.theme-btn,
.deck-tab-btn,
.quests-2-tab-btn,
.options-tab-btn,
.settings-pill-toggle,
#profile-avatar-btn,
#bux-counter,
.slot,
.drag-ghost {
  clip-path: none !important;
  filter: none !important;
}

/* Remove button pseudo scanline overlays that obstructed readability */
.primary-btn::before,
.secondary-btn::before,
.glass-pill-btn::before,
.mode-btn::before,
.action-btn::before,
.stepper-btn::before,
.resume-btn::before,
.danger-outline-btn::before,
.shop-buy-btn::before,
.theme-btn::before,
.deck-tab-btn::before,
.quests-2-tab-btn::before,
.options-tab-btn::before,
.menu-footer .link-btn::before,
#btn-save-deck-preset::before,
#shop-code-redeem-btn::before,
#btn-xr-back::before {
  display: none !important;
}

/* 2. Unified Ergonomic Border Radii */
.card,
.sc-card,
.unit-dcard,
.deck-card,
#deck-row .card,
#hand-row .card,
.shop-card,
.cosmetic-card,
.pack-card,
.packopen-card,
.slot,
.drag-ghost {
  border-radius: 12px !important;
}

.menu-card,
.diff-card,
.tower-mission-card,
.settings-card-item {
  border-radius: 16px !important;
}

.primary-btn,
.secondary-btn,
.action-btn,
.resume-btn,
.danger-outline-btn,
.shop-buy-btn,
.theme-btn,
.deck-tab-btn,
.quests-2-tab-btn,
.options-tab-btn,
#btn-save-deck-preset,
#btn-deck-builder-confirm,
.menu-card-back,
#btn-xr-back,
#shop-code-redeem-btn {
  border-radius: 10px !important;
}

.mode-btn,
.glass-pill-btn,
.settings-pill-toggle,
.tower-stat-chip,
.pool-tab-btn,
#bux-counter {
  border-radius: 9999px !important;
}

.modal-card,
.popup-card,
#patchnotes-card,
#quests-card,
#themes-card,
#options-card,
#gameover-card,
#confirm-card,
#collection-book-card,
#player-name-card,
#stats-hub-card,
.profile-panel,
#vr-prompt-card,
.match-pause-card {
  border-radius: 20px !important;
}

.stepper-btn,
.modal-close,
.primary-btn.small {
  border-radius: 8px !important;
}

#profile-avatar-btn {
  border-radius: 50% !important;
}

/* 3. Premier Combat Card Design System */
.card {
  position: relative;
  overflow: hidden;
  border-radius: 12px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  padding: 8px 9px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  color: #ffffff;
  font-family: var(--font-body);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease !important;
  background-size: cover;
  background-position: center;
}

/* Tier Colorways & Luminous Faction Themes */
.card.tier1 {
  background: linear-gradient(150deg, #1e3a8a 0%, #172554 45%, #0f172a 100%) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  --card-color: #38bdf8;
}
.card.tier2 {
  background: linear-gradient(150deg, #065f46 0%, #064e3b 45%, #022c22 100%) !important;
  border-color: rgba(52, 211, 153, 0.45) !important;
  --card-color: #34d399;
}
.card.tier3 {
  background: linear-gradient(150deg, #991b1b 0%, #7f1d1d 45%, #450a0a 100%) !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
  --card-color: #f87171;
}
.card.tier4 {
  background: linear-gradient(150deg, #92400e 0%, #78350f 45%, #451a03 100%) !important;
  border-color: rgba(251, 191, 36, 0.55) !important;
  --card-color: #fbbf24;
}

/* Card Hover 3D Lift & Radiant Edge Glow */
.card:hover {
  transform: translateY(-8px) scale(1.04) rotate(-0.5deg) !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 16px 32px -4px rgba(0, 0, 0, 0.7),
              0 0 20px -2px var(--card-color, #38bdf8),
              inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
  z-index: 50 !important;
}

/* Card Name & Typography */
.card-name {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #ffffff !important;
}

.tier-glyph {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.78em !important;
  opacity: 0.9 !important;
  color: var(--card-color, #ffffff) !important;
}

/* Card Ability Badge */
.card-ability {
  font-size: 0.62rem !important;
  color: #e2e8f0 !important;
  line-height: 1.25 !important;
  margin: 3px 0 !important;
  padding: 2px 4px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border-radius: 4px !important;
  border-left: 2px solid var(--card-color, #38bdf8) !important;
  max-height: 2.8em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Tactile Stat Badges */
.card-stats {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.76rem !important;
  font-variant-numeric: tabular-nums !important;
  margin-top: 4px !important;
  gap: 3px !important;
}

.card-stats .hp {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(185, 28, 28, 0.5) 100%) !important;
  border: 1px solid rgba(248, 113, 113, 0.5) !important;
  color: #fecaca !important;
  padding: 1px 5px !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.card-stats .dmg {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(180, 83, 9, 0.5) 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.5) !important;
  color: #fef08a !important;
  padding: 1px 5px !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.card-stats .sp {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25) 0%, rgba(2, 132, 199, 0.45) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #bae6fd !important;
  padding: 1px 5px !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Card States: Defending, Attacking, Low HP */
.card.defending {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.6), inset 0 0 12px rgba(56, 189, 248, 0.3) !important;
}
.card.defending::after {
  content: '🛡️';
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.9rem;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.9));
  animation: shieldPulse 1.8s ease-in-out infinite;
}
@keyframes shieldPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.15); opacity: 1; }
}

.card.attacking-flag {
  border-color: #f59e0b !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.6) !important;
}

.card.low-hp {
  animation: heartbeatAlert 1.2s ease-in-out infinite !important;
}
@keyframes heartbeatAlert {
  0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); border-color: rgba(239, 68, 68, 0.6); }
  50% { box-shadow: 0 0 22px rgba(239, 68, 68, 0.85); border-color: #ef4444; }
}

/* Blueprint Cards (Deck hand recipes) */
.card.blueprint-card {
  opacity: 0.72 !important;
  border-style: dashed !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  filter: saturate(0.8) !important;
}
.card.blueprint-card:hover {
  opacity: 0.95 !important;
  filter: saturate(1) !important;
}

/* Battlefield Slots */
.slot {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px !important;
  min-height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.slot.targetable {
  border: 2px solid #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.45), inset 0 0 10px rgba(56, 189, 248, 0.2) !important;
  animation: targetSlotBreathe 1.5s ease-in-out infinite !important;
}
@keyframes targetSlotBreathe {
  0%, 100% { box-shadow: 0 0 14px rgba(56, 189, 248, 0.35); }
  50% { box-shadow: 0 0 24px rgba(56, 189, 248, 0.65); }
}

/* 4. High-Impact Combat Action HUD */
/* Phase Bar */
#phase-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 16px !important;
  background: rgba(15, 22, 36, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  margin: 6px auto 10px auto !important;
  max-width: 820px !important;
  width: calc(100% - 16px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

#phase-label {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #38bdf8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#round-label {
  display: none !important;
}

.match-top-right-round {
  position: absolute !important;
  top: 10px !important;
  right: 14px !important;
  z-index: 500 !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #38bdf8 !important;
  background: rgba(15, 23, 42, 0.82) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  pointer-events: none !important;
}

@media (max-width: 480px) {
  .match-top-right-round {
    top: 6px !important;
    right: 8px !important;
    font-size: 0.70rem !important;
    padding: 3px 8px !important;
  }
}

/* Pulsating Hero End-Turn / Ready Button */
#btn-ready {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #0f172a !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.03em !important;
  padding: 10px 22px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation: readyBtnPulse 2s ease-in-out infinite !important;
}
@keyframes readyBtnPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4), 0 0 0 rgba(245, 158, 11, 0); }
  50% { box-shadow: 0 6px 24px rgba(245, 158, 11, 0.65), 0 0 16px rgba(245, 158, 11, 0.45); transform: translateY(-1px); }
}
#btn-ready:hover {
  transform: translateY(-2px) scale(1.04) !important;
  filter: brightness(1.1) !important;
  box-shadow: 0 8px 28px rgba(245, 158, 11, 0.6) !important;
}
#btn-ready:active {
  transform: translateY(1px) scale(0.98) !important;
}

/* Power Bar & Health Balance Gauge */
#power-bar {
  display: flex !important;
  height: 10px !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  margin: 4px 4px 10px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
#power-bar-you {
  background: linear-gradient(90deg, #0284c7, #38bdf8) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6) !important;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#power-bar-opp {
  background: linear-gradient(90deg, #f59e0b, #ef4444) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6) !important;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Mode Bar & Tactile Controls */
#mode-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 4px !important;
  flex-wrap: wrap !important;
}
.mode-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #e2e8f0 !important;
  padding: 7px 16px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mode-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1.5px) !important;
  color: #ffffff !important;
}
.mode-btn.active {
  background: rgba(56, 189, 248, 0.18) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35) !important;
}

/* 5. Main Menu & Navigation Grid Polish */
.game-title {
  text-align: center !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  line-height: 0.95 !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
.title-word {
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 55%, #94a3b8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.6)) !important;
}

.menu-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(16, 24, 40, 0.82) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  cursor: pointer !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease !important;
}
.menu-card:hover {
  transform: translateY(-4px) scale(1.015) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 18px 36px -6px rgba(0, 0, 0, 0.65), 0 0 20px -4px var(--card-color, #38bdf8), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
}

/* Floating Navigation Dock (Concentric Squircle Housing) */
.menu-footer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(10, 15, 26, 0.90) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 20px !important; /* Exactly concentric with 16px button border-radius + 4px padding */
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  margin: 18px auto 12px auto !important;
  width: fit-content !important;
  max-width: calc(100% - 20px) !important;
  white-space: nowrap !important;
}

.menu-footer .footer-dot {
  display: none !important;
}

/* Very Circular Square (Squircle) Button Design */
.menu-footer .glass-pill-btn,
.footer-squircle-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 70px !important;
  height: 64px !important;
  min-width: 70px !important;
  min-height: 64px !important;
  padding: 8px 6px 6px 6px !important;
  border-radius: 16px !important; /* Perfectly matched to 20px housing */
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(16, 24, 42, 0.88) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  position: relative !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease,
              background 0.2s ease !important;
}

.menu-footer .glass-pill-btn:hover,
.footer-squircle-btn:hover {
  transform: translateY(-4px) scale(1.05) !important;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 100%), rgba(22, 32, 54, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.65), 0 0 18px -2px rgba(56, 189, 248, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.45) !important;
}

.menu-footer .glass-pill-btn:active,
.footer-squircle-btn:active {
  transform: translateY(1px) scale(0.96) !important;
}

/* SVG at the Top */
.menu-footer .glass-btn-icon,
.footer-squircle-btn .glass-btn-icon {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.2 !important;
  flex-shrink: 0 !important;
  color: #38bdf8 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.menu-footer .glass-pill-btn:hover .glass-btn-icon,
.footer-squircle-btn:hover .glass-btn-icon {
  transform: scale(1.12) !important;
  color: #7dd3fc !important;
}

/* Text Underneath */
.menu-footer .glass-pill-btn span:not(.new-badge),
.footer-squircle-btn span:not(.new-badge) {
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #cbd5e1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  line-height: 1 !important;
  text-align: center !important;
  transition: color 0.2s ease !important;
}

.menu-footer .glass-pill-btn:hover span:not(.new-badge),
.footer-squircle-btn:hover span:not(.new-badge) {
  color: #ffffff !important;
}

/* Positioned Notification Badge for Version (Directly Over Button) */
.footer-btn-wrapper {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#version-badge {
  position: absolute !important;
  top: -9px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 50 !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.60rem !important;
  letter-spacing: 0.05em !important;
  padding: 2px 7px !important;
  line-height: 1.1 !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6), 0 0 10px rgba(245, 158, 11, 0.6) !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  animation: versionBadgePulse 1.6s ease-in-out infinite !important;
}

@keyframes versionBadgePulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.6), 0 0 8px rgba(245, 158, 11, 0.4);
  }
  50% {
    transform: translateX(-50%) scale(1.08);
    box-shadow: 0 5px 16px rgba(239, 68, 68, 0.85), 0 0 14px rgba(245, 158, 11, 0.8);
  }
}

/* Mobile Single-Line Circular Squares (Squircles) */
@media (max-width: 680px) {
  .menu-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 3px !important;
    border-radius: 17px !important; /* Concentric 14px mobile squircle buttons + 3px padding */
    margin: 14px auto 10px auto !important;
    width: fit-content !important;
    max-width: calc(100% - 12px) !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  #version-badge {
    top: -8px !important;
    font-size: 0.54rem !important;
    padding: 1.5px 5px !important;
  }
  .menu-footer::-webkit-scrollbar {
    display: none !important;
  }
  .menu-footer .glass-pill-btn,
  .footer-squircle-btn {
    width: 60px !important;
    height: 56px !important;
    min-width: 60px !important;
    min-height: 56px !important;
    border-radius: 14px !important;
    padding: 6px 4px 5px 4px !important;
    gap: 3px !important;
  }
  .menu-footer .glass-btn-icon,
  .footer-squircle-btn .glass-btn-icon {
    width: 18px !important;
    height: 18px !important;
  }
  .menu-footer .glass-pill-btn span:not(.new-badge),
  .footer-squircle-btn span:not(.new-badge) {
    font-size: 0.64rem !important;
  }
}

@media (max-width: 380px) {
  .menu-footer {
    gap: 2px !important;
    padding: 2px !important;
    border-radius: 14px !important;
    max-width: calc(100% - 8px) !important;
  }
  .menu-footer .glass-pill-btn,
  .footer-squircle-btn {
    width: 52px !important;
    height: 50px !important;
    min-width: 52px !important;
    min-height: 50px !important;
    border-radius: 12px !important;
    padding: 5px 2px 4px 2px !important;
    gap: 2px !important;
  }
  .menu-footer .glass-btn-icon,
  .footer-squircle-btn .glass-btn-icon {
    width: 16px !important;
    height: 16px !important;
  }
  .menu-footer .glass-pill-btn span:not(.new-badge),
  .footer-squircle-btn span:not(.new-badge) {
    font-size: 0.58rem !important;
  }
}

/* 6. Universal Modals & Overlays */
#quests-overlay,
#collection-book-overlay,
#themes-overlay,
#player-name-overlay,
#gameover-overlay,
#confirm-overlay,
#options-overlay,
#patchnotes-overlay,
#secret-menu-overlay {
  background: rgba(5, 8, 16, 0.84) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

#quests-card,
#themes-card,
#options-card,
#patchnotes-card,
#gameover-card,
#confirm-card,
#collection-book-card,
#player-name-card,
#stats-hub-card,
.profile-panel,
#vr-prompt-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(16, 24, 40, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  color: var(--text) !important;
}

.modal-close {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #cbd5e1 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.modal-close:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

/* Smooth Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   ANIMATED PARTICLE AVATARS DESIGN SYSTEM
   ========================================================================== */
#profile-avatar-btn {
  position: relative !important;
  overflow: visible !important;
}
.hud-avatar-particle-canvas {
  position: absolute !important;
  top: -8px !important;
  left: -8px !important;
  width: calc(100% + 16px) !important;
  height: calc(100% + 16px) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
#profile-avatar-letter {
  position: relative !important;
  z-index: 2 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

.profile-hero-avatar {
  position: relative !important;
  overflow: visible !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}
.profile-hero-avatar:hover {
  transform: scale(1.06) !important;
}
.profile-hero-particle-canvas {
  position: absolute !important;
  top: -14px !important;
  left: -14px !important;
  width: calc(100% + 28px) !important;
  height: calc(100% + 28px) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
#profile-hero-avatar-letter {
  position: relative !important;
  z-index: 2 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9) !important;
}

/* Avatars Tab Header */
.avatars-tab-header {
  margin-bottom: 16px;
}
.avatars-tab-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: #f8fafc;
}
.avatars-tab-sub {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 4px;
}

/* Featured Active Avatar Showcase Card */
.particle-avatar-featured-showcase {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
@media (max-width: 600px) {
  .particle-avatar-featured-showcase {
    flex-direction: column;
    text-align: center;
  }
}
.pafs-canvas-box {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(10, 15, 26, 0.85);
  border: 2px solid rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
}
#pafs-featured-canvas {
  width: 90px;
  height: 90px;
  border-radius: 50%;
}
.pafs-details {
  flex: 1;
  min-width: 0;
}
.pafs-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #38bdf8;
  padding: 3px 9px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  margin-bottom: 6px;
}
.pafs-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
}
.pafs-desc {
  font-size: 0.80rem;
  color: #cbd5e1;
  line-height: 1.45;
  margin: 4px 0 10px;
}
.pafs-status-chip {
  font-size: 0.72rem;
  font-weight: 700;
  color: #4ade80;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Particle Avatars Selection Grid */
.particle-avatars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.particle-avatar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 12px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  position: relative;
}
.particle-avatar-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(56, 189, 248, 0.35);
}
.particle-avatar-card.equipped {
  border-color: #38bdf8 !important;
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.14) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6), 0 0 18px -2px rgba(56, 189, 248, 0.5) !important;
}
.pac-canvas-wrapper {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(10, 15, 26, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.pac-preview-canvas {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.pac-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.pac-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.pac-name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: #f8fafc;
}
.pac-element-tag {
  font-size: 0.60rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pac-desc {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
  min-height: 38px;
  margin-bottom: 10px;
}
.pac-equip-btn {
  width: 100%;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pac-equip-btn:not(.active) {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.pac-equip-btn:not(.active):hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
.pac-equip-btn.active {
  background: #38bdf8;
  color: #0f172a;
  border: 1px solid #7dd3fc;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
}

/* ==========================================================================
   2.5D STORY MODE: CHRONICLES OF MEHRBOD
   ========================================================================== */
#screen-story-mode {
  padding: 1.5rem 1rem;
  max-width: 1240px;
  margin: 0 auto;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
}

.story-mode-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.story-mode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.story-title-cluster {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.story-main-heading {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.story-sub-heading {
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.story-daily-bounty-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(180, 83, 9, 0.28) 100%);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);
  backdrop-filter: blur(12px);
  margin-top: 4px;
}

.sdbb-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sdbb-badge {
  font-size: 0.65rem;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.06em;
}

.sdbb-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
}

.sdbb-mutator {
  font-size: 0.75rem;
  color: #fef08a;
  opacity: 0.9;
}

.sdbb-btn {
  padding: 0.45rem 0.95rem;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.sdbb-btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.5);
}

.sdbb-btn.completed {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
  cursor: default;
}

.story-chapter-tabs-bar {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.story-ch-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #94a3b8;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
}

.story-ch-tab:hover {
  background: rgba(30, 41, 59, 0.8);
  color: #f8fafc;
  border-color: rgba(56, 189, 248, 0.4);
}

.story-ch-tab.active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(3, 105, 161, 0.35) 100%);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.3);
}

.story-ch-tab .ch-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #10b981;
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 800;
}

.story-viewport-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 900px) {
  .story-viewport-grid {
    grid-template-columns: 1fr;
  }
}

.story-canvas-container {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #090d16;
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#story-2d5-canvas {
  width: 100%;
  height: 440px;
  display: block;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.story-canvas-floating-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
}

.scfc-btn {
  width: 36px;
  height: 36px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.scfc-btn:hover {
  background: rgba(56, 189, 248, 0.3);
  border-color: #38bdf8;
  transform: scale(1.05);
}

.scfc-btn:active {
  transform: scale(0.95);
}

@media (max-width: 768px) {
  #screen-story-mode {
    padding: 0.75rem 0.5rem;
    min-height: auto;
  }

  .story-mode-layout {
    gap: 0.85rem;
  }

  .story-main-heading {
    font-size: 1.25rem;
  }

  .story-chapter-tabs-bar {
    gap: 0.35rem;
    -webkit-overflow-scrolling: touch;
  }

  .story-ch-tab {
    padding: 0.45rem 0.85rem;
    font-size: 0.78rem;
    min-height: 44px;
  }

  .story-canvas-container {
    min-height: 300px;
    height: 320px;
  }

  #story-2d5-canvas {
    height: 320px;
  }

  .story-canvas-hint {
    font-size: 0.68rem;
    padding: 0.25rem 0.65rem;
    bottom: 8px;
  }

  .story-inspector-card {
    padding: 1rem;
    gap: 0.75rem;
  }

  .story-node-title {
    font-size: 1.1rem;
  }
}

.story-canvas-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  font-size: 0.75rem;
  color: #94a3b8;
  backdrop-filter: blur(8px);
  pointer-events: none;
  white-space: nowrap;
}

.story-inspector-panel {
  display: flex;
  flex-direction: column;
}

.story-inspector-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
}

.story-inspector-card.boss-node {
  border-color: rgba(248, 113, 113, 0.4);
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.15);
}

.story-inspector-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.story-node-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #38bdf8;
  letter-spacing: 0.05em;
}

.story-node-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin-top: 2px;
}

.story-node-status-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 12px;
}

.story-node-status-badge.cleared {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.story-node-status-badge.ready {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.story-node-status-badge.locked {
  background: rgba(148, 163, 184, 0.1);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.story-inspector-dialogue-preview {
  display: flex;
  gap: 0.75rem;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.sid-avatar {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sid-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sid-speaker {
  font-size: 0.75rem;
  font-weight: 700;
  color: #cbd5e1;
}

.sid-text {
  font-size: 0.8rem;
  font-style: italic;
  color: #94a3b8;
  line-height: 1.35;
}

.story-enemy-brief {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: #cbd5e1;
}

.seb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.seb-difficulty {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 8px;
}

.difficulty-easy { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.difficulty-medium { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.difficulty-hard { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.difficulty-expert { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.difficulty-master { background: rgba(192, 132, 252, 0.15); color: #c084fc; }

.seb-mutator {
  color: #38bdf8;
  font-size: 0.78rem;
  margin-top: 2px;
}

.story-rewards-box {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.srb-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #facc15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.srb-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.srb-item {
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.25);
  color: #fef08a;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 8px;
}

.story-deploy-btn {
  width: 100%;
  padding: 0.75rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.story-deploy-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(71, 85, 105, 0.5);
  border-color: rgba(71, 85, 105, 0.7);
}

/* ==========================================================================
   MOBILE RESPONSIVE CONTAINMENT & TYPOGRAPHY SCALING
   ========================================================================== */
@media (max-width: 640px) {
  #app,
  #main-container,
  .screen {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Prevent menu-grid from overflowing small screens */
  .menu-grid,
  .menu-grid.two-col,
  .menu-grid.three-col {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    margin: 14px auto 10px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .menu-card {
    padding: 12px 14px !important;
    min-height: 60px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .menu-card-title {
    font-size: 1.05rem !important;
  }

  .menu-card-sub {
    font-size: 0.78rem !important;
  }

  .menu-icon-pod {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  /* Fluid typography scale for headers */
  .screen > h2,
  .tower-page-heading {
    font-size: clamp(1.2rem, 5vw, 1.55rem) !important;
    letter-spacing: -0.01em !important;
  }

  .sub {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }

  /* Footer & Action Controls */
  .menu-footer {
    max-width: calc(100% - 12px) !important;
    padding: 4px 6px !important;
    gap: 4px !important;
    margin: 14px auto 8px auto !important;
  }

  .glass-pill-btn {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
    gap: 5px !important;
  }

  .screen-sub-actions {
    gap: 8px !important;
    margin-top: 12px !important;
  }
}

/* Dedicated mobile hero font size media query */
@media (max-width: 600px) {
  .game-title {
    font-size: clamp(2.6rem, 11.5vw, 3.8rem) !important;
    line-height: 0.98 !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 12px !important;
  }

  .title-letter {
    font-size: 1em !important;
    letter-spacing: 0.02em !important;
  }

  /* Enhanced touch target padding for menu-card buttons on mobile */
  .menu-card {
    padding: 16px 18px !important;
    min-height: 68px !important;
    gap: 12px !important;
    margin-bottom: 6px !important;
  }
}

@media (max-width: 420px) {
  #app,
  #main-container,
  .screen {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .game-title {
    font-size: clamp(2.1rem, 9.5vw, 3.0rem) !important;
  }

  .title-letter {
    font-size: 1em !important;
  }

  .menu-card {
    padding: 10px 12px !important;
  }

  .menu-card-title {
    font-size: 0.98rem !important;
  }

  .glass-pill-btn {
    padding: 5px 10px !important;
    font-size: 0.74rem !important;
  }
}