/* Who Is Where?. Layout only; the people, places and clues are HTML, and the drag and tap logic is in kids-whoiswhere.js. */
.wi-stage{display:grid;gap:14px}
.kg-levels.wi-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:4px}
.wi-level-name{display:block;font-size:.8em;opacity:.8}

.wi-status{margin:0}

.wi-scene{display:grid;gap:12px;width:100%;max-width:640px;margin:0 auto;padding:12px;border-radius:20px;background:rgba(255,255,255,.06);box-sizing:border-box}
.wi-spots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wi-spots[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.wi-spot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:96px;padding:30px 6px 10px;border-radius:16px;border:2px dashed rgba(255,255,255,.35);background:rgba(255,255,255,.04);box-sizing:border-box;cursor:pointer;touch-action:manipulation}
.wi-spot:focus-visible{outline:4px solid #ffd54f;outline-offset:3px}
.wi-spot-no{position:absolute;top:6px;left:0;right:0;text-align:center;font-weight:800;opacity:.6}

.wi-tray{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-height:64px;padding:8px;border-radius:16px;background:rgba(0,0,0,.14);box-sizing:border-box}

.wi-chip{min-height:44px;min-width:44px;padding:8px 16px;border-radius:999px;border:2px solid #fff;background:#fff;color:#1d2246;font:inherit;font-weight:800;cursor:grab;touch-action:none;user-select:none}
.wi-chip:focus-visible{outline:4px solid #ffd54f;outline-offset:3px}
.wi-chip.wi-selected{background:#ffd54f;border-color:#ffd54f;box-shadow:0 0 0 4px rgba(255,213,79,.35)}
.wi-chip.wi-on-spot{cursor:grab}

.wi-ghost{position:fixed;z-index:50;transform:translate(-50%,-50%);pointer-events:none;padding:8px 16px;border-radius:999px;background:#ffd54f;color:#1d2246;font-weight:800;box-shadow:0 8px 20px rgba(0,0,0,.3)}

.wi-clues-title{margin:0}
.wi-clues{display:grid;gap:8px;margin:0;padding-left:1.4em;max-width:640px}
.wi-clue{padding-left:4px}
.wi-clue.wi-clue-off{color:#ffab91;font-weight:700}

.wi-actions{justify-content:center}
.wi-win-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.wi-win[hidden]{display:none}
.wi-win:focus-visible{outline:4px solid #ffd54f;outline-offset:4px}

.wi-howto ol{padding-left:1.2em}
.wi-howto li+li{margin-top:6px}

@media (max-width:519px){
 .kg-levels.wi-levels{gap:4px}
 .wi-level-name{font-size:.7em}
 .wi-spots{gap:6px}
 .wi-spot{min-height:88px;padding-top:28px}
}