@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  color-scheme: dark;
  --blue: #009ee2;
  --darkBlue : #003d58;
  --black: #000000;
  --white: #edf3f6;
  --font-score: 'Press Start 2P', 'Courier New', monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--black);
}

body {
  min-width: 0;
}

.scene {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  background: var(--black);
  outline: none;
}

.court {
  position: relative;
  flex: none;
  width: min(100vw, 133.333vh, 1200px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
}

.court::before {
  position: absolute;
  z-index: 0;
  inset: clamp(18px, 4vw, 48px);
  border: 1px solid var(--blue);
  box-shadow: 0 0 10px rgba(0, 158, 226, 0.2);
  content: '';
  background-image: radial-gradient(circle, var(--darkBlue) 5%, var(--black) 80%);
  pointer-events: none;
}

.center-line {
  position: absolute;
  z-index: 1;
  top: 20%;
  bottom: 20%;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, var(--white) 0 5px, transparent 5px 14px);
  opacity: 0.8;
  transition: opacity 700ms ease;
}

.scores {
  position: absolute;
  z-index: 5;
  top: clamp(22px, 5vh, 52px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 16px);
  transform: translateX(-50%);
  pointer-events: none;
  padding-top:15px;
}

.score-group {
  display: flex;
  color: var(--white);
  font-family: var(--font-score);
  white-space: nowrap;
}

.score-group-right {
  align-items: center;
}

.score-divider {
  width: 2px;
  height: 14px;
  background: var(--white);
  opacity: 0.75;
}

.player-name {
  font-size: clamp(6px, 0.75vw, 10px);
}

.score {
  color: var(--blue);
  font-family: var(--font-score);
  font-size: clamp(10px, 2.6vw, 24px);
  line-height: 1.4;
  text-shadow: 0 0 10px rgba(0, 158, 226, 0.35);
}

.artboard {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(25.5vw, 33vh, 285px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  overflow: hidden;
  isolation: isolate;
  transition: opacity 700ms ease;
}

.backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

.points {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity 700ms ease;
}

.robot-gaze {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  width: 56%;
  height: auto;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 700ms ease, transform 700ms ease;
}

.robot-tagline {
  position: absolute;
  z-index: 7;
  top: 84%;
  left: 50%;
  margin: 0;
  color: var(--white);
  font-family: var(--font-score);
  font-size: clamp(9px, 1.4vw, 18px);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 700ms ease, transform 700ms ease;
  line-height:1.5em;
}

.robot-tagline.is-intro {
  opacity: 1;
  transform: translate(-50%, 0);
}

.tagline-intro {
  display: block;
}

.tagline-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 180ms steps(1, end), transform 180ms steps(1, end);
}

.tagline-letter.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.tagline-line {
  display: block;
}

.court.is-finale .artboard,
.court.is-finale .points,
.court.is-finale .center-line,
.court.is-finale .paddle {
  opacity: 0;
}

.court.is-finale .robot-gaze-blink {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: robot-led-pulse 1.8s ease-in-out infinite alternate;
}

.court.is-finale .robot-gaze-open {
  opacity: 0;
}

.court.is-finale.is-gaze-open .robot-gaze-blink {
  opacity: 0;
  animation: none;
}

.court.is-finale.is-gaze-open .robot-gaze-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: robot-led-pulse 1.8s ease-in-out infinite alternate;
}

.court.is-finale.is-gaze-open .robot-tagline {
  opacity: 1;
  transform: translate(-50%, 0);
}

.dot {
  position: absolute;
  display: block;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.paddle {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: clamp(9px, 1.4vw, 16px);
  height: clamp(48px, 9vh, 82px);
  transform: translateY(-50%);
  background: repeating-linear-gradient(
    to bottom,
    var(--white) 0 2px,
    transparent 2px 5px
  );
  filter: drop-shadow(0 0 6px rgba(0, 158, 226, 0.45));
  transition: top 180ms cubic-bezier(0.2, 0.75, 0.2, 1), opacity 700ms ease;
}

.paddle-left {
  left: 12%;
}

.paddle-right {
  right: 12%;
}

@keyframes robot-led-pulse {
  from {
    filter: drop-shadow(0 0 5px rgba(0, 158, 226, 0.55)) drop-shadow(0 0 14px rgba(0, 158, 226, 0.28));
  }

  to {
    filter: drop-shadow(0 0 10px rgba(0, 158, 226, 0.95)) drop-shadow(0 0 28px rgba(0, 158, 226, 0.55));
  }
}

@media (max-width: 600px) and (orientation: portrait) {
  .court {
    aspect-ratio: 4 / 5;
  }

  .robot-tagline {
    top: 80%;
    font-size: clamp(12px, 3.5vw, 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .court.is-finale .robot-gaze-blink,
  .court.is-finale.is-gaze-open .robot-gaze-open {
    animation: none;
    filter: drop-shadow(0 0 8px rgba(0, 158, 226, 0.75)) drop-shadow(0 0 20px rgba(0, 158, 226, 0.4));
  }

  .paddle {
    transition: none;
  }

  .tagline-letter {
    transition: none;
    opacity: 1;
    transform: none;
  }
}