/* =========================================================
    GAME DIALOG
========================================================= */
#game-dialog {
    position: fixed; 
    top: 0; right: 0; bottom: 0; left: 0;
    height:100dvh;
    margin: 0;
    z-index: 100;
    display: none;

    background-repeat: repeat;
    background-size:cover;

    opacity: 0;
    transition: opacity 0.5s ease;
}

    #game-dialog.open {
        display: block;
        opacity: 1;

        @media (max-height: 430px) and (orientation: landscape) {
            display: none;
        }
    }

    #game-dialog .button {
        color:#fff;
    }

    #game-dialog a {
        cursor: pointer;
    }

    #game-dialog .close {
        position: absolute;
        top: 1vw; right: 1vw;
        width: 4cqw;
        aspect-ratio: 1;
        border-radius: 1000px;
        z-index: 1000;

        background-repeat: repeat;
        background-size:cover;
        background-image: url(../imgs/close.png);

        box-shadow: 4px 4px 0px #929292,
                    8px 8px 20px rgba(0, 0, 0, 0.4);


        @media (max-width: 1024px) {
            top: 2vw; right: 2vw;
            width: 9cqw;
        }
    }

    #game-dialog .close:focus,
    #game-dialog .close:active {
        text-shadow: none;
    }

    #game-dialog h1,
    #game-dialog h2,
    #game-dialog p {
        color: #ffffff;
        text-shadow: 2px 8px 10px rgba(0,0,0,0.32);
        cursor: default;
    }

    #game-dialog h1 {
        font-family: var(--font-extra-bold);
        text-transform: none;
        font-size: 8cqw;
        line-height: 8cqw;
    }

    #game-dialog h2,
    #game-dialog .h2 {
        font-family: var(--font-extra-bold-italic);
        font-size: 20cqw;
        letter-spacing: -.5cqw;
        line-height: 20cqw;
        text-transform: uppercase;
        text-align: center;
    }

    #game-dialog p {
        font-family: var(--font-extra-bold);
        font-size: 8cqw;
        text-transform: uppercase;
        letter-spacing: -.1cqw;
        line-height: 8cqw;
    }

@supports (width: 1cqw) {
    .game-overlay .button {
        --side-padding: 7cqw;
        --min-width: 7.83cqw;
        --height: 13cqw;
        --line-height: 13cqw;
        --font-size: 6cqw;
    }
}

@media (pointer: coarse) and (hover: none) {
    @supports (width: 1cqw) {
        .game-overlay .button {
            --height: 13cqw;
            --line-height: 14cqw;
        }
    }
}

.game-panel {
    /* Fallback */
    width: 80vh;
    height: 80vh;
    /* Modern */
    width: min(80vh, 80vw);
    height: min(80vh, 80vw);

    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;

    padding: 4cqw;
    box-shadow: 5px 5px 20px 10px rgba(0,0,0,0.1);
    background-size: cover;
    color: #ffffff;
    container-type: inline-size;

    display: grid;
    grid-template-rows: 1fr 2fr 1fr;
}

    /* Fallback portrait mobile */
    @media (orientation: portrait) and (max-width: 1024px) {
        .game-panel {
            width: 80%;
            height: auto;
            aspect-ratio: 1/1;
            margin: 25% auto 0;
        }
    }

    .game-panel .timebar-row {
        position: relative;
    }

    .game-panel .button-row {
        align-self: center;
        text-align: center;
    }

/* =========================================================
    PANEL SPLASH
========================================================= */

    .game-panel.splash {
        display: none;
        grid-template-rows: repeat(4, 1fr);

        padding: 0;
        background-origin: content-box;
        background-clip: content-box;
        background-repeat: no-repeat;
        background-size: 100% 100%;

        opacity: 0;
        transition: opacity 0.5s ease 1s;
    }

        #game-dialog.open .game-panel.splash.open {
            display: grid;
            opacity: 1;
        }

        .game-panel.splash .button-row {
            grid-row: 4 / 5;
            text-align: center;
        }

/* =========================================================
    PANEL LEVEL
========================================================= */

    .game-panel.level {
        display: none;
        grid-template-rows: 1fr 2fr 1fr;
    }

    .game-panel.level.open {
        display: grid;
    }

        .game-panel.level .text-row {
            grid-row: 2 / 3;
            text-align: center;
        }

        .game-panel.level .timebar-row {
            grid-row: 3 / 4;
        }

/* =========================================================
    PANEL ANSWER
========================================================= */
    .game-panel.answer {
        display: none;
        grid-template-rows: 1fr;
    }

        .game-panel.answer.open {
            display: grid;
        }

        .game-panel.answer p.h2 {
            font-size: 15cqw !important;
            line-height: 15cqw !important;
        }

        .game-panel.answer .answer-row {
            display: none;
            grid-template-rows: 1fr auto 1fr 50px;
        }

            .game-panel.answer .answer-row.show {
                display: grid;
            }

                .game-panel.answer .answer-row.-correct {
                    grid-template-rows: 1fr auto 1fr;
                }

        .game-panel.answer .answer-row .timebar-row {
           grid-row: 4 / 5;
        }

            .game-panel.answer .answer-row.-correct .timebar-row {
                grid-row: 3 / 4;
            }

        .game-panel.answer .answer-row .icon-row {
            grid-row: 1 / 2;
        }

        .game-panel.splash .answer-row .button-row {
            grid-row: 2 / 3;
            text-align: center;
        }

/* =========================================================
    Timebar
========================================================= */

.timebar {
    --timebar-height:2cqh;

    position: absolute;
    bottom: 0;
    width:100%; height:var(--timebar-height);
    background-color: #18355b;
    text-align: left;
}

    .timebar-indicator {
        display: inline-block;
        width:0; height:var(--timebar-height);
        background-color: #a2cbea;
    }

    .show .timebar-indicator {
        animation: expand 2s ease forwards;
    }

    .show.-wrong .timebar-indicator { animation: expand 1s ease forwards; }
    .show.-correct .timebar-indicator { animation: expand 1s ease forwards; }
    .show.-timeout .timebar-indicator { animation: expand 2s ease forwards; }


@keyframes expand {
    from { width: 0; }
    to { width: 100%; }
}

/* =========================================================
    ICON
========================================================= */
.game-panel.answer .icon-row {
    container-type: inline-size;
    text-align: center;
}

.icon {
    display: inline-block;
    width: 30cqw;
    aspect-ratio: 1 / 1; /* sorgt für quadratische Form */

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

    .-wrong .icon {
        background-image: url(../imgs/game-icon_wrong.png);
    }

    .-correct .icon {
        background-image: url(../imgs/game-icon_correct.png);
    }

    .-timeout .icon {
        background-image: url(../imgs/game-icon_timeout.png);
    }

    .-gameover .icon {
        background-image: url(../imgs/game-icon_gameover.png);
    }


/* =========================================================
    GAME END + RESULT
========================================================= */
._game._end,
._game-result {
    position: fixed; 
    top: 0; right: 0; bottom: 0; left: 0;
    width:100vw; height:100dvh;
    margin: 0;
    z-index: 100;

    background-repeat: repeat;
    background-size:cover;
}

    #game-dialog ._game-result .h2 {
        font-size: 7cqw;
        text-align: left;
        text-transform: none;
        letter-spacing: .5px;
    }

     #game-dialog ._game._end .h2 {
        font-size: 15cqw;
    }

    #game-dialog ._game._end .game-panel {
        grid-template-rows: 5fr 1fr 1fr;
        padding: 4cqw 2cqw;
    }

    #game-dialog ._game._end .game-panel .animation-row {
        position: relative;
    }

    #game-dialog ._game-result h1.h2 {
        line-height: 11cqw;
    }

    #game-dialog ._game-result p {
        font-size: 4cqw;
        text-transform:none;
        letter-spacing: normal;
        line-height: 5cqw;
        min-width:0;
    }

    ._game-result .solution-row  {
        text-align: center;
        overflow: hidden;
    }

    ._game-result .solution-row .solution-word {
        display: flex;
        justify-content: center;
        white-space: nowrap;
        margin-bottom: 3vh;
        margin-top: 5vh;
    }

    ._game-result .solution-row .solution-word span {
        display: inline-block;
        font-size: 11cqw;
        margin:0 4px;
        border-bottom: 1px solid rgba(255,255,255,.5);
        font-family: 'JetBrains Mono', monospace;
        text-shadow: 2px 8px 10px rgba(0,0,0,0.32);
        text-transform: uppercase;
    }

    ._game-result ._copy2 {
        position: relative;
        display: inline-block;
        padding: 3px 16px 3px 35px;
        background-color: #fff;
        border-radius: 1000px;
        color: #cea55a;
        text-transform: uppercase;
        font-family: var(--font-extra-bold);
        font-size: 1.5rem;
        text-decoration: none;

        background-image: url(../imgs/copy.svg);
        background-repeat: no-repeat;
        background-position: 7px center;
        background-size: 27px auto;
    }

        ._game-result ._copy2::after {
            content: "✓";
            position: absolute;
            color: green;
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 30px;
            box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.34);
            text-align: center;
            right: -18px;
            background-color: #fff;
            line-height: 32px;
            font-size: 21px;
            text-indent: -6px;

            opacity: 0;
            transition: opacity 0.3s ease;
        }

        ._game-result ._copy2.copied::after {
            opacity: 1;
        }

    @media (orientation: portrait) and (max-width: 768px) {
        #game-dialog ._game-result .game-panel {
            grid-template-rows: 1fr auto 1fr;
        }
        #game-dialog ._game-result h1.h2 {
            font-size: 8cqw;
        }
        #game-dialog ._game-result p {
            font-size: 5cqw;
            line-height: 6cqw;
        }
        ._game-result .solution-row .solution-word {
            margin-top: 3vh;
        }

         ._game-result ._copy2 {
            font-size: 1.1rem;
            background-size: 24px auto;
        }
    }

/* =========================================================
    ROTATE HINT
========================================================= */
.games-rotate-hint {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100dvh;
    margin: 0;
    z-index: 100;
    background-repeat: repeat;
    background-size: 100% 100%;
    background-image: url(../imgs/game_bg.jpg);
    overflow-y: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#game-dialog .games-rotate-hint h2 {
    font-size: 70px !important;
}     

#game-dialog .games-rotate-hint p {
    font-size: 26px;
    text-transform: none;
    letter-spacing: .2px;
}        

/* =========================================================
    BLUE
========================================================= */
#game-dialog.blue,
#game-dialog.blue ._game._end,
#game-dialog.blue ._game-result {
    background-image: url(../imgs/blue_bg.jpg);
}

#game-dialog.blue .game-panel {
    background-image: url(../imgs/blue_splash_bg.jpg);
}

/* =========================================================
    PINK
========================================================= */
#game-dialog.pink,
#game-dialog.pink ._game._end,
#game-dialog.pink ._game-result  {
    background-image: url(../imgs/pink_bg.jpg);
}

#game-dialog.pink .game-panel {
    background-image: url(../imgs/pink_splash_bg.jpg);
}

/* =========================================================
    MINT
========================================================= */
#game-dialog.mint,
#game-dialog.mint ._game._end,
#game-dialog.mint ._game-result  {
    background-image: url(../imgs/mint_bg.jpg);
}

#game-dialog.mint .game-panel {
    background-image: url(../imgs/mint_splash_bg.jpg);
}

/* =========================================================
    GOLD
========================================================= */
#game-dialog.gold,
#game-dialog.gold ._game._end,
#game-dialog.gold ._game-result  {
    background-image: url(../imgs/gold_bg.jpg);
}

#game-dialog.gold .game-panel {
    background-image: url(../imgs/gold_splash_bg.jpg);
}

/* =========================================================
    GAME CONTENT
========================================================= */
#game-content {
    --game-header-height:60px;
    --infield-padding-x:6vw;
    --infield-padding-y:3vw;

    display: none;

    position: fixed; 
    top: 0; right: 0; bottom: 0; left: 0;
    height:100dvh;
    margin: 0;
    z-index: 100;

    background-repeat: repeat;
    background-size:100% 100%;
    background-image: url(../imgs/game_bg.jpg);

    overflow-y: auto;
}

#game-content.open {
    display: block;
}

._game {
    width:100%; height:100%;
    display: grid;
    grid-template-rows: var(--game-header-height) 1fr;
}

    ._game .game-infield {
        grid-row: 2 / 3;
        padding: var(--infield-padding-y) var(--infield-padding-x);
        display: flex;
        align-items: center;
        justify-content: center;
        justify-self: center;
        overflow: hidden;
        min-height: 0; /* wichtig! verhindert dass grid-kinder über 1fr hinauswachsen */
        width: 100%;
    }

    ._game .answer .button-wrapper {
        position: absolute;
        top:0; right: 0; bottom: 0; left: 0;
        
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    ._game .answer .button {
        cursor: pointer;
        pointer-events: auto;
        transform-origin: center;

        /*
        --side-padding: 1.8cqw;
        --min-width: 5.83cqw;
        --height: 3.67cqw;
        --line-height: 3.83cqw;
        --font-size: 1.83cqw;
        */

        --side-padding: 30px;
        --min-width: 100px;
        --height: 62px;
        --line-height: 62px;
        --font-size: 31px;


        @media (max-width: 768px) and (orientation: portrait) {
            --side-padding: 25px;
            --min-width: 90px;
            --height: 57px;
            --line-height: 57px;
            --font-size: 25px;
        }

        @media (max-width: 500px) and (orientation: portrait) {
            --side-padding: 25px;
            --min-width: 90px;
            --height: 57px;
            --line-height: 57px;
            --font-size: 25px;
        }

        @media (max-width: 400px) and (orientation: portrait) {
            --side-padding: 25px;
            --min-width: 90px;
            --height: 57px;
            --line-height: 57px;
            --font-size: 25px;
        }
    }
/* =========================================================
    GAME LEVEL HEADER
========================================================= */
    ._game .game-level-header {
        grid-row: 1 / 2;
        min-width: var(--global-min-width);
        color:#a1cbe9;
        padding:22px 30% 0;
        font-size: 20px;
        font-family: var(--font-base);


        display: grid;
        grid-template-columns: 1fr 1fr 1fr;

        @media (max-width: 768px) and (orientation: portrait) {
            padding:12px 15% 0 var(--infield-padding-x);
        }
    }


    .timer {
        justify-self: end;
        display: inline-block;
        text-align: right;
    }

    .hearts-wrapper {
        justify-self: center;
    }

    .hearts {
        display: flex;
        margin:2px 0 0 0; padding: 0;
        list-style-type: none;
        gap: 3px;
    }

    .hearts li {
        flex:0 0 33%;
        display: inline-block;
        width: 25px; height:25px;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../imgs/heart_empty.svg);
    }

    .hearts li.full {
        background-image: url(../imgs/heart_full.svg);
    }

/* =========================================================
    GAME IMAGE PUZZLE
========================================================= */
._imagePuzzle div.game-infield {
    --item-gap:32px;
    min-height: 0;
    overflow: hidden;

    @media (max-width: 768px) and (orientation: portrait) {
        /*align-items: flex-start;*/
        padding:var(--infield-padding-y) var(--infield-padding-x);
    }
}

    ._imagePuzzle .answer.-count-6 {
        --item-max:430px;
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        aspect-ratio: 3 / 2;
        height:auto;
        min-width: 400px; max-width: 100%; max-height: 90%;
        gap:1rem;

        @media (max-width: 768px) and (orientation: portrait) {
            --item-max:250px;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, 1fr);
            aspect-ratio: 2 / 3;
            width: 100%; max-width: none;
            height: auto; max-height: 100%;
        }

        @media (max-width: 400px) and (orientation: portrait) {
            --item-max:180px;
        }
    }

    ._imagePuzzle .answer.-count-4 {
        --item-max:430px;
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        aspect-ratio: 1;
        height: auto;
        min-width: 400px; max-width: 100%; max-height: 90%;
        gap: 1rem;

        @media (max-width: 768px) and (orientation: portrait) {
            --item-max:300px;
            width: 100%;
            max-width: none;
            height: auto;
            max-height: 100%;
        }

        @media (max-height: 935px) and (orientation: landscape) {
            --item-max:40vh;
        }
    }

    ._imagePuzzle label {
        position: relative;
        display: block;
        max-height: var(--item-max); max-width: var(--item-max); 
        aspect-ratio: 1;
        overflow: hidden;
        border:3px solid #656565;
    }

        ._imagePuzzle label:hover {
            border-color: #D23383;
        }

    @media (max-width: 768px) and (orientation: portrait) {
        /* Spalte 1: rechtsbuendig */
        ._imagePuzzle label:nth-child(odd) {
            justify-self: end;
        }

        /* Spalte 2: linksbuendig */
        ._imagePuzzle label:nth-child(even) {
            justify-self: start;
        }
    }

    ._imagePuzzle input[type='checkbox'] {
        position: absolute;
        opacity: 0;
    }

    ._imagePuzzle input[type='checkbox'] + img {
        opacity: 0;
        transition: opacity 0.3s ease;
        box-shadow: 5px 5px 5px yellow;
    }

        ._imagePuzzle input[type='checkbox'] + img + img {
            transition: transform 0.3s ease;
            transition: width 0.3s ease, height 0.3s ease;
        }

    ._imagePuzzle input[type='checkbox']:checked + img {
        opacity: 1;
    }

        ._imagePuzzle input[type='checkbox']:checked + img + img {
           margin: 1%;
            width: 98%; height: 98%;
        }

    ._imagePuzzle label img:nth-child(2) {
        opacity: 0;
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        width: 100%; height: 100%;
    }

    ._imagePuzzle label img:nth-child(3) {
        max-width:100%; max-height: 100%;
        object-fit: cover;
    }

/* =========================================================
    GAME QUESTIONARE
========================================================= */
._questionare div.game-infield {
    position: relative;
    width: min(735px, 100%);
    flex-direction: column;
    overflow: visible;
    container-type: inline-size;

    @media (max-width: 768px) {
        --infield-padding-x:10vw;
        top:-10vh;
    }

    @media (min-width: 1920px) {
        width: min(850px, 100%);
    }
}

    #game-dialog ._questionare div.game-infield h2 {
        display: block;
        text-transform: none;
        text-align: left;

        font-size: 5.99cqw;
        line-height: 6.8cqw;
        letter-spacing: 0.14cqw;
        padding: 0 6.53cqw 4.35cqw 6.53cqw;

        @media (max-width: 768px) {
            font-size: 8cqw;
            line-height: 10cqw;
        }
    }

    ._questionare .answer {
       display: block;
       overflow: visible;
       width: 100%;
    }

    ._questionare .answer a {
        text-decoration: none;
    }

    #game-dialog ._game._questionare .answer .button {
        --button-number-size:30px;

        --side-padding: 37px;
        --min-width: 100px;
        --height: 70px;
        --line-height: var(--height);
        --font-size: 28px;

        display: block;
        position: relative;
        text-transform: none;
        color: #fff;
        font-family: var(--font-base);
        width: 100%;
        box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.4);

        @media (pointer: coarse) and (hover: none) {
            --line-height:  calc(var(--height) + 10px);
        }

        @media (orientation: portrait) and (max-width: 767px) {
            --side-padding: 28px;
            --min-width: 100px;
            --height: 54px;
            --line-height: var(--height);
            --font-size: 19px;

            @media (pointer: coarse) and (hover: none) {
                --line-height:  calc(var(--height) + 8px);
            }
        }
    }

    #game-dialog ._game._questionare .answer .button::before {
        content:"X";
        position: absolute;
        top: 20px; left: 25px;
        width: var(--button-number-size); height: var(--button-number-size); line-height: var(--button-number-size);
        text-align: center;
        border-radius: 1000px;
        font-size: 80%;
        background-color: #00335d;
        color: #fff;

        @media (orientation: portrait) and (max-width: 767px) {
            --button-number-size: 25px;
            top: 16px; left: 18px;
            line-height: 27px;
        }
    }

        #game-dialog ._game._questionare .answer .button:nth-child(1):before { content:"1"; }
        #game-dialog ._game._questionare .answer .button:nth-child(2):before { content:"2"; }
        #game-dialog ._game._questionare .answer .button:nth-child(3):before { content:"3"; }
        #game-dialog ._game._questionare .answer .button:nth-child(4):before { content:"4"; }

    #game-dialog ._game._questionare .answer .button span {
        text-align: left;
        padding-left: 28px;

        @media (orientation: portrait) and (max-width: 767px) {
            padding-left: 21px;
        }
    }

    ._questionare .answer a + a {
        margin-top:15px;
        margin-left: 0 !important;
    }

/* =========================================================
    GAME YES OR NO
========================================================= */
._imageYesOrNo div.game-infield {
    @media (max-width: 768px) {
        --infield-padding-x:17vw;
    }
}

    ._imageYesOrNo div.game-infield .answer {
        display: flex;
        gap: 1rem;
        align-items: flex-start;

        @media (max-width: 768px) {
            flex-direction: column;
        }
    }

    ._imageYesOrNo div.game-infield .answer a {

        width: calc(50% - 0.5rem);
        aspect-ratio: 1;
        min-width: 0;

        @media (max-width: 768px) {
            width: 100%;
        }
    }

        ._imageYesOrNo div.game-infield .answer a img {
            max-width:100%; max-height: 100%;
            object-fit: cover;
        }

/* =========================================================
    GAME WORDSALAD
========================================================= */
._wordSalad div.game-infield {
    --infield-padding-x:3vw;
    --wordsalad-base-color:#666666;
    --timebar-height: 1cqh;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    max-width: 900px;
    color:#fff;
    gap: 20px;

    @media (max-width: 768px) {
        width: 100%;
        max-width:none;
    }

    @media (max-width: 800px) {
    }
}

._wordSalad.ios .game-infield {
    position: absolute;
    bottom:40px;
}

._wordSalad.first .game-infield {
    align-items: start;
    align-self: start;
}

._wordSalad.second .game-infield {
    align-self: start;
}

    @supports (width: 1cqw) {
        .game-overlay ._wordSalad .button {
            --side-padding: 30px;
            --height: 60px;
            --line-height: 60px;
            --font-size: 28px;
            --min-width: 60px;
        }
    }

    ._wordSalad.first .--second { display:none; }
    ._wordSalad.second .--first { display:none; }

    #game-dialog ._wordSalad h2 {
        font-size: 40px;
        line-height: 46px;
        letter-spacing: 1px;
        margin-bottom: 40px;

         @media (max-width: 768px) and (orientation: portrait) {
            font-size: 27px;
            line-height: 29px;
            margin-bottom: 20px;
         }
    }

    ._wordSalad.first .media { grid-row: 1 / 2; }
    ._wordSalad.first .letters-input { grid-row: 2 / 3; }
    ._wordSalad.second .letters-input { grid-row: 1 / 2; }
    ._wordSalad.second .answer-input { grid-row: 2 / 3; }


    ._wordSalad .media {
        aspect-ratio: 16/9;
        position: relative;
        width: 100%;
        justify-self: center;
    }
        ._wordSalad .media video {
            width: 100%; height: 100%;
            border: 2px solid var(--wordsalad-base-color);

        }

        ._wordSalad .play {
            position: absolute;
            top:50%; left: 50%;
            transform:translateY(-50%) translateX(-50%);
            /*
            background-image: url(../imgs/video-play-blue.png);
            background-size: 60%;
            background-repeat: no-repeat;
            background-position: center;
            */
        }

    ._wordSalad .letters-input,
    ._wordSalad .answer-input {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: var(--timebar-height);
    }

        ._wordSalad.second .letters-input {
            /*aspect-ratio: 16/9;*/
            justify-content: flex-end;
            justify-self: center;
            max-height: 30vh;
            font-size: var(--answer-input-letter-font-size);

            @media (max-width: 768px) and (orientation: portrait) {
                height: auto; max-height: none;
                aspect-ratio: auto;
                margin-top: 2rem;
            }
        }

        /*
        ._wordSalad .letters-input ._letters,
        ._wordSalad .answer-input .answer {
            white-space: nowrap;
            overflow: hidden;
        }
        */

    ._wordSalad .button-row {
        margin-top: 40px;

         @media (max-width: 768px) and (orientation: portrait) {
            margin-top: 20px;
         }
    }

    ._wordSalad label {
        display: inline-block;
        width: 100%;
        color:ivory;
        font-size: 20px;
        text-transform: uppercase;
        text-align: center;
        text-shadow: 2px 8px 10px rgba(0,0,0,0.32);
    }

    ._wordSalad input:focus {
        outline: none;
    }

    ._wordSalad progress {
        position: absolute;
        bottom: -5px; left: 0;
        width: 100%; height: var(--timebar-height);

        appearance: none;
        border: none;

        background-color: #18355b;
    }

    /* Hintergrund (Spur) */
    ._wordSalad progress::-webkit-progress-bar {
        background-color:#18355b;
    }

    ._wordSalad progress::-moz-progress-bar {
        background-color:#a2cbea;
    }

    /* Füllstand */
    ._wordSalad progress::-webkit-progress-value {
        background-color:#a2cbea;
    }

    @media (max-width: 768px) and (orientation: portrait) {

        .game-overlay ._wordSalad .button {
            --side-padding: 28px;
            --height: 54px;
            --line-height: 54px;
            --font-size: 25px;
            --min-width: 40px;
        }

        .game-overlay ._wordSalad .media .button {
            --side-padding: 23px;
            --height: 43px;
            --line-height: 43px;
            --font-size: 23px;
            --min-width: 40px;
        }

        ._wordSalad .media  {
            aspect-ratio: 1/1;
            width: auto;
            height: 30dvh;
        }
    }

/* ipad landscape only */
@media only screen
    and (orientation: landscape)
    and (min-width: 744px)
    and (max-width: 1376px)
    and (-webkit-min-device-pixel-ratio: 2) {
        .games-rotate-hint {
            display: flex;
        }
}


/* ============================================================
    FAUX answer INPUT
    Ein einzelnes <input> das wie n separate Felder aussieht.

    Größen-Stufen:
    klein  (bis 356px):  9er-Version ca. 303px
    mittel (bis 767px):  9er-Version ca. 347px
    groß   (ab 768px):   9er-Version     552px

    Variablen:
    --tile-width      Breite eines Kästchens
    --tile-height     Höhe eines Kästchens
    --gap             Abstand zwischen Kästchen
    --font-size       Schriftgröße
    --char-width      Zeichenbreite (Courier New ≈ 0.594 × font-size)
    --letter-spacing  Abstand von Zeichenanfang zu nächstem = tile-width + gap - char-width
    --padding-left    Einrückung erstes Zeichen = (tile-width - char-width) / 2
    --n               Anzahl Felder (wird per n-* Klasse gesetzt)

    Wrapper-Breite = n × (tile-width + gap) - gap
    Input-Breite   = Wrapper-Breite + letter-spacing
                    (damit Cursor nach letztem Zeichen noch im
                    Input-Bereich liegt und kein Scroll ausgelöst wird)
============================================================ */

/* --- Größe klein: bis 356px --- */
._wordSalad .answer,
._wordSalad ._letters {
    --input-border-color:   #666666;
    --input-text-color:     #ffffff;
    --tile-width:      31px;
    --tile-height:     41px;
    --gap:              3px;
    --font-size:       18px;
    --char-width:      11px;
    --letter-spacing:  calc(var(--tile-width) + var(--gap) - var(--char-width));
    --padding-left:    calc((var(--tile-width) - var(--char-width)) / 2);
    --wrapper-width:   calc(var(--n) * (var(--tile-width) + var(--gap)) - var(--gap));
    --input-width:     calc(var(--wrapper-width) + var(--letter-spacing));
}

/* --- Größe mittel: 357px bis 767px --- */
@media (min-width: 357px) {
._wordSalad .answer,
._wordSalad ._letters {
        --tile-width:      35px;
        --tile-height:     46px;
        --gap:              4px;
        --font-size:       20px;
        --char-width:      12px;
    }
}

/* --- Größe groß: ab 768px --- */
@media (min-width: 768px) {
._wordSalad .answer,
._wordSalad ._letters {
        --tile-width:      56px;
        --tile-height:     74px;
        --gap:              6px;
        --font-size:       32px;
        --char-width:      19px;
    }
}

/* --- Anzahl Felder --- */
._wordSalad .answer.-count-4 { --n: 4; }
._wordSalad .answer.-count-5 { --n: 5; }
._wordSalad .answer.-count-6 { --n: 6; }
._wordSalad .answer.-count-7 { --n: 7; }
._wordSalad .answer.-count-8 { --n: 8; }
._wordSalad .answer.-count-9 { --n: 9; }

/* --- Layout --- */
._wordSalad .answer {
    position: relative;
    display: inline-block;
    width:  var(--wrapper-width);
    height: var(--tile-height);
}

._wordSalad .answer__boxes {
    position: absolute;
    inset: 0;
    display: flex;
    gap: var(--gap);
    pointer-events: none;
}

._wordSalad .answer__box {
    width:  var(--tile-width);
    height: var(--tile-height);
    border: 3px solid var(--input-border-color);
    box-sizing: border-box;
    flex-shrink: 0;
}

._wordSalad .answer__input {
    position: absolute;
    top: 0; left: 0;
    width:  var(--input-width); height: var(--tile-height);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--font-size);
    line-height: var(--tile-height);
    letter-spacing: var(--letter-spacing);
    padding: 0;
    padding-left: var(--padding-left);
    color: var(--input-text-color);
    text-transform: uppercase;

    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    box-sizing: border-box;
}

/* ============================================================
    STYLING SINGLE INPUT BOXES
============================================================ */
._wordSalad ._letters {
    text-align: center;
}

._wordSalad ._letters input {
    background: none;
    border-radius: 0;
    box-shadow: none;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;

    margin:0 1px;
    width:  var(--tile-width); height: var(--tile-height);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--font-size);
    line-height: var(--tile-height);
    border: 3px solid var(--input-border-color);
    color: var(--input-text-color);
    text-transform: uppercase;
    font-optical-sizing: auto;
    text-align: center;
}

    ._wordSalad.second ._letters input  {
        display: inline-block;
        width: auto; height:auto; line-height: 1;
        color: white;
        text-transform: uppercase;
        background-color: transparent;
        text-shadow: 2px 8px 10px rgba(0,0,0,0.32);
        font-family: "Source Code Pro", monospace;

        border: none;
        outline: none;
    }