/* ---------- Дім ---------- */
#home { background: radial-gradient(ellipse at 50% 40%, #f3d9b5, #c99a6a); --dock-w: 320px; }
.home-wrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; transition: right .3s, bottom .3s; }
#home.dock-open .home-wrap { right: var(--dock-w); }
.home-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; transition: right .3s, bottom .3s; }
#home.dock-open .home-overlay { right: var(--dock-w); }
.room-bg-holder, .room-items, .room-fx { position: absolute; inset: 0; }
.room-bg { width: 100%; height: 100%; display: block; }
.room-fx { width: 100%; height: 100%; pointer-events: none; z-index: 9000; overflow: visible; }
.room-fx .puff { transform-box: fill-box; transform-origin: center; }
.hm-door { cursor: pointer; }
.hm-door:hover .hm-exit rect { fill: #ffc83d; }
.hm-night, .hm-shade-night, .hm-cone { opacity: 0; transition: opacity .8s; }
.hm-shade-night { fill: #08102e; pointer-events: none; }
.hm-pendant { pointer-events: none; }

.f-item { position: absolute; transform-origin: 50% 100%; cursor: grab; touch-action: none; }
.f-item .f-flip { width: 100%; height: 100%; }
.f-item.flipped .f-flip { transform: scaleX(-1); }
.f-item svg { width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.f-item:hover svg { filter: drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 4px 6px rgba(0,0,0,.15)); }
.f-item.selected { outline: 3px dashed #ff7a2f; outline-offset: 6px; border-radius: 6px; }
.f-item.dragging { cursor: grabbing; opacity: .92; }
.f-item.dragging svg { filter: drop-shadow(0 14px 10px rgba(0,0,0,.25)); }
.f-item.ghost { pointer-events: none; z-index: 8000 !important; opacity: .8; }
.f-item.ghost.outside { opacity: .35; }
.f-item.place-floor::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -6px; height: 14px; border-radius: 50%; background: rgba(0,0,0,.16); z-index: -1; }
.f-glow { position: absolute; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,226,140,.65), rgba(255,226,140,0) 70%); opacity: 0; transition: opacity .8s; pointer-events: none; mix-blend-mode: screen; }

.home-empty { position: absolute; left: 50%; top: 74%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 14px 22px; border-radius: 16px; background: rgba(255,253,247,.92); border: 3px dashed #c99a6a; color: #5a3412; box-shadow: 0 10px 30px rgba(0,0,0,.18);
  pointer-events: none; transition: left .3s; animation: empty-bob 3s ease-in-out infinite; }
.home-empty b { font-size: 18px; }
#home.dock-open .home-empty { left: calc(50% - var(--dock-w) / 2); }
@keyframes empty-bob { 50% { margin-top: -6px; } }

/* catalog dock */
.home-dock { position: absolute; right: 0; top: 0; bottom: 0; width: var(--dock-w); display: flex; flex-direction: column; gap: 8px; padding: 82px 12px 12px;
  background: #fffdf7; box-shadow: -6px 0 24px rgba(0,0,0,.18); transform: translateX(105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); z-index: 8; }
#home.dock-open .home-dock { transform: none; }
.hd-head { display: flex; align-items: center; }
.hd-head b { font-size: 18px; }
.hd-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.hd-tabs button { border: 1.5px solid var(--border); background: #fff; border-radius: 999px; padding: 4px 9px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; color: var(--text); }
.hd-tabs button.on { background: #ffc83d; border-color: #b88a12; }
.hd-body { flex: 1; overflow-y: auto; min-height: 0; padding: 2px; touch-action: pan-y; }
.hd-body h4 { margin: 8px 0 6px; font-size: 12px; text-transform: uppercase; color: var(--muted); }
.hd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.hd-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 12px; border: 2px solid #eadfcb; background: #fff7ea; cursor: grab;
  font: inherit; color: var(--text); transition: transform .12s, border-color .12s; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hd-tile:hover { transform: translateY(-2px); border-color: #ff7a2f; }
.hd-tile.dragging { opacity: .5; }
.hd-tile b { font-size: 11px; line-height: 1.15; text-align: center; }
.hd-thumb { width: 70px; height: 62px; display: grid; place-items: center; pointer-events: none; }
.hd-thumb svg { max-width: 100%; max-height: 100%; width: 100%; height: 100%; }
.hd-tip { color: var(--muted); font-size: 11px; line-height: 1.35; margin-right: 46px; }
.hd-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hd-style { display: flex; align-items: center; gap: 6px; border: 2px solid #eadfcb; background: #fff; border-radius: 10px; padding: 6px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--text); }
.hd-style i { width: 22px; height: 22px; border-radius: 6px; background: var(--c); border: 2px solid rgba(0,0,0,.2); }
.hd-style.on { border-color: #ff7a2f; box-shadow: 0 0 0 2px rgba(255,122,47,.25); }
.home-dock-btn { position: absolute; right: 16px; bottom: 70px; z-index: 7; height: 50px; padding: 0 18px; border-radius: 999px; border: 3px solid #23263a; cursor: pointer;
  font: inherit; font-weight: 900; font-size: 16px; background: linear-gradient(#ffb36b, #ff7a2f); color: #fff; box-shadow: 0 5px 0 #c2541a, 0 10px 18px rgba(0,0,0,.25); }
#home.dock-open .home-dock-btn { display: none; }

/* selection toolbar */
.home-toolbar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 24px); padding: 8px 10px; border-radius: 16px; background: rgba(255,253,247,.97); box-shadow: 0 8px 24px rgba(0,0,0,.25); border: 2px solid #23263a; transition: left .3s; }
#home.dock-open .home-toolbar { left: calc(50% - var(--dock-w) / 2); max-width: calc(100% - var(--dock-w) - 24px); }
.ht-name { font-size: 14px; white-space: nowrap; }
.ht-swatches, .ht-btns { display: flex; gap: 5px; align-items: center; }
.ht-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #23263a; background: var(--c); cursor: pointer; padding: 0; }
.ht-swatch.on { box-shadow: 0 0 0 3px #ffc83d; }
.home-toolbar .btn.small { min-width: 34px; font-size: 15px; }

/* night */
[data-theme=night] #home { background: radial-gradient(ellipse at 50% 40%, #2c2a44, #121522); }
[data-theme=night] .hm-night, [data-theme=night] .hm-cone { opacity: 1; }
[data-theme=night] .hm-shade-night { opacity: .4; }
[data-theme=night] .hm-lampshade { filter: drop-shadow(0 0 10px #ffd24d); }
[data-theme=night] .f-item svg { filter: brightness(.78) saturate(.9); }
[data-theme=night] .f-item.neon svg { filter: brightness(1.1) drop-shadow(0 0 6px var(--f1, #ff4fd8)) drop-shadow(0 0 14px var(--f1, #ff4fd8)); }
[data-theme=night] .f-item .f-glow { opacity: 1; }
[data-theme=night] .home-dock { background: #23263a; }
[data-theme=night] .hd-tile { background: #2b2f45; border-color: #3b4060; }
[data-theme=night] .hd-tabs button, [data-theme=night] .hd-style { background: #2b2f45; border-color: #3b4060; color: #e6e9ff; }
[data-theme=night] .hd-tabs button.on { background: #ffc83d; color: #23263a; }
[data-theme=night] .home-toolbar { background: rgba(35,38,58,.97); color: #e6e9ff; border-color: #ffc83d; }
[data-theme=night] .home-empty { background: rgba(35,38,58,.94); color: #ffe38a; border-color: #ffc83d; }

/* phones: the catalog becomes a bottom sheet */
@media (max-width: 700px) {
  #home { --dock-h: 46%; }
  #home.dock-open .home-wrap, #home.dock-open .home-overlay { right: 0; bottom: var(--dock-h); }
  .home-dock { left: 0; right: 0; top: auto; width: auto; height: var(--dock-h); padding: 10px 10px 8px; transform: translateY(105%); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.2); }
  .hd-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .hd-tabs button span { display: none; }
  .hd-tabs button { font-size: 16px; padding: 4px 10px; }
  .hd-tip { display: none; }
  .hd-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  #home.dock-open .home-toolbar, #home.dock-open .home-empty { left: 50%; }
  #home.dock-open .home-toolbar { bottom: calc(var(--dock-h) + 10px); max-width: calc(100% - 16px); }
  #home.dock-open .home-empty { top: 28%; }
  .home-dock-btn { bottom: 66px; right: 12px; }
}