@font-face {
            font-family: 'Arakom';
            src: url('../arakom.ttf') format('truetype');
            font-display: swap;
        }
        html {
            height: 100%;
        }
        /* Tailwind kaldırılınca kaybolan temel sıfırlamalar:
           kutu ölçüleri kenarlık dahil hesaplanır, başlık/paragraf
           varsayılan boşlukları sıfırlanır -> alt taşmalar biter */
        *, *::before, *::after { box-sizing: border-box; }
        h1, h2, h3, p { margin: 0; }
        body {
            font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Site fontu */
            padding: 1rem; padding-top: 1rem;
            /* Site zemini: sade açık gri-mavi (kidefarapca.com bütünlüğü) */
            background: #F7F9FC;
            overscroll-behavior-y: contain;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; /* Masaüstü ve intro ekranları için ortalama */

            height: calc(var(--vh, 1vh) * 100);
            min-height: calc(var(--vh, 1vh) * 100);
            overflow: hidden; /* Body'nin kaymasını engelle */
        }
        @keyframes background-pan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

        /* Arapça Font Önceliği */
        [lang="ar"], .word, .option span { font-family: 'Arakom', 'Noto Naskh Arabic', system-ui, sans-serif; direction: rtl; }

        body, button, h1, h2, h3, p, div:not([lang="ar"]) { direction: ltr; }
        #back-btn {
            position: fixed; top: 1rem; left: 1rem; z-index: 3000; width: 48px; height: 48px;
            background-color: #ffffff;
            border-radius: 50%; display: flex;
            align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease-in-out;
            border: 1px solid #E9EEF5; box-shadow: 0 4px 12px rgba(44,62,80,0.08);
        }
        #back-btn svg { width: 24px; height: 24px; }

        #game-wrapper {
            width: 100%;
            max-width: 1200px;
            max-height: 100%; /* Body padding'ine göre ayarlanacak */
            
            flex-direction: row; /* Masaüstü varsayılan */
            gap: 1rem; 
            
            flex-grow: 1;
            min-height: 0; /* Flexbox taşma sorunlarını engeller */
        }

        #top-progress-bar {
            display: none;
            width: 100%;
            max-width: 800px;
            margin: 0 auto 1rem auto;
            grid-template-columns: repeat(10, 1fr);
            gap: 4px;
            padding: 0 0.5rem;
            flex-shrink: 0;
            direction: rtl; /* Sağdan sola ilerleme */
        }
        .progress-word { height: 8px; background-color: #E9EEF5; border-radius: 4px; transition: background-color 0.3s ease; }
        .progress-word.correct { background-color: #20C997; } .progress-word.incorrect { background-color: #EE5253; }
        .player-screen {
            display: flex;
            flex-direction: column;
            padding: 1.5rem;
            border-radius: 1.5rem;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid #E9EEF5;
            box-shadow: 0 8px 24px 0 rgba(44, 62, 80, 0.08);
            flex-grow: 1;
            flex-basis: 0;
            min-height: 0;
            justify-content: space-between;
        }
        #player-1 { background-color: #EDF3FF; border-color: #d6e4fb; } #player-2 { background-color: #FFF6E9; border-color: #f6e3c1; }
        body.mode-1p #player-2 { display: none; } body.mode-1p #player-1 { width: 100%; max-width: 800px; margin: 0 auto; } body.mode-1p #game-wrapper { justify-content: center; } body.mode-1p #player-1 .player-icon-wrapper { display: none; } body.mode-1p #top-progress-bar { display: grid; order: -1; } body.mode-1p #player-1 #progress-1, body.mode-1p #player-2 #progress-2 { display: none; }

        body.mode-1p #player-1 .status-bar { justify-content: space-between; } /* Puan ve Zamanı iki uca yasla */
        body.mode-1p #p1-timer { display: flex; }
        body.mode-1p #p1-score-wrapper { /* margin-right: auto; kaldırıldı */ }

        #modal.mode-1p #result-column-2 { display: none; } #modal.mode-1p .results-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
        body.mode-2p #player-1, body.mode-2p #player-2 { width: 50%; } #modal.mode-2p .results-grid { grid-template-columns: 1fr; } /* Varsayılan 1 sütun */ body.mode-2p #top-progress-bar { display: none; }
        body.mode-2p #progress-1, body.mode-2p #progress-2 {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            gap: 4px;
            width: 100%;
            max-width: 300px;
            margin: 0.5rem auto 1rem auto;
            flex-shrink: 0;
            direction: rtl; /* Sağdan sola ilerleme */
        }
        body.mode-2p .progress-word { height: 8px; border-radius: 4px; }
        body.mode-2p .status-bar { justify-content: flex-end; }

        .player-icon-wrapper .flex {
            align-items: center; /* Dikey hizalama */
            line-height: 1; /* H1'deki ekstra boşluğu azaltmak için */
        }
        .player-icon-wrapper h1 {
            direction: ltr;
            font-size: 2.5em;
            line-height: 1; /* Dikey boşluğu kaldır */
        }
        .player-icon-wrapper svg {
            width: 1em;  /* Font boyutuna göre ölçeklen */
            height: 1em; /* Font boyutuna göre ölçeklen */
            font-size: 2.5em; /* H1 ile aynı em değeri */
        }


        .question-container {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center; /* Dikey Ortalama */
            align-items: center;
            gap: 1rem;
            order: 0;
            overflow-y: auto; /* İçerik Kaydırma */
            min-height: 0;
            padding-bottom: 1rem; /* Alt boşluk */
        }
        .word { font-size: clamp(2.5rem, 10vw, 5rem); color: #2c3e50; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); font-weight: 700; }
        .options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 100%; max-width: 400px; }
        .option { background-color: #ffffff; border: 2px solid #E9EEF5; color: #2c3e50; border-radius: 1rem; padding: 1rem; text-align: center; font-size: clamp(1.8rem, 8vw, 3rem); cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 0 #d6dde8; } .option:hover { border-color: #16A085; transform: translateY(-2px); box-shadow: 0 6px 0 #d6dde8; } .option:active { transform: translateY(2px); box-shadow: 0 1px 0 #d6dde8; transition-duration: 0.1s; } .option.correct { background-color: #eafaf3; border-color: #20C997; box-shadow: 0 4px 0 #b7e4d4; } .option.incorrect { background-color: #FDECEC; border-color: #EE5253; box-shadow: 0 4px 0 #f0c1c1; } .option.disabled { pointer-events: none; opacity: 0.7; } .option span { color: #2c3e50; font-weight: 700; }
        .status-bar {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 0.75rem 1rem;
            background: #ffffff;
            border: 1px solid #E9EEF5;
            border-radius: 1rem;
            font-size: 1.25rem;
            position: relative;
            flex-shrink: 0;
        }
        #modal { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; padding: 1rem; display: none; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } 
        .modal-content { background-color: white; padding: 2rem; border-radius: 1.5rem; text-align: center; width: 95%; max-width: 800px; position: relative; margin: auto; max-height: calc(var(--vh, 1vh) * 90); overflow-y: auto; } /* 90vh -> vh fix */
        .results-grid { display: grid; gap: 1rem; margin-top: 1.5rem; } 
        .result-column { padding: 1rem; border-radius: 1rem; position: relative; overflow: hidden; }

        .result-item {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            direction: rtl; /* <<< SAĞDAN SOLA SIRALAMA İÇİN */
        }

        .intro-screen { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2000; padding: 1rem; overflow-y: auto; } 
        .info-card { background: #ffffff; border: 1px solid #E9EEF5; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 8px 24px 0 rgba(44, 62, 80, 0.08); }
        .difficulty-btn { padding: 0.8rem 2rem; font-size: 1.5rem; color: white; border-radius: 0.75rem; transition: all 0.2s; width: 100%; max-width: 384px; } .difficulty-btn.easy { background-color: #20C997; } .difficulty-btn.easy:hover { background-color: #16A085; } .difficulty-btn.medium { background-color: #F39C12; } .difficulty-btn.medium:hover { background-color: #d98c0a; } .difficulty-btn.hard { background-color: #EE5253; } .difficulty-btn.hard:hover { background-color: #d63c3d; }
        .modal-secondary-btn { font-size: 1.25rem; font-weight: 600; padding: 0.75rem 1.5rem; background-color: #f3f4f6; color: #1f2937; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.2s ease; } .modal-secondary-btn:hover { background-color: #e5e7eb; }
        #countdown-overlay { font-size: clamp(8rem, 30vw, 15rem); color: white; font-weight: bold; text-shadow: 0 0 20px rgba(0,0,0,0.5); }
        .player-screen.flash-correct { animation: flash-green 0.6s ease-out; } .player-screen.incorrect-answer-effect { animation: shake-and-flash-red 0.6s ease-out; } @keyframes flash-green { 0%, 100% { background-color: #EDF3FF; } 50% { background-color: rgba(32, 201, 151, 0.5); } } #player-2.flash-correct { animation: flash-green-p2 0.6s ease-out; } @keyframes flash-green-p2 { 0%, 100% { background-color: #FFF6E9; } 50% { background-color: rgba(32, 201, 151, 0.5); } } @keyframes shake-and-flash-red { 0% { transform: translateX(0); background-color: #EDF3FF; } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } 50% { background-color: rgba(238, 82, 83, 0.5); } 100% { transform: translateX(0); background-color: #EDF3FF; } } #player-2.incorrect-answer-effect { animation: shake-and-flash-red-p2 0.6s ease-out; } @keyframes shake-and-flash-red-p2 { 0% { transform: translateX(0); background-color: #FFF6E9; } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } 50% { background-color: rgba(238, 82, 83, 0.5); } 100% { transform: translateX(0); background-color: #FFF6E9; } }
        .flying-char { position: absolute; font-size: 3rem; font-weight: 700; color: #1f2937; opacity: 1; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease-out; z-index: 10; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,0.2); }
        .score-popup { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); font-size: 2.5rem; font-weight: bold; color: #ffc107; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); animation: score-anim 1.2s ease-out forwards; pointer-events: none; z-index: 20; } @keyframes score-anim { 0% { opacity: 1; transform: translate(-50%, 0) scale(0.8); } 50% { transform: translate(-50%, -40px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -80px) scale(0.9); } }
        .confetti { position: absolute; width: 10px; height: 10px; background-color: red; opacity: 0; animation: fall 4s linear infinite; } @keyframes fall { 0% { transform: translateY(-100vh) rotateZ(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotateZ(720deg); opacity: 0; } }
        
        /* Tablet (genişlik 768px+) Yatay Mod */
        @media (min-width: 768px) and (orientation: landscape) {
             #modal.mode-2p .results-grid { grid-template-columns: 1fr 1fr; }
        }

        /* ============================================================
        GÜNCELLEME 4: MOBİL (PORTRAIT) - DAHA BÜYÜK FONT VE PADDING
        ============================================================
        */
        @media (max-width: 900px) {
             body { 
                padding: 0.25rem; /* <<< Kenar boşluğu azaltıldı (daha fazla alan için) */
                justify-content: flex-start; /* 'center' yerine 'flex-start' */
             }
             #back-btn { top: 0.5rem; left: 0.5rem; width: 40px; height: 40px; } #back-btn svg { width: 20px; height: 20px; }
             
             /* Dikey (Portrait) modda oyun ekranları alt alta gelir */
             #game-wrapper{ 
                flex-direction: column; 
                gap: 0.5rem; 
             }
             .player-screen{ 
                padding: 0.5rem; /* <<< Padding düzenlendi */
                width: 100% !important; 
                max-width: 100% !important; 
                flex-grow: 1; 
                min-height: 0; 
             }
             body.mode-2p .player-screen { flex-basis: 0; }
             .player-icon-wrapper h1, .player-icon-wrapper svg { font-size: 2em; }
             .question-container { gap: 0.5rem; padding-bottom: 0.5rem; } /* <<< Gap artırıldı */
             
             /* <<< ANA GÜNCELLEME (KELİME FONTU) */
             .word { font-size: clamp(2.5rem, 10vw, 4.5rem); } 
             
             .options { gap: 0.5rem; } 
             
             /* <<< ANA GÜNCELLEME (SEÇENEK FONTU) */
             .option { 
                padding: 0.5rem; /* <<< Padding artırıldı */
                font-size: clamp(1.8rem, 8vw, 2.8rem); /* <<< Font büyütüldü */
                min-height: 44px;
             }
             
             /* <<< ANA GÜNCELLEME (SKOR/ZAMAN FONTU) */
             .status-bar { 
                padding: 0.5rem 0.75rem; /* <<< Padding artırıldı */
                font-size: 1.1rem; /* <<< Font büyütüldü */
             }
             
             body.mode-2p #progress-1, body.mode-2p #progress-2 { gap: 2px; max-width: 150px; margin: 0.3rem auto 0.5rem auto; }
             body.mode-2p .progress-word { height: 4px; border-radius: 2px; }
             #top-progress-bar { margin-bottom: 0.4rem; padding: 0 0.25rem; gap: 2px; } .progress-word { height: 5px; border-radius: 2.5px; }
             .modal-content{ 
                padding: 1rem; 
                width: 95%; 
                max-height: calc(var(--vh, 1vh) * 85); /* 85vh -> vh fix */
             } 
             .results-grid { margin-top: 0.75rem; }
             .result-column { padding: 0.5rem; } .result-item { font-size: 1.2rem; gap: 0.4rem; margin-bottom: 0.3rem; }
             h1 { font-size: 2rem !important; } h2 { font-size: 1.5rem !important; } h3:not([lang="ar"]) { font-size: 1.2rem !important; } p { font-size: 1rem !important; }
        }

        /* ============================================================
        GÜNCELLEME 4: MOBİL (LANDSCAPE) - DAHA BÜYÜK FONT
        ============================================================
        */
        @media (max-width: 900px) and (orientation: landscape) {
             #back-btn { top: 0.5rem; left: 0.5rem; width: 36px; height: 36px; } #back-btn svg { width: 18px; height: 18px; }
            #game-wrapper { 
                flex-direction: row; 
                gap: 0.5rem; 
            }
            .player-screen { 
                padding: 0.4rem 0.6rem; 
                width: 50% !important; 
                flex-basis: 0; 
            }
             body.mode-1p #player-1 { max-width: 600px; }
            .player-icon-wrapper h1, .player-icon-wrapper svg { font-size: 1.5em; }
            .question-container { gap: 0.2rem; padding-bottom: 0.2rem; }
            
            /* <<< ANA GÜNCELLEME (KELİME FONTU) */
            .word { font-size: clamp(1.8rem, 8vh, 2.8rem); }
            
            .options { gap: 0.3rem; max-width: 300px; }

            /* <<< ANA GÜNCELLEME (SEÇENEK FONTU) */
            .option { 
                padding: 0.4rem; /* <<< Padding artırıldı */
                font-size: clamp(1.6rem, 7vh, 2.2rem); /* <<< Font büyütüldü */
                min-height: 32px; 
                border-radius: 0.75rem; 
            } 
            
            /* <<< ANA GÜNCELLEME (SKOR/ZAMAN FONTU) */
            .status-bar { 
                padding: 0.4rem 0.6rem; /* <<< Padding artırıldı */
                font-size: 0.9rem; /* <<< Font büyütüldü */
                border-radius: 0.75rem; 
            }
             .status-bar span:first-child { font-size: 1.2em; }
            body.mode-2p #progress-1, body.mode-2p #progress-2 { max-width: 100px; margin: 0.2rem auto 0.4rem auto; gap: 1px; }
             body.mode-2p .progress-word { height: 3px; border-radius: 1.5px; }
             #top-progress-bar { margin-bottom: 0.3rem; gap: 1px; max-width: 500px; }
             #top-progress-bar .progress-word { height: 4px; border-radius: 2px; }
             .modal-content { 
                padding: 0.8rem; 
                max-height: calc(var(--vh, 1vh) * 85); /* 85vh -> vh fix */
             } 
             .results-grid { margin-top: 0.5rem; gap: 0.5rem; }
             .result-column { padding: 0.4rem; } .result-item { font-size: 0.9rem; gap: 0.3rem; margin-bottom: 0.3rem;}
             .modal-content h2 { font-size: 1.3rem !important; margin-bottom: 0.5rem;}
             .result-column h3 { font-size: 1rem !important; margin-bottom: 0.3rem;}
        }

        .result-column h3 { font-family: 'Marhey', system-ui, sans-serif; }

        /* ============ SİTE BÜTÜNLÜĞÜ: MOD BUTONLARI ============ */
        #start-1p-btn { background: #ffffff !important; border: 2px solid #E9EEF5 !important; box-shadow: 0 4px 0 #d6dde8 !important; }
        #start-1p-btn:hover { border-color: #16A085 !important; transform: translateY(-2px); }
        #start-1p-btn span { color: #117A65 !important; }
        #start-2p-btn { background: #16A085 !important; box-shadow: 0 4px 0 #0e7460 !important; }
        #start-2p-btn:hover { background: #117A65 !important; transform: translateY(-2px); }
        #start-2p-btn span { color: #ffffff !important; }


        /* ============ SONUÇ EKRANI TUŞLARI ============ */
        .modal-btn-row { display: flex; gap: 12px; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }
        .modal-primary-btn { font-size: 1.25rem; font-weight: 600; padding: 0.75rem 1.5rem; background-color: #16A085; color: #fff; border-radius: 0.75rem; box-shadow: 0 4px 0 #0e7460; transition: all 0.2s ease; cursor: pointer; }
        .modal-primary-btn:hover { background-color: #117A65; transform: translateY(-2px); }
        .modal-primary-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0e7460; }
        .modal-secondary-btn { cursor: pointer; }

        /* ============ YEREL YARDIMCI SINIFLAR (Tailwind CDN kaldırıldı) ============ */
        .hidden { display: none !important; }
        .flex { display: flex; } .flex-col { flex-direction: column; } .block { display: block; }
        .items-center { align-items: center; } .items-start { align-items: flex-start; }
        .justify-center { justify-content: center; }
        .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; }
        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .z-50 { z-index: 50; }
        .text-center { text-align: center; } .text-left { text-align: left; }
        .mx-auto { margin-left: auto; margin-right: auto; }
        .w-full { width: 100%; } .max-w-xl { max-width: 36rem; } .max-w-sm { max-width: 24rem; }
        .w-9 { width: 2.25rem; } .h-9 { height: 2.25rem; } .w-10 { width: 2.5rem; } .h-10 { height: 2.5rem; }
        .gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; }
        .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-8 { margin-bottom: 2rem; }
        .mt-4 { margin-top: 1rem; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
        .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
        .text-base { font-size: 1rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; }
        .text-3xl { font-size: 1.875rem; } .text-4xl { font-size: 2.25rem; }
        .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .font-normal { font-weight: 400; }
        .text-gray-600 { color: #4b5563; } .text-gray-700 { color: #374151; } .text-gray-800 { color: #1f2937; }
        .text-white { color: #ffffff; } .text-yellow-500 { color: #eab308; }
        .text-blue-900, .text-blue-800\/80 { color: #117A65; } .text-blue-100\/90 { color: #eafaf3; }
        .rounded-xl { border-radius: .75rem; }
        .shadow-lg { box-shadow: 0 10px 15px -3px rgba(44,62,80,.1), 0 4px 6px -4px rgba(44,62,80,.1); }
        .border { border-width: 1px; border-style: solid; border-color: #E9EEF5; }
        .border-white\/50 { border-color: rgba(255,255,255,.5); }
        .bg-white\/80 { background-color: rgba(255,255,255,.85); }
        .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
        .bg-black.bg-opacity-40 { background-color: rgba(0,0,0,.4); }
        .bg-black.bg-opacity-60 { background-color: rgba(0,0,0,.6); }
        .transition-all { transition: all .3s ease; } .duration-300 { transition-duration: .3s; }
        .bg-blue-700, .hover\:bg-blue-800:hover, .hover\:bg-white:hover, .hover\:shadow-xl:hover,
        .focus\:outline-none:focus, .focus\:ring-2:focus, .focus\:ring-blue-400:focus, .focus\:ring-blue-500\/70:focus,
        .group { /* Tailwind kalıntıları: görsel karşılığı üstteki id kuralları verir */ }
        button { border: none; background: none; font: inherit; cursor: pointer; }
        @media (min-width: 768px) {
            .md\:w-1\/2 { width: 50%; }
            .md\:gap-2 { gap: .5rem; } .md\:gap-3 { gap: .75rem; } .md\:gap-6 { gap: 1.5rem; }
            .md\:mb-12 { margin-bottom: 3rem; }
            .md\:text-lg { font-size: 1.125rem; } .md\:text-2xl { font-size: 1.5rem; }
            .md\:text-3xl { font-size: 1.875rem; } .md\:text-5xl { font-size: 3rem; }
        }
        @media (min-width: 1024px) {
            .lg\:text-3xl { font-size: 1.875rem; } .lg\:text-7xl { font-size: 4.5rem; }
        }


        /* ============ BİRLEŞİK GİRİŞ EKRANI: İKİ EŞİT MOD KARTI ============ */
        .mode-cards { display: flex; gap: 16px; align-items: stretch; }
        .mode-card {
            flex: 1 1 0; min-width: 0;
            background: #fbfcfe; border: 2px solid #E9EEF5; border-radius: 16px;
            padding: 1.1rem 1rem; display: flex; flex-direction: column;
            align-items: center; gap: .9rem; transition: border-color .2s ease;
        }
        .mode-card:hover { border-color: #16A085; }
        .mode-card-head { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
        .mode-card-head svg { width: 3rem; height: 3rem; }
        .mode-card-title { font-weight: 700; font-size: 1.35rem; color: #2c3e50; }
        .mode-card-sub { font-size: .95rem; color: #64748b; }
        .difficulty-row { display: flex; gap: 8px; justify-content: center; width: 100%; margin-top: auto; }
        .difficulty-row .difficulty-btn { width: auto; flex: 1 1 0; max-width: 110px; padding: 0.65rem 0.4rem; font-size: 1.15rem; }
        .mode-2p-btn {
            display: flex; align-items: center; justify-content: center;
            width: 100%; margin-top: auto;
            padding: 0.65rem 1rem; border-radius: 0.75rem;
            background: #16A085; color: #fff; font-size: 1.15rem; font-weight: 600;
            box-shadow: 0 4px 0 #0e7460; transition: all .2s ease;
        }
        .mode-2p-btn:hover { background: #117A65; transform: translateY(-2px); }
        .mode-2p-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0e7460; }
        @media (max-width: 560px) {
            .mode-cards { flex-direction: column; }
        }