/* AbildskovUndervisning - abildskovundervisning.dk */
/* Snake - Tabel Træning */

.snake-table-menu {
    width: 100%;
    min-height: calc(100vh - 30px);
    padding: clamp(16px, 3vw, 30px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    background: #000;
    color: #fff;
}

.snake-table-menu-header {
    width: min(100%, 760px);
    text-align: center;
}

.snake-table-menu-header .page-title {
    color: #d00000;
}

.snake-table-setting-section {
    width: min(100%, 760px);
    padding: 18px;
    box-sizing: border-box;
    background: #080808;
    border: 1px solid #770000;
    border-radius: 10px;
}

.snake-table-setting-title {
    margin: 0 0 14px;
    color: #ff3030;
    font-size: 1.3rem;
    text-align: center;
}

.snake-table-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.snake-table-option-button,
.snake-table-toggle-button,
.snake-table-back-button,
.snake-table-start-button {
    min-height: 44px;
    padding: 9px 12px;
    color: #ff3030;
    background: #000;
    border: 1px solid #770000;
    border-radius: 7px;
    font: inherit;
    cursor: pointer;
}

.snake-table-toggle-button {
    width: 100%;
    margin-top: 8px;
    text-align: left;
}

.snake-table-option-button:hover,
.snake-table-option-button.selected,
.snake-table-toggle-button:hover,
.snake-table-toggle-button.selected,
.snake-table-start-button:hover {
    color: #fff;
    background: #500000;
    border-color: #ff3030;
}

.snake-table-option-button:focus-visible,
.snake-table-toggle-button:focus-visible,
.snake-table-back-button:focus-visible,
.snake-table-start-button:focus-visible {
    outline: 2px solid #ff3030;
    outline-offset: 2px;
}

.snake-table-menu-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.snake-table-start-button {
    background: #330000;
}

.snake-table-board {
    display: grid;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    grid-template-rows: repeat(13, minmax(0, 1fr));
    width: min(100%, 92vw, max(260px, calc(var(--app-vh, 100vh) - 286px)), 760px);
    height: auto;
    box-sizing: border-box;
    aspect-ratio: 1;
    border: 2px solid #770000;
    background: #050505;
}

.snake-table-board.snake-table-walls-enabled {
    border-width: 8px;
}

.snake-table-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    color: #8c8c8c;
    border: 1px solid #242424;
    font: 600 clamp(0.48rem, 1.7vw, 0.9rem) Arial, sans-serif;
    user-select: none;
    --snake-offset-x: 0%;
    --snake-offset-y: 0%;
    --snake-body-scale: 1;
    transform: translate(var(--snake-offset-x), var(--snake-offset-y));
    scale: var(--snake-body-scale);
    transition: transform var(--snake-tick-ms, 300ms) linear, scale var(--snake-tick-ms, 300ms) ease-out;
    will-change: transform;
}

.snake-table-cell.snake-table-animation-start {
    transition: none;
}

.snake-table-body-enter {
    will-change: transform, scale;
}

/* Correct and incorrect numbers deliberately share one neutral treatment. */
.snake-table-number {
    color: #f1d27a;
    background: #242424;
    border-color: #555;
    text-shadow: 0 0 4px rgba(241, 210, 122, 0.35);
}

.snake-table-obstacle {
    position: relative;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255, 100, 100, 0.2) 25%, transparent 25%) 0 0 / 8px 8px,
        #d00000;
    border: 2px solid #790000;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px #f33, inset 0 -3px 0 rgba(90, 0, 0, 0.45);
    font-size: clamp(0.55rem, 1.8vw, 0.95rem);
    font-weight: 800;
    text-shadow: 0 1px 1px #500;
}

.snake-table-obstacle-label {
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255, 110, 110, 0.25) 25%, transparent 25%) 0 0 / 8px 8px,
        #e00000;
}

.snake-table-body {
    position: relative;
    z-index: 1;
    color: #111;
    background: #ffd44d;
    border: 2px solid #fff1a8;
    border-radius: 42% 58% 55% 45% / 45% 45% 55% 55%;
    text-shadow: none;
    font-size: clamp(0.5rem, 1.6vw, 0.9rem);
}

.snake-table-tail {
    position: relative;
    z-index: 1;
    background: #8a5d00;
    border: 2px solid #ffd44d;
    border-radius: 999px;
    color: #fff1a8;
    font-size: clamp(0.5rem, 1.6vw, 0.9rem);
    font-weight: 800;
}

.snake-table-head {
    z-index: 1;
    position: relative;
    color: #111;
    background: #ffd44d;
    border: 2px solid #fff1a8;
    border-radius: 42% 58% 55% 45% / 45% 45% 55% 55%;
    font-size: clamp(0.55rem, 1.8vw, 1rem);
    text-shadow: none;
}

@media (max-width: 600px) {
    .snake-table-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

    }

    .snake-table-setting-section {
        padding: 12px;
    }
}