/* Bäckens hemlighet */

:root {
  --mork:      #16220f;
  --mork-mjuk: #24331c;
  --panel:     rgba(28, 44, 24, .82);
  --panel-fast:#22331d;
  --ljus:      #f3ead6;
  --dimma:     #cfd8c0;
  --guld:      #e8b84b;
  --vatten:    #6fc2c9;
  --mossa:     #7fa653;
  --skugga:    0 .4rem 1.4rem rgba(0,0,0,.45);
  --rundning:  1.1rem;
  --topp-h:    max(.6rem, env(safe-area-inset-top));
  --botten-h:  max(.6rem, env(safe-area-inset-bottom));
}

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

/* Måste stå före reglerna nedan: id-selektorer med display slår annars ut [hidden]. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  background: #0e150b radial-gradient(120% 90% at 50% 0%, #2b3d24 0%, #131c0e 55%, #090d07 100%);
  color: var(--ljus);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.9vh, 19px);
  line-height: 1.45;
  user-select: none;
  -webkit-user-select: none;
}

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* --------------------------------------------------------------- scenen */

#scenrum {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
}

#scen {
  position: relative;
  aspect-ratio: 3 / 4;
  width: min(100vw, 75vh, 75dvh);
  max-height: 100dvh;
  box-shadow: 0 0 4rem rgba(0,0,0,.6);
  overflow: hidden;
  border-radius: .3rem;
}

#bakgrund { width: 100%; height: 100%; object-fit: cover; }

#varld { position: absolute; inset: 0; }

/* Kväll/gryning-ton som blir varmare ju längre spelaren kommit */
#scen::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 55% at 50% 42%, rgba(255,225,160,.0), rgba(10,20,8,.32) 100%);
  transition: opacity 2s;
}
#scen.levande::after {
  background: radial-gradient(70% 55% at 50% 42%, rgba(255,232,168,.16), rgba(12,26,10,.28) 100%);
}

/* ------------------------------------------------------------- hotspots */

.hot {
  position: absolute;
  border: 0;
  border-radius: 40%;
  background: transparent;
  min-width: 48px;
  min-height: 48px;
  transition: background .18s;
}
.hot:active { background: rgba(255,255,255,.09); }

/* Skimmer när ett tips pekar hit */
.hot.tips::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,190,.55), rgba(255,240,190,0) 70%);
  animation: pulsa 1.9s ease-in-out infinite;
}
@keyframes pulsa { 0%,100% { opacity: .15; transform: scale(.85); } 50% { opacity: .85; transform: scale(1.1); } }

/* --------------------------------------------------------- sceneriobjekt */

.pryl {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 .2rem .35rem rgba(0,0,0,.5));
  animation: tona-in 1.4s ease both;
}
@keyframes tona-in { from { opacity: 0; transform: translateY(.6rem) scale(.9); } to { opacity: 1; } }

.pryl.sway  { animation: tona-in 1.4s ease both, sway 3.4s ease-in-out infinite 1.4s; }
.pryl.swim  { animation: tona-in 1.4s ease both, swim 9s ease-in-out infinite 1.4s; }
.pryl.jump  { animation: tona-in 1.4s ease both, jump 5.5s ease-in-out infinite 1.4s; }
.pryl.float { animation: tona-in 1.4s ease both, flyt 14s linear infinite 1.4s; }
.pryl.glow  { filter: drop-shadow(0 0 1.2rem rgba(255,225,150,.75)) drop-shadow(0 .2rem .4rem rgba(0,0,0,.4)); }

@keyframes sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes swim { 0%,100% { transform: translateX(0); } 50% { transform: translateX(28%); } }
@keyframes jump { 0%,84%,100% { transform: translateY(0) rotate(0); } 90% { transform: translateY(-45%) rotate(-14deg); } }
@keyframes flyt { from { transform: translate(0,0) rotate(0); } to { transform: translate(-22%, 46%) rotate(160deg); } }

/* Ljuspunkter i finalen */
.ljus {
  position: absolute;
  width: 1.1%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255,255,248,1) 0%, rgba(255,240,190,.9) 26%, rgba(255,215,120,0) 70%);
  filter: blur(.4px) drop-shadow(0 0 .5rem rgba(255,226,150,.8));
  animation: gnista 4s ease-in-out infinite;
}
@keyframes gnista { 0%,100% { opacity: .25; transform: scale(.7) translateY(0); } 50% { opacity: 1; transform: scale(1.5) translateY(-18%); } }

/* ---------------------------------------------------------------- bäckis */

#backis {
  position: absolute;
  width: 11%;
  min-width: 54px;
  background: none;
  padding: 0;
  filter: drop-shadow(0 .3rem .5rem rgba(0,0,0,.55));
  animation: backis-in .9s cubic-bezier(.2,1.4,.5,1) both;
  z-index: 3;
}
#backis img { width: 100%; }
#backis.gar { animation: backis-ut .7s ease forwards; }
@keyframes backis-in  { from { opacity: 0; transform: translateY(35%) scale(.6); } to { opacity: 1; } }
@keyframes backis-ut  { to   { opacity: 0; transform: translateY(30%) scale(.7); } }

/* --------------------------------------------------------------- lupplins */

#lupplins {
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background-image: url("../img/bg@2x.jpg");
  background-repeat: no-repeat;
  border: .35rem solid #b98a4e;
  box-shadow: 0 0 0 .18rem #6b4a24, 0 .5rem 1.4rem rgba(0,0,0,.6), inset 0 0 2.4rem rgba(255,255,255,.16);
  z-index: 4;
}

/* ------------------------------------------------------------------- hud */

#topp, #botten {
  position: fixed;
  left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem clamp(.5rem, 2vw, 1rem);
  pointer-events: none;
}
#topp    { top: 0;    padding-top: calc(.5rem + var(--topp-h)); }
#botten  { bottom: 0; padding-bottom: calc(.5rem + var(--botten-h)); justify-content: space-between; }
#topp > *, #botten > * { pointer-events: auto; }

#kapitel-ruta {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: var(--rundning);
  padding: .4rem .8rem;
  box-shadow: var(--skugga);
  text-align: center;
}
#kapitel-titel { font-size: .82em; letter-spacing: .03em; color: var(--guld); }
#kapitel-mal   { font-size: .78em; color: var(--dimma); }

#marken {
  display: flex; align-items: center; gap: .3rem;
  background: var(--panel);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border-radius: 999px;
  padding: .3rem .75rem .3rem .4rem;
  box-shadow: var(--skugga);
  font-variant-numeric: tabular-nums;
}
#marken img { width: 1.7em; }
#marken span { font-size: 1em; color: var(--guld); }
#marken.plus { animation: puff .55s ease; }
@keyframes puff { 40% { transform: scale(1.22); } }

.hud-knapp {
  display: grid; place-items: center;
  background: var(--panel);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border-radius: var(--rundning);
  padding: .35rem;
  box-shadow: var(--skugga);
  transition: transform .15s;
}
.hud-knapp:active { transform: scale(.93); }
.hud-knapp img { width: 2.2em; }
.hud-knapp.stor img { width: 2.8em; }
.hud-knapp .etikett { font-size: .62em; color: var(--dimma); }
.hud-knapp.vaxer { animation: puff .6s ease; }

/* ------------------------------------------------------------ verktygsbält */

/* Bältet radbryts i stället för att scrolla — ett barn hittar inte en dold scroll. */
#verktygsbalt {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem;
  padding: .35rem;
  background: var(--panel);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border-radius: var(--rundning);
  box-shadow: var(--skugga);
  max-width: 74vw;
}
#verktygsbalt:empty { display: none; }

.verktyg {
  flex: 0 0 auto;
  width: 3.1em; height: 3.1em;
  display: grid; place-items: center;
  border-radius: .7rem;
  background: rgba(255,255,255,.05);
  transition: transform .15s, background .2s, box-shadow .2s;
}
.verktyg img { width: 84%; }
.verktyg:active { transform: scale(.9); }
.verktyg.vald {
  background: rgba(232,184,75,.26);
  box-shadow: inset 0 0 0 .13rem var(--guld), 0 0 .9rem rgba(232,184,75,.45);
}
.verktyg.ny { animation: ny-sak 1.2s ease 3; }
@keyframes ny-sak { 0%,100% { box-shadow: inset 0 0 0 .13rem transparent; } 50% { box-shadow: inset 0 0 0 .13rem var(--guld), 0 0 1rem var(--guld); } }

/* ---------------------------------------------------------------- bubbla */

#bubbla {
  position: fixed;
  left: 50%;
  bottom: calc(5.6rem + var(--botten-h));
  transform: translateX(-50%);
  z-index: 11;
  width: min(30rem, 88vw);
  background: var(--panel-fast);
  border-radius: var(--rundning);
  padding: .7rem 1rem;
  box-shadow: var(--skugga);
  text-align: center;
  font-size: .95em;
  animation: bubbla-in .3s cubic-bezier(.2,1.5,.5,1) both;
}
#bubbla.tyst { animation: bubbla-ut .3s ease forwards; }
@keyframes bubbla-in { from { opacity: 0; transform: translate(-50%, .7rem) scale(.94); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes bubbla-ut { to { opacity: 0; transform: translate(-50%, .5rem) scale(.96); } }

/* ------------------------------------------------------------- fyndpopp */

#fynd-popp {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .3rem;
  background: rgba(8,14,6,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  text-align: center;
  padding: 2rem;
  animation: tona .25s ease both;
}
@keyframes tona { from { opacity: 0; } }
#fynd-bild {
  width: min(42vw, 30vh);
  filter: drop-shadow(0 0 2rem rgba(255,228,150,.55)) drop-shadow(0 .6rem 1rem rgba(0,0,0,.5));
  animation: fynd-in .7s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes fynd-in { from { transform: scale(.35) rotate(-14deg); opacity: 0; } }
#fynd-namn { font-size: 1.35em; color: var(--guld); margin-top: .6rem; }
#fynd-text { font-size: .92em; color: var(--dimma); max-width: 22rem; }

/* -------------------------------------------------------------- titelskärm */

#titelskarm {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  padding: 1.5rem;
  background:
    linear-gradient(rgba(10,18,8,.72), rgba(10,18,8,.88)),
    url("../img/bg.jpg") center/cover;
  text-align: center;
  overflow-y: auto;
}
#titelskarm.borta { animation: tona-bort .7s ease forwards; }
@keyframes tona-bort { to { opacity: 0; visibility: hidden; } }

.titel-inner { max-width: 26rem; display: grid; justify-items: center; gap: .45rem; }
.titel-backis { width: min(38vw, 11rem); filter: drop-shadow(0 .6rem 1.2rem rgba(0,0,0,.6)); animation: guppa 4s ease-in-out infinite; }
@keyframes guppa { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-.5rem); } }

#titelskarm h1 { font-size: clamp(2rem, 8vw, 3rem); color: var(--guld); font-weight: 500; letter-spacing: .01em; }
.underrubrik { color: var(--dimma); font-size: 1em; font-style: italic; }
.ingress { color: var(--dimma); font-size: .9em; margin: .8rem 0; }

.stor-knapp {
  background: linear-gradient(#8fb85e, #5d8438);
  color: #16220f;
  border-radius: 999px;
  padding: .75rem 2rem;
  font-size: 1.05em;
  box-shadow: 0 .35rem 0 #3e5b25, var(--skugga);
  transition: transform .12s, box-shadow .12s;
  margin-top: .3rem;
}
.stor-knapp:active { transform: translateY(.3rem); box-shadow: 0 .05rem 0 #3e5b25; }
.stor-knapp.andra { background: linear-gradient(#e0c27c, #bf9741); box-shadow: 0 .35rem 0 #866b2c, var(--skugga); }
.text-knapp { color: var(--dimma); font-size: .82em; text-decoration: underline; padding: .6rem; opacity: .8; }

/* ------------------------------------------------------------------ ruta */

#ruta {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: rgba(8,14,6,.7);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: 1rem;
  animation: tona .22s ease both;
}
.ruta-inner {
  position: relative;
  width: min(34rem, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--panel-fast);
  border-radius: 1.4rem;
  padding: 1.4rem 1.1rem 1.6rem;
  box-shadow: var(--skugga);
  animation: ruta-in .3s cubic-bezier(.2,1.4,.5,1) both;
  padding-bottom: calc(1.6rem + var(--botten-h));
}
@keyframes ruta-in { from { transform: scale(.9) translateY(1rem); opacity: 0; } }
#ruta-stang {
  position: sticky; top: -.4rem; float: right;
  width: 2.4rem; height: 2.4rem;
  font-size: 1.5rem; line-height: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: var(--dimma);
  z-index: 2;
}

.ruta-titel { font-size: 1.3em; color: var(--guld); text-align: center; margin-bottom: .2rem; }
.ruta-under { font-size: .85em; color: var(--dimma); text-align: center; margin-bottom: 1rem; }

/* samlingar */
.samling { margin-bottom: 1.3rem; }
.samling h3 {
  font-size: .92em; font-weight: 500; color: var(--ljus);
  display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem;
}
.samling h3 img { width: 1.5em; }
.samling h3 .antal { margin-left: auto; font-size: .85em; color: var(--dimma); font-variant-numeric: tabular-nums; }

.rutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: .45rem; }
.cell {
  aspect-ratio: 1;
  display: grid; place-items: center;
  background: rgba(255,255,255,.05);
  border-radius: .7rem;
  padding: .3rem;
  position: relative;
}
.cell img { width: 86%; height: 86%; object-fit: contain; }
.cell.tom img { filter: brightness(0) saturate(0) opacity(.22); }
.cell.tom::after { content: "?"; position: absolute; color: rgba(255,255,255,.25); font-size: 1.2em; }
.cell.tom img { opacity: .35; }
.cell:not(.tom) { background: rgba(232,184,75,.12); box-shadow: inset 0 0 0 .07rem rgba(232,184,75,.3); }

.cell-namn { font-size: .58em; color: var(--dimma); text-align: center; margin-top: .15rem; line-height: 1.15; }

/* trädskärm */
.trad-bild { width: min(60%, 14rem); margin: 0 auto .6rem; filter: drop-shadow(0 0 1.6rem rgba(160,220,120,.35)); }
.matare { height: .7rem; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin: .9rem 0 .4rem; }
.matare i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8fb85e, var(--guld)); transition: width .8s cubic-bezier(.2,.9,.3,1); }
.matare-text { font-size: .8em; color: var(--dimma); text-align: center; }

/* gåtan */
.gata-facit, .gata-val { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin: .8rem 0; }
.gata-facit img { width: 3.4rem; }
.gata-pil { align-self: center; color: var(--guld); font-size: 1.4rem; }
.gata-val button {
  width: 4.2rem; height: 4.2rem;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border-radius: .9rem;
  transition: transform .12s, box-shadow .2s;
}
.gata-val button img { width: 84%; }
.gata-val button:active { transform: scale(.9); }
.gata-val button.klickad { box-shadow: inset 0 0 0 .12rem var(--guld); background: rgba(232,184,75,.22); }
.gata-spar { display: flex; justify-content: center; gap: .5rem; min-height: 3rem; margin-top: .4rem; }
.gata-spar img { width: 2.6rem; animation: fynd-in .35s ease both; }
.gata-fel { animation: skaka .45s ease; }
@keyframes skaka { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-.6rem); } 45% { transform: translateX(.55rem); } 70% { transform: translateX(-.3rem); } }

/* slutskärm */
.slut-bild { width: min(70%, 18rem); margin: 0 auto 1rem; filter: drop-shadow(0 0 2rem rgba(255,228,150,.5)); }
.slut-text { text-align: center; font-size: .95em; color: var(--dimma); }
.slut-text strong { color: var(--guld); font-weight: 500; }

/* --------------------------------------------------------------- diverse */

.dold { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Landskapsläge på telefon: krymp hud lite */
@media (orientation: landscape) and (max-height: 500px) {
  #kapitel-mal { display: none; }
  .hud-knapp .etikett { display: none; }
}