/* ==========================================================================
   Pluggporten – gamemodes-design
   Stilar för pluggdelen: områdesöversikt, quiz/läsförståelse, para ihop,
   kunskapsjakt, memory, samt gemensam resultat-/firande-skärm, konfetti
   och små effekter. Bygger på färgvariablerna i styles.css.
   ========================================================================== */

/* --- Stjärnor på gamemode-korten (områdesöversikt) ------------------------- */

.gm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gm-card[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.card-stars {
  margin-top: 10px;
  font-size: 1.3rem;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.55);
}

.card-stars.won {
  color: #fff3b0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.card-lock {
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
}

/* --- Övningsram (game-head) ------------------------------------------------ */

.game-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.game-title {
  font-size: 1.6rem;
  font-weight: 800;
}

.game-emoji {
  font-size: 1.8rem;
}

.game-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mute-btn {
  border: none;
  background: #eef4ff;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 3px 0 #cdddf5;
}

.mute-btn:active {
  transform: translateY(3px);
  box-shadow: none;
}

/* --- Quiz / Läsförståelse -------------------------------------------------- */

.quiz-wrap {
  background: var(--panel);
  border-radius: var(--radie);
  box-shadow: var(--skugga-mjuk);
  padding: 24px;
}

.review-btn {
  margin-bottom: 14px;
}

.quiz-progress {
  height: 12px;
  background: #eaf0fb;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

.quiz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #6fcf97, var(--gron));
  border-radius: 999px;
  transition: width 0.3s ease;
}

.quiz-count {
  color: var(--text-svag);
  font-weight: 700;
  margin: 0 0 10px;
}

.quiz-question {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 18px;
}

.quiz-options {
  display: grid;
  gap: 12px;
}

.quiz-opt {
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: left;
  padding: 16px 18px;
  border: 3px solid #d7e3f7;
  border-radius: 14px;
  background: #fbfdff;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.06s ease, border-color 0.1s ease, background 0.1s ease;
}

.quiz-opt:hover:not(:disabled) {
  border-color: var(--bla);
  transform: translateY(-2px);
}

.quiz-opt:disabled {
  cursor: default;
}

.quiz-opt.correct {
  border-color: var(--gron);
  background: #e5f8ec;
}

.quiz-opt.chosen-correct {
  border-color: var(--gron);
  background: #d4f5e1;
}

.quiz-opt.chosen-wrong {
  border-color: var(--rod);
  background: #ffe6e6;
}

.quiz-feedback {
  margin-top: 16px;
}

.quiz-feedback .msg.soft {
  background: #fff6e0;
  color: #8a6100;
  border: 2px solid #ffe4a3;
}

.quiz-next {
  margin-top: 14px;
}

/* --- Läsförståelse: texten står kvar överst, frågorna direkt under --------- */

/* Läsförståelse-sidan: text överst, quiz direkt under, allt på samma
   scrollbara sida. */
.lasf-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lasf-intro {
  margin: 0 0 4px;
}

/* Frågans egna korta text (passage): ett lugnt, tydligt block ovanför frågan.
   Byts automatiskt när eleven går vidare eftersom det ritas om per fråga. */
.lasf-passage {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #f4f8ff;
  border-left: 5px solid var(--bla);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.lasf-passage-emoji {
  font-size: 1.4rem;
  line-height: 1.4;
}

.lasf-passage p {
  margin: 0;
  max-width: 60ch;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text);
}

/* Textblocket får en tydlig ram så eleven ser att det hör ihop och står kvar. */
.lasf-text {
  background: var(--panel);
  border: 3px solid #d7e3f7;
  border-radius: var(--radie);
  box-shadow: var(--skugga-mjuk);
  padding: 18px 20px;
}

/* Inne i textblocket räcker en enkel avdelare mellan texterna. */
.lasf-text .read-text {
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.lasf-text .read-text + .read-text {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px solid #e3ecfa;
}

.read-text {
  background: var(--panel);
  border-radius: var(--radie);
  box-shadow: var(--skugga-mjuk);
  padding: 20px 24px;
  margin-bottom: 16px;
}

.read-text h3 {
  margin: 0 0 8px;
  color: var(--bla-mork);
}

/* Bekväm radlängd för läsning i åk 4. */
.read-text p {
  margin: 0;
  max-width: 62ch;
  font-size: 1.15rem;
  line-height: 1.7;
}

/* --- Läsförståelse 2.0 (issue #153): nivåval + arbetsbok-layout ------------- */

/* Nivåväljaren återanvänder big-card men lägger korten på rad. */
.lasf-level-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}

@media (max-width: 560px) {
  .lasf-level-grid {
    grid-template-columns: 1fr;
  }
}

/* Sessionen: text överst (står kvar), frågorna som en arbetsbok under. */
.lasf-worksheet {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Flera stycken i läs-texten får luft mellan sig. */
.lasf-reader p {
  margin: 0 0 14px;
  max-width: 62ch;
  font-size: 1.15rem;
  line-height: 1.7;
}

.lasf-reader p:last-child {
  margin-bottom: 0;
}

/* En kort ruta som ber eleven läsa om och försöka igen (chans-skydd). */
.lasf-retry {
  font-weight: 700;
}

.lasf-questions {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Varje fråga i ett eget lugnt kort. */
.lasf-q {
  background: var(--panel);
  border: 3px solid #d7e3f7;
  border-radius: var(--radie);
  box-shadow: var(--skugga-mjuk);
  padding: 18px 20px;
}

.lasf-q .quiz-question {
  font-size: 1.2rem;
  margin-bottom: 14px;
}

/* Valt alternativ (innan man lämnar in – ingen rätt/fel-avslöjning ännu). */
.lasf-q .quiz-opt.selected {
  border-color: var(--lila);
  background: #f3e8ff;
  transform: translateY(-2px);
}

.lasf-submit-row {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.lasf-submit-row .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 50, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.overlay-card {
  background: var(--ljus);
  border-radius: var(--radie);
  max-width: 640px;
  width: 100%;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--skugga-mjuk);
}

.overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 2px solid #e3ecfa;
}

.overlay-head h2 {
  margin: 0;
}

.overlay-body {
  overflow-y: auto;
  padding: 18px 20px;
}

/* --- Para ihop ------------------------------------------------------------- */

.para-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}

.para-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.para-card {
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  padding: 16px 14px;
  border: 3px solid #d7e3f7;
  border-radius: 16px;
  background: #fbfdff;
  color: var(--text);
  cursor: pointer;
  min-height: 64px;
  transition: transform 0.06s ease, border-color 0.1s ease, background 0.1s ease;
}

.para-card:hover:not(.matched) {
  transform: translateY(-2px);
  border-color: var(--bla);
}

.para-card.selected {
  border-color: var(--lila);
  background: #f3e8ff;
  transform: translateY(-2px);
}

.para-card.matched {
  border-color: var(--gron);
  background: #d4f5e1;
  color: var(--gron-mork);
  cursor: default;
  animation: pop 0.3s ease;
}

.para-card.wrong-flash {
  border-color: var(--rod);
  background: #ffe6e6;
}

/* --- Bild-brickor i par-korten (Para ihop & Memory) ------------------------ */

/* Behåller kort-looken – bilden sitter centrerad i kortet, lagom stor och
   responsiv. Samma bricka fungerar i både para-grid och memory-grid. */
.pair-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.pair-img-svg {
  width: 72px;
  height: 72px;
  max-width: 100%;
  display: block;
}

/* I memory-korten får brickan ta lite mer plats. */
.mem-front .pair-img-svg {
  width: 84px;
  height: 84px;
}

/* --- Kunskapsjakt ---------------------------------------------------------- */

.jakt-intro {
  animation: pop 0.3s ease;
}

.jakt-arena {
  background: var(--panel);
  border-radius: var(--radie);
  box-shadow: var(--skugga-mjuk);
  padding: 20px;
}

.jakt-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.jakt-stat {
  text-align: center;
  background: #eef4ff;
  border-radius: 14px;
  padding: 10px 6px;
}

.jakt-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-svag);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.jakt-value {
  font-size: 1.8rem;
  font-weight: 800;
}

.combo-box {
  transition: background 0.2s ease, color 0.2s ease;
}

.combo-box.hot {
  color: #fff;
}

.combo-box.lvl2.hot { background: #f2c94c; color: #7a5c00; }
.combo-box.lvl3.hot { background: var(--orange); color: #fff; }
.combo-box.lvl4.hot { background: var(--rosa); color: #fff; }
.combo-box.lvl5.hot { background: linear-gradient(135deg, var(--rosa), var(--lila)); color: #fff; }

.combo-box.bump .jakt-value {
  animation: bump 0.3s ease;
}

.jakt-timebar {
  height: 14px;
  background: #eaf0fb;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px;
}

.jakt-timebar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #6fcf97, var(--gron));
  transition: width 0.1s linear;
}

.jakt-timebar-fill.low {
  background: linear-gradient(90deg, #f2994a, var(--rod));
}

.jakt-question {
  font-size: 1.35rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 16px;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jakt-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.jakt-opt {
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 18px 14px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(160deg, #56ccf2, var(--bla));
  color: #fff;
  cursor: pointer;
  box-shadow: var(--skugga);
  transition: transform 0.06s ease;
}

.jakt-opt:nth-child(2) { background: linear-gradient(160deg, #bb6bd9, var(--lila)); }
.jakt-opt:nth-child(3) { background: linear-gradient(160deg, #f2c94c, var(--orange)); }
.jakt-opt:nth-child(4) { background: linear-gradient(160deg, #6fcf97, var(--gron)); }

.jakt-opt:hover:not(:disabled) { transform: translateY(-2px); }
.jakt-opt.hit { animation: pop 0.3s ease; outline: 4px solid #fff; }
.jakt-opt.miss { opacity: 0.5; }
.jakt-opt.show-correct { outline: 4px solid #fff; filter: brightness(1.1); }

.jakt-float {
  position: relative;
  height: 0;
  text-align: center;
}

.float-item {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.6rem;
  font-weight: 800;
  animation: floatUp 0.8s ease forwards;
  pointer-events: none;
}

.float-item.good { color: var(--gron); }
.float-item.bad { color: var(--rod); }

/* --- Memory ---------------------------------------------------------------- */

.memory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.memory-card {
  position: relative;
  min-height: 104px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-family: var(--font);
  padding: 0;
  background: transparent;
}

.mem-face {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 12px 12px;
  font-weight: 700;
  text-align: center;
  backface-visibility: hidden;
  /* Låt längre förklaringar radbrytas och rymmas i rutan. */
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.25;
}

/* Baksidan (?) läggs som en overlay ovanpå framsidan. */
.mem-back {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #bb6bd9, var(--lila));
  color: #fff;
  font-size: 2rem;
  box-shadow: var(--skugga);
  transition: opacity 0.2s ease;
}

/* Framsidan (texten) ligger i normalt flöde och BESTÄMMER kortets höjd, så
   rutan alltid växer så att hela texten får plats. */
.mem-front {
  position: relative;
  min-height: 104px;
  height: 100%;
  background: #fbfdff;
  color: var(--text);
  border: 3px solid #d7e3f7;
  font-size: 0.95rem;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.memory-card.open .mem-back { opacity: 0; }
.memory-card.open .mem-front { opacity: 1; transform: scale(1); }

.memory-card.matched {
  animation: pop 0.3s ease;
}

.memory-card.matched .mem-front {
  opacity: 1;
  transform: scale(1);
  border-color: var(--gron);
  background: #d4f5e1;
  color: var(--gron-mork);
}

.memory-card.matched .mem-back { opacity: 0; }

/* --- Resultat / firande ---------------------------------------------------- */

.result-card {
  animation: pop 0.4s ease;
}

.result-emoji {
  font-size: 4.5rem;
  line-height: 1;
}

.result-stars {
  font-size: 3rem;
  color: #f2c94c;
  letter-spacing: 6px;
  margin: 6px 0;
  animation: bump 0.5s ease;
}

.result-score {
  font-size: 1.15rem;
  font-weight: 700;
}

.coin-pop {
  display: inline-block;
  background: var(--gul);
  color: #7a5c00;
  font-weight: 800;
  font-size: 1.4rem;
  padding: 10px 24px;
  border-radius: 999px;
  margin: 8px 0;
  box-shadow: var(--skugga);
  animation: bump 0.5s ease;
}

/* XP-vinst på resultatskärmen (bredvid coin-pop). */
.xp-pop {
  display: inline-block;
  background: #eef4ff;
  color: #3a5bbf;
  font-weight: 800;
  font-size: 1.2rem;
  padding: 8px 20px;
  border-radius: 999px;
  margin: 6px 0;
}

/* Level-up-banner på resultatskärmen. */
.levelup-pop {
  display: inline-block;
  background: linear-gradient(90deg, #ffd76a, #ffb347);
  color: #7a4a00;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 10px 22px;
  border-radius: 999px;
  margin: 8px 0;
  box-shadow: var(--skugga);
  animation: bump 0.5s ease;
}

.cheer {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 12px 0 20px;
}

.result-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Konfetti -------------------------------------------------------------- */

.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 200;
}

.confetti-bit {
  position: absolute;
  top: -20px;
  width: 12px;
  height: 12px;
  opacity: 0.9;
  animation: confettiFall linear forwards;
}

/* --- Animationer ----------------------------------------------------------- */

@keyframes pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

.shake {
  animation: shake 0.45s ease;
}

@keyframes floatUp {
  0% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, -60px); opacity: 0; }
}

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(540deg); opacity: 0.9; }
}

/* --- Responsivt ------------------------------------------------------------ */

@media (max-width: 520px) {
  .jakt-options { grid-template-columns: 1fr; }
  .para-grid { gap: 10px; }
  .para-card { font-size: 0.95rem; min-height: 56px; }
  .pair-img-svg { width: 58px; height: 58px; }
  .mem-front .pair-img-svg { width: 66px; height: 66px; }
}

/* --- Fånga sanningar (arkad-läge, games-sanningsjakt.js) ------------------- */

.sj-intro .hint { max-width: 46ch; margin-left: auto; margin-right: auto; }

.sj-arena {
  position: relative;
  height: 62vh;
  min-height: 380px;
  max-height: 560px;
  overflow: hidden;
  border-radius: var(--radie);
  background: linear-gradient(180deg, #dcefff 0%, #eaf6ff 55%, #d7f0dc 100%);
  box-shadow: var(--skugga-mjuk);
  touch-action: none; /* dra styr spelaren, inte sidscroll */
  user-select: none;
}

/* Golv-remsa så det syns var påståenden landar. */
.sj-arena::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10px;
  background: rgba(30, 142, 78, 0.35);
}

.sj-hud {
  position: absolute;
  top: 10px; left: 12px; right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: var(--z-scen-ui);
  pointer-events: none;
}
.sj-hearts { font-size: 1.4rem; letter-spacing: 2px; }
.sj-score {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 700;
  color: var(--text);
}
.sj-score b { color: var(--bla-mork); }

.sj-field { position: absolute; inset: 0; }

.sj-tile {
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
  /* Rimlig max-bredd: långa påståenden radbryter (flera rader) och brickan blir
     högre i stället för superbred. Kollisionen mäter faktisk storlek i JS. */
  width: max-content;
  max-width: min(44%, 300px);
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
  border: 3px solid var(--bla);
  text-align: center;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Sant/falskt ser likadant ut – eleven ska AVGÖRA, inte färgläsa. */
.sj-tile.caught { transition: transform 0.12s ease, opacity 0.12s ease; opacity: 0; }
.sj-tile.caught.truth { transform: scale(1.15); }
.sj-tile.caught.false { transform: scale(0.7); }
.sj-tile-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-svag);
  margin-bottom: 2px;
}
.sj-tile-main { display: block; font-size: 0.95rem; }

.sj-float {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: 1.2rem;
  pointer-events: none;
  animation: sj-float-up 0.75s ease-out forwards;
  z-index: var(--z-scen-ui);
}
.sj-float.good { color: var(--gron-mork); }
.sj-float.bad { color: var(--rod); }
@keyframes sj-float-up {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.7); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1.1); }
}

/* Spelaren: avatar som fångar med SIG SJÄLV (uppsträckta armar). Positioneras i
   px av spelmotorn (left); figuren står på golvet. */
.sj-player {
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 92px;
  height: 92px;
  z-index: var(--z-scen-objekt);
}
.sj-player.face-left { transform: scaleX(-1); }

.sj-figure {
  position: absolute;
  left: 50%;
  bottom: 0; /* fötterna på golvet */
  transform: translateX(-50%);
  font-size: 64px; /* .avatar-figure skalar med font-size */
  transform-origin: 50% 100%;
}
.sj-figure .avatar-figure { display: block; }

/* Gång-cykel: lätt studs + vaggning (armar/ben antyds av vaggningen). Idle =
   lugn andning. Spegelvändning görs på .sj-player (face-left), så samma
   animation funkar åt båda håll. Respekterar reducerad rörelse. */
.sj-figure { animation: sj-idle 2.4s ease-in-out infinite; }
.sj-figure.walking { animation: sj-walk 0.42s ease-in-out infinite; }
.sj-figure.cheer { animation: sj-cheer 0.4s ease; }

@keyframes sj-idle {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  50% { transform: translateX(-50%) translateY(-3%) rotate(0deg); }
}
@keyframes sj-walk {
  0% { transform: translateX(-50%) translateY(0) rotate(-5deg); }
  25% { transform: translateX(-50%) translateY(-9%) rotate(0deg); }
  50% { transform: translateX(-50%) translateY(0) rotate(5deg); }
  75% { transform: translateX(-50%) translateY(-9%) rotate(0deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(-5deg); }
}
@keyframes sj-cheer {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  40% { transform: translateX(-50%) translateY(-14%) scale(1.08); }
}

.sj-arena.shake { animation: sj-shake 0.32s ease; }
@keyframes sj-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .sj-figure, .sj-figure.walking, .sj-figure.cheer { animation: none; }
  .sj-arena.shake { animation: none; }
}

@media (max-width: 520px) {
  .sj-arena { height: 66vh; }
  .sj-player { width: 80px; height: 84px; }
  .sj-figure { font-size: 56px; }
  .sj-tile { max-width: min(60%, 240px); }
  .sj-tile-main { font-size: 0.88rem; }
}

/* ==========================================================================
   Äventyrsläget – gemensam spelmotor (src/adventure/*, issue #194)
   Top-down "gå-runt-och-svara"-bana: statiska tiles ritas en gång, bara
   .adventure-player flyttas i loopen. Följer designsystemet (z-tokens, modaler,
   [hidden], procent-koordinater) – inga magiska z-index. Avataren återanvänds
   rakt av (avatar-figure) med spegling för vänster/höger + en billig "gå-studs".
   ========================================================================== */

.adventure-stage {
  position: relative;
  height: 62vh;
  min-height: 380px;
  max-height: 600px;
  overflow: hidden;
  border-radius: var(--radie);
  background: linear-gradient(180deg, var(--adv-himmel, #cdeafd) 0%, var(--adv-mark, #9ad07b) 42%);
  box-shadow: var(--skugga-mjuk);
  container-type: size; /* gör cqw-enheten (avatarstorlek) relativ till scenen */
  /* Touch-styrning (#250): dra styr avataren – aldrig sidscroll/zoom/markering/
     callout på spelytan. touch-action:none blockerar pan+dubbeltap-zoom. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer; /* peka: hela ytan är "gå hit / tryck för att svara" */
}

/* Tile-lagret (statiskt, ritas en gång). Varje tile centreras på sin ruta. */
.adv-tiles { position: absolute; inset: 0; }
.adv-tile {
  position: absolute;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adv-tile-floor,
.adv-tile-start,
.adv-tile-station,
.adv-tile-goal {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.adv-tile-wall {
  background: #7a6a52;
  box-shadow: inset 0 0 0 2px var(--outline, #3B3350), inset 0 -4px 0 rgba(0, 0, 0, 0.18);
  border-radius: 8px;
}
.adv-tile-void { background: transparent; box-shadow: none; }

/* Stationer + slutmål: absolut-placerade markörer, centrerade på rutan. */
.adv-stations, .adv-goal { position: absolute; inset: 0; z-index: var(--z-scen-markor); }
.adv-station {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: clamp(20px, 5cqw, 40px);
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
  transition: opacity 0.2s ease, transform 0.2s ease;
  animation: adv-station-pulse 1.8s ease-in-out infinite;
}
.adv-station.cleared {
  opacity: 0.45;
  animation: none;
}
.adv-station.cleared::after {
  content: "✅";
  position: absolute;
  right: -0.3em;
  top: -0.3em;
  font-size: 0.6em;
}
.adv-goal {
  position: absolute;
}
.adv-goal[hidden] { display: none !important; }
.adv-goal .adv-goal-art {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: clamp(28px, 8cqw, 58px);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3));
  animation: adv-goal-pop 0.4s ease, adv-station-pulse 1.6s ease-in-out 0.4s infinite;
}
/* .adv-goal placeras via left/top på wrappern; art:en centreras på den punkten. */
#adv-goal { pointer-events: none; }
#adv-goal .adv-goal-art { left: 0; top: 0; }

/* HUD (framstegsräknare) + interaktionsprompt – scen-UI-lagret. */
.adv-hud {
  position: absolute;
  top: 10px; left: 12px;
  z-index: var(--z-scen-ui);
  pointer-events: none;
}
.adv-progress {
  background: rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  padding: 5px 14px;
  font-weight: 700;
  color: var(--text);
  box-shadow: var(--skugga-mjuk);
}
.adv-progress b { color: var(--bla-mork); }
.adv-progress-icon { font-size: 1.05em; }
.adv-prompt {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-scen-ui);
  background: rgba(30, 30, 50, 0.82);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  pointer-events: none;
  animation: adv-prompt-in 0.16s ease;
}

/* Kompass-HUD (#261): diskret pil fast i övre HÖGER hörn av spelytan som pekar mot
   närmsta fråga/slutmålet. Halvtransparent mörk rundad platta med ljus ring + skugga
   → läsbar mot BÅDE ljus (Skattjakten) och mörk (Gruvan/Spökjakten) bakgrund. Pilen
   får ALDRIG äta tap på spelytan → pointer-events:none på hela elementet. */
.adv-compass {
  position: absolute;
  top: 10px; right: 12px;
  z-index: var(--z-scen-ui);
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(28, 30, 46, 0.5);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35), inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
  color: #fff;
  pointer-events: none; /* KRITISKT (touch): gå/tryck ska funka "under" pilen */
  animation: adv-prompt-in 0.16s ease;
}
.adv-compass-arrow {
  display: inline-flex;
  font-size: 22px;
  line-height: 0;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
  transition: transform 0.12s linear; /* mjuk rotation, ingen throttling behövs */
}

/* Spelaren: elevens avatar (avatar-figure) placerad i procent, centrerad. */
.adventure-player {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: var(--z-scen-objekt);
  line-height: 1;
  will-change: left, top;
  pointer-events: none;
}
.adventure-player .adv-avatar {
  display: block;
  transform-origin: 50% 100%;
}
.adventure-player .avatar-figure { display: block; }
/* Vänster/höger: samma CSS-spegling som husdjuren, men på hela figuren. */
.adventure-player.vand-vanster .avatar-figure { transform: scaleX(-1); }
/* Gå-studs: billig vertikal bob + lätt vagga när .gar är satt (ingen ny SVG). */
.adventure-player.gar .adv-avatar { animation: adv-bob 0.42s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Tema-verktyg i handen + hack-animation (issue #225, hand-tool.js).
   Verktyget (t.ex. Gruvans pickhacka) ritas som extra lager i .adv-fig-wrappern
   (samma 1em×1.2em-box som .avatar-figure) och placeras vid avatarens högra hand
   (jfr af-hand-ankaret i styles.css). Klädsel/gå-studs rörs inte; spegling
   flippas på wrappern så figur + verktyg vänder ihop. Bara teman med handTool
   får .adv-has-tool → övriga teman är helt oberörda.
   -------------------------------------------------------------------------- */
.adventure-player .adv-fig {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1.2em;
  line-height: 1;
}
.adventure-player .adv-hand-tool {
  position: absolute;
  left: 50%; top: 6%;
  width: 58%; height: 66%;
  transform-origin: 40% 84%; /* pivot vid greppet/handen → svinget roterar kring handen */
  pointer-events: none;
  z-index: 1; /* verktyget ovanpå figuren */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
/* Spegling: flippa hela wrappern (figur + verktyg ihop) och neutralisera figurens
   egen spegling (mer specifik selektor vinner) så den inte flippas dubbelt. */
.adventure-player.vand-vanster .adv-fig { transform: scaleX(-1); }
.adventure-player.vand-vanster .adv-fig .avatar-figure { transform: none; }
/* Hack/hugg: kort sving på verktyget + liten kroppsansträngning (self-cleaning
   klass .adv-hacking sätts av playHack). .gar tas bort under interaktionen så
   bob:en krockar inte. */
.adventure-player.adv-hacking .adv-hand-tool { animation: adv-hack-tool 0.5s ease; }
.adventure-player.adv-hacking .adv-avatar { animation: adv-hack-body 0.5s ease; }

/* --------------------------------------------------------------------------
   OPT-IN scroll/bild-karta-läge (issue #220). Bara scroll-teman (theme.mapImage)
   får .adv-scroll; grid-teman (Spökjakten/Gruvan) är helt orörda ovanför.
   Lager bakifrån→fram: .adv-map < (kollision, osynlig) < .adv-objects < spelare < UI.
   .adv-world translateras+skalas av kameran (world scrollar); .adv-hud/.adv-prompt
   ligger fast. transform-origin 0 0 = samma matte som camera.cameraTransform().
   -------------------------------------------------------------------------- */
.adventure-stage.adv-scroll { touch-action: none; }
.adv-world {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.adv-map {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: var(--z-scen-botten, 0);
}
/* Egenritad inline-SVG-värld (issue #238): SVG:n fyller kartlagret helt. */
.adv-map > svg { width: 100%; height: 100%; display: block; }
/* Station-/mål-konsten i scroll-läget: bind storleken till font-size (1em) precis
   som avataren. Utan detta löser SVG:ns width:100% mot fel block och objekten blir
   flera gånger för stora i förhållande till avataren (feedback: "gigantiska"). */
.adv-scroll .adv-station-art,
.adv-scroll .adv-goal-art {
  display: block;
  width: 1em;
  height: 1em;
}
.adv-scroll .adv-objects {
  position: absolute;
  inset: 0;
  z-index: var(--z-scen-markor);
  pointer-events: none;
}
/* Stationer/mål i scroll-läget placeras med left/top i VÄRLDSPIXLAR (inte %),
   centrerade på punkten; storleken (font-size) sätts i px av scenen → skalar med
   zoomen. Pulsen återanvänder grid-lägets keyframes. */
.adv-scroll .adv-station {
  position: absolute;
  transform: translate(-50%, -50%);
  line-height: 1;
  font-size: 1em;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
  transition: opacity 0.2s ease;
  animation: adv-station-pulse 1.8s ease-in-out infinite;
}
.adv-scroll .adv-station.cleared { opacity: 0.45; animation: none; }
.adv-scroll .adv-station.cleared::after {
  content: "✅";
  position: absolute;
  right: -0.3em; top: -0.3em;
  font-size: 0.6em;
}
/* Flyende spöken (#276): rädd/upptäckt spöke – byt lugna pulsen mot en liten
   nervös darrning. Ren visuell signal; positionen styrs av motorn via left/top. */
.adv-scroll .adv-station.scared {
  animation: adv-station-scared 0.5s ease-in-out infinite;
}
/* Respawn efter escape: kort fade-in på den nya (off-screen) platsen. Läggs på
   art-spannet (utan egen animation) så station-pulsen på wrappern inte störs. */
.adv-scroll .adv-station-art.adv-respawn {
  animation: adv-respawn-in 0.45s ease;
}
.adv-scroll .adv-goal {
  position: absolute;
  inset: auto;
  z-index: var(--z-scen-markor);
  pointer-events: none;
  font-size: 1em;
}
.adv-scroll .adv-goal .adv-goal-art {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3));
  animation: adv-goal-pop 0.4s ease, adv-station-pulse 1.6s ease-in-out 0.4s infinite;
}
.adv-scroll .adventure-player {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: var(--z-scen-objekt);
  line-height: 1;
  will-change: left, top;
  pointer-events: none;
}

/* Frågemodalen ovanpå världen – följer .cx-modal men lite smalare. */
.adv-q-modal { max-width: 560px; }
.adv-q-body .quiz-wrap { margin-top: 4px; }

/* Generator-utmaningsmodalen (#296): A4-kladdkort + svarsfält i en modal. Kortet
   återanvänder .a4-card men hålls kompakt så modalen ryms; förstora fäller ut det
   till fullskärm (.scratch-fs) precis som i räkna-läget. */
.adv-gen-modal { max-width: 520px; }
.adv-gen-body { display: flex; flex-direction: column; }
.adv-gen-stage { display: flex; justify-content: center; }
/* Kortet i modalen är kompakt: släpp A4-tvånget och styr höjden direkt så ritytan
   (surface, flex 1) alltid får plats även på låga skärmar – förstora ger sedan mer
   utrymme. Talet och verktygen hålls nedtonade så de inte äter ritytan. */
.adv-gen-stage .a4-card {
  width: 100%;
  max-width: 460px; /* #392: bredare så hela verktygsraden (inkl. Text) ryms */
  aspect-ratio: auto;
  height: min(52vh, 360px);
  max-height: none;
  margin: 0;
}
.adv-gen-stage .a4-task {
  font-size: clamp(1.3rem, 4.5vw, 1.9rem);
  padding: 10px 12px 8px;
}
.adv-gen-stage .scratch-surface { min-height: 96px; }
.adv-gen-stage .scratch-tools { padding: 6px 8px; }
.adv-gen-answer { margin-top: 14px; }

/* När kladdytan är utfälld till fullskärm (.scratch-fs) gäller inte modalens
   kompakta höjd längre – kortet fyller skärmen (se .scratch-fs, #392-layouten). */
.adv-gen-stage .a4-card.scratch-fs .a4-task { font-size: clamp(1.4rem, 4vw, 2.2rem); padding: 6px 12px 4px; }

.adv-intro { max-width: 560px; margin: 0 auto; }

@keyframes adv-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-7%) rotate(-2deg); }
  75% { transform: translateY(-7%) rotate(2deg); }
}
@keyframes adv-station-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.12); }
}
/* Rädd spöke (#276): liten nervös darrning kring centreringen. */
@keyframes adv-station-scared {
  0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); }
  50% { transform: translate(-50%, -50%) rotate(4deg); }
}
/* Respawn-fade (#276): spöket tonar mjukt in på sin nya plats. */
@keyframes adv-respawn-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Hack: lyft verktyget bakåt och slå ner (svinget) – tydlig "bryter"-rörelse. */
@keyframes adv-hack-tool {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-46deg); }
  55% { transform: rotate(30deg); }
  72% { transform: rotate(16deg); }
  100% { transform: rotate(0deg); }
}
/* Kropp: liten framåtlutning + studs i takt med slaget. */
@keyframes adv-hack-body {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(-5%) rotate(-3deg); }
  60% { transform: translateY(3%) rotate(4deg); }
}
@keyframes adv-goal-pop {
  from { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes adv-prompt-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Respektera reduced motion: ingen gå-studs eller pulserande markörer. */
@media (prefers-reduced-motion: reduce) {
  .adventure-player.gar .adv-avatar,
  .adventure-player.adv-hacking .adv-hand-tool,
  .adventure-player.adv-hacking .adv-avatar,
  .adv-station,
  .adv-scroll .adv-station.scared,
  .adv-scroll .adv-station-art.adv-respawn,
  .adv-goal .adv-goal-art { animation: none; }
}

/* --- Räkna-läget (issue #280): A4-kort + kladdyta + svarsfält --------------- */
/* Uppgiften visas som ett A4-kort med talet stort över en flyktig rityta
   (canvas). Kladdytan sparas aldrig – bara i minnet, nollställs mellan
   uppgifter. Belöning via den vanliga game-shared-loopen. */

.rakna {
  max-width: 760px;
  margin: 0 auto;
}

.rakna-progress {
  text-align: center;
  font-weight: 700;
  color: var(--text-svag);
  margin-bottom: 12px;
}

.rakna-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* A4-kortet: stående pappersyta (√2-proportion) med talet överst. */
.a4-card {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1.414;
  max-height: 62vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--skugga-mjuk), 0 0 0 1px #e6eefb;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.a4-task {
  flex: 0 0 auto;
  text-align: center;
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 800;
  color: var(--text);
  padding: 18px 16px 10px;
  border-bottom: 2px dashed #dbe6f7;
  background: rgba(255, 255, 255, 0.85);
}

.a4-eq { color: var(--bla); }

/* Bildstöd för de visuella ämnena i räkna (#321): urtavla/kulpåse/stapeldiagram/
   rutnät ritas överst i A4-kortet, med frågetexten i lagom storlek under (den
   stora .a4-task-fonten passar bara korta "a op b ="-tal). */
.rakna-visual {
  max-width: 300px;
  margin: 4px auto 10px;
}
/* Direkt-SVG = degraderat läge (rit-lagret kunde inte laddas, #325); wrappat
   läge sizas via .rakna-visual .bildstod-draw nedan. */
.rakna-visual > svg { display: block; width: 100%; height: auto; }
/* Wrappat: rit-lagret fyller bredden, höjd ur bildförhållandet (aspect-ratio). */
.rakna-visual .bildstod-draw { width: 100%; margin: 0 auto; }
.rakna-question {
  font-size: clamp(1.05rem, 3.2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
}

/* Bildstöd (#320): array-/rutnätsstödet (ren SVG från matte-bildstod.js) ligger
   som en egen rad INNE i kortet, direkt under talet, så det följer med när kortet
   fälls ut till fullskärm. Egen intrinsisk storlek ur SVG:ns viewBox (CSS width/
   height:auto vinner över dess width="100%"-attribut), höjd-kapad så stora rutnät
   krymper men små inte blåses upp. Centrerad, med samma streckade avdelare som
   talet ovanför. Tas bort helt (hidden) när uppgiften saknar bildstöd. */
.rakna-bildstod {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 12px 10px;
  background: rgba(255, 255, 255, 0.7);
  border-bottom: 2px dashed #dbe6f7;
}
/* Direkt-SVG = degraderat läge (utan rit-lager); wrappat sizas nedan. */
.rakna-bildstod > svg.bildstod {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(64px, 18vh, 170px);
}

/* Rit-lager ovanpå bildstödet (#325): en wrapper där bildstöds-SVG:n är
   bakgrundslager och en transparent canvas ligger ovanpå i EXAKT samma box, så
   pennstrecken hamnar i linje med bilden (visare mitt på urtavlan, prickar i
   array-rutorna) och skalar likformigt med när kortet fälls ut. Boxen får en
   DEFINITIV storlek ur bildstödets bildförhållande (aspect-ratio sätts inline ur
   viewBox i bildstod-draw.js) – en axel styrs per kontext (bredd i .rakna-visual,
   höjd i det flex-centrerade .rakna-bildstod), den andra följer förhållandet. Både
   SVG och canvas är absoluta och fyller wrappern (100 %) → delar alltid exakt
   samma box, oberoende av SVG:ns bräckliga inneboende px-storlek. */
.bildstod-draw { position: relative; display: block; max-width: 100%; }
.bildstod-draw > svg,
.bildstod-draw > .bildstod-draw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bildstod-draw > svg { display: block; }
.bildstod-draw-canvas {
  cursor: crosshair;
  touch-action: none;         /* ett finger ritar i stället för att skrolla (som .a4-scratch) */
  -webkit-user-select: none;
  user-select: none;
}

/* Höjden på array-/rutnätsstödet i räkna (flex-centrerat); bredden följer
   bildförhållandet. Definitiv höjd behövs så flex-itemet inte kollapsar. */
.rakna-bildstod .bildstod-draw { height: clamp(72px, 17vh, 160px); }

.a4-scratch-hint {
  flex: 0 0 auto;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-svag);
  padding: 6px 10px 8px;
  background: rgba(255, 255, 255, 0.7);
}

/* Ritytan bor i .scratch-surface (flex 1 → fyller kortet). Verktygsraden ligger som
   en egen rad EFTER ytan i kortet, så den följer med till fullskärm utan att skymma
   talet eller ritningen. */
.scratch-surface {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  /* Diskret grått rutnät (mattepapper) BAKOM den transparenta rit-canvasen, så
     ritandet alltid ligger ovanpå rent. Svaga ljusgrå linjer → stör inte
     läsbarheten. Ligger bara i ritytan, inte bakom talet/verktygen. Gäller i
     både standard- och förstorat läge (surface är flex:1 i båda). */
  background-image:
    linear-gradient(#e6e8ec 1px, transparent 1px),
    linear-gradient(90deg, #e6e8ec 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

/* Själva ritytan fyller resten av kortet. touch-action: none → ett finger ritar
   i stället för att skrolla sidan (samma princip som äventyrsmotorns pekstyrning). */
.a4-scratch {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: block;
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Text-lagret (#392, scratch-text.js): ligger exakt över canvasen. Släpper igenom
   pekaren till ritytan utom i Text-läget (.is-text), där ett tryck skapar en lapp.
   Lapparna sitter i procent av ytan → följer med vid förstora/förminska. */
.scratch-text-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.scratch-text-layer.is-text {
  pointer-events: auto;
  cursor: text;
  touch-action: manipulation; /* inget dubbeltrycks-zoom-dröjsmål på touch */
}
.scratch-note {
  position: absolute;
  transform: translateY(-50%); /* trycket hamnar mitt på textraden */
  min-width: 2ch;
  box-sizing: border-box;
  margin: 0;
  padding: 2px 6px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #2a2a35; /* samma som pennan (PEN_COLOR) */
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.6rem; /* ≥16px → iOS zoomar inte in vid fokus */
  line-height: 1.2;
  pointer-events: none; /* rit-lägena ritar rakt igenom texten */
}
.scratch-text-layer.is-text .scratch-note { pointer-events: auto; }
.scratch-note:focus {
  outline: none;
  border-color: var(--bla);
  background: rgba(255, 255, 255, 0.85);
}
.scratch-note::placeholder { color: #9aa6b8; }

/* Verktygsraden (#392 – omgjord för ett lugnare, mer enhetligt uttryck): en egen
   rad längst ner i kortet. Vänster: ritverktygen som EN segmenterad kontroll (ett
   spår där valt verktyg är ett vitt "chip"). Höger: åtgärderna Rensa + Förstora som
   diskreta, lika höga knappar. Alla knappar samma höjd, inline-SVG-ikoner
   (currentColor) i stället för emoji → ser likadant ut på alla enheter. */
.scratch-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* reserv: blir det ändå för trångt hamnar åtgärderna på egen rad */
  gap: 6px;
  padding: 8px 10px;
  background: #fff;
  border-top: 1px solid #e6eefb;
}
.tool-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: #eef2f8;
}
.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  min-width: 34px;
  padding: 0 10px; /* 5 knappar + gap ryms på en rad i 520px-kortet */
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #5b6b82;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.tool-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.tool-btn:hover { color: var(--text); }
.tool-btn:focus-visible { outline: 2px solid var(--bla); outline-offset: 1px; }
.tool-seg .tool-btn.is-active {
  background: #fff;
  color: var(--bla);
  box-shadow: 0 1px 2px rgba(31, 45, 74, 0.14), 0 0 0 1px rgba(31, 45, 74, 0.04);
}
/* Åtgärderna: skjuts till höger, tunn ram, ingen fyllning. */
.tool-action { border: 1px solid #dfe6f1; background: #fff; }
.tool-action:hover { background: #f6f8fc; }
.scratch-tools > .tool-seg { margin-right: auto; } /* (knappsatsknappen är dold i kortläget → inte :first-of-type) */
.tool-btn[data-clear]:hover { color: var(--rod); border-color: #f3c9c9; }
/* I det vanliga kortet (och modalen) anpassas raden efter SIN EGEN bredd: först
   tappar åtgärderna sin text, sedan ritverktygen – ikonerna bär alltid namnet via
   title/aria-label. (Inte i helskärm: där sitter raden i en auto-kolumn, och
   inline-size-containment skulle kollapsa den – där styr media-reglerna nedan.) */
.a4-card:not(.scratch-fs) > .scratch-tools { container-type: inline-size; }
@container (max-width: 470px) {
  .tool-action .tool-label { display: none; }
  .tool-action { padding: 0; width: 34px; }
}
@container (max-width: 330px) {
  .tool-seg .tool-label { display: none; }
  .tool-seg .tool-btn { padding: 0; width: 40px; }
}

/* Fullskärms-kladdyta (#296 del B): kortet fäller ut över hela ytan för mer
   ritutrymme. position:fixed → täcker allt; verktygen ligger kvar inuti kortet. */
.scratch-fs {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
body.scratch-fs-lock { overflow: hidden; }

/* #312: I fullskärm flyttas svarsrutan (svarsfält + feedback + nästa-knapp) IN i
   det utfällda kortet – in-flow, inte flytande overlay, så den aldrig överlappar
   talet eller ritverktygen (jfr #296-lärdomen). Frågan syns redan i kortets
   rubrik (.a4-task).
   #392: RYMLIG helskärm – kortet blir ett grid där ritytan (1fr) tar nästan allt.
   All "chrome" krymps: kompakt rubrik (bildstödet bredvid talet på breda skärmar),
   ingen kladd-hint, och verktygen + svarsrutan delar EN rad längst ner (staplade
   på smala skärmar). Svarsrutan är fortfarande in-flow i egen grid-cell. */
.a4-card.scratch-fs {
  display: grid;
  /* Kolumn 1 = verktygens bredd, kolumn 2 = resten (svarsrutan). */
  /* Kolumn 3 = knappsatsen bredvid ritytan (#392, 0 bred när den är stängd). */
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}
.scratch-fs > .a4-task { grid-area: 1 / 1 / 2 / -1; font-size: clamp(1.4rem, 4vw, 2.2rem); padding: 6px 12px 4px; }
.scratch-fs > .rakna-bildstod { grid-area: 2 / 1 / 3 / -1; padding: 4px 12px; }
/* Helskärm = arbetsyta: tunna heldragna avdelare i stället för kortets streckade
   "papperslinjer", så rubrik/verktyg/svar läses som en sammanhållen ram. */
.scratch-fs > .a4-task,
.scratch-fs > .rakna-bildstod { border-bottom: 1px solid #e6eefb; background: #fff; }
.scratch-fs > .scratch-surface { grid-area: 3 / 1 / 4 / 3; }
.scratch-fs > .a4-scratch-hint { display: none; }
.scratch-fs > .scratch-tools {
  grid-area: 4 / 1 / 5 / 2;
  align-content: center;
  padding: 6px 10px;
}
.scratch-fs .scratch-fs-answer {
  grid-area: 4 / 2 / 5 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #e6eefb;
  border-left: 1px solid #e6eefb;
  max-height: 40vh;
  overflow-y: auto;
  /* Kompakt: fält + knapp + liten hjälptext på samma rad, feedback under. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}
/* Etiketten "Ditt svar" behövs inte visuellt i helskärm (placeholder säger det)
   men finns kvar för skärmläsare. */
.scratch-fs .scratch-fs-answer .rakna-answer-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Fält + knappar i samma höjd (36px) och radie som verktygsraden → en enhetlig
   nederkant i stället för spelets stora 3D-knappar. */
.scratch-fs .scratch-fs-answer .rakna-answer-row { flex: 0 1 auto; flex-direction: row; gap: 8px; }
.scratch-fs .scratch-fs-answer .rakna-input {
  height: 36px;
  width: min(200px, 100%);
  padding: 0 12px;
  font-size: 1.05rem;
  border-width: 1px;
  border-color: #cfd9e8;
  border-radius: 10px;
}
.scratch-fs .scratch-fs-answer .rakna-submit,
.scratch-fs .scratch-fs-answer .rakna-feedback .btn {
  height: 36px;
  width: auto;
  padding: 0 18px;
  font-size: 0.95rem;
  border-radius: 10px;
  box-shadow: none;
}
.scratch-fs .scratch-fs-answer .rakna-submit:active,
.scratch-fs .scratch-fs-answer .rakna-feedback .btn:active { transform: none; filter: brightness(0.95); }
.scratch-fs .scratch-fs-answer .rakna-hint { flex: 1 1 200px; margin: 0; font-size: 0.8rem; line-height: 1.25; text-align: left; }
.scratch-fs .scratch-fs-answer .rakna-feedback { flex: 1 1 100%; margin: 0; font-size: 1rem; min-height: 0; }
.scratch-fs .scratch-fs-answer .rakna-feedback:empty { display: none; }
/* När svaret är rättat har hjälptexten gjort sitt – ge raden åt feedback + Nästa. */
.scratch-fs .scratch-fs-answer:has(.rakna-feedback:not(:empty)) .rakna-hint { display: none; }
.scratch-fs .scratch-fs-answer .rakna-feedback .btn { margin-left: 10px; }

/* Array-/rutnätsstödet bredvid talet i stället för under (sparar en hel rad
   höjd) – talet är kort, så det ryms även på mobil. */
.a4-card.scratch-fs:has(> .rakna-bildstod:not([hidden])) > .a4-task {
  grid-area: 1 / 1 / 2 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
}
.a4-card.scratch-fs:has(> .rakna-bildstod:not([hidden])) > .rakna-bildstod {
  grid-area: 1 / 2 / 2 / -1;
  border-left: 1px solid #e6eefb;
}
/* Visuella ämnen på breda skärmar: bilden bredvid frågetexten i rubriken. */
@media (min-width: 700px) {
  .scratch-fs > .a4-task:has(.bildstod-draw, .rakna-visual > svg) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
  }
  .scratch-fs .a4-task:has(.bildstod-draw, .rakna-visual > svg) .rakna-visual { margin: 0; flex: 0 0 auto; }
}
/* Bildstöden hålls låga i helskärm – ritytan ska få höjden. Bredden följer
   bildförhållandet (aspect-ratio inline ur viewBox). */
.a4-card.scratch-fs .rakna-visual { max-width: none; }
.scratch-fs .rakna-visual .bildstod-draw { width: auto; height: clamp(84px, 20vh, 180px); }
.scratch-fs .rakna-visual > svg { width: auto; max-width: 100%; max-height: clamp(84px, 20vh, 180px); margin: 0 auto; }
.scratch-fs .rakna-bildstod .bildstod-draw { height: clamp(48px, 10vh, 110px); }
.scratch-fs .rakna-bildstod > svg.bildstod { max-height: clamp(48px, 10vh, 110px); }

/* Smalare skärmar: verktyg och svar staplas (egen rad var). */
@media (max-width: 999px) {
  .scratch-fs > .scratch-tools { grid-area: 4 / 1 / 5 / -1; }
  .scratch-fs .scratch-fs-answer { grid-area: 5 / 1 / 6 / -1; border-left: 0; }
}
/* Mobil: Rensa/Förstora visar bara ikonen (title/aria-label finns kvar) så hela
   raden ryms; ritverktygen behåller sina namn. Gäller både kort och helskärm. */
@media (max-width: 520px) {
  .tool-action .tool-label { display: none; }
  .tool-action { padding: 0; width: 34px; }
  .scratch-tools { padding: 8px; gap: 4px; }
  .tool-btn { gap: 4px; font-size: 0.85rem; }
  .tool-btn svg { width: 17px; height: 17px; }
  .tool-seg .tool-btn { padding: 0 8px; }
}
@media (max-width: 520px) {
  /* width:0 + flex 1 → fältet tar resten utan att dess inneboende bredd (size=20)
     knuffar Svara-knappen utanför skärmen. */
  .scratch-fs .scratch-fs-answer .rakna-input { flex: 1 1 0; width: 0; }
  .scratch-fs .scratch-fs-answer .rakna-answer-row { flex: 1 1 100%; min-width: 0; }
}


/* ---------------------------------------------------------------------------
   Knappsats + uppställning (#392, scratch-keypad.js / scratch-uppstallning.js).
   Knappsatsen finns bara i helskärm: dockad i en egen grid-kolumn BREDVID ritytan
   (desktop) resp. en egen rad LÄNGST NER (mobil ≤759px) – alltid in-flow, aldrig
   ovanpå ritytan/svaret. Samma lugna, platta stil som verktygsraden. */
.a4-card:not(.scratch-fs) .scratch-keypad-btn,
.a4-card:not(.scratch-fs) > .scratch-keypad { display: none; }
/* Arket fryst medan knappsatsen är öppen (scratchpad.js freezeSheet): canvas och
   lagren behåller sin storlek, ytan klipper det panelen tar. */
.scratch-surface.is-frozen { overflow: hidden; }
.scratch-surface.is-frozen > .a4-scratch { flex: 0 0 auto; }
.scratch-keypad-btn.is-active { color: var(--bla); border-color: #b9d3f7; background: #eef5fe; }
.scratch-fs > .scratch-keypad {
  grid-area: 3 / 3 / 4 / 4;
  display: grid;
  grid-template-columns: repeat(4, 60px);
  grid-auto-rows: 48px;
  grid-template-areas:
    "k7 k8 k9 div"
    "k4 k5 k6 times"
    "k1 k2 k3 minus"
    "comma k0 back plus"
    "eq upp upp done";
  gap: 6px;
  align-content: start;
  padding: 10px;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
  border-left: 1px solid #e6eefb;
}
.kp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 0 6px;
  border: 1px solid #dfe6f1;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 0.12s;
}
@media (hover: hover) { .kp-btn:hover { background: #f6f8fc; } } /* inget "fastnat" hover efter tryck på touch */
.kp-btn:active { background: #eef2f8; }
.kp-btn:focus-visible { outline: 2px solid var(--bla); outline-offset: 1px; }
.kp-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.kp-op { background: #f3f6fb; color: var(--bla); }
.kp-act { color: #5b6b82; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.kp-done { color: var(--bla); border-color: #b9d3f7; background: #eef5fe; font-size: 0.95rem; }
.kp-k0 { grid-area: k0; } .kp-k1 { grid-area: k1; } .kp-k2 { grid-area: k2; }
.kp-k3 { grid-area: k3; } .kp-k4 { grid-area: k4; } .kp-k5 { grid-area: k5; }
.kp-k6 { grid-area: k6; } .kp-k7 { grid-area: k7; } .kp-k8 { grid-area: k8; }
.kp-k9 { grid-area: k9; } .kp-plus { grid-area: plus; } .kp-minus { grid-area: minus; }
.kp-times { grid-area: times; } .kp-div { grid-area: div; } .kp-eq { grid-area: eq; }
.kp-comma { grid-area: comma; } .kp-back { grid-area: back; } .kp-upp { grid-area: upp; }
.kp-done { grid-area: done; }
/* Mobil: knappsatsen som bottenpanel (egen sista rad), 3 breda rader så ritytan
   behåller höjden. 7 kolumner à ~49px på en 390px-skärm (≥40px tryckyta). */
@media (max-width: 759px) {
  .scratch-fs > .scratch-surface { grid-area: 3 / 1 / 4 / -1; }
  .scratch-fs > .scratch-keypad {
    grid-area: 6 / 1 / 7 / -1;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 44px;
    grid-template-areas:
      "k1 k2 k3 k4 k5 plus minus"
      "k6 k7 k8 k9 k0 times div"
      "comma eq back upp upp upp done";
    gap: 5px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    border-left: 0;
    border-top: 1px solid #e6eefb;
    overflow: visible;
  }
  /* Svarsrutan står inte längre längst ner – knappsatsen tar safe-area-luften. */
  .a4-card.kp-open .scratch-fs-answer { padding-bottom: 6px; }
}

/* Uppställningsmallen: placerad i procent på ytan (följer förstora/förminska).
   Rutstorleken styrs av --uppst-cell: kompakt i kortet, 40px i helskärm. */
.scratch-uppst-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Genomskinlig mall: canvasen ligger UNDER mallagret, så både mallen och rutorna
   saknar fyllning – pennstreck dragna över mallen syns. I rit-lägena släpps
   pekaren igenom (som lapparna); bara i Text-läget (.is-text) tar mallen tryck. */
.uppst {
  --uppst-cell: 30px;
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 6px 6px;
  background: transparent;
  border: 1px solid #dfe6f1;
  border-radius: 10px;
  pointer-events: none;
}
.scratch-uppst-layer.is-text .uppst { pointer-events: auto; }
.scratch-fs .uppst { --uppst-cell: 40px; }
.uppst-grid {
  display: grid;
  grid-template-columns: repeat(var(--uppst-cols, 6), var(--uppst-cell));
  grid-template-rows: calc(var(--uppst-cell) * 0.7) var(--uppst-cell) var(--uppst-cell) 2px var(--uppst-cell);
  gap: 3px;
}
.uppst-cell {
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid #c3cfe2;
  border-radius: 6px;
  background: transparent;
  color: #2a2a35; /* samma som pennan */
  text-align: center;
  font-family: var(--font);
  font-weight: 700;
  font-size: max(16px, calc(var(--uppst-cell) * 0.55)); /* ≥16px → iOS zoomar inte */
  line-height: 1;
  caret-color: var(--bla);
}
.uppst-cell:focus { outline: none; border-color: var(--bla); background: rgba(47, 128, 237, 0.06); box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.2); }
.uppst-mem { font-size: 16px; color: #5b6b82; border-style: dashed; }
.uppst-op { color: var(--bla); }
.uppst-line { grid-column: 1 / -1; background: #2a2a35; border-radius: 1px; }
/* Huvudet: "+ kolumn" och × (ta bort) – bara synliga/klickbara i Text-läget. */
.uppst-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.scratch-uppst-layer:not(.is-text) .uppst-head { visibility: hidden; }
.uppst-add,
.uppst-close {
  height: 24px;
  padding: 0 8px;
  border: 1px dashed #b9c6da;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  color: #5b6b82;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.uppst-close { width: 24px; padding: 0; border-style: solid; border-color: #dfe6f1; font-size: 1rem; }
@media (hover: hover) {
  .uppst-add:hover { color: var(--bla); border-color: var(--bla); }
  .uppst-close:hover { color: var(--rod); border-color: #f3c9c9; }
}

.rakna-answer {
  margin: 18px auto 0;
  max-width: 520px;
}

.rakna-answer-label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

.rakna-answer-row {
  display: flex;
  gap: 10px;
  /* Svarsfältet + knappen ligger vänsterställda, inte utspända över hela raden
     (#314 – smalare skrivyta). */
  justify-content: flex-start;
  align-items: center;
}

/* Kompakt/smal skrivyta (#314): svaret är kort (ett tal, ev. "3 rest 1"), så
   fältet behöver inte spänna över hela nedre raden. En rimlig max-width håller
   det litet och vänsterställt intill Svara-knappen. Kladdytans höjd är orörd. */
.rakna-input {
  flex: 0 1 auto;
  width: min(220px, 100%);
  font-family: var(--font);
  font-size: 1.3rem;
  font-weight: 700;
  padding: 12px 16px;
  border: 2px solid #d6e2f5;
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  min-width: 0;
}
.rakna-input:focus {
  outline: none;
  border-color: var(--bla);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.18);
}
.rakna-input:read-only { background: #f4f7fc; color: var(--text-svag); }

.rakna-submit { white-space: nowrap; }

.rakna-hint { margin: 8px 2px 0; }

.rakna-feedback {
  min-height: 1.6em;
  margin-top: 12px;
  font-weight: 700;
  font-size: 1.1rem;
}
.rakna-feedback.ratt { color: var(--gron-mork); }
.rakna-feedback.fel { color: var(--rod); }

@media (max-width: 520px) {
  .a4-card { max-height: 54vh; }
  .rakna-answer-row { flex-direction: column; }
  .rakna-submit { width: 100%; }
}

/* --- Framsteg per kategori + stjärnhjälp (#447) ------------------------------
   plugga-framsteg.js: "Ditt framsteg" på områdets sida (.pf-panel) och
   "Så gick det" på resultatskärmen (.pf-resultat). --kat = kategorins färg. */

.pf-panel { margin-top: 18px; }
.pf-topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.pf-topp h2 { margin: 0; }
.pf-stj-tal { font-size: 1.15rem; font-weight: 700; color: #7a5c00; }
.pf-stj-tal b { font-size: 1.5rem; }
.pf-stj-bar,
.pf-kat-bar {
  display: block;
  height: 12px;
  background: #eef2f7;
  border-radius: 999px;
  overflow: hidden;
}
.pf-stj-bar { margin: 8px 0 4px; }
.pf-stj-bar > i,
.pf-kat-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
}
.pf-stj-bar > i { background: linear-gradient(90deg, #f2c94c, #ffb347); }
.pf-kat-bar > i { background: var(--kat, var(--bla)); }
.pf-text { margin: 10px 0 6px; color: var(--text-svag); font-weight: 600; }

.pf-kat-lista { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 10px; }
.pf-kat {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  grid-template-areas:
    "ikon namn niva"
    "ikon bar  tal";
  align-items: center;
  gap: 2px 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f7f9fc;
  border-left: 6px solid var(--kat, var(--bla));
  text-align: left;
}
.pf-kat-ikon { grid-area: ikon; font-size: 1.6rem; line-height: 1; text-align: center; }
.pf-kat-namn { grid-area: namn; display: flex; flex-direction: column; line-height: 1.15; }
.pf-kat-namn b { font-size: 1.1rem; }
.pf-kat-namn small { color: var(--text-svag); font-weight: 600; }
.pf-kat-niva { grid-area: niva; font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.pf-kat-bar { grid-area: bar; }
.pf-kat-tal { grid-area: tal; font-weight: 700; color: var(--text-svag); font-size: 0.9rem; white-space: nowrap; }
.pf-kat-ny .pf-kat-niva { color: var(--text-svag); }

.pf-tips { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 6px; }
.pf-tips li {
  background: #fff8e1;
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 600;
  text-align: left;
}

.pf-hjalp {
  margin-top: 12px;
  background: #eef4ff;
  border-radius: 14px;
  padding: 8px 14px;
  text-align: left;
}
.pf-hjalp summary {
  cursor: pointer;
  font-weight: 800;
  color: #3a5bbf;
  min-height: 32px;
  display: flex;
  align-items: center;
  list-style-position: inside;
}
.pf-hjalp summary::-webkit-details-marker { margin-right: 6px; }
.pf-hjalp-body p { margin: 6px 0 4px; }
.pf-hjalp-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.pf-hjalp-stj { color: #f2c94c; letter-spacing: 2px; font-size: 1.2rem; margin-right: 6px; }

.pf-resultat { max-width: 520px; margin: 0 auto 18px; }
.pf-resultat h3 { margin: 0 0 4px; }
.pf-resultat-sub { margin: 0 0 8px; font-size: 0.85rem; font-weight: 700; opacity: 0.7; }

@media (max-width: 480px) {
  .pf-kat { grid-template-columns: 1.8rem minmax(0, 1fr) auto; padding: 8px 10px; gap: 2px 8px; }
  .pf-kat-niva { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-stj-bar > i, .pf-kat-bar > i { transition: none; }
}