.kl{--kl-correct:#3f8a5a;--kl-present:#c98b1f;--kl-absent:#7d8791;display:grid;justify-items:center;gap:10px;width:100%}.kl-mode{margin:0;color:var(--bk-ink-soft);font-size:.9rem}.kl-grid{width:min(100%,320px,calc((100svh - 500px) * 5 / 6));min-width:250px}.kl-grid,.kl-row{display:grid;gap:6px}.kl-row{grid-template-columns:repeat(5,1fr)}.kl-row.is-shake{animation:kl-shake .35s ease}.kl-cell{display:grid;place-items:center;aspect-ratio:1;border:2px solid var(--bk-line);border-radius:8px;background:#fff;color:var(--bk-ink);font:800 clamp(1.3rem,6vw,1.9rem) /1 var(--font-inter),sans-serif}.kl-cell.is-filled{border-color:var(--bk-ink-soft)}.kl-cell.is-absent,.kl-cell.is-correct,.kl-cell.is-present{border-color:transparent;color:#fff}.kl-cell.is-correct{background:var(--kl-correct)}.kl-cell.is-present{background:var(--kl-present)}.kl-cell.is-absent{background:var(--kl-absent)}.kl-cell.is-present{background-image:linear-gradient(135deg,rgb(255 255 255/.28) 0 18%,transparent 18%)}.kl-cell.is-correct{box-shadow:inset 0 0 0 3px rgb(255 255 255/.55)}.kl-msg{min-height:1.5em;margin:0;text-align:center;font-weight:650}.kl-keys{display:grid;gap:6px;width:min(100%,560px)}.kl-keyrow{display:flex;justify-content:center;gap:4px}.kl-key{flex:1 1 0;min-width:0;max-width:48px;height:52px;padding:0;border:0;border-radius:7px;background:#e3ebf1;color:var(--bk-ink);font:750 clamp(.85rem,3.6vw,1.05rem) /1 var(--font-inter),sans-serif;cursor:pointer;touch-action:manipulation}.kl-key.is-wide{flex-grow:1.6;max-width:78px;font-size:.8rem}.kl-key svg{width:22px;height:22px}.kl-key.is-correct{background:var(--kl-correct);color:#fff}.kl-key.is-present{background:var(--kl-present);color:#fff}.kl-key.is-absent{background:var(--kl-absent);color:#fff}.kl-key.is-hint{box-shadow:inset 0 0 0 3px #d9822b}.kl-key:focus-visible{outline:3px solid var(--bk-sun);outline-offset:2px}.kl-key:disabled{cursor:default}.kl-actions{display:flex;gap:8px}.kl-actions button{min-height:44px;padding:0 18px;border:1px solid var(--bk-line);border-radius:999px;background:#fff;color:var(--bk-ink);font:650 .9rem/1 var(--font-inter),sans-serif;cursor:pointer}.kl-actions button.is-primary{border-color:var(--bk-sea);background:var(--bk-sea);color:#fff}.kl-loading{min-height:320px;display:grid;place-items:center}@keyframes kl-shake{0%,to{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}@media (prefers-reduced-motion:reduce){.kl-row.is-shake{animation:none}}body:has(.kl) .pet-character,body:has(.kl) .pet-recall{visibility:hidden;pointer-events:none}body:has(.kl) .pet-character *{animation-play-state:paused}