/* The pixel UI kit: wood panels, buttons, slots and dialog boxes from the Ninja Adventure pack,
   9-sliced with border-image so they scale without blurring. One knob, --ui: the pixel scale. */
:root {
  --ui: 3;
  --wood-ink: #f7e7c3;
  --wood-dim: #c2a882;
  --wood-line: #4a3526;
  --wood-dark: #2a1d14;
  --gold: #f2b544;
}
@media (max-width: 420px) { :root { --ui: 3; } }

/* Panels ------------------------------------------------------------------ */
.p9, .panel-wood, .panel-bg, .slot, .btn-wood, .dialog9 {
  image-rendering: pixelated;
  border-style: solid;
  border-color: transparent;
}
.panel-wood {
  border-width: calc(5px * var(--ui));
  border-image: url('/art/ui/wood/nine_path_panel.png') 5 fill repeat;
  color: var(--wood-ink);
}
.panel-bg {
  border-width: calc(5px * var(--ui));
  border-image: url('/art/ui/wood/nine_path_bg.png') 5 fill repeat;
  color: var(--wood-ink);
}
.panel-inner {
  border-width: calc(5px * var(--ui));
  border-image: url('/art/ui/wood/nine_path_panel_interior.png') 5 fill repeat;
  color: var(--wood-ink);
}
.dialog9 {
  border-width: calc(10px * var(--ui)) calc(12px * var(--ui));
  border-image: url('/art/ui/dialog/DialogBox.png') 10 12 fill repeat;
  color: var(--wood-ink);
}

/* Slots: an inventory cell, used for every monster face ------------------- */
.slot {
  border-width: calc(4px * var(--ui));
  border-image: url('/art/ui/wood/inventory_cell.png') 4 fill repeat;
  display: grid;
  place-items: center;
  padding: 0;
}
.slot > canvas, .slot > img { display: block; image-rendering: pixelated; }
.slot.on { border-image-source: url('/art/ui/wood/nine_path_focus.png'); border-image-slice: 3; border-width: calc(3px * var(--ui)); }

/* Buttons ----------------------------------------------------------------- */
.btn-wood {
  appearance: none;
  border-width: calc(3px * var(--ui));
  border-image: url('/art/ui/wood/button_normal.png') 3 fill repeat;
  background: none;
  color: var(--wood-ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.1;
  padding: calc(3px * var(--ui)) calc(5px * var(--ui));
  min-height: 52px;
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.btn-wood:active, .btn-wood.on { border-image-source: url('/art/ui/wood/button_pressed.png'); transform: translateY(1px); }
.btn-wood:disabled { border-image-source: url('/art/ui/wood/button_disabled.png'); color: var(--wood-dim); cursor: default; }
.btn-wood:focus-visible { outline: calc(1px * var(--ui)) solid var(--gold); outline-offset: 2px; }
.btn-wood.main { color: #fff6df; }
.btn-wood.big { font-size: 21px; min-height: 64px; }

/* Headers ----------------------------------------------------------------- */
.head-wood {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(2px * var(--ui)) calc(4px * var(--ui));
  border-width: calc(4px * var(--ui));
  border-image: url('/art/ui/wood/nine_path_panel_2.png') 4 fill repeat;
  image-rendering: pixelated;
  border-style: solid;
  border-color: transparent;
  color: var(--wood-ink);
}

/* Pixel type: only at big sizes, where the pack font reads ----------------- */
.pixel { font-family: 'Pixel', ui-monospace, monospace; -webkit-font-smoothing: none; letter-spacing: 1px; }