@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#0F0B1F; --surface:#1A1533; --surface-2:#241D42;
  --gold:#FFC857; --teal:#2FE6C4; --text:#F5F3FF; --muted:#9B93C4;
  --danger:#FF6B6B; --radius:16px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--text); font-family:'Inter',sans-serif;
  display:flex; justify-content:center; min-height:100vh; padding-bottom:70px;
}
.page{ width:100%; max-width:480px; min-height:100vh; }
h1,h2,h3,.display{ font-family:'Sora',sans-serif; }

header{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 14px; }
.brand{ display:flex; align-items:center; gap:8px; font-family:'Sora'; font-weight:800; font-size:20px; }
.brand-dot{ width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold); }
.brand a{ color:inherit; text-decoration:none; display:flex; align-items:center; gap:8px; }
.coin-pill{ display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid #33285a; padding:7px 14px; border-radius:999px; font-weight:600; font-size:14px; }
.coin-pill .gem{ color:var(--gold); }
.back-link{ color:var(--muted); text-decoration:none; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; padding:0 20px; margin-bottom:6px; }

.ad-slot{
  margin:14px 20px; border-radius:var(--radius); background:var(--surface);
  border:1px dashed #3a2f66; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:12px; overflow:hidden; position:relative;
}
.ad-slot::before{
  content:"Advertisement"; position:absolute; top:6px; left:10px;
  font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#584d85;
}
#ad-top{ min-height:100px; }
#ad-inline{ min-height:100px; }
#ad-result{ min-height:260px; }
#ad-category{ min-height:100px; }

.ad-sticky-wrap{ position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:center; z-index:50; }
#ad-sticky{ width:100%; max-width:480px; min-height:52px; border-radius:0; margin:0; background:var(--surface-2); border-top:1px solid #33285a; border-left:none; border-right:none; border-bottom:none; }
#ad-sticky::before{ display:none; }
.ad-close{ position:absolute; top:6px; right:8px; width:22px; height:22px; border-radius:50%; background:#00000066; color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; z-index:5; }

.section-title{ display:flex; align-items:center; gap:8px; margin:22px 20px 12px; font-size:19px; font-weight:700; }

/* Category grid (home page) */
.cat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 20px 20px; }
.cat-card{ background:var(--surface); border-radius:var(--radius); padding:16px 14px; border:1px solid #2a2150; text-decoration:none; color:inherit; display:block; transition:transform .15s ease; }
.cat-card:hover{ transform:translateY(-2px); }
.cat-card .icon{ font-size:26px; margin-bottom:8px; display:block; }
.cat-card .cname{ font-weight:700; font-size:14.5px; margin-bottom:3px; }
.cat-card .cdesc{ font-size:11.5px; color:var(--muted); line-height:1.3; }

/* Difficulty grid (category page) */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 20px 20px; }
.quiz-card{ background:var(--surface); border-radius:var(--radius); padding:14px; border:1px solid #2a2150; text-decoration:none; color:inherit; display:block; transition:transform .15s ease; }
.quiz-card:hover{ transform:translateY(-2px); }
.tag{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em; padding:3px 8px; border-radius:6px; margin-bottom:10px; text-transform:uppercase; }
.tag.starter{ background:#123a35; color:var(--teal);}
.tag.pro{ background:#3a2a10; color:var(--gold);}
.tag.master{ background:#3a1030; color:#ff8bd6;}
.tag.elite{ background:#3a1010; color:var(--danger);}
.quiz-card .qname{ font-weight:700; font-size:15px; margin-bottom:4px; }
.quiz-card .qmeta{ font-size:12px; color:var(--muted); }
.quiz-card .reward{ display:flex; align-items:center; gap:4px; margin-top:8px; font-size:13px; font-weight:600; color:var(--gold);}

.cat-hero{ margin:6px 20px 16px; padding:18px; background:var(--surface); border-radius:var(--radius); border:1px solid #2a2150; display:flex; align-items:center; gap:14px; }
.cat-hero .icon{ font-size:34px; }
.cat-hero .cname{ font-size:18px; font-weight:700; margin-bottom:2px; }
.cat-hero .cdesc{ font-size:12.5px; color:var(--muted); }

.howitworks{ margin:24px 20px 30px; background:var(--surface); border-radius:var(--radius); padding:18px; border:1px solid #2a2150; }
.howitworks h3{ font-size:15px; margin-bottom:12px; }
.step{ display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; font-size:13px; color:var(--muted); }
.step .num{ width:20px; height:20px; border-radius:50%; background:#2a2150; color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0;}

/* Quiz page */
.quiz-header{ padding:18px 20px 8px; }
.quiz-progress-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.progress-track{ flex:1; height:6px; background:#241d42; border-radius:99px; overflow:hidden; }
.progress-fill{ height:100%; background:linear-gradient(90deg,var(--teal),var(--gold)); border-radius:99px; }
.timer-ring{ position:relative; width:38px; height:38px; flex-shrink:0; }
.timer-ring svg{ transform:rotate(-90deg); }
.timer-ring .bg{ stroke:#241d42; }
.timer-ring .fg{ stroke:var(--gold); transition:stroke-dashoffset 1s linear; }
.timer-ring .num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }

.question-box{ padding:6px 20px 4px; }
.qnum{ font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:6px;}
.qtext{ font-size:19px; font-weight:700; line-height:1.35; margin-bottom:18px; font-family:'Sora'; }

.options{ display:flex; flex-direction:column; gap:10px; padding:0 20px 10px; }
.option{ background:var(--surface); border:1px solid #2a2150; border-radius:12px; padding:14px 16px; font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.option:hover{ border-color:var(--teal); }
.option.correct{ border-color:var(--teal); background:#123a35; }
.option.wrong{ border-color:var(--danger); background:#3a1414; }
.option .letter{ width:24px; height:24px; border-radius:6px; background:#241d42; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }

/* Result page */
.result-wrap{ padding:40px 24px 20px; text-align:center; }
.result-badge{ font-size:52px; margin-bottom:6px; }
.result-title{ font-size:24px; margin-bottom:6px; }
.result-sub{ color:var(--muted); font-size:14px; margin-bottom:22px; }
.gem-earned{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid #33285a; border-radius:999px; padding:10px 20px; font-weight:700; font-size:18px; color:var(--gold); margin-bottom:24px; }
.btn{ display:block; width:100%; text-align:center; padding:15px; border-radius:12px; border:none; font-weight:700; font-size:15px; cursor:pointer; font-family:'Inter'; text-decoration:none; margin-bottom:10px; }
.btn-primary{ background:linear-gradient(90deg,var(--gold),#ffb020); color:#1a1400; }
.btn-secondary{ background:transparent; color:var(--muted); border:1px solid #2a2150; }