/* zeichnen.app - das Haus des Spiels.
 *
 * Ein eigenes Stylesheet und keine Abschrift von zeichen.tv: Dort hängt
 * das Aussehen an einer Seite mit Suche, Pfad, Katalog und Fuß. Hier
 * stehen vier Seiten, die eine Einladung zeigen und sonst nichts - und
 * eine Seite, die nichts kann, soll auch nicht achtzig Kilobyte dafür
 * laden.
 *
 * Dieselben Farben wie drüben und in der App: Papier, Tinte, ein Blau.
 * Wer von der App kommt, soll nicht merken, dass er den Ort gewechselt
 * hat.
 */

:root {
    --grund: #FAF9F5;
    --text: #14130F;
    --leise: #6E6A60;
    --linie: #D6D0BF;
    --flaeche: #F1EEE5;
    --blau: #0078FF;
    --akzent: #0057D6;
    --glas: rgba(250, 249, 245, 0.62);
    /* Sechs, wie in der App (`Rundung.kante`). Sie rundet alles mit
       derselben Zahl - Kacheln, Felder, Knöpfe -, und eine Kapsel gibt
       es dort nur für Marken und Pillen. */
    --radius: 6px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #131211;
        --text: #F4F2EA;
        --leise: #918C81;
        --linie: #2C2A26;
        --flaeche: #201E1B;
        --blau: #3D9BFF;
        --akzent: #6FB0FF;
        --glas: rgba(19, 18, 17, 0.58);
    }
}

/* **Dieselbe Schrift wie in der App: die runde des Systems.**
 *
 * Die App setzt ihren Text in SF Rounded (`Schriften.rund`), und wer
 * von dort kommt, soll keinen Wechsel bemerken. Im Browser heißt sie
 * `ui-rounded` - über ihren Namen gibt Apple sie nicht heraus, in der
 * App so wenig wie hier.
 *
 * Dahinter die Kette für alles, was kein Apple-Gerät ist: Inter liegt
 * im Haus und kommt mit, sonst die Schrift des Systems. Noto Sans Mono
 * bleibt für alles, was gezählt oder abgelesen wird. */
:root {
    --schrift: ui-rounded, "SF Pro Rounded", "Inter", -apple-system,
               BlinkMacSystemFont, system-ui, sans-serif;
}

@font-face {
    font-family: "Inter";
    src: url("schriften/inter-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans Mono";
    src: url("schriften/noto-sans-mono-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 24px 20px;
    background: var(--grund);
    color: var(--text);
    font: 17px/1.5 var(--schrift);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* **Der Block steht in der Mitte der Scheibe.** Nicht oben
       angeschlagen: Es sind vier kurze Seiten, und eine halbe Seite
       Leere darunter sieht aus, als fehlte etwas. dvh und nicht vh -
       auf dem Telefon fährt die Leiste des Browsers ein und aus. */
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Alles steht in einer Spalte von Lesebreite, mittig. */
main, header, footer { width: 100%; max-width: 440px; }

header { padding: 0 0 16px; }

/* **Der Inhalt liegt auf Glas.**
 *
 * Dieselbe Scheibe wie über den Kacheln der App: Der Grund scheint
 * durch, die Zeichen dahinter bleiben zu erkennen und verwischen - es
 * ist Glas und keine milchige Platte. Wo der Browser nichts davon
 * kann, bleibt der Ton allein, und die Seite steht trotzdem. */
main {
    background: var(--glas);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 26px 24px 28px;
}

/* Die Wortmarke: derselbe Name wie im App Store. */
.marke {
    font: 600 19px/1 var(--schrift);
    letter-spacing: -0.01em;
    color: var(--text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Die Rundung des Systems, nicht die des Hauses: Ein Programmsymbol
   sieht überall gleich aus, und hier soll es so dastehen wie auf dem
   Startbildschirm. */
.marke img {
    border-radius: 22%;
    display: block;
}

h1 {
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
}

h2 {
    font-size: 19px;
    margin: 32px 0 10px;
}

p { margin: 0 0 14px; }

a { color: var(--akzent); }

/* Beschriftungen, Codes, Zahlen - wie in der App. */
.mono {
    font-family: "Noto Sans Mono", ui-monospace, monospace;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--leise);
    text-transform: uppercase;
}

.kasten {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 20px;
    margin: 0 0 18px;
}

/* Der Raumcode, so groß, dass man ihn vorlesen kann. */
.code {
    font-family: "Noto Sans Mono", ui-monospace, monospace;
    font-size: 40px;
    letter-spacing: 0.22em;
    margin: 4px 0 0;
    /* Das letzte Zeichen trägt seinen Abstand rechts mit; ohne diese
       Zeile steht der Code sichtbar links von der Mitte. */
    text-indent: 0.22em;
}

.knopf {
    display: block;
    background: var(--blau);
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    padding: 15px 20px;
    border-radius: var(--radius);
    margin: 0 0 10px;
}

.knopf.stiller {
    background: var(--flaeche);
    color: var(--akzent);
    border: 1px solid var(--linie);
}

.leise { color: var(--leise); }

/* **Das Blatt, auf dem jemand gemalt hat.**
 *
 * Dasselbe Papier wie in der App: kariert, mit Kante und Rundung
 * (Papierfeld). Das Raster liegt bei 56 Punkten, wie dort und wie im
 * Malfeld - es ist dieselbe Fläche, nur steht sie hier still. */
.beispiel {
    margin: 0 0 26px;
}

.blatt {
    /* **Die erste Linie liegt nicht auf der Kante.**
       Der Verlauf fing mit seiner Linie bei null an, und dort steht
       schon der Rahmen des Blattes - zwei Striche nebeneinander, die
       wie ein doppelter Rand aussahen. Jetzt liegt die Linie am Ende
       des Intervalls, und das Raster fängt mit Papier an. */
    background:
        repeating-linear-gradient(to right,
            transparent 0 55px, var(--linie) 55px 56px),
        repeating-linear-gradient(to bottom,
            transparent 0 55px, var(--linie) 55px 56px),
        var(--grund);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.blatt svg { width: 100%; height: auto; max-width: 240px; color: var(--text); }

.beispiel figcaption {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.beispiel .zeichen { font-size: 28px; line-height: 1; }

/* Die Wertung steht am rechten Rand der Zeile, wie in der App unter
   dem Blatt: dieselbe Mono, nur nicht grau - sie ist das Ergebnis. */
.beispiel .wertung {
    margin-left: auto;
    font-family: "Noto Sans Mono", ui-monospace, monospace;
    font-size: 15px;
}

/* Zwei Pflichtzeilen, mehr nicht: Sie müssen dastehen und sollen
   nichts behaupten. Kein Strich darüber - er zöge eine Linie unter
   eine Seite, die ohnehin zu Ende ist. */
footer {
    margin-top: 14px;
    font-size: 13px;
    text-align: center;
}

footer a {
    color: var(--leise);
    text-decoration: none;
    margin: 0 8px;
}

footer a:hover { text-decoration: underline; }

/* **Die Zeichen hinter der Seite.**
 *
 * Ein Raster, das gleichmäßig zieht - dasselbe Bild wie in der App.
 * Es liegt hinter allem, nimmt keine Tipps an und geht beim Ziehen
 * über die Seite nicht mit.
 */
.flug {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Eine feste Höhe und nicht die der Scheibe: Auf dem Telefon fährt
       die Leiste des Browsers beim Blättern ein und aus, und mit ihr
       spränge der ganze Hintergrund. lvh ist die größte Scheibe und
       damit eine Zahl, die sich nicht ändert. */
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.flug span {
    position: absolute;
    /* Links außerhalb: Der Sprung ans Ende der Runde liegt damit
       außerhalb des Bildes und ist nicht zu sehen. */
    left: -25vw;
    line-height: 1;
    color: var(--text);
    white-space: nowrap;
    will-change: transform;
}

/* Eine Bahn, waagerecht. Kein Steigen - eine Zeile, die schräg läuft,
   ist keine. */
@keyframes flug {
    from { transform: translateX(0); }
    to   { transform: translateX(150vw); }
}

@media (prefers-reduced-motion: reduce) {
    .flug span { animation: none !important; }
}