:root{--g:#E2B54A;--p:#F3E3B8;--ink:#2a1a0c;box-sizing:border-box}*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#070a24}body{color:var(--p);font:14px/1.5 Cinzel,Palatino,Georgia,serif;letter-spacing:.04em;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;letter-spacing:.14em;text-transform:uppercase}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0}#stars circle{fill:#F3E3B8;animation:tw 4s infinite}@keyframes tw{50%{opacity:.15}}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none}
main{position:relative;z-index:1;min-height:100vh;padding:max(18px,env(safe-area-inset-top)) 22px max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center}
.gm{width:min(1040px,100%);display:flex;flex-direction:column;gap:22px}
.tb{display:flex;align-items:center;gap:20px}.hero{width:clamp(110px,16vw,160px);flex:none}.hero canvas{width:100%;display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}
.bar{flex:1;display:flex;justify-content:space-between}.bar span{width:9px;height:9px;transform:rotate(45deg);border:1px solid rgba(226,181,74,.5)}.bar span.on{background:var(--g);box-shadow:0 0 8px var(--g)}.qn{color:var(--g);letter-spacing:.2em;font-size:12px;white-space:nowrap}
.stage{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:clamp(18px,4vw,56px);align-items:end}
.mas{text-align:center}.mas .orb{display:block;width:100%;max-width:340px;margin:0 auto -34px;position:relative;z-index:1;filter:drop-shadow(0 0 22px rgba(31,166,160,.4));animation:br 4.5s ease-in-out infinite}.lampsvg{width:56%;max-width:190px;position:relative;z-index:2;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
@keyframes br{50%{transform:translateY(-12px)}}.orb.hit{animation:hit .6s}@keyframes hit{40%{transform:translateY(-26px) scale(1.06);filter:drop-shadow(0 0 40px #1fa6a0)}}
.eyes{animation:bk 5s infinite;transform-origin:100px 62px}@keyframes bk{0%,92%,97%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}#ey{transition:transform .2s}
.tail{animation:sw 3s ease-in-out infinite;transform-origin:100px 150px}@keyframes sw{50%{transform:skewX(-7deg)}}.puff2{animation:sw2 3.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}@keyframes sw2{50%{transform:translateX(9px) scaleY(1.07)}}
.smk circle{animation:pf 4.5s ease-in infinite;transform-box:fill-box;transform-origin:center;opacity:0}@keyframes pf{0%{opacity:0;transform:translateY(24px) scale(.5)}30%{opacity:.45}100%{opacity:0;transform:translateY(-80px) scale(1.9)}}
.scroll{position:relative;margin:0 20px 18px;padding:22px 30px;min-height:112px;display:flex;align-items:center;background:linear-gradient(#efe0b6,#d6bd82);color:var(--ink);font:700 clamp(17px,2.5vw,24px)/1.4 Cinzel,Georgia,serif;letter-spacing:.02em;box-shadow:0 14px 30px rgba(0,0,0,.5),inset 0 0 34px rgba(120,80,20,.28);animation:up .5s both}
.scroll::before,.scroll::after{content:'';position:absolute;top:-9px;bottom:-9px;width:22px;border-radius:11px;background:linear-gradient(90deg,#6a4210,#e2b54a 45%,#6a4210);box-shadow:0 4px 8px rgba(0,0,0,.4)}.scroll::before{left:-18px}.scroll::after{right:-18px}@keyframes up{from{opacity:0;transform:translateY(12px)}}
.ans{display:grid;gap:9px;margin:0 20px}.ans button{display:flex;align-items:center;gap:14px;padding:13px 18px;text-align:left;background:linear-gradient(#1d1650,#120c36);border:2px solid #8a6a2a;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 0 #07041a;font-size:13px;transition:.15s}
.ans button::before{content:'';width:16px;height:16px;border-radius:50%;background:var(--gem);box-shadow:0 0 10px var(--gem),inset 0 -3px 5px rgba(0,0,0,.35)}.ans button:hover{border-color:var(--g);transform:translateY(-2px)}.ans i{margin-left:auto;font-style:normal;opacity:.5;font-size:11px}
.a0{--gem:#1fbf8a}.a1{--gem:#2aa9e0}.a2{--gem:#e89a2a}.a3{--gem:#e0422a}
.big{padding:15px 28px;background:linear-gradient(#F2C860,#b8892a);color:#1a0e04;border:2px solid #F2C860;font-weight:700;box-shadow:0 4px 0 #6a4a10;transition:.15s}.big:hover{transform:translateY(-2px);filter:brightness(1.1)}.big.alt{background:linear-gradient(#1d1650,#120c36);color:var(--p);border-color:#8a6a2a;box-shadow:0 4px 0 #07041a}
.gap{display:flex;gap:12px;flex-wrap:wrap;margin:16px 20px 0}.ft{display:flex;justify-content:space-between;margin:14px 20px 0}.ft button{font-size:11px;color:rgba(243,227,184,.6)}.ft button:hover{color:var(--g)}
.stats{display:flex;gap:30px;margin:2px 20px 18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,227,184,.65)}.stats b{display:block;font-size:22px;color:var(--g);font-weight:400}.note{margin:14px 20px 0;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:rgba(243,227,184,.5)}
.cart{display:inline-block;margin:0 20px;border:3px double var(--g);border-radius:60px;padding:12px 38px;background:rgba(10,8,40,.7);box-shadow:0 0 30px rgba(226,181,74,.25)}.name{font:700 clamp(26px,5vw,44px)/1.15 Cinzel,Georgia,serif;color:var(--p)}.d{margin:10px 20px 0;color:rgba(243,227,184,.7)}
.dots{display:flex;gap:10px;margin:6px 20px}.dots span{width:10px;height:10px;background:var(--g);transform:rotate(45deg);animation:dp 1.2s infinite}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}@keyframes dp{50%{opacity:.2;transform:rotate(45deg) scale(.6)}}
@media(max-width:760px){.stage{grid-template-columns:1fr}.mas .orb{max-width:210px}.lampsvg{max-width:120px}.qn{display:none}}
.op{position:fixed;inset:0;z-index:30;background:radial-gradient(ellipse at 50% 60%,#241450,#070a24 72%);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}.op.out{pointer-events:none}
.rays{position:absolute;left:50%;top:44%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;background:repeating-conic-gradient(rgba(226,181,74,.16) 0 4deg,transparent 4deg 12deg);-webkit-mask-image:radial-gradient(circle,#000,transparent 42%);mask-image:radial-gradient(circle,#000,transparent 42%);opacity:0;animation:rayin 1.2s 1.7s forwards,rot 120s linear infinite}@keyframes rayin{to{opacity:1}}@keyframes rot{to{transform:rotate(360deg)}}
#opfx{position:absolute;inset:0}.flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,#fff3c4,#E2B54A 38%,transparent 70%);opacity:0;animation:fl2 .9s 1.7s ease-out}@keyframes fl2{0%{opacity:0}12%{opacity:.95}100%{opacity:0}}
.ring{position:absolute;left:50%;top:44%;width:10px;height:10px;margin:-5px;border:1px solid #E2B54A;border-radius:50%;opacity:0;animation:rg 1.1s 1.7s ease-out}@keyframes rg{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(110)}}
.stg{position:relative;display:flex;flex-direction:column;align-items:center;animation:shk .5s 1.7s}@keyframes shk{20%{transform:translate(-9px,5px)}40%{transform:translate(8px,-6px)}60%{transform:translate(-4px,3px)}80%{transform:translate(2px,-2px)}}
.om{width:min(46vh,340px);opacity:0;transform:translateY(150px) scale(.6);filter:blur(12px);animation:rise 1.2s 2.2s cubic-bezier(.2,.9,.2,1) forwards}.om .orb{width:100%;margin:0}@keyframes rise{to{opacity:1;transform:none;filter:none}}
.ot{width:min(780px,88vw);margin-top:-5vh;opacity:0;transform:scale(2.4);filter:blur(14px);animation:slam .7s 1.7s cubic-bezier(.2,1.5,.3,1) forwards}.ot canvas{width:100%;display:block}@keyframes slam{to{opacity:1;transform:none;filter:none}}
.otag{margin-top:4px;letter-spacing:.42em;text-transform:uppercase;font-size:clamp(10px,1.6vw,13px);color:var(--p);text-align:center;opacity:0;animation:fi .8s 3s forwards}.tap{margin-top:22px;color:var(--g);letter-spacing:.4em;font-size:13px;text-transform:uppercase;opacity:0;animation:fi .6s 3.5s forwards,bl 1.6s 4.1s infinite}@keyframes fi{to{opacity:1}}@keyframes bl{50%{opacity:.3}}
main{flex-direction:column;gap:16px}.gm{gap:18px}.nav{width:min(1040px,100%);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.nav button{padding:9px 16px;font-size:11px;border:1px solid rgba(226,181,74,.45);background:rgba(7,10,36,.6);backdrop-filter:blur(4px);transition:.15s}.nav button:hover,.nav .gold{border-color:var(--g);color:#1a0e04;background:var(--g)}
.stage{align-items:center}.side{display:flex;flex-direction:column;gap:16px;padding:0 22px;min-width:0}.side>*{margin:0!important}.side .cart{align-self:flex-start}.side .gap,.side .ft{width:100%}
.modal{position:fixed;inset:0;z-index:50;background:rgba(4,5,20,.72);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px}.modal.on{display:flex}
.mp{position:relative;width:min(460px,100%);max-height:86vh;overflow:auto;background:linear-gradient(#efe0b6,#d6bd82);color:var(--ink);padding:28px 30px;box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 0 34px rgba(120,80,20,.28);border:3px double #8a6a2a}
.mp h3{margin:0 0 10px;font:700 22px Cinzel,serif;letter-spacing:.06em}.mp p{margin:8px 0;font-size:14px;line-height:1.55}.mp .small{font-size:11px;opacity:.7}.mp .or{text-align:center;opacity:.6}.mp h4{margin:18px 0 6px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.mp input{width:100%;padding:12px 14px;margin:8px 0 12px;background:#f7ecc8;border:2px solid #8a6a2a;font:inherit;color:var(--ink)}.mrow{display:flex;gap:10px;flex-wrap:wrap}.mp .big{margin-top:6px}.mx{position:absolute;top:8px;right:12px;font-size:16px;color:var(--ink)}
.mstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;font-size:10px;letter-spacing:.15em;text-transform:uppercase}.mstats b{display:block;font-size:24px;font-family:Cinzel,serif;font-weight:700;color:#7a4a10}.hr{display:flex;justify-content:space-between;border-bottom:1px solid rgba(90,58,20,.3);padding:5px 0}.hr i{font-style:normal;opacity:.6;font-size:12px}
button:focus{outline:none}button:focus-visible{outline:2px solid var(--g);outline-offset:3px}
.mas .orb{margin:0 auto}.lampsvg{margin-top:-11%}
.ans button{background:repeating-linear-gradient(90deg,transparent 0 78px,rgba(0,0,0,.28) 78px 80px),linear-gradient(#3d2c1e,#241a12);border-color:#9a7a3a;box-shadow:inset 0 1px 0 rgba(255,220,150,.18),0 4px 0 #0d0805}
.pyr{display:flex;flex-direction:column;align-items:center;gap:2px}.pr{display:flex;gap:2px}.pr span{width:15px;height:9px;background:#2a1d14;border:1px solid #5a3a1c;transition:.4s}.pr span.on{background:linear-gradient(#f2c860,#b8892a);border-color:#f2c860;box-shadow:0 0 7px rgba(226,181,74,.7)}
@media(max-width:760px){.stats{justify-content:space-around}.side .big{width:100%}.gap .big{flex:1}.note,.d{text-align:center}.side .cart{align-self:center}.stage{gap:4px}.tb{gap:12px}.pr span{width:11px;height:7px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.om,.ot,.otag,.tap{opacity:1;transform:none;filter:none}}