/* ── Rooms ── */
.rooms-wrap {
  max-width:           1120px;
}
.rooms-action-link {
  align-self:          flex-start;
  font-size:           13px;
  margin-top:          auto;
}
.rooms-create-btn {
  flex-shrink:         0;
  font-size:           11px;
  padding:             6px 12px;
}
.rooms-join-form {
  align-items:         flex-end;
  display:             flex;
  flex-wrap:           wrap;
  gap:                 10px;
  margin-top:          auto;
}
.rooms-join-field {
  flex:                1;
  min-width:           160px;
}
.rooms-join-field .admin-label {
  display:             block;
  margin-bottom:       6px;
}
.rooms-list {
  display:             grid;
  gap:                 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin-bottom:       4px;
}
.rooms-managed-list {
  display:             flex;
  flex-direction:      column;
  gap:                 12px;
}
.rooms-quick-card {
  display:             flex;
  flex-direction:      column;
  gap:                 12px;
  margin-bottom:       0;
  min-height:          190px;
}
.rooms-quick-note {
  font-style:          normal;
  margin:              0;
}
.rooms-section {
  margin-bottom:       30px;
}
.rooms-section-copy {
  color:               rgba(255, 255, 255, 0.58);
  font-size:           13px;
  line-height:         1.45;
  margin-top:          5px;
  max-width:           660px;
}
.rooms-section-header {
  align-items:         center;
  display:             flex;
  gap:                 16px;
  justify-content:     space-between;
  margin-bottom:       12px;
}
.rooms-section-title-group {
  min-width:           0;
}
.rooms-sections {
  display:             flex;
  flex-direction:      column;
  gap:                 2px;
}
.rooms-top-grid {
  align-items:         stretch;
  display:             grid;
  gap:                 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom:       30px;
}
.room-card {
  background:          rgba(255, 255, 255, 0.05);
  border:              1px solid rgba(255, 255, 255, 0.11);
  border-radius:       8px;
  color:               rgba(255, 255, 255, 0.88);
  display:             flex;
  flex-direction:      column;
  min-height:          126px;
  padding:             14px 16px;
  text-decoration:     none;
  transition:          background 0.15s, border-color 0.15s;
}
.room-card:hover {
  background:          rgba(255, 255, 255, 0.09);
  border-color:        rgba(255, 255, 255, 0.22);
  color:               #fff;
}
.room-card__description {
  color:               rgba(255, 255, 255, 0.62);
  font-size:           13px;
  line-height:         1.45;
  margin-bottom:       10px;
}
.room-card__title {
  font-size:           15px;
  font-weight:         600;
  margin-bottom:       8px;
}
.room-card__meta {
  align-items:         center;
  display:             flex;
  flex-wrap:           wrap;
  gap:                 10px;
  margin-top:          auto;
}
.room-card__code {
  color:               rgba(255, 255, 255, 0.45);
  font-family:         ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size:           11px;
  letter-spacing:      0.12em;
}
.room-card__players {
  color:               rgba(255, 255, 255, 0.4);
  font-size:           12px;
  margin-left:         auto;
}
.room-list-item {
  align-items:         center;
  background:          rgba(255, 255, 255, 0.04);
  border:              1px solid rgba(255, 255, 255, 0.1);
  border-radius:       8px;
  display:             flex;
  gap:                 18px;
  justify-content:     space-between;
  padding:             16px 18px;
}
.room-list-item__action {
  flex-shrink:         0;
}
.room-list-item__content {
  min-width:           0;
}
.room-list-item__description {
  color:               rgba(255, 255, 255, 0.62);
  font-size:           13px;
  line-height:         1.45;
  margin-bottom:       10px;
}
.room-list-item__title {
  color:               rgba(255, 255, 255, 0.92);
  font-size:           16px;
  font-weight:         600;
  margin-bottom:       8px;
}
.rooms-empty {
  color:               rgba(255, 255, 255, 0.35);
  font-size:           14px;
  margin-bottom:       6px;
}
.rooms-session-row {
  align-items:         center;
  display:             flex;
  gap:                 14px;
  justify-content:     space-between;
}
.room-code-inline {
  font-family:         ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  letter-spacing:      0.1em;
}
@media (max-width: 720px) {
  .rooms-top-grid {
    grid-template-columns: 1fr;
  }
  .room-list-item {
    align-items:       flex-start;
    flex-direction:    column;
  }
  .room-list-item__action {
    width:             100%;
  }
}
@media (max-width: 480px) {
  .rooms-list {
    grid-template-columns: 1fr;
  }
  .rooms-section-header {
    align-items:       flex-start;
    flex-direction:    column;
    gap:               10px;
  }
  .rooms-session-row {
    align-items:       flex-start;
    flex-direction:    column;
    gap:               10px;
  }
}

.room-code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.room-code-display {
  color: rgba(255, 255, 255, 0.95);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.3em;
  margin-top: 10px;
}
.room-manage-card {
  margin-bottom: 0;
}
.room-manage-card--invite {
  grid-column: 1 / -1;
}
.room-manage-card--leaderboard {
  grid-column: 1 / -1;
  overflow-x: auto;
}
.room-manage-copy-btn {
  flex-shrink: 0;
  font-size: 12px;
  padding: 7px 14px;
}
.room-manage-copy-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 12px;
  min-width: 0;
  padding: 7px 10px;
  text-overflow: ellipsis;
}
.room-manage-copy-row {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.room-manage-description {
  margin: -12px 0 0;
}
.room-manage-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}
.room-manage-header {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 24px;
}
.room-manage-header__content {
  flex: 1;
  min-width: 0;
}
.room-manage-header__title {
  margin-bottom: 18px;
}
.room-manage-note {
  font-style: normal;
  margin-top: 8px;
}
.room-manage-play-btn {
  font-size: 10px;
  padding: 8px 12px;
}
.room-manage-play-form {
  flex-shrink: 0;
  margin: 4px 0 0;
}
.room-manage-room-mode-btn {
  width: 100%;
}
.room-lobby-card--leaderboard {
  overflow-x: auto;
}
.room-lobby-exit-btn {
  font-size: 10px;
  padding: 8px 12px;
}
.room-join-display-name {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 700;
  margin-top: 6px;
}
.room-join-identity {
  margin-bottom: 16px;
}
.room-join-name-note {
  font-style: normal;
  margin: 6px 0 0;
}
.room-public-error {
  margin: -8px 0 18px;
}
.room-public-identity {
  color:       rgba(255, 255, 255, 0.56);
  display:     flex;
  flex-wrap:   wrap;
  font-size:   12px;
  gap:         6px;
  line-height: 1.45;
  margin-top:  10px;
}
.room-public-identity strong {
  color: rgba(255, 255, 255, 0.9);
}
.room-member-action-btn {
  font-size: 12px;
  padding: 7px 14px;
}
.room-member-action-form {
  margin: 0;
}
.room-member-actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
.room-member-description {
  margin: -12px 0 0;
}
.room-member-header {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 24px;
}
.room-member-header__content {
  flex: 1;
  min-width: 0;
}
.room-member-header__title {
  margin-bottom: 18px;
}
.room-lobby-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}
.room-lobby-header {
  margin-bottom: 24px;
}
.room-manage-section-label {
  margin-bottom: 14px;
}
.room-manage-setting-note {
  font-size: 11px;
  margin-top: 3px;
  opacity: 0.45;
}
.room-manage-setting-row {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 10px;
}
.room-manage-setting-title {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}
.room-manage-toggle-btn {
  font-size: 12px;
  padding: 5px 14px;
}

/* ── Leaderboard ── */
.leaderboard {
  border-collapse: collapse;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 13px;
  margin-top: 4px;
  table-layout: fixed;
  width: 100%;
}
.leaderboard--taxonomy {
  min-width: 0;
}
.leaderboard-tabs {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  margin:    0 0 12px;
}
.leaderboard-tabs--metrics {
  margin-top: -4px;
}
.leaderboard-tabs--taxonomy {
  margin-bottom: 12px;
}
.leaderboard-tabs--taxonomy .leaderboard-tab {
  text-align: center;
}
.leaderboard-metric-desc {
  color:       rgba(255, 255, 255, 0.58);
  font-size:   12px;
  line-height: 1.45;
  margin:      -4px 0 12px;
  max-width:   760px;
}
.leaderboard-panel {
  position: relative;
}
.leaderboard-panel--loading {
  opacity:    0.55;
  transition: opacity 0.15s;
}
.leaderboard-tab {
  border:          1px solid rgba(255, 255, 255, 0.18);
  border-radius:   6px;
  color:           rgba(255, 255, 255, 0.58);
  display:         inline-block;
  font-size:       10px;
  letter-spacing:  0.08em;
  padding:         6px 10px;
  text-decoration: none;
  text-transform:  uppercase;
}
.leaderboard-table-wrap {
  overflow-x: auto;
}
.leaderboard-taxonomy-section {
  border-top:  1px solid rgba(255, 255, 255, 0.08);
  margin-top:  2px;
  padding-top: 12px;
}
.leaderboard-taxonomy-section .leaderboard-metric-desc {
  margin: 0 0 10px;
}
.leaderboard-taxonomy-section--active .leaderboard-taxonomy-title {
  color: rgba(255, 255, 255, 0.9);
}
.leaderboard-taxonomy-title {
  color:          rgba(255, 255, 255, 0.48);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.1em;
  margin-bottom:  6px;
  text-transform: uppercase;
}
.leaderboard-tab:hover,
.leaderboard-tab--active {
  background:   rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.34);
  color:        rgba(255, 255, 255, 0.92);
}
.room-lobby-card--leaderboard .leaderboard,
.room-manage-card--leaderboard .leaderboard {
  min-width: 0;
}
.leaderboard th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 10px;
  letter-spacing: 0.12em;
  opacity: 0.4;
  padding: 8px 10px;
  text-align: left;
  text-transform: uppercase;
}
.leaderboard td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 11px 10px;
  vertical-align: middle;
}
.leaderboard-actions {
  text-align: right;
  width: 78px;
}
.leaderboard-player {
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  width:         auto;
}
.leaderboard-rank {
  opacity: 0.35;
  padding-right: 14px;
  white-space: nowrap;
  width: 42px;
}
.leaderboard-score {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  width: 92px;
}
.leaderboard-score--first {
  color: #f5c400;
}
.leaderboard-taxonomy-count {
  display:     block;
  font-size:   10px;
  font-weight: 500;
  margin-top:  2px;
  opacity:     0.48;
}
.leaderboard-taxonomy-cell {
  color:       rgba(255, 255, 255, 0.72);
  font-size:   12px;
  min-width:   74px;
  text-align:  right;
  white-space: nowrap;
}
.leaderboard-taxonomy-head {
  min-width:   74px;
  text-align:  right !important;
  white-space: nowrap;
}
.leaderboard-taxonomy-pct {
  display:     block;
  font-weight: 800;
}
.you-badge {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 9px;
  letter-spacing: 0.08em;
  margin-left: 8px;
  opacity: 0.7;
  padding: 2px 5px;
  text-transform: uppercase;
  vertical-align: middle;
}

.score-live-badge {
  background: rgba(255, 200, 0, 0.15);
  border: 1px solid rgba(255, 200, 0, 0.35);
  border-radius: 4px;
  color: #f5c400;
  font-size: 9px;
  letter-spacing: 0.08em;
  margin-left: 6px;
  padding: 2px 5px;
  text-transform: uppercase;
  vertical-align: middle;
}

@media (max-width: 960px) {
  .room-lobby-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .leaderboard {
    font-size: 12px;
  }
  .room-lobby-card--leaderboard .leaderboard,
  .room-manage-card--leaderboard .leaderboard {
    min-width: 0;
  }
  .leaderboard td {
    padding: 9px 5px;
  }
  .leaderboard th {
    font-size: 9px;
    letter-spacing: 0.08em;
    padding: 7px 5px;
  }
  .leaderboard-actions {
    width: 62px;
  }
  .leaderboard-rank {
    padding-right: 6px;
    width: 30px;
  }
  .leaderboard-score {
    width: 68px;
  }
  .leaderboard-tabs--taxonomy .leaderboard-tab {
    flex: 1 1 calc(33.333% - 8px);
    padding: 6px 5px;
  }
  .score-live-badge {
    display:     block;
    margin-left: 0;
    margin-top:  4px;
  }
  .you-badge {
    display:     block;
    margin-left: 0;
    margin-top:  4px;
  }
  .room-manage-copy-row {
    align-items: stretch;
    flex-direction: column;
  }
  .room-manage-copy-btn {
    width: 100%;
  }
  .room-manage-copy-input {
    width: 100%;
  }
  .room-manage-grid {
    grid-template-columns: 1fr;
  }
  .room-manage-header {
    flex-direction: column;
  }
  .room-manage-play-form {
    width: 100%;
  }
  .room-manage-play-btn {
    width: 100%;
  }
  .room-manage-setting-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .room-lobby-exit-btn {
    width: 100%;
  }
  .room-member-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .room-member-header {
    flex-direction: column;
  }
}

/* ── Room recovery results ── */
.recover-result {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px 14px;
}
.recover-result-title {
  flex: 1;
  font-weight: 600;
}
.recover-result-code {
  color: rgba(255, 255, 255, 0.5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
}
.recover-result-link {
  color: rgba(255, 255, 255, 0.75);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.recover-result-link:hover {
  color: #fff;
}