/* Woordladder: the ladder as rows of letter tiles, the changed letter marked, the goal at the foot. */
.wl { max-width: 640px; margin: 0 auto; }
.wl-loading { font-size: 18px; color: #4b5563; text-align: center; padding: 30px 0; }
.wl-goal { margin: 0 0 14px; font: 400 22px/1.35 Georgia, 'Times New Roman', serif; color: #1a1a1a; text-align: center; }
.wl-goal strong { letter-spacing: .06em; }
.wl-best { display: block; font: 400 17px/1.4 Inter, system-ui, sans-serif; color: #4b5563; }
.wl-ladder { list-style: none; margin: 0 auto 14px; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wl-row { position: relative; }
.wl-cells { display: grid; grid-template-columns: repeat(var(--n), 50px); gap: 6px; }
.wl-cell { display: grid; place-items: center; height: 50px; border-radius: 9px; background: #fff; border: 2px solid #cfe2d6;
  font: 700 26px/1 Inter, system-ui, sans-serif; color: #1f2937; }
.wl-row--start .wl-cell { background: #2f5d45; border-color: #2f5d45; color: #fff; }
.wl-row--step .wl-cell { background: #eef4f0; border-color: #cfe2d6; }
.wl-cell.is-changed { background: #f7e7a8; border-color: #e0c457; }
.wl-row--now .wl-cell { border-color: #2f5d45; border-width: 2.5px; }
.wl-row--now .wl-cell.is-cursor { box-shadow: inset 0 -4px 0 #f2b705; }
.wl-row--end .wl-cell { background: #fbf9f4; border-style: dashed; border-color: #8fc1a4; color: #2f5d45; }
.wl-row--end.is-reached .wl-cell { background: #2f5d45; border-style: solid; border-color: #2f5d45; color: #fff; }
.wl-row--end.is-reached .wl-cell.is-changed { background: #f7e7a8; border-color: #e0c457; color: #1f2937; }
.wl-row--now + .wl-row--end { margin-top: 10px; }
.wl-row--now + .wl-row--end::before { content: '⋮'; position: absolute; left: 50%; top: -17px; transform: translateX(-50%); color: #8fc1a4; font-size: 16px; line-height: 1; }
.wl-tools { display: flex; justify-content: center; margin: 0 0 14px; }
@media (max-width: 760px) {
  .wl-goal { font-size: 20px; }
  .wl-cells { grid-template-columns: repeat(var(--n), 44px); gap: 5px; }
  .wl-cell { height: 44px; font-size: 23px; }
}

/* At the end: one shortest ladder. */
.wl-shortest { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #fbf9f4; box-shadow: inset 0 0 0 1.5px #ece7da; text-align: center; }
.wl-shortest[hidden] { display: none; }
.wl-shortest__title { margin: 0 0 6px; font-size: 18px; color: #1f2937; }
.wl-shortest__title:last-child { margin: 0; }
.wl-shortest__path { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 0; font: 700 20px/1.4 Inter, system-ui, sans-serif; letter-spacing: .05em; color: #2f5d45; }

/* Larger text: bigger letter tiles. */
.sp--large .wl-goal { font-size: 25px; }
.sp--large .wl-best { font-size: 19px; }
.sp--large .wl-cells { grid-template-columns: repeat(var(--n), 58px); }
.sp--large .wl-cell { height: 58px; font-size: 30px; }
@media (max-width: 760px) {
  .sp--large .wl-cells { grid-template-columns: repeat(var(--n), 52px); }
  .sp--large .wl-cell { height: 52px; font-size: 27px; }
}

/* More contrast. */
.sp--contrast .wl-cell { border-color: #1f2937; color: #000; }
.sp--contrast .wl-row--start .wl-cell, .sp--contrast .wl-row--end.is-reached .wl-cell { background: #14532d; border-color: #14532d; color: #fff; }
.sp--contrast .wl-row--step .wl-cell { background: #fff; }
.sp--contrast .wl-cell.is-changed { background: #fcd34d; border-color: #92400e; color: #000; }
.sp--contrast .wl-row--end .wl-cell { border-color: #14532d; color: #14532d; }
.sp--contrast .wl-best { color: #111; }