/* =============================================
   QUICKPLAY ARCADE — STYLES
   ============================================= */

/* --- RESET & BASE --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden !important;
  overscroll-behavior: none !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: none !important;
}
body {
  font-family: 'Outfit', sans-serif;
  background: #0a0a12;
  color: #fff;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden !important;
  padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)); /* space for bottom nav + safe area */
  overscroll-behavior: none !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: none !important;
  
  /* Disable highlights and selections for native-app experience */
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Explicitly re-enable selections on inputs and editable elements so typing and selection still work perfectly */
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* --- TOKENS --- */
:root {
  --primary: #FF6B6B;
  --primary-2: #FF8E53;
  --accent: #A78BFA;
  --accent-2: #38BDF8;
  --green: #34D399;
  --bg: #0a0a12;
  --bg-card: #14141f;
  --bg-card2: #1a1a2e;
  --border: rgba(255,255,255,0.08);
  --text-muted: rgba(255,255,255,0.55);
  --radius: 20px;
  --radius-sm: 12px;
  --transition: 0.22s cubic-bezier(.4,0,.2,1);
}

/* --- UTILITY --- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.hidden { display: none !important; }
.gradient-text {
  background: linear-gradient(135deg, #FF6B6B, #A78BFA, #38BDF8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- BUTTONS --- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Outfit', sans-serif; font-weight: 700;
  border: none; border-radius: 50px; cursor: pointer;
  text-decoration: none; transition: var(--transition);
  white-space: nowrap;
}
.btn--primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 4px 24px rgba(255,107,107,.4);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255,107,107,.5); }
.btn--outline {
  background: transparent;
  border: 2px solid rgba(255,255,255,.25);
  color: #fff;
}
.btn--outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
.btn--random {
  background: linear-gradient(135deg, #A78BFA, #38BDF8);
  color: #fff; font-weight: 700;
  padding: 8px 18px; border-radius: 50px; font-size: 0.85rem;
  border: none; cursor: pointer; transition: var(--transition);
}
.btn--random:hover { transform: translateY(-2px) scale(1.04); }
.btn--sm  { padding: 8px 18px;  font-size: 0.85rem; }
.btn--lg  { padding: 15px 30px; font-size: 1.05rem; }

/* --- NAV --- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,18,.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top, 0px);
}
.nav__inner {
  max-width: 1100px; margin: 0 auto; padding: 0 16px;
  height: 64px; display: flex; align-items: center; gap: 16px;
}
.nav__logo {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Nunito', sans-serif; font-size: 1.2rem;
  color: #fff; text-decoration: none; font-weight: 800;
  flex-shrink: 0;
}
.nav__logo strong { color: var(--primary); }
.nav__logo-icon { font-size: 1.4rem; }
.nav__links { display: flex; gap: 6px; margin-left: auto; }
.nav__link {
  color: var(--text-muted); text-decoration: none;
  padding: 8px 16px; border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: 0.9rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; align-items: center; gap: 6px;
}
.nav__link:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.nav__link.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(167,139,250,0.12), rgba(129,140,248,0.12));
  border: 1.5px solid rgba(167,139,250,0.22) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), 0 4px 15px rgba(167,139,250,0.08);
}
.nav__hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 6px; margin-left: auto;
}
.nav__hamburger span {
  display: block; width: 24px; height: 2px;
  background: #fff; border-radius: 2px; transition: var(--transition);
}
.nav__mobile-menu {
  display: none; flex-direction: column;
  padding: 12px 16px 20px;
  border-top: 1px solid var(--border);
  gap: 4px;
}
.nav__mobile-menu.open { display: flex; }
.nav__mobile-link {
  color: #fff; text-decoration: none;
  padding: 12px 16px; border-radius: 12px;
  font-weight: 600; font-size: 1rem;
  transition: var(--transition);
}
.nav__mobile-link:hover { background: rgba(255,255,255,.08); }

@media (max-width: 768px) {
  .nav__links { display: none; }
  .btn--random { display: none; }
  .nav__hamburger { display: flex; }
}

/* --- HERO --- */
.hero {
  position: relative; overflow: hidden;
  padding: 80px 16px 100px;
  text-align: center;
  background: radial-gradient(ellipse at 60% 0%, rgba(167,139,250,.18) 0%, transparent 60%),
              radial-gradient(ellipse at 20% 80%, rgba(255,107,107,.15) 0%, transparent 50%),
              var(--bg);
}
.hero__bg-orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .35;
}
.orb--1 { width: 400px; height: 400px; background: #FF6B6B; top: -150px; right: -100px; animation: orb-drift 8s ease-in-out infinite alternate; }
.orb--2 { width: 300px; height: 300px; background: #A78BFA; bottom: -100px; left: -80px; animation: orb-drift 10s ease-in-out infinite alternate-reverse; }
.orb--3 { width: 250px; height: 250px; background: #38BDF8; top: 40%; left: 40%; animation: orb-drift 12s ease-in-out infinite alternate; }
@keyframes orb-drift { from { transform: translate(0,0) scale(1); } to { transform: translate(30px,20px) scale(1.1); } }

.hero__content { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.hero__badge {
  display: inline-block;
  background: rgba(255,107,107,.18); border: 1px solid rgba(255,107,107,.35);
  color: var(--primary); padding: 6px 16px; border-radius: 50px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; margin-bottom: 20px;
}
.hero__title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(3rem, 12vw, 6rem);
  font-weight: 900; line-height: 1.0;
  letter-spacing: -2px; margin-bottom: 20px;
}
.hero__subtitle {
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  color: var(--text-muted); margin-bottom: 36px; font-weight: 400;
}
.hero__cta-group { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.hero__social-hook {
  color: var(--text-muted); font-size: 0.9rem; font-weight: 600;
}

/* pulse ring on CTA */
.pulse-ring { position: relative; }
.pulse-ring::before {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50px; border: 2px solid rgba(255,107,107,.5);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:.6; transform:scale(1); } 50% { opacity:0; transform:scale(1.12); } }

/* floating cards */
.hero__floating-cards {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.float-card {
  position: absolute; background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 12px 14px;
  font-size: 1.6rem; text-align: center; line-height: 1.4;
  animation: float 6s ease-in-out infinite;
}
.float-card small { font-size: 0.65rem; color: var(--text-muted); font-family: 'Outfit', sans-serif; display: block; }
.float-card--1 { top: 15%; left: 4%;  animation-delay: 0s; }
.float-card--2 { top: 55%; left: 2%;  animation-delay: 1.5s; }
.float-card--3 { top: 12%; right: 3%; animation-delay: 0.8s; }
.float-card--4 { top: 58%; right: 2%; animation-delay: 2.2s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (max-width: 600px) { .hero__floating-cards { display: none; } }

/* --- CATEGORIES --- */
.categories { padding: 32px 0 12px; }
.categories__scroll {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.categories__scroll::-webkit-scrollbar { display: none; }
.category-btn {
  flex-shrink: 0; background: var(--bg-card);
  border: 1px solid var(--border); color: #fff;
  padding: 10px 18px; border-radius: 50px;
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 0.85rem; cursor: pointer;
  transition: var(--transition); white-space: nowrap;
}
.category-btn:hover, .category-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(255,107,107,.35);
}

/* --- SEARCH --- */
/* --- SEARCH --- */
.search-bar-section { padding: 12px 0 24px; display: flex; justify-content: center; }
.search-wrap {
  position: relative; width: 100%; max-width: 540px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.search-wrap:focus-within {
  transform: scale(1.015);
}
.search-icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  font-size: 1.15rem; pointer-events: none; opacity: 0.6;
  transition: var(--transition);
}
.search-wrap:focus-within .search-icon {
  opacity: 1;
  color: #a78bfa;
}
.search-input {
  width: 100%; background: rgba(30, 41, 59, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 50px !important;
  color: #fff !important; font-family: 'Outfit', sans-serif !important;
  font-size: 1rem !important; padding: 14px 44px 14px 48px !important;
  outline: none !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2) !important;
  box-sizing: border-box !important;
}
.search-input:focus {
  border-color: #a78bfa !important;
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.25), inset 0 1px 1px rgba(255,255,255,0.05) !important;
  background: rgba(30, 41, 59, 0.6) !important;
}
.search-input::placeholder { color: var(--text-muted); }
.search-clear {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 1rem; padding: 4px;
  transition: var(--transition);
}
.search-clear:hover { color: #fff; }

/* --- SECTION HEADER --- */
.section-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.section-title { font-family: 'Nunito', sans-serif; font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 900; }
.section-subtitle { color: var(--text-muted); font-size: 0.9rem; }
.section-count { color: var(--text-muted); font-size: 0.9rem; }

/* Dynamic Profile Single-Row Adjustments */
#btn-logout {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#btn-logout:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #ef4444 !important;
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}


/* --- GAMES SECTION --- */
.games-section { padding: 0 0 60px; }
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}
@media (max-width: 480px) { .games-grid { grid-template-columns: 1fr; } }

/* --- GAME CARD --- */
.game-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  display: flex; flex-direction: column;
}
.game-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,.5); border-color: rgba(255,255,255,.18); }
.game-card__thumb {
  height: 140px; display: flex; align-items: center; justify-content: center;
  font-size: 4rem; position: relative; overflow: hidden;
}
.game-card__thumb::after {
  content: ''; position: absolute; inset: 0;
  background: inherit; filter: blur(0); opacity: 0;
  transition: opacity 0.3s;
}
.game-card:hover .game-card__thumb::after { opacity: .15; }
.game-card__badges {
  position: absolute; top: 10px; left: 10px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.badge {
  padding: 3px 10px; border-radius: 50px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase;
}
.badge--trending { background: linear-gradient(135deg,#F093FB,#F5576C); color: #fff; }
.badge--new      { background: linear-gradient(135deg,#43E97B,#38F9D7); color: #000; }
.badge--hot      { background: linear-gradient(135deg,#FF6B6B,#FF8E53); color: #fff; }
.badge--daily    { background: linear-gradient(135deg,#A78BFA,#38BDF8); color: #fff; }

.game-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.game-card__title { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.1rem; line-height: 1.2; }
.game-card__desc { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; flex: 1; }
.game-card__meta {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 4px;
}
.meta-tag {
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 50px;
  font-size: 0.75rem; font-weight: 700; color: var(--text-muted);
}
.meta-tag--easy   { color: var(--green); border-color: rgba(52,211,153,.25); background: rgba(52,211,153,.08); }
.meta-tag--medium { color: #FCD34D; border-color: rgba(252,211,77,.25); background: rgba(252,211,77,.08); }
.meta-tag--hard   { color: var(--primary); border-color: rgba(255,107,107,.25); background: rgba(255,107,107,.08); }
.game-card__footer { padding: 0 16px 16px; }
.game-card .btn { width: 100%; justify-content: center; }
.game-card__earn {
  font-size: 0.72rem;
  font-weight: 700;
  color: #92400e;
  background: rgba(251,191,36,0.08);
  border-top: 1px solid rgba(251,191,36,0.15);
  padding: 7px 16px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}


.no-results { text-align: center; padding: 60px 0; color: var(--text-muted); font-size: 1.1rem; }

/* --- DAILY CHALLENGE --- */
.daily-section { padding: 20px 0 60px; }
.daily-card {
  background: linear-gradient(135deg, rgba(255,8,68,.15), rgba(255,177,153,.08));
  border: 1px solid rgba(255,8,68,.3);
  border-radius: 24px; padding: 36px;
  display: flex; gap: 32px; align-items: center;
  position: relative; overflow: hidden;
}
.daily-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(255,8,68,.12) 0%, transparent 70%);
  pointer-events: none;
}
.daily-card__badge {
  position: absolute; top: 16px; right: 16px;
  background: linear-gradient(135deg,#FF0844,#FFB199);
  color: #fff; padding: 4px 14px; border-radius: 50px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: .06em;
}
.daily-card__left { flex: 1; }
.daily-card__eyebrow { color: var(--primary); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.daily-card__title { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: clamp(1.4rem,4vw,2rem); margin-bottom: 12px; }
.daily-card__desc { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; }
.daily-card__meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.meta-pill {
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 50px;
  font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
}
.daily-card__right { flex-shrink: 0; }
.daily-emoji-display {
  font-size: 5rem; animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(255,80,80,.5));
}
@media (max-width: 600px) {
  .daily-card { flex-direction: column; text-align: center; }
  .daily-card__meta { justify-content: center; }
  .daily-card__right { display: none; }
}

/* --- LEADERBOARD --- */
.leaderboard-section { padding: 0 0 60px; }
.leaderboard-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.leaderboard-table { width: 100%; }
.lb-row {
  display: grid;
  grid-template-columns: 44px 44px 1fr 1fr 90px;
  align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: rgba(255,255,255,.04); }
.lb-row.lb-row--top { background: rgba(255,215,0,.05); }
.lb-rank { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1rem; color: var(--text-muted); text-align: center; }
.lb-row.lb-row--top .lb-rank { color: #FFD700; }
.lb-avatar { font-size: 1.6rem; text-align: center; }
.lb-user { font-weight: 700; font-size: 0.95rem; }
.lb-game { color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-score { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1rem; color: var(--primary); text-align: right; }
@media (max-width: 540px) {
  .lb-row { grid-template-columns: 36px 36px 1fr 80px; }
  .lb-game { display: none; }
}

/* --- SHARE SECTION --- */
.share-section { padding: 0 0 60px; }
.share-card {
  background: linear-gradient(135deg, rgba(167,139,250,.12), rgba(56,189,248,.08));
  border: 1px solid rgba(167,139,250,.3); border-radius: 24px;
  padding: 48px 32px; text-align: center;
}
.share-card__title { font-family: 'Nunito', sans-serif; font-size: clamp(1.6rem,5vw,2.2rem); font-weight: 900; margin-bottom: 12px; }
.share-card__desc { color: var(--text-muted); font-size: 1rem; line-height: 1.6; margin-bottom: 28px; }
.share-card__socials { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.social-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 50px;
  font-weight: 700; font-size: 0.9rem; text-decoration: none;
  transition: var(--transition); border: 2px solid transparent;
}
.social-btn--tiktok    { background: #000; color: #fff; border-color: #333; }
.social-btn--instagram { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }
.social-btn--youtube   { background: #FF0000; color: #fff; }
.social-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 24px rgba(0,0,0,.4); }

/* --- FOOTER --- */
.footer {
  text-align: center; padding: 48px 16px;
  border-top: 1px solid var(--border);
}
.footer__logo {
  font-family: 'Nunito', sans-serif; font-size: 1.3rem; font-weight: 800;
  margin-bottom: 8px;
}
.footer__logo strong { color: var(--primary); }
.footer__tagline { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 24px; }
.footer__links { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.footer__links a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: var(--transition); }
.footer__links a:hover { color: #fff; }
.footer__copy { color: rgba(255,255,255,.25); font-size: 0.8rem; }

/* --- BOTTOM NAV --- */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: rgba(14,14,22,.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) { .bottom-nav { display: grid; } }
.bottom-nav__item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: var(--text-muted);
  padding: 8px 4px; border-radius: 12px; transition: var(--transition);
}
.bottom-nav__item.active, .bottom-nav__item:hover { color: var(--primary); }
.bottom-nav__icon { font-size: 1.3rem; }
.bottom-nav__label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* --- GAME PAGE --- */
.game-page { background: var(--bg); }
.game-main { padding: 32px 0 80px; }
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted); text-decoration: none;
  font-weight: 600; font-size: 0.9rem; margin-bottom: 28px;
  transition: var(--transition);
}
.back-link:hover { color: #fff; }
.game-header {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; margin-bottom: 28px;
}
.game-header__emoji { font-size: 3.5rem; }
.game-header__title { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: clamp(1.4rem,5vw,2.2rem); margin-bottom: 8px; }
.game-header__desc { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 12px; }
.game-header__meta { display: flex; gap: 8px; flex-wrap: wrap; }

.coming-soon-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 56px 32px;
  text-align: center; margin-bottom: 48px;
}
.coming-soon__icon { font-size: 4rem; margin-bottom: 16px; }
.coming-soon__title { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 2rem; margin-bottom: 12px; }
.coming-soon__desc { color: var(--text-muted); font-size: 1rem; line-height: 1.6; margin-bottom: 32px; }
.coming-soon__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.coming-soon__share p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 12px; }
.share-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.more-games-section { padding-top: 8px; }
.more-games__title { font-family: 'Nunito', sans-serif; font-size: 1.4rem; font-weight: 900; margin-bottom: 20px; }

/* --- ANIMATIONS --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.5s ease both; }

/* =============================================
   🎮 PREMIUM ANIMATED COSMETIC STYLES
   ============================================= */

/* --- Hide profile.html level ring ::before when custom border is equipped --- */
.avatar-ring.border-common::before,
.avatar-ring.border-uncommon::before,
.avatar-ring.border-rare::before,
.avatar-ring.border-electric::before,
.avatar-ring.border-epic::before,
.avatar-ring.border-shadow::before,
.avatar-ring.border-legendary::before,
.avatar-ring.border-ruby::before,
.avatar-ring.border-rainbow::before,
.avatar-ring.border-diamond::before,
.avatar-ring.border-phoenix::before,
.avatar-ring.border-glitch::before,
.avatar-ring.border-nebula::before,
.avatar-ring.border-glitch-neon::before,
.avatar-ring.border-hyper-glow::before,
.avatar-ring.border-plasma-wave::before,
.avatar-ring.border-fire-ring::before,
.avatar-ring.border-void-spiral::before {
  display: none !important;
}

/* --- Global Avatar Ring Custom Borders --- */
.avatar-ring.border-common {
  border: 4px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.avatar-ring.border-uncommon {
  border: 4px solid #10B981 !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.5), inset 0 0 8px rgba(16, 185, 129, 0.3) !important;
  animation: auraPulseGreen 3s ease-in-out infinite alternate !important;
}
@keyframes auraPulseGreen {
  0% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.3); }
  100% { box-shadow: 0 0 25px rgba(16, 185, 129, 0.7); }
}

.avatar-ring.border-rare {
  border: 4px solid #38BDF8 !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.6), inset 0 0 10px rgba(56, 189, 248, 0.4) !important;
}

.avatar-ring.border-electric {
  border: 4px solid #FBBF24 !important;
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.8), inset 0 0 12px rgba(251, 191, 36, 0.5) !important;
  animation: electricJitter 0.25s linear infinite !important;
}
@keyframes electricJitter {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.02) rotate(1deg); }
  50% { transform: scale(0.98) rotate(-1deg); }
  75% { transform: scale(1.01) rotate(0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.avatar-ring.border-epic {
  border: 4px solid #A78BFA !important;
  animation: epicSynthPulse 3s linear infinite alternate !important;
}
@keyframes epicSynthPulse {
  0% { border-color: #A78BFA; box-shadow: 0 0 15px rgba(167, 139, 250, 0.6), inset 0 0 10px rgba(167, 139, 250, 0.4); }
  100% { border-color: #EC4899; box-shadow: 0 0 30px rgba(236, 72, 153, 0.9), inset 0 0 15px rgba(236, 72, 153, 0.5); }
}

.avatar-ring.border-shadow {
  border: 4px solid #1E293B !important;
  animation: voidBreathe 4s ease-in-out infinite !important;
}
@keyframes voidBreathe {
  0% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.9), inset 0 0 5px rgba(0, 0, 0, 0.8); }
  50% { box-shadow: 0 0 40px rgba(167, 139, 250, 0.15), inset 0 0 15px rgba(0, 0, 0, 0.95); border-color: #0f172a !important; }
  100% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.9), inset 0 0 5px rgba(0, 0, 0, 0.8); }
}

.avatar-ring.border-legendary {
  border: 4px solid #FBBF24 !important;
  animation: legendaryFlame 4s linear infinite !important;
}
@keyframes legendaryFlame {
  0% { border-color: #FBBF24; box-shadow: 0 0 15px rgba(251, 191, 36, 0.6), inset 0 0 10px rgba(251, 191, 36, 0.4); }
  50% { border-color: #F97316; box-shadow: 0 0 30px rgba(249, 115, 22, 0.9), inset 0 0 15px rgba(249, 115, 22, 0.6); }
  100% { border-color: #FBBF24; box-shadow: 0 0 15px rgba(251, 191, 36, 0.6), inset 0 0 10px rgba(251, 191, 36, 0.4); }
}

.avatar-ring.border-ruby {
  border: 4px solid #EF4444 !important;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.8), inset 0 0 15px rgba(239, 68, 68, 0.5) !important;
  animation: rubyBreathe 2.5s ease-in-out infinite alternate !important;
}
@keyframes rubyBreathe {
  0% { filter: brightness(0.9); box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); }
  100% { filter: brightness(1.2); box-shadow: 0 0 35px rgba(239, 68, 68, 1); }
}

.avatar-ring.border-rainbow {
  border: 4px solid transparent !important;
  background-image: linear-gradient(#1e293b, #1e293b), linear-gradient(to right, #ff007f, #7f00ff, #00f0ff, #00ff7f, #ffea00, #ff007f) !important;
  background-origin: border-box !important;
  background-clip: content-box, border-box !important;
  box-shadow: 0 0 25px rgba(127, 0, 255, 0.5) !important;
  animation: rainbowSpin 6s linear infinite !important;
  background-size: 200% 200% !important;
}
@keyframes rainbowSpin {
  0% { background-position: 0% 50%; box-shadow: 0 0 20px rgba(255, 0, 127, 0.5); }
  50% { background-position: 100% 50%; box-shadow: 0 0 25px rgba(0, 240, 255, 0.6); }
  100% { background-position: 0% 50%; box-shadow: 0 0 20px rgba(255, 0, 127, 0.5); }
}


/* --- Global Gamer Card Background Themes --- */
.gamer-card.theme-common {
  background: rgba(15, 23, 42, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.gamer-card.theme-uncommon {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(6, 78, 59, 0.4)) !important;
  background-image: radial-gradient(rgba(16, 185, 129, 0.12) 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}

.gamer-card.theme-rare {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(3, 105, 161, 0.35)) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  box-shadow: inset 0 0 30px rgba(56, 189, 248, 0.08), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

.gamer-card.theme-sunset {
  background: linear-gradient(135deg, rgba(120, 53, 4, 0.25), rgba(88, 28, 135, 0.25), rgba(15, 23, 42, 0.8)) !important;
  background-size: 300% 300% !important;
  border-color: rgba(251, 113, 133, 0.3) !important;
  animation: sunsetShift 12s ease infinite alternate !important;
  box-shadow: inset 0 0 25px rgba(251, 113, 133, 0.1) !important;
}
@keyframes sunsetShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gamer-card.theme-epic {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(88, 28, 135, 0.35) 70%, rgba(236, 72, 153, 0.15) 100%) !important;
  border-color: rgba(167, 139, 250, 0.35) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-epic::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 35%;
  background: linear-gradient(rgba(236, 72, 153, 0) 95%, rgba(236, 72, 153, 0.3) 100%),
              repeating-linear-gradient(90deg, rgba(236, 72, 153, 0.08) 0px, rgba(236, 72, 153, 0.08) 1px, transparent 1px, transparent 30px),
              repeating-linear-gradient(0deg, rgba(236, 72, 153, 0.08) 0px, rgba(236, 72, 153, 0.08) 1px, transparent 1px, transparent 15px);
  transform: perspective(40px) rotateX(25deg) scale(1.4);
  transform-origin: bottom center;
  z-index: 0;
  pointer-events: none;
  animation: synthGridScroll 8s linear infinite !important;
}
@keyframes synthGridScroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 30px; }
}
.gamer-card.theme-epic > * { position: relative; z-index: 2; }

.gamer-card.theme-matrix {
  background: linear-gradient(180deg, rgba(10, 10, 18, 0.95) 0%, rgba(6, 78, 59, 0.45) 100%) !important;
  border-color: #10B981 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(16, 185, 129, 0.1) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-matrix::after {
  content: '01101001 01101110 01100110 01101001 01101110 01101001 01110100 01111001 \A 10101101 00101101 10110010 01011001 \A 01000111 01000001 01001101 01000101 \A 11001010 11110000 10101010 \A 01100010 01101001 01101110 01100001 \A 11011001 10001101 01101101 11011001';
  white-space: pre;
  font-family: monospace;
  font-size: 0.7rem;
  color: rgba(16, 185, 129, 0.12);
  position: absolute;
  inset: 10px;
  line-height: 1.5;
  text-align: left;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  animation: matrixCodeRain 10s linear infinite !important;
}
@keyframes matrixCodeRain {
  0% { transform: translateY(-5%); }
  100% { transform: translateY(5%); }
}
.gamer-card.theme-matrix > * { position: relative; z-index: 2; }

.gamer-card.theme-static {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-static::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: radial-gradient(rgba(255,255,255,1) 1px, transparent 0),
                    radial-gradient(rgba(255,255,255,1) 1px, transparent 0);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  z-index: 0;
  pointer-events: none;
  animation: staticFuzz 0.1s linear infinite !important;
}
@keyframes staticFuzz {
  0% { background-position: 0 0, 4px 4px; }
  50% { background-position: 2px 3px, 5px 1px; }
  100% { background-position: -1px 2px, 3px -2px; }
}
.gamer-card.theme-static > * { position: relative; z-index: 2; }

.gamer-card.theme-legendary {
  background: radial-gradient(circle at top left, rgba(120, 53, 4, 0.45), rgba(15, 23, 42, 0.9)) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  animation: legendaryPulse 6s ease-in-out infinite alternate !important;
}
@keyframes legendaryPulse {
  0% { box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(245, 158, 11, 0.1); }
  100% { box-shadow: 0 20px 45px rgba(245, 158, 11, 0.18), inset 0 0 35px rgba(245, 158, 11, 0.25); border-color: rgba(245, 158, 11, 0.7) !important; }
}

.gamer-card.theme-magma {
  background: radial-gradient(ellipse at bottom, #2d0b07 0%, #090202 100%) !important;
  border-color: #EF4444 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.85), inset 0 0 35px rgba(239, 68, 68, 0.25) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.gamer-card.theme-magma::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 15% 85%, rgba(239, 68, 68, 0.4) 0%, transparent 60%),
    radial-gradient(circle at 85% 15%, rgba(249, 115, 22, 0.35) 0%, transparent 60%),
    linear-gradient(135deg, transparent 30%, rgba(239, 68, 68, 0.2) 50%, rgba(249, 115, 22, 0.25) 70%, transparent 90%);
  background-size: 200% 200%;
  z-index: 0;
  pointer-events: none;
  animation: magmaFlow 10s ease infinite alternate !important;
}
@keyframes magmaFlow {
  0% { background-position: 0% 0%; filter: hue-rotate(0deg) brightness(1); }
  50% { background-position: 100% 100%; filter: hue-rotate(12deg) brightness(1.25); }
  100% { background-position: 0% 100%; filter: hue-rotate(-5deg) brightness(0.9); }
}
.gamer-card.theme-magma::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(2px 2px at 25px 140px, rgba(239, 68, 68, 0.9), transparent),
    radial-gradient(3px 3px at 85px 240px, rgba(249, 115, 22, 0.95), transparent),
    radial-gradient(1.5px 1.5px at 155px 85px, rgba(245, 158, 11, 0.8), transparent),
    radial-gradient(2.5px 2.5px at 245px 185px, rgba(239, 68, 68, 0.9), transparent),
    radial-gradient(2px 2px at 185px 300px, rgba(249, 115, 22, 0.95), transparent),
    radial-gradient(3px 3px at 295px 125px, rgba(245, 158, 11, 0.98), transparent);
  background-size: 300px 300px;
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
  animation: magmaEmbers 8s linear infinite !important;
}
@keyframes magmaEmbers {
  0% { background-position: 0 300px; }
  100% { background-position: -30px 0; }
}
.gamer-card.theme-magma:hover {
  filter: brightness(1.15);
  box-shadow: 0 25px 50px rgba(239, 68, 68, 0.35), inset 0 0 45px rgba(249, 115, 22, 0.45) !important;
  border-color: #F97316 !important;
}
.gamer-card.theme-magma > * { position: relative; z-index: 2; }

.gamer-card.theme-royal {
  background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%) !important;
  border-color: #D97706 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), inset 0 0 20px rgba(217, 119, 6, 0.15) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-royal::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 18px;
  background-image: radial-gradient(rgba(217, 119, 6, 0.05) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  z-index: 0;
  pointer-events: none;
}
.gamer-card.theme-royal > * { position: relative; z-index: 2; }

/* --- NEW PREMIUM BACKDROP THEMES --- */

/* Theme: Hyperdrive */
.gamer-card.theme-hyperdrive {
  background: radial-gradient(circle at center, #0d0b18 0%, #030206 100%) !important;
  border-color: #818CF8 !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.85), inset 0 0 30px rgba(129, 140, 248, 0.2) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-hyperdrive::after {
  content: '';
  position: absolute;
  inset: -100px;
  background-image: 
    radial-gradient(1.5px 1.5px at 20% 30%, #fff 100%, transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.85) 100%, transparent),
    radial-gradient(1.5px 1.5px at 60% 10%, rgba(255,255,255,0.9) 100%, transparent),
    radial-gradient(2.5px 2.5px at 80% 80%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 10% 60%, rgba(255,255,255,0.75) 100%, transparent),
    radial-gradient(2px 2px at 90% 40%, rgba(255,255,255,0.95) 100%, transparent);
  background-size: 200px 200px;
  opacity: 0.65;
  z-index: 0;
  pointer-events: none;
  animation: hyperdriveStars 4.5s linear infinite !important;
}
@keyframes hyperdriveStars {
  0% { transform: scale(0.5) rotate(0deg); opacity: 0; }
  20% { opacity: 0.9; }
  100% { transform: scale(2.2) rotate(8deg); opacity: 0; }
}
.gamer-card.theme-hyperdrive:hover {
  box-shadow: 0 25px 50px rgba(129, 140, 248, 0.45), inset 0 0 40px rgba(129, 140, 248, 0.3) !important;
}
.gamer-card.theme-hyperdrive > * { position: relative; z-index: 2; }

/* Theme: Aurora Celestial */
.gamer-card.theme-borealis {
  background: linear-gradient(180deg, #060614 0%, #0d0c24 100%) !important;
  border-color: #34D399 !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.85), inset 0 0 25px rgba(52, 211, 153, 0.2) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-borealis::after {
  content: '';
  position: absolute;
  inset: -50%;
  background: 
    radial-gradient(circle at 25% 15%, rgba(52, 211, 153, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 75% 85%, rgba(139, 92, 246, 0.25) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.22) 0%, transparent 55%);
  filter: blur(45px);
  z-index: 0;
  pointer-events: none;
  animation: auroraWarp 14s ease-in-out infinite alternate !important;
}
@keyframes auroraWarp {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(-10%, 12%) rotate(12deg) scale(1.15); }
  100% { transform: translate(10%, -10%) rotate(-12deg) scale(1); }
}
.gamer-card.theme-borealis:hover {
  box-shadow: 0 25px 50px rgba(52, 211, 153, 0.35), inset 0 0 35px rgba(139, 92, 246, 0.25) !important;
}
.gamer-card.theme-borealis > * { position: relative; z-index: 2; }

/* Theme: Bioluminescent Abyss */
.gamer-card.theme-abyss {
  background: linear-gradient(180deg, #010f19 0%, #030811 100%) !important;
  border-color: #06B6D4 !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.85), inset 0 0 30px rgba(6, 182, 212, 0.2) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-abyss::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at top right, rgba(6, 182, 212, 0.22) 0%, transparent 70%),
    radial-gradient(circle at bottom left, rgba(20, 184, 166, 0.18) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.gamer-card.theme-abyss::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 15% 75%, rgba(6, 182, 212, 0.18) 4px, transparent 5px),
    radial-gradient(circle at 35% 85%, rgba(20, 184, 166, 0.22) 3px, transparent 4px),
    radial-gradient(circle at 70% 80%, rgba(6, 182, 212, 0.18) 5px, transparent 6px),
    radial-gradient(circle at 88% 65%, rgba(20, 184, 166, 0.22) 2.5px, transparent 3.5px);
  background-size: 200px 300px;
  z-index: 0;
  pointer-events: none;
  animation: abyssBubbles 12s linear infinite !important;
}
@keyframes abyssBubbles {
  0% { background-position: 0 300px; }
  100% { background-position: 15px 0; }
}
.gamer-card.theme-abyss:hover {
  box-shadow: 0 25px 50px rgba(6, 182, 212, 0.4), inset 0 0 40px rgba(20, 184, 166, 0.3) !important;
}
.gamer-card.theme-abyss > * { position: relative; z-index: 2; }

/* Theme: Midas Obsidian Gold */
.gamer-card.theme-gilded {
  background: linear-gradient(135deg, #08080b 0%, #17171a 100%) !important;
  border-color: #D97706 !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.92), inset 0 0 25px rgba(217, 119, 6, 0.2) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-gilded::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(217, 119, 6, 0.08) 40%, rgba(251, 191, 36, 0.45) 50%, rgba(217, 119, 6, 0.08) 60%, transparent 70%);
  background-size: 300% 300%;
  background-position: -200% 0;
  z-index: 0;
  pointer-events: none;
}
.gamer-card.theme-gilded:hover::after {
  animation: gildedSweep 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}
@keyframes gildedSweep {
  0% { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}
.gamer-card.theme-gilded::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background: 
    radial-gradient(ellipse at 25% 25%, #D97706 1.5%, transparent 2.5%),
    radial-gradient(ellipse at 75% 75%, #F59E0B 2%, transparent 3%),
    repeating-linear-gradient(60deg, transparent, transparent 15px, rgba(217,119,6,0.12) 15px, rgba(217,119,6,0.12) 16px, transparent 16px, transparent 40px);
  z-index: 0;
  pointer-events: none;
}
.gamer-card.theme-gilded:hover {
  box-shadow: 0 25px 50px rgba(217, 119, 6, 0.35), inset 0 0 35px rgba(251, 191, 36, 0.3) !important;
  border-color: #F59E0B !important;
}

/* Theme: Cosmic Singularity (theme-blackhole) */
.gamer-card.theme-blackhole {
  background: radial-gradient(circle at center, #05020a 20%, #11052c 60%, #020005 100%) !important;
  border-color: #A855F7 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.95), inset 0 0 35px rgba(168, 85, 247, 0.25) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-blackhole::after {
  content: '';
  position: absolute;
  inset: -60%;
  background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.25) 0%, rgba(236, 72, 153, 0.15) 40%, transparent 70%);
  z-index: 0;
  pointer-events: none;
  animation: cosmicVortex 8s linear infinite !important;
}
@keyframes cosmicVortex {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
.gamer-card.theme-blackhole::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1.5px 1.5px at 10% 20%, #A855F7 100%, transparent),
    radial-gradient(2px 2px at 80% 30%, #EC4899 100%, transparent),
    radial-gradient(1px 1px at 50% 80%, #3B82F6 100%, transparent),
    radial-gradient(2px 2px at 30% 70%, #A855F7 100%, transparent),
    radial-gradient(1.5px 1.5px at 70% 90%, #EC4899 100%, transparent);
  background-size: 250px 250px;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
  animation: cosmicDrift 15s linear infinite !important;
}
@keyframes cosmicDrift {
  0% { background-position: 0 0; }
  100% { background-position: -50px 250px; }
}
.gamer-card.theme-blackhole:hover {
  box-shadow: 0 25px 50px rgba(168, 85, 247, 0.45), inset 0 0 45px rgba(236, 72, 153, 0.4) !important;
  border-color: #EC4899 !important;
}
.gamer-card.theme-blackhole > * { position: relative; z-index: 2; }


/* Theme: Neon Cyberpunk (theme-cyberpunk) */
.gamer-card.theme-cyberpunk {
  background: linear-gradient(135deg, #030008 0%, #0d011a 100%) !important;
  border-color: #06B6D4 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9), inset 0 0 25px rgba(6, 182, 212, 0.25) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-cyberpunk::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, rgba(6, 182, 212, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(236, 72, 153, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: 0;
  pointer-events: none;
  animation: cyberpunkGrid 6s linear infinite !important;
}
@keyframes cyberpunkGrid {
  0% { background-position: 0 0; }
  100% { background-position: 20px 20px; }
}
.gamer-card.theme-cyberpunk::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(236, 72, 153, 0.35) 50%, rgba(6, 182, 212, 0.35) 52%, transparent 54%);
  background-size: 100% 200%;
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
  animation: cyberpunkScanline 4s linear infinite !important;
}
@keyframes cyberpunkScanline {
  0% { background-position: 0 200%; }
  100% { background-position: 0 -200%; }
}
.gamer-card.theme-cyberpunk:hover {
  box-shadow: 0 25px 50px rgba(6, 182, 212, 0.35), inset 0 0 40px rgba(236, 72, 153, 0.35) !important;
  border-color: #EC4899 !important;
}
.gamer-card.theme-cyberpunk > * { position: relative; z-index: 2; }


/* Theme: Chrono Vortex (theme-vortex) */
.gamer-card.theme-vortex {
  background: radial-gradient(circle at center, #010c14 10%, #051b2a 60%, #00050d 100%) !important;
  border-color: #10B981 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9), inset 0 0 30px rgba(16, 185, 129, 0.25) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-vortex::after {
  content: '';
  position: absolute;
  inset: -100px;
  background-image: 
    repeating-conic-gradient(from 0deg, rgba(16, 185, 129, 0.12) 0deg, transparent 15deg, rgba(6, 182, 212, 0.12) 30deg, transparent 45deg);
  z-index: 0;
  pointer-events: none;
  animation: vortexSpin 10s linear infinite !important;
}
@keyframes vortexSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}
.gamer-card.theme-vortex::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 30% 40%, rgba(16, 185, 129, 0.4) 0%, transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(6, 182, 212, 0.35) 0%, transparent 60%);
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
  animation: vortexWobble 6s ease-in-out infinite alternate !important;
}
@keyframes vortexWobble {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(5%, -5%) scale(1.08); }
}
.gamer-card.theme-vortex:hover {
  box-shadow: 0 25px 50px rgba(16, 185, 129, 0.4), inset 0 0 40px rgba(6, 182, 212, 0.35) !important;
  border-color: #06B6D4 !important;
}
.gamer-card.theme-vortex > * { position: relative; z-index: 2; }
/* ==========================================================================
   TEN NEW HYPER-PREMIUM ANIMATED THEMES
   ========================================================================== */

/* 1. Common: Dark Slate (theme-slate) */
.gamer-card.theme-slate {
  background: linear-gradient(135deg, #1e293b 0%, #0b0f19 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(255, 255, 255, 0.03) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-slate::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 30% 30%, rgba(148, 163, 184, 0.08) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
  animation: slateGlow 8s ease-in-out infinite alternate !important;
}
.gamer-card.theme-slate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.04) 48%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 52%, transparent 65%);
  background-size: 200% 100%;
  z-index: 0;
  pointer-events: none;
  animation: slateSweep 7s ease-in-out infinite !important;
}
@keyframes slateGlow {
  0% { transform: scale(1) translate(0, 0); opacity: 0.7; }
  100% { transform: scale(1.1) translate(3%, 3%); opacity: 1; }
}
@keyframes slateSweep {
  0% { background-position: -150% 0; }
  100% { background-position: 150% 0; }
}
.gamer-card.theme-slate > * { position: relative; z-index: 2; }


/* 2. Common: Ocean Breeze (theme-ocean) */
.gamer-card.theme-ocean {
  background: linear-gradient(180deg, #0a2537 0%, #030a10 100%) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.75), inset 0 0 15px rgba(56, 189, 248, 0.08) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-ocean::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 70% 80%, rgba(14, 165, 233, 0.15) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
  animation: oceanSwell 12s ease-in-out infinite alternate !important;
}
.gamer-card.theme-ocean::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(135deg, transparent 40%, rgba(56, 189, 248, 0.06) 50%, transparent 60%),
    radial-gradient(circle at 20% 40%, rgba(56, 189, 248, 0.1) 1px, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(56, 189, 248, 0.1) 1.5px, transparent 2.5px);
  background-size: 200% 200%, 120px 120px, 120px 120px;
  z-index: 0;
  pointer-events: none;
  animation: oceanWaves 9s linear infinite !important;
}
@keyframes oceanSwell {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.15) translate(-4%, -2%); }
}
@keyframes oceanWaves {
  0% { background-position: 200% 0, 0 0, 0 0; }
  100% { background-position: -200% 0, -20px -120px, 20px -120px; }
}
.gamer-card.theme-ocean > * { position: relative; z-index: 2; }


/* 3. Uncommon: Amethyst Spark (theme-amethyst) */
.gamer-card.theme-amethyst {
  background: linear-gradient(135deg, #240b4f 0%, #0a031a 100%) !important;
  border-color: #A78BFA !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(167, 139, 250, 0.12) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-amethyst::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at center, rgba(167, 139, 250, 0.14) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
  animation: amethystCore 4s ease-in-out infinite alternate !important;
}
.gamer-card.theme-amethyst::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 15% 25%, rgba(196, 181, 253, 0.4) 1px, transparent 2px),
    radial-gradient(circle at 85% 15%, rgba(196, 181, 253, 0.35) 1.5px, transparent 2.5px),
    radial-gradient(circle at 45% 75%, rgba(196, 181, 253, 0.4) 1.2px, transparent 2.2px),
    radial-gradient(circle at 75% 85%, rgba(196, 181, 253, 0.3) 2px, transparent 3px);
  background-size: 140px 140px;
  z-index: 0;
  pointer-events: none;
  animation: amethystTwinkle 5s linear infinite !important;
}
@keyframes amethystCore {
  0% { transform: scale(0.92); opacity: 0.6; }
  100% { transform: scale(1.08); opacity: 1; }
}
@keyframes amethystTwinkle {
  0% { background-position: 0 0; opacity: 0.4; }
  50% { opacity: 0.95; }
  100% { background-position: 0 -140px; opacity: 0.4; }
}
.gamer-card.theme-amethyst:hover {
  box-shadow: 0 25px 45px rgba(167, 139, 250, 0.3), inset 0 0 25px rgba(167, 139, 250, 0.25) !important;
}
.gamer-card.theme-amethyst > * { position: relative; z-index: 2; }


/* 4. Uncommon: Emerald Forest (theme-forest) */
.gamer-card.theme-forest {
  background: linear-gradient(135deg, #03251a 0%, #010a07 100%) !important;
  border-color: #10B981 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(16, 185, 129, 0.12) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-forest::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 30% 20%, rgba(16, 185, 129, 0.12) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
  animation: forestBeams 6s ease-in-out infinite alternate !important;
}
.gamer-card.theme-forest::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 10% 90%, rgba(52, 211, 153, 0.6) 2.5px, transparent 3.5px),
    radial-gradient(circle at 60% 80%, rgba(52, 211, 153, 0.5) 3.5px, transparent 4.5px),
    radial-gradient(circle at 80% 95%, rgba(52, 211, 153, 0.55) 2px, transparent 3px),
    radial-gradient(circle at 35% 65%, rgba(52, 211, 153, 0.45) 4px, transparent 5px);
  background-size: 180px 180px;
  z-index: 0;
  pointer-events: none;
  animation: forestFireflies 7s linear infinite, fireflyFlicker 1.8s ease-in-out infinite alternate !important;
}
@keyframes forestBeams {
  0% { opacity: 0.4; transform: rotate(-5deg) scale(0.95); }
  100% { opacity: 0.95; transform: rotate(5deg) scale(1.05); }
}
@keyframes forestFireflies {
  0% { background-position: 0 180px; }
  100% { background-position: -25px 0; }
}
@keyframes fireflyFlicker {
  0% { filter: brightness(0.6) opacity(0.5); }
  100% { filter: brightness(1.4) opacity(1); }
}
.gamer-card.theme-forest:hover {
  box-shadow: 0 25px 45px rgba(52, 211, 153, 0.3), inset 0 0 25px rgba(16, 185, 129, 0.25) !important;
}
.gamer-card.theme-forest > * { position: relative; z-index: 2; }


/* 5. Rare: Solar Flare (theme-solar) */
.gamer-card.theme-solar {
  background: radial-gradient(circle at bottom right, #381201 0%, #080200 100%) !important;
  border-color: #F59E0B !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85), inset 0 0 20px rgba(245, 158, 11, 0.15) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-solar::before {
  content: '';
  position: absolute;
  inset: -15%;
  background: radial-gradient(circle at bottom right, rgba(245, 158, 11, 0.25) 0%, rgba(249, 115, 22, 0.1) 45%, transparent 70%);
  z-index: 0;
  pointer-events: none;
  animation: solarCore 4s ease-in-out infinite alternate !important;
}
.gamer-card.theme-solar::after {
  content: '';
  position: absolute;
  inset: -30%;
  background: radial-gradient(ellipse at center, rgba(249, 115, 22, 0.18) 0%, rgba(245, 158, 11, 0.08) 50%, transparent 75%);
  z-index: 0;
  pointer-events: none;
  animation: solarWind 6s ease-in-out infinite alternate-reverse !important;
}
@keyframes solarCore {
  0% { transform: scale(0.9) rotate(0deg); opacity: 0.7; }
  100% { transform: scale(1.1) rotate(10deg); opacity: 1; }
}
@keyframes solarWind {
  0% { transform: rotate(0deg) translate(0, 0) scale(1); }
  100% { transform: rotate(20deg) translate(-4%, -4%) scale(1.18); }
}
.gamer-card.theme-solar:hover {
  box-shadow: 0 25px 45px rgba(245, 158, 11, 0.4), inset 0 0 30px rgba(249, 115, 22, 0.3) !important;
}
.gamer-card.theme-solar > * { position: relative; z-index: 2; }


/* 6. Rare: Toxic Waste (theme-toxic) */
.gamer-card.theme-toxic {
  background: linear-gradient(180deg, #09200a 0%, #010501 100%) !important;
  border-color: #84CC16 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85), inset 0 0 20px rgba(132, 204, 22, 0.18) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-toxic::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 50% 90%, rgba(132, 204, 22, 0.15) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
  animation: toxicFog 5s ease-in-out infinite alternate !important;
}
.gamer-card.theme-toxic::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 15% 95%, rgba(132, 204, 22, 0.6) 4.5px, transparent 5.5px),
    radial-gradient(circle at 45% 90%, rgba(132, 204, 22, 0.5) 6px, transparent 7.5px),
    radial-gradient(circle at 75% 95%, rgba(132, 204, 22, 0.65) 3.5px, transparent 4.5px),
    radial-gradient(circle at 90% 80%, rgba(132, 204, 22, 0.55) 5px, transparent 6px);
  background-size: 200px 220px;
  z-index: 0;
  pointer-events: none;
  animation: toxicBubbles 4s linear infinite !important;
}
@keyframes toxicFog {
  0% { opacity: 0.5; transform: scale(1) translate(-2%, 0); }
  100% { opacity: 1; transform: scale(1.12) translate(2%, -2%); }
}
@keyframes toxicBubbles {
  0% { background-position: 0 220px; opacity: 0; }
  15% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { background-position: 15px 0; opacity: 0; }
}
.gamer-card.theme-toxic:hover {
  box-shadow: 0 25px 45px rgba(132, 204, 22, 0.4), inset 0 0 30px rgba(132, 204, 22, 0.3) !important;
}
.gamer-card.theme-toxic > * { position: relative; z-index: 2; }


/* 7. Epic: Deep Space (theme-deepspace) */
.gamer-card.theme-deepspace {
  background: radial-gradient(circle at 30% 20%, #060616 0%, #010103 100%) !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9), inset 0 0 25px rgba(59, 130, 246, 0.22) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-deepspace::before {
  content: '';
  position: absolute;
  inset: -30%;
  background: 
    radial-gradient(circle at 25% 30%, rgba(59, 130, 246, 0.25) 0%, transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(168, 85, 247, 0.16) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
  filter: blur(35px);
  animation: nebulaSwirl 16s linear infinite !important;
}
.gamer-card.theme-deepspace::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1.5px 1.5px at 15% 15%, #fff 100%, transparent),
    radial-gradient(2px 2px at 75% 30%, rgba(255,255,255,0.85) 100%, transparent),
    radial-gradient(1.2px 1.2px at 40% 75%, rgba(255,255,255,0.9) 100%, transparent),
    radial-gradient(2.5px 2.5px at 85% 65%, #fff 100%, transparent);
  background-size: 160px 160px;
  z-index: 0;
  pointer-events: none;
  animation: spaceTwinkle 4s ease-in-out infinite alternate !important;
}
@keyframes nebulaSwirl {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.12); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes spaceTwinkle {
  0% { opacity: 0.45; transform: scale(0.98); }
  100% { opacity: 0.95; transform: scale(1.02); }
}
.gamer-card.theme-deepspace:hover {
  box-shadow: 0 25px 50px rgba(59, 130, 246, 0.45), inset 0 0 35px rgba(168, 85, 247, 0.35) !important;
}
.gamer-card.theme-deepspace > * { position: relative; z-index: 2; }


/* 8. Epic: Glacial Frost (theme-frost) */
.gamer-card.theme-frost {
  background: linear-gradient(180deg, #071522 0%, #02070c 100%) !important;
  border-color: #38BDF8 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9), inset 0 0 25px rgba(56, 189, 248, 0.22) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-frost::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at center, rgba(56, 189, 248, 0.16) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
  animation: glacialGlow 5s ease-in-out infinite alternate !important;
}
.gamer-card.theme-frost::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.4) 1.5px, transparent 2.5px),
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.5) 2.5px, transparent 3.5px),
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.35) 1.2px, transparent 2.2px),
    radial-gradient(circle at 30% 65%, rgba(255, 255, 255, 0.45) 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.5) 2px, transparent 3px);
  background-size: 150px 150px;
  z-index: 0;
  pointer-events: none;
  animation: frostSnow 5s linear infinite !important;
}
@keyframes glacialGlow {
  0% { opacity: 0.5; transform: scale(0.95); }
  100% { opacity: 0.95; transform: scale(1.05); }
}
@keyframes frostSnow {
  0% { background-position: 0 0; }
  100% { background-position: -25px 150px; }
}
.gamer-card.theme-frost:hover {
  box-shadow: 0 25px 50px rgba(56, 189, 248, 0.45), inset 0 0 35px rgba(56, 189, 248, 0.35) !important;
}
.gamer-card.theme-frost > * { position: relative; z-index: 2; }


/* 9. Legendary: Prismatic Hologram (theme-prism) */
.gamer-card.theme-prism {
  background: linear-gradient(135deg, #0a0414 0%, #020105 100%) !important;
  border-color: #f43f5e !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.95), inset 0 0 30px rgba(244, 63, 94, 0.25) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-prism::before {
  content: '';
  position: absolute;
  inset: -100px;
  background: linear-gradient(
    45deg,
    rgba(244, 63, 94, 0.22) 0%,
    rgba(236, 72, 153, 0.16) 20%,
    rgba(168, 85, 247, 0.22) 40%,
    rgba(59, 130, 246, 0.18) 60%,
    rgba(6, 182, 212, 0.22) 80%,
    rgba(244, 63, 94, 0.22) 100%
  );
  background-size: 300% 300%;
  z-index: 0;
  pointer-events: none;
  animation: prismSpectrum 8s linear infinite !important;
}
.gamer-card.theme-prism::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.08) 52%, transparent 60%),
    linear-gradient(to bottom, transparent 95%, rgba(6, 182, 212, 0.15) 96%, transparent 97%);
  background-size: 200% 100%, 100% 25px;
  z-index: 0;
  pointer-events: none;
  animation: prismGlissade 4s ease-in-out infinite !important;
}
@keyframes prismSpectrum {
  0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; filter: hue-rotate(360deg); }
}
@keyframes prismGlissade {
  0% { background-position: -150% 0, 0 0; }
  100% { background-position: 150% 0, 0 200px; }
}
.gamer-card.theme-prism:hover {
  box-shadow: 0 25px 50px rgba(244, 63, 94, 0.5), inset 0 0 40px rgba(168, 85, 247, 0.4) !important;
  border-color: #38bdf8 !important;
}
.gamer-card.theme-prism > * { position: relative; z-index: 2; }


/* 10. Legendary: Infernal Embers (theme-inferno) */
.gamer-card.theme-inferno {
  background: radial-gradient(ellipse at bottom, #210202 0%, #020000 100%) !important;
  border-color: #f97316 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.95), inset 0 0 35px rgba(249, 115, 22, 0.28) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-inferno::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: 
    radial-gradient(circle at 20% 90%, rgba(239, 68, 68, 0.32) 0%, transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(249, 115, 22, 0.26) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
  filter: blur(20px);
  animation: magmaPulse 4s ease-in-out infinite alternate !important;
}
.gamer-card.theme-inferno::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 10% 95%, rgba(239, 68, 68, 0.8) 2.5px, transparent 3.5px),
    radial-gradient(circle at 45% 90%, rgba(249, 115, 22, 0.9) 3px, transparent 4px),
    radial-gradient(circle at 75% 92%, rgba(245, 158, 11, 0.85) 2px, transparent 3px),
    radial-gradient(circle at 90% 75%, rgba(239, 68, 68, 0.85) 3.5px, transparent 4.5px);
  background-size: 200px 240px;
  z-index: 0;
  pointer-events: none;
  animation: infernoEmbers 5s linear infinite !important;
}
@keyframes magmaPulse {
  0% { transform: scale(1); opacity: 0.65; }
  100% { transform: scale(1.12); opacity: 0.95; }
}
@keyframes infernoEmbers {
  0% { background-position: 0 240px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { background-position: -20px 0; opacity: 0; }
}
.gamer-card.theme-inferno:hover {
  box-shadow: 0 25px 50px rgba(249, 115, 22, 0.5), inset 0 0 45px rgba(239, 68, 68, 0.45) !important;
  border-color: #ef4444 !important;
}
.gamer-card.theme-inferno > * { position: relative; z-index: 2; }


/* --- FIVE NEW HYPER-PREMIUM ANIMATED THEMES --- */

/* Theme: Nebula Vortex (theme-nebula-vortex) */
.gamer-card.theme-nebula-vortex {
  background: radial-gradient(circle at center, #0a051d 15%, #18093d 50%, #03000a 100%) !important;
  border-color: #8B5CF6 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9), inset 0 0 35px rgba(139, 92, 246, 0.3) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-nebula-vortex::after {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.22) 0%, rgba(236, 72, 153, 0.12) 40%, transparent 70%);
  z-index: 0;
  pointer-events: none;
  animation: nebulaVortexSpin 12s linear infinite !important;
}
@keyframes nebulaVortexSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
.gamer-card.theme-nebula-vortex::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1.5px 1.5px at 15% 25%, #8B5CF6 100%, transparent),
    radial-gradient(2px 2px at 75% 20%, #EC4899 100%, transparent),
    radial-gradient(1px 1px at 45% 75%, #3B82F6 100%, transparent),
    radial-gradient(2px 2px at 25% 65%, #EC4899 100%, transparent),
    radial-gradient(1.5px 1.5px at 80% 85%, #8B5CF6 100%, transparent);
  background-size: 200px 200px;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
  animation: nebulaDrift 20s linear infinite !important;
}
@keyframes nebulaDrift {
  0% { background-position: 0 0; }
  100% { background-position: -40px 200px; }
}
.gamer-card.theme-nebula-vortex:hover {
  box-shadow: 0 25px 50px rgba(139, 92, 246, 0.45), inset 0 0 45px rgba(236, 72, 153, 0.4) !important;
  border-color: #EC4899 !important;
}
.gamer-card.theme-nebula-vortex > * { position: relative; z-index: 2; }

/* Theme: Lava Flow Chamber (theme-lava-flow) */
.gamer-card.theme-lava-flow {
  background: linear-gradient(135deg, #1f0505 0%, #0c0101 100%) !important;
  border-color: #EF4444 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.95), inset 0 0 25px rgba(239, 68, 68, 0.2) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-lava-flow::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: 
    radial-gradient(circle at 15% 85%, rgba(239, 68, 68, 0.35) 0%, transparent 60%),
    radial-gradient(circle at 85% 15%, rgba(249, 115, 22, 0.3) 0%, transparent 60%);
  filter: blur(25px);
  z-index: 0;
  pointer-events: none;
  animation: lavaFlowPulse 6s ease-in-out infinite alternate !important;
}
@keyframes lavaFlowPulse {
  0% { transform: scale(1) translate(0, 0); opacity: 0.6; }
  100% { transform: scale(1.15) translate(4%, -2%); opacity: 0.9; }
}
.gamer-card.theme-lava-flow::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 30% 95%, rgba(239, 68, 68, 0.8) 3px, transparent 4px),
    radial-gradient(circle at 70% 90%, rgba(249, 115, 22, 0.75) 2.5px, transparent 3.5px),
    radial-gradient(circle at 10% 75%, rgba(245, 158, 11, 0.8) 2px, transparent 3px),
    radial-gradient(circle at 90% 60%, rgba(239, 68, 68, 0.7) 3.5px, transparent 4.5px);
  background-size: 160px 200px;
  z-index: 0;
  pointer-events: none;
  animation: lavaEmberRise 6s linear infinite !important;
}
@keyframes lavaEmberRise {
  0% { background-position: 0 200px; opacity: 0; }
  15% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { background-position: -15px 0; opacity: 0; }
}
.gamer-card.theme-lava-flow:hover {
  box-shadow: 0 25px 50px rgba(249, 115, 22, 0.5), inset 0 0 45px rgba(239, 68, 68, 0.4) !important;
  border-color: #F97316 !important;
}
.gamer-card.theme-lava-flow > * { position: relative; z-index: 2; }

/* Theme: Northern Aurora Borealis (theme-aurora-borealis) */
.gamer-card.theme-aurora-borealis {
  background: linear-gradient(180deg, #020f18 0%, #000408 100%) !important;
  border-color: #10B981 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9), inset 0 0 30px rgba(16, 185, 129, 0.15) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-aurora-borealis::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: 
    radial-gradient(ellipse at top left, rgba(16, 185, 129, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse at top right, rgba(139, 92, 246, 0.25) 0%, transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
  animation: auroraWaving 10s ease-in-out infinite alternate !important;
}
@keyframes auroraWaving {
  0% { transform: scale(1) rotate(-5deg); opacity: 0.5; }
  100% { transform: scale(1.15) rotate(5deg); opacity: 0.95; }
}
.gamer-card.theme-aurora-borealis::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.25) 1px, transparent 1.5px),
    radial-gradient(circle at 80% 35%, rgba(255, 255, 255, 0.2) 1.5px, transparent 2px),
    radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.3) 1px, transparent 1.5px),
    radial-gradient(circle at 30% 45%, rgba(255, 255, 255, 0.15) 2px, transparent 3px);
  background-size: 150px 150px;
  z-index: 0;
  pointer-events: none;
  animation: auroraStarsTwinkle 8s linear infinite !important;
}
@keyframes auroraStarsTwinkle {
  0% { background-position: 0 0; opacity: 0.3; }
  50% { opacity: 0.9; }
  100% { background-position: 0 -150px; opacity: 0.3; }
}
.gamer-card.theme-aurora-borealis:hover {
  box-shadow: 0 25px 50px rgba(16, 185, 129, 0.35), inset 0 0 40px rgba(139, 92, 246, 0.3) !important;
  border-color: #8B5CF6 !important;
}
.gamer-card.theme-aurora-borealis > * { position: relative; z-index: 2; }

/* Theme: Digital Neon Glitch (theme-neon-glitch) */
.gamer-card.theme-neon-glitch {
  background: linear-gradient(135deg, #05010a 0%, #120120 100%) !important;
  border-color: #EC4899 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.95), inset 0 0 25px rgba(236, 72, 153, 0.2) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-neon-glitch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, rgba(236, 72, 153, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 15px 15px;
  z-index: 0;
  pointer-events: none;
  animation: neonGlitchGrid 5s linear infinite !important;
}
@keyframes neonGlitchGrid {
  0% { background-position: 0 0; }
  100% { background-position: 15px 15px; }
}
.gamer-card.theme-neon-glitch::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 49%, rgba(236, 72, 153, 0.3) 50%, rgba(0, 255, 255, 0.3) 51%, transparent 52%);
  background-size: 100% 300%;
  opacity: 0.75;
  z-index: 0;
  pointer-events: none;
  animation: neonGlitchScanline 2.5s linear infinite !important;
}
@keyframes neonGlitchScanline {
  0% { background-position: 0 300%; }
  100% { background-position: 0 -300%; }
}
.gamer-card.theme-neon-glitch:hover {
  box-shadow: 0 25px 50px rgba(236, 72, 153, 0.4), inset 0 0 40px rgba(0, 255, 255, 0.3) !important;
  border-color: #00FFFF !important;
  animation: neonCardGlitchJitter 0.2s steps(2) infinite !important;
}
@keyframes neonCardGlitchJitter {
  0% { transform: translate(0, 0); }
  50% { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}
.gamer-card.theme-neon-glitch > * { position: relative; z-index: 2; }

/* Theme: Infernal Fire Storm (theme-fire-storm) */
.gamer-card.theme-fire-storm {
  background: radial-gradient(circle at center, #1b0702 20%, #300c01 60%, #0a0200 100%) !important;
  border-color: #F97316 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.95), inset 0 0 30px rgba(249, 115, 22, 0.2) !important;
  position: relative;
  overflow: hidden;
}
.gamer-card.theme-fire-storm::before {
  content: '';
  position: absolute;
  inset: -15%;
  background: radial-gradient(circle at 50% 80%, rgba(249, 115, 22, 0.3) 0%, transparent 60%);
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
  animation: fireStormCorePulse 4s ease-in-out infinite alternate !important;
}
@keyframes fireStormCorePulse {
  0% { transform: scale(0.9) translate(0, 0); opacity: 0.5; }
  100% { transform: scale(1.1) translate(2%, -3%); opacity: 0.85; }
}
.gamer-card.theme-fire-storm::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 95%, rgba(249, 115, 22, 0.9) 3.5px, transparent 4.5px),
    radial-gradient(circle at 50% 90%, rgba(239, 68, 68, 0.85) 2.5px, transparent 3.5px),
    radial-gradient(circle at 80% 92%, rgba(245, 158, 11, 0.9) 3px, transparent 4px),
    radial-gradient(circle at 35% 80%, rgba(249, 115, 22, 0.8) 2px, transparent 3px),
    radial-gradient(circle at 65% 75%, rgba(239, 68, 68, 0.75) 4px, transparent 5px);
  background-size: 200px 240px;
  z-index: 0;
  pointer-events: none;
  animation: fireStormEmberDrift 4s linear infinite !important;
}
@keyframes fireStormEmberDrift {
  0% { background-position: 0 240px; opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { background-position: -25px 0; opacity: 0; }
}
.gamer-card.theme-fire-storm:hover {
  box-shadow: 0 25px 50px rgba(249, 115, 22, 0.55), inset 0 0 45px rgba(239, 68, 68, 0.45) !important;
  border-color: #EF4444 !important;
}
.gamer-card.theme-fire-storm > * { position: relative; z-index: 2; }


/* --- NEW HIGH-FIDELITY BORDER AURAS --- */

/* Border: Prism Diamond */
.avatar-ring.border-diamond {
  border: 4px solid #F1F5F9 !important;
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.8),
    0 0 10px rgba(56, 189, 248, 0.5),
    inset 0 0 10px rgba(255, 255, 255, 0.45) !important;
  animation: diamondShimmer 4s ease-in-out infinite alternate !important;
}
@keyframes diamondShimmer {
  0% { border-color: #F8FAFC; filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.35)) hue-rotate(0deg); }
  50% { border-color: #E2E8F0; filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.75)) hue-rotate(180deg); }
  100% { border-color: #F8FAFC; filter: drop-shadow(0 0 2px rgba(16, 185, 129, 0.35)) hue-rotate(360deg); }
}

/* Border: Phoenix Solar Prominence */
.avatar-ring.border-phoenix {
  border: 4px solid #EF4444 !important;
  box-shadow: 
    0 0 18px rgba(239, 68, 68, 0.95),
    0 0 30px rgba(249, 115, 22, 0.8),
    inset 0 0 12px rgba(245, 158, 11, 0.6) !important;
  animation: phoenixSun 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate !important;
}
@keyframes phoenixSun {
  0% { transform: scale(1); border-color: #EF4444; }
  100% { transform: scale(1.04); border-color: #F59E0B; box-shadow: 0 0 32px rgba(245, 158, 11, 1), 0 0 45px rgba(239, 68, 68, 0.9), inset 0 0 16px rgba(249, 115, 22, 0.85); }
}

/* Border: Cyber Corruption Glitch */
.avatar-ring.border-glitch {
  border: 4px solid #10B981 !important;
  box-shadow: 
    0 0 18px rgba(16, 185, 129, 0.8),
    inset 0 0 8px rgba(16, 185, 129, 0.5) !important;
  animation: glitchAura 0.3s linear infinite !important;
}
@keyframes glitchAura {
  0% { transform: translate(0); filter: hue-rotate(0deg); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(-2px, -1px); filter: hue-rotate(35deg); }
  60% { transform: translate(2px, 1px); }
  80% { transform: translate(2px, -1px); filter: hue-rotate(-35deg); }
  100% { transform: translate(0); filter: hue-rotate(0deg); }
}

/* Border: Nebula Void Vortex */
.avatar-ring.border-nebula {
  border: 4px solid transparent !important;
  background-image: linear-gradient(#110c22, #110c22), linear-gradient(135deg, #8B5CF6, #3B82F6, #EC4899, #8B5CF6) !important;
  background-origin: border-box !important;
  background-clip: content-box, border-box !important;
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.85), inset 0 0 8px rgba(236, 72, 153, 0.4) !important;
  animation: nebulaSpin 6s linear infinite !important;
  background-size: 200% 200% !important;
}
@keyframes nebulaSpin {
  0% { background-position: 0% 50%; transform: rotate(0deg); }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; transform: rotate(360deg); }
}

/* Border: Cyber Neon Glitch (border-glitch-neon) */
.avatar-ring.border-glitch-neon {
  border: 4px solid transparent !important;
  background-image: linear-gradient(#0f172a, #0f172a), linear-gradient(135deg, #FF007F, #00FFFF, #FFD700, #FF007F) !important;
  background-origin: border-box !important;
  background-clip: content-box, border-box !important;
  background-size: 300% 300% !important;
  box-shadow: 0 0 20px rgba(255, 0, 127, 0.75), inset 0 0 10px rgba(0, 255, 255, 0.4) !important;
  animation: neonGlitchBorder 0.4s steps(4) infinite !important;
}
@keyframes neonGlitchBorder {
  0% { background-position: 0% 50%; filter: hue-rotate(0deg) skewX(0deg); }
  25% { background-position: 50% 100%; filter: hue-rotate(90deg) skewX(2deg); box-shadow: 0 0 25px rgba(0, 255, 255, 0.9), inset 0 0 12px rgba(255, 215, 0, 0.5) !important; }
  50% { background-position: 100% 50%; filter: hue-rotate(180deg) skewX(-2deg); }
  75% { background-position: 50% 0%; filter: hue-rotate(270deg) skewX(1deg); box-shadow: 0 0 25px rgba(255, 215, 0, 0.9), inset 0 0 12px rgba(255, 0, 127, 0.5) !important; }
  100% { background-position: 0% 50%; filter: hue-rotate(360deg) skewX(0deg); }
}

/* Border: Hyper Glowing Gold (border-hyper-glow) */
.avatar-ring.border-hyper-glow {
  border: 4px solid #F59E0B !important;
  box-shadow: 
    0 0 25px rgba(245, 158, 11, 0.9),
    0 0 45px rgba(251, 191, 36, 0.6),
    inset 0 0 15px rgba(253, 224, 71, 0.7) !important;
  animation: hyperGlowPulse 1.8s ease-in-out infinite alternate !important;
}
@keyframes hyperGlowPulse {
  0% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 15px rgba(245, 158, 11, 0.6), inset 0 0 8px rgba(253, 224, 71, 0.4) !important; }
  100% { transform: scale(1.05); filter: brightness(1.4); box-shadow: 0 0 35px rgba(245, 158, 11, 1.2), 0 0 60px rgba(251, 191, 36, 0.95), inset 0 0 22px rgba(253, 224, 71, 0.9) !important; }
}

/* Border: Liquid Plasma Wave (border-plasma-wave) */
.avatar-ring.border-plasma-wave {
  border: 4px solid transparent !important;
  background-image: linear-gradient(#0b0f19, #0b0f19), linear-gradient(90deg, #3B82F6, #8B5CF6, #EC4899, #3B82F6) !important;
  background-origin: border-box !important;
  background-clip: content-box, border-box !important;
  background-size: 200% 200% !important;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.7), inset 0 0 10px rgba(236, 72, 153, 0.5) !important;
  animation: plasmaShift 4s ease-in-out infinite alternate !important;
}
@keyframes plasmaShift {
  0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
  50% { background-position: 100% 50%; box-shadow: 0 0 30px rgba(236, 72, 153, 0.9), inset 0 0 15px rgba(59, 130, 246, 0.7) !important; }
  100% { background-position: 0% 50%; filter: hue-rotate(360deg); }
}

/* Border: Solar Fire Ring (border-fire-ring) */
.avatar-ring.border-fire-ring {
  border: 4px solid #EF4444 !important;
  box-shadow: 
    0 0 22px rgba(239, 68, 68, 0.95),
    0 0 40px rgba(249, 115, 22, 0.8),
    inset 0 0 12px rgba(245, 158, 11, 0.6) !important;
  animation: solarFlareFlicker 0.15s ease-in-out infinite alternate !important;
}
@keyframes solarFlareFlicker {
  0% { transform: scale(1) rotate(0deg); box-shadow: 0 0 18px rgba(239, 68, 68, 0.8), 0 0 30px rgba(249, 115, 22, 0.6), inset 0 0 10px rgba(245, 158, 11, 0.5) !important; }
  100% { transform: scale(1.03) rotate(0.5deg); box-shadow: 0 0 28px rgba(239, 68, 68, 1.1), 0 0 50px rgba(249, 115, 22, 0.95), inset 0 0 15px rgba(245, 158, 11, 0.7) !important; border-color: #F97316 !important; }
}

/* Border: Cosmic Void Spiral (border-void-spiral) */
.avatar-ring.border-void-spiral {
  border: 4px solid transparent !important;
  background-image: linear-gradient(#05020a, #05020a), linear-gradient(45deg, #11052c, #8B5CF6, #020005, #EC4899) !important;
  background-origin: border-box !important;
  background-clip: content-box, border-box !important;
  background-size: 200% 200% !important;
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.8), inset 0 0 10px rgba(0, 0, 0, 0.9) !important;
  animation: voidSpiralSpin 8s linear infinite !important;
}
@keyframes voidSpiralSpin {
  0% { background-position: 0% 0%; transform: rotate(0deg); }
  50% { background-position: 100% 100%; box-shadow: 0 0 35px rgba(236, 72, 153, 0.9), inset 0 0 12px rgba(139, 92, 246, 0.4) !important; }
  100% { background-position: 0% 0%; transform: rotate(-360deg); }
}

/* ==========================================================================
   LOCKER INVENTORY: THEME PREVIEW CARD OVERRIDES
   Overrides the global .gamer-card !important rules so theme thumbnails
   render as compact preview panels inside inventory item slots.
   ========================================================================== */

.theme-preview-card.gamer-card {
  padding: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  width: 100% !important;
  height: 90px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
/* Ensure theme preview children are still above the animated ::before/::after */
.theme-preview-card.gamer-card > * {
  position: relative !important;
  z-index: 3 !important;
}

/* Border preview ring sizing in the inventory — override global avatar-ring rules */
.border-preview-ring.avatar-ring {
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 0 !important;
}
.border-preview-ring.avatar-ring::before {
  display: none !important; /* Hide the default gradient ring outline */
}

/* ==========================================================================
   GAMER CARD & AVATAR BASE SYSTEM (Shared globally for Popups and Profile)
   ========================================================================== */

.gamer-card {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  padding: 40px 24px !important;
  text-align: center !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Level progression circle around Avatar */
.avatar-ring {
  position: relative !important;
  width: 140px !important;
  height: 140px !important;
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.avatar-ring::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  padding: 4px !important;
  background: linear-gradient(135deg, #38BDF8, #818CF8, #EC4899) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.25) !important;
}

.gamer-avatar {
  font-size: 4.5rem !important;
  background: rgba(30, 41, 59, 0.8) !important;
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 2px 8px rgba(255,255,255,0.05) !important;
}

.gamer-name {
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin-bottom: 4px !important;
  letter-spacing: -0.5px !important;
  background: linear-gradient(to bottom, #ffffff, #cbd5e1) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.gamer-tagline {
  font-size: 1rem !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 16px !important;
  padding: 0 10px !important;
  line-height: 1.4 !important;
  max-width: 260px !important;
}

.fav-game-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(56, 189, 248, 0.1) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  color: #38BDF8 !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 6px 16px !important;
  border-radius: 50px !important;
  margin-bottom: 30px !important;
}

/* Dynamic Gamer XP Bar */
.xp-section {
  width: 100% !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  padding-top: 24px !important;
  margin-bottom: 20px !important;
  text-align: left !important;
}
.xp-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}
.xp-title {
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #cbd5e1 !important;
}
.xp-level {
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  background: linear-gradient(135deg, #EC4899, #F43F5E) !important;
  color: white !important;
  padding: 2px 10px !important;
  border-radius: 6px !important;
}
.xp-track {
  height: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 6px !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
}
.xp-fill {
  height: 100% !important;
  width: 0% !important;
  background: linear-gradient(90deg, #38BDF8, #818CF8, #EC4899) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.xp-text {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-align: right !important;
}

/* Modal Overlay container for Player Card */
.player-card-modal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(5, 8, 17, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 1100 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  transition: opacity 0.3s ease !important;
  padding: 20px !important;
}

.player-card-modal.active {
  display: flex !important;
  opacity: 1 !important;
  animation: modalFadeIn 0.3s ease forwards !important;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.player-card-modal-content {
  width: 100% !important;
  max-width: 420px !important;
  position: relative !important;
  animation: modalSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
@keyframes modalSlideUp {
  from { transform: translateY(40px) scale(0.94); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* Modal close button standard positioning */
.player-card-close-btn {
  position: absolute !important;
  top: 15px !important;
  right: 20px !important;
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  font-size: 1.2rem !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  z-index: 20 !important;
}
.player-card-close-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #EF4444 !important;
  color: #fff !important;
  transform: scale(1.05) !important;
}

/* Leaderboard cursor and hover glows */
.lb-row {
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.lb-row:hover {
  background: rgba(56, 189, 248, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.1) !important;
  transform: translateY(-1px) scale(1.008) !important;
}

/* --- GEMS STORE STYLE SUITE --- */
.store-card {
  background: rgba(30, 41, 59, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 16px !important;
  padding: 16px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s !important;
  cursor: pointer !important;
}
.store-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
}
.store-card--popular {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.5) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15) !important;
}
.store-card--popular:hover {
  border-color: #8b5cf6 !important;
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.3) !important;
}
.store-card__tag {
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #8b5cf6 !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 10px rgba(139, 92, 246, 0.4) !important;
}
.spinner {
  width: 50px !important;
  height: 50px !important;
  border: 4px solid rgba(56,189,248,0.1) !important;
  border-top-color: #38BDF8 !important;
  border-radius: 50% !important;
  animation: spin 1s linear infinite !important;
  margin: 0 auto 25px auto !important;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- PROFILE IMAGE & AVATAR FIT RULES --- */
.gamer-avatar {
  overflow: hidden !important;
}
.gamer-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* Leaderboard avatar image compatibility */
.lb-avatar {
  overflow: hidden !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.lb-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* Modal avatar picker custom preview */
.avatar-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* Drag & Drop Upload Zone Hover State */
#avatar-upload-dropzone:hover {
  border-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.05) !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.1) !important;
}
#avatar-upload-dropzone.dragging {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  transform: scale(1.02) !important;
}

/* Google Auth Button Hovers */
.btn--google-auth:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05) !important;
}
.btn--google-auth:active {
  transform: scale(0.98) !important;
}

/* ==========================================================================
   🔑 PREMIUM GLASSMORPHIC AUTHENTICATION MODALS
   ========================================================================== */

/* Overwrite Chrome Autofill baby blue background */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover, 
.auth-input:-webkit-autofill:focus, 
.auth-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #0b0f19 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Glassmorphic Overlay Backdrop */
.auth-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(5, 8, 17, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 1200 !important;
  display: none; /* Display flex/none is toggled dynamically by JS */
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0;
  animation: authFadeIn 0.3s ease forwards !important;
}

@keyframes authFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slate Glass Card */
.auth-card {
  background: rgba(15, 23, 42, 0.9) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 40px 30px !important;
  border-radius: 24px !important;
  width: 100% !important;
  max-width: 400px !important;
  text-align: center !important;
  position: relative !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  animation: authModalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes authModalSlideUp {
  from { transform: translateY(40px) scale(0.94); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* Custom Circular Close Button */
.auth-close {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
}
.auth-close:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  transform: rotate(90deg) !important;
}

/* Title Styling */
.auth-title {
  margin-bottom: 25px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-size: 1.8rem !important;
  letter-spacing: -0.5px !important;
  background: linear-gradient(135deg, #ffffff, #94a3b8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-align: center !important;
}

/* Custom Inputs */
.auth-input {
  width: 100% !important;
  padding: 14px 16px !important;
  margin-bottom: 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(10, 15, 30, 0.6) !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.95rem !important;
  transition: all 0.25s ease !important;
}
.auth-input:focus {
  outline: none !important;
  border-color: #38bdf8 !important;
  background: rgba(10, 15, 30, 0.8) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25) !important;
}
.auth-input::placeholder {
  color: #475569 !important;
}

/* Submit Button Overhaul */
.auth-submit-btn {
  width: 100% !important;
  padding: 14px !important;
  border-radius: 12px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #ff6b6b, #ff8e53) !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 8px 24px rgba(255, 107, 107, 0.3) !important;
  transition: all 0.25s ease !important;
}
.auth-submit-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(255, 107, 107, 0.45) !important;
}
.auth-submit-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Divider Styling */
.auth-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 20px 0 !important;
  color: #475569 !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  gap: 12px !important;
}
.auth-divider::before,
.auth-divider::after {
  content: "" !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  flex: 1 !important;
}

/* Continue with Google button Overhaul */
.auth-google-btn {
  width: 100% !important;
  padding: 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.25s ease !important;
}
.auth-google-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05) !important;
}
.auth-google-btn:active {
  transform: scale(0.98) !important;
}

/* Toggle mode text container */
.auth-toggle-container {
  margin-top: 20px !important;
  color: #64748b !important;
  font-size: 0.9rem !important;
}
.auth-toggle-link {
  color: #38bdf8 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin-left: 5px !important;
  transition: color 0.2s ease !important;
}
.auth-toggle-link:hover {
  color: #7dd3fc !important;
  text-decoration: underline !important;
}

/* Password Visibility Toggle Wrapper & Button */
.auth-password-container {
  position: relative !important;
  width: 100% !important;
}
.auth-password-toggle {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
  cursor: pointer !important;
  font-size: 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  height: auto !important;
  line-height: 1 !important;
  z-index: 10 !important;
  user-select: none !important;
  transition: color 0.2s ease, transform 0.15s ease !important;
}
.auth-password-toggle:hover {
  color: #94a3b8 !important;
  transform: translateY(-50%) scale(1.1) !important;
}
.auth-password-toggle:active {
  transform: translateY(-50%) scale(0.9) !important;
}
#auth-password {
  padding-right: 45px !important;
}

/* ==========================================================================
   📖 ArcOnboarding Tutorial Slideshow
   ========================================================================== */

.tutorial-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(5, 8, 17, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  z-index: 1300 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0;
  animation: authFadeIn 0.3s ease forwards !important;
}

.tutorial-card {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 40px 30px !important;
  border-radius: 28px !important;
  width: 100% !important;
  max-width: 480px !important;
  text-align: center !important;
  position: relative !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  animation: authModalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: 480px !important;
}

.tutorial-close {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #64748b !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
  z-index: 20 !important;
}
.tutorial-close:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  transform: rotate(90deg) !important;
}

/* Slide elements styling */
.tutorial-slide {
  display: none;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
  width: 100% !important;
  animation: tutorialSlideFade 0.3s ease forwards !important;
}
.tutorial-slide.active {
  display: flex !important;
}

@keyframes tutorialSlideFade {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.tutorial-icon {
  font-size: 4.5rem !important;
  margin-bottom: 20px !important;
  filter: drop-shadow(0 0 20px rgba(167, 139, 250, 0.3)) !important;
  animation: floatIcon 3s ease-in-out infinite !important;
}
@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.tutorial-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 900 !important;
  margin-bottom: 12px !important;
  background: linear-gradient(135deg, #ffffff, #c084fc) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: -0.5px !important;
  text-align: center !important;
}

.tutorial-text {
  color: #94a3b8 !important;
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
  font-weight: 500 !important;
  text-align: center !important;
}

.tutorial-badge-info {
  background: rgba(167, 139, 250, 0.1) !important;
  border: 1px solid rgba(167, 139, 250, 0.15) !important;
  color: #c084fc !important;
  padding: 8px 16px !important;
  border-radius: 12px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-top: auto !important;
  margin-bottom: 10px !important;
}

/* Footer controls */
.tutorial-footer {
  width: 100% !important;
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 15px !important;
}

.tutorial-dots {
  display: flex !important;
  gap: 8px !important;
}
.tutorial-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}
.tutorial-dot.active {
  background: #a78bfa !important;
  width: 24px !important;
  border-radius: 4px !important;
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.5) !important;
}

.tutorial-nav {
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 15px !important;
}

.tutorial-btn {
  flex: 1 !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.tutorial-btn--back {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}
.tutorial-btn--back:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
.tutorial-btn--back:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}
.tutorial-btn--next {
  background: linear-gradient(135deg, #a78bfa, #818cf8) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(167, 139, 250, 0.3) !important;
}
.tutorial-btn--next:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.45) !important;
}
.tutorial-btn--next:active {
  transform: translateY(0) scale(0.98) !important;
}

/* ==========================================================================
   🎮 GAME PRE-SCREEN (START GAME MODAL / VIEW)
   ========================================================================== */
.game-pre-screen-card {
  background: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  padding: 40px 30px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 500px !important;
  margin: 0 auto 40px !important;
  animation: authModalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

.pre-screen-icon {
  font-size: 5rem !important;
  margin-bottom: 20px !important;
  animation: floatIcon 3s ease-in-out infinite !important;
}

.pre-screen-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  margin-bottom: 10px !important;
  background: linear-gradient(135deg, #ffffff, #a78bfa) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: -0.5px !important;
  text-align: center !important;
}

.pre-screen-desc {
  color: #94a3b8 !important;
  font-size: 1.05rem !important;
  line-height: 1.5 !important;
  margin-bottom: 25px !important;
  max-width: 400px !important;
  text-align: center !important;
}

.pre-screen-divider {
  width: 100% !important;
  height: 1px !important;
  background: rgba(255,255,255,0.08) !important;
  margin: 20px 0 !important;
}

.pre-screen-section-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #c084fc !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 15px !important;
  text-align: left !important;
  width: 100% !important;
}

.pre-screen-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  margin-bottom: 25px !important;
  text-align: left !important;
}

.pre-screen-list-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: 0.98rem !important;
  line-height: 1.5 !important;
  color: #cbd5e1 !important;
}

.pre-screen-list-item span {
  font-size: 1.3rem !important;
  line-height: 1 !important;
}

.pre-screen-start-btn {
  width: 100% !important;
  padding: 16px !important;
  border-radius: 16px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #38BDF8, #818CF8) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.3) !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pre-screen-start-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(56, 189, 248, 0.45) !important;
}
.pre-screen-start-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

/* ==========================================================================
   🎮 FULLSCREEN DISTRACTION-FREE ARCADE CONSOLE VIEW (body.game-active)
   ========================================================================== */

body.game-active #top-nav {
  display: none !important;
}

body.game-active #bottom-nav {
  display: none !important;
}

body.game-active .back-link {
  display: none !important;
}

body.game-active #game-header {
  display: none !important;
}

body.game-active #game-pre-screen {
  display: none !important;
}

body.game-active .more-games-section {
  display: none !important;
}

body.game-active {
  background: radial-gradient(circle, #0e0e1e 0%, #03030a 100%) !important;
  overscroll-behavior-y: none !important;
  overflow: hidden !important;
}

body.game-active .game-main {
  padding: 0 !important;
  margin: 0 !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.game-active .container {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 550px !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.game-active #game-container {
  margin: 0 auto !important;
  width: 100% !important;
  max-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Custom Card Animations (Effects) ── */
.gamer-card.anim-pulse {
  animation: cardPulse 3s ease-in-out infinite alternate !important;
}
@keyframes cardPulse {
  0% { box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
  100% { box-shadow: 0 0 25px rgba(167, 139, 250, 0.4), 0 10px 30px rgba(0,0,0,0.6); }
}

.gamer-card.anim-shimmer {
  position: relative;
  overflow: hidden;
}
.gamer-card.anim-shimmer::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 55%
  );
  animation: cardShimmer 6s infinite linear;
  pointer-events: none;
  z-index: 1;
}
@keyframes cardShimmer {
  0% { transform: translate(-30%, -30%) rotate(0deg); }
  100% { transform: translate(30%, 30%) rotate(0deg); }
}

.gamer-card.anim-glitch {
  animation: cardGlitch 4s steps(2, start) infinite !important;
}
@keyframes cardGlitch {
  0%, 100% { filter: hue-rotate(0deg) saturate(1); }
  45% { filter: hue-rotate(15deg) saturate(1.15); transform: translate(1px, -1px); }
  46% { filter: hue-rotate(-10deg) saturate(1.2); transform: translate(-1px, 1px); }
  47% { filter: hue-rotate(0deg) saturate(1); transform: translate(0, 0); }
}

.gamer-card.anim-particles {
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06) 1.5px, transparent 1.5px),
                    radial-gradient(circle at 75% 40%, rgba(255,255,255,0.09) 2px, transparent 2px),
                    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.05) 1.5px, transparent 1.5px) !important;
  background-size: 100px 100px !important;
  animation: particleFloat 12s linear infinite !important;
}
@keyframes particleFloat {
  0% { background-position: 0px 0px, 0px 0px, 0px 0px; }
  100% { background-position: 100px -100px, -50px 100px, 50px -50px; }
}

.gamer-card.anim-snow {
  background-image: radial-gradient(circle at 10% 10%, rgba(255,255,255,0.06) 1.5px, transparent 1.5px),
                    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 2px, transparent 2px),
                    radial-gradient(circle at 40% 60%, rgba(255,255,255,0.06) 1px, transparent 1px) !important;
  background-size: 120px 120px !important;
  animation: snowFall 7s linear infinite !important;
}
@keyframes snowFall {
  0% { background-position: 0px 0px, 0px 0px, 0px 0px; }
  100% { background-position: 40px 120px, 20px 120px, -10px 120px; }
}

/* ── Custom Card Name Plate Frames ── */
.gamer-card.frame-wooden {
  border: 6px solid #8B4513 !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}
.gamer-card.frame-steel {
  border: 6px solid #b0c4de !important;
  box-shadow: inset 0 0 12px rgba(255,255,255,0.4), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}
.gamer-card.frame-neon {
  border: 4px solid #38BDF8 !important;
  box-shadow: 0 0 25px rgba(56,189,248,0.7), inset 0 0 15px rgba(56,189,248,0.35), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}
.gamer-card.frame-golden {
  border: 5px solid #F59E0B !important;
  box-shadow: 0 0 30px rgba(245,158,11,0.8), inset 0 0 20px rgba(245,158,11,0.45), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
  animation: goldenPulse 2s infinite alternate !important;
}
@keyframes goldenPulse {
  0% { box-shadow: 0 0 15px rgba(245,158,11,0.5), inset 0 0 10px rgba(245,158,11,0.3), 0 20px 40px rgba(0, 0, 0, 0.6); }
  100% { box-shadow: 0 0 35px rgba(245,158,11,0.9), inset 0 0 25px rgba(245,158,11,0.6), 0 20px 40px rgba(0, 0, 0, 0.6); }
}
.gamer-card.frame-rainbow {
  border: 5px solid transparent !important;
  background-image: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.95)), linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: 0 0 25px rgba(255,0,0,0.5), 0 20px 40px rgba(0,0,0,0.6) !important;
  animation: rainbowFrame 6s linear infinite !important;
}
@keyframes rainbowFrame {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}