*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%}
body{background:#000;overflow:hidden;font-family:"Segoe UI",Georgia,serif;height:100vh;color:#ffd700}
canvas{position:fixed;inset:0;width:100%;height:100%}
.crawl-wrap{position:fixed;inset:0;display:flex;justify-content:center;align-items:flex-end;perspective:520px;z-index:2}
.crawl{width:min(980px,92vw);text-align:center;transform-origin:50% 100%;transform:rotateX(25deg) translateY(120%);animation:none;opacity:0}
.crawl.show{opacity:1;animation:crawl 60s linear forwards}
.crawl h1{font-size:54px;letter-spacing:3px;margin-bottom:18px}
.crawl p{font-size:28px;line-height:1.7;color:#f5d742}
@keyframes crawl{from{transform:rotateX(25deg) translateY(120%)}to{transform:rotateX(25deg) translateY(-260%)}}
#finalImage{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.05);opacity:0;width:100%;height:100%;object-fit:cover;z-index:5}
#orb{position:fixed;left:50%;top:50%;width:14px;height:14px;margin-left:-7px;margin-top:-7px;border-radius:50%;opacity:0;z-index:4;background:radial-gradient(circle,#fff 0%,#ffe88a 40%,#ffb300 72%,rgba(255,140,0,0.25) 100%);box-shadow:0 0 12px rgba(255,255,255,0.9),0 0 40px rgba(255,200,0,0.7);transition:all 2.6s ease}
#orb.show{opacity:1;width:34px;height:34px;margin-left:-17px;margin-top:-17px}
#orb.explode{width:280px;height:280px;margin-left:-140px;margin-top:-140px;background:radial-gradient(circle,#fff 0%,#fff4bf 18%,#ffd54d 36%,#ff9f1a 58%,rgba(255,80,0,0.72) 82%,rgba(255,0,0,0.05) 100%);box-shadow:0 0 30px rgba(255,255,255,1),0 0 95px rgba(255,210,0,0.95),0 0 180px rgba(255,90,0,0.8)}
#flash{position:fixed;inset:0;z-index:4;opacity:0;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,0.95) 0%,rgba(255,220,120,0.65) 20%,rgba(255,150,0,0.18) 45%,rgba(0,0,0,0) 75%);transition:opacity 1s ease}
#flash.show{opacity:1}
#bubble{position:fixed;top:10%;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.98);color:#111;padding:18px 26px;border-radius:34px;font-size:30px;box-shadow:0 0 25px rgba(255,255,255,0.35);display:none;z-index:8}
#bubble::before,#bubble::after{content:"";position:absolute;background:rgba(255,255,255,0.98);border-radius:50%}
#bubble::before{width:24px;height:24px;left:48%;bottom:-20px}
#bubble::after{width:14px;height:14px;left:45%;bottom:-38px}
.controls{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:15px;align-items:center;z-index:10}
#playBtn{padding:14px 35px;font-size:20px;background:#f5d742;border:none;border-radius:40px;cursor:pointer;font-weight:bold}
#audioNotice{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.88);color:#fff;padding:16px 18px;border-radius:16px;display:none;z-index:30;min-width:340px;text-align:center;box-shadow:0 0 20px rgba(0,0,0,0.4)}
#audioNotice button{margin-top:10px;border:none;border-radius:10px;padding:10px 16px;cursor:pointer}
#reloadOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.72);z-index:20}
#reloadCard{background:#fff;color:#000;padding:26px 30px;border-radius:22px;text-align:center;min-width:320px}
#reloadCard button{margin-top:16px;padding:10px 18px;border:none;border-radius:10px;cursor:pointer}