/* ============================================================
   EK EKRANLAR (hesap, alt gezinme, masalar, mesajlar, profil)
   Yeni tema DEĞİL: style.css'teki değişkenleri (--panel, --stroke, --gold…)
   ve bileşenleri (.card.glass, .btn, .game-opt, .player-list, .badge,
   .chat-*) kullanır. style.css'e dokunulmamıştır.
   ============================================================ */

/* Parola alanı: mevcut metin girişinin birebir aynısı. */
input[type=password] {
  width: 100%;
  background: rgba(8, 14, 28, 0.7);
  border: 1px solid var(--stroke);
  color: var(--text);
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}

/* Kart ekranları: mevcut giriş/lobi yerleşimiyle aynı (ortalanmış kart).
   Kart ekrana sığmazsa (küçük telefon, klavye) kaydırılabilir; sığarsa ortada kalır. */
#screen-auth.active, .app-screen.active {
  justify-content: center;
  padding: calc(20px + var(--safe-top)) 18px calc(20px + var(--safe-bottom));
}
#screen-auth.active, #screen-lobby.active, .app-screen.active, body.has-nav #screen-home.active {
  height: 100vh; height: 100dvh;
  overflow-y: auto;
  align-items: flex-start;
}
#screen-auth.active > .card, #screen-lobby.active > .card,
.app-screen.active > .card, body.has-nav #screen-home.active > .card { margin: auto; }
body.has-nav #screen-home.active, body.has-nav .app-screen.active {
  padding-bottom: calc(84px + var(--safe-bottom));
}
.app-screen .card h2 { margin-top: 20px; }
.app-screen .card h2:first-child { margin-top: 0; }
.app-screen .player-list { margin: 10px 0; }

/* ---------- Alt gezinme: Oyunlar · Masalar · Mesajlar · Profil ---------- */
.tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; gap: 4px;
  background: var(--panel-solid); border-top: 1px solid var(--stroke);
  padding: 6px 8px calc(6px + var(--safe-bottom));
}
.tab-bar.hidden { display: none; }
.tab-btn {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; border-radius: 12px;
  background: none; border: 1px solid transparent;
  color: var(--muted); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.tab-btn .tab-ico { font-size: 20px; }
.tab-btn.active { color: var(--gold); border-color: var(--stroke); background: rgba(0,0,0,.3); }
.tab-badge {
  position: absolute; top: 2px; left: calc(50% + 8px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--magenta); color: #fff; font-size: 10px; line-height: 16px; text-align: center;
}
.tab-badge.hidden { display: none; }

/* ---------- Satırlar (mevcut .player-list li üstünde) ---------- */
.row-main { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-left: 8px; }
.row-actions .btn.small { padding: 8px 12px; font-size: 13px; }
li.clickable { cursor: pointer; }
.field-row { display: flex; gap: 10px; }
.field-row input { flex: 1; min-width: 0; }
.field-row .btn { width: auto; margin: 0; padding: 0 22px; }

/* Tür / masa türü / erişim / avatar seçicileri: mevcut .game-picker + .game-opt */
.variant-picker .game-opt { padding: 9px 8px; }
.variant-picker:empty { display: none; }
.avatar-picker { flex-wrap: wrap; }
.avatar-picker .game-opt { flex: 0 0 calc(25% - 8px); padding: 8px 4px; }

/* ---------- Birebir sohbet (mevcut .chat-head / .chat-log / .chat-form) ---------- */
#screen-chat.active { display: flex; }
.dm-panel {
  flex: 1; display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; width: 100%; max-width: 720px; margin: 0 auto;
  background: var(--panel-solid); padding-top: var(--safe-top);
}
.dm-panel .chat-head { gap: 8px; }
.dm-panel .icon-btn { margin-left: 0; flex: 0 0 auto; }
.dm-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-panel .chat-log .msg { overflow-wrap: anywhere; }
.msg.mine .who { color: var(--gold); }
.msg-meta { display: block; font-size: 11px; color: var(--muted); }
.msg-meta.failed { color: #ff5a72; }
.msg-photo { display: block; max-width: 220px; max-height: 260px; border-radius: 12px; margin-top: 4px; }
.link-btn { background: none; border: none; padding: 0; color: var(--cyan); font: inherit; cursor: pointer; text-decoration: underline; }
.dm-more { align-self: center; }
.dm-panel .error { min-height: 0; margin: 0; padding: 0 12px; }

/* ---------- Pencereler (mevcut .ok-score örtüsü + cam kart) ---------- */
.app-modal { padding: 18px; }
.app-modal .card { max-height: calc(100dvh - 36px); overflow-y: auto; }

/* ---------- Ses: konuşan koltuk + görünmez ses elemanı ---------- */
.ok-video-slot.speaking { border-style: solid; border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.ok-aud { display: none; }

/* ---------- Okey masası: sığmayan içerik ----------
   101'de yere setler açıldıkça masa ekrana sığmıyor, sayfa da kaydırılamadığı için (body
   overflow: hidden) ıstaka ve hamle düğmeleri ekranın dışında kalıyordu. Masa ekran yüksekliğine
   sabitlenir; koltuk/orta alan/setler bölümü kendi içinde kaydırılır, kendi alanın en altta kalır.
   İçerik sığdığında görünüm aynıdır. Renk, yazı tipi, taş ve masa tasarımı değişmez. */
#screen-okey .felt.ok-felt { height: 100vh; height: 100dvh; }
#screen-okey .ok-table-scroll {
  position: relative; z-index: 2;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
#screen-okey .ok-myzone { flex: none; }