/* ==========================================================
   AtoZ Interactive Engine
   German Grammar Practice Engine
   Version : 1.0
========================================================== */


/* ==========================================================
   SECTION 1
   ROOT VARIABLES
========================================================== */

:root{

    --aie-primary:#0F5A4A;
    --aie-primary-dark:#0B4B3D;

    --aie-success:#16A34A;
    --aie-danger:#DC2626;

    --aie-card:#FFFFFF;
    --aie-background:#F6F8FB;

    --aie-border:#E5E7EB;

    --aie-text:#102A43;
    --aie-light:#64748B;

    --aie-radius:18px;

    --aie-shadow:
        0 10px 35px rgba(15,90,74,.08);

    --aie-transition:.25s ease;

}


/* ==========================================================
   SECTION 2
   WRAPPER
========================================================== */

.aie-wrapper{

    width:100%;

    max-width:760px;

    margin:24px auto;

    padding:0 14px;

    font-family:
        "Poppins",
        sans-serif;

}


/* ==========================================================
   SECTION 3
   MAIN CARD
========================================================== */

.aie-card{

    background:var(--aie-card);

    border:1px solid var(--aie-border);

    border-radius:20px;

    padding:22px;

    box-shadow:var(--aie-shadow);

    transition:var(--aie-transition);

}

.aie-card:hover{

    transform:translateY(-2px);

}


/* ==========================================================
   SECTION 4
   HEADER
========================================================== */

.aie-topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}

.aie-level{

    background:var(--aie-primary);

    color:#fff;

    font-size:12px;

    font-weight:600;

    padding:7px 16px;

    border-radius:30px;

}

.aie-progress-text{

    font-size:15px;

    font-weight:600;

    color:var(--aie-light);

}


/* ==========================================================
   SECTION 5
   PROGRESS BAR
========================================================== */

.aie-progress{

    width:100%;

    height:6px;

    background:#E5E7EB;

    border-radius:30px;

    overflow:hidden;

    margin-bottom:22px;

}

.aie-progress-fill{

    width:0;

    height:100%;

    background:linear-gradient(
        90deg,
        #0F5A4A,
        #15803D
    );

    border-radius:30px;

    transition:.35s ease;

}


/* ==========================================================
   SECTION 6
   TITLE
========================================================== */

.aie-title{

    margin:0 0 18px;

    font-size:22px;

    font-weight:700;

    color:var(--aie-text);

}


/* ==========================================================
   SECTION 7
   QUESTION
========================================================== */

.aie-question{

    font-size:18px;

    line-height:1.8;

    color:#243B53;

    margin-bottom:20px;

}

/* ==========================================================
   SECTION 8
   DROPDOWN
========================================================== */

.aie-blank,
.aie-dropdown{

    min-width:110px;

    width:auto;

    height:42px;

    padding:0 12px;

    margin:0 4px;

    border:2px solid var(--aie-border);

    border-radius:10px;

    background:#fff;

    font-size:15px;

    font-weight:500;

    color:var(--aie-text);

    outline:none;

    transition:all .25s ease;

    cursor:pointer;

}

.aie-blank:hover,
.aie-dropdown:hover{

    border-color:#C9D4DF;

}

.aie-blank:focus,
.aie-dropdown:focus{

    border-color:var(--aie-primary);

    box-shadow:0 0 0 4px rgba(15,90,74,.12);

}

/* ==========================================================
   Validation
========================================================== */

.aie-correct{

    border-color:var(--aie-success)!important;

    background:#ECFDF3!important;

    color:#166534!important;

}

.aie-wrong{

    border-color:var(--aie-danger)!important;

    background:#FEF2F2!important;

    color:#991B1B!important;

}


/* ==========================================================
   SECTION 9
   BUTTON AREA
========================================================== */

.aie-buttons{

    display:flex;

    gap:14px;

    margin-top:22px;

}


/* Main Button */

.aie-btn{

    flex:1;

    height:48px;

    border:none;

    border-radius:14px;

    background:linear-gradient(
        180deg,
        #0F5A4A,
        #0B4B3D
    );

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.aie-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 22px rgba(15,90,74,.20);

}


/* Outline Button */

.aie-btn-outline{

    width:135px;

    height:48px;

    border-radius:14px;

    border:2px solid var(--aie-primary);

    background:#fff;

    color:var(--aie-primary);

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.aie-btn-outline:hover{

    background:var(--aie-primary);

    color:#fff;

}


/* ==========================================================
   SECTION 10
   HINT
========================================================== */

.aie-hint-wrap{

    margin-top:18px;

}

.aie-hint-btn{

    width:120px;

    height:40px;

    border-radius:12px;

    font-size:15px;

}

.aie-hint{

    margin-top:12px;

    padding:14px;

    border-left:4px solid #FACC15;

    background:#FFF8DB;

    border-radius:10px;

    color:#444;

    display:none;

}

/* A clean visual blank for MCQ sentence prompts. */
.aie-inline-blank{
    display:inline-block;
    width:4.2em;
    height:1.05em;
    margin:0 .18em;
    vertical-align:-.1em;
    border-bottom:2px solid #64748b;
}

/* ==========================================================
   SECTION 11
   RESULT MESSAGE
========================================================== */

.aie-result{

    margin-top:18px;

    padding:12px 16px;

    border-radius:12px;

    font-size:15px;

    font-weight:600;

    display:none;

}

.aie-result.success{

    display:block;

    background:#ECFDF3;

    border:1px solid #BBF7D0;

    color:#166534;

}

.aie-result.error{

    display:block;

    background:#FEF2F2;

    border:1px solid #FECACA;

    color:#991B1B;

}


/* ==========================================================
   SECTION 12
   FINAL RESULT SCREEN
========================================================== */

.aie-finished{

    text-align:center;

    padding:18px;

}

.aie-finished h2{

    margin:0;

    font-size:26px;

    color:var(--aie-text);

}

.aie-finished h3{

    margin:10px 0 20px;

    color:var(--aie-primary);

    font-size:18px;

    font-weight:600;

}


/* ==========================================================
   STATS GRID
========================================================== */

.aie-score{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    margin-bottom:20px;

}

.aie-score-box{

    background:#F8FAFC;

    border:1px solid var(--aie-border);

    border-radius:14px;

    padding:16px;

}

.aie-score-box h4{

    margin:0 0 6px;

    font-size:13px;

    color:#64748B;

    font-weight:500;

}

.aie-score-box strong{

    display:block;

    font-size:22px;

    color:var(--aie-text);

}


/* ==========================================================
   STARS
========================================================== */

.aie-stars{

    font-size:28px;

    margin:18px 0;

}


/* ==========================================================
   XP
========================================================== */

.aie-xp{

    display:inline-block;

    padding:10px 18px;

    border-radius:30px;

    background:#ECFDF3;

    color:#166534;

    font-weight:700;

    font-size:16px;

    margin-bottom:24px;

}


/* ==========================================================
   FINISH BUTTONS
========================================================== */

.aie-finish-buttons{

    display:flex;

    gap:12px;

    justify-content:center;

    margin-top:10px;

}

.aie-finish-buttons .aie-btn{

    flex:1;

}

.aie-finish-buttons .aie-btn-outline{

    width:170px;

}

.aie-speaking-answer{
    margin-top:16px;
    padding:16px;
    border:1px solid #bbf7d0;
    border-radius:12px;
    background:#ecfdf3;
    color:#166534;
}

.aie-speaking-answer h4{
    margin:0 0 8px;
}

.aie-show-speaking-answer{
    width:auto;
    min-width:185px;
    margin-top:14px;
}

.aie-result-warning,
.aie-perfect-message{
    margin:0 0 18px;
    border-radius:12px;
    padding:12px 15px;
    font-size:14px;
    text-align:left;
}

.aie-review-screen{
    padding:8px 0;
}

.aie-review-heading{
    text-align:center;
    margin-bottom:20px;
}

.aie-review-heading h2{
    margin:0 0 5px;
    color:var(--aie-text);
}

.aie-review-heading p{
    margin:0;
    color:var(--aie-light);
}

.aie-review-list{
    display:grid;
    gap:14px;
}

.aie-review-item{
    border:1px solid var(--aie-border);
    border-left:5px solid var(--aie-success);
    border-radius:12px;
    padding:16px;
    text-align:left;
}

.aie-review-item.aie-review-wrong{
    border-left-color:var(--aie-danger);
    background:#fffafa;
}

.aie-review-item h3{
    margin:0 0 9px;
    color:var(--aie-text);
    font-size:15px;
}

.aie-review-item .aie-question{
    margin-bottom:10px;
}

.aie-review-item .aie-dropdown,
.aie-review-item input{
    pointer-events:none;
}

.aie-review-correct-answer{
    margin:12px 0 0;
    padding:10px 12px;
    border-radius:8px;
    background:#ecfdf3;
    color:#166534;
    font-size:14px;
}

.aie-result-warning{
    display:flex;
    align-items:center;
    gap:11px;
    border:1px solid #f7c567;
    background:#fff8df;
    color:#8a4b05;
}

.aie-result-warning > span{
    display:grid;
    place-items:center;
    width:29px;
    height:29px;
    border-radius:50%;
    background:#f59e0b;
    color:#fff;
    font-weight:800;
    font-size:18px;
}

.aie-perfect-message{
    border:1px solid #9ee8ba;
    background:#ecfdf3;
    color:#166534;
    font-weight:600;
    text-align:center;
}

/* ==========================================================
   PERFECT SCORE CELEBRATION
========================================================== */

.aie-celebration-layer{
    position:fixed;
    inset:0;
    z-index:999999;
    overflow:hidden;
    pointer-events:none;
}

.aie-celebration-balloon{
    position:absolute;
    bottom:-100px;
    width:34px;
    height:43px;
    border-radius:50% 50% 48% 48%;
    background:var(--aie-balloon-color);
    box-shadow:inset -7px -8px 0 rgba(0,0,0,.08), inset 7px 7px 0 rgba(255,255,255,.22);
    animation:aie-balloon-burst 2.7s ease-in var(--aie-delay) forwards;
}

.aie-celebration-balloon::after{
    content:"";
    position:absolute;
    left:13px;
    bottom:-8px;
    width:0;
    height:0;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:9px solid var(--aie-balloon-color);
}

.aie-celebration-sparkle{
    position:absolute;
    top:-36px;
    font-size:26px;
    line-height:1;
    text-shadow:0 0 8px currentColor;
    animation:aie-sparkles-fall 3.8s linear var(--aie-delay) forwards;
}

@keyframes aie-balloon-burst{
    0%{transform:translateY(0) scale(.4);opacity:0}
    15%{opacity:1}
    72%{transform:translateY(-72vh) scale(1)}
    88%{transform:translateY(-82vh) scale(1.45);opacity:1}
    100%{transform:translateY(-82vh) scale(0);opacity:0}
}

@keyframes aie-sparkles-fall{
    0%{transform:translate3d(0,-20px,0) rotate(0deg) scale(.5);opacity:0}
    10%{opacity:1}
    100%{transform:translate3d(var(--aie-drift),105vh,0) rotate(540deg) scale(1.15);opacity:0}
}

@media (prefers-reduced-motion:reduce){
    .aie-celebration-layer{display:none}
}