/* Shared by board and control: tokens, type and the town-sign plate. */

@font-face {
  font-family: "D-DIN";
  src: url("/fonts/d-din.otf") format("opentype");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "D-DIN";
  src: url("/fonts/d-din-bold.otf") format("opentype");
  font-weight: 700;
  font-display: block;
}
@font-face {
  font-family: "D-DIN Condensed";
  src: url("/fonts/d-din-condensed-bold.otf") format("opentype");
  font-weight: 700;
  font-display: block;
}

:root {
  --asphalt: #26292c;
  --asphalt-raised: #32363b;
  --sign-yellow: #f5b800; /* close to RAL 1023, the yellow of German town signs */
  --sign-black: #1b1b1b;
  --chalk: #eef0f2;
  --muted: #9aa3ab;
  --stop-red: #d7263d;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--asphalt);
  color: var(--chalk);
  font-family: "D-DIN", "DIN Alternate", "Arial Narrow", sans-serif;
}

.digits {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Town sign: yellow plate with an inset black rule and the place name in bold DIN. */
.plate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  background: var(--sign-yellow);
  color: var(--sign-black);
  border-radius: 0.3em;
  padding: 0.45em 0.6em 0.4em;
  text-align: center;
}
.plate::before {
  content: "";
  position: absolute;
  inset: 0.14em;
  border: 0.09em solid var(--sign-black);
  border-radius: 0.2em;
  pointer-events: none;
}
.plate .name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
}
.plate .name.condensed {
  font-family: "D-DIN Condensed", "D-DIN", sans-serif;
}
.plate .role {
  display: block;
  font-weight: 400;
  line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}