* {
  box-sizing: border-box;
}
#update-notice {
  position:fixed;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(480px,calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  height:min(480px,calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:16px 12px;
  padding:24px;border-radius:24px;overflow:hidden;color:var(--w-ink,#35483d);background:var(--w-surface,#f5f1e7);
}
#update-notice[hidden]{display:none}
#update-message{grid-column:1 / -1;margin:0;text-align:center;font-size:18px;font-weight:700;line-height:1.4}
#update-notice button{min-height:48px;min-width:0}
#update-notes{grid-column:1 / -1;min-height:0;min-width:0;display:flex;flex-direction:column;font-size:15px;line-height:1.5}
#update-notes[hidden]{display:none}
#update-notes h2{font:700 15px/1.5 var(--w-font-ui);margin:0 0 10px}
#update-notes-list{flex:1;min-height:0;margin:0;padding:0 8px 4px 22px;overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere;scrollbar-gutter:stable}
#update-notes-list li+li{margin-top:10px}
#update-notice:has(#update-notes[hidden]){height:auto;grid-template-rows:auto auto}
body[data-theme=dark] #update-notice{color:#eeecdd;background:#263c35}
html, body.w-ui { background: var(--home-sky-top, #9EB7BE); }
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  display: block;
  background: var(--home-sky-top, #9EB7BE);
  color: #35483d;
  font-family: "Nunito Sans", sans-serif;
}
body[data-theme="dark"] {
  background: var(--home-sky-top, #162B3B);
  color: #eeecdd;
}
header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
  background: transparent;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(16px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right)) 10px
    max(24px, env(safe-area-inset-left));
  gap: 20px;
}
.identity {
  --logo-width:138px;
  display: flex;
  align-items: center;
  gap: 28px;
}
#logo {
  width: var(--logo-width);
  height: auto;
  display: block;
}
.brand-mark { position:relative; }
h1 {
  font-family: Lora, serif;
  font-size: 21px;
  font-weight: 500;
  margin: 0;
}
button {
  font: inherit;
  cursor: pointer;
  min-height: 48px;
}
button:disabled {
  cursor: default;
}
#world {
  /* iOS standalone can make the percentage-height page shorter than the screen.
     Anchor the garden to the viewport; safe-area padding belongs to controls. */
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
  /* WebKit's standalone dynamic viewport may omit the status/safe-area strip. */
  html, body {
    height: 100vh;
    min-height: 100vh;
  }
  #world { height: 100vh; }
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline-offset: -4px;
}
canvas:focus-visible {
  outline: 2px solid #b7865e;
}
.focus-pulse {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 1;
}
.focus-pulse::after {
  content: "";
  position: absolute;
  width: 44px; height: 44px;
  left: -22px; top: -22px;
  border: 2px solid #b7865e;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #fff6;
  animation: focus-pulse 650ms ease-out both;
}
body[data-theme="dark"] .focus-pulse::after { border-color: #e8bc96; }
body.butterfly-selected .focus-pulse { visibility: hidden; }
@keyframes focus-pulse {
  from { transform: scale(.3); opacity: .65; }
  to { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .focus-pulse::after { animation-name: focus-pulse-fade; }
  @keyframes focus-pulse-fade {
    from { opacity: .55; }
    to { opacity: 0; }
  }
}
#loading,
#error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
}
#loading {
  font-size: 14px;
}
#error {
  background: #f7f3e8;
  color: #35483d;
  padding: 24px;
  width: min(90%, 460px);
  border-radius: 20px;
}
#status {
  font-size: 12px;
  margin: 8px 0 0;
  min-height: 0;
}
#status:empty {
  display: none;
}
#status {
  position: absolute;
  bottom: max(16px, env(safe-area-inset-bottom));
  text-align: center;
  left: 15%;
  right: 15%;
  padding: 8px 12px;
  background: #f7f3e8;
  color: #35483d;
  border-radius: 12px;
  pointer-events: none;
}
button:focus-visible {
  outline: 3px solid #b7865e;
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
@media (max-width: 600px) {
  header {
    padding-right: 16px;
    padding-left: 16px;
  }
  .identity {
    gap: 16px;
  }
  .identity {
    --logo-width:108px;
  }
  h1 {
    font-size: 18px;
  }
}
@media (max-height: 500px) {
  header {
    padding-top: 6px;
    padding-bottom: 4px;
  }
  .identity {
    --logo-width:95px;
  }

}
/* The cover exists in HTML, before the bundle or any house asset loads. */
#loading {
  inset: 0;
  transform: none;
  display: grid;
  place-items: center;
  background: var(--w-canvas);
  z-index: 3;
  opacity: 1;
  transition: opacity 350ms ease;
  pointer-events: auto;
}
#loading.complete {
  opacity: 0;
  pointer-events: none;
}
.loading-panel {
  width: min(300px, calc(100% - 48px));
  padding: 30px 28px 32px;
  border: 1px solid var(--w-border);
  border-radius: 24px;
}
#load-label {
  font-family: Lora, serif;
  font-size: 18px;
  margin: 0 0 20px;
}
#load-progress {
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  appearance: none;
  background: #e7dfd1;
  color: #d6a071;
}
#load-progress::-webkit-progress-bar {
  background: #e7dfd1;
  border-radius: 20px;
  box-shadow: inset 0 1px 2px #35483d20;
}
#load-progress::-webkit-progress-value {
  background: linear-gradient(#e8bc96, #d6a071);
  border-radius: 20px;
  transition: width 160ms ease;
}
#load-progress::-moz-progress-bar {
  background: linear-gradient(#e8bc96, #d6a071);
  border-radius: 20px;
}
@media (prefers-reduced-motion: reduce) {
  #loading,
  #load-progress::-webkit-progress-value {
    transition: none;
  }
}

.home-toolbar {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Menus temporarily hide the toolbar without changing its expanded state. */
body:has(dialog[open]) > .home-toolbar { visibility: hidden; }
body > .home-toolbar { pointer-events: none; }
body > .home-toolbar .w-button { pointer-events: auto; }
@media (orientation: portrait) {
  .home-toolbar {
    flex-direction: row;
  }
}
.home-toolbar .w-button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 12px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#home-actions {
  display: flex;
  flex-direction: inherit;
  gap: 8px;
  animation: home-actions-open 160ms ease-out;
}
#home-menu[aria-expanded="false"] .icon-close-menu,
#home-menu[aria-expanded="true"] .icon-menu { display: none; }
@keyframes home-actions-open {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (orientation: portrait) {
  @keyframes home-actions-open {
    from { opacity: 0; transform: translateX(6px); }
    to { opacity: 1; transform: translateX(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  #home-actions { animation: none; }
}
.home-toolbar svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
#theme[aria-pressed="false"] .icon-sun,
#theme[aria-pressed="true"] .icon-moon {
  display: none;
}
@media (max-width: 600px) {
  header {
    gap: 8px;
  }
  .identity {
    gap: 10px;
  }
}
@media (max-width: 360px) {
  .identity h1 {
    display: none;
  }
}

header {
  flex-wrap: wrap;
}
.identity {
  margin-right: auto;
}

/* Quiet test affordance, separate from the Home camera toolbar. */
#debug-toggle {
  position: fixed;
  z-index: 4;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(16px + env(safe-area-inset-bottom));
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  pointer-events: auto;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  touch-action: manipulation;
}
#debug-panel {
  position: fixed;
  z-index: 6;
  right: calc(12px + env(safe-area-inset-right));
  top: calc(66px + env(safe-area-inset-top));
  width: min(430px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height: calc(100dvh - 90px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  padding: 14px;
  display: flex;
  flex-direction: column;
  background: var(--w-canvas);
  border: 1px solid var(--w-border);
  border-radius: 18px;
  box-shadow: 0 8px 30px #0002;
  font-size: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.debug-header { display: flex; align-items: center; justify-content: space-between; }
#debug-title { margin: 0; }
#debug-panel p { margin: 4px 0; }
#debug-panel button {
  color: inherit; background: transparent; border: 1px solid var(--w-border);
  border-radius: 10px; padding: 8px 10px; font-size: 12px; touch-action: manipulation;
}
#debug-close { min-width: 48px; font-size: 24px !important; border: 0 !important; }
.debug-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; flex-shrink: 0; }
.debug-actions button { min-height: 48px; }
#debug-panel:has(#debug-reset-confirmation:not([hidden])) > :is(.debug-actions, #debug-events, #debug-empty) { display: none; }
#debug-events {
  margin: 0; padding: 0; list-style: none;
  overflow-y: auto; overscroll-behavior: contain;
  flex: 1; min-height: 80px;
}
#debug-events li { padding: 10px 0; border-top: 1px solid var(--w-border); }
.debug-event-heading { font-size: 11px; font-weight: 700; }
#debug-events details { margin-top: 5px; }
#debug-events summary { cursor: pointer; }
#debug-events pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
#debug-events li { overflow-wrap: anywhere; }

/* Opening a menu by pointer/touch may focus Close for accessibility, but must
   never paint a default focus highlight. main.js restores keyboard mode on Tab. */
body[data-focus-input="pointer"] button:focus { outline: none; }

/* Selected butterfly: a single clear exit replaces Home's controls. */
body.butterfly-selected .home-toolbar,
body.butterfly-selected #debug-toggle,
body.butterfly-selected #debug-panel,
body.butterfly-selected header {visibility:hidden;}
#butterfly-focus {
  position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none;
  margin:0; padding:0 max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  border:0; background:transparent; color:var(--w-text); overflow:auto;
}
#butterfly-focus::backdrop {background:transparent;}
#butterfly-focus:focus {outline:none;}
#butterfly-focus[open] {display:flex; flex-direction:column; align-items:center;}
#butterfly-close {
  position:absolute; top:8px; right:8px;
  width:48px; height:48px; padding:0; z-index:2; font-size:30px;
}
.w-button.menu-dismiss {padding:0;width:48px;height:48px;min-width:48px;min-height:48px;font-size:30px;line-height:1;}
#butterfly-portrait {width:min(680px,100%); height:clamp(190px,55dvh,580px); flex-shrink:0; margin-top:max(16px,env(safe-area-inset-top));}
.butterfly-lower {width:min(560px,100%); flex-shrink:0;}
.butterfly-heading.w-menu-heading {padding-bottom:0;}
.butterfly-sheet {position:relative; width:100%; padding:24px; text-align:center; background:var(--w-canvas); border:1px solid var(--w-border); border-radius:24px;}
#butterfly-name {max-width:100%;}
#butterfly-colors {display:flex; justify-content:center; gap:18px; margin:16px 0 22px; font-size:14px;}
#butterfly-colors span {display:flex; align-items:center; gap:6px;}
#butterfly-colors i {width:15px; height:15px; border:1px solid var(--w-border); border-radius:50%;}
.butterfly-actions {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
.butterfly-actions .w-button {
  min-width:0; min-height:80px; padding:12px 10px; border-radius:16px;
  flex-direction:column; gap:6px; -webkit-tap-highlight-color:transparent;
}
.butterfly-actions .w-button svg {
  width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.65;
  stroke-linecap:round; stroke-linejoin:round;
}
.w-material .butterfly-actions .w-button::after {
  display:block; content:""; position:absolute; inset:5px; border-radius:11px;
  border:1px dashed var(--w-button-thread); pointer-events:none;
}
.w-material .butterfly-actions .w-button:disabled {
  opacity:1; cursor:default; color:var(--w-muted); border-color:var(--w-divider);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.w-material .butterfly-actions .w-button:disabled::after {border-color:var(--w-thread); opacity:.6;}
.butterfly-actions .w-button:disabled svg {opacity:.72;}
.butterfly-coming {font-size:12px; color:var(--w-muted); margin:14px 0 0;}
@media(max-height:600px) {
  #butterfly-portrait {height:44dvh; min-height:150px; margin-top:16px;}
  .butterfly-sheet {padding:16px;}
}
@media (orientation:landscape) {
  #butterfly-focus[open] {
    display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);
    align-items:center; column-gap:clamp(16px,3vw,48px);
    padding-top:max(16px,env(safe-area-inset-top));
  }
  #butterfly-portrait {
    width:100%; height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height:230px; margin-top:0;
  }
  .butterfly-lower {width:100%; max-width:560px; justify-self:center;}
  #butterfly-focus:not(.breeding-active) .butterfly-lower {translate:var(--focus-panel-offset,0px) 0;}
}
@media (orientation:landscape) and (max-height:500px) {
  #butterfly-focus[open] {grid-template-columns:minmax(0,1fr) minmax(280px,.9fr); gap:16px;}
  .butterfly-sheet {padding:16px;}
  #butterfly-colors {margin:10px 0 14px;}
  .butterfly-coming {margin-top:10px;}
}
#butterfly-focus[data-focus-input="pointer"] #butterfly-close:focus {outline:none;}
.w-material .butterfly-sheet > .butterfly-heading {position:static;}

/* Decor controls remain in screen space; arrow silhouettes project from the tile plane. */
body.decor-editing > .home-toolbar,
body.decor-editing #debug-toggle,
body.decor-editing #debug-panel { visibility: hidden; }
#decor-editor { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#decor-heading { position: absolute; top: max(18px,env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); text-align: center; width: min(420px,calc(100% - 36px)); }
#decor-heading h1 { font-size: 22px; }
#decor-heading p { font-size: 14px; margin: 8px 0 0; }
.decor-node-counts { display: flex; align-items: center; justify-content: center; gap: 7px; }
.decor-node-counts svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.node-divider { opacity: .45; margin: 0 5px; }
#decor-placement { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.decor-outline { fill: #d6a07112; stroke: #ad7544; stroke-width: 2; stroke-dasharray: 5 5; }
body[data-theme="dark"] .decor-outline { stroke: #e8bc96; }
.decor-toolbar { pointer-events: auto; }
.placing-scenery .decor-toolbar > :not(#decor-cancel-placement) { display:none; }
#decor-cancel-placement { width:auto; min-width:88px; padding-inline:16px; }
.decor-placement-tile { pointer-events:none; }
.decor-placement-outline { fill:#e8bc9626; stroke:#ad7544; stroke-width:1.5; stroke-dasharray:5 5; }
.decor-placement-tile circle { fill:var(--w-canvas); stroke:var(--w-border); stroke-width:1.5; }
.decor-placement-plus { fill:none; stroke:var(--w-text); stroke-width:1.8; stroke-linecap:round; }
.decor-placement-tile:focus { outline:none; }
.decor-placement-tile:focus-visible .decor-placement-outline { stroke:var(--w-primary); stroke-width:3; fill:#e8bc9655; }
body[data-theme="dark"] .decor-placement-outline { stroke:#e8bc96; }
#decor-status { position: absolute; bottom: calc(78px + env(safe-area-inset-bottom)); left: 16px; right: 16px; margin: 0; text-align: center; font-size: 13px; }
#scenery-shop { width: min(600px,calc(100% - 32px)); max-height: calc(100dvh - 32px); color: var(--w-text); background: var(--w-canvas); border: 1px solid var(--w-border); border-radius: 24px; padding: 24px; }
#scenery-shop::backdrop { background: #17271f66; }

#scenery-shop > p { font-size: 14px; line-height: 1.5; text-align: center; }
#scenery-shop-close { position: absolute; top: 8px; right: 8px; width: 48px; font-size: 28px; z-index: 2; }
.scenery-catalog { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.scenery-card { display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; }
.scenery-card img { display:block; width:100%; max-width:144px; aspect-ratio:1; object-fit:cover; border-radius:12px; }
.scenery-card h3 { font-size:13px; line-height:1.3; min-height:2.6em; margin:8px 0 4px; overflow-wrap:anywhere; }
.scenery-card .decor-node-counts { gap:3px; font-size:12px; margin:4px 0 8px; }
.scenery-card .decor-node-counts svg { width:16px; height:16px; flex-shrink:0; }
.scenery-card .w-button { width:100%; min-width:0; min-height:48px; padding:8px 4px; font-size:13px; margin-top:auto; }
@media(max-width:440px) {
  #scenery-shop {padding:16px;}
  .scenery-catalog {gap:8px;}
}
@media (max-width: 700px) { body.decor-editing header { visibility: hidden; } }
@media (orientation: landscape) { #decor-status { right: 82px; bottom: max(20px,env(safe-area-inset-bottom)); } }

/* Habitat identity and resident navigation. */
header { align-items: flex-start; flex-wrap: nowrap; }
.identity { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-right: 0; }
#debug-panel { left: max(16px,env(safe-area-inset-left)); right: auto; top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
@media (orientation:portrait) and (max-width:440px) {
  body:has(#home-actions:not([hidden])) #debug-toggle { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body:has(#home-actions:not([hidden])) #debug-panel { bottom: calc(132px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 148px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
#habitat-heading { text-align: right; min-width: 0; }
#habitat-name { font-size: 30px; line-height: 1.25; overflow-wrap: anywhere; }
#habitat-rename { display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; max-width:100%; padding:0; border:0; border-radius:8px; background:transparent; color:inherit; font-family:var(--w-font-heading); text-align:right; pointer-events:auto; -webkit-tap-highlight-color:transparent; }
#habitat-rename svg { flex:0 0 14px; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.5; }
.rename-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
#habitat-rename-dialog { width:min(420px,calc(100% - 32px)); }
#habitat-capacity span { white-space: nowrap; }
.habitat-capacity { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 14px; margin: 5px 0 0; }
.habitat-capacity svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.capacity-divider { opacity: .5; margin: 0 3px; }
#habitat-storage-status { font-size: 12px; max-width: 220px; }
#habitat-storage-status:empty { display: none; }
body.decor-editing #habitat-heading { visibility: hidden; }
.habitat-dialog { width: min(500px,calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 24px; border: 1px solid var(--w-border); border-radius: 24px; background: var(--w-canvas); color: var(--w-text); }
.habitat-dialog::backdrop { background: #17271f66; }
.habitat-dialog .dialog-close { position: absolute; top: 8px; right: 8px; width: 48px; font-size: 28px; z-index: 2; }
body[data-focus-input="pointer"] .habitat-dialog .dialog-close:focus,
body[data-focus-input="pointer"] #scenery-shop-close:focus { outline: none; }

.habitat-dialog h3 { font-size: 15px; margin: 20px 0 8px; }
.habitat-dialog-subtitle { text-align: center; margin: -8px 0 18px; color: var(--w-muted); }
.resident-list,.habitat-list { display: flex; flex-direction: column; gap: 6px; }
.resident-row,.habitat-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; color: inherit; padding: 12px 10px; background: var(--w-surface); border: 1px solid var(--w-border); border-radius: 14px; }
.resident-row:hover,.habitat-row:hover { background: var(--w-inset); }
.habitat-row[aria-current="true"] { background: var(--w-primary); color: var(--w-on-primary); }
.resident-words { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.resident-words strong { font-size: 15px; font-weight: 600; }
.resident-words small { font-size: 12px; }
.resident-words .habitat-capacity { justify-content: flex-start; }
.resident-mark svg,.habitat-mark svg { display: block; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.resident-swatches { display: flex; gap: 3px; }
.resident-swatches i { width: 12px; height: 12px; border: 1px solid var(--w-border); border-radius: 50%; }
.empty-residents,.dialog-status { font-size: 13px; color: var(--w-muted); }
.dialog-status:empty { display: none; }
#habitat-add { width: 100%; margin-top: 16px; }
@media (max-width: 600px) { header .identity { gap: 0; } #habitat-name { font-size: 26px; } }
@media (orientation: portrait) and (max-width: 360px), (orientation: landscape) and (max-height: 440px) {
  body > .home-toolbar,body > .home-toolbar #home-actions,.decor-toolbar { gap: 4px; }
  body > .home-toolbar .w-button,.decor-toolbar .w-button:not(#decor-cancel-placement) { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 10px; }
}

@media (orientation: landscape) {
  body > .home-toolbar { max-height: calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  body > .home-toolbar #home-actions { min-height: 0; overflow-y: auto; scrollbar-width: none; }
  body > .home-toolbar .w-button { flex-shrink: 0; }
}

/* Keep the sewn frame stationary while the list scrolls inside it. */
.habitat-dialog { overflow: hidden; }
.habitat-dialog[open] { display: flex; flex-direction: column; }
.habitat-dialog > .w-menu-heading,.habitat-dialog > .dialog-status { flex-shrink: 0; }
.habitat-dialog-content { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 4px; }
#residents-dialog .habitat-dialog-content {
  scrollbar-gutter: stable;
  /* Overlay scrollbars ignore the gutter, so retain an inset for those too. */
  padding-inline-end: 16px;
}
.resident-mark { display: grid; place-items: center; width: 72px; height: 72px; flex: 0 0 72px; }
.resident-mark img { display: block; width: 72px; height: 72px; object-fit: contain; }
@media (max-width: 360px) {
  .resident-row { gap: 8px; padding: 8px; }
  .resident-mark,.resident-mark img { width: 56px; height: 56px; }
  .resident-mark { flex-basis: 56px; }
  .resident-swatches { flex-direction: column; }
}

/* Shared sewn menu headings; close controls remain independent of centering. */
.debug-header.w-menu-heading { display: block; padding-bottom:16px; }
.debug-header #debug-close { position: absolute; top: 0; right: 0; }
#scenery-shop > .w-menu-heading { padding-bottom: 8px; }

.habitat-navigation { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.habitat-navigation button { display: grid; place-items: center; -webkit-tap-highlight-color: transparent; appearance: none; position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; padding: 12px; border: 0; border-radius: 24px; background: transparent; color: var(--w-text); opacity: 1; box-shadow: none; pointer-events: auto; touch-action: manipulation; }
.habitat-navigation button:disabled { opacity: .2; pointer-events: none; }
.habitat-navigation svg { display: block; width: 24px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.habitat-navigation .garden-arrow-outline { stroke: #000; stroke-width: 3.2; }
#habitat-previous { left: calc(8px + env(safe-area-inset-left)); }
#habitat-next { right: calc(8px + env(safe-area-inset-right)); }
body:has(dialog[open]) .habitat-navigation,body.decor-editing .habitat-navigation { visibility: hidden; }
@media(hover:hover){.habitat-navigation button:hover:not(:disabled) svg{transform:scale(1.1);}}
.habitat-navigation button:focus-visible { outline: 2px solid var(--w-text); outline-offset: 3px; }
.habitat-navigation button:active:not(:disabled) svg { transform: scale(.95); }
.habitat-transfer-notice { position: fixed; left: 50%; bottom: max(86px,env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(440px,calc(100% - 110px)); padding: 10px 16px; border-radius: 14px; background: var(--w-canvas); box-shadow: 0 2px 8px #0002; color: var(--w-text); text-align: center; font-size: 13px; z-index: 6; pointer-events: none; }
.habitat-transfer-notice:empty { display: none; }
.transfer-subtitle { text-align: center; margin: 0 0 16px; color: var(--w-muted); }
.habitat-row:disabled { opacity: .6; }
#habitat-transfer .dialog-status { text-align: center; }
/* Butterfly Move replaces its action sheet; the specimen stays undimmed. */
.butterfly-sheet.transfer-replaced { visibility: hidden; }
#habitat-transfer.transfer-in-focus {
  position: fixed; inset: auto; margin: 0; max-width: none; max-height: none;
}
#habitat-transfer.transfer-in-focus::backdrop { background: transparent; }
#habitat-transfer.transfer-in-focus > .w-menu-heading { padding-bottom:16px; }
#habitat-transfer.transfer-in-focus .habitat-dialog-content {
  scrollbar-gutter: stable; padding-inline-end: 12px;
}
#habitat-transfer:focus {outline:none;}
#habitat-transfer.transfer-in-focus > .transfer-subtitle {flex-shrink:0;font-size:13px;line-height:18px;margin:0 0 10px;}
#habitat-transfer.transfer-in-focus .habitat-row {min-height:56px;padding:8px 10px;gap:8px;-webkit-tap-highlight-color:transparent;}
#habitat-transfer.transfer-in-focus .resident-words strong {font-size:14px;line-height:18px;overflow-wrap:anywhere;}
#habitat-transfer.transfer-in-focus .resident-words small {font-size:13px;line-height:18px;}
#habitat-transfer.transfer-in-focus .habitat-row:disabled {opacity:1;color:var(--w-muted);background:var(--w-inset);border-color:var(--w-divider);}
.transfer-chevron {display:flex;flex:0 0 20px;}
.transfer-chevron svg {width:20px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
@media(orientation:landscape) and (max-height:500px){
  #habitat-transfer.transfer-in-focus > .w-menu-heading {padding:0 40px 8px;}
  #habitat-transfer.transfer-in-focus .w-title-patch {font-size:20px;line-height:26px;padding:6px 10px;}
}

/* Breeding shares the focus sheet and the specimen viewport. */
.butterfly-display {display:contents;}
.breeding-panel {height:100%;display:flex;flex-direction:column;min-height:0;}
.breeding-panel[hidden],.butterfly-details[hidden],.breeding-offspring[hidden],.breeding-partners[hidden],.breeding-controls[hidden] {display:none;}
.breeding-close {position:absolute;top:8px;right:8px;width:48px;font-size:30px;z-index:2;}
#butterfly-focus[data-focus-input="pointer"] .breeding-close:focus {outline:none;}
.breeding-active .butterfly-sheet {height:clamp(290px,38dvh,350px);}
.breeding-panel > .w-menu-heading {flex-shrink:0;padding-bottom:12px;}
.breeding-partners {overflow:auto;min-height:0;padding:4px 12px 4px 4px;scrollbar-gutter:stable;}
.breeding-partners .resident-row {flex-shrink:0;}
.breeding-partners strong {font-size:14px;font-weight:600;}
.breeding-thumbnail {width:60px;height:60px;object-fit:contain;flex-shrink:0;}
.breeding-controls {overflow:auto;min-height:0;padding:0 4px 4px;}
.breeding-change {min-height:36px;font-size:13px;padding:4px 12px;}
.breeding-space {font-size:14px;margin:8px 0 12px;}
.breeding-space.no-chrysalis-spots {font-weight:700;}
.breeding-actions {display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.breeding-actions .w-button {padding:10px 4px;min-width:0;min-height:52px;font-size:13px;}
.w-material .breeding-actions .w-button:not(:disabled)::after {display:block;content:"";position:absolute;inset:4px;border:1px dashed var(--w-button-thread);border-radius:10px;pointer-events:none;}
.breeding-time,.breeding-message {font-size:12px;color:var(--w-muted);margin:10px 0 0;}
.breeding-active .butterfly-display {display:flex;flex-direction:column;justify-content:center;width:min(680px,100%);height:55dvh;flex-shrink:0;min-height:0;}
@media(orientation:portrait){
  /* The world stays edge-to-edge; the paired specimens start below the status bar. */
  #butterfly-focus.breeding-active:not(.partner-picking) {padding-top:max(16px,env(safe-area-inset-top));}
  .breeding-active .butterfly-display {height:calc(55dvh - max(16px,env(safe-area-inset-top)));}
}
.breeding-active #butterfly-portrait {width:100%;height:auto;margin-top:0;min-height:90px;max-height:260px;flex:0 1 30%;}
.breeding-offspring {display:flex;flex-direction:column;flex:0 1 auto;min-height:0;width:100%;text-align:center;padding:0 4px 14px;}
.breeding-offspring > :not(.offspring-grid) {flex-shrink:0;}
.breeding-parent-names {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;width:100%;text-align:center;font-size:11px;font-weight:700;line-height:1.3;margin:8px 0 10px;color:var(--w-muted);}
.offspring-caption {width:100%;padding:16px;border:1px solid var(--w-border);border-radius:24px;margin-top:12px;}
.offspring-caption .w-menu-heading {padding:0 0 8px;}
.offspring-caption .offspring-name {margin:0;}
.offspring-name {font-size:13px;margin:6px 0 10px;}
.offspring-grid {display:grid;grid-template-columns:repeat(var(--offspring-columns,4),minmax(0,1fr));align-content:start;gap:8px;min-height:0;width:100%;overflow:auto;margin-inline:auto;}
.offspring-option {display:flex;flex-direction:column;align-items:center;min-width:0;min-height:0;padding:12px;border:1px solid transparent;border-radius:24px;background:transparent;color:inherit;font-size:12px;-webkit-tap-highlight-color:transparent;}
.offspring-chance {margin:4px 0 0;font-size:13px;color:var(--w-muted);}
#butterfly-focus[data-focus-input="pointer"] .offspring-option:focus {outline:none;}
.offspring-preview {display:block;flex-shrink:0;width:min(112px,100%);height:auto;aspect-ratio:1;}
@media(orientation:landscape){
  .breeding-active .butterfly-display {width:100%;height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));}
  .breeding-active .butterfly-sheet {height:min(350px,calc(100dvh - 40px));}
  .breeding-offspring {padding-bottom:0;}
  .breeding-parent-names {margin-bottom:5px;}
}
@media(orientation:landscape) and (max-height:500px){
  .breeding-active #butterfly-portrait {flex-basis:20%;min-height:65px;margin-top:0;}
  .offspring-preview {width:min(72px,100%);}
  .offspring-name {margin:4px 0 6px;}
  .offspring-grid {gap:4px;}
}
.w-material .butterfly-details,.w-material .butterfly-details > .butterfly-heading,.w-material .breeding-panel {position:static;}
/* Size the paired view around its controls and give the parents the spare height. */
#butterfly-focus.breeding-active:not(.partner-picking) .butterfly-sheet {height:auto;padding:16px;}
.breeding-active:not(.partner-picking) .breeding-panel {height:auto;}
.breeding-active:not(.partner-picking) .breeding-panel > .w-menu-heading {padding-bottom:6px;}
.breeding-active:not(.partner-picking) .breeding-space {margin:4px 0 8px;}
.breeding-active:not(.partner-picking) .breeding-time {margin-top:6px;}
.breeding-message:empty {display:none;}
@media (display-mode: standalone), (display-mode: fullscreen) {
  /* Match the fixed dialog's containing block, not WebKit's larger full-screen vh. */
  #butterfly-focus.breeding-active:not(.partner-picking) {height:100%;}
}
@media(orientation:portrait){
  #butterfly-focus.breeding-active:not(.partner-picking) {gap:8px;}
  .breeding-active:not(.partner-picking) .butterfly-display {height:auto;flex:1 1 0;}
  .breeding-active:not(.partner-picking) #butterfly-portrait {flex:1 0 100px;min-height:100px;max-height:min(320px,85vw);width:75%;align-self:center;}
  .breeding-active:not(.partner-picking) .offspring-preview {width:min(64px,100%);}
  .breeding-active:not(.partner-picking) .breeding-offspring {padding-bottom:0;}
}
/* Landscape: center the group as a whole and align both columns at the bottom.
   Size containment keeps the offspring from stretching the parent/control stack. */
.breeding-parent-names[hidden] {display:none;}
@media(orientation:landscape){
  #butterfly-focus.breeding-active:not(.partner-picking)[open] {
    grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);
    grid-template-rows:minmax(90px,max-content) auto auto;align-content:center;gap:8px 24px;
  }
  .breeding-active:not(.partner-picking) .butterfly-display {display:contents;}
  .breeding-active:not(.partner-picking) #butterfly-portrait {grid-column:2;grid-row:1;width:75%;height:auto;aspect-ratio:1;min-height:90px;max-height:100%;margin:0;justify-self:center;align-self:end;}
  .breeding-active:not(.partner-picking) .breeding-parent-names {grid-column:2;grid-row:2;margin:0;font-size:12px;}
  .breeding-active:not(.partner-picking) .butterfly-lower {grid-column:2;grid-row:3;max-width:none;align-self:end;}
  .breeding-active:not(.partner-picking) .breeding-offspring {grid-column:1;grid-row:1 / 4;align-self:stretch;height:100%;padding:0;contain:size;justify-content:flex-end;}
  .breeding-active:not(.partner-picking) .offspring-grid {flex:0 1 auto;grid-template-rows:repeat(var(--offspring-rows,2),minmax(0,auto));align-content:start;}
  .breeding-active:not(.partner-picking) .offspring-option {justify-content:center;align-self:center;justify-self:center;width:100%;max-width:280px;max-height:100%;gap:6px;}
  .breeding-active:not(.partner-picking) .offspring-preview {flex:0 1 auto;width:100%;min-height:0;height:auto;aspect-ratio:1;}
}
@media(orientation:landscape) and (max-height:500px){
  #butterfly-focus.breeding-active:not(.partner-picking)[open] {grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);grid-template-rows:minmax(80px,1fr) auto auto;gap:4px 16px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));}
  .breeding-active:not(.partner-picking) #butterfly-portrait {min-height:80px;}
  .breeding-active:not(.partner-picking) .breeding-parent-names {font-size:10px;}
  #butterfly-focus.breeding-active:not(.partner-picking) .butterfly-sheet {padding:10px;}
  .breeding-active:not(.partner-picking) .breeding-panel > .w-menu-heading {padding-bottom:0;}
  .breeding-active:not(.partner-picking) .w-title-patch {font-size:20px;padding:5px 12px;}
  .breeding-active:not(.partner-picking) .breeding-controls {display:grid;grid-template-columns:auto 1fr;gap:0 8px;align-items:center;padding:0;}
  .breeding-active:not(.partner-picking) .breeding-space {font-size:12px;margin:0;}
  .breeding-active:not(.partner-picking) .breeding-actions,.breeding-active:not(.partner-picking) .breeding-time,.breeding-active:not(.partner-picking) .breeding-message {grid-column:1 / -1;}
  .breeding-active:not(.partner-picking) .breeding-actions .w-button {min-height:44px;}
  .breeding-active:not(.partner-picking) .breeding-time {font-size:11px;}
}
.chrysalis-row .resident-mark {color:#7a9d68;display:grid;place-items:center;}
.chrysalis-row .resident-mark svg {width:48px;height:60px;}

/* Shared resident browsing grid: full names remain visible below each specimen. */
.resident-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;align-content:start;}
.resident-card.resident-row {position:relative;flex-direction:column;justify-content:flex-start;gap:6px;min-width:0;min-height:144px;padding:10px 8px;text-align:center;}
.resident-card .resident-mark {width:76px;height:76px;flex:0 0 76px;}
.resident-card .resident-mark img,.resident-card .breeding-thumbnail {width:76px;height:76px;object-fit:contain;}
.resident-card .resident-words {flex:0 0 auto;width:100%;gap:3px;}
.resident-card strong,.resident-card .resident-words strong {font-size:13px;line-height:1.3;font-weight:600;overflow-wrap:anywhere;}
.resident-card .resident-words strong {min-height:2.6em;}
.resident-card .resident-words small {font-size:11px;}
.resident-card .resident-swatches {position:absolute;top:9px;right:9px;flex-direction:column;gap:4px;}
.resident-card .resident-swatches i {width:9px;height:9px;}
#residents-dialog {width:min(920px,calc(100% - 32px));height:calc(100dvh - 32px);}

#residents-dialog .habitat-dialog-content {flex:1;}
#residents-dialog .habitat-dialog-subtitle {margin-bottom:12px;}
#residents-dialog h3 {margin-top:12px;}

#butterfly-focus.partner-picking[open] {
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
#butterfly-focus.partner-picking .butterfly-display {display:none;}
#butterfly-focus.partner-picking .butterfly-lower {width:min(920px,100%);max-width:920px;height:100%;min-height:0;}
#butterfly-focus.partner-picking .butterfly-sheet {height:100%;padding:18px;overflow:hidden;}
.partner-picking .breeding-panel > .w-menu-heading {padding-bottom:10px;}
.partner-picking .breeding-partners {flex:1;}
.breeding-pinned {display:flex;align-items:center;justify-content:center;gap:12px;flex-shrink:0;padding:0 8px 14px;text-align:left;}
.breeding-pinned[hidden] {display:none;}
.breeding-pinned img {width:64px;height:64px;object-fit:contain;flex-shrink:0;}
.breeding-pinned img:not([src]),.breeding-thumbnail:not([src]) {visibility:hidden;}
.breeding-pinned > div {display:flex;flex-direction:column;gap:3px;min-width:0;}
.breeding-pinned span {font-size:11px;color:var(--w-muted);}
.breeding-pinned strong {font-size:14px;font-weight:600;overflow-wrap:anywhere;}
@media(orientation:landscape) and (max-height:500px){
  .partner-picking .breeding-panel > .w-menu-heading {padding-bottom:6px;}
  .breeding-pinned {padding-bottom:8px;gap:10px;}
  .breeding-pinned img {width:44px;height:44px;}
  .partner-picking .resident-card.resident-row {min-height:124px;}
  .partner-picking .resident-card .breeding-thumbnail {width:60px;height:60px;}
  #residents-dialog {padding:16px;}
  #residents-dialog > .w-menu-heading {padding-bottom:10px;}
}
@media(max-width:440px){
  .resident-list {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
}
@media(max-width:360px){
  #residents-dialog {padding:16px;}
  .resident-card strong,.resident-card .resident-words strong {font-size:12px;}
  .resident-card .resident-mark {width:64px;height:64px;flex-basis:64px;}
  .resident-card .resident-mark img,.resident-card .breeding-thumbnail {width:64px;height:64px;}
}

/* List menus use the safe viewport height; only their content scrolls. */
.menu-list-panel {
  --menu-list-top:max(16px,env(safe-area-inset-top));
  --menu-list-bottom:max(16px,env(safe-area-inset-bottom));
}
#residents-dialog.menu-list-panel,#habitats-dialog.menu-list-panel,
#habitat-transfer.menu-list-panel,#scenery-shop.menu-list-panel {
  height:calc(100dvh - var(--menu-list-top) - var(--menu-list-bottom));
  max-height:calc(100dvh - var(--menu-list-top) - var(--menu-list-bottom));
  margin-block:var(--menu-list-top) var(--menu-list-bottom);
}
#habitat-transfer.transfer-in-focus {margin:0;}
.menu-list-panel > .habitat-dialog-content {flex:1;scrollbar-gutter:stable;padding-inline-end:12px;}
#residents-dialog.menu-list-panel > .habitat-dialog-content {padding-inline-end:16px;}
#scenery-shop[open] {display:flex;flex-direction:column;overflow:hidden;}
#scenery-shop > :not(.scenery-catalog) {flex-shrink:0;}
.scenery-catalog {flex:1;min-height:0;overflow-y:auto;align-content:start;overscroll-behavior:contain;scrollbar-gutter:stable;padding:2px 8px 4px 2px;}
#shop-status:empty {display:none;}
#debug-panel {height:calc(100dvh - 126px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 126px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:hidden;}
#debug-panel > :not(#debug-events) {flex-shrink:0;}

/* Shared soft copper currency mark, with separate approved day/evening assets. */
.coin-amount {display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700;}
.coin-icon {display:inline-flex;width:24px;height:24px;flex:none;}
.coin-icon img {display:block;width:100%;height:100%;min-height:0;aspect-ratio:1;object-fit:contain;border:0;border-radius:0;background:none;}
.coin-icon .coin-evening {display:none;}
body[data-theme="dark"] .coin-icon .coin-day {display:none;}
body[data-theme="dark"] .coin-icon .coin-evening {display:block;}
#coin-balance {font-size:17px;line-height:28px;margin-top:4px;text-align:left;}
#coin-balance .coin-icon {width:26px;height:26px;}
#shop-balance {display:flex;justify-content:center;align-items:center;gap:10px;margin:4px 0 16px;color:var(--w-muted);font-size:14px;}
#shop-balance .coin-amount {color:var(--w-text);font-size:18px;}
.decor-resale {display:inline-flex;align-items:center;gap:6px;margin-left:12px;font-size:13px;}
.butterfly-sale p {display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:0 0 16px;}
.sale-actions {display:flex;justify-content:center;gap:12px;}
.sale-actions .w-button {flex:1;min-width:0;min-height:48px;gap:8px;-webkit-tap-highlight-color:transparent;}
#butterfly-sale-question {font-size:16px;line-height:24px;}
.butterfly-actions[hidden],.butterfly-sale[hidden] {display:none;}
#butterfly-sale-status:empty {display:none;}

/* Review refinements: reuse the shared linen, typography and safe-area tokens. */
@media (max-width:360px) {
  #butterfly-focus .butterfly-sheet {padding:16px;}
}
.scenery-capacity {display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.scenery-card .decor-node-counts {display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;font-size:14px;line-height:20px;margin:0 0 10px;}
.scenery-card img {object-fit:contain;}
.scenery-card h3 {font-size:14px;}
.scenery-card.chrysalis-suitable {border:1px solid var(--w-border);border-radius:16px;padding:8px;background:var(--w-active-fill);}
@media (max-width:440px) {
  .scenery-catalog {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
}
#decor-heading #decor-occupied {font-size:16px;line-height:24px;padding:10px 14px;border-radius:14px;background:var(--w-canvas);border:1px solid var(--w-border);}
#decor-status:not(:empty) {width:fit-content;max-width:calc(100% - 32px);margin-inline:auto;padding:10px 14px;border-radius:14px;background:var(--w-canvas);border:1px solid var(--w-border);font-size:16px;line-height:24px;}
#decor-sale {width:min(360px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--w-border);border-radius:24px;background:var(--w-canvas);color:var(--w-text);text-align:center;}
#decor-sale .w-menu-heading {padding-inline:0;}
#decor-sale p {font-size:16px;line-height:24px;}
#decor-sale::backdrop {background:#17271f66;}
#decor-sale-status:empty {display:none;}
.transfer-result {padding:12px 16px;border:1px solid var(--w-border);border-radius:16px;background:var(--w-canvas);color:var(--w-text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.transfer-result p {flex:1 1 180px;margin:0;font-size:16px;line-height:24px;}
.transfer-result button {min-height:48px;}
.transfer-result-floating {position:fixed;z-index:8;bottom:calc(88px + env(safe-area-inset-bottom));left:16px;right:16px;max-width:480px;margin:auto;}
.resident-notice-slot {flex-shrink:0;margin-bottom:12px;}
.resident-notice-slot:empty {display:none;}
#residents-dialog > .habitat-dialog-subtitle {flex-shrink:0;margin:0 0 12px;}
.breeding-guidance {font-size:16px;line-height:24px;margin:8px 0;}
.breeding-find-spots {min-height:48px;max-width:100%;}
.breeding-actions[hidden],.breeding-find-spots[hidden],.recovery-actions[hidden] {display:none;}
@media (orientation:landscape) and (max-height:540px) {
  .breeding-guidance,.breeding-find-spots {grid-column:1/-1;}
}
#error.save-recovery {width:min(360px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--w-border);background:var(--w-canvas);color:var(--w-text);}
.save-recovery .w-menu-heading {padding-inline:0;}
.save-recovery p {font-size:16px;line-height:24px;}
.recovery-actions {display:flex;flex-direction:column;gap:12px;}
.recovery-actions button {min-height:48px;}
#recovery-status:empty {display:none;}

.transfer-result [hidden] {display:none;}
#decor-nodes.decor-node-counts {flex-wrap:wrap;row-gap:6px;}
#decor-nodes .decor-resale {white-space:nowrap;}
body.save-recovering header,body.save-recovering .home-toolbar,body.save-recovering #debug-toggle {visibility:hidden;}

/* Compact shop facts sit directly below each item name. */
.scenery-card h3 {min-height:0;margin:6px 0 4px;}
.scenery-card .decor-node-counts svg {width:18px;height:18px;}
.scenery-card .scenery-capacity {gap:3px;}

.offspring-rare-note {font-size:13px;line-height:18px;color:var(--w-muted);margin:6px 0 0;}

#butterfly-breed-status:empty {display:none;}


/* Short landscape breeding: steady parents and a bounded, scrollable action panel. */
@media(orientation:landscape) and (max-height:500px) {
  #butterfly-focus.breeding-active:not(.partner-picking)[open] {
    --breed-parent-size:clamp(80px,calc(100dvh - 231px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),150px);
    grid-template-rows:var(--breed-parent-size) auto minmax(0,max-content);
    padding:max(16px,env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    gap:4px 16px;
  }
  .breeding-active:not(.partner-picking) #butterfly-portrait {
    width:min(75%,var(--breed-parent-size));height:var(--breed-parent-size);min-height:0;align-self:center;
  }
  .breeding-active:not(.partner-picking) .breeding-parent-names {font-size:12px;line-height:16px;gap:8px;}
  .breeding-active:not(.partner-picking) .butterfly-lower {min-height:0;height:100%;max-height:100%;}
  #butterfly-focus.breeding-active:not(.partner-picking) .butterfly-sheet {height:100%;max-height:100%;padding:12px;overflow:hidden;}
  .breeding-active:not(.partner-picking) .breeding-panel {height:100%;min-height:0;}
  .breeding-active:not(.partner-picking) .breeding-panel > .w-menu-heading {padding:0 40px 4px;}
  .breeding-active:not(.partner-picking) .breeding-controls {overflow-y:auto;overscroll-behavior:contain;align-content:start;padding:0 2px 2px;}
  .breeding-active:not(.partner-picking) .breeding-change {min-height:48px;padding:4px 6px;}
  .breeding-active:not(.partner-picking) .breeding-space {font-size:13px;line-height:18px;}
  .breeding-active:not(.partner-picking) .breeding-actions .w-button {min-height:48px;-webkit-tap-highlight-color:transparent;}
  .breeding-active:not(.partner-picking) .breeding-guidance,
  .breeding-active:not(.partner-picking) .breeding-message,
  .breeding-active:not(.partner-picking) .breeding-time {font-size:13px;line-height:18px;}
  .breeding-active:not(.partner-picking) .offspring-option {min-width:48px;min-height:48px;padding:6px;}
  .breeding-active:not(.partner-picking) .offspring-caption {padding:10px 12px;margin-top:8px;}
  .breeding-active:not(.partner-picking) .offspring-caption .w-menu-heading {padding-bottom:4px;}
  .breeding-active:not(.partner-picking) .offspring-caption .w-title-patch {padding:4px 8px;line-height:24px;}
  .breeding-active:not(.partner-picking) .offspring-name,
  .breeding-active:not(.partner-picking) .offspring-chance {font-size:13px;line-height:18px;}
  .breeding-active:not(.partner-picking) .offspring-rare-note {font-size:12px;line-height:16px;margin-top:4px;}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:740px) {
  .breeding-active:not(.partner-picking) .offspring-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:max-content;overscroll-behavior:contain;
  }
}

/* Single-specimen details retain the portrait while giving short phones a calm inspector. */
@media(orientation:portrait) {
  #butterfly-focus:not(.breeding-active) #butterfly-portrait {flex-shrink:1;min-height:190px;}
}
@media(orientation:landscape) and (max-height:500px) {
  #butterfly-focus:not(.breeding-active) .butterfly-sheet {padding:16px;}
  #butterfly-focus:not(.breeding-active) #butterfly-name {font-size:22px;line-height:28px;padding:8px 12px;}
  #butterfly-focus:not(.breeding-active) #butterfly-colors {flex-wrap:wrap;gap:6px 16px;margin:10px 0 12px;}
  #butterfly-focus:not(.breeding-active) .butterfly-actions {gap:8px;}
  #butterfly-focus:not(.breeding-active) .butterfly-actions .w-button {min-height:68px;padding:8px 6px;gap:4px;}
  #butterfly-focus:not(.breeding-active) .butterfly-actions .w-button svg {width:22px;height:22px;}
  #butterfly-focus:not(.breeding-active) .butterfly-coming {font-size:13px;line-height:18px;margin-top:12px;}
}

/* Residents: protect the iPhone cutouts and spend short-screen space on the list. */
#residents-dialog.menu-list-panel {
  --resident-left:calc(16px + env(safe-area-inset-left));
  --resident-right:calc(16px + env(safe-area-inset-right));
  position:fixed;
  inset:var(--menu-list-top) var(--resident-right) var(--menu-list-bottom) var(--resident-left);
  width:min(920px,calc(100% - var(--resident-left) - var(--resident-right)));
  margin:auto;
}
#residents-dialog .empty-residents,
#residents-dialog .resident-list > p {grid-column:1 / -1;}
#residents-dialog .chrysalis-list {grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
#residents-dialog .chrysalis-row {
  flex-direction:row;min-height:72px;gap:10px;padding:10px;text-align:left;
}
#residents-dialog .chrysalis-row .resident-mark {width:32px;height:44px;flex:0 0 32px;}
#residents-dialog .chrysalis-row .resident-mark svg {width:28px;height:40px;}
#residents-dialog .chrysalis-row .resident-words {flex:1;width:auto;}
#residents-dialog .chrysalis-row .resident-words strong {min-height:0;}
#residents-dialog .chrysalis-row .resident-words small {font-size:12px;}

/* Partner selection matches Residents while keeping the first parent pinned. */
#butterfly-focus.partner-picking[open] {
  padding:max(16px,env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.partner-picking .breeding-partners {overscroll-behavior:contain;align-content:start;}
.breeding-empty {grid-column:1 / -1;margin:8px 4px;font-size:15px;line-height:22px;color:var(--w-muted);}
@media(orientation:landscape) and (max-height:500px) {
  #butterfly-focus.partner-picking .butterfly-sheet {padding:12px;}
  .partner-picking .breeding-panel > .w-menu-heading {padding:0 48px 4px;}
  .partner-picking .w-title-patch {font-size:22px;line-height:28px;padding:4px 16px;}
  .partner-picking .breeding-pinned {padding:0 8px 8px;gap:10px;}
  .partner-picking .breeding-pinned img {width:52px;height:52px;}
  .partner-picking .breeding-pinned span {font-size:13px;line-height:18px;}
  .partner-picking .breeding-partners {grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;}
  .partner-picking .resident-card.resident-row {flex-direction:row;min-height:94px;padding:8px;gap:8px;text-align:left;}
  .partner-picking .resident-card .breeding-thumbnail {width:68px;height:68px;}
  .partner-picking .resident-card strong {flex:1;min-width:0;}
}
@media(orientation:landscape) and (max-height:500px) {
  #residents-dialog {padding:12px;}
  #residents-dialog > .w-menu-heading {padding:0 48px 4px;}
  #residents-dialog .w-title-patch {font-size:22px;line-height:28px;padding:4px 16px;}
  #residents-dialog > .habitat-dialog-subtitle {font-size:13px;line-height:18px;margin:0 0 4px;}
  #residents-dialog h3 {font-size:14px;line-height:20px;margin:10px 0 6px;}
  #residents-dialog h3:first-child {margin-top:0;}
  :is(#residents-dialog,#hatch-dialog) .resident-list {grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;}
  :is(#residents-dialog,#hatch-dialog) .butterfly-card {
    flex-direction:row;min-height:94px;gap:8px;padding:8px;text-align:left;
  }
  :is(#residents-dialog,#hatch-dialog) .butterfly-card .resident-mark,
  :is(#residents-dialog,#hatch-dialog) .butterfly-card .resident-mark img {width:68px;height:68px;}
  :is(#residents-dialog,#hatch-dialog) .butterfly-card .resident-mark {flex:0 0 68px;}
  :is(#residents-dialog,#hatch-dialog) .butterfly-card .resident-words {flex:1;width:auto;gap:4px;}
  :is(#residents-dialog,#hatch-dialog) .butterfly-card .resident-words strong {min-height:0;}
  :is(#residents-dialog,#hatch-dialog) .butterfly-card .resident-words small {font-size:12px;}
  :is(#residents-dialog,#hatch-dialog) .butterfly-card .resident-swatches {top:auto;bottom:7px;left:12px;right:auto;flex-direction:row;}
}

/* Habitats keeps its primary action visible while the collection scrolls. */
#habitats-dialog.menu-list-panel {
  --habitats-left:calc(16px + env(safe-area-inset-left));
  --habitats-right:calc(16px + env(safe-area-inset-right));
  position:fixed;inset:var(--menu-list-top) var(--habitats-right) var(--menu-list-bottom) var(--habitats-left);
  width:min(720px,calc(100% - var(--habitats-left) - var(--habitats-right)));margin:auto;
}
#habitats-dialog:focus {outline:none;}
#habitats-dialog .habitat-row {min-height:64px;padding:8px 10px;gap:10px;-webkit-tap-highlight-color:transparent;}
#habitats-dialog .resident-words strong {font-weight:700;font-size:14px;line-height:18px;overflow-wrap:anywhere;}
#habitats-dialog .habitat-capacity {font-size:13px;line-height:18px;gap:4px;margin:0;white-space:nowrap;}
#habitats-dialog .habitat-capacity svg {width:18px;height:18px;flex-shrink:0;}
#habitats-dialog .habitat-mark {flex-shrink:0;}
.habitat-list-footer {flex-shrink:0;padding:8px 4px 0;}
#habitats-dialog #habitat-add {margin:0;min-height:48px;}
#habitats-dialog > .dialog-status {margin:8px 4px 0;}

/* Rename follows the visible viewport so the phone keyboard cannot cover Save. */
#habitat-rename-dialog {
  --rename-safe-top:max(16px,env(safe-area-inset-top));
  --rename-safe-bottom:max(16px,env(safe-area-inset-bottom));
  --rename-visible-top:0px;--rename-visible-height:100dvh;
  position:fixed;
  top:calc(var(--rename-visible-top) + var(--rename-safe-top) + (var(--rename-visible-height) - var(--rename-safe-top) - var(--rename-safe-bottom)) / 2);
  bottom:auto;left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));
  width:min(420px,calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height:calc(var(--rename-visible-height) - var(--rename-safe-top) - var(--rename-safe-bottom));
  margin:0 auto;transform:translateY(-50%);
}
#habitat-rename-dialog.keyboard-open {--rename-safe-top:8px;--rename-safe-bottom:8px;}
#habitat-rename-dialog .dialog-status {margin:8px 4px 0;}
#habitat-rename-dialog .w-input {font-size:16px;}
@media(orientation:landscape) and (max-height:500px) {
  #habitats-dialog,#habitat-rename-dialog {padding:12px;}
  #habitats-dialog > .w-menu-heading,#habitat-rename-dialog > .w-menu-heading {padding:0 48px 8px;}
  #habitats-dialog .w-title-patch,#habitat-rename-dialog .w-title-patch {font-size:22px;line-height:28px;padding:4px 16px;}
  #habitats-dialog .habitat-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));align-content:start;gap:6px;}
  #habitat-rename-dialog {width:min(640px,calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));}
  #habitat-rename-form {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;}
  #habitat-rename-form .w-field-label {grid-column:1 / -1;margin:0;font-size:13px;line-height:18px;}
  #habitat-rename-dialog .rename-actions {margin:0;gap:8px;}
  #habitat-rename-dialog .rename-actions .w-button {padding:10px 16px;min-height:48px;}
}
@media(orientation:landscape) and (max-height:500px) {
  #habitat-rename-dialog.keyboard-open {padding:8px;}
  #habitat-rename-dialog.keyboard-open > .w-menu-heading {padding-bottom:4px;}
  #habitat-rename-dialog.keyboard-open .w-title-patch {font-size:20px;line-height:26px;}
  #habitat-rename-dialog.keyboard-open .w-input {padding-block:10px;}
}
#habitats-dialog .habitat-row[aria-current="true"] {
  background:var(--w-active-fill);color:var(--w-on-selected);
  box-shadow:inset 0 1px 2px var(--w-lift);
}

/* Shop: keep each price with its specimen in short landscape. */
#scenery-shop.menu-list-panel {
  --shop-left:calc(16px + env(safe-area-inset-left));
  --shop-right:calc(16px + env(safe-area-inset-right));
  position:fixed;inset:var(--menu-list-top) var(--shop-right) var(--menu-list-bottom) var(--shop-left);
  width:min(600px,calc(100% - var(--shop-left) - var(--shop-right)));margin:auto;
}
#scenery-shop:focus {outline:none;}
#scenery-shop .scenery-card .w-button {flex-direction:column;gap:0;padding:4px 8px;min-height:48px;}
#scenery-shop .shop-shortfall {font-size:12px;line-height:16px;}
#scenery-shop > #shop-status {margin:8px 4px 0;}
@media(orientation:landscape) and (max-height:500px) {
  #scenery-shop.menu-list-panel {width:min(920px,calc(100% - var(--shop-left) - var(--shop-right)));padding:12px;}
  #scenery-shop > .w-menu-heading {padding:0 48px 4px;}
  #scenery-shop .w-title-patch {font-size:22px;line-height:28px;padding:4px 16px;}
  #shop-balance {font-size:13px;line-height:20px;margin:2px 0 8px;gap:8px;}
  #shop-balance .coin-amount {font-size:15px;}
  #scenery-shop .scenery-catalog {grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;padding:4px 12px 4px 4px;}
  #scenery-shop .scenery-card {display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto 48px;align-content:center;align-items:center;gap:4px 10px;padding:6px;min-height:116px;border:1px solid transparent;border-radius:14px;text-align:left;}
  #scenery-shop .scenery-card > img {grid-column:1;grid-row:1 / 4;width:88px;height:96px;max-width:none;aspect-ratio:auto;border-radius:0;}
  #scenery-shop .scenery-card h3 {font-size:14px;line-height:18px;margin:0;}
  #scenery-shop .scenery-card .decor-node-counts {justify-content:flex-start;gap:10px;font-size:13px;line-height:18px;margin:0;}
  #scenery-shop .scenery-card .w-button {grid-column:2;font-size:14px;margin:0;}
  #scenery-shop .scenery-card.chrysalis-suitable {border-color:var(--w-border);}
  #scenery-shop > #shop-status {font-size:13px;line-height:18px;}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:740px) {
  #scenery-shop .scenery-card {grid-template-columns:80px minmax(0,1fr);min-height:108px;padding:4px;}
  #scenery-shop .scenery-card > img {width:80px;height:88px;}
}

/* Plus markers are real touch targets, independent of projected floor edges. */
.decor-placement-tile circle {pointer-events:all;cursor:pointer;touch-action:manipulation;}
.decor-placement-tile .decor-placement-plus {pointer-events:none;}
.decor-placement-tile:focus-visible circle {stroke:var(--w-text);stroke-width:3;}
#decor-placement {-webkit-tap-highlight-color:transparent;}

/* Scenery confirmation and destinations share the compact, safe menu layout. */
#decor-sale {
  --sale-top:max(16px,env(safe-area-inset-top));--sale-bottom:max(16px,env(safe-area-inset-bottom));
  position:fixed;inset:var(--sale-top) calc(16px + env(safe-area-inset-right)) var(--sale-bottom) calc(16px + env(safe-area-inset-left));
  width:min(420px,calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height:calc(100dvh - var(--sale-top) - var(--sale-bottom));margin:auto;
}
#decor-sale:focus {outline:none;}
#decor-sale-status {margin-bottom:0;}
#habitat-transfer.transfer-decor {
  --transfer-left:calc(16px + env(safe-area-inset-left));--transfer-right:calc(16px + env(safe-area-inset-right));
  position:fixed;inset:var(--menu-list-top) var(--transfer-right) var(--menu-list-bottom) var(--transfer-left);
  width:min(720px,calc(100% - var(--transfer-left) - var(--transfer-right)));margin:auto;
}
#habitat-transfer.transfer-decor > .transfer-subtitle {flex-shrink:0;font-size:13px;line-height:18px;margin:0 0 10px;overflow-wrap:anywhere;}
#habitat-transfer.transfer-decor .habitat-row {min-height:56px;padding:8px 10px;gap:8px;-webkit-tap-highlight-color:transparent;}
#habitat-transfer.transfer-decor .resident-words strong {font-size:14px;line-height:18px;overflow-wrap:anywhere;}
#habitat-transfer.transfer-decor .resident-words small {font-size:13px;line-height:18px;}
#habitat-transfer.transfer-decor .habitat-row:disabled {opacity:1;color:var(--w-muted);background:var(--w-inset);border-color:var(--w-divider);}
#habitat-transfer.transfer-decor .dialog-status {margin:8px 4px 0;}
body.decor-editing .transfer-result-decor {
  left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));
  bottom:calc(32px + env(safe-area-inset-bottom) + var(--decor-toolbar-height,48px));
  max-width:480px;padding:10px 12px;
}
body.decor-editing .transfer-result-decor p {font-size:13px;line-height:18px;margin:0;overflow-wrap:anywhere;}
@media(orientation:landscape) {
  body.decor-editing .transfer-result-decor {right:calc(32px + env(safe-area-inset-right) + var(--decor-toolbar-width,48px));bottom:calc(16px + env(safe-area-inset-bottom));}
}
@media(orientation:landscape) and (max-height:500px) {
  #decor-sale,#habitat-transfer.transfer-decor {padding:16px;}
  #decor-sale .w-menu-heading {padding-bottom:8px;}
  #decor-sale .w-title-patch,#habitat-transfer.transfer-decor .w-title-patch {font-size:22px;line-height:28px;padding:6px 12px;}
  #decor-sale p {font-size:14px;line-height:20px;margin:8px 0 16px;}
  #decor-sale #decor-sale-status {margin:12px 0 0;}
  #habitat-transfer.transfer-decor > .w-menu-heading {padding:0 48px 8px;}
  #habitat-transfer.transfer-decor .habitat-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;align-content:start;}
}
#habitat-transfer.transfer-decor .habitat-list > p {grid-column:1 / -1;}
.transfer-result-floating.w-sewn {position:fixed;}
body:has(#decor-sale[open]) #decor-status {visibility:hidden;}
/* Loading/error UI belongs to the fixed viewport, not the taller PWA garden. */
#loading {position:fixed;}
#error,#error.save-recovery {
 position:fixed;top:max(16px,env(safe-area-inset-top));bottom:max(16px,env(safe-area-inset-bottom));
 left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));
 height:fit-content;max-height:calc(100% - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));
 margin:auto;transform:none;overflow:auto;
}

/* Muted wayfinding colors stay within the sewn-linen light/evening palette. */
#home-menu{--menu-day-fill:#e5e3d8;--menu-day-ink:#525f4f;--menu-night-fill:#3b473e;--menu-night-ink:#c8ceba;}
#residents-open{--menu-day-fill:#e4e4dc;--menu-day-ink:#585f51;--menu-night-fill:#39473f;--menu-night-ink:#c6cbb5;}
#habitats-open{--menu-day-fill:#e0e5d9;--menu-day-ink:#4b624c;--menu-night-fill:#34473a;--menu-night-ink:#b8c9a7;}
#mailbox-open{--menu-day-fill:#e9e1d3;--menu-day-ink:#6d5841;--menu-night-fill:#47473b;--menu-night-ink:#d9c5a6;}
#expeditions-open{--menu-day-fill:#e2edf0;--menu-day-ink:#436674;--menu-night-fill:#2b3f49;--menu-night-ink:#adcedb}
#journal-open{--menu-day-fill:#e5e2d2;--menu-day-ink:#5b5e3e;--menu-night-fill:#414738;--menu-night-ink:#cbc9a8;}
#decor-open{--menu-day-fill:#e6e0d4;--menu-day-ink:#635a43;--menu-night-fill:#41463b;--menu-night-ink:#d6c6a5;}
#theme{--menu-day-fill:#e0e3e6;--menu-day-ink:#505d69;--menu-night-fill:#37464a;--menu-night-ink:#bdcbd2;}
#decor-shop{--menu-day-fill:#dfe5dc;--menu-day-ink:#46624f;--menu-night-fill:#33493f;--menu-night-ink:#b4cbb8;}
#decor-sell{--menu-day-fill:#e8dfd8;--menu-day-ink:#6f5548;--menu-night-fill:#47423c;--menu-night-ink:#d7bda9;}
#decor-move{--menu-day-fill:#dee5e4;--menu-day-ink:#466168;--menu-night-fill:#34494a;--menu-night-ink:#b5cbd0;}
#decor-rotate{--menu-day-fill:#e3e1df;--menu-day-ink:#565d59;--menu-night-fill:#414644;--menu-night-ink:#c2cbbb;}
#decor-transfer{--menu-day-fill:#dce5e1;--menu-day-ink:#44625a;--menu-night-fill:#344842;--menu-night-ink:#b8ccc2}
#decor-done{--menu-day-fill:#e4e5d5;--menu-day-ink:#576042;--menu-night-fill:#414737;--menu-night-ink:#c9cfb1}
.home-toolbar .w-button:not(#decor-cancel-placement){
 --menu-fill:var(--menu-day-fill);--menu-ink:var(--menu-day-ink);
 background-color:var(--menu-fill);color:var(--menu-ink);
 border-color:color-mix(in srgb,var(--menu-ink) 45%,var(--menu-fill));
}
[data-theme=dark] .home-toolbar .w-button:not(#decor-cancel-placement){--menu-fill:var(--menu-night-fill);--menu-ink:var(--menu-night-ink)}
.home-toolbar .w-button:not(#decor-cancel-placement):hover:not(:disabled){background-color:color-mix(in srgb,var(--menu-fill) 90%,var(--menu-ink))}
@media(forced-colors:active){.home-toolbar .w-button:not(#decor-cancel-placement){background-color:ButtonFace;color:ButtonText;border-color:ButtonText}}

/* Shared flat emoji-style art retains the toolbar's individual muted inks. */
.w-button svg.menu-emoji,.butterfly-actions svg.menu-emoji{width:30px;height:30px;fill:none;stroke:none;stroke-width:0;flex-shrink:0}
.w-button svg.menu-emoji *{stroke:none}
/* Give the artwork its own centered grid cell, independent of button padding. */
.home-toolbar .w-button:not(#decor-cancel-placement){padding:0}
.home-toolbar svg.menu-emoji{grid-area:1/1;place-self:center;pointer-events:none}
.dialog-close svg.menu-emoji,.feature-close svg.menu-emoji,.breeding-close svg.menu-emoji,#butterfly-close svg.menu-emoji,#scenery-shop-close svg.menu-emoji,#debug-close svg.menu-emoji{display:block;width:28px;height:28px;margin:auto;pointer-events:none}

/* Approved Garden pigments: shared by toolbar and menu action artwork. */
:root,[data-theme="light"]{--icon-wing:#ad8868;--icon-leaf:#7f9071;--icon-terracotta:#a37e66;--icon-envelope:#b8a382;--icon-paper:#e7dfcc;--icon-book:#959579;--icon-glass:#bea577;--icon-flame:#e5d8b1;--icon-moon:#959da6;--icon-star:#b9a984;--icon-sun:#baa078;--icon-bag:#829785;--icon-stamp:#ded6ba;--icon-tag:#ad8777;--icon-cutout:#e9e2cf;--icon-heart:#ab8587;}
[data-theme="dark"]{--icon-wing:#c4a181;--icon-leaf:#a7b497;--icon-terracotta:#bf9c81;--icon-envelope:#c5b393;--icon-paper:#ebe3cf;--icon-book:#b1b297;--icon-glass:#c7b18a;--icon-flame:#eee0b8;--icon-moon:#b0b7c0;--icon-star:#cabc96;--icon-sun:#c9b18a;--icon-bag:#a1b6a3;--icon-stamp:#e4dbc0;--icon-tag:#c3a28f;--icon-cutout:#e9e2cf;--icon-heart:#c1a0a1;}

/* Progress stays alongside the purse and palette, without another header row. */
header .identity{min-width:0;max-width:45%}
#coin-balance{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;max-width:100%}
.player-level{font-size:13px;font-weight:800;white-space:nowrap}
#butterfly-colors{flex-wrap:wrap;gap:8px 16px}
.butterfly-level{font-weight:800}

/* Align the wallet with the visible wing inside the logo’s transparent bounds. */
#coin-balance{box-sizing:border-box;padding-left:calc(var(--logo-width) * .034602)}

.get-app-badge{display:block;pointer-events:auto;min-height:32px;margin:4px 0 0 calc(var(--logo-width)*.034602);padding:4px 10px;border:1px solid var(--w-border);border-radius:10px;background:#ffe3de;color:#35483d;font:700 12px/20px var(--w-font-ui);cursor:pointer}
.get-app-badge:focus-visible{outline:2px solid var(--w-focus);outline-offset:2px}

[data-theme="dark"] .get-app-badge{background:#e8bc96}

/* A quiet invitation to add scenery; the touch target stays still. */
#decor-shop.shop-hint{box-shadow:0 0 0 2px color-mix(in srgb,var(--menu-ink) 45%,transparent)}
#decor-shop.shop-hint svg{transform-origin:center;animation:shop-invitation 4s ease-in-out infinite}
@keyframes shop-invitation{0%,25%,100%{transform:scale(1) rotate(0deg)}8%{transform:scale(1.06) rotate(-5deg)}13%{transform:scale(1.09) rotate(5deg)}18%{transform:scale(1.06) rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){#decor-shop.shop-hint svg{animation:none}}