/* =========================================================================
   css/responsive.css  —  ORANTILI ÖLÇEK SİSTEMİ
   =========================================================================
   BU DOSYA EN SON YÜKLENİR. Tasarımı, renkleri veya oyun mantığını
   DEĞİŞTİRMEZ; yalnızca ölçüleri cihazdan bağımsız ve orantılı hâle getirir.

   ── Temel fikir ───────────────────────────────────────────────────────────
   Referans tasarım 390px genişliğinde bir ekranda çizilmiştir. Orada menü
   kartı 351px olur (min(90vw, 420px)). Bütün ölçüler bu karta göre yazılır:

       1 birim (--kzl-u) = referans ekranda 1px

   Kart 288px'e düştüğünde birim de 0.82px olur; kart 420px'e çıktığında
   1.196px olur. Böylece BÜTÜN ARAYÜZ tek parça hâlinde, referanstaki
   oranları koruyarak ölçeklenir — hiçbir eleman tek başına büyümez.

   ── İki ayrı birim var, karıştırılmamalı ─────────────────────────────────
     --kzl-u  → KUTU ölçüleri  (padding, gap, width, border-radius, ikon)
     --kzl-t  → YAZI ölçüleri  (font-size)

   Neden ayrı? Android WebView, sistem yazı boyutu ayarını yalnızca yazıya
   uygular (setTextZoom). `--kzl-t` içindeki `--kzl-tzc` telafi çarpanı
   (src/viewport_scale.js ölçer) bu büyümeyi %12 ile sınırlar. Kutular
   ekran genişliğine göre ölçeklenmeye devam eder.

   Web tarayıcısında --kzl-tzc her zaman 1'dir; bu dosya web ve Android'de
   BİREBİR AYNI kuralları uygular.
   ========================================================================= */

:root {
    /* Kart genişliği base.css'teki `#menu > .card` ile birebir aynı olmalı. */
    --kzl-card-max: 420px;
    --kzl-card-w: min(90vw, var(--kzl-card-max));

    /* Referans kart genişliği: 390px ekranda min(351px, 420px) = 351px */
    --kzl-card-ref: 351;

    /* KUTU birimi — clamp yalnızca uç durumlar için emniyet kemeri. */
    --kzl-u: clamp(0.78px, var(--kzl-card-w) / var(--kzl-card-ref), 1.22px);

    /* Sistem yazı boyutu telafisi — src/viewport_scale.js yazar.
       Betik çalışmazsa 1 kalır ve hiçbir şey bozulmaz. */
    --kzl-tzc: 1;

    /* YAZI birimi */
    --kzl-t: calc(var(--kzl-u) * var(--kzl-tzc));

    /* Güvenli alanlar — tek kaynak. */
    --kzl-sat: max(0px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
    --kzl-sab: max(0px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    --kzl-sal: max(0px, env(safe-area-inset-left, 0px));
    --kzl-sar: max(0px, env(safe-area-inset-right, 0px));
}

/* =========================================================================
   1) GENEL EMNİYET — yatay kaydırma ve taşma
   ========================================================================= */

html {
    /* Sistem yazı boyutu ayrı bir mekanizma; bu yalnızca iOS/desktop'ta
       otomatik metin büyütmeyi kapatır ve ölçümü belirli kılar. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

/* Esnek düzenlerde çocuklar varsayılan olarak `min-width:auto` alır ve
   içerikleri kutudan taşırır. Menü/modal kökleri altında bunu kapatıyoruz —
   oyun tahtası bu seçicilerin DIŞINDA bırakıldı. */
#menu .card > *,
#menu .top-actions-wrapper > *,
#menu .action-row > *,
#settings-menu .modal-body > *,
#profile-menu .modal-body > *,
#notification-menu .modal-body > *,
#store-menu .modal-body > *,
#quest-menu .modal-body > *,
#leaderboard-menu .modal-body > *,
#history-menu .modal-body > * {
    min-width: 0;
}

/* =========================================================================
   2) GÜVENLİ ALANLAR (çentik / durum çubuğu / alt gezinme)
   ========================================================================= */

#menu {
    padding-top: calc(var(--kzl-sat) + 20 * var(--kzl-u));
    padding-bottom: calc(var(--kzl-sab) + 20 * var(--kzl-u));
    padding-left: calc(var(--kzl-sal) + 8px);
    padding-right: calc(var(--kzl-sar) + 8px);
}

/* Tam ekran panellerin güvenli alanları — ana menüyle BİREBİR aynı üst boşluk. */
#settings-menu, #store-menu, #history-menu, #about-menu,
#profile-menu, #notification-menu, #quest-menu, #leaderboard-menu {
    padding-top: calc(var(--kzl-sat) + 20 * var(--kzl-u));
    padding-bottom: calc(var(--kzl-sab) + 20 * var(--kzl-u));
    padding-left: var(--kzl-sal);
    padding-right: var(--kzl-sar);
    box-sizing: border-box;
}

/* =========================================================================
   3) MENÜ KARTI
   ========================================================================= */

#menu > .card,
.menu-card-frame {
    width: var(--kzl-card-w);
    padding: calc(22 * var(--kzl-u)) calc(18 * var(--kzl-u));
    box-sizing: border-box;
}

/* Ana menü kartının köşesi burada kalır (referans tasarım, dokunulmadı). */
#menu > .card {
    border-radius: calc(36 * var(--kzl-u));
}

/* ⚠️ `.menu-card-frame` için `border-radius` BURADAN KALDIRILDI.
   Aynı sınıfa iki ayrı yerde (36u ve 28u) yarıçap veriliyordu; hangisinin
   kazandığı sıraya bağlıydı ve başlık farklı bir değer kullanıyordu. Artık
   tek kaynak `--kzl-frame-radius` değişkeni (aşağıda 4n bölümünde). */

/* menu-card-frame padding override: iç içerikler kendi padding'ini yönetir */
.menu-card-frame {
    padding: 0;
}

/* --- 3a) Üst bar: bakiye + hızlı düğmeler ------------------------------ */

.top-actions-wrapper {
    gap: calc(6 * var(--kzl-u));
    margin-bottom: calc(22 * var(--kzl-u));
    flex-wrap: nowrap;
}

/* Bakiye kutusu: dar ekranda ezilip yazıyı 3px'e düşürüyordu.
   Artık kendine ait bir taban genişliği var ve önce düğmeler daralır. */
.player-stat {
    padding: calc(6 * var(--kzl-u)) calc(9 * var(--kzl-u));
    gap: calc(6 * var(--kzl-u));
    font-size: calc(16 * var(--kzl-t));
    border-radius: calc(8 * var(--kzl-u));
    flex: 1 1 auto;
    min-width: calc(72 * var(--kzl-u));
    overflow: hidden;
}

.player-stat > span {
    min-width: 0;
    /* Rakam uzasa da (1.234.567) hizalama bozulmaz. */
    font-variant-numeric: tabular-nums;
}

/* İkon `rem` cinsindendi → sistem yazı boyutuyla birlikte büyüyordu.
   Artık kutu birimine bağlı: yazı ayarından etkilenmez. */
.player-stat svg {
    width: calc(19 * var(--kzl-u));
    height: calc(19 * var(--kzl-u));
    flex: 0 0 auto;
}

.top-bar-quick-actions {
    gap: calc(7 * var(--kzl-u));
    /* Yer daralınca ÖNCE bunlar küçülsün, bakiye korunsun. */
    flex-shrink: 1;
    min-width: 0;
}

.k-btn {
    width: calc(40 * var(--kzl-u));
    height: calc(40 * var(--kzl-u));
    min-width: calc(40 * var(--kzl-u));
}

.k-btn-with-icon svg,
#top-profile-btn > svg {
    width: calc(19 * var(--kzl-u));
    height: calc(19 * var(--kzl-u));
}

/* Rozet: yazı büyürken daireden taşıyordu. */
.notification-badge {
    width: calc(16 * var(--kzl-u));
    height: calc(16 * var(--kzl-u));
    min-width: calc(16 * var(--kzl-u));
    font-size: calc(9 * var(--kzl-t));
    border-width: calc(2 * var(--kzl-u));
    line-height: 1;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* --- 3b) Başlık bölümü ------------------------------------------------- */

.menu-header { margin-bottom: calc(18 * var(--kzl-u)); }

.menu-header .menu-logo img {
    width: calc(78 * var(--kzl-u)) !important;
    height: calc(78 * var(--kzl-u)) !important;
}

#menu .card h1,
#menu .logo-text {
    font-size: calc(26 * var(--kzl-t));
    line-height: 1.15;
    margin: 0 0 calc(4 * var(--kzl-u));
}

#main-welcome-text {
    font-size: calc(13 * var(--kzl-t)) !important;
    margin-top: calc(4 * var(--kzl-u)) !important;
    line-height: 1.25;
    /* Uzun isim + bayrak tek satırda taşmasın. */
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* --- 3c) Üçlü mod düğmesi satırları ------------------------------------ */
/*
 * Şablondaki satır içi `repeat(3, 1fr)` dar ekranda eşitliği bozabiliyordu:
 * `1fr` taban içerik genişliğinin altına inemez, uzun Almanca kelimeler
 * sütunu şişirir. `minmax(0, 1fr)` bu tabanı kaldırır ve üç sütun HER ZAMAN
 * birebir eşit kalır.
 */
.kzl-mode-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(9 * var(--kzl-u));
    margin-bottom: calc(9 * var(--kzl-u));
    align-items: stretch;
}

.kzl-mode-row > .menu-btn {
    margin: 0;
    padding: calc(11 * var(--kzl-u)) calc(4 * var(--kzl-u));
    /* Sabit yükseklik YOK: yazı büyüyünce kutu da nefes alsın. */
    min-height: calc(74 * var(--kzl-u));
    height: auto;
    border-radius: calc(18 * var(--kzl-u));
    gap: calc(5 * var(--kzl-u));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
}

.kzl-mode-row .kzl-mode-icon {
    font-size: calc(23 * var(--kzl-t));
    line-height: 1;
    flex: 0 0 auto;
}

.kzl-mode-row .kzl-mode-label {
    font-size: calc(11 * var(--kzl-t));
    font-weight: 800;
    text-align: center;
    line-height: 1.18;
    width: 100%;
    min-width: 0;
    /* Uzun çeviriler (Almanca) kontrollü kırılsın, taşmasın. */
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    /* En fazla iki satır; üçüncü satır kartı uzatıyordu. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 3d) Menü kısayolları (Sıralama / Geçmiş / Mağaza / ...) ----------- */
/*
 * Referans tasarım: ilk satır 3 eşit düğme, ikinci satır 2 daha geniş düğme.
 * Eskiden bu, `flex: 1 1 30%` + `max-width: 32%/48%` ile yaklaşık olarak
 * elde ediliyordu ve ekran genişliğine göre kayıyordu.
 *
 * 6 sütunluk ızgara aynı oranı KESİN olarak verir:
 *   ilk üç düğme  → 2'şer sütun (3 × 2 = 6)
 *   son iki düğme → 3'er sütun  (2 × 3 = 6)
 * Böylece her cihazda birebir aynı yerleşim çıkar.
 */
#menu .action-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: calc(8 * var(--kzl-u));
    margin-top: calc(14 * var(--kzl-u));
}

#menu .action-row > .action-btn { grid-column: span 2; }
#menu .action-row > .action-btn:nth-child(4),
#menu .action-row > .action-btn:nth-child(5) { grid-column: span 3; }

#menu .action-row > .action-btn {
    flex: none;
    max-width: none;
    width: 100%;
    padding: calc(9 * var(--kzl-u)) calc(4 * var(--kzl-u));
    min-height: calc(58 * var(--kzl-u));
    border-radius: calc(16 * var(--kzl-u));
    gap: calc(5 * var(--kzl-u));
    font-size: calc(11 * var(--kzl-t));
    line-height: 1.15;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    justify-content: center;
}

#menu .action-row > .action-btn > span:first-child {
    font-size: calc(17 * var(--kzl-t));
    line-height: 1;
}

#menu .action-row > .action-btn > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 3e) Ayırıcı ------------------------------------------------------- */

#menu .divider { margin: calc(20 * var(--kzl-u)) 0; }
#menu .divider::after {
    font-size: calc(12 * var(--kzl-t));
    padding: 0 calc(9 * var(--kzl-u));
    border-radius: calc(10 * var(--kzl-u));
}

/* --- 3f) Keşfet kartı -------------------------------------------------- */

#menu .discover-card {
    padding: calc(9 * var(--kzl-u)) calc(12 * var(--kzl-u));
    border-radius: calc(16 * var(--kzl-u));
    gap: calc(10 * var(--kzl-u));
    box-sizing: border-box;
}

#menu .discover-icon {
    width: calc(44 * var(--kzl-u));
    height: calc(44 * var(--kzl-u));
    border-radius: calc(12 * var(--kzl-u));
}

#menu .discover-info h3 { font-size: calc(14 * var(--kzl-t)); }
#menu .discover-info p  { font-size: calc(11 * var(--kzl-t)); }

#menu .discover-cta {
    font-size: calc(11 * var(--kzl-t));
    padding: calc(5 * var(--kzl-u)) calc(11 * var(--kzl-u));
    white-space: nowrap;
    flex: 0 0 auto;
}

/* --- 3g) Devam et düğmesi --------------------------------------------- */

#menu #resume-btn {
    padding: calc(14 * var(--kzl-u));
    font-size: calc(15 * var(--kzl-t));
    border-radius: calc(20 * var(--kzl-u));
    margin-bottom: calc(13 * var(--kzl-u));
}

/* =========================================================================
   4) TAM EKRAN PANELLER & ALT MENÜLER
   -------------------------------------------------------------------------
   Ana menüyle aynı --kzl-u / --kzl-t birimlerini kullanarak BÜTÜN
   panelleri orantılı hâle getiriyoruz. Hiçbir eleman tek başına büyüyemez.
   ========================================================================= */

/* 4a) Modal Header (tüm panellerin ortak başlığı) ----------------------- */
.modal-header {
    padding: calc(12 * var(--kzl-u)) calc(18 * var(--kzl-u));
    gap: calc(8 * var(--kzl-u));
    border-radius: calc(28 * var(--kzl-u)) calc(28 * var(--kzl-u)) 0 0;
}
.modal-header h2 {
    font-size: calc(14 * var(--kzl-t));
    gap: calc(5 * var(--kzl-u));
    min-width: 0;
}
.modal-header h2 span { font-size: calc(16 * var(--kzl-t)); }

/* "Kapat/Tamam/Bitti" düğmeleri */
/* `:not(.kzl-close-x)` — ortak kapatma düğmesi bu ölçeklemenin DIŞINDA:
   boyutu, dolgusu ve yuvarlaklığı her sayfada birebir aynı olmalı. */
.modal-header .close-btn:not(.kzl-close-x),
.modal-header button:not(.kzl-close-x) {
    font-size: calc(12 * var(--kzl-t));
    padding: calc(6 * var(--kzl-u)) calc(14 * var(--kzl-u));
    border-radius: calc(10 * var(--kzl-u));
}

/* 4b) Modal Body (tüm panellerin ortak gövdesi) ------------------------- */
.modal-body {
    padding: calc(12 * var(--kzl-u)) calc(18 * var(--kzl-u)) calc(20 * var(--kzl-u));
}

/* 4c) Modern Section & Row (Ayarlar satırları) -------------------------- */
.modern-section {
    border-radius: calc(20 * var(--kzl-u));
    padding: 0 calc(12 * var(--kzl-u));
    margin-bottom: calc(16 * var(--kzl-u));
}
.modern-row {
    padding: calc(12 * var(--kzl-u)) 0;
    gap: calc(8 * var(--kzl-u));
    font-size: calc(13 * var(--kzl-t));
    flex-wrap: wrap;
}
.modern-row > * { min-width: 0; }
.section-title {
    font-size: calc(11 * var(--kzl-t));
    margin: 0 0 calc(8 * var(--kzl-u)) calc(4 * var(--kzl-u));
    letter-spacing: calc(0.8 * var(--kzl-u));
}

/* Toggle switch */
.toggle-switch {
    width: calc(38 * var(--kzl-u));
    height: calc(22 * var(--kzl-u));
    border-radius: calc(11 * var(--kzl-u));
    flex-shrink: 0;
}
.toggle-switch::after {
    width: calc(18 * var(--kzl-u));
    height: calc(18 * var(--kzl-u));
    top: calc(2 * var(--kzl-u));
    left: calc(2 * var(--kzl-u));
}
.toggle-switch:checked::after {
    transform: translateX(calc(16 * var(--kzl-u)));
}

/* Dil seçici */
.language-settings-card {
    padding: calc(12 * var(--kzl-u));
}
.language-settings-card__row {
    gap: calc(10 * var(--kzl-u));
}
.language-settings-card__label {
    gap: calc(8 * var(--kzl-u));
    font-size: calc(13 * var(--kzl-t));
    overflow-wrap: anywhere;
    hyphens: auto;
}
.language-settings-card__selector {
    min-width: calc(120 * var(--kzl-u));
}
.language-select__trigger {
    min-height: calc(30 * var(--kzl-u));
    padding: calc(5 * var(--kzl-u)) calc(8 * var(--kzl-u));
    border-radius: calc(8 * var(--kzl-u));
    font-size: calc(12 * var(--kzl-t));
    gap: calc(6 * var(--kzl-u));
}
.language-select__flag {
    width: calc(18 * var(--kzl-u));
    height: calc(13 * var(--kzl-u));
}
.language-select__menu {
    border-radius: calc(10 * var(--kzl-u));
    padding: calc(3 * var(--kzl-u));
}
.language-select__option {
    min-height: calc(30 * var(--kzl-u));
    padding: calc(5 * var(--kzl-u)) calc(7 * var(--kzl-u));
    border-radius: calc(7 * var(--kzl-u));
    font-size: calc(12 * var(--kzl-t));
}

/* Uzun çevirilerde ayar satırı etiketleri kutudan taşıyordu. */
.modern-row > span,
.modern-row > div > span,
.language-settings-card__label {
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* 4d) Genel düğmeler ---------------------------------------------------- */
.menu-btn {
    padding: calc(12 * var(--kzl-u));
    margin: calc(8 * var(--kzl-u)) 0;
    border-radius: calc(16 * var(--kzl-u));
    font-size: calc(14 * var(--kzl-t));
    min-height: calc(38 * var(--kzl-u));
    height: auto;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.mode-btn {
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* 4e) Profil Sekmeler --------------------------------------------------- */
.profile-tabs {
    gap: calc(2 * var(--kzl-u));
    padding: calc(4 * var(--kzl-u));
}
.profile-tab-btn,
.prof-tab-btn {
    font-size: calc(11 * var(--kzl-t));
    padding: calc(7 * var(--kzl-u)) calc(6 * var(--kzl-u));
    border-radius: calc(8 * var(--kzl-u));
}

/* 4f) Görev kartları ---------------------------------------------------- */
.quest-card {
    padding: calc(12 * var(--kzl-u));
    border-radius: calc(16 * var(--kzl-u));
    margin-bottom: calc(10 * var(--kzl-u));
}
.quest-btn {
    padding: calc(6 * var(--kzl-u)) calc(12 * var(--kzl-u));
    border-radius: calc(10 * var(--kzl-u));
    font-size: calc(11 * var(--kzl-t));
}
.quest-progress-bar {
    height: calc(6 * var(--kzl-u));
    border-radius: calc(3 * var(--kzl-u));
    margin-top: calc(6 * var(--kzl-u));
}
.quest-tabs { margin-bottom: calc(12 * var(--kzl-u)); }
.quest-tab-btn {
    padding: calc(10 * var(--kzl-u)) calc(4 * var(--kzl-u));
    font-size: calc(11 * var(--kzl-t));
}

/* 4g) Mağaza grid öğeleri ----------------------------------------------- */
/* Sabit kutu boyu (css/store.css > grid-auto-rows) ekranla birlikte ölçeklensin;
   sabit px bırakılsaydı küçük ekranda kutular şişer, büyükte cılız kalırdı. */
#piece-settings-grid,
#dice-settings-grid,
#effect-settings-grid,
#center-settings-grid,
#base-settings-grid,
#board-settings-grid {
    /* Kutu boyu 122 → 110: kirala düğmesi 33 px'lik kalın bloktan 22 px'lik
       ince çipe indi ve rozetlerin telafi boşlukları kalktı. Kutu boyu eski
       hâlinde kalsaydı kazanılan yer, ortalanmış içeriğin altında ve üstünde
       BOŞ olarak dururdu — kullanıcının şikâyet ettiği şey de zaten oydu. */
    --kzl-store-tile-h: calc(106 * var(--kzl-u));
    /* Rozet yuvası: kirala çipi, kalan süre çipi ve boş yuva için TEK ölçü.
       İkisi de aynı boyda olduğu için telafi boşluğuna gerek kalmadı. */
    --kzl-store-badge-h: calc(22 * var(--kzl-u));
    /* Geriye dönük uyum: eski kurallar bu değişkeni okuyorsa aynı ölçüyü alsın. */
    --kzl-store-timer-h: var(--kzl-store-badge-h);
    --kzl-store-badge-pad: calc(5 * var(--kzl-u));
    --kzl-store-badge-gap: calc(2 * var(--kzl-u));
    --kzl-store-badge-radius: calc(6 * var(--kzl-u));
}
.dice-grid-btn, .effect-grid-btn, .piece-grid-btn {
    padding: calc(6 * var(--kzl-u)) calc(3 * var(--kzl-u)) calc(5 * var(--kzl-u)) !important;
    border-radius: calc(12 * var(--kzl-u)) !important;
    gap: calc(3 * var(--kzl-u)) !important;
    font-size: calc(10 * var(--kzl-t));
}
/* Piyona özel ölçü KALDIRILDI — .effect-grid-btn kuralı (tahta ile aynı) geçerli. */
.effect-grid-btn div:first-child { font-size: calc(18 * var(--kzl-t)) !important; margin-bottom: calc(2 * var(--kzl-u)) !important; }
.price-tag {
    /* Mağaza ızgarasındaki çip ölçüleri (dolgu · köşe) artık
       `--kzl-store-badge-*` değişkenlerinden geliyor; burada yalnızca
       ızgara DIŞINDA kullanılan fiyat etiketleri için taban değerler var. */
    padding: calc(3 * var(--kzl-u)) calc(6 * var(--kzl-u));
    border-radius: var(--kzl-store-badge-radius, calc(10 * var(--kzl-u)));
    font-size: calc(9 * var(--kzl-t));
    gap: calc(3 * var(--kzl-u));
    /* top/right KALDIRILDI — etiket artık mutlak konumlu değil, öğe adının
       altında akışta duruyor (bkz. css/store.css). */
}
.price-tag svg {
    width: calc(10 * var(--kzl-u));
    height: calc(10 * var(--kzl-u));
}

/* Mağaza grid boşlukları */
#piece-settings-grid,
#dice-settings-grid,
#effect-settings-grid,
#center-settings-grid,
#base-settings-grid {
    gap: calc(8 * var(--kzl-u));
}

/* 4h) Mağaza sekmeleri -------------------------------------------------- */
.store-tabs,
.piece-tabs {
    gap: calc(4 * var(--kzl-u));
}
.store-tab-btn,
.piece-tab-btn {
    font-size: calc(12 * var(--kzl-t));
    padding: calc(6 * var(--kzl-u)) calc(10 * var(--kzl-u));
    border-radius: calc(8 * var(--kzl-u));
}

/* 4i) Count butonlar (oyuncu sayısı: 2/3/4) ----------------------------- */
.count-btn {
    width: calc(42 * var(--kzl-u));
    height: calc(42 * var(--kzl-u));
    font-size: calc(16 * var(--kzl-t));
    border-width: calc(2 * var(--kzl-u));
}

/* 4j) Setup kartları (oyun ayarı — oyuncu kutuları) --------------------- */
#setup-cards-container {
    gap: calc(10 * var(--kzl-u));
}
.setup-card,
.local-setup-player-card {
    border-radius: calc(12 * var(--kzl-u)) !important;
    padding: calc(8 * var(--kzl-u)) calc(9 * var(--kzl-u)) !important;
    gap: calc(8 * var(--kzl-u)) !important;
    border-width: calc(2 * var(--kzl-u)) !important;
}
.local-setup-name-input {
    padding: calc(5 * var(--kzl-u)) calc(7 * var(--kzl-u)) !important;
    border-radius: calc(8 * var(--kzl-u)) !important;
    font-size: calc(11 * var(--kzl-t)) !important;
}

/* 4k) Icon Picker (piyon/zar seçici grid) ------------------------------- */
.icon-grid-btn {
    width: calc(46 * var(--kzl-u));
    height: calc(46 * var(--kzl-u));
    border-radius: calc(14 * var(--kzl-u));
    font-size: calc(20 * var(--kzl-t));
}
#icon-grid {
    gap: calc(8 * var(--kzl-u));
}

/* 4l) Popover Box (Market, Ayarlar balon) ------------------------------- */
.kzl-pop-box {
    border-radius: calc(20 * var(--kzl-u));
    padding: calc(10 * var(--kzl-u)) calc(10 * var(--kzl-u)) calc(5 * var(--kzl-u));
}
.kzl-pop-box > .modal-header {
    border-radius: calc(14 * var(--kzl-u));
    padding: calc(10 * var(--kzl-u)) calc(12 * var(--kzl-u));
    margin-bottom: calc(8 * var(--kzl-u));
}
.kzl-pop-box > .modal-body {
    padding: calc(2 * var(--kzl-u)) calc(4 * var(--kzl-u)) calc(8 * var(--kzl-u));
}

/* 4m) Market paneli (Kozalak satın alma) -------------------------------- */
#kzl-market-panel {
    border-radius: calc(20 * var(--kzl-u));
    padding: calc(14 * var(--kzl-u));
}
#kzl-market-panel h2 {
    font-size: calc(16 * var(--kzl-t));
    gap: calc(6 * var(--kzl-u));
}
.kzl-pack-card {
    border-radius: calc(14 * var(--kzl-u));
    padding: calc(10 * var(--kzl-u)) calc(12 * var(--kzl-u));
    margin-bottom: calc(8 * var(--kzl-u));
    gap: calc(8 * var(--kzl-u));
}
.kzl-pack-title { font-size: calc(15 * var(--kzl-t)); }
.kzl-pack-gain { font-size: calc(11 * var(--kzl-t)); }
.kzl-pack-bonus { font-size: calc(10 * var(--kzl-t)); }
.kzl-pack-price {
    font-size: calc(13 * var(--kzl-t));
    padding: calc(5 * var(--kzl-u)) calc(10 * var(--kzl-u));
    border-radius: calc(8 * var(--kzl-u));
}
.kzl-pack-icon {
    width: calc(36 * var(--kzl-u));
    height: calc(36 * var(--kzl-u));
}

/* 4n) Menu card frame (alt sayfa çerçevesi) ----------------------------- */
.menu-card-frame {
    /* Yalnız DEĞİŞKEN güncellenir; başlık ve alt köşeler bunu izler.
       `border-radius` burada ayrıca ezilirse başlıkla ayrışır (eski hata).
       Değer ANA MENÜ kartıyla birebir aynı (36u) — alt sayfaların köşe
       ovalliği ana sayfadaki tasarımdan farklı olmasın diye. Eskiden 28u
       idi ve alt sayfalar gözle görülür şekilde daha köşeliydi. */
    --kzl-frame-radius: calc(36 * var(--kzl-u));
}
.menu-card-frame > .modal-header {
    padding: calc(14 * var(--kzl-u)) calc(18 * var(--kzl-u));
}

/* 4o) Local Setup modal ------------------------------------------------- */
#local-setup-menu .menu-card-frame {
    border-radius: calc(16 * var(--kzl-u)) !important;
    padding: calc(14 * var(--kzl-u));
}

/* 4p) ID Badge, Divider ------------------------------------------------- */
.id-badge {
    padding: calc(5 * var(--kzl-u)) calc(12 * var(--kzl-u));
    border-radius: calc(16 * var(--kzl-u));
    font-size: calc(11 * var(--kzl-t));
    margin-top: calc(6 * var(--kzl-u));
}
.divider {
    margin: calc(18 * var(--kzl-u)) 0;
}

/* 4q) Discover kartı --------------------------------------------------- */
.discover-card {
    padding: calc(8 * var(--kzl-u)) calc(10 * var(--kzl-u));
    border-radius: calc(14 * var(--kzl-u));
    gap: calc(8 * var(--kzl-u));
    margin-bottom: calc(16 * var(--kzl-u));
}
.discover-icon {
    width: calc(36 * var(--kzl-u));
    height: calc(36 * var(--kzl-u));
    border-radius: calc(10 * var(--kzl-u));
}
.discover-info h3 { font-size: calc(13 * var(--kzl-t)); }
.discover-info p  { font-size: calc(10 * var(--kzl-t)); }
.discover-cta {
    font-size: calc(10 * var(--kzl-t));
    padding: calc(4 * var(--kzl-u)) calc(10 * var(--kzl-u));
}

/* 4r) Credits ----------------------------------------------------------- */
.credits { font-size: calc(10 * var(--kzl-t)); margin-top: calc(18 * var(--kzl-u)); }

/* 4s) Uyarı / onay pencereleri ------------------------------------------ */
.custom-modal-title,
.custom-modal-text,
.custom-modal-btn {
    overflow-wrap: anywhere;
    hyphens: auto;
    min-width: 0;
}
.custom-modal-btn { height: auto; min-height: calc(34 * var(--kzl-u)); }
.custom-modal-title { font-size: calc(16 * var(--kzl-t)); }
.custom-modal-text { font-size: calc(13 * var(--kzl-t)); }
.custom-modal-btn {
    font-size: calc(13 * var(--kzl-t));
    padding: calc(8 * var(--kzl-u)) calc(14 * var(--kzl-u));
    border-radius: calc(10 * var(--kzl-u));
}

/* 4t) Profil Merkezi — profil fotoğrafı ve rozetler --------------------- */
.prof-avatar-wrap,
.profile-avatar-wrap {
    max-width: calc(120 * var(--kzl-u));
    max-height: calc(120 * var(--kzl-u));
}
.prof-career-bar-track {
    height: calc(8 * var(--kzl-u));
    border-radius: calc(4 * var(--kzl-u));
}

/* 4u) Bildirim paneli --------------------------------------------------- */
.notif-card {
    padding: calc(10 * var(--kzl-u));
    border-radius: calc(12 * var(--kzl-u));
    margin-bottom: calc(8 * var(--kzl-u));
    gap: calc(8 * var(--kzl-u));
    font-size: calc(12 * var(--kzl-t));
}

/* 4v) Sıralama / leaderboard ------------------------------------------- */
.lb-podium-name {
    font-size: calc(11 * var(--kzl-t));
}
.lb-row {
    padding: calc(8 * var(--kzl-u)) calc(10 * var(--kzl-u));
    gap: calc(8 * var(--kzl-u));
    font-size: calc(13 * var(--kzl-t));
}

/* 4w) Geçmiş kartları --------------------------------------------------- */
.history-card {
    padding: calc(10 * var(--kzl-u));
    border-radius: calc(14 * var(--kzl-u));
    margin-bottom: calc(8 * var(--kzl-u));
    gap: calc(8 * var(--kzl-u));
}

/* 4x) Mağaza bakiye satırı ---------------------------------------------- */
.store-balance-row {
    font-size: calc(14 * var(--kzl-t));
    gap: calc(6 * var(--kzl-u));
    padding: calc(6 * var(--kzl-u)) calc(10 * var(--kzl-u));
}

/* =========================================================================
   5) ÇOK BÜYÜK / ÇOK KÜÇÜK EKRANLAR
   ========================================================================= */

/* Tablet: kart genişliği 420px'te sabitlenir ve ortalanır — tasarım
   gereksiz yere gerilmez. Ölçek birimi de doğal olarak tavanda kalır. */
@media (min-width: 560px) {
    :root { --kzl-card-w: var(--kzl-card-max); }
}

/* Çok kısa ekranlar (yatay çevirme, katlanabilir kapak ekranı):
   kart dikeyde sıkışsın, ama içerik ASLA kırpılmasın — menü zaten
   kaydırılabilir. */
@media (max-height: 620px) {
    #menu > .card { padding-top: calc(16 * var(--kzl-u)); padding-bottom: calc(16 * var(--kzl-u)); }
    .menu-header { margin-bottom: calc(12 * var(--kzl-u)); }
    .menu-header .menu-logo img {
        width: calc(58 * var(--kzl-u)) !important;
        height: calc(58 * var(--kzl-u)) !important;
    }
    #menu .divider { margin: calc(14 * var(--kzl-u)) 0; }
    .kzl-mode-row { margin-bottom: calc(14 * var(--kzl-u)); }
}

/* =========================================================================
   6) RTL (Arapça) — ölçek kuralları yön değiştirmemeli
   -------------------------------------------------------------------------
   base.css kararı: düzen HER ZAMAN LTR kalır, yalnızca metin akışı RTL olur.
   Burada da aynı sözleşme korunuyor.
   ========================================================================= */

html.kzl-rtl .kzl-mode-row .kzl-mode-label,
html.kzl-rtl #menu .action-row > .action-btn > span:last-child {
    text-align: center;
}

/* =========================================================================
   7) HAREKET AZALTMA TERCİHİ
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .notification-badge { animation: none; }
    .lucide-diamond { animation: none; }
}

/* =========================================================================
   8) SİSTEM YAZI BOYUTU TELAFİSİNDEN KAÇAN BUTONLAR (O7)
   -------------------------------------------------------------------------
   src/viewport_scale.js gerçek metin ölçümüyle `--kzl-tzc` telafi çarpanını
   üretiyor ve buradaki kuralların çoğu yazı boyutunu `calc(N*var(--kzl-t))`
   ile ona bağlıyor. İki buton bu sisteme hiç bağlı değildi ve sabit px
   kullanıyordu:
       css/components.css > .btn-google                (15px)
       css/components.css > .chat-balloon-panel .inline-chat-btn (22px / 13px)
   Cihazın sistem yazı boyutu %150'ye alındığında bu ikisi telafi edilmeden
   büyüyüp kutularını taşırıyordu. Artık aynı ölçeğe bağlılar.
   ========================================================================= */

.btn-google {
    font-size: calc(15 * var(--kzl-t));
    padding: calc(14 * var(--kzl-u));
    border-radius: calc(14 * var(--kzl-u));
    gap: calc(10 * var(--kzl-u));
}
.btn-google img {
    width: calc(20 * var(--kzl-u));
    height: calc(20 * var(--kzl-u));
}

.chat-balloon-panel:not(.game-chat-bottom-dock) .inline-chat-btn {
    font-size: calc(22 * var(--kzl-t));
    height: calc(44 * var(--kzl-u)) !important;
}
.chat-balloon-panel:not(.game-chat-bottom-dock) .msg-list-container .inline-chat-btn {
    font-size: calc(13 * var(--kzl-t)) !important;
    padding: calc(12 * var(--kzl-u)) !important;
}