:root{--bg:#0b0305;--bg2:#1c0509;--panel:#14040a;--panel2:#1d060d;--red:#ff1f1f;--red2:#c40012;--deep:#6d0010;--orange:#ff7a00;--ink:#fff;--mute:#e9b9bd;--line:#000;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b0305}}
:root[data-theme="dark"]{--bg:#0b0305}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(70px + env(safe-area-inset-top,0px))}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:600 16px/1.5 Nunito,system-ui,sans-serif;overflow-x:hidden;
background-image:radial-gradient(ellipse at 50% -10%,#6d0010 0,transparent 60%),linear-gradient(#1c0509,#0b0305 70%);
}
h1,h2,h3,.chunk{font-family:'Titan One','Arial Black',sans-serif;font-weight:400;letter-spacing:.5px}
a{color:inherit;text-decoration:none}
.bats{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bat{position:absolute;left:-120px;aspect-ratio:178/146;opacity:.85;animation:fly linear infinite;will-change:transform;contain:layout paint size}.bat i{display:block;width:100%;height:100%;background:url(assets/bat-sprite.png) 0 0/900% 100%;animation:flap .36s steps(9) infinite}@keyframes flap{to{background-position:112.5% 0}}
@keyframes fly{to{transform:translateX(calc(100vw + 140px)) translateY(var(--dy))}}
.wrap{position:relative;z-index:1;max-width:980px;margin:0 auto;padding:0 14px}
.strip{position:relative;z-index:2;background:linear-gradient(#ff3a1a,#c40012);border-bottom:3px solid #000;overflow:hidden;white-space:nowrap;padding:5px 0;padding-top:calc(5px + env(safe-area-inset-top,0px))}
.strip span{display:inline-block;padding-left:100%;animation:mq 22s linear infinite;font-family:'Titan One';letter-spacing:1px}
@keyframes mq{to{transform:translateX(-100%)}}
.hero{text-align:center;padding:26px 0 10px}
.hero img{width:min(480px,86%);animation:bob 4s ease-in-out infinite;will-change:transform}
@keyframes bob{50%{transform:translateY(-8px) rotate(-1deg)}}
.hero p{max-width:560px;margin:6px auto 16px;color:var(--mute);font-size:1.05rem}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{font-family:'Titan One';font-size:1.2rem;padding:10px 26px;border-radius:16px;border:3px solid #000;background:linear-gradient(#ff5a2a,#ff1f1f 55%,#b00010);box-shadow:inset 0 3px 0 #fff6,0 5px 0 #000;transition:.12s}
.btn.alt{background:linear-gradient(#fff,#ffd0d0 60%,#e88);color:#a00010;}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(3px);box-shadow:inset 0 3px 0 #fff6,0 2px 0 #000}
.panel{margin:26px 0;border:3px solid #000;border-radius:22px;background:var(--panel);box-shadow:0 0 0 3px var(--deep),0 10px 30px #000a;overflow:hidden}
.panel>h2{margin:0;padding:12px;text-align:center;font-size:1.9rem;background:linear-gradient(#ff3b2b,#c40012);border-bottom:3px solid #000}
.body{padding:16px}
.upd{background:linear-gradient(#fff,#ffe3e3);color:#3b0008;border:3px solid #000;border-radius:16px;padding:14px 18px;margin-bottom:12px}
.upd h3{margin:0 0 6px;color:#c40012;text-align:center}
.upd ul{margin:0;padding-left:20px}.upd li{margin:3px 0}
.meta{text-align:center;color:var(--mute);font-size:.9rem;margin:8px 0}
.old{display:none;margin-top:10px;font-size:.95rem}.old.on{display:block}
.old b{color:#c40012}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.tile{display:block;border:3px solid #000;border-radius:18px;overflow:hidden;background:var(--panel2);transition:.15s;box-shadow:0 5px 0 #000}
.tile:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 9px 0 #000,0 0 22px #ff1f1f88}
.tile .art{height:70px;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#ff4a2a,#8a0014 70%)}
.tile .art i{font-style:normal;font-size:2.1rem;filter:drop-shadow(0 4px 0 #000)}
.tile b{display:block;text-align:center;font-family:'Titan One';font-size:1.05rem;padding:6px 6px 0;background:#4a0b16;font-weight:400}
.tile small{display:block;text-align:center;padding:0 8px 8px;background:#4a0b16;color:var(--mute);font-size:.78rem;line-height:1.25}
.soon{position:relative;filter:saturate(.5)}.soon::after{content:'SOON';position:absolute;top:10px;right:-28px;transform:rotate(40deg);background:#000;color:var(--orange);font-family:'Titan One';padding:2px 32px;font-size:.8rem}
.demo{display:grid;grid-template-columns:1fr;gap:16px;align-items:center}
@media(min-width:720px){.demo{grid-template-columns:1fr 1fr}}
.stage{height:260px;perspective:700px;display:grid;place-items:center;background:radial-gradient(circle,#ff3a2a55,transparent 65%);border-radius:18px;cursor:grab;touch-action:none;border:3px dashed #ff1f1f66}
.cube{width:110px;height:110px;position:relative;transform-style:preserve-3d;transition:transform .05s}
.f{position:absolute;inset:0;background-image:conic-gradient(#ff4a1a 25%,#e01010 0 50%,#ff2a10 0 75%,#b00010 0);background-size:27.5px 27.5px;backface-visibility:visible}
.o .f,.o .h{box-shadow:inset 0 0 0 4px #000}
.f:nth-child(1){transform:translateZ(55px);background:#ffd9a8;display:grid;place-items:center}
.f:nth-child(2){transform:rotateY(180deg) translateZ(55px)}.f:nth-child(3){transform:rotateY(90deg) translateZ(55px)}
.f:nth-child(4){transform:rotateY(-90deg) translateZ(55px)}.f:nth-child(5){transform:rotateX(90deg) translateZ(55px)}.f:nth-child(6){transform:rotateX(-90deg) translateZ(55px)}
.face{font-size:26px;line-height:1;color:#000;letter-spacing:12px;margin-top:20px;padding-left:10px}
.ctl label{display:flex;gap:10px;align-items:center;margin:8px 0;cursor:pointer}
.ctl input[type=checkbox]{width:22px;height:22px;accent-color:var(--red)}
.ctl input[type=range]{width:100%;accent-color:var(--red)}
.ctl h3{margin:0 0 6px;font-size:1.5rem}.ctl p{margin:0 0 10px;color:var(--mute)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{padding:8px 10px;border-bottom:2px solid #000;text-align:left}
th{background:#4a0b16;font-family:'Titan One';font-weight:400}
td code{background:#000;padding:1px 7px;border-radius:6px;color:#ff8a5a}
.scroll{overflow-x:auto}
.ok{color:#7dff7d}.no{color:#ff9a9a}.wip{color:var(--orange)}
details{border:3px solid #000;border-radius:14px;background:var(--panel2);margin:10px 0;overflow:hidden}
summary{cursor:pointer;padding:12px 16px;font-family:'Titan One';font-size:1.1rem;list-style:none;background:linear-gradient(#5a0e1b,#3b0a14)}
summary::-webkit-details-marker{display:none}
summary::before{content:"";display:inline-block;width:18px;height:18px;margin-right:8px;vertical-align:-2px;background:url(assets/faq-coin.png) center/contain no-repeat}
details[open] summary{color:var(--orange)}
details p{margin:0;padding:12px 16px;color:var(--mute)}
.res{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:3px solid #000;background:linear-gradient(#ffe1e1,#ffb8b8);color:#8a0010;font-family:'Titan One';font-size:1.5rem;transition:.12s}
.res:hover{filter:brightness(1.08);padding-left:26px}.res i{font-style:normal;font-size:2rem}
.res.dc{background:linear-gradient(#7b86ff,#4b55e0);color:#fff;}
.res.pt{background:linear-gradient(#ff7a3a,#ff3b1a);color:#fff;}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:6px}
.stat{background:#000;border:2px solid var(--red2);border-radius:14px;text-align:center;padding:10px}
.stat b{display:block;font-family:'Titan One';font-size:1.8rem;color:var(--orange);font-weight:400}
.stat span{font-size:.8rem;color:var(--mute)}
footer{position:relative;z-index:1;text-align:center;padding:30px 14px calc(30px + env(safe-area-inset-bottom,0px));color:#b67b82;font-size:.85rem;border-top:3px solid #000;background:#000a}
footer .chunk{color:var(--red);font-size:1.3rem}
.corner{position:fixed;top:calc(52px + env(safe-area-inset-top,0px));right:0;z-index:9;width:54px;height:54px;background:linear-gradient(225deg,#ffd9a8 50%,#a00010 50%);border-bottom-left-radius:6px;box-shadow:-3px 3px 8px #0009;cursor:pointer;display:grid;place-items:start end;padding:6px 8px 0 0;font-size:20px;border:0;transition:.2s}
.corner:hover{width:72px;height:72px}
.pop{position:fixed;inset:0;z-index:20;background:#000c;display:none;place-items:center;padding:16px}.pop.on{display:grid}
.pop div{max-width:380px;background:linear-gradient(#fff,#ffd0d0);color:#3b0008;border:4px solid #000;border-radius:22px;padding:20px;text-align:center;box-shadow:0 0 0 4px var(--red),0 0 40px #ff1f1f}
.pop h2{margin:0 0 8px;color:#c40012;font-size:2rem}.pop .vamp{font-size:4rem}
.pop button{margin-top:12px;font-family:'Titan One';font-size:1.1rem;padding:8px 22px;border:3px solid #000;border-radius:14px;background:var(--red);color:#fff;cursor:pointer}
/* compact windows */
.wrap{max-width:640px}
.hero{padding:14px 0 4px}.hero img{width:min(320px,70%)}.hero p{font-size:.92rem;margin:4px auto 8px}
.panel{margin:14px 0;border-radius:14px;border-width:2px;box-shadow:0 0 0 2px var(--deep),0 6px 18px #000a}
.panel>h2{padding:6px;font-size:1.25rem;border-bottom-width:2px;}
.body{padding:10px;font-size:.92rem;line-height:1.4}
.upd{padding:8px 12px;margin-bottom:8px;border-radius:12px;border-width:2px}.upd h3{font-size:1rem;margin-bottom:4px}.upd li{margin:2px 0}
.meta{font-size:.78rem;margin:6px 0 2px}
.tiles{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.tile{border-radius:12px;border-width:2px;box-shadow:0 3px 0 #000}.tile .art{height:46px}.tile .art i{font-size:1.5rem}
.tile b{font-size:.9rem;padding:4px 4px 0}.tile small{font-size:.7rem;padding:0 6px 6px}
details{margin:6px 0;border-width:2px;border-radius:10px}
summary{padding:7px 12px;font-size:.95rem}details p{padding:8px 12px;font-size:.88rem}
summary{font-family:Nunito,system-ui,sans-serif;font-weight:700}details p{font-weight:400}
footer{padding:16px 14px calc(16px + env(safe-area-inset-bottom,0px));font-size:.72rem}
.tl{display:flex;flex-direction:column;gap:6px}
.trow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:2px solid #000;border-radius:10px;background:var(--panel2);box-shadow:0 3px 0 #000;transition:.12s}
.trow:hover{transform:translateY(-2px);box-shadow:0 5px 0 #000,0 0 14px #ff1f1f88}
.trow i{font-style:normal;font-size:1.4rem;filter:drop-shadow(0 2px 0 #000)}
.trow i.pic{filter:none;display:flex;flex:0 0 auto}.trow i.pic img{width:38px;height:38px;display:block}
.trow b{font-family:'Titan One';font-weight:400;color:var(--orange)}.trow span{color:var(--mute);font-size:.9rem}
/* dark windows */
.panel{background:#14040a;box-shadow:0 0 0 2px #3a0610,0 6px 18px #000c}
.panel>h2{background:linear-gradient(#5e0b18,#2c050c);color:#ffd9d9;text-shadow:0 2px 0 #000}
.upd{background:linear-gradient(#240509,#190307);color:#f3cfd2;border-color:#000;box-shadow:inset 0 0 0 1px #4a0b16}
.upd h3{color:#ff5a4a}.old b{color:#ff5a4a}
.tile .art{background:radial-gradient(circle at 50% 40%,#8a1a1a,#2a0309 75%)}
.tile b,.tile small{background:#240509}
summary{background:linear-gradient(#35080f,#240509)}
th{background:#240509}
.res{background:linear-gradient(#3a0912,#240509);color:#ff8a8a}
.res.dc{background:linear-gradient(#2a2e6e,#171a40);color:#d6d9ff}
.res.pt{background:linear-gradient(#6e260f,#3d1307);color:#ffd2b8}
.pop div{background:linear-gradient(#240509,#14040a);color:#f3cfd2}
.pop h2{color:#ff5a4a}
/* ---- extra polish: progress bar, embers, nav, reveals, sheens ---- */
#prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:40;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#ff1f1f,#ff7a00,#ffd27a);box-shadow:0 0 10px #ff7a00cc;pointer-events:none}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:url(assets/bg-tile.png) 0 0/40px 63px}
#fx,#fx2{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}#fx2{z-index:45;display:none}
.hero{position:relative}
.hero::before{content:"";position:absolute;left:50%;top:44%;width:300px;height:220px;max-width:90%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#ff1f1f66,#ff7a0022 45%,transparent 70%);animation:pulse 3.4s ease-in-out infinite;z-index:-1;pointer-events:none;will-change:opacity}
@keyframes pulse{50%{opacity:.5}}
.hero.off img,.hero.off::before{animation-play-state:paused}
.hero p{color:#f2c9c3}
.hero .btns{margin:6px 0 4px;gap:10px}
.hero .btn{position:relative;overflow:hidden;font-size:.95rem;padding:6px 20px;border-radius:12px;border-width:2px;box-shadow:inset 0 2px 0 #fff6,0 4px 0 #000}
.hero .btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff55 50%,transparent 65%);transform:translateX(-130%);}
.hero .btn:hover::after,.hero .btn:active::after{animation:swipe .7s ease-out}
@keyframes swipe{55%,100%{transform:translateX(130%)}}
.js .panel{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.js .panel.in{opacity:1;transform:none}
.panel{transition:box-shadow .25s}
.panel:hover{box-shadow:0 0 0 2px #5e0b18,0 6px 22px #000c,0 0 26px #ff1f1f33}
.panel>h2{position:relative;overflow:hidden}
.panel>h2::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,#ffffff26 50%,transparent 60%);transform:translateX(-130%)}
.trow{position:relative;overflow:hidden}
.trow>*{position:relative}
.trow::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff1f 50%,transparent 65%);transform:translateX(-130%);transition:transform .7s}
.trow:hover::before{transform:translateX(130%)}
.trow::after{content:"\203A";margin-left:auto;color:var(--orange);font-family:'Titan One',sans-serif;font-size:1.3rem;transition:transform .15s}
.trow:hover::after{transform:translateX(4px)}
details[open]>p{animation:dn .28s ease-out}
@keyframes dn{from{opacity:0;transform:translateY(-6px)}}
summary{transition:filter .15s}summary:hover{filter:brightness(1.25)}
#up{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;width:42px;height:42px;border-radius:50%;border:3px solid #000;background:linear-gradient(#ff5a2a,#c40012);color:#fff;font:400 1.1rem 'Titan One',sans-serif;box-shadow:inset 0 2px 0 #fff6,0 4px 0 #000,0 0 16px #ff1f1f99;cursor:pointer;opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:.25s}
#up.on{opacity:1;transform:none;pointer-events:auto}
#up:active{transform:translateY(2px)}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .js .panel{opacity:1;transform:none}
 #fx,#fx2{display:none}
}