/* Phase 3 keeps the existing Home portrait and adds a small illustrated room above it. */
.home-decor {
  min-width: 0;
  margin-bottom: 24px;
  padding: 22px;
  border: 1px solid #e5deca;
  border-radius: 24px;
  background: #fffdf4;
  box-shadow: 0 6px 0 #dfebdf;
  scroll-margin-top: 145px;
}
.home-room-heading, .room-heading, .home-upgrade-heading, .home-furniture-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.home-room-heading h3 { margin: 3px 0 2px; }
.home-room-heading p, .room-heading p, .home-upgrade-heading p, .home-furniture-heading p { margin: 0; font-size: 13px; }
.home-room-heading .text-button { flex: none; }
.room-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 15px; }
.room-tabs button {
  border: 1px solid #cad9c9;
  border-radius: 999px;
  background: #f0f5e9;
  color: #426a50;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 800;
}
.room-tabs button.active { background: #416f52; border-color: #416f52; color: white; }
.room-tabs button:disabled { opacity: .6; cursor: not-allowed; }
.room-heading { margin-bottom: 11px; }
.room-heading h4, .home-upgrade-heading h4, .home-furniture-heading h4 { margin: 0 0 3px; color: #315b44; font: 900 18px Nunito, system-ui, sans-serif; }
.room-finish { flex: none; border-radius: 999px; background: #f4ead7; color: #86644a; padding: 7px 11px; font-size: 11px; font-weight: 800; }
.room-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 335px;
  border: 3px solid #c6c9af;
  border-radius: 19px;
  background: linear-gradient(#e6e8d4 0 62%, #d7b999 62% 64%, #c6a887 64% 100%);
  box-shadow: inset 0 4px 13px #6a796a25;
}
.room-scene::before {
  content: '';
  position: absolute;
  inset: 0 0 38%;
  z-index: -1;
  background: repeating-linear-gradient(90deg, transparent 0 46px, #fffdf133 47px 49px);
}
.room-scene::after {
  content: '';
  position: absolute;
  inset: 64% 0 0;
  z-index: -1;
  background: repeating-linear-gradient(105deg, transparent 0 60px, #9f7f6330 61px 62px);
}
.room-bedroom { background: linear-gradient(#ede3da 0 62%, #c5a782 62% 64%, #b99577 64% 100%); }
.room-study { background: linear-gradient(#dee8dc 0 62%, #bd9b7b 62% 64%, #ad8b6e 64% 100%); }
.room-living.room-refreshed { background: linear-gradient(#cfe3cf 0 62%, #e9d9b7 62% 64%, #bf9976 64% 100%); }
.room-bedroom.room-refreshed { background: linear-gradient(#e9d7cc 0 62%, #f2d6b5 62% 64%, #c9a381 64% 100%); }
.room-window {
  position: absolute;
  left: 39%;
  top: 9%;
  width: 22%;
  height: 35%;
  border: 8px solid #f7edcf;
  border-radius: 65px 65px 7px 7px;
  background: linear-gradient(#bddad3 0 64%, #a9c99d 64%);
  box-shadow: 0 3px 0 #a6886d, inset 0 0 0 2px #9dbaa8;
}
.room-window::before, .room-window::after { content: ''; position: absolute; background: #f8edce; }
.room-window::before { width: 7px; height: 100%; left: 50%; transform: translateX(-50%); }
.room-window::after { height: 7px; width: 100%; top: 54%; left: 0; }
.room-window span { position: absolute; left: -13px; right: -13px; bottom: -12px; height: 9px; border-radius: 6px; background: #f6e8c8; }
.room-baseboard { position: absolute; top: 60%; left: 0; right: 0; height: 8px; background: #f7ead1; box-shadow: 0 2px 0 #a8846e; }
.room-slot {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  border: 2px dashed #557b665e;
  border-radius: 13px;
  background: #fffdf333;
  color: #355746;
  padding: 2px;
  touch-action: manipulation;
}
.room-slot:hover, .room-slot:focus-visible, .room-slot.can-place { border-color: #448b61; background: #f2f9e590; }
.room-slot.occupied { border-color: transparent; background: transparent; }
.room-slot.occupied:hover, .room-slot.occupied.selected { border-color: #448b61; background: #fffdf355; }
.room-slot small {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 5px;
  background: #fffaf0dd;
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 800;
}
.room-slot-plus { margin: auto; font-size: 25px; font-weight: 800; line-height: 1; }
.room-slot .furniture-illustration { width: 100%; height: calc(100% - 17px); }
.spot-left { left: 6%; bottom: 13%; width: 23%; height: 31%; }
.spot-right { right: 6%; bottom: 13%; width: 23%; height: 31%; }
.spot-center { left: 35%; bottom: 5%; width: 30%; height: 19%; z-index: 1; }
.spot-bed { left: 29%; bottom: 13%; width: 42%; height: 36%; }
.room-bedroom .spot-bed { bottom: 24%; height: 34%; }
.spot-wall-left { left: 13%; top: 14%; width: 20%; height: 24%; }
.spot-wall-right { right: 13%; top: 14%; width: 20%; height: 24%; }
.room-selection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  margin: 10px 0 14px;
  padding: 8px 12px;
  border-radius: 11px;
  background: #edf3e8;
  color: #436a52;
  font-size: 12px;
  font-weight: 700;
}
.room-selection button { border: 0; border-radius: 8px; background: #fff9ed; color: #875f51; padding: 7px 10px; font-size: 12px; font-weight: 800; }
.home-furniture-heading { margin-bottom: 10px; }
.home-furniture-tray { display: flex; gap: 9px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
.furniture-tray-item {
  flex: 0 0 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 2px solid #d7dfcd;
  border-radius: 12px;
  background: #f7f7ec;
  color: #355c43;
}
.furniture-tray-item.selected { border-color: #588d62; background: #edf7e7; }
.furniture-tray-item .furniture-illustration { width: 72px; height: 55px; }
.furniture-tray-item strong { font-size: 11px; line-height: 1.2; }
.furniture-tray-item small { color: #6c8271; font-size: 10px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.furniture-illustration { display: inline-flex; align-items: center; justify-content: center; min-width: 0; }
.furniture-illustration svg { display: block; max-width: 100%; max-height: 100%; width: 100%; height: 100%; overflow: visible; }
.item-art .furniture-illustration { width: 112px; height: 77px; }
.inventory-item .item-emoji.furniture-icon { width: 42px; height: 35px; flex: none; }
.inventory-item .item-emoji .furniture-illustration { width: 42px; height: 35px; }
.home-quick-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 7px 0 22px; }
.home-benefits { margin: 0; color: #59795e; font-size: 12px; font-weight: 800; }
.home-quick-actions .button { flex: none; padding: 10px 13px; font-size: 12px; }
.home-quick-actions .button:disabled { opacity: .55; cursor: default; }
.home-upgrade-heading { border-top: 1px solid #e8e2d1; padding-top: 17px; margin-bottom: 10px; }
.home-upgrades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.home-upgrade-card { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 13px; border: 1px solid #e5ddca; border-radius: 13px; background: #faf6e9; }
.home-upgrade-card.owned { background: #edf4e8; border-color: #c9dfc8; }
.home-upgrade-card h5 { margin: 0; color: #345d48; font: 900 14px Nunito, system-ui, sans-serif; }
.home-upgrade-card p { flex: 1; margin: 0; font-size: 11px; }
.home-upgrade-card > div { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.home-upgrade-card strong { color: #a17439; font-size: 12px; white-space: nowrap; }
.home-upgrade-card button { border: 0; border-radius: 8px; background: #416f52; color: white; padding: 7px 10px; font-size: 11px; font-weight: 800; }
.home-upgrade-card button:disabled { background: #d9e1d3; color: #708171; cursor: default; }
@media (max-width: 700px) {
  .home-decor { padding: 14px; }
  .home-room-heading { align-items: flex-start; flex-wrap: wrap; }
  .home-room-heading .text-button { padding: 8px 10px; font-size: 12px; }
  .home-upgrades { grid-template-columns: 1fr; }
  .home-upgrade-card { gap: 4px; }
  .room-scene { height: 290px; }
  .home-quick-actions { align-items: stretch; flex-direction: column; }
  .home-quick-actions .button { align-self: flex-start; }
}
@media (max-width: 360px) {
  .room-scene { height: 260px; }
  .room-tabs { gap: 5px; }
  .room-tabs button { padding: 7px 9px; font-size: 11px; }
  .room-slot small { font-size: 8px; padding: 1px 2px; }
  .spot-wall-left, .spot-wall-right { width: 21%; }
}