/* =============================================================================
   PongPong – Stylesheet
   =============================================================================
   Dieses Stylesheet definiert das visuelle Erscheinungsbild der gesamten
   Anwendung. Die Spielfläche selbst (das schwarze Canvas) wird hier nur
   positioniert und gestaltet – die eigentliche Spielgrafik wird per JavaScript
   auf das Canvas gezeichnet.

   Farbgebung: Helle, bunte Oberfläche passend zur übergeordneten PlayGround-X
   Hauptseite, während das Spielfeld selbst klassisch schwarz/weiß bleibt.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   Alle Farben und Schriften an einem Ort definiert, damit Änderungen einfach
   sind und konsistent durch die gesamte Seite durchlaufen.
   ----------------------------------------------------------------------------- */
:root {
  --pink:   #F43F5E;   /* Akzentfarbe Rosa – Spieler-Score, Titelgradient */
  --orange: #F97316;   /* Akzentfarbe Orange – Titelgradient, Spieler-Score */
  --violet: #8B5CF6;   /* Akzentfarbe Violett – KI-Score */
  --purple: #A855F7;   /* Akzentfarbe Lila – KI-Score */
  --bg:     #ffffff;   /* Seitenhintergrund weiß */
  --text:   #1A1A2E;   /* Haupttextfarbe dunkel */
  --soft:   #6B7280;   /* Sekundärtextfarbe grau – für Hinweise */
  --font:   -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
            /* System-Schriftart: sieht auf macOS, iOS, Windows nativ aus */
}


/* -----------------------------------------------------------------------------
   Reset
   Entfernt Browser-Standardabstände und stellt konsistentes Box-Sizing sicher.
   -webkit-tap-highlight-color verhindert blaue Tap-Highlights auf mobilen Geräten.
   ----------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}


/* -----------------------------------------------------------------------------
   HTML-Root
   Hintergrundfarbe auf html (nicht body) setzen, damit der Bereich hinter dem
   transparenten body immer weiß ist – notwendig, damit der Partikel-Hintergrund
   (bg-canvas mit z-index: -1) auf weißem Grund erscheint, nicht auf schwarz.
   ----------------------------------------------------------------------------- */
html {
  background: #ffffff;
}


/* -----------------------------------------------------------------------------
   Body
   Zentriert alle Inhalte vertikal und horizontal auf der vollen Viewport-Höhe.
   - background: transparent → lässt den bg-canvas dahinter durchscheinen
   - height: 100dvh → nutzt die dynamische Viewport-Höhe (korrekt auf Mobile
     ohne Adressleiste)
   - overflow: hidden → verhindert Scrollbalken bei knappem Platz
   - padding mit clamp() → adaptiver Außenabstand: klein bei niedrigem Viewport,
     größer bei mehr Platz
   ----------------------------------------------------------------------------- */
/* Mauszeiger ausblenden solange das Spiel aktiv läuft.
   Die Klasse 'game-active' wird per JavaScript im Game-Loop gesetzt/entfernt. */
body.game-active {
  cursor: none;
}

body {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  padding: clamp(0.3rem, 1.2vh, 0.8rem) 0;
  font-family: var(--font);
  color: var(--text);
  overflow: hidden;
}


/* -----------------------------------------------------------------------------
   Hintergrund-Canvas (Partikel-Animation)
   Liegt fest hinter allen anderen Elementen. z-index: -1 in Kombination mit
   body { background: transparent } und html { background: #fff } sorgt dafür,
   dass Partikel nur im weißen Bereich um das Spielfeld herum sichtbar sind,
   aber vom schwarzen Spielfeld-Canvas (das im normalen Dokumentfluss liegt)
   überdeckt werden.
   pointer-events: none → Klicks/Touch gehen durch den Canvas hindurch.
   ----------------------------------------------------------------------------- */
#bg-canvas {
  position: fixed;
  inset: 0;            /* Kurzschreibweise für top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}


/* -----------------------------------------------------------------------------
   Titelzeile (#title-row)
   Flex-Container für den h1-Titel und den Sound-Button, nebeneinander zentriert.
   flex-shrink: 0 verhindert, dass die Zeile beim Skalieren kleiner gequetscht
   wird (stattdessen verkleinert sich das Spielfeld).
   ----------------------------------------------------------------------------- */
#title-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: clamp(0.2rem, 0.5vh, 0.5rem);
  flex-shrink: 0;
}


/* -----------------------------------------------------------------------------
   Haupttitel (h1)
   "PONGPONG" in großen, fetten Großbuchstaben mit Farbverlauf-Text.
   - font-size: Startwert – wird per JavaScript in resizeCanvas() überschrieben,
     damit der Titel proportional mit dem Spielfeld skaliert.
   - background-clip: text + -webkit-text-fill-color: transparent → erzeugt den
     Farbverlauf-Effekt im Text selbst.
   ----------------------------------------------------------------------------- */
h1 {
  font-size: 2.8rem; /* Startwert – wird per JS skaliert */
  font-weight: 800;
  letter-spacing: 0.5rem;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* -----------------------------------------------------------------------------
   Sound-Button
   Dezenter Button ohne sichtbaren Rahmen, halbtransparent im Ruhezustand.
   Beim Hover wird er vollständig opak. Das Icon selbst ist ein SVG und wird
   per JavaScript zwischen "Sound an" und "Sound aus" gewechselt.
   Die Icon-Größe wird über die CSS Custom Property --sound-icon-size gesteuert,
   die ebenfalls per JS in resizeCanvas() aktualisiert wird.
   ----------------------------------------------------------------------------- */
#sound-btn {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s;
  padding: 0.2rem;
  display: flex;
  align-items: center;
  color: var(--text);
}

#sound-btn:hover {
  opacity: 1;
}

#sound-btn svg {
  /* Größe wird per JS als CSS-Variable gesetzt, damit sie mit dem Canvas skaliert */
  width: var(--sound-icon-size, 22px);
  height: var(--sound-icon-size, 22px);
}


/* -----------------------------------------------------------------------------
   Anzeigetafel (#scoreboard)
   Zeigt den Punktestand beider Spieler groß und nebeneinander.
   font-size: Startwert – wird per JS skaliert.
   ----------------------------------------------------------------------------- */
#scoreboard {
  display: flex;
  gap: 3rem;
  align-items: baseline;
  font-size: 3.5rem; /* Startwert – wird per JS skaliert */
  font-weight: 700;
  margin-bottom: clamp(0.3rem, 0.7vh, 0.7rem);
  flex-shrink: 0;
}

/* Spieler-Score: orange → rosa Verlauf (linke Seite) */
#score-left {
  background: linear-gradient(135deg, var(--orange), var(--pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Trennzeichen ":" zwischen den Scores – kleiner und grau */
#scoreboard > span:nth-child(2) {
  color: var(--soft);
  font-size: 0.7em;
}

/* KI-Score: violett → lila Verlauf (rechte Seite) */
#score-right {
  background: linear-gradient(135deg, var(--violet), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* -----------------------------------------------------------------------------
   Rally-Timer (#rally-timer)
   Zeigt die Dauer des aktuellen oder letzten Ballwechsels an.
   Kleines Label + Zeitwert nebeneinander, Zeitwert im Marken-Farbverlauf.
   font-size: Startwert – wird per JS skaliert.
   ----------------------------------------------------------------------------- */
#rally-timer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem; /* Startwert – wird per JS skaliert */
  margin-bottom: clamp(0.2rem, 0.5vh, 0.5rem);
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(249,115,22,0.12), rgba(244,63,94,0.12));
  border: 1.5px solid rgba(244,63,94,0.4);
  border-radius: 999px;
  padding: 0.2em 1em 0.22em;
}

.rally-label {
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--pink);
  opacity: 0.7;
  transition: color 0.4s;
}

#rally-time {
  font-size: 1em;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-width: 3.2ch;
  transition: background 0.4s;
}

/* KI hat den Punkt gemacht → violett/lila */
#rally-timer.ai-scored {
  border-color: rgba(139,92,246,0.4);
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(168,85,247,0.12));
}

#rally-timer.ai-scored .rally-label {
  color: var(--violet);
}

#rally-timer.ai-scored #rally-time {
  background: linear-gradient(135deg, var(--violet), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
}

/* Ball ist aktiv → neutrale Grün/Teal-Farbe (überschreibt Sieger-Farbe) */
#rally-timer.rally-active {
  border-color: rgba(16,185,129,0.4);
  background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(6,182,212,0.10));
}

#rally-timer.rally-active .rally-label {
  color: #10B981;
}

#rally-timer.rally-active #rally-time {
  background: linear-gradient(135deg, #10B981, #06B6D4);
  -webkit-background-clip: text;
  background-clip: text;
}


/* -----------------------------------------------------------------------------
   Spielbereich (#game-area)
   Horizontaler Flex-Container, der auf Touch-Geräten die Touch-Buttons links
   neben dem Canvas anzeigt (auf Desktop-Geräten fehlen die Buttons, der Canvas
   füllt den Bereich allein aus).
   ----------------------------------------------------------------------------- */
#game-area {
  display: flex;
  align-items: center;
  gap: 1rem;
}


/* -----------------------------------------------------------------------------
   Canvas-Wrapper (#canvas-wrap)
   Umschließt das Spielfeld-Canvas. Als inline-block-Container passt er sich
   der tatsächlichen (per JS gesetzten) Canvas-Größe an.
   ----------------------------------------------------------------------------- */
#canvas-wrap {
  position: relative;
  display: inline-block;
}


/* -----------------------------------------------------------------------------
   Spielfeld-Canvas (#canvas)
   Das eigentliche Spielfeld. Der Selektor #canvas (statt canvas) ist bewusst
   gewählt, damit diese Regel nicht versehentlich auch den #bg-canvas trifft.
   - background: #000 → klassisch schwarzes Pong-Spielfeld
   - border-radius + box-shadow → moderner Look
   - display: block → verhindert Lücke unterhalb des Canvas (inline baseline)
   - touch-action: none → unterdrückt Browser-Scroll/Zoom auf Touch-Geräten,
     damit die Berührungssteuerung funktioniert
   Die tatsächliche Anzeigegröße (width/height als CSS) wird per JS in
   resizeCanvas() gesetzt – die interne Auflösung bleibt immer 800×500 px.
   ----------------------------------------------------------------------------- */
#canvas {
  background: #000;
  border: 1.5px solid rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
  display: block;
  touch-action: none;
}


/* -----------------------------------------------------------------------------
   Info-Zeile (#info)
   Kleiner Hinweistext unterhalb des Spielfeldes mit den Tastatursteuerungen.
   Auf Touch-Geräten ausgeblendet (dort gibt es die Touch-Buttons).
   font-size: Startwert – wird per JS skaliert.
   ----------------------------------------------------------------------------- */
#info {
  margin-top: clamp(0.3rem, 0.6vh, 0.6rem);
  font-size: 0.8rem; /* Startwert – wird per JS skaliert */
  color: var(--soft);
  letter-spacing: 0.06em;
  text-align: center;
  flex-shrink: 0;
}


/* -----------------------------------------------------------------------------
   Statusnachricht (#message)
   Zeigt Spielzustandsmeldungen: "Tap or SPACE to start", "PAUSE", "You win!" etc.
   min-height: 1.4em → verhindert Layout-Sprünge wenn der Text leer ist.
   white-space: pre-line → erlaubt mehrzeilige Nachrichten mit \n im JS.
   font-size: Startwert – wird per JS skaliert.
   ----------------------------------------------------------------------------- */
#message {
  margin-top: clamp(0.2rem, 0.4vh, 0.4rem);
  min-height: 1.4em;
  font-size: 1.1rem; /* Startwert – wird per JS skaliert */
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.08rem;
  text-align: center;
  white-space: pre-line;
  flex-shrink: 0;
}


/* -----------------------------------------------------------------------------
   Touch-Steuerung (#touch-controls, .touch-btn)
   Zwei runde Buttons (Pfeil hoch/runter) für die Schlägersteuerung auf
   Touch-Geräten. Standardmäßig versteckt (display: none), nur auf Geräten
   mit grobem Zeiger (Finger) sichtbar.
   .touch-btn.active → visuelles Feedback wenn der Button gedrückt wird.
   ----------------------------------------------------------------------------- */
#touch-controls {
  display: none;          /* Standard: unsichtbar */
  flex-direction: column;
  gap: 1.5rem;
  flex-shrink: 0;
}

.touch-btn {
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.04);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  color: var(--text);
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

/* Aktiver Zustand: rosa Akzentfarbe beim Drücken */
.touch-btn.active {
  background: rgba(244, 63, 94, 0.10);
  border-color: var(--pink);
  color: var(--pink);
}


/* -----------------------------------------------------------------------------
   Responsive Anpassungen (Touch-Geräte)
   Auf Geräten mit grobem Zeiger (Touchscreen) werden die Touch-Buttons
   eingeblendet und der Tastatur-Hinweistext ausgeblendet.
   ----------------------------------------------------------------------------- */
@media (pointer: coarse) {
  #touch-controls { display: flex; }
  #info { display: none; }
}