:root {
  --mpk-gold: #d6b617;
  --mpk-plum: #24102f;
}

.appbar {
  border-bottom-color: color-mix(in srgb, var(--mpk-gold) 55%, #322a58);
  box-shadow: 0 2px 14px #0005;
}

.appbar::before {
  content: "";
  flex: 0 0 104px;
  width: 104px;
  height: 34px;
  background: transparent url("/mpk-logo.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 4px #0008);
}

.appbar .ab-menu,
.appbar .ab-knop {
  border: 1px solid #d6b61755;
}

.pad.playing,
.row.playing {
  border-color: var(--mpk-gold);
  box-shadow: 0 0 0 2px var(--mpk-gold), 0 0 20px #d6b61755;
}

@media (max-width: 620px) {
  .appbar::before { display: none; }
}