/* ===== Einladung - Dialog-System (1:1 aus SoulKeeper/css/dialog.css) ===
   Byte-identisch zum Original übernommen (Vorgabe: exakt dieselbe Box/
   Pixel-Schrift wie im Spiel). Diese Datei bleibt dadurch unverändert und
   1:1 vergleichbar mit dem Original - Anpassungen an das freie Scrollen
   dieser Seite (position:fixed statt absolute) sowie eine Korrektur der
   Mobile-Breite (siehe css/verlorene-seele.css: #dialog-box im
   @media(max-width:560px)-Block) stehen bewusst NICHT hier, sondern
   additiv in css/verlorene-seele.css. Grund fuer Letzteres: SoulKeeper
   berechnet Prozentwerte hier immer gegenueber #story (== exakt
   100 * var(--uw)) - diese Seite hat aber kein #story-Sichtfenster, die
   Box haengt (siehe js/verlorene-seele.js) entweder an position:fixed
   oder direkt an <body>, beide ohne Breitenbegrenzung auf die Buehne.

   ===== SoulKeeper - Dialog-System =====================================
   Wiederverwendbare Story-Dialogbox (siehe js/dialog.js). Nicht an die
   Intro-Szene gebunden - dieselbe Box/Klasse kann später für Level2/3-
   und Boss-Story-Sequenzen wiederverwendet werden, nur mit anderen
   Textseiten. */

.dialog-box {
    position: absolute;
    left: 50%;
    bottom: clamp(1.5rem, calc(4 * var(--uh)), 3rem);
    transform: translate(-50%, 0);
    width: min(82%, calc(70.3125 * var(--uw)));
    min-height: calc(18.0556 * var(--uh));
    z-index: 5;
    cursor: pointer;

    background: rgba(8, 6, 14, 0.85);
    border: 2px solid var(--accent-bright);
    border-radius: 6px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.75),
        0 0 35px rgba(0, 0, 0, 0.5),
        inset 0 0 25px rgba(0, 0, 0, 0.5);
    padding: 1.5rem 2rem 1.1rem;

    transition: opacity 0.6s ease, transform 0.6s ease, border-color var(--theme-transition);
}

.dialog-box--betritt {
    animation: dialog-eintritt 0.7s ease;
}

@keyframes dialog-eintritt {
    from { transform: translate(-50%, 60px); opacity: 0; }
    to   { transform: translate(-50%, 0); opacity: 1; }
}

.dialog-box--verlaesst {
    transform: translate(-50%, 140%);
    opacity: 0;
}

.dialog-text {
    margin: 0;
    /* Deutlich kleiner als bei VT323 nötig - Press Start 2P hat pro Zeichen
       spürbar breitere Glyphen, bei der alten Größe wäre längerer Story-Text
       weit über die Boxbreite hinausgelaufen. */
    font-size: clamp(0.6rem, calc(1.7 * var(--uw)), 0.85rem);
    line-height: 1.7;
    color: var(--text);
    white-space: pre-line;
    /* Platz für maximal 3 Zeilen - exakt 3 * line-height (1.7em), damit die
       Box bei 3-zeiligem Text nicht wächst (4.5em war zu knapp: 3 Zeilen
       brauchen real 5.1em, die Box wurde dadurch bei dreizeiligem Text
       sichtbar größer als bei zweizeiligem). */
    min-height: 5.1em;
}

.dialog-hinweis {
    margin: 0.4rem 0 0;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-align: right;
    color: var(--accent-bright);
    animation: dialog-hinweis-puls 1.3s ease-in-out infinite;
}

/* Bewusst visibility:hidden statt des sonst im Projekt fast überall
   verwendeten display:none - der Pfeil soll seinen Platz im Layout
   behalten, damit der Dialogtext beim Ein-/Ausblenden nicht nachträglich
   seine Höhe ändert/springt. Bugfix: die generische html .hidden{display:
   none} (siehe css/base.css) deklariert zwar KEIN visibility, wohl aber
   display - und gewinnt (0,1,1 vs. 0,2,0 zählt hier nicht, weil display
   dort komplett unkonkurriert war: .dialog-hinweis.hidden setzte bisher
   NUR visibility, nicht display). Der Pfeil wurde dadurch trotzdem komplett
   aus dem Layout entfernt (display:none gewinnt immer gegen jedes
   visibility), die Box sprang beim Fertig-Tippen doch wieder nach oben.
   display:block hier explizit zurückgesetzt behebt das (0,2,0 schlägt
   jetzt echt gegen 0,1,1, weil beide Regeln dieselbe Eigenschaft setzen). */
.dialog-hinweis.hidden {
    display: block;
    visibility: hidden;
}

@keyframes dialog-hinweis-puls {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .dialog-box--betritt {
        animation: none;
    }
    .dialog-hinweis {
        animation: none;
        opacity: 0.8;
    }
}

@media (max-width: 560px) {
    .dialog-box {
        width: 92%;
        padding: 1.1rem 1.3rem 0.9rem;
    }
}