/* hub-home — «بيتي» */
@import url(hub-life.css);
.hview[data-v="home"] { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.hview[data-v="home"]::before { content: ""; position: sticky; top: 0; display: block; height: 16cqw; margin-bottom: -16cqw; z-index: 3; pointer-events: none; background: linear-gradient(var(--day-bg) 55%, rgba(244, 236, 218, 0)); }
.hm-in { padding: 17cqw 5cqw calc(var(--nav-h) + 6cqw); display: grid; gap: 5cqw; }
.hm-in h3 { margin: 0 0 3cqw; font-size: 4.6cqw; font-weight: 800; color: var(--day-ink); }
.hm-hero { display: grid; gap: 2.5cqw; }
.hm-scene { position: relative; height: 82cqw; border-radius: 6cqw; overflow: hidden; background: linear-gradient(#F9E9C4 0%, #F4DDB0 55%, #E7CD9A 100%); box-shadow: 0 1.5cqw 5cqw rgba(60, 40, 10, .14); isolation: isolate; }
.hm-plot { position: absolute; inset: 0; background: url(../art/bg-home-plot.webp) 50% 62% / 165% auto no-repeat; opacity: 0; transition: opacity .4s; }
/* the bare plot is now its own picture (art/home/plot.webp) in .hm-house */
.hm-glow { position: absolute; left: 50%; top: 62%; width: 50cqw; height: 50cqw; margin: -25cqw 0 0 -25cqw; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 120, .55), rgba(255, 214, 120, 0) 68%); opacity: 0; animation: hmGlow 4s ease-in-out infinite; }
.hm-scene[data-st="0"] .hm-glow { opacity: 1; }
@keyframes hmGlow { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
.hm-ground { position: absolute; left: 50%; bottom: 7cqw; width: 78cqw; height: 15cqw; margin-left: -39cqw; border-radius: 50%; background: radial-gradient(ellipse, rgba(110, 82, 40, .34), rgba(110, 82, 40, 0) 70%); }
.hm-scene[data-st="0"] .hm-ground { display: none; }
.hm-house { position: absolute; left: 50%; bottom: 10cqw; width: 74cqw; height: 66cqw; margin-left: -37cqw; display: flex; align-items: flex-end; justify-content: center; transform-origin: 50% 100%; }
.hm-house img { max-width: 100%; max-height: 100%; width: auto; height: auto; filter: drop-shadow(0 1.5cqw 2cqw rgba(70, 45, 10, .25)); }
.hm-scene[data-st="1"] .hm-house img { -webkit-mask-image: linear-gradient(to bottom, transparent 38%, #000 66%); mask-image: linear-gradient(to bottom, transparent 38%, #000 66%); }
.hm-house.pop { animation: hmPop .42s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes hmPop { 0% { transform: translateY(5cqw) scale(.94); opacity: .3; } 60% { transform: translateY(-.8cqw) scale(1.015); opacity: 1; } 100% { transform: none; } }
.hm-dust { position: absolute; left: 50%; bottom: 8cqw; width: 70cqw; height: 12cqw; margin-left: -35cqw; border-radius: 50%; background: radial-gradient(ellipse, rgba(214, 188, 140, .75), rgba(214, 188, 140, 0) 70%); opacity: 0; pointer-events: none; }
.hm-dust.pop { animation: hmDust .6s ease-out; }
@keyframes hmDust { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.5, 1.2); opacity: 0; } }
.garden { position: absolute; left: 0; right: 0; bottom: 6cqw; width: 100%; opacity: 0; transform: translateY(2cqw); transition: opacity .5s .1s, transform .5s .1s; pointer-events: none; }
.hm-scene[data-st="4"] .garden { opacity: 1; transform: none; }
.hm-scene.bloom .garden { animation: hmBloom .6s cubic-bezier(.2, 1.2, .4, 1); transform-origin: 50% 100%; }
@keyframes hmBloom { 0% { transform: scaleY(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.hm-name { margin: 0; text-align: center; font-size: 6.2cqw; font-weight: 800; color: var(--day-ink); }

.hm-steps { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; padding-top: 1cqw; }
.hm-steps::before { content: ""; position: absolute; top: 6.4cqw; left: 12.5%; right: 12.5%; height: .9cqw; border-radius: 1cqw; background: var(--day-line); }
.hm-step { position: relative; display: grid; justify-items: center; gap: 1.2cqw; font-size: 3.5cqw; font-weight: 700; color: var(--day-mute); }
.hm-step i { width: 10cqw; height: 10cqw; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 4.4cqw; font-weight: 800; background: var(--day-card); border: .6cqw solid var(--day-line); color: var(--day-mute); }
.hm-step i svg { width: 5.4cqw; height: 5.4cqw; }
.hm-step.ok i { background: var(--day-green); border-color: var(--day-green); }
.hm-step.ok { color: var(--day-green); }
.hm-step.cur i { border-color: var(--day-gold); color: var(--day-gold); box-shadow: 0 0 0 1.2cqw rgba(201, 138, 27, .16); }
.hm-step.cur { color: var(--day-ink); }
.hm-step small { display: inline-flex; align-items: center; gap: .4cqw; font-size: 3.3cqw; font-weight: 800; }
.hm-step small .dropIcon { width: 4.4cqw; height: 4.4cqw; }

.hm-act { display: grid; justify-items: center; gap: 2.4cqw; }
.hm-build { appearance: none; border: 0; width: 100%; min-height: 15cqw; border-radius: 8cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 6cqw; font: inherit; font-size: 5.4cqw; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(#D89A26, #BC7F14); box-shadow: 0 1.2cqw 0 #8E5E0C, 0 3cqw 5cqw rgba(140, 90, 10, .28); transition: transform .08s, box-shadow .08s; touch-action: manipulation; }
.hm-build[hidden] { display: none; }
.hm-build em { font-style: normal; display: inline-flex; align-items: center; gap: 1cqw; background: rgba(255, 255, 255, .22); border-radius: 5cqw; padding: 1.4cqw 3cqw; font-size: 4.8cqw; }
.hm-build em .dropIcon { width: 6cqw; height: 6cqw; }
.hm-build:active, .hm-build.press { transform: translateY(1cqw) scale(.985); box-shadow: 0 .2cqw 0 #8E5E0C, 0 1cqw 2cqw rgba(140, 90, 10, .2); }
.hm-build.off { background: #DAD3C3; color: #8F8776; box-shadow: none; cursor: default; }
.hm-build.off em { background: rgba(255, 255, 255, .5); }
.hm-need { margin: 0; font-size: 4.2cqw; font-weight: 700; color: var(--day-mute); display: flex; align-items: center; gap: 1cqw; }
.hm-need[hidden], .hm-done[hidden] { display: none; }
.hm-need b { color: var(--day-gold); font-size: 4.8cqw; }
.hm-need .dropIcon { width: 5.4cqw; height: 5.4cqw; }
.hm-done { margin: 0; width: 100%; padding: 4cqw 6cqw; border-radius: 6cqw; text-align: center; font-size: 5cqw; font-weight: 800; color: var(--day-green); background: rgba(62, 142, 90, .1); box-sizing: border-box; }

.hm-card { background: var(--day-card); border-radius: 6cqw; padding: 5cqw 4cqw; box-shadow: 0 1cqw 4cqw rgba(60, 40, 10, .08); }
.hm-shelf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5cqw; }
.hm-shelf button { appearance: none; border: 0; background: none; font: inherit; padding: 0; display: grid; justify-items: center; align-content: start; gap: 1.4cqw; cursor: pointer; font-size: 2.9cqw; font-weight: 700; color: var(--day-mute); min-height: 12cqw; touch-action: manipulation; transition: transform .08s; }
.hm-shelf button.on { color: var(--day-ink); }
.hm-shelf button:active { transform: scale(.92); }
.hm-shelf svg { width: 15cqw; height: 15cqw; filter: drop-shadow(0 .8cqw 1cqw rgba(60, 40, 10, .18)); }
.hm-shelf span { text-align: center; line-height: 1.25; }

.hm-row { display: flex; justify-content: space-between; align-items: center; gap: 3cqw; min-height: 10cqw; font-size: 4.2cqw; color: var(--day-mute); border-bottom: 1px solid var(--day-line); }
.hm-row b { color: var(--day-ink); font-weight: 800; }
.hm-restart { appearance: none; margin: 4cqw 0 0; width: 100%; min-height: 13cqw; border-radius: 5cqw; border: .5cqw solid var(--day-line); background: none; font: inherit; font-size: 4.4cqw; font-weight: 800; color: var(--day-ink); cursor: pointer; touch-action: manipulation; }
.hm-restart:active { background: var(--day-line); }
.hm-test { margin-top: 5cqw; padding-top: 1cqw; opacity: .85; }
.hm-test input { width: 100%; height: 12cqw; accent-color: var(--day-gold); margin: 2cqw 0 0; }

.hm-sheet { position: absolute; inset: 0; z-index: 25; background: rgba(20, 24, 36, .4); display: flex; align-items: flex-end; animation: hmFade .2s; }
.hm-sheet[hidden] { display: none; }
@keyframes hmFade { from { opacity: 0; } }
.hm-sheet-box { width: 100%; background: var(--day-card); color: var(--day-ink); border-radius: 7cqw 7cqw 0 0; padding: 6cqw 6cqw calc(8cqw + env(safe-area-inset-bottom)); text-align: center; display: grid; justify-items: center; gap: 3cqw; animation: hmUp .26s ease-out; box-sizing: border-box; }
@keyframes hmUp { from { transform: translateY(12cqw); } }
.hm-sheet-box h4 { margin: 0; font-size: 6cqw; font-weight: 800; }
.hm-sheet-box p { margin: 0; font-size: 4.6cqw; line-height: 1.7; color: var(--day-mute); }
.hm-sheet-box p b { color: var(--day-ink); }
.hm-big svg { width: 28cqw; height: 28cqw; }
.hm-sheet-box button { appearance: none; border: 0; min-height: 13cqw; padding: 0 10cqw; border-radius: 7cqw; background: var(--day-ink); color: #fff; font: inherit; font-size: 4.8cqw; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.hm-sheet-box button:active { transform: scale(.96); }
.hm-yn { display: flex; gap: 3cqw; }
.hm-yn .hm-yes { background: #B5543A; }

/* back to the city (the home has no tab of its own: owner, 30-10) */
.hm-back { position: absolute; z-index: 6; top: calc(max(3.5cqw, env(safe-area-inset-top)) + 13cqw); right: 4cqw; background: rgba(9, 14, 28, .62); color: var(--cream); }
/* a stage being built: the clock over the building site */
.hm-clock { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); width: 22cqw; height: 22cqw; display: grid; place-items: center; z-index: 4;
  border-radius: 50%; background: rgba(9, 14, 28, .72); box-shadow: 0 1.5cqw 5cqw rgba(0, 0, 0, .35); }
.hm-clock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hm-clock circle { fill: none; stroke: rgba(255, 227, 161, .18); stroke-width: 3.2; }
.hm-clock circle.run { stroke: #F2B544; stroke-linecap: round; stroke-dasharray: 119.4; transition: stroke-dashoffset 1s linear; }
.hm-clock b { position: relative; font-family: var(--f-title); font-weight: 800; font-size: 5.2cqw; color: #FFE3A1; direction: ltr; }
.hm-scene.working .hm-house img { animation: work 1.8s ease-in-out infinite; }
@keyframes work { 50% { transform: translateY(-.4%); } }

/* the finished house: the whole scene of the house in its garden (2:3), the door glows softly to be entered */
.hm-scene.full { height: auto; aspect-ratio: 2 / 3; background: #E7CD9A center / cover no-repeat; }
.hm-scene.full > :is(.hm-glow, .hm-ground, .hm-house, .hm-lit, .hm-dust, .hm-clock, .hm-plot) { display: none; }
.hm-door { position: absolute; left: 33.5%; top: 33%; width: 10%; height: 14.5%; padding: 0; border: 0; border-radius: 45% 45% 6% 6%; background: transparent; cursor: pointer; }
.hm-door::after { content: ''; position: absolute; inset: -12%; border-radius: inherit; animation: hmDoor 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes hmDoor { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 227, 161, 0); } 50% { box-shadow: 0 0 0 .6cqw rgba(255, 227, 161, .8), 0 0 5cqw rgba(255, 214, 120, .7); } }
/* the room: the picture whole (2:3) in the middle, the same picture blurred behind it */
.hm-room { position: fixed; inset: 0; z-index: 30; overflow: hidden; background: #1C130A; }
.hm-room.in { animation: hmRoom .35s ease-out; }
@keyframes hmRoom { from { opacity: 0; } }
.hm-room-blur { position: absolute; inset: -8%; background: center / cover no-repeat; filter: blur(16px) brightness(.5); }
.hm-room-box { position: absolute; left: 50%; top: 50%; width: min(100%, 100cqh * 2 / 3); aspect-ratio: 2 / 3; transform: translate(-50%, -50%); }
.hm-room-pic { position: absolute; inset: 0; background: center / cover no-repeat; }
.hm-lamp { position: absolute; left: 55.4%; bottom: 49.2%; width: 4.4%; transform: translateX(-50%); filter: drop-shadow(0 0 .8cqw rgba(255, 190, 90, .8)); }
.hm-lampglow { position: absolute; left: 55.4%; top: 47%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 205, 120, .5), rgba(255, 170, 70, .14) 42%, transparent 70%); mix-blend-mode: screen; animation: hmFlick 3.2s ease-in-out infinite; }
.hm-room.night .hm-lampglow { width: 60%; background: radial-gradient(circle, rgba(255, 200, 110, .62), rgba(255, 160, 60, .2) 40%, transparent 70%); }
@keyframes hmFlick { 0%, 100% { opacity: .85; } 30% { opacity: 1; } 55% { opacity: .78; } 80% { opacity: .95; } }
.hm-med { position: absolute; width: 6.2%; transform: translate(-50%, -100%); filter: drop-shadow(0 .4cqw .5cqw rgba(40, 20, 5, .45)); pointer-events: none; }
.hm-med svg { display: block; width: 100%; height: auto; }
.hm-out { position: absolute; left: 0; top: 13%; width: 7%; height: 47%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hm-room-back { position: absolute; z-index: 2; top: calc(max(3.5cqw, env(safe-area-inset-top)) + 13cqw); right: 4cqw; background: rgba(9, 14, 28, .62); color: var(--cream); }