/* ============================================================
   ATLASLORD — feuille de style
   Palette "Warcraft-like" : bruns, or, parchemin.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --gold: #d4a017;
  --gold-bright: #f0c040;
  --parchment: #e8d9b0;
  --panel: #2a2118;
  --panel-dark: #1b140d;
  --panel-line: #6b5436;
  --red: #c0392b;
  --blue: #3a6fd8;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Courier New", ui-monospace, monospace;
  color: var(--parchment);
  user-select: none;
  -webkit-user-select: none;
}

#game-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: crosshair;
  background: #000;
}

.hidden { display: none !important; }

/* ---------- Surcouches génériques ---------- */
.overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  z-index: 50;
}

.dialog {
  background: var(--panel);
  border: 3px solid var(--panel-line);
  box-shadow: 0 0 0 3px var(--panel-dark), 0 0 40px rgba(0,0,0,.8);
  padding: 28px 36px;
  text-align: center;
  min-width: 340px;
}

.dialog h1 { font-size: 34px; letter-spacing: 4px; margin-bottom: 14px; color: var(--gold-bright); }
.dialog h2 { font-size: 24px; letter-spacing: 4px; margin-bottom: 18px; color: var(--gold-bright); }
.dialog p  { margin-bottom: 18px; line-height: 1.5; }

/* ---------- Boutons ---------- */
button {
  font-family: inherit;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--parchment);
  background: linear-gradient(#4a3a26, #33271a);
  border: 2px solid var(--panel-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 #100b06;
  padding: 8px 14px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: linear-gradient(#5a4830, #3d2f1e); border-color: var(--gold); color: #fff; }
button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
button:disabled { opacity: .38; cursor: not-allowed; }
button.big { display: block; width: 100%; margin: 8px 0; padding: 12px; font-size: 16px; }

/* ---------- Écran titre ---------- */
#title-screen { background: radial-gradient(ellipse at 50% 30%, #3a2c1a 0%, #17100a 60%, #000 100%); }
.title-box { text-align: center; padding: 20px; }

.logo {
  font-size: clamp(48px, 10vw, 96px);
  letter-spacing: 10px;
  color: var(--gold-bright);
  text-shadow: 0 2px 0 #7a5a10, 0 4px 0 #3a2c08, 0 6px 18px rgba(0,0,0,.9);
  margin-bottom: 6px;
}
.subtitle { font-size: 20px; letter-spacing: 3px; margin-bottom: 30px; }
.subtitle .vs { color: #9a8a6a; font-size: 14px; }
.f-blue { color: var(--blue); }
.f-red  { color: var(--red); }

#difficulty-select { margin-bottom: 24px; display: flex; gap: 10px; justify-content: center; }
#difficulty-select button.selected { border-color: var(--gold); color: var(--gold-bright); background: linear-gradient(#5a4830, #3d2f1e); }

.menu-buttons { width: 300px; margin: 0 auto 26px auto; }

.controls-help { font-size: 12px; line-height: 1.9; color: #b0a080; margin-bottom: 12px; }
.footnote { font-size: 11px; color: #77694d; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#hud button { pointer-events: auto; }

#hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 18px;
  padding: 8px 14px;
  background: linear-gradient(rgba(20,14,8,.92), rgba(20,14,8,.75) 80%, transparent);
  pointer-events: auto;
}
#hud-top .res { display: flex; align-items: center; gap: 7px; font-size: 16px; }
#hud-top .res b { min-width: 44px; }
#game-clock { color: #b0a080; font-size: 14px; }
#hud-top .spacer { flex: 1; }
.hud-btn { font-size: 12px; padding: 6px 10px; }

.ico { width: 16px; height: 16px; display: inline-block; image-rendering: pixelated; }
.ico-gold { background: radial-gradient(circle at 35% 35%, #ffe9a0, #d4a017 55%, #8a6410); border-radius: 50%; }
.ico-wood { background: linear-gradient(90deg, #7a4a22 0 40%, #a06a34 40% 60%, #7a4a22 60%); border: 1px solid #503014; }
.ico-pop  { background: radial-gradient(circle at 50% 30%, #e8d9b0 30%, #8a7a5a 32%); border-radius: 45% 45% 40% 40%; }

/* Panneau inférieur */
#hud-bottom {
  position: absolute; left: 0; right: 200px; bottom: 0;
  min-height: 108px;
  display: flex; align-items: stretch; gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(transparent, rgba(20,14,8,.9) 25%);
  pointer-events: auto;
}
#sel-portrait {
  width: 92px; display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 2px solid var(--panel-line);
}
#portrait-canvas { width: 76px; height: 76px; image-rendering: pixelated; }
#sel-info { min-width: 170px; max-width: 260px; padding: 4px 0; }
#sel-name { font-size: 15px; font-weight: bold; color: var(--gold-bright); margin-bottom: 4px; letter-spacing: 1px; }
#sel-details { font-size: 12px; line-height: 1.5; color: #cabb96; white-space: pre-line; }
#sel-hp { margin-top: 6px; width: 150px; height: 9px; background: #20160c; border: 1px solid var(--panel-line); }
#sel-hp-fill { height: 100%; width: 0%; background: linear-gradient(#7ec850, #4a8a28); }
#sel-actions { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; flex: 1; padding: 4px 0; }
#sel-actions button { min-width: 118px; }
#sel-actions button .cost { display: block; font-size: 10px; color: #b0a080; letter-spacing: 0; }
#sel-actions button.active { border-color: var(--gold-bright); color: var(--gold-bright); }

/* Minimap */
#minimap-canvas {
  position: absolute; right: 10px; bottom: 10px;
  border: 2px solid var(--panel-line);
  background: #000;
  pointer-events: auto;
  cursor: pointer;
  image-rendering: pixelated;
}

/* Notifications */
#toasts {
  position: absolute; bottom: 128px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.toast {
  background: rgba(26, 19, 11, .92);
  border: 1px solid var(--panel-line);
  border-left: 4px solid var(--gold);
  color: var(--parchment);
  padding: 7px 16px;
  font-size: 13px;
  animation: toast-in .18s ease-out, toast-out .5s ease-in 3.6s forwards;
}
.toast.alert { border-left-color: var(--red); color: #ffb0a0; }
.toast.good  { border-left-color: #6ec850; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to   { opacity: 0; } }

/* Écran de fin */
#end-title.defeat { color: var(--red); }
#end-stats { font-size: 14px; line-height: 2; margin-bottom: 16px; color: #cabb96; }
#end-stats b { color: var(--parchment); }