/* ============================================================================
   ASKER — Client-Startseite (/client) und Client-Einstellungen
   ----------------------------------------------------------------------------
   Umgesetzt nach dem Entwurf „Spaces Landing": tiefes Blauschwarz mit
   Rasterschleier und ziehendem Sternenfeld, der Wolf groß und halbtransparent
   rechts im Bild, das Schiff mittig in einem Ringstapel, darunter der
   angeschrägte Startknopf. Kopfzeile mit Sprachwahl, Fußzeile mit Serverampel.

   Bewusst eigene Marken statt der Tokens aus theme.css: der Entwurf hat ein
   eigenes, kälteres Blau (#19b6e9) und einen eigenen Untergrund. theme.css wird
   davor geladen und liefert die Schriften.

   Chromium 87 ist die Untergrenze (der Flash-Browser des Users):
   kein `inset`, kein `aspect-ratio`, keine `:is()`-Selektoren.
   ============================================================================ */

:root {
    --cl-void: #04080d;
    --cl-accent: #19b6e9;
    --cl-accent-soft: #7fd6f2;
    --cl-accent-deep: #109dcb;
    --cl-text: #e6f2f8;
    --cl-text-dim: rgba(198, 224, 236, 0.55);
    --cl-text-faint: rgba(198, 224, 236, 0.4);
    --cl-line: rgba(25, 182, 233, 0.18);
    --cl-panel: linear-gradient(180deg, rgba(13, 26, 36, 0.85), rgba(7, 14, 20, 0.85));
    --cl-display: 'Chakra Petch', 'Sora', system-ui, sans-serif;
    --cl-mono: 'JetBrains Mono', ui-monospace, monospace;
}

html, body {
    margin: 0;
    background: var(--cl-void);
}

body {
    color: var(--cl-text);
    font-family: var(--cl-display);
    /* Der Hintergrund liegt fest hinter allem; die Seite selbst darf scrollen,
       wenn ein kleines Fenster die Werteleiste umbrechen lässt. */
    background: radial-gradient(1400px 900px at 68% 18%, #081824 0%, #04080d 60%);
    background-attachment: fixed;
}

a { color: var(--cl-accent); text-decoration: none; }
a:hover { color: var(--cl-accent-soft); }

/* ------------------------------------------------------- Hintergrundebenen */

/*
 * Vier feste Ebenen, alle ohne Mauszeiger: Raster, Sterne, Lichtschein rechts,
 * Wolf. `position: fixed` statt absolut, damit sie beim Scrollen stehen bleiben
 * und kein `inset` brauchen.
 */
.cl-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.cl-bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(25, 182, 233, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 182, 233, 0.045) 1px, transparent 1px);
    background-size: 92px 92px;
}

.cl-bg-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 22%, rgba(220, 244, 255, 0.9), transparent 100%),
        radial-gradient(1px 1px at 38% 64%, rgba(180, 225, 250, 0.7), transparent 100%),
        radial-gradient(2px 2px at 62% 12%, rgba(220, 244, 255, 0.8), transparent 100%),
        radial-gradient(1px 1px at 81% 44%, rgba(180, 225, 250, 0.65), transparent 100%),
        radial-gradient(1.5px 1.5px at 24% 86%, rgba(220, 244, 255, 0.7), transparent 100%),
        radial-gradient(1px 1px at 92% 78%, rgba(180, 225, 250, 0.6), transparent 100%),
        radial-gradient(1px 1px at 52% 38%, rgba(150, 210, 240, 0.5), transparent 100%);
    background-size: 520px 520px;
    animation: cl-starmove 90s linear infinite;
}

@keyframes cl-starmove {
    from { background-position: 0 0; }
    to { background-position: 0 -520px; }
}

.cl-bg-glow {
    position: absolute;
    top: 0;
    right: -8vw;
    width: 62vw;
    height: 100%;
    background: radial-gradient(closest-side, rgba(15, 142, 189, 0.12), transparent 70%);
}

/*
 * Der Wolf: logo.svg wird per fetch geholt und seine 37 Pfade bekommen die
 * Zeichenanimation. Ohne geladenes SVG bleibt der Kasten schlicht leer — die
 * Seite steht auch ohne ihn.
 */
.cl-bg-wolf {
    position: absolute;
    top: 2vh;
    right: -6vw;
    width: 58vw;
    height: 96vh;
    opacity: 0.5;
}

.cl-bg-wolf svg { width: 100%; height: 100%; display: block; }

/*
 * Zeichnen, füllen, stehen, verblassen — und dann eine Weile gar nichts.
 *
 * Die Pause am Ende (82–100 %, gut vier Sekunden) ist der wichtige Teil: die
 * 37 Pfade laufen versetzt, und ohne eine Phase, in der alle unsichtbar sind,
 * beginnt der erste Pfad neu zu zeichnen, während die letzten noch gefüllt
 * dastehen. Dann steht dauerhaft eine volle Silhouette im Bild und von der
 * Zeichenbewegung ist nichts mehr zu erkennen. Der Versatz (rund 3 s, siehe
 * client.php) muss deshalb kleiner bleiben als diese Pause.
 */
@keyframes cl-wolfcycle {
    0%   { stroke-dashoffset: 1; fill-opacity: 0;    stroke-opacity: 0; }
    2%   { stroke-dashoffset: 1; fill-opacity: 0;    stroke-opacity: 0.9; }
    30%  { stroke-dashoffset: 0; fill-opacity: 0;    stroke-opacity: 0.9; }
    42%  { stroke-dashoffset: 0; fill-opacity: 0.5;  stroke-opacity: 0.55; }
    72%  { stroke-dashoffset: 0; fill-opacity: 0.5;  stroke-opacity: 0.55; }
    82%  { stroke-dashoffset: 0; fill-opacity: 0;    stroke-opacity: 0; }
    100% { stroke-dashoffset: 1; fill-opacity: 0;    stroke-opacity: 0; }
}

/* --------------------------------------------------------------- Startlauf */

/*
 * Der Klick auf „Spiel starten" ist nur noch eine Blende nach Schwarz.
 *
 * Vorher zeichnete sich der Wolf hier zu Ende — rund drei Sekunden — und erst
 * danach begann drüben das Laden des Spiels: zweimal warten für denselben
 * Start. Der Wolf steht jetzt im Ladebild des Clients (game3d/index.html) und
 * zeichnet sich dort über dem echten Ladevorgang. Hier räumt die Seite nur
 * schnell und sauber ab, damit der Wechsel nicht springt.
 *
 * Alles wandert zur Mitte hin ins Dunkle, weil drüben aus dem Dunklen heraus
 * gezeichnet wird. Die Zeiten gehören zu HANDOVER in client.php.
 */
body.cl-launching .cl-page {
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

/* Der Wolf rückt in die Mitte und verlischt — drüben beginnt er neu zu zeichnen,
   und ein voller Umriss hier wäre beim Wechsel ein Rückschritt. */
body.cl-launching .cl-bg-wolf {
    opacity: 0;
    transform: translateX(-27vw) scale(.97);
    transition: opacity .32s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}

body.cl-launching .cl-bg-grid,
body.cl-launching .cl-bg-stars {
    opacity: 0;
    transition: opacity .3s ease;
}

/*
 * Eine Zeile Text, damit der leere Bildschirm nicht nach Absturz aussieht.
 * Außerhalb von .cl-page, sonst würde sie mit ausgeblendet.
 */
.cl-launch-note {
    position: fixed;
    left: 0;
    bottom: 12vh;
    width: 100%;
    text-align: center;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    font-family: var(--cl-mono);
    font-size: 12px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--cl-accent-soft);
    text-shadow: 0 0 24px rgba(25, 182, 233, 0.5);
}

/* Ohne Verzögerung: die Blende dauert nur noch einen Wimpernschlag, und wenn
   der Server mit der Spielseite trödelt, ist diese Zeile das Einzige im Bild. */
body.cl-launching .cl-launch-note {
    opacity: 1;
    transition: opacity .25s ease;
}

@media (max-width: 720px) {
    body.cl-launching .cl-bg-wolf { transform: none; }
}

/* ------------------------------------------------------------------ Gerüst */

.cl-page {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---------------------------------------------------------------- Kopfzeile */

.cl-top {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(10px, 2.4vh, 26px) clamp(16px, 4vw, 44px);
}

.cl-brand {
    display: flex;
    align-items: baseline;
    gap: 12px;
    color: var(--cl-text);
}

.cl-brand b {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.42em;
    color: #eaf6fc;
}

.cl-brand span {
    font-family: var(--cl-mono);
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(127, 214, 242, 0.6);
}

.cl-top-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

/* Sprachwahl und Knöpfe tragen dieselbe Marke: kantige Mono-Chips. */
.cl-chip {
    padding: 7px 13px;
    font-family: var(--cl-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cl-text-dim);
    background: transparent;
    border: 1px solid var(--cl-line);
    border-radius: 0;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.cl-chip:hover { color: var(--cl-accent-soft); border-color: rgba(25, 182, 233, 0.4); }

.cl-chip.active {
    color: var(--cl-accent);
    border-color: var(--cl-accent);
    background: rgba(25, 182, 233, 0.08);
}

.cl-chip.danger:hover {
    color: #ff8b9b;
    border-color: rgba(255, 90, 110, 0.5);
    background: rgba(255, 90, 110, 0.08);
}

.cl-chip[disabled] { opacity: 0.5; cursor: default; }

/* --------------------------------------------------------------- Werteleiste */

/*
 * Einzelne Kacheln am linken Rand (Umbau 06.08.2026).
 *
 * Drei Stationen liegen dahinter: erst sieben Kästen *über* der Bühne, dann
 * eine waagerechte Leiste darunter, dann eine Liste in **einem** Kasten. Der
 * gemeinsame Kasten hatte zwei Fehler, die im Bild sofort auffielen:
 *
 *   1. Sein `clip-path` kappte, was über die Kante ragte — „Onur 10…" und
 *      „Uridyum 2.0…" waren schlicht abgeschnitten. Ein beschnittener Wert ist
 *      schlimmer als gar keiner: er sieht aus wie ein Wert.
 *   2. Label und Wert standen nebeneinander. Bei einer Erfahrung von
 *      56.523.705.259 bleibt in einer halbierten Spalte kein Platz mehr.
 *
 * Beides ist weg: kein umschliessender Kasten (also nichts, was beschneiden
 * könnte), und in jeder Kachel steht das Label **über** dem Wert — die volle
 * Kachelbreite gehört damit der Zahl.
 */
/*
 * Das Profilfeld: Kopf und Werte in einem Block.
 *
 * Der Kopf trägt, was vorher unter der Bühne stand — Hülle, Kennnummer,
 * Unternehmen, Pilot. Darunter die Werte. Kein eigener Rahmen um das Ganze: die
 * Kacheln bringen ihre eigenen mit, und ein Rahmen um Rahmen war schon einmal
 * der Fehler, der die Werte abgeschnitten hat.
 */
.cl-panel {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.8vh, 18px);
    width: clamp(280px, 26vw, 380px);
}

.cl-panel-head {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-bottom: clamp(10px, 1.8vh, 18px);
    border-bottom: 1px solid var(--cl-line);
}

/* Hülle links, Kennnummer rechts — auf gemeinsamer Grundlinie. */
.cl-panel-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

/* Das Unternehmen: Zeichen im Ring, Name daneben. Beide erben die Firmenfarbe,
   die als `color` am Element steht. */
.cl-company {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cl-company-mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid currentColor;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    font-family: var(--cl-mono);
    font-size: 14px;
    font-weight: 700;
    color: inherit;
}

.cl-company-name {
    /* Der längste Name ist „Venus Resources Unlimited" — er darf umbrechen,
       statt den Ring aus dem Feld zu schieben. */
    min-width: 0;
    font-family: var(--cl-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    line-height: 1.35;
    text-transform: uppercase;
    color: inherit;
}

.cl-stats {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.1vh, 11px);
}

/* Eine Zeile trägt einen Wert — oder zwei, wenn sie inhaltlich zusammengehören. */
.cl-stat-row { display: block; }

.cl-stat-row.pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(6px, 0.8vw, 11px);
}

/*
 * Die Kachel.
 *
 * `min-width: 0` ist nicht kosmetisch: ohne sie bekommt ein Grid-Kind als
 * Mindestbreite den Inhalt, und zwei lange Zahlen nebeneinander sprengten die
 * Zeile nach rechts aus der Spalte heraus.
 */
.cl-stat {
    position: relative;
    min-width: 0;
    /* Seitlich 12px und nicht mehr: in der geteilten Zeile bleiben damit am
       Bruchpunkt 127px für eine Zahl, die 118px braucht. Bei 14px wären es nur
       noch 5px Luft — zu wenig, wenn die Schrift eine Spur breiter misst. */
    padding: clamp(8px, 1.3vh, 12px) 12px clamp(9px, 1.4vh, 13px);
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid rgba(127, 214, 242, 0.12);
    /* Rund statt angeschrägt (Vorlage des Betreibers, 06.08.2026). Die Kanten
       des restlichen Bildschirms sind gekappt; hier tragen die Werte, und ein
       weicher Rahmen stellt sich ihnen nicht in den Weg. */
    border-radius: 12px;
    /* Die Kennfarbe der Kachel; Wert und Datum greifen sie ab. */
    color: var(--cl-accent-soft);
}

.cl-stat-label {
    display: block;
    margin-bottom: 3px;
    font-family: var(--cl-mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    /* Der Rangname „Basic Space Pilot" ist als Beschriftung nie zu lang; die
       Werte darunter sind es, deshalb steht nur hier `nowrap`. */
    white-space: nowrap;
    color: var(--cl-text-faint);
}

.cl-stat-value {
    display: block;
    font-family: var(--cl-mono);
    font-size: clamp(13px, 1.75vh, 17px);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: inherit;
}

/*
 * In geteilten Zeilen eine Nummer kleiner.
 *
 * Nachgerechnet mit dem längsten Wert, der real vorkommt — 56.523.705.259 sind
 * mit den Punkten vierzehn Zeichen. Monospace rechnet sich zuverlässig: rund
 * 0,6 em je Zeichen, also 14 × 0,6 × 14px ≈ 118px. In der schmalsten
 * Paar-Kachel (280px Liste, halbiert, minus Innenabstand) bleiben 111px, und
 * dort greift die untere Grenze von 11px — 14 × 0,6 × 11px ≈ 92px. Passt mit
 * Luft, auch wenn die Erfahrung noch eine Stelle zulegt.
 */
.cl-stat-row.pair .cl-stat-value {
    font-size: clamp(11px, 1.4vh, 14px);
}

/* Das Premium-Enddatum: gehört zum Wert, soll ihn aber nicht überstimmen. */
.cl-stat-note {
    display: block;
    margin-top: 2px;
    font-family: var(--cl-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--cl-text-faint);
}

/* Eine Farbe je Wert — eine Angabe, die Wert und Beiwerk beide erben. */
.cl-stat.xp      { color: #a78bfa; }
.cl-stat.honor   { color: #34d399; }
.cl-stat.gold    { color: #fbbf24; }
.cl-stat.plain   { color: #e2e8f0; }
.cl-stat.arena   { color: #f472b6; }
.cl-stat.accent  { color: var(--cl-accent); }
.cl-stat.premium { color: #fbbf24; }

/* Kein Premium: die Zeile steht da, drängt sich aber nicht auf. */
.cl-stat.off     { color: var(--cl-text-dim); }
.cl-stat.off .cl-stat-value { font-weight: 500; }

/*
 * Der Rang ist als einziger Wert ein Wort, kein Zahlenblock.
 *
 * Er steht auf einer eigenen Zeile und hat damit die volle Breite; „Basic Space
 * Pilot" ist das längste, was hier stehen kann, und darf im Notfall umbrechen.
 * Etwas kleiner als die Zahlen, damit die Kachel dieselbe Höhe behält.
 */
.cl-stat.accent .cl-stat-value {
    font-size: clamp(12px, 1.6vh, 15px);
    letter-spacing: 0.05em;
}

/* ------------------------------------------------------------------ Bühne */

/*
 * Drei Spalten: Werte, Schiff, Ausgleich.
 *
 * Die dritte Spalte ist leer und trägt trotzdem: ohne sie stünde das Schiff in
 * der Mitte des *Rests*, also sichtbar zu weit rechts. `minmax(0, 1fr)` auf
 * beiden Aussenspalten macht sie gleich breit, `auto` in der Mitte lässt das
 * Schiff seine eigene Grösse behalten.
 */
.cl-stage {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: clamp(14px, 2.5vw, 40px);
    padding: clamp(8px, 2vh, 24px) clamp(16px, 3vw, 40px) clamp(10px, 3vh, 40px);
}

/* Das Profilfeld sitzt aussen an seiner Spalte, nicht in deren Mitte. */
.cl-panel { justify-self: start; }

/* Alles, was zum Schiff gehört: Bühne, Name, Startknopf. */
.cl-focus {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2.2vh, 24px);
}

/*
 * Ab hier ist für drei Spalten kein Platz mehr: die Werteliste rutscht unter
 * das Schiff und wird mittig gestellt.
 *
 * Der Bruchpunkt ist nachgerechnet, nicht geschätzt. Bei 1081px bleiben der
 * Aussenspalte 264px, das Feld will aber 281px — es überliefe, und in der
 * halbierten Paar-Kachel bräuchte die längste Zahl 118px bei 110px Platz.
 * Genau dieser Überlauf war im Bild als abgeschnittenes „Onur 10…" zu sehen.
 * Ab 1180px geht die Rechnung auf; 1200 lässt etwas Luft.
 *
 * Die längste Zahl sind vierzehn Zeichen — nachgesehen in `player_accounts`.
 * Erfahrung und Ehre stehen seit der neuen Gruppierung allein und haben die
 * volle Breite; kritisch bleiben **Credits** (ebenfalls vierzehn) und Uridium,
 * die sich eine Zeile teilen.
 */
@media (max-width: 1200px) {
    .cl-stage {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(12px, 2.4vh, 26px);
    }

    .cl-focus { grid-row: 1; }

    .cl-panel {
        grid-row: 2;
        justify-self: center;
        width: min(460px, 100%);
    }

    /* Hier ist die Liste breiter — die Paare dürfen weiter auseinander. */
    .cl-stat-row.pair { gap: clamp(8px, 2vw, 14px); }

    /* Und der Wert darf wieder so gross sein wie in den einzelnen Kacheln. */
    .cl-stat-row.pair .cl-stat-value { font-size: clamp(13px, 1.75vh, 17px); }
}

/*
 * Ganz schmal: die Paare brechen auf eine Spalte. Der Zeilenabstand muss dann
 * greifen — deshalb steht oben `gap` und nicht `gap: 0 …`, sonst klebten die
 * beiden Kacheln hier aneinander.
 */
@media (max-width: 460px) {
    .cl-stat-row.pair { grid-template-columns: 1fr; }
}

/*
 * Der Ringstapel. Feste Kantenlänge über `min()` statt aspect-ratio (Chromium 88)
 * — die vh-Grenze hält ihn auch in flachen Fenstern im Bild.
 *
 * Seit dem Fokus-Umbau darf er deutlich grösser sein (46vh statt 34vh): über der
 * Bühne steht nichts mehr, die Werte sind nach unten gewandert.
 */
.cl-hero {
    position: relative;
    flex: 0 0 auto;
    width: min(540px, 80vw, 46vh);
    height: min(540px, 80vw, 46vh);
}

.cl-hero-glow {
    position: absolute;
    top: 8%;
    left: 8%;
    width: 84%;
    height: 84%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(25, 182, 233, 0.16), transparent 65%);
    animation: cl-heropulse 6s ease-in-out infinite;
}

@keyframes cl-heropulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

.cl-hero-rings {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: cl-ringspin 80s linear infinite;
}

@keyframes cl-ringspin { to { transform: rotate(360deg); } }

.cl-hero-rings svg { width: 100%; height: 100%; display: block; }

/*
 * Der Wartezustand: eine gezeichnete Peilung, kein Bild.
 *
 * Hier lag bis zum 06.08.2026 `.cl-hero-ship` — ein `<img>` auf ein Standbild
 * aus `do_img/`. Es war DarkOrbit-Kunst, es blitzte bei jedem Seitenaufruf kurz
 * auf, bevor das eigene Modell es ablöste, und genau dieses Aufblitzen sollte
 * weg. Die Peilung atmet, solange geladen wird, und verschwindet, sobald das
 * Modell steht (`.done`, gesetzt in client.php).
 */
.cl-hero-idle {
    position: absolute;
    top: 6%;
    left: 6%;
    width: 88%;
    height: 88%;
    animation: cl-idlebreathe 2.6s ease-in-out infinite;
    transition: opacity .45s ease;
}

.cl-hero-idle svg { width: 100%; height: 100%; display: block; }

.cl-hero-idle.done {
    opacity: 0;
    animation: none;
    /* Nicht nur unsichtbar: sonst finge die Maus über der Bühne sie ab. */
    pointer-events: none;
}

@keyframes cl-idlebreathe {
    0%, 100% { opacity: 0.3; transform: scale(0.97); }
    50%      { opacity: 0.75; transform: scale(1); }
}

/*
 * Die 3D-Bühne liegt über der Peilung und übernimmt, sobald das Modell geladen
 * ist. Sie blendet dabei ein, statt zu erscheinen — ein harter Wechsel wirkte
 * wie ein Nachladefehler.
 */
.cl-hero-stage {
    position: absolute;
    top: 6%;
    left: 6%;
    width: 88%;
    height: 88%;
    opacity: 0;
    transition: opacity .5s ease;
}

.cl-hero-stage.ready { opacity: 1; }

.cl-hero-stage canvas { display: block; }

/* ------------------------------------------------------------------ Auftritt */

/*
 * Ein gestaffelter Aufbau beim Laden, von der Bühne abwärts. Vier Verzögerungen
 * statt vieler kleiner Effekte: die Seite baut sich einmal ordentlich auf, und
 * danach ist sie ruhig.
 *
 * `both` hält den Anfangszustand vor dem Start — ohne das blitzte alles einmal
 * vollständig auf, bevor die Verzögerung greift.
 */
@keyframes cl-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Die Werteliste kommt von der Seite, auf der sie steht. */
@keyframes cl-slide-in {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: translateX(0); }
}

.cl-hero      { animation: cl-rise .55s ease both; }
.cl-ship-name { animation: cl-rise .55s ease .08s both; }
.cl-below     { animation: cl-rise .55s ease .16s both; }
.cl-panel     { animation: cl-slide-in .55s ease .24s both; }

@media (prefers-reduced-motion: reduce) {
    .cl-bg-stars, .cl-hero-rings, .cl-hero-glow, .cl-hero-idle { animation: none; }

    /* Der Aufbau entfällt ganz — sichtbar bleibt der Endzustand. */
    .cl-hero, .cl-ship-name, .cl-panel, .cl-below { animation: none; }

    /* Nicht nur die Bewegung anhalten: der Ruhezustand der Pfade ist unsichtbar
       (siehe client.php), ein bloßes `animation: none` ließe den Wolf ganz
       verschwinden. Hier steht er also gefüllt und still. */
    .cl-bg-wolf svg path {
        animation: none !important;
        stroke-opacity: 0 !important;
        fill-opacity: 0.45 !important;
    }
}

/* -------------------------------------------------------- Schiff und Start */

/*
 * Der Pilotenname, Überschrift des Profilfeldes.
 *
 * Er steht dort, wo bis zum 06.08.2026 der Schiffsname stand. Der Tausch hat
 * einen Grund: die Seite gehört dem Piloten, das Schiff wechselt er. Und der
 * Schiffsname sagt unter der Bühne mehr, weil er dort benennt, was man sieht.
 *
 * Pilotennamen sind bis zu fünfzehn Zeichen lang und keine Kürzel — deshalb
 * weniger gesperrt als der Schiffsname und ohne Grossbuchstaben-Zwang.
 */
.cl-pilot-name {
    margin: 0;
    min-width: 0;
    font-size: clamp(19px, 1.9vw, 27px);
    font-weight: 700;
    letter-spacing: 0.06em;
    overflow-wrap: break-word;
    color: #f2fafd;
    text-shadow: 0 0 34px rgba(25, 182, 233, 0.32);
}

/*
 * Das Clanzeichen unter dem Namen — es trägt die eckigen Klammern schon.
 *
 * Seit dem 07.08.2026 ein Verweis auf /clan statt eines `div`. `inline-block`
 * ist deshalb Pflicht: als `a` wäre es inline, und Sperrung und Abstand nach
 * unten fielen in sich zusammen.
 */
.cl-clan {
    display: inline-block;
    font-family: var(--cl-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--cl-accent);
}

/*
 * Der Schiffsname, zentriert unter der Bühne.
 *
 * Die weite Sperrung ist Absicht: gesperrte Grossbuchstaben lesen sich als
 * Typenbezeichnung, nicht als Wort — dieselbe Anmutung wie im Hangar. Der
 * `text-indent` gleicht sie aus: sie hängt auch hinter dem letzten Zeichen, und
 * zentriert stünde der sichtbare Text dadurch einen halben Abstand zu weit
 * links.
 */
.cl-ship-name {
    margin: 0;
    font-size: clamp(20px, min(3.4vw, 4vh), 38px);
    font-weight: 700;
    letter-spacing: 0.26em;
    text-indent: 0.13em;
    text-transform: uppercase;
    text-align: center;
    color: #f2fafd;
    text-shadow: 0 0 34px rgba(25, 182, 233, 0.32);
}

/*
 * Die Kennnummer unter dem Piloten.
 *
 * Ein Knopf, kein Text: sie wird fast nur gebraucht, um sie weiterzugeben —
 * Support, Fehlermeldung, Clanaufnahme. Ein Klick legt sie in die Zwischenablage
 * (siehe client.php), deshalb sieht sie auch anfassbar aus statt wie Beiwerk.
 */
.cl-userid {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    /* Oben rechts im Kopf, auf der Grundlinie des Schiffsnamens. Ohne Rahmen und
       ohne Fläche: sie ist eine Fussnote zur Überschrift, kein zweiter Knopf
       neben dem Startknopf. Anfassbar wird sie erst beim Überfahren. */
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: none;
    font-family: var(--cl-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    white-space: nowrap;
    color: var(--cl-text-faint);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.cl-userid:hover,
.cl-userid:focus-visible {
    border-color: var(--cl-accent);
    color: var(--cl-text);
    background: rgba(25, 182, 233, 0.08);
}

.cl-userid-label {
    opacity: 0.7;
    letter-spacing: 0.22em;
}

/* Die Nummer selbst etwas heller als ihre Beschriftung — sie ist das, was
   abgelesen und weitergegeben wird. */
.cl-userid-value { color: var(--cl-text-dim); letter-spacing: 0.1em; }

.cl-userid:hover .cl-userid-value,
.cl-userid:focus-visible .cl-userid-value { color: var(--cl-text); }

/* Kurz nach dem Kopieren: die Rückmeldung ist der Knopf selbst. */
.cl-userid.copied {
    border-color: var(--cl-accent);
    color: var(--cl-accent);
}

.cl-below {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.8vh, 18px);
}

/*
 * Der Startknopf: abgeschrägte Ecken über clip-path (Chrome 55), damit die Form
 * ohne zusätzliche Elemente auskommt.
 */
.cl-launch {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: clamp(12px, 2.2vh, 21px) clamp(28px, 6vw, 58px);
    border: 1px solid #7fe4ff;
    background: linear-gradient(180deg, #35d3f7 0%, #109dcb 100%);
    color: #03222f;
    font-family: var(--cl-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    box-shadow: 0 0 44px rgba(25, 182, 233, 0.45);
    transition: background .16s ease, box-shadow .16s ease;
}

.cl-launch:hover {
    background: linear-gradient(180deg, #5be0ff 0%, #17aede 100%);
    box-shadow: 0 0 60px rgba(25, 182, 233, 0.7);
    color: #03222f;
}

.cl-launch .ic { font-size: 13px; }

.cl-note {
    margin: 0;
    max-width: 430px;
    text-align: center;
    font-size: clamp(11px, 1.8vh, 13px);
    line-height: 1.6;
    color: rgba(198, 224, 236, 0.45);
}

/* ---------------------------------------------------------------- Fußzeile */

.cl-foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(8px, 1.8vh, 18px) clamp(16px, 4vw, 44px);
    border-top: 1px solid rgba(25, 182, 233, 0.12);
    font-family: var(--cl-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cl-text-faint);
}

.cl-status { display: flex; align-items: center; gap: 8px; }

.cl-status .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
}

.cl-status.off .dot {
    background: #ff5a6e;
    box-shadow: 0 0 8px rgba(255, 90, 110, 0.8);
}

/* -------------------------------------------------- Anmelden / Registrieren */

.cl-card {
    width: 100%;
    max-width: 420px;
    background: var(--cl-panel);
    border: 1px solid var(--cl-line);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.cl-card-head {
    padding: 22px 24px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(25, 182, 233, 0.12);
}

.cl-card-head h1 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #f2fafd;
    text-shadow: 0 0 26px rgba(25, 182, 233, 0.3);
}

.cl-card-head p {
    margin: 0;
    font-family: var(--cl-mono);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cl-text-dim);
}

.cl-tabs {
    display: flex;
    border-bottom: 1px solid rgba(25, 182, 233, 0.12);
}

.cl-tab {
    flex: 1;
    padding: 12px 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--cl-text-dim);
    font-family: var(--cl-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}

.cl-tab:hover { color: var(--cl-accent-soft); }

.cl-tab.active {
    color: var(--cl-accent);
    border-bottom-color: var(--cl-accent);
}

.cl-form { display: none; padding: 20px 24px 24px; }
.cl-form.active { display: block; }

.cl-field { margin-bottom: 14px; }

.cl-field label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--cl-mono);
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cl-text-dim);
}

.cl-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    background: rgba(4, 8, 13, 0.75);
    border: 1px solid var(--cl-line);
    border-radius: 0;
    color: var(--cl-text);
    font-family: var(--cl-display);
    font-size: 13px;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.cl-field input:focus {
    border-color: var(--cl-accent);
    box-shadow: 0 0 0 3px rgba(25, 182, 233, 0.12);
}

.cl-field input::placeholder { color: rgba(198, 224, 236, 0.28); }
.cl-field input[disabled] { color: var(--cl-text-dim); }

.cl-submit {
    width: 100%;
    margin-top: 4px;
    padding: 13px;
    border: 1px solid #7fe4ff;
    background: linear-gradient(180deg, #35d3f7 0%, #109dcb 100%);
    color: #03222f;
    font-family: var(--cl-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: box-shadow .16s ease, background .16s ease;
}

.cl-submit:hover {
    background: linear-gradient(180deg, #5be0ff 0%, #17aede 100%);
    box-shadow: 0 0 34px rgba(25, 182, 233, 0.4);
}

.cl-submit[disabled] { opacity: 0.55; cursor: default; }

.cl-aside {
    margin-top: 14px;
    text-align: center;
    font-size: 11px;
    color: var(--cl-text-faint);
}

.cl-captcha {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.cl-captcha img {
    width: 130px;
    height: 44px;
    flex: none;
    border: 1px solid var(--cl-line);
    background: #fff;
    cursor: pointer;
}

.cl-captcha .cl-field { flex: 1; margin-bottom: 0; }

/* ------------------------------------------------------------ Einstellungen */

.cl-settings {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.cl-section {
    background: var(--cl-panel);
    border: 1px solid var(--cl-line);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
}

.cl-section-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(25, 182, 233, 0.12);
    background: linear-gradient(180deg, rgba(25, 182, 233, 0.06), transparent);
}

.cl-section-head h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #f2fafd;
}

.cl-section-head span {
    font-family: var(--cl-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--cl-text-dim);
}

.cl-section form { padding: 18px; }

.cl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 560px) {
    .cl-row { grid-template-columns: 1fr; }
}

.cl-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

/* Zehn Sprachen als Chips — ein Klick speichert, kein Knopf dazwischen. */
.cl-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cl-actions .cl-submit { width: auto; min-width: 190px; margin-top: 0; }

/* --------------------------------------------------------------- Meldungen */

.cl-msg {
    display: none;
    margin-top: 14px;
    padding: 10px 13px;
    background: rgba(4, 8, 13, 0.6);
    border: 1px solid var(--cl-line);
    border-left-width: 2px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--cl-text-dim);
}

.cl-msg.show { display: block; }
.cl-msg.error { border-left-color: #ff5a6e; color: #ffbac3; }
.cl-msg.ok { border-left-color: #34d399; color: #9deed0; }

/* ---------------------------------------------------------------- Discord */

/*
 * Zwei Dinge: der ständige Knopf in der Kopfzeile und das Fenster, das nach dem
 * Anmelden und nach dem Verlassen des Spiels einmal hochkommt.
 *
 * Die Marke bringt ihre eigene Farbe mit (#5865f2). Sie steht bewusst neben dem
 * Cyan der Seite und nicht darin: ein Discord-Knopf, der aussieht wie alles
 * andere, wird für Beiwerk gehalten. Rahmen, Kanten und Schrift bleiben dagegen
 * die der Seite, damit das Fenster nicht wie eine fremde Werbeeinblendung wirkt.
 */

:root {
    --cl-dc: #5865f2;
    --cl-dc-soft: #c9d0ff;
}

.cl-chip--dc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cl-chip--dc svg { width: 14px; height: 14px; display: block; }

.cl-chip--dc:hover {
    color: var(--cl-dc-soft);
    border-color: rgba(88, 101, 242, 0.55);
    background: rgba(88, 101, 242, 0.12);
}

/* --------------------------------------------------------------- Fenster */

.cl-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    opacity: 0;
    transition: opacity .22s ease;
}

/* Muss die Flex-Anzeige darüber schlagen — deshalb Klasse plus Attribut. */
.cl-modal[hidden] { display: none; }

.cl-modal.show { opacity: 1; }

/*
 * Fest statt absolut: der Kasten darüber darf scrollen, wenn das Fenster klein
 * ist, und der Schleier soll dabei liegen bleiben.
 */
.cl-modal-veil {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 5, 9, 0.78);
    backdrop-filter: blur(3px);
}

body.cl-modal-open { overflow: hidden; }

.cl-dc {
    position: relative;
    width: 100%;
    max-width: 470px;
    padding: 32px 30px 24px;
    box-sizing: border-box;
    text-align: center;
    background: linear-gradient(180deg, rgba(16, 26, 44, 0.97), rgba(6, 11, 18, 0.98));
    border: 1px solid rgba(88, 101, 242, 0.34);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    outline: none;
    transform: translateY(14px) scale(.985);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.cl-modal.show .cl-dc { transform: none; }

/* Ein Lichtstreifen an der Oberkante, wie ihn die Werteleiste auch trägt. */
.cl-dc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(88, 101, 242, 0.9), transparent);
}

.cl-dc-x {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cl-text-faint);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: color .16s ease;
}

.cl-dc-x:hover { color: var(--cl-dc-soft); }

.cl-dc-mark {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cl-dc-soft);
    border: 1px solid rgba(88, 101, 242, 0.45);
    background: radial-gradient(circle at 50% 15%, rgba(88, 101, 242, 0.34), rgba(88, 101, 242, 0.05));
    box-shadow: 0 0 40px rgba(88, 101, 242, 0.3);
    clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
}

.cl-dc-mark svg {
    width: 31px;
    height: 31px;
    display: block;
    filter: drop-shadow(0 0 10px rgba(88, 101, 242, 0.75));
}

.cl-dc-kicker {
    margin: 0 0 8px;
    font-family: var(--cl-mono);
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(201, 208, 255, 0.62);
}

.cl-dc-title {
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f2fafd;
    text-shadow: 0 0 30px rgba(88, 101, 242, 0.35);
}

.cl-dc-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(198, 224, 236, 0.62);
}

.cl-dc-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
    text-align: left;
}

.cl-dc-list li {
    position: relative;
    padding-left: 22px;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(198, 224, 236, 0.72);
}

/* Eine kleine Raute statt eines Punktes — dieselbe Kantigkeit wie überall. */
.cl-dc-list li::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 7px;
    width: 5px;
    height: 5px;
    background: var(--cl-dc);
    box-shadow: 0 0 8px rgba(88, 101, 242, 0.9);
    transform: rotate(45deg);
}

.cl-dc-invite {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 7px 7px 7px 13px;
    background: rgba(4, 8, 13, 0.7);
    border: 1px solid var(--cl-line);
}

.cl-dc-invite-url {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-family: var(--cl-mono);
    font-size: 11.5px;
    letter-spacing: 0.05em;
    color: var(--cl-accent-soft);
}

.cl-dc-copy { flex: none; }

.cl-dc-copy.ok {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.5);
    background: rgba(52, 211, 153, 0.08);
}

.cl-dc-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 16px;
}

.cl-dc-join {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid #7c88ff;
    background: linear-gradient(180deg, #5f6cff 0%, #4650d8 100%);
    color: #f4f5ff;
    font-family: var(--cl-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
    box-shadow: 0 0 34px rgba(88, 101, 242, 0.4);
    transition: background .16s ease, box-shadow .16s ease;
}

.cl-dc-join:hover {
    background: linear-gradient(180deg, #737dff 0%, #4f59e6 100%);
    color: #fff;
    box-shadow: 0 0 52px rgba(88, 101, 242, 0.62);
}

.cl-dc-join svg { width: 19px; height: 19px; display: block; flex: none; }

.cl-dc-actions .cl-chip { flex: none; padding: 7px 15px; }

.cl-dc-hide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 18px;
    font-family: var(--cl-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cl-text-faint);
    cursor: pointer;
}

.cl-dc-hide:hover { color: var(--cl-text-dim); }

.cl-dc-hide input {
    width: 13px;
    height: 13px;
    accent-color: var(--cl-dc);
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .cl-modal, .cl-dc { transition: none; }
    .cl-dc { transform: none; }
}

@media (max-height: 700px) {
    /* Bei flachen Fenstern von oben nach unten statt aus der Mitte heraus —
       sonst wäre der Kopf des Fensters nicht mehr zu erreichen. */
    .cl-modal { align-items: flex-start; }
}

@media (max-width: 560px) {
    .cl-dc { padding: 26px 20px 20px; }
    .cl-dc-title { font-size: 18px; letter-spacing: 0.1em; }
    .cl-dc-actions { flex-direction: column; }
    .cl-dc-actions .cl-chip { padding: 11px 15px; }
    .cl-chip--dc span { display: none; }
}

/* ------------------------------------------------------------------- klein */

@media (max-width: 720px) {
    .cl-brand b { font-size: 18px; letter-spacing: 0.3em; }
    .cl-brand span { display: none; }
    .cl-stat { min-width: 118px; padding: 7px 12px; }
    .cl-stat-value { font-size: 15px; }
    .cl-launch { width: 100%; justify-content: center; font-size: 15px; letter-spacing: 0.22em; }
    .cl-foot { flex-direction: column; gap: 6px; text-align: center; }
    .cl-bg-wolf { opacity: 0.28; }
}