/* Islands edition (loaded after scenic.css): the background is the sky tower from the game.
   islands.js builds three layers inside .scene and moves them as the page scrolls. */
body.scenic.islands { background: #0a3fdc; }

.islands .scene {
  overflow: hidden;
  background: url("img/sky/backdrop.webp") 50% 40% / cover no-repeat, #1a7cf2;
}
.sky-layer { position: absolute; left: 0; top: 0; width: 100%; height: 0; will-change: transform; }
.sky-layer img {
  position: absolute; left: 0; top: 0; display: block; max-width: none; height: auto;
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
.sky-layer.world img { filter: drop-shadow(0 18px 24px rgba(0, 20, 90, .18)); }
.sky-layer.far img { filter: saturate(.9); }

/* the home hero becomes a clear window onto the tower; the sections below get their own glass */
.islands .page:has(> .hero) {
  padding: 0; background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.islands .page:has(> .hero) > .block {
  padding: 22px 24px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 2px solid var(--glass-edge); border-radius: 24px; box-shadow: var(--lift);
}
.islands .hero {
  background: transparent !important;
  min-height: clamp(340px, 54vh, 560px);
  border-color: rgba(255, 255, 255, .95); box-shadow: 0 6px 0 rgba(255, 255, 255, .55), var(--lift);
}
.islands .hero::before { background: linear-gradient(180deg, rgba(8, 20, 70, 0) 45%, rgba(8, 16, 52, .66) 100%); }

/* altitude chip: which island the camera is passing, and how high up it is */
.alt-chip {
  position: fixed; z-index: 45;
  right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: 30px auto; column-gap: 9px; align-items: center;
  padding: 7px 14px 7px 7px; border-radius: 999px;
  background: #fff; color: var(--ink); text-decoration: none !important;
  border: 2.5px solid var(--line); box-shadow: var(--btn-shadow);
  font-weight: 800; line-height: 1.1; transition: transform .08s;
}
.alt-chip:hover { background: #fbfdff; }
.alt-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.alt-chip .ic {
  grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--g-blue, var(--cyan)); color: #fff; border: 2px solid var(--stroke, var(--line));
}
.alt-chip .ic svg { width: 16px; height: 16px; }
.alt-chip .nm { font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: .01em; }
.alt-chip .st { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .islands .page:has(> .hero) > .block { padding: 18px 16px; border-radius: 20px; }
}
@media (max-width: 640px) {
  .islands .page:has(> .hero) > .block { padding: 16px 14px; }
  .islands .hero { min-height: clamp(300px, 46vh, 420px); }
  .alt-chip { padding: 5px 12px 5px 5px; grid-template-columns: 26px auto; column-gap: 7px; }
  .alt-chip .ic { width: 26px; height: 26px; }
  .alt-chip .nm { font-size: 14px; }
  .alt-chip .st { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-layer.far, .sky-layer.near { display: none; }
}
@media print { .alt-chip { display: none; } }

/* a lighter frost than the scenic edition, so the islands still read as islands behind the sheet */
.islands .page, .islands .page:has(> .hero) > .block {
  -webkit-backdrop-filter: blur(5px) saturate(1.35);
  backdrop-filter: blur(5px) saturate(1.35);
}
.islands .page:has(> .hero) { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* touch phones: the chip shows while you fly and steps aside when the scroll stops */
.alt-chip { transition: transform .08s, opacity .35s, visibility .35s; }
.alt-chip.rest { opacity: 0; visibility: hidden; }

/* phones and tablets: re-blurring a moving background every frame is heavy there, so the sheet
   swaps the frost for a slightly whiter plain glass (the islands still show through, just faded) */
@media (hover: none), (max-width: 900px) {
  .islands .page, .islands .page:has(> .hero) > .block, .islands .foot {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(255, 255, 255, .8);
  }
  .islands .page:has(> .hero) { background: none; }
}