/* =============================================================
   umbau/css/pyramide.css
   Vamily – Ranglisten-Pyramide & Forderungen
   =============================================================
   Inhalt:
     1. Pyramide-Viewport (Pan & Zoom Container)
     2. Pyramide-Grid (Dreieck-Layout)
     3. Spieler-Karten (Normal, Herausforderbar, Ich selbst)
     4. Spieler-Karten-Inhalte (Rang, Name, LK-Badge)
     5. Forderungen-Liste
     6. Loader-Animation
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   1. PYRAMIDE-VIEWPORT (Pan & Zoom Container)
   Wrapper für natives Touch-Zooming und -Panning auf Mobile
   ───────────────────────────────────────────────────────────── */
.pyramide-viewport {
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* Smooth Scrolling auf iOS */
    cursor: grab;
    touch-action: pan-x pan-y;        /* Erlaubt natives Pan */
    border-radius: 16px;
    /* Kein max-height – die Pyramide bestimmt ihre eigene Höhe */
}

.pyramide-viewport:active {
    cursor: grabbing;
}


/* ─────────────────────────────────────────────────────────────
   2. PYRAMIDE-GRID (Dreieck-Layout)
   Stapelt Reihen vertikal und zentriert sie horizontal,
   sodass eine Dreiecks-/Pyramidenform entsteht
   ───────────────────────────────────────────────────────────── */
.pyramide-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 150px;
    /* Das Padding erzeugt den "schwebenden" Pyramiden-Look
       und gibt Platz zum Pan-Scrollen auf kleinen Bildschirmen */
}

/* Eine horizontale Reihe innerhalb der Pyramide */
.pyramide-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
}


/* ─────────────────────────────────────────────────────────────
   3. SPIELER-KARTEN (Normal, Herausforderbar, Ich selbst)
   ───────────────────────────────────────────────────────────── */

/* Basis-Karte (Spieler & leere Platzhalter teilen sich das Fundament) */
.pyramide-player,
.pyramide-placeholder {
    position: relative;
    background: var(--bg-card);
    border: 1.5px solid var(--border-bright);
    border-radius: 16px;
    padding: 10px 8px;
    width: 120px;
    height: 115px;
    text-align: center;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* Sprunghafte "Pop"-Animation beim Erscheinen */
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Unsichtbare Platzhalter für Leerzeilen am Pyramiden-Ende */
.pyramide-placeholder {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    pointer-events: none;
}

/* Vollständig unsichtbarer Ghost-Platzhalter */
.pyramide-placeholder.ghost {
    opacity: 0;
}

/* Touch-Feedback beim Antippen */
.pyramide-player:active {
    transform: scale(0.92);
}

/* Herausforderbarer Spieler: Grüner Leuchtrand */
.pyramide-player.challengeable {
    border-color: var(--primary);
    box-shadow: 0 0 20px var(--primary-muted);
    border-width: 2px;
    cursor: pointer;
}

.pyramide-player.challengeable:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px var(--primary-muted);
}

/* Eigene Karte: Primärfarbe als Hintergrund */
.pyramide-player.me {
    background: var(--primary);
    border-color: transparent;
    box-shadow: 0 0 30px var(--primary-muted);
}

/* Auf der eigenen Karte: dunkle Textfarbe für Kontrast */
.pyramide-player.me .firstname,
.pyramide-player.me .lastname,
.pyramide-player.me .rank {
    color: var(--bg-dark);
}


/* ─────────────────────────────────────────────────────────────
   4. SPIELER-KARTEN-INHALTE
   ───────────────────────────────────────────────────────────── */

/* Rang-Nummer (oben) */
.pyramide-player .rank {
    font-weight: 900;
    color: var(--primary);
    display: block;
    font-size: 1.15rem;
    line-height: 1;
}

/* Vorname (einzeilig, abschneiden wenn zu lang) */
.pyramide-player .firstname {
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-main);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Nachname (einzeilig, abschneiden wenn zu lang) */
.pyramide-player .lastname {
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-main);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* LK-Badge (unten, Leistungsklasse) */
.pyramide-player .lk-badge {
    font-size: 0.65rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 6px;
    color: var(--text-muted);
    font-weight: 700;
    flex-shrink: 0;
}

/* LK-Badge auf der eigenen Karte (dunkler Hintergrund für Kontrast) */
.pyramide-player.me .lk-badge {
    background: rgba(0, 0, 0, 0.1);
    color: var(--bg-dark);
    opacity: 0.8;
}


/* ─────────────────────────────────────────────────────────────
   5. FORDERUNGEN-LISTE
   Karten für aktive und abgeschlossene Forderungen
   ───────────────────────────────────────────────────────────── */

/* Eine einzelne Forderungs-Karte */
.forderung-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow);
    transition: border-color 0.2s ease;
}

.forderung-item:hover {
    border-color: rgba(190, 242, 100, 0.2);
    cursor: pointer;
}

/* Laufende Forderung: gelbe Markierung */
.forderung-item.offen {
    border-left: 4px solid var(--color-unentschieden);
}

/* Abgeschlossene Forderung: grüne Markierung */
.forderung-item.abgeschlossen {
    border-left: 4px solid var(--primary);
}

.forderung-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.forderung-paarung {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main);
}

.forderung-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

.forderung-ergebnis {
    font-weight: 800;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    flex-shrink: 0;
}

.forderung-ergebnis.sieg       { color: var(--primary); }
.forderung-ergebnis.niederlage { color: var(--danger); }
.forderung-ergebnis.offen      { color: var(--color-unentschieden); }

/* Ergebnis-Eintragen-Button innerhalb der Forderungskarte */
.btn-ergebnis-eintragen {
    background: var(--primary-muted);
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-ergebnis-eintragen:hover {
    background: var(--primary);
    color: var(--bg-dark);
}


/* ─────────────────────────────────────────────────────────────
   6. LOADER-ANIMATION
   Angezeigt während die Pyramide vom Server geladen wird
   ───────────────────────────────────────────────────────────── */
.loader {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-weight: 600;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}