/* Beast Frontier pixel kit: the frames uikit.js draws, laid on with border-image at a whole-pixel scale */
:root {
  --kpx: 2px;
  --k-ink: #e7ebf3;
  --k-dim: #9aa5b8;
  --k-gold: #ffd24a;
  --k-gold-ink: #ffe9a0;
  --k-outline: #0b0a10;
  --k-frame-w: calc(var(--kpx) * 5);
  --k-plate-w: calc(var(--kpx) * 3);
  --k-chip-w: calc(var(--kpx) * 2);
}

/* frames */
.k-frame {
  border: var(--k-frame-w) solid var(--k-outline);
  border-image: var(--k-frame) 5 fill / var(--k-frame-w) stretch;
  background: transparent; box-shadow: none; image-rendering: pixelated;
}
.k-plate {
  border: var(--k-plate-w) solid var(--k-outline);
  border-image: var(--k-plate) 3 fill / var(--k-plate-w) stretch;
  background: transparent; box-shadow: none; image-rendering: pixelated;
}
.k-well {
  border: var(--k-chip-w) solid var(--k-outline);
  border-image: var(--k-well) 2 fill / var(--k-chip-w) stretch;
  background: transparent; box-shadow: none; image-rendering: pixelated;
}

/* buttons */
.k-btn {
  border: var(--k-chip-w) solid var(--k-outline);
  border-image: var(--k-chip) 2 fill / var(--k-chip-w) stretch;
  background: transparent; box-shadow: none; image-rendering: pixelated;
  color: var(--k-ink); cursor: pointer;
}
.k-btn:hover:not(:disabled) { border-image-source: var(--k-chip-lit); }
.k-btn:active:not(:disabled) { border-image-source: var(--k-chip-down); transform: translateY(var(--kpx)); }
.k-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.k-btn.hot { border-image-source: var(--k-hot); color: #2a1c00; }
.k-btn.hot:hover:not(:disabled) { border-image-source: var(--k-hot-lit); }
.k-btn.hot:active:not(:disabled) { border-image-source: var(--k-hot-down); }
.k-btn.blue { border-image-source: var(--k-blue); }
.k-btn.blue:active:not(:disabled) { border-image-source: var(--k-blue-down); }
.k-btn.red { border-image-source: var(--k-red); }
.k-btn.red:active:not(:disabled) { border-image-source: var(--k-red-down); }
.k-btn.on { border-image-source: var(--k-gold); color: #2a1c00; }

/* type */
.k-head { font-family: 'Press Start 2P', 'Courier New', monospace; color: var(--k-gold); text-shadow: var(--kpx) var(--kpx) 0 var(--k-outline); }
.k-rule { height: 0; border: 0; border-top: var(--kpx) solid var(--k-outline); box-shadow: 0 var(--kpx) 0 #2c3348; margin: 8px 0 10px; }

/* bars: a well with a three-band fill, lit on top like every sprite */
.k-bar { position: relative; height: calc(var(--kpx) * 8); }
.k-bar > i { display: block; height: 100%; width: var(--v, 100%); }
.k-bar.hp > i { background: linear-gradient(#ff8a7a 0 var(--kpx), #d8392c var(--kpx) calc(100% - var(--kpx)), #8e1f17 calc(100% - var(--kpx))); }
.k-bar.ap > i { background: linear-gradient(#b3dcff 0 var(--kpx), #3f8fd6 var(--kpx) calc(100% - var(--kpx)), #1f4f82 calc(100% - var(--kpx))); }
.k-bar.xp > i { background: linear-gradient(#fff0a0 0 var(--kpx), #e0b418 var(--kpx) calc(100% - var(--kpx)), #8a6a08 calc(100% - var(--kpx))); }