/* ===== WAR STORIES ===== */
.stories-section { background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg) 100%); }

.stories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .stories-grid { grid-template-columns: 1fr; }
}

.story-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  border-left: 4px solid;
  box-shadow: var(--shadow);
  transition: all 0.25s ease;
}
.story-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.story-card:nth-child(1) { border-left-color: var(--red); }
.story-card:nth-child(2) { border-left-color: var(--blue); }
.story-card:nth-child(3) { border-left-color: var(--green); }
.story-card:nth-child(4) { border-left-color: var(--orange); }

.story-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.story-icon { font-size: 28px; flex-shrink: 0; }

.story-header .pr {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.story-header h3 { font-size: 15px; font-weight: 700; line-height: 1.3; }

.story-header .placed { margin-left: auto; white-space: nowrap; }

.story-card .placed {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.story-diff {
  background: #0a0a16;
  border: 1px solid #1a1d30;
  border-radius: 6px;
  padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.8;
}

.diff-bad { color: #f87171; }
.diff-good { color: #4ade80; }

.placed.bugbot { background: #e74c3c22; color: var(--red-light); }
.placed.lessons { background: #4a9eff22; color: var(--blue); }
.placed.inline { background: #2ecc7122; color: var(--green); }