/* Ganbatte – japanskt tema: washi-papper, tusch, vermiljon (shu) och indigo (ai). */
:root {
  /* Färgerna finns i farger.css (ett block per färgschema). */
  --radius: 18px;
  --font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* Inget får ge sidan en vågrät rullist (t.ex. segervarvet, som springer ut över kanten). Banan själv
   klipper ingenting, så att löparen (tågets långa nos) alltid syns helt. */
html { overflow-x: clip; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }

/* ---- Sidhuvud med seigaiha-vågor ("det blå havets vågor") ---- */
.band {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
  color: var(--on-accent);
  border-bottom: 5px solid var(--shu);
}
.seigaiha {
  background-color: var(--ai);
  background-image:
    radial-gradient(circle at 100% 150%, var(--ai) 24%, var(--ai-light) 24%, var(--ai-light) 28%, var(--ai) 28%, var(--ai) 36%, var(--ai-light) 36%, var(--ai-light) 40%, transparent 40%, transparent),
    radial-gradient(circle at 0 150%, var(--ai) 24%, var(--ai-light) 24%, var(--ai-light) 28%, var(--ai) 28%, var(--ai) 36%, var(--ai-light) 36%, var(--ai-light) 40%, transparent 40%, transparent),
    radial-gradient(circle at 50% 100%, var(--ai-light) 10%, var(--ai) 10%, var(--ai) 23%, var(--ai-light) 23%, var(--ai-light) 30%, var(--ai) 30%, var(--ai) 43%, var(--ai-light) 43%, var(--ai-light) 50%, var(--ai) 50%, var(--ai) 63%, var(--ai-light) 63%, var(--ai-light) 71%, transparent 71%, transparent),
    radial-gradient(circle at 100% 50%, var(--ai-light) 5%, var(--ai) 5%, var(--ai) 15%, var(--ai-light) 15%, var(--ai-light) 20%, var(--ai) 20%, var(--ai) 29%, var(--ai-light) 29%, var(--ai-light) 34%, var(--ai) 34%, var(--ai) 44%, var(--ai-light) 44%, var(--ai-light) 49%, transparent 49%, transparent),
    radial-gradient(circle at 0 50%, var(--ai-light) 5%, var(--ai) 5%, var(--ai) 15%, var(--ai-light) 15%, var(--ai-light) 20%, var(--ai) 20%, var(--ai) 29%, var(--ai-light) 29%, var(--ai-light) 34%, var(--ai) 34%, var(--ai) 44%, var(--ai-light) 44%, var(--ai-light) 49%, transparent 49%, transparent);
  background-size: 60px 30px;
}
/* Loggan mitt i toppraden (vit text, gula strålar: logga/ganbatte-mork.svg). Toppraden behåller sin höjd. */
.band { position: relative; min-height: 79px; }
.brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 0; border-radius: 8px; }
.brand .logga { display: block; height: 48px; width: auto; transition: transform .15s ease; }
.brand:hover .logga { transform: scale(1.04); }
.brand:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.who { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-left: auto; }
/* Kugghjulet till Inställningar, bredvid spelarknappen */
.installningar-knapp {
  width: 46px; height: 46px; padding: 6px; border-radius: 50%; border: 2px solid var(--card);
  background: var(--card); box-shadow: 0 3px 0 var(--shadow); cursor: pointer; display: grid; place-items: center;
}
.installningar-knapp svg { width: 100%; height: 100%; }
/* Hovra över kugghjulet: det snurrar sakta, så länge man hovrar (stannar där det är) */
.installningar-knapp:not(.admin-knapp) svg { animation: kugghjul 6s linear infinite paused; }
.installningar-knapp:not(.admin-knapp):hover svg { animation-play-state: running; }
@keyframes kugghjul { to { transform: rotate(360deg); } }
/* Nyckeln till adminsidan vickar lite, som när man vrider om i ett lås */
.admin-knapp svg { transition: transform .3s ease; }
.admin-knapp:hover svg { transform: rotate(-20deg); }

/* Spelsidan får vara bred (banan behöver plats); övrigt innehåll hålls lagom brett. */
main { max-width: 1400px; margin: 0 auto; padding: 22px 16px 40px; }
#screen-start, #screen-summary, #screen-installningar, .play { max-width: 948px; margin-left: auto; margin-right: auto; }
#screen-start { max-width: 1040px; }   /* bredare: passkortets val på bredden (alla talstorlekar på en rad, med bockar) */

h1 { font-size: 2rem; margin: 0 0 6px; font-weight: 900; }
h2 { font-size: 1.15rem; margin: 26px 0 10px; color: var(--ink-soft); font-weight: 700; }
.lead { margin: 0; color: var(--ink-soft); font-size: 1.1rem; line-height: 1.5; }

/* ---- Knappar ---- */
button {
  font: inherit; cursor: pointer; border: none; border-radius: 999px;
  padding: 12px 26px; font-size: 1.1rem; font-weight: 700;
  transition: transform .08s ease, background-color .15s ease, box-shadow .15s ease;
}
button:active { transform: translateY(1px) scale(.98); }
button:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.primary { background: var(--shu); color: var(--on-accent); box-shadow: 0 3px 0 var(--shu-dark); }
/* Går vidare av sig själv: en ljus stapel fylls i knappen under tiden (--auto-tid sätts i app.js). */
.primary.auto { position: relative; overflow: hidden; isolation: isolate; }
.primary.auto::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .28);
  transform-origin: left; animation: auto-fyll var(--auto-tid, 3s) linear forwards;
}
@keyframes auto-fyll { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.primary:hover { background: var(--shu-dark); }
.ghost { background: transparent; color: inherit; border: 2px solid currentColor; }
.band .ghost { color: var(--on-accent); }
.small { padding: 6px 16px; font-size: .95rem; }
.big { font-size: 1.3rem; padding: 16px 44px; margin-top: 18px; }

/* ---- Start ---- */
.intro { display: flex; align-items: center; gap: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  background: var(--card); color: var(--ink); border: 2px solid var(--line);
  padding: 10px 20px; font-weight: 700;
}
.chip[aria-pressed="true"] { border-color: var(--shu); background: var(--chip-active); }
.categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
/* Passkortet: valen och Hajime i en ruta (det viktigaste på startsidan). Valen på bredden: räknesätt och special till
   vänster, talens storlek till höger (en ny grupp hamnar på en egen rad under); en kolumn på smal skärm. */
.passkort { position: relative; margin-top: 18px; padding: 18px 22px 20px; }
.passkort .passval-rubrik { margin: 0 0 14px; font-size: 1.3rem; color: var(--ink); }
.passval { display: grid; gap: 16px 28px; grid-template-columns: auto 1fr;
  grid-template-areas: "ops tal1" "special tal2"; align-items: start; }
.passval .grupp-ops { grid-area: ops; }
.passval .grupp-special { grid-area: special; }
.passval .grupp-tal1 { grid-area: tal1; }
.passval .grupp-tal2 { grid-area: tal2; }
.passval .val { padding: 10px 13px; }   /* lite tätare än andra knappar, så att talens storlek ryms på en rad */
.passval .passval-knappar { gap: 8px; }
/* Bocken: en liten ruta i varje knapp, ikryssad när knappen är vald (man kan kryssa flera i en grupp).
   Rutan finns alltid, så att knappen inte ändrar storlek. --bock = färgen på en ikryssad ruta (per stil). */
.val { display: inline-flex; align-items: center; gap: 7px; }
.val-bock { flex: none; position: relative; width: 16px; height: 16px; border-radius: 4px; box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--ink) 35%, transparent); background: var(--card); }
.val[aria-pressed="true"] .val-bock { border-color: var(--bock, var(--ai-text, var(--ai))); background: var(--bock, var(--ai-text, var(--ai))); }
.val[aria-pressed="true"] .val-bock::after {   /* bocken: ett vinklat streck */
  content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 8px;
  border: solid var(--on-accent, #fff); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.stil-kawaii, .stil-chibi { --bock: var(--shu); }
.stil-kawaii .val-bock { border-radius: 50%; }
.stil-kawaii .passval { column-gap: 20px; }
.stil-kawaii .passval .val { padding: 9px 12px; font-size: 1rem; }   /* det runda typsnittet är bredare */
.stil-videogame { --bock: var(--ink); }
.stil-videogame .val-bock { border-radius: 0; }
.stil-shonen { --bock: var(--tusch, var(--ink)); }
.stil-shonen .val-bock { border-radius: 0; border-color: var(--ink); }
.stil-neon { --bock: var(--neon-turkos); }
.stil-neon .val[aria-pressed="true"] .val-bock { box-shadow: 0 0 6px rgba(61, 232, 255, .7); }
.stil-neon .val[aria-pressed="true"] .val-bock::after { border-color: #10131f; }
@media (max-width: 860px) {
  .passval { grid-template-columns: 1fr; grid-template-areas: "ops" "tal1" "tal2" "special"; }
}
.passval-tips { margin-left: 8px; font-size: .95rem; font-weight: 400; color: var(--ink-soft); }
/* Under valen: exemplen (en förhandsvisning av passet) och Hajime bredvid */
.passkort-fot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px;
  margin-top: 18px; padding-top: 16px; border-top: 2px dashed color-mix(in srgb, var(--line) 80%, transparent); }
.passkort-fot .passval-exempel { margin: 0; flex: 1 1 260px; }
.passkort-fot { align-items: center; }
.passkort-fot .hajime-rad .error:empty { display: none; }
/* Statistiken: info om valen, under passkortet och mindre framträdande */
.ovat { margin: 16px 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
.ovat .ovat-titel { grid-column: 1; margin: 0 !important; }
.ovat .passval-antal { grid-column: 1; }
.ovat .ovat-innehall { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 600px) { .ovat { grid-template-columns: 1fr; } .ovat .ovat-innehall { grid-column: 1; grid-row: auto; margin-top: 12px; } }
.ovat {
  --ovat-sjalv: var(--ai); --ovat-ledtrad: var(--gold); --ovat-visat: color-mix(in srgb, var(--ink-soft) 40%, var(--card));
  padding: 16px 20px; border-radius: 16px;
  background: var(--card); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line);
}
.ovat-titel { font-weight: 700; font-size: 1.1rem; color: var(--ink); margin-bottom: 14px !important; }
.ovat h3 { margin: 0 0 6px; font-size: .95rem; color: var(--ink-soft); }
.ovat p { margin: 0; }
.ovat-innehall { display: flex; align-items: center; gap: 20px; }
/* Cirkeldiagrammet: en ring (hål i mitten) med antalet svar i hålet */
.ovat-cirkel { flex: none; width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; }
.ovat-mitt {
  width: 58px; height: 58px; border-radius: 50%; background: var(--card);
}
.ovat-forklaring ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-weight: 600; }
.ovat-forklaring li::before { content: ""; display: inline-block; width: .8em; height: .8em; border-radius: 3px; margin-right: 8px; vertical-align: -.05em; }
.ovat-forklaring .ovat-sjalv::before { background: var(--ovat-sjalv); }
.ovat-forklaring .ovat-ledtrad::before { background: var(--ovat-ledtrad); }
.ovat-forklaring .ovat-visat::before { background: var(--ovat-visat); }
.passval-grupp h3 { margin: 0 0 6px; font-size: 1rem; color: var(--ink-soft); font-weight: 700; }
.passval-knappar { display: flex; flex-wrap: wrap; gap: 10px; }
.val {
  padding: 10px 18px; border-radius: 14px; border: 2px solid var(--line); background: var(--card);
  color: var(--ink); font-weight: 700; font-size: 1.05rem; cursor: pointer;
}
.val[aria-pressed="true"] { border-color: var(--ai-text, var(--ai)); background: var(--choice-active); }
.passval-exempel { margin: 12px 0 0; color: var(--ink-soft); font-size: 1.05rem; min-height: 2.2em;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* Exemplen ska inte se ut som knappar: ingen kant, ingen vit yta, bara en tonad lapp bakom talen. */
.exempel-ruta { padding: 1px 9px; border-radius: 3px; background: color-mix(in srgb, var(--line) 55%, transparent);
  color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: default; }
.exempel-fa { flex-basis: 100%; }
.passval-antal { margin: 12px 0 0 !important; color: var(--ink-soft); }
.passval-exempel.problem { color: var(--shu-dark); font-weight: 700; }
.hajime:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.category {
  text-align: left; border-radius: 14px; background: var(--card); color: var(--ink);
  border: 2px solid var(--line); padding: 14px 16px; font-weight: 700; font-size: 1.05rem;
}
.category[aria-pressed="true"] { border-color: var(--ai-text, var(--ai)); background: var(--choice-active); }
.error { color: var(--shu-dark); font-weight: 700; min-height: 1.4em; margin: 16px 0 0; }

/* ---- Spel ---- */
.play { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.card {
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: 0 6px 0 var(--paper-2);
}
.question-card { position: relative; text-align: center; }
/* Firandet vid rätt svar: en röd hanamaru eller ◯ ritas fram över frågan och tonar sedan bort. */
.firande { position: absolute; left: 50%; top: 100px; width: 170px; height: 170px; margin: -85px 0 0 -85px;
           pointer-events: none; z-index: 3; opacity: 0; }   /* left/top = mitten av svaret (app.js) */
.firande.visa { animation: firande-tona 2.4s ease forwards; }
@keyframes firande-tona { 0%, 70% { opacity: .92; } 100% { opacity: 0; } }
.firande svg { width: 100%; height: 100%; overflow: visible; }
.firande path { fill: none; stroke: var(--shu); stroke-linecap: round; stroke-linejoin: round;
                stroke-dasharray: 1; stroke-dashoffset: 1; }
.firande .hanamaru path { stroke-width: 5.5; animation: rita .75s ease-out forwards; }
.firande .maru path { stroke-width: 5; opacity: .85; animation: rita .45s ease-out forwards; }
@keyframes rita { to { stroke-dashoffset: 0; } }
/* Körsbärsblad som flyger ut från hanamarun */
.kronblad {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 11px; margin: -5px 0 0 -7px;
  background: #f4a9bd; border-radius: 80% 10% 80% 10%; opacity: 0;
  animation: kronblad 1.3s ease-out forwards;
}
@keyframes kronblad {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(var(--rot)); }
}
.ljud-knapp {
  position: absolute; top: 10px; left: 12px; width: 38px; height: 38px; padding: 7px; border-radius: 50%;
  background: transparent; border: 0; color: var(--ink-soft); cursor: pointer;
}
.ljud-knapp:hover { color: var(--ink); }
.ljud-knapp svg { width: 100%; height: 100%; display: block; }
.ljud-knapp .ljud-av, .ljud-knapp[aria-pressed="false"] .ljud-vagor { display: none; }
.ljud-knapp[aria-pressed="false"] .ljud-av { display: inline; }
.main-q { min-height: 1.4em; color: var(--ink-soft); font-size: 1.05rem; font-weight: 700; }
.prompt-row {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px;
  margin: 8px 0 14px; font-size: clamp(2rem, 7vw, 3.4rem); font-weight: 900;
}
.prompt-row.small-prompt { font-size: clamp(1.4rem, 4.6vw, 2rem); }
.answer {
  font: inherit; font-size: inherit; font-weight: 900; width: 4.2ch; text-align: center;   /* bredden sätts i app.js efter svaret */
  padding: 2px 6px; border: none; border-bottom: 5px solid var(--shu); background: transparent; color: var(--ai-text, var(--ai));
  border-radius: 0;
}
.answer:focus { outline: none; border-bottom-color: var(--ai-text, var(--ai)); }
.answer.besvarad { border-bottom-color: transparent; color: var(--ink); }   /* det rätta svaret, med ringen runt */
.soroban { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; }
.soroban .bead { transition: transform .22s cubic-bezier(.3,.7,.4,1); }
/* Kulorna går att dra i (eller trycka på). touch-action: none så att sidan inte scrollar när man drar. */
.soroban .bead { cursor: grab; touch-action: none; }
.soroban .bead:active { cursor: grabbing; }
.soroban .bead:hover path:first-child { filter: brightness(1.08); }
.actions { display: flex; justify-content: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

.side { display: flex; flex-direction: column; gap: 12px; }
.maskot-wrap { position: relative; display: flex; justify-content: center; }
.maskot { width: 130px; transform-origin: 50% 95%; }
.maskot.bounce { animation: bounce .6s ease; }
.maskot.wobble { animation: wobble 1s ease; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-22px); } 60% { transform: translateY(0); } 75% { transform: translateY(-7px); } }
/* "Fall sju gånger, res dig åtta" – darumen tippar och reser sig igen */
@keyframes wobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-24deg); } 50% { transform: rotate(14deg); } 70% { transform: rotate(-7deg); } 85% { transform: rotate(3deg); } }

.log { display: flex; flex-direction: column; gap: 10px; }
.bubble {
  background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 12px 16px;
  font-size: 1.08rem; line-height: 1.45; animation: pop .25s ease;
  white-space: pre-line;   /* sensei skriver ett påstående per rad (radbryt i core/explain.py) */
}
.bubble.hint { background: var(--hint-bg); border-color: var(--hint-line); }
.bubble.tips { font-style: italic; }
/* En påminnelse om ett knep ur knephäftet: glödlampan och knepets namn (inte kursivt som tipsen) */
.bubble.knep-paminnelse { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.bubble.knep-paminnelse .glodlampa { width: 24px; }
/* Ett utrop med något mer ("Förra gången var …"): en vanlig bubbla där utropet står först, i hejaropets färg */
.bubble .utrop { display: block; color: var(--shu-dark); font-weight: 900; }
.stil-shonen .bubble .utrop { font-family: var(--rubrik); font-weight: 400; font-size: 1.1rem; }
/* Översättningen ropas inte: liten, i vanlig stil, under utropet */
.bubble .utrop-sv { display: block; margin-top: 2px; font: 500 .82rem/1.3 var(--font); color: var(--ink-soft); }
.bubble .utrop-mer { display: block; margin-top: 4px; }   /* senseins opåkallade tips: en tanke, inte en instruktion */
.bubble.good { background: var(--good-bg); border-color: var(--good-line); color: var(--good-ink); font-weight: 700; }
.bubble.cheer {
  background: var(--cheer-bg); border-color: var(--shu); border-width: 2px 2px 2px 8px;
  color: var(--shu-dark); font-weight: 900;
}
.bubble.explain { background: var(--explain-bg); border-color: var(--explain-line); }
.bubble.explain ol { margin: 8px 0 0; padding-left: 22px; }
.bubble.explain li { margin: 4px 0; }
.bubble .title { font-weight: 900; }
/* Pratscenen: spelarens avatar (vänster, närmast kulramen) och sensein (höger) står längst ner, som på
   startsidan, och pratar med varandra – från vänster till höger: avataren säger något, sensein svarar.
   Spelarens svar (.du) ligger till vänster med en spets ner mot avataren; senseins bubblor ligger till
   höger med en spets ner mot sensein. Äldre bubblor bleknar lite. */
.sensei-prat { display: flex; flex-direction: column; gap: 6px; }
.sensei-prat .log { gap: 16px; }
/* Figurerna stannar i bild även när en lång genomgång gör kolumnen hög. */
.prat-figurer {
  display: flex; justify-content: space-between; align-items: flex-end;
  position: sticky; bottom: 8px; padding: 0 4px; pointer-events: none;
}
/* Avataren är huvudpersonen och lite större; sensein är mindre (den ska inte vara i fokus).
   Raden är lika hög som sensein, så avataren sticker upp i det tomma utrymmet till vänster om
   senseins senaste bubbla – närmare sina egna pratbubblor. */
.sensei-prat .maskot { width: 96px; }
.prat-avatar { width: 168px; }
.prat-figurer { height: 106px; }
.sensei-prat .log { min-height: 64px; }   /* plats för avatarens huvud när ingen har sagt något än */
.log > .bubble:last-child:not(.du) { max-width: calc(100% - 172px); }
.log > .bubble.du:nth-last-child(2) { margin-bottom: 28px; }   /* plats för avatarens huvud under spelarens bubbla */
.prat-avatar { transform-origin: 50% 95%; }
/* "I rad"-räknaren vid avataren: dyker upp vid 3 i rad, studsar vid varje nytt rätt svar och blir
   varmare i färgen ju längre serien håller (data-niva 1–3). Bryts serien tonar den bara bort. */
.prat-avatar-wrap { position: relative; }
.rad-rakning {
  position: absolute; top: -4px; left: -14px; z-index: 2;   /* på avatarens yttre sida – aldrig över senseins bubblor */
  width: 66px; height: 66px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--rad-farg, #ee8a2a); color: #fff; border: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink); line-height: 1; transition: opacity .6s ease, transform .6s ease;
}
.rad-rakning[data-niva="2"] { --rad-farg: var(--shu); }
.rad-rakning[data-niva="3"] { --rad-farg: var(--gold); color: var(--ink); }
.rad-tal { font-size: 1.9rem; font-weight: 900; }
.rad-text { font-size: .78rem; font-weight: 900; margin-top: 1px; }
.rad-rakning.pop { animation: rad-pop .55s cubic-bezier(.2,.9,.3,1.4); }
@keyframes rad-pop { 0% { transform: scale(.4) rotate(-12deg); } 60% { transform: scale(1.25) rotate(6deg); } 100% { transform: none; } }
.rad-rakning.tonar { opacity: 0; transform: scale(.8); }
#avatar-effekter { inset: -40px -50px auto -20px; height: 90px; }
.prat-avatar.bounce { animation: bounce .6s ease; }
.prat-avatar.wobble { animation: wobble 1s ease; }
.log > .bubble { position: relative; align-self: flex-end; max-width: 88%; }
.log > .bubble.du {
  align-self: flex-start; background: var(--card); font-weight: 700; color: var(--ai-text, var(--ai));
}
.log > .bubble:not(:last-child) { opacity: .72; }
.log > .bubble:nth-last-child(n+5) { display: none; }   /* de fyra senaste räcker */
.log > .bubble::before {   /* spetsen ner mot den som pratar */
  content: ""; position: absolute; bottom: -9px; right: 34px; width: 16px; height: 16px;
  background: inherit; border: 0 solid; border-color: inherit; border-right-width: 2px; border-bottom-width: 2px;
  transform: rotate(45deg);
}
.log > .bubble.du::before { right: auto; left: 34px; }
/* Ett kort svar ("3") ger en liten bubbla: minsta bredd, så att spetsen ryms på den raka delen av kanten */
.log > .bubble { min-width: 84px; }
.log > .bubble.du { text-align: center; }
.stil-shonen .log > .bubble { min-width: 112px; }
.stil-shonen .log > .bubble::before { right: 46px; }
.stil-shonen .log > .bubble.du::before { right: auto; left: 46px; }
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Framstegsbana: figur som springer mot ett mål ---- */
.trail {
  --p: 0;                     /* 0–1, sätts från app.js */
  /* Storlekarna växer med skärmen, så att banan fyller en bred datorskärm. */
  --runner-w: clamp(76px, 8.5vw, 124px);
  --goal-w: clamp(62px, 6.5vw, 96px);
  --frame: clamp(46px, 4.2vw, 60px);  /* stämpelramarnas storlek */
  --path-y: 22px;             /* stigens mitt, räknat från banans underkant */
  --path-end: calc(var(--goal-w) / 2);  /* stigen slutar mitt i målet – dit springer löparen till sist */
  position: relative; margin: 0 0 12px;
  height: calc(var(--path-y) + var(--frame) / 2 + var(--runner-w) * .66 + 34px);  /* plats för hoppen */
}
/* Stigen går från första ramen (där löparen står i början) till målet. Ram i = fråga i;
   målet ligger ett steg efter sista ramen. */
.trail-path {
  position: absolute; left: calc(var(--runner-w) / 2); right: var(--path-end);
  bottom: calc(var(--path-y) - 3px); height: 6px;
  border-radius: 3px; background: repeating-linear-gradient(90deg, var(--trail) 0 14px, transparent 14px 22px);
}
.trail-steps { position: absolute; inset: 0; }
.trail-steps > * { position: absolute; top: 50%; transform: translate(-50%, -50%); }
/* En ram per fråga, som rutorna på ett stämpelkort. Tom ram = ingen stämpel (än). */
.ram {
  width: var(--frame); height: var(--frame); border-radius: 50%;
  border: 2px dashed var(--trail); background: var(--card); color: var(--shu);
}
/* Samma stämpel, men på egen hand blir den tydlig och rak, med ledtråd blek och på snedden.
   --vrid och --flytt sätts per ram i app.js. */
.ram .stampel {
  position: absolute; inset: 1px; opacity: var(--blek, 1);
  transform: translate(var(--flytt, 0px), calc(var(--flytt, 0px) / -2)) rotate(var(--vrid, 0deg));
}
.ram .stampel[data-sort="ledtrad"] { --blek: .4; }
.ram .stampel.ny { animation: stampla .45s cubic-bezier(.2,.8,.3,1.3) both; }  /* stämpla, sen springa vidare */
@keyframes stampla {
  0% { opacity: 0; transform: translate(var(--flytt, 0px), calc(var(--flytt, 0px) / -2)) rotate(var(--vrid, 0deg)) scale(1.9); }
  60% { opacity: var(--blek, 1); transform: translate(var(--flytt, 0px), calc(var(--flytt, 0px) / -2)) rotate(var(--vrid, 0deg)) scale(.9); }
  100% { opacity: var(--blek, 1); transform: translate(var(--flytt, 0px), calc(var(--flytt, 0px) / -2)) rotate(var(--vrid, 0deg)) scale(1); }
}
/* Kedjan: stämplar tagna i rad på egen hand (minst 3) får guldkant och binds ihop med guldlänkar. */
.trail-kedja { position: absolute; inset: 0; }
.kedja-lank {
  position: absolute; top: 50%; height: 7px; transform: translateY(-50%);
  background: var(--gold); border: 2px solid var(--ink); border-radius: 4px; transform-origin: left center;
}
.kedja-lank.ny { animation: lank .45s ease .35s both; }
@keyframes lank { from { transform: translateY(-50%) scaleX(0); } to { transform: translateY(-50%) scaleX(1); } }
.ram.kedja { border: 3px solid var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent); }
/* ※ = här väntar en "Visste du att …?" (settings.FACT_AT) */
.ram.fact::after {
  --badge: max(18px, calc(var(--frame) * .4));
  content: "※"; position: absolute; top: calc(var(--badge) * -.55); right: calc(var(--badge) * -.6);
  width: var(--badge); height: var(--badge);
  display: grid; place-items: center; font-size: calc(var(--badge) * .6); font-weight: 900; line-height: 1;
  color: var(--shu); background: var(--card); border: 2px solid var(--shu); border-radius: 50%;
}
.ram.fact:not(.passerad)::after { animation: pulse 2s ease-in-out infinite; }
.ram.fact.passerad::after { background: var(--shu); color: var(--on-accent); }
@keyframes pulse { 50% { transform: scale(1.18); } }
.trail-runner {
  position: absolute; bottom: calc(var(--path-y) + var(--frame) / 2 - 6px); width: var(--runner-w);
  left: calc((100% - var(--runner-w) / 2 - var(--path-end)) * var(--p));
  transition: left .9s cubic-bezier(.3,.7,.4,1) .35s;   /* väntar tills stämpeln landat */
}
.trail-runner.hop { animation: hop .9s ease .35s; }
.trail-runner.hop-stor { animation: hop-stor 1.1s ease .35s; }
/* Räls (t.ex. för shinkansen): två skenor med sliprar emellan */
.trail[data-bana="rals"] .trail-path {
  height: 12px; bottom: calc(var(--path-y) - 6px); border-radius: 0;
  background:
    linear-gradient(var(--ink-soft), var(--ink-soft)) top / 100% 2.5px no-repeat,
    linear-gradient(var(--ink-soft), var(--ink-soft)) bottom / 100% 2.5px no-repeat,
    repeating-linear-gradient(90deg, var(--trail) 0 5px, transparent 5px 13px);
}
/* Fordon hoppar inte: de rullar iväg, lutar lite och bromsar in vid nästa station.
   På egen hand: en snabb rusning med ett litet gupp. */
.trail[data-rorelse="rulla"] .trail-runner { transform-origin: 50% 100%; }
/* Fordon är långa och smala – rita dem bredare, centrerade över samma punkt */
.trail[data-rorelse="rulla"] .trail-runner svg { width: 160%; margin-left: -30%; }
/* … och banan blir lika mycket smalare på båda sidor, så att tåget inte sticker ut utanför den
   (och utanför fönstret) vid start och slutstation. */
.trail[data-rorelse="rulla"] {
  /* vid målet står löparen centrerad över målet, så den sticker ut lite mer åt höger när den är bredare än målet */
  margin-left: calc(var(--runner-w) * .3);
  margin-right: calc(var(--runner-w) * .3 + max(0px, (var(--runner-w) - var(--goal-w)) / 2));
}
.trail[data-rorelse="rulla"] .trail-runner.hop { animation: rulla .9s ease .35s; }
.trail[data-rorelse="rulla"] .trail-runner.hop-stor { animation: rusa 1s ease .35s; }
.trail[data-rorelse="rulla"].arrived .trail-runner { animation: gupp .4s ease 3; }
@keyframes rulla { 0%,100% { transform: none; } 12% { transform: translateX(-3px); } 70% { transform: rotate(-1.5deg); } 88% { transform: rotate(1.2deg) translateX(2px); } }
@keyframes rusa { 0%,100% { transform: none; } 10% { transform: translateX(-5px) scaleX(.96); } 45% { transform: translateY(-7px) rotate(-2deg) scaleX(1.05); } 70% { transform: none; } 86% { transform: rotate(1.5deg) translateX(3px); } }
@keyframes gupp { 0%,100% { transform: none; } 50% { transform: translateY(-6px); } }

/* Bältets ändar fladdrar när avataren springer */
.trail-runner .balte-svans, .reward .balte-svans {
  transform-box: view-box; transform-origin: 45px 22px;
  animation: fladdra .35s ease-in-out infinite alternate;
}
@keyframes fladdra { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }
.trail-goal { position: absolute; right: 0; bottom: 10px; width: var(--goal-w); }
.trail-count { position: absolute; left: 0; top: 0; font-weight: 900; color: var(--ink-soft); }
.trail.arrived .trail-runner { animation: cheer .5s ease 3; }
.trail.arrived .trail-goal { animation: wiggle .5s ease 3; }
/* Bollen som mål (resa med boll: true, t.ex. shibans baseboll). SVG:n är uppbyggd som i tools/baseboll.py:
   .boll-skugga, .boll (studsar) och .boll-snurr (rullar). Ett nytt pass: bollen kommer studsande in från vänster
   (samma håll som löparen), studsar lägre och lägre bort till målet och rullar till sin plats, och löparen kommer
   springande efter en liten stund (.kast, --kast = avståndet från fönstrets vänsterkant, mäts i app.js). Under passet: ett litet skutt då och då.
   Framme: bollen studsar högt och snurrar när löparen kommer, som när man kastar en boll åt en hund. */
.trail[data-mal="boll"] .trail-goal svg, .bana-mal.studsar svg { overflow: visible; }
.trail[data-mal="boll"] .trail-goal .boll, .bana-mal.studsar .boll { animation: boll-studsa 3.2s ease-in-out infinite; }
.trail[data-mal="boll"] .trail-goal .boll-skugga, .bana-mal.studsar .boll-skugga { animation: boll-skugga 3.2s ease-in-out infinite; }
.trail[data-mal="boll"] .trail-goal.kast { animation: boll-kast 2.2s linear both; }
/* … och löparen kommer springande efter bollen, en liten stund senare */
.trail[data-mal="boll"] .trail-runner.intag, .trail[data-mal="boll"] .trail-runner.intag :is(.springa-a, .springa-b) { animation-delay: .7s; }
.trail[data-mal="boll"] .trail-goal.kast .boll-snurr { animation: boll-rulla 2.2s both; }
.trail[data-mal="boll"] .trail-goal.kast .boll { animation: none; }
.trail[data-mal="boll"] .trail-goal.kast .boll-skugga { animation: boll-skugga-in 2.2s both; }
.trail[data-mal="boll"].arrived .trail-goal { animation: none; }
.trail[data-mal="boll"].arrived .trail-goal .boll, .bana-mal.studsar.framme .boll {
  animation: boll-framme 1.2s cubic-bezier(.3, .6, .4, 1) 1.2s both, boll-studsa 3.2s ease-in-out 3s infinite;
}
.bana-mal.studsar.framme .boll { animation-delay: 0s, 1.8s; }
@keyframes boll-studsa {
  0%, 70%, 100% { transform: none; } 74% { transform: scale(1.08, .9); } 82% { transform: translateY(-12px) scale(.95, 1.06); }
  90% { transform: scale(1.06, .92); } 94% { transform: translateY(-3px); }
}
@keyframes boll-skugga { 0%, 70%, 100% { transform: none; opacity: 1; } 82% { transform: scale(.7); opacity: .5; } }
@keyframes boll-kast {
  0% { transform: translate(var(--kast, -400px), -30px); }
  16% { transform: translate(calc(var(--kast, -400px) * .62), 0); }
  30% { transform: translate(calc(var(--kast, -400px) * .4), -34px); }
  44% { transform: translate(calc(var(--kast, -400px) * .22), 0); }
  55% { transform: translate(calc(var(--kast, -400px) * .12), -18px); }
  66% { transform: translate(calc(var(--kast, -400px) * .05), 0); }
  74% { transform: translate(calc(var(--kast, -400px) * .025), -7px); }
  82% { transform: translate(calc(var(--kast, -400px) * .01), 0); }
  88% { transform: translateY(-2px); }
  94%, 100% { transform: none; }
}
@keyframes boll-rulla { 0% { transform: rotate(-1440deg); animation-timing-function: ease-out; } 100% { transform: none; } }
@keyframes boll-skugga-in { 0%, 80% { opacity: 0; } 100% { opacity: 1; } }
@keyframes boll-framme {
  0% { transform: none; } 10% { transform: scale(1.12, .86); } 35% { transform: translateY(-40px) rotate(160deg); }
  60% { transform: translateY(0) rotate(300deg) scale(1.1, .88); } 78% { transform: translateY(-14px) rotate(340deg); }
  92% { transform: scale(1.04, .95) rotate(360deg); } 100% { transform: rotate(360deg); }
}
/* Hoppen börjar med en liten nigning – avataren stämplar – och skuttar sedan vidare. */
@keyframes hop { 0%,100% { transform: translateY(0); } 10% { transform: translateY(3px) scaleY(.93); } 30% { transform: translateY(-16px) rotate(-6deg); } 55% { transform: translateY(0); } 78% { transform: translateY(-9px) rotate(-3deg); } }
@keyframes hop-stor { 0%,100% { transform: translateY(0); } 10% { transform: translateY(4px) scaleY(.9); } 32% { transform: translateY(-34px) rotate(-12deg) scale(1.08); } 56% { transform: translateY(0); } 76% { transform: translateY(-14px) rotate(-5deg); } 90% { transform: translateY(0) scaleY(.96); } }
@keyframes cheer { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 70% { transform: rotate(10deg); } }
/* Flyga (Kikai, rorelse: "flyga" i utseende.js): på banan svävar Kikai alltid på sin jet (.jet i fötterna) och
   flyter sakta upp och ner några punkter ovanför skuggan, som står kvar på marken (.mark-skugga, krymper lite när
   Kikai är högre upp). Mellan stationerna tar Kikai sats en stund och flyger i en båge (övergången väntar 0,6 s),
   och bromsar in med en liten gungning. 1,6 s. */
.figur .jet { visibility: hidden; }
.trail[data-rorelse="flyga"] .trail-runner { transition-delay: .6s; transform-origin: 50% 100%; }
.trail[data-rorelse="flyga"] .trail-runner svg { width: 82%; margin-left: 9%; }   /* stående robot: högre än katten */
.trail[data-rorelse="flyga"] .trail-runner:is(.hop, .hop-stor) { animation: flyga 1.6s ease-in-out; }
.trail[data-rorelse="flyga"] .trail-runner .jet { visibility: visible; }
.trail[data-rorelse="flyga"] .trail-runner .jet > * { animation: jet-fladder .1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
.trail[data-rorelse="flyga"] .trail-runner svg > :not(.mark-skugga, defs) { animation: kikai-svava 1.8s ease-in-out infinite alternate; }
.trail[data-rorelse="flyga"] .trail-runner .mark-skugga {
  animation: kikai-svava-skugga 1.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%;
}
/* translate/scale (inte transform), så att delar som redan har ett transform-attribut i SVG:n inte flyttas fel */
@keyframes kikai-svava { from { translate: 0 -3px; } to { translate: 0 -7px; } }
@keyframes kikai-svava-skugga { from { scale: .9 1; opacity: .9; } to { scale: .75 1; opacity: .6; } }
@keyframes flyga {
  0%, 30% { transform: none; }
  37% { transform: translateY(3px); }
  64% { transform: translateY(-34px) rotate(5deg); }
  80% { transform: translateY(-16px) rotate(3deg); }
  92% { transform: translateY(0) rotate(-2deg); }
  100% { transform: none; }
}
@keyframes jet-fladder { to { transform: scaleY(.75); } }
/* Nytt pass (resetPlayScreen/runnerEntrance i app.js): löparen flyttas direkt till start, kommer sedan in
   från fönstrets vänstra kant (--intag mäts i app.js) och skuttar förväntansfullt vid startstationen. */
.trail.nytt-pass .trail-runner { transition: none; }
.trail .trail-runner.intag { animation: intag 1.6s ease-out both; }
@keyframes intag {
  0% { transform: translateX(var(--intag)); }
  62% { transform: translateX(0); }
  70% { transform: translateY(2px) scaleY(.94); }
  80% { transform: translateY(-20px) rotate(-6deg); }
  88% { transform: translateY(0); }
  94% { transform: translateY(-9px) rotate(-3deg); }
  100% { transform: none; }
}
.trail-runner.intag .springa-a { animation: springa-a .18s steps(1, end) 0s 6; }
.trail-runner.intag .springa-b { animation: springa-b .18s steps(1, end) 0s 6; }
/* ---- Perfekt pass (celebratePerfect i app.js) ----
   Stämplarna blir guld en i taget (--guld-delay per ram), avataren springer ett segervarv och en stor
   stämpel たいへんよくできました slås ner mitt över banan. */
.trail.perfekt { z-index: 3; }            /* stämpeln får gå ut över frågekortet */
.trail.perfekt .ram { transition: color .3s ease var(--guld-delay, 1s), border-color .3s ease var(--guld-delay, 1s); }
.trail.perfekt .ram { color: var(--gold); border-color: var(--gold); }
.trail.perfekt .ram .stampel { animation: guldglans .5s ease var(--guld-delay, 1s) both; }
@keyframes guldglans { 50% { filter: drop-shadow(0 0 6px var(--gold)) brightness(1.25); scale: 1.18; } }
.trail.arrived .trail-runner.segervarv { animation: segervarv 3.2s cubic-bezier(.45,0,.4,1) both; }
/* Ut genom fönstrets högra kant (--varv-ut) och in genom den vänstra (--varv-in); avstånden mäts i app.js. */
@keyframes segervarv {
  0% { transform: none; }
  24% { transform: translateX(var(--varv-ut)) translateY(-8px); }
  24.01% { transform: translateX(var(--varv-in)); }
  60% { transform: translateX(calc(var(--varv-in) * .5)) translateY(-12px); }
  72% { transform: translateX(calc(var(--varv-in) * .3)); }
  100% { transform: none; }
}
.trail-runner.segervarv .springa-a { animation: springa-a .18s steps(1, end) 0s 18; }
.trail-runner.segervarv .springa-b { animation: springa-b .18s steps(1, end) 0s 18; }
.perfekt-stampel {
  position: absolute; left: 50%; top: 50%; width: clamp(150px, 16vw, 200px); z-index: 5;
  display: grid; place-items: center; color: color-mix(in srgb, var(--gold) 82%, var(--ink)); pointer-events: none;
  transform: translate(-50%, -55%) rotate(-10deg);
  animation: perfekt-stampla .55s cubic-bezier(.2,.8,.3,1.25) both;
}
.perfekt-stampel svg { width: 100%; display: block; grid-area: 1 / 1; }
.perfekt-yta { fill: color-mix(in srgb, var(--gold) 14%, var(--card)); }
.perfekt-kant { fill: none; stroke: currentColor; stroke-width: 4; stroke-linejoin: round; }
.perfekt-ring { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 1.5 2.2; }
.perfekt-text {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; line-height: 1.1;
  font-weight: 900; color: currentColor; font-size: clamp(1.05rem, 1.35vw, 1.4rem); letter-spacing: .02em;
}
.perfekt-text span:first-child { font-size: .85em; }
@keyframes perfekt-stampla {
  0% { opacity: 0; transform: translate(-50%, -55%) rotate(-24deg) scale(2.6); }
  55% { opacity: 1; transform: translate(-50%, -55%) rotate(-10deg) scale(.9); }
  75% { transform: translate(-50%, -55%) rotate(-10deg) scale(1.05); }
  100% { opacity: 1; transform: translate(-50%, -55%) rotate(-10deg) scale(1); }
}
.trail.perfekt:has(.perfekt-stampel) { animation: dunk .3s ease .25s; }
@keyframes dunk { 40% { transform: translateY(3px); } }
/* Hanabi (hanabi.js): himlen mörknar till natt bakom banan, fyrverkeriet ritas överst.
   Banan (z-index 3) ligger mellan natten och fyrverkeriet, så att stämpeln och segervarvet syns. */
.hanabi-natt {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 110%, rgba(40, 30, 80, .82), rgba(8, 10, 32, .86) 60%);
  animation: natt .8s ease both;
}
.hanabi-natt.gryning { animation: gryning .9s ease forwards; }
@keyframes natt { from { opacity: 0; } }
@keyframes gryning { to { opacity: 0; } }
.hanabi { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 4; pointer-events: none; }
/* Smal skärm: mindre ramar och figurer så att alla stationer får plats */
@media (max-width: 720px) { .trail { --frame: 34px; } }
@media (max-width: 520px) { .trail { --frame: 26px; --runner-w: 62px; --goal-w: 50px; } }

.reward { display: flex; align-items: flex-end; gap: 4px; flex: none; }
.reward .figur { width: 84px; }
.reward .figur.goal { width: 64px; }
.reward .maskot { width: 120px; }
.actions.left { justify-content: flex-start; }

/* ---- Sifferknappar (visas på pekskärmar) ---- */
.keypad {
  display: none; grid-template-columns: repeat(3, 1fr); gap: 10px;
  max-width: 420px; margin: 20px auto 0;
}
.keypad button {
  border-radius: 16px; background: var(--card); color: var(--ink); border: 2px solid var(--line);
  font-size: 1.7rem; font-weight: 900; padding: 14px 0; box-shadow: 0 3px 0 var(--paper-2);
}
@media (pointer: coarse) { .keypad { display: grid; } }

/* ---- Sammanfattning ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 22px; }
.tile { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 16px; }
.tile .num { font-size: 2.2rem; font-weight: 900; color: var(--ai-text, var(--ai)); }
.tile .lbl { color: var(--ink-soft); font-weight: 700; }
.summary-list { margin-top: 18px; }
.summary-list p { margin: 4px 0; font-size: 1.08rem; }

/* ---- Visste du att ---- */
.overlay {
  position: fixed; inset: 0; background: var(--overlay);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10;
}
.fact-card {
  background: var(--card); border-radius: 22px; padding: 26px 26px 22px; max-width: 520px;
  border-top: 8px solid var(--shu); box-shadow: 0 20px 60px var(--shadow); animation: pop .3s ease;
}
.fact-mark { font-size: 2rem; color: var(--shu); line-height: 1; }
.fact-card h3 { margin: 6px 0 8px; font-size: 1.3rem; }
.fact-card p { font-size: 1.15rem; line-height: 1.55; margin: 0 0 18px; }

@media (max-width: 720px) {
  .play { grid-template-columns: 1fr; }
  .maskot { width: 96px; }
  /* På smal skärm pratar sensein ovanför frågan, så att ledtråden syns utan att man scrollar.
     Bara de två senaste bubblorna visas. */
  .sensei-prat { order: -1; }
  .sensei-prat .maskot { width: 64px; }
  .prat-avatar { width: 106px; }
  .rad-rakning { width: 50px; height: 50px; left: -8px; }
  .rad-tal { font-size: 1.4rem; } .rad-text { font-size: .62rem; }
  .prat-figurer { height: 70px; }
  .sensei-prat .log { min-height: 38px; }
  .log > .bubble:last-child:not(.du) { max-width: calc(100% - 114px); }
  .log > .bubble:nth-last-child(n+3) { display: none; }
  .log > .bubble::before { right: 22px; }
  .log > .bubble.du::before { left: 22px; }
  .bubble { padding: 10px 14px; font-size: 1rem; }
  .intro { flex-direction: column; align-items: flex-start; }
  .brand { position: static; transform: none; }   /* smal skärm: loggan till vänster, så att spelarknappen får plats */
  .brand .logga { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- Figurer (SVG som läses in i sidan, så att ritstil och färgschema kan styra dem) ---- */
.figur svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Darumans miner: bara den valda syns */
.maskot .min { display: none; }
.maskot[data-min="lugn"] .min-lugn, .maskot[data-min="glad"] .min-glad,
.maskot[data-min="oj"] .min-oj, .maskot[data-min="wow"] .min-wow { display: inline; }
/* Zen master svävar: flyter sakta upp och ner, och skuggan krymper och bleknar när han är högre upp.
   Vid wow målas en ensō (zencirkeln) fram bakom honom. */
.figur .svava { animation: svava 4s ease-in-out infinite alternate; }
.figur .svava-skugga { animation: svava-skugga 4s ease-in-out infinite alternate; }
@keyframes svava { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes svava-skugga { from { transform: scale(1); opacity: 1; } to { transform: scale(.8); opacity: .6; } }
.maskot[data-min="wow"] .enso { animation: enso 1.2s ease-out both; transform-origin: 60px 50px; }
@keyframes enso { from { opacity: 0; transform: rotate(-40deg) scale(.85); } }

/* ---- Ritstil: Lugn – platt och enkelt ---- */
.stil-lugn .figur .skugga, .stil-lugn .figur .glans,
.stil-lugn .soroban .glans { display: none; }
.stil-lugn .figur .linje { stroke-width: 2; }
.stil-lugn .figur .detalj { stroke-width: 1.2; }
.stil-lugn .soroban .linje { stroke-width: 0; }

/* ---- Ritstil: Shōnen – som en sida i en actionmanga ----
   Figurerna: tuschlinjer, cel-skuggor och raster (figurer/shonen/). Sidan: rutorna är serierutor (koma) med
   tjock tuschram, raka hörn och raster (screentone) som tonar in i ett hörn, och en del rutor sitter lite snett
   som i en livlig sidlayout. Pratbubblorna är runda med tuschkant, hejaropen blir taggiga utropsbubblor och
   "Visste du att" en berättarruta med svart etikett. Rubriker och ljudord i Dela Gothic One (tjock, som text
   i manga), och Hajime-knappen har koncentrationslinjer (集中線) bakom sig. */
.stil-shonen {
  --tusch: var(--ink);
  --raster: color-mix(in srgb, var(--ink) 30%, transparent);
  --rubrik: "Dela Gothic One", var(--font);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.3px); background-size: 7px 7px;
}
.stil-shonen .figur .linje { stroke-width: 3.8; }
.stil-shonen .figur .detalj { stroke-width: 2.4; }
.stil-shonen .soroban .linje { stroke-width: 1.8; }

/* Serierutor: tuschram, raka hörn och raster som tonar in nere till höger */
.stil-shonen .card, .stil-shonen .ovat, .stil-shonen .tile, .stil-shonen .summary-fact {
  border: 3px solid var(--tusch); border-radius: 2px; box-shadow: none;
  background: linear-gradient(145deg, var(--card) 60%, transparent 94%),
              radial-gradient(var(--raster) 1.1px, transparent 1.4px) 0 0 / 6px 6px, var(--card);
}
.stil-shonen .belt-card { transform: rotate(-.7deg); }
/* Handritat: en andra, tunnare tuschlinje som inte riktigt följer ramen (som när tecknaren drog den två gånger),
   och spelarkortet lite snett, som en serieruta som klistrats in för hand */
.stil-shonen .spelarkort { transform: rotate(-.35deg); }
/* På alla rutor: startsidan, passet (frågekortet), inställningarna, sammanfattningen och rutorna ovanpå sidan.
   Linjen hamnar lite olika för olika sorters rutor, så att det inte ser ut som ett mönster. */
.stil-shonen :is(.card, .ovat, .pagaende, .tile, .summary-fact, .fact-card) { position: relative; }
.stil-shonen :is(.card, .ovat, .pagaende, .tile, .summary-fact, .fact-card)::after {
  content: ""; position: absolute; inset: -6px -3px -3px -7px; pointer-events: none;
  border: 1.4px solid var(--tusch); border-radius: 3px 1px 4px 2px; opacity: .45; transform: rotate(.7deg);
}
.stil-shonen .question-card::after { inset: -3px -7px -5px -4px; transform: rotate(.35deg); }
.stil-shonen .fact-card::after { inset: -4px -6px -8px -3px; transform: rotate(-.6deg); opacity: .5; }
.stil-shonen .tile::after { inset: -5px -4px -3px -6px; transform: rotate(-1deg); }
.stil-shonen .tile:nth-child(even)::after { inset: -3px -6px -5px -3px; transform: rotate(1.1deg); }
.stil-shonen .summary-fact::after { inset: -4px -2px -5px -5px; transform: rotate(-.5deg); }
.stil-shonen .utseende-preview::after { inset: -5px -6px -3px -3px; transform: rotate(-.8deg); }
.stil-shonen .pagaende { border: 2.5px solid var(--tusch); border-radius: 2px; transform: rotate(-.5deg); }
.stil-shonen .spelarkort-namn { display: inline-block; transform: rotate(-1.5deg); }
.stil-shonen .ovat { transform: rotate(.6deg); }
.stil-shonen .tile:nth-child(odd) { transform: rotate(-.8deg); }
.stil-shonen .tile:nth-child(even) { transform: rotate(.6deg); }

/* Pratbubblor: runda med tuschkant (långa genomgångar lite fyrkantigare så att texten får plats) */
.stil-shonen .bubble, .stil-shonen .sensei-bubbla { border: 2.5px solid var(--tusch); border-radius: 40px / 30px; box-shadow: none; padding: 12px 22px; }
.stil-shonen .bubble.explain { border-radius: 22px; }
.stil-shonen .log > .bubble::before { border-right-width: 2.5px; border-bottom-width: 2.5px; }
.stil-shonen .sensei-bubbla { --kant: var(--tusch); --kw: 2.5px; }
/* Handritat: spetsen lite sned och böjd, som ett snabbt penndrag */
.stil-shonen .sensei-bubbla::before, .stil-shonen .sensei-bubbla::after { clip-path: polygon(100% 0, 0 62%, 100% 100%); width: 20px; }
.stil-shonen .sensei-bubbla::before { left: calc(-20px + var(--kw)); }
.stil-shonen .sensei-bubbla::after { left: calc(-20px + var(--kw) * 2.8); }
/* Hejarop: en taggig utropsbubbla (två lager med samma taggiga form: tusch och papper) */
.stil-shonen .log > .bubble.cheer {
  isolation: isolate; background: transparent; border: 0; padding: 20px 15% 34px; margin: 6px 0; text-align: center;
  color: var(--shu-dark); font-family: var(--rubrik); font-weight: 400; font-size: 1.15rem;
}
.stil-shonen .log > .bubble.cheer::before, .stil-shonen .log > .bubble.cheer::after {
  content: ""; position: absolute; inset: 0; width: auto; height: auto; border: 0; transform: none;
  /* en taggig utropsbubbla (oval) med en lång spets ner mot sensein; bara korta utrop hamnar här (app.js, addCheer) */
  clip-path: polygon(99.5% 49.1%, 89.8% 53.1%, 95.5% 60.9%, 86.6% 63.2%, 87.8% 71.2%, 79.1% 71.9%, 77.0% 79.2%, 84.0% 100.0%, 67.4% 75.9%, 64.1% 84.3%, 56.1% 79.6%, 50.0% 86.0%, 43.7% 80.5%, 35.9% 84.3%, 32.8% 75.5%, 23.0% 79.2%, 20.5% 72.2%, 12.2% 71.2%, 14.2% 62.8%, 4.5% 60.9%, 7.8% 53.7%, 0.5% 49.1%, 8.0% 43.0%, 0.5% 36.9%, 7.3% 32.2%, 4.5% 25.1%, 13.8% 23.0%, 12.2% 14.8%, 22.8% 16.0%, 23.0% 6.8%, 31.7% 8.6%, 35.9% 1.7%, 43.8% 6.0%, 50.0% 0.0%, 56.1% 6.4%, 64.1% 1.7%, 68.5% 8.2%, 77.0% 6.8%, 77.5% 15.7%, 87.8% 14.8%, 87.9% 22.1%, 95.5% 25.1%, 90.8% 32.7%, 99.5% 36.9%, 94.0% 43.0%);
}
.stil-shonen .log > .bubble.cheer::before { z-index: -2; background: var(--tusch); bottom: 0; right: 0; }
.stil-shonen .log > .bubble.cheer::after { z-index: -1; inset: 3px; background: var(--cheer-bg); }

/* Berättarrutan ("Visste du att" och andra rutor ovanpå sidan) med svart etikett */
.stil-shonen .fact-card {
  border: 3px solid var(--tusch); border-radius: 2px; box-shadow: 8px 8px 0 var(--tusch);
  background: linear-gradient(145deg, var(--card) 62%, transparent 96%),
              radial-gradient(var(--raster) 1.1px, transparent 1.4px) 0 0 / 6px 6px, var(--card);
}
.stil-shonen .fact-card h3 {
  display: inline-block; margin: 2px 0 12px; padding: 4px 14px 5px; transform: skewX(-10deg);
  background: var(--tusch); color: var(--card); font-family: var(--rubrik); font-weight: 400; font-size: 1.15rem;
}

/* Rubriker och ljudord som text i manga */
.stil-shonen h1, .stil-shonen h2, .stil-shonen .belt-title, .stil-shonen .ljudord { font-family: var(--rubrik); font-weight: 400; }
.stil-shonen h2 { color: var(--ink); letter-spacing: .02em; }
.stil-shonen h2 .passval-tips { font-family: var(--font); }
.stil-shonen h1 { letter-spacing: .01em; text-shadow: 2px 2px 0 var(--paper-2); }
.stil-shonen .passval-grupp h3 { color: var(--ink); }

/* Knappar: raka, tuschkant; vald knapp får raster */
.stil-shonen .tile, .stil-shonen .category, .stil-shonen .chip, .stil-shonen .val { border-color: var(--tusch); }
.stil-shonen .val, .stil-shonen .chip, .stil-shonen .category { border-width: 2.5px; border-radius: 3px; }
.stil-shonen .val[aria-pressed="true"], .stil-shonen .chip[aria-pressed="true"] {
  border-color: var(--tusch); box-shadow: 3px 3px 0 var(--tusch);
  background: radial-gradient(color-mix(in srgb, var(--shu) 30%, transparent) 1.2px, transparent 1.5px) 0 0 / 5px 5px, var(--chip-active);
}
.stil-shonen .primary { border: 3px solid var(--tusch); border-radius: 4px; box-shadow: 4px 4px 0 var(--tusch); }
.stil-shonen .primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tusch); }
.stil-shonen .ghost { border-width: 2.5px; border-radius: 4px; }
/* Hajime! med koncentrationslinjer (集中線) bakom */
.stil-shonen .hajime { position: relative; }
.stil-shonen .hajime::before {
  content: ""; position: absolute; inset: -38px -60px; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 3deg, var(--tusch) 0 1deg, transparent 1deg 7deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 66%, #000 76%, transparent 100%);
  mask-image: radial-gradient(closest-side, transparent 66%, #000 76%, transparent 100%);
  opacity: .5;
}

/* Fartlinjer bakom löparen när den springer (manga) */
.stil-shonen .trail-runner.hop::before, .stil-shonen .trail-runner.hop-stor::before {
  content: ""; position: absolute; right: 70%; top: 28%; width: 70px; height: 44%;
  background: repeating-linear-gradient(180deg, var(--ink) 0 2px, transparent 2px 7px);
  opacity: .55; animation: fartlinjer .9s ease forwards;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000);
}
@keyframes fartlinjer { from { opacity: .7; transform: translateX(-10px); } to { opacity: 0; transform: translateX(-30px); } }

/* Ljudord och glitter (manga). Läggs till av app.js och tas bort efter animationen. */
.effekter { position: absolute; inset: -30px -40px; pointer-events: none; }
.ljudord {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, 0) rotate(-8deg);
  font-size: 1.8rem; font-weight: 900; color: var(--shu); white-space: nowrap;
  -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink);
  animation: ljudord 1.4s ease forwards;
}
.ljudord.lugn { color: var(--ai-light); }
.ljudord.stor { font-size: 3rem; }
/* Betydelsen under ljudordet: liten, lugn och lätt att läsa i alla ritstilar */
.ljudord .ljudord-sv {
  display: block; width: max-content; margin: .15rem auto 0; padding: .05rem .5rem; border-radius: 999px;
  font: 700 .85rem/1.3 var(--font); letter-spacing: 0; color: var(--ink); background: var(--card);
  -webkit-text-stroke: 0; text-shadow: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
/* Japanska ord med förklaring i en rubrik ("Otsukaresama!") */
h1 .betyder { display: block; font: 400 1rem/1.3 var(--font); color: var(--ink-soft); margin-top: .2rem; }
@keyframes ljudord {
  0% { opacity: 0; transform: translate(-50%, 10px) rotate(-8deg) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -6px) rotate(-8deg) scale(1.12); }
  70% { opacity: 1; transform: translate(-50%, -10px) rotate(-8deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -24px) rotate(-8deg) scale(1); }
}
.glitter { position: absolute; color: var(--gold); font-size: 1.4rem; animation: glitter 1s ease forwards; }
@keyframes glitter { 0% { opacity: 0; transform: scale(.3) rotate(0); } 40% { opacity: 1; transform: scale(1.2) rotate(40deg); } 100% { opacity: 0; transform: scale(.6) rotate(90deg); } }
.trail .effekter { inset: -20px 0 auto auto; width: 220px; height: 80px; }

/* ---- Utseende-panelen på startsidan ---- */
.utseende { margin-top: 12px; }
/* Inställningssidan: tillbaka-knappen uppe vid rubriken (valen sparas direkt, ingen spara-knapp) */
.installningar-topp { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.installningar-topp h1 { margin: 0; }
.tillbaka { padding: 8px 16px; }
.utseende summary { cursor: pointer; font-weight: 700; color: var(--ink-soft); font-size: 1.15rem; }
.utseende-val { font-weight: 500; font-size: .95rem; margin-left: 6px; }
.utseende-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; margin-top: 12px; align-items: start; }
.utseende-group h3 { margin: 12px 0 8px; font-size: 1rem; color: var(--ink-soft); }
.utseende-group .chip small { display: block; font-weight: 500; font-size: .8rem; color: var(--ink-soft); }
.utseende-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* Förhandsvisningen: avataren är huvudperson, sensein mindre bredvid, banan som en liten rad under */
.preview-scen { display: flex; align-items: flex-end; gap: 4px; }
.preview-avatar { width: 176px; }
.maskot-preview { width: 84px; }
.preview-resa { display: flex; align-items: flex-end; gap: 6px; }
.preview-resa .figur { width: 58px; }
.preview-resa .preview-mal { width: 44px; }
.preview-pil { font-size: 1.5rem; font-weight: 900; color: var(--ink-soft); }
@media (max-width: 720px) { .utseende-body { grid-template-columns: 1fr; } }

/* ---- Bälten ---- */
.belt-icon { display: inline-block; width: 64px; flex: none; vertical-align: middle; }
.belt-icon svg { display: block; width: 100%; height: auto; }
.belt-icon.small { width: 40px; padding: 0; }   /* inte knapp-klassen .small:s utfyllnad */
.belt-icon.big { width: 160px; display: block; margin: 0 auto 6px; }
.stil-lugn .belt-icon .glans { display: none; }
.belt-card { display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin-top: 14px; max-width: 520px; }
.belt-card > div { flex: 1; }
.belt-title { font-weight: 900; font-size: 1.1rem; }
.belt-bar { height: 10px; border-radius: 5px; background: var(--paper-2); margin: 6px 0 4px; overflow: hidden; }
.belt-bar span { display: block; height: 100%; background: var(--shu); border-radius: 5px; transition: width .6s ease; }
.belt-next { color: var(--ink-soft); font-size: .95rem; }
.ceremony-card { position: relative; text-align: center; }
.ceremony-card h3 { font-size: 1.4rem; }
.ceremony-card h3 .utrop { display: block; font-size: 1.8rem; color: var(--shu-dark); }
.ceremony-card h3 .utrop-sv, .ceremony-knapp .utrop-sv { display: block; font: 500 .85rem/1.3 var(--font); color: var(--ink-soft); }
.ceremony-balte { font-size: 1.15rem; font-weight: 700; margin: 4px 0; }
.ceremony-knapp { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; }
.ceremony-knapp .utrop-sv { color: inherit; opacity: .85; }
.chip.locked { opacity: .55; cursor: not-allowed; border-style: dashed; }

/* ---- Faktahäftet: spara "Visste du att" och bläddra i dem ---- */
.fact-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.spara { display: inline-flex; align-items: center; gap: 6px; }
.spara .stjarna { font-size: 1.3em; line-height: 1; color: var(--gold); }
.spara[aria-pressed="true"] { border-color: var(--gold); }
.spara kbd {
  font: inherit; font-size: .75em; font-weight: 700; color: var(--ink-soft);
  border: 1.5px solid var(--line); border-radius: 5px; padding: 0 5px;
}
.spara.pling .stjarna { display: inline-block; animation: pling .5s ease; }
@keyframes pling { 40% { transform: scale(1.6) rotate(20deg); } }
/* Favoritknep: ett rött hjärta som slår ett slag (stjärnan är för att spara fakta) */
.spara .stjarna.hjarta { color: var(--shu); }
.favorit-knapp[aria-pressed="true"] { border-color: var(--shu); }
.innehall-hjarta { color: var(--shu); }
.spara.pling .stjarna.hjarta { animation: hjartslag .6s ease; }
@keyframes hjartslag { 25% { transform: scale(1.5); } 45% { transform: scale(1.1); } 65% { transform: scale(1.35); } }
.stjarn-knapp { padding: 4px 10px; border-width: 1.5px; flex: none; }

/* Knappen på startsidan – en liten häftesikon */
.hafte-knapp {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 14px;
  background: var(--card); color: var(--ink); border: 2px solid var(--line); border-radius: 14px;
  padding: 10px 16px; font-weight: 700;
}
.hafte-knapp:hover { border-color: var(--ai-text, var(--ai)); }
.hafte-ikon {
  width: 22px; height: 28px; border-radius: 2px 5px 5px 2px; flex: none;
  background: linear-gradient(90deg, var(--ai-light) 0 4px, var(--ai) 4px);
  box-shadow: inset -6px 0 0 -3px var(--card), 2px 2px 0 var(--shadow);
  position: relative;
}
.hafte-ikon::after { content: ""; position: absolute; left: 8px; right: 4px; top: 7px; height: 7px; background: var(--card); border-radius: 1px; }
.hafte-antal { color: var(--ink-soft); font-weight: 500; }

/* Sammanfattningen: fakta från passet */
.summary-facts h2 { margin-top: 26px; }
.summary-fact {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 12px 16px; margin: 8px 0;
}
.summary-fact p { margin: 0; line-height: 1.5; }

/* Själva häftet. Stängt: bara pärmen syns, mitt på skärmen. Öppet: pärmen viks åt vänster. */
.hafte { width: min(880px, 100%); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hafte-bok {
  --r: 14px;
  position: relative; width: 100%; aspect-ratio: 1.5; max-height: 72vh;
  display: grid; grid-template-columns: 1fr 1fr; perspective: 2200px;
  transform: translateX(-25%); transition: transform .7s ease;
}
.hafte-bok.oppen { transform: none; }
.hafte-sida {
  position: relative; overflow: auto; padding: 28px 30px 54px;
  background-color: var(--card);
  background-image: linear-gradient(transparent 31px, var(--line) 32px);   /* linjerat papper */
  background-size: 100% 32px; background-position: 0 70px;
  box-shadow: 0 16px 40px var(--shadow);
}
.hafte-sida.vanster { border-radius: var(--r) 0 0 var(--r); box-shadow: inset -18px 0 22px -18px var(--shadow), 0 16px 40px var(--shadow); }
.hafte-sida.hoger { border-radius: 0 var(--r) var(--r) 0; box-shadow: inset 18px 0 22px -18px var(--shadow), 0 16px 40px var(--shadow); }
/* Vänstra sidan syns först när pärmen har vikts upp hela vägen (0,9 s). Under tiden är det pärmens baksida
   som ligger till vänster, så att det ser ut som att häftet öppnas, inte som att ett öppet uppslag bläddras. */
.hafte-sida.vanster { transition: visibility 0s .9s; }
.hafte-bok:not(.oppen) .hafte-sida.vanster { visibility: hidden; transition: none; }
.hafte-sida.tom, .hafte-sida.insida { background-image: none; display: grid; place-content: center; text-align: center; gap: 10px; }
.sida-dekor { font-size: 3rem; color: var(--line); }
.sida-rubrik { color: var(--shu); font-weight: 900; font-size: 1.05rem; margin-bottom: 10px; }
.sida-text { font-size: 1.2rem; line-height: 32px; margin: 0; }
.sida-fot { position: absolute; left: 30px; right: 24px; bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
.sida-nr { color: var(--ink-soft); font-weight: 700; }
.insida-text { color: var(--ink-soft); }
.insida-namn { font-size: 2rem; font-weight: 900; }
.insida-stampel { width: 92px; margin: 6px auto; color: var(--shu); transform: rotate(-6deg); }

/* Pärmen: en knapp som täcker högra sidan och viks upp kring ryggen */
.hafte-parm {
  position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  padding: 0; border: 0; background: none; color: var(--on-accent); cursor: pointer;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.4,.1,.2,1), visibility 0s;
}
.hafte-bok.oppen .hafte-parm { transform: rotateY(-180deg); visibility: hidden; transition: transform .9s cubic-bezier(.4,.1,.2,1), visibility 0s .9s; }
.parm-fram, .parm-bak { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.parm-fram {
  border-radius: 4px var(--r) var(--r) 4px; box-shadow: inset 10px 0 0 var(--ai-light), 0 16px 40px var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.parm-bak { transform: rotateY(180deg); border-radius: var(--r) 4px 4px var(--r); background: var(--paper-2); }
/* Etiketten på pärmen, som på ett japanskt skrivhäfte */
.parm-etikett {
  background: var(--card); color: var(--ink); border-radius: 6px; padding: 16px 26px; min-width: 60%;
  display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 3px 0 var(--shadow);
}
.parm-titel { font-size: 1.7rem; font-weight: 900; }
.parm-namn { color: var(--ink-soft); font-weight: 700; }
.parm-stampel { width: 74px; color: var(--card); transform: rotate(8deg); }
.parm-oppna { font-weight: 700; opacity: .85; font-size: .95rem; }
.hafte-parm:hover .parm-fram { filter: brightness(1.08); }

/* Bläddring */
.hafte-bok.bladdra-fram .hafte-sida { animation: bladdra-fram .35s ease; }
.hafte-bok.bladdra-bak .hafte-sida { animation: bladdra-bak .35s ease; }
@keyframes bladdra-fram { from { opacity: .2; transform: translateX(14px); } }
@keyframes bladdra-bak { from { opacity: .2; transform: translateX(-14px); } }

.hafte-nav { display: flex; align-items: center; gap: 12px; }
.hafte-nav .ghost { width: 46px; height: 46px; padding: 0; font-size: 1.6rem; line-height: 1; color: var(--on-accent); }
.hafte-nav .ghost:disabled { opacity: .3; cursor: default; }
.hafte-sidnr { color: var(--on-accent); font-weight: 700; min-width: 54px; text-align: center; }

.stil-shonen .hafte-sida, .stil-shonen .summary-fact, .stil-shonen .hafte-knapp { border: 2.5px solid var(--ink); }
.stil-shonen .parm-fram { outline: 3px solid var(--ink); outline-offset: -3px; }

/* Smal skärm: en sida i taget, pärmen täcker hela häftet */
@media (max-width: 699px) {
  .hafte-bok { grid-template-columns: 1fr; aspect-ratio: .72; transform: none; }
  .hafte-sida.vanster { display: none; }
  .hafte-sida.hoger { border-radius: var(--r); }
  .hafte-parm { width: 100%; }
  .parm-fram { border-radius: 4px var(--r) var(--r) 4px; }
}
/* Fokus på pärmen: markera etiketten i stället för en ring runt hela knappen */
.hafte-parm:focus-visible { outline: none; }
.hafte-parm:focus-visible .parm-etikett { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---- Spelaren: knapp uppe till höger, panel på startsidan, popupen "Vem spelar?" ---- */
.spelare-knapp {
  display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 6px;
  background: var(--card); color: var(--ink); border: 2px solid var(--card); border-radius: 999px;
  font-weight: 700; box-shadow: 0 3px 0 var(--shadow);
}
.spelare-knapp:hover:not(:disabled) { border-color: var(--gold); }
.spelare-knapp:disabled { cursor: default; opacity: 1; }
.spelare-knapp:disabled .spelare-byt { display: none; }
.spelare-avatar { width: 50px; margin: -10px 0; }
.spelare-namn { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spelare-byt { color: var(--ink-soft); font-size: .9em; }

/* Spelarkortet på startsidan: du (avataren) till vänster, i mitten namnet, bältet och nästa upplåsning uppifrån
   med häftena under (de får plats att bli fler), och sensein som pratar med dig till höger */
.spelarkort {
  display: grid; grid-template-columns: auto minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-areas: "avatar info sensei" "avatar hafte sensei";
  grid-template-rows: auto 1fr;
  gap: 12px 24px; align-items: start; margin-top: 8px; padding: 14px 20px;
}
.spelarkort .scen-avatar { grid-area: avatar; }
.spelarkort-info { grid-area: info; min-width: 0; }
.spelarkort .sensei-rad { grid-area: sensei; align-self: center; }
.spelarkort .hafte-knappar { grid-area: hafte; align-self: end; display: flex; gap: 8px; flex-wrap: wrap; }
.spelarkort .hafte-knapp { margin: 0; padding: 6px 12px; font-size: .95rem; }
.spelarkort .belt-card { margin: 0; padding: 0; max-width: none; border: 0; background: none; box-shadow: none; transform: none; }
.spelarkort .belt-title { font-size: 1.2rem; }
.spelarkort-namn { margin: 0 0 10px; font-size: 1.9rem; line-height: 1.1; color: var(--ink); }
.stil-videogame .spelarkort-namn { font-size: 1.35rem; }
.nasta-upplasning { margin: 10px 0 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.45; }
.nasta-upplasning b { color: var(--ink); }
@media (max-width: 860px) {   /* sensein under avataren och bältet */
  .spelarkort { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto;
                grid-template-areas: "avatar info" "avatar hafte" "sensei sensei"; }
}
.scen-avatar {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  background: none; border: 0; padding: 0; color: var(--ink); border-radius: 18px;
}
.scen-avatar:active { transform: scale(.98); }
.spelar-panel-avatar { width: 160px; }
.scen-namn {
  margin-top: -6px; padding: 2px 16px; border-radius: 999px; font-size: 1.25rem; font-weight: 900;
  background: var(--card); border: 2px solid var(--line);
}
.scen-info { min-width: 0; }
.sensei-rad { display: flex; align-items: flex-end; gap: 12px; }
.scen-sensei { width: 88px; flex: none; }
.sensei-bubbla {
  position: relative; margin: 0 0 18px; padding: 12px 18px; border-radius: 18px; flex: 1; min-width: 0;
  background: var(--card); border: 2px solid var(--line); font-size: 1.15rem; line-height: 1.5;
}
/* Pratbubblans spets mot sensein: två trianglar, kanten (::before) och fyllningen (::after) som täcker bubblans
   kant där spetsen sitter. Mitt på vänstersidan, så att den möter bubblan även när hörnen är mycket rundade.
   Varje ritstil sätter kantens färg och tjocklek (--kant, --kw) och kan byta form (clip-path). */
.sensei-bubbla { --kant: var(--line); --kw: 2px; }
.sensei-bubbla::before, .sensei-bubbla::after {
  content: ""; position: absolute; top: 50%; width: 16px; height: 22px; transform: translateY(-50%);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.sensei-bubbla::before { left: calc(-16px + var(--kw)); background: var(--kant); }
.sensei-bubbla::after { left: calc(-16px + var(--kw) * 2.6); height: calc(22px - var(--kw) * 2.4); background: var(--card); }
.stil-shonen .sensei-bubbla, .stil-shonen .scen-namn { border-color: var(--ink); }

/* Hajime! – knappen som startar ett pass, till höger direkt under kategorierna. Luft nedåt skiljer
   den från Inställningar. */
.hajime-rad { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hajime-rad .error { margin: 0; text-align: right; }
.hajime-rad .hajime { margin-top: 0; }
.hajime { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 56px 14px; }
.hajime-jp { font-size: 2.1rem; font-weight: 900; letter-spacing: .08em; line-height: 1.15; }
.hajime-sv { font-size: .95rem; font-weight: 700; opacity: .92; }
.hajime:hover { animation: hajime-studs .6s ease; }
@keyframes hajime-studs { 30% { transform: translateY(-5px) scale(1.04); } 60% { transform: translateY(1px); } }

.spelarval-card { position: relative; width: min(460px, 100%); }
.spelarval-card h3 { font-size: 1.6rem; margin-top: 0; }
.spelarval-stang { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; padding: 0; }
/* Kontot: logga in, skapa ett konto, Logga ut (openKonto i app.js) */
.konto-form { display: grid; gap: 14px; }
.konto-form label { display: grid; gap: 6px; font-weight: 700; color: var(--ink-soft); }
.konto-form input:not([type="checkbox"]) {
  font: inherit; font-size: 1.1rem; width: 100%; box-sizing: border-box;
  padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--ink);
}
.konto-form input:focus { border-color: var(--ai-text, var(--ai)); outline: none; }
.konto-hjalp { font-weight: 400; font-size: .9rem; }
.losen-rad { display: flex; gap: 8px; align-items: center; }
.losen-rad input { flex: 1; min-width: 0; }
.visa-losen { flex: none; margin: 0; padding: 8px 12px; }
.konto-form .konto-kryss { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--ink); }
.konto-kryss input { width: 18px; height: 18px; accent-color: var(--shu); }
.konto-form .primary { justify-self: start; margin: 0; }
.konto-byt { margin: 0; color: var(--ink-soft); }
.lank { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; font: inherit; color: var(--ai-text, var(--ai));
  text-decoration: underline; cursor: pointer; }
.losen-matare { margin: -6px 0 0; min-height: 1.3em; color: var(--ink-soft); font-size: .95rem; }
.losen-matare.ok { color: var(--ai-text, var(--ai)); font-weight: 700; }
.robotfalla { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.konto-inne p { margin: 0 0 14px; }
.konto-text { margin: 0; color: var(--ink-soft); }
.konto-meddelande { margin: 12px 0 0; font-weight: 700; color: var(--ai-text, var(--ai)); }
.konto-meddelande:empty { display: none; }
.konto-del { margin: 0 0 14px; border-top: 2px dashed var(--line); padding-top: 10px; }
.konto-del summary { cursor: pointer; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.konto-del .konto-form { margin-bottom: 6px; }
.konto-epost .lank { display: inline; }
/* Inloggad som någon annan via adminsidan: en tydlig rad överst */
.via-banderoll { background: var(--gold); color: #1d1a16; text-align: center; padding: 8px 16px; font-size: .95rem; }
.via-banderoll .lank { color: #1d1a16; font-weight: 700; margin-left: 8px; }
/* Adminsidan: åtgärderna för en spelare i en meny ("Åtgärder ▾") */
.admin-meny { position: relative; display: inline-block; }
.admin-meny > .ghost { margin: 0; }
.admin-meny-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 190px;
  display: flex; flex-direction: column; padding: 6px; background: var(--card); border: 2px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 18%, transparent); }
.admin-meny-lista[hidden] { display: none; }
.admin-meny-val { text-align: left; background: none; border: 0; box-shadow: none; margin: 0; padding: 8px 12px;
  border-radius: 8px; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.admin-meny-val:hover, .admin-meny-val:focus-visible { background: var(--chip-active); }
.admin-meny-val.fara { color: var(--shu-dark); }
.stil-shonen .spelare-knapp { border-color: var(--ink); }

@media (max-width: 520px) {
  .spelare-avatar { width: 42px; }
  .spelare-knapp .belt-icon { display: none; }
  .spelar-panel-avatar { width: 104px; }
  .scen-sensei { width: 64px; }
  .sensei-bubbla { font-size: 1rem; }
}

/* ---- Ritstil: Video Game – som ett klassiskt plattformsspel ----
   Figurerna är egna plattformshjältar (tools/hjaltefigurer.py → figurer/hjalte/). Sidan: pixelrutor med
   hackiga hörn (box-shadow i steg om 4 px) och en upphöjd kant som spelblock, rubriker och siffror i
   pixeltypsnittet Press Start 2P (brödtexten i Chakra Petch, som är lätt att läsa), pixelmoln på himlen och
   gräs och tegel längst ner på sidan. Knapparna är block som studsar upp när man pekar på dem; valda knappar
   blir gula mynt-block. "Svara" och "Ledtråd" bär spelkontrollens A och B, "Visste du att" är en mörk
   dialogruta som i ett äventyrsspel (med en blinkande ▼), poängstapeln en segmenterad mätare och
   Hajime-knappen blinkar som PRESS START. */
.pixelfilter { position: absolute; }
.stil-videogame {
  --font: "Chakra Petch", "Zen Maru Gothic", system-ui, sans-serif;
  --pixel: "Press Start 2P", "Chakra Petch", monospace;
  --spelkant: #1f1a24;
  --px: 4px;
  /* pixelram med hackiga hörn + en upphöjd kant (ljus uppe till vänster, mörk nere till höger) */
  --pixelram: 0 calc(-1 * var(--px)) 0 0 var(--spelkant), 0 var(--px) 0 0 var(--spelkant),
              calc(-1 * var(--px)) 0 0 0 var(--spelkant), var(--px) 0 0 0 var(--spelkant),
              inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 rgba(0, 0, 0, .14), inset var(--px) var(--px) 0 0 rgba(255, 255, 255, .55);
  --pixelskugga: calc(2 * var(--px)) calc(2 * var(--px)) 0 0 rgba(31, 26, 36, .28);
}
body.stil-videogame {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22620%22 height=%22380%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%2276%22 y=%2250%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2280%22 y=%2250%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2284%22 y=%2250%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2288%22 y=%2250%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2272%22 y=%2254%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2276%22 y=%2254%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2280%22 y=%2254%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2284%22 y=%2254%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2288%22 y=%2254%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2292%22 y=%2254%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22104%22 y=%2254%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22108%22 y=%2254%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22112%22 y=%2254%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2268%22 y=%2258%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2272%22 y=%2258%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2276%22 y=%2258%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2280%22 y=%2258%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2284%22 y=%2258%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2288%22 y=%2258%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2292%22 y=%2258%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2296%22 y=%2258%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22100%22 y=%2258%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22104%22 y=%2258%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22108%22 y=%2258%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22112%22 y=%2258%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22116%22 y=%2258%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2264%22 y=%2262%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2268%22 y=%2262%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2272%22 y=%2262%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2276%22 y=%2262%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2280%22 y=%2262%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2284%22 y=%2262%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2288%22 y=%2262%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2292%22 y=%2262%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2296%22 y=%2262%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22100%22 y=%2262%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22104%22 y=%2262%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22108%22 y=%2262%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22112%22 y=%2262%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22116%22 y=%2262%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22120%22 y=%2262%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2260%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2264%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2268%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2272%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2276%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2280%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2284%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2288%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2292%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2296%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22100%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22104%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22108%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22112%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22116%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22120%22 y=%2266%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2260%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2264%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2268%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2272%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2276%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2280%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2284%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2288%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2292%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%2296%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22100%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22104%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22108%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22112%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22116%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22120%22 y=%2270%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2264%22 y=%2274%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2268%22 y=%2274%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2272%22 y=%2274%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2276%22 y=%2274%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2280%22 y=%2274%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2284%22 y=%2274%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2288%22 y=%2274%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2292%22 y=%2274%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%2296%22 y=%2274%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22100%22 y=%2274%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22104%22 y=%2274%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22108%22 y=%2274%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22112%22 y=%2274%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22116%22 y=%2274%22 width=%224%22 height=%224%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22392%22 y=%22230%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22395%22 y=%22230%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22398%22 y=%22230%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22401%22 y=%22230%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22389%22 y=%22233%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22392%22 y=%22233%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22395%22 y=%22233%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22398%22 y=%22233%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22401%22 y=%22233%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22404%22 y=%22233%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22413%22 y=%22233%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22416%22 y=%22233%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22419%22 y=%22233%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22386%22 y=%22236%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22389%22 y=%22236%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22392%22 y=%22236%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22395%22 y=%22236%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22398%22 y=%22236%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22401%22 y=%22236%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22404%22 y=%22236%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22407%22 y=%22236%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22410%22 y=%22236%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22413%22 y=%22236%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22416%22 y=%22236%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22419%22 y=%22236%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22422%22 y=%22236%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22383%22 y=%22239%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22386%22 y=%22239%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22389%22 y=%22239%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22392%22 y=%22239%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22395%22 y=%22239%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22398%22 y=%22239%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22401%22 y=%22239%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22404%22 y=%22239%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22407%22 y=%22239%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22410%22 y=%22239%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22413%22 y=%22239%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22416%22 y=%22239%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22419%22 y=%22239%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22422%22 y=%22239%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22425%22 y=%22239%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22380%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22383%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22386%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22389%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22392%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22395%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22398%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22401%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22404%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22407%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22410%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22413%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22416%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22419%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22422%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22425%22 y=%22242%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22380%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22383%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22386%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22389%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22392%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22395%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22398%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22401%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22404%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22407%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22410%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22413%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22416%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22419%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22422%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%28255,255,255,.55%29%22/%3E%3Crect x=%22425%22 y=%22245%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22383%22 y=%22248%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22386%22 y=%22248%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22389%22 y=%22248%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22392%22 y=%22248%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22395%22 y=%22248%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22398%22 y=%22248%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22401%22 y=%22248%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22404%22 y=%22248%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22407%22 y=%22248%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22410%22 y=%22248%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22413%22 y=%22248%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22416%22 y=%22248%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22419%22 y=%22248%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3Crect x=%22422%22 y=%22248%22 width=%223%22 height=%223%22 fill=%22rgba%2831,26,36,.10%29%22/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%220%22 y=%220%22 width=%224%22 height=%224%22 fill=%22%235fbf4a%22/%3E%3Crect x=%224%22 y=%220%22 width=%224%22 height=%224%22 fill=%22%235fbf4a%22/%3E%3Crect x=%228%22 y=%220%22 width=%224%22 height=%224%22 fill=%22%235fbf4a%22/%3E%3Crect x=%2212%22 y=%220%22 width=%224%22 height=%224%22 fill=%22%235fbf4a%22/%3E%3Crect x=%2216%22 y=%220%22 width=%224%22 height=%224%22 fill=%22%235fbf4a%22/%3E%3Crect x=%2220%22 y=%220%22 width=%224%22 height=%224%22 fill=%22%235fbf4a%22/%3E%3Crect x=%2224%22 y=%220%22 width=%224%22 height=%224%22 fill=%22%235fbf4a%22/%3E%3Crect x=%2228%22 y=%220%22 width=%224%22 height=%224%22 fill=%22%235fbf4a%22/%3E%3Crect x=%220%22 y=%224%22 width=%224%22 height=%224%22 fill=%22%233f8f34%22/%3E%3Crect x=%224%22 y=%224%22 width=%224%22 height=%224%22 fill=%22%235fbf4a%22/%3E%3Crect x=%228%22 y=%224%22 width=%224%22 height=%224%22 fill=%22%235fbf4a%22/%3E%3Crect x=%2212%22 y=%224%22 width=%224%22 height=%224%22 fill=%22%233f8f34%22/%3E%3Crect x=%2216%22 y=%224%22 width=%224%22 height=%224%22 fill=%22%235fbf4a%22/%3E%3Crect x=%2220%22 y=%224%22 width=%224%22 height=%224%22 fill=%22%235fbf4a%22/%3E%3Crect x=%2224%22 y=%224%22 width=%224%22 height=%224%22 fill=%22%235fbf4a%22/%3E%3Crect x=%2228%22 y=%224%22 width=%224%22 height=%224%22 fill=%22%233f8f34%22/%3E%3Crect x=%220%22 y=%228%22 width=%224%22 height=%224%22 fill=%22%231f1a24%22/%3E%3Crect x=%224%22 y=%228%22 width=%224%22 height=%224%22 fill=%22%231f1a24%22/%3E%3Crect x=%228%22 y=%228%22 width=%224%22 height=%224%22 fill=%22%231f1a24%22/%3E%3Crect x=%2212%22 y=%228%22 width=%224%22 height=%224%22 fill=%22%231f1a24%22/%3E%3Crect x=%2216%22 y=%228%22 width=%224%22 height=%224%22 fill=%22%231f1a24%22/%3E%3Crect x=%2220%22 y=%228%22 width=%224%22 height=%224%22 fill=%22%231f1a24%22/%3E%3Crect x=%2224%22 y=%228%22 width=%224%22 height=%224%22 fill=%22%231f1a24%22/%3E%3Crect x=%2228%22 y=%228%22 width=%224%22 height=%224%22 fill=%22%231f1a24%22/%3E%3Crect x=%220%22 y=%2212%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%224%22 y=%2212%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%228%22 y=%2212%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2212%22 y=%2212%22 width=%224%22 height=%224%22 fill=%22%238a4a24%22/%3E%3Crect x=%2216%22 y=%2212%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2220%22 y=%2212%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2224%22 y=%2212%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2228%22 y=%2212%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%220%22 y=%2216%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%224%22 y=%2216%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%228%22 y=%2216%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2212%22 y=%2216%22 width=%224%22 height=%224%22 fill=%22%238a4a24%22/%3E%3Crect x=%2216%22 y=%2216%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2220%22 y=%2216%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2224%22 y=%2216%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2228%22 y=%2216%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%220%22 y=%2220%22 width=%224%22 height=%224%22 fill=%22%238a4a24%22/%3E%3Crect x=%224%22 y=%2220%22 width=%224%22 height=%224%22 fill=%22%238a4a24%22/%3E%3Crect x=%228%22 y=%2220%22 width=%224%22 height=%224%22 fill=%22%238a4a24%22/%3E%3Crect x=%2212%22 y=%2220%22 width=%224%22 height=%224%22 fill=%22%238a4a24%22/%3E%3Crect x=%2216%22 y=%2220%22 width=%224%22 height=%224%22 fill=%22%238a4a24%22/%3E%3Crect x=%2220%22 y=%2220%22 width=%224%22 height=%224%22 fill=%22%238a4a24%22/%3E%3Crect x=%2224%22 y=%2220%22 width=%224%22 height=%224%22 fill=%22%238a4a24%22/%3E%3Crect x=%2228%22 y=%2220%22 width=%224%22 height=%224%22 fill=%22%238a4a24%22/%3E%3Crect x=%220%22 y=%2224%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%224%22 y=%2224%22 width=%224%22 height=%224%22 fill=%22%238a4a24%22/%3E%3Crect x=%228%22 y=%2224%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2212%22 y=%2224%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2216%22 y=%2224%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2220%22 y=%2224%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2224%22 y=%2224%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2228%22 y=%2224%22 width=%224%22 height=%224%22 fill=%22%238a4a24%22/%3E%3Crect x=%220%22 y=%2228%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%224%22 y=%2228%22 width=%224%22 height=%224%22 fill=%22%238a4a24%22/%3E%3Crect x=%228%22 y=%2228%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2212%22 y=%2228%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2216%22 y=%2228%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2220%22 y=%2228%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2224%22 y=%2228%22 width=%224%22 height=%224%22 fill=%22%23c0703a%22/%3E%3Crect x=%2228%22 y=%2228%22 width=%224%22 height=%224%22 fill=%22%238a4a24%22/%3E%3C/svg%3E");
  background-repeat: repeat, repeat-x;
  background-position: 0 0, left bottom;
  background-attachment: fixed, scroll;
}
.stil-videogame main { padding-bottom: 72px; }
.stil-videogame h1, .stil-videogame h2, .stil-videogame h3, .stil-videogame button { font-weight: 700; }
.stil-videogame h1, .stil-videogame h2, .stil-videogame .trail-count, .stil-videogame .ljudord,
.stil-videogame .tile .num, .stil-videogame #fact h3 { font-family: var(--pixel); font-weight: 400; letter-spacing: 0; }
.stil-videogame h1 { font-size: 1.35rem; line-height: 1.5; }
.stil-videogame h2 { font-size: .82rem; line-height: 1.7; color: var(--ink); }
.stil-videogame h2 .passval-tips { font-family: var(--font); font-size: .95rem; }
.stil-videogame .trail-count { font-size: .7rem; }
.stil-videogame .trail-count::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%224%22 y=%220%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%226%22 y=%220%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%228%22 y=%220%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%2210%22 y=%220%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%222%22 y=%222%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%224%22 y=%222%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%226%22 y=%222%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%228%22 y=%222%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2210%22 y=%222%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2212%22 y=%222%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%220%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%222%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%224%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%226%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23fff6c2%22/%3E%3Crect x=%228%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2210%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2212%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2214%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%220%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%222%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%224%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%226%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%23fff6c2%22/%3E%3Crect x=%228%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2210%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2212%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2214%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%220%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%222%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%224%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%226%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23fff6c2%22/%3E%3Crect x=%228%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2210%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2212%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2214%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%220%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%222%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%224%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%226%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%228%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2210%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2212%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2214%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%222%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%224%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%226%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%228%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2210%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2212%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%224%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%226%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%228%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3Crect x=%2210%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%231f1a24%22/%3E%3C/svg%3E"); }
.stil-videogame .tile .num { font-size: 1.3rem; }

/* Pixelrutor */
.stil-videogame .card, .stil-videogame .fact-card, .stil-videogame .bubble, .stil-videogame .tile, .stil-videogame .summary-fact,
.stil-videogame .hafte-knapp, .stil-videogame .ovat, .stil-videogame .sensei-bubbla, .stil-videogame .scen-namn {
  border: 0; border-radius: 0; box-shadow: var(--pixelram), var(--pixelskugga); margin: var(--px);
}
/* Passkortet och statistiken: luft mellan rutorna, och pixelknapparna tätare så att talens storlek får plats på en rad */
.stil-videogame .passkort { margin-top: 18px; }
.stil-videogame .ovat { margin: 16px var(--px) 40px; }
.stil-videogame .passval { column-gap: 20px; }
.stil-videogame .passval .val { padding: 10px 12px; }
.stil-videogame .passval-knappar { gap: 6px; }
.stil-videogame .log > .bubble::before { border-color: var(--spelkant); border-width: 0 var(--px) var(--px) 0; border-radius: 0; }
/* Pixelspets: en trappa i fyrapunktssteg */
.stil-videogame .sensei-bubbla { --kant: var(--spelkant); --kw: var(--px); }
.stil-videogame .sensei-bubbla::before, .stil-videogame .sensei-bubbla::after {
  width: 16px; height: 20px;
  clip-path: polygon(100% 0, 75% 0, 75% 20%, 50% 20%, 50% 40%, 25% 40%, 25% 60%, 50% 60%, 50% 80%, 75% 80%, 75% 100%, 100% 100%);
}
.stil-videogame .sensei-bubbla::before { left: calc(-16px - var(--px)); }
.stil-videogame .sensei-bubbla::after { left: calc(-16px + var(--px)); height: 20px; clip-path: polygon(100% 20%, 25% 20%, 25% 40%, 0 40%, 0 60%, 25% 60%, 25% 80%, 100% 80%); }
.stil-videogame .ram { border: 3px solid var(--spelkant); }
/* Plattformsbanan i en pixelram (hackiga hörn) i stället för rundade hörn */
.stil-videogame .trail.plattform { border: 0; border-radius: 0; margin: 4px 4px 18px;
  box-shadow: 0 -4px 0 0 var(--spelkant), 0 4px 0 0 var(--spelkant), -4px 0 0 0 var(--spelkant), 4px 0 0 0 var(--spelkant), 8px 8px 0 0 rgba(31, 26, 36, .28); }
.stil-videogame .trail.plattform .trail-count { border-radius: 0; }

/* Knappar som spelblock: studsar upp när man pekar, valda blir gula mynt-block */
.stil-videogame .val, .stil-videogame .chip, .stil-videogame .category, .stil-videogame .ghost, .stil-videogame .primary {
  border: 0; border-radius: 0; margin: var(--px); box-shadow: var(--pixelram), var(--pixelskugga);
  transition: transform .08s steps(2, end);
}
.stil-videogame .val:hover, .stil-videogame .chip:not(:disabled):hover, .stil-videogame .category:hover,
.stil-videogame .ghost:hover, .stil-videogame .primary:not(:disabled):hover { transform: translateY(-3px); }
.stil-videogame .val[aria-pressed="true"], .stil-videogame .chip[aria-pressed="true"] {
  background: #ffd23f; color: #1f1a24; transform: translateY(2px);
  box-shadow: var(--pixelram), calc(1 * var(--px)) calc(1 * var(--px)) 0 0 rgba(31, 26, 36, .28);
}
.stil-videogame .primary:active, .stil-videogame .ghost:active { transform: translateY(3px); box-shadow: var(--pixelram); }
/* Spelkontrollens knappar: A = Svara, B = Ledtråd */
.stil-videogame #btn-answer::before, .stil-videogame #btn-hint::before {
  display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: .5em; border-radius: 50%;
  font-family: var(--pixel); font-size: .7em; line-height: 1; vertical-align: .1em;
  box-shadow: 0 0 0 2px var(--spelkant), inset -2px -2px 0 rgba(0, 0, 0, .25);
}
.stil-videogame #btn-answer::before { content: "A"; background: #fff; color: var(--shu); }
.stil-videogame #btn-hint::before { content: "B"; background: #ffd23f; color: #1f1a24; }
/* Hajime blinkar som PRESS START, med en menypil */
.stil-videogame .hajime-sv::before { content: "▶ "; animation: press-start 1s steps(1, end) infinite; }
@keyframes press-start { 50% { opacity: 0; } }

/* "Visste du att": en mörk dialogruta som i ett äventyrsspel, med en blinkande pil nere till höger */
.stil-videogame #fact .fact-card {
  position: relative; background: #1d2350; color: #fff; border: 0;
  box-shadow: inset 0 0 0 4px #1d2350, inset 0 0 0 8px #fff, var(--pixelram), 10px 10px 0 0 rgba(0, 0, 0, .35);
}
.stil-videogame #fact .fact-card p, .stil-videogame #fact .fact-mark { color: #fff; }
.stil-videogame #fact h3 { font-size: .9rem; line-height: 1.6; color: #ffd23f; }
.stil-videogame #fact .fact-card::after { content: "▼"; position: absolute; right: 22px; bottom: 14px; color: #fff; font-size: .8rem; animation: press-start .8s steps(1, end) infinite; }
.stil-videogame #fact .ghost { color: #fff; background: transparent; }

/* Poängen mot nästa bälte: en segmenterad mätare */
.stil-videogame .belt-bar { height: 14px; border-radius: 0; background: var(--paper-2); box-shadow: 0 0 0 3px var(--spelkant); margin: 8px 3px 6px; }
.stil-videogame .belt-bar span { border-radius: 0; background: repeating-linear-gradient(90deg, var(--shu) 0 10px, transparent 10px 12px); }

.stil-videogame .ljudord { -webkit-text-stroke: 0; text-shadow: 3px 3px 0 var(--spelkant), -1px -1px 0 var(--spelkant), 1px -1px 0 var(--spelkant), -1px 1px 0 var(--spelkant); color: var(--gold); font-size: 1.3rem; }
.stil-videogame .ljudord.stor { font-size: 2.1rem; }
.stil-videogame .ljudord.lugn { color: #7fd3ff; }
/* Löparna: djuren ritas i en ruta på 80 × 74 (högre än originalen), så de görs lite smalare på banan */
.stil-videogame .trail:not([data-rorelse]) .trail-runner svg,
.stil-videogame .trail[data-rorelse="hoppa"] .trail-runner svg,
.stil-videogame .trail[data-rorelse="smyga"] .trail-runner svg { width: 84%; margin-left: 8%; }

/* ---- Avataren framifrån (resa.portratt): miner och små rörelser så att den känns levande ----
   Miner: data-min = lugn/glad/oj/wow/stolt. .blink blinkar bara med öppna ögon (lugn, oj).
   .svans viftar (fortare när den är glad), .ora rycker ibland, .andas gungar (tåget),
   .torkare vinkar när den är glad. Vridpunkterna står i SVG:erna (style="transform-origin: …"). */
.avatar .min { display: none; }
.avatar[data-min="lugn"] .min-lugn, .avatar[data-min="glad"] .min-glad, .avatar[data-min="oj"] .min-oj,
.avatar[data-min="wow"] .min-wow, .avatar[data-min="stolt"] .min-stolt { display: inline; }
.avatar .blink { opacity: 0; }
.avatar[data-min="lugn"] .blink, .avatar[data-min="oj"] .blink { animation: blinka 5.5s steps(1, end) infinite; }
@keyframes blinka { 0%, 92% { opacity: 0; } 93%, 95% { opacity: 1; } 96%, 97% { opacity: 0; } 98%, 99% { opacity: 1; } 100% { opacity: 0; } }
.avatar .svans { animation: vifta 1.8s ease-in-out infinite alternate; }
.avatar[data-min="glad"] .svans, .avatar[data-min="wow"] .svans, .avatar[data-min="stolt"] .svans { animation-duration: .3s; }
@keyframes vifta { from { transform: rotate(-6deg); } to { transform: rotate(7deg); } }
.avatar .ora { animation: rycka 7s ease infinite; }
@keyframes rycka { 0%, 88%, 92%, 96%, 100% { transform: none; } 90% { transform: rotate(-14deg); } 94% { transform: rotate(-9deg); } }
.avatar .andas { transform-origin: 50px 92px; animation: andas 2.4s ease-in-out infinite alternate; }
@keyframes andas { from { transform: none; } to { transform: translateY(1.4px) scaleY(.985); } }
.avatar[data-min="glad"] .torkare, .avatar[data-min="wow"] .torkare, .avatar[data-min="stolt"] .torkare { animation: vinka .45s ease-in-out infinite alternate; }
.avatar[data-min="glad"] .torkare-h, .avatar[data-min="wow"] .torkare-h, .avatar[data-min="stolt"] .torkare-h { animation-name: vinka-h; }
@keyframes vinka { from { transform: none; } to { transform: rotate(-62deg); } }
@keyframes vinka-h { from { transform: none; } to { transform: rotate(62deg); } }

.ceremony-avatar { width: 180px; margin: 0 auto -6px; }
.insida-avatar { width: 144px; margin: 4px auto; }
.reward .avatar { width: 120px; }

/* Pixelporträtt (Video Game): svansen viftar genom att två bildrutor turas om, som i gamla spel. */
.avatar .bildruta-a { animation: bildruta-a 1.2s steps(1, end) infinite; }
.avatar .bildruta-b { animation: bildruta-b 1.2s steps(1, end) infinite; }
.avatar[data-min="glad"] .bildruta-a, .avatar[data-min="glad"] .bildruta-b,
.avatar[data-min="wow"] .bildruta-a, .avatar[data-min="wow"] .bildruta-b,
.avatar[data-min="stolt"] .bildruta-a, .avatar[data-min="stolt"] .bildruta-b { animation-duration: .4s; }
@keyframes bildruta-a { 0% { visibility: visible; } 50% { visibility: hidden; } }
@keyframes bildruta-b { 0% { visibility: hidden; } 50% { visibility: visible; } }

/* ---- Ritstil: Sumi-e – tusch och pensel på papper ----
   Egna penselfigurer (tools/sumiefigurer.py) har sin pensel inbyggd; övriga figurer får filtret
   pensel-sida (index.html). Kort och knappar får ojämna, handdragna tuschkanter. */
.stil-sumie {
  --font: "Shippori Mincho", "Zen Maru Gothic", serif;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Penseltypsnittet (glest mellan bokstäverna) bara i rubriker – resten i Shippori Mincho */
.stil-sumie h1, .stil-sumie h2, .stil-sumie h3, .stil-sumie .parm-titel,
.stil-sumie .sida-rubrik { font-family: "Yuji Syuku", "Shippori Mincho", serif; font-weight: 400; }
.stil-sumie button, .stil-sumie .category, .stil-sumie .val, .stil-sumie .scen-namn { font-weight: 700; }
.stil-sumie .figur:not(.egen) svg, .stil-sumie .soroban, .stil-sumie .belt-icon svg { filter: url(#pensel-sida); }
.stil-sumie .figur:not(.egen) .glans, .stil-sumie .soroban .glans { display: none; }
.stil-sumie .figur:not(.egen) .linje { stroke-width: 3.4; }

/* Handdragna kanter: lite ojämna hörn och tunt tusch i stället för skuggor */
.stil-sumie .card, .stil-sumie .bubble, .stil-sumie .tile, .stil-sumie .category, .stil-sumie .chip,
.stil-sumie .summary-fact, .stil-sumie .hafte-knapp, .stil-sumie .sensei-bubbla,
.stil-sumie .fact-card, .stil-sumie .scen-namn, .stil-sumie .spelare-knapp {
  border: 2px solid var(--ink); box-shadow: none;
  border-radius: 255px 14px 225px 14px / 14px 225px 14px 255px;
}
.stil-sumie .card, .stil-sumie .fact-card { border-radius: 18px 6px 22px 8px / 8px 20px 6px 18px; }
.stil-sumie .fact-card { border-top: 6px solid var(--shu); }
.stil-sumie .primary {
  box-shadow: none; border: 2px solid var(--shu-dark);
  border-radius: 14px 6px 16px 5px / 6px 16px 5px 14px;
}
/* Hajime-knappen som en röd namnstämpel (hanko), lite snett stämplad */
.stil-sumie .hajime { transform: rotate(-1.5deg); border-radius: 8px 12px 6px 14px; padding: 12px 48px 14px; }
.stil-sumie .hajime-jp { font-family: "Yuji Syuku", serif; font-weight: 400; letter-spacing: .14em; }
.stil-sumie .ghost { border-width: 2px; border-radius: 14px 6px 16px 5px / 6px 16px 5px 14px; }
.stil-sumie .sensei-bubbla { --kant: var(--ink); --kw: 2px; }

/* Penseldrag: kanterna är inte jämntjocka. Tjockt där penseln trycktes ner, tunt där den lyftes. Lugnt, inga
   dubbla linjer eller sneda rutor (det hör till Shōnen). */
.stil-sumie .bubble, .stil-sumie .sensei-bubbla, .stil-sumie .val, .stil-sumie .chip, .stil-sumie .category,
.stil-sumie .hafte-knapp, .stil-sumie .spelare-knapp, .stil-sumie .ghost {
  border-width: 2.6px 1.3px 2.1px 1.1px;
}
/* De stora rutorna: ramen ritas av ett ::before med filtret pensel-ram (index.html): fransig kant, torra strimmor,
   och en liten öppning uppe till höger där draget inte riktigt slöt, som i en ensō. */
.stil-sumie :is(.card, .ovat, .tile, .summary-fact, .pagaende) { position: relative; border-color: transparent; }
.stil-sumie :is(.card, .ovat, .tile, .summary-fact, .pagaende)::before {
  content: ""; position: absolute; inset: -2px; pointer-events: none; border-radius: inherit;
  border: solid var(--ink); border-width: 3.6px 1.7px 2.8px 1.6px;
  filter: url(#pensel-ram);
  -webkit-mask: radial-gradient(circle 8px at calc(100% - 30px) 1px, transparent 97%, #000);
  mask: radial-gradient(circle 8px at calc(100% - 30px) 1px, transparent 97%, #000);
}
.stil-sumie .sensei-bubbla::before { filter: url(#pensel-ram); }

/* Banan: ett penseldrag; ramarna som tunna tuschcirklar */
/* (bara linjen halvgenomskinlig – ramarna med stämplarna ligger inuti den och ska vara fullt synliga) */
.stil-sumie .trail-path { background: color-mix(in srgb, var(--ink) 45%, transparent); height: 4px; border-radius: 2px 6px 3px 5px; }
.stil-sumie .ram { border: 1.5px solid var(--ink-soft); border-radius: 50% 46% 52% 48%; }

/* Pixellöparna (Video Game): två bildrutor i ett springsteg. Ruta b syns bara medan löparen hoppar,
   då rutorna växlar snabbt – som en springande spelfigur. */
.figur .springa-b { visibility: hidden; }
.trail-runner.hop .springa-a, .trail-runner.hop-stor .springa-a { animation: springa-a .18s steps(1, end) .35s 5; }
.trail-runner.hop .springa-b, .trail-runner.hop-stor .springa-b { animation: springa-b .18s steps(1, end) .35s 5; }
@keyframes springa-a { 0% { visibility: visible; } 50% { visibility: hidden; } }
@keyframes springa-b { 0% { visibility: hidden; } 50% { visibility: visible; } }
/* Smyga (ninjan, rorelse: "smyga" i utseende.js): ninjan glider fram långsamt och lite övernaturligt, medan benen
   tar lugna, smygande steg (stegen behöver inte stämma med sträckan). Ibland (klassen .titta, slumpas i renderTrail)
   vänder den sig om och tittar bakåt en stund, och smyger vidare baklänges innan den vänder tillbaka. */
.trail[data-rorelse="smyga"]:not(.nytt-pass) .trail-runner { transition: left 2.2s cubic-bezier(.45, .05, .55, .95) .35s; }
.trail[data-rorelse="smyga"] .trail-runner:is(.hop, .hop-stor) { animation: none; }
.trail[data-rorelse="smyga"] .trail-runner:is(.hop, .hop-stor) .springa-a { animation: springa-a 1s steps(1, end) .35s 2; }
.trail[data-rorelse="smyga"] .trail-runner:is(.hop, .hop-stor) .springa-b { animation: springa-b 1s steps(1, end) .35s 2; }
.trail[data-rorelse="smyga"] .trail-runner.titta svg { animation: titta 2.2s steps(1, end) .35s; }
@keyframes titta { 0%, 38% { transform: none; } 39%, 66% { transform: scaleX(-1); } 67%, 100% { transform: none; } }
.trail[data-rorelse="smyga"] .trail-runner.intag { animation-name: intag-spring; animation-duration: 2.4s; }
.trail[data-rorelse="smyga"] .trail-runner.intag :is(.springa-a, .springa-b) { animation-duration: 1s; animation-iteration-count: 2; }
.trail[data-rorelse="smyga"].arrived .trail-runner:not(.segervarv) { animation: cheer .5s ease 2.6s 3; }
/* Pannbandets ändar fladdrar (ninjan) */
.trail-runner .pannband, .bana-lopare .pannband { transform-box: view-box; animation: fladdra .35s ease-in-out infinite alternate; }

/* Löpare med springande ben (bildrutorna .springa-a/-b, t.ex. Neko och Shiba i de flesta stilar) hoppar inte
   mellan stationerna utan springer: lugn start, jämn fart och inbromsning (samma tid som benen rör sig), ett
   litet guppande steg för varje fotisättning, och benen står still när löparen står still. På egen hand blir det
   ett litet glädjeskutt efter framkomsten. Tåget (rulla) och Kikai (flyga) har egna rörelser. */
.trail[data-rorelse="hoppa"]:not(.nytt-pass) .trail-runner:has(.springa-a) { transition: left 1.1s cubic-bezier(.4, 0, .6, 1) .35s; }
.trail[data-rorelse="hoppa"] .trail-runner:has(.springa-a).hop { animation: steg .14s ease-in-out .35s 8; }
.trail[data-rorelse="hoppa"] .trail-runner:has(.springa-a).hop-stor { animation: steg .14s ease-in-out .35s 8, glad-skutt .5s ease-out 1.5s; }
.trail[data-rorelse="hoppa"] .trail-runner:has(.springa-a):is(.hop, .hop-stor) .springa-a { animation: springa-a .28s steps(1, end) .35s 4; }
.trail[data-rorelse="hoppa"] .trail-runner:has(.springa-a):is(.hop, .hop-stor) .springa-b { animation: springa-b .28s steps(1, end) .35s 4; }
.trail.arrived[data-rorelse="hoppa"] .trail-runner:has(.springa-a):not(.segervarv) { animation: steg .14s ease-in-out .35s 8, glad-skutt .5s ease-out 1.5s 2; }
/* Intåget vid ett nytt pass: springer in och stannar med ett litet skutt i stället för ett stort hopp */
.trail[data-rorelse="hoppa"] .trail-runner:has(.springa-a).intag { animation-name: intag-spring; }
@keyframes steg { 50% { transform: translateY(-2.5px); } }
@keyframes glad-skutt { 0%, 100% { transform: none; } 30% { transform: translateY(1.5px) scaleY(.95); } 65% { transform: translateY(-9px); } }
@keyframes intag-spring {
  0% { transform: translateX(var(--intag)); }
  66% { transform: translateX(0); }
  76% { transform: translateY(1px) scaleY(.96); }
  88% { transform: translateY(-7px); }
  100% { transform: none; }
}

/* ---- Ritstil: Neon Tokyo – lysande neonskyltar en kväll i Tokyo ----
   Figurerna är neonrör (tools/neonfigurer.py) och lyser bara mot mörker, så stilen har egna
   mörka färger och ersätter färgschemat. Rubriker, knappar och kort får ett neonsken. */
body.stil-neon {
  --ai-text: #3de8ff;          /* det spelaren skriver och andra framhävda texter: turkost neon */
  --paper: #0f0b1e;
  --paper-2: #171130;
  --card: #1b1433;
  --ink: #f4effe;
  --ink-soft: #b9b0d8;
  --line: #3b3068;
  --shu: #ff4fa8;
  --shu-dark: #e0368c;
  --on-accent: #fff;
  --ai: #120c26;
  --ai-light: #251a4c;
  --gold: #ffe14d;
  --chip-active: #3a1838;
  --choice-active: #142a4a;
  --hint-bg: #2a2140;
  --hint-line: #8a6d2a;
  --good-bg: #10302a;
  --good-line: #2b7a63;
  --good-ink: #b9ffe9;
  --cheer-bg: #24183f;
  --explain-bg: #161d3a;
  --explain-line: #34459a;
  --trail: #4c3f86;
  --overlay: rgba(5, 3, 15, .72);
  --shadow: rgba(0, 0, 0, .6);
  --maskot: #ff3b5c;
  --maskot-skugga: #b0213d;
  --neon-rosa: #ff4fa8;
  --neon-turkos: #3de8ff;
  background-image:
    radial-gradient(circle at 12% 0%, rgba(255, 79, 168, .16), transparent 42%),
    radial-gradient(circle at 92% 8%, rgba(61, 232, 255, .13), transparent 46%),
    radial-gradient(circle at 50% 110%, rgba(178, 107, 255, .14), transparent 50%);
  background-attachment: fixed;
}
.stil-neon .band { border-bottom-color: var(--neon-rosa); box-shadow: 0 2px 14px rgba(255, 79, 168, .55); }
.stil-neon h1, .stil-neon h2 {
  text-shadow: 0 0 6px rgba(255, 79, 168, .75), 0 0 18px rgba(255, 79, 168, .45);
}
.stil-neon .brand .logga { filter: drop-shadow(0 0 5px rgba(255, 79, 168, .7)); }
.stil-neon .card, .stil-neon .bubble, .stil-neon .tile, .stil-neon .category, .stil-neon .val, .stil-neon .chip,
.stil-neon .summary-fact, .stil-neon .hafte-knapp, .stil-neon .fact-card, .stil-neon .ovat {
  box-shadow: 0 0 0 1px rgba(61, 232, 255, .18), 0 0 14px rgba(61, 232, 255, .08);
}
.stil-neon .val[aria-pressed="true"], .stil-neon .chip[aria-pressed="true"] {
  border-color: var(--neon-turkos); box-shadow: 0 0 10px rgba(61, 232, 255, .55), inset 0 0 8px rgba(61, 232, 255, .2);
}
.stil-neon .primary { box-shadow: 0 0 16px rgba(255, 79, 168, .6), 0 3px 0 var(--shu-dark); }
.stil-neon .ram { border-color: rgba(61, 232, 255, .35); }
.stil-neon .answer:not(.besvarad) { text-shadow: 0 0 8px rgba(61, 232, 255, .6); }
.stil-neon .ljudord {
  color: #fff3fb; -webkit-text-stroke: 0;
  text-shadow: 0 0 4px var(--neon-rosa), 0 0 12px var(--neon-rosa), 0 0 24px var(--neon-rosa);
}
.stil-neon .ljudord.lugn { text-shadow: 0 0 4px var(--neon-turkos), 0 0 12px var(--neon-turkos), 0 0 24px var(--neon-turkos); }

/* ---- Ritstil: Kawaii – sött och mjukt, som klistermärken i pastell ----
   Figurerna (tools/kawaiifigurer.py → figurer/kawaii/) är runda klistermärken med vit kant, rosa kinder och
   ω-mun. Pastellfärgerna hör till stilen och ersätter färgschemat (egnaFarger). Typsnittet M PLUS Rounded 1c
   är runt men lättläst. Kort och knappar får stora rundade hörn, pastellkant och en mjuk skugga, och sidan
   ett svagt prickmönster. */
body.stil-kawaii {
  --font: "M PLUS Rounded 1c", "Zen Maru Gothic", system-ui, sans-serif;
  --paper: #fff5f8;
  --paper-2: #fbe3ec;
  --card: #fffdfe;
  --ink: #4a3442;
  --ink-soft: #8a6f80;
  --line: #f4cfdd;
  --shu: #f0709a;
  --shu-dark: #d4567f;
  --on-accent: #fff;
  --ai: #b98ad8;
  --ai-light: #cfa8e8;
  --ai-text: #8a5cc0;
  --gold: #f2b83a;
  --chip-active: #ffe4ee;
  --choice-active: #f1e6fb;
  --hint-bg: #fff4dc;
  --hint-line: #f6d79a;
  --good-bg: #e6f8f1;
  --good-line: #b6e8d6;
  --good-ink: #2f6b56;
  --cheer-bg: #fff;
  --explain-bg: #f3eefc;
  --explain-line: #dccdf3;
  --trail: #f2b8cc;
  --overlay: rgba(74, 52, 66, .4);
  --shadow: rgba(122, 85, 102, .18);
  --wood: #c48aa0;
  --wood-dark: #a26b82;
  --soroban-bg: #fdeef3;
  --bead: #c99ad8;
  --bead-active: #f0709a;
  --maskot: #ff8fae;          /* rosa daruma */
  --maskot-skugga: #e06a8e;
  --pastell-kant: #f6c9da;
  --pastell-skugga: #f8dbe6;
  background-image: radial-gradient(#ffd3e2 1.3px, transparent 1.6px), radial-gradient(#e3d4fb 1.3px, transparent 1.6px);
  background-size: 26px 26px; background-position: 0 0, 13px 13px;
}
.stil-kawaii h1, .stil-kawaii h2, .stil-kawaii h3 { font-weight: 800; }
.stil-kawaii button { font-weight: 700; }
.stil-kawaii .card, .stil-kawaii .fact-card, .stil-kawaii .summary-fact, .stil-kawaii .ovat {
  border: 2.5px solid var(--pastell-kant); border-radius: 26px; box-shadow: 0 6px 0 var(--pastell-skugga);
}
.stil-kawaii .bubble, .stil-kawaii .sensei-bubbla { border: 2px solid var(--pastell-kant); border-radius: 22px; }
.stil-kawaii .sensei-bubbla { --kant: var(--pastell-kant); }
.stil-kawaii .val, .stil-kawaii .chip, .stil-kawaii .category, .stil-kawaii .tile, .stil-kawaii .hafte-knapp, .stil-kawaii .scen-namn {
  border: 2px solid var(--pastell-kant); border-radius: 999px; box-shadow: 0 3px 0 var(--pastell-skugga);
}
/* Sammanfattningens rutor: mjukt rundade i stället för helt runda (texten hamnade nära kanten), siffran och texten
   i mitten, som ett klistermärke */
.stil-kawaii .tile { border-radius: 28px; text-align: center; padding: 16px 14px; }
.stil-kawaii .val[aria-pressed="true"], .stil-kawaii .chip[aria-pressed="true"] { border-color: var(--shu); background: var(--chip-active); }
.stil-kawaii .primary { border-radius: 999px; box-shadow: 0 4px 0 var(--shu-dark), 0 6px 14px rgba(240, 112, 154, .3); }
.stil-kawaii .ghost { border-radius: 999px; }
.stil-kawaii .fact-card { border-top: 8px solid var(--ai-light); }
.stil-kawaii .band { border-bottom-color: var(--shu); }
.stil-kawaii .ram { border: 2px dotted var(--shu); }
.stil-kawaii .trail-path { background: repeating-linear-gradient(90deg, var(--trail) 0 6px, transparent 6px 14px); }
.stil-kawaii .ljudord {
  color: #ff7fa8; -webkit-text-stroke: 5px #fff; paint-order: stroke fill;
  text-shadow: 0 3px 0 #f6c9da, 0 0 14px rgba(255, 143, 174, .45);
}
.stil-kawaii .ljudord.lugn { color: #a98ce0; }
.stil-kawaii .glitter { color: #ff9ec0; }

/* ---- Ritstil: Chibi – animefigurer med stora huvuden och stora ögon ----
   Figurerna (tools/chibifigurer.py → figurer/chibi/) är super-deformerade: jättestort huvud, liten kropp,
   stora glänsande animeögon och anime-symboler för känslor. Färgschemat gäller som vanligt. Rubrikerna i
   Mochiy Pop One (runt och poppigt, som i anime), korten får en tunn mörk ram och en färgad skugga som i en anime-ruta. */
.stil-chibi { --chibi-kant: var(--ink); }
.stil-chibi h1, .stil-chibi h2, .stil-chibi .sida-rubrik { font-family: "Mochiy Pop One", var(--font); font-weight: 400; letter-spacing: .01em; }
.stil-chibi .card, .stil-chibi .fact-card, .stil-chibi .summary-fact, .stil-chibi .ovat {
  border: 2px solid var(--chibi-kant); border-radius: 18px;
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--shu) 40%, transparent);
}
.stil-chibi .bubble, .stil-chibi .sensei-bubbla { border: 2px solid var(--chibi-kant); border-radius: 18px; }
.stil-chibi .log > .bubble::before { border-color: var(--chibi-kant); }
.stil-chibi .sensei-bubbla { --kant: var(--chibi-kant); }
.stil-chibi .val, .stil-chibi .chip, .stil-chibi .category, .stil-chibi .tile { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); border-radius: 14px; }
.stil-chibi .val[aria-pressed="true"], .stil-chibi .chip[aria-pressed="true"] { border-color: var(--shu); box-shadow: 3px 3px 0 color-mix(in srgb, var(--shu) 40%, transparent); }
.stil-chibi .primary { border: 2px solid var(--chibi-kant); box-shadow: 4px 4px 0 var(--chibi-kant); }
.stil-chibi .primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--chibi-kant); }
.stil-chibi .fact-card { border-top: 8px solid var(--shu); }
.stil-chibi .ram { border: 2px solid color-mix(in srgb, var(--ink) 40%, var(--trail)); }
.stil-chibi .ljudord {
  font-family: "Mochiy Pop One", var(--font); color: var(--gold);
  -webkit-text-stroke: 2px var(--ink); text-shadow: 3px 3px 0 var(--shu);
}
.stil-chibi .ljudord.lugn { color: #8fd3ff; text-shadow: 3px 3px 0 var(--ai); }

/* Inställningar: färgschemat vilar när stilen har egna färger (egnaFarger i utseende.js, t.ex. Neon Tokyo).
   Knapparna blir bleka och går inte att trycka på, men det valda schemat syns och gäller i andra stilar. */
.utseende-group.vilande .chips { opacity: .38; filter: grayscale(.7); }
.utseende-group.vilande .chip:disabled { cursor: default; }
.vilande-text { margin: -2px 0 8px; color: var(--ink-soft); font-size: .95rem; }

/* ---- Plattformsbanan (plattform.js, ritstilen Video Game) ----
   Banan ritas i ett eget koordinatsystem (.bana) och skalas till banans bredd; den vanliga stigen,
   ramarna och löparen döljs. Stationerna är skyltar på stolpar, stämplade när frågan är klar. */
.trail.plattform { margin-bottom: 14px; border: 3px solid var(--spelkant, #1f1a24); border-radius: 12px; overflow: hidden; }
.trail.plattform > :not(.bana):not(.trail-count):not(.effekter):not(.perfekt-stampel) { display: none; }
.trail.plattform .trail-count { z-index: 2; left: 8px; top: 6px; background: var(--card); padding: 0 8px; border-radius: 8px; }
.bana { position: absolute; left: 0; top: 0; height: 280px; transform-origin: 0 0; }
.bana > svg { position: absolute; inset: 0; }
.bana-skylt { position: absolute; width: 40px; margin-left: -20px; }
.bana-ram { width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; border: 3px solid #1f1a24; background: #fffaf1;
  position: relative; box-shadow: 0 3px 0 #1f1a24; color: var(--shu); }
.bana-stolpe { width: 5px; height: 22px; margin: 3px auto 0; background: #8a5a33; border: 1.5px solid #1f1a24; }
.bana-skylt.fakta .bana-ram::after { content: "※"; position: absolute; top: -10px; right: -12px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--shu); color: var(--on-accent); font-size: 11px; display: grid; place-items: center; border: 2px solid #1f1a24; }
.bana-stampel { position: absolute; inset: 2px; }
.bana-stampel svg { width: 100%; height: 100%; display: block; }
.bana-ram[data-sort="ledtrad"] .bana-stampel { opacity: .45; transform: rotate(18deg); }
.bana-stampel.ny { animation: stampla .4s cubic-bezier(.2,.8,.3,1.3) both; }
.trail.perfekt .bana-ram { color: var(--gold); border-color: var(--gold); transition: color .3s ease 1.1s, border-color .3s ease 1.1s; }
.bana-mal { position: absolute; width: 56px; margin-left: -28px; }
.bana-mal svg { width: 100%; display: block; }
.bana-lopare { position: absolute; left: 0; top: 0; width: 76px; margin-left: -38px; transform-origin: 50% 100%; z-index: 1; }
.bana-lopare svg { width: 100%; display: block; overflow: visible; }
.bana-lopare .springa-a, .bana-lopare .springa-b, .bana-lopare .ruta-hopp, .bana-lopare .ruta-glid { display: none; }
.bana-lopare[data-ruta="a"] .springa-a, .bana-lopare[data-ruta="b"] .springa-b,
.bana-lopare[data-ruta="hopp"] .ruta-hopp, .bana-lopare[data-ruta="glid"] .ruta-glid { display: inline; }
.bana-lopare .balte-svans { transform-box: view-box; transform-origin: 24px 45px; animation: fladdra .3s ease-in-out infinite alternate; }
.pb-guppa { animation: pb-guppa 2.2s ease-in-out infinite; } @keyframes pb-guppa { 50% { transform: translateY(-6px); } }
.pb-tassar { animation: pb-tassa .3s steps(1, end) infinite; } @keyframes pb-tassa { 50% { transform: translateY(-2px); } }
.pb-partikel { position: absolute; z-index: 3; animation: pb-partikel .7s ease-out forwards; pointer-events: none; }
.pb-partikel.plask { width: 8px; height: 8px; border-radius: 50%; background: #bfe6ff; border: 1.5px solid #5fb8f0; }
.pb-partikel.rok { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 1.5px solid #ccc; }
.pb-partikel.stjarna { color: #ffd23f; font-size: 16px; -webkit-text-stroke: 1px #1f1a24; }
.pb-partikel.ljud { color: #ffd23f; font-weight: 900; font-size: 18px; -webkit-text-stroke: 1.5px #1f1a24; white-space: nowrap; }
@keyframes pb-partikel { to { transform: translate(var(--dx), -22px); opacity: 0; } }
/* Luftbanan (löpare som flyger, Kikai): jeten brinner när löparen har rutan "jet". Lagret .bana-fram
   (den främre lyktan, molnväggen) ritas framför löparen. */
.bana > svg.bana-fram { z-index: 2; pointer-events: none; }
.bana-lopare[data-ruta="jet"] .jet { visibility: visible; }
.bana-lopare .jet > * { animation: jet-fladder .1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
.pb-partikel.gnista { color: #ffd23f; font-size: 14px; -webkit-text-stroke: 1px #1f1a24; }
.pb-vind { animation: pb-vind 1s linear infinite; } @keyframes pb-vind { to { transform: translateY(-26px); } }
.pb-lykta { animation: pb-lykta 3s ease-in-out infinite; } @keyframes pb-lykta { 50% { transform: translateY(-6px); } }
.pb-sno circle { animation: pb-sno 1s linear infinite; } @keyframes pb-sno { from { transform: translate(40px, -20px); } to { transform: translate(-60px, 30px); } }
.pb-drake { animation: pb-drake 1.8s ease-in-out infinite alternate; } @keyframes pb-drake { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
/* Rälsbanan (löpare som rullar, Shinkansen): fartlinjerna (springa-a/-b) syns bara i fart, rutan "stopp" döljer dem.
   Skyltarna står högre, ovanför tåget. */
.bana.rals .bana-stolpe { height: 50px; }
.pb-vag { animation: pb-vag 2s ease-in-out infinite alternate; } @keyframes pb-vag { to { transform: translateX(-8px); } }
.pb-blink { animation: pb-blink .5s steps(1, end) infinite; } .pb-blink.pb-sen { animation-delay: -.25s; } @keyframes pb-blink { 50% { fill: #5a2a2a; } }
.pb-partikel.sno { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 1.5px solid #b9c8dc; }
.pb-partikel.vind { width: 22px; height: 3px; border-radius: 2px; background: #cfe6f5; }

/* ---- Adminsidan (bara för admins: hantera spelare och startvärden, se renderAdmin i app.js) ---- */
#screen-admin { max-width: 948px; margin-left: auto; margin-right: auto; }
.admin-del { margin-top: 16px; padding: 16px 20px; }
.admin-del h2 { margin: 0 0 10px; font-size: 1.25rem; }
.admin-del p { margin: 6px 0; line-height: 1.5; }
.admin-fel { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--hint-bg); border: 2px solid var(--hint-line); }
.admin-tabell-rulla { overflow-x: auto; }
@media (min-width: 900px) { .admin-tabell-rulla { overflow: visible; } }   /* menyn "Åtgärder" får sticka ut nedanför */
.admin-tabell { border-collapse: collapse; width: 100%; font-size: .95rem; margin-top: 6px; }
.admin-tabell th, .admin-tabell td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-tabell th { color: var(--ink-soft); font-weight: 700; }
.admin-tabell .tal { text-align: right; font-variant-numeric: tabular-nums; }
.admin-tabell .admin-attr { text-align: center; }
.admin-tabell input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--shu); vertical-align: middle; }
.admin-namn { font-weight: 700; }
.admin-attribut { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 12px 0 0; font-size: .9rem; color: var(--ink-soft); }
.admin-attribut dt { font-weight: 700; }
.admin-attribut dd { margin: 0; }
.admin-nu { color: var(--ink-soft); }
.admin-knappar { display: flex; gap: 12px; flex-wrap: wrap; }
.admin-sammanfattning { font-weight: 700; margin-top: 14px !important; }

/* ---- Pågående pass på startsidan (högst ett per spelare): ett lock över passkortet. Valen syns gråa under en
   halvgenomskinlig hinna, och mitt på ligger en ruta med "Fortsätt passet" och "Ge upp passet". ---- */
.passkort.last > :not(.pagaende-lock) { opacity: .45; pointer-events: none; }
.pagaende-lock { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; border-radius: inherit;
  background: color-mix(in srgb, var(--paper) 45%, transparent); }
.pagaende { max-width: 420px; padding: 18px 24px; border-radius: 16px; text-align: center; background: var(--card);
  border: 2px solid var(--line); box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 18%, transparent); }
.pagaende p { margin: 0 0 14px; font-weight: 700; font-size: 1.1rem; }
@media (max-width: 860px) { .pagaende-lock { align-items: start; padding-top: 60px; } }   /* högt kort: locket syns direkt */
.pagaende-fortsatt { margin: 0 auto; font-size: 1.2rem; padding: 12px 34px; }
.ge-upp { display: block; margin: 12px auto 0; padding: 0; background: none; border: 0; box-shadow: none; color: var(--ink-soft);
  font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; }
.ge-upp:hover { color: var(--ink); }

/* Sammanfattningen: knepen som hjälpte, först, i ett kort där sensein presenterar dem (renderTricks i app.js) */
.knep-kort { display: flex; align-items: center; gap: 18px; margin-top: 16px; padding: 16px 22px; }
.knep-sensei { width: 84px; flex: none; }
.knep-innehall { min-width: 0; }
.knep-innehall h2 { margin: 0 0 8px; font-size: 1.35rem; }
.knep-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.knep-lista .knep { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; line-height: 1.45; }
.knep-text { margin: 0; font-size: 1.1rem; }
/* Glödlampan: gul glödlampa med tuschkontur; ritstilarna ger den sin egen form */
.glodlampa { width: 30px; flex: none; display: block; }
.glodlampa svg { display: block; width: 100%; height: auto; overflow: visible; }
.glodlampa .lampa-glas { fill: var(--gold); stroke: var(--ink); }
.glodlampa .lampa-glans { stroke: #fff; fill: #fff; }
.glodlampa .lampa-sockel { stroke: var(--ink-soft); fill: var(--ink-soft); }
.glodlampa .lampa-sken { stroke: var(--gold); }
.glodlampa-pixel { display: none !important; }
.stil-videogame .glodlampa-vanlig { display: none; }
.stil-videogame .glodlampa-pixel { display: block !important; }
.stil-videogame .glodlampa .lampa-glas { stroke: none; }
.stil-videogame .glodlampa .lampa-kontur { fill: var(--spelkant); }
.stil-shonen .glodlampa .lampa-glas { stroke: var(--tusch); stroke-width: 2.6; }
.stil-shonen .glodlampa .lampa-sken { stroke: var(--tusch); }
.stil-neon .glodlampa svg { filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 8px var(--gold)); }
.stil-neon .glodlampa .lampa-glas { fill: none; stroke: var(--gold); }
.stil-sumie .glodlampa svg { filter: url(#pensel-sida); }
.stil-kawaii .glodlampa .lampa-glas { stroke: var(--pastell-kant); }
@media (max-width: 520px) { .knep-sensei { width: 60px; } .knep-kort { gap: 12px; padding: 12px 14px; } }

/* ---- Knephäftet (openKnephafte/fillKnepSida i app.js): samma häfte som faktahäftet, röd pärm ---- */
.hafte-knapp.knep .hafte-ikon { background: linear-gradient(90deg, color-mix(in srgb, var(--shu) 70%, white) 0 4px, var(--shu) 4px); }
.hafte.knep .parm-fram { --ai: var(--shu); --ai-light: color-mix(in srgb, var(--shu) 65%, white); }
/* Senseihäftet: en mörk pärm i tusch, som en gammal lärares anteckningsbok. Fasta färger (inte --ink, som är ljus i
   mörka färgscheman), och --ai sätts inte utifrån sig självt: en variabel som pekar på sig själv blir ogiltig, och
   då försvann hela pärmen. */
.hafte-knapp.sensei .hafte-ikon { background: linear-gradient(90deg, #6b6874 0 4px, #2e2c35 4px); }
.hafte.sensei .parm-fram { --ai: #2e2c35; --ai-light: #5d5a68; }
.sensei-sida-figur { width: 30px; flex: none; }
.sensei-sida-rubrik { font-style: italic; }
.innehall-tips { font-style: italic; }
.hafte-sida.innehall { overflow-y: auto; }
/* Förteckningen smal och centrerad, så att det inte blir för långt mellan namnet och sidnumret */
.hafte-sida.innehall > * { max-width: 300px; margin-left: auto; margin-right: auto; }
.hafte-sida.innehall > .sida-rubrik { text-align: center; }
.innehall-kapitel { font-weight: 900; margin: 12px 0 4px; color: var(--ink); }
.innehall-rad {
  display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 4px 0; text-align: left;
  background: none; border: 0; border-bottom: 1px dotted var(--line); border-radius: 0; color: var(--ink); font: inherit; cursor: pointer;
}
.innehall-rad:hover { color: var(--shu); }
.innehall-nr { color: var(--ink-soft); font-weight: 700; }
.innehall-rad > span:first-child { flex: 1; }
.innehall-nr { min-width: 2ch; text-align: right; }
.sida-tema { float: right; color: var(--ink-soft); font-weight: 700; font-size: .85rem; }
/* Texten står på papperets linjer (32 punkter mellan dem, första linjen 101 punkter ner): huvudet tar 40 punkter,
   sedan har varje rad 32 punkters höjd, och en tom rad före exemplet och raden om andra räknesätt */
.knep-sida-huvud { display: flex; align-items: center; gap: 10px; height: 34px; margin-bottom: 6px; }
.knep-sida-huvud .glodlampa { width: 30px; }
.knep-kapitel { color: var(--ink-soft); font-weight: 700; font-size: .95rem; }
.knep-sida-rubrik { margin: 0; font-size: 1.5rem; line-height: 32px; }
.knep-sida-text { font-size: 1.12rem; line-height: 32px; margin: 0; }
.knep-sida-exempel, .knep-sida-ditt { font-size: 1.05rem; line-height: 32px; margin: 0; }
.knep-sida-exempel { margin-top: 32px; }
.knep-sida-etikett { font-weight: 800; color: var(--shu-dark); }
.knep-sida-ocksa { color: var(--ink-soft); font-style: italic; line-height: 32px; margin: 32px 0 0; }
/* Sammanfattningen: ett knep som är nytt i knephäftet */
.nytt-knep {
  display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; font-size: .8rem; font-weight: 800;
  background: var(--gold); color: var(--ink); vertical-align: 2px;
}