/* ═══ ALCHEMYSTO TEST PAGE – PREMIUM QUIZ ═══ */

:root {
    --font-sans: var(--font-montserrat);
    --quiz-green: #10b981;
    --quiz-green-bg: rgba(16, 185, 129, 0.08);
    --quiz-red: #ef4444;
    --quiz-red-bg: rgba(239, 68, 68, 0.08);
    --quiz-max: 46rem;
}
body, p, li, td, th, span, div, button, input { font-family: var(--font-sans); }
.title-serif { font-family: var(--font-serif) !important; }

/* ═══ HERO ═══ */
.hero-wissen {
    background: radial-gradient(circle at 50% 100%, rgba(27,99,138,0.05) 0%, rgba(250,246,238,0) 70%);
    min-height: 35vh; display: flex; align-items: center;
    position: relative; overflow: hidden;
    padding-top: 8rem; padding-bottom: 3rem; text-align: center;
}
.hero-bg-glow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 50rem; height: 50rem; pointer-events: none; z-index: 1;
    background: radial-gradient(circle, rgba(27,99,138,0.06) 0%, rgba(0,0,0,0) 70%);
}
.hero-content-wissen {
    position: relative; z-index: 2; max-width: 50rem; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}
.hero-tag { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.25em; color: var(--accent-blue); text-transform: uppercase; }
.hero-wissen .hero-title {
    font-size: 3.5rem; line-height: 1.2; margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-silver) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-wissen .hero-subtitle { font-size: 1.2rem; color: var(--text-secondary); font-weight: 300; max-width: 40rem; line-height: 1.6; }

/* ═══ STEP INDICATOR (injected by JS) ═══ */
.quiz-step-indicator {
    max-width: var(--quiz-max); margin: 0 auto 1rem auto;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem 2rem; gap: 0;
}
.step-dot {
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; color: var(--text-muted);
    background: rgba(28,25,23,0.04); border: 2px solid rgba(28,25,23,0.1);
    transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
    position: relative; z-index: 2; flex-shrink: 0;
}
.step-dot.active {
    color: var(--white); background: var(--accent-blue); border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.35rem rgba(27,99,138,0.15), 0 0.25rem 1rem rgba(27,99,138,0.25);
    transform: scale(1.15); animation: stepPulse 2s ease-in-out infinite;
}
@keyframes stepPulse {
    0%,100% { box-shadow: 0 0 0 0.35rem rgba(27,99,138,0.15), 0 0.25rem 1rem rgba(27,99,138,0.25); }
    50% { box-shadow: 0 0 0 0.5rem rgba(27,99,138,0.08), 0 0.25rem 1.25rem rgba(27,99,138,0.3); }
}
.step-dot.correct { color: var(--white); background: var(--quiz-green); border-color: var(--quiz-green); box-shadow: 0 0.125rem 0.5rem rgba(16,185,129,0.2); }
.step-dot.incorrect { color: var(--white); background: var(--quiz-red); border-color: var(--quiz-red); box-shadow: 0 0.125rem 0.5rem rgba(239,68,68,0.2); }
.step-connector { flex: 1; height: 2px; background: rgba(28,25,23,0.08); min-width: 0.5rem; z-index: 1; }
.step-connector-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-blue), var(--accent-glow)); transition: width 0.6s cubic-bezier(0.16,1,0.3,1); }
.step-connector.filled .step-connector-fill { width: 100%; }

.quiz-step-counter {
    max-width: var(--quiz-max); margin: 0 auto 2rem auto;
    text-align: center; font-size: 0.85rem; color: var(--text-muted); font-weight: 500;
}
.quiz-step-counter strong { color: var(--accent-blue); font-weight: 700; }

/* ═══ HIDE OLD PROGRESS TRACKER ═══ */
.quiz-progress-tracker { display: none !important; }

/* ═══ QUIZ SECTION ═══ */
.quiz-section { padding-top: 2rem; padding-bottom: 6rem; position: relative; }

.quiz-grid {
    display: block; max-width: var(--quiz-max); margin: 0 auto;
    position: relative; min-height: 25rem;
}

/* ═══ QUIZ TILE – SINGLE CARD FLOW ═══ */
.quiz-tile {
    position: absolute; top: 0; left: 0; width: 100%;
    opacity: 0; pointer-events: none; transform: translateX(2rem);
    transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s cubic-bezier(0.16,1,0.3,1);
    padding: 0; overflow: hidden; border-radius: 1rem;
}
.quiz-tile.quiz-active {
    position: relative; opacity: 1; pointer-events: auto; transform: translateX(0);
}
.quiz-tile.slide-out {
    opacity: 0; transform: translateX(-2rem); pointer-events: none;
}

/* Override glass-panel hover for tiles */
.quiz-tile.glass-panel:hover { transform: none; }
.quiz-tile.quiz-active.glass-panel:hover { transform: none; }

/* ═══ TILE HEADER (reusing existing collapsible-trigger as display only) ═══ */
.quiz-tile .quiz-tile-header {
    width: 100%; display: flex; flex-direction: column; gap: 0.5rem;
    padding: 2.25rem 2.25rem 0 2.25rem;
    background: none; border: none; cursor: default; text-align: left;
}
.quiz-tile-title-group { display: flex; flex-direction: column; gap: 0.5rem; }
.quiz-tile-title { font-size: 1.4rem; color: var(--text-primary); margin: 0; font-weight: 400; line-height: 1.4; }
.quiz-progress { font-size: 0.8rem; font-weight: 700; color: var(--accent-blue); letter-spacing: 0.2em; text-transform: uppercase; }

/* Hide chevron and badge – replaced by step indicator */
.quiz-tile-actions { display: none !important; }

/* Force content visible (override collapsible grid system from style.css) */
.quiz-tile .collapsible-content-wrapper {
    display: block !important;
    grid-template-rows: none !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
}
.quiz-tile .collapsible-content-inner {
    padding: 0;
    visibility: visible !important;
    min-height: auto !important;
    overflow: visible !important;
}
.quiz-tile-body { padding: 1.5rem 2.25rem 2.25rem 2.25rem; }

/* ═══ ANSWER OPTIONS ═══ */
.quiz-options { display: flex; flex-direction: column; gap: 0.875rem; }
.quiz-option-btn {
    display: flex; align-items: center; gap: 1.25rem;
    padding: 1.25rem 1.75rem; background: rgba(255,255,255,0.5);
    border: 1.5px solid var(--border-color); border-radius: 0.875rem;
    text-align: left; cursor: pointer; width: 100%;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
                border-color 0.35s cubic-bezier(0.16,1,0.3,1),
                background-color 0.35s cubic-bezier(0.16,1,0.3,1),
                box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
}
.quiz-option-btn:hover {
    border-color: var(--border-color-hover); background: rgba(255,255,255,0.95);
    transform: translateY(-0.125rem); box-shadow: 0 0.5rem 1.5rem rgba(27,99,138,0.08);
}
.quiz-option-btn.disabled { cursor: default; pointer-events: none; opacity: 0.5; }
.quiz-option-btn.disabled:hover { transform: none; box-shadow: none; }

.quiz-option-btn.selected-correct {
    background: var(--quiz-green-bg); border-color: var(--quiz-green); opacity: 1;
    box-shadow: 0 0.25rem 1.25rem rgba(16,185,129,0.12);
    animation: correctPop 0.5s cubic-bezier(0.16,1,0.3,1);
}
@keyframes correctPop { 0%{transform:scale(1)} 30%{transform:scale(1.02)} 100%{transform:scale(1)} }

.quiz-option-btn.selected-incorrect {
    background: var(--quiz-red-bg); border-color: var(--quiz-red); opacity: 1;
    animation: incorrectShake 0.5s cubic-bezier(0.16,1,0.3,1);
}
@keyframes incorrectShake {
    0%,100%{transform:translateX(0)} 15%{transform:translateX(-0.3rem)} 30%{transform:translateX(0.3rem)}
    45%{transform:translateX(-0.2rem)} 60%{transform:translateX(0.2rem)} 75%{transform:translateX(-0.1rem)}
}
.quiz-option-btn.reveal-correct { background: var(--quiz-green-bg); border-color: rgba(16,185,129,0.35); opacity: 1; }

.option-letter {
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: rgba(28,25,23,0.05); color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.quiz-option-btn:hover .option-letter { background: var(--text-primary); color: var(--white); }
.quiz-option-btn.selected-correct .option-letter { background: var(--quiz-green); color: var(--white); }
.quiz-option-btn.selected-incorrect .option-letter { background: var(--quiz-red); color: var(--white); }
.quiz-option-btn.reveal-correct .option-letter { background: var(--quiz-green); color: var(--white); }
.option-text { font-size: 0.95rem; color: var(--text-secondary); font-weight: 500; line-height: 1.5; }
.quiz-option-btn:hover .option-text { color: var(--text-primary); }

/* ═══ FEEDBACK ═══ */
.quiz-feedback {
    margin-top: 1.75rem; padding: 1.5rem 1.75rem; border-radius: 0.75rem;
    background: rgba(255,255,255,0.6); border-left: 3px solid var(--accent-blue);
    display: flex; flex-direction: column; gap: 1.25rem;
}
.quiz-feedback.hidden { display: none; }
.quiz-feedback.feedback-correct { border-left-color: var(--quiz-green); background: rgba(16,185,129,0.04); }
.quiz-feedback.feedback-incorrect { border-left-color: var(--quiz-red); background: rgba(239,68,68,0.04); }
.feedback-text { font-size: 0.95rem; line-height: 1.65; color: var(--text-secondary); }
.feedback-text strong { color: var(--text-primary); }

/* Next/Finish buttons */
.btn-next-tile, .btn-finish-quiz, .btn-primary.btn-sm {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.75rem; background: var(--text-primary); color: var(--bg-base);
    border: 1px solid var(--text-primary); border-radius: 50px;
    font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em;
    cursor: pointer; align-self: flex-start;
    transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 0.25rem 1rem rgba(28,25,23,0.12);
}
.btn-next-tile:hover, .btn-finish-quiz:hover, .btn-primary.btn-sm:hover {
    background: transparent; color: var(--text-primary);
    transform: translateY(-0.125rem); box-shadow: 0 0.5rem 1.5rem rgba(28,25,23,0.08);
}

/* ═══ RESULT ═══ */
.result-section {
    padding-bottom: 8rem; opacity: 0; transform: translateY(1.25rem);
    transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.result-section.active { opacity: 1; transform: translateY(0); }
.result-section.hidden { display: none; }
.result-card {
    max-width: var(--quiz-max); margin: 0 auto; padding: 3.5rem;
    position: relative; background: var(--bg-surface);
    backdrop-filter: blur(1.25rem); -webkit-backdrop-filter: blur(1.25rem);
    border: 1px solid var(--border-color); border-radius: 1.25rem;
    box-shadow: 0 1rem 3rem rgba(168,140,103,0.1);
}
.result-celebration { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2rem; padding: 1rem 0; position: relative; z-index: 2; }
.certificate-glow { position: absolute; top: -20%; left: -10%; width: 120%; height: 140%; background: radial-gradient(circle at 50% 30%, rgba(27,99,138,0.08) 0%, rgba(0,0,0,0) 65%); z-index: 1; pointer-events: none; }
.certificate-frame {
    padding: 3rem; max-width: 28rem; width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
    border-radius: 1rem; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 100%);
    border: 1px solid var(--border-color); box-shadow: 0 1rem 2.5rem rgba(168,140,103,0.12); position: relative; z-index: 2;
}
.cert-title { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.2em; text-transform: uppercase; }
.cert-user-rank { font-size: 2.2rem; margin: 0; background: linear-gradient(135deg, var(--accent-blue) 30%, var(--accent-glow) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.cert-description { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; }
.cert-score { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); background: rgba(28,25,23,0.05); padding: 0.4rem 1rem; border-radius: 50px; }

/* ═══ MOBILE ═══ */
@media (max-width: 768px) {
    .hero-wissen .hero-title { font-size: 2.4rem; }
    .hero-wissen .hero-subtitle { font-size: 1rem; }
    .quiz-step-indicator { padding: 1rem 0.75rem; margin-bottom: 0.5rem; }
    .step-dot { width: 1.75rem; height: 1.75rem; font-size: 0.65rem; }
    .step-dot.active { transform: scale(1.1); }
    .quiz-step-counter { font-size: 0.8rem; }
    .quiz-grid { min-height: 22rem; }
    .quiz-tile .quiz-tile-header { padding: 1.5rem 1.5rem 0 1.5rem; }
    .quiz-tile-title { font-size: 1.15rem; }
    .quiz-tile-body { padding: 1.25rem 1.5rem 1.75rem 1.5rem; }
    .quiz-option-btn { padding: 1rem 1.25rem; gap: 1rem; }
    .option-letter { width: 2rem; height: 2rem; font-size: 0.8rem; }
    .option-text { font-size: 0.88rem; }
    .quiz-feedback { padding: 1.25rem; margin-top: 1.25rem; }
    .result-card { padding: 2rem 1.5rem; }
    .certificate-frame { padding: 2rem 1.5rem; }
    .cert-user-rank { font-size: 1.75rem; }
}
@media (max-width: 480px) {
    .step-dot { width: 1.5rem; height: 1.5rem; font-size: 0.6rem; border-width: 1.5px; }
    .quiz-step-indicator { padding: 0.75rem 0.5rem; }
    .step-connector { min-width: 0.25rem; }
    .quiz-tile .quiz-tile-header { padding: 1.25rem 1.25rem 0 1.25rem; }
    .quiz-tile-body { padding: 1rem 1.25rem 1.5rem 1.25rem; }
    .quiz-tile-title { font-size: 1.05rem; }
}