/* Svenska Ord – mobil först. Färger: svensk blå och gul. */
:root {
  --bla: #006aa7;
  --bla-mork: #004f7c;
  --gul: #fecc02;
  --gul-mork: #d9ad00;
  --gron: #3bb54a;
  --gron-mork: #2a8f37;
  --rod: #e5484d;
  --rod-mork: #b8363a;
  --bg: #f6f8fb;
  --kort: #ffffff;
  --text: #1c2733;
  --dampad: #5d6b7a;
  --kant: #dfe5ec;
  --ratt-bg: #e7f8ea;
  --fel-bg: #fdecec;
  --skugga: 0 2px 10px rgba(20, 40, 70, .07);
  --radie: 16px;
  --nav-h: 64px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1720;
    --kort: #17222e;
    --text: #e8eef4;
    --dampad: #9aabbd;
    --kant: #2a3a4b;
    --ratt-bg: #143321;
    --fel-bg: #3a1a1c;
    --skugga: 0 2px 10px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1720; --kort: #17222e; --text: #e8eef4; --dampad: #9aabbd; --kant: #2a3a4b;
  --ratt-bg: #143321; --fel-bg: #3a1a1c; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  overflow-x: hidden;
}
body.i-lektion { overflow: hidden; }
a { color: var(--bla); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a { color: #6cc0f5; } }
h1 { font-size: 1.5rem; margin: .6rem 0 .8rem; }
h2 { font-size: 1.15rem; margin: .2rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.hoppa { position: absolute; left: -999px; }
.hoppa:focus { left: 8px; top: 8px; z-index: 99; background: var(--kort); padding: 8px; }
.dampad { color: var(--dampad); }
.liten { font-size: .85rem; }
.centrerad { text-align: center; justify-content: center; }
[hidden] { display: none !important; }

/* ---------- Topp ---------- */
.topp {
  position: sticky; top: 0; z-index: 20;
  background: var(--bla); color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.topp-rad {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 16px 4px; max-width: 760px; margin: 0 auto;
}
.logga { color: #fff !important; text-decoration: none; font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.flagga {
  width: 26px; height: 18px; border-radius: 3px; display: inline-block;
  background:
    linear-gradient(90deg, transparent 8px, var(--gul) 8px, var(--gul) 12px, transparent 12px),
    linear-gradient(0deg, transparent 7px, var(--gul) 7px, var(--gul) 11px, transparent 11px),
    var(--bla-mork);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7);
}
.stat { display: flex; gap: 6px; flex-wrap: nowrap; }
.chip {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(255, 255, 255, .16); color: #fff; border: 0;
  border-radius: 999px; padding: 3px 9px; font-weight: 700; font-size: .9rem; white-space: nowrap;
  font-family: inherit;
}
button.chip { cursor: pointer; }
button.chip:hover { background: rgba(255, 255, 255, .28); }

/* Alfabetsraden – alltid synlig, skrollas i sidled */
.alfa-rad {
  display: flex; gap: 5px; overflow-x: auto; padding: 6px 16px 9px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  max-width: 1240px; margin: 0 auto;
}
/* Centrera raden när alla 29 bokstäver får plats, utan att klippa vänsterkanten när den skrollar. */
.alfa-rad::before, .alfa-rad::after { content: ""; margin: auto; }
.alfa-knapp {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; border: 0;
  background: rgba(255, 255, 255, .95); color: var(--bla-mork);
  font: 800 1.05rem/1 var(--font); cursor: pointer; scroll-snap-align: start;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}
.alfa-knapp.vokal { background: var(--gul); color: #3a2e00; }
.alfa-knapp[aria-pressed="true"] { outline: 3px solid #fff; outline-offset: 1px; transform: translateY(1px); }
.alfa-knapp:focus-visible { outline: 3px solid #fff; }
.alfa-panel {
  background: var(--kort); color: var(--text); border-top: 3px solid var(--gul);
  padding: 12px 16px 14px; max-height: 60vh; overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}
.alfa-panel > * { max-width: 728px; margin-left: auto; margin-right: auto; }
.alfa-huvud { display: flex; align-items: center; gap: 14px; }
.alfa-stor { font-size: 2.6rem; font-weight: 800; color: var(--bla); line-height: 1; }
.alfa-stor small { font-size: 1.6rem; margin-left: 4px; opacity: .7; }
.alfa-namn { flex: 1; }
.alfa-not { margin: .5rem 0 .2rem; font-size: .9rem; color: var(--dampad); }
.alfa-exempel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.alfa-ex { border: 1px solid var(--kant); border-radius: 12px; padding: 10px; }
.alfa-etikett { font-size: .75rem; color: var(--dampad); text-transform: uppercase; letter-spacing: .02em; min-height: 2.2em; }
.alfa-ord { font-size: 1.6rem; font-weight: 600; margin: 4px 0; }
.alfa-ord b { color: var(--bla); text-decoration: underline; text-decoration-color: var(--gul); text-decoration-thickness: 3px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .alfa-ord b, :root:not([data-theme="light"]) .alfa-stor { color: #6cc0f5; } }
.alfa-knappar { display: flex; gap: 6px; }
.alfa-overs { display: flex; flex-direction: column; font-size: .9rem; margin-top: 6px; }
@media (max-width: 380px) { .alfa-exempel { grid-template-columns: 1fr; } }

/* ---------- Innehåll ---------- */
.vy { max-width: 760px; margin: 0 auto; padding: 12px 16px 24px; outline: none; }
.ruta {
  background: var(--kort); border: 1px solid var(--kant); border-radius: var(--radie);
  padding: 14px 16px; margin: 12px 0; box-shadow: var(--skugga);
}
.ruta.fel { background: var(--fel-bg); border-color: var(--rod); }
.ruta.varning { background: #fff7d6; border-color: var(--gul-mork); color: #4b3b00; font-size: .92rem; }
.rad-mellan { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.knapprad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.stor-emoji { font-size: 2.6rem; line-height: 1; }
.stapel { height: 14px; background: var(--kant); border-radius: 999px; overflow: hidden; flex: 1; }
.stapel > div { height: 100%; background: linear-gradient(90deg, var(--gron), #6bd66f); border-radius: 999px; transition: width .4s ease; }

/* Knappar i "3D"-stil */
.knapp {
  --f: var(--kort); --k: var(--kant); --t: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 16px; border-radius: 14px;
  border: 2px solid var(--k); border-bottom-width: 4px;
  background: var(--f); color: var(--t); font: 700 .98rem/1.2 var(--font); cursor: pointer;
  transition: transform .06s ease, filter .15s;
}
.knapp:hover:not(:disabled) { filter: brightness(1.04); }
.knapp:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.knapp:disabled { opacity: .45; cursor: not-allowed; }
.knapp.gron { --f: var(--gron); --k: var(--gron-mork); --t: #fff; }
.knapp.bla { --f: var(--bla); --k: var(--bla-mork); --t: #fff; }
.knapp.rod { --f: var(--rod); --k: var(--rod-mork); --t: #fff; }
.knapp.rod.pagar { animation: puls 1s infinite; }
.knapp.liten { min-height: 36px; padding: 5px 12px; font-size: .9rem; }
.knapp.bred { flex: 1; }
.knapp.bokstav { min-width: 44px; font-size: 1.1rem; }
@keyframes puls { 50% { box-shadow: 0 0 0 6px rgba(229, 72, 77, .25); } }
.hogtalare {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; border: 2px solid var(--kant); border-bottom-width: 4px;
  background: var(--kort); cursor: pointer; font-size: 1.2rem; line-height: 1;
}
.hogtalare.liten { width: 36px; height: 36px; font-size: 1rem; border-radius: 10px; }
.hogtalare:active { transform: translateY(2px); border-bottom-width: 2px; }
.stang {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent;
  font-size: 1.8rem; line-height: 1; color: var(--dampad); cursor: pointer; flex: 0 0 auto;
}
.stang:hover { background: var(--kant); }
.ikon-knapp { border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; padding: 6px; border-radius: 8px; }
.ikon-knapp:hover { background: var(--kant); }

/* ---------- Lektionsstigen ---------- */
.niva-rubrik {
  margin: 22px 0 6px; padding: 8px 14px; border-radius: 12px; color: #fff; background: var(--bla);
  font-size: 1rem; display: inline-block;
}
.stig { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.nod {
  display: flex; align-items: center; gap: 14px; text-align: left; width: min(100%, 420px);
  background: var(--kort); border: 2px solid var(--kant); border-bottom-width: 5px; border-radius: 20px;
  padding: 10px 14px; cursor: pointer; color: var(--text); font: inherit;
  transition: transform .08s ease;
}
.nod.hoger { margin-left: auto; }
@media (max-width: 480px) { .nod.hoger { margin-left: 0; } }
.nod:hover:not(:disabled) { transform: translateY(-1px); }
.nod:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 3px; }
.nod-cirkel {
  width: 58px; height: 58px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.7rem; background: var(--gul); box-shadow: inset 0 -5px 0 var(--gul-mork);
}
.nod.klar .nod-cirkel { background: var(--gron); box-shadow: inset 0 -5px 0 var(--gron-mork); }
.nod.last { cursor: not-allowed; opacity: .6; }
.nod.last .nod-cirkel { background: var(--kant); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .1); }
.nod-text { display: flex; flex-direction: column; min-width: 0; }
.nod-text small { color: var(--dampad); }
.stjarnor { color: var(--gul-mork) !important; letter-spacing: 2px; }

/* ---------- Ordlista ---------- */
.sokrad { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .sokrad { grid-template-columns: 2fr 1fr; } }
.falt {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px;
  border: 2px solid var(--kant); background: var(--kort); color: var(--text); font: inherit;
}
.falt:focus { outline: none; border-color: var(--bla); }
.falt.stort { font-size: 1.3rem; padding: 14px; margin-top: 8px; }
.ordlista { display: flex; flex-direction: column; gap: 6px; }
.ordrad {
  display: flex; align-items: center; gap: 10px; background: var(--kort); border: 1px solid var(--kant);
  border-radius: 12px; padding: 8px 10px; cursor: pointer;
}
.ordrad:hover { border-color: var(--bla); }
.ordrad-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ordrad-text .dampad { font-size: .88rem; overflow-wrap: anywhere; }
.ordklass { font-size: .72rem; color: var(--dampad); background: var(--bg); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

/* ---------- Formulär ---------- */
.etikett { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-weight: 600; font-size: .92rem; }
.formular details, .mer { margin: 10px 0; }
summary { cursor: pointer; font-weight: 600; color: var(--bla); }
.meddelande { margin-top: 8px; font-weight: 600; min-height: 1.2em; overflow-wrap: anywhere; }
.meddelande.ok { color: var(--gron-mork); }
.meddelande.fel { color: var(--rod); }
.kryss { display: flex; align-items: center; gap: 10px; margin: 10px 0; cursor: pointer; }
.kryss input { width: 22px; height: 22px; accent-color: var(--gron); }
.segment { display: flex; gap: 8px; flex-wrap: wrap; }
.segment button {
  flex: 1; min-height: 46px; border-radius: 12px; border: 2px solid var(--kant); background: var(--kort);
  color: var(--text); font: 700 1rem var(--font); cursor: pointer;
}
.segment button.vald { border-color: var(--bla); background: rgba(0, 106, 167, .1); }
input[type="range"] { width: 100%; accent-color: var(--bla); }

/* ---------- Bottennav ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: flex; justify-content: space-around;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--kort); border-top: 1px solid var(--kant);
}
.nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; color: var(--dampad); font-size: .75rem; font-weight: 700;
}
.nav a span { font-size: 1.35rem; }
.nav a.aktiv { color: var(--bla); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav a.aktiv { color: #6cc0f5; } }

/* ---------- Dialog / ordkort ---------- */
.dlg {
  border: 0; border-radius: 20px; padding: 0; width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 40px); background: var(--kort); color: var(--text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.dlg::backdrop { background: rgba(10, 20, 30, .55); }
.dlg-inne { padding: 16px 18px 20px; }
.kort-ord { font-size: 2.4rem; font-weight: 800; text-align: center; margin: 8px 0; overflow-wrap: anywhere; }
.overs-par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.overs-par > div { background: var(--bg); border-radius: 12px; padding: 10px; text-align: center; font-weight: 600; overflow-wrap: anywhere; }
.overs-par > div.framhavd { outline: 2px solid var(--bla); }
.exempel { background: var(--bg); border-left: 4px solid var(--gul); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.exempel b { font-weight: 600; }
.uttal { border: 1px dashed var(--kant); border-radius: 14px; padding: 8px 12px; }
.min-inspelning { width: 100%; margin: 6px 0; }
.uttal-status { font-weight: 600; min-height: 1.3em; margin: 6px 0; overflow-wrap: anywhere; }
.uttal-status.bra { color: var(--gron-mork); }
.uttal-status.mellan { color: var(--gul-mork); }
.uttal-status.daligt { color: var(--rod); }

/* ---------- Lektion (helskärm) ---------- */
.lektion {
  position: fixed; inset: 0; z-index: 30; background: var(--bg);
  display: flex; flex-direction: column;
}
.lektion-topp {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  max-width: 760px; width: 100%; margin: 0 auto;
}
.lektion-topp .chip { background: var(--fel-bg); color: var(--rod); }
.lektion-kropp {
  flex: 1; overflow-y: auto; padding: 8px 16px 20px; max-width: 760px; width: 100%; margin: 0 auto;
}
.lektion-fot {
  border-top: 1px solid var(--kant); background: var(--kort);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.fot-rad { display: flex; gap: 10px; align-items: center; max-width: 760px; margin: 0 auto; }
.ovning-rubrik { font-size: 1.3rem; margin: 10px 0 14px; }
.etikett-ny { display: inline-block; background: var(--gul); color: #3a2e00; font-weight: 800; border-radius: 999px; padding: 4px 12px; }
.fraga-ord {
  display: flex; align-items: center; gap: 12px; font-size: 1.8rem; font-weight: 800; margin: 10px 0 18px;
  overflow-wrap: anywhere;
}
.alternativ { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .alternativ { grid-template-columns: 1fr 1fr; } }
.alt {
  position: relative; display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 56px; padding: 10px 14px; border-radius: 14px;
  border: 2px solid var(--kant); border-bottom-width: 4px; background: var(--kort); color: var(--text);
  font: 600 1.08rem/1.3 var(--font); cursor: pointer; overflow-wrap: anywhere;
}
.alt:hover:not(:disabled) { border-color: #b7c7d8; }
.alt.vald { border-color: var(--bla); background: rgba(0, 106, 167, .08); }
.alt .nr {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--kant);
  display: grid; place-items: center; font-size: .8rem; color: var(--dampad);
}
.para { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.para-kol { display: flex; flex-direction: column; gap: 10px; }
.para-alt { justify-content: center; text-align: center; font-size: 1rem; min-height: 52px; }
.para-alt.parad { opacity: .35; border-color: var(--gron); background: var(--ratt-bg); cursor: default; }
.skak { animation: skak .4s; border-color: var(--rod) !important; }
@keyframes skak { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.lyssna-knappar { display: flex; justify-content: center; gap: 14px; margin: 10px 0 20px; }
.stor-hogtalare {
  width: 110px; height: 110px; border-radius: 26px; border: 0; background: var(--bla); color: #fff;
  font-size: 3rem; cursor: pointer; box-shadow: inset 0 -7px 0 var(--bla-mork);
}
.stor-hogtalare.liten-variant { width: 76px; height: 76px; font-size: 2rem; background: var(--gul); box-shadow: inset 0 -6px 0 var(--gul-mork); align-self: flex-end; }
.mening { font-size: 1.35rem; line-height: 1.8; margin: 6px 0 10px; text-align: center; }
.lucka { display: inline-block; min-width: 80px; border-bottom: 3px solid var(--bla); color: transparent; }

.feedback { max-width: 760px; margin: 0 auto; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.feedback.ratt { background: var(--ratt-bg); color: var(--gron-mork); }
.feedback.fel { background: var(--fel-bg); color: var(--rod); }
.feedback.neutral { background: var(--bg); }
.feedback-rubrik { font-size: 1.25rem; font-weight: 800; }
.feedback .knapprad { color: var(--text); margin: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .feedback.ratt { color: #7ee08a; }
  :root:not([data-theme="light"]) .feedback.fel { color: #ff8a8e; }
}

.resultat { text-align: center; padding-top: 20px; }
.resultat .stor-emoji { font-size: 4.5rem; }
.resultat-kort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.resultat-kort > div { background: var(--kort); border: 2px solid var(--kant); border-radius: 14px; padding: 12px 6px; display: flex; flex-direction: column; }
.resultat-kort b { font-size: 1.4rem; }
.resultat-kort small { color: var(--dampad); font-weight: 700; text-transform: uppercase; font-size: .7rem; }
.konfetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.konfetti i {
  position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px;
  background: var(--gul); animation: fall 2.2s ease-in forwards;
}
.konfetti i:nth-child(3n) { background: var(--bla); }
.konfetti i:nth-child(3n+1) { background: var(--gron); }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); opacity: .8; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .konfetti { display: none; }
}

#sjalvtest-resultat { white-space: pre-wrap; background: #111; color: #0f0; padding: 10px; font-size: 12px; }

/* Smala telefoner: ge plats åt statistiken i toppen. */
@media (max-width: 420px) {
  .topp-rad { padding-left: 12px; padding-right: 12px; }
  .stat { gap: 4px; }
  .chip { padding: 3px 7px; font-size: .84rem; }
}
@media (max-width: 400px) { .logga-text { display: none; } }

/* ================= Figurer (Bosse Bäver, Ella Älg, Lilla Lo) ================= */
.figur { flex: 0 0 auto; line-height: 0; }
.figur svg { width: 100%; height: auto; overflow: visible; }
.figur .mun-ledsen, .figur .bryn { display: none; }
.figur.hum-trost .mun-glad { display: none; }
.figur.hum-trost .mun-ledsen, .figur.hum-trost .bryn { display: inline; }
.figur.hum-trost .huvud { transform: rotate(-8deg); transform-origin: 60px 60px; transform-box: view-box; }
.figur.hum-glad svg, .figur.studs svg { animation: hopp .6s ease; }
.figur.hum-fira svg { animation: fira 1s ease-in-out infinite; }
.figur.hum-fira .arm-v, .figur.hum-fira .arm-h { animation: vifta .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 90%; }
.figur.hum-vinka .arm-h { animation: vinka 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 30% 90%; }
.figur.hum-vinka svg { animation: gunga 3s ease-in-out infinite; transform-origin: 50% 100%; }
.figur.hum-tank svg { animation: gunga 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.figur .ogon { animation: blinka 5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hopp { 0% { transform: translateY(0); } 35% { transform: translateY(-16px) scale(1.04); } 60% { transform: translateY(0) scale(.97, 1.03); } 100% { transform: none; } }
@keyframes fira { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-14px) rotate(-6deg); } 75% { transform: translateY(-14px) rotate(6deg); } }
@keyframes vifta { from { transform: rotate(-35deg); } to { transform: rotate(25deg); } }
@keyframes vinka { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-55deg); } 50% { transform: rotate(-25deg); } 75% { transform: rotate(-55deg); } }
@keyframes gunga { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes blinka { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

.maskot { display: flex; align-items: flex-end; gap: 10px; margin: 6px 0 4px; }
.maskot.klickbar { cursor: pointer; }
.maskot-mitten { flex-direction: column; align-items: center; }
.pratbubbla {
  position: relative; background: var(--kort); border: 2px solid var(--kant); border-radius: 18px;
  padding: 10px 14px; font-size: .95rem; box-shadow: var(--skugga); margin-bottom: 18px; flex: 1;
  animation: poppa .35s ease;
}
.pratbubbla::before {
  content: ""; position: absolute; left: -10px; bottom: 14px; width: 16px; height: 16px;
  background: var(--kort); border-left: 2px solid var(--kant); border-bottom: 2px solid var(--kant);
  transform: rotate(45deg);
}
.maskot-mitten .pratbubbla { margin: 8px 0 0; text-align: center; flex: none; max-width: 420px; }
.maskot-mitten .pratbubbla::before { left: calc(50% - 8px); top: -10px; bottom: auto; transform: rotate(135deg); }
@keyframes poppa { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* ================= Streak-eld ================= */
.flamma { display: inline-block; }
.chip.streak.eld .flamma, .flamma.eld, .flamma-stor.eld { animation: flamma 1.2s ease-in-out infinite; transform-origin: 50% 90%; }
.chip.streak.slocknar .flamma { filter: grayscale(.8); opacity: .7; }
@keyframes flamma { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.18) rotate(4deg); } }

/* ================= Nivåkartan ================= */
.karta-rubrik { margin-top: 18px; }
.region {
  position: relative; border-radius: 22px; margin: 16px 0; padding: 12px 12px 4px; overflow: hidden;
  border: 2px solid rgba(0, 0, 0, .06); color: #1c2733;
}
.region .dampad { color: #4a5968; }
.region-a1 { background: linear-gradient(180deg, #e9f8d8, #cdeeb0); }
.region-a2 { background: linear-gradient(180deg, #d6ecd0, #9fcf98); }
.region-b1 { background: linear-gradient(180deg, #d5eefb, #9fd3ef); }
.region-b2 { background: linear-gradient(180deg, #eef1f5, #c6d2df); }
.region-c1 { background: linear-gradient(180deg, #1f2b52, #3a2f6b 60%, #214f55); color: #f3f6ff; }
.region-c2 { background: linear-gradient(180deg, #fdf3d8, #e9d3a4); }
.region-c1 .dampad { color: #c9d4ff; }
.region-last { filter: saturate(.55); }
.region-huvud { display: flex; align-items: center; gap: 10px; position: relative; z-index: 2; }
.region-huvud h2 { margin: 0; }
.region-huvud > div { flex: 1; min-width: 0; }
.niva-bricka {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--bla); color: #fff; font-weight: 900; font-size: 1.1rem; box-shadow: inset 0 -4px 0 var(--bla-mork);
}
.region-klar { font-size: 1.8rem; }
.karta { position: relative; margin-top: 6px; }
.karta-stig { position: absolute; inset: 0; width: 100%; height: 100%; }
.stig-kant { fill: none; stroke: rgba(80, 55, 30, .25); stroke-linecap: round; }
.stig-yta { fill: none; stroke: #f4e3c1; stroke-linecap: round; }
.stig-streck { fill: none; stroke: #c9a76b; stroke-dasharray: 2 12; stroke-linecap: round; }
.region-c1 .stig-yta { stroke: #5a5f9a; }
.region-c1 .stig-streck { stroke: #b7f0ff; }
.stopp {
  position: absolute; transform: translate(-50%, -50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; width: 120px;
}
.stopp-cirkel {
  width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem;
  background: var(--gul); box-shadow: inset 0 -6px 0 var(--gul-mork), 0 4px 10px rgba(0, 0, 0, .18);
  border: 4px solid #fff; transition: transform .12s ease;
}
.stopp:hover:not(:disabled) .stopp-cirkel { transform: scale(1.07) translateY(-2px); }
.stopp:active:not(:disabled) .stopp-cirkel { transform: scale(.96); }
.stopp.klar .stopp-cirkel { background: var(--gron); color: #fff; box-shadow: inset 0 -6px 0 var(--gron-mork), 0 4px 10px rgba(0, 0, 0, .18); font-weight: 900; }
.stopp.last { cursor: not-allowed; }
.stopp.last .stopp-cirkel { background: #cfd6de; box-shadow: inset 0 -6px 0 #aab4bf; font-size: 1.4rem; }
.stopp.nu .stopp-cirkel { animation: pulsring 1.6s infinite; }
.stopp.boss .stopp-cirkel { width: 84px; height: 84px; font-size: 2.3rem; background: #8e5bd8; box-shadow: inset 0 -7px 0 #6a3fb0, 0 4px 12px rgba(0, 0, 0, .25); }
.stopp.boss.last .stopp-cirkel { background: #bfb3d6; box-shadow: inset 0 -7px 0 #9d8fbb; }
.stopp.boss.klar .stopp-cirkel { background: linear-gradient(135deg, #ffd84d, #f0a500); }
@keyframes pulsring { 0% { box-shadow: 0 0 0 0 rgba(254, 204, 2, .7), inset 0 -6px 0 var(--gul-mork); } 70% { box-shadow: 0 0 0 16px rgba(254, 204, 2, 0), inset 0 -6px 0 var(--gul-mork); } 100% { box-shadow: 0 0 0 0 rgba(254, 204, 2, 0), inset 0 -6px 0 var(--gul-mork); } }
.stopp-namn {
  background: rgba(255, 255, 255, .92); color: #1c2733; border-radius: 10px; padding: 2px 8px;
  font-size: .78rem; font-weight: 700; line-height: 1.25; text-align: center; max-width: 120px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12); display: flex; flex-direction: column;
}
.stopp.last .stopp-namn { opacity: .75; }
.stopp-namn .stjarnor { font-size: .72rem; }
.deko { position: absolute; font-size: 1.6rem; z-index: 1; pointer-events: none; opacity: .9; }
.du-ar-har {
  position: absolute; z-index: 4; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; pointer-events: none;
  animation: gunga 2.5s ease-in-out infinite;
}
.du-ar-har span { background: var(--bla); color: #fff; font-size: .7rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.niva-rubrik.egna { background: var(--gul); color: #3a2e00; }

/* ================= Profil ================= */
.statrutor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 480px) { .statrutor { grid-template-columns: repeat(2, 1fr); } }
.statruta { background: var(--kort); border: 2px solid var(--kant); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; align-items: center; }
.statruta > span { font-size: 1.6rem; }
.statruta b { font-size: 1.4rem; }
.statruta small { color: var(--dampad); font-size: .75rem; text-align: center; }
.flamma-stor { display: inline-block; }
.veckostaplar { display: flex; gap: 8px; align-items: flex-end; height: 170px; padding-top: 6px; }
.vstapel { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.vstapel small { color: var(--dampad); font-size: .72rem; }
.vstapel-ram { flex: 1; width: 100%; max-width: 38px; background: var(--bg); border-radius: 10px; display: flex; align-items: flex-end; overflow: hidden; }
.vstapel-fyll { width: 100%; background: var(--bla); border-radius: 10px; transition: height .9s cubic-bezier(.2, .8, .2, 1); min-height: 2px; }
.vstapel-fyll.mal { background: var(--gron); }
.marken { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.marke { border: 2px solid var(--kant); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; opacity: .55; }
.marke.har { opacity: 1; border-color: var(--gul-mork); background: linear-gradient(180deg, rgba(254, 204, 2, .14), transparent); }
.marke-ikon { font-size: 2rem; }
.marke small { color: var(--dampad); font-size: .75rem; }
.figurer-rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.figurkort { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: .85rem; }
.nya-marken { margin-top: 10px; display: grid; gap: 8px; }
.tva-kol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ================= Lektion: feedback, resultat ================= */
.feedback-topp { display: flex; align-items: center; gap: 10px; }
.feedback-replik { font-size: .9rem; font-weight: 600; opacity: .9; }
.boss-chip { background: #8e5bd8 !important; color: #fff !important; }
.xp-stapel > div { transition: width 1.2s cubic-bezier(.2, .8, .2, 1); background: linear-gradient(90deg, var(--gul), #ffb800); }
.pop { animation: poppa .45s ease both; }
.resultat-kort .pop:nth-child(2) { animation-delay: .12s; }
.resultat-kort .pop:nth-child(3) { animation-delay: .24s; }
.stor-emoji.studs { animation: hopp .8s ease infinite; }
.toast {
  position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 60;
  background: #1c2733; color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 800;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3); animation: poppa .3s ease; transition: opacity .5s, transform .5s;
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.ut { opacity: 0; transform: translate(-50%, -10px); }
.nav a { font-size: .7rem; }
@media (prefers-reduced-motion: reduce) {
  .figur svg, .figur *, .stopp-cirkel, .du-ar-har, .flamma, .pratbubbla, .pop, .toast { animation: none !important; transition: none !important; }
}

/* ================= Språkknappen SV | EN | PL (i18n.js) – alltid synlig ================= */
.topp-hoger { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sprakval {
  display: inline-flex; flex-shrink: 0; gap: 2px; padding: 2px;
  background: rgba(255, 255, 255, .16); border-radius: 999px;
}
.sprakval button {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; min-width: 36px; justify-content: center;
  border: 0; border-radius: 999px; padding: 3px 8px; cursor: pointer;
  background: transparent; color: #fff; font: inherit; font-size: .8rem; font-weight: 800; letter-spacing: .02em;
}
.sprakval button:hover { background: rgba(255, 255, 255, .22); }
.sprakval button.vald, .sprakval button[aria-pressed="true"] { background: #fff; color: var(--bla-mork); }
.sprakval button:focus-visible { outline: 3px solid var(--gul); outline-offset: 1px; }
.sprak-flagga {
  display: inline-block; width: 18px; height: 12px; border-radius: 2px; flex-shrink: 0;
  background: center / cover no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.flagga-sv { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Crect width='16' height='10' fill='%23006aa7'/%3E%3Crect x='5' width='2' height='10' fill='%23fecc02'/%3E%3Crect y='4' width='16' height='2' fill='%23fecc02'/%3E%3C/svg%3E"); }
.flagga-en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0 0L60 30M60 0L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0L60 30M60 0L0 30' stroke='%23c8102e' stroke-width='2'/%3E%3Cpath d='M30 0V30M0 15H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0V30M0 15H60' stroke='%23c8102e' stroke-width='6'/%3E%3C/svg%3E"); }
.flagga-pl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Crect width='16' height='5' fill='%23fff'/%3E%3Crect y='5' width='16' height='5' fill='%23dc143c'/%3E%3C/svg%3E"); }
.sprak-namn { display: none; }
.sprakval.stor .sprak-namn { display: inline; }
.sprakval.stor .sprak-kod { display: none; }
/* I lektionen och i inställningarna ligger knappen på ljus bakgrund. */
.sprakval.i-lektion, .sprakval.stor { background: var(--kant); }
.sprakval.i-lektion button, .sprakval.stor button { color: var(--text); }
.sprakval.i-lektion button:hover, .sprakval.stor button:hover { background: rgba(0, 106, 167, .12); }
.sprakval.i-lektion button.vald, .sprakval.stor button.vald,
.sprakval.i-lektion button[aria-pressed="true"], .sprakval.stor button[aria-pressed="true"] { background: var(--bla); color: #fff; }
.sprakval.i-lektion button:focus-visible, .sprakval.stor button:focus-visible { outline-color: var(--bla); }
.sprakval.stor { margin-bottom: 8px; }
.sprakval.stor button { padding: 8px 16px; font-size: 1rem; min-height: 44px; }
/* Smala skärmar: bara språkkoden, så att allt får plats på en rad. */
@media (max-width: 480px) {
  .sprakval button { padding: 3px 6px; min-width: 34px; gap: 3px; }
  .sprak-flagga { width: 15px; height: 10px; }
  .topp-hoger { gap: 6px; }
}
@media (max-width: 400px) { .sprakval.i-topp .sprak-flagga, .sprakval.i-lektion .sprak-flagga { display: none; } }
@media (prefers-reduced-motion: reduce) { .sprakval button { transition: none; } }

/* Menytexterna (översatta) får inte ärva ikonstorleken och ska rymmas på en rad. */
.nav a { min-width: 0; }
.nav a span[data-i18n] { font-size: inherit; max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= Flashcards (js/kort.js) ================= */
.knapp.gul { --f: var(--gul); --k: var(--gul-mork); --t: #3a2e00; }
.lekar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.lek {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 14px 14px 12px; border-radius: var(--radie); border: 2px solid var(--kant); border-bottom-width: 5px;
  background: var(--kort); color: var(--text); text-decoration: none; box-shadow: var(--skugga);
  transition: transform .08s ease, border-color .15s;
}
a.lek:hover { border-color: var(--bla); }
a.lek:active { transform: translateY(2px); border-bottom-width: 3px; }
a.lek:focus-visible { outline: 3px solid var(--gul); outline-offset: 2px; }
.lek.snart, .lek.laddar { opacity: .7; border-style: dashed; box-shadow: none; }
.lek-ikon { font-size: 1.9rem; line-height: 1; }
.lek-namn { font-weight: 800; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; padding-right: 26px; }
.lek-antal { font-size: .9rem; color: var(--dampad); }
.lek-kan { font-size: .92rem; font-weight: 700; }
.lek .stapel { flex: none; height: 8px; margin: 2px 0; }
.lek .stapel > span { display: block; height: 100%; background: linear-gradient(90deg, var(--gron), #6bd66f); border-radius: 999px; }
.lek-snart { align-self: flex-start; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: var(--kant); font-size: .8rem; font-weight: 800; }
.lek-noll {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--kant); background: var(--bg); color: var(--dampad); font-size: 1rem; cursor: pointer;
}
.lek-noll:hover { color: var(--rod); border-color: var(--rod); }

.kort-topp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.kort-titel { font-size: 1.2rem; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kort-rad { margin: 8px 0 10px; font-size: .92rem; }
.flip-scen { perspective: 1200px; margin: 6px 0 14px; touch-action: pan-y; }
.flipkort {
  position: relative; cursor: pointer; border-radius: 22px; outline: none; user-select: none; -webkit-user-select: none;
  transition: transform .2s ease;
}
.flipkort:focus-visible { box-shadow: 0 0 0 3px var(--gul); }
.flip-inre {
  display: grid; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, .7, .3, 1);
}
.flipkort.vand .flip-inre { transform: rotateY(180deg); }
.sida {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 300px; padding: 22px 18px; border-radius: 22px; text-align: center; min-width: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 2px solid var(--kant); border-bottom-width: 6px; box-shadow: var(--skugga);
}
.sida.fram { background: var(--kort); }
.sida.bak {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, var(--bla) 0%, var(--bla-mork) 100%); color: #fff; border-color: var(--bla-mork);
}
.kort-lada {
  position: absolute; top: 12px; left: 14px; font-size: .78rem; font-weight: 800; color: var(--dampad);
  display: inline-flex; align-items: center; gap: 4px;
}
.sida.bak .kort-lada { color: rgba(255, 255, 255, .85); }
.kort-rad-sprak { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; }
.sprak-etikett {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; background: var(--kant); color: var(--text);
}
.kort-ord { font-size: 1.6rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; max-width: 100%; }
.kort-rad-sprak + .kort-rad-sprak { padding-top: 10px; border-top: 1px dashed var(--kant); width: 80%; }
.kort-tips { font-size: .8rem; margin-top: 4px; }
.kort-sv-rad { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; max-width: 100%; }
.kort-sv { font-size: 2rem; font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; min-width: 0; }
.sida.bak .hogtalare { background: #fff; border-color: rgba(0, 0, 0, .15); }
.kort-exempel {
  display: flex; align-items: center; gap: 10px; max-width: 100%; text-align: left;
  background: rgba(255, 255, 255, .14); border-radius: 12px; padding: 8px 10px; font-size: 1rem; font-style: italic;
}
.kort-exempel span { overflow-wrap: anywhere; min-width: 0; }
.sida.bak .kort-sma { color: rgba(255, 255, 255, .8); font-size: .85rem; overflow-wrap: anywhere; }
.kort-kategori { font-size: .72rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--gul); color: #3a2e00; }
.flipkort.svep-h .sida.bak { box-shadow: 0 0 0 4px var(--gron); }
.flipkort.svep-v .sida.bak { box-shadow: 0 0 0 4px var(--rod); }
.kort-fot { min-height: 52px; }
.betyg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.betyg .knapp { padding: 8px 6px; min-width: 0; }
.betyg.dold, .vand-knapp.dold { display: none; }
.vand-knapp { width: 100%; }
.kort-verktyg { justify-content: space-between; }
.kort-klart .knapprad { justify-content: center; }
@media (min-width: 560px) { .sida { min-height: 340px; } .kort-ord { font-size: 1.9rem; } .kort-sv { font-size: 2.4rem; } }
@media (max-width: 380px) { .kort-ord { font-size: 1.35rem; } .kort-sv { font-size: 1.65rem; } .sida { padding: 20px 12px; } }
@media (prefers-reduced-motion: reduce) {
  .flip-inre, .flipkort, .lek { transition: none !important; }
}

/* Språkknappen i ⚙️ Mer fick sidan att scrolla i sidled på 360 px. */
.sprakval.stor { max-width: 100%; flex-wrap: wrap; }
@media (max-width: 400px) { .sprakval.stor button { padding: 8px 10px; } }
a.knapp { text-decoration: none; }
html body a.lek { color: var(--text); }
.kort-ord-rad { display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; }
.kort-ord-rad .kort-ord { min-width: 0; }
.kort-hint { margin: -6px 0 10px; text-align: center; }
.kort-spela { touch-action: manipulation; }

/* ================= Ordboksläget (js/lexikon.js) ================= */
.ord-lank {
  display: inline; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline dotted rgba(255, 255, 255, .55); text-underline-offset: 4px; text-decoration-thickness: 2px;
  border-radius: 4px; touch-action: manipulation;
}
.ord-lank:hover { background: rgba(255, 255, 255, .16); }
.ord-lank:focus-visible { outline: 2px solid var(--gul); outline-offset: 1px; }
.lexikon { overflow: auto; }
.lexikon .dlg-inne { padding: 12px 18px 22px; }
.lex-rubrik { margin: 0; font-size: 1rem; color: var(--dampad); }
.lex-huvud { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 4px 0; }
.lex-ord { font-size: 2rem; font-weight: 900; overflow-wrap: anywhere; min-width: 0; text-align: center; }
.lex-fakta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
.lex-etikett { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--gul); color: #3a2e00; font-size: .78rem; font-weight: 800; }
.lexikon h3 { font-size: .95rem; margin: 16px 0 6px; }
.lex-overs { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; margin: 6px 0; background: var(--bg); border-radius: 12px; }
.lex-overs .sprak-etikett { flex: none; margin-top: 6px; }
.lex-overs-lista { display: flex; flex-wrap: wrap; gap: 6px 14px; min-width: 0; }
.lex-overs-ord { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.lex-def { background: var(--bg); border-radius: 12px; padding: 8px 12px; }
.lex-def ol { margin: 6px 0 8px; padding-left: 22px; }
.lex-def li { margin: 3px 0; overflow-wrap: anywhere; }
.lex-exempel, .lex-fraser { list-style: none; padding: 0; margin: 0; }
.lex-exempel li, .lex-fraser li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; margin: 6px 0;
  background: var(--bg); border-left: 4px solid var(--gul); border-radius: 10px; overflow-wrap: anywhere;
}
.lex-exempel li > span[lang] { flex: 1 1 200px; min-width: 0; }
.lex-kalla { font-size: .72rem; font-weight: 800; color: var(--dampad); }
.lex-lankar { display: flex; flex-wrap: wrap; gap: 8px; }
.lex-lankar a { padding: 6px 12px; border: 1px solid var(--kant); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .9rem; }
.lex-hint { text-align: center; margin: 6px 0 0; }
/* Mobil: bottom sheet */
@media (max-width: 560px) {
  .dlg.lexikon {
    width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 85vh; border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .dlg.lexikon[open] { animation: lexUpp .25s ease-out; }
}
@keyframes lexUpp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dlg.lexikon[open] { animation: none; } }

/* ================= Samtalsläget: Prata med Bosse (js/samtal.js) ================= */
:root { --lila: #6d3df5; --lila-mork: #5226d0; }
.figur .mun-prat { display: none; }
.figur.pratar .mun-glad, .figur.pratar .mun-ledsen { display: none; }
.figur.pratar .mun-prat { display: inline; animation: prata .18s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes prata { from { transform: scaleY(.25); } to { transform: scaleY(1.15); } }

.samtal-ingang { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); border-width: 2px; border-color: var(--lila); }
.samtal-ingang:hover { filter: brightness(1.03); }
.samtal-ingang-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.samtal-ingang .knapp { flex: none; }
@media (max-width: 420px) { .samtal-ingang { flex-wrap: wrap; } .samtal-ingang .knapp { width: 100%; } }

.hjalprad { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.hjalpval .sprak-kod { display: inline; }
.samtal-niva-rubrik { margin-top: 18px; }
.samtal-sv-titel { font-size: .85rem; color: var(--dampad); font-style: italic; overflow-wrap: anywhere; }
.samtal-stjarnor { color: #f5a300; font-size: 1.05rem; letter-spacing: 2px; }
.samtal-stjarnor.tomma { color: var(--kant); }
.samtal-stjarnor.stora { font-size: 2.2rem; text-align: center; }

.samtal {
  display: flex; flex-direction: column; gap: 6px;
  height: calc(100vh - var(--samtal-ovan, 160px) - var(--nav-h) - env(safe-area-inset-bottom) - 36px);
  height: calc(100dvh - var(--samtal-ovan, 160px) - var(--nav-h) - env(safe-area-inset-bottom) - 36px);
  min-height: 420px;
}
.samtal-topp { display: flex; align-items: center; gap: 8px; flex: none; }
.samtal-topp .hjalprad { margin: 0; flex: none; }
.samtal-topp .hjalprad > .dampad { display: none; }
.samtal-titel { font-size: 1.05rem; line-height: 1.2; margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.samtal-niva { flex: none; font-weight: 800; font-size: .8rem; padding: 3px 10px; border-radius: 999px; background: var(--gul); color: #3a2e00; }
.samtal-scen {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0 10px;
  border-radius: 22px; background: radial-gradient(circle at 50% 35%, rgba(109, 61, 245, .16), rgba(0, 106, 167, .08) 60%, transparent 75%);
}
.samtal-scen { flex: none; padding: 8px 0 6px; }
.samtal-scen .figur { width: clamp(84px, 15vh, 150px) !important; }
.samtal-prickar { display: flex; gap: 6px; }
.samtal-prickar span { width: 10px; height: 10px; border-radius: 50%; background: var(--kant); transition: background .2s; }
.samtal-prickar span.klar { background: var(--gron); }
.samtal-prickar span.nu { background: var(--lila); box-shadow: 0 0 0 3px rgba(109, 61, 245, .25); }

.samtal-logg { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; flex: 1 1 auto; min-height: 90px; overflow-y: auto; overscroll-behavior: contain; }
.samtal-logg > :first-child { margin-top: auto; }
.samtal-rad { display: flex; }
.samtal-rad.du { justify-content: flex-end; }
.samtal-rad.ny .samtal-bubbla { animation: poppa .3s ease; }
.samtal-bubbla { max-width: 88%; padding: 10px 14px; border-radius: 18px; box-shadow: var(--skugga); overflow-wrap: anywhere; }
.samtal-bubbla.bosse { background: var(--kort); border: 2px solid var(--kant); border-bottom-left-radius: 6px; }
.samtal-bubbla.bosse.rattning { border-color: #f0a24a; }
.samtal-bubbla.bosse.beröm { border-color: var(--gron); }
.samtal-bubbla.du { background: var(--lila); color: #fff; font-weight: 700; border-bottom-right-radius: 6px; display: flex; align-items: center; gap: 8px; }
.samtal-markering { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 900; background: #fff; }
.samtal-bubbla.du.ratt .samtal-markering { color: var(--gron-mork); }
.samtal-bubbla.du.fel .samtal-markering { color: #fff; background: var(--rod); }
.samtal-sv-rad { display: flex; align-items: flex-start; gap: 8px; }
.samtal-sv { flex: 1; min-width: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.samtal-ljud { display: flex; gap: 4px; flex: none; }
.samtal-over { margin-top: 4px; font-size: .9rem; color: var(--dampad); }
.samtal-tips { margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: #fff4d6; color: #4b3b00; font-size: .88rem; }

.samtal-kontroller {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 0 -16px -12px; padding: 10px 16px 4px; background: var(--bg); border-top: 1px solid var(--kant);
}
@media (max-height: 700px) { .samtal-mik { width: 62px !important; height: 62px !important; } .samtal-mik-ikon { font-size: 1.6rem !important; } }
.samtal-kontroller > .knapprad, .samtal-kontroller > .ruta, .samtal-kontroller > form, .samtal-kontroller > .alternativ, .samtal-kontroller > .knapp { width: 100%; max-width: 560px; margin: 0; }
.samtal-verktyg { justify-content: center; }
.samtal-mik {
  width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--gron); box-shadow: inset 0 -6px 0 var(--gron-mork), 0 4px 14px rgba(59, 181, 74, .35);
  display: inline-flex; align-items: center; justify-content: center; transition: transform .08s ease;
}
.samtal-mik-ikon { font-size: 2rem; line-height: 1; filter: grayscale(1) brightness(3); }
.samtal-mik:active:not(:disabled) { transform: translateY(2px) scale(.97); }
.samtal-mik:disabled { opacity: .45; cursor: not-allowed; }
.samtal-mik.lyssnar { background: var(--rod); box-shadow: inset 0 -6px 0 var(--rod-mork); animation: mikpuls 1.1s ease-out infinite; }
@keyframes mikpuls { 0% { box-shadow: inset 0 -6px 0 var(--rod-mork), 0 0 0 0 rgba(229, 72, 77, .55); } 100% { box-shadow: inset 0 -6px 0 var(--rod-mork), 0 0 0 22px rgba(229, 72, 77, 0); } }
.samtal-status { font-weight: 800; font-size: .92rem; color: var(--dampad); text-align: center; }
.samtal-skriv { display: flex; flex-direction: column; gap: 6px; }
.samtal-skriv .falt { width: 100%; }
.samtal-val { display: grid; gap: 8px; }
.samtal-hjalp { text-align: left; }
.samtal-klar { text-align: center; }
.samtal-klar .knapprad { justify-content: center; }
.centrerad.liten { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .figur.pratar .mun-prat { animation: none !important; transform: scaleY(.7); }
  .samtal-mik.lyssnar, .samtal-rad.ny .samtal-bubbla { animation: none !important; }
}
.samtal-kort, .samtal-kort .lek-namn { color: var(--text) !important; }