/* =====================================================================
   SHADOW KEEPER — style.css
   Retro piksel-art tema: tünd fon, pikselləşmiş render, HUD/inventar/modal.
   Bütün rənglər CONFIG paleti ilə uyğunlaşdırılıb (config.js).
   Oyun file:// rejimində işləyir — xarici font YOXDUR (offline monospace).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Qlobal sıfırlama və əsas tema
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /* CONFIG.COLOR_BG = #0b0d12 — oyun fonu ilə eyni tünd ton */
  background: #0b0d12;
  color: #cdd3df;
  /* Xarici font yox — yalnız sistem monospace (retro hiss üçün) */
  font-family: "Courier New", Courier, "Lucida Console", monospace;
  /* Piksel-art üçün hamar deyil, kəskin görünüş istəyirik */
  -webkit-font-smoothing: none;
  font-smoothing: none;
  overflow: hidden; /* Skroll yox — tam pəncərə oyunu */
  user-select: none; /* Mətn seçilməsi oyunu pozmasın */
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------------
   2. Oyun səhnəsi qabı (canvas + üst-qat HUD)
   Pəncərəni tam dolduran mərkəzləşdirilmiş sahə.
   --------------------------------------------------------------------- */
#game-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Səhnə ətrafı çox az qaranlıq vinyet hissi */
  background:
    radial-gradient(ellipse at center, #14171f 0%, #0b0d12 75%);
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   3. Canvas — render hədəfi
   Backing-store ölçüsü JS-dən (CONFIG.CANVAS_WIDTH/HEIGHT) gəlir.
   CSS yalnız böyüdüb ekrana sığdırır; piksellər kəskin qalır.
   --------------------------------------------------------------------- */
#game {
  display: block;
  /* Piksel-art kəskin böyütmə — Engine imageSmoothingEnabled=false ilə uyğun */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  /* Aspekt nisbətini saxlayaraq pəncərəyə sığdır (960x640 = 3:2) */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: #0b0d12; /* CONFIG.COLOR_BG */
  /* İncə piksel çərçivə — retro monitor hissi */
  border: 2px solid #3a3f4b; /* COLOR_WALL */
  box-shadow:
    0 0 0 2px #0b0d12,
    0 0 24px rgba(123, 92, 255, 0.18), /* COLOR_EXIT bənövşəyi parıltı */
    0 8px 40px rgba(0, 0, 0, 0.7);
  cursor: crosshair; /* Hücum nişanı — kursor nişangah */
}

/* =====================================================================
   4. HUD üst-qatı (sol-yuxarı bloku)
   Floor sayğacı + HP bar/mətn. Canvasın üstündə üzür.
   ===================================================================== */
#hud {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* HUD klikləri canvas-a ötürülsün (oyuna mane olmasın) */
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Floor (mərtəbə) sayğacı */
#floor-counter {
  font-size: 16px;
  font-weight: bold;
  color: #7b5cff; /* COLOR_EXIT — portal/mərtəbə teması */
  background: rgba(11, 13, 18, 0.72);
  padding: 6px 12px;
  border: 2px solid #3a3f4b; /* COLOR_WALL */
  border-radius: 0; /* Kəskin piksel künclər */
  text-shadow: 2px 2px 0 #0b0d12;
  display: inline-block;
  width: max-content;
}

/* HP track (xarici çubuq) */
#hp-bar {
  position: relative;
  width: 220px;
  height: 22px;
  background: rgba(11, 13, 18, 0.82);
  border: 2px solid #3a3f4b; /* COLOR_WALL */
  /* Daxili kölgə — boşluq dərinliyi hissi */
  box-shadow: inset 0 0 0 2px #1d2027; /* COLOR_FLOOR_ALT */
  overflow: hidden;
}

/* HP fill (daxili rəngli zolaq) — eni JS-dən %-lə təyin olunur */
#hp-bar-fill {
  height: 100%;
  width: 100%; /* JS yeniləyir: updateHUD() */
  /* Yüksək HP yaşıl → aşağı HP qırmızı keçidi (vizual ipucu) */
  background: linear-gradient(
    90deg,
    #e05260 0%,    /* COLOR_HP_LOW */
    #5ad469 55%    /* COLOR_HP_HIGH */
  );
  /* Piksel-art üçün hamar keçid yox — kəskin doldurma */
  transition: width 0.12s linear;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}

/* HP mətni (məs. 100/100) — barın üstündə oxunaqlı */
#hp-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px; /* #hp-bar ilə eyni en */
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  text-shadow:
    1px 1px 0 #0b0d12,
    -1px -1px 0 #0b0d12,
    1px -1px 0 #0b0d12,
    -1px 1px 0 #0b0d12;
  pointer-events: none;
}

/* HP bar + mətnin eyni yerdə üst-üstə düşməsi üçün sarğı qab.
   (index.html-də #hp-bar və #hp-text yan-yana ola bilər; relativ kontekst HUD verir) */
#hp-bar {
  /* #hp-text mütləq yerləşmə üçün bunu istinad nöqtəsi edirik */
  position: relative;
}

/* =====================================================================
   5. Inventar paneli (sağ-yuxarı)
   Toplanmış əşyalar — kiçik piksel "çip"lər.
   ===================================================================== */
#inventory {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  max-width: 200px;
  background: rgba(11, 13, 18, 0.72);
  border: 2px solid #3a3f4b; /* COLOR_WALL */
  padding: 8px;
  pointer-events: none;
}

/* Inventar başlığı (varsa) — CSS ::before ilə etiket */
#inventory::before {
  content: "INVENTORY";
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  color: #6b7280;
  text-transform: uppercase;
  margin-bottom: 6px;
  text-align: right;
}

/* Inventar siyahısı — şəbəkə şəklində çiplər */
#inventory-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* Hər bir əşya çipi — game.js <li class="inv-item"> əlavə edir */
.inv-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #cdd3df;
  background: #23262e; /* COLOR_FLOOR */
  border: 2px solid #4b5160; /* COLOR_WALL_TOP */
  padding: 4px 8px;
  /* Kiçik 3D piksel hissi */
  box-shadow: 2px 2px 0 #0b0d12;
  white-space: nowrap;
}

/* Qılınc və qalxan üçün incə rəng vurğuları (mətnə görə) —
   game.js sadəcə item.name yazır, biz adına görə rəngləyə bilərik.
   Ümumi çip rəngi qızılı toxunuş alsın. */
.inv-item::before {
  /* Kiçik kvadrat ikon yer tutucu — piksel "daş" */
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #c9a227; /* COLOR_CHEST — qızılı əşya tonu */
  box-shadow: inset 0 0 0 1px #0b0d12;
}

/* =====================================================================
   6. Game Over modalı (mərkəzləşmiş, qaranlıq örtüklü)
   .hidden ilə gizlədilir/göstərilir (game.js sinifi əlavə/silir).
   ===================================================================== */
#game-over {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  /* Tünd yarı-şəffaf örtük — arxa səhnəni qaraldır */
  background: rgba(7, 8, 12, 0.82);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Modal başlığı — CSS ::before ilə "GAME OVER" (HTML mətni varsa o da görünər) */
#game-over::before {
  content: "GAME OVER";
  display: block;
  font-size: 44px;
  font-weight: bold;
  color: #e05260; /* COLOR_ENEMY/HP_LOW — ölüm qırmızısı */
  text-shadow:
    4px 4px 0 #0b0d12,
    0 0 20px rgba(224, 82, 96, 0.5);
  margin-bottom: 6px;
}

/* Modal daxilindəki statistika mətni (final-floor / final-kills sarğısı) */
#game-over p,
#game-over .stats {
  font-size: 16px;
  color: #cdd3df;
  margin: 0;
}

/* Statistika dəyərləri vurğulanır */
#final-floor,
#final-kills {
  color: #7b5cff; /* COLOR_EXIT bənövşəyi vurğu */
  font-weight: bold;
  font-size: 18px;
  text-shadow: 2px 2px 0 #0b0d12;
}

/* Restart düyməsi — piksel düymə */
#restart-btn {
  margin-top: 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #0b0d12;
  background: #4fd1c5; /* COLOR_PLAYER — diqqət çəkən firuzəyi */
  border: 2px solid #2a8f86;
  padding: 12px 28px;
  cursor: pointer;
  /* Kəskin piksel kölgə */
  box-shadow: 4px 4px 0 #0b0d12;
  transition: transform 0.06s linear, box-shadow 0.06s linear;
}

#restart-btn:hover {
  background: #5ee0d4;
}

/* Klik anında "basılma" effekti — kölgə kiçilir, düymə enir */
#restart-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #0b0d12;
}

#restart-btn:focus {
  outline: 2px dashed #7b5cff; /* COLOR_EXIT — klaviatura fokusu görünsün */
  outline-offset: 3px;
}

/* =====================================================================
   7. Köməkçi siniflər
   ===================================================================== */
/* Modal və digər elementlər bununla gizlədilir (kontraktda tələb olunur) */
.hidden {
  display: none !important;
}

/* =====================================================================
   8. Kiçik ekran uyğunlaşması (canvas onsuz da CSS ilə böyüyür/kiçilir)
   ===================================================================== */
@media (max-width: 700px) {
  #hp-bar,
  #hp-text {
    width: 160px;
  }
  #floor-counter {
    font-size: 13px;
  }
  #game-over::before {
    font-size: 32px;
  }
  #inventory {
    max-width: 150px;
  }
}