/* ==========================================================================
   GAME SPECIFIC STYLES
   ========================================================================== */

/* GAME 1: Not Played */
.game-not-played-arena {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--content-md);
    margin: 0 auto;
    gap: 0.8rem;
    position: relative;
}

/* Zorluk butonu sağ üst köşede sabit — alt satırda tek başına kalan
   "Sıradaki Soru" belirdiğinde artık hiçbir butonu kaydırmıyor */
.np-difficulty-btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

@media (max-width: 768px) {
    .np-difficulty-label {
        display: none;
    }
}

/* Kompakt yatay oyuncu başlığı: foto solda, isim+soru sağda —
   2x2 logo ızgarası + butonlarla birlikte her şey tek ekrana sığsın diye */
.np-player-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    text-align: left;
    margin-bottom: 0;
}

.np-player-header img {
    width: 84px;
    height: 84px;
    margin-bottom: 0;
}

.np-player-header h3 {
    font-size: 1.3rem;
}

.np-player-meta p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.3rem;
}

.game-player-card {
    text-align: center;
    margin-bottom: 0.5rem;
}

.game-player-card img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 1.5px solid var(--border-glass);
    background-color: var(--bg-secondary);
    object-fit: cover;
    margin-bottom: 0.6rem;
}

.game-player-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
}

.options-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.option-btn {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    padding: 1rem 0.8rem;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.2px;
}

.option-btn:hover:not(:disabled) {
    background: var(--bg-glass-hover);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal);
}

.option-btn.correct {
    background: #94f6c8 !important;
    border-color: var(--border-glass) !important;
    color: #003824 !important;
    box-shadow: var(--shadow-sm) !important;
    transform: none !important;
}

.option-btn.wrong {
    background: #ffdad6 !important;
    border-color: var(--border-glass) !important;
    color: #93000a !important;
    box-shadow: var(--shadow-sm) !important;
    transform: none !important;
}

/* --- ŞIKLARI FUTBOLCU OLAN varyant (.is-player) --------------------------
   2026-08-08 kullanıcı isteği: şıkları futbolcu olan oyunlarda kart yapısı
   kalksın, isimler sayfaya gömülü gelsin. Kullananlar: Kariyer Tahmini
   (guess-career.js) ve Bayrak & Forma Hızlı Seçenek düellosu
   (nation-hunt-duel.js).

   Neden genel `.option-btn` düzleştirilmedi: aynı sınıfı Hangisinde Oynamadı
   da kullanıyor ama onun şıkları KULÜP (logo + ad, `.club-option-btn`) ve
   orada kart kabuğu logoyu taşıyan yüzey olarak duruyor.

   Yukarıdaki .correct/.wrong kuralları `!important` taşıdığı için buradaki
   ezmeler de `!important` olmak zorunda; özgüllük tek başına yetmez. */
.option-btn.is-player {
    background: none;
    border: none;
    border-bottom: 1px solid var(--surface-divider);
    border-radius: 0;
    box-shadow: none;
    /* Dikey dolgu korunur: dokunma hedefi küçülmesin. */
    padding: 0.85rem 0.6rem;
    text-align: left;
}

.option-btn.is-player:hover:not(:disabled) {
    background: var(--bg-glass);
    transform: none;
    box-shadow: none;
}

/* Çerçeve kalkınca odak halkası tek klavye işareti olur. */
.option-btn.is-player:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    background: var(--bg-glass);
}

/* Sabit pastel dolgular yerine metin rengi + alt çizgi + hafif ton. */
.option-btn.is-player.correct {
    background: color-mix(in srgb, var(--color-success) 10%, transparent) !important;
    border-bottom-color: var(--color-success) !important;
    color: var(--color-success) !important;
    box-shadow: none !important;
}

.option-btn.is-player.wrong {
    background: color-mix(in srgb, var(--color-danger) 10%, transparent) !important;
    border-bottom-color: var(--color-danger) !important;
    color: var(--color-danger) !important;
    box-shadow: none !important;
}

/* Geri bildirim ŞERİDİ — 14 oyun bunu paylaşır, o yüzden tek yerden ayarlanır.
   Eskiden 30px yarıçaplı, 0.95rem/1.5rem dolgulu kocaman bir HAP'tı: mobilde
   metin iki satıra taşıyor ve ~100px yer yiyordu (kullanıcı bulgusu 2026-08-07:
   "doğru/yanlış mesajları uzun ve büyük, ekranda yer açılsın"). Artık ince bir
   şerit — renk ve ikon zaten sinyali taşıyor, boyutun ayrıca bağırmasına gerek
   yok. Yeni bir oyun eklerken KENDİ geri bildirim kutusunu YAZMAYIN; bu sınıfı
   kullanın, yoksa oyunlar arasında yine üç farklı boy oluşur. */
.game-feedback {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    min-height: 0;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-sm);
    letter-spacing: 0.2px;
}

.game-feedback.success {
    color: #003824;
    background-color: #94f6c8;
    border: none;
}

.game-feedback.error {
    color: #93000a;
    background-color: #ffdad6;
    border: none;
}

/* Durum çipleri — "Doğru / Yakın / Yanlış" göstergeleri için TEK format
   (footle renk-kodu göstergesi + benzer etiketler). game-feedback ile aynı
   yeşil/kırmızı tonal paleti + FontAwesome ikonlar; eski inline-hex pill'lerin
   ve emoji/unicode (✓ ✗ ✅ ❌) işaretlerin yerini alır. */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}
.status-chip i {
    font-size: 0.8em;
}
.status-chip.correct { color: #003824; background-color: #94f6c8; }
.status-chip.partial { color: #5a3200; background-color: #ffdca8; }
.status-chip.wrong   { color: #93000a; background-color: #ffdad6; }

/* GAME 2: Career Path - PREMIUM REDESIGN */
.game-career-arena {
    display: flex;
    flex-direction: column;
    max-width: var(--content-md);
    margin: 0 auto;
    gap: 1.2rem;
    width: 100%;
}

.career-question-header {
    text-align: center;
}

.career-question-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}

.career-hint-pills {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
}

.career-hint-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.career-hint-pill i {
    font-size: 0.7rem;
    color: var(--color-primary);
}

.career-hint-pill span {
    color: var(--text-primary);
}

/* Timeline redesign */
.timeline {
    position: relative;
    padding: 0.5rem 0;
    margin-bottom: 0;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 0.4rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 185, 129, 0.2) transparent;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.02) 0%, transparent 100%);
    border-radius: var(--radius-sm);
    padding-left: 0.2rem;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 0.6rem;
    position: relative;
    animation: slideInItem 0.35s ease both;
}

@keyframes slideInItem {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding-top: 0.15rem;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-primary);
    border: 1px solid var(--border-glass);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.timeline-line {
    width: 2px;
    flex: 1;
    min-height: 20px;
    background: rgba(0, 108, 75, 0.35);
    margin-top: 3px;
}

.timeline-body {
    flex: 1;
    padding-bottom: 0.5rem;
}

.timeline-date {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.3rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.timeline-details {
    padding: 0.55rem 0.9rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    transition: var(--transition);
}

.timeline-details:hover {
    border-color: var(--color-primary);
    background: var(--bg-glass-hover);
}

.timeline-clubs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    flex-wrap: wrap;
    color: var(--text-primary);
    font-size: 0.83rem;
}

.timeline-clubs .from-club {
    color: var(--text-muted);
    font-weight: 500;
}

.timeline-clubs .arrow-icon {
    color: var(--color-primary);
    font-size: 0.7rem;
}

.timeline-clubs .to-club {
    color: var(--text-primary);
    font-weight: 700;
}

.timeline-fee {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

.timeline-fee.free {
    color: #005138;
    background: #94f6c8;
    border: none;
}

.timeline-fee.unknown {
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
}

.timeline-fee.paid {
    color: #92400e;
    background: #fde9c8;
    border: none;
}

/* GAME 2: Horizontal Career Chain */
.career-chain-wrapper {
    width: 100%;
    overflow-x: auto;
    padding: 0.8rem 0.2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 185, 129, 0.2) transparent;
}

.career-chain {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    /* No wrapping to multiple rows */
    gap: 0;
    justify-content: center;
    min-width: min-content;
}

/* Each club bubble */
.career-club-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    animation: fadeInChain 0.35s ease both;
    flex-shrink: 0;
}

@keyframes fadeInChain {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.career-club-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--color-primary);
    transition: var(--transition);
}

.career-club-icon img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.career-club-node:hover .career-club-icon {
    transform: scale(1.1);
}

.career-club-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    max-width: 90px;
    line-height: 1.25;
    word-break: break-word;
}

/* Connector between clubs */
.career-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
    padding: 0 0.15rem;
    animation: fadeInChain 0.35s ease both;
    margin-bottom: 1.45rem;
    /* Align with center of 52px club icons */
}

.connector-season {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.connector-arrow-line {
    display: flex;
    align-items: center;
    width: 48px;
}

.connector-line {
    flex: 1;
    height: 2px;
    background: rgba(0, 108, 75, 0.5);
}

.connector-caret {
    color: var(--color-primary);
    font-size: 0.85rem;
    margin-left: -2px;
}

.connector-fee {
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
    padding: 0.12rem 0.35rem;
    border-radius: 5px;
}

.connector-fee.free {
    color: #005138;
    background: #94f6c8;
    border: none;
}

.connector-fee.unknown {
    color: var(--text-muted);
    background: transparent;
    border: none;
}

.connector-fee.paid {
    color: #92400e;
    background: #fde9c8;
    border: none;
}

/* ==========================================================================
   OYUN ARENASI — BİRİNCİL AKSİYON SATIRI (.game-action-row)
   Arena mobilde 100dvh'a kilitli ve içerik #game-arena-content içinde kayıyor.
   Uzun ekranlarda ("Kariyerden Bilme"nin transfer zinciri + cevap kartı, "Epik
   Maçlar"ın golcü listesi) turu ilerleten buton görüş alanının altında kalıp
   kullanıcıya "buton hiç çıkmıyor" gibi görünüyordu. Mobilde bu satır kaydırma
   kabının altına yapışır, masaüstünde normal akışta durur.
   ========================================================================== */
.game-action-row {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    margin-top: 0.8rem;
}

@media (max-width: 768px) {
    .game-action-row {
        position: sticky;
        bottom: 0;
        z-index: 5;
        padding: 0.6rem 0 0.5rem;
        margin-top: 0.4rem;
        /* Altından kayıp giden içerik butonun arkasında okunmaz kalmasın */
        background: linear-gradient(to top,
            var(--bg-primary) 0%, var(--bg-primary) 65%, transparent 100%);
    }
    .game-action-row .primary-btn,
    .game-action-row .secondary-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Side-by-side Reveal Panel Layout */
.career-bottom-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.6rem;
}

.career-left-panel {
    flex: 1.3;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

.career-right-panel {
    flex: 0.7;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeInReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeInReveal {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.career-right-panel.hidden {
    display: none !important;
}

/* Mobilde iki panel yan yana durmuyordu: sol panel (şıklar + geri bildirim +
   "Sıradaki Soru") cevap kartının yanında ince bir sütuna sıkışıyor, buton da
   ekranın dışında kalabiliyordu. Alt alta diz. */
@media (max-width: 768px) {
    .career-bottom-layout {
        flex-direction: column;
        align-items: stretch;
    }
    .career-right-panel {
        width: 100%;
    }
}

/* ==========================================================================
   KARİYERDEN BİLME — MOBİL (2026-08-09, kullanıcı geri bildirimi)
   Üç şikâyet tek kök nedene bağlıydı: ekran dikeyde ve yatayda yetmiyordu.
   412px'lik bir telefonda sayfa oluğu (2rem x2) genişliğin %16'sını alıyor,
   80px'lik kulüp logoları + iki satırlık kulüp adları zincirin yüksekliğini
   ~170px'e çıkarıyor, geriye kalan yere şıklar + geri bildirim + açılan
   futbolcu kartı sığmıyordu: cevap kartı ekranın ALTINDA kalıyor ("oyuncu
   görüntüsü sayfa dışında"), yapışkan "Sıradaki Soru" satırı da onun üstünü
   örtüyordu. Burada yer açılıyor; kartın görünür alana kaydırılması ise
   guess-career.js:_renderCareerReveal içinde.
   ========================================================================== */
@media (max-width: 768px) {
    /* 1) Kenardan kenara: oluk yalnız bu oyunda kısılır (engine.js:edgeToEdge).
       Sıfırlamak yerine küçük bir pay bırakılıyor — şıklar ve buton ekranın
       tam kenarına yapışınca dokunma hedefi cihazın kenar hareketleriyle
       çakışıyor. */
    body.game-active.game-edge-to-edge .main-content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* 2) Zincir küçülür: logo 80 -> 52, ad tek satıra yakın, ok kısalır.
       Aynı ekrana ~2.5 kulüp yerine ~4 kulüp giriyor ve zincir 170px yerine
       ~110px yer kaplıyor. */
    .career-club-icon {
        width: 52px;
        height: 52px;
    }

    .career-club-name {
        font-size: 0.66rem;
        max-width: 66px;
        line-height: 1.2;
    }

    .career-club-node {
        gap: 0.25rem;
    }

    .connector-arrow-line {
        width: 30px;
    }

    .career-connector {
        margin-bottom: 1.1rem;
        padding: 0;
    }

    .connector-season,
    .connector-fee {
        font-size: 0.6rem;
    }

    .connector-fee {
        padding: 0.1rem 0.28rem;
    }

    .career-chain-wrapper {
        padding: 0.4rem 0;
    }

    .game-career-arena {
        gap: 0.8rem;
    }

    /* 3) Cevap kartı yan yana: 80px foto + altında ad iki satır tutuyordu,
       satır düzeninde tek satır. */
    .career-right-panel .game-player-card {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.7rem;
        text-align: left;
        margin-bottom: 0;
    }

    .career-right-panel .game-player-card img {
        width: 54px !important;
        height: 54px !important;
        border-width: 2px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }

    .career-right-panel .game-player-card h3 {
        font-size: 1.05rem !important;
        margin: 0;
    }

    /* 4) Yatay kayma yok: kart sağdan kayarak giriyordu (translateX 20px) ve
       animasyon süresince kabın dışına taşıp ekranı yana kaydırıyordu. */
    .career-right-panel {
        animation-name: fadeInRevealFlat;
    }

    /* 5) Yapışkan aksiyon satırının altında kalan son içerik erişilebilsin:
       satır kabın dibine yapıştığı için sona kadar kaydırıldığında cevap
       kartının üstünü kapatıyordu. */
    .game-career-arena .career-bottom-layout {
        padding-bottom: 3.2rem;
    }
}

@keyframes fadeInRevealFlat {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Zorluk / mod / giriş seçim ekranı.
   Genişlik artık --content-narrow token'ından gelir; tek tek oyunların satır
   içi `style="max-width:..."` ile bunu ezmesi kaldırıldı (bkz. nation-hunt.js
   "Sabit Seçim" kurulumu — geniş varyant için .is-wide kullanır). */
.difficulty-selector-container {
    width: 100%;
    max-width: var(--content-narrow);
    margin: 1.5rem auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 0.5rem;
    animation: fadeInUp 0.4s ease-out;
}

.difficulty-selector-container.is-wide {
    max-width: var(--content-md);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.difficulty-title-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.difficulty-title-icon {
    font-size: 1.8rem;
    color: var(--color-primary);
}

.difficulty-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    margin: 0;
}

.difficulty-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 0.4rem;
}

.difficulty-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.difficulty-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-brutal);
    border-radius: var(--radius-md);
    padding: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.difficulty-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.difficulty-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal-hover);
}

/* Easy Card Specifics */
.difficulty-card.easy:hover {
    border-color: var(--color-primary);
}

.difficulty-card.easy::before {
    background: radial-gradient(circle at 10% 50%, rgba(0, 108, 75, 0.08) 0%, transparent 60%);
}

.difficulty-card.easy:hover::before {
    opacity: 1;
}

/* Hard Card Specifics */
.difficulty-card.hard:hover {
    border-color: var(--color-danger);
}

.difficulty-card.hard::before {
    background: radial-gradient(circle at 10% 50%, rgba(186, 26, 26, 0.06) 0%, transparent 60%);
}

.difficulty-card.hard:hover::before {
    opacity: 1;
}

.difficulty-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    flex-shrink: 0;
    z-index: 1;
    color: var(--text-primary);
    transition: transform 0.3s ease;
}

.difficulty-card:hover .difficulty-card-icon {
    transform: scale(1.1);
}

.difficulty-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    z-index: 1;
}

.difficulty-card-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

.easy:hover .difficulty-card-name {
    color: var(--color-primary);
}

.hard:hover .difficulty-card-name {
    color: var(--color-danger);
}

.difficulty-card-desc {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
    margin: 0;
}

.arrow-indicator {
    color: var(--text-muted);
    font-size: 0.9rem;
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
    z-index: 1;
}

.difficulty-card:hover .arrow-indicator {
    opacity: 1;
    transform: translateX(3px);
}

.easy:hover .arrow-indicator {
    color: var(--color-primary);
}

.hard:hover .arrow-indicator {
    color: var(--color-danger);
}

/* GAME 3, 4, 5: Karşılaştırma — tur ekranının tüm stilleri games-shell.css
   içindeki .compare-stage/.compare-card bloğunda. Buradaki eski kart/vs-circle
   kuralları (2026-07-26) silindi: hiçbir JS onları üretmiyordu ama .compare-card
   adı yeni ekranla çakışıp kartlara zemin/kenarlık/220px genişlik veriyordu. */

/* GAME 6: Six Degrees (Connection) */
.game-six-degrees-arena {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.connection-ends {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    /* Compact gap */
    padding: 0.8rem 1rem;
    /* Compact padding */
    border-bottom: 1px solid var(--border-glass);
}

.connection-end-card {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.connection-end-card img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.connection-end-card .end-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-primary);
    font-weight: 700;
}

.connection-end-card h4 {
    font-size: 1.05rem;
}

.connection-arrow {
    font-size: 1.5rem;
    color: var(--text-muted);
}

.current-path-track {
    padding: 0.6rem;
    /* Compact padding */
    background: var(--surface-sunken, rgba(127, 127, 127, 0.07));
}

.current-path-track h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.path-node-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.path-node {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
}

.path-connector {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.teammates-selection-box {
    margin-top: 1rem;
}

.teammates-selection-box h3 {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
}

.teammates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.6rem;
    /* Compact gap */
}

.teammate-select-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    padding: 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.teammate-select-card:hover {
    border-color: var(--color-primary);
    background-color: var(--bg-glass-hover);
}

.teammate-select-card img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.teammate-select-card .tm-info {
    display: flex;
    flex-direction: column;
}

.teammate-select-card .tm-name {
    font-size: 0.85rem;
    font-weight: 600;
}

.teammate-select-card .tm-club {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* GAME 7: Footle (Wordle) — Transfermarkt WHO AM I? style */
/* gap 1.1rem -> 0.8rem: düello varyantıyla (.duel-round-arena) aynı ritim.
   Arama kutusu ile ilk tahmin bloğu arası ~188px'ti, bunun ~95px'i ölü
   boşluktu (iki rezerve min-height kutusu + zorladıkları ekstra gap'ler). */
.footle-arena {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
}

/* İpucu çipleri + geçici uyarı tek satırda; içerik yokken YER KAPLAMAZ. */
.footle-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    max-width: 600px;
}

.footle-meta-row:empty {
    display: none;
}

.footle-hints-area {
    display: contents;   /* çipler doğrudan meta-row'un flex akışına girsin */
}

.footle-feedback-text {
    color: var(--color-warning);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.footle-feedback-text:empty {
    display: none;
}

/* Başlık + kompakt durum (kalan hak kalbi + zorluk ikonu) */
.footle-topbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
}

.footle-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
}

.footle-status-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

/* Kalan hak: içinde sayı yazan kalp — oyunlar arası ortak bileşen
   (Footle + Kariyerden Bilme; Six Degrees kendi kalp-noktalarını kullanır). */
.lives-heart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    line-height: 1;
}

.lives-heart > i {
    font-size: 2.4rem;
    color: var(--color-danger);
    line-height: 1;
}

.lives-heart-num {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.95rem;
    color: #fff;
    pointer-events: none;
}

/* Zorluk: sadece ikon, duruma göre yeşil/turuncu/kırmızı (neon değil) */
.footle-diff-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    line-height: 1;
}

.footle-diff-easy { color: var(--color-primary); }
.footle-diff-medium { color: var(--color-warning); }
.footle-diff-hard { color: var(--color-danger); }

/* İpucu / Oyuncuyu Göster: sadece ikon + altında ceza; tam metin tooltip'te.
   Eski tam-genişlik iki satırlık butonların yerine kompakt kare butonlar. */
.footle-helper-row {
    display: flex;
    gap: 0.7rem;
    justify-content: center;
    width: 100%;
}

.footle-action-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    width: 58px;
    height: 58px;
    padding: 0;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.footle-action-btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    background: var(--bg-glass-hover);
    transform: translateY(-2px);
}

.footle-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Puanı yetmediği için kilitli: "tur bitti" kilidinden ayırt edilsin diye
   ücret etiketi kırmızıya döner (title'da kaç puan gerektiği yazıyor). */
.footle-action-btn.insufficient .footle-action-penalty {
    color: var(--color-danger);
    font-weight: 800;
}

.footle-action-btn > i {
    font-size: 1.3rem;
    line-height: 1;
}

.footle-action-btn.hint > i { color: var(--color-warning); }
.footle-action-btn.reveal > i { color: var(--color-danger); }

.footle-action-penalty {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted);
    line-height: 1;
}

.footle-search-box {
    width: 100%;
    max-width: 600px;
    position: relative;
}

.footle-search-box input {
    width: 100%;
    background-color: white;
    border: 1px solid var(--border-glass);
    border-radius: 50px;
    padding: 0.85rem 1.2rem 0.85rem 3rem;
    color: #333;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.footle-search-box input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 108, 75, 0.15);
}

.footle-search-box input::placeholder {
    color: #aaa;
}

.footle-search-box i {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 1rem;
}

/* Guess attempt block */
.footle-attempt-block {
    width: 100%;
    max-width: 720px;
    padding: 0.8rem 0.5rem 1rem;
    animation: slideInUp 0.3s ease;
    border-bottom: 1px solid var(--border-glass);
}

@keyframes slideInUp {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.footle-attempt-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.footle-attempt-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Row of tiles */
.footle-card-row {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Individual attribute tile */
.footle-card-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 88px;
    min-height: 88px;
    border-radius: 14px;
    border: 3px solid;
    padding: 0.5rem 0.3rem 0.4rem;
    position: relative;
    background: white;
    gap: 0.2rem;
}

.footle-card-tile.correct {
    border-color: #16a34a;
    background: #f0fdf4;
}

.footle-card-tile.partial {
    border-color: #ca8a04;
    background: #fefce8;
}

.footle-card-tile.wrong {
    border-color: #dc2626;
    background: #fff1f2;
}

/* Hint chips (revealed via the "İpucu Al" button) */
.footle-hint-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #fefce8;
    border: 2px solid #ca8a04;
    color: #92400e;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    animation: slideInUp 0.3s ease;
}

.footle-hint-chip i {
    color: #ca8a04;
}

/* Correct-answer block shown on the board after a loss or reveal */
.footle-answer-block {
    border: 2px solid #16a34a;
    background: rgba(22, 163, 74, 0.08);
}

/* Hint/reveal buttons grey out once the round is decided or hints run out */
#footle-helper-row button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Tile content */
.footle-tile-inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.footle-tile-inner img {
    max-width: 100%;
    max-height: 46px;
    object-fit: contain;
}

/* League logos: no forced dimensions — natural aspect ratio, only max caps so
   the logo can't overflow the tile. base.css's generic league-logo rule wraps
   them in a circular chip (border-radius:50% + background) which turns
   non-square logos into an oval, so it's cancelled here. */
.footle-tile-inner .tile-league {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.footle-tile-inner .tile-flag {
    width: 100%;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
}

.footle-tile-text {
    font-size: 1.15rem;
    font-weight: 900;
    color: #1e293b;
    text-align: center;
    line-height: 1.1;
}

.footle-tile-text.small {
    font-size: 0.85rem;
}

/* Mevki karesi: artık kısaltma değil, tam Türkçe mevki adı ("Merkez Orta Saha",
   "Ön Libero"). 88px'lik kutuya sığması için küçük punto + kelime kırılımı;
   satır sayısı değişse de kutu yüksekliği .footle-card-tile'ın min-height'ıyla
   sabit kalır, böylece satırdaki kareler aynı boyda durur. */
.footle-tile-text.footle-tile-pos {
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.footle-tile-mv {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footle-tile-mv .mv-euro {
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 700;
}

.footle-tile-mv .mv-val {
    font-size: 1.05rem;
    font-weight: 900;
    color: #1e293b;
    line-height: 1;
}

.footle-tile-mv .mv-unit {
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 700;
}

/* Arrow indicator — overlaid on the tile corner so it adds no height
   (in-flow arrows made wrong-guess rows taller than the winning row) */
.footle-tile-arrow {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.85rem;
    font-weight: 900;
    line-height: 1;
}

.footle-tile-arrow.up { color: #16a34a; }
.footle-tile-arrow.down { color: #dc2626; }

/* ==========================================================================
   GAME 10: BAYRAK & FORMA (NATION HUNT)
   Tek ekran kuralı: oyun, sabitlenmiş oyun görünümünün (body.game-active)
   tamamını doldurur; uzun sonuç içeriği en alttaki feedback alanında KENDİ
   içinde kayar, butonlar hiçbir zaman ekran dışına itilmez.
   ========================================================================== */
body.game-active #game-main-content.nh-fill {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

/* Arama dropdown'u (absolute konumlu) alt kenardan taştığında #game-arena-content
   overflow-y:auto olduğu için sağda scrollbar belirip tüm oyunu sola kaydırıyordu.
   Bu oyun zaten tek ekran: uzun içerik #nh-feedback-area içinde kayar, arena
   scroll'una hiç ihtiyaç yok — taşan dropdown kayma yaratmasın. */
body.game-active #game-arena-content:has(> .nh-fill) {
    overflow-y: hidden;
}

/* Aynı kayma sınıfı hatasının genel çözümü: absolute arama dropdown'u alt
   kenardan taşıp #game-arena-content'e dikey scrollbar belirtince, scrollbar
   genişliği ortalanmış arenayı yatayda kaydırıyordu (bkz. anagram önerileri).
   Gutter'ı iki kenarda sabit tut → scrollbar belirse de arena kaymaz, ortalı
   kalır. (footle-page-scroll modunda overflow:visible olduğu için etkisiz.) */
body.game-active #game-arena-content {
    scrollbar-gutter: stable both-edges;
}

.nh-arena {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    max-width: var(--content-md);
    margin: 0 auto;
    flex: 1;
    min-height: 0;
}

.nh-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    max-width: 640px;
}

.nh-top-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.nh-top-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.nh-small-btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Sabit Seçim (kolay mod) kurulum ekranı: Ülke/Takım sekmeleri + seçenek ızgarası */
.nh-setup-tabs {
    display: flex;
    gap: 0.6rem;
    width: 100%;
    max-width: 460px;
    margin: 0 auto 1rem;
}

.nh-setup-tab {
    flex: 1;
    padding: 0.6rem 0.8rem;
    background: var(--bg-glass);
    border: 2px solid var(--border-glass);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.nh-setup-tab:hover {
    background: var(--bg-glass-hover);
}

.nh-setup-tab.active {
    border-color: var(--border-ink);
    color: var(--text-primary);
    background: var(--bg-secondary);
}

/* Kurulum ekranı arama kutusu: ızgarayı yazdıkça daraltır */
.nh-setup-search {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto 1rem;
}

.nh-setup-search i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.nh-setup-search input {
    width: 100%;
    padding: 0.6rem 0.9rem 0.6rem 2.4rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-glass);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: var(--transition);
}

.nh-setup-search input:focus {
    outline: none;
    border-color: var(--border-ink);
}

.nh-option-empty {
    grid-column: 1 / -1;
    padding: 1.2rem;
    text-align: center;
    color: var(--text-muted);
    font-weight: 600;
}

.nh-option-grid {
    display: grid;
    /* SABİT 3 sütun (auto-fill değil): filtre/scrollbar değişince sütun sayısı
       oynayıp chip'ler sağa sola kaymasın. scrollbar-gutter + sabit yükseklik de
       scrollbar belirip kaybolunca genişliğin/kutunun değişmesini engeller. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: min-content;
    align-content: start;
    gap: 0.5rem;
    width: 100%;
    height: 44vh;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 0.25rem;
    scrollbar-width: thin;
}

@media (max-width: 560px) {
    .nh-option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.nh-option-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: var(--bg-glass);
    border: 2px solid var(--border-glass);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
    text-align: left;
    min-width: 0;
    transition: var(--transition);
}

.nh-option-chip:hover {
    border-color: var(--border-ink);
    background: var(--bg-glass-hover);
    transform: translate(-1px, -1px);
}

.nh-option-chip img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.nh-option-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nh-fixed-pill i {
    font-size: 0.7rem;
    margin-right: 0.2rem;
}

/* Sonuç alanı kalan dikey boşluğu alır ve içeriği uzayınca kendi içinde
   kayar — "Sıradaki Tur" satırı her zaman görünür kalır */
#nh-feedback-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
    max-width: 640px;
    scrollbar-width: thin;
}

/* Öneri listesi uzun olunca oyun alanının iç scroll yüksekliğini büyütüp
   sayfayı kaydırmasın: dropdown sınırlı yükseklikte, kendi içinde kayar */
.nh-arena .search-dropdown-menu {
    max-height: min(240px, 34vh);
    overflow-y: auto;
}

.nh-arena .search-result-item {
    padding: 0.45rem 0.6rem;
}

.nh-challenge-card {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 640px;
    padding: 1rem 0.9rem;
    border-bottom: 1px solid var(--border-glass);
}

.nh-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 0;
    text-align: center;
}

.nh-flag-img {
    height: 52px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    background: var(--logo-chip-bg);
}

.nh-crest-img {
    height: 52px;
    width: 52px;
    object-fit: contain;
}

.nh-side-value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-primary);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.nh-side-tag {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* Geri sayım "+" işaretinin yerinde akar; sabit genişlik sayesinde 3→2→1
   geçişinde yan bloklar hiç kımıldamaz (layout-shift kuralı) */
.nh-vs {
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--color-pink);
}

.nh-vs.counting {
    font-size: 2rem;
    color: var(--color-primary);
    animation: nh-pulse 1s ease infinite;
}

@keyframes nh-pulse {
    0% { transform: scale(1); opacity: 0.55; }
    50% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 0.55; }
}

.nh-answer-row {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    width: 100%;
    max-width: 640px;
}

.nh-answer-row .secondary-btn {
    white-space: nowrap;
    padding: 0.7rem 1.1rem;
}

.nh-guess-review,
.nh-examples {
    padding: 0.6rem 0.9rem;
    margin-top: 0.6rem;
    font-size: 0.88rem;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border-top: 1px solid var(--border-glass);
    padding-top: 0.6rem;
}

.nh-fact-label {
    font-weight: 800;
    font-family: var(--font-heading);
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    margin-right: 0.25rem;
}

.nh-mini-flag {
    height: 13px;
    width: auto;
    vertical-align: -1px;
    border: 1px solid var(--border-glass);
    border-radius: 2px;
}

@media (max-width: 560px) {
    .nh-challenge-card {
        gap: 0.4rem;
        padding: 0.8rem 0.5rem;
    }

    .nh-vs {
        flex-basis: 36px;
    }

    .nh-side-value {
        font-size: 0.9rem;
    }

    /* Dar ekranda ipucu metni yerine sadece zorluk rozeti + buton kalır */
    .nh-top-hint {
        display: none;
    }
}

/* Tile label at bottom */
.footle-tile-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    text-align: center;
    width: 100%;
}

/* Container scrollable */
.footle-guesses-container {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Column header row */
.footle-col-headers {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 0.5rem;
    max-width: 720px;
    width: 100%;
}

.footle-col-header {
    width: 88px;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}



/* GAME 8: Anagram */
.anagram-arena {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--content-narrow);
    margin: 0 auto;
    gap: 1rem;
}

/* Gövdedeki yedek çıkış (bkz. anagram.js): masaüstünde başlıktaki çıkış zaten
   göz önünde olduğu için gizli, mobilde klavye tuzağına karşı görünür.
   Artık yapışkan aksiyon satırının içinde — eskiden arenanın en dibindeydi ve
   turdan tura kaydırma konumuna göre ekran dışında kalabiliyordu. */
.anagram-exit-btn {
    display: none;
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
}

@media (max-width: 768px) {
    .anagram-exit-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }
}

/* İpucu şeridi: kulüp / mevki / ülke — üç ayrı çip. Öncesinde tek bir uzun
   pill-badge idi ve dar ekranda ortasından sararak dev, düzensiz bir blok
   oluşturuyordu. Etiket metni yerine görsel kullanılır (logo/ikon/bayrak). */
.anagram-hint-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.anagram-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    min-width: 0;
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--border-glass);
    border-radius: 999px;
    background: var(--bg-glass);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.anagram-hint i {
    color: var(--text-muted);
    font-size: 0.78rem;
    flex-shrink: 0;
}

.anagram-hint img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.anagram-hint-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Geri bildirim: tam genişlikte blok yerine içeriği kadar bir çip; boşken hiç
   yer kaplamaz (eskiden mesaj yokken bile 22px'lik boş kutu duruyordu). */
.anagram-arena #anagram-feedback,
.anagram-arena #duel-anagram-feedback {
    align-self: center;
    width: auto;
    max-width: 100%;
    min-height: 0;
    padding: 0.35rem 0.95rem;
    font-size: 0.85rem;
    line-height: 1.35;
}

.anagram-arena #anagram-feedback:empty,
.anagram-arena #duel-anagram-feedback:empty {
    display: none;
}

.scrambled-word-box {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    /* Compact font */
    font-weight: 800;
    letter-spacing: 4px;
    color: var(--color-primary);
    padding: 0.6rem 1.8rem;
    /* Compact padding */
    text-transform: uppercase;
    text-align: center;
}

.guess-form {
    width: 100%;
    display: flex;
    gap: 0.8rem;
}

.guess-form input {
    flex: 1;
    background-color: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 0.8rem 1.2rem;
    color: var(--text-primary);
    font-size: 1rem;
}

.guess-form input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/* Keep room for the magnifier icon when the input sits inside a search box */
.guess-form .footle-search-box input {
    padding-left: 2.8rem;
}

/* Compact reveal card so feedback + next button stay above the fold */
.anagram-arena .game-player-card img {
    width: 96px;
    height: 96px;
    margin-bottom: 0.4rem;
}

.anagram-arena .game-player-card h3 {
    font-size: 1.2rem;
}

/* GAME 9: Imposter */
.imposter-arena {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.imposter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
    width: 100%;
}

.imposter-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    padding: 1rem 0.8rem;
    /* Compact padding */
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.imposter-card:hover:not(.revealed) {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal);
    border-color: var(--color-primary);
}

.imposter-card img {
    width: 60px;
    /* Compact image */
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-glass);
    background-color: var(--bg-secondary);
}

.imposter-card h4 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    /* Compact font */
    margin-bottom: 0.2rem;
}

.imposter-card p {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.imposter-card.revealed.correct-choice {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: white;
}

.imposter-card.revealed.wrong-choice {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: white;
}

.imposter-card.revealed.not-chosen-imposter {
    border-color: var(--color-success);
    box-shadow: 0 0 10px var(--color-success-glow);
}

/* ==========================================================================
   GAME 6: Baglantiy Bul  Compact Layout
   ========================================================================== */

/* Header Bar */
.sd-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg-glass);
    border: 2px solid var(--border-ink);
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.sd-header-players {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}

.sd-player-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.sd-player-badge img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-ink);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.sd-player-badge span {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.sd-player-badge.start img {
    border-color: var(--color-primary);
}

.sd-player-badge.target img {
    border-color: var(--color-warning);
}

.sd-header-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.sd-stat-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.sd-stat-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sd-stat-value {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-primary);
}

/* Toolbar */
.sd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.sd-toolbar-left {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.sd-tool-btn {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-glass);
    background: var(--bg-glass);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.sd-tool-btn:hover:not(:disabled) {
    border-color: var(--border-ink);
    color: var(--text-primary);
}

.sd-tool-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Section Titles */
.sd-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.4rem 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Vertical Path Steps */
.sd-path-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

.sd-step-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid var(--border-glass);
    transition: background 0.15s ease;
}

.sd-step-row:last-child {
    border-bottom: none;
}

.sd-step-row.active {
    background: var(--color-primary-glow);
    border-left: 3px solid var(--color-primary);
}

.sd-step-row.locked {
    opacity: 0.5;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(128, 128, 128, 0.04) 8px,
        rgba(128, 128, 128, 0.04) 16px
    );
}

.sd-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--border-ink);
    color: var(--on-ink);
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sd-step-row.locked .sd-step-num {
    background: var(--text-muted);
}

.sd-step-row img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-glass);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.sd-step-row.locked img {
    filter: grayscale(1);
}

.sd-step-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-step-club {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-step-club img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    border: none;
    border-radius: 0;
    background: none;
}

/* Tags */
.sd-tag {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sd-tag.start {
    background: var(--color-primary-glow);
    color: var(--color-primary);
}

.sd-tag.target {
    background: var(--color-warning-glow);
    color: var(--color-warning);
}

/* Game Body Layout */
.sd-game-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.sd-game-body.with-teammates {
    grid-template-columns: 280px 1fr;
}

.sd-left-panel {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.sd-right-panel {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sd-teammates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Search Input */
.sd-search-input {
    width: 100%;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.8rem 0.45rem 2rem;
    font-size: 0.82rem;
    background: var(--bg-glass);
    color: var(--text-primary);
    transition: border-color 0.15s ease;
}

.sd-search-input:focus {
    border-color: var(--border-ink);
    outline: none;
}

.sd-search-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Result Banner */
.sd-result-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.sd-result-banner.win {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.sd-result-banner.loss {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
}

/* Responsive */
@media (max-width: 768px) {
    .sd-game-body.with-teammates {
        grid-template-columns: 1fr;
    }
    .sd-header-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* NOT: eski takım arkadaşı kart/filtre stilleri (.teammate-card-improved,
   .teammates-filter-btn) kaldırıldı — tek kişilik Bağlantıyı Bul artık .sd2-*
   yeniden tasarımını kullanıyor. Düello varyantı hâlâ yukarıdaki .sd-* ve
   .sd-step/.sd-tag sınıflarını kullandığı için o blok korunuyor. */

/* Dynamic Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.shake-on-error {
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.glow-win {
    animation: winGlow 1.5s infinite alternate;
}

@keyframes winGlow {
    from { box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }
    to { box-shadow: 0 0 25px rgba(16, 185, 129, 0.8); }
}

/* Attempt Dots */
.lives-heart-container {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.attempt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-ink);
    display: inline-block;
    transition: background 0.3s ease, opacity 0.3s ease;
    opacity: 0.35;
}

.attempt-dot.active {
    background: var(--color-primary);
    opacity: 1;
}

/* ==========================================================================
   FOOTLE DÜELLOSU (T2) — flat/neo-brutalist: solid colors, 1px borders,
   hover-lift + press interaction, no gradients or glow shadows (project
   convention: --shadow-* tokens are "none" by design, see base.css).
   ========================================================================== */

.duel-home {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: var(--content-md);
    margin: 0 auto;
}

.duel-field-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    margin: 0.9rem 0 0.5rem;
}

.duel-field-label:first-of-type {
    margin-top: 0;
}

.duel-field-label i {
    color: var(--color-primary);
}

.duel-difficulty-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.duel-diff-pick {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    border: 1.5px solid var(--border-glass);
    border-radius: var(--radius-md);
    background: var(--bg-glass);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    transition: var(--transition);
}

.duel-diff-pick i {
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: var(--transition);
}

.duel-diff-pick:hover {
    border-color: var(--color-primary);
    background: var(--bg-glass-hover);
}

.duel-diff-pick.active {
    border-color: var(--color-primary);
    background: var(--bg-secondary);
    color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.duel-diff-pick.active i {
    color: var(--color-primary);
}

/* Seçili modda kullanılamayan zorluk: buton yerinde ve aynı boyutta KALIR,
   yalnız solar ve tıklanamaz (kullanıcı geri bildirimi — mod değiştikçe buton
   sayısının/boyutunun değişmesi tutarsız duruyordu). */
.duel-diff-pick.is-off,
.duel-diff-pick:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

.duel-diff-pick.is-off:hover,
.duel-diff-pick:disabled:hover {
    border-color: var(--border-glass);
    background: var(--bg-glass);
}

.duel-feedback {
    min-height: 20px;
    font-size: 0.85rem;
    color: var(--color-danger);
    margin-top: 0.5rem;
}

.duel-feedback.success {
    color: var(--color-primary);
}

.duel-code-text {
    font-family: var(--font-heading, monospace);
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--color-primary);
    background: var(--bg-secondary);
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-glass);
}

/* Faz 2 — Tier/lig rozeti. Dolu renkli pill + beyaz metin: her iki temada da
   (açık/koyu) okunur, temaya bağımlı değil. Renk sınıfı tier anahtarından
   (.tier-<key>) gelir; eşikler backend config'te, ad/ikon DUEL_TIER_META'da. */
.duel-tier {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.16rem 0.55rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #fff;
    background: #64748b;
    white-space: nowrap;
}

.duel-tier i {
    color: #fff;
    font-size: 0.78rem;
}

.duel-tier.tier-bronz  { background: #9a6a3c; }
.duel-tier.tier-gumus  { background: #64748b; }
.duel-tier.tier-altin  { background: #a16207; }
.duel-tier.tier-platin { background: #0f766e; }
.duel-tier.tier-elmas  { background: #0e7490; }
.duel-tier.tier-efsane { background: #b91c1c; }

.duel-my-rank {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.3rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--surface-divider);
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.duel-my-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.duel-my-rating i {
    color: var(--color-primary);
}

/* Faz 4 — "Rakip Bul" otomatik eşleştirme */
.duel-quickmatch-btn {
    width: 100%;
    justify-content: center;
    font-size: 0.95rem;
    padding: 0.8rem;
    margin-top: 0.2rem;
}

.duel-quickmatch-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    margin: 0.4rem 0 0.2rem;
}

.mm-search-panel {
    padding: 1.8rem 1rem;
    max-width: 460px;
    margin: 0 auto;
}

.mm-search-stats {
    display: flex;
    gap: 1.4rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.mm-search-stats b {
    color: var(--text-primary);
}

.mm-search-stats i {
    color: var(--color-primary);
    margin-right: 0.2rem;
}

.duel-join-divider {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
    margin: 1.1rem 0 0.3rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.duel-join-divider::before,
.duel-join-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-glass);
}

.duel-join-code-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.duel-join-code-row input {
    flex: 1;
    min-width: 140px;
    background-color: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 0.7rem 1rem;
    font-family: var(--font-heading, inherit);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text-primary);
}

.duel-join-code-row input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.duel-invite-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.duel-invite-row input {
    flex: 1;
    min-width: 180px;
    background-color: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 0.7rem 1rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
}

.duel-invite-row input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.duel-match-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.duel-match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.8rem 1rem;
    transition: var(--transition);
    border-bottom: 1px solid var(--border-glass);
}

.duel-match-row:hover {
    border-color: var(--color-primary);
}

.duel-match-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.duel-match-opponent {
    font-weight: 700;
    color: var(--text-primary);
}

.duel-match-actions {
    display: flex;
    gap: 0.5rem;
}

.duel-round-arena {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    max-width: var(--content-md);
    margin-inline: auto;
}

/* Altı Derece düellosu zincir rayına ihtiyaç duyar — tek geniş istisna. */
.duel-round-arena.is-wide {
    max-width: var(--content-wide);
}

/* Her düello oyununda tur altındaki durum/geri bildirim şeridi. Genişlik
   eskiden her oyunun JS'inde satır içi yazılıydı (500/560/600/640px) ve
   düellodan düelloya kayıyordu; min-height layout-shift kuralı gereği sabit. */
.duel-status-area {
    min-height: 56px;
    width: 100%;
    max-width: var(--content-md);
    margin-inline: auto;
}

.duel-scoreboard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    width: 100%;
}

.duel-score-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 64px;
}

.duel-score-num {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1;
}

.duel-score-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 0.2rem;
}

.duel-score-vs {
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 0.35rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.duel-waiting-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
    padding: 1rem;
    width: 100%;
}

.duel-waiting-panel i {
    font-size: 1.3rem;
    color: var(--color-primary);
}

.duel-waiting-panel p {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.duel-result-arena {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

/* Sonuç ekranı: eskiden kart-içinde-kart-içinde-kart (arena kartı >
   .duel-result-arena > .glass-container) idi. Artık düz, ortalanmış bir sütun. */
.duel-result-panel {
    width: 100%;
    max-width: var(--content-narrow);
    margin-inline: auto;
    text-align: center;
}

.duel-round-summary-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
}

.duel-round-summary-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-glass);
}

.duel-round-summary-label {
    font-weight: 700;
    color: var(--text-muted);
}

.duel-round-summary-vs {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* T4: Compare Sprint duel — round ekranı artık TEK KİŞİLİK moddaki
   .compare-stage/.compare-card/.compare-choice bileşenlerini yeniden kullanıyor
   (kullanıcı: "karşılaştırma düellosu tekli oyun moduyla aynı değil").
   Eski .compare-duel-card/-pair/-question/-vs kuralları o yüzden silindi;
   burada yalnız düelloya özgü kapsayıcı kaldı. */
.compare-duel-arena .compare-stage {
    width: 100%;
}

/* ==========================================================================
   İMPOSTOR LOBİSİ (T7) — 4-6 kişilik sosyal-çıkarım grup oyunu.
   Mevcut design token'ları (--bg-glass/--border-glass/--color-*), flat/neo-
   brutalist dil (1px border + hover'da border-color/translate). Duel CSS'iyle
   aynı çizgide, gradyan/neon yok.
   ========================================================================== */

.imposter-lobby-home,
.imposter-lobby-room,
.imposter-lobby-play,
.imposter-lobby-result {
    max-width: var(--content-md);
    margin: 0 auto;
    padding: 0.5rem;
}

.il-intro h3,
.il-room-head h3 { font-family: var(--font-heading); margin-bottom: 0.4rem; }
.il-intro p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.2rem; }

.il-actions {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1rem;
}
.il-join-box { display: flex; gap: 0.5rem; }
.il-join-box input {
    flex: 1;
    padding: 0.6rem 0.8rem;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md, 8px);
    color: inherit;
}

.il-open-list h4 { margin: 1rem 0 0.5rem; font-family: var(--font-heading); }
.il-open-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-glass);
}

.il-room-head { display: flex; justify-content: space-between; align-items: center; }
.il-code-chip {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md, 8px);
    letter-spacing: 0.1em;
}
.il-member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.6rem;
    margin: 1rem 0;
}
.il-member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.8rem 0.5rem;
    border-bottom: 1px solid var(--border-glass);
}
.il-member-card.ready { border-color: var(--color-primary); }
.il-member-name { font-weight: 700; font-size: 0.9rem; }
.il-member-status { font-size: 0.75rem; color: var(--text-muted); }
.il-member-card.ready .il-member-status { color: var(--color-primary); }
.il-room-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; }

.il-role-banner {
    padding: 0.8rem 1rem;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border-glass);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.il-role-banner.impostor { border-color: var(--color-danger); }
.il-role-banner.crew { border-color: var(--color-primary); }

.il-secret-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-glass);
}
.il-secret-card img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.il-secret-label { font-size: 0.72rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; }
.il-secret-info h4 { font-family: var(--font-heading); margin: 0.2rem 0; }
.il-secret-info p { font-size: 0.85rem; color: var(--text-muted); }

.il-word-input { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.il-word-input input {
    flex: 1;
    min-width: 160px;
    padding: 0.6rem 0.8rem;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md, 8px);
    color: inherit;
}
.il-waiting {
    text-align: center;
    padding: 1rem;
    color: var(--text-muted);
}

.il-words-panel { margin-bottom: 1rem; }
.il-words-panel h4 { font-family: var(--font-heading); margin-bottom: 0.5rem; }
.il-word-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-glass);
}
.il-word-author { font-weight: 700; }
.il-word-text { color: var(--text-muted); }

.il-vote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.6rem;
}
.il-vote-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 0.5rem;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-glass);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
    color: inherit;
    font-weight: 700;
}
.il-vote-card:hover { border-color: var(--color-danger); transform: translateY(-2px); }

.il-result-banner {
    padding: 1rem;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border-glass);
    margin-bottom: 1rem;
}
.il-result-banner.crew-win { border-color: var(--color-primary); }
.il-result-banner.impostor-win { border-color: var(--color-danger); }
.il-reveal-note { margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-muted); }
.il-comp-guess {
    padding: 1rem;
    margin: 1rem 0;
}
.il-comp-guess h4 { font-family: var(--font-heading); margin-bottom: 0.4rem; }
.il-comp-search { position: relative; margin-top: 0.6rem; }
.il-comp-search input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md, 8px);
    color: inherit;
}
.il-scoreboard { margin-top: 1rem; }
.il-scoreboard h4 { font-family: var(--font-heading); margin-bottom: 0.5rem; }
.il-score-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-glass);
}
.il-score-row.me { border-color: var(--color-primary); }
.il-score-val { font-weight: 900; color: var(--color-primary); }

/* ==========================================================================
   GAME 11: EPİK MAÇLAR (EPIC MATCHES)
   Skor tahmini + golcü bonusu. Tek ekran akışı; buton konumları sabit kalır
   (proje layout-shift kuralı: feedback ayrı alt satırlarda belirir).
   ========================================================================== */
.epic-arena {
    max-width: var(--content-md);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.5rem 2rem;
}
.epic-top-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.epic-stage-pill i { color: var(--color-gold, #f59e0b); }

.epic-match-card {
    width: 100%;
    padding: 1.2rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--border-glass);
}
.epic-comp-line {
    font-size: 0.92rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-weight: 600;
}
.epic-date { white-space: nowrap; }
.epic-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.6rem;
}
.epic-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.epic-team-logo {
    width: 62px;
    height: 62px;
    object-fit: contain;
}
.epic-team-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.98rem;
    line-height: 1.15;
    word-break: break-word;
}
.epic-scoreline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2.1rem;
}
.epic-score-cell {
    min-width: 1.4ch;
    text-align: center;
    color: var(--text-muted);
    transition: color 0.25s ease;
}
.epic-score-cell.epic-revealed-correct { color: var(--color-success); }
.epic-score-cell.epic-revealed-wrong { color: var(--color-danger); }
.epic-score-sep { color: var(--text-muted); }
.epic-pso-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
    font-weight: 600;
}
.epic-stadium {
    margin-top: 0.8rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* --- Skor girişi (stepper) --- */
.epic-score-input {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.epic-input-hint {
    color: var(--text-muted);
    font-size: 0.92rem;
    text-align: center;
}
.epic-steppers {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.epic-stepper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.epic-step-btn {
    width: 52px;
    height: 40px;
    border: 1px solid var(--border-glass);
    background: var(--bg-glass);
    color: inherit;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.epic-step-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-glow, rgba(47,189,143,0.15));
}
.epic-step-value {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2rem;
    min-width: 1.4ch;
    text-align: center;
}
.epic-step-sep {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.8rem;
    color: var(--text-muted);
    align-self: center;
}

/* --- Skor sonucu + bonus istemi --- */
/* .epic-arena align-items:center — bu kutu genişliğini içeriğinden alıyordu;
   içindeki yapışkan aksiyon satırının satırı doldurabilmesi için %100 gerekir. */
#epic-result-area {
    width: 100%;
}

.epic-grade-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.epic-grade-points {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.1rem;
}
.epic-guess-recall {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}
.epic-bonus-prompt {
    width: 100%;
    margin-top: 1rem;
    padding: 1rem;
    text-align: center;
    font-size: 0.92rem;
}
.epic-bonus-prompt strong { color: var(--color-gold, #f59e0b); }
.epic-bonus-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}
.epic-next-row {
    display: flex;
    justify-content: center;
    margin-top: 1.1rem;
}

/* --- Golcü bonusu paneli --- */
.epic-bonus-panel {
    width: 100%;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-bottom: 2rem;
    position: relative;
}
.epic-bonus-title {
    font-family: var(--font-heading);
    font-weight: 800;
    text-align: center;
}
.epic-bonus-title i { color: var(--color-gold, #f59e0b); }
.epic-bonus-q {
    padding: 0.8rem;
    border-bottom: 1px solid var(--border-glass);
}
.epic-bonus-q-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
}
.epic-goal-minute {
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--color-primary);
    min-width: 2.5ch;
}
.epic-goal-club { color: var(--text-muted); font-weight: 600; }
.epic-goal-flag { color: var(--text-muted); font-size: 0.8rem; }
.epic-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
/* Golcü şıkları FUTBOLCU adı → çerçevesiz, sayfaya gömülü (2026-08-08).
   Buradaki tek durum `.selected` ve bu bir GÖNDERİM ÖNCESİ seçim: oyuncu
   "hangisini işaretledim"i kaybetmemeli. Kart çerçevesi yerine sol vurgu
   çizgisi + renk + kalınlık kullanılıyor — üçü birden taşıdığı için tek
   başına renge bağlı kalmıyor. */
.epic-option-btn {
    padding: 0.6rem 0.7rem;
    border: none;
    border-bottom: 1px solid var(--surface-divider);
    border-left: 2px solid transparent;
    background: transparent;
    color: inherit;
    border-radius: 0;
    cursor: pointer;
    font-size: 0.9rem;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.epic-option-btn:hover { background: var(--bg-glass); }
.epic-option-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
.epic-option-btn.selected {
    border-left-color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    font-weight: 700;
}
.epic-bonus-q.answered { border-color: var(--color-primary); }
.epic-bonus-submit-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.8rem;
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: var(--bg-secondary, #0f172a);
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}
/* "3/5 gol işaretlendi — 2 gol kaldı": Gönder butonu tek başınayken bir gol
   atlandığında sonsuza kadar pasif kalıp sebebini söylemiyordu. */
.epic-bonus-progress {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-muted);
}
.epic-bonus-progress.ready { color: var(--color-success); }

@media (max-width: 768px) {
    .epic-bonus-submit-row {
        padding: 0.6rem 0.8rem;
    }
    .epic-bonus-submit-row .epic-bonus-progress {
        flex: 1 0 100%;
        text-align: center;
    }
}

/* --- İnceleme (bonus sonucu / golcü listesi) --- */
.epic-review-title {
    font-family: var(--font-heading);
    font-weight: 800;
    text-align: center;
    margin: 0.8rem 0 0.4rem;
}
.epic-review-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.6rem;
}
.epic-review-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-glass);
}
.epic-review-row.away-goal {
    flex-direction: row-reverse;
}
/* İsim satırı tüm boşluğu doldursun ve attığı takımın tarafına yaslansın —
   aksi halde bir yanda büyük boşluk kalıp satır "bozuk" görünüyordu. */
.epic-review-names {
    flex: 1 1 auto;
    min-width: 0;
}
.epic-review-row.home-goal .epic-review-names { text-align: left; }
.epic-review-row.away-goal .epic-review-names { text-align: right; }
/* Hangi takımın attığı net olsun: ev sahibi sol, deplasman sağ renkli aksan
   (border-color'ı .ok/.no ezmesin diye inset gölge kullanılır). */
.epic-review-row.home-goal { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-primary) 60%, transparent); }
.epic-review-row.away-goal { box-shadow: inset -3px 0 0 color-mix(in srgb, var(--color-primary) 60%, transparent); }
.epic-review-row.ok { border-color: var(--color-success); }
.epic-review-row.no { border-color: var(--color-danger); }
.epic-review-minute {
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--color-primary);
    min-width: 2.5ch;
}
.epic-ok { color: var(--color-success); }
.epic-no { color: var(--color-danger); }
.epic-review-picked { color: var(--text-muted); font-size: 0.82rem; }

@media (max-width: 480px) {
    .epic-options { grid-template-columns: 1fr; }
    .epic-team-logo { width: 50px; height: 50px; }
    .epic-scoreline { font-size: 1.8rem; }
}

/* ==========================================================================
   "Yakında" (geçici kullanım dışı) oyun kartları — bkz. engine.js comingSoon.
   Kart görünür kalır ama soluk ve tıklanamaz; sağ üstte kilit rozeti.
   ========================================================================== */
.game-menu-card.coming-soon {
    cursor: default;
    /* Soluk görünüm: opacity'yi filter içine katıyoruz — kartların giriş
       animasyonu `opacity`yi 1'e çekip ayrı bir opacity kuralını ezerdi;
       filter opacity() animasyondan etkilenmez. */
    filter: grayscale(0.75) opacity(0.6);
    pointer-events: none;  /* onclick zaten yok; deep-link savunması engine.js'te */
}
.game-menu-card.coming-soon .play-action-btn {
    opacity: 0.7;
}
.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--color-gold, #f59e0b);
    background: color-mix(in srgb, var(--color-gold, #f59e0b) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-gold, #f59e0b) 40%, transparent);
}

/* ==========================================================================
   Raporlama modalı (soru raporu + kullanıcı raporu) — reports.js
   ========================================================================== */
.report-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 1rem;
}
.report-modal-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-brutal, 0 20px 50px rgba(0,0,0,0.25));
    padding: 1.4rem 1.3rem;
}
.report-modal-close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
}
.report-modal-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.2rem;
    margin: 0 0 0.3rem;
}
.report-modal-title i { color: var(--color-danger, #ef4444); margin-right: 0.35rem; }
.report-modal-sub {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0 0 1rem;
}
.report-reason-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}
.report-reason-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md, 10px);
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.report-reason-item:hover { border-color: var(--color-primary); }
.report-reason-item i { color: var(--text-muted); width: 1.1rem; text-align: center; }
.report-reason-item:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-glow, rgba(47,189,143,0.14));
}
.report-note {
    width: 100%;
    resize: vertical;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md, 10px);
    padding: 0.6rem 0.7rem;
    font-family: inherit;
    font-size: 0.88rem;
    background: var(--bg-glass);
    color: inherit;
}
.report-modal-feedback {
    min-height: 1.2rem;
    font-size: 0.85rem;
    margin: 0.5rem 0;
    font-weight: 600;
}
.report-modal-feedback.error { color: var(--color-danger, #ef4444); }
.report-modal-feedback.success { color: var(--color-success, #16a34a); }
.report-modal-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}
.game-report-btn i { color: var(--color-danger, #ef4444); }

/* ==========================================================================
   BAĞLANTIYI BUL (Altı Derece) — Yatay Zincir Rayı yeniden tasarımı (.sd2-*)
   ========================================================================== */
.sd2-arena {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: var(--content-wide);
    margin: 0 auto;
}

/* --- HERO: Yolculuk rayı --- */
.sd2-rail-card {
    padding: 0.7rem 0.85rem 0.85rem;
}
.sd2-rail-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
    padding: 0 0.2rem;
}
.sd2-rail-label {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.sd2-rail-label.start { color: var(--color-primary); }
.sd2-rail-label.target { color: var(--color-warning); }
.sd2-rail-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.2rem 0.1rem 0.4rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
}
.sd2-rail {
    display: inline-flex;
    align-items: flex-start;
    gap: 0;
    min-width: 100%;
    justify-content: center;
}

/* Ray düğümü (oyuncu halkası) */
.sd2-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 88px;
    flex-shrink: 0;
    text-align: center;
    padding-top: 0.2rem;
}
.sd2-node-badge {
    position: absolute;
    top: 0;
    left: calc(50% - 30px);
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--border-ink);
    color: var(--on-ink);
    font-size: 0.64rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: 2px solid var(--bg-primary, #fff);
}
.sd2-node-av {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border-glass);
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.sd2-node-av img { width: 100%; height: 100%; object-fit: cover; }
.sd2-node-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
    max-width: 88px;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sd2-node-tag {
    font-size: 0.56rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    background: var(--bg-glass);
    color: var(--text-muted);
}
.sd2-node.start .sd2-node-av { border-color: var(--color-primary); }
.sd2-node.start .sd2-node-tag { background: var(--color-primary-glow); color: var(--color-primary); }
.sd2-node.current .sd2-node-av { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-glow); }
.sd2-node.current .sd2-node-tag { background: var(--color-primary); color: #fff; }
.sd2-node.target .sd2-node-av { border-color: var(--color-warning); border-style: dashed; opacity: 0.9; }
.sd2-node.target .sd2-node-av img { filter: grayscale(0.5); }
.sd2-node.target .sd2-node-tag { background: var(--color-warning-glow); color: var(--color-warning); }
.sd2-node.reached .sd2-node-av { border-color: var(--color-success); border-style: solid; opacity: 1; }
.sd2-node.reached .sd2-node-av img { filter: none; }
.sd2-node.reached .sd2-node-tag { background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success); }

/* Bağlantı (iki düğüm arası): ortak kulüp logolu çizgi */
.sd2-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 62px;
    flex-shrink: 0;
    padding-top: 0.2rem;
}
.sd2-link-line {
    position: relative;
    width: 100%;
    height: 58px;
}
.sd2-link-line::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    right: 2px;
    height: 2px;
    transform: translateY(-50%);
    background: var(--color-primary);
    opacity: 0.55;
}
.sd2-link.pending .sd2-link-line::after {
    background: none;
    height: 0;
    border-top: 2px dashed var(--text-muted);
    opacity: 0.6;
}
.sd2-link-club {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    max-width: 62px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: -0.1rem;
}
.sd2-link-club img { width: 17px; height: 17px; object-fit: contain; flex-shrink: 0; }
.sd2-link.pending .sd2-link-club { color: var(--color-warning); font-size: 0.8rem; }

/* --- Kontrol şeridi --- */
.sd2-controlbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.sd2-stats { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.sd2-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
}
.sd2-stat-label { font-size: 0.66rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.sd2-stat-value { font-family: var(--font-heading); font-weight: 900; font-size: 0.95rem; color: var(--text-primary); }
.sd2-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.sd2-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-heading);
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.42rem 0.75rem;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--border-glass);
    background: var(--bg-glass);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}
.sd2-action:hover:not(:disabled) { border-color: var(--color-primary); color: var(--text-primary); }
.sd2-action:disabled { opacity: 0.4; cursor: not-allowed; }
.sd2-action em { font-style: normal; color: var(--color-danger); font-weight: 800; }

/* --- Seçim alanı --- */
.sd2-select { display: flex; flex-direction: column; gap: 0.6rem; }
.sd2-select-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.sd2-select-title { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-primary); }
.sd2-select-av { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 2px solid var(--color-primary); flex-shrink: 0; }
.sd2-select-av img { width: 100%; height: 100%; object-fit: cover; }
.sd2-search { position: relative; flex: 1; min-width: 230px; max-width: 380px; }
.sd2-search input {
    width: 100%;
    border: 1px solid var(--border-glass);
    border-radius: 999px;
    padding: 0.5rem 0.9rem 0.5rem 2.3rem;
    font-size: 0.85rem;
    background: var(--bg-glass);
    color: var(--text-primary);
    transition: border-color 0.15s ease;
}
.sd2-search input:focus { outline: none; border-color: var(--color-primary); }
.sd2-search-ic { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.85rem; }
.sd2-search .search-dropdown-menu { width: 100%; text-align: left; margin-top: 4px; max-height: 220px; overflow-y: auto; }

/* Arama kutusu + "Kontrol Et". Butonun görünür olması şart: öneri listesinden
   seçmek doğrulamanın kendisi ama mobilde bu hiç belli olmuyordu. */
.sd2-search-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 240px;
}
.sd2-verify-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
}

/* Rayın altındaki asıl aksiyon: "kurduğum zincir hedefe ulaştı mı?".
   Hedefi en sona elle eklemek tercihe bağlı olduğu için bu buton oyunun
   birincil kazanma yolu — tam genişlik ve rayla aynı kartın içinde. */
.sd2-chain-check {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.7rem;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
}
.sd2-chain-check em {
    font-style: normal;
    font-weight: 600;
    font-size: 0.72rem;
    opacity: 0.75;
}
.sd2-chain-check:disabled { opacity: 0.45; cursor: not-allowed; }

/* Mevki filtresi çipleri (Tümü/Kaleci/…) kaldırıldı — bar artık yalnızca
   "Listede filtrele" kutusunu taşıyor. */
.sd2-filter-bar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.sd2-tm-quick { position: relative; display: inline-flex; align-items: center; margin-left: auto; }
.sd2-tm-quick > i:first-child { position: absolute; left: 0.65rem; color: var(--text-muted); font-size: 0.72rem; pointer-events: none; }
.sd2-tm-quick input {
    border: 1px solid var(--border-glass);
    border-radius: 999px;
    padding: 0.32rem 1.6rem 0.32rem 1.8rem;
    font-size: 0.76rem;
    background: var(--bg-glass);
    color: var(--text-primary);
    width: 170px;
}
.sd2-tm-quick input:focus { outline: none; border-color: var(--color-primary); }
.sd2-tm-quick-clear { position: absolute; right: 0.6rem; cursor: pointer; color: var(--text-muted); font-size: 0.78rem; }

/* Takım arkadaşı ızgarası */
.sd2-teammates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 0.55rem;
    max-height: 46vh;
    overflow-y: auto;
    padding: 0.15rem;
    scrollbar-gutter: stable;
}
.sd2-tm-loading, .sd2-tm-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.sd2-tm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md, 12px);
    padding: 0.75rem 0.5rem 0.55rem;
    cursor: pointer;
    transition: var(--transition);
    font: inherit;
}
.sd2-tm-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-brutal-hover, 0 6px 16px rgba(0, 0, 0, 0.12));
}
.sd2-tm-pos {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 0.08rem 0.32rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.sd2-tm-av { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 2px solid var(--border-glass); background: var(--bg-secondary); }
.sd2-tm-av img { width: 100%; height: 100%; object-fit: cover; }
.sd2-tm-name {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-primary);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sd2-tm-club { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.68rem; color: var(--text-muted); max-width: 100%; }
.sd2-tm-club img { width: 13px; height: 13px; object-fit: contain; flex-shrink: 0; }
.sd2-tm-club span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd2-tm-shared { font-size: 0.62rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.25rem; }
.sd2-tm-shared i { color: var(--color-primary); }
.sd2-tm-add {
    margin-top: 0.1rem;
    font-size: 0.64rem;
    font-weight: 800;
    color: var(--color-primary);
    opacity: 0;
    transform: translateY(4px);
    transition: var(--transition);
}
.sd2-tm-card:hover .sd2-tm-add { opacity: 1; transform: none; }
.sd2-tm-pos.goalkeeper { background: #fee2e2; color: #ef4444; }
.sd2-tm-pos.defender { background: #dbeafe; color: #3b82f6; }
.sd2-tm-pos.midfield { background: #fef3c7; color: #d97706; }
.sd2-tm-pos.attack { background: #d1fae5; color: #10b981; }
.sd2-tm-pos.other { background: #f3f4f6; color: #6b7280; }

/* Zor mod ipucu */
.sd2-hard-hint {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
}
.sd2-hard-hint i { color: var(--color-primary); font-size: 1.2rem; margin-top: 0.1rem; flex-shrink: 0; }
.sd2-hard-hint p { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.4; }

/* --- Sonuç ekranı --- */
.sd2-result { display: flex; flex-direction: column; gap: 0.8rem; }
.sd2-result-banner {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
}
.sd2-result-banner i { font-size: 1.4rem; flex-shrink: 0; }
.sd2-result-banner.win { background: color-mix(in srgb, var(--color-success) 12%, transparent); border: 1px solid var(--color-success); color: var(--color-success); }
.sd2-result-banner.loss { background: color-mix(in srgb, var(--color-danger) 10%, transparent); border: 1px solid var(--color-danger); color: var(--color-danger); }
.sd2-solution { background: var(--bg-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 0.6rem 0.7rem; }
.sd2-solution-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-warning); margin: 0 0 0.4rem; display: flex; gap: 0.3rem; align-items: center; }
.sd2-next-row { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }

/* Geri bildirim satırı: tam genişlikte bir blok yerine içeriği kadar bir çip.
   "-10 puan" için ekran boyu pembe kutu gerekmiyordu ve o kutu tur sonunda
   "Sıradaki Tur" butonunu ekranın dışına itiyordu. Boşken hiç yer kaplamaz. */
.sd2-arena #six-degrees-feedback {
    align-self: center;
    width: auto;
    max-width: 100%;
    min-height: 0;
    padding: 0.35rem 0.95rem;
    font-size: 0.85rem;
    line-height: 1.35;
}
.sd2-arena #six-degrees-feedback:empty {
    display: none;
}

@media (max-width: 640px) {
    .sd2-select-head { flex-direction: column; align-items: stretch; }
    .sd2-search { max-width: none; }
    .sd2-teammates-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
    .sd2-tm-quick { margin-left: 0; width: 100%; }
    .sd2-tm-quick input { width: 100%; }
    .sd2-controlbar { justify-content: center; }
}

@media (max-width: 560px) {
    /* Arama kutusu + Kontrol Et yan yana sığmıyor: buton alt satırda tam genişlik */
    .sd2-search-row { flex-wrap: wrap; }
    .sd2-search-row .sd2-search { flex: 1 1 100%; min-width: 0; max-width: none; }
    .sd2-verify-btn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   DÜELLO ORTAK GERİ SAYIM ÇUBUĞU (.duel-timer-*)
   Bayrak & Forma "Hızlı Seçenek" modu kullanır: hazırlık (seçenek yok) ve cevap
   (seçenekler açık) aşamalarını tek çubukla gösterir.
   ========================================================================== */
.duel-timer-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    max-width: 560px;
}

.duel-timer-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    border-radius: 4px;
    overflow: hidden;
}

.duel-timer-fill {
    height: 100%;
    width: 100%;
    background: var(--color-primary);
    transition: width 1s linear;
}

/* Hazırlık aşaması: seçenekler henüz açılmadı — nötr renk, "düşünme" süresi */
.duel-timer-fill.prep {
    background: var(--text-muted);
}

.duel-timer-label {
    min-width: 1.6rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.duel-timer-phase {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Hazırlık aşamasında seçenek ızgarasının yerini tutan kutu: sayaç bitince
   ızgara aynı yere basılır, buton konumları oynamaz (layout-shift kuralı). */
.duel-options-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 560px;
    min-height: 132px;
    padding: 1rem;
    border: 1px dashed var(--border-glass);
    border-radius: var(--radius-md, 10px);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Devre dışı seçenek butonu (Hızlı Seçenek gönderiminden sonra) */
.option-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   AFK / TERK CEZASI (rapor §8) — lobi banner'ı, terk butonu, bitiş nedeni
   ========================================================================== */
.duel-penalty-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0.8rem 0;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--color-danger, #ef4444);
    border-radius: var(--radius-md, 10px);
    background: rgba(239, 68, 68, 0.08);
    font-size: 0.86rem;
    line-height: 1.4;
}
.duel-penalty-banner i {
    color: var(--color-danger, #ef4444);
    font-size: 1.1rem;
    margin-top: 0.1rem;
}
.duel-penalty-banner strong { display: block; margin-bottom: 0.2rem; }
.duel-penalty-banner span { color: var(--text-muted); }

/* Round ekranı üst şeridi: solda terk, sağda gecikme çipi — tek satır, düz
   (kart değil). Buton eskiden ekranın en altındaydı ve uzun uyarı metniyle
   birlikte oyun alanından yer çalıyordu; uyarı artık onay penceresinde. */
.duel-round-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    min-height: 30px;          /* çip gelmeden satır zıplamasın */
}

.duel-forfeit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.duel-forfeit-btn i { color: var(--color-danger, #ef4444); }

.duel-forfeit-btn:hover,
.duel-forfeit-btn:focus-visible {
    color: var(--color-danger, #ef4444);
    border-color: var(--color-danger, #ef4444);
    outline: none;
}

/* Çip satırın sağ ucunda kalsın (buton yokken de). */
.duel-latency-slot { margin-left: auto; }

.duel-end-reason {
    font-size: 0.86rem;
    color: var(--text-muted);
    margin: 0.4rem 0 0;
    font-weight: 600;
}
.duel-end-reason i { color: var(--color-info, #3b82f6); }

.duel-opponent-presence {
    font-size: 0.8rem;
    color: var(--color-warning, #f59e0b);
    font-weight: 600;
    margin: 0.3rem 0 0;
    min-height: 1rem;
}

/* --------------------------------------------------------------------------
   SENKRON BAŞLANGIÇ — "Rakip bekleniyor" paneli + 3-2-1 geri sayım
   (duel-common.js: renderDuelSyncWait / renderDuelStartCountdown)
   -------------------------------------------------------------------------- */
.duel-sync-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    text-align: center;
    width: 100%;
    max-width: var(--content-narrow);
    margin-inline: auto;
    padding: 2rem 1rem;
}

.duel-sync-icon {
    font-size: 2.2rem;
    color: var(--color-primary);
}

.duel-sync-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
}

.duel-sync-sub {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.duel-sync-timer {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0.2rem 0 0;
}

.duel-countdown-num {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary);
    margin-top: 0.4rem;
}

.duel-countdown-num.tick {
    animation: duelCountdownTick 0.45s ease-out;
}

@keyframes duelCountdownTick {
    0%   { transform: scale(1.5); opacity: 0.3; }
    100% { transform: scale(1);   opacity: 1; }
}

/* --------------------------------------------------------------------------
   TUR SONU ÖZETİ — gerçek raunt sonucu + cevabın kim olduğu
   (duel-common.js: renderDuelRoundSummary)
   -------------------------------------------------------------------------- */
.duel-summary-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
    width: 100%;
    max-width: var(--content-md);
    margin-inline: auto;
    padding: 1.2rem 0.5rem;
}

.duel-summary-round {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.duel-summary-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.duel-summary-answer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
}

.duel-summary-answer-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-primary);
}

.duel-summary-answer-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1.1rem;
    border-radius: var(--radius-md);
    background: var(--surface-sunken, rgba(127, 127, 127, 0.07));
}

.duel-summary-answer-card img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.duel-summary-answer-card h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
    text-align: left;
}

.duel-summary-answer-card p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.15rem 0 0;
    text-align: left;
}

/* Footle: tek kişilik moddaki "DOĞRU CEVAP" karo satırının aynısı — dar
   ekranda taşmasın diye kendi içinde yatay kayar. */
.duel-summary-tiles {
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
}

.duel-summary-stats {
    display: flex;
    gap: 0.6rem;
    width: 100%;
    max-width: 460px;
}

.duel-summary-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken, rgba(127, 127, 127, 0.07));
    min-width: 0;
}

.duel-summary-stat-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.duel-summary-stat-val {
    font-size: 0.88rem;
    font-weight: 700;
}

.duel-summary-next {
    margin-top: 0.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.duel-summary-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.78rem;
    font-weight: 800;
}

.duel-summary-hint {
    margin: 0.45rem 0 0;
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* Admin > Terk & Ceza tablosu */
.admin-abandon-reason {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
}
.admin-penalty-active {
    color: var(--color-danger, #ef4444);
    font-weight: 700;
}

/* ==========================================================================
   DÜELLO LOBİSİ — sekmeli giriş (2026-07-26)
   Rakip Bul / Davet Et / Kod eskiden tek sayfada alt alta duruyordu; artık aynı
   anda yalnız biri görünür. Dördüncü yol olan açık meydan okuma havuzu
   2026-07-27'de tamamen kaldırıldı (rastgele rakip = Rakip Bul kuyruğu).
   ========================================================================== */
.duel-tabs {
    display: flex;
    gap: 0.3rem;
    margin: 0.9rem 0 0.9rem;
    padding: 0.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
}

.duel-tab {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.4rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.duel-tab:hover {
    color: var(--text-primary);
}

.duel-tab.active {
    background: var(--color-primary);
    color: #fff;
}

.duel-tab-panel {
    animation: fadeIn 0.25s ease;
}

.duel-panel-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0.1rem 0 0.5rem;
}

.duel-block-btn {
    width: 100%;
    justify-content: center;
}

/* Aktif davet kodu kartı (Davet Kodu sekmesi) */
.duel-code-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 0.8rem;
    text-align: center;
}

.duel-code-card-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.duel-code-text.is-big {
    font-size: 1.5rem;
    letter-spacing: 5px;
    padding: 0.35rem 0.9rem;
}

.duel-code-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
}

.duel-code-actions button {
    flex: 1 1 auto;
    min-width: 140px;
    justify-content: center;
}

.duel-code-hint {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-muted);
    max-width: 380px;
}

@media (max-width: 420px) {
    /* Etiketler HER ZAMAN görünür (ikonu tek başına bırakmak sekmeyi bilmeceye
       çevirmişti); dar ekranda bunun yerine ikon gizlenir. */
    .duel-tab i {
        display: none;
    }

    .duel-tab {
        font-size: 0.78rem;
        padding: 0.5rem 0.25rem;
    }
}

/* Kuyruk ekranı: "Rakip Bul" bir KUYRUKTUR — ekranda ne beklendiğini anlatan
   kısa bir not durur (kullanıcı "ilanım kimseye düşmüyor" sanıyordu). */
.mm-search-note {
    margin: 1rem auto 0;
    max-width: 340px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.mm-search-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.mm-search-actions button {
    width: 100%;
    justify-content: center;
}

/* ==========================================================================
   "MAÇA GİR" BANDI (2026-07-27)
   Davet/kod gönderen oyuncu rakip katıldığında normalde doğrudan maça alınır
   (duel-common.js:enterStartedDuel). Bu şerit yalnızca otomatik girişin doğru
   olmadığı iki durumda çıkar: başka bir oyunun ortasındayken ve sayfayı yeni
   açtığında. body'ye eklenir, bu yüzden her ekranın üstünde durur.
   ========================================================================== */
.duel-start-banner {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 2000;
    width: min(520px, calc(100vw - 1.6rem));
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    background: var(--bg-secondary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    animation: duel-banner-in 0.25s ease-out;
}

@keyframes duel-banner-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.duel-start-banner-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-glass);
    color: var(--color-primary);
}

.duel-start-banner-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.duel-start-banner-text b {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: var(--text-primary);
}

.duel-start-banner-text small {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.duel-start-banner-go {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
}

.duel-start-banner-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.duel-start-banner-close:hover {
    background: var(--bg-glass);
    color: var(--text-primary);
}

@media (max-width: 480px) {
    /* Dar ekranda buton alt satıra iner; metin kırpılmasın diye ızgara. */
    .duel-start-banner {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .duel-start-banner-text { flex: 1 1 60%; }

    .duel-start-banner-go {
        order: 3;
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   GECİKME (ms) GÖSTERGESİ — düello tur ekranı + Ayarlar > Bağlantı
   Değer, düellonun zaten attığı /state isteklerinden geliyor (js/latency.js);
   çip için ayrıca ping atılmıyor.
   ========================================================================== */
.latency-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border-glass);
    background: var(--bg-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

.latency-chip i { font-size: 0.7rem; }

.latency-chip.level-good { color: #22c55e; }
.latency-chip.level-ok   { color: var(--color-warning); }
.latency-chip.level-bad  { color: #ef4444; }

/* (Çipin yerleşimi .duel-round-topbar'da — yukarı, terk butonuyla aynı satıra alındı.) */

/* Ayarlar > Bağlantı */
.latency-test {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

.latency-test-result {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-md);
    background: var(--bg-glass);
    min-width: 220px;
}

.latency-test-value {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}

.latency-test-value small {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.latency-test-result.level-good .latency-test-value { color: #22c55e; }
.latency-test-result.level-ok   .latency-test-value { color: var(--color-warning); }
.latency-test-result.level-bad  .latency-test-value { color: #ef4444; }

.latency-test-label {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.latency-test-note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 520px;
}

/* ==========================================================================
   DÜELLO LOBİSİ — LİG/KATEGORİ IZGARASI (Karşılaştırma)
   Tek kişilik moddaki .league-select-grid/.league-select-card bileşeninin
   aynısı; buraya yalnız "seçili" durumu ve düello lobisine özgü ölçüler eklenir.
   Eskiden kategoriler .pill-badge + .duel-diff-pick çift sınıfıyla çiziliyordu
   ve iki bileşenin kuralları çakışınca butonlar farklı yüksekliklerde/düzensiz
   sıralarda görünüyordu (kullanıcı bulgusu).
   ========================================================================== */
.duel-league-grid {
    /* Masaüstünde dört sütun sığar; mobilde alttaki kırılım ikiye düşürür. */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-top: 0.15rem;
}

.duel-league-grid .league-select-card {
    /* Buton olarak kullanılıyor: tarayıcının varsayılan buton tipografisi
       .league-select-name'i ezmesin. */
    font-family: inherit;
    text-align: left;
}

.league-select-card.is-selected {
    border-color: var(--color-primary);
    background: var(--bg-secondary);
    box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.league-select-card.is-selected .league-select-name {
    color: var(--color-primary);
}

@media (max-width: 560px) {
    .duel-league-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }
    .duel-league-grid .league-select-card {
        padding: 0.5rem 0.55rem;
        gap: 0.45rem;
    }
    .duel-league-grid .league-select-card .league-icon-circle {
        width: 24px;
        height: 24px;
        font-size: 0.85rem;
    }
    .duel-league-grid .league-select-card .league-select-name {
        font-size: 0.75rem;
    }
}

/* Düello sonuç ekranı aksiyonları: tek birincil buton (Rövanş) tam genişlikte,
   ikincil ikisi yan yana ve içerik genişliğinde. Üçü de width:100% olduğunda
   ekranın altı gereğinden fazla büyüyordu (kullanıcı bulgusu). */
.duel-rematch-btn {
    width: 100%;
    margin-top: 1.2rem;
    justify-content: center;
}

.duel-result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.duel-result-actions .secondary-btn {
    flex: 0 1 auto;
    padding: 0.45rem 0.95rem;
    font-size: 0.82rem;
}

.duel-report-btn i {
    color: var(--color-danger);
}

/* Round ekranındaki "Lobiye Dön" — terk butonuyla karıştırılmasın diye
   ikincil ve dar; asıl çıkış (cezalı) .duel-forfeit-btn. */
.duel-leave-btn {
    margin-top: 0.4rem;
    align-self: center;
    padding: 0.45rem 1rem;
    font-size: 0.82rem;
}

/* ==========================================================================
   TAKIM TAHMİNİ (guess-team) — sahadaki 11 bayraktan takımı bul
   Saha zemini static/img/pitch.png (kullanıcının İmg/Saha.png'si); oyuncular
   sunucudan gelen yüzde konumlara (FORMATION_433) mutlak yerleşir, ayrı bir
   koordinat tablosu frontend'de TUTULMAZ (diziliş değişirse tek yerden).
   Bayrakların altına çerçeve/plaka KONMAZ (proje kuralı: uyruk çerçevelenmez);
   çim üzerinde okunurluğu hafif bir gölge sağlar.
   ========================================================================== */
.gt-arena {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: 100%;
    /* Sahanın içindeki ölçüler buna göre hesaplanır (bkz. .gt-pitch font-size) */
    container-type: inline-size;
}

.gt-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.gt-question {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
}

.gt-lives { display: inline-flex; gap: 0.25rem; }

.gt-life { color: var(--color-danger); font-size: 1rem; }
.gt-life.is-lost { color: var(--text-muted); opacity: 0.35; }

/* --- Saha --- */
/* Saha YÜKSEKLİK sürücülüdür, genişlik değil: oyun arenası sabit yükseklikli
   (body.game-active, ~520px) ve cevap butonları sahanın ALTINDA duruyor.
   `max-width: 420px` verildiğinde saha 618px oluyor ve butonlar ekran dışına
   düşüyordu — oyunun asıl eylemi görünmez oluyordu.
   İçerideki her şey `em` ile ölçülür (font-size sahanın kendisinde): saha
   küçülünce bayrak ve etiket birlikte küçülür, yerleşim bozulmaz. */
/* YATAY saha: çizgiler artık CSS ile çizilmiyor, İmg/Saha.png (800x500)
   kullanılıyor (static/img/pitch.png). Oran görselin kendi oranı (1.6) —
   slot yüzdeleri doğrudan görselin üzerine oturur. Ekrana sığması için
   yükseklik de sınırlı: arena sabit yükseklikli, cevap alanı altta kalmalı. */
.gt-pitch {
    position: relative;
    flex: 0 1 auto;
    width: min(100%, 620px);
    max-height: 46vh;
    aspect-ratio: 800 / 500;
    margin: 0 auto;
    font-size: clamp(8px, 1.15vw, 14px);
    /* Bayrak/etiket ölçüsü SAHANIN gerçek genişliğine bağlanır (viewport'a
       değil): düelloda saha dar bir sütunda duruyordu ve vw'ye bağlı ölçü orada
       bayrakları üst üste bindiriyordu. Kapsayıcı `.gt-arena`; cqw
       desteklemeyen tarayıcı yukarıdaki vw satırında kalır. */
    font-size: clamp(8px, 3.6cqw, 14px);
    border-radius: var(--radius-md);
    background: url('/static/img/pitch.png') center / 100% 100% no-repeat;
    overflow: hidden;
}

.gt-slot {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
    width: 3.4em;
    text-align: center;
}

.gt-flag img {
    width: 3.2em;
    height: 2.2em;
    object-fit: cover;
    border-radius: 2px;
    /* Çerçeve değil, yalnız zeminden ayıran yumuşak gölge */
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

/* Bayrağı yüklenemeyen ülke için boş bir yer tutucu — slot kaybolmasın */
.gt-flag.is-blank::after {
    content: '?';
    display: inline-block;
    width: 3.2em;
    height: 2.2em;
    line-height: 2.2em;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-weight: 800;
    font-size: 0.9em;
}

/* Görsel olarak gizli ama erişilebilir (ekran okuyucu mevkiyi okur). */
.gt-slot-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Tur bitince isimler açılır: slot dar olduğu için isim taşar, bu yüzden
   ortalanmış ve üstte (z-index) — komşu bayrağın altında kalmasın. */
.gt-slot-name {
    position: relative;
    z-index: 2;
    font-size: 0.85em;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.6);
    width: 7.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- İpucu (üst çubukta; ayrı bir satır saha yüksekliğinden çalıyordu) --- */
.gt-topbar-right {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.gt-hint-row {
    display: inline-flex;
    align-items: center;
    min-height: 30px;          /* ipucu açılınca üst çubuk zıplamasın */
}

.gt-hint-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.gt-hint-btn:hover:not(:disabled) { color: var(--color-warning); border-color: var(--color-warning); }
.gt-hint-btn:disabled { opacity: 0.5; cursor: default; }

.gt-hint-shown {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.gt-hint-shown img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }
.gt-hint-shown small { color: var(--text-muted); font-size: 0.72rem; }

/* --- Cevap: kolay modda 4 logo, diğerlerinde arama --- */
/* Tek satırda 4 seçenek: 2x2 ızgara sabit yükseklikli arenada sahadan ~55px
   çalıyordu. Dar ekranda (aşağıdaki media) 2x2'ye döner. */
.gt-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

/* Çerçevesiz: doğrudan logo + ad. Kart kabuğu (border/shadow) kaldırıldı,
   geri bildirim hover'da HAFİF büyüme (scale) ile veriliyor. */
.gt-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.4rem;
    border: none;
    background: none;
    box-shadow: none;
    font-family: inherit;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.16s ease, opacity 0.16s ease;
}

.gt-option img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }

.gt-option span {
    width: 100%;
    font-size: 0.8rem;
    line-height: 1.15;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gt-option:hover:not(:disabled),
.gt-option:focus-visible:not(:disabled) {
    transform: scale(1.08);
    outline: none;
}

.gt-option:active:not(:disabled) { transform: scale(0.98); }

/* Yanlış seçenek soluklaşır, doğru olan yeşile döner — çerçeve yok. */
.gt-option:disabled { cursor: default; }
.gt-option.is-wrong { opacity: 0.35; }
.gt-option.is-correct { color: var(--color-success); transform: scale(1.06); }

/* Arama: sahanın altında, ORTALI ve dar. Eskiden ortak `.search-input-wrapper`
   kullanılıyordu — o bileşen navbar genişliği için tasarlanmış, oyun ekranında
   devasa duruyordu. */
.gt-search {
    position: relative;
    width: min(100%, 340px);
    margin: 0 auto;
}

.gt-search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border-glass);
    border-radius: 22px;
    background: var(--bg-glass);
    transition: var(--transition);
}

.gt-search-box:focus-within { border-color: var(--color-primary); }

.gt-search-box i { color: var(--text-muted); font-size: 0.85rem; }

.gt-search-box input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.88rem;
}

/* Ortak dropdown yuvarlak+cover foto için tasarlanmış; kulüp arması kırpılmamalı
   ve çerçevelenmemeli (proje kuralı). */
.gt-search .search-dropdown-menu { width: 100%; right: auto; left: 0; max-height: 260px; }
.gt-search .search-dropdown-item img {
    width: 28px; height: 28px;
    border-radius: 0;
    object-fit: contain;
    background: none;
}

.search-dropdown-empty {
    padding: 0.7rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* --- Sonuç --- */
/* min-height YOK: geri bildirim seçeneklerin ALTINDA doğuyor, yani büyümesi
   butonları oynatmıyor (düzen-kayması kuralı korunuyor) — boş yere ayrılan
   40px ise sabit yükseklikli arenada sahadan çalıyordu. */
.gt-feedback:empty { display: none; }

.gt-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.8rem 0.9rem;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.gt-result-head {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.gt-result.is-correct .gt-result-head { color: var(--color-success); }
.gt-result.is-wrong .gt-result-head { color: var(--color-danger); }

.gt-result-club { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.gt-result-club img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.gt-result-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.gt-result-text strong { font-family: var(--font-heading); font-size: 1.05rem; }
.gt-result-league { font-size: 0.78rem; color: var(--text-muted); }
/* Puan dökümü: başlıktaki net sayının altında, ondan sönük — asıl okunacak
   şey kazanılan/kaybedilen toplam, döküm yalnız "neden" sorusunun cevabı. */
.gt-result-breakdown { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.gt-next-btn { flex-shrink: 0; }

@media (max-width: 620px) {
    /* Dar ekranda yatay saha tüm genişliği alır; ölçüler `em` üzerinden
       kendiliğinden küçülür (font-size sahanın genişliğine bağlı). */
    .gt-pitch {
        width: 100%;
        max-height: 40vh;
        font-size: clamp(7px, 2.4vw, 12px);      /* cqw yoksa geri düşüş */
        font-size: clamp(8px, 3.6cqw, 13px);
    }
    .gt-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gt-option span { font-size: 0.74rem; }
    .gt-question { font-size: 1rem; }
    .gt-hint-btn { font-size: 0.74rem; padding: 0.35rem 0.6rem; }
}

/* --- Takım Tahmini düellosu --- */

/* `.duel-round-arena` içeriğini ORTALIYOR (align-items: center), bu yüzden
   araya giren `#gt-duel-body` içeriği kadar daralıyor ve saha ekranın ancak
   yarısı kadar kalıyordu — bayraklar üst üste biniyordu (kullanıcı bulgusu).
   Sütunun tamamını kaplasın; saha ölçüleri zaten kendi genişliğinden türüyor. */
.gt-duel-arena #gt-duel-body,
.gt-duel-arena .gt-arena {
    width: 100%;
}

/* Yarışta durum şeridi ancak tur bittiğinde doluyor ve o an gövde zaten
   boşaltılıyor — boşken 56px rezerve etmek sahadan yer çalıyordu. */
.gt-duel-arena .duel-status-area:empty {
    min-height: 0;
    display: none;
}

/* Tur sonu özetinde açılan deste: 12 takım, logo + kısa ad. Armanın etrafına
   çerçeve/plaka KONMAZ (proje kuralı). */
.gt-duel-answer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 0.6rem 0.4rem;
    width: 100%;
    margin-top: 0.5rem;
}

.gt-duel-answer-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

.gt-duel-answer-team img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

/* Ad TEK satıra sıkıştırılmaz: bu liste "hangi takımlardı" sorusunun cevabı,
   "Sport-Club Fr…" onu okunmaz kılıyordu. İki satıra kadar sarar, sonra keser. */
.gt-duel-answer-team span {
    width: 100%;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* --- Yarış başlığı --- */
.gt-duel-clock {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.gt-duel-clock.is-low { color: var(--color-danger); }

/* Yarışta geri bildirim kısa ömürlü: yer AYIRILIR ki sıradaki saha yukarı
   zıplamasın (düzen-kayması kuralı). */
.gt-duel-arena .gt-feedback { min-height: 34px; }

.gt-duel-flash {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.gt-duel-flash.is-correct { color: var(--color-success); background: var(--color-primary-glow); }
.gt-duel-flash.is-wrong { color: var(--color-danger); background: var(--color-danger-glow); }

.gt-skip-btn {
    align-self: center;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.gt-skip-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* ==========================================================================
   ORTAK FUTBOLCU (GAME 13) — games/common-player.js + common-player-duel.js
   Arena/kart/arama bileşenleri Bayrak & Forma'dan (.nh-*) yeniden kullanılır;
   burada YALNIZCA bu oyuna özgü olanlar var: şık ızgarası (oyuncu fotoğrafı +
   ad), takım kilidi rozeti ve düellonun genişlik düzeltmesi.
   ========================================================================== */

/* `.duel-round-arena` çocuklarını ORTALAR (align-items: center), yani araya
   giren gövde ne kadarsa o kadar daralır. Genişlik verilmezse kart sütunun
   yarısına düşer ve armalar üst üste biner (Takım Tahmini'nde bire bir
   yaşandı, bkz. CLAUDE.md). Tek kişilik modda zaten %100. */
.cp-arena { width: 100%; }
#cp-duel-body { width: 100%; }

/* Bayrak & Forma'nın TEK EKRAN sözleşmesi burada da geçerli ve üç parçası da
   şart (ikisi eksikti, sonuç: geri bildirim arenanın ~90-130 px altında kalıyor
   ve #game-arena-content overflow:hidden olduğu için ERİŞİLEMİYORDU — "Kariyeri"
   satırı ve doğru cevap listesi ekran dışındaydı):
     1. şıklar/arama satırı sabit kalır, SIKIŞMAZ (flex-shrink: 0)
     2. eylem satırının yeri baştan ayrılır (min-height), buton kımıldamaz
     3. uzayabilen tek parça olan sonuç alanı kalan boşluğu alır ve KENDİ
        içinde kayar (#cp-feedback-area) */
.cp-answer-area {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    flex-shrink: 0;
}

/* "Pas" ve "Sıradaki Tur" aynı anda hiç görünmez → aynı satırı paylaşırlar.
   Kolay modda Pas'a ayrı bir satır ayırmak (eski .cp-pass-row) şıklar zaten
   uzunken ekranın altını taşıran son damlaydı. */
.cp-action-row {
    min-height: 52px;
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 640px;
    flex-shrink: 0;
}

#cp-feedback-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
    max-width: 640px;
    scrollbar-width: thin;
}

/* Şıklar: Takım Tahmini'nin `.gt-option` deseni (çerçevesiz, büyüyerek
   tepki veren buton) ama içerik logo değil OYUNCU — kare foto + tam ad.
   Dört isim yan yana sığmadığı için 2x2 ızgara.

   ÇERÇEVESİZ (2026-08-08 kullanıcı isteği: "şıkları futbolcu olan oyunlarda
   kart yapısı kalksın, isimler sayfaya gömülü gelsin"). Biçim `.entity-row`
   (views.css) sözlüğünden geliyor: zemin yok, çerçeve yok, köşe yok; ayrımı
   satırlar arası ince çizgi, tıklanabilirliği hover zemini taşıyor. */
.cp-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.15rem 0.5rem;
}

.cp-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.4rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--surface-divider);
    border-radius: 0;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    min-width: 0;
    transition: var(--transition);
}

.cp-option img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.cp-option span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-option:hover:not(:disabled) {
    background: var(--bg-glass);
}

/* Odak halkası ÇERÇEVE YERİNE geçer: kart kabuğu kalkınca klavyeyle gezen
   kullanıcının hangi şıkta olduğunu gösteren tek işaret bu. `outline: none`
   YAZMAYIN. */
.cp-option:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    background: var(--bg-glass);
}

.cp-option:disabled { cursor: default; }

/* Tur bitince şıklar okunur bir renk şeması alır: DOĞRU cevap her zaman yeşil
   (yanlış cevap verildiğinde de — oyuncu doğruyu şıkların üstünde görmeli),
   oyuncunun yanlış seçimi kırmızı, dokunulmayan şıklar soluk. Çerçeve kalktığı
   için sinyal artık metin rengi + ince alt çizginin rengi; renk tek başına
   taşımasın diye zemine çok hafif bir ton da bırakılıyor (renk körlüğü). */
.cp-option.is-correct {
    color: var(--color-success);
    border-bottom-color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 8%, transparent);
}

.cp-option.is-wrong {
    color: var(--color-danger);
    border-bottom-color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 8%, transparent);
}

.cp-option.is-faded { opacity: 0.45; }

/* Düellodaki "Pas geç" satırı (yarışta tur bitmediği için orada ortak eylem
   satırı yok — her soru kendi gövdesinde yaşıyor). */
.cp-pass-row { display: flex; justify-content: center; }

/* Takım kilidi: isteğe bağlı olduğu için ROZET DEĞİL BUTON olarak doğar;
   seçildikten sonra çarpılı bir pill'e dönüşür (nh-fixed-pill ile aynı dil). */
.cp-lock-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: none;
    border: 1px dashed var(--border-glass);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.cp-lock-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-ink);
    border-style: solid;
}

.cp-lock-clear {
    background: none;
    border: none;
    padding: 0 0 0 0.35rem;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
}

.cp-lock-clear:hover { opacity: 1; }

/* Yanlış cevapta "hangi takımda oynamış" çipleri — bu oyunun kazancı:
   oyuncu nerede yanıldığını tek bakışta görür. */
.cp-played-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 520px) {
    /* Dört ad yan yana sığmaz → tek sütun. Karşılığında dikey bütçe daralıyor,
       o yüzden soru kartı da burada kısalır: arma 52→44 px ve "FORMASINI DA
       GİYMİŞ" etiketi tek satıra iner (iki satıra sarınca yalnız o etiket
       ~14 px yiyordu ve geri bildirim alanı o kadar kısalıyordu). */
    .cp-options { grid-template-columns: 1fr; }

    .cp-arena .nh-challenge-card { padding: 0.7rem 0.4rem; }
    .cp-arena .nh-crest-img { height: 44px; width: 44px; }
    .cp-arena .nh-side-tag { font-size: 0.64rem; letter-spacing: 0.03em; }
}

/* Ortak Futbolcu düellosu: tur özetindeki ikili listesi. Takım Tahmini'nin
   `.gt-duel-answer-grid`i logo ızgarasıydı; burada satır başına iki takım +
   örnek doğru cevaplar var, o yüzden ızgara değil liste. */
.cp-duel-answer-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 240px;
    overflow-y: auto;
    width: 100%;
}

.cp-duel-answer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.3rem 0.8rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-glass);
}

.cp-duel-answer-pair {
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cp-duel-answer-pair i { font-size: 0.65rem; color: var(--text-muted); }

.cp-duel-answer-names {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: right;
    min-width: 0;
}

/* Düello soru gövdesi: `.duel-round-arena` ortaladığı için genişlik verilmezse
   kart sütunun yarısına düşer (bkz. .cp-arena notu). */
.cp-duel-question {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.cp-duel-lock-row { width: 100%; }