/* ============================================================
   STRANDKANTENRP - ALL DESIGN
   ------------------------------------------------------------
   Vill du andra farger, storlekar eller typsnitt?
   Nastan allt styrs av vardena i ":root" har nedanfor.
   Andra dar sa slar det igenom pa hela sidan.
   ============================================================ */

:root {
  /* --- FARGER --- */
  --bg:            #0a0b0c;   /* sidans bakgrund */
  --bg-panel:      rgba(255, 255, 255, 0.025); /* frostade paneler */
  --text:          #f4f3f1;   /* huvudtext (nastan vit) */
  --text-dampad:   #aeaba6;   /* svagare text - t.ex. brodtext */
  --text-svag:     #7e7a75;   /* allra svagast - hjalptexter */
  --accent:        #5aa9e6;   /* accentfarg - bla */
  --accent-svag:   rgba(90, 169, 230, 0.14);
  --linje:         rgba(255, 255, 255, 0.075); /* tunna kantlinjer */
  --linje-stark:   rgba(255, 255, 255, 0.16);
  --fel:           #d98b7a;   /* felmeddelanden */

  /* --- TYPSNITT --- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* --- RORELSE (hall det langsamt och diskret) --- */
  --mjuk: cubic-bezier(0.22, 0.61, 0.36, 1);
  --snabb: 0.35s var(--mjuk);
  --langsam: 1.1s var(--mjuk);

  /* --- MATT --- */
  --max-bredd: 1180px;
  --sido-marginal: clamp(1.5rem, 6vw, 6rem);
}

/* ------------------------------------------------------------
   GRUND
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 { font-weight: 200; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent-svag); color: var(--text); }

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

/* Lank for skarmlasare / tangentbord */
.hoppa-till {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 200;
  background: #111;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--linje-stark);
}
.hoppa-till:focus { left: 1rem; }

/* ------------------------------------------------------------
   ATMOSFARISK BAKGRUND
   Tva stora, mycket langsamt vandrande ljusfalt + fint brus.
   ------------------------------------------------------------ */
.atmosfar {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.dis {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
}

.dis-1 {
  width: 70vmax; height: 70vmax;
  top: -25vmax; left: -15vmax;
  background: radial-gradient(circle, rgba(90, 169, 230, 0.08), transparent 65%);
  animation: driva-1 46s ease-in-out infinite alternate;
}

.dis-2 {
  width: 60vmax; height: 60vmax;
  bottom: -25vmax; right: -15vmax;
  background: radial-gradient(circle, rgba(105, 130, 150, 0.07), transparent 65%);
  animation: driva-2 58s ease-in-out infinite alternate;
}

@keyframes driva-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, 5vh, 0) scale(1.12); }
}
@keyframes driva-2 {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-7vw, -4vh, 0) scale(1); }
}

/* Filmkornigt brus - ger djup utan att synas medvetet */
.brus {
  position: absolute;
  inset: -50%;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   NAVIGERING
   Genomskinlig over hero, far bakgrund nar man scrollar.
   ------------------------------------------------------------ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background var(--snabb), border-color var(--snabb), backdrop-filter var(--snabb);
}

.navbar.scrollad {
  background: rgba(10, 11, 12, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--linje);
}

.nav-inner {
  max-width: var(--max-bredd);
  margin: 0 auto;
  padding: 1.35rem var(--sido-marginal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.markesnamn {
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.markesnamn span { color: var(--accent); }

.nav-lankar {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.nav-lankar a {
  position: relative;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dampad);
  transition: color var(--snabb);
  padding: 0.25rem 0;
}
.nav-lankar a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--mjuk);
}
.nav-lankar a:hover { color: var(--text); }
.nav-lankar a:hover::after { transform: scaleX(1); }

.nav-discord { color: var(--text) !important; }

/* Hamburgerknapp (visas bara pa mobil) */
.meny-knapp {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.meny-knapp span {
  display: block;
  height: 1px;
  width: 22px;
  background: var(--text);
  transition: transform var(--snabb), opacity var(--snabb);
}
.meny-knapp[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.meny-knapp[aria-expanded="true"] span:last-child  { transform: translateY(-3px) rotate(-45deg); }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
main { position: relative; z-index: 1; }

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem var(--sido-marginal) 6rem;
  position: relative;
  overflow: hidden;
}

/* ------------------------------------------------------------
   BAKGRUNDSBILDEN I HERO
   Bilden är serverns egen laddningsskärm (public/bakgrund.jpg).
   Vill du byta bild: lägg en ny fil med samma namn i public/.
   Vill du ha den ljusare/mörkare: ändra siffrorna i .hero-slojan.
   ------------------------------------------------------------ */
.hero-bild {
  position: absolute;
  inset: -2%;
  background: url('/bakgrund.jpg') center 40% / cover no-repeat;

  /* Bilden ligger inzoomad tills besökaren tryckt "Påbörja din resa".
     Därefter zoomar sida.js långsamt ut den till fullbild (scale 1),
     och är framme precis när musiken tar slut.
     Vill du ha kraftigare inzoomning: höj 1.75 nedan. */
  transform: scale(1.75);
  transform-origin: center 45%;
  will-change: transform;
}

/* Sätts av sida.js när utzoomningen är klar eller ska hoppas över */
.hero-bild.fullbild { transform: scale(1); }

/* Slöjan som gör bilden mörk och dämpad, så texten syns
   och känslan förblir svart och exklusiv i stället för färgstark. */
.hero-slojan {
  position: absolute;
  inset: 0;
  background:
    /* Svagt kallt lager - dämpar bildens rosa solnedgång så den inte
       krockar med den blå accentfärgen. Ta bort raden om ni hellre
       vill ha bildens ursprungliga varma toner. */
    linear-gradient(rgba(16, 30, 50, 0.32), rgba(16, 30, 50, 0.32)),
    radial-gradient(ellipse at 50% 45%, rgba(10, 11, 12, 0.28) 0%, rgba(10, 11, 12, 0.78) 72%),
    linear-gradient(to bottom,
      rgba(10, 11, 12, 0.88) 0%,
      rgba(10, 11, 12, 0.38) 38%,
      rgba(10, 11, 12, 0.82) 82%,
      var(--bg) 100%);
}

.hero-inner {
  max-width: 900px;
  position: relative;
  /* Måste ligga ÖVER den svarta introskärmen (z-index 3), så att
     rubriken syns mot svart och står kvar när det svarta tonar bort. */
  z-index: 4;
  /* Håller texten läsbar mot de ljusare partierna i bilden */
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.85), 0 1px 8px rgba(0, 0, 0, 0.6);
}

.ovanrubrik {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-dampad);
  margin-bottom: 2.5rem;
  animation: stig 1.6s var(--mjuk) 0.1s both;
}

/* Sidans rubrik är samma text i samma stil som introts STRANDKANTEN.
   Den sveps fram från vänster precis som i spelets intro. */
.hero-titel {
  font-size: clamp(2rem, 7.5vw, 6rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.05;
  /* Texten är bortklippt från höger tills introt avslöjar den.
     Marginalen (-0.3em) gör att sista bokstaven inte skärs av
     i kanten — utan den ser N:et kluvet ut. */
  clip-path: inset(-0.3em 100% -0.3em -0.3em);
  transition: clip-path 1.4s ease;
}
.hero-titel.synlig { clip-path: inset(-0.3em -0.4em -0.3em -0.3em); }

.tagline {
  margin-top: 2rem;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  font-weight: 200;
  color: var(--text-dampad);
  letter-spacing: 0.02em;
  /* Ingen egen animation här — introt styr när den ska synas.
     (En animation med "both" skulle låsa opacity och göra att
     texten syntes redan under introt.) */
  transition: opacity 1s var(--mjuk);
}

.hero-cta {
  margin-top: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.hero-cta > a { transition: opacity 1s var(--mjuk); }

/* Den diskreta andraknappen - ram utan fyllning */
.knapp-tyst {
  border-color: transparent;
  color: var(--text-dampad);
  background: transparent;
}
.knapp-tyst:hover {
  border-color: var(--linje-stark);
  background: transparent;
  color: var(--text);
}

@keyframes stig {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Tunn linje langst ner som andas */
.scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
}
.scroll-hint .linje {
  display: block;
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--linje-stark));
  animation: andas 3.5s ease-in-out infinite;
}
@keyframes andas {
  0%, 100% { opacity: 0.25; transform: scaleY(0.7); }
  50%      { opacity: 1;    transform: scaleY(1); }
}

/* ------------------------------------------------------------
   KNAPPAR
   ------------------------------------------------------------ */
.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2.1rem;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--linje-stark);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.5s var(--mjuk), background 0.5s var(--mjuk), color 0.5s var(--mjuk);
}

.knapp svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s var(--mjuk);
}

.knapp:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-svag);
}
.knapp:hover svg { transform: translateX(4px); }
.knapp:disabled { opacity: 0.5; cursor: not-allowed; }
.knapp:disabled:hover { border-color: var(--linje-stark); color: var(--text); background: rgba(255,255,255,0.02); }

.knapp-bred { width: 100%; }

/* Snurra som visas medan ansokan skickas */
.spinner {
  display: none;
  width: 14px; height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: snurra 0.9s linear infinite;
}
@keyframes snurra { to { transform: rotate(360deg); } }

.knapp.laddar .spinner { display: block; }
.knapp.laddar { pointer-events: none; opacity: 0.7; }

/* ------------------------------------------------------------
   SEKTIONER
   ------------------------------------------------------------ */
.sektion {
  padding: clamp(7rem, 16vh, 12rem) var(--sido-marginal);
  border-top: 1px solid var(--linje);
}

.sektion-inner {
  max-width: var(--max-bredd);
  margin: 0 auto;
}
.sektion-inner.smal { max-width: 760px; }

.etikett {
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
}

.sektion-titel {
  font-size: clamp(1.8rem, 4.5vw, 3.1rem);
  max-width: 20ch;
  margin-bottom: 3rem;
}

.ingress {
  color: var(--text-dampad);
  max-width: 56ch;
  margin-bottom: 3.5rem;
  font-size: 1.02rem;
}

.om-text {
  max-width: 58ch;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  color: var(--text-dampad);
  font-size: 1.02rem;
}
.om-text .dampad { color: var(--text-svag); font-style: italic; }

/* Står principerna ensamma i sektionen behövs inte det stora
   toppavståndet som annars skiljer dem från brödtexten. */
.principer-ensamma { margin-top: 1.5rem !important; }

/* Tre principer */
.principer {
  list-style: none;
  margin: clamp(4rem, 9vw, 7rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--linje);
  border: 1px solid var(--linje);
}
.principer li {
  background: var(--bg);
  padding: 2.5rem 2rem;
  transition: background 0.7s var(--mjuk);
}
.principer li:hover { background: rgba(255, 255, 255, 0.015); }
.principer .siffra {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.principer h3 { font-size: 1.15rem; margin-bottom: 0.7rem; }
.principer p { color: var(--text-dampad); font-size: 0.93rem; }

/* ------------------------------------------------------------
   PANELER (frostat glas)
   ------------------------------------------------------------ */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--linje);
  border-radius: 3px;
  padding: clamp(1.5rem, 4vw, 3rem);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ------------------------------------------------------------
   FORMULARET
   ------------------------------------------------------------ */
.falt-grupp { margin-bottom: 1.75rem; }

.falt-rad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}
.falt-rad .falt-grupp { margin-bottom: 0; }
.falt-rad + .falt-grupp,
.falt-rad + .falt-rad { margin-top: 1.75rem; }

.form-sektion {
  margin: 3rem 0 1.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linje);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-svag);
}
.form-sektion:first-child { margin-top: 0; padding-top: 0; border-top: none; }

label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dampad);
  margin-bottom: 0.7rem;
}
label .stjarna { color: var(--accent); margin-left: 0.3em; }

input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--linje);
  border-radius: 2px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.6;
  padding: 0.85rem 1rem;
  transition: border-color var(--snabb), background var(--snabb);
  -webkit-appearance: none;
  appearance: none;
}

textarea { min-height: 130px; resize: vertical; }

/* Datumfältet: webbläsarens egen kalender ska också vara mörk,
   annars blinkar en vit ruta upp mitt i den mörka sidan. */
input[type="date"] {
  color-scheme: dark;
  min-height: 3.25rem; /* samma höjd som övriga fält */
}
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.45;
  cursor: pointer;
  transition: opacity var(--snabb);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 0.9; }
/* Blek text tills ett datum är valt */
input[type="date"]:not(:focus):invalid { color: var(--text-svag); }

input::placeholder, textarea::placeholder { color: var(--text-svag); }

input:hover, select:hover, textarea:hover { border-color: var(--linje-stark); }

/* Mörka systemkontroller (kalender, rullister) i hela sidan */
:root { color-scheme: dark; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.4);
}

/* Rullgardin med egen pil */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8681' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 11px;
  padding-right: 2.5rem;
  cursor: pointer;
}
select option { background: #121314; color: var(--text); }

.hjalptext {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--text-svag);
  line-height: 1.5;
}

.raknare {
  float: right;
  font-size: 0.7rem;
  color: var(--text-svag);
  letter-spacing: 0.05em;
  text-transform: none;
}
.raknare.for-kort { color: var(--fel); }

/* Fel pa enskilt falt */
.falt-fel {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--fel);
  min-height: 1em;
}
.falt-grupp.har-fel input,
.falt-grupp.har-fel select,
.falt-grupp.har-fel textarea { border-color: var(--fel); }

/* ------------------------------------------------------------
   IKRYSSBARA ALTERNATIV (t.ex. karaktärstyp)
   ------------------------------------------------------------ */
.falt-etikett {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dampad);
  margin-bottom: 0.7rem;
}
.falt-etikett .stjarna { color: var(--accent); margin-left: 0.3em; }

.radio-grupp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.radio-val {
  margin: 0;
  cursor: pointer;
  /* .radio-val är ett <label> och skulle annars ärva den versala
     etikettstilen — alternativen ska stå i vanlig skrift. */
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Själva radioknappen göms — texten runt den är knappen */
.radio-val input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-val span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.3rem;
  border: 1px solid var(--linje);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-dampad);
  font-size: 0.92rem;
  transition: border-color var(--snabb), background var(--snabb), color var(--snabb);
}

/* Liten ring framför texten som fylls när valet är ikryssat */
.radio-val span::before {
  content: '';
  width: 13px;
  height: 13px;
  border: 1px solid var(--linje-stark);
  border-radius: 50%;
  transition: border-color var(--snabb), box-shadow var(--snabb);
}

.radio-val:hover span { border-color: var(--linje-stark); color: var(--text); }

.radio-val input:checked + span {
  border-color: var(--accent);
  background: var(--accent-svag);
  color: var(--text);
}
.radio-val input:checked + span::before {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent);
}

/* Tangentbordsfokus ska synas lika tydligt som musklick */
.radio-val input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: 3px; }

.falt-grupp.har-fel .radio-val span { border-color: var(--fel); }

/* Kryssruta */
.kryss-grupp { display: flex; align-items: flex-start; gap: 0.9rem; }
.kryss-grupp input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 2px 0 0;
  border: 1px solid var(--linje-stark);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  position: relative;
  transition: border-color var(--snabb), background var(--snabb);
}
.kryss-grupp input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent-svag);
}
.kryss-grupp input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--accent);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.kryss-grupp label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-dampad);
  cursor: pointer;
}

/* Honungsfalla - ska aldrig synas for en manniska */
.honungsfalla {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-botten { margin-top: 2.5rem; }

.form-fel {
  color: var(--fel);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  min-height: 1.2em;
}

.notis {
  border: 1px solid var(--linje);
  padding: 1rem 1.25rem;
  color: var(--text-dampad);
  font-size: 0.9rem;
}

/* Bekraftelse efter skickad ansokan */
.kvittens {
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) 2rem;
  animation: stig 1.4s var(--mjuk) both;
}
.kvittens-ikon {
  width: 46px; height: 46px;
  margin: 0 auto 2rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.kvittens-ikon svg {
  width: 18px; height: 18px;
  fill: none; stroke: var(--accent);
  stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
}
.kvittens h3 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin-bottom: 0.9rem; }
.kvittens p { color: var(--text-dampad); }

/* ------------------------------------------------------------
   SIDFOT
   ------------------------------------------------------------ */
.sidfot {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--linje);
  padding: 3rem var(--sido-marginal);
}
.sidfot-inner {
  max-width: var(--max-bredd);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-svag);
}
.sidfot-lankar { display: flex; gap: 2rem; }
.sidfot-lankar a { transition: color var(--snabb); }
.sidfot-lankar a:hover { color: var(--text); }
.sidfot-not { text-transform: none; letter-spacing: 0.02em; font-style: italic; }

/* ------------------------------------------------------------
   INTONING NAR MAN SCROLLAR (satts av app.js)
   ------------------------------------------------------------ */
.fade {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--langsam), transform var(--langsam);
}
.fade.synlig { opacity: 1; transform: none; }

/* ============================================================
   INTRO-SKÄRMEN
   ------------------------------------------------------------
   Samma sekvens som spelets welcome_intro: svart skärm,
   "Välkommen till", STRANDKANTEN sveps fram, sedan knappen.

   Knepet: den svarta skärmen ligger BAKOM hero-texten. Själva
   STRANDKANTEN-texten är sidans egen rubrik — därför står den
   kvar av sig själv när det svarta tonar bort och hemsidan
   kommer fram bakom den.
   ============================================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 3;             /* över bakgrundsbilden, under hero-texten */
  background: #000;
  opacity: 1;
  transition: opacity 1.3s var(--mjuk);
}

/* Låser sidan bakom introt så man inte kan scrolla under det */
body.intro-lage { overflow: hidden; }

/* Allt som inte hör till introt hålls dolt medan det pågår */
body.intro-lage .navbar,
body.intro-lage .scroll-hint,
body.intro-lage .tagline,
body.intro-lage .hero-cta > a {
  opacity: 0;
  pointer-events: none;
}
body.intro-lage .hero-cta > a { position: absolute; }

/* När besökaren tryckt "Påbörja din resa" */
body.startad .intro { opacity: 0; pointer-events: none; }
body.startad .intro-titel,
body.startad .intro-knapp { opacity: 0; pointer-events: none; }
body.startad .intro-knapp { position: absolute; }

body.startad .navbar,
body.startad .scroll-hint,
body.startad .tagline,
body.startad .hero-cta > a {
  opacity: 1;
  transition: opacity 1s var(--mjuk) 0.6s;
}

.intro-titel {
  color: #fff;
  font-size: clamp(0.75rem, 2.2vw, 1.4rem);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 2vh;
  opacity: 0;
  transition: opacity 1s ease;
}
.intro-titel.synlig { opacity: 1; }

.intro-knapp {
  padding: 0.9rem 2.6rem;
  background: transparent;
  border: 1px solid #fff;
  border-radius: 2px;
  color: #fff;
  font-family: inherit;
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 1s ease, background 0.3s ease, color 0.3s ease;
}
.intro-knapp.synlig { opacity: 1; }
.intro-knapp:hover { background: #fff; color: #000; }

.intro-hoppa {
  position: absolute;
  bottom: 2.5rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
}

/* ------------------------------------------------------------
   LJUDKNAPP (visas nere i hörnet medan introlåten spelar)
   ------------------------------------------------------------ */
.ljud-knapp {
  position: fixed;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 40px;
  height: 40px;
  padding: 0 0 12px 0;
  justify-content: center;
  background: rgba(10, 11, 12, 0.55);
  border: 1px solid var(--linje);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--snabb);
}
.ljud-knapp:hover { border-color: var(--accent); }

/* display:flex ovan skulle annars slå ut hidden-attributet */
.ljud-knapp[hidden] { display: none; }

.ljud-strak {
  display: block;
  width: 2px;
  background: var(--accent);
  animation: ljud-hopp 1.1s ease-in-out infinite;
}
.ljud-strak:nth-child(1) { height: 8px;  animation-delay: 0s; }
.ljud-strak:nth-child(2) { height: 14px; animation-delay: 0.2s; }
.ljud-strak:nth-child(3) { height: 6px;  animation-delay: 0.4s; }

@keyframes ljud-hopp {
  0%, 100% { transform: scaleY(0.5); }
  50%      { transform: scaleY(1); }
}

/* Avstängt ljud: strecken står stilla och blir grå */
.ljud-knapp.tyst .ljud-strak {
  animation: none;
  transform: scaleY(0.4);
  background: var(--text-svag);
}

/* ============================================================
   REGELSIDAN
   ============================================================ */
.regel-topp {
  padding: clamp(9rem, 20vh, 13rem) var(--sido-marginal) clamp(3rem, 6vh, 5rem);
}

.regel-datum {
  margin-top: 2rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-svag);
}

.regel-sektion { padding-top: clamp(3rem, 6vh, 5rem); }

/* Innehållsförteckning */
.regel-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(4rem, 9vh, 7rem);
}

.regel-index-lank {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--linje);
  border-radius: 2px;
  font-size: 0.84rem;
  color: var(--text-dampad);
  transition: border-color 0.5s var(--mjuk), background 0.5s var(--mjuk), color 0.5s var(--mjuk);
}
.regel-index-lank:hover {
  border-color: var(--linje-stark);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
}

.regel-index-nr {
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  color: var(--accent);
}

/* ------------------------------------------------------------
   DE TVÅ VALEN PÅ ANSÖKNINGSSIDAN
   ------------------------------------------------------------
   Sidhuvudet hålls lågt och sektionen tät, så att båda valen
   ryms på skärmen direkt utan att besökaren behöver scrolla.
   ------------------------------------------------------------ */
.regel-topp.topp-kort {
  padding-top: clamp(7rem, 14vh, 9rem);
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
}
.regel-topp.topp-kort .ingress { margin-bottom: 0; }

.sektion.sektion-kort {
  padding-top: clamp(2rem, 4vh, 3rem);
  padding-bottom: clamp(4rem, 8vh, 6rem);
  border-top: none;
}

.val-lista {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--linje);
  border: 1px solid var(--linje);
}

.val-kort {
  position: relative;
  display: block;
  padding: clamp(2rem, 5vw, 3rem);
  background: var(--bg);
  transition: background 0.6s var(--mjuk);
}
.val-kort:hover { background: rgba(255, 255, 255, 0.02); }

.val-nr {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.val-kort h2 {
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 200;
  margin-bottom: 0.9rem;
}

.val-kort p {
  color: var(--text-dampad);
  font-size: 0.95rem;
  max-width: 54ch;
}

.val-pil {
  position: absolute;
  right: clamp(1.5rem, 4vw, 3rem);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.35;
  transition: transform 0.5s var(--mjuk), opacity 0.5s var(--mjuk);
}
.val-pil svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.val-kort:hover .val-pil { transform: translateY(-50%) translateX(6px); opacity: 1; }

/* ------------------------------------------------------------
   GENVÄGEN TILL MUNTLIG ANSÖKAN (överst på whitelist-sidan)
   ------------------------------------------------------------ */
.muntlig-ruta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 3.5rem 1.4rem 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--linje);
  border-radius: 3px;
  background: var(--bg-panel);
  transition: border-color 0.5s var(--mjuk), background 0.5s var(--mjuk);
}
.muntlig-ruta:hover {
  border-color: var(--accent);
  background: var(--accent-svag);
}

.muntlig-ikon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.muntlig-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: var(--text-dampad);
}
.muntlig-text strong {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}

.muntlig-ruta .val-pil { right: 1.4rem; }

/* Tillbaka-länken ovanför rubriken på ansökningssidorna */
.tillbaka {
  color: var(--accent);
  transition: opacity var(--snabb);
}
.tillbaka:hover { opacity: 0.7; }

/* ------------------------------------------------------------
   GRUNDREGLERNA (visas direkt på regelsidan)
   ------------------------------------------------------------ */
.grund-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.grund-post {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.grund-post:last-child { border-bottom: none; }

.grund-nr {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  padding-top: 0.5rem;
}

.grund-post h3 {
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.grund-post p {
  color: var(--text-dampad);
  font-size: 0.95rem;
  max-width: 62ch;
}

/* ------------------------------------------------------------
   FÖRDJUPNINGEN (fälls ut när man klickar på pilen)
   ------------------------------------------------------------ */
.fordjupning {
  margin: clamp(3rem, 7vh, 5rem) 0 0;
  border-top: 1px solid var(--linje);
  border-bottom: 1px solid var(--linje);
}

.fordjupning summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.8rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color var(--snabb);
}
/* Döljer webbläsarens egen triangel */
.fordjupning summary::-webkit-details-marker { display: none; }
.fordjupning summary::marker { content: ''; }

.fordjupning-text {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color var(--snabb);
}

.fordjupning-not {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-svag);
}

.fordjupning-pil {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s var(--mjuk);
}

.fordjupning[open] .fordjupning-pil { transform: rotate(180deg); }
.fordjupning summary:hover .fordjupning-text { color: var(--accent); }

.fordjupning-innehall {
  padding: 1rem 0 3.5rem;
  animation: veckla-ut 0.7s var(--mjuk) both;
}

@keyframes veckla-ut {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* Ett regelavsnitt */
.regel-block {
  padding-top: clamp(3rem, 7vh, 5rem);
  margin-top: clamp(3rem, 7vh, 5rem);
  border-top: 1px solid var(--linje);
  scroll-margin-top: 6rem;
}
.regel-block:first-child { border-top: none; margin-top: 0; padding-top: 0; }

.regel-rubrik {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.regel-rubrik h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.3rem);
  font-weight: 200;
}
.regel-siffra {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--accent);
}

.regel-ingress {
  color: var(--text-svag);
  font-size: 0.95rem;
  font-style: italic;
  max-width: 54ch;
  margin-bottom: 3rem;
}

.regel-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.regel-post {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0.5rem;
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  transition: background 0.6s var(--mjuk);
}
.regel-post:hover { background: rgba(255, 255, 255, 0.012); }
.regel-post:last-child { border-bottom: none; }

.regel-nr {
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.05em;
  padding-top: 0.35rem;
}

.regel-post h3 {
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.regel-post p {
  color: var(--text-dampad);
  font-size: 0.93rem;
  max-width: 62ch;
}

.regel-slut {
  margin-top: clamp(4rem, 9vh, 7rem);
  text-align: center;
}
.regel-slut h3 { font-size: 1.3rem; margin-bottom: 0.9rem; }
.regel-slut p {
  color: var(--text-dampad);
  max-width: 46ch;
  margin: 0 auto 2.2rem;
  font-size: 0.95rem;
}

.nav-lankar a.aktiv { color: var(--text); }
.nav-lankar a.aktiv::after { transform: scaleX(1); }

/* ------------------------------------------------------------
   MOBIL & PLATTA
   ------------------------------------------------------------ */
@media (max-width: 780px) {
  .meny-knapp { display: flex; }

  .nav-lankar {
    position: fixed;
    inset: 0 0 auto;
    top: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    height: 100svh;
    padding: 0 var(--sido-marginal);
    background: rgba(8, 9, 10, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.45s var(--mjuk), transform 0.45s var(--mjuk), visibility 0.45s;
    z-index: -1;
  }
  .nav-lankar.oppen {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-lankar a { font-size: 1.4rem; letter-spacing: 0.1em; color: var(--text); }
  .nav-lankar a::after { display: none; }

  .falt-rad { grid-template-columns: 1fr; gap: 1.75rem; }

  .sektion { padding-top: 6rem; padding-bottom: 6rem; }
  .sektion-titel br { display: none; }

  /* Storre traffytor pa mobil */
  input[type="text"], input[type="number"], select, textarea {
    font-size: 16px; /* hindrar att iPhone zoomar in vid fokus */
    padding: 0.95rem 1rem;
  }
  textarea { min-height: 150px; }
  .knapp { padding: 1.1rem 1.75rem; }

  .sidfot-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; }

  /* Låser sidan bakom den öppna mobilmenyn */
  body.meny-oppen { overflow: hidden; }

  /* Reglerna: numret hamnar ovanför rubriken i stället för bredvid */
  .regel-post {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 1.4rem 0;
  }
  .regel-nr { padding-top: 0; }

  .regel-index { gap: 0.5rem; }
  .regel-index-lank { font-size: 0.8rem; padding: 0.6rem 0.9rem; }

  /* Grundreglerna: numret ovanför rubriken i stället för bredvid */
  .grund-post { grid-template-columns: 1fr; gap: 0.35rem; padding: 1.4rem 0; }
  .grund-nr { padding-top: 0; }

  /* "Hela regelverket" får inte plats bredvid pilen på små skärmar */
  .fordjupning-not { display: none; }

  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .knapp { width: 100%; }

  .ljud-knapp { left: 1rem; bottom: 1rem; }

  .intro-hoppa { display: none; }
}

@media (max-width: 400px) {
  .principer li { padding: 2rem 1.5rem; }
}

/* ------------------------------------------------------------
   RESPEKTERA "MINDRE RORELSE" I OPERATIVSYSTEMET
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .fade { opacity: 1; transform: none; }
}