/* ===== SoulKeeper - Namenseingabe (Retro-Arcade-Stil) ==================
   Erscheint nach PRESS START, bevor die Story beginnt. Bedienung per
   Klick auf die Tastatur-Tasten ODER per echter Tastatur (beides läuft
   über dieselbe Zeichen-Prüfung, siehe js/namenseingabe.js). */

/* Sitzt wie Highscore/Settings (css/menues.css: .panel) im #aktions-slot -
   dieselbe Oberkante wie Press Start, kein eigenes Bottom-Anchoring mehr.
   Hier nur die Maße, die von den Standard-Panels abweichen (breiter/höher
   wegen Tastatur); .namenseingabe.panel schlägt .panel dank höherer
   Spezifität unabhängig von der Reihenfolge der <link>-Tags. */
.namenseingabe.panel {
    align-items: center;
    justify-content: center;
    gap: clamp(0.7rem, calc(2 * var(--uh)), 1.2rem);
    width: min(94%, calc(48.4375 * var(--uw)));
    max-height: calc(70 * var(--uh));
    padding: 1.3rem 1.6rem 1.1rem;
}

/* Easter Egg "67/six seven" (siehe js/namenseingabe.js: spieleVerzerrung) -
   Durchgehende, wellenförmige Schüttelbewegung statt einzelner "Sprung +
   stehen bleiben"-Posen. Genau 6 Wackelbewegungen (Vorgabe): abwechselnd
   +9deg / -9deg, also links hoch/rechts runter und wieder umgekehrt.
   WICHTIG: Als Keyframes stehen bewusst NUR die Umkehrpunkte drin, keine
   0deg-Zwischenschritte. Die Timing-Funktion wirkt in CSS je Keyframe-
   Abschnitt; ein 0deg-Keyframe in der Mitte würde die Box also mittig auf
   Tempo 0 abbremsen und dort kurz "stehen" lassen - genau der zuvor
   sichtbare, abgehackte Eindruck. Ohne diese Zwischenkeyframes läuft die
   Box mit voller Geschwindigkeit durch die Nulllage und bremst nur an den
   Umkehrpunkten ab, wie bei einer echten Schwingung; ease-in-out bildet je
   Abschnitt eine Sinus-Halbwelle nach.
   7 gleich lange Abschnitte (6 Ausschläge + Rückweg in die Nulllage) auf
   1.8s = rund 257ms je Abschnitt - schneller als die früheren 400ms, damit
   die Animation trotz doppelter Anzahl kurz und dynamisch bleibt.
   Der letzte Keyframe steht wieder exakt auf skewY(0deg), die Box endet
   also in ihrer normalen Position (zusätzlich entfernt spieleVerzerrung()
   die Klasse nach animationend wieder).
   skewY() schert links/rechts gegenläufig um die Boxmitte - positive Werte
   = linke Seite hoch/rechte Seite runter, negative Werte = umgekehrt.
   translateX(-50%) (Zentrierung, siehe .panel in css/menues.css) bleibt in
   jedem Frame erhalten, skewY wird nur ergänzt. */
.namenseingabe--verzerrt {
    animation: namenseingabe-verzerrung 1.8s ease-in-out;
}

@keyframes namenseingabe-verzerrung {
    0%     { transform: translateX(-50%) skewY(0deg); }
    14.3%  { transform: translateX(-50%) skewY(9deg); }
    28.6%  { transform: translateX(-50%) skewY(-9deg); }
    42.9%  { transform: translateX(-50%) skewY(9deg); }
    57.1%  { transform: translateX(-50%) skewY(-9deg); }
    71.4%  { transform: translateX(-50%) skewY(9deg); }
    85.7%  { transform: translateX(-50%) skewY(-9deg); }
    100%   { transform: translateX(-50%) skewY(0deg); }
}

.namenseingabe-titel {
    margin: 0;
    font-size: clamp(0.9rem, calc(3.2 * var(--uw)), 1.3rem);
    color: var(--accent-bright);
    text-shadow: 0 0 20px var(--accent);
}

.namenseingabe-anzeige {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, calc(2 * var(--uw)), 1rem);
    flex-wrap: wrap;
    justify-content: center;
}

/* Kürbis statt generischem Personen-Icon - gleiche Technik wie
   .level1-mond-tint (css/level1.css): mask-image nutzt die SVG-Silhouette,
   background-color liefert die (theme-abhängige) Farbe. */
.helden-icon {
    width: calc(40px * var(--stage-scale));
    height: calc(40px * var(--stage-scale));
    flex: none;
    background-color: var(--accent);
    -webkit-mask-image: url('../img/Kuerbis.svg');
    mask-image: url('../img/Kuerbis.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.namensfeld {
    display: flex;
    gap: 0.2rem;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--panel-border);
    border-radius: 4px;
    padding: 0.5rem 0.5rem;
}

.namensfeld .slot {
    width: clamp(0.75rem, calc(2.6 * var(--uw)), 1.1rem);
    text-align: center;
    font-size: clamp(0.65rem, calc(2.1 * var(--uw)), 0.95rem);
    color: var(--text);
    border-bottom: 2px solid var(--text-dim);
    padding-bottom: 0.15rem;
}

.namensfeld .slot.aktiv {
    border-bottom-color: var(--accent-bright);
}

.herzen {
    font-size: clamp(0.85rem, calc(2.8 * var(--uw)), 1.2rem);
    flex: none;
    letter-spacing: 0.1em;
}

.tastatur-tabs {
    display: flex;
    gap: 0.5rem;
}

.tastatur-tab {
    font-size: clamp(0.55rem, calc(1.8 * var(--uw)), 0.7rem);
    padding: 0.5rem 0.7rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
    cursor: pointer;
    border-radius: 4px;
}

.tastatur-tab[aria-selected="true"] {
    color: var(--text);
    border-color: var(--accent-bright);
    background: rgba(255, 255, 255, 0.1);
}

/* Breite bewusst 100% statt eigener min(calc(N*var(--uw)),Npx)-Formel:
   der feste 540px-Deckel wuchs nicht im gleichen Verhaeltnis wie die
   Breite von .namenseingabe.panel (eigene proportionale Formel, siehe
   dort) - auf Geraeten mit kleinem --stage-scale (z.B. iPhone 11 quer,
   ~0.575) wurde die Tastatur dadurch breiter als ihr eigener Dialog-
   Container und links/rechts abgeschnitten (Buchstaben fehlten). 100%
   uebernimmt stattdessen immer exakt die (bereits korrekt proportional
   berechnete) verfuegbare Innenbreite des Panels. */
.tastatur {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0.3rem;
    width: 100%;
}

.tastatur-taste {
    font-size: clamp(0.55rem, calc(2.2 * var(--uw)), 0.8rem);
    padding: 0.55rem 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--panel-border);
    color: var(--text);
    cursor: pointer;
    border-radius: 4px;
}

.tastatur-taste:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--accent-bright);
}

.tastatur-taste:active {
    transform: scale(0.92);
}

/* Gedämpfter als die Zeichentasten, damit sie sich als Utility-Taste
   abhebt und nicht wie ein weiteres Zeichen aussieht. */
.tastatur-taste--loeschen {
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.12);
}

.tastatur-taste--loeschen:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--text-dim);
    color: var(--text);
}

.tastatur-aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
}

.btn-tastatur-aktion {
    font-size: clamp(0.6rem, calc(2 * var(--uw)), 0.8rem);
    padding: 0.7rem 1.1rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--panel-border);
    color: var(--text);
    cursor: pointer;
    border-radius: 4px;
}

.btn-tastatur-aktion.btn-ok {
    border-color: var(--accent-bright);
    color: var(--accent-bright);
    box-shadow: 0 0 15px var(--accent);
}

.btn-tastatur-aktion:disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}

@media (max-width: 420px) {
    .tastatur {
        grid-template-columns: repeat(7, 1fr);
    }
}