@media (max-width: 820px){
  body { overflow-x: hidden; }
  .container, .wrap, .main, .content, .page, .inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }
  .row, .layout, .columns, .grid, .lobby-grid, .cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .sidebar, .left, .right, aside {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .topbar, .header, .nav, .menu, .toolbar {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  input, select, textarea, button, .btn {
    min-height: 44px;
    font-size: 16px;
  }
  table {
    display:block;
    width:100% !important;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
  }
  th, td { white-space: nowrap; }
  .card, .panel, .box { border-radius: 14px; }
}

@media (max-width: 480px){
  h1, h2 { font-size: 22px; }
  .btn, button { width: 100%; }
}

.note .small.muted,
.note .small,
.note .muted,
.roomsTitle .muted,
.roomsEmpty.muted,
.roomsTable tbody td,
.roomsTable tbody td b,
.roomsTable tbody td .muted,
.roomsTable tbody td .small{
  color: rgba(255,255,255,.75) !important;
}

.roomsHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.roomsTitle h2{ margin:0; }
.roomsActions{ display:flex; gap:10px; flex-wrap:wrap; }

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.roomsTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.roomsTable thead th{
  text-align:left;
  font-weight:700;
  font-size:13px;
  letter-spacing:.2px;
  padding:12px 12px;
  color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.18);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.roomsTable tbody td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:middle;
  color: rgba(255,255,255,.85) !important;
}
.roomsTable tbody td b{ color: rgba(255,255,255,.92) !important; }
.roomsTable tbody td .muted{ color: rgba(255,255,255,.65) !important; }
.roomsTable tbody td .small{ color: rgba(255,255,255,.70) !important; }
.roomsTable tbody tr:hover td{
  background:rgba(255,255,255,.04);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
}
.badgeDot{
  width:8px;
  height:8px;
  border-radius:99px;
  background:#777;
}
.badgeOnline .badgeDot{ background:#2ecc71; }
.badgeOffline .badgeDot{ background:#e74c3c; }
.badgePlaying .badgeDot{ background:#f1c40f; }

.badgeOnline{ color:#2ecc71 !important; }
.badgeOffline{ color:#e74c3c !important; }
.badgePlaying{ color:#f1c40f !important; }

.codePill{
  font-weight:800;
  letter-spacing:.6px;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  display:inline-block;
  color:#fff !important;
}

.roomsEmpty{
  padding:12px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}

@media (max-width: 820px){
  .roomsTable thead{ display:none; }
  .roomsTable, .roomsTable tbody, .roomsTable tr, .roomsTable td{
    display:block;
    width:100%;
  }
  .roomsTable tr{ border-bottom:1px solid rgba(255,255,255,.08); }
  .roomsTable td{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
  }
  .roomsTable td::before{
    content:attr(data-label);
    color:rgba(255,255,255,.65);
    font-weight:700;
    font-size:12px;
  }
}

#gameInfo .btn[aria-disabled="true"]{
  pointer-events:none;
  opacity:.35;
  filter:saturate(.2);
}

.gameThumbImg{
  width:80px;
  height:80px;
  object-fit:cover;
  display:block;
  border-radius:18px;
}

.roomQuickLinks{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:6px;
  flex-wrap:wrap;
}
.roomQuickLinks a{
  font-size:12px;
  opacity:1;
  color:rgba(255,255,255,.78) !important;
  font-weight:700;
  text-decoration:none;
}
.roomQuickLinks a:visited{ color:rgba(255,255,255,.78) !important; }
.roomQuickLinks a:hover{ text-decoration:underline; }
.roomQuickLinks a.ql-green{
  color:#18b566 !important;
  font-weight:800;
}
.roomQuickLinks a.ql-green:visited{
  color:#18b566 !important;
}

.roomGameIcon{
  width:22px;
  height:22px;
  border-radius:7px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}
.roomGameIcon img{
  width:22px;
  height:22px;
  object-fit:cover;
  display:block;
}
.roomGameTile{
  font-size:11px;
  font-weight:900;
  opacity:.9;
  padding:0 2px;
  display:none;
}
.roomGameIcon.noimg{ background:rgba(255,255,255,.06); }
.roomGameIcon.noimg .roomGameTile{ display:inline; }

.hostNotice{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0 10px 0;
  flex-wrap:wrap;
  font-weight:700;
}
.hostNotice .mutedTxt{
  color:rgba(255,255,255,.75);
  font-weight:700;
}
.hostNotice a{
  color:#18b566 !important;
  font-weight:900;
  text-decoration:none;
}
.hostNotice a:hover{ text-decoration:underline; }

.btn[aria-disabled="true"],
button[aria-disabled="true"]{
  pointer-events:none;
  opacity:.35;
  filter:saturate(.2);
}

.chat-nick {
  font-weight:900;
  letter-spacing:.5px;
}
.chat-admin {
  color:#ef4444;
  text-shadow:0 0 6px rgba(239,68,68,.7);
}
.chat-mod {
  color:#22c55e;
  text-shadow:0 0 6px rgba(34,197,94,.7);
}
.chat-user {
  color:#3b82f6;
  text-shadow:0 0 6px rgba(59,130,246,.6);
}
.chat-guest {
  color:#9ca3af;
  text-shadow:0 0 4px rgba(156,163,175,.4);
}
.chat-src-ovl{
  display:inline-block;
  font-size:10px;
  padding:2px 6px;
  border-radius:999px;
  margin-right:6px;
  vertical-align:middle;
  border:1px solid rgba(255,255,255,.15);
  opacity:.9;
  background:rgba(34,197,94,.12);
  color:#86efac;
  text-shadow:0 0 6px rgba(34,197,94,.30);
}

.emojiBar{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.emojiBar .btn.fit{
  padding:8px 10px;
  min-width:44px;
  min-height:40px;
  line-height:1;
}

@media (max-width: 520px) {
  .emojiBar{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:8px;
  }
  .emojiBar .btn.fit{
    width:100%;
    min-width:0;
    padding:10px 0;
    border-radius:12px;
  }
  #chatInput{
    font-size:16px;
  }
}