@font-face {
  font-family: "RuneScape Bold 12";
  src: url("/fonts/RuneScape-Bold-12.otf") format("opentype"),
       url("/fonts/RuneScape-Bold-12.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

* {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
  font-family: "RuneScape Bold 12", monospace;
  font-size: 32px;
  line-height: 32px;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  text-rendering: geometricPrecision;
}

:root {
  --rs-yellow: #ffff00;
  --rs-gold: #d4af37;
  --rs-gold-light: #f0d78c;
  --rs-gold-dark: #7a5c12;
  --rs-parchment: #cbb892;
  --rs-shadow: #000;
  --stack-w: 520px;
}

.stack {
  width: var(--stack-w);
  border: 3px solid var(--rs-gold);
  background-color: #4a2f18;
  background-image:
    linear-gradient(rgba(35, 18, 6, 0.38), rgba(35, 18, 6, 0.38)),
    url("/images/osrs-wood.png");
  background-size: auto, 160px 160px;
  background-repeat: repeat;
  box-shadow:
    inset 2px 2px 0 var(--rs-gold-light),
    inset -2px -2px 0 var(--rs-gold-dark),
    2px 2px 0 #2a1a08;
}

.stack.stale {
  opacity: 0.85;
}

.row-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 10px 12px;
  min-height: 48px;
  font-size: 32px;
  line-height: 32px;
  font-variant-numeric: tabular-nums;
  color: var(--rs-yellow);
  text-shadow:
    1px 1px 0 var(--rs-shadow),
    -1px -1px 0 var(--rs-shadow),
    1px -1px 0 var(--rs-shadow),
    -1px 1px 0 var(--rs-shadow),
    2px 2px 0 var(--rs-shadow);
}

.row-bar + .row-bar {
  border-top: 2px solid var(--rs-gold);
}

.sep {
  width: 2px;
  align-self: stretch;
  margin: 2px 10px;
  background: var(--rs-gold);
  flex-shrink: 0;
  box-shadow: 1px 0 0 var(--rs-gold-dark);
}

.who {
  flex: 0 0 72px;
  font-size: 32px;
  line-height: 32px;
}

.row-leader .who {
  color: var(--rs-gold-light);
}

.who-sb {
  color: var(--rs-yellow);
}

.name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 32px;
  line-height: 32px;
}

.row-leader .name {
  color: var(--rs-parchment);
}

.rank-big {
  flex: 0 0 auto;
  min-width: 64px;
  font-size: 32px;
  line-height: 32px;
  color: var(--rs-yellow);
  transition: transform 0.3s ease;
}

.row-sb .who-sb {
  flex: 1 1 auto;
}

.rank-big.pulse {
  animation: rankPop 0.8s ease;
}

@keyframes rankPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.pts-cell {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
}

.row-leader .pts-cell .lbl,
.row-leader .pts-cell .val {
  color: var(--rs-parchment);
}

.pts-cell .lbl {
  color: var(--rs-yellow);
  font-size: 32px;
  line-height: 32px;
  letter-spacing: 0;
}

.pts-cell .val {
  font-size: 32px;
  line-height: 32px;
  color: var(--rs-yellow);
  min-width: 24px;
  text-align: right;
}