/**
 * Login-/Startseite — login.php und neu.php
 *
 * Diese beiden Seiten sind die einzigen, die ein nicht eingeloggter Besucher zu
 * sehen bekommt (index.php -> spiel.php -> header.inc.php -> login.php), also
 * gleichzeitig Anmeldeformular UND Werbeseite.
 *
 * Alles ist unter `body.login-page` gescopet und rein TOKEN-basiert
 * (css/antamar_tokens.css, pro Skin via :root ueberschrieben). Dadurch faerbt
 * sich die Seite in allen fuenf Skins automatisch mit — dasselbe Prinzip, mit
 * dem .ui-panel (antamarGeneralv95.css) die frueher pro Skin kopierten
 * Bank-/Alchimie-Karten abgeloest hat. Vorher hatten die Textbloecke NUR im
 * Bombast-Skin eine Kartenflaeche (hart auf width:780px), in antamar/simple war
 * es nackter Fliesstext.
 *
 * Diese Datei wird NACH dem Skin-Stylesheet geladen (login.php/neu.php haengen
 * sie per css_link() hinter html_head_css.inc.php ein) — sie gewinnt also
 * Gleichstaende in der Kaskade.
 *
 * KEIN JavaScript: beide Seiten laden bewusst kein Script. Alles hier muss ohne
 * JS funktionieren (Grid statt Reorder-Script, <details> statt Toggle-Handler).
 */

/* ===========================================================================
   0. Seiten-Rahmen
   =========================================================================== */

/* antamarGeneralv95.css reserviert unter 770px per `body { padding: ... }` mit
   !important Platz fuer die Mobile-Top-/Bottom-Bar. login.php bindet
   html_head.inc.php aber gar nicht ein und rendert diese Bars nie — es blieben
   58px oben und 81px leer. Hier zurueckgeholt; !important ist noetig, weil die
   Ursprungsregel selbst !important traegt. */
@media (max-width: 770px) {
    body.login-page {
        padding-top: var(--safe-top, 0px) !important;
        padding-bottom: var(--safe-bottom, 0px) !important;
    }
}

.login-page #gameInnerBox {
    max-width: 1180px;
    margin: 0 auto;
}

/* Die Seite ist eine einzige Spalte aus Sektionen; alles darin darf nie breiter
   werden als der Viewport (frueher: scrollWidth 396 bei 390px Viewport). */
.login-page #gameContent {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Der Hell-Skin zentriert den gesamten Inhaltsbereich
   (css/antamar/antamarv78.css: div#gameContent { text-align: center }), die
   anderen Skins nicht. Ohne explizite Ansage saehen Formularlabels und
   Stichpunkte je nach Skin anders aus. Fliesstext und Formulare also links,
   nur Kopf, Kennzahlen, Meldungen und Fusszeile zentriert. */
.login-card,
.login-pitch,
.login-page .ui-panel {
    text-align: left;
}
.login-hero,
.login-footer,
.login-message {
    text-align: center;
}

.login-page img {
    max-width: 100%;
    height: auto;
}

/* ===========================================================================
   1. Hero — Logo, Titel, Claim
   =========================================================================== */

.login-hero {
    text-align: center;
    margin-bottom: var(--space-lg, 1.5rem);
}

/* `.login-page` mitgeschrieben, weil `.login-page img` oben (0,1,1) sonst die
   Spezifitaet von `.login-logo` (0,1,0) schlaegt und das Logo in voller
   Containerbreite rendert. */
.login-page .login-logo {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto var(--space-sm, 0.5rem);
}

/* Der Schriftzug steckt bereits im Logo — die Ueberschrift ist fuer
   Screenreader und Suchmaschinen da, nicht fuer das Auge. */
.login-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.login-claim {
    margin: 0;
    font-size: 1.15em;
    line-height: 1.35;
    color: var(--mobile-text-secondary);
}

/* ===========================================================================
   2. Grid — Pitch und Login-Card
   Die DOM-Reihenfolge ist die MOBILE Reihenfolge: erst die Login-Card (die
   grosse Mehrheit der Aufrufe sind wiederkehrende Spieler), dann der Pitch.
   Ab 900px dreht das Grid die Spalten, damit der Pitch links und das Formular
   rechts steht — ohne zweites Markup und ohne JS.
   =========================================================================== */

.login-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md, 1rem);
    /* start, nicht stretch: seit das Wissens-Snippet in der Pitch-Karte steckt,
       ist diese deutlich hoeher als die Login-Karte. Mit stretch wuerde die
       Login-Karte mitwachsen und unter "Passwort vergessen?" ein Loch lassen. */
    align-items: start;
    margin-bottom: var(--space-lg, 1.5rem);
}

@media (min-width: 900px) {
    .login-grid {
        grid-template-columns: 1.05fr 0.95fr;
        gap: var(--space-xl, 2rem);
    }
    .login-grid > .login-pitch { grid-column: 1; grid-row: 1; }
    .login-grid > .login-card  { grid-column: 2; grid-row: 1; }
}

/* ===========================================================================
   3. Login-Card
   =========================================================================== */

.login-card {
    box-sizing: border-box;
    background-color: var(--mobile-body-bg);
    background-image: linear-gradient(var(--mobile-surface-2), var(--mobile-surface-2));
    border: 1px solid var(--mobile-border-soft);
    border-radius: 6px;
    padding: var(--space-md, 1rem);
}

.login-card h2 {
    margin: 0 0 var(--space-sm, 0.6rem);
    padding-bottom: var(--space-xs, 0.3rem);
    border-bottom: 1px solid var(--mobile-border-very-soft);
    font-size: 1.15em;
}

.login-field {
    margin-bottom: var(--space-sm, 0.6rem);
}

.login-field label {
    display: block;
    margin-bottom: 0.2em;
    font-size: 0.9em;
    color: var(--mobile-text-secondary);
}

/* Eigene Input-Regel statt der globalen `.input` (die haengt auf 150px fest). */
.login-page input[type="text"],
.login-page input[type="password"],
.login-page input[type="email"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: var(--touch-target-min, 44px);
    padding: 0.4em 0.6em;
    background: var(--mobile-surface);
    border: 1px solid var(--mobile-border);
    border-radius: 4px;
    color: var(--mobile-text);
    font-size: 1em;
    font-family: inherit;
}

/* "Angemeldet bleiben": der Bombast-Skin staucht #autologin auf height:0.4em —
   auf dem Handy war die Checkbox dadurch ein 6px-Streifen. */
.login-check {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-height: var(--touch-target-min, 44px);
    margin-bottom: var(--space-sm, 0.6rem);
}

.login-page input#autologin,
.login-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0;
    flex: 0 0 auto;
}

.login-check label {
    margin: 0;
    cursor: pointer;
}

/* --- Buttons -------------------------------------------------------------
   Bewusst NICHT die globale .button-Klasse: die setzt im Bombast-Skin
   `background-color: darkred` und eine feste Kleinschreibung, gegen die man
   pro Skin anrennen muesste. Das Accent-Paar unten ist dagegen in ALLEN fuenf
   Skins als lesbare Kombination definiert (accent-strong = Flaeche,
   accent-contrast = Text). */

.login-btn,
.login-page a.login-btn,
.login-page a.login-btn:link,
.login-page a.login-btn:visited {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--touch-target-min, 44px);
    padding: 0.5em 1em;
    border-radius: 6px;
    border: 1px solid var(--mobile-border);
    background: var(--mobile-chip-bg);
    color: var(--mobile-text);
    font-family: inherit;
    font-size: 1.05em;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.login-btn--primary,
.login-page a.login-btn--primary,
.login-page a.login-btn--primary:link,
.login-page a.login-btn--primary:visited {
    background: var(--mobile-accent-strong);
    border-color: var(--mobile-accent-strong);
    color: var(--mobile-accent-contrast);
    /* Der Skin-Body-Textshadow wuerde auf der hellen Accent-Flaeche matschen. */
    text-shadow: none;
}

.login-btn:hover,
.login-page a.login-btn:hover {
    background: var(--mobile-surface-2-hover);
}

.login-btn--primary:hover,
.login-page a.login-btn--primary:hover {
    background: var(--mobile-accent);
    border-color: var(--mobile-accent);
    color: var(--mobile-accent-contrast);
}

/* Trenner zwischen Passwort-Login und Google */
.login-or {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin: var(--space-sm, 0.6rem) 0;
    color: var(--mobile-text-muted);
    font-size: 0.85em;
}
.login-or::before,
.login-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--mobile-border-very-soft);
}

/* Google-Button: bis hierher ein nacktes 350x80-PNG mit inline height:2em und
   einer Klasse ohne jede Regel. Jetzt eine echte Button-Flaeche. */
.login-google {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--touch-target-min, 44px);
    box-sizing: border-box;
    padding: 0.3em;
    border: 1px solid var(--mobile-border-soft);
    border-radius: 6px;
    background: var(--mobile-chip-bg);
}
.login-google:hover {
    background: var(--mobile-surface-2-hover);
}
.login-google img {
    height: 2em;
    width: auto;
    display: block;
}

.login-forgot {
    margin: var(--space-sm, 0.6rem) 0 0;
    text-align: center;
    font-size: 0.9em;
}

/* ===========================================================================
   4. Pitch — "Neu hier?" mit dem Haupt-CTA
   =========================================================================== */

.login-pitch {
    box-sizing: border-box;
    /* flow-root: das Snippet-Bild im Wissen (div.introImg) ist gefloatet und
       raegte ohne Float-Containment unten aus der Karte heraus. */
    display: flow-root;
    padding: var(--space-md, 1rem);
    border: 1px solid var(--mobile-border-soft);
    border-radius: 6px;
    background-color: var(--mobile-body-bg);
    background-image: linear-gradient(var(--mobile-surface-2), var(--mobile-surface-2));
}

.login-pitch h2 {
    margin: 0 0 var(--space-sm, 0.6rem);
    font-size: 1.3em;
}

.login-usps {
    margin: 0 0 var(--space-md, 1rem);
    padding: 0;
    list-style: none;
}

.login-usps li {
    position: relative;
    margin-bottom: 0.5em;
    padding-left: 1.4em;
    line-height: 1.4;
}

.login-usps li::before {
    content: "\203A";           /* › — bewusst ein Zeichen, kein Bild */
    position: absolute;
    left: 0.3em;
    top: -0.05em;
    color: var(--mobile-accent);
    font-weight: 700;
    font-size: 1.2em;
}

/* --- Wissen des Tages ----------------------------------------------------
   Sitzt unter dem CTA in derselben Karte, durch eine Trennlinie abgesetzt.
   Der frueher hier stehende Deko-Magier ist dafuer entfallen.

   ROBUSTHEIT: die 25 Snippets in includes/antamar_wissen.inc.php schwanken
   zwischen 211 und 814 Zeichen, und eines (85) hat GAR KEIN Bild. Deshalb
   bewusst kein min-height und kein Raster, das ein Bild voraussetzt — das
   float:left am .introImg traegt beide Faelle von selbst. */

.login-wissen {
    margin-top: var(--space-md, 1rem);
    padding-top: var(--space-md, 1rem);
    border-top: 1px solid var(--mobile-border-very-soft);
    font-size: 0.95em;
}

.login-wissen h3 {
    margin: 0 0 var(--space-sm, 0.6rem);
    font-size: 1em;
    color: var(--mobile-text-secondary);
}

/* Kennzeichnet, dass sich der Inhalt taeglich aendert — sonst liest sich das
   Snippet wie ein zufaelliger Textblock. */
.login-wissen-chip {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0.1em 0.6em;
    border: 1px solid var(--mobile-border-soft);
    border-radius: 999px;
    background: var(--mobile-chip-bg);
    color: var(--mobile-text-muted);
    font-size: 0.75em;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
}

/* In der schmaleren Kartenspalte ist der allgemeine 170px-Deckel zu gross.
   Nur hier verengt — neu.php nutzt .introImg fuer sein Kontinente-Bild. */
.login-wissen .introImg img {
    max-width: 120px;
}

/* ===========================================================================
   5. Kennzahlen + wer ist online
   =========================================================================== */

/* .ui-stats kollabiert per auto-fit/minmax(140px) — bei drei kurzen Werten
   (2006, 8.715, 1) bricht das auf schmalen Displays in 2+1 um und sieht aus
   wie ein Fehler. Die drei Kennzahlen passen problemlos nebeneinander. */
/* auto-fit statt fester Spaltenzahl: die Heldenzahl faellt weg, wenn sie nicht
   ermittelt werden konnte — dann sollen die zwei verbleibenden Kacheln die
   Breite fuellen statt eine Luecke zu lassen. */
.login-stats {
    grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
    margin-bottom: var(--space-sm, 0.6rem);
}

/* .ui-stat-value ist fuer kurze Spielwerte gebaut (nowrap + ellipsis). Hier
   stehen Zahlen, die je nach Serverstand laenger werden — eine stillschweigend
   auf "55.0…" gekuerzte Kennzahl waere schlimmer als ein Umbruch. */
.login-stats .ui-stat-value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Zweizeilige Label ("Helden erschaffen") wuerden die Zahlen sonst
   unterschiedlich hoch setzen; so stehen sie ueber alle Kacheln auf einer
   Linie, egal wie lang die Beschriftung umbricht. */
.login-stats .ui-stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.login-online {
    margin: 0 0 var(--space-lg, 1.5rem);
    font-size: 0.9em;
}

/* Kein display:flex auf dem <summary> — das entfernt in Blink/WebKit den
   Aufklapp-Marker, und ohne ihn sieht die Zeile aus wie toter Text. */
.login-online > summary {
    cursor: pointer;
    color: var(--mobile-text-secondary);
    padding: 0.6em 0;
}

.login-online .login-userlist {
    margin-top: 0.4em;
    line-height: 1.4;
    color: var(--mobile-text-muted);
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ===========================================================================
   6. Inhaltssektionen ("Was ist Antamar?", "Wissen des Tages")
   Nutzen .ui-panel aus antamarGeneralv95.css; hier nur die Feinheiten.
   =========================================================================== */

/* flow-root: die Snippet-Bilder im "Wissen des Tages" (div.introImg) sind
   gefloatet — ohne Float-Containment ragen sie unten aus der Karte heraus. */
.login-page .ui-panel {
    display: flow-root;
}

.login-page .ui-panel > h2 {
    margin: 0 0 var(--space-sm, 0.6rem);
    padding-bottom: var(--space-xs, 0.3rem);
    border-bottom: 1px solid var(--mobile-border-very-soft);
    font-size: 1.3em;
}

/* Lesebreite: die Karte laeuft auf dem Desktop ueber die volle Containerbreite,
   der Fliesstext darin kam damit auf ~1146px = rund 143 Zeichen pro Zeile
   (angenehm sind 45-75). Nur die Absaetze begrenzen — die Weltkarte
   (.login-karte) soll weiterhin die ganze Breite nutzen. */
.login-page .ui-panel p {
    line-height: 1.5;
    max-width: 65ch;
}

/* --- "Was ist Antamar?" (login.php): Text links, Weltkarte rechts ---------
   Der Text braucht Lesebreite (~65ch = 638px), die Karte ist aber 1180px breit.
   Stuende die Weltkarte weiter als Band unter dem Text, blieben rechts daneben
   510px Totraum. In der zweiten Spalte fuellt sie ihn — und die Karte wird von
   795px auf gut die Haelfte kuerzer. */
.login-ueber-grid {
    display: grid;
    gap: var(--space-lg, 1.5rem);
}

/* Den vertikalen Eigenrand der Karte raus — im Raster uebernimmt der gap den
   Abstand, sonst addieren sich beide zu einer sichtbaren Luecke. Bewusst als
   Langform: die Full-Bleed-Regel unter 770px setzt margin-left/-right negativ,
   die darf eine margin-Kurzform hier nicht mitloeschen. */
.login-ueber .login-karte {
    margin-top: 0;
    margin-bottom: 0;
}

/* Kein doppelter Abstand ueber dem ersten Absatz — den Abstand zur Ueberschrift
   bzw. zur Weltkarte macht bereits der Raster-gap. */
.login-ueber-text > p:first-child {
    margin-top: 0;
}

@media (min-width: 900px) {
    /* Anteilig statt fester Bildspalte: mit einem starren 478px-Wert blieben bei
       900px Viewport nur 316px fuer den Text uebrig (39 Zeichen je Zeile). So
       schrumpfen beide Spalten gemeinsam und der Text bleibt ueber 55 Zeichen. */
    .login-ueber-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        align-items: start;
    }
    /* In der schmaleren Spalte liegt die natuerliche Hoehe unter dem 300px-Deckel
       — der greift also nicht mehr und die Karte steht unbeschnitten. */
    .login-ueber .login-karte {
        max-height: none;
    }
}

/* Einspaltig: Ueberschrift -> Bild -> Text. Das Bild bleibt der Anker unter der
   Headline, statt hinter einer Textwand zu verschwinden. order statt DOM-Position,
   damit der Text im Quelltext vorn bleibt (Vorlesereihenfolge). */
@media (max-width: 899px) {
    .login-ueber .login-karte {
        order: -1;
    }
}

/* Die Weltkarte ist 1024x608 und wuerde in voller Hoehe ueber 600px des
   Leseflusses fressen. Als Banner beschnitten bleibt sie ein Blickfang, ohne
   den Text auseinanderzureissen. */
.login-karte {
    display: block;
    width: 100%;
    max-height: 300px;
    margin: var(--space-md, 1rem) 0;
    border-radius: 4px;
    object-fit: cover;
    object-position: 50% 45%;
}

/* Reine Textkarten (neu.php): kein grosses Bild da, das eine zweite Spalte
   tragen koennte — also die Karte selbst auf Lesebreite bringen, statt den Text
   in einer zu breiten Flaeche haengen zu lassen. */
/* Zwei reine Textkarten nebeneinander (neu.php). Einzeln und volle Breite waeren
   sie mit ~143 Zeichen je Zeile unlesbar, einzeln und schmal gesetzt liessen sie
   rechts und links Totraum. Nebeneinander loesen sie beides und halbieren die
   Seitenlaenge. */
.login-lese-grid {
    display: grid;
    gap: var(--space-md, 1rem);
}

@media (min-width: 900px) {
    .login-lese-grid {
        grid-template-columns: 1fr 1fr;
        /* start, damit die kuerzere Karte nicht auf die Hoehe der laengeren
           gestreckt wird und unten leer dasteht. */
        align-items: start;
    }
}

/* Der Eigenrand der Karten wuerde sich zum Raster-Abstand addieren. */
.login-lese-grid > .ui-panel {
    margin-bottom: 0;
}

/* Das Snippet-Bild im "Wissen des Tages" haengt global auf max-width:12% —
   auf einem 390px-Viewport waren das 59x40px, also faktisch unsichtbar. Ein
   fester Deckel statt Prozent: sonst skaliert es mit der Panelbreite mit und
   wird auf dem Desktop zum 340px-Kloetzchen. */
.login-page .introImg img {
    max-width: 170px;
}

@media (max-width: 560px) {
    .login-page .introImg img {
        float: none;
        display: block;
        max-width: 45%;
        margin: 0 auto 0.6em;
        padding-right: 0;
    }
    /* Explizit mitgeschrieben: sonst haengt die Groesse in der Wissens-Karte
       allein an der Quellreihenfolge (diese Regel steht spaeter als
       .login-wissen .introImg img und hat dieselbe Spezifitaet). */
    .login-wissen .introImg img {
        max-width: 150px;
    }
}

/* ===========================================================================
   7. Footer
   =========================================================================== */

.login-footer {
    margin-top: var(--space-lg, 1.5rem);
    padding-top: var(--space-md, 1rem);
    border-top: 1px solid var(--mobile-border-very-soft);
    text-align: center;
    font-size: 0.85em;
    color: var(--mobile-text-muted);
}

.login-footer p {
    margin: 0.4em 0;
}

.login-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4em 1em;
    margin: 0 0 var(--space-sm, 0.6rem);
    padding: 0;
    list-style: none;
}

.login-footer-links a {
    display: inline-block;
    padding: 0.3em 0;
}

/* Skin-Wahl: drei Links statt des <select>, der bisher mitten im Formular
   stand und dort das breiteste Bedienelement der Seite war. login.php mappt
   $_REQUEST['design'] bereits auf $_POST['chose_design'], das Cookie setzt
   header.inc.php — es braucht also keinerlei neue Mechanik. */
.login-skins {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4em;
    margin: var(--space-sm, 0.6rem) 0;
}

.login-skins .login-skin-label {
    color: var(--mobile-text-muted);
}

.login-page a.login-skin,
.login-page a.login-skin:link,
.login-page a.login-skin:visited {
    display: inline-block;
    padding: 0.35em 0.8em;
    border: 1px solid var(--mobile-border-soft);
    border-radius: 999px;
    background: var(--mobile-chip-bg);
    color: var(--mobile-text-secondary);
    text-decoration: none;
    line-height: 1.3;
}

.login-page a.login-skin[aria-current="true"] {
    background: var(--mobile-accent-strong);
    border-color: var(--mobile-accent-strong);
    color: var(--mobile-accent-contrast);
    text-shadow: none;
    font-weight: 600;
}

/* ===========================================================================
   8. Meldungszweige (gesperrt, fehlender Benutzername, falsches Passwort)
   =========================================================================== */

.login-message {
    box-sizing: border-box;
    max-width: 30em;
    margin: var(--space-lg, 1.5rem) auto;
    padding: var(--space-md, 1rem);
    border: 1px solid var(--mobile-border-soft);
    border-radius: 6px;
    background-color: var(--mobile-body-bg);
    background-image: linear-gradient(var(--mobile-surface-2), var(--mobile-surface-2));
    text-align: center;
}

.login-message p {
    margin-top: 0;
}

.login-message .login-btn {
    margin-top: var(--space-sm, 0.6rem);
}

/* ===========================================================================
   9. Schmale Viewports
   =========================================================================== */

@media (max-width: 770px) {
    /* Kompakter Kopf: die Login-Card soll auf einem 390er-Display komplett in
       den ersten Screen passen und der "Held erschaffen"-CTA direkt darunter
       folgen — nicht erst nach einem vollen zweiten Screen. */
    .login-page .login-logo {
        max-width: 205px;
    }
    .login-claim {
        font-size: 1.05em;
    }
    .login-hero {
        margin-bottom: var(--space-sm, 0.6rem);
    }
    .login-grid {
        gap: var(--space-sm, 0.6rem);
    }
    /* Der frueher hier stehende Full-Bleed der Weltkarte (negative Raender bis an
       die Kartenkante) ist entfallen: er hat nie gegriffen, weil `.login-page img
       { max-width: 100% }` weiter oben die hoehere Spezifitaet (0,1,1) hat als sein
       `max-width: none` (0,1,0) — dieselbe Falle wie beim Logo. Die Weltkarte sitzt
       jetzt bewusst innerhalb des Kartenpolsters, was neben dem uebrigen
       Karteninhalt ohnehin ruhiger wirkt. */
}