@charset "UTF-8";
/* ---- Brass: the after-action report's plate as a menu material -------------
   Dark enamel, a worn brass edge, a rivet in each corner, parchment lettering
   in the report's serif (the .aar-plate rule, with two more rivets). Any
   element may wear it; the rivets are one pseudo-element painting the same
   radial gradient at the four corners, so the plate can be any size. Set
   --rivet (the bolt's diameter) and --rivet-in (its inset) on the element to
   fit: a title plate wants 9px/7px, a small badge 6px/4px.

   SHARED: style.css @imports this file for the game's own .hud-brass and
   .hud-menu-panel-title, and it is published verbatim beside materials.css
   for the community site, which wears it as .wtt-brass (the one rule, three
   names -- see materials.css for the publishing contract). */
.wtt-brass,
.hud-brass,
.hud-menu-panel-title {
  --rivet: 8px;
  --rivet-in: 6px;
  position: relative;
  color: #ecdbb5;
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 2px 2px #000;
  border: 1px solid #a78b56;
  border-radius: 5px;
  background:
    radial-gradient(ellipse at 25% 5%, #67502c38, transparent 75%),
    linear-gradient(140deg, #302718f5, #15130ef5);
  box-shadow:
    inset 0 0 0 2px #17140c,
    inset 0 0 0 3px #726044,
    0 0 0 2px #120e09,
    0 4px 12px #0009;
}
.wtt-brass::before,
.hud-brass::before,
.hud-menu-panel-title::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  --rivet-img: radial-gradient(circle at 35% 30%, #fae1a8, #a77b42 40%, #332113 70%, #0d0906 80%, transparent 88%);
  background-image: var(--rivet-img), var(--rivet-img), var(--rivet-img), var(--rivet-img);
  background-size: var(--rivet) var(--rivet);
  background-repeat: no-repeat;
  background-position:
    left var(--rivet-in) top var(--rivet-in),
    right var(--rivet-in) top var(--rivet-in),
    left var(--rivet-in) bottom var(--rivet-in),
    right var(--rivet-in) bottom var(--rivet-in);
}