/* ═══════════════════════════════════════════════════════
   § 1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ═══════════════════════════════════════════════════════ */
:root {
  --bg:          #060912;
  --bg2:         #0c1220;
  --surface:     #0f1929;
  --card:        #141f32;
  --card2:       #1a2840;
  --border:      #1a2d4a;
  --border2:     #243a5e;
  --gold:        #f4b942;
  --gold2:       #e8a020;
  --gold-dim:    rgba(244,185,66,0.12);
  --blue:        #3b8beb;
  --blue2:       #5ba3ff;
  --blue-dim:    rgba(59,139,235,0.12);
  --green:       #12c984;
  --green-dim:   rgba(18,201,132,0.12);
  --red:         #ff4757;
  --red-dim:     rgba(255,71,87,0.1);
  --purple:      #9b6dff;
  --orange:      #f97316;
  --pink:        #ec4899;
  --cyan:        #06b6d4;
  --lime:        #84cc16;
  --text:        #dce8ff;
  --text2:       #cbd5e1;
  --text3:       #94a3b8;
  --glow-gold:   rgba(244,185,66,0.25);
  --glow-blue:   rgba(59,139,235,0.25);
  --glow-green:  rgba(18,201,132,0.2);
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --transition:  0.25s cubic-bezier(0.4,0,0.2,1);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.35);
}

/* ═══════════════════════════════════════════════════════
   § 2. RESET & BASE
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  font-family:'Cairo', sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.5;
}

/* Tech grid background */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(59,139,235,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,139,235,0.035) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none; z-index:0;
}
body::after {
  content:'';
  position:fixed; inset:0;
  background:radial-gradient(ellipse 90% 60% at 50% -5%,
    rgba(59,139,235,0.07), transparent 65%);
  pointer-events:none; z-index:0;
}

/* ═══════════════════════════════════════════════════════
   § 3. SCREEN MANAGEMENT
   ═══════════════════════════════════════════════════════ */
.screen { display:none; position:relative; z-index:1; animation:fadeUp 0.35s ease both; }
.screen.active { display:block; }
#home.active, #result.active, #modeSelect.active {
  display:flex; flex-direction:column;
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ═══════════════════════════════════════════════════════
   § 4. NAVBAR
   ═══════════════════════════════════════════════════════ */
.navbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.9rem 1.8rem;
  border-bottom:1px solid var(--border);
  background:rgba(6,9,18,0.85);
  backdrop-filter:blur(14px);
  position:sticky; top:0; z-index:200;
  gap:0.8rem;
}
.nav-logo { display:flex; align-items:center; gap:0.65rem; flex-shrink:0; }
.nav-icon {
  width:36px; height:36px; border-radius:var(--radius-sm);
  background:linear-gradient(135deg, var(--gold), var(--gold2));
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow:0 0 18px var(--glow-gold);
}
.nav-brand {
  font-family:'Unbounded', sans-serif; font-size:0.82rem;
  letter-spacing:1px;
  background:linear-gradient(135deg, var(--gold), var(--blue2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.nav-right { display:flex; align-items:center; gap:0.6rem; }
.nav-btn {
  height:34px; padding:0 0.9rem;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); cursor:pointer;
  font-family:'Cairo', sans-serif; font-size:0.8rem;
  color:var(--text2); transition:var(--transition);
  display:flex; align-items:center; gap:0.4rem;
  white-space:nowrap;
}
.nav-btn:hover { border-color:var(--border2); color:var(--text); }
.nav-btn.lang-btn { font-weight:700; min-width:70px; justify-content:center; }
.nav-btn.settings-btn { font-size:1rem; padding:0 0.7rem; }
.nav-version {
  font-family:'IBM Plex Mono', monospace; font-size:0.62rem;
  color:var(--text3); background:var(--surface);
  border:1px solid var(--border); padding:0.22rem 0.55rem;
  border-radius:20px; display:none;
}
@media(min-width:480px) { .nav-version { display:block; } }

/* ═══════════════════════════════════════════════════════
   § 5. HERO SECTION
   ═══════════════════════════════════════════════════════ */
.hero {
  text-align:center; padding:3.5rem 1.5rem 2.5rem;
  max-width:720px; margin:0 auto;
}
.hero-pill {
  display:inline-flex; align-items:center; gap:0.45rem;
  font-size:0.73rem; color:var(--gold);
  font-family:'IBM Plex Mono', monospace;
  border:1px solid rgba(244,185,66,0.3);
  background:rgba(244,185,66,0.06);
  padding:0.38rem 1rem; border-radius:30px;
  margin-bottom:1.6rem;
  animation:pillGlow 2.5s ease-in-out infinite;
}
@keyframes pillGlow {
  0%,100%{ box-shadow:0 0 0 transparent; }
  50%    { box-shadow:0 0 22px rgba(244,185,66,0.2); }
}
.hero-title {
  font-family:'Unbounded', sans-serif;
  font-size:clamp(1.6rem, 5vw, 2.8rem);
  font-weight:900; line-height:1.2; margin-bottom:0.9rem;
}
.hero-title span {
  background:linear-gradient(135deg, var(--gold), var(--blue2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-sub {
  color:var(--text2); font-size:0.92rem; line-height:1.75;
  margin-bottom:2.2rem; max-width:480px; margin-left:auto; margin-right:auto;
}
.hero-stats { display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.hstat { text-align:center; min-width:60px; }
.hstat-val {
  font-family:'IBM Plex Mono', monospace;
  font-size:1.5rem; font-weight:600; color:var(--gold); display:block;
}
.hstat-lbl { font-size:0.72rem; color:var(--text3); }

/* ═══════════════════════════════════════════════════════
   § 6. LEVELS SECTION
   ═══════════════════════════════════════════════════════ */
.section-header {
  display:flex; align-items:center; gap:0.8rem;
  padding:0 1.5rem; margin-bottom:1.2rem;
  max-width:1100px; margin-left:auto; margin-right:auto;
}
.sh-line { flex:1; height:1px; background:var(--border); }
.sh-label {
  font-size:0.72rem; color:var(--text3);
  font-family:'IBM Plex Mono', monospace; white-space:nowrap;
}

.levels-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
  gap:1rem; padding:0 1.5rem 2rem;
  max-width:1100px; margin:0 auto;
}

/* ── Level Card ── */
.level-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.3rem;
  cursor:pointer; transition:all var(--transition);
  position:relative; overflow:hidden;
}
.level-card::before {
  content:''; position:absolute;
  top:0; right:0; left:0; height:2px;
  background:var(--lc, var(--gold));
  opacity:0; transition:opacity var(--transition);
}
.level-card.unlocked:hover {
  border-color:var(--lc, var(--gold));
  transform:translateY(-4px);
  box-shadow:0 14px 40px rgba(0,0,0,0.4),
             0 0 30px var(--lglow, transparent);
}
.level-card.unlocked:hover::before { opacity:1; }
.level-card.locked   { opacity:0.32; cursor:not-allowed; filter:grayscale(0.4); }
.level-card.completed{ border-color:rgba(18,201,132,0.28); }

.card-top {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:0.9rem;
}
.card-icon {
  width:46px; height:46px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
}
.card-badge {
  font-size:0.6rem; font-family:'IBM Plex Mono', monospace;
  color:var(--text3); background:var(--surface);
  border:1px solid var(--border); padding:0.22rem 0.5rem;
  border-radius:6px; text-align:center; line-height:1.4;
}
.card-name  { font-size:0.97rem; font-weight:700; margin-bottom:0.28rem; }
.card-desc  { font-size:0.78rem; color:var(--text2); line-height:1.5; margin-bottom:0.9rem; }
.card-meta  {
  display:flex; gap:0.9rem; font-size:0.73rem; color:var(--text3);
  font-family:'IBM Plex Mono', monospace;
  border-top:1px solid var(--border); padding-top:0.75rem;
}
.card-stars { display:flex; gap:3px; margin-top:0.55rem; }
.cstar      { font-size:0.88rem; color:var(--border2); transition:var(--transition); }
.cstar.on   { color:var(--gold); text-shadow:0 0 8px var(--glow-gold); }
.lock-note  {
  font-size:0.72rem; color:var(--text3); margin-top:0.7rem;
  display:flex; align-items:center; gap:0.35rem;
}

/* ═══════════════════════════════════════════════════════
   § 7. MODALS (Base)
   ═══════════════════════════════════════════════════════ */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(6px);
  z-index:500; align-items:center; justify-content:center;
  padding:1rem;
}
.modal-overlay.open { display:flex; animation:fadeIn 0.2s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.modal {
  background:var(--card); border:1px solid var(--border2);
  border-radius:var(--radius-xl); padding:1.8rem;
  width:100%; max-width:440px;
  animation:slideModal 0.3s cubic-bezier(0.34,1.2,0.64,1);
  position:relative;
}
@keyframes slideModal {
  from{transform:scale(0.92) translateY(20px); opacity:0}
  to  {transform:scale(1)    translateY(0);    opacity:1}
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.4rem;
}
.modal-title { font-size:1.05rem; font-weight:700; }
.modal-close {
  width:30px; height:30px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--border);
  cursor:pointer; color:var(--text2); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition);
}
.modal-close:hover { color:var(--text); background:var(--border); }

/* ── Settings Modal ── */
.settings-section { margin-bottom:1.4rem; }
.settings-label {
  font-size:0.78rem; color:var(--text2); font-weight:600;
  margin-bottom:0.7rem; display:flex; align-items:center; gap:0.4rem;
}
.settings-options { display:flex; gap:0.5rem; flex-wrap:wrap; }
.setting-opt {
  padding:0.5rem 1rem; border-radius:var(--radius-sm);
  background:var(--surface); border:1.5px solid var(--border);
  cursor:pointer; font-family:'Cairo', sans-serif; font-size:0.82rem;
  color:var(--text2); transition:var(--transition);
}
.setting-opt:hover  { border-color:var(--border2); color:var(--text); }
.setting-opt.active {
  border-color:var(--gold); background:rgba(244,185,66,0.08);
  color:var(--gold); font-weight:700;
}
.settings-toggle {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.7rem 0;
}
.toggle-track {
  width:44px; height:24px; border-radius:12px;
  background:var(--border); cursor:pointer; position:relative;
  transition:background var(--transition); flex-shrink:0;
}
.toggle-track.on { background:var(--green); }
.toggle-thumb {
  width:18px; height:18px; border-radius:50%; background:#fff;
  position:absolute; top:3px; left:3px;
  transition:transform var(--transition);
}
.toggle-track.on .toggle-thumb { transform:translateX(20px); }
.toggle-label { font-size:0.85rem; color:var(--text2); }
.danger-btn {
  width:100%; padding:0.75rem; border-radius:var(--radius);
  background:rgba(255,71,87,0.08); border:1.5px solid rgba(255,71,87,0.35);
  color:var(--red); font-family:'Cairo', sans-serif; font-size:0.88rem;
  font-weight:700; cursor:pointer; transition:var(--transition);
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
}
.danger-btn:hover { background:rgba(255,71,87,0.15); }

/* ── Confirm Modal ── */
.confirm-msg { font-size:0.9rem; color:var(--text2); margin-bottom:1.4rem; line-height:1.65; }
.confirm-btns { display:flex; gap:0.7rem; }
.btn-danger  {
  flex:1; padding:0.75rem;
  background:linear-gradient(135deg, var(--red), #cc2030);
  border:none; border-radius:var(--radius);
  font-family:'Cairo', sans-serif; font-size:0.9rem; font-weight:700;
  color:#fff; cursor:pointer; transition:var(--transition);
}
.btn-cancel  {
  flex:1; padding:0.75rem;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius);
  font-family:'Cairo', sans-serif; font-size:0.9rem; font-weight:600;
  color:var(--text); cursor:pointer; transition:var(--transition);
}
.btn-danger:hover  { transform:scale(1.03); }
.btn-cancel:hover  { border-color:var(--border2); }

/* ── Mode Select Screen ── */
#modeSelect {
  min-height:100vh; align-items:center; justify-content:center; padding:2rem;
}
.mode-container { text-align:center; max-width:580px; width:100%; }
.mode-title {
  font-family:'Unbounded', sans-serif;
  font-size:1.3rem; color:var(--gold); margin-bottom:0.4rem;
}
.mode-sub { color:var(--text2); font-size:0.87rem; margin-bottom:2rem; }
.modes-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; margin-bottom:1.8rem; }
@media(max-width:400px) { .modes-grid { grid-template-columns:1fr; } }

.mode-btn {
  background:var(--card); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); padding:1.4rem 1rem;
  cursor:pointer; transition:all var(--transition);
  text-align:center; color:var(--text);
  font-family:'Cairo', sans-serif;
}
.mode-btn:hover   { border-color:var(--gold); transform:translateY(-3px);
                    box-shadow:0 0 28px var(--glow-gold); }
.mode-btn.selected{ border-color:var(--gold); background:rgba(244,185,66,0.07); }
.mb-icon   { font-size:1.9rem; margin-bottom:0.6rem; display:block; }
.mb-name   { font-size:0.95rem; font-weight:700; margin-bottom:0.35rem; }
.mb-desc   { font-size:0.77rem; color:var(--text2); line-height:1.5; }

.mode-actions { display:flex; gap:0.7rem; justify-content:center; flex-wrap:wrap; }
.btn-back {
  padding:0.75rem 1.5rem; border-radius:var(--radius);
  background:var(--card); border:1px solid var(--border);
  color:var(--text2); cursor:pointer;
  font-family:'Cairo', sans-serif; font-size:0.88rem;
  transition:var(--transition); min-width:100px;
}
.btn-back:hover { border-color:var(--border2); color:var(--text); }
.btn-primary {
  padding:0.82rem 2.2rem; border-radius:var(--radius);
  background:linear-gradient(135deg, var(--gold), var(--gold2));
  border:none; color:#180a00;
  font-family:'Cairo', sans-serif; font-size:0.95rem; font-weight:700;
  cursor:pointer; transition:var(--transition); min-width:140px;
}
.btn-primary:hover { transform:scale(1.04); box-shadow:0 8px 28px var(--glow-gold); }

/* ═══════════════════════════════════════════════════════
   § 8. QUIZ SCREEN
   ═══════════════════════════════════════════════════════ */
#quiz { min-height:100vh; }

.quiz-nav {
  display:flex; align-items:center; gap:0.8rem;
  padding:0.9rem 1.4rem;
  border-bottom:1px solid var(--border);
  background:rgba(6,9,18,0.9); backdrop-filter:blur(14px);
  position:sticky; top:0; z-index:100;
}
.qnav-back {
  width:36px; height:36px; flex-shrink:0; border-radius:var(--radius-sm);
  background:var(--card); border:1px solid var(--border);
  cursor:pointer; color:var(--text); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition);
}
.qnav-back:hover { background:var(--border); }
.qnav-info  { flex:1; min-width:0; }
.qnav-title { font-size:0.83rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qnav-level { font-size:0.67rem; color:var(--text3); font-family:'IBM Plex Mono', monospace; }
.qnav-right { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }

.mode-tag {
  font-size:0.65rem; font-family:'IBM Plex Mono', monospace;
  padding:0.23rem 0.55rem; border-radius:20px; white-space:nowrap;
}
.mode-tag.learn { background:rgba(18,201,132,0.1); color:var(--green);  border:1px solid rgba(18,201,132,0.3); }
.mode-tag.exam  { background:rgba(255,71,87,0.1);  color:var(--red);    border:1px solid rgba(255,71,87,0.3);  }

.timer-chip {
  font-family:'IBM Plex Mono', monospace; font-size:0.85rem;
  color:var(--gold); background:var(--card); border:1px solid var(--border);
  padding:0.28rem 0.75rem; border-radius:var(--radius-sm);
  min-width:56px; text-align:center; transition:color 0.3s;
}
.timer-chip.urgent { color:var(--red); animation:blink 0.5s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.45} }

.score-chip {
  background:var(--card); border:1px solid var(--border);
  padding:0.28rem 0.7rem; border-radius:var(--radius-sm);
  font-size:0.8rem; color:var(--gold);
  font-family:'IBM Plex Mono', monospace;
}

/* ── Quiz Body ── */
.quiz-body { padding:1.4rem; max-width:680px; margin:0 auto; }

.progress-wrap { margin-bottom:1.8rem; }
.progress-meta {
  display:flex; justify-content:space-between;
  font-size:0.7rem; color:var(--text3);
  font-family:'IBM Plex Mono', monospace; margin-bottom:0.45rem;
}
.progress-track { height:4px; background:var(--card); border-radius:4px; overflow:hidden; }
.progress-fill  {
  height:100%;
  background:linear-gradient(90deg, var(--blue), var(--gold));
  border-radius:4px; transition:width 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* ── Question Card ── */
.q-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.6rem;
  margin-bottom:1rem; position:relative; overflow:hidden;
}
.q-card::after {
  content:''; position:absolute; top:-30px; right:-30px;
  width:100px; height:100px;
  background:radial-gradient(circle, rgba(244,185,66,0.05), transparent 70%);
  pointer-events:none;
}
.q-num {
  font-size:0.66rem; color:var(--text3); letter-spacing:2px;
  font-family:'IBM Plex Mono', monospace; margin-bottom:0.75rem;
  display:flex; align-items:center; gap:0.45rem;
}
.q-num::before {
  content:''; display:inline-block; width:6px; height:6px;
  border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--glow-gold);
}
.q-text { font-size:1.06rem; font-weight:600; line-height:1.75; }

/* ── Options ── */
.options-wrap { display:flex; flex-direction:column; gap:0.55rem; margin-bottom:0.9rem; }

.opt {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:0.9rem 1.1rem;
  cursor:pointer; transition:all 0.2s;
  display:flex; align-items:center; gap:0.85rem;
  font-family:'Cairo', sans-serif; font-size:0.9rem;
  color:var(--text); text-align:right;
  position:relative; overflow:hidden;
}
.opt::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, transparent, rgba(59,139,235,0.05));
  opacity:0; transition:opacity 0.2s;
}
.opt:hover:not(:disabled)::before { opacity:1; }
.opt:hover:not(:disabled) {
  border-color:var(--blue);
  transform:translateX(-3px);
}
[lang="en"] .opt:hover:not(:disabled) { transform:translateX(3px); }

.opt-letter {
  width:28px; height:28px; border-radius:var(--radius-sm); flex-shrink:0;
  background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; font-weight:700; font-family:'IBM Plex Mono', monospace;
  transition:all 0.2s;
}
.opt-text { flex:1; }
.opt:disabled { cursor:default; }
.opt.correct { border-color:var(--green); background:rgba(18,201,132,0.07); }
.opt.correct .opt-letter { background:var(--green); border-color:var(--green); color:#000; }
.opt.wrong   { border-color:var(--red);   background:rgba(255,71,87,0.07);  }
.opt.wrong   .opt-letter { background:var(--red);   border-color:var(--red);   color:#fff; }

/* ── Feedback ── */
.feedback {
  display:none; border-radius:var(--radius); padding:0.95rem 1.1rem;
  font-size:0.86rem; line-height:1.65;
  animation:slideUp 0.3s ease; margin-bottom:0.8rem;
}
@keyframes slideUp {
  from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)}
}
.feedback.ok   { background:rgba(18,201,132,0.08); border:1px solid rgba(18,201,132,0.28); color:#7eecc5; }
.feedback.fail { background:rgba(255,71,87,0.07);  border:1px solid rgba(255,71,87,0.28);  color:#ffa0ac; }

/* ── Next Button ── */
.next-btn {
  width:100%; background:linear-gradient(135deg, var(--gold), var(--gold2));
  border:none; border-radius:var(--radius); padding:0.95rem;
  font-family:'Cairo', sans-serif; font-size:0.97rem; font-weight:700;
  color:#180a00; cursor:pointer; transition:var(--transition);
  display:none; box-shadow:0 4px 18px var(--glow-gold);
  min-height:48px;
}
.next-btn:hover { transform:scale(1.02); box-shadow:0 8px 28px var(--glow-gold); }

/* ═══════════════════════════════════════════════════════
   § 9. RESULT SCREEN
   ═══════════════════════════════════════════════════════ */
#result {
  min-height:100vh; align-items:center; justify-content:center;
  padding:2rem;
}
.result-wrap { max-width:480px; width:100%; text-align:center; }

.result-icon {
  font-size:4.5rem; margin-bottom:0.8rem;
  animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes popIn {
  0%  { transform:scale(0) rotate(-20deg); }
  100%{ transform:scale(1) rotate(0); }
}

.result-title {
  font-family:'Unbounded', sans-serif;
  font-size:clamp(1.2rem,4vw,1.7rem); font-weight:900; margin-bottom:0.4rem;
}
.result-stars { font-size:2rem; margin:0.9rem 0; letter-spacing:5px; }

/* ── Score Ring ── */
.score-ring {
  width:130px; height:130px; margin:1.2rem auto;
  position:relative; display:flex; align-items:center; justify-content:center;
}
.score-ring svg { position:absolute; inset:0; transform:rotate(-90deg); }
.ring-bg  { fill:none; stroke:var(--card); stroke-width:9; }
.ring-arc {
  fill:none; stroke:url(#ringGrad); stroke-width:9;
  stroke-linecap:round; stroke-dasharray:345; stroke-dashoffset:345;
  transition:stroke-dashoffset 1.1s cubic-bezier(0.4,0,0.2,1);
}
.ring-val {
  font-family:'IBM Plex Mono', monospace; font-size:1.7rem; font-weight:600;
  color:var(--gold); position:relative; z-index:1; line-height:1;
}
.ring-pct { font-size:0.62rem; color:var(--text3); display:block; margin-top:2px; }

/* ── Result Stats ── */
.result-stats {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0.7rem; margin:1.2rem 0;
}
.rstat {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:0.85rem 0.4rem;
}
.rstat-val {
  font-family:'IBM Plex Mono', monospace;
  font-size:1.25rem; font-weight:600; display:block;
}
.rstat-lbl { font-size:0.69rem; color:var(--text3); margin-top:0.2rem; }
.rstat.green .rstat-val { color:var(--green); }
.rstat.red   .rstat-val { color:var(--red);   }
.rstat.gold  .rstat-val { color:var(--gold);  }

.result-msg {
  color:var(--text2); font-size:0.9rem; line-height:1.7;
  margin-bottom:1.2rem;
}

/* ── Unlock Banner ── */
.unlock-banner {
  background:rgba(18,201,132,0.08); border:1px solid rgba(18,201,132,0.32);
  border-radius:var(--radius); padding:0.85rem 1.2rem; margin-bottom:1.2rem;
  font-weight:700; color:var(--green); display:none;
  animation:glowPulse 1.8s ease-in-out infinite alternate;
}
@keyframes glowPulse {
  from{ box-shadow:0 0 0 rgba(18,201,132,0); }
  to  { box-shadow:0 0 22px rgba(18,201,132,0.3); }
}

/* ── Result Buttons ── */
.result-btns { display:flex; gap:0.7rem; justify-content:center; flex-wrap:wrap; }
.rbtn-primary {
  padding:0.85rem 1.7rem; border-radius:var(--radius);
  background:linear-gradient(135deg, var(--gold), var(--gold2));
  border:none; color:#180a00;
  font-family:'Cairo', sans-serif; font-size:0.93rem; font-weight:700;
  cursor:pointer; transition:var(--transition); min-height:46px;
}
.rbtn-secondary {
  padding:0.85rem 1.7rem; border-radius:var(--radius);
  background:var(--card); border:1px solid var(--border);
  font-family:'Cairo', sans-serif; font-size:0.93rem; font-weight:600;
  color:var(--text); cursor:pointer; transition:var(--transition); min-height:46px;
}
.rbtn-whatsapp {
  padding:0.85rem 1.7rem; border-radius:var(--radius);
  background:rgba(37,211,102,0.12); border:1px solid rgba(37,211,102,0.35);
  font-family:'Cairo', sans-serif; font-size:0.93rem; font-weight:600;
  color:#25d366; cursor:pointer; transition:var(--transition); min-height:46px;
  display:flex; align-items:center; gap:0.4rem;
}
.rbtn-primary:hover,.rbtn-secondary:hover,.rbtn-whatsapp:hover { transform:scale(1.04); }
.rbtn-primary:hover   { box-shadow:0 8px 28px var(--glow-gold); }
.rbtn-whatsapp:hover  { background:rgba(37,211,102,0.2); }

/* ═══════════════════════════════════════════════════════
   § 10. FOOTER
   ═══════════════════════════════════════════════════════ */
.site-footer {
  border-top:1px solid var(--border); padding:1.3rem 1.5rem;
  margin-top:auto; text-align:center;
}
.footer-inner { max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:0.5rem; align-items:center; }
.footer-disclaimer { font-size:0.7rem; color:var(--text3); line-height:1.6; max-width:580px; }
.footer-cr { font-size:0.7rem; color:var(--text3); font-family:'IBM Plex Mono', monospace; }
.footer-cr span { color:var(--gold); }

/* ═══════════════════════════════════════════════════════
   § 11. CONFETTI
   ═══════════════════════════════════════════════════════ */
.confetti-p {
  position:fixed; border-radius:2px;
  animation:cFall linear forwards; pointer-events:none; z-index:999;
}
@keyframes cFall {
  0%  { transform:translateY(-20px) rotate(0deg);   opacity:1; }
  100%{ transform:translateY(105vh) rotate(740deg); opacity:0; }
}

/* ═══════════════════════════════════════════════════════
   § 12. UTILITIES & ANIMATIONS
   ═══════════════════════════════════════════════════════ */
@keyframes shake {
  0%,100%{ transform:translateX(0); }
  20%    { transform:translateX(-9px); }
  40%    { transform:translateX(9px); }
  60%    { transform:translateX(-5px); }
  80%    { transform:translateX(5px); }
}
.shaking { animation:shake 0.38s ease; }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }

/* ═══════════════════════════════════════════════════════
   § 13. RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════════════════ */
@media(max-width:600px){
  .hero             { padding:2.5rem 1.2rem 2rem; }
  .hero-stats       { gap:1.4rem; }
  .levels-grid      { padding:0 1rem 2rem; grid-template-columns:1fr; }
  .quiz-body        { padding:1rem; }
  .result-stats     { gap:0.5rem; }
  .section-header   { padding:0 1rem; }
  .navbar           { padding:0.8rem 1rem; }
  .result-btns      { flex-direction:column; align-items:stretch; }
  .rbtn-primary,.rbtn-secondary,.rbtn-whatsapp { justify-content:center; }
}