/* Palette (Ordskapa, 2026-10-07): purple #743f8e, granite #4a4f57, paper #f7f6f2, ink #1c1d21,
   terracotta #c4571a for "you are here" (fills, outlines, large text); lavender fills with ink text in dark mode. */
:root {
  --blue: #743f8e; --on-blue: #fff; --blue-soft: #efe6f3; --granite: #4a4f57; --paper: #f7f6f2; --ink: #1c1d21;
  --yellow: #c4571a; --ok: #2f7d4f; --bad: #b4342c; --line: #d9d7d0; --radius: 10px;
  --serif: "Charter", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #15171b; --ink: #ecebe6; --granite: #a8adb5; --blue-soft: #2a1f33; --line: #2e323a; --yellow: #f0a070;
    --blue: #d9b8ec; --on-blue: #15171b; --blue-ink: #d9b8ec; } /* purple is 2.3:1 on the dark card, so lavender fills with ink on them (9.6:1) */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: var(--blue); color: var(--on-blue); border: 0; border-radius: var(--radius); padding: .6em 1.1em; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
button.ghost, .ghost.btn { background: transparent; color: var(--blue-ink, var(--blue)); border: 1.5px solid var(--blue-ink, var(--blue)); }
.ghost.btn { display: inline-block; padding: .6em 1.1em; border-radius: var(--radius); cursor: pointer; }
button:focus-visible, input:focus-visible, .stop:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
input, textarea, select { width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius); padding: .6em .8em; background: transparent; }
textarea { resize: vertical; }
h1 { font-family: var(--serif); font-weight: 500; font-size: 1.55rem; line-height: 1.2; margin: .1em 0 .4em; }
h2 { font-size: 1.05rem; margin: 0 0 .5em; font-weight: 600; }
.muted { color: var(--granite); font-size: .92rem; }
.row { display: flex; gap: .6em; align-items: center; }
.wrap { flex-wrap: wrap; }
.big { font-size: 2rem; font-weight: 600; line-height: 1.1; }
.empty { color: var(--granite); border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 1em; }

header { display: flex; justify-content: space-between; align-items: center; padding: .7em 1em .5em; max-width: 720px; margin: 0 auto; }
/* The wordmark: "Ord" on the sign in Lexend (made for easier reading), "skapa" handwritten in Caveat (each only its own letters,
   OFL: fonts/OFL-*.txt) with three small
   stars that twinkle on and off out of step; still for readers who ask for less motion. The icon is for the home screen only. */
@font-face { font-family: "Lexend Ord"; src: url("/fonts/lexend-ord.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Caveat skapa"; src: url("/fonts/caveat-skapa.woff2") format("woff2"); font-weight: 700; font-display: block; }
.brand { display: flex; align-items: baseline; font-size: 1.15rem; line-height: 1; font-weight: 600; white-space: nowrap; }
.sign { background: var(--blue); color: var(--on-blue); border-radius: .3em; padding: .16em .36em .2em; font-family: "Lexend Ord", var(--sans); font-weight: 700; letter-spacing: .02em; }
.skapa { position: relative; margin: 0 .8em 0 .2em; font-family: "Caveat skapa", cursive; font-weight: 700; font-size: 1.6em; }
.gl { position: absolute; overflow: visible; fill: var(--yellow); filter: drop-shadow(0 0 .05em var(--yellow)); transform-box: fill-box; transform-origin: center; }
.gl.t1 { top: -.16em; right: -.42em; width: .36em; height: .36em; animation: tindra 3.1s ease-in-out infinite; }
.gl.t2 { top: .06em; right: -.72em; width: .21em; height: .21em; fill: var(--blue); filter: drop-shadow(0 0 .05em var(--blue)); animation: tindra 2.3s ease-in-out .9s infinite; }
.gl.t3 { bottom: .08em; right: -.5em; width: .15em; height: .15em; animation: tindra 3.9s ease-in-out 1.7s infinite; }
@keyframes tindra {
  0%, 18%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  38% { opacity: 1; transform: scale(1.15) rotate(30deg); }
  48% { opacity: .85; transform: scale(.9) rotate(40deg); }
  62% { opacity: 1; transform: scale(1) rotate(45deg); }
  82% { opacity: 0; transform: scale(.4) rotate(70deg); }
}
@media (prefers-reduced-motion: reduce) { .brand .gl { animation: none; } } /* .brand raises it above .gl.t1 */
/* Sync button. Colour is the state — the point is that "unsynced" is
   noticeable from any tab. Amber, not red: nothing is lost, it just lives here. */
.pill { font-size: .8rem; padding: .35em .8em; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--granite); max-width: 55vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-dirty { background: #9c4210; border-color: #9c4210; color: #fff; font-weight: 600; } /* white 6.1:1; ink on terracotta is only 3.8 */
@media (prefers-color-scheme: dark) { .sync-dirty { background: var(--yellow); border-color: var(--yellow); color: #15171b; } }
.sync-never { border-color: var(--yellow); color: var(--ink); }
.sync-clean { border-color: var(--ok); color: var(--ok); }
.sync-error { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 600; }
.sync-busy { opacity: .7; }

main { max-width: 720px; margin: 0 auto; padding: 0 1em 6em; }
.view > section { margin: 1.4em 0; }

/* Episodes as stops on a line */
.line { display: flex; align-items: center; gap: .35em; overflow-x: auto; padding: .6em 0 .8em; position: relative; scrollbar-width: none; }
.stop { position: relative; z-index: 1; flex: 0 0 auto; width: 2.1em; height: 2.1em; padding: 0; border-radius: 50%; font-size: .85rem; font-weight: 600; background: var(--paper); color: var(--granite); border: 2.5px solid var(--line); }
.stop.past { border-color: var(--blue); color: var(--blue-ink, var(--blue)); }
.stop.here { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.stop.viewing { box-shadow: 0 0 0 3px var(--yellow); }
.stop.own { border-style: dashed; }
.sep { width: 1.2em; flex: 0 0 auto; }

/* Library */
.libhead { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin: .6em 0 .4em; }
.libhead h1 { margin: 0; }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg button { background: transparent; color: var(--granite); border-radius: 0; padding: .4em .8em; }
.seg button.on { background: var(--blue-soft); color: var(--blue-ink, var(--blue)); }
.sortseg { margin-left: auto; } .sortseg button { padding: .45em .6em; }
.sortval { margin-left: auto; display: inline-flex; align-items: center; gap: .35em; } .sortval select { padding: .4em .5em; font-size: .9rem; } .sortval #sortDir { padding: .35em .6em; font-size: 1rem; }
body.testing #story, body.testing #hiddenHint, body.testing #epOrd, body.testing #epSlut, body.testing #epActions, body.testing #epStatus, body.testing #note, body.testing .controls, body.testing .rtransport, body.testing .rmodes, body.testing .temporow { display: none; }
.testhead { margin: .8em 0 .2em; }
#gardenView .garden { margin-top: .2em; }
/* ===== Ordlek: the games' hub and the bar above each game ===== */
.lekh { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; margin: .3em 0 0; } .lekp { margin: .2em 0 1em; }
.lekbar { display: flex; align-items: center; gap: .8em; margin: .2em 0 .5em; }
.spelbar { padding: .5em .8em 0; color: var(--dis); font-size: .9rem; } .spelbar button { color: var(--skum); border: 1px solid rgba(234,229,217,.25); border-radius: 999px; padding: .3em .8em; background: rgba(234,229,217,.06); }
.novels { display: grid; gap: .8em; margin: .6em 0 1.2em; }
.novels.grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.novels.list { grid-template-columns: 1fr; }
.ncover { flex: 0 0 auto; width: 2.8em; height: 3.6em; border-radius: 6px; color: #fff; display: grid; place-items: center; font-family: var(--serif); font-size: 1.3rem; overflow: hidden; background: var(--c1, var(--blue)); }
.novels.grid .ncover { width: 100%; height: 5.2em; font-size: 1.6rem; }
.ncover .emoji { font-size: 1.7em; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.ncover .initial { opacity: .95; }
.pat0 { background: linear-gradient(135deg, var(--c1) 0 55%, var(--c2) 55%); }
.pat1 { background: repeating-linear-gradient(45deg, var(--c1) 0 .6em, var(--c2) .6em 1.2em); }
.pat2 { background: radial-gradient(circle at 70% 30%, var(--c2) 0 1.4em, var(--c1) 1.45em); }
.pat3 { background: repeating-linear-gradient(0deg, var(--c2) 0 .45em, var(--c1) .45em .9em); }
.nbody { display: grid; gap: .15em; min-width: 0; flex: 1; }
.ntitle { font-weight: 600; }
.nsub { color: var(--granite); font-size: .85rem; }
.nmeta { color: var(--granite); font-size: .78rem; }
.ndel { position: absolute; top: .3em; right: .5em; color: var(--granite); font-size: 1.1rem; padding: .1em .3em; }
.pastebox { display: grid; gap: .5em; margin: .8em 0; }
.own { margin-top: 1.4em; }
.customs { list-style: none; padding: 0; margin: 0; }
.customs li { display: flex; justify-content: space-between; gap: 1em; padding: .5em 0; border-bottom: 1px solid var(--line); align-items: baseline; }
button.link { background: transparent; color: var(--blue-ink, var(--blue)); padding: 0; text-align: left; }

/* New novel */
.steps { padding-left: 1.3em; margin: .4em 0 .6em; }
.steps li { margin: .3em 0; }
.form { display: grid; gap: .7em; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 1em; }
.form label { display: grid; gap: .25em; font-size: .9rem; color: var(--granite); }
.form label input, .form label select, .form label textarea { color: var(--ink); }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7em; }
.prompt { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.4; }
.report { padding-left: 1.2em; margin: .5em 0; }
.report .bad { color: var(--bad); } .report .warn { color: #8a6d00; }
@media (prefers-color-scheme: dark) { .report .warn { color: var(--yellow); } }
.small { padding: .35em .7em; font-size: .9rem; }

/* Reader bar: always visible while the text scrolls under it. */
.bar { position: sticky; top: 0; z-index: 5; background: var(--paper); padding: .5em 0 .6em; border-bottom: 1px solid var(--line); margin: 0 -1em; padding-left: 1em; padding-right: 1em; }
.barrow { display: flex; align-items: center; gap: .6em; }
.bartitle { flex: 1; min-width: 0; }
.bartitle .muted { font-size: .78rem; }
.eptitle { font-family: var(--serif); font-size: 1.1rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controls { margin-top: .6em; }
.temporow { display: flex; align-items: center; gap: .6em; margin-top: .45em; font-size: .8rem; color: var(--granite); }
.temporow input[type=range] { flex: 1; padding: 0; border: 0; accent-color: var(--blue); min-width: 0; }
.temporow b { min-width: 2.6em; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.round.on { background: var(--blue-soft); border-color: var(--blue); }
.round .lp { font-size: .55rem; position: absolute; right: -.15em; bottom: -.2em; background: var(--blue); color: var(--on-blue); border-radius: 999px; padding: 0 .35em; line-height: 1.4; }
.round { position: relative; }
.playbtn { width: 3em; height: 3em; border-radius: 50%; font-size: 1.1rem; padding: 0; flex: 0 0 auto; }
.round { width: 2.4em; height: 2.4em; border-radius: 50%; padding: 0; flex: 0 0 auto; font-size: .95rem; }
.seek { flex: 1; min-width: 0; display: grid; gap: .1em; }
.seek input[type=range] { width: 100%; padding: 0; border: 0; accent-color: var(--blue); }
.seekinfo { display: flex; justify-content: flex-end; align-items: center; gap: .8em; font-size: .78rem; color: var(--granite); white-space: nowrap; }
.hint { color: var(--granite); border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 1em; margin: 1em 0; text-align: center; }

/* Text modes. 0: hidden. 1: only the sentence being spoken (and its speaker
   label). 2: everything. CSS only, so the toggle is instant mid-sentence. */
.story.mode-0 { display: none; }
.story.mode-1 .sent { display: none; }
.story.mode-1 .sent.now { display: inline; }
.story.mode-1 p:not(.has-now) { display: none; }
.story.mode-1 { font-size: 1.5rem; margin: 1.2em 0; }

/* The story — the hero */
.story { font-family: var(--serif); font-size: 1.28rem; line-height: 1.62; max-width: 34em; margin-top: 1em; }
.story p { margin: 0 0 1.05em; }
.who { display: block; font-family: var(--sans); font-size: .72rem; color: var(--granite); margin-bottom: .15em; }
.sent { cursor: pointer; border-radius: 4px; transition: background .15s; }
.sent.now { background: var(--blue-soft); box-shadow: 0 0 0 4px var(--blue-soft); }
.w { cursor: pointer; }
.w.saved { text-decoration: underline dotted var(--blue) 1.5px; text-underline-offset: 3px; }
.actions { margin: 1.2em 0; }

.pop { position: absolute; left: 1em; right: 1em; max-width: 420px; margin: 0 auto; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--radius); padding: .9em 1em; box-shadow: 0 8px 28px rgba(0,0,0,.18); z-index: 20; }
.pop-word { font-family: var(--serif); font-size: 1.3rem; }
.pop-en { font-size: 1.05rem; margin: .1em 0 .3em; }
.pop-wikt { display: block; margin: .4em 0 .2em; }
.pop-ex { color: var(--granite); font-style: italic; margin: .3em 0 .5em; font-family: var(--serif); }
.pop .row { margin-top: .6em; justify-content: space-between; }
.pop-acts { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .7em; }
.pop-acts .small { padding: .4em .7em; font-size: .85rem; white-space: nowrap; }
.pop-save { display: block; width: 100%; margin-top: .7em; }
.pop .tag { display: block; margin-top: .7em; }
.tag { color: var(--granite); font-size: .85rem; }


/* Test & drill */
.qhead { display: flex; justify-content: space-between; color: var(--granite); font-size: .88rem; margin: .8em 0 .6em; }
.q { font-family: var(--serif); font-size: 1.35rem; line-height: 1.45; margin: .2em 0 .9em; }
.opts { display: grid; gap: .55em; }
.opt { background: transparent; color: var(--ink); border: 1.5px solid var(--line); text-align: left; padding: .8em 1em; font-size: 1.05rem; }
.opt.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.opt.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.qfoot { margin-top: 1em; display: flex; justify-content: space-between; align-items: center; gap: 1em; flex-wrap: wrap; }
.qfoot:not(:empty) { position: sticky; bottom: calc(3.4em + env(safe-area-inset-bottom)); background: var(--paper); padding: .6em 0; z-index: 5; border-top: 1px solid var(--line); }
.answer { color: var(--granite); }
.result { text-align: center; margin: 2em 0 1em; }
.result .big { font-size: 3rem; }
.missed { padding-left: 1.2em; }
.card { border: 1.5px solid var(--line); border-radius: var(--radius); padding: .9em 1em 1.1em; margin: 1em 0; }
.card.ok { border-color: var(--ok); } .card.bad { border-color: var(--bad); }
.card form { display: flex; gap: .5em; }
.say { background: transparent; padding: 0 .3em; font-size: 1rem; }

/* Glosor */
/* Glosor header in three lines (Linh, 2026-09-21): the count, the two big buttons side by side, the sorting. */
.glosorhead { display: grid; gap: .55em; margin: .3em 0 .6em; }
.glosorhead .glosorknappar { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.glosorhead .sortval { justify-content: flex-end; }
/* ===== Glosor statistics: three symbols with a number inside, and the words on their way as bars ===== */
.stats { display: grid; grid-template-columns: auto auto auto 1fr; gap: .8em; align-items: center; margin: .8em 0 .6em; padding: .6em .8em; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.stat { position: relative; width: 58px; height: 58px; display: grid; place-items: center; } .stat svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stat b { position: relative; z-index: 1; font-size: 1.15rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.stat.streak b { padding-top: 16px; color: #5a2a0a; text-shadow: 0 1px 0 rgba(255,255,255,.5); } .stat.days b { padding-top: 10px; } .stat.mastered b { padding-top: 16px; color: #5a3a12; text-shadow: none; }
.levels { display: grid; gap: 4px; min-width: 0; }
.levels .lvl { display: grid; grid-template-columns: 1.1em 1fr 1.6em; align-items: center; gap: .4em; font-size: .72rem; color: var(--granite); }
.levels .lvl i { display: block; height: 9px; border-radius: 5px; min-width: 3px; } .levels .lvl b { font-weight: 600; color: var(--ink); text-align: right; }
@media (max-width: 420px) { .stats { grid-template-columns: repeat(3, auto); } .stats .levels { grid-column: 1 / -1; } }
/* ===== the study pets ===== */
.pets { margin: .3em 0 .2em; }
.petrow { display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.petmini { width: 50px; height: 50px; padding: 2px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); display: grid; place-items: center; }
.petmini.on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); } .petmini.add { color: var(--granite); font-size: 1.3rem; border-style: dashed; }
.petmini .pet.sleeping { opacity: .55; } .petmini.star { border-color: #E9A63F; box-shadow: 0 0 0 2px rgba(233,166,63,.35); }
/* the rig: each part moves on its own */
.pet [class^="rig-"] { transform-box: fill-box; }
.pet .rig-head { transform-origin: 50% 100%; animation: rigHead 3.4s ease-in-out infinite; } @keyframes rigHead { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-4deg) translateY(-1px); } 70% { transform: rotate(3deg); } }
.pet .rig-body { transform-origin: 50% 100%; animation: rigBreathe 3.4s ease-in-out infinite; } @keyframes rigBreathe { 50% { transform: scale(1.03, .97); } }
.pet .rig-arm-l { transform-origin: 85% 8%; animation: rigArm 1.7s ease-in-out infinite alternate; } .pet .rig-arm-r { transform-origin: 15% 8%; animation: rigArm 1.7s ease-in-out infinite alternate-reverse; } @keyframes rigArm { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }
.pet .rig-leg-l { transform-origin: 50% 0%; animation: rigLeg 1.7s ease-in-out infinite alternate; } .pet .rig-leg-r { transform-origin: 50% 0%; animation: rigLeg 1.7s ease-in-out infinite alternate-reverse; } @keyframes rigLeg { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.pet .rig-tail { transform-origin: 100% 50%; animation: rigTail 1.3s ease-in-out infinite alternate; } @keyframes rigTail { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.pet .rig-wing-l { transform-origin: 100% 70%; animation: rigWing 1.1s ease-in-out infinite alternate; } .pet .rig-wing-r { transform-origin: 0% 70%; animation: rigWing 1.1s ease-in-out infinite alternate-reverse; } @keyframes rigWing { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }
.pet .rig-leg-nf, .pet .rig-leg-fb { transform-origin: 50% 0%; animation: rigStep var(--step, .9s) ease-in-out infinite alternate; } .pet .rig-leg-nb, .pet .rig-leg-ff { transform-origin: 50% 0%; animation: rigStep var(--step, .9s) ease-in-out infinite alternate-reverse; } @keyframes rigStep { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.pet .rig-wing { transform-origin: 100% 100%; animation: rigWing 1.1s ease-in-out infinite alternate; }
.petstage.form-1 .pet { --step: .45s; } .petstage.form-2 .pet { --step: .7s; } .petstage.form-3 .pet { --step: 1s; } .petstage.form-4 .pet { --step: 1.4s; }
.pet.sleeping [class^="rig-"], .pet.sleeping .pet-flame, .petwalk:has(.pet.sleeping) { animation-play-state: paused; }
.petretire { position: absolute; right: .6em; top: .5em; padding: .4em .8em; font-size: .85rem; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--ink); border: 1.5px solid var(--line); }
.petskydd { margin-left: auto; font-size: .85rem; color: var(--granite); }
.petmini.egg { border-style: dashed; opacity: .8; } .petmini.egg:hover { opacity: 1; border-color: var(--blue); }
.petmodal { position: fixed; inset: 0; z-index: 90; background: rgba(20,24,30,.55); display: flex; align-items: center; justify-content: center; padding: 1em; }
.petdialog { background: var(--paper); color: var(--ink); border-radius: 16px; padding: 1.1em 1.2em 1em; max-width: 380px; width: 100%; display: grid; gap: .6em; justify-items: center; text-align: center; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.petdialog h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; } .petdialog p { margin: 0; font-size: .92rem; color: var(--granite); }
.petdialog label { display: grid; gap: .2em; justify-items: center; font-size: .85rem; color: var(--granite); } .petdialog input { text-align: center; font-size: 1.05rem; padding: .4em .7em; }
.petdialog .row { justify-content: center; }
.petscene { position: relative; height: 230px; margin-top: .5em; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.petscene .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.petstage { position: absolute; left: 0; right: 0; bottom: 18px; display: grid; justify-items: center; }
/* Activity by age (Linh, 2026-09-11): the hatchling races and hops, the young one trots,
   the adult strolls, the master ambles. The figure turns round at each end. */
.petwalk { animation: petwalk var(--walk, 12s) ease-in-out infinite; }
.petstage.form-1 { --walk: 7s; --hop: 4px; } .petstage.form-2 { --walk: 12s; --hop: 2px; } .petstage.form-3 { --walk: 20s; --hop: 1px; } .petstage.form-4 { --walk: 30s; --hop: 0px; }
.petstage.form-0 .petwalk { animation: none; }
@keyframes petwalk { 0% { transform: translateX(-34%) scaleX(1); } 46% { transform: translateX(34%) scaleX(1); } 50% { transform: translateX(34%) scaleX(-1); } 96% { transform: translateX(-34%) scaleX(-1); } 100% { transform: translateX(-34%) scaleX(1); } }
/* The turn (Linh, 2026-09-11, final): no roll, no flip, no fade. The animal lies down — a hard cut
   from the walking pose to the lying pose — rests, is redrawn lying the other way in one cut,
   rests, and gets up into the walk with another cut. One cycle: 0–36 walk right · 36–52 turn ·
   52–84 walk left · 84–100 turn. Mirroring happens only in the invisible copy. */
.petwalk.turning { animation-name: petwalk2; position: relative; display: grid; justify-items: center; align-items: end; }
.petwalk.turning > span { grid-area: 1 / 1; display: block; line-height: 0; transform-origin: 50% 100%; animation: none var(--walk, 12s) linear infinite; }
.petwalk.turning .vy-sida { animation-name: poseWalk; } .petwalk.turning .vy-ligg { animation-name: lieA; } .petwalk.turning .vy-ligg2 { animation-name: lieB; }
.petwalk.turning .vy-ligg .rig-tail, .petwalk.turning .vy-ligg2 .rig-tail, .petwalk.turning .vy-ligg .rig-head, .petwalk.turning .vy-ligg2 .rig-head { animation: none; }
@keyframes petwalk2 { 0% { transform: translateX(-34%); } 36% { transform: translateX(34%); } 52% { transform: translateX(34%); } 84% { transform: translateX(-34%); } 100% { transform: translateX(-34%); } }
@keyframes poseWalk { 0%, 36% { opacity: 1; transform: scaleX(1); } 36.01% { opacity: 0; transform: scaleX(1); } 44% { opacity: 0; transform: scaleX(-1); } 51.99% { opacity: 0; transform: scaleX(-1); } 52%, 84% { opacity: 1; transform: scaleX(-1); } 84.01% { opacity: 0; transform: scaleX(-1); } 92% { opacity: 0; transform: scaleX(1); } 99.99% { opacity: 0; transform: scaleX(1); } 100% { opacity: 1; transform: scaleX(1); } }
/* A lies facing right at the right end, and facing left after the cut at the left end; B the reverse. */
@keyframes lieA { 0%, 36% { opacity: 0; transform: scaleX(1); } 36.01%, 44% { opacity: 1; transform: scaleX(1); } 44.01%, 92% { opacity: 0; transform: scaleX(1); } 92.01%, 99.99% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes lieB { 0%, 44% { opacity: 0; transform: scaleX(-1); } 44.01%, 51.99% { opacity: 1; transform: scaleX(-1); } 52%, 84% { opacity: 0; transform: scaleX(-1); } 84.01%, 92% { opacity: 1; transform: scaleX(-1); } 92.01%, 100% { opacity: 0; transform: scaleX(-1); } }
.petwalk.turning .pet { animation: pethop calc(var(--walk, 12s) / 14) ease-in-out infinite alternate; }
.petwalk .pet { animation: pethop calc(var(--walk, 12s) / 14) ease-in-out infinite alternate; } @keyframes pethop { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--hop, 0px))); } }
.petmini .pet.side, .petmini .pet { max-width: 100%; }
.petstage .pet { position: relative; z-index: 1; } /* the parts move on their own; the whole figure stays put */
@keyframes petbob { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-6px) rotate(-2deg); } 60% { transform: translateY(-2px) rotate(2deg); } }
.petstage .nest { position: absolute; bottom: -8px; width: 150px; height: 50px; z-index: 0; }
.petstage:has(.nest) .pet { animation: eggrock 2.8s ease-in-out infinite; } @keyframes eggrock { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.pet .pet-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.1s ease-in-out infinite alternate; } @keyframes flicker { from { transform: scaleY(.9) rotate(-3deg); } to { transform: scaleY(1.08) rotate(3deg); } }
.sc-ember { animation: ember 3s ease-in infinite; } @keyframes ember { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-60px); opacity: 0; } }
.sc-ripple { animation: ripple2 3s ease-out infinite; transform-box: fill-box; transform-origin: 50% 50%; } @keyframes ripple2 { from { transform: scale(.4); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
.sc-gem { animation: gem 2.4s ease-in-out infinite alternate; } @keyframes gem { from { opacity: .6; } to { opacity: 1; } } /* no filter in the keyframes: an animated drop-shadow repaints every frame */
.petfoot { position: absolute; left: .7em; bottom: .5em; display: flex; align-items: center; gap: .5em; }
.agering svg { width: 46px; height: 46px; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.petname { padding: 0; background: none; border: 0; color: #fff; font-family: var(--serif); font-size: 1.4rem; text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 10px rgba(0,0,0,.35); }
.el-vatten .petname, .el-tra .petname, .el-jord .petname, .el-metall .petname { color: var(--ink); text-shadow: 0 1px 2px rgba(255,255,255,.8), 0 0 8px rgba(255,255,255,.6); }
.petgauges { position: absolute; right: .6em; bottom: .5em; display: flex; gap: .4em; } .gauge svg { width: 44px; height: 44px; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.petempty { display: grid; gap: .15em; margin: .6em 0 .2em; padding: .7em .9em; border: 1.5px dashed var(--blue); border-radius: 14px; background: var(--blue-soft); }
.petempty b { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; } .petempty > span:last-child { font-size: .85rem; color: var(--granite); }
.petrow .petarrow { font-size: 1.6rem; line-height: 1; color: var(--blue-ink, var(--blue)); animation: nudge 1.1s ease-in-out infinite alternate; } @keyframes nudge { from { transform: translateX(0); } to { transform: translateX(6px); } }
.glos-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; margin: 1em 0 1em; text-align: center; font-size: .85rem; color: var(--granite); }
.addform { display: grid; gap: .5em; margin: .9em 0; }
.addform .addsv { display: flex; gap: .5em; } .addform .addsv input { flex: 1; min-width: 0; } .addform .addsv button { flex: none; white-space: nowrap; }
.wordlist { list-style: none; padding: 0; margin: 1.2em 0; }
.wordlist li { display: grid; grid-template-columns: 3.2em 1fr auto auto; gap: .6em; align-items: baseline; padding: .55em 0; border-bottom: 1px solid var(--line); }
.wordlist .en { color: var(--granite); grid-column: 2; font-size: .92rem; }
.wordlist b { grid-column: 2; }
.wordlist li { grid-template-areas: "s w d x" "s e d x" "s a d x" "s ex d x"; }
.wordlist .andra { grid-area: a; color: var(--granite); font-size: .85rem; opacity: .85; }
.wordlist .ex { grid-area: ex; color: var(--granite); font-size: .85rem; font-family: var(--serif); font-style: italic; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.wordlist .stage { grid-area: s; color: var(--blue-ink, var(--blue)); font-size: .6rem; letter-spacing: .1em; }
.wordlist b { grid-area: w; } .wordlist .en { grid-area: e; } .wordlist .due { grid-area: d; font-size: .8rem; color: var(--granite); }
.wordlist .x { grid-area: x; background: transparent; color: var(--granite); padding: 0 .4em; font-size: 1.1rem; }

nav { position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: .3em; background: var(--paper); border-top: 1px solid var(--line); padding: .4em .5em calc(.4em + env(safe-area-inset-bottom)); }
nav button { background: transparent; color: var(--granite); border-radius: 8px; padding: .55em 1.2em; font-weight: 500; }
nav button.on { color: var(--blue-ink, var(--blue)); background: var(--blue-soft); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ===== six tabs ===== */
nav button { display: grid; justify-items: center; gap: .05em; padding: .4em .6em; font-size: .72rem; min-width: 3.6em; }
nav .ico { font-size: 1.15rem; line-height: 1.1; }
@media (min-width: 560px) { nav button { font-size: .85rem; padding: .45em .9em; } }
body.locked main, body.locked nav, body.locked header, body.locked .gbar { filter: blur(2px); pointer-events: none; }

/* ===== login ===== */
.auth { position: fixed; inset: 0; z-index: 50; background: var(--paper); display: grid; place-items: center; padding: 1em; overflow: auto; }
.authbox { width: 100%; max-width: 380px; display: grid; gap: .8em; }
.brand.big { font-size: 1.6rem; justify-content: center; margin-bottom: .6em; }
.authform { display: grid; gap: .6em; }
.authform label { display: grid; gap: .25em; font-size: .9rem; color: var(--granite); }
.authform.row { grid-template-columns: 1fr 1fr 1fr auto auto; align-items: center; }
.authform.row input, .authform.row select { min-width: 0; }
@media (max-width: 520px) { .authform.row { grid-template-columns: 1fr 1fr; } }
.users { list-style: none; padding: 0; margin: .4em 0 .8em; }
.users li { padding: .4em 0; border-bottom: 1px solid var(--line); display: flex; gap: .6em; align-items: baseline; flex-wrap: wrap; }
.small-print { font-size: .8rem; }

/* ===== creatures in Glosor ===== */
:root { --leaf: #3f8f5a; --leaf-dk: #2e6f45; --soil: #7a5a3e; --soil-dk: #5d4430; --seed: #b98a4e; --sky: #e8f0f7; --sky-2: #f4f8fb; }
@media (prefers-color-scheme: dark) { :root { --sky: #1d2b3a; --sky-2: #16202b; } }
.wordlist li { grid-template-columns: 3.2em 1fr auto auto; }
.cbtn { grid-area: s; position: relative; width: 46px; height: 46px; display: grid; place-items: center; background: none; border: 0; padding: 0; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.cbtn .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.cbtn .ring .track { stroke: var(--line); }
.cbtn .ring .fill { stroke: var(--leaf); stroke-linecap: round; transition: stroke-dasharray .45s ease; }
.cbtn .creature, .cbtn .spk { position: relative; z-index: 1; } .cbtn .creature { width: 30px; height: 26px; } .cbtn .mystery { opacity: .85; }
#os-hint .creature { vertical-align: middle; margin-left: 8px; width: 30px; height: 26px; } .cbtn .spk { color: var(--granite); } .cbtn.full .spk { color: var(--leaf); }
.cbtn::before, .cbtn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--blue); opacity: 0; pointer-events: none; }
.cbtn.saying::before { animation: ripple .8s ease-out; } .cbtn.saying::after { animation: ripple .8s ease-out .2s; }
@keyframes ripple { 0% { transform: scale(.82); opacity: .5; } 100% { transform: scale(1.55); opacity: 0; } }
.creature.grew { animation: grow-pop .52s cubic-bezier(.34,1.5,.64,1) both; }
@keyframes grow-pop { 0% { transform: scale(.45); opacity: 0; } 62% { transform: scale(1.16); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.growth { position: fixed; left: 50%; bottom: 4.6em; z-index: 60; display: flex; align-items: center; gap: .7em; background: var(--paper); border: 1.5px solid var(--line); border-left: 3px solid var(--leaf); border-radius: 9px; padding: .6em .9em .6em .7em; box-shadow: 0 10px 30px rgba(0,0,0,.2); animation: toast-in 2.6s ease both; pointer-events: none; }
@keyframes toast-in { 0% { opacity: 0; transform: translate(-50%, 16px); } 9%, 72% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -10px); } }
.growth .gt { font-size: .8rem; color: var(--granite); line-height: 1.35; } .growth .gt b { display: block; font-family: var(--serif); font-size: 1rem; color: var(--ink); }
.wordlist.plain li { grid-template-columns: 1fr auto; grid-template-areas: "w d" "e d"; }

/* ===== garden ===== */
.gbar { width: 100%; display: block; padding: 0; text-align: left; color: var(--ink); background: linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 100%); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; cursor: pointer; }
.gbar .gbinner { display: flex; align-items: flex-end; gap: 0; max-width: 720px; margin: 0 auto; padding: 0; position: relative; }
.gbar .mini { flex: 1 1 100%; min-width: 0; width: 100%; height: 68px; display: block; }
.gbar .gring { position: absolute; left: .8em; top: .55em; width: 42px; height: 42px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.gbar .gbmid { flex: 1; min-width: 0; padding: .5em 0; }
.gbar .gbline { display: flex; align-items: baseline; gap: .6em; font-size: .78rem; color: var(--granite); }
.gbar .gbline b { font-size: 1rem; color: var(--ink); } .gbar .gbline i { font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbar .meter { height: 5px; margin-top: .35em; }
.gbar .gbday { flex: none; text-align: right; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--granite); }
.gbar .gbday b { display: block; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink); } .gbar .gbday small { font-weight: 400; color: var(--granite); }
@media (max-width: 480px) { .gbar .mini { height: 58px; } }
.garden { background: linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 100%); border: 1px solid var(--line); border-radius: var(--radius); padding: 1em 1.1em .9em; margin: .8em 0 1.4em; }
.gtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.glbl { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--granite); }
.gpts { font-size: 1.9rem; font-weight: 600; line-height: 1.1; } .gpts span { font-size: .8rem; font-weight: 400; color: var(--granite); }
.gstage { text-align: right; font-size: .95rem; font-weight: 600; } .gstage span { display: block; font-size: .8rem; font-weight: 400; font-style: italic; color: var(--granite); }
.plot { margin: .5em -1.1em 0; overflow: hidden; } .plant { display: block; width: 100%; height: auto; }
.garden.wx-vaxlande, .gbar.wx-vaxlande { --sky: #e2ebf4; --sky-2: #f1f6fa; }
.garden.wx-mulet, .gbar.wx-mulet { --sky: #d5dde6; --sky-2: #e6ebf1; --leaf: #3c7d54; --leaf-dk: #2c6440; --soil: #6d5139; --soil-dk: #55402d; }
.garden.wx-torka, .gbar.wx-torka { --sky: #f3ece0; --sky-2: #faf6ee; --leaf: #8e9a52; --leaf-dk: #6f7a3f; --soil: #a08059; --soil-dk: #806345; }
.garden.season-vinter, .gbar.season-vinter { --sky: #dfe7f0; --sky-2: #eef3f8; --soil: #6a5a4a; }
.garden.season-host, .gbar.season-host { --sky: #ecdfd0; --sky-2: #f6efe6; --leaf: #7a8a3e; --leaf-dk: #5c6a2e; }
@media (prefers-color-scheme: dark) { .garden, .gbar { --sky: #1d2b3a; --sky-2: #16202b; } .garden.wx-torka, .gbar.wx-torka { --sky: #3a2e22; --sky-2: #2a2119; } }
.bug { animation: bob 3.4s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(2.5px,-4px); } }
.garden .flyger, .gbar .flyger { animation: gflyg 12s ease-in-out infinite alternate; } @keyframes gflyg { from { transform: translate(-16px, 2px); } 50% { transform: translate(0, -5px); } to { transform: translate(16px, 1px); } }
.snow { animation: snowfall 6s linear infinite; } @keyframes snowfall { from { transform: translateY(-6px); opacity: 0; } 20% { opacity: .8; } to { transform: translateY(40px); opacity: 0; } }
.leaffall { animation: leaffall 7s ease-in-out infinite; } @keyframes leaffall { from { transform: translate(0,-10px) rotate(0); opacity: 0; } 15% { opacity: 1; } to { transform: translate(-14px, 60px) rotate(200deg); opacity: 0; } }
.meter { height: 6px; border-radius: 3px; background: rgba(0,0,0,.13); overflow: hidden; margin-top: .4em; } .meter i { display: block; height: 100%; background: var(--leaf); border-radius: 3px; transition: width .5s ease; }
.gnote { font-size: .88rem; color: var(--granite); margin: .6em 0 0; } .gnote strong { color: var(--ink); } .gnote .back { display: block; margin-top: .25em; color: #8a6d00; }
.gchips { display: flex; gap: .5em; flex-wrap: wrap; margin-top: .7em; }
.gchip { display: inline-flex; align-items: center; gap: .4em; padding: .3em .7em; border-radius: 999px; background: rgba(0,0,0,.06); font-size: .82rem; color: var(--ink); }
.gchip .ico { font-size: 1.05rem; line-height: 1; } .gchip.drop { background: rgba(196,87,26,.2); }
.gchip .mini-meter { width: 3.4em; height: 5px; border-radius: 3px; background: rgba(0,0,0,.14); overflow: hidden; display: inline-block; } .gchip .mini-meter i { display: block; height: 100%; background: var(--leaf); }
.harvest { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-top: .9em; padding-top: .8em; border-top: 1px solid var(--line); } .crop { width: 22px; height: 22px; } .harvest .more, .harvest .hcount { font-size: .8rem; color: var(--granite); } .harvest .hcount { margin-left: auto; }
.stats4 { grid-template-columns: repeat(4, 1fr); }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 110px; margin: .6em 0 .3em; } .tbar { flex: 1; background: var(--blue); border-radius: 2px 2px 0 0; min-height: 3px; } .tbar.low { background: var(--yellow); } .axis { display: flex; justify-content: space-between; font-size: .75rem; color: var(--granite); }

/* ===== Ordskär ===== */
.spel { --natt: #152436; --skymning: #2B4360; --ljus: #F2C14E; --skum: #EAE5D9; --dis: #9BA9B4; --lav: #87B071; --fel: #D2705C; --panh: clamp(150px, 26vh, 300px);
  background: var(--natt); color: var(--skum); border-radius: var(--radius); margin: .6em 0 0; overflow: hidden; font-size: 14px; line-height: 1.5; }
body.spel-on main { padding-bottom: 6.5em; }
#os-app { position: relative; display: flex; flex-direction: column; min-height: 70vh; }
#os-app.meny { --panh: clamp(240px, 46vh, 420px); }
@media (max-width: 600px) { #os-app.meny { --panh: clamp(170px, 30vh, 250px); } }
.spel .lagen { display: flex; gap: .5em; margin-top: 10px; }
.spel .lyssrad { display: flex; align-items: center; gap: .5em; margin-top: 12px; font-size: .95rem; color: var(--skum); cursor: pointer; } .spel .lyssrad input { width: 18px; height: 18px; accent-color: var(--ljus); } .spel .lyssrad .info { color: var(--dis); font-size: .82rem; }
.spel .lage { flex: 1; display: grid; justify-items: center; gap: .15em; padding: 10px 6px 8px; border: 1px solid rgba(234,229,217,.18); border-radius: 8px; background: rgba(234,229,217,.05); color: var(--dis); }
.spel .lage .ico { font-size: 1.5rem; line-height: 1; } .spel .lage .t { font-size: .92rem; } .spel .lage .p { font-size: .7rem; opacity: .8; }
.spel .lage.i { border-color: var(--ljus); color: var(--skum); background: color-mix(in srgb, var(--ljus) 14%, transparent); }
.spel .startbtn { display: block; width: 100%; margin-top: 12px; padding: 16px; border-radius: 10px; font-family: var(--serif); font-size: 1.5rem; color: var(--natt); background: var(--ljus); text-align: center; }
.spel .startbtn:hover { filter: brightness(1.06); } .spel .startbtn[disabled] { opacity: .4; }
.spel .startbtn small { display: block; font-family: var(--sans); font-size: .78rem; opacity: .75; margin-top: 2px; }
.spel .rader { display: grid; gap: 8px; margin-top: 16px; } .spel .rad2 { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--dis); } .spel .rad2 .ico { font-size: 1.2rem; } .spel .rad2 .stapel { flex: 1; margin: 0; height: 4px; }
.spel .arter { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 12px; align-items: center; } .spel .art { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--dis); } .spel .art b { color: var(--skum); font-weight: 500; }
.spel details { margin-top: 14px; font-size: .84rem; color: var(--dis); } .spel summary { cursor: pointer; color: var(--dis); }
.spel .knapp.stor { padding: 14px 16px; border-radius: 10px; }
#os-avsluta { font-size: .82rem; color: var(--dis); white-space: nowrap; padding: 5px 11px; border: 1px solid rgba(234,229,217,.2); border-radius: 2px; margin-left: 6px; }
#os-flyt.stor { font-size: 2.3rem; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
#os-flyt.stor.visa { animation: stig2 2.2s ease-out; } @keyframes stig2 { 0% { opacity: 0; transform: translate(-50%, 16px) scale(.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 30% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40px) scale(1); } }
.spel .plask2 { transform-box: fill-box; transform-origin: 50% 50%; animation: plask2 1.4s ease-out .15s forwards; opacity: 0; } @keyframes plask2 { 0% { transform: scale(.2); opacity: .8; } 100% { transform: scale(4.6); opacity: 0; } }
.spel .droppe { animation: droppe 1.1s ease-out forwards; } @keyframes droppe { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-34px); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
.spel .blixt { animation: blixt .9s ease-out forwards; } @keyframes blixt { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(3); } } #os-app.spelar { --panh: clamp(78px, 13vh, 132px); } #os-app.kompakt { --panh: clamp(70px, 12vh, 120px); } #os-app.spelar.landar { --panh: clamp(150px, 26vh, 260px); }
#os-varld { position: relative; line-height: 0; height: var(--panh); overflow: hidden; transition: height .25s ease; touch-action: pan-y; cursor: grab; } #os-varld svg { width: 100%; height: 100%; display: block; }
#os-varld svg.glider { transition: margin-left .6s ease; } /* the slide towards a landing catch */
#os-varld::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(to bottom, transparent, var(--natt)); pointer-events: none; }
#os-scen { flex: 1 1 auto; display: flex; flex-direction: column; padding: 0 16px 16px; position: relative; z-index: 2; }
#os-app.spelar #os-scen { justify-content: safe center; }
.spel .mitt { margin: auto 0; width: 100%; } #os-app.spelar .mitt { margin: 0; }
.spel h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 8vw, 3.2rem); line-height: 1; margin: .5em 0 0; color: var(--skum); }
.spel .underrad { font-family: var(--serif); font-style: italic; color: var(--dis); font-size: 1rem; margin: .5rem 0 0; max-width: 34ch; }
.spel button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; border-radius: 3px; padding: 0; }
.spel .knapp { display: block; width: 100%; text-align: left; padding: 12px 14px; margin-top: 8px; background: rgba(234,229,217,.05); border: 1px solid rgba(234,229,217,.16); }
.spel .knapp:hover { background: rgba(234,229,217,.1); } .spel .knapp .titel { font-size: 1.02rem; } .spel .knapp .info { color: var(--dis); font-size: .82rem; margin-top: 3px; display: block; } .spel .knapp[disabled] { opacity: .4; }
.spel .knapp.start { margin-top: 12px; border-color: var(--ljus); background: color-mix(in srgb, var(--ljus) 12%, transparent); }
.spel .forena .knapp { border-color: #7FE0FF; background: linear-gradient(90deg, rgba(127,224,255,.14), rgba(198,156,255,.14)); }
.spel .liten { font-size: .84rem; color: var(--dis); padding: 6px 10px; border: 1px solid rgba(234,229,217,.2); border-radius: 2px; } .spel .liten:hover { color: var(--skum); }
.spel .rad { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .spel .mellan { margin-top: 20px; } .spel .etikett { font-size: .76rem; color: var(--dis); letter-spacing: .06em; }
.spel .kryss { padding-left: 44px; position: relative; } .spel .kryss .ruta { position: absolute; left: 14px; top: 13px; width: 19px; height: 19px; border-radius: 3px; border: 1px solid rgba(234,229,217,.4); display: flex; align-items: center; justify-content: center; font-size: .8rem; }
.spel .kryss.i { background: rgba(234,229,217,.1); } .spel .kryss.i .ruta { background: var(--ljus); border-color: var(--ljus); color: var(--natt); }
.spel .prick { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(234,229,217,.28); } .spel .prick.valt { border-color: var(--ljus); border-width: 2px; }
.spel table { width: 100%; border-collapse: collapse; font-size: .92rem; } .spel td { padding: 7px 4px; border-bottom: 1px solid rgba(234,229,217,.09); vertical-align: top; } .spel td:first-child { font-family: var(--serif); font-size: 1.02rem; } .spel td:last-child { color: var(--dis); text-align: right; white-space: nowrap; }
.spel .stapel { height: 2px; background: rgba(234,229,217,.14); border-radius: 2px; overflow: hidden; margin-top: 9px; } .spel .stapel i { display: block; height: 100%; background: var(--lav); }
.spel .tomt { margin-top: 18px; padding: 16px; border: 1px dashed rgba(234,229,217,.3); border-radius: 3px; }
#os-bana { position: relative; height: clamp(64px, 11vh, 96px); background: linear-gradient(to bottom, rgba(120,170,200,.05), rgba(120,170,200,.12)); border-top: 1px solid rgba(234,229,217,.08); border-bottom: 1px solid rgba(234,229,217,.08); overflow: hidden; }
#os-fisk { position: absolute; top: 46%; left: 7%; transform: translate(-50%, -50%); transition: transform .35s cubic-bezier(.34,1.4,.5,1); }
#os-bana.bradska #os-fisk { animation: flykt .5s ease-in-out infinite; } @keyframes flykt { 50% { top: 39%; } }
#os-matning { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(234,229,217,.12); } #os-matning i { display: block; height: 100%; background: var(--ljus); transform: scaleX(0); transform-origin: left; transition: transform .3s ease-out; }
#os-fragaBox { text-align: center; padding: 6px 0 2px; }
#os-fraga { font-family: var(--serif); font-size: clamp(1.8rem, min(8vw, 6vh), 3rem); line-height: 1.12; margin: 8px 0 3px; word-break: break-word; } #os-artikel { color: var(--dis); font-size: .55em; font-style: italic; }
#os-hint { color: var(--dis); font-size: .9rem; min-height: 30px; }
#os-hint .osniva { display: inline-block; width: 64px; height: 5px; margin-left: 10px; vertical-align: middle; background: rgba(234,229,217,.16); border-radius: 3px; overflow: hidden; } #os-hint .osniva i { display: block; height: 100%; background: var(--lav); transition: width .5s ease; } #os-hint .osniva.full i { background: var(--ljus); }
#os-hint small.nv { color: var(--dis); margin-left: 5px; font-size: .74rem; } #os-hint small.nv.upp { color: var(--lav); }
/* ===== the gift box: a word at full level is unboxed at the end of a round ===== */
.gava { position: fixed; inset: 0; z-index: 90; background: rgba(20,24,30,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; padding: 1em; }
.gava.fade { background: transparent; pointer-events: none; transition: background .4s; }
.gbox { display: grid; place-items: center; gap: .7em; cursor: pointer; color: #fff; text-align: center; border: 0; background: none; outline: none; }
.gbox .gsvg { width: 150px; height: 138px; filter: drop-shadow(0 12px 24px rgba(0,0,0,.45)); animation: gwiggle 1.8s ease-in-out infinite; }
@keyframes gwiggle { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-6deg) translateY(-3px); } 30% { transform: rotate(5deg); } 45% { transform: rotate(-2deg); } 55% { transform: rotate(0); } }
.gbox.open .gsvg { animation: none; } .gbox.open .lid { animation: glid .6s ease-out forwards; transform-box: fill-box; transform-origin: 20% 100%; }
@keyframes glid { 40% { transform: translate(0, -22px) rotate(-8deg); opacity: 1; } 100% { transform: translate(-60px, -110px) rotate(-40deg); opacity: 0; } }
.gbox.open .ghint { opacity: 0; } .ghint { font-size: .95rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); transition: opacity .3s; }
.gitems { background: var(--paper); color: var(--ink); border-radius: 14px; padding: 1em 1.1em; display: grid; gap: .8em; max-width: 400px; width: 100%; transform: translateY(24px); opacity: 0; transition: .45s cubic-bezier(.34, 1.4, .64, 1); box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.gitems.in { transform: none; opacity: 1; } .gitems.out { opacity: 0; transition: opacity .3s; }
.glist { display: grid; gap: .7em; max-height: 50vh; overflow: auto; }
.gitem { display: grid; justify-items: center; gap: .15em; } .gitem b { font-family: var(--serif); font-size: 1.15rem; } .gitem small { color: var(--granite); font-size: .82rem; }
.gpair { display: flex; gap: 1.4em; align-items: center; } .gpair .gboat { display: inline-flex; padding: 6px 8px; border-radius: 10px; background: #2B4360; }
.gwhat { margin: 0; text-align: center; color: var(--granite); font-size: .9rem; }
.gok { justify-self: center; padding: .6em 2.4em; }
.gfly { position: fixed; z-index: 95; pointer-events: none; line-height: 0; }
.vcre.gava-hint { font-size: 1.8rem; line-height: 1; } #os-hint.facit b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--skum); } #os-hint.facit i { font-style: normal; color: var(--dis); }
#os-svarsyta { margin-top: 12px; }
.spel .val { display: block; width: 100%; text-align: center; padding: clamp(10px, 1.8vh, 16px) 12px; margin-top: 7px; background: rgba(234,229,217,.055); border: 1px solid rgba(234,229,217,.17); font-size: clamp(1.02rem, 2.4vh, 1.2rem); line-height: 1.25; }
.spel .val:hover { background: rgba(234,229,217,.11); } .spel .val.ratt { background: rgba(135,176,113,.22); border-color: var(--lav); color: #DCEBD3; } .spel .val.fel { background: rgba(210,112,92,.18); border-color: var(--fel); }
#os-skrivfalt { width: 100%; padding: 12px 16px; font-size: 1.3rem; font-family: var(--serif); background: rgba(234,229,217,.06); color: var(--skum); border: 1px solid rgba(234,229,217,.24); border-radius: 3px; text-align: center; }
#os-skrivfalt.ratt { border-color: var(--lav); background: rgba(135,176,113,.15); } #os-skrivfalt.fel { border-color: var(--fel); background: rgba(210,112,92,.12); }
#os-tangenter { display: flex; gap: 6px; justify-content: center; margin-top: 9px; } #os-tangenter button { width: 44px; height: 40px; font-family: var(--serif); font-size: 1.15rem; border: 1px solid rgba(234,229,217,.2); }
#os-nastarad { display: flex; align-items: center; justify-content: center; height: 0; overflow: hidden; visibility: hidden; transition: height .18s ease; } #os-nastarad.visa { height: 50px; visibility: visible; } /* under the question, above the answers (2026-09-24) */
#os-nasta { padding: 9px 26px; font-size: 1rem; color: var(--ljus); border: 1px solid var(--ljus); background: color-mix(in srgb, var(--ljus) 12%, transparent); }
.spel .hogtalare { width: clamp(70px, 12vh, 100px); height: clamp(70px, 12vh, 100px); border-radius: 50%; margin: 4px auto 0; border: 1px solid rgba(242,193,78,.5); display: flex; align-items: center; justify-content: center; background: rgba(242,193,78,.08); }
.spel .hogtalare svg { width: 44px; height: 44px; fill: var(--ljus); } .spel .hogtalare.spelar { animation: puls .9s ease-out; } @keyframes puls { from { box-shadow: 0 0 0 0 rgba(242,193,78,.4); } to { box-shadow: 0 0 0 26px rgba(242,193,78,0); } }
#os-hud { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; padding: 10px 16px; border-top: 1px solid rgba(234,229,217,.1); font-size: .85rem; color: var(--dis); }
#os-poang { font-size: 1.6rem; color: var(--skum); } #os-paus { font-size: .82rem; color: var(--dis); white-space: nowrap; padding: 5px 11px; border: 1px solid rgba(234,229,217,.2); border-radius: 2px; } #os-paus[aria-pressed="true"] { color: var(--ljus); border-color: rgba(242,193,78,.55); }
.spel .fangst { display: flex; flex-wrap: wrap; gap: 4px 2px; align-items: center; margin-top: 8px; } .spel .lyktor { letter-spacing: 2px; font-size: 1.05rem; } .spel .lykta-slut { opacity: .22; }
#os-flygfisk { position: absolute; left: 0; top: 0; z-index: 6; line-height: 0; pointer-events: none; transform-origin: 50% 50%; }
#os-flyt { position: absolute; left: 50%; top: calc(var(--panh) - 4px); transform: translateX(-50%); font-family: var(--serif); font-size: 1.5rem; color: var(--ljus); pointer-events: none; opacity: 0; z-index: 5; white-space: nowrap; }
#os-flyt.visa { animation: stig 1s ease-out; } @keyframes stig { 0% { opacity: 0; transform: translate(-50%, 10px); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -34px); } }
.spel .skaka { animation: skak .3s; } @keyframes skak { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
/* creature movement inside the panorama SVG */
.spel .anlander { animation: anland 1s ease-out; } @keyframes anland { from { opacity: 0; } 60%, to { opacity: 1; } }
.spel .plask { transform-box: fill-box; transform-origin: 50% 50%; animation: plask 1s ease-out forwards; } @keyframes plask { from { transform: scale(.3); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
/* A swimmer goes out, turns, comes back — never tail-first. scaleX flips in
   place because the animated group's origin is the creature's own centre. */
.spel .simmar { animation: simma 36s ease-in-out infinite; }
@keyframes simma {
  0%   { transform: translate(-90px, 8px) scaleX(1) rotate(0deg); }
  22%  { transform: translate(-30px, -6px) scaleX(1) rotate(-4deg); }
  46%  { transform: translate(90px, 4px) scaleX(1) rotate(3deg); }
  48%  { transform: translate(94px, 2px) scaleX(0.15) rotate(0deg); }
  50%  { transform: translate(90px, 4px) scaleX(-1) rotate(0deg); }
  72%  { transform: translate(30px, -8px) scaleX(-1) rotate(4deg); }
  96%  { transform: translate(-90px, 8px) scaleX(-1) rotate(-3deg); }
  98%  { transform: translate(-94px, 8px) scaleX(-0.15) rotate(0deg); }
  100% { transform: translate(-90px, 8px) scaleX(1) rotate(0deg); }
}
/* The leapers cruise right, jump, turn, cruise left, jump again. One loop, no teleport. */
.spel .hoppar { animation: hopp 22s ease-in-out infinite; }
@keyframes hopp {
  0%   { transform: translate(-80px, 10px) scaleX(1) rotate(0); }
  24%  { transform: translate(-30px, 10px) scaleX(1) rotate(0); }
  31%  { transform: translate(-10px, -40px) scaleX(1) rotate(-24deg); }
  36%  { transform: translate(6px, -58px) scaleX(1) rotate(0); }
  41%  { transform: translate(24px, -40px) scaleX(1) rotate(24deg); }
  47%  { transform: translate(44px, 10px) scaleX(1) rotate(0); }
  50%  { transform: translate(80px, 10px) scaleX(1) rotate(0); }
  52%  { transform: translate(80px, 10px) scaleX(-1) rotate(0); }
  74%  { transform: translate(30px, 10px) scaleX(-1) rotate(0); }
  81%  { transform: translate(10px, -40px) scaleX(-1) rotate(24deg); }
  86%  { transform: translate(-6px, -58px) scaleX(-1) rotate(0); }
  91%  { transform: translate(-24px, -40px) scaleX(-1) rotate(-24deg); }
  97%  { transform: translate(-44px, 10px) scaleX(-1) rotate(0); }
  100% { transform: translate(-80px, 10px) scaleX(1) rotate(0); }
}
.spel .kravlar { animation: kravla 20s linear infinite alternate; } @keyframes kravla { from { transform: translate(-130px,0); } 48% { transform: translate(-8px,0); } 52% { transform: translate(8px,0); } to { transform: translate(130px,0); } }
/* Drifters rise and sink; the manta and the seahorse also turn at the ends. */
.spel .svavar { animation: svava 34s ease-in-out infinite; }
@keyframes svava {
  0%   { transform: translate(-80px, 46px) scale(1, 1); }
  25%  { transform: translate(-10px, -14px) scale(1, .9); }
  48%  { transform: translate(80px, 40px) scale(1, 1); }
  50%  { transform: translate(80px, 40px) scale(-1, 1); }
  75%  { transform: translate(10px, -14px) scale(-1, .9); }
  98%  { transform: translate(-80px, 46px) scale(-1, 1); }
  100% { transform: translate(-80px, 46px) scale(1, 1); }
}
.spel .snurrar { animation: snurr 90s linear infinite; } @keyframes snurr { to { transform: rotate(360deg); } }
.spel .pulsar { animation: puls2 18s ease-in-out infinite; } @keyframes puls2 { 0% { transform: translate(-30px,10px) scale(1); } 22% { transform: translate(0,-16px) scale(1.08); } 48% { transform: translate(30px,8px) scale(1); } 50% { transform: translate(30px,8px) scale(-1,1); } 72% { transform: translate(0,-16px) scale(-1.08,1.08); } 98% { transform: translate(-30px,10px) scale(-1,1); } 100% { transform: translate(-30px,10px) scale(1); } }
.spel .flyger { animation: flyg 34s ease-in-out infinite alternate; } @keyframes flyg { from { transform: translate(-70px,4px); } to { transform: translate(70px,-8px); } }
.spel .guppar { animation: gupp 22s ease-in-out infinite alternate; }
.spel .vag { animation: vaga 6s linear infinite; } @keyframes vaga { from { transform: translateX(0); } to { transform: translateX(-120px); } }
/* Building: the scaffold's hammer taps; a finished artifact pops up out of the ground and glows for a moment. */
.spel .hammare { transform-box: fill-box; transform-origin: 20% 80%; animation: hamra 1.4s ease-in-out infinite; } @keyframes hamra { 0%, 60%, 100% { transform: rotate(0); } 75% { transform: rotate(28deg); } 85% { transform: rotate(-6deg); } }
.spel .steg.nytt { transform-box: fill-box; transform-origin: 50% 100%; animation: nyttPop 1.1s cubic-bezier(.34, 1.6, .64, 1) both, nyttGlod 2.6s ease-out both; }
@keyframes nyttPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes nyttGlod { 0%, 20% { filter: drop-shadow(0 0 0 rgba(255,246,216,0)); } 40% { filter: drop-shadow(0 0 10px rgba(255,246,216,.95)); } 100% { filter: drop-shadow(0 0 0 rgba(255,246,216,0)); } } @keyframes gupp { from { transform: translate(-34px,0); } 50% { transform: translate(0,-2px); } to { transform: translate(34px,0); } }
.spel .stralkastare { transform-box: fill-box; transform-origin: 0% 50%; animation: sveep 13s ease-in-out infinite alternate; } @keyframes sveep { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.spel .lampa { animation: blink 4.5s ease-in-out infinite; } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.spel .sken { animation: skimra 19s ease-in-out infinite alternate; } @keyframes skimra { from { opacity: .62; } to { opacity: 1; } }
.spel .gnistor path { animation: gnista 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; } @keyframes gnista { 0%,100% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1.2); opacity: 1; } }
@media (max-height: 900px) { #os-app.spelar { --panh: clamp(56px, 9vh, 120px); } #os-bana { height: clamp(40px, 6.5vh, 80px); } .spel .val { padding: clamp(7px, 1.2vh, 14px) 12px; margin-top: 6px; } #os-fraga { font-size: clamp(1.5rem, min(7vw, 5vh), 2.4rem); margin: 6px 0 2px; } #os-hint { min-height: 24px; } #os-fragaBox { padding-top: 2px; } } /* every phone height (Linh, 2026-09-24: the question did not fit) */
@media (prefers-reduced-motion: reduce) { .spel * { animation: none !important; } }

/* ===== Ordskär: result screen ===== */
.spel .sluthuvud { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; }
.spel .slutbp { text-align: right; } .spel .slutbp b { display: block; font-family: var(--serif); font-size: 2.2rem; color: var(--ljus); line-height: 1; } .spel .slutbp span { font-size: .78rem; color: var(--dis); }
.spel .fangst.stor { margin: 10px 0 4px; gap: 6px; }
.spel .brickor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.spel .bricka { background: rgba(234,229,217,.06); border: 1px solid rgba(234,229,217,.12); border-radius: 10px; padding: 10px 6px; text-align: center; }
.spel .bricka b { display: block; font-family: var(--serif); font-size: 1.7rem; font-weight: 400; line-height: 1.1; } .spel .bricka small { font-size: .85rem; } .spel .bricka span { font-size: .74rem; color: var(--dis); }
.spel .bpchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.spel .bpchip { background: color-mix(in srgb, var(--ljus) 14%, transparent); border: 1px solid rgba(242,193,78,.4); border-radius: 999px; padding: 3px 10px; font-size: .84rem; color: var(--ljus); } .spel .bpchip small { color: var(--dis); }
.spel .nyrang { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(234,229,217,.06); } .spel .nyrang b { display: block; font-family: var(--serif); font-size: 1.4rem; font-weight: 400; } .spel .nyrang span { font-size: .8rem; color: var(--dis); }
.spel .vaxte { color: var(--lav); }
.spel .rader .rad2, .spel .slut .rad2 { margin-top: 10px; }
/* ===== Ordskär: the fusion ===== */
.fusion { position: absolute; inset: 0; z-index: 8; background: radial-gradient(ellipse at 50% 45%, rgba(20,40,60,.55), rgba(21,36,54,.96)); overflow: hidden; cursor: pointer; }
.fsmall { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 0 6px rgba(127,224,255,.6)); }
.fflash { position: absolute; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, #fff, #7FE0FF 40%, transparent 70%); transform: translate(-50%,-50%) scale(0); opacity: 0; }
.fbig { position: absolute; left: 50%; top: calc(50% - 20px); transform: translate(-50%,-50%) scale(0); opacity: 0; text-align: center; filter: drop-shadow(0 0 18px rgba(198,156,255,.7)); }
.fname { font-family: var(--serif); font-size: 2rem; color: #fff; margin-top: -6px; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.fbp { font-size: 1rem; color: var(--ljus); }
.fgnista { position: absolute; color: #FFF7D6; font-size: 1.4rem; transform: translate(-50%,-50%); opacity: 0; text-shadow: 0 0 8px #FFF7D6; }

.crop.big { width: 34px; height: 40px; }
.fuserow { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .5em; }

/* ===== episodes: locks and the unlock checklist ===== */
.stop.locked { opacity: .55; font-size: .75rem; }
.unlocklist { list-style: none; padding: 0; margin: 0; font-size: .85rem; color: var(--granite); display: grid; gap: .15em; }
.epstatus { display: flex; align-items: center; justify-content: space-between; gap: .8em 1.2em; flex-wrap: wrap; margin: 0 0 .9em; padding: .55em .9em; border: 1px solid var(--line); border-radius: 12px; }
.epstatus #unlock { margin: 0; }
.unlocklist li.ok { color: var(--ok); }
/* ===== watering ===== */
.plot { position: relative; }
.vattnaBtn { position: absolute; right: 1.1em; bottom: 1.6em; background: rgba(116,63,142,.92); color: #fff; padding: .45em .9em; border-radius: 999px; font-size: .9rem; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.vattnaBtn:disabled { opacity: .5; }
/* While watering, the picture and the answers are all that is on the card. */
.garden.watering > :not(.plot):not(.vbelow):not(.vrevealwrap) { display: none; } /* .vrevealwrap: the result box between picture and question (2026-09-23) */
.garden.watering .vattnaBtn { display: none; }
/* The question floats over the scene: no box, white with a shadow so it reads on any sky. */
.vover { position: absolute; inset: .4em .9em auto .9em; z-index: 4; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 0 18px rgba(0,0,0,.5), 0 0 2px rgba(0,0,0,.9); pointer-events: none; }
.vover .vhead { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; opacity: .9; gap: .6em; pointer-events: auto; }
.vover .vclose { background: rgba(0,0,0,.25); color: #fff; font-size: 1.1rem; padding: 0 .45em; border-radius: 999px; line-height: 1.4; }
/* The 🎧 / 🎤 switches in the watering header say their state in colour (Linh, 2026-09-19): green ring = on, red and struck = off. */
.vover .vlyss { background: rgba(46,125,50,.85); color: #fff; font-size: .95rem; padding: 0 .5em; border-radius: 999px; line-height: 1.6; margin-left: auto; margin-right: .4em; box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.vover .vlyss.av { background: rgba(178,40,40,.85); opacity: .95; text-decoration: line-through; text-decoration-thickness: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.vover .vqtext.lyss { cursor: pointer; }
.vover .vq { font-family: var(--serif); font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.2; margin: .25em 0 0; pointer-events: auto; }
.vover .say { color: #fff; font-size: 1.1rem; vertical-align: middle; }
.vover .vq.shake { animation: skak .3s; }
.vqfall { position: absolute; z-index: 5; font-family: var(--serif); font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.2; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55); pointer-events: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(74,163,223,.6); }
.vbelow { margin: .6em 0 .2em; }
.vbelow .vopts { display: grid; gap: .45em; }
.vbelow .vopt { text-align: left; padding: .7em .9em; background: transparent; color: var(--ink); border: 1.5px solid var(--line); font-size: 1.05rem; }
.vbelow .vopt.ratt { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.vbelow .vopt.dim { opacity: .5; }
.vbelow form button { padding: .55em .9em; }
.vbelow input.ratt { border-color: var(--ok); } .vbelow input.fel { border-color: var(--bad); }
.vbelow .vans { display: flex; align-items: center; gap: .7em; margin-top: .7em; padding-top: .6em; border-top: 1.5px solid var(--line); flex-wrap: wrap; }
.vbelow .vans.bad { border-top-color: var(--bad); } .vbelow .vans.ok { border-top-color: var(--ok); }
.vbelow .vans > div { flex: 1; min-width: 10em; }
.vbelow .vex { font-family: var(--serif); font-style: italic; color: var(--granite); font-size: .92rem; margin-top: .15em; }
.vbelow .vres { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; color: var(--granite); margin-top: .4em; }
div.ring { position: absolute; width: 26px; height: 8px; border: 2px solid rgba(74,163,223,.9); border-radius: 50%; background: none; box-shadow: none; pointer-events: none; z-index: 3; }
.flyer { position: fixed; z-index: 80; pointer-events: none; }
.fusechip { background: rgba(196,87,26,.22) !important; cursor: pointer; border: 1px solid var(--yellow); }
@media (max-width: 480px) { .vattna .vq { font-size: 1.15rem; } }

/* ===== soil moisture: four looks, from parched to watered; `wet` last so the pour can add it on top ===== */
svg.plant.sprucken, svg.mini.sprucken { --soil: #c4a882; --soil-dk: #8f7352; }
svg.plant.dry, svg.mini.dry { --soil: #a98a66; --soil-dk: #86684a; }
svg.plant.fuktig, svg.mini.fuktig { --soil: #82624a; --soil-dk: #5f4634; }
svg.plant.wet, svg.mini.wet { --soil: #5e4330; --soil-dk: #43301f; }
.vbelow #vreveal:not(:empty) + .vopts, .vbelow #vreveal:not(:empty) + form { margin-top: .6em; opacity: .7; }

.vstream { position: absolute; z-index: 5; background: linear-gradient(180deg, #8fd0f5, #3f95d6); border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; box-shadow: 0 0 6px rgba(74,163,223,.6); pointer-events: none; }
.vleaf { position: absolute; left: 0; top: 0; z-index: 5; font-size: 18px; line-height: 1; pointer-events: none; }
.vattnaBtn.rensa { background: rgba(63,143,90,.92); }
/* Weeding: for a few seconds after a right answer every animal darts about. */
svg.plant.glad .fladdrar { animation-duration: 3s !important; } svg.plant.glad .flyger { animation-duration: 3.5s !important; } svg.plant.glad .hoppar, svg.plant.glad .hoppar .hopper, svg.plant.glad .hoppar .sitter { animation-duration: 2.2s !important; }
.vpool { position: absolute; z-index: 2; width: 120px; height: 22px; border-radius: 50%; background: radial-gradient(ellipse, rgba(40,25,12,.75), rgba(40,25,12,0) 70%); pointer-events: none; }

/* ===== garden animals move ===== */
/* Every loop goes out, turns (scaleX flips the drawing in place), and comes back
   — nothing ever travels backwards. Distances are in picture units (260 wide). */
.garden .hoppar, .gbar .hoppar { animation: ghopp 9s linear infinite; }
.garden .hoppar .hopper, .gbar .hoppar .hopper { animation: gpose-hopp 9s step-end infinite; }
.garden .hoppar .sitter, .gbar .hoppar .sitter { animation: gpose-sitt 9s step-end infinite; }
@keyframes gpose-hopp { 0%, 24%, 50%, 74% { opacity: 1; } 12%, 36%, 62%, 86% { opacity: 0; } }
@keyframes gpose-sitt { 0%, 24%, 50%, 74% { opacity: 0; } 12%, 36%, 62%, 86% { opacity: 1; } }
@keyframes ghopp {
  0%   { transform: translate(0,0) scaleX(1); }
  6%   { transform: translate(7px,-9px) scaleX(1); } 12% { transform: translate(14px,0) scaleX(1); }
  24%  { transform: translate(14px,0) scaleX(1); }
  30%  { transform: translate(21px,-9px) scaleX(1); } 36% { transform: translate(28px,0) scaleX(1); }
  48%  { transform: translate(28px,0) scaleX(1); } 50% { transform: translate(28px,0) scaleX(-1); }
  56%  { transform: translate(21px,-9px) scaleX(-1); } 62% { transform: translate(14px,0) scaleX(-1); }
  74%  { transform: translate(14px,0) scaleX(-1); }
  80%  { transform: translate(7px,-9px) scaleX(-1); } 86% { transform: translate(0,0) scaleX(-1); }
  98%  { transform: translate(0,0) scaleX(-1); } 100% { transform: translate(0,0) scaleX(1); }
}
.garden .fladdrar, .gbar .fladdrar { animation: gfladder 14s ease-in-out infinite; }
@keyframes gfladder {
  0%   { transform: translate(0,0) scaleX(1) rotate(0); }
  15%  { transform: translate(18px,-8px) scaleX(1) rotate(6deg); }
  30%  { transform: translate(36px,2px) scaleX(1) rotate(-4deg); }
  45%  { transform: translate(54px,-6px) scaleX(1) rotate(5deg); }
  50%  { transform: translate(56px,-6px) scaleX(-1) rotate(0); }
  65%  { transform: translate(38px,-12px) scaleX(-1) rotate(-6deg); }
  80%  { transform: translate(18px,-2px) scaleX(-1) rotate(4deg); }
  95%  { transform: translate(2px,-8px) scaleX(-1) rotate(-3deg); }
  100% { transform: translate(0,0) scaleX(1) rotate(0); }
}
.garden .flyger, .gbar .flyger { animation: gflyg 16s ease-in-out infinite; }
@keyframes gflyg {
  0%   { transform: translate(-40px,4px) scaleX(1); }
  25%  { transform: translate(0,-6px) scaleX(1); }
  48%  { transform: translate(40px,2px) scaleX(1); }
  50%  { transform: translate(42px,2px) scaleX(-1); }
  75%  { transform: translate(0,-8px) scaleX(-1); }
  98%  { transform: translate(-40px,4px) scaleX(-1); }
  100% { transform: translate(-40px,4px) scaleX(1); }
}

/* Läs/Story redesign (2026-09-12, las-story-ny.css) — the few glue rules the drop-in leaves to the app. */
.ncard { position: relative; color: var(--ink); }
.novels.list .ncard { flex-direction: row; align-items: flex-start; gap: .8em; padding: .6em; }
.novels.list .ncard .nbody { padding: 0; }
.novels.list .ncard .ncover { width: 2.8em; height: 3.6em; }
.novels.list .nadd { min-height: 0; padding: 12px; flex-direction: row; }
.novels.grid .ncard .ncover { border-radius: 0; }
.libhead .seg button { display: grid; place-items: center; padding: .45em .7em; }
.rhead { position: relative; }
.tempopop { position: absolute; right: 14px; top: 100%; z-index: 6; width: min(320px, calc(100vw - 2em)); background: var(--card, var(--paper)); border: 1px solid var(--line); border-radius: var(--radius); padding: .6em .9em; box-shadow: 0 8px 22px rgba(0,0,0,.14); }
.tempopop .temporow { margin: 0; }
.rtransport .step, .rtransport .play, .riconbtn, .rloop { cursor: pointer; }
.rtransport .step svg, .rtransport .play svg, .riconbtn svg, .rloop svg { display: block; }
#epStatus { border: 0; padding: 0; margin: 0 0 .9em; display: block; }
#epStatus .unlock { margin: 0; }
#epStatus .unlock #unlock { margin-top: 10px; }
.line .stop.viewing { box-shadow: 0 0 0 3px var(--yellow); }

/* Library filter (2026-09-12): one button, a panel that opens under it with the sort and the two filters. */
.libtools { display: flex; flex-wrap: wrap; gap: .5em .7em; align-items: center; margin: .5em 0 .8em; }
.libfilter { display: inline-flex; align-items: center; gap: .4em; }
.libfilter.on { background: var(--blue-soft); border-color: var(--blue-ink, var(--blue)); color: var(--blue-ink, var(--blue)); }
.libfilter .antal { font-size: .72rem; background: var(--blue); color: var(--on-blue); border-radius: 999px; padding: 0 .5em; line-height: 1.5; }
.libtools .link.small { font-size: .82rem; color: var(--granite); background: none; border: 0; padding: .2em .4em; }
.libpanel { flex-basis: 100%; display: grid; gap: .6em; padding: .8em .9em; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card, var(--paper)); }
.libpanel .rad { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .7em; }
.libpanel .lbl { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--granite); min-width: 5em; }
.seg.chips { flex-wrap: wrap; }
.seg.chips button { font-size: .82rem; padding: .35em .7em; }
.seg.chips button[aria-pressed="true"] { background: var(--blue-soft); color: var(--blue-ink, var(--blue)); }
.novels .tom { grid-column: 1 / -1; margin: .2em 0; }
.resume + .libtools { margin-top: .8em; }

/* Sentence exercises (2026-09-12, js/meningar.js): the gapped sentence as question, and the ordering board. */
.vover .vqtext.lucka { font-size: clamp(1.05rem, 4.2vw, 1.45rem); line-height: 1.35; display: inline-block; max-width: 92%; }
.vover .vqtext.ledtrad { font-size: clamp(1rem, 3.8vw, 1.3rem); font-style: italic; color: var(--granite); }
.vbelow .vex mark { background: color-mix(in srgb, var(--ok) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 .15em; }
.ordna { display: grid; gap: .6em; }
.ordna .rad, .ordna .bank { display: flex; flex-wrap: wrap; gap: .4em; min-height: 2.9em; padding: .4em; border-radius: var(--radius); }
.ordna .rad { border: 1.5px dashed var(--line); background: var(--card, var(--paper)); }
.ordna .rad.tom::before { content: "Tryck på orden i rätt ordning — dra för att flytta"; color: var(--granite); font-size: .85rem; align-self: center; padding: 0 .3em; }
.ordna .bank { background: var(--sunk, var(--blue-soft)); }
.ordna .chip { touch-action: none; user-select: none; font: inherit; font-size: 1.02rem; padding: .35em .7em; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); cursor: grab; }
.ordna .rad .chip { border-color: var(--blue-ink, var(--blue)); background: var(--blue-soft); color: var(--blue-ink, var(--blue)); }
.ordna .chip.drar { opacity: .55; transform: scale(1.06); cursor: grabbing; }
.ordna.ratt .rad { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.ordna.fel .rad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.ordna.last .chip { cursor: default; }
.spel #os-fraga.lucka { font-size: clamp(1.05rem, 3.6vw, 1.4rem); line-height: 1.35; }
.spel .hogtalare.liten { width: 34px; height: 34px; margin: 0 auto 4px; }
.vbelow .vexen { font-family: var(--sans); font-size: .86rem; color: var(--granite); margin-top: .1em; }
.wordlist .ex .exen { display: block; font-family: var(--sans); font-style: normal; font-size: .8rem; color: var(--granite); opacity: .85; }
/* Ordskär: the clock is held while a sentence is read — the bar breathes instead of standing dead still. */
#os-hud .ostid.haller i { animation: ostidHall 1.1s ease-in-out infinite alternate; }
@keyframes ostidHall { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { #os-hud .ostid.haller i { animation: none; opacity: .7; } }
/* Ordskär: the word-order board on the dark panel. */
.spel .ordna .rad { border-color: rgba(234,229,217,.3); background: rgba(234,229,217,.05); }
.spel .ordna .rad.tom::before { color: var(--dis); }
.spel .ordna .bank { background: rgba(234,229,217,.08); }
.spel .ordna .chip { background: rgba(234,229,217,.1); border-color: rgba(234,229,217,.25); color: var(--ljus); }
.spel .ordna .rad .chip { background: rgba(135,176,113,.2); border-color: var(--lav); color: #DCEBD3; }
.spel .ordna .chip.facit { background: rgba(234,229,217,.16); border-color: rgba(234,229,217,.4); color: var(--ljus); }
.spel .ordna.ratt .rad { border-color: var(--lav); background: rgba(135,176,113,.16); }
.spel .ordna.fel .rad { border-color: #D2704F; background: rgba(210,112,79,.14); }
.spel #os-klar { margin-top: 10px; width: 100%; justify-content: center; }
/* Mer (2026-09-12): short page, the rest under Avancerat. */
#moreView section { margin: 1.1em 0; }
#moreView .merrad { display: flex; align-items: center; justify-content: space-between; gap: .8em; flex-wrap: wrap; }
#moreView .merrad h2 { margin: 0; }
#moreView h2 { font-size: 1.05rem; margin: 0 0 .4em; }
#moreView details.avancerat { margin: 1.4em 0 .8em; border: 1px solid var(--line); border-radius: var(--radius); padding: .2em .9em; }
#moreView details.avancerat summary { cursor: pointer; font-weight: 600; padding: .5em 0; color: var(--granite); list-style: none; display: flex; align-items: center; gap: .5em; }
#moreView details.avancerat summary::-webkit-details-marker { display: none; }
#moreView details.avancerat summary::before { content: ""; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-left: .2em; }
#moreView details.avancerat[open] summary::before { transform: rotate(45deg); }
#moreView details.avancerat section { margin: .6em 0 1em; }
#moreView details.avancerat h3 { font-size: .92rem; margin: 0 0 .35em; }
#moreView .mekanik { margin: 0; padding-left: 1.1em; font-size: .85rem; display: grid; gap: .25em; }
#moreView #appVersion { margin: .6em 0 1.5em; }
.nvar { font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--granite); padding: 2px 6px; border-radius: 6px; background: var(--sunk, var(--blue-soft)); margin-left: .35em; }
.nvar.lokal { color: #8a5a00; background: #fff3d6; }
@media (prefers-color-scheme: dark) { .nvar.lokal { color: #f0c46a; background: #3a2d10; } }
h2.own .nvar { vertical-align: middle; }
/* Vocabulary domains (2026-09-12): tick boxes on the AI form and the import review, a chip line on the card. */
.domaner { border: 1px solid var(--line); border-radius: var(--radius); padding: .5em .8em .7em; margin: .6em 0; display: flex; flex-wrap: wrap; gap: .3em .9em; }
.domaner legend { font-size: .85rem; color: var(--granite); padding: 0 .3em; }
.domaner .dom { display: inline-flex; align-items: center; gap: .35em; font-size: .9rem; }
.domaner .dom input { width: auto; margin: 0; }
.domaner.saknas { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); }
.ndom { display: flex; flex-wrap: wrap; gap: 4px; }
.ndom span { font-size: .66rem; font-weight: 600; letter-spacing: .03em; color: var(--blue-ink, var(--blue)); background: var(--blue-soft); border-radius: 6px; padding: 2px 6px; line-height: 1.5; }
#epStatus .unlock.klar { display: flex; justify-content: center; padding: 10px; }
#epStatus .unlock.klar #unlock { margin: 0; }
/* Tempo popover: a thumb big enough for a finger, and − / + beside it. */
.tempopop .temporow { display: flex; align-items: center; gap: .5em; }
.tempopop .temporow input[type=range] { flex: 1; min-width: 0; height: 28px; -webkit-appearance: none; appearance: none; background: transparent; }
.tempopop input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--line); }
.tempopop input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.tempopop input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.tempopop input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; }
.tempopop .riconbtn { font-size: 1.2rem; line-height: 1; }
.riconbtn.tempo { width: auto; padding: 0 10px 0 8px; gap: 5px; display: inline-flex; align-items: center; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Sharing (SHARE-SPEC phase 2): the share badge on a card, the dialog, the code section on the add page. */
.nshare { position: absolute; left: 7px; top: 7px; z-index: 2; width: 24px; height: 24px; border-radius: 7px; background: var(--card, var(--paper)); display: grid; place-items: center; color: var(--granite); box-shadow: 0 1px 3px rgba(0,0,0,.18); cursor: pointer; }
.nshare.on { color: var(--blue-ink, var(--blue)); background: var(--blue-soft); }
.novels.list .nshare { left: auto; right: 36px; top: 8px; }
.novels.list .nprivate { right: 66px; }
.dlgbak { position: fixed; inset: 0; z-index: 95; background: rgba(20,24,30,.55); display: flex; align-items: center; justify-content: center; padding: 1em; }
.dlg { background: var(--paper); max-width: 420px; width: 100%; margin: 0; max-height: 90vh; overflow: auto; }
.dlg h2 { margin: 0 0 .5em; font-size: 1.15rem; }
.dlg .kod { font-family: var(--serif); font-size: 2.2rem; letter-spacing: .14em; text-align: center; padding: .35em; margin: .4em 0; border: 1.5px dashed var(--line); border-radius: var(--radius); user-select: all; }
.dlg .row { margin: .5em 0; }
.dlg button svg { vertical-align: -2px; margin-right: 4px; }
#kodruta .row { display: flex; gap: .5em; }
#kodruta input { flex: 1; min-width: 0; }
.kodkort { display: flex; gap: .8em; align-items: center; margin: .6em 0 0; }
.kodkort .ncover { flex: 0 0 auto; }
.kodkort > div { flex: 1; min-width: 0; }
.kodkort .ndom { margin-top: .3em; }
/* Phase 3–4: edit badge, report badge, report list, the rewrite box. */
.nedit { position: absolute; left: 37px; top: 7px; z-index: 2; width: 24px; height: 24px; border-radius: 7px; background: var(--card, var(--paper)); display: grid; place-items: center; color: var(--granite); box-shadow: 0 1px 3px rgba(0,0,0,.18); cursor: pointer; }
.novels.list .nedit { left: auto; right: 66px; top: 8px; }
.novels.list .nprivate { right: 96px; }
.nrep { position: absolute; left: 67px; top: 7px; z-index: 2; height: 24px; padding: 0 7px; border-radius: 7px; background: #fff3d6; color: #8a5a00; display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.18); cursor: pointer; }
@media (prefers-color-scheme: dark) { .nrep { background: #3a2d10; color: #f0c46a; } }
.novels.list .nrep { left: auto; right: 126px; top: 8px; }
.dlg .rapporter { margin: .8em 0 .3em; padding-top: .6em; border-top: 1px solid var(--line); }
.dlg .rapporter ul { margin: .4em 0 .6em; padding-left: 1.1em; font-size: .9rem; display: grid; gap: .4em; }
.skrivom { margin: .6em 0; border: 1px solid var(--line); border-radius: var(--radius); padding: .2em .8em; }
.skrivom summary { cursor: pointer; padding: .4em 0; color: var(--granite); }
/* One action button per card (2026-09-13), and its menu. */
.nmenu { position: absolute; right: 6px; top: 6px; z-index: 2; width: 34px; height: 34px; border-radius: 10px; background: var(--card, var(--paper)); color: var(--granite); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.22); cursor: pointer; }
.nmenu .prick, .meny .prick { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; }
.meny .prick { position: static; margin-left: auto; }
.novels.list .nmenu { top: 50%; transform: translateY(-50%); right: 8px; }
.novels.list .ncard .nbody { padding-right: 44px; }
.meny .rad { display: flex; align-items: center; gap: .7em; width: 100%; text-align: left; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .8em .3em; font-size: 1rem; }
.meny .rad svg { flex: none; color: var(--granite); }
.meny .rad.farlig { color: var(--bad-ink, var(--bad)); } .meny .rad.farlig svg { transform: rotate(45deg); color: inherit; }
.meny .rad:last-of-type { border-bottom: 0; }

/* ---- Läs in two pages, the standing banner, Skapa and the builder (2026-09-14) ---- */
.libhead .lasseg button { display: inline-flex; align-items: center; gap: .4em; padding: .5em .9em; font-weight: 600; }
.libhead:has(#back) { justify-content: flex-start; }
.lasseg button .antal { font-size: .7rem; background: var(--blue); color: var(--on-blue); border-radius: 999px; padding: 0 .45em; min-width: 1.4em; text-align: center; }
.lasseg button.on .antal { background: var(--blue-ink, var(--blue)); }
.libtools .snabb { margin-left: auto; display: inline-flex; gap: .35em; }
.libtools .ikon { padding: .42em .55em; display: inline-grid; place-items: center; }
.libtools .seg.lv { margin-left: 0; }
.novels .tom { grid-column: 1 / -1; }
.lasbanner { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin: 1.2em 0 .6em; }
.lasbanner button { display: flex; align-items: center; gap: .7em; text-align: left; padding: .8em .9em; border: 1.5px dashed var(--line); border-radius: 15px; background: var(--card, var(--paper)); color: var(--ink); }
.lasbanner button .ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-ink, var(--blue)); display: grid; place-items: center; }
.lasbanner button .txt { display: grid; gap: .1em; min-width: 0; }
.lasbanner button .txt b { font-size: .95rem; }
.lasbanner button .txt span { font-size: .78rem; color: var(--granite); }
@media (max-width: 420px) { .lasbanner { grid-template-columns: 1fr; } }
.customs li .x { margin-left: auto; color: var(--granite); background: none; border: 0; padding: .2em; } .customs li .x svg { transform: rotate(45deg); }
.customs li .link:first-child { text-align: left; flex: 1; min-width: 0; }
.valkort { display: grid; gap: .8em; margin: .8em 0; }
.valkort button { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: .9em; align-items: center; text-align: left; padding: 1em 1.1em; border: 1.5px solid var(--line); border-radius: 15px; background: var(--card, var(--paper)); color: var(--ink); }
.valkort button .ico { grid-row: 1 / 3; width: 52px; height: 52px; border-radius: 14px; background: var(--blue-soft); color: var(--blue-ink, var(--blue)); display: grid; place-items: center; }
.valkort button b { font-size: 1.05rem; }
.valkort button span:not(.ico) { font-size: .86rem; color: var(--granite); line-height: 1.35; }
.form.steg h2 { display: flex; align-items: center; gap: .5em; margin: 0; }
.form.steg h2 .nr { width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--blue); color: var(--on-blue); font-size: .8rem; display: grid; place-items: center; }
.form.steg .seg { justify-self: start; }
.steps.hjalp li { margin: .45em 0; } .steps.hjalp i { color: var(--blue-ink, var(--blue)); font-style: normal; }
details.avsnitt { margin: .8em 0; } details.avsnitt summary { cursor: pointer; display: flex; gap: .6em; align-items: baseline; list-style: none; }
details.avsnitt summary::-webkit-details-marker { display: none; }
details.avsnitt summary::before { content: ""; width: .5em; height: .5em; border-right: 2px solid var(--granite); border-bottom: 2px solid var(--granite); transform: rotate(-45deg); align-self: center; flex: none; }
details.avsnitt[open] summary::before { transform: rotate(45deg); }
details.avsnitt summary .rub { color: var(--granite); font-weight: 400; }
details.avsnitt textarea { font-family: inherit; }
details.extra summary { cursor: pointer; font-size: .9rem; color: var(--granite); }
.roster { display: flex; flex-wrap: wrap; gap: .5em .9em; align-items: center; }
.roster .person { display: inline-flex; align-items: center; gap: .4em; }
.seg.small button { padding: .2em .55em; font-size: .78rem; }
.dlg .lasare { margin: .6em 0; } .dlg .lasare ul { list-style: none; padding: 0; margin: .3em 0 0; display: grid; gap: .25em; }
.dlg .lasare li { display: flex; justify-content: space-between; gap: .8em; align-items: baseline; border-bottom: 1px solid var(--line); padding: .25em 0; }
.dlg .lasare .link, .dlg .link { background: none; border: 0; color: var(--blue-ink, var(--blue)); padding: 0 .2em; font-size: .85rem; }
.dlg .kodkort { margin: .3em 0 .6em; }
.spel #os-fraga.facit { color: var(--ljus); } .spel #os-fraga.facit.ratt { color: #DCEBD3; } .spel #os-fraga.facit.fel { color: #F2C14E; }
.libhead #back { flex: none; white-space: nowrap; }
/* the word player under Glosor (2026-09-14) */
.lyssnare { margin: .3em 0 .6em; padding: .7em .9em; display: grid; gap: .5em; }
.lyssnare .row { gap: .5em; align-items: center; }
.lyssnare button svg { vertical-align: -3px; margin-right: 3px; }
.lyssnare .ghost.on { background: var(--blue-soft); color: var(--blue-ink, var(--blue)); border-color: var(--blue-ink, var(--blue)); }
.lyssnare .paus { display: inline-flex; align-items: center; gap: .4em; font-size: .85rem; color: var(--granite); margin-left: auto; }
.lyssnare .paus select { width: auto; padding: .3em .5em; }
.lyssnare .nu { font-size: .92rem; line-height: 1.4; } .lyssnare .nu i { color: var(--ink); }
.wordlist li.nu { background: var(--blue-soft); border-radius: var(--radius); padding-left: .4em; padding-right: .4em; }
#lyssOpen.on { background: var(--blue-soft); color: var(--blue-ink, var(--blue)); }
@media (max-width: 430px) { .libtools .libfilter > span { display: none; } .libtools .libfilter { padding: .42em .55em; } }
/* the AI page as steps (2026-09-14) */
details.steg > summary { cursor: pointer; display: flex; align-items: center; gap: .6em; list-style: none; margin: -.2em 0; }
details.steg > summary::-webkit-details-marker { display: none; }
details.steg > summary .nr { width: 1.6em; height: 1.6em; flex: none; border-radius: 50%; background: var(--blue); color: var(--on-blue); font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
details.steg > summary .rub { font-weight: 700; font-size: 1.05rem; }
details.steg > summary .val { color: var(--granite); font-size: .85rem; margin-left: auto; text-align: right; }
details.steg[open] > summary .val { display: none; }
details.steg:not([open]) { background: var(--sunk, var(--blue-soft)); border-color: transparent; }
.valrad { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
@media (max-width: 420px) { .valrad { grid-template-columns: 1fr; } }
.valknapp { display: grid; gap: .2em; text-align: left; padding: .8em .9em; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.valknapp span { font-size: .8rem; color: var(--granite); line-height: 1.3; }
.valknapp.on { border-color: var(--blue-ink, var(--blue)); background: var(--blue-soft); }
.lyssnare button { display: inline-flex; align-items: center; gap: .35em; } .lyssnare button svg { margin: 0; display: block; } /* (#lyssOpen left this rule 2026-09-17: it is icon over label now) */
.dlg .kodrad { display: flex; align-items: center; gap: .6em; margin: .4em 0; } .dlg .kodrad .kod { flex: 1; margin: 0; } .dlg .kodrad button { flex: none; padding: .55em .7em; display: inline-grid; place-items: center; } .dlg .kodrad button svg { margin: 0; }
.dlg .rapporter b, .dlg .lasare b { display: block; margin-bottom: .2em; }
/* feedback (2026-09-15) */
nav button { position: relative; } nav button .prick { position: absolute; top: 2px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-size: .66rem; font-weight: 700; display: grid; place-items: center; }
.fbform { display: grid; gap: .4em; } .fbform textarea { font-family: inherit; }
#fbList h3 { font-size: .95rem; margin: .9em 0 .3em; display: flex; align-items: center; gap: .5em; } #fbList h3 .prick { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-size: .68rem; display: grid; place-items: center; }
.fbl { list-style: none; padding: 0; margin: 0; display: grid; gap: .4em; }
.fbl .fb { border: 1.5px solid var(--line); border-radius: var(--radius); padding: .5em .7em; display: grid; gap: .3em; }
.fbl .fb.klar { opacity: .7; }
.fbl .text { text-align: left; background: transparent; border: 0; padding: 0; color: var(--ink); font: inherit; white-space: pre-wrap; cursor: copy; }
.fbl .text .vem { display: block; font-size: .78rem; color: var(--granite); margin-bottom: .15em; }
.fbl .text.kopierad .vem { color: var(--ok-ink, var(--ok)); }
.fbl .knappar { display: flex; gap: .8em; } .fbl .knappar .link { background: none; border: 0; padding: 0; color: var(--blue-ink, var(--blue)); font-size: .82rem; }
.fbklara { margin-top: .6em; } .fbklara summary { cursor: pointer; color: var(--granite); font-size: .9rem; }
/* icon + label on one line wherever a button carries both (2026-09-15) */
.dlg .row button, #epActions button, #kodPreview button, .libtools #laggTill, .lasbanner button, .fbform button { display: inline-flex; align-items: center; gap: .35em; }
.dlg .row button svg, #epActions button svg, #kodPreview button svg, .libtools #laggTill svg { display: block; margin: 0; flex: none; }
.meny .rad.info { color: var(--granite); cursor: default; }
.meny .rad small { color: var(--granite); }
.meny .rad span { line-height: 1.3; }
#moreView details.fbfold summary .prick { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-size: .68rem; display: grid; place-items: center; }
.muted.fel { color: var(--bad-ink, var(--bad)); }
/* the admin's user list (2026-09-15) */
.users.anv li { padding: 0; border-bottom: 0; }
.anvrad { width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: .6em; text-align: left; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .55em .2em; }
.anvrad .vem { grid-column: 1; } .anvrad .fakta { grid-column: 1; font-size: .82rem; } .anvrad .chev { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.anvstat { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin: .6em 0; }
.anvstat div { display: grid; gap: .1em; text-align: center; padding: .5em .3em; border: 1px solid var(--line); border-radius: var(--radius); }
.anvstat b { font-size: 1.05rem; } .anvstat span { font-size: .72rem; color: var(--granite); }
.anvlevels { margin: .4em 0 .8em; }
#moreView .anvfold .libtools { margin: .4em 0 .6em; }
/* admin user fold: the add button keeps icon and label together; the new-account form is one field per line (2026-09-15) */
.libtools .snabb button { display: inline-flex; align-items: center; gap: .35em; } .libtools .snabb button svg { display: block; margin: 0; flex: none; }
.dlg form.authform { display: grid; gap: .6em; } .dlg form.authform label { display: grid; gap: .25em; } .dlg form.authform input, .dlg form.authform select { width: 100%; box-sizing: border-box; }
/* Säg meningen (2026-09-16) */
.rmic { padding: 0 9px; } .rmic[aria-pressed="true"] { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad-ink, var(--bad)); }
.sagbox { margin: .6em 14px 0; padding: .7em .9em; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--card, var(--paper)); display: grid; gap: .5em; }
.sagrad { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.sagrad .mening { flex: 1; min-width: 0; font-family: var(--serif); font-size: 1.1rem; line-height: 1.4; }
.sagrad .mening .ja { color: var(--ok-ink, var(--ok)); } .sagrad .mening .nej { color: var(--granite); text-decoration: underline dotted; }
.sagrad .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bad); flex: none; animation: sagpuls 1s ease-in-out infinite; }
@keyframes sagpuls { 50% { opacity: .35; } }
.sagrad .pct { font-size: 1.1rem; color: var(--granite); } .sagrad .pct.bra { color: var(--ok-ink, var(--ok)); }
.sagbox .row button { display: inline-flex; align-items: center; gap: .3em; } .sagbox .row button svg { display: block; }
.sagtips { font-size: .85rem; }
.logg { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; line-height: 1.4; white-space: pre-wrap; max-height: 40vh; overflow: auto; background: var(--sunk, var(--blue-soft)); padding: .5em .7em; border-radius: var(--radius); margin: .4em 0; }
.loggfold summary { cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--granite); }
.pop-word #popOrd { font-size: .9rem; padding: .1em .35em; vertical-align: 1px; background: var(--blue-soft); color: var(--blue-ink, var(--blue)); border-radius: 8px; border: 0; }
.pop-word #popOrd.saying { animation: sagpuls .6s ease-in-out 2; }
.pop-acts #popMic { display: inline-grid; place-items: center; padding: .35em .5em; } .pop-acts #popMic svg { display: block; }
/* the word popover, reordered (2026-09-16) */
.pop-acts.ikoner { gap: .5em; margin-top: .6em; } .pop-acts.ikoner button { display: inline-grid; place-items: center; padding: .4em .6em; } .pop-acts.ikoner svg { display: block; }
.pop-acts .dubbel { display: inline-flex; } .pop-acts .dubbel svg + svg { margin-left: -7px; }
.pop .tag.sparad { margin-top: .5em; }
.pop-sent { margin: .5em 0 0; font-size: .92rem; line-height: 1.4; }
.pop-tal { margin-top: .6em; padding-top: .6em; border-top: 1px solid var(--line); display: grid; gap: .4em; }
.pop-tal .sagrad .mening { font-size: 1rem; }
.pop-word .tag.rad { display: inline; margin: 0 0 0 .2em; font-family: var(--sans, system-ui, sans-serif); font-size: .8rem; white-space: nowrap; }
.sagrad .dot.vantar { background: var(--granite); animation: none; opacity: .5; }
/* shadowing (plan B7): the sentence hides in the story while the round runs; unheard words are dots in the panel */
.story .sent.skuggad .w { color: transparent; text-shadow: 0 0 9px rgba(28,29,33,.45); }
.sagrad .mening .nej.dold { text-decoration: none; letter-spacing: 1px; opacity: .7; }
/* Ordskär: Paus and Avsluta in the top bar (2026-09-16) */
.spelbar { display: flex; align-items: center; gap: .6em; }
.spelknappar { margin-left: auto; display: inline-flex; gap: .45em; }
.spelknappar #os-paus, .spelknappar #os-avsluta { font-size: .85rem; padding: .4em .95em; border-radius: 999px; margin: 0; background: rgba(234,229,217,.14); color: var(--ljus); border: 1.5px solid rgba(234,229,217,.55); white-space: nowrap; }
.spelknappar #os-paus[aria-pressed="true"] { background: rgba(242,193,78,.25); border-color: #F2C14E; color: #F2C14E; }
.spelknappar #os-avsluta { color: #F7B7A3; border-color: rgba(247,183,163,.6); }
/* Back to Ordlek from a game: the same pill as the reader's back button, obvious on both grounds (2026-09-16) */
.lekback { display: inline-flex; align-items: center; gap: .35em; padding: .5em .95em .5em .6em; border-radius: 999px; background: var(--blue); color: var(--on-blue); font-weight: 600; font-size: .92rem; border: 0; }
.lekback svg { display: block; } .lekback:hover { filter: brightness(1.08); }
.lektitel { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
#spelView .spelbar .lekback { border-radius: 999px; background: rgba(234,229,217,.16); color: var(--ljus); border: 1.5px solid rgba(234,229,217,.55); padding: .42em .9em .42em .55em; font-size: .92rem; } /* beats the game's square-button rule */
.spelbar .lektitel { color: var(--ljus); }
.regel { flex-wrap: wrap; gap: .4em; align-items: center; } .regel input { width: 4.5em; padding: .3em .4em; text-align: center; }
.cbtn.saying.lang::before { animation: ripple .9s ease-out infinite; } .cbtn.saying.lang::after { animation: ripple .9s ease-out .3s infinite; } /* while a whole sentence is read */
/* the garden's speaking question (2026-09-16) */
.vtal { margin: .2em 0 .5em; padding: .5em .7em; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--card, var(--paper)); display: grid; gap: .3em; }
.vtal .sagrad .mening { font-size: 1rem; }
#vtala { display: inline-flex; align-items: center; gap: .35em; }
.vover .vtalatog { margin-left: auto; } .vover .vtalatog + .vlyss { margin-left: 0; }
.vopt.vskip { background: transparent; color: var(--granite); border-style: dashed; font-size: .85rem; margin-top: .3em; }
/* the word player, icons first (2026-09-17) */
.lyssrad { gap: .6em; align-items: flex-end; flex-wrap: wrap; }
.lyssnare button.ikon { display: inline-grid; place-items: center; gap: .1em; padding: .45em .6em; min-width: 3.2em; line-height: 1; }
.lyssnare button.ikon svg { display: block; margin: 0; } .lyssnare button.ikon small { font-size: .62rem; font-weight: 600; letter-spacing: .02em; }
.lyssnare #lyssPlay { width: 48px; height: 48px; border-radius: 50%; padding: 0; min-width: 0; }
.lyssnare .paus { display: inline-grid; justify-items: center; gap: .1em; margin-left: auto; } .lyssnare .paus small { font-size: .62rem; font-weight: 600; color: var(--granite); } .lyssnare .paus select { padding: .35em .4em; }
.lyssnare .nu { display: grid; gap: .15em; padding: .5em .6em .2em; }
.lyssnare .nu .ord { font-family: var(--serif); font-size: 1.35rem; } .lyssnare .nu .en { font-size: 1rem; } .lyssnare .nu .ex { color: var(--ink); font-family: var(--serif); } .lyssnare .nu .exen { font-size: .88rem; }
.wordlist li.nu { background: transparent; padding-left: 0; padding-right: 0; }
#glosorView .glosorhead button.ikon { display: inline-grid; grid-template-rows: auto auto; place-items: center; gap: .15em; padding: .4em .5em; line-height: 1; width: 100%; height: 3.4em; box-sizing: border-box; } /* the two share one size (Linh, 2026-09-17) */ .glosorhead button.ikon svg { display: block; } .glosorhead button.ikon small { font-size: .62rem; font-weight: 600; letter-spacing: .02em; }
.glosorhead button.ikon.on { background: var(--blue-soft); color: var(--blue-ink, var(--blue)); }
/* five tabs (Vänner, 2026-09-18) */
@media (max-width: 400px) { nav button { padding: .4em .35em; min-width: 3.2em; font-size: .68rem; } }
.nvar.ai { opacity: .75; }
/* a checkbox and its text on one row inside a form (2026-09-18) */
.form label.row { display: flex; align-items: center; gap: .5em; color: var(--ink); } .form label.row input[type=checkbox] { width: auto; margin: 0; }
.auth .authsprak { position: absolute; top: calc(.8em + env(safe-area-inset-top)); right: .9em; display: inline-flex; background: var(--paper); } .auth .authsprak button { padding: .35em .75em; font-size: .82rem; } /* top right corner (Linh, 2026-09-18) */
header .huvudhoger .pill { white-space: nowrap; }
.lyssnare .lysstyst { margin: 0; font-size: .85rem; color: var(--warn, #9a5b00); }
/* The pet scene rests while the Glosor word player runs (body.vila) — its walker loop idles too (husdjur-vy.js). */
body.vila .petscene, body.vila .petscene * { animation-play-state: paused !important; }

/* Decorative movement off (Mer → Rörliga bilder, settings.rorelse; and the system's Reduce Motion).
   Animations inside an SVG repaint the whole picture every frame on iPhone (2026-09-18: a warm
   phone in long sessions), so the pet, the garden's creatures and weather and the island's life
   stand still. Feedback animations — answer pops, watering, the clock, fusing — are not listed. */
body.stilla .pet, body.stilla .pet *, body.stilla .petwalk, body.stilla .petwalk > span, body.stilla .petrow .petarrow,
body.stilla .petscene .sc-ember, body.stilla .petscene .sc-ripple, body.stilla .petscene .sc-gem,
body.stilla .bug, body.stilla .garden .flyger, body.stilla .gbar .flyger, body.stilla .snow, body.stilla .leaffall,
body.stilla .garden .hoppar, body.stilla .gbar .hoppar, body.stilla .garden .hoppar *, body.stilla .gbar .hoppar *, body.stilla .garden .fladdrar, body.stilla .gbar .fladdrar,
body.stilla .spel .simmar, body.stilla .spel .hoppar, body.stilla .spel .kravlar, body.stilla .spel .svavar, body.stilla .spel .snurrar, body.stilla .spel .pulsar,
body.stilla .spel .flyger, body.stilla .spel .guppar, body.stilla .spel .vag, body.stilla .spel .hammare, body.stilla .spel .stralkastare, body.stilla .spel .lampa,
body.stilla .spel .sken, body.stilla .spel .gnistor path { animation-play-state: paused !important; }
/* Hidden page (locked, background): the same list, paused for certain rather than left to the browser. */
body.dold .pet, body.dold .pet *, body.dold .petwalk, body.dold .petwalk > span, body.dold .petrow .petarrow,
body.dold .petscene .sc-ember, body.dold .petscene .sc-ripple, body.dold .petscene .sc-gem,
body.dold .bug, body.dold .garden .flyger, body.dold .gbar .flyger, body.dold .snow, body.dold .leaffall,
body.dold .garden .hoppar, body.dold .gbar .hoppar, body.dold .garden .hoppar *, body.dold .gbar .hoppar *, body.dold .garden .fladdrar, body.dold .gbar .fladdrar,
body.dold .spel .simmar, body.dold .spel .hoppar, body.dold .spel .kravlar, body.dold .spel .svavar, body.dold .spel .snurrar, body.dold .spel .pulsar,
body.dold .spel .flyger, body.dold .spel .guppar, body.dold .spel .vag, body.dold .spel .hammare, body.dold .spel .stralkastare, body.dold .spel .lampa,
body.dold .spel .sken, body.dold .spel .gnistor path, body.dold .creature *, body.dold .cbtn::before, body.dold .cbtn::after, body.dold .sagrad .dot { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .pet, .pet *, .petwalk, .petwalk > span, .petrow .petarrow, .petscene .sc-ember, .petscene .sc-ripple, .petscene .sc-gem,
  .bug, .garden .flyger, .gbar .flyger, .snow, .leaffall, .garden .hoppar, .gbar .hoppar, .garden .hoppar *, .gbar .hoppar *, .garden .fladdrar, .gbar .fladdrar,
  .spel .simmar, .spel .hoppar, .spel .kravlar, .spel .svavar, .spel .snurrar, .spel .pulsar, .spel .flyger, .spel .guppar, .spel .vag, .spel .hammare,
  .spel .stralkastare, .spel .lampa, .spel .sken, .spel .gnistor path { animation-play-state: paused !important; }
}

/* Web Push (docs/product/stories/web-push.md) — js/paminnelser.js: the switch + hour picker
   used under Mer, on the last onboarding page, and in the library's re-offer card. */
.paminn-forklaring { margin-top: .4em; }
.paminn-ios p { margin: 0; }
#paDetails { display: flex; flex-direction: column; gap: .5em; margin: .5em 0; }
#paDetails select { padding: .3em .5em; }

/* ---- Mer in groups (2026-09-19) ---- */
#moreView .mergrupp { margin: 1.3em 0 0; }
#moreView .grupprub { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--granite); margin: 0 0 .45em .15em; }
#moreView .merkort { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card, var(--paper)); padding: 0 .95em; }
#moreView .merblock { padding: .85em 0; border-top: 1px solid var(--line); }
#moreView .merblock:first-child { border-top: 0; }
#moreView .merblock:empty { display: none; }
#moreView .merblock h3 { font-size: .98rem; font-weight: 600; margin: 0 0 .45em; }
#moreView .merblock.merrad h3 { margin: 0; }
#moreView .merblock .row { margin: .3em 0; }
#moreView .merblock details.omfold { margin: 0; border: 0; padding: 0; }
#moreView .merblock details.omfold > summary { padding: 0; font-size: .98rem; }
#moreView .merblock .fbfold, #moreView .merblock .anvfold { margin: 0; border: 0; padding: 0; }
#moreView details.avancerat { margin-top: 1.3em; }

/* Inställningar as folds, collapsed by default (Linh, 2026-09-20); the current value sits on the summary. */
#moreView details.merblock { padding: 0; }
#moreView details.merblock > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6em; padding: .85em 0; }
#moreView details.merblock > summary::-webkit-details-marker { display: none; }
#moreView details.merblock > summary::before { content: ""; width: .5em; height: .5em; border-right: 2px solid var(--granite); border-bottom: 2px solid var(--granite); transform: rotate(-45deg); transition: transform .15s; margin: 0 .3em 0 .15em; flex: none; }
#moreView details.merblock[open] > summary::before { transform: rotate(45deg); }
#moreView details.merblock > summary h3 { margin: 0; flex: 1; }
#moreView details.merblock > summary .nu { font-size: .85rem; color: var(--granite); white-space: nowrap; }
#moreView details.merblock .merinne { padding: 0 0 .9em 1.35em; }
#moreView details.merblock .merinne.merrad { display: block; }
#moreView details.merblock .merinne .seg { margin-bottom: .3em; }

/* The pencil that opens "Skriv egen betydelse": set apart from the explanation, quiet until hovered (Linh, 2026-09-20). */
.wordlist .defEdit { margin-left: .7em; padding: 0 .45em; font-size: .85rem; line-height: 1.5; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--granite); vertical-align: baseline; }
.wordlist .defEdit:hover { color: var(--blue-ink, var(--blue)); border-color: var(--blue); }

/* "Nytt i appen" (js/nyheter.js): one card, one line per feature, a Prova button each. */
.card.nyheter { margin: 0 0 1em; border-color: var(--blue); background: var(--blue-soft); }
.card.nyheter .nyhead { display: flex; align-items: baseline; justify-content: space-between; gap: .8em; }
.card.nyheter .nyhead h2 { margin: 0; font-size: 1.05rem; }
.card.nyheter .nylista { list-style: none; margin: .5em 0 0; padding: 0; display: grid; gap: .55em; }
.card.nyheter .nylista li { display: flex; align-items: center; gap: .8em; }
.card.nyheter .nytext { display: grid; gap: .1em; flex: 1; min-width: 0; }
.card.nyheter .nytext b { font-size: .95rem; }
.card.nyheter .nytext span { font-size: .85rem; color: var(--granite); line-height: 1.35; }
.card.nyheter .nyprova { flex: none; }

/* ★ a common everyday word (js/frekvens.js, plan C1) */
.fstar { color: #d4a017; font-size: .8em; margin-left: .25em; vertical-align: .1em; }
/* Tappable words inside a Swedish explanation, and the small card they open (js/ordkort.js). */
.ow { cursor: pointer; border-bottom: 1px dotted var(--granite); }
.ow:hover { color: var(--blue-ink, var(--blue)); border-bottom-color: var(--blue); }
#ordkort { z-index: 30; }
#ordkort .pop-word { font-size: 1.2rem; }
#ordkort .pop-en { font-size: 1rem; line-height: 1.45; }
#ordkort .pop-save { margin-top: .5em; }

.pastatus { margin-top: .5em; display: grid; gap: .2em; line-height: 1.4; }

.pop-andra { font-size: .95rem; margin: -.15em 0 .35em; }

/* The add-story button under the last story (Linh, 2026-09-22): big, filled, the one way in. */
.laggtillstor { display: flex; align-items: center; gap: .8em; width: 100%; margin: 1.1em 0 .6em; padding: .95em 1.1em; border-radius: 16px; text-align: left; }
.laggtillstor svg { flex: none; }
.laggtillstor span { display: grid; gap: .1em; min-width: 0; }
.laggtillstor b { font-size: 1.05rem; }
.laggtillstor small { font-size: .8rem; font-weight: 400; opacity: .85; }
/* "Nästa ›" in the AI create flow: filled and large, not a ghost (Linh, 2026-09-22: hard to see). */
button.nasta { padding: .7em 1.4em; font-size: 1rem; font-weight: 600; border-radius: 12px; }

/* The account header at the top of Inställningar (2026-09-28, docs/design/profil-framsteg-brief.md part A):
   name, Steg and sync state in one row; open, Konto, Synk and Min profil. */
#moreView .kontokort { margin-bottom: 1rem; }
#moreView .kontohuvud > summary { min-width: 0; }
#moreView .kontohuvud .khnamn { flex: 1; min-width: 0; font-weight: 700; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#moreView .kontohuvud .khchips { flex: none; display: flex; align-items: center; gap: 6px; }
#moreView .kontohuvud .khsteg { font-size: .8rem; }
#moreView .kontohuvud .khsync { font-size: .72rem; padding: .25em .7em; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
#moreView .kontohuvud .khdel { padding: .7em 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .5em; }
#moreView .kontohuvud .khdel:first-child { border-top: 0; padding-top: 0; }