/* lobby-card.css — Phase 7 in-game lobby overlay.
 *
 * Shown when window.ApexState.getState().gamePhase === 'lobby'. Centered
 * card over the map viewport with roster + start button (host) /
 * "waiting for host" text (non-host) + a shareable invite link.
 *
 * Vanishes the instant phase transitions to 'planning'. */

/* Phase 31 polish (2026-05-19 evening): heavy blur + darken on the
   map (and any other map-floating chrome) while the game is in
   the lobby phase, so the boarding card sits over a quiet
   surface instead of a competing terrain pattern. The map canvas
   itself is left alone — we filter the whole map-viewport
   container so the side panels and overlays go quiet too. */
body[data-apex-phase="lobby"] #map-viewport {
  filter: blur(14px) brightness(0.45) saturate(0.6);
}
/* Soft dark overlay on top of the blurred map so the card has
   plenty of contrast regardless of what tiles ended up under it. */
body[data-apex-phase="lobby"] #map-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 16, 0.55);
  pointer-events: none;
  z-index: 80;   /* above map chrome, below the lobby card (z:90) */
}

/* Phase 27 polish (2026-05-20): the boarding view is now its own
   page (dropship.html). The game HUD doesn't exist on that page —
   no need for CSS-hide rules. The few elements left here that the
   index.html bootstrap might briefly render before redirecting are
   the only ones still gated on the lobby phase (the action-cluster
   is hidden by hud-game.js's syncPhaseAttribute anyway). */

.apex-lobby-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 90;
  background: rgba(20, 18, 28, 0.96);
  border: 1px solid #6b5a3a;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  border-radius: 12px;
  padding: 22px 26px;
  min-width: 360px;
  max-width: 480px;
  color: #f0e7d4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.apex-lobby-card[hidden] { display: none !important; }

.apex-lobby-card h2 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
}
.apex-lobby-card .lobby-card-sub {
  margin: 0 0 16px 0;
  font-size: 12px;
  color: #c1ad7a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.apex-lobby-card .lobby-roster {
  border-top: 1px solid #3a3145;
  border-bottom: 1px solid #3a3145;
  padding: 10px 0;
  margin-bottom: 14px;
  max-height: 200px;
  overflow-y: auto;
}
.apex-lobby-card .lobby-roster-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 4px;
  font-size: 13px;
}
.apex-lobby-card .lobby-roster-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #555;            /* unset fallback so a new color always shows */
  padding: 0;
  position: relative;
}
/* Phase 31 polish (2026-05-19 evening): five Mars-friendly colors;
   legacy keys (red/yellow/orange) kept for old games on disk. */
.apex-lobby-card .lobby-roster-dot.color-teal    { background: #4dd0c5; }
.apex-lobby-card .lobby-roster-dot.color-blue    { background: #4a8fd6; }
.apex-lobby-card .lobby-roster-dot.color-green   { background: #4eb87c; }
.apex-lobby-card .lobby-roster-dot.color-purple  { background: #a374d8; }
.apex-lobby-card .lobby-roster-dot.color-pink    { background: #e576c0; }
.apex-lobby-card .lobby-roster-dot.color-red     { background: #d44848; }
.apex-lobby-card .lobby-roster-dot.color-yellow  { background: #e6c84a; }
.apex-lobby-card .lobby-roster-dot.color-orange  { background: #e69447; }
/* Only the viewer's own row turns the dot into an interactive
   button — click opens the inline color dropdown. */
.apex-lobby-card .lobby-roster-row.is-you .lobby-roster-dot {
  cursor: pointer;
  border-color: rgba(255, 255, 255, 0.6);
}
.apex-lobby-card .lobby-roster-row.is-you .lobby-roster-dot:hover {
  transform: scale(1.12);
  border-color: #fff;
}
.apex-lobby-card .lobby-roster-row.is-you .lobby-roster-dot::after {
  /* Tiny caret-down indicator on the player's own dot so the
     affordance reads as "click to change". */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid rgba(255, 255, 255, 0.7);
}

/* Inline color-picker dropdown that hangs off the player's own dot.
   z-index must clear the lobby card (z:90) since the popover is
   appended to document.body and positioned over the card. */
.apex-lobby-color-pop {
  position: absolute;
  z-index: 110;
  display: flex;
  gap: 6px;
  background: var(--apex-bg-panel, rgb(14, 18, 28));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}
.apex-lobby-color-pop .apex-color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.apex-lobby-color-pop .apex-color-swatch:hover:not(:disabled) {
  transform: scale(1.12);
  border-color: rgba(255, 255, 255, 0.85);
}
.apex-lobby-color-pop .apex-color-swatch:disabled,
.apex-lobby-color-pop .apex-color-swatch.is-taken {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.apex-lobby-card .lobby-roster-name {
  flex: 1 1 auto;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apex-lobby-card .lobby-roster-role {
  font-size: 11px;
  color: #c1ad7a;
  padding: 1px 7px;
  border: 1px solid #6b5a3a;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.apex-lobby-card .lobby-roster-row.is-you {
  background: rgba(193, 173, 122, 0.08);
  border-radius: 6px;
}
.apex-lobby-card .lobby-roster-you-tag {
  font-size: 11px;
  color: #c1ad7a;
  font-style: italic;
}

.apex-lobby-card .lobby-share {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.apex-lobby-card .lobby-share input {
  flex: 1 1 auto;
  background: #1a1525;
  border: 1px solid #3a3145;
  border-radius: 6px;
  color: #f0e7d4;
  padding: 6px 10px;
  font-family: "SF Mono", Monaco, Menlo, monospace;
  font-size: 12px;
  outline: none;
}
.apex-lobby-card .lobby-share button {
  background: #3a3145;
  border: 1px solid #6b5a3a;
  color: #f0e7d4;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.apex-lobby-card .lobby-share button:hover { background: #4a4055; }

/* Phase 27 polish (2026-05-20): host's turn-duration picker. Sits
   between the share row and the action buttons. Host gets a select;
   non-hosts see a read-only label so they know what duration the
   captain has chosen. */
.apex-lobby-card .lobby-turn-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 12px 0;
  padding: 10px 14px;
  background: rgba(20, 28, 40, 0.55);
  border: 1px solid rgba(120, 150, 175, 0.25);
  border-radius: 7px;
  font-size: 13px;
  color: #d8e2ee;
}
.apex-lobby-card .lobby-turn-picker label,
.apex-lobby-card .lobby-turn-picker .lobby-turn-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: rgba(193, 173, 122, 0.95);
  font-weight: 600;
}
.apex-lobby-card .lobby-turn-picker select {
  background: rgba(15, 17, 23, 0.85);
  color: #d8e2ee;
  border: 1px solid rgba(120, 150, 175, 0.45);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  cursor: pointer;
}
.apex-lobby-card .lobby-turn-picker select:focus {
  outline: 2px solid rgba(77, 208, 197, 0.6);
  outline-offset: 1px;
}
.apex-lobby-card .lobby-turn-picker .lobby-turn-value {
  font-weight: 600;
  color: var(--apex-accent, #4dd0c5);
}

.apex-lobby-card .lobby-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.apex-lobby-card .lobby-btn-primary {
  flex: 1 1 auto;
  background: linear-gradient(180deg, #c08a3e 0%, #8a5e1f 100%);
  border: 1px solid #c1ad7a;
  color: #fff;
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.apex-lobby-card .lobby-btn-primary:hover { background: linear-gradient(180deg, #d8a04e 0%, #9c6c2a 100%); }
.apex-lobby-card .lobby-btn-primary[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  background: #3a3145;
}
.apex-lobby-card .lobby-btn-ghost {
  background: transparent;
  border: 1px solid #6b5a3a;
  color: #c1ad7a;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.apex-lobby-card .lobby-btn-ghost:hover { background: rgba(193, 173, 122, 0.12); color: #f0e7d4; }

.apex-lobby-card .lobby-waiting {
  flex: 1 1 auto;
  text-align: center;
  font-size: 13px;
  color: #c1ad7a;
  font-style: italic;
  padding: 10px;
  border: 1px dashed #6b5a3a;
  border-radius: 6px;
}
.apex-lobby-card .lobby-waiting::after {
  content: "";
  display: inline-block;
  width: 6px;
  text-align: left;
  animation: lobby-dots 1.4s steps(4) infinite;
}
@keyframes lobby-dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}

.apex-lobby-card .lobby-error {
  margin-top: 10px;
  background: rgba(122, 30, 22, 0.35);
  border: 1px solid #7a1e16;
  color: #ffd0c8;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
}

/* Bottom-bar Start button (host only) — replaces the End Turn button
   while in lobby phase. Mirrors apex-end-turn-btn styling. */
.apex-start-game-btn {
  background: linear-gradient(180deg, #c08a3e 0%, #8a5e1f 100%);
  border: 1px solid #c1ad7a;
  color: #fff;
  border-radius: 7px;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.apex-start-game-btn:hover { background: linear-gradient(180deg, #d8a04e 0%, #9c6c2a 100%); }
.apex-start-game-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.apex-bottom-bar-waiting {
  color: #c1ad7a;
  font-size: 13px;
  font-style: italic;
  padding: 0 12px;
}

/* Footer game menu — right side of #hud-footer-bar. Persistent
   controls available in every phase (lobby/planning/resolving/ended). */
#apexServerInfo {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Phase 10b (2026-05-18 evening): chip pinned to the same height as
   the icon buttons next to it (height: 30px, box-sizing: border-box).
   The 1 px vertical padding previously rendered the chip at ~18 px
   while the icon buttons came in at ~30 px (16 px icon + 6 px ×2
   padding + 2 px border), making the row look mismatched. Explicit
   height + inline-flex centring forces all three footer controls
   into the same baseline. */
.apex-footer-game-id {
  display: inline-flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
  padding: 0 8px;
  font-family: "SF Mono", Monaco, Menlo, monospace;
  font-size: 11px;
  color: #c1ad7a;
  background: rgba(193, 173, 122, 0.08);
  border: 1px solid #6b5a3a;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
/* Footer action buttons — solid pill-shaped controls. "Back to lobby"
   uses the neutral gold accent, "Surrender" uses a warning red tone.
   Both sit in #apexServerInfo (right side of #hud-footer-bar). */
.apex-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #6b5a3a;
  background: rgba(193, 173, 122, 0.10);
  color: #f0e7d4;
  letter-spacing: 0.02em;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  white-space: nowrap;
}
.apex-footer-link:hover {
  background: rgba(193, 173, 122, 0.22);
  border-color: #c1ad7a;
  color: #fff;
  text-decoration: none;
}
.apex-footer-link-leave {
  color: #ffd0c8;
  border-color: #7a2a22;
  background: rgba(122, 30, 22, 0.18);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.apex-footer-link-leave:hover {
  background: rgba(255, 96, 80, 0.28);
  border-color: #ff7060;
  color: #fff;
}
/* Phosphor SVG icon inside the footer buttons — sized 16px, tints
   to button text color via currentColor. */
.apex-footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.apex-footer-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.apex-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Icon-only variant (Surrender) — drop the inner label/letter spacing
   so it lays out cleanly as a square button. */
/* Phase 10b (2026-05-18 evening): pin the icon-only footer buttons to
   the exact same 30 px box height as the game-id chip on their left
   so the row reads as one consistent strip regardless of icon /
   border / font tweaks. */
.apex-footer-link.apex-footer-icon-only {
  height: 30px;
  box-sizing: border-box;
  padding: 0 8px;
  letter-spacing: 0;
  font-weight: 600;
}
.apex-footer-link.apex-footer-icon-only .apex-footer-label { display: none; }

/* 2026-05-29 (Phase 64 follow-up): storyline picker on the dropship
   lobby card. Mirrors .lobby-turn-picker styling exactly so the two
   pickers read as a paired pair. */
.apex-lobby-card .lobby-storyline-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px 0;
  padding: 10px 14px;
  background: rgba(20, 28, 40, 0.55);
  border: 1px solid rgba(120, 150, 175, 0.25);
  border-radius: 7px;
  font-size: 13px;
  color: #d8e2ee;
}
.apex-lobby-card .lobby-storyline-picker label,
.apex-lobby-card .lobby-storyline-picker .lobby-storyline-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: rgba(193, 173, 122, 0.95);
  font-weight: 600;
}
.apex-lobby-card .lobby-storyline-picker select {
  background: rgba(15, 17, 23, 0.85);
  color: #d8e2ee;
  border: 1px solid rgba(120, 150, 175, 0.45);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  cursor: pointer;
  max-width: 240px;
}
.apex-lobby-card .lobby-storyline-picker select:focus {
  outline: 2px solid rgba(77, 208, 197, 0.6);
  outline-offset: 1px;
}
.apex-lobby-card .lobby-storyline-picker .lobby-storyline-value {
  font-weight: 600;
  color: var(--apex-accent, #4dd0c5);
}