/* Complete artwork receives the space formerly occupied by the persistent toolbar. */
body.island-home[data-home-settings] { min-height:100vh; min-height:100dvh; height:auto; overflow-x:hidden; overflow-y:auto; background:#f4faf7; }
body.island-home[data-home-settings] .world-home {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-sizing:border-box; width:100%; height:100vh; height:100dvh; min-height:240px;
  gap:4px; padding:4px; padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));
}
body.island-home[data-home-settings] .world-stage {
  width:100%; max-width:1280px; min-width:0;
  width:min(100%,1280px,calc((100dvh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9));
  height:auto; aspect-ratio:16/9; flex:0 0 auto; margin:0; border:0; padding:0; overflow:visible; transform:none; animation:none;
}
/* Keep a real 16:9 box even when an older tablet cannot parse aspect-ratio. */
body.island-home[data-home-settings] .world-picture { position:relative; left:auto; top:auto; right:auto; bottom:auto; width:100%; height:0; padding-top:56.25%; }
body.island-home[data-home-settings] .world-art { position:absolute; left:0; top:0; width:100%; height:100%; }
body.island-home[data-home-settings] .world-mode-choices { left:0; top:0; }
body.island-home[data-home-settings] .world-mode-choices .world-link { width:8.125%; height:14.444444%; width:max(44px,8.125cqw); height:max(44px,8.125cqw); }
@supports not ((height:100dvh) and (width:min(100%,1280px))) {
  body.island-home[data-home-settings] .world-stage { width:100%!important; max-width:calc((100vh - 60px) * 16 / 9); }
  @media (orientation:portrait) and (max-width:1024px) {
    body.island-home[data-home-settings] .world-stage { max-width:calc((100vw - 8px) * 16 / 9); }
  }
}
html[data-home-drawer-open="true"] body.island-home[data-home-settings] .world-stage { width:min(100%,1280px,calc((100dvh - 116px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)); }
body.island-home[data-home-settings] .home-compact-controls { display:flex; flex:0 0 44px; align-items:center; justify-content:center; box-sizing:border-box; width:min(100%,1280px); height:44px; gap:12px; margin:0; padding:0; }
body.island-home[data-home-settings] .home-compact-controls button { min-width:44px; min-height:44px; padding:8px 14px; border:1px solid #cbdcd4; border-radius:14px; background:#fff; color:#315b55; font:700 14px/1.25 system-ui,sans-serif; box-shadow:none; cursor:pointer; }
body.island-home[data-home-settings] .home-settings-open { display:inline-flex; align-items:center; gap:7px; }
body.island-home[data-home-settings] .home-settings-open > span:first-child { font-size:21px; line-height:1; }
body.island-home[data-home-settings] .home-feature-toggle { display:inline-flex; align-items:center; gap:10px; }
html[data-home-drawer-open="true"] body.island-home[data-home-settings] .home-drawer-arrow { transform:rotate(180deg); }
body.island-home[data-home-settings] .home-feature-drawer { flex:0 0 auto; width:min(100%,650px); max-height:46dvh; overflow:auto; margin:0; padding:0; }
body.island-home[data-home-settings] .future-feature-nav { width:100%; gap:6px; }
body.island-home[data-home-settings] .future-feature-nav button { min-height:44px; padding:8px 5px; }
body.island-home[data-home-settings] [hidden] { display:none!important; }
body.island-home[data-home-settings] .endless-account-nav { display:none; }
body.island-home[data-home-settings] #admin-link { display:none!important; }
body.island-home[data-home-settings] .home-settings-dialog {
  width:min(94vw,680px); max-width:680px; max-height:calc(100dvh - 24px); margin:auto; padding:0;
  border:1px solid #d2e1db; border-radius:22px; background:#f8fcf9; color:#315b55; overflow:auto;
  box-shadow:0 18px 60px #143c4940; font:500 15px/1.5 system-ui,sans-serif;
}
body.island-home[data-home-settings] .home-settings-dialog::backdrop { background:#173f4d88; backdrop-filter:blur(4px); }
body.island-home[data-home-settings] .home-settings-card { padding:18px; }
body.island-home[data-home-settings] .home-settings-heading { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; background:#f8fcf9; }
body.island-home[data-home-settings] .home-settings-heading h2 { font:800 22px/1.25 system-ui,sans-serif; margin:0; }
body.island-home[data-home-settings] #home-settings-close { width:44px; height:44px; flex:0 0 44px; padding:0; border:1px solid #d2e1db; border-radius:50%; background:white; color:inherit; font:500 28px/1 system-ui,sans-serif; cursor:pointer; }
body.island-home[data-home-settings] .home-settings-dialog .home-top-rail { position:static; inset:auto; display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; width:100%; height:auto; gap:10px; margin:0; padding:0; background:none; border:0; border-radius:0; box-shadow:none; transform:none; }
body.island-home[data-home-settings] .home-settings-dialog .home-top-rail .parent-tools { position:static; inset:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; flex:auto; gap:10px; height:auto; padding:0; margin:0; }
body.island-home[data-home-settings] .home-settings-dialog .home-top-rail .parent-tools .parent-tool,
body.island-home[data-home-settings] .home-settings-dialog .home-top-rail .family-account-button { display:flex; position:relative; inset:auto; justify-content:flex-start; box-sizing:border-box; width:100%; height:auto; min-height:70px; min-width:0; flex:auto; gap:10px; padding:12px; margin:0; border:1px solid #d2e1db; border-radius:14px; background:white; color:#315b55; box-shadow:none; transform:none; font:700 15px/1.4 system-ui,sans-serif; }
body.island-home[data-home-settings] .home-settings-dialog .home-top-rail .parent-tools :is(#app-mode-button,#sound-toggle,#parent-mode-button,#account-settings-button,#family-parent-entry,#referral-open,#home-install-button) { width:100%; height:auto; inset:auto; }
body.island-home[data-home-settings] .home-settings-dialog .home-top-rail .parent-tools .parent-tool > .parent-tool-icon,
body.island-home[data-home-settings] .home-settings-dialog .home-top-rail .family-account-button > .family-avatar { position:static; display:flex; flex:0 0 24px; align-items:center; justify-content:center; width:24px; height:24px; border:0; background:transparent; box-shadow:none; }
body.island-home[data-home-settings] .home-settings-dialog .home-top-rail .parent-tools .parent-tool > .parent-tool-copy,
body.island-home[data-home-settings] .home-settings-dialog .home-top-rail .family-account-button > .family-copy { position:static; inset:auto; width:auto; min-width:0; text-align:left; }
body.island-home[data-home-settings] .home-settings-dialog .home-top-rail .parent-tools .parent-tool .parent-tool-copy strong,
body.island-home[data-home-settings] .home-settings-dialog .home-top-rail .parent-tools :is(#app-mode-button,#family-parent-entry,#referral-open) .parent-tool-copy strong,
body.island-home[data-home-settings] .home-settings-dialog .family-copy strong { display:block; max-width:none; white-space:normal; color:inherit; font:700 15px/1.35 system-ui,sans-serif; }
body.island-home[data-home-settings] .home-settings-dialog .home-top-rail .parent-tools .parent-tool .parent-tool-copy small { display:block; margin-top:4px; color:#6b8278; font:500 12px/1.4 system-ui,sans-serif; }
body.island-home[data-home-settings] .home-display-status { padding:10px 12px; border-radius:12px; background:#e9f4ef; color:#365e52; margin:14px 0 8px; font-size:13px; }
body.island-home[data-home-settings] .home-settings-note { color:#72857c; font-size:12px; line-height:1.5; margin:0; }
body.island-home[data-home-settings] .home-dialog { width:min(94vw,760px); max-width:760px; max-height:calc(100dvh - 24px); overflow:auto; }
body.island-home[data-home-settings] .home-dialog .home-dialog-card { max-height:none; padding:22px; box-sizing:border-box; }
body.island-home[data-home-settings] #install-guide-status { white-space:normal; font:500 15px/1.7 system-ui,sans-serif; }
body.island-home[data-home-settings] .home-decor-layer { box-sizing:border-box; width:100%; padding:6px; }
html.home-immersive body.island-home[data-home-settings] .world-home { padding:0; gap:0; }
html.home-immersive body.island-home[data-home-settings] .world-stage { width:min(100%,1280px,calc((100dvh - 44px) * 16 / 9)); }
body.island-home[data-home-settings] .home-dialog-fallback { position:fixed; inset:12px; z-index:100; }
body.island-home[data-home-settings] :is(.home-compact-controls button,.home-settings-dialog button,.home-settings-dialog a):focus-visible { outline:3px solid #158270; outline-offset:3px; }
@media(max-width:420px) { body.island-home[data-home-settings] .home-settings-dialog .home-top-rail .parent-tools { grid-template-columns:1fr; } body.island-home[data-home-settings] .home-settings-card { padding:14px; } }
@media(max-height:420px) { body.island-home[data-home-settings] .home-settings-dialog .home-top-rail .parent-tools { grid-template-columns:repeat(3,minmax(0,1fr)); } body.island-home[data-home-settings] .home-settings-card { padding:12px; } }
/* Wide screens use the side letterbox for controls, keeping almost the full viewport height for the image. */
@media(min-aspect-ratio:16/9) and (min-width:600px) {
  body.island-home[data-home-settings] .world-home { display:grid; grid-template-columns:minmax(0,1fr) 44px; grid-template-rows:minmax(0,1fr); gap:4px; align-items:center; justify-items:center; }
  body.island-home[data-home-settings] .world-stage,
  html.home-immersive body.island-home[data-home-settings] .world-stage { grid-area:1/1; width:min(100%,1280px,calc((100dvh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)); }
  body.island-home[data-home-settings] .home-compact-controls { grid-area:1/2; display:flex; flex-direction:column-reverse; width:44px; height:auto; min-height:0; gap:8px; }
  body.island-home[data-home-settings] .home-compact-controls button { box-sizing:border-box; width:44px; padding:5px 3px; }
  body.island-home[data-home-settings] .home-settings-open { flex-direction:column; gap:3px; font-size:12px; }
  body.island-home[data-home-settings] .home-feature-toggle { justify-content:center; }
  body.island-home[data-home-settings] .home-feature-toggle > span:first-child { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  body.island-home[data-home-settings] .home-drawer-arrow { font-size:22px; }
  body.island-home[data-home-settings] .home-feature-drawer { grid-area:2/1/3/3; }
  html[data-home-drawer-open="true"] body.island-home[data-home-settings] .world-home { grid-template-rows:minmax(0,1fr) auto; }
  html[data-home-drawer-open="true"] body.island-home[data-home-settings] .world-stage { width:min(100%,1280px,calc((100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)); }
}