/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-y3tz8syngw] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.main-content-wrapper[b-y3tz8syngw] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}

.content-area[b-y3tz8syngw] {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}

.content[b-y3tz8syngw] { /* Dieser Container beinhaltet @Body, also die Chess.razor Seite */
    padding-top: calc(1.1rem + 45px);
    /* F�r globalen Burger-Button etc. */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    overflow-y: hidden;
    /* WICHTIG: Verhindert Scrollen im Hauptinhaltsbereich */
    flex-grow: 1;
    display: flex;
    /* Macht .content zum Flex-Container */
    flex-direction: column;
    /* Ordnet Kinder (global-timers-mobile, chess-page-container) untereinander an */
}

.global-burger-button[b-y3tz8syngw] {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1051;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    border-radius: 0.25rem;
    background-color: #2C2C2C;
    border-color: #444444;
    color: #E0E0E0;
}

    .global-burger-button i.bi-list[b-y3tz8syngw] {
        font-size: 1.2rem;
        vertical-align: middle;
    }

.settings-button-relocated[b-y3tz8syngw] {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 1030;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1;
    background-color: #2C2C2C;
    border-color: #444444;
    color: #E0E0E0;
}

    .settings-button-relocated i.bi-gear-fill[b-y3tz8syngw] {
        font-size: 1.1rem;
        vertical-align: middle;
    }


@media (min-width: 768px) {
    .page[b-y3tz8syngw] {
        flex-direction: row;
    }

    .content[b-y3tz8syngw] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .top-row[b-y3tz8syngw] {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

        .top-row.auth[b-y3tz8syngw]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }
}

.top-row .navbar-toggler.mobile-burger-button[b-y3tz8syngw] {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(224, 224, 224, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    border: none;
}

    .top-row .navbar-toggler.mobile-burger-button:focus[b-y3tz8syngw] {
        box-shadow: none;
    }
/* /Layout/NavMenu.razor.rz.scp.css */
/* File: [SolutionDir]/ChessClient/Layout/NavMenu.razor.css */
.nav-menu-component.sidebar[b-p7wr2jtwsg] {
    width: 250px;
    background-image: linear-gradient(180deg, #1A1A1D 0%, #2C2C2C 70%);
    height: 100vh;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    z-index: 1040;
}

    .nav-menu-component.sidebar .top-row[b-p7wr2jtwsg] {
        /* Unver�ndert */
    }

    .nav-menu-component.sidebar .navbar-brand[b-p7wr2jtwsg] {
        font-size: 1.1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #E0E0E0;
    }

    .nav-menu-component.sidebar .nav-scrollable-content[b-p7wr2jtwsg] {
        flex-grow: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .nav-menu-component.sidebar.desktop.pinned[b-p7wr2jtwsg] {
        transform: translateX(0%);
    }

    .nav-menu-component.sidebar.offcanvas-like[b-p7wr2jtwsg] {
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        border-right: 1px solid #444444;
        z-index: 1050;
    }

        .nav-menu-component.sidebar.offcanvas-like.open[b-p7wr2jtwsg] {
            transform: translateX(0%);
        }

.nav-overlay-external-control[b-p7wr2jtwsg] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1049; /* Unter dem NavMenu-Overlay selbst */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

    .nav-overlay-external-control.show[b-p7wr2jtwsg] {
        opacity: 1;
        visibility: visible;
    }

.nav-item[b-p7wr2jtwsg] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-p7wr2jtwsg] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-p7wr2jtwsg] {
        padding-bottom: 1rem;
    }

    .nav-item[b-p7wr2jtwsg]  a,
    .nav-item .btn-link[b-p7wr2jtwsg] {
        color: #B0B0B0;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        padding-left: 1rem;
        text-decoration: none;
        width: 100%;
        text-align: left;
    }

        .nav-item[b-p7wr2jtwsg]  a.active {
            background-color: rgba(165, 91, 75, 0.37);
            color: #E0E0E0;
        }

        .nav-item[b-p7wr2jtwsg]  a:hover,
        .nav-item .btn-link:hover[b-p7wr2jtwsg] {
            background-color: rgba(224, 224, 224, 0.1);
            color: #E0E0E0;
        }
/* /Layout/RightSideDrawer.razor.rz.scp.css */
.drawer-overlay[b-klvzx0vw3l] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

    .drawer-overlay.open[b-klvzx0vw3l] {
        opacity: 1;
        visibility: visible;
    }

.drawer-content[b-klvzx0vw3l] {
    position: fixed;
    top: 0;
    width: 520px;
    right: -520px;
    max-width: 100vw;
    height: 100%;
    background-color: #2C2C2C;
    color: #E0E0E0;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    padding: 20px;
    z-index: 1041;
    transition: right 0.3s ease-in-out;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

    .drawer-content.open[b-klvzx0vw3l] {
        right: 0;
    }

.drawer-close-button[b-klvzx0vw3l] {
    position: absolute;
    top: 10px;
    right: 10px;
}

.drawer-section[b-klvzx0vw3l] {
    margin-bottom: 20px;
}

    .drawer-section h6[b-klvzx0vw3l] {
        margin-bottom: 10px;
        font-weight: bold;
        color: #A55B4B;
    }

.logs-panel[b-klvzx0vw3l] {
    width: 100%;
    height: 200px;
    max-height: none;
    font-size: 0.75rem;
    border: 1px solid #444444;
    background-color: #1A1A1D;
}

@media (max-width: 540px) {
    .drawer-content[b-klvzx0vw3l] {
        width: 100%;
        right: -100%;
    }
}
/* /Pages/Chess.razor.rz.scp.css */
/* Styling für die Anordnung der Timer auf mobilen Geräten (standardmässig ausgeblendet). */
.global-timers-mobile[b-jpz5ytl4ew] {
    display: none !important;
}

/* Styling für die Anordnung der Timer auf dem Desktop (standardmässig sichtbar). */
.timers-desktop-only[b-jpz5ytl4ew] {
    display: block !important;
    margin-bottom: 15px;
    flex-shrink: 0;
}

/* Haupt-Container der Spielseite. Verwendet Flexbox für das zweispaltige Layout. */
.chess-page-container[b-jpz5ytl4ew] {
    display: flex;
    flex-direction: row; /* Ordnet Brett und Seitenpanel nebeneinander an. */
    gap: 20px;
    box-sizing: border-box;
    overflow: hidden; /* Verhindert unerwünschtes Scrollen. */
    flex-grow: 1; /* Nimmt den maximal verfügbaren Platz im übergeordneten Container ein. */
    min-height: 0; /* Wichtiger Flexbox-Fix zur Verhinderung von Überlauf. */
    align-items: stretch; /* Dehnt die Spalten auf die gleiche Höhe. */
}

/* Die linke Spalte, die das Schachbrett enthält. */
.chessboard-column[b-jpz5ytl4ew] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    padding: 10px;
}

/* Der direkte Wrapper um die ChessBoard-Komponente. */
.chessboard-container[b-jpz5ytl4ew] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1; /* Stellt sicher, dass der Container immer quadratisch ist. */
}

/* Die rechte Spalte (Seiten-Panel) für Timer, Historie und Handkarten. */
.game-side-panel[b-jpz5ytl4ew] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    flex-grow: 1;
    min-width: 380px; /* Mindestbreite, um das Layout auf Desktop zu gewährleisten. */
    flex-shrink: 1;
}

    /* Styling für den scrollbaren Bereich der Kartenhistorie. */
    .game-side-panel .played-cards-history-display-wrapper[b-jpz5ytl4ew] {
        overflow-y: auto;
        min-height: 80px;
        flex-grow: 1;
        border: 1px solid #444444;
        border-radius: 6px;
        padding: 8px;
        background-color: #2C2C2C;
        flex-shrink: 1;
        /* Benutzerdefinierte Scrollbar. */
        scrollbar-width: thin;
        scrollbar-color: #A55B4B #2C2C2C;
    }

        /* Benutzerdefinierte Scrollbar für Webkit-Browser. */
        .game-side-panel .played-cards-history-display-wrapper[b-jpz5ytl4ew]::-webkit-scrollbar {
            width: 10px;
        }

        .game-side-panel .played-cards-history-display-wrapper[b-jpz5ytl4ew]::-webkit-scrollbar-track {
            background: #2C2C2C;
            border-radius: 10px;
        }

        .game-side-panel .played-cards-history-display-wrapper[b-jpz5ytl4ew]::-webkit-scrollbar-thumb {
            background: #444444;
            border-radius: 10px;
            border: 2px solid #2C2C2C;
        }

            .game-side-panel .played-cards-history-display-wrapper[b-jpz5ytl4ew]::-webkit-scrollbar-thumb:hover {
                background: #A55B4B;
            }

    /* Container für die unteren Elemente (Handkarten und Nachziehstapel). */
    .game-side-panel .bottom-game-elements[b-jpz5ytl4ew] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        min-height: 120px;
    }

/* Stellt sicher, dass die Handkarten den meisten Platz im unteren Bereich einnehmen. */
.bottom-game-elements > :first-child[b-jpz5ytl4ew] {
    flex-grow: 1;
    min-width: 0;
    height: 100%;
}

.bottom-game-elements > :last-child[b-jpz5ytl4ew] {
    flex-shrink: 0;
}

/* Styling für das Lade-Overlay beim Erstellen eines Spiels. */
.loading-overlay[b-jpz5ytl4ew] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    color: #E0E0E0;
}

/* Mobile Layout Anpassungen */
@media (max-width: 992px) {
    /* Zeigt die mobilen Timer an. */
    .global-timers-mobile[b-jpz5ytl4ew] {
        display: flex !important;
        width: 100%;
        margin-bottom: 5px;
        flex-shrink: 0;
    }

    /* Versteckt die Desktop-Timer. */
    .timers-desktop-only[b-jpz5ytl4ew] {
        display: none !important;
    }

    /* Ordnet das Layout in einer einzigen Spalte an. */
    .chess-page-container[b-jpz5ytl4ew] {
        flex-direction: column;
        padding: 0;
        gap: 5px;
        align-items: normal;
    }

    .chessboard-column[b-jpz5ytl4ew] {
        flex-basis: auto !important;
        width: 100%;
        padding: 0;
        margin: 0;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-start;
        min-width: unset;
        height: auto;
        aspect-ratio: unset !important;
    }

    .chessboard-container[b-jpz5ytl4ew] {
        width: 100%;
        max-width: 100vw;
        height: auto;
        margin: 0;
        padding: 0;
        aspect-ratio: unset !important;
    }

    /* Passt das Seiten-Panel für die mobile Ansicht an. */
    .game-side-panel[b-jpz5ytl4ew] {
        min-width: unset;
        width: 100%;
        flex-grow: 1;
        min-height: 0;
        padding: 0 5px 5px 5px;
        gap: 5px;
        max-width: none;
        flex-basis: auto;
    }

        .game-side-panel .played-cards-history-display-wrapper[b-jpz5ytl4ew] {
            min-height: 50px;
            max-height: 100px;
            flex-grow: 0;
            flex-shrink: 1;
            margin-bottom: 5px;
            display: block;
        }

            /* Klasse, um die Historie auf Mobilgeräten standardmässig auszublenden. */
            .game-side-panel .played-cards-history-display-wrapper.hidden-on-mobile[b-jpz5ytl4ew] {
                display: none !important;
            }


    .bottom-game-elements[b-jpz5ytl4ew] {
        margin-top: 0;
        padding: 5px;
        min-height: 100px;
    }
}

/* Weitere Anpassungen für sehr schmale Bildschirme. */
@media (max-width: 420px) {
    .bottom-game-elements[b-jpz5ytl4ew] {
        min-height: 90px;
    }

    .game-side-panel .played-cards-history-display-wrapper[b-jpz5ytl4ew] {
        max-height: 80px;
    }
}

/* Styling für den Willkommens-Bildschirm. */
.welcome-container-fullpage[b-jpz5ytl4ew] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Keyframes für Animationen auf dem Willkommens-Bildschirm */
@keyframes fadeIn-b-jpz5ytl4ew {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInAndSlideUp-b-jpz5ytl4ew {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.static-cards-container[b-jpz5ytl4ew] {
    position: relative;
    width: 150px;
    height: 210px;
    margin-bottom: 20px;
    opacity: 0;
    animation: fadeIn-b-jpz5ytl4ew 1s ease-out 0.2s forwards;
}

.static-card-wrapper[b-jpz5ytl4ew] {
    position: absolute;
    width: 100%;
    height: 100%;
}

    .static-card-wrapper img[b-jpz5ytl4ew] {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }

    .static-card-wrapper.static-card-1[b-jpz5ytl4ew] {
        z-index: 1;
        transform: translateX(-55px) rotateZ(-15deg);
    }

    .static-card-wrapper.static-card-2[b-jpz5ytl4ew] {
        z-index: 2;
        transform: translateY(-20px) rotateZ(0deg);
    }

    .static-card-wrapper.static-card-3[b-jpz5ytl4ew] {
        z-index: 3;
        transform: translateX(55px) rotateZ(15deg);
    }

/* Styling für Titel und Untertitel auf dem Willkommens-Bildschirm. */
.logo-text-title[b-jpz5ytl4ew] {
    font-size: 4rem;
    font-weight: bold;
    color: #C2A169;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    font-family: "Varela", sans-serif;
    font-weight: 900;
}

.logo-text-subtitle[b-jpz5ytl4ew] {
    font-size: 1.5rem;
    color: #D4B98A;
    margin-top: -10px;
    font-family: "Varela", sans-serif;
    font-weight: 400;
}

/* Anpassungen für mittelgrosse Bildschirme, um den Platz besser zu nutzen. */
@media (min-width: 992px) and (max-width: 1400px) {
    .chess-page-container[b-jpz5ytl4ew] {
        gap: 10px; /* Reduziert den Abstand zwischen Brett und Seitenpanel. */
    }

    .game-side-panel[b-jpz5ytl4ew] {
        min-width: 320px; /* Reduziert die Mindestbreite des Seitenpanels. */
    }

    .chessboard-column[b-jpz5ytl4ew] {
        /* Stellt sicher, dass das Brett nicht breiter wird als der verfügbare vertikale Platz es erlaubt. */
        max-width: calc(100vh - 80px); /* 80px Puffer für Padding etc. */
    }
}
/* /Pages/Components/Animations/CardActivationAnimation.razor.rz.scp.css */
/* Das Overlay, das den gesamten Bildschirm abdunkelt, während die Animation läuft. */
.card-animation-overlay[b-7l6p4ty9i8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    /* Führt die Einblend-Animation aus. */
    animation: cardOverlayFadeIn-b-7l6p4ty9i8 0.3s ease-out forwards;
}

/* Keyframe-Animation für das Einblenden des Overlays. */
@keyframes cardOverlayFadeIn-b-7l6p4ty9i8 {
    to {
        opacity: 1;
    }
}

/* Der Container für die animierte Karte in der Mitte des Bildschirms. */
.card-animation-container[b-7l6p4ty9i8] {
    width: 280px;
    height: 390px;
    transform: scale(0.5);
    opacity: 0;
    /* Startet die Pop-In-Animation mit einer leichten Verzögerung. */
    animation: cardPopIn-b-7l6p4ty9i8 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.1s forwards;
    position: relative;
}

/* Keyframe-Animation für das "Hineinpoppen" der Karte von unten mit einem leichten "Bounce"-Effekt. */
@keyframes cardPopIn-b-7l6p4ty9i8 {
    0% {
        transform: scale(0.5) translateY(50px);
        opacity: 0;
    }

    100% {
        transform: scale(1.1); /* Skaliert leicht über die Endgrösse hinaus. */
        opacity: 1;
    }
}

/* Ein Wrapper, der die 3D-Perspektive für den Flip-Effekt ermöglicht. */
.class_flipper_wrapper_for_perspective[b-7l6p4ty9i8] {
    perspective: 1200px;
    width: 100%;
    height: 100%;
}

/* Der eigentliche Flipper, der die 3D-Rotation um die Y-Achse durchführt. */
.card-flipper[b-7l6p4ty9i8] {
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
    position: relative;
    /* Hardware-Beschleunigung für flüssigere Animationen erzwingen. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

    /* Diese CSS-Klasse wird per C# gesetzt, um die Drehung um 180 Grad auszulösen. */
    .card-flipper.is-flipped[b-7l6p4ty9i8] {
        transform: rotateY(-180deg);
    }

/* Gemeinsames Styling für die Vorder- und Rückseite der Karte. */
.card-face[b-7l6p4ty9i8] {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Versteckt die Rückseite einer 3D-transformierten Fläche. */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    border-radius: 15px;
    overflow: hidden;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.card-front[b-7l6p4ty9i8] {
    background-color: #2C2C2C;
}

/* Die Rückseite der Karte ist initial um 180 Grad gedreht. */
.card-back[b-7l6p4ty9i8] {
    transform: rotateY(180deg);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Stellt sicher, dass das Bild der Kartenrückseite den Container füllt. */
    .card-back img[b-7l6p4ty9i8] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 15px;
        /* Fix für Rendering-Glitches in manchen Browsern. */
        -webkit-transform: translateZ(0.1px);
        transform: translateZ(0.1px);
    }

/* Diese Stile definieren das Aussehen der Kartenvorderseite und sind eine Kopie aus CardInfoPanel. */
.card-visual-representation-animated[b-7l6p4ty9i8] {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.card-art-layer-animated[b-7l6p4ty9i8] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-art-actual-image-animated[b-7l6p4ty9i8] {
    width: 68%;
    margin-top: -40%;
    object-fit: cover;
    border-radius: 8px;
}

.card-frame-image-animated[b-7l6p4ty9i8] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.card-content-layer-animated[b-7l6p4ty9i8] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.card-title-section-animated[b-7l6p4ty9i8] {
    position: absolute;
    top: 69%;
    left: 10%;
    width: 80%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.card-title-text-animated[b-7l6p4ty9i8] {
    font-size: 1.1em;
    font-weight: bold;
    color: #E0E0E0;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
}

/* Aktiviert die Leucht-Animation, wenn die entsprechende Klasse gesetzt wird. */
.card-animation-container.glow-animation-active .card-flipper .card-face.card-front[b-7l6p4ty9i8] {
    animation: cardGlowEffectAnimated-b-7l6p4ty9i8 0.4s ease-in-out infinite alternate;
}

/* Keyframe-Animation für den pulsierenden Leuchteffekt. */
@keyframes cardGlowEffectAnimated-b-7l6p4ty9i8 {
    from {
        box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 15px #A55B4B, 0 0 25px rgba(165, 91, 75, 0.8), 0 0 35px rgba(165, 91, 75, 0.6);
    }

    to {
        box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 30px #A55B4B, 0 0 45px rgba(165, 91, 75, 0.9), 0 0 60px rgba(165, 91, 75, 0.7);
    }
}

/* Löst die "Wegfliegen"-Animation aus. */
.card-animation-container.animate-to-history[b-7l6p4ty9i8] {
    animation: moveToHistoryAndFade-b-7l6p4ty9i8 0.25s ease-in forwards;
}

/* Keyframe-Animation für das Verkleinern und Wegbewegen der Karte. */
@keyframes moveToHistoryAndFade-b-7l6p4ty9i8 {
    0% {
        transform: scale(1.1) translate(0, 0);
        opacity: 1;
    }

    100% {
        /* Bewegt die Karte diagonal nach rechts oben aus dem Bild. */
        transform: scale(0.05) translate(35vw, -25vh);
        opacity: 0;
    }
}
/* /Pages/Components/Animations/CardSwapSpecificAnimation.razor.rz.scp.css */
/* Das Overlay, das den gesamten Bildschirm abdunkelt, während die Animation läuft. */
.card-swap-specific-overlay[b-wzn9st07e8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1900;
    opacity: 0;
    animation: swapOverlayFadeIn-b-wzn9st07e8 0.3s ease-out forwards;
}

/* Keyframe-Animation zum Einblenden des Overlays. */
@keyframes swapOverlayFadeIn-b-wzn9st07e8 {
    to {
        opacity: 1;
    }
}

/* Der Container, der die 3D-Perspektive für die Karten bereitstellt. */
.card-swap-specific-container[b-wzn9st07e8] {
    position: relative;
    width: 600px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

/* Basis-Styling für eine der beiden animierten Karten. */
.swapping-card[b-wzn9st07e8] {
    width: 220px;
    height: calc(220px * 1050 / 750);
    position: absolute;
    transform-style: preserve-3d;
    opacity: 0;
    transform: scale(0.7);
}

    /* Gemeinsames Styling für den Flipper-Mechanismus beider Karten. */
    .swapping-card .card-flipper[b-wzn9st07e8] {
        width: 100%;
        height: 100%;
        transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
        transform-style: preserve-3d;
        position: relative;
        /* Hardware-Beschleunigung für flüssigere Animationen erzwingen. "Mobile Fix" */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

        /* Klasse, die die 3D-Drehung auslöst. */
        .swapping-card .card-flipper.is-flipped[b-wzn9st07e8] {
            transform: rotateY(-180deg);
        }

    /* Styling für die Kartenflächen (Vorder- und Rückseite). */
    .swapping-card .card-face[b-wzn9st07e8] {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0,0,0,0.25);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* Hardware-Beschleunigung für flüssigere Animationen erzwingen. "Mobile Fix" */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .swapping-card .card-back[b-wzn9st07e8] {
        transform: rotateY(180deg);
    }

        .swapping-card .card-back img[b-wzn9st07e8] {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    /* Styling für die Bildelemente und Texte auf der Kartenvorderseite. */
    .swapping-card .swap-card-art[b-wzn9st07e8] {
        position: absolute;
        width: 68%;
        top: 15%;
        left: 16%;
        z-index: 1;
    }

    .swapping-card .swap-card-frame[b-wzn9st07e8] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .swapping-card .swap-card-title[b-wzn9st07e8] {
        position: absolute;
        bottom: 22%;
        left: 10%;
        width: 80%;
        font-size: 0.9em;
        font-weight: bold;
        color: #E0E0E0;
        text-align: center;
        z-index: 3;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
    }

    /* Animationsklassen, die vom C#-Code gesetzt werden, um die Bewegung zu steuern. */

    /* Phase 1: Karten fliegen in die Mitte. */
    .swapping-card.fly-in-from-bottom-to-left-center[b-wzn9st07e8] {
        animation: flyInBottomToLeftCenter-b-wzn9st07e8 1s forwards cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .swapping-card.fly-in-from-top-to-right-center[b-wzn9st07e8] {
        animation: flyInTopToRightCenter-b-wzn9st07e8 1s forwards cubic-bezier(0.25, 0.1, 0.25, 1);
    }

@keyframes flyInBottomToLeftCenter-b-wzn9st07e8 {
    from {
        transform: translateY(280px) translateX(-200px) scale(0.7);
        opacity: 0;
    }

    to {
        transform: translateY(0px) translateX(-70px) scale(1);
        opacity: 1;
    }
}

@keyframes flyInTopToRightCenter-b-wzn9st07e8 {
    from {
        transform: translateY(-280px) translateX(200px) scale(0.7);
        opacity: 0;
    }

    to {
        transform: translateY(0px) translateX(70px) scale(1);
        opacity: 1;
    }
}

/* Phase 1.5: Halteposition in der Mitte. */
.swapping-card.in-center-left[b-wzn9st07e8] {
    transform: translateY(0px) translateX(-70px) scale(1);
    opacity: 1;
}

.swapping-card.in-center-right[b-wzn9st07e8] {
    transform: translateY(0px) translateX(70px) scale(1);
    opacity: 1;
}

/* Phase 3: Karten fliegen aus der Mitte zu den neuen Besitzern. */
.swapping-card.fly-out-to-opponent-from-left[b-wzn9st07e8] {
    animation: flyOutToOpponentFromLeftCenter-b-wzn9st07e8 1s forwards cubic-bezier(0.75, 0, 0.75, 0.9);
}

.swapping-card.fly-out-to-player-from-right[b-wzn9st07e8] {
    animation: flyOutToPlayerFromRightCenter-b-wzn9st07e8 1s forwards cubic-bezier(0.75, 0, 0.75, 0.9);
}

@keyframes flyOutToOpponentFromLeftCenter-b-wzn9st07e8 {
    from {
        transform: translateY(0px) translateX(-70px) scale(1);
        opacity: 1;
    }

    to {
        transform: translateY(-280px) translateX(200px) scale(0.7);
        opacity: 0;
    }
}

@keyframes flyOutToPlayerFromRightCenter-b-wzn9st07e8 {
    from {
        transform: translateY(0px) translateX(70px) scale(1);
        opacity: 1;
    }

    to {
        transform: translateY(280px) translateX(-200px) scale(0.7);
        opacity: 0;
    }
}
/* /Pages/Components/Animations/GlobalEffectsOverlay.razor.rz.scp.css */
/* Basis-Styling für alle globalen Animations-Overlays. */
.global-animation-overlay[b-h1z9xfg6m4] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* 'pointer-events: none' ist entscheidend, damit Klicks "durch" das Overlay zu den dahinterliegenden Elementen gelangen. */
    pointer-events: none;
    /* Stellt sicher, dass das Overlay über dem meisten Inhalt, aber unter den Modals (z-index: 1050+) liegt. */
    z-index: 1040;
}

/* Spezielles Styling für das Gewinn-Overlay. */
.win-overlay[b-h1z9xfg6m4] {
    /* Fügt einen halbtransparenten schwarzen Hintergrund hinzu, um den Fokus auf die Sieges-Animation zu legen. */
    background-color: rgba(0, 0, 0, 0.75);
    /* Erlaubt Klicks auf diesem spezifischen Overlay, um z.B. das WinLossModal zu bedienen. */
    pointer-events: auto;
    /* Führt eine sanfte Einblend-Animation aus. */
    animation: fadeInWin-b-h1z9xfg6m4 0.3s ease;
}

@keyframes fadeInWin-b-h1z9xfg6m4 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Styling für ein einzelnes Konfetti-Element. */
.confetti[b-h1z9xfg6m4] {
    /* CSS-Variablen, die per Inline-Style aus dem C#-Code befüllt werden. */
    --start-x: 50vw;
    --delay: 0s;
    --duration: 5s;
    --rotation: 0deg;
    --color: #fff;
    position: absolute;
    /* Startet über dem sichtbaren Bereich. */
    top: -20px;
    /* Die horizontale Startposition wird durch die Variable gesteuert. */
    left: var(--start-x);
    width: 10px;
    height: 20px;
    background-color: var(--color);
    /* Startet unsichtbar und wird durch die Animation sichtbar. */
    opacity: 0;
    /* Weist die 'fall'-Animation mit den individuellen Werten zu. */
    animation: fall-b-h1z9xfg6m4 var(--duration) var(--delay) linear forwards;
}

/* Keyframe-Animation, die das Fallen und Rotieren eines Konfetti-Stücks beschreibt. */
@keyframes fall-b-h1z9xfg6m4 {
    0% {
        opacity: 1;
        transform: translateY(0) rotateZ(0deg);
    }

    100% {
        opacity: 0.8;
        /* Bewegt das Konfetti über die gesamte Bildschirmhöhe und wendet die zufällige Rotation an. */
        transform: translateY(105vh) rotateZ(var(--rotation));
    }
}

/* Spezielles Styling für das Verlust-Overlay. */
.loss-overlay[b-h1z9xfg6m4] {
    /* Ein subtiler, roter Schleier. */
    background-color: rgba(30, 10, 10, 0.2);
    /* Sanftes Einblenden. */
    animation: fadeInLoss-b-h1z9xfg6m4 1s ease;
}

@keyframes fadeInLoss-b-h1z9xfg6m4 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Pages/Components/Animations/LandingAnimation.razor.rz.scp.css */
/* Styling für das bildschirmfüllende Overlay der Startanimation. */
.landing-overlay[b-n8sg2q73lo] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #1A1A1D; /* Dunkler Hintergrund, passend zum App-Theme. */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000; /* Sehr hoher z-index, um über allem anderen zu liegen. */
    opacity: 1;
    /* Sanfter Übergang für das Ausblenden am Ende. */
    transition: opacity 0.5s ease-out;
}

    /* Klasse, die das Ausblenden des Overlays steuert. */
    .landing-overlay.fade-out[b-n8sg2q73lo] {
        opacity: 0;
        pointer-events: none; /* Verhindert Interaktionen während des Ausblendens. */
    }

/* Der Bereich, in dem die 3D-Animationen stattfinden. */
.animation-canvas[b-n8sg2q73lo] {
    perspective: 1500px; /* Definiert die 3D-Perspektive für Kind-Elemente. */
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Karten Styles */
.cards-container[b-n8sg2q73lo] {
    position: relative;
    width: 150px;
    height: 210px;
    transform-style: preserve-3d; /* Erforderlich für 3D-Transformationen der Kinder. */
}

/* Styling für den Wrapper jeder einzelnen Karte. */
.card-wrapper[b-n8sg2q73lo] {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Definiert die Dauer und das Timing der transform-Animation. */
    transition: transform 1.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
    backface-visibility: hidden; /* Versteckt die Rückseite während 3D-Rotationen. */
}

    .card-wrapper img[b-n8sg2q73lo] {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
        backface-visibility: hidden;
    }

    /* Startposition der Karten: ausserhalb des sichtbaren Bereichs unten, leicht gekippt. */
    .card-wrapper.card-1[b-n8sg2q73lo],
    .card-wrapper.card-2[b-n8sg2q73lo],
    .card-wrapper.card-3[b-n8sg2q73lo] {
        z-index: 1;
        transform: translateY(400px) rotateX(45deg);
    }

/* Animationsschritt 1: Bringt alle Karten an ihre Endposition (noch übereinander). */
.cards-container.step-1-fly-in .card-wrapper[b-n8sg2q73lo] {
    transform: translateY(0) rotateX(0);
}

/* Animationsschritt 2: Fächert die Karten auf. */
.cards-container.step-2-fan-out .card-1[b-n8sg2q73lo] {
    transform: translateX(-65px) rotateZ(-15deg);
}

.cards-container.step-2-fan-out .card-2[b-n8sg2q73lo] {
    transform: translateY(-25px) rotateZ(0deg);
}

.cards-container.step-2-fan-out .card-3[b-n8sg2q73lo] {
    transform: translateX(65px) rotateZ(15deg);
}


/* Text-Animation */

.text-container[b-n8sg2q73lo] {
    margin-top: 40px;
    text-align: center;
}

/* Keyframes für die Einblend- und Aufwärts-Animation des Textes. */
@keyframes fadeInAndSlideUp-b-n8sg2q73lo {
    from {
        opacity: 0;
        transform: translateY(15px); /* Startet 15px weiter unten. */
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Basis-Styling für die Textelemente. */
.title-text[b-n8sg2q73lo], .subtitle-text[b-n8sg2q73lo] {
    font-family: 'Varela', sans-serif;
    opacity: 0; /* Standardmässig unsichtbar, die Animation wird durch die .visible-Klasse getriggert. */
}

.title-text[b-n8sg2q73lo] {
    font-weight: 900;
    font-size: 4rem;
    color: #C2A169;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.subtitle-text[b-n8sg2q73lo] {
    font-weight: 400;
    font-size: 1.5rem;
    color: #D4B98A;
    margin-top: -10px;
}

/* Die Animation wird nur gestartet, wenn der übergeordnete Container die Klasse .visible hat. */
.text-container.visible .title-text[b-n8sg2q73lo] {
    animation: fadeInAndSlideUp-b-n8sg2q73lo 1s ease-out forwards;
}

.text-container.visible .subtitle-text[b-n8sg2q73lo] {
    /* Der Untertitel wird mit einer leichten Verzögerung eingeblendet. */
    animation: fadeInAndSlideUp-b-n8sg2q73lo 1s ease-out 0.4s forwards;
}
/* /Pages/Components/Board/ChessBoard.razor.rz.scp.css */
/* Definiert das Grundraster für das Schachbrett. */
.chessboard-grid[b-2e1umi2ykh] {
    display: grid;
    /* Erstellt ein 8x8 Raster. '1fr' bedeutet, dass jede Spalte/Reihe den gleichen Anteil am verfügbaren Platz einnimmt. */
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: 100%; /* Füllt die Breite des übergeordneten .chessboard-container. */
    height: 100%; /* Füllt die Höhe des übergeordneten .chessboard-container. */
    /* Stellt sicher, dass das Brett nie breiter oder höher als sein Container ist. */
    max-width: 100%;
    max-height: 100%;
    /* Erzwingt ein Seitenverhältnis von 1:1, wodurch das Brett immer quadratisch bleibt. */
    aspect-ratio: 1 / 1;
    margin: 0;
}

/* Basis-Styling für jedes einzelne Feld (.square), das von SquareComponent gerendert wird. */
.square[b-2e1umi2ykh] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Wichtig für die Positionierung der Beschriftungen und Highlights. */
    box-sizing: border-box; /* Stellt sicher, dass Padding/Border in die Gesamtgröße eingerechnet werden. */
}

    /* Standard-Cursor für ein interaktives Feld. */
    .square:not(.board-disabled)[b-2e1umi2ykh] {
        cursor: default;
    }

    /* Cursor für ein deaktiviertes Brett (z.B. wenn der Gegner am Zug ist). */
    .square.board-disabled[b-2e1umi2ykh] {
        cursor: not-allowed !important;
    }

        /* Sorgt dafür, dass auch die Figur auf einem deaktivierten Feld den "not-allowed"-Cursor zeigt. */
        .square.board-disabled img[b-2e1umi2ykh] {
            cursor: not-allowed !important;
        }

    /* Styling für das Bild der Schachfigur. */
    .square img[b-2e1umi2ykh] {
        max-width: 80%;
        max-height: 80%;
        object-fit: contain; /* Stellt sicher, dass das Bild skaliert wird, ohne das Seitenverhältnis zu verzerren. */
        touch-action: none; /* Verhindert Standard-Touch-Gesten wie Scrollen beim Ziehen der Figur. */
        position: relative;
        z-index: 10;
        transition: transform 0.15s ease-out, opacity 0.15s ease-out; /* Sanfte Animation für Drag-Effekte. */
        /* Verhindert, dass der Benutzer das Bild versehentlich markiert oder speichert. */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Zeigt einen "grab"-Cursor, wenn man über eine ziehbare Figur fährt. */
    .square:not(.board-disabled) img:not(.piece-not-interactive)[b-2e1umi2ykh] {
        cursor: grab !important;
    }
        /* Zeigt einen "grabbing"-Cursor, während die Figur aktiv gezogen wird. */
        .square:not(.board-disabled) img:not(.piece-not-interactive):active[b-2e1umi2ykh] {
            cursor: grabbing !important;
        }

    /* Standard-Cursor für Figuren, die nicht interaktiv sind (z.B. gegnerische Figuren). */
    .square:not(.board-disabled) img.piece-not-interactive[b-2e1umi2ykh] {
        cursor: default !important;
    }

    /* HIGHLIGHT-STYLES */

    /* Hervorhebung für legale Züge. */
    .square.highlight[b-2e1umi2ykh] {
        outline: 3px solid rgba(255, 215, 0, 0.7);
        outline-offset: -3px; /* Zeichnet den Rahmen innerhalb des Feldes. */
    }

    /* Visuelles Feedback von JavaScript, wenn eine Figur über ein gültiges Zielfeld gezogen wird. */
    .square.drag-over-target-js[b-2e1umi2ykh] {
        background-color: rgba(144, 238, 144, 0.5);
    }

    /* Macht die Originalfigur auf dem Brett transparent, während sie gezogen wird. */
    .square img.piece-being-dragged-original[b-2e1umi2ykh] {
        opacity: 0.3;
    }

    /* Styling für das "geisterhafte" Abbild der Figur, das dem Mauszeiger beim Ziehen folgt. */
    .square img.dragging-active-piece[b-2e1umi2ykh] {
        z-index: 1000; /* Stellt sicher, dass die gezogene Figur über allen anderen Elementen liegt. */
        box-shadow: 0px 5px 15px rgba(0,0,0,0.3);
        opacity: 0.9;
        transition: none; /* Deaktiviert die Transition, um ruckelfreies Dragging zu gewährleisten. */
    }

    /* KARTENEFFEKT-HIGHLIGHTS */

    /* Hebt das erste für einen Karteneffekt ausgewählte Feld hervor (z.B. bei Teleport). */
    .square.highlight-card-first-selection[b-2e1umi2ykh] {
        outline: 3px solid rgba(0, 128, 255, 0.8);
        outline-offset: -3px;
        background-color: rgba(0, 128, 255, 0.1);
    }
        /* Fügt der Figur auf dem ausgewählten Feld einen Leuchteffekt hinzu. */
        .square.highlight-card-first-selection img[b-2e1umi2ykh] {
            box-shadow: 0 0 8px 3px rgba(0, 128, 255, 0.7);
        }

    /* Hebt Felder hervor, auf denen eine Figur für einen Karteneffekt ausgewählt werden kann. */
    .square.highlight-card-piece-selection[b-2e1umi2ykh] {
        background-color: rgba(255, 165, 0, 0.3);
        outline: 2px dashed rgba(255, 165, 0, 0.7);
        outline-offset: -2px;
        cursor: pointer !important;
    }

        .square.highlight-card-piece-selection img[b-2e1umi2ykh] {
            cursor: pointer !important;
        }

    /* Hebt leere Felder hervor, die als Ziel für einen Karteneffekt (z.B. Wiedergeburt) ausgewählt werden können. */
    .square.highlight-card-actionable-target[b-2e1umi2ykh] {
        background-color: rgba(30, 144, 255, 0.25);
        outline: 2px solid rgba(30, 144, 255, 0.6);
        outline-offset: -2px;
        cursor: pointer !important;
    }

        .square.highlight-card-actionable-target img[b-2e1umi2ykh] {
            cursor: pointer !important;
        }

    /* LETZTER-ZUG-HIGHLIGHTS */

    .square.highlight-last-move-to-strong[b-2e1umi2ykh] {
        background-color: rgba(255, 255, 0, 0.6); /* Starke Hervorhebung für das Zielfeld. */
    }

    .square.highlight-last-move-from-strong[b-2e1umi2ykh] {
        background-color: rgba(255, 255, 0, 0.5); /* Etwas schwächere Hervorhebung für das Startfeld. */
    }

    .square.highlight-last-move-to-weaker[b-2e1umi2ykh] {
        background-color: rgba(255, 255, 0, 0.4); /* Schwächere Hervorhebung für Züge innerhalb einer Sequenz. */
    }

    .square.highlight-last-move-from-weaker[b-2e1umi2ykh] {
        background-color: rgba(255, 255, 0, 0.3);
    }

    /* SPEZIFISCHE KARTENEFFEKT-HIGHLIGHTS */

    .square.highlight-card-teleport-from[b-2e1umi2ykh] {
        background-color: rgba(0, 191, 255, 0.3);
    }

    .square.highlight-card-teleport-to[b-2e1umi2ykh] {
        background-color: rgba(0, 191, 255, 0.6);
    }

    .square.highlight-card-swap-1[b-2e1umi2ykh],
    .square.highlight-card-swap-2[b-2e1umi2ykh] {
        background-color: rgba(173, 216, 230, 0.5);
    }

    .square.highlight-card-rebirth[b-2e1umi2ykh] {
        background-color: rgba(152, 251, 152, 0.5);
        outline: 2px dashed rgba(60, 179, 113, 0.7);
        outline-offset: -2px;
    }

    /* RANK & FILE BESCHRIFTUNGEN */

    .square .rank-label[b-2e1umi2ykh],
    .square .file-label[b-2e1umi2ykh] {
        position: absolute; /* Positioniert die Labels relativ zum Feld. */
        font-size: clamp(8px, 1.5vmin, 10px); /* Responsive Schriftgröße. */
        font-weight: bold;
        color: #808080; /* Standardfarbe für helle Felder. */
        pointer-events: none; /* Stellt sicher, dass die Labels Klicks nicht abfangen. */
        z-index: 1;
        padding: 1px;
        line-height: 1;
    }

    .square .rank-label[b-2e1umi2ykh] {
        top: 0;
        left: 0;
        margin-top: 3px;
        margin-left: 3px;
    }

    .square .file-label[b-2e1umi2ykh] {
        bottom: 0;
        right: 0;
        margin-bottom: 3px;
        margin-right: 3px;
    }

    /* Passt die Farbe der Beschriftung für dunkle Felder an, um den Kontrast zu verbessern. */
    .square.dark .rank-label[b-2e1umi2ykh],
    .square.dark .file-label[b-2e1umi2ykh] {
        color: rgba(255, 255, 255, 0.5);
    }
/* /Pages/Components/Board/SquareComponent.razor.rz.scp.css */
/* Basis-Styling für jedes Feld. */
.square[b-y9eyn8dzv4] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: #ebecd0; /* Helles Feld */
}

    .square img[b-y9eyn8dzv4] {
        display: block;
        max-width: 80%;
        max-height: 80%;
        object-fit: contain;
        touch-action: none; /* Wichtig für Drag-and-Drop auf Touch-Geräten. */
        position: relative;
        z-index: 10;
        /* Verhindert das Markieren des Bildes beim Ziehen. */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .square.dark[b-y9eyn8dzv4] {
        background-color: #779556; /* Dunkles Feld */
    }

    .square:not(.board-disabled)[b-y9eyn8dzv4] {
        cursor: default;
    }

    /* Setzt den Cursor auf "nicht erlaubt", wenn das Brett deaktiviert ist. */
    .square.board-disabled[b-y9eyn8dzv4],
    .square.board-disabled img[b-y9eyn8dzv4] {
        cursor: not-allowed !important;
    }

    /* Setzt den "Greifen"-Cursor für ziehbare Figuren. */
    .square:not(.board-disabled) img:not(.piece-not-interactive)[b-y9eyn8dzv4] {
        cursor: grab !important;
    }

        .square:not(.board-disabled) img:not(.piece-not-interactive):active[b-y9eyn8dzv4] {
            cursor: grabbing !important;
        }

    /* Standard-Cursor für nicht-interaktive Figuren (z.B. des Gegners). */
    .square:not(.board-disabled) img.piece-not-interactive[b-y9eyn8dzv4] {
        cursor: default !important;
    }

    /* HIGHLIGHT-STYLES */

    /* Normaler Zug oder Drag-Over (Rotbraun) */
    .square.highlight[b-y9eyn8dzv4],
    .square.drag-over-target-js[b-y9eyn8dzv4] {
        background-image: linear-gradient(rgba(165, 91, 75, 0.4), rgba(165, 91, 75, 0.4));
    }

    /* Letzter Zug UND bestimmte Karteneffekte (Gelblich) */
    .square.highlight-last-move-to-strong[b-y9eyn8dzv4],
    .square.highlight-card-teleport-to[b-y9eyn8dzv4],
    .square.highlight-card-swap-1[b-y9eyn8dzv4],
    .square.highlight-card-swap-2[b-y9eyn8dzv4] {
        background-image: linear-gradient(rgba(205, 209, 102, 0.55), rgba(205, 209, 102, 0.55));
    }

    .square.highlight-last-move-from-strong[b-y9eyn8dzv4],
    .square.highlight-card-teleport-from[b-y9eyn8dzv4] {
        background-image: linear-gradient(rgba(205, 209, 102, 0.4), rgba(205, 209, 102, 0.4));
    }

    /* ANDERE KARTENEFFEKT-STILE */

    /* Auswahl eines Zielfeldes oder einer Figur für einen Karteneffekt (Rotbraun mit Rahmen) */
    .square.highlight-card-actionable-target[b-y9eyn8dzv4] {
        background-image: linear-gradient(rgba(165, 91, 75, 0.5), rgba(165, 91, 75, 0.5));
        outline: 2px solid rgba(165, 91, 75, 0.8);
        outline-offset: -2px; /* Rahmen nach innen */
        cursor: pointer !important;
    }

    /* Auswahl einer Figur (nur Overlay, kein fester Rahmen) */
    .square.highlight-card-piece-selection[b-y9eyn8dzv4] {
        background-image: linear-gradient(rgba(165, 91, 75, 0.3), rgba(165, 91, 75, 0.3));
        cursor: pointer !important;
    }

        /* Fügt einen gestrichelten Rahmen über das Feld und die Figur hinzu, um die Auswahl deutlich zu machen. */
        .square.highlight-card-piece-selection[b-y9eyn8dzv4]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 2px dashed rgba(165, 91, 75, 0.9);
            pointer-events: none; /* Lässt Klicks durch den Rahmen hindurch. */
            z-index: 2;
        }

    /* Erstes ausgewähltes Feld bei mehrstufigen Karteneffekten (bleibt blau zur Unterscheidung) */
    .square.highlight-card-first-selection[b-y9eyn8dzv4] {
        outline: 3px solid rgba(0, 128, 255, 0.8);
        outline-offset: -3px;
        background-color: rgba(0, 128, 255, 0.1);
    }

    /* Wiedergeburts-Effekt (bleibt grünlich) */
    .square.highlight-card-rebirth[b-y9eyn8dzv4] {
        background-color: rgba(152, 251, 152, 0.5);
        outline: 2px dashed rgba(60, 179, 113, 0.7);
        outline-offset: -2px;
    }

    /* RANK & FILE BESCHRIFTUNGEN */
    .square .rank-label[b-y9eyn8dzv4],
    .square .file-label[b-y9eyn8dzv4] {
        position: absolute;
        font-size: clamp(8px, 1.5vmin, 10px); /* Responsive Schriftgrösse */
        font-weight: bold;
        color: #B0B0B0; /* Farbe für helle Felder */
        pointer-events: none; /* Verhindert, dass die Labels Klicks abfangen. */
        z-index: 11; /* Liegt über der Figur. */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Besserer Kontrast der Beschriftung auf dunklen Feldern. */
    .square.dark .rank-label[b-y9eyn8dzv4],
    .square.dark .file-label[b-y9eyn8dzv4] {
        color: rgba(235, 236, 208, 0.8);
    }

    .square .rank-label[b-y9eyn8dzv4] {
        top: 2px;
        left: 2px;
    }

    .square .file-label[b-y9eyn8dzv4] {
        bottom: 2px;
        right: 2px;
    }
/* /Pages/Components/Cards/CardInfoPanel.razor.rz.scp.css */
/* Styling für den Inhaltsbereich des Modals. */
.card-info-panel-content[b-673oyuwsao] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    border-radius: 0.5rem;
}

/* Definiert eine maximale Breite für das Modal. */
.card-info-modal .modal-dialog[b-673oyuwsao] {
    max-width: 450px;
}

/* Basis-Styling für den Modal-Inhalt im Dark-Theme. */
.card-info-modal .modal-content[b-673oyuwsao] {
    background-color: #2C2C2C;
    border: 1px solid #444444;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
    color: #E0E0E0;
}

    .card-info-modal .modal-content .text-muted small[b-673oyuwsao] {
        color: #B0B0B0 !important;
    }

/* Definiert die Grösse und das Seitenverhältnis der vergrösserten Karte. */
.card-visual-representation[b-673oyuwsao] {
    position: relative;
    width: 280px;
    height: calc(280px * 1050 / 750); /* Berechnet die Höhe basierend auf dem Seitenverhältnis der Original-Bilddateien (750x1050). */
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    margin: 0 auto 20px auto; /* Zentriert die Karte und schafft Abstand nach unten. */
}

/* Layer-Styling für den Aufbau der Karte */

/* Die Ebene für die eigentliche Kartenkunst. */
.card-art-layer[b-673oyuwsao] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Unterste Ebene */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Das Bild der Kartenkunst selbst. */
.card-art-actual-image[b-673oyuwsao] {
    width: 68%; /* Nimmt nicht die volle Breite ein, um in den Rahmen zu passen. */
    margin-top: -40%; /* Verschiebt das Bild nach oben in den Kunst-Bereich des Templates. */
    object-fit: cover;
    border-radius: 8px;
}

/* Die Ebene für den Kartenrahmen (das Template-Bild). */
.card-frame-image[b-673oyuwsao] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Liegt über der Kartenkunst. */
    pointer-events: none; /* Lässt Klicks durch die Ebene hindurch. */
}

/* Die Ebene für die Textinhalte. */
.card-content-layer[b-673oyuwsao] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3; /* Liegt über dem Rahmen, um den Text anzuzeigen. */
    pointer-events: none;
}

/* Positionierung der Text-Elemente auf der Karte */

.card-title-section[b-673oyuwsao] {
    position: absolute;
    top: 69%;
    left: 10%;
    width: 80%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: auto; /* Erlaubt Textauswahl, falls nötig. */
}

.card-title-text[b-673oyuwsao] {
    font-size: 1.1em;
    font-weight: bold;
    color: #E0E0E0;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7); /* Verbessert die Lesbarkeit auf dem komplexen Hintergrund. */
}

.card-description-section[b-673oyuwsao] {
    position: absolute;
    top: 76%;
    left: 15%;
    width: 70%;
    height: 15%;
    color: #E0E0E0;
    font-size: 0.85em;
    line-height: 1.3;
    overflow-y: auto; /* Fügt eine Scrollbar hinzu, falls die Beschreibung zu lang ist. */
    padding: 2% 3%;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.card-description-text[b-673oyuwsao] {
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap; /* Erhält Zeilenumbrüche im Beschreibungstext. */
    word-break: break-word; /* Bricht lange Wörter um. */
    margin: 0;
    max-height: 100%;
}

/* Styling für die Aktions-Buttons unter der Karte. */
.action-buttons-cip[b-673oyuwsao] {
    display: flex;
    gap: 15px;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    margin-top: 15px;
}

    .action-buttons-cip .btn[b-673oyuwsao] {
        flex-grow: 1;
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
    }

/* Styling für den 'X'-Button zum Schliessen oben rechts. */
.close-modal-button-cip[b-673oyuwsao] {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    background-color: rgba(224, 224, 224, 0.2);
    color: #E0E0E0;
    border: 1px solid rgba(224, 224, 224, 0.4);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1.2rem;
    line-height: 30px;
    text-align: center;
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

    .close-modal-button-cip:hover[b-673oyuwsao] {
        opacity: 1;
        background-color: rgba(224, 224, 224, 0.3);
    }
/* /Pages/Components/Cards/DrawPilesDisplay.razor.rz.scp.css */
/* Haupt-Wrapper für die Nachziehstapel. */
.draw-piles-wrapper[b-h2wj5yxb5v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 0;
    flex-shrink: 0; /* Verhindert, dass das Element in einem Flex-Layout schrumpft. */
    height: 100%;
    justify-content: center;
    box-sizing: border-box;
}

/* Styling für den sichtbaren Stapel. */
.draw-pile[b-h2wj5yxb5v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: default; /* Zeigt an, dass der Stapel nicht klickbar ist. */
    border-radius: 6px;
    width: 85px;
    height: 100%;
    padding: 5px 0;
    box-sizing: border-box;
}

/* Das Bild der Kartenrückseite. */
.draw-pile-image[b-h2wj5yxb5v] {
    max-width: 90%;
    height: 100px;
    width: auto;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}

/* Styling für die Textanzeige der Kartenanzahl. */
.draw-pile span[b-h2wj5yxb5v] {
    font-weight: bold;
    font-size: 0.85em;
    color: white;
    /* Ein halbtransparenter Hintergrund sorgt für Lesbarkeit, auch wenn der Text über dem Bild liegt. */
    background-color: rgba(0, 0, 0, 0.65);
    padding: 1px 6px;
    border-radius: 10px;
    margin-top: 5px;
    line-height: 1.2;
    text-align: center;
    min-width: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* RESPONSIVE ANPASSUNGEN */

/* Für Mobile-Ansichten (bis 992px), wo die Höhe durch .bottom-game-elements bestimmt wird. */
@media (max-width: 992px) {
    .draw-piles-wrapper[b-h2wj5yxb5v] {
        height: auto;
    }

    .draw-pile[b-h2wj5yxb5v] {
        width: 80px; /* Etwas schmaler */
        padding: 5px 0;
    }

    .draw-pile-image[b-h2wj5yxb5v] {
        height: 90px; /* Bild etwas kleiner */
    }

    .draw-pile span[b-h2wj5yxb5v] {
        font-size: 0.8em;
        margin-top: 4px;
    }
}

/* Spezifische Anpassungen für sehr kleine Mobile-Screens. */
@media (max-width: 420px) {
    .draw-pile[b-h2wj5yxb5v] {
        width: 60px; /* Nachziehstapel noch schmaler */
    }

    .draw-pile-image[b-h2wj5yxb5v] {
        height: 70px; /* Bildhöhe angepasst */
    }

    .draw-pile span[b-h2wj5yxb5v] {
        font-size: 0.65em;
        margin-top: 2px;
        padding: 1px 3px;
    }
}

/* Für Screens zwischen 421px und 992px (Standard Mobile). */
@media (min-width: 421px) and (max-width: 992px) {
    .draw-pile[b-h2wj5yxb5v] {
        width: 75px;
    }

    .draw-pile-image[b-h2wj5yxb5v] {
        height: 85px;
    }

    .draw-pile span[b-h2wj5yxb5v] {
        font-size: 0.75em;
    }
}
/* /Pages/Components/Cards/HandCardsDisplay.razor.rz.scp.css */
/* Haupt-Wrapper, der die Scroll-Pfeile und den Kartencontainer anordnet. */
.hand-cards-display-wrapper[b-kggi7ndhjw] {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
}

/* Styling für die Scroll-Pfeile. */
.scroll-arrow[b-kggi7ndhjw] {
    background-color: rgba(103, 125, 106, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease-in-out;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

    .scroll-arrow:hover:not(:disabled)[b-kggi7ndhjw] {
        background-color: rgba(103, 125, 106, 0.8);
    }

    /* Macht die Pfeile transparent, wenn sie deaktiviert sind. */
    .scroll-arrow:disabled[b-kggi7ndhjw] {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .scroll-arrow.left-arrow[b-kggi7ndhjw] {
        margin-right: 4px;
    }

    .scroll-arrow.right-arrow[b-kggi7ndhjw] {
        margin-left: 4px;
    }

/* Der scrollbare Container für die Handkarten. */
.hand-cards-container[b-kggi7ndhjw] {
    display: flex;
    overflow-x: auto; /* Ermöglicht horizontales Scrollen. */
    overflow-y: hidden;
    gap: 8px;
    padding: 8px;
    background-color: #2C2C2C;
    border-radius: 6px;
    height: 100%;
    align-items: center;
    -webkit-overflow-scrolling: touch; /* Verbessert das Scroll-Erlebnis auf iOS. */
    /* Benutzerdefinierte Scrollbar für Firefox. */
    scrollbar-width: thin;
    scrollbar-color: #444444 #2C2C2C;
    flex-grow: 1;
    min-width: 0;
    box-sizing: border-box;
}

    /* Benutzerdefinierte Scrollbar für Webkit-Browser (Chrome, Safari etc.). */
    .hand-cards-container[b-kggi7ndhjw]::-webkit-scrollbar {
        height: 8px;
    }

    .hand-cards-container[b-kggi7ndhjw]::-webkit-scrollbar-track {
        background: #2C2C2C;
        border-radius: 10px;
    }

    .hand-cards-container[b-kggi7ndhjw]::-webkit-scrollbar-thumb {
        background: #444444;
        border-radius: 10px;
    }

        .hand-cards-container[b-kggi7ndhjw]::-webkit-scrollbar-thumb:hover {
            background: #677D6A;
        }

    /* Reduziert die Deckkraft, wenn die Kartenauswahl global deaktiviert ist. */
    .hand-cards-container.selection-disabled[b-kggi7ndhjw] {
        opacity: 0.7;
    }

/* Wrapper für eine einzelne Karte in der Hand. */
.card-in-hand-wrapper[b-kggi7ndhjw] {
    width: 95px;
    height: calc(95px * (1050 / 750)); /* Behält das korrekte Seitenverhältnis bei. */
    flex-shrink: 0; /* Verhindert, dass Karten gestaucht werden. */
    border: 2px solid transparent; /* Platzhalter für den Auswahl-Rahmen. */
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease-out, opacity 0.2s ease-out;
    box-sizing: border-box;
}

/* 3D Flip-Animation für die Karten */

.hand-card-perspective[b-kggi7ndhjw] {
    width: 100%;
    height: 100%;
    perspective: 800px;
}

.hand-card-flipper[b-kggi7ndhjw] {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    -webkit-transform: translateZ(0); /* Erzwingt Hardware-Beschleunigung für flüssigere Animationen. */
    transform: translateZ(0);
}

    /* Klasse, die die Drehung um 180 Grad auslöst. */
    .hand-card-flipper.is-flipped[b-kggi7ndhjw] {
        transform: rotateY(180deg);
    }

.hand-card-face[b-kggi7ndhjw] {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Versteckt die abgewandte Seite während der Drehung. */
    -webkit-backface-visibility: hidden;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

    .hand-card-face.card-back[b-kggi7ndhjw] {
        transform: rotateY(180deg); /* Die Rückseite ist initial gedreht. */
        background-color: transparent;
    }

/* Hebt die Karte beim Hover-Effekt leicht an und vergrössert sie. */
.card-in-hand-wrapper:hover .hand-card-flipper:not(.is-flipped)[b-kggi7ndhjw] {
    transform: translateY(-4px) scale(1.03);
    transition-duration: 0.2s;
}

.card-in-hand-wrapper.disabled[b-kggi7ndhjw] {
    cursor: not-allowed;
}

    .card-in-hand-wrapper.disabled:hover .hand-card-flipper[b-kggi7ndhjw] {
        transform: none; /* Kein Hover-Effekt für deaktivierte Karten. */
    }

/* Fügt einen farbigen Rahmen hinzu, wenn die Karte ausgewählt ist. */
.card-in-hand-wrapper.selected[b-kggi7ndhjw] {
    border-color: #A55B4B;
}

    /* Stellt sicher, dass auch die ausgewählte Karte den Hover-Effekt hat. */
    .card-in-hand-wrapper.selected .hand-card-flipper:not(.is-flipped)[b-kggi7ndhjw] {
        transform: translateY(-4px) scale(1.03);
    }

/* Aufbau der Karten-Visualisierung (ähnlich wie CardInfoPanel, aber kleiner) */

.card-visual-representation-hand[b-kggi7ndhjw] {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    box-sizing: border-box;
    overflow: hidden;
}

.card-art-layer-hand[b-kggi7ndhjw] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-art-actual-image-hand[b-kggi7ndhjw] {
    width: 69%;
    margin-top: -41%;
    object-fit: cover;
}

.card-frame-image-hand[b-kggi7ndhjw] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.card-content-layer-hand[b-kggi7ndhjw] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.card-title-section-hand[b-kggi7ndhjw] {
    position: absolute;
    top: 72%;
    left: 5%;
    width: 90%;
    height: 13%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    pointer-events: auto;
}

.card-title-text-hand[b-kggi7ndhjw] {
    font-size: 0.6em;
    font-weight: bold;
    color: #E0E0E0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Fügt "..." hinzu, wenn der Titel zu lang ist. */
    padding: 0 1px;
}

.no-cards-text[b-kggi7ndhjw] {
    color: #B0B0B0;
    font-style: italic;
    margin: auto; /* Zentriert den Text, wenn keine Karten da sind. */
    white-space: nowrap;
    padding: 0 15px;
}

/* Responsive Anpassungen */

@media (max-width: 420px) {
    .hand-cards-container[b-kggi7ndhjw] {
        height: 120px;
        gap: 3px;
        padding: 4px;
    }

    .card-in-hand-wrapper[b-kggi7ndhjw] {
        width: 65px;
        height: calc(65px * (1050 / 750));
    }

    .card-art-actual-image-hand[b-kggi7ndhjw] {
        margin-top: -43%;
    }

    .card-title-text-hand[b-kggi7ndhjw] {
        font-size: 0.45em;
    }

    .scroll-arrow[b-kggi7ndhjw] {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }

        .scroll-arrow.left-arrow[b-kggi7ndhjw] {
            margin-right: 1px;
        }

        .scroll-arrow.right-arrow[b-kggi7ndhjw] {
            margin-left: 1px;
        }

    .no-cards-text[b-kggi7ndhjw] {
        font-size: 0.75em;
        padding: 0 8px;
    }
}

@media (min-width: 421px) and (max-width: 992px) {
    .hand-cards-container[b-kggi7ndhjw] {
        height: 140px;
        gap: 5px;
        padding: 6px;
    }

    .card-in-hand-wrapper[b-kggi7ndhjw] {
        width: 80px;
        height: calc(80px * (1050 / 750));
    }

    .card-title-text-hand[b-kggi7ndhjw] {
        font-size: 0.55em;
    }

    .scroll-arrow[b-kggi7ndhjw] {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
}
/* /Pages/Components/Cards/PlayedCardsHistoryDisplay.razor.rz.scp.css */
/* Styling für das Haupt-Panel der Kartenhistorie. */
.played-cards-history-panel[b-040q0p14qb] {
    display: flex;
    flex-direction: column; /* Ordnet die beiden Sektionen (Gegner, Ich) untereinander an. */
    gap: 10px;
    width: 100%;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* Styling für eine einzelne Sektion (z.B. "Meine gespielten Karten"). */
.history-section[b-040q0p14qb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid #444444;
    border-radius: 6px;
    padding: 0;
    background-color: #1A1A1D; /* Sehr dunkler Hintergrund für die Listen. */
    width: 100%;
    box-sizing: border-box;
    overflow-y: visible; /* Stellt sicher, dass Schatten/Ränder nicht abgeschnitten werden. */
}

    /* Styling für die Überschrift jeder Sektion. */
    .history-section h6[b-040q0p14qb] {
        margin: 0;
        font-weight: bold;
        color: #E0E0E0;
        text-align: center;
        border-bottom: 1px solid #444444;
        padding: 8px;
        background-color: #2C2C2C; /* Etwas hellerer Hintergrund für den Header. */
        border-top-left-radius: 5px; /* Rundet die oberen Ecken ab. */
        border-top-right-radius: 5px;
    }

/* Container für die Liste der gespielten Karten. */
.cards-list[b-040q0p14qb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch; /* Stellt sicher, dass die Einträge die volle Breite einnehmen. */
    padding: 8px;
}

/* Styling für einen einzelnen Eintrag in der Historie. */
.played-card-entry[b-040q0p14qb] {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    background-color: #2C2C2C;
    border: 1px solid #444444;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

    /* Visuelles Feedback beim Überfahren mit der Maus. */
    .played-card-entry:hover[b-040q0p14qb] {
        background-color: #677D6A;
    }

/* Styling für das kleine Vorschaubild der Karte. */
.played-card-history-image[b-040q0p14qb] {
    width: 30px;
    height: auto;
    aspect-ratio: 75 / 105; /* Behält das korrekte Seitenverhältnis der Karten bei. */
    object-fit: cover;
    border-radius: 3px;
    margin-right: 8px;
    flex-shrink: 0; /* Verhindert, dass das Bild schrumpft. */
}

/* Styling für den Namen der Karte. */
.played-card-history-name[b-040q0p14qb] {
    font-size: 0.9em;
    color: #E0E0E0;
    white-space: nowrap; /* Verhindert Zeilenumbruch. */
    overflow: hidden; /* Versteckt den überstehenden Teil. */
    text-overflow: ellipsis; /* Fügt "..." hinzu, wenn der Name zu lang ist. */
    flex-grow: 1; /* Nimmt den restlichen Platz ein. */
}

/* Styling für den Text, der angezeigt wird, wenn keine Karten gespielt wurden. */
.no-cards-played-text[b-040q0p14qb] {
    font-size: 0.9em;
    color: #B0B0B0;
    text-align: center;
    padding: 15px 10px;
}
/* /Pages/Components/Dialogs/ErrorModal.razor.rz.scp.css */
/* Styling für den Modal-Inhalt, wenn es sich um einen Fehler handelt. */
.modal-content.border-danger[b-27h67o76rb] {
    border-width: 2px;
}

/* Styling für den Textabsatz im Modal-Körper. */
.modal-body p[b-27h67o76rb] {
    word-wrap: break-word;
    font-size: 1.1rem;
}
/* /Pages/Components/Dialogs/PieceSelectionModal.razor.rz.scp.css */
/* Definiert die maximale Breite des Modals für die Figurenauswahl. */
.piece-selection-modal .modal-dialog[b-duqlxq105h] {
    max-width: 500px;
}

/* Flex-Container für die Anordnung der Auswahlmöglichkeiten. */
.piece-choices[b-duqlxq105h] {
    display: flex;
    justify-content: space-around; /* Verteilt den Platz gleichmässig. */
    align-items: center;
    padding: 10px 0;
    flex-wrap: wrap; /* Erlaubt den Umbruch in die nächste Zeile bei vielen Optionen. */
}

/* Styling für eine einzelne Auswahloption. */
.piece-choice[b-duqlxq105h] {
    display: flex;
    flex-direction: column; /* Bild und Text untereinander. */
    align-items: center;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    min-width: 80px; /* Mindestbreite für eine gute Klickfläche. */
    margin: 5px;
}

    /* Visuelles Feedback beim Überfahren mit der Maus. */
    .piece-choice:hover[b-duqlxq105h] {
        background-color: #f0f0f0;
        border-color: #ddd;
    }

    /* Hebt die aktuell ausgewählte Option hervor. */
    .piece-choice.selected[b-duqlxq105h] {
        background-color: #e0e0ff;
        border-color: #007bff;
    }

    /* Styling für das Bild der Figur. */
    .piece-choice img[b-duqlxq105h] {
        width: 64px;
        height: 64px;
        margin-bottom: 5px;
    }

    .piece-choice span[b-duqlxq105h] {
        font-size: 0.9em;
    }

    /* Wichtiges Styling, um eine deaktivierte Option klar zu kennzeichnen. */
    .piece-choice.disabled-choice[b-duqlxq105h] {
        opacity: 0.5; /* Macht die Option halbtransparent. */
        cursor: not-allowed; /* Zeigt an, dass die Option nicht klickbar ist. */
        background-color: #f8f9fa;
        border-color: #e9ecef;
    }

        /* Deaktiviert den Hover-Effekt für deaktivierte Optionen. */
        .piece-choice.disabled-choice:hover[b-duqlxq105h] {
            background-color: #f8f9fa;
            border-color: #e9ecef;
        }

        /* Stellt die Figur in Graustufen dar, um die Deaktivierung weiter zu verdeutlichen. */
        .piece-choice.disabled-choice img[b-duqlxq105h] {
            filter: grayscale(80%);
        }
/* /Pages/Components/Dialogs/WinLossModal.razor.rz.scp.css */
/* Definiert die Keyframe-Animation für das Einblenden des Modal-Hintergrunds. */
@keyframes modalBackdropFadeIn-b-sx5yy5365m {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.85; /* Ein stärkeres Abdunkeln als bei Standard-Modals. */
    }
}

/* Definiert die Keyframe-Animation für das "Hineinpoppen" des Modal-Inhalts. */
@keyframes modalContentPopIn-b-sx5yy5365m {
    from {
        opacity: 0;
        transform: scale(0.95); /* Startet leicht verkleinert. */
    }

    to {
        opacity: 1;
        transform: scale(1); /* Endet in Originalgrösse. */
    }
}

/* :global() ist eine spezielle Blazor-Syntax, um ein Element ausserhalb des Komponenten-Scopes zu stylen. */
/* Hier wird die Einblend-Animation auf den globalen Bootstrap-Backdrop angewendet. */
:global(.modal-backdrop.show)[b-sx5yy5365m] {
    animation: modalBackdropFadeIn-b-sx5yy5365m 0.3s ease-out forwards !important;
}

/* Styling für den Inhalt des Win/Loss-Modals. */
.win-loss-modal .modal-content[b-sx5yy5365m] {
    /* Erzeugt einen "Glas"-Effekt, indem der Hintergrund unscharf gezeichnet wird. */
    background-color: rgba(44, 44, 44, 0.85);
    backdrop-filter: blur(5px);
    border: 1px solid #A55B4B; /* Akzent-Rahmen. */
    text-align: center;
    opacity: 0; /* Startet unsichtbar. */
    /* Wendet die Pop-In-Animation mit einer leichten Verzögerung an. */
    animation: modalContentPopIn-b-sx5yy5365m 0.3s ease-out 0.1s forwards;
}

.win-loss-modal .modal-body[b-sx5yy5365m] {
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden; /* Verhindert, dass animierte Elemente (wie Konfetti) aus dem Modal "ausbrechen". */
}

/* Container für den Text, um ihn über eventuelle Hintergrund-Animationen zu legen. */
.message-content[b-sx5yy5365m] {
    position: relative;
    z-index: 10;
}

    /* Grosser, auffälliger Titel für Sieg oder Niederlage. */
    .message-content h2[b-sx5yy5365m] {
        font-family: "Varela", sans-serif;
        font-weight: 900;
        font-size: 3rem;
        color: #C2A169; /* Goldener Farbton für den Titel. */
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    }

    .message-content p[b-sx5yy5365m] {
        font-size: 1.2rem;
        color: #E0E0E0;
    }

/* Flex-Container für die Anordnung der Buttons. */
.end-game-buttons[b-sx5yy5365m] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap; /* Erlaubt Umbruch auf kleineren Bildschirmen. */
    margin-top: 1.5rem;
}

/* Die folgenden Konfetti-Stile sind hier definiert, werden aber durch das GlobalEffectsOverlay gerendert. */
/* Sie könnten für eine zukünftige Version gedacht sein, bei der das Konfetti nur innerhalb des Modals fällt. */
.confetti-container[b-sx5yy5365m] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.confetti[b-sx5yy5365m] {
    --start-x: 50vw;
    --delay: 0s;
    --duration: 5s;
    --rotation: 0deg;
    --color: #fff;
    position: absolute;
    top: -20px;
    left: var(--start-x);
    width: 10px;
    height: 20px;
    background-color: var(--color);
    opacity: 0;
    animation: fall-b-sx5yy5365m var(--duration) var(--delay) linear forwards;
}

@keyframes fall-b-sx5yy5365m {
    0% {
        opacity: 1;
        transform: translateY(0) rotateZ(0deg);
    }

    100% {
        opacity: 0.5;
        /* Lässt das Konfetti bis zum unteren Rand des Containers fallen. */
        transform: translateY(calc(100% + 50px)) rotateZ(var(--rotation));
    }
}
/* /Pages/Components/Info/InfoBox.razor.rz.scp.css */
/* Styling für den Wrapper der Info-Box. */
.info-box-wrapper[b-gmwvimvbr9] {
    position: fixed; /* Positioniert die Box relativ zum Viewport. */
    top: 20px;
    left: 50%;
    /* Zentriert die Box horizontal mit dem bekannten 'transform'-Trick. */
    transform: translateX(-50%);
    background: #2C2C2C;
    color: #E0E0E0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 1.1rem;
    /* Ein hoher z-index stellt sicher, dass die Box über den meisten anderen Elementen liegt. */
    z-index: 1060;
    transition: opacity 0.3s ease-in-out;
    /* Richtet die Nachricht und den optionalen Button nebeneinander aus. */
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    border: 1px solid #444444;
}

    /* CSS, um die Box auszublenden, indem die Deckkraft auf 0 gesetzt wird. */
    .info-box-wrapper[hidden][b-gmwvimvbr9] {
        opacity: 0;
        pointer-events: none;
    }

/* Container für den Nachrichtentext. */
.info-box-message[b-gmwvimvbr9] {
    flex-grow: 1; /* Nimmt den maximal verfügbaren Platz ein. */
}

/* Styling für den optionalen Aktions-Button. */
.info-box-action-button[b-gmwvimvbr9] {
    flex-shrink: 0; /* Verhindert, dass der Button schrumpft, wenn der Platz knapp wird. */
    background-color: #677D6A;
    border-color: #677D6A;
    color: #E0E0E0;
}
/* /Pages/Components/Info/TimersDisplay.razor.rz.scp.css */
/* Hauptcontainer, der die beiden Timer-Boxen als Flex-Items anordnet. */
.timers-container[b-kljh326cuq] {
    display: flex;
    width: 100%;
    gap: 6px; /* Abstand zwischen den beiden Boxen. */
    box-sizing: border-box;
}

/* Styling für die Box eines einzelnen Spielers. */
.timer-box[b-kljh326cuq] {
    border: 1px solid #444444;
    border-radius: 6px;
    background-color: #2C2C2C;
    flex-grow: 1; /* Beide Boxen wachsen gleichmässig, um den verfügbaren Platz zu füllen. */
    flex-basis: 0; /* Stellt sicher, dass flex-grow korrekt funktioniert. */
    box-sizing: border-box;
    padding: 0.4rem 0.6rem;
    text-align: center;
    color: #E0E0E0;
}

/* Styling für die grosse Zeitanzeige. */
.time-display[b-kljh326cuq] {
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1.5;
}

/* Ändert die Farbe der Zeitanzeige, wenn der Timer aktiv ist. */
.timer-box.timer-active .time-display[b-kljh326cuq] {
    color: #A55B4B; /* Akzentfarbe des Themes. */
}

/* Fügt der gesamten Box einen farbigen Rahmen und einen Leuchteffekt hinzu, wenn der Timer aktiv ist. */
/* Dies ist das wichtigste visuelle Feedback für den Spieler, wer am Zug ist. */
.timer-box.timer-active[b-kljh326cuq] {
    border-color: #A55B4B;
    box-shadow: 0 0 6px rgba(165, 91, 75, 0.4);
}

/* Styling für die kleinere Textzeile, die den Spielernamen anzeigt. */
.timer-box div:first-child[b-kljh326cuq] {
    font-size: 0.8em;
    white-space: nowrap; /* Verhindert Zeilenumbruch bei langen Namen. */
    overflow: hidden; /* Versteckt den überstehenden Teil. */
    text-overflow: ellipsis; /* Fügt "..." hinzu, wenn der Name zu lang ist. */
    margin-bottom: 2px;
    line-height: 1.2;
    color: #B0B0B0;
}

/* Responsive Anpassungen für Mobile-Ansichten */

@media (max-width: 992px) {
    .timers-container[b-kljh326cuq] {
        gap: 4px !important;
    }

    .timer-box[b-kljh326cuq] {
        /* Feste Breite auf mobilen Geräten, um Layout-Sprünge zu vermeiden. */
        width: calc(50% - 2px) !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        padding: 0.3rem 0.2rem !important;
        font-size: 0.9rem !important;
    }

    .time-display[b-kljh326cuq] {
        font-size: 1.2em !important;
    }

    .timer-box div:first-child[b-kljh326cuq] {
        font-size: 0.75em !important;
    }
}

/* Weitere Verkleinerung für sehr schmale Bildschirme. */
@media (max-width: 360px) {
    .timer-box[b-kljh326cuq] {
        padding: 0.2rem 0.1rem !important;
    }

    .time-display[b-kljh326cuq] {
        font-size: 1.1em !important;
    }

    .timer-box div:first-child[b-kljh326cuq] {
        font-size: 0.7em !important;
    }
}
/* /Pages/Components/LogsPanel.razor.rz.scp.css */
/* Styling für den Hauptcontainer des API-Log-Panels. */
.logs-panel[b-0rmilor289] {
    width: 100%; /* Passt sich der Breite des Elternelements (Drawer) an. */
    background: #1A1A1D; /* Dunkler Hintergrund für den Code-Look. */
    border: 1px solid #444444;
    overflow-y: auto; /* Fügt eine Scrollbar hinzu, wenn der Inhalt die Höhe übersteigt. */
    padding: 0.75rem;
    font-size: 0.8rem;
    flex-shrink: 0; /* Verhindert, dass das Panel in einem Flex-Layout schrumpft. */
    height: 100%; /* Füllt die verfügbare Höhe. */
    box-sizing: border-box;
    color: #E0E0E0;
}

    /* Styling für den Flex-Container in der Kopfzeile. */
    .logs-panel .d-flex[b-0rmilor289] {
        color: #A55B4B; /* Färbt den Titel passend zum Akzent des Themes. */
    }

    /* Styling für das Label der Checkbox. */
    .logs-panel .form-check-label[b-0rmilor289] {
        color: #B0B0B0; /* Etwas hellerer Grauton für gute Lesbarkeit. */
    }

    /* Styling für einen einzelnen Log-Eintrag. */
    .logs-panel .entry[b-0rmilor289] {
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        /* Eine gestrichelte Linie trennt die einzelnen Log-Einträge voneinander. */
        border-bottom: 1px dashed #444444;
    }

        /* Styling für den Zeitstempel. */
        .logs-panel .entry small[b-0rmilor289] {
            color: #B0B0B0;
        }

    /* Styling für vorformatierten Text (Request/Response Info). */
    .logs-panel pre[b-0rmilor289] {
        white-space: pre-wrap; /* Sorgt dafür, dass lange Zeilen umgebrochen werden. */
        word-break: break-all; /* Bricht auch sehr lange Wörter ohne Leerzeichen um. */
        background: #2C2C2C; /* Etwas hellerer Hintergrund zur Abhebung. */
        color: #E0E0E0;
        padding: 0.5rem;
        border-radius: 3px;
        border: 1px solid #444444;
        margin-top: 0.5rem;
    }

/* Anpassungen für kleinere Bildschirme (obwohl diese Regeln aus dem globalen CSS zu kommen scheinen). */
@media (max-width: 640.98px) {
    .logs-panel[b-0rmilor289] {
        width: 100%;
        height: 300px;
        max-height: 40vh; /* Begrenzt die Höhe auf kleineren Geräten. */
        border-left: none;
        border-top: 1px solid #444444;
    }
}