:root{
  --bg: #0a0a0f;
  --panel: #12131a;
  --ink: #e9e2cf;
  --muted: #cbbfa3;
  --line: #2a2c3a;
  --accentA: #d4af37;
  --accentB: #7a1f1f;
  --correct: #1db954;
  --wrong: #ff4d4f;
}
.theme-gryff{ --accentA:#d4af37; --accentB:#7a1f1f; }
.theme-slyth{ --accentA:#cfd5d8; --accentB:#0d5c44; }
.theme-huffl{ --accentA:#f1c40f; --accentB:#1b1b1b; }
.theme-raven{ --accentA:#cd7f32; --accentB:#293e6a; }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(800px 400px at 110% 10%, rgba(122,31,31,.10), transparent 60%),
    var(--bg);
  color:#eaf0f6;
  transition: background .3s ease;
}
.container{max-width:960px;margin:0 auto;padding:24px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 18px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:56px;height:56px}
.hp{font-family:Cinzel,serif;letter-spacing:.5px;font-weight:700;color:var(--accentA);text-shadow:0 0 12px rgba(212,175,55,.25)}
.subtitle{margin:2px 0 0;opacity:.8}
.badges{display:flex;gap:10px}
.badge{width:28px;height:28px;opacity:.9;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.section-title{font-family:Cinzel,serif;color:var(--muted);margin:0 0 12px}
.card{background:linear-gradient(180deg, rgba(41,48,74,.25), rgba(18,19,26,.6));border:1px solid var(--line);border-radius:14px;padding:18px 16px;margin:14px 0;box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(4px)}
.hidden{display:none}
.options{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.grid-3{grid-template-columns:repeat(3,1fr)}
.field small{display:block;opacity:.75;margin-top:4px}
.options label{font-weight:600}
.options input,.options select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0f1117;color:var(--ink)}
.btn{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:#161a22;color:var(--ink);cursor:pointer;transition:transform .05s ease, filter .2s ease}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.primary{background:linear-gradient(180deg, rgba(212,175,55,.25), rgba(212,175,55,.15));border-color:rgba(212,175,55,.45)}
.progress{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.progress .bar{flex:1;height:12px;background:#0f1117;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
#barFill{height:100%;width:0;background:linear-gradient(90deg, var(--accentB), var(--accentA));transition:width .25s ease}
.timer{min-width:64px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--accentA)}
.question-wrap{position:relative}
.deco{position:absolute;right:-8px;top:-8px;width:36px;height:36px;opacity:.85}
.question{font-size:clamp(18px,2.4vw,22px);font-weight:600;margin:8px 0 12px;padding:14px;border-radius:12px;border:1px solid rgba(212,175,55,.35)}
.parchment{
  color:#1d1a14;
  background:
     radial-gradient(800px 300px at 10% -10%, rgba(212,175,55,.12), transparent 60%),
     linear-gradient(180deg, rgba(255,250,230,.92), rgba(235,224,194,.92));
}
.media{display:flex;justify-content:center;margin:6px 0 4px}
.qimg{max-height:160px;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.answers{display:grid;gap:10px}
.answer{padding:12px;border-radius:10px;border:1px solid var(--line);background:#0f1117;cursor:pointer;text-align:left;transition:background .15s ease,border-color .15s ease;color:#fff}
.answer:hover{background:#131722}
.answer.correct{border-color:var(--correct);background:#0c1b12}
.answer.wrong{border-color:var(--wrong);background:#241114}
.controls{display:flex;justify-content:flex-end;margin-top:10px}
.score{font-size:18px}
.foot{opacity:.75;margin-top:10px;text-align:center;font-size:14px}
.hint, .review {margin-top:10px}
.result-actions{display:flex;gap:8px;margin:8px 0}
.hs-wrap{margin:12px 0}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.options{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr}}