@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --background-base: #121212;
  --background-elevated: #181818;
  --background-highlight: #1f1f1f;
  --background-press: #282828;
  --card: #252525;
  --text-base: #ffffff;
  --text-subdued: #b3b3b3;
  --text-bright: #fdfdfd;
  --accent: #bd0c09;
  --accent-pressed: #970906;
  --negative: #f3727f;
  --team-red: #f3727f;
  --team-red-tint: #351d24;
  --team-red-text: #ffdce1;
  --team-blue: #539df5;
  --team-blue-tint: #172b49;
  --team-blue-text: #dceaff;
  --warning: #ffa42b;
  --outline: #7c7c7c;
  --border: #4d4d4d;
  --shadow-card: rgba(0, 0, 0, .3) 0 8px 8px;
  --shadow-float: rgba(0, 0, 0, .5) 0 8px 24px;
  --font-ui: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-title: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-family: var(--font-ui);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: #000;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text-base);
  background: radial-gradient(ellipse 70% 38% at 50% -10%, #303030 0%, transparent 68%), var(--background-base);
}

button,
input {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--text-base);
  outline-offset: 3px;
}

.app-shell {
  width: min(1440px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 8px 0 56px;
}

.auth-locked {
  display: none !important;
}

.court-access[hidden] {
  display: none !important;
}

.court-access {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.court-access-card {
  display: grid;
  gap: 16px;
  width: min(440px, 100%);
  padding: 28px;
  border-radius: 8px;
  background: var(--background-elevated);
  box-shadow: var(--shadow-card);
}

.court-access-card h2 {
  color: var(--text-bright);
  font-family: var(--font-title);
}

.court-access-card .notice {
  margin: 0;
}

.court-access-card .button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.court-access-form {
  display: grid;
  gap: 10px;
}

.court-access-form label {
  font-weight: 700;
}

.court-access-form input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--background-base);
  color: var(--text-base);
  font: inherit;
}

.court-access-form button {
  cursor: pointer;
}

.game-page {
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
  overflow: hidden;
}

.topbar,
.start-row,
.fetch-form,
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar {
  min-height: 72px;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 14px 20px;
  border-radius: 8px;
  background: #000;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  flex: none;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--text-subdued);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

.topbar h1,
h2 {
  margin: 0;
}

.topbar h1 {
  color: var(--text-bright);
  font-family: var(--font-title);
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 700;
  letter-spacing: -.02em;
}

.topbar-actions {
  justify-content: flex-end;
}

.connection {
  max-width: 240px;
  padding: 7px 12px;
  border-radius: 9999px;
  color: var(--text-subdued);
  background: var(--background-highlight);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.connection.pending {
  color: var(--warning);
}

.connection.connected {
  color: #ff918e;
}

.nav-link,
.empty-match-link {
  padding: 8px 16px;
  border-radius: 9999px;
  color: var(--text-base);
  background: var(--background-highlight);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .16s ease, transform .16s ease;
}

.nav-link:hover,
.empty-match-link:hover {
  background: var(--background-press);
  transform: scale(1.03);
}

.match-detail-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #6f2524;
  border-radius: 999px;
  color: #ffd9d8;
  background: #2e1718;
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  transition: transform .16s ease, background-color .16s ease;
}

.match-detail-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.match-detail-button:hover:not(:disabled) {
  background: #482021;
  transform: scale(1.04);
}

.match-detail-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.setup-card,
.simulation {
  padding: clamp(20px, 3.2vw, 32px);
  border-radius: 8px;
  background: linear-gradient(135deg, #1c1c1c, var(--background-elevated) 42%);
  box-shadow: var(--shadow-card);
}

.setup-card {
  margin-bottom: 16px;
}

.section-heading {
  margin-bottom: 24px;
}

.section-heading h2,
.simulation h2 {
  color: var(--text-bright);
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.section-copy {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--text-subdued);
  font-size: 14px;
  line-height: 1.45;
}

label {
  display: grid;
  gap: 8px;
  color: var(--text-subdued);
  font-size: 12px;
  font-weight: 700;
}

input {
  width: 100%;
  min-width: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 500px;
  color: var(--text-base);
  background: var(--background-highlight);
  box-shadow: rgb(18, 18, 18) 0 1px 0, rgb(124, 124, 124) 0 0 0 1px inset;
  font-size: 14px;
  transition: box-shadow .15s ease, background-color .15s ease;
}

input:hover {
  background: #292929;
}

input:focus {
  outline: 1px solid var(--text-base);
  outline-offset: 2px;
  box-shadow: rgb(18, 18, 18) 0 1px 0, var(--text-base) 0 0 0 1px inset;
}

.fetch-form {
  align-items: end;
}

.fetch-form label {
  flex: 1;
}

.source-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 620px;
}

.source-button {
  min-height: 88px;
  font-size: 14px;
}

.back-to-source {
  margin-top: 20px;
  padding-inline: 0;
}

.button {
  min-height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 500px;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: transform .16s ease, background-color .16s ease;
}

.button:hover:not(:disabled) {
  background: #d01814;
  transform: scale(1.04);
}

.button:active:not(:disabled) {
  background: var(--accent-pressed);
  transform: scale(.98);
}

.button:disabled {
  cursor: not-allowed;
  opacity: .38;
}

.secondary {
  color: var(--text-base);
  background: var(--background-highlight);
}

.secondary:hover:not(:disabled) {
  background: var(--background-press);
}

.text-button {
  padding: 8px 16px;
  border: 0;
  border-radius: 9999px;
  color: var(--text-subdued);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.player-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  min-height: 48px;
  margin: 24px 0;
  color: var(--text-subdued);
}

.player-list>p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 0;
  font-size: 14px;
}

.player-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 48px;
  padding: 7px 12px 7px 8px;
  border-radius: 6px;
  color: var(--text-base);
  background: var(--background-highlight);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}

.player-option:hover {
  background: var(--background-press);
  transform: translateY(-1px);
}

.player-option:has(input:checked) {
  background: #3a2020;
  box-shadow: var(--accent) 0 0 0 1px inset;
}

.player-option input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  border-radius: 50%;
  appearance: none;
  background: #000;
  box-shadow: var(--outline) 0 0 0 1px inset;
}

.player-option input:checked {
  border: 4px solid var(--accent);
  background: #000;
  box-shadow: none;
}

.player-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card);
}

.player-option span:not(.brand-mark) {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-link {
  margin-left: auto;
  color: var(--text-subdued);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.profile-link:hover {
  color: var(--text-base);
}

.start-row {
  justify-content: space-between;
  align-items: end;
  padding-top: 20px;
  border-top: 1px solid #333;
}

.start-row label {
  width: 154px;
}

.match-state-panel {
  height: 160px;
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.notice {
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  overflow: hidden;
  color: var(--text-subdued);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice.error {
  color: var(--negative);
}

.scoreboard {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 152px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "red versus blue" "red-control undo-control blue-control";
  gap: 8px;
  align-items: stretch;
}

#red-team-card {
  grid-area: red;
}

#blue-team-card {
  grid-area: blue;
}

.team-card {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4vw, 44px) 24px 28px;
  border-radius: 8px;
  text-align: center;
  background: linear-gradient(145deg, #292929, var(--background-elevated) 64%);
  box-shadow: var(--shadow-card);
}

.team-card.red {
  background: linear-gradient(145deg, var(--team-red-tint), var(--background-elevated) 64%);
  box-shadow: inset 0 3px 0 var(--team-red), var(--shadow-card);
}

.team-card.blue {
  background: linear-gradient(145deg, var(--team-blue-tint), var(--background-elevated) 64%);
  box-shadow: inset 0 3px 0 var(--team-blue), var(--shadow-card);
}

.team-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  gap: 10px;
}

.team-label {
  margin: 0;
  color: var(--text-subdued);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
}

.team-card.red .team-label {
  color: var(--team-red);
}

.team-card.blue .team-label {
  color: var(--team-blue);
}

.serve-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 5px 8px;
  border-radius: 999px;
  color: #090909;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1;
}

.team-card.red .serve-indicator {
  background: var(--team-red);
}

.team-card.blue .serve-indicator {
  background: var(--team-blue);
}

.serve-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: serve-pulse 1.1s ease-in-out infinite;
}

.team-profiles {
  display: flex;
  justify-content: center;
  gap: 16px;
  min-height: 76px;
  margin: 20px 0 12px;
  color: var(--text-subdued);
}

.team-profile {
  display: grid;
  max-width: 102px;
  justify-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  color: var(--text-base);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
}

.team-profile img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card);
  box-shadow: var(--outline) 0 0 0 1px;
  transition: transform .16s ease, box-shadow .16s ease;
}

.team-profile:hover img {
  box-shadow: var(--accent) 0 0 0 2px;
  transform: scale(1.06);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .68);
}

.modal-card {
  width: min(480px, 100%);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1c1c1c, var(--background-elevated) 42%);
  box-shadow: var(--shadow-float);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.modal-header h2 {
  color: var(--text-bright);
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
}

.modal-card .player-list {
  margin: 12px 0 0;
}

.modal-card .player-option {
  width: 100%;
  border: 0;
  background: var(--background-highlight);
  text-align: left;
}

.modal-message {
  margin: 16px 0 22px;
  color: var(--text-subdued);
  font-size: 14px;
  line-height: 1.5;
}

.info-modal-card .button {
  width: 100%;
}

.match-detail-modal-card {
  width: min(560px, 100%);
}

.match-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.match-detail-meta>div {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 7px;
  background: #211a1a;
  box-shadow: inset 0 0 0 1px #3b2b2b;
}

.match-detail-meta span {
  display: block;
  margin-bottom: 4px;
  color: #cb9290;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.match-detail-meta strong {
  display: block;
  overflow: hidden;
  color: var(--text-bright);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-detail-content {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
}

.match-detail-section {
  padding: 13px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 7px 7px 0;
  background: var(--background-highlight);
}

.match-detail-section h3 {
  margin: 0 0 5px;
  color: #ffb3b0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.match-detail-section p {
  margin: 0;
  color: var(--text-subdued);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.match-detail-rule-list {
  display: grid;
  gap: 7px;
  margin: 0;
}

.match-detail-rule-list>div {
  display: grid;
  grid-template-columns: minmax(115px, .8fr) minmax(0, 1.2fr);
  gap: 12px;
  padding-top: 7px;
  border-top: 1px solid #3b2b2b;
}

.match-detail-rule-list>div:first-child {
  padding-top: 0;
  border-top: 0;
}

.match-detail-rule-list dt {
  color: #cb9290;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.match-detail-rule-list dd {
  margin: 0;
  color: var(--text-bright);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.match-detail-modal-card .button {
  width: 100%;
}

.match-list-modal-card {
  width: min(720px, 100%);
}

.match-list-content {
  display: grid;
  gap: 9px;
  max-height: min(65vh, 620px);
  overflow: auto;
}

.match-list-empty {
  margin: 10px 0;
  color: var(--text-subdued);
  text-align: center;
}

.match-list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  color: var(--text-bright);
  background: var(--background-highlight);
  cursor: pointer;
  text-align: left;
}

.match-list-row:hover {
  border-color: var(--accent);
  background: #2a1a1a;
}

.match-list-status {
  min-width: 74px;
  padding: 5px 7px;
  border-radius: 999px;
  color: #fff;
  background: #665b27;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
}

.match-list-status.live {
  background: #9d3037;
}

.match-list-status.completed {
  background: #456d9d;
}

.match-list-main {
  min-width: 0;
}

.match-list-main strong,
.match-list-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-list-main strong {
  font-size: 13px;
}

.match-list-main span {
  margin-top: 4px;
  color: var(--text-subdued);
  font-size: 10px;
}

.match-list-score {
  color: var(--accent);
  font-family: var(--font-title);
  font-size: 15px;
  text-align: right;
}

.match-selection-content {
  margin: 12px 0 20px;
  color: var(--text-subdued);
  font-size: 14px;
  line-height: 1.55;
}

.match-selection-content strong {
  color: var(--text-bright);
}

.modal-actions {
  display: flex;
  gap: 10px;
}

.modal-actions .button {
  flex: 1;
}

.point {
  margin: auto 0 12px;
  color: var(--text-bright);
  font-family: var(--font-title);
  font-size: clamp(112px, 17vw, 220px);
  font-weight: 700;
  letter-spacing: -.08em;
  line-height: .8;
  will-change: transform, filter;
}

.team-card.red .point {
  color: var(--team-red-text);
}

.team-card.blue .point {
  color: var(--team-blue-text);
}

.game-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  color: var(--text-subdued);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

.game-row strong {
  color: var(--accent);
  font-family: var(--font-title);
  font-size: 28px;
  letter-spacing: 0;
}

.team-card.red .game-row strong {
  color: var(--team-red);
}

.team-card.blue .game-row strong {
  color: var(--team-blue);
}

.scoreboard.americano .point::before {
  content: 'POIN';
  display: block;
  margin-bottom: 10px;
  color: var(--text-subdued);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

.versus {
  grid-area: versus;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 20px 8px;
  border-radius: 8px;
  background: #000;
  text-align: center;
}

.versus strong {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-family: var(--font-title);
  font-size: 17px;
  letter-spacing: 0;
}

.set-score {
  margin: 0;
  color: var(--text-bright);
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}

.set-indicator {
  margin: 0;
  color: var(--text-subdued);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.match-timer {
  margin: -3px 0 0;
  color: var(--accent);
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  line-height: 1;
}

.winner-banner {
  width: 100%;
  margin: 0;
  padding: 17px;
  border-radius: 8px;
  color: #fff;
  background: var(--accent);
  box-shadow: var(--shadow-float);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
}

.winner-banner.winner-red {
  background: var(--accent);
}

.winner-banner.winner-blue {
  background: var(--team-blue);
}

.winner-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0;
}

.next-match,
.restart-match {
  min-width: min(300px, 100%);
  min-height: 58px;
  font-size: 15px;
}

.restart-match {
  border-color: #715d18;
  color: var(--warning);
  background: #2c2416;
}

.serving-picker {
  height: 100px;
  flex: none;
  margin: 0;
  padding: 12px 17px;
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.serving-picker p {
  margin: 0 0 12px;
  color: var(--text-subdued);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.serving-picker-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.team-button.red {
  color: var(--team-red-text);
  background: var(--team-red-tint);
  box-shadow: inset 0 0 0 1px var(--team-red);
}

.team-button.blue {
  color: var(--team-blue-text);
  background: var(--team-blue-tint);
  box-shadow: inset 0 0 0 1px var(--team-blue);
}

.team-button.red:hover:not(:disabled),
.team-button.blue:hover:not(:disabled) {
  transform: scale(1.04);
}

.hidden {
  display: none;
}

/* Small, low-emphasis per-team control that ends a match early (walkover/
   forfeit/retired). Lives in the fixed-height team-heading row (with the
   RED/BLUE label) rather than the flex-stretched score area below it, so it
   can never overlap the +1/Undo controls that sit in the scoreboard's
   second grid row. Deliberately understated — outline only, no fill — so
   it never competes with the score for attention (see DESIGN.md §7). */
.end-match-button {
  flex: none;
  min-height: 22px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid var(--outline);
  border-radius: 999px;
  color: var(--text-subdued);
  background: transparent;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: border-color .16s ease, color .16s ease;
}

.team-card.red .end-match-button:hover:not(:disabled) {
  border-color: var(--team-red);
  color: var(--team-red-text);
}

.team-card.blue .end-match-button:hover:not(:disabled) {
  border-color: var(--team-blue);
  color: var(--team-blue-text);
}

.end-match-button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.end-match-modal-card .modal-message {
  margin-bottom: 16px;
}

.end-match-reasons {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.end-match-reasons.hidden {
  display: none;
}

.end-match-reason {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 8px;
  text-align: left;
}

.end-match-reason strong {
  display: block;
  font-size: 13px;
  letter-spacing: .04em;
}

.end-match-reason span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  opacity: .82;
}

/* Step 2 of the end-match modal: a distinct "are you sure?" screen shown in
   place of the reason list before match:end actually fires. */
.end-match-confirm .modal-message {
  margin-bottom: 20px;
}

.end-match-confirm-actions {
  display: flex;
  gap: 10px;
}

.end-match-confirm-actions .button {
  flex: 1;
}

.match-controls:not(.hidden) {
  display: contents;
}

.red-action,
.blue-action {
  height: 64px;
  min-height: 64px;
  font-size: 16px;
}

#score-red {
  grid-area: red-control;
}

#score-blue {
  grid-area: blue-control;
}

#undo-point {
  grid-area: undo-control;
  height: 42px;
  min-height: 42px;
  justify-self: center;
  align-self: center;
}

.red-action {
  color: var(--team-red-text);
  background: var(--team-red-tint);
  box-shadow: inset 0 0 0 1px var(--team-red);
}

.blue-action {
  color: var(--team-blue-text);
  background: var(--team-blue-tint);
  box-shadow: inset 0 0 0 1px var(--team-blue);
}

.red-action:hover:not(:disabled),
.blue-action:hover:not(:disabled) {
  background: var(--background-press);
}

.undo {
  color: var(--warning);
  border: 1px solid #715d18;
  background: #2c2416;
}

@keyframes score-pop {
  0% {
    transform: scale(.74);
    filter: brightness(1.9);
  }

  55% {
    transform: scale(1.09);
    filter: brightness(1.3);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes game-pop {
  0% {
    transform: translateY(5px) scale(.8);
    color: var(--text-base);
  }

  60% {
    transform: translateY(-3px) scale(1.24);
    color: var(--accent);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes point-flash-red {
  0% {
    box-shadow: inset 0 3px 0 var(--team-red), var(--shadow-card), 0 0 0 0 rgba(243, 114, 127, 0);
  }

  45% {
    box-shadow: inset 0 3px 0 var(--team-red), var(--shadow-card), 0 0 48px 8px rgba(243, 114, 127, .34);
  }

  100% {
    box-shadow: inset 0 3px 0 var(--team-red), var(--shadow-card), 0 0 0 0 rgba(243, 114, 127, 0);
  }
}

@keyframes point-flash-blue {
  0% {
    box-shadow: inset 0 3px 0 var(--team-blue), var(--shadow-card), 0 0 0 0 rgba(83, 157, 245, 0);
  }

  45% {
    box-shadow: inset 0 3px 0 var(--team-blue), var(--shadow-card), 0 0 48px 8px rgba(83, 157, 245, .34);
  }

  100% {
    box-shadow: inset 0 3px 0 var(--team-blue), var(--shadow-card), 0 0 0 0 rgba(83, 157, 245, 0);
  }
}

@keyframes serve-pulse {
  50% {
    opacity: .36;
    transform: scale(.7);
  }
}

.score-pop {
  animation: score-pop .42s cubic-bezier(.2, .9, .28, 1.25);
}

.game-pop {
  display: inline-block;
  animation: game-pop .48s cubic-bezier(.2, .9, .28, 1.2);
}

.red.point-flash {
  animation: point-flash-red .56s ease-out;
}

.blue.point-flash {
  animation: point-flash-blue .56s ease-out;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 720px) {
  .app-shell {
    width: min(100% - 16px, 1440px);
    padding-top: 4px;
  }

  .game-page {
    padding-bottom: 6px;
  }

  .topbar {
    min-height: 56px;
    margin-bottom: 6px;
    padding: 8px 12px;
  }

  .topbar,
  .topbar-actions {
    flex-direction: row;
    align-items: center;
  }

  .topbar-actions {
    width: auto;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    font-size: 17px;
  }

  .brand .eyebrow {
    display: none;
  }

  .topbar h1 {
    font-size: 18px;
  }

  .connection {
    display: none;
  }

  .nav-link {
    padding: 7px 10px;
    font-size: 10px;
  }

  .match-detail-button {
    width: 34px;
    min-height: 34px;
    justify-content: center;
    padding: 0;
  }

  .match-detail-button span {
    display: none;
  }

  .fetch-form,
  .start-row {
    align-items: stretch;
    flex-direction: column;
  }

  .fetch-form .button,
  .start-row .button {
    width: 100%;
  }

  .source-actions {
    grid-template-columns: 1fr;
  }

  .start-row label {
    width: 100%;
  }

  .scoreboard {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: "red blue" "red-control blue-control" "undo-control undo-control";
    gap: 6px;
  }

  .team-card {
    padding: 12px 10px;
  }

  .team-heading {
    min-height: 20px;
  }

  .team-label {
    font-size: 10px;
  }

  .serve-indicator {
    padding: 4px 6px;
    font-size: 8px;
  }

  .serve-indicator-dot {
    width: 5px;
    height: 5px;
  }

  .team-profiles {
    gap: 6px;
    min-height: 54px;
    margin: 10px 0 8px;
  }

  .team-profile {
    max-width: 74px;
    gap: 4px;
    font-size: 9px;
  }

  .team-profile img {
    width: 34px;
    height: 34px;
  }

  .point {
    margin-bottom: 7px;
    font-size: clamp(76px, 28vw, 120px);
  }

  .game-row {
    gap: 6px;
    font-size: 8px;
  }

  .game-row strong {
    font-size: 18px;
  }

  .versus {
    position: absolute;
    top: calc(50% - 50px);
    left: 50%;
    z-index: 2;
    width: 46px;
    min-height: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    background: transparent;
    pointer-events: none;
  }

  .versus strong {
    width: 46px;
    height: 46px;
    font-size: 15px;
    box-shadow: #000 0 0 0 3px, rgba(0, 0, 0, .5) 0 5px 14px;
  }

  .red-action,
  .blue-action {
    height: 54px;
    min-height: 54px;
    padding: 0 10px;
    font-size: 13px;
  }

  #undo-point {
    height: 34px;
    min-height: 34px;
    padding: 0 16px;
    font-size: 10px;
  }

  .match-state-panel {
    height: 112px;
    flex-basis: 112px;
    gap: 6px;
  }

  .serving-picker {
    height: 88px;
    padding: 10px 12px;
  }

  .serving-picker p {
    min-height: 30px;
    margin-bottom: 8px;
    line-height: 1.25;
  }

  .winner-banner {
    padding: 10px;
    font-size: 11px;
  }

  .next-match {
    min-height: 42px;
    font-size: 12px;
  }

  .winner-actions {
    gap: 6px;
  }

  .next-match,
  .restart-match {
    min-width: 0;
    min-height: 42px;
    padding: 0 10px;
    font-size: 10px;
  }

  .end-match-button {
    min-height: 18px;
    padding: 0 7px;
    font-size: 8px;
  }

  .notice {
    height: 15px;
    flex-basis: 15px;
    margin-top: 4px;
    font-size: 10px;
    line-height: 15px;
  }

  .notice {
    margin-top: 5px;
    font-size: 10px;
  }
}

@media (max-width: 440px) {
  .brand-mark {
    width: 32px;
    height: 32px;
  }

  .topbar h1 {
    font-size: 18px;
  }

  .player-list {
    grid-template-columns: 1fr;
  }

  .team-card {
    padding-inline: 10px;
  }

  .team-profiles {
    gap: 6px;
  }

  .match-detail-meta {
    grid-template-columns: 1fr;
  }

  .match-list-row {
    grid-template-columns: 1fr auto;
  }

  .match-list-status {
    grid-column: 1 / -1;
    justify-self: start;
  }
}