/* Games wave 5 (scripts/games-wave5.mjs): word ladder. Tokens from style.css. Plain rungs, no colour-feedback tiles. */
.wl { display: grid; gap: var(--s4); justify-items: center; }
.wl-ladder { list-style: none; margin: 0 auto; padding: 0 var(--s3); display: grid; gap: 6px; justify-items: center; border-left: 6px solid #b48a5a; border-right: 6px solid #b48a5a; border-radius: 4px; }
.wl-rung { box-sizing: border-box; min-width: 10.5em; padding: 6px 14px; text-align: center; font: 800 1.6rem / 1.2 var(--font); letter-spacing: .3em; color: var(--ink); background: #fffdf6; border: 2px solid var(--ink); border-radius: 10px; }
.wl-word u { text-decoration-thickness: 3px; text-underline-offset: 4px; }
.wl-start::before, .wl-end::before { display: block; font: 700 .8rem / 1.2 var(--font); letter-spacing: .02em; color: var(--muted); }
.wl-start::before { content: "Start"; }
.wl-end::before { content: "End"; }
.wl-end { border-style: double; border-width: 5px; }
.wl-gap { color: var(--muted); border-style: dashed; background: transparent; }
.wl-now { padding: 6px; background: var(--sun-soft, #fff3c4); }
.wl-letters { display: flex; gap: 6px; justify-content: center; }
.wl-l { all: unset; box-sizing: border-box; width: 52px; height: 56px; display: flex; align-items: center; justify-content: center; font: 800 1.7rem / 1 var(--font); color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 10px; cursor: pointer; }
.wl-l[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--ink); background: var(--sun); transform: translateY(-2px); }
.wl-l:focus-visible, .wl-k:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wl { width: 100%; }
.wl-pad { box-sizing: border-box; width: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 46px)); gap: 5px; justify-content: center; }
@media (min-width: 640px) { .wl-pad { grid-template-columns: repeat(13, minmax(0, 46px)); } }
.wl-k { all: unset; box-sizing: border-box; width: 100%; min-width: 0; height: 48px; display: flex; align-items: center; justify-content: center; font: 800 1.25rem / 1 var(--font); color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 10px; cursor: pointer; }
.wl-k:hover, .wl-l:hover { background: #f4efe2; }
.gm-big .wl-rung { font-size: 2.2rem; }
.gm-big .wl-l { width: 68px; height: 74px; font-size: 2.3rem; }
.gm-big .wl-pad { grid-template-columns: repeat(6, minmax(0, 60px)); }
.gm-big .wl-k { height: 60px; font-size: 1.6rem; }
@media (min-width: 720px) { .gm-big .wl-pad { grid-template-columns: repeat(9, minmax(0, 64px)); } .gm-big .wl-k { height: 66px; } }
@media (max-width: 400px) { .wl-l { width: 48px; height: 52px; } .gm-big .wl-l { width: 60px; height: 66px; } .gm-big .wl-rung { font-size: 1.8rem; } }