/* =========================================================================
   css/layout.css
   Menü yapıları, alt/üst barlar, oyuncu kartları (player-banner) ve hizalamalar
   ========================================================================= */

/* --- Modern Menü Bölümleri --- */
.modern-section { background:rgba(255,255,255,.6); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:20px; padding:0 15px; margin-bottom:20px; border:1px solid rgba(255,255,255,.8); box-shadow:0 8px 20px rgba(0,0,0,.03); }
.modern-row { display:flex; justify-content:space-between; align-items:center; padding:15px 0; border-bottom:1px solid rgba(0,0,0,.05); }
.modern-row:last-child { border-bottom:none; }
.section-title { font-size:12px; font-weight:800; color:var(--text-secondary); margin:0 0 10px 5px; letter-spacing:1px; text-transform:uppercase; }

.menu-header { display:flex; flex-direction:column; align-items:center; margin-bottom:20px; }
.menu-logo { font-size:54px; margin-bottom:5px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.15)); }

/* --- Üst Barlar & Bilgi Panelleri --- */
.top-actions-wrapper { display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:25px; }
.player-stat { padding:8px 12px; border-radius:8px; display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.1rem; border:1px solid transparent; color:var(--text-main); margin-right:auto; }
.player-stat > span { color:var(--apple-blue); }
.player-stat svg { color:var(--apple-blue); width:1.3rem; height:1.3rem; }

/* Üst Elmas (Kozalak) Dönme ve Parlama Animasyonu */
.lucide-diamond { animation: flipAndShine 9s linear infinite; }
@keyframes flipAndShine { 
    0%, 100% { transform: rotateY(0) scale(1); filter: drop-shadow(0 0 2px var(--apple-blue)); } 
    50% { transform: rotateY(360deg) scale(1.1); filter: drop-shadow(0 0 10px var(--apple-blue)); } 
}

.game-top-bar { margin-bottom: 12px; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; width: var(--board-size); max-width: 95vw; margin-left: auto; margin-right: auto; box-sizing: border-box; z-index: 1500; animation: slideDown 0.4s ease; gap: 12px; }
.top-bar-controls { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-shrink: 0; }
.expandable-menu { display: flex; gap: 8px; overflow: hidden; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); max-width: 0px; opacity: 0; transform: translateX(20px); pointer-events: none; }
.game-event-text { flex: 1; text-align: left; font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; transition: all 0.3s ease; }

/* --- Alt Bar (Glass Dock) --- */
.glass-dock { background:rgba(255,255,255,.7); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.6); box-shadow:0 12px 35px rgba(0,0,0,.1); border-radius:24px; box-sizing:border-box; transition:all .3s; }
.glass-dock.online-active { background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(209, 245, 222, 0.9)) !important; border-color: var(--green) !important; box-shadow: 0 10px 30px rgba(37, 201, 98, 0.2) !important; }

/* --- Oyuncu Sıra Dizilimi (Player Banners & Timers) --- */
.players-row { display:flex; justify-content:space-between; width:var(--board-size); max-width:95vw; margin:15px 0; z-index:1000; flex-shrink:0; overflow:visible; box-sizing:border-box; padding:0 30px; pointer-events:auto; }
.player-slot { width:45%; display:flex; align-items:center; transition:all .3s ease; opacity:.4; filter:grayscale(.6); box-sizing:border-box; overflow:visible; position:relative; pointer-events:auto; }
.player-slot.active { opacity:1; filter:grayscale(0); }
.player-slot.active .player-banner { box-shadow: 0 8px 25px rgba(0,0,0,.15), inset 0 0 0 1px currentColor, 0 0 15px currentColor; transform: translateY(-2px); animation: pPulse 1.8s infinite alternate; border-color: currentColor; }

@keyframes pPulse { 
    0% { box-shadow: 0 8px 25px rgba(0,0,0,.15), inset 0 0 0 1px currentColor, 0 0 5px currentColor; } 
    100% { box-shadow: 0 8px 25px rgba(0,0,0,.15), inset 0 0 0 2px currentColor, 0 0 25px currentColor; transform: translateY(-4px) scale(1.02); } 
}

.player-banner { width:100%; background:rgba(255,255,255,.85); backdrop-filter:blur(20px); border:2px solid transparent; border-radius:24px; display:flex; align-items:center; position:relative; overflow:visible; transition:all .3s ease; box-sizing:border-box; min-height:60px; }
.player-slot.left .player-banner { flex-direction:row; padding:6px 8px 6px 36px; border-left-color:currentColor; }
.player-slot.right .player-banner { flex-direction:row-reverse; padding:6px 36px 6px 8px; text-align:right; border-right-color:currentColor; }

/* --- 🛡️ KRİTİK: AKTİF OYUNCU BANNER'I KATMAN (Z-INDEX) KORUMASI --- */
.top-players .player-slot, .top-players .dice-slot, .bottom-players .player-slot, .bottom-players .dice-slot { position: relative; z-index: 800; }
.top-players .player-banner, .bottom-players .player-banner { position: relative; z-index: 800; }
.top-players .player-slot.active, .top-players .player-slot.active .dice-slot, .top-players .player-slot.active #dice-hub, 
.bottom-players .player-slot.active, .bottom-players .player-slot.active .dice-slot, .bottom-players .player-slot.active #dice-hub { z-index: 900; }
.top-players .player-slot.active .player-banner, .bottom-players .player-slot.active .player-banner { z-index: 900; }

.timer-container { position:absolute; top:50%; transform:translateY(-50%); width:64px; height:64px; display:flex; align-items:center; justify-content:center; z-index:10; }
.player-slot.left .timer-container { left:-32px; }
.player-slot.right .timer-container { right:-32px; }

.timer-svg { position:absolute; top:0; left:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; filter:drop-shadow(0 4px 6px rgba(0,0,0,.1)); }
.timer-circle-bg { fill:var(--bg); stroke:var(--timer-bg); stroke-width:3; }
.timer-circle-fg { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-dasharray:194.8; stroke-dashoffset:194.8; transition:stroke-dashoffset 1s linear,stroke .3s ease; }

.strike-ring { fill:none; stroke-width:4; stroke-linecap:round; transition:all .3s; stroke:var(--green); opacity:.8; }
.strike-ring.active { stroke:var(--red); opacity:1; }
.strike-0 { stroke-dasharray:42 115.1; stroke-dashoffset:0; }
.strike-1 { stroke-dasharray:42 115.1; stroke-dashoffset:-52.36; }
.strike-2 { stroke-dasharray:42 115.1; stroke-dashoffset:-104.72; }

.pb-avatar { font-size:26px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--bg); box-shadow:inset 0 0 10px rgba(0,0,0,.05); z-index:2; overflow:hidden; }
.pb-info { display:flex; flex-direction:column; z-index:2; flex:1; min-width:0; overflow:hidden; padding:0 10px; }
.pb-name { font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; color:var(--text-main); }
.pb-status { font-size:10px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; margin-top:2px; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* --- Ergonomik Sohbet Balonu --- */
.chat-balloon-panel { position: absolute; top: calc(100% + 10px); right: 15px; width: 260px; background: rgba(255,255,255,0.95); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(0,0,0,0.08); border-radius: 24px; padding: 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.15); z-index: 4000; transform-origin: top right; animation: balloonPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; flex-direction: column; }
@keyframes balloonPop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.emoji-grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.msg-list-container { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }

/* Oyun İçi Hızlı Sohbet / Bildirim Pop-up Animasyonu */
.chat-inline-anim { animation: chatInlinePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes chatInlinePop { 
    from { transform: translateX(-10px); opacity: 0; } 
    to { transform: translateX(0); opacity: 1; } 
}

/* --- Modern Açılır Menü (Accordion) --- */
.modern-accordion { background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.05); border-radius: 16px; margin-bottom: 12px; overflow: hidden; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.modern-accordion.active { background: rgba(255,255,255,0.6); border-color: var(--apple-blue); box-shadow: 0 8px 25px rgba(0,122,255,0.15); }
.acc-header { padding: 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.acc-icon { font-size: 12px; color: var(--text-secondary); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.modern-accordion.active .acc-icon { transform: rotate(180deg); color: var(--apple-blue); }
.acc-body { padding: 0 16px 16px 16px; display: none; animation: fadeIn 0.4s ease; }

/* --- İstatistikler / Lider Tablosu Menü Layout --- */
#stats-menu {
    position: fixed;
    top: max(20px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: min(90vw, 420px);
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .15);
    z-index: 4000;
    display: none;
    flex-direction: column;
    box-sizing: border-box;
}

/* --- Cihaz Uyumlulukları (Tablet & Mobil) --- */
@media(max-width:850px){
    .players-row { padding:0 25px; }
    .player-slot { width:47%; }
    .player-banner { min-height:55px; border-radius:20px; }
    .timer-container { width:58px; height:58px; }
    .player-slot.left .timer-container { left:-29px; }
    .player-slot.right .timer-container { right:-29px; }
    .pb-avatar { width:36px; height:36px; font-size:22px; }
    .pb-name { font-size:13px; }
    .pb-status { font-size:10px; }
}

@media(max-width:480px){
    .players-row { padding:0 20px; margin:10px 0; }
    .player-slot { width:46%; }
    .player-banner { min-height:50px; border-radius:18px; }
    .player-slot.left .player-banner { padding:4px 4px 4px 28px; }
    .player-slot.right .player-banner { padding:4px 28px 4px 4px; }
    .timer-container { width:54px; height:54px; }
    .player-slot.left .timer-container { left:-27px; }
    .player-slot.right .timer-container { right:-27px; }
    .pb-avatar { width:32px; height:32px; font-size:20px; }
    .pb-name { font-size:12px; }
    .pb-status { font-size:9px; }
}

@media(max-width: 600px) {
    .game-top-bar { padding: 6px 8px; margin-bottom: 6px; gap: 6px; }
    .game-event-text { font-size: 13px; padding-right: 5px; }
    .top-bar-controls { gap: 4px; }
}

/* --- Oyun Künyesi (Layout Alt Kısmı) --- */
.credits { margin-top: 25px; font-size: 11px; color: #a1a1a6; line-height: 1.5; font-weight: 500;