/**
 * walk.css - die Bedienung des Begehen-Modus.
 *
 * Aus `fps.css` herausgeloest: dort steht, wie man sich bewegt und was man
 * sieht (Visierpunkt, Minimap, Position), hier, womit man WERKZEUGE bedient.
 * Zwei Gegenstaende - und fps.css stand nach dem Anhaengen bei 239 Zeilen,
 * also dicht am Limit (§182.7: sofort teilen, nicht beim naechsten Eingriff).
 *
 * ⚠️ NACH fps.css einbinden. Bei gleicher Spezifitaet gewinnt die spaetere
 * Regel (§136.4).
 *
 * ⚠️ SEIT §190 STEHEN KOPF UND TASTEN OBEN, in `#fps-top-hint`. Vorher trug
 * der obere Banner einen festen Satz und diese Leiste dieselbe Auskunft noch
 * einmal - gemeldet als "doppelt oben und unten". Unten blieb nur noch der
 * Rucksprungknopf, also ein BEDIENelement statt einer Auskunft.
 */

/* Unten mittig - nur noch der Rucksprung. */
#walk-leiste {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 201;
    display: flex;
    align-items: center;
    gap: 7px;
    user-select: none;
}

/* ⚠️ `pointer-events: auto` NUR hier, nicht auf der Leiste: sie liegt ueber
   dem 3D-Bild, und alles darin faengt sonst Klicks ab, die dem Messen
   gehoeren. Bei gebundener Maus (PointerLock) erreicht ein Klick ohnehin
   kein HTML-Element - deshalb traegt der Knopf die Taste Pos1 sichtbar; in
   der Pause, wo die Maus frei ist, laesst er sich zusaetzlich klicken. */
#walk-heim {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--pd-flaeche);
    border: 1px solid var(--pd-rahmen-st);
    border-radius: 999px;
    padding: 6px 15px 6px 7px;
    box-shadow: var(--pd-schatten-m);
    font: 600 14px/1.2 "Segoe UI", system-ui, sans-serif;
    color: var(--pd-text);
    cursor: pointer;
}
#walk-heim:hover { background: var(--pd-vertief); }
#walk-heim kbd {
    display: inline-block;
    min-width: 21px;
    text-align: center;
    background: var(--pd-vertief-2);
    border: 1px solid var(--pd-rahmen-st);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 2px 6px;
    font: 700 12px/1.2 Consolas, monospace;
    color: var(--pd-text);
}
/* Wer ueber einem Loch im Netz steht, soll es sehen und den Weg zurueck
   nicht suchen muessen (§99.4: melden, nicht stillschweigend uebergehen).
   Gefallen wird dort nicht mehr - gerade deshalb braucht der Zustand eine
   Anzeige, sonst bliebe er voellig unsichtbar. */
#walk-heim.wh-warnt {
    background: var(--pd-gefahr);
    border-color: var(--pd-gefahr);
    color: var(--pd-text-auf);
    animation: wh-puls 1s ease-in-out infinite;
}
#walk-heim.wh-warnt kbd {
    background: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.6);
    color: var(--pd-text);
}
@keyframes wh-puls {
    0%, 100% { box-shadow: var(--pd-schatten-m); }
    50%      { box-shadow: 0 0 0 7px rgba(217,48,37,.28), var(--pd-schatten-m); }
}

#walk-kopf {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px 3px 8px;
    border-radius: 999px;
    background: var(--walk-ton, var(--pd-ansicht));
    color: var(--pd-text-auf);
    /* ⚠️ Kompakter (§217), aber nicht kleiner als 13 px: darunter fällt
       die Leiste unter die Lesbarkeitsgrenze, die `probe_walkhud.html` misst. */
    font: 700 13px/1 "Segoe UI", system-ui, sans-serif;
    white-space: nowrap;
    letter-spacing: .3px;
    box-shadow: var(--pd-schatten-m);
}
#walk-kopf .wk-zeichen { font-size: 16px; line-height: 1; }
/* Farbfeld und Groesse - nur in Text und Malen. Sie stehen im Kopf, weil
   sie sagen, WOMIT der naechste Klick schreibt bzw. malt. */
#walk-kopf .wk-farbe {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--pd-text-auf);
    box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
/* ⚠️ ABGEDUNKELT, NICHT AUFGEHELLT. Mit `rgba(255,255,255,.22)` stand die
   weisse Zahl im Malmodus (--pd-gut, ein mittleres Gruen) bei 4,10:1 und
   damit UNTER der Grenze - gefunden hat das `probe_walkhud.html`, nicht das
   Auge. Ein dunkler Einsatz haelt in jedem Modusfarbton: Malen 9,2:1,
   Text 9,9:1. Dieselbe Fehlerklasse wie §165.4c. */
#walk-kopf .wk-stufe {
    font: 700 12px/1 Consolas, monospace;
    background: rgba(0,0,0,.24);
    padding: 2px 6px; border-radius: 6px;
}

/* ⚠️ `nowrap` und schrumpfbar - die Tastenreihe ist der lange Teil der
   Leiste und entscheidet, ob sie einzeilig bleibt (§217). */
#walk-tasten {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}
@media (max-width: 720px) {
    #walk-tasten { flex-wrap: wrap; overflow: visible; }
}

.wt {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--pd-flaeche);
    border: 1px solid var(--pd-rahmen);
    border-radius: 999px;
    padding: 2px 8px 2px 3px;
    box-shadow: var(--pd-schatten);
    font: 12px/1.15 "Segoe UI", system-ui, sans-serif;
    white-space: nowrap;
    color: var(--pd-text-n);
    white-space: nowrap;
}
.wt kbd {
    display: inline-block;
    min-width: 21px;
    text-align: center;
    background: var(--pd-vertief-2);
    border: 1px solid var(--pd-rahmen-st);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 2px 6px;
    font: 700 12px/1.2 Consolas, monospace;
    color: var(--pd-text);
}
/* Das gewaehlte Werkzeug bleibt gefuellt - sonst muesste man raten, worauf
   der naechste Klick wirkt. */
.wt.wt-an {
    background: var(--walk-ton, var(--pd-ansicht));
    border-color: var(--walk-ton, var(--pd-ansicht));
    color: var(--pd-text-auf);
}
.wt.wt-an kbd {
    background: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.6);
    color: var(--pd-text);
}

/* ⚠️ `flex-basis: 100%` - der Hinweis haengt seit §190 in `#fps-top-hint`,
   und das ist eine umbrechende ZEILE. Ohne die volle Breite quetschte er
   sich neben die Tastenchips und braeche mitten im Satz um. */
#walk-hinweis {
    flex-basis: 100%;
    text-align: center;
    font: 13px/1.4 "Segoe UI", system-ui, sans-serif;
    color: var(--pd-warn);
    background: var(--pd-warn-b);
    border: 1px solid var(--pd-warn);
    border-radius: var(--pd-radius);
    padding: 4px 12px;
}

/* ---------- Texteingabe ---------- */
/* Sie liegt UEBER der Leiste in der Bildmitte: dort steht der Zielpunkt, an
   dem das Schild landet, und man sieht beim Tippen, wohin es kommt. */
#walk-texteingabe {
    position: fixed;
    left: 50%;
    top: 56%;
    transform: translateX(-50%);
    z-index: 202;
    background: var(--pd-flaeche);
    border: 2px solid var(--pd-doku);
    border-radius: var(--pd-radius-g);
    box-shadow: var(--pd-schatten-x);
    padding: 12px 16px;
    min-width: min(460px, 88vw);
}
#walk-texteingabe label {
    display: block;
    font: 700 12px/1.3 "Segoe UI", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--pd-doku);
    margin-bottom: 5px;
}
#walk-textfeld {
    width: 100%;
    box-sizing: border-box;
    font: 16px/1.4 "Segoe UI", system-ui, sans-serif;
    color: var(--pd-text);
    background: var(--pd-vertief);
    border: 1px solid var(--pd-rahmen-st);
    border-radius: var(--pd-radius-s);
    padding: 8px 11px;
}
#walk-textfeld:focus { outline: none; box-shadow: var(--pd-fokus); }
#walk-texthinweis {
    margin-top: 6px;
    font: 12px/1.4 "Segoe UI", system-ui, sans-serif;
    color: var(--pd-text-s);
}