@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap');

/* Genel Sayfa Stilleri */
:root {
/* ... (dosyanın kalanı) ... */
    --parliament-blue-bg: #002D62; /* Koyu Parlement Mavisi Arkaplan */
    --parliament-blue-overlay: rgba(0, 45, 98, 0.85); /* Overlay için */
    --navy-blue-modal: #001f3f; /* Modallar için daha koyu mavi */
    --box-size: 60px;
    --key-color-default: #5a6a8a; /* Maviye uygun gri */
    --key-color-correct: #538d4e; /* Yeşil aynı */
    --key-color-wrong: #b52a37; /* Kırmızı aynı */
    --border-color: rgba(255, 255, 255, 0.2); /* Mavi üzerinde beyazımsı sınır */
    --bg-color: var(--parliament-blue-bg); /* MAVİ TEMA */
    --text-color: #FFFFFF;
}

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

/* Başlangıç Ekranı (Overlay) */
#start-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--parliament-blue-overlay);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 000;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;  
}
/* YENİ: Başlangıç Ekranı 'Nasıl Oynanır' Butonu Stili */
#start-how-to-play-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.8rem; /* '?' ikon boyutu */
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    opacity: 0.7;
    transition: opacity 0.2s;
}
#start-how-to-play-btn:hover {
    opacity: 1;
}
/* Başlangıç ekranındaki ? butonu kaldırıldı */
#start-overlay #rules-btn { display: none; }
#start-overlay #rules-modal { display: none; } /* Başlangıçta ? modalı yok */

.start-screen-logo {
    font-size: 3rem !important;
    margin-bottom: 30px;
}
#start-player-name {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--text-color);
    padding: 12px;
    border-radius: 5px;
    font-size: 1.1em;
    text-align: center;
    width: 80%;
    max-width: 300px;
    margin-bottom: 20px;
}
#start-player-name::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
#start-game-btn {
    background-color: var(--key-color-correct);
    color: var(--text-color);
    border: none;
    padding: 15px 40px;
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
    margin-top: 10px;
}
#start-game-btn:hover {
    transform: scale(1.05);
}
#start-game-btn:disabled {
     background-color: var(--key-color-default);
     cursor: not-allowed;
     transform: none;
}

/* Arka Planı Flu Yapan Sınıf */
.blurred {
    filter: blur(5px);
    transition: filter 0.5s ease-out;
    pointer-events: none;
}

/* Header Düzenlemeleri */
header {
    /* text-align: center; -> Artık flex kullanıyoruz */
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    padding: 5px 0 10px 0;
    transition: filter 0.5s ease-out;
    position: relative; 
    
    /* YENİ: Header'ı dikey (column) flex container yap */
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* YENİ: Üst satır (Butonlar ve Logo) (Numara 3 ve 4) */
.header-top-row {
    display: flex;
    flex-direction: row;
    justify-content: center; /* Logoyu ortalamak için 'center' yap */
    align-items: center;
    width: 100%;
    padding: 0 15px; /* Butonlar kenara yapışmasın */
    box-sizing: border-box; /* Padding genişliği etkilemesin */
    position: relative; /* Menü butonunu konumlandırmak için eklendi */
    margin-top: 60px; /* YENİ: Logoyu ve altındakileri aşağı indir */
}
/* YENİ: Menü butonunu sağa sabitle */
#side-menu-open-btn {
    position: absolute; /* Akıştan çıkar ve konumlandır */
    right: 15px; /* Sağ kenardan 15px boşluk */
    top: 50%; /* Dikeyde ortalamak için */
    transform: translateY(-50%); /* Dikeyde tam ortala */
}
.menu-icon {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem; /* İkon boyutu */
    cursor: pointer;
    padding: 5px;
    opacity: 0.8;
}
.menu-icon:hover {
    opacity: 1;
}

/* Logo Stilleri (Header'daki) */
header #logo-container { /* Header'daki logoya özel */
    display: flex;
    justify-content: center;
/* ... (diğer stiller) ... */
    font-family: inherit;
    font-weight: bold;
    font-size: 2.2rem; /* Daha büyük */
    letter-spacing: 0.08em;
    color: var(--text-color);
}
.logo-letter { line-height: 1; }
.logo-box {
    width: 1em; 
    height: 1em;
    display: inline-flex;
    justify-content: center; /* ORTALAMA İÇİN GEREKLİ */
    align-items: center;   /* ORTALAMA İÇİN GEREKLİ */
    border-radius: 4px;
    font-size: 0.9em;
    position: relative;
    /* top: -0.05em; Bu satırı silin veya yorumda kalsın */
    border-width: 3px;
}
.logo-o-empty {
    background-color: var(--key-color-wrong);
    border-color: var(--key-color-wrong);
    color: var(--text-color);
}
.logo-o-filled {
    background-color: var(--key-color-correct);
    border-color: var(--key-color-correct);
    color: var(--text-color);
}

/* Eski Leaderboard butonu stilleri kaldırıldı */
/* #leaderboard-btn { ... } */

#game-status {
    display: flex; /* YENİ: Flexbox kullan */
    justify-content: center; /* YENİ: İçindeki öğeleri ortala */
    gap: 20px; /* YENİ: Öğeler arasına boşluk koy (opsiyonel, 10px de olabilir) */
    margin-bottom: 20px;
    font-size: 1.1em;
    font-weight: bold;
    color: var(--text-color);
}
#timer {
    font-weight: bold;
    color: var(--text-color);
}

/* ... (Geri kalan stiller aynı) ... */
#layout-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-grow: 1;
    justify-content: space-between;
    transition: filter 0.5s ease-out;
}
#game-container {
    width: 100%;
    max-width: 500px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#puzzle-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 350px;
    margin-bottom: 15px;
}
.word-box {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    width: 48%;
}
.word-box span { font-size: 0.9em; color: #b1b1b1; }
.word-box strong {
    display: block;
    font-size: 1.3em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 5px;
    color: var(--text-color);
}

#game-grid-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
#game-grid {
    display: grid;
    grid-gap: 5px;
    padding: 10px;
}
.grid-row { display: grid; grid-gap: 5px; }
.grid-box {
    width: var(--box-size);
    height: var(--box-size);
    border: 2px solid var(--border-color);
    color: var(--text-color);
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    background-color: rgba(0, 0, 0, 0.1);
}
.grid-box.filled {
    border-color: rgba(255, 255, 255, 0.4);
    animation: pop 0.1s ease-out;
}
@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.grid-box.correct {
    background-color: var(--key-color-correct);
    border-color: var(--key-color-correct);
    color: var(--text-color);
}
.grid-box.error {
    background-color: var(--key-color-wrong);
    border-color: var(--key-color-wrong);
    color: var(--text-color);
}
.grid-row.shake { animation: shake 0.5s ease-in-out; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

#keyboard-container {
    width: 100%;
    max-width: 600px;
    margin: 10px 0;
    padding: 0 5px;
    box-sizing: border-box;
}
#keyboard-container.keyboard-disabled .key {
    opacity: 0.6;
    pointer-events: none;
    cursor: default;
}
.keyboard-row {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 5px;
    gap: 5px;
}
.key {
    font-family: inherit;
    font-weight: bold;
    font-size: 1.1em;
    background-color: var(--key-color-default);
    color: var(--text-color);
    border: none;
    border-radius: 4px;
    padding: 0;
    height: 50px;
    cursor: pointer;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}
.key:hover, .key:focus { background-color: #7a8aa8; }
.key.wide { flex: 1.5; font-size: 0.9em; }

.message {
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    min-height: 1.2em;
    margin-top: 10px; /* Tekrar eklendi */
    visibility: hidden;
    width: auto;
    white-space: normal;
    z-index: 500;
     /* Absolute positioning kaldırıldı */
}
.message.show { visibility: visible; }
.message.error { background-color: var(--key-color-wrong); }
.message.success { background-color: var(--key-color-correct); }

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}
.modal-content {
    background-color: var(--navy-blue-modal);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    color: var(--text-color);
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.8em;
    color: var(--key-color-default);
    cursor: pointer;
}
.modal-close-btn:hover {
    color: var(--text-color);
}
.modal-content h2 {
    margin-top: 0;
    text-align: center;
}
.modal-content p {
    text-align: center;
    color: #b1b1b1;
}

#leaderboard-list {
    max-height: 300px;
    overflow-y: auto;
    text-align: left;
    padding: 0 10px;
    margin-bottom: 15px;
}
#leaderboard-list ol {
    padding-left: 20px;
    margin: 0;
}
#leaderboard-list li {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
}
#leaderboard-list li .player-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
#leaderboard-list li .player-info strong {
    color: var(--text-color);
    font-size: 1.1em;
}
#leaderboard-list li .score-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-weight: bold;
}
#leaderboard-list li .score-info .score-value {
    font-size: 1.2em;
    color: var(--key-color-correct);
}
#leaderboard-list li .score-info .score-details {
    font-size: 0.8em;
    color: #b1b1b1;
}

.user-rank-info {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 0.9em;
}
.user-rank-info p {
    margin: 5px 0;
    color: #b1b1b1;
}
.user-rank-info strong {
    color: var(--text-color);
    font-size: 1.1em;
}
.user-rank-info .score-value {
     font-size: 1.3em;
     font-weight: bold;
     color: var(--key-color-correct);
     display: block;
     margin-bottom: 5px;
}

/* RESPONSIVE TASARIM */
@media (max-width: 400px) {
    :root {
        --box-size: 50px;
    }
    .key { font-size: 0.9em; height: 45px; }
    #rules-modal { width: 80%; right: 10%; } /* Eski modal */
    #how-to-play-modal {width: 80%;} /* Yeni modal */
    #start-player-name { font-size: 1em; }
    /* Menü ikonları küçük ekranda */
    #top-menu { gap: 10px; right: 10px;}
    .menu-icon { font-size: 1.3rem; }
     header #logo-container { font-size: 1.6rem;} /* Logo mobilde daha küçük */
}
@media (min-width: 950px) {
    #layout-wrapper {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 30px;
        padding: 20px;
        max-width: 1300px;
    }
    #game-container { }
    #keyboard-container { margin: 10px 0; }
}
/* --- İstatistikler Modalı İçin Güncellenmiş Stiller --- */
#stats-content {
    text-align: left;
    padding: 0 10px; /* İçeriğe biraz kenar boşluğu */
}

/* Genel İstatistik Grid Stilleri */
.stats-grid {
    display: grid;
    /* 4 Eşit Sütun (Oynanan, Oran, Mevcut Seri, En Uzun Seri) */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 10px; /* Satırlar arası 20px, sütunlar arası 10px boşluk */
    margin-bottom: 25px; /* Alt bölümle araya boşluk */
    text-align: center;
}

/* Performans İstatistik Grid Stilleri (Varsa) */
.perf-grid {
    /* Performans için de 4 sütun */
    grid-template-columns: repeat(4, 1fr);
}

/* Her bir istatistik öğesi (Sayı + Etiket) */
.stat-item {
    display: flex; /* Sayı ve etiketi alt alta hizalamak için */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* İstatistik Sayısı (Büyük Değer) */
.stat-item .stat-value {
    display: block;
    font-size: 2em; /* Biraz daha büyük */
    font-weight: bold;
    color: var(--text-color);
    line-height: 1.1; /* Satır yüksekliği */
    margin-bottom: 5px; /* Etiketle arasına boşluk */
}

/* İstatistik Etiketi (Küçük Yazı) */
.stat-item .stat-label {
    font-size: 0.75em; /* Biraz daha küçük */
    color: #b1b1b1;
    text-transform: uppercase;
    letter-spacing: 0.5px; /* Harf aralığı */
}

/* Bölümler Arası Ayırıcı Çizgi */
#stats-content hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 20px 0; /* Çizginin üstüne ve altına boşluk */
}

/* Başlıklar (Performans, Tahmin Dağılımı) */
#stats-content h4 {
    text-align: center;
    margin-top: 10px; /* Üstündeki çizgiyle araya boşluk */
    margin-bottom: 20px; /* Altındaki grafikle araya boşluk */
    color: #ddd;
    text-transform: uppercase;
    font-size: 0.9em;
    font-weight: bold; /* Başlıkları belirginleştir */
    letter-spacing: 1px;
}

/* --- Tahmin Dağılım Grafiği Stilleri --- */
.distribution-graph {
    width: 100%;
    margin-top: 10px;
    padding: 0 5px; /* Grafiğe hafif kenar boşluğu */
    box-sizing: border-box;
}

/* Grafik Satırı (Etiket + Bar) */
.graph-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* Satırlar arasına boşluk */
    height: 22px; /* Satır yüksekliği */
}

/* Adım Sayısı Etiketi (örn: "6") */
.graph-label {
    width: 25px; /* Genişlik ayarı */
    text-align: right;
    margin-right: 10px; /* Bar ile arasına boşluk */
    font-weight: bold;
    color: #ccc;
    font-size: 0.9em;
}

/* Barın Oturduğu Arka Plan Kutusu */
.graph-bar-container {
    flex-grow: 1;
    background-color: rgba(0, 0, 0, 0.2); /* Hafif koyu arka plan */
    border-radius: 3px;
    height: 100%;
    display: flex;
    align-items: center; /* İçindeki barı dikeyde ortala */
}

/* Asıl Renkli Bar */
.graph-bar {
    background-color: var(--key-color-correct); /* Bar için yeşil renk */
    height: 100%;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Sayıyı barın sonuna (sağa) yasla */
    padding-right: 8px; /* Sayı ile barın sağ kenarı arası boşluk */
    box-sizing: border-box; /* Padding içeri dahil olsun */
    min-width: 25px; /* Bar çok kısa olsa bile sayı görünsün */
    transition: width 0.5s ease-out; /* Genişlik değişimi animasyonu */
}

/* Bar İçindeki Sayı (Kaç oyun olduğu) */
.graph-bar .graph-count {
    color: white;
    font-size: 0.8em;
    font-weight: bold;
}

/* İstatistik Modalının Genel Genişliği (Opsiyonel) */
#stats-modal .modal-content {
    max-width: 450px; /* İstatistikler için biraz daha geniş olabilir */
}

/* Mobil Cihazlar İçin Ayarlamalar (Opsiyonel) */
@media (max-width: 400px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr); /* Küçük ekranda 2 sütun */
        gap: 15px;
    }
    .perf-grid {
        grid-template-columns: repeat(2, 1fr); /* Küçük ekranda 2 sütun */
        gap: 15px;
    }
    .stat-item .stat-value {
        font-size: 1.6em; /* Mobilde biraz daha küçük */
    }
}
/* Takvim Modalı İçin Özel Stiller */
#calendar-modal .modal-content {
    max-width: 450px; /* Daha dar bir takvim penceresi */
    padding: 25px;
}

#calendar-modal h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--header-text-color); /* Başlık rengi */
    text-align: center;
}

#calendar-modal p {
    font-size: 15px;
    color: var(--text-color-secondary);
    text-align: center;
    margin-bottom: 20px;
}

#calendar-content {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 sütunlu takvim ızgarası */
    gap: 8px; /* Tarihler arası boşluk */
    width: 100%;
    margin: 0 auto;
    background-color: var(--key-color-inactive); /* Haftanın günleri için arka plan */
    border-radius: 8px;
    padding: 10px;
}

.calendar-day-header {
    background-color: var(--key-color-correct); /* Gün başlıkları (Pzt, Salı vb.) */
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 8px 0;
    border-radius: 4px;
    font-size: 14px;
}

.calendar-day {
    background-color: var(--key-color-default); /* Varsayılan gün rengi */
    color: white;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px; /* Kare butonlar için */
    width: 45px; /* Kare butonlar için */
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    margin: auto; /* Ortalamak için */
}

.calendar-day:hover {
    background-color: var(--key-color-close); /* Üzerine gelince renk değişimi */
}

.calendar-day.disabled {
    background-color: var(--key-color-absent); /* Gelecek günler veya aktif olmayanlar */
    color: #888;
    cursor: not-allowed;
    opacity: 0.6;
}

.calendar-day.selected {
    border: 3px solid var(--key-color-correct); /* Seçili gün için kenarlık */
    transform: scale(1.05); /* Hafif büyütme */
}

#back-to-today-btn {
    margin-top: 25px !important;
    background-color: var(--key-color-default) !important;
    font-size: 16px;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
}

#back-to-today-btn:hover {
    background-color: var(--key-color-close) !important;
}
/* --- TAKVİM MODALI STİLLERİ (GELİŞMİŞ) --- */
#calendar-modal .modal-content {
    max-width: 420px; /* Sabit genişlik */
    padding: 20px;
}

#calendar-modal h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
}
#calendar-modal p {
    text-align: center;
    font-size: 0.9em;
    color: #b1b1b1;
    margin-top: 0;
    margin-bottom: 15px;
}

/* YENİ: Navigasyon Stilleri */
.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}
#calendar-month-year {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text-color);
    margin: 0;
    flex-grow: 1;
    text-align: center;
}
.calendar-nav button {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 2.2em;
    font-weight: bold;
    cursor: pointer;
    padding: 0 10px;
    line-height: 1;
    border-radius: 4px;
    transition: background-color 0.2s;
}
.calendar-nav button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.calendar-nav button:disabled {
    color: #555;
    cursor: not-allowed;
    background-color: transparent;
}

/* YENİ: Takvim Izgarası Stilleri */
#calendar-content {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 sütun */
    gap: 6px; /* Kutu araları */
    width: 100%;
}

/* YENİ: Hafta Günleri Başlığı (PZT, SAL, ÇAR...) */
.calendar-day-header {
    font-size: 0.8em;
    font-weight: bold;
    color: #b1b1b1;
    text-align: center;
    padding-bottom: 8px;
}

/* Gün Kutuları */
.calendar-day {
    width: 100%;
    aspect-ratio: 1 / 1; /* Kare kutular */
    background-color: var(--key-color-default);
    color: var(--text-color);
    border: none;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}
.calendar-day:hover {
    background-color: #7a8aa8;
}
.calendar-day.empty {
    background-color: transparent;
    cursor: default;
}
.calendar-day.today {
    background-color: var(--key-color-correct); /* Bugünün rengi */
    color: var(--text-color);
}
.calendar-day.playing {
     /* Oynanan günü işaretle */
    box-shadow: 0 0 0 3px var(--key-color-correct);
    padding: 3px;
}
.calendar-day.disabled {
    background-color: rgba(0, 0, 0, 0.2);
    color: #666;
    cursor: not-allowed;
    opacity: 0.7;
}

#back-to-today-btn {
    margin-top: 15px !important; /* !important ekleyerek emin olalım */
}
/* --- BURADAN SONRA YAPIŞTIR (style.css'in en altına) --- */

/* --- Kelime Anlamı Stilleri (Tooltip Versiyonu) --- */

/* İkon Stilleri (Bunlar aynı kaldı) */
.grid-row {
  position: relative; 
}

.definition-icon {
  position: absolute;
  top: 50%;
  right: -25px; 
  transform: translateY(-50%);
  font-family: 'Georgia', serif;
  font-style: italic;
  font-weight: bold;
  font-size: 1.1em;
  color: var(--key-color-correct);
  cursor: pointer;
  display: none; /* Varsayılan olarak gizli */
  opacity: 0.6;
  transition: opacity 0.2s;
}

.definition-icon:hover {
  opacity: 1;
}

.grid-row.correct-row .definition-icon {
  display: block;
}

/* Mobil için ikon konumu */
@media (max-width: 450px) {
    .definition-icon { right: -20px; font-size: 1.0em; }
}
@media (max-width: 380px) {
    .definition-icon { right: -18px; }
}


/* YENİ: Tooltip Kutusu Stili (Dinamik Konumlandırma) */
#definition-tooltip {
  position: fixed; /* Ekrana göre sabit konum */
  background-color: rgba(0, 31, 63, 0.9); /* Laci transparan */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  
  padding: 15px;
  z-index: 4000;
  
  /* Javascript tarafından konumlandırılacak */
  max-width: 300px; /* Genişliği sınırlı tut */
  
  /* Animasyon */
  visibility: hidden;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* Tooltip'i görünür yap */
#definition-tooltip.show {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

/* Tooltip'i görünür yap */
#definition-tooltip.show {
  /* display: block; */ /* YENİ: Bu satıra artık gerek yok */
  visibility: visible; /* YENİ: Görünür yap */
  opacity: 1;
  transform: translateY(0);
}

/* Tooltip için Kapatma Tuşu */
#definition-tooltip .modal-close-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 1.5em; /* Biraz daha küçük */
  color: var(--key-color-default);
}

/* Tooltip İçerik Stilleri (Eski modal stilleri buraya taşındı) */
#definition-content h4 {
  margin-top: 0;
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 5px;
  font-size: 1.2em;
}

#definition-content ul {
  list-style-type: decimal;
  padding-left: 20px;
  margin: 0;
  max-height: 150px; /* Çok uzunsa kaydırma çubuğu çıksın */
  overflow-y: auto;
}

#definition-content li {
  margin-bottom: 12px;
  font-size: 0.95em;
  line-height: 1.4;
}

#definition-content .error {
  color: var(--key-color-wrong);
  font-weight: bold;
}
/* --- BURADAN ÖNCE YAPIŞTIR --- */
/* --- BÖLÜM 1: YAN MENÜ STİLLERİ --- */

/* Hamburger ikonu (☰) için küçük düzeltme */
#side-menu-open-btn {
    font-size: 1.8rem;
    font-weight: bold;
}

/* Menü açıkken arkaplanı karartan overlay */
#side-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Yarı transparan siyah */
    z-index: 2000; /* Menünün bir alt katmanı */
    
    /* Başlangıçta gizli */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Asıl Menü Kutusu (Sağdan kayan) */
#side-menu {
    position: fixed;
    top: 0;
    right: 0; /* Ekrana sağdan yapışık */
    width: 300px; /* Menü genişliği */
    max-width: 80%; /* Mobil için */
    height: 100%;
    background-color: var(--navy-blue-modal); /* Koyu mavi menü arkaplanı */
    border-left: 1px solid var(--border-color);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
    z-index: 2001; /* En üst katman */
    
    display: flex;
    flex-direction: column;

    /* Başlangıçta ekranın dışında (gizli) */
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}
/* --- YENİ: Menüyü "açık" duruma getiren sınıf --- */
/* (Bu sınıfı JS ile ekleyeceğiz) */

/* DÜZELTME: Arka planı görünür yap */
body.side-menu-open #side-menu-overlay {
    opacity: 1;
    visibility: visible;
}

/* DÜZELTME: Menüyü (sağ paneli) içeri kaydır */
body.side-menu-open #side-menu {
    transform: translateX(0);
}
/* Menü Başlığı (MENÜ ve X tuşu) */
.side-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
}
.side-menu-header h3 {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.side-menu-header .menu-icon {
    font-size: 2rem; /* Kapatma (X) tuşu */
}

/* Menü İçeriği (Buton Listesi) */
.side-menu-content {
    list-style: none;
    padding: 15px;
    margin: 0;
    flex-grow: 1; /* Kalan boşluğu doldur */
    overflow-y: auto; /* Gerekirse kaydırma çubuğu */
}
.side-menu-content li {
    margin-bottom: 10px;
}

/* Menüdeki yeni buton stili */
.side-menu-content button {
    background-color: var(--key-color-default);
    color: var(--text-color);
    border: none;
    border-radius: 6px;
    padding: 15px;
    width: 100%; /* Tam genişlik */
    
    font-family: inherit; /* Ana yazı tipini kullan */
    font-size: 1rem;
    font-weight: bold;
    text-align: left; /* Yazıyı sola yasla */
    
    display: flex;
    align-items: center;
    gap: 15px; /* İkon (emoji) ile yazı arası boşluk */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.side-menu-content button:hover {
    background-color: #7a8aa8; /* Hover rengi */
}
/* --- BÖLÜM 1: YAN MENÜ STİLLERİ --- */

/* Hamburger ikonu (☰) için küçük düzeltme */
#side-menu-open-btn {
    font-size: 1.8rem;
    font-weight: bold;
}

/* Menü açıkken arkaplanı karartan overlay */
#side-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Yarı transparan siyah */
    z-index: 2000; /* Menünün bir alt katmanı */
    
    /* Başlangıçta gizli */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Asıl Menü Kutusu (Sağdan kayan) */
#side-menu {
    position: fixed;
    top: 0;
    right: 0; /* Ekrana sağdan yapışık */
    width: 300px; /* Menü genişliği */
    max-width: 80%; /* Mobil için */
    height: 100%;
    background-color: var(--navy-blue-modal); /* Koyu mavi menü arkaplanı */
    border-left: 1px solid var(--border-color);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
    z-index: 2001; /* En üst katman */
    
    display: flex;
    flex-direction: column;

    /* Başlangıçta ekranın dışında (gizli) */
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

/* --- YENİ: Menüyü "açık" duruma getiren sınıf --- */
/* (Bu sınıfı JS ile ekleyeceğiz) */
body.side-menu-open .side-menu-container {
    opacity: 1;
    visibility: visible;
    transform: translateX(0); /* Menüyü görünür alana kaydır */
}

/* Menü Başlığı (MENÜ ve X tuşu) */
.side-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
}
.side-menu-header h3 {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.side-menu-header .menu-icon {
    font-size: 2rem; /* Kapatma (X) tuşu */
}

/* Menü İçeriği (Buton Listesi) */
.side-menu-content {
    list-style: none;
    padding: 15px;
    margin: 0;
    flex-grow: 1; /* Kalan boşluğu doldur */
    overflow-y: auto; /* Gerekirse kaydırma çubuğu */
}
.side-menu-content li {
    margin-bottom: 10px;
}

/* Menüdeki yeni buton stili */
.side-menu-content button {
    background-color: var(--key-color-default);
    color: var(--text-color);
    border: none;
    border-radius: 6px;
    padding: 15px;
    width: 100%; /* Tam genişlik */
    
    font-family: inherit; /* Ana yazı tipini kullan */
    font-size: 1rem;
    font-weight: bold;
    text-align: left; /* Yazıyı sola yasla */
    
    display: flex;
    align-items: center;
    gap: 15px; /* İkon (emoji) ile yazı arası boşluk */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.side-menu-content button:hover {
    background-color: #7a8aa8; /* Hover rengi */
}
/* YENİ: Google Login Butonu Stili */
#google-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #FFFFFF;
    color: #444444;
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1.2em;
    font-weight: bold;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#google-login-btn:hover {
    background-color: #f7f7f7;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
#google-login-btn svg {
    width: 20px;
    height: 20px;
}

/* YENİ: Çıkış Butonu Stili */
#logout-btn {
    background-color: var(--key-color-wrong); /* Kırmızı */
}
#logout-btn:hover {
    background-color: #d14552;
}
/* style.css (Dosyanın en sonuna ekleyin) */

/* YENİ: Bugüne Dön Butonu */
/* YENİ: Bugüne Dön Butonu */
#return-to-today-container {
    position: absolute; /* MUTLAKA EKLE */
    top: 20px; /* Üstten boşluk */
    right: 20px; /* Sağdan boşluk */
    z-index: 1000; /* Diğer elementlerin üzerinde görünmesini sağlar */
}

#return-to-today-btn {
    background-color: var(--key-color-correct);
    color: var(--text-color);
    border: none;
    border-radius: 6px;
    padding: 8px 15px;
    font-family: inherit;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
}

#return-to-today-btn:hover {
    transform: scale(1.05);
}

#return-to-today-btn {
    background-color: var(--key-color-correct); /* Yeşil renk */
    color: var(--text-color);
    border: none;
    border-radius: 6px;
    padding: 8px 15px;
    font-family: inherit;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
}

#return-to-today-btn:hover {
    transform: scale(1.05); /* Hafif büyüme efekti */
}
/* --- BÖLÜM 1: Koyu Mod (Dark Theme) Değişkenleri --- */
body.dark-theme {
    /* Ana renkleri siyaha yakın tonlarla değiştiriyoruz */
    --bg-color: #121212; /* Ana arkaplan (Siyaha yakın) */
    --parliament-blue-bg: #121212; /* Eski mavi arkaplanı eziyoruz */
    --navy-blue-modal: #1E1E1E; /* Modallar (Biraz daha açık gri) */
    --parliament-blue-overlay: rgba(18, 18, 18, 0.85); /* Overlay */
    --border-color: rgba(255, 255, 255, 0.15); /* Sınırlar (daha soluk) */
    
    /* Klavyedeki varsayılan tuş rengi */
    --key-color-default: #3A3A3C; 
}

/* --- BÖLÜM 2: Tema Değiştirici (Toggle Switch) Stilleri --- */

/* <li> elementini buton gibi gösteriyoruz. 
  index.html'e 'theme-switcher' sınıfıyla eklemiştik.
*/
.theme-switcher {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--key-color-default);
    color: var(--text-color);
    border-radius: 6px;
    padding: 10px 15px; /* Buton padding'i */
    font-size: 1rem;
    font-weight: bold;
    margin-top: 10px; /* Diğer butonlarla arası açılsın */
}
.theme-switcher span {
    line-height: 1;
}
/* Anahtarın kendisi (switch) */
.switch {
    position: relative;
    display: inline-block;
    width: 50px; /* Genişlik */
    height: 28px; /* Yükseklik */
}
/* Checkbox'ı gizle */
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
/* Anahtarın kayan çubuğu */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2); /* Kapalıyken (Açık Mod) */
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px; /* Top */
    width: 20px; /* Top */
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}
/* AÇIK DURUM (Koyu Mod) */
input:checked + .slider {
    background-color: var(--key-color-correct); /* Açıkken (Koyu Mod) */
}
input:checked + .slider:before {
    transform: translateX(22px); /* Kaydırma mesafesi */
}
/* Yuvarlak stil */
.slider.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}
/* --- BÖLÜM 3: Başarımlar Modalı Stilleri --- */
#achievements-modal .modal-content {
    max-width: 450px;
}

#achievements-content {
    /* Pencereye sığmazsa kaydırma çubuğu çıkar */
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px; /* Kaydırma çubuğu için boşluk */
}

.achievements-list {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Başarımlar arası boşluk */
}

/* Her bir başarım satırı */
.achievement-item {
    display: flex;
    align-items: center;
    gap: 15px; /* İkon ve yazı arası boşluk */
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    transition: all 0.3s ease;
}

/* Kilitli (Kazanılmamış) Başarımlar */
.achievement-item.locked {
    opacity: 0.5;
    filter: grayscale(80%); /* Soluk ve gri göster */
}
.achievement-item.locked .ach-icon {
    font-size: 2.5rem;
    filter: blur(2px); /* İkonu flu yap */
}

/* Açık (Kazanılmış) Başarımlar */
.achievement-item.unlocked {
    /* Sınırı yeşil yap */
    border-color: var(--key-color-correct); 
    /* Arka planı hafif yeşil yap */
    background-color: rgba(83, 141, 78, 0.1); 
}
.achievement-item.unlocked .ach-icon {
    font-size: 2.5rem;
}

/* Başarım ikonu (Emoji) */
.ach-icon {
    line-height: 1;
}

/* Başarım yazıları (Adı ve Açıklaması) */
.ach-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ach-name {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--text-color);
}
.ach-desc {
    font-size: 0.9em;
    color: #b1b1b1;
}

/* Kilitli başarımların yazılarını da soluk yap */
.achievement-item.locked .ach-name,
.achievement-item.locked .ach-desc {
    color: #999;
}

/* Kazanılma tarihi (Şimdilik sadece "Kazanıldı" yazacak) */
.ach-date {
    font-size: 0.8em;
    font-weight: bold;
    color: var(--key-color-correct);
    margin-top: 4px;
}
/* --- Liderlik Tablosu Sekme Stilleri --- */
.leaderboard-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.tab-btn {
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    color: var(--key-color-default); /* Varsayılan renk (soluk) */
    background: none;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 3px solid transparent; /* Alt çizgi için yer tutucu */
    transition: color 0.2s, border-color 0.2s;
}

.tab-btn:hover {
    color: var(--text-color); /* Üzerine gelince */
}

/* Aktif olan sekmenin stili */
.tab-btn.active {
    color: var(--key-color-correct); /* Aktif renk (yeşil) */
    border-bottom-color: var(--key-color-correct); /* Alt çizgiyi göster */
}
#nickname-modal-overlay .modal-content {
    /* İsterseniz diğer modallardan farklı bir arka plan verebilirsiniz */
    z-index: 4001;
}
#nickname-error {
    /* Hata mesajı için yer tutar */
    min-height: 1.2em;
}

/* YENİ: Misafir Giriş Butonu Stili (Hayalet Buton) */
#guest-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    background-color: #FFFFFF; /* Google gibi beyaz arkaplan */
    color: #444444; /* Google gibi koyu yazı rengi */
    border: 1px solid #DDDDDD; /* Google gibi ince kenarlık */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Google gibi gölge */
    transition: background-color 0.2s, box-shadow 0.2s;
    
    width: auto; 
    min-width: 250px; /* Google butonu ile benzer genişlikte */
    box-sizing: border-box; 
    padding: 12px 24px;
    font-size: 1.2em;
    font-weight: bold;
    font-family: 'Nunito', sans-serif;
    border-radius: 8px;
    
    margin-top: 25px; /* Google butonuyla arası */
    
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

#guest-login-btn:hover {
    background-color: #FFFFFF;
    color: var(--parliament-blue-bg); /* Yazı rengi mavi olsun */
}
@media (max-width: 949px) {

    /* Klavyeyi ekranın altına sabitleme */
    #keyboard-container {
        position: fixed;  /* Ekranın altına sabitler */
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;     /* Diğer elementlerin (örn: modal) altında kalır */
        
        background-color: var(--bg-color); /* Sabitlendiğinde şeffaf olmaması için */
        
        margin: 0;
        padding: 10px 5px 10px 5px; /* Tuşların alt ve üstüne boşluk */
        
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); /* Hafif gölge */
    }

    /* Kelime anlamı 'i' ikonunu büyütme (Mobil için) */
    .definition-icon {
        font-size: 1.6em;  /* Yazı boyutunu büyüt */
        opacity: 0.85;     /* Daha görünür yap */
        right: -24px;      /* Konumunu hafifçe ayarla */
        padding: 5px; /* Dokunma alanını arttırmak için */
    }

    @media (max-width: 380px) {
         .definition-icon {
            font-size: 1.5em;
            right: -20px;
         }
    }
}
/* --- MOBİL CİHAZ DÜZENLEMELERİ --- */
/* 949px ve altındaki (tablet ve mobil) tüm ekranlar için */
@media (max-width: 949px) {

    /* * SORUN 1: Klavyeyi ekranın altına sabitleme.
     * Böylece grid (kelime kutuları) uzasa bile
     * klavye her zaman görünür kalır.
     */
    #keyboard-container {
        position: fixed;  /* Ekranın altına sabitler */
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;     /* Diğer elementlerin (örn: modal) altında kalır */
        
        /* Sabitlendiğinde şeffaf olmaması için arkaplan ekle */
        background-color: var(--bg-color); 
        
        /* Üst ve alt kenar boşluklarını sıfırla, içeriye padding ver */
        margin: 0;
        padding: 10px 5px 10px 5px; /* Tuşların alt ve üstüne boşluk */
        
        /* Hafif bir gölge (opsiyonel ama şık durur) */
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    }

    /* * Sabit klavyenin, oyunun sonundaki 
     * içeriğin (grid'in) üzerini kapatmasını engelleme.
     * Body'nin altına klavye yüksekliği kadar boşluk ekliyoruz.
     * (En büyük tuş boyutu 50px * 3 satır + boşluklar = ~170px)
     */
    body {
        padding-bottom: 170px !important;
    }

    /* * SORUN 2: Kelime anlamı 'i' ikonunu büyütme.
     */
    .definition-icon {
        font-size: 1.6em;  /* Yazı boyutunu büyüt */
        opacity: 0.85;     /* Daha görünür yap */
        right: -24px;      /* Konumunu hafifçe ayarla */
        
        /* Dokunma alanını arttırmak için */
        padding: 5px; 
    }

    /* * ÇOK KÜÇÜK EKRANLAR (örn: 380px) için 
     * ikonun konumuyla ilgili mevcut kuralınızı eziyoruz.
     */
    @media (max-width: 380px) {
         .definition-icon {
            font-size: 1.5em; /* Biraz daha küçük ama yine de büyük */
            right: -20px;
         }
    }
}
#player-name-display {
    position: absolute;
    left: 15px; /* Menü butonu gibi kenardan boşluklu */
    top: 50%; /* Dikeyde ortalamak için */
    transform: translateY(-50%); /* Dikeyde tam ortala */
    
    display: flex; /* İkon ve yazıyı yan yana koymak için */
    align-items: center;
    gap: 8px; /* İkon ve yazı arası boşluk */

    color: var(--text-color);
    font-size: 1.1em;
    font-weight: bold;
    opacity: 0.8; /* Çok parlamasın */
    
    /* Çok uzun isimlerin tasarımı bozmasını engelle */
    max-width: 150px; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobil cihazlarda biraz daha küçük yapalım */
@media (max-width: 450px) {
    #player-name-display {
        font-size: 0.9em;
        max-width: 100px; /* Mobilde daha kısa alan */
        left: 10px;
        gap: 5px;
    }
}