/* Страница игры: тёмный фон, всё по центру, холст подстраивается под высоту окна */
html, body { margin: 0; height: 100%; }
body {
  background: #111;
  color: #eee;
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#tennisCourt {
  height: min(800px, calc(100vh - 24px));
  width: auto;
  aspect-ratio: 3 / 4;
  touch-action: none;   /* палец двигает игрока, а не прокручивает страницу */
  cursor: crosshair;
  border-radius: 6px;
}

.game-container {
  display: flex;
  flex-direction: row; /* Выстраиваем в ряд: холст и табло */
  align-items: flex-start;
  gap: 20px;
}

#side-scoreboard {
  width: 180px;
  background: #222;
  border: 2px solid #444;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
}

.score-title { font-size: 12px; color: #888; margin-bottom: 10px; text-align: center; }

.player-box {
  background: #333;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 1fr 30px 30px; /* Имя | Сет | Гейм */
  align-items: center;
}

.player-box.player { border-left: 4px solid #3498db; }
.player-box.cpu { border-left: 4px solid #e74c3c; }

.name { font-weight: bold; font-size: 14px; }
.sets { color: #aaa; text-align: center; font-size: 12px; }
.games { font-weight: bold; text-align: center; color: #fff; }
.points {
  grid-column: 1 / span 3;
  text-align: right;
  font-size: 24px;
  color: #ccff00;
  margin-top: 5px;
}

#match-log { font-size: 12px; color: #fbca04; margin-top: 10px; text-align: center; }
#speed-tag { font-size: 18px; color: #fff; text-align: center; margin-top: 5px; font-family: monospace; }

/* Узкий экран: табло над кортом в одну строку */
@media (max-aspect-ratio: 1/1) {
  .game-container { flex-direction: column-reverse; align-items: center; gap: 8px; }
  #tennisCourt { height: auto; width: min(calc(100vw - 16px), calc((100vh - 110px) * 0.75)); }
  #side-scoreboard { width: auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
  .score-title, #match-log, #speed-tag { margin: 0; }
  .player-box { margin: 0; padding: 4px 8px; }
  .points { font-size: 16px; margin-top: 0; }
}