/* Screen 5, HI-SCORE: an ink arcade table with name entry, and three example rosters. */
.hiscore { border-top: var(--line-lg) solid var(--ink); }
.hiscore__body {
  max-width: 1344px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 3.4vw, 52px);
  align-items: start;
}
.hs__panel {
  background: var(--ink); color: var(--chalk);
  border: var(--line-lg) solid var(--ink); box-shadow: var(--drop-lg) var(--drop-lg) 0 var(--p1);
}
.hs__bar {
  display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; font-size: 14px;
  color: var(--yellow); border-bottom: 2px solid var(--ink-soft);
}
.hs__example { font-size: 11px; padding: 4px 8px 3px; background: var(--yellow); color: var(--ink); }
.hs__table { width: 100%; border-collapse: collapse; font-family: var(--f-pix); text-transform: uppercase; }
.hs__table th { padding: 12px 20px 8px; font-weight: 400; font-size: 11px; text-align: left; color: var(--yellow); }
.hs__table td {
  padding: 12px 20px; font-size: clamp(16px, 1.5vw, 22px); border-top: 2px solid var(--ink-soft);
  white-space: nowrap;
}
.hs__table td:first-child { font-size: 13px; color: var(--yellow); width: 70px; }
.hs__name { letter-spacing: .3em; }
.hs__rec { font-variant-numeric: tabular-nums; }
.hs__table .hs__res { font-size: 13px; }
.hs__table tbody tr:first-child .hs__res { color: var(--yellow); }
.hs__you td { background: var(--p1); }
.hs__note { padding: 14px 20px 18px; font-size: 14px; border-top: 2px solid var(--ink-soft); color: var(--chalk); }

.hs__init { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: text; }
.hs__init input {
  position: absolute; inset: 0; width: 100%; opacity: 0; font: inherit; border: 0; padding: 0;
  caret-color: transparent;
}
.hs__letters { display: flex; gap: 6px; }
.hs__letters b {
  display: grid; place-items: center; width: 28px; height: 34px; font-weight: 400;
  border-bottom: 4px solid var(--chalk);
}
.hs__letters b.is-active {
  color: var(--yellow); border-color: var(--yellow); animation: blink .5s steps(2, jump-none) infinite;
}
.hs__init:focus-within { outline: var(--line) solid var(--yellow); outline-offset: 6px; }
.hs__new { font-size: 10px; padding: 3px 6px 2px; background: var(--yellow); color: var(--ink); }

/* ---------- rosters worth arguing about ---------- */
.argue-wrap__head { font-size: clamp(22px, 2vw, 30px); margin-bottom: 16px; }
.argue-list { display: grid; gap: 18px; }
.argue {
  display: grid; gap: 10px; padding: 16px 18px 16px;
  background: var(--chalk); border: var(--line) solid var(--ink); box-shadow: var(--drop) var(--drop) 0 var(--ink);
}
.argue__tag {
  justify-self: start; font-size: 10px; padding: 3px 7px 2px; background: var(--ink); color: var(--yellow);
}
.argue__title { font-size: 24px; font-stretch: 130%; }
.argue__heads { display: flex; gap: 6px; }
.argue__heads span {
  width: 56px; height: 56px; background-color: var(--yellow); background-repeat: no-repeat;
  border: var(--line) solid var(--ink);
}
.argue__names { font-size: 10px; }
.argue__ask { font-size: 15px; line-height: 1.4; }
.argue__str { font-size: 11px; }
.argue__str b { font-weight: 400; padding: 2px 6px 1px; background: var(--p1); color: var(--chalk); }