/* Generated by tools/gen-ui.mjs: the skin's fonts, frames and icons, for every page. Edit that, not this. */
@font-face {
  font-family: 'Emberfall';
  src: url(/assets/fonts/PixelifySans.ttf) format('truetype');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Emberfall Caps';
  src: url(/assets/fonts/Silkscreen.ttf) format('truetype');
  font-display: swap;
}
:root {
  --font: 'Emberfall', system-ui, sans-serif;
  --caps: 'Emberfall Caps', 'Emberfall', monospace;
  --ink: #0b0907;
  --frame-panel: url(/assets/ui/panel.png) 6 fill / 6px repeat;
  --frame-panel-w: 6px;
  --frame-dialog: url(/assets/ui/dialog.png) 8 fill / 8px repeat;
  --frame-dialog-w: 8px;
  --frame-tip: url(/assets/ui/tip.png) 6 fill / 6px repeat;
  --frame-tip-w: 6px;
  --frame-button: url(/assets/ui/button.png) 4 fill / 4px repeat;
  --frame-button-w: 4px;
  --frame-button-hover: url(/assets/ui/button-hover.png) 4 fill / 4px repeat;
  --frame-button-hover-w: 4px;
  --frame-button-down: url(/assets/ui/button-down.png) 4 fill / 4px repeat;
  --frame-button-down-w: 4px;
  --frame-primary: url(/assets/ui/primary.png) 4 fill / 4px repeat;
  --frame-primary-w: 4px;
  --frame-primary-hover: url(/assets/ui/primary-hover.png) 4 fill / 4px repeat;
  --frame-primary-hover-w: 4px;
  --frame-primary-down: url(/assets/ui/primary-down.png) 4 fill / 4px repeat;
  --frame-primary-down-w: 4px;
  --frame-input: url(/assets/ui/input.png) 4 fill / 4px repeat;
  --frame-input-w: 4px;
  --frame-input-focus: url(/assets/ui/input-focus.png) 4 fill / 4px repeat;
  --frame-input-focus-w: 4px;
  --frame-meter: url(/assets/ui/meter.png) 4 fill / 4px repeat;
  --frame-meter-w: 4px;
  --frame-tab: url(/assets/ui/tab.png) 4 fill / 4px repeat;
  --frame-tab-w: 4px;
  --frame-tab-on: url(/assets/ui/tab-on.png) 4 fill / 4px repeat;
  --frame-tab-on-w: 4px;
  --frame-slot: url(/assets/ui/slot.png);
  --frame-slot-hover: url(/assets/ui/slot-hover.png);
}

.pi {
  --pi-size: 32px;
  display: inline-block;
  flex: none;
  width: var(--pi-size);
  height: var(--pi-size);
  background: url(/assets/ui/icons.png) no-repeat;
  background-size: calc(25 * var(--pi-size)) var(--pi-size);
  background-position: calc(var(--i) * -1 * var(--pi-size)) 0;
  image-rendering: pixelated;
  vertical-align: middle;
}
.pi-map { --i: 0; }
.pi-shield { --i: 1; }
.pi-bag { --i: 2; }
.pi-heart { --i: 3; }
.pi-book { --i: 4; }
.pi-scroll { --i: 5; }
.pi-flame { --i: 6; }
.pi-trophy { --i: 7; }
.pi-chat { --i: 8; }
.pi-menu { --i: 9; }
.pi-sound { --i: 10; }
.pi-mute { --i: 11; }
.pi-dice { --i: 12; }
.pi-sword { --i: 13; }
.pi-expand { --i: 14; }
.pi-pencil { --i: 15; }
.pi-gear { --i: 16; }
.pi-lock { --i: 17; }
.pi-door { --i: 18; }
.pi-shirt { --i: 19; }
.pi-key { --i: 20; }
.pi-layout { --i: 21; }
.pi-stick { --i: 22; }
.pi-keys { --i: 23; }
.pi-motion { --i: 24; }