/* MagicAIl Table — styles: the game form, pre-game, building and ready screens.
   The styles are split into files in their old order (build 71, before: one style.css); index.html loads them in
   this order, so later rules still win over earlier ones. */

/* ---------- Game form ---------- */

.game-form {
  display: grid;
  grid-template-columns: 1fr 110px 150px;
  gap: 14px;
  align-items: end;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

select,
.input {
  width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font: 15px var(--font-body);
}

select {
  appearance: none;
  background: var(--surface-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a24a' stroke-width='1.6' fill='none'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  padding-right: 36px;
}

.input::placeholder { color: var(--muted); }
.input.invalid { border-color: var(--red); }

select:disabled,
.input:disabled { cursor: not-allowed; }

/* Commander: the deck size is fixed at 100. */
#deck-size:disabled { opacity: 0.6; }

select:focus-visible,
.input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.btn-start {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: var(--gold);
  color: #1a1408;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
}

.btn-start:hover:not(:disabled) { filter: brightness(1.1); }
.btn-start:disabled { opacity: 0.4; cursor: not-allowed; }

.form-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-top: 6px;
}

.form-actions .btn-start { margin-top: 0; grid-column: auto; }

.btn-secondary {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.btn-secondary:hover:not(:disabled) { background: var(--gold-soft); }
.btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Pre-game ---------- */

.step.done .step-num {
  border-color: var(--green);
  background: rgba(79, 191, 117, 0.14);
  color: var(--green);
}

.summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, auto);
  gap: 14px;
  margin: 12px 0 18px;
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.summary-value {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
}

.summary-item:not(:first-child) .summary-value { white-space: nowrap; }

.set-icon {
  font-size: 22px;
  color: var(--gold);
}

/* Set symbol (Keyrune) next to the edition dropdown. */
.edition-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.edition-row select { flex: 1; min-width: 0; }

.edition-symbol {
  font-size: 30px;
  color: var(--gold);
  flex: none;
}

/* Game mode: the dropdown with a short line on what the mode means next to it. */
.field-mode { grid-column: 1 / -1; }

.mode-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  align-items: center;
}

.mode-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

/* How many AIs play: a row like the game mode, with a line on who plays. */
.field-players { grid-column: 1 / -1; }

/* Commander: what the chosen power level means, under the form fields. */
.power-hint {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.power-hint b { color: var(--text); }

.check-field {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.check-field input { margin-top: 3px; accent-color: var(--gold); width: 16px; height: 16px; }
.check-field strong { color: var(--text); }

/* Mana symbols (Mana font) inside text. */
.ms-cost { font-size: 0.9em; margin: 0 1px; }
.log .ms-cost { font-size: 0.85em; }

/* ---------- Building ---------- */

.step.building {
  text-align: center;
  padding: 40px 24px;
}

.center-title {
  font-family: var(--font-display);
  margin: 18px 0 4px;
}

.spinner {
  width: 54px;
  height: 54px;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid var(--gold-soft);
  border-top-color: var(--gold);
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.status-feed {
  list-style: none;
  margin: 20px auto 0;
  padding: 0;
  max-width: 460px;
  text-align: left;
}

.status-feed li {
  padding: 8px 12px;
  border-left: 2px solid var(--border);
  color: var(--muted);
  animation: fade-in 0.4s ease;
}

.cancel-build { margin-top: 22px; padding: 10px 28px; font-size: 15px; }

.status-feed li:last-child {
  border-left-color: var(--gold);
  color: var(--text);
}

.status-feed time,
.log time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-right: 6px;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Ready for action ---------- */

.step.ready {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.step.ready .btn-start { width: 100%; max-width: 360px; margin-top: 18px; }

/* Build 143: one AI's deck — the pile, "Click to show the deck" and its note centered under each other (the wrapper of
   build 79 had no layout, so the pile sat on the left and the link next to it). */
.ready-single { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.ready-single > .decklist { align-self: stretch; }

.ready-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 36px) !important;
  color: var(--gold);
  letter-spacing: 0.08em !important;
  margin: 0 0 6px !important;
  animation: fade-in 0.6s ease;
}

.rematch-note {
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  font-weight: 600;
  font-size: 14px;
}

.deck-value {
  margin: -4px 0 8px;
  font-size: 14px;
  color: var(--muted);
}

.deck-value b { color: var(--gold); }

.deck-commander {
  margin: -2px 0 8px;
  font-size: 14px;
  color: var(--muted);
}

.deck-commander b { color: var(--gold); }
.deck-value.over b { color: var(--red); }

.deck-entry-price {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(13, 19, 16, 0.88);
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
}

.deck-entry-price.no-price { color: var(--red); }

.btn-import { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.btn-import small { font: 400 11px var(--font-body); letter-spacing: 0; color: var(--muted); margin-top: 2px; }

.deck-source {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.deck-colors {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
}

.pips { display: inline-flex; gap: 4px; }

.pip {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font: 700 12px var(--font-body);
  border: 1px solid rgba(0, 0, 0, 0.4);
}

.pip-W { background: #f6eed3; color: #5a4d2b; }
.pip-U { background: #3f86c8; color: #fff; }
.pip-B { background: #2d2a2a; color: #d8d0c8; border-color: #555; }
.pip-R { background: #d9513c; color: #fff; }
.pip-G { background: #3e9455; color: #fff; }
.pip-C { background: #a9a9a2; color: #222; }

.deck-pile {
  position: relative;
  width: calc(var(--card-w) * 1.35);
  aspect-ratio: 63 / 88;
  margin: 10px 0 4px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.deck-pile .card-back {
  position: absolute;
  inset: 0;
  width: 100%;
}

.deck-pile .card-back:nth-child(1) { transform: translate(6px, 6px); }
.deck-pile .card-back:nth-child(2) { transform: translate(3px, 3px); }
.deck-pile:hover .card-back:nth-child(3) { transform: translateY(-4px); }
.deck-pile .card-back { transition: transform 0.2s; }

.deck-count {
  position: absolute;
  right: -10px;
  bottom: -10px;
  background: var(--gold);
  color: #1a1408;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px;
}

.decklist {
  width: 100%;
  text-align: left;
  margin-top: 8px;
}

.decklist h4 {
  font-family: var(--font-display);
  margin: 18px 0 8px;
}

.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}

.deck-entry {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

.deck-entry img,
.deck-entry .text-card {
  width: 100%;
  border-radius: var(--card-r);
  display: block;
}

.deck-entry-count {
  position: absolute;
  left: 4px;
  bottom: 4px;
  background: rgba(10, 14, 12, 0.85);
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
  border-radius: 6px;
  padding: 1px 6px;
}

/* ---------- Pre-game: the decks per AI (when more than one AI plays) ---------- */

.seat-decks { margin: 4px 0 18px; }
.seat-decks[hidden] { display: none; }

.seat-deck-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seat-deck-list li {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.seat-deck-list li.missing { border-color: var(--gold); }
.seat-deck-name { font-family: var(--font-display); font-weight: 700; }
.seat-deck-status { color: var(--muted); font-size: 14px; }
.seat-deck-list li.ready .seat-deck-status { color: var(--text); }

@media (max-width: 620px) {
  .seat-deck-list li { grid-template-columns: 1fr auto; }
  .seat-deck-status { grid-column: 1 / -1; grid-row: 2; }
}

/* Ready screen: the other AIs' decks in one line. */
.ready-others { margin: 4px 0 0; color: var(--muted); font-size: 14px; text-align: center; }
.ready-others[hidden] { display: none; }