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