/* Level selection: chapters with a 3-column grid of quiet tiles. */

.levels-screen {
  padding-bottom: calc(var(--safe-bottom) + var(--space-5));
}

.levels-intro {
  margin: var(--space-2) 0 var(--space-5);
  color: var(--ink-2);
}

.stars-total {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-body);
}

.stars-total svg {
  width: 18px;
  height: 18px;
  color: var(--yellow-strong);
  fill: var(--yellow);
}

.stars-total span {
  color: var(--muted);
  font-size: var(--text-small);
}

.level-chapters {
  display: grid;
  gap: var(--space-6);
}

.chapter-block {
  display: grid;
  gap: var(--space-3);
}

.chapter-head {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--text-title);
}

.chapter-head small {
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 500;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.level-tile {
  min-height: 108px;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  display: grid;
  grid-template-rows: 30px 2.6em auto;
  justify-items: center;
  align-items: center;
  align-content: center;
  gap: var(--space-1);
}

.level-tile:active {
  transform: translateY(1px);
}

.level-tile.locked {
  background: transparent;
  color: var(--muted);
}

.level-number {
  height: 30px;
  display: grid;
  place-items: center;
  font-size: var(--text-h2);
  font-weight: 600;
}

.level-number svg {
  width: 20px;
  height: 20px;
}

.level-tile > strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.level-tile.locked > strong {
  color: var(--muted);
}

.level-stars {
  display: flex;
  gap: 2px;
}

.level-stars i {
  display: block;
  color: var(--line-strong);
}

.level-stars i.earned {
  color: var(--yellow-strong);
}

.level-stars svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  stroke-width: 1.3;
}

.levels-rule {
  max-width: 320px;
  margin: var(--space-6) auto 0;
  color: var(--muted);
  text-align: center;
  font-size: var(--text-caption);
}

@media (max-height: 700px) {
  .level-tile {
    min-height: 96px;
  }
}