/* ====================================================================
   C64.NINJA — GEMENSAMT SKAL
   ====================================================================
   Alla tre sidorna (startsidan, /arkad/ och /intro/) ar samma apparat
   sedd i olika lagen. Den har filen ager allt som ar apparaten:
   paletten, temana, typsnitten, kapan runt bildroret, CRT-lagren och
   funktionstangentlisten.

   Sidorna sjalva bidrar bara med det som sker INUTI bildroret —
   terminalen, spelduken, rasterbarsen. Ligger en regel har ska den
   se likadan ut pa alla tre; behover en sida sin egen variant hor den
   hemma i sidans egen <style>.

   FARGORD (viktigt att halla isar):
     --border   kapan runt roret        (sidans yttre bakgrund)
     --screen   insidan av roret        (varje sida far valja sjalv)
     --krom     fargen PA kapan         (listen och dess chips)
     --fg/-dim/-hi   text INNE i roret
   ==================================================================== */

:root {
  /* C64:ans egen palett, i maskinens ordning 0-15. */
  --c64-black:  #000000;
  --c64-white:  #ffffff;
  --c64-red:    #813338;
  --c64-cyan:   #75cec8;
  --c64-purple: #8e3c97;
  --c64-green:  #56ac4d;
  --c64-blue:   #2e2c9b;
  --c64-yellow: #edf171;
  --c64-orange: #8e5029;
  --c64-brown:  #553800;
  --c64-ltred:  #c46c71;
  --c64-dkgrey: #4a4a4a;
  --c64-grey:   #7b7b7b;
  --c64-ltgreen:#a9ff9f;
  --c64-ltblue: #706deb;
  --c64-ltgrey: #b2b2b2;

  --border: var(--c64-ltblue);
  --screen: var(--c64-blue);
  /* --krom maste na 4,5:1 mot --border, for listen ar liten text (7-11 px)
     och undantaget for stor text galler inte. C64-blatt pa ljusblatt gav
     2,60:1 — svart ger 5,08:1 och finns i samma palett. */
  --krom:   var(--c64-black);
  --fg:     #a5a3ff;
  --fg-dim: var(--c64-ltblue);
  --fg-hi:  var(--c64-white);
  --warn:   var(--c64-yellow);
  --err:    var(--c64-ltred);
  --ok:     var(--c64-ltgreen);
}

/* Bildroren. F5 vandrar mellan dem och valet foljer med mellan sidorna
   (se tema.js). Ett tema byter BARA de har variablerna — ingen sida
   behover veta vilket tema som ar valt.

   I de morka temana ar kapan mork, sa kromet maste bli LJUST i stallet for
   att synas: darfor `--krom: var(--fg)` och inte C64-blatt. Det var
   `--fg-dim` forut, vilket bara gav 3,0-3,5:1 mot kapan; `--fg` ger
   6,8-9,2:1. Regeln for alla teman ar densamma: --krom mot --border maste
   klara 4,5:1, for hela listen hanger pa det forhallandet. */
html[data-theme="green"] {
  --border: #1c3a1c; --screen: #071a07;
  --fg: #4fd94f; --fg-dim: #2f8f2f; --fg-hi: #b6ffb6;
  --warn: #b6ff6b; --err: #ff8f6b; --ok: #b6ffb6;
  --krom: var(--fg);
}
html[data-theme="amber"] {
  --border: #3d2a06; --screen: #1a1002;
  --fg: #ffb000; --fg-dim: #a86f00; --fg-hi: #ffd894;
  --warn: #ffd894; --err: #ff7a4d; --ok: #ffd894;
  --krom: var(--fg);
}
html[data-theme="mono"] {
  --border: #2a2a2a; --screen: #0a0a0a;
  --fg: #cfcfcf; --fg-dim: #7d7d7d; --fg-hi: #ffffff;
  --warn: #ffffff; --err: #ffffff; --ok: #ffffff;
  --krom: var(--fg);
}

/* Absoluta sokvagar — filen laddas bade fran / och fran /arkad/. */
@font-face {
  font-family: "PressStart2P";
  src: url("/fonts/pressstart2p.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("/fonts/vt323.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0; padding: 0;
  background: var(--border);
  color: var(--fg);
  font-family: "VT323", ui-monospace, monospace;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .3s steps(4);
}

/* ---- Kapan och bildroret ------------------------------------------ */

/* --tangentbord ar hojden pa mobilens tangentbord. Den sitter pa <html>
   och sätts av skal.js; pa skrivbordet ar den 0 och regeln kostar inget.
   Utan den lagger sig iOS tangentbord OVANPA kapan — position:fixed bryr
   sig inte om att den synliga ytan har krympt — och man ser inte raden
   man skriver pa. */
.bezel {
  position: fixed;
  inset: 0 0 var(--tangentbord, 0px) 0;
  padding: clamp(10px, 2.2vmin, 28px);
  padding-bottom: 0;
  display: flex; flex-direction: column;
}

.crt {
  position: relative; flex: 1; min-height: 0;
  background: var(--screen);
  overflow: hidden;
  transition: background-color .3s steps(4);
}

.scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.20) 0px, rgba(0,0,0,.20) 1px,
    transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
}
.vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ---- Funktionstangentlisten — sajtens enda "krom" ------------------ */

.keys {
  flex: none;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(6px, 1.4vmin, 18px);
  padding: clamp(7px, 1.3vmin, 14px) clamp(2px, .6vmin, 8px);
  font-family: "PressStart2P", "VT323", monospace;
  font-size: clamp(7px, 1.05vmin, 11px);
  line-height: 1.6;
  color: var(--krom);
  user-select: none;
}

.keys .brand { margin-right: auto; letter-spacing: .06em; opacity: .9; }

/* Besoksraknaren. Den ligger FORE varumarket i listen — dels for att den ska
   sta i vanstra hornet, dels for att `margin-right: auto` maste sitta pa nagot
   som ALLTID finns. Raknaren doljer sig nar tjansten pa VPS:en inte svarar,
   och hade den burit auto-marginalen skulle hela listen flytta ihop sig da.
   Skapas av skal.js, se raknaren(). */
/* INGEN `opacity` har. Den staplas med barnets och gjorde raknaren till det
   blekaste i hela listen — etiketten matte 1,60:1 mot kapan. Siffrorna bar
   ett tag `--fg-hi`, men vitt pa den ljusblaa kapan ar bara 4,13:1; nu bar
   hela raknaren --krom och far listens hogsta kontrast. Siffrorna sticker
   ut genom chippet, inte genom en ljusare farg. */
.keys .raknare {
  letter-spacing: .06em;
  white-space: nowrap;
}
.keys .raknare[hidden] { display: none; }
.keys .raknare .siffror {
  margin-left: .5em;
  background: var(--krom); color: var(--border);
  padding: .25em .45em; border-radius: 2px;
}

.keys a, .keys button, .keys .harar {
  color: inherit; background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: .5em;
  white-space: nowrap;
}
/* Hovring/fokus markeras med STRECK och inte med en ljusare farg. Basfargen
   ar redan den mest kontrastrika mot kapan, sa varje fargbyte hade gjort
   texten svagare — och en markering som bara ar farg syns inte for den som
   inte skiljer dem at. */
.keys a:hover, .keys button:hover,
.keys a:focus-visible, .keys button:focus-visible {
  text-decoration: underline;
  text-underline-offset: .25em;
  outline: none;
}

/* Sidan man redan star pa ar med i listen — annars flyttar sig de andra
   posterna nar man byter sida, och listen kanns som tre olika lister.
   Slackt, men inte bortsuddad: .45 gav 1,5:1 och var i praktiken osynlig. */
.keys .harar { cursor: default; opacity: .7; }
.keys .harar:hover { color: inherit; text-decoration: none; }

/* Chippet ar listen inverterad: kapans egen farg PA kromet. Darfor racker
   det att --krom klarar 4,5:1 mot --border — sa galler samma tal har, i
   alla fyra teman, utan att nagon farg behover valjas per tema.
   (Forut: `color: var(--fg-hi)` + `opacity: .9`, vilket i de morka temana
   blev ljus text pa ljus botten — 2,8-3,7:1.) */
.fkey {
  display: inline-block;
  background: var(--krom); color: var(--border);
  padding: .25em .45em; border-radius: 2px;
}

/* ---- Ovrigt -------------------------------------------------------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* En knapp som gommer sig maste sagas upp uttryckligen: reglerna ovanfor
   satter `display: inline-flex`, och display slar [hidden]. Samma falla som
   `.start[hidden]` i introt. */
.keys [hidden] { display: none; }

/* ---- Telefon --------------------------------------------------------
   Pa en telefon finns inga funktionstangenter. Da ar den har listen inte
   dekoration langre utan sajtens ENDA navigering — och som skrivbordslist
   ar posterna 15 px hoga med 7 px text, alltsa omojliga att traffa med ett
   finger. Har blir de riktiga tangenter i stallet: staplade, minst 44 px
   hoga (Apples minsta traffyta) och sa manga som far plats per rad. */
@media (max-width: 560px) {
  .keys .brand { display: none; }
  /* Rutnat och inte flex: en sista rad med bara en knapp pa skulle med
     `flex: 1 1 auto` strackas ut over hela bredden, och HJÄLP sag ut som
     en helt annan sorts knapp an de ovriga. `auto-FILL` (inte auto-fit)
     later de tomma kolumnerna sta kvar tomma, sa varje tangent har samma
     bredd oavsett hur manga som far plats. */
  .keys {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 3px;
    padding: 3px 0 4px;
    font-size: 10px;
    line-height: 1.1;
  }
  .keys a, .keys button, .keys .harar {
    min-height: 44px;
    flex-direction: column;
    justify-content: center;
    gap: .4em;
    border: 1px solid var(--krom);
    border-color: color-mix(in srgb, var(--krom) 45%, transparent);
    border-radius: 3px;
  }
  .keys .harar { opacity: .7; }

  /* Raknaren ar ingen tangent och ska inte ta en tangentplats i rutnatet.
     Den lagger sig pa en egen smal rad overst i listen. */
  .keys .raknare {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 1px 2px 2px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body, .crt { transition: none; }
}
