/* ============================================================
   AU DESIGN — ZEITVERTREIB
   Retro-Arcade auf dem bestehenden AU-Token-System.
   Schrift bleibt Outfit (selbst gehostet), Ziffern laufen in
   System-Monospace — kein zusaetzlicher Webfont.
   ============================================================ */

@font-face { font-family: 'Outfit'; src: url('../assets/fonts/Outfit-Light.woff2')     format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../assets/fonts/Outfit-Regular.woff2')   format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../assets/fonts/Outfit-Medium.woff2')    format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../assets/fonts/Outfit-SemiBold.woff2')  format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../assets/fonts/Outfit-Bold.woff2')      format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../assets/fonts/Outfit-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  /* Marken-Tokens, identisch zur Hauptseite */
  --white:  #f5f5f5;
  --black:  #1e1e1e;
  --green:  #a5ce1f;
  --orange: #e6460b;
  --purple: #5400cc;
  --teal:   #07beaa;
  --yellow: #ffc813;
  --red:    #d93025;

  --ink-rgb:   30,30,30;
  --paper-rgb: 245,245,245;
  --green-rgb: 165,206,31;

  /* Gehaeuse-Toene der Arcade-Seite */
  --shell-0: #121212;   /* Seitengrund   */
  --shell-1: #1c1c1c;   /* Kassette      */
  --shell-2: #262626;   /* Kante / Relief*/
  --shell-3: #2f2f2f;

  --sp-2: .125rem; --sp-4: .25rem;  --sp-6: .375rem; --sp-8: .5rem;
  --sp-12: .75rem; --sp-16: 1rem;   --sp-20: 1.25rem;--sp-24: 1.5rem;
  --sp-32: 2rem;   --sp-40: 2.5rem; --sp-48: 3rem;   --sp-64: 4rem;
  --sp-80: 5rem;   --sp-96: 6rem;

  --fs-10: .625rem;  --fs-11: .6875rem; --fs-12: .75rem; --fs-13: .8125rem;
  --fs-14: .875rem;  --fs-16: 1rem;     --fs-18: 1.125rem; --fs-20: 1.25rem;
  --fs-24: 1.5rem;   --fs-32: 2rem;

  --r-sm: 2px; --r-md: 3px; --r-lg: 16px; --r-pill: 100px;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-inout:  cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

body {
  background: var(--shell-0);
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.arc-head, .arc-shelf, .arc-foot { width: 100%; }
.arc-shelf { flex: 0 0 auto; }
.arc-foot  { flex-shrink: 0; margin-top: auto; }
::selection { background: var(--green); color: var(--black); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Sehr dezente Vignette — gibt dem Grund Tiefe, ohne Effekthascherei */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--paper-rgb),.05), transparent 60%);
}

/* ── KOPF ── */
.arc-head {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-32) var(--sp-24) var(--sp-24);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-24);
}
.arc-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  color: rgba(var(--paper-rgb),.55);
  text-decoration: none;
  font-size: var(--fs-11);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  transition: color .25s var(--ease-soft), gap .25s var(--ease-soft);
}
.arc-back:hover { color: var(--green); gap: var(--sp-12); }
.arc-back svg { width: 14px; height: 14px; }

.arc-title {
  font-size: clamp(2.2rem, 7vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: .95;
  margin-bottom: var(--sp-8);
}
.arc-sub {
  font-size: var(--fs-14);
  color: rgba(var(--paper-rgb),.45);
  max-width: 46ch;
  line-height: 1.55;
}
.arc-coin {
  font-family: var(--mono);
  font-size: var(--fs-10);
  letter-spacing: .22em;
  color: var(--green);
  margin-top: var(--sp-16);
  animation: coin-blink 2.4s steps(1) infinite;
}
@keyframes coin-blink { 0%,64% { opacity: 1 } 65%,100% { opacity: .15 } }

/* ── SPIELER ── */
.arc-player {
  flex-shrink: 0;
  text-align: right;
}
.arc-player__label {
  display: block;
  font-size: var(--fs-10);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(var(--paper-rgb),.4);
  margin-bottom: var(--sp-8);
}
.arc-player__field {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  background: var(--shell-1);
  border: 1px solid rgba(var(--paper-rgb),.1);
  border-radius: var(--r-md);
  padding: var(--sp-8) var(--sp-12);
}
.arc-player__field:focus-within { border-color: var(--green); }
.arc-player__field input {
  background: none;
  border: none;
  color: var(--green);
  font-family: var(--mono);
  font-size: var(--fs-14);
  letter-spacing: .16em;
  text-transform: uppercase;
  width: 11ch;
  outline: none;
}
.arc-player__field input::placeholder { color: rgba(var(--paper-rgb),.25); letter-spacing: .16em; }

/* ── KASSETTEN-REGAL ── */
.arc-shelf {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-24) var(--sp-24) var(--sp-32);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 208px));
  justify-content: start;
  gap: var(--sp-32) var(--sp-24);
  perspective: 1400px;
  align-content: start;
}

/* Die Kassette — Gehaeuse, Etikett, Daumenkerbe, Kontakte */
.cart {
  --cart-c: var(--green);
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(168deg, var(--shell-2) 0%, var(--shell-1) 46%, #171717 100%);
  border: none;
  border-radius: var(--r-sm) var(--r-sm) 5px 5px;
  padding: var(--sp-20) var(--sp-16) var(--sp-40);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  box-shadow:
    0 10px 26px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(var(--paper-rgb),.07),
    inset 0 -1px 0 rgba(0,0,0,.5);
  transform-style: preserve-3d;
  transition:
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease-out);
  overflow: hidden;
}

/* Daumenkerbe oben */
.cart::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 46px; height: 9px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.55);
  border-radius: 0 0 7px 7px;
  box-shadow: inset 0 -1px 0 rgba(var(--paper-rgb),.06);
}

/* Kontaktleiste unten */
.cart::after {
  content: '';
  position: absolute;
  bottom: 7px; left: var(--sp-16); right: var(--sp-16);
  height: 15px;
  border-radius: 1px;
  background:
    repeating-linear-gradient(90deg,
      #b98b21 0 5px,
      transparent 5px 9px);
  opacity: .5;
}

.cart:hover {
  transform: translateY(-10px) rotateX(7deg);
  box-shadow:
    0 22px 44px rgba(0,0,0,.6),
    0 0 0 1px rgba(var(--paper-rgb),.06),
    inset 0 1px 0 rgba(var(--paper-rgb),.1);
}
.cart:focus-visible {
  outline: 2px solid var(--cart-c);
  outline-offset: 3px;
}

/* Etikett */
.cart__label {
  background: var(--cart-c);
  color: var(--black);
  border-radius: 1px;
  padding: var(--sp-12) var(--sp-12) var(--sp-16);
  margin-bottom: var(--sp-16);
  min-height: 158px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.cart--ink .cart__label { color: var(--white); }

.cart__art {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: var(--sp-12);
  filter: saturate(.85);
}
.cart__name {
  font-size: var(--fs-18);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.05;
}
.cart__genre {
  font-size: var(--fs-10);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .62;
  margin-top: var(--sp-4);
}

.cart__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-8);
  font-family: var(--mono);
  font-size: var(--fs-10);
  letter-spacing: .1em;
  color: rgba(var(--paper-rgb),.4);
  text-transform: uppercase;
}
.cart__hi { color: rgba(var(--paper-rgb),.72); }

.cart__play {
  margin-top: var(--sp-12);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cart-c);
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.cart__play::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--cart-c), transparent);
  opacity: .45;
  transition: opacity .35s var(--ease-soft);
}
.cart:hover .cart__play::after { opacity: 1; }

/* ── KONSOLE / CRT-MODAL ── */
.crt {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24);
  background: rgba(8,8,8,.93);
  backdrop-filter: blur(6px);
}
.crt.open { display: flex; animation: crt-in .4s var(--ease-out); }
@keyframes crt-in { from { opacity: 0 } to { opacity: 1 } }

.crt__frame {
  position: relative;
  width: min(100%, 780px);
  max-height: calc(100vh - var(--sp-48));
  max-height: calc(100dvh - var(--sp-48));
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(180deg, var(--shell-2), var(--shell-1));
  border-radius: var(--r-lg);
  padding: var(--sp-16);
  box-shadow:
    0 30px 80px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(var(--paper-rgb),.08);
}

.crt__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: 0 var(--sp-4) var(--sp-12);
}
.crt__title {
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--paper-rgb),.6);
  margin-right: auto;
}
.crt__btn {
  background: var(--shell-3);
  border: 1px solid rgba(var(--paper-rgb),.08);
  color: rgba(var(--paper-rgb),.7);
  border-radius: var(--r-md);
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: var(--fs-12);
  font-family: inherit;
  transition: background .2s, color .2s, border-color .2s;
}
.crt__btn:hover { background: var(--green); color: var(--black); border-color: var(--green); }
.crt__btn[aria-pressed="false"] { opacity: .45; }
.crt__btn svg { width: 15px; height: 15px; }

/* Der eigentliche Bildschirm */
.crt__screen {
  position: relative;
  background: #0d0d0d;
  border-radius: var(--r-md);
  padding: var(--sp-24) var(--sp-16);
  min-height: 240px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 60px rgba(0,0,0,.9), inset 0 0 0 1px rgba(var(--paper-rgb),.05);
}
/* Scanlines — bewusst schwach, sonst frisst es die Lesbarkeit */
.crt__screen::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: var(--r-md);
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.16) 0 1px,
    transparent 1px 3px);
  opacity: .5;
  z-index: 5;
}
body.crt-boost .crt__screen::after { opacity: 1; }
body.crt-boost .crt__screen { box-shadow: inset 0 0 90px rgba(var(--green-rgb),.16), inset 0 0 0 1px rgba(var(--green-rgb),.25); }

.crt__hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-12) var(--sp-4) 0;
  font-family: var(--mono);
  font-size: var(--fs-11);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--paper-rgb),.45);
}
.crt__hud b { color: var(--green); font-weight: 700; }

/* Boot-Zeile */
.crt__boot {
  font-family: var(--mono);
  font-size: var(--fs-11);
  letter-spacing: .1em;
  color: var(--green);
  text-align: center;
}
.crt__boot span { opacity: .55 }

/* ── VIRTUELLER CONTROLLER ── */
.pad {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-48);
  padding: var(--sp-20) 0 var(--sp-4);
}
.pad.on { display: flex; }

.pad__stick {
  position: relative;
  width: 108px; height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--shell-3), #141414 70%);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 3px 10px rgba(0,0,0,.5);
  display: grid;
  place-items: center;
}
.pad__knob {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #4a4a4a, #1a1a1a 72%);
  box-shadow: 0 4px 10px rgba(0,0,0,.65), inset 0 1px 0 rgba(var(--paper-rgb),.14);
  transition: translate .16s var(--ease-spring);
  will-change: translate;
}
.pad__ring {
  position: absolute; inset: 12px;
  border-radius: 50%;
  border: 1px dashed rgba(var(--paper-rgb),.08);
}

.pad__buttons { display: flex; gap: var(--sp-16); }
.pad__btn {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-10);
  font-weight: 800;
  letter-spacing: .1em;
  color: rgba(0,0,0,.62);
  background: radial-gradient(circle at 40% 32%, var(--red), #8e1d16 76%);
  box-shadow: 0 5px 0 #6d160f, 0 8px 16px rgba(0,0,0,.5);
  transition: transform .09s ease, box-shadow .09s ease;
  -webkit-tap-highlight-color: transparent;
}
.pad__btn--b { background: radial-gradient(circle at 40% 32%, var(--yellow), #c69100 76%); box-shadow: 0 5px 0 #9a7100, 0 8px 16px rgba(0,0,0,.5); }
.pad__btn.down, .pad__btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #6d160f, 0 3px 8px rgba(0,0,0,.5);
}
.pad__btn--b.down, .pad__btn--b:active { box-shadow: 0 1px 0 #9a7100, 0 3px 8px rgba(0,0,0,.5); }

.pad__hint {
  text-align: center;
  font-family: var(--mono);
  font-size: var(--fs-10);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--paper-rgb),.3);
  padding-top: var(--sp-8);
}

/* ── BESTENLISTE ── */
.board { padding: var(--sp-16) var(--sp-4) var(--sp-4); }
.board__head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: var(--fs-10);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--paper-rgb),.35);
  border-bottom: 1px solid rgba(var(--paper-rgb),.08);
  padding-bottom: var(--sp-8);
  margin-bottom: var(--sp-8);
}
.board__row {
  display: grid;
  grid-template-columns: 2.2ch 1fr auto;
  gap: var(--sp-12);
  font-family: var(--mono);
  font-size: var(--fs-12);
  padding: var(--sp-4) 0;
  color: rgba(var(--paper-rgb),.62);
}
.board__row--me { color: var(--green); }
.board__row span:last-child { text-align: right; }
.board__empty, .board__note {
  font-family: var(--mono);
  font-size: var(--fs-10);
  letter-spacing: .1em;
  color: rgba(var(--paper-rgb),.28);
  padding: var(--sp-8) 0;
}

/* ── FUSSZEILE ── */
.arc-foot {
  position: relative; z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-24);
  border-top: 1px solid rgba(var(--paper-rgb),.07);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-16);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-12);
  color: rgba(var(--paper-rgb),.35);
}
.arc-foot a { color: rgba(var(--paper-rgb),.55); text-decoration: none; }
.arc-foot a:hover { color: var(--green); }
.arc-foot__links { display: flex; gap: var(--sp-16); }

/* ── RESPONSIV ── */
@media (max-width: 767px) {
  .arc-head { flex-direction: column; padding-top: var(--sp-24); }
  .arc-player { text-align: left; }
  .arc-shelf { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-20) var(--sp-16); padding-bottom: var(--sp-64); }
  .cart { padding: var(--sp-16) var(--sp-12) var(--sp-32); }
  .cart__label { min-height: 138px; }
  .cart:hover { transform: none; }          /* kein Kippen ohne echten Hover */
  .crt { padding: var(--sp-8); }
  .crt__frame { padding: var(--sp-12); border-radius: var(--r-md); }
  .crt__screen { padding: var(--sp-12) var(--sp-4); }
  .pad { gap: var(--sp-24); }
  .pad__stick { width: 92px; height: 92px; }
  .pad__btn { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .cart, .cart:hover { transition: none; transform: none; }
  .arc-coin { animation: none; }
  .pad__knob { transition: none; }
  .crt.open { animation: none; }
}

/* ── STARTSCHIRM (Name eingeben, dann losspielen) ── */
.start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-32) var(--sp-16);
  text-align: center;
}
.start__label {
  font-family: var(--mono);
  font-size: var(--fs-11);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(var(--paper-rgb),.45);
}
.start__field {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  border-bottom: 2px solid rgba(var(--green-rgb),.35);
  padding: var(--sp-6) var(--sp-4);
  transition: border-color .25s var(--ease-soft);
}
.start__field:focus-within { border-bottom-color: var(--green); }
.start__field span { color: rgba(var(--green-rgb),.6); font-family: var(--mono); }
.start__field input {
  background: none;
  border: none;
  outline: none;
  color: var(--green);
  font-family: var(--mono);
  font-size: var(--fs-24);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  width: 12ch;
  caret-color: var(--green);
}
.start__field input::placeholder { color: rgba(var(--paper-rgb),.2); }

.start__go {
  margin-top: var(--sp-8);
  background: var(--green);
  color: var(--black);
  border: none;
  border-radius: var(--r-sm);
  padding: var(--sp-12) var(--sp-32);
  font-family: inherit;
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 0 #7e9e17;
  transition: transform .1s ease, box-shadow .1s ease, background .2s ease;
}
.start__go:hover  { background: #b6e222; }
.start__go:active { transform: translateY(3px); box-shadow: 0 1px 0 #7e9e17; }
.start__go:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.start__hint {
  font-family: var(--mono);
  font-size: var(--fs-10);
  letter-spacing: .1em;
  color: rgba(var(--paper-rgb),.28);
}
@media (prefers-reduced-motion: reduce) {
  .start__go, .start__go:active { transition: none; transform: none; }
}

/* Magnet-Uebergang der Kassetten (JS schreibt `translate`) */
.cart { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), translate .5s var(--ease-spring); }
@media (hover: none), (pointer: coarse) { .cart { translate: none !important; } }
@media (prefers-reduced-motion: reduce)  { .cart { translate: none !important; } }

/* ── BESTENLISTE AUF DER UEBERSICHT ─────────────────────────
   Bisher stand die Serverliste nur in der geoeffneten Konsole.
   Wer nicht spielte, sah nie die Punkte der anderen. */
.arc-boards-wrap {
  position: relative;
  z-index: 1;
  /* Flex-Item: ohne width:100% schrumpft es durch margin-inline:auto
     auf Inhaltsbreite und sitzt dann nicht auf der Regalkante. */
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding: 0 var(--sp-24) var(--sp-48);
}
.arc-boards__title {
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: var(--sp-32) 0 var(--sp-4);
}
.arc-boards__sub {
  margin: 0 0 var(--sp-20);
  max-width: 52ch;
  color: rgba(var(--paper-rgb), .55);
  font-size: var(--fs-14);
}
.arc-boards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-16);
}
.hs {
  background: rgba(var(--paper-rgb), .04);
  border: 1px solid rgba(var(--paper-rgb), .10);
  border-top: 3px solid var(--cart-c, var(--green));
  border-radius: var(--r-md);
  padding: var(--sp-16);
}
.hs__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-12);
  margin: 0 0 var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(var(--paper-rgb), .10);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hs__unit {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(var(--paper-rgb), .45);
}
.hs__row {
  display: grid;
  grid-template-columns: 2.4ch 1fr auto;
  gap: var(--sp-8);
  padding: var(--sp-6) 0;
  font-family: var(--mono);
  font-size: .78rem;
  color: rgba(var(--paper-rgb), .72);
  font-variant-numeric: tabular-nums;
}
.hs__row + .hs__row { border-top: 1px solid rgba(var(--paper-rgb), .06); }
.hs__row span:last-child { text-align: right; color: var(--white); }
.hs__row--me { color: var(--green); }
.hs__row--me span:last-child { color: var(--green); }
.hs__empty {
  margin: 0;
  font-family: var(--mono);
  font-size: .72rem;
  color: rgba(var(--paper-rgb), .38);
}
@media (max-width: 767px) {
  .arc-boards-wrap { padding: 0 var(--sp-20) var(--sp-32); }
  .arc-boards { grid-template-columns: 1fr; gap: var(--sp-12); }
}