/* ========================================================== */
/* 1. TAKTİK TAHTASI İSKELETİ (GÜNCELLENDİ)                   */
/* ========================================================== */

/* Dış Çerçeve */
.tactic-stage-wrapper {
    background-color: #1a1a1a; /* Saha zemini koyu kalmalı, çim etkisi için */
    /* Eski koyu border yerine sitenin primary rengi kullanıldı */
    border: 6px solid #1e40af; 
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 1.9 / 1; 
    max-width: 1000px; 
    margin: 0 auto;
    /* Gölgeyi biraz yumuşattık */
    box-shadow: 0 10px 25px rgba(30, 64, 175, 0.15) !important;
}

/* Saha Zemini (Aynı Kalabilir) */
.tactic-stage {
    width: 100%;
    height: 100%;
    background-image: url('../background.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    position: relative;
    cursor: default;
    overflow: hidden;
}

/* ========================================================== */
/* 2. SAHA ÇİZGİLERİ VE KALELER (AYNI KALDI)                  */
/* ========================================================== */
/* Buradaki mekaniksel classların hiçbirini değiştirmiyoruz */

.pitch-markings {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1;
}
.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;
}
.halfway-line {
    position: absolute; top: 5%; bottom: 5%; left: 50%; width: 2px; 
    background-color: rgba(255,255,255,0.6); transform: translateX(-50%);
}
.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%);
}
.center-circle::after { 
    content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px;
    background: #fff; border-radius: 50%; transform: translate(-50%, -50%);
}
.pitch-box {
    position: absolute; top: 50%; transform: translateY(-50%);
    border: 2px solid rgba(255,255,255,0.6); background: transparent;
}
.penalty-area { width: 15%; height: 50%; }
.penalty-area.left { left: 3%; border-left: none; }
.penalty-area.right { right: 3%; border-right: none; }
.goal-area { width: 6%; height: 25%; }
.goal-area.left { left: 3%; border-left: none; }
.goal-area.right { right: 3%; border-right: none; }
.pitch-goal {
    position: absolute; top: 50%; transform: translateY(-50%); width: 2.5%; height: 18%; 
    border: 3px solid #fff;
    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ÜNCELLENDİ)                    */
/* ========================================================== */

.t-player {
    position: absolute;
    width: 60px; height: 60px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transform: translate(-50%, -50%);
    z-index: 50; cursor: grab; user-select: none;
    overflow: visible !important;
}

/* Oyuncu Yuvarlağı */
.t-player-circle {
    width: 60px; height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 3px solid #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; 
    /* Font Oswald yapıldı, siteyle uyumlu */
    font-family: 'Oswald', sans-serif; 
    font-size: 24px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* Gölge biraz daha modernleştirildi */
    transition: transform 0.1s;
    background-color: #000; 
}

/* Oyuncu İsim Etiketi */
.t-player-name {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 6px;
    /* Arka plan daha kurumsal bir gri yapıldı */
    background: rgba(15, 23, 42, 0.9); /* --bg-header rengine yakın */
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 13px; /* Biraz büyütüldü */
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    white-space: nowrap;
    text-shadow: none;
    pointer-events: none; 
    z-index: 60;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Takım Renkleri (Sitenin renk paletine uygun hale getirildi) */
.t-player.blue .t-player-circle { 
    background-color: #1e40af; /* --primary */
    color: #fff; 
}

.t-player.red .t-player-circle { 
    background-color: #dc2626; /* --accent */
    color: #fff; 
}

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

.t-player:active { cursor: grabbing; z-index: 100; }
.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İ (GÜNCELLENDİ)                      */
/* ========================================================== */

.t-text {
    position: absolute;
    color: #fff;
    font-weight: bold;
    font-family: 'Oswald', sans-serif; /* Font güncellendi */
    font-size: 22px;
    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.5);
    background-color: rgba(0,0,0,0.2);
}

/* ========================================================== */
/* 5. ÇİZİM MODLARI (MEKANİK KISIMLAR AYNI)                   */
/* ========================================================== */

#drawing-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 40; 
}

/* Mod CSS'leri (Mekanik için gerekli, değiştirmiyoruz) */
.mode-move #drawing-canvas { pointer-events: none; z-index: 40; }
.mode-move .t-player, .mode-move .t-text { cursor: grab; pointer-events: auto; }

.mode-draw #drawing-canvas { pointer-events: auto; cursor: crosshair; z-index: 60; }
.mode-draw .t-player, .mode-draw .t-text { pointer-events: none; opacity: 0.7; }

.mode-text #drawing-canvas { pointer-events: auto; cursor: text; z-index: 60; }

.mode-eraser #drawing-canvas {
    pointer-events: auto;
    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; 
}
.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; 
}

/* ========================================================== */
/* 6. DİĞER (Watermark Güncellemesi)                          */
/* ========================================================== */

.watermark {
    position: absolute; 
    bottom: 15px; 
    right: 20px;
    color: rgba(255,255,255,0.7); /* Görünürlüğü hafif artırdık */
    font-weight: 700; 
    font-family: 'Oswald', sans-serif;
    font-size: 1.3rem;
    pointer-events: none; 
    z-index: 100;
    
    /* Yeni Eklenenler: Logo ve yazıyı hizala */
    display: flex;
    align-items: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* Yazı ve logo daha net okunsun */
}