/* Temporary Mathematics card arrangement. Hub only. */
#hubActionBar > #leaderboardButton{
    display:none !important;
}

body[data-hub-actions-layout="wide"] #hubActionBar > #streakButton{
    right:auto !important;
    left:calc(
        var(--hub-shell-wide-edge) + env(safe-area-inset-left)
    ) !important;
}

body[data-hub-actions-layout="dock"] #hubActionBar{
    grid-template-columns:
        var(--hub-shell-dock-streak-width)
        repeat(2, var(--hub-shell-dock-action-size));
}

#mainMenu.mathematicsGameMenu{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    grid-template-rows:repeat(2, minmax(0, 1fr));
    gap:16px;
    width:min(calc(100vw - 56px), 812px);
    max-width:812px;
}

#mainMenu.mathematicsGameMenu #classicCard{
    grid-column:1;
    grid-row:1;
}

#mainMenu.mathematicsGameMenu #sequenceCard{
    grid-column:2;
    grid-row:1;
}

#mainMenu.mathematicsGameMenu #chimpCard{
    grid-column:1;
    grid-row:2;
}

#mainMenu.mathematicsGameMenu #numberCard{
    grid-column:2;
    grid-row:2;
}

#mainMenu.mathematicsGameMenu #advancedCard{
    grid-column:3;
    grid-row:1 / span 2;
    aspect-ratio:auto;
}

.temporaryMathIcon{
    color:#f6f7f9;
    font-size:clamp(82px, 7vw, 116px);
    font-weight:700;
    line-height:1;
    text-shadow:0 3px 10px rgba(255,255,255,0.16);
}

.temporaryMixedMathIcon{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 96px));
    grid-template-rows:repeat(2, minmax(0, 96px));
    align-content:center;
    justify-content:center;
    gap:12px;
}

.temporaryMixedTile{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:1;
    border-radius:11px;
    background:rgba(108,108,108,0.74);
    color:#f7f8fa;
    font-size:clamp(44px, 4vw, 62px);
    font-weight:800;
    line-height:1;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 8px 18px rgba(0,0,0,0.22);
}

.temporaryMixedTileAccent{
    background:var(--accent-color);
}

@media (max-width:700px){
    #mainMenu.mathematicsGameMenu{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        grid-template-rows:none;
        grid-auto-rows:var(--hub-shell-card-block-size, 150px);
        width:min(100%, 760px);
    }

    body[data-hub-actions-layout="dock"] #mainMenu.mathematicsGameMenu #classicCard{
        grid-column:1 !important;
        grid-row:1 !important;
    }

    body[data-hub-actions-layout="dock"] #mainMenu.mathematicsGameMenu #sequenceCard{
        grid-column:2 !important;
        grid-row:1 !important;
    }

    body[data-hub-actions-layout="dock"] #mainMenu.mathematicsGameMenu #chimpCard{
        grid-column:1 !important;
        grid-row:2 !important;
    }

    body[data-hub-actions-layout="dock"] #mainMenu.mathematicsGameMenu #numberCard{
        grid-column:2 !important;
        grid-row:2 !important;
    }

    body[data-hub-actions-layout="dock"] #mainMenu.mathematicsGameMenu #advancedCard{
        grid-column:1 / span 2 !important;
        grid-row:3 !important;
        height:var(--hub-shell-card-block-size) !important;
        aspect-ratio:auto;
    }

    .temporaryMathIcon{
        font-size:clamp(54px, 19vw, 82px);
    }

    .temporaryMixedMathIcon{
        display:flex;
        grid-template-columns:none;
        grid-template-rows:none;
        gap:8px;
    }

    .temporaryMixedTile{
        width:clamp(42px, 13vw, 58px);
        font-size:clamp(26px, 8vw, 36px);
    }
}