.room-bar {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 16px;
  background: #e4eddf;
  border: 1px solid #d0ddc6;
  border-radius: 9px;
  margin: 0 0 14px;
  font-size: 11px;
  flex-wrap: wrap;
}
.room-bar strong {
  font-size: 16px;
  letter-spacing: 2px;
  color: #376d4c;
}
.room-bar button {
  border: 1px solid #c6d7bd;
  border-radius: 5px;
  padding: 6px 10px;
  background: #f6f8ef;
  font-size: 10px;
}
.room-bar #connection-label {
  margin-left: auto;
  color: #66825d;
}
.room-bar #connection-label.disconnected {
  color: #ae7554;
}
.room-bar #leave-room {
  border-color: transparent;
  color: #8c7964;
}
.room-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 19px;
}
.room-tabs button {
  flex: 1;
  padding: 11px;
  border-radius: 7px;
  background: #e6eddd;
  font-size: 12px;
}
.room-tabs .primary {
  background: var(--green);
  color: white;
}
.room-form label {
  display: block;
  border: 0;
  padding: 10px 0 4px;
}
.room-form input {
  width: 100%;
  background: #fffef9;
  border: 1px solid #d6dfcc;
  border-radius: 7px;
  padding: 11px;
  color: var(--ink);
  margin-top: 8px;
}
.room-form input:focus {
  outline: 2px solid #a4bf93;
  outline-offset: 1px;
}
.room-form .primary {
  width: 100%;
  padding: 12px;
  border-radius: 7px;
  margin-top: 15px;
}
.room-error {
  min-height: 20px;
  color: #a45d46 !important;
  font-size: 11px !important;
}
.room-roster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 14px 0;
}
.room-seat {
  padding: 13px;
  background: #eef2e6;
  border: 1px solid #dbe4d1;
  border-radius: 8px;
  text-align: left;
  min-height: 83px;
}
.room-seat span {
  display: block;
  color: #91a084;
  font-size: 9px;
  margin-bottom: 8px;
}
.room-seat strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.room-seat small {
  display: block;
  color: #7b9170;
  font-size: 9px;
  margin-top: 7px;
}
.room-seat.mine {
  border-color: #91b07e;
  background: #e0edd5;
}
.room-seat.empty {
  border-style: dashed;
}
.room-ready {
  padding: 10px 20px;
  border-radius: 6px;
  background: #e4edda;
  color: #476d3b;
  border: 1px solid #cbdcbd;
  font-size: 12px;
}
.room-ready.is-ready {
  background: #4b7955;
  color: #fff;
}
.room-notice {
  font-size: 10px;
  color: #8a997d;
  line-height: 1.8;
  padding: 10px;
  background: #eef1e5;
  border-radius: 6px;
}
.room-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}
.room-actions button {
  flex: 1;
  padding: 11px;
  border-radius: 7px;
}
.seat-network {
  display: block;
  font-size: 9px;
  color: #8a9c79;
  margin-top: 5px;
}
.room-table-lobby .welcome-title {
  font-size: 18px;
}
.room-table-lobby .welcome-sub {
  line-height: 1.9;
}
.actions #room-ready-inline {
  padding: 0 13px;
}
.online-mode .heading {
  margin-bottom: 10px;
}
.online-mode .header-info {
  color: #54744b;
}
#room-status {
  font-size: 11px;
  line-height: 1.8;
  color: #7c906d;
}
#reconnect {
  margin-left: 0;
}
.online-mode .hand-panel {
  margin-top: 10px;
}
.online-mode .team-note {
  display: none;
}
.online-mode .seat-2 .seat-status {
  display: none;
}
@media (min-width: 851px) and (max-height: 850px) {
  .online-mode .arena {
    height: 290px;
  }
  .online-mode .table {
    inset: 33px 19px 13px;
  }
  .online-mode .seat-1,
  .online-mode .seat-3 {
    top: 95px;
  }
  .online-mode .center-stage {
    top: 122px;
  }
  .online-mode .table-message {
    bottom: 23px;
  }
  .online-mode .direction-label {
    display: none;
  }
  .online-mode .seat-network {
    font-size: 8px;
    margin-top: 3px;
  }
  .online-mode .room-bar {
    padding: 8px 12px;
    margin-bottom: 9px;
  }
  .online-mode .seat-status {
    font-size: 9px;
    margin-top: 4px;
  }
  .online-mode .played-cards .card {
    height: 58px;
  }
  .online-mode .center-title {
    margin-bottom: 8px;
  }
  .online-mode .pattern-label {
    margin-top: 10px;
  }
  .online-mode .room-table-lobby .welcome-title {
    font-size: 17px;
  }
  .online-mode .room-table-lobby .welcome-symbol {
    display: none;
  }
}
@media (max-width: 550px) {
  .room-bar {
    gap: 8px;
    font-size: 10px;
  }
  .room-bar #connection-label {
    margin-left: 0;
  }
  .room-bar button {
    padding: 5px 7px;
  }
  .room-tabs button {
    font-size: 11px;
  }
  .actions #room-ready-inline {
    padding: 0 8px;
  }
  .room-roster {
    gap: 6px;
  }
  .room-seat {
    padding: 10px;
  }
  .online-mode .center-stage {
    top: 145px;
  }
  .online-mode .table-message {
    bottom: 35px;
  }
}