/* Farewell screen layout. */
.bye-screen {
  min-block-size: 100dvh;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 12rem);
  grid-template-areas: "copy motif";
  align-content: center;
  align-items: center;
  gap: var(--s-7);
  padding-block: var(--s-5);
}
.bye-copy {
  grid-area: copy;
  max-inline-size: 42rem;
}
.bye-copy h1 {
  max-inline-size: 15ch;
}
.bye-copy .lead {
  margin-block-end: var(--s-4);
}
.bye-stamps-line,
.bye-close-hint {
  margin-block: 0 var(--s-2);
  color: var(--ink-2);
}
.bye-stamps {
  display: grid;
  grid-template-columns: repeat(6, 2.5rem);
  gap: var(--s-2);
  padding: 0;
  margin: var(--s-3) 0 var(--s-5);
  list-style: none;
}
.bye-stamp {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 2px dashed var(--border-strong);
  border-radius: 50%;
  color: var(--ink-3);
}
.bye-stamp.is-earned {
  border-style: solid;
  border-color: var(--gold-400);
  color: var(--gold-700);
}
.bye-stamp svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}
.bye-copy .btn {
  margin-block-start: var(--s-2);
}
.bye-nile {
  grid-area: motif;
  inline-size: 100%;
  max-block-size: 15rem;
  overflow: visible;
}
.bye-nile-underlay,
.bye-nile-main {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bye-nile-underlay {
  stroke: var(--cyan-200);
  stroke-width: 8;
}
.bye-nile-main {
  stroke: var(--cyan-400);
  stroke-width: 3;
}
.bye-nile-dot {
  fill: var(--gold-400);
}
@media (max-width: 600px) {
  .bye-stamps {
    grid-template-columns: repeat(3, 2.5rem);
  }
  .bye-screen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "motif"
      "copy";
    justify-items: center;
    gap: var(--s-4);
    padding-block: var(--s-5);
  }
  .bye-nile {
    inline-size: 5rem;
    max-block-size: 6rem;
  }
  .bye-copy {
    inline-size: 100%;
  }
}