/* ── HEADER ── */

    /* ── BG ── */
    .quiz-bg {
      position:fixed; inset:0; z-index:0;
      background:radial-gradient(ellipse at 30% 20%,rgba(107,33,212,.15),transparent 55%),
                 radial-gradient(ellipse at 80% 80%,rgba(107,33,212,.1),transparent 50%);
      pointer-events:none;
    }

    /* ── HERO ── */
    .hero {
      position:relative; z-index:1;
      text-align:center; padding:80px 20px 50px;
    }
    .hero-title .t1 { color:var(--white); }
    .hero-title .t2 { background:linear-gradient(135deg,var(--purple-light),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

    /* ── QUIZ WRAPPER ── */
    .quiz-wrap { position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 24px 100px; }

    /* ── PROGRESS ── */
    .progress-wrap { margin-bottom:40px; }
    .progress-meta { display:flex; justify-content:space-between; margin-bottom:10px; }
    .progress-label { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:3px; color:rgba(255,255,255,.35); text-transform:uppercase; }
    .progress-count { font-family:'Bebas Neue',sans-serif; font-size:20px; color:var(--purple-light); }
    .progress-track { height:4px; background:rgba(255,255,255,.06); position:relative; overflow:hidden; }
    .progress-fill { height:100%; background:linear-gradient(90deg,var(--purple),var(--purple-light)); width:0; transition:width .8s cubic-bezier(.25,1,.5,1); position:relative; }
    .progress-fill::after { content:''; position:absolute; right:0; top:-4px; bottom:-4px; width:3px; background:#fff; box-shadow:0 0 10px var(--purple-light); }

    /* ── QUESTION CARD ── */
    .question-card {
      background:rgba(255,255,255,.025);
      border:1px solid rgba(107,33,212,.25);
      padding:48px 44px;
      position:relative; overflow:hidden;
      animation:cardEnter .5s cubic-bezier(.16,1,.3,1) both;
    }
    @keyframes cardEnter{ from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
    .question-card.exit { animation:cardExit .35s ease forwards; }
    @keyframes cardExit{ to{opacity:0;transform:translateY(-24px)} }
    .question-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--purple),var(--purple-light),var(--gold)); }
    .q-num { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:4px; color:var(--purple-light); text-transform:uppercase; margin-bottom:20px; display:block; }
    .q-text { font-size:clamp(18px,3vw,26px); line-height:1.6; color:var(--white); margin-bottom:36px; font-weight:700; }

    /* ── OPTIONS ── */
    .options { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .opt {
      padding:18px 22px;
      background:rgba(255,255,255,.02);
      border:1px solid rgba(107,33,212,.2);
      cursor:pointer; position:relative; overflow:hidden;
      transition:border-color .3s, background .3s, transform .2s;
      text-align:left;
      display:flex; align-items:flex-start; gap:14px;
    }
    .opt::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(107,33,212,.15),transparent); opacity:0; transition:opacity .3s; }
    .opt:hover { border-color:var(--purple-light); background:rgba(107,33,212,.08); transform:translateX(4px); }
    .opt:hover::before { opacity:1; }
    .opt.selected { border-color:var(--purple-light); background:rgba(107,33,212,.15); pointer-events:none; }
    .opt.selected.correct { border-color:#4eff91; background:rgba(78,255,145,.08); }
    .opt.selected.wrong  { border-color:var(--red); background:rgba(255,51,102,.08); }
    .opt-key { font-family:'Bebas Neue',sans-serif; font-size:22px; color:var(--purple-light); flex-shrink:0; min-width:24px; transition:color .3s; }
    .opt:hover .opt-key, .opt.selected .opt-key { color:var(--white); }
    .opt-text { font-size:14px; line-height:1.6; color:rgba(255,255,255,.75); padding-top:2px; }

    @media(max-width:600px){ .options{grid-template-columns:1fr;} .question-card{padding:32px 24px;} }

    /* ── RESULT ── */
    #resultView { display:none; }
    #resultView.show { display:block; animation:cardEnter .6s cubic-bezier(.16,1,.3,1) both; }
    .result-card {
      background:rgba(255,255,255,.025);
      border:1px solid rgba(107,33,212,.3);
      padding:60px 44px;
      text-align:center; position:relative; overflow:hidden;
    }
    .result-card::before { content:''; position:absolute; inset:-100%; background:conic-gradient(from 0deg,transparent,var(--purple),transparent); animation:resultSpin 4s linear infinite; opacity:.2; }
    @keyframes resultSpin{ to{transform:rotate(360deg)} }
    .result-card::after { content:''; position:absolute; inset:2px; background:rgba(6,6,8,.92); z-index:0; }
    .result-card > * { position:relative; z-index:1; }
    .result-icon { font-size:80px; display:block; margin-bottom:24px; animation:rIconFloat 3s ease-in-out infinite; }
    @keyframes rIconFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
    .result-level { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:5px; color:var(--purple-light); text-transform:uppercase; margin-bottom:16px; display:block; }
    .result-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(48px,9vw,100px); line-height:.9; margin-bottom:24px; background:linear-gradient(135deg,var(--purple-light),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .result-score-wrap { margin:28px 0; }
    .result-score { font-family:'Bebas Neue',sans-serif; font-size:80px; line-height:1; color:var(--purple-light); display:block; }
    .result-score-label { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:4px; color:rgba(255,255,255,.3); }
    .result-desc { font-size:15px; line-height:1.9; color:rgba(255,255,255,.6); max-width:500px; margin:24px auto 40px; }
    .result-bar-wrap { margin:0 auto 40px; max-width:400px; }
    .result-bar-track { height:8px; background:rgba(255,255,255,.06); position:relative; overflow:hidden; margin-bottom:10px; }
    .result-bar-fill { height:100%; background:linear-gradient(90deg,var(--purple),var(--purple-light),var(--gold)); width:0; transition:width 1.5s 0.3s cubic-bezier(.25,1,.5,1); }
    .result-bar-label { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:3px; color:rgba(255,255,255,.3); display:flex; justify-content:space-between; }
    .btn-retry {
      padding:16px 48px; border:1px solid var(--purple-light); background:transparent;
      color:var(--purple-light); cursor:pointer;
      font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:3px;
      position:relative; overflow:hidden; transition:color .3s, box-shadow .3s;
    }
    .btn-retry::before { content:''; position:absolute; inset:0; background:var(--purple); transform:scaleX(0); transform-origin:left; transition:transform .35s; }
    .btn-retry:hover { color:#fff; box-shadow:0 0 30px rgba(107,33,212,.5); }
    .btn-retry:hover::before { transform:scaleX(1); }
    .btn-retry span { position:relative; z-index:1; }

    /* ── PARTICLES ── */
    #confetti { position:fixed; inset:0; pointer-events:none; z-index:50; }

    /* ── FOOTER ── */