/* Multiplayer-only styles. Loaded *after* /shared/style_common.css.
   Mostly the auth/lobby views and the inline opponent-stats /
   character-deckbox row that replace SP's playmat layout. */

.player.opponent {
  background: #1a1d23;
  border-color: #2a2e36;
  flex: 0 0 280px;
  min-width: 280px;
}
.player.opponent h2 { font-size: 15px; color: #b9bfca; }

#phase-timer.timer {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 4px;
  background: #2a2e36;
  color: #cfd6e3;
}
#phase-timer.timer.expired {
  background: #5a1f1f;
  color: #ffcaca;
}
.phase-timer-row { align-items: center; }
.phase-timer-row .phase-timer-intro {
  flex-basis: 100%;
  font-size: 12px;
  color: #9aa3b1;
  margin-bottom: 4px;
}
.phase-timer-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: #cfd6e3;
}
.phase-timer-cell input {
  width: 5em;
  padding: 4px 6px;
  font: inherit;
  background: #1f242c;
  color: #e8e8e8;
  border: 1px solid #2a2e36;
  border-radius: 4px;
}

.opponent-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.opponent-stats .stat {
  background: #2a2f38;
  border-radius: 4px;
  padding: 6px 8px;
  text-align: center;
}
.opponent-stats .stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9aa3b1;
}
.opponent-stats .stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #e8e8e8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* ----- Tournament-specific layout ----- */

.tourney-wrap {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}


/* ----- Tournament: character + deckbox row ----- */

.char-deckbox-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 12px;
}
/* The character card now uses the standard .card frame with the actual
   scanned art as its body. We just nudge the flex sizing so it sits
   nicely next to the deckbox row in the tournament view. */
.tourney-character {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1.5;
}

/* ---- Header room badge / leave button ---- */
.room-code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  background: #2a2f38;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 12px;
  letter-spacing: 0.1em;
}
#leave-room {
  margin-left: 8px;
  background: #3a2530;
  color: #e8d0c0;
  border: 1px solid #5a3540;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}
#leave-room:hover { background: #4a2c40; }

.user-strip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #b0c0b0;
}
#user-name {
  font-family: ui-monospace, SFMono-Regular, monospace;
  background: #243028;
  padding: 2px 8px;
  border-radius: 4px;
}
#logout-btn {
  background: #243028;
  color: #c0d0c0;
  border: 1px solid #36482e;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}
#logout-btn:hover { background: #2c3a30; }

/* ---- Landing & lobby ---- */
.landing-wrap, .lobby-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.home-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 18px;
  text-align: left;
  background: #2a2f38;
  border: 1px solid #3a3f48;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.home-tile:hover { background: #323844; border-color: #5a6070; }
.home-tile-title { font-size: 18px; font-weight: 600; color: #e8e8e8; }
.home-tile-blurb { font-size: 13px; color: #9aa3b1; line-height: 1.4; }
.home-back-bar { display: flex; }
.lobby-head h2 { margin-top: 0; letter-spacing: 0.1em; }
.lobby-warn {
  background: #3a2a25;
  border-left: 3px solid #c08050;
  padding: 6px 10px;
  margin: 8px 0 0;
  color: #e0c8b0;
}
.lobby-seats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.lobby-seat {
  background: #2a2f38;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid #3a3f48;
}
.lobby-seat-open    { border-style: dashed; opacity: 0.85; }
.lobby-seat-closed  { opacity: 0.55; }
.lobby-seat-ai      { border-color: #4a5060; }
.lobby-seat.is-you  { outline: 2px solid #6a8a6a; }
.lobby-seat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.lobby-seat-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #b0b0b0;
}
.lobby-seat .setup-row { margin-top: 6px; }
.lobby-seat label { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.lobby-seat select,
.lobby-seat input[type="text"],
.lobby-seat input[type="number"] {
  background: #1e2228;
  color: #e8e8e8;
  border: 1px solid #3a3f48;
  border-radius: 4px;
  padding: 4px 6px;
}