/* ============================================================
   multiplayer.css — lisätyylit moninpelin aula- ja huonenäkymille.
   Perustyylit (paneelit, napit, värit) tulevat styles.css:stä.
   ============================================================ */
#authView input, .mpCreateRow input, .mpCreateRow select, .mpGuestRow input {
  width:100%;margin-top:8px;padding:10px 12px;border-radius:10px;font-size:1rem;
  background:#120d08;color:var(--text);border:1px solid var(--wood);
}
.mpError {
  color:#d98b7f;font-size:.85rem;min-height:1.1em;margin-top:6px;
}
.mpLobbyHeader {
  display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;
}
.mpUser { color:var(--gold-bright);font-weight:700;margin-right:8px; }
.mpColorRow { display:flex;align-items:center;gap:10px;margin:8px 0 4px; }
.mpColorRow .lbl { margin:0;font-size:.78rem;color:var(--dim);text-transform:none;letter-spacing:0; }
.mpColorRow .swatches { margin:0; }
.mpCreateRow {
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;
}
.mpCreateRow input { flex:1 1 140px;margin-top:0; }
.mpCreateRow select { flex:0 0 auto;width:auto;margin-top:0; }
.mpCreateRow button { flex:0 0 auto;width:auto;padding:10px 16px; }
.mpVariantRow {
  display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:10px;
}
.mpVariantRow select { width:auto;margin-top:4px; }
.mpCheck {
  display:flex !important;align-items:center;gap:6px;color:var(--text);
  font-size:.88rem;text-transform:none !important;letter-spacing:0 !important;cursor:pointer;
}
.mpCheck input { width:auto;margin:0; }
.mpRoomList {
  margin-top:8px;max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;
}
.mpRoomRow {
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#1c150e;border:1px solid var(--wood-light);border-radius:10px;padding:10px 12px;
}
.mpRoomRow .name { font-weight:700;color:var(--text); }
.mpRoomRow .meta { font-size:.78rem;color:var(--dim); }
.mpRoomRow button {
  padding:8px 14px;border-radius:8px;border:none;cursor:pointer;font-weight:700;
  background:var(--gold);color:#241a08;
}
.mpRoomRow button:disabled { background:#3a3128;color:var(--dim);cursor:default; }
.mpEmpty { color:var(--dim);font-size:.85rem;padding:10px 0;text-align:center; }

.mpHistoryHeader {
  display:flex;align-items:center;justify-content:space-between;margin-top:16px;
}
.mpHistoryList {
  margin-top:8px;max-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;
}
.mpHistoryRow {
  background:#1c150e;border:1px solid var(--wood-light);border-radius:10px;padding:10px 12px;
}
.mpHistoryTop { display:flex;justify-content:space-between;align-items:center;margin-bottom:4px; }
.mpHistoryRow .result { font-weight:800;font-size:.85rem;letter-spacing:.04em; }
.mpHistoryRow .result.win { color:var(--ok); }
.mpHistoryRow .result.loss { color:#d98b7f; }
.mpHistoryRow .meta { font-size:.78rem;color:var(--dim); }
.mpHistoryRow .name { color:var(--text); }

#roomView { flex:1 1 auto;min-height:0;flex-direction:column; }
.mpLeaveBtn { position:absolute;top:8px;right:10px; }
/* moninpelissä ✕ on rattaan vieressä, joten koko näyttö sen vasemmalla puolella */
#roomView #fsBtn { right:92px; }
.mpPreGame {
  padding:16px;display:flex;flex-direction:column;align-items:center;gap:12px;
}
.mpWaitMsg { color:var(--dim);font-size:.9rem; }
.mpPlayers {
  display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;justify-content:center;
}
.mpPlayerChip {
  display:flex;align-items:center;gap:6px;background:#1c150e;border:1px solid var(--wood-light);
  border-radius:20px;padding:5px 12px;font-size:.85rem;
}
.mpPlayerChip.cur { border-color:var(--gold-bright);box-shadow:0 0 8px rgba(255,214,107,.4); }
.mpPlayerChip.disconnected { opacity:.45; }
.mpPlayerChip.spectator { border-style:dashed;color:var(--dim); }
.mpPlayerChip.clickable { cursor:pointer; }
.mpPlayerChip.lastMark { border-style:dotted;color:var(--dim); }
.mpPlayerChip.lastMark b { color:var(--gold-bright); }
/* Odotushuoneen vuorojärjestys */
#mpPlayersPre { flex-direction:column;align-items:stretch;width:100%;max-width:340px;gap:4px; }
.mpOrderRow { display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;
  background:#1c150e;border:1px solid var(--wood-light);font-size:.9rem; }
.mpOrderRow.spectator { border-style:dashed;color:var(--dim); }
.mpOrderWho { flex:1;min-width:0;display:flex;align-items:center;gap:6px;cursor:pointer;overflow-wrap:anywhere; }
.mpOrderNo { color:var(--dim);min-width:1.4em;font-variant-numeric:tabular-nums; }
.mpOrderBtn { flex:none;width:30px;height:30px;padding:0;border-radius:8px;cursor:pointer;font-size:.95rem;
  background:#171009;color:var(--text);border:1px solid var(--wood-light); }
.mpOrderBtn:disabled { opacity:.25;cursor:default; }
.mpShuffleBtn { align-self:center;margin-top:6px;font:inherit;font-size:.85rem;padding:7px 12px;border-radius:10px;cursor:pointer;
  background:#171009;color:var(--text);border:1px solid var(--wood-light); }
.offPlayerBtns { display:flex;gap:8px;justify-content:center;flex-wrap:wrap; }
.mpGuestRow { display:flex;gap:6px;width:100%;max-width:340px; }
.mpGuestRow input { flex:1;min-width:0;margin-top:0; }
.mpGuestRow button { font:inherit;font-size:.9rem;padding:8px 12px;border-radius:10px;cursor:pointer;
  background:#171009;color:var(--text);border:1px solid var(--wood-light);white-space:nowrap; }
#mpGuestNote:empty { display:none; }
.mpWatchBox { margin:0 !important;text-transform:none !important;letter-spacing:normal !important;display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--dim);white-space:nowrap;cursor:pointer; }
.mpWatchBox:has(input:disabled) { cursor:default;opacity:.7; }
#peopleBtn { position:absolute;top:8px;right:130px;width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.45);border:1px solid rgba(224,169,61,.4);color:var(--gold);font-size:1rem;
  cursor:pointer;backdrop-filter:blur(3px);padding:0;line-height:1; }
#peopleList { text-align:left;margin-top:8px; }
.peopleHead { font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:14px 0 6px; }
.peopleRow { display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;background:rgba(0,0,0,.25);margin-bottom:4px; }
.peopleWho { flex:1;min-width:0;overflow-wrap:anywhere;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px; }
.peopleNote { flex-basis:100%;font-size:.72rem;color:var(--dim); }
.peopleSwatches { flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px; }
.peopleSw { width:22px;height:22px;border-radius:50%;padding:0;cursor:pointer;border:2px solid rgba(0,0,0,.45); }
.peopleSw.on { outline:2px solid var(--gold-bright);outline-offset:2px; }
.peopleSw:disabled { opacity:.2;cursor:default; }
.peopleActs { display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end; }
.peopleActs button, .dialogBtns button { font:inherit;font-size:.78rem;padding:5px 9px;border-radius:8px;cursor:pointer;
  background:#171009;color:var(--text);border:1px solid var(--wood-light); }
.peopleActs button.danger { color:#ff8a7e;border-color:#5a2a20; }
#dialogText { color:var(--text);font-size:.92rem;margin:10px 0 18px;line-height:1.4; }
.dialogBtns { display:flex;gap:10px;justify-content:center; }
.dialogBtns button { font-size:.95rem;padding:10px 18px; }
.dialogBtns button.danger { background:#b3261e;color:#fff;border-color:#d0463c; }

/* Offline: pelaajat tällä laitteella */
#offPlayers { display:flex;flex-direction:column;gap:6px; }
.offPlayerRow { display:flex;align-items:center;gap:8px; }
.offPlayerRow input { flex:1;min-width:0;padding:10px 12px;border-radius:10px;font-size:1rem;
  background:#120d08;color:var(--text);border:1px solid var(--wood); }
.offColor { width:30px;height:30px;flex:none;border-radius:50%;border:2px solid rgba(0,0,0,.5);cursor:pointer;padding:0; }
.offRemove { flex:none;background:none;border:none;color:var(--dim);font-size:1rem;cursor:pointer;padding:4px 6px; }
.offRemove:hover { color:#ff6b5e; }
.offAddBtn { margin-top:8px;font:inherit;font-size:.9rem;padding:8px 12px;border-radius:10px;cursor:pointer;
  background:#171009;color:var(--text);border:1px solid var(--wood-light); }
#offlineView .bigBtn { margin-top:12px; }
.modeTab { font-family:inherit;background:none;cursor:pointer; }