@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700&display=swap");

:root {
  --bg-day: #eaf6ff;
  --bg-night: #1b2340;
  --text-color: #4a3b2a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Baloo 2", "Trebuchet MS", sans-serif;
  color: var(--text-color);
  background: var(--bg-day);
  transition: background 0.6s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.night {
  background: var(--bg-night);
  color: #e8e8f0;
}

.topbar {
  width: 100%;
  max-width: 1060px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px;
}

.topbar h1 {
  font-size: 1.6rem;
  margin: 0;
}

.topbar-right {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pill-button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid #6b4a2b;
  background: #fff8e7;
  color: var(--text-color);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
}

/* Knappene har alltid en lys, ugjennomsiktig bakgrunn + mørk tekst, så de er
   lette å lese uansett tid på døgnet - dette gjelder allerede uten videre
   endring. Om kvelden/natten gir vi dem i tillegg en varm kant/glød, slik at
   de skiller seg tydeligere fra den mørke bakgrunnen bak (steg 34). */
body.night .pill-button {
  border-color: #f0c975;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 8px rgba(240, 201, 117, 0.4);
}

button.pill-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
}

button.pill-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* ---------- Spillflate + sidepanel ---------- */
/* Gården (main) og beholdnings-sidepanelet sitter side om side, og deler
   samme totalbredde som toppmenyen over dem, slik at alt virker som ett
   sammenhengende oppsett i stedet for løse biter. */
#spill-layout {
  width: 100%;
  max-width: 1060px;
  padding: 0 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

main {
  position: relative; /* TID B1: spillklokka ligger oppå hjørnet av scenen */
  width: 100%;
  max-width: 860px;
  min-width: 0;
  flex: 1 1 auto;
}

#farm-scene {
  width: 100%;
  height: auto;
  display: block;
  border: 8px solid #c9a35c;
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

#natt-overlegg {
  transition: opacity 0.6s ease;
  pointer-events: none;
}

/* ---------- Sidepanel (beholdning) ---------- */
/* Smalt, lett gjennomsiktig panel - viser info, er ikke en meny man må åpne.
   Samme avrundede/varme stil som resten av spillet, bare tynnere kant enn de
   store panelene siden dette skal virke lettere og alltid være der. */
#sidepanel {
  width: 190px;
  flex-shrink: 0;
  background: rgba(255, 248, 231, 0.9);
  color: var(--text-color);
  border: 2px solid #c9a35c;
  border-radius: 16px;
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Sidepanelet setter alltid sin egen mørke tekstfarge (over) i stedet for å
   arve body sin - ellers ville teksten blitt lys-på-lys og nesten usynlig
   når body.night gjør body-teksten lys (steg 34-feilen). Om kvelden/natten
   gjør vi i tillegg selve panelet nesten helt ugjennomsiktig og litt varmere
   i kanten, så det skiller seg tydelig ut som "sitt eget område" mot den
   mørke gården bak. */
body.night #sidepanel {
  background: rgba(255, 248, 231, 0.97);
  border-color: #f0c975;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.sidepanel-penger {
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  padding: 8px;
  border-radius: 12px;
  background: #fff8e7;
  border: 2px solid #6b4a2b;
}

.sidepanel-kategori h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  text-align: left;
  border-bottom: 2px dashed #e5ddc8;
  padding-bottom: 4px;
}

.sidepanel-rad {
  margin: 0;
  padding: 2px 0;
  font-size: 0.88rem;
  text-align: left;
}

/* Sammenleggbar-knapp for sidepanelet - kun i bruk (vist) på smale skjermer,
   se media-spørringen lenger ned. */
#sidepanel-toggle {
  display: none;
  position: fixed;
  top: 78px;
  right: 14px;
  z-index: 160;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.3rem;
  background: #fdfaf3;
  border: 2px solid #6b4a2b;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

@media (max-width: 860px) {
  #spill-layout {
    flex-direction: column;
    align-items: stretch;
  }

  #sidepanel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    max-height: none;
    width: 220px;
    border-radius: 16px 0 0 16px;
    transform: translateX(105%);
    transition: transform 0.25s ease;
    z-index: 155;
  }

  #sidepanel.apen {
    transform: translateX(0);
  }

  #sidepanel-toggle {
    display: block;
  }
}

.clickable {
  cursor: pointer;
}

.clickable:hover {
  filter: brightness(1.08);
}

.hone:hover {
  filter: brightness(1.15);
}

/* Høner glir sakte til en ny posisjon når script.js setter en ny transform på dem,
   akkurat som kua. Dimmes litt om natten når de står stille hjemme igjen. */
.hone {
  transition: transform 2.5s ease-in-out;
}

body[data-dagfase="natt"] .hone {
  opacity: 0.8;
}

/* Egg pulserer forsiktig for å være lette å legge merke til */
.egg {
  transform-box: fill-box;
  transform-origin: center;
  animation: egg-puls 1.2s ease-in-out infinite;
}

@keyframes egg-puls {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Melk pulserer forsiktig, akkurat som egg */
.melk {
  transform-box: fill-box;
  transform-origin: center;
  animation: egg-puls 1.2s ease-in-out infinite;
}

/* Funn i skogen pulserer forsiktig, akkurat som egg og melk */
.skog-funn {
  transform-box: fill-box;
  transform-origin: center;
  animation: egg-puls 1.2s ease-in-out infinite;
}

/* Ekorn, fugler og sommerfugler beveger seg litt for seg selv - bare pynt, ikke klikkbare */
.skog-dyr {
  transform-box: fill-box;
  transform-origin: center;
  animation: skog-dyr-beveg 4s ease-in-out infinite;
}

.skog-dyr-b {
  animation-duration: 5s;
  animation-delay: 0.5s;
}

.skog-dyr-c {
  animation-duration: 3.2s;
  animation-delay: 1s;
}

@keyframes skog-dyr-beveg {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(8px, -6px);
  }
}

/* Kua glir sakte til en ny posisjon når script.js setter en ny transform på henne */
.ku {
  transition: transform 2.5s ease-in-out;
}

body[data-dagfase="natt"] .ku {
  opacity: 0.85;
}

/* Gårdshjelperen glir sakte rundt på gården, akkurat som kua og hønene */
.hjelper {
  transition: transform 2.5s ease-in-out;
}

body[data-dagfase="natt"] .hjelper {
  opacity: 0.85;
}

/* Gårdsgutten glir sakte rundt, akkurat som gårdsjenta */
.gutt {
  transition: transform 1.5s ease-in-out;
}

body[data-dagfase="natt"] .gutt {
  opacity: 0.85;
}

/* Sau og gris glir sakte til en ny posisjon, akkurat som kua */
.sau,
.gris {
  transition: transform 2.5s ease-in-out;
}

body[data-dagfase="natt"] .sau,
body[data-dagfase="natt"] .gris {
  opacity: 0.85;
}

/* Produkt fra sau/gris pulserer forsiktig, akkurat som egg og melk */
.dyr-produkt {
  transform-box: fill-box;
  transform-origin: center;
  animation: egg-puls 1.2s ease-in-out infinite;
}

/* Hesten glir sakte rundt, akkurat som de andre dyrene - men litt raskere mens
   spilleren rir (se .galopperer, satt av rideHest() i script.js) */
.hest {
  transition: transform 2.5s ease-in-out;
}

.hest.galopperer {
  transition: transform 0.5s ease-in-out;
}

body[data-dagfase="natt"] .hest {
  opacity: 0.85;
}

/* Lamaene (LAMA B1) glir rolig rundt, akkurat som hestene */
.lama {
  transition: transform 2.5s ease-in-out;
}

body[data-dagfase="natt"] .lama {
  opacity: 0.85;
}

/* Hodet nikker rundt halsroten når en lama spytter */
.lama-hode {
  transform-box: fill-box;
  transform-origin: 30% 100%;
}

/* Dyrestelleren glir sakte rundt, akkurat som gårdshjelperen og gårdsgutten */
.dyresteller {
  transition: transform 2.5s ease-in-out;
}

body[data-dagfase="natt"] .dyresteller {
  opacity: 0.85;
}

#info-box {
  width: 100%;
  max-width: 900px;
  margin: 16px 20px 30px;
  min-height: 28px;
  padding: 14px 20px;
  background: #fff8e7;
  color: #4a3b2a;
  border: 2px solid #c9a35c;
  border-radius: 14px;
  font-size: 1.05rem;
  text-align: center;
}

/* Hønepanel: mørk bakgrunn bak, boks med hønestatus i midten */
#hone-panel-bakgrunn {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 130;
  padding: 16px;
}

#hone-panel {
  position: relative;
  width: 280px;
  max-width: 100%;
  background: #fff8e7;
  color: #4a3b2a;
  border: 3px solid #c9a35c;
  border-radius: 20px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.lukk-knapp {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #6b4a2b;
  cursor: pointer;
}

/* Kupanel: samme oppbygning som hønepanelet */
#ku-panel-bakgrunn {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 130;
  padding: 16px;
}

#ku-panel {
  position: relative;
  width: 280px;
  max-width: 100%;
  background: #fff8e7;
  color: #4a3b2a;
  border: 3px solid #c9a35c;
  border-radius: 20px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

#ku-panel-ikon {
  font-size: 3rem;
  line-height: 1;
}

#ku-panel-navn {
  margin: 6px 0 18px;
}

/* Dyrpanel (sau og gris): samme oppbygning som hønepanelet og kupanelet */
#dyr-panel-bakgrunn {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 130;
  padding: 16px;
}

#dyr-panel {
  position: relative;
  width: 280px;
  max-width: 100%;
  background: #fff8e7;
  color: #4a3b2a;
  border: 3px solid #c9a35c;
  border-radius: 20px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

#dyr-panel-ikon {
  font-size: 3rem;
  line-height: 1;
}

#dyr-panel-navn {
  margin: 6px 0 18px;
}

#dyr-panel-produktstatus {
  font-weight: 700;
  margin: 4px 0 10px;
}

#dyr-panel-melding {
  min-height: 20px;
  font-weight: 700;
  margin: 10px 0;
}

#dyr-panel-melding.sprett {
  animation: sprett 0.4s ease;
}

/* Skogpanel: samme oppbygning som hønepanelet og kupanelet */
#skog-laas-panel-bakgrunn {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 130;
  padding: 16px;
}

#skog-laas-panel {
  position: relative;
  width: 280px;
  max-width: 100%;
  background: #fff8e7;
  color: #4a3b2a;
  border: 3px solid #c9a35c;
  border-radius: 20px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

#skog-panel-ikon {
  font-size: 3rem;
  line-height: 1;
}

#skog-laas-panel h2 {
  margin: 6px 0 10px;
}

#skog-panel-beskrivelse {
  margin: 0 0 16px;
}

#skog-funn-oversikt {
  margin-top: 14px;
  font-size: 0.95rem;
  text-align: left;
}

.skog-oversikt-tittel {
  font-weight: 700;
  margin: 0 0 6px;
}

.skog-oversikt-rad {
  margin: 2px 0;
}

#skog-laas-melding {
  min-height: 20px;
  font-weight: 700;
  margin: 10px 0 0;
}

#hone-panel-ikon {
  font-size: 3rem;
  line-height: 1;
}

#hone-panel-navn {
  margin: 6px 0 18px;
}

/* Navn + rediger-blyant (steg 44) - delt av alle tre dyrepanelene. */
.dyr-navn-omrade {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dyr-navn-rediger-knapp {
  background: none;
  border: none;
  font-size: 1rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.dyr-navn-rediger-knapp:hover {
  background: #f5ecd6;
}

.dyr-navn-rediger {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 0 0 10px;
}

.dyr-navn-input {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 6px 10px;
  border-radius: 10px;
  border: 2px solid #c9a35c;
  background: #fff8e7;
  color: #4a3b2a;
  width: 130px;
  text-align: center;
}

.dyr-hjerter {
  font-size: 1.05rem;
  margin: 2px 0 12px;
  letter-spacing: 1px;
}

.stat-linje {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  text-align: left;
}

.stat-navn {
  width: 78px;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.stat-bar {
  flex: 1;
  height: 12px;
  background: #e5ddc8;
  border-radius: 6px;
  overflow: hidden;
}

.stat-fyll {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}

.glede-fyll {
  background: #e2574c;
}

.sult-fyll {
  background: #7fb945;
}

.stat-tall {
  width: 56px;
  font-size: 0.85rem;
  text-align: right;
  flex-shrink: 0;
}

#hone-panel-melding,
#ku-panel-melding {
  min-height: 20px;
  font-weight: 700;
  margin: 10px 0;
}

#ku-panel-melkestatus,
#hone-panel-alder {
  font-weight: 700;
  margin: 4px 0 10px;
}

#hone-panel-melding.sprett,
#ku-panel-melding.sprett {
  animation: sprett 0.4s ease;
}

@keyframes sprett {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  60% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.hone-panel-knapper {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.selg-knapp {
  background: #f7d6d2;
}

/* Bekreftelsesboksen for salg av dyr: samme oppbygning som de andre panelene,
   men litt mindre og med høyere z-index så den vises over et åpent dyrepanel. */
#selg-dyr-bekreftelse-bakgrunn {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 140; /* over dyrepanelene (130), som den åpnes fra */
  padding: 16px;
}

#selg-dyr-bekreftelse {
  position: relative;
  width: 260px;
  max-width: 100%;
  background: #fff8e7;
  color: #4a3b2a;
  border: 3px solid #c9a35c;
  border-radius: 20px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

#selg-dyr-bekreftelse-tekst {
  font-weight: 700;
  margin: 0 0 18px;
}

/* Plantemeny: mørk bakgrunn bak, boks med plantevalg i midten */
/* Plantevalget er bevisst IKKE en stor skjermdekkende meny lenger (steg 33) -
   ingen mørk bakgrunn, bare en liten boks nederst på skjermen, nær der
   spilleren står (kameraet holder henne jo omtrent midt på skjermen). Klikk
   utenfor boksen lukker den fortsatt, siden bakgrunnen fremdeles fanger opp
   klikk - den er bare usynlig nå. */
#aker-meny-bakgrunn {
  position: fixed;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 120;
  padding: 16px;
  padding-bottom: 96px;
}

#aker-meny {
  position: relative;
  width: 230px;
  max-width: 100%;
  background: #fff8e7;
  color: #4a3b2a;
  border: 3px solid #c9a35c;
  border-radius: 18px;
  padding: 16px 16px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

#aker-meny h2 {
  margin: 2px 0 12px;
  font-size: 1.05rem;
}

.plante-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plante-knapp {
  width: 100%;
}

#aker-meny-melding {
  min-height: 20px;
  font-weight: 700;
  margin: 10px 0 0;
}

.butikk-kategori {
  margin-bottom: 16px;
}

.butikk-kategori h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  text-align: left;
}

.butikk-beskrivelse {
  font-size: 0.8rem;
  font-style: italic;
  margin: -2px 0 10px;
  text-align: center;
}

/* Generisk flex-rad brukt av flere kjøpsknapp-grupper (åker13-utvidelse i
   Oppgrader-menyen) - IKKE bare frøkjøp
   lenger, til tross for navnet (historisk fra da frø var eneste brukeren). */
.fro-kjop-rad {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.fro-mengde-knapp {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fro-mengde-knapp:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
}

/* Oppdragspanel: mørk bakgrunn bak, boks med oppdragsliste i midten */
#oppdrag-panel-bakgrunn {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 130;
  padding: 16px;
}

#oppdrag-panel {
  position: relative;
  width: 320px;
  max-width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background: #fff8e7;
  color: #4a3b2a;
  border: 3px solid #c9a35c;
  border-radius: 20px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

#oppdrag-panel h2 {
  margin: 4px 0 18px;
  font-size: 1.15rem;
}

#oppdrag-panel hr {
  border: none;
  border-top: 2px dashed #c9a35c;
  margin: 18px 0;
}

.oppdrag-rad {
  text-align: left;
  border: 2px solid #e5ddc8;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.oppdrag-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  margin-bottom: 8px;
}

.oppdrag-fyll {
  background: #e0a52c;
}

.oppdrag-knapp-omrade {
  margin-top: 8px;
  text-align: center;
  font-size: 0.9rem;
}

.oppdrag-hent-knapp {
  width: 100%;
}

#oppdrag-melding {
  min-height: 20px;
  font-weight: 700;
  margin: 10px 0 0;
}

/* BUTIKK B5: det gamle 🔨 Oppgrader-panelet er borte - radene under (nivå-
   oversikten, .oppgrader-rad osv.) står nå i Gård & bygg i gårdsbutikken. */
#oppgrader-niva-oversikt {
  text-align: left;
  background: #f5ecd6;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  flex: none;
}

#oppgrader-niva-oversikt p {
  margin: 4px 0;
}

.oppgrader-rad {
  text-align: left;
  border: 2px solid #e5ddc8;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.oppgrader-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  margin-bottom: 8px;
}

.oppgrader-rad-laast {
  opacity: 0.7;
  margin-bottom: 0;
}

.oppgrader-knapp {
  width: 100%;
}

.oppgrader-knapp:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
}

#oppgrader-melding {
  min-height: 20px;
  font-weight: 700;
  margin: 10px 0 0;
}

/* Huspanel og pyntemeny: samme oppbygning som de andre panelene */
#hus-panel-bakgrunn,
#pynt-panel-bakgrunn,
#flytt-pynt-bakgrunn,
#finn-partner-panel-bakgrunn,
#mine-dyr-panel-bakgrunn,
#gard-panel-bakgrunn,
#ansatt-panel-bakgrunn,
#sekk-panel-bakgrunn,
#garderobe-panel-bakgrunn {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 130;
  padding: 16px;
}

#hus-panel,
#pynt-panel,
#flytt-pynt-boks,
#finn-partner-panel,
#ansatt-panel {
  position: relative;
  width: 300px;
  max-width: 100%;
  background: #fff8e7;
  color: #4a3b2a;
  border: 3px solid #c9a35c;
  border-radius: 20px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  max-height: 85vh;
  overflow-y: auto;
}

#mine-dyr-panel,
#gard-panel,
#sekk-panel,
#garderobe-panel {
  position: relative;
  width: 360px;
  max-width: 100%;
  background: #fff8e7;
  color: #4a3b2a;
  border: 3px solid #c9a35c;
  border-radius: 20px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  max-height: 85vh;
  overflow-y: auto;
}

#finn-partner-melding {
  min-height: 20px;
  font-weight: 700;
  margin: 10px 0 0;
}

#finn-partner-par-tekst {
  font-weight: 700;
  margin: 6px 0;
}

/* Dyreprofilens "ekstra"-linjer (personlighet, farge, kjøpt/født, paringsstatus) -
   delt av alle tre dyrepanelene, bygget av tegnDyreProfilEkstra() i script.js. */
.dyr-profil-ekstra {
  text-align: left;
  font-size: 0.9rem;
}

.dyr-profil-rad {
  margin: 3px 0;
}

.dyr-profil-advarsel {
  color: #b5451b;
  font-weight: 700;
}

/* Gårdsoversikten: mange korte linjer, ser bedre ut venstrejustert enn
   sentrert (som resten av panelet ellers er). */
#gard-oversikt p,
#gard-ansatte p,
#gard-dyreoversikt p,
#gard-dyrevelferd p {
  text-align: left;
  margin: 4px 0;
}

/* "Mine dyr"-listen: en overskrift per art, og én klikkbar rad per dyr */
#mine-dyr-liste {
  text-align: left;
}

#mine-dyr-liste h3 {
  margin: 14px 0 6px;
  font-size: 1rem;
}

#mine-dyr-liste h3:first-child {
  margin-top: 0;
}

.mine-dyr-rad {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mine-dyr-rad:hover {
  background: #f5ecd6;
}

#hus-panel-ikon {
  font-size: 3rem;
  line-height: 1;
}

#hus-panel-niva {
  font-weight: 700;
  margin: 6px 0;
}

#hus-panel-info {
  font-size: 0.9rem;
  margin: 0 0 6px;
}

#hus-panel-folelse {
  font-weight: 700;
  min-height: 20px;
  margin: 0 0 14px;
}

/* Ansattprofil (steg 35) - samme enkle oppskrift som huspanelet over. */
#ansatt-panel-ikon {
  font-size: 3rem;
  line-height: 1;
}

#ansatt-panel-jobb {
  font-size: 0.9rem;
  margin: 0 0 6px;
}

#ansatt-panel-status {
  font-weight: 700;
  margin: 0 0 14px;
}

#pynt-panel-antall {
  margin-bottom: 12px;
}

#pynt-oversikt {
  margin: 0;
}

#pynt-melding {
  min-height: 20px;
  font-weight: 700;
  margin: 10px 0 0;
}

#flytt-pynt-tekst {
  font-weight: 700;
  margin: 0 0 18px;
}

/* Ledige pynteplasser blinker forsiktig mens du er i plasseringsmodus, akkurat
   som egg/melk/skogfunn - så de er lette å legge merke til på gården. */
.pynt-plass-markor {
  transform-box: fill-box;
  transform-origin: center;
  animation: egg-puls 1.2s ease-in-out infinite;
}

/* ---------- Gårdsvelger ---------- */
/* Ligger over absolutt alt annet (z-index 500) - resten av spillet tegner seg
   selv ferdig bak den, men er usynlig/uklikkbart til en gård er valgt. */
#gard-velger-skjerm {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: linear-gradient(180deg, #8fc74d 0%, #6fa88a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#gard-velger-boks {
  width: 420px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff8e7;
  color: #4a3b2a;
  border: 3px solid #c9a35c;
  border-radius: 20px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

#gard-velger-boks h1 {
  margin: 0 0 6px;
  font-size: 1.4rem;
}

#gard-velger-boks > p {
  margin: 0 0 20px;
  font-weight: 700;
}

.gard-velger-liste {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gard-velger-kort {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

/* Store, mobilvennlige trykkflater - minst 80px høye. */
.gard-velger-apne {
  flex: 1;
  font-family: inherit;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: #fdfaf3;
  border: 2px solid #6b4a2b;
  border-radius: 16px;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}

.gard-velger-apne:hover {
  transform: translateY(-1px);
}

.gard-velger-apne:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.gard-velger-ikon {
  font-size: 1.8rem;
  line-height: 1;
}

.gard-velger-navn {
  font-weight: 700;
  font-size: 1.05rem;
}

.gard-velger-innhold {
  font-size: 0.8rem;
  line-height: 1.3;
}

.gard-velger-innhold p {
  margin: 0;
}

.gard-velger-slett {
  font-family: inherit;
  font-size: 1.1rem;
  width: 44px;
  background: #f7d6d2;
  border: 2px solid #6b4a2b;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}

.gard-velger-slett:hover {
  transform: translateY(-1px);
}

/* ---------- Delt advarselsboks (slett gård / start på nytt) ---------- */
#advarsel-bekreftelse-bakgrunn {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  padding: 16px;
}

#advarsel-bekreftelse {
  position: relative;
  width: 300px;
  max-width: 100%;
  background: #fff8e7;
  color: #4a3b2a;
  border: 3px solid #c9a35c;
  border-radius: 20px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

#advarsel-bekreftelse-tittel {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 10px;
}

#advarsel-bekreftelse-tekst {
  margin: 0 0 18px;
}

/* ---------- Innstillinger ---------- */
#innstillinger-panel-bakgrunn {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 130;
  padding: 16px;
}

#innstillinger-panel {
  position: relative;
  width: 300px;
  max-width: 100%;
  background: #fff8e7;
  color: #4a3b2a;
  border: 3px solid #c9a35c;
  border-radius: 20px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

#innstillinger-panel .hone-panel-knapper {
  flex-direction: column;
}

/* ---------- "Lagret"-boble (steg 45) ---------- */
/* #lagret-toast-rad er en alltid-reservert, usynlig rad mellom spillområdet
   og info-boksen - IKKE en overlay festet til vindusbunnen (det var det som
   gjorde at boblen kunne havne oppå info-boksen før, avhengig av
   vindushøyde/scroll). Selve boblen (#lagret-toast) toner bare inn/ut inni
   denne faste, reserverte plassen, så den kan aldri overlappe noe - verken
   info-boksen, spillområdet eller andre knapper. */
#lagret-toast-rad {
  width: 100%;
  max-width: 900px;
  margin: 10px 20px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#lagret-toast {
  background: #4a3b2a;
  color: #fff8e7;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#lagret-toast.synlig {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Virtuell joystick (touch) ---------- */
/* Bare synlig på touch-enheter (grov pekefinger, ikke mus) - på PC styres
   spilleren med tastaturet, og joysticken ville bare vært i veien. */
#joystick-omrade {
  display: none;
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 100;
  touch-action: none;
}

@media (pointer: coarse) {
  #joystick-omrade {
    display: block;
  }
}

/* Tast-badgen (Z/X/C) på frøknappene i plantevalget - gir ingen mening på en
   touch-enhet uten tastatur, så den skjules der. Knappene i seg selv (med
   emoji/navn/antall) fungerer helt likt på begge - bare denne lille bokstaven
   som er PC-spesifikk. */
.plante-knapp-tast {
  display: inline-block;
  background: #4a3b2a;
  color: #fff8e7;
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 4px;
  font-size: 0.85em;
}

@media (pointer: coarse) {
  .plante-knapp-tast {
    display: none;
  }
}

#joystick-base {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255, 248, 231, 0.55);
  border: 3px solid rgba(107, 74, 43, 0.6);
  position: relative;
}

#joystick-knott {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(107, 74, 43, 0.75);
  border: 2px solid #fff8e7;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ---------- Zoom-knapper (faste, på alle enheter) ---------- */
#zoom-knapper {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#zoom-knapper button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  background: #fdfaf3;
  color: #4a3b2a;
  border: 2px solid #6b4a2b;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

#zoom-knapper button:hover {
  transform: translateY(-1px);
}

#zoom-knapper button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* ---------- Åker-handlingsknapp (Plant/Høst) ---------- */
#aker-handling-knapp {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 100;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  background: #7fb945;
  color: #fff8e7;
  border: 2px solid #4a3b2a;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

#aker-handling-knapp:active {
  transform: translateX(-50%) translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

/* ---------- Holdt item-indikator (steg 37, generalisert i steg 39) ---------- */
/* Plassert rett over joysticken (som bare vises på touch, se
   #joystick-omrade) - på PC står den like fint helt alene der. Dobler som
   alltid-synlig "hva holder jeg"-indikator OG snarvei inn til sekken, se
   oppdaterHoldtItemVisning() i script.js. */
#holdt-item-knapp {
  position: fixed;
  left: 20px;
  bottom: 140px;
  z-index: 100;
  min-width: 52px;
  height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  background: #fdfaf3;
  color: #4a3b2a;
  border: 2px solid #6b4a2b;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

#holdt-item-knapp:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

#holdt-item-knapp.vannkanne-aktiv {
  font-size: 0.95rem;
  background: #cfe6f2;
  border-color: #4a7a94;
}

/* Rotér-knapp for bygninger (steg 40.2) - rett over zoom-knappene (som er
   48px + 48px + 8px mellomrom = 104px høye, fra bunnen), samme runde stil. */
#roter-bygg-knapp,
#kiste-avbryt-knapp {
  position: fixed;
  right: 20px;
  bottom: 132px;
  z-index: 100;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-family: inherit;
  font-size: 1.4rem;
  background: #fdfaf3;
  color: #4a3b2a;
  border: 2px solid #6b4a2b;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

#roter-bygg-knapp:active,
#kiste-avbryt-knapp:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* ---------- Sekken (steg 39) ---------- */
#sekk-holder-tekst {
  font-weight: 700;
  text-align: center;
  margin: 0 0 16px;
  padding: 8px;
  border-radius: 10px;
  background: #f5ecd6;
}

.sekk-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  margin-bottom: 6px;
  border: 2px solid transparent;
  text-align: left;
}

.sekk-rad-navn {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sekk-rad-antall {
  font-weight: 700;
  flex-shrink: 0;
}

.sekk-rad-klikkbar {
  cursor: pointer;
  background: #fdfaf3;
  border-color: #e5ddc8;
}

.sekk-rad-klikkbar:hover {
  background: #f5ecd6;
}

.sekk-rad-valgt {
  border-color: #4a7a94;
  background: #cfe6f2;
  font-weight: 700;
}

/* Liten dråpe-animasjon over et felt som akkurat ble vannet - samme
   fill-box-triks som egg/melk-pulsen, bare med en fade+stig-bevegelse i
   stedet for en puls. */
.vann-drypp-anim {
  transform-box: fill-box;
  transform-origin: center;
  animation: vann-drypp 0.7s ease;
}

@keyframes vann-drypp {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  30% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Lite hjerte som stiger og forsvinner over et dyr når spilleren koser med
   det (steg 44) - samme fade+stig-triks som vanndryppet over. */
.kos-hjerter-anim {
  transform-box: fill-box;
  transform-origin: center;
  animation: kos-hjerter 0.9s ease;
}

@keyframes kos-hjerter {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.7);
  }
  30% {
    opacity: 1;
    transform: translateY(-6px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translateY(-24px) scale(1);
  }
}

/* ---------- Karaktervalg ---------- */
#karakter-valg-skjerm {
  position: fixed;
  inset: 0;
  z-index: 550;
  background: linear-gradient(180deg, #8fc74d 0%, #6fa88a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#karakter-valg-boks {
  width: 380px;
  max-width: 100%;
  background: #fff8e7;
  color: #4a3b2a;
  border: 3px solid #c9a35c;
  border-radius: 20px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

#karakter-valg-boks h1 {
  margin: 0 0 6px;
  font-size: 1.3rem;
}

#karakter-valg-boks > p {
  margin: 0 0 20px;
  font-weight: 700;
}

.karakter-valg-liste {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.karakter-valg-kort {
  flex: 1;
  max-width: 150px;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #fdfaf3;
  border: 2px solid #6b4a2b;
  border-radius: 16px;
  padding: 14px 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}

.karakter-valg-kort:hover {
  transform: translateY(-1px);
}

.karakter-valg-kort:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.karakter-forhandsvisning {
  width: 70px;
  height: 110px;
}

/* ---------- Garderobe (steg G3) ---------- */
/* Fem små kort med forhåndsvisning - samme utseende som karaktervalget. */
.garderobe-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}

.garderobe-kort {
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #fdfaf3;
  border: 2px solid #6b4a2b;
  border-radius: 14px;
  padding: 8px 4px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.8rem;
  color: #4a3b2a;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}

.garderobe-kort:hover {
  transform: translateY(-1px);
}

.garderobe-kort:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* Antrekket du har på deg nå */
.garderobe-kort.valgt {
  background: #fdf0c8;
  border-color: #e0a52c;
  border-width: 3px;
}

.garderobe-forhandsvisning {
  width: 52px;
  height: 82px;
}

/* ---------- Områdesystemet (steg 52, se omrader.js) ---------- */
/* Når spilleren er i et annet område enn gården, skjules alt gårdsinnhold i
   SVG-en - også det script.js legger til underveis (åkerruter, dyr, gårdsgutter
   osv.) - uten at noe av det endres. Bare områdets egen gruppe, spilleren og
   natt-overlegget vises. Tilbake på gården fjernes data-omrade igjen. */
#farm-scene[data-omrade]:not([data-omrade="gard"]) > :not(.omrade-lag):not(#spiller-gruppe):not(#spiller-behov):not(#natt-overlegg):not(#interaksjon-indikator) {
  display: none !important;
}

/* Kort fade til mørkt mens området byttes. */
#omrade-overgang {
  position: fixed;
  inset: 0;
  background: #1b2a14;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  z-index: 125;
}

#omrade-overgang.synlig {
  opacity: 1;
}

/* ---------- Huset: lys i vinduene om kvelden og natten (steg D1) ---------- */
/* body[data-dagfase] settes allerede av oppdaterDagfase() i script.js. */
.hus-vindu-glass {
  transition: fill 1.5s ease;
}

/* Lyslaget ligger over natt-overlegget (se tegnHusLys() i script.js), så
   lyset ikke blir dempet av nattmørket. */
.hus-lys-glod,
.hus-lys-kjerne {
  transition: opacity 1.5s ease;
}

body[data-dagfase="kveld"] .hus-vindu-glass,
body[data-dagfase="natt"] .hus-vindu-glass {
  fill: #ffd77a;
}

body[data-dagfase="kveld"] .hus-lys-glod,
body[data-dagfase="natt"] .hus-lys-glod {
  opacity: 0.3;
}

body[data-dagfase="kveld"] .hus-lys-kjerne,
body[data-dagfase="natt"] .hus-lys-kjerne {
  opacity: 0.55;
}

/* ---------- BUTIKK B1: gårdsbutikken (se butikk.js) ---------- */
/* Vinduene: blå himmel om dagen, varmt lys utenfra om kvelden/natten (på
   gården) - inne i butikken er det mørkt ute. */
.butikk-vindu-glass {
  transition: fill 1.5s ease;
}

body[data-dagfase="kveld"] #gardsbutikk .butikk-vindu-glass,
body[data-dagfase="natt"] #gardsbutikk .butikk-vindu-glass {
  fill: #ffd77a;
}

body[data-dagfase="kveld"] #omrade-butikk .butikk-vindu-glass {
  fill: #e9a86a;
}

body[data-dagfase="natt"] #omrade-butikk .butikk-vindu-glass {
  fill: #1f2f5c;
}

/* Inne i butikken er lampene tent - natt-overlegget mørkner ikke rommet. */
#farm-scene[data-omrade="butikk"] #natt-overlegg {
  opacity: 0;
}

/* ---------- HUS B1: hovedhusets interiør (se hus-inne.js) ---------- */
/* Som i butikken: inne er det alltid lyst nok - natt-overlegget mørkner ikke
   huset. Om dagen faller dagslys inn gjennom vinduene; om kvelden/natten er
   vinduene mørke og lampene tent. Bare utseende - ingen ny lyslogikk. */
#farm-scene[data-omrade="hus"] #natt-overlegg {
  opacity: 0;
}

.husinne-vindu-glass,
.husinne-dagslys,
.husinne-lampelys {
  transition: opacity 1.5s ease, fill 1.5s ease;
}

.husinne-lampelys {
  opacity: 0;
}

body[data-dagfase="kveld"] .husinne-lampelys,
body[data-dagfase="morgen"] .husinne-lampelys {
  opacity: 0.6;
}

body[data-dagfase="natt"] .husinne-lampelys {
  opacity: 1;
}

body[data-dagfase="kveld"] .husinne-dagslys {
  opacity: 0.3;
}

body[data-dagfase="natt"] .husinne-dagslys {
  opacity: 0;
}

body[data-dagfase="kveld"] .husinne-vindu-glass {
  fill: #e9a86a;
}

body[data-dagfase="natt"] .husinne-vindu-glass {
  fill: #1f2f5c;
}

body[data-dagfase="natt"] .husinne-vindu-utsikt {
  opacity: 0.25;
}

.husinne-utenfor-morke {
  opacity: 0;
  transition: opacity 1.5s ease;
}

body[data-dagfase="kveld"] .husinne-utenfor-morke,
body[data-dagfase="morgen"] .husinne-utenfor-morke {
  opacity: 0.3;
}

body[data-dagfase="natt"] .husinne-utenfor-morke {
  opacity: 0.55;
}

/* Den ansatte bak disken puster rolig. */
.butikk-ansatt-pust {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: butikk-ansatt-pust 3.2s ease-in-out infinite;
}

@keyframes butikk-ansatt-pust {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.025);
  }
}

/* ---------- BUTIKK B2: frø & dyrking og dyrekatalogen (se butikk.js) ---------- */
/* Samme mørke bakgrunn og boks som de andre panelene i spillet. */
.butikk-stasjon-bakgrunn {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 130;
  padding: 16px;
}

.butikk-stasjon-panel {
  position: relative;
  width: 380px;
  max-width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background: #fff8e7;
  color: #4a3b2a;
  border: 3px solid #c9a35c;
  border-radius: 20px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

#butikk-dyr-panel {
  width: 460px;
}

.butikk-stasjon-panel h2 {
  margin: 4px 0 6px;
  font-size: 1.15rem;
}

.butikk-stasjon-penger {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 14px;
  font-weight: 800;
  background: #f5ecd6;
  border: 2px solid #e2cd9a;
  border-radius: 999px;
}

.butikk-stasjon-melding {
  min-height: 20px;
  font-weight: 700;
  margin: 8px 0 0;
}

/* Én frøvare per rad: ikon | navn/pris | antall + kjøp */
.butikk-vare {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f5ecd6;
  border: 2px solid #e2cd9a;
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 10px;
  text-align: left;
}

.butikk-vare-ikon {
  font-size: 1.9rem;
  flex-shrink: 0;
}

.butikk-vare-info {
  flex: 1;
  min-width: 0;
}

.butikk-vare-navn,
.butikk-dyrekort-navn {
  font-weight: 800;
}

.butikk-vare-pris {
  font-weight: 700;
  color: #6b4a2b;
}

.butikk-vare-tekst {
  font-size: 0.75rem;
  font-style: italic;
}

.butikk-vare-kjop {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex-shrink: 0;
}

.butikk-antall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.butikk-antall .fro-mengde-knapp {
  width: 30px;
  height: 30px;
  font-size: 1rem;
}

.butikk-antall-tall {
  font-weight: 800;
  min-width: 1.8em;
  text-align: center;
}

.butikk-kjop-knapp {
  font-size: 0.85rem;
  padding: 6px 10px;
}

/* Har ikke råd: ser "slukket" ut, men kan fortsatt trykkes - kjøpsfunksjonen
   svarer da med sin vanlige melding. */
.butikk-kjop-knapp.butikk-ikke-rad {
  opacity: 0.65;
}

.butikk-kjop-knapp:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
}

/* Dyrekatalogen: små kort, som sider i en bestillingskatalog */
#butikk-dyr-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 8px 0 4px;
}

.butikk-dyrekort {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #fffdf5;
  border: 2px solid #e2cd9a;
  border-radius: 12px;
  padding: 10px 6px 8px;
  box-shadow: 0 3px 0 rgba(107, 74, 43, 0.15);
}

.butikk-dyrekort-ikon {
  font-size: 2rem;
  line-height: 1.1;
}

.butikk-dyrekort-plasser {
  font-size: 0.78rem;
  margin: 2px 0 4px;
}

.butikk-dyrekort .butikk-kjop-knapp {
  width: 100%;
  margin-top: auto;
}

.butikk-dyrekort-full {
  background: #f1e6cf;
}

.butikk-full-merke {
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff8e7;
  background: #c0583a;
  border-radius: 6px;
  padding: 2px 6px;
  margin-bottom: 2px;
}

@media (max-width: 480px) {
  #butikk-dyr-liste {
    grid-template-columns: repeat(2, 1fr);
  }

  /* På mobil ligger sidepanel-knappen (z-index 160) fast øverst til høyre -
     butikkpanelene legger seg over den, så lukkeknappen ✕ alltid kan trykkes. */
  .butikk-stasjon-bakgrunn {
    z-index: 170;
  }
}

/* ---------- BUTIKK B3: salg ved disken (se butikk.js) ---------- */
.butikk-salg-tom {
  margin: 18px 0 10px;
  font-weight: 700;
}

.butikk-selg-alle-knapp {
  font-size: 0.78rem;
  padding: 4px 10px;
  background: #f5ecd6;
}

/* ---------- TID B1: spillklokka (se oppdaterDagfase() i script.js) ---------- */
/* Liten, diskret boks i øvre venstre hjørne av scenen - innenfor rammen, ikke
   over noen knapper (sidepanel-knappen på mobil sitter øverst til høyre). */
#spillklokke {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 5px 12px 6px;
  background: rgba(255, 248, 231, 0.92);
  color: #4a3b2a;
  border: 2px solid #c9a35c;
  border-radius: 14px;
  box-shadow: 0 3px 0 rgba(107, 74, 43, 0.15);
  pointer-events: none;
  line-height: 1.15;
}

#spillklokke-dag {
  font-size: 0.8rem;
  font-weight: 700;
}

#spillklokke-tid {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

#spillklokke[data-fase="natt"] {
  background: rgba(36, 48, 84, 0.9);
  color: #f3ead2;
  border-color: #6b7bb0;
}

@media (max-width: 600px) {
  #spillklokke {
    top: 12px;
    left: 12px;
    padding: 3px 9px 4px;
    border-radius: 11px;
  }

  #spillklokke-dag {
    font-size: 0.7rem;
  }

  #spillklokke-tid {
    font-size: 0.95rem;
  }
}

/* ---------- BUTIKK B4: frøslider og jobbtavla (se butikk.js) ---------- */
.butikk-vare-fro {
  flex-wrap: wrap;
}

/* Dra for å velge antall - native range, stor tommel som er lett å treffe med
   fingeren. touch-action: none gjør at et drag på slideren ikke ruller panelet
   (resten av panelet ruller som vanlig). */
.butikk-fro-slider {
  -webkit-appearance: none;
  appearance: none;
  flex-basis: 100%;
  width: 100%;
  height: 30px;
  margin: 2px 0 0;
  background: transparent;
  touch-action: none;
  cursor: pointer;
}

.butikk-fro-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: #e2cd9a;
  border: 1px solid #c9a35c;
}

.butikk-fro-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: #fff8e7;
  border: 3px solid #6b4a2b;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

.butikk-fro-slider::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: #e2cd9a;
  border: 1px solid #c9a35c;
}

.butikk-fro-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff8e7;
  border: 3px solid #6b4a2b;
}

.butikk-fro-slider:disabled {
  opacity: 0.45;
  cursor: default;
}

#butikk-jobb-panel {
  width: 440px;
}

.butikk-jobbkort {
  background: #f5ecd6;
  border: 2px solid #e2cd9a;
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 10px;
  text-align: left;
}

.butikk-jobbkort-aktiv {
  background: #eef6df;
  border-color: #9cc95c;
}

.butikk-jobbkort-laast {
  opacity: 0.7;
}

.butikk-jobbkort-topp {
  display: flex;
  align-items: center;
  gap: 10px;
}

.butikk-jobb-status {
  font-size: 0.78rem;
  font-weight: 700;
  text-align: right;
  flex-shrink: 0;
}

.jobb-tid {
  font-weight: 800;
  color: #6b4a2b;
}

.butikk-jobbkort-tekst {
  font-size: 0.78rem;
  font-style: italic;
  margin: 6px 0 8px;
}

.butikk-kontrakt-rad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.butikk-kontrakt-knapp {
  line-height: 1.2;
  padding: 6px 4px;
}

.butikk-kontrakt-knapp small {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.8;
}

/* ---------- HOTBAR B1: 9 hurtigplasser nederst på scenen (se script.js) ---------- */
/* Ligger oppå den nederste kanten av spillscenen (som klokka øverst), ikke fast
   nederst på skjermen - der sitter handlingsknappen, joysticken og zoom. */
#hotbar {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 5px;
  padding: 5px;
  background: rgba(255, 248, 231, 0.88);
  border: 2px solid #c9a35c;
  border-radius: 14px;
  box-shadow: 0 3px 0 rgba(107, 74, 43, 0.15);
  pointer-events: none;
}

.hotbar-slot {
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid #c9a35c;
  border-radius: 10px;
  background: #fff8e7;
  color: #4a3b2a;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  font-family: inherit;
}

.hotbar-slot.hotbar-tom {
  background: rgba(245, 236, 214, 0.75);
  border-style: dashed;
}

.hotbar-slot.hotbar-valgt {
  border: 3px solid #6b4a2b;
  background: #ffe9a8;
  box-shadow: 0 0 0 2px #fff8e7, 0 2px 0 rgba(107, 74, 43, 0.35);
}

.hotbar-ikon {
  font-size: 1.45rem;
  line-height: 46px;
}

.hotbar-slot.hotbar-oppbrukt .hotbar-ikon {
  filter: grayscale(1);
  opacity: 0.4;
}

.hotbar-nr {
  position: absolute;
  top: 1px;
  left: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  opacity: 0.7;
}

.hotbar-antall {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-size: 0.68rem;
  font-weight: 800;
}

.hotbar-slot.hotbar-oppbrukt .hotbar-antall {
  color: #c0583a;
}

@media (max-width: 600px) {
  #hotbar {
    bottom: 12px;
    gap: 3px;
    padding: 3px;
    border-radius: 11px;
  }

  .hotbar-slot {
    width: calc((100vw - 96px) / 9);
    max-width: 38px;
    height: 38px;
    border-radius: 8px;
  }

  .hotbar-ikon {
    font-size: 1.1rem;
    line-height: 38px;
  }

  .hotbar-nr {
    font-size: 0.55rem;
    left: 2px;
  }

  .hotbar-antall {
    font-size: 0.58rem;
    right: 2px;
  }
}

/* Hotbar-oppsettet i sekken */
.sekk-hotbar-rad {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.sekk-hotbar-slot {
  position: relative;
  height: 40px;
  padding: 0;
  border: 2px solid #c9a35c;
  border-radius: 8px;
  background: #fff8e7;
  cursor: pointer;
  font-family: inherit;
}

.sekk-hotbar-slot .hotbar-ikon {
  font-size: 1.1rem;
  line-height: 36px;
}

.sekk-hotbar-slot.hotbar-oppbrukt .hotbar-ikon {
  filter: grayscale(1);
  opacity: 0.4;
}

.sekk-hotbar-slot-valgt {
  border: 3px solid #6b4a2b;
  background: #ffe9a8;
}

.sekk-hotbar-velger {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 8px;
  background: #f5ecd6;
  border: 2px solid #e2cd9a;
  border-radius: 12px;
  margin-bottom: 6px;
}

.sekk-hotbar-velger-tittel {
  flex-basis: 100%;
  margin: 0 0 2px;
  font-weight: 800;
}

.sekk-hotbar-valg {
  font-size: 0.8rem;
  padding: 5px 10px;
}

.sekk-hotbar-valg-aktiv {
  background: #ffe9a8;
  border-color: #6b4a2b;
}

/* ---------- SKOG B2: øks, hoggbare trær og ved (se skog-hogging.js) ---------- */
/* Veden har sitt eget lille ikon - 🪵 finnes ikke i emoji-fonten på f.eks.
   Windows 10. En liten kubbe med årringer, i samme stil som resten. */
.item-ikon-ved {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 11 L23 7 Q28 6 29 12 L29 17 Q29 23 24 23 L7 26 Q3 26 3 20 L3 16 Q3 11 5 11 Z' fill='%23a0662f' stroke='%234a3220' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M7 15 L19 12.5 M8 20 L21 17.5' stroke='%237a4b24' stroke-width='1.6' stroke-linecap='round'/%3E%3Cellipse cx='24' cy='15' rx='5' ry='7.5' fill='%23e8c48c' stroke='%234a3220' stroke-width='2'/%3E%3Cellipse cx='24' cy='15' rx='2.4' ry='3.8' fill='none' stroke='%23b88a55' stroke-width='1.3'/%3E%3C/svg%3E");
}

/* Et lite rist i treet ved hvert hugg (rundt foten av treet) */
.skogtre-rist {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.skogtre-rister {
  animation: skogtre-rist 0.32s ease-out;
}

@keyframes skogtre-rist {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-4deg); }
  60% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

/* Flis som spruter ut fra stammen, og et lite "TOK!" */
.skogtre-flis {
  animation: skogtre-flis 0.55s ease-out forwards;
}

@keyframes skogtre-flis {
  0% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

.skogtre-tok {
  animation: skogtre-tok 0.7s ease-out forwards;
}

@keyframes skogtre-tok {
  0% { transform: translate(0, 4px) scale(0.8); opacity: 0; }
  20% { transform: translate(0, 0) scale(1.1); opacity: 1; }
  100% { transform: translate(0, -14px) scale(1); opacity: 0; }
}


/* ---------- BUTIKK B5: Gård & bygg, redskaper og Selg alt (se butikk.js) ---------- */
#butikk-bygg-panel {
  width: 440px;
}

.butikk-faner {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 0 0 14px;
}

.butikk-fane {
  flex: 1;
  padding: 8px 10px;
  font-size: 0.95rem;
  opacity: 0.75;
}

.butikk-fane-valgt {
  opacity: 1;
  background: #ffe9a8;
  border-color: #6b4a2b;
}

#butikk-bygg-panel #oppgrader-niva-oversikt {
  margin-bottom: 12px;
}

.butikk-redskap-tittel {
  text-align: left;
  margin: 10px 0 8px;
  font-size: 1rem;
}

.butikk-redskap-kort {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f5ecd6;
  border: 2px solid #e2cd9a;
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 10px;
  text-align: left;
}

.butikk-redskap-eid {
  border-color: #6aa84f;
  background: #eef6df;
}

.butikk-redskap-niva {
  font-size: 0.75rem;
  font-weight: 700;
  color: #8a6a3a;
  margin-left: 4px;
}

.butikk-redskap-status {
  font-size: 0.8rem;
  font-weight: 700;
  color: #4f7a3a;
  margin-top: 2px;
}

#butikk-selg-alt-knapp {
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  font-size: 1rem;
}

#butikk-selg-alt-knapp:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Øksas holdbarhet: en tynn stripe nederst i hotbarplassen (grønn -> rød) */
.hotbar-slot.hotbar-har-holdbarhet::after {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 3px;
  height: 4px;
  width: calc((100% - 10px) * var(--holdbarhet, 1));
  border-radius: 2px;
  background: hsl(calc(var(--holdbarhet, 1) * 110), 60%, 45%);
  pointer-events: none;
}

@media (max-width: 600px) {
  .butikk-redskap-kort {
    flex-wrap: wrap;
  }

  .butikk-redskap-kort .butikk-vare-kjop {
    width: 100%;
  }
}


/* ---------- LAGRING B1: kistepanelet (se kiste.js) ---------- */
#kiste-panel {
  width: 640px;
}

/* HUS B2B: kjøleskapet bruker det samme oppsettet (egne klassenavn, felles stil) */
.kiste-kolonner,
.kjoleskap-kolonner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.kiste-kolonne,
.kjoleskap-kolonne {
  background: #f5ecd6;
  border: 2px solid #e2cd9a;
  border-radius: 14px;
  padding: 8px;
  min-width: 0;
}

.kiste-kolonne h3,
.kjoleskap-kolonne h3 {
  margin: 2px 0 8px;
  font-size: 1rem;
}

.kiste-rad {
  background: #fff8e7;
  border: 2px solid #e2cd9a;
  border-radius: 12px;
  padding: 6px 8px;
  margin-bottom: 8px;
  text-align: left;
}

.kiste-rad-navn {
  font-weight: 700;
  margin-bottom: 6px;
}

.kiste-rad-knapper {
  display: flex;
  gap: 6px;
}

.kiste-flytt {
  flex: 1;
  min-height: 36px;
  padding: 4px 6px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.kiste-flytt:disabled {
  opacity: 0.45;
  cursor: default;
}

.kiste-flytt-alle {
  background: #ffe9a8;
}

.kiste-tom {
  margin: 8px 0;
  font-style: italic;
  color: #8a6a3a;
}

/* Mobil: kolonnene under hverandre, fortsatt tydelig Sekk / Kiste */
@media (max-width: 600px) {
  .kiste-kolonner,
  .kjoleskap-kolonner {
    grid-template-columns: 1fr;
  }
}


/* ---------- PEIS B1: peisen i huset (se hus-inne.js) ---------- */
/* Slukket: bare ved og aske. Tent: flammer som flakker litt, glør og en
   svak varm glød i stua - rent utseende. */
.husinne-peis-ild,
.husinne-peis-rom-glod {
  display: none;
}

#omrade-hus.husinne-peis-tent .husinne-peis-ild,
#omrade-hus.husinne-peis-tent .husinne-peis-rom-glod {
  display: inline;
}

.husinne-peis-flamme {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: peis-flakk 0.9s ease-in-out infinite alternate;
}

.husinne-peis-flamme-2 {
  animation-duration: 1.3s;
  animation-delay: -0.4s;
}

.husinne-peis-flamme-3 {
  animation-duration: 0.7s;
  animation-delay: -0.2s;
}

@keyframes peis-flakk {
  0% { transform: scale(1, 0.9) skewX(-2deg); }
  50% { transform: scale(0.96, 1.05) skewX(2deg); }
  100% { transform: scale(1.03, 0.97) skewX(-1deg); }
}

.husinne-peis-glo {
  animation: peis-glo 1.6s ease-in-out infinite alternate;
}

.husinne-peis-glo-2 { animation-delay: -0.6s; }
.husinne-peis-glo-3 { animation-delay: -1.1s; }

@keyframes peis-glo {
  0% { opacity: 0.35; }
  100% { opacity: 1; }
}

.husinne-peis-rom-glod {
  animation: peis-rom-glod 2.4s ease-in-out infinite alternate;
}

@keyframes peis-rom-glod {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}


/* ---------- HUS B2A: energi, hygiene, søvn og dusj (se behov.js) ---------- */
/* Skitt, luktstreker, fluer og Zzz ligger i et eget lag over spilleren
   (#spiller-behov) - det følger henne i alle områder. */
#spiller-behov .behov-flekker,
#spiller-behov .behov-flekk-2,
#spiller-behov .behov-lukt,
#spiller-behov .behov-fluer,
#spiller-behov .behov-zzz {
  display: none;
}

#spiller-behov:is([data-hygiene="litt"], [data-hygiene="skitten"], [data-hygiene="fluer"]) .behov-flekker,
#spiller-behov:is([data-hygiene="skitten"], [data-hygiene="fluer"]) .behov-flekk-2,
#spiller-behov:is([data-hygiene="skitten"], [data-hygiene="fluer"]) .behov-lukt,
#spiller-behov[data-hygiene="fluer"] .behov-fluer,
#spiller-behov:is([data-energi="sliten"], [data-energi="veldig"]) .behov-zzz {
  display: inline;
}

/* Luktstreker: av og til (skitten), hele tiden (fluer) - svakt bølgende */
.behov-luktstrek {
  animation: behov-lukt 4s ease-in-out infinite;
}
.behov-luktstrek-1 { animation-delay: -1.3s; }
.behov-luktstrek-2 { animation-delay: -2.6s; }
#spiller-behov[data-hygiene="fluer"] .behov-luktstrek {
  animation-name: behov-lukt-mye;
  animation-duration: 1.8s;
}

@keyframes behov-lukt {
  0%, 55% { opacity: 0; transform: translateY(0); }
  70% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes behov-lukt-mye {
  0% { opacity: 0.3; transform: translateY(2px); }
  50% { opacity: 1; }
  100% { opacity: 0.3; transform: translateY(-5px); }
}

/* Fluene: hver sin løkke rundt hodet, og vinger som surrer */
.behov-flue-bane {
  transform-box: view-box;
  transform-origin: 0px 0px;
  transform: translate(0, -24px);
  animation: behov-flue-runde 2.2s linear infinite;
}
.behov-flue-bane-1 { animation-duration: 3.1s; animation-direction: reverse; }
.behov-flue-bane-2 { animation-duration: 1.7s; animation-delay: -0.8s; }

@keyframes behov-flue-runde {
  0% { transform: translate(0, -24px) scale(1, 0.62) rotate(0deg); }
  100% { transform: translate(0, -24px) scale(1, 0.62) rotate(360deg); }
}

.behov-flue-vinge {
  animation: behov-vinge 0.12s linear infinite alternate;
}

@keyframes behov-vinge {
  0% { opacity: 0.9; }
  100% { opacity: 0.3; }
}

/* Zzz når hun er sliten: av og til - ofte når hun er veldig sliten */
.behov-z {
  animation: behov-z 5s ease-out infinite;
  opacity: 0;
}
.behov-z-1 { animation-delay: 0.5s; }
#spiller-behov[data-energi="veldig"] .behov-z {
  animation-duration: 2.2s;
}

@keyframes behov-z {
  0%, 60% { opacity: 0; transform: translate(0, 0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(4px, -10px); }
}

/* Energistatus i hjørnet (bare når hun er sliten) */
#energi-status {
  position: absolute;
  top: 70px;
  left: 16px;
  z-index: 5;
  padding: 3px 10px;
  background: rgba(255, 248, 231, 0.92);
  color: #4a3b2a;
  border: 2px solid #c9a35c;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 800;
  pointer-events: none;
}

#energi-status.energi-status-veldig {
  border-color: #d9534f;
}

@media (max-width: 600px) {
  #energi-status {
    top: 58px;
    left: 12px;
    font-size: 0.75rem;
  }
}

.sekk-behov {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 0.9rem;
}

/* Søvn: spørsmålet og en kort, mørk overgang med Zzz... */
.sov-knapper {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.sov-knapper .pill-button {
  min-width: 110px;
  min-height: 40px;
}

#sov-fade {
  position: fixed;
  inset: 0;
  background: #141a2e;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sov-fade span {
  color: #fff8e7;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 4px;
}

#sov-fade.synlig {
  opacity: 1;
  pointer-events: auto;
}

/* Dusjen: forhenget trukket for og vann som renner, bare mens hun dusjer */
.husinne-dusj-vann,
.husinne-dusj-lukket {
  display: none;
}

#omrade-hus.husinne-dusjer .husinne-dusj-vann,
#omrade-hus.husinne-dusjer .husinne-dusj-lukket {
  display: inline;
}

.husinne-dusj-strale {
  animation: dusj-strale 0.45s linear infinite;
}
.husinne-dusj-strale-1 { animation-delay: -0.15s; }
.husinne-dusj-strale-2 { animation-delay: -0.3s; }
.husinne-dusj-strale-3 { animation-delay: -0.08s; }
.husinne-dusj-strale-4 { animation-delay: -0.22s; }

@keyframes dusj-strale {
  0% { opacity: 0; transform: translateY(-4px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

.husinne-dusj-damp {
  animation: dusj-damp 0.8s ease-in-out infinite alternate;
}

@keyframes dusj-damp {
  0% { opacity: 0.6; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(-4px); }
}


/* ---------- HUS B2B: kjøleskap og komfyr (se kjokken.js) ---------- */
#kjoleskap-panel {
  width: 640px;
}

.kjokken-spis-linje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #6b5a2b;
}

.kjokken-spis,
.sekk-spis {
  min-height: 36px;
  padding: 4px 12px;
  font-size: 0.85rem;
  background: #ffd9a8;
  white-space: nowrap;
}

.sekk-spis {
  margin-left: 8px;
}

#komfyr-panel {
  width: 600px;
}

#komfyr-oppskrifter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.komfyr-kort {
  background: #fff8e7;
  border: 2px solid #e2cd9a;
  border-radius: 14px;
  padding: 8px 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.komfyr-kort-mangler {
  background: #f3ece0;
}

.komfyr-kort-navn {
  font-weight: 800;
  font-size: 1.05rem;
}

.komfyr-ingredienser {
  list-style: none;
  margin: 6px 0;
  padding: 0;
  font-size: 0.9rem;
  flex: 1;
}

.komfyr-ingredienser li {
  margin: 2px 0;
}

.komfyr-har {
  color: #6b8a3a;
  font-size: 0.8rem;
}

.komfyr-mangler,
.komfyr-mangler .komfyr-har {
  color: #b5533c;
}

.komfyr-energi {
  font-weight: 700;
  margin-bottom: 6px;
}

.komfyr-lag {
  min-height: 40px;
  background: #ffe9a8;
}

.komfyr-lag:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Mobil: ett kort i bredden */
@media (max-width: 600px) {
  #komfyr-oppskrifter {
    grid-template-columns: 1fr;
  }
}

/* Lyset inne i kjøleskapet (bare mens det er åpent) og damp over kjelen */
.husinne-kjoleskap-lys,
.husinne-komfyr-dampstrek {
  display: none;
}

#omrade-hus.husinne-kjoleskap-apent .husinne-kjoleskap-lys,
#omrade-hus.husinne-komfyr-damp .husinne-komfyr-dampstrek {
  display: inline;
}

.husinne-komfyr-dampstrek {
  animation: komfyr-damp 1.2s ease-out infinite;
}

.husinne-komfyr-dampstrek-1 {
  animation-delay: 0.3s;
}

.husinne-komfyr-dampstrek-2 {
  animation-delay: 0.6s;
}

@keyframes komfyr-damp {
  from {
    opacity: 0.9;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}


/* ---------- LAGRING B2: navn på kister, flytting og kister i sekken (se kiste.js) ---------- */
.kiste-navn-rad {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
}

.kiste-navn-rad label {
  font-weight: 700;
  white-space: nowrap;
}

#kiste-navn-felt {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 1rem;
  color: #4a3b2a;
  background: #fff;
  border: 2px solid #c9a35c;
  border-radius: 10px;
}

#kiste-navn-lagre,
#kiste-flytt-knapp {
  min-height: 36px;
  padding: 4px 12px;
  font-size: 0.9rem;
  white-space: nowrap;
}

#kiste-flytt-knapp {
  margin-top: 4px;
  background: #ffe9a8;
}

.sekk-kiste-knapp {
  min-height: 36px;
  padding: 4px 12px;
  margin-left: 6px;
  font-size: 0.85rem;
  white-space: nowrap;
  background: #ffe9a8;
}

.sekk-kiste-knapp:disabled {
  opacity: 0.45;
  cursor: default;
}