#dragon-video-source{position:fixed;left:-1px;top:-1px;width:1px;height:1px;opacity:0;pointer-events:none}
#dragon-video-canvas{position:fixed;z-index:15;inset:0;width:100vw;height:100vh;pointer-events:none;opacity:1;transition:opacity .2s}
#dragon-video-canvas.is-hidden{visibility:hidden;opacity:0}
#dragon-video-canvas.is-animating{inset:23.75vh 23.75vw;width:52.5vw;height:52.5vh}
#dragon-video-canvas.is-fire{inset:auto;top:calc(var(--hatch-viewport-top, 0px) + var(--hatch-viewport-height, 100vh) * .1);left:12vw;width:76vw;height:calc(var(--hatch-viewport-height, 100vh) * .8)}
#dragon-perch{display:none!important}
#dragon-fire-egg{position:fixed;z-index:16;top:0;left:0;width:clamp(46px,7vw,82px);height:clamp(56px,8vw,94px);transform:translate(-50%,-50%) scale(.7);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s,filter .2s}
#dragon-fire-egg img{display:block;width:100%;height:100%;object-fit:contain}
#dragon-fire-egg.is-glowing{transform:translate(-50%,-50%) scale(1);opacity:1;filter:drop-shadow(0 0 8px #ffe39a) drop-shadow(0 0 16px #ff8d20);animation:dragonFireEggPulse .55s ease-in-out infinite alternate}
#dragon-particles{position:fixed;z-index:17;inset:0;overflow:visible;pointer-events:none}
#dragon-particles span{position:absolute;top:var(--burst-y);left:var(--burst-x);width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#fff6bd 0,#ffc846 55%,rgba(255,151,28,0) 100%);box-shadow:0 0 8px #ffd76b;opacity:0;animation:dragonGoldBurst 700ms var(--particle-delay) ease-out both}
@keyframes dragonFireEggPulse{to{transform:translate(-50%,-50%) scale(1.08)}}
@keyframes dragonGoldBurst{0%{opacity:0;transform:translate(0,0) scale(.4)}18%{opacity:1}100%{opacity:0;transform:translate(var(--particle-x),var(--particle-y)) scale(0)}}
@media(max-width:600px){#dragon-video-canvas.is-fire{left:8vw;width:84vw}#dragon-fire-egg{width:52px;height:64px}}