.name-key-family{margin:1.25rem 0;padding:1.1rem 1.4rem;border:1px solid #d7c3ef;border-radius:14px;background:#f6f0fd;color:#372150;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.name-key-family p{margin:.35rem 0 0;max-width:65ch}.name-key-family a{color:#52237e;font-weight:800;text-decoration:underline;text-underline-offset:3px}.name-key-family a:focus-visible{outline:3px solid #6a3395;outline-offset:5px}
.game-play-page[data-game-slug="name-key-hunt"] .game-play-heading>div{min-width:0}
.game-play-page[data-game-slug="name-key-hunt"] .game-level-current{max-width:100%;width:fit-content;white-space:normal;flex-wrap:wrap}
[data-name-task] .keyboard-prompt{width:100%;max-width:100%}
[data-name-task] .keyboard-prompt>[data-target]{display:flex;align-items:center;flex-direction:column;gap:1rem;width:100%;min-height:0;aspect-ratio:auto;background:none;border:0;box-shadow:none;padding:1rem .25rem;color:#322143;font-family:Arial,sans-serif}
.name-letter-reference{display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:clamp(1.5rem,5vw,2.7rem);line-height:1.2;padding:.6rem 1rem;background:#f1eafa;border-radius:12px;max-width:100%}
.name-letter-reference small{font-family:inherit;font-size:1rem;font-weight:600;letter-spacing:0;color:#513565}
.name-letter-row{display:flex;justify-content:center;gap:clamp(.25rem,1vw,.65rem);max-width:100%}
.name-letter-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;width:clamp(2.2rem,8vw,4.75rem);padding:.7rem .15rem;border:2px solid #c7bdcf;border-radius:12px;background:#fff;color:#34213f;line-height:1.1}
.name-letter-cell b{font-size:clamp(1.6rem,6vw,3rem);font-weight:800}.name-letter-cell small{font-size:clamp(.7rem,2.3vw,.9rem);font-weight:700}
.name-letter-cell.is-target{border:3px dashed #63308b;background:#f5eafb}.name-letter-cell.is-solved{border-style:solid;background:#e9f5e6;color:#214e21}
@media(max-width:480px){.name-key-family{padding:1rem}.name-letter-reference{padding:.6rem}.name-letter-cell{border-radius:8px}}

/* Guided name assembly keeps the reference visible and marks state without color alone. */
.game-play-page[data-game-slug="name-key-hunt"] .name-build-progress{font-size:1rem;font-weight:700;color:#513565}
.game-play-page[data-game-slug="name-key-hunt"] .name-build-row{display:grid;grid-template-columns:repeat(var(--name-letter-count),minmax(0,1fr));width:min(100%,calc(var(--name-letter-count) * 5rem))}
.game-play-page[data-game-slug="name-key-hunt"] .name-build-row .name-letter-cell{width:auto;min-width:0}
.game-play-page[data-game-slug="name-key-hunt"] .name-build-row .name-letter-cell small{text-align:center}
.game-play-page[data-game-slug="name-key-hunt"] .keyboard-game:is([data-name-task="build"],[data-name-task="repair"]) .name-letter-reference>span{font-family:Arial,sans-serif;font-size:clamp(1.8rem,7vw,2.6rem);line-height:1.25}
.game-play-page[data-game-slug="name-key-hunt"] .keyboard-game:is([data-name-task="build"],[data-name-task="repair"]) .keyboard-choices{grid-template-columns:repeat(var(--name-build-choice-count,4),minmax(0,1fr));max-width:720px;width:100%}
.game-play-page[data-game-slug="name-key-hunt"] [data-name-build-key]{min-width:44px;min-height:64px}
.game-play-page[data-game-slug="name-key-hunt"] [data-name-build-key]:focus-visible{outline:3px solid #1268c4;outline-offset:3px}
@media(max-width:560px){.game-play-page[data-game-slug="name-key-hunt"] .keyboard-game:is([data-name-task="build"],[data-name-task="repair"]) .keyboard-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Delivered Nia vignette is decorative; every game control remains live HTML.
   Fixed SVG preview geometry is adapted here instead of stretched over letters. */
.game-play-page[data-game-slug="name-key-hunt"] [data-name-art]{background:#fffaf3;border:2px solid #eadfca}
[data-name-art] .name-art-layout{display:grid;grid-template-columns:minmax(0,1fr) 200px;align-items:center;gap:32px;width:100%;min-width:0}
[data-name-art] .name-art-play{display:grid;justify-items:center;width:100%;min-width:0}
[data-name-art] .name-art-guide{display:grid;justify-items:center;align-content:center;max-width:100%;margin:0;padding:16px 0;border-radius:24px;background:#f1eafa;pointer-events:none;user-select:none}
[data-name-art] .name-art-portrait{display:block;width:100%;height:340px;background:url("/media/games/name-key-hunt/guide-vignette.png?v=0.143.0") center/auto 100% no-repeat}
[data-name-art] .name-art-guide p{margin:12px 8px 0;color:#513565;font:700 16px/1.5 Arial,sans-serif;text-align:center}
[data-name-art] .keyboard-prompt{box-sizing:border-box;border:2px solid #d9c9ae;border-radius:24px;padding:18px 12px;background:#fff;max-width:760px}
[data-name-art] .keyboard-prompt>span{color:#3f2d52}
[data-name-art] .keyboard-choices button{min-width:64px;min-height:64px;border-color:#d9c9ae;background:#fff;color:#34213f}
[data-name-art] .keyboard-choices button:hover{transform:none;border-color:#63308b;background:#fff}
.game-play-page[data-game-slug="name-key-hunt"] [data-name-art] .keyboard-choices button:focus-visible{outline:4px solid #24468d;outline-offset:3px;transform:none}
[data-name-art] .keyboard-choices button.is-try-again{border-style:dashed;background:#fff3dc}
[data-name-art] .keyboard-choices button.is-correct{border-style:double;background:#e9f5e6;border-color:#35672c}
@media(max-width:1000px){
 [data-name-art] .name-art-layout{grid-template-columns:minmax(0,1fr);gap:24px}
 [data-name-art] .name-art-guide{grid-template-columns:100px minmax(0,1fr);width:min(100%,340px);padding:8px;justify-self:center;align-items:center}
 [data-name-art] .name-art-portrait{height:140px}
 [data-name-art] .name-art-guide p{margin:0 8px}
}
@media(max-width:480px){
 [data-name-art] .keyboard-prompt{padding:14px 4px;border-radius:18px}
 [data-name-art] .keyboard-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
 [data-name-art] *,[data-name-art] *::before,[data-name-art] *::after{animation:none!important;transition:none!important}
}