/* =========================================
   SOUTĚŽNÍ KVÍZ - KAMENY NA GRIL (MODERNIZOVÁNO)
========================================= */

/* Překryvná vrstva (Overlay) */
.kng-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(5px);
    z-index: 999999; display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: 0.4s ease; padding: 15px; box-sizing: border-box;
}
.kng-overlay.is-visible { opacity: 1; visibility: visible; }

/* Hlavní kontejner - vrátíme normální padding */
#kng-quiz-container {
    background: #fff; text-align: center; 
    padding: 35px 20px 25px; 
    border-radius: 16px; width: 100%; max-width: 480px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); position: relative;
    transform: scale(0.95); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-height: 90vh; overflow-y: auto; box-sizing: border-box;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Tlačítko zavřít */
.kng-close {
    position: absolute; top: 12px; right: 15px; background: none; border: none;
    font-size: 28px; cursor: pointer; color: #94a3b8; transition: 0.2s; padding: 5px;
    line-height: 1; z-index: 10;
}
.kng-close:hover { color: #1e293b; }

/* --- Progress Bar --- */
.kng-progress-wrapper {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; /* Menší mezera pod čarami */
    position: relative; gap: 8px;
}
.kng-progress-step {
    flex: 1; height: 6px; background: #e2e8f0; border-radius: 4px;
    transition: 0.3s ease;
}
.kng-progress-step.active { background: #d35400; }
.kng-progress-step.done { background: #d35400; opacity: 0.5; }

/* Text s číslem kroku - NÍŽE POD ČAROU */
.kng-progress-text {
    font-size: 13px; font-weight: 700; color: #d35400; text-align: center;
    margin-bottom: 20px; /* Odstup od obrázku níže */
}

/* Texty a obrázky */
.kng-title { margin: 15px 0 8px; color: #0f172a; font-size: 24px; font-weight: 800; }
.kng-text { font-weight: 500; margin-bottom: 25px; font-size: 16px; color: #475569; }

/* Tlačítka odpovědí - MODERNÍ PILL DESIGN */
.kng-quiz-btn {
    display: flex; justify-content: center; align-items: center;
    width: 100%; margin: 12px 0; background: #f8fafc;
    border: 2px solid #e2e8f0; padding: 16px; border-radius: 50px;
    cursor: pointer; font-weight: 600; color: #334155; font-size: 15px;
    transition: all 0.2s ease; position: relative;
}
.kng-quiz-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; transform: translateY(-1px); }
.kng-quiz-btn.correct { background: #dcfce7 !important; color: #166534 !important; border-color: #22c55e !important; }
.kng-quiz-btn.wrong { background: #fee2e2 !important; color: #991b1b !important; border-color: #ef4444 !important; animation: kng-shake 0.4s ease-in-out; }
.kng-quiz-btn:disabled { cursor: default; }
.kng-btn-icon { position: absolute; right: 20px; font-size: 18px; }

/* Animace špatné odpovědi */
@keyframes kng-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-6px); }
}

/* Formulář v závěru */
.kng-quiz-input {
    width: 100%; padding: 15px; margin: 0 auto 15px auto; display: block;
    border: 2px solid #cbd5e1; border-radius: 10px; box-sizing: border-box;
    outline: none; font-size: 15px; transition: border-color 0.2s;
}
.kng-quiz-input:focus { border-color: #d35400; }

.kng-quiz-submit {
    width: 100%; background: #d35400; color: white; display: block;
    border: none; padding: 16px; border-radius: 50px;
    font-weight: 800; cursor: pointer; font-size: 16px;
    text-transform: uppercase; transition: 0.2s;
}
.kng-quiz-submit:hover:not(:disabled) { background: #b04600; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(211, 84, 0, 0.3); }