/* Earned layouts are forged into each key. No enclosing plate or light frame. */
.keyboard[data-keyboard-skin]:not([data-keyboard-skin=default]):before{content:none!important;display:none!important}
.keyboard[data-keyboard-skin]>.keyboard-lights{display:none!important}
.keyboard[data-keyboard-skin=blue]{--key-face:linear-gradient(135deg,#344f66,#1b2e42);--key-etch:repeating-linear-gradient(135deg,transparent 0 9px,#a2c7d51b 9px 10px);--key-edge:#7eabbc;--key-pin:#b7d8dd}
.keyboard[data-keyboard-skin=moss]{--key-face:linear-gradient(140deg,#456045,#24382b);--key-etch:linear-gradient(50deg,transparent 0 70%,#acc08030 71% 74%,transparent 75%);--key-edge:#91a878;--key-pin:#c0cf8c}
.keyboard[data-keyboard-skin=gold]{--key-face:linear-gradient(145deg,#7b5c31,#3f301f);--key-etch:repeating-linear-gradient(0deg,transparent 0 6px,#e8ce861a 6px 7px);--key-edge:#d0b06f;--key-pin:#ffe0a0}
.keyboard[data-keyboard-skin=frost]{--key-face:linear-gradient(145deg,#507e8b,#234352 64%,#17303d);--key-etch:linear-gradient(135deg,#e7ffff6b 0 5%,transparent 6% 81%,#98dce64a 82% 85%,transparent 86%);--key-edge:#addce0;--key-pin:#e6fffa}
.keyboard[data-keyboard-skin=fire]{--key-face:linear-gradient(145deg,#5e3a2b,#2c2020 65%,#864323);--key-etch:linear-gradient(118deg,transparent 0 18%,#efa65d75 19% 21%,transparent 22% 72%,#b85a3159 73% 76%,transparent 77%);--key-edge:#bf8454;--key-pin:#ffcc74}
.keyboard[data-keyboard-skin=prism]{--key-face:linear-gradient(135deg,#5b466b,#244653 45%,#53374e 80%,#5b466b);--key-etch:linear-gradient(45deg,transparent 0 65%,#e3cff53b 66% 68%,transparent 69%);--key-edge:#baabd5;--key-pin:#e7d8ff}
.keyboard[data-keyboard-skin]:not([data-keyboard-skin=default]) .key:not(.strike-surface):not(.hit):not(.crit):not(.miss):not(.key-charred):not(.key-restoring){background:var(--key-edge);color:var(--skin-text);box-shadow:inset 0 -4px #081115,inset 1px 1px #ffffff35;animation:none;isolation:isolate}
.keyboard[data-keyboard-skin]:not([data-keyboard-skin=default]) .key:not(.strike-surface):not(.hit):not(.crit):not(.miss):not(.key-charred):not(.key-restoring):before{content:'';inset:3px 2px 6px;border:0;background:var(--key-etch),var(--key-face);box-shadow:inset 1px 1px #ffffff36,inset -1px -1px #020a0b9c}
.keyboard[data-keyboard-skin]:not([data-keyboard-skin=default]) .key:not(.strike-surface):not(.hit):not(.crit):not(.miss):not(.key-charred):not(.key-restoring):after{content:'';right:4px;bottom:7px;width:2px;height:2px;background:var(--key-pin);box-shadow:-1px -1px #070c0d80;opacity:.6;pointer-events:none}
.keyboard[data-keyboard-skin=fire] .key:not(.strike-surface):not(.hit):not(.crit):not(.miss):not(.key-charred):not(.key-restoring):after{animation:key-ember-breathe 4.8s ease-in-out infinite;animation-delay:calc(var(--key-index,0)*-.23s)}
.keyboard[data-keyboard-skin=frost] .key:not(.strike-surface):not(.hit):not(.crit):not(.miss):not(.key-charred):not(.key-restoring):after{right:auto;left:4px;bottom:auto;top:5px;width:3px;height:1px;box-shadow:1px -1px #cdeffb,1px 1px #cdeffb;opacity:.65}
.keyboard[data-keyboard-skin=prism] .key:not(.strike-surface):not(.hit):not(.crit):not(.miss):not(.key-charred):not(.key-restoring):before{background-size:100% 100%,240% 100%;animation:key-prism-forge 14s ease-in-out infinite;animation-delay:calc(var(--key-index,0)*-.31s)}
@keyframes key-ember-breathe{0%,100%{opacity:.3;box-shadow:0 0 1px #ee934c}45%{opacity:1;box-shadow:0 -1px #edb96c,0 0 4px #f28135}}
@keyframes key-prism-forge{0%,100%{background-position:0 0,0 0}50%{background-position:0 0,100% 0}}
/* The live miniature uses the same surfaces, without crowding its small letters. */
.preview-keyboard[data-keyboard-skin] .key:before{inset:2px 1px 3px!important}
.preview-keyboard[data-keyboard-skin] .key:after{width:1px!important;height:1px!important;right:2px!important;bottom:4px!important}
@media(prefers-reduced-motion:reduce){.keyboard[data-keyboard-skin] .key:before,.keyboard[data-keyboard-skin] .key:after{animation:none!important}}