*{ margin:0; padding:0; box-sizing:border-box; }

/* ---------- Design tokens, matched to the LKG Maths skills page ---------- */
:root{
    --primary:#F5821F;
    --primary-dark:#D96C10;
    --secondary:#1E3A5F;
    --secondary-light:#2C4F7C;
    --white:#FFFFFF;
    --bg-light:#F4F7FA;
    --text:#5B6B7C;
    --text-dark:#1A2436;
    --line: rgba(30,58,95,0.12);
    --shadow: 0 18px 40px -18px rgba(30,58,95,0.25);
    --radius: 20px;
    --mint:#0E8C6F;
    --mint-bright:#22C08D;
    --sun:#F5A623;
    --sky:#2E9BF5;
    --pink:#F5427D;
    --purple:#7B4FE0;
}

body{
    font-family:'Poppins', sans-serif;
    background:var(--bg-light);
    color:var(--text-dark);
}

h1,h2,h3{ font-family:'Nunito', sans-serif; }

/* This wrapper is what centers the quiz card now — not body */
.pageWrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    padding:20px;
}

.card{
    width:540px;
    max-width:95%;
    background:var(--white);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
}

/* ---------- Brand header ---------- */
.brandHeader{
    background:linear-gradient(135deg,var(--secondary),var(--secondary-light));
    padding:18px 25px;
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    overflow:hidden;
}

.brandHeader::after{
    content:"";
    position:absolute;
    bottom:0; left:0; right:0;
    height:4px;
    background:var(--primary);
}

/* small decorative shapes echoing the skills page header */
.brandHeader .shape{ position:absolute; opacity:.9; }

.logoRow{
    display:flex;
    align-items:center;
    flex-shrink:0;
    z-index:1;
}

.brandLogo{
    height:56px;
    width:auto;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}

.brandText{
    text-align:left;
    z-index:1;
}

.brandHeader h2{
    color:var(--white);
    font-size:23px;
    font-weight:800;
    line-height:1.2;
}

.brandHeader .tagline{
    color:#ffcf8a;
    font-size:13px;
    font-weight:700;
    letter-spacing:.6px;
    margin-top:5px;
}

.content{
    padding:25px 30px 30px;
}

/* ---------- Slot tracker (5 slots x 5 questions) ---------- */
.slotEyebrow{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    background:rgba(46,155,245,0.1);
    color:var(--sky);
    font-weight:800;
    font-size:12.5px;
    letter-spacing:.04em;
    padding:6px 14px;
    border-radius:999px;
    width:fit-content;
    margin:0 auto 14px;
}

#slotTracker{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
    padding:0 6px;
}

#slotTracker::before{
    content:"";
    position:absolute;
    left:16px; right:16px; top:50%;
    height:2px;
    background:var(--line);
    transform:translateY(-50%);
    z-index:0;
}

.slot-dot{
    position:relative;
    z-index:1;
    width:32px; height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Nunito', sans-serif;
    font-weight:800;
    font-size:13px;
    background:var(--white);
    border:2px solid var(--line);
    color:var(--text);
    transition:.25s;
}

.slot-dot.current{
    border-color:var(--primary);
    color:var(--primary);
    box-shadow:0 0 0 5px rgba(245,130,31,.15);
    transform:scale(1.1);
}

.slot-dot.done{
    background:var(--mint-bright);
    border-color:var(--mint-bright);
    color:var(--white);
}

/* ---------- Star Tracker (questions within the current slot) ---------- */
#starTracker{
    display:flex;
    justify-content:center;
    gap:10px;
    background:linear-gradient(135deg,#fff4e2,#ffe2b0);
    border:2px solid var(--primary);
    border-radius:14px;
    padding:14px 10px;
    margin-bottom:18px;
    box-shadow:inset 0 0 8px rgba(245,130,31,.25);
}

.starSlot{
    font-size:32px;
    color:#c9a878;
    text-shadow:0 1px 2px rgba(0,0,0,.1);
    transition:transform .35s ease, color .35s ease, text-shadow .35s ease;
}

.starSlot.earned{
    color:var(--primary);
    text-shadow:0 0 12px rgba(245,130,31,.9), 0 0 4px rgba(217,108,16,.8);
    animation:starPop .5s ease;
}

@keyframes starPop{
    0%{ transform:scale(0.3) rotate(-15deg); }
    50%{ transform:scale(1.4) rotate(10deg); }
    100%{ transform:scale(1) rotate(0deg); }
}

#progress{
    text-align:center;
    color:var(--secondary);
    font-weight:700;
    font-size:14px;
    letter-spacing:.5px;
    text-transform:uppercase;
    margin-bottom:12px;
}

#question{
    font-family:'Nunito', sans-serif;
    font-size:28px;
    text-align:center;
    margin-bottom:22px;
    font-weight:800;
    color:var(--secondary);
}

.answer-box {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid var(--mint-bright);
    border-radius: 8px;
    background: #fff;
    vertical-align: middle;
    margin: 0 6px;
}

#options{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.option{
    padding:16px;
    font-size:21px;
    font-weight:700;
    font-family:'Nunito', sans-serif;
    border:2px solid var(--line);
    border-radius:12px;
    cursor:pointer;
    background:var(--bg-light);
    color:var(--secondary);
    transition:.25s;
}

.option:hover:not(:disabled){
    background:var(--secondary);
    border-color:var(--secondary);
    color:var(--white);
}

.option:disabled{
    cursor:not-allowed;
}

.correct{ background:var(--mint-bright) !important; border-color:var(--mint-bright) !important; color:var(--white) !important; }
.wrong{ background:var(--pink) !important; border-color:var(--pink) !important; color:var(--white) !important; }

#feedback{
    margin-top:22px;
    min-height:35px;
    text-align:center;
    font-size:19px;
    font-weight:700;
    color:var(--secondary);
}

#nextBtn{
    width:100%;
    margin-top:20px;
    padding:15px;
    font-size:17px;
    font-weight:700;
    font-family:'Nunito', sans-serif;
    border:none;
    border-radius:50px;
    cursor:pointer;
    background:var(--primary);
    color:var(--white);
    display:none;
    letter-spacing:.5px;
    box-shadow:0 6px 16px rgba(245,130,31,.4);
    transition:.2s;
}

#nextBtn:hover{ background:var(--primary-dark); transform:translateY(-1px); }

#summaryCard{ display:none; }

#summaryCard .content{ text-align:center; }

#stars{
    font-size:44px;
    margin:18px 0;
    letter-spacing:8px;
}

#scoreText{
    font-size:19px;
    margin-bottom:10px;
    color:var(--secondary);
    font-weight:600;
}

#rewardMessage{
    font-family:'Nunito', sans-serif;
    font-size:22px;
    font-weight:800;
    color:var(--white);
    background:linear-gradient(135deg,var(--mint-bright),var(--mint));
    padding:14px 20px;
    border-radius:14px;
    margin-bottom:18px;
    line-height:1.4;
    box-shadow:0 8px 20px rgba(34,192,141,.4);
    animation:rewardPop .6s ease;
}

#rewardMessage.perfectScore{
    animation:rewardPop .6s ease, glowPulse 1.6s ease-in-out infinite .6s;
}

@keyframes rewardPop{
    0%{ transform:scale(0.6); opacity:0; }
    60%{ transform:scale(1.08); opacity:1; }
    100%{ transform:scale(1); opacity:1; }
}

@keyframes glowPulse{
    0%,100%{ box-shadow:0 8px 20px rgba(34,192,141,.4); }
    50%{ box-shadow:0 8px 30px rgba(34,192,141,.85), 0 0 22px rgba(34,192,141,.6); }
}

#summaryCard p{
    color:var(--text);
    margin-bottom:18px;
}

.summary-buttons{
    display:flex;
    gap:15px;
}

.summary-buttons button{
    flex:1;
    padding:14px;
    font-size:16px;
    font-weight:700;
    font-family:'Nunito', sans-serif;
    border:none;
    border-radius:50px;
    cursor:pointer;
    transition:.2s;
}

#yesBtn{ background:var(--primary); color:var(--white); box-shadow:0 6px 16px rgba(245,130,31,.4); }
#yesBtn:hover{ background:var(--primary-dark); transform:translateY(-1px); }

#noBtn{ background:var(--bg-light); color:var(--secondary); }
#noBtn:hover{ background:#e3e7ee; }

.computation-overlay #question{
    font-size:22px;
    line-height:1.45;
}