/* Pixel skin: the kit (uikit.js + kit.css) laid over the HUD, the panels and the title screen */

/* frames */
.panel {
  background: transparent; box-shadow: none; padding: 14px 16px; image-rendering: pixelated;
  border: var(--k-frame-w) solid var(--k-outline); border-image: var(--k-frame) 5 fill / var(--k-frame-w) stretch;
}
.panel::before { display: none; }
.create-panel { background: transparent; }
#deathOverlay .deathPanel { box-shadow: none; }
.panelHead { border-bottom: var(--kpx) solid var(--k-outline); box-shadow: 0 var(--kpx) 0 #2c3348; }

/* plates: HUD readouts, prompts, tooltips and toasts */
.statFrame, #creditsTag, .toast, #interactPrompt, #tamePrompt, .slot .tip, body.mobile #mobileMenu {
  background: transparent; box-shadow: none; image-rendering: pixelated;
  border: var(--k-plate-w) solid var(--k-outline); border-image: var(--k-plate) 3 fill / var(--k-plate-w) stretch;
}
.slot {
  background: transparent; box-shadow: none; image-rendering: pixelated;
  border: var(--k-plate-w) solid var(--k-outline); border-image: var(--k-plate) 3 fill / var(--k-plate-w) stretch;
}
.slot:hover { border-image-source: var(--k-plate-on); }
.slot:active { box-shadow: none; }

/* buttons */
button {
  background: transparent; box-shadow: none; image-rendering: pixelated;
  border: var(--k-chip-w) solid var(--k-outline); border-image: var(--k-chip) 2 fill / var(--k-chip-w) stretch;
}
button:hover:not(:disabled) { background: transparent; border-image-source: var(--k-chip-lit); }
button:active:not(:disabled) { top: var(--kpx); box-shadow: none; border-image-source: var(--k-chip-down); }
button.primary { background: transparent; box-shadow: none; color: #2a1c00; border-image-source: var(--k-hot); }
button.primary:hover:not(:disabled) { background: transparent; border-image-source: var(--k-hot-lit); }
button.primary:active:not(:disabled) { box-shadow: none; border-image-source: var(--k-hot-down); }
.iconBtn, .sysBtn, #chatClose, body.mobile #mobileMenuBtn, .chatTab {
  background: transparent; box-shadow: none; image-rendering: pixelated;
  border: var(--k-chip-w) solid var(--k-outline); border-image: var(--k-chip) 2 fill / var(--k-chip-w) stretch;
}
.iconBtn:hover, .sysBtn:hover, #chatClose:hover, .chatTab:hover { background: transparent; border-image-source: var(--k-chip-lit); }
.chatTab.active, body.mobile #mobileMenuBtn.on { background: transparent; color: #2a1c00; border-image-source: var(--k-gold); }
.qtyPick .allBtn { background: transparent; }
.dropBtn {
  background: transparent; image-rendering: pixelated;
  border: var(--kpx) solid var(--k-outline); border-image: var(--k-red) 2 fill / var(--kpx) stretch;
}
.dropBtn:hover:not(:disabled) { background: transparent; border-image-source: var(--k-red-lit); }

/* key caps and badges */
.slot .key {
  background: transparent; box-shadow: none; image-rendering: pixelated; padding: 2px 3px 1px;
  border: var(--kpx) solid var(--k-outline); border-image: var(--k-chip) 2 fill / var(--kpx) stretch;
}
.keycap {
  background: transparent; box-shadow: none; image-rendering: pixelated; color: #2a1c00;
  border: var(--k-chip-w) solid var(--k-outline); border-image: var(--k-gold) 2 fill / var(--k-chip-w) stretch;
}
.slot .ap {
  background: transparent; box-shadow: none; image-rendering: pixelated; color: #e8f4ff;
  border: var(--kpx) solid var(--k-outline); border-image: var(--k-blue) 2 fill / var(--kpx) stretch;
}
.slot .ap.noap { color: #ffe2dc; border-image-source: var(--k-red); }

/* wells: inputs, list rows and bars */
.field input, #chatInput, .qtyPick input, .rolled-ability,
.invItem, .npcRow, .recipeCard, .qOffer, .bar, .bankBar {
  background: transparent; box-shadow: none; image-rendering: pixelated;
  border: var(--k-chip-w) solid var(--k-outline); border-image: var(--k-well) 2 fill / var(--k-chip-w) stretch;
}
/* The well eats 2 * chip-w of a bar's height, so the thin XP bar needs room left for its fill. */
.xpbar { height: calc(var(--k-chip-w) * 2 + var(--kpx) * 3); }
body.mobile .xpbar { height: calc(var(--k-chip-w) * 2 + var(--kpx) * 2); }
.field input:focus, #chatInput:focus, .qtyPick input:focus { box-shadow: none; border-image-source: var(--k-well-on); }
.invItem.usable:hover { box-shadow: none; border-image-source: var(--k-well-on); }
.qOffer { position: relative; padding-left: 16px; }
.qOffer::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc(var(--kpx) * 2); background: #ffd24a; }
.qOffer.ready::before { background: #5fd3a0; }
.qOffer.active::before { background: #6f7b90; }
.qOffer button {
  background: transparent; box-shadow: none;
  border: var(--k-chip-w) solid var(--k-outline); border-image: var(--k-blue) 2 fill / var(--k-chip-w) stretch;
}
.qOffer button:hover:not(:disabled) { background: transparent; border-image-source: var(--k-blue-lit); }
.qOffer button:active:not(:disabled) { border-image-source: var(--k-blue-down); }

/* phone controls: pixel octagons instead of circles */
.mBtn, .mBtn:active, .mBtnCd { border-radius: 0; }
.mBtn {
  background: transparent; box-shadow: none; image-rendering: pixelated;
  border: var(--k-plate-w) solid transparent; border-image: var(--k-oct) 3 fill / var(--k-plate-w) stretch;
}
.mBtn:active { background: transparent; border-image-source: var(--k-oct-down); }
.mBtnAttack, .mBtnPotion { border-image-source: var(--k-oct-red); }
.mBtnSupport { border-image-source: var(--k-oct-green); }
.mBtnDodge { border-image-source: var(--k-oct-blue); }
.mBtnInteract { background: transparent; border-image-source: var(--k-oct-hot); }
.mBtnTame { background: transparent; border-image-source: var(--k-oct-tame); }
.mBtn.locked { background: transparent; border-image-source: var(--k-oct-grey); }
#mobileJoystickBase, #mobileJoystickThumb {
  border-radius: 0; background: transparent; box-shadow: none; image-rendering: pixelated;
  border: var(--k-plate-w) solid transparent; border-image: var(--k-oct-ghost) 3 fill / var(--k-plate-w) stretch;
}
#mobileJoystickThumb { border-image-source: var(--k-oct-hot); }
.mBtnAp, .mBtnCount, .mBtnLock {
  background: transparent; box-shadow: none; image-rendering: pixelated;
  border: var(--kpx) solid var(--k-outline); border-image: var(--k-chip) 2 fill / var(--kpx) stretch;
}
.mBtnLabel {
  background: transparent; box-shadow: none; image-rendering: pixelated;
  border: var(--k-plate-w) solid var(--k-outline); border-image: var(--k-plate) 3 fill / var(--k-plate-w) stretch;
}
body.mobile #mobileMenuBtn.pending::after { border-radius: 0; box-shadow: 0 0 0 var(--kpx) var(--k-outline); }
#invGrid .invItem .matq { border-radius: 0; }

/* bar fills: three bands, lit on top like every sprite */
.bar .fill::after { display: none; }
.hpbar .fill { background: linear-gradient(#ff8a7a 0 var(--kpx), #d8392c var(--kpx) calc(100% - var(--kpx)), #8e1f17 calc(100% - var(--kpx))); }
.apbar .fill { background: linear-gradient(#b3dcff 0 var(--kpx), #3f8fd6 var(--kpx) calc(100% - var(--kpx)), #1f4f82 calc(100% - var(--kpx))); }
.xpbar .fill { background: linear-gradient(#fff0a0 0 var(--kpx), #e0b418 var(--kpx) calc(100% - var(--kpx)), #8a6a08 calc(100% - var(--kpx))); }
.bankBarFill { background: linear-gradient(#b8ffcc 0 var(--kpx), #3fcf6a var(--kpx) calc(100% - var(--kpx)), #1d7a3a calc(100% - var(--kpx))); }