/* 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: ett stort, helt ogenomskinligt blad mitt på skärmen. Det är innehållet
   man kom hit för, så det ska ha hela fokus (bakgrunden mörknas av body.panel-open::after). */
.panel {
  position: fixed;
  left: 0;
  right: 0;
  top: 4vh;
  bottom: 4vh;
  margin: 0 auto;             /* Centrerar den. */
  width: min(1400px, 94vw);
  display: flex;
  flex-direction: column;
  background: #fff3d6;        /* Helt solid, inget ska synas igenom. */
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  color: #25323d;
  font-family: system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  overflow: hidden;           /* Hörnen ska vara runda även när innehållet rullar. */
}

/* Mörk, suddig fond bakom panelen. Ligger under panelen (25) men över allt annat. */
body.panel-open::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 24;
  background: rgba(14, 10, 20, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
/* Allt brus göms medan panelen är öppen och kommer tillbaka när den stängs. */
body.panel-open .guide,
body.panel-open .stats,
body.panel-open .projects-button,
body.panel-open .back-button,
body.panel-open .touch { display: none !important; }

.panel[hidden] {
  display: none;
}

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

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

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

.panel-close {
  flex: none;
  width: 40px;
  height: 40px;
  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 36px 24px;
}
/* Löpande text får inte bli för bred (läsbar radlängd), medierna får fylla bredden. */
.panel-body p,
.panel-body ul,
.panel-body ol,
.panel-body h2,
.panel-body h3,
.panel-body figcaption,
.panel-body details { max-width: 110ch; }
.panel-body pre { max-width: 100%; overflow-x: auto; }

.panel-body h2 { font-size: 24px; margin: 18px 0 6px; }
.panel-body h3 { font-size: 20px; 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: 15px; 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;
  max-height: 75vh;
  object-fit: contain;
  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: 12px 28px;
  border-top: 1px solid rgba(155, 34, 38, 0.15);
}

.panel-hint {
  padding: 0 28px 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 {
    top: 2vh;
    bottom: 2vh;
    width: 96vw;
    font-size: 15px;
  }
  .panel-head { padding: 14px 16px 8px; }
  .panel-body { padding: 4px 16px 16px; }
  .panel-link { padding: 12px 16px; }
  .panel-title { font-size: 21px; }
  .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: flex-start; /* Kortet sitter en bit ner från rubriken, inte i mitten. */
  padding: clamp(120px, 20vh, 220px) 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: 500px;
  /* 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 10px 26px;   /* Ramen (10 px) sticker ut, så ramens kant hamnar på samma linje som texten under. */
  padding: 22px 34px 18px;
  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(34px, 4.8vw, 64px);
  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; }

/* Körläget har en enda rad längst upp, med samma marginal och samma mörka glas på allt:
   "Back to site" till vänster, "Stamps" + "All projects" till höger.
   Syns inte på startskärmen eller när listan är öppen. */
:root { --drive-margin: clamp(16px, 3vw, 40px); }
.drive-bar {
  position: fixed;
  top: calc(var(--drive-margin) + env(safe-area-inset-top));
  right: calc(var(--drive-margin) + env(safe-area-inset-right));
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none; /* Bara knapparna tar emot klick. */
}
.projects-button,
.back-button {
  box-sizing: border-box;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 243, 214, 0.16);
  border-radius: 999px;
  background: rgba(25, 18, 40, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff3d6;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  font: 600 14px system-ui, sans-serif;
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.2s ease;
}
.projects-button:hover,
.back-button:hover,
.projects-button:focus-visible,
.back-button:focus-visible { background: rgba(25, 18, 40, 0.92); }
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: 42px; }
  .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 på samma rad som .drive-bar, bara medan man kör. */
.back-button {
  display: none;
  position: fixed;
  top: calc(var(--drive-margin) + env(safe-area-inset-top));
  left: calc(var(--drive-margin) + env(safe-area-inset-left));
  z-index: 12;
}
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. */
/* "Selected work": tre kort längs underkanten av startskärmen, som flikar som sticker upp. */
.peek {
  position: absolute;
  left: clamp(20px, 6vw, 90px);
  right: clamp(20px, 6vw, 90px);
  bottom: 0;
}
.peek[hidden] { display: none; }
.peek-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 8px; }
.peek-title {
  margin: 0;
  font: 700 12px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffb45e;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.peek-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.peek-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(255, 243, 214, 0.22);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  background: rgba(25, 18, 40, 0.86);
  color: #fff3d6;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 -10px 30px rgba(15, 8, 30, 0.35);
  transition: transform 0.25s ease, border-color 0.2s ease;
}
.peek-item:hover,
.peek-item:focus-visible { transform: translateY(-10px); border-color: #ffb45e; }
.peek-item:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
.peek-thumb { width: 100%; height: clamp(56px, 8vh, 84px); overflow: hidden; background: #2b2d33; }
.peek-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.peek-item:hover .peek-thumb img { transform: scale(1.05); }
.peek-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 14px 12px; }
.peek-cat { font: 700 10px/1 system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #ffb45e; }
.peek-name { font: 700 15px/1.25 system-ui, sans-serif; }
.peek-all {
  color: #fff3d6;
  font: 700 13px system-ui, sans-serif;
  text-underline-offset: 3px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.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: 760px) {
  .peek { display: none; }
}
/* Korten ligger längst ner, så pilen flyttas bort; korten själva visar att det finns mer. */
.peek:not([hidden]) ~ .scroll-cue { 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; }
}

/* Projektsidornas layout: en lugn textkolumn i mitten, medierna går ut bredare och får
   samma stil (rundade hörn, skugga, bildtext under). Kommer sist så det vinner över äldre regler. */
.panel-body > * { margin-left: auto; margin-right: auto; }
.panel-body > p,
.panel-body > ul,
.panel-body > ol,
.panel-body > h2,
.panel-body > h3,
.panel-body > details { max-width: 80ch; }
.panel-body > p:first-child { font-size: 1.15em; line-height: 1.55; }   /* Inledningen lite större. */
.panel-body > h2 {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(155, 34, 38, 0.18);
}
.panel-body > h2:first-child { border-top: 0; margin-top: 8px; padding-top: 0; }
.panel-body > video,
.panel-body > img,
.panel-body > figure {
  width: min(100%, 1040px);
  max-width: 100%;
  margin-top: 22px;
  margin-bottom: 22px;
}
.panel-body figure { margin-left: auto; margin-right: auto; }
.panel-body figure > img,
.panel-body figure > video {
  width: 100%;
  max-height: 70vh;
  box-shadow: 0 6px 22px rgba(37, 50, 61, 0.22);
  background: #14101a;
}
.panel-body > video,
.panel-body > img {
  box-shadow: 0 6px 22px rgba(37, 50, 61, 0.22);
  background: #14101a;
}
.panel-body > video { max-height: 70vh; }
/* Bildtext: centrerad och dämpad direkt under bilden. */
.panel-body figcaption,
.panel-body video + p,
.panel-body img + p {
  max-width: 80ch;
  margin: -10px auto 22px;
  text-align: center;
  font-size: 15px;
  opacity: 0.8;
}
.panel-body pre { max-width: 80ch; margin-left: auto; margin-right: auto; }
@media (max-width: 600px) {
  .panel-body > p:first-child { font-size: 1.05em; }
  .panel-body > h2 { margin-top: 26px; padding-top: 14px; }
}

/* ==========================================================================
   PROJEKTSIDOR – DESIGNSYSTEM (allt är valfritt, vanliga sidor ser ut som förut)
   --------------------------------------------------------------------------
   HTML-konvention för assets/content/*.html (direkta barn i .panel-body):

   <div class="facts">                    Faktarutor högst upp (roll, verktyg, motor, år, status)
     <div><b>Role</b><span>Tech artist</span></div> ...
   </div>
   <ul class="chips"><li>Niagara</li>...</ul>   Taggar för verktyg/tekniker
   <h2>Rubrik</h2>                        Numreras och får accent när sidan har "On this page"
   <div class="breakdown">                Tre kort: Problem / What I built / Result
     <section class="bd bd-problem"><h3>Problem</h3><p>..</p></section>
     <section class="bd bd-built"><h3>What I built</h3>..</section>
     <section class="bd bd-result"><h3>Result</h3>..</section>
   </div>
   <div class="media-row"><figure>..</figure><figure>..</figure></div>   2-3 medier bredvid varandra
   <figure class="wide"><video ...><figcaption>..</figcaption></figure>   Stort klipp i full bredd
   <figure><img|video><figcaption>..</figcaption></figure>               Vanlig bild/video med bildtext
   <aside class="callout">Tips / löst problem</aside>

   js/ui.js lägger själv till: "On this page"-raden (.toc, om det finns minst 3 h2),
   bildvisaren (.lightbox, .zoom-btn), lat laddning och autoplay-bara-när-synlig.
   ========================================================================== */

/* --- Titelblocket --------------------------------------------------- */
.panel-head {
  padding: 24px 36px 16px;
  border-bottom: 1px solid rgba(155, 34, 38, 0.14);
  background: linear-gradient(180deg, #ffe9b8 0%, #fff3d6 100%);
}
.panel-category {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: rgba(155, 34, 38, 0.1);
  letter-spacing: 0.08em;
}
.panel-title { font-size: 36px; line-height: 1.12; letter-spacing: -0.01em; }
.panel-body { padding-top: 22px; }

/* --- Rubriker och rytm ---------------------------------------------- */
.panel-body { counter-reset: sec; }
.panel-body.has-toc > h2 { counter-increment: sec; }
.panel-body.has-toc > h2::before {
  content: counter(sec, decimal-leading-zero);
  display: inline-block;
  margin-right: 12px;
  padding: 1px 8px;
  border-radius: 6px;
  background: #9b2226;
  color: #fff3d6;
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 0.18em;
}
.panel-body > h2 { font-size: 28px; line-height: 1.2; scroll-margin-top: 70px; }
.panel-body > h3 { margin-top: 24px; }
.panel-body > p, .panel-body > ul, .panel-body > ol { line-height: 1.65; }
.toc + h2 { border-top: 0; margin-top: 22px; }

/* --- "On this page" (byggs av js/ui.js) ----------------------------- */
.toc {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 1040px);
  margin: 0 auto 8px;
  padding: 10px 2px;
  overflow-x: auto;
  scrollbar-width: none;
  background: #fff3d6;
  box-shadow: 0 1px 0 rgba(155, 34, 38, 0.15);
}
.toc::-webkit-scrollbar { display: none; }
.toc-label {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9b2226;
}
.toc button {
  flex: none;
  padding: 5px 13px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 0 #e0c9a0;
  color: #25323d;
  font: 600 14px system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.toc button:hover { background: #ffe9b8; }
.toc button.active { background: #9b2226; color: #fff3d6; box-shadow: 0 2px 0 #6e1519; }
.toc button:focus-visible, .zoom-btn:focus-visible, .lightbox-close:focus-visible { outline: 3px solid #ff7a1a; outline-offset: 2px; }

/* --- Faktarutor ----------------------------------------------------- */
.panel-body > .facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  width: min(100%, 1040px);
  margin-top: 18px;
  margin-bottom: 22px;
}
.facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #ffffff;
  border-left: 4px solid #9b2226;
  box-shadow: 0 2px 8px rgba(37, 50, 61, 0.1);
  line-height: 1.3;
}
.facts b {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9b2226;
}
.facts span { font-size: 16px; font-weight: 600; }

/* --- Taggar --------------------------------------------------------- */
.panel-body > ul.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
  width: min(100%, 1040px);
  max-width: 1040px;
  margin-bottom: 20px;
}
.chips li {
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(155, 34, 38, 0.1);
  color: #7a1a1e;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

/* --- Breakdown: Problem / What I built / Result ---------------------- */
.panel-body > .breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
  width: min(100%, 1040px);
  margin-top: 22px;
  margin-bottom: 26px;
  counter-reset: bd;
}
.bd {
  --accent: #9b2226;
  position: relative;
  min-width: 0;
  padding: 18px 20px 12px;
  border-radius: 14px;
  background: #ffffff;
  border-top: 5px solid var(--accent);
  box-shadow: 0 4px 16px rgba(37, 50, 61, 0.14);
  counter-increment: bd;
}
.bd-problem { --accent: #9b2226; }
.bd-built { --accent: #2a6f97; }
.bd-result { --accent: #2d7a4f; }
.bd h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--accent);
}
.bd h3::before {
  content: counter(bd);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-size: 14px;
}
.bd p, .bd ul, .bd ol { font-size: 16px; line-height: 1.55; }
.bd figure { margin: 8px 0 12px; }

/* --- Bilder, videor och bildtexter ----------------------------------- */
.panel-body figure { position: relative; }
.panel-body figure > img,
.panel-body figure > video {
  display: block;
  border-radius: 12px;
  background: #14101a;
}
.panel-body img { cursor: zoom-in; }
.panel-body figure > figcaption {
  margin: 8px auto 0;
  padding: 0 4px;
  font-size: 15px;
  line-height: 1.45;
  opacity: 0.85;
}
.panel-body > figure.wide {
  width: min(100%, 1240px);
  margin-top: 28px;
  margin-bottom: 28px;
}
.panel-body > figure.wide > img,
.panel-body > figure.wide > video { max-height: 78vh; }

.panel-body > .media-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: stretch;
  width: min(100%, 1240px);
  margin-top: 22px;
  margin-bottom: 26px;
}
.media-row > figure {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}
.media-row > figure > img,
.media-row > figure > video {
  width: 100%;
  aspect-ratio: 16 / 10;   /* Lika höga rutor, hela bilden syns (mörk kant om formatet avviker). */
  height: auto;
  max-height: none;
  object-fit: contain;
}
.media-row > figure > figcaption { margin-top: 8px; text-align: center; }

/* Förstoringsknapp på videor med kontroller (läggs in av js/ui.js). */
.zoom-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: rgba(20, 16, 26, 0.65);
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}
.zoom-btn:hover { background: #9b2226; opacity: 1; }

/* --- Utropsruta ------------------------------------------------------ */
.panel-body > aside.callout {
  max-width: 80ch;
  margin-top: 20px;
  margin-bottom: 22px;
  padding: 14px 18px 14px 20px;
  border-radius: 12px;
  border-left: 5px solid #ff7a1a;
  background: #ffe2b3;
  font-size: 16px;
  line-height: 1.55;
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout strong:first-child { color: #9b2226; }

/* --- Bildvisaren (byggs av js/ui.js) --------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;           /* Över panelen (25). */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  background: rgba(10, 7, 16, 0.92);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox-stage { display: contents; }
.lightbox-stage > img,
.lightbox-stage > video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
  background: #000;
  cursor: default;
}
.lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #25323d;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

/* --- Smal skärm (telefon) -------------------------------------------- */
@media (max-width: 600px) {
  .panel-head { padding: 14px 16px 10px; }
  .panel-title { font-size: 24px; }
  .panel-body { padding-top: 14px; }
  .panel-body > h2 { font-size: 22px; scroll-margin-top: 56px; }
  .toc { padding: 8px 0; gap: 6px; }
  .toc-label { display: none; }
  .toc button { font-size: 13px; padding: 5px 11px; }
  .panel-body > .facts { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .facts > div { padding: 8px 10px; }
  .facts span { font-size: 14px; }
  .panel-body > .breakdown, .panel-body > .media-row { grid-template-columns: 1fr; gap: 12px; }
  .bd { padding: 14px 14px 8px; }
  .bd p, .bd ul, .bd ol { font-size: 15px; }
  .panel-body > aside.callout { padding: 12px 14px; font-size: 15px; }
  .lightbox { padding: 8px; }
}

/* Större text i projektpanelen: allt här vinner över äldre storlekar ovan. Justera .panel för att skala allt. */
.panel { font-size: 21px; line-height: 1.6; }
.panel-body p, .panel-body li { font-size: 1em; }
.panel-body > p:first-child { font-size: 1.2em; }
.panel-body > h2 { font-size: 32px; }
.panel-body h3 { font-size: 24px; }
.panel-title { font-size: 40px; }
.panel-category { font-size: 15px; }
.toc button { font-size: 16px; padding: 7px 14px; }
.toc-label { font-size: 13px; }
.facts b { font-size: 13px; }
.facts span { font-size: 20px; }
.chips li { font-size: 17px; padding: 6px 14px; }
.bd p, .bd ul, .bd ol { font-size: 19px; line-height: 1.6; }
.bd h3 { font-size: 17px; }
.panel-body figcaption,
.panel-body figure > figcaption,
.panel-body video + p,
.panel-body img + p { font-size: 17px; opacity: 0.85; }
.panel-body > aside.callout { font-size: 19px; }
.panel-body code { font-size: 0.9em; }
.panel-body pre { font-size: 16px; }
@media (max-width: 600px) {
  .panel { font-size: 18px; }
  .panel-body > h2 { font-size: 26px; }
  .panel-body h3 { font-size: 21px; }
  .panel-title { font-size: 28px; }
  .facts span { font-size: 17px; }
  .chips li { font-size: 15px; }
  .bd p, .bd ul, .bd ol { font-size: 17px; }
  .panel-body figcaption, .panel-body figure > figcaption { font-size: 15px; }
  .panel-body > aside.callout { font-size: 17px; }
  .toc button { font-size: 14px; }
}

/* Rubriken på startsidan: säsongsknappen i vänstra hörnet, menyn i det högra. (Namnet står på skylten.) */
.site-header.hero-header .season-switch { order: -1; margin-left: 0; }
.site-header.hero-header .site-nav { margin-left: auto; }
.site-header.hero-header .nav-toggle { margin-left: auto; }
.site-header.hero-header .season-menu { left: 0; right: auto; }
/* En enda sidmarginal för allt på startskärmen (samma clamp som .intro och .peek), så att vänster- och högerkanterna linjerar. */
.site-header.hero-header .header-row { padding-inline: clamp(20px, 6vw, 90px); }

/* Startsidan: ingen stapel överst medan man ser startskärmen. Länkarna svävar över scenen, större och fetare,
   och stapeln (bakgrund + linje) kommer först när man har scrollat (.is-scrolled sätts i site.js). */
.site-header.hero-header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.site-header.hero-header.is-scrolled {
  background: color-mix(in srgb, #2f2745 88%, transparent);
  border-bottom-color: rgba(255, 243, 214, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header.hero-header .header-row { min-height: 76px; }
.site-header.hero-header .site-nav ul { gap: 6px; }
.site-header.hero-header .site-nav ul a {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 0 16px;
  text-shadow: 0 2px 10px rgba(15, 8, 30, 0.85);
}
.site-header.hero-header .site-nav ul a:hover { background: rgba(25, 18, 40, 0.55); }
@media (prefers-reduced-motion: reduce) { .site-header.hero-header { transition: none; } }
/* Länkarnas luft (padding) räknas inte som innehåll: dra ut sista länken så att texten linjerar med högerkanten. */
@media (min-width: 961px) { .site-header.hero-header .site-nav { margin-right: -16px; } }

/* Säsongsknappen i vänstra hörnet: ren text som länkarna till höger, utan pillerram. */
.site-header.hero-header .season-btn {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  text-shadow: 0 2px 10px rgba(15, 8, 30, 0.85);
}
.site-header.hero-header .season-btn:hover,
.site-header.hero-header .season-btn:focus-visible,
.site-header.hero-header .season-btn[aria-expanded="true"] { background: rgba(25, 18, 40, 0.55); padding-left: 12px; box-shadow: none; }

/* Korten: bara en smal titelflik längst ner. Bilden glider upp först vid hover/fokus, så att startskärmen blir lugnare. */
.peek-thumb { height: 0; transition: height 0.3s ease; }
.peek-item:hover .peek-thumb,
.peek-item:focus-visible .peek-thumb { height: clamp(72px, 11vh, 110px); }
.peek-item:hover,
.peek-item:focus-visible { transform: none; }
.peek-text { padding: 12px 16px 12px; }
.peek-item { background: rgba(25, 18, 40, 0.72); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .peek-thumb { transition: none; } }

/* Korten växer var och en för sig (annars sträcks de två andra till samma höjd och visar en tom, avskuren ruta).
   När man pekar på listan visar alla bilden: det markerade kortet helt, de andra en bit. */
.peek-list { align-items: end; }
.peek-list:hover .peek-thumb,
.peek-list:focus-within .peek-thumb { height: clamp(36px, 5.5vh, 56px); }
.peek-list .peek-item:hover .peek-thumb,
.peek-list .peek-item:focus-visible .peek-thumb { height: clamp(72px, 11vh, 110px); }

/* ---- Fokus: skylten + startknappen är det högljudda. Allt annat på startskärmen går ner i volym. ---- */
/* Hörnen: mindre, tunnare, dämpade. Full styrka först vid hover/fokus. */
.site-header.hero-header .site-nav ul a { font-size: 15px; font-weight: 600; opacity: 0.72; padding: 0 12px; text-shadow: 0 1px 8px rgba(15, 8, 30, 0.9); transition: opacity 0.2s ease, background 0.15s ease; }
.site-header.hero-header .site-nav ul a:hover,
.site-header.hero-header .site-nav ul a:focus-visible { opacity: 1; }
.site-header.hero-header .site-nav { margin-right: -12px; }
.site-header.hero-header .season-btn { opacity: 0.6; min-height: 40px; transition: opacity 0.2s ease; }
.site-header.hero-header .season-btn:hover,
.site-header.hero-header .season-btn:focus-visible,
.site-header.hero-header .season-btn[aria-expanded="true"] { opacity: 1; }
.site-header.hero-header .season-btn-hint { display: none; } /* "Change season": ingen extra orange rad; knappen förklarar sig vid hover. */
.site-header.hero-header .season-btn-main { font-size: 13px; font-weight: 500; }
/* Texten under skylten: lägre kontrast, så att skylten läses först. */
.intro-tea, .intro-text { opacity: 0.8; }
.intro-hint, .intro-links { opacity: 0.7; }
/* Korten längst ner: bara en viskning tills man pekar på dem. */
.peek-title, .peek-all { opacity: 0.6; }
.peek-item { background: rgba(25, 18, 40, 0.5); border-color: rgba(255, 243, 214, 0.12); }
.peek-cat { color: rgba(255, 243, 214, 0.6); }
.peek-name { font-weight: 600; font-size: 14px; }
.peek-item:hover, .peek-item:focus-visible { background: rgba(25, 18, 40, 0.88); }
.peek-item:hover .peek-cat, .peek-item:focus-visible .peek-cat { color: #ffb45e; }

/* ---- Säsongsknappen: längst ner till höger, ovanför "All projects". Den sitter i .peek-dockan och följer med när korten växer. ---- */
.peek-season { display: flex; justify-content: flex-end; margin: 0 0 4px; }
.peek-season .season-switch { display: inline-block; }
.peek-season .season-btn { border-color: transparent; background: transparent; padding-right: 0; min-height: 36px; opacity: 0.65; text-shadow: 0 1px 8px rgba(15, 8, 30, 0.9); transition: opacity 0.2s ease; }
.peek-season .season-btn:hover,
.peek-season .season-btn:focus-visible,
.peek-season .season-btn[aria-expanded="true"] { opacity: 1; background: rgba(25, 18, 40, 0.6); box-shadow: none; padding-right: 12px; }
.peek-season .season-btn-main { font-size: 13px; font-weight: 500; }
.peek-season .season-btn-hint { display: none; }
.peek-season .season-menu { top: auto; bottom: calc(100% + 6px); right: 0; left: auto; }
/* Smal/låg skärm: korten göms, men säsongsknappen blir kvar nere till höger. */
@media (max-width: 1019px), (max-height: 760px) {
  .peek { display: block; bottom: calc(6px + env(safe-area-inset-bottom)); left: auto; right: clamp(20px, 6vw, 90px); }
  .peek-head, .peek-list { display: none; }
}

/* ------------------------------------------------------------------ */
/* STÄMPLAR (js/stamps.js): "Stamps 3 / 16" under "All projects"-knappen */
/* ------------------------------------------------------------------ */
/* Egen mörk botten med ljus text, så att kontrasten är densamma över alla världars bakgrunder.
   Syns bara medan man kör; infopanelen och listan täcker hela fönstret och göms med dem. */
.stamps {
  display: none;
  position: relative; /* Ligger i .drive-bar, på raden bredvid "All projects". Meddelandet hänger under. */
  align-items: center;
  pointer-events: none; /* Räknaren är bara en uppgift: klick går igenom till spelet. */
  font-family: system-ui, sans-serif;
}
.stamps-toast { position: absolute; top: calc(100% + 8px); right: 0; width: max-content; }
body.playing:not(.panel-open):not(.list-open) .stamps { display: flex; }
.stamps-count {
  box-sizing: border-box;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  height: 38px;
  padding: 0 15px;
  border: 1.5px solid #ffd98a;
  border-radius: 999px;
  background: rgba(25, 18, 40, 0.92);
  color: #fff3d6;
  font: 600 13px/36px system-ui, sans-serif;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; /* Siffrorna lika breda: rutan hoppar inte. */
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}
.stamps-num { color: #ffd98a; font-size: 17px; font-weight: 800; }
.stamps-of { opacity: 0.75; }
.stamps.pop .stamps-count { animation: stamp-pop 0.7s ease-out; }
@keyframes stamp-pop {
  0% { transform: scale(1); background: #f0561a; }
  35% { transform: scale(1.14); background: #f0561a; }
  100% { transform: scale(1); background: rgba(25, 18, 40, 0.92); }
}

/* Meddelandet när en ny stämpel tillkommit (och tack-rutan när alla är tagna). */
.stamps-toast {
  max-width: min(300px, calc(100vw - 32px));
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(25, 18, 40, 0.92);
  color: #fff3d6;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.stamps-toast[hidden] { display: none; }
.stamps-toast.show { opacity: 1; transform: none; }
.stamps-toast-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
/* Smal skärm: raden ska rymma tre saker utan att krocka. */
@media (max-width: 520px) {
  .projects-button, .back-button { height: 34px; padding: 0 11px; font-size: 13px; }
  .stamps-count { height: 34px; padding: 0 11px; line-height: 32px; }
  .drive-bar { gap: 6px; }
}
.stamps-toast-links:empty,
.stamps-toast-close { display: none; }
.stamps-toast-links a { color: #ffd98a; font-weight: 700; text-underline-offset: 3px; }
.stamps-toast-links a:hover { color: #fff3d6; }
/* Tack-rutan tar emot klick (länkarna) och har ett kryss. */
.stamps-toast.final { pointer-events: auto; padding-right: 36px; }
.stamps-toast.final .stamps-toast-close {
  display: block;
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: #fff3d6;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .stamps.pop .stamps-count { animation: none; }
  .stamps-toast { transition: none; transform: none; }
}

/* Bocken i projektlistan: ljusgrön text på den mörka listan (AA), plus en dold text för skärmläsare. */
.project-check { margin-left: 6px; color: #9be3a6; font-weight: 700; }
.stamp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}