/* =========================================================================
   css/board.css
   Ludo tahtası (#board), hücreler, taşlar, merkez LED hub ve ikonlar
   ========================================================================= */

/* --- Ana Tahta Izgarası --- */
#board { width:calc(var(--cell)*15); height:calc(var(--cell)*15); display:grid; grid-template:repeat(15,1fr)/repeat(15,1fr); background:var(--board-bg); border:1px solid var(--board-lines); position:relative; box-shadow:0 8px 30px rgba(0,0,0,.06); border-radius:42px; overflow:visible; transition:all .3s; }
.cell { border:1px solid var(--board-lines); box-sizing:border-box; background-clip:padding-box; position:relative; display:flex; align-items:center; justify-content:center; transition:border-color .3s; }
/* Ev koridoru: dolgu çizginin dışına taşmasın */
.safe-lane { background-clip:padding-box !important; border-color:var(--board-lines) !important; }

/* --- Hücre Tipleri --- */
.star::after { content:'★'; position:absolute; font-size:calc(var(--cell)*.7); color:#f2ce6e; text-shadow:0 2px 4px rgba(0,0,0,.1); transition:all .3s; }
.star.occupied::after { transform:scale(1.5); color:#ffdf00; text-shadow:0 0 15px rgba(250,203,21,.6); }
.safe-start::after { content:'🛡'; position:absolute; font-size:calc(var(--cell)*.45); opacity:.25; filter:grayscale(1); }

/* Ev koridoru giriş oku (Mini + Klasik, oyuncu rengine göre) */
.home-entry-arrow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 8;
    opacity: 0;
    visibility: hidden;
    color: var(--arrow-color, var(--green));
}
/* Rehber oku: eşikte sürekli kalp atışı (%50 saydam, eski tempo 5.5s) */
.home-entry-arrow.is-visible {
    opacity: 0.5;
    visibility: visible;
    animation: homeEntryHeartbeat 5.5s ease-in-out infinite;
    will-change: transform, opacity;
}
/* Hoş geldin oku: ayrı animasyon — 3 parlak yan-sön, sonra kaybolur */
/* 2 gün önceki tempo: karşılama nabzı 5.5s × 3 yan-sön */
.home-entry-arrow.is-welcome-blink,
.home-entry-arrow.is-welcome-blink.is-visible {
    visibility: visible;
    opacity: 0;
    animation: homeEntryWelcomeBlink 5.5s ease-in-out 3 both !important;
    will-change: transform, opacity;
}
.home-entry-arrow-spin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    font-size: calc(var(--cell) * 0.70);
    display: grid;
    place-items: center;
    /* 🧭 YÖN OKU TAHTAYLA BİRLİKTE DÖNER — TERS ÇEVRİLMEZ
       `--anti-rotate`, tahta döndürüldüğünde yıldız/kalkan/barikat gibi
       SİMGELERİN dik kalması içindir. Ev giriş oku ise bir SİMGE değil, bir YÖN
       göstergesidir: oyuncunun ev koridoruna hangi taraftan girileceğini
       gösterir ve bu yön tahtaya GÖRE tanımlıdır (`--arrow-dir`, baseId başına).

       Anti-rotate eklenince ok, tahtanın dönüşünü iptal edip ekrana sabitleniyor:
       çevrim dışı oyunda kendi tahtan 0° olduğu için doğru görünüyor, online'da
       ise karşı oyuncunun tahtası 180° döndüğü için ok TERS gösteriyordu.
       Ok, içinde bulunduğu tahtayla birlikte dönmelidir — telafi YOK. */
    transform: translate(-50%, -50%) rotate(var(--arrow-dir, 0deg));
    transform-origin: center center;
}
.home-entry-arrow-glyph {
    display: block;
    width: 1em;
    height: 1em;
    line-height: 1;
    color: inherit;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.home-entry-arrow-glyph path {
    fill: currentColor;
}
@keyframes homeEntryHeartbeat {
    0%, 100% { transform: scale(1); opacity: 0.45; filter: brightness(1); }
    50% { transform: scale(1.12); opacity: 0.55; filter: brightness(1.08); }
}
@keyframes homeEntryWelcomeBlink {
    0%, 100% { transform: scale(1); opacity: 0; }
    50% { transform: scale(1.12); opacity: 0.5; }
}

/* Kale dolgusu ayrı, çizgiler nötr — renk komşu karelere taşmasın */
.bg-red { background:var(--red)!important; border-color:var(--board-lines)!important; background-clip:padding-box; }
.bg-green { background:var(--green)!important; border-color:var(--board-lines)!important; background-clip:padding-box; }
.bg-yellow { background:var(--yellow)!important; border-color:var(--board-lines)!important; background-clip:padding-box; }
.bg-blue { background:var(--blue)!important; border-color:var(--board-lines)!important; background-clip:padding-box; }
.center { grid-column:7/10; grid-row:7/10; background:var(--center-bg); border:none!important; }

/* --- Yeni Nesil Merkez (LED Hub) --- */
.center-led-hub { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(var(--cell)*3); height:calc(var(--cell)*3); background:conic-gradient(from 45deg,var(--light-green) 0 90deg,var(--light-yellow) 90deg 180deg,var(--light-red) 180deg 270deg,var(--light-blue) 270deg 360deg); backdrop-filter:blur(15px); border-radius:50%; border:1px solid rgba(255,255,255,.8); box-shadow:0 10px 30px rgba(0,0,0,.15),inset 0 0 0 4px rgba(255,255,255,.5),inset 0 0 20px rgba(255,255,255,.3); z-index:150; overflow:hidden; transition:all .3s; }
.hub-pulse { animation:hubPulse .78s ease-out; }
@keyframes hubPulse { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.15)} }

.hub-core { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(var(--cell)*.9); height:calc(var(--cell)*.9); background:transparent; border-radius:50%; z-index:10; display:flex; align-items:center; justify-content:center; font-size:calc(var(--cell)*.5); border:none; }
.led-quadrant { position:absolute; z-index:5; top:50%!important; left:50%!important; transform:translate(-50%,-50%)!important; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.led-arc { position:absolute; border-radius:50%; border:calc(var(--cell)*.12) solid transparent; box-sizing:border-box; transition:all .5s cubic-bezier(.34,1.56,.64,1); color:rgba(255,255,255,.5); opacity:.3; }

.arc-0 { width:calc(var(--cell)*.85); height:calc(var(--cell)*.85); }
.arc-1 { width:calc(var(--cell)*1.45); height:calc(var(--cell)*1.45); }
.arc-2 { width:calc(var(--cell)*2.05); height:calc(var(--cell)*2.05); }
.arc-3 { width:calc(var(--cell)*2.65); height:calc(var(--cell)*2.65); }

.quad-left .led-arc { border-left-color:currentColor; }
.quad-top .led-arc { border-top-color:currentColor; }
.quad-right .led-arc { border-right-color:currentColor; }
.quad-bottom .led-arc { border-bottom-color:currentColor; }

/* --- Oyun Taşları (.piece) --- */
/* Sadece transform/opacity animasyonlu; boyut anında uygulanır.
   will-change yalnızca seçili taşta. Piyon görselleri artık <img> ile render edilir. */
.piece { cursor:pointer; position:absolute; z-index:100; transition:transform var(--move-dur) cubic-bezier(.34,1.56,.64,1), opacity var(--move-dur) ease; display:flex; align-items:center; justify-content:center; background:transparent!important; border:none!important; width:calc(var(--cell)*1); height:calc(var(--cell)*1); }
.piece .piece-inner { position:absolute; z-index:2; line-height:1; background:transparent!important; border-radius:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
/* 👆 K6 — DOKUNMA HEDEFİ EN AZ 44px
   Taşın GÖRSEL boyutu hücreye bağlı: 15×15 klasik tahtada tipik bir telefonda
   hücre ≈ 25px, aynı karede 3-4 taş varsa görsel 0.5 katına inip ≈ 12px'e
   düşüyor. Apple ve Google'ın önerdiği alt sınır 44-48px.

   Görsel boyuta HİÇ dokunulmadan, taşın ortasına görünmez bir dokunma alanı
   serilir: her zaman en az 48px (Material 48dp), taş bundan büyükse
   taşın kendi boyutu.
   Tıklama `.piece` üzerinde toplandığı için mevcut onclick akışı değişmez.

   Komşu kareyle çakışma sorun değil: oynanabilir taşların z-index'i 500,
   oynanamayanlarınki 100+ — yani genişletilmiş alan çakıştığında her zaman
   OYNANABİLİR taş kazanır. Aynı karedeki birden fazla oynanabilir taş için
   src/board.js > kzlPieceTapped seçim balonunu açar.                        */
.piece::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max(48px, 100%);
    height: max(48px, 100%);
    z-index: 0;
    border-radius: 50%;
    background: transparent;
}
/* Tahtadan kaldırılmış (yenmiş/gizli) taş dokunma alanı üretmemeli */
.piece[data-step="-2"]::before,
.piece.eaten-anim::before { display: none; }

.piece.active { animation:bounce-icon .91s infinite alternate; z-index:500!important; will-change: transform, filter; }

/* Oynanamayan taşa dokununca oynanabilir taşları kısa süre vurgula (O3) */
.piece.kzl-hint-flash { filter: drop-shadow(0 0 8px #ffd60a) drop-shadow(0 0 16px #ffd60a); }

/* 🖐 O4 — BASIŞ GERİ BİLDİRİMİ
   Menü butonlarının hepsinde `:active { scale }` vardı ama taşta ve zarda
   yoktu; dokunuşun algılandığı ancak hareket başlayınca anlaşılıyordu.

   NOT: efekt `.piece-inner`e DEĞİL `.piece-img`e uygulanır. Tahta
   döndürüldüğünde src/board.js `.piece-inner`e satır içi `rotate()` yazıyor;
   satır içi stil CSS'i ezdiği için oradaki bir kural döndürülmüş tahtada
   sessizce çalışmaz olurdu. `.piece-img`in satır içi transform'u hiç yok. */
.piece .piece-img { transition: transform .12s ease, filter .12s ease; }
.piece:active .piece-img { transform: scale(.86); filter: brightness(1.25); }
/* Kale içi ev taşları: bounce, avlu konumunu korusun */
.piece.home-base-piece.active,
.piece.classical-home-piece.active {
    animation: bounce-icon-home .91s infinite alternate !important;
}

/* --- Piyon Görseli (.piece-img) --- */
.piece-img {
    width: 95%;
    height: 95%;
    object-fit: contain;
    pointer-events: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* --- Piyon görseli gölgesi --- */
.piece .piece-inner {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)) !important;
}
/* Performans modu: tek gölge */
body.kzl-game-performance .piece .piece-inner {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)) !important;
}

/* --- Taş ve Kalkan Animasyonları --- */
.eaten-anim { animation:eaten .5s cubic-bezier(.68,-.55,.27,1.55) forwards; }
/* 🐛 YENEN TAŞ KALEDE KAYIK VE KÜÇÜK DURUYORDU
   `@keyframes eaten` doğrudan `transform`u canlandırıyor. Kaledeki taşın
   konumu ise satır içi
       transform: translate(calc(-50% + var(--kzl-home-x)), calc(-50% + var(--kzl-home-y)))
   ile veriliyor (kzlApplyHomeBaseLayout). Çalışan animasyon satır içi
   transform'u EZDİĞİ için taş, avlu yuvasına gitmek yerine hücrenin sol-üst
   köşesinden ~20px kayık duruyordu; `forwards` yüzünden animasyon bitince de
   o kayık hâlde kalıyordu. Kale içi sürüm avlu ötelemesini her karede korur.
   (Aynı desen `bounce-icon-home`da da kullanılıyor.) */
.piece.eaten-anim.home-base-piece,
.piece.eaten-anim.classical-home-piece {
    animation: eaten-home .5s cubic-bezier(.68,-.55,.27,1.55) forwards;
}
@keyframes eaten-home {
    0%   { transform: translate(calc(-50% + var(--kzl-home-x, 0px)), calc(-50% + var(--kzl-home-y, 0px))) scale(1); opacity:1 }
    50%  { transform: translate(calc(-50% + var(--kzl-home-x, 0px)), calc(-50% + var(--kzl-home-y, 0px))) scale(.2) rotate(180deg); opacity:.8; filter:brightness(2) }
    100% { transform: translate(calc(-50% + var(--kzl-home-x, 0px)), calc(-50% + var(--kzl-home-y, 0px))) scale(1) rotate(360deg); opacity:1 }
}
@keyframes eaten { 0%{transform:scale(1);opacity:1} 50%{transform:scale(.2) rotate(180deg);opacity:.8;filter:brightness(2)} 100%{transform:scale(1) rotate(360deg);opacity:1} }
@keyframes bounce-icon { from{transform:translateY(0) scale(1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))} to{transform:translateY(-8px) scale(1.15);filter:drop-shadow(0 10px 10px rgba(0,0,0,.4))} }
@keyframes bounce-icon-home {
    from {
        transform: translate(calc(-50% + var(--kzl-home-x, 0px)), calc(-50% + var(--kzl-home-y, 0px))) scale(1);
        filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
    }
    to {
        transform: translate(calc(-50% + var(--kzl-home-x, 0px)), calc(-50% + var(--kzl-home-y, 0px) - 8px)) scale(1.15);
        filter: drop-shadow(0 10px 10px rgba(0,0,0,.4));
    }
}
@keyframes bounce-icon-classical {
    from {
        transform: translate(calc(-50% + var(--kzl-home-x, 0px)), calc(-50% + var(--kzl-home-y, 0px))) scale(1);
        filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
    }
    to {
        transform: translate(calc(-50% + var(--kzl-home-x, 0px)), calc(-50% + var(--kzl-home-y, 0px) - 8px)) scale(1.15);
        filter: drop-shadow(0 10px 10px rgba(0,0,0,.4));
    }
}

.blockade-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:18px; z-index:200; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); animation:popInCentering .3s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
@keyframes popInCentering { from{transform:translate(-50%,-50%) scale(.8);opacity:0} to{transform:translate(-50%,-50%) scale(1);opacity:1} }

/* --- Mini Mode (Mobil için Özel Boyutlandırma) --- */
#board.mini-mode { --cell: calc(var(--board-size) / 11) !important; width: var(--board-size) !important; height: var(--board-size) !important; grid-template: repeat(11, 1fr) / repeat(11, 1fr) !important; }
#board.mini-mode .center { grid-column: 5 / 8 !important; grid-row: 5 / 8 !important; background: var(--board-bg) !important; border: none !important; z-index: 1; }
#board.mini-mode .arc-0 { width: calc(var(--cell) * 1.2) !important; height: calc(var(--cell) * 1.2) !important; }
#board.mini-mode .arc-1 { width: calc(var(--cell) * 2.2) !important; height: calc(var(--cell) * 2.2) !important; }
#board.mini-mode .arc-2, #board.mini-mode .arc-3 { display: none !important; }
#board.mini-mode .center-led-hub { background: conic-gradient(from 45deg, var(--light-green) 0 90deg, var(--light-yellow) 90deg 180deg, var(--light-red) 180deg 270deg, var(--light-blue) 270deg 360deg) !important; }

/* Mobil Tahta Uyumları */
@media(max-width:480px){
    .hub-core { width:calc(var(--cell)*.7); height:calc(var(--cell)*.7); font-size:13px; border-width:1px; }
}

/* Oyun sırasında düşük FPS yapan blur/glow/sonsuz efektleri kapatan performans modu. */
body.kzl-game-performance #board {
    box-shadow: none !important;
    transition: none !important;
}
body.kzl-game-performance .center-led-hub {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.35) !important;
    transition: none !important;
}
body.kzl-game-performance .led-arc {
    transition: none !important;
    filter: none !important;
    box-shadow: none !important;
}
/* Performans modu da `transition:all` ile aynı layout maliyetini geri getiriyordu */
body.kzl-game-performance .piece {
    transition: transform var(--move-dur) cubic-bezier(.34,1.56,.64,1) !important;
}
/* Taş kalitesi / renk gölgesi / seçim bounce — performans modunda da kalsın */
body.kzl-game-performance .piece.active {
    animation: bounce-icon .91s infinite alternate !important;
}
body.kzl-game-performance .piece.home-base-piece.active,
body.kzl-game-performance .piece.classical-home-piece.active {
    animation: bounce-icon-home .91s infinite alternate !important;
}
body.kzl-game-performance .star::after,
body.kzl-game-performance .star.occupied::after,
body.kzl-game-performance .safe-start::after,
body.kzl-game-performance .blockade-icon {
    filter: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
}
/* Performans modu: ok animasyonları kalsın (ucuz); diğer efektler kapalı */
body.kzl-game-performance .home-entry-arrow.is-visible:not(.is-welcome-blink) {
    animation: homeEntryHeartbeat 5.5s ease-in-out infinite !important;
    opacity: 0.5 !important;
    will-change: transform, opacity;
}
body.kzl-game-performance .home-entry-arrow.is-welcome-blink,
body.kzl-game-performance .home-entry-arrow.is-welcome-blink.is-visible {
    animation: homeEntryWelcomeBlink 5.5s ease-in-out 3 both !important;
    will-change: transform, opacity;
}

/* =========================================================================
   🔥 KALE (ÜS) TASARIMLARI (GERÇEK ŞEKİL DEĞİŞİMİ)
   ========================================================================= */
.base-hub-container { background: var(--board-bg); pointer-events: none; z-index: 1; }
.base-hub-pos-0 { border-top-left-radius: 41px; }
.base-hub-pos-1 { border-top-right-radius: 41px; }
.base-hub-pos-2 { border-bottom-right-radius: 41px; }
.base-hub-pos-3 { border-bottom-left-radius: 41px; }

/* Classic ve Mini Mod için köşedeki ızgara karelerinin (cells) kesilmesi */
#board:not(.mini-mode) > .cell:nth-child(1) { border-top-left-radius: 41px; }
#board:not(.mini-mode) > .cell:nth-child(15) { border-top-right-radius: 41px; }
#board:not(.mini-mode) > .cell:nth-child(211) { border-bottom-left-radius: 41px; }
#board:not(.mini-mode) > .cell:nth-child(225) { border-bottom-right-radius: 41px; }

#board.mini-mode > .cell:nth-child(1) { border-top-left-radius: 41px; }
#board.mini-mode > .cell:nth-child(11) { border-top-right-radius: 41px; }
#board.mini-mode > .cell:nth-child(111) { border-bottom-left-radius: 41px; }
#board.mini-mode > .cell:nth-child(121) { border-bottom-right-radius: 41px; }

.base-hub-pos-0 .base-hub { background-color: var(--red); }
.base-hub-pos-1 .base-hub { background-color: var(--blue); }
.base-hub-pos-2 .base-hub { background-color: var(--green); }
.base-hub-pos-3 .base-hub { background-color: var(--yellow); }

.base-hub { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: inset 0 0 25px rgba(0,0,0,0.2); }
.base-hub::after { content: ''; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; background: rgba(255,255,255,0.35); border-radius: 15%; box-shadow: inset 0 2px 10px rgba(0,0,0,0.1); }

/* --- Klasik Kale = Neon tasarım (ücretsiz varsayılan) --- */
.base-design-classic,
.base-design-neonbase {
    border-radius: 12%;
    clip-path: none;
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(135deg,
        rgba(0,0,0,0.3) 0%,
        rgba(255,255,255,0.08) 50%,
        rgba(0,0,0,0.3) 100%
    );
    box-shadow:
        inset 0 0 15px rgba(255,255,255,0.4),
        0 0 12px rgba(255,255,255,0.3),
        inset 0 0 0 2px rgba(255,255,255,0.4);
}
.base-design-classic::after,
.base-design-neonbase::after {
    border-radius: 8%;
    top: 12%; left: 12%;
    width: 76%; height: 76%;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.6);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.3),
        inset 0 0 8px rgba(255,255,255,0.2);
}


#preview-base-hub-inner { background-color: var(--green); }
.base-grid-btn .base-hub { background-color: rgba(0,0,0,0.15); }
.base-grid-btn:not(.item-locked) .base-hub { background-color: var(--green); }

/* --- Futbol Sahası Kale (kiralamalı · 4 renkli PNG) --- */
.base-design-soccer {
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 0;
    box-shadow: none !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}
.base-design-soccer::before,
.base-design-soccer::after {
    display: none !important;
    content: none !important;
}
.base-hub-pos-0 .base-design-soccer {
    background-image: url("../image/castle/soccer/soccer-Red.png?v=15.41");
}
.base-hub-pos-1 .base-design-soccer {
    background-image: url("../image/castle/soccer/soccer-Blue.png?v=15.41");
}
.base-hub-pos-2 .base-design-soccer {
    background-image: url("../image/castle/soccer/soccer-Green.png?v=15.41");
}
.base-hub-pos-3 .base-design-soccer {
    background-image: url("../image/castle/soccer/soccer-Yellow.png?v=15.41");
}
.base-grid-btn .base-design-soccer,
#preview-base-hub-inner.base-design-soccer {
    background-color: transparent !important;
    background-image: url("../image/castle/soccer/soccer-Green.png?v=15.41");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.base-grid-btn .base-design-soccer,
.base-grid-btn:not(.item-locked) .base-design-soccer {
    background-color: transparent !important;
}

/* --- Fütüristik Kale (kiralamalı · 4 renkli PNG) --- */
.base-design-futuristic {
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 0;
    box-shadow: none !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}
.base-design-futuristic::before,
.base-design-futuristic::after {
    display: none !important;
    content: none !important;
}
.base-hub-pos-0 .base-design-futuristic {
    background-image: url("../image/castle/futuristic/futuristic-Red.png?v=15.50");
}
.base-hub-pos-1 .base-design-futuristic {
    background-image: url("../image/castle/futuristic/futuristic-Blue.png?v=15.50");
}
.base-hub-pos-2 .base-design-futuristic {
    background-image: url("../image/castle/futuristic/futuristic-Green.png?v=15.50");
}
.base-hub-pos-3 .base-design-futuristic {
    background-image: url("../image/castle/futuristic/futuristic-Yellow.png?v=15.50");
}
.base-grid-btn .base-design-futuristic,
#preview-base-hub-inner.base-design-futuristic {
    background-color: transparent !important;
    background-image: url("../image/castle/futuristic/futuristic-Green.png?v=15.50");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.base-grid-btn .base-design-futuristic,
.base-grid-btn:not(.item-locked) .base-design-futuristic {
    background-color: transparent !important;
}

/* --- Yüzük Kale (kiralamalı · 4 renkli PNG) --- */
.base-design-ring {
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 0;
    box-shadow: none !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}
.base-design-ring::before,
.base-design-ring::after {
    display: none !important;
    content: none !important;
}
.base-hub-pos-0 .base-design-ring {
    background-image: url("../image/castle/ring/ring-Red.png?v=15.50");
}
.base-hub-pos-1 .base-design-ring {
    background-image: url("../image/castle/ring/ring-Blue.png?v=15.50");
}
.base-hub-pos-2 .base-design-ring {
    background-image: url("../image/castle/ring/ring-Green.png?v=15.50");
}
.base-hub-pos-3 .base-design-ring {
    background-image: url("../image/castle/ring/ring-Yellow.png?v=15.50");
}
.base-grid-btn .base-design-ring,
#preview-base-hub-inner.base-design-ring {
    background-color: transparent !important;
    background-image: url("../image/castle/ring/ring-Green.png?v=15.50");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.base-grid-btn .base-design-ring,
.base-grid-btn:not(.item-locked) .base-design-ring {
    background-color: transparent !important;
}

/* =========================================================================
   🔥 TAHTA ARKA PLANI (BOARD BACKGROUND) TASARIMLARI
   ========================================================================= */

/* Classic Theme (Now Marble by default) */
#board.board-bg-classic, .board-bg-classic {
    background-image: url('../image/table/Mermer.png');
    background-size: cover;
    background-position: center;
    background-color: #f5f5f5;
    border-color: #d4af37; /* Gold accent */
}

/* Wood Theme */
#board.board-bg-wood, .board-bg-wood {
    background-image: url('../image/table/Tahta.png');
    background-size: cover;
    background-position: center;
    background-color: #4a2f1d;
    border-color: #2b180d;
}

#board.board-bg-ocean, .board-bg-ocean {
    background-image: url('../image/table/Okyanus.png');
    background-size: cover;
    background-position: center;
}

#board.board-bg-stone, .board-bg-stone {
    background-image: url('../image/table/Ta%C5%9F.png');
    background-size: cover;
    background-position: center;
}

#board.board-bg-space, .board-bg-space {
    background-image: url('../image/table/Uzay.png');
    background-size: cover;
    background-position: center;
}

#board.board-bg-emerald, .board-bg-emerald {
    background-image: url('../image/table/Zumrut.png');
    background-size: cover;
    background-position: center;
}

/* Fütüristik — image/table/Fütüristik.png
   Dosya adı Türkçe karakter içeriyor; CSS url() içinde yüzde kodlanmalı
   (ü → %C3%BC), aksi halde bazı sunucularda/WebView'da 404 döner.
   Aynı kalıp Taş.png için de kullanılıyor (Ta%C5%9F.png). */
#board.board-bg-futuristic, .board-bg-futuristic {
    background-image: url('../image/table/F%C3%BCt%C3%BCristik.png');
    background-size: cover;
    background-position: center;
}

/* Neon Theme */
#board.board-bg-neon, .board-bg-neon {
    background-image: linear-gradient(0deg, transparent 24%, rgba(0, 255, 255, .3) 25%, rgba(0, 255, 255, .3) 26%, transparent 27%, transparent 74%, rgba(0, 255, 255, .3) 75%, rgba(0, 255, 255, .3) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 255, 255, .3) 25%, rgba(0, 255, 255, .3) 26%, transparent 27%, transparent 74%, rgba(0, 255, 255, .3) 75%, rgba(0, 255, 255, .3) 76%, transparent 77%, transparent);
    background-size: 30px 30px;
    background-color: #0b0c10;
    border-color: #45f3ff;
}

/* Base Border Overrides */
#board.board-bg-classic .cell { border-color: rgba(212, 175, 55, 0.4) !important; }
#board.board-bg-wood .cell { border-color: rgba(0,0,0,0.3) !important; }
#board.board-bg-ocean .cell { border-color: rgba(255,255,255,0.2) !important; }
#board.board-bg-stone .cell { border-color: rgba(0,0,0,0.35) !important; }
#board.board-bg-space .cell { border-color: rgba(255,255,255,0.25) !important; }
#board.board-bg-emerald .cell { border-color: rgba(0,0,0,0.3) !important; }
#board.board-bg-neon .cell { border-color: rgba(69, 243, 255, 0.2) !important; }

/* Global Board Background Transparency for all themes */
#board .cell.center,
#board .cell.bg-red,
#board .cell.bg-blue,
#board .cell.bg-green,
#board .cell.bg-yellow {
    background: transparent !important;
    background-color: transparent !important;
}

/* Board Base Hub Containers Backgrounds (Global) */
#board .base-hub-container {
    background: transparent !important;
}
#board .base-hub-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 20%;
    opacity: 0.1;
    z-index: -1;
}
#board .base-hub-pos-0::before { background: var(--red) !important; }
#board .base-hub-pos-1::before { background: var(--blue) !important; }
#board .base-hub-pos-2::before { background: var(--green) !important; }
#board .base-hub-pos-3::before { background: var(--yellow) !important; }

/* B11 — sunucu düzeltmesi (resync) sonrası taş vurgusu.
   applyBoardSnapshot taşı yeniden ebeveynliyor; konum değişimi transform'dan
   gelmediği için CSS geçişi işe yaramaz. Kısa bir darbe, ani sıçramanın
   "bozukluk" gibi okunmasını engelliyor. */
.piece.kzl-resync-pop .piece-img {
    animation: kzl-resync-pop .38s cubic-bezier(.34,1.56,.64,1);
}
@keyframes kzl-resync-pop {
    0%   { transform: scale(.55); filter: brightness(1.6); }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1); filter: none; }
}