/*
 * Kodespillet — ét stilark.
 *
 * Tokens først, komponenter bagefter. Rækkefølgen er ikke pynt: huset har
 * allerede prøvet at rette ni forskellige hjørneradier ned til tre bagefter,
 * og én gang var nok.
 *
 * TEMAET ER BEVIDST ET ANDET END NIXIO.DK'S. Forsiden er et visitkort og skal
 * se seriøs ud. Det her er et spil, og det skal se ud, som om der sker noget.
 * Terminal og Matrix er referencen: fosforgrønt, monospace, skarpe hjørner,
 * skanlinjer.
 *
 * Men grønt er ACCENT og ikke brødtekst. Knaldgrøn tekst på sort er
 * stemningsfuldt i to sekunder og ulæseligt i to minutter, og en bruger, der
 * skal læse en opgavebeskrivelse og en fejlbesked, skal kunne holde til
 * skærmen i et kvarter. Brødteksten er derfor en dæmpet, grønlig off-white,
 * og det knaldgrønne sidder i rammer, knapper, fokus og glød.
 */

:root {
  /* --- Bund -------------------------------------------------------------- */
  --bg:          #060a08;   /* næsten sort, med en anelse grønt i */
  --bg-hævet:    #0b1310;
  --bg-kode:     #040806;
  --kant:        #16291f;
  --kant-stærk:  #1f4433;

  /* --- Tekst ------------------------------------------------------------- */
  /* IKKE #00ff41. Brødtekst i fuld fosforgrøn er ulæselig over tid. */
  --tekst:       #cfe8db;
  --tekst-dæmp:  #7d9d8e;

  /* --- Accenter ---------------------------------------------------------- */
  --grøn:        #00ff9c;   /* signaturen. Rammer, fokus, glød */
  --grøn-dyb:    #00c97a;
  --cyan:        #22d3ee;
  --fokus:       #00ff9c;

  /* Tilstande. Grøn og rød siger noget om KODEN, aldrig om brugeren.
     En sprunget dag får ingen farve overhovedet. */
  --god:         #00ff9c;
  --god-svag:    #06251a;
  --fejl:        #ff5f56;
  --fejl-svag:   #2a0f0f;

  /* --- Mål --------------------------------------------------------------- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  /* Skarpe hjørner frem for bløde. Et HUD har ikke afrundede kort. */
  --hak:      10px;         /* hvor meget der klippes af hjørnet */
  --r-lille:  3px;
  --r-rund:   999px;        /* kun til mærkater og fremdriftsbjælker */

  --maxw:      46rem;
  --maxw-bred: 76rem;

  --mono: "JetBrains Mono", "Fira Code", "DejaVu Sans Mono",
          "Liberation Mono", Consolas, ui-monospace, monospace;
  /* Navngivne familier FØR system-ui: på nogle Linux-opsætninger falder
     system-ui tilbage til en monospacefont, og så ser prosaen forkert ud. */
  --sans: "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, Cantarell,
          "Noto Sans", "DejaVu Sans", Arial, system-ui, sans-serif;

  color-scheme: dark;
}

/* --- Bund ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tekst);
  background-color: var(--bg);
  background-image:
    radial-gradient(70rem 34rem at 50% -10rem, #0d2a1e 0%, transparent 65%),
    radial-gradient(50rem 26rem at 100% 100%, #07201c 0%, transparent 70%);
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
}

/*
 * Skanlinjer.
 *
 * Meget svage med vilje. En kraftig CRT-effekt er sjov i et skærmbillede og
 * anstrengende at kode i, og målgruppen her er i forvejen følsom over for
 * visuel støj. 3 % er nok til at man mærker det uden at se det.
 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 156, 0.03) 0px,
    rgba(0, 255, 156, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
}

code, kbd, pre, .kode, .mono { font-family: var(--mono); font-size: 0.94em; }

/* --- Layout ---------------------------------------------------------------- */

.ramme {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--s5) var(--s7);
  position: relative;
  z-index: 2;
}
.ramme.bred { max-width: var(--maxw-bred); }

.top {
  border-bottom: 1px solid var(--kant-stærk);
  padding: var(--s4) 0;
  margin-bottom: var(--s6);
  background: rgba(4, 10, 8, 0.72);
  position: relative;
  z-index: 3;
}
.top .ramme {
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

/* Mærket skrives som en prompt. Det er billigt, og det siger med det samme,
   hvad slags sted man er kommet til. */
.mærke {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  color: var(--grøn);
  text-decoration: none;
  text-shadow: 0 0 12px rgba(0, 255, 156, 0.45);
}
.mærke::before { content: "> "; color: var(--grøn-dyb); }

/* Markøren blinker kun, hvis brugeren ikke har frabedt sig bevægelse. */
.mærke::after {
  content: "_";
  animation: blink 1.2s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.top nav { display: flex; gap: var(--s5); align-items: center; }
.top nav a {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--tekst-dæmp);
  text-decoration: none;
  text-transform: uppercase;
}
.top nav a:hover { color: var(--grøn); text-shadow: 0 0 10px rgba(0, 255, 156, 0.5); }

/* --- Typografi ------------------------------------------------------------- */

h1 {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  line-height: 1.15;
  margin: 0 0 var(--s4);
  letter-spacing: -0.01em;
  color: #eafff5;
  text-shadow: 0 0 24px rgba(0, 255, 156, 0.28);
}

h2 {
  font-family: var(--mono);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grøn);
  margin: var(--s6) 0 var(--s3);
}
/* Dobbelt skråstreg frem for en streg under. Det er en kommentar i næsten
   alle de sprog, spillet underviser i, og det er en vits, man skal kunne
   koden for at få — hvilket er hele idéen. */
h2::before { content: "// "; color: var(--kant-stærk); }

h3 {
  font-family: var(--mono);
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  color: var(--tekst);
  margin: var(--s5) 0 var(--s2);
}

p { margin: 0 0 var(--s4); }
.manchet { font-size: 1.08rem; color: var(--tekst-dæmp); }
.dæmpet  { color: var(--tekst-dæmp); font-size: 0.92rem; }

a { color: var(--grøn); text-underline-offset: 3px; }
a:hover { color: var(--cyan); }

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  box-shadow: 0 0 18px rgba(0, 255, 156, 0.35);
}

/* --- Paneler ---------------------------------------------------------------- */

/*
 * Hakket hjørne i stedet for en radius. Det er den ene detalje, der flytter
 * udtrykket fra »hjemmeside« til »spil«, og den koster én clip-path.
 */
.kort {
  background: linear-gradient(180deg, rgba(0,255,156,0.035), transparent 40%), var(--bg-hævet);
  border: 1px solid var(--kant-stærk);
  padding: var(--s5);
  margin: 0 0 var(--s5);
  position: relative;
  clip-path: polygon(
    var(--hak) 0, 100% 0, 100% calc(100% - var(--hak)),
    calc(100% - var(--hak)) 100%, 0 100%, 0 var(--hak)
  );
}
/* En lysende kant langs toppen, som på et HUD-panel. */
.kort::before {
  content: "";
  position: absolute;
  top: 0; left: var(--hak); right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--grøn), transparent 70%);
}

/* --- Punktlister ------------------------------------------------------------ */

.liste { list-style: none; padding: 0; margin: 0 0 var(--s5); }
.liste li {
  position: relative;
  padding-left: var(--s6);
  margin-bottom: var(--s4);
}
.liste li::before {
  content: "▸";
  position: absolute;
  left: var(--s2);
  top: 0;
  font-family: var(--mono);
  color: var(--grøn);
  text-shadow: 0 0 10px rgba(0, 255, 156, 0.6);
}
.liste strong { color: #eafff5; font-family: var(--mono); font-size: 0.95em; }

/* --- Formularer ------------------------------------------------------------- */

.felt { margin-bottom: var(--s5); }
.felt label {
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grøn-dyb);
}
.felt .hjælp {
  margin: var(--s2) 0 0;
  color: var(--tekst-dæmp);
  font-size: 0.86rem;
}

input[type="email"], input[type="password"], input[type="text"],
input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  padding: var(--s3) var(--s4);
  font-family: var(--mono);
  font-size: 0.96rem;
  color: var(--tekst);
  background: var(--bg-kode);
  border: 1px solid var(--kant-stærk);
  border-radius: var(--r-lille);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--grøn);
}
::placeholder { color: #3f5c4e; }

/* --- Honeypot ---------------------------------------------------------------- */

/*
 * Feltet skal være usynligt for mennesker og synligt for en robot.
 *
 * Ude af skærmen frem for display:none: en del robotter springer skjulte
 * felter over, men følger ikke med på positionering. Se opret.php for resten
 * af aftalen — feltet er også aria-hidden og tabindex="-1", så det aldrig kan
 * blive en fælde for en rigtig bruger med tastatur eller skærmlæser.
 */
.honning {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Afkrydsning ------------------------------------------------------------- */

/*
 * Hele linjen er klikbar, ikke bare den lille firkant. Et 13 px stort mål er
 * svært at ramme på en telefon, og et hak, brugeren skal sætte aktivt, må
 * ikke være det sværeste på siden at trykke på.
 */
.afkryds label {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.94rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tekst);
  margin: 0;
}
.afkryds input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.18rem;
  accent-color: var(--grøn);
  cursor: pointer;
}

/* --- Knapper ---------------------------------------------------------------- */

.knap {
  display: inline-block;
  padding: var(--s3) var(--s6);
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #02120c;
  background: linear-gradient(135deg, var(--grøn), var(--cyan));
  border: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: 0 0 20px rgba(0, 255, 156, 0.28);
}
.knap:hover {
  color: #02120c;
  filter: brightness(1.12);
  box-shadow: 0 0 30px rgba(0, 255, 156, 0.5);
}
.knap.stor { display: block; width: 100%; padding: var(--s4) var(--s5); font-size: 0.95rem; }

.knap.rolig {
  color: var(--grøn);
  background: transparent;
  border: 1px solid var(--kant-stærk);
  box-shadow: none;
}
.knap.rolig:hover {
  color: var(--grøn);
  border-color: var(--grøn);
  background: rgba(0, 255, 156, 0.06);
  box-shadow: 0 0 20px rgba(0, 255, 156, 0.2);
}

/* --- Beskeder ---------------------------------------------------------------- */

.besked {
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--kant-stærk);
  background: var(--bg-hævet);
  margin: 0 0 var(--s5);
  font-size: 0.96rem;
}
.besked.god  { border-left-color: var(--god);  background: var(--god-svag); }
.besked.fejl { border-left-color: var(--fejl); background: var(--fejl-svag); }
.besked p:last-child { margin-bottom: 0; }

/*
 * Diagnosesiden. To kolonner, der kan læses op i en telefon: mærkat til
 * venstre, målt værdi til højre. Værdien brydes, fordi en user agent-streng
 * er lang og ikke må skubbe siden vandret.
 */
.tjek-linje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--kant);
}
.tjek-linje:last-of-type { border-bottom: 0; }
.tjek-maerkat { flex: 0 0 14rem; color: var(--tekst-dæmp); }
.tjek-vaerdi {
  flex: 1 1 12rem;
  font-family: var(--mono);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.tjek-linje.god  .tjek-vaerdi { color: var(--god); }
.tjek-linje.fejl .tjek-vaerdi { color: var(--fejl); }

/*
 * Fejlkoden. Med småt og monospace, så den kan læses op i telefonen uden at
 * nogen skal beskrive en skærm — og dæmpet, fordi den ikke er det, brugeren
 * skal gøre noget ved. Se FEJLKODER i js/sandkasse.js for hvad tallene betyder.
 */
.fejlkode {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--tekst-dæmp);
  letter-spacing: 0.06em;
  margin: var(--s3) 0 0;
}

/* --- Hero med digital regn ---------------------------------------------------- */

.hero { position: relative; margin-bottom: var(--s6); }
.hero > * { position: relative; z-index: 2; }
#regn {
  position: absolute;
  inset: -2rem -1rem auto -1rem;
  height: 14rem;
  width: auto;
  z-index: 0;
  opacity: 0.38;
  /* Toner ud nedad, så teksten aldrig konkurrerer med regnen om læsbarheden. */
  mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}

/* --- Sidefod ------------------------------------------------------------------ */

.fod {
  border-top: 1px solid var(--kant);
  margin-top: var(--s7);
  padding: var(--s5) 0;
  color: var(--tekst-dæmp);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  position: relative;
  z-index: 2;
}
.fod .ramme { display: flex; flex-wrap: wrap; gap: var(--s5); padding-bottom: 0; }

/* --- Hjælpere ------------------------------------------------------------------ */

.skjult-visuelt {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Alt, der bevæger sig, skal kunne slås fra — og her betyder det MERE end
 * høflighed. Blinkende markører og faldende tegn er præcis den slags, der
 * stjæler opmærksomheden fra en tekst, man prøver at læse, og målgruppen har
 * i forvejen svært ved at få den tilbage. Regnen fjernes helt, ikke bare
 * bremses.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body::before { display: none; }
  /*
   * Lærredet bliver STÅENDE. regn.js tegner ét stillestående billede i
   * stedet for at animere — et statisk mønster er ikke bevægelse, og en tom
   * overskrift er et fattigere design for netop den bruger, der har bedt om
   * ro. Se regn.js for den anden halvdel af aftalen.
   */
  #regn { opacity: 0.42; }
}

/* ============================================================================
   Spilskærmen
   ============================================================================ */

/* --- Energivalget ------------------------------------------------------------ */

.energivalg { display: grid; gap: var(--s3); margin-top: var(--s5); }

.energi {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  width: 100%;
  padding: var(--s4) var(--s5);
  text-align: left;
  font: inherit;
  color: var(--tekst);
  background: var(--bg-kode);
  border: 1px solid var(--kant-stærk);
  cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.energi:hover { border-color: var(--grøn); background: rgba(0, 255, 156, 0.05); }
.energi-titel {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--grøn);
}
.energi-under { color: var(--tekst-dæmp); font-size: 0.9rem; }

/* --- Toppen af en opgave ------------------------------------------------------ */

.spil-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-dæmp);
  margin-bottom: var(--s2);
}
.spil-spor { color: var(--grøn-dyb); }

/*
 * Bjælken viser SESSIONEN og ikke hele sporet.
 *
 * Fremgang, man kan se bevæge sig inden for et kvarter, motiverer. En bjælke,
 * der står på fire procent, fordi sporet har halvtreds opgaver, gør det
 * modsatte — den siger, hvor langt der er igen.
 */
.bjaelke {
  height: 4px;
  background: var(--bg-kode);
  border: 1px solid var(--kant);
  margin-bottom: var(--s5);
  overflow: hidden;
}
.bjaelke-fyld {
  height: 100%;
  background: linear-gradient(90deg, var(--grøn), var(--cyan));
  box-shadow: 0 0 12px rgba(0, 255, 156, 0.6);
  transition: width 0.4s ease;
}

/* --- Selve opgaven ------------------------------------------------------------ */

.opgave .brief { font-size: 1.05rem; }
.opgave h1 { font-size: clamp(1.3rem, 4vw, 1.7rem); }

.kodefelt {
  width: 100%;
  min-height: 11rem;
  padding: var(--s4);
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1.6;
  tab-size: 2;
  color: #d9ffe9;
  background: var(--bg-kode);
  border: 1px solid var(--kant-stærk);
  border-radius: var(--r-lille);
  resize: vertical;
  /* Ingen vandret rulning. På en telefon er den uudholdelig. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.kodefelt:focus-visible { border-color: var(--grøn); }
.kodefelt.kun-laesning { color: var(--tekst-dæmp); resize: none; }

.svarfelt { margin-top: var(--s3); }

.tastetip {
  margin: var(--s2) 0 0;
  font-size: 0.82rem;
  color: var(--tekst-dæmp);
}

.knaprække {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}
/*
 * »Orker ikke mere« skubbes til højre, men gøres ikke lille eller grå.
 *
 * En udgang, der føles som en fiasko, er en udgang, folk undgår ved at lade
 * være med at komme. Den skal være lige så nem at trykke på som de andre.
 */
.knap.stop { margin-left: auto; }

/* --- Testresultater ------------------------------------------------------------ */

.udfald { margin-top: var(--s5); }

.testliste { list-style: none; padding: 0; margin: var(--s4) 0 0; }
.testliste li {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--kant-stærk);
  background: var(--bg-kode);
  margin-bottom: var(--s2);
  font-size: 0.94rem;
}
.test-ok { border-left-color: var(--god); }
.test-fejl { border-left-color: var(--fejl); }
.test-navn { font-family: var(--mono); font-size: 0.88rem; }
.test-ok .test-navn::before { content: "✓ "; color: var(--god); }
.test-fejl .test-navn::before { content: "✗ "; color: var(--fejl); }
/* Årsagen står som information, ikke som en dom. Ingen udråbstegn, ingen rød
   skrift på selve teksten — kun stregen i kanten markerer den. */
.test-hvorfor { color: var(--tekst-dæmp); font-size: 0.88rem; padding-left: 1.2rem; }

.udskrift-blok {
  padding: var(--s3) var(--s4);
  background: var(--bg-kode);
  border: 1px solid var(--kant);
  border-radius: var(--r-lille);
  overflow-x: auto;
  color: var(--tekst-dæmp);
  margin: 0;
}

/* --- Når den virker ------------------------------------------------------------ */

.klaret {
  padding: var(--s5);
  margin-bottom: var(--s5);
  border: 1px solid var(--god);
  background: var(--god-svag);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.klaret h2 { margin-top: 0; color: var(--god); }
.klaret h2::before { content: "// "; }

/*
 * »Hvad du lige brugte« er svaret på kritikken af Duolingo. Den står lige
 * efter arbejdet, hvor den betyder noget — ikke i en ordliste, ingen åbner.
 */
.brugbart {
  border-left: 3px solid var(--cyan);
  padding-left: var(--s4);
  margin: var(--s4) 0;
}
.brugbart h3 { margin-top: 0; color: var(--cyan); font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; }
.brugbart p { margin-bottom: 0; }

@media (max-width: 700px) {
  .knaprække { flex-direction: column; }
  .knap.stop { margin-left: 0; }
  .knaprække .knap { width: 100%; }
}

/* --- Sporoversigten ---------------------------------------------------------- */

/*
 * En LISTE og ikke et gitter af kort.
 *
 * Sporene bygger på hinanden, så rækkefølgen er information. Et gitter siger
 * »vælg selv«, og et valg er et sted at gå i stå — hele resten af spillet er
 * bygget på at fjerne netop den slags.
 */
.sporliste {
  list-style: none;
  counter-reset: spor;
  padding: 0;
  margin: 0 0 var(--s5);
}
.sporliste li {
  counter-increment: spor;
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  grid-template-areas: "nr navn tal" "nr loefte tal";
  gap: 0 var(--s3);
  align-items: center;
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s2);
  background: var(--bg-hævet);
  border-left: 3px solid var(--kant);
}
.sporliste li::before {
  content: counter(spor);
  grid-area: nr;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--tekst-dæmp);
}
.spor-navn   { grid-area: navn; font-family: var(--mono); font-size: 0.95rem; color: var(--tekst); }
.spor-loefte { grid-area: loefte; font-size: 0.85rem; color: var(--tekst-dæmp); }
.spor-tal    { grid-area: tal; font-family: var(--mono); font-size: 0.85rem; color: var(--tekst-dæmp); }

.spor-igang    { border-left-color: var(--grøn); }
.spor-igang .spor-navn { color: var(--grøn); }
.spor-faerdigt { border-left-color: var(--god); }
.spor-faerdigt .spor-navn::after { content: " ✓"; color: var(--god); }
/*
 * »Forude« og ikke »låst«. Der er ingen lås at bryde — sporet er bare ikke
 * dét, der står for tur. Dæmpningen siger hvor man er, uden at siden ligner
 * en butik med varer, man ikke har råd til.
 */
.spor-forude { opacity: 0.55; }

/*
 * Titlen er et link, når sporet kan vælges. Understregningen kommer først ved
 * berøring: ni understregede linjer under hinanden ser ud som en liste, man
 * skal igennem, og ikke som en liste, man kan vælge i.
 */
.spor-navn a { color: inherit; text-decoration: none; }
.spor-navn a:hover,
.spor-navn a:focus-visible { text-decoration: underline; }

/* Sprunget over efter niveautesten. Dæmpet, men ikke så dæmpet som »forude«:
   det her er et spor, brugeren gerne MÅ trykke på. */
.spor-sprunget { opacity: 0.75; border-left-style: dashed; }
.spor-mærke {
  display: inline-block;
  margin-left: var(--s2);
  font-size: 0.75rem;
  color: var(--tekst-dæmp);
}

/* En knap, der skal læses som en sætning og ikke som en knap — til de valg,
   der hører midt i en tekst. */
.som-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--grøn);
  text-decoration: underline;
  cursor: pointer;
}

.bjaelke.stor { height: 8px; margin-bottom: var(--s5); }

@media (max-width: 560px) {
  .sporliste li { grid-template-columns: 1.6rem 1fr; grid-template-areas: "nr navn" "nr loefte" "nr tal"; }
  .spor-tal { justify-self: start; }
}

/* --- Tegnrækken -------------------------------------------------------------- */

/*
 * Skjult på et rigtigt tastatur, hvor den er støj. Vist på smalle skærme og
 * på berøringsskærme, hvor { } [ ] ; og ' ligger bag to tryk, og hvor Tab
 * slet ikke findes.
 */
.tastebar { display: none; }

@media (max-width: 760px), (pointer: coarse) {
  .tastebar {
    display: flex;
    gap: var(--s2);
    margin-top: var(--s2);
    padding-bottom: var(--s1);
    overflow-x: auto;
    /* Rækken må gerne rulle vandret, men siden må ikke. */
    scrollbar-width: none;
  }
  .tastebar::-webkit-scrollbar { display: none; }

  .tastetegn {
    flex: 0 0 auto;
    /* 44 px er den mindste flade, en finger rammer pålideligt. */
    min-width: 44px;
    height: 44px;
    font-family: var(--mono);
    font-size: 1.05rem;
    color: var(--grøn);
    background: var(--bg-kode);
    border: 1px solid var(--kant-stærk);
    border-radius: var(--r-lille);
    cursor: pointer;
  }
  .tastetegn:active { background: rgba(0, 255, 156, 0.14); }
}

/* --- Hints ------------------------------------------------------------------- */

/*
 * Hints indeholder kodeeksempler med indrykning. En nybegynder forstår sjældent
 * punktum-notation ud fra en beskrivelse — han skal SE `liste.push(tekst)`.
 * Derfor bevares linjeskift og mellemrum præcis som skrevet.
 */
.besked.hint {
  white-space: pre-wrap;
  font-size: 0.94rem;
  border-left-color: var(--cyan);
}
.besked.hint code { color: var(--grøn); }

/* Kodeord inde i en opgavetekst. Ikke en blok — bare et ord, der skal skille
   sig ud fra prosaen omkring det. */
.brief code, .besked.hint code, .brugbart code {
  padding: 0.1em 0.35em;
  background: var(--bg-kode);
  border: 1px solid var(--kant);
  border-radius: 3px;
  color: var(--grøn);
}

/* Sproget i toppen af opgaveskærmen. Det skal kunne ses uden at fylde mere
   end sporets navn. */
.spil-sprog { color: var(--cyan); font-weight: 700; }

/* --- Skemaet på en SQL-opgave -------------------------------------------------- */

/*
 * Tabellerne står ÅBNE som udgangspunkt. Man kan ikke skrive en forespørgsel
 * mod en database, man ikke kan se, og at skulle klappe dem ud hver gang er en
 * forhindring uden formål. Men de kan foldes sammen, når man kan dem udenad.
 */
.skema { margin-bottom: var(--s4); }
.skema summary {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grøn-dyb);
  cursor: pointer;
}
.skema-blok {
  margin: var(--s2) 0 0;
  padding: var(--s3) var(--s4);
  background: var(--bg-kode);
  border: 1px solid var(--kant);
  border-radius: var(--r-lille);
  color: var(--tekst-dæmp);
  font-size: 0.86rem;
  overflow-x: auto;
}

/* Tallet under et sprogvalg: hvor meget der er, eller hvor langt man er. */
.energi-tal {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--grøn-dyb);
  margin-top: var(--s1);
}

/* Det sprog, man sidst valgte, markeres — så et skift er et bevidst skift og
   ikke et gæt på, hvor man var. */
.energi.valgt { border-color: var(--grøn); background: rgba(0, 255, 156, 0.06); }
.energi.valgt .energi-titel::after { content: " ·"; }

/* --- Den levende visning ------------------------------------------------------- */

/*
 * Brugerens side, som den ser ud, mens han skriver. Hvid baggrund med vilje:
 * hans side skal se ud, som den ville gøre på nettet — ikke som en del af
 * spillets mørke tema.
 */
.visning-vaert { margin-top: var(--s4); }
.visning-mærkat {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grøn-dyb);
  margin-bottom: var(--s2);
}
.visning {
  display: block;
  width: 100%;
  height: 18rem;
  background: #fff;
  border: 1px solid var(--kant-stærk);
  border-radius: var(--r-lille);
  resize: vertical;
}

/* Nulstil-knappen, når den spørger sig selv. Rød kant og ikke rød flade:
   den skal kunne ses, uden at se ud som en fejl, brugeren har lavet. */
.knap.rolig.advarer {
  color: var(--fejl);
  border-color: var(--fejl);
  background: var(--fejl-svag);
}
.knap.rolig.advarer:hover { color: var(--fejl); border-color: var(--fejl); }

/* --- Introduktionen til et spor ------------------------------------------------ */

.intro-mærkat { margin-bottom: var(--s2); }

/*
 * ORDENE I OPGAVEN. Står åbne under briefen, og de er med vilje dæmpede: den,
 * der kender ordene, skal kunne springe dem over med øjnene, og den, der ikke
 * gør, skal ikke lede efter et sted at trykke.
 */
.ordliste {
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--bg-kode);
  border-left: 2px solid var(--grøn-dyb);
  border-radius: 4px;
}
.ordliste-titel {
  margin: 0 0 var(--s2);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tekst-dæmp);
}
.ordpunkt { margin-bottom: var(--s2); font-size: 0.88rem; line-height: 1.55; }
.ordpunkt:last-child { margin-bottom: 0; }
.ordpunkt .ord { font-family: var(--mono); color: var(--grøn); }
.ordpunkt .ord::after { content: " — "; color: var(--tekst-dæmp); }
.ordpunkt .ordforklaring { color: var(--tekst-dæmp); }
.ordpunkt code {
  padding: 0.1em 0.35em;
  background: var(--bg-hævet);
  border: 1px solid var(--kant);
  border-radius: 3px;
  color: var(--grøn);
}

.introliste { margin: var(--s5) 0; }
.intropunkt {
  border-left: 2px solid var(--kant-stærk);
  padding-left: var(--s4);
  margin-bottom: var(--s5);
}
.intropunkt h3 {
  margin: 0 0 var(--s1);
  color: var(--grøn);
  font-size: 0.95rem;
}
.intropunkt p { margin: 0; color: var(--tekst-dæmp); }
.intropunkt code {
  padding: 0.1em 0.35em;
  background: var(--bg-kode);
  border: 1px solid var(--kant);
  border-radius: 3px;
  color: var(--grøn);
}

/*
 * »Om sporet« på selve opgaven. Et link og ikke en knap: det er en udvej for
 * den, der har glemt et ord, og det må ikke konkurrere med »kør koden« om
 * opmærksomheden.
 */
.omsporet {
  display: inline-block;
  margin: 0 0 var(--s4);
  padding: 0;
  font: inherit;
  font-size: 0.86rem;
  color: var(--tekst-dæmp);
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--kant-stærk);
  cursor: pointer;
}
.omsporet:hover { color: var(--grøn); border-bottom-color: var(--grøn); }
.omsporet::before { content: "? "; color: var(--grøn-dyb); }
.omsporet.aaben::before { content: "× "; }

.introliste.indlejret {
  margin: 0 0 var(--s5);
  padding: var(--s4);
  background: var(--bg-kode);
  border-left: 2px solid var(--cyan);
}
.introliste.indlejret .intropunkt {
  border-left: 0;
  padding-left: 0;
  margin-bottom: var(--s4);
}
.introliste.indlejret .intropunkt:last-child { margin-bottom: 0; }

/* --- Målet og realitetstjekket -------------------------------------------------- */

/*
 * Et blokeret mål er ikke en fejl, brugeren har lavet — det er en oplysning.
 * Derfor cyan og ikke rød: kortet skal skille sig ud uden at se ud, som om
 * nogen har gjort noget forkert.
 */
.kort.urealistisk { border-color: var(--cyan); }
.kort.urealistisk h2 { color: var(--cyan); }
.kort.urealistisk h2::after { background: var(--cyan); }

.udveje { display: grid; gap: var(--s3); margin: var(--s4) 0 var(--s5); }

/*
 * Udvejene er lige så store og lige så synlige som hinanden. Ingen af dem er
 * »den rigtige«: at flytte datoen og at sænke ambitionen er to lige gyldige
 * valg, og det er brugerens og ikke spillets.
 */
.udvej {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  width: 100%;
  padding: var(--s4) var(--s5);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.udvej-titel {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--grøn);
}
.udvej-under { color: var(--tekst-dæmp); font-size: 0.9rem; }

/* Målet på forsiden */
.maalkort { border-left: 3px solid var(--cyan); }
.maal-tal {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--tekst-dæmp);
}

/* --- Genbesøg og point ---------------------------------------------------------- */

/*
 * Et genbesøg siges tydeligt. Man skal vide, at man har set opgaven før —
 * ellers ligner det, at spillet har mistet overblikket.
 */
.genbesoeg-maerkat {
  padding: var(--s2) var(--s4);
  margin-bottom: var(--s4);
  border-left: 3px solid var(--cyan);
  background: var(--bg-kode);
  font-size: 0.9rem;
  color: var(--tekst-dæmp);
}
.genbesoeg-maerkat strong { color: var(--cyan); font-family: var(--mono); }

.point-linje {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--god);
  letter-spacing: 0.04em;
  margin: 0 0 var(--s4);
}

/* --- Ugekalenderen ---------------------------------------------------------------- */

/*
 * DET HER ER IKKE EN SERIE. Der vises uger med aktivitet, og der er intet at
 * miste: en sprunget uge efterlader et hul og ikke et nul. Der står heller
 * ikke et tal for »uger i træk« nogen steder — det ville være en serie med et
 * andet navn.
 */
.ugekalender {
  display: flex;
  gap: 3px;
  margin: var(--s3) 0 var(--s5);
  flex-wrap: wrap;
}
.uge {
  width: 22px;
  height: 22px;
  border: 1px solid var(--kant);
  background: var(--bg-kode);
  border-radius: 2px;
}
.uge.aktiv {
  background: var(--grøn-dyb);
  border-color: var(--grøn);
  box-shadow: 0 0 8px rgba(0, 255, 156, 0.3);
}
.uge.nu { outline: 1px solid var(--cyan); outline-offset: 1px; }

/* --- Niveautesten ---------------------------------------------------------------- */

.spm { margin-bottom: var(--s4); }
.spm-nr {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grøn-dyb);
  margin-bottom: var(--s2);
}
.spm-tekst { font-size: 1.02rem; margin-bottom: var(--s3); }
.spm .afkryds { margin-bottom: var(--s2); }
.spm .afkryds label { align-items: center; }
.spm input[type="radio"] {
  flex: 0 0 auto;
  width: 1.15rem; height: 1.15rem;
  accent-color: var(--grøn);
  cursor: pointer;
}

/* Gennemgangen. Grøn og rød KUN i kanten: et forkert svar er information om,
   hvor man står, og ikke en dom over den, der svarede. */
.spm-ok   { border-left: 3px solid var(--god); }
.spm-fejl { border-left: 3px solid var(--fejl); }
.spm-ok .spm-nr   { color: var(--god); }
.spm-fejl .spm-nr { color: var(--fejl); }