.pet-avatar{overflow:visible}
.pet-avatar .beast{position:absolute;inset:18%;width:64%;height:64%;z-index:1;object-fit:cover;object-position:center;border-radius:50%;box-shadow:0 0 0 5px #fff,0 18px 45px #07152899}
.pet-avatar .frame{position:absolute;inset:-20%;width:140%;height:140%;z-index:2;object-fit:contain;pointer-events:none}
.frame-choice{overflow:visible!important}
.frame-choice img{transform:scale(1.18);transform-origin:center}
.frame-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:12px;padding:14px 8px}
.frame-choice{min-width:0;width:100%;height:94px}
.beast-choice img{object-position:center 58%}

/* Complete interactive city art direction */
.world-top-actions{display:flex;align-items:center;gap:12px}.city-fund{padding:10px 15px;border:1px solid #ffffff30;border-radius:14px;background:#ffffff12;color:#dff7ff}.city-fund b{color:#ffe690;font-size:19px}.city-stage{min-height:690px;isolation:isolate}.city-stage>img{min-height:690px}.city-sky-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 52% 45%,transparent 0 28%,#62dcff17 48%,#07172b42 100%);z-index:1}.city-cloud{position:absolute;z-index:1;width:180px;height:54px;border-radius:50%;background:#fff9;filter:blur(7px);pointer-events:none;animation:cloudSail 24s linear infinite}.cloud-a{top:12%;left:-15%}.cloud-b{top:73%;left:-20%;animation-duration:32s;animation-delay:-13s;transform:scale(.72)}.city-hud{z-index:3;min-width:255px;border:1px solid #ffffff25}.city-progress{height:7px;margin-top:10px;border-radius:99px;overflow:hidden;background:#ffffff20}.city-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6fe5ca,#8ed7ff,#ffe18c);box-shadow:0 0 18px #8ee9ff;transition:width .55s}.hotspot-layer{position:absolute;inset:0;z-index:2}.hotspot{left:var(--x)!important;top:var(--y)!important;width:40px;height:40px;transform:translate(-50%,-50%);padding:0;border:2px solid #fff;background:linear-gradient(145deg,#5fe0c7,#4e8fff);animation:mapPulse 2.4s var(--delay) infinite;cursor:pointer}.hotspot span{font-size:19px;filter:drop-shadow(0 2px 4px #1238)}.hotspot b{position:absolute;left:50%;top:45px;transform:translateX(-50%) scale(.92);white-space:nowrap;border-radius:9px;padding:5px 8px;background:#071c35db;color:white;font-size:11px;opacity:0;pointer-events:none;transition:.2s}.hotspot i{position:absolute;right:-7px;top:-7px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#ffe27d;color:#20304d;font-size:10px;font-style:normal;border:2px solid white}.hotspot:hover,.hotspot:focus-visible{z-index:5;transform:translate(-50%,-50%) scale(1.16)}.hotspot:hover b,.hotspot:focus-visible b{opacity:1;transform:translateX(-50%) scale(1)}.map-tip{position:absolute;z-index:3;right:20px;bottom:18px;padding:9px 13px;border-radius:99px;background:#071a32c9;border:1px solid #ffffff35;color:#dff4ff;font-size:12px}.city-section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:26px 2px 15px}.city-section-head span{display:block;font-size:22px;font-weight:900}.city-section-head small{display:block;margin-top:5px;color:#b9cde6}.city-filter{display:flex;gap:7px;flex-wrap:wrap}.city-filter button{border:1px solid #ffffff2d;border-radius:99px;padding:8px 12px;background:#ffffff10;color:#d8e9ff}.city-filter button.active{background:#75dfcb;color:#10233a;border-color:#75dfcb;font-weight:800}.location-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.location-card{cursor:pointer;background:linear-gradient(#fff,#f7fbff);box-shadow:0 12px 30px #00152d22}.location-art{position:relative;overflow:hidden}.location-card img{aspect-ratio:1.34;transition:transform .55s}.location-card:hover img{transform:scale(1.055)}.location-art>span{position:absolute;left:10px;top:10px;display:grid;place-items:center;width:37px;height:37px;border-radius:12px;background:#fffde9e8;font-size:21px;box-shadow:0 6px 18px #183a6740}.location-art>i{position:absolute;right:10px;top:10px;border-radius:99px;padding:5px 9px;background:#09213cda;color:#ffe58f;font-size:11px;font-style:normal;font-weight:900}.location-info b{font-size:16px}.location-info small{display:block;margin-top:4px}.mini-progress{height:5px;margin-top:10px;border-radius:99px;background:#dfe9f1;overflow:hidden}.mini-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#58d8bd,#729cff)}.location-info button{background:linear-gradient(135deg,#183456,#2a5874)}.location-info button:hover:not(:disabled){background:linear-gradient(135deg,#42bda5,#5b8bea)}.location-dialog{position:fixed;inset:0;z-index:180;display:none;place-items:center;padding:25px}.location-dialog.open{display:grid}.dialog-backdrop{position:absolute;inset:0;border:0;background:#03101ddc;backdrop-filter:blur(12px)}.location-detail{position:relative;width:min(1080px,94vw);max-height:91vh;overflow:auto;display:grid;grid-template-columns:1.25fr .75fr;background:#f8fbff;color:#18304c;border-radius:28px;box-shadow:0 35px 110px #000b;animation:detailIn .35s both}.location-detail.upgraded{animation:upgradeGlow .8s both}.detail-close{position:absolute;z-index:4;right:14px;top:14px;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:#19304d;font-size:25px;box-shadow:0 6px 22px #0a234844}.detail-visual{position:relative;min-height:560px;overflow:hidden;background:#bde7ff}.detail-visual>img{width:100%;height:100%;min-height:560px;object-fit:cover;display:block;transition:.4s}.detail-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 65%,#051a3766)}.detail-level-badge,#detailLevelBadge{position:absolute;z-index:2;left:22px;bottom:22px;border-radius:99px;padding:10px 15px;background:#071b35dc;color:white;border:1px solid #ffffff55;font-weight:800}.detail-sparkles{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 20% 20%,#fff 0 2px,transparent 3px),radial-gradient(circle at 80% 26%,#fff8b8 0 3px,transparent 4px),radial-gradient(circle at 73% 70%,#fff 0 2px,transparent 3px);background-size:120px 120px,170px 170px,210px 210px;animation:sparkleDrift 9s linear infinite}.detail-copy{padding:52px 32px 30px}.detail-kicker{display:inline-flex;padding:7px 10px;border-radius:99px;background:#e4f6f1;color:#17806f;font-weight:800}.detail-copy h2{margin:16px 0 10px;font-size:31px}.detail-copy>p{color:#617087;line-height:1.75}.stage-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:22px 0}.stage-thumb{position:relative;border:3px solid transparent;border-radius:12px;padding:0;overflow:hidden;background:#dce9f4}.stage-thumb img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.stage-thumb span{position:absolute;right:4px;bottom:4px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#102b48;color:#fff;font-size:11px}.stage-thumb.active{border-color:#58d8bd}.stage-thumb.previewing{border-color:#ffcf66}.build-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-radius:17px;background:#eaf2fa}.build-panel small{display:block;color:#6c7e92}.build-panel strong{display:block;margin-top:4px}.world-action:disabled{background:#b9c4d0;color:#fff}.world-overlay.open .city-stage{animation:worldIn .45s ease both}
@keyframes mapPulse{50%{box-shadow:0 0 0 12px #ffffff0b,0 9px 26px #001a3a99}}@keyframes cloudSail{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 330px))}}@keyframes detailIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}@keyframes sparkleDrift{to{background-position:120px 60px,-170px 100px,210px -90px}}@keyframes upgradeGlow{0%{box-shadow:0 0 0 #fff0}45%{box-shadow:0 0 80px #ffe88edd}100%{box-shadow:0 35px 110px #000b}}
@media(max-width:1100px){.location-grid{grid-template-columns:repeat(3,1fr)}.hotspot{width:34px;height:34px}.hotspot span{font-size:16px}}
@media(max-width:760px){.world-top-actions{align-items:stretch;flex-direction:column}.city-fund{display:none}.city-stage,.city-stage>img{min-height:510px}.location-grid{grid-template-columns:repeat(2,1fr)}.city-section-head{align-items:flex-start;flex-direction:column}.location-detail{grid-template-columns:1fr}.detail-visual,.detail-visual>img{min-height:330px}.detail-copy{padding:28px 20px}.hotspot b{display:none}.hotspot:nth-child(even){display:none}}

/* Keep the dashboard city summary separate from the full-screen map HUD. */
.panel.city>.city-progress{display:flex;height:auto;margin-top:0;overflow:visible;background:transparent;border-radius:0}
.panel.city>.city-progress .meter i{display:block;height:100%;background:var(--mint);box-shadow:none;transition:none}