/* ==========================================================
   Das Gildenhaus - gilde.gg
   Mystisch-altertümliches Isekai-Theme
   Vereinsfarben: #ef7b1d (orange) / #2f93cf (blau)
   Gildenfarben: Brauntöne, Pergament, Schriftrollen
   ========================================================== */

/* Pergament-Hintergrund für den Body */
.guild-parchment {
    background-color: #f3e6c9;
    background-image:
        radial-gradient(ellipse at 20% 10%, rgba(185, 141, 79, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 90%, rgba(139, 90, 43, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 40%, rgba(230, 208, 163, 0.35) 0%, transparent 60%);
}

/* Dunkle Variante (Displays / TV) */
.guild-dark {
    background-color: #2a180a;
    background-image:
        radial-gradient(ellipse at 30% 20%, rgba(139, 90, 43, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 80%, rgba(239, 123, 29, 0.10) 0%, transparent 50%);
}

/* Schriftrollen-Karte (zentrales UI-Element) */
.scroll-card {
    background-color: #faf3e3;
    border: 2px solid #b98d4f;
    border-radius: 6px;
    box-shadow:
        0 2px 6px rgba(62, 37, 16, 0.25),
        inset 0 0 25px rgba(185, 141, 79, 0.15);
    position: relative;
}

.scroll-card::before,
.scroll-card::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    height: 8px;
    background: linear-gradient(90deg, #6f4620, #8b5a2b 20%, #b98d4f 50%, #8b5a2b 80%, #6f4620);
    border-radius: 4px;
}

.scroll-card::before { top: -5px; }
.scroll-card::after { bottom: -5px; }

/* Schlichte Pergamentkarte ohne Rollenenden */
.parchment-card {
    background-color: #faf3e3;
    border: 1px solid #d4b378;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(62, 37, 16, 0.18);
}

/* Siegel-Button (Primäraktion) */
.btn-seal {
    background: linear-gradient(180deg, #ef7b1d, #d9640e);
    color: #fff;
    font-weight: 700;
    border: 1px solid #b85408;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(62, 37, 16, 0.35);
    transition: all 0.2s ease;
}

.btn-seal:hover {
    background: linear-gradient(180deg, #f88d36, #ef7b1d);
    box-shadow: 0 3px 8px rgba(62, 37, 16, 0.45);
}

.btn-seal:disabled {
    background: #b98d4f;
    border-color: #8b5a2b;
    cursor: not-allowed;
}

/* Sekundär-Button */
.btn-scroll {
    background: #faf3e3;
    color: #573517;
    font-weight: 700;
    border: 2px solid #8b5a2b;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-scroll:hover {
    background: #f3e6c9;
    border-color: #ef7b1d;
    color: #ef7b1d;
}

/* ==========================================================
   Rang-Effekte für die digitale Abenteuerkarte
   ========================================================== */

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.rank-shimmer {
    position: relative;
    overflow: hidden;
}

.rank-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.45) 48%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(255, 255, 255, 0.45) 52%,
        transparent 70%);
    background-size: 200% 100%;
    animation: shimmer 3.5s linear infinite;
    pointer-events: none;
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 8px 2px var(--glow-color, rgba(239, 123, 29, 0.6)); }
    50% { box-shadow: 0 0 22px 6px var(--glow-color, rgba(239, 123, 29, 0.9)); }
}

.rank-glow {
    animation: glowPulse 2.8s ease-in-out infinite;
}

/* Neue Effekte (Runde 3) nur am Bildschirm - im Druck bleiben die Karten ruhig */
@media screen {

    /* Pulsieren: sanftes Atmen aus Skalierung und Helligkeit */
    @keyframes rankPulse {
        0%, 100% { transform: scale(1); filter: brightness(1); }
        50% { transform: scale(1.03); filter: brightness(1.15); }
    }

    .rank-pulse {
        animation: rankPulse 2.4s ease-in-out infinite;
    }

    /* Regenbogen: Rahmen-Overlay, dessen Farbton rotiert (nur der Rahmen, nicht die Karte) */
    @keyframes rankRainbow {
        0% { filter: hue-rotate(0deg); }
        100% { filter: hue-rotate(360deg); }
    }

    .rank-rainbow {
        position: relative;
    }

    .rank-rainbow::after {
        content: "";
        position: absolute;
        inset: -3px;
        border: 3px solid #ff2d2d;
        border-radius: inherit;
        animation: rankRainbow 4s linear infinite;
        pointer-events: none;
    }

    /* Funkeln: kleine Sternenglanzpunkte aus geschichteten radial-gradients */
    @keyframes rankSparkle {
        0%, 100% {
            opacity: 0.25;
            background-position: 15% 25%, 70% 65%, 45% 80%, 85% 15%;
        }
        50% {
            opacity: 1;
            background-position: 25% 70%, 60% 20%, 80% 60%, 35% 40%;
        }
    }

    .rank-sparkle {
        position: relative;
        overflow: hidden;
    }

    .rank-sparkle::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            radial-gradient(circle 2px, rgba(255, 255, 255, 0.95) 40%, transparent 60%),
            radial-gradient(circle 1.5px, rgba(255, 255, 255, 0.85) 40%, transparent 60%),
            radial-gradient(circle 2.5px, rgba(255, 255, 240, 0.9) 40%, transparent 60%),
            radial-gradient(circle 1.5px, rgba(255, 255, 255, 0.8) 40%, transparent 60%);
        background-size: 30% 30%, 25% 25%, 35% 35%, 20% 20%;
        background-repeat: no-repeat;
        animation: rankSparkle 2.6s ease-in-out infinite;
        pointer-events: none;
    }
}

/* ==========================================================
   Leaderboard / TV-Display (1920x1080)
   ========================================================== */

.tv-display {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.tv-display .leaderboard-row {
    transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Podium-Hervorhebung */
.podium-1 { border-color: #ffd700 !important; --glow-color: rgba(255, 215, 0, 0.7); }
.podium-2 { border-color: #c0c0c0 !important; --glow-color: rgba(192, 192, 192, 0.7); }
.podium-3 { border-color: #cd7f32 !important; --glow-color: rgba(205, 127, 50, 0.7); }

/* ==========================================================
   Formulare
   ========================================================== */

.guild-input {
    background: #fdfaf2;
    border: 1px solid #b98d4f;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    width: 100%;
    color: #2a180a;
}

.guild-input:focus {
    outline: none;
    border-color: #ef7b1d;
    box-shadow: 0 0 0 3px rgba(239, 123, 29, 0.25);
}

.guild-input.input-error {
    border-color: #b91c1c;
    background: #fef2f2;
}

/* ==========================================================
   Bild-Zuschneiden (miniCrop)
   ========================================================== */

.crop-container {
    max-width: 100%;
    touch-action: none;
}

/* ==========================================================
   Druckansichten (Basis; Details in print.css)
   ========================================================== */

@media print {
    header, footer, nav, .no-print { display: none !important; }
    body { background: #fff !important; }
}