/* The recreated home screen (js/world/): Pixi draws the world; real buttons are kept over the things you can tap. */
.sky.world { touch-action: none; }
.sky.world > .stage, .sky.world > .clouds { display: none; }
.sky.world .world-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.sky.world .world-hits { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }

/* every tracked element: placed by the engine (inline width, height and transform), nothing else moves it */
.world-hits > .isle, .world-hits > .sky-puff, .world-hits > .gift, .world-hits > .care {
  position: absolute; left: 0; top: 0; right: auto; bottom: auto; translate: none; margin: 0; padding: 0;
  pointer-events: auto; background: none; border: 0; -webkit-tap-highlight-color: transparent; touch-action: none;
}
.world-hits > .isle { animation: none; display: block; }
.world-hits > .isle img, .world-hits > .sky-puff img { width: 100%; height: 100%; object-fit: contain; opacity: 0; animation: none; filter: none; }
.world-hits > .isle .name { display: none; }
.world-hits > .isle:focus-visible, .world-hits > .sky-puff:focus-visible { outline: 3px solid #fff; outline-offset: -3px; border-radius: 18px; }
.world-hits > .gift { z-index: 5; }
.world-hits > .care { z-index: 4; cursor: grab; }
.world-hits > .care[hidden] { display: none; }
.world-hits > .care:focus-visible { outline: 3px solid #fff; outline-offset: -3px; border-radius: 18px; }
.world-hits > .gift img { width: 100%; height: 100%; object-fit: contain; }
.world-hits > .rainbow { display: none; }   /* the progress (--a) is still kept on it; the world draws the rainbow */
.sky.world .nimbus { display: none; }   /* Nimbus lives in the world now (behind the islands, never over one) */
.sky.world .bubbles { z-index: 3; }
/* the grown-ups corner: a small soft cloud (not a web gear) with a faint gear on it; still hold-to-open, same gate */
.sky.world #grownups {
  z-index: 6; width: 74px; height: 50px; border: 0; border-radius: 0; box-shadow: none; color: rgba(120, 90, 170, .5);
  background: url(../assets/art/world/cloud-far.webp) center / contain no-repeat;
  filter: drop-shadow(0 4px 6px rgba(110, 80, 180, .18));
}
.sky.world #grownups svg { width: 34%; height: 34%; margin-top: 6px; }
.sheet .ages { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sheet .ages .pill { min-width: 44px; }
.sheet .ages .pill.on { background: #8f6ad8; color: #fff; }
body[data-time="night"] .sky.world #grownups { filter: brightness(.85) drop-shadow(0 4px 6px rgba(40, 20, 80, .3)); }