/* =========================================================================
   css/store.css
   Mağaza vitrini, grid düzenleri, butonlar ve yapışkan menüler
   ========================================================================= */

/* --- Mağaza: Buğulu cam efektini kapat (düz görünüm) --- */
#store-menu {
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#store-menu .modern-section {
    background: var(--card-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* --- Yapışkan Ön İzleme (Sticky Header) --- */
#shared-dice-preview {
    position: sticky !important;
    top: -15px !important;
    z-index: 50 !important;
    padding: 10px 15px !important;
    margin: -15px -15px 15px -15px !important;
    background: var(--card-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    border-radius: 0 0 16px 16px;
}
/* Önizleme çerçevesi: 110px içerik + iç boşluk — ortala */
#shared-dice-preview .preview-container {
    min-height: 140px !important;
    height: auto !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#shared-dice-preview .preview-container > #preview-dice-fx,
#shared-dice-preview .preview-container > #preview-center-hub,
#shared-dice-preview .preview-container > #preview-base-hub-container {
    margin-left: auto !important;
    margin-right: auto !important;
    flex: 0 0 auto !important;
}

/* --- Kalan süre + "kirala" düğmesi: ÖĞE ADININ ALTINDA ----------------
   Eskiden ikisi de `position:absolute; top:4px; right:4px` ile öğenin
   ÜSTÜNE biniyordu; kiralanmamış ürünlerde fiyat etiketi görselin tam
   ortasını kapatıyor, ürünün ne olduğu görünmüyordu. Artık ikisi de normal
   akışta ve DOM sırası gereği (görsel → ad → etiket) adın ALTINA düşüyor.
   Altı sekmenin hepsi (piyon · zar · efekt · merkez · kale · tahta) aynı
   işaretlemeyi kullandığı için tek kural yeter. */
/* ── TEK ÇİP BİÇİMİ ────────────────────────────────────────────────────
   Kullanıcı isteği: "kiralama butonu kalın kalan süre gibi olsun ve obje
   adı altında butonun gereksiz alt üst boşlukları" giderilsin.

   Eskiden iki rozet birbirine hiç benzemiyordu:
     • kalan süre  → ince, koyu, ortalanmış hap (20 px)
     • kirala      → kutu genişliğince gerilmiş, iki satıra sarabilen
                     kalın blok (33 px)
   Aradaki 13 px fark, süre rozetine simetrik DIŞ BOŞLUK verilerek
   kapatılıyordu (margin-top 10.5 + margin-bottom 6.5) — ekranda adın
   altında bariz bir boşluk olarak görünen şey tam olarak buydu.

   Artık ikisi de AYNI çip: aynı yükseklik, aynı dolgu, aynı köşe, aynı
   kalınlık. Fark ortadan kalktığı için telafi boşluğuna da gerek yok;
   aradaki mesafeyi yalnızca kutunun kendi `gap` değeri veriyor. */
.rental-timer,
.price-tag {
    position: static;
    top: auto;
    right: auto;
    margin-top: 0;
    align-self: center;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    background: rgba(0,0,0,.72);
    color: #fff;
    border-radius: var(--kzl-store-badge-radius, 6px);
    white-space: nowrap;
    flex-wrap: nowrap;
    justify-content: center;
    row-gap: 0;
}
/* ⚠️ `overflow:hidden` ARTIK YALNIZ KALAN SÜRE ÇİPİNDE.
   Ortak kuralda olduğu sürece `.price-tag::before` (dokunma alanı
   genişletmesi) ÇİPİN 22px'ine KIRPILIYORDU — yani hiç işe yaramıyordu;
   elementFromPoint ölçümü bunu ortaya çıkardı. Çip metni artık zaten
   sığdığı için (etiket kısaltıldı, simgeler küçültüldü) kırpmaya gerek yok;
   taşma emniyeti çocuklardaki `text-overflow: ellipsis` ile duruyor. */
.rental-timer { pointer-events: none; overflow: hidden; }
.price-tag { overflow: visible; }
/* Uzun etiket ("1 ay: ◇ 50") dar kutuda çipi yatay taşırmasın: metin
   parçaları sığmayınca kısalır, çip kutunun dışına ASLA çıkmaz. */
.price-tag > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.price-tag > svg { flex: 0 0 auto; }

/* --- Kompakt Grid Butonları --- */
/* `1fr` yerine `minmax(0,1fr)`: uzun ürün adı ("Pumpkin Lantern") sütunu
   şişirip diğerlerini daraltmasın, ızgara her zaman eşit bölünsün. */
.dice-grid-btn, .effect-grid-btn, .piece-grid-btn {
    /* Izgara hücresini TAMAMEN doldur: ad uzunluğu ya da fiyat etiketinin
       satır sayısı değişse bile aynı satırdaki kutular eşit boyda kalsın.
       (Tahta sekmesi de `.effect-grid-btn` kullandığı için bu kural altı
        sekmenin hepsini kapsar.) */
    height: 100%;
    /* İçerik kutunun ORTASINA yerleşir.
       `flex-start` iken kısa içerikli kutuların (kirası aktif ürün: fiyat
       etiketi yok, yalnız küçük süre rozeti var) altında 35-50 px'lik boş
       bir blok kalıyordu — kutu 122 px, içerik 85 px'te bitiyordu.
       Ortalayınca artan boşluk alta yığılmak yerine üst/alta eşit dağılıyor
       ve dolgu gibi okunuyor. Kutu boyu DEĞİŞMİYOR; altı sekmedeki eşitlik
       korunuyor (bkz. #piece-settings-grid > grid-auto-rows). */
    justify-content: center;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 8px 4px 6px !important;
    border-radius: 14px !important;
    gap: 4px !important;
    border: 2px solid transparent;
    background: rgba(255,255,255,.5);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,.03);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.dice-grid-btn.selected, .effect-grid-btn.selected, .piece-grid-btn.selected {
    border-color: var(--apple-blue);
    color: var(--apple-blue);
    background: #fff;
    box-shadow: 0 8px 25px rgba(0,122,255,.2);
    transform: scale(1.05);
}
/* WebGL canvas scale ile bulanıklaşmasın */
.dice-grid-btn.selected,
.dice-grid-btn.previewing {
    transform: none;
}

.dice-grid-btn.previewing, .effect-grid-btn.previewing, .piece-grid-btn.previewing {
    border-color: #ff9f0a;
    color: #ff9f0a;
    background: #fff;
    box-shadow: 0 8px 25px rgba(255,159,10,.2);
    transform: scale(1.03);
}
.dice-grid-btn.previewing { transform: none; }

/* Zar grid: obje + yazı bitişik */
.dice-grid-btn {
    gap: 2px !important;
}
.dice-grid-btn > .dice-grid-3d-wrap,
.dice-grid-btn .dice-grid-3d-wrap {
    transform: none !important;
    margin: 0 auto !important;
    margin-bottom: 0 !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    overflow: visible !important;
    flex-shrink: 0;
}
.dice-grid-btn > span {
    margin: 0 !important;
    line-height: 1.15 !important;
}
.effect-grid-btn div:first-child { font-size: 20px !important; margin-bottom: 2px !important; }
/* Piyona özel 26px kuralı KALDIRILDI — tahta/efekt ile aynı ölçü (20px). */

/* --- Kademeli Mağaza Izgaraları (Responsive Grids) --- */
/* Piyon ızgarası TAHTA sekmesiyle aynı: her ekranda 3 sütun. */
/* ALTI SEKME DE AYNI IZGARA — her ekranda 3 sütun.
   Kapsayıcıların altısında da satır içi `repeat(3,minmax(0,1fr))` yazıyor
   (menus/main_menu.js), ama aşağıdaki medya sorguları `!important` ile
   dördünü telefonda 2 sütuna düşürüyordu: satır içi stil `!important`a
   yenilir. Sonuç, aynı mağazada sekmeye göre değişen yerleşimdi —
   piyon ve tahta 3 sütun, zar/efekt/merkez/kale 2 sütun.
   Artık tek kural altısını da yönetiyor. */
#piece-settings-grid,
#dice-settings-grid,
#effect-settings-grid,
#center-settings-grid,
#base-settings-grid,
#board-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    /* TÜM SEKMELERDE AYNI KUTU BOYU
       -----------------------------------------------------------------
       `height:100%` yalnız AYNI SATIRDAKİ kutuları eşitliyor; satır
       yüksekliği içeriğe göre değiştiği için piyon sekmesi karışık
       görünüyordu:
         • ücretsiz ilk 5 piyonda fiyat etiketi yok  → 71 px
         • adı iki satıra sarkan piyon              → 111 px
         • tahta sekmesi (hepsi etiketli, 2 satır)  → 122 px
       Satır yüksekliği artık SABİT ve altı sekmede de aynı; ölçü tahta
       sekmesinin doğal boyundan alındı. Ad da en fazla iki satır. */
    grid-auto-rows: var(--kzl-store-tile-h, 106px);
}

/* ALTTAKİ BOŞLUĞU KAPATAN İKİ ÖLÇÜ
   ---------------------------------------------------------------------
   Kutu boyu altı sekmede sabit (122 px) ama İÇERİK kutudan kutuya
   değişiyordu; artan yer alta boş bir blok olarak kalıyordu:
     • ad 1 satır mı 2 satır mı  → 11 px oynuyordu
     • rozet fiyat etiketi mi (33 px) yoksa süre rozeti mi (~20 px)
   Her ikisi de sabitlendi: ad her zaman iki satırlık yer kaplar, rozet
   yuvası her zaman aynı yüksekliktedir. Böylece içerik de altı sekmede
   aynı boyda oluyor ve alttaki boşluk kayboluyor. */
.dice-grid-btn > span,
.effect-grid-btn > span,
.piece-grid-btn > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    /* İki satırlık sabit yer (1.15 satır yüksekliği × 2). */
    min-height: 2.3em;
}

/* İKİ ROZET, TEK ÖLÇÜ
   ---------------------------------------------------------------------
   `--kzl-store-badge-h` artık ikisi için de geçerli tek yükseklik. Telafi
   amaçlı dış boşluklar (eski `margin-top: calc(4px + (33-20)/2)`) KALDIRILDI:
   rozetler eşit boyda olduğu için telafiye gerek yok, o boşluk da ekranda
   "gereksiz alt üst boşluk" olarak görünüyordu.

   Not: kirala çipi bir DOKUNMA HEDEFİ. Görünen hap ince kalsın diye
   yükseklik büyütülmüyor; isabet alanı `::before` ile GÖRÜNMEDEN
   genişletiliyor (aşağıda). Böylece hem ince görünür hem rahat tıklanır. */
.dice-grid-btn .price-tag,
.effect-grid-btn .price-tag,
.piece-grid-btn .price-tag,
.dice-grid-btn .rental-timer,
.effect-grid-btn .rental-timer,
.piece-grid-btn .rental-timer {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--kzl-store-badge-h, 22px);
    min-height: 0;
    /* Yatay dolgu da ölçekli: 280 px'lik ekranda "1 ay: ◇ 50" sabit 8 px
       dolguyla çipe sığmıyor, metin kırpılıyordu. */
    padding: 0 var(--kzl-store-badge-pad, 6px);
    gap: var(--kzl-store-badge-gap, 3px);
    margin-top: 0;
    margin-bottom: 0;
}

/* İsabet alanı genişletmesi — görsel ölçüyü DEĞİŞTİRMEZ.
   `position: relative` kullanılıyor: etiket akışta kalır (mutlak konumlu
   değildir), bu yüzden hiçbir şeyin üstüne binmez ve kutu hizası bozulmaz. */
.dice-grid-btn .price-tag,
.effect-grid-btn .price-tag,
.piece-grid-btn .price-tag {
    position: relative;
}
.dice-grid-btn .price-tag::before,
.effect-grid-btn .price-tag::before,
.piece-grid-btn .price-tag::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    /* 34px: görünen çip 22px, isabet alanı ölçülerek 34px'e çıkarıldı.
       Daha büyüğü ürün adının satırına taşıyor (elementFromPoint ile
       doğrulandı) ve isme dokunuş "kirala"yı tetikliyordu. */
    height: 34px;
    transform: translateY(-50%);
    border-radius: inherit;
}

/* Rozeti HİÇ olmayan kutular (ücretsiz ürünler) için aynı yükseklikte boş
   yuva. Böylece görsel + ad, rozetli kutulardakiyle tam aynı hizada durur
   ve altta artan yer kalmaz.
   `:has()` desteklenmeyen eski bir WebView'de bu kural TAMAMEN düşer;
   o durumda kutular ortalanmış hâlde kalır — bozulma değil, eski görünüm. */
.dice-grid-btn:not(:has(.price-tag)):not(:has(.rental-timer))::after,
.effect-grid-btn:not(:has(.price-tag)):not(:has(.rental-timer))::after,
.piece-grid-btn:not(:has(.price-tag)):not(:has(.rental-timer))::after {
    content: "";
    display: block;
    align-self: stretch;
    margin-top: 0;
    min-height: var(--kzl-store-badge-h, 22px);
    pointer-events: none;
}
/* KİLİTLİ ÜRÜN SOLUK — AMA "KİRALA" ÇİPİ DEĞİL
   ---------------------------------------------------------------------
   `.item-locked` (css/base.css) TÜM kutuya `grayscale(1) + opacity:.7`
   uyguluyordu; çip de bundan payını alıyor, kalan süre çipinin yanında
   soluk ve donuk kalıyordu — elmas simgesi bile griye dönüyordu.
   Oysa çip, kutunun EYLEM düğmesi: net okunmalı. Solukluk artık yalnızca
   ürünün görseline ve adına uygulanıyor; iki çip de aynı koyulukta.
   (Kural yalnız mağaza ızgarasını kapsar; `.item-locked` başka yerlerde
    eskisi gibi davranmaya devam eder.) */
.dice-grid-btn.item-locked,
.effect-grid-btn.item-locked,
.piece-grid-btn.item-locked {
    filter: none;
    opacity: 1;
}
.dice-grid-btn.item-locked > *:not(.price-tag):not(.rental-timer),
.effect-grid-btn.item-locked > *:not(.price-tag):not(.rental-timer),
.piece-grid-btn.item-locked > *:not(.price-tag):not(.rental-timer) {
    filter: grayscale(1);
    opacity: .7;
}

/* ÇOK DAR EKRAN (≤330px): kutu içi genişlik ~44px'e iner ve "🔒 ◇ 50"
   çipe sığmaz — fiyat rakamı kırpılırdı. Kilidin taşıdığı bilgi kutuda
   zaten var (ürün soluk, `.item-locked`); rakam ise kırpılamaz. Bu yüzden
   yalnız bu genişlikte kilit simgesi gizlenir, çip "◇ 50" olarak kalır.
   Tam metin `title` / `aria-label` içinde durmaya devam eder. */
@media (max-width: 330px) {
    .dice-grid-btn .price-tag > span,
    .effect-grid-btn .price-tag > span,
    .piece-grid-btn .price-tag > span { display: none; }
}

#setup-cards-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

@media (max-width: 400px) {
    #setup-cards-container { grid-template-columns: 1fr !important; }
    /* `.action-row { 1fr 1fr !important }` KALDIRILDI.
       400px altındaki cihazlarda menü kısayollarını 2 sütuna düşürüyordu;
       daha geniş cihazlarda 3 sütun kalıyordu. Aynı oyun, telefona göre
       farklı yerleşim demekti. Yerleşim artık tek yerden yönetiliyor:
       css/responsive.css > "#menu .action-row" (her ekranda 3+2). */
}

@media (hover: hover) {
    .dice-grid-btn:hover, .effect-grid-btn:hover, .piece-grid-btn:hover { 
        transform:scale(1.05); 
        background:rgba(255,255,255,.9); 
    }
}