/* Key Explorer (js/arcade/keys.js). Every class starts with .ke- */
.ke-wrap { display: grid; justify-items: center; gap: 10px; width: 100%; padding-top: 6px; }
.ke-top { display: flex; align-items: center; gap: 12px; width: min(100%, 560px); }
.ke-dots { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.ke-dots i { width: 12px; height: 12px; border-radius: 50%; background: #E9E3F5; }
.ke-dots i.ke-at { background: var(--sun); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sun); }
.ke-dots i.ke-yes { background: var(--green); }
.ke-dots i.ke-ok { background: #B9E4BE; }
.ke-score { font: 900 22px/1 var(--font-ui); color: var(--grape-d); }
.ke-score::before { content: 'Score '; font: 700 14px var(--font-ui); color: var(--muted); }
.ke-card { position: relative; display: grid; place-items: center; width: 150px; height: 150px; border-radius: 34px; background: #fff; box-shadow: var(--shadow-soft), inset 0 0 0 4px var(--sky); }
.ke-card.ke-space { width: 260px; }
.ke-letter { font: 900 96px/1 var(--font-ui); color: var(--ink); }
.ke-space .ke-letter { font-size: 50px; color: var(--muted); }
.ke-new { position: absolute; top: -14px; padding: 3px 12px; border-radius: 999px; background: var(--sun); font: 900 15px/1.3 var(--font-ui); color: var(--ink); box-shadow: 0 3px 0 var(--sun-d); }
.ke-new[hidden] { display: none; }
.ke-card.ke-in { animation: ke-in 0.25s ease-out; }
.ke-card.ke-shake { animation: ke-shake 0.4s; }
.ke-msg { min-height: 2.6em; margin: 0; max-width: 520px; text-align: center; font: 700 17px/1.3 var(--font-ui); color: var(--muted); }
.ke-msg.ke-good { color: var(--green-d); }
.ke-msg.ke-bad { color: var(--danger-d); }
.ke-kb { width: 100%; }
@keyframes ke-in { from { transform: scale(0.8); opacity: 0.4; } }
@keyframes ke-shake { 25% { transform: translateX(-8px) rotate(-3deg); } 75% { transform: translateX(8px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .ke-card.ke-in, .ke-card.ke-shake { animation: none; } }