/*
  ChillGame — Game Shell commun
  Objectif : rapprocher toutes les pages de jeu du design Démineur
  sans casser les CSS spécifiques des plateaux.
*/

/* Conteneur principal des jeux */
:where(
  .demineur-page,
  .domino-page,
  .battleship-page,
  .blackjack-wrap,
  .memory-wrap,
  .morpion-wrap,
  .logic-page,
  .anagram-page,
  .speed-page,
  .mastermind-page,
  .wordsearch-page,
  .pendu-page,
  .petitbac-page,
  .rps-page,
  .sequence-page,
  .switch-page,
  .roulette-wrap,
  .reversi-wrap,
  .simon-wrap
) {
  display: grid;
  gap: 22px;
  padding-bottom: 34px;
}

/* Hero commun */
:where(
  .demineur-hero,
  .domino-hero,
  .battleship-hero,
  .logic-hero,
  .anagram-hero,
  .speed-hero,
  .mastermind-hero,
  .wordsearch-hero,
  .pendu-hero,
  .petitbac-hero,
  .rps-hero,
  .sequence-hero,
  .switch-hero
) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: stretch;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.55), transparent 28%),
    linear-gradient(135deg, #7ed6df 0%, #ffd32a 55%, #ff9ff3 100%);
  border: 4px solid var(--line);
  border-radius: 26px;
  box-shadow: 7px 7px 0 var(--line);
  padding: 24px;
  overflow: hidden;
  position: relative;
}

/* Motif discret premium */
:where(
  .demineur-hero,
  .domino-hero,
  .battleship-hero,
  .logic-hero,
  .anagram-hero,
  .speed-hero,
  .mastermind-hero,
  .wordsearch-hero,
  .pendu-hero,
  .petitbac-hero,
  .rps-hero,
  .sequence-hero,
  .switch-hero
)::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#111 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .06;
  pointer-events: none;
}

:where(
  .demineur-hero,
  .domino-hero,
  .battleship-hero,
  .logic-hero,
  .anagram-hero,
  .speed-hero,
  .mastermind-hero,
  .wordsearch-hero,
  .pendu-hero,
  .petitbac-hero,
  .rps-hero,
  .sequence-hero,
  .switch-hero
) > * {
  position: relative;
  z-index: 1;
}

/* Titres */
:where(
  .demineur-hero,
  .domino-hero,
  .battleship-hero,
  .logic-hero,
  .anagram-hero,
  .speed-hero,
  .mastermind-hero,
  .wordsearch-hero,
  .pendu-hero,
  .petitbac-hero,
  .rps-hero,
  .sequence-hero,
  .switch-hero
) h2 {
  margin: 0 0 10px !important;
  font-size: clamp(2.4rem, 6vw, 4.8rem) !important;
  line-height: .9;
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: -1.5px;
}

:where(
  .demineur-hero,
  .domino-hero,
  .battleship-hero,
  .logic-hero,
  .anagram-hero,
  .speed-hero,
  .mastermind-hero,
  .wordsearch-hero,
  .pendu-hero,
  .petitbac-hero,
  .rps-hero,
  .sequence-hero,
  .switch-hero
) p {
  margin: 0 !important;
  max-width: 760px;
  font-weight: 850;
  line-height: 1.5;
  color: #111827;
}

/* Badges kicker */
:where(
  .demineur-kicker,
  .domino-kicker,
  .logic-kicker,
  .anagram-kicker,
  .speed-kicker,
  .mastermind-kicker,
  .wordsearch-kicker,
  .pendu-kicker,
  .petitbac-kicker,
  .rps-kicker,
  .sequence-kicker,
  .switch-kicker
) {
  display: inline-flex !important;
  width: max-content;
  background: #ffd32a !important;
  border: 3px solid var(--line);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--line);
  padding: 7px 12px;
  font-weight: 950;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #111827;
}

/* Cartes statut / règles à droite du hero */
:where(
  .demineur-score-card,
  .domino-status-card,
  .logic-rules,
  .anagram-rules-card,
  .speed-rules-card,
  .mastermind-rules-card,
  .wordsearch-rules-card,
  .pendu-rules-card,
  .petitbac-rules-card,
  .rps-rules-card,
  .sequence-status-card,
  .switch-status-card
) {
  background: #fff !important;
  border: 4px solid var(--line);
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--line);
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 8px;
  color: #111827;
}

:where(
  .demineur-score-card,
  .domino-status-card,
  .logic-rules,
  .anagram-rules-card,
  .speed-rules-card,
  .mastermind-rules-card,
  .wordsearch-rules-card,
  .pendu-rules-card,
  .petitbac-rules-card,
  .rps-rules-card,
  .sequence-status-card,
  .switch-status-card
) strong {
  font-size: 1.55rem;
  font-weight: 950;
  text-transform: uppercase;
}

:where(
  .demineur-score-card,
  .domino-status-card,
  .logic-rules,
  .anagram-rules-card,
  .speed-rules-card,
  .mastermind-rules-card,
  .wordsearch-rules-card,
  .pendu-rules-card,
  .petitbac-rules-card,
  .rps-rules-card,
  .sequence-status-card,
  .switch-status-card
) span {
  font-weight: 850;
}

/* Barres d’action */
:where(
  .demineur-toolbar,
  .domino-toolbar,
  .battleship-toolbar,
  .logic-toolbar,
  .anagram-actions,
  .speed-actions,
  .mastermind-actions,
  .wordsearch-actions,
  .pendu-actions,
  .petitbac-actions,
  .rps-actions,
  .sequence-toolbar,
  .switch-toolbar,
  .morpion-actions,
  .blackjack-setup,
  .memory-setup
) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 4px solid var(--line);
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--line);
  padding: 14px;
}

/* Boutons communs */
:where(
  .demineur-toolbar,
  .domino-toolbar,
  .battleship-toolbar,
  .logic-toolbar,
  .anagram-actions,
  .speed-actions,
  .mastermind-actions,
  .wordsearch-actions,
  .pendu-actions,
  .petitbac-actions,
  .rps-actions,
  .sequence-toolbar,
  .switch-toolbar,
  .morpion-actions,
  .blackjack-setup,
  .memory-setup,
  .quick-bot-panel,
  .quick-friend-panel
) :where(button, a, select) {
  border: 3px solid var(--line);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--line);
  padding: 10px 14px;
  font-weight: 950;
}

:where(
  .demineur-toolbar,
  .domino-toolbar,
  .battleship-toolbar,
  .logic-toolbar,
  .anagram-actions,
  .speed-actions,
  .mastermind-actions,
  .wordsearch-actions,
  .pendu-actions,
  .petitbac-actions,
  .rps-actions,
  .sequence-toolbar,
  .switch-toolbar,
  .morpion-actions,
  .blackjack-setup,
  .memory-setup,
  .quick-bot-panel,
  .quick-friend-panel
) :where(button, a) {
  background: #ffd32a;
  color: #111827;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
}

:where(
  .demineur-toolbar,
  .domino-toolbar,
  .battleship-toolbar,
  .logic-toolbar,
  .anagram-actions,
  .speed-actions,
  .mastermind-actions,
  .wordsearch-actions,
  .pendu-actions,
  .petitbac-actions,
  .rps-actions,
  .sequence-toolbar,
  .switch-toolbar,
  .morpion-actions,
  .blackjack-setup,
  .memory-setup,
  .quick-bot-panel,
  .quick-friend-panel
) :where(button, a):hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--line);
}

:where(select) {
  background: #fff8e7;
  color: #111827;
}

/* Panels principaux façon Démineur */
:where(
  .demineur-panel,
  .domino-board-card,
  .domino-hand-card,
  .domino-log-card,
  .logic-game-card,
  .sequence-panel,
  .switch-panel,
  .battleship-board-card,
  .battleship-status,
  .battleship-log,
  .blackjack-top,
  .blackjack-table,
  .memory-top,
  .memory-board,
  .morpion-score,
  .morpion-board,
  .quick-bot-panel.open,
  .quick-friend-panel.open
) {
  background: #fff;
  border: 4px solid var(--line);
  border-radius: 26px;
  box-shadow: 7px 7px 0 var(--line);
  padding: 20px;
}

/* Cartes stats */
:where(
  .demineur-topline,
  .domino-scoreline,
  .switch-stats,
  .sequence-stats,
  .logic-stats,
  .memory-stats,
  .morpion-score
) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

:where(
  .demineur-topline,
  .domino-scoreline,
  .switch-stats,
  .sequence-stats,
  .logic-stats,
  .memory-stats,
  .morpion-score
) > :where(div, .memory-pill, .morpion-pill) {
  background: #fff8e7;
  border: 3px solid var(--line);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--line);
  padding: 12px;
  font-weight: 900;
}

/* Aides et previews */
:where(
  .demineur-help,
  .domino-help-line,
  .logic-howto,
  .anagram-preview,
  .speed-preview,
  .mastermind-preview,
  .wordsearch-preview,
  .pendu-preview-card,
  .petitbac-preview,
  .rps-preview
) {
  background: #fff8e7 !important;
  border: 3px dashed var(--line);
  border-radius: 18px;
  padding: 14px;
  font-weight: 850;
  color: #111827;
}

/* Quick bot/friends panels fermés */
.quick-bot-panel:not(.open),
.quick-friend-panel:not(.open) {
  display: none;
}

/* Quick bot/friends panels ouverts */
.quick-bot-panel.open,
.quick-friend-panel.open {
  display: grid;
  gap: 16px;
}

/* Titres dans panels générés */
.quick-bot-panel.open > h3,
.quick-friend-panel.open > h3 {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  background: #ffd32a;
  border: 3px solid var(--line);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--line);
  padding: 8px 14px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 950;
}

/* Anciennes pages sans hero : correction douce */
.blackjack-wrap,
.memory-wrap,
.morpion-wrap {
  background: #fff;
  border: 4px solid var(--line);
  border-radius: 26px;
  box-shadow: 7px 7px 0 var(--line);
  padding: 22px;
}

/* Responsive */
@media(max-width: 900px) {
  :where(
    .demineur-hero,
    .domino-hero,
    .battleship-hero,
    .logic-hero,
    .anagram-hero,
    .speed-hero,
    .mastermind-hero,
    .wordsearch-hero,
    .pendu-hero,
    .petitbac-hero,
    .rps-hero,
    .sequence-hero,
    .switch-hero
  ) {
    grid-template-columns: 1fr !important;
  }

  :where(
    .demineur-topline,
    .domino-scoreline,
    .switch-stats,
    .sequence-stats,
    .logic-stats,
    .memory-stats,
    .morpion-score
  ) {
    grid-template-columns: 1fr !important;
  }

  :where(
    .demineur-toolbar,
    .domino-toolbar,
    .battleship-toolbar,
    .logic-toolbar,
    .anagram-actions,
    .speed-actions,
    .mastermind-actions,
    .wordsearch-actions,
    .pendu-actions,
    .petitbac-actions,
    .rps-actions,
    .sequence-toolbar,
    .switch-toolbar,
    .morpion-actions,
    .blackjack-setup,
    .memory-setup
  ) :where(button, a, select) {
    width: 100%;
  }
}

/* === Standard pages refondues : Memory / Morpion / Blackjack === */

.game-standard-page {
  display: grid;
  gap: 22px;
  padding-bottom: 34px;
}

.game-standard-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: stretch;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.55), transparent 28%),
    linear-gradient(135deg, #7ed6df 0%, #ffd32a 55%, #ff9ff3 100%);
  border: 4px solid var(--line);
  border-radius: 26px;
  box-shadow: 7px 7px 0 var(--line);
  padding: 24px;
  overflow: hidden;
  position: relative;
}

.game-standard-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#111 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .06;
  pointer-events: none;
}

.game-standard-hero > * {
  position: relative;
  z-index: 1;
}

.game-standard-kicker {
  display: inline-flex !important;
  width: max-content;
  background: #ffd32a !important;
  border: 3px solid var(--line);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--line);
  padding: 7px 12px;
  font-weight: 950;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #111827;
}

.game-standard-hero h2 {
  margin: 0 0 10px !important;
  font-size: clamp(2.4rem, 6vw, 4.8rem) !important;
  line-height: .9;
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: -1.5px;
}

.game-standard-hero p {
  margin: 0 !important;
  max-width: 760px;
  font-weight: 850;
  line-height: 1.5;
  color: #111827;
}

.game-standard-status {
  background: #fff !important;
  border: 4px solid var(--line);
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--line);
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 8px;
  color: #111827;
}

.game-standard-status strong {
  font-size: 1.55rem;
  font-weight: 950;
  text-transform: uppercase;
}

.game-standard-status span {
  font-weight: 850;
}

.game-standard-toolbar,
.game-standard-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 4px solid var(--line);
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--line);
  padding: 14px;
}

.game-standard-toolbar label {
  display: grid;
  gap: 6px;
  font-weight: 950;
  text-transform: uppercase;
}

.game-standard-toolbar :where(button, a, select),
.game-standard-actions :where(button, a, select) {
  border: 3px solid var(--line);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--line);
  padding: 10px 14px;
  font-weight: 950;
}

.game-standard-toolbar :where(button, a),
.game-standard-actions :where(button, a) {
  background: #ffd32a;
  color: #111827;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
}

.game-standard-toolbar :where(button, a):hover,
.game-standard-actions :where(button, a):hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--line);
}

.game-standard-panel {
  background: #fff;
  border: 4px solid var(--line);
  border-radius: 26px;
  box-shadow: 7px 7px 0 var(--line);
  padding: 20px;
}

.game-standard-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.game-standard-stats > div {
  background: #fff8e7;
  border: 3px solid var(--line);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--line);
  padding: 12px;
  font-weight: 900;
}

.game-standard-stats span {
  display: block;
  font-size: .75rem;
  font-weight: 950;
  text-transform: uppercase;
}

.game-standard-stats strong {
  display: block;
  margin-top: 4px;
  font-size: 1.4rem;
  font-weight: 950;
}

.game-standard-message {
  background: #fff8e7;
  border: 3px dashed var(--line);
  border-radius: 18px;
  padding: 14px;
  font-weight: 850;
  color: #111827;
}

.game-standard-help {
  margin-top: 18px;
  background: #fff8e7 !important;
  border: 3px dashed var(--line);
  border-radius: 18px;
  padding: 14px;
  font-weight: 850;
  color: #111827;
}

.game-standard-help strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 950;
  text-transform: uppercase;
}

.game-standard-help p {
  margin: 0;
}

/* Corrige les anciens wrappers maintenant remplacés */
.memory-page .memory-board,
.morpion-page .morpion-board,
.blackjack-page .blackjack-table {
  margin-top: 18px;
}

/* Morpion */
.morpion-page .morpion-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Blackjack */
.blackjack-page .blackjack-table {
  background: #fff8e7;
  border: 3px dashed var(--line);
  border-radius: 20px;
  padding: 18px;
}

.blackjack-page .blackjack-center {
  display: grid;
  gap: 14px;
}

.blackjack-page .blackjack-dealer {
  background: #fff;
  border: 3px solid var(--line);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--line);
  padding: 16px;
}

/* Compatibilité : certains JS cherchent encore les anciennes classes */
.blackjack-page .blackjack-bank,
.memory-page .memory-stats,
.morpion-page .morpion-score {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Responsive */
@media(max-width: 900px) {
  .game-standard-hero {
    grid-template-columns: 1fr !important;
  }

  .game-standard-stats {
    grid-template-columns: 1fr !important;
  }

  .game-standard-toolbar :where(button, a, select),
  .game-standard-actions :where(button, a, select) {
    width: 100%;
  }

  .morpion-page .morpion-modes {
    width: 100%;
  }

  .morpion-page .morpion-modes button {
    width: 100%;
  }
}

/* Étape 3 : quick-lobby pages harmonisées */
.game-standard-page .quick-bot-panel.open,
.game-standard-page .quick-friend-panel.open {
  margin-top: 0;
}

.game-standard-page .quick-bot-panel.open {
  background:
    radial-gradient(circle at 14% 16%, rgba(255,255,255,.55), transparent 28%),
    #ffffff;
}

.game-standard-page .quick-friend-panel.open {
  background:
    radial-gradient(circle at 14% 16%, rgba(255,255,255,.55), transparent 28%),
    #fff8e7;
}

.game-standard-page .quick-bot-level {
  display: grid;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  font-weight: 950;
  text-transform: uppercase;
}

.game-standard-page .quick-bot-level select {
  min-width: 220px;
  background: #fff8e7;
}

.game-standard-page .mm-symbol-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

@media(max-width: 900px) {
  .game-standard-page .quick-bot-level,
  .game-standard-page .quick-bot-level select {
    width: 100%;
  }
}

/* === Étape 4 : harmonisation universelle de toutes les pages de jeux === */

/* Toutes les vues actives reçoivent le même rythme vertical */
main :where(.game-standard-page) {
  display: grid;
  gap: 22px;
  padding-bottom: 34px;
}

/* Hero standard, même pour les jeux qui n’étaient pas encore convertis */
main :where(.game-standard-hero) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: stretch;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.58), transparent 28%),
    linear-gradient(135deg, #7ed6df 0%, #ffd32a 56%, #ff9ff3 100%);
  border: 4px solid var(--line);
  border-radius: 26px;
  box-shadow: 7px 7px 0 var(--line);
  padding: 24px;
  overflow: hidden;
  position: relative;
}

main :where(.game-standard-hero)::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#111 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .055;
  pointer-events: none;
}

main :where(.game-standard-hero) > * {
  position: relative;
  z-index: 1;
}

main :where(.game-standard-hero) h2 {
  margin: 0 0 10px !important;
  font-size: clamp(2.4rem, 6vw, 4.8rem) !important;
  line-height: .9;
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: -1.5px;
}

main :where(.game-standard-hero) p {
  margin: 0 !important;
  max-width: 760px;
  font-weight: 850;
  line-height: 1.5;
  color: #111827;
}

main :where(.game-standard-kicker) {
  display: inline-flex !important;
  width: max-content;
  background: #ffd32a !important;
  border: 3px solid var(--line);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--line);
  padding: 7px 12px;
  font-weight: 950;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #111827;
}

/* Cartes de règles/statut à droite du hero */
main :where(.game-standard-status) {
  background: #fff !important;
  border: 4px solid var(--line) !important;
  border-radius: 22px !important;
  box-shadow: 6px 6px 0 var(--line) !important;
  padding: 18px !important;
  display: grid;
  align-content: center;
  gap: 8px;
  color: #111827;
}

main :where(.game-standard-status) strong {
  font-size: 1.45rem;
  font-weight: 950;
  text-transform: uppercase;
}

main :where(.game-standard-status) span {
  font-weight: 850;
}

/* Barres de boutons / choix de niveau */
main :where(.game-standard-toolbar) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: #fff !important;
  border: 4px solid var(--line) !important;
  border-radius: 22px !important;
  box-shadow: 6px 6px 0 var(--line) !important;
  padding: 14px !important;
}

main :where(.game-standard-toolbar) label {
  display: grid;
  gap: 6px;
  font-weight: 950;
  text-transform: uppercase;
}

main :where(.game-standard-toolbar) :where(button, a, select),
main :where(.game-standard-panel) :where(button, a, select),
main :where(.game-standard-actions) :where(button, a, select) {
  border: 3px solid var(--line);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--line);
  padding: 10px 14px;
  font-weight: 950;
}

main :where(.game-standard-toolbar) :where(button, a),
main :where(.game-standard-panel) :where(button, a),
main :where(.game-standard-actions) :where(button, a) {
  background: #ffd32a;
  color: #111827;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
}

main :where(.game-standard-toolbar) :where(button, a):hover,
main :where(.game-standard-panel) :where(button, a):hover,
main :where(.game-standard-actions) :where(button, a):hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--line);
}

main :where(.game-standard-toolbar) select,
main :where(.game-standard-panel) select {
  background: #fff8e7;
}

/* Gros panneaux de jeu */
main :where(.game-standard-panel) {
  background: #fff !important;
  border: 4px solid var(--line) !important;
  border-radius: 26px !important;
  box-shadow: 7px 7px 0 var(--line) !important;
  padding: 20px !important;
}

/* Blocs aide / preview */
main :where(.game-standard-help) {
  background: #fff8e7 !important;
  border: 3px dashed var(--line) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  font-weight: 850;
  color: #111827;
}

main :where(.game-standard-help) strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 950;
  text-transform: uppercase;
}

main :where(.game-standard-help) p {
  margin: 0;
}

/* Stats génériques */
main :where(.logic-stats, .memory-stats, .morpion-score, .domino-scoreline, .demineur-topline, .switch-stats, .sequence-stats) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

main :where(.logic-stats, .memory-stats, .morpion-score, .domino-scoreline, .demineur-topline, .switch-stats, .sequence-stats) > * {
  background: #fff8e7;
  border: 3px solid var(--line);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--line);
  padding: 12px;
  font-weight: 900;
}

/* Jeux avec grilles : conserver le plateau spécifique, mais mieux l’encadrer */
main :where(.maze-grid, .chill2048-grid, .lights-grid, .numbers-grid, .rush-board, .reversi-board, .connect4-board, .simon-board) {
  margin-inline: auto;
}

/* Anciennes pages de jeux non converties à 100 % */
main :where(.roulette-wrap, .reversi-wrap, .simon-wrap, .puissance4-wrap, .horses-page, .horses-wrap) {
  background: #fff;
  border: 4px solid var(--line);
  border-radius: 26px;
  box-shadow: 7px 7px 0 var(--line);
  padding: 22px;
}

/* Responsive */
@media(max-width: 900px) {
  main :where(.game-standard-hero) {
    grid-template-columns: 1fr !important;
  }

  main :where(.logic-stats, .memory-stats, .morpion-score, .domino-scoreline, .demineur-topline, .switch-stats, .sequence-stats) {
    grid-template-columns: 1fr !important;
  }

  main :where(.game-standard-toolbar) :where(button, a, select) {
    width: 100%;
  }
}

/* =========================================================
   ChillGame — Référence visuelle Blackjack
   Toutes les pages de jeux doivent reprendre cette structure :
   hero premium + toolbar blanche + panel principal + cartes internes.
   ========================================================= */

/* Fond et rythme commun */
main .game-standard-page {
  display: grid !important;
  gap: 22px !important;
  padding-bottom: 38px !important;
}

/* Hero type Blackjack */
main .game-standard-hero,
main :where(.demineur-hero, .domino-hero, .battleship-hero, .logic-hero, .anagram-hero, .speed-hero, .mastermind-hero, .wordsearch-hero, .pendu-hero, .petitbac-hero, .rps-hero, .sequence-hero, .switch-hero, .blackjack-hero, .memory-hero, .morpion-hero) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 18px !important;
  align-items: stretch !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.55), transparent 30%),
    linear-gradient(135deg, #7ed6df 0%, #ffd32a 52%, #ff9ff3 100%) !important;
  border: 4px solid var(--line) !important;
  border-radius: 26px !important;
  box-shadow: 7px 7px 0 var(--line) !important;
  padding: 24px !important;
  overflow: hidden !important;
  position: relative !important;
}

main .game-standard-hero::after,
main :where(.demineur-hero, .domino-hero, .battleship-hero, .logic-hero, .anagram-hero, .speed-hero, .mastermind-hero, .wordsearch-hero, .pendu-hero, .petitbac-hero, .rps-hero, .sequence-hero, .switch-hero, .blackjack-hero, .memory-hero, .morpion-hero)::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#111827 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .055;
  pointer-events: none;
}

main .game-standard-hero > *,
main :where(.demineur-hero, .domino-hero, .battleship-hero, .logic-hero, .anagram-hero, .speed-hero, .mastermind-hero, .wordsearch-hero, .pendu-hero, .petitbac-hero, .rps-hero, .sequence-hero, .switch-hero, .blackjack-hero, .memory-hero, .morpion-hero) > * {
  position: relative;
  z-index: 1;
}

/* Titres hero uniformes */
main .game-standard-hero h2,
main :where(.demineur-hero, .domino-hero, .battleship-hero, .logic-hero, .anagram-hero, .speed-hero, .mastermind-hero, .wordsearch-hero, .pendu-hero, .petitbac-hero, .rps-hero, .sequence-hero, .switch-hero, .blackjack-hero, .memory-hero, .morpion-hero) h2 {
  margin: 0 0 10px !important;
  font-size: clamp(2.4rem, 6vw, 4.8rem) !important;
  line-height: .9 !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
  letter-spacing: -1.5px !important;
  color: #111827 !important;
}

main .game-standard-hero p,
main :where(.demineur-hero, .domino-hero, .battleship-hero, .logic-hero, .anagram-hero, .speed-hero, .mastermind-hero, .wordsearch-hero, .pendu-hero, .petitbac-hero, .rps-hero, .sequence-hero, .switch-hero, .blackjack-hero, .memory-hero, .morpion-hero) p {
  margin: 0 !important;
  max-width: 760px !important;
  font-weight: 850 !important;
  line-height: 1.5 !important;
  color: #111827 !important;
}

/* Kicker commun type Blackjack */
main :where(.game-standard-kicker, .demineur-kicker, .domino-kicker, .logic-kicker, .anagram-kicker, .speed-kicker, .mastermind-kicker, .wordsearch-kicker, .pendu-kicker, .petitbac-kicker, .rps-kicker, .sequence-kicker, .switch-kicker, .blackjack-kicker, .memory-kicker, .morpion-kicker) {
  display: inline-flex !important;
  width: max-content !important;
  background: #ffd32a !important;
  border: 3px solid var(--line) !important;
  border-radius: 999px !important;
  box-shadow: 4px 4px 0 var(--line) !important;
  padding: 7px 12px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  color: #111827 !important;
}

/* Carte droite du hero */
main :where(.game-standard-status, .demineur-score-card, .domino-status-card, .logic-rules, .anagram-rules-card, .speed-rules-card, .mastermind-rules-card, .wordsearch-rules-card, .pendu-rules-card, .petitbac-rules-card, .rps-rules-card, .sequence-status-card, .switch-status-card, .blackjack-status-card, .memory-status-card, .morpion-status-card) {
  background: #ffffff !important;
  border: 4px solid var(--line) !important;
  border-radius: 22px !important;
  box-shadow: 6px 6px 0 var(--line) !important;
  padding: 18px !important;
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  color: #111827 !important;
}

main :where(.game-standard-status, .demineur-score-card, .domino-status-card, .logic-rules, .anagram-rules-card, .speed-rules-card, .mastermind-rules-card, .wordsearch-rules-card, .pendu-rules-card, .petitbac-rules-card, .rps-rules-card, .sequence-status-card, .switch-status-card, .blackjack-status-card, .memory-status-card, .morpion-status-card) strong {
  font-size: 1.55rem !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

main :where(.game-standard-status, .demineur-score-card, .domino-status-card, .logic-rules, .anagram-rules-card, .speed-rules-card, .mastermind-rules-card, .wordsearch-rules-card, .pendu-rules-card, .petitbac-rules-card, .rps-rules-card, .sequence-status-card, .switch-status-card, .blackjack-status-card, .memory-status-card, .morpion-status-card) span {
  font-weight: 850 !important;
}

/* Toolbar type Blackjack */
main :where(.game-standard-toolbar, .demineur-toolbar, .domino-toolbar, .battleship-toolbar, .logic-toolbar, .anagram-actions, .speed-actions, .mastermind-actions, .wordsearch-actions, .pendu-actions, .petitbac-actions, .rps-actions, .sequence-toolbar, .switch-toolbar, .blackjack-toolbar, .memory-toolbar, .morpion-toolbar) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 4px solid var(--line) !important;
  border-radius: 22px !important;
  box-shadow: 6px 6px 0 var(--line) !important;
  padding: 14px !important;
}

/* Boutons / liens / selects */
main :where(.game-standard-toolbar, .game-standard-panel, .game-standard-actions, .quick-bot-panel, .quick-friend-panel) :where(button, a, select),
main :where(.demineur-toolbar, .domino-toolbar, .battleship-toolbar, .logic-toolbar, .anagram-actions, .speed-actions, .mastermind-actions, .wordsearch-actions, .pendu-actions, .petitbac-actions, .rps-actions, .sequence-toolbar, .switch-toolbar, .blackjack-toolbar, .memory-toolbar, .morpion-toolbar) :where(button, a, select) {
  border: 3px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 0 var(--line) !important;
  padding: 10px 14px !important;
  font-weight: 950 !important;
}

main :where(.game-standard-toolbar, .game-standard-panel, .game-standard-actions, .quick-bot-panel, .quick-friend-panel) :where(button, a),
main :where(.demineur-toolbar, .domino-toolbar, .battleship-toolbar, .logic-toolbar, .anagram-actions, .speed-actions, .mastermind-actions, .wordsearch-actions, .pendu-actions, .petitbac-actions, .rps-actions, .sequence-toolbar, .switch-toolbar, .blackjack-toolbar, .memory-toolbar, .morpion-toolbar) :where(button, a) {
  background: #ffd32a !important;
  color: #111827 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
}

main :where(.game-standard-toolbar, .game-standard-panel, .game-standard-actions, .quick-bot-panel, .quick-friend-panel) :where(button, a):hover,
main :where(.demineur-toolbar, .domino-toolbar, .battleship-toolbar, .logic-toolbar, .anagram-actions, .speed-actions, .mastermind-actions, .wordsearch-actions, .pendu-actions, .petitbac-actions, .rps-actions, .sequence-toolbar, .switch-toolbar, .blackjack-toolbar, .memory-toolbar, .morpion-toolbar) :where(button, a):hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--line) !important;
}

main :where(select) {
  background: #fff8e7 !important;
  color: #111827 !important;
}

/* Panel type Blackjack */
main :where(.game-standard-panel, .demineur-panel, .domino-board-card, .domino-hand-card, .domino-log-card, .logic-game-card, .sequence-panel, .switch-panel, .battleship-board-card, .battleship-status, .battleship-log, .blackjack-panel, .memory-panel, .morpion-panel, .quick-bot-panel.open, .quick-friend-panel.open) {
  background: #ffffff !important;
  border: 4px solid var(--line) !important;
  border-radius: 26px !important;
  box-shadow: 7px 7px 0 var(--line) !important;
  padding: 20px !important;
}

/* Les tables ou grandes zones internes façon blackjack-table */
main :where(.blackjack-table, .battleship-layout, .domino-board, .logic-game-card, .memory-board, .morpion-board, .demineur-board, .switch-board, .sequence-board) {
  background: #fff8e7 !important;
  border: 3px dashed var(--line) !important;
  border-radius: 20px !important;
}

/* Stats façon Blackjack */
main :where(.game-standard-stats, .demineur-topline, .domino-scoreline, .switch-stats, .sequence-stats, .logic-stats, .memory-stats, .morpion-score, .blackjack-bank) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

main :where(.game-standard-stats, .demineur-topline, .domino-scoreline, .switch-stats, .sequence-stats, .logic-stats, .memory-stats, .morpion-score, .blackjack-bank) > * {
  background: #fff8e7 !important;
  border: 3px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 0 var(--line) !important;
  padding: 12px !important;
  font-weight: 900 !important;
}

/* Help / preview */
main :where(.game-standard-help, .demineur-help, .domino-help-line, .logic-howto, .anagram-preview, .speed-preview, .mastermind-preview, .wordsearch-preview, .pendu-preview-card, .petitbac-preview, .rps-preview, .blackjack-online-note, .memory-help, .morpion-help) {
  background: #fff8e7 !important;
  border: 3px dashed var(--line) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  font-weight: 850 !important;
  color: #111827 !important;
}

/* Les pages qui n’ont pas encore de hero restent encadrées proprement */
main :where(.roulette-wrap, .reversi-wrap, .simon-wrap, .puissance4-wrap, .horses-page, .horses-wrap, .blackjack-wrap, .memory-wrap, .morpion-wrap) {
  background: #ffffff !important;
  border: 4px solid var(--line) !important;
  border-radius: 26px !important;
  box-shadow: 7px 7px 0 var(--line) !important;
  padding: 22px !important;
}

/* Responsive */
@media(max-width: 900px) {
  main .game-standard-hero,
  main :where(.demineur-hero, .domino-hero, .battleship-hero, .logic-hero, .anagram-hero, .speed-hero, .mastermind-hero, .wordsearch-hero, .pendu-hero, .petitbac-hero, .rps-hero, .sequence-hero, .switch-hero, .blackjack-hero, .memory-hero, .morpion-hero) {
    grid-template-columns: 1fr !important;
  }

  main :where(.game-standard-stats, .demineur-topline, .domino-scoreline, .switch-stats, .sequence-stats, .logic-stats, .memory-stats, .morpion-score, .blackjack-bank) {
    grid-template-columns: 1fr !important;
  }

  main :where(.game-standard-toolbar, .demineur-toolbar, .domino-toolbar, .battleship-toolbar, .logic-toolbar, .anagram-actions, .speed-actions, .mastermind-actions, .wordsearch-actions, .pendu-actions, .petitbac-actions, .rps-actions, .sequence-toolbar, .switch-toolbar, .blackjack-toolbar, .memory-toolbar, .morpion-toolbar) :where(button, a, select) {
    width: 100% !important;
  }
}

/* =========================================================
   CHILLGAME — STYLE RÉFÉRENCE BLACKJACK
   Couche finale volontairement forte.
   ========================================================= */

body {
  background: #fff7e6;
}

/* Largeur identique au blackjack */
main > .container,
main .game-standard-page,
main :where(
  .blackjack-page,
  .memory-page,
  .morpion-page,
  .demineur-page,
  .domino-page,
  .battleship-page,
  .logic-page,
  .anagram-page,
  .speed-page,
  .mastermind-page,
  .wordsearch-page,
  .pendu-page,
  .petitbac-page,
  .rps-page,
  .sequence-page,
  .switch-page
) {
  max-width: 1128px;
  margin-left: auto;
  margin-right: auto;
}

/* Conteneur global */
main .game-standard-page,
main :where(
  .blackjack-page,
  .memory-page,
  .morpion-page,
  .demineur-page,
  .domino-page,
  .battleship-page,
  .logic-page,
  .anagram-page,
  .speed-page,
  .mastermind-page,
  .wordsearch-page,
  .pendu-page,
  .petitbac-page,
  .rps-page,
  .sequence-page,
  .switch-page
) {
  display: grid !important;
  gap: 22px !important;
  padding: 0 0 46px !important;
}

/* HERO : rendu comme la capture Blackjack */
main :where(
  .game-standard-hero,
  .blackjack-hero,
  .memory-hero,
  .morpion-hero,
  .demineur-hero,
  .domino-hero,
  .battleship-hero,
  .logic-hero,
  .anagram-hero,
  .speed-hero,
  .mastermind-hero,
  .wordsearch-hero,
  .pendu-hero,
  .petitbac-hero,
  .rps-hero,
  .sequence-hero,
  .switch-hero
) {
  min-height: 236px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 28px !important;
  align-items: center !important;

  background:
    radial-gradient(circle at 16% 24%, rgba(126, 214, 223, .72), transparent 28%),
    radial-gradient(circle at 86% 74%, rgba(255, 159, 243, .86), transparent 30%),
    linear-gradient(105deg, #bcebdc 0%, #ffd32a 52%, #ff9ff3 100%) !important;

  border: 4px solid #111827 !important;
  border-radius: 30px !important;
  box-shadow: 8px 8px 0 #111827 !important;
  padding: 26px 28px !important;
  position: relative !important;
  overflow: hidden !important;
}

main :where(
  .game-standard-hero,
  .blackjack-hero,
  .memory-hero,
  .morpion-hero,
  .demineur-hero,
  .domino-hero,
  .battleship-hero,
  .logic-hero,
  .anagram-hero,
  .speed-hero,
  .mastermind-hero,
  .wordsearch-hero,
  .pendu-hero,
  .petitbac-hero,
  .rps-hero,
  .sequence-hero,
  .switch-hero
)::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#111827 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .06;
  pointer-events: none;
}

main :where(
  .game-standard-hero,
  .blackjack-hero,
  .memory-hero,
  .morpion-hero,
  .demineur-hero,
  .domino-hero,
  .battleship-hero,
  .logic-hero,
  .anagram-hero,
  .speed-hero,
  .mastermind-hero,
  .wordsearch-hero,
  .pendu-hero,
  .petitbac-hero,
  .rps-hero,
  .sequence-hero,
  .switch-hero
) > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Kicker jaune */
main :where(
  .game-standard-kicker,
  .blackjack-kicker,
  .memory-kicker,
  .morpion-kicker,
  .demineur-kicker,
  .domino-kicker,
  .logic-kicker,
  .anagram-kicker,
  .speed-kicker,
  .mastermind-kicker,
  .wordsearch-kicker,
  .pendu-kicker,
  .petitbac-kicker,
  .rps-kicker,
  .sequence-kicker,
  .switch-kicker
) {
  display: inline-flex !important;
  width: max-content !important;
  background: #ffd32a !important;
  color: #111827 !important;
  border: 4px solid #111827 !important;
  border-radius: 18px !important;
  box-shadow: 5px 5px 0 #111827 !important;
  padding: 8px 14px !important;
  margin: 0 0 18px !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* Gros titre noir */
main :where(
  .game-standard-hero,
  .blackjack-hero,
  .memory-hero,
  .morpion-hero,
  .demineur-hero,
  .domino-hero,
  .battleship-hero,
  .logic-hero,
  .anagram-hero,
  .speed-hero,
  .mastermind-hero,
  .wordsearch-hero,
  .pendu-hero,
  .petitbac-hero,
  .rps-hero,
  .sequence-hero,
  .switch-hero
) h2 {
  margin: 0 0 10px !important;
  color: #111827 !important;
  font-size: clamp(3.2rem, 7vw, 5.15rem) !important;
  line-height: .82 !important;
  letter-spacing: -4px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

main :where(
  .game-standard-hero,
  .blackjack-hero,
  .memory-hero,
  .morpion-hero,
  .demineur-hero,
  .domino-hero,
  .battleship-hero,
  .logic-hero,
  .anagram-hero,
  .speed-hero,
  .mastermind-hero,
  .wordsearch-hero,
  .pendu-hero,
  .petitbac-hero,
  .rps-hero,
  .sequence-hero,
  .switch-hero
) p {
  max-width: 760px !important;
  margin: 0 !important;
  color: #111827 !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

/* Carte blanche droite du hero */
main :where(
  .game-standard-status,
  .blackjack-status-card,
  .memory-status-card,
  .morpion-status-card,
  .demineur-score-card,
  .domino-status-card,
  .logic-rules,
  .anagram-rules-card,
  .speed-rules-card,
  .mastermind-rules-card,
  .wordsearch-rules-card,
  .pendu-rules-card,
  .petitbac-rules-card,
  .rps-rules-card,
  .sequence-status-card,
  .switch-status-card
) {
  min-height: 146px !important;
  background: #ffffff !important;
  color: #111827 !important;
  border: 4px solid #111827 !important;
  border-radius: 24px !important;
  box-shadow: 8px 8px 0 #111827 !important;
  padding: 22px !important;
  display: grid !important;
  align-content: center !important;
  gap: 12px !important;
}

main :where(
  .game-standard-status,
  .blackjack-status-card,
  .memory-status-card,
  .morpion-status-card,
  .demineur-score-card,
  .domino-status-card,
  .logic-rules,
  .anagram-rules-card,
  .speed-rules-card,
  .mastermind-rules-card,
  .wordsearch-rules-card,
  .pendu-rules-card,
  .petitbac-rules-card,
  .rps-rules-card,
  .sequence-status-card,
  .switch-status-card
) strong {
  color: #111827 !important;
  font-size: 1.65rem !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

main :where(
  .game-standard-status,
  .blackjack-status-card,
  .memory-status-card,
  .morpion-status-card,
  .demineur-score-card,
  .domino-status-card,
  .logic-rules,
  .anagram-rules-card,
  .speed-rules-card,
  .mastermind-rules-card,
  .wordsearch-rules-card,
  .pendu-rules-card,
  .petitbac-rules-card,
  .rps-rules-card,
  .sequence-status-card,
  .switch-status-card
) span,
main :where(
  .game-standard-status,
  .blackjack-status-card,
  .memory-status-card,
  .morpion-status-card,
  .demineur-score-card,
  .domino-status-card
) b {
  color: #111827 !important;
  font-weight: 950 !important;
}

/* Toolbar blanche, comme Blackjack */
main :where(
  .game-standard-toolbar,
  .blackjack-toolbar,
  .memory-toolbar,
  .morpion-toolbar,
  .demineur-toolbar,
  .domino-toolbar,
  .battleship-toolbar,
  .logic-toolbar,
  .anagram-actions,
  .speed-actions,
  .mastermind-actions,
  .wordsearch-actions,
  .pendu-actions,
  .petitbac-actions,
  .rps-actions,
  .sequence-toolbar,
  .switch-toolbar
) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 4px solid #111827 !important;
  border-radius: 24px !important;
  box-shadow: 7px 7px 0 #111827 !important;
  padding: 18px !important;
}

/* Boutons jaunes */
main :where(
  .game-standard-toolbar,
  .game-standard-panel,
  .game-standard-actions,
  .quick-bot-panel,
  .quick-friend-panel,
  .blackjack-toolbar,
  .memory-toolbar,
  .morpion-toolbar,
  .demineur-toolbar,
  .domino-toolbar,
  .battleship-toolbar,
  .logic-toolbar,
  .anagram-actions,
  .speed-actions,
  .mastermind-actions,
  .wordsearch-actions,
  .pendu-actions,
  .petitbac-actions,
  .rps-actions,
  .sequence-toolbar,
  .switch-toolbar
) :where(button, a) {
  background: #ffd32a !important;
  color: #111827 !important;
  border: 4px solid #111827 !important;
  border-radius: 18px !important;
  box-shadow: 5px 5px 0 #111827 !important;
  padding: 10px 15px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

main :where(
  .game-standard-toolbar,
  .game-standard-panel,
  .game-standard-actions,
  .quick-bot-panel,
  .quick-friend-panel
) :where(button, a):hover,
main :where(
  .blackjack-toolbar,
  .memory-toolbar,
  .morpion-toolbar,
  .demineur-toolbar,
  .domino-toolbar,
  .battleship-toolbar,
  .logic-toolbar,
  .anagram-actions,
  .speed-actions,
  .mastermind-actions,
  .wordsearch-actions,
  .pendu-actions,
  .petitbac-actions,
  .rps-actions,
  .sequence-toolbar,
  .switch-toolbar
) :where(button, a):hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 3px 3px 0 #111827 !important;
}

/* Selects style Blackjack */
main :where(select) {
  background: #fff8e7 !important;
  color: #111827 !important;
  border: 4px solid #111827 !important;
  border-radius: 18px !important;
  box-shadow: 5px 5px 0 #111827 !important;
  padding: 10px 15px !important;
  font-weight: 950 !important;
}

/* Gros panels blancs */
main :where(
  .game-standard-panel,
  .blackjack-panel,
  .memory-panel,
  .morpion-panel,
  .demineur-panel,
  .domino-board-card,
  .domino-hand-card,
  .domino-log-card,
  .logic-game-card,
  .sequence-panel,
  .switch-panel,
  .battleship-board-card,
  .battleship-status,
  .battleship-log,
  .quick-bot-panel.open,
  .quick-friend-panel.open
) {
  background: #ffffff !important;
  border: 4px solid #111827 !important;
  border-radius: 26px !important;
  box-shadow: 8px 8px 0 #111827 !important;
  padding: 22px !important;
}

/* Stats internes style screenshot */
main :where(
  .game-standard-stats,
  .blackjack-bank,
  .memory-stats,
  .morpion-score,
  .demineur-topline,
  .domino-scoreline,
  .switch-stats,
  .sequence-stats,
  .logic-stats
) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  background: #ffffff !important;
  border: 4px solid #111827 !important;
  border-radius: 22px !important;
  box-shadow: 6px 6px 0 #111827 !important;
  padding: 22px !important;
  margin-bottom: 18px !important;
}

main :where(
  .game-standard-stats,
  .blackjack-bank,
  .memory-stats,
  .morpion-score,
  .demineur-topline,
  .domino-scoreline,
  .switch-stats,
  .sequence-stats,
  .logic-stats
) > * {
  background: #fff8e7 !important;
  border: 3px solid #111827 !important;
  border-radius: 17px !important;
  box-shadow: 5px 5px 0 #111827 !important;
  padding: 14px !important;
  color: #111827 !important;
  font-weight: 950 !important;
}

/* Zone de jeu interne crème/dashed */
main :where(
  .blackjack-table,
  .memory-board,
  .morpion-board,
  .demineur-board,
  .domino-board,
  .battleship-layout,
  .logic-game-card,
  .sequence-board,
  .switch-board,
  .maze-grid,
  .chill2048-grid
) {
  background: #fff8e7 !important;
  border: 3px dashed #111827 !important;
  border-radius: 22px !important;
}

/* Aide / texte secondaire */
main :where(
  .game-standard-help,
  .blackjack-online-note,
  .memory-help,
  .morpion-help,
  .demineur-help,
  .domino-help-line,
  .logic-howto,
  .anagram-preview,
  .speed-preview,
  .mastermind-preview,
  .wordsearch-preview,
  .pendu-preview-card,
  .petitbac-preview,
  .rps-preview
) {
  background: #fff8e7 !important;
  color: #111827 !important;
  border: 3px dashed #111827 !important;
  border-radius: 20px !important;
  padding: 15px !important;
  font-weight: 850 !important;
}

/* Quick panels comme gros panels Blackjack */
.quick-bot-panel:not(.open),
.quick-friend-panel:not(.open) {
  display: none !important;
}

.quick-bot-panel.open,
.quick-friend-panel.open {
  display: grid !important;
  gap: 16px !important;
}

/* Responsive */
@media (max-width: 900px) {
  main :where(
    .game-standard-hero,
    .blackjack-hero,
    .memory-hero,
    .morpion-hero,
    .demineur-hero,
    .domino-hero,
    .battleship-hero,
    .logic-hero,
    .anagram-hero,
    .speed-hero,
    .mastermind-hero,
    .wordsearch-hero,
    .pendu-hero,
    .petitbac-hero,
    .rps-hero,
    .sequence-hero,
    .switch-hero
  ) {
    grid-template-columns: 1fr !important;
  }

  main :where(
    .game-standard-stats,
    .blackjack-bank,
    .memory-stats,
    .morpion-score,
    .demineur-topline,
    .domino-scoreline,
    .switch-stats,
    .sequence-stats,
    .logic-stats
  ) {
    grid-template-columns: 1fr !important;
  }

  main :where(
    .game-standard-toolbar,
    .blackjack-toolbar,
    .memory-toolbar,
    .morpion-toolbar,
    .demineur-toolbar,
    .domino-toolbar,
    .battleship-toolbar,
    .logic-toolbar,
    .anagram-actions,
    .speed-actions,
    .mastermind-actions,
    .wordsearch-actions,
    .pendu-actions,
    .petitbac-actions,
    .rps-actions,
    .sequence-toolbar,
    .switch-toolbar
  ) :where(button, a, select) {
    width: 100% !important;
  }
}


/* =========================================================
   Héros réellement ajoutés aux anciennes pages
   Référence visuelle : Blackjack
   ========================================================= */

main :where(
  .horses-page-hero,
  .connect4-page-hero,
  .reversi-page-hero,
  .roulette-page-hero,
  .simon-page-hero,
  .uno-page-hero
) {
  min-height: 236px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 28px !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.55), transparent 30%),
    linear-gradient(135deg, #7ed6df 0%, #ffd32a 52%, #ff9ff3 100%) !important;
  border: 4px solid #111827 !important;
  border-radius: 30px !important;
  box-shadow: 8px 8px 0 #111827 !important;
  padding: 26px 28px !important;
  overflow: hidden !important;
  position: relative !important;
}

main :where(
  .horses-page-hero,
  .connect4-page-hero,
  .reversi-page-hero,
  .roulette-page-hero,
  .simon-page-hero,
  .uno-page-hero
)::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#111827 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .055;
  pointer-events: none;
}

main :where(
  .horses-page-hero,
  .connect4-page-hero,
  .reversi-page-hero,
  .roulette-page-hero,
  .simon-page-hero,
  .uno-page-hero
) > * {
  position: relative;
  z-index: 1;
}

main :where(
  .horses-page-kicker,
  .connect4-page-kicker,
  .reversi-page-kicker,
  .roulette-page-kicker,
  .simon-page-kicker,
  .uno-page-kicker
) {
  display: inline-flex !important;
  width: max-content !important;
  background: #ffd32a !important;
  color: #111827 !important;
  border: 4px solid #111827 !important;
  border-radius: 18px !important;
  box-shadow: 5px 5px 0 #111827 !important;
  padding: 8px 14px !important;
  margin: 0 0 18px !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

main :where(
  .horses-page-hero,
  .connect4-page-hero,
  .reversi-page-hero,
  .roulette-page-hero,
  .simon-page-hero,
  .uno-page-hero
) h2 {
  margin: 0 0 10px !important;
  color: #111827 !important;
  font-size: clamp(3.2rem, 7vw, 5.15rem) !important;
  line-height: .82 !important;
  letter-spacing: -4px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

main :where(
  .horses-page-hero,
  .connect4-page-hero,
  .reversi-page-hero,
  .roulette-page-hero,
  .simon-page-hero,
  .uno-page-hero
) p {
  max-width: 760px !important;
  margin: 0 !important;
  color: #111827 !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

main :where(
  .horses-page-status-card,
  .connect4-page-status-card,
  .reversi-page-status-card,
  .roulette-page-status-card,
  .simon-page-status-card,
  .uno-page-status-card
) {
  min-height: 146px !important;
  background: #ffffff !important;
  color: #111827 !important;
  border: 4px solid #111827 !important;
  border-radius: 24px !important;
  box-shadow: 8px 8px 0 #111827 !important;
  padding: 22px !important;
  display: grid !important;
  align-content: center !important;
  gap: 12px !important;
}

main :where(
  .horses-page-status-card,
  .connect4-page-status-card,
  .reversi-page-status-card,
  .roulette-page-status-card,
  .simon-page-status-card,
  .uno-page-status-card
) strong {
  color: #111827 !important;
  font-size: 1.65rem !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

main :where(
  .horses-page-status-card,
  .connect4-page-status-card,
  .reversi-page-status-card,
  .roulette-page-status-card,
  .simon-page-status-card,
  .uno-page-status-card
) span {
  color: #111827 !important;
  font-weight: 950 !important;
}

/* Anciennes pages : espacement et largeur comme Blackjack */
main :where(
  .horses-page,
  .connect4-page,
  .reversi-page,
  .roulette-page,
  .simon-page,
  .uno-page
) {
  max-width: 1128px !important;
  margin-inline: auto !important;
  display: grid !important;
  gap: 22px !important;
  padding-bottom: 46px !important;
}

/* Les anciens top deviennent des toolbars sous le hero */
main :where(
  .horses-top,
  .connect4-toolbar,
  .reversi-modes,
  .reversi-bot-options,
  .roulette-top,
  .simon-top,
  .uno-toolbar
) {
  background: #ffffff !important;
  border: 4px solid #111827 !important;
  border-radius: 24px !important;
  box-shadow: 7px 7px 0 #111827 !important;
  padding: 18px !important;
}

/* Panels principaux des anciennes pages */
main :where(
  .horses-layout,
  .horses-names,
  .roulette-main,
  .simon-stage,
  .uno-table,
  .uno-hand-wrap
) {
  background: #ffffff !important;
  border: 4px solid #111827 !important;
  border-radius: 26px !important;
  box-shadow: 8px 8px 0 #111827 !important;
  padding: 22px !important;
}

main :where(
  .connect4-status,
  .reversi-info,
  .simon-stats,
  .uno-status,
  .horses-info
) {
  background: #ffffff !important;
  border: 4px solid #111827 !important;
  border-radius: 22px !important;
  box-shadow: 6px 6px 0 #111827 !important;
  padding: 18px !important;
}

/* Boutons anciens */
main :where(
  .horses-page,
  .connect4-page,
  .reversi-page,
  .roulette-page,
  .simon-page,
  .uno-page
) button,
main :where(
  .horses-page,
  .connect4-page,
  .reversi-page,
  .roulette-page,
  .simon-page,
  .uno-page
) select {
  border: 4px solid #111827 !important;
  border-radius: 18px !important;
  box-shadow: 5px 5px 0 #111827 !important;
  padding: 10px 15px !important;
  font-weight: 950 !important;
}

main :where(
  .horses-page,
  .connect4-page,
  .reversi-page,
  .roulette-page,
  .simon-page,
  .uno-page
) button {
  background: #ffd32a !important;
  color: #111827 !important;
  text-transform: uppercase !important;
}

@media(max-width: 900px) {
  main :where(
    .horses-page-hero,
    .connect4-page-hero,
    .reversi-page-hero,
    .roulette-page-hero,
    .simon-page-hero,
    .uno-page-hero
  ) {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Puzzle des interrupteurs — deux couleurs bien distinctes
   État allumé : jaune/orange
   État éteint : bleu/violet sombre
   ========================================================= */

.lights-page .lights-grid {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.35), transparent 28%),
    linear-gradient(145deg, #111827, #312e81) !important;
  border: 5px solid #111827 !important;
  border-radius: 26px !important;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.08),
    8px 8px 0 #111827 !important;
  padding: 18px !important;
  gap: 10px !important;
}

/* Cases génériques */
.lights-page .lights-grid button,
.lights-page .lights-grid .light-cell,
.lights-page .lights-grid .lights-cell,
.lights-page .lights-grid .cell {
  border: 4px solid #111827 !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 0 #111827 !important;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .12s ease,
    filter .12s ease !important;
}

/* État ALLUMÉ */
.lights-page .lights-grid button.on,
.lights-page .lights-grid button.active,
.lights-page .lights-grid button.is-on,
.lights-page .lights-grid .light-cell.on,
.lights-page .lights-grid .light-cell.active,
.lights-page .lights-grid .light-cell.is-on,
.lights-page .lights-grid .lights-cell.on,
.lights-page .lights-grid .lights-cell.active,
.lights-page .lights-grid .lights-cell.is-on,
.lights-page .lights-grid .cell.on,
.lights-page .lights-grid .cell.active,
.lights-page .lights-grid .cell.is-on {
  background:
    radial-gradient(circle at 35% 30%, #fff8c7 0 18%, transparent 19%),
    linear-gradient(180deg, #ffd32a 0%, #ff9f1a 100%) !important;
  color: #111827 !important;
}

/* État ÉTEINT */
.lights-page .lights-grid button.off,
.lights-page .lights-grid button.inactive,
.lights-page .lights-grid button.is-off,
.lights-page .lights-grid .light-cell.off,
.lights-page .lights-grid .light-cell.inactive,
.lights-page .lights-grid .light-cell.is-off,
.lights-page .lights-grid .lights-cell.off,
.lights-page .lights-grid .lights-cell.inactive,
.lights-page .lights-grid .lights-cell.is-off,
.lights-page .lights-grid .cell.off,
.lights-page .lights-grid .cell.inactive,
.lights-page .lights-grid .cell.is-off {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.22) 0 16%, transparent 17%),
    linear-gradient(180deg, #7c3aed 0%, #1e1b4b 100%) !important;
  color: #ffffff !important;
}

/* Sécurité : si le JS utilise aria-pressed au lieu de classes */
.lights-page .lights-grid button[aria-pressed="true"] {
  background:
    radial-gradient(circle at 35% 30%, #fff8c7 0 18%, transparent 19%),
    linear-gradient(180deg, #ffd32a 0%, #ff9f1a 100%) !important;
  color: #111827 !important;
}

.lights-page .lights-grid button[aria-pressed="false"] {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.22) 0 16%, transparent 17%),
    linear-gradient(180deg, #7c3aed 0%, #1e1b4b 100%) !important;
  color: #ffffff !important;
}

/* Hover commun */
.lights-page .lights-grid button:hover,
.lights-page .lights-grid .light-cell:hover,
.lights-page .lights-grid .lights-cell:hover,
.lights-page .lights-grid .cell:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 0 #111827 !important;
  filter: saturate(1.12) !important;
}


/* =========================================================
   Puzzle des interrupteurs — rendu réel avec 2 couleurs
   JS attendu : .light-tile.is-on / .light-tile.is-off
   ========================================================= */

.lights-page #lightsGrid.lights-grid {
  --lights-size: 5;
  display: grid !important;
  grid-template-columns: repeat(var(--lights-size), minmax(48px, 1fr)) !important;
  gap: 12px !important;
  width: min(620px, 100%) !important;
  margin: 0 auto !important;
  padding: 22px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.28), transparent 28%),
    linear-gradient(145deg, #111827, #312e81) !important;
  border: 5px solid #111827 !important;
  border-radius: 28px !important;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.08),
    8px 8px 0 #111827 !important;
}

.lights-page #lightsGrid .light-tile {
  aspect-ratio: 1 / 1 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 4px solid #111827 !important;
  border-radius: 20px !important;
  box-shadow: 0 9px 0 #111827 !important;
  cursor: pointer !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  font-size: 0 !important;
  color: transparent !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}

.lights-page #lightsGrid .light-tile::before,
.lights-page #lightsGrid .light-tile::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Couleur 1 : ALLUMÉ = jaune/orange */
.lights-page #lightsGrid .light-tile.is-on {
  background:
    radial-gradient(circle at 34% 28%, #fff8c7 0 18%, transparent 19%),
    linear-gradient(180deg, #ffd32a 0%, #ff9f1a 100%) !important;
}

/* Couleur 2 : ÉTEINT = bleu/violet */
.lights-page #lightsGrid .light-tile.is-off {
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.24) 0 17%, transparent 18%),
    linear-gradient(180deg, #7ed6df 0%, #312e81 100%) !important;
}

.lights-page #lightsGrid .light-tile-core {
  width: 42% !important;
  height: 42% !important;
  border: 3px solid #111827 !important;
  border-radius: 50% !important;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.45),
    2px 2px 0 rgba(17,24,39,.35) !important;
}

.lights-page #lightsGrid .light-tile.is-on .light-tile-core {
  background: #fff8c7 !important;
}

.lights-page #lightsGrid .light-tile.is-off .light-tile-core {
  background: #bfdbfe !important;
}

.lights-page #lightsGrid .light-tile:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 13px 0 #111827 !important;
  filter: saturate(1.12) !important;
}

.lights-page #lightsGrid .light-tile:disabled {
  cursor: default !important;
  filter: grayscale(.08) !important;
}

@media(max-width: 700px) {
  .lights-page #lightsGrid.lights-grid {
    gap: 7px !important;
    padding: 14px !important;
    grid-template-columns: repeat(var(--lights-size), minmax(34px, 1fr)) !important;
  }

  .lights-page #lightsGrid .light-tile {
    border-width: 3px !important;
    border-radius: 14px !important;
  }
}


/* =========================================================
   Puzzle interrupteurs — fusion barre outils + ami connecté
   ========================================================= */

.lights-page .lights-toolbar-merged{
  padding: 18px 18px 16px !important;
}

.lights-page .lights-toolbar-merged-inner{
  display:flex !important;
  align-items:end !important;
  gap:18px !important;
  flex-wrap:wrap !important;
}

.lights-page .lights-toolbar-merged-inner > *{
  margin:0 !important;
}

.lights-page .lights-toolbar-friend-inline{
  display:flex !important;
  align-items:end !important;
}

.lights-page .lights-toolbar-friend-inline [data-open-friends]{
  white-space:nowrap !important;
}

@media(max-width: 780px){
  .lights-page .lights-toolbar-merged-inner{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .lights-page .lights-toolbar-friend-inline{
    width:100% !important;
  }
}


/* Puzzle interrupteurs : barre fusionnée propre */
.lights-page .lights-toolbar-merged {
  display: flex !important;
  align-items: end !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.lights-page .lights-toolbar-merged label {
  display: grid !important;
  gap: 6px !important;
}

.lights-page .lights-toolbar-merged button {
  white-space: nowrap !important;
}

/* Sécurité : la grille doit toujours être visible */
.lights-page #lightsGrid {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 280px !important;
}


/* =========================================================
   Suite logique — plus lisible, accessible daltoniens
   ========================================================= */

.sequence-page .sequence-question {
  display: grid !important;
  gap: 6px !important;
  background: #fff8e7 !important;
  border: 3px dashed #111827 !important;
  border-radius: 18px !important;
  padding: 14px !important;
  font-weight: 900 !important;
}

.sequence-page .sequence-question strong {
  font-size: 1.15rem !important;
  font-weight: 950 !important;
}

.sequence-page .sequence-question span {
  font-size: .95rem !important;
  font-weight: 850 !important;
}

.sequence-page .sequence-question-line {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

.sequence-page .sequence-choice-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.sequence-page .sequence-choice-btn {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sequence-page .sequence-choice-btn:hover {
  transform: translateY(-4px) !important;
}

.sequence-page .sequence-tile {
  width: 76px !important;
  height: 76px !important;
  display: grid !important;
  place-items: center !important;
  border: 4px solid #111827 !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 0 #111827 !important;
  font-weight: 950 !important;
  font-size: 1.5rem !important;
  color: #111827 !important;
  background: #ffffff !important;
}

.sequence-page .sequence-number {
  background: #fff8e7 !important;
}

.sequence-page .sequence-symbol {
  grid-template-columns: 1fr !important;
  gap: 2px !important;
}

.sequence-page .sequence-symbol b {
  font-size: 1rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.sequence-page .sequence-symbol i {
  font-style: normal !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
}

/* Couleurs volontairement très différenciées + lettres/formes */
.sequence-page .seq-blue {
  background: #7ed6df !important;
}

.sequence-page .seq-yellow {
  background: #ffd32a !important;
}

.sequence-page .seq-pink {
  background: #ff9ff3 !important;
}

.sequence-page .seq-green {
  background: #badc58 !important;
}

.sequence-page .seq-purple {
  background: #a78bfa !important;
}

.sequence-page .seq-orange {
  background: #fb923c !important;
}

.sequence-page .sequence-missing {
  width: 76px !important;
  height: 76px !important;
  display: grid !important;
  place-items: center !important;
  background: #111827 !important;
  color: #ffffff !important;
  border: 4px solid #111827 !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 0 #111827 !important;
  font-size: 2rem !important;
  font-weight: 950 !important;
}

@media(max-width: 700px) {
  .sequence-page .sequence-tile,
  .sequence-page .sequence-missing {
    width: 58px !important;
    height: 58px !important;
    font-size: 1.15rem !important;
    border-radius: 15px !important;
  }

  .sequence-page .sequence-symbol i {
    font-size: 1.25rem !important;
  }
}


/* =========================================================
   Labyrinthe logique — grille solvable et lisible
   ========================================================= */

.maze-page #mazeGrid.maze-grid {
  --maze-size: 9;
  display: grid !important;
  grid-template-columns: repeat(var(--maze-size), minmax(36px, 1fr)) !important;
  gap: 6px !important;
  width: min(680px, 100%) !important;
  margin: 0 auto !important;
  padding: 18px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(145deg, #111827, #312e81) !important;
  border: 5px solid #111827 !important;
  border-radius: 28px !important;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.08),
    8px 8px 0 #111827 !important;
}

.maze-page .maze-cell {
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  border: 3px solid #111827 !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 #111827 !important;
  font-size: clamp(1rem, 2vw, 1.55rem) !important;
  font-weight: 950 !important;
  padding: 0 !important;
  cursor: default !important;
}

.maze-page .maze-empty,
.maze-page .maze-start {
  background: #fff8e7 !important;
}

.maze-page .maze-wall {
  background:
    linear-gradient(135deg, #111827 0%, #374151 100%) !important;
}

.maze-page .maze-key {
  background: #ffd32a !important;
}

.maze-page .maze-exit {
  background: #2ed573 !important;
}

.maze-page .maze-trap {
  background: #ff4757 !important;
}

.maze-page .maze-player {
  background: #7ed6df !important;
  outline: 4px solid #ffffff !important;
  outline-offset: -7px !important;
}

.maze-page .maze-controls {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

@media(max-width: 700px){
  .maze-page #mazeGrid.maze-grid {
    gap: 4px !important;
    padding: 12px !important;
    grid-template-columns: repeat(var(--maze-size), minmax(26px, 1fr)) !important;
  }

  .maze-page .maze-cell {
    border-width: 2px !important;
    border-radius: 8px !important;
  }
}


/* =========================================================
   2048 Chill — correctif plateau stable
   ========================================================= */

.chill2048-page #chill2048Grid.chill2048-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(62px, 1fr)) !important;
  gap: 12px !important;
  width: min(560px, 100%) !important;
  margin: 0 auto 18px !important;
  padding: 18px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(145deg, #111827, #312e81) !important;
  border: 5px solid #111827 !important;
  border-radius: 28px !important;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.08),
    8px 8px 0 #111827 !important;
  touch-action: none !important;
}

.chill2048-page .chill2048-cell {
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  border: 4px solid #111827 !important;
  border-radius: 18px !important;
  box-shadow: 0 7px 0 #111827 !important;
  font-weight: 950 !important;
  font-size: clamp(1.1rem, 3vw, 2rem) !important;
  color: #111827 !important;
  background: #fff8e7 !important;
}

.chill2048-page .chill2048-cell.empty {
  background: rgba(255, 255, 255, .35) !important;
  box-shadow: inset 0 0 0 2px rgba(17, 24, 39, .25) !important;
}

.chill2048-page .chill2048-cell.v2 { background: #fff8e7 !important; }
.chill2048-page .chill2048-cell.v4 { background: #fffa85 !important; }
.chill2048-page .chill2048-cell.v8 { background: #ffd32a !important; }
.chill2048-page .chill2048-cell.v16 { background: #fb923c !important; }
.chill2048-page .chill2048-cell.v32 { background: #ff9ff3 !important; }
.chill2048-page .chill2048-cell.v64 { background: #7ed6df !important; }
.chill2048-page .chill2048-cell.v128 { background: #badc58 !important; }
.chill2048-page .chill2048-cell.v256 { background: #a78bfa !important; }
.chill2048-page .chill2048-cell.v512 { background: #2ed573 !important; }
.chill2048-page .chill2048-cell.v1024 { background: #facc15 !important; }
.chill2048-page .chill2048-cell.v2048 {
  background: linear-gradient(135deg, #ffd32a, #ff9ff3, #7ed6df) !important;
}

.chill2048-page .logic-message {
  text-align: center !important;
  font-weight: 950 !important;
}

@media(max-width: 700px){
  .chill2048-page #chill2048Grid.chill2048-grid {
    gap: 8px !important;
    padding: 12px !important;
    grid-template-columns: repeat(4, minmax(46px, 1fr)) !important;
  }

  .chill2048-page .chill2048-cell {
    border-width: 3px !important;
    border-radius: 14px !important;
  }
}


/* =========================================================
   2048 Chill — contrôles souris
   ========================================================= */

.chill2048-page .chill2048-controls {
  width: min(320px, 100%);
  margin: 18px auto 20px;
  display: grid;
  grid-template-columns: repeat(3, 72px);
  grid-template-areas:
    ". up ."
    "left down right";
  justify-content: center;
  gap: 10px;
}

.chill2048-page .chill2048-control {
  width: 72px !important;
  height: 62px !important;
  display: grid !important;
  place-items: center !important;
  background: #ffd32a !important;
  color: #111827 !important;
  border: 4px solid #111827 !important;
  border-radius: 18px !important;
  box-shadow: 5px 5px 0 #111827 !important;
  font-size: 1.9rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.chill2048-page .chill2048-control:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 3px 3px 0 #111827 !important;
}

.chill2048-page .chill2048-control:active {
  transform: translate(5px, 5px) !important;
  box-shadow: 0 0 0 #111827 !important;
}

.chill2048-page .chill2048-control-up {
  grid-area: up;
}

.chill2048-page .chill2048-control[data-2048-dir="left"] {
  grid-area: left;
}

.chill2048-page .chill2048-control[data-2048-dir="down"] {
  grid-area: down;
}

.chill2048-page .chill2048-control[data-2048-dir="right"] {
  grid-area: right;
}

@media(max-width: 700px) {
  .chill2048-page .chill2048-controls {
    grid-template-columns: repeat(3, 58px);
    gap: 8px;
  }

  .chill2048-page .chill2048-control {
    width: 58px !important;
    height: 54px !important;
    font-size: 1.45rem !important;
    border-radius: 14px !important;
  }
}


/* =========================================================
   Rush Logic — bloc principal rouge visible
   ========================================================= */

.rush-page #rushBoard {
  position: relative !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(145deg, #111827, #312e81) !important;
  border: 5px solid #111827 !important;
  border-radius: 28px !important;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.08),
    8px 8px 0 #111827 !important;
  overflow: hidden !important;
}

/* Bloc principal : forçage rouge */
.rush-page #rushBoard .rush-block.main,
.rush-page #rushBoard .rush-block.red,
.rush-page #rushBoard .rush-block.primary,
.rush-page #rushBoard .rush-block[data-main="1"],
.rush-page #rushBoard .rush-block[data-main="true"],
.rush-page #rushBoard .rush-block[data-type="main"],
.rush-page #rushBoard .rush-block[data-block="main"],
.rush-page #rushBoard .rush-block[data-color="red"] {
  background: linear-gradient(180deg, #ff4757 0%, #c81e3a 100%) !important;
  color: #ffffff !important;
  border: 4px solid #111827 !important;
  box-shadow: 5px 5px 0 rgba(17,24,39,.75) !important;
  z-index: 5 !important;
}

/* Sécurité : si le JS utilise une classe générique mais un id ou texte red */
.rush-page #rushBoard .rush-block[id*="red"],
.rush-page #rushBoard .rush-block[class*="red"] {
  background: linear-gradient(180deg, #ff4757 0%, #c81e3a 100%) !important;
  color: #ffffff !important;
}

/* Autres blocs : couleur différente du rouge */
.rush-page #rushBoard .rush-block.other,
.rush-page #rushBoard .rush-block:not(.main):not(.red):not(.primary):not([data-main="1"]):not([data-main="true"]):not([data-type="main"]):not([data-block="main"]):not([data-color="red"]) {
  background: linear-gradient(180deg, #ffd32a 0%, #ffb703 100%) !important;
  color: #111827 !important;
  border: 4px solid #111827 !important;
  box-shadow: 5px 5px 0 rgba(17,24,39,.65) !important;
}

/* Bloc sélectionné */
.rush-page #rushBoard .rush-block.selected {
  outline: 5px solid #2ed573 !important;
  outline-offset: 2px !important;
}