.story-shelf { grid-template-columns: repeat(3, minmax(0, 330px)); }
.story-book-house .story-book-art {
  background-image: url('assets/house/spring.webp');
  background-position: center;
}

.house-mode {
  width: 100vw;
  max-width: none;
  max-height: none;
  min-height: 100dvh;
  background: #17223d;
}
.house-mode > .topbar,
.house-mode > .shade,
.house-mode > .fireflies,
.house-mode > .story-card,
.house-mode > .scene-art,
.house-mode > .choices,
.house-mode > .next-button { display: none !important; }

.house-game {
  position: absolute;
  inset: 0;
  z-index: 55;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #17223d;
  touch-action: manipulation;
  user-select: none;
}
.house-topbar {
  position: absolute;
  z-index: 180;
  top: max(8px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.house-topbar button { pointer-events: auto; }
.house-round {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  padding: 0;
  border: 2px solid #ffffff88;
  border-radius: 50%;
  background: #182541c2;
  color: white;
  font-size: 1.3rem;
  box-shadow: 0 6px 18px #0007;
  backdrop-filter: blur(8px);
}
.house-progress {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.house-progress i {
  width: 11px;
  height: 11px;
  border: 2px solid #fff9;
  border-radius: 50%;
  background: #ffffff55;
  box-shadow: 0 2px 6px #0007;
  transition: width .35s, background .35s;
}
.house-progress i.active {
  width: 34px;
  border-radius: 8px;
  background: #ffe16e;
}

.house-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, calc(100dvh * 1.7779));
  height: max(100dvh, calc(100vw / 1.7779));
  transform: translate(-50%, -50%);
  overflow: hidden;
  background-color: #94cef2;
  background-image: var(--house-activity-image);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  isolation: isolate;
}
.house-scene.season-spring {
  --house-activity-image: url('assets/house/spring.webp');
  --house-greeting-image: url('assets/house/spring-greeting.webp');
}
.house-scene.season-summer {
  --house-activity-image: url('assets/house/summer.webp');
  --house-greeting-image: url('assets/house/summer-greeting.webp');
}
.house-scene.season-autumn {
  --house-activity-image: url('assets/house/autumn.webp');
  --house-greeting-image: url('assets/house/autumn-greeting.webp');
}
.house-scene.season-winter,
.house-scene.season-finale {
  --house-activity-image: url('assets/house/winter.webp');
  --house-greeting-image: url('assets/house/winter-greeting.webp');
}
.house-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transition: background .7s, opacity .7s;
}
.house-scene.season-spring::before { background: linear-gradient(180deg, #ffffff00 72%, #ffb8d50c); }
.house-scene.season-summer::before { background: radial-gradient(circle at 82% 5%, #fff9a838, transparent 30%); mix-blend-mode: screen; }
.house-scene.season-autumn::before { background: linear-gradient(135deg, #d555120e, transparent 54%, #7b2c1512); mix-blend-mode: multiply; }
.house-scene.season-winter::before { background: linear-gradient(180deg, #183a6b18, transparent 55%, #eaf7ff1c); mix-blend-mode: multiply; }
.house-scene.season-finale::before { background: radial-gradient(circle at 50% 48%, #fff7b566, transparent 43%), linear-gradient(#1a2f654c, #1d163269); }
.house-scene.season-change { animation: seasonTurn .9s cubic-bezier(.2,.75,.25,1); }
@keyframes seasonTurn {
  0% { opacity: .25; filter: blur(9px) brightness(1.65); transform: translate(-50%, -50%) scale(1.045); }
  100% { opacity: 1; filter: none; transform: translate(-50%, -50%) scale(1); }
}

.house-weather,
.house-windows { position: absolute; inset: 0; }
.house-weather { z-index: 8; pointer-events: none; overflow: hidden; }
.house-windows { z-index: 20; pointer-events: none; }
.weather-particle {
  position: absolute;
  top: -12%;
  color: white;
  filter: drop-shadow(0 3px 3px #0003);
  opacity: .88;
  animation: weatherFall var(--fall-time, 6s) linear infinite;
  animation-delay: var(--fall-delay, 0s);
}
.season-summer .weather-particle { animation-name: summerFloat; opacity: .7; }
.season-spring .weather-particle { animation-name: springDrift; }
@keyframes weatherFall { to { translate: var(--drift, 40px) 125vh; rotate: 460deg; } }
@keyframes summerFloat { 0%,100% { translate: 0 0; scale: .7; opacity: .25; } 50% { translate: var(--drift, 32px) 70vh; scale: 1.2; opacity: .9; } }
@keyframes springDrift { to { translate: var(--drift, 70px) 116vh; rotate: 240deg; } }

.house-window {
  position: absolute;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: box-shadow .3s, transform .18s;
}
.house-window:active { transform: scale(.97); }
.house-window::after {
  content: '';
  position: absolute;
  z-index: 11;
  inset: 0;
  border: 2px solid #fff3aa00;
  border-radius: 7px;
  animation: houseWindowHint 2.2s ease-in-out infinite;
  pointer-events: none;
}
.house-window.open { box-shadow: 0 0 0 3px #fff3a822, 0 0 22px #fff6a970; }
.house-window.open::after { display: none; }
.house-window.talking {
  z-index: 12;
  transform: scale(1.045);
  background: transparent;
  box-shadow: 0 0 0 3px #fff7ba88, 0 0 32px #fff6a9;
  animation: windowLooksOut .7s cubic-bezier(.2,.85,.3,1.2);
}
@keyframes windowLooksOut { 35% { transform: scale(1.075) rotate(-.5deg); } 70% { transform: scale(1.035) rotate(.5deg); } }
@keyframes houseWindowHint { 50% { border-color: #fff3aa9c; box-shadow: inset 0 0 18px #fff3aa35; } }
.house-greeting {
  position: absolute;
  z-index: 8;
  inset: 0;
  background-image: var(--house-greeting-image);
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .22s ease, transform .5s cubic-bezier(.2,.85,.25,1);
  pointer-events: none;
}
.house-window.talking .house-greeting {
  opacity: 1;
  transform: scale(1);
}
.house-curtain {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  width: 51%;
  background:
    linear-gradient(90deg, #ffffff20, transparent 24% 75%, #641f3b26),
    repeating-linear-gradient(90deg, #e96891 0 12%, #f59fba 12% 24%);
  box-shadow: inset 0 0 12px #5f173659;
  transition: transform .72s cubic-bezier(.2,.85,.25,1);
}
.house-curtain { display: none; }
.season-summer .house-curtain { filter: hue-rotate(36deg) saturate(1.1); }
.season-autumn .house-curtain { filter: hue-rotate(-38deg) saturate(1.18); }
.season-winter .house-curtain { filter: hue-rotate(158deg) saturate(.75) brightness(.92); }
.house-curtain.left { left: 0; transform-origin: left; }
.house-curtain.right { right: 0; transform-origin: right; }
.house-window.open .house-curtain.left { transform: translateX(-94%) scaleX(.18); }
.house-window.open .house-curtain.right { transform: translateX(94%) scaleX(.18); }
.house-window.shop .house-curtain {
  background:
    linear-gradient(#e9f7ffcf, #7bc7e8c9),
    repeating-linear-gradient(90deg, #fff9 0 18%, #9bd5ec88 18% 36%);
}
.house-window.shop .house-curtain.left,
.house-window.shop .house-curtain.right { width: 50%; }
.house-shop-icon {
  position: absolute;
  z-index: 6;
  left: 14%;
  top: 15%;
  transform: translate(-50%, -50%);
  font-size: clamp(1rem, 2.8vw, 2rem);
  filter: drop-shadow(0 3px 5px #0007);
  transition: opacity .25s, transform .45s;
}
.house-shop-icon,
.house-activity { display: none; }
.house-window.open .house-shop-icon { opacity: .88; transform: translate(-50%, -50%) scale(.92); }
.house-activity {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 2%;
  transform: translate(-50%, 0) scale(.72);
  opacity: .9;
  font-size: clamp(1.55rem, 4.8vw, 3.6rem);
  filter: drop-shadow(0 4px 5px #0008);
  transition: transform .65s .24s cubic-bezier(.2,.9,.25,1.25), opacity .3s .24s;
  pointer-events: none;
}
.house-window.open .house-activity { opacity: 1; transform: translate(-50%, -5%) scale(1); }
.house-window.talking .house-activity { animation: activityTalk .48s ease-in-out 2 .85s; }
@keyframes activityTalk { 50% { translate: 0 -10%; rotate: -5deg; scale: 1.12; } }
.house-pop {
  position: absolute;
  z-index: 170;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-size: clamp(2rem, 5vw, 4rem);
  filter: drop-shadow(0 5px 6px #0007);
  animation: housePop .86s ease-out forwards;
}
@keyframes housePop {
  0% { opacity: 0; scale: .3; }
  38% { opacity: 1; scale: 1.16; }
  100% { opacity: 0; translate: 0 -58px; scale: .82; }
}

.house-next {
  position: absolute;
  z-index: 150;
  right: max(3%, calc((100% - 100vw) / 2 + env(safe-area-inset-right) + 10px));
  bottom: max(4%, calc((100% - 100dvh) / 2 + env(safe-area-inset-bottom) + 10px));
  display: grid;
  place-items: center;
  width: clamp(68px, 9vw, 104px);
  height: clamp(68px, 9vw, 104px);
  padding: 0;
  border: 4px solid white;
  border-radius: 50%;
  background: #ffd850;
  box-shadow: 0 0 0 9px #ffd85043, 0 9px 30px #0008;
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  pointer-events: auto;
  cursor: pointer;
  animation: houseNextPulse 1.25s ease-in-out infinite;
}
@keyframes houseNextPulse { 50% { scale: 1.1; box-shadow: 0 0 0 17px #ffd8501e, 0 9px 32px #0008; } }

.house-final {
  position: absolute;
  z-index: 165;
  left: 50%;
  bottom: max(4%, calc((100% - 100dvh) / 2 + env(safe-area-inset-bottom) + 10px));
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
}
.house-final button {
  display: grid;
  place-items: center;
  width: clamp(70px, 9vw, 104px);
  height: clamp(70px, 9vw, 104px);
  padding: 0;
  border: 4px solid white;
  border-radius: 50%;
  background: #ffd850;
  box-shadow: 0 9px 30px #0008;
  font-size: clamp(2.3rem, 6vw, 4.4rem);
}
.house-final button:last-child { background: #88dcba; }
.house-scene.season-finale .house-window { border-color: #fff6b3; box-shadow: 0 0 24px #ffe26c; }

@media (orientation: landscape) and (max-height: 520px) {
  .story-library { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .story-shelf { width: min(96vw, 860px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .story-book { width: 100%; height: auto; aspect-ratio: 1.18; }
  .story-book strong { padding-right: 40px; font-size: clamp(.8rem, 3.3vh, 1.05rem); }
  .house-round { width: 44px; height: 44px; flex-basis: 44px; }
  .house-window { border-width: 2px; }
}

@media (orientation: portrait) {
  .story-shelf { grid-template-columns: minmax(0, 430px); }
  .house-scene { width: max(100vw, calc(100dvh * 1.7779)); height: max(100dvh, calc(100vw / 1.7779)); }
}

@media (prefers-reduced-motion: reduce) {
  .house-scene.season-change,
  .weather-particle,
  .house-next,
  .house-window::after,
  .house-window.talking .house-activity { animation: none; }
}