/* The dark-UI base shared by the multiplayer page (style.css) and the admin panel
   (admin/admin.css): palette, reset, the page column and its cards, buttons,
   the .row of controls, the roster, modals, and the connection-info rows. What
   one page alone uses stays in that page's own file. Loaded first, so a page's
   rules override these. */
:root {
  color-scheme: dark;
  --bg: #0f1218;
  --panel: #1a1f2a;
  --panel-2: #232938;
  --text: #e8eaf0;
  --muted: #8993a8;
  --accent: #5aa9ff;
  --danger: #ff6b6b;
  --danger-hi: #ff9a9a;
  --you: #6cd28b;
  --host: #b388ff;
  --warn: #ffc861;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* The page column and the panels in it: the room panel, an admin room card. */
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 6px;
}

.card {
  background: var(--panel);
  border-radius: 12px;
  padding: 12px 6px;
}

/* One unified button style: a subdued muted outline that reveals the accent on
   hover (the same gray-rest / blue-hover language as the icon buttons). No
   primary/secondary split — coming just to chat is a valid visit, so no single
   action earns extra emphasis. Hovers touch only color/border-color (never
   background) so they don't leak onto the transparent glyph/list buttons.
   Deliberately NOT theme.css's gradient .btn-primary/.btn-secondary: these are
   flat dark-UI DOM pages, not felt-game canvas overlays, so they don't link
   theme.css and shouldn't be "consolidated" onto it. Keep these here. */
button {
  font: inherit;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--muted);
  border-radius: 6px;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
}

button:hover { color: var(--accent); border-color: var(--accent); }
button:disabled { opacity: 0.45; cursor: default; }
button:disabled:hover { color: var(--muted); border-color: var(--muted); }

.hidden { display: none; }

/* A one-line message under a form or list; errors turn red. Margins are per page. */
.status { color: var(--muted); min-height: 1.2em; }
.status:empty { display: none; }
.status.error { color: var(--danger); }

/* A player's name in a roster (playerName in ui.js), plus the host star. */
.player-name.clickable { cursor: pointer; }
.player-name.clickable:hover { text-decoration: underline; }
.off .player-name { color: var(--muted); text-decoration: line-through; }
.host-badge { color: var(--host); }

/* A room's player list: the room's #players and the admin's live roster. */
.roster { margin: 0; padding-left: 20px; }
.roster li { overflow-wrap: anywhere; }
.roster li .kick { background: none; border: none; color: var(--danger); font: inherit; padding: 0 8px; cursor: pointer; }
.roster li .kick:hover { color: var(--danger-hi); }
/* Left padding only: the trailing controls each own an 8px gap on their left,
   so the star + pencil (host viewing themselves) don't stack to a 16px gap.
   Left at baseline alignment: the ✎ and ★ unicode glyphs sit at different
   heights per platform (✎ high, ★ low on Android), so no single vertical-align
   centers both across devices; an SVG-icon swap would be the robust fix. */
.roster li .host-badge { padding: 0 0 0 8px; }

/* A room's chat log, one chatLi (ui.js) per line. */
.chat-log {
  list-style: none;
  margin: 0;
  padding: 6px;
  font-size: 0.9rem;
  max-height: 240px;
  overflow-y: auto;
  background: var(--panel-2);
  border-radius: 6px;
}
.chat-log li { margin: 2px 0; overflow-wrap: anywhere; }
.chat-log li .ts { color: var(--muted); }
.chat-log li b { color: var(--accent); font-weight: 600; }
.chat-log li.you b { color: var(--you); }
.chat-log li.system { color: var(--muted); font-style: italic; }
.chat-log li.system .ts { font-style: normal; }
.chat-log:empty::after { content: "no messages yet"; color: var(--muted); }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-top: 12px;
}

.row .sep { align-self: center; color: var(--muted); }

.modal { position: fixed; inset: 0; z-index: 100; padding: 16px;
  background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-card { background: var(--panel); border-radius: 12px; padding: 20px;
  width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; }
h3 { font-size: 0.95rem; margin: 12px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.modal-card h3 { margin: 0 0 12px; }
.modal-card h4 { font-size: 0.85rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.05em; margin: 16px 0 8px; }
.modal-card .row { justify-content: center; }

/* Connection-info popup rows (label left, value right). */
.info-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 0.9rem; border-top: 1px solid var(--panel-2); }
.info-row:first-child { border-top: none; }
.info-k { color: var(--muted); white-space: nowrap; }
.info-v { color: var(--text); text-align: right; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .card { padding: 10px 6px; }
  .row { flex-direction: column; align-items: stretch; }
  .row .sep { display: none; }
}