:root {
  --natt: #07030f;
  --natt-2: #120826;
  --ink: #f2eaff;
  --ink-svak: #a99cc4;
  --rosa: #ff3ca6;
  --cyan: #2de2e6;
  --lilla: #a45cff;
  --lime: #c4ff3e;
  --gul: #ffd23e;
  --r: 16px;
  --r-lg: 26px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Fjerner nettleserens ventetid på dobbelttrykk. Uten dette kommer lyden
   omtrent 300 ms for sent, og et instrument som svarer sent er ikke et
   instrument. Rulling virker fortsatt. */
button, .kort, .merke, .eff, .rund, .spill { touch-action: manipulation; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: var(--ink);
  /* Emoji-fontene står eksplisitt sist. Uten dem faller Windows tilbake til
     «Segoe UI», som ikke har emoji-glyfer, og halve grensesnittet blir tomme
     firkanter for den som tester på PC. */
  font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  font-size: 17px;
  font-weight: 700;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  background: var(--natt);
}

/* Fast bakgrunn under alt. Lerretet tegner stjerner og gitter oppå denne. */
body {
  background:
    radial-gradient(120% 80% at 50% 110%, #2a0a4a 0%, transparent 60%),
    radial-gradient(90% 60% at 10% 0%, #23063c 0%, transparent 55%),
    linear-gradient(180deg, #0a0418 0%, #07030f 100%);
  overflow: hidden;
}

#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Kolonne, så versjonsmerket kan skyves til bunnen av skjermen på høye
   nettbrett i stedet for å henge løst under innholdet. */
#app {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  padding:
    calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
    calc(10px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}

/* ---------- merkevare ---------- */

.merkeord {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 0 8px var(--rosa), 0 0 26px var(--rosa), 0 0 48px #ff0080;
}
.merkeord span {
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan), 0 0 26px var(--cyan), 0 0 48px #00d4ff;
}
.merkeord.stor { font-size: clamp(44px, 13vw, 92px); letter-spacing: 4px; }

.versjon {
  margin-top: auto;
  text-align: center;
  color: #4b3d68;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 14px 0 4px;
}

/* ---------- startskjerm ---------- */

.startskjerm {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
.startskjerm p {
  color: var(--ink-svak);
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: 1px;
}

/* ---------- topplinje ---------- */

.topp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.topp .merkeord { flex: 1 1 auto; }

.tempo {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(164, 92, 255, 0.5);
  border-radius: 999px;
  padding: 4px;
}
.tempo .tall { min-width: 56px; text-align: center; line-height: 1; }
.tempo .tall b { display: block; font-size: 20px; color: var(--cyan); }
.tempo .tall span { font-size: 9px; letter-spacing: 2px; color: var(--ink-svak); }

.rund {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}
.rund:active { transform: scale(0.92); }
.rund.stor { font-size: 22px; }

.spill {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(160deg, var(--lime), #6fd400);
  color: #06210a;
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(196, 255, 62, 0.55);
}
.spill.gaar {
  background: linear-gradient(160deg, var(--rosa), #c4007a);
  color: #fff;
  box-shadow: 0 0 26px rgba(255, 60, 166, 0.6);
}
.spill:active { transform: scale(0.93); }

/* ---------- seksjoner og rutenett ---------- */

#app > .opptak, #app > .side, #app > .startskjerm { flex: 1 0 auto; }
.topp, .seksjon { flex: 0 0 auto; }

.seksjon { margin-bottom: 14px; }
.seksjon h2 {
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--ink-svak);
  margin: 6px 2px 8px;
  font-weight: 800;
}

.rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

/* ---------- monsterkortene ---------- */

/* --niva og --sprett settes av animasjonsløkken. Alt som beveger seg her er
   transform og box-shadow, som nettleseren klarer på GPU. Å animere filtre
   eller farger i stedet ville gitt hakking på et nettbrett. */
.kort {
  --niva: 0;
  --sprett: 0;
  position: relative;
  aspect-ratio: 1 / 1.15;
  border-radius: var(--r);
  border: 2px solid hsl(var(--hue) 90% 60% / 0.55);
  background:
    radial-gradient(85% 65% at 50% 25%, hsl(var(--hue) 85% 22% / 0.9), transparent 70%),
    rgba(12, 6, 26, 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 4px 4px;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  /* Et avslått monster skal fortsatt se ut som et monster man kan skru på,
     ikke som noe som er borte. Derfor dempes det, men ikke bort. */
  opacity: 0.58;
  filter: saturate(0.4);
  transform: scale(calc(1 + var(--sprett) * 0.07));
  transition: opacity 0.18s, filter 0.18s;
}

.kort.paa {
  opacity: 1;
  filter: none;
  border-color: hsl(var(--hue) 100% 68%);
  box-shadow:
    0 0 calc(8px + var(--niva) * 34px) hsl(var(--hue) 100% 60% / calc(0.35 + var(--niva) * 0.5)),
    inset 0 0 calc(6px + var(--niva) * 22px) hsl(var(--hue) 100% 60% / 0.28);
  transform: scale(calc(1 + var(--sprett) * 0.09 + var(--niva) * 0.02));
}

.kort:active { transform: scale(0.95); }

.figur { width: 100%; flex: 1 1 auto; min-height: 0; }
.mstr { width: 100%; height: 100%; display: block; }

/* Munnen strekkes loddrett i takt med lydnivået. fill-box gjør at den vokser
   fra sin egen midte i stedet for fra hjørnet av hele tegningen. */
.munn {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.05s linear;
}
.oye {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.07s ease-out;   /* mykt blunk, ikke et hopp */
}

.navn {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: hsl(var(--hue, 280) 100% 82%);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 2px 5px 0;
}

/* Prikket linje under navnet på egne lyder: den eneste hinten barn trenger om
   at noe kan skrives om. Trykkfeltet strekkes ut under teksten, så en finger
   treffer uten å skrive på monsteret over. */
.navn.kanEndres {
  position: relative;
  border-bottom: 2px dotted hsl(var(--hue, 280) 100% 70% / 0.55);
  cursor: text;
}
.navn.kanEndres::after {
  content: "";
  position: absolute;
  inset: -6px -10px -8px;
}
.navn.kanEndres:active { color: #fff; }

.navnefelt.midtstilt { text-align: center; max-width: 320px; width: 100%; }

.merke {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 15px;
  line-height: 1;
  background: rgba(6, 2, 14, 0.82);
  border: 1px solid hsl(var(--hue) 90% 60% / 0.6);
  border-radius: 999px;
  padding: 6px 8px;
  cursor: pointer;
}

/* Merket kan ikke bli visuelt mye større uten å dekke monsteret, men en
   sjuårings finger treffer ikke 50 piksler. Det usynlige feltet utenfor gir
   knappen et trykkområde på nær 70x48 uten at den ser klumpete ut. */
.merke::before {
  content: "";
  position: absolute;
  inset: -11px -10px -13px -13px;
}
.merke:active { transform: scale(0.9); }

.lys {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 3px;
  height: 3px;
  border-radius: 3px;
  background: hsl(var(--hue) 100% 65%);
  opacity: calc(var(--niva) * 1.4);
}

.kort.nytt {
  opacity: 1;
  filter: none;
  border: 2px dashed rgba(45, 226, 230, 0.7);
  background: rgba(45, 226, 230, 0.07);
  justify-content: center;
  gap: 8px;
}
.kort.nytt .mikro { font-size: 34px; }
.kort.nytt .navn { color: var(--cyan); font-size: 12px; }

/* Når alle 200 plassene er brukt, blir TA OPP-flisen en feiring i stedet for
   en tom plass. Den sier også hva som skal til for å lage flere. */
.kort.nytt.fullt { border-color: rgba(196, 255, 62, 0.6); background: rgba(196, 255, 62, 0.07); cursor: default; }
.kort.nytt.fullt .navn { color: var(--lime); }
.fulltTekst { font-size: 10px; color: var(--ink-svak); text-align: center; padding: 0 6px; font-weight: 600; }

.seksjon h2 .antall {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(45, 226, 230, 0.15);
  color: var(--cyan);
  letter-spacing: 1px;
}

/* «Vis alle» er en full rad, ikke en liten lenke: med mange lyder er det den
   de trenger for å finne igjen en gammel favoritt. */
.flere {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  border-radius: var(--r);
  border: 2px dashed rgba(45, 226, 230, 0.5);
  background: rgba(45, 226, 230, 0.06);
  color: var(--cyan);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  cursor: pointer;
  touch-action: manipulation;
}
.flere span { font-size: 11px; color: var(--lime); letter-spacing: 1px; font-weight: 700; }
.flere:active { transform: scale(0.98); }

/* ---------- DJ-pulten ---------- */

.dj-knapp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border-radius: 999px;
  border: 2px solid rgba(255, 210, 62, 0.6);
  background: rgba(255, 210, 62, 0.12);
  color: var(--gul);
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 7px 13px;
  cursor: pointer;
  touch-action: manipulation;
}
.dj-knapp span { font-size: 19px; line-height: 1; }
.dj-knapp:active { transform: scale(0.93); }

.dj { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.djtopp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 54px; }
.djtopp .merkeord { flex: 1 1 auto; font-size: 20px; }

/* De to dekkene står side ved side, som på en ekte pult. Én kolonne hver,
   også på telefon — et miksebord med dekkene over hverandre ville ikke vært
   et miksebord. */
.dekkrad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dekk {
  --niva: 0;
  position: relative;
  border: 2px solid hsl(var(--hue) 90% 60% / 0.5);
  border-radius: var(--r);
  background:
    radial-gradient(80% 60% at 50% 0%, hsl(var(--hue) 85% 25% / 0.7), transparent 70%),
    rgba(10, 5, 22, 0.75);
  padding: 8px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
  box-shadow: 0 0 calc(4px + var(--niva) * 26px) hsl(var(--hue) 100% 60% / calc(0.15 + var(--niva) * 0.45));
}
.dekknavn {
  position: absolute;
  top: 6px;
  left: 9px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  color: hsl(var(--hue) 100% 75%);
}
/* platen krymper med kolonnen, ellers blir dekkene bredere enn skjermen */
.platehus { width: 100%; max-width: 150px; }
.plate {
  width: 100%;
  animation: snurr 1.2s linear infinite;
  filter: drop-shadow(0 0 calc(3px + var(--niva) * 16px) hsl(var(--hue) 100% 60% / 0.8));
}
.plate svg { width: 100%; display: block; }
.plate.staar { animation-play-state: paused; }
@keyframes snurr { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .plate { animation: none; }
}

.dekkvalg {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid hsl(var(--hue) 90% 60% / 0.6);
  background: hsl(var(--hue) 85% 45% / 0.18);
  color: #fff;
  border-radius: 999px;
  padding: 8px 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  touch-action: manipulation;
}
.dekkvalg span { font-size: 16px; }
.dekkvalg:active { transform: scale(0.96); }

.fxrad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; }
.fx {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-svak);
  border-radius: 10px;
  padding: 5px 1px 4px;
  font-family: inherit;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  touch-action: manipulation;
}
.fx span { font-size: 15px; line-height: 1; }
.fx.paa {
  color: #fff;
  border-color: hsl(var(--hue) 100% 70%);
  background: hsl(var(--hue) 90% 50% / 0.3);
  box-shadow: 0 0 12px hsl(var(--hue) 100% 60% / 0.6);
}
.fx:active { transform: scale(0.94); }

.filterrad { display: flex; align-items: center; gap: 5px; width: 100%; }
.filterrad i { font-size: 7px; letter-spacing: 1px; color: var(--ink-svak); font-style: normal; }

/* Skyvekontrollene er store nok for en tommel, og får farge fra dekket. */
.djfilter, .crossfader {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 26px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.djfilter::-webkit-slider-runnable-track, .crossfader::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, hsl(var(--hue, 280) 90% 55% / 0.35), rgba(255, 255, 255, 0.18), hsl(var(--hue, 280) 90% 55% / 0.35));
}
.djfilter::-moz-range-track, .crossfader::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}
.djfilter::-webkit-slider-thumb, .crossfader::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border-radius: 50%;
  background: hsl(var(--hue, 280) 100% 65%);
  border: 2px solid #fff;
  box-shadow: 0 0 12px hsl(var(--hue, 280) 100% 60%);
}
.djfilter::-moz-range-thumb, .crossfader::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: hsl(var(--hue, 280) 100% 65%);
  border: 2px solid #fff;
}

.dekkmonstre { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; width: 100%; }
.dm {
  border: 1.5px solid hsl(var(--hue) 90% 60% / 0.45);
  background: rgba(255, 255, 255, 0.04);
  color: hsl(var(--hue) 90% 78% / 0.75);
  border-radius: 999px;
  padding: 4px 7px;
  font-family: inherit;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  touch-action: manipulation;
}
.dm.paa {
  color: #fff;
  border-color: hsl(var(--hue) 100% 68%);
  background: hsl(var(--hue) 90% 50% / 0.28);
  box-shadow: 0 0 10px hsl(var(--hue) 100% 60% / 0.5);
}
.dm:active { transform: scale(0.93); }

/* Krysstoningen er den viktigste kontrollen på skjermen, og den største. */
.faderrad { display: flex; align-items: center; gap: 8px; }
.crossfelt {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 5, 22, 0.7);
  border: 2px solid rgba(164, 92, 255, 0.4);
  border-radius: 999px;
  padding: 4px 12px;
}
.crossfelt i { font-size: 13px; font-style: normal; font-weight: 900; color: var(--ink-svak); }
.crossfader { --hue: 280; height: 34px; }
.crossfader::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -11px; }
.crossfader::-moz-range-thumb { width: 30px; height: 30px; }

.stormknapp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-family: inherit;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 8px 10px;
  cursor: pointer;
  touch-action: manipulation;
}
.stormknapp span { font-size: 19px; line-height: 1; }
.stormknapp.miks { border-color: rgba(196, 255, 62, 0.6); color: var(--lime); }
.stormknapp.brems { border-color: rgba(255, 60, 106, 0.6); color: #ff7ba1; }
.stormknapp:active, .stormknapp.holdes { transform: scale(0.94); }
.stormknapp.holdes { background: rgba(255, 60, 106, 0.3); color: #fff; }

.djpads .pads { gap: 5px; }
.dj .pad { font-size: 7.5px; }

/* Barnas egne lyder: trykk og de skytes inn over miksen, én gang. */
.djstemmer {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.djstemme {
  flex: 0 0 auto;
  width: 62px;
  border: 2px solid hsl(var(--hue) 90% 60% / 0.5);
  background: rgba(12, 6, 26, 0.7);
  border-radius: 12px;
  padding: 3px 2px 4px;
  color: hsl(var(--hue) 100% 82%);
  font-family: inherit;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
  overflow: hidden;
}
.djstemme .figur { width: 100%; height: 44px; }
.djstemme.slag { animation: padSlag 0.28s ease-out; }
.djtomt { font-size: 13px; margin: 0; }

@media (min-width: 760px) {
  .dekkrad { gap: 14px; }
  .platehus { max-width: 190px; }
  .fx { font-size: 9px; }
  .dm { font-size: 9px; padding: 5px 9px; }
  .filterrad i { font-size: 9px; }
  .djstemme { width: 78px; font-size: 9px; }
  .djstemme .figur { height: 56px; }
}

/* listen når et dekk skal fylles */
.djliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }
.djvalg {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 2px solid hsl(var(--hue) 90% 60% / 0.45);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border-radius: 12px;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
  overflow: hidden;
}
.djvalg span { font-size: 17px; }
.djvalg.valgt {
  border-color: hsl(var(--hue) 100% 70%);
  background: hsl(var(--hue) 90% 50% / 0.28);
  box-shadow: 0 0 14px hsl(var(--hue) 100% 60% / 0.5);
}
.djvalg:active { transform: scale(0.96); }

/* ---------- drumpadet ---------- */

/* Ti på rad på nettbrett (to rader), fem på rad på telefon. Knappene er
   mindre enn monsterkortene, men fortsatt store nok for en sjuårings finger
   på et nettbrett. */
.pads {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
@media (min-width: 620px) {
  .pads { grid-template-columns: repeat(10, 1fr); gap: 7px; }
}
.pad {
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 12px;
  border: 2px solid hsl(var(--hue) 90% 60% / 0.55);
  background:
    radial-gradient(80% 70% at 50% 30%, hsl(var(--hue) 85% 28% / 0.85), transparent 75%),
    rgba(12, 6, 26, 0.78);
  color: hsl(var(--hue) 100% 82%);
  font-family: inherit;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overflow: hidden;
  white-space: nowrap;
}
.pad span { font-size: clamp(20px, 6vw, 30px); line-height: 1; }
@media (min-width: 620px) { .pad span { font-size: clamp(18px, 2.7vw, 28px); } }
@media (min-width: 900px) { .pad { font-size: 10px; } }
/* lyser opp i sin egen farge i det den slås, og faller tilbake */
.pad.slag { animation: padSlag 0.28s ease-out; }
@keyframes padSlag {
  0% {
    transform: scale(0.86);
    background: hsl(var(--hue) 100% 58%);
    border-color: hsl(var(--hue) 100% 80%);
    box-shadow: 0 0 24px hsl(var(--hue) 100% 60%);
    color: #fff;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pad.slag { animation-duration: 0.12s; }
}

/* ---------- steglys ---------- */

/* Taktlinjen ligger øverst, rett under navnet, og hver prikk har sin egen
   plass i neonskalaen. --h settes per prikk fra app.js. */
.steglys {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  padding: 4px 0 12px;
  flex: 0 0 auto;
}
.steglys i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: hsl(var(--h) 90% 60% / 0.16);
  border: 2px solid hsl(var(--h) 90% 62% / 0.4);
  transition: background 0.07s, box-shadow 0.07s, transform 0.07s;
}
/* hovedslagene er større, så takten kan telles på formen alene */
.steglys i.slag {
  width: 19px;
  height: 19px;
  background: hsl(var(--h) 90% 60% / 0.3);
  border-color: hsl(var(--h) 95% 65% / 0.7);
}
.steglys i.naa {
  background: hsl(var(--h) 100% 68%);
  border-color: hsl(var(--h) 100% 80%);
  box-shadow: 0 0 12px hsl(var(--h) 100% 62%), 0 0 26px hsl(var(--h) 100% 58% / 0.8);
  transform: scale(1.3);
}

/* ---------- valg av grunnbeat ---------- */

.seksjonstopp {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 2px 8px;
}
.seksjonstopp h2 { margin: 0; }

.grunnbeats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.gb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid rgba(164, 92, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-svak);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.gb span { font-size: 16px; }
.gb.valgt {
  color: #fff;
  border-color: var(--cyan);
  background: rgba(45, 226, 230, 0.16);
  box-shadow: 0 0 16px rgba(45, 226, 230, 0.4);
}
.gb:active { transform: scale(0.94); }

/* ---------- de seks beatene ---------- */

/* Store knapper, ett bilde hver, i hver sin neonfarge. Seks på rad på et
   nettbrett, tre og tre på en telefon. Bildet er det barna velger etter;
   navnet er for den som kan lese det. */
.verdener {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
@media (min-width: 620px) {
  .verdener { grid-template-columns: repeat(6, 1fr); }
}
.verden {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  border-radius: var(--r);
  border: 2px solid hsl(var(--hue) 90% 60% / 0.4);
  background: hsl(var(--hue) 80% 50% / 0.06);
  color: hsl(var(--hue) 90% 78% / 0.75);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.vBilde { font-size: 30px; line-height: 1.1; filter: saturate(0.6); transition: transform 0.15s; }
.vNavn { font-size: 10px; font-weight: 900; letter-spacing: 1.2px; white-space: nowrap; }
.verden.valgt {
  color: #fff;
  border-color: hsl(var(--hue) 100% 66%);
  background: hsl(var(--hue) 90% 50% / 0.22);
  box-shadow: 0 0 20px hsl(var(--hue) 100% 60% / 0.55), inset 0 0 14px hsl(var(--hue) 100% 60% / 0.25);
}
.verden.valgt .vBilde { filter: none; transform: scale(1.15); }
.verden:active { transform: scale(0.93); }

/* Når en ny verden åpnes, spretter monstrene inn ett og ett. Det er det som
   forteller barnet at det er NYE monstre, ikke de samme i ny farge. */
.beatkort.inn .kort { animation: inn 0.42s cubic-bezier(0.3, 1.5, 0.6, 1) backwards; }
.beatkort.inn .kort:nth-child(2) { animation-delay: 0.04s; }
.beatkort.inn .kort:nth-child(3) { animation-delay: 0.08s; }
.beatkort.inn .kort:nth-child(4) { animation-delay: 0.12s; }
.beatkort.inn .kort:nth-child(5) { animation-delay: 0.16s; }
.beatkort.inn .kort:nth-child(6) { animation-delay: 0.2s; }
.beatkort.inn .kort:nth-child(7) { animation-delay: 0.24s; }
.beatkort.inn .kort:nth-child(8) { animation-delay: 0.28s; }
.beatkort.inn .kort:nth-child(9) { animation-delay: 0.32s; }

@keyframes inn {
  from { transform: scale(0.4) translateY(18px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .beatkort.inn .kort { animation: none; }
}

/* ---------- knapper ---------- */

.hoved, .sekundaer {
  border: none;
  border-radius: 999px;
  padding: 16px 26px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.5px;
  cursor: pointer;
}
.hoved {
  background: linear-gradient(160deg, var(--lime), #63c400);
  color: #06210a;
  box-shadow: 0 0 22px rgba(196, 255, 62, 0.45);
}
.sekundaer {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  border: 2px solid rgba(255, 255, 255, 0.22);
}
.sekundaer.fare { border-color: rgba(255, 60, 106, 0.6); color: #ff7ba1; }
.hoved:active, .sekundaer:active { transform: scale(0.96); }

.knapperad { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.knapperad.bred { margin: 16px 0 22px; }

.rekord {
  border: none;
  border-radius: 999px;
  padding: 22px 34px;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  background: linear-gradient(160deg, var(--rosa), #8a00b8);
  box-shadow: 0 0 34px rgba(255, 60, 166, 0.6);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  animation: puls 2.2s ease-in-out infinite;
}
.rekord span { font-size: 26px; }
.rekord:active { transform: scale(0.95); }

@keyframes puls {
  0%, 100% { box-shadow: 0 0 26px rgba(255, 60, 166, 0.5); }
  50% { box-shadow: 0 0 50px rgba(255, 60, 166, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .rekord { animation: none; }
}

.tilbake {
  position: absolute;
  top: calc(6px + env(safe-area-inset-top));
  right: calc(6px + env(safe-area-inset-right));
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(10, 4, 22, 0.7);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  z-index: 3;
}

/* ---------- opptaksskjerm ---------- */

.opptak {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
}
.beskjed { max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.beskjed h1 {
  font-size: clamp(28px, 8vw, 44px);
  margin: 0;
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 0 12px var(--lilla), 0 0 34px var(--lilla);
}
.beskjed p { color: var(--ink-svak); margin: 0; font-size: 17px; line-height: 1.5; font-weight: 600; }
.beskjed b { color: var(--cyan); }
.stortEmoji { font-size: 56px; }

.bryter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-svak);
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
}
.bryter input { width: 22px; height: 22px; accent-color: var(--cyan); }

.nedtelling { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nedtelling .tall {
  font-size: clamp(90px, 30vw, 190px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 20px var(--rosa), 0 0 60px var(--rosa);
  line-height: 1;
}
.nedtelling .tall.slag { animation: smell 0.4s ease-out; }
.nedtelling p { letter-spacing: 4px; color: var(--ink-svak); margin: 0; }

@keyframes smell {
  0% { transform: scale(1.5); opacity: 0.2; }
  100% { transform: scale(1); opacity: 1; }
}

#ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.midtIRing {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.midtIRing .stortEmoji { font-size: clamp(48px, 12vw, 78px); }

.tidslinje {
  position: relative;
  z-index: 2;
  width: min(70%, 380px);
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.tidslinje i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--rosa));
}
.stopp { position: relative; z-index: 2; }

/* ---------- lytt og velg effekt ---------- */

.lytt { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.nyttMonster {
  width: clamp(130px, 32vw, 190px);
  filter: drop-shadow(0 0 22px hsl(var(--hue) 100% 60% / 0.7));
  cursor: pointer;
  touch-action: manipulation;
}
.nyttMonster:active { transform: scale(0.94); }
/* en liten snurr når figuren byttes, så barnet ser at trykket virket */
.nyttMonster.spinn { animation: spinn 0.4s cubic-bezier(0.3, 1.4, 0.6, 1); }
@keyframes spinn {
  from { transform: scale(0.5) rotate(-25deg); opacity: 0.2; }
}
.nyFigurHint {
  margin-top: -10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ink-svak);
}
@media (prefers-reduced-motion: reduce) {
  .nyttMonster.spinn { animation: none; }
}

.effektvalg, .valgrad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 640px;
}

.eff {
  border: 2px solid hsl(var(--hue, 280) 90% 60% / 0.45);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  border-radius: 14px;
  padding: 10px 4px 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.eff span { font-size: 24px; }
.eff.valgt {
  background: hsl(var(--hue, 280) 90% 55% / 0.25);
  border-color: hsl(var(--hue, 280) 100% 70%);
  box-shadow: 0 0 18px hsl(var(--hue, 280) 100% 60% / 0.5);
}
.eff:active { transform: scale(0.94); }

/* ---------- sider ---------- */

.side { position: relative; max-width: 640px; margin: 0 auto; padding-top: 20px; }
.side h1 {
  font-size: 26px;
  letter-spacing: 3px;
  text-align: center;
  text-shadow: 0 0 14px var(--lilla);
}
.tomt { color: var(--ink-svak); text-align: center; font-weight: 600; line-height: 1.5; }

/* ---------- sangene, nederst på brettet ---------- */

.sangrad {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.sangkort {
  position: relative;
  border: 2px solid rgba(164, 92, 255, 0.45);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(164, 92, 255, 0.18), transparent 70%),
    rgba(12, 6, 26, 0.7);
  border-radius: var(--r);
  padding: 10px 12px 12px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sangkort:active { transform: scale(0.97); }

.sangtopp { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.sanggb { font-size: 19px; }
.sangspill {
  flex: 1;
  color: var(--lime);
  font-size: 15px;
  text-shadow: 0 0 10px var(--lime);
}
.sangslett {
  border: none;
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink-svak);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
}
.sangslett:active { transform: scale(0.88); }

.sangkort .sangnavn {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sanginfo { font-size: 11px; color: var(--ink-svak); font-weight: 600; letter-spacing: 1px; }

/* Sangen som går nå lyser grønt, som avspillingsknappen — samme farge betyr
   samme ting gjennom hele appen. */
.sangkort.aktiv {
  border-color: var(--lime);
  box-shadow: 0 0 18px rgba(196, 255, 62, 0.45);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(196, 255, 62, 0.2), transparent 70%),
    rgba(12, 6, 26, 0.7);
}

.gb.lagre { border-color: rgba(196, 255, 62, 0.5); color: var(--lime); }
.seksjon.sanger .tomt { font-size: 14px; text-align: left; margin: 4px 2px; }

/* ---------- arket ---------- */

#ark { position: fixed; inset: 0; z-index: 10; display: none; }
#ark.vis { display: block; }
.arkbakgrunn { position: absolute; inset: 0; background: rgba(4, 1, 10, 0.72); backdrop-filter: blur(3px); }
.arkinnhold {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92%;
  overflow-y: auto;
  background: linear-gradient(180deg, #150a29, #0a0417);
  border-top: 3px solid hsl(var(--hue, 280) 100% 65%);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: oppfra 0.22s ease-out;
}

@keyframes oppfra {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.arkinnhold h3 {
  margin: 4px 0 0;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--ink-svak);
}
.arktopp { display: flex; align-items: center; gap: 14px; }
.arkfigur { width: 76px; flex: none; }
.navnefelt {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid hsl(var(--hue, 280) 90% 60% / 0.5);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  font-family: inherit;
}
.spiller { width: 100%; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  background: rgba(10, 4, 24, 0.94);
  border: 2px solid var(--cyan);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 20;
  box-shadow: 0 0 24px rgba(45, 226, 230, 0.4);
  max-width: 88vw;
  text-align: center;
}
.toast.vis { opacity: 1; transform: translate(-50%, 0); }

/* ---------- store skjermer ---------- */

@media (min-width: 760px) {
  .rutenett { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; }
  #app { padding-left: calc(28px + env(safe-area-inset-left)); padding-right: calc(28px + env(safe-area-inset-right)); }
  .navn { font-size: 13px; }
}