/* rooms.css — the Locker Rooms: two doors drawn in code, keys, and the room's game HUD. Colours from tokens.css. */
.rm-keys { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 12px; width: max-content;
  background: var(--shade); border: 2px solid var(--navy-line); border-radius: var(--r-pill); padding: 4px 16px 4px 8px; }
.rm-keys svg { width: 34px; height: 34px; } .rm-keys b { font-size: 1.6rem; color: var(--yellow); } .rm-keys span { font-size: 1rem; color: var(--wood-line); }
.rm-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rm-door { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; background: var(--shade);
  border: 3px solid var(--navy-line); border-radius: var(--r-lg); padding: 12px 10px; }
.rm-door.is-open { border-color: var(--yellow); box-shadow: 0 0 22px color-mix(in srgb, var(--yellow) 45%, transparent); }
.rm-art { width: 100%; max-width: 150px; aspect-ratio: 3 / 4; }
.rm-art svg { width: 100%; height: 100%; display: block; }
.rm-door.is-open .rm-art { animation: rm-glow 2.4s ease-in-out infinite; }
@keyframes rm-glow { 50% { filter: drop-shadow(0 0 14px var(--yellow)); } }
.rm-name { font-size: 1.15rem; font-weight: 900; line-height: 1.1; }
.rm-size { font-size: 0.82rem; color: var(--wood-line); font-weight: 800; }
.kbtn.rm-btn { margin-top: 6px; font-size: 1.1rem; padding: 10px 8px; }
.kbtn.rm-btn svg { width: 26px; height: 26px; }
.rm-hud .hud-box b { font-size: 1.2rem; }
.rm-pay b { color: var(--yellow); }