.kt { --kt-correct: #16a34a; --kt-present: #ca8a04; --kt-absent: #8a8170; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kt { --kt-absent: #4b4537; } }
:root[data-theme="dark"] .kt { --kt-absent: #4b4537; }
.kt .kt-info { text-align: center; font-size: 14px; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.kt .kt-toast { position: absolute; left: 50%; top: 96px; transform: translate(-50%, -6px); background: var(--ink); color: var(--paper); font-weight: 800; padding: 8px 14px; border-radius: 10px; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 4; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.kt .kt-toast.on { opacity: 1; transform: translate(-50%, 0); }
.kt .kt-grid { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; width: min(100%, 330px); margin: 0 auto 14px; }
.kt .kt-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.kt .kt-tile { aspect-ratio: 1; border: 2px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: clamp(22px, 7vw, 32px); font-weight: 800; text-transform: none; background: var(--cell); color: var(--ink); user-select: none; }
.kt .kt-tile.filled { border-color: var(--muted); }
.kt .kt-tile.pop { animation: kt-pop .1s ease; }
.kt .kt-tile.flip { animation: kt-flip .36s ease; }
.kt .kt-tile.done { color: #fff; border-color: transparent; }
.kt .kt-tile.correct { background: var(--kt-correct); }
.kt .kt-tile.present { background: var(--kt-present); }
.kt .kt-tile.absent { background: var(--kt-absent); }
.kt .kt-row.shake { animation: kt-shake .4s ease; }
.kt .kt-row.win .kt-tile { animation: kt-jump .5s ease; }
.kt .kt-row.win .kt-tile:nth-child(2) { animation-delay: .08s; }
.kt .kt-row.win .kt-tile:nth-child(3) { animation-delay: .16s; }
.kt .kt-row.win .kt-tile:nth-child(4) { animation-delay: .24s; }
.kt .kt-row.win .kt-tile:nth-child(5) { animation-delay: .32s; }
.kt .kt-kb { display: flex; flex-direction: column; gap: 6px; max-width: 560px; margin: 0 auto; user-select: none; }
.kt .kt-kbrow { display: flex; gap: 5px; justify-content: center; }
.kt .kt-key { flex: 1 1 0; min-width: 0; max-width: 46px; height: 52px; border: 0; border-radius: 7px; background: var(--cell-alt); color: var(--ink); font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; padding: 0; touch-action: manipulation; }
.kt .kt-key.wide { flex: 1.6 1 0; max-width: 72px; font-size: 13px; }
.kt .kt-key:active { filter: brightness(.92); }
.kt .kt-key.correct { background: var(--kt-correct); color: #fff; }
.kt .kt-key.present { background: var(--kt-present); color: #fff; }
.kt .kt-key.absent { background: var(--kt-absent); color: #fff; opacity: .5; }
@media (max-width: 380px) { .kt .kt-kbrow { gap: 3px; } .kt .kt-key { height: 46px; font-size: 14px; } .kt .kt-key.wide { font-size: 11px; } }
.kt .kt-modal { position: relative; max-width: 380px; width: calc(100% - 32px); max-height: calc(100% - 24px); overflow: auto; }
.kt .kt-close { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--muted); font-size: 26px; cursor: pointer; line-height: 1; padding: 4px 8px; }
.kt .kt-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 10px 0 14px; }
.kt .kt-nums div { display: flex; flex-direction: column; }
.kt .kt-nums b { font-size: 26px; line-height: 1.1; }
.kt .kt-nums span { font-size: 12px; color: var(--muted); }
.kt .kt-sub { font-size: 13px; font-weight: 800; color: var(--muted); text-align: left; margin-bottom: 6px; }
.kt .kt-dist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.kt .kt-drow { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.kt .kt-dn { width: 12px; font-weight: 700; }
.kt .kt-dbar { background: var(--kt-absent); color: #fff; font-weight: 800; text-align: right; padding: 1px 7px; border-radius: 4px; min-width: 22px; box-sizing: border-box; }
.kt .kt-dbar.on { background: var(--kt-correct); }
.kt .kt-cd { font-weight: 700; margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.kt .kt-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.kt .kt-help { text-align: left; }
.kt .kt-help p { margin: 6px 0 12px; font-size: 15px; color: var(--ink); }
.kt .kt-help .g-btn { display: block; margin: 8px auto 0; }
.kt .kt-ex { width: 220px; }
.kt .kt-ex .kt-tile { font-size: 20px; color: var(--ink); border: 2px solid var(--line); }
.kt .kt-ex .kt-tile.correct, .kt .kt-ex .kt-tile.present, .kt .kt-ex .kt-tile.absent { color: #fff; border-color: transparent; }
@keyframes kt-pop { 50% { transform: scale(1.1); } }
@keyframes kt-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes kt-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes kt-jump { 40% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .kt .kt-tile.flip, .kt .kt-row.shake, .kt .kt-row.win .kt-tile, .kt .kt-tile.pop { animation: none; } }