:root{--bg:#09070d;--bg2:#15111c;--ink:#f7f3ee;--mute:#9d93ab;--gold:#ff7a1a;--gold2:#ffb15c;--ok:#4cc38a;--bad:#ff5c6c;
--o0:#e5484d;--o1:#8e4ec6;--o2:#f76b15;--o3:#30a46c;--r:20px;--line:#ffffff14;--card:#ffffff0b;--glass:#16121ecc;
--fd:"Bricolage Grotesque","Inter",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:
radial-gradient(420px 420px at 88% -4%,#ff7a1a26 0%,#ff7a1a0d 40%,transparent 70%),
radial-gradient(900px 620px at -10% -20%,#5b2a8a40 0%,transparent 60%),
radial-gradient(800px 500px at 110% 120%,#5a1f1240 0%,transparent 60%),
var(--bg);
background-attachment:fixed;
color:var(--ink);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
/* grão de filme por cima de tudo: tira o ar "plano" do gradiente */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.06;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:26vh;pointer-events:none;z-index:0;
background:radial-gradient(60% 100% at 30% 100%,#b9a6d612,transparent 70%),radial-gradient(50% 90% at 80% 100%,#b9a6d60e,transparent 70%);
animation:fog 14s ease-in-out infinite alternate}
@keyframes fog{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
h1,h2,.display,.spooky{font-family:var(--fd);font-weight:800;letter-spacing:-.025em}
button{font:inherit;color:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input{font:inherit}
.hide{display:none!important}
/* cores das respostas: sólidas com um brilho suave por cima, sem a sombra "botão de 2009" */
.opt0,.opt1,.opt2,.opt3{background-image:linear-gradient(180deg,#ffffff1f,#ffffff00 55%)}
.opt0{background-color:var(--o0)}.opt1{background-color:var(--o1)}.opt2{background-color:var(--o2)}.opt3{background-color:var(--o3)}
.shape::before{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:#0000002e;font-size:.8em;flex:none}
.s0::before{content:"▲"}.s1::before{content:"◆"}.s2::before{content:"●"}.s3::before{content:"■"}
.pill{display:inline-block;padding:.3em .75em;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--mute);font-size:.85em;font-weight:600}
.avsvg{display:block;overflow:visible}
.avsvg .hd{transform-origin:50px 74px;animation:bob 1.8s ease-in-out infinite;animation-delay:var(--d)}
@keyframes bob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
/* decor: teias foram-se (datavam o visual); morcegos ficam como silhuetas discretas */
.web{display:none}
.bat{position:fixed;width:42px;pointer-events:none;z-index:0;opacity:.35;animation:batfly linear infinite}
@keyframes batfly{0%{transform:translate(-10vw,0) scaleY(1)}25%{transform:translate(25vw,-4vh) scaleY(.6)}50%{transform:translate(55vw,2vh) scaleY(1)}75%{transform:translate(85vw,-3vh) scaleY(.6)}100%{transform:translate(115vw,0) scaleY(1)}}