/* ettansskola.se — barnvänligt tema, mobile-first, hög kontrast, stora träffytor. */

/* Atkinson Hyperlegible — font designad för svagseende (Braille Institute, SIL OFL).
   Levereras lokalt eftersom CSP är font-src 'self'. font-display: swap så texten
   visas direkt med systemfont och byts när fonten laddats. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/atkinson-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/atkinson-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/atkinson-Italic.woff2") format("woff2");
}

:root {
  --bg-start: #EAF2FF;
  --bg-mid: #FBEEF5;
  --bg-end: #F3EBFF;
  --bg-card: #FFFFFF;
  --text: #1B1B2F;
  --text-muted: #5B5B7A;
  --accent: #4F8EF7;
  --cta: #FFD43B;
  --cta-text: #2B1F00;
  --ok: #06A77D;
  --fel: #E63946;
  --stjarna: #FFC93C;
  --border: rgba(0, 0, 0, 0.10);
  --shadow: 0 2px 8px rgba(40, 50, 100, 0.08);
  --shadow-card: 0 4px 14px rgba(40, 50, 100, 0.10);
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --tap: 56px;
  --amne-farg: var(--accent);

  --font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Pastell-bakgrund per ämneskort */
  --pastell-matematik: #DCE9FB;
  --pastell-svenska:   #FCDDD2;
  --pastell-engelska:  #D6EFDC;
  --pastell-no:        #CFE7E2;
  --pastell-so:        #FBD9CE;
  --pastell-bild:      #FBE2CB;
  --pastell-musik:     #F3D5EC;
  --pastell-idrott:    #C9EBDD;
  --pastell-slojd:     #E7D6C5;
  --pastell-teknik:    #DCDFE8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* Backdrop-bakgrunder för utvalda sidor — vit overlay för läsbarhet */
body.bg-space, body.bg-stage, body.bg-castle, body.bg-surikat {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Parallax-fast bakgrund bara på enheter med mus — background-attachment: fixed
   orsakar känd scroll-jank på touch/mobil. */
@media (hover: hover) and (pointer: fine) {
  body.bg-space, body.bg-stage, body.bg-castle, body.bg-surikat { background-attachment: fixed; }
}
body.bg-castle {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    url('/assets/img/backdrop_castle.webp');
}
body.bg-space {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)),
    url('/assets/img/backdrop_space.webp');
}
body.bg-stage {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    url('/assets/img/backdrop_stage.webp');
}
body.bg-surikat {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    url('/assets/img/backdrop_surikat_dalarna.webp');
}

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

h1 { font-size: 2rem; margin: 0 0 0.4rem; }
h2 { font-size: 1.4rem; margin: 0 0 0.6rem; }

/* --- Global topbar --- */
body.is-landing .app-bar { display: none; }
.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.2rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.app-bar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  font-size: 1.1rem;
}
.app-bar__brand:hover { text-decoration: none; }
.app-bar__logo-img {
  height: 44px;
  width: auto;
  display: block;
}
/* Genvägsknappar (SYV, inställningar) — uppe till höger, samma höjd som skölden */
.app-bar__knappar { display: inline-flex; align-items: center; gap: 0.6rem; }
.app-bar__knapp { display: inline-flex; align-items: center; }
.app-bar__knapp img {
  height: 44px;
  width: auto;
  display: block;
  transition: transform 0.12s ease;
}
.app-bar__knapp:hover img,
.app-bar__knapp:focus-visible img { transform: scale(1.06); }
.app-bar__knapp:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}
.app-bar__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4F8EF7 0%, #B5179E 100%);
  color: white;
  font-weight: 800;
  font-size: 1.1rem;
}
@media (max-width: 480px) {
  .app-bar { padding: 0.5rem 0.8rem; }
}

/* --- Sektions-topbar (för delområde/spel-vy) --- */
/* Solitt färgband i ämnesfärgen som ALLTID omsluter både breadcrumb och rubrik.
   Tidigare ett tonande 80px-band (färg→transparent) som lät vit rubriktext falla
   på ljus bakgrund när den radbröt — nu robust på alla bredder. */
.topbar {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1rem 1rem;
  text-align: center;
  background: var(--amne-farg, var(--accent));
  border-bottom: 1px solid var(--border);
}
.topbar h1 { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
/* Mira-maskot: liten, dekorativ, bottenförankrad i bandets kant. Döljs på
   smala skärmar så den aldrig krockar med rubriken. Logisk inset → flippar i RTL. */
.topbar__maskot {
  position: absolute;
  inset-inline-end: 1rem;
  bottom: 0;
  width: 64px;
  height: auto;
  pointer-events: none;
}
@media (max-width: 560px) { .topbar__maskot { display: none; } }
.topbar .tagline { color: rgba(255, 255, 255, 0.92); margin: 0.2rem 0 0.8rem; }
.topbar .crumbs { font-size: 0.95rem; color: rgba(255, 255, 255, 0.92); margin: 0 0 0.4rem; text-align: left; }
.topbar .crumbs a { color: rgba(255, 255, 255, 0.92); }

/* Spel-vyns topbar — avskalad: en tydlig tillbaka-väg + delområdets namn.
   Ingen breadcrumb, ingen beskrivning — minimal kognitiv belastning. */
.topbar--spel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.7rem 1rem 0.7rem;
  text-align: left;
}
.topbar__tillbaka {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.2rem 0.2rem;
  color: white;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.topbar__tillbaka:hover, .topbar__tillbaka:focus-visible { text-decoration: underline; }
.topbar--spel h1 { font-size: 1.4rem; margin: 0; }

/* --- Hjälte: maskot + text sida-vid-sida, ovanpå backdrop --- */
.hero-ny {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  align-items: center;
  gap: 1.5rem;
  max-width: 960px;
  margin: 1.2rem auto 1.5rem;
  padding: 1rem 1.2rem;
}
.hero-ny__maskot {
  width: 100%;
  max-width: 240px;
  height: auto;
  animation: mjuk-in 0.6s ease-out;
  filter: drop-shadow(0 8px 16px rgba(40, 50, 100, 0.18));
}
.hero-ny__text { text-align: left; }
.hero-ny__rubrik {
  font-size: 2.4rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
  letter-spacing: -0.6px;
  line-height: 1.05;
}
.hero-ny__under {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0;
}
.hero-ny__crumbs {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.4rem;
}
.hero-ny__crumbs a { color: var(--text-muted); }

/* Mjuk engångsanimation — figuren tonar in en gång, sen helt stilla.
   Ingen oändlig loop: konstant perifer rörelse stör ADHD/AST. */
@keyframes mjuk-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Landing-specifik justering — kompaktare avstånd överst */
.container--landing {
  padding-top: 0.4rem;
}
.landing__rubrik {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 0.9rem;
  letter-spacing: 0.2px;
}

/* Svävande robot i nedre höger hörn */
.robot-glad {
  position: fixed;
  bottom: 1.2rem;
  right: 1rem;
  width: 90px;
  display: block;
  line-height: 0;
  animation: mjuk-in 0.6s ease-out;
  z-index: 40;
}
.robot-glad img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(120, 200, 240, 0.45));
  transition: transform 0.12s ease;
}
.robot-glad:hover img,
.robot-glad:focus-visible img { transform: scale(1.06); }
.robot-glad:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* Surikater i nedre vänstra hörnet — motpol till robot-glad. Mellanstadie-
   och teen-surikaten står bredvid varandra i en flex-rad och länkar till
   respektive sida. Klickbara (till skillnad från robot-glad som är ren dekor). */
.teen-mascots {
  position: fixed;
  bottom: 1.2rem;
  left: 1rem;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  animation: mjuk-in 0.6s ease-out;
}
.teen-mascot {
  width: 90px;
  display: block;
  line-height: 0;
}
/* Lågstadie-surikaten är mindre än de andra. */
.teen-mascot--lag { width: 73px; }
.teen-mascot img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(120, 200, 240, 0.45));
  transition: transform 0.12s ease;
}
.teen-mascot:hover img, .teen-mascot:focus-visible img { transform: translateY(-4px); }
.teen-mascot:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* Maskot i resultatkort vid 3 stjärnor */
.resultat-kort__maskot {
  display: block;
  width: 140px;
  height: auto;
  margin: -10px auto 0.5rem;
  animation: maskot-firar 0.7s ease-out;
}
@keyframes maskot-firar {
  0%   { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

@media (max-width: 600px) {
  .hero-ny {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.8rem;
  }
  .hero-ny__maskot { max-width: 180px; margin: 0 auto; }
  .hero-ny__text { text-align: center; }
  .hero-ny__rubrik { font-size: 1.8rem; }
  .robot-glad { width: 60px; bottom: 0.8rem; right: 0.6rem; }
  .teen-mascots { bottom: 0.8rem; left: 0.6rem; gap: 0.4rem; }
  .teen-mascot { width: 60px; }
  .teen-mascot--lag { width: 49px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ny__maskot, .robot-glad, .resultat-kort__maskot,
  .resultat-kort__stjarnor .stj, .resultat-kort__streak { animation: none; opacity: 1; transform: none; }
}

/* --- Barnförstasidans hjälte --- */
.start-hero {
  max-width: 760px;
  margin: 1rem auto 0.6rem;
  padding: 0 1rem;
  text-align: center;
}
/* Wrapper för landsförstasidor (dk/no/de/fr/it/fi/us) som visar en
   landsspecifik surikat-flagg-bild långt till vänster om hero. Hero
   behåller sin centrerade layout — flagg-bilden är absolut placerad
   så den inte påverkar hero. */
.hero-med-land {
  position: relative;
  margin: 1rem auto 0.6rem;
}
.hero-med-land__flagg {
  position: absolute;
  left: 2rem;
  top: 0.5rem;
  width: 160px;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
  filter: drop-shadow(0 4px 14px rgba(120, 200, 240, 0.35));
  pointer-events: none;
}
/* NO/FI/ES har "fyrkantigare" källbilder än SE/DK/IT/DE/FR/GB — sätt fast
   höjd så de visuellt matchar de smala porträtten. Bredd blir då auto. */
.hero-med-land__flagg[src*="NO_surikat"],
.hero-med-land__flagg[src*="FI_surikat"],
.hero-med-land__flagg[src*="ES_surikat"] {
  width: auto;
  height: 240px;
}
@media (max-width: 1100px) {
  .hero-med-land__flagg { width: 130px; left: 1rem; }
}
@media (max-width: 900px) {
  .hero-med-land { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
  .hero-med-land__flagg {
    position: static;
    width: 110px;
    order: -1;
  }
}
.start-hero__bild {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  display: block;
}
.start-hero__rubrik {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 1rem 0 0.3rem;
}
.start-hero__text {
  color: var(--text-muted);
  font-size: 1.1rem;
  margin: 0;
}
.start-loften {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 1.5rem 0 0;
}
.land-val {
  width: min(720px, calc(100vw - 2rem));
  margin: 0.85rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.land-val__kort {
  min-height: 6rem;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 22px rgba(40, 56, 86, 0.08);
  color: var(--text);
  text-decoration: none;
}
.land-val__kort:hover {
  border-color: var(--accent);
}
.land-val__kort:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.land-val__kort img {
  width: 5.2rem;
  height: 5.2rem;
  object-fit: contain;
  border-radius: var(--radius);
}
.land-val__kort strong,
.land-val__kort small {
  display: block;
}
.land-val__kort strong {
  font-size: 1.15rem;
  font-weight: 800;
}
.land-val__kort small {
  margin-top: 0.2rem;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.35;
}
@media (max-width: 620px) {
  .land-val {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .start-hero__rubrik { font-size: 1.6rem; }
}

/* --- Vuxensidan (om-skolan) --- */
.om-hero {
  max-width: 960px;
  margin: 1.2rem auto 0;
  padding: 0 1rem;
  text-align: center;
}
.om-hero__bild {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  display: block;
}
.om-hero__rubrik {
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.6px;
  margin: 1.2rem 0 0.4rem;
}
.om-hero__under {
  color: var(--text-muted);
  font-size: 1.15rem;
  max-width: 640px;
  margin: 0 auto;
}

.om-innehall {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
}
.om-sektion {
  margin: 2.5rem 0;
}
.om-sektion h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.8rem;
}
.om-sektion p {
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 0.8rem;
}

.om-sektion--citat {
  margin: 2rem 0;
}
.om-citat {
  margin: 0;
  padding: 1.4rem 1.6rem;
  background: var(--bg-card);
  border-left: 5px solid var(--cta);
  border-radius: var(--radius);
  font-size: 1.3rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
  box-shadow: var(--shadow);
}

.om-kort-rad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
.om-kort {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  box-shadow: var(--shadow-card);
}
.om-kort h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
}
.om-kort p { font-size: 0.98rem; margin: 0; line-height: 1.5; }

.om-lista {
  list-style: none;
  padding: 0;
  margin: 0;
}
.om-lista li {
  padding: 0.6rem 0 0.6rem 1.8rem;
  position: relative;
  font-size: 1.05rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--border);
}
.om-lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.6rem;
  color: var(--ok);
  font-weight: 800;
}
.om-lista li:last-child { border-bottom: 0; }

.om-steg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-bottom: 1.2rem;
}
.om-steg__item {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.om-steg__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.om-steg__item h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.om-steg__item p { font-size: 0.92rem; margin: 0; color: var(--text-muted); }
.om-klassrum {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: block;
}

.om-faq { margin: 0; }
.om-faq dt {
  font-weight: 800;
  font-size: 1.08rem;
  margin-top: 1.1rem;
}
.om-faq dd {
  margin: 0.3rem 0 0;
  padding-left: 0;
  color: var(--text);
  line-height: 1.6;
}

.om-sektion h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 1.6rem 0 0.5rem;
}
.om-kontakt {
  background: var(--bg-card);
  border-radius: var(--radius);
  border-left: 5px solid var(--accent);
  padding: 1rem 1.2rem;
  margin-top: 1rem;
  box-shadow: var(--shadow);
}
.om-kontakt h3 { margin: 0 0 0.3rem; }
.om-kontakt p { margin: 0; }
.om-signatur {
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 1.4rem;
}

.om-sektion--cta {
  text-align: center;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-card);
}
.om-sektion--cta h2 { font-size: 1.6rem; }
.om-cta-knapp {
  font-size: 1.1rem;
  padding: 0.8rem 1.8rem;
  margin-top: 0.5rem;
}

/* --- Innehållstabell (om-skolan) --- */
.om-tabell-wrap {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0.4rem 0 0.6rem;
}
.om-tabell {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  background: var(--bg-card);
  font-size: 0.95rem;
}
.om-tabell__kol-amne { width: 20%; }
.om-tabell__kol-summa { width: 11%; }
.om-tabell th,
.om-tabell td {
  padding: 0.5rem 0.2rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.om-tabell thead th {
  background: var(--pastell-matematik);
  font-size: 0.9rem;
}
.om-tabell th[scope="row"],
.om-tabell thead th:first-child {
  text-align: left;
  font-weight: 800;
  padding-left: 0.6rem;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.om-tabell tbody tr:nth-child(even) { background: rgba(79, 142, 247, 0.05); }
.om-tabell__summa { font-weight: 800; }
.om-tabell tfoot th,
.om-tabell tfoot td {
  border-top: 2px solid var(--border);
  border-bottom: 0;
  font-weight: 800;
  background: var(--pastell-matematik);
}
.om-tabell__noll { color: var(--text-muted); }
.om-tabell__not {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 0;
}

@media (max-width: 560px) {
  .om-kort-rad { grid-template-columns: 1fr; }
  .om-steg { grid-template-columns: 1fr; }
  .om-hero__rubrik { font-size: 1.8rem; }
  .om-citat { font-size: 1.1rem; }
  .om-tabell { font-size: 0.6rem; }
  .om-tabell th,
  .om-tabell td { padding: 0.45rem 0.02rem; }
  .om-tabell th[scope="row"],
  .om-tabell thead th:first-child { padding-left: 0.26rem; padding-right: 0.08rem; }
  .om-tabell thead th { font-size: 0.6rem; }
  .om-tabell tfoot th,
  .om-tabell tfoot td { font-size: 0.76em; }
  .om-tabell__kol-amne { width: 19%; }
  .om-tabell__kol-summa { width: 13%; }
}

/* --- Välkommen-banner --- */
.valkommen-banner {
  margin: 2rem auto 1rem;
  max-width: 720px;
  padding: 1.5rem 1.2rem;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.valkommen-banner__rubrik {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}
.valkommen-banner__under {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.95rem;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
}

.footer {
  text-align: center;
  padding: 2rem 1rem 5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.footer__cta {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  background: var(--cta);
  color: var(--cta-text);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 0.5rem;
}
.footer__cta:hover, .footer__cta:focus-visible {
  text-decoration: none;
  filter: brightness(1.05);
}

/* --- Global sidfot: ärlig, mjuk ansvarsfriskrivning på alla sidor --- */
.site-footer {
  margin-top: 2.5rem;
  padding: 1.3rem 1rem 2rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  /* Ytterst diskret, finstilt sidfot — texten ligger nära den vita panelen.
     OBS: kontrasten ligger klart under WCAG AA; medvetet nedtonad på begäran. */
  --footer-text: #BFBFC8;
}
.site-footer__inre {
  max-width: 640px;
  margin: 0 auto;
}
.site-footer__rubrik {
  margin: 0 0 0.55rem;
  font-size: 0.72rem; font-weight: 400; color: var(--footer-text);
}
.site-footer p {
  margin: 0 0 0.45rem;
  color: var(--footer-text);
  font-size: 0.66rem; line-height: 1.5;
}
.site-footer strong { font-weight: 400; color: inherit; }
.site-footer__kontakt { margin-top: 1rem; }
.site-footer a { color: var(--accent); font-weight: 600; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }

/* --- Feedback-sidan: lågaffektivt, visuellt formulär --- */
.feedback-intro {
  margin: 0 0 1.6rem;
  color: var(--text-muted);
  font-size: 1.05rem; line-height: 1.6;
}
.feedback-form { display: flex; flex-direction: column; gap: 1.3rem; }
.feedback-fraga {
  margin: 0; padding: 1.2rem 1.3rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.feedback-fraga__legend {
  display: block; padding: 0;
  font-size: 1.1rem; font-weight: 800; line-height: 1.4; color: var(--text);
}
.feedback-fraga__hjalp {
  margin: 0.35rem 0 0;
  font-size: 0.9rem; color: var(--text-muted);
}
.feedback-val-rad {
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  margin-top: 1rem;
}
.feedback-val {
  flex: 1 1 8rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  min-height: var(--tap);
  padding: 1rem 0.6rem;
  background: var(--bg-mid);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.feedback-val:hover { border-color: var(--accent); transform: translateY(-2px); }
.feedback-val input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.feedback-val__emoji { font-size: 2rem; line-height: 1; }
.feedback-val__text { font-weight: 700; color: var(--text); text-align: center; }
.feedback-val:has(input:checked) {
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.25);
}
.feedback-val:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.feedback-textarea {
  width: 100%; box-sizing: border-box;
  margin-top: 0.9rem;
  min-height: 5.5rem; padding: 0.8rem 0.9rem;
  background: var(--bg-mid);
  border: 2px solid var(--border); border-radius: var(--radius);
  font-family: inherit; font-size: 1rem; line-height: 1.55; color: var(--text);
  resize: vertical;
}
.feedback-textarea:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.2);
}
.feedback-skicka {
  align-self: center;
  min-height: var(--tap);
  margin-top: 0.4rem;
  padding: 0.9rem 2rem;
  background: var(--accent); color: #fff;
  border: none; border-radius: var(--radius);
  font-family: inherit; font-size: 1.1rem; font-weight: 800;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.15s ease;
}
.feedback-skicka:hover { filter: brightness(0.94); transform: translateY(-2px); }
.feedback-skicka:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .feedback-val, .feedback-skicka { transition: none; }
  .feedback-val:hover, .feedback-skicka:hover { transform: none; }
}

/* --- Årskursrutnät --- */
.ak-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 900px;
}
.ak-grid li { display: contents; }

.ak-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 190px;
  padding: 1.1rem 0.6rem 0.9rem;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-xl);
  text-align: center;
  text-decoration: none;
  color: var(--text);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  box-shadow: 0 2px 10px rgba(40, 50, 100, 0.08);
}
.ak-card:hover, .ak-card:focus-visible {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.ak-card--paborjad { border-color: var(--cta); }
.ak-card--senaste {
  border-color: var(--accent);
  border-width: 3px;
  background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(227,238,251,0.92) 100%);
}

/* Progressring runt årskurssiffran */
.ak-ring {
  position: relative;
  width: 88px;
  height: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ak-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ak-ring__spar {
  fill: none;
  stroke: rgba(40, 50, 100, 0.12);
  stroke-width: 6;
}
.ak-ring__fyllt {
  fill: none;
  stroke: var(--stjarna);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;          /* JS sätter rätt värde */
  transition: stroke-dashoffset 0.6s ease;
}
.ak-card--senaste .ak-ring__fyllt { stroke: var(--accent); }
.ak-ring__nr {
  position: absolute;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -2px;
}

.ak-card__namn {
  font-size: 1rem;
  margin-top: 0.5rem;
  font-weight: 700;
}
.ak-card__progress {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.3rem;
  min-height: 2.4em;
}
.ak-card__stjarnor {
  font-size: 1rem;
  font-weight: 800;
  color: var(--stjarna);
}
.ak-card__stjarnor--tom {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.9rem;
}
.ak-card__tackning {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Maskot + bubbla på senast spelade årskurs */
.ak-card__maskot {
  position: absolute;
  bottom: -6px;
  right: -8px;
  width: 56px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(40,50,100,0.25));
  animation: mjuk-in 0.5s ease-out;
}
.ak-card__harsist {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .ak-card__maskot { animation: none; }
  .ak-ring__fyllt { transition: none; }
}

/* --- Ämnesrutnät --- */
.amne-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.8rem;
  max-width: 1000px;
}
.amne-grid li { display: contents; }

.amne-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 180px;
  padding: 0.9rem 0.7rem;
  background: var(--pastell, var(--bg-card));
  border-radius: var(--radius-lg);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  text-align: center;
}
.amne-card:hover, .amne-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(40, 50, 100, 0.15);
  text-decoration: none;
}
.amne-card__ikon {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 auto 0.4rem;
}
.amne-card__ikon img, .amne-card__ikon svg { width: 100%; height: 100%; }
.amne-card__namn {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin: 0;
}
.amne-card__meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0.2rem 0 0.6rem;
  line-height: 1.3;
}
.amne-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cta);
  color: var(--cta-text);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 800;
  margin-top: auto;
}

/* Per-ämne pastellfärger */
.amne-card--matematik { --pastell: var(--pastell-matematik); }
.amne-card--svenska   { --pastell: var(--pastell-svenska); }
.amne-card--engelska  { --pastell: var(--pastell-engelska); }
.amne-card--no        { --pastell: var(--pastell-no); }
.amne-card--so        { --pastell: var(--pastell-so); }
.amne-card--bild      { --pastell: var(--pastell-bild); }
.amne-card--musik     { --pastell: var(--pastell-musik); }
.amne-card--idrott    { --pastell: var(--pastell-idrott); }
.amne-card--slojd     { --pastell: var(--pastell-slojd); }
.amne-card--teknik    { --pastell: var(--pastell-teknik); }

@media (max-width: 900px) {
  .amne-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .amne-grid { grid-template-columns: repeat(2, 1fr); }
  .amne-card { min-height: 160px; padding: 0.8rem 0.5rem; }
  .amne-card__ikon { width: 48px; height: 48px; }
}

/* --- Delområdeslista --- */
/* Visuellt dold, men läsbar för skärmläsare. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Framstegssammanfattning högst upp på ämnessidan. Antalet "klara" och barens
   bredd fylls klientsidan (progress.mjs) — servern vet bara att quizet finns,
   inte vad just denna elev klarat (framsteg lagras lokalt). */
.amne-progress {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.amne-progress__text { flex: none; font-weight: 700; }
.amne-progress__bar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--amne-farg, var(--accent)) 15%, #fff);
  overflow: hidden;
}
.amne-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--amne-farg, var(--accent));
  transition: width 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .amne-progress__fill { transition: none; }
}

/* "Fortsätt här" — första delområdet eleven ännu inte klarat (sätts klientsidan). */
.delomrade--nasta > .delomrade__link {
  border-width: 2px;
  border-color: var(--amne-farg, var(--accent));
  background: color-mix(in srgb, var(--amne-farg, var(--accent)) 6%, var(--bg-card));
}
.delomrade--nasta .delomrade__namn::before {
  content: "→ ";
  color: var(--amne-farg, var(--accent));
  font-weight: 800;
}
@media (prefers-reduced-motion: no-preference) {
  .delomrade--nasta .delomrade__namn::before {
    animation: nasta-puls 1.6s ease-in-out infinite;
  }
}
@keyframes nasta-puls {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.delomrade-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.delomrade__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  /* Vänster färgskena i ämnesfärgen — ett lugnt visuellt ankare per rad. */
  border-left: 4px solid color-mix(in srgb, var(--amne-farg, var(--accent)) 40%, var(--bg-card));
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  min-height: var(--tap);
}
.delomrade__link:hover { border-color: var(--amne-farg, var(--accent)); }
@media (prefers-reduced-motion: no-preference) {
  .delomrade__link { transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.15s ease; }
  .delomrade__link:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
  .delomrade__link:active { transform: scale(0.99); }
}
/* Namn + undertitel staplade i vänsterkolumnen; min-width:0 ger ellipsis-plats. */
.delomrade__rubrik { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.delomrade__namn { font-weight: 700; display: block; }
.delomrade__undertitel {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Varje delområde: kort-länk + fristående (i)-knapp. Knappen ligger UTANFÖR
   länken så att ett klick på den aldrig startar delområdet. */
.delomrade {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 0.5rem;
}
/* Lugn, klickbar informationsknapp — viker ut delområdets sammanfattning. */
.delomrade__info-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--amne-farg, var(--text-muted));
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.delomrade__info-knapp:hover { border-color: var(--amne-farg, var(--accent)); }
.delomrade__info-knapp:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.delomrade__info-knapp[aria-expanded="true"] {
  border-color: var(--amne-farg, var(--accent));
  background: color-mix(in srgb, var(--amne-farg, var(--accent)) 10%, var(--bg-card));
}
.delomrade__info-ikon { flex: none; width: 18px; height: 18px; }
/* Wrapper för knapp-gruppen (filmikon + infoknapp) i auto-kolumnen. */
.delomrade__knappar {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.delomrade__film-lank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--amne-farg, var(--text-muted));
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.delomrade__film-lank:hover { border-color: var(--amne-farg, var(--accent)); }
.delomrade__film-lank:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.delomrade__film-ikon { flex: none; width: 18px; height: 18px; }
/* Infopanelen viks ut under raden; döljs med hidden-attributet. */
.delomrade__panel {
  grid-column: 1 / -1;
  margin: 0.15rem 0 0.4rem;
  padding: 0.1rem 0.2rem;
}
.delomrade__sammanfattning {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
}
/* "Läs mer"-knapp i panelen — öppnar fördjupningen i en modal info-ruta. */
.delomrade__lasmer {
  margin-top: 0.5rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--amne-farg, var(--accent));
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.delomrade__lasmer::after { content: " →"; }
.delomrade__lasmer:hover { border-color: var(--amne-farg, var(--accent)); }
.delomrade__lasmer:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Fördjupnings-rutan: lugn, centrerad modal (native <dialog>) — längre
   pedagogisk text för den vetgirige eleven, föräldern eller läraren. */
.delomrade__dialog {
  width: min(92vw, 30rem);
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text);
  box-shadow: var(--shadow-card);
}
.delomrade__dialog::backdrop { background: rgba(27, 27, 47, 0.45); }
.delomrade__dialog-inner { padding: 1.3rem 1.4rem 1.4rem; }
.delomrade__huvudord {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--amne-farg, var(--accent));
}
.delomrade__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}
.delomrade__stang {
  margin-top: 1.1rem;
  min-height: var(--tap);
  padding: 0 1.5rem;
  border: none;
  border-radius: var(--radius);
  background: var(--cta);
  color: var(--cta-text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.delomrade__stang:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Film-spelaren: modal (native <dialog>) som öppnas på samma sida så att
   eleven slipper byta flik. Stort stäng-kryss uppe i hörnet. */
.delomrade__film-dialog {
  width: min(94vw, 48rem);
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: #000;
  overflow: visible;
  box-shadow: var(--shadow-card);
}
.delomrade__film-dialog::backdrop { background: rgba(27, 27, 47, 0.6); }
.delomrade__film-inner { position: relative; line-height: 0; }
.delomrade__film-spelare {
  display: block;
  width: 100%;
  max-height: 80vh;
  border-radius: var(--radius-lg);
  background: #000;
}
.delomrade__film-stang {
  position: absolute;
  top: -0.7rem;
  right: -0.7rem;
  z-index: 1;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--cta);
  color: var(--cta-text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
.delomrade__film-stang:hover { filter: brightness(1.08); }
.delomrade__film-stang:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Stjärnor: tomma är en lugn "ännu ej intjänad"-markör (≥3:1 mot vitt), fyllda
   dominerar visuellt. Tidigare #BBB (~2,3:1) läste som en vägg av misslyckande. */
.delomrade__stjarnor { font-size: 1.2rem; letter-spacing: 2px; }
.delomrade__stjarnor .stjarna { color: #8A8AA3; opacity: 0.45; }
.delomrade__stjarnor .stjarna.fyllad { color: var(--stjarna); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .delomrade__stjarnor .stjarna.fyllad {
    animation: stjarna-pop 0.25s ease-out both;
  }
}
@keyframes stjarna-pop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
/* Deltagande-delområde: en enda lugn klar-stjärna, ingen 3-stjärnig rad */
.delomrade__stjarnor--deltagande { font-size: 1.5rem; letter-spacing: 0; }

/* "Klart att spela" — lugn grön bock vid namn */
.delomrade--klar .delomrade__namn::after {
  content: " ✓";
  color: var(--ok);
  font-weight: 700;
  margin-left: 0.2em;
}

/* --- Kort --- */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.card--placeholder { text-align: center; }
.card--danger { border-left: 6px solid var(--fel); }

/* --- Knappar --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: white;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover, .btn:focus-visible { filter: brightness(1.1); text-decoration: none; }
.btn--danger { background: var(--fel); }
.btn--secondary { background: var(--bg-card); color: var(--text); border: 2px solid var(--border); }

/* --- Quiz-vy --- */
#quiz-app { padding: 1rem 0; }
.loading { text-align: center; color: var(--text-muted); }

.fraga {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.fraga__text { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.5rem; }

/* Lyssna-knapp (uppläsning via Web Speech API) */
.tal-rad { margin: 0 0 1rem; }

/* --- Kognitiv fall-back-panel (Talslinje / Del-helhet) --- */
.fallback-knapp { margin-left: 0.4rem; }
.fallback-knapp--aktiv { background: var(--accent); color: #fff; }
.fallback-panel {
  margin: 0 0 1rem;
  padding: 0.9rem;
  background: var(--bg-card, #fff);
  border: 2px dashed var(--border, #c9d2e0);
  border-radius: var(--radius, 12px);
}
.fallback-panel[hidden] { display: none; }

.tal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.4rem 1rem;
  background: var(--bg);
  border: 2px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tal-btn:hover, .tal-btn:focus-visible {
  background: var(--accent);
  color: white;
}
.tal-btn--aktiv {
  background: var(--accent);
  color: white;
  animation: tal-puls 1.4s ease-in-out infinite;
}
@keyframes tal-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 142, 247, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(79, 142, 247, 0); }
}
.forklaring .tal-btn {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  min-height: 38px;
}
/* Stor "Hör frågan"-knapp för åk 1–2 (icke-läsare) */
.tal-btn--stor {
  min-height: 56px;
  padding: 0.7rem 1.5rem;
  font-size: 1.15rem;
  border-width: 3px;
}
/* Per-stycke-knapp — kompakt, diskret, läggs efter ett enskilt textstycke
   som är längre än ~100 tecken. Används av lyssna-stycken.mjs. */
.tal-btn-wrap {
  display: block;
  margin: 0.35rem 0 0.85rem;
}
li > .tal-btn-wrap,
dd > .tal-btn-wrap {
  margin: 0.3rem 0 0.2rem;
}
.tal-btn--stycke {
  min-height: 34px;
  padding: 0.18rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-width: 1px;
  opacity: 0.85;
}
.tal-btn--stycke:hover,
.tal-btn--stycke:focus-visible {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .tal-btn--aktiv { animation: none; }
}
.fraga__bild { max-width: min(420px, 100%); height: auto; margin: 0 auto 1rem; display: block; border-radius: var(--radius); }
/* Zoombar frågebild — klick öppnar helskärms-zoom */
.fraga__bild--zoombar { cursor: zoom-in; transition: transform 0.12s ease; }
.fraga__bild--zoombar:hover { transform: scale(1.03); }
.bild-zoom {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(20, 24, 31, 0.85);
  cursor: zoom-out;
}
.bild-zoom__bild {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
/* Ämnesikon som visuellt frågestöd */
.fraga__ikon { width: 72px; height: 72px; margin: 0 auto 0.8rem; display: block; }
/* Per-fråge-video — kort pedagogiskt klipp före svarsalternativen */
.fraga__video { margin: 0 auto 1rem; max-width: 460px; }
.fraga__video-titel { font-size: 0.95rem; font-weight: 700; color: var(--text-muted); margin: 0 0 0.4rem; }
.fraga__video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.fraga__video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.alternativ {
  display: grid;
  gap: 0.6rem;
}
.alt-btn {
  min-height: var(--tap);
  padding: 0.8rem 1rem;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 1.1rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.alt-btn:hover { border-color: var(--accent); }
/* Markerat men ej inskickat svar — tydlig neutral markering */
.alt-btn--vald {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent) inset;
  font-weight: 700;
}
/* Errorless feedback — rätt = lugn grön, felval = neutral nedtoning (ingen röd) */
.alt-btn--ratt {
  background: #E3F4EA;
  border-color: var(--ok);
  color: #1B6B4F;                 /* mörk grön — WCAG AAA mot ljusgrön bakgrund */
  font-weight: 700;
}
.alt-btn--bortvald {
  opacity: 0.5;
  background: var(--bg);
  border-color: var(--border);
  color: var(--text-muted);
}
.alt-btn:disabled { cursor: default; }
/* Skicka in-knapp för flervalsfrågor — bred och tydlig under alternativen */
.skicka-btn { display: block; width: 100%; }
.skicka-btn:disabled { opacity: 0.45; cursor: default; }
/* Bildsvar (emoji) — visas stort och centrerat i stället för som text */
.alt-btn--bild { font-size: 2.6rem; text-align: center; padding: 0.5rem; }
.alt-btn--bild img { max-width: 100%; max-height: 100px; display: block; margin: 0 auto; }
/* Bildkort i drag-och-släpp */
.dragdrop__kort--bild img { max-width: 100%; max-height: 64px; display: block; margin: 0 auto; }

/* Inbäddade inline-SVG-symboler (plattformssäkra — lika på alla enheter) */
.alt-btn--bild svg,
.dragdrop__kort--bild svg { width: 1em; height: 1em; display: block; margin: 0 auto; }
.kretslopp-bit svg,
.kretslopp-mark svg { width: 2.4rem; height: 2.4rem; display: block; margin: auto; }

/* Neutral, vänlig mikrotext vid felförsök — aldrig röd, aldrig bestraffande */
.fraga__mikrotext {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  background: #EEF2FB;
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  margin: 0 0 0.9rem;
  text-align: center;
}

.forklaring {
  background: #FFFAE3;
  border-left: 4px solid #FFC93C;
  padding: 0.8rem 1rem;
  margin: 1rem 0 0;
  border-radius: 8px;
  font-size: 0.95rem;
}

/* --- Video-intro (YouTube-nocookie embed innan quiz) --- */
.video-intro {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1rem 1.5rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 1rem;
}
.video-intro__titel {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 0.3rem;
  line-height: 1.25;
}
.video-intro__kanal {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}
.video-intro__embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;          /* 16:9 */
  height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  margin-bottom: 1rem;
}
.video-intro__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-intro__kallkritik {
  background: #FFF8E1;
  border-left: 4px solid var(--cta);
  padding: 0.9rem 1rem;
  border-radius: 8px;
  margin: 0 0 1rem;
}
.video-intro__kallkritik h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
}
.video-intro__kallkritik dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.8rem;
  font-size: 0.95rem;
}
.video-intro__kallkritik dt {
  font-weight: 700;
  color: var(--text-muted);
}
.video-intro__kallkritik dd {
  margin: 0;
}
.video-intro__hint {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 0.8rem;
}
.video-intro__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.btn--cta {
  background: var(--cta);
  color: var(--cta-text);
}

/* --- Drag-och-släpp med Pointer Events (mus + touch) --- */
.dragdrop__hjalp {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}
.dragdrop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.dragdrop__kolumn {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dragdrop__kort {
  min-height: var(--tap);
  padding: 0.7rem 0.9rem;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s, border-color 0.15s, opacity 0.15s;
  user-select: none;
  -webkit-user-select: none;
}
.dragdrop__kort--vanster {
  touch-action: none;          /* förhindra scroll under drag på touch */
  cursor: grab;
}
.dragdrop__kort--vanster:active {
  cursor: grabbing;
}
.dragdrop__kort:hover:not(:disabled) { border-color: var(--accent); }
.dragdrop__kort--vald {
  background: #E3EEFB;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.dragdrop__kort--draggar {
  opacity: 0.25;
}
.dragdrop__kort--dropmal {
  background: #E3EEFB;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent);
  transform: scale(1.02);
}
.dragdrop__kort--matchad {
  background: #D4F5E6;
  border-color: var(--ok);
  color: var(--ok);
  opacity: 0.7;
}
/* Felmatch: neutral, lugn signal — ingen röd, ingen skakning (errorless) */
.dragdrop__kort--miss {
  background: #EEF2FB;
  border-color: var(--accent);
  animation: dragdrop-puls 0.5s ease-in-out;
}
.dragdrop__kort--wiggle {
  animation: dragdrop-puls 0.4s ease-in-out;
}
.dragdrop__kort:disabled { cursor: default; }
/* Bildkort (emoji) — visas stort i stället för som text */
.dragdrop__kort--bild { font-size: 2.4rem; }

/* "Ghost" — kopian av kortet som följer pekaren under drag. */
.dragdrop__ghost {
  position: fixed;
  pointer-events: none;
  margin: 0;
  z-index: 1000;
  background: var(--bg-card);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
  transform-origin: center;
  transition: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lugn "andnings"-puls — ersätter den ryckiga sidledsskakningen.
   Förutsägbar, mjuk rörelse som inte triggar sensorisk överbelastning. */
@keyframes dragdrop-puls {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .dragdrop__kort--miss, .dragdrop__kort--wiggle { animation: none; }
}

/* --- Surikattrappan (typ: trappa) --- */
.trappa { margin: 0.6rem 0 0.4rem; }
.trappa-scen {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-height: 210px;
  padding: 0 6px;
  overflow-x: auto;
}
.trappa-steg {
  --steg: 0;
  flex: 0 0 auto;
  width: 58px;
  height: calc(52px + var(--steg) * 26px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: linear-gradient(180deg, transparent 0 10px, #E7EDF6 10px);
  border-radius: 12px 12px 0 0;
}
.trappa-steg__plats {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trappa-steg:not(.trappa-steg--given):not(.trappa-steg--fylld) .trappa-steg__plats {
  border: 2.5px dashed #B9C6D8;
}
.trappa-steg--aktiv .trappa-steg__plats {
  border-color: var(--accent);
  border-style: solid;
}
.trappa-steg--glow .trappa-steg__plats {
  animation: trappa-glow 1.3s ease-in-out infinite;
}
@keyframes trappa-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 142, 247, 0); }
  50%      { box-shadow: 0 0 0 7px rgba(79, 142, 247, 0.32); }
}
.trappa-form {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  box-shadow: 0 2px 5px rgba(40, 50, 100, 0.18);
}
.trappa-form--cirkel  { border-radius: 50%; }
.trappa-form--kvadrat { border-radius: 9px; }
.trappa-form--triangel {
  clip-path: polygon(50% 4%, 96% 96%, 4% 96%);
  box-shadow: none;
}
.trappa-form--text { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.trappa-surikat {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 3;
  transition: transform 400ms ease-out;
}
.trappa-surikat img {
  display: block;
  width: 50px;
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(40, 50, 100, 0.28));
}
.trappa-surikat--firar img { animation: maskot-firar 0.7s ease-out; }
.trappa-bricka {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 0.9rem;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
}
.trappa-bricka__knapp {
  min-width: 64px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: none;
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(40, 50, 100, 0.12);
  cursor: pointer;
}
.trappa-bricka__knapp:hover:not(:disabled) { box-shadow: 0 3px 10px rgba(40, 50, 100, 0.2); }
.trappa-bricka__knapp:disabled { cursor: default; opacity: 0.7; }
.trappa-bricka__knapp--studs { animation: trappa-studs 280ms ease; }
@keyframes trappa-studs {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-11px); }
}
.trappa-bricka__knapp--gungar { animation: trappa-gungar 1.1s ease-in-out infinite; }
@keyframes trappa-gungar {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .trappa-surikat { transition: none; }
  .trappa-surikat--firar img,
  .trappa-bricka__knapp--studs,
  .trappa-bricka__knapp--gungar { animation: none; }
  .trappa-steg--glow .trappa-steg__plats { animation: none; box-shadow: 0 0 0 5px rgba(79, 142, 247, 0.3); }
}

/* --- Surikatens korg (typ: korg) --- */
.korg-scen {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 0.6rem 0;
}
.korg-surikat {
  width: 84px;
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 3px 6px rgba(40, 50, 100, 0.22));
}
.korg-surikat--firar { animation: maskot-firar 0.7s ease-out; }
.korg-korg {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  min-height: 96px;
  padding: 12px;
  background: #F3E3C9;
  border: 3px solid #D8BE94;
  border-radius: 14px 14px 22px 22px;
}
.korg-falt {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.korg-objekt {
  min-width: 64px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  border: none;
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(40, 50, 100, 0.12);
  cursor: pointer;
}
.korg-korg .korg-objekt {
  background: transparent;
  box-shadow: none;
  min-width: 52px;
  min-height: 52px;
}
.korg-objekt:disabled { cursor: default; }
.korg-objekt--pop { animation: korg-pop 280ms ease-out; }
@keyframes korg-pop {
  0%   { transform: scale(0.4); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.korg-objekt--lyser {
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(244, 180, 0, 0.55);
}

/* --- Surikatstigen (typ: stig) --- */
.stig { margin: 0.6rem 0; }
.stig-svg {
  width: 100%;
  height: auto;
  display: block;
  background: linear-gradient(170deg, #EAF6EC 0%, #E6F0FB 100%);
  border-radius: 16px;
}
.stig-nod { cursor: pointer; }
.stig-nod__hit { fill: transparent; }
.stig-nod__cirkel {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 1.4;
  transition: fill 200ms ease;
}
.stig-nod__text {
  fill: #fff;
  font-weight: 800;
  font-size: 8px;
  font-family: inherit;
  pointer-events: none;
}
.stig-nod--nasta .stig-nod__cirkel {
  stroke: var(--stjarna);
  stroke-width: 3.2;
}
.stig-nod--besokt .stig-nod__cirkel { fill: #06A77D; }
.stig-trail {
  stroke: #F4843C;
  stroke-width: 3.4;
  stroke-linecap: round;
  fill: none;
  transition: stroke-dashoffset 450ms ease-out;
}
.stig-surikat {
  transition: transform 450ms ease-out;
}
.stig-surikat__img { transform-box: fill-box; transform-origin: center; }
.stig-surikat--firar .stig-surikat__img { animation: maskot-firar 0.7s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .korg-objekt--pop,
  .korg-surikat--firar,
  .stig-surikat--firar .stig-surikat__img { animation: none; }
  .stig-surikat { transition: none; }
  .stig-trail { transition: none; }
}

/* --- Surikatens skafferi (typ: skafferi) — kit-driven SVU --- */
.skafferi { margin: 0.6rem 0 0.2rem; }
.skafferi-mira { display: flex; justify-content: center; margin-bottom: 0.4rem; }
.skafferi-mira-figur { width: 76px; }
.skafferi-mira-svg { width: 100%; height: auto; display: block; }
.skafferi-ramar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.skafferi-ram {
  display: grid;
  grid-template-columns: repeat(5, 52px);
  grid-auto-rows: 52px;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(160deg, #E7C894, #D8AD6B);
  box-shadow: 0 6px 12px rgba(90, 60, 20, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.4);
}
/* hela ramen tänds en gång när den blivit full */
.skafferi-ram--lyser { animation: skafferi-ramglow 1s ease; }
@keyframes skafferi-ramglow {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.16) drop-shadow(0 0 14px rgba(255, 220, 120, 0.9)); }
}
.skafferi-fack {
  border-radius: 12px;
  background: #C79A5B;
  box-shadow: inset 0 4px 8px rgba(60, 40, 15, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  line-height: 1;
}
/* fack utanför uppgiften (ramen rymmer 10 men målet kan vara färre) */
.skafferi-fack--ej { background: #b98f55; box-shadow: inset 0 3px 6px rgba(60, 40, 15, 0.3); }
/* nästa lediga fack när mat dras över ramen = inbjudande grön.
   animation: none släcker kitets vk-puls medan den gröna bekräftelsen visas. */
.skafferi-fack--redo {
  animation: none;
  background: #DBEFC0;
  box-shadow: inset 0 0 0 4px var(--ok);
}
/* maten "sätter sig" i facket med en liten studs */
.skafferi-mat { animation: skafferi-pop 0.34s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes skafferi-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.skafferi-hog {
  position: relative;
  width: 100%;
  height: 220px;
  margin-top: 0.8rem;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.skafferi-matbit {
  position: absolute;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  box-shadow: 0 4px 6px rgba(90, 60, 20, 0.28), inset 0 -3px 6px rgba(120, 90, 40, 0.2);
  font-size: 1.7rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;          /* förhindra scroll under touch-drag */
}
.skafferi-matbit:active { cursor: grabbing; }
.skafferi-matbit:hover {
  box-shadow: 0 6px 10px rgba(90, 60, 20, 0.32), inset 0 -3px 6px rgba(120, 90, 40, 0.2);
}
/* "ghost" — kopian som följer pekaren under drag (lyft känns i skuggan) */
.skafferi-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
/* talsymbolen tonar in först när skafferiet är fullt */
.skafferi-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 280px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: skafferi-tonain 0.6s ease both;
}
@keyframes skafferi-tonain {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.skafferi-tal-stor {
  display: block;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: #E0913F;
}
.skafferi-tal-delar {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ok);
  margin-top: 0.2rem;
}
@media (max-width: 480px) {
  .skafferi-ram {
    grid-template-columns: repeat(5, 44px);
    grid-auto-rows: 44px;
    gap: 6px;
    padding: 9px;
  }
  .skafferi-fack { font-size: 1.4rem; }
}

/* --- Bygg surikatens bo (typ: bygg-bo) — självinstruerande visuell uppgift --- */
.bygg-bo { margin: 0.6rem 0 0.2rem; }
.bygg-bo-scen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.bygg-bo-mira-figur { flex: 0 0 auto; width: 76px; }
.bygg-bo-mira-svg { width: 100%; height: auto; display: block; }
.bygg-bo-bo {
  position: relative;
  width: min(420px, 92vw);
  aspect-ratio: 420 / 300;
  transition: filter 0.4s ease;
}
.bygg-bo-bo--klar { filter: drop-shadow(0 0 18px rgba(255, 200, 110, 0.75)); }
.bygg-bo-bo-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bygg-bo-plats {
  position: absolute;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.45s ease;
}
/* grön bekräftelse när rätt sort dras över rätt plats */
.bygg-bo-plats--redo { box-shadow: 0 0 0 4px var(--ok), 0 0 16px 4px rgba(6, 167, 125, 0.45); }
/* tvåfärgad avtäckning vid avslut — additionens två delar blir sedda */
.bygg-bo-plats--grupp-a { background: rgba(154, 106, 58, 0.4); }
.bygg-bo-plats--grupp-b { background: rgba(111, 154, 58, 0.4); }
.bygg-bo-mat { font-size: 1.7rem; line-height: 1; animation: bygg-bo-pop 0.36s cubic-bezier(0.3, 1.55, 0.5, 1); }
@keyframes bygg-bo-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.bygg-bo-hogar { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 0.8rem; }
.bygg-bo-hog-kort { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.bygg-bo-hog-titel { margin: 0; font-size: 1rem; font-weight: 800; }
.bygg-bo-hog {
  position: relative;
  width: 240px;
  height: 130px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.bygg-bo-objekt {
  position: absolute;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  box-shadow: 0 4px 6px rgba(90, 60, 20, 0.28), inset 0 -3px 6px rgba(120, 90, 40, 0.2);
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.bygg-bo-objekt:active { cursor: grabbing; }
.bygg-bo-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border-radius: 14px;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.32));
}
.bygg-bo-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 320px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: bygg-bo-tonain 0.6s ease both;
}
@keyframes bygg-bo-tonain {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.bygg-bo-tal-uttryck { display: block; font-size: 2.2rem; font-weight: 800; line-height: 1; color: #E0913F; }
.bygg-bo-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }
@media (max-width: 480px) {
  .bygg-bo-hog { width: 44vw; min-width: 140px; }
}

/* --- Mönstervakten (typ: monstervakt) — självinstruerande visuell uppgift --- */
.monster { margin: 0.6rem 0 0.2rem; }
.monster-mira { display: flex; justify-content: center; margin-bottom: 0.4rem; }
.monster-mira-figur { width: 76px; }
.monster-mira-svg { width: 100%; height: auto; display: block; }
.monster-bro-yttre { overflow-x: auto; padding: 6px 2px 10px; }
.monster-bro {
  display: flex;
  gap: 7px;
  width: max-content;
  margin: 0 auto;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #cdeaf0, #bfe2e8);
  box-shadow: inset 0 2px 10px rgba(40, 90, 100, 0.3);
}
.monster-bricka {
  width: 50px;
  height: 62px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.monster-bricka--fylld {
  background: linear-gradient(180deg, #e6b87b, #d8a566);
  box-shadow: 0 4px 6px rgba(90, 60, 20, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.45);
}
.monster-bricka--lucka {
  background: rgba(40, 90, 100, 0.16);
  box-shadow: inset 0 4px 9px rgba(30, 70, 80, 0.4);
}
/* nästa lucka när rätt del dras över bron = inbjudande grön.
   animation: none släcker kitets vk-puls medan den gröna bekräftelsen visas. */
.monster-bricka--redo {
  animation: none;
  background: #dff0c4;
  box-shadow: inset 0 0 0 4px var(--ok), 0 0 18px 4px rgba(6, 167, 125, 0.5);
}
/* stödfunktion: blinkar för att visa mönsterkopplingen */
.monster-bricka--tips { animation: monster-tips 0.55s ease-in-out 2; }
@keyframes monster-tips {
  0%, 100% { filter: none; transform: none; }
  50%      { filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 210, 110, 0.95)); transform: scale(1.08); }
}
.monster-bricka-knapp {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
}
/* en nylagd del "klickar fast" med en liten studs */
.monster-bricka--lagd .monster-form { animation: monster-pop 0.36s cubic-bezier(0.3, 1.55, 0.5, 1); }
@keyframes monster-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
/* hela stigen lyser i en harmonisk våg när den är hel */
.monster-bro--klar .monster-bricka--fylld {
  animation: monster-vag 1.3s ease-in-out 2;
  animation-delay: calc(var(--i) * 0.06s);
}
@keyframes monster-vag {
  0%, 100% { filter: none; transform: translateY(0); }
  45%      { filter: brightness(1.22) drop-shadow(0 0 12px rgba(255, 215, 120, 0.95)); transform: translateY(-6px); }
}
.monster-form { width: 36px; height: 36px; display: block; }
.monster-forrad { margin-top: 0.9rem; text-align: center; }
.monster-forrad-rad { display: flex; gap: 16px; justify-content: center; }
.monster-kalla {
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 16px;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  box-shadow: 0 5px 8px rgba(90, 60, 20, 0.28), inset 0 -3px 7px rgba(120, 90, 40, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.monster-kalla:active { cursor: grabbing; }
.monster-kalla .monster-form { width: 44px; height: 44px; }
.monster-bricka-knapp:focus-visible,
.monster-kalla:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.monster-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.32));
}
.monster-ghost .monster-form { width: 44px; height: 44px; }

/* --- Visuellt UI-kit (vk) — tysta visuella ledtrådar --- */

/* Mönster A: siluett-mål — blek, lågkontrast "skugga" av det som ska dit.
   Formen (border-radius) bär informationen; färgen är bara komplement. */
.vk-silhuett {
  --vk-farg: #6f8aa6;
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 3px dashed var(--vk-farg);
  background: var(--vk-farg);
  opacity: 0.3;
  animation: vk-tonain 0.4s ease both;
  animation-delay: calc(var(--vk-i, 0) * 0.08s);
}
@keyframes vk-tonain {
  from { opacity: 0; }
  to   { opacity: 0.3; }
}
.vk-silhuett--cirkel  { border-radius: 50%; }
.vk-silhuett--kvadrat { border-radius: 8px; }
.vk-silhuett--bar     { border-radius: 46% 54% 50% 50% / 60% 60% 40% 40%; }
.vk-silhuett--lov     { border-radius: 50% 6px 50% 6px; }
.vk-silhuett--pinne    { width: 16px; height: 44px; border-radius: 7px; }
.vk-silhuett--grastuss { border-radius: 50% 50% 18% 18% / 72% 72% 28% 28%; }
.vk-silhuett--triangel { border: none; clip-path: polygon(50% 6%, 95% 94%, 5% 94%); }

/* Mönster B: Miras kroppsspråk — en lugn lutning/pose i taget */
.vk-mira,
[class*="vk-mira-blick--"],
[class*="vk-mira-gest--"] {
  transition: transform 0.4s ease;
  transform-origin: 50% 92%;
}
.vk-mira-blick--vanster { transform: rotate(-7deg) translateX(-3px); }
.vk-mira-blick--hoger   { transform: rotate(7deg) translateX(3px); }
.vk-mira-blick--upp     { transform: translateY(-3px) scale(1.02); }
.vk-mira-blick--ner     { transform: translateY(4px) scale(0.98); }
.vk-mira-gest--erbjud   { transform: rotate(-5deg) translateY(-2px); }
.vk-mira-gest--peka     { transform: rotate(8deg) translateX(4px); }
.vk-mira-gest--firar    { animation: vk-firar 0.6s ease 2; }
@keyframes vk-firar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Mönster C: en levande punkt — mjuk "andnings"-puls, aldrig blink */
.vk-puls { animation: vk-puls 1.6s ease-in-out infinite; }
@keyframes vk-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 142, 247, 0); }
  50%      { box-shadow: 0 0 0 8px rgba(79, 142, 247, 0.26); }
}

/* Reduced motion: rörelsen tas bort men ledtråden förblir SYNLIG —
   pulsen blir en statisk ring, inte osynlig. */
@media (prefers-reduced-motion: reduce) {
  .vk-puls {
    animation: none;
    box-shadow: 0 0 0 5px rgba(79, 142, 247, 0.4);
  }
  .vk-silhuett { animation: none; opacity: 0.3; }
}

/* --- Tiokamrater (typ: tiokamrater) — självinstruerande visuell uppgift --- */
.tiokamrater { margin: 0.6rem 0 0.2rem; }
.tiokamrater-scen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.tiokamrater-mira-figur { flex: 0 0 auto; width: 80px; }
.tiokamrater-mira-svg { width: 100%; height: auto; display: block; }
.tiokamrater-ram {
  display: grid;
  grid-template-columns: repeat(5, 52px);
  grid-auto-rows: 52px;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(160deg, #E7C894, #D8AD6B);
  box-shadow: 0 6px 12px rgba(90, 60, 20, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.4);
}
.tiokamrater-fack {
  border-radius: 12px;
  background: #C79A5B;
  box-shadow: inset 0 4px 8px rgba(60, 40, 15, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  line-height: 1;
  transition: background 0.45s ease;
}
/* nästa lediga fack när ett föremål dras över ramen = inbjudande grön */
.tiokamrater-fack--redo {
  background: #DBEFC0;
  box-shadow: inset 0 0 0 4px var(--ok);
}
/* tvåfärgad avtäckning vid avslut — talparets två delar blir sedda */
.tiokamrater-fack--grupp-a { background: #cfe0f5; }
.tiokamrater-fack--grupp-b { background: #d6eccf; }
.tiokamrater-mat { font-size: 1.7rem; line-height: 1; }
.tiokamrater-mat--lagd { animation: tiok-pop 0.34s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes tiok-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.tiokamrater-hog {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 150px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.tiokamrater-objekt {
  position: absolute;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  box-shadow: 0 4px 6px rgba(90, 60, 20, 0.28), inset 0 -3px 6px rgba(120, 90, 40, 0.2);
  font-size: 1.7rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.tiokamrater-objekt:active { cursor: grabbing; }
.tiokamrater-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.tiokamrater-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 280px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.7rem 1.2rem;
  box-shadow: var(--shadow);
  animation: tiok-tonain 0.6s ease both;
}
@keyframes tiok-tonain {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.tiokamrater-tal-uttryck {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: #E0913F;
}
@media (max-width: 480px) {
  .tiokamrater-ram {
    grid-template-columns: repeat(5, 44px);
    grid-auto-rows: 44px;
    gap: 6px;
    padding: 9px;
  }
  .tiokamrater-fack, .tiokamrater-mat { font-size: 1.4rem; }
}

/* --- Var hör djuren hemma? (typ: naturens-hem) — självinstruerande visuell uppgift --- */
.naturens-hem { margin: 0.6rem 0 0.2rem; }
.naturens-hem-mira { display: flex; justify-content: center; margin-bottom: 0.4rem; }
.naturens-hem-mira-figur { width: 76px; }
.naturens-hem-mira-svg { width: 100%; height: auto; display: block; }
.naturens-hem-zoner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 18px;
  overflow: hidden;
}
.naturens-hem-zon {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 84px;
  padding: 8px 10px 8px 64px;
  transition: box-shadow 0.2s ease;
}
.naturens-hem-zon-ikon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.3rem;
  line-height: 1;
}
/* miljöerna som självförklarande visuella scener — luft, land, vatten */
.naturens-hem-zon--luft   { background: linear-gradient(180deg, #d6ecfb, #c2e0f6); }
.naturens-hem-zon--land   { background: linear-gradient(180deg, #d6ecc7, #bfe0a8); }
.naturens-hem-zon--vatten { background: linear-gradient(180deg, #b9e2ec, #98cfe0); }
/* grön bekräftelse när rätt djur dras över sin zon */
.naturens-hem-zon--redo {
  box-shadow: inset 0 0 0 4px var(--ok), inset 0 0 22px 4px rgba(6, 167, 125, 0.4);
}
.naturens-hem-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.naturens-hem-slot {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.naturens-hem-mat {
  font-size: 1.9rem;
  line-height: 1;
  animation: nh-pop 0.36s cubic-bezier(0.3, 1.55, 0.5, 1);
}
@keyframes nh-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
/* zonerna lyser i tur och ordning när allt är sorterat */
.naturens-hem-zoner--klar .naturens-hem-zon {
  animation: nh-lyser 0.9s ease;
  animation-delay: calc(var(--z) * 0.3s);
}
@keyframes nh-lyser {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.16) drop-shadow(0 0 14px rgba(255, 220, 120, 0.85)); }
}
.naturens-hem-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 170px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.naturens-hem-djur {
  position: absolute;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  box-shadow: 0 4px 6px rgba(90, 60, 20, 0.28), inset 0 -3px 6px rgba(120, 90, 40, 0.2);
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.naturens-hem-djur:active { cursor: grabbing; }
.naturens-hem-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}

/* --- Begrepp – sortera (typ: kategorisera) — datadrivna kategorizoner --- */
.kategorisera { margin: 0.6rem 0 0.2rem; }
/* Begreppshögen — kort att sortera ligger blandade här tills de placerats. */
.kategorisera__hog {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  margin-bottom: 1rem;
  padding: 12px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
}
.kategorisera__kort {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0.6rem 0.9rem;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  cursor: grab;
  touch-action: none;          /* förhindra scroll under drag på touch */
  transition: transform 0.1s ease, border-color 0.15s, opacity 0.15s;
  user-select: none;
  -webkit-user-select: none;
}
.kategorisera__kort:hover:not(:disabled) { border-color: var(--accent); }
.kategorisera__kort:active { cursor: grabbing; }
.kategorisera__kort--bild { font-size: 2.4rem; padding: 0.4rem 0.7rem; }
.kategorisera__kort--bild svg { width: 1em; height: 1em; display: block; }
.kategorisera__kort--draggar { opacity: 0.25; }

/* Kategorizonerna — 2–4 stycken sida vid sida, namn + ev. ikon från data. */
.kategorisera__zoner {
  display: grid;
  grid-template-columns: repeat(var(--kat-antal, 2), 1fr);
  gap: 8px;
}
.kategorisera__zon {
  display: flex;
  flex-direction: column;
  min-height: 130px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.kategorisera__zon-huvud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.kategorisera__zon-ikon { font-size: 1.6rem; line-height: 1; }
.kategorisera__zon-ikon svg { width: 1em; height: 1em; display: block; }
.kategorisera__zon-namn { font-size: 1rem; }
.kategorisera__zon-fack {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 10px;
}
/* grön bekräftelse när rätt kort dras över sin zon */
.kategorisera__zon--redo {
  border-color: var(--ok);
  border-style: solid;
  box-shadow: inset 0 0 0 3px var(--ok), inset 0 0 22px 4px rgba(6, 167, 125, 0.35);
}
.kategorisera__mat {
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 600;
  animation: kat-pop 0.36s cubic-bezier(0.3, 1.55, 0.5, 1);
}
.kategorisera__mat--bild { font-size: 2rem; }
.kategorisera__mat--bild svg { width: 1em; height: 1em; display: block; }
@keyframes kat-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
/* zonerna lyser i tur och ordning när allt är sorterat */
.kategorisera__zoner--klar .kategorisera__zon {
  animation: kat-lyser 0.9s ease;
  animation-delay: calc(var(--z) * 0.25s);
}
@keyframes kat-lyser {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.12) drop-shadow(0 0 14px rgba(255, 220, 120, 0.85)); }
}
/* "Ghost" — kopian av kortet som följer pekaren under drag. */
.kategorisera__ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border: 2px solid var(--accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  transform-origin: center;
  transition: none;
}
@media (max-width: 420px) {
  /* På smala skärmar: max två zoner per rad så tap-målen förblir stora. */
  .kategorisera__zoner { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .kategorisera__mat, .kategorisera__zoner--klar .kategorisera__zon { animation: none; }
}

/* --- Lyssna och hämta (typ: engelska-djur) — självinstruerande visuell uppgift --- */
.engelska-djur { margin: 0.6rem 0 0.2rem; }
.engelska-djur-scen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 140px;
}
.engelska-djur-mira-figur { width: 84px; flex: 0 0 auto; }
.engelska-djur-mira-svg { width: 100%; height: auto; display: block; }
/* Miras pratbubbla — tryck för att höra det engelska ordet */
.engelska-djur-bubbla {
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50% 50% 50% 8px;
  background: #FFF7E6;
  box-shadow: 0 4px 10px rgba(90, 60, 20, 0.2);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.engelska-djur-bubbla:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }
/* djurformad målplats hos Mira */
.engelska-djur-slot {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: box-shadow 0.2s ease;
}
.engelska-djur-slot--redo {
  box-shadow: 0 0 0 4px var(--ok), 0 0 18px 5px rgba(6, 167, 125, 0.45);
}
.engelska-djur-mat {
  font-size: 2.2rem;
  line-height: 1;
  animation: ed-pop 0.36s cubic-bezier(0.3, 1.55, 0.5, 1);
}
@keyframes ed-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.engelska-djur-prickar {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 0.6rem 0;
}
.engelska-djur-prick {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.3s ease;
}
.engelska-djur-prick--klar { background: var(--ok); }
.engelska-djur-val {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 0.4rem;
}
.engelska-djur-val-djur {
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  box-shadow: 0 4px 6px rgba(90, 60, 20, 0.28), inset 0 -3px 6px rgba(120, 90, 40, 0.2);
  font-size: 1.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.engelska-djur-val-djur:active { cursor: grabbing; }
.engelska-djur-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  font-size: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}

/* --- Bokstavsboet (typ: bokstavsboet) — självinstruerande visuell uppgift --- */
.bokstavsboet { margin: 0.6rem 0 0.2rem; }
.bokstavsboet-scen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.bokstavsboet-mira-figur { width: 76px; flex: 0 0 auto; }
.bokstavsboet-mira-svg { width: 100%; height: auto; display: block; }
.bokstavsboet-bo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 22px 22px 26px 26px;
  background: linear-gradient(160deg, #E7C894, #D8AD6B);
  box-shadow: 0 6px 12px rgba(90, 60, 20, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.4);
  transition: filter 0.4s ease;
}
.bokstavsboet-bo--klar { filter: drop-shadow(0 0 18px rgba(255, 200, 110, 0.75)); }
/* den stora bokstaven ÄR instruktionen (affordans) */
.bokstavsboet-bokstav {
  border: none;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: #FFF7E6;
  font-family: inherit;
  font-size: 3rem;
  font-weight: 800;
  color: #4a3b28;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 7px rgba(90, 60, 20, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bokstavsboet-bokstav:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }
.bokstavsboet-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 288px;
}
.bokstavsboet-slot {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #C79A5B;
  box-shadow: inset 0 4px 8px rgba(60, 40, 15, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bokstavsboet-slot--redo {
  background: #DBEFC0;
  box-shadow: inset 0 0 0 4px var(--ok);
}
.bokstavsboet-mat {
  font-size: 1.7rem;
  line-height: 1;
  animation: bb-pop 0.36s cubic-bezier(0.3, 1.55, 0.5, 1);
}
@keyframes bb-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.bokstavsboet-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 180px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.bokstavsboet-bild {
  position: absolute;
  width: 54px;
  height: 54px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  box-shadow: 0 4px 6px rgba(90, 60, 20, 0.28), inset 0 -3px 6px rgba(120, 90, 40, 0.2);
  font-size: 1.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.bokstavsboet-bild:active { cursor: grabbing; }
.bokstavsboet-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  font-size: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}

/* --- Platser i närområdet (typ: platser) — självinstruerande visuell uppgift --- */
.platser { margin: 0.6rem 0 0.2rem; }
.platser-mira { display: flex; justify-content: center; margin-bottom: 0.4rem; }
.platser-mira-figur { width: 76px; }
.platser-mira-svg { width: 100%; height: auto; display: block; }
.platser-zoner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 18px;
  overflow: hidden;
}
.platser-zon {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 84px;
  padding: 8px 10px 8px 64px;
  transition: box-shadow 0.2s ease;
}
.platser-zon-ikon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.3rem;
  line-height: 1;
}
.platser-zon--skola { background: linear-gradient(180deg, #fcefd2, #f7e2b6); }
.platser-zon--hem   { background: linear-gradient(180deg, #f7ddd6, #efc8bd); }
.platser-zon--affar { background: linear-gradient(180deg, #dcefc9, #c4e0a8); }
.platser-zon--redo {
  box-shadow: inset 0 0 0 4px var(--ok), inset 0 0 22px 4px rgba(6, 167, 125, 0.4);
}
.platser-slots { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.platser-slot { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.platser-mat { font-size: 1.9rem; line-height: 1; animation: pl-pop 0.36s cubic-bezier(0.3, 1.55, 0.5, 1); }
@keyframes pl-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.platser-zoner--klar .platser-zon {
  animation: pl-lyser 0.9s ease;
  animation-delay: calc(var(--z) * 0.3s);
}
@keyframes pl-lyser {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.16) drop-shadow(0 0 14px rgba(255, 220, 120, 0.85)); }
}
.platser-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 170px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.platser-sak {
  position: absolute;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  box-shadow: 0 4px 6px rgba(90, 60, 20, 0.28), inset 0 -3px 6px rgba(120, 90, 40, 0.2);
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.platser-sak:active { cursor: grabbing; }
.platser-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}

/* --- Mira äter (typ: mira-ater) — subtraktion som "ta bort" --- */
.mira-ater { margin: 0.6rem 0 0.2rem; }
.mira-ater-scen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.mira-ater-mira-figur { width: 84px; flex: 0 0 auto; }
.mira-ater-mira-svg { width: 100%; height: auto; display: block; }
.mira-ater-tallrik {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  max-width: 260px;
  padding: 14px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f3f3f6, #dfe1e8);
  box-shadow: inset 0 3px 8px rgba(40, 40, 60, 0.2), 0 3px 7px rgba(40, 50, 100, 0.12);
}
.mira-ater-slot {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* nästa lediga plats när mat dras över tallriken = inbjudande grön.
   animation: none släcker kitets vk-puls medan bekräftelsen visas. */
.mira-ater-slot--redo {
  animation: none;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--ok), 0 0 14px 4px rgba(6, 167, 125, 0.4);
}
.mira-ater-mat { font-size: 1.7rem; line-height: 1; animation: ma-pop 0.34s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes ma-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.mira-ater-korg {
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 180px;
  margin: 0.6rem auto 0;
  background: #F3E3C9;
  border: 3px solid #D8BE94;
  border-radius: 14px 14px 26px 26px;
  transition: box-shadow 0.4s ease;
}
/* när Mira är mätt lyfts det som blev kvar i korgen fram som svaret */
.mira-ater-korg--svar { box-shadow: 0 0 0 4px var(--stjarna), 0 0 20px 5px rgba(255, 201, 60, 0.5); }
.mira-ater-mat-knapp {
  position: absolute;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  box-shadow: 0 4px 6px rgba(90, 60, 20, 0.28), inset 0 -3px 6px rgba(120, 90, 40, 0.2);
  font-size: 1.7rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.mira-ater-mat-knapp:active { cursor: grabbing; }
.mira-ater-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.mira-ater-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 320px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: ma-tonain 0.6s ease both;
}
@keyframes ma-tonain {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.mira-ater-tal-uttryck { display: block; font-size: 2.2rem; font-weight: 800; line-height: 1; color: #E0913F; }
.mira-ater-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Formsorteraren (typ: formsortera) — självinstruerande visuell uppgift --- */
.formsortera { margin: 0.6rem 0 0.2rem; }
.formsortera-mira { display: flex; justify-content: center; margin-bottom: 0.4rem; }
.formsortera-mira-figur { width: 76px; }
.formsortera-mira-svg { width: 100%; height: auto; display: block; }
.formsortera-brade {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(160deg, #e7ddc6, #d3c6a6);
  box-shadow: inset 0 2px 8px rgba(90, 70, 30, 0.25);
  transition: filter 0.4s ease;
}
.formsortera-brade--klar { filter: brightness(1.05) drop-shadow(0 0 14px rgba(255, 215, 120, 0.7)); }
.formsortera-slot {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.45);
}
/* tom plats med samma form som draget = inbjudande grön.
   animation: none släcker kitets vk-puls medan bekräftelsen visas. */
.formsortera-slot--redo {
  animation: none;
  box-shadow: 0 0 0 4px var(--ok), 0 0 16px 4px rgba(6, 167, 125, 0.45);
}
.formsortera-mat { font-size: 2rem; line-height: 1; animation: fs-pop 0.34s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes fs-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.formsortera-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 170px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.formsortera-bit {
  position: absolute;
  width: 54px;
  height: 54px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  box-shadow: 0 4px 6px rgba(90, 60, 20, 0.28), inset 0 -3px 6px rgba(120, 90, 40, 0.2);
  font-size: 2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.formsortera-bit:active { cursor: grabbing; }
.formsortera-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border-radius: 14px;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}

/* --- Ställ klockan (typ: klockan) — självinstruerande visuell uppgift --- */
.klockan { margin: 0.6rem 0 0.2rem; }
.klockan-mira { display: flex; justify-content: center; margin-bottom: 0.4rem; }
.klockan-mira-figur { width: 76px; }
.klockan-mira-svg { width: 100%; height: auto; display: block; }
/* Digitalt målkort (halv-läge): tiden eleven ska ställa klockan på. */
.klockan-mal {
  width: max-content;
  margin: 0 auto 0.5rem;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #2b3344;
  background: #DDE8F6;
  border: 3px solid #B7C7E0;
  border-radius: 12px;
  padding: 0.1rem 1rem 0.2rem;
}
.klockan-mal--klar {
  animation: none;
  color: #2E8B57;
  background: #DBEFC0;
  border-color: var(--ok);
}
.klockan-urtavla {
  position: relative;
  width: min(280px, 84vw);
  aspect-ratio: 1;
  margin: 0 auto;
  touch-action: none;          /* vrid visaren utan att sidan scrollar */
  cursor: grab;
  transition: filter 0.4s ease;
}
.klockan-urtavla:active { cursor: grabbing; }
.klockan-urtavla--klar { filter: drop-shadow(0 0 16px rgba(255, 215, 120, 0.8)); }
.klockan-svg { width: 100%; height: 100%; display: block; }
/* båda visarna roteras runt klockans mitt (100,100 i viewBox) */
.klockan-timvisare,
.klockan-minutvisare {
  transform-box: view-box;
  transform-origin: 100px 100px;
}
.klockan-siffra {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
}
.klockan-siffra--klar {
  background: #DBEFC0;
  box-shadow: 0 0 0 3px var(--ok);
}
.klockan-prickar { display: flex; gap: 8px; justify-content: center; margin-top: 0.7rem; }
.klockan-prick {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.3s ease;
}
.klockan-prick--klar { background: var(--ok); }

/* --- Stora och små (typ: storlek) — sortering efter storlek --- */
.storlek { margin: 0.6rem 0 0.2rem; }
.storlek-mira { display: flex; justify-content: center; margin-bottom: 0.4rem; }
.storlek-mira-figur { width: 76px; }
.storlek-mira-svg { width: 100%; height: auto; display: block; }
.storlek-zoner { display: flex; flex-direction: column; gap: 8px; }
.storlek-zon {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 16px;
  transition: box-shadow 0.2s ease;
}
/* den stora zonen är fysiskt större — affordansen säger sig själv */
.storlek-zon--stor  { min-height: 104px; background: linear-gradient(180deg, #e7eefb, #d2e0f7); }
.storlek-zon--liten { min-height: 64px;  background: linear-gradient(180deg, #eef1f5, #dfe3ea); }
.storlek-zon--redo { box-shadow: inset 0 0 0 4px var(--ok), inset 0 0 22px 4px rgba(6, 167, 125, 0.4); }
.storlek-zon-ikon { flex: 0 0 auto; color: #6f8aa6; line-height: 1; }
.storlek-zon--stor  .storlek-zon-ikon { font-size: 3rem; }
.storlek-zon--liten .storlek-zon-ikon { font-size: 1.5rem; }
.storlek-slots { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.storlek-slot { display: flex; align-items: center; justify-content: center; }
.storlek-zon--stor  .storlek-slot { width: 64px; height: 64px; }
.storlek-zon--liten .storlek-slot { width: 40px; height: 40px; }
.storlek-zon--stor  .vk-silhuett { width: 52px; height: 52px; }
.storlek-mat { line-height: 1; animation: st-pop 0.34s cubic-bezier(0.3, 1.5, 0.5, 1); }
.storlek-mat--stor  { font-size: 2.6rem; }
.storlek-mat--liten { font-size: 1.4rem; }
@keyframes st-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.storlek-zoner--klar .storlek-zon { animation: st-lyser 0.9s ease; }
@keyframes st-lyser {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.1) drop-shadow(0 0 12px rgba(255, 220, 120, 0.8)); }
}
.storlek-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 190px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.storlek-sak {
  position: absolute;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  box-shadow: 0 4px 6px rgba(90, 60, 20, 0.28), inset 0 -3px 6px rgba(120, 90, 40, 0.2);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  transform: translate(-50%, -50%) rotate(var(--vrid, 0deg));
}
.storlek-sak--stor  { width: 64px; height: 64px; font-size: 2.6rem; }
.storlek-sak--liten { width: 40px; height: 40px; font-size: 1.4rem; }
.storlek-sak:active { cursor: grabbing; }
.storlek-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.storlek-ghost--stor  { font-size: 2.6rem; }
.storlek-ghost--liten { font-size: 1.4rem; }

/* --- Lika grupper (typ: grupper) — multiplikation som upprepad addition --- */
.grupper { margin: 0.6rem 0 0.2rem; }
.grupper-mira { display: flex; justify-content: center; margin-bottom: 0.4rem; }
.grupper-mira-figur { width: 76px; }
.grupper-mira-svg { width: 100%; height: auto; display: block; }
.grupper-korgar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.grupper-korg {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-radius: 12px 12px 18px 18px;
  background: #F3E3C9;
  border: 3px solid #D8BE94;
}
.grupper-korg--lyser { animation: gr-korgglow 1s ease; }
@keyframes gr-korgglow {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.14) drop-shadow(0 0 12px rgba(255, 220, 120, 0.9)); }
}
.grupper-fack {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #C79A5B;
  box-shadow: inset 0 4px 7px rgba(60, 40, 15, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
}
/* nästa lediga fack när mat dras över korgarna = inbjudande grön.
   animation: none släcker kitets vk-puls medan bekräftelsen visas. */
.grupper-fack--redo {
  animation: none;
  background: #DBEFC0;
  box-shadow: inset 0 0 0 4px var(--ok);
}
.grupper-mat { animation: gr-pop 0.34s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes gr-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.grupper-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 180px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.grupper-matbit {
  position: absolute;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  box-shadow: 0 4px 6px rgba(90, 60, 20, 0.28), inset 0 -3px 6px rgba(120, 90, 40, 0.2);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.grupper-matbit:active { cursor: grabbing; }
.grupper-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFAF0, #F1DFBD);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.grupper-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 320px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
@keyframes gr-tonain {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.grupper-tal-uttryck { display: block; font-size: 2.2rem; font-weight: 800; line-height: 1; color: #E0913F; }
.grupper-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Bygg talet (typ: talbygge) — positionssystemet med bas-tio-material --- */
.talbygge { margin: 0.6rem 0 0.2rem; }
.talbygge-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.talbygge-mira-figur { width: 76px; }
.talbygge-mira-svg { width: 100%; height: auto; display: block; }
.talbygge-mal {
  margin: 0 auto 0.7rem;
  width: max-content;
  min-width: 96px;
  text-align: center;
  background: #FFF7E6;
  border: 3px solid #E7C98E;
  border-radius: 14px;
  padding: 0.1rem 1.1rem 0.25rem;
  box-shadow: var(--shadow);
}
.talbygge-mal-tal { font-size: 3rem; font-weight: 800; line-height: 1.15; color: #C97E2A; }
.talbygge-bygg {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: flex-end;
}
.talbygge-platta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px 12px 18px 18px;
  background: #EAF0E1;
  border: 3px solid #CBD8B6;
}
.talbygge-platta--tom { opacity: 0.4; }
.talbygge-platta--lyser { animation: tb-plattaglow 1s ease; }
@keyframes tb-plattaglow {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.12) drop-shadow(0 0 12px rgba(255, 220, 120, 0.9)); }
}
.talbygge-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: flex-end;
  max-width: 340px;
}
.talbygge-slot {
  border-radius: 7px;
  background: #B7A87E;
  box-shadow: inset 0 4px 7px rgba(50, 42, 20, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
}
.talbygge-slot--tio { width: 34px; height: 154px; }
.talbygge-slot--ett { width: 34px; height: 34px; }
/* nästa passande plats när en bit dras över bygg-ytan = inbjudande grön.
   animation: none släcker kitets vk-puls medan bekräftelsen visas. */
.talbygge-slot--redo {
  animation: none;
  background: #DBEFC0;
  box-shadow: inset 0 0 0 4px var(--ok);
}
.talbygge-fast {
  width: 30px;
  border-radius: 5px;
  animation: tb-pop 0.34s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.talbygge-fast--tio,
.talbygge-ghost--tio {
  height: 150px;
  border: 2px solid #3A6FA0;
  background: repeating-linear-gradient(to bottom,
    #8FC0EE 0 13.4px, #5E97CC 13.4px 15px);
}
.talbygge-fast--ett,
.talbygge-ghost--ett {
  height: 30px;
  border: 2px solid #C98A2A;
  background: radial-gradient(circle at 36% 30%, #FBD98A, #EDB04A);
}
@keyframes tb-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.talbygge-siffra {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  min-width: 1.4em;
  text-align: center;
  color: #5b6b3f;
  background: #fff;
  border-radius: 10px;
  padding: 0.1rem 0.3rem;
}
.talbygge-platta--tio .talbygge-siffra { color: #3A6FA0; }
.talbygge-platta--ett .talbygge-siffra { color: #C97E2A; }
.talbygge-hog {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 210px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.talbygge-bit {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 30px;
  border-radius: 5px;
  cursor: grab;
  touch-action: none;
}
.talbygge-bit:active { cursor: grabbing; }
.talbygge-bit--tio {
  height: 150px;
  border: 2px solid #3A6FA0;
  background: repeating-linear-gradient(to bottom,
    #8FC0EE 0 13.4px, #5E97CC 13.4px 15px);
  box-shadow: 0 4px 6px rgba(30, 60, 100, 0.3);
}
.talbygge-bit--ett {
  height: 30px;
  border: 2px solid #C98A2A;
  background: radial-gradient(circle at 36% 30%, #FBD98A, #EDB04A);
  box-shadow: 0 4px 6px rgba(120, 80, 20, 0.28);
}
.talbygge-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border-radius: 5px;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.talbygge-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 340px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.talbygge-tal-uttryck { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: #C97E2A; }
.talbygge-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Bygg över tian (typ: tioovergang) — addition med tiotalsövergång --- */
.tioovergang { margin: 0.6rem 0 0.2rem; }
.tioovergang-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.tioovergang-mira-figur { width: 76px; }
.tioovergang-mira-svg { width: 100%; height: auto; display: block; }
.tioovergang-uttryck {
  margin: 0 auto 0.7rem;
  width: max-content;
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  color: #6a5640;
  background: #FFF7E6;
  border: 3px solid #E7C98E;
  border-radius: 14px;
  padding: 0.15rem 1rem 0.3rem;
  box-shadow: var(--shadow);
}
.tioovergang-svar { color: #b9a98a; }
.tioovergang-svar--klar {
  color: #2E8B57;
  animation: tov-pop 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.tioovergang-ramar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.tioovergang-ram {
  display: grid;
  grid-template-columns: repeat(5, 38px);
  grid-auto-rows: 38px;
  gap: 5px;
  padding: 8px;
  border-radius: 12px;
  background: #EAF0E1;
  border: 3px solid #CBD8B6;
}
.tioovergang-ram--lyser { animation: tov-ramglow 1s ease; }
@keyframes tov-ramglow {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.13) drop-shadow(0 0 13px rgba(255, 220, 120, 0.95)); }
}
.tioovergang-cell {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 3px 6px rgba(50, 42, 20, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* nästa tomma ruta när en prick dras över ramarna = inbjudande grön.
   animation: none släcker kitets vk-puls medan bekräftelsen visas. */
.tioovergang-cell--redo {
  animation: none;
  background: #DBEFC0;
  box-shadow: inset 0 0 0 4px var(--ok);
}
.tioovergang-prick {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.tioovergang-prick--start {
  background: radial-gradient(circle at 36% 32%, #9CC8F2, #4F8EF7);
  box-shadow: inset 0 -3px 5px rgba(30, 60, 120, 0.35);
}
.tioovergang-prick--lagg {
  background: radial-gradient(circle at 36% 32%, #FBD98A, #EDB04A);
  box-shadow: inset 0 -3px 5px rgba(120, 80, 20, 0.3);
  animation: tov-pop 0.32s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes tov-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.tioovergang-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 180px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.tioovergang-bit {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #FBD98A, #EDB04A);
  box-shadow: 0 4px 6px rgba(120, 80, 20, 0.3), inset 0 -3px 5px rgba(120, 80, 20, 0.28);
  cursor: grab;
  touch-action: none;
}
.tioovergang-bit:active { cursor: grabbing; }
.tioovergang-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #FBD98A, #EDB04A);
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.tioovergang-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 340px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.tioovergang-tal-uttryck { display: block; font-size: 2rem; font-weight: 800; line-height: 1.1; color: #E0913F; }
.tioovergang-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Fjärilens vingar (typ: symmetri) — fenomen Skogen, symmetri + NO --- */
.symmetri { margin: 0.6rem 0 0.2rem; }
.symmetri-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.symmetri-mira-figur { width: 76px; }
.symmetri-mira-svg { width: 100%; height: auto; display: block; }
.symmetri-fjaril {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.symmetri-vinge {
  display: grid;
  grid-template-columns: repeat(3, 36px);
  grid-auto-rows: 36px;
  gap: 5px;
  padding: 12px;
  background: #FBF3E0;
  border: 3px solid #E2D2A8;
  border-radius: 62% 18px 18px 62% / 72% 18px 18px 72%;
}
.symmetri-vinge--h { transform: scaleX(-1); }
.symmetri-vinge--klar { animation: sym-vingeglow 1.1s ease; }
@keyframes sym-vingeglow {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.12) drop-shadow(0 0 12px rgba(255, 220, 120, 0.9)); }
}
.symmetri-ruta {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.symmetri-ruta--redo {
  animation: none;
  box-shadow: 0 0 0 4px var(--ok);
}
.symmetri-prick {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.22);
}
.symmetri-prick--ny { animation: sym-pop 0.34s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes sym-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.symmetri-kropp {
  position: relative;
  width: 18px;
  height: 132px;
  margin: 0 -2px;
  border-radius: 9px;
  background: linear-gradient(#6a4a2a, #4a3018);
  z-index: 2;
}
.symmetri-antenn {
  position: absolute;
  top: -20px;
  width: 3px;
  height: 22px;
  background: #4a3018;
  border-radius: 3px;
}
.symmetri-antenn--v { left: 3px; transform: rotate(22deg); transform-origin: bottom; }
.symmetri-antenn--h { right: 3px; transform: rotate(-22deg); transform-origin: bottom; }
.symmetri-linje {
  position: absolute;
  left: 50%;
  top: -30px;
  height: 192px;
  border-left: 3px dashed rgba(90, 67, 38, 0.28);
  transform: translateX(-50%);
}
.symmetri-linje--syns {
  border-left-color: #E0913F;
  animation: sym-linje 1s ease;
}
@keyframes sym-linje {
  0%, 100% { filter: none; }
  50%      { filter: drop-shadow(0 0 7px rgba(224, 145, 63, 0.95)); }
}
.symmetri-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 170px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.symmetri-bit {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #FFFDF6, #E6DCC4);
  box-shadow: 0 4px 6px rgba(80, 60, 30, 0.28), inset 0 -3px 5px rgba(110, 90, 50, 0.22);
  cursor: grab;
  touch-action: none;
}
.symmetri-bit:active { cursor: grabbing; }
.symmetri-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #FFFDF6, #E6DCC4);
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.symmetri-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 340px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.symmetri-tal-uttryck { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: #E0913F; }
.symmetri-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Skogens tecken (typ: skogstecken) — fenomen Skogen, SO + multilitteracitet --- */
.skogstecken { margin: 0.6rem 0 0.2rem; }
.skogstecken-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.skogstecken-mira-figur { width: 76px; }
.skogstecken-mira-svg { width: 100%; height: auto; display: block; }
.skogstecken-stig {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  padding: 12px 10px 16px;
  border-radius: 16px;
  background: linear-gradient(#EAF0E1, #E0EAD2);
}
.skogstecken-stig--oppen { animation: stg-oppen 1.1s ease; }
@keyframes stg-oppen {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.1) drop-shadow(0 0 14px rgba(255, 220, 120, 0.9)); }
}
.skogstecken-scen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.skogstecken-bild {
  width: 66px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  line-height: 1;
  border-radius: 12px;
  background: #FBF3E0;
  border: 3px solid #D8C79C;
}
.skogstecken-scen--klar .skogstecken-bild {
  border-color: var(--ok);
  background: #DBEFC0;
}
.skogstecken-stolpe {
  position: relative;
  width: 66px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 8px;
  background: #C79A5B;
  box-shadow: inset 0 4px 7px rgba(60, 40, 15, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.skogstecken-stolpe::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 7px;
  height: 20px;
  transform: translateX(-50%);
  background: #8a6534;
  border-radius: 0 0 3px 3px;
}
/* stolpen lyser grönt bara när rätt skylt dras över — bekräftande affordans.
   animation: none släcker kitets vk-puls medan bekräftelsen visas. */
.skogstecken-stolpe--redo {
  animation: none;
  background: #DBEFC0;
  box-shadow: inset 0 0 0 4px var(--ok);
}
.skogstecken-stolpe--fylld {
  background: #F3E8CE;
  box-shadow: inset 0 0 0 3px #D8C79C;
}
.skogstecken-skylt {
  font-size: 1.9rem;
  line-height: 1;
  animation: stg-pop 0.34s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes stg-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.skogstecken-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 170px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.skogstecken-bit {
  position: absolute;
  margin: 0;
  width: 56px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
  border: 3px solid #E2B45A;
  border-radius: 9px;
  background: #FFF6DC;
  box-shadow: 0 4px 6px rgba(90, 60, 20, 0.28);
  cursor: grab;
  touch-action: none;
}
.skogstecken-bit:active { cursor: grabbing; }
.skogstecken-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  border: 3px solid #E2B45A;
  border-radius: 9px;
  background: #FFF6DC;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.skogstecken-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 340px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.skogstecken-tal-uttryck { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: #5a8a3a; }
.skogstecken-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Colours of the forest (typ: skogsfarg) — fenomen Skogen, Engelska + Bild --- */
.skogsfarg { margin: 0.6rem 0 0.2rem; }
.skogsfarg-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.skogsfarg-mira-figur { width: 76px; }
.skogsfarg-mira-svg { width: 100%; height: auto; display: block; }
.skogsfarg-ord {
  display: flex;
  justify-content: center;
  min-height: 2.6rem;
  margin: 0.3rem 0 0.6rem;
}
.skogsfarg-skog {
  position: relative;
  width: min(340px, 100%);
  height: 230px;
  margin: 0 auto;
  border-radius: 16px;
  border: 3px solid #C7B98F;
  background: #CCCCCC;
  overflow: hidden;
}
.skogsfarg-skog--klar { animation: sf-skogglow 1.1s ease; }
@keyframes sf-skogglow {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.1) saturate(1.15) drop-shadow(0 0 14px rgba(255, 220, 120, 0.9)); }
}
.skogsfarg-region {
  position: absolute;
  background: #BCBCBC;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skogsfarg-region--malad { animation: sf-fyll 0.45s ease; }
@keyframes sf-fyll {
  0%   { filter: brightness(1.4); transform: scale(1.04); }
  100% { filter: none; transform: scale(1); }
}
.skogsfarg-region--redo {
  animation: none;
  box-shadow: 0 0 0 4px var(--ok);
}
.skogsfarg-region--himmel { top: 0; left: 0; width: 100%; height: 56%; border-radius: 13px 13px 0 0; z-index: 1; }
.skogsfarg-region--gras   { bottom: 0; left: 0; width: 100%; height: 30%; border-radius: 0 0 13px 13px; z-index: 2; }
.skogsfarg-region--sol    { top: 8%; right: 9%; width: 58px; height: 58px; border-radius: 50%; z-index: 3; }
.skogsfarg-region--krona  { top: 30%; left: 12%; width: 132px; height: 96px; border-radius: 50%; z-index: 4; }
.skogsfarg-region--stam   { top: 52%; left: calc(12% + 51px); width: 30px; height: 78px; border-radius: 5px; z-index: 3; }
.skogsfarg-region--blomma { bottom: 8%; right: 18%; width: 38px; height: 38px; border-radius: 50%; z-index: 5; }
.skogsfarg-palett {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0.9rem auto 0;
  padding: 10px 12px;
  max-width: 340px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.skogsfarg-farg {
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.22), inset 0 -3px 6px rgba(0, 0, 0, 0.18);
  cursor: grab;
  touch-action: none;
}
.skogsfarg-farg:active { cursor: grabbing; }
.skogsfarg-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.16);
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.skogsfarg-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 340px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.skogsfarg-tal-uttryck { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.2; color: #4F8EB0; }
.skogsfarg-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Fenomen-temasida — icke-linjärt vägskäl (Student Agency) + temabanner --- */
.fenomen-vagskal {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.6rem 0 1.4rem;
}
.fenomen-mira { display: flex; justify-content: center; }
.fenomen-mira-figur { width: 88px; }
.fenomen-mira-svg { width: 100%; height: auto; display: block; }
.fenomen-prompt {
  font-size: 1.5rem;
  font-weight: 800;
  color: #5a4326;
  text-align: center;
  margin: 0.1rem 0 0;
}
.fenomen-prompt-under {
  font-size: 1rem;
  color: var(--text-muted, #6a5640);
  text-align: center;
  margin: 0.25rem 0 0;
}
.fenomen-stationer {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  width: 100%;
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.fenomen-stationer > li { display: flex; }
.fenomen-station {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1.3rem 1.1rem 1.1rem;
  border-radius: 22px;
  background: var(--bg-card, #fff);
  box-shadow: var(--shadow);
  border: 3px solid transparent;
  border-top: 7px solid var(--station-farg, #2A9D8F);
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: transform 0.15s ease;
}
.fenomen-station:hover,
.fenomen-station:focus-visible { transform: translateY(-4px); }
/* Oavklarad station — mjuk inbjudande puls. Behåller kortets skugga. */
.fenomen-station--oppen { animation: fenomen-puls 2.6s ease-in-out infinite; }
@keyframes fenomen-puls {
  0%, 100% { box-shadow: var(--shadow), 0 0 0 0 rgba(242, 201, 76, 0); }
  50%      { box-shadow: var(--shadow), 0 0 0 7px rgba(242, 201, 76, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  /* Rörelsen tas bort men inbjudan förblir synlig — statisk ring. */
  .fenomen-station--oppen {
    animation: none;
    box-shadow: var(--shadow), 0 0 0 4px rgba(242, 201, 76, 0.4);
  }
}
/* Klarad station — lugn guldram + stjärnmarkör. Inget lås: länken funkar. */
.fenomen-station--klar {
  border-color: var(--stjarna, #F2C94C);
  border-top-color: var(--stjarna, #F2C94C);
}
.fenomen-station__markor {
  position: absolute;
  top: -14px;
  right: -10px;
  font-size: 1.7rem;
  display: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}
.fenomen-station--klar .fenomen-station__markor {
  display: block;
  animation: refl-vald 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.fenomen-station__ikon {
  font-size: 2.9rem;
  line-height: 1;
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F4ECDA;
}
.fenomen-station__namn { font-size: 1.2rem; font-weight: 800; }
.fenomen-station__amnen { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.fenomen-tagg {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--station-farg, #2A9D8F);
  color: #fff;
}
.fenomen-station__beskrivning {
  font-size: 0.92rem;
  color: var(--text-muted, #6a5640);
  flex-grow: 1;
}
.fenomen-station__cta { font-weight: 800; color: var(--station-farg, #2A9D8F); }
.fenomen-banner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.4rem 0 0;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  background: linear-gradient(100deg, #E5F0DD, #D6E8C8);
  border: 3px solid #B6CFA0;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease;
}
.fenomen-banner:hover,
.fenomen-banner:focus-visible { transform: translateY(-2px); }
.fenomen-banner__ikon { font-size: 2.4rem; line-height: 1; flex-shrink: 0; }
.fenomen-banner__text { flex-grow: 1; line-height: 1.4; }
.fenomen-banner__text strong { display: block; font-size: 1.1rem; }
.fenomen-banner__cta { font-weight: 800; color: #3c7a3c; white-space: nowrap; }
.fenomen-banner--vatten {
  background: linear-gradient(100deg, #DCEEF6, #C7E3EF);
  border-color: #9FC6D8;
}
.fenomen-banner--vatten .fenomen-banner__cta { color: #2c6f8c; }
.fenomen-banner--naromrade {
  background: linear-gradient(100deg, #F6E4DC, #EFD2C6);
  border-color: #D8B49F;
}
.fenomen-banner--naromrade .fenomen-banner__cta { color: #b25c3f; }
.fenomen-banner--berattelsen {
  background: linear-gradient(100deg, #EFE0F7, #E2CEF0);
  border-color: #C5A0DC;
}
.fenomen-banner--berattelsen .fenomen-banner__cta { color: #7D3A9E; }
.fenomen-banner--aret {
  background: linear-gradient(100deg, #F5E6CC, #EAD3AE);
  border-color: #D8BE8E;
}
.fenomen-banner--aret .fenomen-banner__cta { color: #9c6f2a; }

/* Mobil: 3-kolumnsraden klämmer ihop texten — stapla vertikalt så texten
   får full bredd och CTA:n hamnar tydligt nere till höger. */
@media (max-width: 480px) {
  .fenomen-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
  }
  .fenomen-banner__cta { align-self: flex-end; }
}

/* --- Vattnets kretslopp (typ: kretslopp) — fenomen Vattnets resa, NO + Matematik --- */
.kretslopp { margin: 0.6rem 0 0.2rem; }
.kretslopp-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.kretslopp-mira-figur { width: 76px; }
.kretslopp-mira-svg { width: 100%; height: auto; display: block; }
.kretslopp-ring {
  position: relative;
  width: min(300px, 84vw);
  aspect-ratio: 1;
  margin: 0.4rem auto 0;
}
.kretslopp-spar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74%;
  height: 74%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 4px dashed rgba(79, 142, 176, 0.4);
}
.kretslopp-spar--sluten {
  border-style: solid;
  border-color: #4F8EB0;
  animation: kl-ringglow 1.1s ease;
}
@keyframes kl-ringglow {
  0%, 100% { filter: none; }
  50%      { filter: drop-shadow(0 0 12px rgba(79, 142, 176, 0.9)); }
}
.kretslopp-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  line-height: 1;
}
.kretslopp-ring--klar .kretslopp-nav { animation: kl-snurr 1.4s ease; }
@keyframes kl-snurr {
  from { transform: translate(-50%, -50%) rotate(0); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.kretslopp-slot {
  position: absolute;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #DCE9F0;
  box-shadow: inset 0 4px 7px rgba(40, 70, 90, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* platsen lyser grönt bara när rätt steg dras över — bekräftande affordans.
   animation: none släcker kitets vk-puls medan bekräftelsen visas. */
.kretslopp-slot--redo {
  animation: none;
  background: #DBEFC0;
  box-shadow: inset 0 0 0 4px var(--ok);
}
.kretslopp-slot--fylld {
  background: #EAF4FA;
  box-shadow: inset 0 0 0 3px #9FC6D8;
}
.kretslopp-mark {
  font-size: 1.9rem;
  line-height: 1;
  animation: kl-pop 0.34s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes kl-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.kretslopp-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 170px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.kretslopp-bit {
  position: absolute;
  margin: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  line-height: 1;
  border: 3px solid #9FC6D8;
  border-radius: 50%;
  background: #F2F8FB;
  box-shadow: 0 4px 6px rgba(40, 70, 90, 0.26);
  cursor: grab;
  touch-action: none;
}
.kretslopp-bit:active { cursor: grabbing; }
.kretslopp-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  border: 3px solid #9FC6D8;
  border-radius: 50%;
  background: #F2F8FB;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.kretslopp-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 340px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.kretslopp-tal-uttryck { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: #4F8EB0; }
.kretslopp-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Flyter eller sjunker (typ: flytsjunk) — fenomen Vattnets resa, NO + Matematik --- */
.flytsjunk { margin: 0.6rem 0 0.2rem; }
.flytsjunk-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.flytsjunk-mira-figur { width: 76px; }
.flytsjunk-mira-svg { width: 100%; height: auto; display: block; }
.flytsjunk-tank {
  position: relative;
  width: min(320px, 86vw);
  height: 240px;
  margin: 0.4rem auto 0;
  border-radius: 14px 14px 18px 18px;
  border: 4px solid #9FC6D8;
  background: linear-gradient(#EAF6FB, #E1F0F7);
  overflow: hidden;
}
.flytsjunk-tank--redo { border-color: var(--ok); box-shadow: 0 0 0 4px rgba(106, 168, 79, 0.35); }
.flytsjunk-tank--klar { animation: fs-tankglow 1.1s ease; }
@keyframes fs-tankglow {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.08) drop-shadow(0 0 13px rgba(120, 190, 225, 0.95)); }
}
.flytsjunk-vatten {
  position: absolute;
  left: 0;
  right: 0;
  top: 28%;
  bottom: 0;
  background: linear-gradient(rgba(95, 175, 215, 0.55), rgba(58, 128, 178, 0.72));
}
.flytsjunk-yta {
  position: absolute;
  left: 0;
  right: 0;
  top: 28%;
  height: 5px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 3px;
}
.flytsjunk-objekt {
  position: absolute;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  line-height: 1;
  pointer-events: none;
  z-index: 3;
  transition: left 0.75s ease, top 0.75s ease;
}
.flytsjunk-objekt--flyter { transition-timing-function: cubic-bezier(0.2, 0.85, 0.3, 1); }
.flytsjunk-objekt--sjunker { transition-timing-function: cubic-bezier(0.55, 0, 0.75, 0.4); }
.flytsjunk-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 160px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.flytsjunk-bit {
  position: absolute;
  margin: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  line-height: 1;
  border: 3px solid #9FC6D8;
  border-radius: 50%;
  background: #F4FAFC;
  box-shadow: 0 4px 6px rgba(40, 70, 90, 0.26);
  cursor: grab;
  touch-action: none;
}
.flytsjunk-bit:active { cursor: grabbing; }
.flytsjunk-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  border: 3px solid #9FC6D8;
  border-radius: 50%;
  background: #F4FAFC;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.flytsjunk-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 340px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.flytsjunk-tal-uttryck { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: #3A80B2; }
.flytsjunk-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Handla i affären (typ: affaren) — fenomen Mitt närområde, Matematik + SO --- */
.affaren { margin: 0.6rem 0 0.2rem; }
.affaren-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.affaren-mira-figur { width: 76px; }
.affaren-mira-svg { width: 100%; height: auto; display: block; }
.affaren-disk {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(#F3E3C9, #E7D2A8);
  border: 3px solid #D8BE94;
}
.affaren-vara {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  background: #FFFDF7;
  box-shadow: var(--shadow);
}
.affaren-vara-ikon { font-size: 3rem; line-height: 1; }
.affaren-prislapp {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  background: #E0913F;
  border-radius: 999px;
  padding: 0.1rem 0.8rem;
}
.affaren-vara--kopt { animation: af-kopt 1s ease; }
@keyframes af-kopt {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.12) drop-shadow(0 0 12px rgba(255, 220, 120, 0.9)); }
}
.affaren-bricka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  padding: 10px;
  border-radius: 12px;
  background: #C79A5B;
  box-shadow: inset 0 4px 8px rgba(60, 40, 15, 0.4);
}
.affaren-bricka--redo {
  background: #DBEFC0;
  box-shadow: inset 0 0 0 4px var(--ok);
}
.affaren-mynthog {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  max-width: 170px;
}
.affaren-summa {
  font-size: 1.4rem;
  font-weight: 800;
  color: #5a4326;
  background: #FFF7E6;
  border-radius: 10px;
  padding: 0.1rem 0.7rem;
}
.affaren-summa-tal { color: #E0913F; }
.affaren-summa--klar { animation: gr-tonain 0.5s ease; }
.affaren-summa--klar .affaren-summa-tal { color: var(--ok); }
.affaren-borse {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 170px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.affaren-mynt {
  position: absolute;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #4a3618;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 4px 6px rgba(70, 50, 20, 0.32), inset 0 -3px 6px rgba(0, 0, 0, 0.2);
}
.affaren-mynt:active { cursor: grabbing; }
.affaren-mynt--ett { width: 42px; height: 42px; font-size: 1.1rem; background: radial-gradient(circle at 36% 32%, #E0AE73, #C2853F); border: 3px solid #9C6526; }
.affaren-mynt--fem { width: 48px; height: 48px; font-size: 1.3rem; background: radial-gradient(circle at 36% 32%, #D6DBE0, #AAB3BC); border: 3px solid #8A929B; }
.affaren-mynt--tio { width: 54px; height: 54px; font-size: 1.45rem; background: radial-gradient(circle at 36% 32%, #F2CE72, #DBA42E); border: 3px solid #B4831F; }
.affaren-mynt-lagd {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 0.9rem;
  font-weight: 800;
  color: #4a3618;
  border-radius: 50%;
  animation: af-pop 0.32s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.affaren-mynt-lagd.affaren-mynt--ett { background: radial-gradient(circle at 36% 32%, #E0AE73, #C2853F); border: 2px solid #9C6526; }
.affaren-mynt-lagd.affaren-mynt--fem { background: radial-gradient(circle at 36% 32%, #D6DBE0, #AAB3BC); border: 2px solid #8A929B; }
.affaren-mynt-lagd.affaren-mynt--tio { background: radial-gradient(circle at 36% 32%, #F2CE72, #DBA42E); border: 2px solid #B4831F; }
@keyframes af-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.affaren-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #4a3618;
  border-radius: 50%;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.affaren-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 340px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.affaren-tal-uttryck { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: #E0913F; }
.affaren-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Bygg ett hus (typ: bygghus) — fenomen Mitt närområde, Matematik + Bild + SO --- */
.bygghus { margin: 0.6rem 0 0.2rem; }
.bygghus-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.bygghus-mira-figur { width: 76px; }
.bygghus-mira-svg { width: 100%; height: auto; display: block; }
.bygghus-tomt {
  position: relative;
  width: min(260px, 86vw);
  aspect-ratio: 1;
  margin: 0.4rem auto 0;
  border-radius: 16px;
  border: 3px solid #C7B98F;
  background: linear-gradient(#E8F2F7 0 72%, #DCE9D2 72% 100%);
  overflow: hidden;
}
.bygghus-tomt--klar { animation: bh-tomtglow 1.1s ease; }
@keyframes bh-tomtglow {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.09) drop-shadow(0 0 13px rgba(255, 220, 120, 0.9)); }
}
.bygghus-slot { position: absolute; }
.bygghus-slot--kvadrat,
.bygghus-slot--rektangel {
  border: 2.5px dashed rgba(90, 80, 55, 0.4);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.42);
}
.bygghus-slot--triangel {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: rgba(90, 80, 55, 0.16);
}
.bygghus-slot--redo {
  filter: drop-shadow(0 0 6px rgba(106, 168, 79, 0.95)) brightness(1.04);
}
.bygghus-slot--fylld {
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.16);
  animation: bh-pop 0.34s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes bh-pop {
  0%   { transform: scale(0.4); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.bygghus-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 160px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.bygghus-bit {
  position: absolute;
  margin: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 12px;
  background: #FFFDF7;
  box-shadow: 0 4px 6px rgba(70, 60, 30, 0.26);
  cursor: grab;
  touch-action: none;
}
.bygghus-bit:active { cursor: grabbing; }
.bygghus-bit-form { display: block; background: #E2D4B0; border: 2px solid #B59E6E; }
.bygghus-bit-form--kvadrat { width: 30px; height: 30px; border-radius: 3px; }
.bygghus-bit-form--rektangel { width: 22px; height: 34px; border-radius: 3px; }
.bygghus-bit-form--triangel {
  width: 36px;
  height: 31px;
  border: none;
  background: #B59E6E;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.bygghus-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #FFFDF7;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.bygghus-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 340px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.bygghus-tal-uttryck { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: #C56B4A; }
.bygghus-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Receptet (typ: recept) — fenomen Från jord till bord, Matematik + Svenska --- */
.recept { margin: 0.6rem 0 0.2rem; }
.recept-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.recept-mira-figur { width: 76px; }
.recept-mira-svg { width: 100%; height: auto; display: block; }
.recept-kort {
  list-style: none;
  margin: 0 auto 0.8rem;
  padding: 0.7rem 0.8rem;
  max-width: 360px;
  background: #FFFDF3;
  border: 3px solid #E2D2A8;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.recept-steg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.32rem 0.4rem;
  border-radius: 9px;
}
.recept-steg--aktiv { background: #FFF1C9; box-shadow: inset 0 0 0 2px #E9C45E; }
.recept-steg--klar { opacity: 0.55; }
.recept-steg-nr {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  background: #C98A4A;
  border-radius: 50%;
}
.recept-steg--klar .recept-steg-nr { background: var(--ok); }
.recept-steg-ikon { font-size: 1.5rem; line-height: 1; }
.recept-steg-text { flex-grow: 1; font-size: 1.05rem; font-weight: 700; color: #5a4326; }
.recept-steg-bock { font-size: 1.3rem; color: var(--ok); opacity: 0; }
.recept-steg--klar .recept-steg-bock { opacity: 1; }
.recept-skal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: max-content;
  margin: 0 auto;
  padding: 0.5rem 1.2rem;
  border-radius: 16px 16px 22px 22px;
  background: #EDE3CC;
  border: 3px solid #D8BE94;
}
.recept-skal--redo { background: #DBEFC0; border-color: var(--ok); }
.recept-skal--klar { animation: rc-klar 1s ease; }
@keyframes rc-klar {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.12) drop-shadow(0 0 12px rgba(255, 220, 120, 0.9)); }
}
.recept-skal-ikon { font-size: 2.6rem; line-height: 1; }
.recept-rakneverk { font-size: 1.6rem; font-weight: 800; color: #6a5640; }
.recept-rakn { color: #E0913F; }
.recept-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 160px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.recept-matt {
  position: absolute;
  margin: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  line-height: 1;
  border: 3px solid #E2C98E;
  border-radius: 50%;
  background: #FFF8E4;
  box-shadow: 0 4px 6px rgba(90, 60, 20, 0.26);
  cursor: grab;
  touch-action: none;
}
.recept-matt:active { cursor: grabbing; }
.recept-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  border: 3px solid #E2C98E;
  border-radius: 50%;
  background: #FFF8E4;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.recept-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 340px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.recept-tal-uttryck { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: #E0913F; }
.recept-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Varifrån kommer maten? (typ: matkalla) — fenomen Från jord till bord --- */
.matkalla { margin: 0.6rem 0 0.2rem; }
.matkalla-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.matkalla-mira-figur { width: 76px; }
.matkalla-mira-svg { width: 100%; height: auto; display: block; }
.matkalla-gard {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  padding: 14px 10px;
  border-radius: 16px;
  background: linear-gradient(#EAF0E1, #DDE9CC);
}
.matkalla-gard--klar { animation: mk-gardglow 1.1s ease; }
@keyframes mk-gardglow {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.1) drop-shadow(0 0 14px rgba(255, 220, 120, 0.9)); }
}
.matkalla-kalla {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.matkalla-kalla-ikon {
  width: 66px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.3rem;
  line-height: 1;
  border-radius: 12px;
  background: #FBF3E0;
  border: 3px solid #D8C79C;
}
.matkalla-kalla--klar .matkalla-kalla-ikon {
  border-color: var(--ok);
  background: #DBEFC0;
}
.matkalla-namn { font-size: 0.9rem; font-weight: 700; color: #5a6b3f; }
.matkalla-plats {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #C79A5B;
  box-shadow: inset 0 4px 7px rgba(60, 40, 15, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* platsen lyser grönt bara när rätt vara dras över — bekräftande affordans.
   animation: none släcker kitets vk-puls medan bekräftelsen visas. */
.matkalla-plats--redo {
  animation: none;
  background: #DBEFC0;
  box-shadow: inset 0 0 0 4px var(--ok);
}
.matkalla-plats--fylld {
  background: #F3E8CE;
  box-shadow: inset 0 0 0 3px #D8C79C;
}
.matkalla-mat {
  font-size: 1.9rem;
  line-height: 1;
  animation: mk-pop 0.34s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes mk-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.matkalla-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 170px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.matkalla-bit {
  position: absolute;
  margin: 0;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  line-height: 1;
  border: 3px solid #E2C98E;
  border-radius: 50%;
  background: #FFF8E4;
  box-shadow: 0 4px 6px rgba(90, 60, 20, 0.26);
  cursor: grab;
  touch-action: none;
}
.matkalla-bit:active { cursor: grabbing; }
.matkalla-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  border: 3px solid #E2C98E;
  border-radius: 50%;
  background: #FFF8E4;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.matkalla-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 340px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.matkalla-tal-uttryck { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: #5a8a3a; }
.matkalla-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Mät med linjalen (typ: linjal) — konkret längdmätning för åk 3 --- */
.linjal { position: relative; margin: 0.6rem 0 0.2rem; }
.linjal-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.linjal-mira-figur { width: 76px; }
.linjal-mira-svg { width: 100%; height: auto; display: block; }
.linjal-avlasning {
  width: max-content;
  margin: 0 auto 0.5rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: #6a5640;
  background: #FFF7E6;
  border-radius: 999px;
  padding: 0.15rem 1rem;
  box-shadow: var(--shadow);
}
.linjal-cm { color: #E0913F; }
.linjal-avlasning--klar { animation: lj-klar 0.6s ease; }
.linjal-avlasning--klar .linjal-cm { color: var(--ok); }
@keyframes lj-klar {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.linjal-bana {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 150px;
  margin: 0 auto;
  touch-action: none;
}
.linjal-foremal {
  position: absolute;
  left: 0;
  bottom: 52px;
  height: 44px;
  border-radius: 8px;
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.22), 0 3px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.linjal-foremal-ikon { font-size: 1.7rem; line-height: 1; }
.linjal-foremal--matt { animation: lj-matt 0.7s ease; }
@keyframes lj-matt {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.14) drop-shadow(0 0 11px rgba(255, 220, 120, 0.95)); }
}
.linjal-skala {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background: linear-gradient(#F3E3C9, #E7D2A8);
  border: 2px solid #D8BE94;
  border-radius: 6px;
}
.linjal-tick {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 12px;
  background: #6a5640;
  transform: translateX(-50%);
}
.linjal-tick--stor { height: 22px; width: 3px; }
.linjal-siffra {
  position: absolute;
  bottom: 24px;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 700;
  color: #6a5640;
}
.linjal-markor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #D8434E;
  transform: translateX(-50%);
  transition: left 0.12s ease;
}
.linjal-markor-handtag {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #F08089, #D8434E);
  border: 3px solid #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  cursor: grab;
}
.linjal-markor-handtag:active { cursor: grabbing; }
.linjal-framsteg {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 0.9rem;
}
.linjal-prick {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--border, #d8d8d8);
}
.linjal-prick--klar { background: var(--ok); }
.linjal-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 340px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.linjal-tal-uttryck { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: #E0913F; }
.linjal-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Väg på vågen (typ: vag) — konkret massmätning för åk 3 --- */
.vag { margin: 0.6rem 0 0.2rem; }
.vag-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.vag-mira-figur { width: 76px; }
.vag-mira-svg { width: 100%; height: auto; display: block; }
.vag-avlasning {
  width: max-content;
  margin: 0 auto 0.4rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: #6a5640;
  background: #FFF7E6;
  border-radius: 999px;
  padding: 0.15rem 1rem;
  box-shadow: var(--shadow);
}
.vag-gram { color: #E0913F; }
.vag-avlasning--klar { animation: vg-klar 0.6s ease; }
.vag-avlasning--klar .vag-gram { color: var(--ok); }
@keyframes vg-klar {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.vag-balans {
  position: relative;
  width: min(360px, 92vw);
  height: 230px;
  margin: 0 auto;
}
.vag-stativ {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 80px;
  height: 150px;
  transform: translateX(-50%);
  background: linear-gradient(#C7B98F, #A89668);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.vag-balk {
  position: absolute;
  left: 50%;
  top: 74px;
  width: 280px;
  height: 12px;
  margin-left: -140px;
  border-radius: 6px;
  background: linear-gradient(#9aa5bb, #6d7689);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.3, 1.1, 0.5, 1);
  z-index: 2;
}
.vag-balk--jamn { box-shadow: 0 0 12px rgba(106, 168, 79, 0.85); }
.vag-skal {
  position: absolute;
  top: 8px;
  width: 96px;
  transform-origin: top center;
}
.vag-skal--v { left: -48px; }
.vag-skal--h { left: 232px; }
.vag-skal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 38px;
  background: #8a929b;
  transform: translateX(-50%);
}
.vag-skal-fat {
  position: absolute;
  top: 36px;
  left: 0;
  width: 96px;
  min-height: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: flex-end;
  justify-content: center;
  padding: 4px;
  background: linear-gradient(#E7D2A8, #D2B783);
  border: 2px solid #B89A63;
  border-radius: 6px 6px 46px 46px / 6px 6px 22px 22px;
}
.vag-skal--redo .vag-skal-fat { background: #DBEFC0; border-color: var(--ok); }
.vag-foremal { font-size: 2.1rem; line-height: 1; }
.vag-lagd-vikt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(#7d8799, #5a6374);
  border-radius: 4px 4px 2px 2px;
  animation: vg-pop 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes vg-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.vag-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 160px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.vag-vikt {
  position: absolute;
  margin: 0;
  width: 54px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  border: none;
  border-radius: 9px 9px 5px 5px;
  background: linear-gradient(#8a93a5, #626b7d);
  box-shadow: 0 4px 6px rgba(40, 45, 60, 0.34), inset 0 3px 5px rgba(255, 255, 255, 0.18);
  cursor: grab;
  touch-action: none;
}
.vag-vikt:active { cursor: grabbing; }
.vag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  border-radius: 9px 9px 5px 5px;
  background: linear-gradient(#8a93a5, #626b7d);
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.vag-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 340px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.vag-tal-uttryck { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: #E0913F; }
.vag-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* Mobil: vågapparaten har ett fast koordinatsystem — skålarna sitter på fasta
   px-positioner (vänster skål left:-48px) så hela apparaten blir ~376px bred.
   Skala ned den proportionellt så den ryms på små skärmar utan att geometrin
   förskjuts. transform-origin top center håller den centrerad. */
@media (max-width: 400px) {
  .vag-balans { transform: scale(0.82); transform-origin: top center; }
}

/* --- Naturens år (typ: arstid) — fenomen Året runt, Svenska + NO --- */
.arstid { margin: 0.6rem 0 0.2rem; }
.arstid-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.arstid-mira-figur { width: 76px; }
.arstid-mira-svg { width: 100%; height: auto; display: block; }
.arstid-sasonger {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arstid-sasonger--klar { animation: ar-klar 1.1s ease; }
@keyframes ar-klar {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.08) drop-shadow(0 0 13px rgba(255, 220, 120, 0.9)); }
}
.arstid-sasong {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  border: 3px solid transparent;
}
.arstid-sasong--var    { background: #E7F2D9; }
.arstid-sasong--sommar { background: #FBF1C9; }
.arstid-sasong--host   { background: #F6E3CC; }
.arstid-sasong--vinter { background: #DEE9F4; }
.arstid-sasong--redo { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(106, 168, 79, 0.3); }
.arstid-sasong-namn {
  flex-shrink: 0;
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: 800;
  color: #5a4326;
  text-align: center;
}
.arstid-sasong-ikon { font-size: 1.9rem; line-height: 1; }
.arstid-hylla {
  flex-grow: 1;
  min-height: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-content: center;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
}
.arstid-lagd {
  font-size: 0.78rem;
  font-weight: 600;
  color: #4a3c28;
  background: #FFFDF6;
  border: 1px solid #E2D2A8;
  border-radius: 7px;
  padding: 0.15rem 0.5rem;
  animation: ar-pop 0.32s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes ar-pop {
  0%   { transform: scale(0.5); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.arstid-hog {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0.9rem auto 0;
  max-width: 420px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.arstid-mening {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #3a2c18;
  background: #FFFDF6;
  border: 3px solid #E2C98E;
  border-radius: 10px;
  padding: 0.4rem 0.7rem;
  box-shadow: 0 3px 5px rgba(90, 60, 20, 0.2);
  cursor: grab;
  touch-action: none;
}
.arstid-mening:active { cursor: grabbing; }
.arstid-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: #3a2c18;
  background: #FFFDF6;
  border: 3px solid #E2C98E;
  border-radius: 10px;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.arstid-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 340px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.arstid-tal-uttryck { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: #5a8a3a; }
.arstid-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Väderdagboken (typ: vaderdagbok) — fenomen Året runt, Matematik + NO --- */
.vaderdagbok { margin: 0.6rem 0 0.2rem; }
.vaderdagbok-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.vaderdagbok-mira-figur { width: 76px; }
.vaderdagbok-mira-svg { width: 100%; height: auto; display: block; }
.vaderdagbok-diagram {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: flex-end;
  padding: 10px 14px 0;
  border-bottom: 4px solid #C7B98F;
  border-radius: 4px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45));
}
.vaderdagbok-diagram--klar { animation: vd-klar 1.1s ease; }
@keyframes vd-klar {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.08) drop-shadow(0 0 13px rgba(255, 220, 120, 0.9)); }
}
.vaderdagbok-kolumn {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 234px;
}
.vaderdagbok-kolumn--redo .vaderdagbok-track {
  box-shadow: 0 0 0 3px var(--ok);
  background: #DBEFC0;
}
.vaderdagbok-kolumn--vinst { animation: vd-vinst 1s ease; }
@keyframes vd-vinst {
  0%, 100% { filter: none; }
  50%      { filter: brightness(1.12) drop-shadow(0 0 12px rgba(255, 220, 120, 0.95)); }
}
.vaderdagbok-antal {
  font-size: 1.2rem;
  font-weight: 800;
  color: #6a5640;
  margin-bottom: 2px;
}
.vaderdagbok-track {
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
  width: 54px;
  padding: 3px;
  border-radius: 6px 6px 0 0;
  background: rgba(255, 255, 255, 0.5);
}
.vaderdagbok-block {
  width: 100%;
  height: 24px;
  border-radius: 4px;
  animation: vd-pop 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes vd-pop {
  0%   { transform: scaleY(0); }
  60%  { transform: scaleY(1.15); }
  100% { transform: scaleY(1); }
}
.vaderdagbok-block--sol  { background: #F2C94C; border: 1px solid #D8A82E; }
.vaderdagbok-block--moln { background: #BCC6D2; border: 1px solid #9AA6B5; }
.vaderdagbok-block--regn { background: #6FA8C9; border: 1px solid #4F89AB; }
.vaderdagbok-block--sno  { background: #DCE8F4; border: 1px solid #B2C6DC; }
.vaderdagbok-fot {
  margin-top: 5px;
  font-size: 1.9rem;
  line-height: 1;
}
.vaderdagbok-hog {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 160px;
  margin: 0.9rem auto 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.vaderdagbok-bricka {
  position: absolute;
  margin: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  line-height: 1;
  border: 3px solid #C9D2E0;
  border-radius: 12px;
  background: #FBFCFE;
  box-shadow: 0 4px 6px rgba(60, 70, 90, 0.24);
  cursor: grab;
  touch-action: none;
}
.vaderdagbok-bricka:active { cursor: grabbing; }
.vaderdagbok-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  border: 3px solid #C9D2E0;
  border-radius: 12px;
  background: #FBFCFE;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.vaderdagbok-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 340px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.vaderdagbok-tal-uttryck { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.2; color: #4F8EB0; }
.vaderdagbok-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Bygg meningen rätt (typ: bygg-mening) — konkret, errorless grammatik --- */
.bygg-mening { margin: 0.6rem 0 0.2rem; }
.bygg-mening-mira { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.bygg-mening-mira-figur { width: 76px; }
.bygg-mening-mira-svg { width: 100%; height: auto; display: block; }
.bygg-mening-mall {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: flex-end;
  margin: 0 auto;
  max-width: 460px;
  padding: 14px 12px;
  border-radius: 14px;
  background: #FFFDF3;
  border: 3px solid #E2D2A8;
  box-shadow: var(--shadow);
}
.bygg-mening-mall--klar { animation: bm-klar 1.1s ease; }
@keyframes bm-klar {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.1) drop-shadow(0 0 13px rgba(255, 220, 120, 0.9)); }
}
.bygg-mening-plats {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 50px;
  border-radius: 9px;
  border: 2.5px dashed rgba(90, 80, 55, 0.4);
  background: rgba(255, 255, 255, 0.5);
}
.bygg-mening-plats--start {
  border-color: #E2B45A;
  background: #FFF1C9;
}
.bygg-mening-plats--punkt {
  min-width: 40px;
}
.bygg-mening-plats--redo {
  animation: none;
  border-style: solid;
  border-color: var(--ok);
  background: #DBEFC0;
}
.bygg-mening-plats--fylld {
  border-style: solid;
  border-color: #C7B98F;
  background: #fff;
}
.bygg-mening-hint {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #B89A63;
}
.bygg-mening-plats--punkt .bygg-mening-hint { font-size: 1.6rem; line-height: 0.7; }
.bygg-mening-ord {
  font-size: 1.1rem;
  font-weight: 700;
  color: #3a2c18;
  animation: bm-pop 0.32s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes bm-pop {
  0%   { transform: scale(0.4); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.bygg-mening-hog {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin: 0.9rem auto 0;
  max-width: 440px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}
.bygg-mening-bricka {
  margin: 0;
  min-width: 70px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #3a2c18;
  background: #FFF8E4;
  border: 3px solid #E2C98E;
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  box-shadow: 0 3px 5px rgba(90, 60, 20, 0.22);
  cursor: grab;
  touch-action: none;
}
.bygg-mening-bricka:active { cursor: grabbing; }
.bygg-mening-bricka--punkt {
  min-width: 0;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.2rem 0.7rem;
}
.bygg-mening-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #3a2c18;
  background: #FFF8E4;
  border: 3px solid #E2C98E;
  border-radius: 10px;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.3));
}
.bygg-mening-talsymbol {
  margin: 0.9rem auto 0;
  text-align: center;
  max-width: 360px;
  background: #FFF7E6;
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  animation: gr-tonain 0.6s ease both;
}
.bygg-mening-tal-uttryck { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: #E0913F; }
.bygg-mening-tal-bild { display: block; font-size: 0.85rem; color: #6a5640; margin-top: 0.4rem; }

/* --- Självreflektion (reflektion) — lugn känslo-fråga efter ett quiz --- */
.reflektion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.4rem 1rem 1rem;
  animation: gr-tonain 0.5s ease both;
}
.reflektion-mira { display: flex; justify-content: center; }
.reflektion-mira-figur { width: 92px; }
.reflektion-mira-svg { width: 100%; height: auto; display: block; }
.reflektion-fraga {
  font-size: 1.35rem;
  font-weight: 800;
  color: #5a4326;
  text-align: center;
  margin: 0.2rem 0 0;
}
.reflektion-kort {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 0.4rem;
}
.reflektion-kort-knapp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 132px;
  min-height: 138px;
  padding: 1rem 0.6rem;
  border: 3px solid #E2D2A8;
  border-radius: 18px;
  background: #FFFDF3;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.3s ease;
}
.reflektion-kort-knapp:hover,
.reflektion-kort-knapp:focus-visible { transform: translateY(-3px); }
.reflektion-kort-ikon { font-size: 3.2rem; line-height: 1; }
.reflektion-kort-etikett { font-size: 1rem; font-weight: 700; color: #6a5640; }
/* Bekräftelse — varm, inte dömande. Ingen grön bock, inget rätt/fel. */
.reflektion-kort-knapp--vald {
  border-color: var(--stjarna, #F2C94C);
  background: #FFF7E0;
  box-shadow: 0 0 0 5px rgba(242, 201, 76, 0.45);
  animation: refl-vald 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
@keyframes refl-vald {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.reflektion-kort-knapp--dimmad { opacity: 0.45; }

/* --- Rörelsepaus (rorelsepaus) — kravlös brain break, var tredje omgång --- */
.rorelsepaus {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.4rem 1rem 1.2rem;
  animation: gr-tonain 0.5s ease both;
}
/* Opt-out: diskret men alltid nåbar — hyperfokus ska aldrig tvingas brytas. */
.rorelsepaus-hoppa {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  padding: 0.3rem 0.5rem;
  background: none;
  border: none;
  font-size: 0.8rem;
  color: var(--text-muted, #8a7d66);
  text-decoration: underline;
  cursor: pointer;
}
.rorelsepaus-mira { display: flex; justify-content: center; }
.rorelsepaus-mira-figur { width: 88px; animation: rp-bob 2.6s ease-in-out infinite; }
.rorelsepaus-mira-svg { width: 100%; height: auto; display: block; }
@keyframes rp-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.rorelsepaus-rubrik {
  font-size: 1.4rem;
  font-weight: 800;
  color: #5a8a3a;
  text-align: center;
  margin: 0.1rem 0 0;
}
.rorelsepaus-timer {
  position: relative;
  width: 156px;
  height: 156px;
  margin: 0.3rem 0;
}
.rorelsepaus-ring { width: 100%; height: 100%; display: block; }
.rorelsepaus-ring-spar { fill: none; stroke: #E7DCC0; stroke-width: 9; }
.rorelsepaus-ring-fyll {
  fill: none;
  stroke: #5BA8C9;
  stroke-width: 9;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
}
.rorelsepaus-ovning {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  line-height: 1;
  animation: rp-gunga 2.2s ease-in-out infinite;
}
@keyframes rp-gunga {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}
.rorelsepaus-text {
  font-size: 1.15rem;
  font-weight: 700;
  color: #5a4326;
  text-align: center;
  max-width: 320px;
  margin: 0;
}
.rorelsepaus-klar-rad { min-height: 3rem; display: flex; justify-content: center; }
.rorelsepaus-fortsatt {
  font-size: 1.15rem;
  padding: 0.7rem 1.7rem;
  animation: gr-tonain 0.4s ease both;
}

.framsteg-bar {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin: 0 0 1rem;
}
.framsteg-bar__fyllning {
  height: 100%;
  background: var(--ok);
  transition: width 0.3s ease;
}

.resultat-kort {
  text-align: center;
  padding: 2rem 1rem;
}
.resultat-kort__stjarnor {
  font-size: 3rem;
  letter-spacing: 6px;
  margin-bottom: 0.5rem;
}
.resultat-kort__stjarnor .stj {
  display: inline-block;
  transform: scale(0.85);
  opacity: 0;
  animation: stj-pop 0.5s ease-out forwards;
}
.resultat-kort__stjarnor .stj--fylld { color: var(--stjarna); }
.resultat-kort__stjarnor .stj--tom   { color: #DDD; }

/* Lugn in-toning — mjuk skala, ingen rotation, ingen overshoot */
@keyframes stj-pop {
  0%   { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}

.resultat-kort__pep { font-size: 1.2rem; font-weight: 700; margin: 0.4rem 0; }
/* Exakt poäng — centrerad rad under stjärnorna (.resultat-kort är text-align: center) */
.resultat-kort__poang {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 0.2rem;
}
.resultat-kort__streak {
  display: inline-block;
  background: linear-gradient(135deg, #FFD43B 0%, #FF8C42 100%);
  color: var(--cta-text);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  margin: 0.5rem 0 0;
  animation: streak-pop 0.5s ease-out 0.7s both;
}
@keyframes streak-pop {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Avklarat delområde — stillsam, festlig bakgrund. Ingen rörelse. */
.resultat-kort--full {
  background: radial-gradient(circle at 50% 0%, #FFF3C2 0%, var(--bg-card) 60%);
}
.resultat-kort__actions { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }

/* Deltagande-belöning — en enda lugn stjärna, ingen 3-stjärnig jämförelse */
.resultat-kort--deltagande {
  background: radial-gradient(circle at 50% 0%, #FFF3C2 0%, var(--bg-card) 60%);
}
.resultat-kort__klarstjarna {
  font-size: 3.6rem;
  line-height: 1;
  color: var(--stjarna);
  margin-bottom: 0.3rem;
  animation: stj-pop 0.5s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .resultat-kort__klarstjarna { animation: none; }
}

/* --- Hint-text --- */
.hint { text-align: center; color: var(--text-muted); margin-top: 2rem; }

/* --- Mobil (< 480px) --- */
@media (max-width: 480px) {
  .ak-grid { grid-template-columns: repeat(2, 1fr); }
  .amne-grid { grid-template-columns: 1fr; }
  h1 { font-size: 1.6rem; }
  .fraga__text { font-size: 1.1rem; }
}

/* --- Högstadiet (teen-sida) --- */
/* Ljust tema i linje med startsidan — vita kort, mjuka skuggor, samma
   accentfärger och radie-tokens. "Tuffare" kommer från teen-bilderna och
   feta versalrubriker, inte från en mörk bakgrund. */
.container--teen { max-width: 960px; }

.teen-hero {
  display: grid;
  grid-template-columns: minmax(150px, 260px) 1fr;
  align-items: center;
  gap: 1.5rem;
  max-width: 960px;
  margin: 1.2rem auto 1rem;
  padding: 1rem 1.2rem;
}
.teen-hero__bild {
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  animation: mjuk-in 0.6s ease-out;
}
.teen-hero__text { text-align: left; }
.teen-hero__crumbs { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 0.4rem; }
.teen-hero__crumbs a { color: var(--text-muted); }
.teen-hero__rubrik {
  font-size: 2.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  margin: 0 0 0.5rem;
}
/* Stadiesammanfattning — ljus box (70 % opacitet) för läsbarhet mot bakgrunden */
.teen-hero__under {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
  max-width: 60ch;
  padding: 0.85rem 1.15rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.teen-grid {
  list-style: none;
  margin: 1.5rem auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.teen-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.teen-card:hover, .teen-card:focus-visible {
  text-decoration: none;
  border-color: var(--accent);
  transform: translateY(-3px);
}
.teen-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.teen-card__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
/* Genomskinliga helfigurer i årskurskort — samma rutstorlek som högstadiet
   (4/3), men contain så hela figuren ryms utan att kapas. */
.mellan-sida .teen-card__bild,
.teen-card__bild--figur {
  object-fit: contain;
  object-position: center bottom;
}
.teen-card__nr {
  margin: 0.8rem 1rem 0;
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}
.teen-card__namn { margin: 0.1rem 1rem 0; font-size: 1.05rem; font-weight: 700; }
.teen-card__meta { margin: 0.2rem 1rem 0; font-size: 0.9rem; color: var(--text-muted); }
.teen-card__cta {
  align-self: stretch;
  margin: 0.8rem 1rem 1rem;
  padding: 0.5rem 1rem;
  background: var(--cta);
  color: var(--cta-text);
  border-radius: 999px;
  font-weight: 800;
  text-align: center;
}
.teen-hint { text-align: center; color: var(--text-muted); margin-top: 2rem; }

@media (max-width: 720px) {
  .teen-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .teen-hero__text { text-align: center; }
  .teen-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .teen-hero__rubrik { font-size: 2.1rem; }
  /* Mindre hjältebild på mobil så årskurskorten syns tidigare. */
  .teen-hero__bild { max-width: 150px; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================== *
 * CPA-motor (cpa) — Concrete · Pictorial · Abstract
 * Utökning av det visuella UI-kitet. Se cpa.mjs / cpa-test.mjs.
 * Lågaffektiv: mjuka övergångar; global reduced-motion-regel ovan gör
 * dem direkta. TILLFÄLLIG utvärderingsmodul — kan tas bort i ett block.
 * ================================================================== */

/* --- En CPA-enhet: scen + diskret vik-ihop-knapp --- */
.cpa-enhet {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* "Scenen" — det enda som byts vid nivåskifte. Fast min-höjd så att
   layouten inte hoppar när konkret/bild/abstrakt avlöser varandra. */
.cpa-enhet__scen {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 3rem;
  min-height: 3.6rem;
  padding: 0.3rem 0.45rem;
  border-radius: var(--radius);
  transition: opacity 0.26s ease, transform 0.26s ease;
}
/* Mellanläge under nivåbytet — tonas ut och krymper en aning. */
.cpa-enhet__scen--tonar { opacity: 0; transform: scale(0.82); }

/* Fall-back-affordans: en abstrakt (eller utvikt) enhet är tryckbar. Diskret —
   en svag streckad ram + liten nedåtpil — tydlig först vid hover/fokus. */
.cpa-enhet__scen--utvikbar {
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(79, 142, 247, 0.22);
}
.cpa-enhet__scen--utvikbar::after {
  content: "⌄";
  position: absolute;
  right: 5px;
  bottom: 1px;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.55;
}
.cpa-enhet__scen--utvikbar:hover {
  box-shadow: inset 0 0 0 2px rgba(79, 142, 247, 0.5);
}
.cpa-enhet__scen--utvikbar:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Nivå 1 — Konkret: verkliga föremål (emoji-motiv) */
.cpa-objekt {
  font-size: 2.5rem;
  line-height: 1;
  animation: cpa-in 0.34s ease both;
  animation-delay: calc(var(--cpa-i, 0) * 0.06s);
}
@keyframes cpa-in {
  from { opacity: 0; transform: translateY(5px) scale(0.82); }
  to   { opacity: 1; transform: none; }
}

/* Nivå 3 — Abstrakt: den abstrakta siffran */
.cpa-siffra {
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

/* Diskret vik-ihop-knapp — tar tillbaka en utvikt enhet till siffran */
.cpa-enhet__vik {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--accent);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.cpa-enhet__vik:hover { background: #f3f7ff; }
.cpa-enhet__vik:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* --- Testmodulen (speltyp cpa-test) --- */
.cpa-spel {
  text-align: center;
  padding: 0.5rem 0 1rem;
}
.cpa-spel__instruktion {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0 0 1.2rem;
}
.cpa-spel__ekvation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 0.9rem;
}
.cpa-spel__op {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text-muted);
}
.cpa-spel__plats {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  min-height: 4.4rem;
  padding: 0.3rem;
  border-radius: var(--radius);
  transition: background 0.18s ease;
}
/* Mottagar-platsen markeras diskret som mål innan ihopdragningen. */
.cpa-spel__plats--mal {
  outline: 2px dashed rgba(79, 142, 247, 0.4);
  outline-offset: 4px;
}
/* När en mängd dras nära mottagaren — lugn, lågkontrast återkoppling. */
.cpa-spel__plats--nara { background: rgba(79, 142, 247, 0.14); }
.cpa-spel__fragetecken {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-muted);
  opacity: 0.5;
}
.cpa-spel__verktyg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  margin-top: 1.4rem;
  min-height: var(--tap);
}

/* En dragbar mängd (höger operand i testmodulen) */
.cpa-enhet--dragbar {
  cursor: grab;
  touch-action: none;
  transition: transform 0.22s ease;
}
.cpa-enhet--dras {
  cursor: grabbing;
  transition: none;          /* följer pekaren utan eftersläpning */
  z-index: 5;
  filter: drop-shadow(0 6px 12px rgba(40, 50, 100, 0.22));
}
/* Facit-enheten lyfts fram milt när svaret visas. */
.cpa-enhet--facit .cpa-siffra { color: var(--ok); }

/* ================================================================== *
 * PEDAGOGISKT LABORATORIUM — 5 fristående motorer (TILLFÄLLIGA)
 * Sekvens · Del-helhet · Fokusisolering · Talslinje · Symboltolk.
 * Byggda "på sidan av" skarp kod. Kan tas bort i ett block tillsammans
 * med modulerna i assets/js/, /pedagogik-test.php och spel.mjs-raderna.
 * ================================================================== */

/* ---- sek- : Sekvens- & Kretsloppsmotorn ---- */
.sek-omslag {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.25rem; padding: 1.5rem 1rem 1rem;
  background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); max-width: 480px; margin: 0 auto;
}
.sek-scen {
  display: flex; align-items: center; justify-content: center;
  gap: 0.75rem; width: 100%; min-height: 120px;
}
.sek-mitt {
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem; line-height: 1; min-width: 88px; min-height: 88px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: var(--shadow); transition: opacity 220ms ease; flex-shrink: 0;
}
.sek-mitt--tonar { opacity: 0; }
.sek-spok {
  display: none; align-items: center; justify-content: center;
  font-size: 2.2rem; line-height: 1; min-width: 64px; min-height: 64px;
  border-radius: var(--radius); opacity: 0.25;
  transition: opacity 220ms ease; flex-shrink: 0;
}
.sek-scen--stod .sek-spok { display: flex; }
.sek-spok--tonar { opacity: 0; }
.sek-spok .vk-silhuett { width: 36px; height: 36px; }
.sek-emoji { display: block; line-height: 1; user-select: none; }
.sek-indikator { display: flex; gap: 0.45rem; align-items: center; }
.sek-prick {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 35%, transparent);
  transition: background 200ms ease, transform 200ms ease; flex-shrink: 0;
}
.sek-prick--aktiv { background: var(--accent); transform: scale(1.3); }
.sek-kontroller { display: flex; align-items: center; gap: 0.5rem; }
.sek-btn {
  min-width: var(--tap); min-height: var(--tap); border-radius: var(--radius);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: opacity 150ms ease, filter 150ms ease;
}
.sek-btn:disabled { opacity: 0.28; cursor: default; filter: none; }
.sek-btn--nav {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-card));
  color: var(--text); border: 1.5px solid var(--border);
}
.sek-btn--nav:not(:disabled):hover,
.sek-btn--nav:not(:disabled):focus-visible { filter: brightness(1.08); }
.sek-btn--stod {
  background: var(--bg-card); color: var(--text-muted);
  border: 1.5px solid var(--border); font-size: 1.1rem;
}
.sek-btn--stod:hover, .sek-btn--stod:focus-visible {
  color: var(--accent); border-color: var(--accent);
}
.sek-btn--stod-pa {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  color: var(--accent); border-color: var(--accent);
}
.sek-btn--avslut {
  background: color-mix(in srgb, var(--ok) 16%, var(--bg-card));
  color: var(--ok); border: 1.5px solid color-mix(in srgb, var(--ok) 40%, transparent);
}
.sek-btn--avslut:hover, .sek-btn--avslut:focus-visible { filter: brightness(1.08); }
.sek-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .sek-mitt, .sek-spok, .sek-prick { transition-duration: 0s; }
}

/* ---- dh- : Del-Helhetsdelaren ---- */
.dh-wrap {
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 0.5rem; padding: 1.5rem 1rem 1rem; overflow: hidden;
}
.dh-rad {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 1.4rem; width: 100%;
}
.dh-rad--delar {
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.dh-isarsatt .dh-rad--delar { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dh-box {
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 0.85rem 1rem 0.9rem;
  min-width: 100px; transition: box-shadow 0.22s ease, transform 0.22s ease;
  cursor: default; position: relative; border: 2px solid var(--border);
}
.dh-box--helhet { cursor: pointer; min-width: 130px; }
.dh-box--helhet:hover {
  box-shadow: var(--shadow-card), 0 0 0 3px rgba(79, 142, 247, 0.18);
}
.dh-box--helhet:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-lg);
}
.dh-isarsatt .dh-box--helhet {
  border-color: rgba(79, 142, 247, 0.28); background: rgba(79, 142, 247, 0.05);
}
.dh-box--del-a {
  transform: translateX(20px); opacity: 0;
  transition: transform 0.34s cubic-bezier(0.34, 1.2, 0.64, 1),
              opacity 0.28s ease, box-shadow 0.22s ease;
}
.dh-isarsatt .dh-box--del-a { transform: translateX(0); opacity: 1; }
.dh-box--del-b {
  transform: translateX(-20px); opacity: 0;
  transition: transform 0.34s cubic-bezier(0.34, 1.2, 0.64, 1),
              opacity 0.28s ease, box-shadow 0.22s ease;
}
.dh-isarsatt .dh-box--del-b { transform: translateX(0); opacity: 1; }
.dh-inre {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 3px; min-height: 2rem;
}
.dh-objekt {
  font-size: 1.55rem; line-height: 1; display: inline-block;
  animation: dh-trampolin 0.28s ease both;
  animation-delay: calc(var(--dh-i, 0) * 0.04s); user-select: none;
}
@keyframes dh-trampolin {
  from { opacity: 0; transform: scale(0.55); }
  to   { opacity: 1; transform: scale(1); }
}
.dh-etikett {
  font-size: 1.5rem; font-weight: 800; color: var(--text);
  line-height: 1; letter-spacing: -0.02em;
}
.dh-etikett--helhet { color: var(--accent); }
.dh-etikett--del { font-size: 1.25rem; color: var(--text-muted); }
.dh-linjer {
  width: 200px; height: 50px; display: block; opacity: 0;
  transition: opacity 0.28s ease; pointer-events: none;
  margin: -0.25rem 0; flex-shrink: 0;
}
.dh-linjer--synlig { opacity: 1; }
.dh-linje { stroke: var(--border); stroke-width: 2.5; stroke-linecap: round; }
.dh-kontroller {
  display: flex; justify-content: center; align-items: center;
  gap: 0.6rem; margin-top: 0.6rem;
}
.dh-knapp {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); font-size: 1.45rem;
  border: 0; border-radius: 50%; background: var(--bg-card);
  color: var(--text-muted); box-shadow: var(--shadow); cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  font-family: inherit; line-height: 1;
}
.dh-knapp:hover { background: rgba(79, 142, 247, 0.1); color: var(--accent); }
.dh-knapp:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.dh-knapp--aktion { background: var(--ok); color: #fff; box-shadow: var(--shadow); }
.dh-knapp--aktion:hover { background: var(--ok); color: #fff; filter: brightness(1.08); }
.dh-tonar .dh-box--helhet .dh-inre,
.dh-tonar .dh-box--del .dh-inre {
  opacity: 0; transform: scale(0.88);
  transition: opacity 0.19s ease, transform 0.19s ease;
}
.dh-wrap > .vk-silhuett {
  position: absolute; pointer-events: none; opacity: 0.07;
  width: 54px; height: 54px;
}
.dh-wrap > .vk-silhuett:nth-child(1) { top: 6%; left: 4%; }
.dh-wrap > .vk-silhuett:nth-child(2) { bottom: 8%; right: 5%; width: 38px; height: 38px; }
.dh-wrap > .vk-silhuett:nth-child(3) { top: 30%; right: 3%; width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) {
  .dh-rad--delar, .dh-box--del-a, .dh-box--del-b, .dh-linjer,
  .dh-objekt, .dh-box, .dh-knapp { transition: none; animation: none; }
  .dh-rad--delar { opacity: 0; pointer-events: none; }
  .dh-isarsatt .dh-rad--delar { opacity: 1; pointer-events: auto; }
  .dh-box--del-a, .dh-box--del-b { transform: none; opacity: 0; }
  .dh-isarsatt .dh-box--del-a, .dh-isarsatt .dh-box--del-b { opacity: 1; }
  .dh-objekt { animation: none; opacity: 1; transform: none; }
  .dh-linjer { transition: none; }
  .dh-linjer--synlig { opacity: 1; }
}

/* ---- fok- : Den Kontrasterande Fokusmotorn ---- */
.fok-demo {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.2rem; padding: 1.4rem 1rem 1rem;
}
.fok-toprad {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 480px; min-height: var(--tap); gap: 0.75rem;
}
.fok-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
  width: 100%; max-width: 480px;
}
.fok-platta {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: var(--tap);
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  font-size: 2rem; line-height: 1; cursor: pointer; user-select: none;
  transition: opacity 0.28s ease, transform 0.18s ease, box-shadow 0.18s ease;
  outline: none;
}
.fok-platta:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.fok-platta.fok-aktiv {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px var(--accent), var(--shadow-card);
}
.fok-dampad { opacity: 0.15; pointer-events: none; }
.fok-kontrollrad {
  display: flex; justify-content: center; gap: 0.8rem;
  width: 100%; max-width: 480px;
}
.fok-om {
  min-width: var(--tap); min-height: var(--tap); border-radius: var(--radius);
  background: var(--bg-card); border: 1.5px solid var(--border);
  box-shadow: var(--shadow); font-size: 1.6rem; cursor: pointer;
  transition: opacity 0.18s ease, transform 0.15s ease;
}
.fok-om:hover { opacity: 0.85; transform: scale(1.04); }
.fok-om:active { transform: scale(0.97); }
.fok-om:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.fok-ok {
  min-width: var(--tap); min-height: var(--tap); border-radius: var(--radius);
  background: var(--ok); color: #fff; border: none; box-shadow: var(--shadow);
  font-size: 1.6rem; cursor: pointer;
  transition: opacity 0.18s ease, transform 0.15s ease;
}
.fok-ok:hover { opacity: 0.88; transform: scale(1.04); }
.fok-ok:active { transform: scale(0.97); }
.fok-ok:focus-visible { outline: 3px solid var(--ok); outline-offset: 3px; }
.fok-toggl {
  min-width: var(--tap); min-height: var(--tap); border-radius: var(--radius);
  background: var(--bg-card); border: 1.5px solid var(--border);
  box-shadow: var(--shadow); font-size: 1.4rem; cursor: pointer;
  transition: opacity 0.18s ease, background 0.18s ease;
}
.fok-toggl:hover { opacity: 0.82; }
.fok-toggl:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.fok-toggl--av { opacity: 0.5; border-style: dashed; }
.fok-prickar { display: flex; gap: 0.45rem; align-items: center; }
.fok-prick {
  width: 10px; height: 10px; border-radius: 50%; background: var(--border);
  transition: background 0.22s ease, transform 0.18s ease;
}
.fok-prick--aktiv { background: var(--accent); transform: scale(1.25); }

/* ---- tl- : Den Animerade Talslinjen ---- */
.tl-omslag {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.2rem; padding: 1rem 0.5rem 1.2rem;
}
.tl-remsa {
  display: flex; flex-direction: row; align-items: flex-end;
  gap: 0.25rem; overflow-x: auto; overflow-y: visible;
  padding: 0.5rem 0.75rem 0.5rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  padding-top: clamp(2.5rem, 22vw, 10rem);
}
.tl-post {
  position: relative; display: flex; flex-direction: column;
  align-items: center; flex: 0 0 auto;
}
.tl-siffra {
  display: block; line-height: 1; font-weight: 700; cursor: pointer;
  user-select: none; border-radius: 8px; padding: 0.18em 0.22em;
  transition: transform 0.15s ease, background 0.15s ease; outline: none;
}
.tl-siffra:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tl-siffra:hover, .tl-siffra:focus-visible {
  transform: scale(1.12); background: rgba(79, 142, 247, 0.08);
}
.tl-facit {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column-reverse; flex-wrap: wrap-reverse;
  align-items: center; gap: 3px; padding-bottom: 6px;
  pointer-events: none; width: max-content; max-width: 120px;
}
.tl-facit--synlig { display: flex; }
.tl-facit .vk-silhuett { width: 18px; height: 18px; }
.tl-kontrollrad {
  display: flex; justify-content: center; gap: 0.6rem; min-height: 2.4rem;
}
.tl-knapp {
  min-width: var(--tap); min-height: var(--tap); font-size: 1.4rem;
  border-radius: var(--radius); display: inline-flex;
  align-items: center; justify-content: center;
}
.tl-knapp--klar { background: var(--ok); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .tl-siffra { transition: none; }
}

/* ---- sym- : Piktogram- & Symbolöversättaren ---- */
.sym-omslag {
  display: flex; flex-direction: column; align-items: center;
  gap: 28px; padding: 16px 8px 24px;
}
.sym-galleri {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 16px; width: 100%; max-width: 640px;
}
.sym-kort {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  overflow: hidden; transition: box-shadow 0.22s ease, transform 0.22s ease;
  min-width: 160px; flex: 1 1 160px; max-width: 200px;
}
.sym-kort--expanderad {
  box-shadow: 0 6px 22px rgba(79, 142, 247, 0.18); transform: translateY(-2px);
}
.sym-facet {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--tap); padding: 20px 12px; cursor: pointer;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: transparent; transition: background 0.18s ease; outline: none;
}
.sym-facet:hover,
.sym-facet[aria-expanded="false"]:focus-visible { background: rgba(79, 142, 247, 0.07); }
.sym-facet:focus-visible {
  outline: 3px solid var(--accent); outline-offset: -3px;
  border-radius: var(--radius-lg);
}
.sym-kort--expanderad .sym-facet {
  border-bottom: 1.5px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: rgba(79, 142, 247, 0.05); cursor: default;
}
.sym-symbol {
  font-size: 3.2rem; line-height: 1; user-select: none; display: block;
  transition: transform 0.18s ease;
}
.sym-facet:hover .sym-symbol,
.sym-facet:focus-visible .sym-symbol { transform: scale(1.08); }
.sym-kort--expanderad .sym-facet .sym-symbol { transform: scale(0.9); opacity: 0.7; }
.sym-expansion {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 14px 12px 12px; background: rgba(234, 242, 255, 0.45);
}
.sym-ram {
  font-size: 2.8rem; line-height: 1; min-height: 3.2rem;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.22s ease; user-select: none;
}
.sym-ram--tonar { opacity: 0; }
.sym-ramar-statiska {
  display: flex; flex-direction: row; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.sym-ram-statisk {
  font-size: 2rem; line-height: 1; padding: 6px 8px;
  border-radius: var(--radius); border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.6);
  transition: border-color 0.15s ease, background 0.15s ease;
  user-select: none; cursor: default;
}
.sym-ram-statisk--aktiv {
  border-color: var(--accent); background: rgba(79, 142, 247, 0.10);
}
.sym-styrrad {
  display: flex; flex-direction: row; gap: 8px;
  justify-content: center; align-items: center;
}
.sym-knapp {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap); border: none;
  border-radius: var(--radius); background: var(--bg-card); color: var(--text);
  font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow);
  transition: background 0.16s ease, transform 0.14s ease, box-shadow 0.16s ease;
  user-select: none; padding: 0 14px;
}
.sym-knapp:hover {
  background: rgba(79, 142, 247, 0.10); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 142, 247, 0.15);
}
.sym-knapp:active { transform: translateY(0); box-shadow: var(--shadow); }
.sym-knapp:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sym-knapp--nasta {
  background: rgba(79, 142, 247, 0.08); color: var(--accent); font-size: 1.5rem;
}
.sym-knapp--stang {
  background: rgba(0, 0, 0, 0.04); color: var(--text-muted);
  font-size: 1.1rem; min-width: 44px; padding: 0 10px;
}
.sym-knapp--stang:hover { background: rgba(230, 57, 70, 0.08); color: #c0303a; }
.sym-kontrollrad { display: flex; justify-content: center; }
.sym-knapp--bekrafta {
  background: var(--ok); color: #fff; font-size: 1.5rem; min-width: 72px;
  border-radius: var(--radius-lg); box-shadow: 0 3px 10px rgba(6, 167, 125, 0.22);
}
.sym-knapp--bekrafta:hover {
  background: #059069; color: #fff; transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(6, 167, 125, 0.30);
}
.sym-knapp--omstart {
  background: rgba(79, 142, 247, 0.10); color: var(--accent);
  font-size: 1.5rem; min-width: 72px; border-radius: var(--radius-lg);
}
@media (prefers-reduced-motion: reduce) {
  .sym-kort, .sym-facet, .sym-symbol, .sym-ram,
  .sym-ram-statisk, .sym-knapp { transition: none; }
  .sym-kort--expanderad { transform: none; }
}

/* ---- Lab-patch: HTML-attributet [hidden] måste vinna över modulernas
   egna display-värden. Utan detta visas element som JS dolt med .hidden. ---- */
.sym-expansion[hidden],
.sym-ram[hidden],
.sym-ramar-statiska[hidden],
.sym-knapp[hidden],
.dh-knapp[hidden],
.tl-knapp[hidden],
.sek-btn[hidden] { display: none; }

/* --- Skolsystern: lugn ingång på startsidan --- */
.start-skolsyster { margin: 1.4rem auto 0; max-width: 460px; }
.start-skolsyster a {
  display: block;
  padding: 0.9rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  text-align: center;
}
.start-skolsyster a:hover { border-color: var(--accent); }

/* Skolsystern-avsnitt på stadiesidorna (lågstadiet/mellanstadiet/högstadiet) */
.stadie-skolsyster { margin-top: 2.5rem; }
.stadie-skolsyster__rubrik { margin: 0 0 1rem; font-size: 1.4rem; }

/* Skolsystern-flytbild — syskon till robot-glad, samma storlek, strax till vänster */
.skolsyster-flyt {
  position: fixed;
  bottom: 1.2rem;
  right: calc(1rem + 90px + 0.6rem);
  display: block;
  line-height: 0;
  animation: mjuk-in 0.6s ease-out;
  z-index: 40;
}
/* Storleksätts på HÖJD (110px) så den blir lika hög som vänster-maskoterna —
   welcome-bilden är väldigt stående och skulle annars bli orimligt hög. */
.skolsyster-flyt img {
  height: 110px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(120, 200, 240, 0.45));
  transition: transform 0.12s ease;
}
.skolsyster-flyt:hover img,
.skolsyster-flyt:focus-visible img { transform: scale(1.06); }
.skolsyster-flyt:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* SYV-flytbild — syskon till skolsystern, samma höjd (110px), direkt till
   vänster om den. Offset = skolsysterns right + skolsysterns bredd (153×300
   skalad till 110px höjd ≈ 56px) + 0.6rem mellanrum. */
.syv-flyt {
  position: fixed;
  bottom: 1.2rem;
  right: calc(1rem + 90px + 0.6rem + 56px + 0.6rem);
  display: block;
  line-height: 0;
  animation: mjuk-in 0.6s ease-out;
  z-index: 40;
}
.syv-flyt img {
  height: 110px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(120, 200, 240, 0.45));
  transition: transform 0.12s ease;
}
.syv-flyt:hover img,
.syv-flyt:focus-visible img { transform: scale(1.06); }
.syv-flyt:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* Mobil: flytbilderna krymper (110px → 73px) och flyttas in i högerkanten,
   i nivå med teen-maskoterna. MÅSTE ligga EFTER desktop-reglerna ovan — annars
   vinner desktop-reglerna kaskaden (de står senare i filen än sajtens andra
   mobil-@media-block). Robot-glad är 60px och sitter på right:0.6rem på mobil. */
@media (max-width: 600px) {
  .skolsyster-flyt { bottom: 0.8rem; right: calc(0.6rem + 60px + 0.4rem); }
  .skolsyster-flyt img { height: 73px; }
  .syv-flyt { bottom: 0.8rem; right: calc(0.6rem + 60px + 0.4rem + 37px + 0.4rem); }
  .syv-flyt img { height: 73px; }
}

/* Skolsystern-länk längst ned på varje årskurssida */
.ak-skolsyster { margin: 2rem 0 0; text-align: center; }
.ak-skolsyster img {
  width: 150px;
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 4px 12px rgba(120, 200, 240, 0.45));
  transition: transform 0.12s ease;
}
.ak-skolsyster a:hover img,
.ak-skolsyster a:focus-visible img { transform: scale(1.05); }
.ak-skolsyster a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* === Den Digitala SYV:en — förklarande text under verktyget === */
.syv-info {
  max-width: 680px;
  margin: 2.6rem auto 1rem;
  padding: 0 1rem;
}
.syv-info > h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.7rem;
}
.syv-info__ingress {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}

.syv-info__hint {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.syv-info__steg {
  list-style: none;
  counter-reset: syv-info;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.syv-info__steg > li { counter-increment: syv-info; }

/* Steg-knapp: öppnar sitt innehåll som en pop-up */
.syv-info__kort {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.1rem 1.2rem 1.1rem 3.7rem;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.syv-info__kort:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.syv-info__kort:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.syv-info__kort::before {
  content: counter(syv-info);
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.85rem;
  height: 1.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  border-radius: 50%;
}
.syv-info__kort-titel { font-size: 1.1rem; font-weight: 800; }
.syv-info__kort-mer {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
}
.syv-info__kort-pil {
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}

/* Pop-up för ett steg. Önskemål: själva rutan ligger på 85 % opacitet. */
.syv-info__popup {
  width: min(34rem, calc(100vw - 2rem));
  margin: auto;
  padding: 1.7rem 1.7rem 1.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background: var(--bg-card);
  color: var(--text);
  opacity: 0.85;
}
.syv-info__popup::backdrop { background: rgba(20, 30, 50, 0.5); }
.syv-info__popup h3 {
  margin: 0 0 0.7rem;
  padding-right: 2rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
}
.syv-info__popup p { margin: 0 0 0.7rem; line-height: 1.6; }
.syv-info__popup p:last-child { margin-bottom: 0; }
.syv-info__popup form { margin: 0; }
.syv-info__popup-stang {
  position: absolute;
  top: 0.75rem;
  right: 0.8rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 50%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text-muted);
  cursor: pointer;
}
.syv-info__popup-stang:hover { color: var(--text); border-color: var(--accent); }
.syv-info__popup-stang:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.syv-info__punkter {
  margin: 0.5rem 0 0.7rem;
  padding-left: 1.2rem;
  line-height: 1.6;
}
.syv-info__punkter li { margin: 0.32rem 0; }

.syv-info__pedagogik {
  margin-top: 1.1rem;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0 1.3rem;
}
.syv-info__pedagogik summary {
  padding: 1rem 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
}
.syv-info__pedagogik summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.syv-info__pedagogik[open] summary { border-bottom: 1px solid var(--border); }
.syv-info__pedagogik-inre { padding: 1rem 0 1.2rem; }
.syv-info__pedagogik-inre p { margin: 0 0 0.7rem; line-height: 1.6; }
.syv-info__pedagogik-inre ul { margin: 0 0 0.8rem; padding-left: 1.2rem; line-height: 1.6; }
.syv-info__pedagogik-inre li { margin: 0.35rem 0; }

@media (prefers-reduced-motion: reduce) {
  .syv-info__kort { transition: none; }
  .syv-info__kort:hover { transform: none; }
}

/* Förklaringen ska inte följa med när eleven skriver ut sin Gymnasiekarta. */
@media print {
  .syv-info { display: none !important; }
}

/* Pedagogiskt labb: isolerad testvy bakom serverflagga. */
.lab-pedagogik {
  display: grid;
  gap: 1rem;
  max-width: 980px;
}
.lab-pedagogik .card h2,
.lab-pedagogik .card h3 {
  margin-top: 0;
}
.lab-pedagogik__status ul,
.lab-pedagogik__flags p {
  margin: 0.35rem 0;
}
.lab-pedagogik__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0.75rem 0 1rem;
}
.lab-pedagogik__flaggrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.25rem 1rem;
}
.lab-panel {
  display: grid;
  gap: 1rem;
}
.lab-panel__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}
.lab-progress {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lab-progress li {
  display: grid;
  grid-template-columns: 3rem minmax(8rem, 1fr) 3.5rem;
  gap: 0.7rem;
  align-items: center;
}
.lab-progress span,
.lab-progress strong {
  font-weight: 800;
}
.lab-progress meter {
  width: 100%;
  min-height: 1rem;
}
.lab-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}
.lab-ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
}
.lab-method,
.lab-ai-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem;
  background: var(--bg-mid);
}
.lab-method p,
.lab-ai-card p {
  min-height: 3rem;
  margin: 0 0 0.8rem;
}
.lab-acceptans-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.95rem;
  background: #fff;
}
.lab-acceptans-card p {
  margin-top: 0;
}
.lab-exercise {
  display: grid;
  gap: 1rem;
}
.lab-exercise__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}
.lab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.lab-feedback {
  min-height: 1.8rem;
  margin: 0.25rem 0 0;
  font-weight: 800;
}
.lab-sparet {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-size: 1.35rem;
  line-height: 1.7;
}
.lab-char {
  min-width: 1.6rem;
  min-height: 2.1rem;
  border: 1px solid transparent;
  border-radius: 0.35rem;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.lab-char--target {
  border-color: var(--border);
}
.lab-char--vald {
  outline: 3px solid var(--accent);
  background: #fff6d8;
}
.lab-char--blink {
  background: #ffe083;
  transform: scale(1.1);
}
.lab-sort-list,
.lab-method-grid {
  align-items: stretch;
}
.lab-sort-row {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 0.7rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.lab-sort-row p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}
.lab-sort-row div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.lab-sort-row--ok {
  border-color: #2a9d8f;
  background: #edf9f6;
}
.lab-sort-row--think {
  border-color: #e9a23b;
  background: #fff8e9;
}
.lab-detective {
  padding: 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-size: 1.25rem;
  line-height: 2.1;
}
.lab-detective__token {
  min-height: 2rem;
  margin: 0.08rem;
  padding: 0.12rem 0.28rem;
  border: 1px solid transparent;
  border-radius: 0.35rem;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.lab-detective__token:focus-visible,
.lab-char:focus-visible,
.lab-smiley button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.lab-detective__token--fixed {
  border-color: #2a9d8f;
  background: #edf9f6;
  font-weight: 800;
}
.lab-detective__token--ok {
  background: #eef3fb;
}
.lab-field {
  display: grid;
  gap: 0.4rem;
  max-width: 34rem;
  font-weight: 800;
}
.lab-field input {
  min-height: 3rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 1.1rem;
}
.lab-field textarea {
  max-width: 100%;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-size: 1.05rem;
  resize: vertical;
}
.lab-field input:focus-visible,
.lab-field textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.lab-motion-list {
  margin: 0;
  padding-left: 1.4rem;
  line-height: 1.7;
}
.lab-smiley {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.lab-smiley button {
  min-height: 3rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.85rem;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.lab-ai-result {
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  line-height: 1.6;
}
.lab-ai-result p,
.lab-ai-result ol,
.lab-ai-result ul {
  margin-top: 0;
}
.lab-ai-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}
.lab-ai-events {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.7;
}
.lab-acceptans-list {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  line-height: 1.55;
}
.lab-index {
  display: grid;
  gap: 1rem;
  max-width: 980px;
}
.lab-index__intro h2 {
  margin-top: 0;
}
.lab-index__intro p {
  margin-bottom: 0;
}
.lab-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.lab-index__kort {
  display: grid;
  align-content: space-between;
  gap: 1rem;
}
.lab-index__kort h2 {
  margin: 0 0 0.45rem;
}
.lab-index__kort p {
  margin: 0 0 0.45rem;
}
.lab-index__meta {
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 800;
}

@media (max-width: 640px) {
  .lab-panel__head {
    display: grid;
  }
  .lab-exercise__head {
    display: grid;
  }
  .lab-progress li {
    grid-template-columns: 2.5rem minmax(7rem, 1fr) 3rem;
  }
}

/* Betyg på frågan — "Hur var den här frågan? 👍 👎". Visas efter svar. */
.betyg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--text-muted);
}
.betyg__fraga {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-right: 0.2rem;
}
.betyg__btn {
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.35rem 0.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.betyg__btn:hover { transform: scale(1.15); }
.betyg__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.betyg__btn--upp:hover { background: rgba(6, 167, 125, 0.14); border-color: var(--ok); }
.betyg__btn--ner:hover { background: rgba(230, 57, 70, 0.12); border-color: var(--fel); }
.betyg__tack {
  font-size: 0.95rem;
  color: var(--ok);
  font-weight: 600;
}

/* ── Arabiska (RTL) ─────────────────────────────────────────────────────────
   page_header sätter <html lang="ar" dir="rtl">. dir=rtl ger korrekt textflöde
   och högerställning automatiskt. Här bara en läsbar arabisk font + några
   logiska justeringar. Finputsning av enskilda komponenters vänster/höger-
   spegling kräver visuell granskning (theme.css använder fysiska left/right). */
html[lang="ar"] {
  font-family: 'Segoe UI', 'Noto Sans Arabic', 'Tahoma', 'Arial', sans-serif;
}
html[lang="ar"] .crumbs,
html[lang="ar"] .hero-ny__crumbs { direction: rtl; }