.px.islands-px{z-index:6;inset:0;}
.islands-camera{
  position:absolute;inset:0;
  transform-origin:50% 50%;
  pointer-events:auto;
  touch-action:none;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.islands-camera.is-grabbing{cursor:grabbing;}

.islands-track{
  position:absolute;inset:0;
  will-change:transform;
}

.map-fade{
  position:absolute;top:0;bottom:0;width:230px;z-index:7;
  pointer-events:none;
}
.map-fade.left{
  left:0;
  background:linear-gradient(90deg,#170D1E 0%,rgba(23,13,30,.72) 30%,rgba(23,13,30,.28) 62%,transparent 100%);
}
.map-fade.right{
  right:0;
  background:linear-gradient(270deg,#170D1E 0%,rgba(23,13,30,.72) 30%,rgba(23,13,30,.28) 62%,transparent 100%);
}

.island{
  position:absolute;
  transform-origin:50% 85%;
  outline-offset:10px;
  cursor:pointer;
}
.island-art{width:100%;}
.island-art svg{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.5));
}

.island-glow{
  position:absolute;left:8%;right:8%;bottom:-14px;height:46px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,180,84,.4),transparent 70%);
  opacity:.35;transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;
}
.island.banano .island-glow{background:radial-gradient(ellipse at center,rgba(255,190,60,.45),transparent 70%);}
.island.locked .island-glow{background:radial-gradient(ellipse at center,rgba(200,175,160,.25),transparent 70%);opacity:.2;}
.island:hover .island-glow,.island:focus-visible .island-glow{opacity:.9;transform:scale(1.12);}

.island-orb{
  position:absolute;top:-34px;left:50%;margin-left:-33px;
  width:66px;height:66px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(255,236,200,.6);
  box-shadow:0 0 26px rgba(255,180,84,.55),inset 0 0 16px rgba(40,18,30,.6);
  transition:box-shadow .3s ease,transform .3s ease;
}
.orb-swirl{
  position:absolute;inset:-30%;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,rgba(255,243,226,.85) 0deg 6deg,rgba(255,217,166,.2) 6deg 16deg,transparent 16deg 34deg),
    radial-gradient(circle at 50% 50%,rgba(40,18,30,.95) 0%,rgba(232,143,60,.4) 55%,rgba(255,217,166,.9) 100%);
  animation:orbSpin 7s linear infinite;
}
@keyframes orbSpin{to{transform:rotate(360deg);}}
.island-icon{
  position:relative;z-index:2;font-size:1.5rem;
  display:flex;align-items:center;justify-content:center;height:100%;
}
.orb-logo{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  transform:scale(1.02);
}
.island.banano .island-orb{
  border-color:rgba(255,235,180,.65);
  box-shadow:0 0 26px rgba(255,178,39,.55),inset 0 0 16px rgba(60,34,10,.6);
}
.island.locked .island-orb{
  border-color:rgba(200,180,165,.45);
  box-shadow:0 0 16px rgba(160,140,130,.3);
}
.island.locked .orb-swirl{
  animation-duration:26s;filter:grayscale(.6);
  background:
    repeating-conic-gradient(from 0deg,rgba(200,205,215,.3) 0deg 6deg,rgba(120,130,150,.12) 6deg 16deg,transparent 16deg 34deg),
    radial-gradient(circle at 50% 50%,rgba(18,22,30,.95) 0%,rgba(90,100,115,.28) 55%,rgba(140,150,165,.4) 100%);
}

.island-label{
  position:absolute;top:40px;left:50%;transform:translateX(-50%);
  white-space:nowrap;text-align:center;z-index:3;
  transition:transform .3s ease;
}
.island-label .name{
  font-weight:700;font-size:.84rem;text-shadow:0 2px 6px rgba(0,0,0,.65);
}
.island-label .status{font-size:.62rem;letter-spacing:1px;color:var(--accent-pale);opacity:.92;}
.island-label .dot{font-size:.55rem;vertical-align:1px;margin-right:3px;}
.island[data-status="available"] .dot{color:var(--ok);}
.island[data-status="dev"] .dot{color:var(--warn);}
.island[data-status="locked"] .dot{color:var(--locked);}

.island-hit{position:absolute;inset:-44px -22px -12px;}

.island.lift{z-index:9;}
.island.lift .island-orb{box-shadow:0 0 38px rgba(255,217,166,.85),inset 0 0 16px rgba(40,18,30,.6);}
.island.banano.lift .island-orb{box-shadow:0 0 38px rgba(255,200,80,.9),inset 0 0 16px rgba(60,34,10,.6);}
.island.locked.lift .island-orb{box-shadow:0 0 20px rgba(200,180,165,.4);}
.island.lift .island-label{transform:translateX(-50%) scale(1.08);}

@keyframes portalShake{
  0%,100%{transform:translateX(0) rotate(0);}
  20%{transform:translateX(-5px) rotate(-2deg);}
  40%{transform:translateX(5px) rotate(2deg);}
  60%{transform:translateX(-3px) rotate(-1.5deg);}
  80%{transform:translateX(3px) rotate(1.5deg);}
}
.island.is-shaking .island-art{animation:portalShake .45s ease;}

.spark{
  position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:30;
  background:radial-gradient(circle,#FFF6E8,var(--accent-pale) 60%,transparent);
  box-shadow:0 0 8px rgba(255,200,120,.9);
}

.wf{stroke-dasharray:6 10;animation:wfFall .7s linear infinite;}
@keyframes wfFall{to{stroke-dashoffset:-32;}}
.crystal{animation:crystalPulse 3.2s ease-in-out infinite;transform-origin:center bottom;}
.crystal.c2{animation-delay:-1.1s;}
.crystal.c3{animation-delay:-2.2s;}
@keyframes crystalPulse{0%,100%{opacity:.75;}50%{opacity:1;}}
.runering{animation:orbSpin 22s linear infinite;transform-origin:100px 74px;}
.mini-float{animation:minifloat 5s ease-in-out infinite alternate;transform-origin:center;}
@keyframes minifloat{from{transform:translateY(0);}to{transform:translateY(-7px);}}