/* GENERATED by tools/build-ui.ps1 (tools/bf-ui/export_web_ui.gd) from the Burger Factory
   project's UI code. Do not edit: change Burger Factory and re-run the build. */

@font-face {
  font-family: "BF Title";
  src: url("fonts/DeftoneStylus.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "BF Label";
  src: url("fonts/BlueHighway-Bold.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "BF Body";
  src: url("fonts/BlueHighway-Regular.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "BF Flavor";
  src: url("fonts/Kingsbridge-Italic.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "BF Logo Serif";
  src: url("fonts/KingsbridgeExtended-Bold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "BF Logo Sans";
  src: url("fonts/Teen-Bold.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bf-brass: #b58d4a;
  --bf-brass-edge: #2b1d0c;
  --bf-brass-hi: #ecd28e;
  --bf-brass-lo: #6f5128;
  --bf-bulb-off: #5a4a34;
  --bf-bulb-unlit: #8a5418;
  --bf-coin-edge: #5e3a06;
  --bf-coin-ink: #2a1606;
  --bf-cream: #eee0c0;
  --bf-effect-ink: #ffba4a;
  --bf-flavor-ink: #f2e5c8;
  --bf-icon-metal: #a39278;
  --bf-iron: #252321;
  --bf-iron-hi: #35322e;
  --bf-iron-lo: #151413;
  --bf-payout-edge: #123f18;
  --bf-payout-ink: #0b2a0f;
  --bf-plate-hi: #f4e6c0;
  --bf-plate-lo: #b8955a;
  --bf-price-bad: #b3150d;
  --bf-red-lacquer: #a82020;
  --bf-star-empty: #8e7652;
  --bf-star-gold: #ffc93c;
  --bf-text: #f3e9d3;
  --bf-ui-bad: #ff5a4e;
  --bf-ui-energy: #ffb52e;
  --bf-ui-gold: #ffc93c;
  --bf-ui-gold-dark: #b07a12;
  --bf-ui-good: #59d46a;
  --bf-ui-ink: #fff4e0;
  --bf-ui-ink-dark: #2a1a10;
  --bf-ui-ink-dim: #c9b89c;
  --bf-ui-panel: rgba(23, 19, 18, 0.920);
  --bf-ui-panel-edge: #4a3a30;
  --bf-ui-panel-inner: rgba(41, 33, 28, 0.950);
  --bf-ui-parchment: #f3e2bf;
  --bf-logo-brown: #3b1a0c;
  --bf-logo-burger-edge: #2c0604;
  --bf-logo-burger-red: #b21d1c;
  --bf-logo-burger-shade: #5a0b09;
  --bf-logo-red: #a82020;
  --bf-logo-red-dark: #5e0d0b;
  --bf-button-ink: #4e0d08;
  --bf-button-ink-disabled: #6d6259;
  --bf-button-ink-hover: #7c0f0f;
  --bf-panel-good-accent: #2f8a3a;
  --bf-panel-ink: #4e0d08;
  --bf-font-title: "BF Title", "BF Label", cursive;
  --bf-font-label: "BF Label", system-ui, sans-serif;
  --bf-font-body: "BF Body", "BF Label", system-ui, sans-serif;
  --bf-font-flavor: "BF Flavor", Georgia, serif;
  --bf-font-logo-serif: "BF Logo Serif", Georgia, serif;
  --bf-font-logo-sans: "BF Logo Sans", system-ui, sans-serif;
  --bf-checker: url("checker.png");
  --bf-checker-size: 14px 14px;
  --bf-checker-block: url("checker-block.png");
}

.bf-panel {
  border: 0 solid transparent;
  border-image: url("panel.png") 194 182 234 182 / 97px 91px 117px 91px / 17px 27px 37px 27px round stretch;
  /* The face, stretched once behind the frame (its edges tile). */
  background: url("panel-face.jpg") center / calc(100% - 40px) calc(100% - 40px) no-repeat;
  padding: 30px 32px;
  color: var(--bf-text);
}

.bf-metal {
  border: 0 solid transparent;
  border-image: url("metal.png") 55 55 60 55 / 27.5px 27.5px 30px 27.5px / 3.5px 3.5px 6px 3.5px round stretch;
  /* The face, stretched once behind the frame (its edges tile). */
  background: url("metal-face.jpg") center / calc(100% - 24px) calc(100% - 24px) no-repeat;
  padding: 16px 20px;
  color: var(--bf-text);
}

.bf-metal-checker {
  border: 0 solid transparent;
  border-image: url("metal-checker.png") 75 55 80 55 / 37.5px 27.5px 40px 27.5px / 3.5px 3.5px 6px 3.5px round;
  /* The face, stretched once behind the frame (its edges tile). */
  background: url("metal-checker-face.jpg") center / calc(100% - 32px) calc(100% - 32px) no-repeat;
  padding: 20px 26px;
  color: var(--bf-text);
}

.bf-card {
  border: 0 solid transparent;
  border-image: url("card.png") 87 87 98 87 fill / 43.5px 43.5px 49px 43.5px / 3.5px 3.5px 9px 3.5px stretch;
  padding: 22px;
  color: var(--bf-ui-ink-dark);
}

.bf-inset {
  border: 0 solid transparent;
  border-image: url("inset.png") 37 37 37 37 fill / 18.5px 18.5px 18.5px 18.5px / 4.5px 4.5px 4.5px 4.5px stretch;
  padding: 6px;
}

.bf-banner {
  border: 0 solid transparent;
  border-image: url("banner.png") 47 151 48 151 fill / 23.5px 75.5px 24px 75.5px / 3.5px 3.5px 4px 3.5px stretch;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 82px 3px;
  font-family: var(--bf-font-title);
  font-size: 30px;
  line-height: 1;
  color: var(--bf-cream);
  text-shadow: 0 2px 0 rgba(51, 8, 5, 0.8);
  -webkit-text-stroke: 3px rgba(77, 13, 8, 0.9);
  paint-order: stroke fill;
}

.bf-plate {
  border: 0 solid transparent;
  border-image: url("plate.png") 42 66 44 66 fill / calc(var(--bf-h) * 0.525) calc(var(--bf-h) * 0.825) calc(var(--bf-h) * 0.55) calc(var(--bf-h) * 0.825) / calc(var(--bf-h) * 0.075) calc(var(--bf-h) * 0.075) calc(var(--bf-h) * 0.1) calc(var(--bf-h) * 0.075) stretch;
  --bf-h: 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--bf-h);
  padding: 0 calc(var(--bf-h) * 0.75);
  font-family: var(--bf-font-label);
  font-size: calc(var(--bf-h) * 0.42);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bf-logo-brown);
}

.bf-button {
  border: 0 solid transparent;
  border-image: url("button.png") 60 78 61 78 fill / calc(var(--bf-h) * 0.5357) calc(var(--bf-h) * 0.6964) calc(var(--bf-h) * 0.5446) calc(var(--bf-h) * 0.6964) / calc(var(--bf-h) * 0.0893) calc(var(--bf-h) * 0.0536) calc(var(--bf-h) * 0.0982) calc(var(--bf-h) * 0.0536) stretch;
  --bf-h: 52px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--bf-h);
  min-width: calc(var(--bf-h) * 3);
  padding: 0 calc(var(--bf-h) * 0.62) calc(var(--bf-h) * 0.04);
  font-family: var(--bf-font-title);
  font-size: calc(var(--bf-h) * 0.46);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--bf-button-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  cursor: pointer;
  /* Fetch the other states up front so hovering doesn't flash. */
  background: url("button-hover.png") no-repeat, url("button-pressed.png") no-repeat;
  background-size: 0 0;
}

.bf-button:hover {
  border-image-source: url("button-hover.png");
  padding-bottom: calc(var(--bf-h) * 0.1);
  color: var(--bf-button-ink-hover);
}

.bf-button:active {
  border-image-source: url("button-pressed.png");
  padding-bottom: 0;
  padding-top: calc(var(--bf-h) * 0.04);
}

.bf-button[aria-disabled="true"],
.bf-button:disabled {
  border-image-source: url("button-disabled.png");
  padding-bottom: calc(var(--bf-h) * 0.04);
  padding-top: 0;
  color: var(--bf-button-ink-disabled);
  cursor: default;
  pointer-events: none;
}

.bf-button-primary {
  border: 0 solid transparent;
  border-image: url("button-primary.png") 60 78 61 78 fill / calc(var(--bf-h) * 0.5357) calc(var(--bf-h) * 0.6964) calc(var(--bf-h) * 0.5446) calc(var(--bf-h) * 0.6964) / calc(var(--bf-h) * 0.0893) calc(var(--bf-h) * 0.0536) calc(var(--bf-h) * 0.0982) calc(var(--bf-h) * 0.0536) stretch;
  --bf-h: 52px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--bf-h);
  min-width: calc(var(--bf-h) * 3);
  padding: 0 calc(var(--bf-h) * 0.62) calc(var(--bf-h) * 0.04);
  font-family: var(--bf-font-title);
  font-size: calc(var(--bf-h) * 0.46);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--bf-button-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  cursor: pointer;
  /* Fetch the other states up front so hovering doesn't flash. */
  background: url("button-primary-hover.png") no-repeat, url("button-primary-pressed.png") no-repeat;
  background-size: 0 0;
}

.bf-button-primary:hover {
  border-image-source: url("button-primary-hover.png");
  padding-bottom: calc(var(--bf-h) * 0.1);
  color: var(--bf-button-ink-hover);
}

.bf-button-primary:active {
  border-image-source: url("button-primary-pressed.png");
  padding-bottom: 0;
  padding-top: calc(var(--bf-h) * 0.04);
}

.bf-button-primary[aria-disabled="true"],
.bf-button-primary:disabled {
  border-image-source: url("button-primary-disabled.png");
  padding-bottom: calc(var(--bf-h) * 0.04);
  padding-top: 0;
  color: var(--bf-button-ink-disabled);
  cursor: default;
  pointer-events: none;
}

.bf-brand {
  display: block;
  width: 60px;
  height: 60px;
  background: url("brand.png") center / contain no-repeat;
}