/*
  Was am „Papierkrieg" anders ist als am Rahmen -- und das ist das Spielfeld und die drei Farben
  seiner Legende.

  ALLES ANDERE STEHT IN /spiele/gemeinsam/css/rahmen.css: Kopf, Fuss, Bühne, Knöpfe, Anzeige,
  Legende, Abschluss. Jedes Spiel bindet erst den Rahmen und dann seine eigene Datei ein.

  Auch diese Datei definiert keine Farbe: sie verwendet die Token und mischt, wo sie eine
  Zwischenstufe braucht (color-mix), statt einen Hexwert einzusetzen. Die erste Zeile jeder solchen
  Regel ist der volle Token als Rückfall -- ein Browser ohne color-mix bekommt dann eine deckende
  Fläche statt keiner.
*/

#spielfeld {
    /* Das Feld zeigt einen Gang mit neun Metern Höhe, und die Höhe ist hier die Spielregel: an der
       Decke scheitert ein zu steiler Schlag. Sie muss deshalb immer im Bild sein, was das
       Verhältnis nach unten begrenzt -- zeichnen.js rechnet Brennweite und Horizont so, dass die
       neun Meter im Querformat gut vier Fünftel der Bildhöhe füllen.

       Quadratisch auf dem Handy und nicht hochkant: die Kugel fliegt waagrecht, und ein schmales
       Bild zeigt von jedem Aufpraller nur die Mitte. Unter etwa 0,93 zieht zeichnen.js die Kamera
       zurück (SICHT_MIN), damit wenigstens dreizehn Meter Gang nebeneinander stehen -- das ist der
       Rückfall und nicht der Normalfall. */
    aspect-ratio: 1 / 1;
}

@media (min-width: 700px) {
    #spielfeld {
        aspect-ratio: 16 / 9;
    }
}

/* ---------- Die Farben der Legende ---------- */

/* Die Form steht im Rahmen; hier steht, was die drei Kästchen bedeuten. Der Tacker ist das Metall
   des Feldes, die Akte ihr Papier, der Schalter das Rot, das in diesem Projekt genau eine
   Bedeutung hat: Anfang und Ziel. */
.sp-legende .sp-legende--tacker {
    background: var(--navy-700);
    background: color-mix(in srgb, var(--navy-700) 55%, var(--weiss));
}

.sp-legende .sp-legende--akte {
    background: var(--weiss);
}

.sp-legende .sp-legende--schalter {
    background: var(--rot);
}