/* =====================================================
   BÄRENTAL
   ===================================================== */

#bear-main {
    min-height: 100vh;
    padding: 60px 60px 60px 140px;

    background:
        linear-gradient(
            rgba(38, 27, 16, 0.35),
            rgba(38, 27, 16, 0.55)
        ),
        #5d4931;

    box-sizing: border-box;
}


/* =====================================================
   WILLKOMMENSBEREICH
   ===================================================== */

#bear-welcome {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


.bear-welcome-card {
    min-height: 650px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;

    padding: 40px 60px;

    background: #d8c49a;

    border: 4px solid #5b3b20;
    border-radius: 28px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35);
}


/* =====================================================
   BRANOS
   ===================================================== */

.bear-character {
    height: 570px;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}


#branos-image {
    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(0 14px 10px rgba(0, 0, 0, 0.28));
}


/* =====================================================
   ZETTEL
   ===================================================== */

.bear-intro {
    padding: 45px;

    color: #3c2a18;

    background:
        linear-gradient(
            145deg,
            #f5e5b8,
            #dcc38a
        );

    border: 2px solid #8a6635;
    border-radius: 12px;

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.22);

    font-size: 18px;
    line-height: 1.6;
}


.bear-small-title {
    display: block;

    margin-bottom: 5px;

    font-size: 16px;
    font-weight: bold;

    color: #78562c;
}


.bear-intro h1 {
    margin: 0 0 25px;

    font-size: 48px;
    color: #513519;
}


.bear-intro p {
    margin: 0 0 18px;
}


/* =====================================================
   BÄREN-INFO
   ===================================================== */

.bear-fact {
    margin: 28px 0;
    padding: 16px 20px;

    background: rgba(255, 248, 219, 0.55);

    border-left: 5px solid #8a6635;
    border-radius: 6px;
}


/* =====================================================
   SPIEL STARTEN
   ===================================================== */

/* =====================================================
   HOLZBUTTON
   ===================================================== */

#bear-start-button {
    position: relative;

    width: 100%;

    margin-top: 12px;
    padding: 18px 25px;

    border: 3px solid #4b260f;
    border-radius: 14px;

    background:
        repeating-linear-gradient(
            2deg,
            transparent 0px,
            transparent 8px,
            rgba(60, 25, 5, 0.09) 9px,
            transparent 11px
        ),
        linear-gradient(
            180deg,
            #b96d2d 0%,
            #98501f 45%,
            #713512 100%
        );

    color: #ffe7b5;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: bold;

    text-shadow:
        0 2px 2px rgba(54, 24, 5, 0.8);

    box-shadow:
        0 5px 0 #45210d,
        0 10px 18px rgba(0, 0, 0, 0.3),
        inset 0 2px 2px rgba(255, 231, 171, 0.35),
        inset 0 -4px 8px rgba(65, 28, 7, 0.25);

    cursor: pointer;

    transition:
        transform 0.15s ease,
        filter 0.15s ease,
        box-shadow 0.15s ease;
}


#bear-start-button:hover {
    transform: translateY(-2px);

    filter: brightness(1.12);

    box-shadow:
        0 7px 0 #45210d,
        0 13px 22px rgba(0, 0, 0, 0.32),
        inset 0 2px 2px rgba(255, 231, 171, 0.35);
}


#bear-start-button:active {
    transform: translateY(3px);

    box-shadow:
        0 2px 0 #45210d,
        0 5px 10px rgba(0, 0, 0, 0.28);
}


/* =====================================================
   STATUSBOXEN
   ===================================================== */

.bear-status {
    display: flex;
    justify-content: center;
    gap: 20px;

    margin-bottom: 25px;
}


.bear-stat-box {
    min-width: 170px;

    padding: 12px 22px;

    text-align: center;

    background: #efe0b9;
    color: #49321b;

    border: 2px solid #765126;
    border-radius: 12px;

    font-weight: bold;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.2);
}


/* =====================================================
   KLEINERE BILDSCHIRME
   ===================================================== */

@media (max-width: 900px) {

    #bear-main {
        padding: 40px 25px 40px 100px;
    }

    .bear-welcome-card {
        grid-template-columns: 1fr;
        padding: 30px;
    }

    .bear-character {
        height: 400px;
    }

    .bear-intro h1 {
        font-size: 38px;
    }

}

/* =====================================================
   PERGAMENT
   ===================================================== */

.bear-intro {
    position: relative;

    padding: 45px 50px;

    color: #3c2717;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 248, 213, 0.95) 0%,
            rgba(242, 210, 151, 0.95) 65%,
            rgba(205, 157, 91, 0.95) 100%
        );

    border: 3px solid #9a632d;
    border-radius: 18px 10px 20px 12px;

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.28),
        inset 0 0 35px rgba(111, 63, 24, 0.22),
        inset 0 0 8px rgba(78, 42, 17, 0.25);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 18px;
    line-height: 1.6;
}


/* innere alte Papierkante */

.bear-intro::before {
    content: "";

    position: absolute;
    inset: 9px;

    border: 1px solid rgba(111, 67, 31, 0.35);
    border-radius: 12px 7px 15px 8px;

    pointer-events: none;
}


.bear-intro h1 {
    position: relative;

    margin: 0 0 28px;

    text-align: center;

    font-size: 42px;
    font-style: italic;

    color: #4d2d18;
}


.bear-intro p {
    position: relative;

    margin: 0 0 20px;
}

/* =====================================================
   BRANOS SPIELMENÜ
   ===================================================== */

#bear-game-menu {
    width: 100%;
    min-height: calc(100vh - 120px);

    font-family: Georgia, "Times New Roman", serif;
}


/* =====================================================
   GESAMTLAYOUT
   ===================================================== */

.bear-game-layout {
    width: min(1350px, 100%);
    min-height: 760px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(600px, 1.5fr);

    gap: 35px;

    align-items: center;
}


/* =====================================================
   BRANOS LINKS
   ===================================================== */

.bear-menu-branos {
    height: 720px;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}


#branos-menu-image {
    display: block;

    width: 100%;
    max-width: 440px;
    max-height: 720px;

    object-fit: contain;

    filter:
        drop-shadow(0 18px 16px rgba(0, 0, 0, 0.42));
}


/* =====================================================
   RECHTER BEREICH
   ===================================================== */

.bear-menu-content {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =====================================================
   HOLZSCHILD OBEN
   ===================================================== */

.bear-menu-sign {
    position: relative;

    width: min(680px, 90%);

    margin-bottom: 28px;
    padding: 20px 50px;

    text-align: center;

    background:
        repeating-linear-gradient(
            2deg,
            transparent 0,
            transparent 12px,
            rgba(75, 34, 9, 0.10) 13px,
            transparent 15px
        ),
        linear-gradient(
            180deg,
            #c77a32,
            #a85b20 52%,
            #854015
        );

    border: 5px solid #51270e;
    border-radius: 13px;

    box-shadow:
        0 8px 0 #3d1c09,
        0 16px 28px rgba(0, 0, 0, 0.38),
        inset 0 3px 3px rgba(255, 225, 156, 0.35),
        inset 0 -5px 10px rgba(66, 27, 5, 0.28);
}


.bear-menu-sign::before,
.bear-menu-sign::after {
    content: "";

    position: absolute;

    top: 14px;
    bottom: 14px;

    width: 25px;

    background:
        linear-gradient(
            90deg,
            #713410,
            #b96a28,
            #713410
        );

    border: 3px solid #4b220b;
    border-radius: 8px;

    z-index: -1;
}


.bear-menu-sign::before {
    left: -18px;
}


.bear-menu-sign::after {
    right: -18px;
}


.bear-menu-sign h1 {
    margin: 0;

    color: #3c1d0c;

    font-size: clamp(32px, 4vw, 54px);

    text-transform: uppercase;

    letter-spacing: 2px;

    text-shadow:
        0 2px rgba(255, 204, 118, 0.35);
}


.bear-sign-paw {
    position: absolute;

    left: 50%;
    top: -28px;

    transform: translateX(-50%);

    width: 58px;
    height: 58px;

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

    border: 4px solid #54290e;
    border-radius: 50%;

    background: #c37a35;

    font-size: 28px;

    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.3);
}


/* =====================================================
   GROSSES PERGAMENT
   ===================================================== */

.bear-menu-scroll {
    position: relative;

    width: 100%;

    padding: 45px 55px 50px;

    color: #442817;

    background:
        radial-gradient(
            ellipse at center,
            #fff0c5 0%,
            #f1cf8d 65%,
            #d9a85f 100%
        );

    border: 3px solid #8e5828;
    border-radius: 22px 13px 19px 11px;

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.38),
        inset 0 0 45px rgba(116, 63, 20, 0.23),
        inset 0 0 8px rgba(76, 38, 11, 0.3);
}


/* innere Pergamentkante */

.bear-menu-scroll::before {
    content: "";

    position: absolute;
    inset: 11px;

    border: 1px solid rgba(116, 65, 28, 0.35);
    border-radius: 16px 8px 14px 9px;

    pointer-events: none;
}


/* =====================================================
   FRAGE OBEN
   ===================================================== */

.bear-menu-question {
    position: relative;

    text-align: center;

    font-size: 24px;
    font-weight: bold;

    margin-bottom: 18px;
}


/* =====================================================
   PFOTEN-TRENNER
   ===================================================== */

.bear-menu-divider {
    position: relative;

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

    gap: 14px;

    margin: 10px 0 25px;
}


.bear-menu-divider span {
    width: 34%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #9c6232
        );
}


.bear-menu-divider span:last-child {
    background:
        linear-gradient(
            90deg,
            #9c6232,
            transparent
        );
}


.bear-menu-divider b {
    font-size: 22px;
}


.bear-menu-divider.small {
    margin: 30px 0;
}


/* =====================================================
   KARTENSET-ZEILEN
   ===================================================== */

.bear-set-row {
    position: relative;

    display: grid;

    grid-template-columns: 95px 1fr 190px;

    gap: 25px;

    align-items: center;

    padding: 15px 10px;
}


/* =====================================================
   RUNDE ICONS
   ===================================================== */

.bear-set-icon {
    width: 86px;
    height: 86px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #d99846,
            #a35a23
        );

    border: 4px solid #613313;

    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.25),
        inset 0 2px 3px rgba(255, 230, 168, 0.4);

    font-size: 42px;
}


.bear-set-icon.superhero {
    background:
        radial-gradient(
            circle,
            #8750a5,
            #5e287b
        );
}


/* =====================================================
   SET-BESCHREIBUNG
   ===================================================== */

.bear-set-description {
    text-align: left;
}


.bear-set-description h2 {
    margin: 0 0 10px;

    color: #442313;

    font-size: 30px;
}


.bear-set-description p {
    margin: 0;

    max-width: 340px;

    color: #59361f;

    font-size: 18px;
    line-height: 1.45;
}


/* =====================================================
   RECHTE SET-SEITE
   ===================================================== */

.bear-set-action {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 12px;
}


.bear-set-action strong {
    color: #442817;

    font-size: 17px;
}


/* =====================================================
   HOLZBUTTONS
   ===================================================== */

.bear-wood-button,
.bear-back-button {
    border: 3px solid #4b260f;

    background:
        repeating-linear-gradient(
            2deg,
            transparent 0,
            transparent 8px,
            rgba(60, 25, 5, 0.10) 9px,
            transparent 11px
        ),
        linear-gradient(
            180deg,
            #bc702d,
            #96501e 50%,
            #713511
        );

    color: #ffe2a5;

    font-family: Georgia, "Times New Roman", serif;

    font-weight: bold;

    text-shadow:
        0 2px 2px rgba(55, 24, 5, 0.85);

    border-radius: 10px;

    box-shadow:
        0 5px 0 #3f1e0b,
        0 9px 15px rgba(0, 0, 0, 0.28),
        inset 0 2px 2px rgba(255, 232, 177, 0.3);

    transition:
        transform 0.15s ease,
        filter 0.15s ease;
}


.bear-wood-button {
    width: 180px;

    padding: 14px 18px;

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

    gap: 15px;

    font-size: 22px;
}


.bear-wood-button:hover:not(:disabled),
.bear-back-button:hover {
    transform: translateY(-2px);

    filter: brightness(1.12);
}


.bear-wood-button:active:not(:disabled),
.bear-back-button:active {
    transform: translateY(3px);

    box-shadow:
        0 2px 0 #3f1e0b,
        0 4px 8px rgba(0, 0, 0, 0.25);
}


/* =====================================================
   GESPERRTER BUTTON
   ===================================================== */

.locked-button {
    background:
        repeating-linear-gradient(
            2deg,
            transparent 0,
            transparent 8px,
            rgba(30, 20, 10, 0.08) 9px,
            transparent 11px
        ),
        linear-gradient(
            #76634e,
            #594938
        );

    border-color: #45382b;

    color: #c7b8a5;

    box-shadow:
        0 4px 0 #352a20,
        0 8px 14px rgba(0, 0, 0, 0.22);

    cursor: not-allowed;
}


/* =====================================================
   ZURÜCK-BUTTON
   ===================================================== */

.bear-back-button {
    min-width: 300px;

    margin-top: 30px;

    padding: 14px 30px;

    font-size: 20px;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1050px) {

    .bear-game-layout {
        grid-template-columns: 260px 1fr;

        gap: 20px;
    }


    .bear-menu-branos {
        height: 580px;
    }


    #branos-menu-image {
        max-height: 580px;
    }


    .bear-set-row {
        grid-template-columns: 80px 1fr;
    }


    .bear-set-action {
        grid-column: 2;

        align-items: flex-start;
    }

}


@media (max-width: 760px) {

    .bear-game-layout {
        display: block;
    }


    .bear-menu-branos {
        height: 280px;

        margin-bottom: 15px;
    }


    #branos-menu-image {
        max-height: 280px;
        width: auto;
    }


    .bear-menu-scroll {
        padding: 35px 25px;
    }


    .bear-set-row {
        grid-template-columns: 70px 1fr;

        gap: 15px;
    }


    .bear-set-icon {
        width: 65px;
        height: 65px;

        font-size: 30px;
    }


    .bear-set-description h2 {
        font-size: 23px;
    }


    .bear-set-action {
        grid-column: 1 / 3;

        align-items: center;
    }


    .bear-menu-sign h1 {
        font-size: 30px;
    }

}

/* =====================================================
   WER IST ES – KOMPAKTES SPIELLAYOUT
   ===================================================== */

#guess-animal-game {

    width: 100%;

    /*
       #bear-main hat oben und unten jeweils 60px Padding.
       Dadurch bleibt das Spiel auf Desktop möglichst
       vollständig innerhalb des sichtbaren Fensters.
    */

    height: calc(100vh - 120px);

    overflow: hidden;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

}


/* hidden muss trotz display-Regeln funktionieren */

#guess-animal-game[hidden] {

    display: none;

}


/* =====================================================
   GESAMTES SPIEL
   ===================================================== */

.guess-compact-layout {

    width: min(1500px, 100%);
    height: 100%;

    margin: 0 auto;

    display: grid;

    /*
       Links:
       Branos + Fragen

       Rechts:
       großes Spielfeld
    */

    grid-template-columns:
        300px
        minmax(0, 1fr);

    grid-template-rows:
        80px
        minmax(0, 1fr);

    grid-template-areas:

        "header header"
        "side board";

    gap: 18px;

}


/* =====================================================
   OBERES HOLZSCHILD
   ===================================================== */

.guess-compact-header {

    grid-area: header;

    display: flex;

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

    gap: 25px;

    padding: 10px 24px;

    background:

        repeating-linear-gradient(
            2deg,
            transparent 0,
            transparent 9px,
            rgba(67, 28, 6, .10) 10px,
            transparent 12px
        ),

        linear-gradient(
            180deg,
            #c67a32 0%,
            #a65720 55%,
            #804015 100%
        );

    border: 4px solid #4b230c;

    border-radius: 14px;

    box-shadow:

        0 6px 0 #351708,

        0 11px 20px rgba(0,0,0,.30),

        inset 0 3px 3px rgba(255,221,150,.30);

}


/* Titel */

.guess-compact-header h1 {

    margin: 0;

    color: #351807;

    font-size: 30px;

    line-height: 1;

}


/* Untertitel */

.guess-compact-header > div:first-child > span {

    display: block;

    margin-top: 5px;

    color: #542b13;

    font-size: 14px;

    font-weight: bold;

}


/* =====================================================
   FRAGENZÄHLER
   ===================================================== */

.guess-question-counter {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 7px 14px;

    background:

        linear-gradient(
            #fff0c4,
            #e8c17a
        );

    color: #472713;

    border: 2px solid #74431d;

    border-radius: 11px;

    font-size: 15px;

    font-weight: bold;

    box-shadow:
        0 4px 8px rgba(0,0,0,.20);

}


.guess-question-counter strong {

    width: 38px;
    height: 38px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            #a45a22,
            #713612
        );

    color: #ffe4aa;

    font-size: 20px;

    box-shadow:
        inset 0 2px 2px rgba(255,225,170,.25);

}


/* =====================================================
   LINKE SPIELSEITE
   ===================================================== */

.guess-side-panel {

    grid-area: side;

    min-height: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

}


/* =====================================================
   BRANOS
   ===================================================== */

#guess-branos-image {

    display: block;

    width: auto;

    /*
       Dadurch nimmt Branos nicht mehr
       fast die komplette Bildschirmhöhe ein.
    */

    height: min(31vh, 300px);

    max-width: 100%;

    object-fit: contain;

    flex-shrink: 0;

    filter:
        drop-shadow(
            0 10px 8px rgba(0,0,0,.35)
        );

}


/* =====================================================
   BRANOS' ANTWORT
   ===================================================== */

#branos-answer {

    width: 100%;

    margin: 0;

    padding: 10px 12px;

    background:

        radial-gradient(
            ellipse at center,
            #fff1c8,
            #e8bf76
        );

    color: #482814;

    border: 2px solid #7c491e;

    border-radius: 10px;

    box-shadow:
        0 5px 10px rgba(0,0,0,.20);

    font-size: 14px;

    font-weight: bold;

    text-align: center;

}


/* =====================================================
   FRAGEN-PERGAMENT LINKS
   ===================================================== */

#question-area {

    position: relative;

    width: 100%;

    /*
       Nutzt den restlichen Platz zwischen
       Branos und den unteren Buttons.
    */

    flex: 1;

    min-height: 0;

    padding: 14px;

    overflow-y: auto;

    background:

        radial-gradient(
            ellipse at center,
            #fff1ca 0%,
            #edca87 70%,
            #d2a059 100%
        );

    border: 3px solid #825020;

    border-radius: 13px;

    box-shadow:

        inset 0 0 22px rgba(89,44,12,.15),

        0 6px 13px rgba(0,0,0,.20);

}


/* innere Pergamentkante */

#question-area::before {

    content: "";

    position: absolute;

    inset: 6px;

    border:
        1px solid rgba(109,62,27,.28);

    border-radius: 8px;

    pointer-events: none;

}


#question-area h2 {

    position: relative;

    margin: 0 0 12px;

    color: #482713;

    font-size: 18px;

    text-align: center;

}


/* =====================================================
   FRAGENBUTTONS
   ===================================================== */

#question-buttons {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 7px;

}


#question-buttons button {

    width: 100%;

    padding: 8px 9px;

    border: 2px solid #63320f;

    border-radius: 7px;

    background:

        repeating-linear-gradient(
            2deg,
            transparent 0,
            transparent 7px,
            rgba(60,25,5,.08) 8px,
            transparent 10px
        ),

        linear-gradient(
            #ba6c2b,
            #854016
        );

    color: #ffe7b3;

    font-family: inherit;

    font-size: 13px;

    font-weight: bold;

    text-shadow:
        0 1px 2px rgba(50,20,5,.7);

    box-shadow:
        0 3px 0 #47220b;

    transition:
        transform .15s ease,
        filter .15s ease;

}


#question-buttons button:hover:not(:disabled) {

    transform:
        translateY(-2px);

    filter:
        brightness(1.12);

}


/* =====================================================
   BUTTONS UNTEN LINKS
   ===================================================== */

.guess-controls {

    width: 100%;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin: 0;

    flex-shrink: 0;

}


.guess-wood-button {

    min-width: 0;

    padding: 9px 7px;

    border: 2px solid #49230c;

    border-radius: 8px;

    background:

        repeating-linear-gradient(
            2deg,
            transparent 0,
            transparent 7px,
            rgba(60,25,5,.10) 8px,
            transparent 10px
        ),

        linear-gradient(
            #b96b29,
            #783812
        );

    color: #ffe4aa;

    font-family: inherit;

    font-size: 12px;

    font-weight: bold;

    text-shadow:
        0 1px 2px rgba(50,20,5,.8);

    box-shadow:
        0 4px 0 #381907;

    transition:
        transform .15s ease,
        filter .15s ease;

}


.guess-wood-button:hover {

    transform:
        translateY(-2px);

    filter:
        brightness(1.12);

}


.guess-wood-button:active {

    transform:
        translateY(2px);

    box-shadow:
        0 2px 0 #381907;

}


.guess-wood-button.secondary {

    filter:
        saturate(.70);

}


/* =====================================================
   TIER-SPIELFELD
   ===================================================== */

#animal-board {

    grid-area: board;

    /*
       Wichtig:
       Brett bekommt exakt den verfügbaren Platz,
       statt immer weiter nach unten zu wachsen.
    */

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    margin: 0;

    padding: 13px;

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    grid-template-rows:
        repeat(5, minmax(0, 1fr));

    gap: 8px;

    background:

        radial-gradient(
            ellipse at center,
            #74401e,
            #522b14 72%,
            #3c1e0d
        );

    border: 5px solid #351907;

    border-radius: 18px;

    box-shadow:

        0 12px 25px rgba(0,0,0,.30),

        inset 0 0 30px rgba(0,0,0,.30),

        inset 0 0 0 2px rgba(187,113,53,.20);

}


/* =====================================================
   EINZELNE TIERKARTE
   ===================================================== */

.animal-card {

    position: relative;

    min-width: 0;
    min-height: 0;

    width: 100%;
    height: 100%;

    padding: 3px;

    overflow: hidden;

    border: 2px solid #a96a2c;

    border-radius: 8px;

    background:

        linear-gradient(
            #d59748,
            #8a481d
        );

    box-shadow:

        0 3px 0 #3b1d0c,

        0 5px 8px rgba(0,0,0,.22);

    transition:

        transform .15s ease,

        filter .15s ease,

        box-shadow .15s ease;

}


/* Bild füllt die Karte */

.animal-card img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    border-radius: 5px;

}


/* Hover */

.animal-card:hover {

    transform:
        translateY(-3px)
        scale(1.035);

    filter:
        brightness(1.08);

    box-shadow:

        0 5px 0 #3b1d0c,

        0 9px 14px rgba(0,0,0,.30);

    z-index: 5;

}


/* =====================================================
   AUSGESCHLOSSENE KARTE
   ===================================================== */

.animal-card.eliminated {

    filter:
        grayscale(1)
        brightness(.38);

    opacity: .50;

    transform:
        scale(.96);

}


.animal-card.eliminated::after {

    content: "✕";

    position: absolute;

    inset: 0;

    display: flex;

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

    color: #dc4d3f;

    font-size:
        clamp(28px, 3vw, 55px);

    font-weight: bold;

    text-shadow:
        0 3px 5px rgba(0,0,0,.75);

}


/* =====================================================
   KLEINERE DESKTOPS
   ===================================================== */

@media (max-width: 1200px) {

    .guess-compact-layout {

        grid-template-columns:
            245px
            minmax(0, 1fr);

        gap: 13px;

    }


    #guess-branos-image {

        height:
            min(27vh, 250px);

    }


    #animal-board {

        gap: 6px;

        padding: 10px;

    }

}


/* =====================================================
   TABLET / KLEINE FENSTER
   ===================================================== */

@media (max-width: 850px) {

    #guess-animal-game {

        height: auto;

        overflow: visible;

    }


    .guess-compact-layout {

        height: auto;

        display: flex;

        flex-direction: column;

    }


    .guess-compact-header {

        width: 100%;

    }


    .guess-side-panel {

        width: 100%;

    }


    #guess-branos-image {

        height: 260px;

    }


    #question-area {

        max-height: 350px;

    }


    #animal-board {

        height: auto;

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

        grid-template-rows:
            auto;

    }


    .animal-card {

        height: auto;

    }


    .animal-card img {

        height: auto;

    }

}


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

@media (max-width: 520px) {

    .guess-compact-header {

        flex-direction: column;

        align-items: stretch;

        text-align: center;

        height: auto;

    }


    .guess-question-counter {

        justify-content: center;

    }


    #animal-board {

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

    }


    .guess-controls {

        grid-template-columns: 1fr;

    }

}
/* =====================================================
   KARTEN UMDREHEN
   ===================================================== */

.animal-card {

    perspective: 900px;

    background: transparent;

    border: none;

    box-shadow: none;

    padding: 0;

    overflow: visible;

}


.animal-card-inner {

    position: relative;

    width: 100%;
    height: 100%;

    transition:
        transform .45s ease;

    transform-style:
        preserve-3d;

}


.animal-card.flipped
.animal-card-inner {

    transform:
        rotateY(180deg);

}


.animal-card-front,
.animal-card-back {

    position: absolute;

    inset: 0;

    backface-visibility:
        hidden;

    border: 2px solid #a96a2c;

    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        0 3px 0 #3b1d0c,
        0 5px 8px rgba(0,0,0,.22);

}


/* VORDERSEITE */

.animal-card-front {

    background:
        linear-gradient(
            #d59748,
            #8a481d
        );

}


.animal-card-front img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

}


/* RÜCKSEITE */

.animal-card-back {

    display: flex;

    justify-content: center;

    align-items: center;

    transform:
        rotateY(180deg);

    background:
        repeating-linear-gradient(
            45deg,
            #754018 0,
            #754018 12px,
            #8d5423 12px,
            #8d5423 24px
        );

    color: #f4ce82;

    font-size: clamp(
        28px,
        4vw,
        55px
    );

}

#question-buttons button.question-used {

    opacity: .45;

    filter:
        grayscale(.7);

    transform: none;

    cursor: default;

}

/* =====================================================
   RATEMODUS
   ===================================================== */

.animal-card.guessable:not(.flipped)
.animal-card-front {

    box-shadow:
        0 0 0 3px #f0c96b,
        0 0 15px rgba(240, 201, 107, .65),
        0 4px 8px rgba(0,0,0,.3);

}


/* =====================================================
   GEHEIMES TIER NACH RUNDENENDE
   ===================================================== */

.animal-card.secret-reveal
.animal-card-front {

    box-shadow:
        0 0 0 4px #f6d56d,
        0 0 22px rgba(246, 213, 109, .9),
        0 5px 10px rgba(0,0,0,.35);

}


/* =====================================================
   BENUTZTE FRAGE
   ===================================================== */

#question-buttons button.question-used {

    opacity: .42;

    filter:
        grayscale(.75);

    box-shadow:
        0 2px 0 #47220b;

}

/* =====================================================
   FRAGEN-GRUPPEN
   ===================================================== */

.question-group {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


/* =====================================================
   AUGENFARBEN AUSWAHL
   ===================================================== */

.eye-color-choices {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 6px;

    padding:
        3px 4px 5px;

}


/* hidden muss funktionieren */

.eye-color-choices[hidden] {

    display: none;

}


/* einzelne Farbe */

#question-buttons
.eye-color-button {

    padding: 7px 5px;

    font-size: 12px;

    background:
        linear-gradient(
            #99602d,
            #693512
        );

}


/* letzte Farbe über volle Breite */

#question-buttons
.eye-color-button:last-child {

    grid-column:
        1 / -1;

}


/* Augenfarben-Hauptbutton */

#question-buttons
.question-group-toggle {

    background:
        linear-gradient(
            #c17a36,
            #8d481a
        );

}