.keyboard{width:100%;max-width:var(--max-width);padding:0 8px calc(8px + var(--safe-bottom, 0px));user-select:none;flex-shrink:0}.keyboard-row{display:flex;justify-content:center;gap:5px;margin-bottom:8px}.key{height:var(--key-height, 58px);flex:1;max-width:43px;min-width:32px;padding:0 4px;border:2px solid var(--ink);border-radius:6px;box-shadow:0 3px 0 var(--ink);background:var(--color-key-bg);color:var(--color-key-text);font-family:var(--font-main);font-size:0.82rem;font-weight:700;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s,color 0.15s,transform 0.05s,box-shadow 0.05s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.key:active{transform:translateY(3px);box-shadow:none}.key.wide{flex:1.5;max-width:65px;font-size:0.7rem}.keyboard-row.accent-row{margin-bottom:4px;padding-bottom:6px;border-bottom:1px solid var(--color-hr)}.key.accent{height:44px;max-width:52px;background:color-mix(in srgb,var(--color-key-bg) 70%,var(--color-bg));border:1px solid var(--color-tile-border-empty);font-size:0.9rem}.key[data-state=correct]{background:var(--color-correct);color:#fff}.key[data-state=present]{background:var(--color-present);color:#fff}.key[data-state=absent]{background:var(--color-absent);color:#fff}.key .backspace-icon{display:flex;align-items:center;justify-content:center}@media(max-width:380px){.key{min-width:0}.keyboard{padding:0 5px calc(8px + var(--safe-bottom, 0px))}.keyboard-row{gap:4px}}