/* Games wave 4 (scripts/games-wave4.mjs): word search online, mazes online, the seniors and kids landings. Tokens from style.css. */

/* ---------- Word search (public/games/word-search.js) ---------- */
.ws { display: grid; gap: var(--s4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .ws { grid-template-columns: minmax(0, 1fr) 260px; } }
.ws-grid { display: grid; grid-template-rows: repeat(var(--n), 1fr); width: 100%; max-width: min(100%, 640px); margin: 0 auto; aspect-ratio: 1; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 4px; box-sizing: border-box; touch-action: none; user-select: none; -webkit-user-select: none; }
.ws-row { display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.ws-c { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; font: 800 calc(min(100vw - 64px, 620px) / var(--n) * .58) / 1 var(--font); color: var(--ink); border-radius: 8px; cursor: pointer; }
.ws-c:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.ws-c.ws-found { background: #cfe0ff; }
.ws-c.ws-f1 { background: #d8f0dc; } .ws-c.ws-f2 { background: #ffe2c7; } .ws-c.ws-f3 { background: #ecdcff; } .ws-c.ws-f4 { background: #ffd6de; } .ws-c.ws-f5 { background: #d4f1f4; }
.ws-c.ws-drag, .ws-c.ws-sel { background: var(--sun); }
.ws-c.ws-hint { box-shadow: inset 0 0 0 3px var(--coral); border-radius: 50%; }
.ws-h { margin: 0 0 var(--s2); font-size: var(--t-lg); }
.ws-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px var(--s3); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); font-weight: 700; letter-spacing: .03em; }
.ws-list .ws-got { text-decoration: line-through; text-decoration-thickness: 3px; color: var(--muted); }
.ws-print, .mz-print { margin: var(--s3) 0 0; font-weight: 700; }
.gm-big .ws-list { font-size: 1.35rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.gm-big .ws-grid { max-width: 100%; }
.gm-big .ws-c { font-size: calc(min(100vw - 48px, 900px) / var(--n) * .62); }

/* ---------- Mazes (public/games/mazes.js) ---------- */
.gm[data-game="mazes"] .gm-board { max-width: 720px; margin: 0 auto; }
.gm-sel input[type="number"] { font: inherit; width: 5.5em; min-height: 48px; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); box-sizing: border-box; }
.mz-key { border-radius: 12px; outline: none; }
.mz-key:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.mz-svg { display: block; width: 100%; height: auto; max-height: 80vh; touch-action: none; user-select: none; -webkit-user-select: none; }
.mz-bg { fill: #fffdf7; }
.mz-goal-sq { fill: var(--green-soft); }
.mz-walls { fill: none; stroke: var(--ink); stroke-width: .14; stroke-linecap: square; }
.mz-arrow { fill: none; stroke: var(--green); stroke-width: .16; stroke-linecap: round; }
.mz-trail { fill: none; stroke: var(--coral); stroke-width: .3; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.mz-hint { fill: none; stroke: var(--sky); stroke-width: .16; stroke-dasharray: .08 .22; stroke-linecap: round; stroke-linejoin: round; }
.mz-me-bg { fill: #fff; stroke: var(--coral); stroke-width: .07; }
.gm-big .mz-svg { max-height: none; }
.gm-big .mz-walls { stroke-width: .2; }

/* ---------- Landings (/games/for-seniors/, /games/for-kids/) ---------- */
.ld-list { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.ld-list li { padding: 14px 18px; border: 2px solid var(--line-2); border-radius: var(--radius); background: var(--card); }
.ld-list h3 { margin: 0 0 4px; font-size: var(--t-lg); }
.ld-list p { margin: 0; color: var(--muted); }

/* Long option labels (sizes with ages) must not widen the page on a phone. */
.gm[data-game="mazes"] .gm-sel, .gm[data-game="word-search"] .gm-sel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.gm[data-game="mazes"] .gm-sel select, .gm[data-game="word-search"] .gm-sel select { min-width: 0; max-width: 100%; width: auto; text-overflow: ellipsis; }