/* Blyantstafetten — designsystem "Papir" (redesign 7/7 2026, afløser "Plakat").
   Varm papirhvid bund, blæk-mørk tekst, én okker accent. Bricolage Grotesque til
   overskrifter/tal/wordmark, Spline Sans til brødtekst/UI. Navigation: fast bund-
   tab-bar (Nu/Arkiv/Hitliste), ☰ bottom sheet, ←-detaljeskærme.
   De gamle variabelnavne (--papir, --grafit, --blyantgul, --graa, --linje, --groen,
   --rosa, --blaa, --kraft) er BEHOLDT som aliaser nederst, så tema-jul + evt. rester
   fortsat virker - men de nye navne bruges i selve designet. */

/* Self-hostede fonte (variable WOFF2, latin-subset - dækker æøå). Hentet fra
   Google Fonts 13/7 2026 og lagt lokalt, så brugerens IP aldrig sendes til Google. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/bricolage-grotesque.woff2) format('woff2');
}
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/spline-sans.woff2) format('woff2');
}

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --papir: #F8F4EC;          /* baggrund (papir) */
  --kort: #FFFEFA;           /* kort/flader */
  --blaek: #23201A;          /* tekst */
  --muted: #8B8171;          /* dæmpet tekst */
  --svag: #A79D8B;           /* ekstra svag */
  --linje: #E5DECF;          /* borders */
  --skille: #EEE8DA;         /* svag skillelinje */
  --track: #E9E2D2;          /* progressbar-track / neutrale avatarer */
  --dashed: #C9BFA9;         /* dashed/placeholder + chevron */
  --stribe1: #F3EEE2;        /* stribe-bg lys */
  --stribe2: #EDE7D8;        /* stribe-bg mørk */
  --accent: #C1852F;         /* okker */
  --accent-moerk: #9A6A22;   /* mørk accent (links/tekst) */
  --accent-blod: #F4E7CF;    /* soft accent-bg */
  --positiv: #4C8A4F;
  --negativ: #B5563E;

  --font-h: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-b: 'Spline Sans', system-ui, sans-serif;

  --skygge-kort: 0 4px 12px rgba(35,32,26,0.07);
  --skygge-accent: 0 6px 18px rgba(193,133,47,0.18);
  --skygge-cta: 0 8px 20px rgba(193,133,47,0.35);
  --skygge-sheet: 0 -12px 40px rgba(35,32,26,0.25);

  --bund: max(26px, env(safe-area-inset-bottom));
  --app-height: 100vh;
}

/* jul-tema (skiftes pr. udfordring): behold blot som festlig accent-omfarvning.
   Fuld julekalender-look er ude af dette redesign (ikke i mockup'en). */
.tema-jul {
  --accent: #b23a3a;
  --accent-moerk: #7d2020;
  --accent-blod: #f0d7d0;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-b);
  background: var(--papir);
  color: var(--blaek);
  min-height: var(--app-height);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#app { max-width: 480px; margin: 0 auto; padding: 6px 20px 108px; }

h1, h2, h3, h4 { font-family: var(--font-h); font-weight: 800; line-height: 1.12; }

a { color: var(--accent-moerk); text-decoration: none; }

/* ---------- topbar ---------- */

.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 0 6px; min-height: 52px; }
/* fast wordmark-bar: klæber til toppen på alle sider (detalje-rækken ruller med) */
.topbar:not(.detalje) { position: sticky; top: 0; z-index: 40; background: var(--papir);
  margin: 0 -20px; padding: max(10px, env(safe-area-inset-top)) 20px 6px; }
.topbar.detalje { min-height: 46px; padding: 2px 0 6px; }
/* "Vis som [medlem]"-banner: altid synligt (klæber over topbaren) - der må
   aldrig være tvivl om at admin kigger med et medlems øjne. Mørk = umiskendelig. */
.vis-som-banner { position: sticky; top: 0; z-index: 50; margin: 0 -20px;
  min-height: 36px; display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: max(6px, env(safe-area-inset-top)) 14px 6px;
  background: var(--blaek); color: var(--papir); font-size: 13px; }
.vis-som-banner b { font-weight: 700; }
.vis-som-banner button { font: inherit; font-size: 12px; font-weight: 700;
  color: var(--papir); background: none; border: 1.5px solid rgba(248,244,236,0.55);
  border-radius: 999px; padding: 3px 12px; cursor: pointer; }
body.vis-som .topbar:not(.detalje) { top: 36px; padding-top: 10px; }
.side-titel { font-family: var(--font-h); font-weight: 800; font-size: 27px;
  letter-spacing: -0.4px; margin: 12px 0 4px; }
.topbar .wordmark { font-family: var(--font-h); font-weight: 800; font-size: 26px;
  letter-spacing: -0.4px; color: var(--blaek); }
.topbar .wordmark a { color: inherit; display: inline-flex; align-items: center; gap: 8px; }
.logo-maerke { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; }
.topbar .spacer { flex: 1; }

.rund-knap {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px;
  background: var(--kort); border: 1px solid var(--linje); color: var(--blaek);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0; position: relative;
}
.rund-knap:active { filter: brightness(0.97); }

.topbar .titel { flex: 1; min-width: 0; }
.topbar .titel h1 { font-size: 18px; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.topbar .titel .under { font-size: 12px; color: var(--muted); margin-top: -1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.admin-badge { flex-shrink: 0; background: var(--blaek); color: var(--papir);
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; border-radius: 999px;
  padding: 5px 11px; font-family: var(--font-b); }

/* ---------- bund-tab-bar ---------- */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 480px;
  background: rgba(255,254,250,0.96); border-top: 1px solid var(--linje);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  /* smallere sidepolstring end oprindeligt: baren rummer nu fem faner
     (Forside · Arkiv · Hitliste · Leg · Inviter) og skal kunne være på en
     lille iPhone uden at etiketterne brydes */
  padding: 12px 12px var(--bund); display: flex; justify-content: space-between; z-index: 40;
}
.tab { flex: 1; background: none; border: 0; cursor: pointer; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative;
  color: var(--muted); font-family: var(--font-b); }
.tab svg { width: 24px; height: 24px; display: block; }
.tab span { font-size: 11px; font-weight: 600; white-space: nowrap; }
.tab.aktiv { color: var(--accent); }
.tab.aktiv span { font-weight: 700; }

/* ---------- knapper / felter ---------- */

.knap {
  display: inline-block; font-family: var(--font-b); font-size: 15px; font-weight: 700;
  color: var(--papir); background: var(--accent); border: 1.5px solid var(--accent);
  border-radius: 16px; padding: 13px 20px; cursor: pointer; text-align: center;
  text-decoration: none; line-height: 1.2;
}
.knap:active { transform: scale(0.98); }
.knap.sekundaer { background: var(--kort); color: var(--blaek); border-color: var(--linje); }
.knap.moerk { background: var(--blaek); border-color: var(--blaek); color: var(--papir); }
.knap.fare { background: var(--negativ); border-color: var(--negativ); color: #fff; }
.knap:disabled { opacity: 0.5; cursor: default; }
.knap.lille { font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px; }
.knap.blok { display: block; width: 100%; }

.pill { display: inline-block; background: var(--accent); color: var(--papir);
  font-weight: 700; font-size: 13px; border-radius: 999px; padding: 9px 16px;
  border: 0; cursor: pointer; font-family: var(--font-b); }

input, select, textarea {
  font-family: var(--font-b); font-size: 15px; color: var(--blaek);
  background: var(--kort); border: 1px solid var(--linje); border-radius: 12px;
  padding: 12px 14px; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--svag); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(193,133,47,0.5); outline-offset: 1px; }
label { display: block; font-size: 12px; font-weight: 700; margin: 14px 0 6px; }
label .valgfri { font-weight: 500; color: var(--svag); }
select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--svag) 50%), linear-gradient(135deg, var(--svag) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.felt-hjaelp { font-size: 12px; color: var(--muted); margin-top: 6px; }

.kode-felt { position: relative; }
.kode-felt input { padding-right: 46px; }
.kode-oeje { position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 7px; border: 0; background: none;
  color: var(--svag); cursor: pointer; border-radius: 8px; }
.kode-oeje:hover { color: var(--blaek); }
.kode-oeje svg { width: 100%; height: 100%; display: block; }

/* ---------- beskeder ---------- */

.besked { padding: 12px 14px; margin: 10px 0; font-size: 14px; background: var(--kort);
  border: 1px solid var(--linje); border-left: 4px solid var(--svag); border-radius: 12px;
  line-height: 1.45; }
.besked b { font-weight: 700; }
.besked.fejl { border-left-color: var(--negativ); }
.besked.ok { border-left-color: var(--positiv); }
.besked.arbejder { border-left-color: var(--accent); animation: puls 1.6s ease-in-out infinite; }
@keyframes puls { 50% { opacity: 0.6; } }

/* ---------- eyebrows / sektioner ---------- */

.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); }
.eyebrow.accent { color: var(--accent); }
.eyebrow .taeller { display: inline-block; background: var(--accent); color: var(--papir);
  font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px;
  letter-spacing: 0; margin-left: 6px; vertical-align: middle; }

.sektion { margin-top: 22px; }
.sektion > .eyebrow { display: block; margin-bottom: 10px; }

.intro { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 4px 0 16px; }
.tom { text-align: center; color: var(--muted); padding: 22px 12px; font-size: 14px;
  background: var(--kort); border: 1px solid var(--linje); border-radius: 16px; }

/* ---------- forside: udfordrings-header ---------- */

.udf-eyebrow { color: var(--accent); display: block; margin-top: 22px; }
.udf-titel { font-size: 32px; font-weight: 800; letter-spacing: -0.5px; margin-top: -2px; line-height: 1.15; }
.progress { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.progress .bar { flex: 1; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.progress .fill { height: 6px; border-radius: 99px; background: var(--accent); }
.progress .taeltekst { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.udf-meta { font-size: 13px; color: var(--muted); margin-top: 10px; }
.udf-meta b { color: var(--blaek); font-weight: 700; }
.udf-meta a { font-weight: 600; }

/* chip-vælger (flere aktive udfordringer) */
.chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.chip { background: var(--kort); border: 1px solid var(--linje); color: var(--muted);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; text-decoration: none; }
.chip.aktiv { background: var(--blaek); color: var(--papir); border-color: var(--blaek); font-weight: 700; }

/* ---------- forside: felt-gitter ---------- */

.felter { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.felter.kompakt { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.felt { position: relative; display: block; border-radius: 18px; overflow: hidden;
  text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
a.felt:active { filter: brightness(0.97); }

.felt-nr { position: absolute; top: 10px; left: 10px; font-family: var(--font-h);
  font-weight: 700; font-size: 13px; width: 27px; height: 27px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,254,250,0.92); color: var(--blaek); }
.kompakt .felt-nr { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; top: 7px; left: 7px; }

/* hero: motivet du mangler - står nu ALENE over "Siden sidst" (Runde 5),
   ikke længere som gitter-felt. Frist-pill øverst til højre, nudge under titlen. */
.felt-hero { margin-top: 18px; border-radius: 20px; overflow: hidden; background: var(--kort);
  border: 2px solid var(--accent); box-shadow: var(--skygge-accent); }
.felt-hero img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.felt-hero .hero-nr { position: absolute; top: 12px; left: 12px; background: var(--blaek);
  color: var(--papir); font-family: var(--font-h); font-weight: 700; font-size: 14px;
  width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.felt-hero .hero-frist { position: absolute; top: 12px; right: 12px; display: inline-flex;
  align-items: center; gap: 6px; background: rgba(35,32,26,0.85); color: var(--papir);
  font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 6px 12px; }
.felt-hero .hero-bund { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px 14px; }
.felt-hero .hero-titel { font-size: 15.5px; font-weight: 700; }
.felt-hero .hero-status { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ajour-kort: kvittering når alle frigivne motiver er tegnet */
.ajour-kort { margin-top: 18px; background: var(--kort); border: 1.5px solid var(--accent);
  border-radius: 16px; padding: 14px 16px; font-size: 13.5px; font-weight: 700;
  color: var(--accent-moerk); }

/* udfyldte felter: foto fylder kortet */
.felt-fyldt { background: var(--kort); border: 1px solid var(--linje); }
.felt-fyldt img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.felt-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 9px;
  background: linear-gradient(transparent, rgba(20,17,12,0.62)); color: var(--kort);
  font-size: 12px; font-weight: 600; }
.kompakt .felt-overlay { display: none; }

/* kommende felter: stribet placeholder */
.felt-kommende { aspect-ratio: 1 / 1; border-radius: 18px; border: 1.5px dashed var(--dashed);
  background: repeating-linear-gradient(-45deg, var(--stribe1) 0 10px, var(--stribe2) 10px 20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 6px; }
.felt-kommende .k-nr { font-family: var(--font-h); font-weight: 700; font-size: 16px; color: var(--muted); }
.felt-kommende .k-tekst { font-size: 12px; font-weight: 600; color: var(--muted); }
.kompakt .felt-kommende .k-tekst { display: none; }

.taeller-visning { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 12px; text-align: center; }

/* dit næste motiv markeret i gitteret (heroen er samme motiv løftet ud) */
.felt-dintur { border: 2px solid var(--accent); }
.felt-dintur .felt-nr { background: var(--blaek); color: var(--papir); }
.felt-dintur .felt-overlay { font-weight: 700; }

/* ---------- Runde 5: levende udfordringsside ---------- */

/* tilbage til vælgeren - under den faste topbar */
.alle-udf { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: 13px; font-weight: 700; color: var(--accent-moerk); }

/* point-linje: stille kvittering med blyantspids-prik */
.point-linje { display: flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: 13px; color: var(--muted); }
.point-linje svg { color: var(--accent); flex-shrink: 0; }
.point-linje b { color: var(--blaek); font-weight: 700; }

/* global sejrsrække (forsiden) - variant A: "voksende flamme" til venstre i en fælles
   række med det smalle nyhedsfelt til højre (jf. sejrNyhedRaekke i app.js) */
.forside-raekke { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 2px; }
.forside-raekke.solo { justify-content: flex-end; }
.forside-raekke .nyhedsfelt { flex: 1; min-width: 0; width: auto; margin-top: 0; }
/* opmuntrings-slotten bor i rækken (egen linje på mobil; 8+12px gap ≈ de gamle 20px) */
.forside-raekke #opmuntringSlot { flex-basis: 100%; min-width: 0; }
.forside-raekke #opmuntringSlot:empty { display: none; }
.forside-raekke .opmuntring { margin: 8px 2px 2px; }
.sejr-slot { flex-shrink: 0; }

/* knap: hele flammen + teksten åbner sejr-overlayet (#sejrDialog) */
.forside-sejr { display: flex; align-items: center; gap: 9px; color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-b);
  text-align: left; }
.forside-sejr:active { transform: scale(0.97); }
.forside-sejr .sf-ild { font-size: 22px; line-height: 0; flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(193,133,47,0.32)); }
.forside-sejr .sf-ild svg { width: 1em; height: 1em; display: block; }
.forside-sejr.varm .sf-ild svg path { fill: var(--accent-blod); }
.forside-sejr .sf-tekst { display: flex; flex-direction: column; line-height: 1.05; }
.forside-sejr .sf-tekst b { font-family: var(--font-h); font-weight: 800; font-size: 19px;
  color: var(--accent-moerk); }
.forside-sejr .sf-tekst span { font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); }
.forside-sejr.start { color: var(--muted); }
.forside-sejr.start .sf-ild { filter: none; }
.forside-sejr.start .sf-tekst b { color: var(--muted); }

/* rækken er i fare (sidste chance i dag): flammen flakker uroligt, teksten maner til handling */
.forside-sejr.fare .sf-ild { animation: sejr-flak 1.6s ease-in-out infinite; }
.forside-sejr.fare .sf-tekst span { color: var(--negativ); font-weight: 700; }
@keyframes sejr-flak {
  0%, 100% { opacity: 1; transform: scale(1); }
  15% { opacity: 0.45; transform: scale(0.92) rotate(-3deg); }
  30% { opacity: 0.9; }
  45% { opacity: 0.55; transform: scale(0.95) rotate(2deg); }
  60% { opacity: 1; transform: scale(1.02); }
  80% { opacity: 0.7; }
}

/* ---------- fanfare: fuldskærms-fejring når dagens afgørende tegning er godkendt ---------- */
.fanfare { position: fixed; inset: 0; z-index: 230; display: flex;
  align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #FBF3E2 0%, var(--papir) 62%);
  padding: 24px; }
.fa-indhold { display: flex; flex-direction: column; align-items: center;
  text-align: center; max-width: 340px; }
.fa-ild { color: var(--accent); line-height: 0;
  filter: drop-shadow(0 0 22px rgba(193,133,47,0.45));
  animation: fa-ind 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    fa-glod 2.6s ease-in-out 0.9s infinite; }
.fa-ild svg { width: 110px; height: 110px; display: block; }
.fa-ild svg path { fill: var(--accent-blod); }
.fa-tal { font-family: var(--font-h); font-weight: 800; font-size: 46px;
  line-height: 1.05; margin-top: 14px; letter-spacing: -0.5px;
  animation: fa-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both; }
.fa-under { font-family: var(--font-h); font-weight: 800; font-size: 15px;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent-moerk);
  margin-top: 4px; animation: fa-pop 0.5s ease 0.5s both; }
.fa-tekst { font-size: 15.5px; color: var(--muted); line-height: 1.5;
  margin-top: 16px; animation: fa-pop 0.5s ease 0.65s both; }
.fa-knap { margin-top: 26px; padding: 15px 44px; font: 600 16px var(--font-b);
  color: #fff; background: var(--accent); border: none; border-radius: 14px;
  box-shadow: var(--skygge-cta); cursor: pointer;
  animation: fa-pop 0.5s ease 0.85s both; }
@keyframes fa-ind {
  0% { transform: scale(0.2); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes fa-glod {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 22px rgba(193,133,47,0.45)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 34px rgba(193,133,47,0.65)); }
}
@keyframes fa-pop {
  0% { transform: translateY(14px) scale(0.94); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* konfetti: små papirlapper i appens farver, daler med sving og rotation */
.fa-konfetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fa-bit { position: absolute; top: -14px; border-radius: 2px; animation: fa-fald linear both; }
.fa-bit.rund { border-radius: 50%; }
@keyframes fa-fald {
  0% { transform: translate3d(0, -3vh, 0) rotate(0deg); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate3d(var(--sving), 106vh, 0) rotate(var(--rot)); opacity: 0.7; }
}
/* uden animationer: alt står roligt, ingen konfetti - og fare-flammen dæmpes blot */
@media (prefers-reduced-motion: reduce) {
  .fa-ild, .fa-tal, .fa-under, .fa-tekst, .fa-knap { animation: none; }
  .fa-konfetti { display: none; }
  .forside-sejr.fare .sf-ild { animation: none; opacity: 0.6; }
}

/* ---------- Runde 7: fakta-tabel (7A) - som faneblad ---------- */
/* lukket: point-linje/Deltag til venstre, udfyldt Fakta-pille til højre */
.fakta-rk { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.fakta-rk:not(:has(> *:not([hidden]))) { margin-top: 0; }
.fakta-rk .point-linje { margin-top: 0; }
.fakta-rk .knap.deltag { font-size: 14px; font-weight: 700;
  padding: 11px 22px; border-radius: 999px; box-shadow: 0 6px 14px rgba(193,133,47,0.3); }
/* Fakta-pillen bliver selv til fanebladet - den flytter sig ALDRIG.
   Kun formen ændres (pille -> flad bund), og boksen glider op og møder den. */
.fakta-pille { margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff; border: 0; cursor: pointer;
  font-family: var(--font-b); font-weight: 800; font-size: 14px;
  padding: 10px 16px; border-radius: 999px; box-shadow: 0 5px 13px rgba(193,133,47,0.32);
  white-space: nowrap; flex-shrink: 0; }
.fakta-pille.aaben { border-radius: 14px 14px 0 0; box-shadow: none;
  position: relative; z-index: 2; }
.fakta-pille.aaben .fk-chev { transform: rotate(180deg); }
.fk-chev { width: 17px; height: 17px; flex-shrink: 0; transition: transform .15s; }
/* wrapper om fakta-boks + hero: usynlig på mobil (display:contents),
   bliver en række på store skærme (se "store skærme" nederst) */
.hero-rk { display: contents; }
/* udfoldet: boks med orange kant, trukket op så fanebladet sidder på dens topkant */
.fakta-boks { margin-top: -2px; background: var(--kort); border: 2px solid var(--accent);
  border-radius: 16px 0 16px 16px; padding: 6px 15px 8px; }
.fakta-boks[hidden] { display: none; }
/* overskrift inde i boksen: kun store skærme (på mobil hedder knappen "Fakta").
   Farvet bånd kant til kant - negative margener modsvarer boksens padding (10/18),
   radius 14 = boksens 16 minus 2px kant */
.fakta-titel { display: none; font-family: var(--font-h); font-weight: 800; font-size: 15.5px;
  color: var(--accent-moerk); background: var(--accent-blod);
  margin: -10px -18px 6px; padding: 10px 18px; border-radius: 14px 14px 0 0; }
.ft-raekke { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0;
  border-bottom: 1px solid var(--skille); }
.ft-raekke:last-child { border-bottom: 0; }
.ft-label { font-size: 12.5px; color: #5f5849; font-weight: 600; white-space: nowrap; }
.ft-vaerdi { font-size: 12.5px; font-weight: 700; text-align: right; }
.ft-vaerdi.positiv { color: var(--positiv); }
.ft-vaerdi.daempet { color: var(--muted); }

/* afsnit-overskrifter (19px) - evt. med tal i højre side */
.afsnit-titel { font-size: 19px; font-weight: 700; margin-top: 26px; }
.afsnit-hoved { display: flex; align-items: baseline; justify-content: space-between; margin-top: 26px; }
.afsnit-hoved h2 { font-size: 19px; font-weight: 700; }
.afsnit-hoved span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.afsnit-hoved + .felter { margin-top: 12px; }

/* Siden sidst: vandret polaroid-strimmel, nyeste først */
.ss-strip { display: flex; gap: 9px; margin-top: 12px; overflow-x: auto;
  scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 0 6px; }
.ss-strip::-webkit-scrollbar { display: none; }
.ss-kort { flex: 0 0 108px; min-width: 0; scroll-snap-align: start; background: var(--kort);
  border: 1px solid var(--linje); border-radius: 16px; padding: 6px 6px 9px;
  box-shadow: var(--skygge-kort); color: inherit; -webkit-tap-highlight-color: transparent; }
.ss-kort:nth-child(odd) { transform: rotate(-1deg); }
.ss-kort:nth-child(even) { transform: rotate(1.2deg); }
.ss-kort img { width: 100%; height: 106px; object-fit: cover; display: block; border-radius: 11px; }
.ss-blaendet { width: 100%; height: 106px; border-radius: 11px; color: var(--muted);
  background: repeating-linear-gradient(-45deg, var(--stribe1) 0 9px, var(--stribe2) 9px 18px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; text-align: center; padding: 0 6px; }
.ss-blaendet span { font-size: 10.5px; font-weight: 700; line-height: 1.3; }
.ss-navn { font-size: 12px; font-weight: 700; padding: 7px 4px 0; color: var(--blaek);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-meta { font-size: 11px; color: var(--muted); padding: 0 4px; margin-top: 1px; }

/* Ugens puls: én linje, kun antal */
.puls-linje { display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 13px; color: var(--muted); }
.puls-linje svg { color: var(--accent); flex-shrink: 0; }

/* push-kort: klokke + "Slå til"; diskret linje når beskeder er slået til */
.push-kort { margin-top: 22px; background: var(--kort); border: 1px solid var(--linje);
  border-radius: 16px; padding: 13px 14px; display: flex; align-items: center; gap: 12px; }
.push-kort .p-ikon { width: 36px; height: 36px; border-radius: 999px; background: var(--accent-blod);
  color: var(--accent-moerk); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.push-kort .p-krop { flex: 1; min-width: 0; }
.push-kort .p-titel { font-weight: 700; font-size: 13.5px; }
.push-kort .p-under { font-size: 12px; color: var(--muted); margin-top: 1px; }
.push-kort .p-knap { background: var(--blaek); color: var(--papir); border: 0; cursor: pointer;
  font-family: var(--font-b); font-weight: 700; font-size: 12.5px; border-radius: 999px;
  padding: 9px 15px; white-space: nowrap; }
.push-status { font-size: 12.5px; color: var(--muted); margin-top: 14px; }

/* intro som stille afslutning på udfordringssiden */
.intro.slut { text-align: center; font-size: 13px; margin: 22px 0 0; padding: 0 10px; }

/* 5A-vælgeren: personlig statuslinje + "Din tur"-badge på kortene */
.arkiv-kort { position: relative; }
.arkiv-kort.dintur { margin-top: 6px; }
.dintur-badge { position: absolute; top: -8px; left: -7px; background: var(--accent);
  color: var(--kort); font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
  border-radius: 999px; padding: 4px 11px; }
.v-status { display: flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size: 12.5px; font-weight: 700; min-width: 0; }
.v-status span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-status svg { flex-shrink: 0; }
.v-status.accent { color: var(--accent-moerk); font-size: 12px; }
.v-status.positiv { color: var(--positiv); }
.v-status.svag { color: var(--svag); font-weight: 600; }

/* ---------- reference-detalje ---------- */

.ref-motiv { border-radius: 22px; overflow: hidden; position: relative; border: 1px solid var(--linje); background: var(--kort); }
/* 1:1-ramme (besluttet 12/7 2026): billedet beskæres til kvadratet - ingen
   bjælker. Fremviseren viser fortsat billedet i fuldt format. */
.ref-motiv img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.ref-motiv .motiv-pill { position: absolute; top: 14px; left: 14px; background: rgba(35,32,26,0.85);
  color: var(--papir); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; border-radius: 999px; padding: 6px 12px; }
.ref-note { font-size: 13px; color: var(--muted); margin-top: 12px; line-height: 1.5; }

.ref-tegninger-hoved { display: flex; align-items: baseline; justify-content: space-between; margin-top: 22px; }
.ref-tegninger-hoved h3 { font-size: 19px; font-weight: 700; }
.ref-tegninger-hoved .antal { font-size: 12.5px; font-weight: 600; color: var(--muted); }

.polaroid-strip { position: relative; }
.polaroids { display: flex; gap: 16px; margin-top: 12px; overflow-x: auto;
  padding: 4px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
.polaroids::-webkit-scrollbar { display: none; }
.polaroid { flex: 0 0 45%; min-width: 0; scroll-snap-align: start; background: var(--kort);
  border: 1px solid var(--linje); border-radius: 16px;
  padding: 8px 8px 10px; box-shadow: var(--skygge-kort); position: relative; }
.p-pil { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--linje); background: var(--kort); color: var(--blaek);
  font-family: var(--font-b); font-size: 19px; line-height: 1; display: grid; place-items: center;
  cursor: pointer; box-shadow: var(--skygge-kort); opacity: 0.88; z-index: 2; padding: 0 0 2px; }
.p-pil.venstre { left: -6px; }
.p-pil.hoejre { right: -6px; }

/* fælles billedfremviser: motiver (med sort/hvid, gem, print) og tegninger.
   Egen knibe-zoom/panorering - global pinch-zoom er slået fra i viewporten.
   minmax(0,1fr) + min-height:0 sikrer at billedet aldrig beskæres (iPad). */
.ref-motiv img[data-motiv] { cursor: zoom-in; }
img[data-stor] { cursor: zoom-in; }
.fremviser { position: fixed; inset: 0; z-index: 210; background: rgba(35,32,26,0.92);
  display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.fv-flade { min-height: 0; position: relative; display: grid; place-items: center;
  grid-template: 100% / 100%; overflow: hidden; padding: 14px; touch-action: none; }
.fv-flade img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px;
  background: var(--kort); box-shadow: 0 18px 60px rgba(0,0,0,0.45); touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.fv-knapper { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;
  padding: 14px 16px var(--bund); }
.fv-knapper button { font-family: var(--font-b); font-weight: 700; font-size: 14px;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linje);
  background: var(--kort); color: var(--blaek); cursor: pointer; }
.fv-knapper #fvSh.aktiv, .fv-knapper #fvVaagen.aktiv { background: var(--blaek);
  color: var(--papir); border-color: var(--blaek); }
.fv-vaagen-info { flex-basis: 100%; text-align: center; font-family: var(--font-b);
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.75); }
.fv-flade .fv-ref { position: absolute; top: calc(10px + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%); width: 92px; height: 92px;
  object-fit: cover; border-radius: 10px; border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 2px 10px rgba(0,0,0,0.4); pointer-events: none; }
.fv-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: rgba(35,32,26,0.78); color: #fff; font-family: var(--font-b);
  font-size: 13.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px;
  pointer-events: none; white-space: nowrap; transition: opacity 0.7s; }
.fv-hint.vaek { opacity: 0; }

@media print {
  body.fv-aaben > :not(.fremviser) { display: none !important; }
  body.fv-aaben .fremviser { position: static; background: none; display: block; }
  body.fv-aaben .fv-knapper, body.fv-aaben .fv-hint { display: none; }
  body.fv-aaben .fv-flade { overflow: visible; padding: 0; }
  body.fv-aaben .fv-flade img { max-width: 100%; max-height: none; border-radius: 0;
    box-shadow: none; transform: none !important; }
}
.polaroid:nth-child(odd) { transform: rotate(-1.2deg); }
.polaroid:nth-child(even) { transform: rotate(1.4deg); }
.polaroid img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; display: block; border-radius: 10px; }
.polaroid .p-bund { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 4px 0; }
.polaroid .p-navn { font-size: 12.5px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.polaroid .p-status { font-size: 11px; font-weight: 700; color: var(--accent-moerk); white-space: nowrap; }
.polaroid .p-status.afvist { color: var(--negativ); }
.polaroid .like-knap { display: inline-flex; align-items: center; gap: 3px; background: none;
  border: 0; padding: 0 2px; font-size: 17px; line-height: 1; cursor: pointer; color: var(--svag); }
.polaroid .like-knap.liket { color: var(--negativ); }
.polaroid .like-knap[disabled] { cursor: default; opacity: .55; }
.polaroid .like-antal { font-size: 11.5px; font-weight: 700; color: var(--muted); }

/* fast aflever-CTA i bunden af reference-skærmen */
.aflever-fast { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 480px;
  padding: 14px 20px var(--bund); background: linear-gradient(transparent, var(--papir) 26%); z-index: 30; }
.aflever-fast .cta { background: var(--accent); color: var(--papir); border: 0; width: 100%;
  border-radius: 18px; padding: 17px; text-align: center; font-weight: 700; font-size: 16.5px;
  box-shadow: var(--skygge-cta); cursor: pointer; font-family: var(--font-b); }
.aflever-fast .cta.kvittering { background: var(--kort); color: var(--accent-moerk);
  border: 1.5px solid var(--accent); box-shadow: none; }
.aflever-fast .cta-hjaelp { text-align: center; font-size: 12px; color: var(--muted); margin-top: 9px; }
.aflever-preview { margin-top: 12px; }
.aflever-preview img { max-width: 100%; max-height: 44vh; border: 1px solid var(--linje); border-radius: 14px; display: block; }

/* ---------- arkiv ---------- */

.arkiv-kort { display: flex; gap: 14px; align-items: center; background: var(--kort);
  border: 1px solid var(--linje); border-radius: 20px; padding: 12px; text-decoration: none; color: inherit; }
.arkiv-kort:active { filter: brightness(0.97); }
.arkiv-kort.aktiv { border: 2px solid var(--accent); box-shadow: var(--skygge-accent); }
.arkiv-kort img { width: 74px; height: 74px; object-fit: cover; border-radius: 14px; flex-shrink: 0; }
.arkiv-kort .thumb-tom { width: 74px; height: 74px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-h);
  font-weight: 700; font-size: 17px; color: var(--muted);
  background: repeating-linear-gradient(-45deg, var(--stribe1) 0 10px, var(--stribe2) 10px 20px); }
.arkiv-kort .a-krop { flex: 1; min-width: 0; }
.arkiv-kort h3 { font-family: var(--font-h); font-weight: 700; font-size: 16.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arkiv-kort .a-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arkiv-kort .chevron { color: var(--dashed); font-size: 20px; flex-shrink: 0; }
.arkiv-kort.kommer { border-style: dashed; border-color: var(--dashed); background: transparent; }
.arkiv-kort.kommer h3 { color: var(--muted); font-size: 15px; }
.arkiv-kort.kommer .a-meta { color: var(--svag); }

.arkiv-afsluttet { display: flex; flex-direction: column; gap: 12px; }
.arkiv-afsluttet .arkiv-kort { border-radius: 18px; padding: 11px 12px; gap: 13px; }
.arkiv-afsluttet .arkiv-kort img { width: 60px; height: 60px; border-radius: 12px; }
.arkiv-afsluttet h3 { font-family: var(--font-b); font-weight: 700; font-size: 14.5px; }

.arkiv-liste { display: flex; flex-direction: column; gap: 10px; }

/* ---------- hitliste ---------- */

.hit-eyebrow { margin-bottom: 24px; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
.podium .plads { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; max-width: 108px; }
.podium .avatar { border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-h); font-weight: 700; }
.podium .navn { font-size: 13px; font-weight: 700; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.podium .soejle { width: 100%; border-radius: 14px 14px 0 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.podium .soejle .score { font-family: var(--font-h); font-weight: 800; }
.podium .soejle .rang { font-size: 11px; font-weight: 600; }

.podium .p1 .avatar { width: 72px; height: 72px; background: var(--accent-blod);
  border: 2.5px solid var(--accent); color: var(--accent-moerk); font-size: 23px; font-weight: 800; }
.podium .p1 .navn { font-size: 14px; font-weight: 800; }
.podium .p1 .soejle { height: 104px; background: var(--accent); color: var(--papir); box-shadow: var(--skygge-accent); }
.podium .p1 .soejle .score { font-size: 26px; }
.podium .p1 .soejle .rang { opacity: 0.85; font-weight: 700; }

.podium .p2 .avatar, .podium .p3 .avatar { width: 58px; height: 58px; background: var(--track); font-size: 18px; }
.podium .p2 .soejle, .podium .p3 .soejle { background: var(--kort); border: 1px solid var(--linje); }
.podium .p2 .soejle { height: 74px; }
.podium .p3 .soejle { height: 56px; }
.podium .p2 .soejle .score, .podium .p3 .soejle .score { font-size: 20px; }
.podium .p2 .soejle .rang, .podium .p3 .soejle .rang { color: var(--muted); }

.hit-liste { border-top: 1px solid var(--linje); margin-top: 0; display: flex; flex-direction: column; }
.hit-raekke { display: flex; align-items: center; gap: 13px; padding: 14px 6px; border-bottom: 1px solid var(--skille); }
.hit-raekke:last-child { border-bottom: 0; }
.hit-raekke .r-plads { font-family: var(--font-h); font-weight: 700; font-size: 14px; color: var(--muted);
  width: 20px; flex-shrink: 0; }
.hit-raekke .avatar { width: 38px; height: 38px; border-radius: 999px; background: var(--track);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.hit-raekke .r-navn { flex: 1; font-weight: 700; font-size: 14.5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-raekke .r-note { font-size: 12px; font-weight: 700; white-space: nowrap; }
.hit-raekke .r-note.op { color: var(--positiv); }
.hit-raekke .r-note.ned { color: var(--negativ); }
.hit-raekke .r-note.streak { color: var(--accent-moerk); }
.hit-raekke .r-score { font-family: var(--font-h); font-weight: 800; font-size: 16px;
  width: 44px; text-align: right; flex-shrink: 0; }
.hit-raekke.dig { background: var(--accent-blod); border-radius: 14px; margin: 0 -8px; padding: 14px; border-bottom: 0; }
/* podium og rækker er links til profilsiden - skal ligne sig selv */
a.hit-raekke, .podium a.plads { color: inherit; text-decoration: none; }

/* ---------- profilside ---------- */

.profil-hoved { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.profil-hoved .avatar { width: 56px; height: 56px; border-radius: 999px; background: var(--track);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; }
.profil-hoved .pf-navn { font-family: var(--font-h); font-weight: 800; font-size: 20px; }
.profil-hoved .pf-antal { font-size: 13px; color: var(--muted); margin-top: 2px; }
.profil-udf { display: block; margin-top: 24px; }
/* skjult tegning: skraveret pladsholder i samme format som polaroid-billedet */
.polaroid .p-skjult { aspect-ratio: 4 / 4.4; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 12.5px; font-weight: 700; color: var(--muted);
  background: repeating-linear-gradient(45deg, var(--track) 0 9px, transparent 9px 18px); }
.polaroid.skjult .p-navn { color: var(--muted); }
/* navnet på et polaroid-kort er et link til profilsiden - uden link-look */
.polaroid .p-navn a { color: inherit; text-decoration: none; }

/* ---------- login ---------- */

.login { min-height: calc(var(--app-height) - 40px); display: flex; flex-direction: column;
  justify-content: center; padding: 24px 12px; max-width: 380px; margin: 0 auto; }
.login-vifte { display: flex; justify-content: center; margin-bottom: 34px; }
.login-vifte img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px;
  border: 4px solid var(--kort); box-shadow: 0 6px 16px rgba(35,32,26,0.18); display: block; }
.login-vifte img:nth-child(1) { transform: rotate(-7deg); }
.login-vifte img:nth-child(2) { transform: rotate(2deg) translateY(-8px); margin: 0 -6px; z-index: 1; position: relative; }
.login-vifte img:nth-child(3) { transform: rotate(8deg); }
.login-hoved { text-align: center; }
.login-hoved .wordmark { font-family: var(--font-h); font-weight: 800; font-size: 34px; letter-spacing: -0.5px;
  display: flex; justify-content: center; align-items: center; gap: 10px; }
.login-hoved .logo-maerke { width: 28px; height: 28px; border-radius: 7px; }
.login-hoved .under { font-size: 14px; color: var(--muted); margin-top: 6px; }
.login .faner { justify-content: center; }
.login form { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.login form label { margin: 6px 0 0; }
.login .foot { text-align: center; font-size: 12px; color: var(--svag); margin-top: 28px; }
.login .glemt { text-align: center; font-size: 13.5px; font-weight: 600; color: var(--accent-moerk); margin-top: 18px; }
.login .glemt-knap { background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline; }

/* ---------- login/generelle faneblade ---------- */

.faner { display: flex; gap: 18px; border-bottom: 1px solid var(--linje); margin: 6px 0 4px; }
.fane { background: none; border: 0; cursor: pointer; font-family: var(--font-b);
  font-size: 15px; font-weight: 700; color: var(--muted); padding: 8px 0 10px;
  margin-bottom: -1px; border-bottom: 3px solid transparent; }
.fane.aktivfane { color: var(--blaek); border-bottom-color: var(--accent); }

/* ---------- menu bottom sheet ---------- */

#menuDialog { position: fixed; inset: auto 0 0 0; top: auto; margin: 0 auto; width: 100%;
  max-width: 480px; max-height: 88vh; border: 0; border-radius: 28px 28px 0 0;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); background: var(--kort);
  color: var(--blaek); box-shadow: var(--skygge-sheet); }
#menuDialog::backdrop { background: rgba(35,32,26,0.35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
#menuDialog h2 { display: none; }
.sheet-handle { width: 40px; height: 5px; border-radius: 99px; background: var(--linje); margin: 4px auto 16px; }
.sheet-profil { display: flex; align-items: center; gap: 13px; padding: 6px 4px 16px; border-bottom: 1px solid var(--skille); }
a.sheet-profil { text-decoration: none; color: inherit; }
.sheet-profil .avatar { width: 48px; height: 48px; border-radius: 999px; background: var(--accent-blod);
  border: 2px solid var(--accent); color: var(--accent-moerk); display: flex; align-items: center;
  justify-content: center; font-family: var(--font-h); font-weight: 800; font-size: 18px; flex-shrink: 0; }
.sheet-profil .p-krop { flex: 1; min-width: 0; }
.sheet-profil .p-navn { font-weight: 800; font-size: 16px; }
.sheet-profil .p-under { font-size: 12.5px; color: var(--muted); }
.menu-liste { display: flex; flex-direction: column; }
.menu-liste a, .menu-liste button { display: flex; align-items: center; gap: 14px; padding: 16px 4px;
  border-bottom: 1px solid var(--skille); font-size: 15px; font-weight: 700; color: var(--blaek);
  text-decoration: none; background: none; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; cursor: pointer; font-family: var(--font-b); text-align: left; }
.menu-liste a:last-child, .menu-liste button:last-child { border-bottom: 0; }
.menu-liste .m-ikon { width: 22px; display: flex; justify-content: center; flex-shrink: 0; color: var(--blaek); }
.menu-liste .m-label { flex: 1; }
.menu-liste .m-chevron { color: var(--dashed); font-size: 18px; }
.menu-liste .m-badge { background: var(--accent); color: var(--papir); font-size: 11px;
  font-weight: 800; border-radius: 999px; padding: 3px 9px; }
.menu-liste .logud { color: var(--negativ); }
.menu-liste .logud .m-ikon { color: var(--negativ); }
.menu-ver { text-align: center; font-size: 11.5px; color: var(--svag); padding-top: 14px; }

/* ---------- dialoger (changelog / install) ---------- */

dialog { border: 1px solid var(--linje); border-radius: 22px; padding: 22px 24px; max-width: 440px;
  width: calc(100% - 2rem); box-shadow: 0 20px 60px rgba(35,32,26,0.2);
  background: var(--kort); color: var(--blaek); }
dialog::backdrop { background: rgba(35,32,26,0.4); }
dialog h2 { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
dialog .entry { margin-bottom: 14px; }
dialog .entry b { font-size: 14px; }
dialog .entry .date { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 6px; }
dialog ul { margin: 6px 0 0 18px; }
dialog li { color: #4c4a44; font-size: 14px; line-height: 1.5; }
dialog .close { margin-top: 14px; }
/* Tydelig luk i toppen af dialoger (✕ i hjørnet) + rullbar changelog-liste,
   så bund-knappen aldrig skubbes under folden */
.dlg-luk { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--linje); background: var(--kort);
  color: var(--blaek); font-size: 15px; line-height: 1; cursor: pointer; }
#changelogBody { max-height: 55vh; overflow-y: auto; }
#changelogBody .knap { margin: 4px 0 8px; }
.ig-note { color: #4c4a44; font-size: 14px; margin-bottom: 10px; line-height: 1.5; }
#igSteps { margin: 8px 0 0 18px; line-height: 1.6; font-size: 14px; color: #4c4a44; }

/* ---------- nyhedsfelt (Runde 6, 6A) ---------- */

.nyhedsfelt { display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 16px;
  position: relative;
  background: var(--kort); border: 1px solid var(--linje); border-radius: 16px;
  padding: 13px 14px; box-shadow: 0 4px 12px rgba(35,32,26,0.06); cursor: pointer;
  font-family: var(--font-b); text-align: left; color: var(--blaek); }
.nyt-badge { background: var(--accent); color: var(--kort); font-size: 11px; font-weight: 800;
  letter-spacing: 0.5px; border-radius: 999px; padding: 4px 11px; flex-shrink: 0;
  animation: nyt-puls 3s ease-in-out infinite; }
/* i selve feltet er badgen en lille fyldt cirkel inde i boksen, lodret
   centreret til højre - overskriften får hele bredden. Ulæst: på hvert
   hjerteslag vokser den op og UD af boksen, mod øverste højre hjørne, til den
   fulde NYT-pille med tekst - forskudt ud over kanten som "Din tur"-badgen
   (.dintur-badge) i udfordringerne - og falder tilbage til prikken.
   Læst: prikken bliver stående, stille.
   (Gælder ikke overlayets .nyhed-hoved, hvor NYT-pillen står i flowet.) */
.nyhedsfelt .nyt-badge { position: absolute; top: calc(50% - 6.5px); right: 12px;
  z-index: 2; display: flex; align-items: center; justify-content: center;
  overflow: hidden; white-space: nowrap; width: 13px; height: 13px; padding: 0;
  font-size: 0; color: #fff; }
/* læst: prikken bliver stående, men slår ikke (animation slukkes af .stille).
   Kommer der en ny nyhed, er den ulæst (læst-mærket er pr. nyheds-id) og
   pulsen starter af sig selv igen. */
/* overskriften stopper før prikken i stedet for at løbe ind under den */
.nyhedsfelt .ny-overskrift { margin-right: 14px; }
/* brødtekst-linjen findes kun på store skærme (se "store skærme" nederst) */
.nyhedsfelt .ny-tekst { display: none; }
.nyt-badge.stille { animation: none; }
.nyhedsfelt .ny-overskrift { flex: 1; min-width: 0; font-weight: 700; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ulæst nyhed: cirklen slår som et hjerte - to slag, så ro resten af de 3
   sekunder. På hvert slag vandrer den fra sin plads inde i boksen op mod
   øverste højre hjørne og vokser til den fulde NYT-pille, hængende ud over
   kanten - og falder tilbage. Teksten vokser frem med font-size;
   overflow:hidden klipper den pænt undervejs. */
@keyframes nyt-puls {
  0%, 30%, 100% { top: calc(50% - 6.5px); right: 12px; width: 13px; height: 13px; font-size: 0; }
  8% { top: -8px; right: -7px; width: 52px; height: 26px; font-size: 13px; }
  15% { top: calc(50% - 6.5px); right: 12px; width: 13px; height: 13px; font-size: 0; }
  22% { top: -8px; right: -7px; width: 60px; height: 30px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .nyt-badge { animation: none; } }

/* "Læs mere"-overlayet: bottom sheet i samme stil som menuen */
#nyhedDialog { position: fixed; inset: auto 0 0 0; top: auto; margin: 0 auto; width: 100%;
  max-width: 480px; max-height: 88vh; overflow-y: auto; border: 0; border-radius: 28px 28px 0 0;
  padding: 10px 22px calc(30px + env(safe-area-inset-bottom)); background: var(--kort);
  color: var(--blaek); box-shadow: var(--skygge-sheet); }
#nyhedDialog::backdrop { background: rgba(35,32,26,0.35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.nyhed-hoved { display: flex; align-items: center; gap: 9px; }
.nyhed-dato { font-size: 12px; color: var(--muted); font-weight: 600; }
#nyhedDialog h2 { font-family: var(--font-h); font-size: 21px; font-weight: 800; line-height: 1.25; margin: 12px 0 0; }
.nyhed-tekst { font-size: 14px; line-height: 1.65; color: #4a443a; margin-top: 12px; }
.nyhed-skjul { display: block; width: 100%; margin-top: 12px; padding: 8px; background: none;
  border: 0; cursor: pointer; font-family: var(--font-b); font-size: 13px; font-weight: 700;
  color: var(--muted); text-align: center; }

/* ---------- sejr-overlay: bottom sheet i samme stil som nyheden ---------- */
#sejrDialog { position: fixed; inset: auto 0 0 0; top: auto; margin: 0 auto; width: 100%;
  max-width: 480px; max-height: 88vh; overflow-y: auto; border: 0; border-radius: 28px 28px 0 0;
  padding: 10px 22px calc(26px + env(safe-area-inset-bottom)); background: var(--kort);
  color: var(--blaek); box-shadow: var(--skygge-sheet); }
#sejrDialog::backdrop { background: rgba(35,32,26,0.35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

.so-hoved { display: flex; align-items: center; gap: 11px; padding: 6px 0 2px; }
.so-hoved .sf-ild { color: var(--accent); line-height: 0; flex-shrink: 0; }
.so-hoved .sf-ild svg { width: 1em; height: 1em; display: block; }
.so-hoved.varm .sf-ild svg path { fill: var(--accent-blod); }
.so-hoved .sf-tekst { display: flex; flex-direction: column; line-height: 1.05; }
.so-hoved .sf-tekst b { font-family: var(--font-h); font-weight: 800; font-size: 24px;
  color: var(--accent); }
.so-hoved .sf-tekst span { font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-top: 3px; }
.so-hoved.start .sf-ild, .so-hoved.start .sf-tekst b { color: var(--muted); }

/* 14-dages punktrække: fyldt prik = tegnet den dag, ring = i dag */
.so-punkter { display: flex; justify-content: space-between; gap: 3px; margin: 20px 0 6px; }
.so-dag { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.so-prik { width: 15px; height: 15px; border-radius: 999px; background: var(--track);
  box-shadow: inset 0 0 0 1px rgba(35,32,26,0.04); }
.so-dag.tegnet .so-prik { background: var(--accent); box-shadow: none; }
.so-dag.idag .so-prik { box-shadow: 0 0 0 2px var(--kort), 0 0 0 3.5px var(--accent); }
.so-dag.idag:not(.tegnet) .so-prik { background: var(--accent-blod); }
.so-uge { font-size: 9.5px; font-weight: 700; color: var(--svag); text-transform: uppercase; }
.so-dag.tegnet .so-uge { color: var(--muted); }
.so-dag.idag .so-uge { color: var(--accent-moerk); }
.so-punkter-note { font-size: 11px; color: var(--svag); text-align: center;
  letter-spacing: 0.5px; margin-bottom: 18px; }

.so-tekst { font-size: 14px; line-height: 1.65; color: #4a443a; margin-top: 12px; }
.so-tekst.blod { color: var(--accent-moerk); }

/* det praktiske råd - det eneste man ikke selv regner ud, så det får sin egen flade */
.so-tip { background: var(--accent-blod); border-radius: 14px; padding: 13px 15px; margin-top: 16px; }
.so-tip h3 { font-family: var(--font-h); font-weight: 800; font-size: 14.5px;
  color: var(--accent-moerk); margin-bottom: 5px; }
.so-tip p { font-size: 13.5px; line-height: 1.6; color: #5c4a2c; }

.so-historik { display: flex; gap: 10px; margin-top: 20px; }
.so-kort { flex: 1; background: var(--stribe1); border-radius: 14px; padding: 12px 14px; }
.so-kort .so-k-tal { font-family: var(--font-h); font-weight: 800; font-size: 19px;
  color: var(--blaek); line-height: 1.2; }
.so-kort .so-k-navn { font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.7px; margin-top: 3px; }

/* nyheder øverst i "Hvad er nyt"-dialogen */
.log-nyheder { border-bottom: 1px solid var(--skille); margin-bottom: 14px; }
.log-nyheder p { font-size: 14px; color: #4c4a44; line-height: 1.5; margin: 4px 0 14px; }

/* admin: nyheds-rækker er knapper (redigér i dialog) */
button.adm-raekke { width: 100%; cursor: pointer; font-family: var(--font-b); font-size: inherit; }

/* ---------- installér-banner ---------- */

.install-banner { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 45; width: min(92vw, 420px); }
.ib-card { display: flex; align-items: center; gap: 10px; background: var(--kort);
  border: 1px solid var(--linje); border-radius: 16px; box-shadow: 0 8px 30px rgba(35,32,26,0.15);
  padding: 12px 14px; }
.ib-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ib-text b { font-size: 14px; font-weight: 700; }
.ib-text span { font-size: 12px; color: var(--muted); }
.ib-dismiss { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px;
  text-decoration: underline; padding: 4px; }
/* Opdateringslaget (#37): "ny version klar"-striben druknede forneden - nu et
   centreret lag (musikquiz-mønstret). z-index 60: over faner og bannere, men
   under fremviser/aflever-overlay, så det aldrig dækker igangværende arbejde. */
.opdater-lag { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(35,32,26,0.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.opdater-lag[hidden] { display: none; }
.ol-kort { width: 100%; max-width: 300px; text-align: center; background: var(--kort);
  border: 1px solid var(--linje); border-radius: 18px; padding: 26px 20px 18px;
  box-shadow: 0 18px 44px rgba(35,32,26,0.35); }
.ol-piktogram { width: 84px; height: 84px; margin: 0 auto 12px; display: block; }
.ol-kort h2 { font-size: 20px; margin: 0 0 8px; }
.ol-kort p { font-size: 13.5px; color: var(--muted); line-height: 1.45; margin: 0 0 18px; }
.ol-kort .knap.blok { margin-bottom: 6px; }
.ol-senere { display: block; width: 100%; padding: 10px; background: none; border: 0;
  color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer;
  font-family: var(--font-b); }

/* Spilsiden: banner og opdateringslag væk (klassen sættes i js/app.js).
   display:none frem for hidden, for de kan være vist FØR man gik ind i legen. */
body.i-legen .install-banner, body.i-legen .opdater-lag { display: none; }

/* Kaldenavn: admin ser "Navn · vises som "Alias"" i medlemsliste/Håndtér */
.alias-mark { color: var(--muted); font-weight: 500; font-size: 0.85em; }

/* ---------- webview-udbrud (Messenger/Facebooks indbyggede browser) ---------- */

.webview-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(35,32,26,0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.webview-overlay[hidden] { display: none; } /* display:flex overtrumfer ellers hidden */
.wo-card { background: var(--kort); border: 1px solid var(--linje); border-radius: 22px;
  padding: 26px 24px; max-width: 420px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px rgba(35,32,26,0.25); }
.wo-card h2 { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.wo-card p { font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
.wo-card .knap { display: block; width: 100%; }
.wo-alt { font-size: 13px; color: var(--muted); }
.wo-alt b { white-space: nowrap; }
.wo-continue { background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 13px; text-decoration: underline; margin-top: 12px; padding: 4px; }

/* ---------- diverse ---------- */

.tilbage { display: inline-block; font-size: 13px; font-weight: 600; color: var(--muted);
  text-decoration: none; margin-bottom: 12px; }
.tilbage::before { content: '← '; }

.ver { display: none; }

.spinner { text-align: center; padding: 60px 20px; color: var(--muted); font-size: 13px; font-weight: 600; }

/* Henter-animationen: blyanten tegner en bølget streg, hvisker ud og starter
   forfra (~2,6 s pr. gennemløb - teksten skifter pr. gennemløb, styret i JS).
   Markup i app.js spinner() og som boot-spinner i index.html. */
.spinner .ha { display: block; margin: 0 auto 2px; overflow: visible; }
.ha-linje { stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: haTegn 2.6s ease-in-out infinite; }
@keyframes haTegn {
  0%   { stroke-dashoffset: 100; opacity: 1; }
  68%  { stroke-dashoffset: 0;   opacity: 1; }
  80%  { stroke-dashoffset: 0;   opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.ha-blyant { animation: haFlyt 2.6s ease-in-out infinite; }
@keyframes haFlyt {
  0%    { transform: translate(16px, 50px); opacity: 1; }
  8.5%  { transform: translate(30px, 46px); }
  17%   { transform: translate(44px, 50px); }
  25.5% { transform: translate(58px, 46px); }
  34%   { transform: translate(72px, 50px); }
  42.5% { transform: translate(86px, 46px); }
  51%   { transform: translate(100px, 50px); }
  59.5% { transform: translate(114px, 46px); }
  68%   { transform: translate(128px, 50px); opacity: 1; }
  80%   { transform: translate(128px, 50px); opacity: 1; }
  92%, 99.9% { transform: translate(128px, 50px); opacity: 0; }
  100%  { transform: translate(16px, 50px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ha-linje, .ha-blyant { animation: none; }
  .ha-linje { stroke-dashoffset: 0; }
}

.knapper-linje { display: flex; gap: 10px; flex-direction: column; margin-top: 4px; }
.slet-link { text-align: center; font-size: 13px; font-weight: 700; color: var(--negativ);
  padding: 6px; cursor: pointer; }

/* ---------- admin ---------- */

.adm-raekke { display: flex; align-items: center; gap: 12px; background: var(--kort);
  border: 1px solid var(--linje); border-radius: 16px; padding: 12px 14px; text-decoration: none; color: inherit; }
.adm-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.adm-avatar { width: 38px; height: 38px; border-radius: 999px; background: var(--track);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.adm-raekke .a-krop { flex: 1; min-width: 0; }
.adm-raekke .a-navn { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-raekke .a-under { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-raekke .chevron { color: var(--dashed); font-size: 18px; flex-shrink: 0; }
.adm-afvis { font-size: 12.5px; font-weight: 700; color: var(--negativ); background: none;
  border: 0; cursor: pointer; flex-shrink: 0; font-family: var(--font-b); }

.status-pill { font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 4px 10px; flex-shrink: 0; }
.status-pill.aktiv { background: var(--accent-blod); color: var(--accent-moerk); }
.status-pill.kladde { background: var(--track); color: var(--muted); }
.status-pill.afsluttet { background: var(--track); color: var(--muted); }

.dashed-knap { border: 1.5px dashed var(--dashed); border-radius: 16px; padding: 13px; text-align: center;
  font-weight: 700; font-size: 13.5px; color: var(--accent-moerk); background: none; width: 100%;
  cursor: pointer; font-family: var(--font-b); display: block; }

.adm-kort { background: var(--kort); border: 1px solid var(--linje); border-radius: 18px;
  padding: 6px 14px 16px; margin-top: 10px; }
.adm-kort label:first-child { margin-top: 10px; }

.adm-ref { background: var(--kort); border: 1px solid var(--linje); border-radius: 14px; overflow: hidden; }
.adm-ref summary { display: flex; align-items: center; gap: 11px; padding: 9px 12px; cursor: pointer; list-style: none; }
.adm-ref summary::-webkit-details-marker { display: none; }
.adm-ref summary img, .adm-ref summary .ref-tom { width: 42px; height: 42px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.adm-ref summary .ref-tom { background: repeating-linear-gradient(-45deg, var(--stribe1) 0 8px, var(--stribe2) 8px 16px); border: 1px dashed var(--dashed); }
.adm-ref .r-krop { flex: 1; min-width: 0; }
.adm-ref .r-titel { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-ref .r-status { font-size: 11.5px; margin-top: 1px; }
.adm-ref .r-status.aaben { color: var(--accent); font-weight: 700; }
.adm-ref .r-status.laast, .adm-ref .r-status.afsluttet { color: var(--muted); }
.adm-ref .r-chevron { color: var(--dashed); font-size: 18px; }
.adm-ref .r-detalje { padding: 0 12px 12px; border-top: 1px solid var(--skille); }

.vis-alle { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--accent-moerk);
  padding: 6px; cursor: pointer; background: none; border: 0; width: 100%; font-family: var(--font-b); }

.adm-soeg { display: flex; align-items: center; gap: 10px; }
.adm-soeg input { border-radius: 999px; padding: 12px 18px; }
.adm-chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.adm-medl { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--skille); }
.adm-medl-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.adm-medl .a-krop { flex: 1; min-width: 0; }
.adm-medl .a-navn { font-weight: 700; font-size: 14px; }
.adm-medl .a-under { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-pag { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.adm-pag .tael { font-size: 12px; color: var(--svag); }

.adm-monospace { font-family: ui-monospace, Menlo, monospace; }

/* ---------- admin: aktivitetsfeed ---------- */

.akt-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--linje); background: var(--track); flex-shrink: 0; cursor: pointer; }
.akt-tid { font-weight: 400; font-size: 11.5px; color: var(--muted); }
.status-pill.afventer { background: var(--negativ); color: #fff; }
.status-pill.godkendt { background: var(--accent-blod); color: var(--accent-moerk); }
.status-pill.afvist { background: var(--track); color: var(--negativ); }
.fv-knapper .fv-godkend { background: var(--accent); border-color: var(--accent); color: var(--papir); }
.fv-knapper .fv-afvis { color: var(--negativ); }

/* ---------- admin: statistik ---------- */

/* kompakte nøgletal: hver sin lille chip, tal og tekst på samme linje */
.ntal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ntal + .ntal { margin-top: 8px; }
.ntal > div, .ntal > a { background: var(--kort); border: 1px solid var(--linje); border-radius: 12px;
  padding: 8px 11px; font-size: 12px; color: var(--muted); line-height: 1.35; }
.ntal b { font-family: var(--font-h); font-size: 16px; font-weight: 800; color: var(--blaek);
  letter-spacing: -0.3px; margin-right: 3px; font-variant-numeric: tabular-nums; }
.ntal.idag > div, .ntal.idag > a { background: var(--accent-blod); border-color: transparent; }
.ntal.idag b { color: var(--accent-moerk); }
.ntal .bred { grid-column: 1 / -1; background: none; border: 0; padding: 0 2px;
  font-size: 11px; color: var(--svag); }
.trend { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.trend.op { color: var(--positiv); }
.trend.ned { color: var(--negativ); }
.stat-diagram { background: var(--kort); border: 1px solid var(--linje); border-radius: 18px;
  padding: 14px 10px 8px; margin-top: 10px; }
.stat-diagram svg { display: block; width: 100%; height: auto; }
.stat-vaerdi { font-size: 10px; font-weight: 700; fill: var(--blaek); }
.stat-akse { font-size: 9px; fill: var(--muted); }
.stat-hjerter { font-weight: 700; font-size: 13px; color: var(--accent-moerk); flex-shrink: 0; }

/* ---------- Runde 8: statistik-siden (Lige nu / Sejre / Aktivitet / Medlemmer) ---------- */

.stat-side h2 { font-size: 19px; margin-top: 26px; }
.stat-side h2 .h2-note { font-weight: 600; font-size: 13px; color: var(--muted); }
.stat-chips .chip { flex: 1; text-align: center; padding: 7px 0; font-weight: 700; }
.stat-groen { color: var(--positiv); }
.stat-roed { color: var(--negativ); }
.seg { display: flex; gap: 6px; margin: 0 4px 10px; background: var(--track); border-radius: 999px; padding: 3px; }
.seg button { flex: 1; border: 0; border-radius: 999px; padding: 6px 0; font-family: var(--font-b);
  font-size: 12px; font-weight: 700; color: var(--muted); background: none; cursor: pointer; }
.seg button.valgt { background: var(--kort); color: var(--blaek); box-shadow: 0 1px 3px rgba(35,32,26,.12); }
.diagram-fod { font-size: 11px; color: var(--svag); text-align: center; margin: 2px 0 6px; }
.stat-boks { background: var(--kort); border: 1px solid var(--linje); border-radius: 18px; padding: 14px; margin-top: 10px; }
.f-raekke { margin-top: 10px; }
.f-top { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; }
.f-top span:last-child { color: var(--muted); font-weight: 500; }
.f-bar { height: 8px; border-radius: 99px; background: var(--track); margin-top: 4px; overflow: hidden; }
.f-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.tider-tabel { width: 100%; border-collapse: separate; border-spacing: 3px; margin-top: 8px; }
.tider-tabel td { height: 22px; border-radius: 6px; background: var(--accent); }
.tider-tabel .r-label { font-size: 10.5px; color: var(--muted); background: none; white-space: nowrap; padding-right: 4px; width: 1%; }
.tider-tabel th { font-size: 10px; color: var(--svag); font-weight: 500; padding-bottom: 2px; }
/* Sejre: vandrette søjler (dage i træk, rekord-streg, brudte i gråt) */
.sejr-liste { display: flex; flex-direction: column; gap: 12px; background: var(--kort);
  border: 1px solid var(--linje); border-radius: 18px; padding: 14px; margin-top: 10px; }
.sejr-raekke { display: grid; grid-template-columns: 92px 1fr 30px; gap: 10px; align-items: center;
  text-decoration: none; color: inherit; }
.sejr-navn { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.sejr-navn small { display: block; font-weight: 500; font-size: 10.5px; color: var(--muted);
  white-space: normal; line-height: 1.25; }
.sejr-track { position: relative; height: 18px; border-radius: 99px; background: var(--track); }
.sejr-bar { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--accent); min-width: 6px; }
.sejr-raekke.brudt .sejr-bar { background: var(--dashed); }
.sejr-rekord { position: absolute; top: -3px; bottom: -3px; width: 0;
  border-left: 2px dashed var(--accent-moerk); }
.sejr-tal { font-size: 13px; font-weight: 800; font-family: var(--font-h); text-align: right;
  font-variant-numeric: tabular-nums; }
.sejr-raekke.brudt .sejr-tal { color: var(--negativ); }
.sejr-flamme { position: absolute; right: -2px; top: 50%; transform: translateY(-54%);
  font-size: 13px; line-height: 1; }
.sejr-fod { display: flex; gap: 14px; font-size: 11px; color: var(--svag); margin-top: 2px; flex-wrap: wrap; }
.sejr-fod i { font-style: normal; }
.sejr-fod .prik { display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  background: var(--accent); margin-right: 4px; vertical-align: -1px; }
.sejr-fod .prik.graa { background: var(--dashed); }
.sejr-fod .streg { display: inline-block; width: 0; height: 10px; border-left: 2px dashed var(--accent-moerk);
  margin-right: 5px; vertical-align: -1px; }

/* besøgskurve */
.kurve-legend { display: flex; gap: 16px; justify-content: center; font-size: 11.5px;
  color: var(--muted); margin: 2px 0 6px; }
.kurve-legend .prik { display: inline-block; width: 9px; height: 9px; border-radius: 99px;
  margin-right: 5px; vertical-align: -1px; }

/* mest sete */
.stat-oeje { font-weight: 700; font-size: 13px; color: var(--muted); flex-shrink: 0; }

/* enheds-donuts */
.donut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.donut-kort { background: var(--kort); border: 1px solid var(--linje); border-radius: 18px;
  padding: 14px 12px 12px; }
.donut-kort h3 { font-size: 13px; margin-bottom: 8px; }
.donut-wrap { position: relative; width: 104px; margin: 0 auto; }
.donut-wrap svg { display: block; width: 100%; height: auto; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.donut-center b { font-family: var(--font-h); font-size: 19px; font-weight: 800; letter-spacing: -0.5px; }
.donut-center span { font-size: 9.5px; color: var(--muted); margin-top: -2px; }
.donut-legend { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.donut-legend > div { display: flex; justify-content: space-between; font-size: 11.5px; }
.donut-legend .navn { color: var(--blaek); }
.donut-legend .navn i { display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  margin-right: 6px; font-style: normal; }
.donut-legend .vaerdi { color: var(--muted); font-variant-numeric: tabular-nums; }
.a-under .advarsel { color: var(--negativ); font-weight: 700; }
.sektion-note { font-size: 12px; color: var(--svag); margin-top: 6px; }

/* statistik-hub: overbliksforsiden (v1.36) */
.ntal a { display: block; color: inherit; }
.ntal a small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.tendens-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.spark-kort { display: block; background: var(--kort); border: 1px solid var(--linje);
  border-radius: 18px; padding: 12px; color: inherit; }
.spark-kort h3 { font-size: 13px; margin-bottom: 6px; }
.spark { display: block; width: 100%; height: auto; }
.spark-tal { font-size: 12px; color: var(--muted); margin-top: 6px; }
.spark-tal b { font-family: var(--font-h); font-size: 16px; font-weight: 800; color: var(--blaek); margin-right: 3px; }
.obs-boks { background: var(--kort); border: 1px solid var(--linje); border-left: 4px solid var(--negativ);
  border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
.obs-boks .eyebrow { color: var(--negativ); }
.obs-raekke { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; color: inherit; font-size: 13.5px; font-weight: 600; }
.obs-raekke + .obs-raekke { border-top: 1px solid var(--skille); }
.obs-raekke .chevron { color: var(--dashed); font-size: 18px; flex-shrink: 0; }

/* statistik-hubbens pille-nav og spalte-wrappere: aktive kun på store skærme
   (media query nederst) - på mobil er nav'en skjult og wrapperne umærkbare blokke */
.stat-nav { display: none; }
.stat-midt .stat-diagram { margin-top: 14px; }

/* statistik-redesign (v2.4): periode-skyder, fold-ud-grupper, søgefelt, drill-down */
.periode { background: var(--kort); border: 1px solid var(--linje); border-radius: 16px;
  padding: 10px 14px 8px; margin-top: 12px; }
.periode .p-label { display: flex; align-items: baseline; gap: 7px; font-size: 12px;
  color: var(--muted); }
.periode .p-label b { font-family: var(--font-h); font-size: 16px; font-weight: 800;
  color: var(--blaek); letter-spacing: -0.3px; }
.periode input[type=range] { -webkit-appearance: none; appearance: none; width: 100%;
  height: 26px; background: none; margin: 2px 0 0; }
.periode input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px;
  background: var(--track); }
.periode input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px;
  height: 24px; border-radius: 999px; background: var(--accent); border: 3px solid var(--kort);
  box-shadow: 0 1px 4px rgba(35,32,26,.25); margin-top: -8px; }
.periode input[type=range]::-moz-range-track { height: 8px; border-radius: 99px;
  background: var(--track); }
.periode input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 999px;
  background: var(--accent); border: 3px solid var(--kort); box-shadow: 0 1px 4px rgba(35,32,26,.25); }
.periode .p-ender { display: flex; justify-content: space-between; font-size: 10.5px;
  color: var(--svag); margin-top: -2px; }

.graf-note { font-size: 11px; color: var(--svag); margin: 4px 2px 0; }
.klikbar { cursor: pointer; }

/* statusgrupper som fold-ud (medlemmer i bidder) */
.gruppe { background: var(--kort); border: 1px solid var(--linje); border-radius: 14px;
  margin-top: 8px; overflow: hidden; }
.gruppe summary { display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 700; }
.gruppe summary::-webkit-details-marker { display: none; }
.gruppe summary .g-prik { width: 11px; height: 11px; border-radius: 4px; flex-shrink: 0; }
.gruppe summary .g-antal { margin-left: auto; font-family: var(--font-h); font-weight: 800;
  font-size: 15px; font-variant-numeric: tabular-nums; }
.gruppe summary .g-pil { color: var(--dashed); font-size: 15px; transition: transform .15s; }
.gruppe[open] summary .g-pil { transform: rotate(90deg); }
.gruppe .g-indhold { border-top: 1px solid var(--linje); padding: 4px 13px 10px; }
.g-medlem { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--linje); text-decoration: none; color: inherit; }
.g-medlem:last-child { border-bottom: 0; }
.g-medlem .adm-avatar { width: 32px; height: 32px; font-size: 12px; }
.g-medlem .gm-navn { font-size: 13.5px; font-weight: 700; }
.g-medlem .gm-under { font-size: 11px; color: var(--muted); }

/* søgefelt til medlemmer */
.stat-soeg { display: flex; align-items: center; gap: 8px; background: var(--kort);
  border: 1px solid var(--linje); border-radius: 999px; padding: 9px 14px; margin-top: 12px;
  color: var(--svag); font-size: 13.5px; }
.stat-soeg svg { flex-shrink: 0; }
.stat-soeg input { flex: 1; border: 0; background: none; font-family: var(--font-b);
  font-size: 13.5px; color: var(--blaek); outline: none; min-width: 0; }

/* nyheds-læsning (Reaktioner-siden) */
.nyhed-stat .f-top span:first-child { font-weight: 700; }
.nyhed-stat .n-dato { font-weight: 500; color: var(--svag); font-size: 11px; margin-left: 6px; }

/* drill-down-bundark: samme sheet-mønster som nyheds-overlayet */
#statSheet { position: fixed; inset: auto 0 0 0; top: auto; margin: 0 auto; width: 100%;
  max-width: 480px; max-height: 70vh; overflow-y: auto; border: 0; border-radius: 28px 28px 0 0;
  padding: 10px 22px calc(26px + env(safe-area-inset-bottom)); background: var(--kort);
  color: var(--blaek); box-shadow: var(--skygge-sheet); }
#statSheet::backdrop { background: rgba(35,32,26,0.35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
#statSheet h3 { font-family: var(--font-h); font-size: 17px; font-weight: 800; margin: 0 0 2px; }
#statSheet .s-under { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
#statSheet .g-medlem .mock-thumb, #statSheet .s-thumb { width: 36px; height: 36px;
  border-radius: 9px; object-fit: cover; flex-shrink: 0; }
#statSheet .s-hoejre { margin-left: auto; font-size: 11.5px; color: var(--muted);
  flex-shrink: 0; text-align: right; }

/* kredit-alarm: AI helt nede (Anthropic-kreditter tomme) - kraftigere end obs-boks */
.kredit-alarm { background: var(--negativ); color: #fff; border-radius: 12px;
  padding: 14px 16px; margin-top: 14px; }
.kredit-alarm .ka-titel { font-weight: 800; font-size: 15px; }
.kredit-alarm .ka-tekst { font-size: 13px; line-height: 1.45; margin-top: 6px; opacity: .95; }
.kredit-alarm .ka-knapper { display: flex; gap: 10px; align-items: center;
  margin-top: 12px; flex-wrap: wrap; }
.kredit-alarm .knap.lys { background: #fff; color: var(--negativ); border-color: #fff; }
.kredit-alarm .ka-luk { display: inline-block; background: transparent;
  border: 1px solid rgba(255,255,255,.6); color: #fff; font-weight: 700; font-size: 13px;
  border-radius: 999px; padding: 8px 14px; cursor: pointer; text-decoration: none; }
.kredit-alarm .ka-luk:disabled { opacity: .5; cursor: default; }
/* mild: tidlig "slipper op snart"-advarsel (okker, altid amber - ikke rød) */
.kredit-alarm.mild { background: #C1852F; }

/* statistik-hub: udfordringer & motiver (beredskab) */
.stak-bar { display: flex; gap: 2px; height: 16px; border-radius: 99px; overflow: hidden;
  margin-top: 10px; background: var(--track); }
.stak-bar i { display: block; height: 100%; min-width: 3px; }
.stak-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--muted); margin-top: 8px; }
.stak-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  margin-right: 4px; vertical-align: -1px; }
/* forsyningsvarsel: frist-tal + potentiale + interaktiv fremskrivning (variant E) */
.vs-tal { display: flex; align-items: baseline; gap: 11px; margin: 6px 0 4px; }
.vs-tal b { font-family: var(--font-h); font-weight: 800; font-size: 52px; line-height: .9;
  color: var(--accent); letter-spacing: -1px; }
.vs-tal span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.vs-tal span i { font-style: normal; color: var(--accent-moerk); font-weight: 600; }
.vs-note { font-size: 12px; color: var(--svag); margin: 8px 0 0; line-height: 1.5; }
.vs-pot { border: 1px solid var(--skille); border-radius: 12px; padding: 12px 13px;
  margin-top: 15px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.vs-pot b { color: var(--blaek); font-family: var(--font-h); font-weight: 800; }
.vs-pot .vs-pot-tal { font-family: var(--font-h); font-weight: 800; font-size: 26px;
  color: var(--accent-moerk); line-height: 1; margin-right: 8px; float: left; padding-top: 3px; }
.vv-akse { font-size: 9.5px; font-weight: 700; fill: var(--svag); text-transform: uppercase; }
.e-styr { display: flex; align-items: center; gap: 7px; margin-top: 16px; }
.e-styr button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--skille);
  background: var(--kort); color: var(--blaek); font-size: 16px; font-weight: 800; cursor: pointer;
  font-family: var(--font-h); line-height: 1; }
.e-styr button:disabled { opacity: 0.3; cursor: default; }
.e-styr .e-span { flex: 1; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px; }
.e-graf { position: relative; margin-top: 10px; }
.e-graf svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
#eTip { display: none; position: absolute; background: var(--blaek); color: var(--papir);
  border-radius: 10px; padding: 9px 11px; font-size: 11.5px; line-height: 1.6; pointer-events: none;
  max-width: 230px; z-index: 5; box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
#eTip b { font-family: var(--font-h); }
#eTip i { display: inline-block; width: 10px; height: 5px; border-radius: 2px; margin-right: 6px; }
#eTip .eNavne { border-top: 1px solid rgba(255,255,255,0.25); margin-top: 5px; padding-top: 5px;
  color: #F2C98A; }
#eTip .eNavne.blaa { color: #A9CBF0; border-top: none; margin-top: 2px; padding-top: 0; }
.e-valg { display: flex; align-items: center; gap: 8px; margin-top: 12px; border-top: 1px solid var(--skille);
  padding-top: 11px; font-size: 12.5px; color: var(--muted); }
.e-valg input { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; }
.vv-legende { display: flex; gap: 16px; margin-top: 10px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.vv-legende i { display: inline-block; width: 14px; height: 6px; border-radius: 3px; margin-right: 5px; }
.e-nb { font-size: 11.5px; color: var(--svag); margin: 9px 0 0; line-height: 1.5; }
/* fuld skærm (landskab på telefon eller ⛶): kun grafen + flydende ✕ */
body.e-fuld { overflow: hidden; }
body.e-fuld #vsBoks { position: fixed; inset: 0; z-index: 220; border-radius: 0; border: none;
  margin: 0; padding: 0; display: flex; flex-direction: column; }
body.e-fuld #vsBoks .vs-tal, body.e-fuld #vsBoks .vs-note, body.e-fuld #vsBoks .vs-pot,
body.e-fuld #vsBoks .vv-legende, body.e-fuld #vsBoks .e-valg, body.e-fuld #vsBoks .e-nb { display: none; }
body.e-fuld .e-styr { position: absolute; z-index: 5; margin: 0;
  top: calc(8px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); }
body.e-fuld .e-styr > :not(#eFuld) { display: none; }
body.e-fuld .e-styr #eFuld { box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
body.e-fuld .e-graf { flex: 1; min-height: 0; margin: 0; display: flex; align-items: center; }
body.e-fuld .e-graf svg { width: 100%; height: 100%; touch-action: none; }

/* ---------- gamle aliaser (bagudkompat: tema-jul + evt. rester) ---------- */
:root {
  --papir-kort: var(--kort);
  --grafit: var(--blaek);
  --graa: var(--muted);
  --blyantgul: var(--accent);
  --blyantgul-moerk: var(--accent-moerk);
  --rosa: var(--negativ);
  --groen: var(--positiv);
  --blaa: var(--accent-moerk);
  --kraft: var(--track);
}

/* ---------- Profilside beriget (Runde 9) ---------- */
.profil-hoved { background: var(--kort); border: 1px solid var(--linje); border-radius: 18px; padding: 16px; margin-top: 14px; }
.profil-hoved .avatar { width: 54px; height: 54px; background: var(--accent-blod); color: var(--accent-moerk); font-size: 22px; }
.profil-hoved .pf-siden { font-size: 12.5px; color: var(--muted); }
.profil-hoved .pf-antal { font-size: 12.5px; margin-top: 0; }
.profil-hoved .pf-antal b { color: var(--blaek); }
.pf-h2 { font-size: 19px; margin-top: 26px; }
.pf-kdmark { font-size: 10px; font-weight: 700; color: var(--accent-moerk); background: var(--accent-blod);
  border-radius: 999px; padding: 2px 9px; letter-spacing: 0.4px; vertical-align: 3px; }
.pf-udf { background: var(--kort); border: 1px solid var(--linje); border-radius: 18px; padding: 14px; margin-top: 12px; }
.pf-udf-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf-udf-titel { font-family: var(--font-h); font-weight: 800; font-size: 15.5px; }
.pf-bar { height: 8px; border-radius: 99px; background: var(--track); margin-top: 9px; overflow: hidden; }
.pf-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.pf-meta { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.pf-meta b { color: var(--blaek); }
.pf-sejr-global { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.pf-sejr-global svg { color: var(--accent); flex-shrink: 0; }
.pf-sejr-global b { color: var(--accent); font-weight: 700; }
.pf-pill { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; flex-shrink: 0; }
.pf-pill.gron { background: #E7F0E7; color: var(--positiv); }
.pf-pill.roed { background: #F6E8E3; color: var(--negativ); }
.pf-pill.vent { background: var(--accent-blod); color: var(--accent-moerk); }
.pf-thumb { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; background: var(--track); flex-shrink: 0; }
.pf-tom { font-size: 12.5px; color: var(--svag); margin-top: 10px; font-style: italic; }
.pf-udf .polaroid-strip { margin-top: 4px; }
.pf-ghost { border: 1.5px dashed var(--dashed); border-radius: 18px; padding: 14px; margin-top: 14px;
  color: var(--muted); font-size: 12.5px; }
.pf-ghost b { color: var(--blaek); font-size: 13.5px; display: block; margin-bottom: 2px; }

/* ---------- Fejl-log (admin) ---------- */
.fl-raekke { align-items: flex-start; flex-wrap: wrap; cursor: pointer; }
.fl-raekke .a-navn { white-space: normal; word-break: break-word; }
.fl-pill { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px;
  flex-shrink: 0; background: var(--track); color: var(--muted); margin-top: 2px; }
/* detalje-visning: fold ud ved tryk på rækken - viser alt der er logget */
.fl-detalje { display: none; flex-basis: 100%; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--skille); }
.fl-raekke.aaben .fl-detalje { display: block; }
.fl-besked { font-size: 13px; word-break: break-word; margin-bottom: 8px;
  font-family: ui-monospace, monospace; color: var(--blaek); }
.fl-linje { display: flex; gap: 10px; font-size: 12.5px; padding: 2px 0;
  color: var(--blaek); word-break: break-word; }
.fl-linje span { flex: none; width: 108px; color: var(--muted); }

/* ---------- Profilbilleder ---------- */
/* Billedet fylder den eksisterende cirkel; uden billede vises initialen som før. */
.avatar.har-foto, .adm-avatar.har-foto { overflow: hidden; }
.avatar img, .adm-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
/* mini-avatar på navnelinjer (polaroids, Siden sidst) - kun når billedet findes */
.avatar-mini { display: inline-flex; width: 17px; height: 17px; border-radius: 999px;
  overflow: hidden; vertical-align: -3px; margin-right: 4px; flex: none; }
.avatar-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-navn .avatar-mini { vertical-align: -4px; }
/* kamera-knap på profil-hovedet */
.pf-avatarwrap { position: relative; flex: none; display: inline-flex; }
.pf-kamera { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px;
  border-radius: 999px; border: 2px solid var(--kort, #fff); background: var(--blaek);
  color: #fff; display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; }
.dlg-note { font-size: 12.5px; color: var(--muted); margin: -6px 0 12px; }
/* galleri med de 12 generiske avatarer i profilbillede-dialogen */
.av-galleri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 16px; }
.av-galleri .av-valg { padding: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--linje); background: var(--kort); cursor: pointer; }
.av-galleri .av-valg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-galleri .av-valg.valgt { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-blod); }

/* ---------- Delelinks (admin) ---------- */
/* rækken rummer to knapper (info + kopiér), så selve rækken er en div */
.dl-raekke { padding: 0; }
.dl-info { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: inherit;
  cursor: pointer; font-family: var(--font-b); font-size: inherit; padding: 12px 0 12px 14px; }
.dl-kopier { flex-shrink: 0; margin-right: 12px; font-size: 12.5px; font-weight: 700;
  font-family: var(--font-b); color: var(--blaek); background: var(--track);
  border: 1px solid var(--linje); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.dl-fast { font-size: 13px; font-weight: 700; background: var(--track); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; word-break: break-all; }

/* ---------- Runde 10 · admin-forsiden komprimeret ---------- */
/* Menulisten: ét kort med skillelinjer. Badge-farver: varsel (rød) =
   handling påkrævet, nyt (okker) = nyt siden sidste besøg på siden */
.mere-kort { background: var(--kort); border: 1px solid var(--linje); border-radius: 16px;
  margin-top: 10px; overflow: hidden; }
.mere-raekke { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  text-decoration: none; color: inherit; }
.mere-raekke + .mere-raekke { border-top: 1px solid var(--skille); }
.m-navn { flex: 1; font-weight: 700; font-size: 14.5px; }
.m-signal { font-size: 11.5px; font-weight: 700; color: var(--muted);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.m-signal.varsel { background: #F6E8E3; color: var(--negativ); }
.m-signal.nyt { background: var(--accent-blod); color: var(--accent-moerk); }
.m-signal.groen { background: #E1EFE1; color: var(--positiv); }

/* Ordlisten (admin › Ordlisten): 450 ord, så alle kategorier er lukkede fra
   start - man åbner dén gruppe man vil efterse. Ord der hviler er dæmpede,
   så det er til at se med et blik hvad der er ude af omløb lige nu. */
.ord-kat { background: var(--kort); border: 1px solid var(--linje);
  border-radius: 16px; margin-top: 10px; overflow: hidden; }
.ord-kat > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  cursor: pointer; list-style: none; }
.ord-kat > summary::-webkit-details-marker { display: none; }
.ord-kat > summary::after { content: '›'; color: var(--svag); font-size: 20px;
  line-height: 1; transition: transform 0.15s ease; }
.ord-kat[open] > summary::after { transform: rotate(90deg); }
.ord-kat > summary .k-meta { margin-left: auto; }
.ord-gruppe { padding: 0 14px 12px; }
.ord-titel { display: flex; align-items: baseline; gap: 8px; font-weight: 700;
  font-size: 13px; margin: 6px 0 6px; border-top: 1px solid var(--skille); padding-top: 10px; }
.ord-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.ord { background: var(--track); border-radius: 999px; padding: 3px 10px;
  font-size: 13px; font-family: inherit; color: inherit; border: 1px solid transparent; }
button.ord { cursor: pointer; }
.ord.hviler { background: transparent; border: 1px dashed var(--dashed);
  color: var(--svag); }
/* AI-forslag: ikke i spillet endnu - de skal trykkes til, ét for ét */
.ord.forslag { background: transparent; border: 1px solid var(--linje); color: var(--muted); }
.ord.forslag.valgt { background: var(--blaek); border-color: var(--blaek); color: var(--papir); font-weight: 700; }
.ord-forslag-boks { margin-top: 10px; padding: 10px; border-radius: 12px;
  background: var(--accent-blod); }
.ord-forslag-boks .ord-liste { margin-top: 6px; }
.ord-knapper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.dashed-knap.lille { flex: 1; min-width: 140px; margin-top: 0; padding: 8px 10px; font-size: 13px; }

/* ---------- varsel-bolle (burger + forside-fane) ---------- */
.bolle { position: absolute; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  font-family: var(--font-b); font-size: 10.5px; font-weight: 800; line-height: 1;
  color: #fff; border: 1.5px solid var(--kort); pointer-events: none; }
.bolle.prik { min-width: 11px; height: 11px; padding: 0; }
.bolle.roed { background: var(--negativ); }
.bolle.orange { background: var(--accent); }
.bolle.groen { background: var(--positiv); }
.menu-bolle { top: -3px; right: -3px; }
.tab-bolle { top: -2px; left: calc(50% + 5px); }

/* ---------- Invitationer (admin) ---------- */
/* linjer under inviterens navn: hvem der har oprettet sig via linket */
.inv-raekke { align-items: flex-start; }
.inv-raekke .adm-avatar { margin-top: 2px; }
.inv-nye { font-size: 13px; color: var(--muted); margin-top: 6px;
  display: flex; align-items: center; gap: 8px; }

/* ---------- afleverings-overlay (upload → AI-vurdering → resultat) ---------- */

.aflever-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(35,32,26,0.55);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.ao-kort { background: var(--kort); border-radius: 18px; box-shadow: var(--skygge-sheet);
  padding: 28px 22px; max-width: 340px; width: 100%; text-align: center; }
.ao-spinner { width: 36px; height: 36px; margin: 0 auto 14px; border-radius: 50%;
  border: 3px solid var(--track); border-top-color: var(--accent);
  animation: ao-snur 0.9s linear infinite; }
@keyframes ao-snur { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ao-spinner { animation: none; } }
/* AI-ventefigur "Bedømmeren ved staffeliet" - vises mens AI'en vurderer
   tegningen (SVG'en bor i app.js). Accent følger appens --accent. */
.vent-figur { display: block; margin: 0 auto 14px; --vent-accent: var(--accent); }
@keyframes vfD-lean { 0%,100% { transform: rotate(0deg); } 40%,62% { transform: rotate(-3deg); } }
@keyframes vfD-nod { 0%,28%,100% { transform: rotate(0deg); } 52%,66% { transform: rotate(-6deg); } }
@keyframes vfD-scan { 0%,14% { transform: rotate(-8deg); } 44%,60% { transform: rotate(7deg); } 90%,100% { transform: rotate(-8deg); } }
@keyframes vfD-blink { 0%,86%,100% { transform: scaleY(1); } 90% { transform: scaleY(0.12); } }
@keyframes vfD-brow { 0%,48%,74%,100% { transform: translateY(0); } 54%,68% { transform: translateY(-1.3px); } }
@media (prefers-reduced-motion: reduce) { .vent-figur .vf-anim { animation: none !important; } }
.ao-ikon { font-size: 36px; line-height: 1; margin-bottom: 10px; }
.ao-titel { font-family: var(--font-h); font-size: 19px; line-height: 1.3; margin-bottom: 8px; }
.ao-tekst { font-size: 14px; color: var(--muted); }
.ao-nudge { font-size: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--skille); }
.ao-knapper { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.ao-cta { background: var(--accent); color: var(--papir); border: 0; width: 100%;
  border-radius: 16px; padding: 14px; font-weight: 700; font-size: 15.5px;
  box-shadow: var(--skygge-cta); cursor: pointer; font-family: var(--font-b); }
.ao-sekundaer { background: none; border: 0; color: var(--muted); font-family: var(--font-b);
  font-size: 14px; padding: 10px; cursor: pointer; text-decoration: underline; }

/* ---------- personlig opmuntring fra Steen (taleboble, variant D) ---------- */
.opmuntring { margin: 20px 2px 2px; display: flex; align-items: flex-end; gap: 10px;
  animation: opm-ind 0.3s ease-out; }
@keyframes opm-ind { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .opmuntring { animation: none; } }
.opm-boble { flex: 1; position: relative; background: var(--kort);
  border: 1px solid var(--linje); border-radius: 16px; padding: 12px 14px 13px;
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
  /* min-height = to tekstlinjer (2 × 22,5px + lodret padding 25px), så en
     enkeltlinjes besked ikke giver en lav, sammenklemt boble (Steens ønske 12/7) */
  min-height: 70px; box-sizing: border-box; }
/* pil/hale - peger mod Steens mund (bottom:34px er afstemt med hovedet) */
.opm-boble::after { content: ''; position: absolute; right: -6px; bottom: 34px;
  width: 11px; height: 11px; background: var(--kort);
  border-right: 1px solid var(--linje); border-top: 1px solid var(--linje);
  transform: rotate(45deg); }
.opm-tekst { margin: 0; font-family: var(--font-b); font-size: 15px; line-height: 1.5;
  color: var(--blaek); }
/* ordene ligger alle i boblen fra start (rigtig størrelse med det samme),
   men fades ind ét ad gangen så beskeden "tales" frem. animation-delay pr.
   ord sættes inline i js. inline-block så ordene stadig ombryder ved mellemrum. */
.opm-ord { display: inline-block; opacity: 0; animation: opm-ord-ind 0.2s ease-out forwards; }
@keyframes opm-ord-ind { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .opm-ord { opacity: 1; animation: none; } }
.opm-link { font-family: var(--font-b); font-weight: 600; font-size: 14px; line-height: 1.4;
  color: var(--accent-moerk); text-decoration: none; }
.opm-link:hover { color: var(--accent); }
/* Rundvisnings-linket: lille rund afspil-knap foran teksten (variant B). */
.opm-link-video { display: inline-flex; align-items: center; gap: 7px; }
.opm-play { flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.opm-play svg { width: 9px; height: 9px; fill: #fff; margin-left: 1px; }
.opm-hoved { flex: none; display: flex; width: 56px; justify-content: center;
  margin-bottom: 10px; }
.opm-hoved img { width: 46px; height: auto; display: block;
  transform: translateY(4px); /* Steens ønske 12/7: hovedet lidt lavere, uafhængigt af boblen */ }

/* ---------- rundvisning (videoguide, fuldskærm) ---------- */
.video-side { position: fixed; inset: 0; z-index: 60; background: #14110c;
  display: flex; align-items: center; justify-content: center;
  height: var(--app-height, 100vh); }
.video-luk { position: absolute; z-index: 2;
  top: calc(env(safe-area-inset-top, 0px) + 12px); right: 14px;
  font-family: var(--font-b); font-weight: 700; font-size: 14px; color: #fff;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.video-luk:active { background: rgba(0,0,0,0.78); }
.video-boks { width: 100%; max-width: 900px; padding: 0 12px;
  display: flex; align-items: center; justify-content: center; }
.video-afspil { width: 100%; max-height: calc(var(--app-height, 100vh) - 40px);
  border-radius: 12px; background: #000; }
.video-snart { text-align: center; color: #f4efe6; font-family: var(--font-b); }
.video-snart-ikon { font-size: 48px; margin-bottom: 12px; }
.video-snart p { font-size: 16px; line-height: 1.5; margin: 0; opacity: 0.85; }

/* ---------- like i fremviseren ---------- */
/* hjertet i fv-knap-rækken arver pill-stilen; kun glyf og farver justeres */
.fv-knapper .fv-like { display: inline-flex; align-items: center; gap: 4px;
  font-size: 17px; line-height: 1; padding: 8px 14px; }
.fv-knapper .fv-like.liket { color: var(--negativ); }
.fv-knapper .fv-like[disabled] { opacity: .55; cursor: default; }
.fv-knapper .fv-like .like-antal { font-size: 12.5px; font-weight: 700; }

/* ---------- opmuntringer (admin) ---------- */
/* gloserne er lange sætninger - rækkerne må ombryde i stedet for at klippe */
.opm-raekke { text-align: left; }
.opm-raekke .a-navn { white-space: normal; font-weight: 500; line-height: 1.45; }

/* ---------- direkte besked (admin-blok på profilsiden) ---------- */
.pf-adminbesked { margin-top: 18px; background: var(--kort); border: 1px solid var(--linje);
  border-radius: 14px; padding: 14px; }
.pf-adminbesked b { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.pf-adminbesked textarea { width: 100%; margin-top: 8px; box-sizing: border-box; }
.pf-adminbesked #pbStatus { margin-top: 6px; }

/* ---------- sjov og spas: det skjulte puslespil (pusle.js) ---------- */
/* 1:1 efter godkendt mockup: stilproever/pusle-mockup.html (12/7 2026) */
/* margin:auto er nødvendig: *-resetten nulstiller dialogens indbyggede
   auto-centrering, så uden den lander dialogen i øverste venstre hjørne */
.pusle-dialog { width: min(92vw, 380px); padding: 18px 18px 20px; margin: auto; }
.pusle-dialog h2 { text-align: center; font-family: var(--font-h); font-weight: 800; }
.pusle-under { text-align: center; color: var(--muted); font-size: 13.5px; margin: 2px 0 14px; }
.pusle-hud { display: flex; justify-content: center; gap: 10px; margin-bottom: 12px; }
.pusle-hud span { background: var(--accent-blod); color: var(--accent-moerk); font-weight: 600;
  font-size: 13.5px; padding: 4px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
/* plastikramme som de klassiske fysiske 15-spil - tilfældig farve pr. nyt spil */
.pusle-ramme { position: relative; padding: 24px; border-radius: 20px;
  background: linear-gradient(160deg, var(--r1) 0%, var(--r2) 45%, var(--r3) 100%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.45), inset 0 -3px 5px rgba(0,0,0,0.30),
    0 6px 16px var(--rskygge); }
.pusle-ramme.roed  { --r1: #D8493A; --r2: #C0392B; --r3: #9E2B20; --rbund: #3A100C; --rskygge: rgba(158,43,32,0.35); }
.pusle-ramme.groen { --r1: #4CAF66; --r2: #35934E; --r3: #24703A; --rbund: #0E2A16; --rskygge: rgba(36,112,58,0.35); }
.pusle-ramme.blaa  { --r1: #4A85CC; --r2: #3468AE; --r3: #234E8C; --rbund: #0C1F35; --rskygge: rgba(35,78,140,0.35); }
.pusle-braet { position: relative; width: 100%; aspect-ratio: 1 / 1;
  background: var(--rbund); border-radius: 6px; overflow: hidden;
  /* rammens inderside: mørk væg i top/venstre (i skygge), lys kant i højre/bund */
  box-shadow: -2px -2px 2px rgba(0,0,0,0.35), 3px 3px 2px rgba(255,255,255,0.35);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; }
/* rammen er højere end brikkerne og kaster skygge over dem i top/venstre */
.pusle-braet::after { content: ''; position: absolute; inset: 0; border-radius: 6px;
  pointer-events: none; z-index: 2; box-shadow: inset 7px 7px 10px -2px rgba(0,0,0,0.5); }
.pusle-flise { position: absolute; width: calc(100% / 3); height: calc(100% / 3); overflow: hidden;
  cursor: pointer; border-radius: 4px; transition: transform .18s ease;
  box-shadow: 3px 4px 6px rgba(0,0,0,0.55);
  /* affasede kanter (~5 mm tyk brik); lyskanter slukkes mod rammens skygge */
  --lys-v: inset 2px 0 2px rgba(255,255,255,0.45);
  --lys-t: inset 0 2px 2px rgba(255,255,255,0.45); }
.pusle-flise.kant-v { --lys-v: 0 0 0 rgba(0,0,0,0); }
.pusle-flise.kant-t { --lys-t: 0 0 0 rgba(0,0,0,0); }
.pusle-flise::after { content: ''; position: absolute; inset: 0; border-radius: 4px;
  pointer-events: none;
  box-shadow: var(--lys-v), var(--lys-t), inset -2px -2px 3px rgba(0,0,0,0.45); }
.pusle-flise-bg { position: absolute; width: 300%; height: 300%;
  background-size: cover; background-position: center; pointer-events: none; }
/* løst: brikkerne "falder på plads" - flade, ingen fuger, hele maleriet */
.pusle-braet.loest .pusle-flise { box-shadow: none; cursor: default; border-radius: 0; }
.pusle-braet.loest .pusle-flise::after { display: none; }
/* sejrs-overlejring med fejring + pointtavle i ét kort */
.pusle-sejr { position: absolute; inset: 24px; border-radius: 6px; display: none;
  align-items: center; justify-content: center; background: rgba(35,32,26,0.45); cursor: pointer; }
.pusle-sejr.vis { display: flex; animation: pusle-tone .4s ease; }
.pusle-sejr-kort { background: var(--kort); border-radius: 16px; padding: 20px 22px;
  max-height: 100%; overflow: auto;
  text-align: center; max-width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  animation: pusle-pop .45s cubic-bezier(.2,1.4,.4,1); }
.pusle-sejr-kort .stor { font-family: var(--font-h); font-weight: 800; font-size: 21px; color: var(--positiv); }
.pusle-sejr-kort .tavle-titel { font-size: 17px; margin-top: 14px; }
.pusle-sejr-kort p { font-size: 14.5px; margin-top: 6px; }
.pusle-sejr-kort .hint { color: var(--muted); font-size: 12.5px; margin-top: 10px; }
.pusle-tavle { list-style: none; margin: 10px 0 0; padding: 0; text-align: left; }
.pusle-tavle li { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px;
  padding: 5px 8px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.pusle-tavle li.mig { background: var(--accent-blod); font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--accent-moerk); }
.pusle-tavle li.dots { display: block; text-align: center; color: var(--muted);
  padding: 0; line-height: 1; }
.pusle-tavle .plads { width: 22px; text-align: center; flex: none; }
.pusle-tavle .navn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: inherit; text-decoration: underline;
  text-decoration-color: var(--linje); text-underline-offset: 3px; }
.pusle-tavle .rtid { color: var(--accent-moerk); font-weight: 600; font-size: 12px;
  flex: none; white-space: nowrap; }
.pusle-knapper { display: flex; gap: 10px; justify-content: center; margin-top: 16px;
  flex-wrap: wrap; }
@keyframes pusle-tone { from { opacity: 0; } to { opacity: 1; } }
@keyframes pusle-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- privatlivssiden ---------- */
.privatliv { padding: 4px 16px 90px; max-width: 560px; margin: 0 auto; font-size: 15px; line-height: 1.55; }
.privatliv h2 { font-family: var(--font-h); font-size: 18px; margin: 22px 0 6px; }
.privatliv p { margin: 0 0 8px; }
.privatliv ul { margin: 0 0 8px; padding-left: 20px; }
.privatliv li { margin-bottom: 5px; }
.privatliv a { color: var(--accent-moerk); }
.pv-intro { color: var(--muted); }
.pv-ikke li::marker { color: var(--positiv); }
.pv-dato { color: var(--svag); font-size: 12.5px; margin-top: 22px; }
.login-privatliv { text-align: center; margin-top: 18px; font-size: 12.5px; }
.login-privatliv a { color: var(--svag); }

/* ---------- Fejl og idéer (feedback via GitHub-issues) ---------- */
.feedback { padding-bottom: 30px; }
.fb-intro { font-size: 14px; line-height: 1.6; color: #4a443a; margin-top: 4px; }
.fb-knapper { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.fb-knapper .knap { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.fb-note { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin-top: 12px; }
.fb-h2 { font-family: var(--font-h); font-size: 17px; font-weight: 800; margin: 26px 0 10px; }
.fb-punkt { display: flex; align-items: flex-start; gap: 12px; background: var(--kort);
  border: 1px solid var(--linje); border-radius: 16px; padding: 13px 14px; margin-bottom: 10px; }
.fb-krop { flex: 1; min-width: 0; }
.fb-titel { font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.fb-tekst { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: 4px;
  white-space: pre-line; }
.fb-gardin { margin-top: 26px; }
.fb-gardin > summary { font-family: var(--font-h); font-size: 17px; font-weight: 800;
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; }
.fb-gardin > summary::-webkit-details-marker { display: none; }
.fb-gardin > summary::before { content: '▸'; font-size: 14px; transition: transform .2s; }
.fb-gardin[open] > summary::before { transform: rotate(90deg); }
.fb-gardin-tal { font-size: 13px; font-weight: 700; color: var(--muted); }
.fb-flueben { color: var(--positiv); font-weight: 800; }
.fb-tom { font-size: 13.5px; color: var(--svag); background: var(--kort);
  border: 1px dashed var(--dashed); border-radius: 16px; padding: 14px; }
.fb-stem { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 58px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--linje);
  background: var(--papir); cursor: pointer; font-family: var(--font-b); color: var(--blaek); }
.fb-stem:active { transform: scale(0.97); }
.fb-stem-tal { font-family: var(--font-h); font-size: 17px; font-weight: 800; line-height: 1; }
.fb-stem-tekst { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.fb-stem.stemt { background: var(--accent-blod); border-color: var(--accent);
  opacity: 1; cursor: default; }
.fb-stem.stemt .fb-stem-tal { color: var(--accent-moerk); }
.fb-stem.stemt .fb-stem-tekst { color: var(--accent-moerk); }

/* formularen: bottom sheet i samme stil som nyheden */
#fbDialog { position: fixed; inset: auto 0 0 0; top: auto; margin: 0 auto; width: 100%;
  max-width: 480px; max-height: 88vh; overflow-y: auto; border: 0; border-radius: 28px 28px 0 0;
  padding: 10px 22px calc(30px + env(safe-area-inset-bottom)); background: var(--kort);
  color: var(--blaek); box-shadow: var(--skygge-sheet); }
#fbDialog::backdrop { background: rgba(35,32,26,0.35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
#fbDialog h2 { font-family: var(--font-h); font-size: 21px; font-weight: 800; line-height: 1.25; margin: 6px 0 0; }
.fb-dlg-intro { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin-top: 8px; }
.fb-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted);
  margin: 14px 0 5px; }
#fbDialog input, #fbDialog textarea { width: 100%; }
#fbDialog textarea { resize: vertical; }
.fb-dlg-fejl { margin-top: 12px; }

/* ---------- spørgsmål (GitHub Discussions) ----------
   "Stil et spørgsmål" er den nye hovedhandling og får hele bredden; fejl og
   idé deler rækken nedenunder som før. */
#fbNySpm { grid-column: 1 / -1; }

.spm-linje { display: flex; align-items: center; gap: 10px; background: var(--kort);
  border: 1px solid var(--linje); border-radius: 14px; padding: 12px 14px;
  margin-bottom: 8px; color: var(--blaek); text-decoration: none; }
.spm-linje.nyt { border-color: var(--accent); background: var(--accent-blod); }
.spm-linje.fjernet { opacity: .65; }
.spm-krop { flex: 1; min-width: 0; }
.spm-titel { font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.spm-status { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.spm-linje.nyt .spm-status { color: var(--accent-moerk); font-weight: 700; }
.spm-prik { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

.spm-faq { background: var(--kort); border: 1px solid var(--linje); border-radius: 14px;
  padding: 2px 14px; margin-bottom: 8px; }
.spm-faq > summary { list-style: none; cursor: pointer; padding: 11px 0;
  font-size: 14.5px; font-weight: 700; line-height: 1.35;
  display: flex; align-items: baseline; gap: 8px; }
.spm-faq > summary::-webkit-details-marker { display: none; }
.spm-faq > summary::before { content: '▸'; font-size: 13px; color: var(--muted); transition: transform .2s; }
.spm-faq[open] > summary::before { transform: rotate(90deg); }
.spm-faq-spm { font-size: 13px; line-height: 1.55; color: var(--muted);
  white-space: pre-wrap; word-break: break-word; padding-bottom: 10px; }
.spm-faq-svar { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  border-top: 1px solid var(--skille); padding: 10px 0 12px; }

/* Tråden låner snakkens boble-udtryk: egne indlæg til højre i accentfarven,
   Steens til venstre på papir - så formen er genkendt før den læses. */
.spm-traad { padding-bottom: 30px; }
.spm-h1 { font-family: var(--font-h); font-size: 20px; font-weight: 800;
  line-height: 1.3; margin: 6px 0 16px; }
/* width: fit-content, ellers fylder en boble med to ord hele bredden - som
   i snakken skal boblen krympe om teksten. */
.spm-boble { width: fit-content; max-width: 88%; border: 1px solid var(--linje);
  border-radius: 16px; padding: 9px 13px; margin-bottom: 10px; background: var(--papir); }
.spm-boble.mig { background: var(--accent-blod); margin-left: auto; }
.spm-afsender { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 3px;
  display: flex; align-items: center; gap: 6px; }
.spm-svarmaerke { background: var(--positiv); color: #fff; border-radius: 6px;
  padding: 1px 5px; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; }
.spm-tekst { font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.spm-tid { font-size: 11px; color: var(--svag); margin-top: 4px; }
.spm-venter { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 16px 0; }
.spm-lukket { font-size: 13px; color: var(--muted); line-height: 1.55;
  background: var(--kort); border: 1px solid var(--linje); border-radius: 12px;
  padding: 12px 14px; margin-top: 20px; }
.spm-skriv { margin-top: 22px; border-top: 1px solid var(--skille); padding-top: 16px; }

/* ---------- store skærme: iPad m.fl. (issue #7) ----------
   Mobil er grundlaget og ændres ikke - alt herunder gælder først fra 700 px.
   Princip: fast indholdsbredde 720 px (960 px på admin-sider, sat som
   body.rute-admin i naviger()), og billedgrids med flydende kolonnetal
   ("så mange der er plads til") frem for faste antal pr. breakpoint.
   Tekst, formularer og sheets beholder bevidst deres smalle bredde. */
@media (min-width: 700px) {
  #app, .tabbar, .aflever-fast { max-width: 720px; }
  body.rute-admin #app, body.rute-admin .tabbar { max-width: 960px; }

  /* forsiden: motiv-gitteret */
  .felter { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .felter.kompakt { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  /* hero-motivet er et 1:1-kvadrat i fuld bredde - uindskrænket ville det
     blive ~680 px højt og skubbe alt andet ud af skærmen */
  .felt-hero { max-width: 460px; margin-left: auto; margin-right: auto; }
  .ajour-kort { max-width: 460px; margin-left: auto; margin-right: auto; }

  /* arkivet: kort i kolonner i stedet for én lang liste */
  .arkiv-liste, .arkiv-afsluttet {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .arkiv-kort.dintur { margin-top: 0; }

  /* admin/statistik: nøgletal og små kort på én række, grafer bredere */
  .ntal { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .donut-grid, .tendens-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .av-galleri { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

  /* lidt større wordmark/logo - der er luft nok omkring */
  .topbar .wordmark { font-size: 30px; }
  .logo-maerke { width: 26px; height: 26px; }

  /* sejrsrækken: større flamme og tal (flammens inline-px ganges op via em) */
  .forside-sejr { gap: 12px; }
  .forside-sejr .sf-ild svg { width: 1.35em; height: 1.35em; }
  .forside-sejr .sf-tekst b { font-size: 24px; }
  .forside-sejr .sf-tekst span { font-size: 11.5px; }

  /* nyhedsfeltet: kortere, men to linjer - overskrift + starten af teksten
     (gælder sider UDEN peptalk; forsiden overstyres af variant 2 nedenfor) */
  .forside-raekke .nyhedsfelt { flex: 0 1 auto; margin-left: auto; max-width: 440px;
    display: block; padding-right: 58px; }
  .nyhedsfelt .ny-overskrift, .nyhedsfelt .ny-tekst { display: block; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; margin-right: 0; }
  .nyhedsfelt .ny-tekst { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 1px; }

  /* forsiden, variant 2 (Steens valg 28/7): sejrs-kort på blød accentflade +
     peptalk i samme højde ved siden af; nyhederne som pille-stribe nedenunder */
  .forside-raekke.med-pep { display: grid; grid-template-columns: 190px minmax(0, 1fr);
    grid-template-areas: "sejr pep" "nyhed nyhed"; gap: 14px; align-items: stretch; }
  .forside-raekke.med-pep .sejr-slot { grid-area: sejr; }
  .forside-raekke.med-pep #opmuntringSlot { grid-area: pep; }
  .forside-raekke.med-pep .nyhedsfelt { grid-area: nyhed; }
  .forside-raekke.med-pep .forside-sejr { width: 100%; height: 100%;
    background: var(--accent-blod); border-radius: 16px; padding: 14px 18px;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
  .forside-raekke.med-pep .forside-sejr .sf-tekst b { font-size: 30px; }
  .forside-raekke.med-pep .opmuntring { margin: 0; height: 100%; align-items: stretch; }
  .forside-raekke.med-pep .opm-hoved { align-self: flex-end; }
  .forside-raekke.med-pep .nyhedsfelt { max-width: none; margin: 0; display: flex;
    align-items: center; gap: 10px; border-radius: 999px; padding: 9px 16px; }
  .forside-raekke.med-pep .nyhedsfelt .nyt-badge { position: static; }
  .forside-raekke.med-pep .nyhedsfelt .ny-overskrift { flex: 0 0 auto; margin: 0; }
  .forside-raekke.med-pep .nyhedsfelt .ny-tekst { flex: 1; margin: 0; }
  .forside-raekke.med-pep .nyhedsfelt::after { content: '›'; color: var(--accent);
    font-size: 18px; line-height: 1; flex-shrink: 0; }

  /* udfordringssiden: foto til venstre, fakta altid synlig til højre -
     fold-ud-pillen er kun til telefon */
  .hero-rk { display: flex; gap: 16px; align-items: flex-start; margin-top: 18px; }
  .hero-rk > .felt-hero, .hero-rk > .ajour-kort { order: -1; flex: 0 0 400px; margin: 0; }
  /* variant A (valgt 28/7): kompakt kort med egen overskrift - kun så højt
     som indholdet; label øverst, værdi under */
  .hero-rk > .fakta-boks { flex: 1; margin-top: 0; border-radius: 16px; padding: 10px 18px; }
  .hero-rk .fakta-titel { display: block; }
  .hero-rk .ft-raekke { flex-direction: column; align-items: flex-start; gap: 3px; }
  .hero-rk .ft-vaerdi { text-align: left; font-size: 14.5px; }
  .fakta-pille { display: none; }
  .fakta-boks[hidden] { display: block; }

  /* burgermenuen: nedfaldsmenu under burgerknappen i stedet for bundsheet -
     højrekanten flugter med indholdets kant (20px padding i #app) */
  /* max(20px, …): på skærme smallere end indholdets max-bredde bliver
     udregningen negativ og ville skubbe menuen ud over kanten */
  #menuDialog { inset: 68px max(20px, calc((100vw - 720px) / 2 + 20px)) auto auto; margin: 0;
    width: 380px; max-height: calc(100vh - 96px); overflow-y: auto;
    border-radius: 22px; padding: 14px 20px 18px;
    box-shadow: 0 14px 44px rgba(35,32,26,0.28); }
  body.rute-admin #menuDialog { right: max(20px, calc((100vw - 960px) / 2 + 20px)); }
  #menuDialog .sheet-handle { display: none; }

  /* statistik (variant 3, 28/7): pille-nav øverst i stedet for "Dyk ned"-listen,
     obs + nøgletal side om side, graf tv. og reaktioner th. - hele overblikket
     på én skærm. Nav'en står på alle statistik-undersider. */
  .stat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .stat-nav a, .stat-nav .aktiv { background: var(--kort); border: 1px solid var(--linje);
    color: var(--muted); border-radius: 999px; padding: 7px 14px; font-size: 13.5px;
    text-decoration: none; }
  .stat-nav .aktiv { background: var(--blaek); color: var(--papir);
    border-color: var(--blaek); font-weight: 700; }
  .stat-side .dyk-ned { display: none; }
  .stat-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px;
    align-items: start; margin-top: 14px; }
  .stat-top .obs-boks { margin-top: 0; }
  .stat-top .ntal { grid-template-columns: 1fr 1fr; margin-top: 0; }
  .stat-top .ntal + .ntal { margin-top: 8px; }
  /* ingen advarsler: nøgletallene fylder hele bredden på én række i stedet
     for at efterlade en tom venstrespalte */
  .stat-top.uden-obs { display: block; }
  .stat-top.uden-obs .ntal-blok { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .stat-top.uden-obs .ntal { display: contents; }
  .stat-midt { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px;
    align-items: start; }
  .stat-midt .stat-diagram { margin-top: 14px; grid-column: 1; }
  .stat-midt #dashNoter { grid-column: 1; }
  .stat-midt .stat-reak { grid-column: 2; grid-row: 1; margin-top: 14px; }
  .stat-midt .stat-reak h2 { margin-top: 2px; }
  /* undersiderne: beslægtede bokse to og to (boksene beholder egen margin-top,
     så rækkerne flugter); på mobil er wrapperen en umærkbar blok */
  .stat-par { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: start; }
}

/* ══════════ Gæt en streg (spilsektionen, footer-fanen "Leg") ══════════
   Bygget efter stilproever/gaetenstreg-mockups.html. HELE sektionen ligger i
   .leg-sektion, som skifter accentfarven til dæmpet petrol: spilpoint må
   aldrig kunne forveksles med stafettens sejre ("point i karantæne").
   Alle klasser herunder er scopet til .leg-sektion, så de ikke kolliderer
   med appens øvrige navne. */

.leg-sektion {
  --accent: #4E8078;
  --accent-moerk: #38625C;
  --accent-blod: #DFEAE4;
  --leg-linje: #B8CFC8;
  --skygge-cta: 0 8px 20px rgba(78,128,120,0.30);
  --skygge-accent: 0 6px 18px rgba(78,128,120,0.18);
}
/* fanen i bunden bærer sektionens farve, når man står i den */
.tab-leg.aktiv { color: #4E8078; }
.leg-sektion input:focus, .leg-sektion select:focus { outline-color: rgba(78,128,120,0.55); }

.leg-sektion .side-under { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.leg-sektion .midt { text-align: center; }
.leg-sektion .k-meta.midt { margin-top: 10px; }

/* ---------- kort ---------- */
.leg-sektion .kort {
  display: block; background: var(--kort); border: 1px solid var(--linje);
  border-radius: 18px; padding: 14px; margin-top: 12px;
  box-shadow: var(--skygge-kort); color: inherit; text-decoration: none;
}
.leg-sektion .kort.fremhaevet { border-color: var(--leg-linje); }
.leg-sektion .kort.blod { background: var(--accent-blod); border-color: var(--leg-linje); }
.leg-sektion .kort.tom-besked { color: var(--muted); font-size: 14px; text-align: center; }
.leg-sektion .k-titel { font-family: var(--font-h); font-weight: 800; font-size: 16px; }
.leg-sektion .k-titel.lille { font-size: 14px; }
.leg-sektion .k-titel.stor { font-size: 20px; margin-top: 6px; }
.leg-sektion .k-meta { font-size: 12.5px; color: var(--muted); }
.leg-sektion .k-meta b { color: var(--blaek); }
.leg-sektion .kort .knap.lille { margin-top: 10px; }

a.leg-kort:active { filter: brightness(0.98); }
.leg-kort.raekke { display: flex; gap: 12px; align-items: center; }
.leg-kort .pokal { width: 54px; height: 54px; flex-shrink: 0; border-radius: 12px;
  background: var(--accent-blod); display: flex; align-items: center;
  justify-content: center; font-size: 24px; }

/* forsidens reklamekort (står i stafettens okker-univers, men med petrol-kant) */
.forside-leg { margin-top: 18px; }
.leg-kort-top { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; }

.leg-sektion .pille, .forside-leg .pille {
  display: inline-block; background: var(--accent-blod); color: var(--accent-moerk);
  font-weight: 700; font-size: 11px; border-radius: 999px; padding: 3px 10px;
  letter-spacing: 0.3px; vertical-align: 2px; }
.leg-sektion .pille.moerk, .forside-leg .pille.moerk { background: var(--accent); color: #fff; }

.live-maerke { display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  font-weight: 700; letter-spacing: 0.4px; color: var(--negativ); margin-bottom: 4px; }
.live-maerke::before { content: ""; width: 8px; height: 8px; border-radius: 99px;
  background: var(--negativ); animation: leg-blink 1.8s ease-in-out infinite; }
@keyframes leg-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .live-maerke::before { animation: none; } }

/* ---------- knapper og genveje ---------- */
.leg-sektion .cta {
  display: block; width: 100%; margin-top: 16px; background: var(--accent);
  color: var(--papir); border: 0; border-radius: 16px; padding: 15px 20px;
  font-family: var(--font-b); font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: var(--skygge-cta); text-align: center; text-decoration: none;
}
.leg-sektion .cta:disabled { opacity: 0.5; box-shadow: none; cursor: default; }
.leg-sektion .knap.blok { margin-top: 10px; }
.leg-sektion .som-link { background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--accent-moerk); }
.leg-sektion .som-link.midt { display: block; margin: 14px auto 0; }
/* "Invitér andre til legen" inde i et leg-kort. Kortet er ét stort link, så
   det her er et span - det ser ud som en tekstknap og har sit eget klik, der
   stopper kortets. Egen linje til højre, så man ikke rammer den, når man ville
   ind i legen. `width: fit-content` + `margin-left: auto` frem for
   `text-align: right`: ellers ville hele linjens bredde være et trykfelt, der
   IKKE gør det samme som kortet - man skal kunne ramme ved siden af. */
.leg-sektion .kort-inviter { display: block; width: fit-content; margin: 10px 0 0 auto;
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--accent-moerk); }
.leg-sektion .kort-inviter:focus-visible { outline: 2px solid var(--accent-moerk); outline-offset: 3px; border-radius: 6px; }
.leg-genveje { display: flex; gap: 10px; margin-top: 12px; }
.leg-genveje > * { flex: 1; text-align: center; background: var(--kort);
  border: 1px solid var(--linje); border-radius: 16px; padding: 12px 8px;
  font-size: 13px; font-weight: 700; color: var(--blaek); text-decoration: none; }

.leg-sektion .note-boks { background: #FFF9E8; border: 1px solid #E8DCB2;
  border-radius: 12px; padding: 10px 12px; font-size: 12.5px; margin-top: 14px;
  color: #6b6045; }
.leg-stribe { margin-bottom: 12px; }

/* ---------- beskedknappen: "Få besked ved nye lege" ----------
   Skæv pille oppe i højre side af oversigten. Pillens FORM er den samme som
   "Meld dig til" på legekortene - den er hånden allerede fortrolig med, og det
   er dét, der får den til at ligne en knap frem for et klistermærke.
   Teglrød mod sektionens grønblå, så den findes af øjet.

   Pladsen er nul pixels høj, og knappen ligger absolut oven på: så skubber den
   ikke overskriften ned, og den sidder samme sted, uanset hvad der står i
   listen nedenunder. Den hænger med vilje IKKE ind over det første legekort -
   ellers ville den ligne noget, der hørte til netop den ene leg. */
.leg-sektion .beskedknap-plads {
  position: relative; height: 0; z-index: 4;
  display: flex; justify-content: flex-end;
  pointer-events: none;                 /* kun selve knappen kan trykkes */
}
.leg-sektion .beskedknap-plads > * { pointer-events: auto; }

/* FAST STØRRELSE, og ikke en pixel større end nødvendigt: målet er sat efter
   den bredeste tekst ("FÅ BESKED" over "- ved nye lege"). De 44 px i højden er
   Apples mindstemål for noget, en finger skal ramme. Teksten ombrydes ikke -
   kan en ny tekst ikke være der, skal teksten kortes ned, ikke knappen gøres
   bredere. Knappen må aldrig skifte form, når teksten skifter. */
.leg-sektion .beskedknap {
  position: absolute; top: 22px; right: 6px;
  width: 142px; height: 44px; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 0 12px;
  background: var(--negativ); color: #FFF6F2;
  font-family: var(--font-h); line-height: 1.1; text-align: left;
  cursor: pointer;
  transform: rotate(4deg);
  box-shadow: 0 3px 9px rgba(0,0,0,.24);
  transition: transform .1s ease, background .2s ease;
}
.leg-sektion .beskedknap:active { transform: rotate(2deg) scale(.97); }
.leg-sektion .beskedknap:focus-visible { outline: 3px solid var(--blaek); outline-offset: 3px; }
.leg-sektion .beskedknap svg { flex-shrink: 0; }
.leg-sektion .beskedknap .b-tekst { min-width: 0; }
.leg-sektion .beskedknap .b1 {
  display: block; font-weight: 800; text-transform: uppercase;
  letter-spacing: .3px; font-size: 13.5px; white-space: nowrap;
}
.leg-sektion .beskedknap .b2 {
  display: block; font-weight: 600; font-size: 10.5px; opacity: .93;
  white-space: nowrap;
}
/* ét ord siger det hele (TILMELDT, AFMELDT, VENT …): én linje, lidt større */
.leg-sektion .beskedknap.enlinje .b1 { font-size: 15px; }

/* klokken ringer, med lang pause imellem - kun når der er noget at lokke med */
@keyframes beskedklokke {
  0%, 70%, 100% { transform: rotate(0); }
  72% { transform: rotate(15deg); }  75% { transform: rotate(-13deg); }
  78% { transform: rotate(10deg); }  81% { transform: rotate(-8deg); }
  84% { transform: rotate(5deg); }   87% { transform: rotate(-3deg); }
  90% { transform: rotate(0); }
}
.leg-sektion .beskedknap.lokker svg {
  transform-origin: 50% 12%;
  animation: beskedklokke 4.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .leg-sektion .beskedknap.lokker svg { animation: none; }
}

.leg-sektion .beskedknap.kvittering { background: var(--medalje-groen, #3F7D57); }
.leg-sektion .beskedknap.arbejder { filter: saturate(.4); }
.leg-sektion .beskedknap.spaerret {
  background: #EFEAE1; color: #6A6355;
  border: 2px dashed #C4BBAA; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* Forklaringsboblen hen over knappen: kommer frem ved tryk, når beskeder ikke
   kan lade sig gøre (appen er ikke gemt på hjemmeskærmen, eller telefonen har
   slået dem fra). Ikke drejet - den skal læses, ikke lokke. */
.leg-sektion .besked-forklaring {
  position: absolute; top: 16px; right: 6px;
  width: 305px; max-width: 94vw; z-index: 6;
  background: var(--kort); color: var(--blaek);
  border: 1px solid var(--linje); border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.26);
  padding: 14px 16px; text-align: left; font-family: var(--font-b);
}
.leg-sektion .besked-forklaring::before {
  content: ''; position: absolute; top: -7px; right: 34px;
  width: 13px; height: 13px; background: var(--kort);
  border-left: 1px solid var(--linje); border-top: 1px solid var(--linje);
  transform: rotate(45deg);
}
.leg-sektion .besked-forklaring .f-titel {
  font-family: var(--font-h); font-weight: 800; font-size: 15px;
  padding-right: 22px; margin-bottom: 5px;
}
.leg-sektion .besked-forklaring p { font-size: 13px; line-height: 1.45; }
.leg-sektion .besked-forklaring .f-trin {
  font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-top: 7px;
}
.leg-sektion .besked-forklaring .f-knapper { display: flex; gap: 8px; margin-top: 12px; }
.leg-sektion .besked-forklaring .f-luk {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0; font-size: 17px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 4px;
}

/* Opgav den forrige tegner sin tur, står forklaringen øverst på klar-skærmen */
.leg-opgav { margin-bottom: 12px; }
.leg-tilskuer { margin-bottom: 12px; }

/* ---------- deltagere ---------- */

/* Nærværs-prikken: rød som udgangspunkt, grøn når stemplet er friskt. Den
   sidder også i "Stillingen", derfor den lille højremargin. */
.naervaer-bolle { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0;
  background: #c94a3f; box-shadow: 0 0 0 2px var(--kort, #fff); margin-right: 2px;
  display: inline-block; vertical-align: middle; }
.naervaer-bolle.her { background: #2f9e5f; }
.prik-forklaring { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.leg-sektion .deltagere { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.deltager-chip { display: flex; align-items: center; gap: 6px; background: var(--stribe1);
  border: 1px solid var(--skille); border-radius: 999px; padding: 3px 10px 3px 3px;
  font-size: 12px; font-weight: 600; }
.leg-sektion .avatar.mini { width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  background: var(--accent-blod); color: var(--accent-moerk); font-size: 10px;
  font-weight: 700; display: flex; align-items: center; justify-content: center; }
.leg-sektion .avatar.stor { width: 64px; height: 64px; border-radius: 999px; margin: 0 auto;
  background: var(--accent-blod); color: var(--accent-moerk); font-size: 22px;
  font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--accent); }

/* ---------- ur og forløb ---------- */
.leg-sektion .ur { font-family: var(--font-h); font-weight: 800; font-size: 40px;
  text-align: center; letter-spacing: 1px; margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.leg-sektion .ur.lille { font-size: 26px; margin: 0; }
.leg-sektion .ur.snart { color: var(--negativ); }
.leg-sektion .ur-label { text-align: center; font-size: 11.5px; color: var(--muted); }
.leg-sektion .ur-kort { text-align: center; }
.leg-sektion .fase-bar { height: 6px; border-radius: 99px; background: var(--track);
  margin: 12px 0 2px; overflow: hidden; }
.leg-sektion .fase-bar i { display: block; height: 100%; width: 100%;
  background: var(--accent); border-radius: 99px; transition: width 0.25s linear; }
.leg-sektion .stor-ikon { font-size: 38px; line-height: 1; }
.leg-sektion .din-tur { padding: 24px 16px; border-color: var(--leg-linje); }
.leg-sektion .din-tur .k-meta { margin-top: 6px; }

/* Puljen: tallet der falder, mens der tegnes. Det skal kunne ses på afstand
   uden at stjæle billedet fra uret - derfor et stort tal i accentfarven på
   blød bund, ikke endnu et ur. */
.leg-sektion .pulje-linje { display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 6px 13px; border-radius: 999px;
  background: var(--accent-blod); border: 1px solid var(--leg-linje);
  font-size: 12.5px; color: var(--muted); text-align: left; }
.leg-sektion .pulje-tal { font-family: var(--font-h); font-weight: 800; font-size: 22px;
  line-height: 1; color: var(--accent-moerk); font-variant-numeric: tabular-nums; }
.leg-sektion .pulje-laast { color: var(--accent-moerk); }

/* ---------- tegnerens skærm ---------- */
.leg-sektion .ordet { font-family: var(--font-h); font-weight: 800; font-size: 34px;
  text-align: center; margin: 4px 0 2px; letter-spacing: 0.5px; word-break: break-word; }
/* Fladen SKAL se ud som noget man trykker på - accentfarvet kant og tekst
   frem for den grå pladsholder, den lignede før. */
/* Loftet på højden: uden det bliver fladen lige så høj som spalten er bred,
   og på en iPad havner send-knappen under folden. */
.foto-flade { position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  aspect-ratio: 4 / 3; max-height: 38vh; margin-top: 14px; border: 1.5px dashed var(--accent);
  border-radius: 14px; background: var(--track); color: var(--accent-moerk);
  font-size: 13.5px; font-weight: 700; overflow: hidden; cursor: pointer; }
.foto-flade .foto-ikon { font-size: 26px; line-height: 1; }
/* Billedet lægger sig OVER fladen, så teksten kan blive stående nederst som
   den lille påmindelse om at man kan tage et nyt. */
.foto-flade img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.foto-flade.har-billede { border-style: solid; }
.foto-flade.har-billede .foto-ikon { display: none; }
.foto-flade.har-billede .foto-tekst { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 7px; background: rgba(0, 0, 0, 0.55); color: #fff; text-align: center;
  font-size: 12.5px; }
.foto-flade.arbejder { opacity: 0.6; }
.leg-sektion .regel-liste { font-size: 12.5px; color: var(--muted); margin: 12px 0 0 2px; }
/* Ligger listen i sit eget kort, sørger kortets egen luft for afstanden - så
   skal der kun være et lille spring ned fra overskriften. */
.leg-sektion .kort .regel-liste { margin: 8px 0 0; }
.leg-sektion .regel-liste li { margin: 3px 0 3px 18px; }

/* ---------- gættefasen ---------- */
.leg-tegning { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block;
  margin-top: 8px; border-radius: 14px; background: var(--track); cursor: zoom-in;
  /* loft på mobil: tegningen må ikke fylde skærmen, så gættestrømmen
     forsvinder under kanten (mockup H: den skrumper når strømmen vokser) */
  max-height: 40vh; }
.leg-tegning.tom { display: flex; align-items: center; justify-content: center;
  color: var(--svag); font-size: 13px; font-weight: 600; cursor: default; }
/* Kategori til venstre, nedtælling til højre - og bogstavfelterne i deres
   EGEN række under. Med felterne i samme linje blev den ekstra række (og et
   ur der hoppede ned) udløst allerede ved 8 bogstaver på en smal telefon. */
.ord-linje { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px; }
.ord-linje + .ordfelter { margin-top: 8px; }
/* Kategorien SKAL kunne ses med et øjekast, mens man gætter - som grå
   småtekst under tegningen blev den overset. Pillen står derfor forrest i
   linjen med bogstavfelterne. */
.kat-pille { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 5px 12px; border-radius: 999px; background: var(--accent-blod);
  color: var(--accent-moerk); font-family: var(--font-h); font-weight: 800;
  font-size: 13px; letter-spacing: 0.04em; }
.ordfelter { display: flex; gap: 5px; flex-wrap: wrap; }
.ordfelter span { width: 22px; height: 30px; border-bottom: 3px solid var(--dashed);
  display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--font-h); font-weight: 800; font-size: 19px; }

.stroem { margin-top: 12px; max-height: 46vh; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.stroem .gaet { display: flex; align-items: baseline; gap: 7px; padding: 5px 0;
  border-bottom: 1px solid var(--skille); font-size: 14px; }
.stroem .gaet .navn { font-weight: 700; font-size: 12px; color: var(--muted); flex-shrink: 0; }
.stroem .gaet .ordtxt { word-break: break-word; }
.stroem .gaet.rigtigt { background: #E7F0E7; border-radius: 10px; padding: 8px 10px;
  border-bottom: 0; margin: 4px 0; }
.stroem .gaet.rigtigt .ordtxt { color: var(--positiv); font-weight: 700; }
.stroem .gaet.afvist { border-bottom: 0; color: var(--negativ); font-size: 12.5px; }

.gaet-input { display: flex; gap: 8px; margin-top: 10px; }
.gaet-input .leg-felt { flex: 1; }
.gaet-input .send { width: 48px; flex-shrink: 0; border: 0; border-radius: 12px;
  background: var(--accent); color: #fff; font-size: 19px; cursor: pointer; }

/* ---------- lister, resultat og album ---------- */
.leg-sektion .liste-raekke { display: flex; align-items: center; gap: 10px;
  padding: 9px 2px; border-bottom: 1px solid var(--skille); font-size: 14px; }
.leg-sektion .liste-raekke:last-child { border-bottom: 0; }
.leg-sektion .liste-raekke .nr { width: 20px; font-weight: 800; font-family: var(--font-h);
  color: var(--muted); }
.leg-sektion .liste-raekke .point { margin-left: auto; font-weight: 800;
  font-family: var(--font-h); color: var(--accent-moerk); }

.vinder-felt { text-align: center; padding: 20px 0 4px; }
.vinder-felt h2 { font-family: var(--font-h); font-size: 24px; margin-top: 10px; }
.vinder-felt .konfetti { font-size: 20px; letter-spacing: 6px; }

.leg-sektion .album { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.leg-sektion .album img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: 12px; background: var(--track); cursor: zoom-in; }
.leg-sektion .album .a-ord { font-size: 12px; font-weight: 700; margin-top: 4px; }
.leg-sektion .album .a-meta { font-size: 11px; color: var(--muted); }

/* ---------- opret-formularen ---------- */
.leg-formular .segment { display: flex; gap: 6px; }
.leg-formular .segment button { flex: 1; font-family: var(--font-b); font-size: 13px;
  font-weight: 700; padding: 10px 4px; border: 1px solid var(--linje);
  border-radius: 12px; background: var(--kort); color: var(--muted); cursor: pointer; }
.leg-formular .segment button.valgt { background: var(--accent); border-color: var(--accent);
  color: #fff; }
/* Dag og klokkeslæt i hvert sit felt - side om side, så de læses som ét valg.
   Dagen får mest plads: en dansk dato fylder mere end et klokkeslæt. */
.tidsvalg { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; }
.tidsvalg .felt-navn { display: block; font-family: var(--font-b); font-size: 11px;
  font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.leg-formular .k-meta { margin-top: 6px; }

/* ---------- "en runde mere?" - afstemningen efter sidste runde ----------
   Én fritstående knap, ikke et kort: den skal kunne ses med det samme under
   rundens afgørelse, som selv er et kort. Alle regler har .leg-sektion med,
   ellers vinder sektionens egne kort-regler. */
/* baseline, ikke center: uret er mindre end teksten, og centreres de to som
   bokse, kommer tallene til at hænge under skriften */
.leg-sektion .stem-knap {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  width: 100%; margin-top: 12px; padding: 17px 14px; border: none;
  border-radius: 16px; font-family: var(--font-h); font-size: 18px;
  font-weight: 800; line-height: 1.2; text-align: center; cursor: pointer;
  background: var(--accent); color: #fff; box-shadow: var(--skygge-cta);
}
.leg-sektion .stem-knap .ur { font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 700; opacity: .85; }
.leg-sektion .stem-knap .ur::before { content: '⏱ '; }
/* trykket: knappen er død, og tællingen står i stedet for opfordringen */
.leg-sektion .stem-knap.venter, .leg-sektion .stem-knap.faerdig {
  flex-direction: column; align-items: center; gap: 3px; font-size: 16px; padding: 15px 14px;
  background: var(--accent-blod); color: var(--accent-moerk);
  box-shadow: none; cursor: default;
}
.leg-sektion .stem-knap.venter { border: 2px solid var(--leg-linje); }
.leg-sektion .stem-knap.faerdig { border: 2px solid var(--accent); }
.leg-sektion .stem-knap.venter .ur,
.leg-sektion .stem-knap.faerdig .ur { font-size: 13px; opacity: 1; }
.leg-sektion .stem-knap.venter .ur { color: var(--muted); }
/* ingen stemmeret (man har ikke legen fremme) - så er der intet at trykke på */
.leg-sektion .stem-info { margin-top: 12px; padding: 16px 14px; border-radius: 16px;
  text-align: center; background: var(--accent-blod); color: var(--accent-moerk);
  font-family: var(--font-h); font-size: 15px; line-height: 1.35; }
.leg-sektion .stem-info-und { font-family: var(--font-b); font-size: 12.5px;
  font-weight: 700; color: var(--muted); margin-top: 4px; }
/* ---------- legesidens faste ramme ----------
   Rammen har fem rum, og markup er den SAMME i alle faser - kun fase-klassen
   på rammen skifter, og så flytter reglerne herunder rummene på plads:

     .leg-indhold   fasens egen flade (bygges om ved faseskift)
     .leg-hoejre    beholder for de to næste; opløses under 950 px
       .leg-facit   rundens afgørelse
       .leg-snakhus snakken - bygges én gang og bygges ALDRIG om
     .leg-stilling  stillingen

   Snakhuset er grunden til det hele: fordi fladen aldrig tages ud af siden,
   overlever et halvskrevet indlæg, markøren, rullepositionen og tastaturet et
   faseskift (issue #34). Derfor må ingen regel her nogensinde flytte snakken
   ved at bygge den om - kun ved at flytte rummet. */
.leg-facit:empty, .leg-stilling:empty, .leg-snakhus:empty { display: none; }
/* Mens der gættes, skjules snakken HELT - der skal kun være ét felt på
   skærmen, og det er gættefeltet. Fladen bliver stående i DOM'en med det, man
   havde skrevet; den vises bare ikke, før runden er afgjort. */
.leg-ramme.uden-snak .leg-snakhus { display: none; }
.leg-facit > .kort, .leg-stilling > .kort { margin-top: 14px; }

/* Den nye afgørelse: ordet fylder, og HVEM der gættede står som sin egen
   linje - før lå navnet i en overskrift sammen med ordet og forsvandt i det. */
.facit-ord { font-family: var(--font-h); font-weight: 800; font-size: 30px;
  letter-spacing: 1px; margin-top: 2px; }
.facit-vinder { display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 7px 15px; border-radius: 999px;
  background: var(--accent-blod); border: 1px solid var(--leg-linje);
  font-size: 15px; font-weight: 700; }
.facit-flueben { color: var(--positiv); font-weight: 800; }
.facit-vinder b { font-family: var(--font-b); }
.leg-sektion .facit .k-meta { margin-top: 8px; }

/* Telefon og iPad på højkant: én søjle i fast rækkefølge. */
@media (max-width: 949px) {
  .leg-hoejre { display: contents; }
  .leg-ramme { display: flex; flex-direction: column; }
  .leg-indhold { order: 1; }
  .leg-facit { order: 2; }
  .leg-stilling { order: 3; }
  .leg-snakhus { order: 4; }
  /* Resultatsiden vender om: stillingen og snakken er hovedsagen, albummet
     kan man bladre i bagefter - samme rækkefølge som før rammen kom. */
  .fase-resultat .leg-indhold { order: 5; }
}

/* ---------- snakken: den sammenklappelige flade nederst på legesiden ----------
   Bjælken er altid synlig, kroppen kun når man har foldet ud. Den ligger
   nederst i ALLE faser (også på store skærme) - lagde man den i en kolonne
   ved siden af gættefeltet, ville to skrivefelter stå få pixels fra hinanden,
   og snakken ville flytte sig, hver gang fasen skiftede. */
.snak { margin-top: 14px; border: 1px solid var(--leg-linje); border-radius: 14px;
  background: var(--kort); overflow: hidden; }
.snak-bjaelke { width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-h); font-weight: 800; font-size: 14px; color: var(--blaek); }
.snak-titel { margin-right: auto; }
.snak-nye { background: var(--accent); color: #fff; font-family: var(--font-b);
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.snak-pil { color: var(--muted); transition: transform .15s ease; }
.snak.aaben .snak-pil { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .snak-pil { transition: none; } }
.snak-krop { padding: 0 12px 12px; border-top: 1px solid var(--skille); }
/* Loftet er både i vh og px: på en høj skærm (iPad på højkant) ville 34 vh
   alene blive 400 px snak, og så skulle man rulle for at se gættefeltet. */
.snak-liste { max-height: min(34vh, 260px); overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding-top: 10px; }
.snak-besked { display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; margin-bottom: 8px; }
.snak-besked.min { align-items: flex-end; }
.snak-besked .navn { font-size: 11px; font-weight: 700; color: var(--muted); padding: 0 4px; }
.snak-besked .boble { max-width: 85%; background: var(--papir);
  border: 1px solid var(--linje); border-radius: 14px; padding: 7px 11px;
  font-size: 14px; line-height: 1.35; word-break: break-word; }
.snak-besked.min .boble { background: var(--accent-blod); border-color: var(--leg-linje); }
/* Farve pr. deltager (js: snakFarve udleder den af bruger-id'et). Siden siger
   mig vs. de andre; farven siger HVEM af de andre. Der er INGEN grønne toner i
   paletten med vilje: mine egne bobler er petrolgrønne, og en olivengrøn nabo
   lignede dem for meget. Teksten er altid blæk på lys bund. */
   Rækkefølgen er ikke tilfældig: de fire første er de mest forskellige, og
   de fleste lege har fire-fem med. */
.snak-besked.f0 .boble { background: #E3EAF2; border-color: #CEDCE9; }
.snak-besked.f0 .navn  { color: #47637F; }
.snak-besked.f1 .boble { background: #F7E3E0; border-color: #EBCFCA; }
.snak-besked.f1 .navn  { color: #9E5648; }
.snak-besked.f2 .boble { background: #F5EAD1; border-color: #E7D8B6; }
.snak-besked.f2 .navn  { color: #866620; }
.snak-besked.f3 .boble { background: #EBE5F3; border-color: #D9D0E5; }
.snak-besked.f3 .navn  { color: #6A578B; }
.snak-besked.f4 .boble { background: #E7E5E0; border-color: #D5D1C8; }
.snak-besked.f4 .navn  { color: #6F6A60; }
.snak-besked.f5 .boble { background: #F8E5D3; border-color: #EAD3BB; }
.snak-besked.f5 .navn  { color: #97613A; }
.snak-besked.f6 .boble { background: #E2E8EA; border-color: #CCD8DB; }
.snak-besked.f6 .navn  { color: #4F6A72; }
.snak-besked.f7 .boble { background: #F1E2EC; border-color: #E1CCDA; }
.snak-besked.f7 .navn  { color: #85557A; }
/* Reaktioner (#38): én pr. medlem pr. besked. Mærkerne hviler på boblens
   nederste hjørne som i Messenger (variant A, Steens valg 8/8) - derfor
   position: relative på beskeden og ekstra luft (med-reak) under dem med
   reaktioner, så mærkerne ikke lægger sig over næste afsendernavn. */
.snak-besked { position: relative; }
.snak-besked.med-reak { margin-bottom: 22px; }
.snak-reak { position: absolute; bottom: -14px; left: 10px; display: flex; gap: 3px; }
.snak-besked.min .snak-reak { left: auto; right: 10px; }
.snak-reak span { background: var(--kort); border: 1px solid var(--linje);
  border-radius: 99px; padding: 1px 7px; font-size: 12px; line-height: 1.5;
  box-shadow: var(--skygge-kort); white-space: nowrap; }
.snak-reak span.egen { border-color: var(--accent); background: var(--accent-blod); }
.snak-reak b { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 2px; }
/* Vælgeren folder ud under boblen ved tryk; ens nuværende valg er markeret.
   Holdes bevidst nedtonet (34 px-knapper, Steens ønske 8/8), så den ikke
   skygger for snakken - stadig fingervenlig. Har beskeden allerede mærker,
   skubbes vælgeren ned under overlappet. */
.snak-besked.med-reak .snak-vaelger { margin-top: 18px; }
.snak-vaelger { display: flex; gap: 2px; margin-top: 4px; padding: 3px 5px;
  background: var(--kort); border: 1px solid var(--linje); border-radius: 99px;
  box-shadow: var(--skygge-kort); width: max-content; }
.snak-besked.min .snak-vaelger { align-self: flex-end; }
.snak-vaelger button { width: 34px; height: 34px; border: 0; background: none;
  font-size: 19px; border-radius: 50%; cursor: pointer; }
.snak-vaelger button.valgt { background: var(--accent-blod);
  box-shadow: inset 0 0 0 2px var(--accent); }
.snak .boble { cursor: pointer; }
.snak-input { display: flex; gap: 8px; margin-top: 8px; }
.snak-input .leg-felt { flex: 1; }
.snak-input .send { width: 48px; flex-shrink: 0; border: 0; border-radius: 12px;
  background: var(--accent); color: #fff; font-size: 19px; cursor: pointer; }
.snak-spaerret { margin-top: 10px; }

/* ---------- store skærme (samme princip som resten af appen, issue #7) ---------- */
@media (min-width: 700px) {
  /* oversigt og arkiv: kort i kolonner i stedet for én lang liste */
  .leg-sektion .kort.leg-kort { margin-top: 12px; }
  .leg-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0 12px; align-items: start; }
  /* formularer og fokus-øjeblikke breder sig ikke - afstemningen er et af
     dem: uden loft bliver knappen 350 px bred og ligner en fejl */
  .leg-formular, .leg-sektion .din-tur,
  .leg-sektion .stem-knap, .leg-sektion .stem-info { max-width: 460px; margin-left: auto; margin-right: auto; }
  .leg-sektion .album { grid-template-columns: repeat(3, 1fr); }
  /* boblerne må ikke strække sig over hele bredden - en kort bemærkning i en
     700 px bred boble ligner en fejl, ikke en besked */
  .snak-besked .boble { max-width: 460px; }
  /* resultatsiden: pointliste ved siden af albummet - og under listen står
     snakken, som lever en time endnu. Spalten er 280 px frem for 240, så
     boblerne har plads at stå på; listen beholder sit 260 px-loft, for siden
     ruller alligevel med albummet. */
  .resultat-flade { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
  .resultat-flade .kort { margin-top: 0; }
  .resultat-flade .afsnit-titel { margin-top: 0; }
  .resultat-venstre { display: flex; flex-direction: column; gap: 16px; }
}
.gaet-besked { font-size: 12px; color: var(--negativ); margin-top: 6px; min-height: 16px; }
/* ---------- legesidens ramme på brede skærme ----------
   Fra 700 px op får rammen sine to opsætninger: på højkant ligger rummene
   under hinanden (med stillingen ved siden af uret, hvor der er plads), på
   tværs står fladen til venstre og afgørelsen + snakken til højre. */
@media (min-width: 700px) {
  /* Det, der står OVER fladen (topbjælke + overskrift), og som dens højde
     skal trækkes fra vinduet. "Vis som medlem" lægger sin egen bjælke oveni,
     så den skal tælle med - ellers stikker knappen ud under kanten. */
  .fyld-vindue { --over-fladen: 140px; }
  body.vis-som .fyld-vindue { --over-fladen: 179px; }
  /* Legesiden er den ene side i appen uden fanebjælke i bunden, så den plads,
     der ellers holdes fri til den, kan bruges her. */
  #app:has(.fyld-vindue) { padding-bottom: 20px; }

  /* Snakken strækker sig til bunden af sit rum i stedet for at have et fast
     loft - ellers stopper den efter de få beskeder, der er. */
  .fyld-vindue .snak { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  /* Klappet sammen skal bjælken kun fylde sin egen højde - ellers bliver der
     et tomt felt tilbage under den. */
  .fyld-vindue .snak:not(.aaben) { flex: 0 0 auto; }
  .fyld-vindue .snak-krop { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  /* Listen må gerne vokse, men aldrig klemmes væk: uden et gulv kan den
     skrumpe til nul og efterlade en halv snak-boks. */
  .fyld-vindue .snak-liste { flex: 1; max-height: none; min-height: 120px; }
}

/* ---------- iPad på HØJKANT (700-949 px) ----------
   Der er bredde nok til to spalter, men ikke til at snakken kan stå ved siden
   af: sat i tre spalter bliver alting for smalt. I stedet deles den øverste
   række, og snakken lægger sig i fuld bredde nedenunder. */
@media (min-width: 700px) and (max-width: 949px) {
  .leg-ramme.fyld-vindue { height: calc(100dvh - var(--over-fladen)); min-height: 600px; }
  .leg-ramme > .leg-indhold, .leg-facit, .leg-stilling { flex: 0 0 auto; }
  .leg-snakhus { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .leg-snakhus > .snak { margin-top: 18px; }

  /* Ventefasen: uret til venstre, stillingen i det felt der ellers stod tomt,
     og snakken i fuld bredde nedenunder. */
  .fase-vente.leg-ramme { display: grid; grid-template-columns: 1fr 1fr;
    grid-template-areas: "indhold stilling" "snak snak";
    grid-template-rows: auto 1fr; gap: 0 18px; }
  .fase-vente .leg-indhold { grid-area: indhold; }
  .fase-vente .leg-stilling { grid-area: stilling; }
  .fase-vente .leg-snakhus { grid-area: snak; }
  .fase-vente .leg-indhold > .kort, .fase-vente .leg-stilling > .kort { margin-top: 0; }

  /* Tegnerens egen skærm: ordet og reglerne til venstre, kameraet og den
     grønne knap til højre, snakken nedenunder. */
  .fase-tegner .tegn-flade { display: grid; grid-template-columns: 1fr 1fr;
    gap: 18px; align-items: stretch; }
  .fase-tegner .tf-info > :first-child { margin-top: 0; }
  /* Kameraet strækkes til samme højde som info-spalten, så de to ender i
     samme linje i stedet for at efterlade et trin. */
  .fase-tegner .tf-foto { display: flex; flex-direction: column; }
  .fase-tegner .tf-foto .foto-flade { flex: 1; margin-top: 0;
    aspect-ratio: auto; max-height: none; min-height: 220px; }
  .fase-tegner .tf-foto .cta { margin-top: 10px; }

  /* Gættefasen: tegningen øverst, midt for, med gættene under. Snakken er
     væk, så der er plads til at vise tegningen stort. */
  .fase-gaet .leg-indhold { display: flex; flex-direction: column; }
  .fase-gaet .gaette-venstre { display: flex; justify-content: center; }
  .fase-gaet .leg-tegning { height: 40vh; width: auto; max-width: 100%;
    aspect-ratio: 4 / 3; margin-top: 0; }
  .fase-gaet .gaette-hoejre { display: flex; flex-direction: column; }
  .fase-gaet .stroem { flex: 1; }

  /* Afsløringen har fire ting at vise på én gang, så her bruges bredden:
     tegning og gæt deler den øverste række, afgørelse og stilling den næste,
     og snakken ligger i fuld bredde nederst. Højden er et GULV her, ikke et
     loft: låser man den til vinduet, får snakken - den eneste der må vokse -
     nul tilbage og forsvinder. */
  .fase-afsloeret.leg-ramme { display: grid; grid-template-columns: 1fr 1fr;
    grid-template-areas: "indhold indhold" "facit stilling" "snak snak";
    grid-template-rows: auto auto 1fr; gap: 0 18px;
    height: auto; min-height: calc(100dvh - var(--over-fladen)); }
  .fase-afsloeret .leg-indhold { grid-area: indhold; display: grid;
    grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .fase-afsloeret .leg-facit { grid-area: facit; }
  .fase-afsloeret .leg-stilling { grid-area: stilling; }
  .fase-afsloeret .leg-snakhus { grid-area: snak; flex: 0 0 auto; }
  .fase-afsloeret .leg-tegning { height: 32vh; width: auto; max-width: 100%;
    aspect-ratio: 4 / 3; margin-top: 0; }
  .fase-afsloeret .gaette-venstre { display: flex; justify-content: center; }
  .fase-afsloeret .gaette-hoejre > :first-child { margin-top: 0; }
  .fase-afsloeret .stroem { max-height: 26vh; }
  /* Snakken beholder sin egen højde her - strakt ville den blive klemt væk. */
  .fase-afsloeret .snak, .fase-afsloeret .snak-krop { flex: 0 0 auto; display: block; }
  .fase-afsloeret .snak-liste { flex: none; max-height: min(34vh, 280px); }
}

/* ---------- iPad på tværs og Mac (950+): fladen | afgørelse + snak ----------
   Grænsen ligger med VILJE over en iPad på højkant (820 px bred). På højkant
   er der 1180 px højde at fylde; to spalter gør kun tegningen mindre. */
@media (min-width: 950px) {
  /* Legesiden må fylde mere end resten af appen: tegning, gæt og snak skal
     kunne stå side om side, og 720 px gør alle tre for smalle. */
  body.rute-leg #app, body.rute-leg .tabbar { max-width: 1000px; }

  /* Lobbyen har ingen snak - der deler siden sig som før: uret, holdet og
     tilmeldingen til venstre, forløbet og de sjældne handlinger til højre. */
  .leg-flade { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .leg-flade > div > :first-child { margin-top: 0; }

  /* Rammen: fasens flade til venstre, afgørelsen og snakken til højre. Højre
     spalte spænder BEGGE rækker, så snakken begynder i toppen i stedet for at
     vente på, at venstre side er forbi - og afgørelsen lægger sig ind over
     den, når runden er afgjort. */
  .leg-ramme.fyld-vindue { display: grid; grid-template-columns: 1.25fr 1fr;
    grid-template-areas: "indhold hoejre" "stilling hoejre";
    grid-template-rows: auto 1fr; gap: 0 18px; align-items: start;
    height: calc(100dvh - var(--over-fladen)); min-height: 520px; }
  .leg-ramme > .leg-indhold { grid-area: indhold; min-height: 0;
    display: flex; flex-direction: column; }
  .leg-ramme > .leg-stilling { grid-area: stilling; }
  .leg-hoejre { grid-area: hoejre; align-self: stretch; display: flex;
    flex-direction: column; min-height: 0; }
  .leg-snakhus { flex: 1; display: flex; min-height: 0; }
  .leg-snakhus > .snak { margin-top: 14px; }
  /* Er der ingen afgørelse, skal snakken ikke stå og vente på et tomt felt. */
  .leg-facit:empty + .leg-snakhus > .snak { margin-top: 0; }
  .leg-facit > .kort { margin-top: 0; }
  .leg-indhold > :first-child { margin-top: 0; }
  .snak-liste { max-height: 20vh; }

  /* Ventefasen: uret og stillingen skal følges ad MIDT på skærmen. De tomme
     1fr-rækker over og under gør det - luften fordeles, og snakken spænder
     dem alle, så den stadig fylder hele højre side. Uden dem stod uret i
     toppen og stillingen klistret i bunden med et hul imellem. */
  .fase-vente.leg-ramme {
    grid-template-areas: ". hoejre" "indhold hoejre" "stilling hoejre" ". hoejre";
    grid-template-rows: 1fr auto auto 1fr; }
  .fase-vente .leg-stilling > .kort { margin-top: 18px; }

  /* Tegnerens skærm: ALT han skal handle på ligger i venstre spalte - ordet
     og uret øverst, tegnefladen og den grønne knap nederst - og hele højre
     spalte er snak. Højden er styret, så knappen altid kan nås uden at rulle. */
  .fase-tegner .tegn-flade { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .fase-tegner .tf-info > :first-child { margin-top: 0; }
  .fase-tegner .tf-foto { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .fase-tegner .som-link.midt { margin: 10px auto 0; }
  .fase-tegner .kort .ordet { font-size: 28px; }
  .fase-tegner .kort .ur { font-size: 32px; }
  .fase-tegner .kort { padding: 12px; }
  .fase-tegner .foto-flade { flex: 1; min-height: 120px; max-height: none;
    aspect-ratio: auto; margin-top: 12px; }
  .fase-tegner .cta { margin-top: 10px; }

  /* Gættefasen: snakken er væk, så fladen får HELE bredden - tegningen i sin
     rigtige form til venstre, og alt man handler på samlet til højre. */
  .fase-gaet.leg-ramme { grid-template-areas: "indhold indhold";
    grid-template-rows: 1fr; align-items: stretch; }
  .fase-gaet .leg-indhold { display: grid; grid-template-columns: 1.25fr 1fr;
    gap: 18px; align-items: stretch; }
  .fase-gaet .gaette-venstre { display: flex; align-items: center;
    justify-content: center; min-height: 0; }
  .fase-gaet .leg-tegning { height: 100%; width: auto; max-width: 100%;
    aspect-ratio: 4 / 3; margin-top: 0; }
  .fase-gaet .gaette-hoejre { display: flex; flex-direction: column; min-height: 0; }
  .fase-gaet .gaette-hoejre > .ord-linje { margin-top: 0; }
  /* Rammen om gættene: uden den ser højre spalte tom ud, indtil der er faldet
     en håndfuld gæt. */
  .fase-gaet .stroem { flex: 1; min-height: 100px; max-height: none;
    border: 1px solid var(--skille); border-radius: 12px; padding: 4px 10px; }

  /* Afsløringen: tegningen og gættene deler venstre spalte, stillingen står
     under dem, og afgørelsen ligger øverst til højre over snakken - der
     kigger man hen, når runden er slut. Vinduets højde er et gulv: med otte
     deltagere er der mere end en skærmfuld, og så skal siden vokse og rulle,
     ellers klemmes sporene, og stillingen lægger sig oven i gættene. */
  .fase-afsloeret.leg-ramme { height: auto;
    min-height: calc(100dvh - var(--over-fladen)); }
  .fase-afsloeret .leg-indhold { display: grid; grid-template-columns: 1.1fr 1fr;
    gap: 18px; align-items: start; }
  .fase-afsloeret .leg-tegning { aspect-ratio: 4 / 3; height: 34vh;
    width: auto; max-width: 100%; margin-top: 0; }
  .fase-afsloeret .gaette-venstre { display: flex; justify-content: center; }
  .fase-afsloeret .gaette-hoejre > :first-child { margin-top: 0; }
  .fase-afsloeret .stroem { max-height: 26vh; margin-top: 0; }
  .fase-afsloeret .leg-stilling > .kort { margin-top: 18px; }
  /* Stillingen står strammere inde i legen end på en side for sig - otte
     deltagere skal kunne ses uden at fylde en halv skærm. */
  .leg-stilling .liste-raekke { padding: 7px 0; font-size: 14px; }

  /* Resultatsiden: stillingen og snakken i en smal venstre spalte, albummet
     i den brede til højre - som før rammen kom. */
  .fase-resultat.leg-ramme { display: grid; grid-template-columns: 280px 1fr;
    grid-template-areas: "stilling indhold" "hoejre indhold";
    grid-template-rows: auto 1fr; gap: 0 16px; align-items: start; }
  .fase-resultat .leg-indhold { grid-area: indhold; }
  .fase-resultat .leg-stilling > .kort { margin-top: 0; }
  .fase-resultat .afsnit-titel { margin-top: 0; }
  .fase-resultat .leg-snakhus > .snak { margin-top: 16px; }
}

/* ====== KANARIEFUGL - SKAL STÅ ALLERSIDST I FILEN ======
   Boot-vagten i index.html læser --bs-css-ok på #app. Fordi reglen står
   sidst, forsvinder den hvis filen er afkortet (issue #31) eller aldrig
   hentet - og så viser vagten redningsskærmen i stedet for en bar side.
   Flyt den aldrig, og tilføj aldrig regler efter den. */
#app { --bs-css-ok: 1; }