@import url('motion-original.css');
[hidden]{display:none!important}
.scene{position:relative;isolation:isolate;overflow:hidden;border-radius:18px;margin:18px 0;height:300px;background:radial-gradient(ellipse at 55% 15%,#3b6d86,#162e47 55%,#101d2f)}
.scene-label{position:absolute;z-index:6;top:12px;left:12px;font-size:9px;font-weight:800;letter-spacing:.06em;color:#153c65;background:#edf7ffdf;padding:7px 9px;border-radius:6px}
.hero-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 7px 6px #0005)}
.scene-hero{position:absolute;left:3%;bottom:35px;width:44%;height:76%;z-index:4}
.scene-monster{position:absolute;right:2%;bottom:35px;width:min(48%,230px);aspect-ratio:1;z-index:3;filter:drop-shadow(0 7px 6px #0006)}
.guardian-art{position:relative;aspect-ratio:1;width:100%;height:100%}
.guardian-sprite{position:absolute;inset:0;background-image:url('assets/guardians-v2.webp');background-repeat:no-repeat;background-size:300% 200%;border-radius:18px;mask-image:radial-gradient(ellipse 73% 80% at center,#000 48%,#000c 62%,transparent 88%)}
.guardian-0{background-position:0 0}.guardian-1{background-position:50% 0}.guardian-2{background-position:100% 0}.guardian-3{background-position:0 100%}.guardian-4{background-position:50% 100%}.guardian-5{background-position:100% 100%}
.scene-vs{position:absolute;top:51%;left:46%;z-index:5;font-family:Georgia,serif;font-style:italic;font-size:30px;font-weight:bold;letter-spacing:-3px;color:#ffe1a7b0;transform:rotate(-9deg);text-shadow:0 0 20px #e5c873}
.scene-orb{position:absolute;top:-50px;left:27%;height:220px;width:220px;border-radius:50%;background:radial-gradient(circle,#a1cfe52b,transparent 70%)}
.scene-mountains{position:absolute;inset:15% -4% 0;background:linear-gradient(135deg,#1b473d,#79a8c6);opacity:.3;clip-path:polygon(0 58%,10% 30%,22% 52%,40% 3%,64% 54%,79% 13%,100% 46%,100% 100%,0 100%)}
.scene-mist{position:absolute;left:-10%;right:-10%;bottom:0;height:90px;background:radial-gradient(ellipse at center,#b4dab655 0,transparent 70%);z-index:3}
.scene-stars{position:absolute;inset:0;background-image:radial-gradient(circle,#e9eeb9b0 1px,transparent 2px),radial-gradient(circle,#bbead870 1px,transparent 2px);background-size:91px 83px,137px 111px;opacity:.35}
.scene-path{position:absolute;bottom:-40px;left:12%;height:130px;width:80%;border:1px solid #c8e8ba36;border-radius:50%;transform:rotate(-6deg)}
.scene-caption{position:absolute;bottom:13px;left:10px;right:10px;text-align:center;color:#e8f2ec;font-size:10px;z-index:6}
.stage-clear{position:absolute;z-index:7;top:40%;left:5%;right:5%;text-align:center;padding:15px;background:#083263cf;border-block:1px solid #ffd22e;color:#ffe397;font-size:25px;letter-spacing:.08em}.stage-clear small{font-size:12px}
.boss-description{margin:10px 0 20px}.boss-description #bossName{font-weight:800;margin-top:6px}.boss-description .stage{font-size:9px}
.friend-entry{border:1px solid #cfe1f4;background:#fff;border-radius:16px;padding:18px;color:#096cb8;width:100%;display:flex;justify-content:space-between;align-items:center;font-weight:800;margin:16px 0}
.friend-code{font-size:clamp(20px,5.5vw,30px);font-weight:900;letter-spacing:.08em;margin:24px 0 10px;overflow-wrap:anywhere}
.friend-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.secondary{border:1px solid #cbd9e8;border-radius:12px;padding:12px;background:#fff;color:#096cb8;font-weight:700}.text-button{border:0;background:transparent;color:#096cb8;padding:9px 0;font-weight:700}.privacy-note{font-size:12px;color:#54738d;line-height:1.8;background:#edf6fd;border-radius:12px;padding:14px;margin-top:20px}.small{font-size:12px}.friend-tile{border-top:1px solid #dce8f4;padding:18px 0}.friend-tile .bar{margin:10px 0}.friend-request{border-top:1px solid #dce8f4;padding:16px 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.friend-request strong{margin-right:auto}.friend-request button{padding:10px 14px}.friends-error{color:#ad2831;background:#fff0f0}button:disabled{opacity:.5;cursor:not-allowed}#friendCode{text-transform:uppercase}#friendMessage{margin-top:16px;overflow-wrap:anywhere}body{overflow-wrap:break-word}.modal{overflow-y:auto}.modalBox{max-height:90dvh;overflow-y:auto}
@media(max-width:430px){.scene{height:270px}.scene-hero{left:2%;width:44%;bottom:34px;height:75%}.scene-monster{right:2%;bottom:51px;width:49%}.scene-label{font-size:8px;max-width:calc(100% - 24px)}.scene-caption{font-size:9px}.scene-vs{font-size:27px}.between .stage{letter-spacing:.1em;font-size:10px}}

.next-dragon{height:110px;width:110px;margin:12px auto;background:#eaf4ff;border-radius:50%}

.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid>.card{min-width:0}.grid .stage{overflow-wrap:anywhere;font-size:10px;letter-spacing:.1em}.biome-0{background:radial-gradient(ellipse at 52% 10%,#386958,#193c3a 45%,#101e2e)}.biome-2{background:radial-gradient(ellipse at 55% 15%,#8e6331,#483b32 55%,#201f30)}.biome-3{background:radial-gradient(ellipse at 55% 15%,#7188af,#3a405e 55%,#1b233c)}.biome-4{background:radial-gradient(ellipse at 55% 15%,#6b4b85,#352c56 55%,#1c2031)}.biome-5{background:radial-gradient(ellipse at 55% 15%,#63774a,#314a39 55%,#142b32)}