/* 線上大廳／房間樣式（online.js 專用）。盡量沿用 style.css 的 card / pill / seat / room-item / invite-card / link-box。 */
.col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.col.tight { gap: 8px; }
.lobby-status { margin-left: auto; display: inline-flex; }
.topbar .room-head { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.topbar .room-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.card h3 .pill { margin-left: 8px; }
.card h3 .icon-btn { flex: none; }

.notice { background: #fff6d8; }
.wake-card { background: linear-gradient(135deg, #eaf6ff, #fff1fa); }
.wake-card .wake-art { align-items: center; flex-wrap: wrap; }
.wake-card .wake-art .avatar { flex: none; }
.lobby-unset p { overflow-wrap: anywhere; }
.invite-card h3 { font-size: 1.15rem; font-weight: 900; overflow-wrap: anywhere; }
.invite-card, .invite-card > * { min-width: 0; max-width: 100%; box-sizing: border-box; }

.action-row > .btn { flex: 1 1 140px; }
.code-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; justify-content: flex-end; }
.code-input { flex: 1 1 110px; min-width: 0; max-width: 170px; text-transform: uppercase; letter-spacing: .25em; text-align: center; font-weight: 900; }

.seat.away { opacity: .7; }
.seat .avatar { flex: none; }
.seat-name { min-width: 0; }
.seats { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

.room-chat { display: flex; flex-direction: column; min-width: 0; }
.room-chat .chat-log { flex: none; height: 200px; min-height: 120px; max-height: 40vh; background: #fff; border: 3px solid var(--line); border-radius: 14px; padding: 6px 8px; }
.room-chat .chat-log .msg.spec b { color: var(--ink3); }
.room-chat .chat-form { margin-top: 8px; }
.room-chat .chat-form .text-input { flex: 1 1 auto; min-width: 0; }

.invite-item { min-width: 0; }
.invite-item .link-box { flex-wrap: nowrap; }
.invite-item .link-box .btn { flex: none; }

@media (max-width: 560px) {
  .topbar .room-head h2 { font-size: 1.15rem; }
  .code-row { justify-content: flex-start; }
  .code-input { max-width: none; }
}
.chat-form .btn { flex: none; white-space: nowrap; }
.chat-form .btn .btn-label { white-space: nowrap; }
.topbar > .chips { flex: none; justify-content: flex-end; }
.action-row > .btn { min-width: max-content; }
.action-row .btn-label, .code-row .btn-label { white-space: nowrap; }

/* ===== 教學：特別泡泡名稱一行、說明可換行 ===== */
.help-txt { display: grid; min-width: 0; }
.help-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.help-txt small { font-size: .88rem; font-weight: 700; color: var(--ink2); }
.invite-h { display: flex; min-width: 0; white-space: nowrap; }
.invite-h > span { flex: none; }
.invite-h > .invite-nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ===== 電腦席位（房主可加入／移除／換等級；其他人唯讀） ===== */
.seat.ai { background: #f1fbf6; box-shadow: 0 4px 0 #bfeedb; }
.seat.ai .seat-tags { align-items: center; flex-wrap: nowrap; min-width: 0; }
.seat.ai .seat-tags .pill { flex: 0 0 auto; }
.seat.ai .dd { min-width: 0; flex: 0 1 auto; }
.seat.ai .dd .dd-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* 玩家席位：4 位排一排（窄螢幕 2×2），卡片直式置中，空位有「＋」圓圈 */
.seats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .seats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.seat { min-height: 150px; padding: 14px 10px 12px; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.seat .seat-line { flex-direction: column; justify-content: center; align-items: center; gap: 6px; position: relative; }
.seat .seat-line .avatar { width: 58px !important; height: 58px !important; }
.seat .seat-line .seat-name { flex: none; max-width: 100%; font-size: 1rem; }
.seat .seat-tags { justify-content: center; }
.seat .seat-line .icon-btn { position: absolute; top: -26px; right: -6px; width: 34px; height: 34px; }
.seat.empty { gap: 4px; }
.seat.empty .seat-plus { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 3px dashed #d8c8f3; color: #b9a2e6; font-size: 1.6rem; font-weight: 900; line-height: 1; }
.seat.empty .seat-name { font-size: .95rem; color: var(--ink2); }
.seat.empty .seat-wait { font-size: .75rem; font-weight: 700; color: var(--ink3); white-space: nowrap; }
.seat.ai .seat-line .dd { max-width: 100%; }

button.seat.empty.can-add { font: inherit; cursor: pointer; background: #f5fbff; border-color: #b8dcf5; transition: transform .12s, background .12s; }
button.seat.empty.can-add:hover { background: #e9f6ff; }
button.seat.empty.can-add:active { transform: scale(.97); }
button.seat.empty.can-add:focus-visible { outline: 3px solid #7ab8ff; outline-offset: 2px; }
button.seat.empty.can-add .seat-plus { border-color: #8cc8f2; color: #3d9bff; background: #fff; }
button.seat.empty.can-add .seat-name { color: #2a7fd0; font-weight: 900; }

/* 大廳：房間列表放大，卡片排成「資訊在左、按鈕在右」 */
.room-grid.lobby-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) { .room-grid.lobby-grid { grid-template-columns: minmax(0, 1fr); } }
.lobby-grid > .card:last-child { padding: 18px 20px 20px; min-height: 340px; }
.lobby-grid .room-item { flex-wrap: nowrap; gap: 14px; padding: 16px 18px; border-radius: 24px; margin-bottom: 12px; }
.lobby-grid .room-item .info { flex: 1 1 auto; }
.lobby-grid .room-item .name { font-size: 1.3rem; }
.lobby-grid .room-item .info .chips { margin-top: 8px !important; gap: 6px; }
.lobby-grid .room-item > .row { flex-direction: column; align-items: stretch; gap: 8px; }
.lobby-grid .room-item > .row .btn { min-width: 92px; }
@media (max-width: 520px) {
  .lobby-grid .room-item { flex-wrap: wrap; }
  .lobby-grid .room-item > .row { flex-direction: row; width: 100%; }
  .lobby-grid .room-item > .row .btn { flex: 1; }
}