/*
  DÖRT (Wordle benzeri) – Yasak Kelime UI çizgisine uyarlanmış
*/

.dort-game{--gap:10px;--radius:14px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#222}
.dort-game *{box-sizing:border-box}

/* Kart/alan görünümü */
.dort-game .wrap{margin-bottom:10px}
.dort-game .area,.dort-game .game-area{position:relative;background:#fff;border:1px solid #e7e7e7;border-radius:var(--radius);padding:16px}

/* Başlangıç / bitiş içerikleri - base.css'den */

/* Butonlar */
.dort-game .dort-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 30px;font-size:16px;font-weight:700;cursor:pointer;transition:transform .15s ease,filter .15s ease,opacity .15s ease;user-select:none}
.dort-game .dort-btn:active{transform:scale(.98)}
.dort-game .dort-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* Hint/Help Container - Yan Yana */
.dort-game .wordle-actions{display:flex;justify-content:center;gap:15px;margin:20px 0;flex-wrap:wrap}
.dort-game .wordle-hint-btn,
.dort-game .wordle-help-btn,
.dort-game .wordle-joker-btn{padding:12px 25px;font-size:15px;border:0;border-radius:10px;color:#fff;cursor:pointer;font-weight:600;transition:all 0.3s;box-shadow:0 4px 6px rgba(0,0,0,0.1);display:inline-flex;align-items:center;gap:8px}
.dort-game .wordle-hint-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}
.dort-game .wordle-help-btn{background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%)}
.dort-game .wordle-joker-btn{background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%)}
.dort-game .wordle-hint-btn:hover,
.dort-game .wordle-help-btn:hover,
.dort-game .wordle-joker-btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,0.15)}
.dort-game .wordle-hint-btn:disabled,
.dort-game .wordle-help-btn:disabled,
.dort-game .wordle-joker-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.dort-game .wordle-joker-btn.used{background:linear-gradient(135deg,#9ca3af 0%,#6b7280 100%)}


/* Jokerle Açılmış Harf */
.dort-game .tile.revealed-joker{
    background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);
    border:2px solid #f59e0b;
    color:#92400e;
    animation:jokerReveal 0.5s ease;
    box-shadow:0 0 15px rgba(245,158,11,0.5);
}
@keyframes jokerReveal{
    0%{transform:rotateY(0deg);opacity:0}
    50%{transform:rotateY(90deg)}
    100%{transform:rotateY(0deg);opacity:1}
}

/* Next Level Button */
.dort-game .wordle-next-level-btn{padding:15px 40px;font-size:18px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:0;border-radius:12px;color:#fff;cursor:pointer;font-weight:700;margin-top:20px;transition:all 0.3s}
.dort-game .wordle-next-level-btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,0.15)}

/* Waiting Message */
.dort-game .waiting-message{text-align:center;margin-top:20px;padding:15px;background:#fff3cd;border:2px solid #ffc107;border-radius:10px;font-size:16px;font-weight:600;color:#856404}

/* Loading Overlay */
.dort-game .wordle-loading-overlay{display:none;position:absolute;inset:0;background:rgba(255,255,255,.95);z-index:999;align-items:center;justify-content:center;border-radius:var(--radius)}
.dort-game .wordle-loading-content{text-align:center}
.dort-game .wordle-loading-spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:dortSpin 1s linear infinite;margin:0 auto 15px}
.dort-game .wordle-loading-text{font-size:16px;font-weight:700;color:#667eea}
@keyframes dortSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* Wordle Board – dinamik genişlik */
.dort-game #game-board{
    display: grid;
    gap: 8px;
    margin: 25px auto 0;
    justify-content: center;
    align-content: center;
    width: 100%;
}

/* 4 harf için grid */
.dort-game.game-level-4 #game-board{
    max-width: 240px;
    grid-template-columns: repeat(4, 1fr);
}

/* 5 harf için grid */
.dort-game.game-level-5 #game-board{
    max-width: 300px;
    grid-template-columns: repeat(5, 1fr);
}

/* 6 harf için grid */
.dort-game.game-level-6 #game-board{
    max-width: 360px;
    grid-template-columns: repeat(6, 1fr);
}

/* Tile - Yasak Kelime letter-box stili */
.dort-game .tile{
    width:55px;
    height:55px;
    border:2px solid rgb(198 198 198 / 50%);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    font-weight:700;
    background:rgba(255,255,255,0.9);
    transition:all 0.3s ease;
    text-transform:uppercase;
    color:rgba(0,0,0,0.4);
}

.dort-game .tile.filled{
    background:rgb(58 58 58 / 15%);
    border-color:rgb(97 97 97 / 50%);
    color:#000;
    transform:scale(1.02);
}

/* Aktif harf - Yasak Kelime active stili */
.dort-game .tile.current-input{
    border-color:#ffc107;
    background:rgb(255 193 7 / 25%);
    animation:wordlePulse 1.5s infinite;
    box-shadow:0 0 15px rgba(255,193,7,0.4);
}

@keyframes wordlePulse{
    0%,100%{border-color:#ffc107;box-shadow:0 0 15px rgba(255,193,7,0.4)}
    50%{border-color:#fff;box-shadow:0 0 25px rgba(255,193,7,0.8)}
}

/* Doğru harf doğru yer - Yeşil */
.dort-game .tile.correct{
    background:#4ecdc4;
    border-color:#4ecdc4;
    color:#fff;
    transform:scale(1.05);
    box-shadow:0 0 15px rgba(78,205,196,0.5);
    animation:none;
}

/* Doğru harf yanlış yer - Sarı */
.dort-game .tile.present{
    background:#ffc107;
    border-color:#ffc107;
    color:#000;
    transform:scale(1.05);
    box-shadow:0 0 15px rgba(255,193,7,0.5);
    animation:none;
}

/* Yanlış harf - Gri */
.dort-game .tile.absent{
    background:#787c7e;
    border-color:#787c7e;
    color:#fff;
    animation:none;
}

/* Geçersiz kelime shake */
.dort-game .tile.invalid{
    background:#ff6b6b;
    border-color:#ff6b6b;
    color:#fff;
    animation:wordleShake 0.5s ease-in-out;
}

@keyframes wordleShake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-5px)}
    75%{transform:translateX(5px)}
}

/* İşlem sırasında board disabled görünümü */
.dort-game.processing #game-board{
    pointer-events:none;
    opacity:0.7;
}
.dort-game.processing .tile.current-input{
    animation:none;
    border-color:#ccc;
    box-shadow:none;
}

/* Mesaj Alanı - Sabit Yükseklik (Ekran Kayması Önlenir) */
.dort-game .wordle-info-area{
    margin:20px auto 15px;
    min-height:70px;
    max-width:400px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.dort-game .wordle-info-area:empty{
    visibility:hidden;
}

/* Info Box Tasarımı */
.dort-game .wordle-info-box{
    width:100%;
    padding:14px 18px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:14px;
    font-weight:600;
    text-align:center;
    animation:wordleInfoSlide 0.3s ease;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}
.dort-game .wordle-info-icon{
    font-size:18px;
    flex-shrink:0;
}
.dort-game .wordle-info-text{
    line-height:1.4;
}

/* Info - Mavi */
.dort-game .wordle-info-info{
    background:linear-gradient(135deg,#e0f2fe 0%,#bae6fd 100%);
    border:2px solid #3b82f6;
    color:#1e40af;
}
.dort-game .wordle-info-info .wordle-info-icon::before{content:'ℹ️'}

/* Success - Yeşil */
.dort-game .wordle-info-success{
    background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%);
    border:2px solid #10b981;
    color:#065f46;
}
.dort-game .wordle-info-success .wordle-info-icon::before{content:'✅'}

/* Warning - Sarı */
.dort-game .wordle-info-warning{
    background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);
    border:2px solid #f59e0b;
    color:#92400e;
}
.dort-game .wordle-info-warning .wordle-info-icon::before{content:'💡'}

/* Error - Kırmızı */
.dort-game .wordle-info-error{
    background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%);
    border:2px solid #ef4444;
    color:#991b1b;
}
.dort-game .wordle-info-error .wordle-info-icon::before{content:'❌'}

@keyframes wordleInfoSlide{
    from{opacity:0;transform:translateY(-10px) scale(0.95)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

/* Toast Mesajları (Ekran kaymadan) */
.wordle-toast{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%) translateY(-100px);
    padding:12px 24px;
    border-radius:12px;
    font-size:14px;
    font-weight:600;
    z-index:10000;
    box-shadow:0 4px 20px rgba(0,0,0,0.15);
    transition:transform 0.3s ease, opacity 0.3s ease;
    opacity:0;
}
.wordle-toast.show{
    transform:translateX(-50%) translateY(0);
    opacity:1;
}
.wordle-toast-warning{
    background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);
    border:2px solid #f59e0b;
    color:#92400e;
}
.wordle-toast-success{
    background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%);
    border:2px solid #10b981;
    color:#065f46;
}
.wordle-toast-error{
    background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%);
    border:2px solid #ef4444;
    color:#991b1b;
}

/* Word Info Box - Ekranın Altında (Yasak Kelime Stili) */
.dort-game .word-info-box {
    position: fixed;
    bottom: -300px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px 30px;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    transition: bottom 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.dort-game .word-info-box.show {
    bottom: 0;
}
.dort-game .word-info-close {
    position: absolute;
    top: 12px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 28px;
    font-weight: bold;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    padding: 0;
    line-height: 1;
}
.dort-game .word-info-close:hover {
    background: rgba(255, 255, 255, 0.35);
}
.dort-game .word-info-content {
    padding-right: 40px;
}
.dort-game .word-info-title {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 12px;
    text-transform: capitalize;
}
.dort-game .word-info-description {
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.95;
}

/* Responsive */
@media (max-width:500px){
    .dort-game #game-board{gap:6px;max-width:calc(100vw - 40px)}
    .dort-game .tile{width:45px;height:45px;font-size:20px;border-radius:8px}
    .dort-game .wordle-actions{gap:10px}
    .dort-game .wordle-hint-btn,
    .dort-game .wordle-help-btn,
    .dort-game .wordle-joker-btn{padding:10px 18px;font-size:14px}
    .dort-game .wordle-lives-container{padding:8px 12px}
    .dort-game .wordle-lives-label{font-size:12px}
    .dort-game .wordle-lives-hearts{font-size:16px}
}

@media (max-width:380px){
    .dort-game .tile{width:38px;height:38px;font-size:18px}
    .dort-game .wordle-hint-btn,
    .dort-game .wordle-help-btn,
    .dort-game .wordle-joker-btn{padding:8px 14px;font-size:13px}
}