/* Halloween skin. Switched on by "theme": "halloween" in the quiz file (or ?theme=halloween to preview). */
body[data-theme=halloween]{
  --bg:#150b21;--card:#21122f;--ink:#f6ecdc;--muted:#bfa9d6;--line:#4b2f68;--accent:#ff7a18;--accent-ink:#1a0b05;--sel:#3a1d12;--bad:#ff8f86;--warn:#2d1a3f;
  background:radial-gradient(1200px 500px at 85% -5%,#3b1d5a 0%,transparent 60%),var(--bg);
  font-family:Georgia,'Iowan Old Style','Palatino Linotype',serif;line-height:1.55;
}
body[data-theme=halloween] main{position:relative;z-index:1}
body[data-theme=halloween] h1{font-size:2rem;line-height:1.1;letter-spacing:.01em;text-align:center;margin:.2em 0 .3em;color:#ffb066;text-shadow:0 0 18px rgba(255,122,24,.45)}
body[data-theme=halloween] h1+.muted{text-align:center;max-width:34em;margin:0 auto 1em}
body[data-theme=halloween] h2{color:#ffb066}
body[data-theme=halloween] .pumpkin{width:104px;margin:14px auto 0;filter:drop-shadow(0 0 22px rgba(255,122,24,.55));animation:glow 4s ease-in-out infinite}
body[data-theme=halloween] .pumpkin svg{display:block;width:100%;height:auto}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 14px rgba(255,122,24,.4))}50%{filter:drop-shadow(0 0 30px rgba(255,150,40,.8))}}
body[data-theme=halloween] .card{border-radius:6px 22px 6px 22px;border-color:var(--line);box-shadow:0 0 0 1px rgba(255,122,24,.05),0 10px 30px rgba(0,0,0,.35)}
body[data-theme=halloween] .notice{border:1px dashed #7a4aa0;border-radius:10px}
body[data-theme=halloween] .opt{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:#2a173b;border-color:var(--line);color:var(--ink)}
body[data-theme=halloween] .opt.sel{background:var(--sel);border-color:var(--accent);box-shadow:0 0 14px rgba(255,122,24,.35)}
body[data-theme=halloween] .opt:disabled{color:#cdbbe0;opacity:.72}
body[data-theme=halloween] .opt.good{border-color:#7ed957;background:#1b2d1a}
body[data-theme=halloween] .opt.bad{border-color:var(--bad);background:#35161d}
body[data-theme=halloween] input[type=text],body[data-theme=halloween] input[type=password],body[data-theme=halloween] input[type=datetime-local]{background:#150b21;color:var(--ink);border-color:var(--line)}
body[data-theme=halloween] button{background:#2a173b;color:var(--ink);border-color:var(--line);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
body[data-theme=halloween] button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 0 18px rgba(255,122,24,.35)}
body[data-theme=halloween] .tabs button.on{background:var(--sel);border-color:var(--accent)}
body[data-theme=halloween] .bar{background:#3a2552}
body[data-theme=halloween] .bar>i{background:linear-gradient(90deg,#ff7a18,#ffb347)}
body[data-theme=halloween] .sticky{background:linear-gradient(#150b21 80%,transparent)}
body[data-theme=halloween] .qnum{color:#ffb066}
body[data-theme=halloween] .big{color:#ffb066;text-shadow:0 0 18px rgba(255,122,24,.5)}
/* decoration: fixed, behind content, never intercepts taps */
#decor{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
#decor .moon{position:absolute;top:-34px;right:-26px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#fff6d6,#f1d98a 60%,#d9b85c);box-shadow:0 0 70px 20px rgba(255,235,160,.28);opacity:.9}
#decor .web{position:absolute;top:0;width:150px;height:150px;opacity:.38;background:
  repeating-radial-gradient(circle at var(--cx) 0,transparent 0 18px,rgba(255,255,255,.55) 18.5px 19.5px,transparent 20px 38px),
  conic-gradient(from var(--from) at var(--cx) 0,transparent 0 0deg,rgba(255,255,255,.5) 0 .8deg,transparent .8deg 18deg,rgba(255,255,255,.5) 18deg 18.8deg,transparent 18.8deg 36deg,rgba(255,255,255,.5) 36deg 36.8deg,transparent 36.8deg 54deg,rgba(255,255,255,.5) 54deg 54.8deg,transparent 54.8deg 72deg,rgba(255,255,255,.5) 72deg 72.8deg,transparent 72.8deg 90deg,transparent 90deg 360deg);
  -webkit-mask:radial-gradient(circle at var(--cx) 0,#000 0,#000 120px,transparent 150px);mask:radial-gradient(circle at var(--cx) 0,#000 0,#000 120px,transparent 150px)}
#decor .web-l{left:0;--cx:0;--from:90deg}
#decor .web-r{display:none}
#decor .bat{position:absolute;color:#05010a;width:46px;opacity:.95}
#decor .bat svg{display:block;width:100%;height:auto}
#decor .b1{top:70px;left:8%;transform:rotate(-12deg)}
#decor .b2{top:128px;right:14%;width:34px;transform:rotate(10deg)}
#decor .b3{top:22px;left:30%;width:26px;transform:rotate(-4deg)}
@media (prefers-reduced-motion:reduce){body[data-theme=halloween] .pumpkin{animation:none}}
@media (min-width:700px){#decor .web-l{width:220px;height:220px}}