/* Sol alt: "?" yardım düğmesi, açılınca yardım kartı (hud/yardim.js) ve lejant kartı (#mod-not,
   hud/lejant.js: normal modda arazi renkleri, başka modda modun adı, açıklaması ve renk ölçeği);
   sağ alt: dünya haritası (mini harita, çizimi panel/mini.js). Mini harita denetimlerin soluna
   oturur; < 700 px'te denetimlerin üstüne çıkar ve küçülür, lejant daralır. Arazi renkleri
   haritanın mevsim paletinden JS ile verilir (lejant onları gösterir). */

.hud-alt-sol {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 5;                      /* yardım kartı mini haritanın üstünde açılır */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: calc(100% - 300px);
  pointer-events: none;
}
.hud-alt-sol > * { pointer-events: auto; }
.lj-sira { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; }
.hud-simge-dugme { padding: 0; flex: none; }
.hud-simge-dugme .simge-kap { color: var(--yazi-2); }

.lejant-kart {
  min-width: 0;
  max-height: 34vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-2);
  background: var(--hud-yuzey);
  box-shadow: var(--hud-golge);
  color: var(--yazi-2);
  font: 400 12.5px/1.4 var(--hud-yazi-sans);
}
.lj-ad { font: 600 14.5px/1.2 var(--hud-yazi-serif); color: var(--yazi-1); }
.lj-govde { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; }
.lj-not { margin: 0; color: var(--yazi-3); font-size: 12px; }
.lj-govde > span, .lj-oge { display: inline-flex; align-items: center; gap: 6px; }
.lj-govde i { display: inline-block; flex: none; width: 11px; height: 11px; border-radius: 2px;
  border: 1px solid var(--cizgi); }
/* lejant işaretleri: çizimdeki karşılığının biçimi (renk --r'den) */
.lj-isaret.kare { background: var(--r); }
.lj-isaret.cizgi, .lj-isaret.kesik { width: 18px; height: 0; border: 0; border-radius: 0;
  border-top: 3px solid var(--r); }
.lj-isaret.kesik { border-top-style: dashed; }
.lj-isaret.halka { width: 13px; height: 13px; border: 2px solid var(--r); border-radius: 50%;
  background: none; }
/* arazi kareleri: renk --r (ve dağın kar başlığı --r2) haritanın mevsim paletinden
   (hud/mod_bilgi.js, cizim/zemin/palet.js); burada renk sabiti yok */
.lj-arazi i { background: var(--r); }
.lj-arazi .a-dag { background: linear-gradient(135deg, var(--r) 55%, var(--r2) 55%); }

.yardim-kart {
  width: min(320px, 100cqw - 24px);
  padding: 12px 14px 10px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-2);
  background: var(--zemin-0);
  box-shadow: var(--hud-golge);
  color: var(--yazi-2);
}
.yardim-kart h2 { margin: 0 0 8px; font: 600 15px/1.2 var(--hud-yazi-serif); color: var(--yazi-1); }
.yardim-kart dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 12px;
  align-items: baseline; margin: 0; font: 400 12.5px/1.35 var(--hud-yazi-sans); }
.yardim-kart dt { justify-self: start; }
.yardim-kart dd { margin: 0; }
.yardim-kart kbd { display: inline-block; min-width: 24px; padding: 1px 7px;
  border: 1px solid var(--cizgi); border-bottom-width: 2px; border-radius: var(--yaricap-1);
  background: var(--zemin-1); color: var(--yazi-1);
  font: 600 12px/1.5 var(--hud-yazi-sans); text-align: center; }
.yardim-kart .atif { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--cizgi);
  font: 400 11.5px/1.3 var(--hud-yazi-sans); color: var(--yazi-3); }

/* dünya haritası */
.mini-harita {
  position: absolute;
  right: calc(var(--hud-dokun) + 24px);
  bottom: 12px;
  z-index: 4;
  width: 190px;
  height: 140px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-2);
  background: var(--zemin-1);
  box-shadow: var(--hud-golge);
  cursor: crosshair;
  touch-action: none;
}
.mini-harita:focus-visible { outline: 2px solid var(--odak); outline-offset: 2px; }

@container harita (max-width: 699px) {
  .mini-harita { right: 12px; bottom: calc(5 * var(--hud-dokun) + 4 * 6px + 20px); width: 120px;
    height: 90px; }
  .hud-alt-sol { max-width: calc(100% - var(--hud-dokun) - 36px); }
}