/* Approved 1672 × 941 artwork and real controls share one coordinate space.
   Never crop the art independently of the hit areas. Dialog/game CSS stays intact. */
.island-home { background: #caeaf3; }
.island-home .world-home {
  --home-safe-top: var(--endless-safe-top, env(safe-area-inset-top, 0px));
  --home-safe-right: var(--endless-safe-right, env(safe-area-inset-right, 0px));
  --home-safe-bottom: var(--endless-safe-bottom, env(safe-area-inset-bottom, 0px));
  --home-safe-left: var(--endless-safe-left, env(safe-area-inset-left, 0px));
  display: grid; place-items: center; width: 100%; height: 100dvh;
  padding: var(--home-safe-top) var(--home-safe-right) var(--home-safe-bottom) var(--home-safe-left);
}
/* Decorative full-bleed backdrop only. The sharp art and hit areas below
   remain a single, undistorted coordinate space. No extra image download. */
.island-home .soft-backdrop {
  display: block; pointer-events: none;
  background: url('../open/endless-island-monster-v1.png') center / cover no-repeat;
}
.island-home .world-stage {
  position: relative;
  width: min(calc(100vw - var(--home-safe-left) - var(--home-safe-right)), calc((100dvh - var(--home-safe-top) - var(--home-safe-bottom)) * 1672 / 941));
  height: auto; aspect-ratio: 1672 / 941; overflow: visible;
  container-type: inline-size; transform: none; margin: 0; border: 0; border-radius: 0;
}
.island-home .world-picture { display: block; width: 100%; height: 100%; }
.island-home .world-art { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.island-home .home-top-rail { position: absolute; inset: 0; display: block; padding: 0; pointer-events: none; }
.island-home .home-top-rail .family-account-button,
.island-home .home-top-rail .parent-tools,
.island-home .home-top-rail .parent-tools .parent-tool {
  position: absolute; display: block; min-width: 0; min-height: 0; max-width: none; max-height: none;
  padding: 0; margin: 0; border: 0; border-radius: 18%; background: transparent;
  box-shadow: none; transform: none; filter: none; gap: 0;
}
.island-home .home-top-rail .family-account-button { left: 3.3%; top: 2.3%; width: 17.4%; height: 10.7%; pointer-events: auto; }
.island-home .home-top-rail .family-account-button[hidden] { display: none; }
.island-home .home-top-rail .family-account-button > .family-avatar,
.island-home .home-top-rail .family-account-button > .family-arrow,
.island-home .home-top-rail #family-account-name { display: none; }
.island-home .home-top-rail .family-account-button > .family-copy {
  position: absolute; display: flex; flex-direction: column; justify-content: center;
  inset: 17% 5% 15% 40%; width: auto; height: auto; gap: .3cqw; text-align: center;
}
.island-home .home-top-rail .family-copy small { display: block; color: #72634b; font: 600 .8cqw/1.2 system-ui, sans-serif; }
.island-home .home-top-rail .family-copy strong { display: block; white-space: normal; line-height: 1.2; }
.island-home .home-top-rail #family-membership {
  display: block; padding: 0; border: 0; border-radius: 0; background: none;
  color: #315743; font: 800 1.35cqw/1.35 system-ui, sans-serif; white-space: normal;
}
.island-home .home-top-rail #family-membership[data-tier="monthly"] { font-size: .95cqw; }
.island-home .home-top-rail #family-membership[data-tier="monthly"] span { display: block; white-space: nowrap; }
.island-home .home-top-rail .parent-tools { inset: 0; width: 100%; height: 100%; pointer-events: none; }
.island-home .home-top-rail .parent-tools .parent-tool { top: 2.7%; width: 5.4%; height: 11.8%; pointer-events: auto; cursor: pointer; }
.island-home .home-top-rail .parent-tools .parent-tool > * { visibility: hidden; }
.island-home #app-mode-button { left: 67.05%; }
.island-home #sound-toggle { left: 72.8%; }
.island-home #parent-mode-button { left: 78.55%; }
.island-home #account-settings-button { left: 84.25%; }
.island-home .home-top-rail .parent-tools #referral-open { left: 89.65%; width: 7.4%; }
.island-home .home-top-rail .parent-tool[aria-pressed="true"]::after {
  content: "✓"; position: absolute; right: 4%; top: 0; background: #fff5d9;
  border: 1px solid #297367; border-radius: 50%; color: #1f7661; font: 800 1.1cqw/1.5 system-ui;
  width: 1.6cqw; height: 1.6cqw; text-align: center;
}
.island-home.is-muted #sound-toggle::after { content: "×"; color: #a93437; border-color: #a93437; }
.island-home .world-mode-choices { position: absolute; inset: 0; pointer-events: none; }
.island-home .world-mode-choices .world-link {
  position: absolute; top: 39.5%; width: 15%; height: 26%; bottom: auto; right: auto;
  border: 0; border-radius: 20%; background: transparent; box-shadow: none; transform: none;
  padding: 0; margin: 0; pointer-events: auto; cursor: pointer;
}
.island-home .world-mode-choices .alphabet-link { left: 13.5%; }
.island-home .world-mode-choices .reader-link { left: 33.8%; }
.island-home .world-mode-choices .wordplay-link { left: 53.8%; }
.island-home .world-mode-choices .numbers-link { left: 73.8%; }
.island-home .world-mode-choices .world-link > * { display: none; }
.island-home .future-feature-nav { position: absolute; left: 35%; top: 85.5%; bottom: auto; width: 29.5%; height: 12%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.island-home .future-feature-nav button { padding: 0; border: 0; background: transparent; border-radius: 20%; cursor: pointer; }
.island-home .world-link::before, .island-home .world-link::after { display: none; }
.island-home :is(.world-link, .parent-tool, .family-account-button, .future-feature-nav button):focus-visible {
  outline: 3px solid #fff8ae; outline-offset: 2px; box-shadow: 0 0 0 5px #167b7eaa;
}
.island-home :is(.world-link, .parent-tool, .family-account-button, .future-feature-nav button):active { background: #fff8d32e; }
@media (hover: hover) {
  .island-home :is(.world-link, .parent-tool, .family-account-button, .future-feature-nav button):hover { background: #fff8d31a; }
}
@media (orientation: portrait) {
  .island-home .world-home::after { content: "横屏观看，乐园更精彩"; position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); color: #286878; font: 600 15px/1.5 system-ui; pointer-events: none; }
}