/* ===============================
   Mini Golf – styles spécifiques
   =============================== */

.gf-root {
  /* Barre commune (css/games.css) aux couleurs du green */
  --mg-jeu-largeur: 984px;
  --mgb-fond: radial-gradient(120% 160% at 0% 0%, rgba(160, 230, 90, 0.22), transparent 55%),
    linear-gradient(120deg, #173414, #3d6e2f);
  --mgb-texte: #f0f8ea;
  --mgb-doux: #b5d3a5;
  --mgb-accent: #c6f27c;
  --mgb-titre: linear-gradient(100deg, #e8ffb0, #9be86b 55%, #ffffff);
  --mg-fs-fond: radial-gradient(circle at 50% 40%, #3d6e2f, #173414);
  --mg-bulle-fond: #173414;
}

/* ---------- Bandeau ---------- */

.gf-hud-hole,
.gf-hud-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.gf-hud-player {
  flex: 1;
}

.gf-hole-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: #2e7d32;
  font-family: "Madimi One", cursive;
  font-size: 1.2em;
}

.gf-hole-name,
.gf-player-name {
  font-weight: bold;
  color: var(--mgb-valeur);
  line-height: 1.2;
}

.gf-hole-par,
.gf-strokes {
  font-size: 0.85em;
  color: var(--mgb-doux);
}

.gf-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.12);
  flex: 0 0 22px;
}

/* ---------- Plateau ---------- */

.gf-board {
  position: relative;
}

#gf-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(20, 60, 20, 0.35);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
}

/* ---------- Fenêtres sur le plateau ---------- */

.gf-over {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 45, 15, 0.55);
  border-radius: 16px;
  padding: 10px;
  box-sizing: border-box;
}

.gf-box {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  padding: 18px 24px;
  text-align: center;
  max-width: 420px;
  max-height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.gf-box-wide {
  max-width: 100%;
}

.gf-title {
  font-family: "Madimi One", cursive;
  font-size: 2em;
  color: #2e7d32;
  line-height: 1.1;
}

.gf-sub {
  color: #6b7a86;
  margin: 4px 0 12px 0;
}

.gf-label {
  font-weight: bold;
  color: #444;
  margin-bottom: 6px;
}

.gf-chips {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}

.gf-chips button {
  width: 44px;
  height: 38px;
  border: 2px solid #cfd6dd;
  border-radius: 10px;
  background: #f4f6f8;
  font-weight: bold;
  font-size: 1.05em;
  color: #2c3e50;
  cursor: pointer;
}

.gf-chips button:hover {
  border-color: #2e7d32;
  background: #eef7ee; /* remplace le survol bleu des boutons du site */
}

.gf-chips button.sel:hover {
  background: #2e7d32;
}

.gf-chips button.sel {
  background: #2e7d32;
  border-color: #2e7d32;
  color: #fff;
}

.gf-names {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.gf-names label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gf-names input {
  flex: 1;
  padding: 6px 10px;
  border: 2px solid #dfe6ec;
  border-radius: 8px;
  font-size: 1em;
  min-width: 0;
}

.gf-best {
  color: #9a6a00;
  font-weight: bold;
  min-height: 1.2em;
  margin-bottom: 10px;
}

.gf-big {
  font-size: 1.2em;
  padding: 10px 44px;
}

.gf-help {
  margin-top: 12px;
  font-size: 0.88em;
  color: #6b7a86;
  line-height: 1.4;
}

/* ---------- Mode et choix du trou ---------- */

.gf-modes {
  margin-bottom: 12px;
}

.gf-modes button {
  width: auto;
  padding: 0 14px;
  font-size: 0.95em;
}

.gf-box.gf-box-train {
  max-width: 660px;
}

.gf-holes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.gf-hole-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 3px solid #e3e8ec;
  border-radius: 10px;
  background: #fff;
  padding: 3px;
  cursor: pointer;
  color: #2c3e50;
  transition: transform 0.12s, border-color 0.12s;
}

.gf-hole-card:hover {
  transform: translateY(-2px);
  border-color: #7fbf7f;
  background: #f4faf4; /* remplace le survol bleu des boutons du site */
  color: #2c3e50;
}

.gf-hole-card.sel,
.gf-hole-card.sel:hover {
  border-color: #2e7d32;
  background: #eef7ee;
}

.gf-hole-card canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  border-radius: 6px;
}

.gf-hole-card span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  font-size: 0.8em;
  padding: 0 3px 2px 3px;
  text-align: left;
}

.gf-hole-card i {
  font-style: normal;
  color: #6b7a86;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .gf-holes {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Carte de score ---------- */

.gf-table-wrap {
  overflow-x: auto;
  margin: 6px 0 14px 0;
}

.gf-table {
  border-collapse: separate;
  border-spacing: 3px;
  margin: 0 auto;
  font-size: 0.95em;
}

.gf-table th,
.gf-table td {
  min-width: 30px;
  padding: 4px 6px;
  border-radius: 6px;
  text-align: center;
}

.gf-table th {
  background: #2e7d32;
  color: #fff;
}

.gf-table td.gf-name {
  text-align: left;
  font-weight: bold;
  white-space: nowrap;
  background: #f4f6f8;
}

.gf-table .gf-par td {
  background: #eef3e8;
  color: #557040;
  font-weight: bold;
}

.gf-table td.s-ace { background: #ffd54a; font-weight: bold; }
.gf-table td.s-under { background: #a5e3a1; font-weight: bold; }
.gf-table td.s-par { background: #f1f4f6; }
.gf-table td.s-bogey { background: #ffe0b8; }
.gf-table td.s-over { background: #ffb8b0; }
.gf-table td.gf-rank { font-size: 1.2em; font-weight: bold; color: #2c3e50; }
.gf-table td.gf-total { background: #2c3e50; color: #fff; font-weight: bold; }
.gf-table td.gf-cur { outline: 2px dashed #2e7d32; }

.gf-card-btns button {
  margin: 3px;
}

/* ---------- Plein écran ---------- */

.gf-root.mg-fs {
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.gf-root.mg-fs > .mg-barre,
.gf-root.mg-fs .gf-board {
  align-self: center;
  width: var(--gf-w, 100%);
}