:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #f8f9ff;
  background: #f5f6f9;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
.dashboard {
  min-height: calc(100vh - 12px);
  margin: 6px 4px;
  padding: 14px 37px 38px;
  border-radius: 25px;
  background: #111320;
  border: 1px solid #242638;
}
/* Login page: same palette as the dashboard, one centered card. */
:root:has(.login) { background: #111320; }   /* no light edge on overscroll */
.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: #111320;
  color-scheme: dark;
}
.card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 34px 32px 32px;
  border-radius: 15px;
  background: #141724;
  border: 1px solid #303345;
  border-top: 5px solid #2867f7;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.card h1 { margin: 0; font-size: 25px; line-height: 1.2; font-weight: 800; letter-spacing: -.03em; }
.card .login-subtitle { margin: -12px 0 4px; color: #9da7c2; font-size: 14px; }
/* The server puts its error message in a plain <p>. */
.card > p:not(.login-subtitle) {
  margin: 0;
  padding: 10px 12px;
  background: #3a202b;
  color: #ffb9c0;
  border: 1px solid #87414f;
  border-radius: 7px;
  font-size: 14px;
}
.card label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #aab4d0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.card input {
  height: 44px;
  padding: 0 12px;
  background: #191d2c;
  color: #e7ebfa;
  border: 1px solid #32364a;
  border-radius: 7px;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color .2s, box-shadow .2s;
}
.card input:hover { border-color: #48516b; }
.card input:focus { outline: none; border-color: #2867f7; box-shadow: 0 0 0 3px rgba(40, 103, 247, .3); }
/* Keep Chrome's password autofill from turning the field pale. */
.card input:-webkit-autofill {
  -webkit-text-fill-color: #e7ebfa;
  box-shadow: 0 0 0 44px #191d2c inset;
  caret-color: #e7ebfa;
}
.card input:-webkit-autofill:focus { box-shadow: 0 0 0 44px #191d2c inset, 0 0 0 3px rgba(40, 103, 247, .3); }
.card button {
  height: 44px;
  margin-top: 6px;
  background: #2867f7;
  color: #fff;
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}
.card button:hover { background: #1f57d6; }
.card button:active { background: #1a49b3; }
.card button:focus-visible { outline: 2px solid #9db9ff; outline-offset: 2px; }
.toolbar {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  color: #9da7c2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
}

.logout-form { margin: 0; display: flex; align-items: center; }
.logout-btn {
  height: 23px;
  padding: 0 12px;
  background: #3a202b;
  color: #ffb9c0;
  border: 1px solid #87414f;
  border-radius: 5px;
  font: inherit;
  font-weight: 700;
  letter-spacing: .07em;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.logout-btn:hover { background: #5c2a37; border-color: #c65c6c; }
.logout-btn:focus-visible { outline: 2px solid #ffb9c0; outline-offset: 2px; }
.logout-btn:active { background: #743342; }

.toolbar select {
  min-width: 210px;
  max-width: 340px;
  height: 23px;
  background: #191d2c;
  border: 1px solid #32364a;
  color: #e7ebfa;
  border-radius: 5px;
  font: inherit;
  letter-spacing: 0;
  padding: 2px 8px;
}
.connection-dot { width: 7px; height: 7px; border-radius: 50%; background: #f37b82; }
.connection-dot.online { background: #58c79b; }
.connection-text { min-width: 78px; font-size: 10px; letter-spacing: 0; }
.scorebar {
  height: 135px;
  display: grid;
  grid-template-columns: 45.2% 27.4% 27.4%;
  border: 1px solid #303345;
  border-radius: 17px;
  overflow: hidden;
  background: #141724;
}
.scoreboard { padding: 20px 26px 18px; min-width: 0; }
.scorebar h2 {
  color: #aab4d0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  margin: 0;
}
.score-grid {
  display: grid;
  grid-template-columns: minmax(135px, 1fr) repeat(3, 75px) 54px;
  grid-template-rows: 36px 36px;
  align-items: center;
  margin-top: 9px;
  column-gap: 2px;
  font-size: 13px;
  font-weight: 800;
}
.score-player { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-cell { text-align: center; }
.score-points {
  justify-self: center;
  width: 48px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #343b52;
  border: 1px solid #48516b;
  font-size: 14px;
}
.clock-block {
  border-left: 1px solid #303345;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 17px;
}
.clock-block strong { font-size: 31px; letter-spacing: -.03em; font-weight: 800; font-variant-numeric: tabular-nums; }
.outputs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.output-card {
  background: #fff;
  color: #111624;
  min-width: 0;
  height: 417px;
  border-radius: 15px;
  padding: 53px 46px 40px;
  border: 1px solid #dce0ea;
  border-top: 7px solid #2867f7;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.output-card.l1 { border-top-color: #f17a85; }
.output-card h2 { font-size: 25px; margin: 0 0 19px; line-height: 1.2; font-weight: 800; letter-spacing: -.03em; }
.output-row {
  height: 79px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 17px;
  border: 1px solid #e5e7f0;
  background: #f5f5f9;
  border-radius: 11px;
  font-size: 17px;
  font-weight: 800;
}
.output-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.output-row strong { font-size: 17px; font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.output-row .serve {
  flex: none;            /* never squeezed or cut off */
  color: #5b6478;        /* slightly muted so the time stays the main value */
  font-weight: 700;
}
/* Row that currently shows "winner": stays green with white text until the value changes. */
.output-row.is-winner {
  background: #1f9d55;
  border-color: #1f9d55;
  color: #fff;
}



@media (max-width: 1050px) {
  .dashboard { padding: 14px 22px 28px; }
  .scorebar { grid-template-columns: 50% 25% 25%; }
  .scoreboard { padding-left: 17px; padding-right: 12px; }
  .score-grid { grid-template-columns: minmax(100px,1fr) repeat(3, 35px) 45px; }
  .clock-block strong { font-size: 24px; }
  .output-card { padding: 43px 25px; }
  .output-row { font-size: 14px; }
  .output-row strong { font-size: 14px; }
}
@media (max-width: 690px) {
  .dashboard { margin: 0; border-radius: 0; padding: 12px; }
  .toolbar { justify-content: flex-start; flex-wrap: wrap; height: auto; min-height: 35px; margin-bottom: 8px; }
  .toolbar select { flex: 1; min-width: 130px; }
  .scorebar { height: auto; grid-template-columns: 1fr 1fr; }
  .scoreboard { grid-column: 1 / -1; padding: 16px; }
  .clock-block { border-top: 1px solid #303345; padding: 18px 0; }
  .clock-block:nth-child(2) { border-left: 0; }
  .clock-block strong { font-size: 24px; }
  .outputs { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
  .output-card { height: auto; padding: 26px 20px 20px; }
  .output-card h2 { font-size: 22px; }
  .output-row { height: 68px; }
}

/* Brief red highlight when a live value changes. */
@keyframes data-arrived {
  0% { background-color: rgba(255, 80, 90, .48); box-shadow: 0 0 0 3px rgba(255, 80, 90, .20); }
  35% { background-color: rgba(255, 80, 90, .26); box-shadow: 0 0 0 2px rgba(255, 80, 90, .10); }
  100% { background-color: transparent; box-shadow: none; }
}
.output-row.data-flash {
  animation: data-arrived 1.15s ease-out;
}
.score-cell.data-flash, .score-points.data-flash {
  border-radius: 6px;
  animation: data-arrived 1.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .data-flash { animation: none !important; }
}