/* The dressing room on features/wardrobe/. */
.room { display: grid; gap: 1.25rem; padding: clamp(.75rem, .5rem + 1vw, 1.25rem); border-radius: 26px; border: 1px solid var(--line-2);
  background: radial-gradient(60% 60% at 25% 30%, rgba(255, 122, 92, .12), transparent 60%), rgba(13, 28, 29, .8); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .9); }
@media (min-width: 980px) { .room { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }

.room-stage { position: relative; display: grid; align-content: center; gap: 1rem; padding: 1.5rem; border-radius: 18px; overflow: hidden;
  background: radial-gradient(70% 50% at 50% 100%, rgba(234, 217, 182, .2), transparent 70%), linear-gradient(180deg, #0a1b1c, #12302d); min-height: 480px; }
.room-scene { position: relative; display: grid; place-items: end center; min-height: 380px; padding-top: 70px; }
.room-crab { position: relative; z-index: 1; width: min(76%, 380px); }
.room-crab svg { width: 100%; filter: drop-shadow(0 20px 18px rgba(0, 0, 0, .35)); }
@media (prefers-reduced-motion: no-preference) { .room-crab.pop { animation: room-pop .45s var(--ease-spring); } }
@keyframes room-pop { 40% { transform: translateY(-6%) scale(1.03, .97); } }
.room-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; --fall-h: 340px; }
.room-floor { position: absolute; left: 10%; right: 10%; bottom: 6%; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 40, 20, .45), transparent); }
.room-wearing { text-align: center; color: var(--text-2); min-height: 3em; font-size: .98rem; }
.room-actions { justify-content: center; }

.room-picker { display: grid; grid-template-rows: auto auto 1fr; gap: .8rem; min-width: 0; }
.room-tabs { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding: .15rem; }
.room-tabs::-webkit-scrollbar { display: none; }
.room-tabs button { flex: none; display: inline-flex; gap: .45rem; align-items: center; padding: .6rem .85rem; border-radius: 11px; border: 1px solid var(--line); background: rgba(8, 18, 20, .5); color: var(--text-2); font: 700 .92rem/1 var(--f-body); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.room-tabs button:hover { color: var(--paper); border-color: var(--line-2); }
.room-tabs button[aria-selected='true'] { background: var(--coral); border-color: transparent; color: var(--ink); }
.room-tabs small { font: 600 .68rem/1 var(--f-mono); opacity: .7; }
.room-tabs button[aria-selected="true"] small { opacity: 1; }
.room-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.room > * { min-width: 0; }
.room-filter select, .room-filter input { min-height: 42px; padding: 0 .8rem; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(8, 18, 20, .7); color: var(--paper); font: inherit; font-size: .92rem; }
.room-filter select { flex: 1; min-width: 0; }
.room-filter input { flex: 1; min-width: 0; }
.room-filter input::placeholder { color: var(--text-3); }

.room-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; align-content: start; max-height: 560px; overflow-y: auto; padding: .2rem .3rem .2rem .2rem; scrollbar-color: var(--tide) transparent; }
.room-item { position: relative; display: grid; justify-items: center; gap: .35rem; padding: .7rem .4rem .6rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(8, 18, 20, .55); color: var(--text-2); cursor: pointer; font: inherit; transition: transform .2s var(--ease-spring), border-color .2s, background-color .2s; }
.room-item:hover { transform: translateY(-2px); border-color: var(--line-2); color: var(--paper); }
.room-item[aria-pressed='true'] { border-color: var(--coral); background: rgba(255, 122, 92, .14); color: var(--paper); }
.room-item .pic { display: grid; place-items: center; width: 56px; height: 48px; font-size: 1.4rem; color: var(--text-3); }
.room-item .pic svg, .room-item .pic img { max-width: 100%; max-height: 100%; width: auto; height: 100%; image-rendering: pixelated; }
.room-item .name { font-size: .76rem; font-weight: 700; line-height: 1.2; text-align: center; }
.room-item .rar { position: absolute; top: .35rem; right: .35rem; font: 600 .56rem/1 var(--f-mono); padding: .18rem .3rem; border-radius: 4px; background: rgba(127, 214, 194, .16); color: var(--foam); }
.room-item.r-epic .rar { background: rgba(198, 120, 255, .18); color: #e1b8ff; }
.room-item.r-legendary .rar { background: rgba(255, 209, 102, .18); color: var(--sun); }
.room-empty { grid-column: 1 / -1; padding: 2rem; text-align: center; }