/*
  Was an „Nachtschicht im Amt" anders ist als am Rahmen -- und das ist das Spielfeld und alles,
  was darauf liegt.

  ALLES ANDERE STEHT IN /spiele/gemeinsam/css/rahmen.css: Kopf, Fuss, Buehne, Knoepfe, 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 Rueckfall -- ein Browser ohne color-mix bekommt dann eine deckende
  Flaeche statt keiner.
*/

/* Die Buehne ist hier dunkel und nicht weiss: das Feld ist schwarz, und ein weisser Rahmen
   darum liest sich als Fehler in der Zeichnung. */
.sp-buehne {
    background: var(--navy-900);
    border-color: var(--navy-700);
}

#spielfeld {
    /* Fast quadratisch auf dem Handy, leicht liegend am Bildschirm. Anders als in Spiel 1
       entscheidet das Verhaeltnis hier nicht ueber die Vorwarnzeit, sondern nur darueber, wie viel
       von der Etage neben der Figur steht -- der Zoom haengt an der kleineren der beiden
       Richtungen (SPANNE in js/zeichnen.js), damit ein Lichtkegel nie von ausserhalb des Bildes
       auf die Figur trifft. */
    aspect-ratio: 1 / 1;
}

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

/* ---------- Die Einblendung liegt auf dem schwarzen Feld ---------- */

/* Ohne diesen Block stuende die Schrift der Einblendung in Navy auf Schwarz. Der Rahmen kann das
   nicht wissen: dort ist die Buehne weiss, und dort ist Navy richtig. */
/* 84 Prozent und nicht deckend: das letzte Bild scheint durch, und man sieht, WER einen gesehen
   hat -- die Einblendung sagt es nicht, sie kann es nicht wissen. Die Schrift bleibt lesbar, weil
   das Bild darunter fast schwarz ist; genau deshalb funktioniert der Wert hier und wäre auf einem
   hellen Feld falsch. */
.sp-einblendung {
    background: var(--navy-900);
    background: color-mix(in srgb, var(--navy-900) 84%, transparent);
    color: var(--on-navy);
}

.sp-einblendung p {
    color: var(--on-navy-2);
}

/* Der sekundaere Knopf ist im Rahmen navy auf weiss -- auf dieser Flaeche waere er unsichtbar. */
.sp-einblendung .sp-knopf--sekundaer {
    border-color: var(--on-navy-2);
    color: var(--on-navy);
}

.sp-einblendung .sp-knopf--sekundaer:hover {
    background: var(--on-navy-2);
    color: var(--navy-900);
}

/* ---------- Die Legende unter dem Feld ---------- */

/* Drei Zeilen, die erklaeren, was man auf dem Feld sieht: Kegel, Papier, Treppenhaus. Ihre Form
   steht seit dem dritten Spiel im Rahmen (gemeinsam/css/rahmen.css) -- hier stehen nur noch die
   Farben der Kaestchen, und die sind je Spiel andere. */
.sp-legende .sp-legende--kegel {
    background: var(--gold);
}

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

.sp-legende .sp-legende--treppe {
    background: var(--gruen);
}