/*
  Der Seitenrahmen aller drei Spiele: Kopf, Fuss, Bühne, Knöpfe, Anzeige, Legende, Abschluss.

  DIESE DATEI DEFINIERT KEINE FARBE. Jede Farbe kommt als var(--…) aus /css/tokens.css, der Datei
  der Hauptseite -- gleiche Domain, gleicher nginx-Wurzelordner, also ein reiner Dateiverweis. Wer
  hier einen Hexwert einsetzt, macht aus einer Quelle zwei.

  swissentry.css wird bewusst NICHT eingebunden: es bringt globale Selektoren und
  Blazor-Eigenheiten mit, die diese Seiten nicht brauchen. Kopf und Fuss sind hier von Hand
  nachgebaut -- eine kleine, bewusste Doppelung als Preis der Trennung.

  WESHALB GEMEINSAM UND NICHT JE SPIEL: die Spiele unterscheiden sich im Spielfeld und in fast
  nichts sonst. Drei Fassungen dieses Rahmens waeren drei Staende, von denen zwei immer die
  aelteren sind -- und ein Fuss ohne den vierten Rechtslink faellt niemandem auf ausser dem Test.

  WAS HIER NICHT STEHT: die Hoehe des Spielfelds. Sie haengt daran, was das Spiel zeigt -- eine
  Strasse in die Tiefe braucht ein anderes Verhaeltnis als eine Etage von oben -- und steht deshalb
  in der CSS-Datei des jeweiligen Spiels.

  RADIUS 0 IST ABSICHT und keine Nachlaessigkeit: die Bildsprache des Angebots ist Signaletik
  (Wegweiser, Tafeln), tokens-ergaenzung.css fuehrt --radius-md mit 0px.
*/

/* Selbst gehostet, wie auf der Hauptseite -- kein Abruf bei Google Fonts, kein Tracking.
   Wortgleich mit dem @font-face in css/swissentry.css; der Pfad ist hier absolut, weil diese
   Datei in einem anderen Verzeichnis liegt. */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url('/fonts/Archivo-Variable.woff2') format('woff2');
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--grau-50);
    color: var(--text);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

.sp-wrap {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Kopf ---------- */

.sp-kopf {
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
}

.sp-kopf .sp-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}

.sp-marke img {
    display: block;
    width: 148px;
    height: auto;
}

.sp-sprachen {
    display: flex;
    gap: 4px;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sp-sprachen a {
    display: inline-block;
    padding: 6px 10px;
    color: var(--text-2);
    text-decoration: none;
    border: 1px solid transparent;
}

.sp-sprachen a:hover {
    color: var(--text);
    border-color: var(--linie);
}

/* aria-current statt einer eigenen Klasse: die Auszeichnung, die ein Screenreader ohnehin
   vorliest, traegt hier auch die sichtbare Markierung. Zwei Wege, dasselbe zu sagen, laufen
   irgendwann auseinander. */
.sp-sprachen a[aria-current='page'] {
    color: var(--navy-900);
    border-color: var(--navy-700);
    font-weight: 700;
}

/* ---------- Inhalt ---------- */

main {
    padding: 40px 0 64px;
}

h1 {
    margin: 0 0 12px;
    font-size: clamp(28px, 5vw, 44px);
    font-stretch: 87%;
    line-height: 1.15;
    letter-spacing: -0.005em;
}

.sp-vorspann {
    margin: 0 0 28px;
    max-width: 62ch;
    color: var(--text-2);
}

h2 {
    font-size: 22px;
    font-stretch: 87%;
    margin: 40px 0 8px;
}

/* ---------- Spielfeld ---------- */

.sp-buehne {
    position: relative;
    border: 1px solid var(--linie);
    background: var(--weiss);
}

#spielfeld {
    display: block;
    width: 100%;
    /* Ohne diese Zeile scrollt und zoomt die Seite bei jeder Wischgeste mit -- die Steuerung waere
       auf dem Handy unbrauchbar. */
    touch-action: none;
}

#spielfeld:focus-visible {
    outline: 3px solid var(--rot);
    outline-offset: 2px;
}

.sp-einblendung {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
}

.sp-einblendung[hidden] {
    display: none;
}

.sp-einblendung h2 {
    margin: 0;
    font-size: clamp(22px, 4vw, 32px);
}

.sp-einblendung p {
    margin: 0;
    max-width: 46ch;
    color: var(--text-2);
}

.sp-einblendung-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 8px;
}

/* ---------- Knoepfe ---------- */

.sp-knopf {
    display: inline-block;
    padding: 12px 22px;
    border: 2px solid var(--rot);
    background: var(--rot);
    color: var(--weiss);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.sp-knopf:hover {
    background: var(--navy-900);
    border-color: var(--navy-900);
}

.sp-knopf--sekundaer {
    background: transparent;
    border-color: var(--navy-700);
    color: var(--navy-700);
}

.sp-knopf--sekundaer:hover {
    background: var(--navy-700);
    color: var(--weiss);
}

.sp-knopf[hidden] {
    display: none;
}

/* ---------- Anzeige ---------- */

.sp-anzeige {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    border: 1px solid var(--linie);
    border-top: 0;
    background: var(--blau-50);
}

.sp-anzeige > div {
    flex: 1 1 120px;
    padding: 10px 14px;
    border-right: 1px solid var(--linie);
}

.sp-anzeige > div:last-child {
    border-right: 0;
}

.sp-anzeige dt {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-2);
}

.sp-anzeige dd {
    margin: 2px 0 0;
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sp-steuerung {
    margin: 16px 0 0;
    color: var(--text-2);
    font-size: 15px;
}

.sp-steuerung kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--linie);
    background: var(--weiss);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

/* ---------- Legende ---------- */

/* Die paar Zeilen unter dem Feld, die sagen, was man dort sieht. Sie stehen im Dokument und nicht
   im Canvas, damit sie vorgelesen werden koennen -- und damit sie da sind, bevor gespielt wird.

   Hier und nicht je Spiel, seit zwei Spiele sie haben: die Form ist dieselbe, nur die Farben der
   Kaestchen sind es nicht. Die stehen deshalb weiter in der Datei des jeweiligen Spiels. */
.sp-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-2);
    font-size: 15px;
}

.sp-legende li {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Das Kaestchen vor jeder Zeile traegt die Farbe, um die es geht. `currentColor` waere hier falsch:
   gemeint ist die Farbe auf dem Spielfeld, nicht die des Textes. */
.sp-legende span {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid var(--linie);
}

/* ---------- Abschluss ---------- */

.sp-abschluss {
    margin-top: 48px;
    padding: 28px;
    border: 1px solid var(--linie);
    background: var(--weiss);
}

.sp-abschluss p {
    max-width: 62ch;
}

/* ---------- Verweis auf die anderen Spiele ---------- */

/* Jede Seite nennt die anderen. Sie stehen unter derselben Domain, sind Nebenstuecke desselben
   Angebots, und wer das eine gespielt hat, ist genau der, den die anderen interessieren. Ohne
   diesen Verweis gibt es keinen Weg von /spiel nach /nachtschicht ausser dem, die Adresse zu
   kennen -- von der Hauptseite ist keines der Spiele verlinkt. */
.sp-anderes {
    margin: 28px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--linie);
    border-left: 4px solid var(--navy-700);
    background: var(--weiss);
}

.sp-anderes p {
    margin: 0;
    max-width: 62ch;
}

/* ---------- Fuss ---------- */

.sp-fuss {
    background: var(--navy-900);
    color: var(--on-navy);
    padding: 32px 0;
    font-size: 15px;
}

.sp-fuss a {
    color: var(--on-navy);
}

.sp-fuss ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.sp-fuss p {
    margin: 0;
    color: var(--on-navy-2);
}

/* ---------- Rueckfall ohne JavaScript ---------- */

/* Der Text im Canvas erscheint nur, wenn der Browser das Element nicht darstellt. Fuer den
   haeufigeren Fall -- Canvas vorhanden, JavaScript abgeschaltet -- steht dieser Hinweis im
   Dokument und wird von spiel.js entfernt, sobald es laeuft. */
.sp-ohne-js {
    margin: 16px 0 0;
    padding: 14px 18px;
    border-left: 4px solid var(--rot);
    background: var(--weiss);
}