/* ============================================================================
   Election Tamasha — multiplayer-only structural styles.
   Consumes theme.css variables (no hardcoded brand colours). Covers the
   auth screen, lobby, room seat-picker, connection chip and chat.
   ============================================================================ */

/* [hidden] must beat the display:grid/flex layout rules below (equal specificity
   otherwise lets the layout win and the element stays visible). */
[hidden] { display: none !important; }

/* ---- centred auth/lobby-card layouts ---- */
.mp-body { display: flex; flex-direction: column; min-height: 100dvh; }

.mp-auth {
  flex: 1; display: grid; place-items: center;
  padding: 32px clamp(16px, 4vw, 48px);
}
.mp-card {
  position: relative;
  width: 100%; max-width: 420px;
  background: var(--et-card);
  border: 1px solid var(--et-hairline);
  border-radius: var(--et-r-lg);
  box-shadow: var(--et-lift);
  padding: 30px clamp(20px, 4vw, 34px) 26px;
}
.mp-logo {
  font-family: var(--et-display);
  font-size: 30px; line-height: 0.95; text-transform: uppercase;
  display: flex; gap: 8px; justify-content: center;
}
.mp-logo .p-word { color: var(--p-ink); }
.mp-logo .y-word { color: var(--y-ink); }
.mp-tag {
  text-align: center; margin: 6px 0 20px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--et-ink-faint); font-weight: 600;
}

/* ---- tabs ---- */
.mp-tabs { display: flex; gap: 6px; background: var(--et-tray); padding: 4px; border-radius: 999px; margin-bottom: 18px; }
.mp-tab {
  flex: 1; border: none; background: transparent; padding: 9px 12px; border-radius: 999px;
  font-weight: 600; font-size: 13px; color: var(--et-ink-soft);
  transition: background .3s var(--et-ease), color .3s var(--et-ease);
}
.mp-tab.active { background: var(--et-card); color: var(--et-ink); box-shadow: var(--et-lift-soft); }

/* ---- forms ---- */
.mp-form { display: flex; flex-direction: column; gap: 14px; }
.mp-field { display: flex; flex-direction: column; gap: 5px; }
.mp-field > span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--et-ink-soft); font-weight: 600; }
.mp-field input {
  font-family: var(--et-body); font-size: 14px;
  border: 1px solid var(--et-hairline); border-radius: 12px;
  padding: 11px 13px; background: var(--et-paper); color: var(--et-ink);
}
.mp-field input:focus { outline: none; border-color: var(--p-bright); background: #fff; }
.mp-inline { flex: 1; }
.mp-submit { justify-content: center; margin-top: 4px; }
.mp-note { margin: 18px 0 0; font-size: 11.5px; color: var(--et-ink-faint); line-height: 1.5; text-align: center; }
.mp-err {
  background: color-mix(in srgb, var(--et-bad) 12%, transparent);
  color: var(--et-bad); border: 1px solid color-mix(in srgb, var(--et-bad) 30%, transparent);
  border-radius: 10px; padding: 9px 12px; font-size: 12.5px; font-weight: 600;
}

/* ---- lobby ---- */
.mp-lobby {
  flex: 1; width: 100%; max-width: 640px; margin: 0 auto;
  padding: 28px clamp(16px, 4vw, 40px) 48px;
  display: flex; flex-direction: column; gap: 18px;
}
.mp-panel {
  background: var(--et-card); border: 1px solid var(--et-hairline);
  border-radius: var(--et-r-md); box-shadow: var(--et-lift-soft);
  padding: 20px 22px;
}
.mp-panel h2 { font-size: 17px; }
.mp-sub { margin: 4px 0 14px; font-size: 12.5px; color: var(--et-ink-faint); }
.mp-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.mp-row .btn { white-space: nowrap; }
.mp-listhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mp-listhead h2 { margin: 0; }
.mp-rooms { display: flex; flex-direction: column; gap: 8px; }
.mp-roomrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--et-hairline-2);
  border-radius: var(--et-r-sm); background: var(--et-paper);
}
.mp-roomcode { font-family: var(--et-display); letter-spacing: 0.05em; font-size: 15px; }
.mp-roomver {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; margin-left: 6px;
  background: var(--et-tray); color: var(--et-ink-soft);
}
.mp-roommeta { font-size: 11px; color: var(--et-ink-faint); }
.mp-whoami { font-size: 12.5px; font-weight: 600; color: var(--et-ink-soft); }

/* ---- game-version picker (host panel) ---- */
.mp-variants { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.mp-variant { cursor: pointer; }
.mp-variant input { position: absolute; opacity: 0; pointer-events: none; }
.mp-variant-card {
  display: flex; flex-direction: column; gap: 4px; height: 100%;
  padding: 12px 13px; border-radius: var(--et-r-sm);
  border: 2px solid var(--et-hairline); background: var(--et-paper);
  transition: border-color .25s var(--et-ease), box-shadow .25s var(--et-ease);
}
.mp-variant input:checked + .mp-variant-card {
  border-color: var(--p-bright); box-shadow: var(--et-lift-soft);
}
.mp-variant input:focus-visible + .mp-variant-card { outline: 2px solid var(--p-bright); outline-offset: 2px; }
.mp-variant-name { font-family: var(--et-head); font-weight: 800; font-size: 14px; }
.mp-variant-players { display: block; font-family: var(--et-body); font-weight: 600; font-size: 11px; color: var(--et-ink-faint); }
.mp-variant-desc { font-size: 11px; color: var(--et-ink-soft); line-height: 1.4; }
.mp-variant-soon { cursor: not-allowed; opacity: 0.55; }
.mp-variant-soon .mp-variant-card { border-style: dashed; }
@media (max-width: 640px) { .mp-variants { grid-template-columns: 1fr; } }

/* ---- in-room lobby seat picker ---- */
.mp-lobbyroom { flex: 1; display: grid; place-items: center; padding: 32px clamp(16px, 4vw, 48px); }
.mp-lobbyroom .mp-card { max-width: 560px; }
.mp-lobbyroom h2 { text-align: center; font-size: 20px; }
.mp-seatpick { display: flex; align-items: stretch; gap: 14px; margin: 20px 0; }
.mp-partyslot {
  flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 20px 14px; border-radius: var(--et-r-md);
  border: 2px solid var(--et-hairline); background: var(--et-paper);
  transition: transform .3s var(--et-ease), box-shadow .3s var(--et-ease), border-color .3s var(--et-ease);
}
.mp-partyslot[data-party="P"] { border-color: color-mix(in srgb, var(--p-ink) 30%, transparent); }
.mp-partyslot[data-party="Y"] { border-color: color-mix(in srgb, var(--y-bright) 40%, transparent); }
.mp-partyslot:not(.taken):hover { transform: translateY(-2px); box-shadow: var(--et-lift-soft); }
.mp-partyslot.taken { opacity: 0.6; cursor: not-allowed; }
.mp-partyslot.mine { box-shadow: 0 0 0 3px var(--et-ink) inset; opacity: 1; }
.mp-partyname { font-family: var(--et-head); font-weight: 800; font-size: 16px; }
.mp-partyslot[data-party="P"] .mp-partyname { color: var(--p-ink); }
.mp-partyslot[data-party="Y"] .mp-partyname { color: var(--y-ink); }
.mp-partyboss { font-size: 12px; color: var(--et-ink-soft); }
.mp-slotwho {
  margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--et-ink-faint);
}
.mp-vs { align-self: center; font-family: var(--et-display); color: var(--et-ink-faint); font-size: 14px; }
/* Faction: 4 slots in a 2x2 grid (Purple L/R top, Yellow L/R bottom). */
.mp-seatpick[data-mode="faction"] { display: grid; grid-template-columns: 1fr 1fr; }
.mp-seatpick[data-mode="faction"] .mp-partyslot { padding: 16px 12px; }
.mp-lobbyactions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; }
.mp-lobbyactions .btn { min-width: 200px; justify-content: center; }
.mp-waiting { font-size: 12.5px; color: var(--et-ink-faint); font-style: italic; }

/* ---- connection + seat chips (top bar) ---- */
.mp-conn { font-weight: 700; }
.mp-conn[data-state="online"] { color: var(--et-good); }
.mp-conn[data-state="disconnected"] { color: var(--et-bad); }
.mp-seatchip {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 11px; border-radius: 999px;
  background: var(--et-tray); color: var(--et-ink-soft);
}
.mp-seatchip[data-party="P"] { background: var(--p-soft); color: var(--p-ink); }
.mp-seatchip[data-party="Y"] { background: var(--y-soft); color: var(--y-ink); }

/* ---- voice chat (mic toggle + roster) ---- */
.mp-micbtn { white-space: nowrap; }
.mp-micbtn.muted { background: var(--et-tray); color: var(--et-ink-soft); }
.mp-micbtn.live {
  background: var(--et-bad); color: #fff; border-color: transparent;
  animation: mp-mic-pulse 1.6s ease-in-out infinite;
}
@keyframes mp-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 40, 40, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(200, 40, 40, 0); }
}
.mp-voiceroster {
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  padding: 5px 10px; border-radius: 999px;
  background: var(--et-tray); color: var(--et-ink-soft);
}

/* ---- chat (inside war room) ---- */
.mp-chat { border-top: 1px solid var(--et-hairline); padding: 10px 14px; }
.mp-chatlog {
  max-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; margin-bottom: 8px;
}
.mp-chatrow { color: var(--et-ink-soft); }
.mp-chatrow b { color: var(--et-ink); }
.mp-chatform { display: flex; gap: 6px; }
.mp-chatform input {
  flex: 1; font-family: var(--et-body); font-size: 12.5px;
  border: 1px solid var(--et-hairline); border-radius: 999px;
  padding: 7px 12px; background: var(--et-paper); color: var(--et-ink);
}
.mp-chatform input:focus { outline: none; border-color: var(--p-bright); background: #fff; }
.mp-chatform .btn { padding: 7px 14px; font-size: 12px; }

@media (max-width: 640px) {
  .mp-seatpick { flex-direction: column; }
  .mp-vs { padding: 4px 0; }
  .mp-row { flex-direction: column; align-items: stretch; }
  .mp-row .btn { width: 100%; justify-content: center; }
}