/* Harald sin tulleside — fargerik og leken! */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --rosa: #ff5d8f;
  --gul: #ffd400;
  --gronn: #3ddc84;
  --bla: #38b6ff;
  --lilla: #9b5de5;
  --oransje: #ff9e2c;
}

/* Scroll-låsen slås på av js/laas.js mens man spiller eller tegner */
html.laast,
html.laast body {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

body {
  overscroll-behavior-y: contain;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Segoe UI", sans-serif;
  background: linear-gradient(160deg, #38b6ff 0%, #9b5de5 50%, #ff5d8f 100%);
  background-attachment: fixed;
  min-height: 100vh;
  color: #2b2b2b;
  text-align: center;
  overflow-x: hidden;
}

header {
  padding: 2.5rem 1rem 1rem;
}

/* Regnbuebokstaver i tittelen */
#tittel {
  font-size: clamp(3rem, 14vw, 7rem);
  letter-spacing: 0.05em;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
  user-select: none;
}

#tittel span {
  display: inline-block;
  animation: dans 1.6s ease-in-out infinite;
  cursor: pointer;
  transition: transform 0.15s;
}

#tittel span:hover {
  transform: scale(1.4) rotate(10deg);
}

@keyframes dans {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-18px) rotate(4deg); }
}

/* 3D-fysikktittelen (vises bare når three.js er lastet) */
#tittel.skjult {
  display: none;
}

#tittel-3d {
  display: none;
  position: relative;
  width: min(960px, 100%);
  height: clamp(220px, 38vw, 320px);
  margin: 0 auto;
  touch-action: none;
  cursor: grab;
}

#tittel-3d.klar {
  display: block;
}

#tittel-3d:active {
  cursor: grabbing;
}

#tittel-3d canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.scene-knapp {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 48px;
  height: 48px;
  font-size: 1.4rem;
  background: #fffdf5;
  border: 4px solid #2b2b2b;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
  -webkit-tap-highlight-color: transparent;
}

.scene-knapp:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.scene-knapp.tilt {
  right: 66px;
}

.undertittel {
  color: #fff;
  font-size: clamp(1rem, 4vw, 1.5rem);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
  margin-top: 0.5rem;
}

.emoji-rad {
  font-size: 2.2rem;
  margin-top: 0.8rem;
}

.hopp {
  display: inline-block;
  margin: 0 0.3rem;
  animation: hopp 1s ease-in-out infinite;
}

.hopp:nth-child(2) { animation-delay: 0.15s; }
.hopp:nth-child(3) { animation-delay: 0.3s; }
.hopp:nth-child(4) { animation-delay: 0.45s; }
.hopp:nth-child(5) { animation-delay: 0.6s; }

@keyframes hopp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

main {
  max-width: 620px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.kort {
  background: #fffdf5;
  border-radius: 28px;
  border: 6px solid #2b2b2b;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.3);
  padding: 1.5rem 1rem 2rem;
  animation: kort-inn 0.6s ease-out backwards;
}

.kort:nth-child(1) { animation-delay: 0.1s; }
.kort:nth-child(2) { animation-delay: 0.25s; }
.kort:nth-child(3) { animation-delay: 0.4s; }
.kort:nth-child(4) { animation-delay: 0.55s; }

@keyframes kort-inn {
  from {
    transform: translateY(40px) scale(0.95);
    opacity: 0;
  }
}

.kort h2 {
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  margin-bottom: 0.5rem;
}

.forklaring {
  font-size: 1.05rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.stor-knapp {
  font-family: inherit;
  font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  font-weight: bold;
  color: #fff;
  background: var(--gronn);
  border: 5px solid #2b2b2b;
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  box-shadow: 0 6px 0 #1d8a50;
  transition: transform 0.1s, box-shadow 0.1s;
  touch-action: manipulation;
}

.stor-knapp:hover {
  animation: vrikk 0.35s ease-in-out;
}

@keyframes vrikk {
  25% { transform: rotate(-2.5deg) scale(1.04); }
  75% { transform: rotate(2.5deg) scale(1.04); }
}

.stor-knapp:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 #1d8a50;
}

#tull-knapp {
  background: var(--oransje);
  box-shadow: 0 6px 0 #b86a10;
}

#tull-knapp:active { box-shadow: 0 1px 0 #b86a10; }

#vits-knapp {
  background: var(--bla);
  box-shadow: 0 6px 0 #1d77b0;
}

#vits-knapp:active { box-shadow: 0 1px 0 #1d77b0; }

/* Spillet */
.spill-info {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.info-boks {
  background: var(--gul);
  border: 4px solid #2b2b2b;
  border-radius: 14px;
  padding: 0.4rem 1rem;
  font-size: 1.3rem;
  font-weight: bold;
  min-width: 5rem;
}

#brett {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 420px;
  margin: 0 auto 1.2rem;
  position: relative;
  touch-action: none;
}

.poeng-popp {
  position: absolute;
  font-size: 1.5rem;
  font-weight: bold;
  pointer-events: none;
  z-index: 10;
  text-shadow:
    -2px -2px 0 #fffdf5, 2px -2px 0 #fffdf5,
    -2px 2px 0 #fffdf5, 2px 2px 0 #fffdf5;
  animation: sprett-opp 0.7s ease-out forwards;
}

@keyframes sprett-opp {
  to {
    transform: translateY(-55px) scale(1.3);
    opacity: 0;
  }
}

#tid-boks.tid-roed {
  background: #ff5d5d;
  color: #fff;
  animation: pulser 0.5s infinite;
}

@keyframes pulser {
  50% { transform: scale(1.12); }
}

.hull {
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 70%, #6b4423 0%, #4a2f17 70%);
  border: 4px solid #2b2b2b;
  border-radius: 18px;
  font-size: clamp(2.2rem, 10vw, 3.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.hull .figur {
  transform: translateY(120%);
  transition: transform 0.12s ease-out;
  pointer-events: none;
}

.hull.oppe .figur {
  transform: translateY(0);
}

.hull.klasket {
  animation: rist 0.3s;
}

@keyframes rist {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg) scale(0.95); }
  75% { transform: rotate(6deg) scale(0.95); }
}

#resultat {
  font-size: 1.3rem;
  font-weight: bold;
  margin-top: 1rem;
  min-height: 1.6rem;
}

/* Tull og vitser */
#tull-tekst,
#vits-tekst {
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 1.2rem;
  min-height: 2rem;
  line-height: 1.5;
  padding: 0 0.5rem;
}

#tull-tekst.vis,
#vits-tekst.vis {
  animation: popp 0.4s ease-out;
}

@keyframes popp {
  0% { transform: scale(0.3); opacity: 0; }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

footer {
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  padding: 2rem 1rem 2.5rem;
  font-size: 1rem;
  line-height: 1.8;
}

/* Tegnemaskinen */
.verktoy-rad {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0.8rem;
}

.knapp-rad {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.farge-valg .prikk {
  display: block;
  border-radius: 50%;
  background: #2b2b2b;
}

.farge-valg {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid #2b2b2b;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.farge-valg.valgt {
  transform: scale(1.25);
  box-shadow: 0 0 0 4px #fffdf5, 0 0 0 8px var(--lilla);
}

.farge-valg.regnbue {
  background: conic-gradient(red, orange, yellow, green, blue, purple, red);
}

#lerret {
  width: 100%;
  max-width: 540px;
  border: 5px solid #2b2b2b;
  border-radius: 18px;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
  margin-bottom: 0.8rem;
}

.liten-knapp {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: bold;
  color: #fff;
  background: var(--rosa);
  border: 4px solid #2b2b2b;
  border-radius: 999px;
  padding: 0.5rem 1.3rem;
  cursor: pointer;
  box-shadow: 0 5px 0 #b53860;
  transition: transform 0.1s, box-shadow 0.1s;
  touch-action: manipulation;
}

.liten-knapp:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #b53860;
}

/* Glitterspor etter musa */
.spor {
  position: absolute;
  pointer-events: none;
  font-size: 1rem;
  transform: translate(-50%, -50%);
  animation: glitre 0.7s ease-out forwards;
}

@keyframes glitre {
  to {
    transform: translate(-50%, -150%) scale(0.2) rotate(90deg);
    opacity: 0;
  }
}

/* Svevende pynt i bakgrunnen */
#pynt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

#pynt span {
  position: absolute;
  font-size: 2.5rem;
  opacity: 0.4;
  animation: svev 14s ease-in-out infinite;
}

#pynt span:nth-child(1) { left: 5%; top: 18%; }
#pynt span:nth-child(2) { left: 88%; top: 30%; animation-delay: -3s; }
#pynt span:nth-child(3) { left: 12%; top: 65%; animation-delay: -6s; }
#pynt span:nth-child(4) { left: 80%; top: 75%; animation-delay: -9s; }
#pynt span:nth-child(5) { left: 45%; top: 88%; animation-delay: -11s; }
#pynt span:nth-child(6) { left: 60%; top: 10%; animation-delay: -5s; }

@keyframes svev {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  50% { transform: translate(20px, -30px) rotate(6deg); }
}

header, main, footer {
  position: relative;
  z-index: 1;
}

/* Lydknapp */
#lyd-knapp {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 100;
  width: 54px;
  height: 54px;
  font-size: 1.6rem;
  background: #fffdf5;
  border: 4px solid #2b2b2b;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

#lyd-knapp:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/* Kombo og frenzy */
#streak-boks.brenner {
  background: var(--oransje);
  animation: pulser 0.6s infinite;
}

.kort.frenzy {
  animation: frenzy-puls 0.5s infinite;
}

@keyframes frenzy-puls {
  50% { border-color: #ff5d5d; }
}

#brett.rist-brett {
  animation: rist-brett 0.3s;
}

@keyframes rist-brett {
  25% { transform: translateX(-7px) rotate(-1deg); }
  75% { transform: translateX(7px) rotate(1deg); }
}

/* Toppliste og navneskjema */
.liste-tittel {
  margin-top: 1.4rem;
  font-size: 1.3rem;
}

#toppliste {
  list-style: none;
  margin: 0.5rem auto 0;
  max-width: 320px;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: left;
}

#toppliste li {
  background: var(--gul);
  border: 3px solid #2b2b2b;
  border-radius: 12px;
  padding: 0.35rem 0.8rem;
  margin-bottom: 6px;
}

#toppliste li.tom-liste {
  background: #fff;
  font-weight: normal;
  text-align: center;
}

#navn-skjema {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

#navn-skjema[hidden] {
  display: none;
}

#navn-skjema p {
  font-weight: bold;
}

#navn-input {
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  border: 4px solid #2b2b2b;
  border-radius: 12px;
  padding: 0.4rem 0.8rem;
  width: min(240px, 80%);
}

.hint {
  margin-top: 1rem;
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Hemmelig fest! */
.hemmelig-hint {
  font-size: 0.85rem;
  opacity: 0.8;
}

body.fest {
  animation: regnbuefest 1s linear infinite;
}

@keyframes regnbuefest {
  to { filter: hue-rotate(360deg); }
}

/* Konfetti */
#confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}

.konfetti {
  position: absolute;
  top: -5vh;
  font-size: 1.6rem;
  animation: fall linear forwards;
}

@keyframes fall {
  to {
    transform: translateY(110vh) rotate(720deg);
  }
}

/* Mindre bevegelse for de som har bedt om det */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}