/* =========================================================
   Basic Skin — overrides for base scoreboard
   Charge après basic.css
   ========================================================= */

/* ---------- Variables de thème (reprennent celles de base.css) ---------- */
:root {
  --bg: #3e7429;                 /* vert gazon */
  --fg: #ffffff;                 /* texte principal */
  --muted: #eae1c6;              /* texte secondaire / accents pâles */
  --line: #eae1c6;               /* bordures / outlines */
  --surface: rgba(255,255,255,0.16);   /* surfaces claires translucides */
  --overlay: rgba(19, 19, 18, 0.85);   /* overlays (si nécessaire) */
  --menu-bg: #000000;            /* fond du menu fixe (#menuFooter) */
  --footer-total-bg: #131312;    /* fond du footer des totaux */

  /* surfaces spécifiques */
  --hole-surface: #32671deb;     /* vert plein (avec alpha) */
  --hole-surface-even: #32671deb;/* même teinte pour l’“even” dans ce skin */

  /* cartes / liens de la Step 1 */
  --card-bg: #32671deb;
  --card-fg: #faebd7;
}

/* ---------- Page / fond ---------- */
html, body { height: 100%; }
body {
  background-color: var(--bg);
  color: var(--fg);

  background-image: url('/static/game_assets/images/bckgnd_basic.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* ---------- Ajustements spécifiques au skin ---------- */

/* Hauteur utile différente pour ce skin */
.scoreboard-container { max-height: calc(100dvh - 260px); }

/* Footer des totaux (au-dessus du menu) */
#scoreTotalFooter { background-color: var(--footer-total-bg); }

/* Si tu utilises #menuFooter et veux forcer une couleur via skin :
   (sinon, garde ce que définit base.css)
   #menuFooter { background-color: var(--menu-bg); } */

/* Offcanvas “items de trou” */
.offcanvas-bottom.hole-item      { background-color: var(--hole-surface); }
.offcanvas-bottom.hole-item.even { background-color: var(--hole-surface-even); }
.hole-item                       { color: var(--muted); }

/* Logo (même taille que base; ajuste si besoin)
   .logo { max-height: 100px; } */

/* ---------- Boutons custom du scoreboard ----------
   On évite d’overrider .btn-primary / .btn-secondary de Bootstrap.
   On skinne seulement tes classes custom. */

/* Bouton “trou” (plein clair) */
.btn-hole {
  background-color: #ffffff;
  color: #3e7429;
  border: 2px solid #ffffff;
}

/* Bouton “score” (outline clair) */
.btn-score {
  background-color: var(--surface);
  color: var(--fg);
  border: 2px solid var(--line);
}

/* ---------- Utilitaires locaux ---------- */
.bottom-line {
  border: 0;
  border-bottom: 1px solid #ffffff;
}

.truncate-5 {
  width: 5ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

/* ---------- Composants Bootstrap (cartes / close) ----------
   On ne modifie pas les classes globales (.bg-dark, .btn-primary, etc.).
   On applique des styles sur les éléments utilisés dans ce skin. */

/* Bouton de fermeture (icône) — plus lisible sur fond sombre */
.btn-close {
  filter: none !important;   /* retire l’inversion Bootstrap */
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* Step 1 Cards */
.card {
  border: none;
  border-radius: 8px;
}
.card-body {
  background-color: var(--card-bg);
  color: var(--card-fg);
  padding: 8px;
}
.card-body a {
  color: var(--card-fg);
  text-decoration: underline;
  transition: color 0.3s;
}
.card-body a:hover,
.card-body a:focus {
  color: #ffffff;
  text-decoration: none;
}