/* Der var engang… — det lille, der ikke er i Runeborgs stilark */
.ico-tid { background: var(--blue); border-radius: 50%; box-shadow: inset -3px -3px 0 #3a7ab8; }
.ico-star { background: var(--gold); clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }
.ico-ord { background: #e8d8b4; border: 2px solid #8a6a3a; border-radius: 1px; box-shadow: inset 3px 0 0 #c8a040; }
.fig-vindue { width: min(100%, 640px); }
.menu .tiny { margin: 0; font-size: .85em; color: var(--txt-soft); }
.praes-vindue { width: min(100%, 760px); }
.praes-vindue h3 { margin: 6px 0 0; color: var(--gold); }
.praes-vindue h3 small { color: var(--txt-soft); font-weight: 400; }
.praes-sum { margin: 0; color: var(--txt-soft); }
.praes-sum b { color: var(--gold); font-size: 1.2em; }
.praes-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.praes { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 8px 10px; background: var(--panel-2); border: 3px solid var(--edge-2); opacity: .7; }
.praes.har { border-color: var(--gold); background: #3a2d52; opacity: 1; }
.praes .pt { display: grid; gap: 1px; }
.praes .pt small { color: var(--txt-soft); font-size: .8em; line-height: 1.3; }
.praes .pt .pb { color: #9ad0ff; }
.praes .pt .pd { color: var(--gold); }
.praes svg { display: block; }

/* Bogen: skrivevinduet, læsevinduet og stilen */
.skriv-vindue { width: min(100%, 720px); }
.skriv-vindue h2 { margin-bottom: 2px; }
.skriv-sp { margin: 4px 0 2px; font-size: 1.2em; font-weight: 700; color: var(--gold); }
.skriv-tekst { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 1.15em; line-height: 1.5; padding: 10px 12px; margin: 8px 0 6px; resize: vertical; min-height: 7.5em;
  background: var(--paper); color: var(--paper-ink); border: 3px solid #8a6a3a; box-shadow: 3px 3px 0 var(--ink); }
.skriv-tekst:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.skriv-spoerg { margin: 2px 0 6px; min-height: 1.2em; color: #9ad0ff; font-size: .95em; }
.maaler-tekst { margin: 0 0 8px; }
.laes-tekst { font-size: 1.15em; line-height: 1.7; background: var(--paper); color: var(--paper-ink); border: 3px solid #8a6a3a; padding: 10px 14px; margin: 6px 0; }
.stil-side { background: var(--paper); color: var(--paper-ink); border: 3px solid #8a6a3a; padding: 18px 22px; margin: 8px 0; max-height: 52vh; overflow: auto;
  font-family: Georgia, "Times New Roman", serif; font-size: 1.08em; line-height: 1.65; }
.stil-side p { margin: 0 0 .8em; }
.stil-side h2.stil-titel { text-align: center; margin: 0; color: var(--paper-ink); }
.stil-om { margin: -.3em 0 1em; font-size: .75em; opacity: .75; }
.stil-side .stil-af { text-align: center; font-style: italic; margin: 2px 0 16px; }
.titel-felt { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.3em; padding: 10px 12px; margin: 8px 0; background: var(--paper); color: var(--paper-ink); border: 3px solid #8a6a3a; }
.titel-felt:focus { outline: 3px solid var(--gold); outline-offset: 1px; }

/* Cutscenes: biograf-striber, og tekst midt på skærmen. Et tryk springer filmen over. */
body.film #hud, body.film #prompt, body.film #touch { opacity: 0; pointer-events: none; transition: opacity .4s; }
#stage::before, #stage::after { content: ''; position: absolute; left: 0; right: 0; height: 0; background: #0b0810; z-index: 40; transition: height .6s; pointer-events: none; }
#stage::before { top: 0; } #stage::after { bottom: 0; }
body.film #stage::before, body.film #stage::after { height: 11%; }
.film-tekst { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 45; max-width: 86%; text-align: center; color: #fff; line-height: 1.3;
  font-size: clamp(1.3rem, 4.6vw, 2.8rem); text-shadow: 0 3px 0 #1a1420, 0 0 18px rgba(0,0,0,.75); opacity: 0; transition: opacity .8s; pointer-events: none; }
.film-tekst.vis { opacity: 1; }
.film-tekst span { font-size: .5em; opacity: .9; }
.hist-kort { border: 2px solid rgba(255,255,255,.18); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.hist-kort.aktiv { border-color: #ffd860; }
.hist-titel { font-weight: 700; margin-bottom: 2px; }
.hist-kort .end-row { margin-top: 8px; }
/* Brug (Q): det, helten bærer, som store knapper med tingens billede */
.brug-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin: 10px 0; }
.brug-knap { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; min-height: 84px; text-align: center; }
.brug-knap canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.brug-knap .tiny { opacity: .8; }
.brug-knap.valgt { border-color: #ffd860 !important; }
#tbtns #t-bag { right: calc(var(--ex) + var(--es) + 10px); bottom: var(--eb); }   /* ved siden af E (der er ingen bog-knap her) */
body.touching #btn-brug { display: none; }   /* på en berøringsskærm er tasken nede ved E */
/* Mens tastaturet er oppe: skrivevinduet bliver kompakt (spørgsmålet, feltet og knapperne), så det hele kan ses over tastaturet */
body.kbd-open .skriv-vindue { padding-top: 10px; padding-bottom: 10px; }
body.kbd-open .skriv-vindue > h2 { font-size: 1.05em; margin: 0 0 2px; }
body.kbd-open .skriv-vindue > p.tiny:not(.maaler-tekst) { display: none; }
body.kbd-open .skriv-vindue .skriv-sp { font-size: .9em; margin: 0 0 6px; }
body.kbd-open .skriv-tekst { height: 4.4em; min-height: 0; font-size: 1em; }
body.kbd-open .skriv-vindue .end-row .btn { padding: 6px 12px; font-size: .9em; }
body.kbd-open .skriv-vindue .end-row { position: sticky; bottom: -10px; background: inherit; padding: 6px 0 4px; margin-top: 4px; }