/* AbildskovUndervisning - abildskovundervisning.dk */
/* ===================================================
   TABELMESTER
   style.css
   =================================================== */

/* ---------- Farver og størrelser ---------- */

:root{
    --bg:#000000;
    --panel:#080000;

    --text:#ff3030;
    --border:#ff3030;

    --row-highlight:#140000;
    --column-highlight:#140000;
    --active:#500000;

    --cell-size:64px;
    --header-size:64px;

    --radius:8px;

    --font:Arial, Helvetica, sans-serif;
}

/* ---------- Reset ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,

/* =====================================================
   BODY
===================================================== */

/* The scrollbar belongs to the window (html), not to the page content */
html {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {

    margin: 0;

    padding: 15px;

    box-sizing: border-box;

    background: var(--bg);

    color: var(--text);

    font-family: var(--font);

    display: flex;
    flex-direction: column;

    align-items: stretch;

    min-height: 100vh;
    overflow: visible;

}

/* Scrollbar themed to match the red-on-black look */
html, body, * {
    scrollbar-width: thin;
    scrollbar-color: #770000 #000000;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #000000; }
::-webkit-scrollbar-thumb {
    background: #770000;
    border: 2px solid #000000;
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #cc0000; }

/* =====================================================
   SITE NAVIGATION (top of every page)
===================================================== */

:root {
    --nav-h: 44px;
}

.abs-nav {
    width: 100%;
    max-width: 1200px;
    height: calc(var(--nav-h) - 8px);
    margin: 0 auto 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.abs-nav-link {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    color: #ff0000;
    background: #000000;
    border: 2px solid #770000;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.abs-nav-logo {
    display: inline-flex;
    height: 100%;
    margin-right: auto;
    border-radius: 10px;
    outline: none;
}

.abs-nav-logo img {
    height: 100%;
    width: auto;
    border-radius: 8px;
    display: block;
}

.abs-nav-logo:hover img,
.abs-nav-logo:focus-visible img {
    box-shadow: 0 0 0 2px #ff0000;
}

.abs-nav-link:hover,
.abs-nav-link:focus-visible {
    background: #500000;
    border-color: #ff0000;
    outline: none;
}

#app {
    width: 100%;
    flex: 1 1 auto;
    min-height: calc(100vh - 30px - var(--nav-h));
    display: flex;
    align-items: stretch;
}

#app > * {
    flex: 1 1 auto;
    min-height: 0;
}

/* =====================================================
   FÆLLES MENU-LAYOUT
===================================================== */
/* =====================================================
   HOVEDMENU
===================================================== */

.menu-page {

    width: 100%;
    flex: 1 1 auto;
    min-height: calc(100vh - 30px);
    max-height: none;
    height: auto;

    box-sizing: border-box;

    padding: clamp(10px, 2.5vw, 26px);

    display: flex;

    flex-direction: column;

    background: #000000;

    color: #ffffff;

    /* Menus should not create an internal scrollbar; ensure content remains visible and page-level scrolling is disabled */

    overflow: visible;

}

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

.menu-header {

    width: 100%;

    max-width: 1500px;

    margin:
        0 auto
        clamp(20px, 4vw, 30px);

    text-align: center;

}


.menu-header .page-title {

    margin: 0;

    font-size: clamp(1.8rem, 5vw, 3.2rem);

    font-weight: 800;

    color: #d00000;

    letter-spacing: 1px;

}


.menu-header .page-subtitle {

    margin: 8px 0 0 0;

    font-size:
        clamp(
            1rem,
            2vw,
            1.4rem
        );

}


/* =====================================================
   SØGEFELT / TOOLBAR
===================================================== */

.menu-toolbar {

    width: 100%;

    max-width: 900px;

    margin: 0 auto 35px auto;

    display: flex;

    justify-content: center;

    padding: 0 10px;

}

/* Search input styling: match dark panels and other controls */

.menu-toolbar .game-search,
.game-search {

    width: 100%;

    max-width: 600px;

    padding: 10px 12px;

    background: #080808;

    border: 1px solid #770000;

    color: var(--text);

    border-radius: 8px;

    font-size: 1rem;

    box-sizing: border-box;

}

.menu-toolbar .game-search::placeholder {

    color: #bb8080;

    opacity: 0.95;

}

.menu-toolbar .game-search:focus {

    box-shadow: 0 0 0 3px rgba(208,0,0,0.12);

    border-color: #ff4040;

    outline: none;

}

/* =====================================================
   SPILLELISTE
===================================================== */

.game-list {

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    display: grid;

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

    gap: 10px; /* tighter gap to save vertical space */

    align-items: stretch;

}

.learning-folders {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.controls-guide {
    padding: 18px;
    background: #181818;
    color: #fff;
    border: 2px solid #770000;
    border-radius: 14px;
}

.controls-guide-title {
    margin: 0 0 10px;
    color: #ff4040;
    font-size: 1.2rem;
}

.controls-guide-list {
    padding-left: 20px;
    color: #ddd;
    font-size: 0.9rem;
    line-height: 1.4;
}

.controls-guide-list li + li {
    margin-top: 5px;
}

.learning-folder {
    min-height: 240px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #181818;
    color: #ffffff;
    border: 2px solid #770000;
    border-radius: 14px;
    cursor: pointer;
}

.learning-folder:hover,
.learning-folder:focus-visible {
    border-color: #ff4040;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
    outline: none;
}

.learning-folder .icon {
    display: block;
    font-size: 5rem;
    line-height: 1;
    margin: 0;
}

.learning-folder-title {
    margin: 0;
    color: #ffffff;
}

.learning-folder-description {
    max-width: 260px;
    margin: 0;
    color: #bbbbbb;
    text-align: center;
}

.menu-section-navigation {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto 10px;
}

.menu-back-button {
    padding: 8px 14px;
    background: #181818;
    color: #ffffff;
    border: 1px solid #770000;
    border-radius: 8px;
    cursor: pointer;
}

.menu-back-button:hover,
.menu-back-button:focus-visible {
    border-color: #ff4040;
    outline: none;
}

@media (max-width: 600px) {
    .learning-folders {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 601px) and (max-width: 850px) {
    .learning-folders {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .controls-guide {
        grid-column: 1 / -1;
    }
}

/* =====================================================
   SPILLEKORT
===================================================== */

/* Make cards shorter specifically in menu context to avoid menu scrolling */
.menu-page .game-card {
    min-height: 220px;
    padding: clamp(8px, 1.5vw, 14px);
}

.game-card {

    --game-color: #d00000;

    position: relative;

    box-sizing: border-box;

    width: 100%;

    min-width: 0;

    /* Restore larger min-height for better visual weight */
    min-height: 300px;

    /* Slightly larger padding to match original feel */
    padding: clamp(12px, 2vw, 22px);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    background: #181818;

    border: 2px solid #770000;

    border-radius: 14px;

    box-shadow:
        0 0 14px
        rgba(
            255,
            0,
            0,
            0.16
        );

}


/* =====================================================
   SPIL-IKON
===================================================== */

.game-icon {

    width: 56px;

    height: 56px;

    margin-bottom: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.4rem;

    color: var(--game-color);

}


/* =====================================================
   SPILTITEL
===================================================== */

.game-title {

    margin: 0;

    font-size: 1.15rem;

    line-height: 1.2;

    color: #ffffff;

    overflow-wrap: anywhere;

}


/* =====================================================
   BESKRIVELSE
===================================================== */

.game-description {

    margin: 0;

    max-width: 240px;

    font-size: 0.85rem;

    line-height: 1.4;

    color: #bbbbbb;

}


/* =====================================================
   INFORMATION
===================================================== */

.game-information {

    width: 100%;

    margin: 10px 0;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

}


.game-grade,
.game-category {

    padding: 4px 8px;

    background: #000000;

    border: 1px solid #770000;

    border-radius: 20px;

    font-size: 0.75rem;

    color: #ffffff;

}


/* =====================================================
   START-KNAP
===================================================== */

.game-start {

    width: 100%;

    max-width: 220px;

    min-height: 44px;

    margin-top: auto;

    padding: 8px 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: #d00000;

    color: #ffffff;

    border: 2px solid #ff4040;

    border-radius: 10px;

    font-size: 1rem;

    font-weight: 800;

    cursor: pointer;

}

.game-start:hover {

    background: #ff4040;

}


.game-start:focus-visible {

    outline: 3px solid #ffffff;

    outline-offset: 3px;

}


.button-icon {

    font-size: 1rem;

}


.button-label {

    display: inline-block;

}


/* =====================================================
   VERSION
===================================================== */

.game-version {

    margin-top: 8px;

    font-size: 0.75rem;

    color: #777777;

}


/* =====================================================
   VALGT SPIL
===================================================== */

.game-card.selected {

    border-color: #ff4040;

    box-shadow:
        0 0 0 3px #d00000,
        0 0 25px
        rgba(
            255,
            0,
            0,
            0.45
        );

}


.game-card.selected .game-title {

    color: #ff4040;

}


/* =====================================================
   INGEN SPIL
===================================================== */

.no-games {

    grid-column: 1 / -1;

    min-height: 250px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #111111;

    border: 2px solid #770000;

    border-radius: 14px;

}


.no-games-title {

    margin: 0;

    color: #d00000;

}


.no-games-text {

    color: #bbbbbb;

}


/* =====================================================
   MENU FOOTER
===================================================== */

.menu-footer {

    width: 100%;

    max-width: 1500px;

    margin: 18px auto 0 auto; /* reduced top margin */

    padding-top: 8px; /* reduced padding */

    text-align: center;

    border-top: 1px solid #330000;

    color: #666666;

    font-size: 0.72rem; /* reduced font */

}


/* =====================================================
   FÆLLES MENU-LAYOUT
===================================================== */

.game-menu {

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    box-sizing: border-box;

    overflow: visible;

    padding: 15px;

}

.game-menu.menu-page {
    max-width: 1500px;
}



/* =====================================================
   MENU PÅ MEGET SMÅ SKÆRME
===================================================== */

@media (max-height: 700px) {

    .game-menu {

        padding-top: 8px;

        padding-bottom: 8px;

    }

}

/* Height-only adjustments to keep menus fitting without enabling single-column layout */
@media (max-height: 600px) {

    .menu-header .page-title {
        font-size: clamp(1.3rem, 6vw, 2.2rem);
    }

    .menu-header .page-subtitle {
        font-size: 0.95rem;
    }

    .menu-toolbar { margin-bottom: 8px; }

    .game-list { gap: 8px; }

    .game-card { min-height: 240px; padding: 8px; }

    .game-icon { width: 56px; height:56px; font-size:2.4rem; }

    .menu-footer { margin-top:10px; padding-top:6px; font-size:0.68rem; }

}


/* ---------- Generelt ---------- */

.hidden{
    display:none !important;
}

.screen{

    width:min(1200px,95vw);

}

h1{

    text-align:center;

    font-size:3rem;

    margin-bottom:25px;

    text-shadow:0 0 8px red;

}

h2{

    font-size:1.2rem;

    margin-bottom:15px;

}

/* ---------- Panel ---------- */

.panel{

    border:2px solid var(--border);

    background:var(--panel);

    border-radius:var(--radius);

    padding:20px;

    margin-bottom:20px;

}

/* ---------- Tabelvalg ---------- */

.table-grid{

    display:grid;

    grid-template-columns:repeat(5,80px);

    gap:12px;

    justify-content:center;

}

.table-button{

    height:60px;

    border:2px solid var(--border);

    background:black;

    color:var(--text);

    font-size:1.4rem;

    cursor:pointer;

    transition:.15s;

}

.table-button:hover{

    background:#220000;

}

.table-button.selected{

    background:#660000;

}

/* ---------- Radio ---------- */

.radioGroup{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:25px;

}

.radioGroup label{

    cursor:pointer;

    font-size:1.1rem;

}

/* ---------- Checkbox ---------- */

.checkbox{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    font-size:1.2rem;

}

/* ---------- Start ---------- */

#startButton{

    display:block;

    margin:auto;

    margin-top:20px;

    width:260px;

    height:65px;

    background:black;

    color:var(--text);

    border:3px solid var(--border);

    font-size:2rem;

    cursor:pointer;

}

#startButton:hover{

    background:#300000;

}

/* ---------- Toplinje ---------- */

#topBar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    font-size:1.3rem;

}

/* ---------- Bræt ---------- */

#board{

    display:grid;

    justify-content:center;

    gap:2px;

}

/* ---------- Celle ---------- */

.cell{

    width:var(--cell-size);

    height:var(--cell-size);

    display:flex;

    justify-content:center;

    align-items:center;

    border:1px solid var(--border);

    background:black;

    color:var(--text);

    font-size:1.5rem;

    user-select:none;

}

.header{

    background:#120000;

    font-weight:bold;

}

.prefilled{

    background:black;

}

.solved{

    background:#120000;

}

/* ---------- Markering ---------- */

.row-highlight{

    background:var(--row-highlight);

}

.column-highlight{

    background:var(--column-highlight);

}

.active{

    background:var(--active);

    border-width:3px;

}

/* ---------- Status ---------- */

footer{

    margin-top:30px;

    text-align:center;

    font-size:1.2rem;

}

/* ---------- Færdig ---------- */

#finishScreen{

    text-align:center;

}

#finishStats{

    margin:30px auto;

    border:2px solid var(--border);

    padding:25px;

    width:min(450px,90vw);

    background:#080000;

}

#finishStats p{

    margin:12px 0;

    font-size:1.4rem;

}

/* ---------- Skjult input ---------- */

#hiddenInput{

    position:absolute;

    left:-9999px;

    opacity:0;

}

/* ---------- Smartboard ---------- */

@media (max-width:900px){

    :root{

        --cell-size:54px;

    }

}

@media (max-width:650px){

    :root{

        --cell-size:46px;

    }

    h1{

        font-size:2.2rem;

    }

    #topBar{

        flex-direction:column;

        gap:12px;

    }

    .table-grid{

        grid-template-columns:repeat(5,65px);

    }

}
/*
=========================================================
 Matemester
 Menu CSS
=========================================================
*/


/* =====================================================
   MENU - GRUNDLAG
===================================================== */


/* =====================================================
   GAME SHELL
   Fælles ramme til alle spil
===================================================== */

.game-shell {

    width: 100%;
    max-width: 1200px;

    /* Game shell should occupy available viewport height so games are not reduced */
    height: calc(var(--app-vh, 100vh) - 30px - var(--nav-h));
    min-height: 480px;
    max-height: none;

    margin: 0 auto;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    background: #000000;

    border: 2px solid #770000;
    border-radius: 16px;

    color: #ff0000;

    /* Keep the shell itself non-scrolling; the inner .game-area will be the scroll container for game content */
    overflow: hidden;

}

/* =====================================================
   GAME HEADER
===================================================== */

.game-header {

    width: 100%;

    min-height: 0px;

    box-sizing: border-box;

    padding: 8px 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    background: #080808;

    border-bottom: 2px solid #770000;

}


/* =====================================================
   GAME HEADING
===================================================== */

.game-heading {

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.game-shell-title {

    margin: 0;

    color: #ff0000;

    font-size: clamp(
        1.6rem,
        4vw,
        2.6rem
    );

    line-height: 1.1;

}


.game-shell-subtitle {

    margin: 5px 0 0 0;

    color: #ff0000;

    opacity: 0.75;

    font-size: 1rem;

}


/* =====================================================
   GAME CONTROLS
===================================================== */

.game-controls {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 12px;

}


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

.game-timer {

    min-width: 75px;

    padding: 8px 12px;

    box-sizing: border-box;

    text-align: center;

    color: #ff0000;

    font-family: monospace;

    font-size: 1.2rem;

    border: 1px solid #770000;

    border-radius: 6px;

    background: #000000;

}


/* =====================================================
   EXIT / MENU BUTTON
===================================================== */

.game-exit {

    min-height: 42px;

    padding: 8px 15px;

    border: 1px solid #ff0000;

    border-radius: 6px;

    background: #000000;

    color: #ff0000;

    font-family: inherit;

    font-size: 0.95rem;

    cursor: pointer;

}


.game-exit:hover {

    background: #330000;

}


.game-exit:focus-visible {

    outline: 2px solid #ff0000;

    outline-offset: 3px;

}


/* =====================================================
   GAME AREA
   Her placeres Grid eller andet spilindhold
===================================================== */

.game-area {

    flex: 1;

    width: 100%;

    min-height: 0;

    box-sizing: border-box;

    /* Use padding so the board doesn't touch borders */
    padding: 12px;

    display: flex;

    /* Center content in the game area; board is scaled to fit so no scrolling is needed */
    align-items: center;

    justify-content: center;

    /* Prevent scrolling inside the shell — board should be sized to fit */
    overflow: hidden;


}


/* =====================================================
   GAME STATUS
===================================================== */

.game-status {

    width: 100%;

    min-height: 45px;

    box-sizing: border-box;

    padding: 8px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #ff0000;

    border-top: 1px solid #770000;

}

.game-status:has(.game-continue) {
    gap: 8px;
    flex-wrap: wrap;
}

.game-continue {
    padding: 6px 12px;
    color: #fff;
    background: #330000;
    border: 1px solid #ff3030;
    border-radius: 6px;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

.game-continue:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (min-width: 601px) and (min-height: 501px) {
    .game-area:has(.addition-board, .tabelmester-board) {
        container-type: size;
    }

    .game-area .addition-board,
    .game-area .tabelmester-board {
        width: min(100cqw, 100cqh, 760px);
        height: auto;
    }

    .game-area:has(.on-screen-signs) .addition-board {
        width: min(100cqw, calc(100cqh - 56px), 760px);
    }
}

.addition-board,
.tabelmester-board {
    container-type: inline-size;
}

.addition-board .addition-cell,
.tabelmester-board .tabelmester-cell {
    font-size: clamp(9px, 2.5cqw, 22px);
    line-height: 1;
}


/* =====================================================
   GAME FOOTER
===================================================== */

.game-footer {

    width: 100%;

    min-height: 38px;

    box-sizing: border-box;

    padding: 5px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #080808;

    border-top: 2px solid #770000;

}


.game-help {

    color: #ff0000;

    opacity: 0.75;

    font-size: 0.9rem;

    text-align: center;

}


/* =====================================================
   GAME GRID
===================================================== */

.game-grid {

    display: grid;

    gap: 4px;

    box-sizing: border-box;

}


/* =====================================================
   GRID CELL
===================================================== */

.game-grid-cell {

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #000000;

    border: 1px solid #770000;

    color: #ff0000;

    font-size: 1.2rem;

    user-select: none;

}


/* =====================================================
   GRID CELL - HOVER
===================================================== */

.game-grid-cell:hover {

    background: #220000;

}


/* =====================================================
   RESPONSIVE GAME SHELL
===================================================== */


/* =====================================================
   MENU - TABLET
===================================================== */

@media (max-width: 900px) {

    .menu-page {

        padding: 20px;

    }


    .game-list {

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

        gap: 15px;

    }


    .game-card {

        min-height: 320px;

        padding: 20px;

    }

}


/* =====================================================
   MENU - MOBIL
===================================================== */

@media (max-width: 600px) {

    .menu-page {

        padding: 12px;

    }


    .menu-header {

        margin-bottom: 18px;

    }


    .menu-toolbar {

        margin-bottom: 14px;

    }


    .game-list {

        grid-template-columns: 1fr;

        gap: 10px;

    }


    .game-card {

        min-height: 220px;

        padding: 10px;

    }


    .game-icon {

        width: 56px;

        height: 56px;

        font-size: 2.4rem;

    }


    .game-title {

        font-size: 1.25rem;

    }


    .game-description {

        font-size: 0.9rem;

        max-width: 200px;

    }


    .game-start {

        max-width: none;

        min-height: 44px;

        padding: 10px 14px;

    }


}

/* Additional height-based shrink for very short screens */
@media (max-height: 520px) {

    .menu-page {

        padding: 8px;

    }

    .menu-header .page-title {

        font-size: clamp(1.4rem, 5vw, 2.4rem);

    }

    .game-card {

        min-height: 200px;

        padding: 8px;

    }

    .game-description { max-width: 180px; }

}

/* =====================================================
   MENU - MEGET SMÅ SKÆRME
===================================================== */

@media (max-width: 400px) {

    .menu-page {

        padding: 10px;

    }

    /* Keep game controls and titles usable on short phone screens. */
    @media (max-width: 600px) and (max-height: 520px) {

        .game-header {
            flex-direction: column;
            align-items: stretch;
            gap: 6px;
            padding: 6px 10px;
        }

        .game-heading {
            align-items: center;
            text-align: center;
        }

        .game-shell-title {
            font-size: clamp(1.1rem, 6vw, 1.6rem);
        }

        .game-shell-subtitle {
            margin-top: 2px;
            font-size: 0.85rem;
        }

        .game-controls {
            justify-content: flex-end;
        }

    }


    .game-card {

        min-height: 280px;

        padding: 15px;

    }


    .game-title {

        font-size: 1.35rem;

    }


    .game-description {

        font-size: 0.9rem;

    }

}

/* Copyright shown on every screen */
.abs-copyright {
    position: fixed;
    right: 10px;
    bottom: 3px;
    z-index: 50;
    color: #888888;
    font-size: 0.7rem;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}