/* =========================================================================
   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:20px; overflow:hidden; transition:all .3s; }
.cell { border:.5px solid var(--board-lines); position:relative; display:flex; align-items:center; justify-content:center; transition:border-color .3s; }

/* --- 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); }

.bg-red { background:var(--red)!important; border-color:var(--red)!important; }
.bg-green { background:var(--green)!important; border-color:var(--green)!important; }
.bg-yellow { background:var(--yellow)!important; border-color:var(--yellow)!important; }
.bg-blue { background:var(--blue)!important; border-color:var(--blue)!important; }
.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) --- */
.piece { cursor:pointer; position:absolute; z-index:100; transition:all var(--move-dur) cubic-bezier(.34,1.56,.64,1); display:flex; align-items:center; justify-content:center; background:transparent!important; border:none!important; width:calc(var(--cell)*1); height:calc(var(--cell)*1); will-change: transform; }
.piece .piece-inner { position:absolute; z-index:2; line-height:1; transition:font-size var(--move-dur); background:transparent!important; border-radius:0; }
.piece.active { animation:bounce-icon .91s infinite alternate; z-index:500!important; will-change: transform, filter; }

/* --- Taş ve Kalkan Animasyonları --- */
.eaten-anim { animation:eaten .5s cubic-bezier(.68,-.55,.27,1.55) forwards; }
@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))} }

.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; }
}

/* =========================================================================
   🔥 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 .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); }

/* Tasarımlar */
.base-design-classic { border-radius: 15%; }
.base-design-castle { border-radius: 5%; clip-path: polygon(5% 0, 20% 0, 20% 10%, 35% 10%, 35% 0, 65% 0, 65% 10%, 80% 10%, 80% 0, 95% 0, 100% 5%, 100% 20%, 90% 20%, 90% 35%, 100% 35%, 100% 65%, 90% 65%, 90% 80%, 100% 80%, 100% 95%, 95% 100%, 80% 100%, 80% 90%, 65% 90%, 65% 100%, 35% 100%, 35% 90%, 20% 90%, 20% 100%, 5% 100%, 0 95%, 0 80%, 10% 80%, 10% 65%, 0 65%, 0 35%, 10% 35%, 10% 20%, 0 20%, 0 5%); }
.base-design-cyber { clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%); }
.base-design-cyber::after { border-radius: 50%; }
.base-design-portal { border-radius: 50%; background-image: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.2) 10%, transparent 15%); }
.base-design-portal::after { border-radius: 50%; background: rgba(0,0,0,0.15); box-shadow: 0 0 15px rgba(255,255,255,0.3); }
.base-design-stadium { border-radius: 35%; background-image: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.15) 80%); }
.base-design-floral { clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%); }
.base-design-floral::after { transform: rotate(45deg); }
.base-design-void { border-radius: 50%; box-shadow: inset 0 0 50px rgba(0,0,0,0.8); }
.base-design-void::after { background: rgba(0,0,0,0.3); border-radius: 50%; }
.base-design-crystal { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.base-design-crystal::after { transform: rotate(45deg); border-radius: 10px; background: rgba(255,255,255,0.25); }

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