@charset "UTF-8";
/* ---- The brass plate, for CONSUMERS of the published brand -----------------
   Published beside materials.css and menu_button_plate.png; the game itself
   never loads this file. In the game the plate's URL goes through the bundler,
   so hud.ts sets --btn-plate on the document root from the imported asset
   (and .hud-btn holds the same recipe as .wtt-plate below). A consumer has no
   bundler between it and the PNG, so here the URL is simply the file beside
   this one. Keep the two recipes in step: the slice is a property of the
   artwork (each rivet sits 26-68px in from its corner of the 1914x366 PNG),
   so a new plate PNG means revisiting the 80 here and in style.css. */
:root {
  --btn-plate: url("./menu_button_plate.png");
}

/* One image, any size, no distorted rivets: the corner slices carry the
   rivets and are never stretched, the edges stretch along their length, the
   middle fills. Paints inward over the padding, so it is a reskin, not a
   re-layout. Suits a SHORT, SINGLE-LINE label. Set --plate-frame (px) on an
   element for a thinner or thicker bevel. */
.wtt-plate {
  --plate-frame: 7;
  background: transparent;
  border-style: solid;
  border-width: 0;
  border-image-source: var(--btn-plate);
  border-image-slice: 80 fill;
  border-image-width: calc(var(--plate-frame) * 1px);
  color: #cfc4a6;
  /* Stamped-into-the-metal lettering: dark drop below, a faint glint above. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 -1px 0 rgba(255, 246, 220, 0.18);
  transition: filter 0.12s, color 0.12s;
}
/* Metal has no flat hover colour to swap to -- it catches more light instead. */
.wtt-plate:hover:not(:disabled) {
  filter: brightness(1.25);
  color: #f4ecd8;
}