/* Phòng của Gấu Mì */
/* ngang: phòng bên trái, kệ đồ bên phải · dọc: phòng trên, kệ dưới */
.room-screen { height: 100%; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; gap: clamp(12px, 3vmin, 28px); }
.rm-room { --wall: #fff1d2; position: relative; overflow: hidden; container-type: inline-size; justify-self: center;
  width: min(100%, 92vh); aspect-ratio: 4 / 3; padding: 0; border: 6px solid #9b6bff; background: var(--wall);
  box-shadow: 0 9px 0 #7c3aed, 0 18px 28px rgba(0, 0, 0, .18); transition: background .4s; }
.rm-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 35%;
  background: repeating-linear-gradient(90deg, #e9c08f 0 12%, #deb07c 12% 12.6%); box-shadow: inset 0 6px 0 rgba(0, 0, 0, .06); }
.rm-rug { position: absolute; left: 50%; bottom: 3%; width: 46%; height: 14%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(#ffb3d1 0 38%, #ff8fbd 39% 60%, #ffb3d1 61%); box-shadow: 0 3px 0 rgba(0, 0, 0, .08); }
.rm-bear { position: absolute; left: 50%; bottom: 5%; height: 52%; transform: translateX(-50%); z-index: 2; cursor: pointer; }
.rm-bear .bear { height: 100%; }
.rm-item { position: absolute; width: var(--s); height: var(--s); transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; }
.rm-item .pic { --s: 100%; width: 100%; height: 100%; }
.rm-item.new { animation: rmDrop .7s cubic-bezier(.3, 1.5, .5, 1); }
.rm-item.boing { animation: rmBoing .5s ease; }
@keyframes rmDrop { 0% { transform: translate(-50%, -160%) scale(.4); opacity: 0; } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%); } }
@keyframes rmBoing { 40% { transform: translate(-50%, -62%) scale(1.12); } }

.rm-side { display: flex; flex-direction: column; align-items: stretch; gap: clamp(10px, 2vmin, 18px); min-width: 0; }
.rm-side .bubble { position: relative; max-width: none; }
.rm-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rm-wallet { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 99px; }
.rm-wallet b { font-size: clamp(22px, 4vmin, 32px); color: #d99a00; }
.rm-walls { display: flex; gap: 8px; }
.rm-wall-btn { width: clamp(36px, 6vmin, 48px); height: clamp(36px, 6vmin, 48px); border-radius: 50%; border: 4px solid #fff; background: var(--w);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .15); cursor: pointer; }
.rm-wall-btn.on { border-color: #9b6bff; transform: scale(1.1); }
.rm-shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2vmin, 16px); }
.rm-buy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; min-height: 64px;
  border: 4px solid #ffc21f; box-shadow: 0 6px 0 #d99a00, 0 12px 20px rgba(0, 0, 0, .14), inset 0 3px 0 #fff;
  animation: pop .4s ease backwards; animation-delay: calc(var(--k) * .06s); }
.rm-buy.poor { border-color: #d5dde8; box-shadow: 0 6px 0 #aab6c6, 0 12px 20px rgba(0, 0, 0, .1), inset 0 3px 0 #fff; }
.rm-buy.poor .pic { opacity: .55; filter: saturate(.5); }
.rm-price { display: inline-flex; align-items: center; gap: 3px; font-size: clamp(16px, 2.8vmin, 22px); color: #d99a00; }
.rm-buy.poor .rm-price { color: var(--ink-soft); }
.rm-done { grid-column: 1 / -1; display: grid; place-items: center; padding: 10px; }

@media (orientation: portrait) {
  .room-screen { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; }
  .rm-room { width: min(100%, 52vh); }
  .rm-shop { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .rm-buy { padding: 6px 2px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .rm-room { width: min(100%, 100vh); border-width: 4px; }
  .rm-side { gap: 6px; }
  .rm-bar { gap: 6px; }
  .rm-walls { gap: 4px; }
  .rm-wall-btn { width: 28px; height: 28px; border-width: 3px; }
  .rm-wallet { padding: 4px 10px; }  .rm-side .bubble { font-size: 13px; padding: 6px 10px; }
  .rm-buy { padding: 4px 2px; flex-direction: row; justify-content: center; gap: 4px; }
  .rm-buy .pic.md { --s: 38px; }
}
@media (orientation: portrait) and (max-height: 660px) {
  .rm-room { width: min(100%, 44vh); }
  .rm-buy .pic.md { --s: 36px; }
}