/* Every game's room (shared/room.js). Everything is under .rm-. */
.rm { display: grid; gap: 16px; width: 100%; }
.rm-card { padding: clamp(18px, 2.6vw, 28px); border-radius: 22px; background: rgba(8, 8, 26, .4); border: 1px solid var(--line-hi); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.rm-kick { display: inline-flex; align-items: center; gap: 10px; font: 700 11px var(--display); letter-spacing: .3em; color: var(--cyan); text-shadow: 0 0 12px rgba(34, 230, 255, .6); }
.rm-title { margin: 10px 0 12px; font: 900 clamp(30px, 5vw, 56px)/.95 var(--display); letter-spacing: .04em; color: transparent;
  background: linear-gradient(95deg, #8ff4ff, var(--cyan) 35%, #d59bff 65%, var(--pink)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 22px rgba(255, 61, 242, .35)); }
.rm-lede { margin: 0; color: var(--soft); font-size: 14px; line-height: 1.8; }
.rm-lede b { color: var(--ink); }
.rm-invite { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.rm-invite input { flex: 1; min-width: 0; padding: 13px 12px; border-radius: 10px; border: 1px solid var(--line-hi); background: rgba(0, 0, 0, .35); color: var(--ink); font: 600 12px var(--mono); }
.rm-h { margin: 0 0 14px; font: 900 14px var(--display); letter-spacing: .16em; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.rm-h iconify-icon { color: var(--cyan); font-size: 20px; }
.rm-seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rm-seats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rm-seat { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(12, 12, 34, .6); height: 136px; overflow: hidden; } /* one height, filled or open, so the card never changes size as seats fill */
.rm-seat.empty { border-style: dashed; color: var(--dim); font: 700 10px var(--display); letter-spacing: .16em; align-content: center; }
.rm-seat.me { border-color: var(--cyan); box-shadow: 0 0 18px rgba(34, 230, 255, .2); }
.rm-seat .pl-pic { width: 58px; height: 58px; border-radius: 14px; font-size: 20px; } /* the picture and name as in every game (player.css), stacked */
.rm-seat .nm { max-width: 100%; font: 800 12px var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-seat.me .nm { color: var(--cyan); }
.rm-seat .tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.rm-tag { padding: 2px 7px; border-radius: 99px; font: 800 8.5px var(--display); letter-spacing: .14em; color: var(--soft); border: 1px solid var(--line-hi); }
.rm-tag.host { color: #04040d; background: var(--gold, #ffd76a); border-color: var(--gold, #ffd76a); }
.rm-tag.you { color: #04040d; background: var(--cyan); border-color: var(--cyan); }
.rm-tag.ok { color: var(--ok); border-color: var(--ok); }
.rm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.rm-note { margin: 0; color: var(--soft); font-size: 13px; line-height: 1.7; }
@media (max-width: 900px) { .rm-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rm-invite { flex-direction: column; align-items: stretch; } }