/* Original supplied atlases, sampled without resizing their pixels. */
:root { --sprite-edge: #442437; --sprite-light: #ffdfa0; }
.pixel-btn, .pixel-button, .pixel-public .btn {
  border-radius: 0;
  border: 3px solid var(--sprite-edge);
  box-shadow: inset 0 3px #fff2bb66, inset 0 -4px #0005, 3px 3px 0 #080510;
  text-shadow: 1px 1px #0003;
}
.pixel-btn.primary, .pixel-button.primary {
  color: #281725;
  background: linear-gradient(#fbd782 0 48%, #d7a14c 48% 100%);
}
.pixel-btn:active, .pixel-button:active { transform: translateY(2px); box-shadow: inset 0 3px #0004; }
:is(a,button,input):focus-visible { outline: 3px solid #ffdc78; outline-offset: 4px; }
.pixel-panel, .setup-pass, .welcome-panel {
  border-radius: 0;
  border: 4px solid #72507d;
  box-shadow: inset 0 0 0 2px #d4a96388, 5px 5px 0 #080511;
}
.setup-heading, .view-title { position: relative; padding-left: 65px; }
.setup-heading::before, .view-title::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 48px; height: 48px; image-rendering: pixelated;
  background: url('../assets/ui/medieval.png') -384px -48px / 768px 384px;
  pointer-events: none;
}
.xp-track { border: 3px solid #432736; border-radius: 0; background: #171525; box-shadow: 0 2px #d6b16b; }
.xp-track i { background: repeating-linear-gradient(90deg,#c096ff 0 7px,#6842a1 7px 9px); border-radius: 0; }
.app-nav { border: 3px solid #77507f; box-shadow: inset 0 2px #d5ac67; background: #20142e; }
.app-nav button.active { background: #724986; border-color: #efc574; box-shadow: inset 0 2px #bb8ac2,inset 0 -3px #352040; }
.app-nav span { width: 32px; height: 32px; margin: 0 auto 4px; font-size: 0!important; image-rendering: pixelated; background: url('../assets/ui/medieval.png') -160px 0 / 512px 256px; }
.app-nav [data-nav="rewards"] span { background-position: -192px -96px; }
.app-nav [data-nav="id"] span { background-position: -256px -32px; }
.app-nav [data-nav="leaderboard"] span { background-position: -352px -64px; }
.app-nav [data-nav="history"] span { background-position: -224px 0; }
.app-site-menu { display: flex; align-items: center; gap: 12px; }
.app-site-menu a { color: #ffdb83; font: 600 .8rem var(--pixel); padding: 12px 6px; text-decoration: none; }
.app-site-menu button { min-height: 44px; }
@media(max-width:680px) {
  .app-brand small { max-width: 115px; line-height: 1.4; }
  .app-site-menu { gap: 3px; }
  .app-site-menu a { font-size: .7rem; }
  .app-site-menu button { padding: 8px; font-size: .65rem; }
  .guild-nav { border: 3px solid #77507f; background: #20142efc; box-shadow: inset 0 2px #d5ac67; }
}