/* KELLE ARENA — lobi görünümü (oyun ana menüsü).
   Yön korunur: koyu zemin, turuncu vurgu, Bahnschrift başlıklar.
   Düzen GRID ile kurulur; sabit 355px/960px dayanakları KALDIRILDI (16 Eki).
   Karakter kendi kapsayıcısında (.lobi-karakter) — odaların altına girmez. */
:root{--bg:#141820;--overlay:#10151d;--panel:#191f28;--panel-2:#121922;--panel-3:#242e3b;--metin:#f3f3ee;--metin-2:#c9d0db;--vurgu:#ff9548;--vurgu-metin:#231b15;--r:9px;--r-kucuk:6px}

/* ---- kabuk: başlık / menü / gövde tek dikey akış ---- */
#e-lobi{position:relative;isolation:isolate;min-height:100svh;display:grid;
  grid-template-rows:auto auto 1fr;
  background:radial-gradient(ellipse at 38% 46%,#31403355,transparent 58%),#141820}
#e-lobi .ustbar{background:none;border:0;padding:20px clamp(18px,3vw,36px);gap:14px;align-items:center}
#e-lobi .logo{line-height:1}
#e-lobi .sayac{background:#11182299;border:1px solid #ffffff18;border-radius:6px;padding:7px 12px;font-size:14px}
#e-lobi .lobi-hesap{display:flex;align-items:center;gap:14px;margin-left:auto}
#ustAd{color:#eff2f6;opacity:1;font-weight:600}
#btnCikis{border-color:#ffffff20;color:#bbc5d1;background:none;font-size:11px;min-height:38px}
.lobi-menu{display:flex;gap:clamp(18px,2.4vw,30px);align-items:center;margin:4px clamp(18px,3vw,36px) 0}
.lobi-menu button{font:700 clamp(17px,1.7vw,22px)/1.15 'Bahnschrift SemiCondensed','Bahnschrift','Arial Narrow',sans-serif;font-stretch:condensed;letter-spacing:.7px;padding:10px 0;min-height:46px;background:none;border:0;border-bottom:3px solid transparent;border-radius:0;color:#bdc8d5}
.lobi-menu button:hover{color:#fff}
.lobi-menu button.aktif{color:#fff7ec;border-bottom-color:var(--vurgu)}

/* Oda listesi + OYNA tarafına hafif koyu panel (okunaklılık). */
#e-lobi .lobi-odalar{position:relative}
#e-lobi .lobi-odalar::before{content:'';position:absolute;inset:-14px -16px -10px -18px;z-index:-1;
  background:linear-gradient(90deg,#10151d00,#10151dcc 18%,#10151de8);border-radius:14px}
#e-lobi .ustbar,#e-lobi .lobi-menu,#e-lobi main{position:relative;z-index:1}

/* flex: #devamKutu gizliyken (display:none) grid satır eşlemesi kayıyor ve
   sahne `auto` satıra düşüp yükseklik alamıyordu. */
#e-lobi main{max-width:none;margin:0;padding:0;display:flex;flex-direction:column;min-height:0}

/* ---- sahne: solda karakter, sağda odalar. İKİSİ AYRI HÜCRE (üst üste binmez) ---- */
.lobi-sahne{flex:1;display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,25vw,360px);
  gap:clamp(16px,2vw,34px);align-items:stretch;
  padding:clamp(10px,1.6vh,26px) clamp(18px,3vw,36px) clamp(18px,2.4vh,34px);min-height:0}

/* karakter alanı */
/* place-items:center KULLANMA: tuvali germiyordu, min-height'ta kalıp altta
   ölü boşluk bırakıyordu. Hücreyi doldur (stretch), kadrajı JS hesaplar. */
.lobi-karakter{position:relative;min-height:0;min-width:0;display:grid;border-radius:12px}
#lobiModel{width:100%;height:100%;min-height:clamp(260px,46vh,560px);position:relative}
#lobiModel canvas{width:100%;height:100%;display:block}
/* yükleniyor / hata: sade durum, oda seçimini engellemez */
#lobiModel[data-durum="yukleniyor"]::after{content:'';position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:2px solid #ffffff22;border-top-color:var(--vurgu);border-radius:50%;animation:lobiDon .9s linear infinite}
#lobiModel[data-durum="hata"]{background:radial-gradient(ellipse at 50% 68%,#1d2633,transparent 70%)}
@keyframes lobiDon{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#lobiModel[data-durum="yukleniyor"]::after{animation-duration:2.4s}}
#lobiModelNot{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);color:#9aa6b4;font-size:11px;text-align:center;pointer-events:none}
#lobiModelNot:empty{display:none}

/* ---- odalar + OYNA: tek akış ---- */
.lobi-odalar{display:flex;flex-direction:column;min-width:0;min-height:0}
.lobi-odalar h2{font:600 12px/1.4 'Segoe UI',sans-serif;letter-spacing:1px;color:#cbd2dd;margin:0 0 12px}
.lobi-odalar #odaListe{display:grid;gap:9px;margin:0;align-content:start}
.lobi-odalar .oda{position:relative;width:100%;padding:15px 17px;background:#1b2330df;border:1px solid #ffffff25;border-radius:8px;cursor:pointer;transform:none;min-width:0;transition:background .15s,border-color .15s}
.lobi-odalar .oda:hover:not(.dolu){transform:none;background:#273344;border-color:#ffffff65}
.lobi-odalar .oda.secili{border-color:var(--vurgu);background:#302820e8;box-shadow:0 0 0 1px #ff954855}
.lobi-odalar .oda h3{font:650 18px/1.2 'Bahnschrift','Segoe UI',sans-serif;letter-spacing:.3px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
/* durum rozeti: SEÇİLİ / DOLU / KAPALI — sadece gerçek duruma göre js basar */
.lobi-odalar .oda .rozet{margin-left:auto;font:600 10px/1 'Segoe UI',sans-serif;letter-spacing:.6px;padding:4px 7px;border-radius:4px;border:1px solid currentColor;opacity:.9}
.lobi-odalar .oda.secili .rozet{color:var(--vurgu)}
.lobi-odalar .oda.dolu .rozet,.lobi-odalar .oda.kapali .rozet{color:#9aa6b4}
.lobi-odalar .oda .doluluk{margin-bottom:0}
.lobi-odalar .oda .cubuk{height:4px;background:#ffffff0c}
.lobi-odalar .oda .cubuk i{background:var(--vurgu)}
.lobi-odalar .oda .kisi{color:#c8d0dc;font:12px 'Segoe UI',sans-serif}
/* 25 Eki (oyuncu: "her odanın altında turuncu bir buton ile odaya gir olsun"): KATIL düğmesi artık görünür */
.lobi-odalar .oda>.birincil{display:block;width:100%;margin-top:10px;padding:10px 12px;background:var(--vurgu);color:var(--vurgu-metin);
  border:0;border-radius:var(--r-kucuk);font-weight:800;letter-spacing:.06em;cursor:pointer;transition:filter .15s,transform .1s}
.lobi-odalar .oda>.birincil:hover:not(:disabled){filter:brightness(1.1)}
.lobi-odalar .oda>.birincil:active:not(:disabled){transform:translateY(1px)}
.lobi-odalar .oda>.birincil:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lobi-odalar .oda>.birincil:disabled{filter:grayscale(.6) brightness(.7);cursor:wait}
.lobi-odalar .oda>.ikincil{min-height:35px;padding:7px 10px;font-size:11px}
.lobi-odalar .oda.dolu,.lobi-odalar .oda.kapali{cursor:default;opacity:.62}
.lobi-odalar .oda:focus-visible,.lobi-menu button:focus-visible,#lobiOyna:focus-visible{outline:2px solid #fff;outline-offset:4px}
#odaBos{padding:16px 0}

.oyna-alani{margin-top:14px}
#lobiOyna{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;min-height:62px;padding:15px 22px;border-radius:8px;
  font:800 clamp(21px,2vw,26px)/1 'Bahnschrift','Arial Narrow',sans-serif;letter-spacing:.5px}
#lobiOyna::after{content:'→';font:1em 'Segoe UI',sans-serif;transition:transform .15s}   /* dış bağlantı ↗ değil */
#lobiOyna:disabled::after,#lobiOyna[data-durum="katiliniyor"]::after{content:''}
#lobiOyna:hover:not(:disabled){background:#ffad70}
#lobiOyna:hover:not(:disabled)::after{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){#lobiOyna::after{transition:none}#lobiOyna:hover:not(:disabled)::after{transform:none}}
#lobiSecimNot{min-height:30px;margin:10px 0 0;font-size:11px;color:#b8c4d1;line-height:1.6}

#devamKutu{position:relative;margin:4px clamp(18px,3vw,36px) 0;max-width:650px;background:#1e2b36ed;border-color:#ff954866}
#e-giris .kart{background:#191f28;border-color:#ffffff20;box-shadow:0 20px 90px #0005}
#e-giris .x-btn{background:#f4f4ef;color:#151b23;border-radius:7px}
#e-market .ustbar,#e-profil .ustbar,#e-rehber .ustbar{background:#131a23;border-color:#ffffff20}
.profil-cuzdan{margin-top:16px}
.profil-cuzdan .cuzdanYer{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ---- dar masaüstü / tablet: tek sütun, karakter üstte ---- */
@media(max-width:900px){
  .lobi-sahne{grid-template-columns:minmax(0,1fr);gap:14px}
  .lobi-karakter{min-height:0}
  #lobiModel{min-height:clamp(200px,30svh,320px)}
}

/* ---- mobil: kompakt başlık, kendi karakter alanı, altta yapışkan OYNA ---- */
@media(max-width:600px){
  #e-lobi .ustbar{padding:14px 16px;gap:9px;flex-wrap:wrap}
  #e-lobi .sayac{font-size:12px;padding:6px 9px}
  .lobi-hesap{gap:9px!important}
  .lobi-menu{margin:2px 16px 0;gap:20px}
  .lobi-menu button{font-size:18px;min-height:42px}
  /* karakter kalan boşluğu alır; odalar + yapışkan OYNA altta toplanır
     (eskiden sayfa sonunda büyük ölü alan kalıyordu) */
  .lobi-sahne{padding:8px 16px 0;gap:10px;grid-template-rows:minmax(0,1fr) auto;align-content:stretch}
  #lobiModel{min-height:clamp(170px,26svh,250px)}
  #devamKutu{margin:10px 16px 0;display:flex;flex-wrap:wrap;gap:12px}
  #devamKutu[hidden]{display:none}
  /* OYNA ekranın altına yapışır; kendi akışında kaldığı için son kartı KALICI örtmez.
     Zemin opak + safe-area payı: iPhone ana ekran çubuğunun altında kalmaz. */
  .oyna-alani{position:sticky;bottom:0;z-index:3;margin-top:12px;
    padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,#14182000,#141820e8 22%,#141820)}
  #lobiOyna{min-height:56px}
  #lobiSecimNot{min-height:0;margin-top:7px}
  .lobi-odalar{padding-bottom:4px}
}

/* ---- ODA KART GÖRSELLERİ (16 Eki, oyuncu isteği) ----
   Gerçek oyun sahnesinden alınmış kareler (HUD/silah yok). Görsel CSS'te
   data-oda ile bağlanır: lobi.js kartları her yenilemede baştan çizdiği için
   JS kancası gerekmez. Bilinmeyen oda -> düz kart (eski görünüm).
   Metin okunaklılığı: alttan koyulaşan katman + hafif gölge. */
.lobi-odalar .oda[data-oda="anadolu"]{--oda-gorsel:url('/assets/lobi/oda_anadolu.jpg')}
.lobi-odalar .oda[data-oda="rumeli"]{--oda-gorsel:url('/assets/lobi/oda_rumeli.jpg')}
.lobi-odalar .oda[data-oda="ege"]{--oda-gorsel:url('/assets/lobi/oda_ege.jpg')}
.lobi-odalar .oda[data-oda="karadeniz"]{--oda-gorsel:url('/assets/lobi/oda_karadeniz.jpg')}
.lobi-odalar .oda[data-oda="yayla"]{--oda-gorsel:url('/assets/lobi/oda_karadeniz.jpg')}
.lobi-odalar .oda[data-oda="kafkas"]{--oda-gorsel:url('/assets/lobi/oda_kafkas.jpg')}
.lobi-odalar .oda{
  min-height:112px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,#12182033 0%,#121820b8 58%,#121820f2 100%),var(--oda-gorsel,linear-gradient(#1b2330,#1b2330));
  background-color:#1b2330;background-size:cover,cover;background-position:center,center 58%;
  transition:background-size .3s ease,border-color .15s,box-shadow .15s}
.lobi-odalar .oda:hover:not(.dolu){background:linear-gradient(180deg,#12182014 0%,#121820a3 58%,#121820ee 100%),var(--oda-gorsel,linear-gradient(#273344,#273344));
  background-color:#273344;background-size:cover,cover;background-position:center,center 58%;border-color:#ffffff65}
.lobi-odalar .oda.secili{background:linear-gradient(180deg,#ff954812 0%,#1a1612b0 58%,#1a1612f2 100%),var(--oda-gorsel,linear-gradient(#302820,#302820));
  background-color:#302820;background-size:cover,cover;background-position:center,center 58%}
.lobi-odalar .oda h3{text-shadow:0 1px 3px #000c}
.lobi-odalar .oda .kisi{text-shadow:0 1px 2px #000b}
.lobi-odalar .oda.dolu,.lobi-odalar .oda.kapali{opacity:.55;filter:saturate(.35)}
@media(max-width:600px){.lobi-odalar .oda{min-height:86px}}
@media(prefers-reduced-motion:reduce){.lobi-odalar .oda{transition:none}}

/* ---- TİPOGRAFİ (16 Eki, oyuncu: "yazılar dandik duruyor") ----
   Sistem fontuna düşmek yerine yerel sunulan iki aile (assets/fonts, OFL):
   Oxanium = logo, menü, oda adı, OYNA, sayaçlar (keskin, teknik)
   Barlow Semi Condensed = her türlü metin, etiket, düğme (sıkı, okunaklı)
   Sayılar tabular (hizalı); büyük harf etiketlerde harf aralığı açık. */
:root{--f-baslik:'Silkscreen','Oxanium','Bahnschrift','Segoe UI',sans-serif;
      --f-metin:'Barlow Semi Condensed','Bahnschrift SemiCondensed','Segoe UI',sans-serif}
body{font-family:var(--f-metin);font-weight:500;letter-spacing:.15px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select{font-family:var(--f-metin)}
button{letter-spacing:.8px}

#e-lobi .logo,#e-giris h1,#e-giris .logo,.ustbar h2{font-family:var(--f-baslik);font-weight:800;letter-spacing:2px;text-transform:uppercase}
#e-lobi .logo{line-height:1}
#e-lobi .sayac{font-family:var(--f-baslik);font-weight:700;font-size:14px;letter-spacing:.5px;font-variant-numeric:tabular-nums}
#ustAd{font-family:var(--f-metin);font-weight:700;font-size:16px;letter-spacing:.3px}
#btnCikis{font-family:var(--f-metin);font-weight:700;letter-spacing:1.5px}

.lobi-menu button{font-family:var(--f-baslik);font-weight:700;font-stretch:normal;font-size:clamp(14px,1.25vw,17px);letter-spacing:1px}

.lobi-odalar h2{font-family:var(--f-baslik);font-weight:400;font-size:11px;letter-spacing:2px;color:#9fadbd}
.lobi-odalar .oda h3{font-family:var(--f-baslik);font-weight:700;font-size:17px;letter-spacing:1px}
.lobi-odalar .oda .rozet{font-family:var(--f-metin);font-weight:700;font-size:10.5px;letter-spacing:1.5px}
.lobi-odalar .oda .kisi{font-family:var(--f-baslik);font-weight:400;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.5px}
#lobiOyna{font-family:var(--f-baslik);font-weight:700;font-size:clamp(20px,1.8vw,25px);letter-spacing:3px}
#lobiOyna::after{font-family:var(--f-metin);letter-spacing:0}
#lobiSecimNot{font-family:var(--f-metin);font-weight:600;font-size:12px;letter-spacing:1px;font-variant-numeric:tabular-nums}
#lobiModelNot{font-family:var(--f-metin);font-weight:500;letter-spacing:.5px}

/* market / profil / giriş kartları: başlıklar ve etiketler aynı sistemden */
.kart h3{font-family:var(--f-baslik);font-weight:700;letter-spacing:1px}
.etiket{font-family:var(--f-metin);font-weight:600;letter-spacing:1px}
.sekme{font-family:var(--f-baslik);font-weight:700;letter-spacing:1px}
.mini,.soluk{letter-spacing:.2px}

/* ---- ARKA PLAN ÇATIŞMASI (16 Eki) ----
   Tüm lobinin arkasında canlı 3B sahne. Üstüne koyu katman: öndeki karakter
   ve oda paneli okunaklı kalır, çatışma geri planda kalır. */
#lobiSavas{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
#lobiSavas.hazir{opacity:1}
#lobiSavas canvas{width:100%;height:100%;display:block}
#lobiSavas::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,#141820f0 0%,#14182066 34%,#14182055 62%,#141820e6 100%),
             linear-gradient(90deg,#14182000 55%,#141820cc 82%)}
@media(prefers-reduced-motion:reduce){#lobiSavas{transition:none}}

/* LOBİ SEKMELERİ KUTU (17 Eki, oyuncu: "kutucuklar içinde güzel bir şekilde") */
.lobi-menu{gap:10px}
.lobi-menu button{padding:10px 20px;min-height:46px;border:1px solid #ffffff22;border-bottom:1px solid #ffffff22;border-radius:10px;
  background:#101721b8;backdrop-filter:blur(3px);color:#cfd8e3;transition:background .15s,border-color .15s,color .15s}
.lobi-menu button:hover{border-color:#ffffff44;background:#18212dcc;color:#fff}
.lobi-menu button.aktif{background:var(--vurgu);border-color:var(--vurgu);color:#1a1200}
/* lobi içi içerik (Market / Profil / Rehber) */
#e-lobi main.lobi-icerik{max-width:760px;margin:22px clamp(18px,3vw,36px) 40px;padding:0}
#e-lobi main.lobi-icerik .kart{background:#141b25e8;backdrop-filter:blur(4px)}
#e-lobi .icerik-ust{display:flex;justify-content:flex-end;margin-bottom:12px}
@media (max-width:600px){.lobi-menu{flex-wrap:wrap}.lobi-menu button{padding:8px 13px;min-height:40px}}
#btnEthOde,#btnMusluk,#btnCikis{font-family:var(--f-baslik);font-weight:700;letter-spacing:1px}

/* ---- OYUNCU ODALARI (20 Eki) ---- */
.lobi-sag{display:flex;flex-direction:column;gap:22px;min-width:0;min-height:0;overflow-y:auto}
.lobi-salonlar{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0}
.salon-baslik{display:flex;align-items:center;justify-content:space-between;gap:10px}
.salon-baslik h2{font:600 12px/1.4 'Segoe UI',sans-serif;letter-spacing:1px;color:#cbd2dd;margin:0}
.salon-baslik .birincil{padding:7px 12px;font-size:12px;border-radius:6px}
.salon-liste{display:grid;gap:8px;max-height:46vh;overflow-y:auto}
.salon-kart{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:11px 13px;background:#1b2330df;
  border:1px solid #ffffff25;border-radius:8px;text-align:left;color:var(--metin);cursor:pointer;width:100%}
.salon-kart:hover:not(:disabled){background:#273344;border-color:#ffffff65}
.salon-kart:focus-visible{outline:2px solid #fff;outline-offset:3px}
.salon-kart:disabled{opacity:.55;cursor:default}
.salon-kart .ad{font:650 15px/1.2 'Bahnschrift','Segoe UI',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.salon-kart .carpan{font:700 13px/1 var(--mono);color:var(--vurgu);justify-self:end;font-variant-numeric:tabular-nums}
.salon-kart .alt{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;color:#aab4c2}
.salon-kart .alt .oyunda{color:var(--basari)}
.salon-kart .alt .kilit{color:#e7b25c}

.salon-form{width:min(500px,94vw);display:grid;gap:12px;max-height:92vh;overflow:auto}
.salon-form label{display:grid;gap:5px;font-size:12.5px;color:var(--metin-2)}
.salon-form fieldset{border:0;padding:0;margin:0;display:grid;gap:6px}
.salon-form legend{font-size:12.5px;color:var(--metin-2);padding:0;margin-bottom:6px}
.salon-form select{width:100%;padding:9px 11px;border-radius:var(--r-kucuk);border:1px solid #3a4756;background:#0d1218;color:var(--metin)}
.salon-form-ikili{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.secim-dizi{display:flex;flex-wrap:wrap;gap:6px}
.secim-dizi button{min-width:58px;padding:8px 10px;border-radius:6px;background:var(--panel-3);border:1px solid var(--cizgi-2);color:var(--metin-2);font:600 13px var(--mono);font-variant-numeric:tabular-nums}
.secim-dizi button[aria-pressed="true"]{background:var(--vurgu);color:var(--vurgu-metin);border-color:var(--vurgu)}
.secim-dizi button small{display:block;font-size:10px;opacity:.75;font-weight:400}

.salon-bekleme{width:min(780px,95vw);max-height:94vh;overflow:auto;display:grid;gap:14px}
.sb-ust{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sb-ust h2{margin:0 0 4px;word-break:break-word}
.sb-durum{font:600 11px/1 'Segoe UI',sans-serif;letter-spacing:.6px;padding:6px 9px;border-radius:4px;border:1px solid currentColor;white-space:nowrap;color:#9aa6b4}
.sb-durum[data-d="oyunda"]{color:var(--basari)}
.sb-durum[data-d="hazirlaniyor"]{color:var(--bilgi)}
.sb-govde{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:14px}
.sb-uyeler{list-style:none;margin:0;padding:0;display:grid;gap:6px;align-content:start}
.sb-uyeler li{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--panel-2);border:1px solid var(--cizgi);border-radius:7px;min-width:0}
.sb-uyeler li .ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-uyeler li .pfp{width:24px;height:24px;border-radius:50%}
.sb-uyeler .rozet{font:600 10px/1 'Segoe UI',sans-serif;letter-spacing:.5px;padding:4px 7px;border-radius:4px;border:1px solid currentColor}
.sb-uyeler .rozet.hazir{color:var(--basari)}
.sb-uyeler .rozet.bekliyor{color:#9aa6b4}
.sb-uyeler .rozet.kurucu{color:var(--vurgu)}
.sb-uyeler .rozet.oyunda{color:var(--bilgi)}
.sb-uyeler .at{background:none;border:1px solid #b0434366;color:var(--tehlike);padding:3px 7px;border-radius:4px;font-size:11px}
.sb-ayar{display:grid;gap:7px;align-content:start;background:var(--panel-2);border:1px solid var(--cizgi);border-radius:8px;padding:12px}
.sb-satir{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--metin-2)}
.sb-satir b{color:var(--metin);font-variant-numeric:tabular-nums}
.sb-not{margin:6px 0 0;line-height:1.45}
.sb-dugmeler{justify-content:flex-end;flex-wrap:wrap;gap:8px}
@media (max-width:640px){.sb-govde,.salon-form-ikili{grid-template-columns:1fr}}

/* sabit klasman odaları: ölüm bedeli satırı (20 Eki) */
.oda .oda-bedel { margin: 2px 0 8px; font-size: 13px; color: #e7c478; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
/* çarpan etiketi (21 Eki): kartın başında 1x / 5x / 10x … */
.oda h3 .oda-carpan { font: 700 15px/1 'Bahnschrift','Segoe UI',sans-serif; color: #1a1208; background: #ff9548; padding: 4px 7px; border-radius: 4px; letter-spacing: .02em; min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; box-sizing: border-box; width: auto; }
/* kilitli kartın kendi düğmesi (JETON YETMİYOR vb.) rozette zaten yazıyor */
.lobi-odalar .oda > button.ikincil:disabled { display: none; }
#modalOdaFiyat .of-carpan { font: 700 34px/1 'Bahnschrift','Segoe UI',sans-serif; color: #ff9548; margin: 0 0 6px; }
#modalOdaFiyat .of-fiyat { margin: 12px 0 0; font-size: 18px; font-variant-numeric: tabular-nums; }
#modalOdaFiyat .of-fiyat b { color: #e7c478; }
/* 21 Eki: oda kur — kelle ödülü serbest giriş */
.sk-odul{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px}
.sk-odul input{width:110px}

/* ==== LOBİ DÜZENİ v2 (25 Eki, oyuncu: "ölçekleme kötü, karakterin ayakları görünmüyor; hazır odalar küçük olsun;
   kurulan odalar yanında yeşil, sığmazsa sayfa düğmesi") ==== */
@media(min-width:901px){
  /* lobi ekrana SABİT: oda listesi uzayınca sahne aşağı taşmasın (karakter kadrajı ekran içinde kalır) */
  #e-lobi{height:100svh;overflow:hidden}
  #e-lobi main{overflow:hidden}
  #e-lobi main.lobi-icerik{overflow-y:auto}
  .lobi-sahne{grid-template-columns:minmax(0,1fr) clamp(540px,40vw,740px)}
  .lobi-sag{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;overflow:hidden}
  .lobi-odalar,.lobi-salonlar{min-height:0;overflow:hidden}
  .lobi-odalar #odaListe{overflow-y:auto;min-height:0}
  .lobi-salonlar .salon-liste{flex:1;min-height:0;max-height:none;overflow:hidden;align-content:start}
}
/* hazır odalar: KOMPAKT kart */
.lobi-odalar #odaListe{gap:7px}
.lobi-odalar .oda{padding:9px 12px}
.lobi-odalar .oda h3{font-size:15px;margin:0 0 5px}
.lobi-odalar .oda .oda-carpan{font-size:11px;padding:2px 6px}
.lobi-odalar .oda .oda-bedel{font-size:11px;margin:0 0 4px}
.lobi-odalar .oda .kisi{font-size:11px}
.lobi-odalar .oda>.birincil{margin-top:7px;padding:7px 10px;font-size:12px}
.lobi-odalar .oda>.ikincil{min-height:28px;padding:5px 8px;font-size:10px;margin-top:5px!important}
.lobi-odalar .oyna-alani{margin-top:10px}
/* oyuncu odaları: YEŞİL */
.lobi-salonlar{--yesil:#3fcf7d}
.lobi-salonlar .salon-baslik h2{color:var(--yesil)}
.lobi-salonlar .salon-baslik .birincil{background:var(--yesil);border-color:var(--yesil);color:#06210f}
.salon-kart{background:#15261ce6;border-color:#3fcf7d55}
.salon-kart:hover:not(:disabled){background:#1c3426;border-color:#3fcf7dcc}
.salon-kart .carpan{color:var(--yesil,#3fcf7d)}
.salon-sayfa{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px}
.salon-sayfa[hidden]{display:none}
.salon-sayfa button{min-height:32px;padding:5px 12px;font-size:12px;background:#15261c;border:1px solid #3fcf7d77;color:#cdf3dc;border-radius:6px;cursor:pointer}
.salon-sayfa button:disabled{opacity:.4;cursor:default}
.salon-sayfa button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.salon-sayfa span{font:600 12px var(--mono,monospace);color:#9fd8b6;font-variant-numeric:tabular-nums}
.salon-liste>[hidden]{display:none!important}
/* 25 Eki (oyuncu): büyük OYNA kalktı (her kartta ODAYA GİR var); oyuncu odaları SOLDA, hazır odalar EN SAĞDA;
   GM'de iki düğmeli kart kısalıp başlığı bir sonraki karta biniyordu → satır = içerik boyu */
.lobi-odalar .oyna-alani{display:none}
.lobi-odalar #odaListe{grid-auto-rows:max-content}
.lobi-odalar #odaListe>.oda{min-height:max-content}
@media(min-width:901px){ .lobi-sag .lobi-salonlar{order:-1} }

/* 27 Eki: bekleme odasında takım seçimi (mavi | kırmızı) — cafcaflı sürüm */
.sb-sol{min-width:0}
.sb-takimlar{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;position:relative}
.sb-takimlar::after{content:'VS';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--f-baslik);font-weight:800;font-size:15px;letter-spacing:1px;color:#e8edf3;
  background:#0d1117;border:2px solid #2d3a4a;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px rgba(13,17,23,.9),0 0 18px rgba(0,0,0,.6);pointer-events:none}
.sb-takim{position:relative;border:1px solid;border-radius:12px;padding:0 10px 10px;display:grid;gap:6px;align-content:start;min-height:280px;overflow:hidden}
.sb-takim::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.025) 14px 16px)}
.sb-takim h4{margin:0 -10px 6px;padding:11px 12px;font-family:var(--f-baslik);font-weight:800;font-size:14px;letter-spacing:2px;display:flex;justify-content:space-between;align-items:center;text-shadow:0 0 14px currentColor}
.sb-takim h4 span{font-family:var(--f-metin);font-weight:700;font-size:12px;letter-spacing:1px;padding:3px 9px;border-radius:999px;border:1px solid currentColor;text-shadow:none}
.sb-takim.mavi{border-color:#3b82f6;background:linear-gradient(180deg,rgba(37,99,235,.28),rgba(30,58,138,.10) 45%,rgba(14,22,36,.9));box-shadow:inset 0 0 40px rgba(59,130,246,.15),0 0 22px rgba(59,130,246,.18)}
.sb-takim.mavi h4{color:#8ec1ff;background:linear-gradient(90deg,rgba(59,130,246,.45),rgba(59,130,246,0));border-bottom:1px solid rgba(96,165,250,.45)}
.sb-takim.kirmizi{border-color:#ef4444;background:linear-gradient(180deg,rgba(220,38,38,.28),rgba(127,29,29,.10) 45%,rgba(36,14,14,.9));box-shadow:inset 0 0 40px rgba(239,68,68,.15),0 0 22px rgba(239,68,68,.18)}
.sb-takim.kirmizi h4{color:#ff9a9a;background:linear-gradient(90deg,rgba(239,68,68,.45),rgba(239,68,68,0));border-bottom:1px solid rgba(248,113,113,.45)}
.sb-takim .sb-uyeler{position:relative;gap:7px}
.sb-uyeler li.uye{padding:7px 10px;gap:10px;background:rgba(10,14,20,.55);border-color:rgba(255,255,255,.08);backdrop-filter:blur(2px)}
.sb-uyeler li.uye.t-m{border-left:3px solid #3b82f6} .sb-uyeler li.uye.t-k{border-left:3px solid #ef4444}
.sb-uyeler li.uye.sen{outline:1px solid rgba(255,149,72,.75);box-shadow:0 0 14px rgba(255,149,72,.35)}
.sb-uyeler .avatar{position:relative;flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-baslik);font-weight:800;font-size:15px;color:#fff;
  background:linear-gradient(145deg,#334155,#1e293b);border:2px solid rgba(255,255,255,.25);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.sb-uyeler li.t-m .avatar{border-color:#60a5fa;background:linear-gradient(145deg,#1d4ed8,#1e3a8a)} .sb-uyeler li.t-k .avatar{border-color:#f87171;background:linear-gradient(145deg,#b91c1c,#7f1d1d)}
.sb-uyeler .avatar img{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);border-radius:50%;object-fit:cover;border:2px solid inherit}
.sb-uyeler li .ad{font-weight:700;font-size:15px;letter-spacing:.3px}
.sb-uyeler .sen-etiket{font:800 9px/1 var(--f-baslik);letter-spacing:1px;color:#231b10;background:var(--vurgu);padding:3px 6px;border-radius:4px}
.sb-uyeler .rozet{font-family:var(--f-metin);font-weight:800;font-size:10.5px;letter-spacing:1.2px}
.sb-uyeler .rozet.hazir{color:#34d399;background:rgba(52,211,153,.12);box-shadow:0 0 10px rgba(52,211,153,.25)}
.sb-uyeler .rozet.kurucu{background:rgba(255,149,72,.12);box-shadow:0 0 10px rgba(255,149,72,.25)}
.sb-uyeler li.slot{justify-content:center;padding:9px;border:1px dashed rgba(255,255,255,.14);background:transparent;color:#6b7686;font:700 10.5px/1 var(--f-metin);letter-spacing:1.6px}
.sb-takim .sb-uyeler:empty{display:none}
.takim-gec{position:relative;margin-top:4px;padding:11px;border-radius:8px;font-family:var(--f-baslik);font-weight:800;font-size:12px;letter-spacing:1.5px;cursor:pointer;border:1px solid;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);transition:transform .12s,filter .12s}
.takim-gec.mavi{border-color:#60a5fa;background:linear-gradient(180deg,#3b82f6,#1d4ed8);box-shadow:0 0 16px rgba(59,130,246,.45)}
.takim-gec.kirmizi{border-color:#f87171;background:linear-gradient(180deg,#ef4444,#b91c1c);box-shadow:0 0 16px rgba(239,68,68,.45)}
.takim-gec:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px)} .takim-gec:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
@media (max-width:640px){.sb-takimlar{grid-template-columns:1fr}.sb-takimlar::after{display:none}}
/* takım sütunları için daha geniş pencere; isimler kesilmesin */
.salon-bekleme{width:min(940px,96vw)}
.sb-govde{grid-template-columns:minmax(0,1fr) 215px}
.sb-uyeler li.uye{gap:8px} .sb-uyeler .avatar{width:32px;height:32px;font-size:14px}
.sb-uyeler li.uye .ad{font-size:14px} .sb-uyeler li.uye .rozet{padding:4px 6px;letter-spacing:.8px}

/* 27 Eki: odadan atılan oyuncu için oda kartı gri + sayaç */
.lobi-odalar .oda.yasak{filter:grayscale(1) brightness(.75);opacity:.7;cursor:default}
.lobi-odalar .oda.yasak .yasak-sayac{color:#f3a5a5;border-color:#ef444488;font-variant-numeric:tabular-nums;letter-spacing:1px}