.key-pop-family{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:1.25rem 0;padding:1rem 1.4rem;border:1px solid #d7c3ef;border-radius:14px;background:#f6f0fd;color:#372150}
.key-pop-family p{margin:.35rem 0 0;max-width:65ch}.key-pop-family a{color:#52237e;font-weight:800;text-decoration:underline;text-underline-offset:3px}.key-pop-family a:focus-visible{outline:3px solid #1268c4;outline-offset:5px}
.game-play-page[data-game-slug="key-pop"] .game-play-heading>div{min-width:0}
.game-play-page[data-game-slug="key-pop"] .game-level-current{box-sizing:border-box;max-width:100%;width:fit-content;flex-wrap:wrap;white-space:normal}
[data-key-task] .keyboard-prompt{width:100%;max-width:100%}
[data-key-task] .keyboard-prompt>[data-target]{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;min-height:0;aspect-ratio:auto;border:0;background:none;box-shadow:none;padding:1rem .25rem;color:#322143;font-family:Arial,sans-serif}
.key-pop-guide{display:grid;grid-template-columns:repeat(var(--key-guide-count,1),minmax(0,1fr));justify-content:center;gap:clamp(.4rem,2vw,1rem);width:min(100%,calc(var(--key-guide-count,1) * 128px));max-width:100%}
.key-pop-slot{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-width:0;padding:.7rem .35rem;border:2px solid #bdb3cb;border-radius:14px;background:#fff;line-height:1.1}
.key-pop-slot b{font-size:clamp(2.7rem,6vw,4rem)}.key-pop-slot small{font-size:.85rem;font-weight:700;letter-spacing:0;text-align:center}
.key-pop-slot.is-current{border:3px dashed #63308b;background:#f4eafb}.key-pop-slot.is-done{border-style:solid;background:#e9f5e6;color:#214e21}
.key-pop-hint{font-size:1rem;font-weight:500;line-height:1.4;letter-spacing:0;text-align:center;max-width:38rem}
.key-pop-row-label{font-size:1rem;font-weight:700;line-height:1.4;letter-spacing:0;color:#472163;text-align:center}
.game-play-page[data-game-slug="key-pop"] [data-key-task] .keyboard-choices[data-choices]{display:grid;grid-template-columns:repeat(var(--key-pop-count),minmax(0,1fr));gap:12px;width:min(100%,660px);margin-inline:auto}
.game-play-page[data-game-slug="key-pop"] [data-key-task] .keyboard-choices button{box-sizing:border-box;min-width:0;min-height:90px;aspect-ratio:auto;padding:12px 6px;border:2px solid #cab7e1;border-radius:14px;background:#fff;color:#472163;font:800 clamp(1.6rem,4vw,2.4rem)/1.2 Arial,sans-serif}
.game-play-page[data-game-slug="key-pop"] [data-key-task] .keyboard-choices button:focus-visible{outline:3px solid #1268c4;outline-offset:4px}
.game-play-page[data-game-slug="key-pop"] [data-key-task] .keyboard-choices button.is-try-again{border-style:dashed;border-color:#936013;background:#fff6dc}
.game-play-page[data-game-slug="key-pop"] [data-key-task] .keyboard-choices button.is-correct{border-color:#2d6b2c;background:#e9f5e6;color:#214e21}
@media(max-width:480px){.game-play-page[data-game-slug="key-pop"] [data-key-task] .keyboard-choices[data-choices]{gap:8px}.game-play-page[data-game-slug="key-pop"] [data-key-task] .keyboard-choices button{min-height:64px;padding:8px 4px}.key-pop-slot small{font-size:.78rem}.key-pop-family{padding:1rem}}
@media(prefers-reduced-motion:reduce){.game-play-page[data-game-slug="key-pop"] [data-key-task] .keyboard-choices button{transition:none;animation:none;transform:none}}


/* Row names remain readable without relying on key color or position alone. */
[data-key-task] .keyboard-prompt>[data-target][data-key-multirow]{gap:.6rem}