/**
 * Wordle Stilleri - Çaycuma Sözlük
 */

/* Menü ile içerik arası boşluk (%50 azaltıldı) */
.wordle-page-section {
    margin-top: 0 !important;
}

/* Hafıza görselleri — yalnızca “Anlamı:” kutusunun üstündeki ızgara alanı */
.wordle-meaning-bg-wrap {
    --wordle-bg-opacity: 0.58;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
.wordle-meaning-bg-wrap .wordle-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--wordle-bg-opacity);
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.wordle-meaning-bg-wrap .wordle-bg-scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(255, 255, 255, 0.68);
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.wordle-meaning-bg-wrap:not(.wordle-has-bg) .wordle-bg-scrim {
    opacity: 0;
}
.wordle-meaning-bg-foreground {
    z-index: 1;
}

/* Kelime uzunluğu ve tahmin sayısı alt alta, aralarında yatay çizgi */
.wordle-settings-row {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.wordle-setting-block {
    width: 100%;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}
.wordle-setting-block:last-child {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 1rem;
    margin-bottom: 5px;
}

/* Oyun başlatma ekranı: üst boşluk %50 azaltıldı (2.5px) */
.wordle-start-card-body {
    padding-top: 2.5px !important;
    padding-bottom: 0.375rem !important; /* Oyunu Başlat düğmesi alt marjı test ile aynı (0.375rem) */
}
.wordle-intro-text {
    font-size: clamp(0.95rem, 2.5vw, 1.15rem);
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
}
.wordle-intro-text .lead {
    font-size: inherit;
}
/* Hover: hareket yok, kenar çizgisi/gölge aynı kalsın (giriş + oyun ekranı tüm kartlar) */
#wordle-start-screen .card:hover,
#wordle-game-screen .card:hover {
    transform: none !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* En dıştaki kutu köşesi test ile aynı (10px) – style.css’te de tanımlı */
#wordle-start-screen .card,
#wordle-game-screen .card.wordle-board {
    border-radius: 10px !important;
}
.wordle-board {
    border-radius: 10px !important;
}
.wordle-keyboard {
    border-radius: 10px;
}

.wordle-grid {
    display: grid;
    grid-auto-rows: 62px;
    column-gap: 5px !important;
    row-gap: 5px !important;
    justify-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.wordle-tile {
    width: 62px;
    height: 62px;
    border: 2px solid #ced4da;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    background-color: #fff;
    transition: transform 0.2s, background-color 0.2s, border-color 0.2s;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wordle-tile.filled {
    border-color: #148579;
}

.wordle-tile.correct {
    background-color: #148579;
    border-color: #148579;
    color: #fff;
}

.wordle-tile.present {
    background-color: #E7AA25;
    border-color: #E7AA25;
    color: #fff;
}

.wordle-tile.absent {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.wordle-tile.shake {
    animation: shake 0.2s ease-in-out 0s 2;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}

.keyboard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}

.keyboard-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}

.keyboard-row:first-child .key {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.keyboard-row:nth-child(2) .key,
.keyboard-row:nth-child(3) .key {
    flex: 0 0 auto;
    min-width: 61px;
    width: 61px;
}

.keyboard-row .key {
    flex: 0 0 auto;
    min-width: 40px;
    width: 40px;
}

/* Ekran klavyesi: tuş genişlikleri JS ile hesaplanır (1. satır harf sayısına göre); harf boyutu orantılı */
#wordle-keyboard-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
#wordle-keyboard-container .keyboard {
    width: 100%;
    max-width: 100%;
    gap: 6px;
    box-sizing: border-box;
}
#wordle-keyboard-container .keyboard-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: nowrap;
    box-sizing: border-box;
}
/* Kelime tahmin ve adam asmaca klavyesi: harf yazı tipi aynı */
#wordle-keyboard-container .keyboard-row .key {
    flex: 0 0 auto;
    min-width: 0;
    width: var(--keyboard-key-width, 40px);
    min-width: var(--keyboard-key-width, 40px);
    max-width: var(--keyboard-key-width, 40px);
    height: 48px;
    padding: 6px 4px;
    font-size: clamp(9px, 2.2vw, 16px);
    font-family: inherit;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* .wide = 2 tuş + aralarındaki boşluk (ENTER, SİL), .extra-wide = 3 tuş + 2 boşluk (BOŞLUK) (JS container’da --keyboard-wide-width, --keyboard-extra-width atar) */
#wordle-keyboard-container .keyboard-row .key.wide {
    width: var(--keyboard-wide-width, 88px) !important;
    min-width: var(--keyboard-wide-width, 88px) !important;
    max-width: var(--keyboard-wide-width, 88px) !important;
}
#wordle-keyboard-container .keyboard-row .key.extra-wide {
    width: var(--keyboard-extra-width, 184px) !important;
    min-width: var(--keyboard-extra-width, 184px) !important;
    max-width: var(--keyboard-extra-width, 184px) !important;
}

/* Kontrol tuşlarındaki simgeler site rengi ile uyumlu */
#wordle-keyboard-container .keyboard-row .key.wide i,
#wordle-keyboard-container .keyboard-row .key.extra-wide i {
    color: #148579;
}
#wordle-keyboard-container .keyboard-row .key.wide:hover i,
#wordle-keyboard-container .keyboard-row .key.extra-wide:hover i {
    color: #0E5952;
}
#wordle-keyboard-container .keyboard-row .key.correct i,
#wordle-keyboard-container .keyboard-row .key.present i,
#wordle-keyboard-container .keyboard-row .key.absent i,
#wordle-keyboard-container .keyboard-row .key:disabled i,
#wordle-keyboard-container .keyboard-row .key.used-correct i,
#wordle-keyboard-container .keyboard-row .key.used-wrong i {
    color: inherit;
}

.key {
    border: none;
    border-radius: 6px;
    padding: 10px 6px;
    font-weight: 600;
    background-color: #e9ecef;
    color: #000;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.key:hover {
    background-color: #dfe3e6;
}

.key.wide {
    min-width: 88px;
    width: 88px;
}

.key.extra-wide {
    min-width: 184px;
    width: 184px;
}

.space-key {
    text-transform: uppercase;
}

.key.correct {
    background-color: #148579;
    color: #fff;
}

.key.present {
    background-color: #E7AA25;
    color: #fff;
}

.key.absent {
    background-color: #dc3545;
    color: #fff;
}

.key:disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.9;
}

/* Tebrikler kutusu – Hafıza Kartları ile aynı görünüm */
#wordle-win-message {
    background: linear-gradient(135deg, #148579 0%, #0E5952 100%) !important;
    border: none !important;
    border-radius: 12px;
    color: #fff !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
#wordle-win-message h3,
#wordle-win-message p,
#wordle-win-message strong {
    color: #fff !important;
}

/* Maalesef kaybettiniz kutusu – tebrikler ile aynı stil */
#wordle-lose-message {
    background: linear-gradient(135deg, #148579 0%, #0E5952 100%) !important;
    border: none !important;
    border-radius: 12px;
    color: #fff !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
#wordle-lose-message h3,
#wordle-lose-message p,
#wordle-lose-message strong {
    color: #fff !important;
}

#wordle-message .alert {
    margin-bottom: 0;
}

#wordle-message .alert-info {
    border-left: 4px solid #148579;
    background-color: #d1ecf1;
    border-color: #148579;
    color: #0c5460;
}

#wordle-message .alert-success {
    font-size: 1.25rem;
    font-weight: 700;
    border-left: 4px solid #148579;
    background-color: #d1ecf1;
    border-color: #148579;
    color: #0c5460;
}

#wordle-message .alert-danger {
    font-size: 1.25rem;
    font-weight: 700;
    border-left: 4px solid #148579;
    background-color: #d1ecf1;
    border-color: #148579;
    color: #0c5460;
    text-align: center;
}

.hint-section {
    margin-bottom: 2rem;
    margin-top: 1rem;
    text-align: center;
}

.hint-section .alert {
    border-left: 4px solid #148579;
    background-color: #d1ecf1;
    border-color: #148579;
    color: #0c5460;
    text-align: center;
}

/* Mobil: safe-area ve biraz daha kompakt boşluk */
@media (max-width: 767.98px) {
    #wordle-keyboard-container {
        padding-left: max(6px, env(safe-area-inset-left));
        padding-right: max(6px, env(safe-area-inset-right));
        overflow: hidden;
    }
    #wordle-keyboard-container .keyboard-row {
        gap: 3px;
    }
    #wordle-keyboard-container .keyboard-row .key {
        padding: clamp(3px, 1.2vw, 8px) 2px;
        font-size: clamp(9px, 2.5vw, 14px);
    }
}

@media (max-width: 576px) {
    .wordle-grid {
        width: 100%;
        max-width: 100%;
        column-gap: 5px !important;
        row-gap: 5px !important;
        box-sizing: border-box;
    }
    .wordle-tile {
        /* İçinde bulunduğu kutuda tek satıra sığacak şekilde JS ile boyutlanır */
        box-sizing: border-box;
    }
}

/* Kelime Tahmin Oyunu: Yeni Oyun / Oyun Ayarları / Ana Sayfa düğmeleri mobilde aynı satırda */
@media (max-width: 767.98px) {
    .game-action-buttons {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100%;
        min-width: 0;
        gap: 0.35rem;
    }
    .game-action-buttons .btn,
    .game-action-buttons .btn.btn-lg {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none;
        font-size: 0.9rem !important;
        padding: 0.5rem 0.25rem !important;
        white-space: nowrap;
    }
    .game-action-buttons .btn i {
        margin-right: 0.2rem !important;
    }
}

/* Kelime: ve Anlamı: etiket rengi - açık turuncu */
.wordle-label-light-orange {
    color: #e9a23b;
}