/* Desktop archipelago: one overview, with the exploration pair sharing motion. */
/* Keep the complete landscape composition when a phone is held upright. */
@media (orientation: portrait) and (min-width: 901px) {
  .world-page .world-map {
    height: calc(100vw * 941 / 1672);
    min-height: 0;
    margin-block: max(0px, calc((100svh - 100vw * 941 / 1672) / 2));
  }
}
.world-page .world-hud {
  box-sizing: border-box;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  height: 80px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.world-page .world-hud [hidden] { display: none !important; }
.world-page .world-hud button {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #07142e;
  font: 800 clamp(12px, 1vw, 15px)/1.4 system-ui, sans-serif;
  white-space: nowrap;
  text-shadow: 0 1px 0 #e8f9ff, 0 0 3px #e8f9ff;
  box-shadow: none;
  filter: none;
  transform: none;
  transition: filter 120ms ease;
}
.world-page .world-hud button:hover { background: none; color: #07142e; filter: brightness(1.08); box-shadow: none; }
.world-page .world-hud button:focus-visible { outline: 2px solid #123bee; outline-offset: 2px; color: #07142e; box-shadow: none; }
.world-page .world-hud button:active { color: #07142e; filter: brightness(.94); transform: none; box-shadow: none; }
.world-page .world-hud .world-hud-icon { display: block; width: 64px; height: 54px; margin: 0; }
.world-page .world-hud .world-hud-icon img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.world-page .world-hud .world-hud-label { position: static; display: block; width: auto; height: auto; margin: 0; clip-path: none; font: inherit; color: inherit; }
.world-page .world-hud .web-audio-launcher { width: auto; gap: 5px; }
.world-page .world-hud .web-audio-launcher .world-hud-icon img { transform: scale(1.55); }
.island-puzzle { display: none; }
@media (min-width: 901px), (orientation: landscape) {
  .world-page .world-hud { left: auto; right: 1%; top: 4.8%; width: 26.95%; height: 84px; }
  .island-layer-personality, .island-personality {
    left: 5%; top: 19%; width: 21%; height: 27%;
  }
  .island-layer-hall, .island-hall {
    left: 71%; top: 22%; width: 28%; height: 34%;
  }
  .island-layer-workbench, .island-workbench {
    left: 73%; top: 59%; width: 24%; height: 29%;
  }
  .island-layer-game, .island-game {
    left: 29%; top: 20%; width: 42%; height: 60%;
  }
  .island-layer-guangming, .island-guangming {
    left: 31%; top: 56%; width: 21%; height: 28%;
  }
  .island-puzzle {
    display: grid;
    left: 2%; top: 46%; width: 25%; height: 30%;
    animation: island-float-personality 3.8s ease-in-out -.6s infinite;
  }
  .island-puzzle > .island-base {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; pointer-events: none; opacity: 1;
  }
  .island-entry .island-module-copy {
    aspect-ratio: 1600 / 643;
    grid-template-rows: 61% 39%;
    background-image: url("./assets/island-module-sign-v2.png");
    background-size: 100% 100%;
    background-position: center top;
    overflow: hidden;
  }
  .island-entry .island-module-copy strong {
    font-size: clamp(19px, 1.65vw, 29px);
    padding: 0;
  }
  .island-entry .island-module-copy small {
    font-size: clamp(12px, 1vw, 17px);
    color: #fff;
  }
  .island-game .island-module-copy {
    background-image: url("./assets/island-module-sign-game-blue-v3.png");
  }
  .island-game .island-module-copy { top: 58%; width: 33%; }
  .island-guangming .island-module-copy { top: 78%; width: 58%; }
  .island-puzzle .island-module-copy {
    left: 50%; top: 77%; width: 52%; transform: translateX(-50%);
  }
  .island-personality .island-module-copy { top: 62%; width: 52%; }
  .island-hall .island-module-copy { top: -4%; width: 44%; }
  .island-workbench .island-module-copy { top: 67%; width: 52%; }
  .island-puzzle:hover, .island-puzzle:focus-visible { filter: brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .island-puzzle { animation: none !important; }
}