/* ============================================================
   Dagens Ord
   Copyright © 2026 Aftenregn. Alle rettigheder forbeholdes.
   dagensord.aftenregn.dk

   Koden ligger frit læsbar, fordi den kører i browseren.
   Det gør den ikke fri at bruge. Kopiering, ændring og
   videredistribution kræver skriftlig tilladelse.
   ============================================================

   RÆKKEFØLGE

     1. Skrifttyper
     2. :root — mål og farver
     3. Grundlag
     4. Brættet
     5. Topikoner og ur
     6. Ikonsøjlen
     7. Panelerne, fælles
     8. Niveaupanelet
     9. Datovælgeren
    10. Indstillingspanelet
    11. Regelpanelet
    12. Statistikpanelet
    13. Tastaturet
    14. Knapper
    15. Overskrifter
    16. Startskærmen
    17. Uden JavaScript
    18. Den nedre statistik — UDGÅR I F10
    19. Telefon og tablet

   FARVERNE bor i :root. Brættets fem er de samme fem, som
   kalenderen bruger — det er hele pointen med dem. Ændres en
   farve, ændres den ét sted.

   BEMÆRK at main.js har de samme fem farver hårdkodet, fordi
   farvelægningskæden sammenligner style.backgroundColor med
   strenge. De to steder skal følges ad, indtil kæden læser
   fra en klasse frem for fra en farve.
   ============================================================ */


/* ------------------------------------------------------------
   1. SKRIFTTYPER
   ------------------------------------------------------------ */

@font-face {
    font-family: "Google Sans Code";
    src: url("../fonts/GoogleSansCode-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Google Sans Code";
    src: url("../fonts/GoogleSansCode-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ------------------------------------------------------------
   2. :ROOT
   ------------------------------------------------------------ */

:root{
    /* Mål */
    --board-width: 320px;       /* gitterkolonnen i .script_root */
    --board-row: 312px;         /* brættet, bredde og højde */
    --panel-size: 306px;        /* panelerne. 306/312 = 98% */
    --field-gap: .6rem;         /* 9.6px */
    --field-font-size: 1.7rem;

    /* Brættets fem. Samme fem i kalenderen. */
    --color-correct: rgb(43, 70, 61);      /* grøn  · rigtigt bogstav, rigtig plads */
    --color-present: rgb(163, 163, 63);    /* gul   · i ordet, andet sted */
    --color-absent:  rgb(128, 128, 122);   /* grå   · ikke i ordet */
    --color-active:  rgb(199, 174, 195);   /* lilla · rækken du står i */
    --color-field:   rgb(235, 223, 216);   /* råhvid · udfyldt felt */

    /* Flader */
    --color-background: rgb(7, 11, 43);
    --color-panel:      antiquewhite;
    --color-key:        rgb(64, 57, 63);

    /* Tekst */
    --color-text-light:    antiquewhite;
    --color-text-dark:     black;
    --color-headline:      rgb(255, 245, 239);
    --color-muted:         rgb(128, 128, 122);
    --color-word-present:  rgb(133, 133, 38);
    --color-word-active:   rgb(148, 110, 142);
    --color-word-unplayed: rgb(150, 133, 120);
    --color-warning: rgb(150, 60, 60);

    /* Rammer */
    --color-border-faint: rgb(210, 205, 195);
}


/* ------------------------------------------------------------
   3. GRUNDLAG
   ------------------------------------------------------------ */

html{
    box-sizing: border-box;
    font-size: 100%;
}

body{
    font-size: 1rem;
    font-family: "Google Sans Code", monospace;
    background-color: var(--color-background);
}

.section{
    margin-top: 5rem;
}

.script_root{
    display: grid;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) var(--board-width) minmax(0, 1fr);
    grid-template-rows: auto;
}
/* To hurtige tryk på en tast er to tryk — ikke zoom. Gælder
   kun kontroller. Knibe-zoom virker stadig overalt, og det
   skal det: den, der ser dårligt, zoomer. */
button,
input,
.keyboard-key{
    touch-action: manipulation;
}
/* Dobbeltklik på en knap eller en ordlinje skal ikke markere.
   Regelteksten og overskriften kan stadig markeres — nogle
   markerer for at følge linjen eller få den læst op. */
button,
.statshistory-line,
.statsnav-row{
    -webkit-user-select: none;
    user-select: none;
}
/* Pilene er til telefonen. På computer er der rigtige
   piletaster, og tastaturet beholder sin forskudte tredje
   række. */
#arrowleft,
#arrowright{
    display: none;
}


/* ------------------------------------------------------------
   4. BRÆTTET
   ------------------------------------------------------------ */

.inputfields-container{
    grid-row: 2 / 4;
    grid-column: 2 / 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--field-gap);
    width: var(--board-row);
    margin: 0 auto 1.5rem;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.inputfield{
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1;
    border: none;
    font-size: var(--field-font-size);
    font-family: "Google Sans Code", monospace;
    background-color: var(--color-field);
    text-align: center;
    caret-color: black;
    color: transparent;
    animation-name: color-my-caret;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    -webkit-appearance: none;
    appearance: none;
}

@keyframes color-my-caret{
    0%   { caret-color: var(--color-background); }
    20%  { caret-color: var(--color-present); }
    40%  { caret-color: var(--color-correct); }
    60%  { caret-color: var(--color-background); }
    80%  { caret-color: var(--color-present); }
    100% { caret-color: var(--color-correct); }
}


/* ------------------------------------------------------------
   5. TOPIKONER OG UR

   .clock-container er uret til venstre. Navnet hed før
   .mainsettings-icon-container1, som ikke sagde noget.
   ------------------------------------------------------------ */

.mainsettings-icon-container{
    grid-row: 1 / 1;
    grid-column: 2 / 2;
    height: 40px;
    color: var(--color-text-light);
    display: flex;
    justify-content: end;
    padding-right: .2rem;

    opacity: 0;
    visibility: hidden;
    transition: all .7s;
}

.mainsettings-icon-container1,
.clock-container{
    grid-row: 1 / 1;
    grid-column: 2 / 2;
    color: var(--color-text-light);
    display: flex;
    justify-content: start;
    padding-left: .2rem;
    align-items: center;
}

.newsettings-icon-container{
    grid-row: 1 / 1;
    grid-column: 3 / 3;
    height: 40px;
    width: 72px;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    justify-content: start;
}

.uppersettings,
.uppersettingsspeciel{
    font-family: "Google Sans Code", monospace;
    font-size: 1rem;
    color: var(--color-text-light);
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all .5s;
    cursor: pointer;
}

.uppersettingsspeciel{
    padding-right: 1rem;
}

.newsettings-icon{
    width: 2rem;
    align-items: center;
}

.newword-count{
    padding-left: .2rem;
    font-family: "Google Sans Code", monospace;
    font-size: .8rem;
    color: var(--color-text-light);
}

#newwordicon{
    display: none;
    padding: 0;
    gap: .2rem;
}
.newsettings-icon,
.newword-count{
    flex: 0 0 auto;
    white-space: nowrap;
}

@keyframes level-waiting-pulse{
    0%   { transform: scale(1.35); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1.35); }
}

#levelbutton.level-waiting{
    animation: level-waiting-pulse 2.4s ease-in-out infinite;
}

/* Mediaforespørgslen skal stå EFTER animationsreglen og må
   ikke gentages bagefter — en @media tæller ikke i
   specificiteten, så en dublet nedenunder ville ophæve den. */
@media (prefers-reduced-motion: reduce){
    #levelbutton.level-waiting{
        animation: none;
        transform: scale(1.35);
    }
}


/* ------------------------------------------------------------
   6. IKONSØJLEN
   ------------------------------------------------------------ */

.settings-icon-container{
    grid-row: 2 / 4;
    grid-column: 3 / 3;
    height: var(--board-row);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    color: var(--color-text-light);
}

.settings{
    font-family: "Google Sans Code", monospace;
    font-size: 1rem;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    background-color: transparent;
    border: none;
    border-radius: 10px;
    transition: all .5s;
    cursor: pointer;
}

.settings-icon{
    width: 1.6rem;
    padding-right: 0rem;
}

.settings-icon-free{
    width: 1.6rem;
    height: 1.6rem;
}

/* De otte tændes af setSettingVisual(). Standarden her skal
   stemme med chosenSettings' otte falske ved opstart. */
#hintbutton,
#revealbutton,
#streakbutton,
#timebutton,
#timebutton-img-top,
#keyboardbutton,
#statisticbutton,
#correctionbutton,
#greyfieldsbutton{
    visibility: hidden;
    opacity: 0;
    transition: all .7s;
}

#streakbutton,
#timebutton,
#timebutton-img-top,
#keyboardbutton,
#statisticbutton,
#correctionbutton,
#greyfieldsbutton{
    cursor: default;
}


/* ------------------------------------------------------------
   7. PANELERNE, FÆLLES

   Fire paneler i samme celle: regler, niveau, indstillinger,
   statistik. Ét ad gangen, styret af opacity og visibility.
   ------------------------------------------------------------ */

.settings-content-container{
    grid-row: 2 / 4;
    grid-column: 2 / 2;
    width: 100%;
    max-width: var(--panel-size);
    height: var(--panel-size);
    max-height: var(--panel-size);
    margin: calc((var(--board-row) - var(--panel-size)) / 2) auto 0;
    color: var(--color-text-light);
    background-color: var(--color-panel);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    transition: all .5s;
    z-index: 2;
}

/* De fire paneler deler gittercelle. Tilstanden bor i .is-open,
   som main.js sætter med setPanelOpen().

   Et lukket panel tager ikke imod klik — heller ikke de 0,7
   sekunder, det toner ud. Og det åbne ligger øverst, uanset
   rækkefølgen i DOM'en. Startskærmen har z-index 3 og ligger
   stadig over alt. */
#informationcontent,
#levelcontent,
#settingscontent,
#statisticcontent{
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity .7s, visibility 0s .7s;
}

#informationcontent.is-open,
#levelcontent.is-open,
#settingscontent.is-open,
#statisticcontent.is-open{
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
    transition: opacity .7s, visibility 0s;
}

/* Niveau og statistik har flere visninger i samme panel. De
   ligger oven på hinanden i én celle og toner mellem sig, som
   panelerne selv gør. Baggrunden sidder på visningen, så
   brættet skinner igennem midt i skiftet.

   Hver visning beholder sin egen display — gitter eller flex.
   Reglerne her styrer kun synlighed, klik og baggrund, og kun
   den aktive tager imod klik. */
#levelcontent,
#statisticcontent{
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    background-color: transparent;
}

#levelcontent > .levelview,
#statisticcontent > .levelview{
    grid-area: 1 / 1;
    min-height: 0;
    background-color: var(--color-panel);

    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .7s, visibility 0s .7s;
}

#levelcontent.is-open > .levelview.is-active,
#statisticcontent.is-open > .levelview.is-active{
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .7s, visibility 0s;
}

#statisticcontent .statsall-icon{
    width: 88%;
    height: auto;
    object-fit: contain;
    display: block;
}
#statisticcontent .statsdetail-icon{
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    object-fit: contain;
}

#statisticcontent .levelpicker-headline{
    margin: 0 0 .5rem 0;
    width: 100%;
    min-height: 1.8rem;
}
#statisticcontent .statsempty{
    font-family: "Google Sans Code", monospace;
    font-size: .8rem;
    color: var(--color-muted);
    padding: 1rem .5rem;
    text-align: center;
}

#statisticcontent .statsshare-button{
    display: flex;
    align-items: center;
    background-color: transparent;
    border: none;
    padding: 0 0 0 .3rem;
    margin: 0;
    cursor: pointer;
}

/* En visning inde i et panel. Én er .is-active ad gangen. */
.levelview{
    display: none;
    width: 100%;
    height: 100%;
    padding: .9rem .4rem .5rem;
    box-sizing: border-box;
}

.levelpicker-headline{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;

    font-family: "Google Sans Code", monospace;
    font-size: .8rem;
    color: var(--color-text-dark);
}

button.is-unavailable{
    color: var(--color-muted);
}


/* ------------------------------------------------------------
   8. NIVEAUPANELET
   ------------------------------------------------------------ */

.levelsettings-button{
    margin-top: .7rem;
    font-family: "Google Sans Code", monospace;
    font-size: .7rem;
    width: 30%;
    height: 1.9rem;
    color: var(--color-text-dark);
    background-color: transparent;
    border: none;
    align-items: center;
    text-align: center;
}

.levelsettings-button:hover{
    cursor: pointer;
}

#levelgrid{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, min-content) 1fr min-content 2rem 2rem;
    justify-items: center;
    row-gap: .1rem;
    column-gap: .3rem;
}
#levelgrid.is-active{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, min-content) minmax(0, 1fr) min-content 2rem 2rem;
    justify-items: center;
    row-gap: .1rem;
    column-gap: .3rem;
}
#levelgrid #levelrevert{
    grid-row: 6;
    margin-top: 1.2rem;
}


#topicpicker{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: min-content repeat(2, min-content) 1fr min-content;
    justify-items: center;
    row-gap: .1rem;
    column-gap: .3rem;
}

#levelgrid .levelsettings-button,
#topicpicker .levelsettings-button{
    grid-column: span 2;
    width: 100%;
    margin: 0;
    padding: 0 .15rem;
    line-height: 1.15;
    text-align: center;
    font-size: .75rem;
    height: 3.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .15rem;
}

#levelgrid .levelsettings-button .settings-icon,
#topicpicker .levelsettings-button .settings-icon{
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    padding-right: 0;
}

#levelgrid .levelsettings-label,
#topicpicker .levelsettings-label{
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    display: inline;
}

#levelgrid .levelcell-topic{
    grid-column: 2 / span 2;
}
#levelgrid .levelcell-date{
    grid-column: 4 / span 2;
}

#levelgrid .btn,
#levelgrid .btndefault{
    grid-column: 1 / -1;
    display: none;
}

#levelgrid #levelapply{
    grid-row: 5;
}

#levelgrid .levelnav-prev,
#levelgrid .levelnav-next{
    grid-row: 7;
    height: 2rem;
    justify-content: center;
    padding: 0;
}
#levelgrid .levelnav-prev{
    grid-column: 1 / span 2;
    align-items: flex-start;
}
#levelgrid .levelnav-next{
    grid-column: 5 / span 2;
    align-items: flex-end;
}

#topicpicker .levelpicker-headline{
    grid-column: 1 / -1;
}

#topicpicker .levelsettings-button[data-group="topic"]{
    grid-column: span 3;
}

#topicpicker .levelpicker-back{
    grid-column: 1 / -1;
    grid-row: 5;
    height: 2rem;
    padding: 0;
}


/* ------------------------------------------------------------
   9. DATOVÆLGEREN

   .datepicker-track og .datepicker-cell bruges også af
   statistikkens kombinationsvælger — rulning, ramme og de fem
   markeringsfarver er de samme.
   ------------------------------------------------------------ */

#datepicker{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: .8rem;
    padding-bottom: .6rem;
}

#datepicker .levelpicker-back{
    width: 30%;
}

.datepicker-track{
    position: relative;
    display: flex;
    gap: .3rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--color-muted) transparent;
    padding-bottom: .3rem;
    -webkit-overflow-scrolling: touch;
}

.datepicker-cell{
    flex: 0 0 auto;
    scroll-snap-align: end;
    font-family: "Google Sans Code", monospace;
    color: var(--color-text-dark);
    background-color: transparent;
    border: 1px solid var(--color-absent);
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .2s;
}

.datepicker-cell:hover:not(:disabled){
    border-color: var(--color-correct);
}

.datepicker-cell:disabled{
    color: var(--color-muted);
    border-color: var(--color-border-faint);
    cursor: default;
}

.datepicker-cell.is-selected{
    border-color: var(--color-correct);
    background-image: url("../images/icon_enabled.png");
    background-repeat: no-repeat;
    background-position: right -.2rem bottom -.1rem;
    background-size: 1rem 1rem;
}

.datepicker-cell.day-unplayed{
    background-color: var(--color-field);
}

.datepicker-cell.day-open{
    background-color: var(--color-active);
    border-color: var(--color-active);
}

.datepicker-cell.day-won{
    background-color: var(--color-correct);
    border-color: var(--color-correct);
    color: var(--color-field);
}

.datepicker-cell.day-partial{
    background-color: var(--color-present);
    border-color: var(--color-present);
    color: var(--color-field);
}

.datepicker-cell.day-lost{
    background-color: var(--color-absent);
    border-color: var(--color-absent);
    color: var(--color-field);
}

.datepicker-cell.day-won .datepicker-weekday,
.datepicker-cell.day-partial .datepicker-weekday,
.datepicker-cell.day-lost .datepicker-weekday,
.datepicker-cell.day-won .datepicker-year,
.datepicker-cell.day-partial .datepicker-year,
.datepicker-cell.day-lost .datepicker-year{
    color: var(--color-field);
}

.datepicker-month,
.datepicker-day{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    padding: .2rem 0 .45rem;
    line-height: 1.1;
}

.datepicker-number,
.datepicker-monthname{
    font-size: .85rem;
}

.datepicker-weekday,
.datepicker-year{
    font-size: .55rem;
    color: var(--color-muted);
}


/* ------------------------------------------------------------
   10. INDSTILLINGSPANELET
   ------------------------------------------------------------ */

.innersettings-headline{
    color: var(--color-correct);
    font-size: 1.2rem;
    display: block;
}

.innersettings-icon{
    width: 1.9rem;
}

.innersettings-button{
    margin-top: .8rem;
    margin-bottom: .8rem;
    display: block;
    font-family: "Google Sans Code", monospace;
    font-size: .7rem;
    color: var(--color-text-dark);
    text-align: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
    height: 3rem;
    width: 4rem;
}

#settingscontent{
    display: grid;
    overflow: hidden;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, min-content) minmax(0, 1fr) min-content 2rem 2rem;
    justify-items: center;
    padding: .9rem .4rem .5rem;
    box-sizing: border-box;
    row-gap: .1rem;
    column-gap: .3rem;
}

#settingscontent .innersettings-button{
    width: 100%;
    height: 3.9rem;
    margin: 0;
    padding: 0 .15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .15rem;
    font-size: .75rem;
    line-height: 1.15;
}

#settingscontent .innersettings-icon{
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: .05rem;
    box-sizing: border-box;
    object-fit: contain;
}

#innertime,
#innerhint,
#innerreveal{
    grid-column: span 4;
    grid-row: 1;
}

#innerstreak{
    grid-column: 3 / span 4;
    grid-row: 2;
}
#innerstatistic{
    grid-column: 7 / span 4;
    grid-row: 2;
}

#innercorrection,
#innerkeyboard,
#innergreyfields{
    grid-column: span 4;
    grid-row: 3;
}

#settingscontent .btn,
#settingscontent .btndefault{
    grid-column: 1 / -1;
}

#settingscontent #resetbutton{
    grid-row: 5;
    margin-top: 0;
}
#settingscontent #startgamebutton{
    grid-row: 5;
    align-self: start;
}
#settingscontent #resetdefault{
    grid-row: 7;
}

/* Låsebeskeden deler række med #resetdefault. De to kan aldrig
   stå samtidig: er indstillingerne låst, er der intet at
   genstarte. */
#settingscontent .settings-locked{
    grid-row: 6;
    grid-column: 1 / -1;
    align-self: center;
    margin: 0;
    padding: 0 .5rem;
    font-family: "Google Sans Code", monospace;
    font-size: .6rem;
    line-height: 1.3;
    text-align: center;
    color: var(--color-muted);
}

.settings-locked{
    display: none;
}

#settingscontent #settingsprev{
    grid-row: 7;
    grid-column: 1 / span 4;
    width: 100%;
    height: 2rem;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#settingscontent #settingsprev .settings-icon{
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    padding-right: 0;
}

#resetbutton,
#resetdefault{
    opacity: 0;
    visibility: hidden;
    display: none;
}


/* ------------------------------------------------------------
   11. REGELPANELET
   ------------------------------------------------------------ */

#informationcontent{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr min-content;
    padding: .9rem .4rem .5rem;
    box-sizing: border-box;
}

.information-scroll{
    grid-column: 1 / -1;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem .3rem .5rem .5rem;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: var(--color-muted) transparent;
}

#informationcontent .infonav-next{
    grid-column: 9 / -1;
    width: 100%;
    height: 2rem;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#informationcontent .infonav-next .settings-icon{
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    padding-right: 0;
}

.info-title{
    font-family: "Google Sans Code", monospace;
    font-size: 1rem;
    color: var(--color-correct);
    margin: 0 0 .6rem 0;
}

.info-heading{
    font-family: "Google Sans Code", monospace;
    font-size: .8rem;
    color: var(--color-correct);
    margin: .8rem 0 .2rem 0;
}

.info-text{
    font-family: "Google Sans Code", monospace;
    font-size: .7rem;
    line-height: 1.35;
    color: var(--color-text-dark);
    margin: 0 0 .3rem 0;
}

.info-icon{
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    vertical-align: -.45rem;
    margin-right: .35rem;
}

.info-line{
    padding-left: 1.85rem;
    text-indent: -1.85rem;
    margin-bottom: .5rem;
}

/* Skærmbillederne i statistikafsnittet. Originalerne er 892 px
   brede og vises i spaltens bredde — det giver pixelforhold knap
   tre, nok til moderne telefoner.

   width: 100% frem for en fast bredde, så de følger spalten på
   både computer og telefon. */
.info-screenshot{
    display: block;
    width: 100%;
    height: auto;
    margin: .5rem 0 .8rem 0;
    border-radius: 3px;
}

/* Ikonet i afsnittet om hjemmeskærmen. Kilden er 512 px og
   vises i 120 — det dækker pixelforhold 3 med margen.

   display: block og margin: auto centrerer det, så det læses
   som en illustration frem for som et element i teksten. */
.info-appicon{
    display: block;
    width: 100px;
    height: auto;
    margin: .8rem auto 1rem auto;
}

.info-share{
    border-radius: 4px;
    padding: .6rem 0;
    margin: .5rem 0 .8rem 0;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--color-text-dark);
}

#informationcontent .farveprove{
    display: inline-block;
    width: .8rem;
    height: .8rem;
    margin-right: .35rem;
    vertical-align: -.1rem;
    border-radius: 2px;
}
#informationcontent .farve-korrekt{
    background-color: var(--color-correct);
}
#informationcontent .farve-tilstede{
    background-color: var(--color-present);
}
#informationcontent .farve-fravalgt{
    background-color: var(--color-absent);
}
#informationcontent .farve-aktiv{
    background-color: var(--color-active);
}

/* Indholdsfortegnelsen. <details> folder selv — ingen JavaScript.
   Lukket som udgangspunkt, så de femogtyve afsnit ikke fylder en
   skærm, hver gang reglerne åbnes. */

/* Fortegnelsen vises kun for den, der har spillet før. Den nye
   læser reglerne forlæns — teksten bygger på sig selv, og en
   fortegnelse ville invitere til at springe over. main.js tænder
   den, når getAllRows() eller getAllLiveGames() har noget. */
.info-toc{
    display: none;
    margin: 0 0 1rem 0;
    padding: .4rem 0;
}

.info-toc-summary{
    font-family: "Google Sans Code", monospace;
    font-size: .75rem;
    color: var(--color-correct);
    cursor: pointer;
    list-style: none;
    padding: .1rem 0;
}

.info-toc-summary::-webkit-details-marker{
    display: none;
}

.info-toc-summary::before{
    content: "+";
    display: inline-block;
    width: 1rem;
    color: var(--color-muted);
}

.info-toc[open] .info-toc-summary::before{
    content: "–";
}

.info-toc-link{
    display: block;
    width: 100%;
    margin: 0;
    padding: .15rem 0 .15rem 1rem;

    font-family: "Google Sans Code", monospace;
    font-size: .7rem;
    color: var(--color-text-dark);
    background-color: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
}

.info-toc-link:hover{
    color: var(--color-correct);
}

/* Sletningen er en rettighed, ikke en funktion. Den står med
   sin egen farve, så den kan findes af den, der leder efter den. */
.info-toc-wipe{
    color: var(--color-warning);
}

.info-toc-wipe:hover{
    color: var(--color-warning);
    text-decoration: underline;
}

/* Sletningen i reglerne */
.info-wipe{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .8rem 0;
}

.info-wipe-button{
    display: flex;
    align-items: center;
    gap: .3rem;

    font-family: "Google Sans Code", monospace;
    font-size: .7rem;
    color: var(--color-text-dark);
    background-color: transparent;
    border: 1px solid var(--color-muted);
    border-radius: 5px;
    padding: .25rem .5rem;
    cursor: pointer;
}

.info-wipe-icon{
    width: .9rem;
    height: .9rem;
    object-fit: contain;
}

.info-wipe-yes{
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.info-wipe-question{
    font-family: "Google Sans Code", monospace;
    font-size: .7rem;
    color: var(--color-text-dark);
    margin: 0;
    flex: 1 1 100%;
}

/* Farvede ord i brødteksten. Gul og lilla er mørkere end
   brættets, fordi tekst på lys bund skal kunne læses. */
.ord-korrekt{
    color: var(--color-correct);
}
.ord-tilstede{
    color: var(--color-word-present);
}
.ord-fravalgt{
    color: var(--color-absent);
}
.ord-aktiv{
    color: var(--color-word-active);
}
.ord-uspillet{
    color: var(--color-word-unplayed);
}


/* ------------------------------------------------------------
   12. STATISTIKPANELET

   Tre visninger: Sættet, Kombinationen, Samlet. Pilene i
   .statsnav-row skifter mellem dem.
   ------------------------------------------------------------ */

/* De fire visninger ligger oven på hinanden i samme celle og
   toner mellem sig, som panelerne gør. display kan ikke tone —
   derfor opacity og visibility, og samme regel om klik som
   panelerne: kun den aktive tager imod dem. */

#statisticset,
#statisticcombination,
#statistictotal,
#statisticspread{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#statisticcontent{
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    background-color: transparent;
}


#statisticcontent .statshead-icon{
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 auto;
    object-fit: contain;
}

#statisticcontent .statssubheadline{
    font-family: "Google Sans Code", monospace;
    font-size: .7rem;
    color: var(--color-muted);
    margin: 0 0 .3rem 0;
}

#statisticcontent .statsempty{
    font-family: "Google Sans Code", monospace;
    font-size: .8rem;
    color: var(--color-muted);
    padding: 1rem 0;
}

/* Tallene: to rækker à tre celler. Ikonet peger udad i
   siderne, midtercellen står på panelets midte. */
#statisticcontent .statstrio-row{
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding: .15rem 0;
}

#statisticcontent .statstrio-row .statsline{
    flex: 1 1 0;
    margin: 0;
    gap: .25rem;
    display: flex;
    align-items: center;
    padding: 0 .2rem;
}

#statisticcontent .statstrio-row .statsline:first-child{
    justify-content: flex-start;
}
#statisticcontent .statstrio-row .statsline:nth-child(2){
    justify-content: center;
}
#statisticcontent .statstrio-row .statsline:last-child{
    justify-content: flex-end;
}

#statisticcontent .statstrio-row .statsline-icon{
    width: 1.4rem;
    height: 1.4rem;
}

#statisticcontent .statsline-icon{
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    object-fit: contain;
}

#statisticcontent .statsline-text{
    color: var(--color-text-dark);
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .1rem;
    margin: 0 auto;
}

/* Betingelserne: stavekontrol, tastatur, grå felter, afslør */
#statisticcontent .statscondition-row{
    display: flex;
    justify-content: center;
    gap: .6rem;
    padding: .3rem 0;
}

#statisticcontent .statscondition-icon{
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
    object-fit: contain;
}

/* Ordlinjerne */
#statisticcontent .statsword-row{
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: .15rem;
    padding: .05rem .2rem;
    box-sizing: border-box;
    display: flex;
    margin: 0 auto;
    text-align: center;
}

#statisticcontent .statsword-word{
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    margin: 0;
    font-size: .9rem;
    color: var(--color-correct);
}

#statisticcontent .statsword-word.fail{
    color: var(--color-absent);
    text-decoration: line-through;
}

#statisticcontent .statsword-text{
    color: var(--color-text-dark);
    font-size: .7rem;
    padding: .1rem;
    margin: 0;
    white-space: nowrap;
}

#statisticcontent .statsword-index{
    color: var(--color-muted);
    font-size: .75rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .1rem;
    margin: 0;
}

#statisticcontent .statsword-icon{
    width: .75rem;
    height: .75rem;
    flex: 0 0 auto;
    object-fit: contain;
}

#statisticcontent .statsword-date{
    font-size: .6rem;
    color: var(--color-muted);
    white-space: nowrap;
    flex: 0 0 auto;
    margin: 0;
}

/* Kombinationsvælgeren: de ni som en vandret række. Arver
   rulning og markeringsfarver fra .datepicker-track. */
#statisticcontent .statscombination-track{
    padding-bottom: .4rem;
    padding-top: .4rem;
    flex: 0 0 auto;
}

#statisticcontent .statscombination-cell{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    padding: .15rem .2rem;
    min-height: 1.7rem;
}

#statisticcontent .statscombination-icon{
    width: 1.3rem;
    height: 1.3rem;
    flex: 0 0 auto;
    object-fit: contain;
}

/* Kombinationslisten: tryk folder detaljen ud */
#statisticcontent .statshistory-list{
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-muted) transparent;
}

#statisticcontent .statshistory-line{
    cursor: pointer;
}
#statisticcontent .statshistory-entry{
    width: 100%;
    display: flex;
    flex-direction: column;
}

#statisticcontent .statshistory-entry .statsword-row{
    padding: .05rem .2rem;
}

#statisticcontent .statshistory-caret{
    width: .4rem;
    height: .4rem;
    flex: 0 0 auto;
    object-fit: contain;
}


#statisticcontent .statshistory-detail{
    display: none;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: 0 0 .2rem;
}

#statisticcontent .statshistory-line[data-expand="open"] + .statshistory-detail{
    display: flex;
}

#statisticcontent .statshistory-detail .statsword-icon,
#statisticcontent .statshistory-detail .statscondition-icon{
    width: 1.1rem;
    height: 1.1rem;
}

#statisticcontent .statshistory-detail .statscondition-row{
    padding: 0;
    gap: .4rem;
}

/* Henvisningen i statistikken */
#statisticcontent .statswipe-hint{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;

    width: auto;
    margin: 0;
    padding: .3rem .4rem;
    height: auto;

    font-family: "Google Sans Code", monospace;
    font-size: .6rem;
    color: var(--color-muted);
    background-color: transparent;
    border: none;
    text-decoration: underline;
    text-underline-offset: .15rem;
    cursor: pointer;
    flex: 0 1 auto;
}

#statisticcontent .statswipe-hint-icon{
    width: .7rem;
    height: .7rem;
    object-fit: contain;
    flex: 0 0 auto;
}

/* Pilene mellem de tre visninger. margin-top: auto skubber
   rækken til bunden af flex-kolonnen. */
#statisticcontent .statsnav-row{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: .3rem;
    flex: 0 0 auto;
}

#statisticcontent .statsnav-button{
    width: auto;
    height: 2rem;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

#statisticcontent .statsnav-button .settings-icon{
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    padding-right: 0;
}

#statisticcontent .statsspread-caption{
    font-family: "Google Sans Code", monospace;
    font-size: .65rem;
    color: var(--color-muted);
    margin: 0 0 .8rem 0;
}

#statisticcontent .statsspread-chart{
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    width: 100%;
    flex: 0 0 auto;
    height: 5rem;
    padding: 0 .5rem;
    box-sizing: border-box;
}

#statisticcontent .statsspread-column{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    flex: 1 1 0;
    gap: .2rem;
}

#statisticcontent .statsspread-track{
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 0;
}

#statisticcontent .statsspread-bar{
    width: 40%;
    min-height: 2px;
    background-color: var(--color-correct);
    border-radius: 2px 2px 0 0;
    transition: height .3s;
}



#statisticcontent .statsspread-value{
    font-family: "Google Sans Code", monospace;
    font-size: .7rem;
    color: var(--color-text-dark);
    margin: 0;
    flex: 0 0 auto;
}

#statisticcontent .statsspread-label{
    font-family: "Google Sans Code", monospace;
    font-size: .7rem;
    color: var(--color-muted);
    margin: 0;
    flex: 0 0 auto;
}
#statisticcontent .statswipe-icon{
    width: 1.3rem;
    height: 1.3rem;
    object-fit: contain;
}

/* ------------------------------------------------------------
   13. TASTATURET
   ------------------------------------------------------------ */

.keyboard-container{
    grid-row: 5 / 5;
    grid-column: 2 / 2;
    font-size: 1.5rem;
    display: block;
    margin: 0 auto 1rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: .85;
}

#keyboard{
    visibility: visible;
    opacity: 1;
    transition: all .7s;
}

.keyboard-key{
    background-color: var(--color-key);
    margin: .1rem;
    padding: .2rem .3rem;
    border: 1px solid var(--color-background);
    border-radius: 3px;
    cursor: pointer;
}

.key{
    font-size: 1.5rem;
}


/* ------------------------------------------------------------
   14. KNAPPER
   ------------------------------------------------------------ */

.btn{
    font-family: "Google Sans Code", monospace;
    font-size: .7rem;
    width: 90%;
    color: var(--color-text-light);
    padding: .1rem .2rem;
    background-color: var(--color-present);
    border: none;
    align-items: center;
    text-align: center;
    border-radius: 7px;
    transition: all .5s;
    cursor: pointer;
}

.btn:hover{
    background-color: var(--color-correct);
}

.btndefault{
    font-family: "Google Sans Code", monospace;
    font-size: .5rem;
    width: 90%;
    height: 2rem;
    color: var(--color-text-dark);
    background-color: transparent;
    border: none;
    align-items: center;
    text-align: center;
    border-radius: 10px;
    transition: all .5s;
    cursor: pointer;
}

.btndefault:hover{
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

.btn:disabled,
.btndefault:disabled{
    background-color: var(--color-absent);
    cursor: default;
}


/* ------------------------------------------------------------
   15. OVERSKRIFTER
   ------------------------------------------------------------ */

.random,
.ddoppslag{
    text-shadow:
        0 1px 2px rgba(7, 11, 43, .95),
        0 0 10px rgba(7, 11, 43, .75);
}

.random{
    margin: 1.6rem auto 0;
    padding: 0 .5rem;
    text-align: center;
    color: var(--color-headline);
    font-size: 1rem;
    line-height: 1.25;
    min-height: 20px;
}

.ddoppslag{
    color: var(--color-field);
    font-size: .8rem;
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.ddoopslag-link{
    text-decoration: none;
    color: var(--color-field);
}
.ddoopslag-link:hover{
    color: var(--color-correct);
}


/* ------------------------------------------------------------
   16. STARTSKÆRMEN
   ------------------------------------------------------------ */

.startscreen-container{
    grid-row: 2 / 6;
    grid-column: 2 / 2;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;

    opacity: 1;
    visibility: visible;
    transition: all .7s;
}

.startscreen-image{
    width: var(--board-row);
    height: var(--board-row);
    object-fit: fill;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.startscreen-button{
    width: var(--board-row);
    height: 2.2rem;
    font-size: 1rem;
}


/* ------------------------------------------------------------
   17. UDEN JAVASCRIPT
   ------------------------------------------------------------ */

.noscript-message{
    max-width: var(--board-width);
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
    font-family: "Google Sans Code", monospace;
    color: var(--color-text-light);
    text-align: left;
}

.noscript-message h1{
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0 0 .8rem 0;
}

.noscript-message p{
    font-size: .8rem;
    line-height: 1.4;
    margin: 0 0 .6rem 0;
}


/* ============================================================
   18. DEN NEDRE STATISTIK — UDGÅR I F10

   Fire beholdere under tastaturet, rækkerne 6 til 9. De
   fyldes af setStatistics() i main.js, som skrives ud
   sammen med dem.

   Reglerne står her, fordi JavaScript stadig bruger dem.
   Fjernes de før setStatistics(), står den nedre statistik
   uformateret.

   .statsline*, .statsword* og .fail deles med det nye panel,
   som overskriver dem under #statisticcontent. Ved F10 flyttes
   de overskrivninger op i afsnit 12, og resten slettes.
   ============================================================ */

.statsresult-container,
.statstotals-container,
.statsconditions-container{
    grid-column: 1 / 4;
    margin: 0 auto;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.statsresult-container{
    grid-row: 6 / 6;
}
.statstotals-container{
    grid-row: 7 / 7;
}
.statsconditions-container{
    grid-row: 8 / 8;
}

.statswords-container{
    width: 100%;
    grid-row: 9 / 9;
    grid-column: 1 / 4;
    margin: 0 auto;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 80px;

    scrollbar-width: thin;
    scrollbar-color: var(--color-muted) transparent;
}

.statsline-group{
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: .3rem;
}

.statsline{
    display: flex;
    margin: 0 auto;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding-left: .2rem;
    padding-right: .2rem;
}

.statsline-icon{
    width: 1.1rem;
}

.statsline-text{
    font-size: .65rem;
    color: var(--color-text-light);
    padding: .1rem;
    display: flex;
    margin: 0 auto;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.statsline-heading{
    font-size: .9rem;
    color: var(--color-text-light);
    padding: .1rem;
    display: flex;
    margin: 0 auto;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.statsword-row{
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: .1rem;
}

.statsword-line{
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: .1rem .25rem;
    white-space: nowrap;
}

.statsword-index{
    font-size: .9rem;
    color: var(--color-text-light);
    padding: .1rem;
    display: flex;
    margin: 0;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.statsword-word{
    font-size: .9rem;
    color: var(--color-correct);
    display: flex;
    width: 68px;
    margin: 0;
    text-align: left;
    align-items: center;
    justify-content: center;
}

.statsword-reveal{
    font-size: .65rem;
    color: var(--color-text-light);
    padding: .1rem;
    width: 88px;
    display: flex;
    margin: 0;
    text-align: left;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
}

.statsword-text{
    font-size: .65rem;
    color: var(--color-text-light);
    padding: .1rem;
    margin: 0;
    white-space: nowrap;
}

.statsword-icon{
    width: .75rem;
}

/* Deles med det nye panel */
.fail{
    text-decoration: line-through;
    color: var(--color-present);
}

#statsresult{
    visibility: hidden;
    opacity: 0;
    transition: all 1.5s;
}
#statstotals{
    visibility: hidden;
    opacity: 0;
    transition: all 2.5s;
}
#statsconditions{
    visibility: hidden;
    opacity: 0;
    transition: all 3.5s;
}
#statswords{
    visibility: hidden;
    opacity: 0;
    transition: ease-in-out 4.5s;
}

/* ------------------------------------------------------------
   19. TELEFON OG TABLET

   Vælges på pointer, ikke på bredde. En finger er en finger,
   uanset hvor stor skærmen er.
   ------------------------------------------------------------ */

@media (pointer: coarse){
    :root{
        --board-width: 290px;
        --board-row: 290px;
        --panel-size: 284px;     /* 284/290 = 98% */
        --field-gap: .5rem;
        --field-font-size: 1.4rem;
    }

    .inputfield{
        opacity: 1 !important;   /* iOS Safari toner disabled felter ned — efterprøv */
    }

    .inputfields-container{
        margin-bottom: .5rem;
    }

    #settingscontent .innersettings-button,
    #levelgrid .levelsettings-button,
    #topicpicker .levelsettings-button{
        height: 3.4rem;
    }
    /* Pilene bærer også .levelsettings-button og ville ellers
       arve 3.4rem ovenfor. Samme specificitet — rækkefølgen
       afgør det, så denne skal stå efter. */
    #levelgrid .levelnav-prev,
    #levelgrid .levelnav-next,
    #topicpicker .levelpicker-back{
        height: 2rem;
    }

    .keyboard-container{
        grid-row: 5 / 5;
        grid-column: 2 / 2;
        font-size: 1.2rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        text-align: center;
        justify-content: center;
        margin: 0 auto;
        width: 100%;
        max-width: 290px;
        box-sizing: border-box;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        margin-bottom: 0rem;
        line-height: 1.55;
    }

    .newsettings-icon{
        width: 1.7rem;
        align-items: center;
    }
    #newwordicon{
        flex-direction: column;
        justify-content: center;
        gap: 0;
    }

    .newword-count{
        display: flex;
        padding-left: 0;
        font-size: .4rem;
    }

    .newsettings-icon-container{
        grid-row: 1 / 1;
        grid-column: 3 / 3;
        height: 40px;
        width: 40px;
        color: var(--color-text-light);
        display: flex;
        align-items: baseline;
        justify-content: center;
    }

    .section{
        margin-top: 4rem;
    }

    .random{
        margin: .5rem auto 0;
        font-size: .8rem;
    }
        .newsettings-icon-container{
        align-items: center;
    }

    #newwordicon{
        position: relative;
    }

    .newword-count{
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
    }
    .key{
        font-size: 1.2rem;
    }
    .keyboard-key{
        padding: .45rem .3rem;
    }
        #arrowleft,
    #arrowright{
        display: inline-block;
    }
}