/* Fælles for Runeborg, Regnehelten og Eventyrbiblioteket — indlæses EFTER spillets eget stilark.

   1. Vinduerne må ikke kræve scroll. Før blev de sat til 100vh minus 32px; på en telefon er 100vh højere end det,
      man kan se (adresselinjen), så både vinduet og dets baggrund fik en scrollbar, og knapperne nederst
      forsvandt. Nu følger vinduet pladsen i spillet (max-height: 100%), og overskrift og knapper bliver stående.
   2. På lave skærme (laptop, telefon på langs) er alt mindre: skrift, mellemrum og knapper.
   3. Kortet (kort.js) og den hurtige guide (guide.js). */

/* ---------- 1. Vinduerne følger pladsen ---------- */
:root { --vh: 100vh; }
@supports (height: 100dvh) { :root { --vh: 100dvh; } }

.modal-bg, .screen-full {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
.task, .book, .end, .menu, .title-card, .fig-vindue, .praes-vindue, .kick {
  max-height: 100%; overflow: auto; overscroll-behavior: contain;
}
.book-head, .task-head { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.book-head { margin: -4px -4px 0; padding: 4px; }
.dialog { max-height: calc(100% - 28px); overflow: auto; }
#hud, #tbtns {
  margin-left: env(safe-area-inset-left); margin-right: env(safe-area-inset-right);
}
/* Zonen (ikke selve joysticket) viger for hakket, så joysticket står under tommelfingeren */
#stick-zone { left: env(safe-area-inset-left); }

/* Pausemenuen: knapperne i to rækker, så den også er der på en lav skærm */
.menu.pause { width: min(100%, 640px); grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.menu.pause > h2, .menu.pause > p { grid-column: 1 / -1; margin: 0; }
.menu.pause .btn { padding: 6px 12px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.menu.pause .btn.primary-wide { grid-column: 1 / -1; }
@media (max-width: 420px) {
  .menu.pause { gap: 6px; padding: 14px 12px; }
  .menu.pause .btn { padding: 6px 8px; font-size: .88em; }
}

/* Figureditoren findes i alle spil: samme bredde som i Eventyrbiblioteket */
.fig-vindue { width: min(100%, 640px); }
.fig-laast ul { display: flex; flex-wrap: wrap; gap: 2px 14px; }
@media (max-width: 560px) {
  .fig-prev canvas { width: 96px; height: 96px; }
  .fig-row { grid-template-columns: 4.6em auto minmax(3em, 1fr) auto; gap: 6px; }
  .fig-row .lbl { font-size: .82em; }
}

/* Berøringsknapperne må ikke ligge under en hjemmeknap eller et hak */
#tbtns { right: max(22px, env(safe-area-inset-right)); bottom: max(30px, env(safe-area-inset-bottom)); }

/* ---------- 2. Lave skærme ---------- */
@media (max-height: 720px) {
  body { --fs: clamp(15px, 2.8vh, 19px); }
  body.big { --fs: clamp(17px, 3.3vh, 22px); }
  .menu { padding: 14px 18px; gap: 8px; }
  .fig-prev canvas { width: 96px; height: 96px; }
  .fig-ed { gap: 8px; }
  .fig-rows { gap: 4px; }
  .fig-row .arr { height: 1.6em; }
}
@media (max-height: 560px) {
  body { --fs: clamp(14px, 3.1vh, 18px); }
  body.big { --fs: clamp(15px, 3.6vh, 21px); }
  .menu { padding: 12px 14px; gap: 6px; }
  .menu h2 { margin: 0; }
  .task { padding: 10px 14px 12px; gap: 8px; }
  .task-body { gap: 12px; }
  .book { padding: 10px 14px; gap: 8px; }
  .end, .title-card { padding: 14px 16px; gap: 8px; }
  .title-card h1 { font-size: 2em; }
  .btn { padding: 5px 12px; box-shadow: 0 3px 0 var(--ink); }
  .opt { padding: 5px 10px; }
  .dialog { min-height: 5.2em; padding: 8px 12px 10px; gap: 10px; }
  .dialog .portrait { width: 4em; height: 4em; }
  .dialog .choices { margin-top: 6px; gap: 5px; }
  #hud { padding: 6px 8px; }
  #hud-quest { padding: 3px 8px; }
  #toasts { top: 46px; }
  .fig-prev canvas { width: 96px; height: 96px; }
  .fig-ed { gap: 8px; }
  .fig-rows { gap: 3px; }
  .classes { gap: 6px; }
  .cls { padding: 6px; }
  .cls canvas { width: 44px; height: 44px; }
  .praes-liste { gap: 5px; }
  .kick-cv { max-height: 52vh; width: auto; }
}
/* Telefon på langs: dokument og spørgsmål side om side i stedet for oven på hinanden */
@media (orientation: landscape) and (max-height: 560px) {
  .task { width: min(100%, 1180px); }
  .task-body.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #stick-base { width: 104px; height: 104px; left: 22px; bottom: 18px; }
  #stick-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  #t-act { width: 66px; height: 66px; }
  body.touching #prompt { bottom: 124px; }
}
@media (max-height: 380px) {
  body { --fs: 13px; }
  body.big { --fs: 15px; }
  .menu.pause .btn { padding: 3px 8px; }
}

/* ---------- 3. Kortet ---------- */
.kort-vindue { width: min(100%, 1040px); display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; overflow: hidden; }
.kort-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kort-top h2 { margin: 0; flex: 1 1 auto; }
.kort-krop { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; flex: 1 1 auto; min-height: 0; align-items: start; }
.kort-flade {
  position: relative; line-height: 0; justify-self: center; background: var(--ink); border: 3px solid var(--edge-2);
  width: min(100%, calc((var(--vh) - 168px) * var(--r, 1.3)));
}
.kort-flade canvas { display: block; width: 100%; height: auto; }
.kort-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr)); gap: 6px; align-content: start; max-height: calc(var(--vh) - 168px); overflow: auto; }
.kort-liste .btn { display: grid; gap: 0; padding: 5px 10px; line-height: 1.25; text-align: left; box-shadow: 0 3px 0 var(--ink); }
.kort-liste .btn small { color: var(--txt-soft); font-size: .78em; }
.kort-liste .btn.primary small { color: var(--ink); }
.kort-liste.grupper { display: block; }
.kort-gruppe { color: var(--gold); font-size: .72em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 6px 0 3px; }
.kort-gruppe:first-child { margin-top: 0; }
.kort-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.kort-chips .btn { padding: 3px 9px; font-size: .88em; box-shadow: 0 2px 0 var(--ink); }
.kort-fod { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.kort-fod .task-help { margin: 0; flex: 1 1 14em; }
.kort-pin, .kort-her { position: absolute; transform: translate(-50%, -50%); line-height: 1; padding: 0; background: none; border: 0; font: inherit; }
.kort-pin i, .kort-her i {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 13px;
  background: var(--gold); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--gold);
}
.kort-pin b, .kort-her b {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 5px; white-space: nowrap;
  font-size: .68em; font-weight: 700; padding: 2px 6px; background: rgba(20, 15, 28, .92); color: var(--txt); border: 2px solid var(--edge-2);
}
.kort-pin.venstre b, .kort-her.venstre b { left: auto; right: 100%; margin: 0 5px 0 0; }
.kort-pin:hover i, .kort-pin:focus-visible i { background: #fff3c4; outline: none; }
.kort-pin:hover, .kort-pin:focus-visible { z-index: 3; }
.kort-pin.mission i { width: 28px; height: 28px; font-size: 17px; background: #ffcc4d; box-shadow: 0 0 0 3px #fff3c4; animation: kort-puls 1s steps(2) infinite; }
.kort-pin.mission.ekstra i { background: #9ad0ff; box-shadow: 0 0 0 3px #e3f3ff; }
.kort-pin.valgt i { background: #9ad0ff; box-shadow: 0 0 0 3px #fff; }
.kort-her { z-index: 2; pointer-events: none; }
.kort-her i { background: var(--blue); box-shadow: 0 0 0 2px #fff; animation: kort-puls 1s steps(2) infinite; }
@keyframes kort-puls { 50% { transform: scale(1.18); } }
/* Smal skærm: kortet øverst, listen under. Nålenes navne står i listen, så de skjules på det lille kort */
@media (max-aspect-ratio: 5/4) {
  .kort-vindue { padding: 10px 12px; gap: 6px; }
  .kort-top { flex-wrap: nowrap; gap: 5px; }
  .kort-top h2 { font-size: .95em; flex: 1 1 auto; white-space: nowrap; }
  .kort-top .tab, .kort-top .btn { padding: 3px 8px; font-size: .82em; }
  .kort-krop { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .kort-flade { flex: none; align-self: center; }
  .kort-vindue.paa-personer .kort-fod .task-help { display: none; }
  .kort-gruppe { margin: 4px 0 2px; }
  .kort-chips { gap: 4px; }
  .kort-chips .btn { padding: 2px 7px; font-size: .8em; }
  .kort-flade { width: min(100%, calc((var(--vh) - 290px) * var(--r, 1.3))); }
  .kort-liste { grid-template-columns: repeat(auto-fill, minmax(7.2em, 1fr)); gap: 5px; flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; }
  .kort-liste .btn { padding: 3px 8px; font-size: .85em; box-shadow: 0 2px 0 var(--ink); }
  .kort-pin b, .kort-her b { display: none; }
  .kort-pin:hover b, .kort-pin:focus-visible b { display: block; z-index: 4; }
  .kort-fod .task-help { font-size: .8em; }
  .kort-vindue.paa-personer .kort-flade { display: none; }
}

/* ---------- 3b. Den hurtige guide ---------- */
.guide-vindue { width: min(100%, 520px); text-align: center; justify-items: center; gap: 8px; overflow: hidden; }
.guide-over { margin: 0; color: var(--gold); font-size: .78em; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.guide-ikon { font-size: 2.6em; line-height: 1; }
.guide-vindue h2 { margin: 0; }
.guide-tekst { margin: 0; line-height: 1.7; }
.guide-prikker { display: flex; gap: 8px; }
.guide-prikker i { width: 10px; height: 10px; background: var(--edge-2); border: 2px solid var(--ink); }
.guide-prikker i.paa { background: var(--gold); }
.guide-raekke { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.guide-spring { opacity: .8; }
@media (max-height: 560px) {
  .kort-vindue.paa-personer .kort-flade { display: none; }
  .kort-vindue.paa-personer .kort-krop { grid-template-columns: minmax(0, 1fr); }
  .kort-pin b, .kort-her b { display: none; }
  .kort-pin:hover b, .kort-pin:focus-visible b { display: block; z-index: 4; }
  .guide-ikon { font-size: 1.8em; }
  .guide-tekst { line-height: 1.5; }
  .kort-flade { width: min(100%, calc((var(--vh) - 140px) * var(--r, 1.3))); }
  .kort-liste { max-height: calc(var(--vh) - 140px); }
}
#t-map { width: 62px; height: 46px; font-size: 15px; font-weight: 700; }
.fig-laast summary { cursor: pointer; }
.fig-laast[open] summary { margin-bottom: 4px; }
.kort-her b { left: 50%; top: auto; bottom: 100%; transform: translateX(-50%); margin: 0 0 5px; background: var(--blue); color: var(--ink); border-color: var(--ink); }

/* Dagbogens missionsliste i flere spalter, så den ikke bliver længere end skærmen */
.dag-krop { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); align-items: start; }
.dag-krop > .act-h, .dag-krop > .task-help, .dag-krop > .empty { grid-column: 1 / -1; margin: 4px 0 0; }
.dag-krop .qitem { padding: 4px 10px; }

/* Opgavevinduer på en meget lav skærm (telefon på langs) og vægte/mønter, der ellers er for høje */
.scale { width: min(100%, 480px, calc((var(--vh) - 215px) * 2.2)); }
@media (max-height: 420px) {
  .task { gap: 6px; padding: 8px 12px 10px; }
  .task-body { gap: 10px; }
  .task-q { font-size: 1em; margin: 0 0 6px; }
  .task-help { margin: -2px 0 6px; font-size: .8em; }
  .opts { gap: 4px; }
  .opt { padding: 3px 8px; }
  .feedback { padding: 5px 10px; }
  .doc { padding: 8px 12px; }
  .coins { zoom: .78; }
  .bal-ctrl .btn { font-size: 1.1em; }
  .task-foot { gap: 6px; }
}
@media (max-height: 380px) {
  .task { padding: 6px 10px 8px; gap: 4px; }
  .task-head { font-size: .9em; }
  .task-q { margin: 0 0 4px; }
  .btn { padding: 3px 10px; }
}
@media (max-width: 420px) { .coins { zoom: .85; } }

/* Telefon: figureditoren med figuren ved siden af rækkerne i stedet for oven over dem */
@media (max-width: 560px) {
  .fig-krop { grid-template-columns: auto minmax(0, 1fr); gap: 8px; justify-items: stretch; }
  .fig-prev canvas { width: 72px; height: 72px; }
}
/* Dagbogen på en lille skærm: kun missioner, der er i gang eller klaret — de låste "???" kan ses på en større skærm */
@media (max-width: 560px), (max-height: 420px) {
  .dag-krop .qitem.locked { display: none; }
  .dag-krop .qitem.done .meta, .dag-krop .qitem.done .uses { display: none; }
}
@media (max-width: 560px) and (max-height: 640px) { .menu > .tiny { display: none; } }

/* Trofærummet: overskrift og Luk står øverst, mens listen ruller */
.praes-top { position: sticky; top: -14px; z-index: 2; background: var(--panel); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: center; margin: -14px -4px 0; padding: 14px 4px 6px; }
.praes-top h2 { margin: 0; }
.praes-top .praes-sum { grid-column: 1; }
.praes-top .btn { grid-column: 2; grid-row: 1 / span 2; }

/* ---------- Telefon: joystick og knapper fylder mindre og står ikke så tæt ---------- */
@media (max-width: 600px), (max-height: 560px) {
  #stick-base { width: 96px; height: 96px; left: 16px; bottom: 16px; }
  #stick-knob { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  #tbtns { right: max(14px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); gap: 8px; }
  #t-act { width: 58px; height: 58px; font-size: 21px; }
  #t-book, #t-map, #t-bag { width: 52px; height: 38px; font-size: 13px; }
  body.touching #prompt { bottom: 120px; }
}
/* E-knappen: ens i alle spil (den hænger ikke på Kort/Bog-rækken), stor, halvgennemsigtig og tæt på højre kant.
   Kort og Bog står i hjørnet nederst. --e-lift er, hvor højt E løftes over hjørnet. */
/* Placering som i andre mobilspil: joysticket nederst til venstre, E som den store knap, hvor højre tommelfinger
   hviler (ikke helt ude i hjørnet), og Kort og Bog som mindre knapper i en bue omkring E.
   --ex/--eb er E's afstand fra højre kant og bunden, --es dens størrelse; Kort og Bog regnes ud fra dem. */
:root {
  --e-lift: 56px; --e-size: clamp(64px, 18vmin, 84px);
  --es: var(--e-size);
  --ex: max(16px, env(safe-area-inset-right));
  --eb: calc(max(16px, env(safe-area-inset-bottom)) + var(--e-lift));
}
#tbtns { left: 0; top: 0; right: 0; bottom: 0; margin: 0; pointer-events: none; }
#tbtns button { pointer-events: auto; position: absolute; margin: 0; }
#t-act {
  right: var(--ex); bottom: var(--eb);
  width: var(--es); height: var(--es); font-size: 26px;
  background: rgba(31,24,48,.45) !important; border-color: rgba(255,204,77,.75) !important;
}
#t-map, #t-book, #t-bag { background: rgba(31,24,48,.6) !important; width: 52px; height: 40px; }
#t-book { right: calc(var(--ex) + var(--es) + 10px); bottom: var(--eb); }                     /* ved siden af E */
#t-bag  { right: calc(var(--ex) + var(--es) + 70px); bottom: var(--eb); }                      /* Runeborg og Regnehelten: tasken ved siden af bogen */
#t-map  { right: calc(var(--ex) + var(--es) * .75); bottom: calc(var(--eb) + var(--es) + 8px); } /* over E, mod venstre */
@media (max-width: 600px), (max-height: 560px) { body.touching #prompt { bottom: 150px; } }
/* Telefon på højkant: E i nederste tredjedel, og joysticket i samme højde (midte ud for E) */
@media (orientation: portrait) and (max-width: 600px) {
  :root { --e-lift: 15vh; --ex: max(8vw, 20px, env(safe-area-inset-right)); }
  #stick-base { bottom: calc(var(--eb) + (var(--es) - 96px) / 2); }
  #stick-zone { height: 70%; }
  body.touching #prompt { bottom: 120px; }
}
/* Telefon på langs: E lidt inde fra kanten, tommelfingeren hviler skråt ind fra hjørnet */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --e-lift: max(9vh, 14px); --ex: max(6vw, 24px, env(safe-area-inset-right)); }
  #stick-base { bottom: calc(var(--eb) + (var(--es) - 96px) / 2); left: max(6vw, 24px, env(safe-area-inset-left)); }
  body.touching #prompt { bottom: 110px; }
}

/* Tastaturet er enhedens eget (spil/faelles/tastatur.js). Mens det er oppe (body.kbd-open, --kbd-h = dets højde), rykker vinduerne op over det
   og kan rulles, og joysticket og knapperne er væk, så de ikke ligger oven på teksten. Felterne er mindst 16 px, så en iPhone ikke zoomer ind. */
body.kbd-open .modal-bg, body.kbd-open .screen-full { padding-bottom: calc(var(--kbd-h, 0px) + 12px); align-items: start; overflow-y: auto; }
body.kbd-open .modal-bg > * { max-height: 100%; overflow-y: auto; }
body.kbd-open #touch { display: none; }
@media (pointer: coarse) { input, textarea, select { font-size: max(16px, 1em); } }
.kbd-minus { margin-left: 8px; min-width: 44px; height: 44px; font-size: 22px; font-weight: 700; vertical-align: middle; }
@media (orientation: landscape) and (max-height: 560px) {
  /* Dokument og tabel til venstre i en opgave: en bred tabel kan rulles sidelæns */
  .task .doc { overflow-x: auto; }
  .task .doc table { font-size: .9em; }
  .task .doc th, .task .doc td { padding: 3px 5px; }
}

/* Opgaver på en lav skærm: knapperne (Senere / Svar) bliver stående i bunden af vinduet, mens indholdet ruller,
   og valgmulighederne står i to spalter, så der er mindre at rulle. */
@media (orientation: landscape) and (max-height: 560px) {
  .task-foot { position: sticky; bottom: -12px; z-index: 2; background: var(--panel); margin: 4px -14px -12px; padding: 6px 14px 12px; }
  /* Figur-vinduet ("Hvem er du?", Klædeskabet): Gem/Det er mig! bliver stående, og mens tastaturet er oppe
     fylder overskrift og forklaring ikke, så der er plads til navnefeltet over tastaturet */
  .fig-vindue .end-row { position: sticky; bottom: -12px; z-index: 2; background: var(--panel); margin: 4px -14px -12px; padding: 6px 14px 12px; }
  body.kbd-open .fig-vindue > h2, body.kbd-open .fig-vindue > p.tiny { display: none; }
  .task .read-q { padding: 2px 10px; min-height: 0; margin: 0 0 4px; font-size: .85em; box-shadow: 0 2px 0 var(--ink); }
  .task .opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
}

/* "Læs opgaver op": lille højttaler i hver svarmulighed + fremhævning af den, der læses lige nu */
.opt .lyt, .tile .lyt, .feedback .lyt { flex: none; display: inline-grid; place-items: center; min-width: 34px; min-height: 30px; margin-left: auto; padding: 0 6px; background: var(--panel-2); border: 2px solid var(--edge-2); color: var(--txt-soft); cursor: pointer; }
.feedback .lyt { margin: 0 0 0 8px; vertical-align: middle; }
.opt .lyt:hover, .opt .lyt:focus-visible, .tile .lyt:hover, .tile .lyt:focus-visible, .feedback .lyt:hover, .feedback .lyt:focus-visible { border-color: var(--gold); color: var(--gold); outline: none; }
.laeses { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (pointer: coarse) { .opt .lyt, .tile .lyt { min-width: 40px; min-height: 36px; } }

/* "Læs teksten op" i et dokument: dokumentets mørke tekstfarve må ikke smitte af på knappen */
.doc .doc-read { color: var(--txt, #fff); background: var(--panel, #1f1830); margin: 0 0 10px; }
.doc .sent.laeses { outline: none; background: rgba(255,204,77,.6); }

/* Hvert vindue er sit eget lag: et vindue åbnet over et andet (fx Regnebogen midt i en opgave) må ikke have det underliggendes
   sticky overskrift stikkende op gennem sig. */
#layer > .modal-bg { z-index: 1; }

/* Trofærummet: historierne og tingene fra Der var engang… */
.dv-samling .dv-tom { margin: 12px 4px; line-height: 1.5; }
.dv-hylde { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 2px 4px; }
.dv-bog { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; width: 130px; min-height: 150px; padding: 12px 10px 10px 18px; position: relative; text-align: left;
  font: inherit; color: #fff; cursor: pointer; background: #6a3d8f; border: 2px solid #2a1840; border-radius: 4px 8px 8px 4px; box-shadow: 3px 3px 0 rgba(0,0,0,.35); }
.dv-bog:hover, .dv-bog:focus-visible { background: #8250ad; outline: 3px solid #ffe070; outline-offset: 2px; }
.dv-bog .dv-ryg { position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: #ffe070; border-radius: 3px 0 0 3px; opacity: .85; }
.dv-bog b { font-size: 1.02em; line-height: 1.2; overflow-wrap: anywhere; }
.dv-bog small { opacity: .85; }
.dv-tekst { padding: 6px 4px; line-height: 1.55; max-width: 60ch; }
.dv-tekst p { margin: 0 0 .8em; }
.dv-ting { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding: 8px 2px 4px; }
.dv-ting-kort { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; text-align: center; background: rgba(255,255,255,.08); border-radius: 8px; }
.dv-ting-kort b { font-size: .9em; overflow-wrap: anywhere; }
.dv-bill { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; }
.praes-top .dv-knapper { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.praes-top .dv-knapper .btn { grid-column: auto; grid-row: auto; }