/* Szólánc (wordladder) — prefix wl- */
.board-frame.wl-frame {
  width: min(400px, 100cqw);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  touch-action: manipulation; /* the ladder can grow taller than the screen: let it scroll */
  --wl-chg: var(--game);
  --wl-hit: var(--good);
  --wl-cell: #1c1c1e;
  perspective: 900px;
  --wl-tile: min(52px, calc((100cqw - 84px) / 5));
}

/* --- Head: step counter and par -------------------------------------------------------- */
.wl-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; max-width: 330px; font-size: .88rem; color: var(--muted);
}
.wl-head b { color: #fff; font-family: var(--font); font-weight: 650; }
.wl-par { padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); }

/* --- Ladder: two rails with the words as rungs --------------------------------------------- */
.wl-ladder {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 6px 22px; cursor: text;
}
.wl-ladder::before, .wl-ladder::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 4px; border-radius: 99px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--game) 60%, transparent), color-mix(in srgb, var(--good) 60%, transparent));
  opacity: .45;
}
.wl-ladder::before { left: 6px; }
.wl-ladder::after { right: 6px; }
.wl-label {
  align-self: flex-start; margin: 2px 2px -2px; font-size: .68rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.wl-ladder > .wl-label:last-child { margin: -2px 2px 2px; }
.wl-steps { display: flex; flex-direction: column; gap: 8px; }
.wl-steps:empty { display: none; }

.wl-row { position: relative; display: grid; grid-template-columns: repeat(var(--len, 5), var(--wl-tile)); gap: 6px; }
/* Rung: a thin bar behind each row, reaching the rails. */
.wl-row::before {
  content: ""; position: absolute; left: -16px; right: -16px; top: 50%; height: 3px; margin-top: -1.5px;
  border-radius: 99px; background: rgba(255, 255, 255, .1); z-index: -1;
}
.wl-ladder, .wl-row { isolation: isolate; }

.wl-tile {
  width: var(--wl-tile); aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 0;
  background: var(--wl-cell); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  font-family: var(--font); font-weight: 600; font-size: calc(var(--wl-tile) * .48); line-height: 1; letter-spacing: -0.01em;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
/* Letters already matching the target: green ink on a green tint. */
.wl-tile.wl-hit { color: var(--wl-hit); background: color-mix(in srgb, var(--wl-hit) 16%, var(--wl-cell)); }
/* The letter changed in this step: filled. */
.wl-tile.wl-chg { background: var(--wl-chg); color: #fff; }
.wl-tile.wl-chg.wl-hit { background: var(--wl-hit); color: #000; }

.wl-start .wl-tile:not(.wl-hit) { background: #2c2c2e; }
.wl-target .wl-tile:not(.wl-hit) { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.wl-target.wl-reached .wl-tile { background: var(--wl-hit); color: #000; box-shadow: none; }
.wl-target.wl-reached .wl-tile.wl-chg { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-hit) 35%, transparent); }

/* Input row: ghosts of the previous word under what is being typed. */
.wl-entry { position: relative; display: flex; justify-content: center; }
.wl-tile.wl-ghost { color: rgba(255, 255, 255, .2); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.wl-tile.wl-filled:not(.wl-chg):not(.wl-hit):not(.wl-over) { background: #2c2c2e; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.wl-tile.wl-over { background: var(--warn); color: #000; }
.wl-tile.wl-hinted { outline: 2px dashed var(--gold); outline-offset: 2px; }
.wl-focus .wl-tile.wl-cursor { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 3px color-mix(in srgb, var(--game) 26%, transparent); }
.wl-entry:has(.wl-input:focus-visible) .wl-typing { outline: 1.5px solid rgba(255, 255, 255, .16); outline-offset: 6px; border-radius: 14px; }
.wl-input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; border: 0; background: transparent; color: transparent; caret-color: transparent;
  font-size: 16px; /* below 16px iOS zooms in on focus */
  cursor: text; -webkit-tap-highlight-color: transparent;
}
.wl-input:disabled { pointer-events: none; }

.wl-gap { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0; }
.wl-gap i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); opacity: .4; }
.wl-done .wl-entry, .wl-done .wl-gap { display: none; }

.wl-tile.wl-pop { animation: wl-pop .22s var(--ease-spring); }
@keyframes wl-pop { 0% { transform: scale(.86); } 60% { transform: scale(1.07); } }
.wl-row.wl-enter { animation: wl-enter .45s var(--ease-spring); }
@keyframes wl-enter { from { opacity: 0; transform: translateY(14px) scale(.94); } }
.wl-row.wl-back { animation: wl-back .35s var(--ease-out); }
@keyframes wl-back { from { opacity: 0; transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) {
  .wl-tile.wl-pop, .wl-row.wl-enter, .wl-row.wl-back { animation: none; }
}

/* --- Buttons under the ladder ------------------------------------------------------------- */
.wl-actions { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 36px; }
.wl-tap { font-size: .85rem; font-weight: 500; color: var(--muted); }
.wl-focus .wl-tap, .wl-done .wl-tap, .wl-locked .wl-tap { display: none; }
@media (hover: hover) and (pointer: fine) { .wl-tap { display: none; } }
.wl-done .wl-actions { display: none; }
.wl-del { min-width: 44px; font-size: 1.05rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; border: 0; }
.wl-del:hover { background: rgba(255, 255, 255, .16); }
.wl-send { border-radius: 999px; padding-inline: 20px; }
.wl-busy .wl-send { opacity: .6; }
.wl-locked .wl-ladder { cursor: default; }

/* --- After the end: summary and one shortest ladder ----------------------------------------- */
.wl-reveal {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 12px 18px; border-radius: 18px; max-width: 100%;
  background: #1c1c1e;
  animation: fx-pop .45s var(--ease-spring);
}
.wl-reveal[hidden] { display: none; }
.wl-sum { font-size: .95rem; color: var(--muted); }
.wl-sum b { font-family: var(--font); font-weight: 650; color: #fff; font-size: 1.15rem; }
.wl-sum span { margin: 0 4px; }
.wl-best { margin: 0; font-size: .85rem; font-weight: 500; color: var(--muted); }
.wl-path { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; }
.wl-chip {
  padding: 4px 9px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff;
  font-family: var(--font); font-weight: 600; font-size: .78rem; letter-spacing: .04em;
}
.wl-arrow { color: var(--muted); font-size: .8rem; }

@media (max-width: 380px) {
  .wl-row, .wl-steps, .wl-ladder { gap: 5px; }
  .wl-ladder { padding: 4px 18px; }
  .wl-row::before { left: -14px; right: -14px; }
  .wl-ladder::before { left: 4px; }
  .wl-ladder::after { right: 4px; }
  .wl-tile { border-radius: 10px; }
}