/* CSS bestämmer hur HTML-elementen ser ut och var de ligger.
   Varje regel är:  väljare { egenskap: värde; }  */

/* :root = hela dokumentet. Namn som börjar med -- är egna variabler.
   --bg används längre ner med var(--bg). Samma färg som PALETTE.background i js/main.js,
   så att sidan inte blinkar i en annan färg innan 3D-scenen hunnit laddas. */
:root {
  --bg: #3d3358;
}

/* * = alla element. Webbläsaren lägger själv på marginaler runt saker;
   det här nollställer dem så att inget skjuter canvasen från kanterna. */
* {
  margin: 0;      /* Avstånd utanför elementet. */
  padding: 0;     /* Avstånd innanför elementets kant. */
  box-sizing: border-box; /* Bredd/höjd räknas inklusive padding och kantlinje. */
}

body {
  background: var(--bg);
}
/* Sidan scrollar: startskärmen (spelet) ligger överst och webbplatsen under (se #site).
   Medan man KÖR (body.playing) och när projektlistan är uppe går sidan inte att scrolla. */
body.playing,
body.list-open {
  overflow: hidden;
}

/* #scene = elementet med id="scene", alltså canvasen som three.js ritar i. */
#scene {
  position: fixed; /* Sitter fast i fönstret, oberoende av resten av sidan. */
  inset: 0;        /* 0 avstånd till alla fyra kanter = fyller hela fönstret. */
  width: 100%;
  height: 100%;
  display: block;  /* En canvas är "inline" från början, vilket ger en liten glipa under den. */
}

/* Vinjetten: en toning från genomskinligt i mitten till mörkt lila i kanterna.
   ellipse = följer fönstrets form. ÄNDRA 0.5 (hur mörkt) och 55% (var den börjar). */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(25, 14, 35, 0.5) 100%);
}

/* Toningen vid resor mellan världar. Täcker hela fönstret, ovanpå canvasen men
   under guiden och panelen (de kommer senare i index.html och hamnar därför ovanpå).
   js/main.js ändrar opacity (0 = osynlig, 1 = helt täckande) och bakgrundsfärgen. */
.fade {
  position: fixed;
  inset: 0;
  opacity: 0;
  background: var(--bg);
  pointer-events: none; /* Klick och touch går rakt igenom. */
}

/* Uppmaningen när bilen står i en ficka: en orange biljett nere i mitten (samma form
   som startknappen), med Enter-tangenten på den lilla stubben till vänster.
   Den poppar upp med en studs och "andas" sedan svagt, så att man inte missar den. */
.park-prompt {
  position: fixed;
  left: 50%;
  bottom: calc(34px + env(safe-area-inset-bottom));
  transform: translate(-50%, var(--lift, 0px));
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 46px 22px 30px;
  border: 0;
  border-radius: 6px;
  background: #f0561a;
  color: #fff3d6;
  font: 600 28px system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  /* Halvcirklar "stansade" ur kortsidorna, som på en biobiljett. */
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 14px, #000 14.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 14px, #000 14.5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 14px, #000 14.5px) left / 51% 100% no-repeat,
        radial-gradient(circle at 100% 50%, transparent 14px, #000 14.5px) right / 51% 100% no-repeat;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.5));
  animation: prompt-in 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both, prompt-breathe 1.8s ease-in-out 0.45s infinite;
  z-index: 5;
}
.park-prompt[hidden] { display: none; }
/* Vid en skylt: placerad med left/top (js/main.js), centrerad på punkten. --lift = hur
   mycket den flyttas uppåt från punkten (används av animationerna nedan). */
.park-prompt.anchored {
  bottom: auto;
  --lift: -50%;
}
.park-prompt strong { font-weight: 800; }
/* Tangenten: en gräddvit "tangent" på stubben, med en streckad linje efter. */
.park-prompt-key {
  padding: 8px 16px;
  margin-left: 8px;
  border-radius: 8px;
  background: #fff3d6;
  color: #25323d;
  box-shadow: 0 4px 0 #c9b98f;
  font: 800 22px system-ui, sans-serif;
}
.park-prompt-text {
  padding-left: 22px;
  border-left: 3px dashed rgba(255, 243, 214, 0.6);
}
/* Smalare fönster: lite mindre, så att långa titlar får plats. */
@media (max-width: 900px) {
  .park-prompt { font-size: 22px; padding: 18px 36px 18px 24px; gap: 16px; }
  .park-prompt-key { font-size: 18px; }
}
@keyframes prompt-in {
  from { opacity: 0; transform: translate(-50%, calc(var(--lift, 0px) + 30px)) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, var(--lift, 0px)) scale(1); }
}
@keyframes prompt-breathe {
  0%, 100% { transform: translate(-50%, var(--lift, 0px)) scale(1); }
  50% { transform: translate(-50%, var(--lift, 0px)) scale(1.04); }
}
/* Inte när panelen, startskärmen eller listan är öppen, och inte på mobil (där finns "Read more"). */
body.panel-open .park-prompt,
body.intro-open .park-prompt,
body.list-open .park-prompt { display: none; }
@media (pointer: coarse) {
  .park-prompt { display: none; }
}

/* Guiden i nedre vänstra hörnet. */
.guide {
  position: fixed;  /* Sitter fast i fönstret, ovanpå canvasen. */
  left: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column; /* Raderna staplas på höjden. */
  gap: 10px;              /* Avstånd mellan raderna. */
  padding: 14px 18px;
  background: rgba(255, 243, 214, 0.92); /* Bakgrundsfärgen, lite genomskinlig. */
  border-radius: 16px;                   /* Runda hörn = "bubbla". */
  box-shadow: 0 6px 20px rgba(90, 40, 0, 0.18); /* Mjuk skugga: x, y, oskärpa, färg. */
  color: #25323d;
  font-family: system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  pointer-events: none; /* Klick går rakt igenom rutan till canvasen. */
  user-select: none;    /* Texten går inte att markera av misstag. */
}

.guide-row {
  display: flex;
  align-items: center; /* Tangenter och text hamnar på samma linje. */
  gap: 12px;
}

/* Elementet med attributet hidden ska vara helt borta.
   (display: flex ovan skulle annars vinna över hidden.) */
.guide-row[hidden] {
  display: none;
}

.guide-keys {
  display: flex;
  gap: 4px;
}

/* En tangent. */
.guide kbd {
  min-width: 28px;
  padding: 4px 8px;
  background: #ffffff;
  border-radius: 7px;
  box-shadow: 0 2px 0 #e0c9a0; /* Hård skugga rakt ner = tangenten ser upphöjd ut. */
  font-family: inherit;        /* Samma typsnitt som resten av guiden. */
  font-size: 13px;
  text-align: center;
}

/* Nitromätaren: fylls och töms av js/main.js via --nitro (0–1). */
.nitro-bar {
  width: 64px;
  height: 8px;
  background: rgba(37, 50, 61, 0.15);
  border-radius: 4px;
  overflow: hidden;
}
.nitro-fill {
  display: block;
  height: 100%;
  width: calc(var(--nitro, 1) * 100%);
  background: #ff7a1a;
  border-radius: 4px;
}

/* Infopanelen: samma "bubbla" som guiden, men större och med rullning. */
.panel {
  position: fixed;
  left: 20px;
  top: 20px;
  bottom: 120px;              /* Lämnar plats åt guiden under. */
  width: min(440px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  background: rgba(255, 243, 214, 0.96);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(90, 40, 0, 0.18);
  color: #25323d;
  font-family: system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;           /* Hörnen ska vara runda även när innehållet rullar. */
}

.panel[hidden] {
  display: none;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 10px;
}

.panel-category {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9b2226;
}

.panel-title {
  font-size: 22px;
  line-height: 1.2;
}

.panel-close {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 0 #e0c9a0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}

/* Den här delen rullar. flex: 1 = tar all höjd som blir över. */
.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 18px 14px;
}

.panel-body h2 { font-size: 17px; margin: 18px 0 6px; }
.panel-body h3 { font-size: 15px; margin: 14px 0 4px; }
.panel-body p { margin: 0 0 10px; }
.panel-body ul, .panel-body ol { margin: 0 0 10px; padding-left: 20px; }
.panel-body li { margin-bottom: 4px; }
.panel-body a, .panel-link { color: #9b2226; font-weight: 600; }
.panel-body figure { margin: 10px 0 14px; }
.panel-body figcaption { font-size: 13px; opacity: 0.75; margin-top: 4px; }

/* Bilder och videor ryms alltid i panelens bredd. */
.panel-body img,
.panel-body video {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  background: #ffffff;
}
/* Stående videor (mobilformat) får inte bli högre än skärmen. */
.panel-body video {
  max-height: 60vh;
  margin: 0 auto;
}

.panel-link {
  display: block;
  padding: 10px 18px;
  border-top: 1px solid rgba(155, 34, 38, 0.15);
}

.panel-hint {
  padding: 0 18px 12px;
  font-size: 12px;
  opacity: 0.7;
}

.panel kbd {
  padding: 2px 6px;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 2px 0 #e0c9a0;
  font-family: inherit;
}

/* ------------------------------------------------------------------ */
/* MOBIL OCH TOUCH                                                     */
/* ------------------------------------------------------------------ */

/* Ingen scroll, inget nypzoomande och ingen "dra för att uppdatera" ovanpå spelet. */
html, body {
  overscroll-behavior: none;
}
/* Bara medan man kör: inget nypzoomande eller scrollande med fingret. Annars (startskärmen
   och webbplatsen) ska man kunna dra sidan som vanligt. */
body.playing {
  touch-action: none;
}

/* Touchkontrollerna är gömda på dator. */
.touch {
  display: none;
}

/* (pointer: coarse) = huvudsakligt pekdon är ett finger. Gäller mobil och surfplatta,
   inte en dator med mus. */
@media (pointer: coarse) {
  /* Tangentguiden är meningslös utan tangentbord. */
  .guide {
    display: none;
  }

  .touch {
    display: block;
  }
  /* Panelen är uppe: knapparna behövs inte och ska inte ligga ovanpå texten. */
  body.panel-open .touch {
    display: none;
  }

  .touch-group {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom)); /* env(...) = plats för hemindikatorn på iPhone. */
    display: flex;
    gap: 14px;
  }
  .touch-left { left: calc(20px + env(safe-area-inset-left)); }
  .touch-right { right: calc(20px + env(safe-area-inset-right)); }

  .touch-btn {
    width: 76px;
    height: 76px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 243, 214, 0.85);
    box-shadow: 0 4px 0 #e0c9a0, 0 6px 16px rgba(90, 40, 0, 0.2);
    color: #25323d;
    font-size: 28px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;     /* Ingen "håll nere"-meny på iOS. */
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
  }
  /* Uppåt/nedåt staplas på höjden, med framåt överst och back under –
     samma ordning som knapparna står i index.html. */
  .touch-right { flex-direction: column; }
  .touch-btn.pressed {
    background: #f0561a;             /* Samma "tända" orange som skyltarna. */
    color: #fff3d6;
    box-shadow: 0 1px 0 #b03a0c;
    transform: translateY(3px);
  }

  /* "Read more"-knappen, mitt i överkanten – långt från körknapparna, så att de inte krockar. */
  .touch-action {
    position: fixed;
    left: 50%;
    top: calc(20px + env(safe-area-inset-top)); /* env(...) = plats för kameraön/klockan på iPhone. */
    transform: translateX(-50%);                 /* Flyttar knappen halva sin bredd åt vänster = exakt mitten. */
    min-width: 140px;
    padding: 14px 20px;
    border: 0;
    border-radius: 999px;
    background: #f0561a;
    color: #fff3d6;
    box-shadow: 0 4px 0 #b03a0c, 0 6px 16px rgba(90, 40, 0, 0.25);
    font: 700 15px system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
  }
  .touch-action[hidden] { display: none; }
}

/* Smal skärm: panelen fyller nästan hela skärmen, som ett ark. */
@media (max-width: 600px) {
  .panel {
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    width: auto;
  }
  .panel-title { font-size: 19px; }
  .panel-hint { display: none; } /* "Esc close" – finns inte på mobil, krysset räcker. */
}

/* Panelen ska kunna rullas med fingret, trots att sidan i övrigt blockerar touch. */
.panel-body {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------------ */
/* STARTSKÄRMEN                                                        */
/* ------------------------------------------------------------------ */
/* Ligger ovanpå allt, men täcker inte scenen: bara en mörk toning från vänster
   (där texten står) som blir genomskinlig mot mitten, så att bilen och huset syns. */
.intro {
  position: relative;   /* Ligger i sidans flöde överst och scrollar bort med den (canvasen står still bakom). */
  min-height: 100vh;
  min-height: 100svh;   /* Alltid minst ett fönster högt, utan hopp när mobilens adressfält går undan. */
  display: flex;
  align-items: center;  /* Kortet i mitten på höjden. */
  padding: 96px clamp(20px, 6vw, 90px) 72px; /* Överst plats för rubriken, nederst för scrollpilen. */ /* clamp(min, helst, max): 6 % av fönstrets bredd, men aldrig under 20 eller över 90 px. */
  background: linear-gradient(90deg, rgba(25, 18, 40, 0.82) 0%, rgba(25, 18, 40, 0.5) 30%, rgba(25, 18, 40, 0) 55%);
  color: #fff3d6;
  font-family: system-ui, sans-serif;
  z-index: 10;          /* Ovanpå guiden och touchknapparna. */
  transition: opacity 0.6s ease; /* När den gömms tonas den bort under 0.6 sekunder. */
}
/* Sätts av js/main.js när man trycker Start: tona bort och släpp igenom klick. */
.intro.leaving {
  opacity: 0;
  pointer-events: none;
}
.intro[hidden] { display: none; }

.intro-card {
  max-width: 440px;
  /* Glider in underifrån när sidan laddas (se @keyframes nedan). */
  animation: intro-in 0.8s ease both;
}
@keyframes intro-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* Namnskylten: en gräddvit skylt med mörk ram, som skyltarna i världen. */
.intro-marquee {
  display: inline-block;
  margin: 14px 14px 22px;   /* Plats för ramen utanför skylten. */
  padding: 18px 28px 14px;
  background: #fff3d6;
  color: #25323d;
  border-radius: 4px;
  box-shadow:
    0 0 0 10px #2b2d33,            /* Den mörka ramen. */
    0 0 60px 18px rgba(255, 190, 110, 0.2); /* Varmt sken runt skylten. */
}
.intro-name {
  font-family: 'Bungee', system-ui, sans-serif;
  font-weight: 400;          /* Bungee är redan fett. */
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: #25323d;
}
.intro-role {
  margin-top: 8px;
  font: 700 15px system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: #f0561a;            /* Samma "tända" orange som skyltarnas titlar. */
}
/* Teraden: koppen till vänster, texten bredvid. */
.intro-tea {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 420px;
  margin: 4px 0 12px;
  font-size: 16px;
  line-height: 1.55;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.tea-cup {
  flex: none;               /* Krymp inte koppen när texten är lång. */
  width: 44px;
  height: 44px;
  margin-top: -6px;
}
.tea-body { fill: #fff3d6; }
.tea-matcha { fill: #8dbf4f; }  /* Matchagrönt. */
.tea-handle {
  fill: none;
  stroke: #fff3d6;
  stroke-width: 3;
}
/* Ångan: tre slingor som stiger, tonar in och ut, i otakt. */
.tea-steam {
  fill: none;
  stroke: rgba(255, 243, 214, 0.7);
  stroke-width: 2;
  stroke-linecap: round;
  animation: tea-steam 3s ease-in-out infinite;
}
.tea-steam:nth-child(2) { animation-delay: -1s; }
.tea-steam:nth-child(3) { animation-delay: -2s; }
@keyframes tea-steam {
  0% { opacity: 0; transform: translateY(4px); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-5px); }
}
.intro-text {
  max-width: 400px;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.55;
  opacity: 0.92;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Läsbar även mot ljusa saker bakom. */
}

/* Startknappen: en biobiljett. Två halvcirklar är "stansade" ur kortsidorna (masken),
   och en streckad linje skiljer av den lilla stubben till vänster. */
.intro-start {
  position: relative;
  padding: 14px 30px 14px 46px;
  border: 0;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 27px, rgba(255, 243, 214, 0.55) 27px 29px, transparent 29px) 0 50% / 100% 70% no-repeat,
    #f0561a;
  color: #fff3d6;
  font: 800 17px system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat,
        radial-gradient(circle at 100% 50%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  transition: transform 0.15s ease, filter 0.15s ease;
}
.intro-start:hover { transform: rotate(-1.5deg) scale(1.03); } /* Biljetten vickar lite. */
.intro-start:active { transform: scale(0.98); }

.intro-hint {
  margin-top: 14px;
  font-size: 13px;
  opacity: 0.75;
}
.intro kbd {
  margin: 0 1px;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 243, 214, 0.18);
  font-family: inherit;
}

.intro-links {
  display: flex;
  flex-wrap: wrap;  /* Bryt till en ny rad om de inte får plats. */
  gap: 6px 18px;
  margin-top: 22px;
  font-size: 14px;
}
.intro-links a {
  color: #fff3d6;
  opacity: 0.8;
  text-underline-offset: 3px;
}
.intro-links a:hover { opacity: 1; }

/* Medan startskärmen syns behövs varken tangentguiden eller touchknapparna. */
body.intro-open .guide,
body.intro-open .touch {
  display: none;
}

/* Mobil: toningen kommer uppifrån i stället, och kortet står högst upp, så att
   bilen och huset syns på nedre halvan. Ingen tangenttips – det finns inget tangentbord. */
@media (max-width: 600px) {
  .intro {
    align-items: flex-start;
    background: linear-gradient(180deg, rgba(25, 18, 40, 0.88) 0%, rgba(25, 18, 40, 0.6) 55%, rgba(25, 18, 40, 0) 85%);
    padding-top: calc(84px + env(safe-area-inset-top));
  }
  .intro-text { margin: 0 0 16px; font-size: 15px; }
  .intro-tea { font-size: 15px; }
}
@media (pointer: coarse) {
  .intro-keys { display: none; }
}

/* FPS-mätaren uppe till höger (tryck F). Monospace = alla siffror lika breda, så texten inte hoppar. */
.stats {
  position: fixed;
  top: 10px;
  right: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #9dffb0;
  font: 12px ui-monospace, Menlo, monospace;
  white-space: pre; /* Visa radbrytningarna (\n) i texten. */
  pointer-events: none;
  z-index: 20;
}
.stats[hidden] { display: none; }

/* ------------------------------------------------------------------ */
/* LADDNINGEN (på startskärmen)                                        */
/* ------------------------------------------------------------------ */
/* Medan världen laddas (body.loading) är startknappen avstängd och pulserar inte,
   och en tunn mätare under den visar hur långt det har kommit. Själva laddnings-
   scenen bakom är 3D (se js/loading-scene.js). */
body.loading .intro-start {
  cursor: progress;
  background: rgba(240, 86, 26, 0.55);
  box-shadow: none;
  font-size: 15px;
}
.intro-progress {
  width: 220px;
  height: 6px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(255, 243, 214, 0.15);
  overflow: hidden;
}
body:not(.loading) .intro-progress { visibility: hidden; } /* Klart: mätaren behövs inte. */
.intro-progress-fill {
  width: 100%;
  height: 100%;
  background: #f0561a;
  transform: scaleX(0.02);
  transform-origin: left; /* Väx från vänster kant. */
  transition: transform 0.3s ease;
}
/* Tangenttipset ("or press any key") är meningslöst innan det går att starta. */
body.loading .intro-hint { visibility: hidden; }

/* ------------------------------------------------------------------ */
/* PROJEKTLISTAN (js/project-list.js)                                  */
/* ------------------------------------------------------------------ */
/* Listlänken på startskärmen: ser ut som de andra länkarna (understruken text), fast det är en knapp. */
.intro-skip {
  padding: 0;
  border: 0;
  background: none;
  color: #fff3d6;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.intro-skip:hover { color: #ffd98a; }

/* Knappen uppe till höger i spelet. Syns inte på startskärmen eller när listan är öppen. */
.projects-button {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 243, 214, 0.92);
  color: #25323d;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  font: 700 14px system-ui, sans-serif;
  cursor: pointer;
}
body.intro-open .projects-button,
body.list-open .projects-button { display: none; }

/* Själva listan: täcker hela fönstret och går att rulla. */
.projects {
  position: fixed;
  inset: 0;
  z-index: 15; /* Över startskärmen (10), under infopanelen (se nedan). */
  display: flex;
  flex-direction: column;
  background: #1d1530; /* Helt täckande: annars syns startskärmens text igenom. */
  color: #fff3d6;
  font-family: system-ui, sans-serif;
}
.projects[hidden] { display: none; }
.projects-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(18px + env(safe-area-inset-top)) clamp(16px, 4vw, 48px) 10px;
}
.projects-head h1 { font-size: 26px; }
.projects-body {
  flex: 1;
  overflow-y: auto;      /* Rulla när innehållet inte får plats. */
  touch-action: pan-y;   /* Gå att rulla med fingret (resten av sidan blockerar touch). */
  padding: 0 clamp(16px, 4vw, 48px) 40px;
}
.project-about {
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: #f0561a;
  color: #fff3d6;
  font: 700 16px system-ui, sans-serif;
  cursor: pointer;
}
.projects-section { margin-top: 26px; }
.projects-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.projects-section-head h2 { font-size: 20px; }
/* En prick i världens färg före rubriken (färgen sätts från js som --accent). */
.projects-section-head h2::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.projects-visit {
  border: 0;
  background: none;
  color: #ffb45e;
  font: 600 14px system-ui, sans-serif;
  cursor: pointer;
}
/* Korten i ett rutnät: så många kolumner som får plats, minst 240 px breda. */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.project-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 12px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 243, 214, 0.08);
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease, background 0.15s ease;
}
.project-card:hover,
.project-card:focus-visible { transform: translateY(-3px); background: rgba(255, 243, 214, 0.14); }
.project-thumb {
  position: relative;   /* Bilden inuti placeras mot den här rutan (se nedan). */
  aspect-ratio: 16 / 9; /* Samma format som skärmarna – även för klipp filmade på höjden. */
  overflow: hidden;
  background: #25323d;
  margin-bottom: 6px;
}
/* position: absolute + inset: 0 = fyll rutan exakt, utan att bildens egen storlek
   (t.ex. en stående mobilvideo) kan göra rutan högre. */
.project-thumb img,
.project-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fyll rutan, beskär kanterna om formatet inte stämmer. */
}
.project-title { padding: 0 12px; font-weight: 700; font-size: 16px; }
.project-category { padding: 0 12px; font-size: 13px; opacity: 0.7; }

/* Infopanelen ska ligga ovanpå listan när man öppnar ett projekt därifrån. */
.panel { z-index: 25; }
/* Medan listan är öppen behövs varken guiden eller touchknapparna. */
body.list-open .guide,
body.list-open .touch { display: none; }

/* Låga fönster (t.ex. en liten laptop, eller förhandsbilden 1200 x 630): startskärmens
   text får annars inte plats och klipps av upptill. Gör allt lite tätare, och låt
   rutan rulla om det ändå inte räcker. */
@media (max-height: 760px) {
  .intro-name { font-size: 34px; }
  .intro-marquee { margin-bottom: 18px; padding: 14px 22px 11px; }
  .intro-text { margin: 0 0 16px; font-size: 15px; }
  .intro-tea { font-size: 15px; }
  .intro-start { padding: 12px 26px 12px 42px; font-size: 16px; }
  .intro-links { margin-top: 12px; }
}
/* Krysset i projektlistan: mörkt kryss på den vita knappen (annars ärvs listans ljusa text). */
.projects-head .panel-close { color: #25323d; }

/* ------------------------------------------------------------------ */
/* WEBBPLATSEN OVAN OCH UNDER SPELET (site/, se #site i index.html)    */
/* ------------------------------------------------------------------ */
/* Rubriken: alltid mörk (som spelet), ligger fast över startskärmen och sektionerna.
   Dubbla klasser = högre styrka än .site-header i site.css, oavsett ordning. */
.site-header.hero-header {
  --bg-deep: #2f2745;
  --text: #fff3d6;
  --text-dim: #d9cfe6;
  --accent: #ffb45e;
  --line: rgba(255, 243, 214, 0.18);
  --line-strong: rgba(255, 243, 214, 0.5);
  --btn: #bd3d0b;
  --btn-text: #fff3d6;
  --focus: #ffd27a;
  color-scheme: dark;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12; /* Över startskärmen (10), under projektlistan (15). */
  background: color-mix(in srgb, #2f2745 82%, transparent);
  padding-top: env(safe-area-inset-top);
}
/* Webbplatsen täcker canvasen, vinjetten och toningen när man scrollar ner. */
#site {
  position: relative;
  z-index: 4;
}
/* Medan man kör: webbplatsen och rubriken är helt borta (inte bara dolda), så att inget går
   att tabba eller klicka till. */
body.playing #site,
body.playing .site-header {
  display: none;
}

/* "Back to site": uppe till vänster, bara medan man kör. */
.back-button {
  display: none;
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  left: calc(16px + env(safe-area-inset-left));
  z-index: 12;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 243, 214, 0.92);
  color: #25323d;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  font: 700 14px system-ui, sans-serif;
  cursor: pointer;
}
.back-button:hover { background: #fff3d6; }
body.playing .back-button { display: block; }
body.list-open .back-button { display: none; }

/* "Selected work": liten stapel projekt uppe till höger på startskärmen. */
.peek {
  position: absolute;
  top: 84px;
  right: clamp(20px, 4vw, 48px);
  width: 300px;
  padding: 14px 14px 10px;
  border: 1px solid rgba(255, 243, 214, 0.18);
  border-radius: 16px;
  background: rgba(25, 18, 40, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(15, 8, 30, 0.35);
}
.peek[hidden] { display: none; }
.peek-title {
  margin: 0 0 10px 4px;
  font: 700 12px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffb45e;
}
.peek-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.peek-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #fff3d6;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.peek-item:hover,
.peek-item:focus-visible {
  transform: translateX(-4px);
  background: rgba(255, 243, 214, 0.1);
  border-color: #ffb45e;
}
.peek-item:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
.peek-thumb {
  flex: none;
  width: 84px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  background: #2b2d33;
}
.peek-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.peek-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.peek-cat { font: 700 10px/1 system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #ffb45e; }
.peek-name { font: 700 14px/1.25 system-ui, sans-serif; }
.peek-all {
  display: inline-block;
  margin: 8px 0 2px 4px;
  color: #fff3d6;
  font: 700 13px system-ui, sans-serif;
  text-underline-offset: 3px;
}
.peek-all:hover { color: #ffd98a; }
/* Smal eller låg skärm: göms helt, så att den aldrig täcker startskärmens text. */
@media (max-width: 1019px), (max-height: 640px) {
  .peek { display: none; }
}

/* Pilen längst ner på startskärmen som visar att det finns mer. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(25, 18, 40, 0.55);
  color: #fff3d6;
  font: 700 13px system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  animation: cue-bob 2.4s ease-in-out infinite;
}
.scroll-cue:hover { background: rgba(25, 18, 40, 0.8); }
@keyframes cue-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 4px); }
}
body.loading .scroll-cue { opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
  .peek-item { transition: none; }
  .peek-item:hover, .peek-item:focus-visible { transform: none; }
}