/* World HUD only. Load after the scene styles; dialogs and illustrated
   interaction panels retain their own layout and focus behavior. */
#game {
  --hud-ink: #355e54;
  --hud-muted: #55776a;
  --hud-edge: max(14px, env(safe-area-inset-left), env(safe-area-inset-right));
  --hud-top: max(12px, env(safe-area-inset-top));
  --hud-bottom: max(12px, env(safe-area-inset-bottom));
  --hud-discovery-reserved: 112px; /* 48px action + 44px toggle + 8px gap + 12px separation */
  --hud-route-offset: 43px;
  --hud-item-width: clamp(48px, calc((100vw - 64px) / 5), 64px);
}

#game #top {
  top: var(--hud-top);
  left: var(--hud-edge);
  right: var(--hud-edge);
  z-index: 9;
  min-height: 44px;
  align-items: flex-start;
  gap: 8px;
}
#game #top .hud-identity,
#game[data-island=library] #top > .hud-identity:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: calc(100% - 100px);
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-shadow: 0 1px 4px #fffdebe8, 0 0 12px #fffdeba8;
}
#game #islandName {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--hud-ink);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: .025em;
}
#game #top .hud-identity #moodNow {
  position: static;
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 5px;
  min-height: 44px;
  min-width: 44px;
  max-width: 122px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--hud-muted);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  text-shadow: inherit;
  pointer-events: auto;
}
#game #top #moodNow::before {
  width: 6px;
  height: 6px;
  margin: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fffdf066;
}
#game #saved {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#game[data-save-error=true] { --hud-route-offset: 83px; }
#game[data-save-error=true] #saved {
  top: 43px;
  left: 0;
  width: min(290px, 100%);
  height: auto;
  margin: 0;
  padding: 4px 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  color: #805441;
  font-size: 11px;
  line-height: 1.55;
  text-shadow: 0 1px 3px #fffdf0;
}

#game #top .top-actions {
  display: flex;
  align-items: center;
  flex: none;
  gap: 4px;
  margin-left: auto;
  pointer-events: none;
}
#game #top .top-actions :is(#listenNow, #hudToggle) {
  position: static;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 9px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  color: var(--hud-ink);
  text-shadow: 0 1px 5px #fffdf0;
  pointer-events: auto;
}
#game #top .top-actions :is(#listenNow, #hudToggle) svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px #fffceccc);
}
#game #hudToggle[aria-expanded=true] { background: #fffcecaa; }

#game #hudTools {
  position: absolute;
  z-index: 19;
  top: calc(var(--hud-top) + 52px);
  right: var(--hud-edge);
  left: auto;
  width: min(220px, calc(100% - var(--hud-edge) * 2));
  max-height: calc(100svh - var(--hud-top) - var(--hud-bottom) - 74px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border: 1px solid #fffef0b3;
  border-radius: 17px;
  background: #fffcf0f0;
  box-shadow: 0 8px 26px #345b4824;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--hud-ink);
  pointer-events: auto;
}
#game #hudTools > :is(h2, h3, p, strong) {
  margin: 0 9px 5px;
  color: var(--hud-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .06em;
}
#game #hudTools :is(.hud-tool, #profile, #soundToggle, #settings) {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--hud-ink);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  pointer-events: auto;
}
#game #hudTools .hud-tool svg { flex: none; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
#game #hudTools .hud-tool span { font-size: inherit; letter-spacing: 0; }

#game :is(#publicIsland, #worldView, #mistIsland) {
  position: absolute;
  z-index: 8;
  top: calc(var(--hud-top) + var(--hud-route-offset));
  left: var(--hud-edge);
  right: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: calc(100% - var(--hud-edge) * 2 - 94px);
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  color: var(--hud-ink);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .035em;
  text-align: left;
  text-shadow: 0 1px 4px #fffcebe6, 0 0 10px #fffceba8;
}
#game #commonsCount {
  position: absolute;
  z-index: 8;
  top: calc(var(--hud-top) + var(--hud-route-offset) + 40px);
  left: calc(var(--hud-edge) + 2px);
  right: auto;
  max-width: calc(100% - var(--hud-edge) * 2);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--hud-muted);
  font-size: 10px;
  line-height: 1.5;
  text-shadow: 0 1px 3px #fffdf0;
  pointer-events: none;
}

#game #dock {
  position: absolute;
  z-index: 9;
  left: 50%;
  right: auto;
  bottom: var(--hud-bottom);
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2px;
  width: max-content;
  max-width: calc(100% - var(--hud-edge) * 2);
  padding: 5px 6px;
  border: 1px solid #fffdef94;
  border-radius: 20px;
  background: #fcfaeac9;
  box-shadow: 0 4px 18px #385f4c1c;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#game #dock > :is(button, .round) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--hud-item-width);
  gap: 3px;
  width: var(--hud-item-width);
  height: 54px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 5px 2px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
  color: var(--hud-ink);
}
#game #dock > button svg { width: 24px; height: 24px; stroke-width: 1.6; }
#game #dock > button span { font-size: 11px; line-height: 1.25; letter-spacing: .045em; }
#game #dock #returnIsland { background: transparent; }
#game #dock > button[aria-pressed=true] { background: #d7e7d477; }

#game #islandActivity {
  bottom: calc(var(--hud-bottom) + 76px);
  left: 50%;
  right: auto;
  z-index: 8;
  transform: translateX(-50%);
  min-height: 44px;
  max-width: calc(100% - var(--hud-edge) * 2);
  padding: 7px 14px;
  border: 0;
  border-radius: 12px;
  background: #fffcf0c9;
  box-shadow: none;
  color: var(--hud-ink);
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
}
#game #tapHint {
  bottom: calc(var(--hud-bottom) + 79px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - var(--hud-edge) * 2);
  padding: 3px 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--hud-muted);
  font-size: 11px;
  line-height: 1.5;
  text-shadow: 0 1px 4px #fffdebe6, 0 0 9px #fffdebb8;
  white-space: normal;
  text-align: center;
  pointer-events: none;
}
#game #undo {
  left: var(--hud-edge);
  right: auto;
  bottom: calc(var(--hud-bottom) + 72px);
  min-height: 44px;
  padding: 8px 2px;
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  color: var(--hud-muted);
  font-size: 11px;
  text-shadow: 0 1px 4px #fffdea;
}
#game:has(#undo:not([hidden])) #tapHint { visibility: hidden; }
#game #toast {
  top: calc(var(--hud-top) + var(--hud-route-offset) + 64px);
  z-index: 18;
  max-width: min(440px, calc(100% - var(--hud-edge) * 2));
  padding: 5px 10px;
  border: 0;
  border-radius: 10px;
  background: #fffcece6;
  box-shadow: 0 2px 9px #44614f12;
  color: var(--hud-ink);
  font-size: 12px;
  line-height: 1.65;
}

/* Native hidden attributes always win, including before main has mounted.
   No world controls sit above a dialog or an illustrated interaction. */
#game:not([data-mode=play]) :is(#top, #hudTools, #dock, #publicIsland, #worldView, #mistIsland, #commonsCount, #islandActivity, #tapHint, #undo),
#game[data-dialog=open] :is(#top, #hudTools, #dock, #publicIsland, #worldView, #mistIsland, #commonsCount, #islandActivity, #tapHint, #undo) {
  visibility: hidden;
  pointer-events: none;
}
#game :is(#top, #dock, #hudTools) [hidden],
#game :is(#hudTools, #dock, #listenNow, #publicIsland, #worldView, #mistIsland, #commonsCount, #islandActivity, #tapHint, #undo)[hidden] { display: none !important; }

@media (hover: hover) {
  #game #top .top-actions :is(#listenNow, #hudToggle):hover,
  #game #hudTools .hud-tool:hover,
  #game #dock > button:hover { background: #faffefa3; }
  #game :is(#publicIsland, #worldView, #mistIsland, #moodNow):hover { text-decoration: underline; text-underline-offset: 4px; }
}
#game :is(#hudToggle, #listenNow, #publicIsland, #worldView, #mistIsland, #moodNow):focus-visible,
#game #dock > button:focus-visible,
#game #hudTools .hud-tool:focus-visible { outline: 2px solid #488a76; outline-offset: 2px; }

@media (max-width: 360px) {
  #game { --hud-edge: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  #game #top .hud-identity { gap: 5px; max-width: calc(100% - 96px); }
  #game #islandName { font-size: 15px; }
  #game #top .hud-identity #moodNow { font-size: 11px; max-width: 108px; }
  #game #top .top-actions { gap: 0; }
}
@media (min-width: 850px) and (min-height: 550px) {
  #game { --hud-edge: max(28px, env(safe-area-inset-left), env(safe-area-inset-right)); --hud-top: max(22px, env(safe-area-inset-top)); --hud-bottom: max(22px, env(safe-area-inset-bottom)); }
  #game #top .hud-identity { gap: 12px; }
  #game #islandName { font-size: 18px; }
  #game #top .hud-identity #moodNow { font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 550px) {
  #game { --hud-top: max(6px, env(safe-area-inset-top)); --hud-bottom: max(6px, env(safe-area-inset-bottom)); }
  #game #dock { padding-top: 3px; padding-bottom: 3px; border-radius: 17px; }
  #game #dock > :is(button, .round) { height: 48px; gap: 1px; padding-top: 3px; padding-bottom: 3px; }
  #game #dock > button svg { width: 22px; height: 22px; }
  #game #islandActivity { bottom: calc(var(--hud-bottom) + 61px); }
  #game #tapHint { bottom: calc(var(--hud-bottom) + 62px); }
  #game #undo { bottom: calc(var(--hud-bottom) + 56px); }
  #game #toast { top: calc(var(--hud-top) + 54px); max-width: min(360px, max(180px, calc(100% - 340px))); }
}

/* Crisp night HUD: outlined glyphs and icon strokes, without a milky blur. */
#game:is([data-time-of-day=night],[data-time-of-day=dusk]) #top .hud-identity,
#game:is([data-time-of-day=night],[data-time-of-day=dusk]) #top .hud-identity :is(#islandName,#moodNow),
#game:is([data-time-of-day=night],[data-time-of-day=dusk]) :is(#publicIsland,#worldView,#mistIsland,#commonsCount,#tapHint,#undo,#eventCaption){
 color:#fff8e8;text-shadow:-1px 0 #263c50,1px 0 #263c50,0 -1px #263c50,0 1px #263c50,0 2px 3px #071323;
 -webkit-text-stroke:.25px #fff8e8;paint-order:stroke fill;
}
#game:is([data-time-of-day=night],[data-time-of-day=dusk]) #top .top-actions :is(#listenNow,#hudToggle){color:#fff8e8;text-shadow:none;background:radial-gradient(ellipse,#10233355,transparent 72%)}
#game:is([data-time-of-day=night],[data-time-of-day=dusk]) #top .top-actions :is(#listenNow,#hudToggle) svg{stroke-width:2;filter:drop-shadow(0 1px 1px #061320);}
#game:is([data-time-of-day=night],[data-time-of-day=dusk]) #hudToggle[aria-expanded=true]{color:#284b50;background:#fff8e8ed}
#game:is([data-time-of-day=night],[data-time-of-day=dusk]) :is(#publicIsland,#worldView,#mistIsland,#commonsCount){font-weight:500}
#game:is([data-time-of-day=night],[data-time-of-day=dusk]) :is(#hudToggle,#listenNow,#publicIsland,#worldView,#mistIsland,#moodNow):focus-visible{outline-color:#fff3bf;}

/* One shared route row keeps the new shortcut clear of the island title. */
#game #worldRoutes{position:absolute;z-index:8;top:calc(var(--hud-top) + var(--hud-route-offset));left:var(--hud-edge);right:var(--hud-edge);display:flex;align-items:center;gap:14px;pointer-events:none}
#game #worldRoutes :is(#publicIsland,#worldView,#mistIsland){position:static;max-width:none;flex:0 0 auto;min-height:44px;pointer-events:auto;white-space:nowrap}
#game:not([data-mode="play"]) #worldRoutes,#game[data-dialog="open"] #worldRoutes{visibility:hidden;pointer-events:none}
/* r169: a small row of station-like circles; labels appear only on demand. */
#game #dock:is(nav){background:transparent;border:0;box-shadow:none;padding:4px;gap:12px;overflow:visible;backdrop-filter:none;width:auto;max-width:calc(100% - 24px)}
#game #dock:is(nav)>button:is(.round,.journey-dock-launch){position:relative;flex:0 0 56px;width:56px;height:56px;min-height:56px;border:1px solid #fff8e7aa;border-radius:50%;background:#fff8e680;padding:7px;box-shadow:0 3px 10px #1d3c2922;color:#3e5b46}
#game #dock>button>span:not(.journey-badge),#game #dock>button>small:not(.daily-dock-count){display:none}
#game #dock>button svg{width:40px;height:40px;margin:0}
#game #dock>button::after{content:attr(data-hud-label);display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;max-width:240px;background:#fffaf0f5;border:1px solid #c8d5be;color:#3e5b46;padding:7px 10px;border-radius:10px;font-size:13px;line-height:1.4;pointer-events:none}
#game #dock>button:hover::after,#game #dock>button:focus-visible::after,#game #dock>button[data-tooltip-open]::after{display:block}
#game #dock>#care,#game #dock>#decorate{display:none!important}
.ai-entry-overlay{position:fixed;inset:0;z-index:10001;background:#20382eb8;display:grid;place-items:center;padding:16px;color:#294538}
.ai-entry-card{box-sizing:border-box;width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#fffaf0;border-radius:18px;padding:22px;font:15px/1.7 system-ui}
.ai-entry-card h2{font-size:20px;line-height:1.4;margin:0 0 14px}.ai-entry-card p{margin:12px 0}.ai-entry-card label{display:flex;gap:12px;padding:12px 0;cursor:pointer}.ai-entry-card input{width:22px;height:22px;flex-shrink:0}.ai-entry-card button,.ai-entry-card summary,.ai-entry-card a{min-height:44px;font:inherit}.ai-entry-card summary{cursor:pointer}.ai-entry-card a{display:inline-flex;align-items:center;color:#294538}.ai-entry-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}.ai-entry-card button{padding:10px 16px;border:1px solid #809785;border-radius:12px;background:#315a45;color:white;cursor:pointer}
/* On narrow screens discoveries have their own row above the four navigation
   circles. This also overrides discovery.css's older side-by-side reservation. */
#game>.discovery-control{right:var(--hud-edge);gap:8px}
#game>.discovery-control>.discovery-quiet{width:44px;min-width:44px}
#game>.discovery-control>#islandActivity{border-radius:50%;padding:5px}
@media(max-width:680px){
 #game:has(>.discovery-control:not([hidden])) #dock:is(nav){--hud-item-width:52px;left:50%;right:auto;bottom:var(--hud-bottom);transform:translateX(-50%);width:auto;max-width:calc(100% - var(--hud-edge)*2);height:64px;padding:6px 4px;gap:8px;overflow:visible}
 #game:has(>.discovery-control:not([hidden])) #dock:is(nav)>button:is(.round,.journey-dock-launch){width:52px;height:52px;flex-basis:52px;min-height:52px}
 #game>.discovery-control:not([data-station=true]){bottom:calc(var(--hud-bottom) + 80px)}
 #game>.discovery-icon-dock{left:calc((100% - var(--hud-discovery-reserved))/2);max-width:calc(100% - var(--hud-edge)*2 - var(--hud-discovery-reserved))}
 /* Expanded discoveries replace navigation and can reuse the bottom row. */
 #game:has(>.discovery-icon-dock:not([hidden]))>.discovery-control{bottom:max(24px,env(safe-area-inset-bottom))}
}

/* r170: quiet circles become opaque only while selected. */
#game #dock:is(nav)>button:is(.round,.journey-dock-launch)>svg{opacity:.78}
#game #dock:is(nav)>button:is(.round,.journey-dock-launch):is(:focus-visible,:active,[data-tooltip-open]){background:#fff8e7;border-color:#fff3c5}
#game #dock:is(nav)>button:is(.round,.journey-dock-launch):is(:focus-visible,:active,[data-tooltip-open])>svg{opacity:1}
@media(hover:hover){#game #dock:is(nav)>button:is(.round,.journey-dock-launch):hover{background:#fff8e7;border-color:#fff3c5}#game #dock:is(nav)>button:is(.round,.journey-dock-launch):hover>svg{opacity:1}}
/* Plant care stays on the island: three tools instead of a paper panel. */
#game #sheet.plant-action-menu{position:absolute;inset:auto auto max(20px,env(safe-area-inset-bottom)) 50%;transform:translateX(-50%);width:min(320px,calc(100% - 28px));max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;overflow:visible;color:#355e54}
#game #sheet.plant-action-menu .sheet-head{position:relative;display:block;height:44px;padding:0;background:none;border:0}
#game #sheet.plant-action-menu #sheetTitle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#game #sheet.plant-action-menu #closeSheet{position:absolute;right:0;top:0;width:44px;height:44px;border:0;border-radius:50%;background:#fff8e680;color:#355e54;font-size:22px;padding:0}
#game #sheet.plant-action-menu #sheetNote{max-width:260px;margin:0 auto 14px;padding:0;text-align:center;font-size:13px;line-height:1.6;color:#355e54;text-shadow:0 1px 3px #fff9e7,0 0 6px #fff9e7}
#game #sheet.plant-action-menu #sheetOptions{display:flex;justify-content:center;align-items:center;gap:20px;margin:0;padding:4px;overflow:visible;background:none}
#game #sheet.plant-action-menu #sheetOptions>button{position:relative;display:grid;place-items:center;flex:0 0 64px;width:64px;height:64px;min-height:64px;padding:10px;margin:0;border:1px solid #fff9eac9;border-radius:50%;background:#fff8e680;color:#355e54;box-shadow:0 2px 7px #425a4915}
#game #sheet.plant-action-menu #sheetOptions>button svg{width:42px;height:42px;opacity:.78;pointer-events:none}
#game #sheet.plant-action-menu #sheetOptions>button::after{content:attr(data-care-label);display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;background:#fff8e7;color:#355e54;border-radius:9px;padding:6px 10px;font-size:13px;line-height:1.4;pointer-events:none}
#game #sheet.plant-action-menu #sheetOptions>button:is(:focus-visible,:active,[data-tooltip-open]){background:#fff8e7;outline:2px solid #c0b78f;outline-offset:2px}
#game #sheet.plant-action-menu #sheetOptions>button:is(:focus-visible,[data-tooltip-open])::after{display:block}
#game #sheet.plant-action-menu #sheetOptions>button:is(:focus-visible,:active,[data-tooltip-open]) svg{opacity:1}
@media(hover:hover){#game #sheet.plant-action-menu #sheetOptions>button:hover,#game #sheet.plant-action-menu #closeSheet:hover{background:#fff8e7}#game #sheet.plant-action-menu #sheetOptions>button:hover svg{opacity:1}#game #sheet.plant-action-menu #sheetOptions>button:hover::after{display:block}}
@media(orientation:landscape) and (max-height:550px){#game #sheet.plant-action-menu{bottom:max(8px,env(safe-area-inset-bottom))}#game #sheet.plant-action-menu #sheetNote{margin-bottom:6px}#game #sheet.plant-action-menu .sheet-head{height:20px}#game #sheet.plant-action-menu #closeSheet{right:-8px;top:-20px}}

#game:is([data-time-of-day=night],[data-time-of-day=dusk]) #sheet.plant-action-menu #sheetNote{color:#fff8e8;text-shadow:0 1px 3px #071323}

/* Daily progress stays visible while the circular label is folded. */
#game #dock>#dailyIsland>.daily-dock-count{display:grid;place-items:center;right:-5px;top:-6px;min-width:30px;height:22px;box-sizing:border-box;padding:0 4px;background:#3f674b;color:#fffdf4;border:2px solid #fffdf4;border-radius:12px;font:600 12px/1 system-ui;font-variant-numeric:tabular-nums;pointer-events:none}
#game #dock>#dailyIsland[data-daily-complete=true]>.daily-dock-count{min-width:24px;width:24px;height:24px;font-size:15px}