/* ========================================================== */
/* 1. TAKTİK TAHTASI İSKELETİ                                 */
/* ========================================================== */

/* Dış Çerçeve */
.tactic-stage-wrapper {
    background-color: #1a1a1a;
    border: 8px solid #2c3e50; /* Koyu çerçeve */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    width: 100%;
    /* Haxball Sahası Oranı (Yaklaşık 1.9:1) */
    aspect-ratio: 1.9 / 1; 
    max-width: 1000px; 
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
}

/* Saha Zemini */
.tactic-stage {
    width: 100%;
    height: 100%;
    /* Kullanıcının yüklediği arkaplan */
    background-image: url('../assets/arkaplan1.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    position: relative;
    cursor: default;
    overflow: hidden;
}

/* ========================================================== */
/* 2. SAHA ÇİZGİLERİ VE KALELER (CSS İLE ÇİZİM)               */
/* ========================================================== */

/* Çizgiler Katmanı */
.pitch-markings {
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    pointer-events: none; /* Tıklamaları engelle, alta geçir */
    z-index: 1;
}

/* Dış Sınır Çizgileri */
.pitch-markings::after {
    content: ''; 
    position: absolute; 
    top: 5%; left: 3%; right: 3%; bottom: 5%;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 4px;
}

/* Orta Saha Çizgisi */
.halfway-line {
    position: absolute; 
    top: 5%; bottom: 5%; left: 50%; 
    width: 2px; 
    background-color: rgba(255,255,255,0.6); 
    transform: translateX(-50%);
}

/* Orta Yuvarlak */
.center-circle {
    position: absolute; 
    top: 50%; left: 50%; 
    width: 15%; aspect-ratio: 1/1;
    border: 2px solid rgba(255,255,255,0.6); 
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Orta Nokta */
.center-circle::after { 
    content: ''; 
    position: absolute; 
    top: 50%; left: 50%; 
    width: 6px; height: 6px;
    background: #fff; 
    border-radius: 50%; 
    transform: translate(-50%, -50%);
}

/* Ceza Sahaları ve Kale Alanları (Kutular) */
.pitch-box {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    border: 2px solid rgba(255,255,255,0.6); 
    background: transparent;
}

/* Ceza Sahası Boyutları */
.penalty-area { width: 15%; height: 50%; }
.penalty-area.left { left: 3%; border-left: none; }
.penalty-area.right { right: 3%; border-right: none; }

/* Kale Alanı (Altıpas) Boyutları */
.goal-area { width: 6%; height: 25%; }
.goal-area.left { left: 3%; border-left: none; }
.goal-area.right { right: 3%; border-right: none; }

/* Kaleler (Ağ Görünümü) */
.pitch-goal {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    width: 2.5%; height: 18%; 
    border: 3px solid #fff;
    /* Çapraz çizgilerle ağ efekti */
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.3) 5px, rgba(255,255,255,0.3) 6px);
    z-index: 2;
}
.goal-net.left { 
    left: 0.5%; 
    border-right: none; 
    border-radius: 5px 0 0 5px; 
}
.goal-net.right { 
    right: 0.5%; 
    border-left: none; 
    border-radius: 0 5px 5px 0; 
}

/* ========================================================== */
/* 3. OYUNCU ve TOP STİLLERİ (GÜNCELLENMİŞ)                   */
/* ========================================================== */

.t-player {
    position: absolute;
    width: 60px; 
    height: 60px; /* Büyütüldü */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    transform: translate(-50%, -50%); /* Merkezden konumlandırma */
    z-index: 50; 
    cursor: grab; 
    user-select: none;
    /* İsim eklendiğinde kutunun büyümesini engellemek için taşmaya izin ver */
    overflow: visible !important;
}

/* Oyuncu Yuvarlağı */
.t-player-circle {
    width: 60px; 
    height: 60px;
    /* Şeklin bozulmasını engelle */
    flex-shrink: 0;
    border-radius: 50%;
    border: 3px solid #ffffff;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-weight: 900; 
    font-family: 'Inter', 'Arial', sans-serif; 
    font-size: 24px;
    /* Flat tasarım gölgesi */
    box-shadow: 0 4px 0 rgba(0,0,0,0.2); 
    transition: transform 0.1s;
    background-color: #000; /* Yüklenene kadar varsayılan */
}

/* Oyuncu İsim Etiketi (Konumu düzeltildi) */
.t-player-name {
    /* İsmi akıştan çıkarıp alta sabitle */
    position: absolute;
    top: 100%; /* Dairenin en altı */
    left: 50%;
    transform: translateX(-50%); /* Ortala */
    
    margin-top: 6px; /* Daireden biraz boşluk bırak */
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    text-shadow: 0 1px 2px #000;
    pointer-events: none; /* İsme tıklanmasın, oyuncuya tıklansın */
    z-index: 60;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Takım Renkleri */
.t-player.blue .t-player-circle { 
    background-color: #3b82f6; /* Mavi */
    color: #fff; 
}

.t-player.red .t-player-circle { 
    background-color: #ef4444; /* Kırmızı */
    color: #fff; 
}

/* Top Stili */
.t-player.ball .t-player-circle { 
    background-color: #fff; 
    color: #000; 
    border-color: #000; 
    width: 30px; height: 30px; /* Top daha küçük */
    font-size: 0; /* Numara gizle */
}

/* Tıklama Efekti */
.t-player:active {
    cursor: grabbing;
    z-index: 100; /* Sürüklerken en öne al */
}
.t-player:active .t-player-circle {
    transform: scale(0.95);
    box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}

/* ========================================================== */
/* 4. METİN ARACI STİLLERİ                                    */
/* ========================================================== */

.t-text {
    position: absolute;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    text-shadow: 0 2px 4px #000, 0 0 5px #000;
    cursor: grab;
    z-index: 55;
    padding: 5px;
    border: 1px dashed transparent;
    user-select: none;
    transform: translate(-50%, -50%);
}

.t-text:hover {
    border-color: rgba(255,255,255,0.3);
    background-color: rgba(0,0,0,0.1);
}

/* ========================================================== */
/* 5. ÇİZİM KATMANI VE MOD YÖNETİMİ                           */
/* ========================================================== */

#drawing-canvas {
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    z-index: 40; /* Oyuncuların altında, sahanın üstünde */
}

/* --- MOD: TAŞI (MOVE) --- */
.mode-move #drawing-canvas {
    pointer-events: none; /* Çizime izin verme */
    z-index: 40;
}
.mode-move .t-player, .mode-move .t-text {
    cursor: grab;
    pointer-events: auto;
}

/* --- MOD: ÇİZ (DRAW) --- */
.mode-draw #drawing-canvas {
    pointer-events: auto; /* Çizime izin ver */
    cursor: crosshair;
    z-index: 60; /* En üste taşı */
}
.mode-draw .t-player, .mode-draw .t-text {
    pointer-events: none; /* Oyunculara dokunulamaz */
    opacity: 0.7; /* Odak çizimde olduğu için soluklaştır */
}

/* --- MOD: YAZI (TEXT) --- */
.mode-text #drawing-canvas {
    pointer-events: auto;
    cursor: text;
    z-index: 60;
}

/* --- MOD: SİLGİ (ERASER) --- */
.mode-eraser #drawing-canvas {
    pointer-events: auto;
    /* Özel silgi imleci */
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" viewBox="0 0 16 16"><path d="M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828l6.879-6.879zm2.121.707a1 1 0 0 0-1.414 0L4.16 7.547l5.293 5.293 4.633-4.633a1 1 0 0 0 0-1.414l-3.879-3.879zM8.746 13.547 3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293l.16-.16z"/></svg>') 0 20, auto; 
    z-index: 60;
}
.mode-eraser .t-player, .mode-eraser .t-text {
    pointer-events: auto;
    cursor: pointer;
    z-index: 65; /* Silgi modunda oyuncular silinebilmeli */
}
/* Silgi modunda üzerine gelince görsel uyarı */
.mode-eraser .t-player:hover .t-player-circle, 
.mode-eraser .t-text:hover {
    opacity: 0.5;
    filter: grayscale(100%);
    box-shadow: 0 0 10px #ff0000; /* Kırmızı uyarı parlaması */
}

/* ========================================================== */
/* 6. DİĞER                                                   */
/* ========================================================== */

.watermark {
    position: absolute; 
    bottom: 10px; right: 15px;
    color: rgba(255,255,255,0.4); 
    font-weight: bold; 
    font-size: 1rem;
    pointer-events: none; 
    z-index: 100;
}