/* =====================================================================
   grund.css - faelles stilark for laboratoriets forsoeg
   Farver, toplinje, scene og panel, kort, forloeb, iagttagelser, det
   valgte glas og logbogen, quiz, knapper, overlays, tegneserie og
   rundvisning. Forsoegets egen
   css/stil.css indlaeses efter denne og har kun det, der er saerligt
   for forsoeget.
   BEMAERK: decimaltal skrives med PUNKTUM i CSS (0.25rem), aldrig med
   dansk komma.
   ===================================================================== */

:root {
    --bund:        #1b1b21;
    --scene-bund:  #14141a;
    --panel:       #2b2b36;
    --panel-2:     #333340;
    --panel-3:     #3d3d4b;
    --linje:       #464655;
    --tekst:       #f2f3f5;
    --tekst-svag:  #c8ced6;
    --tekst-mat:   #9fa6af;

    --blaa:        #3d9ee0;
    --blaa-mork:   #2a76ac;
    --orange:      #e6892a;
    --orange-mork: #b96613;
    --groen:       #3fae72;
    --groen-mork:  #2b7d51;
    --roed:        #e05446;
    --roed-mork:   #a33529;
    --gul:         #f2c53d;
    --lilla:       #9b6bd6;

    --radius:      10px;
    --radius-lil:  6px;
    --skygge:      0 4px 14px rgba(0, 0, 0, 0.35);
    --panel-bredde: 430px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bund);
    color: var(--tekst);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
   TOPLINJE
   --------------------------------------------------------------------- */
.top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 9px 16px;
    background-color: #15151b;
    border-bottom: 1px solid #33333f;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
    z-index: 20;
    flex-shrink: 0;
}

/* I en samling i fuld skaerm staar knappen, der gendanner panelet, i hjoernet */
/* Plads til samlingsfilens knap i hjoernet; en samling med en stoerre knap
   (»Det virtuelle laboratorium«) saetter --samling-knap */
.samling-fuld .top { padding-left: var(--samling-knap, 56px); }

.top h1 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top h1 .ikon { font-size: 1.15rem; margin-right: 3px; color: var(--orange); }
.top h1 .undertitel { margin-left: 8px; font-size: 0.85rem; font-weight: 400; color: var(--tekst-mat); }

.top-hoejre { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.ikonknap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #4a4a58;
    color: var(--tekst-svag);
    border-radius: var(--radius-lil);
    width: 36px;
    height: 34px;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
}

.ikonknap:hover { background-color: var(--panel-3); color: var(--tekst); }
.ikonknap[hidden] { display: none; }

#lydknap .kryds { display: none; }
#lydknap.fra .boelger { display: none; }
#lydknap.fra .kryds { display: inline; }
#lydknap.fra { color: var(--tekst-mat); }

#hjaelpknap {
    font-size: 1.1rem;
    font-weight: 700;
    background-color: var(--roed-mork);
    border-color: var(--roed);
    color: #d9dde3;
}

#hjaelpknap:hover { background-color: var(--roed); color: #ffffff; }

.topknap { padding: 7px 14px; height: 34px; }
#noterknap.aktiv { background-color: var(--panel-3); border-color: var(--gul); color: var(--tekst); }

/* Reaktionsskemaet i toplinjen: <header class="top med-ligning"> med en
   <p class="top-ligning"> mellem titlen og knapperne. Titlen fylder saa
   kun sin egen bredde, og skemaet staar midt i den ledige plads. */
.top.med-ligning h1 { flex: 0 1 auto; }
.top-ligning {
    margin: 0 auto;
    padding: 4px 14px;
    background-color: #111117;
    border: 1px solid #3f3f4d;
    border-radius: var(--radius-lil);
    color: #7ee0a8;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Noterne: foldes ud fra knappen #noterknap i toplinjen og ligger i
   scenens oeverste hoejre hjoerne, hvor der er tom vaeg, saa man kan
   skrive og se bordet paa samme tid (side.js: skiftNoter, tasten N) */
.noter {
    position: absolute;
    top: 10px;
    right: 12px;
    width: min(380px, calc(100% - 24px));
    padding: 10px 12px 12px;
    background-color: var(--panel-2);
    border: 1px solid #4a4a58;
    border-top: 3px solid var(--gul);
    border-radius: var(--radius-lil);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    z-index: 15;
    animation: ind 0.15s ease-out;
}
.noter[hidden] { display: none; }
.noter-top { display: flex; align-items: center; justify-content: space-between; }
.noter-top h2 { margin: 0; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gul); }
.noter-top .ikonknap { width: 28px; height: 26px; font-size: 1.1rem; }
.noter-ikoner { display: flex; gap: 4px; margin-right: -4px; }
.ikonknap.bekraeft { color: var(--roed); border-color: var(--roed); background-color: rgba(224, 84, 70, 0.14); }
.noter #logbog-tekst { margin-top: 8px; }
.noter .knaprad { margin-top: 8px; }

/* F56: noterne har to faner - »Uheld og replikker« (den, noterne aabner
   med) og »Mine noter« - og uheldstaelleren i hjoernet */
.faner { display: flex; gap: 2px; }
.fane {
    padding: 4px 9px 5px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tekst-mat);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
}
.fane:hover { color: var(--tekst); }
.fane[aria-selected="true"] { color: var(--gul); border-bottom-color: var(--gul); background-color: var(--panel-3); }
.fane:focus-visible { outline: 2px solid var(--gul); outline-offset: 1px; }
.uheld-maerke {
    margin-left: auto;
    margin-right: 6px;
    padding: 2px 8px;
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--tekst-svag);
    background-color: var(--panel-3);
    border-radius: 999px;
    white-space: nowrap;
}
.uheld-maerke.nogen { color: #fff; background-color: var(--roed-mork); }
.noter-fane[hidden] { display: none; }
.noter-fane h3 {
    margin: 10px 0 4px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tekst-mat);
}
.noter-fane .besked { margin: 0; font-size: 0.84rem; color: var(--tekst-mat); }
.noter-fane .besked[hidden] { display: none; }
.uheld-liste {
    margin: 0; padding: 0; list-style: none; max-height: 120px; overflow-y: auto;
    font-size: 0.84rem; line-height: 1.45; color: var(--tekst-svag);
}
.uheld-liste li { margin: 0 0 3px; }
.uheld-liste b { color: #f08a7e; font-weight: 700; }
.noter-fane .replik-liste { max-height: 200px; }

/* ---------------------------------------------------------------------
   HOVEDLAYOUT: scenen til venstre, panelet til hoejre
   --------------------------------------------------------------------- */
main.forsoeg {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--panel-bredde);
}

/* »Fyld op til [ ] mL [Fyld]« ved en flaske over glasudstyr (F29, F42,
   F61) - side.js laver og flytter det og saetter vaerdien i feltet */
.fyldop {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    max-width: 240px;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: rgba(12, 16, 24, 0.85);
    border: 1px solid #4f93da;
    border-radius: 8px;
    color: #e9eef4;
    font-size: 0.82rem;
}
.fyldop[hidden] { display: none; }
.fyldop input {
    width: 3.6em;
    padding: 2px 4px;
    font: inherit;
    color: #111;
    background: #fff;
    border: 1px solid #99a3b3;
    border-radius: 4px;
}
.fyldop .knap { padding: 3px 9px; font-size: 0.8rem; }

.scene {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background-color: var(--scene-bund);
}

.scene > canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* Korte beskeder nederst paa scenen */
.scenebesked {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translate(-50%, 8px);
    max-width: calc(100% - 40px);
    padding: 8px 18px;
    border-radius: var(--radius);
    background-color: rgba(20, 20, 26, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--skygge);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tekst-svag);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.scenebesked.vis { opacity: 1; transform: translate(-50%, 0); }
.scenebesked.advarsel { color: #f0d77a; border-color: rgba(242, 197, 61, 0.45); }
.scenebesked.god { color: #7ee0a8; border-color: rgba(63, 174, 114, 0.5); }

/* ---------------------------------------------------------------------
   HOEJRE SPALTE
   --------------------------------------------------------------------- */
.panel {
    background-color: var(--panel);
    border-left: 1px solid #1f1f27;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: #4d4d5c var(--panel);
}

.kort {
    background-color: rgba(0, 0, 0, 0.22);
    border: 1px solid #3a3a47;
    border-radius: var(--radius);
    padding: 11px;
}

.kort > h2 {
    margin: 0 0 9px 0;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gul);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.kort > h2 .taeller {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--tekst-mat);
}

.kort.fremhaev { border-left: 3px solid var(--blaa); }
.kort.opgavekort { border-left: 3px solid var(--lilla); }
.kort.uheld { border-left-color: var(--roed); }
.kort.uheld > h2 { color: #f0918a; }

.besked { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--tekst-svag); }
.besked.god   { color: #7ee0a8; }
.besked.skidt { color: #f0918a; }
/* F55: et forurenet pulverglas */
.besked.forurenet { margin-top: 6px; font-weight: 700; color: #f0918a; }
.besked.forurenet[hidden] { display: none; }
/* F75: en formel i en overskrift skrives ikke med store bogstaver */
.formel { text-transform: none; }
/* F74: faremaerkerne paa det valgte glas, store og med navn */
.fare-raekke { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 2px; }
.fare-raekke[hidden] { display: none; }
.fare-raekke .fare { margin: 0; display: flex; flex-direction: column; align-items: center; min-width: 60px; }
.fare-raekke canvas { display: block; }
.fare-raekke figcaption { margin-top: 3px; font-size: 0.72rem; line-height: 1.2; text-align: center; color: var(--tekst-svag); }
/* M9: grafen i panelet (side.visGraf, graf.js). Hoejden staar her;
   laerredet tegnes i sin CSS-stoerrelse og i skaermens oploesning */
.graf-boks { margin: 8px 0 2px; }
.graf-boks[hidden] { display: none; }
.graf-boks canvas { display: block; width: 100%; height: 210px; border-radius: 8px; }
.graf-boks .graf-note { margin: 5px 0 0; font-size: 0.76rem; line-height: 1.35; color: var(--tekst-svag); }

/* ----- Forloebet ------------------------------------------------------ */
.trinliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.trinliste li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 5px;
    border-radius: var(--radius-lil);
    font-size: 0.86rem;
    line-height: 1.3;
    color: var(--tekst-mat);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.trinliste .nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--panel-3);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tekst-svag);
}

.trinliste li.gjort { color: var(--tekst-svag); }
.trinliste li.gjort .nr { background-color: var(--groen-mork); color: #ffffff; }
.trinliste li.aktiv { background-color: rgba(42, 118, 172, 0.3); color: #ffffff; font-weight: 600; }
.trinliste li.aktiv .nr { background-color: var(--blaa); color: #ffffff; }
.kort.uheld .trinliste li.aktiv { background-color: rgba(163, 53, 41, 0.35); }
.kort.uheld .trinliste li.aktiv .nr { background-color: var(--roed); }

.hint {
    margin: 9px 0 0 0;
    padding: 8px 10px;
    border-radius: var(--radius-lil);
    background-color: rgba(242, 197, 61, 0.1);
    border: 1px solid rgba(242, 197, 61, 0.35);
    color: #f0d77a;
    font-size: 0.86rem;
    line-height: 1.45;
}

.hint[hidden] { display: none; }

/* Knappen, man holder nede for at ryste */
#ryst-knap { user-select: none; -webkit-user-select: none; touch-action: none; }
#ryst-knap.aktiv { background-color: var(--orange); }

/* ----- Iagttagelser --------------------------------------------------- */
.iagttagelser { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }

.iagttagelser li {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 8px;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--tekst-svag);
    animation: ind 0.45s ease-out;
}

.iagttagelser li.tom { display: block; color: var(--tekst-mat); animation: none; }
.iagttagelser li.uheld { color: #f0b0aa; }

.iagttagelser .farve {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Ternet baggrund betyder farveloes, som i et tegneprogram */
.farveloes {
    background-color: #f4f6f8;
    background-image: repeating-conic-gradient(#c3c9d1 0% 25%, transparent 0% 50%);
    background-size: 8px 8px;
}

@keyframes ind {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- Det valgte glas og logbogen ----------------------------------
   Kortene, som side.js binder paa alle sider, der koerer paa motoren:
   zoomboblen, aflaesningen af det valgte glas og logbogen. Stilen
   haenger paa id'erne og ikke paa klasserne, fordi de gamle animationer
   ogsaa indlaeser denne fil og ikke maa maerke den. Boblens hoejde
   passer til en zoomboble med radius op til 128 (bobleR). */
#boble-laerred { display: block; width: 100%; height: 272px; margin: 2px 0 8px; border-radius: var(--radius-lil); background-color: #16161c; }
#boble-laerred[hidden] { display: none; }

#glas-indhold { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
#glas-indhold th { text-align: left; font-weight: 600; color: var(--tekst-svag); padding: 3px 0; }
#glas-indhold td { text-align: right; font-weight: 700; color: var(--tekst); padding: 3px 0 3px 8px; white-space: nowrap; }
#glas-indhold td.enhed { text-align: left; font-weight: 400; color: var(--tekst-mat); padding-left: 4px; width: 34%; }
#glas-indhold tr + tr th, #glas-indhold tr + tr td { border-top: 1px solid #3a3a47; }
#glas-indhold .fast th { color: var(--tekst-mat); }
#glas-indhold tr.kategori th { padding-top: 10px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-mat); }
#glas-indhold[hidden] { display: none; }
#glas-temp { margin-top: 8px; }
#glas-temp[hidden] { display: none; }
/* Fluebenet, der viser tilskuerionerne (side.js: #tilskuere-vis) */
#tilskuere-linje { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.86rem; color: var(--tekst-svag); cursor: pointer; user-select: none; }
#tilskuere-linje[hidden] { display: none; }
#tilskuere-linje input { width: 16px; height: 16px; margin: 0; accent-color: #f2c53d; cursor: pointer; }
#tilskuere-navne { color: var(--tekst-mat); }
.knap.rystknap { margin-top: 6px; padding: 4px 10px; font-size: 0.82rem; touch-action: none; user-select: none; }
#tilskuere-navne .tilskuer-ion { font: inherit; color: inherit; background: none; border: 0; padding: 0 1px; margin: 0; cursor: pointer; border-bottom: 1px dotted currentColor; }
#tilskuere-navne .tilskuer-ion:hover, #tilskuere-navne .tilskuer-ion:focus-visible { color: var(--tekst); outline: none; }
#tilskuere-navne .tilskuer-ion.loeftet { color: #f2c53d; border-bottom-style: solid; }

#logbog-tekst {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 10px;
    background-color: #16161c;
    border: 1px solid #4a4a58;
    border-radius: var(--radius-lil);
    color: var(--tekst);
    font-family: inherit;
    font-size: 0.86rem;
    line-height: 1.45;
    resize: vertical;
}
#logbog-tekst:focus { outline: 2px solid var(--gul); outline-offset: 1px; }
#logbog-kort .knaprad { margin-top: 0; }

/* Et felt, der kan foldes ud: <details class="fold"><summary>...</summary>.
   Lukket som udgangspunkt, saa panelet ikke drukner i tal; eleven aabner
   det, naar tallene skal bruges. */
details.fold { margin-top: 8px; }
details.fold[hidden] { display: none; }
details.fold > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 0;
    list-style: none;
    cursor: pointer;
    user-select: none;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tekst-svag);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before {
    content: "\25B8";
    color: var(--gul);
    transition: transform 0.15s ease;
}
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold[open] > summary { margin-bottom: 4px; }
details.fold > summary:hover { color: var(--tekst); }
details.fold > summary:focus-visible { outline: 2px solid var(--gul); outline-offset: 2px; border-radius: 4px; }

/* ----- Det, der er sagt (S13) ------------------------------------------ */
.kort[hidden] { display: none; }
.replik-sidst { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--tekst); }
.replik-sidst b, .replik-liste b { color: var(--gul); font-weight: 700; }
.replik-liste {
    margin: 0; padding: 0 0 0 1.4em; max-height: 220px; overflow-y: auto;
    font-size: 0.84rem; line-height: 1.45; color: var(--tekst-svag);
}
.replik-liste li { margin: 0 0 4px; }

/* ----- Quiz ---------------------------------------------------------- */
.valg { display: grid; gap: 6px; margin: 10px 0; }
.valg[hidden] { display: none; }

.valgknap {
    background-color: var(--panel-2);
    color: var(--tekst);
    border: 1px solid #4a4a58;
    border-radius: var(--radius-lil);
    padding: 9px 11px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.14s ease;
}

.valgknap:hover:not(:disabled) { background-color: var(--panel-3); }
.valgknap:disabled { cursor: default; opacity: 0.5; }
.valgknap.rigtig  { background-color: var(--groen-mork); border-color: var(--groen); color: #ffffff; opacity: 1; }
.valgknap.forkert { background-color: var(--roed-mork); border-color: var(--roed); color: #ffffff; opacity: 1; }
.valgknap.medfarve { display: flex; align-items: center; gap: 10px; }

.farveprove {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.quiz-score {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--gul);
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}

.quiz-score[hidden] { display: none; }
#quiz-knap { margin-top: 10px; }
#quiz-knap[hidden] { display: none; }

/* ---------------------------------------------------------------------
   KNAPPER
   --------------------------------------------------------------------- */
.knap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background-color: var(--panel-2);
    color: var(--tekst);
    border: 1px solid #4a4a58;
    border-radius: var(--radius-lil);
    padding: 8px 11px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.knap:hover:not(:disabled) { background-color: var(--panel-3); border-color: #5e5e70; }
.knap:active:not(:disabled) { transform: scale(0.985); }
.knap:disabled { opacity: 0.4; cursor: not-allowed; }
.knap[hidden] { display: none; }
.knap .tegn { font-size: 1rem; flex-shrink: 0; }
.knap.stor { padding: 11px 13px; font-size: 0.92rem; width: 100%; }

.knap.blaa { background-color: var(--blaa-mork); border-color: var(--blaa); }
.knap.blaa:hover:not(:disabled) { background-color: var(--blaa); }
.knap.orange { background-color: var(--orange-mork); border-color: var(--orange); }
.knap.orange:hover:not(:disabled) { background-color: var(--orange); }

.knaprad { display: flex; gap: 6px; margin-top: 10px; }
.knaprad .knap { flex: 1; justify-content: center; padding: 9px 8px; font-size: 0.9rem; }

.knapper { display: flex; justify-content: flex-end; margin-top: 18px; }
.knapper .knap { justify-content: center; min-width: 110px; }

@keyframes bank {
    0%   { box-shadow: 0 0 0 0 rgba(242, 197, 61, 0.6); }
    70%  { box-shadow: 0 0 0 11px rgba(242, 197, 61, 0); }
    100% { box-shadow: 0 0 0 0 rgba(242, 197, 61, 0); }
}

.banker:not(:disabled) { animation: bank 1.7s ease-out infinite; }

/* ---------------------------------------------------------------------
   TEORI
   --------------------------------------------------------------------- */
.overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(8, 8, 12, 0.78);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 50;
}

.overlay.vis { display: flex; }

.overlay-boks {
    background-color: var(--panel);
    border: 1px solid var(--linje);
    border-radius: 14px;
    box-shadow: var(--skygge);
    max-width: 580px;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 22px 26px;
}

.overlay-boks h2 { margin: 0 0 8px 0; font-size: 1.15rem; color: var(--blaa); }

.overlay-boks h3 {
    margin: 18px 0 6px 0;
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gul);
}

.overlay-boks p { font-size: 0.92rem; line-height: 1.55; color: var(--tekst-svag); margin: 0 0 8px 0; }

/* Introen: hvad forsoeget handler om */
.intro-boks { max-width: 520px; }
.overlay-boks .intro-formaal { font-size: 0.98rem; color: var(--tekst); }
.intro-trin { margin: 0 0 4px 0; padding-left: 22px; font-size: 0.92rem; line-height: 1.55; color: var(--tekst-svag); }
.intro-trin li { margin-bottom: 2px; }
.intro-trin li::marker { color: var(--gul); font-weight: 700; }
.intro-boks .knapper { gap: 8px; }

/* Teoriboksen: forsoegets teori som blokke fra tekst.js (side.js) */
.teori-boks { max-width: 620px; }
.teori-boks .tekstblokke > :first-child { margin-top: 4px; }

.ligning {
    background-color: #111117;
    border: 1px solid #3f3f4d;
    border-radius: var(--radius-lil);
    color: #7ee0a8;
    text-align: center;
    padding: 12px 8px;
    margin: 10px 0 8px;
    font-size: 1.25rem;
    font-weight: 700;
}

.ligning.lille { font-size: 1.05rem; padding: 9px 8px; }

/* ---------------------------------------------------------------------
   TEGNESERIEN: forsoeget opsummeret i ruder
   --------------------------------------------------------------------- */
.overlay-boks.bred { max-width: 980px; }
.serie { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 10px; }
.rude {
    background-color: #16161c;
    border: 1px solid #3f3f4d;
    border-radius: var(--radius-lil);
    padding: 8px;
}
.rude canvas { display: block; width: 100%; border-radius: 5px; background-color: #22262e; }
.rude p { margin: 7px 0 0 0; font-size: 0.86rem; line-height: 1.45; color: var(--tekst-svag); }
.rude .nr { color: var(--gul); font-weight: 700; margin-right: 6px; }
.rude > p:first-child { margin: 2px 0 8px 0; }

/* En rude, der viser en fejl eller et uheld, er roed. En bred rude
   fylder hele raekken - det er der, resultatskemaet staar. */
.rude.fejl { border-color: var(--roed); background-color: #1e1416; }
.rude.fejl .nr { color: var(--roed); }
.rude.bred { grid-column: 1 / -1; }

/* Resultatskemaet. En celle maa rumme en farveproeve og et facit. */
.resultater { width: 100%; border-collapse: collapse; font-size: 0.84rem; table-layout: auto; }
.resultater th { text-align: left; font-weight: 600; color: var(--tekst-svag); padding: 5px 12px 5px 0; }
.resultater tr:first-child th {
    color: var(--gul);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-bottom: 5px;
}
.resultater td { text-align: left; font-weight: 600; color: var(--tekst); padding: 5px 12px 5px 0; vertical-align: top; line-height: 1.35; }
.resultater tr + tr th, .resultater tr + tr td { border-top: 1px solid #3a3a47; }
.resultater .facit { display: block; font-weight: 400; font-size: 0.8rem; color: #f0918a; }
.resultater .farveprove {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin: 0 5px -1px 0;
    border-radius: 3px;
    vertical-align: baseline;
}
.rude .mellemrubrik { margin: 14px 0 6px 0; font-weight: 700; color: var(--tekst); font-size: 0.92rem; }

#serieknap { margin-top: 10px; }
#serieknap[hidden] { display: none; }
#serieknap.laast { opacity: 0.55; }

/* ---------------------------------------------------------------------
   RUNDVISNINGEN
   --------------------------------------------------------------------- */
.rundvisning { position: fixed; inset: 0; z-index: 200; }
.rundvisning[hidden] { display: none; }

.rundvisning-baggrund { position: fixed; inset: 0; background: transparent; cursor: pointer; }

.rundvisning-spot {
    position: fixed;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(8, 8, 13, 0.74);
    outline: 2px solid var(--gul);
    outline-offset: 3px;
    pointer-events: none;
    transition: top 0.22s ease, left 0.22s ease, width 0.22s ease, height 0.22s ease;
}

.rundvisning-boks {
    position: fixed;
    width: 300px;
    max-width: calc(100vw - 28px);
    background-color: var(--panel);
    border: 1px solid var(--linje);
    border-radius: var(--radius);
    box-shadow: var(--skygge);
    padding: 14px 16px;
    transition: top 0.22s ease, left 0.22s ease;
}

.rundvisning-hoved { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rundvisning-tal { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; color: var(--tekst-mat); }

.rundvisning-luk {
    background: transparent;
    border: none;
    color: var(--tekst-svag);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}

.rundvisning-boks h3 { margin: 0 0 6px 0; font-size: 1rem; color: var(--gul); }
.rundvisning-boks p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--tekst-svag); }
.rundvisning-knapper { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.rundvisning-knapper .knap { flex: 1; justify-content: center; }

/* ---------------------------------------------------------------------
   TILGAENGELIGHED OG SMALLE SKAERME
   --------------------------------------------------------------------- */
button:focus-visible {
    outline: 2px solid var(--gul);
    outline-offset: 2px;
}

/* Et hint kan pege paa en genstand paa bordet eller paa noget i panelet.
   Peges der paa panelet, blinker elementet kort (side.js saetter klassen). */
.peger {
    animation: peger 1.1s ease-out 2;
    border-radius: 8px;
}

@keyframes peger {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 197, 61, 0); }
    35% { box-shadow: 0 0 0 3px rgba(242, 197, 61, 0.75); }
}

@media (max-width: 1100px) {
    :root { --panel-bredde: 360px; }
    .top h1 .undertitel { display: none; }
    .top-ligning { font-size: 0.92rem; padding: 3px 10px; }
}

@media (max-width: 820px) {
    body { overflow: auto; }
    main.forsoeg { display: block; }
    .scene { height: 60vh; min-height: 320px; }
    .panel { border-left: none; border-top: 1px solid #1f1f27; overflow: visible; }
    .topknap { padding: 7px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}