/* ==========================================================================
   DESIGN SYSTEM
   ========================================================================== */
:root {
  --bg: #0a0a0c;
  --bg-elev: #111114;
  --bg-elev-2: #16161a;
  --surface: rgba(255,255,255,0.025);
  --surface-hover: rgba(255,255,255,0.05);
  --border: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);
  --text: #f5f5f7;
  --text-dim: #a9a9b3;
  --text-faint: #7d7d88;

  /* Accent principal = blanc lumineux (Apple/Vercel style) */
  --accent: #f5f5f7;
  --accent-2: #ffffff;
  --accent-glow: rgba(255,255,255,0.18);
  --accent-soft: rgba(255,255,255,0.08);

  /* Or = uniquement pour la victoire / les prix / le rang */
  --premium: #d4af37;
  --premium-2: #f0c860;
  --premium-glow: rgba(212,175,55,0.30);
  --premium-soft: rgba(212,175,55,0.10);

  --success: #10c88c;
  --warning: #f5a623;
  --danger: #ff4d5e;
  --info: #5b8aff;

  --gold: #d4af37;
  --silver: #c5ccdb;
  --bronze: #cd7f32;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --shadow-sm: 0 4px 12px rgba(0,0,0,0.4);
  --shadow: 0 18px 50px rgba(0,0,0,0.55);
  --shadow-lg: 0 30px 80px rgba(0,0,0,0.65);
  --shadow-glow: 0 0 60px var(--accent-glow);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  /* Police pour les chiffres / prix / pourcentages dans l'UI : */
  --font-numeric: 'Space Grotesk', sans-serif;

  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 480ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================================
   B — POLISH UX : skeletons, animations, micro-interactions
   ============================================================================ */

/* Skeleton loaders pour remplacer les "Chargement..." */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    var(--surface-hover) 50%,
    var(--surface) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s infinite;
  border-radius: var(--radius-sm);
  display: block;
}
.skeleton-card {
  padding: 1.2rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.8rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.skeleton-emblem { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; }
.skeleton-line { height: 14px; margin-bottom: 0.5rem; }
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.long { width: 90%; }
.skeleton-grid {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Animations boutons : feedback tactile */
.btn:not(:disabled):active {
  transform: scale(0.97);
  transition: transform 60ms ease-out;
}
.btn { will-change: transform; }

/* Ripple effect au clic */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.25) 0%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}
.btn.is-rippling::after {
  opacity: 1;
  transition: opacity 0.05s;
}

/* Toast amélioré (plus moderne + animations fluides) */
@keyframes toast-slide-in {
  0% { transform: translateX(120%) scale(0.95); opacity: 0; }
  60% { transform: translateX(-5%) scale(1.02); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes toast-slide-out {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  100% { transform: translateX(120%) scale(0.95); opacity: 0; }
}
.toast {
  animation: toast-slide-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.toast.toast-leaving {
  animation: toast-slide-out 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Modal animation plus fluide */
@keyframes modal-fade-in {
  from { opacity: 0; backdrop-filter: none; }
  to { opacity: 1; backdrop-filter: none; }
}
@keyframes modal-content-pop {
  0% { opacity: 0; transform: scale(0.92) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-overlay.active {
  animation: modal-fade-in 0.25s ease-out forwards;
}
.modal-overlay.active .modal {
  animation: modal-content-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Hover plus alive sur les cartes */
.order-card, .game-card, .pricing-card, .blog-card, .feature-card {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.order-card:hover, .game-card:hover, .feature-card:hover {
  transform: translateY(-2px);
}

/* Focus visible plus stylé pour accessibilité */
:focus-visible {
  outline: 2px solid var(--premium);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbar plus discrète */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 10px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ============================================================================
   C8 — FAQ premium styling
   ============================================================================ */
.faq-item {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq-item:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.faq-item[open] {
  background: var(--bg-elev-2);
  border-color: rgba(212,175,55,0.4);
  box-shadow: 0 10px 34px rgba(0,0,0,0.28);
}
.faq-item summary {
  padding: 1.35rem 1.5rem;
  font-weight: 600;
  font-size: 1.02rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}
.faq-item[open] summary { color: var(--premium); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '↗';
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--premium);
  transform: rotate(90deg);
  transition: transform 0.35s var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  flex-shrink: 0;
}
.faq-item:hover summary::after { border-color: var(--premium); }
.faq-item[open] summary::after {
  content: '↗';
  transform: rotate(0deg);
  background: linear-gradient(135deg, #d4af37, #f0c860);
  border-color: transparent;
  color: #1a1408;
}
.faq-item .faq-answer {
  padding: 0 1.5rem 1.4rem;
  color: var(--text-dim);
  line-height: 1.7;
  font-size: 0.95rem;
  animation: faq-slide-down 0.3s ease-out;
}
@keyframes faq-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.faq-item .faq-answer strong { color: var(--text); }

/* ============================================================================
   RTL support pour l'arabe (direction inversée sur les éléments principaux)
   ============================================================================ */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .navbar { direction: rtl; }
html[dir="rtl"] .container { direction: rtl; }
html[dir="rtl"] .dash-nav-link svg { transform: scaleX(-1); }
html[dir="rtl"] .faq-item summary::after { /* le + reste centré */ }
/* On garde les nombres/prix en LTR pour la lisibilité */
html[dir="rtl"] .order-price,
html[dir="rtl"] .price,
html[dir="rtl"] [data-keep-ltr] { direction: ltr; display: inline-block; }



/* ============================================================================
   C7 — Mode jour (thème clair conservateur)
   Activé via <html data-theme="light">. Le branding gold reste préservé.
   ============================================================================ */
html[data-theme="light"] {
  --bg: #f5f5f7;
  --bg-elev: #ffffff;
  --bg-elev-2: #fafafa;
  --surface: rgba(0,0,0,0.025);
  --surface-hover: rgba(0,0,0,0.05);
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.16);
  --text: #1a1a1c;
  --text-dim: #6a6a72;
  --text-faint: #9a9aa2;

  --accent: #1a1a1c;
  --accent-2: #000000;
  --accent-glow: rgba(0,0,0,0.10);
  --accent-soft: rgba(0,0,0,0.05);

  /* Or conservé (même teinte) */
  --premium-glow: rgba(212,175,55,0.30);
  --premium-soft: rgba(212,175,55,0.10);

  --shadow-sm: 0 4px 12px rgba(0,0,0,0.06);
  --shadow: 0 18px 50px rgba(0,0,0,0.10);
  --shadow-lg: 0 30px 80px rgba(0,0,0,0.14);
}
html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

/* Transition douce entre les thèmes */
html, body, .btn, .card, .modal, .dash-panel, .navbar, .order-card,
.dash-nav-link, .badge, .input, .select, textarea, input,
.tab, .table-wrap, .game-card, .pricing-card, .blog-card, .feature-card {
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* === PERFORMANCE OPTIMIZATIONS === */
/* Respect reduced-motion users (also speeds up older PCs) */
/* Final ElevateBoost card polish: clean mark, no EB badge, mobile-safe layout */
.game-card-v3-eb {
  display: none !important;
}
.game-card-v3-watermark {
  display: none !important;
}
.game-card-v3-name {
  max-width: 50% !important;
  padding-top: 0 !important;
  margin-top: auto !important;
}
.game-card-v3-foot {
  padding-left: 0 !important;
}
.header-actions .online-count {
  display: inline-flex !important;
}
@media (max-width: 720px) {
  .game-card-v3 {
    min-height: 166px !important;
  }
  .game-card-v3-inner {
    min-height: 166px !important;
    padding: 0.85rem !important;
  }
  .game-card-v3-signature {
    left: 0.85rem !important;
    top: 0.78rem !important;
    transform: scale(0.72) !important;
    transform-origin: left top !important;
  }
  .game-card-v3-watermark {
    display: none !important;
  }
  .game-card-v3-name {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-width: 54% !important;
    font-size: 1rem !important;
    line-height: 1.06 !important;
    margin-top: auto !important;
  }
  .game-card-v3-foot {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: auto !important;
  }
  .game-card-v3-arrow {
    width: 30px !important;
    height: 30px !important;
  }
  .game-card-v3-art-slot,
  .game-card-v3[data-game="overwatch"] .game-card-v3-art-slot {
    width: 49% !important;
  }
  .game-card-v3-art-slot img,
  .game-card-v3[data-game="overwatch"] .game-card-v3-art-slot img {
    right: -7% !important;
    bottom: 0 !important;
    width: 116% !important;
    height: 94% !important;
  }
  .game-card-v3[data-game="lol"] .game-card-v3-art-slot img {
    right: -18% !important;
    width: 150% !important;
    height: 116% !important;
  }
  .header-actions .online-count {
    display: inline-flex !important;
    padding: 0.42rem 0.55rem !important;
    gap: 0.32rem !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
  }
  .header-actions .online-count #onlineCount {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
  }
  .header-actions .online-count [data-i18n="nav.online"] {
    display: none !important;
  }
  .header-actions .online-count .dot {
    width: 6px !important;
    height: 6px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Lazy-render off-screen sections : the browser skips painting them until visible */
.perf-lazy {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

/* Catalogue jeux : affichage immédiat, sans "pop-in" au scroll */
.game-card-v3 {
  animation: none !important;
  opacity: 1;
  transform: none;
}

/* Global boost page polish: same dark base as the header, no outer calculator frame */
.page[data-page="boost"],
.page[data-page="boost"].active {
  background: #050506 !important;
  min-height: 100vh;
}
.page[data-page="boost"] .calc-wrap,
.page[data-page="boost"] .calc-wrap.adaptive-mode,
.page[data-page="boost"] .calc-wrap.adaptive-mode .calc-main,
.page[data-page="boost"] .calc-wrap.adaptive-mode .adaptive-calc-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.page[data-page="boost"] .calc-wrap::before,
.page[data-page="boost"] .calc-wrap::after,
.page[data-page="boost"] .calc-wrap.adaptive-mode .calc-main::before,
.page[data-page="boost"] .calc-wrap.adaptive-mode .calc-main::after {
  content: none !important;
  display: none !important;
}
.page[data-page="boost"] .adaptive-mode-header {
  border: 0 !important;
  box-shadow: none !important;
}
/* Disable expensive blurs when the user toggles low-perf mode (body class .lite-mode) */
body.lite-mode *,
body.lite-mode *::before,
body.lite-mode *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}
body.lite-mode * {
  animation: none !important;
  transition: none !important;
}
/* When user switches to another tab, pause infinite animations to save battery */
body:not(.tab-visible) [class*="anim-"]:not(:hover) { animation-play-state: paused; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

body::before {
  content: '';
  position: fixed;
  inset: -50%;
  background:
    radial-gradient(900px 700px at 20% 0%, rgba(212,175,55,0.06), transparent 60%),
    radial-gradient(800px 600px at 80% 100%, rgba(255,255,255,0.03), transparent 60%);
  z-index: -2;
  pointer-events: none;
  /* drift animation supprimée : trop coûteuse en GPU avec un blur 60px sur tout l'écran */
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 64px 64px;
  z-index: -1;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

@keyframes drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-5%, 5%) rotate(12deg); }
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
h4 { font-size: 1.2rem; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; outline: none; }
button { cursor: pointer; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.20); }

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.container { max-width: 1320px; margin: 0 auto; padding: 0 2rem; }
.gradient-text { background: linear-gradient(135deg, var(--premium), var(--premium-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.glass {
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: var(--radius-lg);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  /* PERF : transition ciblée sur transform/box-shadow/background uniquement
     (GPU compositor) au lieu de "all" qui force aussi des layout reflows. */
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
  position: relative;
}

.btn-primary {
  background: var(--accent);
  color: #0a0a0c;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
}

.btn-primary:hover { transform: translateY(-2px); background: var(--accent-2); box-shadow: 0 10px 28px rgba(255,255,255,0.12); }

/* Variante PREMIUM (or) — pour les CTAs spéciaux genre "Top 500", "VIP" */
.btn-premium {
  background: linear-gradient(135deg, var(--premium), var(--premium-2));
  color: #0a0a0c;
  box-shadow: 0 6px 20px var(--premium-glow);
}
.btn-premium:hover { transform: translateY(-2px); box-shadow: 0 12px 36px var(--premium-glow); }

.btn-ghost {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-ghost:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.85rem; }
.btn-danger { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.btn-danger:hover { background: rgba(239,68,68,0.25); }
.btn-success { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.btn-success:hover { background: rgba(34,197,94,0.25); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 500;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-success { background: rgba(34,197,94,0.15); color: #4ade80; }
.badge-warn { background: rgba(245,158,11,0.15); color: #fbbf24; }
.badge-danger { background: rgba(239,68,68,0.15); color: #f87171; }
.badge-info { background: rgba(59,130,246,0.15); color: #60a5fa; }
.badge-accent { background: var(--accent-soft); color: var(--accent); }

/* HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* PERF niveau 2 : flou retiré (il se recalculait a chaque frame au scroll = saccades).
     Fondu sombre->transparent legerement plus opaque pour rester lisible sans flou. */
  background:
    linear-gradient(to bottom,
      rgba(8,8,12,0.96) 0%,
      rgba(8,8,12,0.80) 52%,
      rgba(8,8,12,0) 100%);
  border-bottom: 1px solid transparent;
}

.header-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 2rem; }

.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  cursor: pointer;
}

.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--premium), var(--premium-2));
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px var(--premium-glow);
  position: relative;
  overflow: hidden;
}

.logo-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: spin 4s linear infinite;
}

.logo-mark svg { position: relative; z-index: 1; }

/* Variante "phoenix" : on garde la taille de la boîte mais on supprime
   le fond doré et l'animation pour laisser respirer le logo doré original. */
.logo-mark-phoenix {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  width: 38px;
  height: 38px;
}
.logo-mark-phoenix::after { display: none; }
.logo-mark-phoenix img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(212,175,55,0.35));
  transition: transform 0.4s ease, filter 0.4s ease;
}
.logo:hover .logo-mark-phoenix img {
  transform: scale(1.06) rotate(-2deg);
  filter: drop-shadow(0 4px 14px rgba(212,175,55,0.6));
}

@keyframes spin { to { transform: rotate(360deg); } }

.main-nav { display: flex; gap: 0.65rem; flex: 1; justify-content: center; }

.nav-link {
  padding: 0.55rem 1.15rem;
  border-radius: 10px;
  color: var(--text);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  transition: all var(--dur) var(--ease);
  cursor: pointer;
}

.nav-link:hover {
  color: var(--text);
  background: linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.nav-link.active {
  color: var(--text);
  background: linear-gradient(135deg, rgba(212,175,55,0.13), rgba(255,255,255,0.025));
  box-shadow: inset 0 0 0 1px rgba(212,175,55,0.22);
}

.header-actions { display: flex; align-items: center; gap: 0.6rem; }

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  position: relative;
  transition: all var(--dur) var(--ease);
}

.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }

.icon-btn .badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--accent);
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.4rem 0.4rem 0.9rem;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  position: relative;
}

.user-menu:hover { background: var(--surface-hover); }

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: white;
  flex-shrink: 0;
}
.user-avatar .avatar-default-icon {
  width: 56%;
  height: 56%;
  color: currentColor;
}

.user-menu-name { font-size: 0.9rem; font-weight: 600; }

.role-pill {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.role-pill.booster { background: rgba(34,197,94,0.15); color: #4ade80; }
.role-pill.admin { background: rgba(245,158,11,0.15); color: #fbbf24; }

.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 240px;
  padding: 0.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: all var(--dur) var(--ease);
  z-index: 200;
}

.dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.dropdown-item:hover { background: var(--surface-hover); }
.dropdown-divider { height: 1px; background: var(--border); margin: 0.4rem 0; }
.dropdown-item.danger { color: #f87171; }

@media (max-width: 640px) {
  #userArea { position: static !important; }
  #userDropdown {
    position: fixed;
    top: 58px;
    left: 12px;
    right: auto;
    width: min(248px, calc(100vw - 24px));
    min-width: 0;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    z-index: 10050;
    padding: 0.45rem;
    border-radius: 14px;
    background: rgba(13,13,18,0.98);
    box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  }
  #userDropdown .dropdown-item {
    min-height: 44px;
    padding: 0.72rem 0.8rem;
    font-size: 0.88rem;
  }
  #userDropdown .dropdown-item svg {
    flex: 0 0 auto;
  }
  #userDropdown [data-nav="dashboard"],
  #userDropdown [data-dash-nav="orders"],
  #userDropdown [data-dash-nav="wallet"] {
    display: none !important;
  }
}

/* Fix menu utilisateur mobile : sur tout le mobile (jusqu'a 768px) l'avatar passe
   a gauche ; on ancre donc le menu deroulant en haut a gauche, visible a l'ecran
   (sinon il sortait par la gauche). */
@media (max-width: 768px) {
  #userArea { position: static !important; }
  #userDropdown.open {
    position: fixed !important;
    top: 58px !important;
    left: 12px !important;
    right: auto !important;
    width: min(260px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    z-index: 10050 !important;
  }
  #userDropdown [data-nav="dashboard"],
  #userDropdown [data-dash-nav="orders"],
  #userDropdown [data-dash-nav="wallet"] {
    display: none !important;
  }
}

/* PAGES */
.page { display: none; animation: fadeIn 0.4s var(--ease); }
.page.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* HERO */
.hero {
  padding: 5rem 0 6rem;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 110%;
  background: radial-gradient(ellipse at center top, rgba(212,175,55,0.06) 0%, rgba(212,175,55,0.02) 35%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero > .container { position: relative; z-index: 1; }

.hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  margin-bottom: 1.5rem;
}

.hero-eyebrow .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 var(--success);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
  70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.hero h1 { margin-bottom: 1.5rem; }
.hero h1 .accent { background: linear-gradient(135deg, var(--premium), var(--premium-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hero p.lead {
  font-size: 1.15rem;
  color: var(--text-dim);
  max-width: 560px;
  margin-bottom: 2rem;
}

.hero-ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-ctas-feature {
  background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(10,10,12,0.35));
  border: 1px solid rgba(240,200,96,0.18);
  border-radius: 16px;
  padding: 1.1rem;
  gap: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 16px 40px rgba(0,0,0,0.4);
  backdrop-filter: none;
}
.hero-cta-big {
  flex: 1;
  min-width: 200px;
  justify-content: center;
  padding: 1.1rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.hero-trust {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.trust-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
}

.trust-stat span {
  color: var(--text-faint);
  font-size: 0.85rem;
}

.hero-visual {
  position: relative;
  height: 560px;
  display: grid;
  place-items: center;
}

.orb {
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(212,175,55,0.8), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(240,216,120,0.6), transparent 60%),
    #0a0e22;
  box-shadow:
    inset 0 0 80px rgba(212,175,55,0.3),
    0 40px 120px rgba(212,175,55,0.4);
  position: relative;
  animation: orbFloat 6s ease-in-out infinite;
}

@keyframes orbFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(3deg); }
}

.orb::before {
  content: '';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.3), transparent 50%);
  filter: none;
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border);
  border-radius: 50%;
  animation: spin 20s linear infinite;
}

.orbit-1 { width: 520px; height: 520px; }
.orbit-2 { width: 620px; height: 620px; animation-duration: 30s; animation-direction: reverse; }

.float-badge {
  position: absolute;
  padding: 0.8rem 1rem;
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  backdrop-filter: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  box-shadow: var(--shadow);
  animation: floatBadge 4s ease-in-out infinite;
}

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

.float-badge .icon-dot {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.fb-1 { top: 10%; left: -10%; animation-delay: 0s; }
.fb-2 { top: 25%; right: -8%; animation-delay: 1s; }
.fb-3 { bottom: 15%; left: -5%; animation-delay: 2s; }
.fb-4 { bottom: 8%; right: 5%; animation-delay: 0.5s; }

/* ===================== HERO V3 (background image) ===================== */
.hero-v3 {
  position: relative;
  overflow: hidden;
  min-height: clamp(560px, 78vh, 860px);
  display: flex;
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem) 0;
}
.hero-v3-bg {
  position: absolute;
  inset: 0;
  background-color: #0a0a0c;
  background-image: url('/elevateboost-assets/hero-bg.webp');
  background-image: image-set(
    url('/elevateboost-assets/hero-bg.webp') type('image/webp'),
    url('/elevateboost-assets/hero-bg.png') type('image/png')
  );
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}
/* Voile sombre central pour la lisibilité du texte */
.hero-v3-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 60% at 50% 52%, rgba(8,8,10,0.78) 0%, rgba(8,8,10,0.45) 45%, transparent 72%),
    /* Fondu sombre en haut : adoucit les coins dorés de l'image sous l'en-tête,
       supprime la cassure noir→doré. Puis fondu vers le fond en bas comme avant. */
    linear-gradient(to bottom,
      #0a0a0c 0%,
      rgba(10,10,12,0.55) 7%,
      rgba(10,10,12,0.12) 17%,
      transparent 27%,
      transparent 58%,
      var(--bg) 100%);
}
.hero-v3-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-v3-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  line-height: 1.02;
  margin: 0 0 1.3rem;
  text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
.hero-v3-title span { display: block; }
.hero-v3-title .accent { color: var(--gold); }
.hero-v3-lead {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: #d7d7db;
  line-height: 1.6;
  max-width: 34em;
  margin: 0 auto 2rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}

/* éléments réutilisés depuis hero-v2 */
.hero-ctas-center { justify-content: center; width: 100%; max-width: 560px; margin-bottom: 0; }
.hero-cta-outline {
  background: rgba(10,10,12,0.4);
  border: 1px solid rgba(212,175,55,0.45);
  color: var(--gold);
  backdrop-filter: none;
}
.hero-cta-outline:hover { background: rgba(212,175,55,0.12); border-color: var(--gold); }
.hero-v2-trust {
  display: flex; align-items: center; justify-content: center; gap: 2rem;
  margin-top: 1rem; flex-wrap: wrap;
}
.hero-v2-trust > * { display: flex; align-items: center; }
.hero-v2-trust .trustpilot-home-badge { margin: 0; }
.hero-v2-247 { display: flex; align-items: center; gap: 0.7rem; }
.hero-v2-247-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(212,175,55,0.06));
  color: var(--gold);
  display: grid; place-items: center;
}
.hero-v2-247 strong { display: block; font-size: 1.3rem; font-family: var(--font-display); line-height: 1; }
.hero-v2-247 span { font-size: 0.8rem; color: var(--text-dim); }

@media (max-width: 760px) {
  .hero-v3 { min-height: auto; padding: 3.5rem 0 3rem; }
  /* Pas d'image en portrait (rend mal) : fond sombre élégant avec halo doré discret */
  .hero-v3-bg {
    background-image: none;
    background:
      radial-gradient(60% 38% at 50% 6%, rgba(212,175,55,0.16), transparent 62%),
      var(--bg);
  }
  .hero-v3-bg::after { background: none; }
  /* Orbe doré discret en haut */
  .hero-v3-bg::before {
    content: "";
    position: absolute;
    top: 4%; left: 50%;
    width: 70px; height: 70px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff3cf, #f0c860 38%, #b8860b 72%, #5c4209);
    box-shadow: 0 0 34px rgba(240,200,96,0.45);
    animation: orbFloat 6s ease-in-out infinite;
  }
  .hero-v3-inner { max-width: 86%; padding-top: 3.5rem; }
  .hero-v3-title { font-size: clamp(1.85rem, 8.5vw, 2.4rem); margin-bottom: 1rem; }
  .hero-v3-lead { font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.5rem; max-width: 30em; display: none; }
  /* Boutons : taille raisonnable, pas pleine largeur géante */
  .hero-ctas-center { flex-direction: column; gap: 0.55rem; max-width: 280px; margin: 0 auto; }
  .hero-ctas-center .hero-cta-big { width: 100%; padding: 0.8rem 1.1rem; font-size: 0.9rem; }
  .hero-v2-trust { gap: 1.2rem; margin-top: 0.9rem; }
}

/* GAMES GRID */
.section { padding: 6rem 0; position: relative; }
.section-head { text-align: center; margin-bottom: 3rem; }
.section-head .eyebrow { color: var(--accent); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.8rem; }
.section-head h2 { margin-bottom: 0.8rem; }
.section-head p { color: var(--text-dim); font-size: 1.05rem; max-width: 600px; margin: 0 auto; }

@supports (content-visibility: auto) {
  .page[data-page="home"] .section,
  .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 760px;
  }
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

/* === GAME CARDS V4 — Logo flouté en fond, premium dark === */
.game-card-v3 {
  position: relative;
  background: linear-gradient(160deg, rgba(18,20,30,0.97) 0%, rgba(10,12,20,0.99) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: transform 300ms cubic-bezier(0.4,0,0.2,1), box-shadow 300ms ease, border-color 300ms ease;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  animation: gameCardFadeIn 0.5s var(--ease) backwards;
  /* PERF : isole le rendu de chaque carte pour éviter qu'une animation
     interne (cardAuraPulse) ne déclenche un repaint de toute la page.
     Le navigateur sait qu'aucun pixel ne sort de la carte → repaint isolé. */
  contain: layout paint style;
}
@keyframes gameCardFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fond logo flouté */
.game-card-v3-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.game-card-v3-bg img {
  position: absolute;
  right: -10%;
  top: 50%;
  transform: translateY(-50%);
  width: 65%;
  max-width: 180px;
  height: auto;
  object-fit: contain;
  opacity: 0.1;
  transition: opacity 300ms ease, transform 300ms ease;
  user-select: none;
  pointer-events: none;
}
.game-card-v3:hover .game-card-v3-bg img {
  opacity: 0.22;
  transform: translateY(-50%) scale(1.05);
}

/* Lueur colorée en fond */
.game-card-v3-glow {
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(var(--game-rgb), 0.25) 0%, transparent 65%);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 350ms ease, transform 350ms ease;
  z-index: 0;
}
.game-card-v3:hover .game-card-v3-glow {
  opacity: 1;
  transform: scale(1.25);
}

/* Ligne colorée en haut */
.game-card-v3::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--game-color) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 300ms ease;
  z-index: 2;
}
.game-card-v3:hover::before { opacity: 1; }

/* Hover global */
.game-card-v3:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--game-rgb), 0.35);
  box-shadow:
    0 16px 40px -12px rgba(var(--game-rgb), 0.35),
    0 4px 12px rgba(0,0,0,0.4);
}

/* Contenu de la carte */
.game-card-v3-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.5rem 1.4rem 1.3rem;
  height: 100%;
  flex: 1;
}

/* Badge du jeu (petite couleur en haut à gauche) */
.game-card-v3-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(var(--game-rgb), 0.15);
  border: 1px solid rgba(var(--game-rgb), 0.3);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--game-color);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: fit-content;
  margin-bottom: 0.3rem;
}
.game-card-v3-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--game-color);
  box-shadow: 0 0 6px rgba(var(--game-rgb), 0.8);
}

/* Nom du jeu */
.game-card-v3-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Tagline */
.game-card-v3-tagline {
  font-size: 0.76rem;
  color: var(--text-dim);
  line-height: 1.45;
  flex: 1;
  max-width: 80%;
}

/* Pied de carte */
.game-card-v3-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: auto;
}
.game-card-v3-modes {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-weight: 500;
}
.game-card-v3-modes strong {
  color: var(--game-color);
  font-weight: 700;
}

/* Flèche animée */
.game-card-v3-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  color: var(--text-dim);
  transition: all 260ms cubic-bezier(0.4,0,0.2,1);
  flex-shrink: 0;
}
.game-card-v3:hover .game-card-v3-arrow {
  background: var(--game-color);
  border-color: var(--game-color);
  color: #fff;
  transform: translateX(4px);
  box-shadow: 0 0 16px rgba(var(--game-rgb), 0.5);
}

/* Éléments supprimés / vides (compatibilité) */
.game-card-v3-icon,
.game-card-v3-logo,
.game-card-v3-buy,
.game-card-v3-price,
.game-wordmark { display: none; }

/* === GAME CARDS V6 - ElevateBoost Command Center === */
.games-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.15rem;
}
.game-card-v3 {
  isolation: isolate;
  --mx: 50%;
  --my: 44%;
  min-height: 268px;
  border-radius: 12px;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(var(--game-rgb), 0.18), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012) 46%, rgba(240,200,96,0.035)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 34px),
    linear-gradient(145deg, #121116 0%, #09080d 58%, #07060a 100%);
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 18px 48px rgba(0,0,0,0.30);
  transform-style: preserve-3d;
  transition:
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 420ms ease,
    border-color 420ms ease;
}
.game-card-v3:hover {
  transform: translateY(-7px);
  border-color: rgba(240,200,96,0.34);
  box-shadow:
    0 30px 70px -34px rgba(var(--game-rgb), 0.54),
    0 22px 48px rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.game-card-v3::before {
  height: auto;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(240,200,96,0.58), rgba(255,255,255,0.08) 38%, rgba(var(--game-rgb),0.46));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
}
.game-card-v3::after {
  content: '';
  position: absolute;
  left: 1.05rem;
  right: 1.05rem;
  top: 4.55rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,200,96,0.64), rgba(var(--game-rgb),0.45), transparent);
  opacity: 0.34;
  transform: scaleX(0.74);
  transition: transform 420ms ease, opacity 420ms ease;
  pointer-events: none;
  z-index: 3;
}
.game-card-v3:hover::after {
  opacity: 0.86;
  transform: scaleX(1);
}
.game-card-v3-bg img {
  left: 50%;
  right: auto;
  top: 48%;
  width: 33%;
  max-width: 118px;
  opacity: 0.24;
  filter: saturate(0.78) contrast(1.05) drop-shadow(0 20px 28px rgba(0,0,0,0.50));
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1), filter 420ms ease;
}
.game-card-v3:hover .game-card-v3-bg img {
  opacity: 0.40;
  transform: translate3d(-50%, -52%, 42px) scale(1.08);
  filter: saturate(1.12) contrast(1.12) drop-shadow(0 28px 38px rgba(0,0,0,0.62));
}
.game-card-v3-glow {
  inset: 5.4rem auto auto 50%;
  width: 148px;
  height: auto;
  aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(var(--game-rgb), 0.22) 0%, rgba(var(--game-rgb), 0.06) 42%, transparent 68%),
    conic-gradient(from 180deg, transparent, rgba(240,200,96,0.22), transparent 34%, rgba(var(--game-rgb),0.26), transparent 74%);
  opacity: 0.58;
  filter: blur(0.5px);
  border-radius: 50%;
  transform: translateX(-50%);
}
.game-card-v3:hover .game-card-v3-glow {
  opacity: 1;
  transform: translateX(-50%) scale(1.08) rotate(22deg);
}
.game-card-v3-inner {
  z-index: 4;
  gap: 0.65rem;
  padding: 1.1rem 1.15rem 1.05rem;
  transform: translateZ(24px);
}
.game-card-v3-badge {
  align-self: flex-start;
  padding: 0.28rem 0.56rem;
  background: rgba(7,6,10,0.66);
  border-color: rgba(240,200,96,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  font-size: 0.58rem;
  color: #f5d878;
  letter-spacing: 0.10em;
}
.game-card-v3-badge-dot {
  background: #f0c860;
  box-shadow: 0 0 10px rgba(240,200,96,0.9);
}
.game-card-v3-name {
  position: absolute;
  left: 1.15rem;
  right: 4.8rem;
  bottom: 4.45rem;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  letter-spacing: 0;
  max-width: none;
  text-shadow: 0 16px 34px rgba(0,0,0,0.55);
}
.game-card-v3-tagline {
  display: none;
  max-width: 54%;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.35;
}
.game-card-v3-ghost {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 152px;
  height: 152px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(240,200,96,0.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 0 34px rgba(var(--game-rgb),0.055),
    0 0 42px rgba(0,0,0,0.32);
  opacity: 1;
  pointer-events: none;
  z-index: -1;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), border-color 420ms ease, box-shadow 420ms ease;
}
.game-card-v3-ghost::before,
.game-card-v3-ghost::after {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: inherit;
  border: 1px dashed rgba(255,255,255,0.12);
}
.game-card-v3-ghost::after {
  inset: 34px;
  border-style: solid;
  border-color: rgba(var(--game-rgb),0.18);
}
.game-card-v3:hover .game-card-v3-ghost {
  transform: translate(-50%, -50%) scale(1.05) rotate(18deg);
  border-color: rgba(240,200,96,0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 42px rgba(var(--game-rgb),0.10),
    0 0 56px rgba(var(--game-rgb),0.16);
}
.game-card-v3-foot {
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  bottom: 1.05rem;
  padding-top: 0.9rem;
  border-top-color: rgba(255,255,255,0.065);
}
.game-card-v3-modes {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.70);
  font-weight: 650;
}
.game-card-v3-modes::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #42d392;
  box-shadow: 0 0 12px rgba(66,211,146,0.85);
}
.game-card-v3-modes strong { color: inherit; }
.game-card-v3-arrow {
  width: 38px;
  height: 38px;
  background: rgba(7,6,10,0.52);
  border-color: rgba(255,255,255,0.11);
  color: #f6e4a3;
  transition: all 320ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.game-card-v3:hover .game-card-v3-arrow {
  background: linear-gradient(135deg, #d4af37, #f0c860);
  border-color: rgba(240,200,96,0.9);
  color: #07060a;
  transform: translateX(5px) scale(1.04);
  box-shadow: 0 0 22px rgba(240,200,96,0.36), 0 12px 24px rgba(0,0,0,0.35);
}
.game-card-v3-code {
  position: absolute;
  right: 1.15rem;
  top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.06em;
}
.game-card-v3-scan {
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  top: 4.85rem;
  display: grid;
  grid-template-columns: 1fr 0.55fr 0.85fr;
  gap: 0.25rem;
  opacity: 0.56;
}
.game-card-v3-scan span {
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(240,200,96,0.7), rgba(var(--game-rgb),0.4));
  box-shadow: 0 0 14px rgba(240,200,96,0.10);
}

/* === GAME CARDS V7 - Clean modern game tiles === */
.games-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.1rem;
}
.game-card-v3 {
  --mx: 76%;
  --my: 24%;
  min-height: 214px;
  border-radius: 16px;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(var(--game-rgb), 0.26), transparent 34%),
    linear-gradient(135deg, rgba(var(--game-rgb), 0.16), transparent 38%),
    linear-gradient(145deg, #151217 0%, #0c0b10 54%, #07060a 100%);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
  overflow: hidden;
}
.game-card-v3:hover {
  transform: translateY(-6px);
  border-color: rgba(240,200,96,0.30);
  box-shadow:
    0 24px 64px -28px rgba(var(--game-rgb), 0.70),
    0 24px 52px rgba(0,0,0,0.46),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.game-card-v3::before {
  background: linear-gradient(135deg, rgba(240,200,96,0.46), rgba(255,255,255,0.08), rgba(var(--game-rgb),0.34));
}
.game-card-v3::after {
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,255,255,0.08) 50%, transparent 58%, transparent 100%);
  transform: translateX(-120%);
  opacity: 0;
}
.game-card-v3:hover::after {
  transform: translateX(120%);
  opacity: 1;
}
.game-card-v3-inner {
  padding: 1.35rem;
  gap: 0.6rem;
}
.game-card-v3-bg img {
  left: auto;
  right: -5%;
  top: 54%;
  width: 46%;
  max-width: 170px;
  opacity: 0.18;
  transform: translateY(-50%) scale(1);
  filter: saturate(1) contrast(1.08) drop-shadow(0 24px 34px rgba(0,0,0,0.56));
}
.game-card-v3:hover .game-card-v3-bg img {
  opacity: 0.32;
  transform: translateY(-52%) scale(1.08);
}
.game-card-v3-glow {
  inset: auto -20% -42% auto;
  width: 68%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--game-rgb),0.36), rgba(var(--game-rgb),0.11) 38%, transparent 70%);
  transform: none;
  filter: none;
}
.game-card-v3:hover .game-card-v3-glow {
  transform: scale(1.14);
}
.game-card-v3-code,
.game-card-v3-scan {
  display: none;
}
.game-card-v3-badge {
  position: relative;
  z-index: 2;
  padding: 0.3rem 0.62rem;
  background: rgba(7,6,10,0.58);
  border-color: rgba(255,255,255,0.10);
  color: #f3d77a;
  font-size: 0.6rem;
}
.game-card-v3-name {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 2;
  margin-top: auto;
  max-width: 68%;
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  line-height: 1.05;
}
.game-card-v3-tagline {
  display: none;
}
.game-card-v3-ghost {
  left: 1rem;
  top: 50%;
  width: auto;
  height: auto;
  transform: translateY(-50%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-display);
  font-size: clamp(5.1rem, 10vw, 8.2rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.105);
  opacity: 0.82;
  white-space: nowrap;
}
.game-card-v3-ghost::before,
.game-card-v3-ghost::after {
  display: none;
}
.game-card-v3:hover .game-card-v3-ghost {
  transform: translate(8px, -50%);
  border: 0;
  box-shadow: none;
  -webkit-text-stroke-color: rgba(240,200,96,0.19);
}
.game-card-v3-foot {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 2;
  margin-top: 0.2rem;
}
.game-card-v3-modes {
  color: rgba(255,255,255,0.68);
  font-size: 0.72rem;
}
.game-card-v3-modes::before {
  background: #42d392;
  box-shadow: 0 0 10px rgba(66,211,146,0.75);
}
.game-card-v3-arrow {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.055);
  color: #f6e4a3;
}

@media (max-width: 720px) {
  .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
  .game-card-v3 {
    min-height: 178px;
    border-radius: 14px;
  }
  .game-card-v3-inner {
    padding: 0.95rem;
  }
  .game-card-v3-name {
    font-size: 1.05rem;
    max-width: 78%;
  }
  .game-card-v3-ghost {
    left: 0.65rem;
    font-size: 4.1rem;
  }
  .game-card-v3-bg img {
    right: -14%;
    width: 58%;
    opacity: 0.16;
  }
  .game-card-v3-badge {
    font-size: 0.53rem;
    padding: 0.25rem 0.48rem;
  }
  .game-card-v3-modes {
    font-size: 0.62rem;
  }
  .game-card-v3-arrow {
    width: 32px;
    height: 32px;
  }
}

/* === GAME CARDS V8 - No-image typographic game identity === */
.game-card-v3 {
  min-height: 202px;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(var(--game-rgb), 0.22), transparent 34%),
    linear-gradient(135deg, rgba(var(--game-rgb), 0.18), transparent 42%),
    linear-gradient(145deg, #161318 0%, #0d0b10 54%, #07060a 100%);
}
.game-card-v3-bg {
  display: none;
}
.game-card-v3-name {
  display: none;
}
.game-card-v3-code {
  display: grid;
  place-items: center;
  right: 1.15rem;
  top: 1.1rem;
  min-width: 46px;
  height: 38px;
  padding: 0 0.68rem;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(240,200,96,0.16), rgba(var(--game-rgb),0.12)),
    rgba(7,6,10,0.62);
  border: 1px solid rgba(240,200,96,0.26);
  color: #f5d878;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 10px 24px rgba(0,0,0,0.22);
}
.game-card-v3-badge {
  max-width: calc(100% - 5.4rem);
}
.game-card-v3-ghost {
  left: 1.15rem;
  right: 0.8rem;
  top: 50%;
  font-size: clamp(5.4rem, 12vw, 9.2rem);
  -webkit-text-stroke: 1px rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.025);
  opacity: 1;
  transform: translateY(-49%);
}
.game-card-v3:hover .game-card-v3-ghost {
  transform: translate(6px, -49%);
  -webkit-text-stroke-color: rgba(240,200,96,0.28);
  color: rgba(240,200,96,0.035);
}
.game-card-v3-foot {
  margin-top: auto;
}
.game-card-v3-modes {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.78);
}
.game-card-v3-arrow {
  background: rgba(7,6,10,0.48);
}

@media (max-width: 720px) {
  .game-card-v3 {
    min-height: 164px;
  }
  .game-card-v3-code {
    right: 0.85rem;
    top: 0.85rem;
    min-width: 38px;
    height: 32px;
    padding: 0 0.5rem;
    font-size: 0.68rem;
    border-radius: 9px;
  }
  .game-card-v3-badge {
    max-width: calc(100% - 4.6rem);
  }
  .game-card-v3-ghost {
    left: 0.75rem;
    font-size: 4.8rem;
    -webkit-text-stroke-color: rgba(255,255,255,0.17);
  }
}

/* === GAME CARD PROTOTYPES - compare first 3 cards only === */
.game-card-proto {
  min-height: 226px;
}
.game-card-proto .game-card-v3-bg {
  display: none;
}
.game-card-proto .game-card-v3-name {
  display: block;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin-top: auto;
  max-width: 78%;
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  line-height: 1.05;
  letter-spacing: 0;
}
.game-card-proto .game-card-v3-code {
  display: grid;
}
.game-card-proto .game-card-v3-ghost {
  border: 0;
  box-shadow: none;
}

/* Prototype 1: luxe minimal, tres premium */
.proto-luxe {
  background:
    radial-gradient(circle at 76% 18%, rgba(240,200,96,0.18), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012) 42%, rgba(212,175,55,0.045)),
    linear-gradient(145deg, #171419 0%, #0c0b10 55%, #07060a 100%);
  border-color: rgba(240,200,96,0.18);
}
.proto-luxe .game-card-v3-ghost {
  left: auto;
  right: 0.9rem;
  top: 52%;
  transform: translateY(-50%);
  font-size: clamp(5.2rem, 10vw, 7.4rem);
  color: rgba(240,200,96,0.035);
  -webkit-text-stroke: 1px rgba(240,200,96,0.22);
}
.proto-luxe .game-card-v3-code {
  min-width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #f0c860);
  color: #07060a;
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 14px 34px rgba(212,175,55,0.22);
}
.proto-luxe .game-card-v3-name {
  color: #fff;
}
.proto-luxe .game-card-v3-modes {
  color: rgba(245,216,120,0.86);
}

/* Prototype 2: gaming premium, plus colore mais clean */
.proto-gaming {
  background:
    radial-gradient(circle at 74% 26%, rgba(var(--game-rgb),0.34), transparent 33%),
    linear-gradient(160deg, rgba(var(--game-rgb),0.22), transparent 44%),
    linear-gradient(145deg, #141116 0%, #0b0910 54%, #07060a 100%);
  border-color: rgba(var(--game-rgb),0.26);
}
.proto-gaming .game-card-v3-ghost {
  left: 1rem;
  top: 48%;
  transform: translateY(-50%);
  font-size: clamp(5.6rem, 11vw, 8.4rem);
  color: rgba(var(--game-rgb),0.055);
  -webkit-text-stroke: 1px rgba(var(--game-rgb),0.30);
}
.proto-gaming .game-card-v3-code {
  border-radius: 12px;
  background: rgba(var(--game-rgb),0.16);
  border-color: rgba(var(--game-rgb),0.34);
  color: #fff;
  box-shadow: 0 0 28px rgba(var(--game-rgb),0.16);
}
.proto-gaming .game-card-v3-name {
  color: #fff;
}
.proto-gaming .game-card-v3-badge {
  color: #fff;
  border-color: rgba(var(--game-rgb),0.28);
}

/* Prototype 3: marketplace moderne, clair, lisible */
.proto-market {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.018)),
    radial-gradient(circle at 82% 16%, rgba(var(--game-rgb),0.24), transparent 30%),
    linear-gradient(145deg, #18151a 0%, #0d0c11 58%, #07060a 100%);
  border-color: rgba(255,255,255,0.12);
}
.proto-market .game-card-v3-ghost {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  font-size: clamp(5rem, 10vw, 7.7rem);
  color: rgba(255,255,255,0.035);
  -webkit-text-stroke: 1px rgba(255,255,255,0.19);
}
.proto-market .game-card-v3-code {
  min-width: 48px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  color: #f5d878;
  border-color: rgba(240,200,96,0.22);
}
.proto-market .game-card-v3-name {
  color: #fff;
}
.proto-market .game-card-v3-foot {
  border-top-color: rgba(255,255,255,0.09);
}

@media (max-width: 720px) {
  .game-card-proto {
    min-height: 176px;
  }
  .game-card-proto .game-card-v3-name {
    font-size: 1.05rem;
  }
  .game-card-proto .game-card-v3-ghost {
    font-size: 4.5rem;
  }
  .proto-luxe .game-card-v3-code {
    min-width: 38px;
    height: 38px;
  }
}

/* === GAME CARDS V9 - compact neutral base === */
.games-grid {
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 0.8rem;
}
.game-card-v3 {
  min-height: 150px;
  border-radius: 13px;
}
.game-card-v3-inner {
  padding: 0.9rem;
}
.game-card-v3-badge {
  font-size: 0.54rem;
  padding: 0.24rem 0.48rem;
  max-width: calc(100% - 4.2rem);
}
.game-card-v3-code {
  right: 0.9rem;
  top: 0.85rem;
  min-width: 38px;
  height: 30px;
  padding: 0 0.48rem;
  border-radius: 8px;
  font-size: 0.66rem;
}
.game-card-v3-ghost {
  left: 0.75rem;
  font-size: clamp(3.6rem, 8vw, 5.6rem);
  -webkit-text-stroke: 1px rgba(255,255,255,0.15);
}
.game-card-v3-foot {
  padding-top: 0.65rem;
}
.game-card-v3-modes {
  font-size: 0.64rem;
}
.game-card-v3-arrow {
  width: 30px;
  height: 30px;
}

@media (max-width: 720px) {
  .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
  .game-card-v3 {
    min-height: 132px;
    border-radius: 12px;
  }
  .game-card-v3-inner {
    padding: 0.75rem;
  }
  .game-card-v3-badge {
    font-size: 0.48rem;
    padding: 0.22rem 0.4rem;
  }
  .game-card-v3-code {
    right: 0.7rem;
    top: 0.7rem;
    min-width: 32px;
    height: 27px;
    font-size: 0.58rem;
  }
  .game-card-v3-ghost {
    left: 0.55rem;
    font-size: 3.35rem;
  }
  .game-card-v3-modes {
    font-size: 0.56rem;
  }
  .game-card-v3-arrow {
    width: 28px;
    height: 28px;
  }
}

/* === GAME STYLE LAB - one direction per game card === */
.game-card-v3[class*="game-style-"] {
  min-height: 158px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 78% 20%, rgba(var(--game-rgb),0.22), transparent 34%),
    linear-gradient(145deg, #151217 0%, #0b0a0f 58%, #07060a 100%);
}
.game-card-v3[class*="game-style-"] .game-card-v3-name {
  display: none;
}
.game-card-v3[class*="game-style-"] .game-card-v3-bg {
  display: none;
}

/* 1 - Luxury medallion */
.game-style-1 {
  background:
    radial-gradient(circle at 82% 16%, rgba(240,200,96,0.24), transparent 28%),
    linear-gradient(135deg, rgba(240,200,96,0.10), transparent 44%),
    linear-gradient(145deg, #171318, #08070b) !important;
  border-color: rgba(240,200,96,0.18) !important;
}
.game-style-1 .game-card-v3-code {
  border-radius: 999px;
  background: linear-gradient(135deg, #d4af37, #f0c860);
  color: #08070b;
  border: 0;
  box-shadow: 0 12px 30px rgba(212,175,55,0.24);
}
.game-style-1 .game-card-v3-ghost {
  right: 1rem;
  left: auto;
  color: rgba(240,200,96,0.04);
  -webkit-text-stroke-color: rgba(240,200,96,0.24);
}

/* 2 - Neon gaming */
.game-style-2 {
  background:
    radial-gradient(circle at 82% 22%, rgba(var(--game-rgb),0.34), transparent 32%),
    linear-gradient(135deg, rgba(var(--game-rgb),0.20), transparent 44%),
    #08070c !important;
  border-color: rgba(var(--game-rgb),0.28) !important;
}
.game-style-2 .game-card-v3-code {
  color: #fff;
  background: rgba(var(--game-rgb),0.18);
  border-color: rgba(var(--game-rgb),0.36);
  box-shadow: 0 0 26px rgba(var(--game-rgb),0.18);
}
.game-style-2 .game-card-v3-ghost {
  color: rgba(var(--game-rgb),0.055);
  -webkit-text-stroke-color: rgba(var(--game-rgb),0.32);
}

/* 3 - Clean split */
.game-style-3 {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.055) 0 50%, rgba(var(--game-rgb),0.18) 50% 100%),
    linear-gradient(145deg, #151217, #07060a) !important;
}
.game-style-3::after {
  display: none;
}
.game-style-3 .game-card-v3-ghost {
  left: 50%;
  transform: translate(-50%, -49%);
  text-align: center;
  -webkit-text-stroke-color: rgba(255,255,255,0.19);
}

/* 4 - Blue steel / enterprise */
.game-style-4 {
  background:
    radial-gradient(circle at 92% 80%, rgba(var(--game-rgb),0.32), transparent 30%),
    linear-gradient(145deg, #121722, #07060a 68%) !important;
  border-color: rgba(120,160,220,0.16) !important;
}
.game-style-4 .game-card-v3-code {
  background: rgba(120,160,220,0.10);
  border-color: rgba(240,200,96,0.22);
}
.game-style-4 .game-card-v3-ghost {
  -webkit-text-stroke-color: rgba(180,205,255,0.20);
}

/* 5 - Gold diagonal */
.game-style-5 {
  background:
    linear-gradient(130deg, transparent 0 46%, rgba(240,200,96,0.12) 46% 58%, transparent 58%),
    radial-gradient(circle at 78% 22%, rgba(var(--game-rgb),0.20), transparent 30%),
    linear-gradient(145deg, #151217, #07060a) !important;
}
.game-style-5 .game-card-v3-ghost {
  color: rgba(255,255,255,0.025);
  -webkit-text-stroke-color: rgba(240,200,96,0.19);
}

/* 6 - Soft glass */
.game-style-6 {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.015)),
    radial-gradient(circle at 82% 72%, rgba(var(--game-rgb),0.20), transparent 30%),
    #09080d !important;
  border-color: rgba(255,255,255,0.13) !important;
}
.game-style-6 .game-card-v3-code,
.game-style-6 .game-card-v3-badge {
  background: rgba(255,255,255,0.06);
}
.game-style-6 .game-card-v3-ghost {
  -webkit-text-stroke-color: rgba(255,255,255,0.20);
}

/* 7 - Dark emerald/olive premium */
.game-style-7 {
  background:
    radial-gradient(circle at 80% 20%, rgba(var(--game-rgb),0.24), transparent 32%),
    linear-gradient(145deg, rgba(155,168,94,0.10), transparent 48%),
    linear-gradient(145deg, #14150f, #07060a) !important;
  border-color: rgba(190,205,120,0.16) !important;
}
.game-style-7 .game-card-v3-code {
  color: #f3eeb3;
  border-color: rgba(190,205,120,0.28);
}

/* 8 - Electric blue */
.game-style-8 {
  background:
    radial-gradient(circle at 82% 22%, rgba(var(--game-rgb),0.34), transparent 34%),
    linear-gradient(145deg, #08121f, #07060a 64%) !important;
  border-color: rgba(70,160,255,0.24) !important;
}
.game-style-8 .game-card-v3-code {
  color: #dceeff;
  border-color: rgba(90,170,255,0.34);
  background: rgba(26,143,255,0.12);
}
.game-style-8 .game-card-v3-ghost {
  -webkit-text-stroke-color: rgba(90,170,255,0.26);
}

/* 9 - Red premium */
.game-style-9 {
  background:
    radial-gradient(circle at 82% 22%, rgba(var(--game-rgb),0.30), transparent 34%),
    linear-gradient(145deg, rgba(230,57,70,0.13), transparent 48%),
    linear-gradient(145deg, #180d10, #07060a) !important;
  border-color: rgba(230,57,70,0.20) !important;
}
.game-style-9 .game-card-v3-code {
  color: #ffd6da;
  border-color: rgba(230,57,70,0.34);
  background: rgba(230,57,70,0.12);
}
.game-style-9 .game-card-v3-ghost {
  -webkit-text-stroke-color: rgba(230,57,70,0.28);
}

@media (max-width: 720px) {
  .game-card-v3[class*="game-style-"] {
    min-height: 136px;
  }
}

/* === GAME CARDS V10 - clean poster base, ready for character art === */
.games-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.game-card-v3 {
  min-height: 190px;
  border-radius: 14px;
  background:
    linear-gradient(145deg, #0b0a0f 0%, #07060a 100%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 18px 42px rgba(0,0,0,0.32);
  overflow: hidden;
}
.game-card-v3:hover {
  transform: none;
  border-color: rgba(240,200,96,0.28);
  box-shadow:
    0 24px 62px -30px rgba(var(--game-rgb),0.62),
    0 22px 46px rgba(0,0,0,0.42);
}
.game-card-v3::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(240,200,96,0.42), rgba(255,255,255,0.08), rgba(var(--game-rgb),0.30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 300ms ease;
  z-index: 2;
}
.game-card-v3:hover::before {
  opacity: 1;
}
.game-card-v3::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--game-rgb),0.08));
  border-left: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
  z-index: 0;
}
.game-card-v3[data-game="overwatch"] {
  background: linear-gradient(145deg, #0b0a0f 0%, #07060a 100%);
}
.game-card-v3[data-game="overwatch"]::after {
  display: block;
}
.game-card-v3-bg {
  display: none;
}
.game-card-v3-glow {
  inset: auto -20% -45% auto;
  width: 65%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--game-rgb),0.36), rgba(var(--game-rgb),0.08) 42%, transparent 70%);
  opacity: 0.8;
  filter: none;
  transform: none;
}
.game-card-v3-inner {
  position: relative;
  z-index: 3;
  min-height: 190px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
}
.game-card-v3-badge {
  width: fit-content;
  max-width: 58%;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: rgba(7,6,10,0.62);
  border: 1px solid rgba(240,200,96,0.22);
  color: #f5d878;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.game-card-v3-name {
  display: block;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  max-width: 58%;
  margin-top: auto;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  line-height: 1.05;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
.game-card-v3-tagline {
  display: block;
  max-width: 58%;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.58);
}
.game-card-v3-foot {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 3;
  margin-top: auto;
  padding-top: 0;
  border-top: 0;
  justify-content: flex-start;
  padding-left: 0;
}
.game-card-v3-modes {
  color: rgba(255,255,255,0.72);
  font-size: 0.68rem;
}
.game-card-v3-arrow {
  width: 34px;
  height: 34px;
  background: rgba(7,6,10,0.55);
  border-color: rgba(255,255,255,0.10);
  color: #f6e4a3;
}
.game-card-v3-signature {
  position: absolute;
  left: 1.2rem;
  top: 1.05rem;
  width: 74px;
  height: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.82;
  pointer-events: none;
}
.game-card-v3-signature::before {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(212,175,55,0.82), rgba(240,200,96,0.24));
  transform: translateY(-50%);
}
.game-card-v3-signature span {
  position: relative;
  z-index: 1;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d4af37;
  border: 1px solid rgba(240,200,96,0.75);
  box-shadow: 0 0 12px rgba(240,200,96,0.32);
}
.game-card-v3-signature span:nth-child(2) {
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, #d4af37, #f0c860);
}
.game-card-v3-eb {
  position: absolute;
  left: 1.2rem;
  bottom: 1.05rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(212,175,55,0.18), rgba(240,200,96,0.06)),
    rgba(7,6,10,0.62);
  border: 1px solid rgba(240,200,96,0.18);
  color: rgba(244,214,117,0.78);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 22px rgba(0,0,0,0.18);
  opacity: 0.78;
  pointer-events: none;
}
.game-card-v3-eb {
  display: none !important;
}
.game-card-v3-watermark {
  position: absolute;
  left: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  max-width: 58%;
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 7vw, 6rem);
  line-height: 0.85;
  font-weight: 900;
  letter-spacing: 0;
  color: rgba(255,255,255,0.028);
  -webkit-text-stroke: 1px rgba(240,200,96,0.095);
  white-space: nowrap;
  pointer-events: none;
}
.game-card-v3-name {
  padding-top: 1.15rem;
}
.game-card-v3[data-game="overwatch"] .game-card-v3-name {
  font-size: clamp(1.55rem, 2.7vw, 2.05rem);
  letter-spacing: 0;
  text-shadow: 0 18px 34px rgba(0,0,0,0.68);
}
.game-card-v3-art-slot {
  position: absolute;
  top: 0;
  right: 0;
  width: 48%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.game-card-v3[data-game="overwatch"] .game-card-v3-art-slot {
  left: auto;
  width: 56%;
  z-index: 1;
  overflow: visible;
}
.game-card-v3[data-game="overwatch"] .game-card-v3-art-slot::before {
  display: none;
}
.game-card-v3-art-slot::before {
  content: '';
  position: absolute;
  inset: 1rem 0.9rem;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    radial-gradient(circle at 50% 42%, rgba(var(--game-rgb),0.18), transparent 54%);
  border: 1px dashed rgba(255,255,255,0.10);
  opacity: 0.75;
}
.game-card-v3-art-slot img {
  position: absolute;
  right: -18%;
  top: 50%;
  width: 148%;
  max-width: none;
  height: 138%;
  object-fit: contain;
  object-position: center right;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,0.58));
  transform: translate3d(0, -50%, 0) scale(1);
  transition: none !important;
}
.game-card-v3[data-game="overwatch"] .game-card-v3-art-slot img {
  inset: auto;
  right: -3%;
  top: 47%;
  width: 115%;
  height: 118%;
  object-fit: contain;
  object-position: center right;
  opacity: 0.98;
  transform: translate3d(0, -50%, 0);
}
.game-card-v3:has(.game-card-v3-art-slot img) .game-card-v3-art-slot::before {
  display: none;
}
.game-card-v3:has(.game-card-v3-art-slot img)::after {
  background: linear-gradient(90deg, transparent 0%, rgba(var(--game-rgb),0.08) 100%);
  z-index: 2;
}
.game-card-v3:hover .game-card-v3-art-slot img {
  transform: none !important;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,0.62));
}
.game-card-v3[data-game="overwatch"]:hover .game-card-v3-art-slot img {
  transform: none !important;
}

@media (max-width: 720px) {
  .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .game-card-v3,
  .game-card-v3-inner {
    min-height: 158px;
  }
  .game-card-v3-inner {
    padding: 0.9rem;
  }
  .game-card-v3::after,
  .game-card-v3-art-slot {
    width: 44%;
  }
  .game-card-v3-art-slot img {
    right: -28%;
    top: 50%;
    width: 172%;
    height: 132%;
    transform: translate3d(0, -50%, 0) scale(1);
  }
  .game-card-v3-badge {
    max-width: 66%;
    font-size: 0.5rem;
    padding: 0.23rem 0.45rem;
  }
  .game-card-v3-name {
    max-width: 66%;
    font-size: 1rem;
  }
  .game-card-v3-tagline {
    display: none;
  }
  .game-card-v3-modes {
    font-size: 0.58rem;
  }
  .game-card-v3-arrow {
    width: 29px;
    height: 29px;
  }
  .game-card-v3-watermark {
    left: 0.75rem;
    max-width: 52%;
    font-size: 3rem;
    opacity: 0.72;
  }
  .game-card-v3-signature {
    left: 0.85rem;
    top: 0.8rem;
    transform: scale(0.78);
    transform-origin: left top;
  }
}

/* === GAME CARDS V11 - transparent character cutouts === */
.game-card-v3 {
  background:
    radial-gradient(circle at 84% 52%, rgba(var(--game-rgb),0.18), transparent 42%),
    linear-gradient(145deg, #0b0a0f 0%, #07060a 100%);
}
.game-card-v3-tagline {
  display: none !important;
}
.game-card-v3::after {
  width: 44%;
  background: linear-gradient(90deg, transparent, rgba(var(--game-rgb),0.07));
}
.game-card-v3-art-slot {
  width: 48%;
  overflow: visible;
}
.game-card-v3-art-slot::before {
  display: none;
}
.game-card-v3-art-slot img {
  position: absolute;
  right: -5%;
  bottom: 0;
  top: auto;
  width: 110%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  opacity: 1;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,0.62));
  transform: none;
  transition: none;
}
.game-card-v3-art-slot::after {
  content: '';
  position: absolute;
  right: -16%;
  bottom: -26%;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(var(--card-aura-rgb, var(--game-rgb)),0.34) 0%, rgba(var(--card-aura-rgb, var(--game-rgb)),0.16) 34%, transparent 68%);
  filter: none;
  opacity: 0.72;
  transform: translateZ(0);
  /* Animation : opacity uniquement (GPU compositor friendly).
     Le transform:scale a été retiré car il forçait un repaint du blur à chaque frame. */
  animation: cardAuraPulse 6s ease-in-out infinite;
  will-change: opacity;
  z-index: -1;
}
@keyframes cardAuraPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}
.game-card-v3[data-game="valorant"] { --card-aura-rgb: 255,70,85; }
.game-card-v3[data-game="lol"] { --card-aura-rgb: 200,155,60; }
.game-card-v3[data-game="overwatch"] { --card-aura-rgb: 249,158,26; }
.game-card-v3[data-game="wow"] { --card-aura-rgb: 58,123,213; }
.game-card-v3[data-game="cs2"] { --card-aura-rgb: 222,155,53; }
.game-card-v3[data-game="r6"] { --card-aura-rgb: 154,165,184; }
.game-card-v3[data-game="marvel"] { --card-aura-rgb: 88,190,82; }
.game-card-v3[data-game="rocketleague"] { --card-aura-rgb: 26,143,255; }
.game-card-v3[data-game="apex"] { --card-aura-rgb: 230,57,70; }
.game-card-v3:has(.game-card-v3-art-slot img) .game-card-v3-art-slot::before {
  display: none;
}
.game-card-v3:has(.game-card-v3-art-slot img)::after {
  background:
    linear-gradient(90deg, transparent 0%, rgba(7,6,10,0.16) 44%, transparent 100%),
    radial-gradient(circle at 78% 60%, rgba(var(--game-rgb),0.16), transparent 48%);
}
.game-card-v3:hover .game-card-v3-art-slot img {
  transform: none;
}
.game-card-v3[data-game="overwatch"] .game-card-v3-art-slot {
  width: 48%;
}
.game-card-v3[data-game="overwatch"] .game-card-v3-art-slot {
  left: auto;
  overflow: visible;
}
.game-card-v3[data-game="overwatch"] .game-card-v3-art-slot img {
  right: -5%;
  bottom: 0;
  top: auto;
  width: 110%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  transform: none;
}
.game-card-v3[data-game="lol"] .game-card-v3-art-slot img {
  right: -20%;
  bottom: -4%;
  width: 162%;
  height: 128%;
}
.game-card-v3[data-game="wow"] .game-card-v3-art-slot img {
  right: -4%;
  width: 104%;
  height: 96%;
}
.game-card-v3[data-game="marvel"] .game-card-v3-art-slot img {
  right: -4%;
  width: 106%;
  height: 98%;
}
.game-card-v3[data-game="rocketleague"] .game-card-v3-art-slot img {
  display: none;
}
.game-card-v3[data-game="rocketleague"] .game-card-v3-art-slot::after,
.game-card-v3:not(:has(.game-card-v3-art-slot img)) .game-card-v3-art-slot::after {
  display: none;
}

/* Final guard: no character/card hover motion in the games grid */
.game-card-v3,
.game-card-v3:hover,
.game-card-v3 *,
.game-card-v3:hover * {
  animation-name: none !important;
}
.game-card-v3 .game-card-v3-art-slot::after {
  animation: cardAuraPulse 5.5s ease-in-out infinite !important;
}
.game-card-v3:hover {
  transform: none !important;
}
.game-card-v3 .game-card-v3-art-slot img,
.game-card-v3:hover .game-card-v3-art-slot img,
.game-card-v3[data-game="overwatch"] .game-card-v3-art-slot img,
.game-card-v3[data-game="overwatch"]:hover .game-card-v3-art-slot img {
  transform: none !important;
  transition: none !important;
}

@media (max-width: 720px) {
  .game-card-v3-art-slot,
  .game-card-v3[data-game="overwatch"] .game-card-v3-art-slot {
    width: 46%;
  }
  .game-card-v3-art-slot img,
  .game-card-v3[data-game="overwatch"] .game-card-v3-art-slot img {
    right: -8%;
    bottom: 0;
    width: 116%;
    height: 96%;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}
.section,
.adaptive-calc-wrap,
.review-card,
.booster-card,
.mp-product {
  /* PERF : on laisse le rendu se faire en amont pour éviter le "pop-in" au scroll
     sur les PC peu puissants (le contenu est prêt avant qu'on arrive dessus). */
  content-visibility: visible;
}
.adaptive-calc-wrap,
.game-card-v3,
.rank-card,
.adaptive-summary {
  transform: translateZ(0);
}
img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 720px) {
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
  }
  .game-card-v3 { min-height: 175px; }
  .game-card-v3-inner { padding: 1.1rem 1rem 1rem; }
  .game-card-v3-name { font-size: 1rem; }
  .game-card-v3-tagline { display: none; }
  .game-card-v3-bg img { width: 55%; opacity: 0.08; }
}

@media (max-width: 720px) {
  .game-card-v3 {
    min-height: 218px;
    border-radius: 12px;
  }
  .game-card-v3-inner {
    padding: 0.95rem;
  }
  .game-card-v3-name {
    left: 0.95rem;
    right: 3.8rem;
    bottom: 4.1rem;
    font-size: 1.06rem;
  }
  .game-card-v3-ghost {
    width: 122px;
    height: 122px;
  }
  .game-card-v3-bg img {
    width: 36%;
    opacity: 0.23;
  }
  .game-card-v3-badge {
    font-size: 0.56rem;
    padding: 0.28rem 0.55rem;
  }
  .game-card-v3-code {
    right: 0.95rem;
    top: 0.95rem;
    font-size: 0.58rem;
  }
  .game-card-v3-scan {
    left: 0.95rem;
    right: 0.95rem;
    top: 4.5rem;
  }
  .game-card-v3-foot {
    left: 0.95rem;
    right: 0.95rem;
    bottom: 0.95rem;
  }
  .game-card-v3-modes {
    font-size: 0.62rem;
  }
  .game-card-v3-arrow {
    width: 34px;
    height: 34px;
  }
}

/* Final ElevateBoost card polish: clean mark, no EB badge, mobile-safe layout */
.game-card-v3-eb {
  display: none !important;
}
.game-card-v3-watermark {
  left: 0.85rem !important;
  top: 52% !important;
  max-width: 46% !important;
  font-size: clamp(3.15rem, 5.6vw, 4.9rem) !important;
  line-height: 0.82 !important;
  color: rgba(255,255,255,0.034) !important;
  -webkit-text-stroke: 1px rgba(240,200,96,0.10) !important;
  opacity: 1 !important;
  mix-blend-mode: screen;
}
.game-card-v3-name {
  max-width: 50% !important;
  padding-top: 0 !important;
  margin-top: auto !important;
}
.game-card-v3-foot {
  padding-left: 0 !important;
}
.header-actions .online-count {
  display: inline-flex !important;
}
@media (max-width: 720px) {
  .game-card-v3 {
    min-height: 166px !important;
  }
  .game-card-v3-inner {
    min-height: 166px !important;
    padding: 0.85rem !important;
  }
  .game-card-v3-signature {
    left: 0.85rem !important;
    top: 0.78rem !important;
    transform: scale(0.72) !important;
    transform-origin: left top !important;
  }
  .game-card-v3-watermark {
    left: 0.55rem !important;
    top: 49% !important;
    max-width: 42% !important;
    font-size: 2.45rem !important;
    opacity: 0.78 !important;
  }
  .game-card-v3-name {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-width: 54% !important;
    font-size: 1rem !important;
    line-height: 1.06 !important;
    margin-top: auto !important;
  }
  .game-card-v3-foot {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: auto !important;
  }
  .game-card-v3-arrow {
    width: 30px !important;
    height: 30px !important;
  }
  .game-card-v3-art-slot,
  .game-card-v3[data-game="overwatch"] .game-card-v3-art-slot {
    width: 49% !important;
  }
  .game-card-v3-art-slot img,
  .game-card-v3[data-game="overwatch"] .game-card-v3-art-slot img {
    right: -7% !important;
    bottom: 0 !important;
    width: 116% !important;
    height: 94% !important;
  }
  .game-card-v3[data-game="lol"] .game-card-v3-art-slot img {
    right: -18% !important;
    width: 150% !important;
    height: 116% !important;
  }
  .header-actions .online-count {
    display: inline-flex !important;
    padding: 0.42rem 0.55rem !important;
    gap: 0.32rem !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
  }
  .header-actions .online-count #onlineCount {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
  }
  .header-actions .online-count [data-i18n="nav.online"] {
    display: none !important;
  }
  .header-actions .online-count .dot {
    width: 6px !important;
    height: 6px !important;
  }
}
@media (max-width: 560px) {
  .site-header .logo {
    font-size: 0 !important;
    gap: 0 !important;
    min-width: auto !important;
  }
  .site-header .logo-mark {
    margin-right: 0 !important;
  }
  #loginBtn {
    display: none !important;
  }
  #registerBtn {
    padding: 0.45rem 0.58rem !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }
}

.game-card {
  position: relative;
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  overflow: hidden;
  min-height: 380px;
  display: flex;
  flex-direction: column;
}

.game-card-hero {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--game-bg);
}

.game-card-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(var(--game-rgb), 0.6), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(var(--game-rgb-2, var(--game-rgb)), 0.4), transparent 60%),
    linear-gradient(180deg, transparent 40%, rgba(12,16,32,0.95) 100%);
}

.game-card-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 40px, rgba(255,255,255,0.03) 40px, rgba(255,255,255,0.03) 41px),
    radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 80px 80px, 24px 24px;
  opacity: 0.6;
  transition: opacity var(--dur-slow) var(--ease);
}

.game-card:hover .game-card-hero::after { opacity: 1; }

.game-card-icon-lg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 110px;
  height: 110px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
  border: 2px solid rgba(255,255,255,0.2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  color: white;
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform var(--dur-slow) var(--ease);
  z-index: 2;
}

.game-card:hover .game-card-icon-lg {
  transform: translate(-50%, -60%) scale(1.08) rotate(-3deg);
}

.game-card-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 1.2s var(--ease);
  pointer-events: none;
}

.game-card:hover .game-card-shine { transform: translateX(100%); }

.game-card-decoration {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--game-color), transparent);
  opacity: 0.8;
}

.game-card-body {
  padding: 1.8rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.game-card-tagline {
  font-size: 0.78rem;
  color: var(--game-color);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.3rem;
}

.game-card h3 { font-size: 1.5rem; margin: 0; }
.game-card .game-desc { color: var(--text-dim); font-size: 0.88rem; flex: 1; }

.game-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.game-card-foot .price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
}

.game-card-foot .price small {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-faint);
  font-weight: 400;
  display: block;
  margin-top: 2px;
}

.game-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: var(--game-color);
  color: white;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all var(--dur) var(--ease);
}

.game-card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: 0 30px 70px rgba(0,0,0,0.4); }
.game-card:hover .game-card-cta { transform: translateX(4px); }

/* Game-specific hero backgrounds (procedurally unique per game) */
.game-card[data-game="valorant"] .game-card-hero { background: linear-gradient(135deg, #1f2d3d 0%, #0f1923 50%, #ff4655 130%); }
.game-card[data-game="lol"] .game-card-hero { background: linear-gradient(135deg, #0a1428 0%, #1e2328 50%, #c89b3c 150%); }
.game-card[data-game="overwatch"] .game-card-hero { background: linear-gradient(135deg, #1a2838 0%, #2a3e52 50%, #f99e1a 140%); }
.game-card[data-game="wow"] .game-card-hero { background: linear-gradient(135deg, #1a1410 0%, #3d2818 50%, #f5a623 130%); }
.game-card[data-game="cs2"] .game-card-hero { background: linear-gradient(135deg, #0f1419 0%, #2a2410 50%, #eab111 140%); }
.game-card[data-game="r6"] .game-card-hero { background: linear-gradient(135deg, #0d1820 0%, #1a2e3a 50%, #1a7aa1 140%); }
.game-card[data-game="marvel"] .game-card-hero { background: linear-gradient(135deg, #1a0a1a 0%, #3a0f2a 50%, #e23c3c 140%); }
.game-card[data-game="rocketleague"] .game-card-hero { background: linear-gradient(135deg, #0a1525 0%, #102a4a 50%, #1a8fff 140%); }
.game-card[data-game="apex"] .game-card-hero { background: linear-gradient(135deg, #1a0d10 0%, #3a1116 50%, #e63946 140%); }

/* FEATURES */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.3rem;
}

.feature-card {
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  transition: all var(--dur) var(--ease);
}

.feature-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 1.2rem;
}

.feature-card h4 { margin-bottom: 0.5rem; font-family: var(--font-display); }
.feature-card p { color: var(--text-dim); font-size: 0.92rem; }

/* ==========================================================================
   CALCULATOR
   ========================================================================== */
.calc-page { padding: 3rem 0 6rem; }
.page[data-page="boost"] {
  background: #06080f;
  min-height: calc(100vh - 74px);
}

.calc-wrap {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 1040px) {
  .calc-wrap { grid-template-columns: 1fr; }
}

.calc-main {
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--bg-elev), var(--bg));
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: background var(--dur-slow) var(--ease);
}

.calc-main::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  filter: none;
  z-index: 0;
  pointer-events: none;
}

.calc-main > * { position: relative; z-index: 1; }

.calc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
.calc-header h2 { font-size: 1.8rem; margin-bottom: 0.3rem; }
.calc-header p { color: var(--text-dim); font-size: 0.92rem; }

.calc-game-tabs { display: flex; gap: 0.4rem; background: var(--surface); padding: 4px; border-radius: 12px; border: 1px solid var(--border); }

.game-tab {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  transition: all var(--dur) var(--ease);
}

.game-tab.active { background: var(--accent-soft); color: var(--accent); }

.calc-visualizer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.2rem 1rem;
  margin-bottom: 1.2rem;
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.rank-display { text-align: center; }
.rank-display .label { font-size: 0.65rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }

.rank-badge {
  width: 78px;
  height: 78px;
  margin: 0 auto 0.6rem;
  border-radius: 18px;
  background: var(--rank-color, var(--surface));
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px var(--rank-glow, rgba(0,0,0,0.3));
  position: relative;
  transition: all var(--dur-slow) var(--ease);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: white;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.rank-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: spin 4s linear infinite;
  pointer-events: none;
}

.rank-display .rank-name { font-weight: 700; margin-bottom: 0.1rem; font-size: 0.85rem; }
.rank-display .rank-div { font-size: 0.72rem; color: var(--text-dim); }

.calc-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.progress-track {
  width: 60px;
  height: 4px;
  background: var(--surface);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  width: 70%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 2px;
  box-shadow: 0 0 12px var(--accent-glow);
  animation: slideFill 2s ease-in-out infinite;
}

@keyframes slideFill {
  0%, 100% { transform: translateX(-10%); }
  50% { transform: translateX(10%); }
}

.calc-section { margin-bottom: 1.2rem; }
.calc-section-title { font-size: 0.74rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; font-weight: 700; }

.rank-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rank-chips-icons { gap: 0.4rem; }

.rank-chip-icon {
  width: 48px;
  height: 48px;
  padding: 4px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  /* PERF : transition ciblée GPU-friendly */
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  display: grid;
  place-items: center;
  position: relative;
}
.rank-chip-icon:hover {
  border-color: var(--rank-color, var(--accent));
  transform: translateY(-2px);
}
.rank-chip-icon.active {
  border-color: var(--rank-color, var(--accent));
  background: rgba(var(--chip-rgb, 212,175,55), 0.12);
  box-shadow: 0 0 0 2px var(--rank-color, var(--accent));
  transform: translateY(-1px);
}

/* ============================================================================
   PLACEMENT : bouton "Unranked" stylé + logos agrandis + bandeau nom de rang
   ============================================================================ */
/* Bouton Unranked : point d'interrogation stylé, à gauche de Bronze */
.rank-chip-unranked {
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0.07), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.018) 0 6px, transparent 6px 12px),
    var(--surface);
  border-style: dashed;
  border-color: rgba(255,255,255,0.22);
}
.rank-chip-unranked:hover {
  border-color: rgba(255,255,255,0.45);
}
.rank-chip-unranked.active {
  border-style: solid;
  border-color: #c9c9d2;
  background: rgba(200,200,210,0.12);
  box-shadow: 0 0 0 2px #c9c9d2;
}
.rank-chip-unranked-q {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1;
  background: linear-gradient(160deg, #f5f5f7 0%, #9a9aa6 55%, #6a6a76 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.55));
  display: block;
  transition: transform 220ms var(--ease, ease);
}
.rank-chip-unranked:hover .rank-chip-unranked-q,
.rank-chip-unranked.active .rank-chip-unranked-q {
  transform: scale(1.12);
}

/* Logos AGRANDIS sur la page placement (chips + images) */
.rank-chips-placement {
  gap: 0.55rem;
  flex-wrap: wrap;
}
.rank-chips-placement .rank-chip-icon {
  width: 66px;
  height: 66px;
  padding: 6px;
  border-radius: 13px;
}
.rank-chips-placement .rank-chip-icon svg,
.rank-chips-placement .rank-chip-icon .ow-rank-img,
.rank-chips-placement .rank-chip-icon .apex-rank-img,
.rank-chips-placement .rank-chip-icon .val-rank-img,
.rank-chips-placement .rank-chip-icon .marvel-rank-img,
.rank-chips-placement .rank-chip-icon .lol-rank-img {
  width: 56px;
  height: 56px;
}
.rank-chips-placement .rank-chip-unranked-q {
  font-size: 2.1rem;
}
@media (max-width: 560px) {
  .rank-chips-placement .rank-chip-icon {
    width: 54px;
    height: 54px;
  }
  .rank-chips-placement .rank-chip-icon svg,
  .rank-chips-placement .rank-chip-icon .ow-rank-img,
  .rank-chips-placement .rank-chip-icon .apex-rank-img,
  .rank-chips-placement .rank-chip-icon .val-rank-img,
  .rank-chips-placement .rank-chip-icon .marvel-rank-img,
  .rank-chips-placement .rank-chip-icon .lol-rank-img {
    width: 44px;
    height: 44px;
  }
}

/* Bandeau "Rang sélectionné : XXX" (placements + wins) */
.placement-rank-name-banner {
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.92rem;
}
.placement-rank-name-label {
  color: var(--text-dim);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.placement-rank-name-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
}
.rank-chip-icon svg {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
}
.rank-chip-icon .ow-rank-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  border-radius: 0;
}
.rank-chip-icon .apex-rank-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  border-radius: 0;
}
.adaptive-calc-wrap[data-game="apex"] .rank-chip-icon {
  width: 58px;
  height: 58px;
  padding: 5px;
}
.adaptive-calc-wrap[data-game="apex"] .rank-chip-icon .apex-rank-img,
.adaptive-calc-wrap[data-game="apex"] .rank-chip-icon svg {
  width: 50px;
  height: 50px;
}
.adaptive-calc-wrap[data-game="apex"] .div-chip {
  min-width: 52px;
}
.rank-chip-icon .val-rank-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  border-radius: 0;
}
/* Valorant — conteneur et images de rang uniformisés (comme LoL) pour que tous
   les badges aient la même empreinte visuelle dans la grille.
   On utilise object-fit: cover + un léger scale pour gommer les différences de
   padding interne des PNG sources (certains rangs ont plus de marge transparente).
   Référence visuelle : Iron (premier en haut à gauche). */
.adaptive-calc-wrap[data-game="valorant"] .rank-chip-icon {
  width: 58px;
  height: 58px;
  overflow: hidden;
}
.adaptive-calc-wrap[data-game="valorant"] .rank-chip-icon .val-rank-img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  transform: scale(1.18);
}
.adaptive-calc-wrap[data-game="valorant"] .rank-chip-icon svg {
  width: 50px;
  height: 50px;
  object-fit: contain;
}
/* Même normalisation dans la grille 2 lignes (rank-cards) */
.adaptive-calc-wrap[data-game="valorant"] .rank-grid-2rows .rank-row .rank-chip-icon {
  overflow: hidden;
}
.adaptive-calc-wrap[data-game="valorant"] .rank-grid-2rows .rank-row .rank-chip-icon .val-rank-img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  transform: scale(1.18);
}
.rank-chip-icon .marvel-rank-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  border-radius: 0;
}
.rank-chip-icon .lol-rank-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  border-radius: 0;
}
.val-rank-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Force aspect-ratio carré pour que tous les rangs Valo aient la même empreinte
     visuelle, même si l'image source a un ratio non-1 (ex: val-rank-immortal.png
     livré en proportion bizarre). object-fit:contain garde les proportions. */
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.marvel-rank-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.lol-rank-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Force aspect-ratio carré comme pour Valorant : les badges LoL officiels
     sont parfois livrés en proportion non-carrée (ex: Challenger). */
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.rank-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.rank-chip:hover { border-color: var(--border-strong); }

.rank-chip.active {
  background: rgba(var(--chip-rgb, 212,175,55), 0.15);
  border-color: rgba(var(--chip-rgb, 212,175,55), 0.5);
  color: var(--chip-color, white);
}

.rank-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip-dot, var(--accent));
  box-shadow: 0 0 6px var(--chip-dot, var(--accent));
}

.div-chips { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: center; }

.div-chip {
  min-width: 36px;
  height: 36px;
  padding: 0 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-display);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  display: grid;
  place-items: center;
}

.div-chip.active { background: var(--accent); color: #0a0a0c; border-color: var(--accent); }

.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
}

.option-card {
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  position: relative;
}

.option-card:hover { border-color: var(--border-strong); background: var(--surface-hover); }

.option-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.option-card .opt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.option-card .opt-name { font-weight: 600; font-size: 0.92rem; }
.option-card .opt-boost { font-size: 0.75rem; color: var(--accent); font-weight: 700; }
.option-card .opt-desc { font-size: 0.78rem; color: var(--text-dim); }

.option-card .checkmark {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  transition: all var(--dur) var(--ease);
}

.option-card.active .checkmark {
  background: var(--accent);
  border-color: var(--accent);
}

.option-card .checkmark svg { opacity: 0; transition: opacity var(--dur) var(--ease); }
.option-card.active .checkmark svg { opacity: 1; }

.segmented {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
  width: fit-content;
}

.segmented button {
  padding: 0.5rem 1rem;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  transition: all var(--dur) var(--ease);
}

.segmented button.active { background: var(--accent); color: #0a0a0c; }

/* SUMMARY */
.summary {
  position: sticky;
  top: 90px;
  /* Robuste au zoom/dézoom : si le récap dépasse la hauteur visible, il scrolle
     dans sa propre zone au lieu de se décaler hors de l'écran. */
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--border-strong);
  backdrop-filter: none;
  scrollbar-width: thin;
}
.summary::-webkit-scrollbar { width: 6px; }
.summary::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.summary h3 { margin-bottom: 1.5rem; }

.summary-row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px dashed var(--border); font-size: 0.88rem; }
.summary-row:last-of-type { border-bottom: none; }
.summary-row .lbl { color: var(--text-dim); }
.summary-row .val { font-weight: 600; }

.summary-total {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--border-strong);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.summary-total .lbl { font-size: 0.9rem; color: var(--text-dim); }
.summary-total .val {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--premium), var(--premium-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.summary-total .val small { font-size: 1rem; color: var(--text-dim); background: none; -webkit-text-fill-color: var(--text-dim); }

.summary .btn { width: 100%; justify-content: center; margin-top: 1.5rem; padding: 1rem; }

/* CART SIDEBAR */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  z-index: 300;
}

.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(460px, 100vw);
  height: 100vh;
  background: var(--bg-elev);
  border-left: 1px solid var(--border-strong);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  z-index: 301;
  display: flex;
  flex-direction: column;
}

.cart-panel.open { transform: translateX(0); }

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.8rem;
  border-bottom: 1px solid var(--border);
}

.cart-header h3 { font-size: 1.3rem; }

.cart-body { flex: 1; overflow-y: auto; padding: 1.5rem 1.8rem; }

.cart-item {
  padding: 1.2rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 0.8rem;
}

.cart-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.cart-item-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.2rem; }
.cart-item-game { font-size: 0.78rem; color: var(--text-dim); }
.cart-item-remove { color: var(--text-faint); transition: color var(--dur) var(--ease); }
.cart-item-remove:hover { color: var(--danger); }

.cart-item-details { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 0.8rem; }
.cart-item-details div { padding: 0.15rem 0; }

.cart-item-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--border);
}

.cart-item-price { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--accent); }

.cart-empty { text-align: center; padding: 3rem 1rem; color: var(--text-dim); }
.cart-empty .icon { width: 80px; height: 80px; margin: 0 auto 1rem; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: var(--text-faint); }

.cart-footer {
  padding: 1.5rem 1.8rem;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
}

.cart-totals { margin-bottom: 1rem; }
.cart-totals .row { display: flex; justify-content: space-between; padding: 0.3rem 0; font-size: 0.9rem; }
.cart-totals .row.total { padding-top: 0.8rem; border-top: 1px solid var(--border); margin-top: 0.6rem; font-weight: 700; font-size: 1.1rem; }
.cart-totals .row.total .val { color: var(--accent); font-family: var(--font-display); font-size: 1.4rem; }

.cart-footer .btn { width: 100%; justify-content: center; padding: 1rem; }

/* MODAL */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.modal-overlay.open { opacity: 1; pointer-events: auto; }

.modal {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  width: 100%;
  max-width: 460px;
  transform: scale(0.96);
  transition: transform var(--dur-slow) var(--ease);
  position: relative;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-overlay.open .modal { transform: scale(1); }

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--text-dim);
  transition: all var(--dur) var(--ease);
}

.modal-close:hover { background: var(--surface); color: var(--text); }

.modal h3 { margin-bottom: 0.5rem; text-align: center; }
.modal .sub { text-align: center; color: var(--text-dim); margin-bottom: 2rem; font-size: 0.95rem; }

.auth-tabs {
  display: flex;
  background: var(--surface);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
}

.auth-tab {
  flex: 1;
  padding: 0.7rem;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-dim);
  transition: all var(--dur) var(--ease);
}

.auth-tab.active { background: var(--accent); color: #0a0a0c; }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.82rem; color: var(--text-dim); margin-bottom: 0.4rem; font-weight: 500; }

.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all var(--dur) var(--ease);
  font-size: 0.92rem;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent);
  background: var(--surface-hover);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-group textarea { resize: vertical; min-height: 100px; font-family: inherit; }

.role-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.role-option {
  padding: 1.1rem 0.8rem;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.role-option:hover { border-color: var(--border-strong); }
.role-option.active { border-color: var(--accent); background: var(--accent-soft); }

.role-option .icon { width: 40px; height: 40px; border-radius: 10px; background: var(--surface); display: grid; place-items: center; margin: 0 auto 0.5rem; color: var(--accent); }
.role-option strong { display: block; font-size: 0.9rem; margin-bottom: 0.2rem; }
.role-option span { font-size: 0.75rem; color: var(--text-dim); }

.modal .btn { width: 100%; justify-content: center; padding: 0.95rem; margin-top: 0.5rem; }

.modal-alt {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.88rem;
  color: var(--text-dim);
}

.modal-alt a { color: var(--accent); cursor: pointer; font-weight: 600; }

.form-hint { font-size: 0.78rem; color: var(--text-faint); margin-top: 0.3rem; }

.alert-box {
  padding: 0.9rem 1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.alert-error { background: rgba(239,68,68,0.1); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }
.alert-success { background: rgba(34,197,94,0.1); color: #86efac; border: 1px solid rgba(34,197,94,0.3); }
.alert-info { background: rgba(59,130,246,0.1); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.alert-warn { background: rgba(245,158,11,0.1); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); }

/* CHECKOUT */
.checkout-page { padding: 2rem 0 4rem; }

/* Currency toggle (EUR/USD) at checkout */
.checkout-currency-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.checkout-currency-toggle .currency-toggle-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  padding: 0 0.6rem 0 0.5rem;
  font-weight: 600;
}
.checkout-currency-toggle .currency-opt {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 200ms ease;
}
.checkout-currency-toggle .currency-opt:hover {
  background: var(--surface-hover);
}
.checkout-currency-toggle .currency-opt.active {
  background: var(--accent);
  color: #0a0a0c;
  box-shadow: 0 4px 14px -4px var(--accent-glow);
}
.checkout-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .checkout-wrap { grid-template-columns: 1fr; } }

.checkout-main { padding: 2rem; border-radius: var(--radius-xl); background: var(--bg-elev); border: 1px solid var(--border); }

.checkout-step { margin-bottom: 2.5rem; }
.checkout-step-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; }
.step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.9rem;
}
.checkout-step-head h4 { font-size: 1.15rem; }

.payment-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }

.payment-method {
  padding: 1rem;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  text-align: center;
}

.payment-method:hover { border-color: var(--border-strong); }
.payment-method.active { border-color: var(--accent); background: var(--accent-soft); }
.payment-method .icon { width: 46px; height: 46px; border-radius: 10px; margin: 0 auto 0.5rem; display: grid; place-items: center; }
.payment-method strong { display: block; font-size: 0.85rem; }
.payment-method span { font-size: 0.72rem; color: var(--text-dim); }

.payment-details { margin-top: 1.2rem; padding: 1.2rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }

/* CHECKOUT SUMMARY */
.checkout-summary {
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--border-strong);
  position: sticky;
  top: 96px;
}

.checkout-summary h4 { margin-bottom: 1.5rem; font-size: 1.1rem; }

.checkout-line { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 0.88rem; }
.checkout-line .lbl { color: var(--text-dim); }

.promo-input-wrap { display: flex; gap: 0.5rem; margin: 1rem 0; }
.promo-input-wrap input { flex: 1; padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 0.88rem; }
.promo-input-wrap input:focus { border-color: var(--accent); }

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
.dashboard {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  min-height: calc(100vh - 74px);
}

@media (max-width: 960px) {
  .dashboard { grid-template-columns: 1fr; }
  .dash-sidebar { display: none; }
  .dash-mobile-nav-wrap { display: block; }
}

.dash-sidebar {
  padding: 2rem 1rem;
  border-right: 1px solid var(--border);
  position: sticky;
  top: 74px;
  height: calc(100vh - 74px);
  overflow-y: auto;
}

.dash-user {
  padding: 1.2rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.dash-user .user-avatar { width: 44px; height: 44px; font-size: 1rem; }
.dash-user strong { display: block; font-size: 0.92rem; margin-bottom: 0.1rem; }
.dash-user span { font-size: 0.75rem; color: var(--text-dim); }

.dash-nav { display: flex; flex-direction: column; gap: 0.2rem; }

.dash-nav-section { font-size: 0.7rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; padding: 0.8rem 0.9rem 0.4rem; }

.dash-nav-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.dash-nav-link:hover { background: var(--surface); color: var(--text); }
.dash-nav-link.active { background: var(--accent-soft); color: var(--accent); }

.dash-nav-link .count {
  margin-left: auto;
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-dim);
  font-weight: 700;
}

.dash-nav-link.active .count { background: var(--accent); color: #0a0a0c; }

.dash-mobile-nav-wrap {
  display: none;
  padding: 0.9rem 1rem 0;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(8,8,12,0.98), rgba(8,8,12,0.92));
  position: sticky;
  top: 74px;
  z-index: 18;
}

.dash-mobile-nav {
  display: grid;
  gap: 0.75rem;
}

.dash-mobile-nav-section {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.dash-mobile-nav-title {
  font-size: 0.68rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  padding: 0 0.2rem;
}

.dash-mobile-nav-row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.7rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.dash-mobile-nav-row::-webkit-scrollbar { height: 4px; }
.dash-mobile-nav-row::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

.dash-mobile-nav .dash-nav-link {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}

.dash-mobile-nav .dash-nav-link svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.dash-mobile-nav .dash-nav-link.active {
  background: var(--accent-soft);
  border-color: rgba(212,175,55,0.45);
  color: var(--accent);
}

@media (max-width: 960px) {
  .dash-mobile-nav-wrap { display: block !important; }
}

@media (max-width: 680px) {
  .dash-mobile-nav-wrap {
    top: 60px;
    padding: 0.55rem 0.75rem 0;
  }
  .dash-mobile-nav {
    gap: 0.45rem;
  }
  .dash-mobile-nav-title {
    font-size: 0.62rem;
  }
  .dash-mobile-nav-row {
    gap: 0.42rem;
    padding-bottom: 0.48rem;
  }
  .dash-mobile-nav .dash-nav-link {
    min-height: 36px;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    font-size: 0.78rem;
    gap: 0.45rem;
  }
  .dash-mobile-nav .dash-nav-link svg {
    width: 15px;
    height: 15px;
  }
  .dash-main {
    padding: 0.85rem 0.75rem 1.2rem !important;
  }
  .dash-head {
    margin-bottom: 0.9rem !important;
    gap: 0.45rem;
  }
  .dash-head h2 {
    font-size: 1.3rem !important;
    margin-bottom: 0.25rem !important;
  }
  .dash-head p {
    font-size: 0.86rem !important;
    line-height: 1.35 !important;
  }
  .stats-grid {
    gap: 0.65rem !important;
    margin-bottom: 1rem !important;
  }
  .stat-card {
    padding: 0.85rem 0.95rem !important;
    border-radius: 14px !important;
    min-height: 88px !important;
  }
  .stat-card .stat-label {
    font-size: 0.78rem !important;
    margin-bottom: 0.35rem !important;
  }
  .stat-card .stat-value {
    font-size: 1.45rem !important;
    line-height: 1.05 !important;
  }
  .stat-card .stat-icon {
    width: 26px !important;
    height: 26px !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
  }
}

.dash-main {
  padding: 2rem;
  min-width: 0;
  overflow-x: hidden;
}

.dash-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.dash-head h2 { margin-bottom: 0.4rem; }
.dash-head p { color: var(--text-dim); }

.dash-panel { display: none; }
.dash-panel.active { display: block; animation: fadeIn 0.3s var(--ease); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--stat-color, var(--accent));
  filter: none;
  opacity: 0.15;
}

.stat-card .stat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; position: relative; }
.stat-card .stat-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--surface); display: grid; place-items: center; color: var(--stat-color, var(--accent)); }
.stat-card .stat-label { color: var(--text-dim); font-size: 0.82rem; }
.stat-card .stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; position: relative; }
.stat-card .stat-trend { font-size: 0.78rem; margin-top: 0.3rem; color: var(--success); display: inline-flex; align-items: center; gap: 0.3rem; position: relative; }
.stat-card .stat-trend.down { color: var(--danger); }

/* ORDERS */
.orders-list { display: flex; flex-direction: column; gap: 0.8rem; }

.order-card {
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  transition: border-color 0.18s, box-shadow 0.18s;
  position: relative;
  overflow: hidden;
}
.order-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--game-color, var(--accent));
  border-radius: 3px 0 0 3px;
}
.order-card:hover { border-color: rgba(212,175,55,0.35); box-shadow: 0 4px 24px rgba(0,0,0,0.18); }

@media (max-width: 760px) {
  .order-card { grid-template-columns: auto 1fr; gap: 0.75rem; padding: 0.85rem 1rem; }
  .order-right { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
}

.order-emblem {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.order-emblem img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.order-emblem .game-wordmark { font-size: 0.6rem; font-weight: 800; color: var(--game-color, white); letter-spacing: 0.03em; }

.order-info h4 { margin-bottom: 0.2rem; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; line-height: 1.3; }
.order-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; font-size: 0.75rem; color: var(--text-dim); margin-top: 0.2rem; }
.order-meta span { display: inline-flex; align-items: center; gap: 0.25rem; }

.order-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.order-price { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }

/* ORDER DETAIL / TRACKING */
.tracking-wrap {
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  margin-bottom: 2rem;
}

.tracking-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.tracking-head h3 { margin-bottom: 0.3rem; }
.tracking-head .order-id { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.82rem; }

.progress-big {
  height: 10px;
  background: var(--surface);
  border-radius: 5px;
  overflow: hidden;
  margin: 1.5rem 0;
  position: relative;
}

.progress-big .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 5px;
  box-shadow: 0 0 16px var(--accent-glow);
  transition: width var(--dur-slow) var(--ease);
  position: relative;
}

.progress-big .fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s linear infinite;
}

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

.timeline { display: flex; justify-content: space-between; margin: 2rem 0; position: relative; }
.timeline::before {
  content: ''; position: absolute; top: 14px; left: 14px; right: 14px;
  height: 2px; background: var(--border); z-index: 0;
}

.timeline-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.timeline-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-elev);
  border: 2px solid var(--border);
  display: grid; place-items: center;
  color: var(--text-faint);
  font-size: 0.75rem;
  font-weight: 700;
  transition: all var(--dur) var(--ease);
}

.timeline-step.done .timeline-dot { background: var(--success); border-color: var(--success); color: white; }
.timeline-step.active .timeline-dot { background: var(--accent); border-color: var(--accent); color: white; box-shadow: 0 0 20px var(--accent-glow); }

.timeline-label { font-size: 0.78rem; color: var(--text-dim); text-align: center; }
.timeline-step.active .timeline-label { color: var(--text); font-weight: 600; }

.tracking-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* CHAT */
.chat-wrap {
  padding: 0;
  border-radius: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 520px;
  overflow: hidden;
}
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
}
.chat-peer { display: flex; align-items: center; gap: 0.75rem; }
.chat-peer strong { display: block; font-size: 0.92rem; font-weight: 700; }
.chat-peer .status { font-size: 0.72rem; color: var(--success); display: flex; align-items: center; gap: 0.3rem; }
.chat-peer .status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: statusPulse 2s infinite; }
@keyframes statusPulse { 0%,100% { opacity:1; } 50% { opacity:0.45; } }
.chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.2rem 1.4rem; }
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.chat-msg { max-width: 72%; padding: 0.65rem 0.95rem; border-radius: 14px; font-size: 0.88rem; line-height: 1.45; }
.chat-msg.them { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.chat-msg.me { align-self: flex-end; background: linear-gradient(135deg, #d4af37, #f0c860); color: #07060a; border-bottom-right-radius: 3px; font-weight: 500; }
.chat-msg .time { display: block; font-size: 0.65rem; opacity: 0.55; margin-top: 0.25rem; }
.chat-input-wrap {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  background: rgba(255,255,255,0.01);
}
.chat-input {
  flex: 1;
  padding: 0.7rem 1rem;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  transition: border-color 0.15s;
  color: var(--text);
}
.chat-input:focus { border-color: rgba(212,175,55,0.5); outline: none; }
.chat-send {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #f0c860);
  display: grid; place-items: center;
  color: #07060a;
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  border: none; cursor: pointer;
}
.chat-send:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(212,175,55,0.4); }
.chat-send svg { stroke: #07060a; }


/* ===== ORDER CARD V2 — version "ticket" plus aboutie ===== */
.order-card-v2 {
  --status-color: var(--game-color, var(--accent));
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 1.1rem;
  padding: 1.15rem 1.3rem;
  border-radius: 16px;
  background:
    radial-gradient(80% 120% at -10% 0%, color-mix(in srgb, var(--status-color) 14%, transparent) 0%, transparent 60%),
    radial-gradient(60% 100% at 110% 100%, color-mix(in srgb, var(--game-color, #fff) 6%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.008));
  border: 1px solid color-mix(in srgb, var(--status-color) 22%, rgba(255,255,255,0.08));
  align-items: center;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  overflow: hidden;
  isolation: isolate;
}
.order-card-v2::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, var(--status-color), color-mix(in srgb, var(--status-color) 25%, transparent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--status-color) 55%, transparent);
}
.order-card-v2 + .order-card-v2 { margin-top: 0.75rem; }
.order-card-v2:hover {
  border-color: color-mix(in srgb, var(--status-color) 50%, transparent);
  box-shadow: 0 14px 38px rgba(0,0,0,0.36), 0 0 0 1px color-mix(in srgb, var(--status-color) 30%, transparent) inset;
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .order-card-v2 { grid-template-columns: 56px 1fr; gap: 0.85rem; padding: 1rem; }
  .ocv2-right { grid-column:1/-1; display:flex; flex-direction:row; align-items:center; justify-content:space-between; margin-top:0.4rem; }
}

.ocv2-emblem {
  position: relative;
  width:72px; height:72px; border-radius:14px;
  background:
    radial-gradient(120% 90% at 30% 25%, color-mix(in srgb, var(--game-color, #fff) 28%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--game-color, #fff) 14%, transparent), rgba(255,255,255,0.02));
  border:1px solid color-mix(in srgb, var(--game-color, #fff) 25%, rgba(255,255,255,0.10));
  display:grid; place-items:center; overflow:hidden; flex-shrink:0;
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--game-color, #000) 55%, transparent);
}
.ocv2-emblem::after {
  content:''; position:absolute; top:0; left:-50%; width:50%; height:100%;
  background: linear-gradient(110deg, transparent, color-mix(in srgb, var(--game-color, #fff) 18%, transparent), transparent);
  transform: skewX(-22deg);
}
.ocv2-emblem img { width:100%; height:100%; object-fit:contain; padding:8px; position:relative; z-index:1; }
.ocv2-emblem .game-wordmark { font-size:0.65rem; font-weight:800; color:var(--game-color,white); position:relative; z-index:1; }

.ocv2-body { min-width:0; display:flex; flex-direction:column; gap:0.55rem; }
.ocv2-top { display:flex; align-items:center; gap:0.65rem; flex-wrap:wrap; }
.ocv2-title {
  font-size:1.15rem; font-weight:900;
  color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px;
  font-family: var(--font-display); letter-spacing:-0.01em; line-height:1.1;
}
.ocv2-badge {
  font-size: 0.6rem !important;
  padding: 0.28rem 0.62rem !important;
  border-radius: 999px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  border: 1px solid color-mix(in srgb, var(--status-color) 45%, transparent) !important;
  background: color-mix(in srgb, var(--status-color) 18%, rgba(0,0,0,0.25)) !important;
  color: var(--status-color) !important;
  text-shadow: 0 0 12px color-mix(in srgb, var(--status-color) 60%, transparent);
}
.ocv2-meta { display:flex; align-items:center; gap:0.45rem; font-size:0.78rem; color:var(--text-dim); flex-wrap:wrap; }
.ocv2-meta strong { color: #fff; font-weight: 700; }
.ocv2-dot { opacity:0.32; }

/* Bloc progression dans la carte */
.ocv2-prog {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
  border: 1px solid color-mix(in srgb, var(--status-color) 14%, rgba(255,255,255,0.05));
  margin-top: 0.2rem;
}
.ocv2-prog-top {
  display:flex; justify-content:space-between; align-items:center; font-size:0.72rem; color:var(--text-dim);
}
.ocv2-prog-top .ocv2-pct {
  font-family: var(--font-display); font-size:0.95rem; font-weight:900; color: var(--status-color);
  text-shadow: 0 0 12px color-mix(in srgb, var(--status-color) 55%, transparent);
}
.ocv2-prog-top .ocv2-current-chip {
  display:inline-flex; align-items:center; gap:0.3rem;
  padding: 0.15rem 0.5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--status-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-color) 32%, transparent);
  color: var(--status-color); font-weight: 700; font-size: 0.7rem;
}
.ocv2-bar { position: relative; height:6px; border-radius:4px; background:rgba(255,255,255,0.06); overflow:hidden; }
.ocv2-bar-fill {
  height:100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--status-color) 75%, #0a0a0c), var(--status-color));
  border-radius:4px;
  transition: width .35s ease;
  box-shadow: 0 0 10px color-mix(in srgb, var(--status-color) 65%, transparent);
  position: relative;
}
.ocv2-bar-fill::after {
  content:''; position:absolute; inset:0; border-radius:4px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  animation: ocv2Shimmer 2.2s ease-in-out infinite;
}
@keyframes ocv2Shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.ocv2-right { display:flex; flex-direction:column; align-items:flex-end; gap:0.55rem; flex-shrink:0; }
.ocv2-price-row { display:flex; flex-direction:column; align-items:flex-end; gap:0.1rem; }
.ocv2-price { font-family:var(--font-display); font-size:1.35rem; font-weight:900; color:#4ade80; white-space:nowrap; letter-spacing:-0.01em; }
.ocv2-price-old { font-size:0.75rem; color:var(--text-dim); text-decoration:line-through; opacity:0.55; }
.ocv2-actions { display:flex; gap:0.45rem; align-items:center; }
.ocv2-btn {
  padding:0.48rem 0.95rem; border-radius:10px; font-size:0.78rem; font-weight:800;
  border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.05); color:var(--text);
  cursor:pointer; transition:background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
  display:inline-flex; align-items:center; gap:0.3rem; white-space: nowrap;
}
.ocv2-btn:hover { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.25); transform: translateY(-1px); }
.ocv2-btn-primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--status-color) 80%, #0a0a0c), color-mix(in srgb, var(--status-color) 55%, #fff));
  border-color: color-mix(in srgb, var(--status-color) 55%, transparent);
  color: #0a0a0c;
}
.ocv2-btn-primary:hover { filter: brightness(1.06); }
.ocv2-btn-done { background:rgba(74,222,128,0.18); border-color:rgba(74,222,128,0.45); color:#4ade80; }
.ocv2-btn-done:hover { background:rgba(74,222,128,0.28); }
.ocv2-btn-retry { background:rgba(212,175,55,0.12); border-color:rgba(212,175,55,0.4); color:#f0c860; }
.ocv2-btn-danger { background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.4); color:#ef4444; }

/* === Booster progress widget (page de suivi de commande) === */
.booster-progress-widget {
  margin: 1.4rem 0;
  padding: 1.1rem 1.3rem;
  background: radial-gradient(140% 100% at 0% 0%, rgba(96,165,250,0.10) 0%, transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid rgba(96,165,250,0.28);
  border-radius: 14px;
  box-shadow: 0 14px 32px -22px rgba(96,165,250,0.6);
}
.bpw-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom: 0.85rem; }
.bpw-head h4 { margin:0 0 0.25rem; font-size:0.98rem; color:#fff; font-weight:800; }
.bpw-head p { margin:0; color:var(--text-dim); font-size:0.82rem; line-height:1.45; }
.bpw-current { font-size:0.78rem; color:var(--text-dim); padding:0.35rem 0.65rem; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:999px; white-space:nowrap; }
.bpw-current strong { color:#60a5fa; }
.bpw-row { display:flex; gap:0.55rem; flex-wrap:wrap; align-items:center; }
.bpw-select {
  flex: 1 1 140px; min-width:120px;
  padding:0.55rem 0.8rem; background:var(--bg-elev, rgba(0,0,0,0.3)); border:1px solid var(--border, rgba(255,255,255,0.10)); border-radius:9px;
  color:#fff; font-family:var(--font-body); font-size:0.88rem; font-weight:600;
}
.bpw-select:focus { outline:none; border-color:rgba(96,165,250,0.55); box-shadow:0 0 0 3px rgba(96,165,250,0.18); }
.bpw-btn {
  padding:0.6rem 1rem; border-radius:10px; border:1px solid rgba(96,165,250,0.55);
  background:linear-gradient(135deg,#3b82f6,#60a5fa); color:#fff; font-weight:800; font-size:0.86rem; cursor:pointer;
  transition: filter 0.15s, transform 0.15s;
}
.bpw-btn:hover { filter:brightness(1.06); }
.bpw-btn:disabled { opacity:0.6; cursor:not-allowed; }
.bpw-hint { margin-top:0.7rem; font-size:0.78rem; color:var(--text-dim); }
.bpw-section-label { font-size:0.68rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.07em; font-weight:800; margin-bottom:0.45rem; }
.bpw-quicks { display:flex; gap:0.45rem; flex-wrap:wrap; }
.bpw-quick {
  padding:0.5rem 0.9rem; border-radius:9px; border:1px solid rgba(96,165,250,0.30);
  background:rgba(96,165,250,0.08); color:#bfdbfe; font-weight:800; font-size:0.82rem; cursor:pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
  flex: 1 1 auto; min-width: 70px;
}
.bpw-quick:hover { background:rgba(96,165,250,0.18); border-color:rgba(96,165,250,0.55); color:#fff; transform:translateY(-1px); }
.bpw-foot { margin-top:0.8rem; font-size:0.74rem; color:var(--text-dim); line-height:1.45; opacity:0.85; }
.btn-claim-v2 { width:100%; padding:0.6rem 1rem; border-radius:9px; background:linear-gradient(135deg,#d4af37,#f0c860); color:#07060a; font-weight:700; font-size:0.85rem; border:none; cursor:pointer; transition:opacity 0.15s,transform 0.15s; display:flex; align-items:center; justify-content:center; gap:0.4rem; }
.btn-claim-v2:hover { opacity:0.9; transform:translateY(-1px); }
.btn-claim-v2 strong { font-weight:900; }

/* JOB BOARD */
.job-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.job-filter {
  padding: 0.5rem 1.1rem;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.job-filter:hover { border-color: rgba(212,175,55,0.45); color: #fff; }
.job-filter.active {
  background: linear-gradient(135deg, var(--gold, #d4af37), #f0c860);
  border-color: rgba(212,175,55,0.7);
  color: #1a1203;
  box-shadow: 0 4px 16px -6px rgba(212,175,55,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}

.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }

.job-card {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}

.job-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--game-color);
}

.job-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 20px 50px rgba(0,0,0,0.3); }

.job-card-head { display: flex; gap: 1rem; align-items: flex-start; }
.job-card-head .order-emblem { width: 48px; height: 48px; font-size: 1rem; border-radius: 10px; }
.job-card-head h4 { font-size: 1rem; margin-bottom: 0.2rem; }
.job-card-head .game-label { font-size: 0.78rem; color: var(--text-dim); }

.job-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding: 0.8rem;
  background: var(--surface);
  border-radius: 10px;
  font-size: 0.82rem;
}

.job-card-meta .m-lbl { color: var(--text-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.job-card-meta .m-val { font-weight: 600; }

.job-payout {
  padding: 0.8rem;
  background: linear-gradient(135deg, rgba(34,197,94,0.1), rgba(240,216,120,0.05));
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 10px;
  text-align: center;
}

.job-payout .lbl { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.job-payout .val { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: #4ade80; }

/* B1.3b — Prix initial barré quand le payout a augmenté (passage à 50% ou 60%) */
.job-payout .job-payout-old {
  font-size: 0.95rem;
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.4);
  margin-right: 0.4rem;
  font-weight: 500;
  opacity: 0.7;
}
.job-payout .job-payout-current {
  font-weight: 800;
}

.job-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* B1.2 — Mode DUO/SOLO mis en avant sur chaque carte du Job Board */
.job-playmode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.job-playmode-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.job-playmode-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}
.job-playmode-duo {
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(240,200,96,0.06));
  border-color: rgba(212,175,55,0.45);
}
.job-playmode-duo .job-playmode-value {
  color: #f0c860;
  text-shadow: 0 0 16px rgba(212,175,55,0.45);
}
.job-playmode-solo {
  background: linear-gradient(135deg, rgba(120,140,180,0.10), rgba(120,140,180,0.02));
  border-color: rgba(120,140,180,0.30);
}
.job-playmode-solo .job-playmode-value {
  color: #aab4c8;
}

/* ADMIN TABLES */
.table-wrap { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }

.table-head { padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

.table-head h3 { font-size: 1.1rem; }

.search-input {
  padding: 0.6rem 1rem 0.6rem 2.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 260px;
  font-size: 0.88rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b5a786' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.8rem center;
}

.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  padding: 0.9rem 1.5rem;
  font-size: 0.75rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover { background: var(--surface); }

.table-user { display: flex; align-items: center; gap: 0.7rem; }
.table-user .user-avatar { width: 34px; height: 34px; font-size: 0.8rem; }
.table-user strong { display: block; font-size: 0.88rem; }
.table-user span { font-size: 0.75rem; color: var(--text-dim); }

.table-actions { display: flex; gap: 0.3rem; }

/* FAQ */
.faq-wrap { max-width: 780px; margin: 0 auto; }

.faq-item {
  padding: 0;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  margin-bottom: 0.6rem;
  overflow: hidden;
}

.faq-q {
  padding: 1.2rem 1.5rem;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  font-size: 0.98rem;
  transition: all var(--dur) var(--ease);
}

.faq-q:hover { background: var(--surface); }
.faq-q .plus { width: 24px; height: 24px; display: grid; place-items: center; color: var(--accent); transition: transform var(--dur) var(--ease); flex-shrink: 0; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }

.faq-a {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: all var(--dur-slow) var(--ease);
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.6;
}

.faq-item.open .faq-a { padding: 0 1.5rem 1.5rem; max-height: 500px; }

/* LIVE SALE NOTIFICATIONS */
.live-sale {
  position: fixed;
  bottom: 24px;
  left: 24px;
  padding: 1rem 1.2rem;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 340px;
  z-index: 250;
  transform: translateX(-400px);
  transition: transform var(--dur-slow) var(--ease);
}

.live-sale.show { transform: translateX(0); }

.live-sale .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--game-color, var(--accent));
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.live-sale .info { font-size: 0.82rem; line-height: 1.4; }
.live-sale .info strong { display: block; font-size: 0.88rem; margin-bottom: 0.15rem; }
.live-sale .info .meta { color: var(--text-dim); font-size: 0.75rem; }

/* TOAST */
.toast-wrap { position: fixed; top: 90px; right: 24px; z-index: 500; display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none; }

.toast {
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 280px;
  max-width: 400px;
  transform: translateX(440px);
  animation: toastIn 0.3s var(--ease) forwards, toastOut 0.3s var(--ease) 3.5s forwards;
  pointer-events: auto;
}

.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger); }
.toast.info { border-left: 3px solid var(--info); }
.toast.warn { border-left: 3px solid var(--warning); }

.toast .icon { width: 24px; height: 24px; display: grid; place-items: center; flex-shrink: 0; }
.toast.success .icon { color: var(--success); }
.toast.error .icon { color: var(--danger); }
.toast.info .icon { color: var(--info); }
.toast.warn .icon { color: var(--warning); }

@keyframes toastIn { to { transform: translateX(0); } }
@keyframes toastOut { to { transform: translateX(440px); opacity: 0; } }

/* FOOTER */
.site-footer {
  padding: 4rem 0 2rem;
  border-top: 1px solid var(--border);
  margin-top: 6rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}

@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

.footer-col h5 { font-family: var(--font-display); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; color: var(--text); }
.footer-col a { display: block; padding: 0.3rem 0; color: var(--text-dim); font-size: 0.88rem; transition: color var(--dur) var(--ease); cursor: pointer; }
.footer-col a:hover { color: var(--accent); }
.footer-about p { color: var(--text-dim); font-size: 0.88rem; margin-top: 1rem; }

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--text-faint);
  font-size: 0.82rem;
}

.social { display: flex; gap: 0.5rem; }
.social a { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; transition: all var(--dur) var(--ease); }
.social a:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* UTILITIES ADDITIONAL */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-sm { gap: 0.5rem; }
.gap { gap: 1rem; }
.gap-lg { gap: 2rem; }
.mt-sm { margin-top: 0.5rem; } .mt { margin-top: 1rem; } .mt-lg { margin-top: 2rem; }
.mb-sm { margin-bottom: 0.5rem; } .mb { margin-bottom: 1rem; } .mb-lg { margin-bottom: 2rem; }
.center { text-align: center; }
.hidden { display: none !important; }

/* REVIEWS */
.reviews-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.review-card { padding: 1.5rem; border-radius: var(--radius-lg); background: var(--bg-elev); border: 1px solid var(--border); }
.review-stars { color: var(--gold); margin-bottom: 0.8rem; letter-spacing: 0.1em; }
.review-card p { font-size: 0.92rem; color: var(--text); margin-bottom: 1rem; line-height: 1.6; }
.review-author { display: flex; align-items: flex-start; gap: 0.7rem; }
.review-author strong { display: block; font-size: 0.88rem; }
.review-author span { font-size: 0.75rem; color: var(--text-dim); }
.review-avatar {
  --avatar-bg: linear-gradient(135deg, #f0d878, #b88920);
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  color: rgba(255,255,255,0.92);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.45), transparent 24%),
    var(--avatar-bg);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 24px rgba(0,0,0,0.32);
}
.review-avatar::before,
.review-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8,9,12,0.34);
}
.review-avatar::before {
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
}
.review-avatar::after {
  bottom: 4px;
  width: 24px;
  height: 15px;
  border-radius: 16px 16px 8px 8px;
}
.review-avatar span {
  position: relative;
  z-index: 1;
  font-size: 0;
}
.review-avatar-one { --avatar-bg: linear-gradient(135deg, #4655ff, #d7b64b); }
.review-avatar-two { --avatar-bg: linear-gradient(135deg, #f06f9f, #7457ff); }
.review-avatar-three { --avatar-bg: linear-gradient(135deg, #20c997, #1d4ed8); }
.review-avatar-four { --avatar-bg: linear-gradient(135deg, #f5b942, #f97316); }
.review-avatar-five { --avatar-bg: linear-gradient(135deg, #8b5cf6, #111827); }
.review-avatar-six { --avatar-bg: linear-gradient(135deg, #14b8a6, #eab308); }
.review-author-meta,
.review-country {
  display: block;
}
.review-country {
  margin-top: 0.12rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255,255,255,0.5) !important;
}
.review-flag {
  width: 18px;
  height: 12px;
  display: inline-block;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 2px 6px rgba(0,0,0,0.22);
  overflow: hidden;
}
.flag-fr { background: linear-gradient(90deg, #244aa5 0 33%, #fff 33% 66%, #d53343 66%); }
.flag-gb {
  background:
    linear-gradient(90deg, transparent 44%, #fff 44% 56%, transparent 56%),
    linear-gradient(0deg, transparent 39%, #fff 39% 61%, transparent 61%),
    linear-gradient(90deg, transparent 47%, #c8102e 47% 53%, transparent 53%),
    linear-gradient(0deg, transparent 43%, #c8102e 43% 57%, transparent 57%),
    #012169;
}
.flag-be { background: linear-gradient(90deg, #111 0 33%, #ffd90c 33% 66%, #ef3340 66%); }
.flag-de { background: linear-gradient(180deg, #111 0 33%, #dd0000 33% 66%, #ffce00 66%); }
.flag-ch {
  background:
    linear-gradient(90deg, transparent 40%, #fff 40% 60%, transparent 60%),
    linear-gradient(0deg, transparent 34%, #fff 34% 66%, transparent 66%),
    #d52b1e;
}

/* TABS */
.tabs { display: flex; gap: 0.3rem; background: var(--surface); padding: 4px; border-radius: 12px; border: 1px solid var(--border); width: fit-content; margin-bottom: 1.5rem; }
.tab { padding: 0.6rem 1.2rem; border-radius: 9px; font-size: 0.88rem; font-weight: 600; color: var(--text-dim); transition: all var(--dur) var(--ease); }
.tab.active { background: var(--accent); color: #0a0a0c; }

/* CASHBACK / WALLET */
.wallet-card {
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(240,216,120,0.1));
  border: 1px solid var(--border-strong);
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}

.wallet-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.3), transparent 70%);
  filter: none;
}

.wallet-card > * { position: relative; z-index: 1; }

.wallet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.wallet-head h3 { font-size: 1.2rem; }
.wallet-balance { font-family: var(--font-display); font-size: 3rem; font-weight: 800; line-height: 1; margin-bottom: 0.3rem; }
.wallet-label { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 1.5rem; }

.wallet-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.wallet-stat { padding: 1rem; background: rgba(0,0,0,0.3); border-radius: 12px; }
.wallet-stat .lbl { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 0.3rem; }
.wallet-stat .val { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }

/* === Booster Earnings — hero + sidebar + activity feed === */
.earn-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 880px) { .earn-hero { grid-template-columns: 1fr; } }
.earn-hero-main {
  position: relative;
  padding: 1.8rem 1.9rem;
  border-radius: 18px;
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(74,222,128,0.16) 0%, transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(74,222,128,0.10) 0%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(74,222,128,0.32);
  box-shadow: 0 22px 50px -32px rgba(74,222,128,0.6);
  overflow: hidden;
}
.earn-hero-main::before {
  content:''; position:absolute; inset:auto 0 0 0; height:80px;
  background: linear-gradient(180deg, transparent, rgba(74,222,128,0.06));
  pointer-events: none;
}
.earn-hero-row { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; position:relative; }
.earn-hero-label { color:#9ee2af; font-size:0.72rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
.earn-hero-value {
  font-family: var(--font-display); font-weight: 900; font-size: 3rem; line-height: 1.05; color: #fff;
  margin-top: 0.25rem;
  text-shadow: 0 2px 24px rgba(74,222,128,0.35);
}
.earn-hero-sub { color: var(--text-dim, #b0b8b0); font-size: 0.85rem; margin-top: 0.55rem; }
.earn-hero-cta { display:flex; align-items:center; gap:1rem; }
.earn-hero-glyph { width:88px; height:88px; flex:none; opacity:.95; filter: drop-shadow(0 4px 18px rgba(74,222,128,0.45)); }
.earn-hero-cta #requestPayoutBtn { padding: 0.7rem 1.1rem; font-size: 0.88rem; white-space: nowrap; font-weight: 800; }
@media (max-width: 520px) { .earn-hero-glyph { display:none; } }

.earn-hero-side { display:flex; flex-direction:column; gap:0.85rem; }
.earn-mini {
  display:grid; grid-template-columns: 38px 1fr; gap: 0.85rem; align-items:center;
  padding: 1rem 1.1rem; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.18s, transform 0.18s;
}
.earn-mini:hover { transform: translateY(-1px); }
.earn-mini-hold { border-color: rgba(167,139,250,0.30); }
.earn-mini-total { border-color: rgba(240,200,96,0.30); }
.earn-mini-icon {
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
}
.earn-mini-hold .earn-mini-icon { color:#a78bfa; background:rgba(167,139,250,0.12); border:1px solid rgba(167,139,250,0.30); }
.earn-mini-total .earn-mini-icon { color:#f0c860; background:rgba(240,200,96,0.12); border:1px solid rgba(240,200,96,0.30); }
.earn-mini-label { font-size:0.7rem; color:var(--text-dim, #8a8a92); text-transform:uppercase; letter-spacing:0.06em; font-weight:700; }
.earn-mini-value { font-family:var(--font-display); font-weight:900; font-size:1.45rem; line-height:1.05; color:#fff; margin-top:0.1rem; }
.earn-mini-hold .earn-mini-value { color:#a78bfa; }
.earn-mini-total .earn-mini-value { color:#f0c860; }
.earn-mini-foot { color:var(--text-dim, #8a8a92); font-size:0.74rem; margin-top:0.2rem; }

/* === Activity feed (à la place du tableau Skycoach) === */
.earn-history-v2 {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
}
.earn-history-v2 .earn-history-head {
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap;
  padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.earn-history-v2 .earn-history-head h3 { margin:0; font-size:1.05rem; font-weight:800; }
.earn-history-sub { margin:0.2rem 0 0; color: var(--text-dim, #8a8a92); font-size:0.78rem; }

.earn-feed { list-style:none; margin:0; padding:0.4rem 0; max-height: 480px; overflow-y:auto; }
.earn-feed-empty { padding: 2.5rem 1rem; text-align:center; color: var(--text-dim, #8a8a92); font-size: 0.9rem; list-style:none; }
.earn-feed-item {
  display:grid; grid-template-columns: 42px 1fr; gap: 0.9rem;
  padding: 0.85rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.04);
  align-items: center;
}
.earn-feed-item:first-child { border-top: none; }
.earn-feed-item:hover { background: rgba(255,255,255,0.02); }
.earn-feed-icon {
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none;
}
.earn-feed-in    .earn-feed-icon { color:#4ade80; background:rgba(74,222,128,0.10); border:1px solid rgba(74,222,128,0.25); }
.earn-feed-out   .earn-feed-icon { color:#f87171; background:rgba(248,113,113,0.10); border:1px solid rgba(248,113,113,0.25); }
.earn-feed-hold  .earn-feed-icon { color:#a78bfa; background:rgba(167,139,250,0.10); border:1px solid rgba(167,139,250,0.28); }
.earn-feed-main { min-width:0; display:flex; flex-direction:column; gap:0.18rem; }
.earn-feed-line1 { display:flex; justify-content:space-between; align-items:baseline; gap:0.8rem; }
.earn-feed-action { font-weight:800; font-size:0.92rem; color:#fff; }
.earn-feed-amount { font-family: var(--font-display); font-weight:900; font-size:1rem; white-space:nowrap; }
.earn-feed-in   .earn-feed-amount { color:#4ade80; }
.earn-feed-out  .earn-feed-amount { color:#f87171; }
.earn-feed-hold .earn-feed-amount { color:#a78bfa; }
.earn-feed-line2 { display:flex; justify-content:space-between; align-items:center; gap:0.6rem; font-size:0.78rem; color:var(--text-dim, #8a8a92); flex-wrap:wrap; }
.earn-feed-details { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.earn-feed-meta { display:inline-flex; align-items:center; gap:0.55rem; white-space:nowrap; }
.earn-feed-date { opacity:0.9; }

/* === Legacy "earn-summary" (compat — laisser au cas où d'autres pages s'en servent) === */
.earn-summary {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.earn-card {
  --earn-accent: rgba(255,255,255,0.6);
  --earn-accent-soft: rgba(255,255,255,0.08);
  position: relative;
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--earn-accent-soft) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 110px;
  overflow: hidden;
}
.earn-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--earn-accent), transparent);
  opacity: 0.85;
}
.earn-card-accent {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--earn-accent);
  background: var(--earn-accent-soft);
  border: 1px solid color-mix(in srgb, var(--earn-accent) 25%, transparent);
}
.earn-card-balance {
  --earn-accent: #4ade80;
  --earn-accent-soft: rgba(74,222,128,0.13);
  border-color: rgba(74,222,128,0.30);
  box-shadow: 0 0 0 1px rgba(74,222,128,0.05) inset, 0 12px 28px -18px rgba(74,222,128,0.55);
}
.earn-card-hold {
  --earn-accent: #a78bfa;
  --earn-accent-soft: rgba(167,139,250,0.14);
  border-color: rgba(167,139,250,0.28);
  box-shadow: 0 0 0 1px rgba(167,139,250,0.05) inset, 0 12px 28px -18px rgba(167,139,250,0.55);
}
.earn-card-total {
  --earn-accent: #f0c860;
  --earn-accent-soft: rgba(240,200,96,0.14);
  border-color: rgba(240,200,96,0.30);
  box-shadow: 0 0 0 1px rgba(240,200,96,0.05) inset, 0 12px 28px -18px rgba(240,200,96,0.55);
}
.earn-card-row { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding-right: 2.6rem; }
.earn-card-hold .earn-card-label,
.earn-card-total .earn-card-label { padding-right: 2.6rem; }
.earn-card-label { color: var(--text-dim, #8a8a92); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.earn-card-value {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--earn-accent);
  line-height: 1;
  text-shadow: 0 1px 12px color-mix(in srgb, var(--earn-accent) 25%, transparent);
}
.earn-card-value-sm {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--earn-accent);
  line-height: 1;
  margin-top: 0.15rem;
  text-shadow: 0 1px 10px color-mix(in srgb, var(--earn-accent) 22%, transparent);
}
.earn-card-hint { color: var(--text-dim, #8a8a92); font-size: 0.78rem; line-height: 1.45; margin-top: auto; }
.earn-card #requestPayoutBtn { padding: 0.55rem 0.95rem; font-size: 0.82rem; white-space: nowrap; }

.earn-history {
  background: var(--bg-elev, rgba(255,255,255,0.02));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  overflow: hidden;
}
.earn-history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.earn-history-head h3 { font-size: 1rem; margin: 0; font-weight: 700; }
.earn-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.earn-tab {
  padding: 0.42rem 0.85rem;
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 999px;
  color: var(--text-dim, #8a8a92);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.earn-tab:hover { color: #fff; border-color: rgba(255,255,255,0.2); }
.earn-tab.active { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.18); }

.earn-history-table-wrap { overflow-x: auto; }
.earn-history-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.earn-history-table thead th {
  text-align: left;
  padding: 0.65rem 1.1rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-dim, #8a8a92);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  background: rgba(0,0,0,0.18);
}
.earn-history-table tbody td {
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
  color: var(--text, #e6e6ea);
}
.earn-history-table tbody tr:last-child td { border-bottom: none; }
.earn-history-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.earn-history-table .col-date { color: var(--text-dim, #8a8a92); white-space: nowrap; font-size: 0.8rem; width: 1%; }
.earn-history-table .col-action { width: 1%; white-space: nowrap; }
.earn-history-table .col-amount { font-weight: 700; white-space: nowrap; width: 1%; }
.earn-history-table .col-details { color: var(--text, #e6e6ea); font-size: 0.85rem; }
.earn-history-table .col-status { width: 1%; white-space: nowrap; text-align: right; }

.earn-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.earn-action-in   { background: rgba(74,222,128,0.10); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.earn-action-out  { background: rgba(248,113,113,0.10); color: #f87171; border: 1px solid rgba(248,113,113,0.22); }
.earn-action-hold { background: rgba(167,139,250,0.10); color: #a78bfa; border: 1px solid rgba(167,139,250,0.24); }

.earn-amount-in   { color: #4ade80; }
.earn-amount-out  { color: #f87171; }
.earn-amount-hold { color: #a78bfa; }

.earn-status {
  display: inline-block;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.earn-status-ok      { background: rgba(74,222,128,0.10); color: #4ade80; }
.earn-status-hold    { background: rgba(167,139,250,0.10); color: #a78bfa; }
.earn-status-pending { background: rgba(250,204,21,0.10); color: #fbbf24; }
.earn-status-warn    { background: rgba(248,113,113,0.10); color: #f87171; }

@media (max-width: 720px) {
  .earn-summary { grid-template-columns: 1fr; }
  .earn-history-head { flex-direction: column; align-items: flex-start; }
  .earn-history-table .col-details { font-size: 0.8rem; }
}

/* LEVEL / LOYALTY */
.level-card { padding: 1.5rem; border-radius: var(--radius-lg); background: var(--bg-elev); border: 1px solid var(--border); margin-bottom: 2rem; }
.level-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.level-badge { padding: 0.3rem 0.7rem; border-radius: 6px; background: var(--surface); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.3rem; }
.level-tier-bronze { color: var(--bronze); background: rgba(205,127,50,0.15); }
.level-tier-silver { color: var(--silver); background: rgba(197,204,219,0.15); }
.level-tier-gold { color: var(--gold); background: rgba(255,182,54,0.15); }
.level-tier-diamond { color: var(--accent-2); background: rgba(240,216,120,0.15); }
.level-progress { height: 6px; background: var(--surface); border-radius: 3px; overflow: hidden; margin: 0.6rem 0 0.5rem; }
.level-progress .fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 3px; }
.level-next { font-size: 0.82rem; color: var(--text-dim); }

/* === Booster overview — cleaner, less templated layout === */
.booster-ov-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 2rem; align-items: stretch; }
.booster-ov-row #ebSafeRankWidget { margin: 0; display: flex; }
.booster-ov-row .eb-safe-rank-widget { margin: 0; width: 100%; }
.booster-ov-row .bonus-card { margin: 0; }
@media (max-width: 760px) { .booster-ov-row { grid-template-columns: 1fr; } }
[data-panel="overview-booster"] .stats-grid { gap: 0.85rem; }
[data-panel="overview-booster"] .stat-card { padding: 1.15rem 1.25rem; }
[data-panel="overview-booster"] .stat-card::before { display: none; }
[data-panel="overview-booster"] .stat-card .stat-value { font-size: 1.55rem; }
[data-panel="overview-booster"] .stat-card .stat-icon { width: 30px; height: 30px; border-radius: 8px; background: transparent; opacity: 0.5; }
/* Rank module help button */
.eb-safe-rank-help { position: absolute; top: 0.7rem; right: 0.8rem; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--text-dim, #8a8a92); font-size: 0.72rem; font-weight: 800; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; z-index: 2; }
.eb-safe-rank-help:hover { color: #fff; border-color: rgba(255,255,255,.35); }

/* Skeleton placeholder for the rank widget while async data loads */
.eb-rank-skeleton { pointer-events: none; }
.eb-skel-block,
.eb-skel-line {
  display: inline-block;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: ebSkelShimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.eb-skel-block { width: 36px; height: 36px; border-radius: 10px; }
@keyframes ebSkelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* EMPTY STATES */
.empty-state { padding: 3rem 2rem; text-align: center; color: var(--text-dim); }
.empty-state .empty-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; margin: 0 auto 1rem; color: var(--text-faint); }
.empty-state h4 { color: var(--text); margin-bottom: 0.4rem; font-family: var(--font-display); }

/* SUPPORT TICKETS */
.ticket-item {
  padding: 1.2rem 1.5rem;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.ticket-item:hover { border-color: var(--border-strong); background: var(--surface); }
.ticket-item-head { display: flex; justify-content: space-between; margin-bottom: 0.4rem; align-items: flex-start; }
.ticket-item h4 { font-size: 0.98rem; margin-bottom: 0.2rem; font-family: var(--font-body); font-weight: 600; }
.ticket-item .ticket-meta { font-size: 0.78rem; color: var(--text-dim); }
.ticket-item p { font-size: 0.85rem; color: var(--text-dim); margin-top: 0.4rem; line-height: 1.5; }

/* BOOSTER APPLICATION */
.apply-page { padding: 3rem 0 6rem; }
.apply-wrap { max-width: 760px; margin: 0 auto; }

/* ===== APPLY HERO ===== */
.apply-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.5rem; align-items: center; margin-bottom: 3.5rem; }
.apply-brand { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1.4rem; }
.apply-brand img { display: block; }
.apply-brand span { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; }
.apply-hero-title { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.02; margin: 0.8rem 0 1.2rem; font-family: var(--font-display); font-weight: 700; }
.apply-hero-title span { display: block; }
.apply-hero-lead { font-size: 1.08rem; color: var(--text-dim); line-height: 1.6; max-width: 30em; }
.apply-hero-cta { display: flex; gap: 0.8rem; margin-top: 1.8rem; flex-wrap: wrap; }
.apply-stat-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.apply-stat { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem 1.2rem; }
.apply-stat-val { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--premium-2); line-height: 1; }
.apply-stat-lbl { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.5rem; line-height: 1.3; }

/* ===== SECTION LABELS / HEADINGS ===== */
.apply-section-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); margin-bottom: 1rem; font-weight: 600; }
.apply-h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-family: var(--font-display); font-weight: 700; margin-bottom: 1.6rem; }
.apply-block { margin-bottom: 3.5rem; }

/* ===== WHAT YOU'LL DO CARDS ===== */
.apply-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.apply-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; transition: border-color 0.18s ease, transform 0.18s ease; }
.apply-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.apply-card-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--premium-soft); color: var(--premium-2); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.apply-card-icon svg { width: 22px; height: 22px; }
.apply-card h4 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.apply-card p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.55; }

/* ===== PERKS TABLE ===== */
.apply-perks { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.apply-perk { display: grid; grid-template-columns: 230px 1fr; gap: 1.5rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border); align-items: center; }
.apply-perk:last-child { border-bottom: none; }
.apply-perk:nth-child(odd) { background: var(--surface); }
.apply-perk-k { font-weight: 700; font-size: 0.95rem; color: var(--premium-2); }
.apply-perk-v { font-size: 0.9rem; color: var(--text-dim); line-height: 1.5; }

/* ===== RANK BANNER ===== */
.apply-rank-banner { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding: 1.4rem 1.8rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--premium-soft), transparent); border: 1px solid var(--premium); margin-bottom: 1.8rem; }
.apply-rank-banner-lbl { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 0.25rem; }
.apply-rank-banner-val { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--premium-2); }

/* ===== CHECKLIST ===== */
.apply-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.apply-checklist li { position: relative; padding-left: 1.8rem; font-size: 0.95rem; color: var(--text-dim); line-height: 1.55; }
.apply-checklist li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--premium); font-size: 0.9rem; }
.apply-checklist li strong { color: var(--text); }

/* ===== SECURITY BLOCK ===== */
.apply-secure { background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 2rem; position: relative; overflow: hidden; }
.apply-secure::before { content: ""; position: absolute; top: 0; right: 0; width: 300px; height: 300px; background: radial-gradient(circle, var(--premium-soft), transparent 70%); pointer-events: none; }
.apply-secure-head { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.6rem; position: relative; }
.apply-secure-shield { flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; background: var(--premium-soft); display: flex; align-items: center; justify-content: center; color: var(--premium-2); }
.apply-secure-head h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.apply-secure-head p { font-size: 0.92rem; color: var(--text-dim); }
.apply-secure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; position: relative; }
.apply-secure-item { display: flex; gap: 0.85rem; align-items: flex-start; }
.apply-secure-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--premium-2); }
.apply-secure-icon svg { width: 19px; height: 19px; }
.apply-secure-k { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.3rem; }
.apply-secure-v { font-size: 0.88rem; color: var(--text-dim); line-height: 1.55; }

/* ===== ONBOARDING ===== */
.apply-onb { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.apply-onb-item { display: flex; gap: 1rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem; }
.apply-onb-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; background: var(--premium-soft); color: var(--premium-2); display: flex; align-items: center; justify-content: center; }
.apply-onb-icon svg { width: 21px; height: 21px; }
.apply-onb-item strong { display: block; margin-bottom: 0.3rem; font-size: 0.98rem; }
.apply-onb-item p { font-size: 0.86rem; color: var(--text-dim); line-height: 1.5; }

/* ===== STEPPER ===== */
.apply-steps { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.apply-step { flex: 1; min-width: 150px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem 1.1rem; text-align: center; position: relative; }
.apply-step-num { width: 34px; height: 34px; border-radius: 50%; background: var(--premium-soft); color: var(--premium-2); font-family: var(--font-display); font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.7rem; }
.apply-step-t { font-size: 0.85rem; color: var(--text-dim); line-height: 1.4; }

/* ===== FORM ===== */
.apply-form-block { max-width: 820px; margin-left: auto; margin-right: auto; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2.5rem; scroll-margin-top: 90px; }
.apply-form-brand { text-align: center; margin-bottom: 0.8rem; }
.apply-form-brand img { display: inline-block; opacity: 0.95; }
.apply-form-sub { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 1.8rem; }
.apply-auth-note { margin: -0.8rem 0 1.6rem; padding: 0.85rem 1rem; border-radius: var(--radius); border: 1px solid rgba(212,175,55,0.28); background: rgba(212,175,55,0.08); color: var(--text-dim); font-size: 0.86rem; line-height: 1.45; }
.apply-auth-note strong { color: var(--premium-2); }
.apply-auth-note.signed { border-color: rgba(34,197,94,0.28); background: rgba(34,197,94,0.08); }
.apply-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.apply-fg-full { grid-column: 1 / -1; }
.apply-region-hint { font-size: 0.78rem; color: var(--text-faint); font-weight: 400; }
.apply-regions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.apply-region-chip { display: inline-flex; align-items: center; padding: 0.55rem 1rem; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--text-dim); transition: all 0.15s ease; user-select: none; }
.apply-region-chip:hover { border-color: var(--border-strong); color: var(--text); }
.apply-region-chip.active { background: var(--premium-soft); border-color: var(--premium); color: var(--premium-2); }
.apply-region-chip.disabled { opacity: 0.4; cursor: not-allowed; }
.apply-games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; }
.apply-games-grid label { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 0.86rem; transition: all 0.15s ease; }
.apply-games-grid label:hover { border-color: var(--border-strong); }
.apply-games-grid input { width: auto !important; }
.apply-langs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.apply-langs label { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; cursor: pointer; font-size: 0.84rem; transition: all 0.15s ease; }
.apply-langs label:hover { border-color: var(--border-strong); }
.apply-langs input { width: auto !important; }
.apply-consent { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.82rem; cursor: pointer; margin: 1.2rem 0 1.5rem; color: var(--text-dim); line-height: 1.5; }
.apply-upload { border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 1.8rem 1rem; text-align: center; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease; }
.apply-upload:hover, .apply-upload.dragover { border-color: var(--premium); background: var(--premium-soft); }
.apply-upload-inner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--text-dim); pointer-events: none; }
.apply-upload-inner svg { color: var(--premium-2); }
.apply-upload-text { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.apply-upload-hint { font-size: 0.78rem; color: var(--text-faint); }
.apply-upload-preview { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }
.apply-upload-thumb { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.apply-upload-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apply-upload-thumb button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,0.7); color: #fff; cursor: pointer; font-size: 0.8rem; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.apply-upload-thumb button:hover { background: var(--danger); }
.apply-consent input { width: auto !important; margin-top: 3px; flex-shrink: 0; }
.apply-submit { width: 100%; justify-content: center; padding: 1.05rem; }

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  .apply-hero { grid-template-columns: 1fr; gap: 2rem; }
  .apply-perk { grid-template-columns: 1fr; gap: 0.3rem; }
  .apply-perk-k { color: var(--premium-2); }
  .apply-secure-grid { grid-template-columns: 1fr; }
  .apply-form-grid { grid-template-columns: 1fr; }
  .apply-rank-banner-game { margin-left: 0; width: 100%; }
  .apply-form-block { padding: 1.5rem; }
}

/* VISIBLY-ONLINE INDICATOR */
.online-count {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 99px;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.3);
  font-size: 0.82rem;
  color: #86efac;
}

.online-count .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: pulse 2s infinite; }

/* ACCOUNT SETTINGS */
.settings-section { padding: 1.5rem; border-radius: var(--radius-lg); background: var(--bg-elev); border: 1px solid var(--border); margin-bottom: 1rem; }
.settings-section h4 { margin-bottom: 1rem; font-family: var(--font-display); font-size: 1.05rem; }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0; border-bottom: 1px dashed var(--border); }
.settings-row:last-child { border-bottom: none; }
.settings-row .lbl { font-size: 0.9rem; }
.settings-row .sub { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.1rem; }

.switch { width: 44px; height: 24px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); position: relative; cursor: pointer; transition: background var(--dur) var(--ease); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-dim); transition: all var(--dur) var(--ease); }
.switch.on { background: var(--accent); border-color: var(--accent); }
.switch.on::after { left: 22px; background: white; }

/* MOBILE NAV */
@media (max-width: 880px) {
  .main-nav { display: none; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .checkout-wrap { grid-template-columns: 1fr; }
  .user-menu-name { display: none; }
}

/* ==========================================================================
   NEW MODULES CSS
   ========================================================================== */

/* ===== BOOSTER MARKETPLACE ===== */
.booster-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.2rem;
}

.booster-card {
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all var(--dur) var(--ease);
  cursor: pointer;
}

.booster-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 30px 70px rgba(0,0,0,0.4);
}

.booster-cover {
  height: 100px;
  position: relative;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  overflow: hidden;
}

.booster-cover::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

.booster-card-body {
  padding: 0 1.5rem 1.5rem;
  margin-top: -40px;
  position: relative;
}

.booster-avatar-lg {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 4px solid var(--bg-elev);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800; font-size: 2rem;
  color: white;
  margin-bottom: 0.8rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.booster-card h4 { font-size: 1.15rem; margin-bottom: 0.2rem; }
.booster-card .booster-rank { font-size: 0.82rem; color: var(--accent); font-weight: 600; margin-bottom: 0.8rem; }

.booster-badges { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 1rem; }

.booster-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.8rem;
  background: var(--surface);
  border-radius: 10px;
  margin-bottom: 1rem;
}

.booster-stat { text-align: center; }
.booster-stat .num { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; display: block; }
.booster-stat .lbl { font-size: 0.7rem; color: var(--text-dim); }

.booster-rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 1rem;
}
.booster-rating .stars { color: var(--gold); font-size: 0.9rem; letter-spacing: 0.05em; }
.booster-rating .count { font-size: 0.78rem; color: var(--text-dim); }

.booster-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: rgba(239,68,68,0.15);
  color: #f87171;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.booster-live-badge::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: #f87171;
  animation: pulse 1.5s infinite;
}

/* ===== BOOSTER PROFILE DETAIL ===== */
.booster-profile-hero {
  padding: 3rem 2rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(240,216,120,0.05));
  border: 1px solid var(--border-strong);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 2rem;
}
@media (max-width: 760px) { .booster-profile-hero { grid-template-columns: 1fr; text-align: center; } }

.booster-profile-hero .booster-avatar-lg { width: 140px; height: 140px; font-size: 3rem; margin: 0; }

.booster-profile-info h2 { margin-bottom: 0.5rem; }
.booster-profile-rank { font-size: 1rem; color: var(--accent); margin-bottom: 1rem; font-weight: 600; }

.booster-stream-embed {
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  text-align: center;
  margin-bottom: 2rem;
}
.booster-stream-embed .stream-placeholder {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #18181b, #27272a);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}
.booster-stream-embed .stream-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(145,70,255,0.2), transparent 60%);
}
.booster-stream-embed .stream-icon { font-size: 4rem; z-index: 1; position: relative; }
.stream-offline { color: var(--text-faint); }

/* ===== REVIEWS ===== */
.review-item {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  margin-bottom: 0.8rem;
}
.review-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.8rem;
  gap: 1rem;
}
.review-item-author { display: flex; align-items: center; gap: 0.7rem; }
.review-item-author .user-avatar { width: 38px; height: 38px; font-size: 0.85rem; }
.review-item-stars { color: var(--gold); font-size: 0.9rem; letter-spacing: 0.1em; }
.review-item-date { font-size: 0.78rem; color: var(--text-dim); }
.review-item-body { font-size: 0.92rem; color: var(--text); line-height: 1.6; margin-bottom: 0.6rem; }
.review-item-game { font-size: 0.78rem; color: var(--text-dim); }

/* ===== TIPS ===== */
.tips-wrap {
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(255,182,54,0.1), rgba(255,70,85,0.05));
  border: 1px solid rgba(255,182,54,0.3);
  text-align: center;
  margin: 2rem 0;
}
.tips-wrap h3 { margin-bottom: 0.5rem; }
.tips-wrap p { color: var(--text-dim); margin-bottom: 1.5rem; }

.tips-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.7rem;
  max-width: 600px;
  margin: 0 auto 1rem;
}

.tip-option {
  padding: 1.2rem 0.5rem;
  border-radius: 12px;
  background: var(--bg-elev);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}
.tip-option:hover { border-color: var(--gold); transform: translateY(-2px); }
.tip-option.active {
  background: linear-gradient(135deg, rgba(255,182,54,0.2), rgba(255,70,85,0.1));
  border-color: var(--gold);
  color: var(--gold);
}
.tip-option .tip-amount { display: block; font-size: 0.78rem; color: var(--text-dim); margin-top: 0.2rem; font-family: var(--font-body); font-weight: 500; }
.tip-option.active .tip-amount { color: var(--gold); }

.tip-custom-input {
  max-width: 300px;
  margin: 1rem auto;
}

/* ===== REVIEW FORM ===== */
.review-form-wrap {
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  margin: 2rem 0;
  text-align: center;
}

.star-rating {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin: 1.5rem 0;
}

.star-btn {
  font-size: 2.5rem;
  color: var(--border);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
}
.star-btn:hover, .star-btn.active { color: var(--gold); transform: scale(1.1); }

/* ===== TRUST & PROTECTION ===== */
.trust-section {
  padding: 4rem 0;
  background: linear-gradient(180deg, transparent, rgba(34,197,94,0.05), transparent);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.3rem;
}

.trust-card {
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all var(--dur) var(--ease);
}

.trust-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }

.trust-card::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--trust-color, var(--success));
  filter: none;
  opacity: 0.15;
}

.trust-card > * { position: relative; }

.trust-badge-icon {
  width: 72px; height: 72px;
  margin: 0 auto 1.2rem;
  border-radius: 20px;
  display: grid; place-items: center;
  background: var(--trust-color, var(--success));
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  font-size: 2rem;
}

.trust-card h4 { font-family: var(--font-display); margin-bottom: 0.5rem; }
.trust-card p { color: var(--text-dim); font-size: 0.92rem; line-height: 1.6; }

.trust-guarantee-banner {
  margin-top: 2.5rem;
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(240,216,120,0.08));
  border: 2px solid rgba(34,197,94,0.3);
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.trust-guarantee-icon {
  width: 80px; height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  display: grid; place-items: center;
  font-size: 2.5rem;
  flex-shrink: 0;
}

.trust-guarantee-text h3 { margin-bottom: 0.4rem; }
.trust-guarantee-text p { color: var(--text-dim); }

/* ===== ELEVATE+ SUBSCRIPTION ===== */
.elevate-plus-hero {
  padding: 3rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #d4af37, #f0d878, #ff44dd);
  background-size: 200% 200%;
  animation: gradShift 8s ease infinite;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}

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

.elevate-plus-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.2), transparent 40%);
}

.elevate-plus-hero > * { position: relative; z-index: 1; }

.elevate-plus-badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.25);
  backdrop-filter: none;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.elevate-plus-hero h2 { color: white; margin-bottom: 0.5rem; font-size: 2.5rem; }
.elevate-plus-hero p { color: rgba(255,255,255,0.9); font-size: 1.1rem; margin-bottom: 2rem; }

.elevate-plus-price {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.2rem;
}
.elevate-plus-price small { font-size: 1rem; font-weight: 400; opacity: 0.8; }

.elevate-plus-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.elevate-plus-feat {
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.15);
  backdrop-filter: none;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
}
.elevate-plus-feat .icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.08); margin-bottom: 0.6rem; color: #fff; }
.elevate-plus-feat .icon svg { width: 20px; height: 20px; }
.elevate-plus-feat strong { display: block; margin-bottom: 0.2rem; }
.elevate-plus-feat span { font-size: 0.85rem; opacity: 0.85; }

.btn-elevate-plus {
  background: white;
  color: #d4af37;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 99px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.btn-elevate-plus:hover { transform: translateY(-2px) scale(1.02); }

/* ===== REFERRAL ===== */
.referral-card {
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(240,216,120,0.05));
  border: 1px solid var(--border-strong);
  margin-bottom: 2rem;
}

.referral-code-box {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  background: var(--bg-elev);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.referral-code {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
}

.referral-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

/* ===== CROSS-SELL BANNER ===== */
.crosssell-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 340px;
  padding: 1.2rem 1.5rem;
  background: linear-gradient(135deg, #ff44dd, #d4af37);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  color: white;
  z-index: 260;
  transform: translateY(400px);
  transition: transform var(--dur-slow) var(--ease);
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.crosssell-banner.show { transform: translateY(0); }
.crosssell-banner .icon { font-size: 2rem; flex-shrink: 0; }
.crosssell-banner strong { display: block; margin-bottom: 0.3rem; }
.crosssell-banner p { font-size: 0.82rem; opacity: 0.9; margin-bottom: 0.6rem; }
.crosssell-banner .btn { padding: 0.4rem 0.8rem; font-size: 0.8rem; background: white; color: #d4af37; }
.crosssell-banner .close-cs { position: absolute; top: 8px; right: 8px; opacity: 0.7; font-size: 0.85rem; }

/* ===== BLOG ===== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.blog-card {
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
}

.blog-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }

.blog-cover {
  height: 180px;
  position: relative;
  background: linear-gradient(135deg, var(--blog-color-1, var(--accent)), var(--blog-color-2, var(--accent-2)));
  overflow: hidden;
}

.blog-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1), transparent 50%),
    linear-gradient(180deg, transparent, rgba(12,16,32,0.6));
}

.blog-cover-label {
  position: absolute;
  top: 14px; left: 14px;
  padding: 0.3rem 0.7rem;
  background: rgba(0,0,0,0.5);
  backdrop-filter: none;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: white;
}

.blog-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.blog-body h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
}

.blog-body .excerpt { color: var(--text-dim); font-size: 0.88rem; line-height: 1.5; flex: 1; }

.blog-body .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* ===== ACADEMY ===== */
.academy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.3rem;
}

.course-card {
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--dur) var(--ease);
}

.course-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }

.course-cover {
  height: 140px;
  position: relative;
  background: linear-gradient(135deg, var(--course-color, #d4af37), #f0d878);
  display: grid;
  place-items: center;
  font-size: 3rem;
}

.course-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
}

.course-rank-badge {
  position: absolute;
  top: 12px; right: 12px;
  padding: 0.3rem 0.7rem;
  background: rgba(0,0,0,0.6);
  backdrop-filter: none;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: white;
  z-index: 1;
}

.course-body { padding: 1.3rem; flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
.course-body h4 { font-size: 1rem; font-family: var(--font-display); }
.course-body p { font-size: 0.85rem; color: var(--text-dim); flex: 1; }
.course-meta { font-size: 0.78rem; color: var(--text-faint); display: flex; gap: 0.8rem; }

.course-footer {
  padding: 1rem 1.3rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.course-price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
}

/* ===== ACCOUNT MARKETPLACE ===== */
.marketplace-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
}
@media (max-width: 900px) { .marketplace-wrap { grid-template-columns: 1fr; } }

/* Mobile filter trigger button */
.mp-mobile-filter-btn {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-elev);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-bottom: 1rem;
  position: relative;
}
.mp-mobile-filter-btn:hover { border-color: var(--accent); }
.mp-mobile-filter-btn .mp-active-count {
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  padding: 1px 7px;
  border-radius: 99px;
  font-weight: 700;
  margin-left: auto;
}

.mp-sidebar {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.mp-sidebar::-webkit-scrollbar { width: 6px; }
.mp-sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.mp-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
  gap: 0.5rem;
}
.mp-sidebar-head h4 { margin: 0; font-size: 1rem; }
.mp-clear-all {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
}
.mp-clear-all:hover { background: var(--accent-soft); }
.mp-close-mobile { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 0.3rem; }

.mp-filter-group { margin-bottom: 1.5rem; }
.mp-filter-group h5 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 0.7rem 0; color: var(--text-dim); font-weight: 700; }

.mp-filter-chip {
  display: block;
  padding: 0.5rem 0.8rem;
  margin-bottom: 0.3rem;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 180ms ease;
  text-align: left;
  width: 100%;
}
.mp-filter-chip:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.mp-filter-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.mp-filter-chip .count { float: right; color: var(--text-faint); font-size: 0.78rem; }

.mp-checkbox {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 6px;
  transition: background 150ms ease;
  margin-bottom: 0.15rem;
}
.mp-checkbox:hover { background: var(--surface); }
.mp-checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.mp-plat-ico { display:inline-flex; width:16px; height:16px; color:var(--text-dim); flex-shrink:0; }
.mp-plat-ico svg { width:100%; height:100%; }
.mp-plat-opt:hover .mp-plat-ico { color:var(--text); }
.mp-char-hint { font-size:0.72rem; color:var(--text-faint); margin:0 0 0.5rem; line-height:1.3; }
.mp-char-grid { display:flex; flex-wrap:wrap; gap:0.35rem; }
.mp-char-chip {
  font-size:0.72rem;
  padding:0.3rem 0.55rem;
  border-radius:999px;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--text-dim);
  cursor:pointer;
  transition:all 140ms ease;
  white-space:nowrap;
}
.mp-char-chip:hover { border-color:var(--accent); color:var(--text); }
.mp-char-chip.active { background:var(--accent); border-color:var(--accent); color:#0a0a0a; font-weight:600; }

/* Unified filter chips (tags / weapons / characters) */
.mp-chip-wrap { display:flex; flex-wrap:wrap; gap:6px; }
.mp-chip-btn {
  font-size:0.76rem;
  padding:0.4rem 0.7rem;
  border-radius:8px;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--text-dim);
  cursor:pointer;
  transition:all 140ms ease;
  white-space:nowrap;
  line-height:1.1;
}
.mp-chip-btn:hover { border-color:var(--accent); color:var(--text); }
.mp-chip-btn.active { background:rgba(240,180,41,0.16); border-color:#f0b429; color:#f0c860; font-weight:600; }

/* ===== MARKETPLACE FAQ ===== */
.mp-faq { max-width: 820px; margin: 4rem auto 0; }
.mp-faq-head { text-align: center; margin-bottom: 2rem; }
.mp-faq-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.5rem; }
.mp-faq-head p { color: var(--text-dim); font-size: 0.98rem; }
.mp-faq-list { display: flex; flex-direction: column; gap: 0.7rem; }
.mp-faq-item {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 180ms ease;
}
.mp-faq-item[open] { border-color: rgba(212,175,55,0.4); }
.mp-faq-item summary {
  padding: 1.1rem 1.3rem;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text);
}
.mp-faq-item summary::-webkit-details-marker { display: none; }
.mp-faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--accent);
  transition: transform 220ms ease;
  flex-shrink: 0;
  line-height: 1;
}
.mp-faq-item[open] summary::after { transform: rotate(45deg); }
.mp-faq-a {
  padding: 0 1.3rem 1.2rem;
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.6;
}

.mp-price-range { display: flex; gap: 0.5rem; align-items: center; }
.mp-price-range input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text);
}
.mp-price-shortcuts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  margin-top: 0.6rem;
}
.mp-price-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 150ms ease;
}
.mp-price-chip:hover { background: var(--surface-hover); border-color: var(--accent); color: var(--text); }
.mp-price-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

#mpRegion {
  width: 100%;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
}

/* Results head */
.mp-results-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.mp-sort-select {
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

.mp-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}

/* === MOBILE: Filter sheet bottom === */
@media (max-width: 900px) {
  .mp-mobile-filter-btn { display: flex; }

  .mp-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    height: 85vh;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
    z-index: 600;
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
    padding-bottom: 6rem;
  }
  .mp-sidebar.open { transform: translateY(0); }
  .mp-close-mobile { display: block; }
  .mp-apply-mobile { display: block !important; position: sticky; bottom: 0; }

  /* Backdrop */
  body.mp-sheet-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: none;
    z-index: 599;
  }

  .mp-results-head { flex-direction: column; align-items: stretch; }
  .mp-sort-select { width: 100%; }
  .mp-products { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
}
@media (max-width: 480px) {
  .mp-products { grid-template-columns: 1fr; }
}

/* ===== MARKETPLACE PRODUCT CARDS — V2 (GameBoost-style) ===== */
.mp-product {
  padding: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease, box-shadow 280ms ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.mp-product:hover {
  border-color: rgba(212,175,55,0.5);
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(212,175,55,0.15);
}

/* Top corner ribbon (rank) */
.mp-product-ribbon {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 0.35rem 0.7rem;
  background: rgba(0,0,0,0.78);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.mp-product-ribbon::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ribbon-color, var(--accent));
  box-shadow: 0 0 8px var(--ribbon-color, var(--accent));
}

/* Verified badge (top-right) — subtle, not a loud green pill */
.mp-product-verified {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 3;
  padding: 0.28rem 0.5rem;
  background: rgba(10,12,10,0.62);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(52,211,153,0.45);
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #6ee7b7;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  text-transform: uppercase;
}

/* === COVER (editorial: dark panel + thin game-color accent, no AI gradient slab) === */
.mp-product-cover {
  height: 124px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--product-color, var(--accent)) 14%, var(--bg-elev)) 0%, var(--bg-elev) 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0;
  border-bottom: 1px solid var(--border);
}
.mp-product-cover.has-photos { height: 160px; background: #0c0d10; }
/* top accent rule in the game's color */
.mp-product-cover::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--product-color, var(--accent)), transparent 85%);
  z-index: 4;
}

/* === PHOTO CAROUSEL === */
.mp-cover-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
  touch-action: pan-y;
}
.mp-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}
.mp-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mp-slide.mp-slide-broken { background: repeating-linear-gradient(45deg, #16181d, #16181d 10px, #1b1e24 10px, #1b1e24 20px); }
.mp-slide.mp-slide-broken img { opacity: 0; }

.mp-cover-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(8,10,14,0.6);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 160ms ease, background 160ms ease;
  padding: 0;
  padding-bottom: 2px;
}
.mp-cover-arrow.prev { left: 8px; }
.mp-cover-arrow.next { right: 8px; }
.mp-product-cover:hover .mp-cover-arrow { opacity: 1; }
.mp-cover-arrow:hover { background: rgba(8,10,14,0.85); }
@media (hover: none) { .mp-cover-arrow { display: none; } } /* mobile: swipe only */

.mp-cover-dots {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 5px;
}
.mp-cover-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: background 160ms ease, width 160ms ease;
}
.mp-cover-dot.active { background: #fff; width: 14px; border-radius: 3px; }

/* Cover gradient overlay for readability */
.mp-product-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(0,0,0,0.45) 100%);
  z-index: 2;
  pointer-events: none;
}
.mp-product-cover.has-photos::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 30%, transparent 55%, rgba(0,0,0,0.82) 100%);
}

/* Game letter fallback — subtle monogram, bottom-right, low opacity */
.mp-product-cover-letter {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--product-color, var(--accent)) 22%, transparent);
  letter-spacing: -0.04em;
  line-height: 1;
  z-index: 1;
  user-select: none;
  pointer-events: none;
}

/* Title overlaid on cover */
.mp-product-cover-title {
  position: relative;
  z-index: 3;
  padding: 0.85rem 1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  pointer-events: none;
}
.mp-product-cover-game {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--product-color, var(--accent)) 75%, #fff);
}
.mp-product-cover-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* === BODY === */
.mp-product-body {
  padding: 0.9rem 1rem 0.7rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Feature badges grid */
.mp-product-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.mp-feature {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 0.72rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.2;
}
.mp-feature-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
  line-height: 1;
}
.mp-feature-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-feature.highlight {
  background: rgba(212,175,55,0.08);
  border-color: rgba(212,175,55,0.3);
  color: #f0c860;
}

/* === FOOTER === */
.mp-product-foot {
  padding: 0.85rem 1rem 1rem;
  background: rgba(0,0,0,0.25);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.mp-product-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.mp-product-price-label {
  font-size: 0.68rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.mp-product-foot .mp-price {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #f0c860;
  background: linear-gradient(135deg, #d4af37 0%, #f0c860 50%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  line-height: 1;
}

.mp-product-seller {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border);
}
.mp-seller-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #f0c860);
  display: grid;
  place-items: center;
  color: #07060a;
  font-size: 0.72rem;
  font-weight: 800;
  font-family: var(--font-display);
  flex-shrink: 0;
}
.mp-seller-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.mp-seller-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-seller-stats {
  font-size: 0.68rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.mp-seller-rating {
  color: #fbbf24;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.mp-product-buy-btn {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid color-mix(in srgb, var(--product-color, var(--accent)) 45%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--product-color, var(--accent)) 9%, transparent);
  color: var(--text);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background 180ms ease, border-color 180ms ease, color 160ms ease, transform 160ms ease;
}
.mp-product-buy-btn::after {
  content: '→';
  font-size: 0.95rem;
  transition: transform 180ms ease;
}
.mp-product:hover .mp-product-buy-btn,
.mp-product-buy-btn:hover {
  background: color-mix(in srgb, var(--product-color, var(--accent)) 22%, transparent);
  border-color: var(--product-color, var(--accent));
  color: #fff;
}
.mp-product-buy-btn:hover::after { transform: translateX(3px); }
.mp-product-buy-btn:active { transform: translateY(1px); }

/* Empty state for marketplace */
.mp-empty-state {
  grid-column: 1 / -1;
  padding: 4rem 2rem;
  text-align: center;
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.mp-empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}
.mp-empty-state h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.mp-empty-state p {
  color: var(--text-dim);
  font-size: 0.95rem;
  max-width: 400px;
  margin: 0 auto;
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .mp-product-cover { height: 150px; }
  .mp-product-cover-name { font-size: 0.95rem; }
  .mp-product-foot .mp-price { font-size: 1rem; }
}

/* ===== ACCOUNT DETAIL PAGE ===== */
.acc-detail-wrap {
  max-width: 1200px;
  margin: 0 auto;
}
.acc-back-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
  margin-bottom: 1.5rem;
  cursor: pointer;
  transition: color 200ms ease, transform 200ms ease;
}
.acc-back-btn:hover {
  color: var(--accent);
  transform: translateX(-3px);
}

.acc-detail-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 960px) {
  .acc-detail-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* === LEFT COLUMN === */
.acc-gallery-main {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--border);
}
.acc-gallery-main-letter {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 14rem;
  font-weight: 900;
  color: rgba(255,255,255,0.1);
  letter-spacing: -0.04em;
  line-height: 1;
  z-index: 1;
  user-select: none;
}
.acc-gallery-main-overlay {
  position: relative;
  z-index: 2;
  padding: 1.2rem 1.5rem;
  width: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%);
}
.acc-gallery-main-tag {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.acc-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin-top: 0.7rem;
}
.acc-gallery-thumb {
  aspect-ratio: 1;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid var(--border);
  transition: border-color 200ms ease, transform 200ms ease;
}
.acc-gallery-thumb:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.acc-gallery-thumb.active { border-color: var(--accent); }
.acc-gallery-thumb-inner {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
}
.acc-gallery-thumb-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.acc-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.acc-section h3 {
  font-size: 1.05rem;
  margin: 0 0 1rem 0;
  font-weight: 700;
}
.acc-description {
  color: var(--text-dim);
  line-height: 1.65;
  font-size: 0.95rem;
}
.acc-skins-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
@media (max-width: 640px) { .acc-skins-list { grid-template-columns: 1fr; } }
.acc-skins-list li {
  padding: 0.55rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.acc-skins-list li::before {
  content: '✨';
  font-size: 0.85rem;
  flex-shrink: 0;
}

.acc-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
@media (max-width: 640px) { .acc-info-grid { grid-template-columns: 1fr; } }
.acc-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.8rem;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.acc-info-key {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 600;
}
.acc-info-val {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

/* === RIGHT COLUMN — BUY BOX (sticky) === */
.acc-detail-right {
  position: sticky;
  top: 96px;
}
@media (max-width: 960px) {
  .acc-detail-right { position: static; }
}

.acc-buybox {
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.acc-buybox-head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}
.acc-buybox-rank {
  padding: 0.35rem 0.7rem;
  background: rgba(0,0,0,0.5);
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.1);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.acc-buybox-rank::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ribbon-color, var(--accent));
  box-shadow: 0 0 8px var(--ribbon-color, var(--accent));
}
.acc-buybox-verified {
  padding: 0.3rem 0.55rem;
  background: rgba(34,197,94,0.92);
  border-radius: 6px;
  font-size: 0.66rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.acc-buybox-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0 0 0.4rem 0;
  font-weight: 700;
}
.acc-buybox-game {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 1.2rem;
}

.acc-buybox-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1rem;
  background: rgba(212,175,55,0.06);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 12px;
  margin-bottom: 1.2rem;
}
.acc-buybox-price-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.acc-buybox-price-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #d4af37 0%, #f0c860 50%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  line-height: 1;
}

.acc-buybox-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}
.acc-feature-mini {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--text);
  font-weight: 500;
}

.acc-buybox-cta {
  width: 100%;
  padding: 0.95rem;
  border: none;
  border-radius: 11px;
  background: linear-gradient(135deg, #d4af37 0%, #f0c860 100%);
  color: #07060a;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
  margin-bottom: 0.6rem;
}
.acc-buybox-cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 22px rgba(212,175,55,0.4);
  transform: translateY(-1px);
}
.acc-buybox-cta.in-cart {
  background: rgba(34,197,94,0.15);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.4);
}
.acc-buybox-cta-secondary {
  width: 100%;
  padding: 0.85rem;
  border: 1.5px solid var(--accent);
  border-radius: 11px;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 180ms ease, transform 180ms ease;
}
.acc-buybox-cta-secondary:hover {
  background: rgba(212,175,55,0.08);
  transform: translateY(-1px);
}

.acc-buybox-guarantee {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.acc-guarantee-item {
  font-size: 0.78rem;
  color: var(--text-dim);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
}
.acc-guarantee-item span:first-child {
  flex-shrink: 0;
  font-size: 0.95rem;
}

.acc-buybox-seller {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--border);
}
.acc-buybox-seller-head {
  font-size: 0.7rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.acc-buybox-seller-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* ===== PURCHASED ACCOUNTS — SECURE DELIVERY PANEL ===== */
.purchased-acc-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.purchased-acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: linear-gradient(135deg, var(--game-color, var(--accent))22, transparent);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.purchased-acc-head-left { flex: 1; min-width: 0; }
.purchased-acc-title {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.2rem 0;
}
.purchased-acc-meta {
  font-size: 0.78rem;
  color: var(--text-dim);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.purchased-acc-rank-pill {
  padding: 0.2rem 0.5rem;
  background: var(--surface);
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid var(--border);
}
.purchased-acc-body {
  padding: 1.3rem;
}
.purchased-acc-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  background: rgba(212,175,55,0.07);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 10px;
  margin-bottom: 1.1rem;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
}
.purchased-acc-warning-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.purchased-acc-cred-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.6rem;
}
.purchased-acc-cred-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  min-width: 80px;
  flex-shrink: 0;
}
.purchased-acc-cred-value {
  flex: 1;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.9rem;
  color: var(--text);
  word-break: break-all;
  user-select: text;
}
.purchased-acc-cred-value.masked {
  color: var(--text-faint);
  letter-spacing: 0.1em;
  user-select: none;
}
.purchased-acc-cred-btn {
  padding: 0.4rem 0.65rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms ease;
  flex-shrink: 0;
}
.purchased-acc-cred-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.purchased-acc-cred-extra {
  padding: 0.8rem 1rem;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.82rem;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.6;
  margin-top: 0.6rem;
  position: relative;
}
.purchased-acc-cred-extra.masked {
  color: var(--text-faint);
  filter: none;
  user-select: none;
}
.purchased-acc-empty {
  padding: 4rem 2rem;
  text-align: center;
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: 14px;
}
.purchased-acc-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }

/* ===== ACCOUNT DETAIL — Tertiary CTA (chat seller) ===== */
.acc-buybox-cta-tertiary {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  margin-top: 0.6rem;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.acc-buybox-cta-tertiary:hover {
  background: var(--bg-elev);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ===== MARKETPLACE CHAT (buyer ↔ seller) ===== */
.mp-chat-wrap {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 540px;
}
.mp-chat-head {
  padding: 1rem 1.2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.mp-chat-warning {
  padding: 0.75rem 1.2rem;
  background: rgba(212,175,55,0.08);
  border-bottom: 1px solid rgba(212,175,55,0.2);
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.mp-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 320px;
  max-height: 60vh;
}
.mp-chat-input-wrap {
  padding: 0.8rem 1rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.mp-chat-input-wrap .chat-input {
  flex: 1;
  padding: 0.65rem 0.9rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-size: 0.9rem;
}
.mp-chat-input-wrap .chat-send {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: linear-gradient(135deg, #d4af37, #f0c860);
  color: #07060a;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 180ms ease;
}
.mp-chat-input-wrap .chat-send:hover { transform: translateY(-1px); }

/* ===== 2FA CODE MODAL ===== */
.twofa-modal {
  max-width: 440px;
}
.twofa-account-info {
  padding: 0.9rem 1rem;
  background: var(--surface);
  border-radius: 10px;
  margin-bottom: 1.5rem;
}
.twofa-account-title {
  font-weight: 700;
  font-size: 0.95rem;
}
.twofa-account-meta {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
}
.twofa-status {
  text-align: center;
  padding: 2.5rem 1rem;
}
.twofa-spinner {
  width: 56px;
  height: 56px;
  border: 4px solid rgba(212,175,55,0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto;
  animation: twofaSpin 0.8s linear infinite;
}
@keyframes twofaSpin {
  to { transform: rotate(360deg); }
}
.twofa-code-block {
  text-align: center;
  padding: 1.5rem 1rem;
  background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(240,200,96,0.04));
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 14px;
  margin-bottom: 1.2rem;
}
.twofa-code-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.twofa-code {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  background: linear-gradient(135deg, #d4af37 0%, #f0c860 50%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 1rem;
  user-select: all;
}
.twofa-code-copy {
  padding: 0.55rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms ease;
}
.twofa-code-copy:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.twofa-countdown-wrap {
  margin-top: 1.2rem;
}
.twofa-countdown-bar {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
}
.twofa-countdown-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #d4af37, #f0c860);
  transition: width 250ms linear;
}
.twofa-countdown-text {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.twofa-tip {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border-radius: 9px;
  line-height: 1.5;
}

/* ===== ADMIN: MOD ALERTS ===== */
.stat-mini {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1.2rem;
  min-width: 120px;
}
.stat-mini-val {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.stat-mini-lbl {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-top: 0.3rem;
}
.modalerts-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.modalert-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 4px solid #ef4444;
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
}
.modalert-card.resolved {
  border-left-color: #22c55e;
  opacity: 0.65;
}
.modalert-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}
.modalert-user {
  font-weight: 700;
  font-size: 0.95rem;
}
.modalert-meta {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 0.2rem;
}
.modalert-status {
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.modalert-status.pending {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}
.modalert-status.resolved {
  background: rgba(34,197,94,0.15);
  color: #22c55e;
}
.modalert-patterns {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.modalert-pattern {
  padding: 0.25rem 0.55rem;
  background: rgba(239,68,68,0.1);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
}
.modalert-text {
  padding: 0.8rem 1rem;
  background: var(--surface);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.86rem;
  color: var(--text);
  margin-bottom: 0.9rem;
  word-break: break-word;
}
.modalert-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Admin chat view modal (read-only) */
.admin-chat-thread {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-right: 0.3rem;
}
.admin-chat-msg {
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: var(--surface);
}
.admin-chat-msg.buyer {
  background: rgba(59,130,246,0.08);
  border-left: 3px solid rgba(59,130,246,0.5);
}
.admin-chat-msg.seller {
  background: rgba(212,175,55,0.08);
  border-left: 3px solid rgba(212,175,55,0.5);
}
.admin-chat-msg-from {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-bottom: 0.3rem;
}
.admin-chat-msg-text {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
}
.admin-chat-msg-time {
  font-size: 0.7rem;
  color: var(--text-faint);
  margin-top: 0.3rem;
}

/* ===== BOOST ECO BADGE ===== */
.option-card.eco { border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.05); }
.option-card.eco.active { border-color: var(--success); background: rgba(34,197,94,0.15); }
.option-card.eco .opt-boost { color: #4ade80; }

/* ===== DEADLINE DISPLAY ===== */
.deadline-display {
  margin-top: 0.8rem;
  padding: 0.8rem 1rem;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 10px;
  font-size: 0.88rem;
  color: #86efac;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.deadline-display strong { color: #4ade80; }

/* ===== PAGE HEADERS ===== */
.page-header {
  padding: 3rem 0 2rem;
  text-align: center;
}
.page-header .eyebrow { color: var(--accent); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.8rem; }
.page-header h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 0.8rem; }
.page-header p { color: var(--text-dim); font-size: 1.05rem; max-width: 600px; margin: 0 auto; }

/* ===== MARKETPLACE HEADER (left text + right sell CTA) ===== */
.mp-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0 2rem;
  flex-wrap: wrap;
}
.mp-page-header-text { text-align: left; }
.mp-page-header-text .eyebrow { color: var(--accent); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.5rem; }
.mp-page-header-text h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 0.4rem; line-height: 1.05; }
.mp-page-header-text p { color: var(--text-dim); font-size: 0.98rem; max-width: 540px; margin: 0; }
.mp-sell-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold, #d4af37), #b8932e);
  color: #1a1407;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  border: 1px solid rgba(240,196,41,0.4);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(212,175,55,0.25);
  transition: transform 180ms ease, box-shadow 200ms ease, filter 180ms ease;
}
.mp-sell-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(212,175,55,0.38); filter: brightness(1.05); }
.mp-sell-cta svg { flex-shrink: 0; }
@media (max-width: 720px) {
  .mp-page-header { flex-direction: column; align-items: stretch; }
  .mp-sell-cta { width: 100%; justify-content: center; }
}

/* ===== SELLER VERIFICATION MODAL ===== */
.sv-modal { position: relative; }
.sv-modal-bar { position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--gold,#d4af37), transparent 80%); border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.sv-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.7rem 0.9rem; }
.sv-grid .sv-full { grid-column:1 / -1; }
.sv-req { color:#f0b429; font-weight:700; }
.sv-opt { color:var(--text-faint); font-weight:400; font-size:0.8em; }
.sv-uploads { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.6rem; margin:1rem 0; }
.sv-upload {
  border:1px dashed var(--border-strong);
  border-radius:10px;
  padding:0.9rem 0.6rem;
  text-align:center;
  cursor:pointer;
  transition:border-color 160ms ease, background 160ms ease;
  background:var(--surface);
}
.sv-upload:hover { border-color:var(--accent); background:var(--accent-soft); }
.sv-upload.filled { border-style:solid; border-color:#34d399; background:rgba(52,211,153,0.07); }
.sv-upload-icon { font-size:1.4rem; margin-bottom:0.3rem; }
.sv-upload-label { font-size:0.72rem; font-weight:600; color:var(--text); line-height:1.25; margin-bottom:0.25rem; }
.sv-upload-state { font-size:0.68rem; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; }
.sv-upload.filled .sv-upload-state { color:#6ee7b7; font-weight:600; }
@media (max-width: 560px) {
  .sv-grid { grid-template-columns:1fr; }
  .sv-uploads { grid-template-columns:1fr; }
}

/* ===== COURSE / BLOG BADGE */
.course-badge-bronze { background: var(--bronze); }
.course-badge-silver { background: linear-gradient(135deg, #c5ccdb, #8b95a8); }
.course-badge-gold { background: linear-gradient(135deg, #ffb636, #d4941f); }
.course-badge-diamond { background: linear-gradient(135deg, #b44dff, #f0d878); }

@media (max-width: 880px) {
  .booster-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .payment-methods { grid-template-columns: 1fr; }
}

/* ===== NAV DROPDOWN & LANG SELECTOR ===== */
.nav-dropdown-wrap {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 300px;
  max-width: min(340px, calc(100vw - 2rem));
  padding: 0.75rem;
  background: linear-gradient(180deg, rgba(18,20,30,0.98) 0%, rgba(12,14,22,0.99) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 200;
}

.nav-dropdown-wrap:hover .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-feature {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.65rem 0.75rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav-dropdown-feature img {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,70,85,0.32);
  box-shadow: 0 8px 22px rgba(255,70,85,0.2);
}

.nav-dropdown-feature strong {
  display: block;
  color: #fff;
  font-size: 0.86rem;
}

.nav-dropdown-feature span {
  display: block;
  color: var(--text-dim);
  font-size: 0.68rem;
  margin-top: 0.12rem;
}

.nav-dropdown-item {
  padding: 0.62rem 0.7rem;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: all 220ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  position: relative;
  overflow: hidden;
}

.nav-dropdown-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--game-rgb-dd, 100,100,100), 0.12), transparent 70%);
  opacity: 0;
  transition: opacity 220ms ease;
  border-radius: 12px;
}

.nav-dropdown-item:hover {
  background: rgba(255,255,255,0.04);
}

.nav-dropdown-item:hover::before {
  opacity: 1;
}

/* Logo miniature du jeu dans le dropdown */
.nav-dropdown-game-img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: transform 220ms ease, box-shadow 220ms ease;
  border: 1px solid rgba(255,255,255,0.06);
}
.nav-dropdown-item:hover .nav-dropdown-game-img {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(var(--game-rgb-dd, 100,100,100), 0.4);
  border-color: rgba(var(--game-rgb-dd, 100,100,100), 0.4);
}

/* Fallback icon si pas d'image */
.nav-dropdown-game-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  color: white;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: transform 220ms ease;
}
.nav-dropdown-item:hover .nav-dropdown-game-icon {
  transform: scale(1.08);
}

.nav-dropdown-game-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 60%);
}

.nav-dropdown-item .game-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.nav-dropdown-item .game-name {
  font-weight: 700;
  font-size: 0.84rem;
  color: #fff;
  transition: color 200ms ease;
}
.nav-dropdown-item:hover .game-name {
  color: var(--game-accent, var(--accent));
}

.nav-dropdown-item .game-tagline-dd {
  font-size: 0.66rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-dropdown-item .arrow {
  opacity: 0;
  transform: translateX(-6px);
  transition: all 200ms ease;
  color: var(--game-accent, var(--accent));
  font-size: 0.9rem;
  flex-shrink: 0;
}

.nav-dropdown-item:hover .arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Responsive : colonne unique sur mobile */
@media (max-width: 880px) {
  .nav-dropdown {
    min-width: 260px;
    left: 0;
    transform: translateX(0) translateY(-8px);
  }
  .nav-dropdown-wrap:hover .nav-dropdown {
    transform: translateX(0) translateY(0);
  }
}

@media (max-width: 1100px) {
  .nav-dropdown { min-width: 300px; }
}

/* Lang selector */
.lang-selector-wrap .lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 0.4rem;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: all var(--dur) var(--ease);
  z-index: 200;
}

.lang-selector-wrap.open .lang-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
  font-size: 0.88rem;
}

.lang-option:hover {
  background: var(--surface-hover);
}

.lang-option.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.lang-option .flag {
  font-size: 1.2rem;
}

@media (max-width: 1100px) {
  .nav-dropdown { min-width: 270px; }
}

/* ==========================================================================
   GAMES DROPDOWN — premium vertical list (featured pick + gold accents)
   ========================================================================== */
.nav-dropdown {
  min-width: 340px; max-width: min(356px, calc(100vw - 1.5rem));
  padding: 0.85rem; gap: 0;
  background: linear-gradient(180deg, rgba(20,18,13,0.99) 0%, rgba(11,10,8,0.99) 100%);
  border: 1px solid rgba(212,175,55,0.32);
  box-shadow: 0 24px 70px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,175,55,0.07) inset, 0 -46px 80px -48px rgba(212,175,55,0.22) inset;
  max-height: calc(100vh - 130px); overflow-y: auto;
}
.nav-dropdown::-webkit-scrollbar { width: 6px; }
.nav-dropdown::-webkit-scrollbar-track { background: transparent; }
.nav-dropdown::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.3); border-radius: 999px; }

.nav-dd-ic {
  position: relative; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; overflow: hidden; flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.nav-dd-ic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Logos qui remplissent toute la pastille : on les réduit un peu pour matcher les autres */
.nav-dropdown [data-game-dropdown="valorant"] .nav-dd-ic img { object-fit: contain; box-sizing: border-box; padding: 18%; }
.nav-dd-ic-letter { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: #fff; }

.nav-dd-name { font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; color: var(--text); transition: color .18s ease; }

/* Lead pick — same size as the rest, just a gold highlight */
.nav-dd-feat {
  position: relative; display: flex; align-items: center; gap: 0.8rem; cursor: pointer;
  padding: 0.58rem 0.8rem; border-radius: 11px; margin-bottom: 0.45rem;
  background: linear-gradient(135deg, rgba(212,175,55,0.14), rgba(212,175,55,0.03));
  border: 1px solid rgba(240,200,96,0.5);
  box-shadow: 0 6px 20px rgba(212,175,55,0.1);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nav-dd-feat:hover { transform: translateY(-1px); border-color: rgba(240,200,96,0.85); box-shadow: 0 9px 28px rgba(212,175,55,0.22); }
.nav-dd-feat .nav-dd-ic { background: rgba(212,175,55,0.12); border-color: rgba(240,200,96,0.4); }
.nav-dd-feat .nav-dd-ic-letter { color: var(--premium-2); }
.nav-dd-feat .nav-dd-name { flex: 1; color: #f5e3a8; }
.nav-dd-tag {
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700;
  color: #0a0a0c; background: linear-gradient(135deg, #f0c860, #d4af37);
  padding: 0.22rem 0.55rem; border-radius: 999px;
}

/* List */
.nav-dd-list { display: flex; flex-direction: column; gap: 0.1rem; }
.nav-dd-row {
  display: flex; align-items: center; gap: 0.8rem; cursor: pointer;
  padding: 0.58rem 0.8rem; border-radius: 11px; position: relative;
  transition: background .18s ease;
}
.nav-dd-row:hover { background: rgba(212,175,55,0.09); }
.nav-dd-row:hover .nav-dd-name { color: var(--premium-2); }
.nav-dd-arr {
  margin-left: auto; color: var(--premium-2); font-size: 0.9rem;
  opacity: 0; transform: translateX(-6px); transition: all .18s ease;
}
.nav-dd-row:hover .nav-dd-arr { opacity: 1; transform: translateX(0); }

/* Footer */
.nav-dd-foot { margin-top: 0.65rem; padding-top: 0.6rem; border-top: 1px solid rgba(212,175,55,0.14); }
.nav-dd-foot button {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.6rem; border-radius: 11px; cursor: pointer;
  background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.28);
  color: var(--premium-2); font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nav-dd-foot button:hover { background: rgba(212,175,55,0.18); border-color: rgba(212,175,55,0.55); box-shadow: 0 6px 18px rgba(212,175,55,0.2); }
.nav-dd-foot button .arr { transition: transform .2s ease; }
.nav-dd-foot button:hover .arr { transform: translateX(4px); }

@media (max-width: 880px) {
  .nav-dropdown { min-width: min(340px, calc(100vw - 1.5rem)); max-width: calc(100vw - 1.5rem); }
}

/* ==========================================================================
   PERF : rendu "a la demande" des sections de l'accueil.
   Le navigateur ne calcule les effets (flous, halos, animations) d'une section
   que lorsqu'elle est a l'ecran. Design 100% identique, gros gain au scroll.
   (Verifie : aucun script ne mesure ces sections, donc sans risque.)
   ========================================================================== */
#gamesCatalogSection,
#privateOpeningSection,
.site-purpose-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* ===== GAME MODES PAGE (inspired by boostingmarket) ===== */
.game-modes-subnav {
  display: flex;
  gap: 0.3rem;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  width: fit-content;
  margin: 0 auto 2.5rem;
  flex-wrap: wrap;
}

.game-modes-subnav-btn {
  padding: 0.6rem 1.3rem;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dim);
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}

.game-modes-subnav-btn:hover { color: var(--text); }
.game-modes-subnav-btn.active { background: var(--bg); color: var(--text); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

.game-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
}

.game-mode-card {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 360px;
}

.game-mode-card:hover {
  transform: translateY(-4px);
  border-color: var(--mode-color, var(--accent));
  box-shadow: 0 30px 70px rgba(0,0,0,0.4);
}

.game-mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at bottom right, var(--mode-color, var(--accent))22, transparent 50%);
  opacity: 0.5;
  pointer-events: none;
}

.game-mode-number {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.3rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-weight: 600;
}

.game-mode-discount {
  position: absolute;
  top: -8px;
  left: 1.2rem;
  padding: 0.3rem 0.8rem;
  background: linear-gradient(135deg, #ffb636, #ff8c00);
  color: #1a1410;
  font-weight: 800;
  font-size: 0.82rem;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(255,182,54,0.4);
  z-index: 2;
}

.game-mode-discount::before, .game-mode-discount::after {
  content: '✦';
  margin: 0 0.2rem;
  font-size: 0.7rem;
}

.game-mode-card h3 {
  margin-top: 1rem;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.15;
}

.game-mode-tagline {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.game-mode-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.game-mode-perks li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text);
}

.game-mode-perks li::before {
  content: '✦';
  color: var(--mode-color, var(--accent));
  flex-shrink: 0;
}

.game-mode-illustration {
  font-size: 4rem;
  text-align: center;
  padding: 1rem 0;
  filter: drop-shadow(0 8px 20px var(--mode-color, var(--accent))44);
}

.game-mode-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  background: var(--mode-color, var(--accent));
  color: white;
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all var(--dur) var(--ease);
  width: 100%;
  margin-top: auto;
}

.game-mode-buy:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px var(--mode-color, var(--accent))66;
}

/* ===== GAME MODES HEADER ===== */
.game-modes-header-wrap {
  padding: 2.5rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--game-color-1, var(--accent))22, var(--game-color-2, var(--accent-2))11);
  border: 1px solid var(--border-strong);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: center;
}

@media (max-width: 760px) {
  .game-modes-header-wrap { grid-template-columns: 1fr; text-align: center; }
}

.game-modes-header-wrap::before {
  content: '';
  position: absolute;
  right: -10%;
  top: -50%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--game-color-1, var(--accent))33, transparent 70%);
  filter: none;
  pointer-events: none;
}

.game-modes-header-icon {
  width: 100px;
  height: 100px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  color: white;
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.game-modes-header-info h1 { margin-bottom: 0.4rem; font-size: 2.5rem; }
.game-modes-header-info .eyebrow { color: var(--game-color-1, var(--accent)); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.5rem; }
.game-modes-header-info p { color: var(--text-dim); max-width: 500px; }

.game-modes-header-cta { text-align: center; }
.game-modes-header-cta .online { color: var(--success); font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; }
.game-modes-header-cta .online::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success); margin-right: 0.5rem; animation: pulse 2s infinite; }
.game-modes-header-cta strong { display: block; font-family: var(--font-display); font-size: 2rem; margin-bottom: 0.2rem; }

/* ===== MODE SHORTCUTS IN CALC ===== */
.mode-shortcuts {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mode-shortcut {
  padding: 0.5rem 1rem;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mode-shortcut:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.mode-shortcut.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ===== CONSOLE SELECTOR ===== */
.console-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  gap: 0.6rem;
}

@media (max-width: 600px) { .console-selector { grid-template-columns: repeat(2, 1fr); } }

.console-option {
  padding: 0.55rem 0.62rem;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
}

.console-option:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.console-option.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.console-option .console-icon { font-size: 1.1rem; }
.console-option .console-icon-svg { width: 18px; height: 18px; }
.console-option .console-icon-svg svg { width: 100%; height: 100%; }
.console-option .console-logo-img { width: 18px; height: 18px; }

/* ===== DARK SELECT (fix white region dropdown) ===== */
.dark-select {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.92rem;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23b5a786' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 18px;
  padding-right: 2.4rem;
}

.dark-select:focus {
  border-color: var(--accent);
  background-color: var(--surface-hover);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.dark-select option {
  background: var(--bg-elev);
  color: var(--text);
  padding: 0.5rem;
}

/* Fix also regular selects that might appear light */
select {
  background-color: var(--surface);
  color: var(--text);
}

select option { background: var(--bg-elev); color: var(--text); }

/* ===== FIX OPTION CARD — -15% NOT OVERLAPPING ===== */
.option-card {
  position: relative;
  padding-right: 4.5rem !important;
}

.option-card .opt-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.2rem !important;
}

.option-card .opt-boost {
  position: absolute !important;
  top: 0.8rem;
  right: 0.8rem;
  padding: 0.2rem 0.5rem;
  background: rgba(212,175,55,0.15);
  border-radius: 6px;
  font-size: 0.72rem !important;
  font-weight: 700;
  color: var(--accent) !important;
}

.option-card.eco .opt-boost {
  background: rgba(34,197,94,0.15) !important;
  color: #4ade80 !important;
}

/* ===== ELEVATE+ HOME SECTION ===== */
.elevate-plus-home-section {
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.elevate-plus-home-card {
  padding: 3.5rem 3rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top left, rgba(212,175,55,0.3), transparent 50%),
    radial-gradient(circle at bottom right, rgba(240,216,120,0.25), transparent 50%),
    linear-gradient(135deg, #0e0a2e, #1a0f3d);
  border: 1px solid rgba(212,175,55,0.3);
  position: relative;
  overflow: hidden;
}

.elevate-plus-home-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.5;
}

.elevate-plus-home-card > * { position: relative; z-index: 1; }

.elevate-plus-home-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
  margin-bottom: 2rem;
}
@media (max-width: 760px) { .elevate-plus-home-top { grid-template-columns: 1fr; } }

.elevate-plus-home-info .badge-plus {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  background: linear-gradient(135deg, #ffb636, #ff8c00);
  color: #1a1410;
  font-weight: 800;
  font-size: 0.75rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.elevate-plus-home-info h2 {
  color: white;
  margin-bottom: 0.8rem;
  font-size: clamp(2rem, 4vw, 2.8rem);
}

.elevate-plus-home-info h2 .accent-word {
  background: linear-gradient(135deg, #d4af37, #f0d878);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.elevate-plus-home-info p { color: rgba(255,255,255,0.8); font-size: 1.05rem; max-width: 520px; }

.elevate-plus-home-price {
  padding: 1.5rem 1.8rem;
  background: rgba(255,255,255,0.08);
  backdrop-filter: none;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  text-align: center;
  min-width: 200px;
}

.elevate-plus-home-price .price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: white;
  line-height: 1;
}

.elevate-plus-home-price .price small {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  display: block;
  margin-top: 0.2rem;
}

.elevate-plus-home-perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.elevate-plus-home-perk {
  padding: 1.2rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  color: white;
  transition: all var(--dur) var(--ease);
}

.elevate-plus-home-perk:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-3px);
}

.elevate-plus-home-perk .perk-icon {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  display: block;
}

.elevate-plus-home-perk strong { display: block; margin-bottom: 0.2rem; font-size: 0.98rem; }
.elevate-plus-home-perk span { font-size: 0.82rem; color: rgba(255,255,255,0.7); }

.elevate-plus-home-cta {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn-subscribe-plus {
  background: linear-gradient(135deg, #d4af37, #f0d878);
  color: white;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 99px;
  box-shadow: 0 10px 30px rgba(212,175,55,0.5);
}

.btn-subscribe-plus:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 40px rgba(212,175,55,0.7); }

.elevate-plus-home-cta .see-details {
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ===== PREMIUM OPS HOME SECTION ===== */
.premium-ops-section {
  padding: 4.5rem 0 5rem;
  position: relative;
  overflow: hidden;
}

.premium-ops-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  min-height: 430px;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(255,182,54,0.14), transparent 32%),
    linear-gradient(140deg, rgba(8,194,192,0.14), transparent 58%),
    linear-gradient(180deg, rgba(18,20,30,0.96), rgba(8,10,15,0.98));
  box-shadow: 0 28px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
}

.premium-ops-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 74px),
    linear-gradient(90deg, rgba(255,182,54,0.22), transparent 18%, transparent 82%, rgba(8,194,192,0.18));
  opacity: 0.55;
  pointer-events: none;
}

.premium-ops-panel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -25%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-18deg);
  animation: premiumPanelSheen 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes premiumPanelSheen {
  0%, 38% { left: -28%; opacity: 0; }
  50% { opacity: 0.75; }
  72%, 100% { left: 112%; opacity: 0; }
}

.premium-ops-copy,
.premium-ops-visual {
  position: relative;
  z-index: 1;
}

.premium-ops-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: #ffb636;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.premium-ops-kicker::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #08c2c0;
  box-shadow: 0 0 18px rgba(8,194,192,0.8);
}

.premium-ops-copy h2 {
  max-width: 640px;
  margin-bottom: 1rem;
  color: #fff;
  font-size: clamp(2.1rem, 5vw, 4.3rem);
  line-height: 0.98;
}

.premium-ops-copy h2::first-letter {
  color: #ffcf8a;
}

.premium-ops-copy p {
  max-width: 610px;
  color: rgba(255,255,255,0.76);
  font-size: 1rem;
  line-height: 1.75;
}

.premium-ops-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.premium-ops-metrics div {
  padding: 1rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.1);
}

.premium-ops-metrics strong {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.premium-ops-metrics span {
  display: block;
  margin-top: 0.2rem;
  color: rgba(255,255,255,0.58);
  font-size: 0.76rem;
}

.premium-ops-visual {
  min-height: 330px;
}

.ops-rank-card,
.ops-chat-card,
.ops-status-strip {
  position: absolute;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(8,10,15,0.72);
  backdrop-filter: none;
  box-shadow: 0 24px 60px rgba(0,0,0,0.42);
}

.ops-rank-card {
  top: 12px;
  left: 5%;
  width: min(420px, 76%);
  padding: 1.2rem;
  border-radius: 16px;
  animation: opsFloatA 6s ease-in-out infinite;
}

.ops-rank-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.ops-rank-head img {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,70,85,0.35);
}

.ops-rank-head strong,
.ops-rank-grid strong,
.ops-status-strip strong {
  color: #fff;
}

.ops-rank-head span,
.ops-rank-grid span,
.ops-status-strip em {
  color: rgba(255,255,255,0.56);
  font-size: 0.76rem;
  font-style: normal;
}

.ops-progress {
  height: 7px;
  margin: 1.1rem 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}

.ops-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff4655, #ffb636, #08c2c0);
  box-shadow: 0 0 18px rgba(8,194,192,0.45);
}

.ops-rank-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.ops-rank-grid div {
  padding: 0.85rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.055);
}

.ops-chat-card {
  right: 3%;
  bottom: 30px;
  width: min(360px, 68%);
  padding: 1rem;
  border-radius: 16px;
  animation: opsFloatB 7s ease-in-out infinite;
}

.ops-chat-line {
  width: fit-content;
  max-width: 86%;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.35;
}

.ops-chat-line + .ops-chat-line { margin-top: 0.65rem; }
.ops-chat-line.booster { background: rgba(8,194,192,0.18); border: 1px solid rgba(8,194,192,0.24); }
.ops-chat-line.client { margin-left: auto; background: rgba(255,182,54,0.18); border: 1px solid rgba(255,182,54,0.25); }

.ops-status-strip {
  left: 14%;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.95rem;
  border-radius: 999px;
}

.ops-status-strip span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #4ade80;
  box-shadow: 0 0 16px rgba(74,222,128,0.75);
}

@keyframes opsFloatA {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-10px,0); }
}

@keyframes opsFloatB {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,8px,0); }
}

@media (max-width: 900px) {
  .premium-ops-panel { grid-template-columns: 1fr; }
  .premium-ops-visual { min-height: 360px; }
  .premium-ops-metrics { grid-template-columns: 1fr; }
}

/* ===== HOME FEATURE CARDS POLISH ===== */
.features-grid {
  gap: 1rem;
}

.feature-card {
  position: relative;
  min-height: 210px;
  padding: 1.45rem !important;
  overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(140deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018)),
    rgba(11,13,20,0.88);
  border: 1px solid rgba(255,255,255,0.095);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--feature-rgb, 255,182,54),0.28), transparent 38%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 38px);
  opacity: 0.32;
  transition: opacity 220ms ease;
}

.feature-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 999px;
  background: rgb(var(--feature-rgb, 255,182,54));
  box-shadow: 0 0 20px rgba(var(--feature-rgb, 255,182,54),0.7);
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--feature-rgb, 255,182,54),0.38);
  box-shadow: 0 18px 45px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.075);
}

.feature-card:hover::before {
  opacity: 0.52;
}

.feature-card > * {
  position: relative;
  z-index: 1;
}

.feature-card:nth-child(1) { --feature-rgb: 255,70,85; }
.feature-card:nth-child(2) { --feature-rgb: 255,182,54; }
.feature-card:nth-child(3) { --feature-rgb: 8,194,192; }
.feature-card:nth-child(4) { --feature-rgb: 88,166,255; }
.feature-card:nth-child(5) { --feature-rgb: 74,222,128; }
.feature-card:nth-child(6) { --feature-rgb: 212,175,55; }

.feature-icon {
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 1rem !important;
  border-radius: 12px;
  color: rgb(var(--feature-rgb, 255,182,54));
  background: rgba(var(--feature-rgb, 255,182,54),0.12);
  border: 1px solid rgba(var(--feature-rgb, 255,182,54),0.25);
  box-shadow: 0 10px 26px rgba(var(--feature-rgb, 255,182,54),0.16);
}

.feature-card h4 {
  color: #fff;
  font-size: 1.02rem;
}

.feature-card p {
  color: rgba(255,255,255,0.66);
  line-height: 1.62;
}

.ranked-pain-story,
.ranked-pain-editorial {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.4rem);
  align-items: start;
}

.ranked-pain-copy,
.ranked-pain-lede {
  padding-left: 1.15rem;
  border-left: 2px solid rgba(255,182,54,0.55);
}

.ranked-pain-copy p,
.ranked-pain-lede p {
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.75;
}

.ranked-pain-copy p + p,
.ranked-pain-lede p + p {
  margin-top: 1.05rem;
}

.ranked-pain-lede {
  position: relative;
  padding: clamp(1.2rem, 2vw, 1.55rem) 0 clamp(1.2rem, 2vw, 1.55rem) 1.25rem;
}

.ranked-pain-lede span {
  display: inline-flex;
  margin-bottom: 0.9rem;
  color: #ffb636;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ranked-pain-lede p {
  max-width: 560px;
  font-size: clamp(1.02rem, 1.35vw, 1.12rem);
  color: rgba(255,255,255,0.76);
}

.ranked-pain-lines {
  border-top: 1px solid rgba(255,255,255,0.12);
}

.ranked-pain-line {
  display: grid;
  grid-template-columns: minmax(130px, 0.42fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.ranked-pain-line strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.25;
}

.ranked-pain-line span {
  color: rgba(255,255,255,0.64);
  font-size: 0.95rem;
  line-height: 1.58;
}

.ranked-pain-rows {
  border-top: 1px solid rgba(255,255,255,0.12);
}

.ranked-pain-row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 1.15rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.ranked-pain-row > span {
  color: rgba(255,182,54,0.95);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding-top: 0.2rem;
}

.ranked-pain-row p {
  margin: 0;
  color: rgba(255,255,255,0.62);
  font-size: 1rem;
  line-height: 1.62;
}

.ranked-pain-row strong {
  color: #fff;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
}

.ranked-pain-row em {
  color: rgba(255,255,255,0.62);
  font-style: normal;
}

@media (max-width: 760px) {
  .ranked-pain-story,
  .ranked-pain-editorial {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .ranked-pain-copy,
  .ranked-pain-lede {
    padding-left: 0.9rem;
  }

  .ranked-pain-copy p,
  .ranked-pain-lede p {
    font-size: 0.95rem;
    line-height: 1.65;
  }

  .ranked-pain-line {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.9rem 0;
  }

  .ranked-pain-line strong {
    font-size: 0.95rem;
  }

  .ranked-pain-line span {
    font-size: 0.88rem;
  }

  .ranked-pain-row {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0.95rem 0;
  }

  .ranked-pain-row p {
    font-size: 0.9rem;
    line-height: 1.55;
  }
}



/* ===== SITE PURPOSE HOME SECTION ===== */
.site-purpose-section {
  padding: 1rem 0 3.6rem;
}

.site-purpose-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
  gap: 1rem;
  align-items: stretch;
}

.site-purpose-copy,
.site-purpose-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(12,14,22,0.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
}

.site-purpose-copy {
  padding: clamp(1.55rem, 2.7vw, 2rem);
  border-radius: 16px;
}

.site-purpose-copy::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255,182,54,0.14), transparent 42%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 44px);
  opacity: 0.7;
  pointer-events: none;
}

.site-purpose-copy > * {
  position: relative;
  z-index: 1;
}

.site-purpose-kicker {
  display: inline-flex;
  margin-bottom: 0.7rem;
  color: #ffb636;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-purpose-copy h2 {
  max-width: 640px;
  margin-bottom: 0.9rem;
  color: #fff;
  font-size: clamp(1.55rem, 2.55vw, 2.18rem);
  line-height: 1.11;
}

.site-purpose-copy p {
  max-width: 660px;
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-size: 0.93rem;
  line-height: 1.68;
}

.site-purpose-copy p + p {
  margin-top: 0.8rem;
}

.order-confidence {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.4rem) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.order-confidence-copy h2 {
  max-width: 560px;
  margin: 0 0 0.9rem;
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  line-height: 1.08;
}

.order-confidence-copy p {
  max-width: 610px;
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-size: 0.98rem;
  line-height: 1.72;
}

.order-confidence-copy p + p {
  margin-top: 0.85rem;
}

.order-confidence-steps {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.order-confidence-steps > div {
  display: grid;
  grid-template-columns: 3.2rem minmax(150px, 0.45fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.order-confidence-steps span {
  color: rgba(255,182,54,0.95);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.order-confidence-steps strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.2;
}

.order-confidence-steps p {
  margin: 0;
  color: rgba(255,255,255,0.62);
  font-size: 0.92rem;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .order-confidence {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.4rem 0;
  }

  .order-confidence-copy h2 {
    font-size: 1.55rem;
  }

  .order-confidence-copy p {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .order-confidence-steps > div {
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0.25rem 0.8rem;
    padding: 0.95rem 0;
  }

  .order-confidence-steps p {
    grid-column: 2;
    font-size: 0.86rem;
  }
}

.site-purpose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.site-purpose-card {
  min-height: 132px;
  padding: 1.05rem 1.05rem 1.05rem 1.15rem;
  border-radius: 14px;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.site-purpose-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb636, #08c2c0);
  box-shadow: 0 0 18px rgba(255,182,54,0.46);
}

.site-purpose-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,182,54,0.26);
  background:
    linear-gradient(145deg, rgba(255,182,54,0.08), rgba(8,194,192,0.04)),
    rgba(12,14,22,0.9);
}

.site-purpose-card strong {
  display: block;
  margin-bottom: 0.45rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
}

.site-purpose-card span {
  color: rgba(255,255,255,0.62);
  font-size: 0.86rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .site-purpose-wrap,
  .site-purpose-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  /* Section "Ouverture privée" + "But du site" : version compacte et clean sur mobile */
  .premium-ops-section-compact { padding: 2.2rem 0 2rem !important; }
  .premium-strip { gap: 1.1rem; padding: 1.4rem 1.3rem !important; }
  .premium-strip h2 { font-size: 1.35rem !important; line-height: 1.2 !important; }
  .premium-strip p { font-size: 0.88rem !important; line-height: 1.55 !important; }
  .premium-strip-flow { gap: 0.6rem !important; }
  .premium-strip-flow span { padding: 0.7rem 0.8rem !important; }
  .premium-strip-flow strong { font-size: 1.1rem !important; }

  .site-purpose-section { padding: 1.5rem 0 2.5rem !important; }
  .site-purpose-wrap { gap: 0.9rem !important; }
  .site-purpose-copy { padding: 1.4rem 1.3rem !important; }
  .site-purpose-copy h2 { font-size: 1.5rem !important; line-height: 1.18 !important; margin-bottom: 0.7rem !important; }
  .site-purpose-copy p { font-size: 0.87rem !important; line-height: 1.6 !important; }
  /* Les 4 étapes : 2 colonnes serrées plutôt qu'empilées (plus compact) */
  .site-purpose-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem !important; }
  .site-purpose-card { min-height: 0 !important; padding: 0.9rem !important; }
  .site-purpose-card strong { font-size: 0.92rem !important; }
  .site-purpose-card span { font-size: 0.78rem !important; line-height: 1.45 !important; }

  /* Avis : version compacte sur mobile */
  .review-card { padding: 1.2rem !important; }
  .review-card p { font-size: 0.86rem !important; line-height: 1.5 !important; margin-bottom: 0.8rem !important; }
  .review-item { padding: 1.1rem !important; }
  .review-item p { font-size: 0.86rem !important; line-height: 1.5 !important; }
  .review-item-author .user-avatar { width: 32px !important; height: 32px !important; font-size: 0.75rem !important; }
  .review-item-stars { font-size: 0.82rem !important; }
}


/* ===== COMPACT HOME STRIP + ANIMATED REVIEWS OVERRIDE ===== */
.premium-ops-section-compact {
  padding: 2.4rem 0 2.2rem !important;
}

.premium-strip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: center;
  padding: 1.35rem 1.45rem;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background:
    linear-gradient(100deg, rgba(255,182,54,0.14), transparent 34%),
    linear-gradient(115deg, rgba(8,194,192,0.12), transparent 72%),
    rgba(12,14,22,0.92);
  box-shadow: 0 18px 50px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.06);
}

.premium-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 46px);
  opacity: 0.5;
  pointer-events: none;
}

.premium-strip::after {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb636, #08c2c0);
  box-shadow: 0 0 24px rgba(255,182,54,0.55);
}

.premium-strip > * {
  position: relative;
  z-index: 1;
}

.premium-strip-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
  color: #ffb636;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.premium-strip-kicker::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #4ade80;
  box-shadow: 0 0 14px rgba(74,222,128,0.75);
}

.premium-strip h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.08;
}

.premium-strip p {
  max-width: 720px;
  margin: 0.55rem 0 0;
  color: rgba(255,255,255,0.66);
  font-size: 0.92rem;
  line-height: 1.55;
}

.premium-strip-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 0.55rem;
  min-width: min(510px, 44vw);
}

.premium-strip-flow > span {
  padding: 0.8rem 0.85rem;
  border-radius: 11px;
  color: rgba(255,255,255,0.64);
  font-size: 0.74rem;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
}

.premium-strip-flow > span > strong {
  display: block;
  margin-bottom: 0.12rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
}

.premium-strip-flow > span > span {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.64);
  font-size: 0.74rem;
}

.home-confidence-section {
  padding: clamp(2rem, 5vw, 4.2rem) 0 1.5rem;
}

.home-confidence-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding-top: clamp(1.2rem, 3vw, 2rem);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.home-confidence-kicker,
.home-reviews-head span {
  display: inline-block;
  margin-bottom: 0.8rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-confidence-copy h2 {
  max-width: 760px;
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 4vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.home-confidence-copy p {
  max-width: 740px;
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.8;
}

.home-confidence-lines {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.home-confidence-lines > div {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.home-confidence-lines strong {
  color: rgba(255,255,255,0.95);
  font-family: var(--font-display);
  font-size: 1rem;
}

.home-confidence-lines span {
  color: rgba(255,255,255,0.62);
  line-height: 1.65;
}

.home-reviews-compact {
  padding: 1.2rem 0 clamp(3rem, 6vw, 5rem);
}

.home-reviews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.text-link {
  color: rgba(255,255,255,0.74);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.text-link:hover {
  color: var(--accent);
}

.home-reviews-compact .reviews-wall.reviews-animated {
  margin-top: 0.45rem;
  padding: 0.15rem 0;
}

.home-reviews-compact .reviews-marquee {
  gap: 0;
}

.home-reviews-compact .reviews-track.reverse {
  display: none;
}

.home-reviews-compact .reviews-track {
  gap: 0.7rem;
  animation-duration: 48s;
}

.home-reviews-compact .reviews-track .review-card {
  width: min(310px, 82vw);
  min-height: 146px;
  padding: 0.95rem 1rem;
  border-radius: 10px;
  background: rgba(14,16,22,0.78);
  border-color: rgba(255,255,255,0.085);
  box-shadow: none;
}

.home-reviews-compact .reviews-track .review-stars {
  margin-bottom: 0.55rem;
  padding: 0;
  background: transparent;
  font-size: 0.72rem;
}

.home-reviews-compact .reviews-track .review-card p {
  margin-bottom: 0.75rem;
  color: rgba(255,255,255,0.72);
  font-size: 0.82rem;
  line-height: 1.5;
}

.home-reviews-compact .review-avatar {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

.home-reviews-compact .review-author strong {
  font-size: 0.8rem;
}

.home-reviews-compact .review-author span {
  font-size: 0.68rem;
}

.reviews-wall.reviews-animated {
  display: block !important;
  overflow: hidden;
  position: relative;
  margin-top: 1.5rem;
  padding: 0.35rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.reviews-marquee {
  display: grid;
  gap: 0.85rem;
}

.reviews-track {
  display: flex;
  width: max-content;
  gap: 0.85rem;
  animation: reviewsMarquee 34s linear infinite;
}

.reviews-track.reverse {
  animation-name: reviewsMarqueeReverse;
  animation-duration: 42s;
}

.reviews-wall.reviews-animated:hover .reviews-track {
  animation-play-state: paused;
}

.reviews-track .review-card {
  width: min(360px, 82vw);
  min-height: 190px;
  padding: 1.15rem 1.2rem;
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.018)),
    rgba(12,14,22,0.9);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
}

.reviews-track .review-card:nth-child(3n+1) { border-color: rgba(255,182,54,0.24); }
.reviews-track .review-card:nth-child(3n+2) { border-color: rgba(8,194,192,0.22); }
.reviews-track .review-card:nth-child(3n+3) { border-color: rgba(255,70,85,0.2); }

.reviews-track .review-stars {
  display: inline-flex;
  padding: 0.25rem 0.48rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
  color: #ffb636;
  background: rgba(255,182,54,0.1);
  letter-spacing: 0.06em;
}

.reviews-track .review-card p {
  color: rgba(255,255,255,0.78);
  font-size: 0.9rem;
}

@keyframes reviewsMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes reviewsMarqueeReverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (max-width: 820px) {
  .home-confidence-layout {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .home-confidence-lines > div {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 1rem 0;
  }

  .home-reviews-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
}

@media (max-width: 900px) {
  .premium-strip {
    grid-template-columns: 1fr;
  }
  .premium-strip-flow {
    min-width: 0;
    grid-template-columns: 1fr;
  }
}

/* ===== CHECKOUT PLATFORM FEES ===== */
.checkout-fees-banner {
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,182,54,0.1), rgba(212,175,55,0.05));
  border: 1px solid rgba(255,182,54,0.3);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.checkout-fees-banner .icon { font-size: 1.8rem; }
.checkout-fees-banner .txt { flex: 1; font-size: 0.88rem; }
.checkout-fees-banner strong { color: #fbbf24; display: block; margin-bottom: 0.2rem; }
.checkout-fees-banner .save-amount { color: #4ade80; font-weight: 700; }
.checkout-fees-banner .sub-btn {
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #ffb636, #ff8c00);
  color: #1a1410;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.82rem;
  transition: transform var(--dur) var(--ease);
  white-space: nowrap;
}

.checkout-fees-banner .sub-btn:hover { transform: scale(1.05); }

/* ===== APPLE PAY BUTTON ===== */
.payment-method[data-pay="applepay"] {
  background: #000;
  border-color: #333;
  color: white;
}

.payment-method[data-pay="applepay"].active {
  border-color: white;
  background: #111;
}

.payment-method[data-pay="applepay"] .applepay-logo {
  font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
}

/* ===== NAV LINK OUTLINED (Jeux button) — Illuminated ===== */
.nav-link-outlined {
  position: relative;
  border: 1.5px solid rgba(212,175,55,0.4) !important;
  background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(240,216,120,0.04));
  padding: 0.55rem 1rem !important;
  border-radius: 10px !important;
  display: inline-flex;
  align-items: center;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 0 0 rgba(212,175,55,0);
  cursor: pointer;
  overflow: visible;
}

.nav-link-outlined::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  opacity: 0;
  z-index: -1;
  transition: opacity 250ms ease;
  filter: none;
}

.nav-link-outlined:hover {
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(240,216,120,0.08));
  border-color: var(--accent) !important;
  color: var(--text) !important;
  box-shadow: 0 0 16px rgba(212,175,55,0.4), 0 0 0 1px rgba(212,175,55,0.5);
  transform: translateY(-1px);
}

.nav-link-outlined:hover::before {
  opacity: 0.4;
}

/* Fix bug : empêcher le dropdown de capter le hover de manière imprévue */
.nav-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-wrap .nav-link-outlined {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.nav-dropdown {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s 200ms;
}
.nav-dropdown-wrap:hover .nav-dropdown,
.nav-dropdown.open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s;
}
/* Petit "pont" invisible entre le bouton et le dropdown pour pas perdre le hover */
.nav-dropdown-wrap::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  z-index: 1;
}

/* Mobile : aligné à gauche (pas de centrage qui ferait sortir le menu de l'écran) */
@media (max-width: 880px) {
  .nav-dropdown { left: 0; transform: translateX(0) translateY(8px); }
  .nav-dropdown-wrap:hover .nav-dropdown,
  .nav-dropdown.open { transform: translateX(0) translateY(0); }
}

.main-nav {
  align-items: center;
  gap: 0.5rem;
}

.main-nav .nav-link {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 0.55rem 1rem;
}

/* ===== ONLINE COUNT (fix wrap + alignment) ===== */
.online-count {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  line-height: 1;
  flex-shrink: 0;
}

.online-count .dot {
  flex-shrink: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

/* ===== LANG SELECTOR FIX — show flag + chevron ===== */
#langBtn {
  min-width: 56px;
  padding: 0 0.55rem;
  gap: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#langBtn #currentFlag,
.flag-img {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.4);
  display: inline-block;
  flex-shrink: 0;
}
#langBtn::after {
  content: '▾';
  font-size: 0.7rem;
  color: var(--text-dim);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.lang-option .flag-img {
  width: 24px;
  height: 17px;
}

/* ===== RESPONSIVE MOBILE — HEADER & NAV ===== */
@media (max-width: 1100px) {
  .main-nav { display: none; }
}

/* Hamburger for mobile */
.mobile-menu-btn {
  display: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  place-items: center;
}
/* Raccourci Contact : visible uniquement sur mobile (desktop a le lien dans la nav) */
.header-contact-mobile { display: none; }

@media (max-width: 1100px) {
  .mobile-menu-btn { display: grid; }
  .online-count { display: none; }
  .header-contact-mobile { display: grid; }
}

/* ===== HEADER MOBILE COMPACT (≤520px) — anti-chevauchement ===== */
@media (max-width: 520px) {
  .site-header { padding: 0.55rem 0 !important; }
  .header-inner {
    gap: 0.3rem !important;
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
  }
  /* Logo plus compact */
  .logo {
    font-size: 1rem;
    gap: 0.4rem;
    flex-shrink: 1;
    min-width: 0;
  }
  .logo-mark {
    width: 28px;
    height: 28px;
  }
  .logo-mark svg { width: 16px; height: 16px; }
  /* Variante phoenix sur mobile */
  .logo-mark-phoenix,
  .logo-mark-phoenix img {
    width: 30px !important;
    height: 30px !important;
  }
  /* Sur mobile : loginBtn devient une icône bonhomme, sans texte */
  #loginBtnText { display: none !important; }
  #loginBtnIcon { display: block !important; }
  #loginBtn { padding: 0.4rem !important; min-width: 0 !important; }
  /* Boutons icônes plus petits */
  .header-actions { gap: 0.3rem !important; }
  .icon-btn {
    width: 36px !important;
    height: 36px !important;
  }
  .mobile-menu-btn {
    width: 36px !important;
    height: 36px !important;
  }
  /* Bouton S'inscrire ramassé */
  #registerBtn {
    padding: 0.45rem 0.7rem !important;
    font-size: 0.78rem !important;
  }
}

/* Très petits écrans (iPhone SE, ≤380px) — encore plus compact */
@media (max-width: 380px) {
  .logo { font-size: 0.92rem; }
  .logo-mark { width: 26px; height: 26px; }
  #registerBtn {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.72rem !important;
  }
  .icon-btn, .mobile-menu-btn {
    width: 34px !important;
    height: 34px !important;
  }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(340px, 88vw);
  height: 100vh;
  background:
    radial-gradient(120% 40% at 100% 0%, rgba(212,175,55,0.10), transparent 60%),
    var(--bg-elev);
  border-left: 1px solid var(--border-strong);
  z-index: 400;
  padding: 1.1rem 1rem 1.2rem;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
}

.mobile-drawer.open { transform: translateX(0); }

.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: none;
  z-index: 399;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

.mobile-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0.3rem 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.6rem;
}
.mobile-drawer-brand { display: flex; align-items: center; gap: 0.55rem; }
.mobile-drawer-brand img { display: block; }
.mobile-drawer-brand strong { font-family: var(--font-display); font-size: 1.02rem; }

.drawer-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0 -0.3rem;
  padding: 0 0.3rem;
  scrollbar-width: thin;
}
.drawer-scroll::-webkit-scrollbar { width: 5px; }
.drawer-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

.mobile-drawer .drawer-link {
  padding: 0.72rem 0.7rem;
  border-radius: 11px;
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  cursor: pointer;
}
.mobile-drawer .drawer-link:hover,
.mobile-drawer .drawer-link.active {
  background: var(--surface-hover);
}
.mobile-drawer .drawer-link.active { color: var(--gold); }

.drawer-ico {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--text-dim);
}
.drawer-ico svg { width: 18px; height: 18px; }
.drawer-link:hover .drawer-ico { color: var(--text); border-color: var(--border-strong); }
.drawer-ico-gold { background: var(--premium-soft); border-color: rgba(212,175,55,0.3); color: var(--gold); }

.mobile-drawer .drawer-section {
  font-size: 0.68rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.9rem 0.7rem 0.35rem;
  font-weight: 700;
}

.mobile-drawer #mobileDrawerGames .drawer-link,
.mobile-drawer #mobileDrawerGames a {
  padding: 0.72rem 0.7rem;
  border-radius: 11px;
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
}
.mobile-drawer #mobileDrawerGames a:hover { background: var(--surface-hover); }

.drawer-cta {
  margin-top: 0.7rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), #f0c860);
  color: #0a0a0c;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.drawer-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(212,175,55,0.3); }

/* ===== DRAWER AUTH (connexion / inscription sur mobile) ===== */
.drawer-auth { padding: 0.9rem 1.1rem 0.4rem; }
.drawer-auth-row { display: flex; gap: 0.55rem; }
.drawer-auth-row.hidden { display: none; }
#drawerAuthIn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
#drawerAuthIn.hidden { display: none; }
#drawerDashBtn { grid-column: 1 / -1; }
.drawer-auth-btn {
  flex: 1; padding: 0.7rem 0.6rem; border-radius: 10px; font: inherit; font-weight: 700;
  font-size: 0.86rem; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.drawer-auth-btn.ghost { background: rgba(255,255,255,0.05); border: 1px solid var(--border-strong); color: var(--text); }
.drawer-auth-btn.ghost:hover { background: rgba(255,255,255,0.09); }
.drawer-auth-btn.gold { background: linear-gradient(135deg, #f0c860, #d4af37); border: none; color: #08080b; }
.drawer-auth-btn.gold:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(212,175,55,0.32); }

.discord-id-fallback { margin-top: 0.55rem; }
.discord-id-fallback summary {
  width: fit-content;
  cursor: pointer;
  color: var(--text-faint);
  font-size: 0.76rem;
  font-weight: 700;
}
.discord-id-fallback input {
  width: 100%;
  margin-top: 0.5rem;
}

/* ===== AVATAR EDIT (réglages) ===== */
.avatar-edit-row { display: flex; align-items: center; gap: 1rem; }
.avatar-edit-preview { width: 64px; height: 64px; font-size: 1.5rem; flex-shrink: 0; overflow: hidden; }
.avatar-edit-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ===== RESPONSIVE: GLOBAL ===== */
@media (max-width: 880px) {
  .container { padding: 0 1.4rem; }
  h1 { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  h3 { font-size: clamp(1.3rem, 4vw, 1.8rem); }

  .hero { padding: 2.5rem 0 3rem; }
  .hero-visual { display: none; }
  .hero-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-trust { gap: 1rem; }
  .hero-trust .trust-stat strong { font-size: 1.4rem; }

  .section { padding: 4rem 0; }

  /* Calculateur */
  .calc-wrap { grid-template-columns: 1fr; }
  .calc-header { flex-direction: column; align-items: stretch; }
  .calc-game-tabs { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .calc-game-tabs::-webkit-scrollbar { display: none; }
  .calc-visualizer { grid-template-columns: 1fr; text-align: center; padding: 1.5rem 1rem; gap: 1rem; }
  .calc-arrow { transform: rotate(90deg); }
  .rank-badge { width: 80px; height: 80px; font-size: 1.5rem; }
  .options-grid { grid-template-columns: 1fr; }
  .console-selector { grid-template-columns: repeat(2, 1fr); }

  .summary { position: static; margin-top: 1.5rem; }

  /* Game modes */
  .game-modes-grid { grid-template-columns: 1fr; }
  .game-modes-header-wrap { padding: 1.5rem; grid-template-columns: 1fr; text-align: center; }
  .game-modes-header-icon { width: 70px; height: 70px; font-size: 1.8rem; margin: 0 auto; }
  .game-modes-subnav {
    width: calc(100% - 2rem);
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0.3rem;
    margin-left: 1rem;
    margin-right: 1rem;
    border-radius: 14px;
  }
  .game-modes-subnav::-webkit-scrollbar { display: none; }
  .game-modes-subnav-btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    flex-shrink: 0;
    border-radius: 10px;
  }

  /* Orders */
  .order-card { grid-template-columns: 1fr; gap: 1rem; text-align: center; }
  .order-right { align-items: center; }
  .order-emblem { margin: 0 auto; }

  /* Dashboard */
  .dashboard { grid-template-columns: 1fr; }
  .dash-sidebar { display: none; }
  .dash-main { padding: 1rem; }

  /* Checkout */
  .checkout-wrap { grid-template-columns: 1fr; gap: 1rem; }
  .checkout-summary { position: static; }
  .payment-methods { grid-template-columns: 1fr 1fr !important; }

  /* Booster cards */
  .booster-catalog-grid { grid-template-columns: 1fr; }
  .booster-profile-hero { grid-template-columns: 1fr; text-align: center; padding: 2rem 1rem; }

  /* Marketplace */
  .marketplace-wrap { grid-template-columns: 1fr; }
  .mp-sidebar { position: static; }
  .mp-products { grid-template-columns: 1fr 1fr; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr; }
  .academy-grid { grid-template-columns: 1fr; }

  /* Job Board */
  .job-grid { grid-template-columns: 1fr; }
  .job-filters { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .job-filters::-webkit-scrollbar { display: none; }
  .job-filter { flex-shrink: 0; }

  /* Chat */
  .chat-wrap { height: 400px; }

  /* Modal */
  .modal { padding: 1.5rem; max-width: 95vw; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; padding: 0 1rem; }

  /* Cross-sell banner */
  .crosssell-banner { left: 16px; right: 16px; max-width: calc(100% - 32px); bottom: 16px; }

  /* Tips / Review */
  .tips-wrap, .review-form-wrap { padding: 1.5rem 1rem; }
  .tips-options { grid-template-columns: repeat(2, 1fr); }

  /* Elevate+ home */
  .elevate-plus-home-card { padding: 1.5rem 1rem; }
  .elevate-plus-home-perks { grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.2rem; }
  .elevate-plus-home-perk { padding: 0.85rem 0.9rem; }
  .elevate-plus-home-perk .perk-icon { font-size: 1.3rem; margin-bottom: 0.3rem; }
  .elevate-plus-home-perk strong { font-size: 0.82rem; }
  .elevate-plus-home-perk span { font-size: 0.75rem; }

  /* Trust */
  .trust-guarantee-banner { flex-direction: column; text-align: center; gap: 1rem; padding: 1.5rem; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* Tables */
  .data-table thead { display: none; }
  .data-table tr { display: block; padding: 1rem; border-bottom: 1px solid var(--border); }
  .data-table td { display: flex; justify-content: space-between; padding: 0.4rem 0; border: none; }
  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-dim);
    font-size: 0.82rem;
  }

  /* Dashboard mobile nav: stays at the top via .dash-mobile-nav-wrap sticky */
  .dash-mobile-nav {
    display: grid;
    position: static;
    background: transparent;
    border-top: 0;
    padding: 0;
    gap: 0.45rem;
    z-index: auto;
    overflow: visible;
    scrollbar-width: auto;
  }
  .dash-mobile-nav::-webkit-scrollbar { display: none; }
}

@media (min-width: 881px) {
  .dash-mobile-nav { display: none; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.8rem; }
  .mp-products { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .tips-options { grid-template-columns: 1fr 1fr; }
  .payment-methods { grid-template-columns: 1fr !important; }
  .console-selector { grid-template-columns: 1fr 1fr; }
  .btn { padding: 0.7rem 1.2rem; font-size: 0.88rem; }
  .btn-lg { padding: 0.9rem 1.5rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
}

/* ===== RGPD COOKIE BANNER ===== */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 540px;
  margin: 0 auto;
  padding: 1.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  z-index: 500;
  transform: translateY(calc(100% + 40px));
  transition: transform var(--dur-slow) var(--ease);
}

.cookie-banner.show { transform: translateY(0); }

.cookie-banner h4 {
  font-family: var(--font-display);
  margin-bottom: 0.6rem;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cookie-banner p {
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.cookie-banner p a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-banner-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.cookie-banner-actions .btn {
  flex: 1;
  min-width: 120px;
  justify-content: center;
}

.cookie-settings-modal {
  display: none;
}

.cookie-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 1.5rem 0;
}

.cookie-toggle {
  padding: 1rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.cookie-toggle-info { flex: 1; }
.cookie-toggle-info strong { display: block; margin-bottom: 0.3rem; font-size: 0.92rem; }
.cookie-toggle-info span { font-size: 0.8rem; color: var(--text-dim); line-height: 1.5; }

/* Toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  transition: var(--dur);
  border-radius: 24px;
}
.switch .slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  transition: var(--dur);
  border-radius: 50%;
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:disabled + .slider { opacity: 0.6; cursor: not-allowed; }

/* ===== LEGAL PAGES ===== */
.legal-page {
  padding: 3rem 0 4rem;
  max-width: 860px;
  margin: 0 auto;
}

.legal-page h1 {
  font-family: var(--font-display);
  margin-bottom: 1rem;
  font-size: 2.2rem;
}

.legal-page .updated {
  color: var(--text-faint);
  font-size: 0.85rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.legal-page h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 2rem 0 0.8rem;
  color: var(--accent);
}

.legal-page h3 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.6rem;
  color: var(--text);
}

.legal-page p, .legal-page li {
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
}

.legal-page ul, .legal-page ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.legal-page strong { color: var(--text); }

.legal-page .warning-box {
  padding: 1.2rem 1.5rem;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 12px;
  margin: 1.5rem 0;
  color: #fcd34d;
}

.legal-page .info-box {
  padding: 1.2rem 1.5rem;
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 12px;
  margin: 1.5rem 0;
  color: #93c5fd;
}

.legal-toc {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 2rem;
}
.legal-toc h4 { margin-bottom: 0.6rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); }
.legal-toc ol { padding-left: 1.5rem; margin: 0; }
.legal-toc a { color: var(--accent); font-size: 0.9rem; }
.legal-toc a:hover { text-decoration: underline; }

/* Terms checkbox on signup and checkout */
.terms-consent {
  padding: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 1rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.terms-consent input {
  width: auto !important;
  margin-top: 3px;
  flex-shrink: 0;
}

.terms-consent a {
  color: var(--accent);
  text-decoration: underline;
}

/* Age verification modal */
.age-gate {
  position: fixed;
  inset: 0;
  background: rgba(6,8,15,0.98);
  backdrop-filter: none;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.age-gate-card {
  max-width: 440px;
  padding: 2.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  text-align: center;
}

.age-gate-card h3 { font-family: var(--font-display); margin-bottom: 0.8rem; font-size: 1.6rem; }
.age-gate-card p { color: var(--text-dim); margin-bottom: 1.5rem; }
.age-gate-card .btn { width: 100%; justify-content: center; margin-bottom: 0.5rem; }

/* Notification bell */
.notif-bell {
  position: relative;
}
.notif-bell .badge-count {
  position: absolute;
  top: -2px;
  right: -2px;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: none;
}

.notif-panel.open { display: block; }
.notif-panel-head {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.notif-panel-head .clear-all {
  color: var(--text-dim);
  font-size: 0.78rem;
  cursor: pointer;
}
.notif-item {
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.notif-item:last-child { border: none; }
.notif-item:hover { background: var(--surface); }
.notif-item.unread { background: rgba(212,175,55,0.05); border-left: 3px solid var(--accent); }
.notif-item strong { display: block; font-size: 0.88rem; margin-bottom: 0.2rem; }
.notif-item p { font-size: 0.82rem; color: var(--text-dim); margin: 0; }
.notif-item .time { font-size: 0.72rem; color: var(--text-faint); margin-top: 0.3rem; display: block; }
.notif-panel-empty { padding: 2rem; text-align: center; color: var(--text-dim); font-size: 0.88rem; }

@media (max-width: 880px) {
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 1.2rem; }
  .notif-panel { min-width: calc(100vw - 32px); right: -80px; }
}


/* ===== SLIDERS HORIZONTAUX (Win Boost, Coaching) ===== */
.slider-wrap {
  background:
    radial-gradient(circle at 12% 0%, rgba(8,194,192,0.08), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 14px;
  padding: 1rem 1.15rem 1.05rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}
.slider-display {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  justify-content: center;
}
.slider-display .slider-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  transition: all 200ms ease;
}
.slider-display .slider-label {
  font-size: 0.82rem;
  color: var(--text-dim);
  font-weight: 500;
}
.custom-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background:
    linear-gradient(90deg, #f6d97a 0%, #d4af37 var(--slider-progress, 0%), rgba(255,255,255,0.055) var(--slider-progress, 0%) 100%);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  margin: 0.7rem 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 16px rgba(212,175,55,0.08);
  transition: box-shadow 200ms ease;
}
.custom-slider:hover {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 24px rgba(212,175,55,0.2);
}
.custom-slider:focus-visible {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 0 3px rgba(212,175,55,0.3);
}
.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 27%, #fffbe9 0 16%, transparent 18%),
    linear-gradient(150deg, #f9e29a 0%, #e6c25a 42%, #c79a2f 100%);
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(212,175,55,0.15), 0 6px 16px rgba(0,0,0,0.55);
  transition: transform 140ms ease, box-shadow 140ms ease;
  border: 3px solid #0a0c11;
}
.custom-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 6px rgba(212,175,55,0.24), 0 8px 22px rgba(0,0,0,0.6);
}
.custom-slider::-webkit-slider-thumb:active { transform: scale(1.04); }
.custom-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 27%, #fffbe9 0 16%, transparent 18%),
    linear-gradient(150deg, #f9e29a 0%, #e6c25a 42%, #c79a2f 100%);
  cursor: pointer;
  border: 3px solid #0a0c11;
  box-shadow: 0 0 0 4px rgba(212,175,55,0.15), 0 6px 16px rgba(0,0,0,0.55);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.custom-slider::-moz-range-thumb:hover { transform: scale(1.1); }
/* ===== Dual-range (Drive : départ -> cible sur une seule barre) ===== */
.dual-readout { display:flex; align-items:center; justify-content:center; gap:18px; margin:0.2rem 0 1rem; }
.dual-readout-item { display:flex; flex-direction:column; align-items:center; min-width:96px; padding:0.5rem 0.9rem; background:rgba(255,255,255,0.03); border:1px solid rgba(212,175,55,0.18); border-radius:10px; }
.dual-readout-lbl { font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint); }
.dual-readout-val { font-size:1.35rem; font-weight:700; color:#fff; font-family:var(--font-mono); font-variant-numeric:tabular-nums; line-height:1.2; }
.dual-readout-arrow { color:#e6c25a; font-size:1.2rem; }
.eb-help-dot { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:rgba(212,175,55,0.18); border:1px solid rgba(212,175,55,0.5); color:#e6c25a; font-size:0.7rem; font-weight:700; cursor:help; vertical-align:middle; margin:0 4px; user-select:none; }
.eb-help-dot:hover { background:rgba(212,175,55,0.32); }
.dual-range { position:relative; height:34px; }
.dual-range-track { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:9px; border-radius:999px; background:linear-gradient(90deg,#d4af37,#f6d97a); box-shadow:0 0 14px rgba(230,194,90,0.4), inset 0 1px 2px rgba(0,0,0,0.25); }
.dual-readout-val.dual-edit { width:104px; text-align:center; background:transparent; border:1px solid rgba(212,175,55,0); border-radius:8px; -moz-appearance:textfield; cursor:text; transition:border-color .15s, background .15s; }
.dual-readout-val.dual-edit::-webkit-outer-spin-button, .dual-readout-val.dual-edit::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.dual-readout-val.dual-edit:hover { border-color:rgba(212,175,55,0.35); }
.dual-readout-val.dual-edit:focus { outline:none; border-color:rgba(212,175,55,0.7); background:rgba(212,175,55,0.06); }
.dual-range-input { position:absolute; left:0; top:0; width:100%; height:34px; margin:0; background:none; -webkit-appearance:none; appearance:none; pointer-events:none; }
.dual-range-input:focus { outline:none; }
.dual-range-input::-webkit-slider-runnable-track { background:none; border:none; }
.dual-range-input::-moz-range-track { background:none; border:none; }
.dual-range-input::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; pointer-events:auto; width:26px; height:26px; border-radius:50%; cursor:grab; border:3px solid #0a0c11; background:radial-gradient(circle at 35% 27%,#fffbe9 0 16%,transparent 18%),linear-gradient(150deg,#f9e29a 0%,#e6c25a 42%,#c79a2f 100%); box-shadow:0 0 0 4px rgba(212,175,55,0.15),0 6px 16px rgba(0,0,0,0.55); transition:transform 140ms ease; }
.dual-range-input::-webkit-slider-thumb:hover { transform:scale(1.1); }
.dual-range-input::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.04); }
.dual-range-input::-moz-range-thumb { pointer-events:auto; width:26px; height:26px; border-radius:50%; cursor:grab; border:3px solid #0a0c11; background:radial-gradient(circle at 35% 27%,#fffbe9 0 16%,transparent 18%),linear-gradient(150deg,#f9e29a 0%,#e6c25a 42%,#c79a2f 100%); box-shadow:0 0 0 4px rgba(212,175,55,0.15); }
.slider-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  color: var(--text-faint);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}
.slider-marks button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  padding: 0.08rem 0.22rem;
  border-radius: 6px;
}
.slider-marks button:hover,
.slider-marks button.active {
  color: var(--accent);
  background: rgba(8,194,192,0.11);
}
.slider-shortcuts {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
}
.slider-shortcut {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 99px;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 150ms ease;
}
.slider-shortcut:hover { border-color: var(--accent); color: var(--text); }
.slider-shortcut.active {
  background: rgba(8,194,192,0.16);
  border-color: rgba(8,194,192,0.55);
  color: #dffefd;
  box-shadow: 0 0 18px rgba(8,194,192,0.10);
}
.slider-shortcut.popular {
  border-color: var(--gold);
  color: var(--gold);
}
.slider-shortcut.popular.active {
  background: var(--gold);
  color: #000;
}

/* Coach tier card v2 */
.coach-tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-width: 0;
}
.coach-tier-head strong {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}
.coach-tier-badge {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.coach-tier-badge.premium {
  background: linear-gradient(90deg, var(--gold), #ffa500);
  color: #000;
}

/* ===== ADAPTIVE CALC — Layout ===== */
/* ===== MODE CARDS — SLEEK (BoostingMarket-inspired, COMPACT) ===== */
.game-modes-grid, #gameModesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 0.85rem;
}
/* OVERWATCH : grille adaptée aux cristaux (colonnes plus étroites, plus d'espace) */
[data-page="game-modes"].game-modes-overwatch #gameModesGrid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.6rem 1.2rem;
  padding: 1.2rem 0 0.5rem;
}

[data-page="game-modes"] {
  position: relative;
  overflow: hidden;
}
[data-page="game-modes"].game-modes-ow-bg::before,
[data-page="game-modes"].game-modes-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--game-modes-bg-logo);
  background-repeat: no-repeat;
  background-position: center 70%;
  background-size: min(1120px, 92vw) auto;
  opacity: 0.10;
  filter: brightness(0.72);
}

[data-page="game-modes"].game-modes-apex.game-modes-bg::before {
  background-position: center 58%;
  background-size: min(1220px, 96vw) auto;
  opacity: 0.18;
  filter: brightness(0.86) saturate(1.15);
}
[data-page="game-modes"] > .container {
  position: relative;
  z-index: 1;
}
/* ===== MODE CARDS V2 — Premium reveal cards ===== */
.mode-card-sleek {
  position: relative;
  background:
    linear-gradient(160deg, rgba(24,26,38,0.96) 0%, rgba(13,15,24,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 1.6rem 1.5rem 1.4rem;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 280ms ease,
              box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: sleekFadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  isolation: isolate;
}

/* Subtle grid pattern background */
.mode-card-sleek::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at top right, black 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at top right, black 0%, transparent 65%);
}

/* Colored glow that appears on hover */
.mode-card-sleek::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, var(--mode-color, var(--accent)) 0%, transparent 65%);
  opacity: 0.08;
  filter: none;
  pointer-events: none;
  z-index: 0;
  transition: opacity 420ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mode-card-sleek:hover::after {
  opacity: 0.32;
  transform: scale(1.2);
}

.mode-card-sleek-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding-right: 0;
}

/* Top row: badge + number */
.mode-card-sleek-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
  min-height: 22px;
}

.mode-card-sleek-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.45rem 0;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.mode-card-sleek-tagline {
  font-size: 0.86rem;
  color: var(--text-dim);
  line-height: 1.45;
  margin: 0 0 1.1rem 0;
  flex: 1;
}

.mode-card-sleek-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.mode-card-sleek-perks li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.35;
}
.mode-card-sleek-perks .perk-arrow {
  color: var(--mode-color, var(--accent));
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 240ms ease;
}
.mode-card-sleek:hover .mode-card-sleek-perks .perk-arrow {
  transform: translateX(2px);
}

/* Footer row of the card: CTA pill on the left */
.mode-card-sleek-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.mode-card-sleek-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  padding: 0.5rem 0.9rem 0.5rem 1rem;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mode-card-sleek-cta svg {
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mode-card-sleek:hover .mode-card-sleek-cta {
  background: var(--mode-color, var(--accent));
  border-color: var(--mode-color, var(--accent));
  color: #0a0a0f;
  padding-right: 1.1rem;
}
.mode-card-sleek:hover .mode-card-sleek-cta svg {
  transform: translateX(3px);
}

/* Mode emoji/icon (subtle, decorative, in the footer) */
/* ============================================================================
   OVERWATCH — CARTES "CRISTAL" avec image PNG reelle (crystal-1 / crystal-2).
   Le cristal est l'image de fond ; le contenu (icone + titre + desc + badge)
   se pose par-dessus, cale dans la zone sombre centrale du cristal.
   Halo lumineux localise derriere chaque cristal.
   ============================================================================ */
.ow-gem-wrap{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1 / 1.18;
  padding:0;
  cursor:pointer;
  animation:fadeInUp .5s var(--ease, ease) backwards;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
/* Halo derriere le cristal */
.ow-gem-wrap::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:78%;height:78%;border-radius:50%;
  background:radial-gradient(circle, rgba(249,158,26,0.32), transparent 64%);
  filter:none;z-index:0;opacity:0.6;
  transition:opacity .4s ease, width .4s ease, height .4s ease;
  pointer-events:none;
}
.ow-gem-wrap:hover{transform:translateY(-10px) scale(1.03);}
.ow-gem-wrap:hover::before{opacity:1;width:95%;height:95%;}

/* L'image du cristal */
.ow-gem-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;z-index:1;pointer-events:none;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,0.55));
  transition:filter .4s ease;
}
.ow-gem-wrap:hover .ow-gem-bg{
  filter:drop-shadow(0 14px 30px rgba(0,0,0,0.55)) drop-shadow(0 0 18px rgba(249,158,26,0.5));
}

/* Contenu pose par-dessus, dans la zone sombre centrale */
.ow-gem-content{
  position:relative;z-index:2;
  width:64%;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:0.4rem;
  padding-top:0.4rem;
}
.ow-gem-ico{
  width:46px;height:46px;display:grid;place-items:center;
  color:#fff;margin-bottom:0.2rem;
  filter:drop-shadow(0 0 10px rgba(249,158,26,0.8));
}
.ow-gem-ico svg{width:30px;height:30px;}
.ow-gem-name{
  font-family:var(--font-display);font-size:0.98rem;font-weight:700;line-height:1.08;
  color:#fff;text-shadow:0 2px 10px rgba(0,0,0,0.85), 0 0 16px rgba(0,0,0,0.6);
}
.ow-gem-desc{
  font-size:0.68rem;color:rgba(245,240,232,0.88);line-height:1.32;
  text-shadow:0 1px 8px rgba(0,0,0,0.95);
}
.ow-gem-badge{
  position:absolute;top:-2px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:0.5rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
  padding:0.16rem 0.45rem;border-radius:5px;color:#1a1208;background:#f99e1a;white-space:nowrap;
  box-shadow:0 2px 12px rgba(0,0,0,0.6);
}
.ow-gem-badge.new{color:#ffce8a;background:rgba(8,8,10,0.92);border:1px solid rgba(249,158,26,0.7);}

.mode-card-sleek-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    radial-gradient(circle at 30% 30%, var(--mode-color, var(--accent))22 0%, transparent 70%);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  transition: all 360ms cubic-bezier(0.22, 1, 0.36, 1);
  filter: saturate(0.95);
}
.mode-card-sleek:hover .mode-card-sleek-glyph {
  transform: scale(1.08);
  border-color: var(--mode-color, var(--accent))66;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    radial-gradient(circle at 30% 30%, var(--mode-color, var(--accent))44 0%, transparent 70%);
}

/* Big stylized number top-right */
.mode-card-sleek-number {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.22);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color 260ms ease;
}
.mode-card-sleek:hover .mode-card-sleek-number {
  color: var(--mode-color, var(--accent));
}

/* Badges (POPULAR, PRO, NEW) */
.mode-card-badge {
  display: inline-block;
  background: rgba(255,255,255,0.05);
  color: var(--text-dim);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-family: var(--font-display);
}
.mode-card-badge-popular {
  background: linear-gradient(90deg, #d4af37, #f0c860);
  color: #0a0a0f;
  border-color: transparent;
  box-shadow: 0 2px 12px -4px rgba(212, 175, 55, 0.4);
}

/* Legacy classes kept hidden — old illustration block isn't rendered anymore */
.mode-card-sleek-illustration,
.mode-card-icon-bg,
.mode-card-icon { display: none !important; }

@keyframes sleekFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sleekFadeInUp {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes glyphIdlePulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes borderShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Glyph pulse au repos (subtil) */
.mode-card-glyph-v4 {
  animation: glyphIdlePulse 4s ease-in-out infinite;
}
.mode-card-sleek:hover .mode-card-glyph-v4 {
  animation: none;
}

/* Shimmer effect au hover via le ::before existant */
.mode-card-sleek:hover {
  border-color: var(--mode-color, var(--accent));
  transform: translateY(-6px);
  box-shadow:
    0 24px 60px -24px var(--mode-color, var(--accent))80,
    0 4px 12px -2px rgba(0,0,0,0.5);
}

@media (max-width: 720px) {
  .mode-card-sleek {
    padding: 1.3rem 1.2rem 1.15rem;
    min-height: 200px;
  }
  .mode-card-sleek-title { font-size: 1.2rem; }
  .mode-card-sleek-tagline { font-size: 0.82rem; }
  .mode-card-sleek-perks li { font-size: 0.78rem; }
}

/* ===== POPULAR ACCOUNTS SECTION (on game modes page) ===== */
.modes-accounts-section {
  margin-top: 3.5rem;
  animation: sleekFadeIn 0.6s var(--ease) backwards;
  animation-delay: 0.2s;
}
.modes-accounts-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}
.modes-accounts-head-left .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.modes-accounts-head-left .eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.modes-accounts-head-left h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.3rem 0;
  line-height: 1.15;
}
.modes-accounts-head-left p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-dim);
  max-width: 520px;
}
.modes-accounts-see-all {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--text);
  padding: 0.65rem 1.1rem;
  border-radius: 99px;
  font-size: 0.86rem;
  font-weight: 600;
  font-family: var(--font-display);
  cursor: pointer;
  transition: all 260ms cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}
.modes-accounts-see-all svg { transition: transform 280ms ease; }
.modes-accounts-see-all:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0f;
}
.modes-accounts-see-all:hover svg { transform: translateX(3px); }

.modes-accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

/* Phantom "more accounts" tile shown at the end of the grid */
.modes-accounts-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at center, var(--accent)10 0%, transparent 70%),
    linear-gradient(160deg, rgba(20,22,32,0.6) 0%, rgba(13,15,24,0.6) 100%);
  border: 1.5px dashed rgba(212, 175, 55, 0.25);
  cursor: pointer;
  transition: all 280ms cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center;
  min-height: 280px;
}
.modes-accounts-more:hover {
  border-color: var(--accent);
  background:
    radial-gradient(circle at center, var(--accent)20 0%, transparent 70%),
    linear-gradient(160deg, rgba(20,22,32,0.7) 0%, rgba(13,15,24,0.7) 100%);
  transform: translateY(-3px);
}
.modes-accounts-more-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2, #f0c860));
  display: grid;
  place-items: center;
  color: #0a0a0f;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.modes-accounts-more:hover .modes-accounts-more-icon { transform: scale(1.08) rotate(-6deg); }
.modes-accounts-more-count {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.modes-accounts-more-label {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.35;
}

/* Empty teaser state: shown when there are zero accounts for this game */
.modes-accounts-teaser {
  margin-top: 3.5rem;
  padding: 1.8rem 2rem;
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, var(--accent)15 0%, transparent 50%),
    linear-gradient(160deg, rgba(20,22,32,0.85) 0%, rgba(13,15,24,0.85) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  animation: sleekFadeIn 0.6s var(--ease) backwards;
  animation-delay: 0.2s;
}
.modes-accounts-teaser-content {
  flex: 1;
  min-width: 260px;
}
.modes-accounts-teaser-content .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.modes-accounts-teaser-content .eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.modes-accounts-teaser-content h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.3rem 0;
}
.modes-accounts-teaser-content p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-dim);
  max-width: 520px;
}

@media (max-width: 720px) {
  .modes-accounts-head-left h2 { font-size: 1.4rem; }
  .modes-accounts-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.7rem;
  }
  .modes-accounts-more { min-height: 220px; }
  .modes-accounts-teaser { padding: 1.3rem 1.4rem; }
}

/* ===== HERO V4 — BIG CAPS title + bullets row ===== */
.game-modes-hero-v4 {
  position: relative;
  padding: 2.8rem 2rem 2.4rem;
  margin-bottom: 1.4rem;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 70% -10%, var(--game-color-1, var(--accent))22 0%, transparent 55%),
    linear-gradient(160deg, rgba(20,22,32,0.92) 0%, rgba(11,13,22,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  text-align: center;
  animation: sleekFadeIn 0.65s var(--ease) backwards;
}
.game-modes-hero-v4-glow {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 100%;
  background: radial-gradient(ellipse at center, var(--game-color-1, var(--accent))33 0%, transparent 70%);
  filter: none;
  pointer-events: none;
  opacity: 0.6;
}
.game-modes-hero-v4-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem;
  border-radius: 99px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.28);
  font-size: 0.78rem;
  color: #4ade80;
  font-weight: 500;
  margin-bottom: 1.3rem;
  position: relative;
  z-index: 2;
}
.game-modes-hero-v4-pill strong { color: #5ee089; font-weight: 700; font-variant-numeric: tabular-nums; }
.game-modes-hero-v4-pill .hero-pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: livepulse 2s ease-in-out infinite;
}
.game-modes-hero-v4-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin: 0 0 1.5rem 0;
  color: var(--text);
  position: relative;
  z-index: 2;
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.hero-title-accent {
  background: linear-gradient(135deg, var(--gold, #d4af37) 0%, #f0c860 50%, var(--gold, #d4af37) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  filter: drop-shadow(0 2px 16px rgba(212,175,55,0.3));
}
.game-modes-hero-v4-bullets {
  display: inline-flex;
  gap: 3.5rem;
  position: relative;
  z-index: 2;
}
.hero-bullet-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.hero-bullet {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--text-dim);
}
.hero-bullet svg {
  color: var(--accent, #d4af37);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .game-modes-hero-v4 { padding: 2rem 1.2rem 1.8rem; border-radius: 18px; }
  .game-modes-hero-v4-title { font-size: 2.2rem; margin-bottom: 1.1rem; }
  .game-modes-hero-v4-bullets { gap: 1.8rem; }
  .hero-bullet { font-size: 0.8rem; gap: 0.4rem; }
  .hero-bullet-col { gap: 0.4rem; }
}

/* ===== MODE CARD V4 — Glyph SVG décoratif en fond ===== */
.mode-card-glyph-v4 {
  position: absolute;
  bottom: 1.2rem;
  right: 1.2rem;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    radial-gradient(circle at 30% 30%, var(--mode-color, var(--accent))22 0%, transparent 70%);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--mode-color, var(--accent));
  pointer-events: none;
  z-index: 3;
  transition: all 380ms cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.85;
}
.mode-card-sleek:hover .mode-card-glyph-v4 {
  transform: scale(1.1) rotate(-6deg);
  opacity: 1;
  border-color: var(--mode-color, var(--accent))66;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    radial-gradient(circle at 30% 30%, var(--mode-color, var(--accent))55 0%, transparent 70%);
  box-shadow: 0 10px 30px -8px var(--mode-color, var(--accent))55;
}
/* Make sure tagline doesn't overflow under the glyph */
.mode-card-sleek-tagline {
  padding-right: 70px;
}
@media (max-width: 720px) {
  .mode-card-glyph-v4 { width: 44px; height: 44px; bottom: 1rem; right: 1rem; }
  .mode-card-glyph-v4 svg { width: 22px !important; height: 22px !important; }
  .mode-card-sleek-tagline { padding-right: 56px; }
}

/* ===== ACCOUNT SHOP BANNER V4 — visual on the right ===== */
.modes-accounts-banner-v4 {
  position: relative;
  margin-top: 3rem;
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 50%, var(--game-color-1, var(--accent))20 0%, transparent 55%),
    linear-gradient(135deg, rgba(20,22,32,0.92) 0%, rgba(11,13,22,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 2rem 2.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  overflow: hidden;
  animation: sleekFadeIn 0.6s var(--ease) backwards;
  animation-delay: 0.2s;
}
.modes-accounts-banner-content {
  flex: 1;
  min-width: 260px;
  position: relative;
  z-index: 2;
}
.modes-accounts-banner-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--game-color-1, var(--accent));
  margin-bottom: 0.7rem;
  font-family: var(--font-display);
}
.modes-accounts-banner-content h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0 0 0.55rem 0;
  line-height: 1.15;
  color: var(--text);
}
.modes-accounts-banner-content p {
  margin: 0 0 1.2rem 0;
  font-size: 0.95rem;
  color: var(--text-dim);
  max-width: 480px;
  line-height: 1.5;
}
.modes-accounts-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--game-color-1, var(--accent));
  color: #0a0a0f;
  padding: 0.7rem 1.3rem;
  border: none;
  border-radius: 99px;
  font-size: 0.92rem;
  font-weight: 700;
  font-family: var(--font-display);
  cursor: pointer;
  transition: all 280ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 8px 24px -10px var(--game-color-1, var(--accent));
}
.modes-accounts-banner-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px var(--game-color-1, var(--accent));
}
.modes-accounts-banner-btn svg { transition: transform 240ms ease; }
.modes-accounts-banner-btn:hover svg { transform: translateX(3px); }
.modes-accounts-banner-visual {
  flex-shrink: 0;
  width: 240px;
  height: 180px;
  position: relative;
  z-index: 1;
}
.modes-accounts-banner-visual svg {
  width: 100%;
  height: 100%;
  animation: bannerFloat 6s ease-in-out infinite;
}
@keyframes bannerFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 820px) {
  .modes-accounts-banner-v4 { flex-direction: column; padding: 1.6rem 1.6rem; gap: 1.2rem; text-align: left; align-items: flex-start; }
  .modes-accounts-banner-visual { width: 100%; height: 120px; opacity: 0.4; position: absolute; right: 0; bottom: 0; pointer-events: none; }
  .modes-accounts-banner-content h3 { font-size: 1.35rem; }
}


.game-modes-hero-v3 {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 0 1.8rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}
.game-modes-hero-v3-content {
  flex: 1;
  min-width: 280px;
}
.game-modes-hero-v3-meta {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  margin-bottom: 0.6rem;
  text-transform: none;
  font-weight: 500;
}
.game-modes-hero-v3-title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 0.5rem 0;
  color: var(--text);
}
.game-modes-hero-v3-sub {
  font-size: 0.98rem;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
  max-width: 540px;
}
.game-modes-hero-v3-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border-radius: 99px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  font-size: 0.85rem;
  color: #4ade80;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}
.game-modes-hero-v3-pill strong {
  color: #5ee089;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.game-modes-hero-v3-pill .hero-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: livepulse 2s ease-in-out infinite;
}

.game-modes-stats-v3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin-bottom: 2.5rem;
}
.modes-stat-v3 {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  transition: border-color 220ms ease, background 220ms ease;
}
.modes-stat-v3:hover {
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
}
.modes-stat-v3-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 0.3rem;
}
.modes-stat-v3-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.modes-stat-v3-unit {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-weight: 500;
}

@media (max-width: 720px) {
  .game-modes-hero-v3 { padding: 1.4rem 0 1.4rem; }
  .game-modes-hero-v3-title { font-size: 1.85rem; }
  .game-modes-hero-v3-sub { font-size: 0.92rem; }
  .game-modes-hero-v3-pill { font-size: 0.8rem; padding: 0.4rem 0.8rem; }
  .game-modes-stats-v3 { grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin-bottom: 1.8rem; }
  .modes-stat-v3 { padding: 0.7rem 0.75rem; }
  .modes-stat-v3-value { font-size: 1.15rem; }
}

/* ===== CARD CTA V3 (text + arrow only, no pill, hide V2 pill+glyph) ===== */
.mode-card-sleek-cta-v3 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: -0.005em;
  transition: gap 240ms ease, color 220ms ease;
}
.mode-card-sleek-cta-v3 svg {
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mode-card-sleek:hover .mode-card-sleek-cta-v3 {
  color: var(--mode-color, var(--accent));
  gap: 0.6rem;
}
.mode-card-sleek:hover .mode-card-sleek-cta-v3 svg {
  transform: translateX(3px);
}

/* ===== GAME MODES V5 — sober Valorant-inspired service page ===== */
.game-modes-shell-v5 {
  --gm-red: var(--game-color-1, #ff4655);
  --gm-gold: var(--game-color-2, #d4af37);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.74fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  min-height: 360px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background:
    linear-gradient(115deg, rgba(9,9,12,0.98) 0%, rgba(13,10,13,0.96) 47%, rgba(23,9,13,0.94) 100%);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 22px 70px rgba(0,0,0,0.38);
}
.game-modes-shell-v5::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 15%, color-mix(in srgb, var(--gm-red) 18%, transparent), transparent 34%),
    radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--gm-gold) 10%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 42%);
  opacity: 0.88;
  pointer-events: none;
  z-index: -2;
  animation: gmAmbientSweep 8s ease-in-out infinite alternate;
}
.game-modes-shell-v5::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gm-red), var(--gm-gold), transparent);
  opacity: 0.72;
  pointer-events: none;
}
@keyframes gmAmbientSweep {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); opacity: 0.62; }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.035); opacity: 0.88; }
}
@keyframes gmArtFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes gmGoldSheen {
  0% { background-position: 0% center; }
  100% { background-position: 220% center; }
}
.game-modes-hero-copy-v5 {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.game-modes-game-chip-v5 {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.78rem 0.42rem 0.48rem;
  margin-bottom: 1.2rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}
.game-modes-game-mark-v5 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  background: #050507;
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 22px rgba(0,0,0,0.34);
  overflow: hidden;
}
.game-modes-game-mark-v5 img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin: auto;
}
.game-modes-game-mark-v5 .game-wordmark {
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0;
  font-size: 0.72rem;
  line-height: 1;
}
.game-modes-live-v5 {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: #69e7a3;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.game-modes-live-v5 .hero-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #69e7a3;
  box-shadow: 0 0 8px rgba(105,231,163,0.75);
  animation: livepulse 2s ease-in-out infinite;
}
.game-modes-title-v5 {
  font-family: var(--font-display);
  font-size: clamp(2.45rem, 6vw, 5.4rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.94;
  color: var(--game-color-1, #fff);
  max-width: 760px;
  margin: 0 0 1rem;
}
.game-modes-title-v5 span {
  background: none;
  color: #f0c860;
  text-shadow: none;
  animation: none;
}
.game-modes-lead-v5 {
  max-width: 720px;
  margin: 0 0 1.35rem;
  color: rgba(245,245,247,0.74);
  font-size: clamp(0.98rem, 1.5vw, 1.12rem);
  line-height: 1.58;
}
.game-modes-actions-v5 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.35rem;
}
.game-modes-primary-v5,
.game-modes-secondary-v5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 42px;
  padding: 0.72rem 1.05rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
.game-modes-primary-v5 {
  background: linear-gradient(135deg, #f0c860, #d4af37);
  color: #08080b;
  box-shadow: 0 14px 34px rgba(212,175,55,0.20);
}
.game-modes-secondary-v5 {
  background:
    linear-gradient(135deg, rgba(240,200,96,0.10), rgba(255,255,255,0.035));
  border-color: rgba(240,200,96,0.36);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 28px rgba(212,175,55,0.08);
}
.game-modes-primary-v5:hover,
.game-modes-secondary-v5:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
}
.game-modes-trust-row-v5 {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 0.65rem;
  max-width: 780px;
}
.game-modes-trust-v5 {
  min-height: 72px;
  padding: 0.82rem 0.9rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.075);
}
.game-modes-trust-v5 strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.game-modes-trust-v5 span {
  display: block;
  margin-top: 0.34rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  line-height: 1.25;
}
.game-modes-visual-v5 {
  position: relative;
  z-index: 1;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.game-modes-visual-v5::before {
  content: "";
  position: absolute;
  inset: 7% 4% 0 8%;
  background:
    linear-gradient(135deg, rgba(212,175,55,0.18), rgba(255,70,85,0.10)),
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
  clip-path: polygon(16% 0, 100% 0, 86% 100%, 0 100%);
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0.92;
}
.game-modes-hero-art-v5 {
  position: relative;
  z-index: 2;
  width: min(118%, 430px);
  max-height: 430px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 28px 34px rgba(0,0,0,0.52));
  animation: gmArtFloat 6.5s ease-in-out infinite;
}
.game-modes-visual-card-v5 {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 1.1rem;
  width: min(230px, 72%);
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  background: rgba(9,9,12,0.82);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 50px rgba(0,0,0,0.36);
  backdrop-filter: none;
}
.game-modes-visual-card-v5 span {
  display: block;
  color: var(--text-dim);
  font-size: 0.72rem;
  margin-bottom: 0.25rem;
}
.game-modes-visual-card-v5 strong {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.2;
}
.game-modes-valorant .game-modes-subnav {
  display: none !important;
}
.valorant-modes-layout-v5 {
  display: grid;
  grid-template-columns: minmax(0, 760px) 280px;
  gap: 1.35rem;
  align-items: start;
  justify-content: space-between;
  margin-inline: auto;
  max-width: 1180px;
  width: 100%;
}
.game-modes-valorant .game-modes-grid,
.game-modes-valorant #gameModesGrid {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.62rem;
  justify-self: start;
  width: 100%;
  max-width: 760px;
}
.game-modes-valorant #gameModesGrid::before {
  content: "";
  position: absolute;
  inset: -2rem 0;
  background: url('/elevateboost-assets/elevateboost-logo.png') center 42% / min(520px, 70vw) auto no-repeat;
  opacity: 0.028;
  filter: grayscale(0.2) saturate(0.8);
  pointer-events: none;
  z-index: 0;
}
.game-modes-valorant .mode-card-sleek {
  min-height: 154px;
  padding: 0.72rem 0.78rem 0.72rem;
  border-radius: 12px;
  border-color: rgba(255,255,255,0.105);
  background:
    radial-gradient(circle at 0 0, rgba(255,70,85,0.055), transparent 42%),
    linear-gradient(155deg, rgba(18,18,23,0.98), rgba(13,13,18,0.98)),
    linear-gradient(90deg, rgba(212,175,55,0.055), rgba(255,70,85,0.045), transparent);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.018),
    0 12px 34px -30px rgba(0,0,0,0.9);
  z-index: 1;
}
.game-modes-valorant .mode-card-sleek::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  mask-image: linear-gradient(90deg, black, transparent 86%);
  -webkit-mask-image: linear-gradient(90deg, black, transparent 86%);
}
.game-modes-valorant .mode-card-sleek::after {
  top: auto;
  right: auto;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  filter: none;
  opacity: 0.72;
  background: linear-gradient(90deg, var(--mode-color-2), rgba(255,70,85,0.74), transparent);
}
.game-modes-valorant .mode-card-sleek:hover::after {
  opacity: 1;
  transform: none;
}
.game-modes-valorant .mode-card-sleek:hover {
  border-color: rgba(255,70,85,0.48);
  background:
    radial-gradient(circle at 82% 80%, rgba(212,175,55,0.18), transparent 44%),
    radial-gradient(circle at 12% 10%, rgba(255,70,85,0.18), transparent 38%),
    linear-gradient(155deg, rgba(24,24,29,0.99), rgba(14,14,19,0.99));
  box-shadow:
    0 24px 70px -30px rgba(255,70,85,0.72),
    0 14px 36px -24px rgba(212,175,55,0.62),
    inset 0 0 0 1px rgba(255,255,255,0.055);
}
.game-modes-valorant .mode-card-sleek-top {
  min-height: 30px;
  margin-left: 48px;
  margin-bottom: 0.46rem;
  align-items: flex-start;
}
.game-modes-valorant .mode-card-sleek-title {
  font-size: 0.98rem;
  letter-spacing: 0;
  padding-right: 0;
  margin-bottom: 0.22rem;
}
.game-modes-valorant .mode-card-sleek-tagline {
  padding-right: 0;
  color: rgba(245,245,247,0.68);
  font-size: 0.68rem;
  line-height: 1.32;
  margin-bottom: 0.44rem;
}
.game-modes-valorant .mode-card-sleek-perks {
  margin-top: 0.2rem;
  margin-bottom: 0.42rem;
  gap: 0.12rem;
}
.game-modes-valorant .mode-card-sleek-perks li {
  color: rgba(245,245,247,0.70);
  font-size: 0.63rem;
  line-height: 1.25;
}
.game-modes-valorant .mode-card-sleek-perks .perk-arrow {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 2px;
  background: var(--mode-color-2, #d4af37);
  color: var(--mode-color-2, #d4af37);
  transform: rotate(45deg);
  box-shadow: 0 0 9px rgba(212,175,55,0.38);
  font-size: 0;
}
.game-modes-valorant .mode-card-sleek-perks .perk-arrow::before {
  content: "";
}
.game-modes-valorant .mode-card-glyph-v4 {
  display: none !important;
}
.mode-card-visual-v5 {
  position: absolute;
  left: 0.72rem;
  top: 0.70rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background:
    radial-gradient(circle at 42% 28%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(135deg, rgba(255,70,85,0.70), rgba(108,19,31,0.80)),
    rgba(255,255,255,0.028);
  border: 1px solid rgba(255,70,85,0.34);
  opacity: 0.96;
  transition: transform 320ms var(--ease), opacity 220ms ease, border-color 220ms ease, box-shadow 320ms ease;
  pointer-events: none;
  z-index: 3;
}
.mode-card-visual-v5 img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
}
.mode-card-visual-v5 .game-wordmark {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--premium-2);
  letter-spacing: 0;
}
.game-modes-valorant .mode-card-sleek:hover .mode-card-visual-v5 {
  transform: translateY(-3px) scale(1.07);
  opacity: 1;
  border-color: rgba(255,70,85,0.68);
  box-shadow:
    0 12px 34px -16px rgba(255,70,85,0.85),
    0 0 0 1px rgba(255,255,255,0.06);
}
.game-modes-valorant .mode-card-sleek-number {
  display: none !important;
}
.game-modes-valorant .mode-card-sleek-cta-v3 {
  color: #fff;
  font-size: 0.68rem;
}
.valorant-boosters-panel-v5 {
  position: sticky;
  top: 92px;
  justify-self: end;
  width: 280px;
  border-radius: 14px;
  padding: 0.95rem;
  background:
    radial-gradient(circle at 18% 0, rgba(255,70,85,0.12), transparent 38%),
    linear-gradient(160deg, rgba(17,17,22,0.96), rgba(10,10,14,0.98));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 60px -36px rgba(0,0,0,0.92);
}
.valorant-boosters-panel-v5 h3 {
  margin: 0 0 0.24rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0;
}
.valorant-boosters-panel-v5 p {
  margin: 0 0 0.82rem;
  color: var(--text-dim);
  font-size: 0.74rem;
  line-height: 1.35;
}
.valorant-booster-list-v5 {
  display: flex;
  flex-direction: column;
  gap: 0.56rem;
}
.valorant-booster-card-v5 {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0.68rem;
  align-items: center;
  min-height: 76px;
  padding: 0.66rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.085);
  background: rgba(255,255,255,0.026);
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 260ms ease;
}
.valorant-booster-card-v5:hover {
  transform: translateX(-3px);
  border-color: rgba(212,175,55,0.38);
  background:
    linear-gradient(135deg, rgba(212,175,55,0.06), rgba(255,70,85,0.045)),
    rgba(255,255,255,0.035);
  box-shadow: 0 16px 38px -28px rgba(212,175,55,0.65);
}
.valorant-booster-avatar-v5 {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,70,85,0.95), rgba(212,175,55,0.82));
  color: #09090c;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
}
.valorant-booster-avatar-v5::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74,222,128,0.8);
}
.valorant-booster-info-v5 {
  min-width: 0;
}
.valorant-booster-head-v5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.valorant-booster-name-v5 {
  font-family: var(--font-display);
  color: var(--text);
  font-size: 0.87rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.valorant-booster-stars-v5 {
  color: var(--premium-2);
  font-size: 0.7rem;
  white-space: nowrap;
}
.valorant-booster-meta-v5 {
  margin-top: 0.13rem;
  color: var(--text-dim);
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.valorant-booster-actions-v5 {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  margin-top: 0.48rem;
}
.valorant-booster-action-v5 {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
  color: var(--text);
  border-radius: 999px;
  padding: 0.26rem 0.48rem;
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
}
.valorant-booster-action-v5.primary {
  background: rgba(212,175,55,0.14);
  border-color: rgba(212,175,55,0.24);
  color: var(--premium-2);
}
@media (max-width: 1100px) {
  .valorant-modes-layout-v5 {
    grid-template-columns: 1fr;
    max-width: 760px;
  }
  .valorant-boosters-panel-v5 {
    position: relative;
    top: auto;
    width: 100%;
  }
}
@media (max-width: 760px) {
  .game-modes-valorant #gameModesGrid {
    grid-template-columns: 1fr;
    max-width: none;
  }
}
.modes-custom-offer-v5 {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1.35rem 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(105deg, rgba(212,175,55,0.08), rgba(255,70,85,0.035) 42%, transparent 70%),
    rgba(255,255,255,0.025);
}

/* ============================================================================
   THÈME MARVEL RIVALS — Vert Hulk (#58be52)
   Marvel réutilise la grille V5 de Valorant (.game-modes-valorant) mais
   .game-modes-marvel surcharge toutes les couleurs rouges → vert Hulk.
   Couleur signature : rgb(88,190,82) — la même que la carte jeu Marvel.
   ============================================================================ */
.game-modes-marvel #gameModesGrid::before {
  filter: grayscale(0.2) saturate(0.8) hue-rotate(85deg);
}
.game-modes-marvel .mode-card-sleek {
  border-color: rgba(88,190,82,0.14);
  background:
    radial-gradient(circle at 0 0, rgba(88,190,82,0.075), transparent 42%),
    linear-gradient(155deg, rgba(15,20,15,0.98), rgba(11,15,11,0.98)),
    linear-gradient(90deg, rgba(212,175,55,0.05), rgba(88,190,82,0.05), transparent);
}
.game-modes-marvel .mode-card-sleek::after {
  background: linear-gradient(90deg, var(--mode-color-2, #d4af37), rgba(88,190,82,0.78), transparent);
}
.game-modes-marvel .mode-card-sleek:hover {
  border-color: rgba(88,190,82,0.52);
  background:
    radial-gradient(circle at 82% 80%, rgba(212,175,55,0.16), transparent 44%),
    radial-gradient(circle at 12% 10%, rgba(88,190,82,0.22), transparent 38%),
    linear-gradient(155deg, rgba(20,28,19,0.99), rgba(13,18,13,0.99));
  box-shadow:
    0 24px 70px -30px rgba(88,190,82,0.70),
    0 14px 36px -24px rgba(212,175,55,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.055);
}
.game-modes-marvel .mode-card-sleek-perks .perk-arrow {
  background: var(--mode-color-2, #58be52);
  color: var(--mode-color-2, #58be52);
  box-shadow: 0 0 9px rgba(88,190,82,0.45);
}
.game-modes-marvel .mode-card-visual-v5 {
  background:
    radial-gradient(circle at 42% 28%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(135deg, rgba(88,190,82,0.72), rgba(28,74,26,0.82)),
    rgba(255,255,255,0.028);
  border: 1px solid rgba(88,190,82,0.38);
}
.game-modes-marvel .mode-card-sleek:hover .mode-card-visual-v5 {
  border-color: rgba(88,190,82,0.70);
  box-shadow:
    0 12px 34px -16px rgba(88,190,82,0.85),
    0 0 0 1px rgba(255,255,255,0.06);
}
.game-modes-marvel .valorant-boosters-panel-v5 {
  background:
    radial-gradient(circle at 18% 0, rgba(88,190,82,0.14), transparent 38%),
    linear-gradient(160deg, rgba(15,20,15,0.96), rgba(10,13,10,0.98));
}
.game-modes-marvel .valorant-booster-card-v5:hover {
  border-color: rgba(88,190,82,0.42);
  background:
    linear-gradient(135deg, rgba(212,175,55,0.06), rgba(88,190,82,0.06)),
    rgba(255,255,255,0.035);
  box-shadow: 0 16px 38px -28px rgba(88,190,82,0.65);
}
.game-modes-marvel .valorant-booster-avatar-v5 {
  background: linear-gradient(135deg, rgba(88,190,82,0.95), rgba(212,175,55,0.80));
}
/* Halo héros (hero du hero-header V5) teinté vert Hulk */
.game-modes-marvel .game-modes-shell-v5 {
  --game-color-1: #58be52;
  --game-color-2: #2f7a2c;
}
.game-modes-marvel .game-modes-hero-art-v5 {
  filter: drop-shadow(0 22px 48px rgba(88,190,82,0.32));
}
/* Thème vert appliqué au calculateur adaptatif Marvel */
.adaptive-calc-wrap[data-game="marvel"] {
  --game-color: #58be52;
  --game-color-rgb: 88,190,82;
}
.adaptive-calc-wrap[data-game="marvel"] .marvel-oaa-rp-card {
  border-color: rgba(88,190,82,0.30);
  background:
    radial-gradient(circle at 0 0, rgba(88,190,82,0.10), transparent 50%),
    linear-gradient(155deg, rgba(17,22,16,0.98), rgba(12,16,12,0.98));
}
.adaptive-calc-wrap[data-game="marvel"] .calc-modes-bar-item {
  border-color: rgba(212,175,55,0.34);
  background:
    linear-gradient(135deg, rgba(212,175,55,0.11), rgba(88,190,82,0.045)),
    rgba(255,255,255,0.025);
  color: rgba(255,255,255,0.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 10px 24px rgba(0,0,0,0.16);
}
.adaptive-calc-wrap[data-game="marvel"] .calc-modes-bar-item:hover {
  border-color: rgba(212,175,55,0.62);
  color: #f0c860;
  box-shadow: 0 14px 34px -26px rgba(212,175,55,0.78);
}
.adaptive-calc-wrap[data-game="marvel"] .rank-chip-icon {
  width: 58px;
  height: 58px;
}
.adaptive-calc-wrap[data-game="marvel"] .rank-chip-icon .marvel-rank-img {
  width: 50px;
  height: 50px;
}

/* ==========================================================================
   LEAGUE OF LEGENDS — Theming complet (gold hextech + bleu nuit + chips premium)
   --------------------------------------------------------------------------
   LoL réutilise la grille V5 de Valorant (.game-modes-valorant) mais
   .game-modes-lol surcharge toutes les couleurs rouges → or hextech (#c89b3c).
   Le secondaire (#0a1428) est le bleu nuit officiel Riot.

   Inclut aussi :
   - Sélecteurs LP (LP actuels + LP attendus / win) du mode Division Boost
   - Carte Master+ LP Push (style Valorant Immortal RR adapté à LoL)
   ========================================================================== */

/* --- Sélecteurs LP du mode Division Boost LoL (boostroyal-like) --- */
.lol-lp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.2rem 0;
  padding: 1rem;
  border-radius: 12px;
  background: linear-gradient(155deg, rgba(20,16,8,0.65), rgba(10,20,40,0.55));
  border: 1px solid rgba(200,155,60,0.22);
}
@media (max-width: 640px) {
  .lol-lp-row { grid-template-columns: 1fr; }
}
.lol-lp-selector {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.lol-lp-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.72);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.lol-lp-select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: rgba(15,18,25,0.85);
  border: 1px solid rgba(200,155,60,0.30);
  border-radius: 10px;
  color: white;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c89b3c' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
}
.lol-lp-select:hover,
.lol-lp-select:focus {
  border-color: rgba(200,155,60,0.65);
  outline: none;
}
.lol-lp-select-accent {
  border-color: rgba(200,155,60,0.55);
  color: #f0d080;
}
.lol-lp-select-accent option { color: #fff; background: #0f1219; }

/* --- Carte Master+ LP Push (réutilise apex-master-rp-card mais avec accent or) --- */
.lol-master-lp-card {
  border-color: rgba(200,155,60,0.30) !important;
}
.lol-master-lp-unit {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(200,155,60,0.85);
  font-weight: 700;
  margin-top: 0.35rem;
}

/* --- Badge "Recommandé" sur les options premium (style boostroyal) --- */
.opt-btn-recommended-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6bcf63;
  margin-top: 0.18rem;
  white-space: nowrap;
}
.opt-btn-recommended {
  border-color: rgba(107,207,99,0.42) !important;
}
.opt-btn-recommended:hover {
  border-color: rgba(107,207,99,0.75) !important;
}
.opt-btn-recommended.active {
  background: linear-gradient(135deg, rgba(107,207,99,0.15), rgba(107,207,99,0.05)) !important;
  border-color: rgba(107,207,99,0.85) !important;
}

/* ==========================================================================
   LEAGUE OF LEGENDS — Theming complet (gold hextech + bleu nuit + chips premium)
.game-modes-lol #gameModesGrid::before {
  background: radial-gradient(circle at 80% 0%, rgba(200,155,60,0.18), transparent 55%);
}
.game-modes-lol .mode-card-sleek {
  border-color: rgba(200,155,60,0.28);
  background: linear-gradient(155deg, rgba(20,16,8,0.96), rgba(10,20,40,0.94));
}
.game-modes-lol .mode-card-sleek::after {
  background: linear-gradient(135deg, rgba(200,155,60,0.20), transparent 60%);
}
.game-modes-lol .mode-card-sleek:hover {
  border-color: rgba(200,155,60,0.55);
  box-shadow:
    0 30px 70px -30px rgba(200,155,60,0.42),
    0 0 0 1px rgba(200,155,60,0.18) inset;
}
.game-modes-lol .mode-card-sleek-title {
  color: #f0d080;
}
.game-modes-lol .mode-card-sleek-perks .perk-arrow {
  color: #c89b3c;
}
.game-modes-lol .mode-card-visual-v5 {
  background:
    radial-gradient(circle at 50% 50%, rgba(200,155,60,0.18), transparent 65%),
    linear-gradient(135deg, rgba(200,155,60,0.10), rgba(10,20,40,0.55));
  border-color: rgba(200,155,60,0.28);
}
.game-modes-lol .mode-card-sleek:hover .mode-card-visual-v5 {
  background:
    radial-gradient(circle at 50% 50%, rgba(200,155,60,0.28), transparent 65%),
    linear-gradient(135deg, rgba(200,155,60,0.18), rgba(10,20,40,0.70));
}
.game-modes-lol .valorant-boosters-panel-v5 {
  border-color: rgba(200,155,60,0.28);
  background: linear-gradient(155deg, rgba(20,16,8,0.92), rgba(10,20,40,0.92));
}
.game-modes-lol .valorant-booster-card-v5:hover {
  border-color: rgba(200,155,60,0.55);
  box-shadow:
    0 24px 60px -28px rgba(200,155,60,0.40),
    0 0 0 1px rgba(200,155,60,0.18) inset;
}
.game-modes-lol .valorant-booster-avatar-v5 {
  border-color: rgba(200,155,60,0.55);
}
/* Halo héros (hero du hero-header V5) teinté or hextech */
.game-modes-lol .game-modes-shell-v5 {
  --game-color-1: #c89b3c;
  --game-color-2: #0a1428;
}
.game-modes-lol .game-modes-hero-art-v5 {
  filter: drop-shadow(0 22px 48px rgba(200,155,60,0.42));
}

/* Thème bleu hextech appliqué au calculateur adaptatif LoL */
.adaptive-calc-wrap[data-game="lol"] {
  --game-color: #08c2c0;
  --game-color-rgb: 8,194,192;
}
.adaptive-calc-wrap[data-game="lol"] .calc-modes-bar-item {
  border-color: rgba(212,175,55,0.34);
  background:
    linear-gradient(135deg, rgba(212,175,55,0.10), rgba(255,255,255,0.025)),
    rgba(255,255,255,0.025);
  color: rgba(255,255,255,0.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 10px 24px rgba(0,0,0,0.16);
}
.adaptive-calc-wrap[data-game="lol"] .calc-modes-bar-item:hover {
  border-color: rgba(212,175,55,0.62);
  color: #f0c860;
  box-shadow: 0 14px 34px -26px rgba(212,175,55,0.70);
}
.adaptive-calc-wrap[data-game="lol"] .rank-chip-icon {
  width: 58px;
  height: 58px;
}
.adaptive-calc-wrap[data-game="lol"] .rank-chip-icon .lol-rank-img {
  width: 50px;
  height: 50px;
}
/* Ambiance bleu hextech subtile sur le calculateur LoL */
.adaptive-calc-wrap[data-game="lol"] {
  position: relative;
  background: transparent;
  overflow: visible;
}
.adaptive-calc-wrap[data-game="lol"]::after {
  opacity: 0.18;
}
.adaptive-calc-wrap[data-game="lol"] .rank-card {
  background: rgba(10,10,12,0.94);
  position: relative;
  overflow: visible;
}
.adaptive-calc-wrap[data-game="lol"] .rank-card > * {
  position: relative;
  z-index: 1;
}
.adaptive-calc-wrap[data-game="lol"] .rank-card:not(.rank-card-target) {
  background:
    radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--rank-color, #d4af37) 24%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--rank-color, #d4af37) 10%, rgba(10,10,12,0.96)), rgba(10,10,12,0.96) 68%),
    #070708;
  border-color: color-mix(in srgb, var(--rank-color, #d4af37) 42%, rgba(255,255,255,0.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.065),
    0 0 0 1px color-mix(in srgb, var(--rank-color, #d4af37) 12%, transparent),
    0 24px 54px -40px var(--rank-color, #d4af37);
}
.adaptive-calc-wrap[data-game="lol"] .rank-card:not(.rank-card-target)::before {
  content: "";
  position: absolute;
  inset: -18px -12px auto;
  height: 150px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 56% 40% at 50% 12%, color-mix(in srgb, var(--rank-color, #d4af37) 30%, transparent), transparent 72%),
    radial-gradient(ellipse 38% 28% at 16% 28%, rgba(255,255,255,0.08), transparent 70%);
  filter: none;
  opacity: 0.86;
}
.adaptive-calc-wrap[data-game="lol"] .rank-card-target {
  background:
    linear-gradient(180deg, rgba(var(--rank-color-rgb, 212,175,55), 0.055) 0%, rgba(10,10,12,0.96) 62%),
    #070708;
}
.adaptive-calc-wrap[data-game="lol"] .rank-cards-row {
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}
.adaptive-calc-wrap[data-game="lol"] .rank-cards-row::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 78%);
  height: 300px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 58% 42% at 50% 42%, rgba(8,194,192,0.16), transparent 72%),
    radial-gradient(ellipse 48% 34% at 50% 70%, rgba(255,255,255,0.055), transparent 78%);
  filter: none;
  opacity: 0.92;
}
/* Suppress the teal blob on non-rank modes (wins, arena, coaching, normals…) */
.adaptive-calc-wrap[data-game="lol"]:not([data-mode="rank"]) .rank-cards-row::before {
  display: none !important;
}
.adaptive-calc-wrap[data-game="lol"] .rank-card-head {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 0.58rem;
}
.adaptive-calc-wrap[data-game="lol"] .rank-card-info {
  width: 100%;
}
.adaptive-calc-wrap[data-game="lol"] .rank-card-badge .lol-rank-img,
.adaptive-calc-wrap[data-game="lol"] .rank-card-badge .lol-rank-img,
.adaptive-calc-wrap[data-game="lol"] .rank-chip-icon .lol-rank-img {
  filter:
    brightness(1.28)
    saturate(1.18)
    contrast(1.08)
    drop-shadow(0 0 10px rgba(8,194,192,0.32))
    drop-shadow(0 4px 8px rgba(0,0,0,0.55));
}
/* Wins/arena/coaching: use gold glow instead of hextech teal */
.adaptive-calc-wrap[data-game="lol"]:not([data-mode="rank"]) .rank-card-badge .lol-rank-img,
.adaptive-calc-wrap[data-game="lol"]:not([data-mode="rank"]) .rank-chip-icon .lol-rank-img {
  filter:
    brightness(1.18)
    saturate(1.08)
    contrast(1.04)
    drop-shadow(0 0 8px rgba(212,175,55,0.22))
    drop-shadow(0 4px 8px rgba(0,0,0,0.55));
}
.adaptive-calc-wrap[data-game="lol"] .rank-card-badge .lol-rank-img {
  width: 58px;
  height: 58px;
}
.adaptive-calc-wrap[data-game="lol"] .rank-grid-2rows .rank-row .rank-chip-icon {
  height: 56px;
  padding: 2px;
  background: rgba(255,255,255,0.04);
}
.adaptive-calc-wrap[data-game="lol"] .rank-grid-2rows .rank-row .rank-chip-icon .lol-rank-img {
  width: 52px;
  height: 52px;
}

/* ==========================================================================
   MARVEL RIVALS — Theming complet (particules vertes + sizing parfait + chips OAA)
   ========================================================================== */

/* --- 1. AMBIANCE VERTE HULK (particules + glow radial) --- */
.adaptive-calc-wrap[data-game="marvel"] {
  position: relative;
  background:
    radial-gradient(ellipse 700px 500px at 0% 0%, rgba(88,190,82,0.09), transparent 60%),
    radial-gradient(ellipse 600px 500px at 100% 10%, rgba(88,190,82,0.055), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(88,190,82,0.045), transparent 65%),
    linear-gradient(180deg, rgba(14,20,14,0.55), rgba(8,12,8,0.55));
  overflow: hidden;
}

/* Canvas des particules (commun à tous les jeux ayant une palette) */
.game-particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
.page[data-page="boost"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.game-particles-canvas-page {
  opacity: 0.74;
}
.page[data-page="boost"] > .game-particles-canvas-page ~ * {
  position: relative;
  z-index: 1;
}

/* Le contenu reste au-dessus du canvas (peu importe le jeu) */
.adaptive-calc-wrap > .game-particles-canvas ~ * {
  position: relative;
  z-index: 1;
}

/* Désactivation auto sur les appareils peu puissants / mode économie batterie */
@media (prefers-reduced-motion: reduce) {
  .game-particles-canvas { display: none; }
}

/* Wrap : overflow hidden pour clipper le canvas aux bords arrondis */
.adaptive-calc-wrap { position: relative; overflow: hidden; }

/* Cartes de rank Marvel — centrage parfait des PNG */
.adaptive-calc-wrap[data-game="marvel"] .rank-card-badge {
  position: relative;
  overflow: hidden !important;
  padding: 0;
  background: rgba(88,190,82,0.05);
  border-color: rgba(88,190,82,0.20);
}
.adaptive-calc-wrap[data-game="marvel"] .rank-card-badge:hover {
  border-color: rgba(88,190,82,0.38);
}
/* PNG : on les positionne en absolute et on utilise object-position pour les
   recentrer visuellement (les PNG sources ont souvent du vide en bas qui
   fait que l'image apparait décalée vers le bas par défaut) */
.adaptive-calc-wrap[data-game="marvel"] .rank-card-badge .marvel-rank-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center 35% !important; /* remonte visuellement le contenu */
  display: block;
  margin: 0;
  transform: none !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  transition: opacity 220ms ease;
}
/* SVG fallback : centrage géométrique strict (pas de problème de vide) */
.adaptive-calc-wrap[data-game="marvel"] .rank-card-badge svg {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 50px !important;
  height: 50px !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* Note : on n'utilise plus de scale par rang.
   object-position: center 35% recadre automatiquement chaque PNG vers le haut. */

/* Chips Marvel : même approche que les badges (PNG recadrés vers le haut) */
.adaptive-calc-wrap[data-game="marvel"] .rank-chip-icon {
  width: 58px;
  height: 58px;
  position: relative;
  overflow: hidden;
}
.adaptive-calc-wrap[data-game="marvel"] .rank-chip-icon .marvel-rank-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center 35% !important;
  display: block;
  margin: 0;
  transform: none !important;
}
.adaptive-calc-wrap[data-game="marvel"] .rank-chip-icon svg {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 44px !important;
  height: 44px !important;
  transform: translate(-50%, -50%) !important;
}

/* Ajustements par rang : Bronze/Silver puis Gold/Platinum ont plus de vide
   interne dans les PNG, donc on les agrandit visuellement. */
.adaptive-calc-wrap[data-game="marvel"] .rank-card-badge .marvel-rank-img[src*="marvel-rank-bronze"],
.adaptive-calc-wrap[data-game="marvel"] .rank-card-badge .marvel-rank-img[src*="marvel-rank-silver"] {
  top: -11% !important;
  left: -2% !important;
  width: 122% !important;
  height: 122% !important;
}
.adaptive-calc-wrap[data-game="marvel"] .rank-card-badge .marvel-rank-img[src*="marvel-rank-gold"],
.adaptive-calc-wrap[data-game="marvel"] .rank-card-badge .marvel-rank-img[src*="marvel-rank-platinum"] {
  top: -7% !important;
  left: -1% !important;
  width: 114% !important;
  height: 114% !important;
}
.adaptive-calc-wrap[data-game="marvel"] .rank-chip-icon .marvel-rank-img[src*="marvel-rank-bronze"],
.adaptive-calc-wrap[data-game="marvel"] .rank-chip-icon .marvel-rank-img[src*="marvel-rank-silver"] {
  top: -9% !important;
  left: -1% !important;
  width: 118% !important;
  height: 118% !important;
}
.adaptive-calc-wrap[data-game="marvel"] .rank-chip-icon .marvel-rank-img[src*="marvel-rank-gold"],
.adaptive-calc-wrap[data-game="marvel"] .rank-chip-icon .marvel-rank-img[src*="marvel-rank-platinum"] {
  top: -6% !important;
  left: 0 !important;
  width: 112% !important;
  height: 112% !important;
}

/* Pas d'aspect-ratio global pour éviter conflit avec position:absolute dans les badges */

/* --- 3. CARTE OAA : plus d'encadré extérieur (juste les 2 cartes intérieures) --- */
.adaptive-calc-wrap[data-game="marvel"] .marvel-oaa-rp-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.adaptive-calc-wrap[data-game="marvel"] .marvel-oaa-rp-card .apex-master-rp-side {
  background: rgba(10,16,10,0.5);
  border-color: rgba(88,190,82,0.30);
}
.adaptive-calc-wrap[data-game="marvel"] .marvel-oaa-rp-card .apex-master-rp-side.current {
  border-color: rgba(255,68,221,0.42);
}
.adaptive-calc-wrap[data-game="marvel"] .marvel-oaa-rp-card .apex-master-rp-side.desired {
  border-color: rgba(255,241,118,0.55);
  box-shadow: 0 0 0 1px rgba(255,241,118,0.16);
}
.adaptive-calc-wrap[data-game="marvel"] .marvel-oaa-rp-card .apex-master-rp-arrow {
  color: rgba(88,190,82,0.55) !important;
}

/* --- 4. CHIPS OAA (Top 500 / Decay / Premium) --- */
.marvel-oaa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  padding: 0;
}
.marvel-oaa-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.78rem;
  border-radius: 999px;
  background: rgba(88,190,82,0.08);
  border: 1px solid rgba(88,190,82,0.24);
  color: rgba(230,240,228,0.92);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: all 200ms ease;
}
.marvel-oaa-chip:hover {
  background: rgba(88,190,82,0.13);
  border-color: rgba(88,190,82,0.42);
  transform: translateY(-1px);
}
.marvel-oaa-chip-ico {
  font-size: 0.92rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
@media (max-width: 520px) {
  .marvel-oaa-chips { gap: 0.4rem; }
  .marvel-oaa-chip { padding: 0.38rem 0.65rem; font-size: 0.72rem; }
}

/* --- 5. AMBIANCE sur la page produit Marvel (hero/header) --- */
body[data-game-page="marvel"] .game-hero-section,
body[data-game-page="marvel"] .game-modes-section {
  background:
    radial-gradient(ellipse 800px 500px at 15% 0%, rgba(88,190,82,0.07), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 30%, rgba(88,190,82,0.045), transparent 60%);
}

/* ==========================================================================
   HERO PROFICIENCY BOOST — Nouveau calculateur (toutes les pages concernées)
   ========================================================================== */

/* Grille des 2 cartes Level avec flèche au milieu */
.level-cards-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.9rem;
  align-items: stretch;
  margin: 0.6rem 0 1.2rem;
}
@media (max-width: 640px) {
  .level-cards-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .level-cards-arrow { transform: rotate(90deg); margin: 0 auto; }
}

/* Carte Level (start ou target) */
.level-card {
  background: linear-gradient(155deg, rgba(20,22,28,0.95), rgba(14,16,22,0.95));
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.05rem 1rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  overflow: hidden;
  transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}
.level-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 0%, var(--accent-game-soft, rgba(212,175,55,0.08)), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.level-card > * { position: relative; z-index: 1; }
.level-card-current {
  border-color: rgba(150,150,165,0.28);
}
.level-card-target {
  border-color: var(--accent-game, var(--premium));
  box-shadow: 0 0 0 1px var(--accent-game-soft, rgba(212,175,55,0.18)),
              0 8px 24px -10px var(--accent-game-soft, rgba(212,175,55,0.3));
}
.level-card-lord {
  border-color: #ffd54a;
  box-shadow: 0 0 0 1px rgba(255,213,74,0.22),
              0 10px 32px -10px rgba(255,213,74,0.4);
  background: linear-gradient(155deg, rgba(40,32,12,0.95), rgba(20,16,8,0.95));
}
.level-card-lord::before {
  background: radial-gradient(circle at 30% 0%, rgba(255,213,74,0.18), transparent 60%);
}

/* Label "Niveau actuel" / "Niveau souhaité" */
.level-card-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}

/* Stepper (− valeur +) */
.level-card-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.level-step-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 180ms ease;
  user-select: none;
  flex-shrink: 0;
}
.level-step-btn:hover {
  border-color: var(--accent-game, var(--premium));
  background: var(--accent-game-soft, rgba(212,175,55,0.1));
  transform: scale(1.05);
}
.level-step-btn:active { transform: scale(0.95); }

/* Valeur + préfixe */
.level-card-value-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 110px;
  justify-content: center;
  padding: 0.45rem 0.5rem;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.level-card-prefix {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1;
}
.level-card-lord .level-card-prefix {
  font-size: 1.15rem;
  letter-spacing: 0;
  filter: drop-shadow(0 1px 3px rgba(255,213,74,0.5));
}
.level-card-input {
  background: transparent;
  border: none;
  outline: none;
  width: 64px;
  text-align: center;
  font-size: 1.55rem;
  font-weight: 800;
  font-family: var(--font-display, inherit);
  color: var(--text);
  line-height: 1;
  padding: 0;
  -moz-appearance: textfield;
}
.level-card-input::-webkit-outer-spin-button,
.level-card-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.level-card-target .level-card-input {
  color: var(--accent-game, var(--premium));
}
.level-card-lord .level-card-input {
  color: #ffd54a;
  text-shadow: 0 0 12px rgba(255,213,74,0.4);
}

/* Slider fin sous le stepper */
.level-card-slider {
  width: 100%;
  margin-top: 0.2rem;
}

/* Flèche entre les 2 cartes */
.level-cards-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-game, var(--premium));
  filter: drop-shadow(0 0 8px var(--accent-game-soft, rgba(212,175,55,0.4)));
}

/* Badge LORD en bas à droite de la carte target */
.level-lord-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #ffd54a, #d4a017);
  color: #1a1407;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 0.22rem 0.5rem;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(255,213,74,0.4);
  z-index: 2;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

/* ==========================================================================
   Barre de progression Level 1 → Lord (visualisation du chemin)
   ========================================================================== */
.level-progress-track {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  margin: 1.4rem 0.4rem 2.2rem;
  overflow: visible;
}
.level-progress-fill-current {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.28));
  border-radius: 999px;
  transition: width 240ms ease;
}
.level-progress-fill-target {
  position: absolute;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-game, var(--premium)), #ffd54a);
  border-radius: 999px;
  transition: left 240ms ease, width 240ms ease;
  box-shadow: 0 0 10px var(--accent-game-soft, rgba(212,175,55,0.4));
}
.level-progress-marker {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  background: var(--text);
  border: 3px solid var(--bg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left 240ms ease;
  z-index: 2;
  margin-left: 0;
}
/* Le marker de départ reste visible même à 0% (pas coupé à gauche) */
.level-progress-track .level-progress-marker:not(.level-progress-marker-end) {
  min-width: 16px;
}
.level-progress-marker-end {
  background: linear-gradient(135deg, #ffd54a, var(--accent-game, var(--premium)));
  width: 18px;
  height: 18px;
  box-shadow: 0 0 12px rgba(255,213,74,0.5);
}
.level-progress-tick {
  position: absolute;
  bottom: -22px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
  left: 0;
  transform: none;
}
.level-progress-tick-end {
  right: 0;
  left: auto;
  transform: none;
  color: #ffd54a;
}
.level-progress-tick span { display: inline-block; }

/* ==========================================================================
   SEASON COUNTDOWN — Compteur de fin de saison (haut à droite du header)
   ========================================================================== */
/* ==========================================================================
   SEASON COUNTDOWN — Compteur premium avec cadre doré (en haut à droite du header)
   ==========================================================================
   Stratégie d'intégration :
   - Le header reste centré (titre au milieu)
   - Le compteur est positionné absolute en haut à droite du header
   - Il est compact (n'écrase pas le titre, qui peut passer dessous si nécessaire)
   - Cadre doré premium qui contraste avec n'importe quelle couleur de jeu
   ========================================================================== */
.adaptive-mode-header {
  position: relative;
}
.season-countdown {
  position: absolute;
  top: 50%;
  right: 1.1rem;
  transform: translateY(-50%);
  width: 232px;
  padding: 0;
  border-radius: 14px;
  overflow: visible;
  z-index: 5;
  background: transparent;
  border: none;
  transition: transform 240ms ease;
}
.season-countdown:hover {
  transform: translateY(calc(-50% - 2px));
}

/* Cadre doré premium : double bordure (anneau extérieur + glow) */
.season-countdown-frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* Bordure dorée gradient (or clair → or chaud → or clair) */
  background:
    linear-gradient(135deg,
      #f5d76e 0%,
      #d4af37 30%,
      #b8941e 50%,
      #d4af37 70%,
      #f5d76e 100%);
  /* Trick : on fait apparaitre uniquement la bordure via mask soustractif */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1.5px;
  /* Glow doré subtil autour */
  filter: drop-shadow(0 0 6px rgba(212,175,55,0.35));
}

/* Contenu interne : transparent pour se fondre dans le header */
.season-countdown-inner {
  position: relative;
  z-index: 1;
  padding: 0.7rem 0.9rem 0.7rem;
  border-radius: inherit;
  background: transparent;
}

/* Header du compteur : icône + label "FIN DE SAISON" en or */
.season-countdown-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: #f0c860;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  text-shadow: 0 0 8px rgba(212,175,55,0.4);
}
.season-countdown-icon { display: inline-flex; }

/* Nom de la saison (ex: "Season 8 · Ranked") */
.season-countdown-name {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.55rem;
  line-height: 1.25;
  font-family: var(--font-display, inherit);
  text-align: center;
}
.season-countdown-sub {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-dim);
}

/* Timer : 3 blocs Days / Hours / Minutes séparés par ":" */
.season-countdown-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
}
.sc-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0.1rem;
}
.sc-num {
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: 1.35rem;
  font-weight: 800;
  color: #f5d76e;
  line-height: 1;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 10px rgba(245,215,110,0.25);
}
.sc-unit {
  font-size: 0.56rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.2rem;
}
.sc-sep {
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: 1.1rem;
  font-weight: 800;
  color: rgba(212,175,55,0.55);
  line-height: 1;
  padding-bottom: 0.5rem; /* aligne avec les chiffres, pas les labels */
}

/* Saison terminée : message au lieu du timer */
.season-countdown-ended .sc-num,
.season-countdown-ended .sc-sep { color: var(--text-dim); }
.sc-ended {
  display: block;
  text-align: center;
  width: 100%;
  font-size: 0.82rem;
  font-weight: 700;
  color: #f5d76e;
  padding: 0.35rem 0;
  letter-spacing: 0.02em;
}

/* Urgence : < 3 jours → cadre passe en rouge pulsant */
.season-countdown-urgent .season-countdown-frame {
  background:
    linear-gradient(135deg,
      #ff8a8a 0%,
      #ff4444 30%,
      #cc2222 50%,
      #ff4444 70%,
      #ff8a8a 100%);
  filter: drop-shadow(0 0 8px rgba(255,80,80,0.5));
  animation: scFramePulse 2s ease-in-out infinite;
}
.season-countdown-urgent .season-countdown-head { color: #ff9090; }
.season-countdown-urgent .sc-num { color: #ffb0b0; text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 12px rgba(255,140,140,0.4); }
.season-countdown-urgent .sc-sep { color: rgba(255,80,80,0.55); }
@keyframes scFramePulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255,80,80,0.35)); }
  50% { filter: drop-shadow(0 0 14px rgba(255,80,80,0.6)); }
}

/* Responsive : sur mobile, le compteur passe sous le titre */
@media (max-width: 760px) {
  .season-countdown {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin: 0.9rem auto 0;
    width: 100%;
    max-width: 280px;
  }
  .season-countdown:hover { transform: translateY(-2px); }
}
/* Tablette : le titre risque de chevaucher → on réduit légèrement */
@media (min-width: 761px) and (max-width: 1024px) {
  .season-countdown {
    width: 200px;
  }
  .sc-num { font-size: 1.2rem; }
}
.game-card-v3-tagline {
  display: none !important;
}
.modes-custom-offer-v5 h3 {
  font-family: var(--font-display);
  margin: 0 0 0.3rem;
  font-size: 1.2rem;
  color: var(--text);
  letter-spacing: 0;
}
.modes-custom-offer-v5 h3 span { color: var(--premium-2, #f0c860); }
.modes-custom-offer-v5 p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.92rem;
}
.modes-custom-offer-v5 button {
  min-height: 44px;
  padding: 0.78rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--premium, #d4af37), var(--premium-2, #f0c860));
  color: #08080b;
  font-weight: 800;
  font-family: var(--font-display);
  cursor: pointer;
}
@media (max-width: 980px) {
  .game-modes-shell-v5 { grid-template-columns: 1fr; }
  .game-modes-visual-v5 { min-height: 260px; }
  .game-modes-trust-row-v5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .game-modes-shell-v5 { padding: 1.2rem; border-radius: 14px; }
  .game-modes-title-v5 { font-size: 2.35rem; }
  .game-modes-actions-v5 { align-items: stretch; }
  .game-modes-primary-v5,
  .game-modes-secondary-v5 { width: 100%; }
  .game-modes-trust-row-v5 { grid-template-columns: 1fr 1fr; }
  .game-modes-visual-v5 { min-height: 210px; }
  .game-modes-visual-card-v5 { width: 100%; left: 0; right: 0; }
  .modes-custom-offer-v5 { grid-template-columns: 1fr; }
  .modes-custom-offer-v5 button { width: 100%; }
}

/* ===== LIVE FEED ===== */
.modes-livefeed-section {
  margin-top: 3rem;
  padding: 1.3rem 1.5rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  animation: sleekFadeIn 0.6s var(--ease) backwards;
  animation-delay: 0.15s;
}
.modes-livefeed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.modes-livefeed-title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}
.livefeed-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  animation: livepulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
.modes-livefeed-tag {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.modes-livefeed-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.modes-livefeed-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.86rem;
  color: var(--text-dim);
  line-height: 1.45;
  padding: 0.15rem 0;
}
.modes-livefeed-text { flex: 1; min-width: 0; }
.live-feed-name { color: var(--text); font-weight: 600; }
.live-feed-stars { color: #f0c860; letter-spacing: 0.05em; }
.live-feed-review { font-style: italic; color: var(--text-dim); }
.modes-livefeed-time {
  font-size: 0.75rem;
  color: var(--text-faint);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
@keyframes livepulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.9); }
}
@keyframes liveFeedSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.modes-livefeed-item-new {
  animation: liveFeedSlideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 720px) {
  .modes-livefeed-section { padding: 1.1rem 1.1rem; margin-top: 2.2rem; }
  .modes-livefeed-item { font-size: 0.8rem; flex-wrap: wrap; gap: 0.3rem; }
  .modes-livefeed-time { font-size: 0.7rem; width: 100%; }
}

/* ===== TESTIMONIALS (modes page) ===== */
.modes-testimonials-section {
  margin-top: 3rem;
  animation: sleekFadeIn 0.6s var(--ease) backwards;
  animation-delay: 0.25s;
}
.modes-testimonials-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem 0;
  color: var(--text);
}
.modes-testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.modes-testimonials-marquee {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.2rem 0;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.modes-testimonials-marquee::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(212,175,55,0.035), transparent 45%, rgba(255,70,85,0.025));
}
.modes-testimonials-track {
  display: flex;
  width: max-content;
  gap: 0.85rem;
  animation: modesReviewsMarquee var(--review-speed, 70s) linear infinite;
}
.modes-testimonials-track.reverse {
  animation-direction: reverse;
  --review-speed: 82s;
}
.modes-testimonials-marquee:hover .modes-testimonials-track {
  animation-play-state: running;
}
@keyframes modesReviewsMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.modes-testimonial-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 1.2rem 1.3rem;
  transition: border-color 240ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.modes-testimonial-card:hover {
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-2px);
}
.modes-testimonials-track .modes-testimonial-card {
  width: clamp(290px, 28vw, 420px);
  min-height: 172px;
  flex: 0 0 auto;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.035), rgba(255,255,255,0.016)),
    radial-gradient(circle at 12% 0%, rgba(212,175,55,0.07), transparent 45%);
}
.modes-testimonial-stars {
  color: #f0c860;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.55rem;
}
.modes-testimonial-quote {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 0.9rem 0;
  font-weight: 400;
}
.modes-testimonial-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.modes-testimonial-author {
  font-size: 0.82rem;
  color: var(--text-dim);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.modes-testimonial-flag {
  font-size: 1rem;
  line-height: 1;
}
.modes-testimonial-tag {
  font-size: 0.7rem;
  color: var(--text-dim);
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  font-weight: 500;
}

@media (max-width: 720px) {
  .modes-testimonials-grid { grid-template-columns: 1fr; }
  .modes-testimonials-title { font-size: 1.2rem; }
  .modes-testimonial-card { padding: 1rem 1.1rem; }
  .modes-testimonials-track .modes-testimonial-card { width: 82vw; }
  .modes-testimonial-quote { font-size: 0.88rem; }
}


.calc-mode-faq {
  background: var(--bg-elev);
  padding: 1.4rem 1.5rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  margin-top: 1.5rem;
}
.mode-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.mode-faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: all 200ms ease;
}
.mode-faq-item:hover {
  border-color: var(--border-strong);
}
.mode-faq-item[open] {
  border-color: var(--accent);
  background: var(--surface-hover);
}
.mode-faq-q {
  padding: 0.75rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  user-select: none;
}
.mode-faq-q::-webkit-details-marker { display: none; }
.mode-faq-q svg {
  color: var(--text-dim);
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.mode-faq-item[open] .mode-faq-q svg {
  transform: rotate(180deg);
  color: var(--accent);
}
.mode-faq-a {
  padding: 0 1rem 0.9rem;
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--text-dim);
}

/* ===== BOOSTER FILTER BAR ===== */
.boosters-filter-bar {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
}
.boosters-filter-pill {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 99px;
  padding: 0.4rem 0.95rem;
  font-size: 0.83rem;
  color: var(--text-dim);
  cursor: pointer;
  font-weight: 500;
  transition: all 180ms ease;
}
.boosters-filter-pill:hover {
  border-color: var(--game-color, var(--accent));
  color: var(--text);
}
.boosters-filter-pill.active {
  background: var(--game-color, var(--accent));
  border-color: var(--game-color, var(--accent));
  color: #fff;
  font-weight: 600;
}

/* ===== BOOSTER CARDS V2 — fines, sobres, pas IA ===== */
.booster-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}
.booster-card-v2 {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem;
  cursor: pointer;
  transition: all 220ms ease;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.booster-card-v2:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -10px rgba(212,175,55,0.4);
}
.booster-card-v2-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  position: relative;
}
.booster-avatar-v2 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  flex-shrink: 0;
}
.booster-card-v2-info { flex: 1; min-width: 0; }
.booster-card-v2-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.booster-card-v2-name h5 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booster-live-dot {
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #4ade80;
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}
.booster-card-v2-rank {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 0.15rem;
}
.booster-tier-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #000;
}
.booster-tier-badge.tier-diamond {
  background: linear-gradient(135deg, #b9f2ff, #5cd3ff);
}
.booster-tier-badge.tier-master {
  background: linear-gradient(135deg, var(--gold), #ffa500);
}
.booster-card-v2-rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
}
.booster-card-v2-rating .stars { color: var(--gold); letter-spacing: 1px; font-size: 0.75rem; }
.booster-card-v2-rating .stars .off { color: var(--border-strong); }
.booster-card-v2-rating strong { color: var(--text); font-size: 0.85rem; }
.booster-card-v2-rating .count { color: var(--text-faint); font-size: 0.72rem; margin-left: auto; }

.booster-card-v2-games {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.bg-game-pill {
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.booster-card-v2-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.booster-card-v2-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.1rem;
}
.booster-card-v2-stats strong {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--accent);
  font-weight: 700;
  line-height: 1;
}
.booster-card-v2-stats span {
  font-size: 0.66rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.booster-card-v2-cta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms ease;
  margin-top: 0.2rem;
}
.booster-card-v2:hover .booster-card-v2-cta {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ===== ADAPTIVE CALC — Layout ===== */
.calc-wrap.adaptive-mode {
  display: block !important;
  overflow: visible !important;
}
.calc-wrap.adaptive-mode + .custom-offer-card {
  display: none;
}
.calc-wrap.adaptive-mode .adaptive-calc-wrap {
  overflow: visible;
}
.calc-wrap.adaptive-mode .calc-main {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
}
.calc-wrap.adaptive-mode .calc-main::before {
  display: none;
}
.adaptive-calc-wrap {
  display: block;
  overflow: visible;
  position: relative;
  isolation: isolate;
  transition: --rank-color 600ms ease;
}
.adaptive-calc-wrap::before {
  content: "";
  position: absolute;
  width: min(1380px, 142%);
  height: min(860px, 102%);
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  opacity: 0.085;
  background-image: var(--ow-bg-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  filter: brightness(0.42) saturate(0.92) contrast(1.04) drop-shadow(0 0 30px rgba(249,158,26,0.08));
}

/* === RANK AMBIENT: dynamic color glow that follows the chosen rank === */
.adaptive-calc-wrap::after {
  content: "";
  position: absolute;
  top: -220px;
  left: -100px;
  right: -100px;
  height: 560px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 62% 42% at 28% 52%, rgba(var(--rank-color-rgb, 212,175,55), 0.10) 0%, transparent 74%),
    radial-gradient(ellipse 52% 36% at 76% 32%, rgba(var(--rank-color-rgb, 212,175,55), 0.075) 0%, transparent 70%);
  opacity: 0.55;
  transition: background 800ms ease, opacity 800ms ease;
}
@keyframes rankAmbientPulse {
  0%   { opacity: 0.30; transform: translateY(0); }
  100% { opacity: 0.48; transform: translateY(-4px); }
}
.adaptive-mode-header {
  margin-bottom: 1.35rem;
  padding: 1.1rem 1.5rem 1.15rem;
  border: none;
  background: transparent;
  border-radius: 16px;
  text-align: center;
  position: relative;
  isolation: isolate;
}
/* Fond radial très flou — aucune bordure, juste un halo coloré qui s'estompe */
.adaptive-mode-header::before {
  content: '';
  position: absolute;
  inset: -8px; /* déborde un peu pour adoucir les bords */
  border-radius: 24px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 100% at 50% 50%,
      rgba(var(--game-color-rgb, 212,175,55), 0.13) 0%,
      rgba(var(--game-color-rgb, 212,175,55), 0.07) 40%,
      rgba(var(--game-color-rgb, 212,175,55), 0.02) 70%,
      transparent 92%);
  filter: blur(0.5px);
}
.adaptive-mode-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(180px, 45%);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rank-color, var(--premium)), transparent);
  border-radius: 2px;
  opacity: 0.85;
  transition: background 600ms ease;
}

/* Game eyebrow above the mode title */
.adaptive-game-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(var(--game-color-rgb, 212,175,55), 0.25);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--game-color, var(--text-dim));
}
.adaptive-game-eyebrow .game-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--game-color, var(--premium));
  box-shadow: 0 0 8px var(--game-color, var(--premium));
  animation: gameDotPulse 2.4s ease-in-out infinite;
}
@keyframes gameDotPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
@media (min-width: 1101px) {
  .adaptive-mode-header {
    padding-right: calc(380px + 2.6rem);
  }
}
.adaptive-mode-title {
  font-family: var(--font-display);
  font-size: 1.62rem;
  font-weight: 700;
  margin: 0 0 0.45rem 0;
  letter-spacing: 0.01em;
  color: var(--game-color, #fff);
}
.adaptive-mode-desc {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.65;
}
.adaptive-calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 2.6rem;
  margin-top: 0;
  align-items: start;
}
@media (max-width: 960px) {
  .adaptive-calc-grid {
    grid-template-columns: 1fr;
  }
  .adaptive-summary {
    position: static !important;
    width: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    top: auto !important;
    right: auto !important;
  }
  .adaptive-side-column {
    position: static !important;
    width: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    top: auto !important;
    right: auto !important;
  }
}
.adaptive-side-column {
  position: sticky !important;
  top: 96px !important;
  align-self: start;
  width: 100%;
  max-height: none;
  overflow-y: visible;
  scrollbar-width: none;
  z-index: 50;
}
.adaptive-summary {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 8px 32px -10px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 545px;
}
.adaptive-side-column::-webkit-scrollbar { display: none; }

/* ===== Récap fadeout : quand l'utilisateur a scrollé au-delà des options
   le récap s'estompe doucement pour libérer la place à la FAQ centrée ===== */
.adaptive-summary.summary-fade-out,
.adaptive-side-column.summary-fade-out {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease;
}
.adaptive-summary,
.adaptive-side-column {
  transition: opacity 320ms ease, transform 320ms ease;
}

/* ============================================================
   BOUTON PRÉCÉDENT (haut de la page calc)
   ============================================================ */
.calc-top-row {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  margin-bottom: 1.15rem;
}

/* Modes bar en haut, sur la ligne du bouton précédent */
.calc-modes-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: 1;
  justify-content: flex-start;
  min-width: 0;
  order: 2;
}
.calc-modes-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  background:
    linear-gradient(135deg, rgba(212,175,55,0.08), rgba(255,255,255,0.025)),
    var(--surface);
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 999px;
  color: rgba(255,255,255,0.82);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}
.calc-modes-bar-item:hover {
  background: rgba(212,175,55,0.06);
  border-color: rgba(212,175,55,0.4);
  color: var(--premium);
  transform: translateY(-1px);
}
@media (max-width: 720px) {
  .calc-top-row { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .calc-modes-bar { gap: 0.3rem; }
  .calc-modes-bar-item { padding: 0.4rem 0.7rem; font-size: 0.72rem; }
}

/* Bouton Précédent VOYANT */
.calc-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms ease;
  margin-bottom: 0;
  margin-left: 0;
  align-self: flex-start;
  order: 1;
}
.calc-back-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
  color: var(--text);
  transform: translateX(-2px);
}
.calc-back-btn svg {
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.calc-back-btn:hover svg {
  transform: translateX(-2px);
}
@media (max-width: 520px) {
  .calc-back-btn {
    padding: 0.5rem 0.85rem 0.5rem 0.7rem;
    font-size: 0.8rem;
  }
}

/* Variante "prominent" : version sobre blanc/transparent */
.calc-back-btn-prominent {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.18);
  color: var(--text);
  font-weight: 700;
  padding: 0.65rem 1.1rem 0.65rem 0.9rem;
  box-shadow: none;
}
.calc-back-btn-prominent:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.35);
  color: var(--text);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transform: translateX(-3px);
}

/* ============================================================
   RANK CARDS — 2 cards côte à côte (BoostingMarket-style)
   ============================================================ */
.rank-cards-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1.5rem;
  position: relative;
  isolation: isolate;
}
.rank-cards-row::before {
  content: none;
}
.rank-cards-row {
  position: relative;
  isolation: isolate;
}
.rank-cards-row::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(780px, 82%);
  height: 280px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 58% 42% at 50% 44%, rgba(var(--rank-color-rgb, 212,175,55), 0.15), transparent 74%),
    radial-gradient(ellipse 44% 32% at 50% 70%, rgba(255,255,255,0.055), transparent 80%);
  filter: none;
  opacity: 0.88;
}
.rank-card {
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.2rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.rank-card > * {
  position: relative;
  z-index: 1;
}
.rank-card::before {
  content: "";
  position: absolute;
  inset: -22px -18px auto;
  height: 150px;
  pointer-events: none;
  z-index: 0;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 62% 42% at 50% 12%, rgba(var(--rank-color-rgb, 212,175,55), 0.18), transparent 72%),
    radial-gradient(ellipse 36% 28% at 18% 26%, rgba(255,255,255,0.075), transparent 70%);
  filter: none;
  opacity: 0.74;
}
.rank-card:hover {
  border-color: var(--border-strong);
}

/* Card du rang cible : highlight dynamique selon la couleur du rang */
.rank-card-target {
  border-color: rgba(var(--rank-color-rgb, 212,175,55), 0.30);
  background: linear-gradient(180deg, rgba(var(--rank-color-rgb, 212,175,55), 0.06) 0%, var(--bg-elev) 70%);
  transition: background 600ms ease, border-color 600ms ease, box-shadow 600ms ease;
}
.rank-card-target::before {
  opacity: 0.92;
  background:
    radial-gradient(ellipse 66% 46% at 50% 12%, rgba(var(--rank-color-rgb, 212,175,55), 0.26), transparent 72%),
    radial-gradient(ellipse 34% 26% at 82% 28%, rgba(255,255,255,0.09), transparent 70%);
}
.rank-card-target:hover {
  border-color: rgba(var(--rank-color-rgb, 212,175,55), 0.55);
  box-shadow: 0 8px 30px rgba(var(--rank-color-rgb, 212,175,55), 0.16);
}
.rank-card-target .rank-card-label {
  color: var(--rank-color, var(--premium));
  transition: color 600ms ease;
}
.rank-card-target .rank-card-name {
  background: linear-gradient(135deg, var(--rank-color, var(--premium)), var(--rank-color, var(--premium-2)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: brightness(1.15);
  transition: background 600ms ease;
}
.rank-card-target.rank-card-empty {
  border-color: rgba(var(--rank-color-rgb, 212,175,55), 0.18);
}
.rank-card-target.rank-card-empty .rank-card-name {
  background: none;
  color: rgba(255,255,255,0.86);
  filter: none;
}
.rank-card-placeholder-dot {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.76);
  font-size: 1.35rem;
  font-weight: 900;
}
.rank-card-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.rank-card-badge {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
  position: relative;
  overflow: visible;
}
.rank-card-badge svg {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.rank-card-badge .ow-rank-img,
.calc-mode-banner-icon .ow-rank-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
  border-radius: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.rank-card-badge img,
.rank-card-badge svg,
.rank-chip-icon img,
.rank-chip-icon svg,
.calc-mode-banner-icon img,
.calc-mode-banner-icon svg {
  opacity: 1 !important;
  filter:
    brightness(1.24)
    saturate(1.14)
    contrast(1.08)
    drop-shadow(0 0 12px rgba(var(--rank-color-rgb, 212,175,55), 0.30))
    drop-shadow(0 5px 10px rgba(0,0,0,0.58)) !important;
}
.rank-card-info {
  flex: 1;
  min-width: 0;
}
.rank-card-label {
  font-size: 0.7rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.rank-card-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}
.rank-card-div {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 0.1rem;
}
.rank-cards-arrow {
  display: grid;
  place-items: center;
  padding: 0 0.4rem;
}

/* Rank chips en 2 lignes empilées */
.rank-grid-2rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rank-grid-2rows .rank-row {
  display: grid;
  justify-content: center;
  gap: 0.35rem;
}
.rank-grid-2rows .rank-row .rank-chip-icon {
  width: 58px;
  height: 46px;
  padding: 3px;
}
.rank-grid-2rows .rank-row .rank-chip-icon svg,
.rank-grid-2rows .rank-row .rank-chip-icon .val-rank-img,
.rank-grid-2rows .rank-row .rank-chip-icon .ow-rank-img,
.rank-grid-2rows .rank-row .rank-chip-icon .apex-rank-img,
.rank-grid-2rows .rank-row .rank-chip-icon .marvel-rank-img,
.rank-grid-2rows .rank-row .rank-chip-icon .lol-rank-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* Div chips dans les rank-cards */
.rank-card .div-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}
.rank-card .div-chip {
  width: 50px;
  min-width: 50px;
  height: 34px;
}

/* ============================================================
   CONSOLE / PLATFORM SVG ICONS
   ============================================================ */
.console-icon-svg {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--text);
  transition: color 180ms ease;
}
.console-icon-svg svg {
  width: 100%;
  height: 100%;
}
.console-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.console-icon-svg.playstation svg {
  color: #0070cc;
}
.console-icon-svg.xbox svg {
  color: #107c10;
}
.console-option.active .console-icon-svg {
  color: var(--accent);
}
.console-option.active .console-icon-svg.playstation svg {
  color: #2d9cff;
}
.console-option.active .console-icon-svg.xbox svg {
  color: #46d246;
}

/* ============================================================
   CUSTOM REQUEST CTA (sous les options)
   ============================================================ */
.custom-request-cta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(240,216,120,0.05));
  border: 1.5px dashed rgba(212,175,55,0.4);
  border-radius: 14px;
  cursor: pointer;
  transition: all 200ms ease;
  text-align: left;
  color: var(--text);
  font-family: inherit;
}
.custom-request-cta:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(212,175,55,0.14), rgba(240,216,120,0.08));
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px rgba(212,175,55,0.5);
}
.custom-request-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.custom-request-text { flex: 1; min-width: 0; }
.custom-request-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
  font-family: var(--font-display);
}
.custom-request-desc {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.custom-request-arrow {
  font-size: 1.2rem;
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.custom-request-cta:hover .custom-request-arrow {
  transform: translateX(4px);
}

/* ============================================================
   FAQ CENTRÉE (déborde sur la zone du sidebar quand celui-ci fade)
   ============================================================ */
@media (min-width: 1101px) {
  .calc-mode-faq {
    /* La FAQ déborde à droite pour occuper toute la largeur visible
       (le sidebar fixe à droite est masqué via IntersectionObserver) */
    margin-right: calc(-320px - 1.3rem);
    max-width: none;
  }
  .calc-mode-faq .mode-faq-list {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .calc-mode-faq .calc-section-title {
    text-align: center;
    font-size: 0.95rem;
  }
}

/* ============================================================
   RESPONSIVE — Mobile : rank cards en colonnes
   ============================================================ */
@media (max-width: 720px) {
  .rank-cards-row {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .rank-cards-arrow {
    transform: rotate(90deg);
    padding: 0.3rem 0;
  }
  .rank-card-name {
    font-size: 1.15rem;
  }
  .rank-card-badge {
    width: 56px;
    height: 56px;
  }
  .rank-card-badge svg {
    width: 38px;
    height: 38px;
  }
}
@media (max-width: 1100px) {
  .calc-mode-faq {
    margin-right: 0;
  }
}

/* Banner économies vs concurrence */
.summary-savings-banner {
  background: rgba(255,182,54,0.08);
  border: 1px solid rgba(255,182,54,0.25);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--text-dim);
}
.summary-savings-banner strong {
  color: var(--gold);
  font-weight: 700;
}

/* Header avec ETA */
.summary-head-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.1rem;
}
.summary-head-v2 h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.summary-eta {
  font-size: 0.7rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.summary-eta strong { color: var(--text); font-weight: 600; }

/* Tabs Solo/Duo */
.summary-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.42rem;
  background: var(--bg);
  padding: 0.3rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.summary-mode-tab {
  background: transparent;
  border: none;
  padding: 0.62rem 0.55rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 9px;
  transition: all 180ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}
.summary-mode-tab:hover { color: var(--text); }
.summary-mode-tab.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.summary-mode-help {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(212,175,55,0.35);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}
.summary-inline-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-top: 0.55rem;
}
.summary-inline-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.58rem 0.62rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.summary-inline-option:hover {
  border-color: rgba(212,175,55,0.32);
  background: rgba(255,255,255,0.04);
}
.summary-inline-option.active {
  border-color: rgba(74,222,128,0.42);
  background: linear-gradient(135deg, rgba(34,197,94,0.105), rgba(255,255,255,0.025));
  box-shadow: inset 0 0 0 1px rgba(74,222,128,0.10);
}
.summary-inline-check {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(0,0,0,0.28);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.summary-inline-option.active .summary-inline-check {
  border-color: #4ade80;
  background: #22c55e;
}
.summary-inline-option.active .summary-inline-check::before {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid #06100a;
  border-bottom: 2px solid #06100a;
  transform: rotate(-45deg) translateY(-1px);
}
.summary-inline-option strong,
.summary-inline-option small {
  display: block;
  min-width: 0;
}
.summary-inline-option strong {
  font-size: 0.74rem;
  line-height: 1.1;
}
.summary-inline-option small {
  margin-top: 0.12rem;
  color: var(--text-faint);
  font-size: 0.61rem;
  line-height: 1.15;
}
.mode-tab-bonus {
  font-size: 0.55rem;
  background: rgba(212,175,55,0.2);
  color: var(--accent);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 700;
}

/* Lignes du récap */
.summary-lines-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.adaptive-summary .summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.32rem 0;
  font-size: 0.74rem;
  gap: 0.4rem;
  border: none;
}
.adaptive-summary .summary-line .lbl {
  color: var(--text-dim);
  flex: 1;
  min-width: 0;
}
.adaptive-summary .summary-line .val {
  font-weight: 600;
  font-size: 0.76rem;
  color: var(--text);
  flex-shrink: 0;
}

/* Sections collapsibles (booster spécifique, code promo) */
.summary-collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 180ms ease;
  width: 100%;
}
.summary-collapsible:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
}
.summary-collapsible svg {
  color: var(--text-dim);
  transition: transform 200ms ease;
  width: 12px;
  height: 12px;
}
.summary-collapsible.open svg {
  transform: rotate(180deg);
  color: var(--accent);
}
.summary-collapsible-content {
  padding: 0.4rem 0.1rem 0.2rem;
}
.promo-input-wrap {
  display: flex;
  gap: 0.35rem;
}
.promo-input-wrap input {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.promo-input-wrap input:focus {
  outline: none;
  border-color: var(--accent);
}
.promo-input-wrap .btn-sm {
  padding: 0.4rem 0.7rem;
  font-size: 0.74rem;
}
.promo-msg {
  font-size: 0.7rem;
  margin-top: 0.3rem;
  min-height: 1em;
}
.promo-msg.success { color: #4ade80; }
.promo-msg.error { color: #f87171; }

/* Discount banner */
.summary-discount-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.55rem;
  background: rgba(240,216,120,0.08);
  border: 1px solid rgba(240,216,120,0.2);
  border-radius: 6px;
  font-size: 0.72rem;
  color: var(--accent-2);
}

.summary-upsell-line {
  display: none;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.7rem 0.78rem;
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(212,175,55,0.09), rgba(255,255,255,0.025)),
    rgba(255,255,255,0.02);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.35;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.summary-upsell-line .upsell-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.32rem;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(212,175,55,0.45);
  flex-shrink: 0;
}
.summary-upsell-line strong {
  color: var(--accent);
  font-weight: 800;
}

/* Total */
.summary-total-v2 {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
.summary-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.summary-total-row .lbl {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.summary-total-row .val {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
.summary-total-row .val small {
  font-size: 0.95rem;
  color: var(--text-dim);
  font-weight: 700;
  margin-left: 0.15rem;
}

/* CTAs */
.summary-cta {
  width: 100%;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.2rem;
  padding: 0.74rem 1rem;
  font-size: 0.9rem;
  font-weight: 800;
}
.summary-cta .checkout-price {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}
.summary-cta-secondary {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.75rem;
  text-align: center;
  cursor: pointer;
  padding: 0.3rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.summary-cta-secondary:hover { color: var(--accent); }

.summary-payment-strip {
  margin-top: 0.85rem;
  padding: 0.82rem 0.9rem 0.78rem;
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.038), rgba(255,255,255,0.014)),
    rgba(0,0,0,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.summary-payment-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.4rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.summary-payment-shield {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: rgba(61,214,255,0.12);
  border-radius: 8px;
  color: #3dd6ff;
  flex-shrink: 0;
}
.summary-payment-shield svg {
  width: 14px;
  height: 14px;
}
.summary-payment-copy {
  margin: 0 0 0.7rem 0;
  color: var(--text-dim);
  font-size: 0.74rem;
  line-height: 1.4;
}
.summary-payment-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.36rem;
  margin-bottom: 0.62rem;
}
.summary-payment-logos .pay-svg {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 23px;
  line-height: 0;
  flex-shrink: 0;
  border-radius: 7px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  box-shadow: 0 6px 18px -14px rgba(0,0,0,0.75);
  transition: transform 200ms ease, filter 200ms ease, border-color 200ms ease;
}
.summary-payment-logos .pay-svg svg {
  display: block;
  width: 100%;
  height: 100%;
}
.summary-payment-logos .pay-svg::before {
  content: none;
  width: 100%;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.summary-payment-logos .pay-svg[aria-label="PayPal"]::before {
  background-image: url('/elevateboost-assets/pay-paypal.png');
}
.summary-payment-logos .pay-svg[aria-label="Mastercard"]::before {
  background-image: url('/elevateboost-assets/pay-mastercard.png');
}
.summary-payment-logos .pay-svg[aria-label="Visa"]::before {
  background-image: url('/elevateboost-assets/pay-visa.png');
}
.summary-payment-logos .pay-svg[aria-label="American Express"]::before {
  background-image: url('/elevateboost-assets/pay-amex.png');
}
.summary-payment-logos .pay-svg[aria-label="Apple Pay"] {
  background: #050505;
}
.summary-payment-logos .pay-svg[aria-label="Apple Pay"]::before {
  background-image: url('/elevateboost-assets/pay-applepay.png');
}
.summary-payment-logos .pay-svg[aria-label="Google Pay"]::before {
  background-image: url('/elevateboost-assets/pay-googlepay.png');
}
.summary-payment-logos .pay-svg[aria-label="Bitcoin"] {
  background: #f7931a;
}
.summary-payment-logos .pay-svg[aria-label="Bitcoin"]::before {
  content: "₿";
  display: grid;
  place-items: center;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  background-image: none;
}
.summary-payment-logos .pay-svg:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.summary-payment-logos .pay-svg[aria-label="Bitcoin"]::before {
  content: none !important;
  display: none !important;
}
.summary-payment-logos .pay-svg[aria-label="Bitcoin"] {
  background: linear-gradient(135deg, #f7931a, #ffad3d);
}
.summary-payment-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.66rem;
  color: var(--text-dim);
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.summary-payment-trust span {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.calc-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 700px) {
  .calc-row-2col { grid-template-columns: 1fr; }
}

/* ===== Package Cards (wins, placements, coaching, etc.) ===== */
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.7rem;
}
.package-grid.placement-pkg {
  grid-template-columns: repeat(2, 1fr);
}
.package-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1rem 0.8rem;
  cursor: pointer;
  transition: all 200ms ease;
  text-align: center;
  position: relative;
  color: var(--text);
  font-family: var(--font-body);
}
.package-card:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
  transform: translateY(-2px);
}
.package-card.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(240,216,120,0.05));
  box-shadow: 0 0 0 2px rgba(212,175,55,0.3);
}
.package-card.popular {
  border-color: var(--gold);
}
.package-card .popular-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--gold), #ffa500);
  color: #000;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  letter-spacing: 0.05em;
}
.package-card .package-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.package-card .package-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
}
.package-card .package-price {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

/* ===== Coach Tier Cards ===== */
.coach-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.6rem;
}
.coach-tier-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 0.8rem;
  cursor: pointer;
  transition: all 200ms ease;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text);
  min-width: 0;
}
.coach-tier-card .coach-tier-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.coach-tier-card .coach-tier-head strong {
  flex: 0 1 auto;
  text-align: center;
}
.coach-tier-card:hover {
  border-color: var(--accent);
}
.coach-tier-card.active {
  border-color: var(--accent);
  background: rgba(212,175,55,0.1);
}
.coach-tier-card strong {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: break-word;
}
.coach-tier-card .mult {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
}
.coach-tier-card.active .mult {
  color: var(--accent);
}

/* ===== Carte coach PREMIUM (titre doré + animation sweep, comme les options) ===== */
.coach-tier-card-premium {
  position: relative;
  overflow: hidden;
  border-color: rgba(212,175,55,0.4);
}
.coach-tier-card-premium strong {
  background: linear-gradient(135deg, #f0d878, #d4af37);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.coach-tier-card-premium:hover {
  border-color: rgba(212,175,55,0.6);
}
.coach-tier-card-premium.active {
  border-color: var(--premium);
  background: rgba(212,175,55,0.08);
  box-shadow: 0 0 0 1px var(--premium), 0 0 24px rgba(212,175,55,0.16), 0 4px 14px rgba(212,175,55,0.18);
}
.coach-tier-card-premium::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0%, rgba(212,175,55,0.18) 35%, rgba(255,238,160,0.34) 50%, rgba(212,175,55,0.18) 65%, transparent 100%);
  transform: translateX(-120%);
  pointer-events: none;
  opacity: 0;
}
.coach-tier-card-premium:hover::before,
.coach-tier-card-premium.active::before {
  opacity: 1;
  animation: premiumOptionSweep 2.2s ease-in-out infinite;
}
.coach-tier-card-premium > * {
  position: relative;
  z-index: 1;
}

/* ===== Mode FAQ (sous chaque calculateur) ===== */
.mode-faq-section { margin-top: 1.2rem; }
.mode-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.mode-faq-item {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.mode-faq-item:hover { border-color: rgba(212,175,55, 0.5); transform: translateY(-1px); }
.mode-faq-item[open] {
  border-color: rgba(212,175,55, 0.6);
  background: var(--bg-elev-2);
  box-shadow: 0 8px 26px rgba(0,0,0,0.25);
}
.mode-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--text);
  list-style: none;
  transition: color 200ms ease;
}
.mode-faq-item[open] .mode-faq-q { color: #f0c860; }
.mode-faq-q::-webkit-details-marker { display: none; }
.mode-faq-chevron {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 7px;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  color: #f0c860;
  transition: transform 300ms ease, background 220ms ease, border-color 220ms ease, color 220ms ease;
}
.mode-faq-item:hover .mode-faq-chevron { border-color: rgba(212,175,55, 0.6); }
.mode-faq-item[open] .mode-faq-chevron {
  transform: rotate(180deg);
  background: linear-gradient(135deg, #d4af37, #f0c860);
  border-color: transparent;
  color: #1a1408;
}
.mode-faq-a {
  padding: 0 1.2rem 1.15rem 1.2rem;
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.65;
}

/* ===== Badges Apex : slot pour logo + animation gold ===== */
.badge-logo-slot {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.badge-logo-slot::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}
/* Quand l'image existe (background-image set par data-badge-id), on cache le placeholder */
.badge-logo-slot[style*="background-image"]::before { display: none; }

.package-grid-badges .badge-logo-slot {
  display: none !important;
}

.package-grid-badges {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.package-grid-badges .package-card {
  position: relative;
  min-height: 96px;
  padding-top: 1rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.package-grid-badges .package-name {
  max-width: 92%;
  margin: 0 auto;
  line-height: 1.28;
}
.package-checkmark {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #0a0a0a;
  font-size: 0.85rem;
  font-weight: 800;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.6);
}
.package-card.package-gold .package-checkmark {
  background: linear-gradient(135deg, #f7d670 0%, #d4af37 100%);
}

/* === Animation gold (même style que les options gold Overwatch) === */
@keyframes goldShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.package-card.package-gold {
  border-color: rgba(212,175,55,0.45);
  background: linear-gradient(110deg, rgba(212,175,55,0.06) 0%, rgba(212,175,55,0.12) 30%, rgba(212,175,55,0.06) 60%, rgba(212,175,55,0.12) 100%);
  background-size: 200% 100%;
  animation: goldShimmer 6s linear infinite;
}
.package-card.package-gold:hover {
  border-color: #d4af37;
  box-shadow: 0 0 0 1px rgba(212,175,55,0.3), 0 0 20px rgba(212,175,55,0.15);
}
.package-card.package-gold.active {
  border-color: #d4af37;
  background: linear-gradient(110deg, rgba(212,175,55,0.18) 0%, rgba(212,175,55,0.28) 30%, rgba(212,175,55,0.18) 60%, rgba(212,175,55,0.28) 100%);
  background-size: 200% 100%;
  animation: goldShimmer 5s linear infinite;
  box-shadow: 0 0 0 1px #d4af37, 0 0 24px rgba(212,175,55,0.25);
}

/* === Compteur badges multi === */
.badges-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
  padding: 0.45rem 0.75rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.badges-counter strong { color: var(--text); }
.badges-clear-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  transition: background 150ms ease;
}
.badges-clear-btn:hover { background: rgba(212,175,55,0.1); }

/* === Bouton "Demande personnalisée" === */
.badges-custom-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, rgba(255,51,68,0.08) 0%, rgba(155,48,255,0.06) 100%);
  border: 1.5px solid rgba(255,51,68,0.25);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 200ms ease;
  color: var(--text);
}
.badges-custom-cta:hover {
  border-color: rgba(255,51,68,0.6);
  background: linear-gradient(135deg, rgba(255,51,68,0.14) 0%, rgba(155,48,255,0.10) 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,51,68,0.15);
}
.badges-custom-cta-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.badges-custom-cta-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.badges-custom-cta-text strong { font-size: 0.95rem; font-weight: 700; }
.badges-custom-cta-text span { font-size: 0.82rem; color: var(--text-dim); }
.badges-custom-cta-arrow {
  font-size: 1.4rem;
  color: rgba(255,51,68,0.7);
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.badges-custom-cta:hover .badges-custom-cta-arrow {
  transform: translateX(4px);
  color: #ff3344;
}

/* === Info banner Predator === */
.apex-pred-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.95rem;
  margin-bottom: 0.8rem;
  background: rgba(255,51,68,0.06);
  border: 1px solid rgba(255,51,68,0.2);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.apex-pred-info-icon { flex-shrink: 0; }
.apex-predator-rp-card {
  background: linear-gradient(135deg, rgba(255,51,68,0.06) 0%, rgba(155,48,255,0.04) 100%);
  border-color: rgba(255,51,68,0.25);
}
.apex-predator-rp-card .apex-master-rp-side.current { border-color: rgba(155,48,255,0.4); }
.apex-predator-rp-card .apex-master-rp-side.desired {
  border-color: rgba(255,51,68,0.5);
  box-shadow: 0 0 0 1px rgba(255,51,68,0.18);
}

/* ===== Apex Master RP Boost — Carte compacte côte à côte ===== */
.apex-master-rp-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem;
  align-items: stretch;
  background: linear-gradient(135deg, rgba(155,48,255,0.06) 0%, rgba(155,48,255,0.02) 100%);
  border: 1.5px solid rgba(155,48,255,0.25);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 0.8rem;
}
.apex-master-rp-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.4rem;
  background: rgba(15,15,20,0.5);
  border: 1.5px solid rgba(155,48,255,0.3);
  border-radius: 10px;
  min-width: 0;
}
.apex-master-rp-side.current { border-color: rgba(155,48,255,0.4); }
.apex-master-rp-side.desired { border-color: rgba(155,48,255,0.6); box-shadow: 0 0 0 1px rgba(155,48,255,0.18); }
.apex-master-rp-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.apex-master-rp-icon img,
.apex-master-rp-icon svg { width: 100%; height: 100%; object-fit: contain; }
.apex-master-rp-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.apex-master-rp-rank {
  font-weight: 800;
  font-size: 1.05rem;
  color: #b44dff;
  margin-bottom: 0.2rem;
}
.apex-master-rp-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(155,48,255,0.45);
  font-weight: 300;
}
.val-radiant-rp-card {
  background:
    radial-gradient(circle at 18% 22%, rgba(181,52,85,0.26), transparent 38%),
    radial-gradient(circle at 82% 24%, rgba(255,241,118,0.18), transparent 34%),
    linear-gradient(135deg, rgba(181,52,85,0.10), rgba(255,241,118,0.035));
  border-color: rgba(255,241,118,0.28);
}
.val-radiant-rp-card .apex-master-rp-side.current {
  border-color: rgba(181,52,85,0.52);
  box-shadow: inset 0 0 24px rgba(181,52,85,0.10);
}
.val-radiant-rp-card .apex-master-rp-side.desired {
  border-color: rgba(255,241,118,0.55);
  box-shadow: inset 0 0 28px rgba(255,241,118,0.10), 0 0 0 1px rgba(255,241,118,0.14);
}
.radiant-threshold-pill {
  width: 100%;
  min-height: 38px;
  border-radius: 9px;
  border: 1.5px solid rgba(255,241,118,0.26);
  background: rgba(255,241,118,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff176;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.radiant-threshold-note {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.54);
  text-align: center;
}
.marvel-oaa-finish-option {
  width: 100%;
  display: grid;
  grid-template-columns: auto 58px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.9rem;
  margin: 0.95rem 0 0;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  border: 1.5px solid rgba(255,241,118,0.24);
  background:
    radial-gradient(circle at 10% 50%, rgba(255,241,118,0.18), transparent 34%),
    radial-gradient(circle at 86% 20%, rgba(255,74,224,0.14), transparent 36%),
    rgba(14,15,12,0.76);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.marvel-oaa-finish-option:hover {
  transform: translateY(-1px);
  border-color: rgba(255,241,118,0.44);
  box-shadow: 0 14px 34px rgba(0,0,0,0.28), 0 0 24px rgba(255,241,118,0.08);
}
.marvel-oaa-finish-option.active {
  border-color: rgba(255,241,118,0.78);
  background:
    radial-gradient(circle at 10% 50%, rgba(255,241,118,0.26), transparent 36%),
    radial-gradient(circle at 88% 24%, rgba(255,74,224,0.20), transparent 38%),
    rgba(24,20,10,0.86);
  box-shadow: 0 0 0 1px rgba(255,241,118,0.18), 0 0 34px rgba(255,241,118,0.10);
}
.marvel-oaa-finish-check {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1.5px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.22);
  position: relative;
}
.marvel-oaa-finish-option.active .marvel-oaa-finish-check {
  border-color: #fff176;
  background: #fff176;
}
.marvel-oaa-finish-option.active .marvel-oaa-finish-check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #111;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.marvel-oaa-finish-logo {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 12px rgba(255,241,118,0.30));
}
.marvel-oaa-finish-logo img,
.marvel-oaa-finish-logo svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.marvel-oaa-finish-text strong {
  display: block;
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
}
.marvel-oaa-finish-text span {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.86rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.62);
}
.marvel-oaa-finish-price {
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: rgba(255,241,118,0.12);
  color: #fff176;
  font-size: 0.9rem;
  font-weight: 900;
  white-space: nowrap;
}
.valorant-radiant-finish-option {
  grid-template-columns: auto 58px minmax(0, 1fr) auto auto;
  border-color: rgba(255,70,85,0.32);
  background:
    radial-gradient(circle at 10% 50%, rgba(255,70,85,0.20), transparent 36%),
    radial-gradient(circle at 86% 20%, rgba(255,241,118,0.16), transparent 34%),
    rgba(14,12,15,0.78);
}
.valorant-radiant-finish-option:hover,
.valorant-radiant-finish-option.active {
  border-color: rgba(255,70,85,0.62);
  box-shadow: 0 0 0 1px rgba(255,70,85,0.16), 0 0 34px rgba(255,70,85,0.12);
}
.valorant-radiant-finish-option .marvel-oaa-finish-price {
  background: rgba(255,70,85,0.14);
  color: #ffb5bd;
}
.season-finish-help {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.78);
  background: rgba(0,0,0,0.28);
  font-size: 0.88rem;
  font-weight: 900;
  position: relative;
}
.season-finish-help[data-tooltip]:hover::after,
.season-finish-help[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(320px, 72vw);
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(255,70,85,0.32);
  background: rgba(8,9,13,0.96);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 14px 34px rgba(0,0,0,0.38);
  z-index: 20;
}
.lol-rank-details-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  gap: 0.65rem;
  padding: 0;
  margin: 0.9rem auto 0;
  max-width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  align-items: start;
}
.lol-rank-detail-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  padding: 0.66rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.075);
  background:
    radial-gradient(circle at 18% 0%, rgba(8,194,192,0.08), transparent 48%),
    rgba(255,255,255,0.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.lol-rank-detail-field > span {
  color: rgba(255,255,255,0.62);
  font-weight: 850;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lol-rank-detail-select,
.lol-rank-detail-trigger {
  width: 100%;
  height: 42px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--accent-game, #08c2c0) 20%, rgba(255,255,255,0.08));
  background: rgba(4,9,13,0.76);
  color: #fff;
  padding: 0 0.72rem;
  font-weight: 850;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.28);
  font-size: 0.84rem;
}
.lol-rank-detail-select:focus,
.lol-rank-detail-trigger:focus-visible {
  border-color: color-mix(in srgb, var(--accent-game, #08c2c0) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-game, #08c2c0) 12%, transparent);
}
.lol-rank-detail-menu {
  position: relative;
}
.lol-rank-detail-menu.open {
  z-index: 12000;
}
/* Quand le menu région est ouvert, on remonte sa section au-dessus des suivantes
   (sinon le menu déroulant passe DERRIÈRE la section "What to improve" / Premium options).
   Générique : marche pour TOUS les jeux, pas seulement LoL. */
.calc-section:has(.lol-rank-detail-menu.open),
.calc-row-2col:has(.lol-rank-detail-menu.open),
.calc-row-region-only:has(.lol-rank-detail-menu.open) {
  position: relative;
  z-index: 12000;
}
.lol-rank-detail-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  cursor: pointer;
  text-align: left;
}
.lol-rank-detail-trigger span {
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
}
.lol-rank-detail-trigger svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: rgba(255,255,255,0.76);
  transition: transform 160ms ease;
}
.lol-rank-detail-menu.open .lol-rank-detail-trigger {
  border-color: color-mix(in srgb, var(--accent-game, #08c2c0) 70%, transparent);
  background: rgba(4,8,14,0.96);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-game, #08c2c0) 14%, transparent);
}
.lol-rank-detail-menu.open .lol-rank-detail-trigger svg {
  transform: rotate(180deg);
}
.lol-rank-detail-options {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 7px);
  z-index: 12010;
  display: none;
  max-height: 240px;
  overflow-y: auto;
  padding: 0.34rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent-game, #08c2c0) 28%, transparent);
  background: #05080b;
  box-shadow: 0 22px 46px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.05);
}
.lol-rank-detail-menu.open .lol-rank-detail-options {
  display: grid;
  gap: 0.18rem;
}
.lol-rank-detail-option {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255,255,255,0.82);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.36rem 0.48rem;
  font-size: 0.82rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}
.lol-rank-detail-option:hover {
  background: rgba(255,255,255,0.055);
  color: #fff;
}
.lol-rank-detail-option.active {
  background: color-mix(in srgb, var(--accent-game, #08c2c0) 13%, transparent);
  color: #fff;
}
.lol-rank-detail-option.active::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-game, #14f1e7);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-game, #14f1e7) 55%, transparent);
}
.rank-cards-row-single {
  grid-template-columns: minmax(280px, 560px);
  justify-content: center;
}
.rank-cards-row-single::after {
  left: 50%;
  width: min(560px, 86%);
  height: 240px;
}
.rank-card-single {
  min-height: 0;
}
.rank-card-single .rank-chips-icons {
  justify-content: center;
}
.calc-row-region-only {
  grid-template-columns: minmax(260px, 520px);
  justify-content: start;
}
@media (max-width: 600px) {
  .apex-master-rp-card { grid-template-columns: 1fr; }
  .apex-master-rp-arrow { transform: rotate(90deg); padding: 0.2rem 0; font-size: 1.5rem; }
  .marvel-oaa-finish-option { grid-template-columns: auto 46px 1fr; }
  .marvel-oaa-finish-price { grid-column: 2 / -1; justify-self: start; }
  .marvel-oaa-finish-logo { width: 46px; height: 46px; }
  .valorant-radiant-finish-option .season-finish-help { grid-column: 1; grid-row: 2; }
  .lol-rank-details-panel { grid-template-columns: 1fr; }
}

/* ===== Image rank Apex ===== */
.apex-rank-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* ===== Apex Predator package — version améliorée avec icône ===== */
.apex-pred-pkg-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.apex-pred-pkg-icon img,
.apex-pred-pkg-icon svg { width: 100%; height: 100%; object-fit: contain; }

/* ===== Package gold (Apex badges les plus chers) ===== */
.package-card.package-gold {
  border-color: rgba(212,175,55,0.45);
  background: linear-gradient(135deg, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.02) 100%);
}
.package-card.package-gold .package-name {
  background: linear-gradient(135deg, #f7d670 0%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.package-card.package-gold:hover {
  border-color: #d4af37;
  box-shadow: 0 0 0 1px rgba(212,175,55,0.3);
}
.package-card.package-gold.active {
  background: linear-gradient(135deg, rgba(212,175,55,0.20) 0%, rgba(212,175,55,0.05) 100%);
  border-color: #d4af37;
}

/* ===== Role Selector ===== */
.role-segmented {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
}
.role-segmented.role-segmented-5 {
  grid-template-columns: repeat(5, 1fr);
}
.role-segmented.role-segmented-lol {
  grid-template-columns: repeat(5, 1fr);
}
.role-segmented-lol .role-btn {
  min-height: 44px;
  padding: 0.46rem 0.42rem;
  gap: 0.12rem;
}
.lol-rank-meta-row {
  position: relative;
  z-index: 5000;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(348px, 1fr) 110px minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.82rem;
  align-items: start;
  width: 100%;
  max-width: 1060px;
  margin: 0.78rem auto 0;
  overflow: visible;
}
.lol-rank-meta-row:has(.lol-rank-detail-menu.open) {
  z-index: 9000;
}
.lol-rank-meta-row .lol-rank-details-panel,
.lol-rank-meta-row .calc-section {
  margin: 0 !important;
  min-width: 0;
  border: 1px solid rgba(8,194,192,0.16);
  border-radius: 12px;
  background:
    radial-gradient(circle at 10% 0%, rgba(8,194,192,0.10), transparent 46%),
    linear-gradient(135deg, rgba(5,16,20,0.82), rgba(12,14,15,0.74));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 24px rgba(0,0,0,0.16);
}
.lol-rank-meta-row .lol-rank-details-panel {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-template-columns: repeat(2, minmax(150px, 174px));
  justify-content: start;
  align-self: start;
  gap: 0.5rem 0.56rem;
  max-width: 382px;
  padding: 0.62rem;
}
.lol-rank-meta-row .lol-rank-detail-field {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  gap: 0.28rem;
}
.lol-rank-meta-row .lol-rank-detail-field > span {
  font-size: 0.57rem;
  letter-spacing: 0.06em;
  margin-left: 0.1rem;
  line-height: 1;
}
.lol-rank-meta-row .lol-rank-detail-trigger {
  height: 36px;
  padding: 0 0.5rem;
  font-size: 0.74rem;
  gap: 0.34rem;
  border-radius: 8px;
  background: rgba(3,8,10,0.84);
}
.lol-rank-meta-row .lol-rank-detail-trigger span {
  overflow: visible;
  text-overflow: clip;
  line-height: 1.05;
}
.lol-rank-meta-row .lol-rank-detail-options {
  min-width: 190px;
  z-index: 13010;
}
.lol-rank-meta-row .lol-rank-detail-menu.open {
  z-index: 13000;
}
.lol-rank-meta-row .lol-rank-detail-option {
  min-height: 31px;
  font-size: 0.76rem;
}
.lol-rank-meta-row > .calc-section {
  grid-column: 3;
  width: min(100%, 530px);
  max-width: 530px;
  justify-self: center;
  padding: 0.68rem 0.74rem;
  transform: translateX(-18px);
}
.lol-rank-meta-row > .calc-section .calc-section-title {
  margin-top: -0.18rem;
  margin-bottom: 0.48rem;
  text-align: center;
  line-height: 1.1;
  white-space: normal;
  font-size: 0.82rem;
}
.lol-rank-meta-row > .calc-section .calc-section-title.lol-role-title,
.adaptive-calc-wrap[data-game="lol"] .calc-section-title.lol-role-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
}
.lol-rank-meta-row .role-segmented-lol {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.48rem;
  max-width: 100%;
}
.lol-rank-meta-row .role-segmented-lol .role-btn {
  min-width: 0;
  min-height: 44px;
  font-size: 0.76rem;
  padding: 0.46rem 0.42rem;
  border-radius: 8px;
  justify-content: center;
}
.lol-rank-meta-row .role-segmented-lol .role-btn:nth-child(-n+3) {
  grid-column: span 2;
}
.lol-rank-meta-row .role-segmented-lol .role-btn:nth-child(4) {
  grid-column: 2 / span 2;
}
.lol-rank-meta-row .role-segmented-lol .role-btn:nth-child(5) {
  grid-column: 4 / span 2;
}
.lol-rank-meta-row .role-segmented-lol .role-label {
  white-space: nowrap;
  line-height: 1;
}
.lol-arena-details-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 0.75rem;
}
.lol-arena-field {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}
.lol-arena-field label {
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.lol-arena-select {
  width: 100%;
  min-height: 46px;
  padding: 0 0.88rem;
  border: 1px solid rgba(8,194,192,0.22);
  border-radius: 8px;
  background: rgba(3,8,10,0.84);
  color: var(--text);
  font-weight: 800;
  outline: none;
}
.lol-arena-select:focus {
  border-color: rgba(8,194,192,0.72);
  box-shadow: 0 0 0 3px rgba(8,194,192,0.12);
}
.lol-region-role-row {
  position: relative;
  z-index: 12000;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(620px, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
  overflow: visible;
}
.lol-region-role-row:has(.lol-rank-detail-menu.open) {
  z-index: 16000;
}
.lol-region-role-row > .calc-section {
  margin: 0 !important;
  min-width: 0;
  position: relative;
  overflow: visible;
}
.lol-region-role-row .calc-row-region-only {
  height: 100%;
  align-content: start;
}
.lol-region-role-row .global-region-menu.open {
  z-index: 17000;
}
.lol-region-role-row .global-region-menu.open .lol-rank-detail-options {
  z-index: 17010;
  background: #020507;
  border-color: rgba(8,194,192,0.46);
  box-shadow: 0 26px 56px rgba(0,0,0,0.92), 0 0 0 1px rgba(8,194,192,0.18);
}
.lol-region-role-row .role-segmented-lol {
  display: grid;
  grid-template-columns: repeat(6, minmax(96px, 1fr));
  gap: 0.56rem;
  justify-content: center;
  align-items: stretch;
  max-width: 700px;
  margin: 0 auto;
}
.lol-region-role-row .role-segmented-lol .role-btn {
  min-height: 54px;
  padding: 0.62rem 0.74rem;
  font-size: 0.84rem;
  justify-content: center;
  text-align: center;
  border-radius: 9px;
}
.lol-region-role-row .role-segmented-lol .role-btn:nth-child(-n+3) {
  grid-column: span 2;
}
.lol-region-role-row .role-segmented-lol .role-btn:nth-child(4) {
  grid-column: 2 / span 2;
}
.lol-region-role-row .role-segmented-lol .role-btn:nth-child(5) {
  grid-column: 4 / span 2;
}
.lol-region-role-row .calc-section-title.lol-role-title {
  margin-bottom: 0.62rem;
}
@media (max-width: 1100px) {
  .lol-region-role-row {
    grid-template-columns: 1fr;
  }
  .lol-region-role-row .role-segmented-lol {
    grid-template-columns: repeat(6, minmax(90px, 1fr));
  }
}
.adaptive-calc-wrap[data-game="lol"],
.adaptive-calc-wrap[data-game="lol"] .adaptive-calc-main {
  position: relative;
  overflow: visible;
}
.adaptive-calc-wrap[data-game="lol"] .calc-section:has(.opts-grid) {
  position: relative;
  z-index: 0;
}
.adaptive-calc-wrap[data-game="lol"] .rank-chip-icon {
  width: 52px;
  height: 52px;
}
.adaptive-calc-wrap[data-game="lol"] .rank-grid-2rows .rank-row .rank-chip-icon {
  width: 52px;
  height: 52px;
}
.adaptive-calc-wrap[data-game="lol"] .rank-card .div-chip {
  width: 46px;
  min-width: 46px;
  height: 32px;
}
@media (max-width: 600px) {
  .role-segmented { grid-template-columns: repeat(2, 1fr); }
  .role-segmented.role-segmented-5 { grid-template-columns: repeat(3, 1fr); }
  .role-segmented.role-segmented-lol { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .lol-rank-meta-row {
    grid-template-columns: 1fr;
  }
  .lol-rank-meta-row .lol-rank-details-panel {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
  .lol-rank-meta-row > .calc-section {
    max-width: none;
  }
}
@media (max-width: 520px) {
  .lol-rank-meta-row .lol-rank-details-panel {
    grid-template-columns: 1fr;
  }
}

/* ===== Playlist Grid (Rocket League) ===== */
.playlist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
@media (max-width: 720px) {
  .playlist-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .playlist-grid { grid-template-columns: repeat(2, 1fr); }
}
.playlist-btn {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.5rem 0.55rem;
  cursor: pointer;
  transition: all 200ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 64px;
  text-align: center;
}
.playlist-btn:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(var(--rank-color-rgb, 212,175,55), 0.5);
  transform: translateY(-1px);
}
.playlist-btn.active {
  background: linear-gradient(135deg, rgba(var(--rank-color-rgb, 212,175,55), 0.18) 0%, rgba(var(--rank-color-rgb, 212,175,55), 0.05) 100%);
  border-color: var(--rank-color, var(--accent));
  box-shadow: 0 0 0 1px rgba(var(--rank-color-rgb, 212,175,55), 0.3);
}
.playlist-label {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
}
.playlist-sub {
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.playlist-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  background: rgba(var(--rank-color-rgb, 212,175,55), 0.95);
  color: #0a0a0a;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* ===== MMR / RP Input (SSL Push, Master RP) ===== */
.rank-mmr-label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rank-mmr-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
}
.rank-mmr-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 180ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rank-mmr-btn:hover {
  background: rgba(var(--rank-color-rgb, 212,175,55), 0.15);
  border-color: var(--rank-color, var(--accent));
}
.rank-mmr-input {
  width: 110px;
  height: 38px;
  border-radius: 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.rank-mmr-input::-webkit-outer-spin-button,
.rank-mmr-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.rank-mmr-input:focus {
  outline: none;
  border-color: var(--rank-color, var(--accent));
  box-shadow: 0 0 0 2px rgba(var(--rank-color-rgb, 212,175,55), 0.2);
}
.val-rank-rr-controls {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.val-rank-rr-label {
  margin-bottom: 0.45rem;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.val-rank-rr-input-wrap .rank-mmr-btn {
  background: rgba(39,216,236,0.10);
  border-color: rgba(39,216,236,0.22);
  color: #38dff1;
}
.val-rank-rr-input-wrap .rank-mmr-input {
  width: min(170px, 42vw);
  background: rgba(255,255,255,0.045);
}

/* ===== Package Grid (Apex Predator, Badges, Rewards) ===== */
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.6rem;
}
.package-card {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1rem 0.85rem;
  cursor: pointer;
  transition: all 200ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-height: 88px;
  text-align: center;
}
.package-card:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(var(--rank-color-rgb, 212,175,55), 0.5);
  transform: translateY(-2px);
}
.package-card.active {
  background: linear-gradient(135deg, rgba(var(--rank-color-rgb, 212,175,55), 0.18) 0%, rgba(var(--rank-color-rgb, 212,175,55), 0.05) 100%);
  border-color: var(--rank-color, var(--accent));
  box-shadow: 0 0 0 1px rgba(var(--rank-color-rgb, 212,175,55), 0.3);
}
.package-card.popular {
  border-color: rgba(var(--rank-color-rgb, 212,175,55), 0.4);
}
.package-popular-tag {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #d4af37 0%, #f7d670 100%);
  color: #0a0a0a;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.18rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.package-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}
.package-price {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--accent);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}

/* ===== Apex Predator package (TOP750 / TOP300 / TOP100) ===== */
.apex-pred-packages {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.apex-pred-pkg {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  transition: all 200ms ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.apex-pred-pkg:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(var(--rank-color-rgb, 255,51,68), 0.5);
}
.apex-pred-pkg.active {
  background: linear-gradient(135deg, rgba(255,51,68,0.18) 0%, rgba(255,51,68,0.05) 100%);
  border-color: #ff3344;
}
.apex-pred-pkg.popular {
  border-color: rgba(255,51,68,0.35);
}
.apex-pred-pkg-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}
.apex-pred-pkg-badge {
  background: rgba(0,204,136,0.18);
  color: #00cc88;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
}
.role-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.35rem;
  cursor: pointer;
  /* PERF : transition ciblée GPU-friendly */
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
  color: var(--text);
  position: relative;
}
.role-btn:hover { border-color: var(--accent); background: var(--surface-hover); }
.role-btn.active {
  border-color: var(--accent);
  background: rgba(212,175,55,0.1);
  box-shadow: 0 0 0 2px rgba(212,175,55,0.3);
}
.role-btn .role-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.ow-role-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Teinte dorée ElevateBoost (~#d4af37) appliquée à des PNG blancs */
  filter: brightness(0) saturate(100%) invert(76%) sepia(48%) saturate(569%) hue-rotate(7deg) brightness(91%) contrast(88%) drop-shadow(0 2px 4px rgba(0,0,0,0.55));
  transition: filter 200ms ease;
}
.role-btn.active .ow-role-img,
.role-btn:hover .ow-role-img {
  /* Teinte plus claire / brillante quand actif ou survolé */
  filter: brightness(0) saturate(100%) invert(86%) sepia(38%) saturate(800%) hue-rotate(2deg) brightness(105%) contrast(95%) drop-shadow(0 2px 6px rgba(212,175,55,0.55));
}
.role-btn .role-label {
  font-size: 0.7rem;
  font-weight: 600;
}
.role-btn .option-help {
  position: absolute;
  top: 5px;
  right: 5px;
}
.option-help {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}
.option-help:hover {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(212,175,55,0.18);
}
.role-btn .role-bonus {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(255,182,54,0.2);
  color: var(--gold);
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 99px;
}
/* ===== Hero Picker ===== */
.hero-picker-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}
/* Variant 4 boutons (Valo/Apex avec "Rôle spécifique") :
   plus compact, label sur 1 ligne, padding réduit pour rentrer dans la largeur. */
.hero-picker-modes.hero-picker-modes-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}
.hero-picker-modes.hero-picker-modes-4 .hero-mode-btn {
  padding: 0.6rem 0.55rem;
  gap: 0.2rem;
}
.hero-picker-modes.hero-picker-modes-4 .hero-mode-btn strong {
  font-size: 0.78rem;
  line-height: 1.2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
.hero-picker-modes.hero-picker-modes-4 .hero-mode-btn span {
  font-size: 0.7rem;
  line-height: 1.25;
}
.hero-picker-modes.hero-picker-modes-4 .bonus-tag {
  font-size: 0.6rem;
  padding: 1px 5px;
  margin-left: 0;
}
@media (max-width: 900px) {
  .hero-picker-modes.hero-picker-modes-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .hero-picker-modes { grid-template-columns: 1fr; }
  .hero-picker-modes.hero-picker-modes-4 { grid-template-columns: 1fr; }
}

/* === Picker-role : sélecteur de rôle dans le mode "Rôle spécifique" === */
.picker-role-block {
  margin-top: 0.6rem;
}
.picker-role-info {
  background: var(--surface);
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-bottom: 0.6rem;
}
.picker-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.45rem;
}
.picker-role-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.5rem;
  cursor: pointer;
  transition: all 180ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: var(--text);
  min-height: 56px;
}
.picker-role-btn:hover { border-color: var(--accent); }
.picker-role-btn.active {
  border-color: var(--accent);
  background: rgba(212,175,55,0.1);
}
.picker-role-label {
  font-size: 0.85rem;
  font-weight: 600;
}
.picker-role-btn .bonus-tag {
  margin-left: 0;
  font-size: 0.62rem;
}

.hero-mode-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem;
  cursor: pointer;
  transition: all 200ms ease;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
  text-align: left;
  color: var(--text);
}
.hero-mode-btn:hover { border-color: var(--accent); }
.hero-mode-btn.active {
  border-color: var(--accent);
  background: rgba(212,175,55,0.1);
}
.hero-mode-btn strong {
  font-size: 0.88rem;
  font-weight: 600;
}
.hero-mode-btn span {
  font-size: 0.75rem;
  color: var(--text-dim);
}
.bonus-tag {
  background: rgba(255,182,54,0.2);
  color: var(--gold);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  margin-left: 0.3rem;
}
.optional-tag {
  background: var(--surface);
  color: var(--text-faint);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 0.3rem;
  letter-spacing: 0;
  text-transform: none;
}

.hero-picker-info {
  background: var(--surface);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-bottom: 0.6rem;
}

/* === Hero picker : autocomplete search === */
.hero-list {
  background: transparent;
  border: none;
  padding: 0;
  max-height: none;
}
.hero-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 0;
}
.hero-chips:empty { display: none; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.4rem 0.3rem 0.65rem;
  background: rgba(212,175,55,0.10);
  border: 1px solid rgba(212,175,55,0.45);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--premium);
  animation: chipIn 200ms ease;
}
@keyframes chipIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.hero-chip-x {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
  transition: all 150ms ease;
}
.hero-chip-x:hover { background: rgba(255,80,80,0.6); color: #fff; }

.hero-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.hero-search-input-wrap.is-disabled { opacity: 0.5; }
.hero-search-icon {
  position: absolute;
  left: 0.85rem;
  color: var(--text-dim);
  pointer-events: none;
}
.hero-search-input {
  width: 100%;
  padding: 0.7rem 0.9rem 0.7rem 2.4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 16px; /* anti-zoom iOS */
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.hero-search-input:focus {
  outline: none;
  border-color: var(--premium);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
}
.hero-search-input::placeholder { color: var(--text-faint); }

.hero-suggestions {
  display: none;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.3rem;
  max-height: 240px;
  overflow-y: auto;
}
.hero-suggestions.is-open { display: flex; }
.hero-suggestion {
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.55rem 0.75rem;
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  transition: background 150ms ease;
}
.hero-suggestion:hover {
  background: rgba(212,175,55,0.08);
  color: var(--premium);
}
.hero-suggestion mark {
  background: transparent;
  color: var(--premium);
  font-weight: 700;
}
.hero-suggestion-empty {
  padding: 0.7rem 0.75rem;
  color: var(--text-faint);
  font-size: 0.82rem;
  font-style: italic;
}

/* ===== Options Buttons V4 — Click direct, compact ===== */
.opts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 0.5rem;
}
.opt-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  /* PERF : transition ciblée GPU-friendly */
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: var(--text);
  min-height: 54px;
  height: auto;
  position: relative;
}
.opt-btn-premium {
  /* l'animation dorée (::before) a besoin d'overflow:hidden, mais uniquement ici */
  overflow: hidden;
}
.opt-btn .option-help {
  align-self: flex-start;
  margin-top: 1px;
}
.opt-btn:hover:not(:disabled) {
  border-color: rgba(255,255,255,0.28);
  background: var(--surface-hover);
}
.opt-btn.active {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.55), 0 4px 14px rgba(0,0,0,0.25);
}
/* Variante premium : seule l'option à +50% conserve le doré */
.opt-btn-premium:hover:not(:disabled) {
  border-color: rgba(212,175,55,0.5);
}
.opt-btn-premium::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0%, rgba(212,175,55,0.18) 35%, rgba(255,238,160,0.34) 50%, rgba(212,175,55,0.18) 65%, transparent 100%);
  transform: translateX(-120%);
  pointer-events: none;
  opacity: 0;
}
.opt-btn-premium:hover::before,
.opt-btn-premium.active::before {
  opacity: 1;
  animation: premiumOptionSweep 2.2s ease-in-out infinite;
}
@keyframes premiumOptionSweep {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}
.opt-btn-premium.active {
  border-color: var(--premium);
  background: rgba(212,175,55,0.06);
  box-shadow: 0 0 0 1px var(--premium), 0 0 24px rgba(212,175,55,0.16), 0 4px 14px rgba(212,175,55,0.18);
}
.opt-btn-free {
  background: rgba(255,255,255,0.024);
  border-color: rgba(255,255,255,0.08);
  cursor: pointer;
}
.opt-btn-free.active {
  background: rgba(34,197,94,0.045);
  border-color: rgba(74,222,128,0.28);
  box-shadow: inset 0 0 0 1px rgba(74,222,128,0.12);
}
.opt-btn-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  display: grid;
  place-items: center;
}
.opt-btn.active .opt-btn-icon {
  background: rgba(255,255,255,0.10);
  color: var(--text);
}
.opt-btn-premium.active .opt-btn-icon {
  background: rgba(212,175,55,0.18);
  color: var(--premium);
}
.opt-btn-free .opt-btn-icon {
  background: rgba(255,255,255,0.05);
}
.opt-btn-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.opt-btn-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
}
.opt-btn-desc {
  display: none;
}
/* Multiplicateur : blanc par défaut, doré pour les premium */
.opt-btn-mult {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  background: transparent;
  padding: 0;
  border-radius: 0;
  flex-shrink: 0;
  letter-spacing: 0;
}
.opt-btn-premium .opt-btn-mult {
  color: var(--premium);
}
.opt-btn.active .opt-btn-mult {
  background: transparent;
  color: var(--text);
  filter: brightness(1.1);
}
.opt-btn-premium.active .opt-btn-mult {
  color: var(--premium);
}
.opt-btn .opt-mult-free {
  color: #4ade80;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(74,222,128,0.35);
  padding: 0.18rem 0.45rem;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 1;
  text-transform: uppercase;
}
.opt-btn-free.active .opt-mult-free {
  color: #86efac;
  background: rgba(34,197,94,0.20);
  border-color: rgba(74,222,128,0.55);
  opacity: 1;
}
.placement-mode-banner,
.calc-mode-banner {
  position: relative;
  background: transparent;
  border: none;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  isolation: isolate; /* contient les pseudos sans affecter le contexte parent */
}
/* Fond fondu (gauche-droite + haut-bas) — sous le contenu */
.placement-mode-banner::before,
.calc-mode-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 100% at 50% 50%,
      rgba(var(--game-color-rgb, 212,175,55), 0.14) 0%,
      rgba(var(--game-color-rgb, 212,175,55), 0.08) 45%,
      rgba(var(--game-color-rgb, 212,175,55), 0.02) 80%,
      transparent 100%);
}
/* Bordure fondue : visible au centre, transparente aux extrémités */
.placement-mode-banner::after,
.calc-mode-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  border: 1px solid rgba(var(--game-color-rgb, 212,175,55), 0.32);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.calc-mode-banner-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
}
.calc-mode-banner strong {
  display: block;
  margin-bottom: 0.2rem;
}
.calc-mode-banner span {
  font-size: 0.85rem;
  color: var(--text-dim);
}
.placement-price-note {
  margin-top: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  font-size: 0.82rem;
}
.placement-price-note span {
  color: var(--text-dim);
}
.placement-price-note strong {
  color: var(--accent-2);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .opts-grid {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}
.options-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.55rem;
}
.opt-toggle {
  background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.005) 100%);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  cursor: pointer;
  transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  position: relative;
  font-size: 0.82rem;
  overflow: hidden;
}
.opt-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 50%, var(--accent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}
.opt-toggle:hover {
  border-color: rgba(212,175,55,0.4);
  background: linear-gradient(135deg, rgba(212,175,55,0.06) 0%, rgba(212,175,55,0.02) 100%);
  transform: translateY(-1px);
}
.opt-toggle:hover::before { opacity: 0.08; }
.opt-toggle.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(212,175,55,0.15) 0%, rgba(240,216,120,0.05) 100%);
  box-shadow: 0 4px 14px -4px rgba(212,175,55,0.5);
}
.opt-toggle.active::before { opacity: 0.12; }
.opt-toggle-free {
  background: linear-gradient(135deg, rgba(240,216,120,0.08) 0%, rgba(240,216,120,0.02) 100%);
  border-color: rgba(240,216,120,0.25);
  cursor: default;
}
.opt-toggle-free:hover { border-color: rgba(240,216,120,0.5); transform: none; }
.opt-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}
.opt-toggle-free input[type="checkbox"] {
  cursor: default;
}
.opt-toggle-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  display: grid;
  place-items: center;
  transition: all 240ms ease;
}
.opt-toggle.active .opt-toggle-icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 12px rgba(212,175,55,0.4);
}
.opt-toggle-free .opt-toggle-icon {
  background: linear-gradient(135deg, var(--accent-2), #00b8d4);
  box-shadow: 0 4px 12px rgba(240,216,120,0.3);
}
.opt-toggle-label {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opt-toggle-mult {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  background: rgba(212,175,55,0.15);
  padding: 3px 7px;
  border-radius: 6px;
  letter-spacing: 0;
}
.opt-toggle.active .opt-toggle-mult {
  background: var(--accent);
  color: #fff;
}
.opt-mult-free {
  color: #4ade80 !important;
  background: rgba(34,197,94,0.15) !important;
  border: 1px solid rgba(74,222,128,0.4);
  padding: 0.18rem 0.45rem;
  border-radius: 6px;
  font-size: 0.62rem !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.opt-toggle-info { display: none; }

/* Bandeau "Inclus dans toutes les commandes" */
.opt-included-banner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, rgba(240,216,120,0.08) 0%, rgba(212,175,55,0.04) 100%);
  border: 1px solid rgba(240,216,120,0.2);
  border-radius: 10px;
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.opt-included-banner svg {
  color: var(--accent-2);
  flex-shrink: 0;
}
.opt-included-banner strong { color: var(--text); }

/* Tooltip on hover */
.opt-toggle[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  color: var(--text);
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  font-size: 0.78rem;
  font-weight: 400;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  pointer-events: none;
  line-height: 1.4;
}
.opt-toggle[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--border-strong);
  z-index: 100;
}

/* ===== Mode Shortcuts v2 ===== */
.mode-shortcuts-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem;
}
.mode-shortcut-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  transition: all 200ms ease;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
  color: var(--text);
}
.mode-shortcut-card:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
}
.mode-shortcut-card.active {
  border-color: var(--accent);
  background: rgba(212,175,55,0.1);
}
.mode-shortcut-card .mode-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.mode-shortcut-card .mode-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}
.mode-shortcut-card .mode-info strong {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mode-shortcut-card .mode-badge {
  font-size: 0.6rem;
  background: var(--accent);
  color: #fff;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
  align-self: flex-start;
  letter-spacing: 0.05em;
}
.mode-shortcut-card .mode-badge-popular {
  background: var(--gold);
  color: #000;
}
.summary-mode-quicklinks {
  margin-top: 0.75rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(12,16,28,0.82);
  box-shadow: 0 8px 24px -14px rgba(0,0,0,0.5);
}
.summary-mode-quicklinks-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.summary-shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}
.summary-mode-shortcut {
  min-height: 34px;
  padding: 0.42rem 0.5rem;
  border-radius: 7px;
  font-size: 0.72rem;
  justify-content: center;
  text-align: center;
}
.summary-mode-shortcut .mode-info strong {
  font-size: 0.72rem;
  white-space: normal;
  line-height: 1.15;
}

/* === Trust badges row above the calculator === */
.trust-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.35rem 0;
  align-items: center;
}
.trust-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.24rem 0.52rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  cursor: help;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: none;
}
.trust-badge:hover,
.trust-badge:focus-visible {
  border-color: rgba(212,175,55,0.42);
  background:
    linear-gradient(180deg, rgba(212,175,55,0.13), rgba(255,255,255,0.035));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.14);
  outline: none;
}
.trust-badge:hover .trust-badge-icon,
.trust-badge:focus-visible .trust-badge-icon {
  color: var(--premium);
  border-color: rgba(212,175,55,0.45);
}

/* Custom tooltip on hover/focus */
.trust-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 260px;
  padding: 0.55rem 0.75rem;
  background: rgba(12,12,15,0.96);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 100;
  white-space: normal;
  text-align: center;
}
.trust-badge::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: rgba(212,175,55,0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 100;
}
.trust-badge:hover::after,
.trust-badge:focus-visible::after,
.trust-badge:hover::before,
.trust-badge:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.trust-badge-icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.13);
  color: rgba(212,175,55,0.86);
  background: rgba(255,255,255,0.035);
  flex-shrink: 0;
  transition: all 180ms ease;
}
.trust-badge-icon svg {
  display: block;
  width: 10px;
  height: 10px;
}
.trust-badge-label {
  white-space: nowrap;
}
@media (max-width: 720px) {
  .trust-badges-row { gap: 0.28rem; }
  .trust-badge { padding: 0.2rem 0.42rem; font-size: 0.54rem; }
  .trust-badge-icon { width: 14px; height: 14px; }
  .trust-badge-icon svg { width: 9px; height: 9px; }
}

/* ============================================================
   Mode shortcuts block under the summary (vertical column)
   ============================================================ */
.mode-shortcuts-block {
  margin-top: 0.9rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(12,16,28,0.6);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,0.35);
}
.mode-shortcuts-block-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 0.55rem;
}
.mode-shortcuts-block #adModeShortcutsContainer {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mode-shortcuts-block .summary-mode-shortcut {
  width: 100%;
  min-height: 38px;
  padding: 0.5rem 0.7rem;
  font-size: 0.78rem;
  text-align: left;
  justify-content: flex-start;
}
.mode-shortcuts-block .summary-mode-shortcut .mode-info strong {
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: normal;
}

/* Custom offer card under the grid: take full width */
.adaptive-calc-wrap > .custom-offer-card.adaptive-custom-offer {
  margin-top: 1.5rem;
  width: 100%;
  max-width: none;
}

/* Adaptive summary */
.adaptive-summary .summary-line {
  display: flex;
  justify-content: space-between;
  padding: 0.28rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.76rem;
  line-height: 1.25;
}
.adaptive-summary .summary-line:last-of-type {
  border-bottom: none;
}
.adaptive-summary .summary-line .lbl {
  color: var(--text-dim);
  flex: 1;
  margin-right: 0.5rem;
}
.adaptive-summary .summary-line .val {
  font-weight: 600;
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}


/* ==========================================================================
   MOBILE RESPONSIVE — Fixes globaux contre les dépassements
   ========================================================================== */

/* Anti-overflow horizontal global */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
* { min-width: 0; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Container — padding latéral systématique */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* ===== MOBILE BREAKPOINT (≤768px) ===== */
@media (max-width: 768px) {
  /* Container plus serré sur mobile */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Page contact responsive */
  .contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .contact-form-row { grid-template-columns: 1fr !important; }

  /* Page visiteurs responsive */
  .visitors-grid { grid-template-columns: 1fr !important; }

  /* Titres : tailles fluides pour pas dépasser */
  h1 { font-size: clamp(1.7rem, 7vw, 2.5rem) !important; line-height: 1.15 !important; word-break: break-word; }
  h2 { font-size: clamp(1.4rem, 5.5vw, 2rem) !important; line-height: 1.2 !important; word-break: break-word; }
  h3 { font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important; word-break: break-word; }
  h4 { font-size: clamp(1rem, 4vw, 1.2rem) !important; word-break: break-word; }
  p, li, span { word-wrap: break-word; overflow-wrap: break-word; }

  /* Hero — centrer et empiler */
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center;
  }
  .hero h1 { text-align: center; }
  .hero .lead { text-align: center; max-width: 100%; }
  .hero-ctas {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
  }
  .hero-ctas .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
  .hero-trust {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem !important;
  }
  .hero-eyebrow {
    margin: 0 auto;
    justify-content: center;
  }
  /* Floating badges → masquer sur mobile (trop chargé) */
  .float-badge { display: none !important; }
  .hero-visual { min-height: auto; }

  /* Sections — espacement aéré (plus de respiration entre les blocs) */
  .section { padding: 4rem 0 !important; }
  .section-head { margin-bottom: 2.5rem !important; }
  .section-head h2 { padding: 0 0.5rem; }
  .section-head p { padding: 0 0.75rem; max-width: 100%; line-height: 1.65; }
  .eyebrow { font-size: 0.7rem !important; margin-bottom: 1rem !important; }

  /* Header — compact */
  .site-header { padding: 0.7rem 0 !important; }
  .header-inner {
    gap: 0.4rem !important;
    flex-wrap: nowrap;
  }
  .logo-text { font-size: 1.05rem !important; }
  .main-nav { display: none; }
  .online-count { display: none !important; }
  /* Boutons header sur mobile : icônes seulement */
  #loginBtn, #registerBtn { padding: 0.45rem 0.7rem !important; font-size: 0.78rem !important; }
  /* Langue visible sur mobile pour remplir l'en-tête proprement */
  .lang-selector-wrap { display: block; }
  .header-actions { gap: 0.5rem !important; align-items: center; }

  /* Cart panel full-width sur mobile */
  .cart-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    right: 0 !important;
  }

  /* Mobile drawer full-screen */
  .mobile-drawer {
    width: 88vw !important;
    max-width: 320px !important;
  }

  /* Game cards grid */
  .games-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.7rem !important;
  }

  /* Features grid */
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 1.1rem !important;
  }
  .feature-card {
    padding: 1.5rem 1.4rem !important;
  }
  .feature-card .feature-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
    margin-bottom: 0.9rem !important;
  }
  .feature-card .feature-icon svg { width: 20px !important; height: 20px !important; }
  .feature-card h4 { font-size: 1.05rem !important; }
  .feature-card p { font-size: 0.88rem !important; line-height: 1.55 !important; }
  /* Elevate+ : prix moins énorme sur mobile */
  .elevate-plus-price { font-size: 2.2rem !important; }
  .elevate-plus-hero { padding: 1.8rem 1.4rem !important; }
  .elevate-plus-hero h2 { font-size: 1.6rem !important; }
  .elevate-plus-features { gap: 0.8rem !important; }
  .elevate-plus-feat { padding: 1rem !important; }

  /* Reviews wall en colonne */
  .reviews-wall {
    grid-template-columns: 1fr !important;
  }

  /* Calc visualizer : empiler verticalement sur mobile */
  .calc-visualizer {
    flex-direction: column;
    gap: 1rem !important;
  }
  .calc-arrow {
    transform: rotate(90deg);
    margin: 0.5rem 0;
  }
  .rank-display {
    width: 100%;
  }
  .calc-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }
  .calc-game-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .calc-game-tabs::-webkit-scrollbar { display: none; }
  .calc-game-tabs .game-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Rank chips — wrap proprement */
  .rank-chips {
    gap: 0.4rem !important;
  }
  .rank-chip {
    font-size: 0.78rem !important;
    padding: 0.4rem 0.7rem !important;
  }

  /* Footer en colonne */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  .footer-col:first-child {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 0.5rem !important;
    text-align: center;
    font-size: 0.78rem !important;
  }

  /* Cards mode sleek V2 — natif vertical, juste un petit polish mobile */
  .mode-card-sleek {
    padding: 1.3rem 1.2rem 1.15rem !important;
    min-height: 200px !important;
  }
  .mode-card-sleek-title { font-size: 1.2rem !important; }
  .mode-card-sleek-tagline { font-size: 0.82rem !important; }
  .mode-card-sleek-perks li { font-size: 0.78rem !important; }

  /* Checkout — grille 1 colonne */
  .checkout-wrap {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .checkout-summary {
    position: static !important;
  }
  .payment-methods {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .payment-method {
    padding: 0.7rem !important;
  }
  .payment-method strong { font-size: 0.8rem !important; }
  .payment-method span { font-size: 0.7rem !important; }

  /* Auth modal — full width sur mobile */
  .modal-overlay .modal-content {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    padding: 1.3rem !important;
    margin: 0.5rem !important;
  }
  .role-selector {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  /* FAQ */
  .faq-q { font-size: 0.92rem !important; padding: 0.9rem !important; }
  .faq-a { font-size: 0.85rem !important; padding: 0 0.9rem 0.9rem !important; }

  /* Page header */
  .page-header {
    padding: 2rem 0 1.5rem !important;
    text-align: center !important;
  }
  .page-header h1 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }

  /* Buttons — taille tactile minimum */
  .btn {
    min-height: 44px;
    padding: 0.7rem 1.2rem !important;
    font-size: 0.92rem !important;
  }
  .btn-sm { min-height: 36px; padding: 0.5rem 0.9rem !important; font-size: 0.82rem !important; }

  /* Forms */
  input, textarea, select {
    font-size: 16px !important; /* Empêche zoom iOS */
    width: 100%;
    box-sizing: border-box;
  }
  .form-group { margin-bottom: 0.9rem !important; }

  /* Tables (si présentes) */
  table { display: block; overflow-x: auto; }

  /* Adaptive calc — full width */
  .adaptive-calc-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .adaptive-summary {
    position: static !important;
  }
  .adaptive-side-column {
    position: static !important;
    width: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
  .calc-row-2col {
    grid-template-columns: 1fr !important;
  }
  .package-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .role-segmented {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .options-compact-grid {
    grid-template-columns: 1fr !important;
  }
  /* Hero picker mobile */
  .hero-picker-modes {
    grid-template-columns: 1fr !important;
  }
  .hero-list {
    grid-template-columns: repeat(2, 1fr) !important;
    max-height: 280px !important;
  }

  /* Custom offer card */
  .custom-offer-card {
    padding: 1.5rem 1.2rem !important;
  }
  .custom-offer-card h3 { font-size: 1.15rem !important; }
  .custom-offer-card p { font-size: 0.88rem !important; }

  /* Cookies banner */
  .cookie-banner {
    bottom: 0.5rem !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: auto !important;
    max-width: none !important;
    padding: 1rem !important;
  }
  .cookie-banner-actions {
    flex-direction: column !important;
    gap: 0.4rem !important;
  }
  .cookie-banner-actions .btn { width: 100%; }

  /* Toasts */
  .toast {
    left: 0.5rem !important;
    right: 0.5rem !important;
    bottom: 0.5rem !important;
    max-width: none !important;
  }

  /* Search overlay */
  .search-overlay { padding: 4vh 0.5rem 0.5rem !important; }
  .search-modal { max-width: 100% !important; }
}

/* ===== TRÈS PETITS ÉCRANS (≤380px) ===== */
@media (max-width: 380px) {
  .container {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
  h1 { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; }
  h2 { font-size: clamp(1.25rem, 5vw, 1.6rem) !important; }
  .games-grid { grid-template-columns: 1fr !important; }
  .package-grid { grid-template-columns: 1fr !important; }
  .role-segmented { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-col:first-child { grid-column: auto; }
}

/* ===== TABLETTE (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .games-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .features-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .checkout-wrap { grid-template-columns: 1fr !important; }
  .checkout-summary { position: static !important; }
}

/* ==========================================================================
   THEME DYNAMIQUE PAR JEU — Application légère de --accent-game
   ==========================================================================
   On change discrètement la couleur d'accent du contenu principal sans
   casser le header (toujours violet ElevateBoost) ni le footer.
   Les boutons "primaire" gardent le violet pour la cohérence de marque.
   ========================================================================== */
.themed-game .rank-chip.active {
  border-color: var(--accent-game) !important;
  background: var(--accent-game-soft) !important;
}
.themed-game .div-chip.active {
  border-color: var(--accent-game) !important;
  background: var(--accent-game-soft) !important;
  color: var(--accent-game) !important;
}
.themed-game .package-card.active {
  border-color: var(--accent-game) !important;
  background: var(--accent-game-soft) !important;
  box-shadow: 0 0 0 2px var(--accent-game-soft) !important;
}
.themed-game .package-card .package-num {
  color: var(--accent-game) !important;
}
.themed-game .role-btn.active {
  border-color: var(--accent-game) !important;
  background: var(--accent-game-soft) !important;
  box-shadow: 0 0 0 2px var(--accent-game-soft) !important;
}
.themed-game .coach-tier-card.active {
  border-color: var(--accent-game) !important;
  background: var(--accent-game-soft) !important;
}
.themed-game .opt-toggle.active {
  border-color: var(--accent-game) !important;
  background: var(--accent-game-soft) !important;
}
.themed-game .opt-toggle-mult {
  color: var(--accent-game) !important;
}
.themed-game .hero-mode-btn.active {
  border-color: var(--accent-game) !important;
  background: var(--accent-game-soft) !important;
}
.themed-game .mode-shortcut-card.active {
  border-color: var(--accent-game) !important;
  background: var(--accent-game-soft) !important;
}
.themed-game .calc-arrow svg {
  color: var(--accent-game) !important;
}
.themed-game .progress-fill {
  background: linear-gradient(90deg, var(--accent-game), var(--accent-game)) !important;
}
.themed-game #adSummaryTotal {
  color: var(--accent-game) !important;
}
.themed-game .summary-total .val {
  color: var(--accent-game) !important;
}
.themed-game .game-back-btn {
  color: var(--accent-game);
}
.themed-game .game-modes-header-info .eyebrow {
  color: var(--accent-game) !important;
}
/* Petit accent sous les titres dans la page modes */
.themed-game .calc-section-title {
  color: var(--text);
}
.themed-game .calc-section-title::before {
  background: var(--accent-game) !important;
}

/* Global boost color lift: less black/white/gold, more game identity */
.themed-game .page[data-page="boost"],
.themed-game .page[data-page="achievements"] {
  background: #07060a !important;
}

/* Grand glow de page — supprimé */
.themed-game .adaptive-calc-wrap::after {
  display: none !important;
}
.themed-game .calc-section,
.themed-game .adaptive-summary,
.themed-game .rank-card,
.themed-game .ach-hero-card {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent-game) 8%, transparent), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(10,10,12,0.92);
  border-color: color-mix(in srgb, var(--accent-game) 18%, rgba(255,255,255,0.08));
}
.themed-game .opt-btn,
.themed-game .summary-inline-option,
.themed-game .calc-modes-bar-item,
.themed-game .ach-role-chip {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-game) 7%, rgba(255,255,255,0.035)), rgba(255,255,255,0.018)),
    rgba(11,11,14,0.9);
  border-color: color-mix(in srgb, var(--accent-game) 18%, rgba(255,255,255,0.08));
}
.themed-game .opt-btn:hover,
.themed-game .summary-inline-option:hover,
.themed-game .calc-modes-bar-item:hover,
.themed-game .ach-role-chip:hover {
  border-color: color-mix(in srgb, var(--accent-game) 44%, rgba(255,255,255,0.14));
  box-shadow: 0 18px 42px -34px var(--accent-game);
}

/* Keep the order recap rich, but remove visible block delimitations from the main calculator column */
.themed-game .adaptive-calc-main,
.themed-game .adaptive-calc-main .calc-section,
.themed-game .adaptive-calc-main .ach-catalog,
.themed-game .adaptive-calc-main .ach-filters {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.themed-game .adaptive-calc-main {
  position: relative;
  isolation: isolate;
}
.themed-game .adaptive-calc-main::before {
  display: none !important;
}
.themed-game .adaptive-calc-main > * {
  position: relative;
  z-index: 1;
}
.themed-game .adaptive-calc-main .calc-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.themed-game .adaptive-calc-main .calc-section + .calc-section {
  margin-top: 1.45rem;
}
.themed-game .adaptive-calc-main .ach-items-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.012)),
    rgba(10,10,12,0.72) !important;
  border-color: rgba(255,255,255,0.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
}
.themed-game .adaptive-calc-main .ach-items-head {
  background: transparent !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
.themed-game .adaptive-calc-main .role-segmented,
.themed-game .adaptive-calc-main .opts-grid,
.themed-game .adaptive-calc-main .ach-hero-chips {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.themed-game #adModeFAQContainer {
  grid-column: 1 / -1;
  width: 100%;
  margin: 3.2rem auto 0;
}
.themed-game .adaptive-calc-main .mode-faq-section,
.themed-game .adaptive-calc-main .calc-mode-faq {
  position: relative;
  width: min(100%, 1040px);
  margin: 0 auto !important;
  padding: 2rem 1.75rem !important;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent-game) 22%, rgba(255,255,255,0.08)) !important;
  background:
    radial-gradient(ellipse 72% 42% at 50% 0%, color-mix(in srgb, var(--accent-game) 13%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
    rgba(6,7,10,0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 34px 90px -70px var(--accent-game) !important;
  overflow: hidden;
}
.themed-game .adaptive-calc-main .mode-faq-section::before,
.themed-game .adaptive-calc-main .calc-mode-faq::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -90px 8% auto 8%;
  height: 170px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--accent-game) 28%, transparent), transparent 70%);
  filter: none;
  opacity: 0.75;
}
.themed-game .adaptive-calc-main .mode-faq-section > *,
.themed-game .adaptive-calc-main .calc-mode-faq > * {
  position: relative;
  z-index: 1;
}
.themed-game .adaptive-calc-main .mode-faq-section .calc-section-title,
.themed-game .adaptive-calc-main .calc-mode-faq .calc-section-title {
  justify-content: center;
  text-align: center;
  margin-bottom: 1.25rem;
  color: #fff !important;
}
.themed-game .adaptive-calc-main .mode-faq-list {
  width: min(100%, 900px);
  margin: 0 auto !important;
  gap: 0.72rem;
}
.themed-game .adaptive-calc-main .mode-faq-item {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent-game) 16%, rgba(255,255,255,0.08));
  background:
    linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014)),
    rgba(8,9,12,0.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}
.themed-game .adaptive-calc-main .mode-faq-item:hover,
.themed-game .adaptive-calc-main .mode-faq-item[open] {
  border-color: color-mix(in srgb, var(--accent-game) 42%, rgba(255,255,255,0.14));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 24px 70px -56px var(--accent-game);
}
.themed-game .adaptive-calc-main .mode-faq-q {
  padding: 1.05rem 1.18rem;
  font-size: 0.98rem;
  font-weight: 750;
}
.themed-game .adaptive-calc-main .mode-faq-a {
  padding: 0 1.18rem 1.18rem;
  font-size: 0.92rem;
  line-height: 1.65;
}
.themed-game .adaptive-calc-main .mode-faq-item[open] .mode-faq-a {
  border-top-color: color-mix(in srgb, var(--accent-game) 18%, rgba(255,255,255,0.08));
}

/* Marvel: keep the green identity, but remove the hard rectangular wash in the top-left */
.themed-game .adaptive-calc-wrap[data-game="marvel"] {
  background: transparent !important;
  overflow: visible !important;
}
.themed-game .adaptive-calc-wrap[data-game="marvel"]::after {
  top: -180px;
  left: -18%;
  right: -18%;
  height: 760px;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(88,190,82,0.09) 44%,
      rgba(212,175,55,0.035) 62%,
      transparent 100%) !important;
  filter: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 34%, #000 58%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 34%, #000 58%, #000 80%, transparent 100%);
  opacity: 0.72;
}

/* ===== SEARCH OVERLAY ===== */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,8,15,0.85);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 600;
  display: none;
  padding: 8vh 1rem 1rem;
  animation: fadeIn 0.2s ease;
}
.search-overlay.open { display: block; }
.search-modal {
  max-width: 640px;
  margin: 0 auto;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: slideDown 0.3s var(--ease);
}
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--border);
}
.search-input-wrap input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 1.05rem;
}
.search-kbd {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-dim);
}
.search-results {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.8rem 0.6rem;
}
.search-section {
  padding: 0.5rem 0.8rem;
}
.search-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 0.6rem;
  padding: 0 0.3rem;
}
.search-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 0.3rem;
}
.search-suggestion {
  padding: 0.4rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--text-dim);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 200ms ease;
}
.search-suggestion:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.search-result-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 150ms ease;
}
.search-result-item:hover { background: var(--surface-hover); }
.search-result-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--surface);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.search-result-content { flex: 1; min-width: 0; }
.search-result-title { font-weight: 600; font-size: 0.92rem; color: var(--text); }
.search-result-desc { font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-tag {
  font-size: 0.7rem;
  padding: 2px 6px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 4px;
  font-weight: 600;
  flex-shrink: 0;
}
.search-empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.9rem;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== MODERN GAME MODE CARDS V2 ===== */
.game-mode-card-v2 {
  position: relative;
  padding: 1.8rem 1.5rem 1.5rem;
  border-radius: 20px;
  background: linear-gradient(145deg, #0f1522, #0a0d18);
  border: 1.5px solid rgba(255,255,255,0.08);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 300ms ease,
              box-shadow 300ms ease;
  opacity: 0;
  transform: translateY(20px);
  animation: cardSlideIn 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform;
}

@keyframes cardSlideIn {
  to { opacity: 1; transform: translateY(0); }
}

.game-mode-card-v2:hover {
  transform: translateY(-8px);
  border-color: var(--mode-color, var(--accent));
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.6),
              0 0 40px -8px var(--mode-color, var(--accent));
}

/* Animated background glow */
.game-mode-card-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, var(--mode-color, var(--accent))22, transparent 40%),
    radial-gradient(circle at 80% 90%, var(--mode-color-2, var(--accent-2))18, transparent 50%);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 400ms ease;
}

.game-mode-card-v2:hover .game-mode-card-bg {
  opacity: 1;
}

/* Shine effect on hover */
.game-mode-card-shine {
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.08) 50%,
    transparent 60%
  );
  pointer-events: none;
  transition: left 700ms ease;
}

.game-mode-card-v2:hover .game-mode-card-shine {
  left: 100%;
}

/* Discount badge — premium golden */
.game-mode-discount-v2 {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  padding: 0.35rem 0.9rem;
  background: linear-gradient(135deg, #ffd56a, #ffb020);
  color: #1a1410;
  font-weight: 800;
  font-size: 0.78rem;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(255,176,32,0.35),
              0 1px 2px rgba(0,0,0,0.3);
  z-index: 3;
  letter-spacing: 0.03em;
}

.game-mode-number-v2 {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 700;
  backdrop-filter: none;
}

/* Big illustration circle */
.game-mode-illustration-v2 {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 1.2rem;
  position: relative;
  z-index: 2;
}

.illustration-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1), transparent 60%),
    linear-gradient(145deg, var(--mode-color, var(--accent))33, var(--mode-color, var(--accent))11);
  border: 2px solid var(--mode-color, var(--accent))44;
  display: grid;
  place-items: center;
  position: relative;
  animation: pulseCircle 3s ease-in-out infinite;
}

@keyframes pulseCircle {
  0%, 100% { box-shadow: 0 0 0 0 var(--mode-color, var(--accent))44; }
  50% { box-shadow: 0 0 0 12px transparent; }
}

.illustration-circle span {
  font-size: 3.5rem;
  filter: drop-shadow(0 4px 12px var(--mode-color, var(--accent))66);
  transition: transform 300ms ease;
}

.game-mode-card-v2:hover .illustration-circle span {
  transform: scale(1.15) rotate(-5deg);
}

/* Content */
.game-mode-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.game-mode-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin-bottom: 0.3rem;
  text-align: center;
  color: var(--text);
}

.game-mode-tagline-v2 {
  text-align: center;
  color: var(--mode-color, var(--accent));
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.8rem;
}

.game-mode-desc {
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 1.2rem;
  padding: 0 0.5rem;
}

.game-mode-perks-v2 {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}

.game-mode-perks-v2 li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.84rem;
  color: var(--text);
  padding: 0.4rem 0.7rem;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  transition: background 200ms ease;
}

.game-mode-card-v2:hover .game-mode-perks-v2 li {
  background: rgba(255,255,255,0.05);
}

.perk-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mode-color, var(--accent));
  box-shadow: 0 0 8px var(--mode-color, var(--accent));
  flex-shrink: 0;
}

/* Buy button */
.game-mode-buy-v2 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem;
  background: linear-gradient(135deg, var(--mode-color, var(--accent)), var(--mode-color, var(--accent))cc);
  color: white;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 16px var(--mode-color, var(--accent))40;
}

.game-mode-buy-v2:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px var(--mode-color, var(--accent))80;
}

.game-mode-buy-v2 svg {
  transition: transform 250ms ease;
}

.game-mode-card-v2:hover .game-mode-buy-v2 svg {
  transform: translateX(4px);
}

/* Hide old cards if still rendering */
.game-mode-card { display: none !important; }

/* Back button */
.game-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
}

.game-back-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--border-strong);
  transform: translateX(-3px);
}

/* ===== CENTERING FIXES ===== */
.game-modes-header-wrap {
  justify-items: center !important;
  text-align: center;
}

.game-modes-header-info h1 {
  text-align: center;
}

.game-modes-subnav {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.game-modes-grid {
  justify-content: center;
}

/* Grid auto-fit better for 3 cards centered */
.game-modes-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 360px)) !important;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Valorant modes final layout override: keep 3 compact cards per row + boosters at right */
.game-modes-valorant .valorant-modes-layout-v5 {
  grid-template-columns: 720px 300px !important;
  gap: 1.35rem !important;
  justify-content: space-between !important;
  align-items: start !important;
  width: min(100%, 1100px) !important;
  max-width: 1100px !important;
  margin-inline: auto !important;
}
.game-modes-valorant #gameModesGrid {
  grid-template-columns: repeat(3, 232px) !important;
  gap: 0.72rem !important;
  width: 720px !important;
  max-width: 720px !important;
  justify-content: start !important;
  margin: 0 !important;
}
.game-modes-valorant .mode-card-sleek {
  min-height: 168px !important;
  padding: 0.78rem 0.82rem 0.74rem !important;
}
.game-modes-valorant .mode-card-sleek-title {
  font-size: 1rem !important;
}
.game-modes-valorant .mode-card-sleek-tagline {
  font-size: 0.69rem !important;
}
.game-modes-valorant .mode-card-sleek-perks li {
  font-size: 0.64rem !important;
}
.game-modes-valorant .valorant-boosters-panel-v5 {
  width: 300px !important;
  justify-self: end !important;
}
@media (max-width: 1120px) {
  .game-modes-valorant .valorant-modes-layout-v5 {
    grid-template-columns: 1fr !important;
    width: min(100%, 760px) !important;
    max-width: 760px !important;
  }
  .game-modes-valorant #gameModesGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 760px !important;
  }
  .game-modes-valorant .valorant-boosters-panel-v5 {
    width: 100% !important;
  }
}
@media (max-width: 760px) {
  .game-modes-valorant #gameModesGrid {
    grid-template-columns: 1fr !important;
  }
}

/* Valorant modes polished composition */
.game-modes-valorant .valorant-modes-layout-v5 {
  grid-template-columns: 900px 360px !important;
  gap: 2rem !important;
  width: min(100%, 1320px) !important;
  max-width: 1320px !important;
  align-items: start !important;
}
.game-modes-valorant #gameModesGrid {
  grid-template-columns: repeat(3, 286px) !important;
  grid-auto-rows: minmax(156px, auto) !important;
  gap: 0.9rem !important;
  width: 900px !important;
  max-width: 900px !important;
  align-items: stretch !important;
}
.game-modes-valorant #gameModesGrid::before {
  opacity: 0.018 !important;
  background-size: 460px auto !important;
}
.game-modes-valorant .mode-card-sleek {
  min-height: 156px !important;
  padding: 0.95rem 0.92rem 0.85rem !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.028), transparent 32%),
    radial-gradient(circle at 12% 0%, rgba(255,70,85,0.10), transparent 40%),
    linear-gradient(145deg, rgba(18,18,23,0.98), rgba(10,10,14,0.98)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.035) inset,
    0 22px 48px -42px rgba(0,0,0,0.95) !important;
}
.game-modes-valorant .mode-card-sleek:nth-child(7) {
  grid-column: 2 !important;
}
.game-modes-valorant .mode-card-sleek::before {
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.055) 38%, transparent 68%) !important;
  background-size: 240% 100% !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  opacity: 0 !important;
  transition: opacity 260ms ease, background-position 760ms ease !important;
}
.game-modes-valorant .mode-card-sleek:hover::before {
  opacity: 1 !important;
  background-position: 100% 0 !important;
}
.game-modes-valorant .mode-card-sleek::after {
  height: 2px !important;
  background: linear-gradient(90deg, rgba(212,175,55,0.9), rgba(255,70,85,0.72), transparent 86%) !important;
}
.game-modes-valorant .mode-card-sleek:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(212,175,55,0.42) !important;
  box-shadow:
    0 28px 72px -36px rgba(212,175,55,0.55),
    0 16px 42px -34px rgba(255,70,85,0.7),
    0 1px 0 rgba(255,255,255,0.055) inset !important;
}
.game-modes-valorant .mode-card-sleek-content {
  padding-left: 64px !important;
  min-height: 100% !important;
}
.game-modes-valorant .mode-card-sleek-top {
  min-height: 18px !important;
  margin: 0 0 0.3rem !important;
}
.game-modes-valorant .mode-card-badge {
  font-size: 0.54rem !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
}
.game-modes-valorant .mode-card-badge-popular {
  box-shadow: 0 8px 18px -12px rgba(212,175,55,0.8) !important;
}
.game-modes-valorant .mode-card-sleek-title {
  font-size: 1.03rem !important;
  line-height: 1.08 !important;
  margin-bottom: 0.28rem !important;
}
.game-modes-valorant .mode-card-sleek-tagline {
  font-size: 0.69rem !important;
  line-height: 1.34 !important;
  min-height: 34px !important;
  margin-bottom: 0.48rem !important;
  color: rgba(245,245,247,0.66) !important;
}
.game-modes-valorant .mode-card-sleek-perks {
  gap: 0.14rem !important;
  margin-bottom: 0.5rem !important;
}
.game-modes-valorant .mode-card-sleek-perks li {
  font-size: 0.64rem !important;
  line-height: 1.22 !important;
  color: rgba(245,245,247,0.70) !important;
}
.game-modes-valorant .mode-card-visual-v5 {
  left: 0.92rem !important;
  top: 0.95rem !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 35% 26%, rgba(255,255,255,0.18), transparent 58%),
    linear-gradient(135deg, #ff4655, #7a1623) !important;
  border-color: rgba(255,70,85,0.48) !important;
  box-shadow: 0 12px 28px -18px rgba(255,70,85,0.95) !important;
}
.game-modes-valorant .mode-card-visual-v5 img {
  width: 72% !important;
  height: 72% !important;
}
.game-modes-valorant .mode-card-sleek-foot {
  padding-top: 0 !important;
}
.game-modes-valorant .mode-card-sleek-cta-v3 {
  font-size: 0.68rem !important;
  color: rgba(255,255,255,0.88) !important;
}
.game-modes-valorant .valorant-boosters-panel-v5 {
  width: 360px !important;
  padding: 1.1rem !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,70,85,0.08), transparent 32%),
    linear-gradient(150deg, rgba(20,20,26,0.96), rgba(9,9,13,0.98)) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 26px 70px -44px rgba(0,0,0,0.95) !important;
}
.game-modes-valorant .valorant-boosters-panel-v5 h3 {
  font-size: 1.14rem !important;
}
.game-modes-valorant .valorant-boosters-panel-v5 p {
  max-width: 280px !important;
  font-size: 0.78rem !important;
}
.game-modes-valorant .valorant-booster-list-v5 {
  gap: 0.72rem !important;
}
.game-modes-valorant .valorant-booster-card-v5 {
  min-height: 86px !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  padding: 0.72rem !important;
  border-color: rgba(255,255,255,0.10) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018)) !important;
}
.game-modes-valorant .valorant-booster-avatar-v5 {
  width: 50px !important;
  height: 50px !important;
}
.game-modes-valorant .valorant-booster-card-v5:hover {
  transform: translateX(-4px) !important;
  border-color: rgba(212,175,55,0.42) !important;
}
@media (max-width: 1320px) {
  .game-modes-valorant .valorant-modes-layout-v5 {
    grid-template-columns: 1fr !important;
    width: min(100%, 900px) !important;
    max-width: 900px !important;
  }
  .game-modes-valorant .valorant-boosters-panel-v5 {
    width: 100% !important;
    position: relative !important;
    top: auto !important;
  }
}
@media (max-width: 940px) {
  .game-modes-valorant #gameModesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 620px !important;
    margin-inline: auto !important;
  }
  .game-modes-valorant .mode-card-sleek:nth-child(7) {
    grid-column: auto !important;
  }
}
@media (max-width: 620px) {
  .game-modes-valorant #gameModesGrid {
    grid-template-columns: 1fr !important;
  }
}

/* Valorant modes clean reset v6: calmer, tighter, properly composed */
.game-modes-valorant .valorant-modes-layout-v5 {
  grid-template-columns: 828px 320px !important;
  gap: 1.6rem !important;
  width: min(100%, 1200px) !important;
  max-width: 1200px !important;
  justify-content: center !important;
  align-items: start !important;
}
.game-modes-valorant #gameModesGrid {
  grid-template-columns: repeat(3, 260px) !important;
  grid-auto-rows: 150px !important;
  gap: 0.95rem !important;
  width: 828px !important;
  max-width: 828px !important;
  justify-content: start !important;
}
.game-modes-valorant .mode-card-sleek {
  min-height: 150px !important;
  height: 150px !important;
  padding: 0.95rem !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 36%),
    linear-gradient(145deg, rgba(16,16,21,0.98), rgba(10,10,14,0.98)) !important;
  box-shadow: 0 18px 42px -36px rgba(0,0,0,0.95) !important;
}
.game-modes-valorant .mode-card-sleek:nth-child(7) {
  grid-column: 2 !important;
}
.game-modes-valorant .mode-card-sleek::before {
  opacity: 0 !important;
}
.game-modes-valorant .mode-card-sleek::after {
  height: 2px !important;
  background: linear-gradient(90deg, rgba(212,175,55,0.95), rgba(255,70,85,0.65), transparent 82%) !important;
}
.game-modes-valorant .mode-card-sleek:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(212,175,55,0.46) !important;
  background:
    radial-gradient(circle at 86% 20%, rgba(255,70,85,0.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.045), transparent 38%),
    linear-gradient(145deg, rgba(20,20,25,0.99), rgba(11,11,15,0.99)) !important;
  box-shadow:
    0 22px 56px -34px rgba(212,175,55,0.62),
    0 16px 42px -36px rgba(255,70,85,0.78) !important;
}
.game-modes-valorant .mode-card-sleek-content {
  padding-left: 0 !important;
}
.game-modes-valorant .mode-card-sleek-top {
  min-height: 20px !important;
  margin: 0 48px 0.44rem 0 !important;
}
.game-modes-valorant .mode-card-badge {
  font-size: 0.52rem !important;
  padding: 2px 7px !important;
}
.game-modes-valorant .mode-card-sleek-title {
  font-size: 1rem !important;
  line-height: 1.08 !important;
  margin: 0 48px 0.3rem 0 !important;
  padding: 0 !important;
}
.game-modes-valorant .mode-card-sleek-tagline {
  min-height: 34px !important;
  margin: 0 0 0.52rem !important;
  font-size: 0.72rem !important;
  line-height: 1.34 !important;
  color: rgba(245,245,247,0.68) !important;
}
.game-modes-valorant .mode-card-sleek-perks {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.14rem !important;
  margin: 0 0 0.48rem !important;
}
.game-modes-valorant .mode-card-sleek-perks li {
  font-size: 0.64rem !important;
  line-height: 1.18 !important;
}
.game-modes-valorant .mode-card-sleek-perks li:nth-child(n+3) {
  display: none !important;
}
.game-modes-valorant .mode-card-sleek-foot {
  margin-top: auto !important;
}
.game-modes-valorant .mode-card-sleek-cta-v3 {
  font-size: 0.69rem !important;
}
.game-modes-valorant .mode-card-visual-v5 {
  left: auto !important;
  right: 0.88rem !important;
  top: 0.88rem !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 35% 26%, rgba(255,255,255,0.18), transparent 58%),
    linear-gradient(135deg, #ff4655, #64121d) !important;
  border-color: rgba(255,70,85,0.45) !important;
  box-shadow: 0 10px 24px -18px rgba(255,70,85,0.95) !important;
}
.game-modes-valorant .mode-card-visual-v5 img {
  width: 70% !important;
  height: 70% !important;
}
.game-modes-valorant .valorant-boosters-panel-v5 {
  width: 320px !important;
  padding: 1rem !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255,70,85,0.055), transparent 35%),
    linear-gradient(150deg, rgba(17,17,22,0.96), rgba(9,9,13,0.98)) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.game-modes-valorant .valorant-booster-card-v5 {
  min-height: 76px !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  padding: 0.66rem !important;
  border-radius: 11px !important;
}
.game-modes-valorant .valorant-booster-avatar-v5 {
  width: 44px !important;
  height: 44px !important;
}
@media (max-width: 1220px) {
  .game-modes-valorant .valorant-modes-layout-v5 {
    grid-template-columns: 1fr !important;
    width: min(100%, 828px) !important;
  }
  .game-modes-valorant .valorant-boosters-panel-v5 {
    width: 100% !important;
    position: relative !important;
    top: auto !important;
  }
}
@media (max-width: 860px) {
  .game-modes-valorant #gameModesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 560px !important;
    grid-auto-rows: 150px !important;
    margin-inline: auto !important;
  }
  .game-modes-valorant .mode-card-sleek:nth-child(7) {
    grid-column: auto !important;
  }
}

/* Valorant cards v7: minimal, typographic, no icons */
.game-modes-valorant .valorant-modes-layout-v5 {
  grid-template-columns: 870px 320px !important;
  gap: 1.55rem !important;
  width: min(100%, 1230px) !important;
  max-width: 1230px !important;
}
.game-modes-valorant #gameModesGrid {
  grid-template-columns: repeat(3, 276px) !important;
  grid-auto-rows: 132px !important;
  gap: 0.86rem !important;
  width: 870px !important;
  max-width: 870px !important;
}
.game-modes-valorant .mode-card-sleek {
  height: 132px !important;
  min-height: 132px !important;
  padding: 0.92rem 0.98rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.115) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.042), rgba(255,255,255,0.014)),
    linear-gradient(145deg, rgba(15,15,20,0.99), rgba(8,8,12,0.99)) !important;
  box-shadow:
    0 18px 44px -36px rgba(0,0,0,0.9),
    inset 0 1px 0 rgba(255,255,255,0.035) !important;
}
.game-modes-valorant .mode-card-sleek::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  background:
    radial-gradient(circle at 72% 22%, rgba(212,175,55,0.14), transparent 32%),
    linear-gradient(115deg, transparent, rgba(255,255,255,0.055), transparent) !important;
  transition: opacity 260ms ease !important;
  pointer-events: none !important;
}
.game-modes-valorant .mode-card-sleek::after {
  height: 1px !important;
  background: linear-gradient(90deg, rgba(212,175,55,0.0), rgba(212,175,55,0.9), rgba(255,70,85,0.56), rgba(212,175,55,0)) !important;
  opacity: 0.52 !important;
}
.game-modes-valorant .mode-card-sleek:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(212,175,55,0.44) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    linear-gradient(145deg, rgba(18,18,23,0.99), rgba(9,9,13,0.99)) !important;
  box-shadow:
    0 24px 58px -36px rgba(212,175,55,0.58),
    0 12px 34px -30px rgba(255,70,85,0.58),
    inset 0 1px 0 rgba(255,255,255,0.055) !important;
}
.game-modes-valorant .mode-card-sleek:hover::before {
  opacity: 1 !important;
}
.game-modes-valorant .mode-card-sleek-content {
  padding-left: 0 !important;
  min-height: 100% !important;
}
.game-modes-valorant .mode-card-sleek-top {
  min-height: 20px !important;
  margin: 0 0 0.58rem !important;
}
.valorant-service-chip-v6 {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 0.46rem;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.22);
  background: rgba(212,175,55,0.075);
  color: var(--premium-2);
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0;
}
.game-modes-valorant .mode-card-badge {
  height: 20px !important;
  padding: 0 0.48rem !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.54rem !important;
}
.game-modes-valorant .mode-card-sleek-title {
  margin: 0 0 0.42rem !important;
  font-size: 1.08rem !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}
.game-modes-valorant .mode-card-sleek-tagline {
  margin: 0 !important;
  min-height: auto !important;
  max-width: 220px !important;
  color: rgba(245,245,247,0.64) !important;
  font-size: 0.76rem !important;
  line-height: 1.36 !important;
}
.game-modes-valorant .mode-card-sleek-perks,
.game-modes-valorant .mode-card-visual-v5 {
  display: none !important;
}
.game-modes-valorant .mode-card-sleek-foot {
  margin-top: auto !important;
  padding-top: 0 !important;
}
.game-modes-valorant .mode-card-sleek-cta-v3 {
  color: rgba(255,255,255,0.92) !important;
  font-size: 0.72rem !important;
}
.game-modes-valorant .mode-card-sleek:hover .mode-card-sleek-cta-v3 {
  color: var(--premium-2) !important;
}
.game-modes-valorant .mode-card-sleek:nth-child(7) {
  grid-column: 2 !important;
}
.game-modes-valorant .valorant-boosters-panel-v5 {
  width: 320px !important;
}
@media (max-width: 1240px) {
  .game-modes-valorant .valorant-modes-layout-v5 {
    grid-template-columns: 1fr !important;
    width: min(100%, 870px) !important;
  }
  .game-modes-valorant .valorant-boosters-panel-v5 {
    width: 100% !important;
    position: relative !important;
    top: auto !important;
  }
}
@media (max-width: 900px) {
  .game-modes-valorant #gameModesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 600px !important;
    grid-auto-rows: 132px !important;
    margin-inline: auto !important;
  }
  .game-modes-valorant .mode-card-sleek:nth-child(7) {
    grid-column: auto !important;
  }
}

/* Valorant cards v8: better proportions, softer premium panels */
.game-modes-valorant .valorant-modes-layout-v5 {
  grid-template-columns: 900px 320px !important;
  gap: 1.75rem !important;
  width: min(100%, 1260px) !important;
  max-width: 1260px !important;
}
.game-modes-valorant #gameModesGrid {
  grid-template-columns: repeat(3, 280px) !important;
  grid-auto-rows: 168px !important;
  gap: 1.25rem !important;
  width: 900px !important;
  max-width: 900px !important;
}
.game-modes-valorant .mode-card-sleek {
  height: 168px !important;
  min-height: 168px !important;
  padding: 1.08rem 1.1rem 1rem !important;
  border-radius: 18px !important;
  border-color: rgba(255,255,255,0.13) !important;
  background:
    radial-gradient(circle at 86% 0%, rgba(255,70,85,0.10), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014)),
    linear-gradient(145deg, rgba(17,17,22,0.99), rgba(8,8,12,0.99)) !important;
  box-shadow:
    0 22px 54px -42px rgba(0,0,0,0.96),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  overflow: hidden !important;
}
.game-modes-valorant .mode-card-sleek::after {
  left: 1rem !important;
  right: 1rem !important;
  width: auto !important;
  bottom: 0.72rem !important;
  height: 1px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, rgba(212,175,55,0.85), rgba(255,70,85,0.54), rgba(255,255,255,0.02)) !important;
}
.game-modes-valorant .mode-card-sleek:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(212,175,55,0.46) !important;
  box-shadow:
    0 28px 70px -40px rgba(212,175,55,0.7),
    0 14px 42px -34px rgba(255,70,85,0.75),
    inset 0 1px 0 rgba(255,255,255,0.065) !important;
}
.game-modes-valorant .mode-card-sleek-top {
  margin-bottom: 0.78rem !important;
}
.game-modes-valorant .mode-card-sleek-title {
  font-size: 1.18rem !important;
  margin-bottom: 0.48rem !important;
}
.game-modes-valorant .mode-card-sleek-tagline {
  max-width: 235px !important;
  padding-right: 3.2rem !important;
  font-size: 0.8rem !important;
  line-height: 1.42 !important;
}
.game-modes-valorant .mode-card-sleek-content {
  position: relative !important;
  z-index: 2 !important;
}
.game-modes-valorant .mode-card-bg-img-v8 {
  position: absolute;
  right: -0.1rem;
  bottom: -0.32rem;
  width: 112px;
  height: 112px;
  object-fit: contain;
  opacity: 0.28;
  filter: saturate(1.16) contrast(1.05) drop-shadow(0 18px 24px rgba(0,0,0,0.48));
  transform: rotate(-7deg);
  pointer-events: none;
  z-index: 1;
  transition: opacity 260ms ease, transform 320ms var(--ease), filter 320ms ease;
}
.game-modes-valorant .mode-card-sleek:hover .mode-card-bg-img-v8 {
  opacity: 0.48;
  transform: translateY(-8px) rotate(-2deg) scale(1.12);
  filter: saturate(1.3) contrast(1.08) drop-shadow(0 22px 34px rgba(212,175,55,0.20));
}
.game-modes-valorant .mode-card-sleek-foot {
  margin-bottom: 0.2rem !important;
}
.game-modes-valorant .mode-card-sleek-cta-v3 {
  font-size: 0.74rem !important;
}
@media (max-width: 1280px) {
  .game-modes-valorant .valorant-modes-layout-v5 {
    grid-template-columns: 1fr !important;
    width: min(100%, 900px) !important;
  }
  .game-modes-valorant .valorant-boosters-panel-v5 {
    width: 100% !important;
  }
}
@media (max-width: 940px) {
  .game-modes-valorant #gameModesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 168px !important;
    width: 100% !important;
    max-width: 620px !important;
  }
}

/* Valorant v9 placement: same card size, modes left, boosters right */
.game-modes-valorant .valorant-modes-layout-v5 {
  grid-template-columns: 900px 320px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
}
.game-modes-valorant #gameModesGrid {
  justify-self: start !important;
  margin: 0 !important;
}
.game-modes-valorant .valorant-boosters-panel-v5 {
  justify-self: end !important;
  align-self: start !important;
}
@media (max-width: 1280px) {
  .game-modes-valorant .valorant-modes-layout-v5 {
    grid-template-columns: 1fr !important;
    width: min(100%, 900px) !important;
    max-width: 900px !important;
    margin-inline: auto !important;
  }
  .game-modes-valorant .valorant-boosters-panel-v5 {
    width: 100% !important;
    justify-self: stretch !important;
  }
}

/* Valorant v10 placement: keep the screenshot layout, push boosters further right */
.game-modes-valorant .valorant-modes-layout-v5 {
  grid-template-columns: minmax(900px, 1fr) 360px !important;
  gap: clamp(1.8rem, 4vw, 4.2rem) !important;
  width: min(calc(100vw - 64px), 1720px) !important;
  max-width: 1720px !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
  justify-content: space-between !important;
}
.game-modes-valorant #gameModesGrid {
  grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
  width: 100% !important;
  max-width: 1280px !important;
}
.game-modes-valorant .valorant-boosters-panel-v5 {
  width: 360px !important;
  justify-self: end !important;
}
@media (max-width: 1280px) {
  .game-modes-valorant .valorant-modes-layout-v5 {
    grid-template-columns: 1fr !important;
    width: min(100%, 900px) !important;
    max-width: 900px !important;
    margin-inline: auto !important;
    margin-left: auto !important;
    transform: none !important;
  }
  .game-modes-valorant #gameModesGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 900px !important;
  }
  .game-modes-valorant .valorant-boosters-panel-v5 {
    width: 100% !important;
  }
}

/* Valorant v11 exact page layout: cards on the left, boosters on the page right */
[data-page="game-modes"].game-modes-valorant > .container {
  max-width: none !important;
  width: 100% !important;
  padding-left: clamp(1.6rem, 2vw, 2rem) !important;
  padding-right: clamp(1.6rem, 2vw, 2rem) !important;
}
.game-modes-valorant .valorant-modes-layout-v5 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(315px, 21vw, 350px) !important;
  gap: clamp(2.2rem, 4vw, 4.8rem) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
  align-items: start !important;
}
.game-modes-valorant #gameModesGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 178px !important;
  gap: 1.25rem !important;
  width: 100% !important;
  max-width: min(100%, 1288px) !important;
  margin: 0 !important;
  justify-content: stretch !important;
}
.game-modes-valorant .mode-card-sleek {
  height: 178px !important;
  min-height: 178px !important;
}
.game-modes-valorant .mode-card-sleek:nth-child(7) {
  grid-column: 2 !important;
}
.game-modes-valorant .valorant-boosters-panel-v5 {
  width: min(100%, 340px) !important;
  justify-self: end !important;
  align-self: start !important;
  position: sticky !important;
  top: 92px !important;
  padding: 0.9rem !important;
}
@media (max-width: 1280px) {
  .game-modes-valorant .valorant-modes-layout-v5 {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 335px) !important;
    gap: 1.8rem !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
  .game-modes-valorant #gameModesGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
  .game-modes-valorant .valorant-boosters-panel-v5 {
    position: sticky !important;
    top: 92px !important;
    width: min(100%, 325px) !important;
  }
}
@media (max-width: 1050px) {
  .game-modes-valorant .valorant-modes-layout-v5 {
    grid-template-columns: 1fr !important;
    max-width: 920px !important;
    margin-inline: auto !important;
  }
  .game-modes-valorant .valorant-boosters-panel-v5 {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
  }
}
@media (max-width: 900px) {
  .game-modes-valorant #gameModesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .game-modes-valorant .mode-card-sleek:nth-child(7) {
    grid-column: auto !important;
  }
}
.game-modes-valorant .valorant-booster-list-v5 {
  gap: 0.58rem !important;
}
.game-modes-valorant .valorant-booster-card-v5 {
  min-height: 72px !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  padding: 0.62rem !important;
}
.game-modes-valorant .valorant-booster-avatar-v5 {
  width: 42px !important;
  height: 42px !important;
}
.game-modes-valorant .valorant-booster-more-v5 {
  width: 100%;
  min-height: 40px;
  margin-top: 0.72rem;
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(212,175,55,0.16), rgba(255,70,85,0.05)),
    rgba(255,255,255,0.025);
  color: var(--premium-2, #f0c860);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
}
.game-modes-valorant .valorant-booster-more-v5:hover {
  transform: translateY(-1px);
  border-color: rgba(212,175,55,0.42);
  box-shadow: 0 14px 34px -26px rgba(212,175,55,0.75);
}

/* Shared premium modes layout: Valorant, Overwatch, Apex */
[data-page="game-modes"].game-modes-featured > .container {
  max-width: none !important;
  width: 100% !important;
  padding-left: clamp(1.6rem, 2vw, 2rem) !important;
  padding-right: clamp(1.6rem, 2vw, 2rem) !important;
}
.game-modes-featured .valorant-modes-layout-v5 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(315px, 21vw, 350px) !important;
  gap: clamp(2.2rem, 4vw, 4.8rem) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
  align-items: start !important;
}
.game-modes-featured #gameModesGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 178px !important;
  gap: 1.25rem !important;
  width: 100% !important;
  max-width: min(100%, 1288px) !important;
  margin: 0 !important;
  justify-content: stretch !important;
}
.game-modes-featured .mode-card-sleek {
  height: 178px !important;
  min-height: 178px !important;
}
.game-modes-featured .mode-card-sleek:nth-child(7) {
  grid-column: 2 !important;
}
.game-modes-featured .valorant-boosters-panel-v5 {
  width: min(100%, 340px) !important;
  justify-self: end !important;
  align-self: start !important;
  position: sticky !important;
  top: 92px !important;
  padding: 0.9rem !important;
}
.game-modes-featured .valorant-booster-list-v5 {
  gap: 0.58rem !important;
}
.game-modes-featured .valorant-booster-card-v5 {
  min-height: 72px !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  padding: 0.62rem !important;
}
.game-modes-featured .valorant-booster-avatar-v5 {
  width: 42px !important;
  height: 42px !important;
}
.game-modes-featured .valorant-booster-more-v5 {
  width: 100%;
  min-height: 40px;
  margin-top: 0.72rem;
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(212,175,55,0.16), rgba(var(--game-rgb, 255,70,85),0.05)),
    rgba(255,255,255,0.025);
  color: var(--premium-2, #f0c860);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
}
.game-modes-featured .valorant-booster-more-v5:hover {
  transform: translateY(-1px);
  border-color: rgba(212,175,55,0.42);
  box-shadow: 0 14px 34px -26px rgba(212,175,55,0.75);
}
@media (max-width: 1280px) {
  .game-modes-featured .valorant-modes-layout-v5 {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 335px) !important;
    gap: 1.8rem !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
  .game-modes-featured #gameModesGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
  .game-modes-featured .valorant-boosters-panel-v5 {
    position: sticky !important;
    top: 92px !important;
    width: min(100%, 325px) !important;
  }
}
@media (max-width: 1050px) {
  .game-modes-featured .valorant-modes-layout-v5 {
    grid-template-columns: 1fr !important;
    max-width: 920px !important;
    margin-inline: auto !important;
  }
  .game-modes-featured .valorant-boosters-panel-v5 {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
  }
}
@media (max-width: 900px) {
  .game-modes-featured #gameModesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
.game-modes-featured .mode-card-sleek:nth-child(7) {
  grid-column: auto !important;
  }
}
.game-modes-featured .mode-card-sleek-content {
  position: relative !important;
  z-index: 2 !important;
  min-height: 100% !important;
}
.game-modes-featured .mode-card-bg-img-v8 {
  position: absolute;
  right: -0.06rem;
  bottom: -0.26rem;
  width: 116px;
  height: 116px;
  object-fit: contain;
  opacity: 0.30;
  filter: saturate(1.16) contrast(1.05) drop-shadow(0 18px 24px rgba(0,0,0,0.48));
  transform: rotate(-7deg);
  pointer-events: none;
  z-index: 1;
  transition: opacity 260ms ease, transform 320ms var(--ease), filter 320ms ease;
}
.game-modes-featured .mode-card-sleek:hover .mode-card-bg-img-v8 {
  opacity: 0.50;
  transform: translateY(-8px) rotate(-2deg) scale(1.12);
  filter: saturate(1.3) contrast(1.08) drop-shadow(0 22px 34px rgba(212,175,55,0.18));
}
.game-modes-featured .mode-card-sleek::after {
  left: 1rem !important;
  right: 1rem !important;
  bottom: 0.72rem !important;
  width: auto !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(212,175,55,0.84), rgba(var(--game-rgb, 255,70,85),0.45), rgba(255,255,255,0.02)) !important;
  opacity: 0.48 !important;
}
.game-modes-featured .mode-card-sleek:hover::after {
  opacity: 0.82 !important;
}
.game-modes-featured .mode-card-sleek-foot {
  margin-top: auto !important;
  padding-top: 0 !important;
}
.game-modes-featured .mode-card-sleek-cta-v3 {
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.72rem !important;
  gap: 0.4rem !important;
}
.game-modes-featured .mode-card-sleek:hover .mode-card-sleek-cta-v3 {
  color: var(--premium-2, #f0c860) !important;
  gap: 0.6rem !important;
}
.game-modes-featured .mode-card-sleek:hover .mode-card-sleek-cta-v3 svg {
  transform: translateX(3px);
}

/* Options premium grid - fix centering */
.options-grid {
  justify-items: stretch;
  max-width: 900px;
  margin: 0 auto;
}

/* Section headers - better centering */
.section-head {
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* GPU-accelerate hoverable elements */
.game-card, .option-card, .booster-card, .mp-product,
.blog-card, .course-card, .game-mode-card-v2 {
  will-change: transform;
  contain: layout style paint;
}

/* Reduce animations on low-perf devices */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Lazy-load heavy backdrop-filters only where needed */
.backdrop-blur {
  backdrop-filter: none;
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* PERF : containment fort sur chaque page (layout + paint + style isolés).
   Combine avec content-visibility:auto sur les pages inactives pour skip
   leur rendu entièrement quand on n'est pas dessus. */
.page { contain: layout paint style; }
.page:not(.active) { content-visibility: hidden; }

/* ===== PREV/NEXT MODE NAV IN CALC ===== */
.mode-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.mode-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms ease;
}

.mode-nav-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.mode-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mode-nav-current {
  flex: 1;
  text-align: center;
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
}

.mode-nav-current .label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.1rem;
}

/* ===== TRANSPARENT HEADER ON SCROLL ===== */
.site-header {
  transition: background 400ms ease, backdrop-filter 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}

.site-header.scrolled {
  background: rgba(8, 8, 12, 0.92);
  border-bottom-color: rgba(255,255,255,0.05);
  box-shadow: 0 4px 30px rgba(0,0,0,0.2);
}

.site-header.scrolled .nav-link-outlined {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.15) !important;
}

/* ===== PAYMENT LOGOS ===== */
.payment-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0;
  align-items: center;
  justify-content: center;
}

.payment-logo {
  width: 48px;
  height: 32px;
  border-radius: 6px;
  background: white;
  display: grid;
  place-items: center;
  padding: 4px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 200ms ease;
}

.payment-logo:hover { transform: translateY(-2px); }

.payment-logo.dark {
  background: #000;
}

.payment-logo svg { max-width: 100%; max-height: 100%; }

.payment-logos-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
}

.trust-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 0.8rem;
}

.trust-row .trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ===== BOOSTER SELECTOR PANEL ===== */
.booster-selector-panel {
  margin-top: 0;
  padding: 0.45rem 0 0.1rem 0.65rem;
  background: transparent;
  border-left: 2px solid rgba(212,175,55,0.45);
  border-radius: 0;
  animation: slideDown 300ms ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); max-height: 0; }
  to { opacity: 1; transform: translateY(0); max-height: 500px; }
}

.booster-selector-title {
  font-size: 0.66rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.45rem;
  font-weight: 600;
}

.booster-selector-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 180px;
  overflow-y: auto;
}

.booster-selector-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.45rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
}

.booster-selector-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--accent);
  border-radius: 10px 0 0 10px;
  transform: scaleY(0);
  transition: transform 200ms ease;
}

.booster-selector-item:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
  transform: translateX(3px);
}

.booster-selector-item:hover::before,
.booster-selector-item.selected::before {
  transform: scaleY(1);
}

.booster-selector-item.selected {
  border-color: var(--accent);
  background: rgba(212,175,55,0.1);
}

.booster-selector-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.7rem;
  color: white;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  position: relative;
}

.booster-selector-avatar.online::after {
  content: '';
  position: absolute;
  bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  background: #22c55e;
  border: 2px solid var(--bg);
  border-radius: 50%;
}

.booster-selector-info {
  flex: 1;
  min-width: 0;
}

.booster-selector-name {
  font-weight: 600;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.booster-selector-name .tier-pill {
  padding: 0.1rem 0.4rem;
  font-size: 0.65rem;
  border-radius: 4px;
  background: linear-gradient(135deg, #ffb636, #ff8c00);
  color: #1a1410;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.booster-selector-stats {
  font-size: 0.68rem;
  color: var(--text-dim);
  display: flex;
  gap: 0.6rem;
  margin-top: 0.1rem;
}

.booster-selector-rate {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.72rem;
  flex-shrink: 0;
}

/* ===== CUSTOM OFFER CTA ===== */
.custom-offer-card {
  margin-top: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(240,216,120,0.08));
  border: 1.5px solid rgba(212,175,55,0.3);
  border-radius: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.custom-offer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(212,175,55,0.2), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(240,216,120,0.15), transparent 50%);
  pointer-events: none;
}

.custom-offer-card > * { position: relative; z-index: 1; }

.custom-offer-icon {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
}

.custom-offer-card h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #d4af37, #f0d878);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.custom-offer-card p {
  color: var(--text-dim);
  margin-bottom: 1.2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.btn-custom-offer {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  background: linear-gradient(135deg, #d4af37, #f0d878);
  color: white;
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 250ms ease;
  box-shadow: 0 8px 24px rgba(212,175,55,0.4);
}

.btn-custom-offer:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 32px rgba(212,175,55,0.6);
}

/* ===== NEW FEATURES: ADMIN PANEL + BOOSTER DASHBOARD ===== */
.admin-stat-card {
  padding: 1.2rem;
  background: linear-gradient(135deg, var(--bg-elev), var(--surface));
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform 200ms ease;
}
.admin-stat-card:hover { transform: translateY(-2px); }
.admin-stat-card .stat-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
}
.admin-stat-card .stat-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.2rem;
}
.admin-stat-card .stat-delta {
  font-size: 0.78rem;
  font-weight: 600;
}
.admin-stat-card .stat-delta.up { color: #4ade80; }
.admin-stat-card .stat-delta.down { color: #ef4444; }

/* ===== 2FA MODAL ===== */
.twofa-card {
  padding: 2rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
}
.twofa-qrcode {
  width: 180px; height: 180px;
  margin: 1rem auto;
  padding: 1rem;
  background: white;
  border-radius: 12px;
}
.twofa-code-input {
  letter-spacing: 0.5em;
  font-size: 1.4rem;
  text-align: center;
  font-family: var(--font-mono);
}
.twofa-backup-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--surface);
  border-radius: 10px;
  margin: 1rem 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.twofa-backup-codes span {
  padding: 0.4rem;
  background: var(--bg);
  border-radius: 6px;
  text-align: center;
  letter-spacing: 0.1em;
}
/* ===== CHATBOT FLOTTANT ===== */
.eb-chatbot-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #f0c860);
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.45), 0 2px 6px rgba(0,0,0,0.3);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0c;
  transition: all 0.25s ease;
  animation: eb-chatbot-pulse 2.5s infinite;
}
.eb-chatbot-toggle:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.6);
}
.eb-chatbot-toggle.open {
  /* Fenêtre chat ouverte → on masque le bouton pour éviter qu'il "surelève" la fenêtre */
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  animation: none;
}
@keyframes eb-chatbot-pulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(212, 175, 55, 0.45), 0 0 0 0 rgba(212, 175, 55, 0.5); }
  50% { box-shadow: 0 6px 24px rgba(212, 175, 55, 0.45), 0 0 0 12px rgba(212, 175, 55, 0); }
}
.eb-chatbot-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ef4444;
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #07060a;
}
.eb-chatbot-window {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 370px;
  max-width: calc(100vw - 32px);
  height: 500px;
  max-height: calc(100vh - 48px);
  background: #ffffff;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 0 24px rgba(212, 175, 55, 0.08);
  z-index: 9997;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
}
.eb-chatbot-window.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: all;
}
.eb-chatbot-header {
  background: linear-gradient(135deg, #14100a 0%, #1a1408 100%);
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(212,175,55,0.35);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.eb-chatbot-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14100a, #0a0806);
  border: 1px solid rgba(212,175,55,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  overflow: hidden;
}
.eb-chatbot-avatar img { width: 78%; height: 78%; object-fit: contain; }
.eb-chatbot-avatar img.persona-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.eb-chatbot-header-info { flex: 1; min-width: 0; }
.eb-chatbot-header-info strong { display: block; color: #f5d76e; font-size: 0.95rem; }
.eb-chatbot-header-info span { color: #4ade80; font-size: 0.75rem; display: flex; align-items: center; gap: 0.3rem; }
.eb-chatbot-header-info span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: pulse 2s infinite; }
.eb-chatbot-header-info span.hidden-status { display: none !important; }
.eb-chatbot-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 6px;
  transition: all 0.15s;
}
.eb-chatbot-close { color: rgba(255,240,200,0.7); }
.eb-chatbot-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.eb-chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
  background: #ffffff;
}
.eb-chatbot-messages::-webkit-scrollbar { width: 5px; }
.eb-chatbot-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 5px; }
.eb-msg {
  max-width: 85%;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.42;
  animation: eb-msg-in 0.25s ease;
}
@keyframes eb-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.eb-msg-bot {
  background: #f3f2f5;
  border: 1px solid rgba(0,0,0,0.06);
  color: #1a1a1f;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.eb-msg-user {
  background: linear-gradient(135deg, #d4af37, #f0c860);
  color: #0a0a0c;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.eb-msg a { color: #b8860b; text-decoration: underline; cursor: pointer; }
.eb-msg-user a { color: #0a0a0c; }
.eb-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.eb-quick-reply {
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.3);
  color: var(--accent);
  padding: 0.4rem 0.75rem;
  border-radius: 16px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.eb-quick-reply:hover {
  background: rgba(212,175,55,0.2);
  transform: translateY(-1px);
}
.eb-chatbot-typing {
  display: flex;
  gap: 4px;
  padding: 0.7rem 0.95rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  width: fit-content;
}
.eb-chatbot-typing span {
  width: 6px;
  height: 6px;
  background: var(--text-dim);
  border-radius: 50%;
  animation: eb-typing 1.4s infinite ease-in-out;
}
.eb-chatbot-typing span:nth-child(2) { animation-delay: 0.2s; }
.eb-chatbot-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes eb-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}
.eb-chatbot-input-wrap {
  padding: 0.7rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  display: flex;
  gap: 0.5rem;
  background: #fafafa;
}

/* === CTA "Talk to support" : caché tant que l'user n'a pas envoyé de message === */
.eb-chatbot-human-cta.hidden-until-first-msg { display: none !important; }

/* === Bandeau équipe support (row of avatars in header) === */
.eb-chatbot-team-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem 0.9rem;
  background: linear-gradient(135deg, rgba(212,175,55,0.14), rgba(240,200,96,0.06));
  border-bottom: 1px solid rgba(212,175,55,0.24);
}
.eb-chatbot-team-avatars {
  display: flex;
  align-items: center;
  gap: -8px;
}
.eb-chatbot-team-avatars img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #1a171f;
  margin-left: -8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.eb-chatbot-team-avatars img:first-child { margin-left: 0; }
.eb-chatbot-team-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #f4ecd8;
  text-align: center;
}
.eb-chatbot-team-wait {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: #d8cfb8;
}
.eb-chatbot-team-wait::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.6);
  animation: pulse 2s infinite;
}

/* === Indicateur "Vu / Seen" sous les messages user quand persona humaine === */
.eb-chatbot-seen {
  align-self: flex-end;
  margin: -0.35rem 0.15rem 0 0;
  padding: 0;
  font-size: 0.68rem;
  color: #7a7263;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  opacity: 0;
  animation: eb-seen-fade 0.3s ease forwards;
}
.eb-chatbot-seen svg {
  width: 11px;
  height: 11px;
  opacity: 0.8;
}
@keyframes eb-seen-fade {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Bulle "waiting" pendant l'attente humain === */
.eb-chatbot-waiting {
  align-self: stretch;
  margin: 0.4rem 0;
  padding: 0.65rem 0.85rem;
  background: rgba(212,175,55,0.10);
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 12px;
  color: #f4ecd8;
  font-size: 0.82rem;
  text-align: center;
}
.eb-chatbot-waiting .dots span {
  display: inline-block;
  animation: eb-typing 1.4s infinite;
  color: #f5d76e;
  font-weight: 700;
}
.eb-chatbot-waiting .dots span:nth-child(2) { animation-delay: 0.2s; }
.eb-chatbot-waiting .dots span:nth-child(3) { animation-delay: 0.4s; }

/* === Petit "?" info-tip discret en bas du chat (Kai persona seulement) === */
.eb-chatbot-info-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 0.9rem 0.4rem;
  padding: 0.35rem 0.7rem;
  color: #8a8272;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 999px;
  cursor: help;
  transition: color 0.15s;
  position: relative;
}
.eb-chatbot-info-tip:hover { color: #d8cfb8; }
.eb-chatbot-info-tip svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.7; }
.eb-chatbot-info-tip .eb-tip-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 220px;
  max-width: 300px;
  padding: 0.6rem 0.85rem;
  background: linear-gradient(180deg, #24202a, #1a171f);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 10px;
  color: #d8cfb8;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.18s;
  z-index: 10;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.eb-chatbot-info-tip:hover .eb-tip-bubble,
.eb-chatbot-info-tip:focus .eb-tip-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* === Persona system : CTA "Talk to support" (design épuré, subtile) === */
.eb-chatbot-human-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.5rem 0.9rem 0.6rem;
  padding: 0.55rem 0.9rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  color: #d8cfb8;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 500;
}
.eb-chatbot-human-cta:hover {
  border-color: rgba(212,175,55,0.6);
  color: #f5d76e;
  background: rgba(212,175,55,0.06);
}
.eb-chatbot-human-cta svg {
  width: 14px; height: 14px; opacity: 0.85;
  transition: opacity 0.15s;
}
.eb-chatbot-human-cta:hover svg { opacity: 1; }
.eb-chatbot-human-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.6);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
.eb-chatbot-human-wait {
  font-size: 0.7rem;
  color: #a59d8c;
  opacity: 0.85;
}

/* === Persona system : "X joined the chat" system message === */
.eb-chatbot-system {
  align-self: center;
  margin: 0.8rem auto 0.3rem;
  padding: 0.35rem 0.85rem;
  background: rgba(212,175,55,0.10);
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 999px;
  color: #d8cfb8;
  font-size: 0.72rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.eb-chatbot-system-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.5);
}

/* === Coupon bubble spéciale === */
.eb-chatbot-coupon {
  align-self: center;
  margin: 0.5rem auto;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, #fff2c0 0%, #f5d76e 50%, #e6c14a 100%);
  color: #1a1206;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(212,175,55,0.35);
  text-align: center;
  max-width: 90%;
}
.eb-chatbot-coupon-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.8;
  margin-bottom: 0.3rem;
}
.eb-chatbot-coupon-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.35rem;
  font-weight: 700;
  padding: 0.35rem 0.9rem;
  background: rgba(26,18,6,0.15);
  border: 1.5px dashed rgba(26,18,6,0.45);
  border-radius: 8px;
  display: inline-block;
  margin: 0.2rem 0;
  cursor: pointer;
  user-select: all;
}
.eb-chatbot-coupon-desc {
  font-size: 0.75rem;
  margin-top: 0.4rem;
  opacity: 0.85;
}
.eb-chatbot-input {
  flex: 1;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  color: #1a1a1f;
  padding: 0.6rem 0.85rem;
  border-radius: 22px;
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s;
}
.eb-chatbot-input::placeholder { color: rgba(0,0,0,0.35); }
.eb-chatbot-input:focus { border-color: #d4af37; box-shadow: 0 0 0 3px rgba(212,175,55,0.12); }
.eb-chatbot-send {
  background: linear-gradient(135deg, #d4af37, #f0c860);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0c;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.eb-chatbot-send:hover { transform: scale(1.05); }
.eb-chatbot-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

@media (max-width: 480px) {
  .eb-chatbot-window {
    bottom: 84px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    height: calc(100vh - 100px);
  }
  .eb-chatbot-toggle {
    bottom: 16px;
    right: 16px;
    width: 54px;
    height: 54px;
  }
}

/* Final mobile overflow guard */
@media (max-width: 560px) {
  html,
  body {
    overflow-x: hidden !important;
  }
  .site-header .container.header-inner {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .site-header .logo {
    font-size: 0 !important;
    gap: 0 !important;
    min-width: auto !important;
    flex-shrink: 0 !important;
  }
  .site-header .logo-mark {
    margin-right: 0 !important;
  }
  .header-actions {
    min-width: 0 !important;
    margin-left: auto !important;
    gap: 0.35rem !important;
  }
  #loginBtn,
  #registerBtn {
    display: none !important;
  }
  #searchBtn,
  #cartBtn {
    display: none !important;
  }
  .mobile-menu-btn {
    display: inline-flex !important;
    order: 1 !important;
  }
  .header-actions .online-count {
    display: inline-flex !important;
    order: 2 !important;
    padding: 0.42rem 0.55rem !important;
    gap: 0.32rem !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
  }
  .header-actions .online-count #onlineCount {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
  }
  .header-actions .online-count [data-i18n="nav.online"] {
    display: none !important;
  }
  .hero h1,
  .hero .lead {
    max-width: 100% !important;
    overflow-wrap: normal !important;
  }
  .hero h1 {
    font-size: clamp(2rem, 8.5vw, 2.5rem) !important;
    line-height: 1.08 !important;
  }
  .hero h1 .accent {
    display: block !important;
  }
  .hero .lead {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    width: min(100%, 320px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-trust {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    width: min(100%, 340px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .trust-stat {
    min-width: 0 !important;
    text-align: center !important;
  }
  .trust-stat span {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }
}
/* ==========================================================================
   VISUAL REFRESH - hero imagery and centered game cards
   ========================================================================== */
.hero {
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
}

.hero-inner {
  grid-template-columns: minmax(0, 0.98fr) minmax(360px, 1.02fr);
  gap: clamp(2.5rem, 6vw, 5rem);
}

.hero-visual {
  min-height: 520px;
  height: min(58vw, 590px);
  isolation: isolate;
  display: grid !important;
}

.hero-visual .orb {
  display: none;
}

.hero-showcase {
  position: relative;
  width: min(100%, 560px);
  height: min(100%, 560px);
  display: grid;
  place-items: center;
  transform: translateZ(0);
}

.hero-showcase-glass {
  position: absolute;
  inset: 10% 6% 8%;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.085), rgba(255,255,255,0.015) 48%, rgba(212,175,55,0.075)),
    radial-gradient(circle at 54% 38%, rgba(212,175,55,0.22), transparent 42%),
    rgba(7,6,10,0.68);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 34px 90px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: perspective(900px) rotateX(2deg) rotateY(-4deg);
}

.hero-showcase-glass::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,0.18), transparent 28%, transparent 70%, rgba(212,175,55,0.14));
  opacity: 0.72;
}

.hero-showcase-logo {
  position: absolute;
  width: 38%;
  max-width: 190px;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 14px 26px rgba(212,175,55,0.24));
  z-index: 2;
}

.hero-character {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 30px 34px rgba(0,0,0,0.66));
}

.hero-character-main {
  width: 55%;
  max-height: 78%;
  right: 7%;
  bottom: 4%;
  object-position: bottom center;
  z-index: 4;
}

.hero-character-left {
  width: 55%;
  left: -2%;
  bottom: 6%;
  opacity: 0.78;
  object-position: bottom center;
  z-index: 3;
}

.hero-character-right {
  width: 42%;
  right: -4%;
  bottom: 7%;
  opacity: 0.72;
  object-position: bottom center;
  z-index: 2;
}

.float-badge {
  z-index: 6;
}

.games-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.game-card-v3 {
  min-height: 190px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 78% 48%, rgba(var(--game-rgb),0.23), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012) 44%),
    linear-gradient(150deg, #121116 0%, #09080d 100%) !important;
  border-color: rgba(255,255,255,0.085) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 20px 55px rgba(0,0,0,0.22);
}

.game-card-v3:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(var(--game-rgb),0.32) !important;
}

.game-card-v3-inner {
  min-height: 190px !important;
  padding: 1rem !important;
  position: relative;
  z-index: 3;
}

.game-card-v3-name {
  display: block !important;
  max-width: 58% !important;
  padding-top: 0 !important;
  margin-top: auto !important;
  color: #fff !important;
  text-shadow: 0 16px 26px rgba(0,0,0,0.55);
}

.game-card-v3-badge {
  display: inline-flex !important;
  max-width: 58% !important;
  white-space: nowrap;
}

.game-card-v3-tagline {
  display: block !important;
  max-width: 55% !important;
  min-height: 2.2em;
}

.game-card-v3-watermark {
  display: block !important;
  position: absolute;
  left: 0.85rem;
  top: 47%;
  max-width: 60%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 5.8rem);
  line-height: 0.82;
  font-weight: 900;
  letter-spacing: 0;
  color: rgba(255,255,255,0.03);
  -webkit-text-stroke: 1px rgba(var(--game-rgb),0.16);
  pointer-events: none;
  z-index: -1;
}

.game-card-v3-art-slot,
.game-card-v3[data-game="overwatch"] .game-card-v3-art-slot {
  width: 48% !important;
  height: 100%;
  right: 0;
  left: auto !important;
  display: grid;
  place-items: end center;
  overflow: visible;
  z-index: 2;
}

.game-card-v3-art-slot img,
.game-card-v3[data-game="overwatch"] .game-card-v3-art-slot img {
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 112% !important;
  height: 96% !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  transform: none !important;
  opacity: 1 !important;
}

.game-card-v3[data-game="lol"] .game-card-v3-art-slot img {
  right: -16% !important;
  width: 156% !important;
  height: 118% !important;
}

.game-card-v3[data-game="wow"] .game-card-v3-art-slot img {
  width: 86% !important;
  height: 88% !important;
  right: 7% !important;
}

.game-card-v3[data-game="rocketleague"] .game-card-v3-art-slot img {
  display: block !important;
  width: 116% !important;
  height: 82% !important;
  right: -10% !important;
  bottom: 4% !important;
}

.game-card-v3.no-card-art .game-card-v3-art-slot {
  overflow: hidden;
}

.game-card-v3-fallback-mark {
  position: absolute;
  right: 0.75rem;
  bottom: 0.7rem;
  width: min(78%, 132px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(var(--game-rgb),0.22), rgba(255,255,255,0.035)),
    rgba(255,255,255,0.025);
  border: 1px solid rgba(var(--game-rgb),0.26);
  color: rgba(255,255,255,0.88);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 18px 36px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.08);
}

@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 430px;
    height: 470px;
    order: -1;
    display: grid !important;
  }

  .hero-showcase {
    width: min(100%, 500px);
    height: 430px;
  }
}

@media (max-width: 720px) {
  .hero {
    padding-top: 2.4rem;
  }

  .hero-visual {
    min-height: 285px;
    height: 310px;
    display: grid !important;
  }

  .hero-showcase {
    height: 300px;
  }

  .hero-showcase-glass {
    inset: 8% 3% 5%;
    border-radius: 20px;
  }

  .hero-showcase-logo {
    width: 34%;
    top: 9%;
  }

  .hero-character-main {
    width: 58%;
    right: 4%;
  }

  .hero-character-left {
    width: 58%;
    left: -8%;
  }

  .hero-character-right {
    width: 45%;
    right: -10%;
  }

  .fb-1 { top: 2%; left: 0; }
  .fb-2 { top: 18%; right: 0; }
  .fb-3 { bottom: 10%; left: 0; }
  .fb-4 { bottom: 2%; right: 0; }

  .float-badge {
    padding: 0.62rem 0.72rem;
    max-width: 46%;
    font-size: 0.68rem;
  }

  .fb-3,
  .fb-4 {
    display: none;
  }

  .float-badge .icon-dot {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.72rem !important;
  }

  .game-card-v3,
  .game-card-v3-inner {
    min-height: 168px !important;
  }

  .game-card-v3-inner {
    padding: 0.78rem !important;
  }

  .game-card-v3-name {
    max-width: 58% !important;
    font-size: 0.95rem !important;
  }

  .game-card-v3-badge {
    max-width: 64% !important;
    font-size: 0.48rem !important;
    padding: 0.2rem 0.38rem !important;
  }

  .game-card-v3-tagline {
    display: none !important;
  }

  .game-card-v3-watermark {
    left: 0.6rem !important;
    max-width: 54% !important;
    font-size: 2.7rem !important;
  }

  .game-card-v3-art-slot,
  .game-card-v3[data-game="overwatch"] .game-card-v3-art-slot {
    width: 50% !important;
  }

  .game-card-v3-art-slot img,
  .game-card-v3[data-game="overwatch"] .game-card-v3-art-slot img {
    right: -5% !important;
    width: 118% !important;
    height: 92% !important;
  }

  .game-card-v3[data-game="lol"] .game-card-v3-art-slot img {
    right: -20% !important;
    width: 158% !important;
    height: 108% !important;
  }

  .game-card-v3[data-game="wow"] .game-card-v3-art-slot img {
    right: 4% !important;
    width: 86% !important;
    height: 82% !important;
  }

  .game-card-v3-fallback-mark {
    right: 0.55rem;
    bottom: 0.6rem;
    width: min(80%, 90px);
    border-radius: 14px;
    font-size: 1.35rem;
  }
}

@media (max-width: 440px) {
  .container {
    padding: 0 1rem;
  }

  .game-card-v3,
  .game-card-v3-inner {
    min-height: 158px !important;
  }

  .game-card-v3-name {
    font-size: 0.86rem !important;
  }

  .game-card-v3-modes {
    font-size: 0.54rem !important;
  }
}

/* ==========================================================================
   FINAL HOME + GAME CARD TUNING
   ========================================================================== */
.hero-visual {
  display: grid !important;
  place-items: center;
  min-height: 520px;
  isolation: isolate;
}

.hero-logo-orb {
  position: relative;
  width: min(86vw, 470px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 44%, rgba(240,200,96,0.2), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.045), transparent 54%);
  filter: drop-shadow(0 36px 70px rgba(0,0,0,0.48));
}

.hero-logo-core {
  position: relative;
  width: 58%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.18), transparent 26%),
    radial-gradient(circle at 50% 52%, rgba(212,175,55,0.19), rgba(8,7,10,0.94) 67%);
  border: 1px solid rgba(240,200,96,0.28);
  box-shadow:
    inset 0 0 45px rgba(212,175,55,0.14),
    0 0 52px rgba(212,175,55,0.18),
    0 26px 60px rgba(0,0,0,0.5);
  z-index: 2;
}

.hero-logo-core img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(212,175,55,0.34));
  animation: heroLogoFloat 5.4s ease-in-out infinite;
}

.hero-logo-ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(240,200,96,0.26);
  background:
    conic-gradient(from 0deg, transparent 0 18%, rgba(240,200,96,0.62) 20% 24%, transparent 27% 58%, rgba(255,255,255,0.16) 60% 62%, transparent 65%);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%, #000 64%, transparent 65%);
  mask: radial-gradient(circle, transparent 61%, #000 62%, #000 64%, transparent 65%);
  animation: heroRingSpin 18s linear infinite;
}

.hero-logo-ring.ring-b {
  inset: 18%;
  opacity: 0.78;
  animation-duration: 26s;
  animation-direction: reverse;
}

.hero-logo-sheen {
  position: absolute;
  width: 56%;
  height: 14%;
  top: 18%;
  left: 22%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  filter: none;
  transform: rotate(-18deg);
  opacity: 0.7;
  pointer-events: none;
}

@keyframes heroRingSpin {
  to { transform: rotate(360deg); }
}

@keyframes heroLogoFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.025); }
}

.game-card-v3 {
  --card-hover-strength: 0.23;
  background:
    radial-gradient(circle at 78% 45%, rgba(var(--game-rgb),0.2), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012) 44%),
    linear-gradient(150deg, #121116 0%, #09080d 100%) !important;
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease) !important;
}

.game-card-v3:hover {
  background:
    radial-gradient(circle at 76% 46%, rgba(var(--game-rgb),0.46), transparent 48%),
    radial-gradient(circle at 20% 10%, rgba(var(--game-rgb),0.16), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.014) 44%),
    linear-gradient(150deg, #141218 0%, #09080d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 22px 52px rgba(var(--game-rgb),0.18),
    0 18px 55px rgba(0,0,0,0.34) !important;
}

.game-card-v3[data-game="marvel"]:hover {
  background:
    radial-gradient(circle at 76% 46%, rgba(88,190,82,0.56), transparent 48%),
    radial-gradient(circle at 18% 12%, rgba(88,190,82,0.18), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.014) 44%),
    linear-gradient(150deg, #111713 0%, #080b08 100%) !important;
}

.game-card-v3-watermark,
.game-card-v3-signature,
.game-card-v3-code,
.game-card-v3-ghost,
.game-card-v3-modes {
  display: none !important;
}

.game-card-v3-logo-mark {
  position: absolute;
  top: 0.3rem;
  left: auto;
  right: 0.36rem;
  z-index: 5;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: #f7f7f8;
  box-shadow: none;
  pointer-events: none;
  overflow: visible;
  opacity: 0.95;
}

.game-card-v3[data-game="lol"] .game-card-v3-logo-mark {
  top: 0.18rem;
  width: 64px;
  height: 38px;
  right: 0.36rem;
}

.game-card-v3[data-game="valorant"] .game-card-v3-logo-mark {
  width: 44px;
  height: 44px;
}

.game-card-v3[data-game="overwatch"] .game-card-v3-logo-mark {
  width: 40px;
  height: 40px;
  right: 0.36rem;
}

.game-card-v3[data-game="marvel"] .game-card-v3-logo-mark {
  top: 0.18rem;
  width: 50px;
  height: 36px;
  right: 0.36rem;
}

.game-card-v3[data-game="wow"] .game-card-v3-logo-mark {
  width: 44px;
  height: 44px;
  right: 0.36rem;
}

.game-card-v3[data-game="rocketleague"] .game-card-v3-logo-mark {
  width: 42px;
  height: 42px;
  right: 0.36rem;
}

.game-card-v3[data-game="apex"] .game-card-v3-logo-mark {
  width: 40px;
  height: 40px;
  right: 0.36rem;
}

.game-card-v3[data-game="r6"],
.game-card-v3[data-game="cs2"] {
  --game-rgb: 150,155,165;
}

.game-card-v3[data-game="r6"] .game-card-v3-logo-mark,
.game-card-v3[data-game="cs2"] .game-card-v3-logo-mark {
  width: 42px;
  height: 42px;
  right: 0.36rem;
}

.game-card-v3-logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  filter:
    saturate(1.02)
    contrast(1.06)
    drop-shadow(0 8px 12px rgba(0,0,0,0.52))
    drop-shadow(0 0 14px rgba(var(--game-rgb),0.18));
  opacity: 0.96;
}

.game-card-v3-logo-mark .game-wordmark {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0;
  text-align: center;
  color: #f7f7f8;
}

.game-card-v3-logo-mark .game-wordmark small {
  font-size: 0.72em;
}

.game-card-v3-badge {
  max-width: calc(100% - 4.8rem) !important;
}

.game-card-v3-name {
  max-width: 63% !important;
}

.game-card-v3-tagline {
  max-width: 58% !important;
}

.game-card-v3-foot {
  justify-content: flex-start !important;
  border-top: 0 !important;
  padding-top: 0 !important;
}

.game-card-v3-arrow {
  margin-left: 0 !important;
}

.game-card-v3.no-card-art .game-card-v3-art-slot {
  display: none !important;
}

.game-card-v3.no-card-art .game-card-v3-name,
.game-card-v3.no-card-art .game-card-v3-tagline {
  max-width: calc(100% - 4.7rem) !important;
}

.game-card-v3.no-card-art .game-card-v3-arrow {
  margin-top: 0.4rem !important;
}

.game-card-v3.coming-soon {
  --game-rgb: 150,155,165;
  cursor: not-allowed !important;
  background:
    radial-gradient(circle at 76% 46%, rgba(150,155,165,0.18), transparent 46%),
    linear-gradient(145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008) 44%),
    linear-gradient(150deg, #15161a 0%, #090a0d 100%) !important;
  border-color: rgba(190,195,205,0.13) !important;
  filter: saturate(0.28);
}

.game-card-v3.coming-soon:hover {
  transform: none !important;
  background:
    radial-gradient(circle at 76% 46%, rgba(170,175,185,0.24), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,0.042), rgba(255,255,255,0.01) 44%),
    linear-gradient(150deg, #17181c 0%, #090a0d 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 40px rgba(0,0,0,0.28) !important;
}

.game-card-v3.coming-soon .game-card-v3-art-slot,
.game-card-v3.coming-soon .game-card-v3-badge,
.game-card-v3.coming-soon .game-card-v3-name,
.game-card-v3.coming-soon .game-card-v3-tagline,
.game-card-v3.coming-soon .game-card-v3-arrow {
  opacity: 0.48;
}

.game-card-v3.coming-soon .game-card-v3-logo-mark {
  opacity: 0.62;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.game-card-v3.coming-soon .game-card-v3-arrow {
  display: none !important;
}

.game-card-coming-soon {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.32rem 0.68rem;
  border-radius: 999px;
  background: rgba(220,225,235,0.09);
  border: 1px solid rgba(220,225,235,0.18);
  color: rgba(245,245,247,0.78);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.game-modes-header-logo {
  width: 126px !important;
  height: 126px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  isolation: isolate;
}

.game-modes-header-logo::before {
  content: '';
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--mode-logo-rgb, 240,200,96),0.3), transparent 58%),
    radial-gradient(circle at 50% 48%, rgba(255,255,255,0.06), transparent 36%);
  filter: none;
  z-index: -1;
}

.game-modes-header-logo img {
  width: 104%;
  height: 104%;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.42)) drop-shadow(0 0 18px rgba(var(--mode-logo-rgb, 240,200,96),0.26));
}

.game-modes-header-logo .game-wordmark {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--mode-logo-rgb, 240,200,96),0.2), rgba(255,255,255,0.035) 62%, transparent 63%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.44));
}

.game-modes-header-wrap[style*="#c89b3c"] { --mode-logo-rgb: 200,155,60; }
.game-modes-header-wrap[style*="#ff4655"] { --mode-logo-rgb: 255,70,85; }
.game-modes-header-wrap[style*="#f99e1a"] { --mode-logo-rgb: 249,158,26; }
.game-modes-header-wrap[style*="#e23c3c"] { --mode-logo-rgb: 88,190,82; }
.game-modes-header-wrap[style*="#f5a623"] { --mode-logo-rgb: 58,123,213; }
.game-modes-header-wrap[style*="#1a8fff"] { --mode-logo-rgb: 26,143,255; }
.game-modes-header-wrap[style*="#e63946"] { --mode-logo-rgb: 230,57,70; }
.game-modes-header-wrap[style*="#1a7aa1"] { --mode-logo-rgb: 154,165,184; }
.game-modes-header-wrap[style*="#eab111"] { --mode-logo-rgb: 222,155,53; }

/* Slight global character boost on game cards. */
.game-card-v3.has-card-art .game-card-v3-art-slot {
  transform: scale(1.06);
  transform-origin: right bottom;
}

.trustpilot-home-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.4rem;
  padding: 0.58rem 0.82rem;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(0,182,122,0.14), rgba(255,255,255,0.025));
  border: 1px solid rgba(0,182,122,0.28);
  color: var(--text);
  box-shadow: 0 12px 28px rgba(0,0,0,0.24);
  width: fit-content;
}

.trustpilot-word {
  color: #00b67a;
  font-weight: 800;
  font-size: 0.86rem;
}

.trustpilot-stars {
  color: #00b67a;
  letter-spacing: 0.04em;
  font-size: 0.82rem;
}

.trustpilot-home-badge strong {
  font-family: var(--font-display);
  font-size: 0.94rem;
}

/* Character sizing tweaks requested for the home/game cards. */
.game-card-v3[data-game="valorant"] .game-card-v3-art-slot img {
  right: -4% !important;
  width: 124% !important;
  height: 104% !important;
}

.game-card-v3[data-game="lol"] .game-card-v3-art-slot img {
  right: -38% !important;
  bottom: -8% !important;
  width: 206% !important;
  height: 148% !important;
}

.game-card-v3[data-game="overwatch"] .game-card-v3-art-slot img {
  right: -9% !important;
  width: 130% !important;
  height: 108% !important;
}

.game-card-v3[data-game="wow"] .game-card-v3-art-slot img {
  right: -10% !important;
  width: 102% !important;
  height: 106% !important;
}

.game-card-v3[data-game="rocketleague"] .game-card-v3-art-slot img {
  right: -18% !important;
  bottom: 7% !important;
  width: 142% !important;
  height: 74% !important;
  object-position: center right !important;
}

@media (max-width: 960px) {
  .hero-visual {
    min-height: 390px;
    height: 430px;
    order: 0;
  }

  .hero-logo-orb {
    width: min(78vw, 380px);
  }

  .trustpilot-home-badge {
    margin-left: auto;
    margin-right: auto;
  }

  .game-modes-header-logo {
    margin: 0 auto !important;
  }
}

@media (max-width: 720px) {
  .hero-visual {
    min-height: 260px !important;
    height: 280px !important;
    display: grid !important;
  }

  .hero-logo-orb {
    width: min(76vw, 270px);
  }

  .game-card-v3.has-card-art .game-card-v3-art-slot {
    transform: scale(1.04);
  }

  .game-modes-header-logo {
    width: 94px !important;
    height: 94px !important;
  }

  .hero-logo-core img,
  .hero-logo-ring {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  .game-card-v3-logo-mark {
    top: 0.28rem;
    left: auto;
    right: 0.32rem;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 0;
  }

  .game-card-v3-logo-mark .game-wordmark {
    font-size: 0.76rem;
  }

  .game-card-v3[data-game="lol"] .game-card-v3-logo-mark {
    top: 0.2rem;
    width: 44px;
    height: 26px;
    right: 0.32rem;
  }

  .game-card-v3[data-game="marvel"] .game-card-v3-logo-mark {
    top: 0.2rem;
    width: 38px;
    height: 28px;
  }

  .game-card-v3[data-game="valorant"] .game-card-v3-logo-mark,
  .game-card-v3[data-game="overwatch"] .game-card-v3-logo-mark,
  .game-card-v3[data-game="wow"] .game-card-v3-logo-mark,
  .game-card-v3[data-game="rocketleague"] .game-card-v3-logo-mark,
  .game-card-v3[data-game="apex"] .game-card-v3-logo-mark,
  .game-card-v3[data-game="r6"] .game-card-v3-logo-mark,
  .game-card-v3[data-game="cs2"] .game-card-v3-logo-mark {
    width: 34px;
    height: 34px;
    right: 0.32rem;
  }

  .game-card-v3[data-game="overwatch"] .game-card-v3-logo-mark,
  .game-card-v3[data-game="rocketleague"] .game-card-v3-logo-mark,
  .game-card-v3[data-game="apex"] .game-card-v3-logo-mark {
    width: 30px;
    height: 30px;
  }

  .game-card-v3-badge {
    max-width: calc(100% - 3.9rem) !important;
  }

  .game-card-v3-name {
    max-width: 64% !important;
  }

  .game-card-v3.no-card-art .game-card-v3-name,
  .game-card-v3.no-card-art .game-card-v3-tagline {
    max-width: calc(100% - 3.8rem) !important;
  }

  .game-card-v3[data-game="valorant"] .game-card-v3-art-slot img {
    right: -8% !important;
    width: 130% !important;
    height: 100% !important;
  }

  .game-card-v3[data-game="lol"] .game-card-v3-art-slot img {
    right: -42% !important;
    bottom: -8% !important;
    width: 206% !important;
    height: 126% !important;
  }

  .game-card-v3[data-game="overwatch"] .game-card-v3-art-slot img {
    right: -14% !important;
    width: 138% !important;
    height: 102% !important;
  }

  .game-card-v3[data-game="wow"] .game-card-v3-art-slot img {
    right: -12% !important;
    width: 105% !important;
    height: 94% !important;
  }

  .game-card-v3[data-game="rocketleague"] .game-card-v3-art-slot img {
    right: -20% !important;
    bottom: 8% !important;
    width: 150% !important;
    height: 66% !important;
  }
}

/* Phoenix cycle hero - logo burns down, egg appears, phoenix returns */
.hero-logo-orb {
  width: min(86vw, 500px) !important;
  background:
    radial-gradient(circle at 50% 54%, rgba(212,175,55,0.18), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.035), transparent 58%) !important;
  filter: drop-shadow(0 38px 74px rgba(0,0,0,0.52));
}

.hero-logo-core,
.hero-logo-ring,
.hero-logo-sheen {
  display: none !important;
}

.phoenix-cycle-core {
  position: relative;
  width: 54%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  z-index: 4;
  animation: phoenixRebirth 8s ease-in-out infinite;
}

.phoenix-cycle-core::before {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 32%, rgba(255,255,255,0.16), transparent 25%),
    radial-gradient(circle at center, rgba(240,200,96,0.2), rgba(7,6,10,0.88) 64%);
  border: 1px solid rgba(240,200,96,0.24);
  box-shadow:
    inset 0 0 48px rgba(212,175,55,0.13),
    0 0 58px rgba(212,175,55,0.2);
}

.phoenix-cycle-core img {
  position: relative;
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(240,200,96,0.42));
  z-index: 2;
}

.phoenix-cycle-egg {
  position: absolute;
  width: 24%;
  aspect-ratio: 0.72;
  left: 50%;
  top: 50%;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background:
    radial-gradient(circle at 38% 26%, rgba(255,255,255,0.8), transparent 17%),
    radial-gradient(circle at 52% 70%, rgba(212,175,55,0.42), transparent 44%),
    linear-gradient(145deg, #f6df94, #9b7225 70%, #31200b);
  box-shadow: 0 0 34px rgba(240,200,96,0.36), inset 0 -16px 20px rgba(0,0,0,0.22);
  transform: translate(-50%, -42%) scale(0.55);
  opacity: 0;
  z-index: 5;
  animation: phoenixEgg 8s ease-in-out infinite;
}

.phoenix-cycle-flames {
  position: absolute;
  inset: 16% 18% 10%;
  z-index: 3;
  pointer-events: none;
}

.phoenix-cycle-flames span {
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: 22%;
  height: 48%;
  border-radius: 60% 8% 60% 36%;
  background: linear-gradient(180deg, rgba(255,235,150,0.96), rgba(240,162,38,0.72) 42%, rgba(198,67,25,0.04) 100%);
  filter: blur(0.2px) drop-shadow(0 0 18px rgba(240,162,38,0.42));
  transform-origin: 50% 100%;
  opacity: 0;
  animation: phoenixFlame 8s ease-in-out infinite;
}

.phoenix-cycle-flames span:nth-child(1) { --x: -50%; --r: 0deg; height: 52%; animation-delay: 0s; }
.phoenix-cycle-flames span:nth-child(2) { --x: -92%; --r: -24deg; height: 42%; animation-delay: 0.08s; }
.phoenix-cycle-flames span:nth-child(3) { --x: -8%; --r: 24deg; height: 42%; animation-delay: 0.16s; }
.phoenix-cycle-flames span:nth-child(4) { --x: -122%; --r: -42deg; height: 32%; animation-delay: 0.24s; }
.phoenix-cycle-flames span:nth-child(5) { --x: 20%; --r: 42deg; height: 32%; animation-delay: 0.32s; }

.phoenix-cycle-ring {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 1px solid rgba(240,200,96,0.18);
  background: conic-gradient(from 0deg, transparent 0 16%, rgba(240,200,96,0.55) 19% 22%, transparent 25% 68%, rgba(255,255,255,0.13) 70% 72%, transparent 76%);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%, #000 64%, transparent 65%);
  mask: radial-gradient(circle, transparent 61%, #000 62%, #000 64%, transparent 65%);
  animation: heroRingSpin 24s linear infinite;
}

.phoenix-cycle-ring.ring-b {
  inset: 19%;
  opacity: 0.75;
  animation-duration: 34s;
  animation-direction: reverse;
}

.phoenix-cycle-embers span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f0c860;
  box-shadow: 0 0 14px rgba(240,200,96,0.85);
  opacity: 0;
  z-index: 6;
  animation: phoenixEmber 8s ease-in-out infinite;
}

.phoenix-cycle-embers span:nth-child(1) { --dx: -138px; --dy: -112px; animation-delay: 0.05s; }
.phoenix-cycle-embers span:nth-child(2) { --dx: 132px; --dy: -84px; animation-delay: 0.2s; }
.phoenix-cycle-embers span:nth-child(3) { --dx: -98px; --dy: 102px; animation-delay: 0.35s; }
.phoenix-cycle-embers span:nth-child(4) { --dx: 124px; --dy: 96px; animation-delay: 0.5s; }

@keyframes phoenixRebirth {
  0%, 31% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  39%, 54% { opacity: 0.08; transform: translateY(16px) scale(0.72); filter: none; }
  62% { opacity: 0; transform: translateY(12px) scale(0.58); filter: none; }
  73% { opacity: 0.35; transform: translateY(-8px) scale(0.76); filter: none; }
  84%, 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes phoenixEgg {
  0%, 35% { opacity: 0; transform: translate(-50%, -40%) scale(0.48); }
  45%, 62% { opacity: 1; transform: translate(-50%, -42%) scale(1); }
  72%, 100% { opacity: 0; transform: translate(-50%, -58%) scale(0.62); }
}

@keyframes phoenixFlame {
  0%, 28% { opacity: 0; transform: translateX(var(--x, -50%)) rotate(var(--r, 0deg)) scaleY(0.4); }
  38%, 56% { opacity: 0.9; transform: translateX(var(--x, -50%)) rotate(var(--r, 0deg)) scaleY(1); }
  72%, 100% { opacity: 0; transform: translateX(var(--x, -50%)) rotate(var(--r, 0deg)) scaleY(0.55); }
}

@keyframes phoenixEmber {
  0%, 34% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  45% { opacity: 0.95; }
  68%, 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); }
}

/* Kill the moving translucent sweep/stripe on game cards. */
.game-card-v3::before,
.game-card-v3::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

.game-card-v3:hover::before,
.game-card-v3:hover::after {
  content: none !important;
  display: none !important;
}

/* Restore original home hero orb visual. */
.hero-visual .orb {
  display: block !important;
}

/* Cache TOUT le bloc hero-visual (boule + orbites + badges) sur mobile */
@media (max-width: 880px) {
  .hero-visual,
  .hero-visual * {
    display: none !important;
  }
}

.hero-logo-orb,
.hero-showcase,
.phoenix-cycle-core,
.phoenix-cycle-egg,
.phoenix-cycle-flames,
.phoenix-cycle-embers {
  display: none !important;
}

@media (max-width: 720px) {
  .hero-logo-orb {
    width: min(76vw, 286px) !important;
  }

  .phoenix-cycle-core,
  .phoenix-cycle-egg,
  .phoenix-cycle-flames span,
  .phoenix-cycle-embers span {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  .phoenix-cycle-flames span,
  .phoenix-cycle-egg,
  .phoenix-cycle-embers {
    display: none !important;
  }
}

.game-card-v3-tagline {
  display: block !important;
  max-width: 58% !important;
  min-height: 2.2em;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.62);
  position: relative;
  z-index: 3;
}

@media (max-width: 720px) {
  .game-card-v3-tagline {
    max-width: 64% !important;
    font-size: 0.66rem;
  }
}

/* ==========================================================================
   ACHIEVEMENTS CATALOG (mode achievement_catalog dans renderAdaptiveCalc)
   On réutilise les classes Rank Boost (calc-section, role-segmented, opts-grid)
   et on ajoute UNIQUEMENT les composants spécifiques au catalogue.
   ========================================================================== */

/* Chips de héros (ligne horizontale scrollable) */
.ach-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ach-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: rgba(255,255,255,0.8);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}
.ach-hero-chip:hover {
  border-color: rgba(212,175,55,0.4);
  background: rgba(212,175,55,0.04);
}
.ach-hero-chip.active {
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(240,200,96,0.08));
  border-color: var(--game-color, #d4af37);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(212,175,55,0.25);
}
.ach-hero-chip-name { white-space: nowrap; }
.ach-hero-chip-badge {
  background: linear-gradient(135deg, #d4af37, #f0c860);
  color: #07060a;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  min-width: 18px;
  text-align: center;
}

/* Carte contenant la liste des achievements */
.ach-items-wrap {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
}
.ach-items-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1rem;
  background: rgba(212,175,55,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: 0.6rem;
  flex-wrap: wrap;
}
.ach-items-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}
.ach-items-count {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  margin-left: 0.4rem;
}
.ach-items-actions { display: flex; gap: 0.6rem; }
.ach-action-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--game-color, #f0c860);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.12s ease;
}
.ach-action-link:hover { color: #fff; }
.ach-action-link-ghost { color: rgba(255,255,255,0.5); }
.ach-action-link-ghost:hover { color: rgba(255,255,255,0.8); }

.ach-items-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 720px) { .ach-items-list { grid-template-columns: 1fr; } }
.ach-item-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  border-right: 1px solid rgba(255,255,255,0.05);
  color: #fff;
  cursor: pointer;
  transition: background 0.12s ease;
}
.ach-items-list .ach-item-row:nth-child(even) { border-right: none; }
.ach-item-row:hover { background: rgba(212,175,55,0.04); }
.ach-item-row.selected { background: rgba(212,175,55,0.1); }
.ach-item-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.3);
  position: relative;
  flex-shrink: 0;
  transition: all 0.12s ease;
}
.ach-item-row.selected .ach-item-check {
  background: linear-gradient(135deg, #d4af37, #f0c860);
  border-color: #f0c860;
}
.ach-item-row.selected .ach-item-check::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  width: 4px;
  height: 9px;
  border-right: 2px solid #07060a;
  border-bottom: 2px solid #07060a;
  transform: rotate(45deg);
}
.ach-item-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.ach-item-name {
  font-size: 0.83rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ach-item-desc {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ach-empty-state {
  padding: 2rem 1rem;
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
}




/* ============================================================
   SAFE PATCH v5 — LoL : même bouton Région que Division Boost partout
   Objectif : aucun redesign, seulement uniformiser les dropdowns Arena/Serveur.
   ============================================================ */
.adaptive-calc-wrap[data-game="lol"] .lol-arena-region-section,
.adaptive-calc-wrap[data-game="lol"] .lol-arena-details-panel,
.adaptive-calc-wrap[data-game="lol"] .lol-arena-field {
  overflow: visible !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-arena-region-section {
  position: relative !important;
  z-index: 12500 !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-arena-details-panel {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  align-items: end !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-arena-field label {
  display: block !important;
  margin-bottom: 0.62rem !important;
  color: rgba(255,255,255,0.68) !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-arena-field .lol-rank-detail-menu {
  position: relative !important;
  width: 100% !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-arena-field .lol-rank-detail-trigger {
  /* copie visuelle du bouton Région de Division Boost */
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  border-radius: 9px !important;
  padding: 0 0.72rem !important;
  font-size: 0.84rem !important;
  font-weight: 850 !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-arena-field .lol-rank-detail-menu.open {
  z-index: 18000 !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-arena-field .lol-rank-detail-menu.open .lol-rank-detail-options {
  z-index: 18010 !important;
  display: grid !important;
}



/* ============================================================
   SAFE PATCH v7 — LoL roles/buttons only
   Objectif demandé :
   1) Revenir à la page Division Boost intacte (base v5 conservée).
   2) Garder le layout rôles 3 + 2 pour les autres pages LoL avec rôles.
   3) Forcer les menus Région/LP/Tier au-dessus des blocs pour qu'ils restent lisibles et cliquables.
   4) Réduire uniquement la longueur des boutons Région sur Normal Games et Champion Mastery.
   ============================================================ */

/* Tous les panneaux LoL restent en overflow visible pour les dropdowns */
.adaptive-calc-wrap[data-game="lol"],
.adaptive-calc-wrap[data-game="lol"] .adaptive-calc-main,
.adaptive-calc-wrap[data-game="lol"] .calc-section,
.adaptive-calc-wrap[data-game="lol"] .lol-rank-meta-panel,
.adaptive-calc-wrap[data-game="lol"] .lol-rank-meta-row,
.adaptive-calc-wrap[data-game="lol"] .lol-region-role-row,
.adaptive-calc-wrap[data-game="lol"] .lol-arena-region-section,
.adaptive-calc-wrap[data-game="lol"] .lol-arena-details-panel,
.adaptive-calc-wrap[data-game="lol"] .lol-arena-field {
  overflow: visible !important;
}

/* Dropdowns toujours au-dessus du formulaire et du récap */
.adaptive-calc-wrap[data-game="lol"] .lol-rank-detail-menu,
.adaptive-calc-wrap[data-game="lol"] .global-region-menu {
  position: relative !important;
  z-index: 25000 !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-rank-detail-menu.open,
.adaptive-calc-wrap[data-game="lol"] .global-region-menu.open {
  z-index: 99999 !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-rank-detail-menu.open .lol-rank-detail-options,
.adaptive-calc-wrap[data-game="lol"] .global-region-menu.open .lol-rank-detail-options {
  display: grid !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: calc(100% + 6px) !important;
  min-width: 100% !important;
  z-index: 100000 !important;
  background: #05070a !important;
  border: 1px solid rgba(8,194,192,0.48) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,0.96), 0 0 0 1px rgba(8,194,192,0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-rank-detail-option {
  position: relative !important;
  z-index: 100001 !important;
  background: transparent !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-rank-detail-option:hover,
.adaptive-calc-wrap[data-game="lol"] .lol-rank-detail-option.active {
  background: rgba(8,194,192,0.16) !important;
  color: #fff !important;
}

/* On ne touche PAS à Division Boost : il reste comme dans v5.
   On applique le 3 + 2 uniquement aux pages LoL qui utilisent la rangée Région + Rôles. */
.adaptive-calc-wrap[data-game="lol"] .lol-region-role-row {
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr) !important;
  gap: 1rem !important;
  align-items: start !important;
  max-width: 100% !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-region-role-row .role-segmented-lol {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(82px, 1fr)) !important;
  gap: 0.56rem !important;
  justify-content: center !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 540px !important;
  margin: 0 auto !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-region-role-row .role-segmented-lol .role-btn {
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 0.58rem 0.66rem !important;
  font-size: 0.82rem !important;
  justify-content: center !important;
  text-align: center !important;
  border-radius: 9px !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-region-role-row .role-segmented-lol .role-btn:nth-child(-n+3) {
  grid-column: span 2 !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-region-role-row .role-segmented-lol .role-btn:nth-child(4) {
  grid-column: 2 / span 2 !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-region-role-row .role-segmented-lol .role-btn:nth-child(5) {
  grid-column: 4 / span 2 !important;
}
.adaptive-calc-wrap[data-game="lol"] .lol-region-role-row .role-segmented-lol .role-label {
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Normal Games + Champion Mastery : Région plus courte, même design que Division Boost */
.adaptive-calc-wrap[data-game="lol"][data-mode="normal"] .calc-row-region-only,
.adaptive-calc-wrap[data-game="lol"][data-mode="normal_games"] .calc-row-region-only,
.adaptive-calc-wrap[data-game="lol"][data-mode="champion_mastery"] .calc-row-region-only {
  max-width: 380px !important;
}
.adaptive-calc-wrap[data-game="lol"][data-mode="normal"] .global-region-menu,
.adaptive-calc-wrap[data-game="lol"][data-mode="normal_games"] .global-region-menu,
.adaptive-calc-wrap[data-game="lol"][data-mode="champion_mastery"] .global-region-menu,
.adaptive-calc-wrap[data-game="lol"][data-mode="normal"] .lol-rank-detail-menu,
.adaptive-calc-wrap[data-game="lol"][data-mode="normal_games"] .lol-rank-detail-menu,
.adaptive-calc-wrap[data-game="lol"][data-mode="champion_mastery"] .lol-rank-detail-menu {
  max-width: 380px !important;
}

@media (max-width: 1100px) {
  .adaptive-calc-wrap[data-game="lol"] .lol-region-role-row {
    grid-template-columns: 1fr !important;
  }
  .adaptive-calc-wrap[data-game="lol"] .lol-region-role-row .role-segmented-lol {
    max-width: 100% !important;
  }
}