/* Styles spécifiques au jeu F1, sans toucher au body du site */

.f1-root {
  /* Barre commune (css/games.css) au-dessus de la piste */
  --mg-jeu-largeur: 1204px; /* barre de 1180 px + marges de 12 px */
  --mgb-fond: linear-gradient(180deg, #2b2d33, #1b1c20);
  --mgb-texte: #fff;
  --mgb-doux: #aab;
  --mgb-accent: #ff4a3d;
  --mgb-titre: linear-gradient(100deg, #ff4a3d, #ff8a3d 55%, #ffd23d);
  --mgb-ombre: 0 2px 8px #0005, inset 0 -3px 0 #e10600;
  --mg-fs-fond: radial-gradient(circle at 50% 40%, #2a2d34, #0b0c0f);
  --mg-bulle-fond: #1b1c20;
}

.f1-root .mg-barre-titre {
  font-style: italic;
}

.mg-stat b.f1-vies {
  color: #ff4a3d;
  letter-spacing: 2px;
}

.f1-canvas-container {
  background: linear-gradient(180deg, #2a2c31, #17181b);
  border-radius: 18px;
  box-shadow:
    0 6px 24px #000a,
    inset 0 0 0 2px #ffffff10;
  padding: 12px;
  margin: 0 auto; /* pas de marge sous la piste : elle gagne en hauteur */
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
}

#f1-canvas {
  display: block;
  width: 360px; /* hors plein écran : taille posée par game.js selon la hauteur */
  max-width: 100%;
  height: auto;
  background: #3f8f3a;
  border-radius: 10px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Plein écran ---------- */
/* La barre garde la largeur de la piste (fixée par game.js) */
.f1-root.mg-fs {
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.f1-root.mg-fs > .mg-barre {
  align-self: center;
}

.f1-root.mg-fs .f1-canvas-container {
  padding: 0;
  margin: 0;
  background: none;
  box-shadow: none;
  max-width: none;
}

.f1-root.mg-fs #f1-canvas {
  max-width: none;
  box-shadow: 0 0 40px #000c;
}