/* A quiet key face keeps every letter readable. Movement lives in its edges. */
.keyboard[data-keyboard-skin] .key:not(.strike-surface){isolation:isolate;text-shadow:1px 0 #091310,-1px 0 #091310,0 1px #091310,0 -1px #091310,0 2px #091310}
.keyboard[data-keyboard-skin] .key:not(.strike-surface):before,.keyboard[data-keyboard-skin] .key:not(.strike-surface):after{z-index:-1;pointer-events:none}
.keyboard:is([data-keyboard-skin=fortune],[data-keyboard-skin=regalia]):not([data-keyboard-skin=default]) .key:not(.strike-surface):not(.hit):not(.crit):not(.miss):not(.key-charred):not(.key-restoring):before{background:var(--key-face);animation:none;box-shadow:inset 1px 1px #c6d9ba24,inset -1px -1px #070d19}
.keyboard:is([data-keyboard-skin=fortune],[data-keyboard-skin=regalia]):not([data-keyboard-skin=default]) .key:not(.strike-surface):not(.hit):not(.crit):not(.miss):not(.key-charred):not(.key-restoring):after{inset:4px 3px 7px;width:auto;height:auto;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 48' shape-rendering='crispEdges'%3E%3Cpath fill='%23836a3b' d='M1 4h3v1h1v4H4v1H1V9H0V5h1zM12 29h3v1h1v4h-1v1h-3v-1h-1v-4h1z'/%3E%3Cpath fill='%23c4a260' d='M1 5h3v4H1zM12 30h3v4h-3z'/%3E%3Cpath fill='%23e0c88a' d='M1 5h1v3H1zM12 30h1v3h-1z'/%3E%3C/svg%3E");background-size:100% 48px;background-repeat:repeat-y;box-shadow:none;opacity:.43;mask-image:linear-gradient(90deg,#000 0 18%,transparent 21% 79%,#000 82%);animation:quiet-key-treasure 12s linear infinite;animation-delay:calc(var(--key-index,0)*-.83s)}
.keyboard[data-keyboard-skin=regalia]:not([data-keyboard-skin=default]) .key:not(.strike-surface):not(.hit):not(.crit):not(.miss):not(.key-charred):not(.key-restoring):after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 56' shape-rendering='crispEdges'%3E%3Cpath fill='%23836a3b' d='M1 5h3v1h1v4H4v1H1v-1H0V6h1zM12 37h3v1h1v4h-1v1h-3v-1h-1v-4h1z'/%3E%3Cpath fill='%23d0ae6b' d='M1 6h3v4H1zM12 38h3v4h-3z'/%3E%3Cpath fill='%23789ba4' d='m13 17 2 3-2 3-2-3zM2 43l2 3-2 3-2-3z'/%3E%3Cpath fill='%23c5d8cf' d='M12 19h1v2h-1zM1 45h1v2H1z'/%3E%3C/svg%3E");background-size:100% 56px;animation-name:quiet-royal-treasure;animation-duration:14s;opacity:.48}
.keyboard[data-keyboard-skin=prism]:not([data-keyboard-skin=default]) .key:not(.strike-surface):not(.hit):not(.crit):not(.miss):not(.key-charred):not(.key-restoring):before{animation-duration:28s;--key-face:linear-gradient(135deg,#3c3548,#213d44 45%,#42303c 80%,#3c3548)}
.keyboard:is([data-keyboard-skin=fire],[data-keyboard-skin=dread]):not([data-keyboard-skin=default]) .key:not(.strike-surface):not(.hit):not(.crit):not(.miss):not(.key-charred):not(.key-restoring):after{animation:quiet-key-ember 7s ease-in-out infinite;animation-delay:calc(var(--key-index,0)*-.39s);box-shadow:none}
@keyframes quiet-key-treasure{from{background-position:0 -48px}to{background-position:0 0}}
@keyframes quiet-royal-treasure{from{background-position:0 -56px}to{background-position:0 0}}
@keyframes quiet-key-ember{0%,100%{opacity:.18}50%{opacity:.48}}
.preview-keyboard:is([data-keyboard-skin=fortune],[data-keyboard-skin=regalia]) .key:before{background-size:100% 100%!important;animation:none!important}
.preview-keyboard:is([data-keyboard-skin=fortune],[data-keyboard-skin=regalia]) .key:after{inset:3px 2px 4px;width:auto!important;height:auto!important}


/* Clues recolor the material; they do not replace its engraving and rim. */
.keyboard[data-keyboard-skin]:not([data-keyboard-skin=default]) .key:is(.crit,.hit,.miss):not(.key-charred){background:var(--key-edge)!important;box-shadow:inset 0 -4px #081115,inset 1px 1px #ffffff35;isolation:isolate}
.keyboard[data-keyboard-skin]:not([data-keyboard-skin=default]) .key:is(.crit,.hit,.miss):not(.key-charred):before{background:var(--key-etch,linear-gradient(transparent,transparent)),var(--clue-face)!important;inset:3px 2px 6px;box-shadow:inset 1px 1px #ffffff30,inset -1px -1px #020a0b9c;animation:none!important}
.keyboard[data-keyboard-skin]:not([data-keyboard-skin=default]) .key:is(.crit,.hit,.miss):not(.key-charred):after{content:''!important;inset:auto 4px 7px auto;width:2px;height:2px;background:var(--key-pin);box-shadow:-1px -1px #070c0d80;opacity:.5;animation:none!important}
.keyboard[data-keyboard-skin=frost]:not([data-keyboard-skin=default]) .key:is(.crit,.hit,.miss):not(.key-charred):after{inset:5px auto auto 4px;width:3px;height:1px;box-shadow:1px -1px #cdeffb,1px 1px #cdeffb}
.keyboard[data-keyboard-skin=dread]:not([data-keyboard-skin=default]) .key:is(.crit,.hit,.miss):not(.key-charred):after{width:28%;height:2px;right:36%;bottom:7px;background:#d59b65;box-shadow:0 -1px #8f512c}
.keyboard[data-keyboard-skin=fortune]:not([data-keyboard-skin=default]) .key:is(.crit,.hit,.miss):not(.key-charred):after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 48' shape-rendering='crispEdges'%3E%3Cpath fill='%23836a3b' d='M1 4h3v1h1v4H4v1H1V9H0V5h1zM12 29h3v1h1v4h-1v1h-3v-1h-1v-4h1z'/%3E%3Cpath fill='%23c4a260' d='M1 5h3v4H1zM12 30h3v4h-3z'/%3E%3Cpath fill='%23e0c88a' d='M1 5h1v3H1zM12 30h1v3h-1z'/%3E%3C/svg%3E");background-size:100% 48px;animation-name:quiet-key-treasure!important}
.keyboard[data-keyboard-skin=regalia]:not([data-keyboard-skin=default]) .key:is(.crit,.hit,.miss):not(.key-charred):after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 56' shape-rendering='crispEdges'%3E%3Cpath fill='%23836a3b' d='M1 5h3v1h1v4H4v1H1v-1H0V6h1zM12 37h3v1h1v4h-1v1h-3v-1h-1v-4h1z'/%3E%3Cpath fill='%23d0ae6b' d='M1 6h3v4H1zM12 38h3v4h-3z'/%3E%3Cpath fill='%23789ba4' d='m13 17 2 3-2 3-2-3zM2 43l2 3-2 3-2-3z'/%3E%3Cpath fill='%23c5d8cf' d='M12 19h1v2h-1zM1 45h1v2H1z'/%3E%3C/svg%3E");background-size:100% 56px;animation-name:quiet-royal-treasure!important}
.keyboard:is([data-keyboard-skin=fortune],[data-keyboard-skin=regalia]):not([data-keyboard-skin=default]) .key:is(.crit,.hit,.miss):not(.key-charred):after{inset:4px 3px 7px;width:auto;height:auto;background-color:transparent;background-repeat:repeat-y;box-shadow:none;opacity:.36;mask-image:linear-gradient(90deg,#000 0 18%,transparent 21% 79%,#000 82%);animation-duration:14s!important;animation-timing-function:linear!important;animation-iteration-count:infinite!important;animation-delay:calc(var(--key-index,0)*-.83s)!important}
@media(prefers-reduced-motion:reduce){.keyboard[data-keyboard-skin] .key:before,.keyboard[data-keyboard-skin] .key:after,.keyboard[data-keyboard-skin]:not([data-keyboard-skin=default]) .key:is(.crit,.hit,.miss):not(.key-charred):after{animation:none!important}}