:root{--bg:#e8e1fd;--ink:#14213d;--muted:#5b6185;--purple:#666be6;--deep:#4c50cf;--lilac:#c4bdfc;--cream:#fdf3d8;--gold:#ffd66b;--line:#e4defc;--good:#1f9d6b;--h:"Fredoka",ui-rounded,system-ui,sans-serif;--b:"Nunito",ui-rounded,system-ui,sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{background:var(--bg);display:grid;place-items:center;font-family:var(--b);font-weight:700;color:var(--ink);overflow:hidden;-webkit-font-smoothing:antialiased}
.app{--s:min(100vmin,560px);width:var(--s);height:var(--s);font-size:calc(var(--s)/30);position:relative;overflow:hidden;background:#fff;border-radius:1.2em;display:flex;flex-direction:column}
.scene{position:relative;height:53%;overflow:hidden;background:#2b2a78;flex:none}
.scene>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene.jolt>svg{animation:jolt .3s !important}
.scene.rumble>svg{animation:rumble .14s infinite !important}
@keyframes jolt{0%{transform:translate(.5%,.4%) scale(1.02)}50%{transform:translate(-.4%,.6%) scale(1.03)}100%{transform:none}}
@keyframes rumble{0%{transform:translate(.3%,0)}50%{transform:translate(-.3%,.25%)}100%{transform:translate(.3%,0)}}

#world{animation:breathe2 8s ease-in-out infinite}
@keyframes breathe2{50%{transform:scale(1.025) translate(-.4%,-.3%)}}
#pick{transform-origin:402px 262px}
.swing #pick{animation:pswing .8s cubic-bezier(.3,0,.3,1)}
@keyframes pswing{0%{transform:rotate(0)}30%{transform:rotate(-52deg)}46%{transform:rotate(-57deg)}60%{transform:rotate(3deg)}70%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
.power #pick{animation:ppower 1s cubic-bezier(.3,0,.2,1)}
@keyframes ppower{0%{transform:rotate(0)}34%{transform:rotate(-76deg)}52%{transform:rotate(-82deg)}62%{transform:rotate(4deg)}72%{transform:rotate(-7deg)}100%{transform:rotate(0)}}
.cheer #pick{animation:pcheer .45s ease-in-out infinite alternate}
@keyframes pcheer{from{transform:rotate(-40deg)}to{transform:rotate(-80deg)}}
#swoosh{stroke-dasharray:130;stroke-dashoffset:130}
.swing #swoosh{animation:swoosh .8s}.power #swoosh{animation:swoosh 1s}
@keyframes swoosh{0%,46%{opacity:0;stroke-dashoffset:130}56%{opacity:.55;stroke-dashoffset:0}68%,100%{opacity:0;stroke-dashoffset:-130}}
.lid{animation:lid 4.4s infinite;clip-path:inset(0 0 100% 0)}
@keyframes lid{0%,93%,100%{clip-path:inset(0 0 100% 0)}96.5%{clip-path:inset(0 0 0 0)}}
.dash{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.dashgo .dash{animation:dash .45s ease-out}
@keyframes dash{0%{opacity:0;scale:.3}25%{opacity:1;scale:1.15}60%{opacity:1;scale:1}100%{opacity:0;scale:1.05}}
#drag{position:absolute;left:15%;top:.8%;width:50%;aspect-ratio:1;background:url(/dragon-swing.png?v=4) 0 0/1100% 100% no-repeat;animation:dbob 1.6s ease-in-out infinite alternate;transform-origin:50% 93%;pointer-events:none}
.cave{position:absolute;inset:0;background:url(/cave.jpg) 50% 50%/cover}
#world{pointer-events:none}
#eggw{position:absolute;left:60.2%;top:37.5%;width:16.25%;aspect-ratio:190/220}
.es{position:absolute;inset:0;background:url(/eggs.png?v=1) 0 0/400% 100% no-repeat}
#egg svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gold #egg{background-position-x:33.333%}
#htop{background-position-x:66.666%}#hbot{background-position-x:100%}
.gold .half{filter:sepia(1) saturate(2.4) hue-rotate(-14deg) brightness(1.1)}
.burst #htop{animation:htop2 1s cubic-bezier(.2,.7,.4,1) forwards}
.burst #hbot{animation:hbot2 1.6s ease-in forwards}
@keyframes htop2{0%{opacity:1}100%{transform:translate(-40%,-120%) rotate(-60deg);opacity:0}}
@keyframes hbot2{0%,60%{opacity:1}100%{opacity:0}}
@keyframes dbob{to{transform:scaleY(.985) translateY(.5%)}}
#drag.hop{animation:dhop .45s ease-in-out infinite alternate}
@keyframes dhop{to{transform:translateY(-9%)}}
#world{animation:none}
/* rig */
svg .o{transform-box:fill-box}
#dbody{animation:breathe 1.7s ease-in-out infinite alternate}
@keyframes breathe{to{transform:translateY(2px) scaleY(.985)}}
#head{animation:headbob 1.7s ease-in-out infinite alternate}
@keyframes headbob{to{transform:translate(1px,3px) rotate(1.5deg)}}
#tail{transform-origin:100% 80%;animation:wag 1.1s ease-in-out infinite alternate}
@keyframes wag{from{transform:rotate(-6deg)}to{transform:rotate(9deg)}}
#wing{transform-origin:100% 70%;animation:flap .9s ease-in-out infinite alternate}
@keyframes flap{from{transform:rotate(-8deg) scale(1)}to{transform:rotate(10deg) scale(.94)}}
.eye{transform-origin:50% 50%;animation:blink 4.2s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
#arm{animation:armidle 1.7s ease-in-out infinite alternate}
@keyframes armidle{from{transform:rotate(-26deg)}to{transform:rotate(-34deg)}}
.swing #arm{animation:swing .8s cubic-bezier(.3,0,.3,1)}
@keyframes swing{0%{transform:rotate(-30deg)}32%{transform:rotate(-98deg)}46%{transform:rotate(-104deg)}60%{transform:rotate(3deg)}70%{transform:rotate(-7deg)}100%{transform:rotate(-30deg)}}
.swing #head{animation:nod .8s}
@keyframes nod{0%{transform:none}40%{transform:translate(-3px,-3px) rotate(-5deg)}60%{transform:translate(4px,5px) rotate(5deg)}100%{transform:none}}
.swing #dbody{animation:lunge .8s}
@keyframes lunge{40%{transform:translateX(-3px) rotate(-2deg)}60%{transform:translateX(5px) rotate(2deg)}}
.power #arm{animation:power 1s cubic-bezier(.3,0,.2,1)}
@keyframes power{0%{transform:rotate(-30deg)}35%{transform:rotate(-128deg)}52%{transform:rotate(-134deg)}62%{transform:rotate(5deg)}72%{transform:rotate(-10deg)}100%{transform:rotate(-30deg)}}
.power #head{animation:nod 1s}.power #dbody{animation:lunge 1s}
.cheer #arm{animation:cheer .5s ease-in-out infinite alternate}
@keyframes cheer{from{transform:rotate(-110deg)}to{transform:rotate(-140deg)}}
.cheer #dragon{animation:hop .5s ease-in-out infinite alternate}
@keyframes hop{to{transform:translateY(-12px)}}
#egg{transform-origin:50% 100%}
#egg.tap{animation:tap .25s}
@keyframes tap{40%{transform:translateX(3px) rotate(2deg)}}
#egg.wob{animation:wob .3s infinite}
@keyframes wob{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
#egg.drop{animation:drop .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes drop{from{transform:translateY(-260%) rotate(-20deg)}}
#egg.gone{opacity:0}
.half{opacity:0}
.burst .half{opacity:1}
.burst #htop{animation:htop .9s cubic-bezier(.2,.7,.4,1) forwards}
.burst #hbot{animation:hbot .9s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes htop{to{transform:translate(-30px,-90px) rotate(-70deg);opacity:0}}
@keyframes hbot{to{transform:translate(26px,-40px) rotate(50deg);opacity:0}}
#rays{opacity:0;transform-origin:50% 50%}
.burst #rays{animation:rays 1.2s ease-out forwards}
@keyframes rays{0%{opacity:1;transform:scale(.2) rotate(0)}100%{opacity:0;transform:scale(1.5) rotate(40deg)}}
.ck{stroke:#fff6d0;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;stroke-dashoffset:70;filter:drop-shadow(0 0 3px #ffd66b);transition:stroke-dashoffset .35s ease-out}
.ck.on{stroke-dashoffset:0}
#eglow{opacity:var(--heat,0);transition:opacity .5s}
.wobbling #eglow{animation:throb .3s infinite alternate}
@keyframes throb{from{opacity:.6}to{opacity:1}}
.hp{fill:rgba(255,255,255,.22);transition:fill .3s}.hp.on{fill:#ffd66b}
.mini{animation:minibob 1.3s ease-in-out infinite alternate;animation-delay:var(--w)}
@keyframes minibob{to{transform:translateY(2.5px)}}
.mini .mp{transform-origin:0 0;animation:minipick .7s ease-in-out infinite;animation-delay:var(--w)}
@keyframes minipick{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(15deg)}}
.tw{transform-origin:50% 50%;animation:tw 2.4s ease-in-out infinite;animation-delay:var(--w)}
@keyframes tw{0%,100%{transform:scale(.4) rotate(0);opacity:.35}50%{transform:scale(1) rotate(20deg);opacity:1}}
/* particles */
.mote{position:absolute;width:.28em;height:.28em;border-radius:50%;background:#dcd6ff;opacity:0;animation:mote var(--d) linear infinite;animation-delay:var(--w)}
@keyframes mote{0%{transform:translate(0,0);opacity:0}15%{opacity:.7}100%{transform:translate(var(--mx),-9em);opacity:0}}
.spark{position:absolute;width:.7em;height:.7em;background:var(--c,#ffe9a8);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:spark .65s cubic-bezier(.1,.7,.3,1) forwards;pointer-events:none}
.spark.dot{clip-path:none;border-radius:50%;width:.32em;height:.32em}
.spark.chip{clip-path:polygon(0 100%,50% 0,100% 80%);width:.6em;height:.6em;animation-duration:.8s}
@keyframes spark{0%{transform:translate(-50%,-50%) scale(.3)}60%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1) rotate(140deg);opacity:0}}
.ring{position:absolute;border:.22em solid #fff3c4;border-radius:50%;width:1em;height:1em;transform:translate(-50%,-50%);animation:ringo .5s ease-out forwards;pointer-events:none}
@keyframes ringo{to{width:7em;height:7em;opacity:0;border-width:.05em}}
.pop{position:absolute;font-family:var(--h);font-weight:700;font-size:1.05em;color:#fff6d0;text-shadow:0 .1em 0 rgba(20,18,70,.7);transform:translate(-50%,-50%);animation:popup 1s ease-out forwards;pointer-events:none;white-space:nowrap}
.pop.crit{font-size:1.5em;color:var(--gold)}
.pop.name{font-size:.7em;color:#dcd6ff;font-family:var(--b)}
@keyframes popup{0%{transform:translate(-50%,-20%) scale(.6);opacity:0}20%{opacity:1;transform:translate(-50%,-90%) scale(1.15)}100%{transform:translate(-50%,-260%) scale(1);opacity:0}}
/* hud */
.hud{position:absolute;top:.7em;left:.8em;right:.8em;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.hoard{position:relative;background:rgba(20,18,70,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);border-radius:1em;padding:.4em .8em .45em;color:#fff}
.hoard small{display:block;font-size:.58em;letter-spacing:.16em;text-transform:uppercase;color:#cfcaff;font-weight:800}
.hoard b{font-family:var(--h);font-size:1.6em;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;display:inline-block}
.hoard b.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.12);color:var(--gold)}}
.hoard i{font-style:normal;font-family:var(--h);font-size:.75em;color:#cfcaff;margin-left:.25em}
.hoard .delta{position:absolute;left:1em;top:100%;font-family:var(--h);font-size:.85em;animation:delta 1.4s ease-out forwards}
@keyframes delta{0%{transform:translateY(-.4em);opacity:0}20%{opacity:1}100%{transform:translateY(1.2em);opacity:0}}
.timer{position:relative;width:4em;height:4em;filter:drop-shadow(0 .2em .5em rgba(20,18,70,.45))}
.timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer .track{fill:rgba(20,18,70,.55);stroke:rgba(255,255,255,.2);stroke-width:5}
.timer .arc{fill:none;stroke:url(#tg);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.timer span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--h);font-size:1.05em;color:#fff;font-variant-numeric:tabular-nums}
.timer.hot span{color:var(--gold);animation:tick .5s infinite}
@keyframes tick{50%{transform:scale(1.15)}}
.kind{position:absolute;left:.8em;bottom:.6em;white-space:nowrap;font-family:var(--h);font-size:.7em;letter-spacing:.08em;text-transform:uppercase;padding:.34em .8em;border-radius:99em;background:var(--purple);color:#fff;box-shadow:0 .15em 0 var(--deep)}
.kind.open{background:var(--gold);color:#5a3d00;box-shadow:0 .15em 0 #d8a93a}
.crowd{position:absolute;right:.8em;bottom:.65em;display:flex;align-items:center;font-size:.7em;color:#fff;background:rgba(20,18,70,.5);border-radius:99em;padding:.3em .7em;border:1px solid rgba(255,255,255,.18);gap:.45em}
.crowd .live{width:.5em;height:.5em;border-radius:50%;background:#5ff0a8;animation:live 1.4s infinite}
@keyframes live{50%{opacity:.3}}
.tagp{position:absolute;left:50%;top:.5em;transform:translateX(-50%);opacity:.7;font-size:.52em;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(20,18,70,.45);padding:.3em .8em;border-radius:99em;white-space:nowrap}
/* reveal */
.reveal{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 55%,rgba(60,52,160,.55),rgba(14,12,56,.9));opacity:0;pointer-events:none;transition:opacity .35s}
.reveal.on{opacity:1}
.reel{width:72%;height:3.6em;border-radius:1.2em;background:#fff;overflow:hidden;position:relative;box-shadow:0 0 0 .22em var(--gold),0 .8em 2em rgba(0,0,0,.4);transform:scale(.8);transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.reveal.on .reel{transform:scale(1)}
.reel::before,.reel::after{content:"";position:absolute;left:0;right:0;height:1.1em;z-index:2;pointer-events:none}
.reel::before{top:0;background:linear-gradient(#fff,rgba(255,255,255,0))}.reel::after{bottom:0;background:linear-gradient(rgba(255,255,255,0),#fff)}
.row{height:3.6em;display:flex;align-items:center;gap:.7em;padding:0 1em;font-family:var(--h);font-weight:600}
.av{width:2.2em;height:2.2em;border-radius:50%;background:var(--c);flex:none;display:grid;place-items:center;color:#fff;font-size:.9em;overflow:hidden;font-family:var(--h)}
.av img{width:100%;height:100%}
.row span{flex:1;font-size:1.25em}.row small{font-family:var(--b);color:var(--muted);font-size:.8em}
.rlabel{position:absolute;top:17%;left:0;right:0;text-align:center;font-family:var(--h);color:#fff;font-size:1em;letter-spacing:.14em;text-transform:uppercase}
.flash{position:absolute;inset:0;background:radial-gradient(circle at 70% 60%,#fff 0%,#fff3c4 30%,rgba(255,214,107,0) 70%);opacity:0;pointer-events:none}
.flash.go{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.8)}}
.result{position:absolute;left:0;right:0;top:20%;text-align:center;color:#fff;opacity:0;pointer-events:none}
.result.on{opacity:1}
.result .who{font-family:var(--h);font-size:1.05em;text-shadow:0 .1em 0 rgba(20,18,70,.6);animation:rise .5s cubic-bezier(.2,1.5,.4,1) both}
.result .amt{font-family:var(--h);font-weight:700;font-size:3em;line-height:1.05;color:var(--gold);text-shadow:0 .08em 0 #b98a1d,0 .3em 1em rgba(255,214,107,.5);animation:rise .6s .1s cubic-bezier(.2,1.6,.4,1) both;font-variant-numeric:tabular-nums}
.result.lose .amt{color:#fff;font-size:2em;text-shadow:0 .08em 0 rgba(20,18,70,.6)}
.result .note{font-size:.8em;color:#e6e2ff;text-shadow:0 .1em 0 rgba(20,18,70,.6);animation:rise .5s .25s both}
@keyframes rise{from{transform:translateY(.8em) scale(.7);opacity:0}to{transform:none;opacity:1}}
.conf{position:absolute;top:-1em;width:.55em;height:.9em;background:var(--c);border-radius:.12em;animation:conf var(--d) cubic-bezier(.2,.6,.4,1) forwards;animation-delay:var(--w)}
@keyframes conf{to{transform:translate(var(--x),19em) rotate(var(--r));opacity:.9}}
/* panel */
.panel{flex:1;padding:.6em .85em 0;display:flex;flex-direction:column;gap:.45em;background:linear-gradient(#fff,#f6f3ff);min-height:0}
.status{display:flex;align-items:center;gap:.65em}
.lvl{width:2.9em;height:2.9em;flex:none;position:relative;display:grid;place-items:center;font-family:var(--h);color:#fff}
.lvl svg{position:absolute;inset:0;width:100%;height:100%}
.lvl b{position:relative;font-size:1.25em;line-height:1;margin-top:.1em}.lvl small{position:absolute;bottom:.38em;font-size:.42em;letter-spacing:.1em}
.lvl.up{animation:lvlup .6s cubic-bezier(.2,1.8,.4,1)}
@keyframes lvlup{40%{transform:scale(1.35) rotate(-8deg)}}
.stext{flex:1;min-width:0;overflow:hidden}
.stext b{display:block;font-family:var(--h);font-size:1.25em;font-weight:600;line-height:1.15;white-space:nowrap}
.stext small{display:block;font-size:.74em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stext.swap b,.stext.swap small{animation:swap .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes swap{from{transform:translateY(.9em);opacity:0}}
.rate{text-align:right;font-family:var(--h);font-size:.9em;color:var(--deep);line-height:1.1}
.rate small{display:block;font-family:var(--b);font-size:.66em;color:var(--muted)}
.xp{display:flex;align-items:center;gap:.5em;font-size:.68em;color:var(--muted)}
.xp .bar{flex:1;height:.75em;border-radius:99em;background:#ebe7ff;overflow:hidden;position:relative}
.xp .bar i{position:absolute;inset:0;background:linear-gradient(90deg,#8a8ef5,#666be6);border-radius:inherit;transform-origin:left;transform:scaleX(var(--xp,.4));transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.xp .bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);animation:shine 2.2s infinite}
@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.xp b{color:var(--ink)}
.views{flex:1;min-height:0;position:relative}
.view{position:absolute;inset:0;display:flex;flex-direction:column;gap:.4em;opacity:0;pointer-events:none;transform:translateX(1.5em);transition:opacity .25s,transform .25s}
.view.on{opacity:1;pointer-events:auto;transform:none}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.45em}
.tile{background:#fff;border:1.5px solid var(--line);border-radius:.9em;padding:.32em .55em;display:flex;align-items:center;gap:.45em;box-shadow:0 .15em 0 var(--line)}
.tile svg{width:1.8em;height:1.8em;flex:none}
.tile b{display:block;font-family:var(--h);font-size:1.02em;line-height:1.05;white-space:nowrap}
.tile small{display:block;font-size:.58em;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.flame{animation:flame .7s ease-in-out infinite alternate;transform-origin:50% 90%;transform-box:fill-box}
@keyframes flame{to{transform:scale(1.1,1.16) rotate(-3deg)}}
.feed{display:flex;flex-direction:column;gap:.25em;overflow:hidden}
.fr{display:flex;align-items:center;gap:.55em;font-size:.74em;padding:.2em .55em;border-radius:.7em;background:#f1eeff;flex:none}
.fr.new{animation:slide .5s cubic-bezier(.2,1.4,.4,1)}.fr.me{background:#fff3c4}
@keyframes slide{from{transform:translateY(-1.6em);opacity:0}}
.fr em{width:1.4em;height:1.4em;border-radius:50%;background:var(--c);flex:none}
.fr span{color:var(--muted);flex:1}.fr strong{font-family:var(--h);color:var(--deep)}
.lb{display:flex;align-items:center;gap:.5em;font-size:.76em;padding:.14em .2em}
.lb i{font-style:normal;font-family:var(--h);width:1.1em;color:var(--muted)}
.lb .av{width:1.6em;height:1.6em;font-size:.85em}
.lb b{width:5.6em}.lb .g{flex:1;height:.6em;border-radius:99em;background:#ebe7ff;overflow:hidden}
.lb .g u{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffe08a,#ffc53d);width:var(--w)}
.lb strong{font-family:var(--h);color:var(--deep);width:4.6em;text-align:right}
.lb.me{background:#fff3c4;border-radius:.6em}
.badges{display:grid;grid-template-columns:repeat(6,1fr);gap:.35em;text-align:center}
.bd{font-size:.55em;color:var(--muted);line-height:1.15}
.bd svg{width:3.6em;height:3.6em;display:block;margin:0 auto .2em}
.bd.off svg{filter:grayscale(1);opacity:.35}
.bd.got svg{animation:got 2.6s ease-in-out infinite}
@keyframes got{50%{transform:translateY(-.25em) rotate(4deg)}}
.tabs{display:flex;border-top:1.5px solid var(--line);margin:0 -.85em;background:#fff}
.tabs button{flex:1;border:0;background:none;font:700 .68em var(--b);color:var(--muted);padding:.5em 0 .55em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.4em;position:relative}
.tabs button svg{width:1.35em;height:1.35em}
.tabs button.on{color:var(--deep)}
.tabs button.on::after{content:"";position:absolute;top:-1.5px;left:22%;right:22%;height:.22em;border-radius:0 0 .3em .3em;background:var(--purple)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}}

/* real card controls */
.mine{flex:none;border:0;font:600 1em var(--h);padding:.55em 1.1em;border-radius:99em;background:linear-gradient(#7d81f2,#666be6);color:#fff;box-shadow:0 .2em 0 var(--deep);cursor:pointer}
.mine:active{transform:translateY(.12em);box-shadow:0 .08em 0 var(--deep)}
.mine.on{background:linear-gradient(#fff6d0,#ffe08a);color:#5a3d00;box-shadow:0 .2em 0 #d8a93a}
.cta{display:flex;flex-direction:column;gap:.35em;justify-content:center;flex:1}
.big{border:0;font:600 1.15em var(--h);padding:.7em 1em;border-radius:1em;background:linear-gradient(#7d81f2,#666be6);color:#fff;box-shadow:0 .22em 0 var(--deep);cursor:pointer;width:100%}
.big:disabled{opacity:.6}
.hint{font-size:.7em;color:var(--muted);text-align:center}
.hint a{color:var(--deep)}
.addr{display:flex;gap:.4em}
.addr input{flex:1;min-width:0;font:700 .8em var(--b);padding:.6em .8em;border-radius:.9em;border:1.5px solid var(--line);background:#fff;color:var(--ink);outline:none}
.addr input:focus{border-color:var(--purple)}
.addr button{border:0;font:600 .9em var(--h);padding:0 1em;border-radius:.9em;background:var(--purple);color:#fff;cursor:pointer}
.warn{font-size:.68em;color:#8a5a00;background:#fff3c4;border-radius:.6em;padding:.25em .6em;text-align:center}
.fr a{color:var(--deep);text-decoration:none;font-family:var(--h)}
.fr em,.lb .av{background-size:cover;background-position:center}
.mebox{display:flex;flex-direction:column;gap:.4em;font-size:.8em}
.mebox .rowm{display:flex;align-items:center;gap:.6em}
.mebox .av{width:2.4em;height:2.4em}
.mebox button.link{border:0;background:none;color:var(--deep);font:700 1em var(--b);cursor:pointer;padding:0}
.mebox label{display:flex;align-items:center;gap:.4em;color:var(--muted)}
.tagp{left:50%;top:.5em;transform:translateX(-50%);background:#fff3c4;color:#7a4b00;opacity:1;font-weight:800}
.result .sharebtn{margin-top:.5em;border:0;font:600 .85em var(--h);padding:.45em 1.1em;border-radius:99em;background:#fff;color:var(--deep);cursor:pointer;pointer-events:auto}
.pre .timer,.pre .kind,.pre #hpbar{display:none}
[hidden]{display:none!important}
.result{top:0;bottom:0;padding-top:9%;background:linear-gradient(rgba(20,18,70,.82),rgba(20,18,70,.55) 45%,rgba(20,18,70,0) 75%)}
.result .amt{font-size:2.6em}

/* guide */
.tabs button.guide-tab{position:relative}
.tabs button.guide-tab.new::before{content:"";position:absolute;top:.45em;right:22%;width:.55em;height:.55em;border-radius:50%;background:#ff7aa2;box-shadow:0 0 0 .18em #fff;animation:gping 1.4s ease-in-out infinite}
@keyframes gping{50%{transform:scale(1.35)}}
.guide{position:fixed;inset:0;margin:0 auto;max-width:620px;z-index:20;box-shadow:0 0 0 100vmax rgba(20,18,70,.35);background:#fbfaff;display:flex;flex-direction:column;animation:gin .3s cubic-bezier(.2,1.2,.4,1)}
@keyframes gin{from{transform:translateY(1.2em) scale(.98)}}
.gx{position:absolute;top:.6em;right:.6em;z-index:3;width:2.1em;height:2.1em;border-radius:50%;border:0;background:rgba(20,18,70,.55);color:#fff;font:700 .9em var(--b);cursor:pointer}
.gart{position:relative;width:100%;aspect-ratio:2/1;max-height:50%;flex:none;overflow:hidden;background:url(/cave.jpg) 50% 60%/cover;border-radius:0 0 1.4em 1.4em}
.gart::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,18,70,.25),rgba(20,18,70,0) 40%,rgba(20,18,70,.15))}
.gart>*{position:absolute;z-index:1}
.gart.swap>*{animation:gpop .5s cubic-bezier(.2,1.5,.4,1) both}
.gart.swap>*:nth-child(2){animation-delay:.06s}.gart.swap>*:nth-child(3){animation-delay:.12s}.gart.swap>*:nth-child(4){animation-delay:.18s}.gart.swap>*:nth-child(5){animation-delay:.24s}
@keyframes gpop{from{opacity:0;transform:translateY(.8em) scale(.85)}}
.gdrag{width:58%;aspect-ratio:1;bottom:-3%;background:url(/dragon-swing.png?v=4) 0 0/1100% 100% no-repeat}
.gegg{width:15%;aspect-ratio:190/220;background:url(/eggs.png?v=1) 0 0/400% 100% no-repeat}
.gegg.gold{background-position-x:33.333%}
.gbob{animation:gbob 1.8s ease-in-out infinite alternate!important}
@keyframes gbob{to{transform:translateY(-.35em) rotate(3deg)}}
.gchip{font:600 .78em var(--h);padding:.35em .8em;border-radius:99em;background:#fff;color:var(--deep);box-shadow:0 .2em 0 rgba(20,18,70,.25);white-space:nowrap}
.gchip.gold{background:#ffd66b;color:#5a3d00}.gchip.dark{background:rgba(20,18,70,.7);color:#fff;box-shadow:none}
.gbig{font:700 2.2em var(--h);color:#ffd66b;text-shadow:0 .08em 0 #b98a1d,0 .2em .8em rgba(255,214,107,.5)}
.gsp{width:1.1em;height:1.1em;background:#fdf3d8;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:tw 2.4s ease-in-out infinite}
.gbody{flex:1;min-height:0;padding:.75em 1.15em 0;overflow:auto}
.gstep{font:800 .6em var(--b);letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.guide h2{font:600 1.4em/1.15 var(--h);margin:.15em 0 .3em}
.gtext{font-size:.82em;line-height:1.45;color:#3b4266}
.gtext p{margin:0 0 .45em}.gtext b{color:var(--ink)}
.gsplit{display:flex;height:1.5em;border-radius:99em;overflow:hidden;margin:.45em 0 .3em;box-shadow:inset 0 0 0 1.5px var(--line)}
.gsplit i{display:grid;place-items:center;font:600 .72em var(--h);font-style:normal;color:#fff;white-space:nowrap;overflow:hidden}
.gkey{display:flex;gap:.8em;flex-wrap:wrap;font-size:.92em;color:var(--muted)}.gkey span::before{content:"";display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--c);margin-right:.3em;vertical-align:-.05em}
.gladder{display:flex;gap:.3em;margin:.45em 0}.gladder div{flex:1;text-align:center;background:#f1eeff;border-radius:.7em;padding:.3em 0;font-size:.92em}.gladder b{display:block;font:600 1.15em var(--h);color:var(--deep)}
.gsteps{display:flex;flex-direction:column;gap:.35em;margin-top:.2em}.gsteps div{display:flex;align-items:center;gap:.6em;background:#f1eeff;border-radius:.8em;padding:.4em .6em}.gsteps i{font:600 1em var(--h);font-style:normal;width:1.6em;height:1.6em;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;flex:none}
.gnav{display:flex;align-items:center;gap:.6em;padding:.6em .9em .75em}
.gnav button{border:0;font:600 .95em var(--h);padding:.55em 1.1em;border-radius:99em;cursor:pointer}
.gback{background:#efecff;color:var(--deep)}.gback[disabled]{visibility:hidden}
.gnext{background:linear-gradient(#7d81f2,#666be6);color:#fff;box-shadow:0 .18em 0 var(--deep)}
.gdots{flex:1;display:flex;justify-content:center;gap:.35em}.gdots i{width:.5em;height:.5em;border-radius:99em;background:#dcd6ff;transition:width .25s,background .25s}.gdots i.on{width:1.4em;background:var(--purple)}