@font-face{font-family:NeuralPixel;src:url('../assets/ui/kenpixel-web.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--game-ink:#fff1b1;--game-muted:#d7b891;--game-orange:#ffad24;--game-panel:#27150d;--game-border:#b96820;--game-shadow:#110805}
.game-panel{
  position:relative;box-sizing:border-box;border:3px solid var(--game-border);border-radius:0;
  background:linear-gradient(145deg,#3c210f,var(--game-panel) 65%,#1c1009);color:var(--game-ink);
  box-shadow:inset 0 0 0 2px #6a3713,inset 0 5px 0 #d99530,inset 0 -5px 0 #492008,0 6px 0 #512409,0 9px 0 #100805;
}
.game-panel::before{content:'';position:absolute;inset:7px;pointer-events:none;
  background:linear-gradient(#e6a63e,#9a4a10) left top/9px 9px no-repeat,linear-gradient(#e6a63e,#9a4a10) right top/9px 9px no-repeat,
    linear-gradient(#89420c,#d18b29) left bottom/9px 9px no-repeat,linear-gradient(#89420c,#d18b29) right bottom/9px 9px no-repeat;
}
button.game-button{
  position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:68px;
  padding:17px 10% 21px;border:0;border-radius:0;box-shadow:none;
  background:url('../assets/ui/pause-button-idle.svg') center/100% 100% no-repeat;color:#ffad24;
  font:400 23px/1.2 NeuralPixel,monospace;text-transform:uppercase;text-shadow:1px 2px #6a2b04,1px 4px #1b0901;
  cursor:pointer;transition:transform .1s;
}
button.game-button.ns-highlighted{background-image:url('../assets/ui/pause-button-active.svg');color:#fff49e}
/* style.css has a generic button:hover background shorthand that would reset the
   artwork's size and position; restate the whole background on every copper state. */
button.game-button:hover{background:url('../assets/ui/pause-button-idle.svg') center/100% 100% no-repeat}
button.game-button:not(:disabled):is(:hover,.ns-highlighted){background:url('../assets/ui/pause-button-active.svg') center/100% 100% no-repeat;color:#fff49e}
button.game-button:hover{transform:translateY(-1px)}
button.game-button:active{transform:translateY(2px)}
button.game-button:focus-visible{outline:2px solid #fff1a5;outline-offset:3px}
button.game-button:disabled{opacity:.55;cursor:default}
.game-kicker{color:#dfac65;font:600 10px/1.5 'Segoe UI',sans-serif;letter-spacing:2px;text-transform:uppercase}
.game-keys kbd{display:inline-block;background:#1a1009;border:1px solid #a36b2a;border-radius:0;box-shadow:0 2px #080401;color:#ffdc92;padding:3px 5px;font:11px/1.1 'Segoe UI',sans-serif}
@media(prefers-reduced-motion:reduce){button.game-button{transition:none}}
