@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&family=Rubik:wght@500;600;700&display=swap');
svg svg{overflow:hidden!important}
:root{color-scheme:dark;font-family:Nunito,system-ui,sans-serif;color:#f3f7ff;background:#04101d;font-synthesis:none}*{box-sizing:border-box}html{overflow-y:scroll;scrollbar-gutter:stable}body{margin:0;background:radial-gradient(ellipse at top,#194964,#04101d 65%);min-height:100vh}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #69e8ff;outline-offset:3px}button{border:0}a{color:inherit}.game{max-width:440px;min-height:100dvh;margin:auto;background:linear-gradient(#071b30,#061828);box-shadow:0 0 80px #0006;padding-bottom:calc(86px + env(safe-area-inset-bottom))}header{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #ffffff0a}header span{font-size:11px;color:#92b3cf}.brand{text-decoration:none;font-size:18px;font-weight:900;letter-spacing:1px}.brand b{color:#ffc431}.hud{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px 14px;background:linear-gradient(120deg,#0c4260,#112b49)}.hud-person{display:flex;gap:8px;min-width:0}.avatar{width:46px;height:46px;background:#092a44;border:2px solid #51cddd;border-radius:12px;flex:none;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:contain}.hud-person>div:last-child{min-width:0}.hud-person strong{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud small{font-size:10px;color:#b2cede}.wallet{display:grid;grid-template-columns:20px auto;gap:2px 5px;align-items:center;font-size:13px;font-weight:900}.wallet .ico{width:20px;height:20px}.wallet small{grid-column:2;font-size:9px}.status{padding:5px 14px;font-size:10px;color:#80a5b7;min-height:25px;display:flex;justify-content:space-between}main{padding:0 14px}h1{font-size:25px;line-height:1.15;margin:16px 0 7px;font-weight:900}h2{font-size:18px;margin:0 0 5px;font-weight:900}h3{font-size:15px;margin:0 0 4px}p{margin:5px 0 12px;line-height:1.45;font-size:13px;color:#aec7d9}.muted,small{color:#9ebbd0;font-size:11px}.eyebrow{letter-spacing:1.4px;font-size:10px;font-weight:900;color:#64d3e8}.heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:14px 0 10px}.panel{background:linear-gradient(135deg,#15354e,#0d263c);border:1px solid #31506a;border-radius:16px;padding:14px;margin:10px 0;box-shadow:0 5px 15px #0002}.row{display:flex;justify-content:space-between;align-items:center;gap:10px}.row>div{min-width:0}.row p{margin:2px 0}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}.stat{background:#082033;border:1px solid #24415a;border-radius:12px;padding:9px 5px;text-align:center}.stat b{display:block;font-size:17px}.stat span{font-size:10px;color:#aec7d9}.ico{width:26px;height:26px;flex:none;vertical-align:middle;display:inline-block;overflow:visible}.btn{min-height:46px;border-radius:12px;padding:10px 14px;background:linear-gradient(#ffd83b,#ffb500);color:#15202b;font-weight:900;border:1px solid #ffed82;box-shadow:0 3px 0 #ad6600;display:inline-flex;gap:7px;align-items:center;justify-content:center;text-decoration:none;font-size:13px}.btn.block{width:100%}.btn.purple{background:linear-gradient(#8263f5,#4931bb);color:white;border-color:#aa8cff;box-shadow:0 3px 0 #2b1b77}.btn.blue{background:linear-gradient(#2a9eda,#1472a9);color:white;border-color:#70cff4;box-shadow:0 3px 0 #075078}.btn.ghost{background:#0a2439;color:#c1d7e8;border:1px solid #365a75;box-shadow:none}.btn.red{background:linear-gradient(#ff755f,#d84336);color:#fff;border-color:#ff9b87;box-shadow:0 3px 0 #8e271e}.btn.small{min-height:36px;font-size:11px;padding:7px 10px}.actions{display:flex;gap:8px;margin:10px 0}.actions>*{flex:1;min-width:0}.btn .ico{width:25px;height:25px}.tag{display:inline-flex;align-items:center;gap:4px;border:1px solid #456578;border-radius:8px;padding:3px 6px;font-size:10px;background:#082236}.tag .ico{width:16px;height:16px}.progress{height:9px;background:#041726;border:1px solid #35516a;border-radius:9px;overflow:hidden;margin:8px 0}.progress i{display:block;height:100%;background:linear-gradient(90deg,#2d9fec,#60e0ed);border-radius:9px}.empty{text-align:center;padding:24px 14px}.empty .ico{width:55px;height:55px;margin-bottom:12px}input{background:#051d2d;border:1px solid #39647e;border-radius:10px;padding:11px;color:white;width:100%;min-width:0}label{font-size:12px;display:block;margin:7px 0}form{margin:10px 0}.form-row{display:flex;gap:8px}.form-row .btn{flex:none}#nav{position:fixed;bottom:0;width:min(440px,100%);max-width:440px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#082239ed;backdrop-filter:blur(15px);border-top:1px solid #3c596a;z-index:10;padding:6px 5px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -8px 20px #0003}#nav[hidden]{display:none}#nav button{display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;min-height:53px;border-radius:10px;font-size:10px;background:transparent;color:#8fabc4}#nav button.active{color:#fff;background:#164666}#nav .ico{width:28px;height:28px}#toast{position:fixed;bottom:95px;left:50%;transform:translateX(-50%);max-width:min(400px,90vw);border:1px solid #6d8ba1;border-radius:12px;padding:12px 16px;background:#12344c;box-shadow:0 8px 30px #0009;z-index:30;font-size:13px}.island{position:relative;aspect-ratio:1.02;border-radius:20px;overflow:hidden;background:#3c98cb url('assets/scenes/ground-v1.png') center 55%/cover no-repeat;border:1px solid #4595bb;margin:12px 0}.island:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -30px 35px #08223870}.building{position:absolute;width:37%;height:40%;background:transparent;padding:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.building svg{width:100%;height:85%;overflow:visible;filter:drop-shadow(0 4px 3px #0005)}.building span{font-size:10px;font-weight:900;background:#061c32dc;padding:3px 7px;border:1px solid #80d4ff70;border-radius:7px;white-space:nowrap}.building.selected span{border-color:#ffc43b;color:#ffdd72}.building.house{left:11%;top:8%}.building.mine{right:9%;top:11%}.building.vault{left:15%;top:40%}.building.wall{right:8%;top:43%}.island.azure .house svg{filter:hue-rotate(150deg) drop-shadow(0 4px 3px #0005)}.island.emerald .house svg{filter:hue-rotate(65deg) drop-shadow(0 4px 3px #0005)}.shield-banner{position:absolute;left:10px;bottom:10px;z-index:3}.island.damaged .building{filter:sepia(.35) brightness(.8)}.base-detail h2{font-size:16px}.base-detail .ico{width:37px;height:37px}.pet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pet-card{background:radial-gradient(ellipse at 50% 30%,#295473,#102839);border:1px solid #507393;border-radius:16px;padding:10px;position:relative;overflow:hidden;min-width:0}.pet-card.selected{border:2px solid #56d9ef;padding:9px}.pet-card.locked{filter:saturate(.4)}.pet-card h2{font-size:18px;margin:4px 0}.pet-frame{height:140px;display:grid;place-items:center}.pet-frame img{width:100%;height:100%;object-fit:contain;max-height:140px}.pet-card .actions{gap:4px}.pet-card .btn.small{font-size:10px;padding:6px 4px}.pet-card .btn .ico{width:18px;height:18px}.pet-card .tag{font-size:9px}.hero-pet{width:140px;height:140px;object-fit:contain;display:block;margin:auto}.segment{display:flex;gap:5px;margin:12px 0}.segment button{flex:1;min-width:0;border:1px solid #2d526e;border-radius:8px;background:#082337;padding:9px 3px;font-size:11px}.segment button.active{background:#2389c4;border-color:#75d7ef}.person{display:flex;align-items:center;gap:10px}.person img{width:46px;height:46px;object-fit:contain;border-radius:10px;background:#0b243a;border:1px solid #44647e;flex:none}.person h3{overflow-wrap:anywhere}.code{font-size:20px;letter-spacing:3px;font-weight:900;color:#8ce6f4}.war-card{border-color:#a67f3c;background:linear-gradient(135deg,#344058,#162c42)}.score{font-size:38px;font-weight:900;color:#ffda63;text-align:center}.reward-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.reward-grid .btn{min-height:65px;display:flex;flex-direction:column;gap:2px;font-size:10px;padding:6px 3px}.arena-shell{margin:10px 0;border:1px solid #37617c;border-radius:20px;overflow:hidden;background:#0c2d46}.arena-shell canvas{display:block;width:100%;aspect-ratio:.8;touch-action:pan-y}.battle-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#0b2239;font-size:12px}.battle-header b{font-size:23px}.battle-actions{display:grid;grid-template-columns:1.3fr 1fr;gap:10px}.battle-actions button{min-height:66px;flex-direction:column;font-size:12px;line-height:1.2}.battle-actions .ico{width:33px;height:33px}.battle-note{text-align:center;min-height:35px;font-size:12px;margin:8px 0}.result{text-align:center;padding:20px 12px}.result>.ico{width:85px;height:85px}.result h1{color:#ffcf36;font-size:32px}.result.lose h1{color:#c7d9e9}.result .hero-pet{height:180px;width:180px}.loading{text-align:center;padding:50px 0}.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.shop-grid .panel{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center}.shop-grid .ico{width:55px;height:55px;margin:8px}.shop-grid .btn .ico{width:20px;height:20px;margin:0}.shop-grid .btn{margin-top:auto;font-size:12px}.shop-grid p{font-size:11px}.notification{border-left:3px solid #f7b740}.notification time{font-size:10px;color:#8facbf}.inbox{margin:16px 0}.rank{color:#ffcd58;font-weight:900;font-size:20px;width:25px;flex:none}.danger{color:#ffb08d}.spacer{height:5px}@media(max-width:350px){main{padding:0 10px}.hud{padding:10px;gap:5px}.hud-person strong{max-width:120px}.pet-frame{height:115px}.pet-frame img{max-height:115px}.btn{font-size:12px;padding:10px}.arena-shell canvas{aspect-ratio:.84}.building span{font-size:9px}.stat b{font-size:15px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.building>svg{overflow:hidden!important}

.game:has(.arena-shell) .hud{display:none}.game:has(.arena-shell) header{height:36px}.game:has(.arena-shell) h1{font-size:22px;margin:7px 0}.game:has(.arena-shell) .heading{margin:10px 0}.arena-shell canvas{height:clamp(240px,46dvh,360px);aspect-ratio:auto}.battle-note{min-height:25px;margin:5px 0}.game:has(.arena-shell) .status{min-height:20px;font-size:10px}.game:has(.arena-shell) main>p.muted{font-size:10px}

.building{width:33%;height:35%;z-index:auto}.building.house{left:13%;top:0%}.building.mine{right:11%;top:3%}.building.vault{left:15%;top:32%}.building.wall{right:11%;top:35%}.building span{position:relative;z-index:5}.building>svg{position:relative;z-index:2}

.ico{overflow:hidden}.status .ico{width:16px;height:16px}.status>span:last-child{white-space:nowrap}.status{gap:4px}

.building.house{top:4%}

.island.emerald .house svg{filter:hue-rotate(100deg) drop-shadow(0 4px 3px #0005)}

.test-accounts{display:grid;gap:8px}.test-accounts .btn{width:100%}

/* Island UI polish: fixed pad anchors and readable currency cards. */
body{background:linear-gradient(180deg,#04152435,#03132099),url('assets/scenes/sky-background-v1.png') center/cover fixed no-repeat}
.game{background:linear-gradient(180deg,#071b30f0,#061828eb);box-shadow:0 0 0 1px #a3e8ff14,0 20px 90px #0008}
.hud{grid-template-columns:1fr;gap:12px;padding:14px;background:linear-gradient(130deg,#174963ed,#102d4bee);border-bottom:1px solid #8bdaff26}
.hud-person{align-items:center;gap:10px}
.hud-person strong{font-size:17px;max-width:250px}
.hud-person>div:last-child{flex:1}
.hud-person .progress{max-width:240px;margin:7px 0 0}
.level-label,.wallet b,.stat b{font-family:Rubik,Nunito,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.hud .level-label{font-size:12px;line-height:1.5;color:#c4e1ee}
.level-label b{font-size:14px;color:#fff0b4}
.wallets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.wallet{grid-template-columns:25px minmax(0,1fr);gap:1px 5px;padding:8px 7px;border:1px solid #93d8f52b;border-radius:12px;background:linear-gradient(145deg,#061e3680,#16486360)}
.wallet .ico{grid-row:1/3;width:25px;height:25px;object-fit:contain}
.wallet b{font-size:16px;font-weight:600;line-height:1.25;white-space:nowrap}
.wallet small{font-size:10px;font-weight:600;line-height:1.2}
.wallet.crystals{border-color:#a994ff65;background:linear-gradient(145deg,#31356790,#12547970)}
.wallet.crystals b{color:#98f1ff}
.island{background-position:center 55%}
.building{width:33%;height:33.66%;transform:translate(-50%,-100%);display:block;z-index:2}
.building>svg{width:100%;height:100%;display:block;overflow:hidden!important}
.building span{position:absolute;left:50%;top:100%;transform:translateX(-50%);z-index:5;margin-top:1px;font-size:9px;padding:3px 5px;max-width:150%;white-space:nowrap}
.building.house{left:26%;right:auto;top:30%}
.building.mine{left:75%;right:auto;top:30%}
.building.vault{left:26%;right:auto;top:59%}
.building.wall{left:75%;right:auto;top:59%}
@media(max-width:350px){.wallet{padding:7px 4px;gap:1px 3px;grid-template-columns:21px minmax(0,1fr)}.wallet .ico{width:21px;height:21px}.wallet b{font-size:14px}.wallet small{font-size:9px}.building span{font-size:8px}}

.building{width:28%;height:28.56%}.building.house,.building.mine{top:28%;z-index:3}.building.vault,.building.wall{top:60%}

/* Shared illustrated background across the game surfaces. */
.game{background:linear-gradient(180deg,#061b3099,#061828b8),url('assets/scenes/sky-background-v1.png') 50% 50%/auto 100vh fixed;isolation:isolate}
.game header{background:linear-gradient(90deg,#071c3170,#12355380),url('assets/scenes/sky-background-v1.png') center 20%/cover;border-bottom:1px solid #90d6ff32}
.hud{background:linear-gradient(110deg,#123c577a,#0a2447b0),url('assets/scenes/sky-background-v1.png') center 65%/cover;text-shadow:0 1px 3px #001323}
.wallet{background:linear-gradient(145deg,#061e36bd,#164863ad)}
.status{background:#061b3060}
.heading h1,main>h1,main>.eyebrow{ text-shadow:0 2px 8px #001021}
.player-rating{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;white-space:nowrap;font-family:Rubik,Nunito,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.player-rating .ico{width:24px;height:24px}
@media(max-width:350px){.player-rating{gap:3px;font-size:13px}.player-rating .ico{width:20px;height:20px}}

/* Victory celebration: floating islands, golden light and drifting sparks. */
.result.win{position:relative;isolation:isolate;overflow:hidden;border:1px solid #ffd77599;background:linear-gradient(180deg,#09274965,#09233ab8 65%,#071d32ef),url('assets/scenes/sky-background-v1.png') center/cover;box-shadow:0 0 28px #ffc75020,inset 0 0 35px #75dfff16}
.result.win::before,.result.win::after{content:'';position:absolute;pointer-events:none;z-index:-1}
.result.win::before{inset:-25%;background:conic-gradient(from 0deg at 50% 42%,transparent 0deg,#ffdf7738 15deg,transparent 30deg,transparent 60deg,#8cedff25 75deg,transparent 90deg,transparent 120deg,#ffdf7738 135deg,transparent 150deg,transparent 180deg,#8cedff25 195deg,transparent 210deg,transparent 240deg,#ffdf7738 255deg,transparent 270deg,transparent 300deg,#8cedff25 315deg,transparent 330deg);animation:victory-rays 36s linear infinite}
.result.win::after{inset:0;background:radial-gradient(circle at 16% 18%,#ffeaa9 0 1.5px,transparent 3px),radial-gradient(circle at 82% 25%,#ffeaa9 0 2px,transparent 4px),radial-gradient(circle at 24% 51%,#a1f3ff 0 1.5px,transparent 3px),radial-gradient(circle at 76% 58%,#ffeaa9 0 1.5px,transparent 3px),radial-gradient(circle at 12% 76%,#ffeaa9 0 1px,transparent 3px),radial-gradient(circle at 88% 82%,#a1f3ff 0 1.5px,transparent 3px);animation:victory-sparks 4s ease-in-out infinite alternate}
.result.win>.ico{filter:drop-shadow(0 0 18px #ffcc5c75);animation:victory-trophy 3s ease-in-out infinite}
.result.win h1{margin:12px 0 8px;text-shadow:0 2px 0 #7f4e12,0 0 22px #ffdb6880}
.result.win .hero-pet{filter:drop-shadow(0 7px 8px #001322b0);margin:6px auto 14px}
.result.win .stat{background:#061d32dc;border-color:#80cee747}
.result.win .stat b{font-size:16px}
.result.win>.muted{background:#061d32a0;border-radius:8px;padding:7px;margin-top:12px}
@keyframes victory-rays{to{transform:rotate(360deg)}}
@keyframes victory-sparks{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:translateY(-8px)}}
@keyframes victory-trophy{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.result.win::before,.result.win::after,.result.win>.ico{animation:none}}

/* Defeat: a quiet, cool counterpart to the victory panel. */
.result.lose{position:relative;isolation:isolate;overflow:hidden;border:1px solid #a3b5ed75;background:linear-gradient(180deg,#121d4690,#101d39c0 65%,#08192fed),url('assets/scenes/sky-background-v1.png') center/cover;box-shadow:0 0 28px #8496ee18,inset 0 0 35px #92cfff12}
.result.lose::before,.result.lose::after{content:'';position:absolute;pointer-events:none;z-index:-1}
.result.lose::before{inset:-20%;background:radial-gradient(ellipse at 50% 32%,#94bfff35,transparent 42%),radial-gradient(ellipse at 22% 75%,#8b7bd126,transparent 45%);animation:defeat-mist 8s ease-in-out infinite alternate}
.result.lose::after{inset:0;background:radial-gradient(circle at 17% 20%,#b9d8ff 0 1px,transparent 3px),radial-gradient(circle at 81% 32%,#a0bef7 0 1.5px,transparent 3px),radial-gradient(circle at 23% 68%,#b2bdff 0 1px,transparent 3px),radial-gradient(circle at 78% 77%,#aacdff 0 1px,transparent 3px);animation:defeat-dust 6s ease-in-out infinite alternate}
.result.lose>.ico{filter:drop-shadow(0 0 15px #9dc5ff65);animation:defeat-shield 4s ease-in-out infinite}
.result.lose h1{margin:12px 0 8px;color:#d5e1ff;text-shadow:0 2px 0 #27365d,0 0 20px #aec2ff60}
.result.lose .hero-pet{filter:drop-shadow(0 7px 8px #001322b0);margin:6px auto 14px}
.result.lose .stat{background:#081a30dc;border-color:#91a9db47}
.result.lose>.muted{background:#061d32a0;border-radius:8px;padding:7px;margin-top:12px}
@keyframes defeat-mist{from{transform:translate(-6px,3px);opacity:.55}to{transform:translate(6px,-3px);opacity:1}}
@keyframes defeat-dust{from{transform:translateY(-6px);opacity:.25}to{transform:translateY(6px);opacity:.7}}
@keyframes defeat-shield{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.result.lose::before,.result.lose::after,.result.lose>.ico{animation:none}}

/* Pet stays in the portrait; decorative frames are independent overlays. */
.avatar-button{padding:0;background:transparent;flex:none;border-radius:50%;width:58px;height:58px}
.pet-avatar{position:relative;display:inline-block;flex:none;width:58px;height:58px;vertical-align:middle;background:radial-gradient(circle,#29627c 15%,#061b32 65%);border-radius:50%;isolation:isolate}
.pet-avatar>img:first-child{position:absolute;inset:16%;width:68%;height:68%;object-fit:contain;border:0;background:none;border-radius:50%;margin:0}
.pet-avatar>img.avatar-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border:0;background:none;z-index:2;pointer-events:none}
.pet-avatar.framed{background:none;--glow-color:#c799ff}
.pet-avatar.framed::before{content:'';position:absolute;inset:var(--portrait-inset);border-radius:50%;background:radial-gradient(circle,#29627c 15%,#061b32 85%)}
.pet-avatar.framed>img:first-child{inset:var(--portrait-inset);width:var(--portrait-size);height:var(--portrait-size);border-radius:50%}
.pet-avatar.framed>img.avatar-frame{transform:translate(var(--frame-x),var(--frame-y))}
.pet-avatar.frame-bronze{--frame-x:-0.04%;--frame-y:0.6%;--portrait-inset:19.42%;--portrait-size:61.16%}
.pet-avatar.frame-silver{--frame-x:0%;--frame-y:0.12%;--portrait-inset:19.18%;--portrait-size:61.64%}
.pet-avatar.frame-autumn{--frame-x:-0.08%;--frame-y:0.8%;--portrait-inset:19.78%;--portrait-size:60.44%}
.pet-avatar.frame-forest{--frame-x:0%;--frame-y:-1.16%;--portrait-inset:21.33%;--portrait-size:57.34%}
.pet-avatar.frame-sapphire{--frame-x:0%;--frame-y:1.36%;--portrait-inset:22.17%;--portrait-size:55.66%}
.pet-avatar.frame-amethyst{--frame-x:0%;--frame-y:1.59%;--portrait-inset:22.89%;--portrait-size:54.22%}
.pet-avatar.frame-moon{--frame-x:-0.04%;--frame-y:-0.24%;--portrait-inset:21.05%;--portrait-size:57.9%}
.pet-avatar.frame-wind{--frame-x:0%;--frame-y:2.03%;--portrait-inset:19.66%;--portrait-size:60.68%}
.pet-avatar.frame-ruby{--frame-x:0%;--frame-y:2.39%;--portrait-inset:21.29%;--portrait-size:57.42%}
.pet-avatar.frame-frost{--frame-x:0%;--frame-y:-1.36%;--portrait-inset:21.69%;--portrait-size:56.62%}
.pet-avatar.frame-royal{--frame-x:0%;--frame-y:-3.23%;--portrait-inset:21.01%;--portrait-size:57.98%}
.pet-avatar.frame-cosmos{--frame-x:-0.04%;--frame-y:1.48%;--portrait-inset:21.97%;--portrait-size:56.06%}
.pet-avatar.frame-celestial{--frame-x:0%;--frame-y:0.24%;--portrait-inset:22.41%;--portrait-size:55.18%}
.pet-avatar.frame-dragon{--frame-x:-0.04%;--frame-y:-1.91%;--portrait-inset:20.97%;--portrait-size:58.06%}
.pet-avatar.frame-phoenix{--frame-x:-0.04%;--frame-y:0.96%;--portrait-inset:22.09%;--portrait-size:55.82%}
.pet-avatar.frame-ruby,.pet-avatar.frame-phoenix{--glow-color:#ff9d48}
.pet-avatar.frame-frost,.pet-avatar.frame-celestial{--glow-color:#80dcff}
.pet-avatar.frame-royal{--glow-color:#ffd16d}
.pet-avatar.frame-moon{--glow-color:#b8ddff}
.pet-avatar.premium-glow>img.avatar-frame{animation:frame-soft-glow 4s ease-in-out infinite}
@keyframes frame-soft-glow{0%,100%{filter:drop-shadow(0 0 2px var(--glow-color))}50%{filter:drop-shadow(0 0 5px var(--glow-color)) brightness(1.08)}}
@media(prefers-reduced-motion:reduce){.pet-avatar.premium-glow>img.avatar-frame{animation:none;filter:drop-shadow(0 0 2px var(--glow-color))}}
.pet-avatar.large{width:116px;height:116px}
.pet-avatar.profile-avatar{width:160px;height:160px;display:block;margin:8px auto 16px}
.pet-avatar.rank10{box-shadow:inset 0 0 0 4px #709cc1,inset 0 0 0 7px #193753,0 0 12px #74c2ef30}
.pet-avatar.rank3{box-shadow:inset 0 0 0 4px #ebbe65,inset 0 0 0 7px #4e3855,0 0 16px #f5cb5640}
.pet-avatar.rank1{box-shadow:inset 0 0 0 5px #f9d47a,inset 0 0 0 9px #a762cf,0 0 18px #ebc75455}
.rank-crown{position:absolute;bottom:-4%;left:36%;width:28%;font-size:20px;color:#f8d577;text-shadow:0 2px 4px #29112b;z-index:3}
.large .rank-crown,.profile-avatar .rank-crown{font-size:32px}
.frame-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.frame-card{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;margin:0;padding:12px 8px;background:radial-gradient(ellipse at 50% 20%,#344878,#102b43 65%);min-width:0}
.frame-card h3{font-size:14px;min-height:36px}
.frame-card .btn{margin-top:auto;font-size:11px;min-height:40px}
.frame-card .ico{width:20px;height:20px}
.earned-frame{border-color:#ba9a56;background:radial-gradient(ellipse at 50% 20%,#53526a,#132d43 70%)}
.shop-banner{display:flex;align-items:center;gap:16px;padding:12px;margin:12px 0 16px;border:1px solid #8187c455;border-radius:18px;background:linear-gradient(130deg,#243e6890,#191f4c90)}
.nest-panel{padding:12px;border-radius:20px;border:1px solid #6bb4c760;background:radial-gradient(ellipse at top,#30607899,#101f3ce8)}
.egg-path{display:flex;justify-content:space-around;border-bottom:1px solid #7ecddd30;padding-bottom:12px;margin-bottom:12px}
.egg-path>span{width:18%;text-align:center}
.egg-art{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 4px #071326)}
.egg-path .egg-art{height:64px}
.egg-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.egg-cell{position:relative;display:flex;align-items:center;flex-direction:column;border:1px solid #456984;background:linear-gradient(#1c405e,#102943);border-radius:14px;min-width:0;height:100px;padding:4px 2px}
.egg-cell .egg-art{height:72px;max-width:70px}
.egg-cell:disabled{opacity:1;color:#41627d;background:#061d3266}
.egg-cell:disabled>span{font-size:30px;margin:auto;opacity:.55}
.egg-cell.selected{outline:2px solid #94efff;box-shadow:0 0 16px #72d7ee55;border-color:#bdf4ff}
.egg-cell.selected .egg-art{animation:egg-wiggle .9s ease-in-out infinite}
.egg-cell:has(.tier-4){border-color:#e2c66b;background:radial-gradient(ellipse,#705c3960,#15304f)}
.egg-cell .tier-4{filter:drop-shadow(0 0 7px #ffd66380)}
.egg-instruction{text-align:center;min-height:36px;margin:12px 0 4px;color:#c0edf8}
.hatch-reward{display:flex;gap:12px;align-items:center;border-color:#d2bf80;animation:reward-enter .5s ease-out}
.hatch-reward>img{width:88px;height:88px;object-fit:contain}
.odds{display:flex;justify-content:space-around;text-align:center}
.odds img{display:block;width:82px;height:82px;object-fit:contain}
.odds b{color:#ffd97a}
.essence-list img{width:48px;height:48px;object-fit:contain}
.essence-list .row{padding:8px 0}
@keyframes egg-wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes reward-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* The island foundations remain fixed while each building has its own ambient life. */
.building:before,.building:after{content:'';position:absolute;pointer-events:none;z-index:4}
.building.house:before{width:11%;height:12%;left:37%;top:2%;border-radius:50%;background:#cce5df70;filter:blur(3px);animation:chimney 3.7s linear infinite}
.building.house:after{width:9%;height:8%;left:47%;top:-4%;border-radius:50%;background:#d8eee64d;filter:blur(3px);animation:chimney 4.3s linear 1.4s infinite}
.building.mine:before{width:26%;height:24%;left:46%;top:46%;border-radius:50%;background:radial-gradient(#ffe89080,#fba91c00 70%);animation:mine-glow 2.8s ease-in-out infinite}
.building.mine:after{width:3px;height:3px;left:59%;top:61%;background:#fff5b0;border-radius:50%;box-shadow:9px 7px 0 #ffdc5c,-9px 2px 0 #ffeab7;animation:mine-sparks 3s ease-out infinite}
.building.vault:before{width:12%;height:15%;left:39%;top:53%;border-radius:50%;background:radial-gradient(#ffeb9270,#f9cb2f00);animation:vault-light 4s ease-in-out infinite}
.building.vault:after{width:4px;height:4px;left:60%;top:31%;background:#dff3ff;clip-path:polygon(50% 0,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0 50%,35% 35%);animation:vault-shine 5s ease-in-out infinite}
.building.wall:before{width:18%;height:18%;left:48%;top:7%;border-radius:50%;background:radial-gradient(#9feaff60,#4cb6eb00);animation:tower-watch 4.5s ease-in-out infinite}
.building.wall>svg{transform-origin:50% 90%;animation:tower-breeze 6s ease-in-out infinite}
@keyframes chimney{0%{opacity:0;transform:translate(0,8px) scale(.6)}20%{opacity:.65}100%{opacity:0;transform:translate(8px,-21px) scale(1.8)}}
@keyframes mine-glow{0%,100%{opacity:.45}50%{opacity:1;transform:scale(1.15)}}
@keyframes mine-sparks{0%,75%,100%{opacity:0;transform:translateY(0)}20%{opacity:1}65%{opacity:0;transform:translateY(-15px)}}
@keyframes vault-light{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes vault-shine{0%,65%,100%{opacity:0;transform:scale(.5)}75%{opacity:1;transform:scale(2)}}
@keyframes tower-watch{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes tower-breeze{0%,100%{transform:rotate(-.45deg)}50%{transform:rotate(.45deg)}}
@media(max-width:350px){.frame-card .large{width:95px;height:95px}.egg-cell{height:87px}.egg-cell .egg-art{height:60px}.frame-card h3{font-size:12px}.shop-banner{gap:8px;padding:8px}}
@media(prefers-reduced-motion:reduce){.building:before,.building:after,.building.wall>svg,.egg-cell.selected .egg-art,.hatch-reward{animation:none!important}}


.pet-avatar.rank10,.pet-avatar.rank3,.pet-avatar.rank1{box-shadow:none;background:none}
.pet-avatar.rank10::before,.pet-avatar.rank3::before,.pet-avatar.rank1::before{content:'';position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,#29627c 15%,#061b32 85%)}.reward-frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;filter:drop-shadow(0 1px 3px #06142e)}

/* Collection, invitations and live rankings */
.pet-frame .new-pet-art{width:100%;height:100%;object-fit:contain}.pet-card.upcoming .pet-frame{filter:grayscale(1);opacity:.68}.pet-card.upcoming{border-style:dashed}.pet-card.upcoming .btn{margin-top:auto}
.referral-link{font-size:11px;overflow-wrap:anywhere;padding:10px;border-radius:10px;background:#061c31;margin-bottom:12px;color:#92e8ff}
.leaderboard{display:grid;gap:10px;margin:16px 0}.leader-row{display:grid;grid-template-columns:22px 54px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:80px;padding:12px 10px;border:1px solid #43647b;border-radius:17px;background:linear-gradient(120deg,#183c57ee,#0b233eee);box-shadow:0 4px 14px #0002}.leader-place{font-weight:900;color:#91b9cf}.leader-row strong{overflow:hidden;text-overflow:ellipsis;font-size:14px}.leader-row .pet-avatar{width:54px;height:54px}.leader-score{display:flex;align-items:center;gap:4px;font-weight:900;font-size:14px;white-space:nowrap}.leader-score .ico{width:24px;height:24px}.leader-row.place-1{border-color:#e7c77c;background:linear-gradient(120deg,#67502caa,#173353ee);box-shadow:0 0 25px #ffd15b15}.leader-row.place-2{border-color:#b6d8ed;background:linear-gradient(120deg,#3f586caa,#173353ee)}.leader-row.place-3{border-color:#cb9672;background:linear-gradient(120deg,#614735aa,#173353ee)}.leader-row:is(.place-1,.place-2,.place-3) .leader-place{color:#ffe08e;font-size:22px}.leader-row.is-me{box-shadow:inset 0 0 0 1px #74dfff66}
.egg-board{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.egg-cell{height:auto;aspect-ratio:1;padding:2px;justify-content:center;touch-action:none;transition:box-shadow .16s,border-color .16s,background .16s}.egg-cell .egg-art{height:72%;width:70%;max-width:100%}.egg-cell small{font-size:9px}.egg-path{gap:4px}.egg-path>span{flex:1;min-width:0}.egg-path .egg-art{width:100%;height:auto;max-height:56px}.cell-locked{background:repeating-linear-gradient(135deg,#102c45,#102c45 6px,#0c2339 6px,#0c2339 12px);border-style:dashed;touch-action:pan-y}.cell-locked .ico{width:22px;height:22px;opacity:.65;margin:0 0 3px}.cell-locked.friend{border-color:#477c8b}.cell-locked.crystal{border-color:#716a9d}.empty-cell{font-size:24px;opacity:.3;color:#76b7d1}.egg-cell.drag-source .egg-art{opacity:.18}.egg-cell.drop-target{border-color:#a3fff0;box-shadow:0 0 16px #82ffe955;transform:scale(1.025)}.egg-drag-ghost{position:fixed;transform:translate(-50%,-65%) scale(1.15);pointer-events:none;z-index:1000;filter:drop-shadow(0 8px 12px #0008);display:flex;align-items:center;justify-content:center}.egg-drag-ghost .egg-art{width:85%;height:95%}.egg-cell.merge-pop .egg-art{animation:egg-merge-pop .6s ease-out}.egg-cell.merge-pop:after{content:'';position:absolute;inset:4px;border:3px solid #ffe69e;border-radius:50%;pointer-events:none;animation:egg-merge-ring .65s ease-out forwards}.egg-cell:has(.tier-6){border-color:#ffe186;background:radial-gradient(ellipse,#ac792966,#15304f)}.egg-cell .tier-6{filter:drop-shadow(0 0 5px #ffd66399)}
@keyframes egg-merge-pop{0%{transform:scale(.6) rotate(-10deg);filter:brightness(1.8)}45%{transform:scale(1.22) rotate(6deg)}100%{transform:scale(1) rotate(0);filter:brightness(1)}}
@keyframes egg-merge-ring{from{transform:scale(.4);opacity:1}to{transform:scale(1.3);opacity:0}}
@media(max-width:350px){.leader-row{gap:6px;grid-template-columns:18px 44px minmax(0,1fr) auto;padding:10px 7px}.leader-row .pet-avatar{width:44px;height:44px}.leader-score,.leader-row strong{font-size:12px}.leader-score .ico{width:20px;height:20px}.egg-cell{height:auto}.egg-cell .egg-art{height:72%}}
@media(prefers-reduced-motion:reduce){.egg-cell,.egg-drag-ghost{transition:none}.egg-cell.merge-pop .egg-art,.egg-cell.merge-pop:after{animation:none}}

.pet-frame .new-pet-art{width:140px;height:140px;max-width:100%;max-height:140px;display:block}.pet-card.upcoming .pet-frame{overflow:hidden;margin-bottom:7px}@media(max-width:350px){.pet-frame .new-pet-art{width:115px;height:115px;max-height:115px}}
.pet-card.locked{filter:none}.pet-card.locked .pet-frame{filter:grayscale(1);opacity:.68}
.btn.base-shop-link{gap:6px;padding:9px 10px}.base-shop-link span{font-family:Nunito,system-ui,sans-serif;font-size:18px;font-weight:900;line-height:1.15;color:#f3f7ff;text-shadow:0 2px 2px #061629}.base-shop-link .ico{width:24px;height:24px}@media(max-width:350px){.base-shop-link span{font-size:16px}}