/* Mate · lofi-nat. Dark-first; lyst tema er varmt papir.
   Eleven sidder i et malet værelse, og alt indhold står i hæftet (.shell) på skrivebordet.
   Layout: én kolonne, ringbind med faneblade i venstre side, når hæftet er mindst 720px bredt (container query). */
:root {
  --bg: #1c1728; --bg2: #241e33; --card: #2d2640; --card2: #372e4d; --ink: #f1e4d0; --ink2: #cdbca8; --muted: #9c8ca8; --line: rgba(241, 228, 208, .13);
  --koral: #e89d86; --blaa: #91b1dc; --salvie: #a6c69d; --rav: #e7b66d; --lav: #bea9df; --rose: #e9a6ba;
  --on-accent: #1c1728; --lamp: rgba(231, 182, 109, .15); --glass: #33405f; --moon: #f6e7c4;
  --k-fur: #fff7ef; --k-pink: #f7d3d6; --k-ginger: #f6d7a6; --k-o: #f2b47e; --k-b: #8e5c46; --k-pad: #f4b7bf; --k-blush: #f39cab; --k-ink: #5b413c; --k-hl: #ffffff; --k-book: #7fb6c4;
  --f-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-hand: "Patrick Hand", "Comic Sans MS", "Figtree", cursive;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f1e6d3; --bg2: #eadbc3; --card: #fbf4e7; --card2: #f4e8d5; --ink: #2d2340; --ink2: #5a4964; --muted: #857485; --line: rgba(45, 35, 64, .14);
    --koral: #c4634b; --blaa: #4c76ad; --salvie: #5b8a55; --rav: #b17d2a; --lav: #7c63a9; --rose: #bd6481;
    --on-accent: #fbf4e7; --lamp: rgba(230, 160, 80, .2); --glass: #9fb3d6; --moon: #fff6dd; color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f1e6d3; --bg2: #eadbc3; --card: #fbf4e7; --card2: #f4e8d5; --ink: #2d2340; --ink2: #5a4964; --muted: #857485; --line: rgba(45, 35, 64, .14);
  --koral: #c4634b; --blaa: #4c76ad; --salvie: #5b8a55; --rav: #b17d2a; --lav: #7c63a9; --rose: #bd6481;
  --on-accent: #fbf4e7; --lamp: rgba(230, 160, 80, .2); --glass: #9fb3d6; --moon: #fff6dd; color-scheme: light;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.55;
  background-image: radial-gradient(50rem 34rem at 90% -10%, var(--lamp), transparent 70%); background-repeat: no-repeat; min-height: 100vh;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
h1, h2, h3, h4 { font-family: var(--f-display); text-wrap: balance; margin: 0; line-height: 1.1 }
h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: 800; letter-spacing: -.02em }
h2 { font-size: 1.35rem; font-weight: 800; margin-top: 12px }
h3 { font-size: 1.1rem; font-weight: 600 }
p { margin: 0; max-width: 62ch }
a { color: inherit }
button { font: inherit; color: inherit }
:focus-visible { outline: 2px dashed var(--rav); outline-offset: 3px }
.muted { color: var(--muted) } .small { font-size: .86rem } .tabnum { font-variant-numeric: tabular-nums }
.eyebrow { font-family: var(--f-hand); font-size: 1.15rem; color: var(--rav) }
.lede { font-size: 1.1rem; color: var(--ink2) }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.between { justify-content: space-between }
.go { color: var(--salvie) }
.typo { font-family: var(--f-hand); font-size: 1.12rem; color: var(--rav) }
.tick { font-family: var(--f-hand); font-size: 1.3rem; color: var(--salvie); line-height: 1 }
.cross { font-family: var(--f-hand); font-size: 1.3rem; color: var(--koral); line-height: 1 }

/* ---------- ramme ---------- */
.shell { container: shell / inline-size; max-width: 980px; margin: 0 auto; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); padding-bottom: 32px }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 2px; min-height: 58px }
.bar-left { display: flex; align-items: center; gap: 12px }
.back { text-decoration: none; font-size: 1.3rem; padding: 4px 8px 4px 2px; color: var(--ink2) }
.wordmark { font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em }
.offline { font-family: var(--f-hand); color: var(--koral) }
.jar-chip { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 9px; text-decoration: none; font-size: .9rem; font-variant-numeric: tabular-nums }
.jar-chip svg { width: 16px; height: 18px }
.ver { text-align: center; color: var(--muted); font-size: .75rem; padding-top: 28px }

.btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; padding: 12px 20px; font-weight: 600; cursor: pointer; background: var(--rav); color: var(--on-accent); font-size: 1rem; text-decoration: none; touch-action: manipulation; min-height: 46px }
.btn:hover { filter: brightness(1.06) }
.btn.sec { background: transparent; border: 1.5px solid var(--line); color: var(--ink) }
.btn[disabled] { opacity: .45; cursor: not-allowed }
.link { background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--muted); text-decoration: underline; text-underline-offset: 3px }
.msg { font-family: var(--f-hand); font-size: 1.12rem; color: var(--rav) }

.screen { display: flex; flex-direction: column; gap: 18px; padding-block: 8px 24px; position: relative }
.screen.center { align-items: center; text-align: center; padding-top: 60px }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.cat-l { width: 170px } .cat-m { width: 120px } .cat-s { width: 90px; align-self: flex-end }
.perch { position: absolute; z-index: 3; pointer-events: none }
.dots { display: inline-flex; gap: 4px; vertical-align: middle }
.dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink2); display: block }
.dots i.f { background: var(--ink2) }

/* ---------- login ---------- */
.login { display: grid; grid-template-columns: 1fr; gap: 28px; padding-top: 24px }
.login-form { display: flex; flex-direction: column; gap: 14px; max-width: 360px }
.login-form h1 { font-size: 3rem }
.field { display: flex; flex-direction: column; gap: 4px }
.field label { font-size: .85rem; color: var(--muted) }
.field input { font: inherit; font-size: 16px; padding: 11px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink) }
.field input:focus { outline: none; border-color: var(--rav) }
/* ---------- velkomst ---------- */
.welcome { display: grid; grid-template-columns: 1fr; gap: 24px; padding-top: 16px }
.welcome-text { display: flex; flex-direction: column; gap: 14px }
.welcome-side { display: flex; flex-direction: column; align-items: center; gap: 8px }
.stickynote { font-family: var(--f-hand); font-size: 1.1rem; background: color-mix(in srgb, var(--rav) 85%, var(--bg)); color: var(--on-accent); padding: 12px 14px; transform: rotate(2.2deg); max-width: 240px; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .5) }

/* ---------- hjem ---------- */
.home { display: grid; grid-template-columns: 1fr; gap: 6px }
.tabs { display: flex; overflow-x: auto; gap: 2px; border-bottom: 1px solid var(--line); scrollbar-width: none; margin-inline: -14px; padding-inline: 14px }
.tabs::-webkit-scrollbar { display: none }
.tabs button { background: none; border: 0; cursor: pointer; padding: 10px 12px; white-space: nowrap; color: var(--ink2); font-size: .92rem; border-bottom: 3px solid transparent }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--tab, var(--rav)) }
.tabs .t-koral { --tab: var(--koral) } .tabs .t-blaa { --tab: var(--blaa) } .tabs .t-salvie { --tab: var(--salvie) } .tabs .t-lav { --tab: var(--lav) }
.tabs hr { display: none }
.home-main { display: flex; flex-direction: column; gap: 20px; position: relative; padding: 18px 0 100px }
.greet { font-family: var(--f-hand); font-size: 1.3rem; color: var(--ink2); padding-right: 70px }
.cont { background: var(--card); border-radius: 12px; padding: 18px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; margin-top: 30px }
.cont .k { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.cont .t { font-family: var(--f-display); font-weight: 800; font-size: 1.35rem }
.topics { display: flex; flex-direction: column; position: relative }
.topic { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n s" "d s"; gap: 4px 12px; align-items: center; padding: 13px 2px; border-bottom: 1px dashed var(--line); text-decoration: none }
.topic .tn { grid-area: n; font-weight: 600 } .topic .dots { grid-area: d } .topic .status { grid-area: s }
.topic:hover .tn { text-decoration: underline; text-decoration-color: var(--rav); text-underline-offset: 4px }
.topic.soon { opacity: .5 }
.status { font-family: var(--f-hand); font-size: 1.02rem; color: var(--muted); text-align: right }
.status.go { color: var(--salvie) }
.soon-box { background: var(--bg2); border-radius: 10px; padding: 18px; position: relative }
.foot { padding-top: 40px }

/* ---------- emne ---------- */
.topic-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap }
.trin-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 4px }
.emne-grid { display: grid; grid-template-columns: 1fr; gap: 26px }
.subs { display: flex; flex-direction: column }
.subrow { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 10px; border: 0; border-bottom: 1px dashed var(--line); background: none; text-align: left; cursor: pointer; align-items: center; border-radius: 6px }
.subrow.on { background: var(--card); border-bottom-color: transparent }
.subrow.on > span:first-child::after { content: " ←"; color: var(--rav) }
.huske { background: var(--card); border-radius: 4px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; position: relative; margin-top: 64px; transform: rotate(.6deg) }
.huske h4 { font-family: var(--f-hand); font-weight: 400; font-size: 1.35rem; color: var(--rav) }
.huske .ex { font-variant-numeric: tabular-nums; font-weight: 500; white-space: pre-line }

/* ---------- opgave ---------- */
.crumb { font-size: .95rem }
.screen.practice { max-width: 640px; width: 100%; margin-inline: auto }
.progress { display: flex; gap: 3px; flex-wrap: wrap }
.progress i { width: 14px; height: 6px; border-radius: 3px; background: var(--line); display: block }
.progress i.seen { background: var(--ink2); opacity: .55 } .progress i.now { background: var(--rav) }
.task { background: var(--card); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 14px; position: relative;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--line) 31px 32px); background-position: 0 12px }
.task-n { font-family: var(--f-hand); font-size: 1.15rem; color: var(--muted) }
.task-q { font-size: 1.12rem }
.expr { font-size: 1.7rem; font-weight: 500; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; line-height: 1.3 }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.1; margin: 0 2px; font-size: .92em }
.frac > span:first-child { border-bottom: 2px solid currentColor; padding: 0 4px }
.frac > span:last-child { padding: 0 4px }
.answer { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.afield { min-width: 110px; height: 52px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); font-size: 1.4rem; font-variant-numeric: tabular-nums; text-align: left; cursor: text; display: inline-flex; align-items: center }
.afield.on { border-color: var(--rav) }
.afield.on .val::after { content: ""; display: inline-block; width: 2px; height: 1.2em; background: var(--rav); margin-left: 2px; vertical-align: -3px; animation: caret 1s steps(1) infinite }
@keyframes caret { 50% { opacity: 0 } }
.post, .unit { font-size: 1.25rem }
.post.small { font-size: .86rem }
.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; max-width: 420px; width: 100%; user-select: none; -webkit-user-select: none }
.keypad button { font-family: var(--f-display); font-weight: 600; font-size: 1.4rem; padding: 12px 0; min-height: 54px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; touch-action: manipulation }
.keypad button:active { transform: translateY(1px); background: var(--card2) }
.keypad .w2 { grid-column: span 2 }
.keypad .ok { background: var(--rav); color: var(--on-accent); border-color: transparent; font-size: 1rem }
.fb { display: flex; flex-direction: column; gap: 10px }
.fb-head { font-family: var(--f-display); font-weight: 800; font-size: 1.45rem }
.fb-head.ok { color: var(--salvie) } .fb-head.no { color: var(--koral) }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px }
.steps li { padding-left: 4px }

/* ---------- resultat ---------- */
.result-big { font-family: var(--f-display); font-weight: 800; font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums }
.res-rows { display: flex; flex-direction: column }
.res { display: grid; grid-template-columns: 26px 1fr; gap: 4px 10px; padding: 10px 2px; border-bottom: 1px dashed var(--line); align-items: center }
.res .q { font-variant-numeric: tabular-nums } .res .a { grid-column: 2; font-size: .9rem; color: var(--ink2) }
.res details { grid-column: 2 } .res summary { cursor: pointer; color: var(--rav); font-size: .9rem }
.res details .steps { margin-top: 8px; font-size: .95rem }
.verdict { background: var(--card); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px }
.verdict.good { background: color-mix(in srgb, var(--salvie) 18%, var(--card)) }
.list-rows { display: flex; flex-direction: column }
.list-rows > * { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px dashed var(--line); text-decoration: none }

/* ---------- krukken ---------- */
.jar-wrap { display: grid; grid-template-columns: 1fr; gap: 24px }
.jar-col { display: flex; flex-direction: column; align-items: center; gap: 6px }
.jar-big { width: 150px; max-width: 100% }
.ledger { display: flex; flex-direction: column }
.ledger > div { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 9px 2px; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums }
.ledger .plus { color: var(--salvie) } .ledger .paid { color: var(--muted) }

/* ---------- forælder ---------- */
.card { background: var(--card); border-radius: 10px; padding: 18px }
.form { display: grid; gap: 12px }
.form.two { grid-template-columns: 1fr }
.form .row, .form .msg, .form h3 { grid-column: 1 / -1 }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px }
.stats > div { background: var(--card); border-radius: 10px; padding: 14px; display: flex; flex-direction: column }
.stats b { font-family: var(--f-display); font-size: 1.6rem }
.stats span { color: var(--muted); font-size: .85rem }
.pay { display: flex; flex-direction: column; align-items: flex-end; gap: 8px }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px }
table { border-collapse: collapse; width: 100%; font-size: .93rem }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line) }
th { font-weight: 600; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .07em }
tr:last-child td { border-bottom: 0 }
.flags { display: flex; flex-direction: column; gap: 8px }
.flag { background: var(--card); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px }

/* ---------- katten ---------- */
.cat { display: block; overflow: visible; width: 100%; height: auto }
.cat .fur { fill: var(--fur, var(--k-fur)); stroke: var(--k-ink); stroke-width: 2.4; stroke-linejoin: round }
.cat .outline { fill: none; stroke: var(--k-ink); stroke-width: 2.4 }
.cat .tail-o { fill: none; stroke: var(--k-ink); stroke-width: 11; stroke-linecap: round }
.cat .tail-i { fill: none; stroke: var(--fur, var(--k-fur)); stroke-width: 6.2; stroke-linecap: round }
.cat .p-o { fill: var(--k-o) } .cat .p-b { fill: var(--k-b) }
.cat .pinkf { fill: var(--k-pad) }
.cat .eyes { fill: var(--k-ink) } .cat .hl { fill: var(--k-hl) }
.cat .ln { fill: none; stroke: var(--k-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.cat .stripe { fill: none; stroke: var(--k-b); stroke-opacity: .45; stroke-width: 2.4; stroke-linecap: round }
.cat .blush { fill: var(--k-blush); opacity: .55 }
.cat .page { fill: var(--k-hl); stroke: var(--k-ink); stroke-width: 2; stroke-linejoin: round }
.cat .cover { fill: var(--k-book); stroke: var(--k-ink); stroke-width: 2; stroke-linejoin: round }
.cat .glasses { fill: var(--k-hl); fill-opacity: .25; stroke: var(--k-ink); stroke-width: 2 }
.cat .gold { fill: var(--rav); stroke: var(--k-ink); stroke-width: 2 }
.cat .sign { fill: var(--k-hl); stroke: var(--k-ink); stroke-width: 2 }
.cat .sign-t { font-family: var(--f-hand); font-size: 15px; fill: var(--k-ink) }
.cat .coin-t { font-family: var(--f-display); font-weight: 800; font-size: 9px; fill: var(--k-ink) }
.cat .zz { font-family: var(--f-hand); font-size: 12px; fill: var(--ink2) }
.cat .eyes { transform-box: fill-box; transform-origin: center; animation: blink 6s infinite }
.cat .tailg { transform-box: fill-box; transform-origin: 0% 100%; animation: sway 4s ease-in-out infinite }
.cat .ear-r { transform-box: fill-box; transform-origin: 50% 100%; animation: twitch 7s infinite }
.cat .breath { transform-box: fill-box; transform-origin: 50% 100%; animation: breath 3.6s ease-in-out infinite }
.cat .zz { animation: zz 3.6s ease-in-out infinite }
@keyframes blink { 0%, 46%, 50%, 100% { transform: scaleY(1) } 48% { transform: scaleY(.1) } }
@keyframes sway { 50% { transform: rotate(9deg) } }
@keyframes twitch { 0%, 90%, 96%, 100% { transform: rotate(0) } 93% { transform: rotate(-12deg) } }
@keyframes breath { 50% { transform: scaleY(1.035) } }
@keyframes zz { 0% { opacity: 0; transform: translateY(4px) } 50% { opacity: 1 } 100% { opacity: 0; transform: translateY(-6px) } }

/* ---------- glæder ---------- */
#joy-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden }
#joy-layer > * { position: absolute }
.stamp { font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; color: var(--koral); border: 3px solid var(--koral); border-radius: 50%; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; transform: rotate(-14deg) }

/* ---------- bredere skærme ---------- */
@media (min-width: 720px) {
  .shell { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)) }
}
@container shell (min-width: 720px) {
  .welcome { grid-template-columns: 1fr 220px; align-items: end; padding-top: 40px }
  .home { grid-template-columns: 190px 1fr; gap: 0 }
  .tabs { flex-direction: column; overflow: visible; border-bottom: 0; border-right: 1px solid var(--line); margin: 0; padding: 18px 0 }
  .tabs button { text-align: left; white-space: normal; border-bottom: 0; border-left: 5px solid transparent; padding: 11px 16px 11px 14px }
  .tabs button[aria-selected="true"] { background: var(--card); border-left-color: var(--tab, var(--rav)) }
  .tabs hr { display: block; border: 0; border-top: 1px dashed var(--line); margin: 8px 14px }
  .home-main { padding: 18px 0 100px 28px }
  .topic { grid-template-columns: 1fr auto 110px; grid-template-areas: "n d s" }
  .emne-grid { grid-template-columns: 1.1fr 1fr }
  .jar-wrap { grid-template-columns: 200px 1fr }
  .form.two { grid-template-columns: 1fr 1fr }
  .stats { grid-template-columns: repeat(4, 1fr) }
  .expr { font-size: 1.9rem }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

/* ---------- værelset ---------- */
/* Udenfor værelset (login, forælder) er scenen usynlig, og hæftet er en almindelig side. */
.stage { display: contents }
body:not(.in-room) .stage > :not(.shell) { display: none }

body.in-room { overflow: hidden; background: #1a1420; --nbTop: 36dvh }
body.in-room.focus { --nbTop: 18dvh }
/* Scenen har billedets format og dækker skærmen. På bred skærm centreres den, på høj skærm hænger den fra toppen. */
body.in-room .stage { display: block; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100vw, calc(100dvh * 1.7917)); height: max(100dvh, calc(100vw / 1.7917)) }
body.in-room[data-shape="tall"] .stage { top: 0; transform: translateX(-50%);
  width: max(100vw, calc(100dvh * .5582)); height: max(100dvh, calc(100vw / .5582)) }

/* Maleriet og alt, der hører til det (lys, genveje, veninder), ligger i .scene, så det kan flyttes samlet. */
.scene { position: absolute; inset: 0 }
/* Telefonen i scener med malede pladser: samme maleri som på computeren, skåret til pladserne (x fra --bx0 i bredden --bxw procent),
   i en stribe øverst. Under en opgave rykker striben op, så pigerne stadig ses over hæftet. */
body[data-band="vaerelse"] { --bx0: 4; --bxw: 84 }
body[data-band="cafe"] { --bx0: 10; --bxw: 75 }
body[data-band="butik"] { --bx0: 12; --bxw: 77 }
body[data-band="skov"] { --bx0: 7; --bxw: 80 }
body.in-room[data-shape="tall"][data-band] .stage { left: 0; transform: none; width: 100vw; height: 100dvh }
body.in-room[data-shape="tall"][data-band] .scene { inset: auto; left: calc(-100vw * var(--bx0) / var(--bxw)); top: 0;
  width: calc(100vw * 100 / var(--bxw)); height: calc(100vw * 100 / var(--bxw) / 1.7917); transition: top .4s ease }
body.in-room[data-shape="tall"][data-band] { --nbTop: calc(100vw * 100 / var(--bxw) / 1.7917 - 16px) }
body.in-room.focus[data-shape="tall"][data-band] { --nbTop: 17dvh }
body.in-room.focus[data-shape="tall"][data-band] .scene { top: calc(-100vw * 100 / var(--bxw) / 1.7917 * .3) }
.room-bg { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 1.6s ease }
.room-bg.on { opacity: 1 }

/* Hæftet: ternet papir med ringhuller og margenstreg. Papiret er lyst i alle tider. */
body.in-room .shell {
  --bg: #fbf3e4; --bg2: #f2e5cf; --card: #fffaf2; --card2: #f3e7d4; --ink: #2d2340; --ink2: #5a4964; --muted: #857485; --line: rgba(45, 35, 64, .15);
  --koral: #c4634b; --blaa: #4c76ad; --salvie: #5b8a55; --rav: #b17d2a; --lav: #7c63a9; --rose: #bd6481; --on-accent: #fbf4e7; --glass: #9fb3d6;
  color-scheme: light; color: var(--ink);
  position: absolute; z-index: 5; margin: 0; max-width: none;
  left: var(--nbLeft, 34%); width: 31.5%; top: 20%; bottom: calc((100% - 100dvh) / 2 + 2.5%);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: 4px 22px 18px 50px; border-radius: 10px;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 22px 46px, #3a2c2a 0 5px, transparent 6px),
    linear-gradient(90deg, transparent 38px, rgba(217, 139, 156, .55) 38px 40px, transparent 40px),
    linear-gradient(rgba(150, 175, 200, .28) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 175, 200, .28) 1px, transparent 1px),
    linear-gradient(var(--bg), var(--bg));
  background-size: 100% 92px, 100% 100%, 22px 22px, 22px 22px, 100% 100%;
  /* Papirfarven er også et fast lag: Chrome glemte af og til at male farven under et rullende (local) mønster. */
  background-attachment: local, local, local, local, scroll;
  box-shadow: 0 28px 44px -22px rgba(60, 30, 10, .6), 0 0 0 1px rgba(80, 40, 10, .1);
  transition: top .4s ease, height .4s ease;
}
/* I caféen sidder veninderne tæt på midten, så hæftet rykker lidt til venstre og lader begge ansigter være fri. */
body[data-scene="cafe"] { --nbLeft: 29.5% }
body[data-scene="skov"] { --nbLeft: 32.5% }
body[data-scene="butik"] { --nbLeft: 36% }
body.in-room[data-time="nat"] .shell { --bg: #efe5d3; --card: #f6eedf }
body.in-room .ver { padding-top: 18px }
body.in-room .bar { min-height: 50px; padding-block: 8px }

body.in-room[data-shape="tall"] .shell {
  left: calc((100% - 100vw) / 2 + 2.5vw); width: 95vw; top: var(--nbTop); bottom: auto; height: calc(100dvh - var(--nbTop));
  padding: 2px 14px calc(14px + env(safe-area-inset-bottom, 0px)) 14px; border-radius: 16px 16px 0 0;
  background-image: linear-gradient(rgba(150, 175, 200, .28) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 175, 200, .28) 1px, transparent 1px), linear-gradient(var(--bg), var(--bg));
  background-size: 22px 22px, 22px 22px, 100% 100%;
  background-attachment: local, local, scroll;
}
/* På telefonen står taltastaturet fast nederst i hæftet. */
body.in-room[data-shape="tall"] .keypad { position: sticky; bottom: calc(-14px - env(safe-area-inset-bottom, 0px)); z-index: 2; background: var(--bg); padding: 8px 0 calc(10px + env(safe-area-inset-bottom, 0px)); max-width: none }

/* Damp fra kruset og støv i solstrålen (kun på bred skærm, hvor kruset kan ses) */
.room-steam { position: absolute; left: 61.2%; top: 48%; width: 3%; overflow: visible; pointer-events: none }
.room-steam path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; opacity: 0; animation: rsteam 4.5s ease-in-out infinite }
@keyframes rsteam { 0% { opacity: 0; transform: translateY(10px) } 30% { opacity: .35 } 100% { opacity: 0; transform: translateY(-40px) } }
.motes { position: absolute; inset: 0; pointer-events: none; transition: opacity 1.6s }
.motes i { position: absolute; width: .3%; aspect-ratio: 1; border-radius: 50%; background: #fff3cf; opacity: 0; box-shadow: 0 0 6px #ffd98a; animation: mote 9s ease-in-out infinite }
@keyframes mote { 0% { opacity: 0; transform: translate(0, 0) } 25% { opacity: .85 } 75% { opacity: .6 } 100% { opacity: 0; transform: translate(40px, -50px) } }
body[data-time="nat"] .motes, body[data-time="aften"] .motes, body[data-shape="tall"] .motes, body[data-shape="tall"] .room-steam { opacity: 0; display: none }

/* Ting man kan trykke på: krukken og radioen */
.hot { position: absolute; z-index: 4; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 12px; transition: background .2s }
.hot:hover, .hot:focus-visible { background: rgba(255, 226, 166, .16); outline: 2px dashed rgba(255, 226, 166, .8); outline-offset: 2px }
.jar-hot { left: 70.6%; top: 17.6%; width: 4.6%; height: 11.4% }
.radio-hot { left: 76.8%; top: 20.5%; width: 8.2%; height: 8.6% }

.radio-box { position: fixed; z-index: 40; left: max(12px, env(safe-area-inset-left, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); width: min(340px, calc(100vw - 24px));
  background: #1f1a2b; color: #f1e4d0; border-radius: 14px; padding: 6px 10px 10px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); display: flex; flex-direction: column; gap: 6px }
body[data-shape="tall"] .radio-box { bottom: auto; top: max(8px, env(safe-area-inset-top, 0px)); left: auto; right: max(8px, env(safe-area-inset-right, 0px)) }
.rb-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-hand); font-size: 1.1rem }
.rb-head .link { color: #cdbca8 }
.rb-body iframe { display: block; width: 100%; height: 96px; border: 0; border-radius: 10px }

/* Telefon i værelset: øv og tjek skal kunne være der uden at scrolle. */
body.in-room.focus[data-shape="tall"] { --nbTop: 12dvh }
body.in-room[data-shape="tall"] .bar { min-height: 44px; padding-block: 4px }
body.in-room[data-shape="tall"] .screen { gap: 12px; padding-block: 4px 12px }
body.in-room.focus[data-shape="tall"] .task-n { display: none }
body.in-room[data-shape="tall"] .task { padding: 14px 16px; gap: 10px }
body.in-room[data-shape="tall"] .keypad { gap: 6px }
body.in-room[data-shape="tall"] .keypad button { min-height: 46px; padding: 6px 0 }
body.in-room[data-shape="tall"] .radio-box { left: 8px; right: 8px; width: auto; padding: 2px 8px 8px; gap: 2px }
body.in-room[data-shape="tall"] .rb-body iframe { height: 84px }
.radio-box[hidden] { display: none }

/* Med mus og fysisk tastatur (MacBook) skjules taltastaturet; man skriver direkte. */
.kbhint { display: none }
.kbhint kbd { font: 600 .82em var(--f-body); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; background: var(--card) }
@media (hover: hover) and (pointer: fine) {
  .keypad { display: none }
  .kbhint { display: block }
}

/* ---------- måleren mod næste trin ---------- */
.meter { display: grid; gap: 5px }
.meter .lbl { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums }
.meter .bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px }
.meter .bar i { height: 8px; border-radius: 3px; background: var(--line) }
.meter .bar i.r { background: var(--ink2); opacity: .55 } .meter .bar i.h { background: var(--rav) } .meter .bar i.x { background: var(--koral); opacity: .35 }
.trinup { border: 2px dashed var(--salvie); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; transform: rotate(-.8deg); background: color-mix(in srgb, var(--salvie) 8%, transparent); position: relative }
.trinup b { font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; color: var(--salvie) }
.trinup span { font-family: var(--f-hand); font-size: 1.1rem; color: var(--ink2) }
.st-ok { color: var(--salvie) } .st-mid { color: var(--rav) } .st-low { color: var(--koral) } .st-none { color: var(--muted) }

/* ---------- overblik ---------- */
.overview .week { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.overview .week > div { background: var(--card); border-radius: 8px; padding: 10px 12px; display: grid }
.overview .week b { font-family: var(--f-display); font-weight: 800; font-size: 1.4rem; font-variant-numeric: tabular-nums }
.overview .week span { font-size: .78rem; color: var(--muted) }
.focusnote { background: #f6dd8f; color: #3b2b2b; padding: 12px 16px 14px; transform: rotate(1deg); box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .5); display: grid; gap: 6px; max-width: 420px }
.focusnote .h { font-family: var(--f-hand); font-size: 1.25rem }
.focusnote a { color: inherit; font-weight: 600; text-underline-offset: 3px }
.ov-subs { display: grid }
.ov-topic { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 14px }
.ov-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n s" "t s"; gap: 4px 12px; padding: 10px 2px; border-bottom: 1px dashed var(--line); align-items: center; text-decoration: none }
.ov-sub .n { grid-area: n; font-weight: 600 } .ov-sub .n small { font-weight: 400; color: var(--muted) }
.ov-sub .t { grid-area: t; display: flex; gap: 3px; min-height: 8px }
.ov-sub .t i { width: 8px; height: 8px; border-radius: 50% } .ov-sub .t i.y { background: var(--salvie) } .ov-sub .t i.x { background: var(--koral); opacity: .75 }
.ov-sub .s { grid-area: s; font-family: var(--f-hand); font-size: 1.08rem; text-align: right; white-space: nowrap }
.ov-sub:hover .n { text-decoration: underline; text-decoration-color: var(--rav); text-underline-offset: 4px }

/* Opslagstavlen i værelset åbner overblikket (kun den synlige stribe over hæftet) */
.board-hot { left: 45%; top: 14.2%; width: 14.5%; height: 15.4% }
.ov-link { font-family: var(--f-hand); font-size: 1.12rem; color: var(--rav); text-decoration: none; margin-top: -8px } .ov-link:hover { text-decoration: underline; text-underline-offset: 3px }

/* Hint i lag */
.hints { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-family: var(--f-hand); font-size: 1.12rem; color: var(--rav) }
.hints li { padding-left: 2px }
.hints .blank { font-family: var(--f-display); font-weight: 800; color: var(--ink); background: color-mix(in srgb, var(--rav) 22%, transparent); border-radius: 4px; padding: 0 6px }

/* hidden skal altid vinde over display-regler som .row { display: flex } */
[hidden] { display: none !important }

/* Fuldskærm-knap ved krukken */
.bar-right { display: flex; align-items: center; gap: 8px }
.fs-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink2); cursor: pointer; padding: 0 12px 0 10px; font-size: .86rem; font-weight: 600 }
.fs-btn:hover { color: var(--ink) }
.fs-btn svg { width: 15px; height: 15px }

/* Uden for værelset hører krukken, radioen, tavlen, dampen og støvet ikke til billedet */
body:not([data-scene="vaerelse"]) .board-hot, body:not([data-scene="vaerelse"]) .room-steam, body:not([data-scene="vaerelse"]) .motes { display: none }
/* På telefonen ligger scenernes ting bag hæftet; der bruges knapperne i hæftets top */
body[data-shape="tall"]:not([data-scene="vaerelse"]):not([data-band]) .hot { display: none }
@media (max-width: 420px) { .fs-btn span { display: none } .fs-btn { padding: 0 9px } }

/* ---------- veninder ---------- */
/* Figuren hænger i sædelinjen: (x, y) er midten af bunden, så hun sidder på fladen uanset skærmstørrelse. */
/* Levende lag i scenen (ambience.js): lyskæder. Under veninderne og genvejene. */
.amb { position: absolute; inset: 0; z-index: 2; pointer-events: none; container-type: size }
body:not(.in-room) .amb, body[data-shape="tall"]:not([data-band]) .amb { display: none }
.amb .bulb { position: absolute; width: 1.6cqw; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(rgba(255, 226, 160, .95), rgba(255, 180, 90, .35) 32%, transparent 70%); animation: twinkle 4s ease-in-out infinite alternate }
@keyframes twinkle { from { opacity: .1 } to { opacity: .75 } }
.friends { position: absolute; inset: 0; z-index: 3; pointer-events: none }
body:not(.in-room) .friends, body[data-shape="tall"]:not([data-band]) .friends { display: none }
/* En malet lap: udsnittet af maleriet med veninden i. Den ligger præcis over sin tomme plads, så hun er en del af billedet. */
.lap { position: absolute; background: var(--img) 0 0 / 400% 100% no-repeat; animation: fin 1.6s ease both }
.lap i { position: absolute; inset: 0; background: var(--img) 0 0 / 400% 100% no-repeat; opacity: 0; animation: 14s ease-in-out var(--dl, 0s) infinite }
.lap .f1 { background-position: 33.333% 0; animation-name: lapF1 }
.lap .f2 { background-position: 66.667% 0; animation-name: lapF2 }
.lap .f3 { background-position: 100% 0; animation-name: lapF3 }
.lap .tag { position: absolute; left: 62%; top: 4%; transform: translateX(-50%); font-family: var(--f-hand); font-size: clamp(.8rem, 1vw, 1.05rem); line-height: 1; color: #fff8ec; background: rgba(45, 28, 22, .5); padding: 3px 8px 4px; border-radius: 999px; white-space: nowrap }
/* Skriver, skriver, kigger op og tænker, skriver, blinker. Hvert billede toner ind og ud over billede 1. */
@keyframes lapF1 { 0%, 5%, 16%, 19%, 30%, 33%, 44%, 73%, 84%, 100% { opacity: 0 } 8%, 13%, 22%, 27%, 36%, 41%, 76%, 81% { opacity: 1 } }
@keyframes lapF2 { 0%, 48%, 71%, 100% { opacity: 0 } 53%, 66% { opacity: 1 } }
@keyframes lapF3 { 0%, 90.5%, 95%, 100% { opacity: 0 } 92%, 93.3% { opacity: 1 } }
@keyframes draw { 0%, 28% { background-position: 0 0 } 30%, 54% { background-position: 33.333% 0 } 56%, 84% { background-position: 66.667% 0 } 86%, 94% { background-position: 100% 0 } 96%, 100% { background-position: 0 0 } }
@keyframes fin { from { opacity: 0 } }

.friend-bubbles { position: absolute; z-index: 6; display: flex; gap: 6px; left: calc(var(--nbLeft, 34%) + .5%); top: calc(20% - 48px) }
body[data-shape="tall"] .friend-bubbles { left: auto; right: calc((100% - 100vw) / 2 + 4vw); top: calc(var(--nbTop) - 50px) }
body:not(.in-room) .friend-bubbles { display: none }
.bubble { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff8ec; background-color: #e9d8bf; background-repeat: no-repeat; background-size: 400px 88px; background-position: -25px 4px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; color: #5a4964; animation: pulse 3s ease-in-out infinite }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 248, 236, .55), 0 4px 10px -4px rgba(0, 0, 0, .5) } 50% { box-shadow: 0 0 0 6px rgba(255, 248, 236, 0), 0 4px 10px -4px rgba(0, 0, 0, .5) } }

/* figurvalg */
.pick-row { display: flex; flex-wrap: wrap; gap: 12px }
.pick-fig { width: 170px; aspect-ratio: 410 / 360; border-radius: 14px; border: 2px solid var(--line); background: var(--card); padding: 8px; cursor: pointer; position: relative }
.pick-fig:hover, .pick-fig:focus-visible { border-color: var(--rav) }
.pick-fig .fig { position: absolute; inset: 8px; background: 0 0 / 400% 100% no-repeat; animation: draw 3.6s step-end infinite }

/* Stregtegnede figurer i opgaverne (gen.js). Ikke målfaste, som i prøven. */
.task-fig { margin: 0; display: flex; justify-content: center }
.task-fig .fig { max-width: 100%; height: auto; overflow: visible }
.fig path, .fig circle, .fig ellipse { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round }
.fig .dash { stroke-dasharray: 5 5; stroke-width: 1.5; stroke: var(--ink2) }
.fig .thin { stroke-width: 1.2; stroke: var(--ink2) }
.fig .dot { fill: var(--ink); stroke: none }
.fig text { font-family: var(--f-hand); font-size: 15px; fill: var(--koral); stroke: none }
.fig .grid { stroke: var(--line); stroke-width: 1 }
.fig .axis { stroke: var(--ink); stroke-width: 1.6 }
.fig .graph { stroke: var(--blaa); stroke-width: 2.6 }

/* Sammen: aftaler og nedtælling */
.together { position: sticky; top: 0; z-index: 3; margin: 2px 0 6px; padding: 6px 12px; border-radius: 999px; background: var(--card2); color: var(--ink); font-family: var(--f-hand); font-size: 1.05rem; text-align: center }
.sammen .aftaler { display: grid; gap: 10px }
.sammen .aftale { display: grid; gap: 10px; padding: 14px 16px }
.sammen .aftale .row { flex-wrap: wrap; gap: 8px }
.ny-aftale { display: grid; gap: 12px; max-width: 420px }
.ny-aftale label { display: grid; gap: 4px; font-weight: 600 }
.ny-aftale input[type=date], .ny-aftale select { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink) }
.ny-aftale fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 10px; display: flex; flex-wrap: wrap; gap: 8px 16px }
.ny-aftale legend { font-weight: 600; padding: 0 4px }
.ny-aftale .who { display: flex; align-items: center; gap: 6px; font-weight: 500 }