/* MagicAIl Table — styles: the start page around the game (build 79). Masked connector addresses, save slots, the
   AIs' decks side by side, the quick chat (Enter) and the cards an AI points at (yellow, blinking).
   Loaded last (index.html), so these rules win over the older files. */

/* ---------- The page a little wider when several AIs stand side by side ---------- */

.page.mid { max-width: 1180px; }

/* ---------- Masked addresses ---------- */

.seat-urls { display: flex; flex-direction: column; gap: 6px; }
.secret-field { gap: 8px; }
.secret-field .secret-name { flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.secret-field .secret-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.12em; color: var(--muted); }
.secret-field .secret-value.shown { letter-spacing: normal; color: var(--text); white-space: normal; overflow-wrap: anywhere; }
.secret-hint { margin-top: 8px; }

@media (max-width: 620px) {
  .secret-field { flex-wrap: wrap; }
  .secret-field .secret-name { min-width: 0; flex-basis: 100%; }
}

/* ---------- Save slots ---------- */

.save-list { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.save-slot {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: 400 15px var(--font-body);
  text-align: left;
  cursor: pointer;
}

.save-slot:hover { border-color: var(--gold); background: var(--gold-soft); }
.save-slot:disabled { opacity: 0.6; cursor: progress; }
/* Build 87: an AI of that game is not connected — greyed, with who is missing. */
.save-slot[title]:disabled { opacity: 0.45; cursor: not-allowed; background: var(--surface-2); border-color: var(--border); }
.save-slot-missing { margin-left: auto; font-size: 13px; color: var(--red); }
.save-list li:first-child .save-slot { border-color: var(--gold); }
.save-slot-name { flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; color: var(--gold); }
.save-slot-info { color: var(--muted); }

/* ---------- The AIs' decks side by side ---------- */

.seat-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.seat-cols.multi { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
#ready-deck-list { width: 100%; margin: 14px 0 6px; text-align: left; }

.seat-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}

.seat-col.missing { border-color: var(--gold); }
.seat-col.building { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-soft) inset; }
.seat-col.ready { border-color: var(--green); }
.seat-col.offline { opacity: 0.9; }

.seat-col-head { display: flex; align-items: center; gap: 8px; }
.seat-col-head .seat-deck-name { font-size: 17px; }
.seat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.seat-dot.on { background: var(--green); box-shadow: 0 0 8px var(--green-glow); }

.seat-col-status { margin: 0; color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.seat-col-status.ready { color: var(--text); }
.seat-col-line { margin: 0; font-size: 14px; color: var(--muted); }
.seat-col-line b { color: var(--text); }
.seat-col .copy-field { margin-top: 0; }

.spinner.mini { width: 16px; height: 16px; margin: 0; border-width: 2px; flex: none; }

.status-feed.seat-feed { margin: 0; max-width: none; max-height: 220px; overflow-y: auto; font-size: 13px; }
.status-feed.seat-feed li { padding: 4px 8px; }

.deck-pile.mini { width: 74px; margin: 2px 0 0; align-self: center; }
.deck-pile.mini .deck-count { font-size: 15px; }
.seat-col .btn-link { align-self: center; }

.seat-decklist { max-height: 320px; overflow-y: auto; font-size: 13px; }
.seat-decklist h4 { margin: 8px 0 2px; font-size: 13px; }
.seat-decklist ul { list-style: none; margin: 0; padding: 0; }
.seat-deck-card { background: none; border: none; padding: 1px 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.seat-deck-card:hover { color: var(--gold); }

.seat-col-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; padding-top: 4px; }
.seat-col-actions .btn-copy:disabled { cursor: default; }

/* Done: green with a check ("Build new" pressed, the import worked). */
.btn-copy.done { color: var(--green); border-color: var(--green); background: rgba(79, 191, 117, 0.12); }

/* ---------- Quick chat (Enter) ---------- */

.chat-quick {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 70;
  width: min(620px, calc(100vw - 32px));
  transform: translateX(-50%);
  padding: 10px 12px 8px;
  border: 1px solid var(--gold);
  border-radius: 14px;
  background: rgba(13, 19, 16, 0.94);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
}

.chat-quick.whisper { border-color: #f3d36b; }
.chat-quick-form { display: flex; align-items: center; gap: 10px; }
.chat-quick-to { flex: none; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--gold); white-space: nowrap; }
.chat-quick-to.whisper { color: #f3d36b; font-style: italic; }
.chat-quick-to::after { content: ":"; }

#chat-quick-text {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: 400 16px var(--font-body);
  outline: none;
}

#chat-quick-text:focus { border-color: var(--gold); }
.chat-quick.whisper #chat-quick-text { font-style: italic; }
/* Build 150: the chat so far, a narrow strip above the field (about five lines, scrolls). */
.chat.chat-quick-log { flex: none; min-height: 0; max-height: 122px; margin: 0 0 8px; padding: 0 6px 0 2px; scrollbar-width: thin; }
.chat.chat-quick-log li { padding: 3px 0; }
/* Build 151: no time in the strip (the Chat tab keeps it). */
.chat.chat-quick-log time { display: none; }
.chat-quick-keys { margin: 6px 0 0; font-size: 11px; color: var(--muted); text-align: center; }
.chat-quick-error { margin: 6px 0 0; font-size: 13px; }

/* ---------- Cards an AI points at: a yellow frame that blinks ---------- */

#game-screen .slot.pointed > .card,
#game-screen .pointed:not(.slot) {
  animation: point-blink 0.9s ease-in-out infinite;
  border-radius: 6px;
  z-index: 3;
}

@keyframes point-blink {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 214, 64, 0.35), 0 0 8px rgba(255, 214, 64, 0.25); }
  50% { box-shadow: 0 0 0 4px #ffd640, 0 0 28px rgba(255, 214, 64, 0.95); }
}

@media (prefers-reduced-motion: reduce) {
  #game-screen .slot.pointed > .card,
  #game-screen .pointed:not(.slot) { animation: none; box-shadow: 0 0 0 4px #ffd640, 0 0 22px rgba(255, 214, 64, 0.8); }
}

/* Build 87: "Continue a saved game" folded by default — a click on the head opens it. */
.saves-toggle { cursor: pointer; user-select: none; }
.saves-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 8px; }
/* Build 88: the chevron of step 1 — down when folded, up when open; "3 saved games" next to it. */
#saves-step:not(.saves-folded) .chevron { transform: rotate(-135deg); margin-bottom: -4px; }
.saves-toggle .step-toggle-hint { margin-left: auto; }
/* Build 89: greyed (Sir Mulligan not connected) — it can't be opened. */
#saves-step.locked .saves-toggle { cursor: default; }
.saves-folded .saves-body { display: none; }
.saves-folded .step-head { margin-bottom: 0; }

/* Build 90: the warning under the address in dark red. */
.secret-hint,
.secret-hint strong { color: #c0392b; }
/* Build 94: the warning a little bigger; the Show button an eye. */
.secret-hint { font-size: 15px; }
/* Build 135: the note centered and in italics. */
.secret-hint { text-align: center; font-style: italic; }
.btn-eye { display: inline-grid; place-items: center; min-width: 44px; }
.btn-eye svg { display: block; width: 16px; height: 16px; }
/* Build 95: the eye and Copy the same height. */
.secret-field .btn-copy { display: inline-grid; place-items: center; height: 28px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }

/* Build 94: "Game setup" stays a single line (no fold arrow) until Sir Mulligan is connected, then opens by itself. */
#step-3.locked > :not(.step-head) { display: none; }
#step-3.locked > .step-head { margin-bottom: 0; }

/* Build 101: the lobby of a saved game — like the pre-game screen; an AI out of that game with a skull. */
.lobby-slot { margin: 4px 0 6px; font-weight: 600; }
.seat-col.lobby-out { opacity: 0.85; }
.lobby-rip { display: flex; flex-direction: column; align-items: center; margin: 4px 0 0; line-height: 1; }
.save-slot.missing { opacity: 0.8; }

/* Build 113: "About the open-source project" — a folded step at the end of the start page (native <details>). */
.about-step > summary { list-style: none; cursor: pointer; user-select: none; margin-bottom: 0; }
.about-step > summary::-webkit-details-marker { display: none; }
.about-step > summary .chevron { margin-left: auto; }
.about-step[open] > summary { margin-bottom: 12px; }
.about-step[open] > summary .chevron { transform: rotate(-135deg); margin-bottom: -4px; }
.about-step > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 8px; }
.about-body p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.about-body p:last-child { margin-bottom: 0; }
.about-body strong { color: var(--text, inherit); }