:root {
  --wood-dark: #5a3a24;
  --wood: #8b5a36;
  --wood-mid: #c48a55;
  --cream: #f6ead4;
  --cream-2: #efe0c4;
  --ink: #4a3426;
  --ink-soft: #6b5342;
  --panel: rgba(255, 246, 228, 0.92);
  --panel-border: #e4c9a0;
  --glow: #ffd27a;
  --pink: #f4a7bc;
  --gold: #efc15a;
  --blue: #7ec8e3;
  --green: #8fce7a;
  --nav: #6b4a30;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body, #app {
  margin: 0;
  height: 100%;
  font-family: Nunito, Quicksand, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #1c140f;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
button, [role="button"] { -webkit-user-select: none; user-select: none; }

button, [role="button"] {
  font-family: inherit;
  cursor: pointer;
}

button:focus-visible,
[role="button"]:focus-visible,
.hotspot:focus-visible {
  outline: 3px solid #fff4c2;
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.stage {
  min-height: 100%;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at top, #3a2418, #1a100c);
}

.stage {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.game-frame {
  position: relative;
  width: min(100vw - env(safe-area-inset-left) - env(safe-area-inset-right), 1366px);
  height: min(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom), 1024px);
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
}
@media (min-aspect-ratio: 16/10) {
  .game-frame {
    height: min(100svh, 900px);
    width: min(100vw, calc(min(100svh, 900px) * 1.333));
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
  }
}

.cottage {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(80,50,30,.15), transparent 30%),
    #7a4e32;
}

.cottage-wall {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(90,50,28,.18) 0 18px, transparent 18px 86px),
    linear-gradient(#9a623c, #7a4a2c);
}

.beams {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--wood-dark), var(--wood-dark)) top / 100% 28px no-repeat,
    linear-gradient(var(--wood-dark), var(--wood-dark)) 0 0 / 26px 100% no-repeat,
    linear-gradient(var(--wood-dark), var(--wood-dark)) right / 26px 100% no-repeat;
  box-shadow: inset 0 0 80px rgba(40,20,10,.25);
}

.window-scene {
  position: absolute;
  left: 38%;
  top: 8%;
  width: 32%;
  height: 46%;
  border: 10px solid #6a4128;
  border-radius: 18px 18px 8px 8px;
  overflow: hidden;
  background: linear-gradient(#6a4d8a 0%, #e07a6a 38%, #f2b07a 62%, #4a6ea8 62%, #2b4c7a 100%);
  box-shadow: 0 0 0 6px #4a2c18, inset 0 0 30px rgba(20,10,40,.25);
}

.window-scene .moon {
  position: absolute;
  right: 18%;
  top: 16%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #f8e7b0;
  box-shadow: 0 0 24px #ffe8a0;
}

.window-scene .water {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(#3d5f96, #243e6c);
}

.window-scene .island {
  position: absolute;
  right: 10%;
  bottom: 28%;
  width: 42%;
  height: 22%;
  background: #2d3a2a;
  border-radius: 40% 50% 0 0;
}

.window-scene .lighthouse {
  position: absolute;
  right: 22%;
  bottom: 40%;
  width: 8px;
  height: 28px;
  background: #efe6d2;
  box-shadow: 0 -10px 16px #ffd98a;
}

.string-lights {
  position: absolute;
  left: 34%;
  top: 4%;
  width: 38%;
  height: 40px;
  pointer-events: none;
}

.bulb {
  position: absolute;
  width: 16px;
  height: 20px;
  background: #f4c56a;
  border-radius: 8px 8px 10px 10px;
  box-shadow: 0 0 16px #ffd27a;
}

.bookshelf {
  position: absolute;
  left: 16%;
  top: 12%;
  width: 16%;
  height: 48%;
  background: linear-gradient(#6b3f24, #4e2c18);
  border-radius: 6px;
  box-shadow: inset 0 0 0 4px #3a2112;
}

.shelf-row {
  height: 22%;
  margin: 6% 8%;
  background: linear-gradient(90deg, #8b4f2c, #6a3820);
  border-radius: 3px;
  position: relative;
}

.book {
  position: absolute;
  bottom: 4px;
  width: 10px;
  height: 70%;
  border-radius: 2px;
}

.sofa {
  position: absolute;
  left: 17%;
  top: 52%;
  width: 22%;
  height: 22%;
  background: #5f8e86;
  border-radius: 22px 22px 10px 10px;
  box-shadow: 8px 10px 0 #4d746e;
}

.sofa-pillow {
  position: absolute;
  right: 12%;
  top: 12%;
  width: 34%;
  height: 48%;
  background: #f3e2b0;
  border-radius: 50%;
}

.book-stack {
  position: absolute;
  left: 18%;
  top: 68%;
  width: 10%;
}

.book-stack span {
  display: block;
  height: 16px;
  margin-bottom: 3px;
  background: #d7b48a;
  border-radius: 3px;
  font-size: 9px;
  padding: 1px 6px;
  color: #5a3a24;
}

.rug {
  position: absolute;
  left: 32%;
  top: 64%;
  width: 36%;
  height: 26%;
  background:
    radial-gradient(circle at 50% 50%, #d9c6e8 0 18%, transparent 19%),
    repeating-conic-gradient(from 0deg, #c9b8e0 0 12deg, #b39bd0 12deg 24deg);
  border-radius: 50%;
  box-shadow: 0 10px 0 rgba(70,40,20,.18);
}

.pet-bed {
  position: absolute;
  left: 66%;
  top: 58%;
  width: 13%;
  height: 12%;
  background: #efe0c8;
  border-radius: 50%;
  box-shadow: inset 0 0 0 8px #e2c8a0;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #7a5a40;
}

.plant-left, .plant-right {
  position: absolute;
  width: 90px;
  height: 140px;
  pointer-events: none;
}

.plant-left { left: 2%; bottom: 18%; }
.plant-right { right: 3%; bottom: 16%; }

.leaf {
  position: absolute;
  background: #4f8a46;
  border-radius: 60% 40%;
  width: 28px;
  height: 48px;
}

.table-left {
  position: absolute;
  left: 1%;
  bottom: 14%;
  width: 18%;
  height: 18%;
  background: #8a5634;
  border-radius: 10px;
  z-index: 3;
}

.lantern-obj {
  position: absolute;
  left: 3%;
  bottom: 24%;
  width: 54px;
  height: 70px;
  z-index: 4;
}

.lantern-body {
  width: 40px;
  height: 46px;
  margin: 0 auto;
  background: linear-gradient(#f0c36a, #c98432);
  border-radius: 8px;
  box-shadow: 0 0 24px #ffb347;
}

.mug {
  position: absolute;
  left: 10%;
  bottom: 20%;
  width: 48px;
  height: 42px;
  background: #efe6d6;
  border-radius: 6px 6px 10px 10px;
  z-index: 5;
  display: grid;
  place-items: end center;
  font-size: 9px;
  padding-bottom: 6px;
}

.rabbit {
  position: absolute;
  left: 58%;
  top: 74%;
  width: 70px;
  height: 46px;
  background: #d8b48a;
  border-radius: 40% 50% 40% 40%;
  z-index: 5;
}

.sign-left, .sign-right, .sign-top {
  position: absolute;
  background: #d7c09a;
  color: #5b422e;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.25;
  box-shadow: 2px 3px 0 rgba(80,50,20,.2);
}

.sign-left { left: 1%; bottom: 4%; width: 120px; z-index: 8; }
.sign-right { right: 1%; bottom: 4%; width: 110px; z-index: 8; }
.sign-top { right: 1%; top: 1%; width: 120px; z-index: 20; }

/* HUD */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.hud > * { pointer-events: auto; }

.brand {
  position: absolute;
  left: 18px;
  top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.brand-mark {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(#7fb7d8, #3d6a8a);
  box-shadow: 0 0 0 4px #efe3c8;
  display: grid;
  place-items: center;
  font-size: 26px;
}

.brand h1 {
  margin: 0;
  font-size: 34px;
  color: #f3e2b4;
  text-shadow: 0 2px 0 #5a3a18;
  letter-spacing: .5px;
}

.brand p {
  margin: 0;
  color: #d7c29a;
  font-size: 13px;
}

.currencies {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  background: #5a3a24;
  padding: 6px 10px;
  border-radius: 24px;
  box-shadow: 0 6px 0 #3d2416;
}

.currency {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff8e8;
  font-weight: 800;
}

.currency button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #e7c27a;
  color: #5a3a24;
  font-weight: 800;
}

.panel {
  background: var(--panel);
  border: 2px solid var(--panel-border);
  border-radius: 18px;
  box-shadow: 0 10px 0 rgba(90,50,20,.12);
}

.daily {
  position: absolute;
  left: 18px;
  top: 86px;
  width: 250px;
  padding: 14px 14px 10px;
}

.daily h2 {
  margin: 0 0 10px;
  font-size: 22px;
}

.task {
  display: grid;
  grid-template-columns: 28px 1fr 26px;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  color: inherit;
  border-radius: 10px;
}

.task:hover { background: rgba(255,255,255,.45); }

.check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid #c9ae86;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
}

.check.on {
  background: #6db56a;
  border-color: #4e8d4c;
  color: white;
}

.daily-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}

.status {
  position: absolute;
  right: 16px;
  top: 78px;
  width: 270px;
  padding: 12px;
}

.status-head {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: center;
}

.status-head h2 { margin: 0; font-size: 26px; }
.status-head p { margin: 0; font-size: 12px; color: var(--ink-soft); }

.portrait {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(#efe6d4, #d7c4a4);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.stat-row {
  display: grid;
  grid-template-columns: 28px 70px 1fr;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
}

.bar {
  height: 10px;
  background: #ead9be;
  border-radius: 99px;
  overflow: hidden;
}

.bar > span { display: block; height: 100%; border-radius: 99px; }
.bar.comfort > span { background: #f2a0b6; }
.bar.curiosity > span { background: #efc15a; }
.bar.energy > span { background: #7ec8e3; }
.bar.friendship > span { background: #8fce7a; }

.status-foot {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.inventory-panel {
  position: absolute;
  right: 16px;
  top: 360px;
  width: 270px;
  padding: 12px;
}

.inv-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.slot {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 2px solid #e2c9a2;
  background: #fff8ea;
  display: grid;
  place-items: center;
  font-size: 22px;
}

.memory-toast {
  position: absolute;
  right: 16px;
  bottom: 92px;
  width: 300px;
  padding: 10px;
  display: grid;
  grid-template-columns: 72px 1fr 22px;
  gap: 8px;
  align-items: center;
}

.memory-toast img, .memory-art {
  width: 72px;
  height: 56px;
  border-radius: 8px;
  background: linear-gradient(#3d5a4a, #1e2e28);
}

.memory-toast h3 { margin: 0; font-size: 14px; }
.memory-toast p { margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); }

.close-x {
  border: 0;
  background: transparent;
  font-size: 16px;
}

.nav {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  background: #5a3a24;
  padding: 8px 14px;
  border-radius: 20px 20px 12px 12px;
  z-index: 20;
}

.nav-btn {
  min-width: 86px;
  border: 0;
  background: #efe3c8;
  border-radius: 16px;
  padding: 8px 8px 6px;
  color: var(--ink);
  box-shadow: 0 3px 0 #c9ae86;
}

.nav-btn.active {
  background: #fff4d6;
  box-shadow: 0 0 0 3px #f0d48a, 0 3px 0 #c9ae86;
}

.nav-btn .ico { font-size: 20px; display: block; }
.nav-btn span.label { font-size: 12px; font-weight: 800; }

/* Miso */
.miso-wrap {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -40%);
  width: 280px;
  height: 260px;
  z-index: 6;
  background: none;
  border: 0;
  padding: 0;
}

.miso-wrap.react .miso { animation: hop .45s ease; }

@keyframes hop {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-14px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

.speech {
  position: absolute;
  left: 54%;
  top: 36%;
  transform: translateX(-10%);
  background: #fff8ea;
  border-radius: 16px;
  padding: 10px 14px;
  max-width: 180px;
  box-shadow: 0 6px 0 rgba(90,50,20,.12);
  z-index: 7;
  font-size: 14px;
}

.speech:after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -10px;
  border: 8px solid transparent;
  border-top-color: #fff8ea;
}

.hotspot {
  background: transparent;
  border: 0;
  padding: 0;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(30,18,12,.45);
  z-index: 40;
  display: grid;
  place-items: center;
}

.modal {
  width: min(520px, 90%);
  background: #fff6e8;
  border-radius: 20px;
  padding: 20px;
  border: 3px solid #e4c9a0;
}

.modal h2 { margin-top: 0; }

.coming {
  text-align: center;
}

.coming p { color: var(--ink-soft); }

.inv-full-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.dev-toggle {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 30;
  font-size: 11px;
  background: #3d2818;
  color: #f3e2b4;
  border: 0;
  border-radius: 8px;
  padding: 4px 8px;
}

.dev-panel {
  position: absolute;
  left: 8px;
  bottom: 36px;
  z-index: 30;
  width: 260px;
  max-height: 70%;
  overflow: auto;
  background: #2a1b12;
  color: #f3e2b4;
  border-radius: 12px;
  padding: 10px;
  font-size: 12px;
}

.dev-panel label { display: block; margin: 6px 0; }
.dev-panel input, .dev-panel select {
  width: 100%;
}

.actions-bar {
  position: absolute;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 15;
}

.actions-bar button {
  border: 0;
  background: #fff1d6;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  color: var(--ink);
  box-shadow: 0 3px 0 #d7b888;
}

@media (prefers-reduced-motion: reduce) {
  .miso-wrap.react .miso-art { animation: none; }
}

@media (max-width: 1100px) {
  .daily { width: 210px; }
  .status, .inventory-panel, .memory-toast { width: 230px; }
  .brand h1 { font-size: 26px; }
}

@media (max-height: 700px) {
  .game-frame { height: 100vh; border-radius: 0; }
}

.cottage[data-period="morning"] .cottage-wall {
  filter: brightness(1.08) saturate(0.95);
}
.cottage[data-period="morning"] .window-scene {
  background: linear-gradient(#9ec7e8 0%, #f3e2b4 55%, #7aa0c8 55%, #4d7aa8 100%);
}
.cottage[data-period="afternoon"] .cottage-wall {
  filter: brightness(1.14);
}
.cottage[data-period="afternoon"] .window-scene {
  background: linear-gradient(#6eb4e6 0%, #fff1c2 50%, #5b8ec4 50%, #3d6ea8 100%);
}
.cottage[data-period="evening"] .cottage-wall {
  filter: brightness(0.96) saturate(1.1);
}
.cottage[data-period="evening"] .window-scene {
  background: linear-gradient(#c46b6a 0%, #f2b07a 45%, #4a6ea8 62%, #2b4c7a 100%);
}
.cottage[data-period="night"] .window-scene {
  background: linear-gradient(#6a4d8a 0%, #e07a6a 38%, #f2b07a 62%, #4a6ea8 62%, #2b4c7a 100%);
}

@media (max-width: 1180px) {
  .daily { width: 200px; }
  .status, .inventory-panel { width: 220px; }
  .nav-btn { min-width: 72px; padding: 10px 6px; }
  .actions-bar button { padding: 10px 12px; }
}

@media (max-width: 1024px) {
  .brand h1 { font-size: 22px; }
  .daily { top: 72px; }
}

.version-tag { font-size: 11px; color: #d7c29a; margin: 2px 0 0; }
.nav { bottom: max(10px, env(safe-area-inset-bottom)); }
.nav-btn { min-height: 52px; min-width: 72px; }
.actions-bar button, .touch-row button, .task {
  min-height: 44px;
}

.miso-wrap.pose-happy .miso { filter: saturate(1.1); }
.miso-wrap.pose-curious .miso { transform: rotate(-4deg); }
.miso-wrap.pose-sleepy .miso { opacity: .92; }
.miso-wrap.pose-excited .miso { animation: hop .45s ease; }

.village { position:absolute; inset:0; background:#6aa36a; }
.village-sky {
  position:absolute; inset:0 0 42% 0;
  background: linear-gradient(#7eb7e6, #f3d7a4 70%, #88c07a);
}
.cottage[data-period="morning"] .village-sky,
.village[data-period="morning"] .village-sky { background: linear-gradient(#9fd0f0, #f7e7c2); }
.cottage[data-period="afternoon"] .window-scene { filter: brightness(1.08); }
.cottage[data-period="evening"] .window-scene { filter: saturate(1.15); }
.village-water {
  position:absolute; left:0; right:0; bottom:18%; height:22%;
  background: linear-gradient(#4d86b8, #2f5e8a);
}
.village-island {
  position:absolute; right:6%; bottom:32%; width:18%; height:16%;
  background:#3f5a3a; border-radius: 40% 50% 0 0;
}
.village-lighthouse {
  position:absolute; right:12%; bottom:44%; width:14px; height:46px;
  background:#f3ead2; box-shadow: 0 -12px 18px #ffd98a;
}
.village-square {
  position:absolute; left:8%; right:8%; top:18%; bottom:18%;
  background: radial-gradient(circle at 50% 60%, #e8c27a 0 14%, #d7a85c 15% 40%, #7fb56a 41%);
  border-radius: 24px;
}
.v-fountain {
  position:absolute; left:50%; top:42%; width:90px; height:90px; transform:translate(-50%,-50%);
  background: radial-gradient(circle, #9ad7f0 0 30%, #5aa0c8 31%);
  border-radius:50%;
}
.v-clock { position:absolute; left:8%; top:8%; width:70px; height:90px; background:#d9c4a0; border-radius:8px; }
.v-flowers { position:absolute; right:12%; top:20%; width:80px; height:40px; background:#6fbf6a; border-radius:20px; }
.v-bench { position:absolute; left:18%; bottom:16%; width:90px; height:28px; background:#8a5634; border-radius:8px; }
.v-board { position:absolute; right:16%; bottom:20%; width:54px; height:64px; background:#efe0c4; }
.v-sign { position:absolute; left:8%; top:38%; width:48px; height:64px; background:#c98432; }
.nell {
  position:absolute; left:62%; top:48%; width:88px; height:110px;
  border:0; background:transparent; color:#4a3426;
}
.nell-face { font-size:48px; display:block; }
.nell-name { font-weight:800; }
.village-panel {
  position:absolute; left:16px; top:86px; width:min(320px, 34%);
  padding:14px;
}
.touch-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.touch-row button {
  border:0; background:#fff1d6; border-radius:14px; padding:8px 10px; font-weight:800;
}
.shop-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
.shop-card {
  border:2px solid #e2c9a2; background:#fff8ea; border-radius:14px; padding:10px;
  display:flex; flex-direction:column; gap:4px; min-height:96px;
}
.quiet { color: var(--ink-soft); font-size:13px; }

.orient-gate {
  position:fixed; inset:0; z-index:80; display:none; place-items:center;
  background:#2a1b12; color:#f3e2b4; text-align:center; padding:24px;
}
@media (orientation: portrait) {
  .orient-gate { display:grid; }
  .game-frame { visibility:hidden; }
}

.nell-face { opacity: 0; }

.layer-env {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}
.cottage > .hotspot, .village > .hotspot { z-index: 5; background: transparent; }
.hs-window { left: 38%; top: 8%; width: 32%; height: 40%; }
.hs-shelf { left: 16%; top: 12%; width: 16%; height: 40%; }
.hs-bed { left: 66%; top: 56%; width: 13%; height: 12%; }
.hs-lantern { left: 3%; bottom: 22%; width: 54px; height: 70px; }
.hs-mug { left: 10%; bottom: 18%; width: 48px; height: 42px; }
.hs-rabbit { left: 58%; top: 72%; width: 70px; height: 46px; }
.miso-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.nell img { width: 88px; height: auto; display: block; margin: 0 auto; }
.portrait .miso-art { width: 64px; height: 64px; }
.cottage-wall, .beams, .window-scene, .bookshelf, .sofa, .rug, .village-sky, .village-water, .village-square {
  /* illustrated plate supplies these now */
}

/* =========================================================
   Little Haven v0.2.4 approved visual integration
   iPad landscape first. Runtime UI remains live and separate
   from the environment/character art layers.
   ========================================================= */

:root {
  --panel: rgba(255, 248, 232, 0.94);
  --panel-border: #d8b981;
  --wood-dark: #50301f;
  --nav: #50301f;
}

.stage {
  background:
    radial-gradient(circle at 50% 10%, rgba(88,120,137,.24), transparent 38%),
    linear-gradient(180deg, #17242b, #21150f 72%);
}

.cottage,
.village {
  background: #2d2018;
  isolation: isolate;
}

.layer-env {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.period-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  transition: background .35s ease, opacity .35s ease;
}

.cottage[data-period="morning"] .period-wash,
.village[data-period="morning"] .period-wash {
  background: linear-gradient(180deg, rgba(202,227,244,.08), rgba(255,224,156,.05));
}
.cottage[data-period="afternoon"] .period-wash,
.village[data-period="afternoon"] .period-wash {
  background: linear-gradient(180deg, rgba(255,242,205,.035), transparent 55%);
}
.cottage[data-period="evening"] .period-wash,
.village[data-period="evening"] .period-wash {
  background: linear-gradient(180deg, rgba(238,139,98,.14), rgba(92,74,128,.08));
}
.cottage[data-period="night"] .period-wash,
.village[data-period="night"] .period-wash {
  background: linear-gradient(180deg, rgba(39,61,104,.30), rgba(36,31,67,.18));
}

/* Old prototype CSS artwork is intentionally disabled. */
.cottage-wall, .beams, .window-scene, .string-lights, .bookshelf,
.sofa, .book-stack, .rug, .pet-bed, .plant-left, .plant-right,
.table-left, .lantern-obj, .mug, .rabbit, .sign-left, .sign-right,
.sign-top, .village-sky, .village-water, .village-island,
.village-square {
  display: none !important;
}

.hud {
  z-index: 12;
}

.brand {
  left: 18px;
  top: 14px;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(40,61,62,.92), rgba(30,46,49,.92));
  border: 1px solid rgba(244,219,162,.48);
  box-shadow: 0 6px 18px rgba(25,15,10,.26);
}
.brand-mark {
  width: 42px;
  height: 42px;
  background: transparent;
  box-shadow: none;
  font-size: 28px;
}
.brand h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 2.5vw, 34px);
  color: #fff1c8;
  letter-spacing: .2px;
}
.brand p { color: #e7d6af; }
.version-tag { opacity: .72; }

.currencies {
  top: 14px;
  padding: 7px 12px;
  gap: 14px;
  border: 1px solid rgba(238,203,137,.45);
  background: linear-gradient(180deg, rgba(84,52,33,.96), rgba(62,39,26,.96));
  box-shadow: 0 6px 16px rgba(35,20,12,.25);
}
.currency button {
  background: #77adc0;
  color: white;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.panel {
  background:
    radial-gradient(circle at 10px 10px, rgba(100,143,77,.20) 0 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 10px) 10px, rgba(100,143,77,.16) 0 5px, transparent 6px),
    linear-gradient(180deg, rgba(255,250,238,.965), rgba(249,236,211,.95));
  border: 2px solid rgba(191,151,93,.82);
  box-shadow:
    0 10px 24px rgba(53,31,19,.18),
    inset 0 0 0 2px rgba(255,255,255,.42);
  border-radius: 20px;
}
.panel h2, .panel h3 {
  font-family: Georgia, "Times New Roman", serif;
}

.daily {
  left: 16px;
  top: 90px;
  width: clamp(198px, 20vw, 236px);
  padding: 14px 13px 11px;
}
.daily h2 { font-size: clamp(19px, 2vw, 23px); }
.task {
  min-height: 42px;
  padding: 6px 4px;
}
.task:hover { background: rgba(255,255,255,.28); }

.status {
  right: 16px;
  top: 80px;
  width: clamp(220px, 22vw, 260px);
  padding: 12px;
}
.status-head h2 { font-size: clamp(22px, 2.3vw, 28px); }
.portrait {
  background: linear-gradient(#e9f0ee, #d8e3df);
  border: 1px solid #d5ba87;
}

.inventory-panel {
  right: 16px;
  top: 354px;
  width: clamp(220px, 22vw, 260px);
}
.slot {
  background: linear-gradient(#fffaf0,#f4e4c7);
  border-color: #d8bc8b;
}

.memory-toast {
  right: 16px;
  bottom: 98px;
  width: clamp(250px, 27vw, 310px);
}

.miso-wrap {
  left: 50%;
  top: 67%;
  width: clamp(235px, 25vw, 320px);
  height: clamp(270px, 31vw, 385px);
  transform: translate(-50%, -50%);
  z-index: 6;
  filter: drop-shadow(0 12px 14px rgba(47,31,21,.26));
}
.miso-wrap.react .miso-art { animation: hop .45s ease; }
.miso-wrap.pose-happy .miso-art { filter: saturate(1.06) brightness(1.03); }
.miso-wrap.pose-curious .miso-art { transform: rotate(-2deg); }
.miso-wrap.pose-sleepy .miso-art { opacity: .96; }
.miso-wrap.pose-excited .miso-art { animation: hop .45s ease; }
.miso-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.portrait .miso-art {
  width: 68px;
  height: 68px;
  object-position: center 22%;
}

.speech {
  left: 52%;
  top: 40%;
  max-width: 210px;
  padding: 11px 15px;
  font-family: Georgia, "Times New Roman", serif;
  background: rgba(255,249,235,.97);
  border: 1px solid rgba(203,168,111,.75);
  box-shadow: 0 7px 18px rgba(65,39,22,.16);
}

.actions-bar {
  bottom: 90px;
  gap: 7px;
}
.actions-bar button,
.touch-row button {
  background: linear-gradient(#fff7e6,#ead4ad);
  border: 1px solid #caa76d;
  color: #4c3526;
  box-shadow: 0 3px 8px rgba(66,39,20,.16);
}

.nav {
  bottom: max(8px, env(safe-area-inset-bottom));
  gap: clamp(4px, .65vw, 9px);
  padding: 7px 10px;
  width: min(calc(100% - 30px), 780px);
  justify-content: center;
  border-radius: 22px;
  border: 1px solid rgba(230,197,137,.42);
  background: linear-gradient(180deg, rgba(73,47,31,.97), rgba(50,33,23,.98));
  box-shadow: 0 9px 22px rgba(37,22,15,.30);
}
.nav-btn {
  min-width: 0;
  width: 98px;
  min-height: 56px;
  padding: 7px 5px 6px;
  border: 1px solid #c9a66f;
  border-radius: 15px;
  background: linear-gradient(#fbf0d9,#e6cfaa);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.nav-btn.active {
  background: linear-gradient(#fff6dd,#ead69f);
  box-shadow: 0 0 0 3px rgba(110,193,224,.75), 0 0 18px rgba(103,188,224,.42);
}
.nav-btn .ico { font-size: clamp(18px,2vw,23px); }
.nav-btn span.label { font-size: clamp(10px,1.1vw,12px); }

/* Home interaction regions aligned with the approved environment. */
.hs-window { left: 33%; top: 8%; width: 34%; height: 38%; }
.hs-shelf { left: 10%; top: 10%; width: 19%; height: 38%; }
.hs-bed { left: 70%; top: 26%; width: 23%; height: 36%; }
.hs-lantern { left: 6%; top: 17%; width: 9%; height: 21%; }
.hs-mug { left: 4%; bottom: 13%; width: 13%; height: 16%; }
.hs-rabbit { left: 74%; bottom: 6%; width: 18%; height: 14%; }

/* Village art is now a single clean environment plate. Hotspots are invisible. */
.village-lighthouse,
.v-clock,
.v-fountain,
.v-flowers,
.v-bench,
.v-board,
.v-sign {
  position: absolute;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.village-lighthouse { right: 7%; top: 4%; width: 18%; height: 25%; }
.v-clock { left: 34%; top: 11%; width: 16%; height: 32%; }
.v-fountain { left: 40%; top: 49%; width: 28%; height: 28%; transform: none; }
.v-flowers { right: 0; bottom: 9%; width: 24%; height: 25%; }
.v-bench { right: 1%; bottom: 12%; width: 22%; height: 26%; }
.v-board { right: 0; top: 24%; width: 19%; height: 35%; }
.v-sign { left: 2%; top: 22%; width: 29%; height: 36%; }

.nell {
  left: 14%;
  top: auto;
  bottom: 104px;
  width: clamp(126px, 15vw, 190px);
  height: clamp(210px, 25vw, 320px);
  z-index: 7;
  background: none !important;
  filter: drop-shadow(0 12px 14px rgba(41,28,21,.25));
}
.nell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}
.nell-name {
  display: inline-block;
  margin-top: -4px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #4a3426;
  background: rgba(255,247,227,.94);
  border: 1px solid #c9a66f;
}

.village-speech {
  left: 28%;
  top: auto;
  bottom: 300px;
  max-width: 260px;
  z-index: 8;
}

.village-panel {
  left: 50%;
  top: auto;
  bottom: 88px;
  transform: translateX(-50%);
  width: min(610px, 58%);
  padding: 12px 15px;
  z-index: 13;
}
.village-panel h2 { margin: 0 0 2px; }
.village-panel .quiet { margin: 0 0 5px; }
.village-panel .touch-row { margin-top: 6px; justify-content: center; }

/* Keep the active game readable at the smaller 1024x768 iPad class. */
@media (max-width: 1080px) {
  .brand { left: 12px; top: 10px; padding: 6px 10px 6px 7px; }
  .brand p:not(.version-tag) { display: none; }
  .daily { left: 12px; top: 73px; width: 194px; padding: 11px 10px 8px; }
  .status { right: 12px; top: 72px; width: 214px; padding: 10px; }
  .inventory-panel { right: 12px; top: 337px; width: 214px; padding: 10px; }
  .stat-row { grid-template-columns: 25px 58px 1fr; gap: 4px; }
  .miso-wrap { width: 235px; height: 292px; top: 67%; }
  .speech { top: 40%; max-width: 175px; font-size: 12px; }
  .actions-bar { bottom: 79px; }
  .actions-bar button { padding: 7px 9px; font-size: 12px; min-height: 38px; }
  .nav { width: calc(100% - 20px); padding: 6px 7px; }
  .nav-btn { min-height: 50px; padding: 5px 3px; }
  .village-panel { width: 62%; bottom: 78px; }
  .nell { bottom: 92px; width: 132px; height: 228px; }
}

.forest { position: relative; min-height: 100%; }
.forest-panel, .forest-desc, .forest-energy, .forest-paths, .forest-finds {
  position: relative; z-index: 4;
}
.forest-panel {
  margin: 18% auto 0;
  width: min(420px, 70%);
  background: rgba(255,248,236,.94);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(40,20,10,.2);
}
.forest-hud { display:flex; justify-content:space-between; padding: 10px 16px; position:relative; z-index:5; }
.forest-desc, .forest-energy { color:#f4efe4; text-shadow:0 1px 2px #0008; margin: 4px 18px; }

.path-btn, .find-btn, .rest-btn, .forest-panel .primary {
  min-height: 44px; min-width: 120px; margin: 6px; border-radius: 14px;
  border: 0; background: #fff6e8; color:#3b2a1c; font-weight:600; padding: 8px 14px;
}
.forest-paths, .forest-finds { display:flex; flex-wrap:wrap; padding: 8px 12px; }
.muted { color:#efe6d4; }

.path-btn.locked { opacity: 0.55; background: #e8dcc8; }

.forest.explore {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a261c;
}
.forest-canvas {
  position: relative;
  aspect-ratio: 4 / 3;
  width: min(100%, calc((100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 88px) * 4 / 3));
  height: auto;
  max-height: calc(100% - 12px);
  overflow: hidden;
}
.forest.explore .layer-env {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.forest-canvas .env-hotspot,
.forest-canvas .fx,
.forest-canvas .forest-miso { position: absolute; }

.env-hotspot {
  position: absolute;
  z-index: 6;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  border-radius: 18px;
}
.env-hotspot.shimmer { box-shadow: inset 0 0 18px rgba(244, 226, 140, 0.28); }
.env-hotspot.locked { opacity: 0.35; }
.forest[data-reduced="true"] .env-hotspot.shimmer { box-shadow: none; }
.forest-minihud {
  position: absolute; top: 10px; left: 14px; z-index: 7;
  background: rgba(255,248,236,.86); border-radius: 12px; padding: 6px 12px;
}
.forest-place { margin: 0; font-weight: 700; color: #3b2a1c; }

.forest-canvas .forest-miso,
.forest-miso {
  top: auto !important;
  left: 50%;
  bottom: 14%;
  width: clamp(110px, 13vw, 160px);
  height: clamp(145px, 17vw, 215px);
  transform: translateX(-50%);
  z-index: 6;
}
.forest-miso .miso-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}


.fx { position:absolute; inset:0; pointer-events:none; z-index:3; overflow:hidden; }
.fx-mist { position:absolute; inset:10% 0 20%; background:linear-gradient(90deg,transparent,rgba(180,210,220,.18),transparent); animation: mist 8s ease-in-out infinite; }
.fx-motes, .fx-dust { position:absolute; inset:0; pointer-events:none; }
.fx-motes::before, .fx-dust::before {
  content:"";
  position:absolute;
  width:6px; height:6px; border-radius:50%;
  left: 22%; top: 34%;
  background: rgba(255,250,220,.35);
  box-shadow: 180px 80px 8px 1px rgba(255,250,220,.28), 420px 160px 6px 1px rgba(255,250,220,.22);
  animation: motes 7s ease-in-out infinite;
}
.fx-glow { position:absolute; left:8%; top:48%; width:24%; height:28%; border-radius:50%; background:radial-gradient(circle,rgba(190,220,255,.28),transparent 70%); animation: breathe 4s ease-in-out infinite; }
.fx-mark-glow { position:absolute; left:62%; top:34%; width:24%; height:30%; border-radius:40%; background:radial-gradient(circle,rgba(244,226,140,.32),transparent 70%); animation: breathe 3s ease-in-out infinite; }
.fx-leaves { position:absolute; inset:0; background-image:radial-gradient(circle at 20% 10%, rgba(80,120,70,.15) 0 2px, transparent 3px); animation: leaves 9s linear infinite; }
@keyframes mist { 50% { transform: translateX(8%); } }
@keyframes motes { 50% { opacity: .6; } }
@keyframes breathe { 50% { opacity: .45; transform: scale(1.06); } }
@keyframes leaves { 50% { transform: translateY(6px); } }
.forest[data-reduced="true"] .fx span { animation: none; }
.env-hotspot.obstructed { background: rgba(10,20,16,.28); }
.forest[data-path-open="true"] [data-travel="lockedPath"].obstructed { background: transparent; opacity: 1; }


/* LITTLE HAVEN v0.3.8 PRE-DEVICE GATE */
.forest-canvas .forest-miso,
.forest-canvas .forest-miso .miso-art,
.forest .speech { pointer-events: none; }

.forest-canvas .forest-miso .miso-pet-control {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  appearance: none;
  pointer-events: auto;
  touch-action: manipulation;
}
.forest-canvas .forest-miso .miso-pet-control:focus-visible {
  outline: 3px solid rgba(255,255,255,.9);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .fx-mist, .fx-motes::before, .fx-dust::before, .fx-glow, .fx-mark-glow, .fx-leaves,
  .miso-art, .miso-wrap.react .miso-art {
    animation: none !important;
    transition: none !important;
  }
}


/* LITTLE HAVEN v0.3.9 MISO VISUAL STABILIZATION
   Use original pose art at a common rendered height. The sleepy pose is
   naturally wider, so it is allowed to overflow horizontally rather than
   being shrunk to fit a portrait box. */
.miso-wrap {
  overflow: visible;
}
.miso-wrap > .miso-art {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
}
.miso-wrap.pose-curious > .miso-art {
  transform: translateX(-50%) rotate(-2deg);
}
.forest-canvas .forest-miso {
  width: clamp(120px, 14vw, 180px);
  height: clamp(160px, 19vw, 230px);
  z-index: 7;
  overflow: visible;
}
.forest-canvas .forest-miso > .miso-art {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  opacity: 1;
  visibility: visible;
}
.forest-canvas .forest-miso.pose-curious > .miso-art {
  transform: translateX(-50%) rotate(-2deg);
}
.forest-canvas .forest-miso .miso-pet-control {
  top: 8%;
  right: 8%;
  z-index: 2;
}


/* LITTLE HAVEN v0.4.0 CHARACTER LAYER SEPARATION
   Home and Forest no longer share the same Miso wrapper geometry. */

/* Home Miso: position from the action bar upward and let the artwork keep
   its natural aspect ratio. This removes pose-specific clipping edges. */
.cottage > .miso-wrap {
  left: 50% !important;
  top: auto !important;
  bottom: 132px !important;
  width: min(46vw, 390px) !important;
  height: min(46vh, 360px) !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
}
.cottage > .miso-wrap > .miso-art {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: auto !important;
  height: 100% !important;
  max-width: min(58vw, 440px) !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) !important;
}
.cottage > .miso-wrap.pose-curious > .miso-art {
  transform: translateX(-50%) rotate(-2deg) !important;
}

/* Forest Miso is now a completely independent sprite layer. */
.forest-canvas > .forest-miso-art {
  position: absolute;
  left: 50%;
  bottom: 13%;
  height: clamp(150px, 18vw, 220px);
  width: auto;
  max-width: 30%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  z-index: 7;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  filter: drop-shadow(0 8px 10px rgba(35,28,21,.20));
}
.forest-canvas > .forest-miso-art.pose-curious {
  transform: translateX(-50%) rotate(-2deg);
}
.forest-canvas > .forest-miso-pet-control {
  position: absolute;
  left: calc(50% + 34px);
  bottom: calc(13% + 112px);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  appearance: none;
  z-index: 8;
  pointer-events: auto;
  touch-action: manipulation;
}
.forest-canvas > .forest-miso-pet-control:focus-visible {
  outline: 3px solid rgba(255,255,255,.95);
  outline-offset: 2px;
}
@media (max-height: 700px) and (orientation: landscape) {
  .cottage > .miso-wrap {
    bottom: 112px !important;
    height: min(42vh, 300px) !important;
  }
  .forest-canvas > .forest-miso-art {
    height: clamp(125px, 17vw, 185px);
  }
  .forest-canvas > .forest-miso-pet-control {
    bottom: calc(13% + 90px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .forest-canvas > .forest-miso-art { animation: none !important; transition: none !important; }
}


/* Dev-only reset control inserted by navBar when running Vite in DEV mode. */
.test-reset {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 60;
  border: 2px solid #8a4f32;
  border-radius: 10px;
  padding: 7px 11px;
  background: #fff2df;
  color: #4d2b1c;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(35, 20, 11, 0.22);
  touch-action: manipulation;
}

.test-reset:focus-visible {
  outline: 3px solid #244f73;
  outline-offset: 2px;
}

/* =========================================================
   Little Haven v0.4.3 visual-parity pass
   Uses the approved illustrated environment as a separate layer while
   bringing live HUD, item art and spacing closer to the concept rendering.
   ========================================================= */

.cottage {
  isolation: isolate;
}

.cottage > .layer-env {
  filter: saturate(1.08) contrast(1.025) brightness(.96);
  transform: scale(1.015);
}

.cottage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 9% 68%, rgba(255,176,76,.15), transparent 16%),
    radial-gradient(circle at 77% 42%, rgba(255,194,98,.10), transparent 18%),
    radial-gradient(ellipse at center, transparent 55%, rgba(44,25,19,.18) 100%);
  mix-blend-mode: soft-light;
}

.cottage[data-period="evening"] > .layer-env {
  filter: saturate(1.13) contrast(1.04) brightness(.86) sepia(.08) hue-rotate(-5deg);
}
.cottage[data-period="night"] > .layer-env {
  filter: saturate(1.13) contrast(1.05) brightness(.69) sepia(.04) hue-rotate(5deg);
}
.cottage[data-period="evening"] .period-wash {
  background:
    radial-gradient(circle at 12% 66%, rgba(255,179,73,.18), transparent 16%),
    linear-gradient(180deg, rgba(94,67,124,.14), rgba(222,130,75,.08));
}
.cottage[data-period="night"] .period-wash {
  background:
    radial-gradient(circle at 12% 66%, rgba(255,177,68,.20), transparent 16%),
    linear-gradient(180deg, rgba(44,49,102,.34), rgba(74,47,76,.16));
}

/* Rendered title treatment replaces the prototype text header. */
.brand.brand-rendered {
  left: clamp(12px, 1.45vw, 22px);
  top: clamp(8px, 1.2vh, 14px);
  width: clamp(250px, 29vw, 360px);
  height: auto;
  padding: 0;
  gap: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.brand-art {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 5px 9px rgba(34,20,13,.24));
}
.brand.brand-rendered .version-tag {
  position: absolute;
  left: 22%;
  bottom: 2px;
  color: rgba(255,242,203,.72);
  font-size: clamp(8px, .82vw, 10px);
  line-height: 1;
  text-shadow: 0 1px 2px rgba(42,26,17,.55);
}
.scene-tag {
  position: absolute;
  right: 8%;
  bottom: 4px;
  font-size: 11px;
  color: #f5e4b9;
  text-shadow: 0 1px 2px rgba(43,27,17,.65);
}

/* Currency capsule mirrors the dark wood and jewel-like art in the rendering. */
.currencies {
  top: clamp(10px, 1.3vh, 15px);
  min-height: 49px;
  gap: clamp(10px, 1.25vw, 18px);
  padding: 5px 11px;
  border-radius: 25px;
  border: 2px solid rgba(177,124,84,.72);
  background: linear-gradient(180deg, rgba(76,48,42,.98), rgba(53,34,31,.98));
  box-shadow: 0 8px 18px rgba(36,20,14,.27), inset 0 1px rgba(255,255,255,.12);
}
.currency {
  gap: 5px;
  min-width: 80px;
  justify-content: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 1.35vw, 17px);
  letter-spacing: .2px;
}
.currency-art {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(30,18,12,.25));
}
.currency button {
  width: 24px;
  height: 24px;
  font-size: 17px;
  line-height: 1;
  background: #7fb7c5;
  color: #fff;
}

/* Parchment cards and non-overlapping layout. */
.panel {
  background:
    radial-gradient(circle at 14px 14px, rgba(119,151,86,.18) 0 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 14px) 14px, rgba(119,151,86,.15) 0 5px, transparent 6px),
    linear-gradient(180deg, rgba(255,250,239,.975), rgba(247,234,207,.97));
  border: 2px solid rgba(194,151,98,.80);
  box-shadow: 0 8px 20px rgba(50,29,18,.18), inset 0 0 0 2px rgba(255,255,255,.35);
}
.daily {
  left: clamp(12px, 1.35vw, 18px);
  top: clamp(104px, 12.4vh, 124px);
  width: clamp(220px, 20.5vw, 285px);
  padding: 14px 14px 12px;
}
.daily h2 {
  font-size: clamp(22px, 2.05vw, 28px);
  text-align: center;
  margin-bottom: 8px;
}
.task {
  grid-template-columns: 34px 1fr 26px;
  min-height: 47px;
  gap: 8px;
  border-radius: 12px;
  font-size: clamp(12px, 1.18vw, 15px);
  border-bottom: 1px solid rgba(193,158,111,.20);
}
.task:last-of-type { border-bottom: 0; }
.task-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
}
.task-art {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(61,39,24,.12));
}
.daily-note {
  margin: 10px 4px 0;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  line-height: 1.25;
}

.status {
  right: clamp(12px, 1.3vw, 18px);
  top: clamp(82px, 9.2vh, 96px);
  width: clamp(235px, 23vw, 300px);
  padding: 12px 14px 13px;
}
.status-head {
  grid-template-columns: 70px 1fr;
  gap: 10px;
}
.portrait {
  width: 70px;
  height: 70px;
  background: linear-gradient(#f4ead6,#e8d7b8);
  border: 1px solid #cfaa72;
  border-radius: 16px;
}
.miso-portrait-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.stat-row {
  grid-template-columns: 30px 72px 1fr;
  margin-top: 7px;
  gap: 6px;
}
.stat-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}
.stat-art {
  width: 27px;
  height: 27px;
  object-fit: contain;
}
.bar {
  height: 12px;
  border: 1px solid rgba(171,132,83,.40);
  box-shadow: inset 0 1px 2px rgba(62,40,24,.10);
}
.status-foot {
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

.inventory-panel {
  right: clamp(12px, 1.3vw, 18px);
  top: clamp(348px, 42vh, 430px);
  width: clamp(235px, 23vw, 300px);
  padding: 11px 12px 13px;
}
.inv-head strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(16px, 1.5vw, 20px);
}
.inv-head button {
  border: 1px solid #c9a56e;
  border-radius: 7px;
  background: rgba(255,252,243,.78);
  color: var(--ink);
  padding: 3px 7px;
}
.inv-grid { gap: 7px; }
.slot.visual-slot {
  position: relative;
  overflow: visible;
  background: linear-gradient(180deg,#fff8e9,#f6e6c8);
  border: 2px solid #ddbd89;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 2px 4px rgba(87,55,31,.08);
}
.item-art {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(64,40,23,.16));
  pointer-events: none;
}

/* Main character sits lower and smaller, matching the concept composition. */
.cottage > .miso-wrap {
  left: 51% !important;
  bottom: 128px !important;
  width: min(34vw, 310px) !important;
  height: min(37vh, 315px) !important;
  filter: drop-shadow(0 11px 14px rgba(47,31,21,.22));
}
.speech {
  left: 53%;
  top: 39%;
  max-width: 220px;
  padding: 12px 16px;
  border: 2px solid rgba(187,145,93,.62);
  border-radius: 21px;
  font-size: clamp(13px, 1.2vw, 16px);
  text-align: center;
}

/* Compact action pills preserve gameplay without competing with the artwork. */
.visual-actions {
  bottom: 87px;
  gap: 6px;
  padding: 4px;
  border-radius: 18px;
  background: rgba(72,45,30,.52);
  backdrop-filter: blur(3px);
}
.visual-actions button {
  min-width: 60px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
}

.nav {
  bottom: max(7px, env(safe-area-inset-bottom));
  width: min(calc(100% - 38px), 820px);
  padding: 7px 12px;
  gap: clamp(5px, .75vw, 10px);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(85,55,37,.97), rgba(52,34,25,.98));
}
.nav-btn {
  width: 104px;
  min-height: 62px;
  padding: 5px 5px 6px;
  border-radius: 18px;
  background: linear-gradient(#fff3dc,#e7cfa8);
  border: 1px solid #c9a26b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.62), 0 2px 0 rgba(100,69,41,.24);
}
.nav-btn.active {
  background: linear-gradient(#fff7df,#f0d79d);
  box-shadow: 0 0 0 3px rgba(255,219,119,.84), 0 0 18px rgba(255,203,92,.34);
}
.nav-btn .ico {
  height: 31px;
  display: grid;
  place-items: center;
}
.nav-art {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(67,43,25,.15));
}
.nav-btn span.label {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(10px, 1vw, 12px);
}

/* Modal and store art: richer cards, actual illustrated item images. */
.overlay {
  background: rgba(31,20,17,.48);
  backdrop-filter: blur(3px);
}
.modal {
  width: min(620px, 92%);
  max-height: min(82vh, 720px);
  overflow: auto;
  padding: 22px;
  border-radius: 24px;
  border: 3px solid #d8b47d;
  background:
    radial-gradient(circle at 18px 18px, rgba(107,143,72,.12) 0 6px, transparent 7px),
    radial-gradient(circle at calc(100% - 18px) 18px, rgba(107,143,72,.10) 0 6px, transparent 7px),
    linear-gradient(180deg,#fff8e9,#f7e7ca);
  box-shadow: 0 22px 50px rgba(39,23,16,.32), inset 0 0 0 2px rgba(255,255,255,.45);
}
.modal h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.5vw, 32px);
}
.inv-full-grid {
  grid-template-columns: repeat(5, minmax(76px, 1fr));
  gap: 12px;
}
.inventory-full-slot {
  min-height: 92px;
}
.inventory-full-slot small {
  position: absolute;
  right: 7px;
  bottom: 5px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,250,236,.94);
  border: 1px solid #c9a56d;
  font-size: 11px;
  font-weight: 800;
}
.shop-modal { width: min(720px, 94%); }
.shop-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.shop-card {
  border: 2px solid #dfbf8c;
  background: linear-gradient(180deg,#fff9ec,#f6e5c7);
  border-radius: 18px;
  padding: 10px;
  min-height: 184px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.64), 0 3px 8px rgba(83,53,31,.10);
}
.shop-art-slot {
  width: 100%;
  min-height: 102px;
  aspect-ratio: auto;
  margin-bottom: 7px;
}
.shop-card strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
}
.shop-card small { color: #5d493a; }

/* Memory toast echoes the concept's postcard card. */
.memory-toast {
  right: clamp(12px, 1.3vw, 18px);
  bottom: 92px;
  width: clamp(270px, 28vw, 330px);
  border-radius: 16px;
}

/* Small landscape windows and iPad split views must not stack the title over Today. */
@media (max-width: 900px) and (orientation: landscape) {
  .brand.brand-rendered { width: clamp(225px, 31vw, 285px); }
  .daily { top: 96px; width: 210px; padding: 10px; }
  .daily h2 { font-size: 20px; }
  .task { min-height: 38px; grid-template-columns: 30px 1fr 23px; font-size: 11px; }
  .task-icon, .task-art { width: 28px; height: 28px; }
  .status { top: 72px; width: 220px; padding: 10px; }
  .inventory-panel { top: 322px; width: 220px; }
  .cottage > .miso-wrap { bottom: 112px !important; height: min(35vh, 260px) !important; }
  .speech { top: 36%; }
  .nav { width: min(calc(100% - 22px), 710px); padding: 5px 8px; }
  .nav-btn { min-height: 52px; }
  .nav-art { width: 31px; height: 31px; }
  .visual-actions { bottom: 72px; }
}

@media (max-height: 690px) and (orientation: landscape) {
  .brand.brand-rendered { width: 235px; }
  .daily { top: 86px; }
  .status { top: 68px; }
  .inventory-panel { top: 286px; }
  .cottage > .miso-wrap { bottom: 102px !important; height: min(34vh, 225px) !important; }
  .speech { top: 33%; }
  .nav-btn { min-height: 49px; padding-top: 3px; }
  .nav-art { width: 28px; height: 28px; }
  .visual-actions { bottom: 67px; }
}

@media (max-width: 640px) and (orientation: portrait) {
  .orient-gate {
    background:
      radial-gradient(circle at 50% 28%, rgba(255,196,96,.10), transparent 22%),
      linear-gradient(180deg,#2a1b12,#1d1410);
  }
}


/* =========================================================
   Little Haven v0.4.4 pre-tester polish
   Corrects cropped inventory art and tightens visual parity.
   ========================================================= */

/* Render UI artwork from high-resolution transparent source crops. */
.item-art {
  width: 86%;
  height: 86%;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  filter: drop-shadow(0 2px 2px rgba(64,40,23,.18));
}
.inventory-panel .item-art { width: 82%; height: 82%; }
.inventory-full-slot .item-art { width: 84%; height: 84%; }
.shop-art-slot .item-art { width: 76%; height: 76%; }

/* Cleaner rendering-like inventory tiles. */
.slot.visual-slot {
  overflow: hidden;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,250,239,.98), rgba(246,232,205,.98));
}
.inventory-full-slot {
  min-height: 104px;
}
.inv-full-grid {
  grid-template-columns: repeat(5, minmax(82px, 1fr));
  gap: 12px;
}

/* Shop art gets room to read as illustration rather than an icon. */
.shop-art-slot {
  min-height: 118px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
}
.shop-card { min-height: 204px; }

/* The reference rendering uses 20 inventory slots. */
.inv-head button { min-width: 48px; text-align: center; }

/* Keep the home composition inside one iPad landscape viewport. */
@media (orientation: landscape) and (max-height: 760px) {
  .daily { top: 82px; transform: scale(.94); transform-origin: top left; }
  .status { top: 72px; transform: scale(.94); transform-origin: top right; }
  .inventory-panel { top: 300px; transform: scale(.94); transform-origin: top right; }
  .cottage > .miso-wrap { bottom: 106px !important; height: min(36vh, 240px) !important; }
  .speech { top: 36%; }
  .visual-actions { bottom: 70px; }
  .nav { bottom: max(6px, env(safe-area-inset-bottom)); }
}

@media (orientation: landscape) and (max-height: 620px) {
  .brand.brand-rendered { width: 218px; }
  .currencies { transform: translateX(-50%) scale(.9); transform-origin: top center; }
  .daily { top: 74px; transform: scale(.86); }
  .status { top: 62px; transform: scale(.86); }
  .inventory-panel { top: 264px; transform: scale(.86); }
  .cottage > .miso-wrap { bottom: 88px !important; height: min(34vh, 205px) !important; }
  .speech { top: 34%; transform: translateX(-10%) scale(.9); transform-origin: center; }
  .visual-actions { bottom: 60px; transform: translateX(-50%) scale(.92); }
  .nav { transform: translateX(-50%) scale(.9); transform-origin: bottom center; }
}

/* =========================================================
   Little Haven v0.4.5 pre-tester composition pass
   iPad fill, clean icon crops, open memory book, newspaper,
   snack presentation, and less-crowded village staging.
   ========================================================= */

/* Use the full dynamic iPad viewport instead of the conservative small viewport. */
.stage {
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  place-items: stretch;
}
.game-frame {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}
@media (min-aspect-ratio: 16/10) {
  .game-frame {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Corrected art atlas crops now have breathing room and transparent edges. */
.task-icon {
  width: 36px;
  height: 36px;
  overflow: visible;
}
.task-art {
  width: 32px;
  height: 32px;
  object-fit: contain;
  object-position: center;
  overflow: visible;
}
.stat-art {
  width: 25px;
  height: 25px;
  object-fit: contain;
}
.currency-art {
  width: 28px;
  height: 28px;
  object-fit: contain;
  background: transparent;
}
.nav-art {
  width: 36px;
  height: 36px;
  object-fit: contain;
  background: transparent;
}

/* Let bottom positioning actually control Miso and keep the character above the nav. */
.cottage > .miso-wrap {
  top: auto !important;
  bottom: 86px !important;
  left: 51% !important;
  transform: translateX(-50%) !important;
  width: min(30vw, 292px) !important;
  height: min(39vh, 320px) !important;
  overflow: visible !important;
}
.cottage > .miso-wrap > .miso-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* The village should mostly be the illustration, not controls. */
.nell {
  left: 8.5%;
  bottom: 82px;
  width: clamp(88px, 10vw, 128px);
  height: clamp(150px, 18vw, 215px);
}
.nell-name {
  font-size: 11px;
  padding: 3px 8px;
}
.village-panel.village-panel-compact {
  left: 50%;
  bottom: 82px;
  width: min(610px, 58vw);
  min-height: 64px;
  transform: translateX(-50%);
  padding: 8px 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  background: rgba(255,248,231,.89);
  backdrop-filter: blur(5px);
}
.village-panel-head {
  min-width: 88px;
  padding-right: 8px;
  border-right: 1px solid rgba(146,102,62,.28);
}
.village-panel-head strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.05;
}
.village-panel-head span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--ink-soft);
}
.village-actions {
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.village-actions button {
  min-width: 0;
  min-height: 40px;
  padding: 6px 7px;
  font-size: 10.5px;
  line-height: 1.08;
}
.village-speech {
  left: 18%;
  bottom: 280px;
  top: auto;
  max-width: 210px;
  font-size: 12px;
  padding: 9px 12px;
}

/* Snack/feed moment gets an illustrated focal point instead of text only. */
.snack-modal {
  display: grid;
  grid-template-columns: 155px 1fr;
  align-items: center;
  gap: 18px;
}
.snack-art-wrap {
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,249,235,.96), rgba(239,218,182,.92));
  border: 2px solid #d6b57c;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.52), 0 7px 18px rgba(72,42,24,.12);
}
.snack-art {
  width: 126px;
  height: 126px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(58,35,20,.16));
}
.snack-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.snack-actions button {
  min-height: 42px;
  border: 1px solid #c49a62;
  border-radius: 14px;
  padding: 8px 14px;
  background: linear-gradient(#fff7e4,#ead1a8);
  color: var(--ink);
  font-weight: 800;
}

/* Memory Book opens like a two-page illustrated keepsake rather than a generic modal. */
.book-overlay {
  background: rgba(29,19,17,.58);
  backdrop-filter: blur(5px);
}
.memory-book {
  position: relative;
  width: min(920px, 90vw);
  height: min(600px, 78vh);
  display: grid;
  grid-template-columns: 1fr 16px 1fr;
  padding: 18px;
  border-radius: 32px 26px 26px 32px;
  background: linear-gradient(90deg, #6b432b 0 2.2%, #8e5b39 2.2% 97.8%, #5f3b28 97.8%);
  border: 3px solid #4d301f;
  box-shadow: 0 28px 70px rgba(18,11,8,.48), inset 0 0 0 2px rgba(235,194,123,.28);
}
.book-page {
  position: relative;
  overflow: auto;
  padding: 28px 28px 24px;
  color: #4a3326;
  background:
    linear-gradient(90deg, rgba(127,89,50,.06), transparent 10%, transparent 90%, rgba(127,89,50,.05)),
    radial-gradient(circle at 22px 22px, rgba(104,139,76,.10) 0 6px, transparent 7px),
    #fff6df;
  box-shadow: inset 0 0 18px rgba(90,55,29,.09);
}
.book-page-left { border-radius: 18px 3px 3px 18px; }
.book-page-right { border-radius: 3px 18px 18px 3px; }
.book-spine {
  z-index: 2;
  background: linear-gradient(90deg, rgba(62,35,23,.42), rgba(255,235,191,.16), rgba(62,35,23,.42));
  box-shadow: 0 0 12px rgba(49,28,19,.24);
}
.memory-book h2 {
  margin: 18px 0 4px;
  font: 700 clamp(30px, 4vw, 48px)/1 Georgia, "Times New Roman", serif;
  text-align: center;
}
.book-subtitle,
.book-note {
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: #79604b;
}
.book-corner {
  position: absolute;
  top: 15px;
  left: 18px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9a7757;
}
.book-illustration {
  width: 185px;
  height: 185px;
  margin: 24px auto 10px;
  display: grid;
  place-items: center;
}
.book-journal-art {
  width: 175px;
  height: 175px;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(67,42,27,.18));
}
.memory-entry-list {
  display: grid;
  gap: 12px;
  padding-bottom: 58px;
}
.memory-entry {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  padding: 12px 8px 13px;
  border-bottom: 1px solid rgba(129,92,53,.22);
}
.memory-entry h3 {
  margin: 0 0 3px;
  font: 700 18px/1.1 Georgia, "Times New Roman", serif;
}
.memory-entry p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: #705744;
}
.memory-number {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8cf9c;
  border: 1px solid #c8a76f;
  font: 700 11px Georgia, serif;
}
.book-close {
  position: absolute;
  right: 22px;
  bottom: 18px;
  min-height: 40px;
  border: 1px solid #ba8d59;
  border-radius: 14px;
  padding: 8px 14px;
  background: linear-gradient(#fff4dc,#e7cca0);
  color: #503622;
  font-weight: 800;
}

/* Daily Post is intentionally an old island newspaper. */
.newspaper-overlay {
  background: rgba(29,22,17,.54);
  backdrop-filter: blur(4px);
}
.newspaper {
  width: min(880px, 91vw);
  max-height: 82vh;
  overflow: auto;
  padding: 24px 28px 22px;
  color: #34291f;
  background:
    repeating-linear-gradient(0deg, rgba(93,71,43,.025) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 16% 22%, rgba(135,102,59,.07), transparent 24%),
    #eee0bf;
  border: 2px solid #aa8a5d;
  box-shadow: 0 24px 62px rgba(20,14,10,.45), inset 0 0 32px rgba(101,72,42,.10);
  transform: rotate(-.15deg);
}
.newspaper-masthead { text-align: center; }
.newspaper-kicker {
  font: 700 10px/1.2 Georgia, serif;
  letter-spacing: .22em;
}
.newspaper h2 {
  margin: 4px 0 2px;
  font: 900 clamp(38px, 5vw, 62px)/.95 Georgia, "Times New Roman", serif;
  letter-spacing: -.03em;
}
.newspaper-rule {
  border-top: 4px double #3f3023;
  margin: 9px 0 5px;
}
.newspaper-date {
  font: 700 11px/1.2 Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.newspaper-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 16px;
}
.newspaper-columns section {
  min-height: 255px;
  padding: 0 18px;
  border-right: 1px solid rgba(60,45,32,.35);
}
.newspaper-columns section:first-child { padding-left: 0; }
.newspaper-columns section:last-child { border-right: 0; padding-right: 0; }
.newspaper h3 {
  margin: 0 0 8px;
  font: 800 21px/1.02 Georgia, "Times New Roman", serif;
  text-align: center;
}
.newspaper p {
  margin: 7px 0;
  font: 13px/1.45 Georgia, "Times New Roman", serif;
  text-align: justify;
}
.newspaper-dropcap {
  float: left;
  margin: -2px 5px -4px 0 !important;
  font-size: 42px !important;
  line-height: .8 !important;
  font-weight: 800 !important;
}
.newspaper-box {
  margin-top: 14px;
  padding: 10px;
  border: 2px solid #574331;
  font: 12px/1.45 Georgia, serif;
  text-align: center;
}
.newspaper-signoff { font-style: italic !important; }
.newspaper-close {
  display: block;
  margin: 18px auto 0;
  min-height: 40px;
  border: 1px solid #5f4935;
  background: transparent;
  padding: 7px 14px;
  font: 700 12px Georgia, serif;
  color: #34291f;
}

/* iPad landscape tuning. More viewport is available with dvh, so avoid over-shrinking. */
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1400px) {
  .brand.brand-rendered { width: clamp(255px, 27vw, 340px); }
  .daily { top: 94px; transform: none; }
  .status { top: 72px; transform: none; }
  .inventory-panel { top: 340px; transform: none; }
  .cottage > .miso-wrap { bottom: 88px !important; height: min(38vh, 305px) !important; }
  .visual-actions { bottom: 72px; }
  .nav { bottom: max(6px, env(safe-area-inset-bottom)); }
}

@media (orientation: landscape) and (max-height: 680px) {
  .daily { top: 80px; transform: scale(.91); transform-origin: top left; }
  .status { top: 65px; transform: scale(.91); transform-origin: top right; }
  .inventory-panel { top: 285px; transform: scale(.91); transform-origin: top right; }
  .cottage > .miso-wrap { bottom: 74px !important; height: min(37vh, 235px) !important; }
  .visual-actions { bottom: 58px; }
  .village-panel.village-panel-compact { bottom: 70px; transform: translateX(-50%) scale(.92); transform-origin: bottom center; }
  .nell { bottom: 72px; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .memory-book { width: 94vw; height: 82vh; padding: 12px; }
  .book-page { padding: 20px; }
  .newspaper { width: 94vw; }
  .village-panel.village-panel-compact { width: 64vw; }
}

/* =========================================================
   Little Haven v0.4.6 visual hardening
   Remove accidental blur, keep iPad landscape composition,
   enlarge HUD/nav/today, give Village breathing room.
   ========================================================= */

html, body, #app, .stage {
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.stage {
  display: grid;
  place-items: stretch;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.game-frame {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.cottage,
.village,
.forest.explore {
  position: absolute;
  inset: 0;
}

/* Native raster, no whole-layer upscale or CSS filters that soften plates. */
.layer-env,
.cottage > .layer-env,
.village > .layer-env {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  image-rendering: auto;
  filter: none !important;
  transform: none !important;
  pointer-events: none;
}

.brand-art {
  image-rendering: auto;
  filter: drop-shadow(0 5px 9px rgba(34,20,13,.24));
  width: 100%;
  height: auto;
}

.brand.brand-rendered {
  width: clamp(270px, 28vw, 380px);
}

/* Home Miso: padded sprites + wrap that does not crop silhouette. */
.cottage > .miso-wrap {
  left: 50% !important;
  top: auto !important;
  bottom: 102px !important;
  width: min(28vw, 280px) !important;
  height: min(36vh, 300px) !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
}

.cottage > .miso-wrap > .miso-art {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: auto !important;
  height: 108% !important;
  max-width: min(34vw, 340px) !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) !important;
  image-rendering: auto;
}

.cottage > .miso-wrap.pose-curious > .miso-art {
  transform: translateX(-50%) rotate(-2deg) !important;
}

.cottage > .miso-wrap.pose-sleepy {
  width: min(34vw, 340px) !important;
  height: min(28vh, 240px) !important;
}

.speech {
  left: 58%;
  top: auto;
  bottom: 42%;
  transform: none;
  max-width: 200px;
  font-size: clamp(13px, 1.15vw, 16px);
  z-index: 8;
}

/* Currency bar — readable at iPad viewing distance. */
.currencies {
  top: clamp(12px, 1.4vh, 18px);
  min-height: 56px;
  gap: clamp(16px, 1.8vw, 26px);
  padding: 7px 16px 7px 14px;
  transform: none !important;
}

.currency {
  gap: 8px;
  min-width: 92px;
  font-size: clamp(16px, 1.55vw, 20px);
}

.currency-art {
  width: 38px;
  height: 38px;
}

.currency button {
  width: 28px;
  height: 28px;
  font-size: 18px;
}

/* Bottom navigation — substantial but not dominant. */
.nav {
  bottom: max(8px, env(safe-area-inset-bottom));
  width: min(calc(100% - 28px), 920px);
  padding: 8px 12px;
  gap: clamp(6px, .8vw, 12px);
  transform: none !important;
}

.nav-btn {
  width: 112px;
  min-height: 72px;
  padding: 7px 6px 8px;
}

.nav-art {
  width: 44px;
  height: 44px;
}

.nav-btn span.label {
  font-size: clamp(11px, 1.05vw, 13px);
}

/* Today panel list scale. */
.daily {
  width: clamp(248px, 22vw, 310px);
  top: clamp(108px, 12.6vh, 132px);
  padding: 16px 15px 14px;
  transform: none !important;
}

.daily h2 {
  font-size: clamp(22px, 2.1vw, 28px);
}

.task {
  grid-template-columns: 44px 1fr 28px;
  min-height: 52px;
  gap: 10px;
  padding: 7px 4px;
  font-size: clamp(13px, 1.25vw, 16px);
}

.task-icon,
.task-art {
  width: 42px;
  height: 42px;
  overflow: visible;
  object-fit: contain;
}

.check {
  width: 24px;
  height: 24px;
  font-size: 16px;
}

.status,
.inventory-panel {
  transform: none !important;
}

.visual-actions {
  bottom: 92px;
  transform: none !important;
}

/* Village: environment first. */
.nell {
  left: 7%;
  bottom: 96px;
  width: clamp(72px, 8.2vw, 108px);
  height: clamp(124px, 15vw, 186px);
  z-index: 7;
}

.nell-name {
  font-size: 10px;
  padding: 2px 7px;
  opacity: .92;
}

.village-panel.village-panel-compact {
  left: 50%;
  bottom: 92px;
  width: min(640px, 56vw);
  min-height: 56px;
  padding: 6px 10px;
  transform: translateX(-50%) !important;
  background: rgba(255,248,231,.82);
  backdrop-filter: none;
}

.village-actions button {
  min-height: 38px;
  font-size: 11px;
  padding: 5px 6px;
}

.village-speech {
  left: 16%;
  bottom: 292px;
  max-width: 190px;
  font-size: 13px;
  padding: 8px 12px;
}

@media (orientation: landscape) and (min-width: 1000px) {
  .daily,
  .status,
  .inventory-panel,
  .currencies,
  .nav,
  .visual-actions {
    transform: none !important;
  }
}

@media (orientation: landscape) and (max-height: 760px) {
  .cottage > .miso-wrap {
    bottom: 90px !important;
    height: min(34vh, 250px) !important;
  }
  .speech { bottom: 38%; }
  .visual-actions { bottom: 80px; }
  .nell { bottom: 88px; }
  .village-panel.village-panel-compact { bottom: 84px; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .cottage > .miso-wrap {
    bottom: 78px !important;
    height: min(32vh, 200px) !important;
  }
  .nav-btn { min-height: 60px; }
  .nav-art { width: 36px; height: 36px; }
  .task { min-height: 42px; }
  .task-icon, .task-art { width: 34px; height: 34px; }
}


/* =========================================================
   Little Haven v0.4.8 pretest polish
   ========================================================= */

.village > .layer-env {
  object-fit: cover;
  object-position: center 46%;
  image-rendering: auto;
  filter: none !important;
  transform: none !important;
}

.currencies {
  min-height: 64px;
  gap: clamp(20px, 2.2vw, 32px);
  padding: 8px 18px;
}
.currency { font-size: clamp(18px, 1.7vw, 22px); min-width: 102px; gap: 10px; }
.currency-art { width: 46px; height: 46px; }
.currency button { width: 30px; height: 30px; }

.cottage > .miso-wrap {
  filter: drop-shadow(0 18px 16px rgba(42, 28, 18, .38));
}
.cottage > .miso-wrap::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 2%;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(42,28,18,.42), rgba(42,28,18,0) 70%);
  z-index: -1;
  pointer-events: none;
}

.snack-modal { grid-template-columns: 230px 1fr; }
.snack-art-wrap { width: 220px; height: 220px; }
.snack-art { width: 200px; height: 200px; }
.shop-art-large, .shop-art-large .snack-art, .shop-art-large .item-art {
  width: 92%;
  height: 92%;
  min-height: 128px;
}

.modal, .memory-book, .newspaper { position: relative; }
.modal-x {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border: 1px solid #c9a56e;
  border-radius: 50%;
  background: rgba(255,248,232,.94);
  color: #4a3426;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}
.newspaper .modal-x,
.memory-book .modal-x { top: 12px; right: 14px; }

.dialogue-bubble {
  left: 15%;
  bottom: 300px;
  max-width: 240px;
  padding: 10px 14px 12px;
  text-align: left;
  border-radius: 18px 18px 18px 6px;
}
.dialogue-name {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8a5a32;
  margin-bottom: 4px;
}
.dialogue-bubble p { margin: 0; }
.talk-btn {
  background: linear-gradient(#fff8e4, #f0d7a4) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 2px 0 rgba(120,80,40,.18);
}

.memory-book {
  box-shadow:
    18px 22px 0 rgba(62, 36, 22, .18),
    0 28px 70px rgba(18,11,8,.48),
    inset 0 0 0 2px rgba(235,194,123,.28);
}
.book-spine {
  width: 22px;
  background:
    linear-gradient(90deg,
      rgba(42,24,16,.55) 0%,
      rgba(120,78,46,.9) 18%,
      rgba(255,230,180,.28) 48%,
      rgba(90,52,32,.85) 82%,
      rgba(42,24,16,.55) 100%);
  box-shadow: inset 4px 0 10px rgba(0,0,0,.25), inset -4px 0 10px rgba(0,0,0,.25);
}
.book-page {
  box-shadow: inset 0 0 28px rgba(90,55,29,.12), 4px 0 12px rgba(40,22,12,.08);
}
.book-page-left { box-shadow: inset -10px 0 18px rgba(70,40,20,.10); }
.book-page-right { box-shadow: inset 10px 0 18px rgba(70,40,20,.10); }


/* =========================================================
   Little Haven v0.4.9 pretest polish
   ========================================================= */

.village > .layer-env {
  object-fit: contain;
  object-position: center center;
  background: #87c2e6;
  image-rendering: auto;
  filter: none !important;
  transform: none !important;
}

.nell {
  left: 11%;
  bottom: 108px;
  width: clamp(108px, 12.5vw, 168px);
  height: clamp(176px, 22vw, 268px);
  z-index: 14;
  filter: drop-shadow(0 10px 12px rgba(30,18,12,.45));
}
.nell-name {
  font-size: 12px;
  padding: 3px 9px;
  background: rgba(255,248,230,.96);
  border: 1px solid #c9a66f;
  box-shadow: 0 2px 6px rgba(40,24,14,.18);
}

.cottage > .miso-wrap {
  filter:
    drop-shadow(6px 4px 0 rgba(255, 214, 150, .18))
    drop-shadow(-5px 2px 0 rgba(80, 50, 30, .12))
    drop-shadow(0 20px 18px rgba(42, 28, 18, .42));
}
.cottage > .miso-wrap > .miso-art {
  filter: contrast(1.04) saturate(1.06);
}
.cottage > .miso-wrap::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(32,20,12,.48), rgba(32,20,12,0) 72%);
  z-index: -1;
}

.memory-paw {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8cf9c;
  border: 1px solid #c8a76f;
  font-size: 16px;
}

.letter-overlay { background: rgba(29,19,17,.56); }
.letter-sheet {
  position: relative;
  width: min(560px, 88vw);
  padding: 28px 36px 32px;
  background:
    linear-gradient(180deg, rgba(255,251,240,.98), #f3e2c0);
  border: 2px solid #d0b07a;
  box-shadow: 0 22px 50px rgba(30,18,12,.4), inset 0 0 0 6px rgba(255,255,255,.35);
  color: #4a3426;
  transform: rotate(-0.4deg);
}
.letter-envelope {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #c9a66f;
}
.letter-stamp {
  width: 46px;
  height: 52px;
  display: grid;
  place-items: center;
  background: #f4d7c0;
  border: 2px dashed #b07050;
  font: 800 14px Georgia, serif;
  color: #7a3d28;
}
.letter-postmark {
  font: 700 11px Georgia, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7a5a3c;
}
.letter-sheet h2 { font: 700 30px/1.1 Georgia, serif; margin: 0 0 8px; }
.letter-address, .letter-signoff { font-family: Georgia, serif; font-style: italic; }
.letter-body { font: 16px/1.5 Georgia, serif; }
.letter-note { font-size: 13px; color: #6b5342; }


/* =========================================================
   Little Haven v0.5.0 — pop-up storybook direction
   Painted page stays 2D. Miso is the lifted pop-up hero.
   ========================================================= */

.storybook-page > .layer-env {
  filter: none !important;
  transform: none !important;
}

.cottage.storybook-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(48,28,16,.16), transparent 8%, transparent 92%, rgba(48,28,16,.16)),
    linear-gradient(180deg, rgba(255,244,214,.06), transparent 12%);
}

.cottage > .miso-wrap.popup-hero {
  z-index: 9;
  overflow: visible !important;
  animation: misoIdle 4.6s ease-in-out infinite;
  filter:
    drop-shadow(-10px 6px 0 rgba(90, 52, 28, .10))
    drop-shadow(8px 10px 0 rgba(255, 214, 150, .16))
    drop-shadow(0 22px 20px rgba(36, 22, 14, .40));
}

.cottage > .miso-wrap.popup-hero > .miso-art {
  position: relative;
  z-index: 2;
  filter: contrast(1.05) saturate(1.07) brightness(1.02);
}

.miso-volume {
  position: absolute;
  inset: 8% 18% 10%;
  z-index: 3;
  pointer-events: none;
  border-radius: 46% 48% 40% 42%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,236,200,.22), transparent 36%),
    linear-gradient(115deg, transparent 40%, rgba(40,24,14,.16) 100%);
  mix-blend-mode: soft-light;
}

.miso-ground {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: -2%;
  height: 28px;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(28,16,10,.50), rgba(28,16,10,0) 70%);
}

@keyframes misoIdle {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

.cottage > .miso-wrap.popup-hero.pose-sleepy {
  animation-duration: 6.2s;
}
.cottage > .miso-wrap.popup-hero.pose-excited {
  animation-duration: 1.8s;
}

.nell {
  filter: drop-shadow(0 10px 10px rgba(30,18,12,.28));
}

.panel, .daily, .status, .inventory-panel {
  box-shadow:
    0 10px 22px rgba(50,29,18,.18),
    inset 0 0 0 2px rgba(255,255,255,.38),
    0 1px 0 rgba(90,55,30,.12);
}

@media (prefers-reduced-motion: reduce) {
  .cottage > .miso-wrap.popup-hero { animation: none !important; }
}


/* =========================================================
   Little Haven v0.5.2 — responsive scene hardening
   ========================================================= */

html, body, #app, .stage, .game-frame {
  overflow: hidden;
}

.village {
  position: absolute;
  inset: 0;
  background: #2d2018;
}

.village-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.village-scene > .layer-env,
.village > .village-scene > .layer-env {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 52%;
  image-rendering: auto;
  filter: none !important;
  transform: none !important;
  background: none;
}

.village-scene .hotspot { position: absolute; z-index: 5; }

.village-scene .nell {
  position: absolute;
  left: 9%;
  top: auto;
  bottom: 17%;
  width: clamp(100px, 12vw, 156px);
  height: clamp(164px, 21vw, 250px);
  z-index: 8;
}

.village-scene .village-speech,
.village-scene .dialogue-bubble {
  position: absolute;
  left: 20%;
  bottom: 38%;
  top: auto;
  height: auto;
  max-height: none;
  width: min(260px, 32%);
  min-width: 150px;
  max-width: 280px;
  padding: 10px 14px 12px;
  overflow: visible;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  z-index: 9;
}
.village-scene .dialogue-bubble p {
  margin: 0;
  white-space: normal;
}

.village-scene .village-panel.village-panel-compact {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: calc(12% + 8px);
  transform: translateX(-50%) !important;
  width: min(620px, 58%);
  z-index: 10;
}

.nav {
  left: 50%;
  bottom: max(14px, calc(env(safe-area-inset-bottom) + 12px)) !important;
  transform: translateX(-50%) !important;
  width: min(calc(100% - 32px), 920px) !important;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  flex-wrap: nowrap;
  overflow: visible;
  z-index: 24;
}

.memory-toast {
  bottom: calc(max(14px, env(safe-area-inset-bottom) + 12px) + 92px) !important;
  z-index: 22;
}

.cottage > .miso-wrap.popup-hero {
  filter:
    drop-shadow(-10px 6px 0 rgba(90, 52, 28, .12))
    drop-shadow(8px 12px 0 rgba(255, 214, 150, .18))
    drop-shadow(0 26px 22px rgba(36, 22, 14, .48));
}
.cottage > .miso-wrap.popup-hero .miso-ground {
  height: 32px;
  background: radial-gradient(ellipse at center, rgba(28,16,10,.58), rgba(28,16,10,0) 72%);
}

@media (max-height: 720px) and (orientation: landscape) {
  .village-scene .nell { bottom: 20%; height: clamp(140px, 24vh, 210px); }
  .village-scene .village-speech { bottom: 42%; }
  .village-scene .village-panel.village-panel-compact { bottom: calc(14% + 4px); }
}

/* =========================================================
   Little Haven v0.5.2 — iPad Safari interaction clearance
   Reserve space above the persistent world navigation so
   scene controls remain visible and touchable with Safari UI.
   ========================================================= */
:root {
  --lh-nav-bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px));
  --lh-nav-height: 86px;
  --lh-nav-gap: 12px;
  --lh-controls-bottom: calc(var(--lh-nav-bottom) + var(--lh-nav-height) + var(--lh-nav-gap));
}

/* Use the actually visible Safari viewport rather than classic 100vh. */
.stage,
.game-frame {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
}

.game-frame {
  width: min(calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)), 1366px);
}

/* Persistent navigation owns a predictable safe bottom zone. */
.nav {
  bottom: var(--lh-nav-bottom) !important;
  min-height: 72px;
  z-index: 30;
}

/* Home controls must live above the nav, never behind it. */
.visual-actions,
.actions-bar.visual-actions {
  bottom: var(--lh-controls-bottom) !important;
  z-index: 31;
}

.cottage > .miso-wrap.popup-hero {
  bottom: calc(var(--lh-controls-bottom) + 44px) !important;
}

/* Notifications stack above the action/nav zone. */
.memory-toast {
  bottom: calc(var(--lh-controls-bottom) + 58px) !important;
  z-index: 32;
}

/* Village interaction geometry shares the same reserved bottom zone. */
.village-scene .village-panel.village-panel-compact {
  bottom: var(--lh-controls-bottom) !important;
  z-index: 31;
}

.village-scene .nell {
  bottom: calc(var(--lh-controls-bottom) + 56px) !important;
}

.village-scene .village-speech,
.village-scene .dialogue-bubble {
  bottom: calc(var(--lh-controls-bottom) + 210px) !important;
}

/* Compact iPad/Safari landscape: retain readable controls while lifting them. */
@media (orientation: landscape) and (max-height: 850px) {
  :root {
    --lh-nav-height: 78px;
    --lh-nav-gap: 10px;
  }

  .nav {
    width: min(calc(100% - 28px), 900px) !important;
    padding: 6px 10px;
  }

  .nav-btn {
    min-height: 60px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .nav-art {
    width: 34px;
    height: 34px;
  }

  .cottage > .miso-wrap.popup-hero {
    bottom: calc(var(--lh-controls-bottom) + 38px) !important;
    height: min(34vh, 245px) !important;
  }

  .visual-actions,
  .actions-bar.visual-actions {
    bottom: var(--lh-controls-bottom) !important;
  }

  .village-scene .village-panel.village-panel-compact {
    bottom: var(--lh-controls-bottom) !important;
  }

  .village-scene .nell {
    bottom: calc(var(--lh-controls-bottom) + 50px) !important;
    height: clamp(136px, 22vh, 205px);
  }

  .village-scene .village-speech,
  .village-scene .dialogue-bubble {
    bottom: calc(var(--lh-controls-bottom) + 180px) !important;
  }

  .memory-toast {
    bottom: calc(var(--lh-controls-bottom) + 54px) !important;
  }
}

/* Very short landscape windows need a compact but still touchable dock. */
@media (orientation: landscape) and (max-height: 680px) {
  :root {
    --lh-nav-height: 70px;
    --lh-nav-gap: 8px;
  }

  .nav-btn {
    min-height: 54px;
  }

  .nav-art {
    width: 30px;
    height: 30px;
  }

  .nav-btn span.label {
    font-size: 11px;
  }

  .cottage > .miso-wrap.popup-hero {
    bottom: calc(var(--lh-controls-bottom) + 34px) !important;
    height: min(31vh, 205px) !important;
  }

  .village-scene .nell {
    bottom: calc(var(--lh-controls-bottom) + 44px) !important;
    height: clamp(122px, 20vh, 178px);
  }

  .village-scene .village-speech,
  .village-scene .dialogue-bubble {
    bottom: calc(var(--lh-controls-bottom) + 150px) !important;
  }
}

/* =========================================================
   Little Haven v0.5.3 — Forest + Memory Book responsive fix
   Keep the approved v0.5.2 Home composition unchanged.
   ========================================================= */

/* Forest now uses the full responsive scene canvas just like Village.
   The illustration may crop at the outer edges, but it may never letterbox. */
.forest.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #1a261c;
}

.forest.scene .forest-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  overflow: hidden;
}

.forest.scene .forest-canvas > .layer-env,
.forest.explore .layer-env,
.forest-door .layer-env {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Keep the entrance doorway/path centered as the focal point on wide iPad views. */
.forest.scene[data-node="entrance"] .layer-env,
.forest-door .layer-env {
  object-position: 48% 50%;
}

/* Forest overlays share the same reserved navigation clearance as Home/Village. */
.forest.scene .speech {
  position: absolute;
  left: 50% !important;
  right: auto;
  top: auto !important;
  bottom: calc(var(--lh-controls-bottom) + 34px) !important;
  transform: translateX(-50%) !important;
  width: max-content;
  max-width: min(320px, 72vw);
  min-width: 150px;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  z-index: 28;
}

.forest.scene .forest-panel {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: calc(var(--lh-controls-bottom) + 30px);
  transform: translateX(-50%);
  margin: 0;
  width: min(420px, calc(100% - 36px));
  max-height: calc(100% - var(--lh-controls-bottom) - 110px);
  overflow: auto;
  z-index: 27;
}

.forest.scene .forest-minihud {
  top: max(12px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
}

/* If Miso is present in a Forest node, keep the character above the nav zone. */
.forest.scene .forest-miso-art {
  bottom: calc(var(--lh-controls-bottom) + 18px);
}

.forest.scene .forest-miso-pet-control {
  bottom: calc(var(--lh-controls-bottom) + 130px);
}

/* Empty Memory Book entries should use the right page, not the paw-marker column. */
.memory-entry.empty {
  display: block;
  width: 100%;
  padding: 18px 10px 20px;
  box-sizing: border-box;
}

.memory-entry.empty > div {
  width: min(100%, 420px);
  max-width: 100%;
}

.memory-entry.empty h3 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.08;
}

.memory-entry.empty p {
  max-width: 34ch;
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.45;
}

@media (orientation: landscape) and (max-height: 850px) {
  .forest.scene .speech {
    bottom: calc(var(--lh-controls-bottom) + 24px) !important;
    max-width: min(300px, 70vw);
  }

  .forest.scene .forest-panel {
    bottom: calc(var(--lh-controls-bottom) + 22px);
    max-height: calc(100% - var(--lh-controls-bottom) - 90px);
  }

  .forest.scene .forest-miso-art {
    bottom: calc(var(--lh-controls-bottom) + 12px);
  }

  .forest.scene .forest-miso-pet-control {
    bottom: calc(var(--lh-controls-bottom) + 106px);
  }

  .memory-entry.empty {
    padding-top: 10px;
  }
}


/* =========================================================
   Little Haven v0.5.4 — Cloudflare/iPad hardening
   Forest full-viewport + Memory Book empty-state correction.
   Home composition remains locked.
   ========================================================= */

/* The Forest scene and its image canvas must occupy the complete game frame.
   !important is intentional here to neutralize legacy 4:3 sizing rules. */
.forest.scene,
.forest.scene.explore,
.forest.scene.forest-door {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #1a261c;
}

.forest.scene > .forest-canvas,
.forest.scene .forest-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}

.forest.scene .forest-canvas > img.layer-env,
.forest.scene > .forest-canvas > img.layer-env,
.forest.scene img.layer-env {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 48% 50% !important;
  margin: 0 !important;
  transform: none !important;
  filter: none !important;
}

/* Keep forest dialogue clear of the persistent navigation on Safari. */
.forest.scene > .speech,
.forest.scene .speech {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(var(--lh-controls-bottom) + 24px) !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  min-width: 160px;
  max-width: min(340px, calc(100vw - 48px)) !important;
  height: auto !important;
  max-height: none !important;
  white-space: normal !important;
  overflow: visible !important;
  z-index: 40 !important;
}

/* Dedicated empty-state markup avoids the memory-entry grid's paw-marker column. */
.book-page-right .memory-entry-list {
  width: 100%;
  min-width: 0;
}

.book-page-right .memory-empty-state {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box;
  padding: 18px 14px 24px !important;
  margin: 0 !important;
}

.book-page-right .memory-empty-state h3 {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 12px;
  font: 700 clamp(24px, 2.4vw, 34px)/1.12 Georgia, "Times New Roman", serif;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.book-page-right .memory-empty-state p {
  display: block;
  width: min(100%, 38ch);
  max-width: 100%;
  margin: 0;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

@media (orientation: landscape) and (max-height: 850px) {
  .forest.scene > .speech,
  .forest.scene .speech {
    bottom: calc(var(--lh-controls-bottom) + 18px) !important;
  }

  .book-page-right .memory-empty-state {
    padding-top: 10px !important;
  }
}

/* v0.5.4.4 — brief storybook page transition.  It runs only on navigation events. */
.lh-scene-enter {
  animation: lh-scene-enter 190ms ease-out both;
}
@keyframes lh-scene-enter {
  from { opacity: .84; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lh-scene-enter { animation: none !important; }
}