*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--modal-bg:#0c0c1e;--modal-border:rgba(167,139,250,.3);--modal-title:#a78bfa;--modal-accent:#34d399;--modal-accent-glow:rgba(52,211,153,.4);--space:#0c0c1e;--nebula:#1a1a3e;--star:#a78bfa;--green:#34d399;--red:#f87171;--gold:#fbbf24;--dim:rgba(167,139,250,.45)}
html,body{width:100%;height:100%;overflow:hidden;background:var(--space);color:#e0e0ff;font-family:'Exo 2',sans-serif;user-select:none}
canvas#starfield{position:fixed;inset:0;z-index:0;pointer-events:none}
.page{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.8rem;padding:1rem}
h1{font-size:clamp(1.4rem,4vw,2.2rem);font-weight:800;letter-spacing:.08em;background:linear-gradient(135deg,var(--star),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hud{display:flex;gap:1.4rem;font-size:.82rem;font-weight:500;color:var(--dim)}
.hud b{color:var(--star)}
.timer-bar{width:min(320px,90vw);height:8px;background:rgba(167,139,250,.15);border-radius:4px;overflow:hidden}
.timer-fill{height:100%;background:linear-gradient(90deg,var(--star),var(--green));border-radius:4px;transition:width .1s linear}
.question-box{background:rgba(26,26,62,.7);border:2px solid rgba(167,139,250,.3);border-radius:16px;padding:1.5rem 2rem;text-align:center;min-width:min(300px,85vw)}
.question{font-size:clamp(1.8rem,6vw,3rem);font-weight:800;color:#e0e0ff;letter-spacing:.05em}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:.8rem}
.ans-btn{background:rgba(167,139,250,.1);border:2px solid rgba(167,139,250,.3);color:#e0e0ff;font-family:'Exo 2',sans-serif;font-size:clamp(1rem,3vw,1.4rem);font-weight:700;padding:.65rem 1rem;border-radius:10px;cursor:pointer;transition:all .15s}
.ans-btn:hover{background:rgba(167,139,250,.2);border-color:var(--star)}
.ans-btn.correct{background:rgba(52,211,153,.2);border-color:var(--green);color:var(--green)}
.ans-btn.wrong{background:rgba(248,113,113,.15);border-color:var(--red);color:var(--red)}
.feedback{font-size:.9rem;font-weight:600;height:1.4rem;color:var(--green)}
.feedback.bad{color:var(--red)}
.overlay{position:fixed;inset:0;background:rgba(12,12,30,.93);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;z-index:20;text-align:center;padding:1rem}
.overlay h2{font-size:clamp(1.2rem,4vw,2rem);font-weight:800;color:var(--star)}
.overlay p{font-size:.85rem;color:var(--dim);max-width:260px;line-height:1.6}
.sbtn{background:linear-gradient(135deg,var(--star),var(--green));color:var(--space);font-family:'Exo 2',sans-serif;font-weight:800;font-size:.95rem;padding:.6rem 2rem;border:none;border-radius:50px;cursor:pointer;letter-spacing:.05em}
.sbtn:hover{filter:brightness(1.15)}
footer{position:fixed;bottom:0;width:100%;text-align:center;padding:.3rem;font-size:.63rem;color:rgba(167,139,250,.2);border-top:1px solid rgba(167,139,250,.12)}
footer a{color:rgba(52,211,153,.4);text-decoration:none}footer a:hover{color:var(--green)}
.fl{display:inline-flex;gap:1rem}

/* ── WIN MODAL ── */
.win-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:100;display:flex;align-items:center;justify-content:center;animation:fadeInBD .25s ease;backdrop-filter:blur(4px)}
@keyframes fadeInBD{from{opacity:0}to{opacity:1}}
.win-modal{background:var(--modal-bg,#1a1a2e);border:2px solid var(--modal-border,rgba(255,255,255,.2));border-radius:20px;padding:2rem 1.8rem;text-align:center;max-width:min(320px,88vw);width:100%;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04);animation:popInModal .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes popInModal{from{transform:scale(.5) translateY(40px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.win-modal .wm-icon{font-size:3rem;display:block;margin-bottom:.6rem;animation:spinOnce .5s ease .1s both}
@keyframes spinOnce{from{transform:rotate(-20deg) scale(.6)}to{transform:rotate(0deg) scale(1)}}
.win-modal .wm-title{font-size:1.5rem;font-weight:800;margin-bottom:.35rem;color:var(--modal-title,#fff)}
.win-modal .wm-stars{font-size:1.6rem;margin:.3rem 0;letter-spacing:.1rem}
.win-modal .wm-body{font-size:.84rem;color:rgba(255,255,255,.55);line-height:1.65;margin-bottom:1.2rem}
.win-modal .wm-body b{color:rgba(255,255,255,.85)}
.win-modal-btns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.wm-btn{font-family:inherit;font-weight:700;font-size:.82rem;padding:.52rem 1.4rem;border-radius:50px;border:none;cursor:pointer;letter-spacing:.04em;transition:transform .12s,filter .12s}
.wm-btn:active{transform:scale(.94)}
.wm-btn-primary{background:var(--modal-accent,#00d2ff);color:#0a0a1a;box-shadow:0 4px 18px var(--modal-accent-glow,rgba(0,210,255,.35))}
.wm-btn-primary:hover{filter:brightness(1.15)}
.wm-btn-secondary{background:rgba(255,255,255,.08);color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.14)}
.wm-btn-secondary:hover{background:rgba(255,255,255,.14);color:#fff}