/* High scores, styled like the cabinet it is pretending to be. */
.lb-wrap{max-width:960px}
.lb-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.4rem}
.lb-tab{
  padding:.45rem .85rem;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink-dim);
  font:700 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  transition:.16s;
}
.lb-tab:hover{color:var(--ink);border-color:var(--accent)}
.lb-tab.on{
  color:#fff;border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 22%,var(--panel));
  box-shadow:0 0 18px -6px var(--accent);
}
.pcard-lb{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.4rem;box-shadow:var(--shadow);
}
.lb-head{
  font:800 13px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-mute);margin:0 0 1.1rem;
}
.lb{width:100%;border-collapse:collapse;font-family:var(--mono)}
.lb th{
  text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line);
  font:700 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);
}
.lb td{padding:.62rem .6rem;border-bottom:1px solid var(--line-soft);font-size:14px}
.lb tr:last-child td{border-bottom:0}
.lb-pos{width:2.5rem;color:var(--ink-mute);font-weight:700}
.lb-name{font-weight:800;letter-spacing:.22em;color:var(--ink)}
.lb-game a{color:var(--ink-dim);font-size:12px}
.lb-game a:hover{color:var(--accent)}
.lb-score,th.lb-score{text-align:right;font-weight:800;color:#ffd23b}
.lb-time,.lb-when{color:var(--ink-mute);font-size:12.5px}
/* The top three get the treatment they would get on a real cabinet. */
.lb tr.gold   .lb-name{color:#ffd23b;text-shadow:0 0 18px rgba(255,210,60,.5)}
.lb tr.silver .lb-name{color:#dbe3f5}
.lb tr.bronze .lb-name{color:#d8a06a}
.lb tr.gold   .lb-pos::after{content:" ★";color:#ffd23b}
.lb-note{margin-top:1.2rem;font-size:12.5px;color:var(--ink-mute)}