.room-dialog { width:min(760px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);font:inherit;box-shadow:0 18px 80px #15151440;overflow:hidden }
.room-dialog[open] { display:flex;flex-direction:column }
.room-dialog::backdrop { background:#13131180 }
.room-panel-header { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);flex-shrink:0 }
.room-panel-title { font-size:18px;margin:0;overflow-wrap:anywhere }
.room-notice { margin:0;padding:8px 20px;background:var(--surface-2);font-size:13px;flex-shrink:0;overflow-wrap:anywhere }
.room-panel-body { padding:16px 20px;overflow:auto;overscroll-behavior:contain;min-height:0 }
.room-seats { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px }
.room-seat { display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:8px;padding:12px;min-width:0;overflow-wrap:anywhere }
.room-seat span { color:var(--text-soft);font-size:13px }
.room-actions,.room-card-actions { display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px }
.room-card-actions { margin:0;flex-shrink:0 }
.room-deck-select,.watch-code { display:flex;gap:8px;margin:12px 0 }
.room-deck-select select,.watch-code input { flex:1;min-width:0 }
.room-swap,.room-controls { border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:12px 0;color:var(--text);font-size:14px }
.room-swap summary,.room-controls summary { cursor:pointer;min-height:32px;font-weight:600;color:var(--text) }
.room-swap label { display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 }
.room-swap select { max-width:100%;min-width:0 }
.room-side-columns { display:grid;grid-template-columns:1fr 1fr;gap:12px }
.room-side-columns h3 { font-size:14px;margin:8px 0 }
.room-side-list { max-height:220px;overflow:auto;overscroll-behavior:contain }
.room-side-row { display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:5px 0 }
.room-side-row span { min-width:0;overflow-wrap:anywhere;font-size:13px }
.room-side-row button { flex-shrink:0;padding:6px 10px;min-height:36px }
.room-presence { font-size:12px;line-height:1.4;color:var(--text-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100% }
#hostRoomOptions { grid-column:1 / -1 }
#lobbyRoomButton { margin:8px 8px 8px 0 }
.public-room-directory { margin-top:28px }
.public-room-help,.public-room-directory>p { font-size:13px;line-height:1.7;color:var(--text-soft) }
.public-room-details { min-width:0;overflow-wrap:anywhere }
.public-room-details strong { font-size:15px }
.public-room-format { display:inline-block;margin:0 0 0 10px;padding:2px 8px;border:1px solid var(--line);border-radius:4px;font-size:12px;color:var(--text);background:var(--surface-2) }
.public-room-details p { margin:7px 0 0;font-size:13px }
.public-room-card .room-card-actions button { min-height:40px }
.room-password-dialog { width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;border:1px solid var(--line);border-radius:8px;padding:22px;background:var(--surface);color:var(--text) }
.room-password-dialog::backdrop { background:var(--overlay) }
.room-password-dialog h2 { font-size:20px;margin:0 0 12px }
.room-password-dialog p { font-size:14px;overflow-wrap:anywhere }
.room-password-dialog label,.room-password-settings { display:grid;gap:8px;font-size:14px }
.room-password-dialog input,.room-password-settings input { width:100%;min-width:0 }
.room-password-settings { margin:12px 0 }
#createRoomPasswordLabel { flex:1 1 100%;min-width:0 }
.spectating .action-settings,.spectating .test-panel,.spectating #actionsPanel,.spectating #expandActions { display:none!important }
.screen-game.spectating .side-column>#actionsPanel { display:none!important }
@media(max-width:900px),(max-width:1180px) and (max-height:600px) {
  #tableRoomButton { display:none }
  .mobile-toolbar { grid-template-columns:repeat(5,minmax(0,1fr)) }
  .screen-game.spectating .hand-column { grid-column:1 / -1 }
  .room-presence { font-size:11px;max-width:calc(100vw - 140px) }
  .room-dialog { width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:10px }
  .room-panel-header { padding:10px 12px;gap:8px }
  .room-panel-title { font-size:16px }
  .room-panel-body { padding:12px }
  .room-notice { padding:6px 12px;font-size:12px }
  .room-seats { gap:8px }.room-seat { padding:9px }
  .room-actions button { flex:1 0 auto;min-height:42px }
  .room-card-actions { flex-wrap:wrap }
}
@media(max-width:480px) {
  .room-side-columns { grid-template-columns:1fr }.room-side-list { max-height:180px }
  .room-deck-select { flex-wrap:wrap }.room-deck-select select { flex-basis:100% }
  .room-card { flex-wrap:wrap }.room-card-actions { width:100% }.room-card-actions button { flex:1 }
}
@media(max-height:500px) and (orientation:landscape) {
  .room-panel-header { padding:6px 12px }.room-panel-header button { min-height:34px;padding:4px 12px }
  .room-panel-body { padding:10px 12px }.room-seats { margin-bottom:8px }.room-actions { margin:6px 0 10px }
  .room-side-list { max-height:150px }
}