/* ---------------------------------------------------------------------------
   Lugn, tydlig och touch-vänlig design – v18 "glow up".
   Stora tryckbara knappar med djup, mjuk himmelsgradient, inga blinkande
   effekter (skönt för autism/fokus). Allt är rundat och vänligt.
--------------------------------------------------------------------------- */

* { box-sizing: border-box; }

:root {
  color-scheme: light only; /* appen är designad ljus – blockera auto dark mode */
  --bg: #eaf4fd;
  --kort: #ffffff;
  --bla: #5b9bd5;
  --bla-mork: #3f7cb5;
  --bla-djup: #2f6396;
  --gron: #6cc070;
  --gron-mork: #4ca152;
  --gul: #ffd166;
  --gul-mork: #e8b23c;
  --amber: #f0a64a;
  --amber-mork: #d18a2f;
  --rosa: #e88bb5;
  --lila: #9b8be8;
  --text: #2c3e50;
  --kant: #dde9f4;
  --skugga: 0 6px 16px rgba(60, 90, 130, 0.14);
  --skugga-stor: 0 10px 26px rgba(60, 90, 130, 0.18);
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: linear-gradient(170deg, #dcefff 0%, #eaf6f0 55%, #fff6e3 100%);
  background-attachment: fixed;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* Mjuka dekorativa "moln" i bakgrunden (stilla, inga rörelser) */
body::before, body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
body::before {
  width: 46vmax; height: 46vmax;
  top: -18vmax; right: -14vmax;
  background: radial-gradient(circle, rgba(155, 139, 232, 0.14), transparent 65%);
}
body::after {
  width: 52vmax; height: 52vmax;
  bottom: -22vmax; left: -16vmax;
  background: radial-gradient(circle, rgba(108, 192, 112, 0.13), transparent 65%);
}

/* Skärmar */
.skarm {
  display: none;
  position: fixed;
  inset: 0;
  flex-direction: column;
  z-index: 1;
}
.skarm.aktiv { display: flex; animation: skarmIn 0.4s ease; }
@keyframes skarmIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Rubriker i mjuk regnbågsgradient */
h1 {
  color: #274a6d;
  background: linear-gradient(92deg, #3f7cb5 10%, #7c5fd3 50%, #e8892f 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Mjukt svävande figurer (långsamt och lugnt, inget blinkande) */
@keyframes svava {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---------- HEM ---------- */
.hem-innehall {
  margin: auto;
  text-align: center;
  padding: 24px;
  max-width: 480px;
  width: 100%;
}
.hem-figur {
  font-size: 96px;
  line-height: 1.15;
  margin-bottom: 6px;
  filter: drop-shadow(0 8px 14px rgba(60, 90, 130, 0.25));
  animation: svava 4s ease-in-out infinite;
}

/* Små dekorationer runt hemskärmen */
.hem-innehall { position: relative; }
#hem .hem-innehall::before {
  content: '🌈';
  position: absolute;
  top: -14px; left: -4px;
  font-size: 46px;
  opacity: 0.85;
  transform: rotate(-12deg);
}
#hem .hem-innehall::after {
  content: '☁️';
  position: absolute;
  top: 36px; right: -6px;
  font-size: 38px;
  opacity: 0.7;
}
#hem-hej { font-size: clamp(32px, 8vw, 54px); margin: 0 0 22px; letter-spacing: 0.5px; }
.stjarn-rad {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 26px;
  margin-top: 20px;
  font-weight: 800;
  color: var(--bla-djup);
  background: rgba(255, 255, 255, 0.75);
  border: 3px solid #ffe3a1;
  border-radius: 999px;
  padding: 8px 24px;
  box-shadow: var(--skugga);
}

.klistermarken {
  margin: 16px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 420px;
  font-size: 32px;
}
.klistermarken:not(:empty) {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 22px;
  padding: 12px 18px;
  box-shadow: 0 4px 0 var(--kant), var(--skugga);
}

/* Profilväljare (enkel inloggning) */
.profil-val {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.profil-knapp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: none;
  background: linear-gradient(180deg, #ffffff, #f2f8fe);
  border-radius: 30px;
  padding: 28px 32px;
  font-size: 27px;
  font-weight: 800;
  color: var(--text);
  box-shadow: 0 7px 0 var(--kant), var(--skugga-stor);
  min-width: 150px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.profil-knapp:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--kant), var(--skugga); }
.profil-avatar {
  font-size: 84px;
  line-height: 1.15;
  filter: drop-shadow(0 6px 10px rgba(60, 90, 130, 0.22));
  animation: svava 4s ease-in-out infinite;
}
.profil-knapp:nth-child(2) .profil-avatar { animation-delay: 2s; }

.byt-barn { right: auto; left: 14px; }

/* Välkomsttext + små knappar på profilskärmen */
.profil-valkommen {
  max-width: 420px;
  margin: 0 auto 8px;
  font-size: 19px;
  line-height: 1.5;
  opacity: 0.85;
}
.profil-extra {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.profil-liten {
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--bla-mork);
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 0 var(--kant), var(--skugga);
}
.profil-liten:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kant); }

/* Länk till systerappen (Lär svenska) */
.syster-lank { font-size: 15px; opacity: 0.75; margin: 14px auto 0; }
.syster-lank a { color: var(--bla-mork); font-weight: 700; }

/* Avatarväljare i "Lägg till barn" */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.avatar-knapp {
  border: 3px solid transparent;
  background: #f2f8fe;
  border-radius: 14px;
  font-size: 30px;
  padding: 8px 0;
}
.avatar-knapp.vald { border-color: var(--gron); background: #eafaf0; }
.avatar-knapp:active { transform: scale(0.92); }

/* Dialogtexter */
.dialog-rad p { font-size: 15px; margin: 10px 0 4px; opacity: 0.85; }
.dialog-fel { color: #c0392b; font-weight: 700; font-size: 15px; min-height: 20px; margin: 8px 0 0; }
.grind-input.text { font-size: 22px; }
.grind-input.kod { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 18px; letter-spacing: 1px; }
.liten-knapp.diskret {
  background: transparent;
  color: var(--bla-mork);
  box-shadow: none;
  margin-right: auto; /* lägger sig till vänster i knappraden */
  padding-left: 4px;
}

/* Barn & synk i vuxenpanelen */
.synk-info { margin-bottom: 10px; }
#synk-barn { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.synk-kod {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 16px;
  letter-spacing: 1px;
  background: #f2f6fa;
  border: 2px dashed #c5d4e3;
  border-radius: 10px;
  padding: 10px 12px;
  user-select: text;
  -webkit-user-select: text;
  word-break: break-all;
}
.synk-hjalp { font-size: 13px; opacity: 0.7; margin: 6px 0 0; }
.synk-qr {
  display: block;
  margin: 12px auto 4px;
  border-radius: 12px;
  border: 2px solid var(--kant);
}

/* Spara-länken-tips på hemskärmen */
.spara-tips {
  display: none;
  align-items: center;
  gap: 10px;
  max-width: 380px;
  margin: 16px auto 0;
  background: #fff8e6;
  border: 2px solid #ffe3a1;
  border-radius: 16px;
  padding: 12px 14px;
  text-align: left;
  box-shadow: var(--skugga);
}
.spara-tips-text { font-size: 14px; line-height: 1.4; flex: 1; }
.spara-tips-knappar { display: flex; flex-direction: column; gap: 6px; }
.spara-tips-knappar button {
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 10px;
}
#tips-dela { background: var(--gul); color: #6b4d12; }
#tips-stang { background: transparent; color: #9bb0c4; font-size: 15px; }

/* Barnets nivåväljare på startsidan */
.niva-val {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 0 0 24px;
}
.niva-val button {
  border: none;
  background: #fff;
  border-radius: 18px;
  padding: 13px 18px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  box-shadow: 0 5px 0 var(--kant), var(--skugga);
  transition: transform 0.1s, box-shadow 0.1s;
}
.niva-val button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--kant); }
.niva-val button.vald {
  background: linear-gradient(180deg, #f0fbf3, #ddf5e3);
  box-shadow: 0 5px 0 #b5dfbd, var(--skugga);
  color: var(--gron-mork);
}

.testa-rost-hem {
  margin-top: 18px;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--bla-mork);
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 4px 0 var(--kant), var(--skugga);
}
.testa-rost-hem:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kant); }
.version {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 12px;
  opacity: 0.4;
}

.vuxen-knapp {
  position: absolute;
  top: 14px; right: 14px;
  width: 54px; height: 54px;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  font-size: 24px;
  box-shadow: var(--skugga);
  z-index: 2;
}
.vuxen-knapp:active { transform: scale(0.92); }

/* ---------- Stora knappar (spelval) ---------- */
.stor-knapp {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 360px;
  margin: 14px auto;
  padding: 21px 28px;
  font-size: 27px;
  font-weight: 800;
  border: none;
  border-radius: 24px;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
/* Godis-glans över knappens övre halva */
.stor-knapp::after {
  content: '';
  position: absolute;
  inset: 3px 6px 55% 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
  border-radius: 20px 20px 60% 60%;
  pointer-events: none;
}
.stor-knapp.spela {
  background: linear-gradient(180deg, #7ecf82, #5cb763);
  box-shadow: 0 7px 0 var(--gron-mork), var(--skugga-stor);
}
.stor-knapp.lugn {
  background: linear-gradient(180deg, #6faade, #4f92cf);
  box-shadow: 0 7px 0 var(--bla-mork), var(--skugga-stor);
}
.stor-knapp.matte {
  background: linear-gradient(180deg, #f5b463, #eb9c3c);
  box-shadow: 0 7px 0 var(--amber-mork), var(--skugga-stor);
}
.stor-knapp.dubbel {
  background: linear-gradient(180deg, #ab9cf0, #8f7de0);
  box-shadow: 0 7px 0 #6f5cc4, var(--skugga-stor);
}
.stor-knapp.rosa {
  background: linear-gradient(180deg, #f2a0c4, #e57ea6);
  box-shadow: 0 7px 0 #c25a88, var(--skugga-stor);
}
.stor-knapp.teal {
  background: linear-gradient(180deg, #5fc9c0, #3fb0a6);
  box-shadow: 0 7px 0 #2d8d85, var(--skugga-stor);
}
.stor-knapp:active { transform: translateY(5px); }
.stor-knapp.spela:active { box-shadow: 0 2px 0 var(--gron-mork), var(--skugga); }
.stor-knapp.lugn:active  { box-shadow: 0 2px 0 var(--bla-mork), var(--skugga); }
.stor-knapp.matte:active { box-shadow: 0 2px 0 var(--amber-mork), var(--skugga); }
.stor-knapp.dubbel:active { box-shadow: 0 2px 0 #6f5cc4, var(--skugga); }

/* ---------- SPEL ---------- */
.spel-topp {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.topp-knapp {
  width: 52px; height: 52px;
  border: none; border-radius: 18px;
  background: var(--kort);
  font-size: 24px;
  box-shadow: 0 4px 0 var(--kant), var(--skugga);
  flex: 0 0 auto;
}
.topp-knapp:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kant); }
.progress {
  flex: 1;
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 9px 16px;
  box-shadow: inset 0 2px 5px rgba(60, 90, 130, 0.09);
}
.prick {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #d9e4ef;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.prick.nu {
  background: #fff;
  box-shadow: 0 0 0 3px var(--bla);
  transform: scale(1.05);
  animation: pulsa 2.2s ease-in-out infinite;
}
@keyframes pulsa {
  0%, 100% { box-shadow: 0 0 0 3px var(--bla); }
  50% { box-shadow: 0 0 0 6px rgba(91, 155, 213, 0.45); }
}
.prick.klar {
  background: linear-gradient(180deg, #ffe08a, #ffca4d);
  box-shadow: 0 2px 4px rgba(232, 178, 60, 0.5);
  animation: prickpopp 0.35s ease;
}
@keyframes prickpopp {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.spelyta {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 18px 28px;
  gap: 22px;
  overflow: auto;
}

/* Frågedel */
.fraga {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.hogtalare {
  width: 64px; height: 64px;
  border: none; border-radius: 50%;
  background: linear-gradient(180deg, #6faade, #4f92cf);
  color: #fff; font-size: 30px;
  box-shadow: 0 5px 0 var(--bla-mork), var(--skugga);
  flex: 0 0 auto;
}
.hogtalare:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--bla-mork); }
.fraga-bild {
  font-size: clamp(90px, 26vw, 150px);
  line-height: 1.15;
  filter: drop-shadow(0 8px 12px rgba(60, 90, 130, 0.2));
}
.fraga-ord {
  font-size: clamp(52px, 14vw, 90px);
  font-weight: 800;
  letter-spacing: 4px;
  color: #274a6d;
}
.fraga-text { font-size: 24px; font-weight: 700; opacity: 0.8; }

/* Svarsalternativ */
.alternativ {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  width: 100%;
  max-width: 640px;
}
.alt {
  border: 4px solid transparent;
  border-radius: 28px;
  background: var(--kort);
  box-shadow: 0 6px 0 var(--kant), var(--skugga);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, border-color 0.2s, background 0.2s, box-shadow 0.1s;
}
.alt:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--kant), var(--skugga); }
.alt.bild { width: 150px; height: 150px; font-size: 84px; }
.alt.bokstav {
  width: 120px; height: 120px;
  font-size: 64px; font-weight: 800;
  text-transform: lowercase;
  color: #274a6d;
}
.alt.ratt {
  border-color: var(--gron);
  background: #e7f7e8;
  box-shadow: 0 6px 0 #b5dfbd, var(--skugga);
}
.alt.fel { animation: skaka 0.35s; border-color: var(--amber); }

@keyframes skaka {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* Rätt stavning: ord-alternativ */
.alt.ordval {
  padding: 20px 30px;
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 800;
  letter-spacing: 2px;
  color: #274a6d;
}

/* Rim-övningen */
.rim-ord { font-size: clamp(40px, 11vw, 64px); }
.alt.rimval {
  flex-direction: column;
  gap: 4px;
  width: 140px;
  padding: 16px 10px 14px;
}
.rimval-bild { font-size: 64px; line-height: 1.15; }
.rimval-ord { font-size: 24px; font-weight: 800; color: #274a6d; }

/* Läsförståelse: meningen som ska läsas */
.las-mening {
  font-size: clamp(28px, 7vw, 42px);
  font-weight: 800;
  color: #274a6d;
  background: #fff;
  border-radius: 20px;
  padding: 18px 26px;
  margin-top: 10px;
  box-shadow: 0 5px 0 var(--kant), var(--skugga);
  max-width: 560px;
  line-height: 1.35;
}

/* Bygg ordet */
.slots {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.slot {
  width: 76px; height: 92px;
  border: 4px dashed #c5d4e3;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; font-weight: 800;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
}
.slot.fylld {
  border-style: solid; border-color: var(--gron);
  background: #eafaf0;
  animation: prickpopp 0.3s ease;
}
.slot.mall { color: #c5d4e3; } /* "härma"-mall – svag bokstav att kopiera */

.brickor {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.bricka {
  width: 86px; height: 86px;
  border: none; border-radius: 20px;
  background: linear-gradient(180deg, #6faade, #4f92cf);
  color: #fff;
  font-size: 48px; font-weight: 800;
  box-shadow: 0 6px 0 var(--bla-mork), var(--skugga);
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.2s;
}
.bricka:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--bla-mork); }
.bricka.anvand { opacity: 0.22; pointer-events: none; box-shadow: none; }

.harma-knapp {
  border: none;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffdd85, #ffca4d);
  color: #6b4d12;
  font-size: 20px; font-weight: 800;
  padding: 12px 22px;
  box-shadow: 0 5px 0 var(--gul-mork), var(--skugga);
}
.harma-knapp:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--gul-mork); }

/* Ord med lucka (Vilken bokstav saknas) */
.ord-lucka {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: clamp(44px, 13vw, 76px);
  font-weight: 800;
  letter-spacing: 2px;
  color: #274a6d;
}
.ord-lucka .lucka {
  min-width: 0.7em;
  text-align: center;
  border-bottom: 6px solid var(--bla);
  color: var(--gron-mork);
}
.ord-lucka .lucka.fylld { border-bottom-color: var(--gron); }

/* Bokstavschips (Ljuda och läs) */
.chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.chip {
  border: none;
  border-radius: 16px;
  background: #eaf2fb;
  color: var(--bla-mork);
  font-size: 38px;
  font-weight: 800;
  width: 64px;
  height: 74px;
  box-shadow: 0 4px 0 #cddcec, var(--skugga);
}
.chip:active { transform: translateY(3px); box-shadow: 0 1px 0 #cddcec; }

/* Skriv bokstaven (rita-yta) */
.rita-wrap { width: 100%; display: flex; justify-content: center; }
.rita {
  width: min(86vw, 320px);
  height: 300px;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 6px 0 var(--kant), var(--skugga-stor);
  touch-action: none;
}
.rita-knappar { display: flex; gap: 14px; justify-content: center; }
.klar-rita {
  border: none;
  border-radius: 18px;
  background: #cfe8d4;
  color: #82a98a;
  font-size: 20px;
  font-weight: 800;
  padding: 12px 26px;
  box-shadow: 0 5px 0 #b8d6be, var(--skugga);
  transition: background 0.2s, color 0.2s;
}
.klar-rita.redo {
  background: linear-gradient(180deg, #7ecf82, #5cb763);
  color: #fff;
  box-shadow: 0 5px 0 var(--gron-mork), var(--skugga);
}
.klar-rita:active { transform: translateY(4px); box-shadow: 0 1px 0 #b8d6be; }
.klar-rita.redo:active { box-shadow: 0 1px 0 var(--gron-mork); }

/* Meningar-läget */
.mening-slots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.mening-slot {
  min-width: 92px;
  height: 62px;
  border: 3px dashed #c5d4e3;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.85);
  padding: 0 12px;
}
.mening-slot.fylld {
  border-style: solid; border-color: var(--gron);
  background: #eafaf0;
  animation: prickpopp 0.3s ease;
}

.ord-brickor {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.ord-bricka {
  border: none;
  border-radius: 16px;
  background: linear-gradient(180deg, #6faade, #4f92cf);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  padding: 14px 18px;
  box-shadow: 0 5px 0 var(--bla-mork), var(--skugga);
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.2s;
}
.ord-bricka:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--bla-mork); }
.ord-bricka.anvand { opacity: 0.22; pointer-events: none; box-shadow: none; }
.ord-kort {
  border-radius: 16px;
  background: #eaf2fb;
  color: var(--bla-mork);
  font-size: 26px;
  font-weight: 700;
  padding: 14px 18px;
  box-shadow: 0 4px 0 #cddcec, var(--skugga);
}

/* Matte */
.alt.tal {
  width: 110px; height: 110px;
  font-size: 60px; font-weight: 800;
  color: #274a6d;
}
.rakna-grid {
  display: flex; flex-wrap: wrap;
  gap: 12px; justify-content: center;
  max-width: 540px;
  font-size: clamp(40px, 11vw, 60px);
}
.rakna-grid.liten {
  font-size: clamp(28px, 7vw, 40px);
  gap: 8px;
  max-width: 240px;
  background: #fff;
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 5px 0 var(--kant), var(--skugga);
}
.tarning {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 190px; height: 190px;
  background: #fff; border-radius: 26px;
  box-shadow: 0 6px 0 var(--kant), var(--skugga-stor);
  padding: 18px;
}
.tarn-cell { display: flex; align-items: center; justify-content: center; }
.pip { width: 36px; height: 36px; border-radius: 50%; background: var(--bla-djup); }
.plus-rad { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.plus-tecken { font-size: 56px; font-weight: 800; color: var(--text); }
.plus-grupp { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.plus-tal { font-size: 44px; font-weight: 800; }
.plus-tal.bla { color: var(--bla-mork); }
.plus-tal.gron { color: var(--gron-mork); }
.prick-grupp {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* tioram-struktur: 5 per rad */
  gap: 9px;
  justify-content: center;
  padding: 16px; background: #fff;
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--kant), var(--skugga);
}
.prick-grupp.i-knapp { box-shadow: none; padding: 6px; }
.prick-stor { width: 32px; height: 32px; border-radius: 50%; position: relative; }
.prick-stor.bla { background: linear-gradient(180deg, #6faade, #4f92cf); }
.prick-stor.gron { background: linear-gradient(180deg, #7ecf82, #5cb763); }
.prick-stor.tom { background: transparent; border: 3px dashed #c5d4e3; }
.prick-stor.borta { opacity: 0.35; }
.prick-stor.borta::after {
  content: '✕';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #c0392b; font-size: 22px; font-weight: 800;
}

/* Jämföra: två klickbara prickgrupper */
.jamfor-rad { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; }
.jamfor-grupp {
  border: 4px solid transparent;
  border-radius: 26px;
  background: var(--kort);
  box-shadow: 0 6px 0 var(--kant), var(--skugga);
  padding: 12px;
  transition: transform 0.1s, border-color 0.2s, box-shadow 0.1s;
}
.jamfor-grupp:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--kant); }
.jamfor-grupp.ratt { border-color: var(--gron); background: #e7f7e8; }
.jamfor-grupp.fel { animation: skaka 0.35s; border-color: var(--amber); }

/* Mönster: vad kommer sen? */
.monster-rad {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 620px;
}
.monster-ruta {
  width: 66px; height: 66px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 0 var(--kant), var(--skugga);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
}
.monster-ruta.gap {
  border: 3px dashed var(--bla);
  background: rgba(255, 255, 255, 0.6);
  color: var(--bla-mork);
  font-weight: 800;
  box-shadow: none;
}
.monster-ruta.fylld {
  border-style: solid; border-color: var(--gron);
  background: #eafaf0;
  animation: prickpopp 0.3s ease;
}

/* Memo: vändkort (para ihop ord och bild) */
.memo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 480px;
}
.memo-kort {
  position: relative;
  aspect-ratio: 1;
  border: 4px solid transparent;
  border-radius: 20px;
  background: linear-gradient(180deg, #6faade, #4f92cf);
  box-shadow: 0 5px 0 var(--bla-mork), var(--skugga);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, border-color 0.25s, transform 0.1s, box-shadow 0.1s;
}
.memo-kort::after {
  content: '⭐';
  position: absolute;
  font-size: 30px;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.memo-kort:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--bla-mork), var(--skugga); }
.memo-kort.oppen, .memo-kort.matchad {
  background: #fff;
  box-shadow: 0 5px 0 var(--kant), var(--skugga);
}
.memo-kort.oppen::after, .memo-kort.matchad::after { opacity: 0; }
.memo-kort.matchad { border-color: var(--gron); background: #eafaf0; }
.memo-innehall {
  opacity: 0;
  font-size: 44px;
  transition: opacity 0.2s;
}
.memo-innehall.text {
  font-size: clamp(17px, 5vw, 24px);
  font-weight: 800;
  color: #274a6d;
}
.memo-kort.oppen .memo-innehall, .memo-kort.matchad .memo-innehall { opacity: 1; }

/* Talraden återanvänder monster-rutorna */
.monster-ruta.tal { font-size: 32px; font-weight: 800; color: #274a6d; }

/* Klockan */
.klocka { width: min(64vw, 260px); }
.klocka svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(60, 90, 130, 0.18)); }
.alt.klocka-val { font-size: clamp(22px, 6vw, 32px); letter-spacing: 1px; padding: 18px 24px; }
.digital-klocka {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(56px, 16vw, 84px);
  font-weight: 700;
  letter-spacing: 4px;
  color: #d9f4ff;
  background: linear-gradient(180deg, #33475e, #24344a);
  border-radius: 24px;
  padding: 18px 38px;
  box-shadow: 0 7px 0 #17232f, var(--skugga-stor), inset 0 2px 10px rgba(0, 0, 0, 0.35);
  text-shadow: 0 0 12px rgba(140, 220, 255, 0.6);
}

/* Minus-ekvation (5 − 2) */
.ekvation { display: flex; gap: 14px; align-items: center; font-size: 46px; font-weight: 800; color: #274a6d; flex-wrap: wrap; justify-content: center; }
.ekvation .halft { font-size: 26px; font-weight: 700; opacity: 0.75; }
.ekvation .op { color: var(--text); }
.ekvation .bort { color: #c0392b; }
.ekvation .fraga-ruta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 52px;
  border: 3px dashed var(--bla); border-radius: 14px;
  color: var(--bla-mork);
}

/* Textuppgift */
.uppg-text { font-size: 22px; line-height: 1.5; max-width: 520px; }
.uppg-bild {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; max-width: 540px;
  font-size: clamp(36px, 10vw, 54px);
}
.uppg-bild .aten {
  opacity: 0.35;
  text-decoration: line-through;
  text-decoration-color: #c0392b;
  text-decoration-thickness: 3px;
}

/* Stjärna som dyker upp vid rätt svar */
.belon {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 180px;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(232, 178, 60, 0.45));
  animation: poff 0.9s ease;
  z-index: 20;
}
@keyframes poff {
  0% { transform: scale(0.2); opacity: 0; }
  30% { transform: scale(1.1); opacity: 1; }
  70% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* Konfetti på klar-skärmen (lugnt fall, inget blinkande) */
.konfetti {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 15;
}
.konfetti span {
  position: absolute;
  top: -4vh;
  width: 12px; height: 12px;
  border-radius: 3px;
  opacity: 0;
  animation: konfall linear forwards;
}
@keyframes konfall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.9; }
  100% { transform: translateY(108vh) rotate(300deg); opacity: 0.7; }
}

/* ---------- KLAR ---------- */
.klar-innehall { margin: 0 auto; text-align: center; padding: max(20px, 4vh) 24px 64px; position: relative; }
.klar-figur { font-size: 110px; filter: drop-shadow(0 8px 14px rgba(60, 90, 130, 0.25)); animation: svava 4s ease-in-out infinite; }
.klar-innehall h1 { font-size: 48px; margin: 8px 0; }
#klar-text { font-size: 24px; margin-bottom: 12px; font-weight: 700; }
/* Solstrålar som snurrar looongsamt bakom klistermärket */
.klar-innehall::before {
  content: '';
  position: absolute;
  left: 50%; top: 62%;
  width: 360px; height: 360px;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(255, 209, 102, 0.3) 0 14deg, rgba(255, 209, 102, 0) 14deg 32deg);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%);
  mask: radial-gradient(circle, #000 25%, transparent 68%);
  animation: snurra 40s linear infinite;
  pointer-events: none;
}
@keyframes snurra {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.klar-klistermarke {
  position: relative;
  font-size: 96px;
  margin: 10px auto 24px;
  width: 170px; height: 170px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 0 var(--kant), var(--skugga-stor);
  animation: prickpopp 0.5s ease;
}

/* ---------- STATISTIK ---------- */
.stats-rubrik { margin: 0; font-size: 24px; }
.stats-yta {
  flex: 1;
  overflow: auto;
  padding: 8px 18px 40px;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}
.stat-kort {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.stat-ruta {
  background: var(--kort);
  border-radius: 20px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 4px 0 var(--kant), var(--skugga);
}
.stat-emoji { font-size: 28px; }
.stat-varde { font-size: 30px; font-weight: 800; color: var(--bla-mork); }
.stat-text { font-size: 14px; opacity: 0.75; }

.stat-sektion { margin-bottom: 26px; }
.stat-sektion h3 { margin: 0 0 10px; font-size: 19px; }
.stat-tomt { opacity: 0.6; font-size: 15px; margin: 4px 0; }

.stat-rad {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--kort);
  border-radius: 16px;
  padding: 10px 14px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(60, 90, 130, 0.08);
}
.stat-rad-bild { font-size: 30px; width: 38px; text-align: center; }
.stat-rad-namn { font-size: 22px; font-weight: 700; flex: 1; }
.stat-rad-siffror { font-size: 17px; font-weight: 700; white-space: nowrap; }
.stat-rad-siffror .ratt { color: var(--gron-mork); }
.stat-rad-siffror .fel { color: #c0392b; }

/* ---------- Overlays (vuxen) ---------- */
.overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(40, 60, 90, 0.45);
  align-items: center; justify-content: center;
  padding: 20px;
  z-index: 10;
}
.overlay.aktiv { display: flex; }
.ruta {
  background: #fff;
  border-radius: 26px;
  padding: 26px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--skugga-stor);
}
.ruta.brett { max-width: 520px; max-height: 90vh; overflow: auto; }
.ruta h2 { margin: 0 0 16px; }
.grind-input {
  width: 100%;
  font-size: 30px;
  padding: 14px;
  border: 2px solid #c5d4e3;
  border-radius: 14px;
  text-align: center;
  margin: 10px 0 4px;
}
.ruta-knappar { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }
.liten-knapp {
  border: none; border-radius: 14px;
  padding: 14px 22px;
  font-size: 18px; font-weight: 700;
  color: #fff;
}
.liten-knapp.spela { background: var(--gron); box-shadow: 0 4px 0 var(--gron-mork); }
.liten-knapp.lugn { background: #9bb0c4; box-shadow: 0 4px 0 #7d94aa; }
.liten-knapp:active { transform: translateY(3px); box-shadow: none; }

.installning { margin-bottom: 18px; }
.installning > label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--bla-mork);
}
.val-rad { display: flex; gap: 10px; flex-wrap: wrap; }
.val-rad.kolumn { flex-direction: column; }
.val-rad button {
  flex: 1;
  min-width: 80px;
  border: 3px solid #d9e4ef;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.val-rad button.vald { border-color: var(--gron); background: #eafaf0; }
.val-rad button.neutral { border-color: #d9e4ef; }
.val-rad button.fara { color: #c0392b; }

/* ---------- Kluringar: Mönster-rutan ---------- */
/* Rutnätet återanvänder .monster-ruta (grid-layouten sätts inline i app.js). */
.alt.puls { animation: mjukpuls 2.4s ease-in-out infinite; } /* mjuk ledtråd – inget blink */
@keyframes mjukpuls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .alt.puls { animation: none; }
}

/* ---------- Kluringar: Formdetektiven ---------- */
.form-grid {
  display: grid;
  gap: 12px;
  max-width: 480px;
  width: 100%;
  margin: 16px auto;
}
.form-cell {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
  border: 3px solid var(--kant);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-shadow: 0 4px 0 var(--kant), var(--skugga);
}
.form-cell:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kant); }
.form-cell.fel { animation: skaka 0.35s; border-color: var(--amber); }
.form-cell.hittad {
  border-color: var(--gron, #6cc070);
  box-shadow: 0 0 0 4px rgba(108, 192, 112, 0.35);
  pointer-events: none;
}
.form-cell.hittad::after {
  content: '⭐';
  position: absolute;
  top: 2px; right: 6px;
  font-size: 20px;
}
.form {
  aspect-ratio: 1; /* kvadratisk duk – geometrin ägs helt av SVG:n */
  flex: none;
}
.form svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 3px 3px rgba(60, 90, 130, 0.28));
}

/* ---------- Kluringar: Sortera i lådor ---------- */
.sortobjekt {
  font-size: 84px;
  text-align: center;
  margin: 18px 0;
  line-height: 1;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .sortobjekt { transition: none; } /* objektet läggs direkt i lådan, samma rytm */
}
.sort-lador {
  display: flex;
  gap: 14px;
  margin: 12px auto;
  width: 100%;
  max-width: 520px;
}
.sortlada {
  flex: 1;
  min-height: 130px;
  border: 3px dashed var(--kant);
  border-radius: 20px;
  background: #f2f7fc;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  font-size: 16px;
  color: var(--text);
  box-shadow: var(--skugga);
}
.sortlada:active { transform: translateY(3px); }
.sortlada.fel { animation: skaka 0.35s; border-color: var(--amber); }
.sortlada-ikon { font-size: 40px; line-height: 1.2; }
.sortlada-namn { font-weight: 800; margin-top: 2px; }
.sortlada-rad {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  margin-top: auto;
  font-size: 26px;
}
@media (max-width: 420px) {
  .sort-lador { flex-wrap: wrap; }
  .sortlada { min-width: 30%; }
}

/* ---------- Molly Molnet (maskot) ---------- */
.maskot {
  position: absolute;
  top: 76px; right: 14px; /* under ⚙️-knappen, krockar inte med barnets avatar */
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none; /* Molly blockerar aldrig knappar */
}
.maskot-moln {
  position: relative;
  display: inline-block;
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(60, 90, 130, 0.2));
  animation: andas 4s ease-in-out infinite; /* långsam "andning" – lugnt */
}
.maskot-moln.liten { font-size: 48px; }
/* Prick-ögon på molnet */
.maskot-moln::before, .maskot-moln::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2c3e50;
  top: 52%;
}
.maskot-moln::before { left: 38%; }
.maskot-moln::after { left: 56%; }
@keyframes andas {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .maskot-moln { animation: none; }
}
/* Pratbubbla (texten syns även om talet är avstängt) */
.maskot-bubbla {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--skugga);
  padding: 10px 14px;
  max-width: 220px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.maskot-bubbla.visas { opacity: 1; }
.maskot .maskot-bubbla::after { /* pil upp mot molnet (hemskärmen) */
  content: '';
  position: absolute;
  top: -8px; right: 22px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
}
/* Liten Molly i spel-hörnet (fadear in vid 2 fel i rad) */
#maskot-spel {
  position: fixed;
  bottom: 12px; left: 12px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s;
}
#maskot-spel.synlig { opacity: 1; }
#maskot-spel .maskot-bubbla::after { /* pil ner mot molnet */
  content: '';
  position: absolute;
  bottom: -8px; left: 18px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}
/* Molly på klar-skärmen (ovanför "Vad duktig du är"-texten) */
#maskot-klar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  pointer-events: none;
}
#maskot-klar .maskot-bubbla::after { /* pil upp mot molnet, centrerad */
  content: '';
  position: absolute;
  top: -8px; left: 50%;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
}

/* ---------- Passar inte in (logik): 2x2-rutnät ---------- */
.fyrgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}
.fyrgrid .alt.bild {
  width: 100%;
  height: 96px;
  min-height: 96px;
  font-size: 56px;
}

/* Spegeln: gör andra sidan likadan (symmetri) */
.spegel-brada {
  display: grid;
  gap: 8px;
  justify-content: center;
  align-content: center;
}
.spegel-cell {
  border: 3px solid var(--kant);
  border-radius: 12px;
  background: var(--kort);
  padding: 0;
  box-shadow: 0 3px 0 var(--kant);
  transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.1s;
}
div.spegel-cell { box-shadow: none; } /* facithalvan ser inte tryckbar ut */
button.spegel-cell:active { transform: translateY(2px); box-shadow: none; }
.spegel-cell.fylld-bla  { background: var(--bla);  border-color: var(--bla); }
.spegel-cell.fylld-gron { background: var(--gron); border-color: var(--gron); }
.spegel-cell.fylld-gul  { background: var(--gul);  border-color: var(--gul); }
.spegel-cell.fylld-rosa { background: var(--rosa); border-color: var(--rosa); }
.spegel-cell.lyser { animation: spegelTand 0.4s ease; }
@keyframes spegelTand {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.spegel-cell.fel { animation: skaka 0.35s; border-color: var(--amber); }
.spegel-linje {
  width: 6px;
  border-left: 4px dashed var(--bla);
  justify-self: center;
  transition: border-color 0.3s;
}
.spegel-linje.klar { border-left-style: solid; border-left-color: var(--gron); }
.spegel-brada.vagrat .spegel-linje {
  width: auto;
  height: 6px;
  border-left: none;
  border-top: 4px dashed var(--bla);
  align-self: center;
  justify-self: stretch;
}
.spegel-brada.vagrat .spegel-linje.klar { border-top-style: solid; border-top-color: var(--gron); }

/* Skattkartan (logik) */
.skatt-instruktion {
  font-size: clamp(20px, 5.5vw, 28px);
  font-weight: 800;
  color: #274a6d;
  background: #fff;
  border-radius: 16px;
  padding: 12px 20px;
  margin-top: 8px;
  box-shadow: 0 4px 0 var(--kant), var(--skugga);
  max-width: 520px;
  line-height: 1.5;
}
.skatt-karta {
  position: relative;
  display: grid;
  gap: 6px; /* måste matcha SKATT_GAP i app.js */
}
.skatt-cell {
  position: relative;
  background: var(--kort);
  border: 3px solid var(--kant);
  border-radius: 12px;
}
.skatt-cell.sand { background: #fdf6e0; border-color: #eeddb4; } /* karta-känsla */
.skatt-figur {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 4px 6px rgba(60, 90, 130, 0.3));
  transition: transform 0.3s ease;
}
.skatt-diamant {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.skatt-diamant.visad { opacity: 1; }
.skatt-pilar { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.skatt-pil {
  width: 68px; height: 68px;
  border: 4px solid transparent;
  border-radius: 22px;
  background: var(--kort);
  font-size: 30px;
  box-shadow: 0 6px 0 var(--kant), var(--skugga);
  transition: transform 0.1s, border-color 0.2s, box-shadow 0.1s;
}
.skatt-pil:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--kant), var(--skugga); }
.skatt-pil.fel { animation: skaka 0.35s; border-color: var(--amber); }
.skatt-grav { min-width: 220px; font-size: 22px; }
.skatt-grav.fel { animation: skaka 0.35s; }
.alt.skatt-val {
  font-size: clamp(17px, 4.5vw, 22px);
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 16px 20px;
  max-width: 560px;
  line-height: 1.45;
  color: #274a6d;
}

/* ---------- Monsterfabriken ---------- */
.monster-kropp {
  position: relative;
  width: 186px;
  height: 186px;
  flex: 0 0 auto;
}
.monster-kropp svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 8px 12px rgba(60, 90, 130, 0.2));
}
/* Lugn glädje-wiggle vid rätt (±4°, 3 varv, totalt 1.2s – inget blinkande) */
@keyframes monsterDansa {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
}
.monster-kropp.dansar { animation: monsterDansa 0.4s ease-in-out 3; }
/* Långsam tilt fram/tillbaka vid fel (monstret "kliar sig" – snällt) */
@keyframes monsterKliar {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-3deg) translateY(2px); }
  70% { transform: rotate(2.5deg); }
}
.monster-kropp.kliar { animation: monsterKliar 1.1s ease-in-out; }

/* Placerade delar: hoppar mjukt dit från hyllan, tonas ut vid ångra-tryck */
.monster-plats {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 34px;
  line-height: 1;
  padding: 5px; /* lite större träffyta för ångra-trycket */
  cursor: pointer;
  z-index: 2;
  transition: transform 0.3s ease, opacity 0.25s ease;
  filter: drop-shadow(0 2px 3px rgba(40, 60, 90, 0.25));
}
.monster-plats.fran-hyllan {
  transform: translate(-50%, -50%) translateY(150px) scale(0.4);
  opacity: 0.4;
}
.monster-plats.bort {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  pointer-events: none;
}

/* Hyllan med deltyper */
.monster-hylla {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.monster-del {
  width: 72px;
  height: 72px;
  border: none;
  border-radius: 20px;
  background: var(--kort);
  font-size: 38px;
  box-shadow: 0 5px 0 var(--kant), var(--skugga);
  transition: transform 0.1s, box-shadow 0.1s;
}
.monster-del:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--kant), var(--skugga); }

/* Talorden i beställningen – versala och färgade för läsfokus */
.monster-talord {
  color: var(--bla-mork);
  font-weight: 800;
  letter-spacing: 1px;
}

/* Prickstöd: antalsringar under beställningen */
.monster-prickstod {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.monster-prickgrupp {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: 0 3px 0 var(--kant), var(--skugga);
}
.monster-prick-emoji { font-size: 22px; line-height: 1; }
.monster-ring {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--bla);
  background: transparent;
}

/* ---------- Rädda nallen ---------- */
.nalle-scen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 70px;
}
.nalle-scen .moln {
  font-size: 54px;
  line-height: 1;
  transition: filter 0.6s ease;
}
.nalle-scen .moln.gra1 { filter: grayscale(0.45); }
.nalle-scen .moln.gra2 { filter: grayscale(0.75); }
.nalle-scen .moln.gra3 { filter: grayscale(1) brightness(0.92); }
.nalle-scen .paraply { width: 120px; height: 120px; margin-top: -6px; }
.paraply-del {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: scale(0.85);
  transform-origin: bottom center;
}
.paraply-del.byggd { opacity: 1; transform: scale(1); }
.nalle-scen .nalle {
  font-size: 46px;
  line-height: 1;
  margin-top: -26px;
  transition: transform 0.5s ease;
}
.nalle-scen .nalle.jublar { transform: scale(1.25); }
/* Ordbilden (ledtråd tidigt, belöning vid klar på högre nivåer) */
.nalle-scen .fraga-bild {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 54px;
  line-height: 1;
}
.regndroppe {
  position: absolute;
  top: 48px;
  font-size: 24px;
  pointer-events: none;
  animation: falla 1.4s ease-in forwards;
}
@keyframes falla {
  from { transform: translateY(0); opacity: 0.9; }
  to   { transform: translateY(140px); opacity: 0; }
}
.nalle-tangenter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 560px;
}
.nalle-tangenter .bricka {
  width: auto;
  height: 60px;
  font-size: 30px;
  border-radius: 14px;
}

/* Stjärnbutiken */
.butik-disk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 520px;
}
.butik-plus {
  font-weight: 800;
  color: #274a6d;
  opacity: 0.7;
  padding: 0 10px;
}
.mynt-hog {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  min-height: 64px;
  width: 100%;
  background: #fff;
  border-radius: 22px;
  border: 4px solid transparent;
  padding: 10px 14px;
  box-shadow: 0 5px 0 var(--kant), var(--skugga);
}
.mynt-hog.fel { animation: skaka 0.35s; border-color: var(--amber); }
.mynt-i-hog {
  min-width: 52px;
  height: 52px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid var(--gul-mork);
  background: linear-gradient(180deg, #ffdd85, #ffca4d);
  color: #6b4d12;
  font-size: 22px;
  font-weight: 800;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s, transform 0.3s;
}
.mynt-i-hog.ny { opacity: 0; transform: translateY(-8px); }
.mynt-raknare {
  font-size: 22px;
  font-weight: 700;
  color: #274a6d;
  opacity: 0.75;
}
.alt.tal.mynt-knapp {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--gul);
  background: linear-gradient(180deg, #fff6df, #ffe9b0);
  box-shadow: 0 6px 0 var(--gul-mork), var(--skugga);
  font-size: 32px;
  color: #6b4d12;
}
.alt.tal.mynt-knapp:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--gul-mork), var(--skugga); }
.betala-knapp { font-size: 22px; padding: 14px 30px; }
.betala-knapp.fel { animation: skaka 0.35s; }
.fraga-bild.butik-sald {
  transition: transform 0.6s ease, opacity 0.6s ease;
  transform: translateY(46px) scale(0.8);
  opacity: 0.85;
}

/* ---------- Ordverkstan (sammansatta ord) ---------- */
.gryta-scen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.gryta {
  font-size: 72px;
  line-height: 1.1;
  filter: drop-shadow(0 8px 12px rgba(60, 90, 130, 0.2));
}
.verkstad-val {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  width: 100%;
  max-width: 560px;
}
.verkstad-kort {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 112px;
  min-height: 104px; /* stor träffyta */
  padding: 12px 8px 10px;
  border: 4px solid transparent;
  border-radius: 22px;
  background: var(--kort);
  box-shadow: 0 5px 0 var(--kant), var(--skugga);
  transition: transform 0.1s, border-color 0.2s, box-shadow 0.1s;
}
button.verkstad-kort:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--kant), var(--skugga); }
.verkstad-bild { font-size: 44px; line-height: 1.15; }
.verkstad-ord { font-size: 20px; font-weight: 800; color: #274a6d; }
.verkstad-kort.ledtrad { border-color: #b5dfbd; } /* stilla ledtråd – samma mönster som dialogerna */
.verkstad-kort.vald { border-color: var(--gul); }  /* lugn gul markering, ingen puls */
.verkstad-kort.fel { animation: skaka 0.35s; border-color: var(--amber); }
.verkstad-kort.i-grytan { box-shadow: 0 3px 0 var(--kant); } /* fasta a-delen ser inte tryckbar ut */
.verkstad-kort.kokar {
  transition: transform 0.7s ease, opacity 0.7s ease;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .verkstad-kort.kokar { transition: opacity 0.3s ease; } /* ingen flygtur – bara mjuk uttoning */
}
.nyord-visning {
  min-height: 54px;
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 800;
  letter-spacing: 2px;
  color: #274a6d;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.nyord-visning.visas { opacity: 1; }

/* ---------- Deckarklubben: vem tog kakan? ---------- */
.deckare-rad { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.deckare-figur { position: relative; }
.deckare-figur.alt.bild { width: 120px; height: 120px; font-size: 62px; }
.deckare-attrs { position: absolute; top: -10px; right: -6px; display: flex; gap: 2px; }
.deckare-attr { font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(60, 90, 130, 0.25)); }
.deckare-figur.friad { opacity: .35; filter: grayscale(1); transition: opacity .4s ease, filter .4s ease; }
#deckare-ledtrad { transition: opacity .4s ease; font-size: 26px; }
@media (max-width: 480px) {
  .deckare-figur.alt.bild { width: 96px; height: 96px; font-size: 50px; }
  .deckare-attr { font-size: 18px; }
}

/* ---------- STJÄRNKOMPIS (molndjuret som växer av stjärnor) ---------- */
.kompis-scen {
  position: relative;
  display: inline-block;
  margin-bottom: 46px; /* plats för klistermärkes-bågen under boet */
}
#kompis-figur {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  min-width: 200px;
  min-height: 200px;
  filter: drop-shadow(0 10px 16px rgba(60, 90, 130, 0.2));
}
/* Långsam andning – inget blinkande. */
.kompis-figur-svg { display: block; animation: kompisAndas 4s ease-in-out infinite alternate; }
@keyframes kompisAndas { to { transform: translateY(-6px); } }
/* Ögonen blinkar stilla var 6:e sekund. */
.kompis-ogon circle {
  animation: kompisBlink 6s infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes kompisBlink { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(0.1); } }
/* Klapp: mjuk puls, en gång (klassen tas bort på animationend). */
#kompis-figur.klappad { animation: kompisKlapp 0.6s ease; }
@keyframes kompisKlapp { 50% { transform: scale(1.05); } }
/* Växa-ögonblicket: mjuk intoning, en gång. */
#kompis-figur.vaxer { animation: kompisVaxer 1.2s ease; }
@keyframes kompisVaxer { from { transform: scale(0.9); opacity: 0.4; } }
/* Klistermärkena i en stilla båge runt boet (statiska, inga rörelser). */
.kompis-pynt { position: absolute; left: 50%; bottom: -8px; width: 0; height: 0; pointer-events: none; }
.kompis-pynt span { position: absolute; margin-left: -10px; font-size: 20px; }
.kompis-namn { font-size: clamp(26px, 6vw, 40px); margin: 6px 0 4px; }
.kompis-stjarnor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  margin-top: 14px;
  font-weight: 800;
  color: var(--bla-djup);
  background: rgba(255, 255, 255, 0.75);
  border: 3px solid #ffe3a1;
  border-radius: 999px;
  padding: 8px 20px;
  box-shadow: var(--skugga);
}
/* Adoptionen (första besöket) */
.kompis-rubrik { font-size: clamp(26px, 6vw, 40px); margin: 0 0 10px; }
.kompis-adoption-agg {
  font-size: 76px;
  line-height: 1.2;
  margin: 4px 0;
  filter: drop-shadow(0 8px 14px rgba(60, 90, 130, 0.25));
}
.kompis-fraga { font-size: 20px; font-weight: 700; color: var(--bla-djup); margin: 6px 0 14px; }
.kompis-namnval { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.kompis-namnval .stor-knapp { margin: 0; max-width: none; font-size: 24px; padding: 18px 10px; }

/* Upplåsningssystemet: låsta spel visas som present-mysterium */
.stor-knapp.last {
  background: linear-gradient(180deg, #c6d2df, #adbccb);
  box-shadow: 0 7px 0 #93a6b8, var(--skugga);
  text-shadow: none;
  color: #51677c;
}
.uppl-banner {
  background: linear-gradient(180deg, #fff3d1, #ffe6a3);
  border: 3px solid var(--gul-mork);
  border-radius: 18px;
  padding: 14px 18px;
  font-size: 20px;
  font-weight: 800;
  color: #6b4d12;
  margin: 4px auto 16px;
  max-width: 360px;
  box-shadow: 0 5px 0 var(--gul-mork), var(--skugga);
  animation: prickpopp 0.5s ease;
}
/* Dagens tips – Mollys mjuka pekpinne mot det som behöver övas */
.dagens-tips {
  display: inline-block;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--bla-djup);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 700;
  margin-top: 14px;
  box-shadow: 0 4px 0 var(--kant), var(--skugga);
}
.dagens-tips:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kant); }

/* UX-pass: stäng-kryss i rutor + scrollbara menyskärmar */
.ruta { position: relative; }
.ruta-stang {
  position: absolute;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: #eef4fa;
  color: var(--bla-mork);
  font-size: 18px;
  font-weight: 700;
  z-index: 2;
}
.ruta-stang:active { transform: scale(0.9); }
/* Menyskärmar får scrolla – skottsäkert: block-layout i stället för
   flex-centrering (flex + margin:auto klipper innehåll som är högre än
   skärmen i flera webbläsare, och toppen blir onåbar). */
#hem.aktiv, #klar.aktiv, #profil.aktiv, #kategori.aktiv, #kompis.aktiv {
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#hem .hem-innehall, #profil .hem-innehall, #kategori .hem-innehall, #kompis .hem-innehall {
  margin: 0 auto;
  padding-top: max(20px, 4vh);
  padding-bottom: 64px;
}

/* ---------- Brevduvan (diktamen) ---------- */
.duva-scen {
  font-size: 3rem;
  line-height: 1;
  transition: transform 1.2s ease-in;
}
.duva-scen.flyger { transform: translateX(120vw) translateY(-30%); }

/* ---------- Trollkarlsskolan – Förvandlaren ---------- */
.troll-scen { display: flex; align-items: center; justify-content: center; gap: 16px; }
.troll-bild {
  font-size: clamp(56px, 15vw, 92px);
  line-height: 1.15;
  filter: drop-shadow(0 6px 10px rgba(60, 90, 130, 0.2));
}
.troll-pil { font-size: 40px; }

.trollbrickor { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.trollbricka {
  width: 86px; height: 86px;
  border: none; border-radius: 20px;
  background: linear-gradient(180deg, #a99bf0, #8d7ce0);
  color: #fff;
  font-size: 48px; font-weight: 800;
  box-shadow: 0 6px 0 #6f5cc4, var(--skugga);
  transition: transform 0.25s ease, box-shadow 0.1s, opacity 0.25s ease, background 0.2s;
}
.trollbricka:active { transform: translateY(4px); box-shadow: 0 2px 0 #6f5cc4; }
.trollbricka.vald {
  background: linear-gradient(180deg, #ffdd85, #ffca4d);
  color: #6b4d12;
  box-shadow: 0 6px 0 var(--gul-mork), var(--skugga);
}
.trollbricka.daempad { opacity: 0.4; pointer-events: none; box-shadow: none; }
.trollbricka.tom {
  background: rgba(255, 255, 255, 0.85);
  border: 4px dashed #c5b8f0;
  color: #b9aaf2;
  font-size: 30px;
  box-shadow: none;
  display: flex; align-items: center; justify-content: center;
}
.trollbricka.borta { transform: scale(0.2); opacity: 0; }
.trollbricka.ny {
  background: linear-gradient(180deg, #8fd694, #6cc070);
  box-shadow: 0 6px 0 var(--gron-mork), var(--skugga);
  animation: trollglid 0.45s ease;
}
.trollbricka.fel { animation: skaka 0.35s; }
.trollbricka.puls { animation: mjukpuls 2.4s ease-in-out infinite; } /* mjuk ledtråd – inget blink */
@keyframes trollglid { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }

.trollbok-rad {
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  padding: 8px 16px;
  font-size: 22px;
  letter-spacing: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .trollbricka.puls { animation: none; }
  .trollbricka.ny { animation: none; }
}

/* ---------- Kluriga djurparken ---------- */
:root {
  --dp-rosa: #f7c8de;
  --dp-gul: #ffe3a3;
  --dp-mint: #c9ecd2;
  --dp-lila: #ddd2f5;
  --dp-bla: #c7e3f7;
}
.djurpark-scen {
  min-height: 44px;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
}
.djurpark-figur { width: clamp(110px, 30vw, 170px); aspect-ratio: 1; display: block; }
/* Djuret kliver fram: mjuk fade + liten glid – inga blinkeffekter */
.djurpark-fram {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.djurpark-fram.visas { opacity: 1; transform: none; }
.alt.djurpark-skylt {
  padding: 18px 24px;
  font-size: clamp(24px, 6.5vw, 36px);
  font-weight: 800;
  letter-spacing: 3px;
  color: #274a6d;
  background: #fffaf0;
  border-color: #ecdcc0;
}
.djurpark-lada { font-size: 64px; line-height: 1; }
.djurpark-lada.gungar { animation: dp-gunga 2.6s ease-in-out infinite; } /* mjuk gungning – lugn */
@keyframes dp-gunga { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .djurpark-lada.gungar { animation: none; } }
/* Multigraf (LL/NG) behöver bredare rutor och brickor */
.djurpark-slots .slot { width: auto; min-width: 76px; padding: 0 12px; }
.djurpark-brickor .bricka { width: auto; min-width: 86px; height: 86px; padding: 0 16px; font-size: 40px; }
.djurpark-nyskylt {
  font-weight: 800; letter-spacing: 3px; font-size: 24px;
  color: var(--text);
  background: #fffaf0; border: 2px solid #ecdcc0; border-radius: 10px;
  padding: 4px 14px;
}
.djurpark-zoo { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 8px 0 14px; }
.djurpark-zoo-djur {
  background: var(--kort); border: 2px solid var(--kant); border-radius: 16px;
  padding: 10px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: var(--skugga);
  font: inherit;
}
.djurpark-zoo-djur .djurpark-figur { width: 84px; }
.djurpark-zoo-namn { font-weight: 800; letter-spacing: 2px; font-size: 15px; color: var(--bla-djup); }
.djurpark-zoo-rubrik { font-size: 22px; font-weight: 800; color: var(--bla-djup); text-align: center; margin: 6px 0 2px; }
.djurpark-start { margin: 8px auto 0; display: block; }

/* ---------- Bergsäventyret ---------- */
.berg-topp {
  font-size: 34px;
  letter-spacing: 6px;
  filter: drop-shadow(0 4px 6px rgba(60, 90, 130, 0.2));
  transition: transform 0.5s ease;
}
.berg-topp.firad { transform: scale(1.15); }
.berg-stig {
  position: relative;
  display: grid;
  gap: 10px;      /* måste matcha BERG_GAP i app.js */
  padding: 14px;  /* måste matcha BERG_PAD i app.js */
  border-radius: 26px;
  box-shadow: var(--skugga);
}
.berg-stig.skog { background: linear-gradient(180deg, #eaf6ff 0%, #ddefd9 100%); }
.berg-stig.sno  { background: linear-gradient(180deg, #eef6ff 0%, #fbfdff 100%); }
.berg-stig.blom { background: linear-gradient(180deg, #fdeff6 0%, #fff7e6 100%); }
.berg-sten {
  position: relative;
  border: 3px solid var(--kant);
  border-radius: 18px;
  background: var(--kort);
  font-weight: 800;
  color: #274a6d;
  box-shadow: 0 4px 0 var(--kant), var(--skugga);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.1s, border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.berg-sten .berg-tal { font-size: clamp(18px, 5vw, 28px); }
.berg-sten:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kant), var(--skugga); }
.berg-sten.trampad { background: #e7f7e8; border-color: var(--gron); box-shadow: 0 4px 0 #b5dfbd, var(--skugga); }
.berg-sten.lucka { background: #fff6dd; border-color: var(--gul); color: var(--amber-mork); }
.berg-sten.fylld .berg-tal { animation: bergTand 0.4s ease; }
@keyframes bergTand {
  0% { transform: scale(0.5); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.berg-sten.nasta { border-color: var(--bla); box-shadow: 0 4px 0 #cddcec, 0 0 0 4px rgba(91, 155, 213, 0.35), var(--skugga); }
.berg-sten.fel { animation: skaka 0.35s; border-color: var(--amber); }
.berg-dekor { position: absolute; top: -9px; right: -7px; font-size: 17px; line-height: 1; pointer-events: none; }
.berg-pjas {
  position: absolute;
  top: 0; left: 0;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  transition: transform 0.4s ease;
  filter: drop-shadow(0 3px 5px rgba(60, 90, 130, 0.3));
}
.berg-panel { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.berg-info { font-size: 22px; font-weight: 700; color: #274a6d; opacity: 0.85; min-height: 28px; text-align: center; }
.berg-snurra {
  width: 108px; height: 108px;
  border: 4px solid transparent;
  border-radius: 50%;
  background: linear-gradient(180deg, #6faade, #4f92cf);
  color: #fff;
  font-size: 44px; font-weight: 800;
  box-shadow: 0 6px 0 var(--bla-mork), var(--skugga-stor);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s, opacity 0.3s, box-shadow 0.1s;
}
.berg-snurra:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--bla-mork), var(--skugga); }
.berg-snurra.vilar { opacity: 0.55; }
.berg-snurr-tal { transition: opacity 0.15s ease; }
.berg-snurr-tal.byter { opacity: 0; }
.berg-val .alt.tal { width: 104px; height: 96px; font-size: 44px; } /* rymmer "100" */

/* ===== Trollbron – tiobron över floden ===== */
.tiobro-scen {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 440px;
  margin: 6px auto 0;
  padding: 12px 10px 16px;
  background: linear-gradient(180deg, #e9f5ff 58%, #bfe0f7 58%); /* himmel över flod */
  border: 2px solid var(--kant);
  border-radius: 16px;
}
.tiobro-strand { display: flex; flex-direction: column; align-items: center; font-size: 1.7rem; }
.tiobro-trollwrap { display: block; line-height: 0; }
.tiobro-troll { width: 54px; height: 54px; }
.tiobro-troll.nyser { animation: tiobroNys 0.6s ease; }
@keyframes tiobroNys {
  30% { transform: rotate(-7deg) scale(0.93); }
  60% { transform: rotate(4deg) scale(1.03); }
}
.tiobro-bro-holk { flex: 1; min-width: 0; }
.tiobro-bro { display: block; width: 100%; max-width: 300px; height: auto; aspect-ratio: 276 / 117; margin: 0 auto; }
.tiobro-ruta {
  fill: #fdf6ec;
  stroke: #c99e63;
  stroke-width: 3;
  stroke-dasharray: 7 6;
  transition: fill 0.45s ease, stroke 0.45s ease;
}
.tiobro-ruta.fylld { fill: #c98d4f; stroke: #a9713a; stroke-dasharray: none; }
.tiobro-bro.hel { filter: drop-shadow(0 0 12px rgba(255, 209, 102, 0.75)); transition: filter 0.6s ease; }
.tiobro-figur { position: absolute; left: 12px; bottom: 8px; font-size: 1.9rem; z-index: 2; transition: transform 1.5s ease; }
.tiobro-hog { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 12px 0 2px; min-height: 42px; }
.tiobro-planka {
  width: 64px;
  height: 38px;
  padding: 0;
  background: linear-gradient(180deg, #d8a568, #c08144);
  border: 3px solid #a9713a;
  border-radius: 9px;
  box-shadow: var(--skugga);
  cursor: pointer;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.tiobro-planka.lagd { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.tiobro-planka.fel { animation: skaka 0.35s; }
.tiobro-tioplus {
  width: max-content;
  margin: 8px auto;
  padding: 6px 16px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--bla-djup);
  background: var(--kort);
  border: 2px solid var(--kant);
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.tiobro-tioplus.visad { opacity: 1; }
.tiobro-fragor { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 8px; width: 100%; }
.tiobro-stod { width: 100%; }
.tiobro-hjalp {
  margin: 10px auto 0;
  display: block;
  padding: 9px 16px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--bla-djup);
  background: var(--kort);
  border: 2px solid var(--kant);
  border-radius: 12px;
  box-shadow: var(--skugga);
  cursor: pointer;
}
.tiobro-okarta { display: flex; gap: 18px; justify-content: center; align-items: flex-end; margin-top: 14px; font-size: 1.5rem; }
.tiobro-o { position: relative; display: flex; flex-direction: column; align-items: center; }
.tiobro-o .har { position: absolute; top: -20px; font-size: 1.05rem; }
.tiobro-modellrad { margin: 10px auto 0; text-align: center; font-size: 1.7rem; font-weight: 800; color: var(--text); opacity: 0; transition: opacity 0.6s ease; }
.tiobro-modellrad.visad { opacity: 1; }

/* ---------- Tankelådan (schemabaserad instruktion) ---------- */
.tanke-symbol {
  font-size: clamp(52px, 13vw, 76px);
  line-height: 1.15;
  filter: drop-shadow(0 8px 12px rgba(60, 90, 130, 0.2));
  transition: transform 0.5s ease, opacity 0.5s ease; /* "flyttar in" i lådan */
}
.tanke-bild {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  font-size: 32px;
  max-width: 440px;
}
.tanke-bild .borta { opacity: 0.3; filter: grayscale(1); }
.tanke-bild-grupp { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px; border-radius: 14px; }
.tanke-bild-grupp.ny { background: #eafaf0; border: 2px dashed #b5dfbd; }
.tanke-lador {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  width: 100%;
  max-width: 560px;
}
.tankelada {
  flex: 1 1 140px;
  max-width: 170px;
  min-height: 140px;
  border: 4px solid transparent;
  border-radius: 24px;
  background: var(--kort);
  box-shadow: 0 6px 0 var(--kant), var(--skugga);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  font-family: inherit;
  transition: transform 0.1s, border-color 0.2s, background 0.2s, box-shadow 0.1s;
}
.tankelada:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--kant), var(--skugga); }
.tankelada.ratt { border-color: var(--gron); background: #e7f7e8; }
.tankelada.fel { animation: skaka 0.35s; border-color: var(--amber); }
.tankelada svg { width: 62px; height: 62px; }
.tankelada-namn { font-weight: 800; font-size: 17px; color: #274a6d; }
.tanke-schema { display: flex; flex-direction: column; align-items: center; margin-top: 6px; }
.tanke-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f2f7fc;
  border: 2px solid var(--kant);
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 800;
  color: #274a6d;
  margin-bottom: 10px;
}
.tanke-chip svg { width: 26px; height: 26px; }
.tanke-rad { display: flex; gap: 34px; justify-content: center; }
.tanke-linjer { width: 220px; height: 34px; display: block; }
.tanke-lucka {
  width: 116px;
  border: 3px solid var(--kant);
  border-radius: 18px;
  background: var(--kort);
  box-shadow: 0 4px 0 var(--kant), var(--skugga);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px 10px;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s;
}
.tanke-lucka.oppen { border-style: dashed; background: #f7fafd; }
.tanke-lucka.malet { border-style: dashed; border-color: var(--gul-mork); background: #fff9e8; }
.tanke-lucka.fylld { border-style: solid; border-color: var(--gron); background: #e7f7e8; }
.tanke-lucka.fel { animation: skaka 0.35s; border-color: var(--amber); }
.tanke-lucka-etikett { font-size: 14px; font-weight: 700; opacity: 0.75; }
.tanke-lucka-varde {
  font-size: 34px;
  font-weight: 800;
  color: #274a6d;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.tanke-brickor { display: flex; gap: 16px; justify-content: center; margin-top: 12px; }
.tanke-bricka {
  width: 76px;
  height: 76px;
  border: 4px solid transparent;
  border-radius: 20px;
  background: var(--kort);
  box-shadow: 0 6px 0 var(--kant), var(--skugga);
  font-size: 34px;
  font-weight: 800;
  color: #274a6d;
  font-family: inherit;
  transition: transform 0.15s, border-color 0.2s, opacity 0.3s;
}
.tanke-bricka.vald { border-color: var(--bla); background: #eaf4fd; transform: translateY(-5px); }
.tanke-bricka.anvand { opacity: 0; pointer-events: none; }
.tanke-staplar { display: flex; gap: 22px; align-items: flex-end; justify-content: center; }
.tanke-kolumn { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tanke-stapel { display: flex; flex-direction: column-reverse; gap: 3px; align-items: center; }
.tanke-block { width: 36px; height: 15px; border-radius: 6px; background: var(--bla); }
.tanke-block.skillnad { background: var(--amber); }
.tanke-stapel-okand {
  width: 42px;
  height: 76px;
  border: 3px dashed var(--kant);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: #274a6d;
}
@media (max-width: 430px) {
  .tanke-rad { gap: 16px; }
  .tanke-lucka { width: 100px; }
  .tanke-staplar { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tanke-symbol, .tanke-bricka { transition: none; }
  .tankelada.fel, .tanke-lucka.fel { animation: none; }
}

/* ---------- Ändelsemaskinen ---------- */
.andelse-scen { min-height: 8px; display: flex; justify-content: center; }
.andelse-bild {
  font-size: clamp(48px, 13vw, 76px);
  line-height: 1.1;
  filter: drop-shadow(0 6px 10px rgba(60, 90, 130, 0.2));
}
.andelse-maskin {
  width: 100%; max-width: 440px;
  margin: 6px auto 2px;
  background: linear-gradient(180deg, #dcebfa, #c7ddf3);
  border: 4px solid #b3ccea;
  border-radius: 28px;
  box-shadow: 0 6px 0 #a7c1e2, var(--skugga);
  padding: 18px 16px 16px;
}
.maskin-rad { display: flex; align-items: center; justify-content: center; gap: 10px; }
.maskin-fack {
  min-width: 92px; min-height: 92px;
  padding: 8px 12px;
  background: #fff;
  border-radius: 18px;
  border: 4px solid #b3ccea;
  box-shadow: inset 0 2px 6px rgba(60, 90, 130, 0.12);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s;
}
.maskin-stam {
  font-size: clamp(26px, 7vw, 40px);
  font-weight: 800; letter-spacing: 1px;
  color: #274a6d;
}
.maskin-and {
  font-size: clamp(24px, 6.5vw, 36px);
  font-weight: 800; color: #8d7ce0;
}
.andelse-maskin.stansar .maskin-and-fack { border-color: var(--gron); }
.andelse-maskin.stansar .maskin-and { color: var(--gron-mork); animation: maskinNed 0.4s ease; }
@keyframes maskinNed { from { transform: translateY(-14px); opacity: 0.3; } }

/* Det stora hjulet – snurrar mjukt ETT halvvarv vid stansen (ingen loop, inget blink) */
.maskin-hjul {
  width: clamp(52px, 15vw, 74px); height: auto;
  transform-origin: center;
  transition: transform 0.9s cubic-bezier(0.4, 0.1, 0.2, 1);
}
.andelse-maskin.stansar .maskin-hjul { transform: rotate(200deg); }

/* Utslaget: det färdiga ordet glider fram mjukt när maskinen stansat */
.maskin-utslag {
  margin-top: 14px; min-height: 56px;
  background: rgba(255, 255, 255, 0.55);
  border: 3px dashed #b3ccea;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 12px;
}
.maskin-ord {
  font-size: clamp(30px, 9vw, 52px);
  font-weight: 800; letter-spacing: 1px;
  color: #274a6d;
  opacity: 0; transform: translateY(8px) scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.andelse-maskin.stansar .maskin-ord { opacity: 1; transform: none; }

/* Ändelsebrickorna (stora träffytor, ärver .alt-basen) */
.andelse-brickor { margin-top: 4px; }
.alt.andelse-bricka {
  padding: 16px 26px;
  min-width: 96px;
  font-size: clamp(28px, 7.5vw, 40px);
  font-weight: 800; letter-spacing: 1px;
  color: #6f5cc4;
}
.alt.andelse-bricka.ratt { color: var(--gron-mork); }

@media (prefers-reduced-motion: reduce) {
  .maskin-hjul, .maskin-ord { transition: none; }
  .andelse-maskin.stansar .maskin-and { animation: none; }
}

/* ---------------------------------------------------------------------------
   Teaterscenen: enkel ridå + strålkastare. Statisk under övning; ridån glider
   mjukt åt sidan vid föreställningen (opacity/transform, inga blinkeffekter).
--------------------------------------------------------------------------- */
.teater-scen {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 6px auto 4px;
  aspect-ratio: 16 / 10;         /* geometrin ägs av CSS – aldrig procenthöjd */
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 34%, #3a4a6b 0%, #26324c 60%, #1c2740 100%);
  box-shadow: var(--skugga);
  display: flex; align-items: center; justify-content: center;
}
.teater-ljus {                    /* strålkastarcirkel */
  position: absolute; left: 50%; top: 10%;
  width: 78%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,241,196,0.42) 0%, rgba(255,241,196,0.12) 42%, transparent 68%);
  pointer-events: none; z-index: 1;
}
.teater-golv {
  position: absolute; left: 0; right: 0; top: 78%; bottom: 0;
  background: linear-gradient(180deg, #6b4a2f 0%, #4d3320 100%);
  z-index: 1;
}
.teater-replik {
  position: relative; z-index: 2;
  max-width: 74%; text-align: center;
  color: #fff; font-weight: 800;
  font-size: clamp(20px, 5.6vw, 30px);
  line-height: 1.32; letter-spacing: 0.3px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
  padding: 4px 8px;
}
.teater-ridao {
  position: absolute; top: 0; bottom: 0; width: 20%;
  z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, #8e1f2f 0%, #b23347 45%, #8e1f2f 100%);
  box-shadow: inset 0 0 22px rgba(0,0,0,0.35);
  transition: transform 0.9s ease;
}
.teater-ridao::before {           /* mjuka vertikala veck */
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.14) 0 6px, rgba(255,255,255,0.06) 6px 12px);
}
.teater-ridao-v { left: 0;  border-radius: 0 10px 10px 0; }
.teater-ridao-h { right: 0; border-radius: 10px 0 0 10px; }
.teater-scen.uppe .teater-ridao-v { transform: translateX(-92%); }
.teater-scen.uppe .teater-ridao-h { transform: translateX(92%); }
@media (prefers-reduced-motion: reduce) { .teater-ridao { transition: none; } }

.teater-applad {
  text-align: center; letter-spacing: 8px;
  font-size: clamp(28px, 8vw, 44px);
  margin-top: 8px;
  opacity: 0; transition: opacity 0.6s ease;
}
.teater-applad.visas { opacity: 1; }

.teater-ordval { flex-wrap: wrap; }
.alt.teater-ord {
  width: auto; height: auto;
  padding: 16px 22px;
  font-size: clamp(20px, 5.5vw, 30px);
  font-weight: 800; letter-spacing: 2px;
  color: #274a6d; background: #fffaf0; border-color: #ecdcc0;
}
.teater-nasta, .teater-laste, .teater-igen { margin-top: 10px; }

.teater-panel-replik {
  font-size: 16px; font-style: italic; color: var(--bla-mork);
  background: #fff8ee; border: 1px solid #ecdcc0; border-radius: 10px;
  padding: 8px 12px; margin: 6px 0;
}

/* ---------- Meningståget (typkod: meningstag) ---------- */
.mtag-scen {
  display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start; width: 100%; max-width: 520px;
}
.mtag-kartag {
  display: flex; align-items: center; gap: 8px;
  animation: mtagRullaIn 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.mtag-lok { font-size: 40px; line-height: 1; }
.mtag-vagn {
  position: relative;
  background: linear-gradient(180deg, #ffffff, #eef5fc);
  border: 3px solid var(--kant);
  border-radius: 14px;
  padding: 10px 18px;
  font-size: 22px; font-weight: 700; color: var(--text);
  box-shadow: 0 4px 0 var(--kant);
}
.mtag-vagn::before, .mtag-vagn::after {
  content: ''; position: absolute; bottom: -9px;
  width: 14px; height: 14px; border-radius: 50%; background: #8aa0b5;
}
.mtag-vagn::before { left: 20px; }
.mtag-vagn::after  { right: 20px; }
@keyframes mtagRullaIn { from { transform: translateX(-44px); opacity: 0; } to { transform: none; opacity: 1; } }

.mtag-spar { width: 100%; max-width: 560px; overflow: hidden; padding: 6px 0 14px; }
.mtag-langtag {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.mtag-langtag.rullar { transform: translateX(125%); }
.mtag-slot {
  min-width: 74px; height: 56px;
  border: 3px dashed #c5d4e3; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--text);
  background: rgba(255, 255, 255, 0.85); padding: 0 12px;
}
.mtag-slot.fylld {
  border-style: solid; border-color: var(--gron);
  background: #eafaf0; animation: prickpopp 0.3s ease;
}

.mtag-brickor { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mtag-bricka {
  border: none; border-radius: 16px;
  background: linear-gradient(180deg, #f4f8fc, #e3edf6);
  color: var(--text);
  font-size: 22px; font-weight: 700;
  padding: 14px 18px; min-height: 54px;
  box-shadow: 0 5px 0 #cdd9e6, var(--skugga);
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.2s;
}
.mtag-bricka:active { transform: translateY(4px); box-shadow: 0 1px 0 #cdd9e6; }
.mtag-bricka.anvand { opacity: 0.25; pointer-events: none; box-shadow: none; }
.mtag-bricka.fel { animation: skaka 0.35s; }
/* Diskret färgkodning per funktion (grammatikstöd) – tonas ut på svår nivå */
.mtag-bricka.vem  { background: linear-gradient(180deg, #dcebfa, #c6ddf3); box-shadow: 0 5px 0 #a9c8e6, var(--skugga); }
.mtag-bricka.gor  { background: linear-gradient(180deg, #e3f5e5, #cdebd0); box-shadow: 0 5px 0 #a9d9ad, var(--skugga); }
.mtag-bricka.bind { background: linear-gradient(180deg, #fceede, #f7ddc0); box-shadow: 0 5px 0 #e6c79c, var(--skugga); }

@media (prefers-reduced-motion: reduce) {
  .mtag-kartag { animation: none; }
  .mtag-langtag { transition: opacity 0.4s; }
  .mtag-langtag.rullar { transform: none; opacity: 0; }
}

/* ---------- Ordsamlaren 🦋 ---------- */
.ordskrin-rubrik {
  font-size: 22px; font-weight: 800; color: var(--bla-djup);
  text-align: center; margin: 6px 0 2px;
}
.ordskrin {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin: 8px 0 14px;
}
.ordskrin-fjaril {
  background: var(--kort); border: 2px solid var(--kant); border-radius: 16px;
  padding: 10px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: var(--skugga); font: inherit;
}
.ordskrin-emoji { font-size: 40px; line-height: 1; }
.ordskrin-namn {
  font-weight: 800; letter-spacing: 1px; font-size: 15px; color: var(--bla-djup);
}
.ordskrin-start { margin: 8px auto 0; display: block; }

/* Betydelse-/menings-alternativ: hela meningar, så mindre text som får radbrytas */
.alt.ordval.ordsamla-mening {
  font-size: clamp(19px, 4.6vw, 26px);
  letter-spacing: 0; font-weight: 700; line-height: 1.25;
  padding: 16px 22px; max-width: 300px; text-align: center;
}

/* Produktiv framplockning: hör-facit + jag-sa-det, staplade */
.ordsamla-knappar {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; width: 100%; max-width: 340px;
}
.ordsamla-fortsatt { margin-top: 4px; }

/* En fjäril landar oväntat – mjuk glid in/ut längst upp, aldrig blink */
.ordsamla-fjaril {
  position: fixed; top: 14px; left: 50%;
  transform: translate(-50%, -16px);
  background: var(--kort);
  border: 2px solid var(--lila);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 800; letter-spacing: 1px; color: var(--bla-djup);
  box-shadow: var(--skugga);
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none; z-index: 60;
}
.ordsamla-fjaril.ny { border-color: var(--gron); }
.ordsamla-fjaril.visas { opacity: 1; transform: translate(-50%, 0); }

/* ===== Gungbrädan – likhetstecknet som balans (cirkus) ===== */
.gungbrada-scen { width: 100%; max-width: 460px; margin: 6px auto 0; }
.gungbrada-vippa {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 2;          /* form via aspect-ratio, aldrig procenthöjd */
  display: flex;
  align-items: center;
  justify-content: center;
}
.gungbrada-balk {
  position: absolute;
  left: 4%; right: 4%;
  bottom: 22%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 6px;
  padding: 0 8px 12px;
  border-radius: 12px;
  background: linear-gradient(#e7b986, #c98d4f);
  border-bottom: 6px solid #a9713a;
  box-shadow: var(--skugga);
  transform-origin: 50% 100%;   /* roterar kring stödet (fulcrum) */
  transform: rotate(0deg);
  transition: transform 0.85s cubic-bezier(.34, 1.1, .5, 1); /* lugnt, aldrig hastigt */
}
.gungbrada-sida { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gungbrada-djur { font-size: 1.9rem; line-height: 1; transition: transform 0.4s ease; }
.gungbrada-djur.glad { animation: gungHopp 0.7s ease 2; } /* litet lyckligt hopp */
@keyframes gungHopp {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-14px); }
}
.gungbrada-rad { display: flex; gap: 6px; }
.gungbrada-kloss {
  min-width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 800;
  border-radius: 12px;
  color: #fff;
  background: var(--bla);
  box-shadow: 0 3px 0 var(--bla-mork);
  border: none;
}
.gungbrada-kloss.tal { background: var(--bla); }
.gungbrada-kloss.tom {
  background: rgba(255, 255, 255, 0.55);
  border: 3px dashed var(--bla-mork);
  box-shadow: none;
  color: var(--bla-mork);
  cursor: pointer;
}
.gungbrada-kloss.tom::after { content: '+'; opacity: 0.35; font-size: 1.4rem; }
.gungbrada-kloss.tom.provad::after { content: ''; }
.gungbrada-kloss.lagd { animation: gungLagd 0.4s ease; }
@keyframes gungLagd {
  from { transform: scale(0.6); opacity: 0.3; }
  to { transform: scale(1); opacity: 1; }
}
.gungbrada-kloss.fel { animation: skaka 0.35s; }
.gungbrada-stod {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 34px solid transparent;
  border-right: 34px solid transparent;
  border-bottom: 46px solid #8a5a2b;
}

/* Skriven ekvation under brädan – fylls i live */
.gungbrada-ekv {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: center;
  margin: 16px auto 4px;
  font-size: 34px; font-weight: 800; color: #274a6d;
}
.gungbrada-ekv.sluten { margin: 8px auto 0; font-size: 30px; }
.gungbrada-ekv .op { color: var(--text); opacity: 0.7; }
.gungbrada-ekv .op.lika { color: var(--gron-mork); opacity: 1; }
.gungbrada-lucka {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px;
  border: 3px dashed var(--bla); border-radius: 12px;
  color: var(--bla-mork);
}
.gungbrada-lucka.fylld {
  border-style: solid; background: #eafaf0;
  border-color: var(--gron); color: var(--gron-mork);
}

/* Förråd med talklossar (tryck-tryck) */
.gungbrada-forrad {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-top: 14px;
}
.gungbrada-kloss.forrad {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gungbrada-kloss.forrad:active { transform: translateY(3px); box-shadow: 0 0 0 var(--bla-mork); }
.gungbrada-kloss.forrad.vald {
  background: var(--gul); color: #6b4d12;
  box-shadow: 0 3px 0 var(--gul-mork), 0 0 0 4px rgba(255, 209, 102, 0.5);
}

/* Sant/falskt – ja/nej */
.gungbrada-jn { display: flex; gap: 14px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.gungbrada-jnknapp {
  min-height: 56px; padding: 0 22px;
  font-size: 1.2rem; font-weight: 800;
  border-radius: 16px; border: none; color: #fff; cursor: pointer;
}
.gungbrada-jnknapp.ja { background: var(--gron); box-shadow: 0 4px 0 var(--gron-mork); }
.gungbrada-jnknapp.nej { background: var(--rosa); box-shadow: 0 4px 0 #cf6f9b; }
.gungbrada-jnknapp.ratt { outline: 4px solid var(--gron-mork); }
.gungbrada-jnknapp:active { transform: translateY(3px); }

/* ---------- Mollys räknebok (granska & förklara) ---------- */
.mbok-sida {
  position: relative;
  width: min(92%, 380px);
  aspect-ratio: 320 / 210;
  margin: 4px auto 0;
}
.mbok-ram { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 14px rgba(60, 90, 130, 0.16)); }
.mbok-innehall {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 7% 8px;
}
.mbok-etikett { font-size: 15px; font-weight: 800; color: var(--amber-mork); opacity: 0.85; }
.mbok-uppgift {
  font-size: clamp(30px, 8vw, 46px);
  font-weight: 800;
  color: #4a3b1e;
  text-align: center;
  line-height: 1.25;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.mbok-objekt { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: clamp(26px, 7vw, 38px); }
.mbok-rakn { font-size: clamp(22px, 6vw, 32px); font-weight: 800; color: #4a3b1e; }
.mbok-overstruken { text-decoration: line-through; text-decoration-color: var(--amber); text-decoration-thickness: 4px; opacity: 0.55; }
.mbok-korrekt { color: var(--gron-mork); font-weight: 800; }
.mbok-marke {
  position: absolute;
  top: 8%;
  right: 9%;
  z-index: 2;
  width: clamp(48px, 13vw, 64px);
  height: clamp(48px, 13vw, 64px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 900;
  background: #fff;
  opacity: 0;
  transform: rotate(-12deg) scale(1.4);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mbok-marke.synlig { opacity: 0.92; transform: rotate(-12deg) scale(1); }
.mbok-marke.ratt { color: var(--gron-mork); border: 5px solid var(--gron); }
.mbok-marke.hmm { color: var(--gul-mork); border: 5px solid var(--gul); }
.mbok-bildstod { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 12px 0 2px; flex-wrap: wrap; }
.mbok-punktgrupp {
  display: grid;
  grid-template-columns: repeat(3, 16px);
  gap: 6px;
  padding: 8px 10px;
  background: #fff;
  border: 2px solid var(--kant);
  border-radius: 16px;
  box-shadow: var(--skugga);
}
.mbok-punkt { width: 16px; height: 16px; border-radius: 50%; background: var(--amber); }
.mbok-plus { font-size: 26px; font-weight: 800; color: var(--amber-mork); }
.mbok-stamplar { display: flex; gap: 22px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.mbok-stamplar.klar .mbok-stampel:not(.vald) { opacity: 0.3; }
.mbok-stampel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: clamp(120px, 34vw, 150px);
  min-height: 118px;
  border: 4px solid transparent;
  border-radius: 26px;
  background: var(--kort);
  font-family: inherit;
  box-shadow: 0 6px 0 var(--kant), var(--skugga);
  transition: transform 0.1s, border-color 0.2s, background 0.2s, box-shadow 0.1s, opacity 0.3s;
}
.mbok-stampel:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--kant), var(--skugga); }
.mbok-stampel-ikon { font-size: 42px; line-height: 1; }
.mbok-stampel-text { font-size: 20px; font-weight: 800; color: #274a6d; }
.mbok-stampel.ratt-val .mbok-stampel-ikon { color: var(--gron-mork); }
.mbok-stampel.ratt-val.vald { border-color: var(--gron); background: #e7f7e8; }
.mbok-stampel.hmm-val.vald { border-color: var(--gul); background: #fff6e0; }
.mbok-stampel.fel { animation: skaka 0.35s; border-color: var(--amber); }
.mbok-forklaring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  margin-top: 22px;
}
.mbok-fragrubrik { font-size: clamp(20px, 5.5vw, 26px); font-weight: 800; color: var(--bla-djup); text-align: center; }
.mbok-forkl-knapp {
  width: 100%;
  padding: 16px 20px;
  border: 4px solid transparent;
  border-radius: 22px;
  background: var(--kort);
  box-shadow: 0 5px 0 var(--kant), var(--skugga);
  font-family: inherit;
  font-size: clamp(16px, 4.4vw, 20px);
  font-weight: 700;
  color: #274a6d;
  text-align: center;
  line-height: 1.3;
  transition: transform 0.1s, border-color 0.2s, background 0.2s, box-shadow 0.1s;
}
.mbok-forkl-knapp:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--kant), var(--skugga); }
.mbok-forkl-knapp.ratt { border-color: var(--gron); background: #e7f7e8; box-shadow: 0 5px 0 #b5dfbd, var(--skugga); }
.mbok-forkl-knapp.fel { animation: skaka 0.35s; border-color: var(--amber); }
@media (max-width: 430px) {
  .mbok-stamplar { gap: 14px; }
  .mbok-bildstod { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mbok-marke { transition: none; }
  .mbok-stampel.fel, .mbok-forkl-knapp.fel { animation: none; }
}

/* Bärkalaset: två djur med talkort + bärskål som glider till vinnaren */
.barkalas-scen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}
.barkalas-rad {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
}
.barkalas-djur {
  position: relative;
  border: 4px solid transparent;
  border-radius: 26px;
  background: var(--kort);
  box-shadow: 0 6px 0 var(--kant), var(--skugga);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 132px;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.2s, box-shadow 0.1s;
}
.barkalas-djur:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--kant); }
.barkalas-djur.vinnare { border-color: var(--gron); background: #e7f7e8; }
.barkalas-djur.fel { animation: skaka 0.35s; border-color: var(--amber); }
.barkalas-emoji { font-size: 58px; line-height: 1; }
.barkalas-kort {
  font-size: 64px;
  font-weight: 800;
  color: var(--bla-djup);
  background: #f3f8fd;
  border-radius: 16px;
  min-width: 92px;
  padding: 6px 14px;
  text-align: center;
  box-shadow: inset 0 -4px 0 var(--kant);
}
.barkalas-skal {
  width: 96px;
  margin-top: 4px;
  transition: transform 0.55s ease;
  will-change: transform;
  pointer-events: none;
}
.barkalas-skal-svg { width: 100%; height: auto; display: block; }
.barkalas-litet-bar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  opacity: 0;
  animation: barkalasBar 0.5s ease forwards;
}
.barkalas-litet-bar svg { width: 100%; height: auto; display: block; }
@keyframes barkalasBar {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- Skattgrottan (flytmotor för talfakta) ---------- */
/* OBS: prefix skattg- (inte skatt-) för att inte krocka med Skattkartans klasser. */
.skattg-grotta {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; max-width: 460px;
  margin: 2px auto 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #ece4fb 0%, #e3edfb 100%);
  border-radius: 22px;
  box-shadow: inset 0 2px 10px rgba(90, 80, 140, 0.14);
}
.skattg-gem {
  font-size: 30px; line-height: 1;
  transition: opacity 0.6s ease, transform 0.4s ease, filter 0.4s ease;
  filter: drop-shadow(0 2px 3px rgba(90, 80, 140, 0.3));
}
.skattg-gem.aktiv {
  transform: scale(1.18);
  filter: drop-shadow(0 3px 6px rgba(120, 90, 200, 0.5));
}
.skattg-gem.glimmar { animation: skattGlimmar 1.4s ease; opacity: 1 !important; }
@keyframes skattGlimmar {
  0% { transform: scale(1.18); }
  35% { transform: scale(1.5); filter: drop-shadow(0 0 12px rgba(150, 120, 230, 0.9)); }
  100% { transform: scale(1.18); }
}
.skattg-rubrik { font-size: 22px; }
.skattg-ekv { margin-top: 4px; }

/* Korrigerande tioram: tonas mjukt in efter svaret (opacity + max-height) */
.skattg-modellholk {
  max-height: 0; overflow: hidden;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.5s ease, transform 0.5s ease, max-height 0.5s ease;
}
.skattg-modellholk.visad {
  max-height: 620px; opacity: 1; transform: none;
  margin: 10px 0 2px;
}
.skattg-modell {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: #fffaf0; border: 2px solid #ecdcc0; border-radius: 20px;
  padding: 14px 18px; box-shadow: var(--skugga);
  max-width: 420px;
}
.skattg-tioram-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.skattg-tioram {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px; width: min(280px, 74vw);
}
.skattg-cell {
  aspect-ratio: 1;               /* form via aspect-ratio, aldrig procenthöjd */
  border-radius: 10px;
  border: 2px solid var(--kant);
  background: #fff;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.skattg-cell.fyll-a { background: var(--bla); border-color: var(--bla-mork); }
.skattg-cell.fyll-b { background: var(--gul); border-color: var(--gul-mork); }
.skattg-extra { display: flex; align-items: center; gap: 4px; }
.skattg-extra-plus { font-size: 26px; font-weight: 800; color: #274a6d; }
.skattg-extra-gem { font-size: 26px; line-height: 1; }
.skattg-grupper { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.skattg-grupp {
  display: flex; gap: 3px; padding: 8px 10px;
  border: 2px dashed var(--bla); border-radius: 14px;
  font-size: 24px; line-height: 1;
}
.skattg-minus { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; max-width: 360px; font-size: 26px; line-height: 1; }
.skattg-minus-gem { transition: opacity 0.4s ease, filter 0.4s ease; }
.skattg-minus-gem.bort { opacity: 0.32; filter: grayscale(0.6); } /* mjukt bortdraget – ingen hård röd markering */
.skattg-modelltext { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.skattg-modellrad { font-size: 18px; font-weight: 700; color: #6a5a3a; text-align: center; }

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

/* --- Formbyggarleken (komposition av former) ------------------------------ */
.formbygge-hall-rubrik { font-size: 22px; font-weight: 800; color: var(--bla-djup); text-align: center; margin: 6px 0 2px; }
.formbygge-hall { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 8px 0 14px; }
.formbygge-hall-figur {
  border: none; background: var(--kort); border-radius: 20px; padding: 10px 12px 8px;
  box-shadow: var(--skugga); display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.formbygge-hall-figur .formbygge-svg { width: 84px; }
.formbygge-hall-namn { font-weight: 800; letter-spacing: 2px; font-size: 15px; color: var(--bla-djup); }
.formbygge-start { margin: 8px auto 0; display: block; }

.formbygge-bestallning { font-size: 20px; font-weight: 700; }
.formbygge-bestallare { font-size: 30px; vertical-align: middle; }

.formbygge-scen { display: flex; justify-content: center; align-items: center; margin: 8px 0 14px; min-height: 200px; }
.formbygge-stage { display: flex; justify-content: center; }
.formbygge-svg {
  width: clamp(180px, 56vw, 260px); aspect-ratio: 1; display: block;
  transition: transform 0.9s ease; /* mjukt lyft när figuren "lever" */
}
.formbygge-lyft { transform: translateY(-12px) scale(1.03); }
@media (prefers-reduced-motion: reduce) { .formbygge-svg { transition: none; } }

.formbygge-brickor { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.formbygge-bricka {
  width: clamp(72px, 20vw, 88px); aspect-ratio: 1; padding: 8px;
  border: 3px solid var(--kant); border-radius: 20px; background: var(--kort);
  box-shadow: var(--skugga);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.15s, opacity 0.25s;
}
.formbygge-bricka:active { transform: translateY(3px); }
.formbygge-bricka.vald { border-color: var(--bla); box-shadow: 0 0 0 4px rgba(91, 155, 213, 0.28), var(--skugga); transform: translateY(-2px); }
.formbygge-bricka.anvand { opacity: 0.22; pointer-events: none; box-shadow: none; }
.formbygge-bricka.fel { animation: skaka 0.35s; border-color: var(--amber); }
.formbygge-brickasvg { width: 100%; aspect-ratio: 1; display: block; }

.formbygge-dekval { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.formbygge-dekset {
  display: flex; gap: 4px; align-items: center; padding: 10px 14px;
  border: 3px solid var(--kant); border-radius: 20px; background: var(--kort);
  box-shadow: var(--skugga); transition: transform 0.12s, border-color 0.15s;
}
.formbygge-dekset .formbygge-brickasvg { width: 46px; }
.formbygge-dekset:active { transform: translateY(3px); }
.formbygge-dekset.ratt { border-color: var(--gron); background: #eafaf0; }
.formbygge-dekset.fel { animation: skaka 0.35s; border-color: var(--amber); }

/* ---------- Kluring: Nyckelsmeden (mental rotation) ---------- */
.nyckel-scen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 10px auto 0;
}
.nyckel-las {
  position: relative;
  width: min(58vw, 190px);
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  background: linear-gradient(#cdd9e6, #9fb2c6);
  border: 4px solid #7d94aa;
  box-shadow: inset 0 3px 9px rgba(255, 255, 255, 0.55), var(--skugga);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nyckel-halet {
  width: 58%;
  aspect-ratio: 1;
  transition: opacity 0.4s ease;
}
.nyckel-halet svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(20, 30, 45, 0.4)); }
.nyckel-las.oppen .nyckel-halet { opacity: 0; }
.nyckel-dorr {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 18px;
  background: linear-gradient(#fff4d9, #ffe6a8);
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.nyckel-las.oppen .nyckel-dorr { opacity: 1; transform: scale(1); }
.nyckel-kompis { font-size: clamp(42px, 13vw, 66px); line-height: 1; }
.nyckel-vinka {
  font-size: clamp(24px, 8vw, 38px);
  line-height: 1;
  transform-origin: 65% 90%;
  animation: nyckelVinka 0.9s ease-in-out infinite;
}
@keyframes nyckelVinka {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(18deg); }
}

.nyckel-vagg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 480px;
}
.nyckel-kort {
  position: relative;
  width: min(28vw, 120px);
  aspect-ratio: 1;
  background: var(--kort);
  border: 3px solid var(--kant);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--kant), var(--skugga);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.25s;
}
.nyckel-kort:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kant); }
.nyckel-kort.fel { animation: skaka 0.35s; border-color: var(--amber); }
.nyckel-kort.vald { border-color: var(--gron); box-shadow: 0 0 0 4px rgba(108, 192, 112, 0.35); }
.nyckel-kort.nyckel-bort { opacity: 0.22; pointer-events: none; }
.nyckel-kort.nyckel-in { opacity: 0; transform: translateY(-34px) scale(0.35); pointer-events: none; }
.nyckel-figur {
  width: 100%;
  aspect-ratio: 1; /* kvadratisk duk – geometrin ägs helt av SVG:n */
  will-change: transform;
}
.nyckel-figur svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 3px 3px rgba(60, 90, 130, 0.28));
}
.nyckel-granska {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--kant);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: var(--skugga);
}
.nyckel-granska:active { transform: translateY(2px); }
.nyckel-vrid { max-width: 320px; margin-top: 4px; }

/* ---- Småttis: "Var är hunden?" (pekadjur) – JÄTTESTORA träffytor, lugn design ---- */
/* #spelyta är flex column + justify-content:center → ingen flex:1 på raden (skulle
   ta över och störa den vertikala centreringen). Raden centrerar sig naturligt. */
.peka-rad {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 8px;
}
.alt.peka {                       /* ~40 %+ av spelytan per knapp */
  width: 42vw;
  max-width: 320px;
  height: min(46vh, 320px);
  border-radius: 32px;
  padding: 14px;
  background: var(--kort);
}
.peka-rad.tre .alt.peka {         /* tre val → smalare, fortfarande jättestort */
  width: 29vw;
}
.alt.peka svg { width: 82%; height: 82%; display: block; } /* realistisk SVG fyller knappen */

/* Garanterad vinst efter 2 fel: stilla gult skimmer. INGEN transform/animation –
   basregeln .alt:active (translateY) och en ev. animation skulle annars slåss om
   transform. Bara mjuk box-shadow/border-övergång, i linje med heliga principerna. */
.alt.peka.ledtrad {
  border-color: var(--gul);
  box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.55), var(--skugga-stor);
  transition: box-shadow 0.4s, border-color 0.4s;
}

/* Storleksrunda: samma bild i två storlekar (stort vs litet begrepp). */
.alt.peka.peka-liten svg { width: 40%; height: 40%; }
.alt.peka.peka-stor  svg { width: 88%; height: 88%; }

/* Tyst text-hint till föräldern (visas en gång). CSS-variabel istället för
   hårdkodad färg, som övriga appen. Appen är light-only (color-scheme: light only). */
.peka-onboarding {
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
  max-width: 460px;
  opacity: 0.6;
  padding: 4px 18px;
  color: var(--bla-djup);
}

/* ---------- Svenska: Sagobyggaren (typkod: sagobygg) ---------- */
.saga-karta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin: 8px auto 4px;
}
.saga-plats {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 3px dashed var(--kant);
  border-radius: 20px;
  background: #f2f7fc;
  padding: 10px 14px;
  min-height: 72px;
  box-shadow: var(--skugga);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.saga-plats.fylld { border-style: solid; border-color: var(--gron); background: #e7f7e8; }
.saga-plats.aktiv {
  border-color: var(--bla);
  background: #eaf4fd;
  box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.25), var(--skugga);
}
.saga-plats.lyser {
  border-style: solid;
  border-color: var(--gul-mork);
  background: #fff9e8;
  box-shadow: 0 0 0 4px rgba(232, 178, 60, 0.38), var(--skugga);
}
.saga-plats.fel { animation: skaka 0.35s; border-color: var(--amber); }
.saga-etikett {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 92px;
  font-size: 14px;
  font-weight: 800;
  color: var(--bla-djup);
  text-align: center;
  line-height: 1.15;
}
.saga-etikett-ikon { font-size: 30px; line-height: 1; }
.saga-innehall { display: flex; align-items: center; gap: 10px; flex: 1; }
.saga-bild { font-size: 40px; line-height: 1; }
.saga-text { font-size: 17px; font-weight: 600; color: var(--text); }
.saga-tom { font-size: 34px; font-weight: 800; color: var(--kant); }

/* Bildkorten (ärver .alt-basen: kant, skugga, tryck-effekt, .fel/.ratt) */
.saga-kortrad {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  width: 100%;
  max-width: 600px;
  margin-top: 14px;
}
.alt.saga-kort {
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  min-width: 96px;
  min-height: 96px;
}
.saga-kort-bild { font-size: 52px; line-height: 1; }
.alt.saga-kort.saga-kort-text { width: min(300px, 84vw); }
.saga-kort-text-rad { font-size: 16px; font-weight: 600; color: var(--text); text-align: center; }
.alt.saga-kort.anvand { opacity: 0; pointer-events: none; }

/* Ordna-nivån: tidslinje (Först / Sedan / Sist) */
.saga-tidslinje {
  display: flex;
  gap: 14px;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  margin: 12px auto 0;
}
.saga-tidlucka {
  flex: 1;
  min-height: 128px;
  border: 3px dashed var(--kant);
  border-radius: 20px;
  background: #f2f7fc;
  box-shadow: var(--skugga);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.saga-tidlucka.aktiv {
  border-color: var(--bla);
  background: #eaf4fd;
  box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.25), var(--skugga);
}
.saga-tidlucka.fylld { border-style: solid; border-color: var(--gron); background: #e7f7e8; }
.saga-nr { font-size: 20px; font-weight: 800; color: var(--bla-djup); }
.saga-tidnamn { font-size: 15px; font-weight: 700; color: var(--bla-djup); }
.saga-tidbild { font-size: 46px; line-height: 1; margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .saga-plats, .saga-tidlucka { transition: none; }
  .saga-plats.fel { animation: none; }
}
@media (max-width: 420px) {
  .saga-etikett { min-width: 74px; font-size: 13px; }
  .saga-text { font-size: 15px; }
  .saga-tidslinje { gap: 8px; }
}

/* ---------- Meningsmålaren 🎨 (SHAPE-coding-grammatik) ---------- */
/* Röd fanns inte i grundpaletten – enda tillägget; övriga former återanvänder
   --gul / --bla / --gron ur styles.css. */
:root {
  --mal-rod: #e2665a;
  --mal-rod-mork: #c94f45;
}

.mmal-scen {
  font-size: clamp(48px, 16vw, 88px);
  line-height: 1.1;
  text-align: center;
  margin: 4px 0 2px;
  letter-spacing: 4px;
}
.mmal-molly { font-size: 0.6em; margin-right: 6px; vertical-align: middle; }

/* Formerna (inline-SVG) – färgas via CSS-variabler ur styles.css. */
.mmal-form { width: 100%; height: 100%; display: block; }
.mmal-form-vem ellipse { fill: var(--gul); stroke: var(--gul-mork); stroke-width: 4; }
.mmal-form-gor polygon { fill: var(--mal-rod); stroke: var(--mal-rod-mork); stroke-width: 3; stroke-linejoin: round; }
.mmal-form-var rect { fill: var(--bla); stroke: var(--bla-mork); stroke-width: 4; }
.mmal-form-nar path { fill: none; stroke: var(--gron); stroke-width: 13; stroke-linecap: round; }

/* Formplatserna (meningsraden). */
.mmal-rad {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center; align-items: center;
  width: 100%; max-width: 560px; margin: 12px auto 6px;
}
.mmal-slot { position: relative; width: clamp(84px, 22vw, 132px); height: 62px; }
.mmal-slot .mmal-form { position: absolute; inset: 0; opacity: 0.32; transition: opacity 0.25s; }
.mmal-slot.fylld .mmal-form { opacity: 1; }
.mmal-slot-ord {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--text);
  font-size: clamp(14px, 4.4vw, 19px); text-align: center;
  padding: 0 8px; line-height: 1.1;
}
.mmal-slot.fylld { animation: prickpopp 0.3s ease; }

/* Ordbrickorna. */
.mmal-brickor {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center; margin-top: 16px;
}
.mmal-bricka {
  position: relative; border: none; background: transparent; padding: 0;
  cursor: pointer; width: clamp(94px, 25vw, 144px); height: 66px;
  transition: transform 0.1s, opacity 0.2s;
}
.mmal-bricka .mmal-form { position: absolute; inset: 0; filter: drop-shadow(var(--skugga)); }
.mmal-bricka-ord {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--text);
  font-size: clamp(14px, 4.4vw, 19px); text-align: center;
  padding: 0 8px; line-height: 1.1;
}
.mmal-bricka:active { transform: translateY(3px); }
.mmal-bricka.anvand { opacity: 0.22; pointer-events: none; }
.mmal-bricka.fel { animation: skaka 0.35s; }
.mmal-bricka.ratt { animation: prickpopp 0.3s ease; }

/* Molnknappen för egen produktion (säg meningen → tryck → Molly läser). */
.mmal-saga { display: flex; justify-content: center; margin-top: 18px; }
.mmal-moln {
  display: inline-flex; align-items: center; gap: 10px;
  border: none; cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #eef5fc);
  border-radius: 22px; padding: 12px 22px;
  box-shadow: 0 5px 0 var(--kant), var(--skugga);
  color: var(--bla-mork); font-weight: 800; font-size: 18px;
  transition: transform 0.1s, box-shadow 0.1s;
}
.mmal-moln:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--kant); }
.mmal-moln-emoji { font-size: 30px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .mmal-slot .mmal-form { transition: none; }
  .mmal-slot.fylld, .mmal-bricka.ratt { animation: none; }
}

/* ===========================================================================
   MÄTARVERKSTAN (matverkstad)
=========================================================================== */
.matv-scen {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.matv-linjal-svg,
.matv-bonus-svg { width: 100%; height: auto; display: block; }

/* Runda 1: masken + banan där gem läggs kant i kant */
.matv-matomrade {
  position: relative;
  height: 58px;
  margin: 8px 0 4px;
}
.matv-mask-svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 4px 8px rgba(60, 90, 130, 0.16)); }
.matv-bana { position: absolute; inset: 0; }

.matv-gem { height: 30px; display: flex; align-items: center; justify-content: center; }
.matv-gem.drag { touch-action: none; cursor: grab; height: 34px; }
.matv-gem.drag.lyft { z-index: 2000; cursor: grabbing; filter: drop-shadow(0 8px 12px rgba(60, 90, 130, 0.3)); }
.matv-gem.lagd { position: absolute; top: 14px; height: 30px; }
.matv-gem.fel { animation: skaka 0.35s; }

.matv-lager {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 3px dashed var(--kant);
  border-radius: 22px;
}

/* Runda 2: brygg-gem som avslöjas ovanpå linjalen efter rätt svar */
.matv-brygga-gem { opacity: 0; transition: opacity 0.3s ease; }
.matv-brygga-visa .matv-brygga-gem { opacity: 1; }

/* Runda 3: stegbågar 1..L som avslöjas efter rätt svar */
.matv-steg-bage,
.matv-steg-nr { opacity: 0; transition: opacity 0.3s ease; }
.matv-steg-visa .matv-steg-bage,
.matv-steg-visa .matv-steg-nr { opacity: 1; }

/* Fritt svar (talpanel) på hög nivå */
.matv-talpanel { max-width: 520px; gap: 12px; }
.alt.tal.liten { width: 74px; height: 74px; font-size: 38px; border-radius: 20px; }

/* Bonus: upplästa svarsalternativ */
.matv-pratval { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 14px; }
.matv-pratrad { display: flex; align-items: center; gap: 12px; }
.hogtalare.liten { width: 48px; height: 48px; font-size: 22px; box-shadow: 0 4px 0 var(--bla-mork), var(--skugga); }
.matv-svarknapp { flex: 1; font-size: 20px; padding: 18px 20px; text-align: left; }
.matv-svarknapp.ratt { border-color: var(--gron); background: #e7f7e8; box-shadow: 0 6px 0 #b5dfbd, var(--skugga); }
.matv-svarknapp.fel { animation: skaka 0.35s; border-color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .matv-gem.fel,
  .matv-svarknapp.fel { animation: none; }
  .matv-brygga-gem,
  .matv-steg-bage,
  .matv-steg-nr { transition: none; }
}

/* ---------- Fixarboden ---------- (lägg efter Tankelådan-blocket i styles.css,
   ca rad 2323, före "/* ---------- Ändelsemaskinen ---------- */") .
   Verktygsknapparna återanvänder .tankelada (ram/skugga/ratt/fel-states) och
   kund-symbolen .tanke-symbol (dess transform-transition ger inlämningsrörelsen,
   som redan nollställs vid prefers-reduced-motion). */
.fixar-kund { margin-bottom: 2px; }
.fixar-situation { text-align: center; }
.fixar-fraga { text-align: center; margin-top: 6px; font-weight: 700; }
.fixar-verktyg-rad { margin-top: 14px; }
.fixar-verktyg { gap: 4px; }
.fixar-ikon { font-size: 46px; line-height: 1; }
.fixar-ledtrad {
  font-size: 14px;
  font-weight: 600;
  color: #4a6b8a;
  opacity: 0.8;
}

/* ---------- Kluringar: Tänkarklubben (domare mellan Molly ☁️ & Kotte 🦔) ---------- */
/* De fyra föremålen (kluringen) – kan glöda medan en regel läses (förankring) */
.tankar-foremal-rad {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 520px;
  margin: 4px auto 2px;
}
.tankar-foremal {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 0 var(--kant), var(--skugga);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.tankar-foremal.glod {
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px var(--gul), 0 0 16px 4px rgba(255, 209, 102, 0.65);
  animation: tankarGlod 1.7s ease-in-out infinite;
}
@keyframes tankarGlod {
  0%, 100% { box-shadow: 0 0 0 4px var(--gul), 0 0 14px 3px rgba(255, 209, 102, 0.55); }
  50%      { box-shadow: 0 0 0 5px var(--gul), 0 0 22px 6px rgba(255, 209, 102, 0.85); }
}

/* De två domarna: figur + pratbubbla */
.tankar-domare {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 640px;
  margin-top: 10px;
}
.tankar-figur {
  position: relative;
  flex: 1 1 240px;
  max-width: 300px;
  min-width: 210px;
  background: var(--kort);
  border: 4px solid transparent;
  border-radius: 26px;
  box-shadow: 0 6px 0 var(--kant), var(--skugga);
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.2s, background 0.2s, box-shadow 0.1s, opacity 0.35s, filter 0.35s;
}
.tankar-figur:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--kant), var(--skugga); }
.tankar-huvud {
  font-size: 62px;
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(60, 90, 130, 0.2));
}
.tankar-figur.vald {
  border-color: var(--gron);
  background: #e7f7e8;
  box-shadow: 0 6px 0 #b5dfbd, var(--skugga);
}
.tankar-figur.dim { opacity: 0.5; }
.tankar-figur.flagga-fel {
  border-color: var(--amber);
  background: #fff5e9;
}
.tankar-figur.flagga-fel::after {
  content: '✗';
  position: absolute;
  top: 8px;
  right: 14px;
  font-size: 26px;
  font-weight: 900;
  color: var(--amber-mork);
}

/* Pratbubbla med motivering + egen omspelningsknapp */
.tankar-bubbla {
  position: relative;
  width: 100%;
  background: #f4f8fc;
  border: 2px solid var(--kant);
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tankar-bubbla::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 42px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #f4f8fc;
}
.tankar-bubbla.fel { animation: skaka 0.35s; border-color: var(--amber); }
.tankar-motiv {
  flex: 1;
  font-size: 19px;
  font-weight: 700;
  color: #274a6d;
  line-height: 1.3;
  text-align: left;
}
.tankar-mini-hog {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: none;
  background: var(--bla);
  color: #fff;
  font-size: 22px;
  box-shadow: 0 4px 0 var(--bla-mork);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.tankar-mini-hog:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bla-mork); }

/* Steg 2: varför tänkte den andra fel? */
.tankar-steg2 {
  width: 100%;
  max-width: 640px;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.alt.tankar-varfor {
  padding: 16px 22px;
  font-size: clamp(18px, 4.5vw, 24px);
  letter-spacing: 0;
  text-align: center;
  line-height: 1.3;
}

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

/* ---- Mönsterväxaren (växande mönster) ---- */
.vaxa-galleri {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; align-items: flex-end;
  width: 100%; max-width: 640px; margin: 4px auto 0;
}
.vaxa-figur {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--kort); border: 3px solid var(--kant);
  border-radius: 20px; padding: 12px 10px 8px;
  box-shadow: var(--skugga);
}
.vaxa-figur.fraga { border-style: dashed; border-color: var(--lila); }
.vaxa-rad {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  justify-content: center; align-items: center;
  max-width: 150px; min-height: 44px;
}
.vaxa-em { font-size: 30px; line-height: 1; }
.vaxa-skylt {
  font-size: 15px; font-weight: 800; color: var(--bla-mork);
  background: #eef4fb; border-radius: 10px; padding: 2px 12px;
}
.vaxa-fragetecken { font-size: 48px; font-weight: 800; color: var(--lila); }
.vaxa-fraga-text {
  font-size: 22px; font-weight: 800; color: #274a6d;
  margin: 8px 0 2px; text-align: center;
}
/* Bygg-själv (+/−) */
.vaxa-bygg {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 100%; max-width: 420px;
}
.vaxa-byggrad {
  max-width: 380px; min-height: 62px;
  border: 3px dashed var(--kant); border-radius: 18px;
  padding: 10px 12px; background: var(--kort);
  transition: border-color 0.2s, background 0.2s;
}
.vaxa-byggrad.klar { border-color: var(--gron); background: #e7f7e8; border-style: solid; }
.vaxa-byggrad .vaxa-em { font-size: 40px; }
.vaxa-stega { display: flex; gap: 22px; }
.vaxa-steg-knapp {
  width: 82px; height: 82px; border-radius: 50%;
  border: none; background: linear-gradient(180deg, #b9aef0, #9b8be8);
  color: #fff; font-size: 44px; font-weight: 800; line-height: 1;
  box-shadow: 0 6px 0 #6f5cc4, var(--skugga);
  transition: transform 0.1s, box-shadow 0.1s;
}
.vaxa-steg-knapp:active { transform: translateY(4px); box-shadow: 0 2px 0 #6f5cc4; }
/* Välj-figur alternativ (färdiga emoji-rader) */
.alt.vaxa-alt {
  flex-direction: column; gap: 6px;
  width: 168px; min-height: 96px; padding: 14px 12px;
}
.alt.vaxa-alt .vaxa-em { font-size: 26px; }

/* ---- Småttis: "Mata lilla katten" (matakatten) – räkna-benämn, stora träffytor,
   lugn design (inget blink/tidspress/fail-state). Speglar peka-konventionerna. ---- */
.mata-scen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vw;
  width: 100%;
  padding: 8px;
  flex-wrap: wrap;
}
.mata-tallrik {                     /* tallrik med fiskar (vänster) */
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  max-width: 46vw;
  min-height: 116px;
  padding: 16px;
  border-radius: 50% / 42%;
  background: #f3f8fd;
  box-shadow: inset 0 0 0 6px #e3eef8, var(--skugga);
}
.mata-fisk {                        /* träffyta > 56 px; glider mjukt till munnen */
  width: 96px; height: 72px;
  min-width: 56px; min-height: 56px;
  border: none; background: transparent; padding: 0;
  cursor: pointer;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.mata-fisk svg { width: 100%; height: 100%; display: block; }
.mata-katt {                        /* hungrig katt (höger) */
  width: 34vw; max-width: 200px;
  flex-shrink: 0;
}
.mata-katt svg { width: 100%; height: auto; display: block; }
.mata-katt.njuter {                 /* katten spinner: mjuk stilla puls, inget blink */
  animation: mataNjut 1.6s ease-in-out infinite;
  transform-origin: 50% 88%;
}
@keyframes mataNjut {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.mata-kort-rad {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 8px;
}
.mata-kort {                        /* JÄTTESTORT svarskort (prickmängd + siffra) */
  width: 40vw; max-width: 220px;
  height: min(34vh, 220px);
  min-width: 56px; min-height: 56px;
  border-radius: 28px;
  border: 3px solid var(--kant);
  background: var(--kort);
  box-shadow: 0 6px 0 var(--kant), var(--skugga);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.2s, background 0.2s, box-shadow 0.1s;
}
.mata-kort-rad.tre .mata-kort { width: 27vw; }
.mata-kort:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--kant), var(--skugga); }
.mata-kort.ratt {
  border-color: var(--gron);
  background: #e7f7e8;
  box-shadow: 0 6px 0 #b5dfbd, var(--skugga);
}
.mata-kort.fel { animation: skaka 0.35s; border-color: var(--amber); }
.mata-kort.puls {                   /* garanterad vinst efter 2 fel – stilla mjukpuls */
  animation: mjukpuls 2.4s ease-in-out infinite;
  border-color: var(--gul);
}

.mata-prickar {                     /* prickmängd; positioner slumpas i JS per runda */
  position: relative;
  width: 62%;
  height: 55%;
}
.mata-prick {
  position: absolute;
  width: clamp(14px, 4.5vw, 32px);
  height: clamp(14px, 4.5vw, 32px);
  border-radius: 50%;
  background: var(--bla);
  transform: translate(-50%, -50%);
}
.mata-siffra {
  font-size: clamp(38px, 9vw, 68px);
  font-weight: 800;
  color: var(--bla-djup);
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mata-fisk { transition: opacity 0.3s ease; }
  .mata-katt.njuter { animation: none; }
  .mata-kort.fel { animation: none; }
  .mata-kort.puls {
    animation: none;
    border-color: var(--gul);
    box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.55), var(--skugga-stor);
  }
}

/* ---- Småttis: "Hjälp Molly sortera" (mollysortera) – kategorisering via etiketter.
   JÄTTESTORA korgar, ett föremål stort i mitten, LUGN design (ingen blink/tidspress). ---- */
.molly-vy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 2vh;
  padding: 6px;
}
.molly-scen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30vh;
}
.molly-foremal {
  font-size: min(30vh, 46vw);
  line-height: 1;
  /* Mjuk hopp ner i korgen vid rätt – bara transform/opacity (heliga principen). */
  transition: transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.55s;
}
.molly-foremal.molly-ned {
  transform: translateY(26vh) scale(0.42);
  opacity: 0.15;
}
.molly-korgar {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}
.molly-korg {                     /* två korgar ~40 % av ytan tillsammans */
  flex: 1 1 0;
  max-width: 340px;
  height: min(30vh, 240px);
  border-radius: 32px;
  border: 3px solid var(--kant);
  background: var(--kort);
  box-shadow: var(--skugga);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.3s, border-color 0.4s;
}
.molly-korg:active { transform: translateY(2px); }
.molly-korg-ikon { font-size: min(16vh, 22vw); line-height: 1; }
.molly-korg.ratt { border-color: var(--gron); background: #e7f7e8; }
.molly-korg.fel { animation: skaka 0.35s; border-color: var(--amber); }
/* Garanterad vinst efter 2 fel: stilla gult skimmer, INGEN animation (transform-
   krock undviks, precis som .alt.peka.ledtrad). */
.molly-korg.ledtrad {
  border-color: var(--gul);
  box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.55), var(--skugga-stor);
  transition: box-shadow 0.4s, border-color 0.4s;
}

/* ---- Småttis: "Var är haren?" (rumsgom) – rumsprepositioner, JÄTTESTORA ytor ---- */
/* Gömställe-raden (peka-nivån). Fade-in = "scenen animeras mjukt" (opacity, inga blink). */
.rums-rad {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 8px;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.rums-rad.rums-in { opacity: 1; }

.alt.rums-plats {                 /* ~40 %+ av spelytan per gömställe */
  position: relative;
  width: 42vw;
  max-width: 320px;
  height: min(46vh, 320px);
  border-radius: 32px;
  padding: 14px;
  background: var(--kort);
  overflow: hidden;
}
.rums-rad.tre .alt.rums-plats { width: 29vw; } /* tre val → smalare, ändå jättestort */
.rums-svg { width: 82%; height: 82%; display: flex; align-items: center; justify-content: center; }
.rums-svg svg { width: 100%; height: 100%; display: block; }

/* Kontingent reaktion: haren tittar fram ur gömstället vid rätt (<300 ms). */
.rums-djur {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 40%;
  transform: translateX(-50%) scale(0.55);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.rums-djur svg { width: 100%; height: auto; display: block; }
.alt.rums-plats.rums-hittad .rums-djur { opacity: 1; transform: translateX(-50%) scale(1); }

/* Garanterad vinst efter 2 fel: stilla gult skimmer (samma mönster som pekadjur).
   Bara box-shadow/border – ingen transform (skulle slåss om .alt:active). */
.alt.rums-plats.ledtrad {
  border-color: var(--gul);
  box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.55), var(--skugga-stor);
  transition: box-shadow 0.4s, border-color 0.4s;
}

/* Tyst text-hint till föräldern (visas en gång). */
.rums-onboarding {
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
  max-width: 460px;
  opacity: 0.6;
  padding: 4px 18px;
  color: var(--bla-djup);
}

/* Sekvens-nivån: tidslinje (Först / Sedan) + bildkort */
.rums-tidslinje {
  display: flex;
  gap: 14px;
  justify-content: center;
  width: 100%;
  max-width: 440px;
  margin: 12px auto 0;
}
.rums-tidlucka {
  flex: 1;
  min-height: 132px;
  border: 3px dashed var(--kant);
  border-radius: 20px;
  background: #f2f7fc;
  box-shadow: var(--skugga);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.rums-tidlucka.aktiv {
  border-color: var(--bla);
  background: #eaf4fd;
  box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.25), var(--skugga);
}
.rums-tidlucka.fylld { border-style: solid; border-color: var(--gron); background: #e7f7e8; }
.rums-tidnamn { font-size: 16px; font-weight: 800; color: var(--bla-djup); }
.rums-tidsvg { width: 74px; height: 74px; margin-top: auto; }
.rums-tidsvg svg { width: 100%; height: 100%; display: block; }

.rums-kortrad {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  margin-top: 16px;
}
.alt.rums-kort {
  flex-direction: column;
  width: min(200px, 42vw);
  height: min(200px, 30vh);
  padding: 14px;
}
.alt.rums-kort.anvand { opacity: 0; pointer-events: none; }
.alt.rums-kort.ledtrad {
  border-color: var(--gul);
  box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.55), var(--skugga-stor);
  transition: box-shadow 0.4s, border-color 0.4s;
}
.rums-kort-svg { width: 78%; height: 78%; }
.rums-kort-svg svg { width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  .rums-rad, .rums-djur, .rums-tidlucka { transition: none; }
}

/* ---- Småttis: "Vilken är blå?" (fargval) – färgord post-nominalt ---- */
/* Färg sätts via CSS-variabel så SAMMA inline-SVG kan färgas om (färg = enda
   skiljedraget). .farg-yta ärver --farg-fyll från knappens färgklass. OBS: CSS
   custom property funkar i CSS-PROPERTY fill (klass), INTE som attribut
   fill="var(...)" – därför klass + .farg-yta. Modellerad på .peka-rad/.alt.peka. */
.farg-yta { fill: var(--farg-fyll, #cccccc); }
.alt.farg.farg-rod  { --farg-fyll: #e23b3b; }
.alt.farg.farg-gul  { --farg-fyll: #f2c53d; }
.alt.farg.farg-bla  { --farg-fyll: #2f74d0; }
.alt.farg.farg-gron { --farg-fyll: #3aa657; }

.farg-rad {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 8px;
}
.alt.farg {                       /* ~40 %+ av spelytan per knapp */
  width: 42vw;
  max-width: 320px;
  height: min(46vh, 320px);
  border-radius: 32px;
  padding: 14px;
  background: var(--kort);
}
.farg-rad.tre .alt.farg { width: 29vw; } /* tre val → smalare, fortfarande jättestort */
.alt.farg svg { width: 82%; height: 82%; display: block; }

/* Garanterad vinst efter 2 fel: stilla gult skimmer. INGEN transform/animation
   (basregeln .alt:active använder transform) – bara mjuk box-shadow/border. */
.alt.farg.ledtrad {
  border-color: var(--gul);
  box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.55), var(--skugga-stor);
  transition: box-shadow 0.4s, border-color 0.4s;
}

/* Tyst text-hint till föräldern (visas en gång, EJ talad). */
.farg-onboarding {
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
  max-width: 460px;
  opacity: 0.6;
  padding: 4px 18px;
  color: var(--bla-djup);
}

/* ---------- Matte: Störst av alla – Vem har flest? (typkod: storst) ---------- */
/* 3-årskontrakt: jättestora träffytor. Storlek läses via HÖJD → botten-justerat. */
.storst-rad {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-end;            /* storlek läses via höjd → gemensam baslinje */
  flex-wrap: wrap;
  width: 100%;
  padding: 8px;
}
.storst-alt {                       /* ~40 % av spelytan per knapp */
  width: 42vw;
  max-width: 320px;
  height: min(46vh, 320px);
  border-radius: 32px;
  padding: 14px;
  background: var(--kort);
}
.storst-rad.tre .storst-alt { width: 28vw; }   /* tre val → smalare, fortf. jättestort */

/* Storlek: samma SVG, skala sätts inline (JS) med transform-origin botten. */
.storst-alt.storlek { align-items: flex-end; }
.storst-alt.storlek svg { width: 88%; height: 88%; display: block; }

/* Mängd: tallrik med upprepade SVG:er (stort ratio, aldrig 2 mot 3). */
.storst-alt.mangd { align-items: center; }
.storst-tallrik {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.storst-sak { width: 30%; max-width: 92px; display: flex; }
.storst-sak svg { width: 100%; height: auto; display: block; }

/* Kontingent respons (<300 ms): rätt objekt växer + lyser mjukt vid rätt tryck.
   Bara transform/box-shadow – i linje med heliga principerna (ingen blink). */
.storst-alt.storst-vaxer {
  transform: scale(1.06);
  border-color: var(--gron);
  box-shadow: 0 0 0 8px rgba(108, 192, 112, 0.4), var(--skugga-stor);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

/* Garanterad vinst efter 2 fel: stilla gult skimmer. INGEN transform-strid med
   .alt:active/skaka – bara mjuk box-shadow/border, precis som .alt.peka.ledtrad. */
.storst-alt.ledtrad {
  border-color: var(--gul);
  box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.55), var(--skugga-stor);
  transition: box-shadow 0.4s, border-color 0.4s;
}

/* Beta-feedback: diskret 💬 nere i vänsterhörnet (PIN-grindad i barnappen) */
.feedback-knapp {
  position: fixed; left: 10px; bottom: 10px; z-index: 40;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--kant); background: rgba(255,255,255,0.75);
  font-size: 1.1rem; opacity: 0.55; cursor: pointer;
}
.feedback-knapp:active { opacity: 1; }
#feedback-dialog textarea {
  width: 100%; box-sizing: border-box; border: 2px solid var(--kant);
  border-radius: 12px; padding: 10px; font: inherit; resize: vertical;
}