/* Oda lobisi (/oda, docs/diyar/tasarim/20_oda.md §20.4; css/sayfa/ortak.css'in kartları ve
   formları üstüne): oda durumu rozeti ve tip çipi (bu ikisi haritadaki oda şeridinde de
   kullanılır; oyun sayfası da bu dosyayı yükler), oda listesi, ayar alanları, tip kartları (tip
   renginde kenar), oyuncular, davet formu ve bağlantısı, sonuçta kazanan satırı. Haritadaki oda
   şeridi css/panel/oda.css, kazanan bandı css/harita/bant.css. */

/* oda durumu rozeti */
.o-rozet { display: inline-block; padding: 1px 8px; border-radius: var(--yaricap-hap); white-space: nowrap;
  font: 700 10.5px/1.5 var(--aile-sans); letter-spacing: .02em; border: 1px solid;
  background: var(--zemin-2); color: var(--yazi-2); border-color: var(--cizgi-guclu); }
.o-durum-bekliyor { background: var(--uyari-zemin); color: var(--uyari);
  border-color: var(--uyari-kenar); }
.o-durum-suruyor { background: var(--iyi-zemin); color: var(--iyi);
  border-color: var(--iyi-kenar); }
.o-durum-bitti { background: var(--zemin-2); color: var(--yazi-3); border-color: var(--cizgi); }

/* tip çipi: renkli nokta + ad */
.o-tip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; color: var(--c, var(--yazi-2)); }
.o-tip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--c, var(--yazi-2)); }

/* oda listesi (lobi) */
.o-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.o-satir { display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--cizgi-ince); }
.o-satir:first-child { border-top: 0; padding-top: 2px; }
.o-satir-yazi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.o-satir-bas { display: flex; align-items: center; gap: 8px; min-width: 0; }
.o-satir-bas b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.o-satir small { color: var(--yazi-2); font-size: 11.5px; }
.o-cipler { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.o-uye-cip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }
.o-uye-cip .o-tip { font-size: 0; gap: 0; }                 /* listede yalnız renkli nokta */

/* ayar alanları */
.o-ayar { display: flex; flex-direction: column; gap: 6px; }
.o-ayar-satir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.o-tahmin { margin: 0; color: var(--vurgu-acik); }

/* tip kartları */
.o-tipler { border: 0; margin: 10px 0 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.o-tipler legend { padding: 0 0 6px; font-weight: 600; font-size: 12.5px; }
.o-tip-kart { position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 9px 11px 10px 14px; border-radius: var(--yaricap-2); cursor: pointer; background: var(--zemin-alt);
  border: 1px solid var(--cizgi); border-left: 3px solid var(--c); }
.o-tip-kart:hover { background: var(--zemin-2); }
.o-tip-kart:has(input:checked) { border-color: var(--c); background: var(--zemin-3);
  box-shadow: 0 0 0 1px var(--c) inset; }
.o-tip-kart:has(input:focus-visible) { outline: 2px solid var(--vurgu-acik); outline-offset: 1px; }
.o-tip-kart input { position: absolute; opacity: 0; pointer-events: none; }
.o-tip-kart b { color: var(--c); font-size: 13.5px; }
.o-tip-kart span { font-size: 12px; color: var(--yazi-1); }
.o-tip-kart small { font-size: 11.5px; color: var(--yazi-2); }
.o-tipler:disabled .o-tip-kart { cursor: default; opacity: .7; }

/* oda ayrıntısı */
.o-bas h1 { margin: 0; font-size: 21px; overflow-wrap: anywhere; }
.o-bas .s-not { margin: 4px 0 10px; }
.o-kalan { margin: 0 0 12px; font: 600 13px var(--aile-sans); color: var(--vurgu-acik); }
.o-uyeler { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 2px; }
.o-uyeler li { display: flex; align-items: center; gap: 9px; padding: 6px 2px;
  border-bottom: 1px solid var(--cizgi-ince); }
.o-uyeler li .o-tip { min-width: 84px; }
.o-uyeler li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-isaret { padding: 0 6px; border-radius: var(--yaricap-1); background: var(--zemin-2); color: var(--yazi-2);
  font: 700 9.5px/1.6 var(--aile-sans); }
.o-isaret.sen { background: var(--vurgu-zemin); color: var(--vurgu-acik); }
.o-git { margin-left: auto; font-size: 12px; }
.o-davetliler { margin: 10px 0 0; }
.o-davet-form { display: flex; gap: 8px; margin-bottom: 12px; }
.o-davet-form input { flex: 1; min-width: 0; }
.s-govde .o-baglanti { font-size: 11.5px; }
.o-kazanan-bant { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--yaricap-2); font-weight: 700;
  background: var(--vurgu-zemin); color: var(--vurgu-acik); border: 1px solid var(--uyari-kenar); }
.s-tablo tr.o-kazanan td { background: var(--vurgu-zemin); color: var(--uyari); }
.o-katil .o-tipler { margin-bottom: 12px; }

@media (max-width: 560px) {
  .o-ayar-satir { grid-template-columns: minmax(0, 1fr); }
  .o-tipler { grid-template-columns: minmax(0, 1fr); }
  .o-satir { flex-direction: column; align-items: stretch; }
}

/* oda şeridindeki "Oda" yazısı (sola bakan ok `.simge.sol` css/sayfa/ortak.css'te) */
.o-oda-adi { font: italic 600 var(--boy-3) var(--aile-serif); color: var(--yazi-3); }
.o-sira .simge { width: 16px; height: 16px; vertical-align: middle; }