/* The How to play sheet. Values come from shared/tokens.css. */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, var(--felt-deep) 75%, transparent);
  animation: sheet-fade var(--dur-move) ease-out both;
}

.sheet {
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - var(--space-5));
  overflow-y: auto;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom));
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  background: var(--felt);
  box-shadow: 0 -2px 0 color-mix(in srgb, var(--chalk) 20%, transparent);
  animation: sheet-rise var(--dur-move) cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.sheet h2 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

.how-goal {
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--felt-deep);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
}

.how-steps {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.35;
  padding-left: 1.4em;
  display: grid;
  gap: var(--space-2);
}

.how-steps li::marker {
  color: var(--p1);
  font-weight: var(--weight-bold);
}

@keyframes sheet-fade {
  from {
    opacity: 0;
  }
}

@keyframes sheet-rise {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
}