.updates-page {
  max-width: 920px;
}

.updates-head {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.updates-head__eyebrow {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.updates-head h1 {
  margin-top: 3px;
  font-size: clamp(2rem, 5vw, 3rem);
}

.updates-list {
  display: grid;
  gap: var(--space-5);
}

.updates-list--published:not([hidden]) { margin-bottom: var(--space-5); }

.update-card {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
}

.update-card--latest {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 18px 50px color-mix(in srgb, var(--accent) 8%, transparent);
}

.update-card--latest::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
}

.update-card__header {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.update-card__header h2 {
  margin-top: 8px;
  font-size: clamp(1.25rem, 3vw, 1.65rem);
}

.update-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--text-faint);
  font-size: 0.8rem;
  font-weight: 650;
}

.update-card__badge {
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: var(--accent-soft);
}

.update-card__badge--version {
  color: var(--positive);
  background: color-mix(in srgb, var(--positive) 15%, transparent);
}

.update-section {
  margin-top: var(--space-4);
}

.update-section p {
  margin-top: var(--space-3);
  color: var(--text-muted);
  line-height: 1.6;
}

.update-section h3 {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.update-section ul {
  display: grid;
  gap: 10px;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.update-section li {
  position: relative;
  padding-left: 22px;
  color: var(--text-muted);
  line-height: 1.55;
}

.update-section li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
}

.update-card--enchants {
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 32%),
    var(--surface-solid);
}

.update-card--expeditions{background:radial-gradient(circle at 85% 0,rgba(91,70,160,.2),transparent 34%),var(--surface);border-color:color-mix(in srgb,var(--accent) 52%,var(--border))}.update-card--expeditions h2{letter-spacing:.03em}.update-card--expeditions .update-section:first-of-type{position:relative}.update-card--expeditions .update-section:first-of-type::after{content:"";position:absolute;right:1rem;bottom:0;width:90px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}

.update-section strong {
  color: var(--text);
}

.update-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-solid));
}

.update-code span {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.update-code strong {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: var(--accent-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

@media (max-width: 600px) {
  .update-card {
    padding: var(--space-4);
  }
}

.updates-search { display: grid; gap: 8px; margin: var(--space-5) 0 var(--space-3); color: var(--text-muted); }
.updates-search input { width: 100%; min-width: 0; min-height: 44px; }
#updateStatus { margin-bottom: var(--space-4); color: var(--text-muted); }
#moreUpdates { display: block; margin: var(--space-5) auto; min-height: 44px; }
#moreUpdates[hidden] { display: none; }