/* Mathematics configuration and gameplay, using the existing hub palette. */
.mathematicsGameMenu,
#mathematicsRoundConfigurator,
#arithmetic-game-stage{
    -webkit-user-select:none;
    user-select:none;
}

#mathematicsRoundConfigurator input,
#mathematicsRoundConfigurator textarea,
#arithmetic-game-answer{
    -webkit-user-select:text;
    user-select:text;
}

#mathematicsRoundConfigurator{
    width:min(880px, calc(100vw - 32px));
    max-width:none;
    max-height:min(900px, calc(100dvh - 32px));
    padding:0;
    color:#f4f6f8;
    background:linear-gradient(180deg, #202020 0%, #151515 100%);
    border:1px solid rgba(var(--accent-color-rgb), .55);
    border-radius:18px;
    box-shadow:0 24px 80px #000, 0 0 28px rgba(var(--accent-color-rgb), .18);
    overflow:hidden;
}

#mathematicsRoundConfigurator::backdrop{
    background:rgba(0, 0, 0, .82);
    backdrop-filter:blur(5px);
}

#mathematicsOperationsField[hidden],
#mathematicsOperandField[hidden],
#mathematicsExcludedField[hidden]{
    display:none !important;
}

#mathematicsRoundConfigurator[data-configuration-layout="primary"]{
    width:min(640px, calc(100vw - 32px));
}

#mathematicsRoundConfigurator[data-configuration-layout="mixed"]{
    width:min(640px, calc(100vw - 32px));
}

#mathematicsRoundConfigurator[data-configuration-view="normal"]{
    width:min(840px, calc(100vw - 32px));
}

#mathematicsConfiguratorForm{
    position:relative;
    display:flex;
    flex-direction:column;
    max-height:min(900px, calc(100dvh - 32px));
}

#mathematicsConfiguratorClose{
    position:absolute;
    z-index:2;
    top:15px;
    right:17px;
    width:38px;
    height:38px;
    padding:0;
    color:#d9dee4;
    background:transparent;
    border:0;
    border-radius:9px;
    font-size:31px;
    font-weight:300;
    line-height:1;
    cursor:pointer;
}

#mathematicsConfiguratorClose:hover,
#mathematicsConfiguratorClose:focus-visible{
    color:#fff;
    background:rgba(255, 255, 255, .07);
}

.mathematicsConfiguratorHeader{
    display:flex;
    align-items:center;
    gap:18px;
    padding:27px 68px 24px 30px;
    border-bottom:1px solid rgba(255, 255, 255, .1);
}

#mathematicsConfiguratorOperator{
    display:grid;
    place-items:center;
    flex:0 0 64px;
    width:64px;
    height:64px;
    color:var(--accent-color);
    background:rgba(var(--accent-color-rgb), .14);
    border:1px solid rgba(var(--accent-color-rgb), .5);
    border-radius:14px;
    font-size:38px;
    font-weight:800;
}

#mathematicsConfiguratorOperator.mathematicsConfiguratorMixedOperator{
    grid-template-columns:repeat(2, 22px);
    grid-template-rows:repeat(2, 22px);
    place-content:center;
    gap:3px;
    padding:8px;
}

.mathematicsConfiguratorMixedTile{
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    color:#f7f8fa;
    background:rgba(108, 108, 108, .82);
    border-radius:5px;
    font-size:17px;
    font-weight:850;
    line-height:1;
}

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

#mathematicsConfiguratorTitle{
    margin:0 0 5px;
    font-size:30px;
    line-height:1.15;
}

#mathematicsConfiguratorDescription{
    margin:0;
    color:#bfc3c8;
    font-size:15px;
    line-height:1.45;
}

.mathematicsConfiguratorScroll{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    padding:20px 24px;
    overflow:auto;
}

#mathematicsRoundConfigurator[data-configuration-layout="primary"]
.mathematicsConfiguratorScroll{
    grid-template-columns:minmax(0, 1fr);
}

#mathematicsRoundConfigurator[data-configuration-layout="mixed"]
.mathematicsConfiguratorScroll{
    grid-template-columns:minmax(0, 1fr);
}

#mathematicsRoundConfigurator[data-configuration-layout="primary"]
#mathematicsCompletionField{
    grid-row:1;
}

#mathematicsRoundConfigurator[data-configuration-layout="primary"]
#mathematicsOperandField{
    grid-row:2;
}

#mathematicsRoundConfigurator[data-configuration-layout="primary"]
#mathematicsExcludedField{
    grid-row:3;
}

#mathematicsRoundConfigurator[data-configuration-layout="mixed"]
#mathematicsCompletionField{
    grid-row:1;
}

#mathematicsRoundConfigurator[data-configuration-layout="mixed"]
#mathematicsOperationsField{
    grid-row:2;
}

#mathematicsRoundConfigurator[data-configuration-layout="mixed"]
#mathematicsOperandField{
    grid-row:3;
}

#mathematicsRoundConfigurator[data-configuration-layout="mixed"]
#mathematicsExcludedField{
    grid-row:4;
}

#mathematicsRoundConfigurator[data-configuration-view="normal"]
.mathematicsConfiguratorScroll{
    padding:26px 32px 30px;
}

#mathematicsRoundConfigurator[data-configuration-view="normal"]
#mathematicsCompletionField{
    padding:20px 22px 22px;
}

#mathematicsRoundConfigurator[data-configuration-view="normal"]
.mathematicsCompletionChoices{
    gap:12px;
}

#mathematicsRoundConfigurator[data-configuration-view="normal"]
.mathematicsCompletionChoices label > span{
    min-height:82px;
    align-content:center;
    gap:6px;
    padding:16px 20px;
}

#mathematicsRoundConfigurator[data-configuration-view="normal"]
.mathematicsCompletionChoices strong{
    font-size:17px;
}

#mathematicsRoundConfigurator[data-configuration-view="normal"]
.mathematicsCompletionChoices small{
    font-size:13px;
}

#mathematicsRoundConfigurator[data-configuration-layout="mixed"][data-configuration-view="normal"]
.mathematicsOperationChoices span{
    height:62px;
    font-size:30px;
}

#mathematicsRoundConfigurator[data-configuration-layout="mixed"][data-configuration-view="normal"]
#mathematicsCompletionField{
    padding:16px 18px 18px;
}

#mathematicsRoundConfigurator[data-configuration-layout="mixed"][data-configuration-view="normal"]
.mathematicsCompletionChoices label > span{
    min-height:50px;
    padding:12px 20px;
}

#mathematicsRoundConfigurator[data-configuration-layout="mixed"][data-configuration-view="expanded"]
.mathematicsConfiguratorScroll{
    gap:10px;
    padding:14px 24px;
}

#mathematicsRoundConfigurator[data-configuration-layout="mixed"][data-configuration-view="expanded"]
.mathematicsConfiguratorSection{
    padding:12px 18px 14px;
}

#mathematicsRoundConfigurator[data-configuration-layout="mixed"][data-configuration-view="expanded"]
.mathematicsConfiguratorSection > p{
    margin-bottom:10px;
}

.mathematicsConfiguratorSection{
    min-width:0;
    margin:0;
    padding:16px 18px 18px;
    background:rgba(255, 255, 255, .035);
    border:1px solid rgba(255, 255, 255, .11);
    border-radius:14px;
}

.mathematicsConfiguratorSection legend{
    padding:0 6px;
    color:#f4f6f8;
    font-size:15px;
    font-weight:750;
}

.mathematicsConfiguratorSection > p{
    margin:0 0 13px;
    color:#aeb3b8;
    font-size:12px;
    line-height:1.4;
}

.mathematicsOperandGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.mathematicsOperandGrid label{
    display:grid;
    gap:7px;
    color:#cbd0d5;
    font-size:12px;
}

.mathematicsOperandGrid select{
    width:100%;
    height:42px;
    padding:0 12px;
    color:#f6f8fa;
    background:#16191c;
    border:1px solid rgba(255, 255, 255, .14);
    border-radius:9px;
    font:inherit;
}

.mathematicsDigitChoices{
    display:grid;
    grid-template-columns:repeat(10, 1fr);
    gap:6px;
}

.mathematicsDigitChoices label,
.mathematicsOperationChoices label{
    position:relative;
    cursor:pointer;
}

.mathematicsDigitChoices input,
.mathematicsOperationChoices input,
.mathematicsCompletionChoices input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.mathematicsDigitChoices span,
.mathematicsOperationChoices span{
    display:grid;
    place-items:center;
    height:38px;
    color:#d9dde1;
    background:#181b1e;
    border:1px solid rgba(255, 255, 255, .13);
    border-radius:8px;
    font-weight:750;
}

.mathematicsDigitChoices input:checked + span,
.mathematicsOperationChoices input:checked + span{
    color:#fff;
    background:var(--accent-color);
    border-color:var(--accent-color);
}

.mathematicsDigitChoices input:focus-visible + span,
.mathematicsOperationChoices input:focus-visible + span,
.mathematicsCompletionChoices input:focus-visible + span{
    outline:2px solid #fff;
    outline-offset:2px;
}

.mathematicsOperationChoices{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
}

.mathematicsOperationChoices span{
    height:48px;
    font-size:25px;
}

.mathematicsCompletionChoices{
    display:grid;
    gap:8px;
}

.mathematicsCompletionChoices label{
    position:relative;
    cursor:pointer;
}

.mathematicsCompletionChoices label > span{
    display:grid;
    gap:3px;
    padding:10px 12px;
    background:#181b1e;
    border:1px solid rgba(255, 255, 255, .12);
    border-radius:9px;
}

.mathematicsCompletionChoices input:checked + span{
    background:rgba(var(--accent-color-rgb), .15);
    border-color:var(--accent-color);
}

.mathematicsCompletionChoices strong{
    font-size:13px;
}

.mathematicsCompletionChoices small{
    color:#aeb3b8;
    font-size:11px;
    line-height:1.35;
}

#mathematicsConfiguratorStatus{
    min-height:20px;
    margin:0;
    padding:0 28px 8px;
    color:#ffb35c;
    font-size:13px;
}

.mathematicsConfiguratorActions{
    display:flex;
    gap:10px;
    padding:16px 24px 20px;
    border-top:1px solid rgba(255, 255, 255, .09);
}

.mathematicsConfiguratorActions > span{
    flex:1;
}

.mathematicsConfiguratorActions button,
.arithmeticGameNavigation button,
.arithmeticResultActions button{
    min-height:42px;
    padding:0 18px;
    color:#edf1f4;
    background:#24282c;
    border:1px solid rgba(255, 255, 255, .14);
    border-radius:9px;
    font:inherit;
    font-size:13px;
    font-weight:750;
    cursor:pointer;
}

#mathematicsConfiguratorStart,
#arithmetic-game-restart{
    color:#fff;
    background:var(--accent-color);
    border-color:var(--accent-color);
}

.mathematicsConfiguratorActions button:disabled{
    cursor:not-allowed;
    opacity:.45;
}

#arithmetic-game-stage[hidden],
#arithmetic-game-round[hidden],
#arithmetic-game-result[hidden]{
    display:none !important;
}

body.gameplay-active #game{
    padding:24px;
}

body.gameplay-active #game > :not(#arithmetic-game-stage){
    display:none !important;
}

#arithmetic-game-stage{
    display:grid;
    place-items:center;
    width:100%;
    min-height:calc(100dvh - 48px);
    color:#f5f7f9;
}

#arithmetic-game-round,
#arithmetic-game-result{
    width:min(860px, calc(100vw - 48px));
    padding:28px;
    background:linear-gradient(180deg, #202224 0%, #161819 100%);
    border:1px solid rgba(var(--accent-color-rgb), .48);
    border-radius:18px;
    box-shadow:0 22px 70px rgba(0, 0, 0, .55), 0 0 28px rgba(var(--accent-color-rgb), .12);
}

.arithmeticGameToolbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    padding-bottom:22px;
    border-bottom:1px solid rgba(255, 255, 255, .1);
}

#arithmetic-game-kicker{
    margin:0 0 5px;
    color:var(--accent-color);
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#arithmetic-game-title{
    margin:0;
    font-size:25px;
}

.arithmeticGameNavigation{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:9px;
}

#arithmetic-game-progress{
    width:100%;
    color:#c9cdd1;
    font-size:13px;
    text-align:right;
}

#arithmetic-game-equation{
    margin:60px 0 42px;
    font-size:clamp(56px, 8vw, 96px);
    font-weight:800;
    line-height:1;
    letter-spacing:.02em;
    text-align:center;
}

#arithmetic-game-form{
    width:min(540px, 100%);
    margin:auto;
}

#arithmetic-game-form > label{
    display:block;
    margin-bottom:9px;
    color:#bfc4c9;
    font-size:13px;
}

.arithmeticAnswerRow{
    display:block;
}

#arithmetic-game-answer{
    box-sizing:border-box;
    width:100%;
    min-width:0;
    height:54px;
    padding:0 16px;
    color:#fff;
    background:#101214;
    border:1px solid rgba(255, 255, 255, .18);
    border-radius:10px;
    font:inherit;
    font-size:22px;
}

#arithmetic-game-feedback{
    min-height:28px;
    margin:18px 0 0;
    font-size:16px;
    font-weight:700;
    text-align:center;
}

#arithmetic-game-feedback[data-result="correct"]{
    color:#58d394;
}

#arithmetic-game-feedback[data-result="incorrect"]{
    color:#ff8a80;
}

#arithmetic-game-result{
    text-align:center;
}

#arithmetic-game-result > p:first-child{
    margin:0;
    color:var(--accent-color);
    font-size:13px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#arithmetic-game-score{
    margin:22px 0 16px;
    font-size:clamp(58px, 8vw, 92px);
}

#arithmetic-game-result-copy,
#arithmetic-game-best-copy{
    color:#c5c9cd;
}

.arithmeticResultActions{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:28px;
}

@media (max-width:700px){
    #mathematicsRoundConfigurator{
        width:calc(100vw - 16px);
        max-height:calc(100dvh - 16px);
        border-radius:14px;
    }

    #mathematicsConfiguratorForm{
        max-height:calc(100dvh - 16px);
    }

    .mathematicsConfiguratorHeader{
        padding:22px 55px 19px 18px;
    }

    #mathematicsConfiguratorOperator{
        flex-basis:52px;
        width:52px;
        height:52px;
        font-size:30px;
    }

    #mathematicsConfiguratorTitle{
        font-size:23px;
    }

    .mathematicsConfiguratorScroll{
        grid-template-columns:1fr;
        padding:15px;
    }

    .mathematicsDigitChoices{
        grid-template-columns:repeat(5, 1fr);
    }

    .mathematicsConfiguratorActions{
        display:grid;
        grid-template-columns:1fr 1fr;
        padding:13px 15px 15px;
    }

    .mathematicsConfiguratorActions > span{
        display:none;
    }

    #mathematicsConfiguratorStart{
        grid-column:1 / -1;
        grid-row:1;
    }

    body.gameplay-active #game{
        padding:10px;
    }

    #arithmetic-game-stage{
        min-height:calc(100dvh - 20px);
    }

    #arithmetic-game-round,
    #arithmetic-game-result{
        width:calc(100vw - 20px);
        padding:20px 16px;
    }

    .arithmeticGameToolbar{
        display:grid;
    }

    .arithmeticGameNavigation,
    #arithmetic-game-progress{
        justify-content:flex-start;
        text-align:left;
    }

    #arithmetic-game-equation{
        margin:42px 0 32px;
    }

    #arithmetic-game-answer{
        width:100%;
    }
}