/* ui-start.css — Startbildschirm, Anmeldeformular, Reichweite, Listen und Karten.
 * Teil der Oberflächen-Stile (bis 24.10.2026 alles in ui.css). Reihenfolge der
 * Einbindung in index.html zählt: nach ui-talents.css, vor ui-holo.css. */
/* ── Startbildschirm──
   Das gemalte Bild trägt die Stimmung, das Logo trägt den Namen, ein Knopf
   trägt den Rest. Mehr gehört hier nicht hin: Wer das Spiel öffnet, will
   spielen und nicht lesen. */
#start {
    position: fixed; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
}
#start.gone { display: none; }
#start-bg {
    position: absolute; inset: 0;
    background: #0d0a14 url('../assets/menu-bg.jpg') center/cover no-repeat;
    transform-origin: center;
    will-change: transform;
    /* Langsames Zoomen und Schwenken (Ken-Burns) über das gemalte Bild: Es lebt,
       ohne dass ein Video die Bildqualität drückt (Jens 20.10.2026). Der Zoom
       bleibt über 1, damit beim Schwenk nie ein Rand sichtbar wird. */
    animation: startDrift 20s ease-in-out infinite alternate;
}
/* 29.10.2026 (Wunsch Jens): deutlich mehr Kamerafahrt — weiterer Schwenk, stärkerer Zoom,
   leichtes Neigen. Rand-Rechnung: Verschiebung (Skala × translate) bleibt immer unter
   dem Überstand (Skala − 1) / 2, auch mit der Neigung — es wird nie ein Rand sichtbar. */
@keyframes startDrift {
    0%   { transform: scale(1.16) translate(-5%,   -3%)   rotate(-0.5deg); }
    50%  { transform: scale(1.25) translate(1%,     1%)   rotate(0.2deg); }
    100% { transform: scale(1.34) translate(5.5%,   3.5%) rotate(0.5deg); }
}
/* „Bewegung reduzieren": nur langsamer & ruhiger. */
@media (prefers-reduced-motion: reduce) {
    #start-bg { animation-duration: 80s; }
}
/* Abdunkeln, damit die Schrift steht. Ein Verlauf statt einer Fläche —
   das Bild soll unten dunkel sein, oben aber sichtbar bleiben. */
#start-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,6,14,.30) 0%,
                                        rgba(8,6,14,.55) 55%,
                                        rgba(8,6,14,.88) 100%);
}
#start-inner {
    position: relative; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 0 24px;
}
/* Logo aus zwei Bildern (29.10.2026): Planet oben, Schriftzug davor über dessen Unterkante —
   wie im alten logo.png. Maße in % der Logobreite, damit es auf jedem Schirm gleich sitzt.
   Ablauf: Planet fliegt aus Sicht des Spielers „in den Monitor“ (riesig, unscharf → klein),
   kurz danach der Schriftzug; beim Aufprall Lichtblitz und kleiner Ruck. Danach schweben
   beide versetzt, ab und zu läuft ein Glanz über die Schrift, und das Ganze treibt leicht
   gegen die Kamerafahrt des Hintergrunds (Tiefe). Zwei Ebenen je Teil: .sl-fly trägt den
   Einflug, .sl-float das Schweben — so stören sich die beiden transform nicht. */
#start-logo {
    position: relative; display: block;
    width: min(560px, 78vw); aspect-ratio: 560 / 250;
    margin: 0 auto;
    animation: slDrift 20s ease-in-out infinite alternate, slShake .35s linear 1.15s 1 both;
}
#start-logo img { display: block; width: 100%; height: auto; }
.sl-fly { position: absolute; display: block; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .75, .25, 1); }
.sl-float { display: block; position: relative; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.sl-planet { width: 34%; left: 34%; top: 0; z-index: 1; animation: slFlyPlanet .9s .05s both; }
.sl-planet .sl-float { animation-name: slFloatPlanet; animation-duration: 5.2s; animation-delay: 1s;
    filter: drop-shadow(0 8px 0 rgba(0,0,0,.35)); }
.sl-text { width: 100%; left: 0; bottom: 0; z-index: 2; animation: slFlyText .85s .45s both; }
.sl-text .sl-float { animation-name: slFloatText; animation-duration: 6.4s; animation-delay: 1.3s;
    filter: drop-shadow(0 8px 0 rgba(0,0,0,.45)); }
/* Glanzstreifen, auf die Form des Schriftzugs zugeschnitten (Maske = das Bild selbst). */
.sl-glint {
    position: absolute; inset: 0; pointer-events: none;
    -webkit-mask: url('../assets/logo-text.webp') center / 100% 100% no-repeat;
            mask: url('../assets/logo-text.webp') center / 100% 100% no-repeat;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%) no-repeat;
    background-size: 250% 100%; background-position: 150% 0;
    mix-blend-mode: screen;
    animation: slGlint 5.5s ease-in-out 2.2s infinite;
}
/* Lichtblitz beim Aufprall des Schriftzugs. */
.sl-flash {
    position: absolute; left: 50%; top: 62%; width: 70%; aspect-ratio: 1; z-index: 3;
    transform: translate(-50%, -50%) scale(.2); border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255,240,200,.85) 0%, rgba(255,170,60,.35) 35%, rgba(255,170,60,0) 70%);
    opacity: 0; mix-blend-mode: screen;
    animation: slFlash .6s ease-out 1.05s 1 both;
}
@keyframes slFlyPlanet {
    0%   { transform: translate(-10%, 40%) scale(7) rotate(-25deg); opacity: 0; filter: blur(14px); }
    25%  { opacity: 1; }
    70%  { transform: translate(0, 0) scale(.9) rotate(3deg); filter: blur(0); }
    85%  { transform: scale(1.05) rotate(-1deg); }
    100% { transform: none; opacity: 1; filter: none; }
}
@keyframes slFlyText {
    0%   { transform: translate(8%, 60%) scale(5) rotate(10deg); opacity: 0; filter: blur(14px); }
    25%  { opacity: 1; }
    68%  { transform: translate(0, 0) scale(.92) rotate(-1.5deg); filter: blur(0); }
    84%  { transform: scale(1.04) rotate(.5deg); }
    100% { transform: none; opacity: 1; filter: none; }
}
@keyframes slShake {
    0%, 100% { translate: 0 0; }
    20% { translate: -4px 3px; } 40% { translate: 4px -2px; } 60% { translate: -3px 1px; } 80% { translate: 2px 0; }
}
@keyframes slFlash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
@keyframes slFloatPlanet { from { transform: translateY(-2.5%) rotate(-2.5deg); } to { transform: translateY(2.5%) rotate(2.5deg); } }
@keyframes slFloatText   { from { transform: translateY(3%) rotate(.6deg); }    to { transform: translateY(-4%) rotate(-.6deg); } }
@keyframes slGlint { 0% { background-position: 150% 0; } 45%, 100% { background-position: -60% 0; } }
/* Gegen die Kamerafahrt (startDrift, 20 s) treiben: das Logo wirkt näher als der Hintergrund. */
@keyframes slDrift { from { transform: translate(1.5%, .8%); } to { transform: translate(-1.5%, -.8%); } }
/* Antippen während des Einflugs (startScreen.js setzt .sl-skip): sofort am Ziel. */
#start-logo.sl-skip .sl-fly, #start-logo.sl-skip .sl-flash { animation: none; opacity: 1; }
#start-logo.sl-skip .sl-flash { opacity: 0; }
#start-logo.sl-skip { animation: slDrift 20s ease-in-out infinite alternate; }
/* „Bewegung reduzieren": kein Flug, kein Schweben, kein Glanz — das Logo steht einfach da. */
@media (prefers-reduced-motion: reduce) {
    #start-logo, .sl-fly, .sl-float, .sl-glint, .sl-flash { animation: none !important; }
    .sl-flash, .sl-glint { display: none; }
}
#start-sub {
    font-size: 20px; letter-spacing: 12px; color: var(--gold);
    text-shadow: 3px 3px 0 #000; margin: -6px 0 14px 12px;
}
/* Logo als Überschrift (für Suchmaschinen), ohne eigenen Abstand. */
#start-h1 { margin: 0; line-height: 0; font-size: inherit; }
/* Ein lesbarer Satz unter dem Logo: sagt Spielern und Suchmaschinen, was das Spiel ist. */
#start-tagline {
    max-width: 520px; margin: -18px 0 10px; font-size: 15px; line-height: 1.5;
    color: var(--ink); text-shadow: 2px 2px 0 #000;
}
.mbtn {
    font: inherit; font-size: 24px; letter-spacing: 4px;
    color: #2a1c06; background: #d9a02a;
    border: 4px solid var(--ink);
    box-shadow: 0 0 0 4px #14101f, 0 7px 0 0 #14101f;
    padding: 16px 46px; cursor: pointer;
}
.mbtn:hover { background: #f0b83a; }
.mbtn:disabled { opacity: .45; cursor: progress; }   /* Server wird noch gefragt (main.js) */
.mbtn.ghost {
    font-size: 17px; letter-spacing: 3px; padding: 11px 26px;
    color: var(--ink); background: #2a2440;
    box-shadow: 0 0 0 4px #14101f, 0 5px 0 0 #14101f;
}
.mbtn.ghost:hover { color: var(--gold); background: #3a3358; }
#start-info {
    font-size: 17px; color: var(--ink); line-height: 1.7;
    text-shadow: 2px 2px 0 #000; margin-bottom: 10px;
}
#start-info b { color: var(--gold); }
/* Versionsnummer unten rechts auf dem Startbildschirm (config/version.js). */
#start-version {
    position: absolute; right: 16px; bottom: 12px;
    font-size: 13px; letter-spacing: 1px; color: #8a7f9c;
    text-shadow: 2px 2px 0 #000; pointer-events: none;
}
/* Android-App-Download unten links (Sideload-APK; nur Android + nicht in der App). */
#start-apk {
    position: absolute; left: 16px; bottom: 12px;
    font-size: 14px; letter-spacing: 1px; text-decoration: none;
    color: #9fe9ff; background: rgba(8,18,28,.8);
    border: 2px solid rgba(57,215,255,.5); border-radius: 10px;
    padding: 8px 14px;
    box-shadow: 0 0 10px rgba(57,215,255,.25);
}
#start-apk:hover { background: rgba(57,215,255,.18); color: #eafaff; }
/* Impressum · Datenschutz unten mittig. Auf schmalen Handys eine Zeile höher,
   damit es nicht mit APK-Knopf (links) und Versionsnummer (rechts) kollidiert. */
#start-legal {
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
    font-size: 13px; letter-spacing: 1px; color: #8a7f9c;
    text-shadow: 2px 2px 0 #000; white-space: nowrap;
}
#start-legal a { color: #b9aed0; text-decoration: underline; padding: 6px 4px; }
#start-legal a:hover, #start-legal a:focus-visible { color: var(--gold); }
#start-legal a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 640px) {
    #start-legal { bottom: 58px; }
}
/* Niedriger Bildschirm (Handy quer, Fund 19.10.2026): Der Inhalt ist höher als der Schirm.
   Statt oben und unten abzuschneiden (der Gast-Knopf lag unter dem Rand, die Links lagen
   über „Konto anlegen"), wird der Startbildschirm scrollbar; die Fußzeile steht unter dem
   Inhalt. Das Hintergrundbild bleibt dabei stehen. */
/* Dasselbe gilt für jeden Schirm, auf den der Inhalt nicht passt (#start.tall, gesetzt von
   startScreen.js nach Messung, 29.10.2026): Das Anmeldeformular ist ~950 px hoch — auf einem
   Laptop mit 768/800 px Höhe war oben das Logo abgeschnitten und unten lagen die Links über
   „Als Gast spielen“. */
@media (max-height: 560px) {
    #start { flex-direction: column; justify-content: flex-start; overflow-y: auto; background: #0d0a14; }
    #start-bg { position: fixed; }
    #start-inner { margin: auto; padding: 16px 24px; flex-shrink: 0; }
    #start-legal, #start-version, #start-apk { position: relative; left: auto; right: auto; bottom: auto;
        transform: none; margin: 4px auto 10px; white-space: normal; text-align: center; flex-shrink: 0; }
}
#start.tall { flex-direction: column; justify-content: flex-start; overflow-y: auto; background: #0d0a14; }
#start.tall #start-bg { position: fixed; }
#start.tall #start-inner { margin: auto; padding: 16px 24px; flex-shrink: 0; }
#start.tall #start-legal, #start.tall #start-version, #start.tall #start-apk { position: relative; left: auto; right: auto; bottom: auto;
    transform: none; margin: 4px auto 10px; white-space: normal; text-align: center; flex-shrink: 0; }

/* ── Anmeldeformular (ui/authForm.js) — Startbildschirm und Konto-Fenster ──
   Vorher standen diese Maße als Inline-Stile zweimal in app.js (16.10.2026). */
.auth-form { display: flex; flex-direction: column; gap: 8px; }
.auth-start { width: min(340px, 100%); margin: 16px auto 0; text-align: left; }
.auth-start .field {
    width: 100%; box-sizing: border-box; padding: 11px 12px; font-size: 14px;
    background: rgba(10,12,18,.82); color: #e8eef5;
    border: 1px solid #3a4250; border-radius: 8px;
}
.auth-start .hint { text-shadow: 1px 1px 0 #000; }
.auth-status { min-height: 18px; margin: 6px 0; }
.auth-note { font-size: 13px; line-height: 1.5; }
.auth-guest-note { text-align: center; }
.guest-offer { max-height: calc(100vh - 40px); overflow-y: auto; }
.guest-offer { max-width: 520px; }
.guest-offer .ask-text { margin-bottom: 10px; flex: none; overflow: visible; }   /* ganzer Text sichtbar; gescrollt wird das Fenster */
.guest-offer .guest-later { width: 100%; margin-top: 10px; }
.auth-link {
    align-self: flex-start; padding: 6px 0; background: none; border: none;
    font-size: 13px; color: #9fb4d8; text-decoration: underline; cursor: pointer;
}
.auth-start .auth-link { align-self: center; color: #c9d6ea; text-shadow: 1px 1px 0 #000; }
.auth-link:hover, .auth-link:focus-visible { color: var(--gold); }
.auth-form .field:focus-visible, .auth-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mail-panel { margin: 0 0 10px; }
.mail-panel > .auth-link { display: block; }
.mail-panel .auth-form { margin: 6px 0; }
.mail-line b { color: var(--gold); word-break: break-all; }
.mail-warn { color: #ffcf7a; }
#start-mailnote { margin-top: 8px; font-size: 15px; color: #ffcf7a; }
.legal-links { margin: 12px 0 0; font-size: 12px; }
.legal-links a { color: #9fb4d8; }

/* ── Reichweiten-Hinweis──
   Erscheint, wenn die Figur vor etwas steht. Über der Symbolleiste, mittig —
   dort schaut man ohnehin hin, weil dort die Figur steht. */
#prompt {
    position: fixed; left: 50%; bottom: 190px; transform: translateX(-50%);
    z-index: 8; display: none;
    background: rgba(8,18,28,.92);
    border: 2px solid rgba(57,215,255,.55); border-radius: 10px;
    box-shadow: 0 0 16px rgba(57,215,255,.30), inset 0 0 12px rgba(57,215,255,.08);
    padding: 10px 18px; font-size: 18px; letter-spacing: 1px;
    text-align: center; white-space: nowrap; color: #dff4ff;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
}
#prompt.on { display: block; }
#prompt b { color: #9fe9ff; text-shadow: 0 0 10px rgba(57,215,255,.55); }
#prompt span { display: block; font-size: 14px; color: #9fb4c4; margin-top: 3px; }
/* Über dem jeweiligen Objekt schwebend: left/top werden je Bild in app.js
   gesetzt (Bildschirmposition des Objekts); die Blase sitzt mit ihrer
   Unterspitze knapp darüber. */
#prompt.float { left: auto; bottom: auto; transform: translate(-50%, -100%); }
#prompt.float::after {
    content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
    width: 0; height: 0; border: 8px solid transparent;
    border-top-color: rgba(57,215,255,.55);
}

#hint-move {
    position: fixed; left: 50%; bottom: 152px; transform: translateX(-50%);
    z-index: 6; font-size: 15px; color: var(--dim);
    text-shadow: 2px 2px 0 #000; opacity: .9;
    transition: opacity .6s;
}
#hint-move.gone { opacity: 0; pointer-events: none; }

/* ── Listen und Karten in Fenstern──
   Diese Klassen (.card, .row, .btn …) stammen aus der ersten Fassung der
   Oberfläche. Sie sind geblieben, weil die Fensterinhalte sie benutzen — nur
   sahen sie nach der Umstellung auf Pixelrahmen aus wie unformatierter Text.
   Hier bekommen sie dasselbe Aussehen wie der Rest: gestufte Kanten, dicke
   Rahmen, nichts unter 15 px. */
.card {
    background: #221c38; border: 4px solid #14101f;
    box-shadow: inset 0 0 0 4px #4a4266;
    padding: 16px 18px; margin-bottom: 18px;
}
.card-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; margin-bottom: 12px;
    padding-bottom: 10px; border-bottom: 4px dotted #4a3520;
}
.card-title { font-size: 21px; letter-spacing: 2px; color: var(--gold); }
.card-sub   { font-size: 15px; color: var(--dim); }
.hint       { font-size: 15px; color: var(--dim); line-height: 1.6; }

.rows { display: flex; flex-direction: column; }
.row {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 12px 0; border-bottom: 4px dotted #3a3358; font-size: 17px;
}
.row:last-child { border-bottom: none; }
.lbl { font-size: 17px; }
.val { font-size: 17px; color: var(--gold); }

.btn {
    font: inherit; font-size: 17px; letter-spacing: 1px;
    color: #2a1c06; background: #d9a02a;
    border: 4px solid var(--ink); box-shadow: 0 4px 0 0 #14101f;
    padding: 9px 16px; cursor: pointer; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #f0b83a; }
.btn:disabled { background: #4a4266; color: #9a93b5; cursor: default; box-shadow: none; }
/* Knopf wartet auf den Server: sofort sichtbar gedrückt, damit ein Tipp nie „ins
   Leere" geht (commands.js setzt .busy). */
.btn.busy, .pbtn.busy { cursor: progress; animation: btn-busy .8s ease-in-out infinite alternate; }
@keyframes btn-busy { from { filter: brightness(1); } to { filter: brightness(1.35); } }
.btn.sm { font-size: 15px; padding: 7px 12px; }
.btn.ghost { color: var(--ink); background: #37305c; }
.btn.ghost:hover:not(:disabled) { background: #4a4180; color: var(--gold); }
.btn.gold { background: #d9a02a; }
/* Gesperrt: grau wie jeder gesperrte Knopf — sonst stand graue Schrift auf Gold (unlesbar). */
.btn.gold:disabled { background: #4a4266; color: #9a93b5; }
/* Warnfarbe für Knöpfe, die etwas UNWIEDERBRINGLICHES tun — Spielstand
   löschen, neu beginnen. Golden heisst im ganzen Spiel „das willst du";
   der gefährlichste Knopf darf nicht aussehen wie jeder andere (09.08.2026).
   Wird über den fünften Parameter von `askConfirm` gesetzt. */
.btn.danger { background: #b8382c; color: #ffe9e6; }
.btn.danger:hover:not(:disabled) { background: #d14436; }


/* Handy quer (06.11.2026, Jens: „ohne scrollen"): Logo links, Text und Knopf rechts daneben.
   Die Logogröße richtet sich nach der Höhe, damit alles auf einen Schirm passt. Passt das
   Anmeldeformular trotzdem nicht, greift weiter das Scrollen von oben. */
@media (orientation: landscape) and (max-height: 560px) {
    #start-inner {
        display: grid; grid-template-columns: auto minmax(0, 340px); grid-template-rows: auto auto auto auto;
        column-gap: 28px; row-gap: 8px; align-items: center; justify-items: center;
        padding: 10px 20px;
    }
    #start-h1 { grid-column: 1; grid-row: 1 / span 4; }
    #start-logo { width: min(48vw, calc((100vh - 40px) * 560 / 250 * .9)); }
    #start-sub { grid-column: 2; margin: 0 0 0 12px; font-size: 18px; letter-spacing: 9px; }
    #start-tagline { grid-column: 2; margin: 0; font-size: 13px; line-height: 1.45; }
    #start-play { grid-column: 2; padding: 12px 34px; font-size: 20px; }
    #start-info { grid-column: 2; margin: 0; font-size: 14px; line-height: 1.5; }
    #start-info:empty { display: none; }
}