/* Barre commune (css/games.css) aux couleurs du pas de tir */
.ta-jeu {
  --mg-jeu-largeur: 860px;
  --mgb-fond: radial-gradient(120% 160% at 0% 0%, rgba(179, 224, 255, 0.3), transparent 55%),
    linear-gradient(120deg, #14532d, #228b22);
  --mgb-accent: #ffd166;
  --mgb-titre: linear-gradient(100deg, #ffffff, #b3e0ff 50%, #ffd166);
  --mg-fs-fond: #1b2430;
  --mg-bulle-fond: #14532d;
}

canvas#archeryCanvas {
  max-width: 100%;
  height: auto;
  background: linear-gradient(to bottom, #b3e0ff 60%, #228b22 100%);
  border: 2px solid #333;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  margin: 20px auto;
  display: block;
  border-radius: 16px;
}

/* Le canvas a déjà son cadre : pas de second panneau autour */
.canvas-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 10px auto 24px auto;
}
.canvas-container canvas#archeryCanvas {
  margin: 0;
}

.canvas-container {
  position: relative;
}

/* Plein écran commun (css/games.css) : le cadre occupe la place sous la barre,
   le canvas s'agrandit en gardant son ratio 800 x 500 */
.ta-jeu.mg-fs .canvas-container {
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  background: none;
  box-shadow: none;
}

.ta-jeu.mg-fs canvas#archeryCanvas {
  width: min(100%, calc((100vh - 110px) * 1.6));
  margin: 0;
  border: none;
}