/* ===== Einladung - Basis/Reset =========================================
   Wie SoulKeeper/css/base.css, aber ausdrücklich OHNE overflow:hidden auf
   html/body: das Spiel sperrt eigenes Scrollen, weil es die Kamerafahrt
   (transform auf #welt-track) selbst steuert. Hier gibt es keine
   Kamerafahrt mehr - die vier Welt-Abschnitte liegen in normalem
   Dokumentfluss untereinander, der Nutzer scrollt frei mit Maus/Touch/
   Tastatur von oben nach unten. */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
    box-sizing: border-box;
}

/* ===== Logische Buehne (1280x720) =====================================
   1:1 aus SoulKeeper/css/base.css uebernommen (identische Logik, siehe
   dort fuer die ausfuehrliche Begruendung) - --stage-scale/--uw/--uh
   werden von js/buehne.js auf <html> gesetzt (1 = Buehne bei 1280x720
   real bzw. jedem anderen exakten 16:9-Viewport wie 1920x1080 - die
   bisherige Referenzoptik bleibt dadurch unveraendert). html { font-size }
   skaliert dadurch JEDES bestehende rem-Mass (Buttons, Dialoge, Panels,
   Countdown, Schriftgroessen) automatisch proportional mit.

   Unterschied zu SoulKeeper: hier gibt es kein "#story"-Sichtfenster (die
   Seite scrollt frei, siehe Kommentar unten) - #buehne (neu, siehe
   index.php) begrenzt deshalb nur die BREITE auf die Buehnenbreite und
   zentriert sie, die Hoehe bleibt automatisch (waechst mit dem Inhalt).
   --letterbox-x ist der dadurch bei Nicht-16:9-Viewports links/rechts
   sichtbare Rand (Letterboxing) - wird von den bildschirmfesten
   Elementen (.hud/.audio-controls/.btn-welt-zuruecksetzen, siehe
   css/welt.css) gebraucht, die WEITERHIN position:fixed bleiben (echtes
   Scrollen, kein #story wie bei SoulKeeper) und ihren Randabstand deshalb
   zusaetzlich um den Letterbox-Rand verschieben muessen, um an der
   Buehnenkante statt an der echten Fensterkante zu kleben. */
html {
    font-size: calc(16px * var(--stage-scale, 1));
}

:root {
    --letterbox-x: calc((100vw - 100 * var(--uw, 12.8px)) / 2);
}

#buehne {
    position: relative;
    width: calc(100 * var(--uw, 12.8px));
    margin: 0 auto;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--sky-black);
    color: var(--text);
    font-family: 'Press Start 2P', monospace;
}

/* Verhindert Mobile Safaris automatische Schriftvergrößerung ("Text Size
   Adjust"/Font-Boosting): iOS vergrößert eigenständig Textblöcke, die es
   als schwer lesbaren Fließtext einstuft, kurze Einzeiler (z.B. den
   Footer) aber nicht - dadurch wirken auf dem iPhone gleich große
   rem-Werte je nach Textblock unterschiedlich groß (siehe TODO-20260901-030).
   Mit 100% rendert jeder Text exakt in der hier per rem/--stage-scale
   festgelegten Größe, auf allen Geräten identisch. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* KEIN overflow-x auf html/body (auch nicht "clip" - hat sich als nicht
   zuverlässig genug erwiesen): jeder nicht-"visible"-Wert auf einer Achse
   von body zwingt laut CSS Overflow Spec die andere Achse dazu, sich wie
   "auto" zu verhalten - body kann dadurch zu einem eigenen, unabhängigen
   Scroll-Container werden, der bei jeder noch so kleinen (auch nur 1px)
   Rundungsdifferenz zwischen mehreren vh-basierten Berechnungen einen
   eigenen, unsichtbaren Scrollbalken reserviert und width:100%-Elementen
   dadurch Breite stiehlt. Das horizontale Klippen (gegen z.B. die breiten
   Äste der Oberwelt oder die Lava-Kachel im Höllentor) übernimmt
   stattdessen #welt-track (siehe css/welt.css) - das kann sich nie selbst
   überlaufen, seine Höhe ergibt sich exakt aus seinem eigenen Inhalt,
   die Sonderregel greift dort also nie in der Praxis. */
body {
    position: relative;
}

img, svg {
    display: block;
    max-width: 100%;
}

button {
    font-family: inherit;
}