/* ═══════════════════════════════════════════════════════════════════════════
   BRANDHOLD — 1987-medicoudstyr
   ───────────────────────────────────────────────────────────────────────────
   Alt det taktile er CSS, ikke billeder: plasten er lagdelte gradienter med
   en støjtekstur ovenpå, aluminiummet er en repeterende gradient, og LCD'et
   er fosforgrøn tekst på næsten-sort med scanlines. Det er med vilje —
   kontrollerne skal være knivskarpe på enhver skærmtæthed, og panelet skal
   virke, før det første billede er hentet. Den genererede tekstur lægger sig
   ovenpå som atmosfære via --tekstur og er aldrig en forudsætning.

   Farverne kommer fra Jacksons zoner: hvid kerne, rød stase, lyserød
   hyperæmi. Det er ikke pynt — det er den palet, en brandsårsafdeling
   allerede har i hovedet.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* plast og metal */
  --plast:        #c4b9a2;
  --plast-lys:    #ded3bc;
  --plast-moerk:  #9d9179;
  --plast-skygge: #6f664f;
  --stal:         #8b8f94;
  --stal-lys:     #c6cace;
  --stal-moerk:   #5a5e63;
  --kabinet:      #24261f;
  --kabinet-lys:  #34362d;
  --sort:         #131410;

  /* Jacksons zoner */
  --koagulation:  #f0ece0;
  --stase:        #d83c2f;
  --hyperaemi:    #f0a3a8;

  /* lamper og skærm */
  --rav:          #f4a33a;
  --rav-glød:     #ffca7a;
  --lcd:          #8df04e;
  --lcd-svag:     #4a8a2c;
  --lcd-bag:      #101a0b;
  --teal:         #2f6b63;

  --pude: 12px;
  --radius: 7px;

  /* Støj — sælger «plast» mere end nogen gradient. Inline, så der ikke skal
     hentes en fil for at panelet ser rigtigt ud. */
  --stoej: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --tekstur: none;    /* sættes af app.js, hvis img/panel-tekstur.jpg kan hentes */

  --skrift: 'Arial Narrow', 'Helvetica Neue Condensed', 'Roboto Condensed', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --skrift-lcd: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--sort);
  color: var(--plast-lys);
  font-family: var(--skrift);
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ── genbrugte flader ───────────────────────────────────────────────────── */

/* Den beige ABS-plade. Tre lag: farvegradient, støj, og en svag lodret
   «støbeform»-stribe. Sammen bliver det til plast i stedet for en firkant. */
/* ⚠ Teksturen hører IKKE til her. Den har nitter, autoklavetape og præget
   advarselstekst — lægges den i hvert modul, står den samme tapestump seks
   gange, og illusionen falder fra hinanden. Den ligger i stedet ÉN gang bag
   hele panelet (se .panel), og modulerne er let gennemsigtige, så de ser ud
   til at være sat ned i den plade. Fundet ved at se på den. */
.plade {
  background:
    linear-gradient(168deg,
      rgba(228,218,197,.58) 0%,
      rgba(198,187,164,.52) 46%,
      rgba(150,138,114,.60) 100%);
  position: relative;
}
.plade::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--stoej);
  background-size: 120px 120px;
  opacity: .16;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
}

/* Børstet aluminium — retningen på børstningen er vandret, som på et
   rigtigt frontpanel. */
.stal {
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.10) 0 1px,
      rgba(0,0,0,.06) 1px 2px,
      rgba(255,255,255,.04) 2px 3px),
    linear-gradient(180deg, var(--stal-lys), var(--stal) 45%, var(--stal-moerk));
}

/* Præget tekst: lys ovenfra, mørk skygge nedenunder. */
.praeget {
  color: #4a4335;
  text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(0,0,0,.28);
}

/* ═══ PIN-port ═══════════════════════════════════════════════════════════ */

.port {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #2a2c24, #0c0d0a 70%);
  padding: 20px;
}
.port-kort {
  width: min(340px, 100%);
  padding: 26px 22px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, var(--kabinet-lys), var(--kabinet));
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
  text-align: center;
}
.port-maerke {
  font-size: 10px; letter-spacing: .28em; color: var(--rav);
  border: 1px solid rgba(244,163,58,.4); border-radius: 3px;
  padding: 3px 8px; display: inline-block; margin-bottom: 16px;
}
.port-titel { font-size: 30px; letter-spacing: .16em; color: var(--plast-lys); font-weight: 700; }
.port-under { font-size: 12px; letter-spacing: .2em; color: #8a8f7d; margin: 6px 0 18px; }
.port-prikker { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; }
.port-prikker i {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.35);
  transition: background .12s, box-shadow .12s;
}
.port-prikker i.fyldt { background: var(--rav); box-shadow: 0 0 10px var(--rav); border-color: transparent; }
.taster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.taster button {
  padding: 15px 0; font-size: 20px; font-weight: 700;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, #3d4036, #2b2d25);
  color: var(--plast-lys); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 0 rgba(0,0,0,.4);
}
.taster button:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0,0,0,.5); }
.taster button.tom { visibility: hidden; }
.port-fejl { color: var(--stase); font-size: 13px; min-height: 1.3em; margin-top: 12px; letter-spacing: .08em; }

/* ═══ skærme ════════════════════════════════════════════════════════════ */

.skaerm {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
}

/* ── START ─────────────────────────────────────────────────────────────── */

#skaermStart { justify-content: center; align-items: center; position: relative; overflow: hidden; }

.splash {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, #3a3d31 0%, #16170f 62%, #0a0b07 100%);
  z-index: 0;
}
.splash.har-billede {
  background-image: var(--splash-billede);
  background-size: cover; background-position: center;
}
/* Mørkner splash-fotoet, så teksten kan læses uanset hvad billedet viser. */
.splash::after {
  content: ''; position: absolute; inset: 0;
  /* Fotoet er travlt — knapper og lamper hele vejen. Sløret skal være tykt nok
     til at 'MODEL 1987'-linjen kan læses oven på hvad som helst. */
  background:
    radial-gradient(ellipse at 50% 42%, rgba(10,11,7,.35), rgba(10,11,7,.86) 72%),
    linear-gradient(180deg, rgba(10,11,7,.62), rgba(10,11,7,.93));
}

.start-indhold {
  position: relative; z-index: 1;
  width: min(420px, 100%); text-align: center;
}

.logo { line-height: 1; margin-bottom: 14px; }
.logo-brand, .logo-hold {
  font-size: clamp(38px, 13vw, 58px); font-weight: 800; letter-spacing: .06em;
  display: inline-block;
}
.logo-brand { color: var(--stase); text-shadow: 0 0 22px rgba(216,60,47,.45); }
.logo-hold { color: var(--plast-lys); }
.logo-plade {
  display: block; margin-top: 10px;
  font-size: 10px; letter-spacing: .3em; color: #7e8372;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 6px 0;
}
.tagline { color: #a8ad99; font-size: 14px; margin-bottom: 24px; letter-spacing: .04em; }

.felt { display: block; text-align: left; margin-bottom: 16px; }
.felt-mrk { display: block; font-size: 10px; letter-spacing: .26em; color: #878c79; margin-bottom: 6px; }
.felt input, .tilslut-raekke input {
  width: 100%; padding: 13px 14px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.4); color: var(--plast-lys);
  letter-spacing: .06em;
}
.felt input:focus, .tilslut-raekke input:focus {
  outline: none; border-color: var(--rav); box-shadow: 0 0 0 3px rgba(244,163,58,.16);
}

.knap {
  display: inline-block; width: 100%;
  padding: 15px 18px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(0,0,0,.4);
  background: linear-gradient(180deg, var(--plast-lys), var(--plast) 55%, var(--plast-moerk));
  color: #3c3628; font-weight: 800; letter-spacing: .16em; font-size: 14px;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  box-shadow: 0 3px 0 var(--plast-skygge), 0 6px 14px rgba(0,0,0,.45);
}
.knap:active { transform: translateY(3px); box-shadow: 0 0 0 var(--plast-skygge), inset 0 2px 6px rgba(0,0,0,.35); }
.knap-stor { padding: 18px; font-size: 16px; }

.skillelinje { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; }
.skillelinje::before, .skillelinje::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.skillelinje span { font-size: 10px; letter-spacing: .22em; color: #787d6c; }

.tilslut-raekke { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.tilslut-raekke input {
  text-align: center; font-size: 22px; letter-spacing: .3em; font-weight: 700;
  font-family: var(--skrift-lcd);
}
.tilslut-raekke .knap { padding: 13px 10px; }

.fejl { color: var(--stase); font-size: 13px; min-height: 1.3em; margin-top: 14px; }
.lille-link {
  background: none; border: none; cursor: pointer;
  color: #8a8f7d; font-size: 12px; letter-spacing: .12em;
  text-decoration: underline; text-underline-offset: 3px; margin-top: 14px;
}

/* ── LOBBY ─────────────────────────────────────────────────────────────── */

#skaermLobby { justify-content: center; align-items: center; }
.lobby-kort { width: min(420px, 100%); text-align: center; }
.lobby-mrk { font-size: 10px; letter-spacing: .28em; color: #878c79; }
.stuenummer {
  font-family: var(--skrift-lcd); font-size: clamp(56px, 22vw, 92px); font-weight: 700;
  color: var(--lcd); letter-spacing: .12em; line-height: 1.1;
  text-shadow: 0 0 26px rgba(141,240,78,.5);
  margin: 6px 0 10px;
}
.lobby-hint { font-size: 13px; color: #9ba08c; margin-bottom: 22px; }
.lobby-raad { font-size: 13px; color: #9ba08c; margin: 18px 0 22px; line-height: 1.5; }
.lobby-raad strong { color: var(--rav); }

.holdliste { list-style: none; display: grid; gap: 8px; }
.holdliste li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 14px; letter-spacing: .06em;
}
.holdliste .prik { width: 9px; height: 9px; border-radius: 50%; background: #5a5f4e; flex: none; }
.holdliste .prik.paa { background: var(--lcd); box-shadow: 0 0 8px var(--lcd); }
.holdliste .status { margin-left: auto; font-size: 11px; letter-spacing: .16em; color: #878c79; }
.holdliste .status.klar { color: var(--lcd); }

/* ═══ SPILLET ════════════════════════════════════════════════════════════ */

.skaerm-spil {
  padding: 0; gap: 0;
  height: 100dvh; overflow: hidden;
  background: linear-gradient(180deg, #1a1c16, #0e0f0b);
}

/* topbjælke */
.bjaelke {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(8px, env(safe-area-inset-top)) 14px 8px;
  background: linear-gradient(180deg, var(--kabinet-lys), var(--kabinet));
  border-bottom: 1px solid rgba(0,0,0,.6);
  flex: none;
}
.bjaelke-venstre { display: flex; align-items: baseline; gap: 10px; }
.bjaelke-logo { font-size: 13px; font-weight: 800; letter-spacing: .2em; color: var(--plast-lys); }
.bjaelke-stue { font-size: 10px; letter-spacing: .18em; color: #7e8372; font-family: var(--skrift-lcd); }

.lamper { display: flex; gap: 7px; }
.lampe {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.5);
  background: #3a3c33;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
.lampe.taendt.lampe-rav { background: var(--rav); box-shadow: 0 0 10px var(--rav-glød), inset 0 1px 2px rgba(255,255,255,.4); }
.lampe.taendt.lampe-roed { background: var(--stase); box-shadow: 0 0 10px var(--stase), inset 0 1px 2px rgba(255,255,255,.3); }

/* niveaulinje */
.niveaulinje {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  padding: 7px 14px 8px;
  background: var(--kabinet); border-bottom: 1px solid rgba(0,0,0,.5);
  flex: none;
}
.niveau-navn { font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--rav); }
.niveau-tbsa { font-size: 11px; letter-spacing: .1em; color: #8a8f7d; font-family: var(--skrift-lcd); }
.fremdrift {
  grid-column: 1 / -1; height: 4px; border-radius: 2px;
  background: rgba(0,0,0,.55); overflow: hidden;
}
.fremdrift i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--lcd-svag), var(--lcd));
  transition: width .25s ease-out;
}

/* ── LCD-ordredisplayet ────────────────────────────────────────────────── */

.lcd {
  position: relative; flex: none;
  margin: 10px 12px 8px;
  border-radius: 6px;
  padding: 3px;
  background: linear-gradient(180deg, var(--stal-moerk), #2e3136);
  box-shadow: 0 3px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
}
.lcd-indhold {
  position: relative; z-index: 1;
  min-height: 116px;
  border-radius: 4px;
  background: linear-gradient(180deg, #16220f, var(--lcd-bag));
  box-shadow: inset 0 3px 10px rgba(0,0,0,.8);
  padding: 10px 12px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
/* scanlines + skærmglans */
.lcd-skin {
  position: absolute; inset: 3px; border-radius: 4px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 38%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}

.ordre {
  display: flex; flex-direction: column; gap: 6px;
}
.ordre + .ordre { border-top: 1px dashed rgba(141,240,78,.25); padding-top: 8px; }
.ordre-tekst {
  font-family: var(--skrift-lcd);
  font-size: clamp(17px, 5.4vw, 26px);
  font-weight: 700; line-height: 1.16;
  color: var(--lcd);
  text-shadow: 0 0 9px rgba(141,240,78,.55);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.ordre-bar { height: 6px; border-radius: 3px; background: rgba(141,240,78,.14); overflow: hidden; }
.ordre-bar i {
  display: block; height: 100%; width: 100%;
  background: var(--lcd);
  box-shadow: 0 0 8px rgba(141,240,78,.7);
}
/* Under to sekunder skifter bjælken til stase-rød og blinker. Farven er den
   samme, som zonen har på et forbrændingsdiagram — og øjet fanger den før
   teksten. */
.ordre-bar.knap-tid i { background: var(--stase); box-shadow: 0 0 10px rgba(216,60,47,.8); }
.ordre-bar.knap-tid { animation: pulsbar .38s steps(2, end) infinite; }
@keyframes pulsbar { 50% { opacity: .35; } }

.lcd-tom {
  font-family: var(--skrift-lcd); font-size: 14px; letter-spacing: .18em;
  color: var(--lcd-svag); text-align: center;
}
.lcd-kvit {
  font-family: var(--skrift-lcd); font-size: 15px; letter-spacing: .14em;
  text-align: center; font-weight: 700;
}
.lcd-kvit.ok { color: var(--lcd); text-shadow: 0 0 12px rgba(141,240,78,.6); }
.lcd-kvit.fejl { color: var(--stase); text-shadow: 0 0 12px rgba(216,60,47,.6); }

/* ── panelet ───────────────────────────────────────────────────────────── */

.panel {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 8px;
  margin: 0 12px 8px;
  padding: 8px;
  border-radius: 9px;
  /* Den ene, sammenhængende panelplade. Findes billedet ikke, står gradienten
     alene — spillet må aldrig afhænge af, at et billede blev hentet. */
  background:
    /* Vask oven på fotoet: nitter og aluminiumsliste skal læses igennem,
       men den prægede advarselstekst må ikke konkurrere med kontrollernes
       navne. Uden den læste man «FLAMMABLE ANESTHETICS» før «WECK-KNIVEN». */
    linear-gradient(rgba(208,197,174,.46), rgba(208,197,174,.46)),
    var(--tekstur) center / cover no-repeat,
    linear-gradient(160deg, var(--plast-lys), var(--plast) 55%, var(--plast-moerk));
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.35),
    inset 0 -1px 0 rgba(255,255,255,.25),
    0 1px 0 rgba(255,255,255,.12);
}

.modul {
  position: relative;
  border-radius: var(--radius);
  padding: 7px 8px 8px;
  display: flex; flex-direction: column; gap: 5px;
  width: 100%;
  border: 1px solid rgba(0,0,0,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 4px rgba(0,0,0,.18),
    0 2px 5px rgba(0,0,0,.45);
  touch-action: none;
  overflow: hidden;
  transition: transform .18s ease-out;
}

.modul-navn {
  font-size: clamp(8.5px, 2.7vw, 11px);
  font-weight: 800; letter-spacing: .07em; line-height: 1.1;
  text-align: center;
  min-height: 2.2em;
  display: flex; align-items: center; justify-content: center;
  word-break: break-word; hyphens: auto;
}

.modul-krop { flex: 1; display: flex; align-items: center; justify-content: center; }

/* Et kort grønt glimt, når en ordre kvitteres på DENNE kontrol. */
.modul.traf { animation: traf .42s ease-out; }
@keyframes traf {
  0%   { box-shadow: inset 0 0 0 2px var(--lcd), 0 0 22px rgba(141,240,78,.8); }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 5px rgba(0,0,0,.45); }
}

/* ── kontroltype: kontakt (vippe) ──────────────────────────────────────── */

.vippe {
  width: 100%; max-width: 118px; height: 48px;
  border-radius: 5px; position: relative;
  background: linear-gradient(180deg, #3a3c33, #22241d);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7);
  display: flex; padding: 3px; cursor: pointer;
}
.vippe-halv {
  flex: 1; border-radius: 3px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  color: #6c7161; transition: all .12s;
}
.vippe-halv.aktiv {
  background: linear-gradient(180deg, var(--plast-lys), var(--plast-moerk));
  color: #3c3628; text-shadow: 0 1px 0 rgba(255,255,255,.45);
  box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5);
}
.vippe-halv.aktiv.til { background: linear-gradient(180deg, #a8d98a, #6d9a52); color: #1d2a14; }

/* ── kontroltype: vælger + drejeknap (rund knop) ───────────────────────── */

.knop-hylster { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }

.knop {
  width: 58px; height: 58px; border-radius: 50%; position: relative; flex: none;
  cursor: pointer;
  /* Riflet kant — repeterende conic-gradient er den billigste måde at få
     metal til at se drejeligt ud. */
  background:
    repeating-conic-gradient(from 0deg,
      #b9bdc2 0deg 4deg, #7e8288 4deg 8deg);
  box-shadow: 0 3px 6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.35);
  display: grid; place-items: center;
}
.knop::before {
  content: ''; position: absolute; inset: 7px; border-radius: 50%;
  background: linear-gradient(150deg, #e6e9ec, #9aa0a6 55%, #6b7076);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 1px 3px rgba(0,0,0,.4);
}
/* Viseren. Drejer til den valgte position. */
.knop-viser {
  position: absolute; inset: 0; border-radius: 50%;
  transition: transform .16s cubic-bezier(.2,.8,.3,1);
  z-index: 1;
}
.knop-viser::after {
  content: ''; position: absolute;
  left: 50%; top: 6px; transform: translateX(-50%);
  width: 3px; height: 15px; border-radius: 2px;
  background: var(--stase);
  box-shadow: 0 0 6px rgba(216,60,47,.8);
}
.knop:active { transform: scale(.95); }

.knop-vaerdi {
  font-family: var(--skrift-lcd); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-align: center; line-height: 1.15;
  color: #2f3a22;
  background: linear-gradient(180deg, #b4c79a, #93ab78);
  border-radius: 3px; padding: 2px 6px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── kontroltype: skyder ───────────────────────────────────────────────── */

.skyder-hylster { display: flex; align-items: center; gap: 8px; width: 100%; }
.skyder {
  position: relative; flex: 1; height: 34px; cursor: pointer;
  display: flex; align-items: center;
}
.skyder-spor {
  position: absolute; left: 0; right: 0; height: 9px; border-radius: 5px;
  background: linear-gradient(180deg, #22241d, #3a3c33);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.75);
}
.skyder-tak {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 0 2px; pointer-events: none;
}
.skyder-tak i { width: 1px; height: 6px; background: rgba(0,0,0,.35); }
.skyder-knop {
  position: absolute; width: 22px; height: 30px; border-radius: 4px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #e2e5e8, #9aa0a6 50%, #62676d);
  box-shadow: 0 2px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.7);
  transition: left .1s ease-out;
}
.skyder-knop::after {
  content: ''; position: absolute; left: 4px; right: 4px; top: 50%;
  height: 2px; transform: translateY(-50%);
  background: rgba(0,0,0,.4); border-radius: 1px;
  box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 -3px 0 rgba(0,0,0,.25);
}
.skyder.traekkes .skyder-knop { transition: none; transform: translateX(-50%) scale(1.08); }
.skyder-tal {
  font-family: var(--skrift-lcd); font-size: 15px; font-weight: 700; flex: none;
  min-width: 26px; text-align: center; color: #2f3a22;
  background: linear-gradient(180deg, #b4c79a, #93ab78);
  border-radius: 3px; padding: 3px 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}

/* ── kontroltype: trykknap (membran) ───────────────────────────────────── */

.membran {
  width: 100%; max-width: 112px; height: 54px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(0,0,0,.5);
  background: linear-gradient(180deg, var(--stase), #9e2b21);
  color: #fff3ef; font-weight: 800; font-size: 11px; letter-spacing: .16em;
  display: grid; place-items: center;
  box-shadow: 0 3px 0 #74211a, 0 5px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.membran:active { transform: translateY(3px); box-shadow: 0 0 0 #74211a, inset 0 3px 8px rgba(0,0,0,.5); }

/* ── kontroltype: holdeknap ────────────────────────────────────────────── */

.holde {
  position: relative; width: 62px; height: 62px; border-radius: 50%; cursor: pointer;
  background: linear-gradient(180deg, #3c3f35, #24261f);
  border: 1px solid rgba(0,0,0,.5);
  display: grid; place-items: center;
  box-shadow: 0 3px 0 #16180f, inset 0 1px 0 rgba(255,255,255,.14);
  color: var(--rav); font-size: 9px; font-weight: 800; letter-spacing: .1em;
}
.holde:active { transform: translateY(2px); }
.holde-ring {
  position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(var(--rav) var(--fyld, 0%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  pointer-events: none;
}

/* ── monitor / stabilitet ──────────────────────────────────────────────── */

.monitor {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 4px 14px max(8px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--kabinet), #16180f);
  border-top: 1px solid rgba(0,0,0,.6);
}
/* ⚠ IKKE width:100% her. Sammen med flex:1 sætter det flex-basis til hele
   rækkens bredde, og STABILITET-tallet (flex:none) blev skubbet ud over
   kanten ved 390 px. På desktop var der plads, så fejlen var usynlig.
   min-width:0 lader canvassen krympe i stedet. */
.ekg { flex: 1 1 auto; min-width: 0; height: 44px; display: block; }
.monitor-tal { text-align: right; flex: none; }
.monitor-mrk { display: block; font-size: 8px; letter-spacing: .22em; color: #7e8372; }
.monitor-vaerdi {
  font-family: var(--skrift-lcd); font-size: 26px; font-weight: 700; line-height: 1;
  color: var(--lcd); text-shadow: 0 0 12px rgba(141,240,78,.5);
}
.monitor-vaerdi.lav   { color: var(--rav);   text-shadow: 0 0 12px rgba(244,163,58,.6); }
.monitor-vaerdi.kritisk { color: var(--stase); text-shadow: 0 0 14px rgba(216,60,47,.7); animation: pulsbar .5s steps(2,end) infinite; }

/* ═══ HÆNDELSER ══════════════════════════════════════════════════════════ */

/* ALARM — hele rummet ser det. */
.skaerm-spil.alarm { animation: alarmpuls 1.05s ease-in-out infinite; }
@keyframes alarmpuls {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(216,60,47,0); }
  50%      { box-shadow: inset 0 0 90px 10px rgba(216,60,47,.42); }
}

/* INHALATIONSSKADE — dug, der skal tørres af med fingeren. */
.dug {
  position: absolute; inset: 0; z-index: 20;
  width: 100%; height: 100%;
  touch-action: none;
}

/* SØLVSULFADIAZIN — fedtede udtværinger. Kan ikke tørres af; de sidder tiden ud. */
.creme {
  position: absolute; inset: 0; z-index: 19; pointer-events: none;
  background:
    radial-gradient(ellipse 120px 70px at 22% 38%, rgba(236,238,230,.82), transparent 70%),
    radial-gradient(ellipse 90px 120px at 74% 56%, rgba(236,238,230,.74), transparent 72%),
    radial-gradient(ellipse 150px 60px at 48% 78%, rgba(236,238,230,.7), transparent 70%),
    radial-gradient(ellipse 70px 90px at 86% 22%, rgba(236,238,230,.66), transparent 72%);
  filter: blur(1.5px);
  animation: smoer 11s ease-in-out;
}
@keyframes smoer {
  0%   { opacity: 0; transform: scale(.9); }
  8%   { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.06) translateY(4px); }
}

/* VÆSKEOVERLOAD — kontrollerne hæver og skubber til hinanden. */
.panel.oedem .modul { animation: haev 2.4s ease-in-out infinite alternate; }
.panel.oedem .modul:nth-child(2n) { animation-delay: -.8s; }
.panel.oedem .modul:nth-child(3n) { animation-delay: -1.5s; }
@keyframes haev {
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.16) translate(2px, -3px); }
}

/* STRØMSVIGT — nødbelysning, kun konturer. */
.skaerm-spil.stroemsvigt .panel .modul {
  background: #14150f !important;
  color: #6d7360;
  box-shadow: inset 0 0 0 1px rgba(216,60,47,.35);
}
.skaerm-spil.stroemsvigt .panel .modul::after { opacity: 0; }
.skaerm-spil.stroemsvigt .modul-navn { color: rgba(216,60,47,.8); text-shadow: none; }
.skaerm-spil.stroemsvigt .knop, .skaerm-spil.stroemsvigt .skyder-knop,
.skaerm-spil.stroemsvigt .membran, .skaerm-spil.stroemsvigt .vippe-halv.aktiv {
  background: #22241d !important; color: rgba(216,60,47,.75) !important;
  box-shadow: inset 0 0 0 1px rgba(216,60,47,.3) !important; text-shadow: none !important;
}
.noedlys {
  position: absolute; inset: 0; z-index: 18; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(216,60,47,.3), transparent 62%);
  animation: noedblink 1.7s ease-in-out infinite;
}
@keyframes noedblink { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* VAGTEN RINGER */
.opkald {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: rgba(8,9,6,.82);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: ringop .3s ease-out;
}
@keyframes ringop { from { opacity: 0; } to { opacity: 1; } }
.opkald-kort {
  width: min(300px, 82%); text-align: center; padding: 26px 20px 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--kabinet-lys), var(--kabinet));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 50px rgba(0,0,0,.7);
  animation: ryst 1.1s ease-in-out infinite;
}
@keyframes ryst {
  0%,100% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(-5px) rotate(-1.2deg); }
  30% { transform: translateX(5px) rotate(1.2deg); }
  45% { transform: translateX(-3px) rotate(-.6deg); }
  60% { transform: translateX(3px) rotate(.6deg); }
}
.opkald-mrk { font-size: 9px; letter-spacing: .28em; color: var(--rav); margin-bottom: 12px; }
.opkald-navn { font-size: 24px; font-weight: 800; letter-spacing: .1em; color: var(--plast-lys); }
.opkald-nr { font-size: 12px; color: #878c79; margin: 4px 0 22px; font-family: var(--skrift-lcd); }
.opkald-afvis {
  width: 100%; padding: 16px; border: none; border-radius: 40px; cursor: pointer;
  background: linear-gradient(180deg, var(--stase), #9e2b21);
  color: #fff; font-weight: 800; letter-spacing: .2em; font-size: 14px;
  box-shadow: 0 4px 0 #74211a, 0 8px 18px rgba(216,60,47,.35);
}
.opkald-afvis:active { transform: translateY(4px); box-shadow: 0 0 0 #74211a; }

/* Varselsbanner når en hændelse begynder */
.varsel {
  position: absolute; left: 50%; top: 96px; transform: translateX(-50%);
  z-index: 35; pointer-events: none;
  padding: 9px 18px; border-radius: 4px;
  background: rgba(216,60,47,.95);
  color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .2em;
  box-shadow: 0 6px 22px rgba(0,0,0,.6);
  animation: varselind 2.6s ease-out forwards;
  white-space: nowrap;
}
@keyframes varselind {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.9); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* ═══ RESULTATSKÆRME ═════════════════════════════════════════════════════ */

#skaermVagtskifte, #skaermDoed { justify-content: center; align-items: center; }
.resultat-kort { width: min(420px, 100%); text-align: center; }
.resultat-mrk { font-size: 10px; letter-spacing: .28em; color: var(--lcd); margin-bottom: 8px; }
.resultat-doed .resultat-mrk { color: var(--stase); }
.resultat-titel { font-size: clamp(26px, 9vw, 38px); font-weight: 800; letter-spacing: .08em; color: var(--plast-lys); }
.resultat-tekst { font-size: 14px; color: #9ba08c; margin: 10px 0 20px; line-height: 1.5; }
.flatline { width: 100%; height: 46px; display: block; margin-bottom: 14px; }

.noegletal {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 20px;
}
.noegletal > div {
  padding: 12px 6px; border-radius: 8px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
}
.noegletal dt { font-size: 9px; letter-spacing: .18em; color: #878c79; margin-bottom: 5px; }
.noegletal dd { font-family: var(--skrift-lcd); font-size: 22px; font-weight: 700; color: var(--lcd); }
.noegletal dd.daarlig { color: var(--stase); }

#vsHold { margin-bottom: 20px; }

/* ═══ HJÆLPEARK ══════════════════════════════════════════════════════════ */

.ark {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 18px;
  background: rgba(8,9,6,.86);
  overflow-y: auto;
}
.ark-kort {
  width: min(460px, 100%); padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--kabinet-lys), var(--kabinet));
  border: 1px solid rgba(255,255,255,.1);
}
.ark-kort h2 { font-size: 20px; letter-spacing: .08em; margin-bottom: 16px; color: var(--plast-lys); }
.ark-kort ol { padding-left: 20px; display: grid; gap: 11px; font-size: 14px; color: #b3b8a4; line-height: 1.5; }
.ark-kort strong { color: var(--rav); }
.ark-kort em { color: var(--hyperaemi); font-style: normal; }
.ark-advarsel {
  margin: 18px 0 20px; padding: 12px 14px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  background: rgba(216,60,47,.1); border-left: 3px solid var(--stase); color: #b3b8a4;
}

/* ═══ STØRRE SKÆRME ══════════════════════════════════════════════════════
   Spillet er telefon-først, men en iPad eller en bærbar må ikke se ud som
   en opblæst telefon. Panelet får tre spalter, og LCD'et vokser med. */

@media (min-width: 620px) {
  .panel { grid-template-columns: repeat(3, 1fr); }
  .lcd-indhold { min-height: 130px; }
  .ordre-tekst { font-size: 28px; }
  .modul-navn { font-size: 12px; }
}

@media (min-width: 900px) {
  .skaerm-spil { max-width: 900px; margin: 0 auto; border-left: 1px solid rgba(255,255,255,.06); border-right: 1px solid rgba(255,255,255,.06); }
}

/* Lav højde (landskab på telefon) — LCD'et må aldrig æde panelet. */
@media (max-height: 560px) {
  .lcd-indhold { min-height: 78px; }
  .ordre-tekst { font-size: 17px; }
  .ekg { height: 30px; }
  .monitor-vaerdi { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NYE KONTROLTYPER — otte forskellige BEVÆGELSER
   ───────────────────────────────────────────────────────────────────────────
   Første udgave havde 55 af 76 kontroller på «tryk». Det er ét spil forklædt
   som seks. Hver type herunder skal føles anderledes i hånden, ikke bare se
   anderledes ud — derfor har de forskellige greb: stryg, drej, skru, pump,
   to tommelfingre, og for et par stykkers vedkommende hele telefonen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── vippe: STRYG håndtaget op eller ned ────────────────────────────────── */

.haandtag {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; cursor: grab;
}
/* Mærkaterne var 8 px svag orange på beige — ulæseligt på en telefon i et
   oplyst rum. Den AKTIVE ende er nu en mørk brik med lys tekst; den kan ikke
   forveksles, heller ikke på skrå og i fart. Fundet på skærmen. */
.haandtag-mrk {
  font-size: 10px; letter-spacing: .16em; font-weight: 800;
  color: #6f6a58; line-height: 1.5;
  padding: 1px 7px; border-radius: 3px;
  border: 1px solid transparent;
  transition: all .14s;
}
.haandtag-spor {
  position: relative; width: 34px; height: 56px; border-radius: 17px;
  background: linear-gradient(180deg, #22241d, #3a3c33);
  box-shadow: inset 0 2px 7px rgba(0,0,0,.8);
}
.haandtag-arm {
  position: absolute; left: 3px; right: 3px; height: 24px; border-radius: 12px;
  background: linear-gradient(180deg, #e6e9ec, #9aa0a6 52%, #62676d);
  box-shadow: 0 2px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.75);
  top: 29px;
  transition: top .16s cubic-bezier(.2,.9,.3,1.2);
}
.haandtag-arm::after {
  content: ''; position: absolute; left: 6px; right: 6px; top: 50%;
  height: 2px; transform: translateY(-50%);
  background: rgba(0,0,0,.35); border-radius: 1px;
  box-shadow: 0 4px 0 rgba(0,0,0,.2), 0 -4px 0 rgba(0,0,0,.2);
}
.haandtag.er-op .haandtag-arm { top: 3px; }
/* Den ende, armen står i, bliver en mørk brik med lys tekst. */
.haandtag.er-op .haandtag-mrk:first-child,
.haandtag:not(.er-op) .haandtag-mrk:last-child {
  background: #24261f;
  border-color: rgba(0,0,0,.5);
  color: var(--lcd);
  text-shadow: 0 0 8px rgba(141,240,78,.6);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}

/* ── drejeknap og skrue: DREJ i en cirkel ───────────────────────────────── */

.knop-hint {
  font-size: 7.5px; letter-spacing: .2em; font-weight: 800;
  color: #857f6b; text-align: center; line-height: 1;
}
.knop-drej, .knop-skrue { cursor: grab; touch-action: none; }
.knop.drejes { cursor: grabbing; transform: scale(1.06); }
.knop-drej { width: 64px; height: 64px; }

/* Riller på kanten, så det er tydeligt, at den skal drejes og ikke trykkes. */
.knop-riller {
  position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.28) 0deg 3deg, rgba(0,0,0,.30) 3deg 6deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px));
}

.knop-skrue {
  width: 58px; height: 58px;
  background: radial-gradient(circle at 34% 30%, #d7dade, #8e9298 58%, #5a5e63);
}
.skrue-gevind {
  position: absolute; inset: 5px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle,
    rgba(0,0,0,.20) 0 2px, rgba(255,255,255,.16) 2px 4px);
  opacity: .55;
}
/* Kærven — den drejer med fingeren, så man kan SE omgangene. */
.skrue-kaerv {
  position: absolute; left: 50%; top: 50%; width: 38px; height: 6px;
  transform-origin: 50% 50%; margin: -3px 0 0 -19px; border-radius: 2px;
  background: linear-gradient(180deg, #3d4147, #6b7076);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.35);
  pointer-events: none;
}
.skrue-maaler {
  width: 100%; max-width: 78px; height: 5px; border-radius: 3px;
  background: rgba(0,0,0,.5); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
.skrue-maaler i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--rav), var(--lcd));
  transition: width .06s linear;
}

/* ── pumpe: N hurtige tryk ──────────────────────────────────────────────── */

.pumpe-hylster { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.pumpe {
  width: 100%; max-width: 96px; height: 44px; border-radius: 22px / 16px;
  display: grid; place-items: center; cursor: pointer;
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  color: #3b3527;
  /* En bælg: rund top, flad bund — og den flader ud, når man trykker. */
  background: linear-gradient(180deg, #e2dccb, #b3a88d 60%, #8d8368);
  border: 1px solid rgba(0,0,0,.45);
  box-shadow: 0 4px 0 #6f664f, 0 7px 12px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.55);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  transition: transform .05s, box-shadow .05s;
}
.pumpe:active {
  transform: translateY(4px) scaleY(.82);
  box-shadow: 0 0 0 #6f664f, inset 0 3px 8px rgba(0,0,0,.4);
}
.pumpe-pips { display: flex; gap: 5px; }
.pumpe-pips i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(0,0,0,.34);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
  transition: background .1s, box-shadow .1s;
}
.pumpe-pips i.fyldt { background: var(--lcd); box-shadow: 0 0 8px rgba(141,240,78,.8); }

/* ── tohåndsbetjening ───────────────────────────────────────────────────── */

.tohaands { display: flex; gap: 10px; width: 100%; justify-content: center; }
.pude {
  width: 46px; height: 46px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; letter-spacing: .1em;
  color: #6f6a58;
  background: linear-gradient(180deg, #3c3f35, #24261f);
  border: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 3px 0 #16180f, inset 0 1px 0 rgba(255,255,255,.14);
  transition: all .07s;
}
.pude.nede {
  transform: translateY(3px);
  background: linear-gradient(180deg, #7fae5f, #4d7a34);
  color: #eaf5e2;
  box-shadow: 0 0 0 #16180f, inset 0 2px 6px rgba(0,0,0,.4), 0 0 14px rgba(141,240,78,.45);
}

/* ── ryst og vend: hele telefonen ───────────────────────────────────────── */

.telefon-kontrol {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 100%; padding: 6px 4px; border-radius: 8px;
  border: 1px dashed rgba(74,67,53,.5);
  background: rgba(255,255,255,.14);
  cursor: pointer; text-align: center;
}
.telefon-tegn { font-size: 22px; line-height: 1; color: #4a4335; }
.telefon-tegn.ryster { animation: smaaryst 1.8s ease-in-out infinite; }
@keyframes smaaryst {
  0%, 82%, 100% { transform: translateX(0) rotate(0); }
  86% { transform: translateX(-3px) rotate(-6deg); }
  90% { transform: translateX(3px) rotate(6deg); }
  94% { transform: translateX(-2px) rotate(-4deg); }
}
.telefon-tegn.vender { animation: langsomdrej 3.4s linear infinite; }
@keyframes langsomdrej { to { transform: rotate(360deg); } }
.telefon-mrk {
  font-size: 8.5px; letter-spacing: .14em; font-weight: 800;
  color: #4a4335; line-height: 1.15;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.telefon-kontrol.maerker {
  border-color: var(--lcd);
  background: rgba(141,240,78,.22);
  box-shadow: inset 0 0 16px rgba(141,240,78,.4);
}
/* Uden sensor er det en knap. Mærkaten siger det, så ingen står og ryster
   forgæves — en kontrol, der ikke kan betjenes, er værre end ingen kontrol. */
.telefon-kontrol.uden-sensor { border-style: solid; border-color: rgba(244,163,58,.55); }
.vend-skive {
  font-size: 26px; line-height: 1; color: #4a4335;
  cursor: grab; touch-action: none; user-select: none;
}
.vend-skive:active { cursor: grabbing; }

/* ── kvitteringen på displayet ──────────────────────────────────────────── */

.lcd-kvit-lag {
  position: absolute; inset: 3px; z-index: 3; border-radius: 4px;
  display: grid; place-items: center; pointer-events: none;
  font-family: var(--skrift-lcd); font-size: clamp(18px, 6vw, 30px);
  font-weight: 700; letter-spacing: .14em;
  background: rgba(10,18,8,.86);
  animation: kvitind 1.1s ease-out forwards;
}
.lcd-kvit-lag.ok   { color: var(--lcd);   text-shadow: 0 0 16px rgba(141,240,78,.7); }
.lcd-kvit-lag.fejl { color: var(--stase); text-shadow: 0 0 16px rgba(216,60,47,.7); }
@keyframes kvitind {
  0%   { opacity: 0; transform: scale(1.14); }
  14%  { opacity: 1; transform: scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── epikrisen på dødsskærmen ───────────────────────────────────────────── */

.epikrise {
  font-size: 13px; color: var(--rav); font-style: italic;
  margin: -12px 0 20px; line-height: 1.5;
}

/* ── hjælpearket ────────────────────────────────────────────────────────── */

.ark-under {
  font-size: 13px; letter-spacing: .14em; color: var(--rav);
  margin: 20px 0 8px; text-transform: uppercase;
}
.ark-brod { font-size: 13px; line-height: 1.6; color: #b3b8a4; }
.ark-brod strong { color: var(--plast-lys); }

/* ── vælgerens rastepositioner ──────────────────────────────────────────── */
/* Formen skal selv sige «hak», så den ikke forveksles med drejeknappen. */

.knop-vaelger { width: 58px; height: 58px; overflow: visible; }
.vaelger-prikker {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
}
.vaelger-prikker i {
  position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: rgba(60,54,40,.55);
  transform-origin: 50% 50%;
  transition: background .12s, box-shadow .12s;
}
.vaelger-prikker i.paa {
  background: var(--stase);
  box-shadow: 0 0 7px rgba(216,60,47,.9);
}

/* ═══════════════════════════════════════════════════════════════════════════
   KNAPFORMER FRA ORIGINALEN
   ───────────────────────────────────────────────────────────────────────────
   Segmentstribe, taltastatur, dobbeltknap og lodret skyder — de former
   Spaceteam har, og som den første udgave manglede. Fælles for dem: man SIGTER
   efter en bestemt flade i stedet for at trykke på «kontrollen».
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── membranknap med et verbum ──────────────────────────────────────────── */
/* Verbet er det, ordren siger — derfor står det på knappen og ikke «TRYK». */

.membran { padding: 0 8px; line-height: 1.1; text-align: center; }
.membran.lang { font-size: 9px; letter-spacing: .08em; }

/* ── segmentstribe ──────────────────────────────────────────────────────── */

.segment {
  display: flex; width: 100%; max-width: 132px;
  border-radius: 5px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.5);
  background: linear-gradient(180deg, #22241d, #33352c);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7);
}
.segment-flade {
  flex: 1; min-width: 0;
  padding: 11px 2px; cursor: pointer;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  color: #6c7161;
  border-right: 1px solid rgba(0,0,0,.45);
  text-align: center; line-height: 1.05;
  overflow: hidden; text-overflow: ellipsis;
  transition: all .1s;
}
.segment.mange .segment-flade { font-size: 8.5px; padding: 11px 1px; }
.segment-flade:last-child { border-right: none; }
.segment-flade.aktiv {
  background: linear-gradient(180deg, #d94a3c, #9e2b21);
  color: #fff3ef;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 12px rgba(216,60,47,.4);
}
.segment-flade:active { transform: translateY(1px); }

/* ── taltastatur ────────────────────────────────────────────────────────── */

.tastatur {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  width: 100%; max-width: 116px;
  padding: 4px; border-radius: 5px;
  background: linear-gradient(180deg, #1c1e18, #2c2e25);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7);
}
.tast {
  aspect-ratio: 1.25; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 3px;
  font-family: var(--skrift-lcd); font-size: 13px; font-weight: 700;
  color: #cfd3c2;
  background: linear-gradient(180deg, #4a4d41, #33362c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 0 rgba(0,0,0,.5);
  transition: all .08s;
}
.tast:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }
.tast.aktiv {
  background: linear-gradient(180deg, #d94a3c, #9e2b21);
  color: #fff3ef;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 10px rgba(216,60,47,.5);
}

/* ── dobbeltknap ────────────────────────────────────────────────────────── */

.dobbeltknap {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; max-width: 116px;
}
.dobbelt-knap {
  padding: 10px 4px; cursor: pointer; border-radius: 4px;
  border: 1px solid rgba(0,0,0,.5);
  font-size: 9px; font-weight: 800; letter-spacing: .1em;
  color: #fff3ef;
  background: linear-gradient(180deg, #c9463a, #8e271e);
  box-shadow: 0 2px 0 #6a1c15, inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  transition: all .07s;
}
.dobbelt-knap:nth-child(2) {
  background: linear-gradient(180deg, #4d7a34, #2f5220);
  box-shadow: 0 2px 0 #233d18, inset 0 1px 0 rgba(255,255,255,.24);
}
.dobbelt-knap:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0,0,0,.45); }
/* Den sidst trykkede får en tynd lys kant — et apparat husker, hvad man gjorde. */
.dobbelt-knap.sidst { outline: 1px solid rgba(255,255,255,.55); outline-offset: -3px; }

/* ── lodret skyder ──────────────────────────────────────────────────────── */

.skyder-hylster.lodret {
  flex-direction: column-reverse; gap: 6px; width: auto;
}
.skyder.lodret {
  flex: none; width: 34px; height: 76px;
  display: flex; justify-content: center;
}
.skyder.lodret .skyder-spor {
  left: 50%; right: auto; transform: translateX(-50%);
  top: 0; bottom: 0; height: auto; width: 9px;
}
.skyder.lodret .skyder-tak {
  flex-direction: column-reverse; justify-content: space-between;
  align-items: flex-start; height: 100%; width: 100%; padding: 2px 0;
}
.skyder.lodret .skyder-tak i { width: 6px; height: 1px; }
.skyder.lodret .skyder-knop {
  left: 50%; width: 30px; height: 20px;
  transform: translate(-50%, 50%);
  transition: bottom .1s ease-out;
}
.skyder.lodret.traekkes .skyder-knop { transition: none; transform: translate(-50%, 50%) scale(1.08); }
.skyder.lodret .skyder-knop::after { left: 5px; right: 5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SPÆNDINGEN
   ───────────────────────────────────────────────────────────────────────────
   Alt herunder hænger på ét tal: patientens stabilitet. app.js sætter to
   variable på spilleskærmen — `--spaending` (0 fin, 1 forbi) og `--puls`
   (sekunder pr. hjerteslag) — og resten følger af dem.

   ⚠ `--puls` er UDLEDT AF SAMME bpm som monitorbippet i lyd.js. Vignetten og
     lyden skal være den samme puls, ikke to ting der tilfældigvis begge
     bevæger sig. To visninger af samme tal skal komme fra samme beregning.
   ═══════════════════════════════════════════════════════════════════════════ */

.skaerm-spil { --spaending: 0; --puls: 0.97s; }

.spaendingslag {
  position: absolute; inset: 0; z-index: 16; pointer-events: none;
  opacity: var(--spaending);
  background:
    radial-gradient(ellipse 130% 100% at 50% 50%,
      transparent 32%,
      rgba(216,60,47,.30) 72%,
      rgba(216,60,47,.72) 100%);
  animation: hjerteslag var(--puls) ease-in-out infinite;
  will-change: opacity, transform;
}
/* Vignetten trækker sig sammen ved hvert slag. Ved lav spænding er den
   usynlig alligevel, så animationen koster intet dér. */
@keyframes hjerteslag {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  8%       { transform: scale(1.035); filter: brightness(1.45); }
  22%      { transform: scale(1);    filter: brightness(1); }
}

/* Under 45: monitorens tal og EKG'et er ikke længere nok — hele rammen ånder. */
.skaerm-spil.presset .bjaelke,
.skaerm-spil.presset .monitor {
  box-shadow: inset 0 0 0 1px rgba(216,60,47, calc(var(--spaending) * .55));
}

/* Under 20: displayet begynder at svigte, og kanterne blinker med pulsen. */
.skaerm-spil.kritisk .lcd-indhold { animation: lcdsvigt 2.3s steps(1, end) infinite; }
@keyframes lcdsvigt {
  0%, 92%, 100% { opacity: 1; }
  93%           { opacity: .55; }
  95%           { opacity: 1; }
  96%           { opacity: .35; }
  97%           { opacity: 1; }
}
.skaerm-spil.kritisk .panel {
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.35),
    0 0 0 2px rgba(216,60,47,.8),
    0 0 26px rgba(216,60,47,.5);
  animation: kantpuls var(--puls) ease-in-out infinite;
}
@keyframes kantpuls {
  0%, 100% { outline-color: rgba(216,60,47,.25); }
  10%      { outline-color: rgba(216,60,47,.95); }
}
.skaerm-spil.kritisk .niveau-navn { color: var(--stase); }

/* Stødet ved en misset ordre. Kort og hårdt — man skal kigge op, ikke tabe
   det tryk, man var i gang med. */
.skaerm-spil.stoed { animation: stoed .4s cubic-bezier(.36,.07,.19,.97); }
@keyframes stoed {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-7px, 3px) rotate(-.35deg); }
  26%  { transform: translate(6px, -3px) rotate(.3deg); }
  42%  { transform: translate(-4px, 2px) rotate(-.18deg); }
  60%  { transform: translate(3px, -1px); }
  78%  { transform: translate(-2px, 1px); }
  100% { transform: translate(0, 0); }
}

/* Reduceret bevægelse: spændingen må gerne FARVE, men ikke banke. */
@media (prefers-reduced-motion: reduce) {
  .spaendingslag { animation: none; }
  .skaerm-spil.kritisk .panel,
  .skaerm-spil.kritisk .lcd-indhold,
  .skaerm-spil.stoed { animation: none; }
}

/* ── sammensatte ordrer ─────────────────────────────────────────────────── */
/* To led i én ordre. Fluebenet er ikke pynt: uden det råber man begge
   halvdele igen, når den ene allerede sad — og dét koster hele fristen. */

.ordre-led { display: flex; align-items: flex-start; gap: 7px; }
.ordre.sammensat .ordre-led + .ordre-led { margin-top: 5px; }
.ordre.sammensat .ordre-tekst { font-size: clamp(14px, 4.2vw, 20px); }

.ordre-flueben {
  flex: none; font-size: 15px; line-height: 1.15;
  color: var(--lcd-svag);
  font-family: var(--skrift-lcd);
}
.ordre-led.klaret .ordre-flueben { color: var(--lcd); text-shadow: 0 0 9px rgba(141,240,78,.8); }
.ordre-led.klaret .ordre-tekst {
  opacity: .42;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* ── patientens skæbne på udfaldsskærmen ────────────────────────────────── */

.skaebne {
  font-size: 15px; line-height: 1.5; color: var(--plast-lys);
  margin: 12px 0 6px;
}

/* ── vikaren ────────────────────────────────────────────────────────────── */
/* Den simulerede makker. Dens ordrer skal se anderledes ud end dine egne —
   ellers ved man ikke, om man skal UDFØRE eller LÆSE HØJT. */

.vikar-knap { display: block; margin: 0 auto 14px; }

.ordre.fra-makker {
  border-left: 3px solid var(--rav);
  padding-left: 9px;
  margin-left: -2px;
}
.ordre.fra-makker .ordre-tekst {
  color: var(--rav);
  text-shadow: 0 0 9px rgba(244,163,58,.5);
}
.ordre.fra-makker .ordre-bar i { background: var(--rav); box-shadow: 0 0 8px rgba(244,163,58,.7); }
.makker-mrk {
  font-size: 8px; letter-spacing: .26em; font-weight: 800;
  color: var(--rav); opacity: .72; margin-top: 3px;
}

/* Vikaren i holdlisten */
.holdliste li.er-vikar { border-style: dashed; opacity: .82; }
.holdliste li.er-vikar .prik { background: var(--rav); box-shadow: 0 0 8px var(--rav); }

/* ═══════════════════════════════════════════════════════════════════════════
   iOS: dobbelttryk-zoom
   ───────────────────────────────────────────────────────────────────────────
   ⚠ `user-scalable=no` i viewport-metaen VIRKER IKKE i Safari. Apple har
   ignoreret det siden iOS 10 af tilgængelighedshensyn, og det står stadig i
   <head> udelukkende for de browsere, der respekterer det.

   Den løsning, der faktisk virker, er `touch-action`. `manipulation` betyder
   «kun panorering og knib» — altså: dobbelttryk-zoom slået fra, scroll bevaret.

   Det betyder mere her end i de fleste apps: `pumpe`-kontrollen kræver 3–5
   hurtige tryk på SAMME sted, og det er nøjagtig den bevægelse, iOS ellers
   læser som «zoom ind». Uden dette ville hver eneste pumpe-ordre sprænge
   layoutet på en iPhone.
   ═══════════════════════════════════════════════════════════════════════════ */

html, body { touch-action: manipulation; }

/* Spilleskærmen scroller aldrig. Dér slås ALT fra — også knib — så et par
   ivrige tommelfingre ikke kan flytte eller skalere panelet midt i en vagt. */
.skaerm-spil { touch-action: none; }

/* Knapper og kontroller: aldrig dobbelttryk-zoom, aldrig tekstmarkering. */
.knap, .lille-link, .taster button, .membran, .pumpe, .pude, .tast,
.segment-flade, .dobbelt-knap, .vippe, .vippe-halv, .haandtag, .holde,
.knop, .skyder, .telefon-kontrol, .opkald-afvis {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* intet «kopiér/slå op»-panel ved langt tryk */
}

/* …men hjælpearket SKAL kunne scrolles, ellers kan man ikke læse det på en
   lille skærm. Her er lodret panorering det eneste tilladte. */
.ark { touch-action: pan-y; }
.ark-kort { touch-action: pan-y; }

/* ═══════════════════════════════════════════════════════════════════════════
   SVIGT — panelet falder fra hinanden
   ───────────────────────────────────────────────────────────────────────────
   Som i originalen, hvor panelet knækker op, mens ordrerne bliver ved med at
   komme. Modulet vrider sig ud af sin plads, går mørkt, og laget ovenpå
   sluger alle tryk — man kan ikke snyde sig til knappen nedenunder.
   ═══════════════════════════════════════════════════════════════════════════ */

.svigtlag {
  position: absolute; inset: 0; z-index: 4;
  display: none;
  place-items: center; align-content: center; gap: 3px;
  border-radius: inherit;
  cursor: pointer;
  touch-action: none;
  text-align: center;
  background:
    repeating-linear-gradient(112deg,
      rgba(0,0,0,.82) 0 7px, rgba(20,8,6,.9) 7px 14px);
  box-shadow: inset 0 0 0 2px rgba(216,60,47,.75);
}
.modul.svigtet .svigtlag { display: grid; }

/* Modulet vrider sig ud af sin plads og bliver koldt. */
.modul.svigtet {
  transform: rotate(-1.4deg) translateY(2px) scale(.985);
  filter: saturate(.25) brightness(.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 6px 14px rgba(0,0,0,.6),
    0 0 20px rgba(216,60,47,.35);
  animation: svigtryk .5s cubic-bezier(.36,.07,.19,.97);
}
.modul.svigtet:nth-child(2n) { transform: rotate(1.7deg) translateY(3px) scale(.985); }
.modul.svigtet:nth-child(3n) { transform: rotate(-2.1deg) translateX(-2px) scale(.98); }

@keyframes svigtryk {
  0%   { transform: translate(0,0) rotate(0); filter: brightness(2.4) saturate(0); }
  10%  { transform: translate(5px,-3px) rotate(2deg); filter: brightness(.3); }
  24%  { transform: translate(-4px,2px) rotate(-1.6deg); filter: brightness(1.8); }
  44%  { transform: translate(2px,1px) rotate(.8deg); }
  100% { transform: rotate(-1.4deg) translateY(2px) scale(.985); filter: saturate(.25) brightness(.62); }
}

/* ⚠ Kontrast. Første forsøg var mørkerødt på mørke striber og var praktisk
   talt ulæseligt — en advarsel, man ikke kan læse, er ikke en advarsel. Nu
   står ordet i lys tekst på en mættet rød brik, så det kan ses på skrå, i
   fart og i et oplyst rum. Fundet ved at zoome ind på et skærmbillede. */
.svigt-mrk {
  font-family: var(--skrift-lcd);
  font-size: 13px; font-weight: 700; letter-spacing: .26em;
  color: #fff2ef;
  background: var(--stase);
  padding: 2px 10px 3px; border-radius: 3px;
  box-shadow: 0 0 18px rgba(216,60,47,.85), inset 0 1px 0 rgba(255,255,255,.35);
  animation: svigtblink 1.1s steps(2, end) infinite;
}
@keyframes svigtblink { 50% { opacity: .5; } }

.svigt-hint {
  font-size: 8px; letter-spacing: .14em; font-weight: 800;
  color: #ede4d2; line-height: 1.25; max-width: 94%;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  margin-top: 4px;
}

/* Og selve laget må være mørkere, så den røde brik har noget at stå på. */
.svigtlag {
  background:
    repeating-linear-gradient(112deg,
      rgba(0,0,0,.90) 0 7px, rgba(26,9,6,.94) 7px 14px);
}
/* Navnet på et dødt modul skal stadig kunne læses — det er dét, den anden
   råber efter. */
.modul.svigtet .modul-navn {
  position: relative; z-index: 5;
  color: #ede4d2;
  text-shadow: 0 1px 3px rgba(0,0,0,.95);
}

/* Genstartsringen — samme sprog som holdeknappen, så greb og betydning
   hænger sammen: et langt tryk gør noget, der tager tid. */
.svigt-ring {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(216,60,47,.35);
  background: conic-gradient(var(--stase) var(--fyld, 0%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  margin-bottom: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .modul.svigtet { animation: none; }
  .svigt-mrk { animation: none; }
}

/* ── sidste chance ──────────────────────────────────────────────────────── */
/* Ét forsøg, dobbelt tid, ingen andre ordrer. Skærmen skal sige det uden ord:
   alting trækker sig sammen om den ene linje, der er tilbage. */

.skaerm-spil.sidste-chance .panel { filter: saturate(.4) brightness(.72); }
.skaerm-spil.sidste-chance .lcd {
  box-shadow:
    0 0 0 3px var(--stase),
    0 0 40px rgba(216,60,47,.65),
    inset 0 1px 0 rgba(255,255,255,.14);
  animation: sidstepuls 1.2s ease-in-out infinite;
}
@keyframes sidstepuls {
  0%, 100% { box-shadow: 0 0 0 3px rgba(216,60,47,.55), 0 0 26px rgba(216,60,47,.4); }
  50%      { box-shadow: 0 0 0 3px var(--stase), 0 0 48px rgba(216,60,47,.8); }
}
.skaerm-spil.sidste-chance .lcd-indhold::before {
  content: 'SIDSTE CHANCE';
  position: absolute; top: 4px; left: 0; right: 0;
  text-align: center;
  font-size: 9px; letter-spacing: .34em; font-weight: 800;
  color: var(--stase);
  text-shadow: 0 0 10px rgba(216,60,47,.8);
}
.skaerm-spil.sidste-chance .lcd-indhold { padding-top: 20px; }
/* Vignetten holder op med at banke — der er ikke mere at stresse med. */
.skaerm-spil.sidste-chance .spaendingslag { animation: none; opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .skaerm-spil.sidste-chance .lcd { animation: none; }
}

/* ── sladderen ──────────────────────────────────────────────────────────── */
/* Noget, der IKKE er en ordre. Den skal kunne ignoreres — derfor står den
   uden for displayet, i et andet tonefald, og uden nedtælling. */

.sladder {
  margin: 0 12px 6px;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px; font-style: italic; letter-spacing: .04em;
  color: #9aa08c;
  background: rgba(255,255,255,.045);
  border-left: 2px solid rgba(255,255,255,.16);
  animation: sladderind 5.2s ease-out forwards;
  pointer-events: none;
}
@keyframes sladderind {
  0%   { opacity: 0; transform: translateX(-8px); }
  8%   { opacity: 1; transform: translateX(0); }
  84%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SLID — vagten sætter sig i panelet
   ───────────────────────────────────────────────────────────────────────────
   Panelet så ens ud på niveau 1 og niveau 7. Nu akkumulerer det: blodstænk,
   mere autoklavetape, håndskrevne sedler, en beskidtere skærm. Alt er CSS —
   ingen nye billeder — og det nulstilles ved ny vagt, fordi `slid` udledes af
   niveaunummeret på serveren.
   ═══════════════════════════════════════════════════════════════════════════ */

.panel { position: relative; }
.panel::before,
.panel::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease-in;
}

/* ::before = væsker. Blod og sekret, tørret ind i overfladen. */
.panel::before {
  background:
    radial-gradient(ellipse 26px 9px at 18% 12%, rgba(104,20,14,.62), transparent 70%),
    radial-gradient(ellipse 10px 14px at 24% 19%, rgba(116,24,16,.5), transparent 70%),
    radial-gradient(ellipse 38px 12px at 71% 63%, rgba(96,18,12,.5), transparent 72%),
    radial-gradient(ellipse 8px 8px at 63% 70%, rgba(120,26,18,.55), transparent 70%),
    radial-gradient(ellipse 52px 16px at 44% 88%, rgba(88,16,11,.42), transparent 74%),
    radial-gradient(ellipse 14px 20px at 88% 31%, rgba(110,22,15,.46), transparent 72%);
  mix-blend-mode: multiply;
}

/* ::after = papir. Tape og sedler, sat på i en fart. */
.panel::after {
  background:
    linear-gradient(103deg, transparent 12%, rgba(206,178,106,.34) 12%, rgba(206,178,106,.34) 16%, transparent 16%),
    linear-gradient(-97deg, transparent 62%, rgba(198,170,100,.3) 62%, rgba(198,170,100,.3) 65%, transparent 65%),
    linear-gradient(88deg, transparent 78%, rgba(224,216,190,.42) 78%, rgba(224,216,190,.42) 87%, transparent 87%);
}

.panel[data-slid="1"]::before { opacity: .42; }
.panel[data-slid="2"]::before { opacity: .72; }
.panel[data-slid="3"]::before { opacity: 1; }

.panel[data-slid="2"]::after { opacity: .55; }
.panel[data-slid="3"]::after { opacity: .9; }

/* Og skærmen bliver beskidtere. Fedtede fingeraftryk i hjørnerne. */
.panel[data-slid="2"] ~ .monitor .ekg,
.panel[data-slid="3"] ~ .monitor .ekg { filter: contrast(.9) brightness(.94); }

.skaerm-spil .lcd-skin { transition: opacity .8s; }
.panel[data-slid="3"] ~ .monitor { box-shadow: inset 0 2px 12px rgba(0,0,0,.5); }

@media (prefers-reduced-motion: reduce) {
  .panel::before, .panel::after { transition: none; }
}

/* ── synkronordrer ──────────────────────────────────────────────────────── */
/* Den eneste ordre, ALLE ser på én gang. Den skal se helt anderledes ud end
   de andre, for den kræver noget andet: ikke at man råber, men at man TÆLLER
   NED sammen. */

.ordre.synkron {
  border: 2px solid var(--rav);
  border-radius: 5px;
  padding: 7px 9px;
  background: rgba(244,163,58,.09);
  animation: synkronpuls .85s ease-in-out infinite;
}
@keyframes synkronpuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,163,58,.45); }
  50%      { box-shadow: 0 0 22px 2px rgba(244,163,58,.55); }
}
.synkron-mrk {
  font-size: 9px; letter-spacing: .3em; font-weight: 800;
  color: var(--rav); text-align: center; margin-bottom: 6px;
}
.ordre.synkron .ordre-tekst {
  color: var(--rav);
  text-shadow: 0 0 10px rgba(244,163,58,.55);
  font-size: clamp(15px, 4.6vw, 22px);
}
.synkron-led { align-items: center; gap: 8px; }
.synkron-ejer {
  flex: none; width: 34px; text-align: center;
  font-size: 8px; letter-spacing: .12em; font-weight: 800;
  padding: 2px 0; border-radius: 3px;
  background: rgba(255,255,255,.1); color: #8a8f7d;
}
.synkron-led.mit .synkron-ejer { background: var(--rav); color: #24261f; }
.synkron-led.mit .ordre-tekst { text-decoration: underline; text-underline-offset: 4px; }
.synkron-led.klaret .ordre-tekst { opacity: .45; text-decoration: none; }
.synkron-led.klaret .synkron-ejer { background: var(--lcd); color: #14200c; }

@media (prefers-reduced-motion: reduce) {
  .ordre.synkron { animation: none; }
}

/* ── den guidede vagt ───────────────────────────────────────────────────── */
/* Uret er på pause. Vejledningen står under ordren i et andet tonefald, så
   man kan se, at DET er forklaringen og ikke en del af ordren. */

.vejledning {
  margin-top: 7px;
  font-size: 11px; line-height: 1.45; font-style: italic;
  letter-spacing: .02em;
  color: var(--lcd-svag);
  border-top: 1px dashed rgba(141,240,78,.22);
  padding-top: 6px;
}

/* ── vagttyper og journal ───────────────────────────────────────────────── */

.vagttyper { margin: 18px 0 14px; }
.vagttype-raekke {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
  margin-bottom: 8px;
}
.vagttype {
  padding: 9px 3px; cursor: pointer; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #8a8f7d;
  font-size: 9px; font-weight: 800; letter-spacing: .1em;
  transition: all .12s;
}
.vagttype.valgt {
  background: linear-gradient(180deg, var(--plast-lys), var(--plast-moerk));
  color: #3c3628;
  border-color: rgba(0,0,0,.4);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.vagttype-tekst {
  font-size: 11px; font-style: italic; color: #878c79;
  min-height: 2.6em; line-height: 1.35;
}

.journal {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin: 18px 0 4px;
}
.journal > div {
  padding: 8px 4px; border-radius: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}
.journal dt { font-size: 8px; letter-spacing: .16em; color: #6f7462; margin-bottom: 3px; }
.journal dd { font-family: var(--skrift-lcd); font-size: 15px; font-weight: 700; color: var(--lcd-svag); }