:root {
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.4;
  font-weight: 400;

  --card-bg: #fdfdf8;
  --card-border: #111111;
  --muted-text: #444444;
  --hero-bg: #4369a3;
  --mech-bg: #802440;
  --bond-fast: #d9a400;
  --bond-tank: #2f8f46;
  --bond-arsenal: #c0392b;
  --bond-stable: #5c6b73;
  --bond-elemental: #2596be;

  --spacing-sm: 12px;
  --spacing-md: 14px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --app-bg: #14151a;
  --app-surface: #1d1f26;
  --app-surface-2: #23252e;
  --app-border: #2c2e38;
  --app-text: #f2f2f0;
  --app-muted: #a5a7b3;
  --accent: #6d9eff;
  --accent-strong: #4f7fe0;
  --p1-color: #6d9eff;
  --p2-color: #ff8a5c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-text);
}

button {
  font-family: inherit;
}

/* ---------------------------------------------------------------------- */
/* App chrome                                                             */
/* ---------------------------------------------------------------------- */

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
}

.app-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: block;
}

.app-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.app-subtitle {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--app-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#app-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  padding: 11px 26px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  background: var(--accent-strong);
  color: #fff;
  transition: transform 0.1s ease, background 0.15s ease, opacity 0.15s ease;
}

.btn:hover:not(:disabled) {
  background: #5f8ff0;
}

.btn:active:not(:disabled) {
  transform: scale(0.96);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#start-game-btn {
  padding: 10px 22px;
  background: var(--accent-strong);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

#start-game-btn:hover {
  background: #5f8ff0;
}

#start-game-btn:active {
  transform: scale(0.96);
}

.ready-btn {
  padding: 12px 30px;
  background: var(--bond-tank);
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.ready-btn:hover:not(:disabled) {
  background: #238640;
}

.ready-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.ready-btn:disabled {
  background: #33353f;
  color: var(--app-muted);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------- */
/* Start view                                                             */
/* ---------------------------------------------------------------------- */

.start-hero {
  max-width: 560px;
  margin: 60px auto;
  text-align: center;
  padding: 40px 20px;
}

.start-hero h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 10px;
}

.start-hero p {
  color: var(--app-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 6px;
}

.start-hero .phase-tag {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--app-muted);
  background: #0000002e;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  padding: 6px 16px;
}

/* ---------------------------------------------------------------------- */
/* Roster builder: step progress + picker                                 */
/* ---------------------------------------------------------------------- */

.roster-header {
  text-align: center;
  margin-bottom: 24px;
}

.roster-header h2 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
}

.roster-header p {
  margin: 0;
  color: var(--app-muted);
  font-size: 0.88rem;
}

/* Whose turn it is to pick, during the alternating draft. Gold while it's
   your pick (matches the "Match" bond color elsewhere - reads as "your move"),
   neutral while waiting on the bot so it doesn't look like an error state. */
.draft-turn-banner {
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 18px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bond-fast) 14%, var(--app-surface));
  border: 1px solid color-mix(in srgb, var(--bond-fast) 45%, var(--app-border));
  color: var(--bond-fast);
}

.draft-turn-banner.bot-turn {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-muted);
}

.draft-turn-banner:empty {
  display: none;
}

/* Bot-pick reveal - a modal rather than part of the (scrollable) page flow,
   so "what did the bot just take" is visible no matter where you're
   scrolled, and pauses the draft until you actively dismiss it. */
.bot-pick-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #05050799;
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 200;
}

.bot-pick-modal-overlay.open {
  display: flex;
}

.bot-pick-modal-content {
  animation: card-modal-in 0.18s ease-out;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: min(90vw, 420px);
  text-align: center;
}

#bot-pick-modal-text {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--app-text);
  margin: 0;
}

.bot-pick-modal-continue-btn {
  padding: 10px 28px;
  background: var(--accent-strong);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.bot-pick-modal-continue-btn:hover {
  background: #5f8ff0;
}

.bot-pick-modal-continue-btn:active {
  transform: scale(0.96);
}

/* The step you can't act on yet (or already finished) - dimmed and inert
   rather than hidden, so you can still see what's coming/what you got. */
.roster-category.inactive {
  opacity: 0.5;
  pointer-events: none;
}

.step-progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}

.step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--app-muted);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  padding: 7px 16px 7px 8px;
}

.step-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #0000003e;
  color: var(--app-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.step-pill.complete {
  color: var(--app-text);
  border-color: var(--bond-tank);
}

.step-pill.complete .step-pill-count {
  background: var(--bond-tank);
  color: #fff;
}

.roster-picker {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.roster-category {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.roster-category h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--app-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.card-pool {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  min-height: 90px;
  padding: 16px;
  background: var(--app-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--app-border);
}

.roster-selected {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  min-height: 60px;
  padding: 14px;
  background: color-mix(in srgb, var(--bond-tank) 8%, transparent);
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--bond-tank);
}

.roster-selected:empty::before {
  content: "Selections appear here.";
  color: var(--app-muted);
  font-size: 0.8rem;
  font-style: italic;
  padding: 6px 4px;
}

/* Outline (not box-shadow) so this survives .card-image-sample's box-shadow:none
   override below - box-shadow and outline are independent properties, so a real-art
   card can still show its ring even though its own box-shadow is suppressed. */
.card.selected {
  outline: 3px solid var(--bond-tank);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------- */
/* Assign step                                                            */
/* ---------------------------------------------------------------------- */

.assign-hint {
  text-align: center;
  color: var(--app-muted);
  font-size: 0.85rem;
  max-width: 560px;
  margin: 0 auto 24px;
  line-height: 1.5;
}

.assign-layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.card.pilot-selected {
  outline: 3px solid var(--bond-tank);
  outline-offset: 3px;
}

.card.pilot-assigned {
  opacity: 0.45;
}

.card.mech-match {
  outline: 3px solid var(--bond-fast);
  outline-offset: 3px;
}

.card.mech-match::after {
  content: "\2605 Match";
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bond-fast);
  color: #2b2100;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: 0 3px 10px #00000080;
  z-index: 10;
  pointer-events: none;
}

/* Real DOM element (rendered by card-render.js), not CSS ::after content - see
   selectedBadgeHtml() there for why. Icon-only: a checkmark reads clearly on
   its own once a ring already frames the card, so no text label is shown
   visually (the sr-only span still carries "Selected" for screen readers).
   White-on-var(--bond-tank) is ~4.1:1, comfortably above WCAG 1.4.11's 3:1
   floor for non-text/UI-component contrast. */
.card-selected-badge {
  display: none;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--bond-tank);
  color: #fff;
  box-shadow: 0 3px 10px #00000080;
  pointer-events: none;
}

.card.selected .card-selected-badge,
.card.pilot-selected .card-selected-badge {
  display: flex;
}

.card-selected-icon {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}

/* Standard visually-hidden technique: present in the accessibility tree and
   readable by screen readers, removed from visual layout and not clipped by
   .card's overflow:hidden the way a plain "display:none" text node would be. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.assign-pilot-tag {
  display: block;
  margin-top: 6px;
  padding: 4px 8px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--app-muted);
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Card face (adapted from the sibling pack-opening project)              */
/* ---------------------------------------------------------------------- */

/* Safety net: every icon() call site below has its own explicit size rule,
   but an inline SVG with no width/height and no sizing CSS falls back to the
   browser's intrinsic default (300x150) - this keeps that failure mode from
   blowing up a card's layout if a future icon usage forgets to size it. */
.icon {
  width: 1em;
  height: 1em;
}

.card {
  --card-border-w: 8px;
  width: 260px;
  min-width: 260px;
  aspect-ratio: 2 / 3;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  box-shadow: inset 0 0 0 var(--card-border-w) var(--hero-bg);
  border-radius: var(--radius-md);
  padding: calc(var(--spacing-sm) + var(--card-border-w) * 0.6);
  position: relative;
  overflow: hidden;
  color: var(--card-border);
  container-type: inline-size;
  container-name: card;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:active {
  transform: translateY(-2px);
}

.card[data-set="mechs"] {
  --hero-bg: var(--mech-bg);
}

.card.card-image-sample {
  padding: 0;
  box-shadow: none;
}

.card-image-sample-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
}

.rarity-badge {
  display: none;
}

/* Sits in the same corner as the two header icon badges (type + class/bond),
   so it stays hidden until hover/focus - visible by default it read as a
   confusing 3rd circle crowded in with those badges. Touch devices have no
   hover, so it falls back to always-visible there (see media query below). */
.card-zoom-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 2px solid #ffffff4a;
  border-radius: 50%;
  /* High, near-opaque contrast regardless of what's behind (art or color) -
     white icon on this is ~15:1, far past WCAG 1.4.11's 3:1 floor. */
  background: rgba(10, 11, 15, 0.9);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.card:hover .card-zoom-btn,
.card-zoom-btn:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .card-zoom-btn {
    opacity: 1;
  }
}

.card-zoom-btn:hover {
  background: var(--accent-strong);
  border-color: #fff;
}

.card-zoom-btn:active {
  transform: scale(0.92);
}

.card-zoom-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.5;
}

.card-modal-content .card-zoom-btn {
  display: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  font-size: clamp(0.75rem, 4.3cqw, 0.95rem);
  font-weight: 800;
  gap: clamp(4px, 2.5cqw, 8px);
}

.card-name {
  margin: 0;
  margin-right: auto;
  font-size: clamp(0.95rem, 5.6cqw, 1.25rem);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  width: clamp(28px, 10cqw, 40px);
  height: clamp(28px, 10cqw, 40px);
  background: var(--card-border);
  color: white;
  font-weight: 800;
  flex: none;
}

.card-cost svg {
  width: clamp(0.75rem, 4.6cqw, 1rem);
  height: clamp(0.75rem, 4.6cqw, 1rem);
}

.card-graphic {
  min-height: clamp(90px, 46cqw, 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -10px 10px -10px;
  background: linear-gradient(150deg, var(--hero-bg) 0%, #00000055 100%);
  position: relative;
  overflow: hidden;
}

.card-graphic svg {
  width: clamp(2rem, 10cqw, 3rem);
  height: clamp(2rem, 10cqw, 3rem);
  color: #ffffff3a;
}

.card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: clamp(4px, 2.5cqw, 8px);
  flex-wrap: wrap;
  font-size: clamp(0.62rem, 3.6cqw, 0.8rem);
  font-weight: 700;
  color: var(--muted-text);
}

.card-tier,
.card-role {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: clamp(3px, 1.2cqw, 4px) clamp(8px, 3.2cqw, 11px);
  border: 1.5px solid var(--card-border);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(0.58rem, 3.2cqw, 0.72rem);
  font-weight: 700;
  white-space: nowrap;
}

.card-tier svg {
  width: clamp(0.6rem, 3.4cqw, 0.78rem);
  height: clamp(0.6rem, 3.4cqw, 0.78rem);
}

.card-tier.main {
  background: #d4af37;
  border-color: #d4af37;
  color: #3a2c00;
}

.card-tier.sub {
  background: #bf9bdf;
  border-color: #bf9bdf;
  color: var(--muted-text);
}

.card-role.gain {
  background: var(--bond-tank);
  border-color: var(--bond-tank);
  color: white;
}

.card-role.disrupt {
  background: #6b165d;
  border-color: #6b165d;
  color: white;
}

.card-text {
  margin: 0;
  padding-left: 1em;
  font-size: clamp(0.58rem, 3.1cqw, 0.72rem);
  line-height: 1.35;
  color: #222;
}

.card-text li + li {
  margin-top: 2px;
}

.card-text-secondary {
  color: var(--muted-text);
}

.card-bond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(20px, 8cqw, 26px);
  height: clamp(20px, 8cqw, 26px);
  border-radius: 50%;
  color: white;
  flex: none;
}

.card-bond svg {
  width: clamp(11px, 4.6cqw, 15px);
  height: clamp(11px, 4.6cqw, 15px);
}

.card-cost.bond-fast,
.card-bond.bond-fast {
  background: var(--bond-fast);
}

.card-cost.bond-tank,
.card-bond.bond-tank {
  background: var(--bond-tank);
}

.card-cost.bond-arsenal,
.card-bond.bond-arsenal {
  background: var(--bond-arsenal);
}

.card-cost.bond-stable,
.card-bond.bond-stable {
  background: var(--bond-stable);
}

.card-cost.bond-elemental,
.card-bond.bond-elemental {
  background: var(--bond-elemental);
}

.card-ability {
  margin: 0;
  font-size: clamp(0.68rem, 3.8cqw, 0.85rem);
  font-weight: 800;
  color: var(--hero-bg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-flavor {
  margin: 0;
  margin-top: auto;
  padding: 4px 6px;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  font-size: clamp(0.6rem, 3.4cqw, 0.75rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--muted-text);
}

.card-footer {
  border-top: 2px solid var(--card-border);
  padding-top: clamp(6px, 2.5cqw, 9px);
  font-size: clamp(0.9rem, 4.6cqw, 1.15rem);
  font-weight: 700;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

.card-stat {
  text-align: center;
}

.card-stat strong {
  display: block;
  line-height: 1;
}

.card-stat-label {
  font-size: clamp(0.62rem, 3.4cqw, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-text);
}

/* ---------------------------------------------------------------------- */
/* In-game board                                                          */
/* ---------------------------------------------------------------------- */

#game-status {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding: 13px;
  background: var(--app-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--app-border);
}

.game-boards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.board-section {
  background: var(--app-surface);
  border-radius: var(--radius-lg);
  padding: 18px;
  border-top: 3px solid var(--board-accent, var(--app-border));
}

.board-section.player-1 {
  --board-accent: var(--p1-color);
}

.board-section.player-2 {
  --board-accent: var(--p2-color);
}

.board-section h2 {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.board-section h2::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--board-accent, var(--app-muted));
}

.board-display {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  min-height: 120px;
  padding: 6px;
}

.board-unit {
  width: 210px;
}

.board-unit.actor .unit-card-frame {
  outline: 3px solid var(--bond-fast);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.board-unit .card {
  width: 210px;
  min-width: 210px;
}

.unit-card-frame {
  position: relative;
}

.unit-stats-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.72);
  padding: 5px 7px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
}

.unit-hp-text {
  color: var(--accent);
}

.unit-ap-text {
  color: var(--bond-fast);
}

.unit-hp-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #0000004e;
  overflow: hidden;
  z-index: -1;
}

.hp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bond-tank) 0%, var(--accent) 100%);
  transition: width 0.3s ease;
}

.unit-pilot-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 6px;
  padding: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  background: #0000002e;
  border-radius: 8px;
  text-align: center;
}

/* Each pilot is a real button (opens their full card via the shared
   [data-zoom-id] zoom system - see initializeCardZoom), not just a label.
   Styled to look clickable AT REST (visible border + background), not only
   on hover - a hover-only affordance is invisible until you already know to
   try hovering it, which defeats the point of it being discoverable. */
.pilot-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-muted);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pilot-tag-icon {
  width: 10px;
  height: 10px;
  flex: none;
  opacity: 0.7;
}

.pilot-tag:hover,
.pilot-tag:focus-visible {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}

.pilot-tag:hover .pilot-tag-icon,
.pilot-tag:focus-visible .pilot-tag-icon {
  opacity: 1;
}

.pilot-tag.matched {
  color: var(--bond-fast);
  border-color: color-mix(in srgb, var(--bond-fast) 45%, var(--app-border));
}

.pilot-tag.matched:hover,
.pilot-tag.matched:focus-visible {
  background: var(--bond-fast);
  border-color: var(--bond-fast);
  color: #2b2100;
}

.unit-status-line {
  text-align: center;
  font-size: 0.6rem;
  color: var(--bond-fast);
  font-weight: 700;
  margin-top: 3px;
}

.reserve-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--app-border);
  min-height: 20px;
}

.reserve-zone-label {
  font-size: 0.7rem;
  color: var(--app-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.reserve-chip {
  padding: 5px 12px;
  background: #0000002e;
  border: 1px dashed var(--accent);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Log + moves                                                            */
/* ---------------------------------------------------------------------- */

.game-log,
.moves-section {
  background: var(--app-surface);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 20px;
}

.game-log h3,
.moves-section h3 {
  margin: 0 0 12px;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--app-muted);
}

#game-log {
  height: 300px;
  overflow-y: auto;
  padding-right: 6px;
  font-size: 0.82rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.log-entry {
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--app-surface-2);
}

/* Whose ability condition fired, at a glance - a leading dot rather than a
   border stripe, so it reads as an attribution mark, not a status/severity
   indicator. Only set on entries genuinely tied to one unit's own ability
   (see cardAbilitySystem.js's log()) - plain combat narration stays undotted. */
.log-entry.log-owner-0::before,
.log-entry.log-owner-1::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: middle;
}

.log-entry.log-owner-0::before {
  background: var(--p1-color);
}

.log-entry.log-owner-1::before {
  background: var(--p2-color);
}

.log-entry.log-attack {
  color: #ffb199;
}

.log-entry.log-damage {
  color: var(--bond-fast);
}

.log-entry.log-unitDestroyed {
  background: color-mix(in srgb, var(--bond-arsenal) 18%, var(--app-surface-2));
  font-weight: 600;
}

.log-entry.log-abilityTriggered {
  color: var(--bond-tank);
}

.log-entry.log-status {
  color: var(--bond-elemental);
}

.log-entry.log-transport {
  color: var(--accent);
}

.log-entry.log-gameEnd,
.log-entry.log-gameStart {
  background: color-mix(in srgb, var(--accent-strong) 22%, var(--app-surface-2));
  font-weight: 700;
}

#moves-list:empty::before {
  content: "Waiting…";
  color: var(--app-muted);
  font-size: 0.85rem;
  font-style: italic;
}

/* Available Moves: a tabletop-style split view. Both columns lay out every
   unit face up in the exact same paired-card layout - pilot card(s) beside
   the Mech card, all cards the same physical size, like they'd sit on a
   table facing each other. No inner scroll region - the section just grows
   with the page. Nothing on the opponent's side is clickable until you
   select one of your own units by clicking its Mech; only then do its legal
   targets there light up. */
.moves-split {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.moves-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 320px;
}

.moves-column-header {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--app-muted);
}

.moves-column-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.moves-unit-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: var(--app-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--app-border);
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.moves-unit-row.no-actions {
  opacity: 0.68;
}

.moves-unit-row.selected {
  border-color: var(--bond-fast);
}

.moves-unit-row.target-legal {
  border-color: var(--accent-strong);
}

.paired-card-pilots {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* Pilot and Mech cards render at the same size, deliberately - real cards on
   a table are all the same physical size regardless of what they depict. */
.paired-card-pilot .card,
.paired-card-pilot .card.card-image-sample,
.paired-card-mech .card,
.paired-card-mech .card.card-image-sample {
  width: 168px;
  min-width: 168px;
}

.paired-card-pilot-empty {
  width: 168px;
  height: 252px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--app-muted);
  background: var(--app-surface);
  border: 1px dashed var(--app-border);
  border-radius: var(--radius-md);
  padding: 6px;
}

.paired-card-mech {
  border-radius: var(--radius-md);
  outline: 3px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.15s ease, opacity 0.15s ease;
}

/* Your own units - the Mech is always the click target (select as attacker). */
.moves-column-you .paired-card-mech {
  cursor: pointer;
}

.moves-column-you .paired-card-mech:hover,
.moves-column-you .paired-card-mech:focus-visible {
  outline-color: var(--app-border);
}

.paired-card-mech.actor {
  outline-color: var(--bond-fast);
}

.moves-unit-row.selected .paired-card-mech {
  outline-color: var(--accent-strong);
}

/* Opponent's units - inert by default; only a legal target once you've
   selected an attacker. */
.paired-card-mech.attackable {
  cursor: pointer;
  outline-color: var(--accent-strong);
}

.paired-card-mech.attackable:hover,
.paired-card-mech.attackable:focus-visible {
  transform: translateY(-3px);
}

.paired-card-mech.not-targetable {
  opacity: 0.5;
}

.move-target-label {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-strong);
}

@media (max-width: 900px) {
  .moves-split {
    flex-direction: column;
  }

  .moves-column {
    min-width: 0;
  }
}

.moves-free-actions {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--app-border);
}

.moves-free-actions h4 {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--app-muted);
}

.moves-free-actions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.moves-pass-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--app-border);
}

.moves-pass-row:empty {
  display: none;
}

.move-btn {
  padding: 10px 16px;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  color: var(--app-text);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.move-unit-actions .move-btn {
  background: var(--app-surface);
}

.move-btn:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}

.move-btn:active {
  transform: scale(0.96);
}

.move-btn[data-pass="true"] {
  background: transparent;
  border-style: dashed;
  color: var(--app-muted);
}

.move-btn[data-pass="true"]:hover {
  color: var(--app-text);
  border-color: var(--app-muted);
}

/* ---------------------------------------------------------------------- */
/* Card zoom modal                                                        */
/* ---------------------------------------------------------------------- */

.card-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #05050799;
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.card-modal-overlay.open {
  display: flex;
}

.card-modal-content {
  animation: card-modal-in 0.18s ease-out;
}

@keyframes card-modal-in {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.card-modal-content .card {
  width: min(80vw, 420px);
  min-width: 0;
}

.card-modal-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #ffffff1a;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.card-modal-close:hover {
  background: #ffffff33;
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .game-info-row {
    grid-template-columns: 1fr;
  }

  .game-boards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .app-header {
    padding: 10px 14px;
  }

  #app-container {
    padding: 20px 12px 40px;
  }

  .board-unit,
  .board-unit .card {
    width: 140px;
    min-width: 140px;
  }

  .card,
  .assign-mech-slot .card {
    width: 160px;
    min-width: 160px;
  }
}