/* ====================================================================== */
/* === YENİ TEMA BAŞLANGICI (SAVAŞ KOMUTA MERKEZİ) === */
/* ====================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700&family=Oswald:wght@400;500;700&display=swap');

:root {
    /* YENİ RENK PALETİ */
    --bg-dark-main: #3a3a45; /* Ana Koyu Arka Plan */
    --bg-panel: #2a2a35;      /* Panellerin Arka Planı (biraz daha açık) */
    --border-color: #4a4a55;  /* Panellerin Kenarlığı */
    --text-light: #e0e0e5;    /* Ana Metin Rengi (hafif kırık beyaz) */
    --text-medium: #a0a0a8;   /* İkincil Metin Rengi (gri) */
    --text-dark: #1d1d26;     /* Koyu Arka Plan Üstü Metin (örn. butonlar) */
    
    --accent-primary: #ff6600; /* Vurgu Rengi (Turuncu - 'Savaş' hissi) */
    --accent-primary-hover: #ff8533; /* Vurgu Rengi Hover */
    --accent-primary-dark: #cc5200;  /* Vurgu Rengi Gölge/Kenarlık */
    
    --success-color: #27ae60;  /* Başarı Rengi */
    --warning-color: #f39c12;  /* Uyarı Rengi */
    --danger-color: #c0392b;   /* Tehlike Rengi (Daha koyu bir kırmızı) */

    --shadow-light: 0 0 15px rgba(255, 102, 0, 0.5); /* Turuncu Işıma */
    --shadow-dark: 0 5px 15px rgba(0, 0, 0, 0.4);
    --inset-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    --neon-cyan: #00FFFF;
    
    /* ESKİ DEĞİŞKEN (Dokunulmayan) */
    --canvas-max-width: 1900px;
}

/* ====================================================================== */
/* === KEYFRAMES (ORİJİNAL, DOKUNULMADI) === */
/* ====================================================================== */

@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.85vh); } }
@keyframes playerPulse { 
    0%, 100% { 
        /* script.js'ten gelen dinamik rengi kullanır */
        box-shadow: 0 0 10px 0px var(--player-glow-color); 
        border-color: var(--player-glow-color); 
        transform: scale(1.0); 
    } 
    50% { 
        /* script.js'ten gelen dinamik rengi kullanır */
        box-shadow: 0 0 15px 3px var(--player-glow-color); 
        border-color: #fff; /* Parlama anında kenarlık beyaza döner (daha belirgin) */
        transform: scale(1.01); 
    } 
}
@keyframes shimmer { 0% { background-position: -52vw 0; } 100% { background-position: 52vw 0; } }
@keyframes ripple { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(4); opacity: 0; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0.26vw rgba(255, 107, 107, 0.5), 0 0 0.52vw rgba(255, 107, 107, 0.3); } 50% { box-shadow: 0 0 1.04vw rgba(255, 107, 107, 0.8), 0 0 1.56vw rgba(255, 107, 107, 0.5); } }
@keyframes particle { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } }
@keyframes fadeInScale { from { opacity: 0; transform: translateY(2.77vh) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fadeIn { from { opacity: 0; transform: translateX(-1.04vw); } to { opacity: 1; transform: translateX(0); } }
@keyframes captureEffect { 0% { opacity: 1; box-shadow: 0 0 0.52vw #4BFF73; } 50% { transform: scale(1.3); opacity: 0.8; box-shadow: 0 0 1.56vw 0.52vw #4BFF73; } 100% { transform: scale(1.8); opacity: 0; box-shadow: 0 0 2.08vw 0.78vw #4BFF73; } }
@keyframes lostEffect { 0% { opacity: 1; box-shadow: 0 0 0.52vw #FF4B4B; } 50% { transform: scale(0.8) rotateZ(15deg); opacity: 0.9; box-shadow: 0 0 1.3vw 0.52vw #FF4B4B; } 100% { transform: scale(1.8) rotateZ(0); opacity: 0; box-shadow: 0 0 1.82vw 0.78vw #FF4B4B; } }
@keyframes coinFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.38vh); } }
@keyframes shake { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 25% { transform: translate(-50%, -50%) rotate(-5deg); } 75% { transform: translate(-50%, -50%) rotate(5deg); } }
@keyframes victoryPulse { 0%, 100% { box-shadow: 0 2.77vh 7.4vh rgba(46, 204, 113, 0.6), inset 0 0.09vh 0 rgba(255,255,255,0.6); } 50% { box-shadow: 0 3.24vh 8.33vh rgba(46, 204, 113, 0.8), inset 0 0.09vh 0 rgba(255,255,255,0.6); } }
@keyframes logSlide { 0% { opacity: 0; transform: translateX(-1.04vw); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes pulse-dot { 0% { transform: scale(1); box-shadow: 0 0 1.5vh rgba(231, 76, 60, 0.9); } 100% { transform: scale(1.2); box-shadow: 0 0 2.5vh rgba(231, 76, 60, 1); } }

/* ====================================================================== */
/* === YENİ TEMEL STİLLER (BODY, CONTAINER, BTN) === */
/* ====================================================================== */

html { 
    font-size: 1vw; 
}
body { 
    margin: 0; 
    font-family: 'Oswald', 'Teko', sans-serif; /* YENİ FONT: Daha askeri */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
    background-color: var(--bg-dark-main); /* YENİ ARKA PLAN: Düz koyu renk */
    background-image: radial-gradient(ellipse at center, 
        rgba(255,255,255,0.05) 0%, 
        rgba(255,255,255,0) 60%); /* Hafif bir ışık süzmesi */
    color: var(--text-light); /* YENİ TEMEL METİN RENGİ */
    user-select: none; 
    overflow-x: hidden; 
    position: relative; 
}
body.in-game { 
    justify-content: flex-start; 
    align-items: stretch; 
    height: 100vh; 
    overflow: hidden; 
} 

.btn {
    margin: 1vh 0.5vw;
    padding: 1.5vh 2vw;
    border: 1px solid var(--accent-primary-dark); /* Kenarlık */
    border-radius: 4px; /* Keskin köşe */
    background: var(--accent-primary); /* Düz vurgu rengi */
    color: var(--text-light);
    cursor: pointer;
    font-family: 'Teko', 'Oswald', sans-serif; /* Kalın, askeri font */
    font-weight: 700;
    font-size: 1.5em; /* Boyutu biraz küçülttük */
    transition: all 0.2s ease-in-out;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3); /* Alta hafif gölge */
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.btn:hover:not(:disabled) {
    background: var(--accent-primary-hover);
    color: #fff;
    box-shadow: var(--shadow-light), inset 0 -2px 0 rgba(0,0,0,0.2);
    transform: translateY(-2px); /* Hafif yükselme */
}

.btn:disabled {
    background: var(--border-color);
    border-color: var(--border-color);
    color: var(--text-medium);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    animation: none;
}

.btn:active:not(:disabled) {
    transform: translateY(1px); /* Basılma efekti */
    box-shadow: var(--inset-shadow);
}

.container {
    animation: fadeInScale 0.6s cubic-bezier(.175,.885,.32,1.275);
    position: relative;
    z-index: 2;
    text-align: center;
    
    /* YENİ GÖRÜNÜM */
    background: var(--bg-panel);
    padding: 2.5vh 3vw;
    border-radius: 4px; /* Köşeleri yuvarlatma, keskin yap */
    box-shadow: var(--inset-shadow), var(--shadow-dark);
    color: var(--text-light);
    width: 98%;
    max-width: 85vw; /* Bu kalsın, ama menülerde ezeceğiz */
    box-sizing: border-box;
    border: 1px solid var(--border-color); /* Metalik kenarlık */
}
/* Oynanış ekranı animasyonunu koru */
#game-container { animation: fadeInScale 0.6s cubic-bezier(.175,.885,.32,1.275); }

.option-group { margin-bottom: 2.5vh; text-align: left; animation: fadeIn 0.5s ease-out backwards; }
.option-group:nth-child(1) { animation-delay: 0.1s; } .option-group:nth-child(2) { animation-delay: 0.2s; } .option-group:nth-child(3) { animation-delay: 0.3s; }

h1, h2, h3 { font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }

/* Input/Select stilleri artık daha spesifik tanımlanacak */
hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--border-color), transparent); margin: 2vh 0; }

::-webkit-scrollbar { width: 10px; } 
::-webkit-scrollbar-track { background: var(--bg-dark-main); border-radius: 5px; } 
::-webkit-scrollbar-thumb { background: var(--accent-primary-dark); border-radius: 5px; } 
::-webkit-scrollbar-thumb:hover { background: var(--accent-primary); } 
::selection { background: var(--accent-primary); color: var(--text-dark); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

/* ====================================================================== */
/* === YENİ AUTH EKRANI === */
/* ====================================================================== */

#auth-container {
    max-width: 30vw; /* Biraz daha dar ve odaklı */
    background: var(--bg-panel); /* Zaten .container'dan alıyor */
}

#auth-container h1 {
    font-family: 'Teko', sans-serif;
    font-size: 5em; /* Daha büyük, daha etkileyici */
    color: var(--accent-primary);
    text-shadow: 0 0 10px var(--accent-primary);
    margin: 0;
    padding-bottom: 2vh;
}

/* Sekmeler (Giriş Yap / Kayıt Ol) */
.auth-tab { 
    background: none; border: none; padding: 15px; 
    font-family: 'Oswald', sans-serif;
    font-size: 1.3em;
    cursor: pointer;
    color: var(--text-medium);
    opacity: 0.7;
    border-bottom: 3px solid transparent; /* Alttaki çizgiyi kaldır */
}
.auth-tab.active-tab { 
    opacity: 1;
    color: var(--accent-primary);
    border-bottom: 3px solid var(--accent-primary); /* Aktif olanı vurgula */
    font-weight: 700; 
}

/* Form Elemanları (Input, Label) */
#auth-container label { 
    font-weight: 500; 
    font-size: 1.1em;
    color: var(--text-medium);
    margin-bottom: 5px; 
    display: block;
}

#auth-container input[type="text"],
#auth-container input[type="password"],
#auth-container input[type="email"] {
    background: var(--bg-dark-main); /* Gömülü input alanı */
    border: 1px solid var(--border-color);
    color: var(--text-light);
    border-radius: 4px;
    font-size: 1.2em;
    padding: 10px;
    box-shadow: var(--inset-shadow);
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

#auth-container input[type="text"]:focus,
#auth-container input[type="password"]:focus,
#auth-container input[type="email"]:focus {
    border-color: var(--accent-primary);
    box-shadow: var(--inset-shadow), 0 0 5px var(--accent-primary);
    outline: none;
}

#auth-container .option-group { margin-bottom: 15px; }
#auth-message.success { color: var(--success-color); }
#auth-message.error { color: var(--danger-color); }

/* Ana Giriş/Kayıt Butonu */
#auth-container .btn {
    font-size: 1.5em; /* Buton fontunu ayarla */
}

/* ====================================================================== */
/* === YENİ MODAL STİLLERİ (TÜM POP-UP'LAR) === */
/* ====================================================================== */
.modal-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); /* Daha koyu arkaplan */
    display: flex; justify-content: center; align-items: center; 
    z-index: 200; opacity: 0; pointer-events: none; 
    transition: opacity 0.4s ease; 
    backdrop-filter: blur(5px); 
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content { 
    background: var(--bg-panel);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    color: var(--text-light);
    box-shadow: var(--shadow-dark), 0 0 30px rgba(0,0,0,0.5);
    max-width: 50vw; /* Profili ve Liderliği daralt */
    padding: 4vh 3vw; 
    max-height: 90vh; overflow-y: auto; 
    width: 90%; 
    box-sizing: border-box; 
    transform: scale(0.8) rotateX(10deg); 
    transition: transform 0.5s cubic-bezier(.175,.885,.32,1.275); 
}
.modal-overlay.active .modal-content { transform: scale(1) rotateX(0deg); }

/* Modal Başlıkları */
.modal-content h2, .modal-content h3 {
    color: var(--accent-primary);
    border-bottom: 2px solid var(--border-color);
    font-family: 'Teko', sans-serif;
    letter-spacing: 1px;
}
.modal-content h2 { font-size: 2.8em; margin-top: 0; }
.modal-content h3 { font-size: 2em; }


/* How to Play Modal */
#how-to-play-content { text-align: left; }
#how-to-play-modal .modal-content {
    max-width: 70vw;
}
#how-to-play-content h2 { text-align: center; }
#how-to-play-content p, #how-to-play-content li { font-size: 1.3em; line-height: 1.8; color: var(--text-light); }
#how-to-play-content ul { padding-left: 2.08vw; } #how-to-play-content ul ul { margin-top: 0.92vh; }

/* Settings Modal */
#settings-modal .modal-content { 
    max-width: 70vw; 
}
#settings-content h2 { text-align: center; }
#settings-grid { display: flex; gap: 2vw; margin-bottom: 3vh; }
.settings-column { flex: 1; display: flex; flex-direction: column; gap: 2.5vh; }
.settings-group { 
    background: var(--bg-dark-main); 
    border-radius: 4px; 
    padding: 2.5vh 1.5vw; 
    border: 1px solid var(--border-color); 
    box-shadow: var(--inset-shadow); 
}
.settings-group h4 { 
    margin-top: 0; margin-bottom: 2vh; 
    font-size: 1.6em; font-weight: 700; 
    color: var(--accent-primary); 
    border-bottom: 2px solid var(--border-color); 
    padding-bottom: 1vh; 
}
.setting-item { display: flex; flex-direction: column; margin-bottom: 2vh; gap: 0.8vh; }
.setting-item:last-child { margin-bottom: 0; }
.setting-item label { font-weight: 600; font-size: 1.2em; color: var(--text-medium); padding-left: 0.5vw; }
#settings-content select { 
    font-size: 1.2em; 
    padding: 1.5vh 1vw; 
    background: var(--bg-dark-main);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    border-radius: 4px;
}
#settings-content #closeSettingsBtn { display: block; margin: 2vh auto 0; width: 50%; font-size: 1.5em; padding: 1.8vh 1vw; }

/* View Settings Modal */
#view-settings-modal .modal-content { max-width: 40vw; text-align: left; }
#view-settings-content h2 { text-align: center; font-size: 2.5em; margin-bottom: 3.7vh; }
#view-settings-content p { 
    font-size: 1.2em; margin: 1vh 0; padding: 1.5vh 1vw; 
    border-bottom: 1px solid var(--border-color); 
    border-radius: 4px; 
    background: var(--bg-dark-main); 
    transition: all 0.3s ease; 
}
#view-settings-content p:hover { 
    background: var(--border-color); 
    transform: translateX(0.52vw); 
    box-shadow: 0 0.27vh 0.92vh rgba(0,0,0,0.1); 
}
#view-settings-content p strong { color: var(--accent-primary); }

/* Game Over Modal */
#game-over-modal .modal-content { 
    text-align: center; 
    border: 2px solid var(--success-color); 
    box-shadow: 0 0 30px rgba(46, 204, 113, 0.6), var(--inset-shadow);
}
#winner-announcement { 
    font-size: 2.5em; 
    color: var(--text-light); 
    margin-bottom: 1.85vh; 
    text-transform: uppercase; 
    letter-spacing: 0.26vw; 
    font-family: 'Teko', sans-serif;
}
#winner-announcement .winner-name { 
    font-size: 2em; 
    background: linear-gradient(135deg, var(--success-color), #27ae60); 
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
    background-clip: text; 
    display: block; margin-top: 0.92vh; font-weight: 900; 
    letter-spacing: normal; text-transform: none; 
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.3); 
}

/* Attack Modal */
#attack-modal-overlay { z-index: 102; }
#attack-modal { max-width: 40vw; }
#modal-region-info { 
    font-size: 2.2em; font-weight: 700; margin-bottom: 2.31vh; text-align: center; 
    color: var(--accent-primary); 
    font-family: 'Teko', sans-serif;
}
#attack-type-info { 
    font-size: 1.8em !important; color: var(--danger-color); 
    font-weight: bold; margin-bottom: 1.38vh; min-height: 1.2em; 
    text-align: center; text-shadow: 0 0 5px var(--danger-color); 
}
#chance-formula-display { 
    font-size: 1.4em; text-align: center; margin-bottom: 1.38vh; 
    font-weight: 700; 
    color: var(--text-light); 
}
#chance-values-display { font-size: 1.1em; text-align: center; margin-bottom: 2.31vh; color: var(--text-medium); line-height: 1.6; }
#attack-amount-select {
    background: var(--bg-dark-main);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    border-radius: 4px;
    font-family: 'Oswald', sans-serif;
}

#attack-all-btn {
    /* Ana Buton Stilleri (.btn'den kopyalandı) */
    background: var(--accent-primary);
    border: 1px solid var(--accent-primary-dark);
    color: var(--text-light);
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3);
    
    /* İki Satır İçin Ayarlar (Önceki adımdan) */
    padding: 1.2vh 0.8vw;     
    line-height: 1.2;       
    font-size: 1.1em;       
    text-align: center;     
    white-space: normal;    
    display: flex;          
    flex-direction: column; 
    justify-content: center; 
    align-items: center;    
    min-height: 6vh;        
    
    /* Flex item olarak ayarla (Yan yana durması için) */
    flex: 1;                
    margin: 0; /* Marjini sıfırla */
}
/* Buton içindeki küçük yazı için stil */
#attack-all-btn small {
    font-size: 0.8em;       /* "(X Kare)" yazısını küçült */
    opacity: 0.8;           /* Biraz soluklaştır */
    display: block;         /* Kendi satırını kaplasın */
    margin-top: 0.3vh;      /* Üst satırla arasına hafif boşluk */
}


#attack-all-btn:hover:not(:disabled) {
    background: var(--accent-primary-hover);
    color: #fff;
    box-shadow: var(--shadow-light), inset 0 -2px 0 rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

#attack-cancel-btn {
    background: var(--danger-color);
    border-color: #a03020; /* Bu accent-primary-dark idi, düzeltildi */

    /* YENİ EKLENEN/DEĞİŞENLER */
    display: block;         /* Butonu blok element yap */
    margin: 1.5vh auto 0;   /* Üstten boşluk, sağdan/soldan otomatik ortala */
    width: 50%;             /* Genişliğini ayarla (isteğe bağlı) */
    font-size: 1.2em;       /* Diğer butonlarla aynı boyutta olsun */
    padding: 1.5vh 1vw;     /* Diğer butonlarla aynı padding */
}

/* Hover efektini de güncelleyelim */
#attack-cancel-btn:hover:not(:disabled) {
    background: #e74c3c;
    box-shadow: 0 0 10px #e74c3c;
    /* Transform eklemeye gerek yok, .btn sınıfında zaten var */
}


/* ====================================================================== */
/* === YENİ LOBİ MENÜSÜ === */
/* ====================================================================== */

#lobby-menu .container {
    max-width: 60vw; /* Biraz daha daralt, daha odaklı */
    background: var(--bg-panel);
    border: 1px solid var(--accent-primary-dark); /* Temayı vurgula */
    box-shadow: var(--inset-shadow), var(--shadow-dark), 0 0 30px rgba(255,102,0,0.2); /* Hafif turuncu aura */
}

#lobby-menu h2 {
    font-family: 'Teko', sans-serif;
    font-size: 3.5em;
    color: var(--accent-primary); /* Başlığı turuncu yap */
    text-shadow: 0 0 10px var(--accent-primary);
    margin-top: 0;
    margin-bottom: 3vh;
    text-transform: uppercase;
}

/* YENİ 2 SÜTUNLU YAPI */
#lobby-menu-content {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Sol sütun daha geniş (2 parça), sağ sütun dar (1 parça) */
    gap: 2vw;
    text-align: left;
}

/* Sol Sütun: Ana Eylemler */
#primary-actions {
    display: flex;
    flex-direction: column;
    gap: 2.5vh;
}

/* Her iki sütundaki gruplar için ortak stil */
.action-group {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2vh 1.5vw;
    box-shadow: var(--inset-shadow);
}

.action-group h3 {
    font-size: 1.8em;
    color: var(--text-light); /* Turuncu değil, daha sakin */
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 1vh;
    margin: 0 0 2vh 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Sağ Sütun: Sistem Butonları */
#secondary-actions {
    /* Ortak .action-group stilini zaten alıyor */
}

#system-buttons {
    display: flex;
    flex-direction: column;
    gap: 1vh; /* Butonlar arası boşluk */
}

/* --- KULLANICININ İSTEDİĞİ STİLİSTİK BUTONLAR (.btn-system) --- */
.btn-system {
    /* .btn stilini KULLANMIYORUZ */
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-medium);
    padding: 1.5vh 1vw;
    font-family: 'Oswald', sans-serif;
    font-size: 1.1em; /* Küçültüldü */
    text-align: left;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex; /* İkonlar için */
    align-items: center;
    gap: 1vw;
}

.btn-system .icon {
    font-size: 1.2em;
    color: var(--accent-primary);
    opacity: 0.7;
    transition: all 0.2s ease-in-out;
    width: 20px; /* Hizalama için */
    text-align: center;
}

.btn-system:hover {
    background: var(--border-color);
    color: var(--text-light);
    border-color: var(--accent-primary);
    transform: translateX(5px); /* Hafif kayma efekti */
}

.btn-system:hover .icon {
    opacity: 1;
    transform: scale(1.1);
}
#logoutBtn {
    color: var(--danger-color);
    border-color: var(--danger-color);
}
#logoutBtn .icon {
    color: var(--danger-color);
}
#logoutBtn:hover {
    background: var(--danger-color);
    color: var(--text-light);
    border-color: var(--danger-color);
}
#logoutBtn:hover .icon {
    color: var(--text-light);
}

/* --- ESKİ BUTONLARI KÜÇÜLTME VE YENİDEN RENKLENDİRME --- */

/* Inputlar ve Selectler */
#lobby-menu-content input[type="text"],
#lobby-menu-content select {
    font-size: 1.2em;
    background: var(--bg-dark-main);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    border-radius: 4px;
    padding: 10px;
    font-family: 'Oswald', sans-serif;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1vh; /* Altlarına boşluk */
    transition: all 0.2s ease;
}

#lobby-menu-content input[type="text"]:focus,
#lobby-menu-content select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 5px var(--accent-primary);
    outline: none;
}

#lobby-menu-content select {
     margin-bottom: 0; /* Select'in altına gerek yok */
}

/* Select'in üstündeki label (index.html'e eklendi) */
.option-group label {
    font-size: 1em;
    color: var(--text-medium);
    margin-bottom: 0.5vh;
    display: block;
    text-transform: uppercase;
}

/* Ana Eylem Butonları (Join, Create, View) */
#primary-actions .btn {
    width: 100%;
    margin: 0; /* Marjini sıfırla */
    font-size: 1.3em; /* Küçültüldü */
    padding: 1.5vh 1.5vw; /* Küçültüldü */
}

/* RENK HİYERARŞİSİ */

/* 1. Lobi Oluştur (Ana Eylem) - Parlak Kalsın */
#createBtn {
    background: var(--accent-primary);
    border-color: var(--accent-primary-dark);
}
#createBtn:hover:not(:disabled) {
    background: var(--accent-primary-hover);
    box-shadow: var(--shadow-light);
}

/* 2. Diğer Eylemler (Daha Az Önemli) - Temayı Bozmasın */
#joinBtn, #viewPublicLobbiesBtn {
    background: var(--bg-panel); /* Arka planla aynı */
    border: 1px solid var(--border-color);
    color: var(--text-medium);
    margin-top: 1vh; /* Birbirlerinden ayır */
}

#joinBtn:hover:not(:disabled), 
#viewPublicLobbiesBtn:hover:not(:disabled) {
    background: var(--border-color);
    color: var(--text-light);
    border-color: var(--border-color); /* Vurgu yok */
    box-shadow: none; /* Parlama yok */
}

/* "Açık Lobiler"i biraz ayırt edelim (Yeşil renk isteğine karşılık) */
#viewPublicLobbiesBtn {
     border-color: var(--success-color); /* Sadece kenarı yeşil */
     color: var(--success-color);
}
#viewPublicLobbiesBtn:hover:not(:disabled) {
     background: var(--success-color);
     color: var(--text-light);
     border-color: var(--success-color);
     box-shadow: 0 0 10px rgba(39, 174, 96, 0.5);
}

/* ESKİ HTML'DEN KALAN ÇÖP STİLLERİ TEMİZLE */
#lobby-menu-content > hr, #lobby-menu-content > h3 {
    display: none;
}
#lobby-menu-actions {
    display: none;
}
#create-lobby-panel {
     grid-area: unset;
     background: transparent;
     padding: 0;
     border: none;
     margin: 0;
}
#join-group {
    grid-area: unset;
}
/* ====================================================================== */
/* === YENİ LOBİ EKRANI === */
/* ====================================================================== */

#lobby { 
    max-width: 60vw; /* Lobi ekranını biraz daha kompakt yapalım */
    padding: 2.5vh 2vw;
}
#lobby h3 { 
    color: var(--accent-primary);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 1.85vh; 
    margin-top: 0; margin-bottom: 2.77vh; 
    font-size: 1.8em; 
    font-family: 'Teko', sans-serif;
}
#lobby-layout { display: flex; flex-direction: row; gap: 2.08vw; align-items: stretch; }

.lobby-column { 
    background: var(--bg-dark-main); /* Panelin içini daha da koyu yap */
    border-radius: 4px;
    padding: 2vh 1.5vw;
    box-shadow: var(--inset-shadow);
    border: 1px solid var(--border-color); 
    display: flex; flex-direction: column; flex: 1; 
}

#playerList { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.5vh; }
#playerList li { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 1.5vh 1vw; 
    font-size: 1.4em; /* Yazı boyutu */
    border-radius: 4px; /* Keskin köşe */
    background: var(--bg-panel); /* Arka plan */
    border: 1px solid var(--border-color); /* Kenarlık */
    box-shadow: var(--shadow-dark);
    transition: all 0.2s ease-in-out; 
    position: relative; overflow: hidden; 
}
#playerList li:hover { 
    transform: translateY(-2px) scale(1.02); 
    border-color: var(--accent-primary); 
    box-shadow: var(--shadow-light);
}

.player-name-color { 
    display: inline-block; width: 1.5vw; height: 1.5vw; 
    border-radius: 50%; margin-right: 1.3vw; 
    border: 2px solid rgba(255,255,255,0.5); 
    box-shadow: var(--inset-shadow); 
    transition: all 0.3s ease; flex-shrink: 0;
    width: 1vw !important;
    height: 1vw !important;
    margin-right: 0.5vw !important; 
}
.player-name-color:hover { 
    transform: scale(1.2) rotate(0); /* Dönme efektini kaldır */
    border-color: var(--accent-primary);
}

.kick-btn { 
    padding: 0.5vh 0.8vw; font-size: 0.8em; 
    background: var(--danger-color); 
    border-color: #a03020;
    color: white; border-radius: 4px; 
    font-weight: bold; cursor: pointer; 
    transition: all 0.3s ease; 
    margin-left: 0.78vw; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}
.kick-btn:hover:not(:disabled) { 
    background: #e74c3c; 
    transform: translateY(-2px) scale(1.1); 
    box-shadow: 0 0 10px #e74c3c;
}

.lobby-host-tag, .lobby-you-tag { 
    font-size: 0.8em; /* Daha küçük, daha zarif */
    padding: 0.5vh 0.8vw; 
    border-radius: 4px; 
    margin-left: 0.78vw; 
    font-weight: 700; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    transition: all 0.3s ease; 
}
.lobby-host-tag { background: var(--warning-color); color: var(--text-dark); } 
.lobby-you-tag { background: var(--success-color); color: white; } 
.lobby-host-tag:hover, .lobby-you-tag:hover { transform: scale(1.1); box-shadow: 0 0 5px rgba(255,255,255,0.5); }

#lobby-code-display-container { text-align: center; font-size: 1.7em; color: var(--text-light); margin-top: 1.38vh; margin-bottom: 1.85vh; }
#lobbyIdDisplay { 
    display: inline-block; 
    background: var(--bg-dark-main);
    border: 1px dashed var(--accent-primary); /* "Gizli evrak" hissi */
    color: var(--accent-primary);
    font-size: 1.5em;
    font-family: 'Teko', sans-serif;
    letter-spacing: 2px;
    box-shadow: var(--inset-shadow);
    user-select: text; padding: 1.38vh 2.08vw; 
    border-radius: 4px; margin-top: 0.92vh; 
    font-weight: 900; 
    transition: all 0.3s ease; 
}
#lobbyIdDisplay:hover { transform: scale(1.05); box-shadow: var(--inset-shadow), 0 0 10px var(--accent-primary); }

#lobby-actions-wrapper { display: flex; flex-direction: column; gap: 1.5vh; margin-top: auto; padding-top: 2.77vh; }
#lobby-actions-wrapper .btn { margin: 0; width: 100%; box-sizing: border-box; font-size: 1.2em; padding: 1.5vh 1.04vw; }
.ai-button-group { display: flex; gap: 1.04vw; width: 100%; }
.ai-button-group .btn { flex: 1; font-size: 1.1em; padding: 1.38vh 1.04vw; }

#publicLobbyToggle { display: none; }
#public-lobby-setting-label { 
    display: block; width: 100%; box-sizing: border-box; 
    padding: 1.5vh 1.04vw; font-size: 1.2em; 
    font-weight: 700; color: white; 
    border-radius: 4px; cursor: pointer; 
    transition: background-color 0.3s ease, box-shadow 0.3s ease; 
    text-align: center; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    border: 1px solid;
    font-family: 'Oswald', sans-serif;
}
#publicLobbyToggle:not(:checked) + #public-lobby-setting-label { 
    background: var(--danger-color); 
    border-color: #a03020;
}
#publicLobbyToggle:checked + #public-lobby-setting-label { 
    background: var(--success-color); 
    border-color: #208e50;
}
#publicLobbyToggle:disabled + #public-lobby-setting-label { background: var(--border-color); cursor: not-allowed; }
#public-lobby-setting-label::before { content: 'Lobiyi Herkese Aç'; }
#publicLobbyToggle:checked + #public-lobby-setting-label::before { content: 'Lobi Herkese Açık ✔'; }

/* Buton Renklerini Çeşitlendir */
#startGameBtn {
    background: var(--success-color);
    border-color: #208e50;
    font-size: 1.4em !important;
}
#startGameBtn:hover:not(:disabled) {
    background: #2ccf70;
    box-shadow: 0 0 10px #2ccf70;
}
.ai-button-group #addAiBtn {
    background: var(--success-color);
    border-color: #208e50;
}
.ai-button-group #removeAiBtn {
    background: var(--warning-color);
    border-color: #c89c0a;
    color: var(--text-dark);
}
#editLobbySettingsBtn, #viewLobbySettingsBtn {
    background: var(--bg-panel);
    border-color: var(--border-color);
    color: var(--text-medium);
}
#editLobbySettingsBtn:hover:not(:disabled), #viewLobbySettingsBtn:hover:not(:disabled) {
    background: var(--border-color);
    color: var(--text-light);
    box-shadow: none;
}
#leaveLobbyBtn {
    background: var(--danger-color);
    border-color: #a03020;
}
#leaveLobbyBtn:hover:not(:disabled) {
    background: #e74c3c;
    box-shadow: 0 0 10px #e74c3c;
}

/* ====================================================================== */
/* === YENİ PUBLIC LOBİ LİSTESİ === */
/* ====================================================================== */

#public-lobbies-menu {
    max-width: 60vw;
}

#public-lobby-list { display: flex; flex-direction: column; gap: 1.38vh; padding: 0.65vw; }
.public-lobby-item { 
    display: flex; justify-content: space-between; align-items: center; 
    background: var(--bg-dark-main); 
    padding: 2vh 1.5vw; border-radius: 4px; 
    box-shadow: var(--shadow-dark); 
    border: 1px solid var(--border-color); 
    transition: all 0.3s ease; 
}
.public-lobby-item:hover { 
    transform: translateY(-2px) scale(1.02); 
    box-shadow: var(--shadow-dark), 0 0 10px var(--accent-primary); 
    border-color: var(--accent-primary); 
}
.lobby-info { 
    display: flex; flex-direction: column; gap: 0.46vh; 
    font-size: 1.2em; font-weight: 500; text-align: left; 
    color: var(--text-medium);
}
.lobby-info .host-name { font-weight: 700; color: var(--accent-primary); }
.public-lobby-item .btn { 
    font-size: 1.2em; padding: 1.38vh 1.56vw; 
    margin: 0; flex-shrink: 0; 
    background: var(--success-color);
    border-color: #208e50;
}
#backToLobbyMenuBtn {
    background: var(--bg-panel);
    border-color: var(--border-color);
    color: var(--text-medium);
}
#refreshLobbiesBtn {
    background: var(--accent-primary);
    border-color: var(--accent-primary-dark);
}

/* ====================================================================== */
/* === YENİ PROFİL & LİDERLİK TABLOSU === */
/* ====================================================================== */
#profile-modal .modal-content, 
#player-info-modal .modal-content {
    max-width: 65vw; /* Biraz daha daraltılabilir */
    text-align: left;
    background: var(--bg-dark-main); /* Ana temaya daha yakın */
    border: 1px solid var(--border-color);
}
/* YENİ SINIFLAR */
.profile-horizontal-layout {
    display: flex;
    flex-direction: row;
    gap: 1.5vw; /* İki sütun arası boşluk */
    align-items: flex-start;
}
.profile-column {
    flex: 1; /* Sütunlar eşit genişlikte olsun */
    display: flex;
    flex-direction: column;
    gap: 2.5vh; /* Sütun içindeki bölümler arası boşluk */
}

/* Profil butonlarını yeniden düzenle */
#profile-modal .profile-section .btn {
    font-size: 1.1em !important;
    padding: 1.5vh 1.5vw !important;
    margin: 0 !important;
}
#profile-modal #closeProfileBtn {
    width: 50%;
    margin: 3vh auto 0 !important;
}
.profile-username {
    text-align: center;
    font-family: 'Teko', sans-serif;
    font-size: 3em;
    color: var(--accent-primary);
    margin-top: 0;
    margin-bottom: 2vh;
    text-shadow: 0 0 10px var(--accent-primary);
}

.profile-section {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2vh 1.5vw;
    margin-bottom: 2.5vh;
    box-shadow: var(--inset-shadow);
}

.profile-section h3 {
    font-size: 1.6em;
    color: var(--text-light);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 1vh;
    margin: 0 0 1.5vh 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* İstatistikleri grid ile düzenle */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Esnek sütunlar */
    gap: 1.5vh 1vw; /* Satır ve sütun boşlukları */
}

.stat-item {
    background: var(--bg-dark-main);
    padding: 1vh 1vw;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column; /* Label üste, value alta */
}

/* Tam genişlik kaplayan item (XP bar gibi) */
.stat-item-full {
    grid-column: 1 / -1; /* Tüm sütunları kapla */
}

.stat-label {
    font-size: 0.9em;
    color: var(--text-medium);
    margin-bottom: 0.5vh;
    text-transform: uppercase;
}

.stat-value {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--text-light);
}

/* Renkli Değerler */
.stat-value.success { color: var(--success-color); }
.stat-value.danger { color: var(--danger-color); }

/* Hesap Bölümü Stilleri */
#profile-modal .option-group label {
    font-size: 1em; /* Biraz küçült */
}
#profile-modal input[type="text"] {
    background: var(--bg-dark-main);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    border-radius: 4px;
    font-size: 1.1em;
    padding: 10px;
    box-shadow: var(--inset-shadow);
    width: 100%; /* input esnek olsun */
    box-sizing: border-box;
}
#profile-modal #changeUsernameBtn {
    flex-shrink: 0; /* Buton küçülmesin */
}


.xp-bar-container { 
    width: 100%; height: 25px; 
    background-color: var(--bg-dark-main); 
    border-radius: 15px; overflow: hidden; margin: 1vh 0; 
    border: 1px solid var(--border-color);
}
.xp-bar { 
    height: 100%; 
    background: var(--accent-primary); 
    border-radius: 15px; 
    transition: width 0.5s ease-in-out; 
}

.leaderboard-table { width: 100%; border-collapse: collapse; margin-top: 2vh; font-size: 1.2em; }
.leaderboard-table th, .leaderboard-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-color); }
.leaderboard-table th { 
    background-color: var(--bg-dark-main); 
    font-weight: 600; 
    color: var(--accent-primary);
}
.leaderboard-table tbody tr:nth-child(odd) { background-color: rgba(0,0,0,0.1); }
.leaderboard-table tbody tr:hover { 
    background-color: var(--border-color); 
    color: var(--text-light);
}

.player-popover { 
    position: absolute; 
    background: var(--bg-panel); 
    border: 1px solid var(--border-color); 
    border-radius: 4px; 
    box-shadow: var(--shadow-dark); 
    z-index: 100; padding: 10px; display: flex; 
    flex-direction: column; gap: 8px; 
    opacity: 0; transform: scale(0.95) translateY(-10px); 
    transition: opacity 0.2s ease, transform 0.2s ease; 
    pointer-events: none; 
}
.player-popover.visible { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.player-popover button { 
    background: var(--accent-primary); 
    color: white; border: none; 
    padding: 8px 12px; border-radius: 4px; 
    cursor: pointer; font-size: 1em; 
    font-family: 'Oswald', sans-serif; 
    transition: background-color 0.2s ease; 
}
.player-popover button:hover { background: var(--accent-primary-hover); }
.player-popover button.kick-btn-popover { background: var(--danger-color); }
.player-popover button.kick-btn-popover:hover { background: #e74c3c; }


/* ====================================================================== */
/* ====================================================================== */
/* === OYNANIŞ EKRANI STİLLERİ (YENİ TEMA: SAVAŞ ODASI) === */
/* ====================================================================== */
/* ====================================================================== */

#game-container { 
    display: none; 
    flex-direction: column; 
    align-items: center; 
    background: var(--bg-dark-main); /* Ana arka planla aynı */
    padding: 1vh 1vw; /* Kenarlara boşluk */
    border-radius: 4px; /* Keskin kenar */
    box-shadow: var(--shadow-dark); 
    color: var(--text-light); /* Açık renk yazı */
    width: 100%; 
    height: 100%; 
    box-sizing: border-box; 
    border: 1px solid var(--border-color); /* Kenarlık */
    gap: 0; /* Arayüz elemanları arası boşluk */
    animation: fadeInScale 0.6s cubic-bezier(.175,.885,.32,1.275);
}
#game-layout { 
    display: flex; 
    flex-direction: row; 
    gap: 1.3vw; 
    width: 100%; 
    justify-content: center; 
    flex: 1; 
    min-height: 0; 
}
#left-panel { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    flex-grow: 1; 
    position: relative; 
    width: 100%; 
    height: 100%; 
}
#right-panel { display: none; } /* Orijinalde de kapalıydı, kalsın */

/* "TOPRAK/HARİTA" TEMALI KANVAS */
canvas { 
    border: 2px solid var(--border-color); /* Mavi kenarlığı değiştir */
    background: linear-gradient(135deg, #fffef8 0%, #fff5e6 100%); /* Bu "parşömen" rengi kalmalı, temaya uyuyor */
    box-shadow: var(--inset-shadow), var(--shadow-dark); /* Konsola gömülmüş efekti */
    user-select: none; 
    cursor: pointer !important; 
    touch-action: manipulation; 
    width: 100%; 
    max-width: 98.95vw; 
    display: block; 
    flex: 1; 
    min-height: 0; 
    border-radius: 4px; /* Keskin kenar */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
canvas:hover { 
    transform: scale(1.005); /* Hafif zoom */
    box-shadow: var(--inset-shadow), var(--shadow-light); /* Vurgu */
    border-color: var(--accent-primary-dark);
}

/* SKOR TABLOSU PANELİ */
#scoreboard { 
    display: flex; 
    flex-direction: row;
    margin-bottom: 0 !important; 
    gap: 0.5vw; 
    width: 100%; 
    padding: 0.5vh 0.5vw !important; 
    border-radius: 4px; /* Keskin kenar */
    font-weight: 500; 
    box-sizing: border-box; 
    justify-content: center; 
    background: var(--bg-panel); /* Koyu panel rengi */
    border: 1px solid var(--border-color); 
    box-shadow: var(--inset-shadow); 
}

/* OYUNCU SKOR KUTUSU */
.player-score { 
    padding: 0.2vh 0.3vw !important; 
    border-radius: 4px; /* Keskin kenar */
    transition: all .4s cubic-bezier(.175,.885,.32,1.275); 
    border: 1px solid var(--border-color); /* Sadece kenarlık */
    font-size: 0.9em !important; 
    font-family: 'Oswald', sans-serif; /* Askeri font */
    color: var(--text-light); /* Açık renk yazı */
    display: flex; 
    align-items: center; 
    background: var(--bg-dark-main); /* Panelden bir tık koyu */
    box-shadow: none; 
    position: relative; 
    overflow: hidden; 
    flex-grow: 1; 
    justify-content: center; 
    min-width: auto !important;
    height: auto !important; 
}
.player-score::before { content: none; } /* Parıltı efektini kaldır */
.player-score:hover::before { content: none; } /* Parıltı efektini kaldır */

.active-player { 
    background: var(--bg-panel) !important; 
    color: var(--text-light) !important; 
    transform: scale(1.05); 
    
    /* YENİ: script.js'ten gelen dinamik rengi kullanır */
    /* (Eğer renk gelmezse varsayılan olarak turuncu parlar) */
    --player-glow-color: var(--active-player-color, var(--accent-primary));
    
    border: 1px solid var(--player-glow-color); 
    animation: playerPulse 1.5s infinite alternate;
    box-shadow: 0 0 10px 0px var(--player-glow-color);
}


.eliminated-player { 
    color: var(--text-medium); 
    text-decoration: line-through; 
    background: var(--bg-dark-main) !important; 
    border-color: var(--border-color) !important; 
    animation: none !important; 
    opacity: 0.6; 
    filter: grayscale(1); 
}

/* KONTROL PANELİ */
#control-panel { 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    gap: 0.52vw; 
    align-items: center; 
    margin-top: 1.38vh; 
    width: 100%; 
}

/* KONTROL PANELİ BUTON VE AÇILIR MENÜLERİ */
#control-panel .btn, #control-panel details summary { 
    flex: 1; 
    margin: 0; 
    padding: 1.11vh 1.04vw; 
    font-size: 1.2em; /* Yazı büyüdü */
    text-align: center; 
    border-radius: 4px; /* Keskin kenar */
    border: 1px solid var(--accent-primary-dark); /* Kenarlık */
    cursor: pointer; 
    font-weight: 700; 
    font-family: 'Teko', 'Oswald', sans-serif; /* Askeri font */
    text-transform: uppercase; /* BÜYÜK HARF */
    transition: all .3s cubic-bezier(.175,.885,.32,1.275); 
}
#control-panel details { flex: 1; position: relative; }
#control-panel summary { 
    list-style: none; 
    background: var(--accent-primary); /* Turuncu buton */
    color: var(--text-light); 
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3); /* .btn stili */
}
#control-panel summary:hover { 
    transform: translateY(-2px); 
    background: var(--accent-primary-hover);
    box-shadow: var(--shadow-light), inset 0 -2px 0 rgba(0,0,0,0.2); /* .btn:hover stili */
}

/* Butonlara özel renkler (HTML'deki inline style'ları ezer) */
#passBtn {
    background: var(--warning-color) !important;
    border-color: #c89c0a !important;
    color: var(--text-dark) !important;
}
#passBtn:hover {
    background: #ffc107 !important;
    box-shadow: 0 0 10px #ffc107;
}
#menuBtn {
    background: var(--bg-panel) !important;
    border-color: var(--border-color) !important;
    color: var(--text-medium) !important;
}
#menuBtn:hover {
    background: var(--border-color) !important;
    color: var(--text-light) !important;
    box-shadow: none !important;
}


/* Chat & Log Pencereleri */
#chat-container, #log-popup-container { 
    display: flex; 
    position: absolute; 
    bottom: 100%; 
    left: 0; 
    right: 0; 
    margin-bottom: 0.92vh; 
    width: auto; 
    z-index: 10; 
    flex-direction: column; 
    border-radius: 4px; /* Keskin kenar */
    padding: 1.38vh 0.78vw; 
    box-shadow: var(--shadow-dark); 
    height: 32.4vh; 
    box-sizing: border-box; 
    background: var(--bg-panel); /* Koyu panel */
    border: 1px solid var(--border-color); /* Kenarlık */
}
#chat-messages { 
    flex-grow: 1; 
    overflow-y: auto; 
    margin-bottom: 0.92vh; 
    padding-right: 0.52vw; 
    color: var(--text-light); /* Yazı rengi */
}
#chat-messages .chat-msg { 
    margin-bottom: 0.74vh; 
    word-break: break-word; 
    line-height: 1.4; 
    animation: fadeIn 0.3s ease; 
    padding: 0.74vh 0.62vw; 
    border-radius: 4px; /* Keskin kenar */
    background: var(--bg-dark-main); /* Koyu arka plan */
    box-shadow: none; 
}
#chat-messages .chat-msg strong { font-weight: 700; }

#chat-input-container { display: flex; gap: 0.52vw; }
#chat-input { 
    flex-grow: 1; 
    border: 1px solid var(--border-color); 
    padding: 1.11vh 0.93vw; 
    border-radius: 4px; /* Keskin kenar */
    background: var(--bg-dark-main); /* Koyu input */
    transition: all 0.3s ease; 
    font-size: 1em; 
    color: var(--text-light); /* Yazı rengi */
    font-family: 'Oswald', sans-serif;
}
#chat-input:focus { 
    border-color: var(--accent-primary); 
    outline: none; 
    background: var(--bg-dark-main); 
    box-shadow: 0 0 5px var(--accent-primary); 
    transform: none; 
}
#send-chat-btn { 
    background: var(--accent-primary); 
    color: white; 
    border: 1px solid var(--accent-primary-dark);
    padding: 1.11vh 1.25vw; 
    border-radius: 4px; /* Keskin kenar */
    cursor: pointer; 
    font-weight: 600; 
    font-family: 'Oswald', sans-serif;
    transition: all 0.3s cubic-bezier(.175,.885,.32,1.275); 
}
#send-chat-btn:hover { 
    background: var(--accent-primary-hover); 
    transform: translateY(-2px) scale(1.05); 
    box-shadow: var(--shadow-light); 
}

/* Bildirim noktası (Aynen kalır, renkleri temayla uyumlu) */
.notification-dot { 
    display: inline-block; 
    width: 2vh; height: 2vh; 
    background-color: var(--danger-color); 
    border-radius: 50%; 
    margin-left: 0.8vw; 
    box-shadow: 0 0 1.5vh rgba(231, 76, 60, 0.9); 
    transform: scale(0); 
    transition: transform 0.3s cubic-bezier(.175,.885,.32,1.275); 
    vertical-align: middle; 
    position: absolute; 
    top: -0.5vh; right: -0.5vh; 
    z-index: 100; 
    border: 0.2vh solid white; 
}
.notification-dot.visible { transform: scale(1); animation: pulse-dot 1.5s infinite alternate; }

/* Log Kutuları */
#log-container, #log-container-popup { 
    width: 100%; 
    height: 100%; 
    background: var(--bg-panel); /* Koyu panel */
    color: var(--text-light); /* Yazı rengi */
    padding: 1.38vh 0.78vw; 
    border-radius: 4px; /* Keskin kenar */
    box-shadow: var(--inset-shadow); 
    overflow-y: auto; 
    font-size: .85em; 
    display: flex; 
    flex-direction: column-reverse; 
    border: 1px solid var(--border-color); 
}
#log-content, #log-content-popup { 
    display: flex; 
    flex-direction: column; 
    gap: 0.46vh; 
}
.log-entry { 
    padding: 0.74vh 0.62vw; 
    border-radius: 4px; /* Keskin kenar */
    word-break: break-word; 
    opacity: 0; 
    animation: logSlide 0.5s ease forwards; 
    color: #fff; /* Renkli arkaplan üstü beyaz yazı */
    font-weight: 600; 
    box-shadow: none; /* Gölgeyi kaldır */
    position: relative; 
    overflow: hidden; 
}
.log-entry::before { content: none; } /* Parıltıyı kaldır */

/* Renkler (Aynen kalır, temaya uyumlu) */
.log-win { background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); } 
.log-loss { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); } 
.log-neutral { background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%); color: var(--text-dark); }


/* ====================================================================== */
/* === OYUN EFEKTLERİ STİLLERİ (DOKUNULMADI) === */
/* =İçerik aynı, sadece kopyalıyoruz= */
/* ====================================================================== */

.cell-effect { position: fixed; border-radius: 50%; pointer-events: none; z-index: 150; opacity: 0.9; transform: scale(0.1); }
.cell-effect.captured { background: radial-gradient(circle, #4BFF73, #2ecc71); box-shadow: 0 0 1.04vw #4BFF73; animation: captureEffect 1.2s ease-out forwards; }
.cell-effect.lost { background: radial-gradient(circle, #FF4B4B, #e74c3c); box-shadow: 0 0 1.04vw #FF4B4B; animation: lostEffect 1.2s cubic-bezier(.68,-.55,.265,1.55) forwards; }
.cell-effect::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 50%; transform: translate(-50%, -50%); animation: ripple 1.2s ease-out; }
.cell-effect.captured::after { border: 0.15vw solid #4BFF73; } .cell-effect.lost::after { border: 0.15vw solid #FF4B4B; }
#coin-flip { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18.22vw; height: 32.4vh; perspective: 78.12vw; opacity: 0; transition: opacity 0.4s ease; z-index: 100; pointer-events: none; filter: drop-shadow(0 1.85vh 3.7vh rgba(0,0,0,0.5)); }
.coin { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; }
.side { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; font-size: 3em; font-weight: 900; border-radius: 50%; border: 0.41vw solid rgba(255,255,255,0.9); color: #fff; text-shadow: 0 0.46vh 1.38vh rgba(0,0,0,0.5); box-shadow: inset 0 0.46vh 1.85vh rgba(0,0,0,0.3), 0 0.92vh 3.7vh rgba(0,0,0,0.5); }
.heads { background: linear-gradient(135deg, #38a169 0%, #2f855a 100%); box-shadow: inset 0 0.46vh 1.85vh rgba(0,0,0,0.3), 0 0.92vh 3.7vh rgba(56, 161, 105, 0.6); }
.tails { background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%); transform: rotateY(180deg); box-shadow: inset 0 0.46vh 1.85vh rgba(0,0,0,0.3), 0 0.92vh 3.7vh rgba(246, 173, 85, 0.6); }
#elimination-notice { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, rgba(231, 76, 60, 0.95), rgba(192, 57, 43, 0.95)); backdrop-filter: blur(0.52vw); color: white; padding: 3.7vh 4.16vw; border-radius: 1.56vw; font-size: 4.5em; font-weight: 900; z-index: 999; display: none; text-shadow: 0 0.46vh 1.38vh rgba(0,0,0,0.7); opacity: 0; transition: opacity 0.4s ease; box-shadow: 0 1.85vh 5.55vh rgba(231, 76, 60, 0.6); border: 0.26vw solid rgba(255,255,255,0.3); animation: shake 0.5s ease-in-out; }
#turn-timer-container { position: absolute; top: 1.85vh; right: 1.04vw; width: 6.25vw; height: 11.11vh; display: flex; align-items: center; justify-content: center; animation: float 3s ease-in-out infinite; z-index: 50; }

#timer-text { 
    font-size: 3em; 
    font-weight: 900; 
    color: var(--accent-primary); /* YENİ RENK */
    z-index: 2; 
    text-shadow: 0 0 10px var(--accent-primary); /* YENİ GÖLGE */
    animation: pulse 1s ease-in-out infinite; /* YENİ ANİMASYON (Adım 1'de değişti) */
}
#timer-progress { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    background: conic-gradient(var(--success-color) 360deg, var(--bg-panel) 0deg); /* YENİ BOŞLUK RENGİ */
    transition: background 0.5s linear; 
    transform: rotate(-90deg); 
    box-shadow: 0 0.46vh 1.85vh rgba(0,0,0,0.2), inset 0 0.18vh 0.92vh rgba(0,0,0,0.1); 
}
#abilities-container {
    display: flex;
    flex-direction: column;
    gap: 0.8vh;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 0.92vh;
    padding: 1.38vh 0.78vw;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: var(--shadow-dark);
    z-index: 10;
}

.ability-btn {
    display: flex !important;
    align-items: center !important;
    gap: 0.8vw !important;
    padding: 1.2vh 1vw !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: 1.1em !important;
    background: var(--bg-dark-main) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-light) !important;
    transition: all 0.3s ease !important;
}

.ability-btn:hover:not(:disabled) {
    background: var(--border-color) !important;
    transform: translateX(5px) !important;
    border-color: var(--accent-primary) !important;
}

.ability-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.ability-icon {
    font-size: 1.3em;
    width: 24px;
    text-align: center;
}

.ability-name {
    flex-grow: 1;
    font-weight: 600;
}

.ability-count {
    font-weight: 700;
    color: var(--accent-primary);
}

/* Sabotaj butonuna özel stil */
#abilitySabotageBtn .ability-icon {
    color: var(--danger-color);
}

/* Hava Yardımı butonuna özel stil */
#abilityAirStrikeBtn .ability-icon {
    color: var(--warning-color);
}
/* SABOTAJ MENÜSÜ */
#sabotage-menu summary {
    list-style: none;
    background: var(--warning-color) !important;
    color: var(--text-dark) !important;
    padding: 10px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-weight: bold !important;
}

#sabotage-menu summary:hover {
    background: #ffc107 !important;
}

#sabotage-menu[disabled] summary {
    background: var(--border-color) !important;
    color: var(--text-medium) !important;
    cursor: not-allowed !important;
}

#sabotage-targets button {
    transition: all 0.2s ease;
}

#sabotage-targets button:hover:not(:disabled) {
    transform: translateX(5px);
    background: var(--border-color) !important;
}
.btn-close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: 0;
    color: var(--text-medium);
    font-size: 2.2em; /* 'X' büyüklüğü */
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 10;
}
.btn-close-modal:hover {
    color: var(--accent-primary);
    transform: scale(1.1);
}
/* --- YENİ EKLENTİLER --- */

/* Lobi Sınıf Seçimi */
#lobbyClassSelect {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.2s;
}
#lobbyClassSelect:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.2);
}

/* Momentum / Ulti Butonu */
#btnUlti {
    transition: all 0.3s ease;
}

#btnUlti:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

/* Ulti Hazır Olduğunda Yanıp Sönme Efekti */
@keyframes ultiReadyPulse {
    0% { box-shadow: 0 0 5px #ff6600; border-color: #ff6600; }
    50% { box-shadow: 0 0 20px #ff6600; border-color: #fff; }
    100% { box-shadow: 0 0 5px #ff6600; border-color: #ff6600; }
}

#btnUlti:not(:disabled) {
    animation: ultiReadyPulse 1.5s infinite;
}

/* Barın dolum rengi (Turuncu gradient) */
#ulti-bg-bar {
    background: linear-gradient(90deg, var(--warning-color), var(--accent-primary));
    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
}
/* --- YENİ EKLENTİLER İÇİN GENEL DÜZENLEMELER --- */

/* Genel yetenek butonu stili */
.ability-btn {
    width: 100%;
    text-align: left;
    background: var(--primary-dark); /* Varsayılan koyu renk */
    color: var(--text-light);
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    position: relative; /* Momentum barı için */
    overflow: hidden; /* Momentum barının taşmasını engelle */
}

.ability-btn:hover:not(:disabled) {
    background-color: var(--primary-light);
    border-color: var(--accent-primary);
}

.ability-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bg-dark-main);
    color: var(--text-medium);
    border-color: #555;
}

/* Yetenekler ana menüsü (details etiketi) */
#abilities-main-menu summary {
    background: var(--bg-panel); /* Yetenekler başlığının arkaplanı */
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    margin-bottom: 10px; /* Alttaki container ile arayı açar */
    font-size: 1.1em;
    font-weight: bold;
    color: var(--text-light);
}

#abilities-main-menu summary:hover {
    background-color: var(--primary-dark);
}

/* Detay menülerinin içeriği (Sabotaj hedef seçimi gibi) */
.ability-details-menu summary {
    background: var(--warning-color); /* Sabotaj başlığının arkaplanı */
    color: var(--dark-text); /* Sarı buton yazısı */
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    border: none; /* Üstteki butonlara benzer */
}

.ability-details-menu summary:hover {
    background-color: #f0c330; /* Hafif daha açık sarı hover */
}

.ability-sub-menu-content {
    margin-top: 10px;
    padding: 10px;
    background: var(--bg-dark-main); /* Sabotaj hedefleri arka planı */
    border-radius: 4px;
    color: var(--text-medium);
}
/* 1. Demir Perde Uyarısı (Ekranda beliren büyük yazı) */
.iron-curtain-alert {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(192, 57, 43, 0.95); /* Koyu Kırmızı */
    color: white;
    padding: 30px 50px;
    border-radius: 10px;
    border: 3px solid #fff;
    font-family: 'Teko', sans-serif;
    font-size: 3em;
    text-align: center;
    z-index: 9999;
    box-shadow: 0 0 50px rgba(192, 57, 43, 0.8);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. Sabotaj Menüsü Hizalaması */
#sabotage-menu summary {
    text-align: left !important; /* Yazıyı sola daya */
    display: flex;
    justify-content: space-between; /* İkon ve yazıyı ayır */
    align-items: center;
}
/* Sabotaj menüsünün içindeki butonların hizası */
#sabotage-targets button {
    text-align: left !important;
    padding-left: 15px !important;
}

/* 3. Pas Butonu Düzeni (Görünmez olduğunda yer kaplaması için) */
#passBtn {
    /* Script.js'de visibility kullanacağımız için buraya ekstra display kuralı koyma */
    min-width: 100px; /* Buton küçülüp yok olmasın */
}

/* 4. Lobide Bot Tıklanabilirliği */
.bot-info-clickable:hover {
    color: var(--accent-primary);
    text-shadow: 0 0 5px var(--accent-primary);
}
/* Pas butonu için özel kural */
#passBtn {
    min-width: 100px;
    transition: opacity 0.3s, visibility 0.3s; /* Yumuşak geçiş */
}

/* Görünmez olduğunda */
#passBtn.hidden-btn {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Görünür olduğunda */
#passBtn.visible-btn {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ====================================================================== */
/* === YENİ GELİŞMİŞ QTE (KRİTİK VURUŞ) TASARIMI === */
/* ====================================================================== */

/* 1. Modalı standart kutu görünümünden çıkarıp HUD (Oyun Arayüzü) yapıyoruz */

#qte-modal-overlay .modal-content {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.95) 0%, rgba(40, 40, 50, 0.95) 100%);
    border: 3px solid #FFD700;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.4);
    border-radius: 15px;
    padding: 30px;
    width: 90%;
    max-width: 700px !important; /* Biraz daralttım, daha derli toplu dursun */
    overflow: hidden !important;
    /* İçindekileri ortalamak için en garanti yöntem */
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    
    transform: scale(1.1);
    animation: qtePopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes qtePopIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1.1); opacity: 1; }
}


/* Başlık Düzenlemesi - İkon ve Yazı Ortada */
#qte-modal-overlay h2 {
    font-family: 'Black Ops One', cursive;
    font-size: 3.5em;
    color: #FFD700;
    text-shadow: 0 0 20px #FFD700, 3px 3px 0 #000;
    margin-bottom: 20px;
    line-height: 1.2; /* Satır aralığını açtık */
    text-transform: uppercase;
    
    /* Bu ayarlar taşmayı engeller */
    display: block; 
    width: 100%;
}



/* Barın Dış Çerçevesi */
#qte-bar-container {
    position: relative;
    width: 100%;
    height: 60px;
    background: #000;
    border: 4px solid #555;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: inset 0 0 30px #000, 0 10px 20px rgba(0,0,0,0.5);
    
    /* --- GÜNCELLEME --- */
    margin: 25px auto; /* Sağdan soldan otomatik boşluk bırakarak ortala */
}

/* Bölgelerin Genel Ayarı */
.qte-zone { 
    height: 100%; 
    position: absolute; 
    top: 0; 
    transform: translateX(-50%); 
    left: 50%;
    opacity: 0.9; 
}

/* Renk Bölgeleri (Eskisi gibi ama daha canlı) */
#qte-zone-red { width: 100%; background: #c0392b; z-index: 1; }
#qte-zone-yellow { width: 30%; background: #f1c40f; z-index: 2; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
#qte-zone-green { width: 12%; background: #2ecc71; z-index: 3; }

/* Mükemmel Alan (En kritik yer - Neon Parlamalı) */
#qte-zone-perfect {
    width: 4%;
    background: #fff;
    box-shadow: 0 0 20px #fff, 0 0 40px #00ff00; /* Güçlü Neon parlama */
    z-index: 5;
    border-left: 1px solid rgba(0,0,0,0.5);
    border-right: 1px solid rgba(0,0,0,0.5);
    animation: zonePulse 0.5s infinite alternate;
}

@keyframes zonePulse {
    from { opacity: 0.8; box-shadow: 0 0 15px #fff; }
    to { opacity: 1; box-shadow: 0 0 35px #fff, 0 0 15px #00ff00; }
}

/* Hareket Eden İbre (Daha belirgin) */
#qte-marker {
    position: absolute;
    width: 8px; /* Kalınlaştırıldı */
    background: #FF4500; /* Turuncu-Kırmızı */
    box-shadow: 0 0 15px #FF4500, 0 0 25px #FF4500; /* İbre parlaması */
    height: 100%;
    top: 0;
    border: 2px solid #fff;
    z-index: 20;
    border-radius: 4px;
}

/* Durdur Butonu (Daha büyük ve çekici) */
#qte-stop-btn {
    background: linear-gradient(135deg, #FFD700, #FFA500); /* Altın gradyan */
    color: #000;
    border: none;
    font-family: 'Black Ops One', cursive;
    font-size: 2em;
    padding: 15px 50px;
    margin-top: 25px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
    transition: transform 0.1s, box-shadow 0.2s;
    text-transform: uppercase;
}
#qte-stop-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.8);
}
#qte-stop-btn:active { transform: scale(0.95); }

/* Geri Bildirim Yazısı (MÜKEMMEL! vb.) */
#qte-feedback {
    font-family: 'Black Ops One', cursive;
    font-size: 2.5em;
    margin-top: 20px;
    height: 40px;
    text-shadow: 2px 2px 0 #000;
}

/* Global Bildirim (Eski sildiğin kısmın yerine - Ekranda çıkan yazı) */
#global-qte-notification {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    text-align: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.5); 
}
#global-qte-notification.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
}
#qte-notif-player {
    font-family: 'Black Ops One', cursive;
    font-size: 2.5em;
    color: #fff;
    text-shadow: 0 0 10px #000;
    margin-bottom: 5px;
}
/* Sonuç Yazısı (MÜKEMMEL, ISKA vb.) - DÜZELTİLDİ (Düz Yazı) */
#qte-notif-result {
    font-family: 'Black Ops One', cursive;
    font-size: 5em;
    line-height: 1;
    -webkit-text-stroke: 3px #000;
    /* transform: skew... sildik, artık düz duracak */
    transform: scale(1); 
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.8));
    margin-top: 10px;
}

/* --- SCROLLBAR GİZLEME (Sadece QTE Penceresi İçin) --- */
#qte-modal-overlay {
    overflow: hidden !important; /* Dış çerçevedeki taşmayı ve çubuğu gizle */
}

/* --- EMOTE SİSTEMİ --- */
.emote-menu-container {
    position: absolute;
    bottom: 120px; /* Kontrol panelinin üstünde */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    padding: 10px;
    border-radius: 30px;
    border: 2px solid var(--border-color);
    display: flex;
    gap: 10px;
    z-index: 100;
    animation: fadeInUp 0.3s ease;
}

.emote-btn {
    background: none;
    border: none;
    font-size: 2em;
    cursor: pointer;
    transition: transform 0.2s;
}
.emote-btn:hover { transform: scale(1.3); }

/* Oyun alanında çıkan baloncuk */
.player-emote-bubble {
    position: absolute;
    font-size: 2.5em;
    animation: floatUpFade 2.5s forwards;
    pointer-events: none; /* Tıklamayı engelleme */
    z-index: 150;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

@keyframes floatUpFade {
    0% { transform: translate(-50%, 0) scale(0); opacity: 0; }
    20% { transform: translate(-50%, -20px) scale(1.2); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(-50%, -60px) scale(1); opacity: 0; }
}

/* --- LEVEL UP EFEKTLERİ --- */
#levelup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 3000;
    display: flex; justify-content: center; align-items: center;
    animation: fadeIn 0.5s;
}
.levelup-container {
    text-align: center;
    animation: zoomInBounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.levelup-title {
    font-family: 'Black Ops One', cursive;
    font-size: 6em;
    background: linear-gradient(to bottom, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}
.levelup-stars { font-size: 3em; margin: 10px 0; letter-spacing: 10px; }
.levelup-desc { color: #fff; font-size: 2em; font-family: 'Teko', sans-serif; }

@keyframes zoomInBounce {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

/* --- OYUN SONU DAHA GÖSTERİŞLİ STATLAR --- */
/* Stat değerleri için parlayan sınıf */
.stat-value.glowing-text {
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
    font-size: 1.5em;
    transition: all 0.5s;
}
/* === 2. YENİ YATAY SÜRE ÇUBUĞU TASARIMI === */
#horizontal-timer-container {
    width: 100%;
    height: 8px;
    background-color: #222;
    
    /* KENARLIKLARI VE BOŞLUKLARI SIFIRLIYORUZ */
    border-radius: 0;       /* Köşeleri dik yap (isteğe bağlı) */
    margin: 0;              /* Dış boşluk YOK */
    border: none;           /* Kenarlık YOK (tam bütünleşsin) */
    border-left: 1px solid #444;  /* Sadece yanlara çizgi kalsın istersen */
    border-right: 1px solid #444;

    overflow: hidden;
    box-shadow: none;       /* Gölgeyi kaldır ki çizgi gibi durmasın */
}
#horizontal-timer-fill {
    width: 0%; /* Başlangıçta boş */
    height: 100%;
    background: linear-gradient(90deg, #2ecc71, #f1c40f, #e74c3c); /* Yeşil -> Sarı -> Kırmızı geçiş */
    background-size: 200% 100%;
    transition: width 1s linear; /* Akıcı dolum efekti */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}