/* Written by `go run ./cmd/art web`; do not edit. */

@font-face {
    font-family: "Flywheel Body";
    src: url("body.ttf") format("truetype");
    font-display: block;
}

:root {
    --px: 2px;
    --panel: rgb(42 30 88 / 0.922);
    --panel-deep: rgb(26 18 56 / 0.878);
    --well: #1a1238;
    --well-hover: #2a1e58;
    --silhouette: #3e2e7a;
    --bar-empty: rgb(26 18 56 / 0.667);
    --raised: #3e2e7a;
    --raised-hover: #4a2a9a;
    --line: #7a48d0;
    --ink: #000000;
    --echo-a: #e0408f;
    --echo-b: #20b0a8;
    --text: #fff6e8;
    --text-dim: #c8a88a;
    --highlight: #fff59a;
    --accent: #f08024;
    --accent-hover: #ffc050;
    --accent-pressed: #c24a14;
    --on-accent: #000000;
    --danger: #8a1428;
    --danger-hover: #cc2a3a;
    --danger-pressed: #1a1238;
    --focus: #ffe040;
    --gold: #f0d030;
    --selection: rgb(32 176 168 / 0.502);
    --scroll-thumb-drag: #b890ff;
    --hp: #cc2a3a;
    --mp: #3b5bd9;
    --glow: #c4ec30;
    --good: #c8f060;
    --bad: #ff86c0;
    --notice: #ffc050;
    --level-up: #ffe040;
    --boss: #e0408f;
    --drained: #4a4a4c;
    --drained-text: #b0b0b0;
    --quest-not-started: #c8a88a;
    --quest-in-progress: #f0d030;
    --quest-completed: #c8f060;
    --kind-equip: #c8f060;
    --kind-use: #70e8d0;
    --kind-rune: #b890ff;
    --kind-misc: #fff59a;
    --class-general: #fff6e8;
    --class-warrior: #ffc050;
    --class-archer: #c8f060;
    --class-mage: #b890ff;
    --marker-quest: #f0d030;
    --marker-turn-in: #70e8d0;
}

/* Text in the body face, a label's 14 pixel line. */
.kit-text {
    font-family: "Flywheel Body", monospace;
    font-size: calc(10 * var(--px));
    line-height: calc(14 * var(--px));
    -webkit-font-smoothing: none;
    font-smooth: never;
}

/* Display lettering and other images drawn a game pixel to a page pixel. */
.kit-zoom {
    display: block;
    zoom: 2;
    image-rendering: pixelated;
}

/* A panel: a window's frame, its box inside the frame's echoes, and a header across the
   box's top with its title in display lettering. */
.kit-panel {
    position: relative;
    border: solid transparent;
    border-width: calc(16 * var(--px));
    border-image: url("frame.png") 16 fill / calc(16 * var(--px)) stretch;
    image-rendering: pixelated;
    padding: calc(25 * var(--px)) calc(4 * var(--px)) calc(4 * var(--px));
}

.kit-panel > .kit-header {
    position: absolute;
    top: calc(-13 * var(--px));
    left: calc(-13 * var(--px));
    right: calc(-13 * var(--px));
    height: calc(30 * var(--px));
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid transparent;
    border-width: calc(1 * var(--px)) calc(12 * var(--px)) calc(1 * var(--px)) calc(12 * var(--px));
    border-image: url("header.png") 1 12 fill / calc(1 * var(--px)) calc(12 * var(--px)) calc(1 * var(--px)) calc(12 * var(--px)) repeat stretch;
    box-sizing: border-box;
}

/* A button: the game's lozenge, its label on the flat rows between its rounded ends.
   Pressed drops it a pixel; focus rings it in gold, breathing as the game's ring does. */
.kit-button {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    height: calc(35 * var(--px));
    border: solid transparent;
    border-width: calc(11 * var(--px)) calc(10 * var(--px)) calc(12 * var(--px)) calc(10 * var(--px));
    border-image: url("button.png") 11 10 12 10 fill / calc(11 * var(--px)) calc(10 * var(--px)) calc(12 * var(--px)) calc(10 * var(--px)) repeat stretch;
    image-rendering: pixelated;
    padding: 0 calc(4 * var(--px));
    background: none;
    color: var(--text);
    font: inherit;
    line-height: calc(12 * var(--px));
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.kit-button:hover { border-image-source: url("button-hover.png"); }
.kit-button:active { border-image-source: url("button-pressed.png"); padding-top: var(--px); }
.kit-button.primary { border-image-source: url("button-primary.png"); color: var(--on-accent); }
.kit-button.primary:hover { border-image-source: url("button-primary-hover.png"); }
.kit-button.primary:active { border-image-source: url("button-primary-pressed.png"); }
.kit-button:focus { outline: none; }

.kit-button:focus-visible::after {
    content: "";
    position: absolute;
    inset: calc(-14 * var(--px)) calc(-13 * var(--px)) calc(-14 * var(--px)) calc(-13 * var(--px));
    border: solid transparent;
    border-width: calc(14 * var(--px)) calc(14 * var(--px)) calc(14 * var(--px)) calc(14 * var(--px));
    border-image: url("ring.png") 14 14 14 14 / calc(14 * var(--px)) calc(14 * var(--px)) calc(14 * var(--px)) calc(14 * var(--px)) repeat stretch;
    animation: kit-breathe 1.2s infinite;
    pointer-events: none;
}

@keyframes kit-breathe {
    0%, 49.9% { border-image-source: url("ring-wide.png"); }
    50%, 100% { border-image-source: url("ring.png"); }
}

/* A well: sunken, the game sits in one. Its edge is three pixels of the element. */
.kit-well {
    border: solid transparent;
    border-width: calc(3 * var(--px));
    border-image: url("well.png") 9 fill / calc(9 * var(--px)) stretch;
    image-rendering: pixelated;
}

/* The loader: a groove filled up to a bead. */
.kit-groove {
    --fill-margin: calc(2 * var(--px));
    position: relative;
    height: calc(8 * var(--px));
    border-image: url("groove.png") 1 5 fill / calc(1 * var(--px)) calc(5 * var(--px)) calc(1 * var(--px)) calc(5 * var(--px)) repeat stretch;
    image-rendering: pixelated;
}

.kit-groove > .kit-fill {
    height: calc(13 * var(--px));
    min-width: calc(12 * var(--px));
    border-image: url("fill.png") 1 6 1 6 fill / calc(1 * var(--px)) calc(6 * var(--px)) calc(1 * var(--px)) calc(6 * var(--px)) repeat stretch;
    image-rendering: pixelated;
    margin: calc(-2 * var(--px));
}

.kit-groove .kit-bead {
    position: absolute;
    top: calc(-8 * var(--px));
    width: calc(24 * var(--px));
    height: calc(25 * var(--px));
    margin-left: calc(-12 * var(--px));
    background: url("bead.png") 0 0 / 100% 100% no-repeat;
    image-rendering: pixelated;
}