/* NEEDS IT BY FIVE - home.css : the warm apartment and the time budget */
#screen-home { background: #1d1426; overflow: hidden; }
#home-room { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hs { cursor: pointer; transition: filter .15s; }
.hs:hover, .hs.hot { filter: drop-shadow(0 0 12px rgba(255,214,128,.95)) brightness(1.18); }
.hs.locked, .hs.cant { cursor: not-allowed; filter: grayscale(.85) brightness(.62); }
.hs.done { filter: saturate(.7) brightness(.92); }
#home-room .steam { animation: wk-steam 3s ease-in-out infinite; }
#home-room .screen-glow { animation: nbf-flicker 4s infinite; }
#home-room #h-night, #home-room #h-stars { transition: opacity 2s; }
.hm-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(8,2,14,.55) 100%); }

.hm-note { position: absolute; left: 26px; top: 76px; width: 316px; padding: 10px 13px; border-radius: 10px; background: rgba(20,12,30,.78); border: 1px solid #5d4a6c; font: 600 14px/1.35 var(--font-ui); color: #f0e3d5; backdrop-filter: blur(4px); }
.hm-note b { display: block; font: 800 11px var(--font-mono); letter-spacing: .22em; color: #ffb86b; margin-bottom: 4px; }
.hm-forecast { position: absolute; right: 26px; top: 84px; width: 300px; padding: 12px 14px; border-radius: 10px; background: rgba(20,12,30,.78); border: 1px solid #5d4a6c; backdrop-filter: blur(4px); font: 600 14px/1.4 var(--font-ui); color: #f0e3d5; text-align: right; }
.hm-forecast b { display: block; font: 800 11px var(--font-mono); letter-spacing: .22em; color: #ffb86b; margin-bottom: 4px; }
.hm-forecast em { font-style: normal; font: 900 20px var(--font-mono); letter-spacing: .08em; }
.hm-bank { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); text-align: center; pointer-events: none; }
.hm-bank b { display: block; font: 400 56px/1 var(--font-display); letter-spacing: .06em; color: #fff3df; text-shadow: 0 4px 18px #000a; font-variant-numeric: tabular-nums; }
.hm-bank small { font: 800 11px var(--font-mono); letter-spacing: .26em; color: #c4aeb8; }

.hm-tray { position: absolute; left: 0; right: 0; bottom: 0; height: 186px; display: flex; gap: 10px; align-items: stretch; padding: 24px 18px 14px; background: linear-gradient(rgba(14,8,22,0), rgba(14,8,22,.88) 22%, #0e0816); }
.hm-card { position: relative; flex: 1; min-width: 0; padding: 10px 11px 10px; border-radius: 12px; background: linear-gradient(#30233f, #251a33); border: 2px solid #5d4a6c; color: #f6ebdf; cursor: pointer; display: flex; flex-direction: column; gap: 3px; text-align: left; transition: transform .1s, border-color .15s, opacity .15s; font-family: var(--font-ui); }
.hm-card:hover { transform: translateY(-4px); border-color: #ffb86b; }
.hm-card .ico { font-size: 28px; line-height: 1; }
.hm-card .nm { font: 800 15px/1.1 var(--font-ui); margin-top: 2px; }
.hm-card .ds { font: 500 11px/1.25 var(--font-ui); color: #c4aeb8; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.hm-card .ft { white-space: nowrap; display: flex; justify-content: space-between; align-items: center; font: 800 12px var(--font-mono); color: #ffcf9a; }
.hm-card .st { letter-spacing: .08em; color: #8be0b0; }
.hm-card.disabled { opacity: .4; cursor: not-allowed; } .hm-card.disabled:hover { transform: none; border-color: #5d4a6c; }
.hm-card.did { border-color: #46855f; } .hm-card.did::after { content: '✓'; position: absolute; right: 9px; top: 6px; font: 900 18px var(--font-ui); color: #8be0b0; }
.hm-card.trap .st { color: #ff9f7b; }
.hm-card .why { position: absolute; left: 8px; right: 8px; top: 8px; font: 700 11px/1.25 var(--font-ui); color: #ffb0a0; background: #2a1620ee; padding: 4px 6px; border-radius: 5px; }
.hm-bed { flex: 0 0 150px; border-style: dashed; background: linear-gradient(#222a45, #181d34); border-color: #6d78b8; }
.hm-bed:hover { border-color: #b9c4ff; }
.hm-bed .ds { color: #b6bde0; }

.hm-modal { position: absolute; inset: 0; z-index: 30; background: rgba(8,3,14,.8); display: flex; align-items: center; justify-content: center; }
.hm-win { width: 880px; border-radius: 14px; overflow: hidden; background: #2a1f35; border: 2px solid #5d4a6c; box-shadow: 0 26px 70px #000d; animation: nbf-pop .3s both; }
.hm-wtitle { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: linear-gradient(#3d2d4f, #2f2340); font: 800 15px var(--font-ui); color: #f6ebdf; }
.hm-wtitle .sp { flex: 1; } .hm-wtitle .tm { font: 800 13px var(--font-mono); color: #ffcf9a; }
.hm-host { width: 880px; height: 520px; }
.hm-result { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); z-index: 40; padding: 22px 34px; border-radius: 16px; background: rgba(14,8,22,.94); border: 2px solid #ffb86b; text-align: center; animation: nbf-pop .35s both; min-width: 420px; }
.hm-result .big { font: 400 74px/1 var(--font-display); letter-spacing: .04em; } .hm-result .big.down { color: #7bf0b4; } .hm-result .big.up { color: #ff7b7b; }
.hm-result p { margin: 8px 0 0; font: 600 18px/1.4 var(--font-ui); color: #f0e3d5; max-width: 520px; }
.hm-result small { display: block; margin-top: 8px; font: 700 12px var(--font-mono); letter-spacing: .2em; color: #c4aeb8; }
.hm-text { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); width: 420px; z-index: 35; padding: 14px 16px; border-radius: 14px; background: #20142b; border: 2px solid #ff7b5a; font: 600 16px/1.4 var(--font-ui); color: #ffe9de; animation: nbf-pop .3s both; }
.hm-text b { display: block; font: 800 12px var(--font-mono); letter-spacing: .2em; color: #ffb09a; margin-bottom: 4px; }
.hm-text .row { display: flex; gap: 10px; margin-top: 10px; }
#screen-home.night #h-night, #screen-home.night #h-stars { opacity: 1; }