/* Güvenli alanlar (çentik, adacık, yuvarlak köşe, gezinme çubuğu): sayfa viewport-fit=cover ile tam ekran açıldığı için içerik ekranın kenarına kadar uzar;
 * ana ekrana eklenen uygulamada (standalone) çentiğin altına giren üst çubuk, ana ekran çizgisinin altına giren alt sekmeler ve yatayda çentikli kenarlar tıklanamaz olurdu.
 * Değişkenler tokens.css'te (--sat/--sab/--sal/--sar). Bu dosya EN SON yüklenir: üst çubuk/alt sekme yükseklikleri ve boşlukları tek yerde. */
:root { --topbar: calc(56px + var(--sat)); }
@media (orientation: landscape) and (max-height: 520px) { :root { --topbar: calc(44px + var(--sat)); } }

/* Üst çubuk (lobi, masa ekranı, yönetim paneli): çentiğin altından başlar, yanlar yatayda içeri alınır */
.topbar { padding-top: var(--sat); padding-left: max(10px, var(--sal)); padding-right: max(10px, var(--sar)); }
@media (min-width: 761px) { .topbar { padding-left: max(16px, var(--sal)); padding-right: max(16px, var(--sar)); } }

/* Alt sekme çubuğu: düğmeler tam yüksekliğini korur, ana ekran çizgisi için ek boşluk altına eklenir (eskiden yükseklik içine sıkışıyordu) */
@media (max-width: 760px) {
  .tabbar { height: calc(58px + var(--sab)); padding-bottom: var(--sab); padding-left: var(--sal); padding-right: var(--sar); }
  .lobby { padding-bottom: calc(58px + var(--sab)); padding-left: var(--sal); padding-right: var(--sar); }
  .grid { height: calc(100vh - var(--topbar) - 58px - var(--sab)); height: calc(100dvh - var(--topbar) - 58px - var(--sab)); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .tabbar { height: calc(46px + var(--sab)); padding-bottom: var(--sab); padding-left: var(--sal); padding-right: var(--sar); }
  .lobby { padding-bottom: calc(46px + var(--sab)); padding-left: var(--sal); padding-right: var(--sar); }
  .grid { height: calc(100vh - var(--topbar) - 46px - var(--sab)); height: calc(100dvh - var(--topbar) - 46px - var(--sab)); }
}

/* Giriş ve tam sayfa ekranlar */
.auth { padding-left: max(20px, var(--sal)); padding-right: max(20px, var(--sar)); padding-bottom: max(20px, var(--sab)); }

/* Oyun masası (tam ekran): altta ana ekran çizgisinin üstünde kalır, yatayda çentikten içeri; üst çubuk zaten kendi payını alır */
.table-screen { padding-bottom: var(--sab); }
.table-screen > :not(.topbar) { margin-left: var(--sal); margin-right: var(--sar); }

/* Pencereler ve katmanlar: çentiğe girmez */
.modal-layer { padding-top: max(0px, var(--sat)); padding-left: var(--sal); padding-right: var(--sar); }
@media (orientation: landscape) and (max-height: 520px) { .modal-layer { padding-top: max(8px, var(--sat)); padding-left: max(8px, var(--sal)); padding-right: max(8px, var(--sar)); } }