/* Haritanın üst ortası (şeritlerin altı): haberci şeridi (#manset-serit, panel/manset.js) ve
   oda kipinde oyun bitince kazanan bandı (#oda-bant, oda/harita.js). İkisi tek sütunda alt alta
   akar, bu yüzden çakışamaz. Haberci tek satırdır: soldaki ince şerit diyarın rengi, simge
   olay türünü söyler (önemli: pirinç, kötü haber: tuğla, dostluk: zeytin). Tıklayınca köye
   gider. < 700 px'te şeritler iki satır olduğundan sütun aşağı iner. */

.hud-orta {
  position: absolute;
  top: calc(var(--hud-dokun) + 20px);
  left: 12px;
  right: 12px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.hud-orta > * { pointer-events: auto; max-width: min(580px, 100%); }
.hud-orta [hidden] { display: none; }

.manset-serit { display: flex; }
.mn-satir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: var(--hud-dokun);
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--cizgi);
  border-left: 3px solid var(--c, var(--cizgi));
  border-radius: var(--yaricap-2);
  background: var(--hud-yuzey);
  box-shadow: var(--hud-golge);
  color: var(--yazi-1);
  font: 500 15px/1.3 var(--hud-yazi-serif);
  text-align: left;
  animation: haberci-gir .25s ease-out;
}
.mn-satir:hover:not(:disabled) { background: var(--zemin-2); border-color: var(--yazi-3);
  border-left-color: var(--c, var(--yazi-3)); }
.mn-satir:disabled { cursor: default; opacity: .7; }
.mn-satir .simge-kap { color: var(--yazi-2); }
.mn-satir.onemli .simge-kap { color: var(--vurgu); }
.mn-satir.kotu .simge-kap { color: var(--kotu); }
.mn-satir.dost .simge-kap { color: var(--iyi); }
.mn-satir span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; }
.mn-satir small { font: 400 12px/1 var(--hud-yazi-sans); color: var(--yazi-3);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
@keyframes haberci-gir { from { opacity: 0; transform: translateY(-6px); } }

/* oda kipi: kazanan bandı (içeriği oda/harita.js kurar) */
.oda-bant {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 14px;
  border: 1px solid var(--vurgu);
  border-radius: var(--yaricap-2);
  background: var(--zemin-1);
  box-shadow: var(--hud-golge);
  color: var(--yazi-1);
  font: 600 14px/1.3 var(--hud-yazi-serif);
}
.o-bant-tac { display: inline-flex; color: var(--vurgu); }
.oda-bant button { height: calc(var(--hud-dokun) - 8px); padding: 0 12px;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap-2); background: var(--zemin-2);
  color: var(--yazi-1);
  font: 600 13px/1 var(--hud-yazi-sans); }
.oda-bant button:hover { border-color: var(--yazi-3); }
.oda-bant button:focus-visible { outline: 2px solid var(--odak); outline-offset: 2px; }
.oda-bant .o-bant-kapat { min-width: calc(var(--hud-dokun) - 8px); padding: 0; }

@container harita (max-width: 699px) {
  .hud-orta { top: calc(2 * var(--hud-dokun) + 28px); }
}