:root {
  --home-ink: #0d1010;
  --home-surface: rgba(19, 22, 22, 0.9);
  --home-line: rgba(239, 202, 117, 0.22);
  --home-cream: #f6eee2;
  --home-muted: #bdb2a3;
  --home-gold: #e0b353;
  --home-gold-bright: #ffd879;
  --home-wood-dark: #2c1e17;
  --home-wood: #69492f;
  --home-cork: #8e6a48;
  --home-stone: #6f6a61;
  --home-ceramic: #c9bda8;
  --home-track-duration: 980ms;
}

html, body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--home-ink);
}

body {
  min-width: 320px;
  color: var(--home-cream);
  overscroll-behavior: none;
}

.homeApp {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 680px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: var(--home-cream);
  background:
    radial-gradient(circle at 48% -10%, rgba(224, 179, 83, .17), transparent 37%),
    linear-gradient(150deg, #161a19, #0b0e0f 68%);
}

button, input { font: inherit; }

.homeApp button:focus-visible,
.homeApp input:focus-visible {
  outline: 3px solid var(--home-gold-bright);
  outline-offset: 3px;
}

.homeTopbar {
  position: relative;
  z-index: 100;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(680px, 1.55fr);
  align-items: center;
  gap: clamp(16px, 2.2vw, 36px);
  padding: 14px clamp(18px, 2.4vw, 38px) 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  background: linear-gradient(180deg, rgba(16, 19, 19, .97), rgba(16, 19, 19, .86));
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
}

.homeBrand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.homeMark {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 8px;
  overflow: visible;
  color: var(--home-gold);
  border: 1px solid rgba(224, 179, 83, .42);
  border-radius: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: rgba(224, 179, 83, .07);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .3));
}

.homeBrand h1 {
  margin: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.homeBrand p {
  margin: 5px 0 0;
  overflow: hidden;
  color: var(--home-muted);
  font-size: .77rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.needsHud {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(104px, 1fr));
  gap: 8px;
}

.needMeter {
  --need-value: 50%;
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 1px rgba(255, 255, 255, .03);
}

.needMeter svg {
  width: 25px;
  height: 25px;
  padding: 5px;
  overflow: visible;
  color: var(--home-gold);
  border-radius: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: rgba(224, 179, 83, .1);
}

.needMeter > div { min-width: 0; }
.needMeter span { display: block; overflow: hidden; color: #d8cec1; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.needMeter strong { color: #f2ce7a; font-size: .7rem; font-variant-numeric: tabular-nums; }
.needMeter i { display: block; height: 4px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.needMeter i b { display: block; width: var(--need-value); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a67d32, var(--home-gold-bright)); box-shadow: 0 0 9px rgba(255, 216, 121, .26); transition: width 420ms ease; }

.homeStage {
  min-width: 0;
  min-height: 0;
  padding: 10px clamp(12px, 1.6vw, 26px) 8px;
}

.homeViewport {
  position: relative;
  width: min(1540px, 100%);
  height: 100%;
  min-height: 420px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(224, 179, 83, .32);
  border-radius: 30px;
  background: #241f1a;
  box-shadow:
    0 32px 70px rgba(0, 0, 0, .42),
    inset 0 1px rgba(255, 255, 255, .06);
}

.homeViewport::after {
  content: "";
  position: absolute;
  z-index: 75;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 85px rgba(0, 0, 0, .38);
}

.homeWorld {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 300%;
  height: 200%;
  transform: translate3d(-33.333333%, 0, 0);
  transition: transform var(--home-track-duration) cubic-bezier(.2, .72, .18, 1), top var(--home-track-duration) cubic-bezier(.2, .72, .18, 1);
  will-change: transform;
}

.homeApp[data-room="kitchen"] .homeWorld { transform: translate3d(0, 0, 0); }
.homeApp[data-room="bedroom"] .homeWorld { transform: translate3d(-33.333333%, 0, 0); }
.homeApp[data-room="playroom"] .homeWorld { transform: translate3d(-66.666667%, 0, 0); }
.homeApp[data-room="bathroom"] .homeWorld { transform: translate3d(-33.333333%, -50%, 0); }

.homeApp[data-overview="true"] .homeWorld {
  top: 16.666667%;
  transform: scale(.333333);
  transform-origin: top left;
}

.homeApp[data-overview="true"] .homeRoom {
  box-shadow: inset 0 0 0 5px rgba(224, 179, 83, .16), inset 0 0 70px rgba(0, 0, 0, .22);
}

.homeApp[data-overview="true"] .roomPlaque {
  transform: scale(2.35);
  transform-origin: top left;
}

.homeRoom {
  position: absolute;
  width: 33.333333%;
  height: 50%;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 0 69%, rgba(28, 21, 17, .35) 69%),
    #2b2823;
}

.room--kitchen { left: 0; top: 0; }
.room--bedroom { left: 33.333333%; top: 0; }
.room--playroom { left: 66.666667%; top: 0; }
.room--bathroom { left: 33.333333%; top: 50%; }

.homeRoom::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -5%;
  right: -5%;
  bottom: -16%;
  height: 48%;
  transform: perspective(660px) rotateX(61deg);
  transform-origin: center top;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.035) 50%, transparent 50.2%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 130px),
    linear-gradient(180deg, #49372b, #2a211c 72%);
  box-shadow: inset 0 18px 35px rgba(0,0,0,.26);
}

.roomWall {
  position: absolute;
  z-index: 0;
  inset: 0 0 27%;
}

.roomGlow {
  position: absolute;
  z-index: 2;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(38px);
  opacity: .35;
}

.roomPlaque {
  position: absolute;
  z-index: 16;
  left: 26px;
  top: 24px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(15, 17, 17, .58);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.roomPlaque span { display: block; font-size: .92rem; font-weight: 850; }
.roomPlaque small { display: block; margin-top: 2px; color: rgba(240,230,216,.65); font-size: .66rem; }

.goldRoomPath {
  position: absolute;
  z-index: 7;
  left: 20%;
  right: 12%;
  bottom: 6%;
  height: 28%;
  transform: perspective(440px) rotateX(69deg);
  border: 2px solid rgba(224,179,83,.28);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(224,179,83,.13), transparent 66%);
  box-shadow: 0 0 38px rgba(224,179,83,.09);
}

.goldRoomPath--hub { left: 16%; right: 16%; border-color: rgba(255,216,121,.43); }
.goldRoomPath--vertical { left: 14%; right: 18%; }

.roomDoor {
  position: absolute;
  z-index: 4;
  width: 92px;
  height: 210px;
  bottom: 20%;
  border: 2px solid rgba(224,179,83,.21);
  border-bottom: 0;
  border-radius: 50px 50px 0 0;
  background: linear-gradient(90deg, rgba(0,0,0,.47), rgba(39,30,24,.84));
  box-shadow: inset 0 0 30px rgba(0,0,0,.4), 0 0 28px rgba(224,179,83,.05);
}

.roomDoor i { position: absolute; inset: 12px; border: 1px solid rgba(224,179,83,.11); border-bottom: 0; border-radius: inherit; }
.roomDoor--left { left: -46px; }
.roomDoor--right { right: -46px; }
.roomDoor--down { left: 50%; bottom: -115px; transform: translateX(-50%) rotate(90deg); opacity: .6; }
.roomDoor--up { left: 50%; top: -115px; bottom: auto; transform: translateX(-50%) rotate(90deg); opacity: .6; }

/* Bedroom */
.bedroomWall {
  background:
    linear-gradient(118deg, rgba(255,255,255,.028), transparent 28%),
    radial-gradient(circle at 68% 30%, rgba(255,192,93,.11), transparent 24%),
    linear-gradient(135deg, #3c3329, #252522 67%);
}

.corkWall {
  position: absolute;
  z-index: 3;
  left: 7%;
  top: 14%;
  width: 24%;
  height: 44%;
  transform: skewY(-2deg);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background:
    radial-gradient(circle, rgba(255,255,255,.075) 0 1px, transparent 1.6px) 0 0 / 15px 15px,
    linear-gradient(145deg, #9a7654, #61472f);
  box-shadow: 14px 20px 35px rgba(0,0,0,.27), inset 0 1px rgba(255,255,255,.1);
}

.corkWall i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #d7b06b; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.corkWall i:nth-child(1) { left: 20%; top: 28%; }
.corkWall i:nth-child(2) { left: 68%; top: 48%; }
.corkWall i:nth-child(3) { left: 42%; top: 72%; }

.moonWindow {
  position: absolute;
  z-index: 2;
  right: 9%;
  top: 10%;
  width: 22%;
  height: 38%;
  overflow: hidden;
  border: 9px solid #4b3527;
  border-radius: 48% 48% 18px 18px;
  background: linear-gradient(180deg, #1a2528, #33403c);
  box-shadow: 0 18px 35px rgba(0,0,0,.28), inset 0 0 30px rgba(0,0,0,.55);
}

.moonWindow::before, .moonWindow::after { content: ""; position: absolute; z-index: 2; background: rgba(106,76,48,.8); }
.moonWindow::before { left: 50%; top: 0; width: 5px; height: 100%; }
.moonWindow::after { left: 0; top: 50%; width: 100%; height: 5px; }
.moonWindow span { position: absolute; left: 18%; top: 16%; width: 34px; height: 34px; border-radius: 50%; background: #f3d78b; box-shadow: 0 0 28px 10px rgba(243,215,139,.24); }
.moonWindow i { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(145deg, transparent 0 32%, #1d2e29 33% 55%, #24342f 56%); }

.hangingLamp {
  position: absolute;
  z-index: 6;
  left: 48%;
  top: -8px;
  width: 5px;
  height: 22%;
  background: #38271d;
}

.hangingLamp i {
  position: absolute;
  left: 50%;
  bottom: -32px;
  width: 76px;
  height: 52px;
  transform: translateX(-50%);
  clip-path: polygon(18% 0,82% 0,100% 100%,0 100%);
  border-radius: 12px;
  background: linear-gradient(180deg,#a8793d,#634427);
  filter: drop-shadow(0 18px 26px rgba(255,194,91,.26));
}

.hangingLamp i::after { content:""; position:absolute; left:22%; right:22%; bottom:-7px; height:14px; border-radius:50%; background:#ffd98a; box-shadow:0 0 36px 18px rgba(255,207,118,.22); }

.ceramicHideout {
  position: absolute;
  z-index: 8;
  left: 9%;
  bottom: 16%;
  width: 24%;
  height: 29%;
  border-radius: 50% 48% 14px 16px;
  background: linear-gradient(140deg, #b6ab99, #766e62 75%);
  box-shadow: 0 22px 32px rgba(0,0,0,.34), inset 7px 8px rgba(255,255,255,.07);
}

.ceramicHideout span { position:absolute; left:25%; right:25%; bottom:0; height:58%; border-radius:50% 50% 0 0; background:#211d1a; box-shadow:inset 0 10px 18px rgba(0,0,0,.55); }

.nestBed {
  position: absolute;
  z-index: 9;
  right: 11%;
  bottom: 15%;
  width: 25%;
  height: 13%;
  border-radius: 50%;
  background: linear-gradient(180deg,#8b6b5d,#4f3e39);
  box-shadow: 0 20px 28px rgba(0,0,0,.31), inset 0 8px 14px rgba(255,255,255,.06);
  transition: filter 320ms ease, transform 320ms ease;
}

.nestBed i { position:absolute; inset:12% 12% 27%; border-radius:50%; background:#ac8a74; box-shadow:inset 0 -8px 13px rgba(0,0,0,.14); }
.nestBed b { position:absolute; left:14%; right:14%; bottom:-8%; height:32%; border-radius:50%; background:rgba(35,26,22,.65); filter:blur(6px); }

.woodPlatform {
  position: absolute;
  z-index: 8;
  height: 18px;
  border-radius: 50% 50% 9px 9px;
  background: linear-gradient(180deg,#8b603b,#4f3424);
  box-shadow: 0 18px 24px rgba(0,0,0,.3), inset 0 2px rgba(255,255,255,.08);
}

.platform--bedroom { left: 34%; bottom: 19%; width: 29%; transform: rotate(-1deg); }
.platform--bedroom i { position:absolute; left:12%; right:12%; top:6px; height:3px; border-radius:50%; background:rgba(37,21,14,.45); }

/* Kitchen */
.kitchenWall {
  background:
    radial-gradient(circle at 68% 30%, rgba(255,175,91,.15), transparent 27%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 96px),
    linear-gradient(135deg, #49362a, #27231f 72%);
}

.kitchenGlow { right: 10%; top: 6%; background: #ef984e; }

.woodBeams i { position:absolute; z-index:2; top:0; bottom:28%; width:22px; background:linear-gradient(90deg,#3b271d,#6d492f,#3d291d); box-shadow:8px 0 20px rgba(0,0,0,.16); }
.woodBeams i:nth-child(1) { left:7%; }
.woodBeams i:nth-child(2) { left:47%; }
.woodBeams i:nth-child(3) { right:8%; }

.kitchenShelf {
  position: absolute;
  z-index: 7;
  left: 10%;
  top: 20%;
  width: 38%;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(#8d603a,#4b3021);
  box-shadow: 0 17px 24px rgba(0,0,0,.3), inset 0 2px rgba(255,255,255,.08);
}

.kitchenShelf > span { position:absolute; bottom:14px; border-radius:8px 8px 4px 4px; box-shadow:0 8px 13px rgba(0,0,0,.2); }
.hayJar { left:8%; width:55px; height:76px; background:linear-gradient(90deg,rgba(161,176,151,.3),rgba(220,230,204,.45)); border:2px solid rgba(214,224,207,.18); }
.hayJar::after { content:""; position:absolute; inset:17px 8px 8px; background:repeating-linear-gradient(74deg,#9e8d50 0 3px,#c4ae66 3px 5px); opacity:.8; }
.ceramicJar { left:44%; width:48px; height:63px; background:linear-gradient(135deg,#a99d88,#6f675b); }
.seedTin { left:70%; width:42px; height:52px; background:linear-gradient(135deg,#a96b45,#61402c); }

.stoneCounter {
  position: absolute;
  z-index: 5;
  right: 7%;
  top: 31%;
  width: 35%;
  height: 25%;
  border-radius: 18px 18px 7px 7px;
  background: linear-gradient(145deg,#6e675e,#403d38);
  box-shadow:0 22px 32px rgba(0,0,0,.3), inset 0 2px rgba(255,255,255,.08);
}
.counterLip { position:absolute; left:-4%; right:-4%; top:-8px; height:18px; border-radius:10px; background:linear-gradient(#91887b,#5b554d); }
.stoneCounter::before { content:""; position:absolute; inset:19% 8% 8%; border-top:1px solid rgba(255,255,255,.08); background:repeating-linear-gradient(90deg,transparent 0 47%,rgba(22,20,18,.38) 47% 48%,transparent 48% 100%); }
.stoneCounter::after { content:""; position:absolute; left:27%; right:27%; top:34%; height:4px; border-radius:99px; background:linear-gradient(90deg,#a99470,#d1b981,#a99470); box-shadow:0 35px 0 rgba(190,164,112,.72); opacity:.72; }

.feedingStation {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 14%;
  width: 25%;
  height: 18%;
  transition: filter 320ms ease, transform 320ms ease;
}

.ceramicBowl { position:absolute; z-index:2; left:20%; right:20%; bottom:8%; height:45%; border-radius:14% 14% 50% 50%; background:linear-gradient(180deg,#d0bda0,#817361); box-shadow:0 16px 22px rgba(0,0,0,.28), inset 0 5px rgba(255,255,255,.08); }
.ceramicBowl::before { content:""; position:absolute; left:2%; right:2%; top:-10%; height:30%; border-radius:50%; background:#2e2821; border:5px solid #b2a38c; }
.ceramicBowl i { position:absolute; z-index:2; left:22%; right:22%; top:-3%; height:16%; border-radius:50%; background:#9c7d3a; }
.foodStand { position:absolute; left:10%; right:10%; bottom:0; height:15%; border-radius:50%; background:rgba(24,18,15,.7); filter:blur(7px); }

/* Bathroom */
.bathroomWall {
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 94px 94px,
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 94px 94px,
    radial-gradient(circle at 50% 18%, rgba(147,194,183,.15), transparent 34%),
    linear-gradient(145deg,#3f4845,#252a28 75%);
}

.stoneTiles { position:absolute; z-index:2; left:0; right:0; bottom:28%; height:12px; background:linear-gradient(180deg,#817b72,#4f4b46); box-shadow:0 12px 28px rgba(0,0,0,.28); }
.ventGlow { position:absolute; z-index:3; right:11%; top:13%; width:18%; height:9%; border:5px solid #373d3b; border-radius:8px; background:repeating-linear-gradient(0deg,#91aaa2 0 2px,#39433f 2px 8px); box-shadow:0 0 28px rgba(124,181,166,.16); }

.hygieneCorner {
  position: absolute;
  z-index: 9;
  left: 9%;
  bottom: 15%;
  width: 27%;
  height: 40%;
  border-radius: 24px 24px 10px 10px;
  background:linear-gradient(135deg,rgba(115,136,129,.35),rgba(35,42,40,.2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 24px 32px rgba(0,0,0,.24);
}

.privacyScreen { position:absolute; z-index:3; inset:0; display:flex; gap:3px; padding:7px; border-radius:inherit; transform-origin:left center; transition:transform 520ms cubic-bezier(.2,.75,.2,1); }
.privacyScreen i { flex:1; border-radius:14px 14px 5px 5px; background:linear-gradient(90deg,rgba(130,162,151,.78),rgba(75,103,95,.84)); border:1px solid rgba(255,255,255,.07); box-shadow:inset 2px 0 rgba(255,255,255,.04); }
.ceramicTray { position:absolute; left:18%; right:18%; bottom:-4%; height:18%; border-radius:50%; background:linear-gradient(#b8b4a9,#706e66); box-shadow:0 14px 22px rgba(0,0,0,.26); }

.dustStation {
  position: absolute;
  z-index: 10;
  right: 9%;
  bottom: 13%;
  width: 34%;
  height: 36%;
  transition: filter 320ms ease, transform 320ms ease;
}

.dustBowl { position:absolute; z-index:3; left:8%; right:8%; bottom:3%; height:37%; border-radius:12% 12% 48% 48%; background:linear-gradient(180deg,#a09686,#5e594f); box-shadow:0 18px 25px rgba(0,0,0,.3),inset 0 5px rgba(255,255,255,.06); }
.dustBowl::before { content:""; position:absolute; left:2%; right:2%; top:-10%; height:30%; border-radius:50%; border:5px solid #8b8274; background:#5e5549; box-shadow:inset 0 3px 9px rgba(0,0,0,.3); }
.dustBowl i { position:absolute; z-index:2; left:10%; right:10%; top:-4%; height:16%; border-radius:50%; background:radial-gradient(circle,#a89c88,#716757 68%); }
.dustHouse { position:absolute; z-index:1; left:20%; right:20%; top:4%; height:58%; border-radius:50% 50% 12px 12px; background:linear-gradient(140deg,#6e675e,#393734); box-shadow:0 20px 30px rgba(0,0,0,.25); }
.dustHouse::after { content:""; position:absolute; left:27%; right:27%; bottom:0; height:58%; border-radius:50% 50% 0 0; background:#292522; box-shadow:inset 0 10px 18px rgba(0,0,0,.48); }

/* Playroom */
.playWall {
  background:
    radial-gradient(circle at 73% 27%, rgba(209,120,90,.16), transparent 25%),
    linear-gradient(135deg,#443833,#242525 72%);
}

.playClimbWall { left:8%; top:13%; width:28%; height:51%; }
.playClimbWall i { width:18px; height:12px; border-radius:50%; background:#c5855b; }
.playClimbWall i:nth-child(4) { left:74%; top:18%; }

.observationGlass { position:absolute; z-index:2; right:8%; top:10%; width:25%; height:37%; overflow:hidden; border:8px solid #433128; border-radius:18px 18px 42% 42%; background:linear-gradient(145deg,rgba(91,133,132,.32),rgba(31,49,52,.5)); box-shadow:inset 0 0 30px rgba(0,0,0,.35),0 15px 28px rgba(0,0,0,.25); }
.observationGlass::after { content:""; position:absolute; inset:0; background:linear-gradient(118deg,transparent 25%,rgba(255,255,255,.1) 26% 28%,transparent 29%); }
.observationGlass span { position:absolute; left:9%; right:9%; bottom:9%; height:30%; border-radius:50%; background:#1a2928; opacity:.7; }

.playPlatform { width:18%; }
.playPlatform--one { left:25%; top:48%; bottom:auto; transform:rotate(-2deg); }
.playPlatform--two { right:25%; top:36%; bottom:auto; transform:rotate(2deg); }

.playTunnel { position:absolute; z-index:10; left:43%; bottom:15%; width:25%; height:23%; border-radius:50% 50% 22% 22%; background:linear-gradient(130deg,#a8684f,#5a3c34); box-shadow:0 22px 30px rgba(0,0,0,.3),inset 7px 7px rgba(255,255,255,.04); transition:filter 320ms ease,transform 320ms ease; }
.playTunnel::after { content:""; position:absolute; left:25%; right:25%; bottom:0; height:72%; border-radius:50% 50% 0 0; background:#251c1a; box-shadow:inset 0 10px 22px rgba(0,0,0,.6); }
.playTunnel span { position:absolute; z-index:3; left:8%; top:14%; width:10px; height:10px; border-radius:50%; background:#e8bb65; box-shadow:0 0 12px rgba(232,187,101,.42); }

.toyOrb { position:absolute; z-index:11; right:13%; bottom:17%; width:56px; height:56px; border-radius:50%; background:radial-gradient(circle at 34% 30%,#f0bd72,#bd704c 56%,#704235); box-shadow:0 18px 24px rgba(0,0,0,.32),inset -7px -8px 14px rgba(50,20,16,.22); }
.toyOrb i { position:absolute; inset:12px; border:2px solid rgba(255,234,187,.36); border-radius:50%; transform:rotate(35deg); }

/* Character and foreground */
.homeCharacterMount {
  position: absolute;
  z-index: 45;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 64px 4% 1.6%;
  pointer-events: none;
  transition: transform 500ms cubic-bezier(.2,.72,.18,1), opacity 260ms ease;
}

.homeCharacterMount .canonicalCharacter {
  height: min(78%, 610px);
  min-height: 370px;
  max-width: 42vw;
}

.homeCharacterFallback {
  display: block;
  width: auto;
  max-width: 42vw;
  height: min(78%, 610px);
  min-height: 370px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 24px 24px rgba(0,0,0,.44));
  user-select: none;
  -webkit-user-drag: none;
}

.homeApp[data-stage="journey"] .homeCharacterMount { transform: translateY(-1%); }
.homeApp[data-phase="travel"] .homeCharacterMount { animation: home-travel-bob 560ms ease-in-out infinite alternate; }
.homeApp[data-activity="play"][data-phase="act"] .homeCharacterMount { animation: home-play-bounce 520ms cubic-bezier(.2,.75,.2,1) infinite alternate; }
.homeApp[data-activity="hygiene"][data-phase="act"] .privacyScreen { transform:scaleX(.96) translateX(2%); }
.homeApp[data-activity="dust"] .dustStation,
.homeApp[data-activity="feed"] .feedingStation,
.homeApp[data-activity="rest"] .nestBed,
.homeApp[data-activity="play"] .playTunnel { filter:brightness(1.18) drop-shadow(0 0 20px rgba(255,210,116,.25)); transform:translateY(-3px); }
.homeApp[data-activity="play"][data-phase="act"] .toyOrb { animation: toy-hop 680ms cubic-bezier(.2,.72,.2,1) infinite alternate; }
.homeApp[data-activity="dust"][data-phase="act"] .dustStation::after,
.homeApp[data-activity="dust"][data-phase="reposition"] .dustStation::after,
.homeApp[data-activity="dust"][data-phase="act-secondary"] .dustStation::after,
.homeApp[data-activity="dust"][data-phase="react"] .dustStation::after { content:""; position:absolute; z-index:8; left:5%; right:5%; bottom:3%; height:55%; border-radius:50%; background:radial-gradient(ellipse,rgba(199,184,157,.24),transparent 66%); filter:blur(9px); animation:dust-haze 950ms ease-in-out infinite alternate; }

.homeApp[data-overview="true"] .homeCharacterMount {
  transform-origin: bottom center;
  animation: none !important;
}
.homeApp[data-overview="true"][data-room="kitchen"] .homeCharacterMount { transform:translate3d(-33.333333%,-50%,0) scale(.34); }
.homeApp[data-overview="true"][data-room="bedroom"] .homeCharacterMount { transform:translate3d(0,-50%,0) scale(.34); }
.homeApp[data-overview="true"][data-room="playroom"] .homeCharacterMount { transform:translate3d(33.333333%,-50%,0) scale(.34); }
.homeApp[data-overview="true"][data-room="bathroom"] .homeCharacterMount { transform:translate3d(0,-16.666667%,0) scale(.34); }

.homeAtmosphere {
  position: absolute;
  z-index: 30;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.homeAtmosphere i { position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(255,221,156,.36); box-shadow:0 0 8px rgba(255,210,126,.28); animation:ambient-drift 8s linear infinite; }
.homeAtmosphere i:nth-child(1) { left:12%; top:68%; animation-delay:-1s; }
.homeAtmosphere i:nth-child(2) { left:24%; top:45%; animation-delay:-5s; }
.homeAtmosphere i:nth-child(3) { left:39%; top:72%; animation-delay:-3s; }
.homeAtmosphere i:nth-child(4) { left:52%; top:38%; animation-delay:-7s; }
.homeAtmosphere i:nth-child(5) { left:67%; top:62%; animation-delay:-2s; }
.homeAtmosphere i:nth-child(6) { left:78%; top:48%; animation-delay:-6s; }
.homeAtmosphere i:nth-child(7) { left:88%; top:74%; animation-delay:-4s; }
.homeAtmosphere i:nth-child(8) { left:58%; top:80%; animation-delay:-8s; }

.homeStory {
  position: absolute;
  z-index: 90;
  left: 22px;
  top: 20px;
  max-width: min(460px, calc(100% - 190px));
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background:rgba(13,16,16,.68);
  backdrop-filter:blur(14px);
  box-shadow:0 13px 30px rgba(0,0,0,.2);
}
.storyDot { flex:0 0 9px; width:9px; height:9px; margin-top:5px; border-radius:50%; background:var(--home-gold); box-shadow:0 0 15px var(--home-gold); }
.homeStory strong { display:block; font-size:.85rem; }
.homeStory p { margin:3px 0 0; color:var(--home-muted); font-size:.71rem; line-height:1.35; }

.homeMiniMap {
  position:absolute;
  z-index:91;
  right:20px;
  top:20px;
  width:126px;
  height:80px;
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(13,16,16,.62);
  backdrop-filter:blur(12px);
  box-shadow:0 12px 25px rgba(0,0,0,.18);
  color:inherit;
  cursor:pointer;
  appearance:none;
  transition:transform 180ms ease,border-color 180ms ease,background 180ms ease;
}
.homeMiniMap:hover { transform:translateY(-2px); border-color:rgba(224,179,83,.48); background:rgba(37,32,25,.82); }
.homeMiniMap i { position:absolute; width:25px; height:19px; border:1px solid rgba(255,255,255,.18); border-radius:6px; background:#3b3731; transition:background 260ms ease,box-shadow 260ms ease,border-color 260ms ease; }
.homeMiniMap i[data-map-room="kitchen"] { left:11px; top:12px; }
.homeMiniMap i[data-map-room="bedroom"] { left:50px; top:12px; }
.homeMiniMap i[data-map-room="playroom"] { right:11px; top:12px; }
.homeMiniMap i[data-map-room="bathroom"] { left:50px; bottom:10px; }
.homeMiniMap span { position:absolute; left:35px; right:35px; top:21px; height:1px; background:rgba(224,179,83,.22); box-shadow:37px 21px 0 rgba(224,179,83,.22); }
.homeApp[data-room="kitchen"] [data-map-room="kitchen"],
.homeApp[data-room="bedroom"] [data-map-room="bedroom"],
.homeApp[data-room="bathroom"] [data-map-room="bathroom"],
.homeApp[data-room="playroom"] [data-map-room="playroom"] { border-color:var(--home-gold); background:#8b6630; box-shadow:0 0 14px rgba(224,179,83,.34); }
.homeApp[data-overview="true"] .homeMiniMap i { border-color:var(--home-gold); background:#76592d; box-shadow:0 0 12px rgba(224,179,83,.24); }

.homeOverviewHint {
  position:absolute;
  z-index:93;
  left:50%;
  bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid rgba(224,179,83,.28);
  border-radius:999px;
  color:var(--home-muted);
  background:rgba(12,15,15,.76);
  backdrop-filter:blur(12px);
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,8px);
  transition:opacity 200ms ease,transform 200ms ease;
}
.homeOverviewHint strong { color:var(--home-gold-bright); font-size:.68rem; }
.homeOverviewHint span { font-size:.62rem; white-space:nowrap; }
.homeApp[data-overview="true"] .homeOverviewHint { opacity:1; transform:translate(-50%,0); }

.homeTechReadout { position:absolute; z-index:92; right:20px; bottom:14px; display:flex; gap:6px; color:rgba(242,232,218,.55); font:600 .58rem ui-monospace,"SFMono-Regular",monospace; text-transform:uppercase; }
.homeTechReadout span { padding:5px 7px; border:1px solid rgba(255,255,255,.07); border-radius:7px; background:rgba(12,14,14,.47); }

/* Dock */
.homeDock {
  position: relative;
  z-index: 110;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(330px, .9fr) auto minmax(330px, .9fr);
  align-items: center;
  gap: 13px;
  padding: 10px clamp(14px, 2vw, 30px) max(10px, env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.055);
  background:linear-gradient(0deg,rgba(15,18,18,.98),rgba(18,21,21,.9));
  backdrop-filter:blur(18px);
  box-shadow:0 -16px 38px rgba(0,0,0,.25);
}

.roomDock, .activityDock, .homeUtilities { min-width:0; display:flex; align-items:center; gap:7px; }
.activityDock { justify-content:center; }
.homeUtilities { justify-content:flex-end; }

.roomDock button, .activityDock button, .tourButton, .resetHomeButton {
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  color:#e8dfd3;
  background:rgba(255,255,255,.035);
  cursor:pointer;
  transition:transform 170ms ease,background 170ms ease,border-color 170ms ease,color 170ms ease;
}
.roomDock button:hover:not(:disabled), .activityDock button:hover:not(:disabled), .tourButton:hover:not(:disabled), .resetHomeButton:hover:not(:disabled) { transform:translateY(-2px); border-color:rgba(224,179,83,.4); background:rgba(224,179,83,.08); }
.roomDock button:disabled, .activityDock button:disabled, .tourButton:disabled { cursor:not-allowed; opacity:.48; }

.roomDock button { flex:1 1 0; min-width:66px; display:flex; align-items:center; justify-content:center; gap:7px; padding:7px 9px; font-size:.68rem; font-weight:800; }
.roomDock button svg, .activityDock button svg, .tourButton svg, .resetHomeButton svg { flex:0 0 auto; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.roomDock button[aria-pressed="true"] { color:#251b0e; border-color:#efc96f; background:linear-gradient(135deg,#f4cf78,#bd8431); box-shadow:0 8px 22px rgba(224,179,83,.18); }

.activityDock button { display:none; align-items:center; justify-content:center; gap:7px; min-width:120px; padding:8px 13px; font-size:.72rem; font-weight:850; }
.homeApp[data-room="bedroom"] .activityDock [data-activity="rest"],
.homeApp[data-room="bedroom"] .activityDock [data-activity="groom"],
.homeApp[data-room="kitchen"] .activityDock [data-activity="feed"],
.homeApp[data-room="bathroom"] .activityDock [data-activity="hygiene"],
.homeApp[data-room="bathroom"] .activityDock [data-activity="dust"],
.homeApp[data-room="playroom"] .activityDock [data-activity="play"],
.homeApp[data-room="playroom"] .activityDock [data-activity="explore"] { display:flex; }

.activityDock button[aria-pressed="true"] { color:#231a0e; border-color:#f5d17b; background:linear-gradient(135deg,#f5d17b,#c68b35); box-shadow:0 8px 22px rgba(224,179,83,.18); }

.tourButton { display:flex; align-items:center; gap:7px; padding:8px 13px; color:#281e11; border-color:#e6bd60; background:linear-gradient(135deg,#f4ce76,#bd8230); font-size:.71rem; font-weight:900; white-space:nowrap; }
.reducedToggle { min-height:44px; display:flex; align-items:center; gap:7px; color:var(--home-muted); font-size:.64rem; cursor:pointer; white-space:nowrap; }
.reducedToggle input { width:19px; height:19px; accent-color:var(--home-gold); }
.resetHomeButton { width:48px; display:grid; place-items:center; padding:0; }

@keyframes home-travel-bob { from { transform:translateY(0); } to { transform:translateY(-1.6%); } }
@keyframes home-play-bounce { from { transform:translateY(0) scale(1); } to { transform:translateY(-2.4%) scale(1.008); } }
@keyframes toy-hop { from { transform:translate(0,0) rotate(0); } to { transform:translate(-28px,-24px) rotate(-34deg); } }
@keyframes dust-haze { from { transform:scale(.86); opacity:.4; } to { transform:scale(1.12); opacity:.78; } }
@keyframes ambient-drift { 0% { transform:translateY(34px); opacity:0; } 18% { opacity:.8; } 75% { opacity:.35; } 100% { transform:translate(20px,-90px); opacity:0; } }

@media (max-width: 1080px) {
  .homeTopbar { grid-template-columns:minmax(220px,.65fr) minmax(560px,1.4fr); padding-inline:18px; }
  .needsHud { grid-template-columns:repeat(5,minmax(86px,1fr)); }
  .needMeter { grid-template-columns:24px minmax(0,1fr); padding:8px; }
  .needMeter strong { display:none; }
  .homeDock { grid-template-columns:minmax(310px,1fr) auto minmax(250px,.8fr); padding-inline:14px; }
  .roomDock button span { display:none; }
  .tourButton span { display:none; }
  .reducedToggle span { display:none; }
}

@media (max-width: 720px) {
  .homeApp { min-height:640px; grid-template-rows:auto minmax(0,1fr) auto; }
  .homeTopbar { display:block; padding:9px 10px 8px; }
  .homeBrand { margin-bottom:8px; }
  .homeMark { flex-basis:35px; width:35px; height:35px; padding:6px; border-radius:12px; }
  .homeBrand h1 { font-size:1rem; }
  .homeBrand p { margin-top:2px; font-size:.65rem; }
  .needsHud { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
  .needMeter { min-width:0; grid-template-columns:1fr; place-items:center; gap:2px; padding:5px 3px; border-radius:10px; }
  .needMeter svg { width:22px; height:22px; padding:4px; }
  .needMeter > div { width:100%; }
  .needMeter span { text-align:center; font-size:.53rem; }
  .needMeter i { height:3px; margin-top:3px; }
  .needMeter strong { display:none; }
  .homeStage { padding:6px 7px; }
  .homeViewport { min-height:0; border-radius:22px; }
  .homeStory { left:10px; top:10px; max-width:calc(100% - 104px); gap:7px; padding:8px 9px; border-radius:12px; }
  .homeStory strong { font-size:.72rem; }
  .homeStory p { max-width:240px; font-size:.59rem; line-height:1.25; }
  .storyDot { flex-basis:7px; width:7px; height:7px; }
  .homeMiniMap { right:9px; top:9px; width:82px; height:55px; padding:6px; border-radius:11px; }
  .homeMiniMap i { width:17px; height:13px; border-radius:4px; }
  .homeMiniMap i[data-map-room="kitchen"] { left:7px; top:8px; }
  .homeMiniMap i[data-map-room="bedroom"] { left:32px; top:8px; }
  .homeMiniMap i[data-map-room="playroom"] { right:7px; top:8px; }
  .homeMiniMap i[data-map-room="bathroom"] { left:32px; bottom:6px; }
  .homeMiniMap span { display:none; }
  .homeOverviewHint { bottom:8px; padding:6px 9px; }
  .homeOverviewHint strong { font-size:.6rem; }
  .homeOverviewHint span { display:none; }
  .roomPlaque { left:12px; top:auto; bottom:12px; padding:7px 9px; border-radius:10px; }
  .roomPlaque span { font-size:.7rem; }
  .roomPlaque small { display:none; }
  .homeCharacterMount { padding:58px 0 1%; }
  .homeCharacterMount .canonicalCharacter { height:min(78%,410px); min-height:275px; max-width:85vw; }
  .homeCharacterFallback { height:min(78%,410px); min-height:275px; max-width:85vw; }
  .homeTechReadout { display:none; }
  .roomDoor { width:70px; height:160px; }
  .roomDoor--left { left:-35px; }
  .roomDoor--right { right:-35px; }
  .moonWindow { right:6%; width:28%; }
  .corkWall { left:5%; width:28%; }
  .ceramicHideout { left:5%; width:29%; }
  .nestBed { right:5%; width:29%; }
  .feedingStation { left:48%; width:34%; }
  .kitchenShelf { left:7%; width:42%; }
  .stoneCounter { right:4%; width:40%; }
  .hygieneCorner { left:5%; width:32%; }
  .dustStation { right:4%; width:40%; }
  .playTunnel { left:39%; width:31%; }
  .toyOrb { right:7%; width:45px; height:45px; }
  .homeDock { display:block; padding:7px 8px max(7px,env(safe-area-inset-bottom)); }
  .roomDock { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .roomDock button { min-width:0; min-height:44px; padding:5px; }
  .roomDock button span { display:block; font-size:.52rem; }
  .roomDock button svg { width:17px; height:17px; }
  .activityDock { min-height:48px; margin-top:5px; gap:5px; }
  .activityDock button { flex:1 1 0; min-width:0; min-height:44px; padding:6px 7px; font-size:.62rem; }
  .activityDock button svg { width:18px; height:18px; }
  .homeUtilities { position:absolute; right:8px; bottom:calc(7px + env(safe-area-inset-bottom)); gap:5px; }
  .tourButton { width:44px; min-height:44px; padding:0; justify-content:center; border-radius:13px; }
  .tourButton span, .reducedToggle span { display:none; }
  .reducedToggle { width:36px; min-height:44px; justify-content:center; }
  .reducedToggle input { width:18px; height:18px; }
  .resetHomeButton { width:40px; min-height:44px; }
  .activityDock { padding-right:132px; }
}

@media (max-width: 390px) and (max-height: 700px) {
  .homeBrand { display:none; }
  .homeTopbar { padding-top:6px; }
  .homeStory p { display:none; }
  .homeStory { max-width:180px; }
  .roomPlaque { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .homeWorld, .homeCharacterMount, .needMeter i b, .privacyScreen,
  .nestBed, .feedingStation, .dustStation, .playTunnel {
    transition-duration: 1ms !important;
  }
  .homeAtmosphere i, .homeCharacterMount, .toyOrb, .dustStation::after {
    animation: none !important;
  }
}

.homeApp[data-reduced-motion="true"] .homeWorld,
.homeApp[data-reduced-motion="true"] .homeCharacterMount,
.homeApp[data-reduced-motion="true"] .needMeter i b,
.homeApp[data-reduced-motion="true"] .privacyScreen {
  transition-duration: 80ms !important;
}

.homeApp[data-reduced-motion="true"] .homeAtmosphere i,
.homeApp[data-reduced-motion="true"] .homeCharacterMount,
.homeApp[data-reduced-motion="true"] .toyOrb,
.homeApp[data-reduced-motion="true"] .dustStation::after {
  animation: none !important;
}