/* ==========================================================================
   Arene AcademieCo - Multi-Game Educational Arena
   Pop Art / Modern / Fun style
   All styles scoped to #academy-game-root
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
#academy-game-root {
  --bdt-bg: #1a1a2e;
  --bdt-primary: #e94560;
  --bdt-secondary: #0f3460;
  --bdt-energy: #f5c518;
  --bdt-success: #00d2ff;
  --bdt-text: #ffffff;
  --bdt-heart: #ff4757;
  --bdt-heart-lost: #444466;
  --bdt-border: 3px solid rgba(233, 69, 96, 0.4);
  --bdt-radius: 14px;
  --bdt-radius-sm: 8px;
  --bdt-shadow-glow: 0 0 20px rgba(233, 69, 96, 0.3);
  /* Robust native stack — renders crisp heavy weights on every OS without
     needing to load a webfont. (Nunito is not loaded as a webfont here, so
     the old stack silently degraded to Segoe UI on Windows and to a generic
     sans on Mac/Linux — where weight 900 then looked flat or blurry.) */
  --bdt-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe UI Variable', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bdt-font-display: var(--bdt-font);
  --bdt-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Tokens ACA epingles localement (meme logique que le bloc --aca-na-* plus
     bas dans ce fichier). Le fichier consomme deja var(--aca-pink, #ff2d87)
     et compagnie une trentaine de fois, mais ces NOMS sont definis ailleurs
     dans l ecosysteme avec d AUTRES valeurs :
       aca-shared-tokens.css (:root) : --aca-yellow #ffcc00,
                                       --aca-purple #af52de,
                                       --aca-green #34c759 (ni pink ni cyan)
       mon-academie.css (.ma-root) : --aca-pink #C32136, --aca-yellow #D8A953
       commerce/public.css (.mcf-root) : --aca-pink #e94560
     Sans epinglage, le rendu de l Arene depend des feuilles voisines chargees
     sur la page. On fige donc les valeurs voulues ici. */
  --aca-pink: #ff2d87;
  --aca-cyan: #00e5ff;
  --aca-yellow: #ffd400;
  --aca-purple: #a855f7;
  --aca-green: #2ecc71;
}

/* Meme epinglage pour les 4 overlays que le JS monte directement dans
   document.body : ils sont hors de #academy-game-root, donc hors de portee
   du bloc ci-dessus. Concretement, .bdt-course-countdown-num (le 3-2-1-GO de
   la Course) consomme --aca-pink et --aca-yellow pour son degrade et aurait
   garde une teinte differente du reste de l Arene. */
.bdt-help-modal-overlay,
.bdt-confirm-overlay,
.ttmc-prison-banner-overlay,
.bdt-course-countdown-overlay {
  --aca-pink: #ff2d87;
  --aca-cyan: #00e5ff;
  --aca-yellow: #ffd400;
  --aca-purple: #a855f7;
  --aca-green: #2ecc71;
}

/* --------------------------------------------------------------------------
   Base Container
   -------------------------------------------------------------------------- */
#academy-game-root {
  font-family: var(--bdt-font);
  background: var(--bdt-bg);
  color: var(--bdt-text);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  /* v3.39.2 — Full-bleed (Pat 2026-05-02) : casse le max-width du thème WP
     pour que l'arène s'étale sur toute la largeur du viewport. Technique
     "full bleed" : on prend 100vw et on tire l'élément hors de son parent
     via marges calc(50% - 50vw). No-op si le parent est déjà full-width. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

#academy-game-root *,
#academy-game-root *::before,
#academy-game-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   v3.91.0 — Bouton de sortie Arène (monté sur <body>, HORS #academy-game-root).
   Garantit une sortie visible depuis l'expérience plein écran "full-bleed" où
   le menu du site (BuddyBoss) n'est plus affiché. Miroir du FAB d'aide (?),
   placé en haut-gauche pour lire comme un "retour". Non scopé au root, comme
   le FAB d'aide, puisqu'il vit sur le body.
   -------------------------------------------------------------------------- */
.bdt-exit-fab {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(15, 15, 26, 0.92);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.bdt-exit-fab:hover {
  background: #e94560;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(233, 69, 96, 0.5);
}
.bdt-exit-fab:focus-visible {
  outline: 3px solid #00d2ff;
  outline-offset: 2px;
}
.bdt-exit-fab-arrow {
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
}
@media (max-width: 480px) {
  .bdt-exit-fab {
    font-size: 14px;
    padding: 9px 14px;
  }
}

/* --------------------------------------------------------------------------
   Shared Components
   -------------------------------------------------------------------------- */

/* --- Player Card --- */
#academy-game-root .bdt-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

#academy-game-root .bdt-avatar-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--bdt-primary);
  box-shadow: 0 0 15px rgba(233, 69, 96, 0.4);
}

#academy-game-root .bdt-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Rarity glow overrides */
#academy-game-root .bdt-avatar-wrap.rarity-common {
  border-color: #b0b0b0;
  box-shadow: 0 0 12px rgba(176, 176, 176, 0.3);
}
#academy-game-root .bdt-avatar-wrap.rarity-rare {
  border-color: #4dabf7;
  box-shadow: 0 0 18px rgba(77, 171, 247, 0.5);
}
#academy-game-root .bdt-avatar-wrap.rarity-epic {
  border-color: #be4bdb;
  box-shadow: 0 0 22px rgba(190, 75, 219, 0.5);
}
#academy-game-root .bdt-avatar-wrap.rarity-legendary {
  border-color: var(--bdt-energy);
  box-shadow: 0 0 28px rgba(245, 197, 24, 0.6);
  animation: legendaryPulse 2s ease-in-out infinite;
}

#academy-game-root .bdt-player-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-align: center;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#academy-game-root .bdt-player-title {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 20px;
  color: #fff;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}

/* Rarity colors — matches BuddyBoss activity feed pills (v2.1.34) */
#academy-game-root .bdt-player-title.academy-rarity-common {
  background: #64748b;
  box-shadow: 0 2px 6px rgba(100, 116, 139, 0.4),
              0 0 12px rgba(100, 116, 139, 0.25);
}
#academy-game-root .bdt-player-title.academy-rarity-rare {
  background: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5),
              0 0 16px rgba(59, 130, 246, 0.35);
}
#academy-game-root .bdt-player-title.academy-rarity-epic {
  background: #a855f7;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.5),
              0 0 18px rgba(168, 85, 247, 0.4);
}
#academy-game-root .bdt-player-title.academy-rarity-legendary {
  background: linear-gradient(135deg, #f59e0b, #e88d00);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.55),
              0 0 22px rgba(245, 158, 11, 0.45);
  animation: titleLegendaryPulse 2.5s ease-in-out infinite;
}
#academy-game-root .bdt-player-title.academy-rarity-secret {
  background: linear-gradient(135deg, #e94560, #9b2c6f);
  box-shadow: 0 2px 10px rgba(233, 69, 96, 0.55),
              0 0 22px rgba(155, 44, 111, 0.4);
}
@keyframes titleLegendaryPulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(245, 158, 11, 0.55), 0 0 22px rgba(245, 158, 11, 0.45); }
  50%      { box-shadow: 0 2px 14px rgba(245, 158, 11, 0.75), 0 0 32px rgba(245, 158, 11, 0.7); }
}

#academy-game-root .bdt-player-level {
  font-size: 12px;
  font-weight: 700;
  color: var(--bdt-success);
}

/* --- Hearts --- */
#academy-game-root .bdt-hearts {
  display: flex;
  gap: 6px;
  font-size: 22px;
  line-height: 1;
}

#academy-game-root .bdt-heart {
  color: var(--bdt-heart);
  transition: all 0.3s ease;
  display: inline-block;
}

#academy-game-root .bdt-heart.lost {
  color: var(--bdt-heart-lost);
  /* Emoji fonts don't respect `color`, so visually fade the lost heart:
     desaturate + dim + shrink so it reads clearly as "gone". */
  filter: grayscale(1) brightness(0.45) opacity(0.35);
  transform: scale(0.8);
  animation: heartBreak 0.5s ease forwards;
}

/* --- Buttons --- */
#academy-game-root .bdt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--bdt-font);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 14px 32px;
  border: 3px solid transparent;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--bdt-transition);
  position: relative;
  overflow: hidden;
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#academy-game-root .bdt-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  pointer-events: none;
}

#academy-game-root .bdt-btn:active {
  transform: scale(0.95);
}

#academy-game-root .bdt-btn-primary {
  background: linear-gradient(135deg, var(--bdt-primary), #d63851);
  color: var(--bdt-text);
  border-color: var(--bdt-primary);
  box-shadow: 0 4px 20px rgba(233, 69, 96, 0.4);
}

#academy-game-root .bdt-btn-primary:hover {
  box-shadow: 0 6px 30px rgba(233, 69, 96, 0.6);
  transform: translateY(-2px);
}

#academy-game-root .bdt-btn-secondary {
  background: transparent;
  color: var(--bdt-text);
  border-color: rgba(255, 255, 255, 0.3);
}

#academy-game-root .bdt-btn-secondary:hover {
  border-color: var(--bdt-success);
  color: var(--bdt-success);
}

#academy-game-root .bdt-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   SCREEN 0: MENU
   -------------------------------------------------------------------------- */
#academy-game-root .aca-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 1120px;
  width: 100%;
  animation: fadeIn 0.5s ease;
  padding: 10px 0;
  position: relative;
}

#academy-game-root .aca-logo-big {
  width: 80px;
  height: 80px;
}

#academy-game-root .aca-menu-title {
  font-size: 30px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  background: linear-gradient(135deg, var(--bdt-primary), var(--bdt-energy), var(--bdt-success));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}

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

#academy-game-root .aca-menu-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  margin-top: -12px;
}

#academy-game-root .aca-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

#academy-game-root .aca-section-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.4);
}

/* Hint shown when no year picked yet (forces level-first selection) */
#academy-game-root .aca-mode-hint {
  padding: 18px 22px;
  border: 1.5px dashed rgba(245, 197, 24, 0.35);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  max-width: 440px;
  background: rgba(245, 197, 24, 0.06);
  letter-spacing: 0.3px;
}

/* --- Level buttons (legacy, toujours utilis\u00e9 par d'autres endroits) --- */
#academy-game-root .aca-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* ============================================================
   Level picker v3.19.17 — Primaire/Secondaire toggle + roulette
   Compact, fits within 520px, ne chevauche plus le widget Nouveaut\u00e9s.
   ============================================================ */
#academy-game-root .aca-level-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
}
#academy-game-root .aca-level-group-tabs {
  display: inline-flex;
  padding: 4px;
  background: rgba(15, 52, 96, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  gap: 4px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
#academy-game-root .aca-level-group-btn {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 9px 22px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 0.16s ease, background 0.2s ease, transform 0.16s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#academy-game-root .aca-level-group-btn:hover { color: #fff; }
#academy-game-root .aca-level-group-btn.active {
  background: linear-gradient(135deg, #f5c518 0%, #ffd700 50%, #f59e0b 100%);
  color: #1a1a2e;
  box-shadow: 0 2px 10px rgba(245, 197, 24, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

/* Rang\u00e9e statique d'ann\u00e9es (v3.19.18) \u2014 tous les niveaux du groupe,
   sans scroll ni snap. 6 items max en primaire, 5 en secondaire. */
#academy-game-root .aca-level-year-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 560px;
}
#academy-game-root .aca-level-year-btn {
  flex: 0 0 auto;
  min-width: 64px;
  padding: 12px 18px;
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(145deg, rgba(15, 52, 96, 0.45), rgba(26, 26, 46, 0.75));
  color: rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#academy-game-root .aca-level-year-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  border-color: rgba(0, 210, 255, 0.4);
}
#academy-game-root .aca-level-year-btn.active {
  color: #1a1a2e;
  background: linear-gradient(135deg, #f5c518 0%, #ffd700 45%, #f59e0b 100%);
  border-color: #ffd700;
  box-shadow: 0 0 22px rgba(245, 197, 24, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: scale(1.08);
}

/* Ann\u00e9e verrouill\u00e9e (anti-farm 24h) */
#academy-game-root .aca-level-year-btn.locked {
  position: relative;
  opacity: 0.4;
  background: linear-gradient(145deg, rgba(60, 30, 50, 0.4), rgba(30, 20, 40, 0.6));
  border-color: rgba(233, 69, 96, 0.25);
  color: rgba(255, 200, 200, 0.6);
  cursor: not-allowed;
}
#academy-game-root .aca-level-year-btn.locked:hover {
  transform: none;
  opacity: 0.55;
}
#academy-game-root .aca-level-year-lock {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 11px;
  line-height: 1;
  background: #e94560;
  color: #fff;
  padding: 2px 4px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Petit shake quand on clique sur un bouton verrouill\u00e9 */
@keyframes acaYearShakeNo {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
#academy-game-root .aca-level-year-btn.shake-no {
  animation: acaYearShakeNo 0.35s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  #academy-game-root .aca-level-year-btn,
  #academy-game-root .aca-level-group-btn { transition: none; }
}

#academy-game-root .aca-level-btn {
  font-family: var(--bdt-font);
  font-size: 13px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 50px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 52, 96, 0.3);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: var(--bdt-transition);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#academy-game-root .aca-level-btn:hover {
  border-color: var(--bdt-success);
  color: var(--bdt-success);
}

#academy-game-root .aca-level-btn.active {
  border-color: var(--bdt-energy);
  color: var(--bdt-energy);
  background: rgba(245, 197, 24, 0.12);
  box-shadow: 0 0 14px rgba(245, 197, 24, 0.25);
}

/* --- Mode cards --- */
#academy-game-root .aca-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}

/* Desktop layout (>= 900px) — plus horizontal :
   - grille modes sur 3 colonnes (mode vedette couvre toute la largeur)
   - widget Nouveaut\u00e9s compact (tr\u00e8s petit) pin\u00e9 en haut \u00e0 gauche */
@media (min-width: 900px) {
  #academy-game-root .aca-menu {
    padding-top: 20px;
    /* Pas de padding-left : le contenu principal reste centr\u00e9. Le widget
       Nouveaut\u00e9s est pin\u00e9 en absolute \u00e0 gauche sans d\u00e9caler le reste. */
  }
  /* v3.42.0 — bumpé à 4 colonnes (Landing-2 ping : 4-5 cards visibles desktop) */
  #academy-game-root .aca-modes {
    grid-template-columns: repeat(4, 1fr);
    max-width: 880px;
    gap: 12px;
  }
  #academy-game-root .aca-mode-card.featured,
  #academy-game-root .aca-mode-card[data-mode="grande-revision"] {
    grid-column: span 4;
  }
  /* Nouveaut\u00e9s : widget mini fix\u00e9 en haut \u00e0 gauche, tr\u00e8s discret */
  #academy-game-root .aca-menu .aca-news-section {
    position: absolute;
    top: 12px;
    left: 0;
    width: 160px;
    max-width: 160px;
    margin: 0;
    align-items: stretch;
    opacity: 0.85;
    transition: opacity 0.2s;
  }
  #academy-game-root .aca-menu .aca-news-section:hover {
    opacity: 1;
  }
  #academy-game-root .aca-menu .aca-news-section .aca-section-label {
    font-size: 8px;
    letter-spacing: 1.5px;
    text-align: left;
    margin-bottom: 4px;
    opacity: 0.5;
  }
  #academy-game-root .aca-menu .aca-news-list {
    gap: 4px;
  }
  #academy-game-root .aca-menu .aca-news-card {
    padding: 5px 7px;
    gap: 7px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }
  #academy-game-root .aca-menu .aca-news-icon {
    width: 22px;
    height: 22px;
    font-size: 14px;
    border-radius: 6px;
  }
  #academy-game-root .aca-menu .aca-news-title {
    font-size: 10px;
    font-weight: 700;
  }
  #academy-game-root .aca-menu .aca-news-desc {
    font-size: 9px;
    line-height: 1.25;
    opacity: 0.7;
    /* Coupe \u00e0 2 lignes pour garder le widget compact */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #academy-game-root .aca-menu .aca-news-badge {
    font-size: 7px;
    padding: 1px 4px;
    letter-spacing: 0.5px;
  }
  #academy-game-root .aca-menu .aca-news-title-row {
    gap: 4px;
    margin-bottom: 0;
  }
}

/* Desktop XL (>= 1200px) — 5 colonnes (Landing-2 ping v3.42.0) */
@media (min-width: 1200px) {
  #academy-game-root .aca-modes {
    grid-template-columns: repeat(5, 1fr);
    max-width: 1140px;
  }
  #academy-game-root .aca-mode-card.featured,
  #academy-game-root .aca-mode-card[data-mode="grande-revision"] {
    grid-column: span 5;
  }
}

#academy-game-root .aca-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--bdt-radius);
  background: linear-gradient(145deg, rgba(15, 52, 96, 0.4), rgba(26, 26, 46, 0.7));
  cursor: pointer;
  transition: var(--bdt-transition);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#academy-game-root .aca-mode-card:hover {
  border-color: rgba(0, 210, 255, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 210, 255, 0.15);
}

#academy-game-root .aca-mode-card.selected {
  border-color: var(--bdt-success);
  background: linear-gradient(145deg, rgba(0, 210, 255, 0.1), rgba(15, 52, 96, 0.5));
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.25);
}

/* v3.36.0 — modes secondaires (tous sauf Grande Révision) : tuile réduite ~50%
   pour mettre la GR en tête de pelle. L'icône, le label et la description
   shrinkent proportionnellement. */
#academy-game-root .aca-mode-card.secondary {
  padding: 10px 8px;
  gap: 4px;
  transform: scale(0.85);
  transform-origin: top center;
  opacity: 0.92;
}
#academy-game-root .aca-mode-card.secondary .aca-mode-icon,
#academy-game-root .aca-mode-card.secondary .aca-mode-card-icon {
  font-size: 0.65em;
  transform: scale(0.7);
}
#academy-game-root .aca-mode-card.secondary .aca-mode-label,
#academy-game-root .aca-mode-card.secondary .aca-mode-card-label {
  font-size: 0.85em;
}
#academy-game-root .aca-mode-card.secondary .aca-mode-desc,
#academy-game-root .aca-mode-card.secondary .aca-mode-card-desc {
  font-size: 0.9em;
  opacity: 1;
}
#academy-game-root .aca-mode-card.secondary:hover {
  opacity: 1;
  transform: scale(0.88) translateY(-2px);
}

/* La Grande Révision — featured mode, visuellement distinct */
#academy-game-root .aca-mode-card.featured,
#academy-game-root .aca-mode-card[data-mode="grande-revision"] {
  background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 40%, #e94560 100%);
  border-color: #ffd700;
  box-shadow: 0 0 30px rgba(0, 210, 255, 0.4), 0 0 60px rgba(233, 69, 96, 0.25);
  grid-column: span 2;
  position: relative;
  overflow: hidden;
}
#academy-game-root .aca-mode-card.featured::before {
  content: '⭐ SPÉCIAL';
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ffd700;
  color: #1a1a2e;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  z-index: 2;
}
#academy-game-root .aca-mode-card.featured .aca-mode-icon {
  font-size: 44px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
#academy-game-root .aca-mode-card.featured .aca-mode-label {
  font-size: 16px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
#academy-game-root .aca-mode-card.featured .aca-mode-desc {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

/* Discipline badge — apparaît au-dessus de la question en mode Grande Révision */
#academy-game-root .bdt-discipline-badge {
  display: inline-block;
  background: linear-gradient(135deg, #00d2ff, #3a7bd5);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: 0 2px 8px rgba(0, 210, 255, 0.3);
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#academy-game-root .aca-mode-icon {
  font-size: 32px;
  line-height: 1;
}

/* Image-based icon (featured modes with a branded PNG like grande-revision) */
#academy-game-root .aca-mode-icon-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
  line-height: 1;
}
#academy-game-root .aca-mode-icon-img img {
  max-width: 80px;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35))
          drop-shadow(0 0 18px rgba(255, 255, 255, 0.15));
  animation: featuredIconFloat 3s ease-in-out infinite;
}
@keyframes featuredIconFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-3px) rotate(1.5deg); }
}
#academy-game-root .aca-mode-card.featured .aca-mode-icon-img {
  height: 84px;
}
#academy-game-root .aca-mode-card.featured .aca-mode-icon-img img {
  max-width: 92px;
  max-height: 84px;
}

#academy-game-root .aca-mode-label {
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.5px;
}

#academy-game-root .aca-mode-desc {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  line-height: 1.3;
}

/* --- Play button --- */
#academy-game-root .aca-play-btn {
  margin-top: 4px;
  font-size: 18px;
  padding: 16px 48px;
}

/* --------------------------------------------------------------------------
   SCREEN 1: Matchmaking — Street Fighter style versus screen
   -------------------------------------------------------------------------- */
#academy-game-root .bdt-matchmaking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 900px;
  width: 100%;
  padding: 20px;
  animation: fadeIn 0.5s ease;
  position: relative;
  overflow: hidden;
}

/* Animated flame/energy background */
#academy-game-root .bdt-matchmaking::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 50%, rgba(0, 210, 255, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 50%, rgba(233, 69, 96, 0.25) 0%, transparent 50%),
    linear-gradient(90deg, transparent 48%, rgba(245, 197, 24, 0.1) 49%, rgba(245, 197, 24, 0.3) 50%, rgba(245, 197, 24, 0.1) 51%, transparent 52%);
  pointer-events: none;
  z-index: 0;
  animation: vsBackgroundPulse 3s ease-in-out infinite;
}
@keyframes vsBackgroundPulse {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; }
}
#academy-game-root .bdt-matchmaking > * {
  position: relative;
  z-index: 1;
}

/* --- Logo --- */
#academy-game-root .bdt-logo {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 18px rgba(0, 210, 255, 0.5)) drop-shadow(0 0 40px rgba(0, 210, 255, 0.2));
  animation: logoPulse 3s ease-in-out infinite;
}

#academy-game-root .bdt-logo svg {
  width: 100%;
  height: 100%;
}

#academy-game-root .bdt-logo svg path {
  fill: rgba(255, 255, 255, 0.9);
}

@keyframes logoPulse {
  0%, 100% {
    filter: drop-shadow(0 0 18px rgba(0, 210, 255, 0.5)) drop-shadow(0 0 40px rgba(0, 210, 255, 0.2));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 28px rgba(0, 210, 255, 0.7)) drop-shadow(0 0 60px rgba(245, 197, 24, 0.3));
    transform: scale(1.04);
  }
}

#academy-game-root .bdt-matchmaking-title {
  font-size: 38px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-align: center;
  background: linear-gradient(135deg, var(--bdt-primary), var(--bdt-energy), var(--bdt-success));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(245, 197, 24, 0.4);
  animation: sfTitleGlow 2s ease-in-out infinite;
}
@keyframes sfTitleGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(245, 197, 24, 0.4)); }
  50%      { filter: drop-shadow(0 0 16px rgba(245, 197, 24, 0.8)) drop-shadow(0 0 32px rgba(233, 69, 96, 0.4)); }
}

#academy-game-root .aca-level-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 50px;
  background: rgba(0, 210, 255, 0.1);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: var(--bdt-success);
  letter-spacing: 1px;
  margin-top: -12px;
}

/* Versus row — Street Fighter style with diagonal split + big portraits */
#academy-game-root .bdt-versus-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 900px;
  position: relative;
  padding: 20px 10px;
}

/* Left player — softer teal team side (tilt reduced, saturation lower) */
#academy-game-root .bdt-versus-row .bdt-player:first-child {
  flex: 1;
  max-width: 280px;
  padding: 18px 14px;
  background: linear-gradient(135deg, rgba(91, 192, 235, 0.18), rgba(15, 52, 96, 0.45));
  border: 2px solid #5bc0eb;
  border-radius: 14px;
  box-shadow:
    0 0 18px rgba(91, 192, 235, 0.3),
    inset 0 0 20px rgba(91, 192, 235, 0.1),
    inset 0 2px 6px rgba(255, 255, 255, 0.1);
  position: relative;
  transform: perspective(800px) rotateY(4deg);
  transform-origin: right center;
  animation: sfSlideInLeft 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#academy-game-root .bdt-versus-row .bdt-player:first-child::before {
  content: 'P1';
  position: absolute;
  top: -10px;
  left: 12px;
  background: #5bc0eb;
  color: #0a1a2e;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(91, 192, 235, 0.4);
  font-family: var(--bdt-font);
}
@keyframes sfSlideInLeft {
  0%   { transform: translateX(-80%) perspective(800px) rotateY(15deg); opacity: 0; }
  100% { transform: translateX(0) perspective(800px) rotateY(4deg); opacity: 1; }
}

/* Right side — opponent / searching — warm coral team (softer than neon red) */
#academy-game-root .bdt-versus-row .bdt-player:last-child,
#academy-game-root .bdt-versus-row .bdt-searching {
  flex: 1;
  max-width: 280px;
  padding: 18px 14px;
  background: linear-gradient(-135deg, rgba(238, 90, 111, 0.2), rgba(80, 30, 50, 0.4));
  border: 2px solid #ee5a6f;
  border-radius: 14px;
  box-shadow:
    0 0 18px rgba(238, 90, 111, 0.3),
    inset 0 0 20px rgba(238, 90, 111, 0.1),
    inset 0 2px 6px rgba(255, 255, 255, 0.1);
  position: relative;
  transform: perspective(800px) rotateY(-4deg);
  transform-origin: left center;
}
#academy-game-root .bdt-versus-row .bdt-player:last-child {
  animation: sfSlideInRight 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#academy-game-root .bdt-versus-row .bdt-player:last-child::before,
#academy-game-root .bdt-versus-row .bdt-searching::before {
  content: 'P2';
  position: absolute;
  top: -10px;
  right: 12px;
  background: #ee5a6f;
  color: #fff;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(238, 90, 111, 0.4);
  font-family: var(--bdt-font);
}
@keyframes sfSlideInRight {
  0%   { transform: translateX(80%) perspective(800px) rotateY(-15deg); opacity: 0; }
  100% { transform: translateX(0) perspective(800px) rotateY(-4deg); opacity: 1; }
}

/* VS divider — big Street Fighter style */
#academy-game-root .bdt-vs-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 100px;
  position: relative;
}

#academy-game-root .bdt-vs-text {
  /* System font at 900 + tight letter-spacing gives the same impact feel as
     Impact/Arial-Black but renders crisply on every OS. No more Impact
     fallback surprises. */
  font-family: var(--bdt-font);
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -3px;
  color: #f5c518;
  -webkit-text-stroke: 2px #1a1a2e;
  text-shadow: 0 0 14px rgba(245, 197, 24, 0.55),
               0 3px 0 rgba(0, 0, 0, 0.4);
  animation: sfVsZoom 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
  line-height: 1;
}
@keyframes sfVsZoom {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.4) rotate(10deg); opacity: 1; }
  80%  { transform: scale(0.9) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes sfVsGradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Player card enhancements inside the versus row */
#academy-game-root .bdt-versus-row .bdt-player .bdt-avatar-wrap {
  width: 90px;
  height: 90px;
  margin: 0 auto 8px;
  border: 3px solid rgba(255, 255, 255, 0.3);
}
#academy-game-root .bdt-versus-row .bdt-player:first-child .bdt-avatar-wrap {
  border-color: #5bc0eb;
  box-shadow: 0 0 16px rgba(91, 192, 235, 0.4);
}
#academy-game-root .bdt-versus-row .bdt-player:last-child .bdt-avatar-wrap {
  border-color: #ee5a6f;
  box-shadow: 0 0 16px rgba(238, 90, 111, 0.4);
}

#academy-game-root .bdt-versus-row .bdt-player .bdt-player-name {
  /* Readability-first: default UI font at heavy weight, no italic, no ALL-CAPS.
     Long whimsical bot names are much easier to parse this way than in
     Impact-italic. Slight dark shadow keeps it from drowning in the glow. */
  font-family: var(--bdt-font);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.2px;
  text-transform: none;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.15;
  word-break: break-word;
  hyphens: auto;
}
#academy-game-root .bdt-versus-row .bdt-player .bdt-player-title {
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.15;
  padding: 4px 12px;
}

/* Hearts row — energy bars under portraits */
#academy-game-root .bdt-versus-row + .bdt-versus-row {
  max-width: 900px;
  padding: 0 30px;
}
#academy-game-root .bdt-versus-row + .bdt-versus-row .bdt-hearts {
  font-size: 20px;
  letter-spacing: 2px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Searching animation */
#academy-game-root .bdt-searching {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
  max-width: 180px;
}

#academy-game-root .bdt-searching-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px dashed var(--bdt-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  animation: spin 3s linear infinite, bdtSearchPulse 1.5s ease-in-out infinite;
}

#academy-game-root .bdt-searching-text {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  animation: bdtSearchPulse 1.5s ease-in-out infinite;
}

/* Opponent found */
#academy-game-root .bdt-player.opponent-found {
  animation: slideInRight 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#academy-game-root .bdt-player.user-reveal {
  animation: slideInLeft 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Difficulty selector */
#academy-game-root .bdt-difficulty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

#academy-game-root .bdt-difficulty-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
}

#academy-game-root .bdt-difficulty-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

#academy-game-root .bdt-diff-btn {
  font-family: var(--bdt-font);
  font-size: 13px;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 50px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(15, 52, 96, 0.4);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: var(--bdt-transition);
  text-transform: uppercase;
  letter-spacing: 1px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#academy-game-root .bdt-diff-btn:hover {
  border-color: var(--bdt-success);
  color: var(--bdt-success);
}

#academy-game-root .bdt-diff-btn.active {
  border-color: var(--bdt-energy);
  color: var(--bdt-energy);
  background: rgba(245, 197, 24, 0.1);
  box-shadow: 0 0 12px rgba(245, 197, 24, 0.2);
}

#academy-game-root .bdt-diff-detail {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}

/* Facile = zero-pressure practice mode — bubble + arrow signal no-timer */
#academy-game-root .bdt-diff-btn-easy {
  position: relative;
  overflow: visible;
}
#academy-game-root .bdt-easy-bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #1a1a2e;
  background: linear-gradient(180deg, #ffe89c 0%, #f5c518 100%);
  border: 1.5px solid #c58a00;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 12px rgba(245, 197, 24, 0.4);
  pointer-events: none;
  animation: bdtEasyBubbleFloat 2.2s ease-in-out infinite;
  z-index: 2;
  text-transform: none;
}
#academy-game-root .bdt-easy-bubble-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #c58a00;
}
#academy-game-root .bdt-easy-bubble-arrow::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -5px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #f5c518;
}
@keyframes bdtEasyBubbleFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

/* Timer bar in easy mode: hidden stripe instead of countdown */
#academy-game-root .bdt-timer-bar.bdt-timer-disabled {
  background: linear-gradient(90deg, rgba(78, 205, 196, 0.3), rgba(78, 205, 196, 0.6), rgba(78, 205, 196, 0.3));
  opacity: 0.35;
}

/* --------------------------------------------------------------------------
   SCREEN 2: Battle
   -------------------------------------------------------------------------- */
#academy-game-root .bdt-battle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 560px;
  animation: fadeIn 0.4s ease;
}

/* Top bar */
#academy-game-root .bdt-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

#academy-game-root .bdt-topbar-player {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  position: relative; /* pour la progress bar .bdt-opp-progress */
}

#academy-game-root .bdt-topbar-player.right {
  flex-direction: row-reverse;
  text-align: right;
}

/* ============================================================
   Activit\u00e9 adversaire (v3.19.20) — thinking indicator +
   progress bar qui se remplit le temps qu'il "r\u00e9fl\u00e9chit"
   L'\u00e9l\u00e8ve voit qu'il y a quelqu'un en face au lieu d'un
   portrait statique qui ne fait rien.
   ============================================================ */
#academy-game-root .bdt-topbar-player.right.thinking .bdt-mini-avatar {
  border-color: #fde047;
  box-shadow: 0 0 0 3px rgba(253, 224, 71, 0.25), 0 0 14px rgba(253, 224, 71, 0.4);
  animation: oppThinkingPulse 1s ease-in-out infinite;
}
@keyframes oppThinkingPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(253, 224, 71, 0.2), 0 0 12px rgba(253, 224, 71, 0.3); }
  50%      { box-shadow: 0 0 0 5px rgba(253, 224, 71, 0.35), 0 0 18px rgba(253, 224, 71, 0.5); }
}

#academy-game-root .bdt-topbar-player.right.thinking .bdt-topbar-name::after {
  content: ' ...';
  color: #fde047;
  font-weight: 900;
  display: inline-block;
  animation: oppThinkingDots 0.9s steps(3, end) infinite;
}
@keyframes oppThinkingDots {
  0%   { content: ' .'; }
  33%  { content: ' ..'; }
  66%  { content: ' ...'; }
}

/* Barre de progression sous le portrait adverse */
#academy-game-root .bdt-topbar-player.right .bdt-opp-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
}
#academy-game-root .bdt-topbar-player.right .bdt-opp-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #fde047, #f59e0b, #e94560);
  box-shadow: 0 0 8px rgba(253, 224, 71, 0.4);
}

/* Flash au moment o\u00f9 l'adversaire "d\u00e9cide" */
#academy-game-root .bdt-topbar-player.right.decided .bdt-mini-avatar {
  border-color: #4ade80;
  animation: oppDecidedFlash 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes oppDecidedFlash {
  0%   { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.6), 0 0 24px rgba(74, 222, 128, 0.7); transform: scale(1.08); }
  60%  { transform: scale(0.97); }
  100% { box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.35), 0 0 12px rgba(74, 222, 128, 0.35); transform: scale(1); }
}
#academy-game-root .bdt-topbar-player.right.decided .bdt-topbar-name::after {
  /* 2026-07-24 : idem, ✓ est un echappement JS. L'enfant voyait « u2713 »
     colle au nom de l'adversaire au lieu de la coche « a repondu ». */
  content: ' ✓';
  color: #4ade80;
  font-weight: 900;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  #academy-game-root .bdt-topbar-player.right.thinking .bdt-mini-avatar,
  #academy-game-root .bdt-topbar-player.right.decided .bdt-mini-avatar { animation: none; }
  #academy-game-root .bdt-opp-progress-fill { transition: none !important; }
  #academy-game-root .bdt-topbar-player.right.thinking .bdt-topbar-name::after {
    content: ' ...'; animation: none;
  }
}

#academy-game-root .bdt-topbar-player .bdt-mini-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--bdt-primary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bdt-secondary);
  font-weight: 900;
  font-size: 16px;
}

#academy-game-root .bdt-topbar-player .bdt-mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#academy-game-root .bdt-topbar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#academy-game-root .bdt-topbar-name {
  font-size: 13px;
  font-weight: 800;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#academy-game-root .bdt-topbar-hearts {
  font-size: 16px;
  display: flex;
  gap: 3px;
}

#academy-game-root .bdt-topbar-player.right .bdt-topbar-hearts {
  justify-content: flex-end;
}

/* Round counter */
#academy-game-root .bdt-round-counter {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  flex-shrink: 0;
}

/* Timer bar */
#academy-game-root .bdt-timer-container {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

#academy-game-root .bdt-timer-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--bdt-success), var(--bdt-energy));
  border-radius: 4px;
  width: 100%;
  transform-origin: right center;
  transition: background 0.3s ease;
}

#academy-game-root .bdt-timer-bar.warning {
  background: linear-gradient(90deg, var(--bdt-energy), #ff9500);
}

#academy-game-root .bdt-timer-bar.danger {
  background: linear-gradient(90deg, var(--bdt-primary), #ff4757);
  animation: timerPulse 0.5s ease-in-out infinite;
}

/* Question display */
#academy-game-root .bdt-equation-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 20px 0;
}

#academy-game-root .bdt-question-display {
  text-align: center;
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: 100%;
}

/* Math equation display */
#academy-game-root .bdt-question-display .bdt-equation {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 3px;
  text-shadow: 0 0 30px rgba(233, 69, 96, 0.4);
  line-height: 1.3;
}

/* Text question display */
#academy-game-root .bdt-question-prompt {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
  line-height: 1.4;
  padding: 0 8px;
}

/* v3.21.1 — Anti-copy : effet signal psychologique + léger ralentissement
   du copier-coller. La protection réelle vient de la Visibility API qui
   pénalise un tab-switch pendant qu'une question est ouverte. */
#academy-game-root .bdt-cheat-guarded .bdt-question-prompt,
#academy-game-root .bdt-cheat-guarded .bdt-question-word,
#academy-game-root .bdt-cheat-guarded .ttmc-q-text {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Grammar abbreviation tooltip — shows full term on hover/focus/tap so kids
   meeting "CN" / "GN" / "GPrép" for the first time aren't left guessing. */
#academy-game-root .bdt-abbr {
  position: relative;
  display: inline-block;
  color: var(--bdt-energy);
  border-bottom: 1.5px dotted rgba(245, 197, 24, 0.55);
  cursor: help;
  outline: none;
  padding-bottom: 1px;
}
#academy-game-root .bdt-abbr:hover,
#academy-game-root .bdt-abbr:focus,
#academy-game-root .bdt-abbr:active {
  color: #fff;
  border-bottom-color: #fff;
}
#academy-game-root .bdt-abbr::after {
  content: attr(data-full);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px) scale(0.95);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  color: #1a1a2e;
  background: linear-gradient(180deg, #ffe89c 0%, #f5c518 100%);
  border: 1.5px solid #c58a00;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 14px rgba(245, 197, 24, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease-out, transform 0.16s ease-out;
  z-index: 10;
  letter-spacing: 0;
  text-transform: none;
}
#academy-game-root .bdt-abbr::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #c58a00;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease-out;
  z-index: 10;
}
#academy-game-root .bdt-abbr:hover::after,
#academy-game-root .bdt-abbr:focus::after,
#academy-game-root .bdt-abbr:active::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
#academy-game-root .bdt-abbr:hover::before,
#academy-game-root .bdt-abbr:focus::before,
#academy-game-root .bdt-abbr:active::before {
  opacity: 1;
}

#academy-game-root .bdt-question-word {
  font-size: 36px;
  font-weight: 900;
  color: var(--bdt-energy);
  text-shadow: 0 0 20px rgba(245, 197, 24, 0.3);
  letter-spacing: 2px;
}

/* Answer grid */
#academy-game-root .bdt-answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 10;
}

#academy-game-root .bdt-answer-btn {
  font-family: var(--bdt-font);
  font-size: 22px;
  font-weight: 900;
  padding: 16px 12px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--bdt-radius);
  background: linear-gradient(145deg, rgba(15, 52, 96, 0.5), rgba(26, 26, 46, 0.8));
  color: var(--bdt-text);
  cursor: pointer;
  transition: var(--bdt-transition);
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  text-transform: none; /* never force uppercase on answer buttons */
  min-width: 0;
}

/* Orthographe mode : always lowercase, better letter spacing for reading */
#academy-game-root .bdt-answer-btn.bdt-answer-ortho {
  text-transform: lowercase !important;
  letter-spacing: 0.5px;
  font-variant-caps: normal;
  text-align: center;
  white-space: nowrap;
  min-width: 0;
  line-height: 1.2;
}

#academy-game-root .bdt-answer-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent);
  pointer-events: none;
}

#academy-game-root .bdt-answer-btn:hover:not(:disabled) {
  border-color: var(--bdt-success);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 210, 255, 0.2);
}

#academy-game-root .bdt-answer-btn:active:not(:disabled) {
  transform: scale(0.95);
}

#academy-game-root .bdt-answer-btn.correct {
  border-color: var(--bdt-success);
  background: rgba(0, 210, 255, 0.2);
  animation: bounce 0.5s ease;
  box-shadow: 0 0 25px rgba(0, 210, 255, 0.4);
}

#academy-game-root .bdt-answer-btn.wrong {
  border-color: var(--bdt-heart);
  background: rgba(255, 71, 87, 0.2);
  animation: shake 0.5s ease;
  box-shadow: 0 0 25px rgba(255, 71, 87, 0.3);
}

#academy-game-root .bdt-answer-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#academy-game-root .bdt-answer-btn.bot-choice {
  border-color: #be4bdb;
  box-shadow: 0 0 18px rgba(190, 75, 219, 0.35);
  position: relative;
}

#academy-game-root .bdt-bot-tag {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.9;
  pointer-events: none;
}

/* A11Y : région live lue par le lecteur d'écran, invisible à l'oeil.
   Ne jamais remplacer par display:none (la région deviendrait muette). */
#academy-game-root .bdt-sr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Battle feedback overlay */
#academy-game-root .bdt-feedback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
}

#academy-game-root .bdt-feedback-text {
  font-size: 48px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-shadow: 0 0 30px currentColor;
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), fadeOut 0.8s 0.5s ease forwards;
}

#academy-game-root .bdt-feedback-text.hit { color: var(--bdt-success); }
#academy-game-root .bdt-feedback-text.slow { color: #f5c518; }
#academy-game-root .bdt-feedback-text.error { color: var(--bdt-heart); }
#academy-game-root .bdt-feedback-text.timeout { color: var(--bdt-energy); }

/* Hit flash overlay */
#academy-game-root .bdt-hit-flash {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  animation: hitFlash 0.4s ease forwards;
}

#academy-game-root .bdt-hit-flash.user-hit { background: rgba(255, 71, 87, 0.3); }
#academy-game-root .bdt-hit-flash.opponent-hit { background: rgba(0, 210, 255, 0.2); }

/* --------------------------------------------------------------------------
   SCREEN 3: Results
   -------------------------------------------------------------------------- */
#academy-game-root .bdt-results {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 100;
  background: rgba(26, 26, 46, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 20px 24px;
  animation: fadeIn 0.6s ease;
  overflow-y: auto;
}

#academy-game-root .bdt-results-title {
  font-size: 42px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-align: center;
  line-height: 1.2;
}

#academy-game-root .bdt-results-title.victory {
  background: linear-gradient(135deg, var(--bdt-energy), var(--bdt-success));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

#academy-game-root .bdt-results-title.defeat { color: rgba(255, 255, 255, 0.5); }
#academy-game-root .bdt-results-title.draw { color: var(--bdt-energy); }

#academy-game-root .bdt-results-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

#academy-game-root .bdt-results-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--bdt-energy);
  box-shadow: 0 0 30px rgba(245, 197, 24, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bdt-secondary);
  font-size: 40px;
  font-weight: 900;
}

#academy-game-root .bdt-results-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#academy-game-root .bdt-rewards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

#academy-game-root .bdt-reward {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 52, 96, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 16px;
  font-weight: 800;
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

#academy-game-root .bdt-reward:nth-child(1) { animation-delay: 0.2s; }
#academy-game-root .bdt-reward:nth-child(2) { animation-delay: 0.35s; }

#academy-game-root .bdt-reward .xp { color: var(--bdt-success); }
#academy-game-root .bdt-reward .gems { color: var(--bdt-energy); }

#academy-game-root .bdt-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

#academy-game-root .bdt-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 50px;
  background: rgba(245, 197, 24, 0.1);
  border: 1px solid rgba(245, 197, 24, 0.3);
  color: var(--bdt-energy);
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

#academy-game-root .bdt-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#academy-game-root .bdt-stat {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}

#academy-game-root .bdt-stat strong { color: var(--bdt-text); }

/* ── Score section ── */
#academy-game-root .bdt-score-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#academy-game-root .bdt-score-value {
  font-size: 40px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--bdt-energy), #ff6b81);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#academy-game-root .bdt-stars {
  display: flex;
  gap: 6px;
  font-size: 32px;
}

#academy-game-root .bdt-star.filled {
  color: var(--bdt-energy);
  text-shadow: 0 0 12px rgba(245, 197, 24, 0.5);
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#academy-game-root .bdt-star.filled:nth-child(1) { animation-delay: 0.1s; }
#academy-game-root .bdt-star.filled:nth-child(2) { animation-delay: 0.25s; }
#academy-game-root .bdt-star.filled:nth-child(3) { animation-delay: 0.4s; }
#academy-game-root .bdt-star.empty { color: rgba(255, 255, 255, 0.15); }

/* ── Stats grid ── */
#academy-game-root .bdt-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 500px;
}

#academy-game-root .bdt-stat-box {
  text-align: center;
  background: rgba(15, 52, 96, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 6px;
}

#academy-game-root .bdt-stat-number {
  font-size: 20px;
  font-weight: 900;
  color: var(--bdt-text);
}

#academy-game-root .bdt-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

/* ── Round recap ── */
#academy-game-root .bdt-recap-section {
  width: 100%;
  max-width: 520px;
}

#academy-game-root .bdt-recap-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}

#academy-game-root .bdt-recap-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
}

#academy-game-root .bdt-recap-list::-webkit-scrollbar { width: 4px; }
#academy-game-root .bdt-recap-list::-webkit-scrollbar-track { background: transparent; }
#academy-game-root .bdt-recap-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

#academy-game-root .bdt-recap-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(15, 52, 96, 0.3);
  font-size: 13px;
  font-weight: 600;
}

#academy-game-root .bdt-recap-row.wrong,
#academy-game-root .bdt-recap-row.timeout { background: rgba(233, 69, 96, 0.1); }
#academy-game-root .bdt-recap-row.hit { background: rgba(46, 213, 115, 0.1); }
#academy-game-root .bdt-recap-row.slow { background: rgba(245, 197, 24, 0.08); }
#academy-game-root .bdt-recap-row.both_wrong,
#academy-game-root .bdt-recap-row.both_timeout { background: rgba(190, 75, 219, 0.08); }

#academy-game-root .bdt-recap-num {
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  min-width: 16px;
}

#academy-game-root .bdt-recap-icon { font-size: 14px; flex-shrink: 0; }

#academy-game-root .bdt-recap-q {
  flex: 1;
  color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#academy-game-root .bdt-recap-time {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  min-width: 35px;
  text-align: right;
}

#academy-game-root .bdt-recap-pts {
  font-size: 12px;
  font-weight: 800;
  min-width: 45px;
  text-align: right;
  color: rgba(255, 255, 255, 0.3);
}

#academy-game-root .bdt-recap-pts.pos { color: var(--bdt-success); }

#academy-game-root .bdt-results-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* Results staggered entrance animations */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 2026-07-24 : @keyframes popIn en double a ete retire ici. Il etait MORT : une seconde definition du meme nom existe plus bas et, en CSS, la derniere gagne pour tout le document. Retrait sans aucun changement visuel. Voir le bug jumeau ttmcFinalePulse, lui bien visible, corrige le meme jour. */
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255,215,0,0.3)); }
  50%      { filter: drop-shadow(0 0 20px rgba(255,215,0,0.7)) drop-shadow(0 0 40px rgba(255,215,0,0.2)); }
}

#academy-game-root .bdt-results-title {
  animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#academy-game-root .bdt-results-title.victory {
  animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both, glowPulse 2s ease-in-out infinite 0.8s;
}
#academy-game-root .bdt-results-title.defeat {
  animation: slideUpFade 0.6s ease both 0.1s;
}
#academy-game-root .bdt-results-subtitle {
  animation: slideUpFade 0.5s ease both 0.2s;
}
#academy-game-root .bdt-score-section {
  animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.3s;
}
#academy-game-root .bdt-stats-grid {
  animation: slideUpFade 0.5s ease both 0.5s;
}
#academy-game-root .bdt-recap-section {
  animation: slideUpFade 0.5s ease both 0.7s;
}
#academy-game-root .bdt-rewards {
  animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.9s;
}
#academy-game-root .bdt-badges {
  animation: slideUpFade 0.4s ease both 1.1s;
}
#academy-game-root .bdt-results-buttons {
  animation: slideUpFade 0.4s ease both 1.3s;
}

/* Leaderboard row entrance */
@keyframes lbSlideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
#academy-game-root .aca-lb-row {
  animation: lbSlideIn 0.3s ease both;
}
#academy-game-root .aca-lb-row:nth-child(1)  { animation-delay: 0.05s; }
#academy-game-root .aca-lb-row:nth-child(2)  { animation-delay: 0.1s; }
#academy-game-root .aca-lb-row:nth-child(3)  { animation-delay: 0.15s; }
#academy-game-root .aca-lb-row:nth-child(4)  { animation-delay: 0.2s; }
#academy-game-root .aca-lb-row:nth-child(5)  { animation-delay: 0.25s; }
#academy-game-root .aca-lb-row:nth-child(6)  { animation-delay: 0.3s; }
#academy-game-root .aca-lb-row:nth-child(7)  { animation-delay: 0.35s; }
#academy-game-root .aca-lb-row:nth-child(8)  { animation-delay: 0.4s; }
#academy-game-root .aca-lb-row:nth-child(9)  { animation-delay: 0.45s; }
#academy-game-root .aca-lb-row:nth-child(10) { animation-delay: 0.5s; }

/* --------------------------------------------------------------------------
   Confetti
   -------------------------------------------------------------------------- */
#academy-game-root .bdt-confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 110;
  overflow: hidden;
}

#academy-game-root .bdt-confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -10px;
  animation: confettiFall linear forwards;
}

#academy-game-root .bdt-confetti-piece.square { border-radius: 2px; }
#academy-game-root .bdt-confetti-piece.circle { border-radius: 50%; }

/* Floating Text */
#academy-game-root .bdt-float-text {
  position: absolute;
  font-size: 20px;
  font-weight: 900;
  pointer-events: none;
  z-index: 30;
  animation: floatUp 1.2s ease forwards;
}

/* --------------------------------------------------------------------------
   Countdown overlay
   -------------------------------------------------------------------------- */
#academy-game-root .bdt-countdown-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: rgba(26, 26, 46, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#academy-game-root .bdt-countdown-number {
  font-size: 120px;
  font-weight: 900;
  color: var(--bdt-energy);
  text-shadow: 0 0 40px rgba(245, 197, 24, 0.6);
  animation: countdownPop 0.8s ease forwards;
}

/* --------------------------------------------------------------------------
   Keyframe Animations
   -------------------------------------------------------------------------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-8px) rotate(-1deg); }
  20% { transform: translateX(8px) rotate(1deg); }
  30% { transform: translateX(-6px) rotate(-0.5deg); }
  40% { transform: translateX(6px) rotate(0.5deg); }
  50% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

@keyframes bounce {
  0% { transform: scale(1); }
  20% { transform: scale(1.15); }
  40% { transform: scale(0.95); }
  60% { transform: scale(1.05); }
  80% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-80px) scale(0.8); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(80px) scale(0.8); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* 2026-07-24 : @keyframes pulse en double a ete retire ici. Il etait MORT : une seconde definition du meme nom existe plus bas et, en CSS, la derniere gagne pour tout le document. Retrait sans aucun changement visuel. Voir le bug jumeau ttmcFinalePulse, lui bien visible, corrige le meme jour. */

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

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg) scale(0.3); opacity: 0; }
}

@keyframes timerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.3); }
  100% { opacity: 1; transform: scale(1); }
}

/* 2026-07-25 (decision de Pat, deleguee) : NE PAS restaurer le rebond de l'ancien
   popIn qui a ete retire le 2026-07-24. Ses 13 utilisateurs demandent tous la
   courbe cubic-bezier(0.34, 1.56, ...) : le 1.56 est un DEPASSEMENT, donc le
   rebond existe deja, produit par la courbe et non par l'animation. Ajouter le
   palier a 110 % ferait rebondir 13 elements deux fois (score, etoiles, titre de
   resultats, question, recompenses, panneau de deblocage de titre). Si le pop
   parait un jour trop plat, regle la COURBE, pas ces keyframes. */

/* 2026-07-25 (decision de Pat, deleguee) : bdtFadeIn etait reference 4 fois et
   defini NULLE PART, donc le navigateur ignorait la demande en silence et 4
   ecrans de 1,2,3 Co! surgissaient d'un coup (plateau, resultats, Collection,
   overlay QFlash). Fondu d'opacite PUR, volontairement sans deplacement : ces 4
   selecteurs sont des ecrans entiers, et un translate provoquerait un reflow et
   un saut de scroll a chaque transition. Les durees (0.2s a 0.4s) etaient deja
   ecrites aux points d'appel, je ne les touche pas. */
@keyframes bdtFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hitFlash { 0% { opacity: 0.7; } 100% { opacity: 0; } }

@keyframes heartBreak {
  0% { transform: scale(1); }
  25% { transform: scale(1.3) rotate(-10deg); }
  50% { transform: scale(0.6) rotate(5deg); }
  100% { transform: scale(0.85) rotate(0); }
}

@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-80px) scale(1.3); }
}

@keyframes legendaryPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(245, 197, 24, 0.4); }
  50% { box-shadow: 0 0 35px rgba(245, 197, 24, 0.7); }
}

@keyframes countdownPop {
  0% { opacity: 0; transform: scale(2.5); }
  50% { opacity: 1; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(0.5); }
}

/* --------------------------------------------------------------------------
   Sound mute button
   -------------------------------------------------------------------------- */
#academy-game-root .bdt-mute-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 18px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
  color: var(--bdt-text);
  transition: var(--bdt-transition);
  padding: 0;
}
#academy-game-root .bdt-mute-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--bdt-success);
}
#academy-game-root .bdt-mute-battle {
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  font-size: 14px;
  line-height: 28px;
}

/* --------------------------------------------------------------------------
   Match History
   -------------------------------------------------------------------------- */
/* ============================================================
   Historique — refresh visuel v3.19.12
   Hero stats + cartes match avec accent gradient win/loss/draw.
   ============================================================ */
.aca-history-title {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 8px 0 22px;
  text-align: center;
  background: linear-gradient(135deg, #e94560 0%, #ff6b81 50%, #ffd700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(233, 69, 96, 0.2);
}
.aca-history-title::after {
  content: '';
  display: block;
  margin: 8px auto 0;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #e94560, transparent);
  opacity: 0.8;
}

.aca-history-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.aca-history-stat-box {
  position: relative;
  background: linear-gradient(145deg, rgba(15, 52, 96, 0.5), rgba(26, 26, 46, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 8px 12px;
  text-align: center;
  overflow: hidden;
  transition: transform 0.18s, border-color 0.18s;
}
.aca-history-stat-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(0, 210, 255, 0.1), transparent 60%);
  pointer-events: none;
}
.aca-history-stat-box:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 210, 255, 0.25);
}
.aca-history-stat-value {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 24px;
  font-weight: 900;
  color: #00d2ff;
  text-shadow: 0 0 14px rgba(0, 210, 255, 0.35);
  position: relative;
  z-index: 1;
}
.aca-history-stat-label {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

.aca-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aca-history-match {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(145deg, rgba(15, 52, 96, 0.32), rgba(26, 26, 46, 0.58));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease-out, border-color 0.18s;
}
.aca-history-match::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(255, 255, 255, 0.1);
}
.aca-history-match:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.15);
}
.aca-history-match.win::before  { background: linear-gradient(180deg, #72efdd, #00d2ff, #0086ae); box-shadow: 0 0 12px rgba(0, 210, 255, 0.4); }
.aca-history-match.loss::before { background: linear-gradient(180deg, #ff8da1, #e94560, #8b1a2e); box-shadow: 0 0 12px rgba(233, 69, 96, 0.4); }
.aca-history-match.draw::before { background: linear-gradient(180deg, #ffe89c, #f5c518, #c58a00); box-shadow: 0 0 12px rgba(245, 197, 24, 0.4); }

.aca-history-result-icon {
  font-size: 30px;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.aca-history-match-info {
  flex: 1;
  min-width: 0;
}
.aca-history-match-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.aca-history-match-result {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.3px;
}
.aca-history-match.win  .aca-history-match-result { color: #72efdd; }
.aca-history-match.loss .aca-history-match-result { color: #ff8da1; }
.aca-history-match.draw .aca-history-match-result { color: #ffe89c; }

.aca-history-match-score {
  font-family: 'Menlo', 'Consolas', monospace;
  font-weight: 700;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.25);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 1px;
}
.aca-history-match-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.aca-history-match-mode,
.aca-history-match-diff,
.aca-history-match-accuracy {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.6);
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}
.aca-history-match-mode {
  background: rgba(233, 69, 96, 0.18);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(233, 69, 96, 0.3);
}
.aca-history-match-diff {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.aca-history-match-accuracy {
  background: rgba(78, 205, 196, 0.12);
  color: #72efdd;
  border: 1px solid rgba(78, 205, 196, 0.25);
  text-transform: none;
  letter-spacing: 0;
}
.aca-history-match-right {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.aca-history-match-rewards {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 14px;
  font-weight: 900;
  color: #f5c518;
  text-shadow: 0 0 10px rgba(245, 197, 24, 0.35);
  letter-spacing: 0.3px;
}
.aca-history-match-time {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.aca-history-empty {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  padding: 56px 20px;
  font-size: 15px;
  background: linear-gradient(145deg, rgba(15, 52, 96, 0.2), rgba(26, 26, 46, 0.4));
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}
.aca-history-loading {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  padding: 56px 20px;
  font-size: 14px;
  letter-spacing: 1px;
}
.aca-history-loading::after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00d2ff;
  animation: historyLoadingPulse 1s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes historyLoadingPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
.aca-history-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.aca-history-page-info {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

/* --------------------------------------------------------------------------
   Menu Bottom Row
   -------------------------------------------------------------------------- */
#academy-game-root .aca-menu-bottom-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}
#academy-game-root .aca-menu-bottom-row .bdt-btn {
  flex: 1;
  max-width: 200px;
  font-size: 14px;
  padding: 10px 16px;
}

/* --------------------------------------------------------------------------
   Leaderboard
   -------------------------------------------------------------------------- */
/* ============================================================
   Classement — refresh visuel v3.19.12
   Plus de profondeur, podium marqué, métriques lisibles.
   ============================================================ */
#academy-game-root .aca-lb-title {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  background: linear-gradient(135deg, #ffd700 0%, #ffb347 40%, #e94560 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(245, 197, 24, 0.25);
  margin: 8px 0 22px;
}
#academy-game-root .aca-lb-title::after {
  content: '';
  display: block;
  margin: 8px auto 0;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #ffd700, transparent);
  opacity: 0.8;
}

#academy-game-root .aca-lb-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 6px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
#academy-game-root .aca-lb-tab {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 0.16s, background 0.16s, transform 0.16s;
}
#academy-game-root .aca-lb-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}
#academy-game-root .aca-lb-tab.active {
  background: linear-gradient(135deg, #ffd700, #f0a500);
  color: #1a1a2e;
  box-shadow: 0 2px 10px rgba(245, 197, 24, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

#academy-game-root .aca-lb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#academy-game-root .aca-lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(145deg, rgba(15, 52, 96, 0.35), rgba(26, 26, 46, 0.55));
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease-out, border-color 0.18s;
}
#academy-game-root .aca-lb-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(255, 255, 255, 0.1);
  transition: width 0.18s;
}
#academy-game-root .aca-lb-row:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.15);
}
#academy-game-root .aca-lb-row:hover::before {
  width: 5px;
}

/* Top 3 — podium look with glow + gradient edge */
#academy-game-root .aca-lb-top1 {
  background: linear-gradient(145deg, rgba(255, 215, 0, 0.18), rgba(245, 197, 24, 0.05));
  border-color: rgba(255, 215, 0, 0.35);
  box-shadow: 0 2px 20px rgba(255, 215, 0, 0.18);
}
#academy-game-root .aca-lb-top1::before { background: linear-gradient(180deg, #ffe89c, #ffd700, #c58a00); width: 5px; }
#academy-game-root .aca-lb-top2 {
  background: linear-gradient(145deg, rgba(220, 220, 230, 0.14), rgba(180, 180, 200, 0.04));
  border-color: rgba(200, 200, 210, 0.28);
}
#academy-game-root .aca-lb-top2::before { background: linear-gradient(180deg, #f0f0f5, #c0c0c8, #808088); width: 5px; }
#academy-game-root .aca-lb-top3 {
  background: linear-gradient(145deg, rgba(205, 127, 50, 0.16), rgba(150, 80, 30, 0.04));
  border-color: rgba(205, 127, 50, 0.3);
}
#academy-game-root .aca-lb-top3::before { background: linear-gradient(180deg, #e8a56b, #cd7f32, #8b5a1f); width: 5px; }

#academy-game-root .aca-lb-rank {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 16px;
  font-weight: 900;
  min-width: 40px;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}
#academy-game-root .aca-lb-top1 .aca-lb-rank,
#academy-game-root .aca-lb-top2 .aca-lb-rank,
#academy-game-root .aca-lb-top3 .aca-lb-rank {
  font-size: 28px;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.4));
}
#academy-game-root .aca-lb-top1 .aca-lb-rank { animation: lbTop1Pulse 2.4s ease-in-out infinite; }
@keyframes lbTop1Pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.08) rotate(-3deg); }
}

#academy-game-root .aca-lb-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#academy-game-root .aca-lb-top1 .aca-lb-avatar { border-color: #ffd700; box-shadow: 0 0 12px rgba(255, 215, 0, 0.4); }
#academy-game-root .aca-lb-top2 .aca-lb-avatar { border-color: #c0c0c0; box-shadow: 0 0 10px rgba(192, 192, 192, 0.3); }
#academy-game-root .aca-lb-top3 .aca-lb-avatar { border-color: #cd7f32; box-shadow: 0 0 10px rgba(205, 127, 50, 0.3); }
#academy-game-root .aca-lb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#academy-game-root .aca-lb-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#academy-game-root .aca-lb-name {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}
#academy-game-root .aca-lb-sub {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}

#academy-game-root .aca-lb-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-weight: 800;
}
#academy-game-root .aca-lb-wins,
#academy-game-root .aca-lb-losses {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 8px;
}
#academy-game-root .aca-lb-wins {
  color: #4ecdc4;
  background: rgba(78, 205, 196, 0.12);
  border: 1px solid rgba(78, 205, 196, 0.2);
}
#academy-game-root .aca-lb-losses {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.12);
  border: 1px solid rgba(231, 76, 60, 0.2);
}
#academy-game-root .aca-lb-wr {
  color: #ffd700;
  font-size: 15px;
  font-weight: 900;
  min-width: 48px;
  text-align: right;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
}

/* BuddyBoss wrapper for dark theme */
.academy-match-history-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  #academy-game-root { padding: 12px; }

  #academy-game-root .aca-menu-title { font-size: 22px; letter-spacing: 2px; }
  #academy-game-root .aca-logo-big { width: 60px; height: 60px; }
  #academy-game-root .aca-level-btn { font-size: 12px; padding: 7px 12px; }
  #academy-game-root .aca-mode-card { padding: 14px 8px; }
  #academy-game-root .aca-mode-icon { font-size: 26px; }
  #academy-game-root .aca-mode-label { font-size: 12px; }

  #academy-game-root .bdt-matchmaking-title { font-size: 20px; letter-spacing: 1px; }
  #academy-game-root .bdt-avatar-wrap { width: 60px; height: 60px; }
  #academy-game-root .bdt-player-name { font-size: 13px; }
  #academy-game-root .bdt-vs-text { font-size: 24px; }

  #academy-game-root .bdt-question-display .bdt-equation { font-size: 34px; }
  #academy-game-root .bdt-question-prompt { font-size: 15px; }
  #academy-game-root .bdt-question-word { font-size: 26px; }
  #academy-game-root .bdt-answer-btn { font-size: 18px; padding: 14px 10px; }

  #academy-game-root .bdt-results-title { font-size: 30px; letter-spacing: 2px; }
  #academy-game-root .bdt-score-value { font-size: 30px; }
  #academy-game-root .bdt-stars { font-size: 26px; }
  #academy-game-root .bdt-stats-grid { grid-template-columns: repeat(2, 1fr); }
  #academy-game-root .bdt-recap-q { max-width: 120px; }
  #academy-game-root .bdt-feedback-text { font-size: 32px; }
  #academy-game-root .bdt-topbar-name { font-size: 11px; max-width: 70px; }
  #academy-game-root .bdt-topbar-player .bdt-mini-avatar { width: 32px; height: 32px; }
  #academy-game-root .bdt-btn { font-size: 14px; padding: 12px 24px; }
  #academy-game-root .bdt-countdown-number { font-size: 80px; }
}

@media (max-width: 360px) {
  #academy-game-root .bdt-question-display .bdt-equation { font-size: 26px; }
  #academy-game-root .bdt-question-word { font-size: 22px; }
  #academy-game-root .bdt-answers { gap: 8px; }
  #academy-game-root .bdt-answer-btn { font-size: 16px; padding: 12px 8px; }
  #academy-game-root .aca-modes { gap: 8px; }
}

/* ==========================================================================
   Title Unlock Celebration (appears on Results screen when new titles unlocked)
   ========================================================================== */
#academy-game-root .aca-title-unlock-panel {
  width: 100%;
  max-width: 520px;
  margin: 16px auto 0;
  padding: 20px;
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.15), rgba(233, 69, 96, 0.08), rgba(0, 210, 255, 0.12));
  border: 2px solid rgba(245, 197, 24, 0.4);
  border-radius: 14px;
  box-shadow: 0 0 40px rgba(245, 197, 24, 0.2);
  animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.4s;
}
#academy-game-root .aca-title-unlock-header {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  text-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
}
#academy-game-root .aca-title-unlock-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#academy-game-root .aca-title-unlock-card {
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  border-left: 4px solid #999;
  animation: slideUpFade 0.5s ease both;
}
#academy-game-root .aca-title-unlock-card.rarity-common    { border-left-color: #d0d5e0; }
#academy-game-root .aca-title-unlock-card.rarity-rare      { border-left-color: #00d2ff; box-shadow: 0 0 15px rgba(0,210,255,0.2); }
#academy-game-root .aca-title-unlock-card.rarity-epic      { border-left-color: #cc88ff; box-shadow: 0 0 15px rgba(204,136,255,0.25); }
#academy-game-root .aca-title-unlock-card.rarity-legendary { border-left-color: #f5c518; box-shadow: 0 0 20px rgba(245,197,24,0.35); }
#academy-game-root .aca-title-unlock-card.rarity-secret    { border-left-color: #e94560; box-shadow: 0 0 15px rgba(233,69,96,0.3); background: linear-gradient(90deg, rgba(233,69,96,0.1), rgba(0,0,0,0.35)); }

#academy-game-root .aca-title-unlock-rarity {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
}
#academy-game-root .aca-title-unlock-card.rarity-common .aca-title-unlock-rarity    { color: #d0d5e0; }
#academy-game-root .aca-title-unlock-card.rarity-rare .aca-title-unlock-rarity      { color: #00d2ff; }
#academy-game-root .aca-title-unlock-card.rarity-epic .aca-title-unlock-rarity      { color: #cc88ff; }
#academy-game-root .aca-title-unlock-card.rarity-legendary .aca-title-unlock-rarity { color: #f5c518; }
#academy-game-root .aca-title-unlock-card.rarity-secret .aca-title-unlock-rarity    { color: #e94560; }

#academy-game-root .aca-title-unlock-label {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

/* ==========================================================================
   Tivan Arena Integration (Snippet 4)
   ========================================================================== */
#academy-game-root .aca-tivan-arena {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100vh;
  align-items: center;
  /* BREAK OUT of WP theme's content width container.
     Negative margins push us to the viewport edges regardless of parent width. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

#academy-game-root .arene-tivan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 560px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.3));
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #fff;
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-weight: 800;
}
#academy-game-root .arene-tivan-header .arene-hearts {
  font-size: 16px;
  letter-spacing: 2px;
}
#academy-game-root .arene-tivan-header .arene-timer {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  color: #ffd700;
  min-width: 60px;
  text-align: center;
}
#academy-game-root .arene-tivan-header .arene-timer.arene-timer-warning {
  color: #e94560;
  animation: pulse 0.5s ease infinite;
}
#academy-game-root .arene-tivan-header .arene-score {
  font-size: 18px;
  color: #4ecdc4;
  min-width: 80px;
  text-align: right;
}

/* Count-up timer for Tivan — increments 00:00 → ∞, drives survival bonus */
#academy-game-root .arene-tivan-header .arene-countup,
#academy-game-root .arene-tivan-header .arene-correct {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
#academy-game-root .arene-tivan-header .arene-countup .arene-label,
#academy-game-root .arene-tivan-header .arene-correct .arene-label,
#academy-game-root .arene-tivan-header .arene-score .arene-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}
#academy-game-root .arene-tivan-header .arene-countup .arene-value {
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ffd700;
}
#academy-game-root .arene-tivan-header .arene-correct .arene-value {
  font-size: 18px;
  font-weight: 900;
  color: #e8eefc;
}

/* Tivan survival summary (results screen) — shows duration + bonus breakdown */
#academy-game-root .aca-tivan-survival {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px auto 20px;
  padding: 14px 18px;
  max-width: 460px;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, rgba(78, 205, 196, 0.05) 100%);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 12px;
}
#academy-game-root .aca-tivan-survival-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.25), transparent);
  margin: 6px 0;
}
#academy-game-root .aca-tivan-survival-subtitle {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 215, 0, 0.7);
  text-align: center;
  padding: 2px 0 4px;
}
#academy-game-root .aca-tivan-survival-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
}
#academy-game-root .aca-tivan-survival-label {
  color: rgba(232, 238, 252, 0.75);
  font-weight: 600;
  letter-spacing: 0.3px;
}
#academy-game-root .aca-tivan-survival-value {
  color: #e8eefc;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
#academy-game-root .aca-tivan-survival-row.bonus .aca-tivan-survival-value {
  color: #ffd700;
  font-size: 16px;
}

#academy-game-root .aca-tivan-arena .tivan-wrapper {
  /* Take almost the entire viewport on desktop. */
  width: calc(100vw - 40px);
  max-width: 1800px;
  background: linear-gradient(180deg, #0d0d1a 0%, #161632 100%);
  border-radius: 14px;
  border: 3px solid #f5c518;
  box-shadow: 0 0 40px rgba(245, 197, 24, 0.25), 0 0 0 3px #1a1a2e inset;
  position: relative;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  outline: none;
  image-rendering: pixelated;
}
#academy-game-root .aca-tivan-arena .tivan-wrapper:focus {
  border-color: rgba(0, 210, 255, 0.6);
  box-shadow: 0 0 30px rgba(0, 210, 255, 0.25), inset 0 0 40px rgba(0, 0, 0, 0.3);
}

/* Inline equation header — HUGE banner so the player can't miss what to eat */
#academy-game-root .aca-tivan-arena .tivan-header.aca-tivan-header-inline {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(245, 197, 24, 0.1), rgba(0, 210, 255, 0.12));
  border-radius: 12px;
  border: 2px solid rgba(245, 197, 24, 0.35);
  box-shadow: 0 0 20px rgba(245, 197, 24, 0.15), inset 0 0 20px rgba(0, 0, 0, 0.3);
  position: relative;
}
#academy-game-root .aca-tivan-arena .aca-tivan-eq-label {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
#academy-game-root .aca-tivan-arena .tivan-equation {
  font-family: 'Courier New', 'Menlo', 'Consolas', monospace;
  font-size: clamp(36px, 8vw, 56px);
  font-weight: 900;
  color: #fde047;
  letter-spacing: 0.06em;
  text-shadow:
    0 0 6px rgba(253, 224, 71, 0.5),
    0 0 12px rgba(253, 224, 71, 0.3),
    2px 2px 0 #1a1a2e,
    -2px 2px 0 #1a1a2e,
    2px -2px 0 #1a1a2e,
    -2px -2px 0 #1a1a2e;
  line-height: 1.1;
  text-align: center;
  min-height: 1.1em;
  text-transform: uppercase;
}
#academy-game-root .aca-tivan-arena .tivan-scoreboard {
  font-family: var(--bdt-font, 'Nunito', sans-serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}
#academy-game-root .aca-tivan-arena .tivan-score {
  font-size: 18px;
  color: #00d2ff;
  font-weight: 900;
  margin-left: 6px;
  letter-spacing: 0;
}

/* Canvas stage — aspect-ratio locks height to width so the canvas fills the
   container with NO black bars. The rough "cave wall" border makes the edges
   feel dangerous. */
#academy-game-root .aca-tivan-arena .tivan-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Keep equation banner + arena header visible above the stage : cap the
     stage height so it never pushes scoring/equation off-screen. Width is
     auto-reduced proportionally by aspect-ratio. */
  max-height: calc(100vh - 320px);
  margin: 0 auto;
  background: #0a0a14;
  border-radius: 10px;
  overflow: hidden;
  /* Rough double border — looks chipped/dangerous, inspired by retro arcade */
  border: 4px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 3px #1a1a2e,
    0 0 0 5px #e94560,
    0 0 0 8px #1a1a2e,
    inset 0 0 30px rgba(233, 69, 96, 0.25),
    inset 0 0 60px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Decorative corner "spikes" that make the walls look pixelated/rough */
#academy-game-root .aca-tivan-arena .tivan-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    /* top-left corner spike */
    linear-gradient(135deg, #e94560 0, #e94560 12px, transparent 12px) top left / 24px 24px no-repeat,
    /* top-right */
    linear-gradient(225deg, #e94560 0, #e94560 12px, transparent 12px) top right / 24px 24px no-repeat,
    /* bottom-left */
    linear-gradient(45deg, #e94560 0, #e94560 12px, transparent 12px) bottom left / 24px 24px no-repeat,
    /* bottom-right */
    linear-gradient(315deg, #e94560 0, #e94560 12px, transparent 12px) bottom right / 24px 24px no-repeat;
  opacity: 0.7;
}

#academy-game-root .aca-tivan-arena .tivan-stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* CRT scanline overlay — subtle retro effect over the canvas */
#academy-game-root .aca-tivan-arena .tivan-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.6;
}


/* D-pad — mobile controls */
#academy-game-root .aca-tivan-arena .tivan-dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
#academy-game-root .aca-tivan-arena .tivan-dpad .row {
  display: flex;
  gap: 40px;
}
#academy-game-root .aca-tivan-arena .tivan-dpad .dpad {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(233, 69, 96, 0.1));
  border: 2px solid rgba(233, 69, 96, 0.5);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
#academy-game-root .aca-tivan-arena .tivan-dpad .dpad:hover {
  background: linear-gradient(135deg, rgba(233, 69, 96, 0.4), rgba(233, 69, 96, 0.2));
}
#academy-game-root .aca-tivan-arena .tivan-dpad .dpad:active {
  transform: scale(0.88);
  background: linear-gradient(135deg, #e94560, #d63851);
}

/* Show dpad only on touch/small screens */
@media (min-width: 768px) and (hover: hover) {
  #academy-game-root .aca-tivan-arena .tivan-dpad { display: none; }
}

#academy-game-root .aca-tivan-quit {
  font-size: 13px;
  padding: 8px 16px;
  margin-top: 8px;
}

/* Particle bursts when snake eats a correct answer */
#academy-game-root .aca-tivan-arena .tivan-particle {
  position: absolute;
  pointer-events: none;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  font-weight: 900;
  color: #fde047;
  text-shadow: 2px 2px 0 #1a1a2e, -2px -2px 0 #1a1a2e, 2px -2px 0 #1a1a2e, -2px 2px 0 #1a1a2e;
  z-index: 10;
  animation: tivanParticle 1s ease-out forwards;
}

@keyframes tivanParticle {
  0%   { opacity: 1;   transform: translate(-50%, -50%) scale(0.5); }
  25%  { opacity: 1;   transform: translate(calc(-50% + var(--dx, 0) * 0.3), calc(-50% + var(--dy, 0) * 0.3)) scale(1.2); }
  100% { opacity: 0;   transform: translate(calc(-50% + var(--dx, 0)), calc(-50% + var(--dy, 0))) scale(0.8); }
}

/* Canvas shake when eating a BAD answer */
#academy-game-root .aca-tivan-arena .tivan-shake {
  animation: tivanShake 0.4s ease;
}
@keyframes tivanShake {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-4px, 2px); }
  40%      { transform: translate(4px, -2px); }
  60%      { transform: translate(-3px, -1px); }
  80%      { transform: translate(2px, 2px); }
}

/* Hide Tivan's internal overlays in arena mode (we have our own UX) */
#academy-game-root .tivan-arena-mode .tivan-start,
#academy-game-root .tivan-arena-mode .tivan-end,
#academy-game-root .tivan-arena-mode .tivan-pause,
#academy-game-root .tivan-arena-mode .tivan-footer {
  display: none !important;
}
/* DON'T hide .tivan-header in arena mode — we need the equation visible */

/* Hint for keyboard users */
#academy-game-root .aca-tivan-arena::after {
  /* 2026-07-24 : les echappements de type barre-oblique-u sont du JAVASCRIPT,
     pas du CSS. En CSS, une barre oblique suivie d'un caractere non hexadecimal
     vaut ce caractere en litteral, donc le « u » restait affiche et l'enfant
     lisait « Flu00e8ches ou WASD pour bouger u2022 Espace = pause ». On remet
     les vrais caracteres (le fichier est en UTF-8 et en contient deja ailleurs).
     Taille et opacite remontees au passage : consigne de jeu, donc a lire. */
  content: "⌨  Flèches ou WASD pour bouger  •  Espace = pause";
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  margin-top: 8px;
  letter-spacing: 0.02em;
}
@media (hover: none) {
  #academy-game-root .aca-tivan-arena::after {
    content: "Glissez sur le canvas ou utilisez les boutons ci-dessous";
  }
}

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

/* 2026-07-25 (decision de Pat, deleguee) : la respiration (variation d'opacite)
   de l'ancien pulse retire le 2026-07-24 est restauree ICI, sur la RECHERCHE
   D'ADVERSAIRE seulement (.bdt-searching-icon et .bdt-searching-text). Un pouls
   qui s'estompe dit « ca travaille » mieux qu'un zoom.
   Le chrono critique de Tivan (.arene-timer-warning) garde volontairement le
   `pulse` ci-dessus, zoom pur : un chrono qui clignote en fondu pendant que
   l'enfant joue contre la montre ajoute du stress au lieu d'informer.
   C'est pour ca que ce sont DEUX animations et non une seule. */
@keyframes bdtSearchPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.05); }
}

/* ==========================================================================
   Match-quality banner (shown above VS row once opponent is resolved)
   ========================================================================== */
#academy-game-root .bdt-match-banner {
  font-family: var(--bdt-font);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 50px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(15, 52, 96, 0.6);
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  margin: 0 auto -6px;
  max-width: 90%;
  animation: bannerPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.3);
}
#academy-game-root .bdt-match-banner-best {
  background: linear-gradient(135deg, #f5c518, #e94560);
  border-color: #fff4bf;
  color: #1a1a2e;
  text-shadow: 0 0 6px rgba(255, 244, 191, 0.8);
  box-shadow: 0 0 24px rgba(245, 197, 24, 0.55), 0 0 48px rgba(233, 69, 96, 0.25);
  animation: bannerPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), bannerBestGlow 1.6s ease-in-out infinite;
}
#academy-game-root .bdt-match-banner-good {
  background: linear-gradient(135deg, #0984e3, #00d2ff);
  border-color: #e6fbff;
  color: #0a1a2e;
  box-shadow: 0 0 18px rgba(0, 210, 255, 0.45);
}
#academy-game-root .bdt-match-banner-ok {
  background: rgba(30, 50, 90, 0.7);
  border-color: rgba(255, 255, 255, 0.25);
}
#academy-game-root .bdt-match-banner-bot {
  background: rgba(50, 50, 70, 0.7);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}
@keyframes bannerPop {
  0%   { transform: translateY(-8px) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes bannerBestGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(245, 197, 24, 0.6)); }
  50%      { filter: drop-shadow(0 0 14px rgba(245, 197, 24, 1)) drop-shadow(0 0 24px rgba(233, 69, 96, 0.6)); }
}

/* ==========================================================================
   Street Fighter: arcade buttons + READY/FIGHT intro overlay
   ========================================================================== */

/* --- SF difficulty selector (arcade pill with chunky outline) --- */
#academy-game-root .bdt-matchmaking .bdt-difficulty-label {
  font-family: var(--bdt-font);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#academy-game-root .bdt-matchmaking .bdt-diff-btn {
  font-family: var(--bdt-font);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 11px 22px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(180deg, rgba(30, 30, 60, 0.85), rgba(10, 10, 26, 0.9));
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.15),
    inset 0 -3px 0 rgba(0, 0, 0, 0.4),
    0 3px 0 rgba(0, 0, 0, 0.6);
  transform: translateY(0);
  transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#academy-game-root .bdt-matchmaking .bdt-diff-btn:hover {
  border-color: #00d2ff;
  color: #e6fbff;
}
#academy-game-root .bdt-matchmaking .bdt-diff-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(0, 0, 0, 0.6);
}
#academy-game-root .bdt-matchmaking .bdt-diff-btn.active {
  border-color: #f5c518;
  color: #fff;
  background: linear-gradient(180deg, #e94560 0%, #8a1e34 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -3px 0 rgba(0, 0, 0, 0.45),
    0 3px 0 #4a0a1a,
    0 0 20px rgba(233, 69, 96, 0.55);
}

/* --- Fight button ("COMBATTRE !") — softer, less aggressive --- */
#academy-game-root .bdt-matchmaking > .bdt-btn-primary {
  font-family: var(--bdt-font);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 15px 40px;
  border-radius: 12px;
  border: 2px solid #f5c518;
  background: linear-gradient(180deg, #ee5a6f 0%, #c73e55 100%);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    0 4px 0 rgba(70, 20, 30, 0.6),
    0 0 20px rgba(238, 90, 111, 0.35);
  animation: sfFightPulse 2s ease-in-out infinite;
}
#academy-game-root .bdt-matchmaking > .bdt-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    0 5px 0 rgba(70, 20, 30, 0.6),
    0 0 26px rgba(238, 90, 111, 0.5);
}
#academy-game-root .bdt-matchmaking > .bdt-btn-primary:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 2px 0 #4a0a1a,
    0 0 20px rgba(233, 69, 96, 0.55);
}
@keyframes sfFightPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.15); }
}
@keyframes sfFightShake {
  0%, 100% { transform: translate(0, -1px); }
  25%      { transform: translate(-1px, -1px) rotate(-0.4deg); }
  50%      { transform: translate(1px, -2px) rotate(0.4deg); }
  75%      { transform: translate(-1px, 0px) rotate(-0.2deg); }
}

/* --- SF READY / FIGHT! intro overlay --- */
#academy-game-root .bdt-fight-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(10, 10, 26, 0.55), rgba(10, 10, 26, 0.92) 70%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  overflow: hidden;
  animation: sfIntroFadeIn 0.2s ease-out;
}
#academy-game-root .bdt-fight-intro::before,
#academy-game-root .bdt-fight-intro::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -20%;
  width: 140%;
  height: 80px;
  background: linear-gradient(90deg, transparent, rgba(245, 197, 24, 0.35), rgba(233, 69, 96, 0.45), transparent);
  transform: translateY(-50%) rotate(-3deg);
  filter: blur(6px);
  animation: sfBannerSweep 1.2s ease-in-out infinite;
}
#academy-game-root .bdt-fight-intro::after {
  height: 20px;
  filter: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: sfBannerSweep 1.2s ease-in-out infinite 0.3s;
}
#academy-game-root .bdt-fight-intro.bdt-fight-fadeout {
  animation: sfIntroFadeOut 0.26s ease-in forwards;
}
@keyframes sfIntroFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes sfIntroFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes sfBannerSweep {
  0%   { transform: translate(-60%, -50%) rotate(-3deg); opacity: 0.5; }
  50%  { opacity: 1; }
  100% { transform: translate(40%, -50%) rotate(-3deg); opacity: 0.5; }
}

#academy-game-root .bdt-fight-ready,
#academy-game-root .bdt-fight-go {
  position: relative;
  z-index: 1;
  /* System font at 900 — no more Impact. Readability > arcade authenticity. */
  font-family: var(--bdt-font);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -1.5px;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
#academy-game-root .bdt-fight-ready {
  font-size: clamp(38px, 9.5vw, 115px);
  letter-spacing: -1px;
  color: #fff4bf;
  background: linear-gradient(180deg, #fff4bf 0%, #f5c518 55%, #c58a00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 3px 3px 0 #1a1a2e;
  filter: drop-shadow(0 0 14px rgba(245, 197, 24, 0.55));
  animation: sfReadyPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#academy-game-root .bdt-fight-go {
  font-size: clamp(42px, 11vw, 150px);
  letter-spacing: -1px;
  color: #fff;
  /* Solid fill (not gradient text) for sharpness — softer coral palette */
  background: linear-gradient(180deg, #ffd84a 0%, #ee5a6f 55%, #a83a4c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 3px 3px 0 #1a1a2e;
  filter: drop-shadow(0 0 18px rgba(238, 90, 111, 0.55)) drop-shadow(0 0 40px rgba(245, 197, 24, 0.3));
  animation: sfFightPop 0.55s cubic-bezier(0.34, 1.8, 0.64, 1);
}
@keyframes sfReadyPop {
  0%   { transform: scale(0.2) rotate(-14deg); opacity: 0; }
  55%  { transform: scale(1.15) rotate(6deg); opacity: 1; }
  80%  { transform: scale(0.95) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes sfFightPop {
  0%   { transform: scale(0.1) rotate(-20deg) skewX(10deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(8deg) skewX(-6deg); opacity: 1; }
  80%  { transform: scale(0.9) rotate(-3deg) skewX(2deg); }
  100% { transform: scale(1) rotate(0deg) skewX(0); }
}
@keyframes sfFightRumble {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-3px, 1px); }
  50%      { transform: translate(2px, -2px); }
  75%      { transform: translate(-1px, 2px); }
}

/* --- Mobile: stack SF portraits vertically with VS between --- */
@media (max-width: 560px) {
  #academy-game-root .bdt-versus-row {
    flex-direction: column;
    gap: 8px;
    padding: 12px 4px;
    max-width: 100%;
  }
  #academy-game-root .bdt-versus-row .bdt-player:first-child,
  #academy-game-root .bdt-versus-row .bdt-player:last-child,
  #academy-game-root .bdt-versus-row .bdt-searching {
    max-width: 92%;
    width: 92%;
    transform: none;
    animation: sfSlideInMobile 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  #academy-game-root .bdt-versus-row .bdt-player:first-child::before,
  #academy-game-root .bdt-versus-row .bdt-player:last-child::before,
  #academy-game-root .bdt-versus-row .bdt-searching::before {
    top: -8px;
  }
  #academy-game-root .bdt-vs-divider { min-width: 0; }
  #academy-game-root .bdt-vs-text { font-size: 54px; letter-spacing: -2px; }
  #academy-game-root .bdt-versus-row + .bdt-versus-row {
    flex-direction: row;
    padding: 0 20px;
    gap: 20px;
  }
  #academy-game-root .bdt-matchmaking > .bdt-btn-primary {
    font-size: 18px;
    padding: 14px 32px;
    letter-spacing: 3px;
  }
  #academy-game-root .bdt-matchmaking .bdt-diff-btn {
    font-size: 12px;
    padding: 9px 16px;
    letter-spacing: 1.5px;
  }
}
@keyframes sfSlideInMobile {
  0%   { transform: translateY(20px) scale(0.9); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ==========================================================================
   Nouveautés — showcase of recent arena additions on the menu screen
   ========================================================================== */
#academy-game-root .aca-news-section {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

#academy-game-root .aca-news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

#academy-game-root .aca-news-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(30, 30, 60, 0.75), rgba(15, 52, 96, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  animation: newsCardFadeIn 0.5s ease;
}
#academy-game-root .aca-news-card-clickable {
  cursor: pointer;
}
#academy-game-root .aca-news-card-clickable:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 210, 255, 0.5);
  box-shadow: 0 6px 20px rgba(0, 210, 255, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#academy-game-root .aca-news-card-clickable:active {
  transform: translateY(0);
}

#academy-game-root .aca-news-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

#academy-game-root .aca-news-text {
  flex: 1;
  min-width: 0; /* allow ellipsis inside flex child */
}

#academy-game-root .aca-news-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

#academy-game-root .aca-news-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
}

#academy-game-root .aca-news-badge {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 50px;
  background: linear-gradient(135deg, #f5c518, #e94560);
  color: #1a1a2e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 10px rgba(245, 197, 24, 0.5);
  animation: newsBadgePulse 1.8s ease-in-out infinite;
  text-transform: uppercase;
}

#academy-game-root .aca-news-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.35;
}

@keyframes newsCardFadeIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes newsBadgePulse {
  0%, 100% { filter: brightness(1)   drop-shadow(0 0 4px rgba(245, 197, 24, 0.4)); }
  50%      { filter: brightness(1.2) drop-shadow(0 0 10px rgba(245, 197, 24, 0.9)); }
}

@media (max-width: 480px) {
  #academy-game-root .aca-news-icon { width: 36px; height: 36px; font-size: 22px; }
  #academy-game-root .aca-news-title { font-size: 13px; }
  #academy-game-root .aca-news-desc  { font-size: 11px; }
}

/* ============================================================
   TTMC — Tu Te Mets Combien ? (v3.19.22)
   Plateau serpentin 5\u00d75, cartes 1-10, 4 joueurs avec pions color\u00e9s.
   ============================================================ */
#academy-game-root .ttmc-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 12px;
  animation: fadeIn 0.4s ease;
}
#academy-game-root .ttmc-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
#academy-game-root .ttmc-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, #00d2ff, #f5c518, #e94560);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#academy-game-root .ttmc-quit { font-size: 12px; padding: 6px 12px; }
#academy-game-root .ttmc-turn-counter {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
#academy-game-root .ttmc-turn-counter b {
  color: #f5c518;
  font-size: 14px;
  margin-left: 4px;
}

/* Players list strip */
#academy-game-root .ttmc-players-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
}
#academy-game-root .ttmc-plist-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(15, 52, 96, 0.35), rgba(26, 26, 46, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 700;
  transition: transform 0.2s, border-color 0.2s;
}
#academy-game-root .ttmc-plist-item.active {
  transform: translateY(-2px);
  border-color: rgba(245, 197, 24, 0.55);
  box-shadow: 0 0 14px rgba(245, 197, 24, 0.3);
}
#academy-game-root .ttmc-plist-item.winner {
  border-color: #4ade80;
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
}
#academy-game-root .ttmc-plist-dot {
  width: 14px; height: 14px; border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
}
#academy-game-root .ttmc-plist-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}
#academy-game-root .ttmc-plist-pos {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
}
#academy-game-root .ttmc-plist-score {
  color: #f5c518;
  font-size: 11px;
  font-weight: 900;
}

/* Board 5\u00d75 */
#academy-game-root .ttmc-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 5 / 5;
  padding: 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
}
#academy-game-root .ttmc-case {
  position: relative;
  background: linear-gradient(145deg, rgba(15, 52, 96, 0.4), rgba(26, 26, 46, 0.7));
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  transition: background 0.18s;
}
#academy-game-root .ttmc-case-num {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.5px;
}
#academy-game-root .ttmc-case-icon {
  font-size: 18px;
  margin-top: 2px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
#academy-game-root .ttmc-case.special { border-color: rgba(245, 197, 24, 0.35); }
#academy-game-root .ttmc-case-prison { background: linear-gradient(145deg, rgba(60, 20, 30, 0.6), rgba(40, 15, 25, 0.8)); border-color: rgba(233, 69, 96, 0.4); }
#academy-game-root .ttmc-case-recul  { background: linear-gradient(145deg, rgba(60, 30, 20, 0.6), rgba(50, 25, 15, 0.8)); border-color: rgba(245, 158, 11, 0.4); }
#academy-game-root .ttmc-case-bonus  { background: linear-gradient(145deg, rgba(30, 60, 40, 0.6), rgba(20, 50, 30, 0.8)); border-color: rgba(74, 222, 128, 0.4); }
#academy-game-root .ttmc-case-finale {
  background: linear-gradient(135deg, #f5c518, #e94560, #00d2ff);
  border-color: #ffd700;
  box-shadow: 0 0 20px rgba(245, 197, 24, 0.5);
  animation: ttmcFinalePulse 2s ease-in-out infinite;
}
@keyframes ttmcFinalePulse {
  0%, 100% { box-shadow: 0 0 14px rgba(245, 197, 24, 0.4); }
  50%      { box-shadow: 0 0 24px rgba(245, 197, 24, 0.7), 0 0 40px rgba(233, 69, 96, 0.3); }
}
#academy-game-root .ttmc-case-finale .ttmc-case-num { color: #1a1a2e; }

#academy-game-root .ttmc-case-start {
  width: 100%;
  max-width: 600px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  text-align: center;
  font-weight: 900;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}

/* Pions des joueurs */
#academy-game-root .ttmc-pion {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}
/* Superposition de pions : l\u00e9ger d\u00e9calage pour qu'on voie plusieurs pions sur une case */
#academy-game-root .ttmc-pion[data-player="1"] { transform: translate(-85%, -50%); }
#academy-game-root .ttmc-pion[data-player="2"] { transform: translate(-15%, -50%); }
#academy-game-root .ttmc-pion[data-player="3"] { transform: translate(-50%, -15%); }
#academy-game-root .ttmc-pion[data-player="0"] { transform: translate(-50%, -85%); z-index: 3; }
#academy-game-root .ttmc-pion.current {
  animation: ttmcPionActive 0.8s ease-in-out infinite;
  z-index: 5;
}
@keyframes ttmcPionActive {
  0%, 100% { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 255, 255, 0.4); }
  50%      { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 255, 255, 0.7); }
}
#academy-game-root .ttmc-pion.winner {
  animation: ttmcPionWin 1.2s ease-in-out infinite;
  z-index: 10;
}
@keyframes ttmcPionWin {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50%      { transform: translate(-50%, -50%) scale(1.25) rotate(12deg); }
}

/* Zone de contr\u00f4le (carte / question / bot-playing) */
#academy-game-root .ttmc-control {
  width: 100%;
  max-width: 720px;
  min-height: 140px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(15, 52, 96, 0.4) 0%, rgba(26, 26, 46, 0.7) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
#academy-game-root .ttmc-subject {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
  text-align: center;
}
#academy-game-root .ttmc-subject b { color: #fff; }
#academy-game-root .ttmc-question-prompt {
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: #f5c518;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
#academy-game-root .ttmc-cards {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
#academy-game-root .ttmc-card {
  padding: 14px 0;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(180deg, rgba(15, 52, 96, 0.5), rgba(26, 26, 46, 0.8));
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.18s, border-color 0.18s, background 0.18s;
}
#academy-game-root .ttmc-card:hover {
  transform: translateY(-3px);
  border-color: #f5c518;
  background: linear-gradient(180deg, rgba(245, 197, 24, 0.2), rgba(245, 158, 11, 0.3));
}
#academy-game-root .ttmc-card:nth-child(-n+3) { border-color: rgba(78, 205, 196, 0.4); }
#academy-game-root .ttmc-card:nth-child(n+8)  { border-color: rgba(233, 69, 96, 0.4); }
#academy-game-root .ttmc-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  font-style: italic;
}

#academy-game-root .ttmc-q-text {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  margin-bottom: 12px;
}
#academy-game-root .ttmc-answers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
#academy-game-root .ttmc-answer {
  padding: 14px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(180deg, rgba(15, 52, 96, 0.5), rgba(26, 26, 46, 0.8));
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.18s, border-color 0.18s;
}
#academy-game-root .ttmc-answer:hover {
  transform: translateY(-2px);
  border-color: #00d2ff;
  background: linear-gradient(180deg, rgba(0, 210, 255, 0.15), rgba(15, 52, 96, 0.6));
}

#academy-game-root .ttmc-control-bot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
}
#academy-game-root .ttmc-bot-indicator {
  width: 40px; height: 40px; border-radius: 50%;
  box-shadow: 0 0 20px currentColor;
  animation: ttmcPionActive 0.8s ease-in-out infinite;
}
#academy-game-root .ttmc-bot-text { font-size: 15px; color: #fff; }
#academy-game-root .ttmc-bot-pick {
  font-size: 13px;
  color: #f5c518;
  font-weight: 700;
  background: rgba(245, 197, 24, 0.12);
  padding: 4px 12px;
  border-radius: 6px;
}

#academy-game-root .ttmc-control-reveal {
  text-align: center;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
  padding: 20px;
  animation: fadeIn 0.3s;
}

/* Log */
#academy-game-root .ttmc-log {
  width: 100%;
  max-width: 720px;
  max-height: 90px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#academy-game-root .ttmc-log-line {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  animation: fadeIn 0.3s;
}

/* Results */
#academy-game-root .ttmc-ranking {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 16px;
}
#academy-game-root .ttmc-ranking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
#academy-game-root .ttmc-ranking-row.me {
  background: rgba(245, 197, 24, 0.12);
  border-color: rgba(245, 197, 24, 0.4);
}
#academy-game-root .ttmc-ranking-row:first-child {
  background: linear-gradient(145deg, rgba(255, 215, 0, 0.2), rgba(245, 158, 11, 0.1));
  border-color: #ffd700;
}
#academy-game-root .ttmc-ranking-rank {
  font-size: 18px; font-weight: 900; color: #ffd700; min-width: 24px;
}
#academy-game-root .ttmc-ranking-dot { width: 14px; height: 14px; border-radius: 50%; }
#academy-game-root .ttmc-ranking-name { flex: 1; font-weight: 700; color: #fff; }
#academy-game-root .ttmc-ranking-stats { display: flex; gap: 10px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.6); }
#academy-game-root .ttmc-ranking-stats span:last-child { color: #f5c518; }

@media (max-width: 560px) {
  #academy-game-root .ttmc-players-list { grid-template-columns: repeat(2, 1fr); }
  #academy-game-root .ttmc-board { max-width: 100%; }
  #academy-game-root .ttmc-cards { grid-template-columns: repeat(5, 1fr); }
  #academy-game-root .ttmc-q-text { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #academy-game-root .ttmc-pion.current,
  #academy-game-root .ttmc-pion.winner,
  #academy-game-root .ttmc-bot-indicator,
  #academy-game-root .ttmc-case-finale { animation: none; }
}

/* v3.19.25 — Avatar unlock celebration dans l'écran résultats TTMC */
#academy-game-root .ttmc-avatar-unlock-panel {
  width: 100%;
  max-width: 520px;
  margin: 18px auto 22px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.18), rgba(233, 69, 96, 0.15) 50%, rgba(0, 210, 255, 0.12));
  border: 1.5px solid rgba(245, 197, 24, 0.45);
  border-radius: 14px;
  box-shadow: 0 0 32px rgba(245, 197, 24, 0.35), 0 6px 18px rgba(0, 0, 0, 0.4);
  animation: ttmcUnlockGlow 2.2s ease-in-out infinite alternate;
}
@keyframes ttmcUnlockGlow {
  0%   { box-shadow: 0 0 26px rgba(245, 197, 24, 0.3), 0 6px 18px rgba(0, 0, 0, 0.4); }
  100% { box-shadow: 0 0 44px rgba(245, 197, 24, 0.55), 0 6px 18px rgba(0, 0, 0, 0.4); }
}
#academy-game-root .ttmc-avatar-unlock-header {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-align: center;
  color: #ffd700;
  text-shadow: 0 0 14px rgba(255, 215, 0, 0.6);
  margin-bottom: 12px;
  text-transform: uppercase;
}
#academy-game-root .ttmc-avatar-unlock-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#academy-game-root .ttmc-avatar-unlock-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  animation: ttmcUnlockCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ttmcUnlockCardIn {
  0%   { opacity: 0; transform: translateY(12px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
#academy-game-root .ttmc-avatar-unlock-card.rarity-rare      { border-color: rgba(0, 210, 255, 0.5); }
#academy-game-root .ttmc-avatar-unlock-card.rarity-epic      { border-color: rgba(190, 75, 219, 0.55); box-shadow: inset 0 0 18px rgba(190, 75, 219, 0.12); }
#academy-game-root .ttmc-avatar-unlock-card.rarity-legendary { border-color: #ffd700; box-shadow: inset 0 0 22px rgba(255, 215, 0, 0.2); }
#academy-game-root .ttmc-avatar-unlock-img {
  width: 64px; height: 64px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  display: flex; align-items: center; justify-content: center;
}
#academy-game-root .ttmc-avatar-unlock-img img {
  width: 100%; height: 100%; object-fit: cover;
}
#academy-game-root .ttmc-avatar-unlock-info { flex: 1; min-width: 0; }
#academy-game-root .ttmc-avatar-unlock-name {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 3px;
}
#academy-game-root .ttmc-avatar-unlock-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.3;
  font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  #academy-game-root .ttmc-avatar-unlock-panel,
  #academy-game-root .ttmc-avatar-unlock-card { animation: none; }
}

/* ─── Phase 4 H5P (v3.30.0) ───────────────────────────────────────── */
/* Section "Notions à revoir" dans modal results() */
#academy-game-root .bdt-h5p-recap {
  margin-top: 18px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 215, 102, 0.08), rgba(255, 215, 102, 0.02));
  border: 1px solid rgba(255, 215, 102, 0.25);
}
#academy-game-root .bdt-h5p-recap .bdt-section-title {
  color: #ffd766;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
#academy-game-root .bdt-h5p-recap-subtitle {
  font-size: 12px;
  color: rgba(245, 247, 251, 0.7);
  margin-bottom: 12px;
}
#academy-game-root .bdt-h5p-recap-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#academy-game-root .bdt-h5p-recap-item {
  display: flex;
  align-items: center;
}
#academy-game-root .bdt-h5p-recap-link,
#academy-game-root .bdt-h5p-recap-item > .bdt-h5p-recap-icon ~ * {
  display: flex;
  align-items: center;
  gap: 8px;
}
#academy-game-root .bdt-h5p-recap-link {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #f5f7fb;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
#academy-game-root .bdt-h5p-recap-link:hover {
  background: rgba(255, 215, 102, 0.12);
  border-color: rgba(255, 215, 102, 0.4);
  transform: translateX(2px);
}
#academy-game-root .bdt-h5p-recap-icon { font-size: 18px; }
#academy-game-root .bdt-h5p-recap-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#academy-game-root .bdt-h5p-miss-count {
  font-size: 11px;
  font-weight: 700;
  color: #ff7676;
  background: rgba(255, 118, 118, 0.12);
  padding: 2px 6px;
  border-radius: 6px;
}
#academy-game-root .bdt-h5p-recap-arrow {
  color: #ffd766;
  font-size: 16px;
  font-weight: 700;
}

/* v3.36.0 — bouton cliquable (remplace l'ancien <a> link) qui ouvre le lightbox H5P */
#academy-game-root .bdt-h5p-recap-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #f5f7fb;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
#academy-game-root .bdt-h5p-recap-btn:hover,
#academy-game-root .bdt-h5p-recap-btn:focus-visible {
  background: rgba(255, 215, 102, 0.14);
  border-color: rgba(255, 215, 102, 0.5);
  transform: translateX(3px);
  outline: none;
}
#academy-game-root .bdt-h5p-recap-btn:active {
  transform: translateX(1px) scale(0.99);
}
#academy-game-root .bdt-h5p-recap-btn .bdt-h5p-recap-arrow {
  margin-left: auto;
}
/* v3.42.0 — Cards visuelles enrichies pour modal recap H5P (#2 + #7).
   Layout 2-rows : icône à gauche, body (titre + miss count) au centre,
   CTA à droite. Animation stagger fade-in à l'apparition. */
#academy-game-root .bdt-h5p-recap-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%);
  border: 2px solid rgba(0, 210, 255, 0.18);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  opacity: 0;
  transform: translateY(8px);
  animation: bdt-h5p-card-in 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
#academy-game-root .bdt-h5p-recap-card:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(0, 210, 255, 0.5);
  box-shadow: 0 6px 20px rgba(0, 210, 255, 0.18);
}
#academy-game-root .bdt-h5p-recap-card .bdt-h5p-recap-icon {
  font-size: 28px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25));
}
#academy-game-root .bdt-h5p-recap-card .bdt-h5p-recap-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#academy-game-root .bdt-h5p-recap-card .bdt-h5p-recap-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#academy-game-root .bdt-h5p-recap-card .bdt-h5p-miss-count {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 71, 87, 0.85);
  letter-spacing: 0.3px;
}
#academy-game-root .bdt-h5p-recap-card .bdt-h5p-recap-cta {
  font-size: 12px;
  font-weight: 800;
  color: #00d2ff;
  letter-spacing: 0.5px;
  background: rgba(0, 210, 255, 0.12);
  padding: 6px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* v3.42.0 — Card "Recommandation officielle" (Plugin Phase 3 server reco).
   Mise en avant visuelle : ruban or, glow étoilé. */
#academy-game-root .bdt-h5p-recap-card-official {
  background: linear-gradient(135deg, rgba(255, 212, 0, 0.18) 0%, rgba(0, 210, 255, 0.12) 100%);
  border-color: #ffd400;
  box-shadow: 0 0 24px rgba(255, 212, 0, 0.25);
  position: relative;
}
#academy-game-root .bdt-h5p-recap-card-official::before {
  content: '⭐ Officiel';
  position: absolute;
  top: -8px;
  left: 14px;
  background: linear-gradient(135deg, #ffd400 0%, #ff9f43 100%);
  color: #1a1a2e;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  z-index: 2;
}
#academy-game-root .bdt-h5p-recap-card-official .bdt-h5p-miss-count-official {
  color: #ffd400;
  font-weight: 800;
}
#academy-game-root .bdt-h5p-recap-card-official .bdt-h5p-recap-cta {
  color: #ffd400;
  background: rgba(255, 212, 0, 0.18);
}

@keyframes bdt-h5p-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* v3.36.0 — Mode Facile auto-50/50 (coup de pouce après 7s sans réponse) */
#academy-game-root .bdt-answer-btn.bdt-fifty-fifty-out {
  opacity: 0.25;
  text-decoration: line-through;
  pointer-events: none;
  filter: grayscale(0.7);
  transition: opacity 0.4s ease, filter 0.4s ease;
}
#academy-game-root .bdt-fifty-fifty-hint {
  position: fixed;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffd400 0%, #ff9f43 100%);
  color: #1a1a2e;
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(255, 212, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.2);
  z-index: 9999;
  animation: bdt-fifty-fifty-pop 2.4s ease forwards;
  pointer-events: none;
}
@keyframes bdt-fifty-fifty-pop {
  0%   { opacity: 0; transform: translate(-50%, 16px) scale(0.8); }
  15%  { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
  20%  { transform: translate(-50%, 0) scale(1); }
  85%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -10px) scale(0.95); }
}


/* v3.40.0 — Frontend gating H5P Co+ */
.bdt-h5p-gated {
	margin-top: 16px;
}
.bdt-h5p-gated-card {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 18px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(255,212,0,0.12), rgba(168,85,247,0.18));
	border: 1px solid rgba(255,212,0,0.30);
}
.bdt-h5p-gated-icon { font-size: 32px; line-height: 1; flex-shrink: 0; }
.bdt-h5p-gated-body h4 { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.bdt-h5p-gated-body p { margin: 0 0 10px; font-size: 14px; opacity: 0.85; }

/* ─────────────────────────────────────────────────────────────────────
   v3.58.0 — Mode "Réviser ce H5P" : bouton "🎯 Combattre" overlay sur
   chaque card recap + header spécial de fin de match.
   ───────────────────────────────────────────────────────────────────── */

/* Bouton "🎯 Combattre" en overlay top-right de la card recap H5P.
   Click déclenche Arene.startH5pReview() au lieu de la lightbox. */
#academy-game-root .bdt-h5p-recap-card {
  position: relative; /* pour ancrer le bouton combat absolute */
}
#academy-game-root .bdt-h5p-recap-combat {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #fff;
  background: linear-gradient(135deg, var(--aca-pink, #ff2d87) 0%, var(--aca-purple, #a855f7) 100%);
  padding: 5px 10px;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 45, 135, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  z-index: 3;
  white-space: nowrap;
}
#academy-game-root .bdt-h5p-recap-combat:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 4px 14px rgba(255, 45, 135, 0.5);
}
#academy-game-root .bdt-h5p-recap-combat:active {
  transform: translateY(0) scale(0.98);
}

/* Header spécial fin de match en mode review (pas "VICTOIRE/Défaite"). */
#academy-game-root .bdt-review-mode-title {
  background: linear-gradient(135deg, var(--aca-pink, #ff2d87) 0%, var(--aca-cyan, #00e5ff) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
}
#academy-game-root .bdt-review-mode-subtitle {
  font-style: italic;
  opacity: 0.9;
  margin-bottom: 8px;
}

/* ─────────────────────────────────────────────────────────────────────
   v3.61.0 — Polish TTMC : tier labels sur cartes 1-10 + banner À ton tour
   ───────────────────────────────────────────────────────────────────── */

/* Cartes 1-10 enrichies : numéro + stars + label (Facile/Moyen/Dur/Très dur) */
#academy-game-root .ttmc-cards { gap: 8px; }
#academy-game-root .ttmc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 4px;
  min-height: 78px;
  font-size: 14px;
  line-height: 1.1;
}
#academy-game-root .ttmc-card .ttmc-card-num {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 2px;
}
#academy-game-root .ttmc-card .ttmc-card-stars {
  font-size: 10px;
  line-height: 1;
  opacity: 0.95;
  letter-spacing: -1px;
}
#academy-game-root .ttmc-card .ttmc-card-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  opacity: 1;
  margin-top: 1px;
}

/* Tier-specific colors (override le :nth-child colorant générique) */
#academy-game-root .ttmc-card-tier-easy {
  border-color: rgba(78, 205, 196, 0.55) !important;
  background: linear-gradient(180deg, rgba(78, 205, 196, 0.12), rgba(26, 26, 46, 0.85));
}
#academy-game-root .ttmc-card-tier-easy:hover {
  border-color: #4ecdc4 !important;
  background: linear-gradient(180deg, rgba(78, 205, 196, 0.28), rgba(26, 26, 46, 0.9));
  box-shadow: 0 4px 14px rgba(78, 205, 196, 0.25);
}
#academy-game-root .ttmc-card-tier-medium {
  border-color: rgba(245, 197, 24, 0.55) !important;
  background: linear-gradient(180deg, rgba(245, 197, 24, 0.12), rgba(26, 26, 46, 0.85));
}
#academy-game-root .ttmc-card-tier-medium:hover {
  border-color: #f5c518 !important;
  background: linear-gradient(180deg, rgba(245, 197, 24, 0.28), rgba(26, 26, 46, 0.9));
  box-shadow: 0 4px 14px rgba(245, 197, 24, 0.25);
}
#academy-game-root .ttmc-card-tier-hard {
  border-color: rgba(255, 107, 53, 0.55) !important;
  background: linear-gradient(180deg, rgba(255, 107, 53, 0.12), rgba(26, 26, 46, 0.85));
}
#academy-game-root .ttmc-card-tier-hard:hover {
  border-color: #ff6b35 !important;
  background: linear-gradient(180deg, rgba(255, 107, 53, 0.28), rgba(26, 26, 46, 0.9));
  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.3);
}
#academy-game-root .ttmc-card-tier-extreme {
  border-color: rgba(233, 69, 96, 0.65) !important;
  background: linear-gradient(180deg, rgba(233, 69, 96, 0.18), rgba(26, 26, 46, 0.9));
  position: relative;
}
#academy-game-root .ttmc-card-tier-extreme:hover {
  border-color: #e94560 !important;
  background: linear-gradient(180deg, rgba(233, 69, 96, 0.32), rgba(26, 26, 46, 0.95));
  box-shadow: 0 4px 18px rgba(233, 69, 96, 0.4);
  transform: translateY(-4px) scale(1.02);
}

/* Banner "🎯 À ton tour !" — apparait quand c'est le tour du joueur user */
#academy-game-root .ttmc-your-turn-banner {
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 16px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, var(--aca-pink, #ff2d87) 0%, var(--aca-yellow, #ffd400) 50%, var(--aca-cyan, #00e5ff) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ttmcYourTurnSheen 2.4s linear infinite;
}
@keyframes ttmcYourTurnSheen {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Responsive : sur très petit écran, les cartes prennent moins d'espace */
@media (max-width: 600px) {
  #academy-game-root .ttmc-card { min-height: 64px; padding: 8px 2px; }
  #academy-game-root .ttmc-card .ttmc-card-num { font-size: 18px; }
  #academy-game-root .ttmc-card .ttmc-card-stars { font-size: 10px; }
  #academy-game-root .ttmc-card .ttmc-card-label { font-size: 11px; }
}

/* ─────────────────────────────────────────────────────────────────────
   v3.63.0 — Polish UX général : animation transition entre écrans.
   Déclenchée par showScreen() qui retire/réajoute .bdt-screen-enter.
   Respect prefers-reduced-motion : pas d'animation pour les enfants
   ou parents sensibles au motion.
   ───────────────────────────────────────────────────────────────────── */
#academy-game-root.bdt-screen-enter {
  animation: bdtScreenEnter 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes bdtScreenEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@media (prefers-reduced-motion: reduce) {
  #academy-game-root.bdt-screen-enter { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   v3.68.0 — Polish UX v2 : taille font a11y + bouton aide flottant + modal
   ───────────────────────────────────────────────────────────────────── */

/* Scaling des fonts via classes posées sur #academy-game-root.
   Approche : font-size root + variables que tous les autres styles relatifs
   (em, rem) suivent. Si le code utilise des px hardcodés, on scale via zoom. */
#academy-game-root.bdt-font-size-large {
  font-size: 18px;
}
#academy-game-root.bdt-font-size-large .bdt-equation,
#academy-game-root.bdt-font-size-large .bdt-question-prompt {
  font-size: 1.25em;
}
#academy-game-root.bdt-font-size-xlarge {
  font-size: 22px;
}
#academy-game-root.bdt-font-size-xlarge .bdt-equation,
#academy-game-root.bdt-font-size-xlarge .bdt-question-prompt {
  font-size: 1.5em;
}

/* Bouton aide flottant — fixed bottom-right, persistant tous écrans */
.bdt-help-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2d87 0%, #a855f7 100%);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 45, 135, 0.4);
  z-index: 9998;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bdt-help-fab:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 6px 20px rgba(255, 45, 135, 0.55);
}
.bdt-help-fab:active {
  transform: translateY(0) scale(0.96);
}
@media (max-width: 600px) {
  .bdt-help-fab { right: 12px; bottom: 12px; width: 42px; height: 42px; font-size: 19px; }
}

/* Overlay modal aide */
.bdt-help-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 26, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: bdtHelpFadeIn 220ms ease-out;
}
@keyframes bdtHelpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bdt-help-modal-card {
  background: linear-gradient(180deg, #1f1f3a 0%, #14142b 100%);
  border: 2px solid rgba(255, 45, 135, 0.3);
  border-radius: 16px;
  padding: 24px 22px;
  max-width: 520px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  color: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  position: relative;
  animation: bdtHelpCardIn 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes bdtHelpCardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bdt-help-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease;
}
.bdt-help-modal-close:hover {
  background: rgba(255, 45, 135, 0.25);
  border-color: rgba(255, 45, 135, 0.5);
}

.bdt-help-modal-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(90deg, #ff2d87 0%, #ffd400 50%, #00e5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bdt-help-section { margin-bottom: 20px; }
.bdt-help-section:last-child { margin-bottom: 0; }
.bdt-help-section h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: #ffd400;
  letter-spacing: 0.3px;
}

.bdt-help-font-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bdt-help-font-btn {
  flex: 1;
  min-width: 90px;
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.18s ease;
}
.bdt-help-font-btn:hover {
  border-color: #00e5ff;
  background: rgba(0, 229, 255, 0.12);
}
.bdt-help-font-btn.active {
  border-color: #ff2d87;
  background: rgba(255, 45, 135, 0.22);
  box-shadow: 0 0 14px rgba(255, 45, 135, 0.3);
}
.bdt-help-font-btn[data-size="large"]  { font-size: 15px; }
.bdt-help-font-btn[data-size="xlarge"] { font-size: 18px; }

.bdt-help-sound-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.bdt-help-sound-btn:hover {
  border-color: #ffd400;
  background: rgba(255, 212, 0, 0.15);
}
.bdt-help-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

.bdt-help-rules {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.bdt-help-rules li { margin-bottom: 6px; }
.bdt-help-rules b { color: #ffd400; }

.bdt-help-credits {
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.bdt-help-credits p { margin: 0; }

/* ─────────────────────────────────────────────────────────────────────
   v3.69.0 — Course Académique (backlog #1) : 4 mascottes en course,
   sans gambling. Vocabulaire champion/podium/médaille uniquement.
   ───────────────────────────────────────────────────────────────────── */

/* Écran 1/3 — Sélection champion */
#academy-game-root .bdt-course-champion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 12px 60px;
}
#academy-game-root .bdt-course-subtitle {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  max-width: 480px;
  margin: -8px 0 8px;
}
#academy-game-root .bdt-course-mascots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 520px;
}
@media (min-width: 720px) {
  #academy-game-root .bdt-course-mascots-grid { grid-template-columns: repeat(4, 1fr); }
}
#academy-game-root .bdt-course-mascot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 10px;
  border-radius: 14px;
  border: 2px solid;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.2));
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  color: #fff;
  gap: 8px;
}
#academy-game-root .bdt-course-mascot-card:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
#academy-game-root .bdt-course-mascot-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #0f0f1a;
}
#academy-game-root .bdt-course-mascot-name {
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.3px;
}
#academy-game-root .bdt-course-mascot-subject {
  font-size: 11px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Écran 2/3 — Course */
#academy-game-root .bdt-course-race {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 10px;
}
#academy-game-root .bdt-course-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  flex-wrap: wrap;
}
#academy-game-root .bdt-course-title {
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.5px;
}
#academy-game-root .bdt-course-round-counter {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}
#academy-game-root .bdt-course-quit {
  padding: 6px 12px;
  font-size: 12px;
}

#academy-game-root .bdt-course-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.18));
  border-radius: 12px;
}
#academy-game-root .bdt-course-lane {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#academy-game-root .bdt-course-lane-label {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
#academy-game-root .bdt-course-champion-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 9px;
  background: linear-gradient(90deg, #ffd400, #ff9f43);
  color: #1a1a2e;
  letter-spacing: 0.4px;
}
#academy-game-root .bdt-course-lane-bar {
  position: relative;
  width: 100%;
  height: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: visible;
}
/* Ligne d'arrivée à droite */
#academy-game-root .bdt-course-lane-bar::after {
  content: '🏁';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  opacity: 0.75;
}
#academy-game-root .bdt-course-pion {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transform: translate(-50%, -50%);
  transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #0f0f1a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#academy-game-root .bdt-course-pion.champion {
  box-shadow: 0 0 16px rgba(255, 212, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
  outline: 2px solid #ffd400;
  outline-offset: 1px;
}

/* Question prompt */
#academy-game-root .bdt-course-question-wrap {
  padding: 16px;
  background: linear-gradient(180deg, rgba(255, 45, 135, 0.08), rgba(0, 0, 0, 0.2));
  border-radius: 14px;
  border: 1px solid rgba(255, 45, 135, 0.2);
}
#academy-game-root .bdt-course-question-header {
  text-align: center;
  font-size: 13px;
  margin-bottom: 8px;
  font-weight: 700;
}
#academy-game-root .bdt-course-question-prompt {
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  margin: 8px 0 14px;
  color: #fff;
}
#academy-game-root .bdt-course-answers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
#academy-game-root .bdt-course-answer {
  padding: 14px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s ease;
}
#academy-game-root .bdt-course-answer:hover {
  border-color: #00d2ff;
  background: rgba(0, 210, 255, 0.12);
}
#academy-game-root .bdt-course-answer.correct {
  border-color: #2ed573;
  background: rgba(46, 213, 115, 0.25);
  color: #fff;
}
#academy-game-root .bdt-course-answer.wrong {
  border-color: #ff6b81;
  background: rgba(255, 107, 129, 0.25);
}

/* Écran 3/3 — Résultats podium */
#academy-game-root .bdt-course-podium {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
}
#academy-game-root .bdt-course-podium-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 14px;
}
#academy-game-root .bdt-course-podium-row.champion {
  background: linear-gradient(90deg, rgba(255, 212, 0, 0.15), rgba(255, 159, 67, 0.1));
  border: 1px solid rgba(255, 212, 0, 0.4);
}
#academy-game-root .bdt-course-podium-medal {
  font-size: 22px;
  width: 32px;
  text-align: center;
}
#academy-game-root .bdt-course-podium-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #0f0f1a;
}
#academy-game-root .bdt-course-podium-name {
  flex: 1;
  font-weight: 700;
}
#academy-game-root .bdt-course-podium-pos {
  font-size: 12px;
  opacity: 0.65;
}

/* ─────────────────────────────────────────────────────────────────────
   v3.70.0 — Course Académique V2 polish (validé via démo HTML standalone)
   ───────────────────────────────────────────────────────────────────── */

/* Countdown overlay 3-2-1-GO! */
.bdt-course-countdown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 26, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bdt-course-countdown-num {
  font-size: 180px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-yellow, #ffd400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: bdtCountPulse 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes bdtCountPulse {
  from { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  50%  { transform: scale(1.15); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}
@media (max-width: 600px) {
  .bdt-course-countdown-num { font-size: 120px; }
}

/* Pion qui sautille à chaque avancée */
#academy-game-root .bdt-course-pion.bouncing {
  animation: bdtPionBounce 0.5s ease-out;
}
@keyframes bdtPionBounce {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  40%      { transform: translate(-50%, -85%) scale(1.15); }
}

/* Défi personnel — section au-dessus du retour menu */
#academy-game-root .bdt-course-challenge-section {
  width: 100%;
  max-width: 520px;
  margin-top: 8px;
}
#academy-game-root .bdt-course-challenge-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--aca-yellow, #ffd400);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  text-align: center;
  text-transform: uppercase;
}
#academy-game-root .bdt-course-challenge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#academy-game-root .bdt-course-challenge-card {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.18s ease;
  color: #fff;
}
#academy-game-root .bdt-course-challenge-card:hover {
  border-color: var(--aca-cyan, #00e5ff);
  background: rgba(0, 229, 255, 0.10);
}
#academy-game-root .bdt-course-challenge-card.selected {
  border-color: var(--aca-yellow, #ffd400);
  background: rgba(255, 212, 0, 0.18);
  box-shadow: 0 0 14px rgba(255, 212, 0, 0.25);
}

/* Résultat défi (réussi ou raté) sur écran podium */
#academy-game-root .bdt-course-challenge-result {
  text-align: center;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 10px;
  margin: 6px auto;
  max-width: 480px;
  font-weight: 700;
}
#academy-game-root .bdt-course-challenge-result.ok {
  color: var(--aca-green, #2ed573);
  background: rgba(46, 213, 115, 0.12);
  border: 1px solid rgba(46, 213, 115, 0.4);
}
#academy-game-root .bdt-course-challenge-result.ko {
  color: #ff6b81;
  background: rgba(255, 107, 129, 0.10);
  border: 1px solid rgba(255, 107, 129, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────
   v3.71.0 — Course Académique V3 multijoueur (bar joueurs + timer)
   ───────────────────────────────────────────────────────────────────── */

/* Bar du haut : 4 cartes joueurs avec status temps réel */
#academy-game-root .bdt-course-players-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
#academy-game-root .bdt-course-player-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid;
  transition: all 0.25s ease;
}
#academy-game-root .bdt-course-player-card.me { background: rgba(255, 212, 0, 0.12); }
#academy-game-root .bdt-course-player-card.answering { background: rgba(0, 229, 255, 0.18); }
#academy-game-root .bdt-course-player-card.answered.correct { background: rgba(46, 213, 115, 0.20); }
#academy-game-root .bdt-course-player-card.answered.wrong { background: rgba(255, 107, 129, 0.20); }

#academy-game-root .bdt-course-player-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #0f0f1a;
}
#academy-game-root .bdt-course-player-name {
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
  min-height: 24px;
  display: flex;
  align-items: center;
}
#academy-game-root .bdt-course-player-score {
  font-size: 11px;
  opacity: 0.8;
  font-weight: 700;
}
#academy-game-root .bdt-course-player-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  margin-top: 2px;
  min-height: 16px;
}
#academy-game-root .bdt-course-player-status.thinking {
  background: rgba(0, 229, 255, 0.25);
  color: #00d2ff;
}
#academy-game-root .bdt-course-player-status.correct {
  background: rgba(46, 213, 115, 0.25);
  color: #2ed573;
}
#academy-game-root .bdt-course-player-status.wrong {
  background: rgba(255, 107, 129, 0.25);
  color: #ff6b81;
}
#academy-game-root .bdt-course-player-status.idle { opacity: 0.4; }

@media (max-width: 600px) {
  #academy-game-root .bdt-course-player-name { font-size: 9px; }
  #academy-game-root .bdt-course-player-avatar { width: 30px; height: 30px; font-size: 14px; }
}

/* Timer bar (gradient vert→jaune→rouge qui descend) */
#academy-game-root .bdt-course-timer-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}
#academy-game-root .bdt-course-timer-fill {
  height: 100%;
  background: linear-gradient(90deg, #2ed573, #ffd400, #ff6b81);
  transition: width 100ms linear;
}

/* Answer button disabled state (après que user a répondu) */
#academy-game-root .bdt-course-answer:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────────
   v3.72.0 — TTMC Polish v3 : compteur finale + banner prison + bonus bounce
   ───────────────────────────────────────────────────────────────────── */

/* Compteur "X cases avant finale" dans la topbar TTMC */
#academy-game-root .ttmc-finale-counter {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.25s ease;
}
#academy-game-root .ttmc-finale-counter.warning {
  color: #ffd400;
  background: rgba(255, 212, 0, 0.15);
  border-color: rgba(255, 212, 0, 0.4);
}
#academy-game-root .ttmc-finale-counter.critical {
  color: #ff6b81;
  background: rgba(255, 107, 129, 0.18);
  border-color: rgba(255, 107, 129, 0.5);
  /* 2026-07-24 : renomme. Cette animation portait le MEME nom que celle de la
     case finale du plateau (.ttmc-case-finale). En CSS la derniere definition
     gagne pour tout le document, donc la case 25 heritait de ce zoom rouge au
     lieu de son halo dore, et un scale sur une cellule de grille chevauche ses
     voisines. Bug anterieur a ce chantier, present depuis au moins la 3.100.0. */
  animation: ttmcCounterCritical 0.9s ease-in-out infinite;
}
@keyframes ttmcCounterCritical {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 107, 129, 0); }
  50%      { transform: scale(1.06); box-shadow: 0 0 14px rgba(255, 107, 129, 0.5); }
}

/* Banner prison plein écran 1.8s — visible peu importe l'écran */
.ttmc-prison-banner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 26, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9997;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ttmcPrisonFadeIn 250ms ease-out;
}
@keyframes ttmcPrisonFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ttmc-prison-banner-card {
  background: linear-gradient(135deg, #1a1a2e, #0f0f1a);
  border: 3px solid #ff6b81;
  border-radius: 16px;
  padding: 28px 36px;
  text-align: center;
  box-shadow: 0 0 40px rgba(255, 107, 129, 0.5);
  animation: ttmcPrisonShake 0.5s ease-in-out;
}
@keyframes ttmcPrisonShake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20%      { transform: rotate(-3deg) scale(0.95); }
  40%      { transform: rotate(3deg) scale(1.05); }
  60%      { transform: rotate(-2deg) scale(1); }
  80%      { transform: rotate(2deg) scale(1); }
}
.ttmc-prison-banner-icon {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 8px;
  animation: ttmcPrisonChain 1.2s ease-in-out infinite;
}
@keyframes ttmcPrisonChain {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.ttmc-prison-banner-title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ff6b81;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.ttmc-prison-banner-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

/* Animation pion qui rebondit sur la case bonus (3 rebonds) */
#academy-game-root .ttmc-pion.bonus-bounce {
  animation: ttmcBonusBounce 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ttmcBonusBounce {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  20%      { transform: translateY(-18px) scale(1.25); filter: brightness(1.5) drop-shadow(0 0 8px #ffd400); }
  40%      { transform: translateY(0) scale(0.95); }
  60%      { transform: translateY(-10px) scale(1.15); filter: brightness(1.3) drop-shadow(0 0 6px #ffd400); }
  80%      { transform: translateY(0) scale(1); }
}

/* ========================================================================
   v3.74.0 — Polish TTMC v4 : position delta float + subject breakdown +
   match stats + streaks
   ======================================================================== */

/* Delta flottant (+5 / -3) au-dessus du pion */
#academy-game-root .ttmc-delta-float {
  position: absolute;
  top: -28px; left: 50%;
  transform: translateX(-50%);
  font-size: 16px; font-weight: 900;
  pointer-events: none;
  animation: ttmcDeltaFloat 1.4s ease-out forwards;
  z-index: 100;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
#academy-game-root .ttmc-delta-float.positive { color: #00d2ff; }
#academy-game-root .ttmc-delta-float.negative { color: #e94560; }
@keyframes ttmcDeltaFloat {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-40px); }
}

/* Subject breakdown panel dans les résultats */
#academy-game-root .ttmc-subject-breakdown {
  margin: 16px 0;
  padding: 16px;
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
}
#academy-game-root .ttmc-breakdown-title {
  font-size: 15px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 12px; color: #fff;
}
#academy-game-root .ttmc-breakdown-grid {
  display: flex; flex-direction: column; gap: 8px;
}
#academy-game-root .ttmc-breakdown-row {
  display: flex; align-items: center; gap: 10px;
}
#academy-game-root .ttmc-breakdown-subject {
  flex: 0 0 140px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#academy-game-root .ttmc-breakdown-bar-wrap {
  flex: 1; height: 10px; background: rgba(255,255,255,0.1);
  border-radius: 5px; overflow: hidden;
}
#academy-game-root .ttmc-breakdown-bar {
  height: 100%; background: linear-gradient(90deg, #00d2ff, #2ecc71);
  border-radius: 5px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 2px;
}
#academy-game-root .ttmc-breakdown-pct {
  flex: 0 0 80px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7);
  text-align: right;
}

/* Match stats grid (streak, bonnes réponses, carte max, tours) */
#academy-game-root .ttmc-match-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin: 16px 0;
}
#academy-game-root .ttmc-stat-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: rgba(255,255,255,0.05);
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.08);
}
#academy-game-root .ttmc-stat-icon { font-size: 20px; }
#academy-game-root .ttmc-stat-label {
  flex: 1; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.6);
  text-transform: uppercase; letter-spacing: 0.5px;
}
#academy-game-root .ttmc-stat-value {
  font-size: 18px; font-weight: 900; color: #fff;
}

/* ========================================================================
   v3.74.0 — Toggle Jeu Spécial : banner événement + badge mode
   ======================================================================== */

#academy-game-root .aca-special-event-banner {
  position: relative; overflow: hidden;
  margin: 12px 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(233,69,96,0.15), rgba(245,197,24,0.15));
  border: 2px solid rgba(245,197,24,0.4);
  border-radius: 14px;
}
#academy-game-root .aca-event-glow {
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(245,197,24,0.08) 0%, transparent 60%);
  animation: eventGlowPulse 3s ease-in-out infinite;
}
@keyframes eventGlowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.1); }
}
#academy-game-root .aca-event-content {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px;
}
#academy-game-root .aca-event-badge {
  font-size: 32px; flex-shrink: 0;
  animation: eventBadgeBounce 2s ease-in-out infinite;
}
@keyframes eventBadgeBounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
#academy-game-root .aca-event-info { flex: 1; }
#academy-game-root .aca-event-title {
  font-size: 16px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 1px; color: #f5c518;
}
#academy-game-root .aca-event-countdown {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7);
  margin-top: 2px;
}
#academy-game-root .aca-event-bonus {
  font-size: 13px; font-weight: 700; color: #00d2ff;
  margin-top: 4px;
}

/* Badge événement sur une carte mode ciblée */
#academy-game-root .aca-mode-event-badge {
  position: absolute; top: -6px; right: -6px;
  font-size: 20px; z-index: 5;
  animation: eventBadgeBounce 2s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(245,197,24,0.6));
}
#academy-game-root .aca-mode-card { position: relative; }

/* ========================================================================
   v3.75.0 — SNAP ACADÉMIQUE
   ======================================================================== */

/* Board container */
#academy-game-root .snap-board {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; max-width: 720px; margin: 0 auto;
  animation: bdtFadeIn 0.3s ease;
}

/* Topbar */
#academy-game-root .snap-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; border-radius: 12px;
  background: rgba(255,255,255,0.06); backdrop-filter: blur(8px);
}
#academy-game-root .snap-turn-label {
  font-weight: 700; font-size: 16px; color: #fff;
}
#academy-game-root .snap-energy {
  font-size: 18px; font-weight: 800;
  background: linear-gradient(135deg, #ffd400, #ff9500);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Phase labels */
#academy-game-root .snap-phase-label {
  text-align: center; font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,0.7); padding: 4px 0;
}
#academy-game-root .snap-phase-reveal {
  font-size: 18px; color: #00e5ff;
  animation: snapPulse 0.6s ease-in-out infinite alternate;
}

/* Lines container */
#academy-game-root .snap-lines {
  display: flex; flex-direction: column; gap: 10px;
}

/* Single line */
#academy-game-root .snap-line {
  border: 2px solid rgba(255,255,255,0.12); border-radius: 14px;
  padding: 12px; background: rgba(15,15,26,0.7);
  transition: border-color 0.2s, box-shadow 0.2s;
}
#academy-game-root .snap-line:hover {
  border-color: rgba(0,229,255,0.3);
}
#academy-game-root .snap-line-selected {
  border-color: #00e5ff !important;
  box-shadow: 0 0 16px rgba(0,229,255,0.25);
}

/* Line objective */
#academy-game-root .snap-line-objective {
  font-size: 13px; font-weight: 700; color: #ffd400;
  margin-bottom: 8px; text-align: center;
}

/* Power row */
#academy-game-root .snap-line-power-row {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
#academy-game-root .snap-power {
  font-size: 16px; font-weight: 800; padding: 4px 10px;
  border-radius: 8px; background: rgba(255,255,255,0.06);
  transition: all 0.3s;
}
#academy-game-root .snap-power-vs {
  font-size: 12px; color: rgba(255,255,255,0.4); font-weight: 600;
}
#academy-game-root .snap-winning {
  color: #2ecc71; background: rgba(46,204,113,0.15);
  text-shadow: 0 0 8px rgba(46,204,113,0.3);
}
#academy-game-root .snap-losing {
  color: #e74c3c; background: rgba(231,76,60,0.1);
}

/* Card slots */
#academy-game-root .snap-card-slot {
  display: flex; gap: 6px; flex-wrap: wrap; min-height: 36px;
  padding: 6px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
}
#academy-game-root .snap-slot-user { border-left: 3px solid #00e5ff; }
#academy-game-root .snap-slot-bot { border-left: 3px solid #ff2d87; }
#academy-game-root .snap-slot-empty {
  font-size: 12px; color: rgba(255,255,255,0.25); font-style: italic;
  display: flex; align-items: center; padding: 0 8px;
}

/* Placed card chips */
#academy-game-root .snap-placed-card {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 8px; font-size: 13px; font-weight: 700;
  animation: snapCardDrop 0.3s ease;
}
#academy-game-root .snap-placed-user { background: rgba(0,229,255,0.12); color: #00e5ff; }
#academy-game-root .snap-placed-bot { background: rgba(255,45,135,0.12); color: #ff2d87; }
#academy-game-root .snap-placed-icon { font-size: 16px; }
#academy-game-root .snap-placed-pow { font-size: 14px; }

/* "1, 2, 3 Co !" snap button */
#academy-game-root .snap-co-btn {
  display: block; width: 100%; padding: 12px;
  background: linear-gradient(135deg, #ff2d87, #ffd400);
  border: none; border-radius: 12px; color: #fff;
  font-weight: 900; font-size: 15px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  animation: snapPulse 1.5s ease-in-out infinite alternate;
}
#academy-game-root .snap-co-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 20px rgba(255,45,135,0.4);
}

/* Stake badge */
#academy-game-root .snap-stake-badge {
  font-size: 14px; font-weight: 900; padding: 3px 10px; border-radius: 8px;
  background: linear-gradient(135deg, #ff2d87, #ffd400);
  color: #fff; animation: snapPulse 1s ease-in-out infinite alternate;
}

/* Bot snap alert */
#academy-game-root .snap-bot-snap-alert {
  text-align: center; padding: 8px 16px; border-radius: 10px;
  background: rgba(255,45,135,0.15); border: 1px solid rgba(255,45,135,0.4);
  color: #ff2d87; font-weight: 700; font-size: 13px;
  animation: snapCardDrop 0.5s ease;
}

/* Bottom row */
#academy-game-root .snap-bottom-row {
  display: flex; justify-content: space-between; margin-top: 8px;
}

/* Rarity card borders */
#academy-game-root .snap-rarity-common { border-color: rgba(255,255,255,0.12); }
#academy-game-root .snap-rarity-rare { border-color: rgba(0,229,255,0.4); }
#academy-game-root .snap-rarity-epic { border-color: rgba(168,85,247,0.5); }
#academy-game-root .snap-rarity-legendary { border-color: rgba(255,212,0,0.5); box-shadow: 0 0 12px rgba(255,212,0,0.15); }

/* Hand section */
#academy-game-root .snap-hand-section {
  margin-top: 4px;
}
#academy-game-root .snap-hand-label {
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.6);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
}
#academy-game-root .snap-hand {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 4px; -webkit-overflow-scrolling: touch;
}

/* Card in hand */
#academy-game-root .snap-card {
  flex: 0 0 120px; padding: 10px; border-radius: 12px;
  background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.1);
  cursor: pointer; transition: all 0.2s; text-align: center;
  position: relative;
}
#academy-game-root .snap-card:hover:not(.snap-card-disabled) {
  border-color: #00e5ff; transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,229,255,0.15);
}
#academy-game-root .snap-card-selected {
  border-color: #00e5ff !important; background: rgba(0,229,255,0.1) !important;
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,229,255,0.25) !important;
}
#academy-game-root .snap-card-disabled {
  opacity: 0.35; cursor: not-allowed;
}
#academy-game-root .snap-card-cost {
  position: absolute; top: 6px; right: 8px;
  font-size: 12px; font-weight: 800; color: #ffd400;
}
#academy-game-root .snap-card-icon {
  font-size: 28px; margin: 4px 0;
}
#academy-game-root .snap-card-name {
  font-size: 11px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#academy-game-root .snap-card-power {
  font-size: 13px; font-weight: 800; color: #00e5ff; margin: 4px 0 2px;
}
#academy-game-root .snap-card-desc {
  font-size: 12px; color: rgba(255,255,255,0.72); line-height: 1.35;
}

/* Actions row */
#academy-game-root .snap-actions {
  display: flex; gap: 10px; margin-top: 4px;
}
#academy-game-root .snap-confirm-btn { flex: 2; }
#academy-game-root .snap-pass-btn { flex: 1; }

/* Reveal label */
#academy-game-root .snap-reveal-label {
  text-align: center; font-size: 20px; font-weight: 800;
  color: #ffd400; padding: 16px 0;
  animation: snapPulse 0.8s ease-in-out infinite alternate;
}

/* Back button */
#academy-game-root .snap-back-btn {
  margin-top: 8px; font-size: 13px;
}

/* ---- Snap Results ---- */
#academy-game-root .snap-results {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px 16px; max-width: 600px; margin: 0 auto;
  animation: bdtFadeIn 0.4s ease;
}
#academy-game-root .snap-result-header {
  text-align: center; font-size: 32px; font-weight: 900;
}
#academy-game-root .snap-result-win {
  background: linear-gradient(135deg, #ffd400, #2ecc71);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
#academy-game-root .snap-result-loss {
  color: #e74c3c;
}
#academy-game-root .snap-result-score {
  text-align: center; font-size: 15px; color: rgba(255,255,255,0.7);
}
#academy-game-root .snap-result-breakdown {
  display: flex; flex-direction: column; gap: 10px;
}
#academy-game-root .snap-result-line {
  padding: 12px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.08);
  background: rgba(15,15,26,0.6);
}
#academy-game-root .snap-line-won { border-color: rgba(46,204,113,0.4); background: rgba(46,204,113,0.06); }
#academy-game-root .snap-line-lost { border-color: rgba(231,76,60,0.3); background: rgba(231,76,60,0.04); }
#academy-game-root .snap-line-tie { border-color: rgba(255,212,0,0.3); }

#academy-game-root .snap-result-line-label {
  font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 6px;
}
#academy-game-root .snap-result-pow-row {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin-bottom: 8px;
}
#academy-game-root .snap-result-user-pow { font-weight: 800; color: #00e5ff; font-size: 18px; }
#academy-game-root .snap-result-vs { font-size: 12px; color: rgba(255,255,255,0.3); }
#academy-game-root .snap-result-bot-pow { font-weight: 800; color: #ff2d87; font-size: 18px; }

#academy-game-root .snap-result-cards-row {
  display: flex; justify-content: space-between; gap: 12px;
}
#academy-game-root .snap-result-cards-side {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
#academy-game-root .snap-result-cards-bot { justify-content: flex-end; }
#academy-game-root .snap-result-cards-label {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.4);
  margin-right: 6px;
}
#academy-game-root .snap-result-mini-card {
  font-size: 12px; font-weight: 700; padding: 2px 6px;
  border-radius: 6px; background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
}

/* CXP result */
#academy-game-root .snap-result-cxp {
  text-align: center; font-size: 16px; color: #ffd400;
}
#academy-game-root .snap-result-stake {
  text-align: center; font-size: 14px; font-weight: 800; color: #ff2d87;
}

/* New cards celebration */
#academy-game-root .snap-new-cards-section {
  padding: 12px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,212,0,0.08), rgba(168,85,247,0.08));
  border: 2px solid rgba(255,212,0,0.3);
}
#academy-game-root .snap-new-cards-title {
  text-align: center; font-size: 16px; font-weight: 900; color: #ffd400;
  margin-bottom: 10px; animation: snapPulse 1s ease-in-out infinite alternate;
}
#academy-game-root .snap-new-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: 10px; background: rgba(255,255,255,0.06);
  margin-bottom: 6px; animation: snapCardDrop 0.5s ease;
}
#academy-game-root .snap-new-card-icon { font-size: 24px; }
#academy-game-root .snap-new-card-name { font-weight: 800; font-size: 14px; color: #fff; }
#academy-game-root .snap-new-card-desc { font-size: 12px; color: rgba(255,255,255,0.6); }

/* ---- Collection screen ---- */
#academy-game-root .snap-collection-screen {
  padding: 16px; max-width: 720px; margin: 0 auto;
  animation: bdtFadeIn 0.3s ease;
}
#academy-game-root .snap-collection-title {
  text-align: center; font-size: 24px; font-weight: 900;
  background: linear-gradient(135deg, #ffd400, #ff2d87, #00e5ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 12px;
}
#academy-game-root .snap-collection-stats {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px; font-size: 14px; color: rgba(255,255,255,0.7);
}
#academy-game-root .snap-collection-stats span { font-weight: 700; }
#academy-game-root .snap-cl-progress {
  margin-bottom: 16px; padding: 12px 16px;
  background: linear-gradient(135deg, rgba(255,212,0,0.06), rgba(168,85,247,0.06));
  border: 1px solid rgba(255,212,0,0.2); border-radius: 12px;
}
#academy-game-root .snap-cl-label {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.6);
  margin-bottom: 6px; text-align: center;
}
#academy-game-root .snap-cl-bar {
  width: 100%; height: 8px; background: rgba(255,255,255,0.08);
  border-radius: 4px; overflow: hidden;
}
#academy-game-root .snap-cl-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #ffd400, #ff2d87, #a855f7);
  transition: width 0.5s ease;
}
#academy-game-root .snap-cl-next {
  font-size: 11px; color: rgba(255,255,255,0.45);
  text-align: center; margin-top: 4px;
}
#academy-game-root .snap-collection-section-label {
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.6);
  text-transform: uppercase; letter-spacing: 1px; margin: 12px 0 8px;
}

/* Deck builder row */
#academy-game-root .snap-collection-deck {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  margin-bottom: 16px;
}
#academy-game-root .snap-deck-slot {
  padding: 8px 4px; border-radius: 10px; text-align: center;
  border: 2px dashed rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.02);
  cursor: pointer; transition: all 0.2s; min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#academy-game-root .snap-deck-filled {
  border-style: solid; border-color: rgba(0,229,255,0.3);
  background: rgba(0,229,255,0.05);
}
#academy-game-root .snap-deck-filled:hover { border-color: #e74c3c; }
#academy-game-root .snap-deck-icon { font-size: 20px; }
#academy-game-root .snap-deck-name { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.7); margin-top: 2px; }
#academy-game-root .snap-deck-empty { font-size: 20px; color: rgba(255,255,255,0.15); }

/* Pool labels */
#academy-game-root .snap-collection-pool-label {
  font-size: 14px; font-weight: 800; color: #fff;
  margin: 16px 0 8px; padding: 6px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.04);
}
#academy-game-root .snap-pool-locked { color: rgba(255,255,255,0.35); }

/* Card grid */
#academy-game-root .snap-collection-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px;
  margin-bottom: 8px;
}
#academy-game-root .snap-collection-card {
  padding: 8px; border-radius: 10px; text-align: center;
  background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.1);
  cursor: pointer; transition: all 0.2s; position: relative;
}
#academy-game-root .snap-collection-card:hover:not(.snap-card-locked) {
  transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
#academy-game-root .snap-card-locked {
  opacity: 0.3; cursor: default; filter: grayscale(1);
}
#academy-game-root .snap-card-in-deck { background: rgba(0,229,255,0.08); }
#academy-game-root .snap-card-in-deck-badge {
  font-size: 8px; font-weight: 900; color: #00e5ff;
  margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}
#academy-game-root .snap-card-new { animation: snapCardDrop 0.6s ease; }
#academy-game-root .snap-card-new-badge {
  position: absolute; top: -4px; right: -4px;
  font-size: 9px; font-weight: 900; padding: 2px 6px;
  background: linear-gradient(135deg, #ffd400, #ff9500);
  color: #1a1a2e; border-radius: 6px;
  animation: snapPulse 1s ease-in-out infinite alternate;
}

/* Collection buttons */
#academy-game-root .snap-collection-btns {
  display: flex; flex-direction: column; gap: 8px; margin-top: 16px;
}
#academy-game-root .snap-collection-warning {
  text-align: center; font-size: 13px; color: rgba(255,255,255,0.5);
  font-style: italic; padding: 8px;
}

/* Snap animations */
@keyframes snapPulse {
  from { opacity: 0.7; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1.02); }
}
@keyframes snapCardDrop {
  from { opacity: 0; transform: translateY(-12px) scale(0.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ========================================================================
   v3.77.0 — Zones Mathématiques + Retreat
   ======================================================================== */

/* Zone header inside each snap-line */
#academy-game-root .snap-zone-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; padding: 6px 10px;
  border-radius: 10px; background: rgba(255,255,255,0.04);
}
#academy-game-root .snap-zone-icon {
  font-size: 22px; flex-shrink: 0;
}
#academy-game-root .snap-zone-name {
  font-size: 14px; font-weight: 800; color: #fff;
  text-shadow: 0 0 8px rgba(255,212,0,0.2);
}
#academy-game-root .snap-zone-desc {
  font-size: 12px; color: rgba(255,255,255,0.75);
  margin-bottom: 6px; text-align: center; line-height: 1.4;
  font-style: italic;
}
#academy-game-root .snap-zone-wincond {
  font-size: 12px; font-weight: 700; color: #a855f7;
  text-align: center; margin-bottom: 6px;
}
#academy-game-root .snap-zone-limit {
  display: inline-block; font-size: 10px; font-weight: 700;
  color: #e74c3c; background: rgba(231,76,60,0.12);
  padding: 2px 8px; border-radius: 6px; margin-bottom: 6px;
}

/* Unrevealed zone (mystery) */
#academy-game-root .snap-line-hidden {
  opacity: 0.5; border-style: dashed;
  background: repeating-linear-gradient(
    -45deg,
    rgba(15,15,26,0.7),
    rgba(15,15,26,0.7) 8px,
    rgba(255,255,255,0.02) 8px,
    rgba(255,255,255,0.02) 16px
  );
}
#academy-game-root .snap-line-hidden .snap-zone-header {
  justify-content: center;
}

/* Zone just revealed — flash animation */
#academy-game-root .snap-line-just-revealed {
  animation: snapZoneReveal 0.8s ease-out;
}
@keyframes snapZoneReveal {
  0% { opacity: 0.4; transform: scale(0.95); border-color: rgba(255,212,0,0.8); box-shadow: 0 0 30px rgba(255,212,0,0.4); }
  50% { border-color: rgba(255,212,0,0.6); box-shadow: 0 0 20px rgba(255,212,0,0.2); }
  100% { opacity: 1; transform: scale(1); border-color: rgba(255,255,255,0.12); box-shadow: none; }
}

/* Zone at card limit */
#academy-game-root .snap-line-locked {
  border-color: rgba(231,76,60,0.3);
  background: rgba(231,76,60,0.04);
}
#academy-game-root .snap-line-locked::after {
  content: '🔒'; position: absolute; top: 8px; right: 10px; font-size: 14px;
  opacity: 0.5;
}

/* Action row (snap + retreat side by side) */
#academy-game-root .snap-action-row {
  display: flex; gap: 8px; margin-top: 6px;
}
#academy-game-root .snap-action-row .snap-co-btn {
  flex: 2;
}

/* Retreat button */
#academy-game-root .snap-retreat-btn {
  flex: 1; padding: 10px 12px;
  background: rgba(231,76,60,0.12);
  border: 2px solid rgba(231,76,60,0.35);
  border-radius: 12px; color: #e74c3c;
  font-weight: 700; font-size: 13px; cursor: pointer;
  transition: all 0.2s;
}
#academy-game-root .snap-retreat-btn:hover {
  background: rgba(231,76,60,0.2);
  border-color: #e74c3c;
  transform: scale(1.02);
}

/* Retreat result display */
#academy-game-root .snap-result-retreat {
  background: linear-gradient(135deg, rgba(231,76,60,0.1), rgba(255,255,255,0.02));
  border: 2px solid rgba(231,76,60,0.3);
  border-radius: 16px; padding: 24px; text-align: center;
}
#academy-game-root .snap-result-retreat .snap-result-header {
  color: #e74c3c;
}
#academy-game-root .snap-result-cxp-loss {
  font-size: 18px; font-weight: 900; color: #e74c3c;
  text-align: center; margin: 8px 0;
}

/* Zone color accents (applied dynamically via inline style) */
#academy-game-root .snap-zone-header[data-zone-color] {
  border-left: 3px solid var(--zone-clr, rgba(255,255,255,0.1));
}

/* ========================================================================
   v3.78.0 — Question Flash
   ======================================================================== */

/* QFlash toggle in topbar */
#academy-game-root .snap-qflash-toggle {
  font-size: 11px; font-weight: 700; padding: 4px 10px;
  border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5); transition: all 0.2s;
}
#academy-game-root .snap-qflash-on {
  background: linear-gradient(135deg, rgba(255,212,0,0.2), rgba(255,45,135,0.2));
  border-color: rgba(255,212,0,0.5); color: #ffd400;
}

/* QFlash overlay */
#academy-game-root .snap-qflash-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  animation: bdtFadeIn 0.2s ease;
}
#academy-game-root .snap-qflash-modal {
  background: linear-gradient(135deg, #1a1a2e, #0f0f1a);
  border: 2px solid rgba(255,212,0,0.4); border-radius: 20px;
  padding: 28px 24px; max-width: 400px; width: 90%;
  text-align: center; animation: snapCardDrop 0.3s ease;
}
#academy-game-root .snap-qflash-title {
  font-size: 22px; font-weight: 900; margin-bottom: 12px;
  background: linear-gradient(135deg, #ffd400, #ff2d87);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
#academy-game-root .snap-qflash-card-label {
  font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 16px;
}
#academy-game-root .snap-qflash-question {
  font-size: 36px; font-weight: 900; color: #fff;
  margin-bottom: 16px; letter-spacing: 2px;
}
#academy-game-root .snap-qflash-timer-bar {
  width: 100%; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.1); margin-bottom: 16px; overflow: hidden;
}
#academy-game-root .snap-qflash-timer-fill {
  height: 100%; width: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #2ecc71, #ffd400);
  transition: width 0.1s linear;
}
#academy-game-root .snap-qflash-input {
  width: 100%; padding: 14px 16px; font-size: 24px; font-weight: 800;
  text-align: center; border-radius: 12px;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(0,229,255,0.4);
  color: #fff; outline: none; margin-bottom: 12px;
  font-family: inherit;
  -moz-appearance: textfield;
}
#academy-game-root .snap-qflash-input::-webkit-inner-spin-button,
#academy-game-root .snap-qflash-input::-webkit-outer-spin-button { -webkit-appearance: none; }
#academy-game-root .snap-qflash-input:focus {
  border-color: #00e5ff; box-shadow: 0 0 16px rgba(0,229,255,0.2);
}
#academy-game-root .snap-qflash-submit {
  width: 100%; margin-bottom: 12px;
}
#academy-game-root .snap-qflash-hint {
  font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.5;
}
#academy-game-root .snap-qflash-hint b { color: rgba(255,255,255,0.85); }

/* QFlash result */
#academy-game-root .snap-qflash-result {
  padding: 20px; border-radius: 14px;
  animation: snapCardDrop 0.3s ease;
}
#academy-game-root .snap-qflash-result-msg {
  font-size: 20px; font-weight: 900; margin-bottom: 8px;
}
#academy-game-root .snap-qflash-result-answer {
  font-size: 14px; color: rgba(255,255,255,0.5);
}
#academy-game-root .snap-qflash-result-fast { background: rgba(46,204,113,0.15); }
#academy-game-root .snap-qflash-result-fast .snap-qflash-result-msg { color: #2ecc71; }
#academy-game-root .snap-qflash-result-normal { background: rgba(0,229,255,0.1); }
#academy-game-root .snap-qflash-result-normal .snap-qflash-result-msg { color: #00e5ff; }
#academy-game-root .snap-qflash-result-slow { background: rgba(245,158,11,0.1); }
#academy-game-root .snap-qflash-result-slow .snap-qflash-result-msg { color: #f59e0b; }
#academy-game-root .snap-qflash-result-wrong { background: rgba(231,76,60,0.15); }
#academy-game-root .snap-qflash-result-wrong .snap-qflash-result-msg { color: #e74c3c; }
#academy-game-root .snap-qflash-result-timeout { background: rgba(255,255,255,0.05); }
#academy-game-root .snap-qflash-result-timeout .snap-qflash-result-msg { color: rgba(255,255,255,0.4); }

/* ========================================================================
   v3.78.0 — Factions ACA
   ======================================================================== */

/* Faction badge on cards */
#academy-game-root .snap-card-faction {
  position: absolute; top: 6px; left: 6px;
  font-size: 10px; width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Faction-colored card borders (subtle glow based on faction) */
/* v3.80.0 — Faction glow + enhanced borders */
#academy-game-root .snap-card[data-faction="recrues"] {
  border-color: rgba(255,45,135,0.35);
  box-shadow: 0 0 12px rgba(255,45,135,0.1), inset 0 0 8px rgba(255,45,135,0.03);
}
#academy-game-root .snap-card[data-faction="donjon"] {
  border-color: rgba(139,92,246,0.35);
  box-shadow: 0 0 12px rgba(139,92,246,0.1), inset 0 0 8px rgba(139,92,246,0.03);
}
#academy-game-root .snap-card[data-faction="pixels"] {
  border-color: rgba(16,185,129,0.35);
  box-shadow: 0 0 12px rgba(16,185,129,0.1), inset 0 0 8px rgba(16,185,129,0.03);
}
#academy-game-root .snap-card[data-faction="cosmiques"] {
  border-color: rgba(245,158,11,0.35);
  box-shadow: 0 0 12px rgba(245,158,11,0.1), inset 0 0 8px rgba(245,158,11,0.03);
}
/* Hover amplifies glow */
#academy-game-root .snap-card[data-faction="recrues"]:hover:not(.snap-card-disabled) {
  box-shadow: 0 0 20px rgba(255,45,135,0.25), 0 8px 24px rgba(255,45,135,0.15);
}
#academy-game-root .snap-card[data-faction="donjon"]:hover:not(.snap-card-disabled) {
  box-shadow: 0 0 20px rgba(139,92,246,0.25), 0 8px 24px rgba(139,92,246,0.15);
}
#academy-game-root .snap-card[data-faction="pixels"]:hover:not(.snap-card-disabled) {
  box-shadow: 0 0 20px rgba(16,185,129,0.25), 0 8px 24px rgba(16,185,129,0.15);
}
#academy-game-root .snap-card[data-faction="cosmiques"]:hover:not(.snap-card-disabled) {
  box-shadow: 0 0 20px rgba(245,158,11,0.25), 0 8px 24px rgba(245,158,11,0.15);
}

/* Faction section labels in collection */
#academy-game-root .snap-faction-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 6px; margin-left: 8px;
  color: rgba(255,255,255,0.8);
}

/* Legendary holographic shimmer */
#academy-game-root .snap-rarity-legendary {
  background: linear-gradient(135deg, rgba(255,212,0,0.06), rgba(168,85,247,0.06), rgba(255,45,135,0.06)) !important;
  animation: snapHoloShimmer 3s ease-in-out infinite;
}
@keyframes snapHoloShimmer {
  0%, 100% { border-color: rgba(255,212,0,0.5); box-shadow: 0 0 12px rgba(255,212,0,0.15); }
  33% { border-color: rgba(168,85,247,0.5); box-shadow: 0 0 12px rgba(168,85,247,0.15); }
  66% { border-color: rgba(255,45,135,0.5); box-shadow: 0 0 12px rgba(255,45,135,0.15); }
}

/* Epic glow */
#academy-game-root .snap-rarity-epic {
  animation: snapEpicGlow 2s ease-in-out infinite alternate;
}
@keyframes snapEpicGlow {
  from { box-shadow: 0 0 6px rgba(168,85,247,0.15); }
  to { box-shadow: 0 0 14px rgba(168,85,247,0.3); }
}

/* ========================================================================
   v3.78.0 — Starter Decks
   ======================================================================== */

#academy-game-root .snap-starter-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; margin: 16px 0;
}
#academy-game-root .snap-starter-card {
  padding: 16px; border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.15);
  transition: all 0.2s;
}
#academy-game-root .snap-starter-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
#academy-game-root .snap-starter-name {
  font-size: 18px; font-weight: 900; margin-bottom: 6px;
}
#academy-game-root .snap-starter-desc {
  font-size: 13px; color: rgba(255,255,255,0.6);
  margin-bottom: 10px; line-height: 1.4;
}
#academy-game-root .snap-starter-preview {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 12px;
}
#academy-game-root .snap-starter-chip {
  font-size: 11px; font-weight: 700; padding: 3px 8px;
  border-radius: 6px; background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
}
#academy-game-root .snap-starter-use {
  width: 100%; font-size: 14px;
}

/* ========================================================================
   v3.78.0 — Card Evolution Levels
   ======================================================================== */

/* Level stars */
#academy-game-root .snap-card-level {
  font-size: 10px; color: #ffd400; text-align: center;
  letter-spacing: 1px; margin: 2px 0;
}
#academy-game-root .snap-card-lvl-bonus {
  font-size: 10px; color: #2ecc71; font-weight: 700;
}

/* XP progress bar */
#academy-game-root .snap-card-xp-bar {
  width: 100%; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.08); margin: 3px 0; overflow: hidden;
}
#academy-game-root .snap-card-xp-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #00e5ff, #a855f7);
  transition: width 0.3s ease;
}
#academy-game-root .snap-card-xp-max .snap-card-xp-fill {
  background: linear-gradient(90deg, #ffd400, #ff2d87);
}

/* Level 2: shiny border */
#academy-game-root .snap-card-lv2 {
  border-color: rgba(0,229,255,0.4) !important;
  box-shadow: 0 0 8px rgba(0,229,255,0.12);
}

/* Level 3: idle animation */
#academy-game-root .snap-card-lv3 {
  border-color: rgba(168,85,247,0.5) !important;
  animation: snapCardLv3Pulse 2.5s ease-in-out infinite alternate;
}
@keyframes snapCardLv3Pulse {
  from { box-shadow: 0 0 6px rgba(168,85,247,0.15); }
  to { box-shadow: 0 0 14px rgba(168,85,247,0.35); }
}

/* Level 4: animated background */
#academy-game-root .snap-card-lv4 {
  border-color: rgba(255,212,0,0.5) !important;
  background: linear-gradient(135deg, rgba(255,212,0,0.06), rgba(168,85,247,0.06), rgba(0,229,255,0.06)) !important;
  animation: snapCardLv4BG 4s ease-in-out infinite;
}
@keyframes snapCardLv4BG {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Level 5: holographic rainbow */
#academy-game-root .snap-card-lv5 {
  background: linear-gradient(135deg, rgba(255,212,0,0.08), rgba(255,45,135,0.08), rgba(0,229,255,0.08), rgba(168,85,247,0.08)) !important;
  background-size: 300% 300%;
  animation: snapCardLv5Holo 3s ease-in-out infinite;
}
@keyframes snapCardLv5Holo {
  0% { background-position: 0% 0%; border-color: rgba(255,212,0,0.6); box-shadow: 0 0 16px rgba(255,212,0,0.2); }
  33% { background-position: 100% 0%; border-color: rgba(255,45,135,0.6); box-shadow: 0 0 16px rgba(255,45,135,0.2); }
  66% { background-position: 50% 100%; border-color: rgba(0,229,255,0.6); box-shadow: 0 0 16px rgba(0,229,255,0.2); }
  100% { background-position: 0% 0%; border-color: rgba(255,212,0,0.6); box-shadow: 0 0 16px rgba(255,212,0,0.2); }
}

/* ========================================================================
   v3.74.0 — Responsive adjustments
   ======================================================================== */
@media (max-width: 480px) {
  #academy-game-root .ttmc-breakdown-subject { flex: 0 0 100px; font-size: 11px; }
  #academy-game-root .ttmc-match-stats { grid-template-columns: 1fr; }
  #academy-game-root .aca-event-badge { font-size: 24px; }
  #academy-game-root .aca-event-title { font-size: 14px; }
  /* Snap mobile */
  #academy-game-root .snap-card { flex: 0 0 100px; padding: 8px; }
  #academy-game-root .snap-card-icon { font-size: 22px; }
  #academy-game-root .snap-card-desc { display: none; }
  #academy-game-root .snap-result-header { font-size: 24px; }
  #academy-game-root .snap-hand { gap: 6px; }
  #academy-game-root .snap-collection-deck { grid-template-columns: repeat(4, 1fr); }
  #academy-game-root .snap-collection-grid { grid-template-columns: repeat(3, 1fr); }
  #academy-game-root .snap-collection-card .snap-card-desc { display: none; }
  /* Zone mobile */
  #academy-game-root .snap-zone-icon { font-size: 18px; }
  #academy-game-root .snap-zone-name { font-size: 12px; }
  #academy-game-root .snap-zone-desc { font-size: 12px; }
  #academy-game-root .snap-action-row { flex-direction: column; }
  #academy-game-root .snap-retreat-btn { font-size: 12px; padding: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.80.0 — Conseil du Coach (Math Tips)
   ═══════════════════════════════════════════════════════════════════════════ */
#academy-game-root .bdt-tips-section { margin-top: 16px; }
#academy-game-root .bdt-tip-card {
  background: linear-gradient(135deg, rgba(0,229,255,0.06), rgba(46,204,113,0.08));
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 10px;
  animation: bdt-tip-fadeIn 0.4s ease;
}
#academy-game-root .bdt-tip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
#academy-game-root .bdt-tip-icon {
  font-size: 20px;
  line-height: 1;
}
#academy-game-root .bdt-tip-subject {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #00e5ff;
  background: rgba(0,229,255,0.1);
  padding: 2px 8px;
  border-radius: 4px;
}
#academy-game-root .bdt-tip-body {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
}
@keyframes bdt-tip-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ═══════════════════════════════════════════════════════════════════════════
   v3.80.0 — Polish Snap : animations cartes, zones, scores
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card played → slide-in from below into zone */
#academy-game-root .snap-card-slot.snap-card-just-played {
  animation: snapCardSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes snapCardSlideIn {
  0%   { opacity: 0; transform: translateY(30px) scale(0.8); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* Bot card played → slide-in from above */
#academy-game-root .snap-card-slot.snap-card-bot-played {
  animation: snapCardBotSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes snapCardBotSlideIn {
  0%   { opacity: 0; transform: translateY(-30px) scale(0.8); }
  60%  { opacity: 1; transform: translateY(4px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* Zone reveal — flip animation (replaces basic fade) */
#academy-game-root .snap-line-just-revealed {
  animation: snapZoneFlip 0.8s ease !important;
}
@keyframes snapZoneFlip {
  0%   { opacity: 0; transform: perspective(600px) rotateY(90deg) scale(0.9); }
  50%  { opacity: 0.7; transform: perspective(600px) rotateY(-10deg) scale(1.02); }
  100% { opacity: 1; transform: perspective(600px) rotateY(0) scale(1); }
}

/* Power score pulse when it changes */
#academy-game-root .snap-power-updated {
  animation: snapPowerPulse 0.5s ease;
}
@keyframes snapPowerPulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); color: #ffd400; }
  100% { transform: scale(1); }
}

/* Zone won/lost flash at end of match */
#academy-game-root .snap-line-won-flash {
  animation: snapLineWonFlash 0.6s ease;
}
@keyframes snapLineWonFlash {
  0%   { box-shadow: 0 0 0 0 rgba(46,204,113,0.4); }
  50%  { box-shadow: 0 0 20px 4px rgba(46,204,113,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}
#academy-game-root .snap-line-lost-flash {
  animation: snapLineLostFlash 0.6s ease;
}
@keyframes snapLineLostFlash {
  0%   { box-shadow: 0 0 0 0 rgba(231,76,60,0.4); }
  50%  { box-shadow: 0 0 20px 4px rgba(231,76,60,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); }
}

/* Snap button glow effect */
#academy-game-root .snap-co-btn {
  position: relative;
  overflow: hidden;
}
#academy-game-root .snap-co-btn::before {
  content: '';
  position: absolute; inset: -2px;
  background: linear-gradient(90deg, #ff2d87, #ffd400, #00e5ff, #a855f7, #ff2d87);
  background-size: 300% 100%;
  animation: snapBtnGlow 3s linear infinite;
  border-radius: inherit; z-index: -1;
  opacity: 0.4;
}
@keyframes snapBtnGlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Energy refill animation between turns */
#academy-game-root .snap-energy-refill {
  animation: snapEnergyRefill 0.6s ease;
}
@keyframes snapEnergyRefill {
  0%   { opacity: 0.5; transform: scale(0.95); }
  50%  { color: #ffd400; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

/* Turn indicator bounce */
#academy-game-root .snap-turn-label {
  transition: all 0.3s ease;
}
#academy-game-root .snap-turn-new {
  animation: snapTurnBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes snapTurnBounce {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Rarity shimmer for epic/legendary cards */
#academy-game-root .snap-rarity-epic {
  background: linear-gradient(135deg, rgba(168,85,247,0.08), rgba(255,255,255,0.06), rgba(168,85,247,0.06)) !important;
}
#academy-game-root .snap-rarity-legendary {
  background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(255,255,255,0.06), rgba(245,158,11,0.08)) !important;
  position: relative;
}
#academy-game-root .snap-rarity-legendary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,212,0,0.08) 50%, transparent 70%);
  background-size: 200% 200%;
  animation: snapLegendaryShimmer 3s ease-in-out infinite;
  border-radius: inherit;
  pointer-events: none;
}
@keyframes snapLegendaryShimmer {
  0%   { background-position: 200% 200%; }
  100% { background-position: -200% -200%; }
}

/* Retreat button subtle danger pulse */
#academy-game-root .snap-retreat-btn {
  transition: all 0.3s ease;
}
#academy-game-root .snap-retreat-btn:hover {
  background: rgba(231,76,60,0.15) !important;
  border-color: rgba(231,76,60,0.4) !important;
  color: #e74c3c !important;
}

/* Card in hand entrance stagger */
#academy-game-root .snap-hand .snap-card {
  animation: snapHandCardIn 0.3s ease both;
}
#academy-game-root .snap-hand .snap-card:nth-child(1) { animation-delay: 0ms; }
#academy-game-root .snap-hand .snap-card:nth-child(2) { animation-delay: 50ms; }
#academy-game-root .snap-hand .snap-card:nth-child(3) { animation-delay: 100ms; }
#academy-game-root .snap-hand .snap-card:nth-child(4) { animation-delay: 150ms; }
#academy-game-root .snap-hand .snap-card:nth-child(5) { animation-delay: 200ms; }
#academy-game-root .snap-hand .snap-card:nth-child(6) { animation-delay: 250ms; }
@keyframes snapHandCardIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Toast in-game (apparaît 1× quand pas de H5P dispo) */
#academy-game-root .bdt-tip-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,229,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,229,255,0.3);
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 20px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 999;
  pointer-events: none;
}
#academy-game-root .bdt-tip-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   v3.81.0 — Défi un ami (async, in-app). Tout scopé, gated par data-friend-challenges.
   ========================================================================== */

/* Bouton menu + badge de défis reçus */
#academy-game-root .aca-defi-menu-btn { position: relative; }
#academy-game-root .aca-defi-badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--bdt-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}

/* Bouton "Défier un ami" sur l'écran résultats */
#academy-game-root .aca-defi-btn {
  border: 2px solid var(--bdt-success) !important;
}

/* Écran "Mes défis" */
#academy-game-root .bdt-ch-section { margin-top: 18px; text-align: left; }
#academy-game-root .bdt-ch-section-title {
  font-weight: 800;
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 8px;
}
#academy-game-root .bdt-ch-list { display: flex; flex-direction: column; gap: 10px; }
#academy-game-root .bdt-ch-empty {
  opacity: 0.65;
  font-size: 14px;
  padding: 10px 4px;
}
#academy-game-root .bdt-ch-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--bdt-radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 210, 255, 0.25);
}
#academy-game-root .bdt-ch-card.done { border-color: rgba(245, 197, 24, 0.4); }
#academy-game-root .bdt-ch-card-main { flex: 1 1 220px; min-width: 0; }
#academy-game-root .bdt-ch-card-name { font-weight: 800; font-size: 15px; }
#academy-game-root .bdt-ch-card-meta { font-size: 13px; opacity: 0.8; margin-top: 3px; }
#academy-game-root .bdt-ch-card-actions { display: flex; gap: 8px; flex: 0 0 auto; }
#academy-game-root .bdt-ch-card-actions .bdt-btn { padding: 8px 14px; font-size: 14px; }

/* Modal "Défier un ami" */
#academy-game-root .bdt-modal-overlay.bdt-defi-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 10, 22, 0.78);
  backdrop-filter: blur(3px);
}
#academy-game-root .bdt-defi-modal {
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 22px;
  border-radius: var(--bdt-radius);
  background: var(--bdt-bg);
  border: 2px solid var(--bdt-primary);
  box-shadow: var(--bdt-shadow-glow);
  text-align: center;
}
#academy-game-root .bdt-defi-head { font-weight: 800; font-size: 20px; margin-bottom: 6px; }
#academy-game-root .bdt-defi-sub { font-size: 14px; opacity: 0.85; margin-bottom: 16px; }
#academy-game-root .bdt-defi-friends { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
#academy-game-root .bdt-defi-friend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--bdt-radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: var(--bdt-text);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
#academy-game-root .bdt-defi-friend:hover { transform: translateY(-1px); border-color: var(--bdt-success); }
#academy-game-root .bdt-defi-friend.sending { opacity: 0.55; cursor: default; }
#academy-game-root .bdt-defi-friend-lvl { font-size: 12px; opacity: 0.7; font-weight: 600; }
#academy-game-root .bdt-defi-empty { opacity: 0.7; font-size: 14px; padding: 8px; }
#academy-game-root .bdt-defi-sent {
  font-size: 15px;
  font-weight: 700;
  color: var(--bdt-success);
  padding: 10px;
}
#academy-game-root .bdt-defi-close { width: 100%; }

/* Bandeau comparaison sur l'écran résultats (défi relevé) */
#academy-game-root .bdt-challenge-compare {
  margin: 0 auto 16px;
  max-width: 360px;
  padding: 14px 16px;
  border-radius: var(--bdt-radius);
  background: linear-gradient(135deg, rgba(233, 69, 96, 0.18), rgba(0, 210, 255, 0.18));
  border: 1px solid rgba(0, 210, 255, 0.4);
  text-align: center;
}
#academy-game-root .bdt-cc-title { font-weight: 800; font-size: 15px; opacity: 0.9; margin-bottom: 8px; }
#academy-game-root .bdt-cc-scores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 16px;
}
#academy-game-root .bdt-cc-scores b { font-size: 22px; }
#academy-game-root .bdt-cc-vs { opacity: 0.6; font-size: 13px; }
#academy-game-root .bdt-cc-me b { color: var(--bdt-success); }
#academy-game-root .bdt-cc-them b { color: var(--bdt-energy); }
#academy-game-root .bdt-cc-verdict { margin-top: 8px; font-weight: 800; font-size: 16px; }

/* Message limite d'envoi (anti-spam) */
#academy-game-root .bdt-defi-ratemsg {
  background: rgba(245, 197, 24, 0.15);
  border: 1px solid rgba(245, 197, 24, 0.5);
  color: var(--bdt-energy);
  border-radius: var(--bdt-radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Invitation « façon Xbox » : carte qui glisse en haut à droite */
#academy-game-root .bdt-invite-pop {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 1100;
  transform: translateX(calc(100% + 24px));
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
#academy-game-root .bdt-invite-pop.show { transform: translateX(0); }
#academy-game-root .bdt-invite-card {
  pointer-events: auto;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 16px;
  border-radius: var(--bdt-radius);
  background: linear-gradient(135deg, #16213e, #0f3460);
  border: 2px solid var(--bdt-success);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 210, 255, 0.3);
  color: var(--bdt-text);
}
#academy-game-root .bdt-invite-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
  margin-bottom: 10px;
}
#academy-game-root .bdt-invite-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bdt-success);
  box-shadow: 0 0 8px var(--bdt-success);
  animation: bdtInviteBlink 1.4s infinite;
}
@keyframes bdtInviteBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
#academy-game-root .bdt-invite-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
#academy-game-root .bdt-invite-avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 210, 255, 0.4);
}
#academy-game-root .bdt-invite-info { min-width: 0; }
#academy-game-root .bdt-invite-name { font-weight: 800; font-size: 15px; }
#academy-game-root .bdt-invite-sub { font-size: 12px; opacity: 0.78; margin-top: 2px; }
#academy-game-root .bdt-invite-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#academy-game-root .bdt-invite-btn {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--bdt-radius-sm);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
#academy-game-root .bdt-invite-btn:active { transform: scale(0.97); }
#academy-game-root .bdt-invite-btn.go {
  background: linear-gradient(135deg, #00d2ff, #0f9bd1);
  color: #06222b;
  box-shadow: 0 4px 16px rgba(0, 210, 255, 0.4);
}
#academy-game-root .bdt-invite-btn.go:hover { box-shadow: 0 6px 22px rgba(0, 210, 255, 0.6); }
#academy-game-root .bdt-invite-btn.later {
  background: rgba(255, 255, 255, 0.06);
  color: var(--bdt-text);
  border-color: rgba(255, 255, 255, 0.25);
}
#academy-game-root .bdt-invite-btn.later:hover { border-color: var(--bdt-energy); color: var(--bdt-energy); }
#academy-game-root .bdt-invite-btn.no {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  padding: 7px;
  font-size: 13px;
  font-weight: 700;
}
#academy-game-root .bdt-invite-btn.no:hover { color: var(--bdt-primary); }

/* ==========================================================================
   v3.81.2 — Habillage « NASApunk » (signature de marque ACA) sur le Défi un ami.
   La DA (375783add59181bd8244c8d071bda1c7) prescrit le pop-art DARK pour l'UI
   enfant/jeu ; on garde donc la base sombre immersive et on ajoute la SIGNATURE
   de marque : bande tricolore (rouge/orange/or) + navy (couleur produit Arène).
   Bloc d'override (les règles plus bas l'emportent) → réversible facilement.
   ========================================================================== */
#academy-game-root {
  --aca-na-red: #C32136;
  --aca-na-orange: #DF5F35;
  --aca-na-gold: #D8A953;
  --aca-na-navy: #314B7A;
}
/* Bande tricolore signature en haut des surfaces Défi */
#academy-game-root .bdt-defi-modal,
#academy-game-root .bdt-invite-card,
#academy-game-root .bdt-challenge-compare { position: relative; overflow: hidden; }
#academy-game-root .bdt-defi-modal::before,
#academy-game-root .bdt-invite-card::before,
#academy-game-root .bdt-challenge-compare::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--aca-na-red) 0 33.33%,
    var(--aca-na-orange) 33.33% 66.66%,
    var(--aca-na-gold) 66.66% 100%);
}
/* Navy structurel (couleur produit Arène) sur les surfaces Défi */
#academy-game-root .bdt-defi-modal { border-color: var(--aca-na-navy); }
#academy-game-root .bdt-invite-card {
  background: linear-gradient(135deg, #1b2a47, #243a5e);
  border-color: var(--aca-na-navy);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(49, 75, 122, 0.5);
}
#academy-game-root .bdt-ch-card,
#academy-game-root .bdt-defi-friend { border-color: rgba(49, 75, 122, 0.55); }
#academy-game-root .bdt-defi-friend:hover { border-color: var(--aca-na-gold); }
#academy-game-root .bdt-ch-card.done { border-color: rgba(216, 169, 83, 0.6); }
/* Titres de section « façon manuel technique » : filet rouge à gauche */
#academy-game-root .bdt-ch-section-title { border-left: 3px solid var(--aca-na-red); padding-left: 10px; }
/* Actions primaires en rouge/orange brand (pop on-brand) */
#academy-game-root .bdt-invite-btn.go {
  background: linear-gradient(135deg, var(--aca-na-red), var(--aca-na-orange));
  color: #fff;
  box-shadow: 0 4px 16px rgba(195, 33, 54, 0.45);
}
#academy-game-root .bdt-invite-btn.go:hover { box-shadow: 0 6px 22px rgba(195, 33, 54, 0.65); }
#academy-game-root .bdt-invite-btn.later:hover { border-color: var(--aca-na-gold); color: var(--aca-na-gold); }
#academy-game-root .bdt-invite-avatar { border-color: rgba(216, 169, 83, 0.5); }
#academy-game-root .bdt-invite-dot { background: var(--aca-na-gold); box-shadow: 0 0 8px var(--aca-na-gold); }
#academy-game-root .aca-defi-btn { border-color: var(--aca-na-gold) !important; }
#academy-game-root .aca-defi-badge { background: var(--aca-na-red); box-shadow: 0 0 10px rgba(195, 33, 54, 0.6); }
/* Bandeau comparaison : accents navy / or / orange */
#academy-game-root .bdt-challenge-compare {
  background: linear-gradient(135deg, rgba(49, 75, 122, 0.28), rgba(195, 33, 54, 0.16));
  border-color: var(--aca-na-navy);
}
#academy-game-root .bdt-cc-me b { color: var(--aca-na-gold); }
#academy-game-root .bdt-cc-them b { color: var(--aca-na-orange); }

/* v3.9x (feedback Pat 2026-06-18) — Détail des rounds : ligne « exceptionnel »
   (réponse très rapide, roundResult 'perfect'). Look doré/cyan distinct du vert. */
#academy-game-root .bdt-recap-row.perfect {
  background: linear-gradient(90deg, rgba(0, 210, 255, 0.16), rgba(245, 197, 24, 0.14));
  border: 1px solid rgba(0, 210, 255, 0.45);
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.18);
}
#academy-game-root .bdt-recap-row.perfect .bdt-recap-icon { filter: drop-shadow(0 0 6px rgba(245, 197, 24, 0.7)); }
#academy-game-root .bdt-recap-row.perfect .bdt-recap-pts.pos { color: var(--bdt-success); font-weight: 900; }

/* =========================================================================
   v3.93.0 — Vague 1 audit UX (quick wins) : focus visible, btn-ghost,
   modal de confirmation maison, flash pédagogique TTMC, Abandonner 1v1,
   Reprendre partie Snap. Audit : specs/audit-ux-2026-07-16-plan.md
   ========================================================================= */

/* (A2) Focus visible : anneau cyan sur navigation clavier, partout.
   L'outline:none du .bdt-btn reste pour la souris ; :focus-visible prime. */
#academy-game-root button:focus-visible,
#academy-game-root a:focus-visible,
#academy-game-root [tabindex]:focus-visible,
.bdt-confirm-overlay button:focus-visible,
.bdt-help-modal-overlay button:focus-visible,
#bdt-help-fab:focus-visible {
  outline: 3px solid #00d2ff !important;
  outline-offset: 2px;
}

/* (C4) .bdt-btn-ghost — appelée par le JS (Collection, Decks de départ),
   n'était définie nulle part : boutons sans affordance, texte flottant. */
#academy-game-root .bdt-btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.22);
}
#academy-game-root .bdt-btn-ghost:hover {
  border-color: rgba(0, 210, 255, 0.6);
  color: #00d2ff;
  background: rgba(0, 210, 255, 0.08);
}

/* (N7) Modal de confirmation maison — même langage visuel que le modal
   d'aide. Monté sur <body> (hors #academy-game-root, qui est vidé par
   showScreen) → styles autonomes, aucune dépendance au .bdt-btn scopé. */
.bdt-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 26, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483001; /* au-dessus du FAB Sortir (2147483000) */
  padding: 20px;
  animation: bdtConfirmFadeIn 180ms ease-out;
}
@keyframes bdtConfirmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bdt-confirm-card {
  background: linear-gradient(180deg, #1f1f3a 0%, #14142b 100%);
  border: 2px solid rgba(255, 45, 135, 0.3);
  border-radius: 16px;
  padding: 26px 24px 22px;
  max-width: 420px;
  width: 100%;
  color: #fff;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: bdtConfirmCardIn 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes bdtConfirmCardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bdt-confirm-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
  font-family: inherit;
}
.bdt-confirm-text {
  margin: 0 0 20px;
  font-size: 15px;
  opacity: 0.85;
}
.bdt-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.bdt-confirm-overlay .bdt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 22px;
  min-height: 44px; /* cible tactile */
  border: 3px solid transparent;
  border-radius: 50px;
  cursor: pointer;
  background: transparent;
  color: #fff;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* L'option SÛRE (Continuer à jouer) = le gros bouton évident. */
.bdt-confirm-overlay .bdt-btn-primary {
  background: linear-gradient(135deg, #ff2d87, #d63851);
  border-color: #ff2d87;
  box-shadow: 0 4px 20px rgba(255, 45, 135, 0.35);
}
.bdt-confirm-overlay .bdt-btn-secondary {
  border-color: rgba(255, 255, 255, 0.3);
}
/* L'action destructive reste discrète (ghost rougeâtre). */
.bdt-confirm-overlay .bdt-confirm-danger {
  border-color: rgba(233, 69, 96, 0.55);
  color: #ff97a8;
}
.bdt-confirm-overlay .bdt-confirm-danger:hover {
  background: rgba(233, 69, 96, 0.12);
}

/* (C2) TTMC flash pédagogique : bonne réponse en vert (--aca-green),
   choix erroné en rouge. Keyframes à noms UNIQUES (audit : 3 @keyframes
   étaient déjà dupliqués dans ce fichier — on n'en rajoute pas). */
#academy-game-root .ttmc-answer.ttmc-answer-correct {
  background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
  border-color: #2ecc71 !important;
  color: #08130c !important;
  box-shadow: 0 0 18px rgba(46, 204, 113, 0.55);
  animation: bdtTtmcAnswerPop 0.35s ease;
}
#academy-game-root .ttmc-answer.ttmc-answer-wrong {
  background: rgba(233, 69, 96, 0.25) !important;
  border-color: #e94560 !important;
  color: #ff97a8 !important;
  animation: bdtTtmcAnswerShake 0.4s ease;
}
@keyframes bdtTtmcAnswerPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes bdtTtmcAnswerShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* (N5) Bouton Abandonner du 1v1 — coin haut-gauche, symétrique du mute. */
#academy-game-root .bdt-battle {
  position: relative;
}
#academy-game-root .bdt-battle-quit {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 12px;
  padding: 8px 14px;
  min-height: 40px;
  z-index: 5;
}

/* (N6) Reprendre la partie en cours depuis la Collection. */
#academy-game-root .snap-resume-btn {
  display: flex;
  margin: 0 auto 16px;
}

/* Réduction de mouvement : le modal de confirmation reste utilisable. */
@media (prefers-reduced-motion: reduce) {
  .bdt-confirm-overlay,
  .bdt-confirm-card,
  #academy-game-root .ttmc-answer.ttmc-answer-correct,
  #academy-game-root .ttmc-answer.ttmc-answer-wrong {
    animation: none !important;
  }
}

/* =========================================================================
   v3.94.0 — Vague 2 audit UX : menu vivant + carottes.
   Bande héros, grille aperçu, Mode du jour, micro-stats, bouton parlant,
   récompenses visibles partout, carotte XP, classement « Toi ».
   ========================================================================= */

/* (A1) Les cartes de mode sont maintenant de vrais <button> : reset UA. */
#academy-game-root button.aca-mode-card {
  font: inherit;
  color: inherit;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
}

/* (M1) Bande héros */
#academy-game-root .aca-hero-band {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  margin: 4px auto 10px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 2px solid rgba(255, 45, 135, 0.35);
  background: linear-gradient(135deg, rgba(255, 45, 135, 0.12), rgba(168, 85, 247, 0.10));
  flex-wrap: wrap;
}
#academy-game-root .aca-hero-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--aca-cyan, #00e5ff);
  flex-shrink: 0;
}
#academy-game-root .aca-hero-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: rgba(255, 255, 255, 0.08);
}
#academy-game-root .aca-hero-info { flex: 1; min-width: 180px; text-align: left; }
#academy-game-root .aca-hero-name {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}
#academy-game-root .aca-hero-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--aca-yellow, #ffd400);
  margin-top: 2px;
}
#academy-game-root .aca-hero-chips {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
#academy-game-root .aca-hero-chip {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
#academy-game-root .aca-hero-chip-level {
  background: rgba(0, 229, 255, 0.15);
  border-color: rgba(0, 229, 255, 0.45);
  color: var(--aca-cyan, #00e5ff);
}
#academy-game-root .aca-hero-xpbar { margin-top: 8px; }
#academy-game-root .aca-hero-xpbar-track,
#academy-game-root .bdt-xp-carrot-track {
  height: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
#academy-game-root .aca-hero-xpbar-fill,
#academy-game-root .bdt-xp-carrot-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--aca-cyan, #00e5ff), var(--aca-purple, #a855f7));
  transition: width 0.6s ease;
}
#academy-game-root .aca-hero-xpbar-label,
#academy-game-root .bdt-xp-carrot-label {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 4px;
}
#academy-game-root .aca-hero-daily {
  width: 100%;
  font-size: 13px;
  font-weight: 800;
  color: var(--aca-yellow, #ffd400);
  padding-top: 6px;
}

/* (M5) Grille aperçu (année pas choisie) */
#academy-game-root .aca-mode-card.aca-mode-preview {
  opacity: 0.75;
  cursor: default;
}

/* (M2) Badges NOUVEAU + Mode du jour */
#academy-game-root .aca-mode-card { position: relative; }
#academy-game-root .aca-mode-new-badge,
#academy-game-root .aca-mode-day-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 12px;
  z-index: 2;
}
#academy-game-root .aca-mode-new-badge {
  background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
  color: #fff;
}
#academy-game-root .aca-mode-day-badge {
  background: linear-gradient(135deg, var(--aca-yellow, #ffd400), #ff9f1a);
  color: #14142b;
}
#academy-game-root .aca-mode-card.aca-mode-of-day {
  border-color: rgba(255, 212, 0, 0.55);
  box-shadow: 0 0 14px rgba(255, 212, 0, 0.18);
}

/* (M7) Micro-chips + micro-stats des cartes */
#academy-game-root .aca-mode-meta {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
}
#academy-game-root .aca-mode-stats {
  font-size: 11px;
  font-weight: 800;
  color: var(--aca-cyan, #00e5ff);
  min-height: 14px;
}
#academy-game-root .aca-mode-stats-new { color: var(--aca-yellow, #ffd400); }

/* (M3) Bannière événement cliquable */
#academy-game-root .aca-special-event-banner.aca-event-clickable { cursor: pointer; }
#academy-game-root .aca-special-event-banner.aca-event-clickable:hover {
  filter: brightness(1.12);
}
#academy-game-root .aca-event-cta {
  display: inline-block;
  margin-left: 6px;
  font-weight: 900;
  color: var(--aca-cyan, #00e5ff);
}

/* (E2) Footer récompenses commun (TTMC, Course, Snap) */
#academy-game-root .bdt-rewards-footer {
  margin: 16px auto 4px;
  padding: 14px 16px;
  max-width: 460px;
  border-radius: 14px;
  border: 2px solid rgba(255, 212, 0, 0.35);
  background: rgba(255, 212, 0, 0.06);
  text-align: center;
}
#academy-game-root .bdt-rewards-footer-label {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--aca-yellow, #ffd400);
  margin-bottom: 8px;
}
#academy-game-root .bdt-rewards-footer-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
#academy-game-root .bdt-reward-chip {
  font-size: 13px;
  font-weight: 900;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
#academy-game-root .bdt-reward-chip.xp   { color: var(--aca-yellow, #ffd400); border-color: rgba(255, 212, 0, 0.5); }
#academy-game-root .bdt-reward-chip.gems { color: var(--aca-cyan, #00e5ff);  border-color: rgba(0, 229, 255, 0.5); }
#academy-game-root .bdt-reward-chip.bonus { color: var(--aca-green, #2ecc71); border-color: rgba(46, 204, 113, 0.5); }

/* (E5) Carotte XP */
#academy-game-root .bdt-xp-carrot { margin-top: 12px; }

/* (E4) Classement : ta ligne */
#academy-game-root .aca-lb-row.aca-lb-you {
  border: 2px solid var(--aca-cyan, #00e5ff);
  background: rgba(0, 229, 255, 0.08);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
}
#academy-game-root .aca-lb-notyou {
  margin: 12px auto 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

/* =========================================================================
   v3.96.0 — Mode démo (data-demo) + fix encadré H5P + bloc « me » classement.
   ========================================================================= */

/* ---- Mode démo : ruban haut + CTA d'inscription ---- */
.bdt-demo-ribbon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483002; /* au-dessus du FAB Sortir (…000) et des overlays */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #ff2d87 0%, #a855f7 100%);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.bdt-demo-ribbon-label { letter-spacing: 0.2px; }
.bdt-demo-ribbon-cta {
  background: #fff;
  color: #a4145f;
  padding: 5px 14px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 900;
  white-space: nowrap;
  transition: transform 0.15s ease;
}
.bdt-demo-ribbon-cta:hover { transform: scale(1.05); }

/* Le ruban pousse le contenu vers le bas (le root est full-bleed). */
#academy-game-root.bdt-demo-mode { padding-top: 44px; }
/* Sur la démo, le FAB « Sortir » n'a pas de site où retourner : on le masque
   (le CTA d'inscription est la seule sortie voulue). */
#bdt-demo-ribbon ~ #bdt-exit-fab { display: none; }

/* CTA d'inscription dans le menu (remplace Classement/Historique). */
#academy-game-root .aca-demo-cta { text-decoration: none; }

/* CTA d'inscription sous les récompenses (écran résultats). */
#academy-game-root .bdt-rewards-demo-cta {
  margin-top: 12px;
  text-align: center;
}
#academy-game-root .bdt-rewards-demo-text {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 8px;
}
#academy-game-root .bdt-rewards-demo-cta .bdt-btn { text-decoration: none; }

/* ---- Fix encadré H5P « Notions à revoir » : colonne d'actions ---- */
/* Combattre + Réviser regroupés dans la 3e cellule du grid (fini l'overlay
   absolute qui chevauchait le titre et la pastille Réviser). */
#academy-game-root .bdt-h5p-recap-card .bdt-h5p-recap-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  flex-shrink: 0;
}
/* Le bouton Combattre redevient un élément de flux (plus d'absolute). */
#academy-game-root .bdt-h5p-recap-card .bdt-h5p-recap-combat {
  position: static;
  top: auto;
  right: auto;
  text-align: center;
  white-space: nowrap;
}
/* Réviser : centré dans la colonne, largeur alignée sur Combattre. */
#academy-game-root .bdt-h5p-recap-card .bdt-h5p-recap-actions .bdt-h5p-recap-cta {
  text-align: center;
}
/* Petits écrans : la carte passe en pile verticale, actions en ligne. */
@media (max-width: 480px) {
  #academy-game-root .bdt-h5p-recap-card {
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon body" "actions actions";
    row-gap: 10px;
  }
  #academy-game-root .bdt-h5p-recap-card .bdt-h5p-recap-icon  { grid-area: icon; }
  #academy-game-root .bdt-h5p-recap-card .bdt-h5p-recap-body  { grid-area: body; }
  #academy-game-root .bdt-h5p-recap-card .bdt-h5p-recap-actions {
    grid-area: actions;
    flex-direction: row;
    justify-content: flex-end;
  }
  #academy-game-root .bdt-h5p-recap-card .bdt-h5p-recap-title { white-space: normal; }
}

/* ---- Classement : bloc « ⭐ Toi — #23 » (hors du top) ---- */
#academy-game-root .aca-lb-me-block {
  margin: 12px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid var(--aca-cyan, #00e5ff);
  background: rgba(0, 229, 255, 0.10);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
}
#academy-game-root .aca-lb-me-rank {
  font-weight: 900;
  color: var(--aca-cyan, #00e5ff);
  font-size: 15px;
}
#academy-game-root .aca-lb-me-gap {
  font-weight: 700;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================================================
   v3.98.0 — Démo accueil : variante COMPACTE + Défi de la semaine public.
   Verrouillé sous [data-demo-compact] ou .aca-defisem-* : zéro impact sur
   l'Arène plein écran connectée.
   ============================================================================ */

/* (a) Casse plein écran + full-bleed : le root redevient une carte bornée */
#academy-game-root[data-demo-compact] {
  min-height: 0; height: clamp(460px, 68vh, 640px); max-height: 640px;
  width: 100%; max-width: 100%; margin-left: 0; margin-right: 0;
  overflow-y: auto; overflow-x: hidden;
  justify-content: flex-start; padding-top: 12px;
  border-radius: 20px; contain: layout paint; -webkit-overflow-scrolling: touch;
}
#academy-game-root[data-demo-compact] * { max-width: 100%; }

/* (b) Ruban démo intégré au bloc (rapatrié dans le root par le JS) */
#academy-game-root[data-demo-compact] .bdt-demo-ribbon {
  position: static; z-index: 1; border-radius: 20px 20px 0 0; margin: -12px -16px 8px;
}

/* (c) FAB aide masqué en compact (le JS le skippe déjà) */
body.aca-arene-compact .bdt-help-fab { display: none; }

/* (d) Overlays plein écran internes bornés au bloc (root est position:relative) */
#academy-game-root[data-demo-compact] .bdt-results,
#academy-game-root[data-demo-compact] .bdt-confetti-container,
#academy-game-root[data-demo-compact] .bdt-countdown-overlay,
#academy-game-root[data-demo-compact] .bdt-fight-intro,
#academy-game-root[data-demo-compact] .bdt-course-countdown-overlay,
#academy-game-root[data-demo-compact] .ttmc-prison-banner-overlay,
#academy-game-root[data-demo-compact] .snap-qflash-overlay {
  position: absolute;
}

/* (e) Menu densifié à l'entrée */
#academy-game-root[data-demo-compact] .aca-menu { gap: 12px; padding: 6px 0; }
#academy-game-root[data-demo-compact] .aca-logo-big { width: 44px; height: 44px; }
#academy-game-root[data-demo-compact] .aca-menu-title { font-size: 19px; letter-spacing: 2px; }
#academy-game-root[data-demo-compact] .aca-modes { grid-template-columns: 1fr 1fr; max-width: 420px; gap: 10px; }

/* (f) Carte « Défi de la semaine » (menu). Scopé #academy-game-root pour BATTRE
   le reset conteneur `#academy-game-root * { margin:0;padding:0 }` (spécificité 1,0,0). */
#academy-game-root .aca-defisem-card {
  background: linear-gradient(135deg, rgba(255, 45, 135, 0.14), rgba(0, 229, 255, 0.12));
  border: 1px solid rgba(255, 45, 135, 0.5); border-radius: 16px;
  padding: 14px 16px; margin: 4px auto 8px; max-width: 420px; width: 100%;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
#academy-game-root .aca-defisem-badge { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--aca-pink, #ff2d87); }
#academy-game-root .aca-defisem-subject { font-size: 18px; font-weight: 800; margin-top: 2px; }
#academy-game-root .aca-defisem-goal { font-size: 15px; margin-top: 2px; }
#academy-game-root .aca-defisem-best { font-size: 13px; margin-top: 6px; color: var(--aca-yellow, #ffd400); font-weight: 700; }
#academy-game-root .aca-defisem-hint { font-size: 12px; margin-top: 6px; opacity: 0.75; }

/* (g) Barre d'issue post-partie (rewards footer). Scopé #academy-game-root (idem). */
#academy-game-root .aca-defisem-outcome { margin: 10px 0 6px; }
#academy-game-root .aca-defisem-outcome-label { font-size: 13px; font-weight: 800; margin-bottom: 4px; }
#academy-game-root .aca-defisem-progress { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
#academy-game-root .aca-defisem-progress-fill { height: 100%; width: 4%; border-radius: 6px; background: linear-gradient(90deg, var(--aca-pink, #ff2d87), var(--aca-cyan, #00e5ff)); transition: width 0.4s ease; }
#academy-game-root .aca-defisem-progress-label { font-size: 12px; margin-top: 4px; font-weight: 700; }

/* (h) Motion : anims non couvertes par les blocs existants */
@media (prefers-reduced-motion: reduce) {
  #academy-game-root[data-demo-compact] .aca-menu-title { animation: none; }
  #academy-game-root[data-demo-compact] .aca-menu { animation: none; }
  #academy-game-root .aca-defisem-progress-fill { transition: none; }
}

/* =========================================================================
   Vague 3 (lentille mouvement) : filet GLOBAL prefers-reduced-motion.

   Les blocs cibles plus haut ne couvrent qu une vingtaine de selecteurs sur
   pres de 100 @keyframes. Ici on neutralise tout le reste (halos qui pulsent
   en boucle, shimmers de cartes, sweeps d intro, confettis, transitions) pour
   les enfants sensibles au mouvement.

   Portee : #academy-game-root plus les 4 overlays que le JS monte directement
   dans document.body (aide, confirmation, banniere prison TTMC, compte a
   rebours de la Course), qui echappent donc au scope du root.

   Les animations PORTEUSES D INFORMATION sont re-autorisees plus bas. Elles
   sont montees puis demontees par un setTimeout JS : ramener leur duree a
   zero les rendrait invisibles et ferait perdre le message a l enfant
   (compte a rebours, revelation de zone, feedback de reponse, gain de points,
   bulle du coup de pouce). Elles sont re-declarees a l identique ; leur
   specificite (id + classe, ou 2 classes) passe devant le filet universel.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {

  /* 1) ANIMATIONS */
  #academy-game-root,
  #academy-game-root *,
  #academy-game-root *::before,
  #academy-game-root *::after,
  .bdt-exit-fab,
  .bdt-help-modal-overlay,
  .bdt-help-modal-overlay *,
  .bdt-confirm-overlay,
  .bdt-confirm-overlay *,
  .ttmc-prison-banner-overlay,
  .ttmc-prison-banner-overlay *,
  .bdt-course-countdown-overlay,
  .bdt-course-countdown-overlay * {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  /* 2) TRANSITIONS, avec une exclusion : #bdt-timer-bar, la barre de temps
     de la Bataille des Tables. Sa duree n est PAS dans cette feuille, elle
     est posee en style inline par le JS a chaque question
     (bar.style.transition = 'transform ' + seconds + 's linear'). Un
     !important auteur battant un style inline non-important, la barre se
     viderait d un coup des l affichage de la question. Or c est le SEUL
     indicateur du temps restant : il n y a aucun compte a rebours chiffre a
     l ecran, l intervalle JS ne fait que poser les classes warning/danger.
     L enfant croirait son temps ecoule alors que le chrono tourne encore.
     Mouvement essentiel a la comprehension, donc conserve. */
  #academy-game-root,
  #academy-game-root *:not(#bdt-timer-bar),
  #academy-game-root *::before,
  #academy-game-root *::after,
  .bdt-exit-fab,
  .bdt-help-modal-overlay,
  .bdt-help-modal-overlay *,
  .bdt-confirm-overlay,
  .bdt-confirm-overlay *,
  .ttmc-prison-banner-overlay,
  .ttmc-prison-banner-overlay *,
  .bdt-course-countdown-overlay,
  .bdt-course-countdown-overlay * {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  /* Exception : compte a rebours 3-2-1 de la Bataille des Tables.
     countdownPop finit a opacity 0 avec forwards ; a 0.01ms le chiffre
     n apparaitrait jamais. */
  #academy-game-root .bdt-countdown-number {
    animation: countdownPop 0.8s ease forwards !important;
  }

  /* Exception : compte a rebours 3-2-1-GO de la Course Academique. */
  .bdt-course-countdown-overlay .bdt-course-countdown-num {
    animation: bdtCountPulse 1s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
  }

  /* Exception : feedback de reponse (BRAVO / RATE). L element reste monte,
     c est le fadeOut qui le fait disparaitre. */
  #academy-game-root .bdt-feedback-text {
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), fadeOut 0.8s 0.5s ease forwards !important;
  }

  /* Exception : points qui montent (+XP). */
  #academy-game-root .bdt-float-text {
    animation: floatUp 1.2s ease forwards !important;
  }

  /* Exception : delta de score TTMC. */
  #academy-game-root .ttmc-delta-float {
    animation: ttmcDeltaFloat 1.4s ease-out forwards !important;
  }

  /* Exception : bulle du coup de pouce (retiree par setTimeout 2400 ms). */
  #academy-game-root .bdt-fifty-fifty-hint {
    animation: bdt-fifty-fifty-pop 2.4s ease forwards !important;
  }

  /* Exception : revelation de zone dans 1,2,3 Co!. */
  #academy-game-root .snap-line-just-revealed {
    animation: snapZoneFlip 0.8s ease !important;
  }
}