/* Spelbiblioteket och emulatorn. Samma ark, samma färger och samma typsnitt
   som listan hade när den var handskriven - det som är nytt är att varje
   kassett bär sin egen beskrivning, och att raden har två utgångar i stället
   för en: hämta filen, eller spela den där den står. */

:root{
  --papper:#fff9e9; --gul:#f4d44d; --gul-ljus:#ffe87e;
  --gron:#b6d4a0; --black:#17211b; --linje:rgba(255,249,233,.22);
  --mono:"DM Mono","Courier New",monospace;
  --sans:Manrope,Arial,sans-serif;
  --panel:linear-gradient(115deg,rgba(18,29,23,.95),rgba(31,55,42,.86));
}
*{box-sizing:border-box}
body{
  margin:0; padding:2.5rem 1.25rem 4rem;
  background:var(--gron); color:var(--papper);
  font-family:var(--sans); line-height:1.5;
  display:flex; justify-content:center;
}
.ark{width:100%; max-width:46rem}

/* Samma logga som förstasidan, hämtad ur temat så att den följer med om den
   byts ut där. */
.topp{margin:0 0 1.5rem}
.logga{display:block; width:min(18rem,80%); height:auto; margin:0 0 .8rem}
.overrad{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(23,33,27,.62); margin:0;
}

/* Emulatorknappen satt tidigare på en egen rad mellan loggan och listan och
   sköt ner allt innehåll. Den hör hemma i huvudet, på samma rad som titeln:
   lika synlig, men inte längre i vägen för det man kom hit för att läsa.
   Under 34rem finns inte plats bredvid - då lägger den sig under titeln. */
.ark:not(.emu) .topp{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:.9rem 1.25rem;
}
.titel{min-width:min(18rem,100%)}
.titel .logga{margin-bottom:.8rem}
.topp .storknapp{flex:none; margin-bottom:.1rem}

.knapprad{margin:0 0 1.75rem}
.storknapp{
  display:inline-block; text-decoration:none;
  background:var(--black); color:var(--gul);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.7rem 1.1rem; border-radius:10px;
  border:1px solid rgba(23,33,27,.35);
}
.storknapp:hover,.storknapp:focus-visible{background:#22322a; outline:none}
.storknapp:focus-visible{box-shadow:0 0 0 3px rgba(23,33,27,.35)}

section{
  background:var(--panel);
  border:1px solid var(--linje); border-radius:14px;
  padding:1.25rem 1.25rem 1.05rem; margin:0 0 1.1rem;
}
.rubrik{display:flex; align-items:baseline; gap:.7rem; margin-bottom:.5rem}
h2{
  margin:0; font-family:var(--mono); font-size:.82rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gul);
}
section.vilande h2{color:#9fb392}
ul{list-style:none; margin:0; padding:0}
li{padding:.85rem 0}
li+li{border-top:1px solid rgba(255,249,233,.12)}
.rad{display:flex; align-items:center; gap:.85rem; flex-wrap:wrap}
.kod{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em;
  background:rgba(255,249,233,.1); border:1px solid var(--linje);
  padding:.16rem .45rem; border-radius:5px; min-width:2.9rem; text-align:center;
}
.namn{flex:1; font-weight:600; min-width:9rem}
.fil{font-family:var(--mono); font-size:.72rem; color:rgba(255,249,233,.5)}
/* Tekniska data, en rad per uppgift. Etiketten i mono och versaler så att
   raderna går att skanna nedåt utan att läsas; värdet i brödtext. Allt i
   listan är hämtat ur kassettfilen av katalog.py, inte skrivet för hand. */
.teknik{
  margin:.55rem 0 .55rem; max-width:38rem;
  border-left:2px solid rgba(244,212,77,.26); padding-left:.85rem;
}
.teknik div{display:flex; gap:.65rem; flex-wrap:wrap; padding:.06rem 0}
.teknik dt{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(255,249,233,.44);
  min-width:9rem; padding-top:.12rem;
}
.teknik dd{margin:0; font-size:.82rem; color:rgba(255,249,233,.88)}

@media (max-width:520px){
  .teknik dt{min-width:0; flex:0 0 100%}
}
.lankar{display:flex; gap:1.1rem; align-items:center}
.hamta,.spela{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  text-decoration:none; color:var(--gul); border-radius:6px; padding:.2rem .1rem;
}
.spela{color:var(--gul-ljus); font-weight:700}
.hamta:hover,.spela:hover,.hamta:focus-visible,.spela:focus-visible{
  text-decoration:underline; outline:none;
}
.hamta:focus-visible,.spela:focus-visible{box-shadow:0 0 0 2px var(--gul)}
section.vilande .hamta{color:#9fb392}
section.vilande .spela{color:#b9cbab}
.fotnot{margin:.9rem 0 0; font-size:.8rem}
.fotnot a{color:var(--gul)}

footer{margin-top:2rem; font-size:.8rem; color:rgba(23,33,27,.6)}
footer a{color:rgba(23,33,27,.85)}

/* ---------------------------------------------------------------- emulator */

.emu{max-width:52rem}
.tillbaka{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(23,33,27,.7); text-decoration:none;
}
.tillbaka:hover{color:var(--black)}

.skarmpanel{
  background:var(--panel); border:1px solid var(--linje);
  border-radius:14px; padding:1.1rem; margin:0 0 1.1rem;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
}
.skarmram{
  background:#0b0f0c; border:1px solid rgba(255,249,233,.14);
  border-radius:10px; padding:.65rem; line-height:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
}
canvas#skarm{
  display:block; width:480px; height:432px; max-width:100%;
  image-rendering:pixelated; image-rendering:crisp-edges;
  background:#0b0f0c;
}
.status{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.06em;
  color:rgba(255,249,233,.6); text-align:center; min-height:1.2em;
}
.status.fel{color:#ff9a86}

.valjare{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:center}
select,button.knapp,label.filknapp{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.06em;
  background:rgba(255,249,233,.08); color:var(--papper);
  border:1px solid var(--linje); border-radius:8px;
  padding:.45rem .7rem; cursor:pointer;
}
select{max-width:min(100%,22rem)}
button.knapp:hover,label.filknapp:hover,select:hover{background:rgba(255,249,233,.16)}
button.knapp[aria-pressed="true"]{background:var(--gul); color:var(--black); border-color:var(--gul)}
input[type=file]{display:none}

/* Skärmknappar. Finns för pekskärmar men fungerar med mus också, och de
   ligger kvar på stora skärmar eftersom de visar knappnamnen. */
/* Knapparna sitter som på en riktig Game Boy: styrkorset till vänster, A och
   B till höger, och SELECT och START mitt under dem båda - inte emellan dem,
   som de gjorde förut. Pillerformade och lutade, för det är så de ser ut. */
.knappsats{
  display:grid; gap:1.1rem .9rem; width:100%;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "kors  .       ab"
    "mitten mitten mitten";
  align-items:center;
}
.kors{grid-area:kors}
.ab{grid-area:ab}
.mitten{grid-area:mitten}
.kors{display:grid; grid-template-columns:repeat(3,3rem); grid-template-rows:repeat(3,3rem)}
.kors b{grid-area:2/2}
.pad{
  -webkit-user-select:none; user-select:none; touch-action:none;
  background:rgba(255,249,233,.1); border:1px solid var(--linje);
  border-radius:9px; color:var(--papper);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:1rem; cursor:pointer;
}
.pad:active,.pad.nere{background:var(--gul); color:var(--black)}
.upp{grid-area:1/2} .ner{grid-area:3/2} .vanster{grid-area:2/1} .hoger{grid-area:2/3}
.ab{display:flex; gap:.8rem; align-items:center}
.ab .pad{width:3.4rem; height:3.4rem; border-radius:50%; font-weight:700}
.mitten{
  display:flex; flex-direction:row; gap:1.5rem;
  justify-content:center; align-items:center;
}
/* Lutningen är knappens egen, inte radens: på konsolen står de två pillren
   bredvid varandra på samma höjd, var och en vriden. */
.mitten .pad{
  width:5.2rem; height:1.7rem; border-radius:999px;
  font-size:.62rem; letter-spacing:.14em;
  transform:rotate(-25deg);
}

/* Tangentlegenden på /emulator2: par av tangent och knapp, inget annat.
   Egen rad under knappsatsen, och den bryter fritt så att den blir två eller
   tre rader på en telefon i stället för att skjuta ut panelen på bredden. */
.tangenter{
  list-style:none; margin:1.1rem 0 0; padding:.9rem 0 0;
  border-top:1px solid var(--linje);
  display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem .9rem;
}
/* li+li i kassettlistan ritar en skiljelinje mellan posterna. Här ligger
   posterna på rad, så den linjen blev ett streck ovanför varje par. */
.tangenter li{display:flex; align-items:center; gap:.4rem; padding:0; border-top:0}
.tangenter kbd{
  font-family:var(--mono); font-size:.68rem; line-height:1;
  padding:.32rem .45rem; min-width:1.65rem; text-align:center;
  color:var(--papper); background:rgba(255,249,233,.1);
  border:1px solid var(--linje); border-bottom-width:2px; border-radius:5px;
}
.tangenter span{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  color:rgba(255,249,233,.72);
}
/* En telefon har inget tangentbord, så legenden är bara en lista över
   tangenter man inte kan trycka på - och den ligger direkt under knapparna
   man faktiskt använder. Villkoret frågar efter inmatningssättet och inte
   efter skärmbredden: ett litet fönster på en dator behåller legenden, en
   stor pekplatta blir av med den, vilket är rätt håll. */
@media (hover:none) and (pointer:coarse){
  .tangenter{display:none}
}

.hjalp{
  background:var(--panel); border:1px solid var(--linje);
  border-radius:14px; padding:1.1rem 1.25rem; margin:0 0 1.1rem;
}
.hjalp h2{margin-bottom:.7rem}
.hjalp dl{display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem; margin:0}
.hjalp dt{font-family:var(--mono); font-size:.74rem; color:var(--gul)}
.hjalp dd{margin:0; font-size:.85rem; color:rgba(255,249,233,.75)}
.hjalp p{font-size:.84rem; color:rgba(255,249,233,.66)}
.hjalp a,.status a{color:var(--gul)}

.romfakta{
  background:var(--panel); border:1px solid var(--linje);
  border-radius:14px; padding:1.1rem 1.25rem; margin:0 0 1.1rem;
}
.romfakta .rad{margin-bottom:.5rem}
.romfakta .teknik{margin-top:.35rem}

@media (max-width:640px){
  canvas#skarm{width:100%; height:auto; aspect-ratio:160/144}
  /* Styrkorset och A/B stannar på var sin sida även här - det är så man
     håller i en telefon - men de får krympa. SELECT och START ligger kvar
     under dem. */
  .knappsats{gap:.9rem .5rem}
  .kors{grid-template-columns:repeat(3,2.6rem); grid-template-rows:repeat(3,2.6rem)}
  .ab .pad{width:3rem; height:3rem}
}