/* =====================================================================
   sc8.4 - Afstem redoxreaktioner
   Stilark. Grundreglerne (toplinje, faner, panel, kort, knapper, pop
   op og rundvisning) er de samme som i sc1.1. Scenen er tavlen; er
   elektronvaegten slaaet til, har body klassen med-vaegt, og tavlen
   bliver lavere.
   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;

    --kat:         #ff9f92;
    --kat-bund:    rgba(224, 84, 70, 0.16);
    --an:          #93d2ff;
    --an-bund:     rgba(61, 158, 224, 0.16);

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

* { 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: 10px 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 */
.samling-fuld .top { padding-left: 56px; }

.top h1 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.top h1 .ikon { font-size: 1.15rem; margin-right: 3px; color: var(--gul); }

.faneknapper {
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.faneknapper::-webkit-scrollbar { display: none; }

/* Sværhedsgraderne: samme opgave, tre faner med en lille maaler. */
.niveauvalg {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.niveau-etiket {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tekst-mat);
    white-space: nowrap;
}

.faneknap {
    background-color: var(--panel-3);
    color: var(--tekst-svag);
    border: 1px solid #4a4a58;
    padding: 5px 16px 5px 12px;
    border-radius: var(--radius-lil);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.faneknap .fn { display: flex; flex-direction: column; line-height: 1.2; }
.faneknap .fn b { font-size: 0.95rem; font-weight: 700; }
.faneknap .fn small { font-size: 0.75rem; font-weight: 500; color: var(--tekst-mat); }

/* Maaleren: 1, 2 eller 3 streger ud af 3. */
.maaler { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; flex-shrink: 0; }
.maaler i { display: block; width: 4px; border-radius: 1px; background-color: rgba(255, 255, 255, 0.16); }
.maaler i:nth-child(1) { height: 7px; }
.maaler i:nth-child(2) { height: 11px; }
.maaler i:nth-child(3) { height: 16px; }
.maaler i.fyldt { background-color: var(--gul); }

.faneknap:hover { background-color: #47475a; border-color: #5e5e70; color: var(--tekst); }
.faneknap.aktiv { background-color: var(--blaa); border-color: var(--blaa); color: #ffffff; }
.faneknap.aktiv .fn small { color: rgba(255, 255, 255, 0.85); }
.faneknap.aktiv .maaler i { background-color: rgba(255, 255, 255, 0.3); }
.faneknap.aktiv .maaler i.fyldt { background-color: #ffffff; }

.teoriknap {
    background-color: var(--panel-2);
    color: var(--tekst-svag);
    border: 1px solid #4a4a58;
    border-radius: var(--radius-lil);
    padding: 8px 14px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.teoriknap:hover { background-color: var(--panel-3); color: var(--tekst); }

/* Elektronvaegten slaas til og fra her. Den er slaaet fra fra start. */
.vaegtknap {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--panel-2);
    color: var(--tekst-svag);
    border: 1px solid #4a4a58;
    border-radius: var(--radius-lil);
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

.vaegtknap:hover { background-color: var(--panel-3); color: var(--tekst); }
.vaegtknap.til { color: var(--tekst); border-color: var(--groen); }

.kontakt {
    position: relative;
    width: 30px;
    height: 16px;
    border-radius: 999px;
    background-color: #55556a;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.kontakt i {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #d9dde3;
    transition: left 0.15s ease;
}

.vaegtknap.til .kontakt { background-color: var(--groen); }
.vaegtknap.til .kontakt i { left: 16px; background-color: #ffffff; }

.ikonknap {
    background: transparent;
    border: 1px solid #4a4a58;
    color: var(--tekst-svag);
    border-radius: 4px;
    width: 30px;
    height: 28px;
    font-size: 0.9rem;
    cursor: pointer;
    flex-shrink: 0;
}

.ikonknap:hover { background-color: var(--panel-3); color: var(--tekst); }

#hjaelpknap {
    width: 38px;
    height: 36px;
    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; }

/* ---------------------------------------------------------------------
   HOVEDLAYOUT
   --------------------------------------------------------------------- */
main { flex: 1; position: relative; min-height: 0; }

.fane {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--panel-bredde);
}

/* Scenen er en soejle: opgaven oeverst og arbejdsbordet med tavlen
   under den. Tavlen fylder resten. Slaas elektronvaegten til, staar den
   mellem de to, og tavlen bliver lavere (body.med-vaegt). */
.scene {
    position: relative;
    min-width: 0;
    min-height: 0;
    background-color: var(--scene-bund);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Opgaven staar over arbejdsfladen, ikke i panelet */
.opgavelinje {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 22px 2px;
}

.ol-etiket {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gul);
    white-space: nowrap;
}

.opgavetekst { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.4; color: var(--tekst); }
.kontekst { margin-left: 6px; font-weight: 400; font-style: italic; color: var(--tekst-svag); }
.kontekst[hidden] { display: none; }

.vaegt-omraade {
    flex: 1 1 auto;
    min-height: 280px;
    position: relative;
}

.vaegt-omraade[hidden] { display: none; }
.vaegt-omraade > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: default; }

.arbejdsbord {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin: 10px 14px 14px;
    background-color: rgba(0, 0, 0, 0.26);
    border: 1px solid #3a3a47;
    border-radius: var(--radius);
    padding: 14px 12px 12px;
}

body.med-vaegt .arbejdsbord { flex: 0 0 auto; margin: 0 14px 10px; padding: 10px 12px; }

/* Det, trinnet spoerger om: den linje, eleven skal laese */
.ab-hoved {
    display: flex;
    align-items: baseline;
    gap: 6px 14px;
    flex-wrap: wrap;
    border-left: 4px solid var(--gul);
    padding: 2px 0 2px 12px;
}

.ab-trin {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gul);
    white-space: nowrap;
}

.ab-spm { font-size: 1.3rem; font-weight: 600; color: var(--tekst); line-height: 1.35; }
body.med-vaegt .ab-spm { font-size: 1.08rem; }

/* ---------------------------------------------------------------------
   TAVLEN: ét ark, der staar stille. Skemaet med faste pladser til
   tallene, en klamme pr. par over og under skemaet, rækkerne med
   ladning og O under det, og tasterne
   --------------------------------------------------------------------- */
:root {
    --ox:        #6cb6ff;
    --ox-bund:   rgba(61, 158, 224, 0.16);
    --red:       #f0a35e;
    --red-bund:  rgba(230, 137, 42, 0.16);
    --felt-kant: #7d8cc4;
    --felt-bund: #1d2132;
}

.tavleramme {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 12px;
    background-color: #101016;
    border: 1px solid #34343f;
    border-radius: var(--radius-lil);
    padding: 22px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

body.med-vaegt .tavleramme { margin-top: 8px; padding: 10px; gap: 9px; }

/* Arket: en række til den øverste klamme, skemaet, en række til den
   nederste klamme og rækkerne med tal. Rækkerne har fast højde fra
   start, saa intet flytter sig, naar klammerne og tallene kommer.
   Klammerne ligger ovenpaa og stilles af js/opgave.js (placerArk). */
.tavle { position: relative; min-width: 0; }
.klrk { height: 46px; }
.skemaplads { display: flex; align-items: center; }
.skemaplads > .skema { flex: 1 1 auto; min-width: 0; }

/* En usynlig kopi af det lange skema, kun til at måle skriften */
.skemaplads.maaling { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; pointer-events: none; }

/* Skemaet er saa stort, som bredden tillader: skriften begynder her og
   goeres mindre af tilpasSkema (js/opgave.js), til det staar paa én linje. */
.skema {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.2em 0.1em;
    font-size: clamp(2.2rem, 5.4vw, 5.2rem);
    line-height: 1.15;
}

body.med-vaegt .skema { font-size: clamp(1.6rem, 2.9vw, 2.3rem); }

.skema .op {
    color: var(--tekst-mat);
    font-size: 0.8em;
    padding: 0 0.05em 0.14em;
}

/* Reaktionspilen er en streg, der kan blive længere: de pladser før
   pilen, der ikke bruges (til H⁺ og vand), ligger usynlige inde i den. */
.pil {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    color: var(--tekst-mat);
}

.pil-res { display: inline-flex; align-items: flex-end; gap: 0.1em; }
.pil-basis { width: 1.7em; height: 1.15em; }

.pil-streg {
    position: absolute;
    left: 0.28em;
    right: 0.32em;
    bottom: 0.6em;
    height: max(2px, 0.05em);
    background-color: currentColor;
    border-radius: 1px;
}

.pil-streg::after {
    content: "";
    position: absolute;
    right: -0.04em;
    top: 50%;
    width: 0.3em;
    height: 0.3em;
    border: solid currentColor;
    border-width: max(2px, 0.05em) max(2px, 0.05em) 0 0;
    transform: translateY(-50%) rotate(45deg);
}

/* H⁺, OH⁻ eller vand med sit plus foran. En plads, der ikke bruges,
   fylder det samme, men ses ikke. */
.ekstra { display: inline-flex; align-items: flex-end; gap: 0.1em; min-width: 4.55em; }
.usynlig { visibility: hidden; }

/* Et led: koefficienten til venstre, formlen med oxidationstal over */
.led {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.08em;
    padding: 0.06em 0.12em;
    border-radius: 8px;
    border: 2px solid transparent;
}

/* Rollen ses paa oxidationstallet og klammen, ikke som en kasse om stoffet */
.led.plads { border-color: #5a5a68; border-style: dashed; background-color: rgba(255, 255, 255, 0.03); }

.formel { display: inline-flex; align-items: flex-end; }
.atom { display: inline-flex; flex-direction: column; align-items: center; }
.atom .sym { font-weight: 600; white-space: nowrap; }
.atom.lad .sym { margin-left: 1px; }

/* Rækken med oxidationstal over atomerne. Den tæller som 0 bred, så et
   felt eller et tal over atomet ikke skubber atomerne fra hinanden, men
   er lige så bred som atomet (min-width). Tallet står midt over atomet
   og stikker lige meget ud til begge sider. Et felt over det første
   eller sidste atom i en formel slutter ved atomets kant og stikker
   kun ud til den frie side, så det ikke dækker tallet over naboen. */
.oxrk {
    width: 0;
    min-width: 100%;
    height: 1.9em;
    font-size: max(0.5em, 0.82rem);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 3px;
}

.oxrk.tv { justify-content: flex-end; }
.oxrk.th { justify-content: flex-start; }

.oxtal { font-weight: 700; color: var(--tekst); white-space: nowrap; flex-shrink: 0; }
.oxtal.fast { color: #8a8a99; font-weight: 600; font-size: 0.88em; }
.oxtal.r-ox { color: var(--ox); }
.oxtal.r-red { color: var(--red); }
.oxtal.ny { animation: ind 0.35s ease-out; color: #7ee0a8; }

/* Pladsen foran et stof har fast bredde fra trin 1: tom, saa et felt,
   saa tallet. Derfor flytter stofferne sig ikke. */
.koefplads { display: inline-flex; align-items: flex-end; justify-content: flex-end; flex-shrink: 0; width: 1.15em; margin-right: 0.06em; padding-bottom: 1px; }
.koeftal { font-size: 0.92em; font-weight: 700; color: var(--gul); }
.koeftal.en { color: #5d5d6c; }

/* Afstemt: tallene bliver grønne, og 1-tallerne forsvinder fra deres plads */
.tavle.faerdig .koeftal { color: #7ee0a8; }
.tavle.faerdig .koeftal.en { visibility: hidden; }
.tavleramme.faerdig { border-color: var(--groen); box-shadow: 0 0 0 1px rgba(63, 174, 114, 0.35); }

/* Klammen fra et atom før pilen til det samme atom efter pilen. Teksten
   staar midt paa stregen: først to knapper, saa navnet, feltet med
   stigningen eller faldet og til sidst elektronerne. */
.klamme {
    position: absolute;
    border: 2px solid #5f6477;
    pointer-events: none;
}

.klamme:empty { display: none; }
.klamme.oppe { border-bottom: none; border-radius: 9px 9px 0 0; }
.klamme.nede { border-top: none; border-radius: 0 0 9px 9px; }
.klamme.r-ox { border-color: rgba(108, 182, 255, 0.75); }
.klamme.r-red { border-color: rgba(240, 163, 94, 0.75); }

.kl-tekst {
    position: absolute;
    left: 50%;
    top: -1px;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 12px;
    background-color: #101016;
    border-radius: 8px;
    font-size: 1.08rem;
    color: var(--tekst-svag);
    white-space: nowrap;
    pointer-events: auto;
}

.klamme.nede .kl-tekst { top: calc(100% + 1px); }
.kl-tekst b { font-weight: 700; }
.kl-tekst.r-ox b { color: var(--ox); }
.kl-tekst.r-red b { color: var(--red); }

/* Rækkerne under skemaet: ét tal under hver side af pilen og = eller ≠ under den */
.regnskab { position: relative; }
.rrk { position: relative; height: 38px; }

.rc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    color: var(--tekst-svag);
    white-space: nowrap;
}

.rc b { font-size: 1.2rem; font-weight: 700; color: var(--tekst); margin-right: 6px; }
.rc b:last-child { margin-right: 0; }
.rrk.ok .rc b, .rrk.ok .ktegn { color: #7ee0a8; }
.rrk.nej .ktegn { color: #f0918a; }
.ktegn { font-size: 1.4rem; font-weight: 700; line-height: 1; }

body.med-vaegt .klrk { height: 36px; }
body.med-vaegt .rrk { height: 30px; }
body.med-vaegt .kl-tekst, body.med-vaegt .rc { font-size: 0.95rem; }
body.med-vaegt .rc b { font-size: 1.05rem; }

.tavle-note {
    margin: 4px 0 0;
    text-align: center;
    font-size: 0.95rem;
    color: var(--tekst-mat);
}

.tavle-note b { color: #7ee0a8; font-size: 1.05rem; }

/* Det nye tal toner frem paa stedet, uden at flytte sig */
@keyframes ind {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Felterne: tydelige rammer, og det felt, tasterne skriver i, er gult */
.oxfelt, .koeffelt {
    background-color: var(--felt-bund);
    color: var(--tekst);
    border: 2px solid var(--felt-kant);
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    text-align: center;
    outline: none;
}

.oxfelt { width: 2.7em; padding: 4px 2px; font-size: clamp(0.95rem, 1em, 1.75rem); flex-shrink: 0; }
.koeffelt { width: 1.9em; padding: 3px 2px; font-size: 1.3rem; }
/* Feltet foran en formel er aldrig hoejere end linjen, saa det ikke
   naar op i oxidationstallene over naboatomet */
.skema .koeffelt { width: 100%; height: 1.5em; padding: 0 2px; font-size: clamp(0.8rem, 0.7em, 2.6rem); }
.klamme .koeffelt, .regnskab .koeffelt { width: 2.3em; height: 34px; padding: 0 3px; font-size: 1.25rem; }
.regnskab .koeffelt.bred { width: 3.3em; }
body.med-vaegt .klamme .koeffelt, body.med-vaegt .regnskab .koeffelt { height: 28px; font-size: 1.1rem; }
.oxfelt::placeholder, .koeffelt::placeholder { color: #6d7494; font-weight: 400; }
.oxfelt:hover, .koeffelt:hover { border-color: #a9b6e6; }
.oxfelt:focus, .koeffelt:focus,
.oxfelt.valgt, .koeffelt.valgt { border-color: var(--gul); box-shadow: 0 0 0 3px rgba(242, 197, 61, 0.28); }
.oxfelt.fejl, .koeffelt.fejl { border-color: var(--roed); background-color: rgba(224, 84, 70, 0.14); animation: ryst 0.35s; }
.oxfelt.hint, .koeffelt.hint { border-color: var(--gul); box-shadow: 0 0 0 3px rgba(242, 197, 61, 0.4); }

/* Der blev trykket paa en tast, foer et felt var valgt */
@keyframes vink {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 197, 61, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(242, 197, 61, 0.55); }
}

.oxfelt.vink, .koeffelt.vink { animation: vink 0.5s ease-in-out 2; }

/* Tasterne: en række lige under felterne. Den flytter sig hen under
   det valgte felt, og halen peger op paa det (js/taster.js). */
.taster {
    align-self: center;
    position: relative;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    background-color: #23232e;
    border: 1px solid #4a4a58;
    border-radius: 12px;
    transition: transform 0.16s ease;
}

/* I et trin uden felter beholder rækken sin plads, men ses ikke */
.taster.tom { visibility: hidden; }

.taster::before {
    content: "";
    position: absolute;
    top: -7px;
    left: var(--hale, 50%);
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background-color: #23232e;
    border-left: 1px solid #4a4a58;
    border-top: 1px solid #4a4a58;
    transform: rotate(45deg);
}

.taster.uden-hale::before { display: none; }

.tast {
    min-width: 44px;
    height: 42px;
    padding: 0 8px;
    background-color: var(--panel-3);
    color: var(--tekst);
    border: 1px solid #5a5a6c;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1.12rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

.taster.ox .tast { min-width: 52px; }
.tast:hover { background-color: #4c4c60; border-color: var(--gul); }
.tast:active { transform: scale(0.94); background-color: var(--blaa-mork); }
.tast.fortegn { background-color: #2f3a55; }
.tast.slet { background-color: #2c2c38; color: var(--tekst-svag); }
.tast-skel { width: 6px; }

body.med-vaegt .tast { min-width: 38px; height: 36px; font-size: 1rem; }
body.med-vaegt .taster.ox .tast { min-width: 46px; }

/* ---------------------------------------------------------------------
   UNDER ARKET: knapperne paa klammerne, Tjek, hint og beskeden
   --------------------------------------------------------------------- */
.valgknap {
    background-color: var(--panel-2);
    color: var(--tekst);
    border: 2px solid #6a6f86;
    border-radius: var(--radius-lil);
    padding: 3px 14px;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.valgknap[data-valg="ox"]:hover { border-color: var(--ox); background-color: var(--ox-bund); }
.valgknap[data-valg="red"]:hover { border-color: var(--red); background-color: var(--red-bund); }
.valgknap:active { transform: scale(0.97); }
.valgknap.forkert { border-color: var(--roed); color: #f0918a; background-color: rgba(224, 84, 70, 0.1); animation: ryst 0.35s; }

body.med-vaegt .valgknap { padding: 2px 10px; font-size: 0.95rem; }

@keyframes ryst {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Knapperne og beskeden staar paa tavlen lige under tasterne. Der er
   plads til knapperne og to linjers besked fra start, saa tavlen ikke
   hopper, naar beskeden kommer. Den gule knap er hjaelpen (Giv hint,
   Vis svaret) og til sidst Ny opgave. */
.ab-bund {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-height: 134px;
}

.ab-knapper { display: flex; align-items: center; justify-content: center; gap: 12px; flex-shrink: 0; }

/* De to knapper er lige høje, så rækken er den samme, når Tjek er væk */
.knap.tjekknap, .knap.hintknap { height: 48px; padding-top: 0; padding-bottom: 0; }
.knap.tjekknap { min-width: 190px; justify-content: center; font-size: 1.12rem; padding: 0 22px; }
.knap.tjekknap[hidden] { display: none; }

.knap.hintknap {
    min-width: 150px;
    justify-content: center;
    padding: 0 20px;
    font-size: 1.05rem;
    color: #f6d977;
    background-color: rgba(242, 197, 61, 0.08);
    border-color: rgba(242, 197, 61, 0.7);
}

.knap.hintknap:hover:not(:disabled) { background-color: rgba(242, 197, 61, 0.18); border-color: var(--gul); }
.knap.hintknap.lys { box-shadow: 0 0 0 3px rgba(242, 197, 61, 0.22), 0 0 18px rgba(242, 197, 61, 0.45); }
.knap.hintknap.groen { min-width: 190px; font-size: 1.12rem; color: #ffffff; background-color: var(--groen-mork); border-color: var(--groen); }
.knap.hintknap.groen:hover:not(:disabled) { background-color: var(--groen); }

.besked { margin: 0; font-size: 1.08rem; line-height: 1.5; color: #c8ced6; }
.besked.god   { color: #7ee0a8; }
.besked.skidt { color: #f0918a; }
.besked.gul   { color: #f0d77a; }

.ab-bund .besked { max-width: 880px; padding: 7px 16px; border: 1px solid transparent; border-radius: 8px; text-align: center; }
.ab-bund .besked:empty { visibility: hidden; }
.ab-bund .besked.god   { border-color: rgba(63, 174, 114, 0.5); background-color: rgba(63, 174, 114, 0.1); }
.ab-bund .besked.skidt { border-color: rgba(224, 84, 70, 0.55); background-color: rgba(224, 84, 70, 0.1); }
.ab-bund .besked.gul   { border-color: rgba(242, 197, 61, 0.45); background-color: rgba(242, 197, 61, 0.08); }

body.med-vaegt .ab-bund { flex-direction: row-reverse; align-items: flex-start; gap: 12px; min-height: 0; }
body.med-vaegt .ab-bund .besked { flex: 0 1 auto; margin-right: auto; padding: 5px 12px; text-align: left; font-size: 0.97rem; }
body.med-vaegt .knap.tjekknap, body.med-vaegt .knap.hintknap { min-width: 96px; height: 38px; font-size: 0.95rem; padding: 0 14px; }
/* Med vægten er pladsen trang: tasterne fylder kun, når de bruges */
body.med-vaegt .taster.tom { display: none; }
body.med-vaegt .ab-knapper { gap: 8px; }

/* ---------------------------------------------------------------------
   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);
}

.panel::-webkit-scrollbar { width: 9px; }
.panel::-webkit-scrollbar-track { background: var(--panel); }
.panel::-webkit-scrollbar-thumb { background: #4d4d5c; border-radius: 5px; }

.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.opgavekort { border-left: 3px solid var(--lilla); }

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

.kort > h2 .taeller b { color: var(--tekst); }

.trinliste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }

.trin-punkt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 8px;
    border-radius: var(--radius-lil);
    font-size: 0.88rem;
    color: var(--tekst-mat);
    border: 1px solid transparent;
}

.trin-punkt .tnr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background-color: var(--panel-3);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.trin-punkt .tnavn { flex: 1; }
.trin-punkt .tvist { font-size: 0.75rem; color: #f0d77a; }
.trin-punkt .tgivet { font-size: 0.75rem; color: var(--tekst-mat); font-style: italic; }
.trin-punkt.givet .tnr { background-color: #4a4a58; color: var(--tekst-svag); }
.trin-punkt.givet .tnavn { color: var(--tekst-mat); }

.trin-punkt.aktiv { color: var(--tekst); background-color: rgba(61, 158, 224, 0.12); border-color: rgba(61, 158, 224, 0.45); }
.trin-punkt.aktiv .tnr { background-color: var(--blaa); color: #ffffff; }
.trin-punkt.gjort { color: var(--tekst-svag); }
.trin-punkt.gjort .tnr { background-color: var(--groen-mork); color: #ffffff; }
.trin-punkt.vist .tnr { background-color: #7a6320; color: #ffffff; }

/* ---------------------------------------------------------------------
   REAKTIONERNE I PANELET
   --------------------------------------------------------------------- */
.nrknapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 5px;
}

.nrknap {
    height: 32px;
    border-radius: 6px;
    background-color: var(--panel-2);
    color: var(--tekst-svag);
    border: 1px solid #4a4a58;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.nrknap:hover { border-color: var(--blaa); color: var(--tekst); }
.nrknap.gjort { background-color: var(--groen-mork); border-color: var(--groen); color: #ffffff; }
.nrknap.vist { background-color: #6b5a22; border-color: #b8952f; color: #ffffff; }
.nrknap.aktiv { box-shadow: 0 0 0 2px var(--blaa); border-color: var(--blaa); }

.liste-bund {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.note { font-size: 0.8rem; color: var(--tekst-mat); display: inline-flex; align-items: center; gap: 5px; }
.prik { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 4px; }
.prik.gjort { background-color: var(--groen); }
.prik.vist { background-color: #b8952f; }
.knap.lille { padding: 5px 10px; font-size: 0.8rem; }

.kort.opgavekort.sejr { border-color: var(--groen); }

/* ---------------------------------------------------------------------
   KNAPPER
   --------------------------------------------------------------------- */
.knapper { display: flex; flex-direction: column; gap: 7px; }

.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.82rem;
    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.stor { padding: 11px 13px; font-size: 0.92rem; width: 100%; justify-content: center; }
.knap.blaa { background-color: var(--blaa-mork); border-color: var(--blaa); }
.knap.blaa:hover:not(:disabled) { background-color: var(--blaa); }
.knap.groen { background-color: var(--groen-mork); border-color: var(--groen); }
.knap.groen:hover:not(:disabled) { background-color: var(--groen); }

@keyframes bank {
    0%   { box-shadow: 0 0 0 0 rgba(63, 174, 114, 0.6); }
    70%  { box-shadow: 0 0 0 11px rgba(63, 174, 114, 0); }
    100% { box-shadow: 0 0 0 0 rgba(63, 174, 114, 0); }
}

.knap.banker { animation: bank 1.7s ease-out infinite; }

.ligning {
    background-color: #111117;
    border: 1px solid #3f3f4d;
    border-radius: var(--radius-lil);
    color: #7ee0a8;
    text-align: center;
    padding: 9px 6px;
    margin-top: 9px;
    font-size: 1.05rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   POP OP (teorien)
   --------------------------------------------------------------------- */
.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: 660px;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 24px 26px;
}

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

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

.overlay-boks p, .overlay-boks li {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #c8ced6;
    margin: 0 0 8px 0;
}

.overlay-boks ul, .overlay-boks ol { margin: 0; padding-left: 20px; }

kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid #55556a;
    border-bottom-width: 2px;
    border-radius: 4px;
    background-color: #1f1f28;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--tekst);
}

/* ---------------------------------------------------------------------
   RUNDVISNINGEN (samme som sc1.1)
   --------------------------------------------------------------------- */
.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.75rem;
    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-luk:hover { color: var(--tekst); }
.rundvisning-boks h3 { margin: 0 0 6px 0; font-size: 1rem; color: var(--gul); }
.rundvisning-boks p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: #c8ced6; }

.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,
select:focus-visible {
    outline: 2px solid var(--gul);
    outline-offset: 2px;
}

@media (max-width: 1320px) {
    :root { --panel-bredde: 320px; }
    .ab-spm { font-size: 1.18rem; }
    .taster.ox .tast { min-width: 44px; padding: 0 4px; font-size: 1rem; }
    .kl-tekst, .rc { font-size: 1rem; gap: 6px; }
}

@media (max-width: 1040px) {
    :root { --panel-bredde: 290px; }
    .top { gap: 10px; padding: 8px 12px; }
    .faneknap { padding: 5px 12px 5px 10px; gap: 8px; }
    .niveau-etiket { display: none; }
    .opgavelinje { padding: 10px 14px 0; }
    .arbejdsbord { margin: 8px 10px 10px; padding: 10px 10px; }
    .tavleramme { padding: 16px 8px; }
    .taster { gap: 4px; padding: 7px 8px; }
    .tast { min-width: 34px; height: 40px; padding: 0 4px; }
    .taster.ox .tast { min-width: 36px; padding: 0 3px; font-size: 0.95rem; }
}

@media (max-width: 860px) {
    body { overflow: auto; }
    .top { flex-wrap: wrap; gap: 10px; }
    .niveauvalg { order: 3; width: 100%; flex: none; }
    main { overflow: visible; }
    .fane { position: static; grid-template-columns: minmax(0, 1fr); }
    .scene { overflow: visible; }
    .vaegt-omraade { height: 40vh; min-height: 280px; flex: none; }
    .tavleramme { padding: 22px 8px; }
    .taster.ox .tast { min-width: 44px; padding: 0 4px; font-size: 1rem; }
    .panel { border-left: none; border-top: 1px solid #1f1f27; }
}

/* Lave skaerme (en baerbar, eller rammen i menuen): mindre luft, saa
   intet skal rulles. Skemaet er stadig det stoerste paa tavlen. */
@media (max-height: 780px) {
    .skema { font-size: clamp(2rem, 5.4vw, 4.2rem); }
    .opgavelinje { padding-top: 10px; }
    .arbejdsbord { margin: 8px 12px 10px; padding: 10px 12px; }
    .tavleramme { margin-top: 9px; padding: 14px 10px; gap: 11px; }
    .klrk { height: 40px; }
    .rrk { height: 34px; }
    .tavle-note { margin-top: 2px; }
    .tast { height: 38px; }
    .ab-bund { gap: 9px; min-height: 116px; }
    .knap.tjekknap, .knap.hintknap { height: 42px; padding: 0 20px; font-size: 1.05rem; }
    .vaegt-omraade { min-height: 228px; }
    body.med-vaegt .tavleramme { margin-top: 6px; padding: 6px 10px; gap: 5px; }
    body.med-vaegt .arbejdsbord { margin-bottom: 6px; padding: 8px 12px; }
    body.med-vaegt .opgavelinje { padding-top: 7px; }
    body.med-vaegt .tast { height: 34px; }
    body.med-vaegt .klrk { height: 31px; }
    body.med-vaegt .rrk { height: 25px; }
    body.med-vaegt .knap.tjekknap, body.med-vaegt .knap.hintknap { height: 36px; }
    body.med-vaegt .tavle-note { margin-top: 0; font-size: 0.88rem; }
}

/* Endnu lavere: Tjek staar til hoejre for beskeden i stedet for over den */
@media (max-height: 700px) {
    .skema { font-size: clamp(1.9rem, 5vw, 3.4rem); }
    .tavleramme { padding: 10px 8px; gap: 8px; }
    .ab-bund { flex-direction: row-reverse; align-items: flex-start; min-height: 0; }
    .ab-bund .besked { flex: 0 1 auto; margin-right: auto; padding: 6px 12px; text-align: left; font-size: 1rem; }
    .knap.tjekknap, .knap.hintknap { min-width: 104px; height: 40px; padding: 0 14px; font-size: 1rem; }
    .ab-knapper { gap: 8px; }
    .klrk { height: 36px; }
    .rrk { height: 30px; }
    .klamme .koeffelt, .regnskab .koeffelt { height: 30px; font-size: 1.15rem; }
    .valgknap { padding: 2px 12px; font-size: 1rem; }
}

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