/* AbildskovUndervisning - abildskovundervisning.dk */
/* =====================================================
   ADDITION
   Spilspecifik styling
===================================================== */


/* =====================================================
   ADDITION - MENU
===================================================== */

.addition-menu {

    width: min(
        92vw,
        700px
    );

    margin: 0 auto;

    /* Slightly reduced padding to save vertical space */
    padding: 16px;

    box-sizing: border-box;

}

.addition-menu-header { margin-bottom: 18px; }

.addition-setting-section { margin-bottom: 14px; }

.addition-prefill-options, .addition-number-options, .addition-question-count-options { gap: 6px; }

.addition-option-button { min-height: 48px; padding: 6px 10px; font-size: 1rem; }

.addition-timer-button { min-height: 48px; padding: 6px 10px; }


/* =====================================================
   MENU HEADER
===================================================== */

.addition-menu-header {

    text-align: center;

    margin-bottom: 24px;

}


/* =====================================================
   INDSTILLINGSSEKTIONER
===================================================== */

.addition-setting-section {

    margin-bottom: 22px;

}


.addition-setting-title {

    margin:
        0 0 6px 0;

}


.addition-setting-description {

    margin:
        0 0 12px 0;

}


/* =====================================================
   VALGMULIGHEDER
===================================================== */

.addition-number-options,
.addition-question-count-options,
.addition-prefill-options,
.addition-timer-options {

    display: grid;

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

    gap: 8px;

}

.addition-number-options {
    grid-template-columns: repeat(4, 1fr);
}

.addition-question-count-options {
    grid-template-columns: repeat(4, 1fr);
}

.addition-prefill-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.addition-timer-options {
    grid-template-columns: 1fr;
}


/* =====================================================
   VALGKNAPPER
===================================================== */

.addition-option-button {

    min-height: 52px;

    padding:
        8px 12px;

    box-sizing: border-box;

    border:
        2px solid #770000;

    border-radius: 8px;

    background:
        #000000;

    color:
        #ff0000;

    font-family:
        inherit;

    font-size:
        1.1rem;

    font-weight:
        bold;

    cursor:
        pointer;

    transition:
        0.15s ease;

}


.addition-option-button:hover {

    border-color:
        #ff0000;

}


/* =====================================================
   VALGT INDSTILLING
===================================================== */

.addition-option-button.selected {

    border:
        3px solid #ff0000;

    background:
        #220000;

    box-shadow:
        0 0 8px
        rgba(
            255,
            0,
            0,
            0.45
        );

    transform:
        scale(1.03);

}

/* =====================================================
   TIMER
===================================================== */


.addition-timer-button {

    width: 100%;

    min-height: 52px;

    padding: 8px 12px;

    box-sizing: border-box;

    border: 2px solid #770000;

    border-radius: 8px;

    background: #000000;

    color: #ff0000;

    font-family: inherit;

    font-size: 1.1rem;

    font-weight: bold;

    cursor: pointer;

}


.addition-timer-button:hover {

    border-color: #ff0000;

}


.addition-timer-button.selected {

    border: 3px solid #ff0000;

    background: #220000;

    box-shadow:
        0 0 8px
        rgba(255, 0, 0, 0.45);

}

/* =====================================================
   MENU-KNAPPER
===================================================== */

.addition-menu-actions {

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        28px;

}


/* =====================================================
   START
===================================================== */

.addition-start-button {

    flex:
        1;

    min-height:
        48px;

    padding:
        10px 24px;

    border:
        2px solid #ff0000;

    border-radius:
        8px;

    background:
        #000000;

    color:
        #ff0000;

    font-family:
        inherit;

    font-size:
        1rem;

    font-weight:
        bold;

    cursor:
        pointer;

}


/* =====================================================
   TILBAGE
===================================================== */

.addition-back-button {

    flex:
        0 0 auto;

    min-height:
        48px;

    padding:
        10px 24px;

    border:
        2px solid #770000;

    border-radius:
        8px;

    background:
        #000000;

    color:
        #ff0000;

    font-family:
        inherit;

    font-size:
        1rem;

    font-weight:
        bold;

    cursor:
        pointer;

}


/* =====================================================
   HOVER PÅ MENU-KNAPPER
===================================================== */

.addition-start-button:hover,
.addition-back-button:hover {

    border-color:
        #ff0000;

}


/* =====================================================
   ADDITION - SPILLEPLADE
===================================================== */

.addition-board {

    display:
        grid;

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

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

    /* Make the board a square that fits inside the available shell area without creating scrollbars */
    width: min(82vw, calc(var(--app-vh, 100vh) - 230px), 760px);
    aspect-ratio: 1 / 1;
    height: auto;

    margin: 0 auto;

    flex-shrink: 0;

    box-sizing: border-box;

    /* Outer board border is intentionally removed to avoid double borders with cell borders */
    border: none;

}


/* =====================================================
   ALLE FELTER
===================================================== */

.addition-cell {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        0;

    min-height:
        0;

    box-sizing:
        border-box;

    border-right:
        1px solid currentColor;

    border-bottom:
        1px solid currentColor;

    color:
        #ff0000;

    font-size: clamp(12px, 1.8vw, 22px);
    font-weight:
        bold;

    user-select:
        none;

}


/* =====================================================
   HEADERFELTER
===================================================== */

.addition-header {

    font-weight:
        bold;

    border:
        3px solid #ff0000;

}


/* =====================================================
   ØVERSTE VENSTRE HJØRNE
===================================================== */

.addition-corner {

    font-size:
        clamp(
            18px,
            2.5vw,
            30px
        );

    border:
        3px solid #ff0000;

}


/* =====================================================
   FØRSTE RÆKKE
===================================================== */

.addition-header-row {

    border-top:
        3px solid #ff0000;

    border-bottom:
        3px solid #ff0000;

}


/* =====================================================
   FØRSTE KOLONNE
===================================================== */

.addition-header-column {

    border-left:
        3px solid #ff0000;

    border-right:
        3px solid #ff0000;

}


/* =====================================================
   SPØRGSMÅLSFELTER
===================================================== */

.addition-question-cell {

    cursor:
        default;

}


/* =====================================================
   AKTIVT FELT
===================================================== */

.addition-question-cell.active {

    animation:
        addition-blink
        1.2s
        ease-in-out
        infinite;

}


/* =====================================================
   BESVARET FELT
===================================================== */

.addition-question-cell.answered {

    opacity:
        0.65;

}


/* =====================================================
   FORUDFYLDT FELT
===================================================== */

.addition-question-cell.prefilled {

    opacity:
        0.7;

}


/* =====================================================
   BLINK
===================================================== */

@keyframes addition-blink {

    0%,
    100% {

        opacity:
            1;

    }

    50% {

        opacity:
            0.35;

    }

}


/* =====================================================
   MINDRE SKÆRME
===================================================== */

@media (max-height: 700px) {

    .addition-board {

        width: min(78vw, calc(var(--app-vh, 100vh) - 190px));
        aspect-ratio: 1 / 1;
        height: auto;

        /* ensure cells don't draw outer extra borders */
        box-sizing: border-box;

        }

}


/* =====================================================
   SMAL SKÆRM
===================================================== */

@media (max-width: 700px) {

    .game-area {
        flex-direction: column;
        gap: 8px;
        padding: 8px 8px 12px;
    }

    .addition-board {
        width: min(82vw, calc(var(--app-vh, 100vh) - 220px));
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .on-screen-signs {
        display: flex;
        gap: 8px;
        justify-content: center;
        width: 100%;
    }

    .sign-button {
        min-width: 56px;
        min-height: 48px;
        padding: 6px 10px;
        border: 2px solid #770000;
        border-radius: 8px;
        background: #000;
        color: #ff0000;
        font-size: 1.4rem;
        font-weight: bold;
        cursor: pointer;
    }

    .sign-button:active {
        transform: translateY(1px);
    }

}


/* =====================================================
   MEGET SMAL SKÆRM
===================================================== */

@media (max-width: 600px) {

    .addition-menu {

        padding:
            16px;

    }

    @media (max-width: 600px) and (max-height: 520px) {

        .addition-board {
            width: min(82vw, calc(var(--app-vh, 100vh) - 280px));
            height: auto;
        }

    }


    .addition-number-options,
    .addition-question-count-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .addition-prefill-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .addition-timer-options {
        grid-template-columns: 1fr;
    }

}


    .addition-option-button {

        min-height:
            46px;

        font-size:
            1rem;

    }


    .addition-menu-actions {

        gap:
            8px;

    }


    .addition-start-button,
    .addition-back-button {

        min-height:
            46px;

        padding:
            8px 12px;

    }


    .addition-cell {

        font-size: clamp(11px, 3.5vw, 18px);

        /* Prevent text overflow and keep numbers centered */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

    }