:root {
  /* Background layers */
  --color-background: #0e1419; /* deep slate */
  --color-surface: #161d23; /* base surface */
  --color-surface-alt: #1d252c; /* elevated surface */
  /* Brand / Accents */
  --color-primary: #3b6fb6; /* soft blue */
  --color-on-primary: #ffffff;
  --color-accent: #e6b452; /* muted golden amber */
  --color-on-accent: #1d1a15;
  --color-accent-soft: #f3d49a; /* lighter accent for subtle gradients */
  /* Text / Lines */
  --color-on-background: #ecf1f5;
  --color-muted: rgba(236, 241, 245, 0.6);
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-strong: rgba(255, 255, 255, 0.12);
  --color-focus: rgba(59, 111, 182, 0.4);
  --color-danger: #d05757;
  --color-success: #4da97d;
}

.list {
  table-layout: fixed;
  border: none;
}
.list .list__item.list__item--active .list__level button {
  background: linear-gradient(90deg, rgba(59, 111, 182, 0.35), rgba(59, 111, 182, 0.15));
  color: var(--color-on-background);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.list .list__item .list__rank {
  padding: 1rem;
  text-align: end;
  color: var(--color-primary);
  font-weight: bold;
  font-size: 1.1rem;
}
.list .list__item .list__level button {
  background-color: rgba(0, 0, 0, 0);
  color: var(--color-on-background);
  border: none;
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: start;
  line-break: anywhere;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.list .list__item .list__level button:hover {
  background: linear-gradient(90deg, rgba(59, 111, 182, 0.15), rgba(59, 111, 182, 0.05));
  color: var(--color-primary);
  cursor: pointer;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/*# sourceMappingURL=list.css.map */