:root {
    --dragon-app-nav-height: 72px;
    --dragon-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.dragon-connection-bar {
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 99990;

    display: flex;
    align-items: center;
    gap: 7px;

    min-height: 28px;
    padding: 0 11px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.dragon-connection-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;
    flex: 0 0 auto;
}

.dragon-connection-bar.is-live {
    background: rgba(16, 39, 26, 0.92);
    border: 1px solid rgba(87, 205, 125, 0.3);
    color: #a8e6ba;
}

.dragon-connection-bar.is-live
.dragon-connection-dot {
    background: #59d47d;
    box-shadow: 0 0 8px rgba(89, 212, 125, 0.7);
}

.dragon-connection-bar.is-offline {
    background: rgba(48, 36, 16, 0.95);
    border: 1px solid rgba(227, 187, 91, 0.35);
    color: #efd899;
}

.dragon-connection-bar.is-offline
.dragon-connection-dot {
    background: #e0b657;
}

.dragon-connection-bar.is-checking {
    background: rgba(25, 29, 27, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd2cd;
}

.dragon-connection-bar.is-checking
.dragon-connection-dot {
    background: #949c97;
}


/* =========================================================
   MOBILE / TABLET APP NAVIGATION
   ========================================================= */

.dragon-bottom-nav,
.dragon-more-overlay {
    display: none;
}

@media (max-width: 900px) {

    body {
        padding-bottom:
            calc(
                var(--dragon-app-nav-height)
                + var(--dragon-safe-bottom)
                + 10px
            );
    }

    /*
     * Vorhandene Desktop-Navigation ausblenden.
     * Die restliche Kopfzeile bleibt bestehen.
     */
    header nav:not(.dragon-bottom-nav),
    .dragon-links {
        display: none !important;
    }

    .dragon-connection-bar {
        top: 8px;
        right: 8px;

        max-width: calc(100vw - 16px);

        font-size: 11px;
    }

    .dragon-bottom-nav {
        position: fixed;

        left: 8px;
        right: 8px;

        bottom:
            calc(
                8px
                + var(--dragon-safe-bottom)
            );

        z-index: 99980;

        display: grid;
        grid-template-columns: repeat(5, 1fr);

        height: var(--dragon-app-nav-height);

        overflow: hidden;

        border-radius: 20px;

        background: rgba(14, 19, 16, 0.96);

        border:
            1px solid
            rgba(255, 255, 255, 0.08);

        box-shadow:
            0 12px 35px rgba(0, 0, 0, 0.38);

        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .dragon-bottom-nav-item {
        appearance: none;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 3px;

        min-width: 0;

        border: 0;
        background: transparent;

        color: #8e9991;

        text-decoration: none;

        font-family: inherit;

        cursor: pointer;

        transition:
            color 0.15s ease,
            background 0.15s ease;
    }

    .dragon-bottom-nav-item.active {
        color: #78c98d;
        background:
            linear-gradient(
                to top,
                rgba(61, 139, 82, 0.14),
                transparent
            );
    }

    .dragon-nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        height: 25px;

        font-size: 23px;
        line-height: 1;
    }

    .dragon-nav-label {
        max-width: 100%;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 10px;
        font-weight: 700;
    }


    /* Mehr-Menü */

    .dragon-more-overlay {
        position: fixed;
        inset: 0;

        z-index: 100000;

        align-items: flex-end;

        background: rgba(0, 0, 0, 0);

        pointer-events: none;

        transition:
            background 0.2s ease;
    }

    .dragon-more-overlay.open {
        display: flex;

        background:
            rgba(0, 0, 0, 0.54);

        pointer-events: auto;
    }

    .dragon-more-sheet {
        width: 100%;

        box-sizing: border-box;

        padding:
            10px
            18px
            calc(
                18px
                + env(safe-area-inset-bottom, 0px)
            );

        border-radius: 26px 26px 0 0;

        background: #111713;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.09);

        box-shadow:
            0 -20px 45px
            rgba(0, 0, 0, 0.36);

        transform: translateY(100%);

        animation:
            dragon-sheet-in
            0.22s ease forwards;
    }

    @keyframes dragon-sheet-in {
        to {
            transform: translateY(0);
        }
    }

    .dragon-more-handle {
        width: 42px;
        height: 4px;

        margin: 0 auto 18px;

        border-radius: 999px;

        background:
            rgba(255, 255, 255, 0.16);
    }

    .dragon-more-title {
        margin-bottom: 12px;

        color: #ecf2ee;

        font-size: 20px;
        font-weight: 800;
    }

    .dragon-more-link {
        display: flex;
        align-items: center;

        gap: 14px;

        padding: 14px 12px;

        margin-bottom: 8px;

        border-radius: 15px;

        color: #e5ebe7;

        text-decoration: none;

        background:
            rgba(255, 255, 255, 0.035);

        border:
            1px solid
            rgba(255, 255, 255, 0.055);
    }

    .dragon-more-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 42px;
        height: 42px;

        border-radius: 12px;

        background:
            rgba(71, 154, 93, 0.14);

        color: #79cb90;

        font-size: 20px;
    }

    .dragon-more-link strong,
    .dragon-more-link small {
        display: block;
    }

    .dragon-more-link strong {
        font-size: 14px;
    }

    .dragon-more-link small {
        margin-top: 3px;

        color: #87928a;

        font-size: 11px;
    }

    .dragon-more-close {
        width: 100%;

        margin-top: 10px;
        padding: 13px;

        border-radius: 13px;

        border:
            1px solid
            rgba(255, 255, 255, 0.07);

        background:
            rgba(255, 255, 255, 0.04);

        color: #aab4ad;

        font-family: inherit;
        font-weight: 700;
    }

    body.dragon-menu-open {
        overflow: hidden;
    }
}


/* =========================================================
   HANDY
   ========================================================= */

@media (max-width: 600px) {

    :root {
        --dragon-app-nav-height: 66px;
    }

    .dragon-bottom-nav {
        left: 6px;
        right: 6px;

        bottom:
            calc(
                6px
                + var(--dragon-safe-bottom)
            );

        border-radius: 18px;
    }

    .dragon-nav-icon {
        font-size: 21px;
    }

    .dragon-nav-label {
        font-size: 9px;
    }

    .dragon-connection-bar {
        max-width: 72vw;
    }
}


/* =========================================================
   INSTALLIERTE PWA
   ========================================================= */

@media (display-mode: standalone) {

    body {
        overscroll-behavior-y: contain;
    }

    @media (max-width: 900px) {
        .dragon-bottom-nav {
            bottom:
                calc(
                    8px
                    + env(
                        safe-area-inset-bottom,
                        0px
                    )
                );
        }
    }
}


/* =========================================================
   Dragon Mobile Fix – Hero + Mods Bottom Navigation
   ========================================================= */

@media (max-width: 900px) {

    /*
     * Startseiten-Hero:
     * Text nicht mehr lose über dem Dragon-Logo,
     * sondern als eigene ruhige Fläche.
     */
    .dragon-mobile-hero-copy {
        display: inline-block;

        max-width: min(92%, 560px);

        margin-top: 16px;
        padding: 14px 18px 16px;

        border-radius: 18px;

        background: rgba(7, 11, 9, 0.72);

        border:
            1px solid
            rgba(255, 255, 255, 0.08);

        box-shadow:
            0 10px 30px
            rgba(0, 0, 0, 0.32);

        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
    }

    .dragon-mobile-hero-copy h1 {
        margin: 0 0 8px 0 !important;

        font-size:
            clamp(34px, 7vw, 54px) !important;

        line-height: 1.02 !important;
    }

    .dragon-mobile-hero-copy p {
        margin: 0 !important;

        font-size:
            clamp(16px, 3.5vw, 22px) !important;

        line-height: 1.25 !important;
    }


    /*
     * Bottom-Navigation auf ALLEN Seiten erzwingen,
     * insbesondere auf /mods/.
     */
    #dragon-bottom-nav {
        position: fixed !important;

        left: 8px !important;
        right: 8px !important;

        bottom:
            calc(
                8px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            ) !important;

        z-index: 2147483000 !important;

        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;

        transform: none !important;
        translate: none !important;

        overflow: hidden !important;

        isolation: isolate !important;
    }

    #dragon-bottom-nav .dragon-bottom-nav-item {
        position: relative !important;

        display: flex !important;

        visibility: visible !important;
        opacity: 1 !important;

        transform: none !important;

        z-index: 1 !important;
    }


    /*
     * Mods-Seite hat eigene Layout-Regeln.
     * Diese dürfen die App-Navigation nicht beeinflussen.
     */
    body #dragon-bottom-nav {
        float: none !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
    }
}


@media (max-width: 600px) {

    .dragon-mobile-hero-copy {
        max-width: calc(100% - 24px);

        margin-top: 12px;

        padding: 12px 14px 14px;
    }

    .dragon-mobile-hero-copy h1 {
        font-size:
            clamp(30px, 9vw, 42px) !important;
    }

    .dragon-mobile-hero-copy p {
        font-size:
            clamp(15px, 4vw, 18px) !important;
    }

    #dragon-bottom-nav {
        left: 6px !important;
        right: 6px !important;
    }
}

/* Dragon App: Hero-Text auf Handy/Tablet entfernen */
@media (max-width: 900px) {
    .dragon-mobile-hero-copy {
        display: none !important;
    }
}


/* =========================================================
   Dragon App – einheitliche Hero-Darstellung
   ========================================================= */

/*
 * Versionsseite:
 * gleicher Dragon-Hintergrund wie die übrigen Bereiche.
 */
.dragon-changelog-hero {
    width: 100%;
    min-height: 42vh;

    background-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.04) 0%,
            rgba(0, 0, 0, 0.10) 65%,
            rgba(16, 19, 16, 1) 100%
        ),
        url('/dragon-mods-background.png');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/*
 * Handy / Tablet:
 * Livemap, Höfe und Statistik zeigen im Hero nur
 * das Dragon-Bild – keine zusätzliche Überschrift.
 */
@media (max-width: 900px) {

    .dragon-mobile-clean-hero {
        position: relative;
    }

    .dragon-mobile-clean-hero > * {
        display: none !important;
    }

    .dragon-changelog-hero {
        min-height: 36vh;
        background-position: center center;
    }
}


@media (max-width: 600px) {

    .dragon-changelog-hero {
        min-height: 31vh;
    }
}


/* =========================================================
   Dragon App – FINAL Hero Fix
   ========================================================= */

/*
 * Versionsseite bekommt denselben Hintergrund
 * wie Home / Livemap / Höfe / Statistik.
 */
body.dragon-page-changelog .page-hero {
    width: 100%;

    background-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.10) 70%,
            rgba(16, 19, 16, 1) 100%
        ),
        url('/dragon-mods-background.png') !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/*
 * Handy und Tablet:
 * Die Beschriftung über dem Dragon-Bild wird entfernt.
 */
@media (max-width: 900px) {

    body.dragon-page-home
    .page-hero-inner,

    body.dragon-page-livemap
    .page-hero-inner,

    body.dragon-page-farms
    .page-hero-inner,

    body.dragon-page-statistics
    .page-hero-inner,

    body.dragon-page-changelog
    .page-hero-inner {
        display: none !important;
    }

    /*
     * Hero bleibt trotzdem sichtbar.
     */
    body.dragon-page-home
    .page-hero,

    body.dragon-page-livemap
    .page-hero,

    body.dragon-page-farms
    .page-hero,

    body.dragon-page-statistics
    .page-hero,

    body.dragon-page-changelog
    .page-hero {
        min-height: 32vh !important;
    }
}


@media (max-width: 600px) {

    body.dragon-page-home
    .page-hero,

    body.dragon-page-livemap
    .page-hero,

    body.dragon-page-farms
    .page-hero,

    body.dragon-page-statistics
    .page-hero,

    body.dragon-page-changelog
    .page-hero {
        min-height: 28vh !important;
    }
}


/* =========================================================
   Dragon App – Install Button
   ========================================================= */

#dragon-install-button {

    position: fixed;

    right: 16px;
    bottom: 88px;

    z-index: 99999;

    align-items: center;
    justify-content: center;

    padding: 11px 16px;

    border: 1px solid
        rgba(104, 214, 125, 0.45);

    border-radius: 12px;

    background:
        rgba(16, 21, 18, 0.96);

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.35);

    cursor: pointer;
}


@media (min-width: 901px) {

    #dragon-install-button {
        bottom: 24px;
    }
}


/* =========================================================
   Dragon LS – Download Versionsanzeige
   ========================================================= */

#dragon-install-button .dragon-install-version {
    margin-left: 8px;
    padding-left: 8px;

    border-left:
        1px solid rgba(255, 255, 255, 0.18);

    font-size: 10px;
    font-weight: 500;

    opacity: 0.62;
}


/* =========================================================
   DRAGON_WEB_HERO_TEXT_HIDE_FINAL
   Hero-Beschriftung auf Website entfernen
   ========================================================= */

body.dragon-page-home .page-hero-inner,
body.dragon-page-livemap .page-hero-inner,
body.dragon-page-farms .page-hero-inner,
body.dragon-page-statistics .page-hero-inner,
body.dragon-page-changelog .page-hero-inner {
    display: none !important;
}

.dragon-mobile-hero-copy {
    display: none !important;
}