/* ══════════════════════════════════════════════════════════════════
   DOKUNMA & OKUNABİLİRLİK ONARIMI — v4.37 · v4.38 (2026-08-03)

   Otomatik denetimlerde (mobil 390/360/320 px dokunmatik + masaüstü
   1024/1280/1440/1920 px) çıkan somut kusurlar. EN SON yüklenir —
   20-console.css ve 22-onboarding.css dahil hiçbir dosya ezmesin diye.

   Denetim yöntemi: her görünür düğmenin MERKEZİNDE
   document.elementFromPoint() gerçekten o düğmeyi mi döndürüyor +
   getBoundingClientRect ile boyut/yazı ölçümü.

   1–5. bölüm MOBİLE özgü — dokunma kusurları masaüstünde yoktu.
   6–7. bölüm HER EKRANDA geçerli.

   YATAY TELEFON (2026-08-05): 1–5. bölüm eskiden YALNIZCA
   `max-width:768px` idi. Modern telefonlar yan çevrilince 844–932 px
   genişliğe çıkıyor, yani bu blokların hiçbiri uygulanmıyordu: kalem
   düğmesi 26×26'ya, renk kareleri 30×30'a, görev ödül yazısı 10,4 px'e
   düşüyor ve İlk Adımlar kartı zoom/ses sütununu yeniden örtüyordu
   (v4.37'de dikeyde düzeltilen hatanın aynısı). 04-mobile.css bu durumu
   zaten hesaba katıyordu; buradaki sorgular da ONUNLA AYNI şarta
   bağlandı: `(max-height:600px) and (orientation:landscape) and
   (hover:none) and (pointer:coarse)`. Yani yalnız gerçek dokunmatik
   cihazın yatayı — masaüstünde kısa pencere bundan etkilenmez.
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   1) İLK ADIMLAR KARTI SAĞ ALT DÜĞME SÜTUNUNU ÖRTÜYORDU  (KRİTİK)

   Masaüstünde #zbtn SOL altta (03-components.css:337 → left:12px),
   kart ise SAĞ altta durur; çakışmazlar. 22-onboarding.css:3'teki
   "sol alttaki butonları engellemez" notu bu yerleşimi anlatıyor.

   AMA 04-mobile.css:316 mobilde #zbtn'i SAĞ alta taşıyor
   (right:10px) ve 22-onboarding.css:166 kartı left:8/right:8 ile TAM
   GENİŞLİK yapıyor. Kart z-index:180, sütun z-index:10 → sütunun
   tamamı kartın altında kalıyordu.

   Ölçülen sonuç (390px, kart açık): zoom +, zoom −, sıfırla ⌂,
   #snd-toggle-btn ve #coord-box'ın beşi de elementFromPoint'te
   #onb-card döndürüyordu; kart DOM'dan kaldırılınca beşi de
   erişilebilir oluyordu. Kart tam olarak YENİ oyuncuya çıktığı için
   oyuna ilk giren mobil kullanıcı haritayı yakınlaştıramıyordu.

   Çözüm: kartı tam genişlik yapmak yerine sağda sütun kadar boşluk
   bırak. Sütunun en geniş öğesi #coord-box (~84px) + right:10px →
   100px güvenli pay.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px), (max-height: 600px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #onb-card {
    /* Sütunun en geniş öğesi #coord-box. (3) numaralı yazı büyütmesinden
       SONRA 84px'ten ~100px'e çıktı — pay ona göre alındı. Değeri
       değiştirirsen mobil denetimi yeniden çalıştır. */
    right: 116px !important;   /* sağ alt düğme sütununu boş bırak */
    left: 8px !important;
    width: auto !important;
  }
  /* Kart kapatma ✕ — 18×18 px'ti, parmakla ıskalanıyordu.
     Negatif margin görsel hizayı bozmadan tıklama alanını büyütür. */
  #onb-card .onb-x {
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    padding: 0 !important;
    margin: -8px -8px -8px 0 !important;
  }
  #onb-card .onb-prog { font-size: .72rem !important; }
}

/* ══════════════════════════════════════════════════════════════════
   1b) YATAYDA KART EKRANA SIĞMIYOR, YUKARI TAŞIYORDU

   Yukarıdaki kural sağ düğme sütununu kurtarıyor ama yatay telefonda
   ekran yalnız 360–430 px YÜKSEK. Kart 272 px'e çıkıyor ve bottom:74px
   ile yukarı taşıp SOL ÜSTteki profil düğmesini örtüyordu
   (740×360'ta ölçüldü: kart y 14–286, #profile-btn y 8–55).

   Yüksekliği sınırlayıp içeriği kaydırılabilir yapıyoruz; üst şerit
   boş kalıyor. dvh önce yazılamaz — desteklemeyen tarayıcı satırı
   yok sayar, bu yüzden vh yedeği ÖNCE gelir.
══════════════════════════════════════════════════════════════════ */
@media (max-height: 600px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #onb-card {
    max-height: calc(100vh - 150px) !important;
    max-height: calc(100dvh - 150px) !important;
    overflow-y: auto !important;
    font-size: .72rem !important;
  }
  #onb-card .onb-step { padding: .3rem .3rem !important; }
}

/* ══════════════════════════════════════════════════════════════════
   2) DOKUNMA HEDEFİ BOYUTLARI

   Ölçülenler: #pen-toggle 26×26, renk kareleri 30×30 (390px),
   27×27 (360px), 24×24 (320px). Apple 44pt / Google 48dp önerir.
   Şerit yatay kaydırmalı olduğu için büyütmek rengi gizlemiyor,
   yalnız kaydırma payını artırıyor.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px), (max-height: 600px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #ptoolbar {
    height: 50px !important;
    max-height: 50px !important;
    border-radius: 25px !important;
  }
  #pen-toggle {
    width: 40px !important;
    height: 40px !important;
  }
  .psw {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
  }
}
@media (max-width: 375px) {
  #ptoolbar { height: 48px !important; max-height: 48px !important; border-radius: 24px !important; }
  .psw      { width: 34px !important; height: 34px !important; }
  #pen-toggle { width: 38px !important; height: 38px !important; }
}
@media (max-width: 320px) {
  #ptoolbar { height: 46px !important; max-height: 46px !important; border-radius: 23px !important; }
  .psw      { width: 32px !important; height: 32px !important; }
  #pen-toggle { width: 36px !important; height: 36px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   3) OKUNMAYACAK KADAR KÜÇÜK YAZILAR

   Ölçülenler: #pb-level-badge 8px, #pb-pix 9px, .pw-label 9.3px,
   #coord-box 9.6px, #cdlabel 9.6px, .qcn-reward 10.4px.
   Mobilde 11px altı okunmuyor; hepsi ≥11.5px'e (.72rem) çekildi.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px), (max-height: 600px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #pb-level-badge,
  #profile-btn .pb-pix,
  #pb-pix,
  .pw-label,
  #cdlabel,
  #cdlabel span,
  #pixel-count-row,
  #coord-box,
  #quest-complete-notif .qcn-reward {
    font-size: .72rem !important;
  }
  /* DİKKAT — 04-mobile.css:288 bunları `#profile-btn .pb-lv-badge` ile
     (id+sınıf) yazıyor; yalnız `#pb-level-badge` (id) yazmak ÖZGÜLLÜK
     yarışını kaybediyor ve rozet 8px'te kalıyor. Aynı özgüllüğü kullan. */
  #profile-btn .pb-lv-badge,
  #profile-btn .pb-streak-badge {
    font-size: .72rem !important;
    padding: .1rem .34rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   4) MODAL KAPATMA DÜĞMELERİ

   Ölçülenler: .ctrl-panel-close 14×23, .pc-close 20×21, .abt-close 30×30.
   Bir paneli KAPATAMAMAK mobilde en can sıkıcı hata sınıfı — ✕'i
   ıskalayan kullanıcı oyunda kilitlendiğini sanıyor.
   Görsel boyut (font-size) korunur, yalnız tıklama alanı büyür.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px), (max-height: 600px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .pc-close,
  .abt-close,
  .ctrl-panel-close,
  .fc-close,
  .cnt-close,
  .modal-close,
  .pf-modal-close {
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   5) MODAL İÇİ KÜÇÜK YAZILAR

   Profil / ülke / hakkında / kontrol panellerinde 8.3–10.4px arası
   etiketler ölçüldü. Hepsi ≥11px'e çekiliyor.
   Rozet ve etiketler otomatik genişlikte olduğu için büyümeleri düzeni
   bozmuyor — değişiklik sonrası taşma/kırpılma denetimi 0 verdi.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px), (max-height: 600px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #pc-level-chip,
  #pc-hero-title,
  .pc-hchip-lbl,
  .pc-stat-lbl,
  .pc-label,
  .lvl-leaderboard-title,
  .lvl-rank-xp,
  .cnt-flag,
  .cnt-key-px,
  .cnt-players,
  .cnt-total,
  .cnt-hint,
  .abt-ver,
  .abt-sec-lbl,
  .ctrl-hint,
  .ctrl-scr-btn,
  .pc-hero-btn,
  .pc-hero-btn span {
    font-size: .7rem !important;
  }
  /* Halka grafiğin ORTASINDAKİ etiket: halka deliği dar, .7rem taşırıyor.
     Eşiğin hemen üstünde bırakılıyor. */
  .cnt-donut-lbl { font-size: .66rem !important; }
}

/* ══════════════════════════════════════════════════════════════════
   6) AKTİF SIRA KUTUCUĞUNUN OK İŞARETİ HİÇ GÖRÜNMÜYORDU

   18-polish.css:223 aktif kutucuğun ALTINA (bottom:-7px) listeye
   işaret eden bir ok koyuyor, ama 09-features.css:1064 aynı kutuya
   overflow:hidden veriyor → ok kırpılıyordu. Ölçüm: #pxlb-pick-daily
   görünen 77px / gerçek içerik 86px (= kırpılan 9px, okun payı).

   Bu mobile özgü DEĞİL, masaüstünde de kırpıktı.
   overflow:hidden yalnız üst şeridin (::before) köşeyi taşırmaması
   içindi; şeride köşe yarıçapı verilerek o iş devralınıyor.
══════════════════════════════════════════════════════════════════ */
.pc-stat.pxlb-pick.active { overflow: visible !important; }
.pc-stat.rank::before     { border-radius: 12px 12px 0 0; }

/* ══════════════════════════════════════════════════════════════════
   7) MASAÜSTÜNDE DE MİNİK YAZILAR VARDI

   v4.37'de yalnız mobil düzeltilmişti (@media max-width:768px).
   Masaüstü denetimi (1024 / 1280 / 1440 / 1920 px) aynı kusuru
   DÖRT çözünürlükte de gösterdi — HUD ölçüleri masaüstünde sabit
   olduğu için ekran büyüdükçe yazı görece daha da küçülüyor:
     #pb-level-badge 8.8px · .pw-label 9.3px · .pb-faction-name 9.3px
     #coord-box 9.6px · #pb-pix 9.9px · savaş/ittifak şeridi 9.6px
   Hepsi >=11px'e çekiliyor. Bu blokta medya sorgusu YOK — kural her
   ekranda geçerli; mobil zaten yukarıda .72rem'e ayarlanmış durumda.
══════════════════════════════════════════════════════════════════ */
#pb-level-badge,
#profile-btn .pb-lv-badge,
#profile-btn .pb-streak-badge,
#profile-btn .pb-pix,
#pb-pix,
.pb-faction-name,
#pb-faction-name,
.pw-label,
#pixel-count-row,
#cdlabel,
#cdlabel span,
#coord-box {
  font-size: .72rem !important;
}
/* Savaş / ittifak duyuru şeridi (index.html:1717 ve :1737) */
.war-title span, .ally-title span {
  font-size: .72rem !important;
}

/* İlk Adımlar ilerleme sayısı — mobilde zaten düzeltildi, masaüstünde de. */
#onb-card .onb-prog { font-size: .72rem !important; }

/* Panel içi etiketler — masaüstünde de 8.3–9.9px ölçüldü.
   .cnt-donut-lbl halka deliğine sığmalı, o yüzden bir tık küçük. */
#pc-level-chip,
#pc-hero-title,
.pc-hchip-lbl,
.pc-stat-lbl,
.pc-label,
.lvl-leaderboard-title,
.lvl-rank-xp,
.cnt-flag,
.cnt-key-px,
.cnt-players,
.cnt-total,
.cnt-hint,
.abt-ver,
.abt-sec-lbl,
.ctrl-hint,
.ctrl-scr-btn,
.pc-hero-btn,
.pc-hero-btn span,
.pf-fac-chip,
.pf-staff {
  font-size: .7rem !important;
}
.cnt-donut-lbl { font-size: .66rem !important; }