/* ========================================
       START SECTION: CSS RESET
    ======================================== */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    html {
      scroll-behavior: smooth;
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
    body {
      font-family: 'Rajdhani', system-ui, -apple-system, sans-serif;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    img, svg {
      display: block;
      max-width: 100%;
    }
    button {
      font: inherit;
      cursor: pointer;
      border: none;
    }
    /* END SECTION: CSS RESET */

    /* ========================================
       START SECTION: DESIGN TOKENS
    ======================================== */
    :root {

      --primary-purple: #a855f7;
      --primary-green: #10b981;
      --primary-red: #ef4444;
      --accent-blue: #3b82f6;
      --dark-bg: #0a0a0f;
      --card-bg: #1a1a2e;
      --card-hover: #252540;
      --text-primary: #ffffff;
      --text-secondary: #9ca3af;
      --border-glow: rgba(168, 85, 247, 0.3);

      /* Spacing */
      --space-1: 0.5rem;
      --space-2: 1rem;
      --space-3: 1.5rem;
      --space-4: 2rem;
      --space-5: 3rem;

      /* Border Radius */
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 20px;

      /* Shadows */
      --shadow-1: 0 4px 16px rgba(0,0,0,.25);
      --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.5);

      /* Transitions */
      --transition-fast: 0.2s ease;
      --transition-base: 0.3s ease;

      /* Font sizes */
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.5rem;
      --font-size-2xl: 2rem;
      --font-size-3xl: 2.5rem;
      --font-size-4xl: 3rem;
    }
    /* END SECTION: DESIGN TOKENS */

    /* ========================================
       START SECTION: BASE LAYOUT
    ======================================== */
    body {
      background: var(--dark-bg);
      color: var(--text-primary);
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 var(--space-2);
    }

    main {
      min-height: 100vh;
    }

    section {
      padding: var(--space-5) 0;
    }
    /* END SECTION: BASE LAYOUT */

    /* ========================================
       START SECTION: ANIMATED BACKGROUND
    ======================================== */
    .animated-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.15;
      background:
        radial-gradient(circle at 20% 50%, var(--primary-purple) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, var(--primary-green) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, var(--accent-blue) 0%, transparent 50%);
      animation: bgPulse 15s ease-in-out infinite;
    }

    @keyframes bgPulse {
      0%, 100% { opacity: 0.15; }
      50% { opacity: 0.25; }
    }
    /* END SECTION: ANIMATED BACKGROUND */

    /* ========================================
       START SECTION: TOP BAR WARNING
    ======================================== */
    .top-bar {
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(168, 85, 247, 0.2));
      border-bottom: 2px solid var(--primary-red);
      padding: var(--space-2);
      text-align: center;
      font-weight: 600;
      font-size: var(--font-size-sm);
      position: relative;
    }
    .top-bar__close {
      position: absolute;
      right: var(--space-2);
      top: 50%;
      transform: translateY(-50%);
      background: transparent;
      color: var(--text-primary);
      font-size: var(--font-size-xl);
      cursor: pointer;
      padding: 0 var(--space-1);
      transition: color var(--transition-fast);
    }
    .top-bar__close:hover {
      color: var(--primary-red);
    }
    .top-bar.is-hidden {
      display: none;
    }
    /* END SECTION: TOP BAR WARNING */

/* ========================================
   START SECTION: HEADER / NAVBAR
======================================== */
.navbar {
  position: sticky;
  top: 0;
  background: rgba(10, 10, 15, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-glow);
  padding: var(--space-2);
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto minmax(300px, 1fr);
  align-items: center;
  gap: var(--space-3);
  z-index: 1000;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* ========================================
   BRAND (gauche)
======================================== */
.navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
}

.navbar__github {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.navbar__github-icon {
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

.navbar__github-icon .corps-github {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.navbar__github-icon .queue-github {
  transform-origin: 9px 18px;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.navbar__github:hover .corps-github,
.navbar__github:focus .corps-github {
  animation: animerCorpsGithub 0.4s ease forwards;
}

.navbar__github:hover .queue-github,
.navbar__github:focus .queue-github {
  animation: remuerQueueGithub 2.5s ease 0.4s infinite;
}

@keyframes animerCorpsGithub {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes remuerQueueGithub {
  0%, 100% { transform: rotate(0deg); }
  12.5% { transform: rotate(-15deg); }
  25% { transform: rotate(15deg); }
  37.5% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  62.5% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

.navbar__github:hover,
.navbar__github:focus {
  border-color: var(--primary-purple);
  color: var(--primary-green);
  outline: 2px solid var(--primary-purple);
  outline-offset: 3px;
}


/* Logo Metabet*/
.navbar__logo {
  display: flex;
  align-items: center;
}

.navbar__logo img {
  max-width: 200px;
  max-height: 200px;
  object-fit: contain;
}

/* Taille tablette */
@media (max-width: 768px) {
  .navbar__logo img {
    max-width: 100px;
    max-height: 100px;
  }
}

/* Taille mobile */
@media (max-width: 480px) {
  .navbar__logo img {
    max-width: 110px;
    max-height: 110px;
  }
}

/* Fin Logo Metabet*/


/* Session Timer */
.navbar__timer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar__timer svg {
  color: var(--primary-green);
}

.timer--normal {
  color: var(--primary-green);
}

.timer--warning {
  color: #f59e0b;
  animation: pulse 2s ease-in-out infinite;
}

.timer--danger {
  color: #ef4444;
  animation: pulse 1s ease-in-out infinite;
  font-weight: 700;
}

@media (max-width: 768px) {
  .navbar__timer {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
  }

  .navbar__timer svg {
    width: 16px;
    height: 16px;
  }
}

.toast--danger {
    background: rgba(220, 38, 38, 0.95);
    animation: shake 0.5s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}
/* ========================================
   NAVIGATION (centre)
======================================== */
.navbar__nav {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  justify-self: center; /* 👈 CENTRAGE PARFAIT */
}

.navbar__nav li {
  margin: 0;
}

.navbar__nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  transition: color var(--transition-fast);
  white-space: nowrap;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.navbar__nav a:hover,
.navbar__nav a:focus {
  color: var(--primary-green);
  outline: 2px solid var(--primary-purple);
  outline-offset: 4px;
}

/* ========================================
   ACTIONS (droite)
======================================== */
.navbar__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-self: end; /* 👈 Alignement à droite */
}

/* Balance utilisateur */
.navbar__balance-container {
  display: flex;
  align-items: center;
  animation: fadeInScale 0.4s ease;
}

.navbar__balance-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-2);
}

.navbar__keys {
  background: rgba(245, 158, 11, 0.15);
  border: 2px solid rgba(245, 158, 11, 0.35);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  color: #d97706;
  font-size: var(--font-size-base);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.navbar__keys:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.5);
  transform: scale(1.05);
}

.navbar__balance {
  display: inline-block;
  background: rgba(16, 185, 129, 0.1);
  border: 2px solid rgba(16, 185, 129, 0.3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  color: var(--primary-green);
  font-size: var(--font-size-lg);
  transition: all var(--transition-fast);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.2);
  white-space: nowrap;
}

.navbar__balance:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: var(--primary-green);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

/* Bouton connexion/déconnexion */
.navbar__login {
  background: linear-gradient(135deg, var(--primary-purple), #9333ea);
  border: none;
  border-radius: var(--radius-md);
  padding: 0;
  font-weight: 700;
  transition: all var(--transition-base);
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.navbar__login::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.navbar__login:hover::before {
  left: 100%;
}

.navbar__login a,
#user-pseudo {
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  white-space: nowrap;
}

.navbar__login:hover,
.navbar__login:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6);
  outline: 2px solid var(--primary-purple);
  outline-offset: 2px;
}

.navbar__login:active {
  transform: translateY(0);
}

/* Mode déconnexion */
.navbar__login.logout-mode {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.navbar__login.logout-mode:hover {
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
  outline-color: #ef4444;
}



/* ========================================
   ANIMATIONS
======================================== */
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fadeOutScale {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.9); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    color: #10b981;
  }
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 768px) {
  .navbar {
    grid-template-columns: 1fr auto;
  }

  .navbar__nav {
    display: none;
  }
}


@media (max-width: 480px) {
  .navbar__balance-container {
    display: none !important;
  }
   
  .navbar__github span {
    display: none;
  }


}
/* END SECTION: HEADER / NAVBAR */


/* ========================================
   START SECTION: MOBILE MENU
======================================== */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 15, 0.98);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  transform: translateX(-100%);
  transition: transform var(--transition-base);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--font-size-3xl);
  padding: var(--space-1);
}

.mobile-menu__nav {
  list-style: none;
  text-align: center;
}

.mobile-menu__nav li {
  margin: var(--space-3) 0;
}

.mobile-menu__nav a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--font-size-xl);
  font-weight: 700;
  transition: color var(--transition-fast);
}

.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus {
  color: var(--primary-green);
}
/* END SECTION: MOBILE MENU */


    /* ========================================
       START SECTION: HERO
    ======================================== */
    .hero {
      padding: var(--space-5) 0;
      text-align: center;
      position: relative;
    }

    .hero__title {
      font-family: 'Orbitron', sans-serif;
      font-size: var(--font-size-4xl);
      font-weight: 900;
      margin-bottom: var(--space-2);
      background: linear-gradient(135deg, var(--primary-purple), var(--primary-green));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero__subtitle {
      font-size: var(--font-size-lg);
      color: var(--text-secondary);
      margin-bottom: var(--space-4);
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }

    .hero__cta {
      display: inline-block;
      background: linear-gradient(135deg, var(--primary-purple), var(--primary-green));
      color: white;
      padding: var(--space-2) var(--space-4);
      border-radius: var(--radius-lg);
      font-weight: 700;
      font-size: var(--font-size-lg);
      text-decoration: none;
      transition: all var(--transition-base);
      box-shadow: 0 5px 20px rgba(168, 85, 247, 0.5);
      position: relative;
      overflow: hidden;
    }

    .hero__cta:hover,
    .hero__cta:focus {
      transform: translateY(-3px);
      box-shadow: 0 8px 30px rgba(168, 85, 247, 0.7);
      outline: 2px solid var(--primary-purple);
      outline-offset: 4px;
    }

    .hero__balance {
      margin-top: var(--space-3);
      display: inline-block;
      background: var(--card-bg);
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-lg);
      border: 2px solid var(--primary-green);
      font-family: 'Orbitron', sans-serif;
      font-weight: 700;
      font-size: var(--font-size-xl);
    }

    @media (max-width: 768px) {
      .hero__title {
        font-size: var(--font-size-3xl);
      }
    }
    /* END SECTION: HERO */
/* Toast notifications */
.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: rgba(16, 185, 129, 0.95);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    min-width: 250px;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease;
}

.toast--visible {
    opacity: 1;
    transform: translateX(0);
}

.toast--error {
    background: rgba(239, 68, 68, 0.95);
}

.toast--warning {
    background: rgba(251, 191, 36, 0.95);
}

.toast--success {
    background: rgba(16, 185, 129, 0.95);
}

.toast--info {
    background: rgba(59, 130, 246, 0.95);
}
    /* ========================================
       START SECTION: SECTION HEADER
    ======================================== */
    .section__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-4);
    }

    .section__title {
      font-family: 'Orbitron', sans-serif;
      font-size: var(--font-size-2xl);
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .section__link {
      color: var(--primary-green);
      text-decoration: none;
      font-weight: 600;
      transition: color var(--transition-fast);
    }

    .section__link:hover,
    .section__link:focus {
      color: var(--primary-purple);
      outline: 2px solid var(--primary-purple);
      outline-offset: 4px;
      border-radius: var(--radius-sm);
    }
    /* END SECTION: SECTION HEADER */

    /* ========================================
       START SECTION: BLACKJACK TABLES GRID
    ======================================== */
    .tables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: var(--space-3);
    }

    .table-card {
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: all var(--transition-base);
      border: 2px solid transparent;
      position: relative;
      cursor: pointer;
    }

    .table-card:hover {
      transform: translateY(-5px);
      border-color: var(--primary-purple);
      box-shadow: 0 10px 40px rgba(168, 85, 247, 0.4);
    }

    .table-card:focus-within {
      outline: 2px solid var(--primary-purple);
      outline-offset: 4px;
    }

    .table-card__image {
      width: 100%;
      height: 180px;
      background:
      radial-gradient(circle at 50% 20%, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0) 60%),
       repeating-linear-gradient(45deg, rgba(0,0,0,0.15) 0 10px, rgba(0,0,0,0.05) 10px 20px),
        linear-gradient(180deg, #0c5c2c 0%, #06401f 100%);
      background-size: cover, cover, cover;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
      position: relative;
    }

    .table-card__badge {
      position: absolute;
      top: var(--space-1);
      right: var(--space-1);
      background: var(--primary-red);
      padding: 0.3rem 0.8rem;
      border-radius: var(--radius-lg);
      font-size: var(--font-size-sm);
      font-weight: 700;
      text-transform: uppercase;
    }

    .table-card__info {
      padding: var(--space-3);
    }

    .table-card__title {
      font-size: var(--font-size-xl);
      font-weight: 700;
      margin-bottom: var(--space-1);
    }

    .table-card__desc {
      height: 60px;
      color: var(--text-secondary);
      font-size: var(--font-size-sm);
      margin-bottom: var(--space-2);
    }

    .table-card__stats {
      display: flex;
      justify-content: space-between;
      margin-bottom: var(--space-2);
      color: var(--text-secondary);
      font-size: var(--font-size-sm);
    }

    .table-card__stat {
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }

    .table-card__bet {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: var(--space-2);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .table-card__button {
      background: linear-gradient(135deg, var(--primary-purple), var(--accent-blue));
      color: white;
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-md);
      font-weight: 700;
      transition: all var(--transition-base);
    }

    .table-card__button:hover,
    .table-card__button:focus {
      transform: scale(1.05);
      box-shadow: 0 4px 15px rgba(168, 85, 247, 0.5);
      outline: 2px solid var(--primary-purple);
      outline-offset: 2px;
    }

    .table-card__help-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: 0;
      background: var(--card-bg);
      color: var(--text-secondary);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all var(--transition-base);
      flex-shrink: 0;
      position: relative;
    }

    .table-card__help-btn:hover,
    .table-card__help-btn:focus {
      background: var(--card-hover);
      color: var(--primary-purple);
      border-color: var(--primary-purple);
      box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);
      outline: none;
    }

    .table-card__help-btn svg {
      width: 20px;
      height: 20px;
      transition: transform var(--transition-base);
    }

    .table-card__help-btn:hover svg,
    .table-card__help-btn:focus svg {
      animation: animerPointInterrogation 2s ease 0.3s infinite;
    }

    @keyframes secouerBoutonAide {
      0%, 100% {
        transform: rotate(0deg) scale(1);
      }
      10% {
        transform: rotate(-10deg) scale(1.05);
      }
      20% {
        transform: rotate(10deg) scale(1.1);
      }
      30% {
        transform: rotate(-8deg) scale(1.08);
      }
      40% {
        transform: rotate(8deg) scale(1.1);
      }
      50% {
        transform: rotate(-5deg) scale(1.05);
      }
      60% {
        transform: rotate(5deg) scale(1.08);
      }
      70% {
        transform: rotate(-3deg) scale(1.05);
      }
      80% {
        transform: rotate(3deg) scale(1.08);
      }
      90% {
        transform: rotate(-2deg) scale(1.05);
      }
    }

    @keyframes animerPointInterrogation {
      0%, 100% {
        transform: rotate(0deg) scale(1);
      }
      12.5% {
        transform: rotate(-10deg) scale(1.1);
      }
      25% {
        transform: rotate(10deg) scale(1.05);
      }
      37.5% {
        transform: rotate(-8deg) scale(1.08);
      }
      50% {
        transform: rotate(8deg) scale(1.05);
      }
      62.5% {
        transform: rotate(-5deg) scale(1.06);
      }
      75% {
        transform: rotate(5deg) scale(1.04);
      }
      87.5% {
        transform: rotate(-3deg) scale(1.02);
      }
    }

    .help-content {
      padding: var(--space-2);
      line-height: 1.8;
      color: var(--text-primary);
    }

    .help-content h3 {
      font-size: var(--font-size-xl);
      margin-bottom: var(--space-2);
      color: var(--primary-purple);
    }

    .help-content h4 {
      font-size: var(--font-size-lg);
      margin-top: var(--space-3);
      margin-bottom: var(--space-1);
      color: var(--primary-green);
    }

    .help-content p {
      margin-bottom: var(--space-2);
      color: var(--text-secondary);
    }

    .help-content ul,
    .help-content ol {
      margin-left: var(--space-3);
      margin-bottom: var(--space-2);
      color: var(--text-secondary);
    }

    .help-content li {
      margin-bottom: var(--space-1);
    }

    .help-content strong {
      color: var(--text-primary);
      font-weight: 700;
    }

    .help-content code {
      background: var(--card-bg);
      padding: 0.2rem 0.4rem;
      border-radius: 4px;
      font-family: 'Courier New', monospace;
      font-size: 0.9em;
      color: var(--primary-green);
    }

    @media (max-width: 768px) {
      .tables-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }
    }
    /* END SECTION: BLACKJACK TABLES GRID */

/* ========== CARTES MODÉLISÉES ========== */
.card {
  width: 90px;
  height: 130px;
  perspective: 1000px;
  position: relative;

  /* État final par défaut */
  opacity: 1;
  transform: none;

  /* Transition pour le hover uniquement */
  transition: transform 0.3s ease;
}

/* Animation d'apparition déclenchée par JS */
.card.card--dealing {
  animation: cardEnter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  pointer-events: none;
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.8) rotateY(10deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotateY(0);
  }
}

.card:hover:not(.card--dealing) {
  transform: translateY(-10px);
  z-index: 10;
}

/* --- Le reste reste identique --- */
.card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  border-radius: 8px;
}

.card__inner.is-flipped {
  transform: rotateY(180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* ✅ Cette propriété est essentielle */
  -webkit-backface-visibility: hidden; /* ✅ Pour Safari */
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  background: white;
  border: 1px solid rgba(0,0,0,0.1);
  box-sizing: border-box;
}

.card__face--back {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6, #1e3a8a);
  transform: rotateY(180deg);
  padding: 0;
  overflow: hidden;
}

/* ✅ CORRECTION : S'assurer que le dos est bien positionné */
.card__face--front {
  z-index: 2;
  transform: rotateY(0deg); /* Explicite pour la face avant */
}

.card--red .card__face--front { color: #dc2626; }
.card--black .card__face--front { color: #1f2937; }

.card__pattern {
  width: 100%;
  height: 100%;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px),
    repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 8px;
}

.card__corner { display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 2px; }
.card__corner--top { align-self: flex-start; }
.card__corner--bottom { align-self: flex-end; transform: rotate(180deg); }
.card__value { font-size: 18px; font-weight: 900; font-family: sans-serif; }
.card__suit { font-size: 16px; }
.card__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.card__suit-large { font-size: 48px; opacity: 0.9; }

@media (max-width: 768px) {
  .card { width: 70px; height: 100px; }
  .card__face { padding: 5px; }
  .card__value { font-size: 14px; }
  .card__suit { font-size: 12px; }
  .card__suit-large { font-size: 36px; }
}






    /* ========================================
       START SECTION: HOW IT WORKS
    ======================================== */
    .how-it-works {
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      padding: var(--space-4);
      margin: var(--space-5) 0;
    }

    .how-it-works__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: var(--space-4);
      margin-top: var(--space-3);
    }

    .how-it-works__step {
      text-align: center;
    }

    .how-it-works__icon {
      width: 80px;
      height: 80px;
      margin: 0 auto var(--space-2);
      background: linear-gradient(135deg, var(--primary-purple), var(--primary-green));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
    }

    .how-it-works__title {
      font-size: var(--font-size-lg);
      font-weight: 700;
      margin-bottom: var(--space-1);
    }

    .how-it-works__desc {
      color: var(--text-secondary);
      font-size: var(--font-size-sm);
    }
    /* END SECTION: HOW IT WORKS */

    /* ========================================
       START SECTION: DAILY BONUS
    ======================================== */
    .daily-bonus {
      background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(16, 185, 129, 0.2));
      border: 2px solid var(--primary-purple);
      border-radius: var(--radius-lg);
      padding: var(--space-4);
      text-align: center;
      margin: var(--space-5) 0;
      position: relative;
      overflow: hidden;
      animation: borderGlow 2s ease-in-out infinite;
    }

    @keyframes borderGlow {
      0%, 100% { box-shadow: 0 0 20px var(--border-glow); }
      50% { box-shadow: 0 0 40px rgba(168, 85, 247, 0.6); }
    }

    .daily-bonus__title {
      font-family: 'Orbitron', sans-serif;
      font-size: var(--font-size-2xl);
      font-weight: 900;
      margin-bottom: var(--space-2);
    }

    .daily-bonus__subtitle {
      color: var(--text-secondary);
      margin-bottom: var(--space-3);
    }

    .daily-bonus__button {
      background: linear-gradient(135deg, var(--primary-green), var(--accent-blue));
      color: white;
      padding: var(--space-2) var(--space-4);
      border-radius: var(--radius-lg);
      font-weight: 700;
      font-size: var(--font-size-lg);
      transition: all var(--transition-base);
      box-shadow: 0 5px 20px rgba(16, 185, 129, 0.5);
    }

    .daily-bonus__button:hover,
    .daily-bonus__button:focus {
      transform: translateY(-3px);
      box-shadow: 0 8px 30px rgba(16, 185, 129, 0.7);
      outline: 2px solid var(--primary-green);
      outline-offset: 4px;
    }
    .daily-bonus__lock-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(10, 10, 15, 0.95);
      backdrop-filter: blur(8px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 10;
      animation: fadeIn 0.3s ease;
    }

    .daily-bonus__lock-icon {
      color: var(--primary-green);
      margin-bottom: 1rem;
      filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.5));
      animation: pulse 2s ease-in-out infinite;
    }

    .daily-bonus__countdown {
      font-family: 'Orbitron', sans-serif;
      font-size: var(--font-size-xl);
      color: white;
      text-align: center;
      margin-top: 1rem;
    }

    .daily-bonus__countdown span {
      display: block;
      font-size: var(--font-size-3xl);
      color: var(--primary-green);
      font-weight: 900;
      margin-top: 0.5rem;
      text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
    }

    .daily-bonus.locked {
      cursor: not-allowed;
      opacity: 0.8;
    }

    .daily-bonus.locked .daily-bonus__button {
      pointer-events: none;
      opacity: 0.5;
    }

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

    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
        opacity: 1;
      }
      50% {
        transform: scale(1.1);
        opacity: 0.8;
      }
    }
    /* END SECTION: DAILY BONUS */

    /* Weekly Pass / Roue */
.weekly-pass-card {
  position: relative;
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
  padding: 2rem;
  border-radius: 16px;
  border: 2px solid rgba(16, 185, 129, 0.2);
  text-align: center;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.weekly-pass__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #10b981;
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

.weekly-pass__subtitle {
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.weekly-pass__progress {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  color: #10b981;
  margin-bottom: 1rem;
}

.weekly-pass__days {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.day-indicator {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: all 0.3s ease;
}

.day-indicator.completed {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: #10b981;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
}

.wheel-container {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

#wheelCanvas {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}

.weekly-pass__button {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  padding: 1rem 3rem;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.weekly-pass__button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
}

.weekly-pass__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.weekly-pass__lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 15, 0.95);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.weekly-pass__lock-icon {
  color: #10b981;
  filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.5));
  animation: pulse 2s ease-in-out infinite;
}

.weekly-pass__countdown {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  color: white;
  margin-top: 1rem;
}

.weekly-pass__countdown span {
  display: block;
  font-size: 2rem;
  color: #10b981;
  font-weight: 900;
  margin-top: 0.5rem;
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

.weekly-pass-card.locked {
  opacity: 0.8;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  #wheelCanvas {
    width: 300px;
    height: 300px;
  }

  .weekly-pass__days {
    gap: 0.3rem;
  }

  .day-indicator {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }
}
/* ========================================
       START SECTION: LEADERBOARD
    ======================================== */
    .leaderboard {
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      padding: var(--space-4);
      margin: var(--space-5) 0;
    }

      /* Leaderboard Tabs */
  .leaderboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    gap: 1rem;
  }

  .leaderboard__tabs {
    display: flex;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.25rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
  }

  .leaderboard__tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
  }

  .leaderboard__tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
  }

  .leaderboard__tab--active {
    background: var(--primary-green);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }

  .leaderboard__content {
    display: none;
    animation: fadeIn 0.3s ease;
  }

  .leaderboard__content--active {
    display: block;
  }

  /* Style du tableau */
  .leaderboard__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .leaderboard__table thead tr {
    background: rgba(255, 255, 255, 0.05);
  }

  .leaderboard__table th {
    padding: 1rem;
    text-align: left;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  }

  .leaderboard__table th:last-child {
    border-right: none;
  }

  .leaderboard__table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
  }

  .leaderboard__table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
  }

  .leaderboard__table tbody tr:nth-child(-n+5) {
    min-height: 60px;
  }

  .leaderboard__table td {
    padding: 1.25rem 1rem;
    text-align: left;
    font-family: 'Rajdhani', sans-serif;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  .leaderboard__table td:last-child {
    border-right: none;
  }

  .leaderboard__table td:first-child {
    font-weight: 700;
    color: var(--text-primary);
  }

  .leaderboard__loading {
    text-align: center;
    padding: 3rem 1rem !important;
    color: var(--text-secondary);
    border-right: none !important;
  }

 .leaderboard__refresh {
  background: #10b981;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.leaderboard__refresh:hover {
  background: #10b981;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

  .spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--primary-green);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 0.5rem;
  }

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

  /* Medals pour le top 3 */
  .leaderboard__rank {
    font-weight: 700;
  }

  .leaderboard__rank--1::before {
    content: '🥇 ';
  }

  .leaderboard__rank--2::before {
    content: '🥈 ';
  }

  .leaderboard__rank--3::before {
    content: '🥉 ';
  }

  /* Highlight pour l'utilisateur connecté */
  .leaderboard__row--current {
    background: rgba(16, 185, 129, 0.1) !important;
    border-left: 3px solid var(--primary-green);
  }

  .leaderboard__row--current .leaderboard__name {
    color: var(--primary-green);
    font-weight: 700;
  }

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

  @media (max-width: 768px) {
    .leaderboard__header {
      flex-direction: column;
      align-items: flex-start;
    }

    .leaderboard__tabs {
      width: 100%;
    }

    .leaderboard__tab {
      flex: 1;
      text-align: center;
    }

    .leaderboard__table th,
    .leaderboard__table td {
      padding: 0.75rem 0.5rem;
      font-size: 0.875rem;
    }
  }
    /* END SECTION: LEADERBOARD */


    /* ========================================
       START SECTION: RESPONSIBLE GAMING
    ======================================== */
    .responsible-gaming {
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(251, 191, 36, 0.2));
      border: 2px solid var(--primary-red);
      border-radius: var(--radius-lg);
      padding: var(--space-3);
      text-align: center;
      margin: var(--space-5) 0;
    }

    .responsible-gaming__title {
      font-weight: 700;
      margin-bottom: var(--space-1);
      color: var(--primary-red);
    }

    .responsible-gaming__text {
      color: var(--text-secondary);
      margin-bottom: var(--space-2);
    }

    .responsible-gaming__link {
      color: var(--primary-green);
      font-weight: 700;
      text-decoration: underline;
      transition: color var(--transition-fast);
    }

    .responsible-gaming__link:hover,
    .responsible-gaming__link:focus {
      color: var(--primary-purple);
      outline: 2px solid var(--primary-purple);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }
    /* END SECTION: RESPONSIBLE GAMING */

    /* ========================================
       START SECTION: FOOTER
    ======================================== */
    .footer {
      background: var(--card-bg);
      border-top: 2px solid var(--border-glow);
      padding: var(--space-5) 0 var(--space-3);
      margin-top: var(--space-5);
    }

    .footer__content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--space-4);
      margin-bottom: var(--space-4);
    }

    .footer__section-title {
      font-weight: 700;
      margin-bottom: var(--space-2);
      color: var(--primary-purple);
    }

    .footer__links {
      list-style: none;
    }

    .footer__links li {
      margin-bottom: var(--space-1);
    }

    .footer__links a {
      color: var(--text-secondary);
      text-decoration: none;
      transition: color var(--transition-fast);
      font-size: var(--font-size-sm);
    }

    .footer__links a:hover,
    .footer__links a:focus {
      color: var(--primary-green);
      outline: 2px solid var(--primary-green);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }

    .footer__bottom {
      text-align: center;
      padding-top: var(--space-3);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--text-secondary);
      font-size: var(--font-size-sm);
    }

    .footer__disclaimer {
      margin-bottom: var(--space-2);
      color: var(--primary-red);
      font-weight: 600;
    }
    /* END SECTION: FOOTER */

    /* ========================================
       START SECTION: MODAL
    ======================================== */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      z-index: 3000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-2);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition-base);
      backdrop-filter: blur(10px);
    }

    .modal-overlay.is-open {
      opacity: 1;
      pointer-events: all;
      display: flex !important;
    }

    .modal-overlay.is-open .modal {
  animation: modalSlideIn 0.3s ease-out;
}

    .modal {
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      max-width: min(95vw, 800px);
      width: 100%;
      max-height: 95vh;
      overflow-y: auto;
      box-shadow: var(--shadow-2);
      border: 2px solid var(--primary-purple);
      transform: scale(0.9);
      transition: transform var(--transition-base);
      position: relative;
    }

    .modal-overlay.is-open .modal {
      transform: scale(1);
      animation: modalSlideIn 0.4s ease;
    }

    @keyframes modalSlideIn {
      from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .modal__header {
      padding: var(--space-3);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .modal__title {
      font-family: 'Orbitron', sans-serif;
      font-size: var(--font-size-2xl);
      font-weight: 700;
    }

    .modal__close {
      background: none;
      color: var(--text-primary);
      font-size: var(--font-size-3xl);
      cursor: pointer;
      padding: 0;
      line-height: 1;
      transition: color var(--transition-fast);
    }

    .modal__close:hover,
    .modal__close:focus {
      color: var(--primary-red);
      outline: 2px solid var(--primary-red);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }

    .modal__body {
      padding: var(--space-2);
    }

    /* ========== COFFRE MODAL – CINÉMATIQUE PREMIUM ========== */
    .chest-modal .chest-modal__box {
      background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.25), transparent 55%),
                  radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.25), transparent 55%),
                  linear-gradient(180deg, #020617 0%, #020617 35%, #020617 100%);
      border-radius: var(--radius-lg);
      max-width: min(95vw, 980px);
      width: 100%;
      border: 1px solid rgba(148, 163, 184, 0.55);
      box-shadow:
        0 0 48px rgba(15, 23, 42, 0.9),
        0 30px 80px rgba(0, 0, 0, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
      overflow: hidden;
      position: relative;
      backdrop-filter: blur(26px);
      -webkit-backdrop-filter: blur(26px);
      transition: box-shadow 0.4s ease, transform 0.3s ease;
    }

    .chest-modal .chest-modal__box::before {
      /* Halo circulaire sous le coffre */
      content: '';
      position: absolute;
      inset: auto 12% 4%;
      height: 220px;
      background:
        radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.35), transparent 60%),
        radial-gradient(circle at 50% 20%, rgba(129, 140, 248, 0.25), transparent 70%);
      opacity: 0.8;
      filter: blur(8px);
      pointer-events: none;
      z-index: 0;
    }

    .chest-modal__header {
      position: relative;
      background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.94) 40%, rgba(15, 23, 42, 0.92) 100%);
      padding: var(--space-3) var(--space-4);
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(148, 163, 184, 0.45);
      z-index: 2;
    }

    .chest-modal__header::after {
      content: '';
      position: absolute;
      inset: auto 0 -2px;
      height: 2px;
      background: linear-gradient(90deg,
        rgba(129, 140, 248, 0) 0%,
        rgba(129, 140, 248, 0.9) 20%,
        rgba(45, 212, 191, 0.9) 50%,
        rgba(129, 140, 248, 0.9) 80%,
        rgba(129, 140, 248, 0) 100%);
      box-shadow:
        0 0 12px rgba(129, 140, 248, 0.7),
        0 0 26px rgba(34, 211, 238, 0.65);
      opacity: 0.9;
    }

    .chest-modal__title {
      font-family: 'Orbitron', sans-serif;
      font-size: var(--font-size-xl);
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #e5e7eb;
      text-shadow:
        0 0 18px rgba(129, 140, 248, 0.7),
        0 0 32px rgba(56, 189, 248, 0.5);
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .chest-modal__title::before {
      content: '🔒';
      font-size: 1.25rem;
      filter: drop-shadow(0 0 10px rgba(129, 140, 248, 0.7));
    }

    .chest-modal__close {
      background: none;
      color: #9ca3af;
      font-size: 1.75rem;
      cursor: pointer;
      padding: 0;
      line-height: 1;
      transition: color var(--transition-fast), transform var(--transition-fast), text-shadow var(--transition-fast);
    }

    .chest-modal__close:hover {
      color: #f9fafb;
      transform: scale(1.1);
      text-shadow: 0 0 18px rgba(249, 250, 251, 0.8);
    }

    .chest-modal__body {
      position: relative;
      padding: var(--space-4);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      align-items: stretch;
      z-index: 1;
    }

    /* --- Scène cinématique --- */
    .chest-cinematic {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      background: radial-gradient(circle at 50% 0, #020617 0%, #020617 55%, #020617 100%);
      border: 1px solid rgba(148, 163, 184, 0.45);
      box-shadow:
        0 0 50px rgba(15, 23, 42, 0.9),
        inset 0 -10px 40px rgba(0, 0, 0, 0.85);
    }

    .chest-cinematic__scene {
      position: relative;
      padding: 2.75rem 2.5rem 3.5rem;
      min-height: 320px;
      transform-origin: center center;
      transform: scale(1);
      transition: transform 0.45s ease;
      --aura-intensity: 0.4;
      --charge-intensity: 0;
      --chest-open-ratio: 0;
      --runes-intensity: 0;
      --rings-intensity: 0;
      --reveal-glow: 0;
    }

    @media (max-width: 600px) {
      .chest-cinematic__scene {
        padding: 2rem 1.5rem 3rem;
      }
    }

    /* Fond dynamique */
    .chest-cinematic__backdrop {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.22), transparent 65%),
        radial-gradient(circle at 0% 100%, rgba(129, 140, 248, 0.18), transparent 65%),
        radial-gradient(circle at 100% 100%, rgba(45, 212, 191, 0.18), transparent 65%),
        radial-gradient(circle at 50% 120%, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 1));
      opacity: 0.95;
      pointer-events: none;
      z-index: 0;
    }

    .chest-cinematic__backdrop-gradient {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 0%, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.75) 70%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.85) 100%);
      mix-blend-mode: multiply;
    }

    .chest-cinematic__backdrop-vignette {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.85) 100%);
      pointer-events: none;
    }

    .chest-cinematic__backdrop-orbit {
      position: absolute;
      border-radius: 999px;
      border: 1px dashed rgba(148, 163, 184, 0.45);
      box-shadow:
        0 0 18px rgba(129, 140, 248, 0.4),
        inset 0 0 12px rgba(15, 23, 42, 0.8);
      opacity: 0.35;
      transform-origin: center;
      animation: chestOrbitSpin 32s linear infinite;
    }

    .chest-cinematic__backdrop-orbit--1 {
      inset: 12% 4%;
    }

    .chest-cinematic__backdrop-orbit--2 {
      inset: 26% 18%;
      animation-duration: 26s;
      animation-direction: reverse;
      opacity: 0.25;
    }

    @keyframes chestOrbitSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Plateforme */
    .chest-cinematic__platform {
      position: absolute;
      inset: auto 10% 3%;
      height: 120px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      pointer-events: none;
      z-index: 1;
    }

    .chest-cinematic__platform-ring {
      position: absolute;
      border-radius: 999px;
      transform-origin: center;
    }

    .chest-cinematic__platform-ring--outer {
      width: 78%;
      height: 50px;
      background:
        radial-gradient(circle at 50% 0%, rgba(15, 23, 42, 0.4), transparent 70%),
        radial-gradient(circle at 50% 60%, rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.98));
      box-shadow: 0 16px 45px rgba(0, 0, 0, 0.9);
    }

    .chest-cinematic__platform-ring--inner {
      width: 44%;
      height: 26px;
      background:
        radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.6), transparent 70%),
        radial-gradient(circle at 50% 80%, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 1));
      box-shadow:
        0 0 26px rgba(56, 189, 248, 0.8),
        0 10px 30px rgba(15, 23, 42, 0.95);
      opacity: calc(0.5 + var(--rings-intensity) * 0.5);
      transform: scale(calc(0.9 + var(--rings-intensity) * 0.15));
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .chest-cinematic__platform-core {
      position: absolute;
      bottom: 8px;
      width: 32%;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.95));
      box-shadow:
        0 0 20px rgba(15, 23, 42, 0.9),
        0 -8px 28px rgba(15, 23, 42, 1);
    }

    /* Aura / énergie */
    .chest-cinematic__aura {
      position: absolute;
      inset: 10% 12% 10%;
      pointer-events: none;
      mix-blend-mode: screen;
      z-index: 1;
    }

    .chest-cinematic__aura-layer {
      position: absolute;
      inset: 26% 18% 16%;
      border-radius: 50%;
      opacity: calc(0.25 + var(--aura-intensity) * 0.6);
      filter: blur(16px);
      transform-origin: center;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .chest-cinematic__aura-layer--1 {
      background: radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.7), transparent 70%);
      transform: scale(calc(1 + var(--charge-intensity) * 0.1));
    }

    .chest-cinematic__aura-layer--2 {
      background: radial-gradient(circle at 50% 10%, rgba(129, 140, 248, 0.75), transparent 70%);
      transform: scale(calc(0.9 + var(--charge-intensity) * 0.12));
    }

    .chest-cinematic__aura-layer--3 {
      inset: 34% 26% 16%;
      background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.6), transparent 70%);
      transform: scale(calc(0.8 + var(--charge-intensity) * 0.1));
    }

    /* Anneaux d’énergie */
    .chest-cinematic__rings {
      position: absolute;
      inset: 14% 16% 22%;
      pointer-events: none;
      z-index: 2;
    }

    .chest-cinematic__ring {
      position: absolute;
      inset: 20% 18%;
      border-radius: 999px;
      border: 1.5px solid rgba(148, 163, 184, 0.7);
      box-shadow: 0 0 18px rgba(129, 140, 248, 0.8);
      mix-blend-mode: screen;
      opacity: calc(0.1 + var(--rings-intensity) * 0.75);
      transform-origin: center;
      transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    }

    .chest-cinematic__ring--outer {
      inset: 16% 10%;
      border-color: rgba(129, 140, 248, 0.75);
      transform: scale(calc(1 + var(--charge-intensity) * 0.15));
    }

    .chest-cinematic__ring--middle {
      inset: 20% 18%;
      border-color: rgba(45, 212, 191, 0.8);
      transform: scale(calc(0.92 + var(--charge-intensity) * 0.12));
    }

    .chest-cinematic__ring--inner {
      inset: 26% 24%;
      border-color: rgba(56, 189, 248, 0.85);
      transform: scale(calc(0.84 + var(--charge-intensity) * 0.12));
    }

    /* Conteneur de loot futuriste (prisme/capsule, pas une boule) */
    .chest-cinematic__chest {
      position: relative;
      width: 210px;
      max-width: 60%;
      margin: 0 auto;
      transform-origin: 50% 70%;
      z-index: 3;
      transition: transform 0.35s ease;
      transform: translateY(calc(var(--chest-open-ratio) * -4px)) scale(calc(0.98 + var(--chest-open-ratio) * 0.04));
    }

    /* Cadre extérieur pour bien détacher le conteneur du fond */
    .chest-cinematic__chest::before {
      content: '';
      position: absolute;
      inset: -10px -12px;
      border-radius: 26px;
      border: 2px solid rgba(129, 140, 248, 0.7);
      box-shadow:
        0 0 30px rgba(129, 140, 248, 0.8),
        0 0 50px rgba(56, 189, 248, 0.6);
      opacity: 0.9;
      pointer-events: none;
      z-index: -1;
    }

    /* Corps principal : prisme vertical segmenté */
    .chest-cinematic__chest-base {
      position: relative;
      height: 210px;
      border-radius: 22px;
      background: #020617;
      box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.95),
        inset 0 0 0 1px rgba(148, 163, 184, 0.4);
      overflow: hidden;
    }

    /* Intérieur : barre dorée uniquement (le rond central original vient des autres couches) */
    .chest-cinematic__chest-base::before,
    .chest-cinematic__chest-base::after {
      content: '';
      position: absolute;
      pointer-events: none;
    }

    .chest-cinematic__chest-base::before {
      display: none;
    }

    /* Barre dorée verticale */
    .chest-cinematic__chest-base::after {
      inset: 12% calc(50% - 6px) 12%;
      border-radius: 999px;
      background:
        linear-gradient(180deg,
          rgba(250, 204, 21, 0.05) 0%,
          rgba(250, 204, 21, 0.9) 40%,
          rgba(234, 179, 8, 0.95) 60%,
          rgba(250, 204, 21, 0.1) 100%);
      box-shadow:
        0 0 26px rgba(250, 204, 21, 0.9),
        0 0 44px rgba(250, 204, 21, 0.7);
      opacity: calc(0.4 + var(--charge-intensity) * 0.6);
      transition: opacity 0.3s ease;
    }

    /* On masque les éléments internes supplémentaires pour ne garder que barre + rond */
    .chest-cinematic__chest-panel,
    .chest-cinematic__locks,
    .chest-cinematic__runes {
      display: none;
    }

    .chest-cinematic__chest-panel {
      position: absolute;
      inset: 14% 18%;
      border-radius: 14px;
      background:
        conic-gradient(from 0deg,
          rgba(129, 140, 248, 0) 0deg,
          rgba(129, 140, 248, 0.55) 60deg,
          rgba(56, 189, 248, 0) 140deg,
          rgba(45, 212, 191, 0.7) 200deg,
          rgba(56, 189, 248, 0) 280deg,
          rgba(129, 140, 248, 0.55) 340deg,
          rgba(129, 140, 248, 0) 360deg);
      opacity: calc(0.25 + var(--charge-intensity) * 0.6);
      filter: blur(4px);
      mix-blend-mode: screen;
      transform-origin: 50% 50%;
      transform: rotate(0deg);
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .chest-cinematic__chest-panel--front {
      animation: chestCoreRingsSpin 26s linear infinite;
    }

    .chest-cinematic__chest-panel--side-left {
      inset: 18% 18%;
      animation: chestCoreRingsSpin 32s linear infinite reverse;
    }

    .chest-cinematic__chest-panel--side-right {
      inset: 26% 26%;
      animation: chestCoreRingsSpin 40s linear infinite;
    }

    @keyframes chestCoreRingsSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Cap supérieur = couronne d'énergie, pas de charnière */
    .chest-cinematic__chest-lid {
      position: absolute;
      inset: 4% 22% auto;
      height: 48px;
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(250, 204, 21, 0.45) 0%, rgba(234, 179, 8, 0.05) 80%),
        linear-gradient(90deg, rgba(250, 250, 250, 0.3), rgba(250, 250, 250, 0.8), rgba(250, 250, 250, 0.3));
      box-shadow:
        0 0 36px rgba(250, 204, 21, 0.8),
        0 12px 28px rgba(0, 0, 0, 1);
      transform-origin: 50% 50%;
      transform: scaleY(calc(0.7 + var(--chest-open-ratio) * 0.6));
      opacity: calc(0.5 + var(--chest-open-ratio) * 0.45);
      transition: transform 0.4s cubic-bezier(0.17, 0.67, 0.12, 0.99), opacity 0.3s ease;
      z-index: 4;
    }

    .chest-cinematic__chest-lid-top,
    .chest-cinematic__chest-lid-front {
      display: none; /* visuellement, on ne garde que la couronne abstraite ci-dessus */
    }

    /* Satellites / fragments orbitaux */
    .chest-cinematic__locks {
      position: absolute;
      inset: 10% 6% 52%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 4;
      pointer-events: none;
    }

    .chest-cinematic__lock {
      width: 18px;
      height: 32px;
      border-radius: 4px;
      background: linear-gradient(180deg, #020617 0%, #0f172a 60%, #020617 100%);
      box-shadow:
        0 0 14px rgba(129, 140, 248, 0.6),
        0 0 22px rgba(56, 189, 248, 0.7);
      border: 1px solid rgba(148, 163, 184, 0.85);
      position: relative;
      transform-origin: 50% 50%;
      transform: scale(calc(0.9 + var(--charge-intensity) * 0.2));
      opacity: calc(0.4 + var(--charge-intensity) * 0.5);
      transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
    }

    .chest-cinematic__lock::before {
      content: '';
      position: absolute;
      inset: 16% 22%;
      border-radius: 2px;
      background: radial-gradient(circle, rgba(56, 189, 248, 0.85), transparent 70%);
      opacity: 0.85;
    }

    .chest-cinematic__lock::after {
      content: '';
      position: absolute;
      inset: 6% 6%;
      border-radius: inherit;
      border: 1px solid rgba(148, 163, 184, 0.65);
      box-shadow: inset 0 0 10px rgba(15, 23, 42, 1);
    }

    .chest-cinematic__runes {
      position: absolute;
      inset: 26% 22% 28%;
      pointer-events: none;
      z-index: 4;
    }

    .chest-cinematic__rune {
      position: absolute;
      width: 34px;
      height: 34px;
      border-radius: 4px;
      border: 1px solid rgba(129, 140, 248, 0.8);
      box-shadow:
        0 0 16px rgba(129, 140, 248, 0.65),
        inset 0 0 10px rgba(15, 23, 42, 0.9);
      opacity: calc(0.1 + var(--runes-intensity) * 0.9);
      transform-origin: center;
      transform: scale(calc(0.8 + var(--runes-intensity) * 0.4));
      transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    }

    .chest-cinematic__rune--1 {
      top: 0%;
      left: 50%;
      transform: translateX(-50%) scale(calc(0.8 + var(--runes-intensity) * 0.4));
      border-color: rgba(56, 189, 248, 0.9);
    }

    .chest-cinematic__rune--2 {
      bottom: 0%;
      left: 6%;
      border-color: rgba(129, 140, 248, 0.9);
    }

    .chest-cinematic__rune--3 {
      bottom: 0%;
      right: 6%;
      border-color: rgba(45, 212, 191, 0.9);
    }

    .chest-cinematic__rune::before {
      content: '';
      position: absolute;
      inset: 26% 26%;
      border-radius: 2px;
      background: linear-gradient(135deg,
        rgba(56, 189, 248, 0.1) 0%,
        rgba(56, 189, 248, 0.85) 50%,
        rgba(56, 189, 248, 0.1) 100%);
      opacity: calc(0.2 + var(--runes-intensity) * 0.7);
      filter: blur(3px);
      animation: chestRuneSpin 18s linear infinite;
    }

    @keyframes chestRuneSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Particules DOM créées par JS */
    .chest-cinematic__particles-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: visible;
      z-index: 5;
    }

    .chest-cinematic__particles-layer--back {
      mix-blend-mode: screen;
    }

    .chest-cinematic__particles-layer--mid {
      mix-blend-mode: screen;
    }

    .chest-cinematic__particles-layer--front {
      mix-blend-mode: screen;
    }

    .chest-cinematic__particle {
      position: absolute;
      width: 8px;
      height: 8px;
      top: var(--start-y);
      left: var(--start-x);
      transform: translate(-50%, -50%) scale(var(--scale-start));
      opacity: 0;
      pointer-events: none;
      --particle-hue: 45;
      animation-duration: var(--life);
      animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
      animation-fill-mode: forwards;
    }

    /* Sparks */
    .chest-cinematic__particle--spark {
      border-radius: 999px;
      background: hsl(var(--particle-hue), 94%, 68%);
      box-shadow:
        0 0 6px hsla(var(--particle-hue), 96%, 70%, 0.8),
        0 0 18px hsla(var(--particle-hue), 96%, 70%, 0.6);
      animation-name: chestParticleSpark;
    }

    @keyframes chestParticleSpark {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(calc(var(--scale-start) * 0.4));
      }
      10% {
        opacity: 1;
      }
      60% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        top: var(--end-y);
        left: var(--end-x);
        transform: translate(-50%, -50%) scale(var(--scale-end)) rotate(var(--rotation));
      }
    }

    /* Braises */
    .chest-cinematic__particle--ember {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: hsl(var(--particle-hue), 90%, 70%);
      box-shadow:
        0 0 4px hsla(var(--particle-hue), 96%, 70%, 0.7),
        0 0 12px hsla(var(--particle-hue), 96%, 70%, 0.5);
      animation-name: chestParticleEmber;
    }

    @keyframes chestParticleEmber {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(var(--scale-start));
      }
      15% {
        opacity: 1;
      }
      70% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        top: var(--end-y);
        left: var(--end-x);
        transform: translate(-50%, -50%) scale(var(--scale-end)) translateY(-8px);
      }
    }

    /* Rayons */
    .chest-cinematic__particle--ray {
      width: 3px;
      height: 60px;
      border-radius: 999px;
      background: linear-gradient(180deg,
        hsla(var(--particle-hue), 95%, 75%, 0) 0%,
        hsla(var(--particle-hue), 95%, 75%, 0.7) 40%,
        hsla(var(--particle-hue), 95%, 75%, 0) 100%);
      filter: blur(0.5px);
      transform-origin: 50% 80%;
      animation-name: chestParticleRay;
    }

    @keyframes chestParticleRay {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleY(0.1) rotate(var(--rotation));
      }
      20% {
        opacity: 1;
      }
      70% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        top: var(--end-y);
        left: var(--end-x);
        transform: translate(-50%, -50%) scaleY(1) rotate(var(--rotation));
      }
    }

    /* Pointeur / focus */
    .chest-cinematic__focus-indicator {
      position: absolute;
      inset: 38% 42% 34%;
      border-radius: 999px;
      border: 1px solid rgba(248, 250, 252, 0.5);
      box-shadow:
        0 0 20px rgba(248, 250, 252, 0.6),
        0 0 40px rgba(248, 250, 252, 0.4);
      opacity: calc(0.4 + var(--rings-intensity) * 0.4);
      pointer-events: none;
      transform: scale(calc(0.92 + var(--rings-intensity) * 0.06));
      transition: opacity 0.3s ease, transform 0.3s ease;
      z-index: 3;
    }

    /* Panneau de révélation */
    .chest-cinematic__reveal-panel {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.9);
      opacity: 0;
      pointer-events: none;
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.95)),
        radial-gradient(circle at 50% 0%, rgba(251, 191, 36, 0.2), transparent 70%);
      border: 1px solid rgba(148, 163, 184, 0.55);
      box-shadow:
        0 0 32px rgba(249, 250, 251, 0.9),
        0 18px 46px rgba(0, 0, 0, 0.9);
      padding: 1.5rem 2rem;
      z-index: 7;
      backdrop-filter: blur(16px);
    }

    .chest-cinematic__reveal-panel.is-visible {
      opacity: 1;
      pointer-events: auto;
      animation: chestRevealPop 0.7s cubic-bezier(0.17, 0.67, 0.12, 0.99) forwards;
    }

    @keyframes chestRevealPop {
      0% {
        opacity: 0;
        transform: translate(-50%, -52%) scale(0.4);
      }
      45% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.12);
      }
      70% {
        transform: translate(-50%, -50%) scale(0.98);
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
    }

    .chest-cinematic__reveal-inner {
      position: relative;
      text-align: center;
    }

    .chest-cinematic__reveal-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.35rem 0.9rem;
      border-radius: 999px;
      background: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.25), transparent 70%);
      border: 1px solid rgba(148, 163, 184, 0.7);
      margin-bottom: 0.75rem;
      font-size: 0.75rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #e5e7eb;
    }

    .chest-cinematic__reveal-rarity {
      font-weight: 700;
    }

    .chest-cinematic__reveal-value-wrapper {
      display: inline-flex;
      align-items: baseline;
      gap: 0.35rem;
      font-family: 'Orbitron', sans-serif;
      margin-bottom: 0.5rem;
    }

    .chest-cinematic__reveal-value {
      font-size: 2.4rem;
      font-weight: 900;
      color: #facc15;
      text-shadow:
        0 0 12px rgba(250, 204, 21, 0.95),
        0 0 28px rgba(250, 204, 21, 0.85);
      transform: translate(0, 0);
    }

    .chest-cinematic__reveal-unit {
      font-size: 1rem;
      color: #e5e7eb;
      opacity: 0.85;
    }

    .chest-cinematic__reveal-subtitle {
      margin-top: 0.5rem;
      font-size: 0.85rem;
      color: #9ca3af;
    }

    /* Sidebar d’info */
    .chest-modal__sidebar {
      position: relative;
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.96)),
        radial-gradient(circle at 0 0, rgba(129, 140, 248, 0.15), transparent 60%);
      border: 1px solid rgba(148, 163, 184, 0.5);
      box-shadow:
        0 0 26px rgba(15, 23, 42, 0.9),
        0 16px 36px rgba(0, 0, 0, 0.85);
      padding: 1.75rem 1.5rem;
      z-index: 2;
      margin-top: 0.5rem;
    }

    .chest-modal__keys-count {
      color: #e5e7eb;
      margin-bottom: 0.75rem;
      font-size: var(--font-size-lg);
      font-weight: 600;
    }

    .chest-modal__keys-count strong {
      color: #facc15;
      text-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
    }

    .chest-modal__hint {
      color: var(--text-secondary);
      font-size: var(--font-size-sm);
      margin-bottom: 1.25rem;
    }

    .chest-modal__open-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      width: 100%;
      background: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #22c55e 100%);
      color: #fff;
      font-family: 'Orbitron', sans-serif;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 0.95rem 1.5rem;
      border-radius: 999px;
      border: 1px solid rgba(250, 204, 21, 0.7);
      box-shadow:
        0 0 24px rgba(168, 85, 247, 0.6),
        0 16px 40px rgba(0, 0, 0, 0.9);
      transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease, opacity 0.2s ease;
    }

    .chest-modal__open-btn::before {
      content: '▶';
      font-size: 1rem;
    }

    .chest-modal__open-btn:hover:not(:disabled) {
      transform: translateY(-2px) scale(1.02);
      box-shadow:
        0 0 32px rgba(168, 85, 247, 0.9),
        0 20px 54px rgba(0, 0, 0, 1);
      filter: brightness(1.05);
    }

    .chest-modal__open-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      box-shadow: none;
      filter: grayscale(0.3);
    }

    .chest-modal__no-keys {
      color: var(--text-secondary);
      font-size: var(--font-size-sm);
      margin-top: 0.9rem;
    }

    /* États de rareté via data-chest-rarity */
    .chest-cinematic-root[data-chest-rarity='rare'] .chest-cinematic__reveal-badge {
      border-color: rgba(59, 130, 246, 0.9);
      background: radial-gradient(circle at 50% 0, rgba(59, 130, 246, 0.3), transparent 70%);
    }

    .chest-cinematic-root[data-chest-rarity='epic'] .chest-cinematic__reveal-badge {
      border-color: rgba(168, 85, 247, 0.95);
      background: radial-gradient(circle at 50% 0, rgba(168, 85, 247, 0.3), transparent 70%);
    }

    .chest-cinematic-root[data-chest-rarity='legendary'] .chest-cinematic__reveal-badge {
      border-color: rgba(250, 204, 21, 0.95);
      background: radial-gradient(circle at 50% 0, rgba(250, 204, 21, 0.4), transparent 70%);
      box-shadow:
        0 0 26px rgba(250, 204, 21, 0.9),
        0 0 46px rgba(250, 204, 21, 0.7);
    }

    .chest-cinematic-root[data-chest-rarity='legendary'] .chest-cinematic__reveal-value {
      color: #f97316;
      text-shadow:
        0 0 14px rgba(249, 115, 22, 0.95),
        0 0 32px rgba(249, 115, 22, 0.85);
    }

    /* ========== POPUP CLÉ OBTENUE ========== */
    .key-drop-popup {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.35s ease, visibility 0.35s ease;
    }
    .key-drop-popup--visible {
      opacity: 1;
      visibility: visible;
    }
    .key-drop-popup__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(8px);
    }
    .key-drop-popup__card {
      position: relative;
      background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
      border: 2px solid rgba(245, 158, 11, 0.5);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      text-align: center;
      max-width: 320px;
      width: 100%;
      box-shadow:
        0 0 40px rgba(245, 158, 11, 0.2),
        0 25px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
      transform: scale(0.7);
      opacity: 0;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
    }
    .key-drop-popup--visible .key-drop-popup__card {
      transform: scale(1);
      opacity: 1;
    }
    .key-drop-popup__icon {
      font-size: 4rem;
      line-height: 1;
      margin-bottom: var(--space-2);
      animation: keyDropBounce 0.6s ease 0.2s both;
    }
    .key-drop-popup__glow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 120%;
      height: 120%;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
      pointer-events: none;
    }
    .key-drop-popup__title {
      font-family: 'Orbitron', sans-serif;
      font-size: var(--font-size-2xl);
      font-weight: 700;
      color: #f5d0a0;
      margin-bottom: var(--space-1);
      text-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
      animation: keyDropFadeIn 0.5s ease 0.3s both;
    }
    .key-drop-popup__sub {
      color: var(--text-secondary);
      font-size: var(--font-size-sm);
      animation: keyDropFadeIn 0.5s ease 0.4s both;
    }
    @keyframes keyDropBounce {
      0% { transform: scale(0); opacity: 0; }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); opacity: 1; }
    }
    @keyframes keyDropFadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .modal__footer {
      padding: var(--space-3);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      gap: var(--space-2);
      justify-content: center;
    }

    /* END SECTION: MODAL */

  /* ========================================
   START SECTION: BLACKJACK GAME
======================================== */
.blackjack {
  min-height: 500px;
  background: linear-gradient(135deg, #1a5f3e, #0d3524);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
}

.blackjack__table {
  background: #0a2818;
  border: 3px solid #d4af37;
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blackjack__dealer,
.blackjack__player {
  text-align: center;
}

.blackjack__label {
  font-weight: 700;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-lg);
}

.blackjack__cards {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  min-height: 150px;
  align-items: center;
  padding: var(--space-2) 0;
  perspective: 1000px; /* Pour le 3D */
}

/* Animation du score qui change */
.blackjack__score {
  transition: all 0.3s ease;
}

.blackjack__score.score-update {
  transform: scale(1.2);
  color: var(--primary-green);
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}


/* ========================================
   🎴 STRUCTURE 3D DES CARTES
======================================== */

/*  CARTE PRINCIPALE (conteneur) */
.card {
  width: 80px;
  height: 112px;
  position: relative;
  transform-style: preserve-3d;
  transition: none !important;
  perspective: 1000px;
}

/*  CONTENEUR INTÉRIEUR (pour le flip) */
.card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotateY(0deg); /* ✅ PAR DÉFAUT = DOS VISIBLE */
}

/*  ÉTAT RETOURNÉ = FACE VISIBLE */
.card__inner.is-flipped {
  transform: rotateY(180deg); /* ✅ FLIP POUR VOIR LA FACE */
}

/*  FACES (avant/arrière) */
.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/*  FACE AVANT (la vraie carte) - ✅ DÉJÀ RETOURNÉE */
.card__face--front {
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  transform: rotateY(180deg); /* ✅ RETOURNÉE PAR DÉFAUT */
}

/*  FACE ARRIÈRE (dos de carte) - ✅ NORMALE */
.card__face--back {
  background: linear-gradient(135deg, #667eea, #764ba2);
  transform: rotateY(0deg); /* ✅ PAS DE ROTATION */
  display: flex;
  align-items: center;
  justify-content: center;
}

/*  MOTIF DU DOS */
.card__pattern {
  width: 60%;
  height: 80%;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.1) 10px,
    transparent 10px,
    transparent 20px
  );
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}


/*  DISPOSITION DE LA CARTE */
.card__corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.card__corner--top {
  align-self: flex-start;
}

.card__corner--bottom {
  align-self: flex-end;
  transform: rotate(180deg);
}

.card__center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__value {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.card__suit {
  font-size: 14px;
  line-height: 1;
}

.card__suit-large {
  font-size: 48px;
  line-height: 1;
}

/* ✅ COULEURS */
.card--red {
  color: var(--primary-red);
}

.card--black {
  color: #000;
}

/* ========================================
   ANIMATIONS DE CARTES
======================================== */


.card.card--dealing {
  animation: cardFlipHorizontal 0.8s ease-out forwards;
}

@keyframes cardFlipHorizontal {
  0% {
    opacity: 0;
    transform: translateY(-100px) rotateY(-180deg) scale(0.8);
  }
  60% {
    transform: translateY(10px) rotateY(20deg) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateY(0) scale(1);
  }
}


/*  STABILISATION APRÈS ANIMATION */
.card:not(.card--dealing) .card__inner {
  animation: none;
}

/* ========================================
    RESTE DE L'INTERFACE
======================================== */

.blackjack__score {
  margin-top: var(--space-2);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: var(--font-size-xl);
  color: var(--primary-green);
}

.blackjack__controls {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.blackjack__btn {
  background: linear-gradient(135deg, var(--primary-purple), var(--accent-blue));
  color: white;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--font-size-base);
  transition: all var(--transition-base);
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
  min-width: 120px;
}

.blackjack__btn:hover:not(:disabled),
.blackjack__btn:focus:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6);
  outline: 2px solid var(--primary-purple);
  outline-offset: 2px;
}

.blackjack__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.blackjack__btn--stand {
  background: linear-gradient(135deg, var(--primary-red), #c53030);
}

.blackjack__btn--new {
  background: linear-gradient(135deg, var(--primary-green), #059669);
}

.blackjack__message {
  text-align: center;
  margin-top: var(--space-3);
  padding: var(--space-2);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--font-size-lg);
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blackjack__bet-area {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.blackjack__bet-label {
  font-weight: 700;
}

.blackjack__bet-input {
  background: var(--card-bg);
  border: 2px solid var(--primary-purple);
  color: var(--text-primary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: var(--font-size-base);
  width: 150px;
  text-align: center;
}

.blackjack__bet-input:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}
/* END SECTION: BLACKJACK GAME */




    /* ========================================
            START SECTION: PUISSANCE 4
    ======================================== */

.puissance4 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem;
}

/* Bet Area */
.puissance4__bet-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.puissance4__bet-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}

.puissance4__bet-input {
  width: 100;
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  transition: all 0.3s ease;
}

.puissance4__bet-input:focus {
  outline: none;
  border-color: #f5576c;
  box-shadow: 0 0 0 3px rgba(245, 87, 108, 0.2);
}

/* Game Info */
.puissance4__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(240, 147, 251, 0.1) 0%, rgba(245, 87, 108, 0.1) 100%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.puissance4__turn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.puissance4__player-indicator {
  font-size: 1.3em;
  animation: pulse 1.5s ease-in-out infinite;
}

.puissance4__player-indicator--red {
  filter: drop-shadow(0 0 8px rgba(255, 68, 68, 0.6));
}

.puissance4__player-indicator--yellow {
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.puissance4__score-display {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

/* Game Board */
.puissance4__board-container {
  display: flex;
  justify-content: center;
  padding: 0.5rem;
}

.puissance4__board {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.3),
    inset 0 2px 8px rgba(255, 255, 255, 0.1);
  width: fit-content;
  max-width: 100%;
}

.puissance4__cell {
  width: 60px;
  height: 70px;
  aspect-ratio: 1;
  max-width: 60px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(200, 200, 200, 0.8) 100%);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.puissance4__cell:hover:not(.puissance4__cell--filled):not(.puissance4__cell--disabled) {
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(220, 220, 255, 0.9) 100%);
  transform: scale(1.05);
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(255, 255, 255, 0.3);
}

.puissance4__cell--filled {
  cursor: default;
  /*animation: dropCoin 0.5s cubic-bezier(0.36, 0, 0.66, -0.56);*/
}

.puissance4__cell--red {
  background: radial-gradient(circle, #ff4444 0%, #cc0000 100%);
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(255, 68, 68, 0.4);
}

.puissance4__cell--yellow {
  background: radial-gradient(circle, #ffd700 0%, #ffaa00 100%);
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(255, 215, 0, 0.4);
}

.puissance4__cell--winning {
  animation: winningCell 0.6s ease-in-out infinite alternate;
}

@keyframes dropCoin {
  0% { transform: translateY(-500px); }
  60% { transform: translateY(10px); }
  80% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

@keyframes winningCell {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  100% {
    transform: scale(1.15);
    filter: brightness(1.4) drop-shadow(0 0 12px currentColor);
  }
}

.puissance4__cell--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Game Result */
.puissance4__result {
  text-align: center;
  padding: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  animation: resultSlideIn 0.5s ease;
}

@keyframes resultSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Game Controls */
.puissance4__controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.puissance4__btn {
  padding: 0.6rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.puissance4__btn--primary {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
}

.puissance4__btn--primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 87, 108, 0.6);
}

.puissance4__btn--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.puissance4__btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.puissance4__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.puissance4__btn:active:not(:disabled) {
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
  .puissance4__board {
    gap: 6px;
    padding: 15px;
  }

  .puissance4__cell {
    width: 45px;
    height: 45px;
  }

  .puissance4__info {
    flex-direction: column;
    gap: 0.75rem;
  }

  .puissance4__result {
    font-size: 1.2rem;
    padding: 0.75rem;
  }
}

@media (max-width: 480px) {
  .puissance4__cell {
    width: 38px;
    height: 38px;
  }

  .puissance4__board {
    gap: 4px;
    padding: 10px;
  }
}




    /* ========================================
       START SECTION: TOAST
    ======================================== */
    .toast-container {
      position: fixed;
      bottom: var(--space-3);
      right: var(--space-3);
      z-index: 4000;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      pointer-events: none;
    }

    .toast {
      background: var(--card-bg);
      color: var(--text-primary);
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-2);
      min-width: 300px;
      opacity: 0;
      transform: translateX(100%);
      transition: all var(--transition-base);
      border-left: 4px solid var(--primary-green);
      font-weight: 600;
    }

    .toast.is-visible {
      opacity: 1;
      transform: translateX(0);
    }

    .toast--info {
      border-left-color: var(--accent-blue);
    }

    .toast--success {
      border-left-color: var(--primary-green);
    }

    .toast--warning {
      border-left-color: #f59e0b;
    }

    .toast--danger {
      border-left-color: var(--primary-red);
    }
    /* END SECTION: TOAST */

    /* ========================================
       START SECTION: UTILITIES
    ======================================== */
    .text-center {
      text-align: center;
    }

    .glow-on-hover {
      position: relative;
    }

    .glow-on-hover::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, var(--primary-purple), var(--primary-green), var(--primary-red), var(--accent-blue));
      border-radius: inherit;
      opacity: 0;
      transition: opacity var(--transition-base);
      z-index: -1;
      filter: blur(10px);
    }

    .glow-on-hover:hover::before {
      opacity: 1;
    }
    /* END SECTION: UTILITIES */

    /* ========================================
       START SECTION: PAGE CONTENT
    ======================================== */
    .page-content {
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      margin: var(--space-5) 0;
    }

    .page-content__body {
      margin-top: var(--space-4);
      color: var(--text-primary);
      line-height: 1.8;
    }

    .page-content__body h2 {
      color: var(--primary-purple);
      font-family: 'Orbitron', sans-serif;
      font-size: var(--font-size-xl);
      margin-top: var(--space-4);
      margin-bottom: var(--space-2);
    }

    .page-content__body p {
      margin-bottom: var(--space-3);
    }

    .page-content__body ul {
      margin-left: var(--space-4);
      margin-bottom: var(--space-3);
      list-style-type: disc;
    }

    .page-content__body li {
      margin-bottom: var(--space-1);
    }

    .page-content__body strong {
      color: var(--primary-green);
    }
    /* END SECTION: PAGE CONTENT */

    /* ========================================
       START SECTION: DÉMINEUR GAME
    ======================================== */
    .demineur {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      padding: var(--space-2);
    }

    .demineur__bet-area {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      padding: var(--space-2);
      background: rgba(255, 255, 255, 0.05);
      border-radius: var(--radius-md);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .demineur__bet-label {
      font-weight: 600;
      color: var(--text-primary);
    }

    .demineur__bet-input {
      width: 100px;
      padding: var(--space-1) var(--space-2);
      font-size: var(--font-size-base);
      font-weight: 600;
      text-align: center;
      background: rgba(0, 0, 0, 0.3);
      border: 2px solid rgba(255, 255, 255, 0.2);
      border-radius: var(--radius-sm);
      color: var(--text-primary);
      transition: all var(--transition-base);
    }

    .demineur__bet-input:focus {
      outline: none;
      border-color: var(--primary-purple);
      box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
    }

    .demineur__info {
      display: flex;
      justify-content: center;
      padding: var(--space-2);
    }

    .demineur__stats {
      display: flex;
      gap: var(--space-4);
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
    }

    .demineur__stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-1);
      padding: var(--space-2);
      background: rgba(255, 255, 255, 0.05);
      border-radius: var(--radius-md);
      border: 1px solid rgba(255, 255, 255, 0.1);
      min-width: 100px;
    }

    .demineur__stat-label {
      font-size: var(--font-size-sm);
      color: var(--text-secondary);
      font-weight: 600;
    }

    .demineur__stat-value {
      font-size: var(--font-size-xl);
      font-weight: 700;
      color: var(--primary-green);
      font-family: 'Orbitron', sans-serif;
    }

    .demineur__board-container {
      display: flex;
      justify-content: center;
      padding: var(--space-2);
    }

    .demineur__board {
      display: grid;
      gap: 2px;
      padding: var(--space-2);
      background: rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-md);
      border: 2px solid rgba(255, 255, 255, 0.2);
    }

    .demineur__cell {
      width: 35px;
      height: 35px;
      background: linear-gradient(135deg, #bfc7ce, #d7e0e7);
      border: 2px outset #e8eef2;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: var(--font-size-lg);
      cursor: pointer;
      transition: all 0.1s ease;
      user-select: none;
    }

    .demineur__cell:hover:not(.demineur__cell--revelee):not(.demineur__cell--marquee) {
      background: linear-gradient(135deg, #d7e0e7, #e8eef2);
      transform: scale(1.05);
    }

    .demineur__cell:active:not(.demineur__cell--revelee):not(.demineur__cell--marquee) {
      transform: scale(0.95);
      border-style: inset;
    }

    .demineur__cell--revelee {
      background: #f5f5f5;
      border: 1px solid #ccc;
      border-style: inset;
      cursor: default;
    }

    .demineur__cell--marquee {
      background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
      border: 2px outset #ff5252;
      color: white;
    }

    .demineur__cell--mine {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      border: 2px inset #b91c1c;
      animation: explosion 0.3s ease;
    }

    @keyframes explosion {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.3);
      }
      100% {
        transform: scale(1);
      }
    }

    .demineur__cell--nombre-1 {
      color: #0000ff;
    }

    .demineur__cell--nombre-2 {
      color: #008000;
    }

    .demineur__cell--nombre-3 {
      color: #ff0000;
    }

    .demineur__cell--nombre-4 {
      color: #000080;
    }

    .demineur__cell--nombre-5 {
      color: #800000;
    }

    .demineur__cell--nombre-6 {
      color: #008080;
    }

    .demineur__cell--nombre-7 {
      color: #000000;
    }

    .demineur__cell--nombre-8 {
      color: #808080;
    }

    .demineur__result {
      text-align: center;
      padding: var(--space-3);
      font-size: var(--font-size-xl);
      font-weight: 700;
      border-radius: var(--radius-md);
      animation: resultSlideIn 0.5s ease;
    }

    .demineur__result--victoire {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
      color: var(--primary-green);
      border: 2px solid var(--primary-green);
    }

    .demineur__result--defaite {
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
      color: var(--primary-red);
      border: 2px solid var(--primary-red);
    }

    .demineur__controls {
      display: flex;
      gap: var(--space-2);
      justify-content: center;
      flex-wrap: wrap;
    }

    .demineur__btn {
      padding: var(--space-2) var(--space-4);
      font-size: var(--font-size-base);
      font-weight: 600;
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all var(--transition-base);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .demineur__btn--primary {
      background: linear-gradient(135deg, var(--primary-purple), var(--accent-blue));
      color: white;
      box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
    }

    .demineur__btn--primary:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6);
    }

    .demineur__btn--ghost {
      background: transparent;
      color: var(--text-primary);
      border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .demineur__btn--ghost:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.5);
    }

    .demineur__btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none !important;
    }

    @media (max-width: 768px) {
      .demineur__cell {
        width: 30px;
        height: 30px;
        font-size: var(--font-size-base);
      }

      .demineur__stats {
        gap: var(--space-2);
      }

      .demineur__stat {
        min-width: 80px;
        padding: var(--space-1);
      }
    }

    @media (max-width: 480px) {
      .demineur__cell {
        width: 25px;
        height: 25px;
        font-size: var(--font-size-sm);
      }
    }
    /* END SECTION: DÉMINEUR GAME */

  /* ========================================
    START SECTION: CRASH GAME (DARK NEON PANEL)
  ======================================== */

  .crash-app {
    --crash-bg: #050816;
    --crash-neon: #00ff88;
    --crash-danger: #ff1a1a;
    --crash-glass: rgba(255,255,255,0.05);
    --crash-text: #f9fafb;
    --crash-muted: #9ca3af;

    font-family: 'Orbitron', monospace;
    background: radial-gradient(circle at 0 0, rgba(0,255,136,0.15), transparent 55%),
                radial-gradient(circle at 100% 100%, rgba(37,99,235,0.18), transparent 55%),
                var(--crash-bg);
    border-radius: 24px;
    padding: 1.5rem;
    border: 1px solid rgba(15,23,42,0.9);
    box-shadow: 0 24px 80px rgba(0,0,0,0.85);
    color: var(--crash-text);
  }

  .crash-app.running .crash-multiplier-value {
    animation: crashMultiplierPulsePanel 0.5s ease-in-out infinite;
  }

  .crash-app.crashed .crash-panel {
    animation: crashShake 0.5s ease, bgRedFlash 0.5s ease;
  }

  .crash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .crash-logo {
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(15,23,42,0.9);
    border: 1px solid rgba(148,163,184,0.35);
    box-shadow: 0 0 16px rgba(15,23,42,0.8);
  }

  .crash-balance {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--crash-muted);
  }

  .crash-balance span {
    color: var(--crash-neon);
    font-weight: 700;
  }

  .crash-main {
    margin-top: 0.5rem;
  }

  .crash-panel {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: linear-gradient(145deg, rgba(15,23,42,0.95), rgba(15,23,42,0.8));
    border-radius: 24px;
    padding: 1.5rem;
    border: 1px solid rgba(15,23,42,0.9);
    box-shadow: inset 0 0 0 1px rgba(148,163,184,0.25),
                0 0 35px rgba(0,0,0,0.75);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  /* Graphe principal */
  .crash-graph {
    margin-top: 0.5rem;
    border-radius: 20px;
    border: 2px solid var(--crash-neon);
    box-shadow:
      0 0 36px rgba(0,255,136,0.55),
      0 18px 40px rgba(0,0,0,0.9);
    overflow: hidden;
    background: radial-gradient(circle at 50% 20%, #0b1627 0%, #020617 55%, #000000 100%);
    position: relative;
  }

  /* CORRECTION CRITIQUE DU CANVAS */
  #crashCanvas {
    display: block;
    width: 100%;
    max-width: 800px;
    height: 500px !important;
    min-height: 500px;
    background: transparent;
  }

  /* Barre du haut : mise */
  .crash-top-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .crash-top-bar .label {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--crash-muted);
  }

  .crash-stake-input-wrapper {
    display: inline-flex;
    align-items: center;
    background: rgba(15,23,42,0.9);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    border: 1px solid rgba(148,163,184,0.5);
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.9);
  }

  .crash-stake-input {
    width: 110px;
    padding: 0.45rem 0.6rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--crash-text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: right;
    outline: none;
  }

  .crash-stake-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,255,136,0.6);
  }

  .crash-stake-input-wrapper .unit {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-left: 0.35rem;
    color: var(--crash-muted);
  }

  /* Multiplicateur */
  .crash-multiplier-area {
    margin-top: 0.25rem;
  }

  .crash-multiplier-frame {
    position: relative;
    padding: 1.8rem 1rem;
    border-radius: 20px;
    background: radial-gradient(circle at 20% 0, rgba(0,255,136,0.24), transparent 55%),
                radial-gradient(circle at 80% 100%, rgba(255,26,26,0.22), transparent 55%),
                #020617;
    border: 2px solid var(--crash-neon);
    box-shadow: 0 0 38px rgba(0,255,136,0.5), inset 0 0 18px rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .crash-multiplier-value,
  #crashMultiplier {
    font-size: clamp(2.6rem, 8vw, 3.4rem);
    font-weight: 900;
    letter-spacing: 0.12em;
    color: var(--crash-neon);
    text-shadow:
      0 0 10px rgba(0,255,136,0.9),
      0 0 26px rgba(0,255,136,0.8),
      0 0 42px rgba(0,255,136,0.8);
  }

  /* Cartes d'info */
  .crash-infos-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .crash-info-card {
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(15,23,42,0.9), rgba(15,23,42,0.96));
    border: 1px solid rgba(31,41,55,0.9);
    box-shadow: 0 12px 30px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .crash-info-card .label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--crash-muted);
  }

  .crash-info-card .value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--crash-neon);
  }

  /* Boutons d'action */
  .crash-actions-row {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 0.5rem;
  }

  .crash-btn {
    width: 100%;
    padding: 0.9rem 1.3rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    will-change: transform;
    font-family: inherit;
  }

  .crash-btn-primary {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #f9fafb;
    border-color: rgba(34,197,94,0.8);
    box-shadow:
      0 0 18px rgba(34,197,94,0.6),
      0 12px 30px rgba(0,0,0,0.7);
  }

  .crash-btn-secondary {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #f9fafb;
    border-color: rgba(34,197,94,0.8);
    box-shadow:
      0 0 18px rgba(34,197,94,0.6),
      0 12px 30px rgba(0,0,0,0.7);
  }

  .crash-btn-secondary:disabled {
    background: #1e293b;
    color: #64748b;
    border-color: rgba(71,85,105,0.7);
    box-shadow: none;
    cursor: not-allowed;
  }

  .crash-btn-ghost {
    background: rgba(15,23,42,0.9);
    color: #e5e7eb;
    border-color: rgba(148,163,184,0.7);
  }

  .crash-btn:hover:not(:disabled),
  .crash-btn:focus-visible:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 0 32px rgba(0,255,136,0.5);
  }

  .crash-btn:focus-visible {
    outline: 2px solid var(--crash-neon);
    outline-offset: 3px;
  }

  /* Statut */
  .crash-status {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    text-align: center;
    color: var(--crash-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Résultat du crash */
  .crash__result {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(148,163,184,0.3);
    text-align: center;
    font-size: 0.9rem;
    color: var(--crash-text);
  }

  /* Animations spécifiques au panel */
  @keyframes crashMultiplierPulsePanel {
    0%, 100% {
      transform: scale(1);
      text-shadow:
        0 0 10px rgba(0,255,136,0.9),
        0 0 24px rgba(0,255,136,0.8);
    }
    50% {
      transform: scale(1.15);
      text-shadow:
        0 0 16px rgba(0,255,136,1),
        0 0 32px rgba(0,255,136,1);
    }
  }

  @keyframes crashShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
  }

  @keyframes bgRedFlash {
    0%, 100% { background: linear-gradient(145deg, rgba(15,23,42,0.95), rgba(15,23,42,0.8)); }
    50% { background: linear-gradient(145deg, rgba(255,26,26,0.3), rgba(255,26,26,0.2)); }
  }

  /* Responsive */
  @media (min-width: 768px) {
    .crash-infos-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crash-actions-row {
      flex-direction: row;
    }

    .crash-actions-row .crash-btn {
      flex: 1;
    }
  }

  /* Version mobile pour le canvas */
  @media (max-width: 768px) {
    #crashCanvas {
      height: 350px !important;
      min-height: 350px;
    }
  }

    .crash__multiplier-display {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: var(--font-size-4xl);
      font-weight: 900;
      font-family: 'Orbitron', sans-serif;
      color: #ffffff;
      text-shadow:
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 30px currentColor;
      z-index: 10;
      transition: color 0.3s ease;
    }

    .crash__info {
      display: flex;
      justify-content: center;
      gap: var(--space-4);
      flex-wrap: wrap;
    }

    .crash__stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-1);
      padding: var(--space-2);
      background: rgba(255, 255, 255, 0.05);
      border-radius: var(--radius-md);
      border: 1px solid rgba(255, 255, 255, 0.1);
      min-width: 150px;
    }

    .crash__stat-label {
      font-size: var(--font-size-sm);
      color: var(--text-secondary);
      font-weight: 600;
    }

    .crash__stat-value {
      font-size: var(--font-size-xl);
      font-weight: 700;
      color: var(--primary-green);
      font-family: 'Orbitron', sans-serif;
    }

    .crash__controls {
      display: flex;
      gap: var(--space-2);
      justify-content: center;
      flex-wrap: wrap;
    }

    .crash__btn {
      padding: var(--space-2) var(--space-4);
      font-size: var(--font-size-base);
      font-weight: 600;
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all var(--transition-base);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      min-width: 140px;
    }

    .crash__btn--primary {
      background: linear-gradient(135deg, var(--primary-purple), var(--accent-blue));
      color: white;
      box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
    }

    .crash__btn--primary:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6);
    }

    .crash__btn--success {
      background: linear-gradient(135deg, var(--primary-green), #059669);
      color: white;
      box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
      animation: pulseEncaisser 2s ease infinite;
    }

    .crash__btn--success:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
    }

    @keyframes pulseEncaisser {
      0%, 100% {
        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
      }
      50% {
        box-shadow: 0 4px 25px rgba(16, 185, 129, 0.8);
      }
    }

    .crash__btn--ghost {
      background: transparent;
      color: var(--text-primary);
      border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .crash__btn--ghost:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.5);
    }

    .crash__btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none !important;
      animation: none !important;
    }

  /* END SECTION: CRASH GAME */

    /* ========================================
       START SECTION: FLAPPY BIRD GAME
    ======================================== */
    .modal--flappy .modal {
      max-width: 400px;
    }

    .flappy-game {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-2);
    }

    #flappyCanvas {
      background: var(--dark-bg);
      border: 2px solid var(--primary-purple);
      border-radius: var(--radius-md);
      box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
      image-rendering: pixelated;
      image-rendering: -moz-crisp-edges;
      image-rendering: crisp-edges;
      cursor: pointer;
      display: block;
      max-width: 100%;
      height: auto;
    }

    .flappy-game__instructions {
      text-align: center;
      color: var(--text-secondary);
      font-size: var(--font-size-sm);
      line-height: 1.6;
    }

    .flappy-game__instructions p {
      margin: var(--space-1) 0;
    }

    @media (max-width: 480px) {
      #flappyCanvas {
        width: 100%;
        height: auto;
      }

      .modal--flappy .modal {
        max-width: 95%;
        margin: var(--space-2);
      }
    }

    /* Animation pour la récompense Flappy */
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translate(-50%, -60%);
      }
      to {
        opacity: 1;
        transform: translate(-50%, -50%);
      }
    }

    @keyframes slideOut {
      from {
        opacity: 1;
        transform: translate(-50%, -50%);
      }
      to {
        opacity: 0;
        transform: translate(-50%, -40%);
      }
    }
    /* END SECTION: FLAPPY BIRD GAME */

/* ========================================
   HEADER DU JEU - Stats en grille
   ======================================== */
.game-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.stat-item {
  background: rgba(168, 85, 247, 0.08);
  backdrop-filter: blur(10px);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glow);
  text-align: center;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-purple), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.stat-item:hover {
  background: rgba(168, 85, 247, 0.15);
  border-color: var(--primary-purple);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.2);
}

.stat-label {
  display: block;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

.stat-value {
  display: block;
  color: var(--primary-purple);
  font-weight: 700;
  font-size: var(--font-size-2xl);
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  text-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

/* ========================================
   SECTION DE MISE - Design épuré
   ======================================== */
.bet-section {
  background: linear-gradient(135deg,
    rgba(168, 85, 247, 0.05) 0%,
    rgba(16, 185, 129, 0.05) 100%
  );
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  border: 2px solid var(--border-glow);
  position: relative;
  overflow: hidden;
}

.bet-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.1) 0%,
    transparent 70%
  );
  animation: rotateBg 20s linear infinite;
}

@keyframes rotateBg {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.bet-section h3 {
  position: relative;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--space-4);
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bet-input-group {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.bet-btn {
  background: linear-gradient(135deg, var(--primary-purple) 0%, #9333ea 100%);
  border: 2px solid var(--primary-purple);
  color: white;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 700;
  font-size: var(--font-size-lg);
  transition: all var(--transition-fast);
  min-width: 90px;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.3);
  position: relative;
  overflow: hidden;
}

.bet-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}

.bet-btn:hover::before {
  width: 300px;
  height: 300px;
}

.bet-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.5);
  border-color: var(--primary-green);
}

.bet-btn:active {
  transform: translateY(-1px);
}

#whack-bet-input {
  width: 180px;
  padding: var(--space-3);
  border: 2px solid var(--border-glow);
  background: rgba(26, 26, 46, 0.8);
  backdrop-filter: blur(10px);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-2xl);
  text-align: center;
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-weight: 700;
  transition: all var(--transition-base);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

#whack-bet-input:focus {
  outline: none;
  border-color: var(--primary-purple);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 0 4px rgba(168, 85, 247, 0.2),
    0 0 20px rgba(168, 85, 247, 0.4);
}

.bet-presets {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-2);
}

.preset-btn {
  background: rgba(26, 26, 46, 0.6);
  backdrop-filter: blur(10px);
  border: 2px solid var(--border-glow);
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-weight: 700;
  font-size: var(--font-size-base);
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  position: relative;
  overflow: hidden;
}

.preset-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, transparent, var(--primary-purple));
  transition: height var(--transition-base);
}

.preset-btn:hover {
  background: var(--card-hover);
  color: var(--primary-green);
  border-color: var(--primary-purple);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.3);
}

.preset-btn:hover::after {
  height: 100%;
}

/* ========================================
   SESSION WARNING MODAL
======================================== */

.session-warning {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000;
  animation: fadeIn 0.3s ease;
}

.session-warning__box {
  background: var(--card-bg);
  border: 2px solid var(--primary-purple);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  max-width: 500px;
  width: 90%;
  text-align: center;
  box-shadow:
    0 0 40px rgba(168, 85, 247, 0.4),
    0 0 0 1px rgba(168, 85, 247, 0.2);
  animation: slideUp 0.3s ease;
}

.session-warning__box h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-2);
  color: var(--primary-green);
}

.session-warning__box p {
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-lg);
}

.session-warning__box button {
  background: linear-gradient(135deg, var(--primary-purple), var(--primary-green));
  color: white;
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
}

.session-warning__box button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(168, 85, 247, 0.6);
}

/* 🔥 VERSION CRITIQUE (1 MINUTE) */

.session-warning__box.critical {
  border-color: var(--primary-red);
  box-shadow:
    0 0 50px rgba(239, 68, 68, 0.6),
    0 0 0 1px rgba(239, 68, 68, 0.3);
  animation: pulseCritical 1.5s infinite;
}

.session-warning__box.critical h3 {
  color: var(--primary-red);
}

@keyframes pulseCritical {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* 🔥 MODE FINAL 5 SECONDES */

.session-warning__box.final {
  border-color: var(--primary-red);
  box-shadow:
    0 0 60px rgba(239, 68, 68, 0.8),
    0 0 0 1px rgba(239, 68, 68, 0.4);
  animation: finalPulse 1s infinite;
}

.session-warning__box.final h3 {
  color: var(--primary-red);
}

.session-warning__box.final p {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: white;
}

@keyframes finalPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}