.improved-difficulty-select {
  background: rgb(255 255 255 / 0.92);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.07);
  padding: 14px 15px 10px 15px;
  margin: 0 auto 18px auto;
  max-width: 100%;
  width: 95%;
  text-align: center;
}

.improved-difficulty-select .difficulty-label {
  color: #1a237e;
  font-size: 1.13em;
  letter-spacing: 0.01em;
}

.improved-difficulty-select .difficulty-btn-row {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.improved-difficulty-select .difficulty-btn {
  border-radius: 24px;
  min-width: 90px;
  font-weight: 600;
  background: var(--button-bg, #e3e9fd);
  color: var(--button-text, #1a237e);
  border: none;
  transition:
    background 0.2s,
    color 0.2s;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.1);
  padding: 8px 16px;
}

.improved-difficulty-select .difficulty-btn.selected,
.improved-difficulty-select .difficulty-btn:focus {
  background: var(--primary-color, #3f51b5);
  color: var(--primary-text, #fff);
  /* outline: none; - supprimé pour accessibilité */
  position: relative;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
}

.improved-difficulty-select .difficulty-btn.selected::after {
  will-change: transform;
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--primary-color, #3f51b5);
  border-radius: 30px;
  animation: pulse 1.5s infinite;
  transform: translateX(0);
  box-sizing: content-box;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

.improved-difficulty-select .difficulty-btn:hover {
  background: #c5cae9;
  color: #1a237e;
}

.improved-difficulty-select .difficulty-selected-label {
  margin-left: 10px;
  font-weight: bold;
  color: #4caf50;
  font-size: 1em;
}

/* === Mobile touch optimisations (MultiInvaders & autres) === */
.arcade-canvas,
#arcade-canvas {
  /* Empêcher le double-tap zoom (Safari/iOS) et retarder le click */
  touch-action: none;
  /* Désactive les gestures par défaut pour une réactivité immédiate */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* MOBILE PORTRAIT - Corrections coordonnées */
@media (max-width: 600px) and (orientation: portrait) {
  /* Container principal */
  .arcade-container {
    padding: 16px 8px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Éviter débordement des cartes */
  .arcade-games-list {
    padding: 0;
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .arcade-game-card {
    max-width: calc(100% - 16px);
    width: calc(100% - 16px);
    margin: 10px auto;
    box-sizing: border-box;
  }

  /* Game UI - corrections douces */
  .arcade-game-ui {
    min-width: unset;
    max-width: 100%;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Canvas mobile portrait - sécurisé contre débordement */
  .arcade-canvas,
  .arcade-game-ui > canvas,
  #arcade-canvas,
  #multimiam-canvas {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    height: auto !important;
    max-height: 50vh !important;
    margin: 8px auto !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: hidden !important;
  }

  /* Affichage des opérations */
  .arcade-mult-display,
  #arcade-mult-display,
  #multimiam-mult-display {
    font-size: 1.8em;
    text-align: center;
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* Boutons responsive */
  .arcade-game-ui > button,
  #arcade-abandon-btn,
  #multimiam-abandon-btn {
    width: 90%;
    max-width: 280px;
    margin: 0 auto 12px auto;
    font-size: 1.2em;
    padding: 12px;
    display: block;
    box-sizing: border-box;
  }

  /* Conteneur d'interface de jeu - corrections supplémentaires */
  .arcade-game-ui {
    overflow: hidden auto !important;
  }

  /* Correction globale tous éléments arcade sur mobile */
  .arcade-container *,
  .arcade-game-ui *,
  .arcade-games-list * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Force override pour les jeux en cours sur mobile */
  body.game-active .arcade-game-ui,
  .slide.active-slide .arcade-game-ui,
  #slide4 .arcade-game-ui {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 8px !important;
  }
}

/* MOBILE PAYSAGE - Optimisé et sécurisé */
@media (max-width: 896px) and (orientation: landscape) {
  /* Container principal paysage */
  .arcade-container {
    padding: 8px;
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Game UI en paysage - layout horizontal */
  .arcade-game-ui {
    min-width: unset;
    max-width: 100%;
    width: 100%;
    padding: 4px;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 90vh;
    overflow: hidden;
  }

  /* Canvas paysage - carré optimal sécurisé */
  .arcade-canvas,
  .arcade-game-ui > canvas,
  #arcade-canvas,
  #multimiam-canvas {
    width: 65vh;
    max-width: 65vh;
    height: 65vh;
    max-height: 65vh;
    margin: 0;
    padding: 6px;
    box-sizing: border-box;
    aspect-ratio: 1;
    object-fit: contain;
  }

  /* Panneau de contrôles à droite - largeur calculée sécurisée */
  .arcade-controls-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: calc(100vw - 65vh - 24px);
    max-width: calc(100vw - 65vh - 24px);
    padding: 8px 6px;
    gap: 8px;
    overflow-y: auto;
    max-height: 80vh;
    box-sizing: border-box;
  }

  /* Affichage opérations en paysage */
  .arcade-mult-display,
  #arcade-mult-display,
  #multimiam-mult-display {
    font-size: 1.3em;
    text-align: center;
    width: 100%;
    margin: 0 auto 6px auto;
    padding: 4px 6px;
    box-sizing: border-box;
  }

  /* Boutons paysage */
  .arcade-game-ui > button,
  #arcade-abandon-btn,
  #multimiam-abandon-btn {
    width: 100%;
    max-width: 180px;
    margin: 0 auto 6px auto;
    font-size: 0.9em;
    padding: 8px;
    display: block;
    box-sizing: border-box;
  }

  /* Bars d'info compactes */
  .arcade-info-bar {
    flex-direction: column;
    gap: 3px;
    font-size: 0.85em;
    width: 100%;
    box-sizing: border-box;
  }

  .arcade-score-bar {
    flex-direction: row;
    gap: 8px;
    font-size: 0.9em;
    padding: 3px 6px;
    width: 100%;
    box-sizing: border-box;
  }
}

.arcade-dev-banner {
  background: rgb(255 255 255 / 0.85);
  color: #222;
  font-weight: bold;
  text-align: center;
  padding: 12px 24px;
  border-radius: 14px;
  margin: 18px auto 24px auto;
  max-width: 700px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.1);
  letter-spacing: 0.01em;
  font-size: 1.08em;
  border: 1px solid #eee;
}

body.night .arcade-dev-banner,
[data-theme='dark'] .arcade-dev-banner {
  background: rgb(255 255 255 / 0.85);
  color: #111;
  border: 1px solid #444;
}

#multisnake-canvas {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;
  max-height: 600px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Supprimé - fusionné dans le bloc consolidé @media (max-width: 600px) ligne ~80 */
.arcade-container {
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
  padding: 16px;
  text-align: center;
}

/* Supprimé - définition dupliquée, voir ligne ~268 pour la version complète */
.arcade-game-ui > canvas {
  background: #181818;
  border-radius: 22px;
  box-shadow:
    0 4px 32px rgb(0 0 0 / 0.28),
    0 0 0 4px #ffe066;
  border: 2px solid #fffbe6;
  padding: 18px;
  margin: 18px auto;
  display: block;
  max-width: 100%;
  height: auto;
}

.arcade-icon {
  font-size: 2.2em;
  margin-right: 8px;
}

.arcade-intro {
  font-size: 1.1em;
  margin-bottom: 24px;
  color: var(--neutral-dark, #444);
  background: rgb(255 255 255 / 0.85);
  border-radius: 16px;
  padding: 12px 32px;
  display: inline-block;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.12);
}

.arcade-games-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  margin: 24px auto;
  max-width: 800px;
}

/* Espacement géré par gap du grid/flex parent */
.arcade-game-card {
  background: rgb(0 0 0 / 0.7);
  /* Restauré la transparence des cartes */
  border-radius: 18px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.12);
  padding: 24px 32px;
  min-width: 320px;
  width: 90%;
  max-width: 600px;
  min-height: 400px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transition:
    transform 0.2s,
    max-height 0.3s ease;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: visible;
}

/* Supprimé - effet hover dupliqué, voir version plus complète ligne ~908 */
.game-thumb {
  font-size: 3em;
  margin-bottom: 8px;
}

.game-title {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 4px;
}

.game-desc {
  font-size: 0.95em;
  line-height: 1.4;
  margin-bottom: 16px;
  width: 90%;
  padding: 12px 15px;
  min-height: 120px;
  max-height: 120px;
  display: block;
  /* éviter le centrage vertical qui coupe le début du texte */
  text-align: center;
  overflow: hidden;
  background: rgb(255 255 255 / 0.85);
  border-radius: 12px;
  color: #222;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
}

.play-arcade-btn {
  font-size: 1.2em;
  padding: 12px 30px;
  border-radius: 14px;
  background: var(--primary-color, #4caf50);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.08);
  transition: background 0.2s;
}

.play-arcade-btn:hover {
  background: var(--primary-color-dark, #388e3c);
}

/* Desktop par défaut */
@media (min-width: 768px) {
  .arcade-game-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 650px;
    max-width: 1220px;
    min-height: 420px;
    padding: 24px 0;
    margin: 0 auto;
    gap: 16px;
  }

  /* Assurer que les éléments de score restent visibles sur desktop */
  .arcade-mult-display {
    position: relative;
    z-index: 10;
    margin-bottom: 16px;
    flex-shrink: 0;
  }
}

/* Base mobile first pour game UI */
.arcade-game-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 16px 8px;
  margin: 0 auto;
  gap: 12px;
  box-sizing: border-box;
}

/* Canvas par défaut - mobile first */
.arcade-canvas,
#arcade-canvas,
#multimiam-canvas {
  border: 2px solid #fff;
  background: #000;
  border-radius: 12px;
  margin-bottom: 12px;
  width: calc(100% - 16px);
  max-width: calc(100% - 16px);
  height: auto;
  max-height: 60vh;
  box-sizing: border-box;
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Canvas desktop */
@media (min-width: 768px) {
  .arcade-canvas,
  #arcade-canvas,
  #multimiam-canvas {
    width: auto;
    max-width: 100%;
    max-height: 65vh;
  }
}

#arcade-mobile-controls {
  display: none;
  margin-bottom: 10px;
}

#arcade-shoot-btn {
  padding: 15px 30px;
  font-size: 18px;
  background: #ff6b6b;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgb(0 0 0 / 0.1);
  color: #fff;
}

.arcade-info-bar {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  margin-bottom: 8px;
}

#arcade-question {
  font-weight: bold;
  color: var(--primary-color, #4caf50);
  font-size: 1.2em;
}

.arcade-gameover {
  text-align: center;
  margin-top: 40px;
}

.arcade-final-score {
  font-size: 1.4em;
  margin: 18px 0 28px 0;
}

.arcade-final-score-bg {
  background: rgb(255 255 255 / 0.92);
  border-radius: 18px;
  padding: 12px 32px;
  font-size: 1.5em;
  color: #222;
  font-weight: bold;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.1);
  display: inline-block;
}

.arcade-mult-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.arcade-mult-display {
  font-size: 2.2em;
  font-weight: bold;
  color: #fff;
  background: rgb(44 62 80 / 0.85);
  border-radius: 18px;
  padding: 10px 30px;
  margin: 0 auto 10px auto;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.18);
  letter-spacing: 2px;
  text-align: center;
  min-width: 320px;
  max-width: 90vw;
  /* Sticky retiré (provoquait chevauchement du canvas). Le focus preventScroll suffit. */
}

.arcade-score-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  font-size: 1.4em;
  font-weight: bold;
  color: #fff;
  background: rgb(44 62 80 / 0.7);
  border-radius: 12px;
  padding: 8px 32px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
}

.arcade-next-round {
  margin-top: 18px;
  font-size: 1.1em;
  color: #4caf50;
  font-weight: bold;
}

.game-extra {
  display: block;
}

/* Supprimé - règles basiques collapsed/expanded, voir versions plus complètes ligne ~823+ */
/* Duplicate collapsed/expanded block removed (kept later occurrence) */
/* Taille intermédiaire entre desktop et tablet */
@media (min-width: 768px) and (max-width: 900px) {
  .arcade-games-list {
    padding: 0 20px;
    /* Moins de padding pour éviter overflow */
    max-width: 100%;
  }

  .arcade-game-card {
    min-width: 280px;
    max-width: calc(50% - 15px);
    /* Force la largeur à 50% moins le gap */
  }
}

/* Mobile/petit écran - corrections complètes */
@media (max-width: 767px) {
  /* Container principal mobile - réduire padding */
  .arcade-container {
    padding: 16px 8px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Games list responsive - éviter débordement */
  .arcade-games-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .arcade-game-card {
    min-width: 180px;
    max-width: calc(100% - 16px);
    width: calc(100% - 16px);
    margin: 8px auto;
    box-sizing: border-box;
  }

  /* Canvas responsive */
  #arcade-canvas {
    width: calc(100% - 16px);
    height: auto;
    max-width: calc(100% - 16px);
    max-height: 60vh;
    margin: 8px auto;
    box-sizing: border-box;
  }

  #arcade-mobile-controls {
    display: block;
  }

  .arcade-info-bar {
    flex-direction: column;
    gap: 10px;
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    margin: 0 auto;
    box-sizing: border-box;
  }
}

@media (min-width: 768px) {
  .arcade-games-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 20px;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    align-items: start;
    box-sizing: border-box;
  }

  .arcade-game-card {
    margin-top: 0;
    height: auto;
    min-width: 300px;
    max-width: 100%;
    width: 100%;
    min-height: 450px;
    box-sizing: border-box;
  }

  .arcade-game-card.collapsed {
    max-height: none;
    min-height: auto;
    display: flex;
  }

  .arcade-game-card.expanded {
    max-height: none;
  }
}

/* Très grande taille d'écran */
@media (min-width: 1200px) {
  .arcade-games-list {
    gap: 30px;
    padding: 0 40px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .arcade-game-card {
    min-width: 400px;
    max-width: 100%;
    width: 100%;
    min-height: 480px;
    padding: 30px 40px;
    box-sizing: border-box;
  }
}

/* Taille desktop standard */
@media (min-width: 901px) and (max-width: 1199px) {
  .arcade-games-list {
    gap: 20px;
    padding: 0 30px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .arcade-game-card {
    min-width: 300px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  .arcade-game-card.collapsed {
    max-height: 450px;
  }

  .arcade-game-card.expanded {
    max-height: 1000px;
  }
}

/* Changé de 768px à 767px pour cohérence - règles fusionnées dans les blocs 767px */
@media (max-width: 767px) {
  .arcade-mult-display {
    font-size: 1em;
    padding: 6px 2vw;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .arcade-mobile-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .arcade-mobile-top .game-stat-display {
    min-width: 60px;
    text-align: left;
    font-size: 1em;
  }

  .arcade-mobile-top .arcade-question {
    flex: 1;
    margin: 0 auto;
    display: block;
    text-align: center;
    font-size: 1.1em;
  }

  .arcade-mult-display .game-stat-display {
    font-size: 1em;
    min-width: 36px;
  }

  .arcade-mult-display .arcade-question {
    margin: 0 8px;
  }

  .arcade-mult-display .arcade-mobile-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 12px;
    margin-top: 2px;
  }

  .arcade-mult-display #arcade-info-timer,
  .arcade-mult-display #arcade-info-lives {
    min-width: 60px;
    flex: 1;
    text-align: center;
  }
}

#arcade-mult-display .arcade-mobile-bottom {
  justify-content: center;
}

#arcade-mult-display .arcade-mobile-bottom .game-stat-display {
  flex: 0 0 auto;
  margin: 0 8px;
  text-align: center;
}

#arcade-mult-display .arcade-mobile-bottom .arcade-question-placeholder {
  display: none;
}

.arcade-controls-help {
  background: rgb(255 255 255 / 0.85);
  border-radius: 16px;
  padding: 14px 20px;
  margin: 0 auto 18px auto;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.08);
  max-width: 100%;
  width: 95%;
  font-size: 1.1em;
  color: #222;
  text-align: center;
}

.arcade-controls-help ul {
  margin: 8px 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.arcade-controls-help li {
  margin-bottom: 8px;
  padding: 0;
  text-align: center;
}

/* Styles déjà définis dans .game-desc et .game-title globaux */
.arcade-container-wide {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 40px;
  box-sizing: border-box;
  overflow-x: hidden;
  /* Empêche le débordement horizontal */
}

/* Assure que le content-card parent gère bien l'overflow arcade */
.content-card:has(.arcade-container-wide) {
  overflow-x: hidden !important;
}

@media (max-width: 700px) {
  .arcade-container-wide {
    max-width: 98vw;
    padding: 16px 2vw;
  }
}

.spaceship-label {
  color: #fff;
  font-weight: bold;
  text-shadow:
    0 1px 4px #222,
    0 0 2px #000;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.spaceship-select-title {
  color: #fff;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 10px;
  text-shadow:
    0 1px 4px #222,
    0 0 2px #000;
}

.arcade-top-scores {
  background: rgb(255 255 255 / 0.92);
  border-radius: 16px;
  padding: 16px 32px 10px 32px;
  margin: 18px auto 18px auto;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.1);
  color: #222;
  max-width: 340px;
  font-size: 1.1em;
}

.arcade-top-scores ol {
  margin: 0 0 0 18px;
  padding: 0;
  color: #222;
}

/* Supprimé - fusionné dans le bloc consolidé @media (max-width: 600px) ligne ~80 */
/* Toutes les cartes ont maintenant la même taille de base */
.arcade-game-card .improved-difficulty-select,
.arcade-game-card .spaceship-select-block,
.arcade-game-card .arcade-controls-help {
  background-color: rgb(0 0 0 / 0.6);
  border-radius: 12px;
  padding: 15px 20px;
  margin: 15px auto;
  width: 95%;
  max-width: 100%;
  border: 1px solid rgb(255 255 255 / 0.2);
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.3);
  text-align: center;
}

.arcade-game-card .play-arcade-btn {
  display: block;
  margin: 15px auto;
  padding: 10px 20px;
  width: auto;
  min-width: 150px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1.1em;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.arcade-game-card .play-arcade-btn:hover {
  background-color: #45a049;
}

.arcade-game-card .difficulty-btn {
  padding: 8px 15px;
  margin: 0 5px;
  border-radius: 20px;
  font-size: 1em;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #f0f0f0;
  color: #333;
}

.arcade-game-card .difficulty-btn[data-level='debutant'] {
  background-color: #8bc34a;
  color: #333;
}

.arcade-game-card .difficulty-btn[data-level='moyen'] {
  background-color: #ffc107;
  color: #333;
}

.arcade-game-card .difficulty-btn[data-level='difficile'] {
  background-color: #ff5722;
  color: white;
}

.arcade-game-card .difficulty-btn.selected {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgb(255 255 255 / 0.3);
  font-weight: bold;
  outline: 2px solid white;
}

.arcade-game-card .difficulty-label {
  color: white;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 10px;
  text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5);
  text-align: center;
}

.arcade-game-card .arcade-controls-help {
  color: white;
  font-size: 0.9em;
  text-align: center;
}

.arcade-game-card .arcade-controls-help strong {
  color: #ffc107;
  font-weight: bold;
}

.arcade-game-card .arcade-controls-help ul {
  margin: 8px 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}

.arcade-game-card .arcade-controls-help li {
  margin-bottom: 8px;
  padding: 0;
  position: relative;
  line-height: 1.4;
  text-align: center;
}

.arcade-game-card .arcade-controls-help li::before {
  content: '🎮 ';
  color: #4caf50;
  font-size: 1em;
}

.arcade-game-card .spaceship-select-title {
  color: white;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 10px;
  text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5);
  text-align: center;
}

.arcade-game-card .spaceship-select-block {
  background-color: rgb(0 0 0 / 0.6);
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 10px;
  padding: 15px 10px;
}

.arcade-game-card .spaceship-select-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.arcade-game-card .spaceship-option {
  position: relative;
  cursor: pointer;
  display: inline-block;
  margin: 8px;
}

.arcade-game-card .spaceship-option input[type='radio'] {
  position: absolute;
  opacity: 0;
}

.arcade-game-card .spaceship-option .spaceship-thumb {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border: 3px solid transparent;
  border-radius: 50%;
  padding: 5px;
  background-color: rgb(255 255 255 / 0.1);
  transition:
    transform 0.2s,
    border-color 0.2s;
}

.arcade-game-card .spaceship-option input[type='radio']:checked + .spaceship-thumb {
  border-color: #4caf50;
  transform: scale(1.1);
  background-color: rgb(255 255 255 / 0.3);
}

.arcade-game-card .spaceship-option:hover .spaceship-thumb {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgb(255 255 255 / 0.5);
}

/* Description style défini dans .game-desc global */
/* Toutes les cartes expanded ont la même taille */
.arcade-game-card.expanded {
  min-height: 650px;
  max-height: none;
  height: auto;
  transition: min-height 0.3s ease-in-out;
}

/* Sélecteurs plus spécifiques pour éviter !important */
.arcade-games-list .arcade-game-card.collapsed .improved-difficulty-select,
.arcade-games-list .arcade-game-card.collapsed .spaceship-select-block,
.arcade-games-list .arcade-game-card.collapsed .play-arcade-btn,
.arcade-games-list .arcade-game-card.collapsed .arcade-controls-help {
  visibility: hidden;
  opacity: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  transition:
    opacity 0.3s,
    visibility 0.3s,
    height 0.3s;
}

/* Les descriptions restent TOUJOURS visibles - sélecteur plus spécifique */
.arcade-games-list .arcade-game-card.collapsed .game-desc {
  visibility: visible;
  opacity: 1;
  height: auto;
  overflow: hidden;
  margin: 10px auto 15px auto;
  padding: 12px 15px;
}

/* En mode déplié, afficher l'intégralité de la description (desktop et mobile) */
.arcade-game-card.expanded .game-desc {
  max-height: none;
  min-height: auto;
  overflow: visible;
  display: block;
}

/* Sur mobile : descriptions collapsed avec ellipsis */
@media (max-width: 767px) {
  /* Descriptions plus compactes sur mobile */
  .game-desc {
    min-height: calc(8px + 8px + 3 * 1.3em) !important;
    max-height: calc(8px + 8px + 3 * 1.3em) !important;
    font-size: 0.9em !important;
    line-height: 1.3 !important;
    padding: 8px 12px !important;
  }

  .arcade-game-card.collapsed .game-desc {
    /* Hauteur calculée précisément : padding + 3 lignes exactes */
    max-height: calc(8px + 8px + 3 * 1.3em) !important;
    min-height: calc(8px + 8px + 3 * 1.3em) !important;
    overflow: hidden !important;
    position: relative;
    line-height: 1.3 !important;
    /* Ellipsis CSS pour texte multi-lignes */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  /* Descriptions expanded : taille complète */
  .arcade-game-card.expanded .game-desc {
    max-height: none !important;
    min-height: auto !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    height: auto !important;
  }
}

.arcade-game-card.expanded .improved-difficulty-select,
.arcade-game-card.expanded .spaceship-select-block,
.arcade-game-card.expanded .play-arcade-btn,
.arcade-game-card.expanded .arcade-controls-help {
  visibility: visible !important;
  opacity: 1;
  height: auto;
  overflow: visible;
  margin-bottom: 12px;
  padding: inherit;
  transition:
    opacity 0.3s,
    visibility 0.3s,
    height 0.3s;
  z-index: 10;
}

/* Toutes les descriptions utilisent maintenant le style global uniforme */
body.night .arcade-game-card {
  background: rgb(20 20 30 / 0.85);
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.3);
}

.arcade-game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgb(0 0 0 / 0.25);
  transition: all 0.3s ease-in-out;
}

/* Supprimé - redéfinition inutile du background, déjà défini dans la règle principale */
.play-arcade-btn {
  font-size: 1.1em;
  padding: 10px 28px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.08);
}