@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,600..900,0..100,0..1&family=Nunito:wght@400;600;700;800&display=swap');

/* =========================================================
   PANGOLOTL-GÅRDEN — bondegårdsspill i pikselstil
   ========================================================= */

:root{
  --papir:      #F6EAD2;
  --papir-lys:  #FDF6E7;
  --papir-dyp:  #E9D6B4;
  --blekk:      #3B2A1B;
  --skjell:     #C68B3C;
  --skjell-dyp: #9C6722;
  --skjell-lys: #E8BE78;
  --gjelle:     #DF6F66;
  --gjelle-dyp: #A8443C;
  --skog:       #4E6F3C;
  --skog-dyp:   #2B4225;
  --skog-natt:  #1E2F1A;
  --sol:        #F0C24B;
  --vann:       #3C8C9A;
  --puls: cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:'Nunito',sans-serif;
  background:linear-gradient(170deg,var(--skog-dyp),var(--skog-natt));
  color:var(--papir-lys);
  display:flex; flex-direction:column; align-items:center;
  padding:8px; gap:8px;
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ---------- Toppstripe ---------- */
.topp{
  width:100%; max-width:1024px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-weight:800;
}
.tilbake{
  font-family:'Fraunces',serif; font-variation-settings:'WONK' 1;
  font-size:.9rem; text-decoration:none;
  color:var(--blekk); background:var(--papir-lys);
  border:2px solid var(--skjell-dyp); border-radius:999px;
  padding:5px 14px; box-shadow:0 3px 0 rgba(0,0,0,.3);
}
.tilbake:hover{ background:var(--sol); }

.maaler{
  display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.28); border:2px solid rgba(255,255,255,.14);
  border-radius:999px; padding:4px 14px; font-size:.95rem;
}
.maaler b{ font-family:'Fraunces',serif; font-size:1.1rem; color:var(--sol); }
.liten-knapp{
  background:rgba(0,0,0,.28); border:2px solid rgba(255,255,255,.18);
  border-radius:999px; padding:4px 12px; cursor:pointer;
  color:var(--papir-lys); font-weight:800; font-size:.9rem;
}
.liten-knapp:hover{ background:rgba(255,255,255,.14); }
.liten-knapp[aria-pressed="false"]{ opacity:.5; }

.maalrad{
  display:flex; align-items:center; gap:10px;
  background:var(--papir-lys); border:2.5px solid var(--blekk);
  border-radius:12px; padding:8px 10px; margin-bottom:6px;
}
.maalrad .hake{
  width:26px; height:26px; flex:0 0 auto; border-radius:7px;
  border:2.5px solid var(--blekk); background:var(--papir-dyp);
  display:grid; place-items:center; font-size:.95rem;
}
.maalrad.klart .hake{ background:var(--sol); }
.maalrad.klart .navn{ text-decoration:line-through; }
.maalrad .navn{ font-weight:800; }
.maalrad .info{ font-size:.82rem; color:#6E573F; line-height:1.3; }
.maaler--vann b{ color:#7FD4E8; }

/* ---------- Spillflate ---------- */
.scene{
  position:relative; width:100%; max-width:1024px;
  border:4px solid var(--blekk); border-radius:14px; overflow:hidden;
  box-shadow:0 10px 0 rgba(0,0,0,.35);
  background:#5A8A3C;
}
canvas{
  display:block; width:100%; height:auto;
  image-rendering:pixelated; image-rendering:crisp-edges;
}

/* Beskjed midt på skjermen */
.beskjed{
  position:absolute; left:50%; top:16%; transform:translateX(-50%);
  background:rgba(30,47,26,.92); color:var(--papir-lys);
  border:3px solid var(--sol); border-radius:14px;
  padding:8px 18px; font-weight:800; font-size:clamp(.9rem,2.4vw,1.1rem);
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .25s, transform .25s var(--puls);
}
.beskjed.vis{ opacity:1; transform:translateX(-50%) translateY(6px); }

/* ---------- Frølinja ---------- */
.frolinje{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center;
  width:100%; max-width:1024px;
}
.fro{
  background:rgba(0,0,0,.3); border:2.5px solid rgba(255,255,255,.18);
  border-radius:12px; padding:5px 11px; cursor:pointer;
  color:var(--papir-lys); font-weight:700; font-size:.85rem;
  display:flex; align-items:center; gap:6px; line-height:1.2;
  transition:transform .12s var(--puls), border-color .15s, background .15s;
}
.fro:hover{ transform:translateY(-2px); }
.fro.valgt{ border-color:var(--sol); background:rgba(240,194,75,.22); }
.fro .antall{ color:var(--sol); font-family:'Fraunces',serif; font-weight:800; }
.fro.tom{ opacity:.4; }
.fro .prikk{ width:12px; height:12px; border-radius:3px; border:2px solid rgba(0,0,0,.45); }

/* ---------- Styring for touch ---------- */
.styring{
  display:none;
  width:100%; max-width:1024px;
  justify-content:space-between; align-items:flex-end; gap:12px;
  padding:0 4px;
}
.dpad{ display:grid; grid-template-columns:repeat(3,58px); grid-template-rows:repeat(3,52px); gap:4px; }
.dpad button{ grid-column:2; }
.dpad .venstre{ grid-column:1; grid-row:2; }
.dpad .hoyre{ grid-column:3; grid-row:2; }
.dpad .opp{ grid-row:1; }
.dpad .ned{ grid-row:3; }
.knapp-rund{
  background:var(--papir-lys); border:3px solid var(--blekk);
  border-radius:14px; font-size:1.3rem; line-height:1;
  color:var(--blekk); cursor:pointer; box-shadow:0 4px 0 var(--blekk);
  display:grid; place-items:center;
}
.knapp-rund:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--blekk); }
.handling{
  width:104px; height:104px; border-radius:50%;
  background:var(--sol); border:4px solid var(--blekk);
  box-shadow:0 5px 0 var(--blekk);
  font-family:'Fraunces',serif; font-variation-settings:'WONK' 1;
  font-weight:900; font-size:1rem; color:var(--blekk); cursor:pointer;
  display:grid; place-items:center; text-align:center; padding:6px;
}
.handling:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--blekk); }

/* ---------- Butikken ---------- */
.overlegg{
  position:fixed; inset:0; z-index:50; display:none;
  place-items:center; padding:14px;
  background:rgba(20,32,18,.86); backdrop-filter:blur(4px);
}
.overlegg[open]{ display:grid; }
.butikk{
  background:var(--papir); color:var(--blekk);
  border:4px solid var(--blekk); border-radius:20px;
  padding:16px; width:min(96vw,620px); max-height:88vh; overflow-y:auto;
  box-shadow:0 12px 0 rgba(0,0,0,.4);
}
.butikk h2{
  font-family:'Fraunces',serif; font-variation-settings:'SOFT' 70,'WONK' 1;
  font-size:1.5rem; color:var(--skog-dyp); margin-bottom:2px;
}
.butikk .undertekst{ font-size:.9rem; color:#6E573F; margin-bottom:12px; }
.faner{
  display:flex; gap:4px; flex-wrap:wrap; margin-bottom:12px;
  border-bottom:3px solid var(--blekk); padding-bottom:8px;
}
.fane{
  background:var(--papir-dyp, #E9D6B4); border:2.5px solid var(--blekk);
  border-radius:12px 12px 4px 4px; padding:6px 12px; cursor:pointer;
  font-weight:800; font-size:.86rem; color:var(--blekk);
  box-shadow:0 3px 0 rgba(59,42,27,.25);
}
.fane:hover{ background:var(--papir-lys); }
.fane.valgt{
  background:var(--sol); box-shadow:0 3px 0 var(--skjell-dyp);
  transform:translateY(-2px);
}
.vare .antall{ color:var(--skjell-dyp); font-weight:800; }

.butikk h3{
  font-family:'Fraunces',serif; font-size:1rem; color:var(--skjell-dyp);
  text-transform:uppercase; letter-spacing:.09em; margin:14px 0 6px;
}
.vare{
  display:flex; align-items:center; gap:10px;
  background:var(--papir-lys); border:2.5px solid var(--blekk);
  border-radius:12px; padding:8px 10px; margin-bottom:6px;
}
.vare .prikk{ width:18px; height:18px; border-radius:4px; border:2px solid rgba(0,0,0,.5); flex:0 0 auto; }
.vare .tekst{ flex:1; min-width:0; }
.vare .navn{ font-weight:800; }
.vare .info{ font-size:.82rem; color:#6E573F; line-height:1.3; }
.vare button{
  background:var(--sol); border:2.5px solid var(--blekk); border-radius:999px;
  padding:5px 14px; font-weight:800; cursor:pointer; white-space:nowrap;
  box-shadow:0 3px 0 var(--blekk); color:var(--blekk);
}
.vare button:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--blekk); }
.vare button:disabled{ opacity:.4; cursor:default; box-shadow:none; transform:none; }
.vare.eid{ opacity:.6; }
.lukk-rad{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; }
.lukk-rad .penger{ font-family:'Fraunces',serif; font-weight:900; font-size:1.2rem; color:var(--skjell-dyp); }
.lukk-rad button{
  background:var(--gjelle); color:#fff; border:3px solid var(--blekk);
  border-radius:999px; padding:8px 22px; font-weight:800; cursor:pointer;
  box-shadow:0 4px 0 var(--blekk);
}

/* ---------- Hjelperute ---------- */
.hjelp{
  width:100%; max-width:1024px; font-size:.82rem; opacity:.75;
  text-align:center; line-height:1.5;
}
kbd{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  border-radius:5px; padding:1px 6px; font-family:inherit; font-size:.8em; font-weight:700;
}

@media (max-width:900px), (pointer:coarse){
  .styring{ display:flex; }
  .hjelp{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.001ms !important; }
}