/* Update 269: einheitlicher ANBITA-Spiele-Hintergrund auf allen Spiele-Seiten. */
.spiele-page{
    --anbita-spiele-bg-overlay:rgba(255,255,255,.72);
    position:relative;
    isolation:isolate;
    min-height:420px;
    border-radius:20px;
    background-image:
        linear-gradient(var(--anbita-spiele-bg-overlay),var(--anbita-spiele-bg-overlay)),
        url('spiele-hintergrund.webp');
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    background-attachment:scroll;
}
.spiele-page > *{
    position:relative;
    z-index:1;
}

/* Heller Modus: Motiv sichtbar, Inhalte bleiben trotzdem gut lesbar. */
html:not(.dark-mode) .spiele-page,
body:not(.dark-mode) .spiele-page{
    --anbita-spiele-bg-overlay:rgba(255,255,255,.72);
}

/* Dark Mode: dunkler Hintergrund, Logos bleiben sichtbar. */
html.dark-mode .spiele-page,
body.dark-mode .spiele-page,
body.dark .spiele-page{
    --anbita-spiele-bg-overlay:rgba(2,6,12,.48);
}

/* Die eigentlichen Spielbereiche bekommen eine leichte transparente Fläche,
   damit sich Text und Bedienelemente vom Motiv abheben, ohne es zu verdecken. */
.eins-page,
.wheel-page,
.connect4-page,
.spiele-highscore-page,
.beicht-game-page,
.bananen-game-page{
    border-radius:18px;
    background:rgba(255,255,255,.38);
    backdrop-filter:blur(1.5px);
    -webkit-backdrop-filter:blur(1.5px);
}
html.dark-mode .eins-page,
html.dark-mode .wheel-page,
html.dark-mode .connect4-page,
html.dark-mode .spiele-highscore-page,
html.dark-mode .beicht-game-page,
html.dark-mode .bananen-game-page,
body.dark-mode .eins-page,
body.dark-mode .wheel-page,
body.dark-mode .connect4-page,
body.dark-mode .spiele-highscore-page,
body.dark-mode .beicht-game-page,
body.dark-mode .bananen-game-page,
body.dark .eins-page,
body.dark .wheel-page,
body.dark .connect4-page,
body.dark .spiele-highscore-page,
body.dark .beicht-game-page,
body.dark .bananen-game-page{
    background:rgba(4,8,16,.46);
}

@media(max-width:760px){
    .spiele-page{
        min-height:360px;
        border-radius:15px;
        background-position:center top;
        background-size:auto 100%;
    }
    .eins-page,
    .wheel-page,
    .connect4-page,
    .spiele-highscore-page,
    .beicht-game-page,
    .bananen-game-page{
        border-radius:14px;
    }
}
@media(max-width:480px){
    .spiele-page{
        background-size:auto 100%;
        background-position:center center;
    }
}