/* Live home lobby layout (from Mock I) */

.mi-wrap {
  width: min(1840px, calc(100% - 24px));
  margin: 0 auto 36px;
}
.mi-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.35fr) minmax(290px, .58fr);
  gap: 16px;
  align-items: stretch;
}
.mi-grid .lobby-home {
  padding: 0; margin: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-self: stretch;
}
.mi-grid .lobby-home #lobbyBoard {
  flex: 1 1 auto; display: flex; min-height: 0; height: 100%;
}
.lobby-board {
  flex: 1 1 auto; width: 100%; height: 100%;
  display: flex; flex-direction: column;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: lobby;
}
.lobby-board .wc3-columns { flex: 1 1 auto; }

/* Fluid slot rows — name column shrinks first; nothing overflows the board */
.lobby-board .wc3-columns {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
}
.lobby-board .wc3-filled,
.lobby-board .wc3-open {
  grid-template-columns: 28px 18px 30px minmax(0, 1fr) minmax(56px, 78px) minmax(44px, 58px);
  gap: clamp(4px, 0.7vw, 8px);
  overflow: hidden;
  min-width: 0;
}
.lobby-board .wc3-race,
.lobby-board .wc3-hand {
  min-width: 0;
  padding: 3px 6px;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lobby-board .wc3-name {
  min-width: 0;
}
.lobby-board .wc3-name.is-empty { color: #cbb8e4; letter-spacing: .04em; }
.lobby-board .wc3-filled:has(.is-hold) { min-height: 34px; }
.lobby-board .wc3-name.is-hold {
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px;
  min-width: 0; line-height: 1; white-space: nowrap; overflow: hidden;
}
.lobby-board .hold-kicker {
  display: flex; align-items: center; gap: 5px; flex: 0 1 auto;
  min-width: 0; max-width: 100%;
  color: #f1ce86; font: 800 11px/1 "Trebuchet MS", Arial, sans-serif; letter-spacing: .04em;
  overflow: hidden;
}
.lobby-board .hold-icon {
  width: 18px; height: 18px; display: block; flex: 0 0 18px; color: #f1ce86;
}
.lobby-board .hold-icon svg { width: 18px; height: 18px; display: block; }
.lobby-board .hold-who {
  display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto;
  overflow: hidden;
}
.lobby-board .hold-who .hold-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  color: #ece6ea; font: 700 14px/1 "Trebuchet MS", Arial, sans-serif; letter-spacing: 0;
}
.lobby-board .hold-time {
  flex: 0 0 auto; color: #b7a4cf; font: 700 13px/1 "Trebuchet MS", Arial, sans-serif;
}
.lobby-board .hold-time.is-critical { color: #ff8d8d; }

/* Board gets narrow before the page does — wrap slots inside the lobby card.
   !important beats .lobby-board .wc3-* base rules (CQ selectors are 1-class). */
@container lobby (max-width: 980px) {
  .wc3-columns { grid-template-columns: 1fr !important; gap: 14px !important; }
}
@container lobby (max-width: 720px) {
  .wc3-filled,
  .wc3-open {
    grid-template-columns: 26px 16px 28px minmax(0, 1fr) minmax(52px, 70px) minmax(42px, 52px) !important;
  }
  .wc3-name.is-hold {
    flex-wrap: wrap !important;
    row-gap: 3px;
    white-space: normal !important;
  }
  .hold-who { flex: 1 1 100%; }
}
@container lobby (max-width: 540px) {
  .wc3-filled,
  .wc3-open {
    grid-template-columns: 26px 16px 28px minmax(0, 1fr) !important;
    min-height: 40px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .wc3-race,
  .wc3-hand { display: none !important; }
  .wc3-name.is-hold {
    flex-wrap: wrap !important;
    white-space: normal !important;
  }
}

/* Hold source colors only */
.lobby-board .wc3-filled.hold-browser {
  border-color: #c9842a;
  box-shadow: inset 0 1px 0 #4a3560, inset 0 -1px 0 #0a0810, inset 0 0 0 1px #c9842a55;
}
.lobby-board .wc3-filled.hold-browser .hold-kicker,
.lobby-board .wc3-filled.hold-browser .hold-icon { color: #f0b429; }
.lobby-board .wc3-filled.hold-phone {
  border-color: #1a9bb5;
  box-shadow: inset 0 1px 0 #4a3560, inset 0 -1px 0 #0a0810, inset 0 0 0 1px #1a9bb555;
}
.lobby-board .wc3-filled.hold-phone .hold-kicker,
.lobby-board .wc3-filled.hold-phone .hold-icon { color: #3ec6dc; }
.lobby-board .wc3-filled.hold-lobby {
  border-color: #9b5de8;
  box-shadow: inset 0 1px 0 #4a3560, inset 0 -1px 0 #0a0810, inset 0 0 0 1px #9b5de855;
}
.lobby-board .wc3-filled.hold-lobby .hold-kicker,
.lobby-board .wc3-filled.hold-lobby .hold-icon { color: #c084fc; }
.lobby-board .wc3-filled.is-yours {
  box-shadow: inset 0 0 0 1px #e6c15a99, 0 0 12px #e6c15a33;
}
.lobby-board .wc3-name.is-you .hold-name { color: #e6c15a; }

/* One integrated lobby info rail (status + counters) */
.lobby-board .lobby-status.mi-lobby-rail {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  margin-top: auto;
  padding: 8px;
}
.lobby-board .mi-lobby-rail .status-cell {
  padding: 7px 8px;
}
/* Clearer type, same cell footprint — tighter leading */
.lobby-board .mi-lobby-rail .status-kicker {
  letter-spacing: .07em;
  font-size: 11px;
  line-height: 1;
}
.lobby-board .mi-lobby-rail .status-cell strong {
  margin-top: 5px;
  font-size: 17px;
  line-height: 1.1;
  word-break: break-word;
}
.lobby-board .mi-lobby-rail .status-cell small {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.15;
}
.lobby-board .mi-lobby-rail .status-cell .stat-last,
.lobby-board .mi-lobby-rail .status-cell .update-value {
  font-size: 15px;
  line-height: 1.15;
}
.lobby-board .mi-lobby-rail .vis-bar {
  margin-top: 5px;
  height: 3px;
}

/* Hero */
.mi-hero-title {
  margin: 0 auto; max-width: 820px; text-align: center;
  color: #f0e7d4; font: 700 22px/1.25 Georgia, "Times New Roman", serif;
}
.mi-alert-links { display: flex; justify-content: center; margin: 0; }
.mi-phone-alerts {
  display: inline-block; margin: 0; padding: 9px 16px;
  border: 1px solid #a471c0; color: #f3e4ff; letter-spacing: .08em;
  font: 800 12px/1 "Trebuchet MS", Arial, sans-serif; text-transform: uppercase;
  background: rgba(28, 12, 46, .62); text-decoration: none;
}

/* Chat — fixed not-verified height; lobby board stretches to match */
.mi-chat {
  border: 2px solid #7d6446;
  background: linear-gradient(#24202b 0, #0b0b10 220px);
  box-shadow: inset 0 0 0 2px #1e1721, 0 10px 28px #000a;
  padding: 14px; color: #ece6ea;
  min-width: 0;
  min-height: 620px;
  height: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.mi-chat h3 {
  margin: 0 0 10px; color: #f1ce86;
  font: 800 14px/1.2 Georgia, "Times New Roman", serif; letter-spacing: .08em;
  flex: 0 0 auto;
}
.mk-chat {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.mk-chat-log {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; margin-bottom: 8px; background: #100c16; border: 1px solid #6a4d86;
}
.mk-msg { padding: 7px 9px; background: #1a1422; border: 1px solid #3a2a4c; font-size: 12px; }
.mk-when { float: right; color: #6e6578; font-size: 10px; }
.mk-who { color: #c48cf3; font-weight: 800; word-break: break-word; }
.mk-who.bot { color: #39e27d; }
.mk-who.sys { color: #bba37c; }
.mk-txt { color: #d9d0e4; margin-top: 2px; word-break: break-word; }
.mk-compose { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; }
.mk-compose input {
  flex: 1; min-width: 110px; padding: 8px 10px;
  border: 1px solid #6a4d86; background: #0c0a10; color: #ece6ea;
  font: 12px "Trebuchet MS", sans-serif;
}
.mk-gate { margin-bottom: 8px; flex: 0 0 auto; }
.mk-gate-note {
  margin: 0; padding: 10px 12px;
  border: 1px solid #3a2a4c; background: #100c16;
  color: #bcb1c6; font: 12px/1.45 Georgia, serif;
}
.mk-verify-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 8px; flex: 0 0 auto;
}
.mk-verified, .mk-unverified, .mk-connect, .mk-disconnect {
  display: inline-flex; align-items: center; gap: 5px;
  width: fit-content; max-width: 100%;
  margin: 0; padding: 4px 10px;
  font: 700 10px/1 "Trebuchet MS", sans-serif; flex: 0 0 auto;
}
.mk-verified { border: 1px solid #2f9e5b; color: #39e27d; background: transparent; }
.mk-unverified { border: 1px solid #7f1d1d; color: #ff8d8d; }
.mk-connect, .mk-disconnect {
  border: 1px solid #2f9e5b; color: #39e27d; background: #102018; cursor: pointer;
}
.mk-disconnect { border-color: #7f1d1d; color: #ff8d8d; background: #1a1014; }
.mk-connect:disabled, .mk-disconnect:disabled { opacity: .55; cursor: wait; }
.mk-verify-label { line-height: 1; white-space: nowrap; }
.mk-admin {
  margin-top: 8px; padding: 8px; border: 1px solid #3a2a4c; background: #100c16;
  flex: 0 0 auto; max-height: 140px; overflow: auto;
}
.mk-admin-title {
  margin: 0 0 6px; color: #f1ce86;
  font: 700 10px/1 "Trebuchet MS", sans-serif; letter-spacing: .06em;
}
.mk-admin-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 5px 0; border-top: 1px solid #2a2034;
  color: #d9d0e4; font: 11px/1.3 "Trebuchet MS", sans-serif;
}
.mk-admin-row:first-of-type { border-top: 0; }
.mk-admin-meta { flex: 1 1 120px; min-width: 0; }
.mk-admin-meta strong { color: #c48cf3; }
.mk-admin-meta small { display: block; color: #8e829a; font-size: 10px; }
.mk-admin-actions { display: flex; gap: 4px; }
.mk-admin-actions button {
  border: 1px solid #6a4d86; background: #1a1422; color: #f1ce86;
  padding: 3px 7px; font: 700 9px/1 "Trebuchet MS", sans-serif; cursor: pointer;
}
.mk-admin-actions button.is-ban { border-color: #7f1d1d; color: #ff8d8d; }
.mk-chat.is-connected .mk-gate { display: none; }
.mk-chat:not(.is-connected) .mk-compose { opacity: .4; pointer-events: none; }
.mk-who.lobby { color: #7ebff1; }
.mk-msg[data-source="browser"] .mk-who::before,
.mk-msg[data-source="phone"] .mk-who::before { margin-right: 4px; }
.mk-msg[data-source="browser"] .mk-who::before { content: "🌐"; }
.mk-msg[data-source="phone"] .mk-who::before { content: "📱"; }
/* Icon = same optical size as the 10px BattleTag verified label */
.mk-verify-icon {
  display: inline-block;
  width: 10px; height: 10px; flex: 0 0 10px;
  color: currentColor; line-height: 0; overflow: hidden;
  vertical-align: middle;
}
.mk-verify-icon svg {
  width: 10px !important; height: 10px !important;
  max-width: 10px !important; max-height: 10px !important;
  display: block; flex: none;
}
.mk-chat.is-verified .mk-unverified { display: none; }
.mk-chat:not(.is-verified) .mk-verified,
.mk-chat:not(.is-verified) .mk-connect,
.mk-chat:not(.is-verified) .mk-disconnect { display: none !important; }
.mk-chat.is-verified.is-connected .mk-connect { display: none !important; }
.mk-chat.is-verified:not(.is-connected) .mk-disconnect { display: none !important; }
.mi-btn {
  border: 1px solid #7d6446; background: linear-gradient(180deg, #2a2036, #120e18);
  color: #f1ce86; padding: 8px 12px; cursor: pointer;
  font: 800 11px "Trebuchet MS", sans-serif;
}
.mi-btn.primary { border-color: #a471c0; background: #42215b; color: #fff; }

/* Activity row: clock + week share height; week fills the panel */
.mi-activity {
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(0, 1.15fr);
  gap: 12px;
  margin-top: 14px;
  align-items: stretch;
}
.mi-panel {
  border: 2px solid #7d6446;
  background: linear-gradient(#24202b 0, #0b0b10 180px);
  box-shadow: inset 0 0 0 2px #1e1721, 0 10px 28px #000a;
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 400px;
}
.mi-panel h3 {
  margin: 0 0 10px; color: #f1ce86;
  font: 800 13px Georgia, serif; letter-spacing: .08em;
  flex: 0 0 auto;
}
.mi-panel [data-peak="clock"],
.mi-panel [data-peak="week"] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.mi-panel [data-peak="clock"] svg {
  width: min(100%, 380px);
  height: auto;
  flex: 1 1 auto;
  max-height: 360px;
}
.mi-panel [data-peak="week"] .mk-week-row {
  flex: 1 1 auto;
  width: 100%;
}
.mi-panel .mk-peak-note {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  max-width: 100%;
  color: #cbbfd8;
  font: 13px/1.35 Georgia, serif;
}

.mk-week-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-items: stretch;
}
.mk-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  min-height: 0;
  padding: 10px 4px 8px;
  border: 1px solid #3a2a4c;
  background: #0c0a10;
}
.mk-week-bar-slot {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mk-week-bar {
  width: 100%;
  max-width: 46px;
  height: calc(10% + var(--heat) * 90%);
  background: linear-gradient(
    180deg,
    hsl(calc(200 - var(--heat) * 170), 90%, calc(42% + var(--heat) * 18%)),
    hsl(calc(260 - var(--heat) * 40), 70%, 28%)
  );
}
.mk-week-day strong {
  flex: 0 0 auto;
  color: #cbbfd8;
  font: 800 11px "Trebuchet MS", sans-serif;
}
.mk-week-day em {
  flex: 0 0 auto;
  font-style: normal;
  color: #7a7088;
  font: 700 11px "Trebuchet MS", sans-serif;
}
.mk-week-day.is-peak {
  border-color: #fb923c;
  background: rgba(251, 146, 60, .1);
  box-shadow: 0 0 24px rgba(251, 146, 60, .2);
}
.mk-week-day.is-peak strong { color: #fdba74; }
.mk-week-day.is-peak em { color: #fb923c; }

/* Page-level wrap as the browser shrinks */
@media (max-width: 1280px) {
  .mi-grid {
    grid-template-columns: minmax(0, 1.9fr) minmax(260px, .7fr);
  }
  .lobby-board .mi-lobby-rail .status-kicker { font-size: 10px; }
  .lobby-board .mi-lobby-rail .status-cell strong { font-size: 15px; }
  .lobby-board .mi-lobby-rail .status-cell .stat-last,
  .lobby-board .mi-lobby-rail .status-cell .update-value { font-size: 13px; }
}
@media (max-width: 1100px) {
  .mi-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .mi-chat {
    min-height: 0;
    height: auto;
    max-height: none;
  }
  .mk-chat {
    min-height: 420px;
  }
  .mk-chat-log {
    flex: 1 1 auto;
    min-height: 220px;
    max-height: 320px;
    overflow-y: auto;
  }
  .mk-admin {
    display: block;
    max-height: 160px;
  }
  .lobby-board,
  .mi-grid .lobby-home,
  .mi-grid .lobby-home #lobbyBoard {
    height: auto;
  }
  .lobby-board .wc3-columns { grid-template-columns: 1fr; }
  .lobby-board .lobby-status.mi-lobby-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mi-activity { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .mi-wrap { width: calc(100% - 16px); }
  .lobby-board .lobby-status.mi-lobby-rail { grid-template-columns: 1fr 1fr; }
  .lobby-board .wc3-meta { grid-template-columns: 1fr; }
  .lobby-board .wc3-filled,
  .lobby-board .wc3-open {
    grid-template-columns: 26px 16px 28px minmax(0, 1fr);
    min-height: 40px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .lobby-board .wc3-race,
  .lobby-board .wc3-hand { display: none; }
  .lobby-board .wc3-name.is-hold {
    flex-wrap: wrap;
    white-space: normal;
  }
  .mi-panel { min-height: 240px; }
  .mi-hero-title { font-size: 18px; }
  .mk-week-row { gap: 4px; }
  .mk-week-day { padding: 8px 2px 6px; }
}