/* Quail Cup: the shared look (../_shared/party.css) plus the scoreboard. */

.hud { display: grid; grid-template-columns: 1fr auto 1fr; padding: 8px 18px 16px; }

.side { display: flex; align-items: center; gap: 9px; min-width: 0; }
.side.p2 { justify-content: flex-end; }
.name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }
.p1 .name { color: var(--p1); text-shadow: 0 0 18px rgba(63, 142, 247, .45); }
.p2 .name { color: var(--p2); text-shadow: 0 0 18px rgba(255, 171, 61, .45); }
.tag {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--sub);
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
}

.score { position: relative; display: flex; align-items: center; gap: 8px; font-family: var(--display); }
.score b {
  min-width: 52px;
  padding: 4px 10px 2px;
  border-radius: 12px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 20px -10px #000;
}
#s1 { background: linear-gradient(180deg, #4f9bff, #1d5fc0); }
#s2 { background: linear-gradient(180deg, #ffb550, #c9761c); }
.sep { color: var(--dim); font-size: 1.3rem; font-weight: 600; }
.clock {
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  padding: 1px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid var(--border-strong);
  font-size: .74rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .hud { padding: 8px 10px 16px; gap: 8px; }
  .tag { display: none; }
  .name { font-size: .9rem; }
  .score b { font-size: 1.5rem; min-width: 38px; }
}