/* ---------------- top bar ---------------- */
#hud{flex:none;display:flex;align-items:stretch;gap:6px;padding:6px 8px 4px}
.card{flex:1 1 0;min-width:0;background:var(--panel);border:1px solid var(--edge);
      border-radius:3px;padding:4px 8px 5px;backdrop-filter:blur(6px);
      box-shadow:0 6px 20px rgba(0,0,0,.4)}
.card.p1{border-left:3px solid var(--p1)}
.card.p2{border-right:3px solid var(--p2);text-align:right}
.rowa{display:flex;align-items:baseline;gap:7px}
.card.p2 .rowa{flex-direction:row-reverse}
.who{font-family:'Bungee',cursive;font-size:10px;letter-spacing:.05em;flex:none}
.p1 .who{color:var(--p1)} .p2 .who{color:var(--p2)}
.score{flex:1 1 auto;min-width:0;font-size:22px;font-weight:700;line-height:1;
       font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-align:right}
.card.p2 .score{text-align:left}
.rowb{font-size:11.5px;color:var(--dim);margin-top:2px;letter-spacing:.02em;white-space:nowrap}
.rowb b{color:var(--ink);font-weight:600}
.card.p2 .rowb{display:flex;align-items:center;justify-content:flex-end;gap:7px}

.balls{display:inline-flex;gap:4px}
.balls span{width:8px;height:8px;border-radius:50%;background:var(--p2);box-shadow:0 0 7px var(--p2)}
.balls span.gone{background:transparent;box-shadow:none;border:1px solid rgba(50,227,255,.35)}
#mode{pointer-events:auto;cursor:pointer;color:var(--dim);border-bottom:1px dotted rgba(139,160,201,.5)}
#mode b{color:var(--p2);font-weight:600}

#nextwrap{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
#next{display:grid;grid-template-columns:repeat(4,6px);grid-template-rows:repeat(4,6px);gap:1px}
#next i{border-radius:1px;background:transparent}
.nlab{font-size:9px;letter-spacing:.11em;color:var(--dim)}

@media (orientation:landscape) and (max-height:560px){
  .score{font-size:18px}
  #hud{padding:4px 8px 2px}
  .rowb{font-size:11px}
}