/* Fly simulationen (matrix.js). Grönt på svart som i matrix, med ett eget typsnitt som en gammal terminal. */
:root { --matrix: #00ff41; --matrix-ljus: #d4ffdc; --matrix-mono: "Courier New", ui-monospace, Menlo, Consolas, monospace;
  --matrix-text: "Share Tech Mono", "Courier New", ui-monospace, Menlo, Consolas, monospace; }
/* Typsnittet i Matrix-texterna (matrixtext.js), i repot, så att inget hämtas utifrån. SIL OFL 1.1, se font/OFL.txt. */
@font-face { font-family: "Share Tech Mono"; src: url("font/ShareTechMono-Regular.ttf") format("truetype"); font-display: swap; }

/* ---- Matrix-texterna (matrixtext.js) ------------------------------------------------------------
   Varje tecken är en ruta: bokstaven (.mt-c) syns inte förrän övergången, och ::before visar en etta eller nolla som
   byts. Ettorna tänds från vänster (--d), och vid övergången tonar ettan bort uppåt medan bokstaven blixtrar fram i
   den ordning --d säger. Ett ord är en rad som aldrig bryts. */
.mt-ord { display: inline-block; white-space: nowrap; }
.mt-t { position: relative; display: inline-block; }
.mt-c { display: inline-block; opacity: 0; }
.mt-t::before {
  content: attr(data-b); position: absolute; left: 0; right: 0; top: 0; text-align: center; pointer-events: none;
  color: var(--mt-bit, var(--matrix)); text-shadow: 0 0 .35em var(--mt-bit, var(--matrix)), 0 0 .08em #fff; opacity: 0;
  transition: opacity .1s linear var(--d, 0ms), transform .3s ease-in var(--d, 0ms), filter .3s ease-in var(--d, 0ms);
}
.mt-binar .mt-t::before { opacity: 1; }
.mt-t.av::before { opacity: 0; transform: translateY(-.3em) scale(.55); filter: blur(2px); transition-duration: .3s; }
.mt-t.av .mt-c { opacity: 1; animation: mt-av .42s cubic-bezier(.2, .7, .3, 1) var(--d, 0ms) backwards; }
/* Bokstaven: suddig och vit först, sedan skarp i sin färg (100 % är bokstavens egen stil). */
@keyframes mt-av {
  0% { opacity: 0; filter: blur(5px) brightness(3); transform: scale(1.3); }
  35% { opacity: 1; filter: blur(1.5px) brightness(2.2); transform: scale(1.06); }
}

/* Meningen i skeppsspelet och övergångarna (Utrop): stor, en i taget, utan ruta. Färgen är --mt-farg, och bokstäverna
   är en ljus ton av den med glöd i den och en mörk kant mot spelet bakom. Ett mörkt sken bakom gör den läsbar ovanpå
   graferna. */
.mt-utrop {
  --mt-farg: var(--matrix); --mt-bit: var(--mt-farg);
  position: absolute; z-index: 4; left: 50%; top: 42%; transform: translate(-50%, -50%); width: max-content; max-width: min(92vw, 960px);
  display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; text-align: center; visibility: hidden;
  font: 400 clamp(26px, 4.3vw, 54px)/1.12 var(--matrix-text); letter-spacing: .02em;
  color: color-mix(in srgb, var(--mt-farg) 28%, #fff);
  text-shadow: 0 0 .32em color-mix(in srgb, var(--mt-farg) 85%, transparent), 0 0 .05em #000, 0 .06em .12em #000;
}
.mt-utrop::before { content: ""; position: absolute; z-index: -1; inset: -.5em -1.2em; background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, .35) 60%, transparent); }
.mt-utrop.syns { visibility: visible; animation: mt-in .32s steps(1, end) both; }
.mt-utrop.ut { animation: mt-ut .3s steps(1, end) both; }
.mt-utrop b { font-weight: 400; }
/* Rubriken över meningen (till exempel SUPERKRAFT) är stor och lyser i meningens färg, så att den läses direkt
   (Rickard 25/10: "Den texten ska bli mycket större. Så att man ser att det är en superkraft"). Linjerna på sidorna
   gör den till en rubrik. Linjen till höger tar tillbaka luften efter sista bokstaven, så att texten står mitt över. */
.mt-utrop .mt-etikett, .matrix-kraft .mt-etikett {
  display: flex; align-items: center; gap: .55em;
  font-size: clamp(22px, 3vw, 40px); line-height: 1.05; letter-spacing: .22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--mt-farg) 55%, #fff);
  text-shadow: 0 0 .45em var(--mt-farg), 0 0 .08em #fff, 0 .06em .12em #000;
}
:is(.mt-utrop, .matrix-kraft) .mt-etikett::before, :is(.mt-utrop, .matrix-kraft) .mt-etikett::after {
  content: ""; width: 1.4em; height: .1em; flex: none; border-radius: 1px; background: var(--mt-farg); box-shadow: 0 0 .4em var(--mt-farg);
}
:is(.mt-utrop, .matrix-kraft) .mt-etikett::before { background: linear-gradient(90deg, transparent, var(--mt-farg)); }
:is(.mt-utrop, .matrix-kraft) .mt-etikett::after { margin-left: -.22em; background: linear-gradient(90deg, var(--mt-farg), transparent); }
/* En lång rubrik (kontrollerna vid start, matrixtext.js) är mindre, så att den står på en rad. */
.mt-utrop.lang-etikett .mt-etikett { font-size: clamp(15px, 1.9vw, 25px); letter-spacing: .16em; }
.mt-utrop.lang-etikett .mt-etikett::after { margin-left: -.16em; }
/* Smalt fönster: linjerna tar för mycket plats. */
@media (max-width: 600px) { :is(.mt-utrop, .matrix-kraft) .mt-etikett::before, :is(.mt-utrop, .matrix-kraft) .mt-etikett::after { display: none; } }
.mt-utrop .mt-under { font-size: clamp(16px, 2vw, 25px); letter-spacing: .03em; color: color-mix(in srgb, var(--mt-farg) 40%, #fff); }
.mt-utrop :empty { display: none; }
.mt-utrop.stor { font-size: clamp(34px, 8vw, 84px); }
@keyframes mt-in {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); }
  30% { opacity: 1; clip-path: inset(0 0 58% 0); translate: -6px 0; }
  55% { clip-path: inset(36% 0 12% 0); translate: 5px 0; }
  80%, 100% { opacity: 1; clip-path: none; translate: 0 0; }
}
@keyframes mt-ut {
  0% { opacity: 1; }
  25% { clip-path: inset(10% 0 50% 0); translate: 8px 0; opacity: .85; }
  55% { clip-path: inset(48% 0 14% 0); translate: -10px 0; opacity: .5; }
  80% { clip-path: inset(70% 0 6% 0); translate: 12px 0; opacity: .25; }
  100% { opacity: 0; visibility: hidden; }
}
/* Raderna i glitchen före banan (glitch i matrix.js), stora och mitt på, som en terminal. */
.mt-rader {
  position: absolute; z-index: 4; left: 50%; top: 44%; transform: translate(-50%, -50%); width: max-content; max-width: 92vw; pointer-events: none;
  display: grid; gap: .32em; font: 400 clamp(20px, 3.4vw, 42px)/1.15 var(--matrix-text); color: #eaffef;
  text-shadow: 0 0 .35em var(--matrix), 0 0 .05em #000;
}
.mt-rader.ut { animation: mt-ut .35s steps(1, end) both; }

/* ---- Knappen i sidhuvudet ----------------------------------------------------------------
   Utan bild: en svart knapp med grön neon, linjer som i en gammal skärm, ett ljus som sveper över och en
   glitch då och då. Med bilden ur ChatGPT (figur/fly-knapp.webp) syns bara bilden, som glöder. */
.fly-knapp {
  position: relative; z-index: 10010; height: 30px; padding: 0 12px; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(0, 255, 65, .75); background: #020a04; color: var(--matrix);
  font: 700 11px/1 var(--matrix-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 0 6px rgba(0, 255, 65, .85);
  animation: fly-glod 2.6s ease-in-out infinite, fly-glitch 7s steps(1) infinite;
  transition: transform .4s var(--fjader);
}
.fly-knapp::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 255, 65, .09) 0 1px, transparent 1px 3px); }
.fly-knapp::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(180, 255, 200, .35), transparent); animation: fly-svep 3.2s ease-in-out infinite;
}
.fly-knapp:hover { transform: scale(1.06); }
.fly-knapp:active { transform: scale(.94); }
.fly-knapp:focus-visible { outline: 2px solid var(--matrix); outline-offset: 2px; }
/* Med bilden: bilden ger ramen, och sifferregnet (canvas.fly-regn, matrix.js) täcker pillret innanför den. Glöden
   pulserar i canvasen, så inget filter räknas om varje bildruta (Rickard 21/10: "optimera så det inte laggar"). */
.fly-knapp.med-bild { height: 32px; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; animation: fly-glitch 7s steps(1) infinite; }
.fly-knapp.med-bild img { filter: drop-shadow(0 0 4px rgba(0, 255, 65, .45)); }
/* Fokus med bilden: en starkare glöd längs bildens egen ram, ingen rektangel runt den (Rickard 25/10: "någon grön
   rektangel runt om den knappen. Det blir lite dubbelt"). Esc i portalen och slutet av Fly ger knappen fokus efter en
   tangent, så fokusringen syntes efter dem tills man klickade någon annanstans. */
.fly-knapp.med-bild:focus-visible { outline: none; }
.fly-knapp.med-bild:focus-visible img { filter: drop-shadow(0 0 2px var(--matrix-ljus)) drop-shadow(0 0 8px var(--matrix)); }
.fly-regn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
/* Låst tills guiden är klar: platsen står kvar, så att sidhuvudet inte hoppar när knappen tänds. */
.fly-knapp.last { visibility: hidden; opacity: 0; pointer-events: none; animation: none; }
/* Knappen tänds som en gammal skärm: en ljus linje som växer på bredden, sedan på höjden, flimrar och sätter sig. */
.fly-knapp.tands { animation: fly-tands 1.7s cubic-bezier(.2, .8, .3, 1) both, fly-glitch 7s steps(1) 1.7s infinite; }
@keyframes fly-tands {
  0% { opacity: 0; transform: scale(.03, .05); filter: brightness(4); }
  22% { opacity: 1; transform: scale(1.04, .05); filter: brightness(4); }
  40% { transform: scale(1, 1.18); filter: brightness(2); }
  50% { transform: scale(1); filter: brightness(1.4); }
  56% { opacity: .25; } 60% { opacity: 1; } 66% { opacity: .5; translate: -3px 0; } 70% { opacity: 1; translate: 2px 0; }
  76% { translate: 0 0; filter: brightness(1.6); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}
.fly-knapp.med-bild::before, .fly-knapp.med-bild::after { display: none; }
.fly-knapp.med-bild img { display: block; height: 100%; width: auto; }
.fly-knapp.med-bild .fly-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@keyframes fly-glod { 0%, 100% { box-shadow: 0 0 8px rgba(0, 255, 65, .35), inset 0 0 10px rgba(0, 255, 65, .12); } 50% { box-shadow: 0 0 18px rgba(0, 255, 65, .7), inset 0 0 14px rgba(0, 255, 65, .25); } }
@keyframes fly-svep { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes fly-glitch { 0%, 91%, 93.5%, 96%, 100% { translate: 0 0; } 92% { translate: -2px 1px; } 94% { translate: 2px -1px; } 95% { translate: -1px 0; } }

/* ---- Sidan medan matrix pågår ----------------------------------------------------------
   Sidan dras in mot hålet, försvinner när vi flyger in och vaknar suddig och ljus efteråt. Newton och hans
   bubbla får bara filtret, för deras egen opacitet säger om de syns. */
body.matrix-pa > :is(.topp, .ggb-ram) { transition: transform 1.7s cubic-bezier(.55, 0, .9, .4), filter 1.7s ease-in, opacity .6s; }
body.matrix-sugs > :is(.topp, .ggb-ram) { transform: scale(.93); filter: blur(1.5px) brightness(.55) saturate(.5); }
body.matrix-sugs > :is(.newton, .newton-bubbla, .ljus-hal, .pekpinne) { filter: blur(1.5px) brightness(.55); }
body.matrix-borta > :is(.topp, .ggb-ram) { opacity: 0; }
body.matrix-borta > :is(.newton, .newton-bubbla, .ljus-hal, .pekpinne) { visibility: hidden; }
body.matrix-vaknar > :is(.topp, .ggb-ram) { animation: matrix-vakna 2.6s ease-out both; }
body.matrix-vaknar > :is(.newton, .newton-bubbla, .ljus-hal, .pekpinne) { animation: matrix-vakna-filter 2.6s ease-out both; }
@keyframes matrix-vakna { from { filter: blur(16px) brightness(1.7) saturate(.3); opacity: .15; transform: scale(1.03); } 55% { opacity: 1; } to { filter: none; opacity: 1; transform: none; } }
@keyframes matrix-vakna-filter { from { filter: blur(16px) brightness(1.7) saturate(.3); } to { filter: none; } }

/* ---- Lagret -------------------------------------------------------------------------- */
.matrix { position: fixed; inset: 0; z-index: 20000; touch-action: none; user-select: none; -webkit-user-select: none; font-family: var(--matrix-mono); color: var(--matrix); }
.matrix.svart { background: #000; }
/* Linjerna som på en gammal skärm, över allt när det väl blivit svart. */
.matrix::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .8s; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); }
.matrix.svart::after { opacity: 1; }
.matrix-duk { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; }
.matrix-duk.borta { display: none; }
.matrix-duk.genom { pointer-events: none; }
.matrix.spelar .matrix-duk { cursor: none; }
.matrix.glitchar .matrix-duk { animation: matrix-glitch .4s steps(4); }
@keyframes matrix-glitch { 0% { filter: hue-rotate(0deg); transform: translate(0); } 25% { filter: hue-rotate(-90deg) saturate(3); transform: translate(-6px, 2px) skewX(4deg); } 50% { filter: invert(.15); transform: translate(5px, -2px); } 75% { transform: translate(-2px, 0) skewX(-3deg); } 100% { filter: none; transform: none; } }

.matrix-hud {
  position: absolute; z-index: 3; left: 50%; top: 10px; width: var(--hud-bredd, 600px); transform: translateX(-50%);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none;
  /* Utanför spelen glider HUD:en upp ur bild och tonas ut, och i spelen kommer den samma väg tillbaka (se slutet av filen). */
  opacity: 0; translate: 0 -22px; transition: opacity .3s ease-in, translate .4s cubic-bezier(.55, 0, .75, .3);
}
.matrix-hud.syns { opacity: 1; translate: none; transition: opacity .45s ease-out, translate .55s cubic-bezier(.2, .9, .25, 1); }
.hud-mal { position: relative; display: flex; flex-direction: column; min-width: 0; }
/* Typen kommer in som data (typIn i matrix.js): en ljus linje sveper över, och texten glitchar i rött och blått. */
.hud-mal.data-in::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; pointer-events: none; transform-origin: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--matrix) 20%, transparent), var(--matrix-ljus) 85%, transparent); box-shadow: 0 0 10px var(--matrix); animation: hud-svep 1.6s ease-out both; }
.hud-mal.data-in .hud-typ { animation: hud-glitch 1.3s steps(13) both; }
@keyframes hud-svep { from { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } to { transform: scaleX(1); opacity: 0; } }
@keyframes hud-glitch { 0%, 70% { text-shadow: 0 0 14px var(--matrix), 2px 0 rgba(255, 0, 60, .7), -2px 0 rgba(0, 200, 255, .7); } 35% { text-shadow: 0 0 22px var(--matrix), -3px 0 rgba(255, 0, 60, .7), 3px 0 rgba(0, 200, 255, .7); }
  100% { text-shadow: 0 0 12px var(--matrix), 0 0 2px #fff; } }
.hud-etikett { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; opacity: .75; min-height: 1.2em; }
.hud-typ { font-size: clamp(17px, 4.8vw, 27px); line-height: 1.12; letter-spacing: .05em; text-transform: uppercase; color: var(--matrix-ljus); text-shadow: 0 0 12px var(--matrix), 0 0 2px #fff; min-height: 1.1em; }
.hud-tips { font-size: 13px; opacity: .85; margin-top: 3px; min-height: 1.2em; }
/* Tomma rader tar ingen plats (skeppet har bara typen sedan 25/10). */
.matrix-hud :is(.hud-etikett, .hud-tips):empty { display: none; }
.hud-sida { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: pre; flex: none; font-size: 13px; }
.hud-poang { font-size: 18px; font-weight: 700; color: var(--matrix-ljus); text-shadow: 0 0 10px var(--matrix); }
.hud-liv { font-size: 20px; letter-spacing: .14em; color: #ff8a7a; text-shadow: 0 0 9px rgba(255, 75, 58, .85); }
.hud-skold { font-size: 17px; letter-spacing: .14em; color: #bfe2ff; text-shadow: 0 0 10px #4d9dff; }
.hud-skold:empty { display: none; }
/* Skeppet: vad man ska skjuta ner står stort och centrerat som frågan i Pac-Man, poängen stor till vänster och liven
   och sköldarna stora till höger (Rickard 24/10: "Den ska vara större och centrerad. Precis som det är i Pac-Man
   spelet" och "Det här ... och antal liv i skeppsspelet måste bli mycket större så att man ser det"). */
.matrix-hud:not(.pac) { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 16px; }
.matrix-hud:not(.pac) .hud-sida { display: contents; }
.matrix-hud:not(.pac) .hud-mal { grid-column: 2; grid-row: 1 / 3; align-items: center; text-align: center; }
.matrix-hud:not(.pac) .hud-typ { font-size: clamp(18px, 2.6vw, 32px); white-space: nowrap; }
.matrix-hud:not(.pac) .hud-poang { grid-column: 1; grid-row: 1 / 3; align-self: start; justify-self: start; font-size: clamp(28px, 3.2vw, 44px); letter-spacing: .02em; line-height: 1.05; }
/* Kombomätaren (matrix.js, visaKombo, 28/10): sex sneda rutor under poängen. En graf av rätt typ tänder nästa ruta i
   nivåns färg, full mätare blixtrar vitt ruta för ruta (.full), och en miss slocknar rött (.tappar). Ingen text.
   Poängen står överst i sina två rader och mätaren nederst i rad 2, så att raderna är lika höga som förut och
   sköldarna inte når ner i brunnen (matrix.mjs, «HUD: … inget krockar»). */
.hud-kombo { display: none; }
.matrix-hud:not(.pac) .hud-kombo { display: flex; grid-column: 1; grid-row: 2; align-self: end; justify-self: start; gap: 5px; padding: 0 0 2px 4px; }
.hud-kombo i { width: clamp(11px, 1.15vw, 17px); height: clamp(8px, .8vw, 11px); transform: skewX(-22deg); background: rgba(0, 0, 0, .55);
  border: 1px solid color-mix(in srgb, var(--matrix) 40%, transparent); transition: background .15s, box-shadow .15s; }
.hud-kombo i.pa { background: var(--matrix); border-color: var(--matrix-ljus); box-shadow: 0 0 8px var(--matrix); }
.hud-kombo.full i { animation: kombo-full .9s ease-out both; animation-delay: calc(var(--n) * 45ms); }
.hud-kombo.tappar i { animation: kombo-tappar .5s ease-out; }
@keyframes kombo-full { 0%, 45% { background: #fff; border-color: #fff; box-shadow: 0 0 16px var(--matrix-ljus), 0 0 5px #fff; transform: skewX(-22deg) scale(1.25); } }
@keyframes kombo-tappar { 0% { background: #ff3b30; border-color: #ff9a8f; box-shadow: 0 0 10px #ff3b30; } }
/* Bossen (matrix.js, Bossen, 28/10): ekvationen står där typen brukar stå, utan versaler, så att x² inte blir X². */
.matrix-hud.boss .hud-typ { text-transform: none; }
.matrix-hud:not(.pac) .hud-liv { grid-column: 3; grid-row: 1; justify-self: end; font-size: clamp(24px, 2.5vw, 34px); letter-spacing: .08em; line-height: 1.1; }
/* Liven i skeppet har nivåns färg, som typen och poängen (Rickard 25/10: HUD:en får nivåns färg). */
.matrix-hud:not(.pac) .hud-liv { color: var(--matrix); text-shadow: 0 0 9px var(--matrix); }
.matrix-hud:not(.pac) .hud-skold { grid-column: 3; grid-row: 2; justify-self: end; font-size: clamp(18px, 1.9vw, 26px); line-height: 1.1; }
/* Liven i skeppet som små skepp (matrix.js, skeppLiv, Rickard 28/10): skeppets bild med ett sken i nivåns färg. Ett liv
   som är borta är en svag grå skugga. .sprangs: skeppet lyser upp och slocknar medan bitarna flyger på duken.
   .ny: ett liv som kommer tillbaka flyger in uppifrån och blinkar. */
.matrix-hud:not(.pac) .hud-liv:has(.liv-skepp) { display: flex; gap: .14em; letter-spacing: 0; }
.liv-skepp { display: block; width: 1em; height: 1em; background: url(figur/spel/skepp.webp) center / contain no-repeat;
  filter: drop-shadow(0 0 .12em var(--matrix)); transition: opacity .3s, filter .3s; }
.liv-skepp.borta { opacity: .2; filter: grayscale(1) brightness(.6); }
.liv-skepp.sprangs { animation: liv-sprangs .55s ease-out both; }
.liv-skepp.ny { animation: liv-ny .9s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes liv-sprangs {
  0% { opacity: 1; filter: brightness(4) drop-shadow(0 0 .3em #fff); transform: scale(1.35); }
  30% { opacity: 1; filter: brightness(2.5) drop-shadow(0 0 .4em #ffb070); transform: scale(1.5) rotate(8deg); }
  100% { opacity: .2; filter: grayscale(1) brightness(.6); transform: none; }
}
@keyframes liv-ny {
  0% { opacity: 0; transform: translateY(-1.2em) scale(.4); }
  40% { opacity: 1; filter: brightness(3) drop-shadow(0 0 .35em var(--matrix-ljus)); }
  60% { filter: brightness(1); } 75% { filter: brightness(2.2); }
  100% { opacity: 1; transform: none; }
}
/* Smalt fönster: poängen, sköldarna och liven på en rad överst och typen centrerad under. */
@media (max-width: 700px) {
  .matrix-hud:not(.pac) { grid-template-columns: auto 1fr auto; row-gap: 2px; column-gap: 8px; }
  .matrix-hud:not(.pac) .hud-mal { grid-column: 1 / -1; grid-row: 2; }
  .matrix-hud:not(.pac) .hud-typ { font-size: clamp(15px, 4.6vw, 22px); }
  .matrix-hud:not(.pac) .hud-poang { grid-row: 1; font-size: 24px; }
  .matrix-hud:not(.pac) .hud-kombo { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
  .matrix-hud:not(.pac) .hud-skold { grid-column: 2; grid-row: 1; justify-self: center; font-size: 18px; }
  .matrix-hud:not(.pac) .hud-liv { font-size: 22px; }
  .matrix-hud:not(.pac) .hud-tips { font-size: 12px; }
}
/* Pac-Man: frågan står där typen stod, i vanlig stil och på högst två rader. Den avkodas som i matrix (matrix.js, avkoda). */
.matrix-hud.pac .hud-typ { text-transform: none; letter-spacing: .01em; font-size: var(--pac-fraga, clamp(15px, 4.1vw, 23px)); line-height: 1.22; overflow-wrap: anywhere; }
/* Mitt emellan raden med nivån och hjärtana och labyrintens överkant (matrix.js, centreraFraga). */
.matrix-hud.pac .hud-typ { position: relative; top: var(--fraga-top, 0px); left: var(--fraga-left, 0px); }
.hud-typ.avkodas { animation: hud-avkoda .8s steps(8); }
/* Nivåmätaren i Pac-Man (matrix.js, visaNiva): fem rutor, klara fyllda, den pågående pulserar, resten svaga. */
/* Pac-Man: nivån, hur många som är kvar och hjärtana på en rad överst, och frågan centrerad under. */
.matrix-hud.pac { flex-direction: column-reverse; align-items: center; gap: 8px; }
.matrix-hud.pac .hud-sida { flex-direction: row; align-items: center; gap: 16px; }
.matrix-hud.pac .hud-poang { display: flex; flex-direction: row; align-items: center; gap: 10px; font-size: inherit; text-shadow: none; }
.matrix-hud.pac :is(.hud-etikett, .hud-tips) { display: none; }
.matrix-hud.pac .hud-mal { align-self: stretch; align-items: center; text-align: center; }
.pac-niva { display: flex; gap: calc(var(--pac-ruta, 38px) * .18); }
.pac-niva i {
  /* Storleken sätts av matrix.js (pacHud) och växer med fönstret. */
  display: grid; place-items: center; width: var(--pac-ruta, 38px); height: var(--pac-ruta, 38px); border: 1px solid rgba(0, 255, 65, .3); border-radius: 5px;
  background: rgba(0, 22, 6, .7); color: rgba(0, 255, 65, .4); font: 700 calc(var(--pac-ruta, 38px) * .5)/1 var(--matrix-mono); font-style: normal;
}
/* Tio hjärtan i två rader om fem (matrix.js, visaPacHud), lika höga som nivårutorna. */
.matrix-hud.pac .hud-liv { font-size: var(--pac-hjarta, 19px); letter-spacing: .1em; line-height: 1; white-space: pre-line; }
/* Sedan 28/10 pixelhjärtan (pac-retro.js, hjarta, och matrix.js, pacHjartan): bilderna och storlekarna kommer som
   variabler från matrix.js, i hela enhetspixlar. Ett liv som går spricker: hjärtat skakar och vitnar, sprickan öppnar
   sig i sicksack, halvorna tippar ut åt var sitt håll och faller medan de tonas ut, och några pixlar sprutar ut
   (skärvorna, i b). Under dem står den släckta håligheten. Ett liv som kommer tillbaka tänds med en blink. */
.matrix-hud.pac .hud-liv.hjartan { display: grid; grid-template-columns: repeat(5, var(--hj-b)); gap: 0 calc(var(--hj-b) * .08);
  font-size: 0; letter-spacing: 0; text-shadow: none; animation: none; }
.matrix-hud.pac .hj { position: relative; display: block; width: var(--hj-b); height: var(--hj-h); font-style: normal;
  background: var(--hj-full) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
.matrix-hud.pac .hj.tom { background-image: var(--hj-tom); }
.matrix-hud.pac .hj.ny { animation: hj-ny .6s steps(1, end); }
@keyframes hj-ny { 0%, 34% { filter: brightness(2.4); } 17%, 50% { filter: brightness(.6); } 67%, 100% { filter: none; } }
.matrix-hud.pac .hj.spricker::before, .matrix-hud.pac .hj.spricker::after {
  content: ""; position: absolute; inset: 0; z-index: 1; image-rendering: pixelated; pointer-events: none;
  background: var(--hj-v) 0 0 / 100% 100% no-repeat; transform-origin: 45% 100%; animation: hj-v .9s cubic-bezier(.35, 0, .8, .5) both;
}
.matrix-hud.pac .hj.spricker::after { background-image: var(--hj-hg); transform-origin: 55% 100%; animation-name: hj-hg; }
@keyframes hj-v {
  0% { transform: none; filter: brightness(2.6); } 6% { transform: translateX(calc(var(--hj-p) * -1)); } 12% { transform: translateX(var(--hj-p)); filter: brightness(1.8); }
  18% { transform: none; filter: none; } 26% { transform: translateX(calc(var(--hj-p) * -1)) rotate(-8deg); opacity: 1; }
  100% { transform: translate(calc(var(--hj-b) * -.35), calc(var(--hj-h) * .8)) rotate(-42deg); opacity: 0; }
}
@keyframes hj-hg {
  0% { transform: none; filter: brightness(2.6); } 6% { transform: translateX(calc(var(--hj-p) * -1)); } 12% { transform: translateX(var(--hj-p)); filter: brightness(1.8); }
  18% { transform: none; filter: none; } 26% { transform: translateX(var(--hj-p)) rotate(8deg); opacity: 1; }
  100% { transform: translate(calc(var(--hj-b) * .35), calc(var(--hj-h) * .8)) rotate(42deg); opacity: 0; }
}
/* Skärvorna: en bildpunkt mitt i hjärtat med sju kopior (box-shadow) som flyger ut från sprickan och faller. */
.matrix-hud.pac .hj > b { position: absolute; left: 50%; top: 45%; width: var(--hj-p); height: var(--hj-p); margin: calc(var(--hj-p) * -.5); opacity: 0; pointer-events: none; }
.matrix-hud.pac .hj.spricker > b { animation: hj-skarvor .75s cubic-bezier(.2, .6, .5, 1) .16s both; }
@keyframes hj-skarvor {
  0% { opacity: 1; box-shadow: 0 0 #fff3a0, 0 0 #ff3d6e, 0 0 #ffb36a, 0 0 #d42aa8, 0 0 #fff, 0 0 #ff3d6e, 0 0 #7a35ff; }
  45% { opacity: 1; }
  100% { opacity: 0; box-shadow: calc(var(--hj-p) * -6) calc(var(--hj-p) * -3) #fff3a0, calc(var(--hj-p) * 5) calc(var(--hj-p) * -4) #ff3d6e,
    calc(var(--hj-p) * -4) calc(var(--hj-p) * 4) #ffb36a, calc(var(--hj-p) * 6) calc(var(--hj-p) * 3) #d42aa8, 0 calc(var(--hj-p) * -6) #fff,
    calc(var(--hj-p) * -7) calc(var(--hj-p) * 1) #ff3d6e, calc(var(--hj-p) * 3) calc(var(--hj-p) * 7) #7a35ff; }
}
@media (prefers-reduced-motion: reduce) { .matrix-hud.pac .hj.spricker::before, .matrix-hud.pac .hj.spricker::after, .matrix-hud.pac .hj.spricker > b { animation-duration: .01s; } }
.pac-niva i.klar { border-color: var(--matrix-ljus); background: linear-gradient(#c8ffd4, #00b830); color: #002a0a; box-shadow: 0 0 10px rgba(0, 255, 65, .75); }
.pac-niva i.nu { border: 2px solid var(--matrix-ljus); color: #eaffef; text-shadow: 0 0 8px var(--matrix); animation: niva-nu 1.1s ease-in-out infinite; }
.pac-niva i.ny { animation: niva-ny .9s ease-out; }
@keyframes niva-nu { 50% { box-shadow: 0 0 16px rgba(0, 255, 65, .9), inset 0 0 10px rgba(0, 255, 65, .45); } }
@keyframes niva-ny { 0% { transform: scale(1.7); filter: brightness(3); box-shadow: 0 0 30px #fff; } 100% { transform: none; filter: none; } }
.matrix-hud .hud-typ { transition: opacity .25s; }
.matrix-hud .hud-typ.vantar { opacity: 0; transition: none; }
/* Den nya frågan, stor mitt över labyrinten (matrix.js, visaStorFraga). Den krymper sedan upp mot sin plats i HUD:en. */
.pac-stor {
  position: absolute; z-index: 4; left: 0; top: 0; box-sizing: border-box; width: max-content; padding: 16px 26px 34px;
  font-size: clamp(25px, 7vw, 42px); font-weight: 700; line-height: 1.22; text-align: center; color: #eaffef; overflow-wrap: anywhere;
  text-shadow: 0 0 14px var(--matrix), 2px 0 rgba(255, 0, 60, .5), -2px 0 rgba(0, 200, 255, .5);
  transform-origin: 0 0; pointer-events: none; visibility: hidden;
}
.pac-stor small { margin-bottom: 14px; font-size: 12px; font-weight: 400; letter-spacing: .3em; text-shadow: none; }
.pac-stor.syns { visibility: visible; animation: kort-in .7s steps(1, end) both; }
.pac-stor > span { display: block; padding: 0 4px; animation: pk-glod 1.1s ease-in-out 1s 2 alternate; }
/* Frågans sort, stort och glödande som den nya typen i skeppets kort, och de fyra spökena med frågetecken som studsar
   in ett i taget och sedan guppar (matrix.js, visaStorFraga och miniSpoke). */
.pac-stor .pk-sort { display: block; margin: 0 0 10px; white-space: nowrap; font-size: clamp(14px, 3.4vw, 21px); line-height: 1.1; letter-spacing: .14em; color: var(--matrix-ljus);
  text-shadow: 0 0 18px var(--matrix), 2px 0 rgba(255, 0, 60, .55), -2px 0 rgba(0, 200, 255, .55); animation: typbyte-glod 1s ease-in-out .8s 3 alternate; }
.pk-spoken { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
.pk-spoke { display: block; opacity: 0; animation: pk-spoke-in .5s cubic-bezier(.2, 1.6, .4, 1) both, pk-guppa .9s ease-in-out infinite alternate; }
@keyframes pk-spoke-in {
  0% { opacity: 0; transform: translateY(-18px) scale(.3); filter: brightness(3); }
  25% { opacity: .4; } 35% { opacity: 1; } 45% { opacity: .5; } 55% { opacity: 1; filter: brightness(1.6); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes pk-guppa { from { translate: 0 -2px; } to { translate: 0 3px; } }
@keyframes pk-glod { to { text-shadow: 0 0 26px var(--matrix), 0 0 6px #fff, 2px 0 rgba(255, 0, 60, .55), -2px 0 rgba(0, 200, 255, .55); } }
/* Korten i terminalstil (Rickard 22/10 valde mockup A): avskurna hörn, en tunn ljus ram, en rubrikrad som en
   kodutskrift med streck till höger och hakar under, svaga sveplinjer och en nedräkning längs underkanten. Samma ram på
   typbytet och Pac-Mans fråga. Ramen är två lager med samma avskurna form, ramfärgen och den mörka fyllningen 2 px in,
   och glöden är en drop-shadow på kortet, eftersom en box-shadow inte följer avskurna hörn. Korten byggs av ettor och
   nollor och faller sönder i dem (kortIn och kortUt i matrix.js), och sveper in och ut i glitchade skivor. */
.matrix-typbyte, .pac-stor {
  --hak: 16px; isolation: isolate; background: none; border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 0 6px rgba(0, 255, 65, .75)) drop-shadow(0 0 20px rgba(0, 255, 65, .3));
}
.matrix-typbyte::before, .pac-stor::before, .matrix-typbyte::after, .pac-stor::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--matrix);
  clip-path: polygon(var(--hak) 0, calc(100% - var(--hak)) 0, 100% var(--hak), 100% calc(100% - var(--hak)), calc(100% - var(--hak)) 100%, var(--hak) 100%, 0 calc(100% - var(--hak)), 0 var(--hak));
}
.matrix-typbyte::after, .pac-stor::after {
  --hak: 15px; inset: 2px;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 0, rgba(0, 255, 65, .1), transparent 70%), rgba(0, 9, 3, .94);
}
/* Rubrikraden: texten till vänster, snedstreck ut till kanten, och en linje under med en hake i var ände. */
:is(.matrix-typbyte, .pac-stor) small {
  display: flex; align-items: center; justify-self: stretch; gap: 14px; padding: 0 2px 10px; text-align: left;
  text-transform: uppercase; color: var(--matrix);
  background: linear-gradient(rgba(0, 255, 65, .5), rgba(0, 255, 65, .5)) 0 calc(100% - 8px) / 100% 1px no-repeat,
    linear-gradient(var(--matrix-ljus), var(--matrix-ljus)) 0 calc(100% - 7px) / 14px 2px no-repeat,
    linear-gradient(var(--matrix-ljus), var(--matrix-ljus)) 0 100% / 2px 9px no-repeat,
    linear-gradient(var(--matrix-ljus), var(--matrix-ljus)) 100% calc(100% - 7px) / 14px 2px no-repeat,
    linear-gradient(var(--matrix-ljus), var(--matrix-ljus)) 100% 100% / 2px 9px no-repeat;
}
:is(.matrix-typbyte, .pac-stor) small::after {
  content: ""; flex: 1; min-width: 30px; height: 11px;
  background: repeating-linear-gradient(-60deg, rgba(0, 255, 65, .55) 0 2px, transparent 2px 7px);
  mask: linear-gradient(90deg, transparent, #000 40%);
}
/* Nedräkningen: ett spår med ljus fyllning som krymper mot vänster. */
:is(.matrix-typbyte, .pac-stor) .tb-tid {
  position: absolute; left: 22px; right: 22px; bottom: 13px; height: 9px; box-sizing: border-box;
  border: 1px solid rgba(0, 255, 65, .55); background: rgba(0, 30, 8, .8); box-shadow: none; animation: none;
}
:is(.matrix-typbyte, .pac-stor) .tb-tid::before {
  content: ""; position: absolute; inset: 1px; background: linear-gradient(90deg, #8dffaa, var(--matrix-ljus));
  box-shadow: 0 0 8px var(--matrix); transform-origin: left; animation: typbyte-tid var(--typbyte, 3.2s) linear both;
}
.matrix-kortduk { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@keyframes kort-in {
  0% { opacity: 0; clip-path: inset(0 -40px 100% -40px); }
  36% { opacity: 1; clip-path: inset(0 -40px 62% -40px); translate: -7px 0; }
  46% { clip-path: inset(28% -40px 30% -40px); translate: 6px 0; }
  56% { clip-path: inset(0 -40px 18% -40px); translate: -3px 0; }
  66% { clip-path: inset(55% -40px 0 -40px); translate: 2px 0; }
  74%, 100% { opacity: 1; clip-path: inset(-40px); translate: 0 0; }
}
@keyframes kort-ut {
  0% { opacity: 1; clip-path: inset(-40px); }
  18% { clip-path: inset(8% -40px 52% -40px); translate: 9px 0; }
  36% { opacity: .85; clip-path: inset(46% -40px 16% -40px); translate: -11px 0; }
  54% { opacity: .6; clip-path: inset(70% -40px 6% -40px); translate: 15px 0; }
  72% { opacity: .35; clip-path: inset(30% -40px 58% -40px); translate: -18px 0; }
  100% { opacity: 0; visibility: hidden; clip-path: inset(50% -40px 50% -40px); translate: 0 0; }
}
@keyframes hud-avkoda {
  0% { opacity: .15; transform: skewX(16deg); }
  35% { opacity: 1; transform: skewX(-8deg) translateX(4px); text-shadow: 3px 0 rgba(255, 0, 60, .7), -3px 0 rgba(0, 200, 255, .7), 0 0 16px var(--matrix); }
  70% { transform: translateX(-2px); }
  100% { transform: none; }
}
.matrix .puls { animation: hud-puls .5s ease-out; }
@keyframes hud-puls { 30% { transform: scale(1.18); color: #fff; } }

.matrix-meddelande {
  position: absolute; z-index: 4; left: 50%; top: 45%; transform: translate(-50%, -50%); width: max-content; max-width: 92vw;
  text-align: center; font-size: clamp(20px, 6vw, 40px); font-weight: 700; line-height: 1.1; text-transform: uppercase; color: #eaffef;
  text-shadow: 0 0 18px var(--matrix), 2px 0 rgba(255, 0, 60, .55), -2px 0 rgba(0, 200, 255, .55);
  opacity: 0; transition: opacity .5s; pointer-events: none;
}
.matrix-meddelande small { display: block; margin-bottom: 6px; font-size: .42em; letter-spacing: .32em; opacity: .85; }
.matrix-meddelande.syns { opacity: 1; animation: medd-in .45s steps(5) both; }
/* När spelet avgörs glider det upp ur bild och tonas ut som HUD:en (doljMeddelande i matrix.js). */
.matrix-meddelande.ut { translate: 0 -22px; transition: opacity .3s ease-in, translate .4s cubic-bezier(.55, 0, .75, .3); }
.matrix-meddelande .medd-rad { display: block; margin-top: 12px; font-size: .5em; letter-spacing: .04em; text-transform: none; color: var(--matrix-ljus); }
/* "hoppa över" under kompisarnas visning före skeppsspelet */
.matrix-hoppa { position: absolute; z-index: 6; left: 50%; bottom: 14px; transform: translateX(-50%); font: 400 15px/1.2 var(--matrix-text); letter-spacing: .12em; color: var(--matrix);
  opacity: .75; pointer-events: none; animation: hoppa-blink 1.6s steps(2) infinite; }
@keyframes hoppa-blink { 50% { opacity: .35; } }
.matrix-meddelande.stor { font-size: clamp(28px, 8.5vw, 72px); }
/* Typbytet i skeppsspelet (nyTyp i matrix.js): ett kort mitt på banan i --typbyte ms. */
.matrix-typbyte {
  position: absolute; z-index: 4; left: 50%; top: 45%; transform: translate(-50%, -50%); width: min(600px, 92vw); box-sizing: border-box;
  display: grid; justify-items: center; gap: 7px; padding: 16px 24px 36px; pointer-events: none; opacity: 0; visibility: hidden; text-align: center;
  font-family: var(--matrix-text);
}
.matrix-typbyte :is(b, .ko-start) { font-weight: 400; }
.matrix-typbyte.syns { visibility: visible; animation: kort-in .7s steps(1, end) both; }
.matrix-typbyte.gar { animation: kort-ut .5s steps(1, end) both; }
.matrix-typbyte small { margin-bottom: 4px; font-size: 13px; letter-spacing: .32em; }
.tb-gammal { font-size: clamp(15px, 4vw, 20px); text-transform: uppercase; letter-spacing: .05em; color: #ff8a7a; text-decoration-thickness: 3px; text-decoration-color: #ff4b3a;
  animation: typbyte-stryk .55s steps(6) both; }
.tb-ny { min-height: 1.15em; max-width: 100%; white-space: nowrap; font-size: clamp(17px, 5vw, 34px); line-height: 1.1; letter-spacing: .04em; color: #eaffef;
  text-shadow: 0 0 18px var(--matrix), 2px 0 rgba(255, 0, 60, .55), -2px 0 rgba(0, 200, 255, .55); animation: typbyte-glod 1s ease-in-out .9s 3 alternate; }
/* Exempelgrafen är ett oscilloskop med egen ram och rundade hörn (grafSkarm i matrix.js). */
.tb-graf { width: 168px; height: 92px; animation: typbyte-rita 1s ease-out .9s both; }
.tb-tips { font-size: 17px; color: var(--matrix-ljus); }
/* Kontrollerna före skeppsspelet (matrix.js, kontroller): samma kort som typbytet, med W A S D och E som tangenter som
   lyser när eleven trycker på dem. Kortet står kvar tills eleven trycker E. */
.matrix-kontroll { width: min(560px, 92vw); gap: 14px; padding-bottom: 22px; }
.matrix-kontroll.syns { animation: kort-in .7s steps(1, end) both; }
.ko-rad { display: flex; align-items: center; justify-content: center; gap: 22px; width: 100%; }
.ko-wasd { display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: 46px 46px; gap: 5px; flex: none; }
.ko-wasd .ko-tangent:first-child { grid-column: 2; }
.ko-wasd .ko-tangent:not(:first-child) { grid-row: 2; }
.ko-tangent {
  display: grid; place-items: center; min-width: 46px; height: 46px; box-sizing: border-box; border-radius: 6px;
  border: 2px solid rgba(0, 255, 65, .75); background: linear-gradient(rgba(0, 40, 12, .95), rgba(0, 14, 4, .95));
  box-shadow: 0 4px 0 rgba(0, 120, 30, .8), 0 0 12px rgba(0, 255, 65, .35);
  font: 700 22px/1 var(--matrix-mono); color: var(--matrix-ljus); text-shadow: 0 0 8px var(--matrix);
  transition: transform .06s, box-shadow .06s, background .06s;
}
.ko-tangent.ko-e { width: 64px; height: 64px; font-size: 30px; animation: ko-puls 1.2s ease-in-out infinite; flex: none; }
.ko-tangent.nere { transform: translateY(4px); background: #00ff41; color: #021006; text-shadow: none;
  box-shadow: 0 0 0 rgba(0, 120, 30, .8), 0 0 26px rgba(0, 255, 65, .9); }
@keyframes ko-puls { 50% { box-shadow: 0 4px 0 rgba(0, 120, 30, .8), 0 0 26px rgba(0, 255, 65, .85); } }
.ko-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 180px; text-align: left; color: var(--matrix-ljus); font-size: 16px; }
.ko-text b { font-size: 21px; letter-spacing: .03em; color: #eaffef; text-shadow: 0 0 12px var(--matrix); }
.ko-text i { font-style: normal; font-size: 14px; opacity: .75; }
.ko-mal { margin: 2px 0 0; max-width: 440px; font-size: 15px; line-height: 1.35; color: var(--matrix-ljus); }
.ko-start { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #eaffef;
  text-shadow: 0 0 14px var(--matrix); animation: hoppa-blink 1.2s steps(2) infinite; }
.ko-start kbd { display: inline-block; padding: 1px 9px; border: 2px solid var(--matrix); border-radius: 5px; font: inherit; }
@media (max-width: 560px) {
  .ko-rad { gap: 14px; }
  .ko-wasd { grid-template-columns: repeat(3, 38px); grid-template-rows: 38px 38px; }
  .ko-tangent { min-width: 38px; height: 38px; font-size: 18px; }
  .ko-text { min-width: 0; }
}
/* Övningen före spelen (matrix.js, ovningSkylt): en skylt som säger en sak i taget, med tangenterna när de behövs. Den
   står där spelet säger, och pilen och handen ritas på duken. */
.matrix-ovning {
  position: absolute; z-index: 6; left: 50%; top: 42%; transform: translate(-50%, -50%); box-sizing: border-box; width: max-content; max-width: min(92vw, 520px);
  display: grid; justify-items: center; gap: 6px; padding: 9px 18px 12px; pointer-events: none; opacity: 0; visibility: hidden; text-align: center;
  border: 2px solid var(--matrix); background: rgba(0, 12, 4, .84); box-shadow: 0 0 18px rgba(0, 255, 65, .4), inset 0 0 12px rgba(0, 255, 65, .15);
  font: 400 clamp(19px, 3vw, 28px)/1.15 var(--matrix-text); color: #eaffef; text-shadow: 0 0 10px var(--matrix); transition: opacity .2s, border-color .15s, box-shadow .15s; }
.matrix-ovning.syns { opacity: 1; visibility: visible; }
.matrix-ovning small { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--matrix); opacity: .85; }
.matrix-ovning b { font-weight: 400; }
.matrix-ovning.klar b::after { content: " ✓"; color: var(--matrix); }
.matrix-ovning.fel { border-color: #ff4b3a; box-shadow: 0 0 18px rgba(255, 75, 58, .55); color: #ffd9d3; text-shadow: 0 0 10px #ff4b3a; }
.ov-hur { display: flex; align-items: center; gap: 14px; margin-top: 3px; }
.ov-hur i { font-style: normal; font-size: 14px; color: var(--matrix-ljus); opacity: .8; }
.ov-hur .ko-wasd { grid-template-columns: repeat(3, 36px); grid-template-rows: 36px 36px; }
.ov-hur .ko-tangent { min-width: 36px; height: 36px; font-size: 18px; }
.ov-hur .ko-tangent.ko-e { width: 52px; height: 52px; font-size: 25px; }
.matrix.retro .matrix-ovning { border-color: #ff4fd8; background: rgba(27, 11, 61, .88); box-shadow: 0 0 18px rgba(255, 79, 216, .55);
  font-family: var(--retro-typ); font-weight: 800; color: #fffaf0; text-shadow: 0 2px 0 var(--retro-skugga); }
.matrix.retro .matrix-ovning small { font-weight: 700; color: var(--retro-gul); }
.matrix.retro .matrix-ovning.klar b::after { color: var(--retro-gul); }
.matrix.retro .matrix-ovning.fel { border-color: var(--retro-rod); box-shadow: 0 0 18px rgba(255, 61, 110, .7); }
.matrix.retro .ov-hur i { color: var(--retro-text); }
.matrix.retro .ov-hur .ko-tangent { border-color: #ff4fd8; background: var(--retro-yta); box-shadow: 0 4px 0 #6b1fa8; color: #fffaf0; text-shadow: none; font-family: var(--retro-typ); }
.matrix.retro .ov-hur .ko-tangent.nere { background: var(--retro-gul); color: var(--retro-skugga); box-shadow: 0 0 16px var(--retro-gul); }
/* En superkraft första gången (visaKraft i matrix.js): typbytets kort i kraftens färg (--mt-farg), med rubriken
   SUPERKRAFT som utropen har den, miniscenen, en rad om vad kraften gör och nedräkningen. Spelet bakom står still och
   mörknar. Ett klick på kortet eller bakom det stänger. Hörnknapparna står över mörkret och går att trycka på. */
.matrix-kraft {
  --matrix: var(--mt-farg); --matrix-ljus: color-mix(in srgb, var(--mt-farg) 22%, #fff); --mt-bit: var(--mt-farg);
  top: 47%; gap: 8px; padding: 16px 22px 34px; pointer-events: auto; cursor: pointer;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mt-farg) 75%, transparent)) drop-shadow(0 0 22px color-mix(in srgb, var(--mt-farg) 30%, transparent));
}
.matrix-kraft .kv-scen {
  display: block; width: min(520px, 100%, calc((100vh - 330px) * 16 / 9)); aspect-ratio: 16 / 9; box-sizing: border-box; background: #000;
  border: 1px solid color-mix(in srgb, var(--mt-farg) 55%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--mt-farg) 35%, transparent), inset 0 0 0 1px rgba(0, 0, 0, .6);
}
/* Inget som räknas om i varje bildruta (typbytets glöd som pulserar, blinkningen): med CPU:n strypt fyra gånger tog
   stilberäkningen en fjärdedel av tiden medan scenen spelades. Glöden står stilla i stället. */
.matrix-kraft .kv-namn { animation: none; text-shadow: 0 0 22px var(--matrix), 0 0 6px #fff, 2px 0 rgba(255, 0, 60, .55), -2px 0 rgba(0, 200, 255, .55); }
.matrix-kraft .kv-om { max-width: 500px; line-height: 1.35; }
.matrix-kraft .tb-tid { border-color: color-mix(in srgb, var(--mt-farg) 55%, transparent); background: rgba(0, 0, 0, .7); }
.matrix-kraft .tb-tid::before { background: linear-gradient(90deg, var(--mt-farg), var(--matrix-ljus)); box-shadow: 0 0 8px var(--mt-farg); }
.matrix-kraft .kv-hoppa { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--matrix); opacity: .75; }
.matrix-kraft-bakom { position: absolute; inset: 0; z-index: 2; cursor: pointer; background: rgba(0, 0, 0, .55); animation: kv-mork .35s ease-out both; }
.matrix-kraft-bakom.gar { animation: kv-ljus .4s ease-in both; }
@keyframes kv-mork { from { opacity: 0; } }
@keyframes kv-ljus { to { opacity: 0; } }
/* Slutstatistiken när ett spel slutar (Rekord och slutstatistik i matrix.js): typbytets kort med poängen eller «Nytt
   rekord» stort, en rad med nivå, tid och rekordet att slå, och en stapel per graftyp för träffsäkerheten. Kortet står
   bara 1,5 s, så det glitchar fram fortare än typbytet, och staplarna fylls på en halv sekund. Ett värde som slog sitt
   rekord lyser vitt med en pil, och rubriken blinkar. Spelet bakom mörknar lite, och ett tryck var som helst hoppar över.
   I retrovärlden är kortet frågekortets arkadplatta (under Pac-Man i retrovärlden). */
.matrix-slut { top: 46%; width: min(520px, 92vw); gap: 7px; padding: 14px 22px 32px; pointer-events: auto; cursor: pointer; }
.matrix-slut.syns { animation-duration: .45s; }
.matrix-slut .sl-rubrik { font-size: clamp(22px, 6.4vw, 40px); text-transform: uppercase; animation: none; }
.matrix-slut.rekord .sl-rubrik { color: #fff; animation: sl-blink .3s steps(1, end) .3s 4; }
@keyframes sl-blink { 50% { opacity: .35; } }
.sl-rad { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; font-size: 16px; color: var(--matrix-ljus); }
.sl-tal.ny { color: #fff; text-shadow: 0 0 12px var(--matrix); }
.sl-tal.ny::after { content: "\00a0▲"; color: var(--matrix); }
.sl-forra { opacity: .7; }
.sl-under { margin-top: 3px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--matrix); opacity: .8; }
.sl-typer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 5px 12px; width: 100%; }
.sl-typ { display: contents; }
.sl-typ > span { font-size: 15px; text-align: right; color: var(--matrix-ljus); }
.sl-typ > i { position: relative; height: 10px; border: 1px solid rgba(0, 255, 65, .5); background: rgba(0, 30, 8, .8); }
.sl-typ > i::before { content: ""; position: absolute; inset: 1px; transform-origin: left; transform: scaleX(var(--andel));
  background: linear-gradient(90deg, #8dffaa, var(--matrix-ljus)); box-shadow: 0 0 8px var(--matrix); animation: sl-fyll .5s ease-out .2s both; }
.sl-typ > b { min-width: 3.6em; font-size: 16px; text-align: right; color: #eaffef; }
@keyframes sl-fyll { from { transform: scaleX(0); } }
.matrix-slut-bakom { position: absolute; inset: 0; z-index: 2; cursor: pointer; background: rgba(0, 0, 0, .4); animation: kv-mork .25s ease-out both; }
.matrix-slut-bakom.gar { animation: kv-ljus .35s ease-in both; }
@media (max-width: 440px) {
  .matrix-slut { padding: 12px 16px 30px; }
  .sl-rad { gap: 2px 12px; font-size: 14px; }
  .sl-typ > span { font-size: 13px; }
  .sl-typ > b { font-size: 14px; }
}
@keyframes typbyte-stryk { 0%, 30% { text-decoration-line: none; opacity: 1; } 31% { text-decoration-line: line-through; } 60% { opacity: 1; transform: none; } 70% { transform: translateX(-4px) skewX(12deg); opacity: .6; } 80% { transform: translateX(5px); } 100% { text-decoration-line: line-through; opacity: .45; transform: none; } }
@keyframes typbyte-glod { to { text-shadow: 0 0 30px var(--matrix), 0 0 8px #fff, 2px 0 rgba(255, 0, 60, .55), -2px 0 rgba(0, 200, 255, .55); } }
@keyframes typbyte-rita { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes typbyte-tips { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes typbyte-tid { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes medd-in { 0% { opacity: 0; transform: translate(-50%, -50%) scaleY(.1); } 40% { opacity: 1; transform: translate(-48%, -50%) skewX(12deg); } 70% { transform: translate(-52%, -50%) skewX(-6deg); } 100% { opacity: 1; transform: translate(-50%, -50%); } }

/* Knapparna i hörnen (Rickard 25/10: "större i hörnen och ... göras om visuellt"): Lämna nere till höger och Ljud på och
   av (matrix.js, vaxlaLjud) nere till vänster. Avskurna hörn som korten, en tunn ljus ram och glöd, en ikon (svg i
   currentColor) och en etikett i Matrix-texternas typsnitt som kommer som ettor och nollor. Ramen är två lager med samma
   avskurna form (::before i ramfärgen, ::after den mörka fyllningen 2 px in), och glöden är en drop-shadow på knappen.
   Markup: button.matrix-knapp.matrix-stang | .matrix-ljud(.av) > svg.mk-ikon + span.mk-text.
   Ett tema byter utseendet med en klass på lagret (Pac-Man: .matrix.retro .matrix-knapp), gärna genom variablerna:
   --mk-farg (ram, ikon och glöd), --mk-text (etiketten), --mk-fyll (fyllningen), --mk-hak (hörnen) och --mk-font. */
.matrix-knapp {
  --mk-farg: var(--matrix); --mk-text: var(--matrix-ljus); --mk-hak: 11px; --mk-font: var(--matrix-text);
  --mk-fyll: repeating-linear-gradient(0deg, rgba(0, 0, 0, .32) 0 1px, transparent 1px 3px), linear-gradient(rgba(0, 38, 11, .94), rgba(0, 9, 3, .94));
  position: absolute; z-index: 6; bottom: 14px; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; min-width: 52px; box-sizing: border-box; padding: 0 20px 0 16px; border: 0; background: none; cursor: pointer;
  color: var(--mk-farg); font: 400 18px/1 var(--mk-font); letter-spacing: .16em; text-transform: uppercase;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--mk-farg) 70%, transparent)) drop-shadow(0 0 16px color-mix(in srgb, var(--mk-farg) 25%, transparent));
  opacity: .88; transition: opacity .2s, filter .2s, translate .12s; -webkit-tap-highlight-color: transparent;
}
.matrix-knapp::before, .matrix-knapp::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--mk-farg); --hk: var(--mk-hak);
  clip-path: polygon(var(--hk) 0, 100% 0, 100% calc(100% - var(--hk)), calc(100% - var(--hk)) 100%, 0 100%, 0 var(--hk));
}
.matrix-knapp::after { inset: 2px; --hk: calc(var(--mk-hak) - 1px); background: var(--mk-fyll); }
.matrix-knapp:hover, .matrix-knapp:focus-visible { opacity: 1; filter: drop-shadow(0 0 7px var(--mk-farg)) drop-shadow(0 0 22px color-mix(in srgb, var(--mk-farg) 45%, transparent)); outline: none; }
.matrix-knapp:active { translate: 0 2px; }
.mk-ikon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; }
.mk-text { color: var(--mk-text); text-shadow: 0 0 8px var(--mk-farg); white-space: nowrap; }
.matrix-stang { right: 14px; }
.matrix-ljud { left: 14px; }
.matrix-ljud .mk-tyst, .matrix-ljud.av .mk-vag { display: none; }
.matrix-ljud.av .mk-tyst { display: inline; }
.matrix-ljud.av { --mk-farg: rgba(0, 255, 65, .5); --mk-text: rgba(212, 255, 220, .6); }
/* Paus (matrix.js, pausa): en kvadratisk knapp uppe till höger, bara medan eleven spelar (.kan-pausa). Under pausen visar
   den en spelaikon, och kortet täcker hela skärmen så att ett tryck var som helst fortsätter. Storleken står emot
   .matrix-knapp på smala skärmar och i retrovärlden (se slutet av filen), så att PAUS_PLATS i matrix.js stämmer. */
.matrix-knapp.matrix-paus { top: 12px; right: 12px; bottom: auto; width: 46px; height: 46px; min-width: 0; padding: 0; z-index: 9; }
.matrix-paus .mk-spela, .matrix.pausad .matrix-paus .mk-streck { display: none; }
.matrix.pausad .matrix-paus .mk-spela { display: inline; fill: currentColor; stroke: none; }
.mk-ikon .mk-streck { stroke-width: 3.4; stroke-linecap: butt; }
.matrix-pauskort { position: absolute; inset: 0; z-index: 8; display: none; place-items: center; background: rgba(0, 6, 2, .62); backdrop-filter: blur(3px) saturate(.7); cursor: pointer; touch-action: none; }
.matrix-pauskort.syns { display: grid; animation: kv-mork .25s ease-out both; }
.mp-ruta { display: grid; justify-items: center; gap: 14px; padding: 26px 34px 28px; color: var(--matrix-ljus); font-family: var(--matrix-text); text-align: center;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .32) 0 1px, transparent 1px 3px), linear-gradient(rgba(0, 38, 11, .94), rgba(0, 9, 3, .94));
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: inset 0 0 0 2px var(--matrix); }
.mp-rubrik { font-size: clamp(34px, 9vw, 56px); font-weight: 400; letter-spacing: .3em; margin-right: -.3em; text-transform: uppercase; text-shadow: 0 0 14px var(--matrix), 0 0 34px rgba(0, 255, 65, .5); }
.mp-tips { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.mp-fortsatt { position: relative; bottom: auto; }
.mp-fortsatt .mk-ikon path { fill: currentColor; stroke: none; }
/* Telefonen på tvären (matrix.js, tvars): Ljud och Lämna är kvadratiska ikonknappar i spalterna bredvid planen.
   --tvars-sida är spaltens bredd (planens vänsterkant). */
.matrix.tvars :is(.matrix-stang, .matrix-ljud) { width: 52px; min-width: 52px; padding: 0; }
.matrix.tvars :is(.matrix-stang, .matrix-ljud) .mk-text { display: none; }
.matrix.tvars.retro :is(.matrix-stang, .matrix-ljud) { width: 56px; min-width: 56px; height: 56px; }
.matrix.tvars .matrix-hud:not(.pac) .hud-poang { font-size: 26px; }
.matrix.tvars .matrix-hud:not(.pac) .hud-liv { font-size: 22px; }
/* På tvären har HUD:en 40 px (hudH 50 i matrix.js). Rutnätet ärver annars gap 12px från .matrix-hud, och med
   kombomätaren i rad 2 slutade HUD:en 6 px ner på planen (28/10, paus.mjs). Raderna står därför tätt, och skölden
   står i översta raden till höger i poängens kolumn, så att inte heller den når ner på planen (förut 16 px). I livens
   kolumn får den inte plats bredvid de fem små skeppen. */
.matrix.tvars .matrix-hud:not(.pac) { row-gap: 2px; }
.matrix.tvars .matrix-hud:not(.pac) .hud-skold { grid-column: 1; grid-row: 1; justify-self: end; }
/* Under pausen står alla CSS-animationer i lagret still (korten, utropen, etiketterna). */
.matrix.pausad *:not(.matrix-pauskort, .matrix-pauskort *) { animation-play-state: paused !important; }
/* Var knapparna står räknar matrix.js ut från spelplanen (placeraKnappar, Rickard 25/10: under planen och lika långt
   från den på båda sidor), och båda får den bredare knappens bredd som min-width. Ett tema byter utseendet med en klass
   på lagret och lämnar left, right, top, bottom och min-width åt matrix.js. Ändras knappens höjd här, ska knappRemsa i matrix.js följa med, annars kan planen gå ner bakom knapparna. */
/* Pac-Man är en egen retrovärld: etiketten står direkt, utan ettor och nollor. */
.matrix.retro .mk-text .mt-t::before { content: none; }
.matrix.retro .mk-text .mt-c { opacity: 1; animation: none; }

/* ---- Uppvisningen: Newton vid datorn och en egen GeoGebra ------------------------------ */
.matrix-visning { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; transition: opacity .9s; }
.matrix-visning.syns { opacity: 1; }
/* Genombrottet (matrix.js, visaScen): scenen kommer upp under duken på en gång, utan att tonas in och utan att Newton
   glider in. */
.matrix-visning.direkt, .matrix-kodare.direkt { transition: none; }
.matrix-ggb { position: absolute; inset: 0; }
/* Algebrafönstret mörkt som resten: färgerna vänds och vrids tillbaka, så att kurvornas prickar behåller sin färg. */
.matrix-ggb .splitPaneDragger { background: #031a09 !important; }
.matrix-ggb .dockPanelParent:has(.algebraView) { filter: invert(.93) hue-rotate(180deg) sepia(.25) hue-rotate(60deg) saturate(1.4); }
/* GeoGebras namn längst ner i algebrafönstret («GeoGebras Grafräknare») stack fram bakom Ljud-knappen. */
.matrix-ggb .avNameLogo { display: none !important; }
/* GeoGebras felruta («Vänligen kontrollera din inmatning», längst ner i algebrafönstret) är inget för eleven. landa() i
   matrix.js trycker bara Enter när fältet har raden, och skulle rutan ändå komma syns den inte. */
.matrix-ggb .snackbarComponent { display: none !important; }
/* Bakgrunden vid datorn (visning-bak.js): över grafikfönstret och under Newton, utan klick, så att
   GeoGebra under den tar dem. Den tonas in, utom när scenen kommer in genom laptopens skärm (direkt). */
.visning-bak { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity .8s; }
.visning-bak.syns { opacity: 1; }
.visning-bak.direkt { transition: none; }
.matrix-kodare {
  position: fixed; z-index: 3; pointer-events: none; opacity: 0; transform: translateY(50px) scale(.96);
  transition: opacity .9s, transform 1s var(--fjader); filter: drop-shadow(0 0 26px rgba(0, 255, 65, .3)) drop-shadow(0 12px 18px rgba(0, 0, 0, .6));
}
.matrix-kodare.syns { opacity: 1; transform: none; }
.kodare-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 100% 100%; opacity: 0; }
.kodare-bild.syns { opacity: 1; }
.matrix-kodare.skriver { animation: kodare-guppa .16s ease-in-out infinite alternate; }
@keyframes kodare-guppa { to { translate: 0 -1px; } }
/* Cigarrscenen: rutorna är 640 × 960 mot skrivbildernas 507 × 540, med bordet på samma plats nere till höger. Han får
   plats att stå på bordet ovanför rutan. Skrivbilderna göms så länge scenen spelas. Filmen ritas på duken
   (.kodare-film, 400 × 600), och bilderna är reserven. */
.kodare-scen { position: absolute; right: 0; bottom: 0; width: calc(640 / 507 * 100%); height: calc(960 / 540 * 100%); }
.kodare-scen img, .kodare-film { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.kodare-scen img.syns, .kodare-film.syns { opacity: 1; }
.matrix-kodare.scen .kodare-bild { opacity: 0; }

/* ---- Tillbaka till verkligheten (matrix.js, tillbaka) ---------------------------------
   Skärmen (visningslagret och duken) krymper och lutar sig i ett rum av kod (.hem-bak, under skärmen), bilen (.hem-bil,
   med bilderna ur båda GeoGebra) flyger till elevens ruta, och ljuset (.hem-fram) ligger överst. .hem-hal är den tomma
   platsen på skärmen där bilen satt. Elevens sida har inga övergångar under tiden (matrix-hem), så att den inte rör sig
   när spelets klasser tas bort, och dess filter (djupskärpan) sätts av matrix.js. */
.hem-bak, .hem-fram { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hem-bak { z-index: 0; }
.hem-fram { z-index: 5; }
.hem-bil { position: fixed; z-index: 4; pointer-events: none; transform-origin: 50% 50%; opacity: 0; will-change: transform; }
.hem-bil canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hem-bil .hem-till { opacity: 0; }
.hem-kant { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transform-origin: 50% 50%;
  box-shadow: 0 0 0 2px rgba(0, 255, 65, .75), 0 0 46px rgba(0, 255, 65, .35), 0 30px 90px rgba(0, 0, 0, .85); }
.hem-hal { position: absolute; z-index: 0; pointer-events: none; opacity: 0; background: #010603; box-shadow: inset 0 0 28px rgba(0, 255, 65, .3); }
.matrix.hem .matrix-visning, .matrix.hem .matrix-duk { transform-origin: 50% 50%; transition: none; }
body.matrix-hem > :is(.topp, .ggb-ram, .newton, .newton-bubbla, .ljus-hal, .pekpinne) { transition: none !important; }

/* ---- Som i en dröm ------------------------------------------------------------------- */
.matrix.drommer { pointer-events: none; animation: matrix-drom 2.6s ease-in both; }
@keyframes matrix-drom {
  0% { filter: none; opacity: 1; transform: none; }
  45% { filter: blur(7px) brightness(1.35) saturate(.8); opacity: .9; }
  100% { filter: blur(28px) brightness(2) saturate(.2); opacity: 0; transform: scale(1.08); }
}

/* Smalare än 340 px: bara ikonerna, i kvadratiska knappar. */
@media (max-width: 339px) { .matrix-knapp { padding: 0; justify-content: center; } .matrix-knapp .mk-text { display: none; } }

/* ---- Mobil: sidhuvudet får plats på 375 px. Börja om blir bara pilen (texten finns i aria-label). ---- */
@media (max-width: 440px) {
  .topp { padding: 0 8px; }
  .topp .knappar { gap: 6px; }
  #borja-om { width: 30px; padding: 0; }
  #borja-om span { display: none; }
  .exempel-knapp { padding: 0 9px; }
  .fly-knapp { padding: 0 8px; letter-spacing: .06em; font-size: 10px; }
  .fly-knapp.med-bild { height: 27px; }
  .matrix-knapp { height: 50px; padding: 0 14px 0 12px; gap: 8px; font-size: 15px; letter-spacing: .12em; }
  .pac-niva { gap: 3px; }
  .pac-niva i { width: 19px; height: 21px; font-size: 11px; }
  .matrix-hud.pac .hud-liv { font-size: 12px; }
}

/* ---- Pac-Man i retrovärlden (pac-retro.js, klassen retro på lagret) ----------------------------------------
   Rickard 24/10: Pac-Man är en egen värld i stil med hans mall, en synthwave-affisch (verktyg/pacman-stil.webp), och
   designbilderna ur ChatGPT (utanför repot). Kantiga former med mörk skugga snett nedåt i stället för grön glöd, en
   gradient från gult via rött till blått, vit innerkontur, ljus text och rubriken i neonturkos skrivstil. */
/* Typsnittet är Exo 2 kursiv (SIL OFL, typsnitt/OFL.txt), en latinsk delmängd med − och hårt mellanslag. Filen är
   kursiv men anges som normal, så att webbläsaren inte lutar den en gång till. Skyltarna på canvas (pac-retro.js)
   använder samma typsnitt. */
@font-face { font-family: "Exo 2 retro"; src: url(typsnitt/exo2-kursiv.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
.matrix.retro {
  --retro-skugga: #1b0b3d; --retro-gul: #ffd23f; --retro-orange: #ff8a2b; --retro-rod: #ff3d6e; --retro-lila: #a73cff; --retro-bla: #4b5cff;
  --retro-cyan: #3fe0ff; --retro-text: #fff6e2; --retro-yta: #2a1470;
  --retro-typ: "Exo 2 retro", "Arial Black", "Segoe UI Black", "Helvetica Neue", Arial, sans-serif;
  --retro-skrift: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
}
.matrix.retro.svart { background: #4a2bb0; }
.matrix.retro::after { background: repeating-linear-gradient(0deg, rgba(30, 0, 70, .1) 0 1px, transparent 1px 3px); }
/* Frågan, överst och i kortet (Rickard 25/10: "mycket mer ... stylized ... att den passar temat"). Samma kväll: "otydligt
   skrivet ... det ser ut som det är ... sprickor ... som någon har målat med tuschpenna över bokstäverna". Därför en hel,
   jämn fyllning i en färg, och retrokänslan i konturen, skuggan och den rosa glöden runt bokstäverna, inte i dem. Ingen
   gradient i texten och ingen text-stroke: Exo 2 är ett variabelt typsnitt, och strecket ritade konturerna där
   bokstävernas delar möts, som sprickor. Konturen är text-shadow åt åtta håll. Formeln (span.formel, retroFraga i
   matrix.js) har samma stil som orden och bryts bara inte. HUD:en och kortet ligger över skanlinjerna (.matrix::after). */
.matrix.retro :is(.matrix-hud, .pac-stor) { z-index: 6; }
.matrix.retro :is(.matrix-hud.pac .hud-typ, .pac-stor > span) {
  --kant: var(--retro-skugga);
  font-family: var(--retro-typ); font-weight: 800; letter-spacing: .03em; word-spacing: .14em; color: #fffaf0;
  text-shadow: 0 -.065em 0 var(--kant), .065em 0 0 var(--kant), 0 .065em 0 var(--kant), -.065em 0 0 var(--kant),
    .046em .046em 0 var(--kant), -.046em .046em 0 var(--kant), .046em -.046em 0 var(--kant), -.046em -.046em 0 var(--kant),
    .09em .11em 0 var(--kant), 0 0 .45em rgba(255, 63, 190, .85);
}
.matrix.retro :is(.matrix-hud.pac .hud-typ, .pac-stor > span) .formel { white-space: nowrap; }
/* k och m i egna färger (matrix.js, kmDelar): x-termen och «k = …» i gult, det som läggs till i turkos. Konturen och
   glöden är som i resten av frågan, så att de är lika lätta att läsa. */
.matrix.retro :is(.matrix-hud.pac .hud-typ, .pac-stor > span) .formel .k { color: #ffd84a; }
.matrix.retro :is(.matrix-hud.pac .hud-typ, .pac-stor > span) .formel .m { color: #6ff4ff; }
/* Frågan som neonskylt (Rickard 28/10 om "hur den här frågan i mitten ser ut, hur det är presenterat", och han valde
   samordnarens förslag: «En neonram som flimrar till när frågan tänds»). Ramen är två neonrör med rundade hörn, ett
   rosa ytterst och ett tunnare turkos innanför, med en mörk halvgenomskinlig platta bakom texten, så att frågan syns
   ännu bättre mot den ljusa himlen. Texten har samma storlek som förut, och ramen ligger utanför den (::before och
   ::after), så att HUD:en och kortet har kvar sina mått. Samma skylt står i kortet och överst, så att den flyger upp
   med kortet. När frågan tänds (klassen puls överst, kortet när det visas) flimrar rören till som ett lysrör som startar,
   och sedan surrar de svagt: var sjunde sekund blinkar de till. */
.matrix.retro :is(.matrix-hud.pac .hud-typ, .pac-stor > span) { position: relative; isolation: isolate; }
.matrix.retro :is(.matrix-hud.pac .hud-typ, .pac-stor > span)::before,
.matrix.retro :is(.matrix-hud.pac .hud-typ, .pac-stor > span)::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: .38em; }
.matrix.retro :is(.matrix-hud.pac .hud-typ, .pac-stor > span)::before {
  inset: -.2em -.5em -.16em; border: .085em solid #ffd2f4; background: rgba(28, 8, 74, .5);
  box-shadow: 0 0 .1em #ff4fd8, 0 0 .35em #ff4fd8, 0 0 .8em rgba(255, 79, 216, .55), inset 0 0 .1em #ff4fd8, inset 0 0 .45em rgba(255, 79, 216, .45);
  animation: neon-surr 7s linear 1.5s infinite;
}
.matrix.retro :is(.matrix-hud.pac .hud-typ, .pac-stor > span)::after {
  inset: -.07em -.37em -.03em; border: .04em solid #d8fbff;
  box-shadow: 0 0 .08em #3fe0ff, 0 0 .25em rgba(63, 224, 255, .8), inset 0 0 .1em rgba(63, 224, 255, .7);
  animation: neon-surr 7s linear 1.62s infinite;
}
/* I kortet är frågan ett block lika brett som kortet, så rören går närmare texten där. */
.matrix.retro .pac-stor > span::before { inset: -.14em -.28em -.1em; }
.matrix.retro .pac-stor > span::after { inset: -.03em -.17em .01em; }
.matrix.retro .matrix-hud.pac .hud-typ.puls::before, .matrix.retro .pac-stor.syns > span::before { animation: neon-tand 1s steps(1, end), neon-surr 7s linear 1.5s infinite; }
.matrix.retro .matrix-hud.pac .hud-typ.puls::after, .matrix.retro .pac-stor.syns > span::after { animation: neon-tand 1.1s steps(1, end) .06s both, neon-surr 7s linear 1.62s infinite; }
@keyframes neon-tand { 0% { opacity: 0; } 10% { opacity: 1; } 16% { opacity: .12; } 27% { opacity: 1; } 33% { opacity: .3; } 45% { opacity: 1; } 52% { opacity: .55; } 60%, 100% { opacity: 1; } }
@keyframes neon-surr { 0%, 95% { opacity: 1; } 95.6% { opacity: .55; } 96.3% { opacity: 1; } 97% { opacity: .75; } 97.6%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .matrix.retro :is(.matrix-hud.pac .hud-typ, .pac-stor > span)::before, .matrix.retro :is(.matrix-hud.pac .hud-typ, .pac-stor > span)::after { animation: none; }
}
/* En ny fråga studsar ner på sin plats (puls i matrix.js). Utan fill: klassen puls sitter kvar, och då skulle
   animationens opacity gå före vantar medan nästa fråga står i kortet. */
.matrix.retro .matrix-hud.pac .hud-typ.puls { animation: retro-fraga .8s cubic-bezier(.2, .8, .3, 1.25); }
@keyframes retro-fraga { 0% { opacity: 0; transform: translateY(-.35em) scale(1.3); } 55% { opacity: 1; transform: scale(.97); } 100% { opacity: 1; transform: none; } }
/* Nivårutorna som en arkadtavla (Rickard 28/10 om "level ett, två, tre, fyra, de här rutorna", och han valde
   samordnarens förslag: «Klarade rutor lyser i neon, nästa pulserar och de som är kvar är släckta»). Tavlan är en mörk
   glasplatta med ram i solnedgångens gradient och hård skugga, och rutorna är lampor. Varje ruta har sin neonfärg
   (--neon) längs gradienten, gul, orange, rosa, lila och turkos, så att tavlan tänds som en regnbåge rätt för rätt.
   En klar ruta lyser som ett neonrör med glöd runt och i rutan och ✓ i vitt. Rutan eleven arbetar med lyser svagt i sin
   färg och slår till på varje taktslag i «Bad» (klassen slag, matrix.js, nivaSlag). Utan takt (innan låten börjat, eller
   ljudet av) pulserar den i låtens tempo av sig själv. Den nyss klarade tänds som ett lysrör, med fladder, och de som är
   kvar är släckta lampor med mörkt glas och en svag siffra. Tavlans ram ligger utanför rutorna, så HUD:en har kvar sin
   höjd (pacHud). */
.matrix.retro .pac-niva { position: relative; isolation: isolate; }
.matrix.retro .pac-niva::before {
  content: ""; position: absolute; z-index: -1; inset: calc(var(--pac-ruta, 38px) * -.14) calc(var(--pac-ruta, 38px) * -.18); pointer-events: none;
  border: 3px solid transparent; box-shadow: 4px 4px 0 var(--retro-skugga);
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 6px) padding-box, linear-gradient(#170a44, #0b0528) padding-box,
    linear-gradient(var(--retro-gul), var(--retro-rod) 50%, var(--retro-lila) 75%, var(--retro-cyan)) border-box;
}
.matrix.retro .pac-niva i { --neon: var(--retro-gul); }
.matrix.retro .pac-niva i:nth-child(2) { --neon: var(--retro-orange); }
.matrix.retro .pac-niva i:nth-child(3) { --neon: #ff3d9e; }
.matrix.retro .pac-niva i:nth-child(4) { --neon: #b44cff; }
.matrix.retro .pac-niva i:nth-child(5) { --neon: var(--retro-cyan); }
.matrix.retro .pac-niva i {
  border: 3px solid #33246e; border-radius: 0; color: #4f3f8e; font-family: var(--retro-typ); text-shadow: none;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .07), transparent 55%), linear-gradient(#1a0d48, #0e0630);
  box-shadow: 3px 3px 0 var(--retro-skugga), inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.matrix.retro .pac-niva i.klar {
  border-color: color-mix(in srgb, var(--neon) 40%, #fff); color: #fff;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--neon) 55%, #fff), color-mix(in srgb, var(--neon) 75%, transparent) 38%, color-mix(in srgb, var(--neon) 28%, #12073a) 82%);
  box-shadow: 3px 3px 0 var(--retro-skugga), 0 0 8px var(--neon), 0 0 22px color-mix(in srgb, var(--neon) 75%, transparent), inset 0 0 10px var(--neon);
  text-shadow: 0 0 3px #fff, 0 0 9px var(--neon), 0 0 16px var(--neon);
}
.matrix.retro .pac-niva i.nu {
  position: relative; isolation: isolate; animation: none;
  border-color: color-mix(in srgb, var(--neon) 55%, #33246e); color: color-mix(in srgb, var(--neon) 55%, #fff);
  text-shadow: 0 0 8px color-mix(in srgb, var(--neon) 80%, transparent);
}
/* Glöden ligger i ::after, under siffran, och bara dess opacitet animeras. Rutan själv skalas bara. Då går
   animationerna i grafikkortets lager och sidan räknas inte om i varje bildruta, som när ramen och skuggan animerades
   (0,1–0,3 ms per bildruta, 28/10). */
.matrix.retro .pac-niva i.nu::after {
  content: ""; position: absolute; z-index: -1; inset: -3px; pointer-events: none; opacity: 0;
  border: inherit; border-color: color-mix(in srgb, var(--neon) 35%, #fff);
  box-shadow: 0 0 10px var(--neon), 0 0 24px var(--neon), inset 0 0 12px var(--neon);
  animation: niva-vanta 1.05s ease-in-out infinite;
}
@keyframes niva-vanta { 50% { opacity: .5; } }
/* Två lika animationer som byts på varannat slag, så att den startar om utan att sidan behöver räknas om. */
.matrix.retro .pac-niva.takt i.nu::after { animation: none; }
.matrix.retro .pac-niva.takt i.nu.slag-a { animation: niva-slag-a .46s ease-out; }
.matrix.retro .pac-niva.takt i.nu.slag-b { animation: niva-slag-b .46s ease-out; }
.matrix.retro .pac-niva.takt i.nu.slag-a::after { animation: niva-glod-a .46s ease-out; }
.matrix.retro .pac-niva.takt i.nu.slag-b::after { animation: niva-glod-b .46s ease-out; }
@keyframes niva-slag-a { 0% { transform: scale(1.07); } }
@keyframes niva-slag-b { 0% { transform: scale(1.07); } }
@keyframes niva-glod-a { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes niva-glod-b { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 440px) { .matrix.retro .pac-niva::before { inset: -4px -5px; border-width: 2px; } .matrix.retro .pac-niva i { border-width: 2px; } .matrix.retro .pac-niva i.nu::after { inset: -2px; } }
.matrix.retro .pac-niva i.ny { animation: niva-tands .95s steps(1, end); }
@keyframes niva-tands {
  0% { filter: brightness(.25); transform: scale(1.18); } 8% { filter: brightness(2.6); } 16% { filter: brightness(.35); } 26% { filter: brightness(2.2); transform: scale(1.1); }
  38% { filter: brightness(.6); } 50% { filter: brightness(1.9); transform: scale(1.04); } 64% { filter: brightness(1.2); } 100% { filter: none; transform: none; }
}
.matrix.retro .matrix-hud.pac .hud-liv { color: #ff3f9e; text-shadow: 3px 3px 0 var(--retro-skugga), 0 0 10px rgba(255, 63, 158, .6); }
.matrix.retro .matrix-hud.pac .hud-liv.hjartan { text-shadow: none; }
/* Frågekortet: en platta med trappsteg i hörnen, ram i gradienten, lila yta med vit kant, och skugga snett nedåt. */
.matrix.retro .pac-stor {
  --steg: 7px; color: var(--retro-text); font-family: var(--retro-typ); font-weight: 900; text-shadow: 3px 3px 0 var(--retro-skugga);
  filter: drop-shadow(8px 8px 0 rgba(27, 11, 61, .85));
}
.matrix.retro .pac-stor::before, .matrix.retro .pac-stor::after {
  clip-path: polygon(calc(2 * var(--steg)) 0, calc(100% - 2 * var(--steg)) 0, calc(100% - 2 * var(--steg)) var(--steg), calc(100% - var(--steg)) var(--steg),
    calc(100% - var(--steg)) calc(2 * var(--steg)), 100% calc(2 * var(--steg)), 100% calc(100% - 2 * var(--steg)), calc(100% - var(--steg)) calc(100% - 2 * var(--steg)),
    calc(100% - var(--steg)) calc(100% - var(--steg)), calc(100% - 2 * var(--steg)) calc(100% - var(--steg)), calc(100% - 2 * var(--steg)) 100%, calc(2 * var(--steg)) 100%,
    calc(2 * var(--steg)) calc(100% - var(--steg)), var(--steg) calc(100% - var(--steg)), var(--steg) calc(100% - 2 * var(--steg)), 0 calc(100% - 2 * var(--steg)),
    0 calc(2 * var(--steg)), var(--steg) calc(2 * var(--steg)), var(--steg) var(--steg), calc(2 * var(--steg)) var(--steg));
}
.matrix.retro .pac-stor::before { background: linear-gradient(var(--retro-gul), var(--retro-orange) 30%, var(--retro-rod) 55%, var(--retro-lila) 78%, var(--retro-cyan)); }
.matrix.retro .pac-stor::after {
  --steg: 5px; inset: 6px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, .85);
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px), linear-gradient(#3b1aa8, #5a22c0 60%, #7a2bd0);
}
.matrix.retro .pac-stor > span { animation: retro-in .45s steps(1, end); }
.matrix.retro .pac-stor small {
  justify-content: center; padding: 0 0 6px; background: none; color: #8ff6ff; text-transform: none; letter-spacing: 0;
  font: 400 clamp(22px, 4.6vw, 34px)/1.1 var(--retro-skrift); text-shadow: 2px 2px 0 #ff4fd8, 0 0 12px rgba(63, 224, 255, .8);
}
.matrix.retro .pac-stor small::after { display: none; }
/* Frågans sort i kortet: samma rena stil som frågan, i gult. */
.matrix.retro .pac-stor .pk-sort {
  color: var(--retro-gul); background: none; animation: none; font-family: var(--retro-typ);
  text-shadow: 0 -2px 0 var(--retro-skugga), 2px 0 0 var(--retro-skugga), 0 2px 0 var(--retro-skugga), -2px 0 0 var(--retro-skugga), 3px 3px 0 var(--retro-skugga);
}
.matrix.retro .pac-stor .tb-tid { border: 2px solid rgba(255, 246, 226, .8); background: #1a0c4e; }
.matrix.retro .pac-stor .tb-tid::before { background: linear-gradient(90deg, var(--retro-gul), var(--retro-rod), var(--retro-cyan)); box-shadow: none; }
/* Pac-Mans slutstatistik (Rekord och slutstatistik i matrix.js): frågekortets arkadplatta med samma trappstegshörn och
   ram, «Pac-Man» i neonturkos skrivstil, poängen eller «Nytt rekord» i gult, och stapeln i solnedgångens gradient med
   hård skugga, som fylls i steg. Allt blinkar fram som på en arkadskärm. Reglerna är egna, så att frågekortet kan ändras
   utan att rutan gör det. */
.matrix.retro .matrix-slut {
  --steg: 7px; z-index: 6; color: var(--retro-text); font-family: var(--retro-typ); font-weight: 800; text-shadow: 3px 3px 0 var(--retro-skugga);
  filter: drop-shadow(8px 8px 0 rgba(27, 11, 61, .85));
}
.matrix.retro .matrix-slut::before, .matrix.retro .matrix-slut::after {
  clip-path: polygon(calc(2 * var(--steg)) 0, calc(100% - 2 * var(--steg)) 0, calc(100% - 2 * var(--steg)) var(--steg), calc(100% - var(--steg)) var(--steg),
    calc(100% - var(--steg)) calc(2 * var(--steg)), 100% calc(2 * var(--steg)), 100% calc(100% - 2 * var(--steg)), calc(100% - var(--steg)) calc(100% - 2 * var(--steg)),
    calc(100% - var(--steg)) calc(100% - var(--steg)), calc(100% - 2 * var(--steg)) calc(100% - var(--steg)), calc(100% - 2 * var(--steg)) 100%, calc(2 * var(--steg)) 100%,
    calc(2 * var(--steg)) calc(100% - var(--steg)), var(--steg) calc(100% - var(--steg)), var(--steg) calc(100% - 2 * var(--steg)), 0 calc(100% - 2 * var(--steg)),
    0 calc(2 * var(--steg)), var(--steg) calc(2 * var(--steg)), var(--steg) var(--steg), calc(2 * var(--steg)) var(--steg));
}
.matrix.retro .matrix-slut::before { background: linear-gradient(var(--retro-gul), var(--retro-orange) 30%, var(--retro-rod) 55%, var(--retro-lila) 78%, var(--retro-cyan)); }
.matrix.retro .matrix-slut::after {
  --steg: 5px; inset: 6px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, .85);
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px), linear-gradient(#3b1aa8, #5a22c0 60%, #7a2bd0);
}
.matrix.retro .matrix-slut > * { animation: retro-in .45s steps(1, end) both; }
.matrix.retro .matrix-slut small {
  justify-content: center; padding: 0 0 2px; background: none; color: #8ff6ff; text-transform: none; letter-spacing: 0;
  font: 400 clamp(22px, 4.6vw, 32px)/1.1 var(--retro-skrift); text-shadow: 2px 2px 0 #ff4fd8, 0 0 12px rgba(63, 224, 255, .8);
}
.matrix.retro .matrix-slut small::after { display: none; }
.matrix.retro .matrix-slut .sl-rubrik {
  --kant: var(--retro-skugga); font-family: var(--retro-typ); font-weight: 900; letter-spacing: .03em; color: #fffaf0;
  text-shadow: 0 -.065em 0 var(--kant), .065em 0 0 var(--kant), 0 .065em 0 var(--kant), -.065em 0 0 var(--kant), .09em .11em 0 var(--kant), 0 0 .45em rgba(255, 63, 190, .85);
}
.matrix.retro .matrix-slut.rekord .sl-rubrik { color: var(--retro-gul); animation: retro-in .45s steps(1, end) both, sl-blink .3s steps(1, end) .45s 4; }
.matrix.retro .sl-rad { color: var(--retro-text); }
.matrix.retro .sl-tal.ny { color: var(--retro-gul); text-shadow: 3px 3px 0 var(--retro-skugga); }
.matrix.retro .sl-tal.ny::after { color: #ff4fd8; }
.matrix.retro .sl-under { color: #8ff6ff; letter-spacing: .12em; opacity: 1; }
.matrix.retro .sl-typ > span { color: var(--retro-text); }
.matrix.retro .sl-typ > i { height: 14px; border: 2px solid rgba(255, 246, 226, .85); background: #1a0c4e; box-shadow: 3px 3px 0 var(--retro-skugga); }
.matrix.retro .sl-typ > i::before { background: linear-gradient(90deg, var(--retro-gul), var(--retro-rod), var(--retro-cyan)); box-shadow: none; animation: sl-fyll .5s steps(6, end) .2s both; }
.matrix.retro .sl-typ > b { color: var(--retro-gul); }
.matrix.retro .matrix-slut .tb-tid { border: 2px solid rgba(255, 246, 226, .8); background: #1a0c4e; }
.matrix.retro .matrix-slut .tb-tid::before { background: linear-gradient(90deg, var(--retro-gul), var(--retro-rod), var(--retro-cyan)); box-shadow: none; }
.matrix.retro .matrix-meddelande { font-family: var(--retro-typ); font-weight: 900; color: var(--retro-text); text-shadow: 4px 4px 0 var(--retro-skugga), 0 0 18px rgba(255, 79, 216, .55); }
.matrix.retro .matrix-meddelande small { color: #8ff6ff; text-transform: none; letter-spacing: 0; font: 400 .7em/1.1 var(--retro-skrift); text-shadow: 2px 2px 0 #ff4fd8; opacity: 1; }
/* Text som kommer fram blinkar till som på en arkadskärm (avkoda och kodaIn i matrix.js). */
.matrix.retro .retro-in { animation: retro-in .45s steps(1, end); }
@keyframes retro-in { 0%, 40% { opacity: 0; } 20%, 60%, 100% { opacity: 1; } }
/* Lämna och Ljud i retrovärlden (Rickard 25/10: "större i hörnen och ... göras om visuellt ... i Pacman-spelet ... inspirerat
   av ... temat som Pacman har"): arkadknappar som frågekortet. Ramen i solnedgångens gradient med trappstegshörn (--steg),
   en lila fyllning med vit innerkant, en hård skugga snett nedåt som försvinner när knappen trycks ner, ikonen i gult och
   etiketten i Exo 2. De är större än i matrix, också på telefonen, där labyrinten lämnar plats under sig (pacCell). */
.matrix.retro .matrix-knapp {
  --mk-farg: var(--retro-gul); --mk-text: var(--retro-text); --mk-font: var(--retro-typ); --steg: 5px;
  --mk-fyll: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 7px), linear-gradient(#3b1aa8, #5a22c0 60%, #7a2bd0);
  height: 60px; min-width: 60px; padding: 0 24px 0 19px; gap: 12px; font-size: 21px; font-weight: 800; letter-spacing: .03em; text-transform: none;
  opacity: 1; filter: drop-shadow(5px 5px 0 rgba(27, 11, 61, .9)); transition: filter .15s, translate .08s;
}
.matrix.retro .matrix-knapp::before, .matrix.retro .matrix-knapp::after {
  clip-path: polygon(calc(2 * var(--steg)) 0, calc(100% - 2 * var(--steg)) 0, calc(100% - 2 * var(--steg)) var(--steg), calc(100% - var(--steg)) var(--steg),
    calc(100% - var(--steg)) calc(2 * var(--steg)), 100% calc(2 * var(--steg)), 100% calc(100% - 2 * var(--steg)), calc(100% - var(--steg)) calc(100% - 2 * var(--steg)),
    calc(100% - var(--steg)) calc(100% - var(--steg)), calc(100% - 2 * var(--steg)) calc(100% - var(--steg)), calc(100% - 2 * var(--steg)) 100%, calc(2 * var(--steg)) 100%,
    calc(2 * var(--steg)) calc(100% - var(--steg)), var(--steg) calc(100% - var(--steg)), var(--steg) calc(100% - 2 * var(--steg)), 0 calc(100% - 2 * var(--steg)),
    0 calc(2 * var(--steg)), var(--steg) calc(2 * var(--steg)), var(--steg) var(--steg), calc(2 * var(--steg)) var(--steg));
}
.matrix.retro .matrix-knapp::before { background: linear-gradient(var(--retro-gul), var(--retro-orange) 30%, var(--retro-rod) 55%, var(--retro-lila) 78%, var(--retro-cyan)); }
.matrix.retro .matrix-knapp::after { --steg: 4px; inset: 4px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, .85); }
.matrix.retro .matrix-knapp:hover, .matrix.retro .matrix-knapp:focus-visible { filter: drop-shadow(5px 5px 0 rgba(27, 11, 61, .9)) drop-shadow(0 0 14px rgba(255, 79, 216, .75)); translate: -1px -1px; }
.matrix.retro .matrix-knapp:active { filter: drop-shadow(1px 1px 0 rgba(27, 11, 61, .9)); translate: 4px 4px; }
.matrix.retro .mk-ikon { width: 26px; height: 26px; stroke-width: 3; filter: drop-shadow(2px 2px 0 var(--retro-skugga)); }
.matrix.retro .mk-text { text-shadow: 2px 2px 0 var(--retro-skugga); }
/* Ljudet av: ramen grå och knappen svagare, som en släckt arkadknapp. */
.matrix.retro .matrix-ljud.av { --mk-farg: #b9a8e6; --mk-text: rgba(255, 246, 226, .65); }
.matrix.retro .matrix-ljud.av::before { background: linear-gradient(#cfc4f2, #8a78c8 55%, #5a4a9a); }
@media (max-width: 440px) {
  .matrix.retro .matrix-knapp { height: 56px; min-width: 56px; padding: 0 17px 0 14px; gap: 9px; font-size: 18px; }
}
@media (max-width: 339px) { .matrix.retro .matrix-knapp { padding: 0; } }
/* Pausknappen är kvadratisk och lika stor i retrovärlden som i matrix (46 px, PAUS_PLATS i matrix.js), med arkadramen. */
.matrix.retro .matrix-knapp.matrix-paus { width: 46px; height: 46px; min-width: 0; padding: 0; }
/* Knapparna vid övergångarna (Rickard 27/10: "Dessa ljud på och avbryt knappar skall inte synnas förrän man är inne i
   skeppspelet, vid alla övergångar skall knapparna döljas, och egentligen som alla andra elemenet vid övergångarna
   animeras snyggt bort. för att sedan animeras snyggt fram igen."): Ljud och Lämna glider ner ur bild och pausknappen upp,
   medan de tonas ut, och de kommer samma väg tillbaka. matrix.js sätter .knappar på lagret när Ljud och Lämna ska synas
   och .kan-pausa när pausknappen ska det (visaKnappar). Glidningen är transform, så att knappens tryck (translate) står
   kvar, och gömd går en knapp inte att klicka på (pointer-events, och visibility när den glidit klart). Reglerna står
   sist, så att de går före retrovärldens knappar, som har samma specificitet. */
.matrix :is(.matrix-knapp.matrix-stang, .matrix-knapp.matrix-ljud, .matrix-knapp.matrix-paus) {
  transition: opacity .35s ease-out, transform .5s cubic-bezier(.2, .9, .25, 1), visibility 0s, filter .2s, translate .12s;
}
.matrix:not(.knappar) :is(.matrix-stang, .matrix-ljud), .matrix:not(.kan-pausa) .matrix-knapp.matrix-paus {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease-in, transform .4s cubic-bezier(.55, 0, .75, .3), visibility 0s .4s, filter .2s, translate .12s;
}
.matrix:not(.knappar) :is(.matrix-stang, .matrix-ljud) { transform: translateY(calc(100% + 24px)); }
.matrix:not(.kan-pausa) .matrix-knapp.matrix-paus { transform: translateY(calc(-100% - 20px)); }