/* RESET GLOBAL : supprime toutes les marges et padding par défaut des navigateurs */
/* box-sizing: border-box évite que le padding et les bordures agrandissent les éléments */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* CORPS DE LA PAGE : fond sombre pour l'ambiance médiévale, texte couleur parchemin */
/* overflow: hidden empêche les barres de défilement car le jeu est en taille fixe */
/* user-select: none empêche la sélection accidentelle de texte pendant le jeu */
html, body {
  width: 100%; height: 100%;
  background: #0d0f12;
  color: #e8d9b5;
  font-family: "Segoe UI", Tahoma, sans-serif;
  overflow: hidden;
  user-select: none;
}

/* RACINE DU JEU : conteneur de taille fixe 1280x720 centré verticalement et horizontalement */
/* L'ombre portée (box-shadow) crée un effet de profondeur autour de la fenêtre de jeu */
#game-root {
  position: relative;
  width: 1280px; height: 720px;
  margin: 0 auto;
  top: 50%; transform: translateY(-50%);
  box-shadow: 0 0 40px #000;
}

/* CANVAS DE JEU : surface de rendu principale, fond vert foncé évoquant l'herbe de la carte */
/* cursor: crosshair donne un curseur en croix typique des RTS pour la précision */
#game-canvas {
  display: block;
  width: 1280px; height: 720px;
  background: #2a3a22;
  cursor: crosshair;
}

/* ============================================================
   BARRE SUPÉRIEURE DU HUD (ressources / population)
   ============================================================ */
/* Positionnée en haut, fond dégradé sombre pour un effet "métal forgé" */
/* La bordure inférieure couleur bronze (#6b4a23) sépare le HUD du canvas */
#top-bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 36px;
  display: flex; align-items: center;
  gap: 18px;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(20,16,12,.95), rgba(30,24,18,.9));
  border-bottom: 2px solid #6b4a23;
  font-size: 15px;
  font-weight: 600;
  text-shadow: 1px 1px 2px #000;
}

/* CONTENEUR DE RESSOURCE : chaque icône + valeur est un flex horizontal */
.res { display: flex; align-items: center; gap: 6px; min-width: 70px; padding: 0 4px; }

/* ICÔNE DE RESSOURCE : cercle avec dégradé radial donnant un effet 3D/bouton */
/* border-radius 50% crée le cercle, box-shadow inset donne de la profondeur */
.res .icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.5);
  text-shadow: 0 1px 1px rgba(0,0,0,.6);
}

/* COULEURS DES ICÔNES PAR TYPE DE RESSOURCE : chaque dégradé est distinctif */
/* Bois : tons bruns chauds */
.res .icon.wood { background: radial-gradient(circle at 35% 30%, #8a6233, #4a2f15); }
/* Nourriture : tons rouges (évoque la viande) */
.res .icon.food { background: radial-gradient(circle at 35% 30%, #e05a45, #7a1f15); }
/* Or : tons jaunes/dorés brillants */
.res .icon.gold { background: radial-gradient(circle at 35% 30%, #ffe05a, #9a7d0a); }
/* Population : tons verts évoquant la vitalité */
.res .icon.pop  { background: radial-gradient(circle at 35% 30%, #5fe09a, #1a7a44); }

/* VALEUR DE LA RESSOURCE : le dernier span de chaque .res contient le nombre */
.res span:last-child { min-width: 14px; text-align: left; }

/* MESSAGE CONTEXTUEL : aligné à droite, couleur jaune pour attirer l'attention */
#msg { margin-left: auto; color: #ffd27a; font-style: italic; }

/* ============================================================
   MINICARTE (haut-droite)
   ============================================================ */
/* Positionnée sous la barre supérieure, à droite, avec un cadre bronze */
/* image-rendering: pixelated évite le flou lors du redimensionnement du canvas */
#minimap {
  position: absolute; top: 44px; right: 10px;
  border: 2px solid #6b4a23;
  background: #1a2a12;
  box-shadow: 0 0 10px #000;
  image-rendering: pixelated;
}

/* BOUTON TECH TREE : placé à gauche de la minicarte, même alignement vertical */
#tech-btn {
  position: absolute; top: 44px; right: 200px;
  background: #4a3320; color: #e8d9b5;
  border: 2px solid #6b4a23;
  padding: 6px 12px; cursor: pointer; font-weight: 700;
}
/* Survol : éclaircissement pour indiquer que le bouton est interactif */
#tech-btn:hover { background: #6b4a23; }

/* ============================================================
   BARRE D'ACTION (construction / entraînement, bas-gauche)
   ============================================================ */
/* Occupe 60% de la largeur en bas à gauche, fond semi-transparent */
/* flex-wrap: wrap permet aux boutons de passer à la ligne si nécessaire */
#action-bar {
  position: absolute; bottom: 0; left: 0;
  display: flex; gap: 6px;
  padding: 6px 10px;
  background: rgba(20,16,12,.92);
  border-top: 2px solid #6b4a23;
  min-height: 78px; width: 60%;
  flex-wrap: wrap;
}

/* BOUTON D'ACTION : carré de 64x64 avec fond brun sombre et bordure bronze */
/* L'icône est rendue dans un canvas enfant pour les unités */
.act-btn {
  width: 64px; height: 64px;
  background: #2a1f15; border: 2px solid #6b4a23;
  color: #e8d9b5; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1.1;
  position: relative;
}
/* Survol : éclaircissement du fond et de la bordure pour le feedback visuel */
.act-btn:hover { background: #4a3320; border-color: #c9a05a; }
/* Canvas interne : icône de l'unité ou du bâtiment (40x40 dans le bouton 64x64) */
.act-btn canvas { width: 40px; height: 40px; }
/* Coût affiché sous l'icône, en jaune doré */
.act-btn .cost { font-size: 9px; color: #ffd27a; }
/* Bouton désactivé (ressources insuffisantes) : réduit l'opacité et change le curseur */
.act-btn.disabled { opacity: .4; cursor: not-allowed; }
/* Bouton verrouillé (technologie non recherchée) : légèrement plus visible que disabled */
.act-btn.locked { opacity: .55; cursor: not-allowed; }
/* Icône de cadenas en pseudo-élément pour les boutons verrouillés */
.act-btn.locked::after { content: '🔒'; position: absolute; top: 2px; right: 3px; font-size: 12px; }
/* Touche de raccourci affichée en haut à gauche du bouton */
.act-btn .hotkey { position:absolute; top:1px; left:3px; font-size:9px; color:#8a7a5a; }

/* ============================================================
   PANNEAU DE SÉLECTION (bas-droite)
   ============================================================ */
/* Occupe 38% de la largeur en bas à droite, affiche les infos de l'entité sélectionnée */
/* Aligné en bas avec la barre d'action, même style visuel */
#selection-panel {
  position: absolute; bottom: 0; right: 0;
  width: 38%; min-height: 78px;
  padding: 8px 12px;
  background: rgba(20,16,12,.92);
  border-top: 2px solid #6b4a23;
  font-size: 12px;
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
}
/* Texte affiché quand aucune entité n'est sélectionnée */
#selection-panel .empty { color: #8a7a5a; font-style: italic; }

/* PORTRAIT DE L'ENTITÉ SÉLECTIONNÉE : carré de 44x44 avec bordure */
.portrait {
  width: 44px; height: 44px; background: #2a1f15; border:1px solid #6b4a23;
  display:flex; align-items:center; justify-content:center;
}

/* INFORMATIONS DE SÉLECTION : nom et stats de l'entité */
.sel-info { font-size: 12px; max-width: 180px; }
/* Nom de l'entité en jaune doré et gras */
.sel-info .name { color:#ffd27a; font-weight:700; }

/* BARRE DE VIE : fond rouge sombre, remplissage vert-bleu */
.hp-bar { width: 80px; height: 8px; background:#400; border:1px solid #000; margin-top:3px; }
/* Remplissage de la barre de vie : la largeur est définie en JS selon le ratio PV actuels/max */
.hp-fill { height: 100%; background:#3a9; }

/* ============================================================
   OVERLAYS (victoire/défaite, tech tree)
   ============================================================ */
/* Superposés sur tout le jeu avec un fond semi-transparent noir (70% d'opacité) */
/* z-index 50 les place au-dessus du HUD mais sous l'écran de démarrage */
#overlay, #tech-panel {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
/* La classe hidden masque complètement l'overlay (display: none retire l'élément du flux) */
#overlay.hidden, #tech-panel.hidden { display: none; }

/* BOÎTE CENTRALE DES OVERLAYS : fond dégradé sombre, bordure épaisse bronze, ombre portée */
.overlay-box, .tech-panel-box {
  background: linear-gradient(180deg,#2a1f15,#1a130d);
  border: 3px solid #6b4a23;
  padding: 30px 50px; text-align: center;
  box-shadow: 0 0 30px #000;
}

/* Titre de l'overlay victoire/défaite : très grand pour l'impact visuel */
.overlay-box h1 { font-size: 42px; margin-bottom: 10px; }

/* Style commun des boutons dans les overlays et l'écran de démarrage */
/* Fond bronze (#6b4a23), texte blanc, pas de bordure native */
.overlay-box button, .tech-panel-box button, .start-box button {
  margin-top: 14px; padding: 10px 24px;
  background: #6b4a23; color:#fff; border:none; cursor:pointer;
  font-size: 16px; font-weight: 700;
}
/* Survol commun : éclaircissement du fond */
.overlay-box button:hover, .tech-panel-box button:hover, .start-box button:hover { background: #8a5e2c; }

/* PANNEAU TECH TREE : largeur minimale pour contenir les descriptions de recherches */
.tech-panel-box { min-width: 460px; }
.tech-panel-box h2 { margin-bottom: 16px; color:#ffd27a; }

/* LIGNE DE RECHERCHE DANS L'ARBRE TECH : flex horizontal avec nom et bouton */
.tech-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; margin: 4px 0; background:#221a10; border:1px solid #3a2a18;
}
/* Description de la recherche alignée à gauche */
.tech-item .desc { text-align: left; }
/* Bouton de recherche plus compact que les autres boutons */
.tech-item button { margin: 0; padding: 6px 14px; font-size: 13px; }

/* ============================================================
   ÉCRAN DE DÉMARRAGE
   ============================================================ */
/* Superposé par-dessus tout (z-index 100), fond radial vert foncé évoquant une prairie */
/* Le dégradé radial centre la luminosité au milieu-haut pour un effet d'éclairage dramatique */
#start-screen {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, #2a3a22, #0d0f12 70%);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}

/* BOÎTE CENTRALE DU MENU : largeur max 560px, padding généreux */
.start-box { text-align: center; max-width: 560px; padding: 40px; }

/* Titre principal du jeu : très grand (52px), couleur or, ombre portée pour le relief */
.start-box h1 { font-size: 52px; color:#ffd27a; text-shadow: 2px 2px 4px #000; margin-bottom: 8px; }

/* Sous-titre : couleur bronze plus discrète */
.start-box .subtitle { color:#c9a05a; margin-bottom: 24px; }

/* BLOC D'AIDE DES CONTRÔLES : fond sombre semi-transparent, bordure discrète */
/* Alignement à gauche pour la lisibilité des lignes de texte */
.controls-help { text-align: left; font-size: 13px; line-height: 1.8; color:#d8c9a5; background:rgba(0,0,0,.3); padding:16px 20px; border:1px solid #3a2a18; }

/* Bouton "Commencer la partie" : plus grand que les autres pour être le call-to-action principal */
.start-box button { font-size: 20px; padding: 14px 40px; }

/* CONTENEUR DES LIENS D'ACTION : tutoriel et paramètres à côté du bouton jouer */
.start-actions { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 14px; }

/* LIEN VERS TUTORIEL/PARAMÈTRES : stylisé comme un bouton pour l'uniformité visuelle */
.start-actions .tuto-link {
  background: #4a3320; color: #ffd27a;
  border: 2px solid #6b4a23;
  padding: 12px 24px; cursor: pointer; font-weight: 700; font-size: 16px;
  text-decoration: none; display: inline-block;
}
/* Survol : le lien s'éclaircit comme un bouton normal */
.start-actions .tuto-link:hover { background: #6b4a23; color: #fff; }