:root {
  --bg: #f4f6fa;
  --card: #ffffff;
  --muted: #666c76;
  --text: #1a1d21;
  --accent: #0066cc;
  --border: #d7dce3;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
}

/* --- Top menu bar --- */
.menu-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Keep title tidy next to the button */
.app-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

/* Minimal button styling to match the light theme */
.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}

.btn:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 6px rgba(0, 102, 204, .15);
}

.btn:active {
  transform: translateY(1px);
}

/* Back button specific tweaks */
.btn-back {
  font-weight: 600;
}

/* Soft-disabled look when no history; still clickable (goes to list) */
.btn[data-disabled="true"] {
  opacity: .7;
}

.site-header {
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 6px 20px;
}

/* ---------------------------------------------------------- */
/* Army list layout — single column, full width               */
/* ---------------------------------------------------------- */

.card-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Make entire army cards clickable in list view */
.army-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.army-card-link:hover .army-card {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.15);
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* ---------------------------------------------------------- */
/* Card styling                                               */
/* ---------------------------------------------------------- */

.army-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  width: 100%;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.army-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin-top: 2px;
  /* tighter */
  margin-bottom: 4px;
  /* tighter */
  font-size: 18px;
  line-height: 1.15;
}

.army-id {
  font-weight: 700;
  color: var(--text);
}

.army-name {
  font-weight: 650;
}

.army-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0 0 0 0;
  white-space: pre-wrap;
  /* preserve paragraphs */
}

/* ---------------------------------------------------------- */
/* Sub-armies (on cards)                                      */
/* ---------------------------------------------------------- */

.subarmy-list {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.subarmy-item {
  font-size: 14px;
  line-height: 1.25;
  color: #33383e;
}

.subarmy-id {
  font-weight: 600;
}

.subarmy-title {
  margin: 0 0 4px 0;
  font-size: 16px;
  line-height: 1.25;
}

/* Key/value display lines (“List”, “Terrain”, “Aggression”) */
.kv-line {
  font-size: 14px;
  margin: 4px 0;
  color: #7d848c;
  /* darker grey for labels/lines */
}

/* Inline version of kv-line styling, matching Allies Logic style */
.kv-inline {
  font-size: 14px;
  color: #7d848c; /* same muted tone used in kv-line */
  font-weight: normal;
  margin-left: 4px;
}


/* ---------------------------------------------------------- */
/* Enemies block                                              */
/* ---------------------------------------------------------- */

.enemies-block {
  margin-top: 0;
}

.enemies-header {
  font-weight: 700;
  margin-top: 6px;
  margin-bottom: 4px;
  color: #6c727a;
}

/* Group container */
.enemy-groups {
  display: grid;
  gap: 4px;
  /* space between each parent group card */
  margin-top: 2px;
}

/* Card around each enemy parent + its sub-armies */
.enemy-group-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Main Army Header (parent line): smaller, single dark grey */
.enemy-parent-line {
  margin-top: 0;
  margin-bottom: 2px;
  font-size: 15px;
  /* smaller than default headers */
  line-height: 1.25;
  color: #3a4149;
  /* single dark grey */
  font-weight: 700;
}

/* Make the ID inherit the same dark grey (no accent) */
.enemy-parent-id {
  font-weight: 700;
  color: inherit;
}

.enemy-parent-name {
  font-weight: 700;
  margin-left: 6px;
  color: inherit;
}

/* Indented smaller sub-army list under each parent */
.enemy-sublist {
  margin-left: 8px;
  /* indent sub-army rows under parent */
  margin-top: 0;
  display: grid;
  gap: 2px;
}

.enemy-sublist .enemy-line {
  font-size: 12.5px;
  /* smaller than the Main Army Header */
  line-height: 1.25;
  color: #4a5057;
  /* slightly lighter for hierarchy */
}

.enemy-id {
  font-weight: 600;
}

/* Enemy links (clickable rows) */
.enemy-link {
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: 8px;
  padding: 1px 0;
  transition: background 0.15s ease;
}

.enemy-link:hover .enemy-line {
  background: rgba(0, 0, 0, 0.04);
}

/* ---------------------------------------------------------- */
/* Anchor focus + flash animation                             */
/* ---------------------------------------------------------- */

/* Offset scroll so anchored card isn’t hidden under header */
.subarmy-card {
  scroll-margin-top: 80px;
}

/* Flash animation when navigated via hash link */
@keyframes flash-highlight {
  0% {
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.4),
      0 0 12px rgba(0, 102, 204, 0.25);
    border-color: var(--accent);
    background-color: rgba(0, 102, 204, 0.05);
  }

  50% {
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2),
      0 0 8px rgba(0, 102, 204, 0.1);
    background-color: rgba(0, 102, 204, 0.02);
  }

  100% {
    box-shadow: none;
    border-color: var(--border);
    background-color: var(--card);
  }
}

/* Trigger flash when targeted */
.subarmy-card:target {
  animation: flash-highlight 1.2s ease-out;
}

/* --- Search UI in the menu bar --- */
.menu-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Push search to the right */
.search-form {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-input {
  width: 280px;
  max-width: 45vw;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  outline: none;
}

.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 1px 6px rgba(0, 102, 204, .15);
}

.btn-search {
  font-weight: 600;
}