/* ============ Fonte (fra mockup, virker offline) ============ */
@font-face {
  font-family: 'Gloock'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/gloock-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gloock'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/gloock-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/schibsted-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/schibsted-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============ Tokens ============ */
:root {
  --bg: #FBF5EE;
  --ink: #2E2620;
  --soft: #7A6E61;
  --line: #EDE2D4;
  --muted: #A69684;
  --faint: #C4B49E;
  --dash: #D8CBBB;
  --dash2: #E3D6C4;
  --chip: #F3EADF;
  --sand: #EAE0D3;
  --sand-ink: #8C8272;
  --green: #55B685;
  --green-d: #3E8A66;
  --green-p: #DDF1EA;
  --amber: #F2B34C;
  --amber-d: #B07E24;
  --amber-p: #F5E9D2;
  --red: #D96257;
  --red-d: #A6443B;
  --red-p: #F8DFDB;
  --fail: #C9B8A4;
  --fail-d: #8C7A64;
  --warm-ink: #9A8468;
  --serif: 'Gloock', Georgia, serif;
  --sans: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ============ Dagsform — nye tokens (dev/DAGSFORM.md §2.2) ============
     Eksisterende tokens ovenfor dækker allerede mockuppens --surface/--text/--border-familie
     (--bg, --ink, --soft, --muted, --faint, --line) — de omdøbes ikke. Herunder kun det, der
     reelt mangler: sidebaggrund bag kort, hvide/dæmpede/varme kortflader, progressionsorange,
     kategori-tripler og de nye radius-skalaer. */
  --page: #F3EFE7;
  --card-white: #FFFFFF;
  --card-muted: #F5F1EA;
  --card-warm: #EFE9DE;

  --brand: #D98A4B;
  --brand-light: #EFCFA8;
  --brand-dark: #8A5A24;

  --spil-bg: #E4E1F5;  --spil-accent: #5B4FB5;  --spil-ink: #26215C;
  --gron-bg: #DCEBD4;  --gron-accent: #5C8A4A;  --gron-ink: #173404;
  --gul-bg:  #F3E4CE;  --gul-accent:  #B4802E;  --gul-ink:  #412402;
  --rosa-bg: #F0DCE3;  --rosa-accent: #B0567A;  --rosa-ink: #4B1528;
  --bla-bg:  #E3EDF3;  --bla-accent:  #3D7A9E;  --bla-ink:  #123952;
  --sand-bg: #EFE9DE;  --sand-accent: #8A7A5E;

  /* --ok/--ok-bg dækkes af eksisterende --green/--green-p; kun --ok-ink mangler. */
  --ok-ink: #2F5416;

  --r-card: 16px;
  --r-inner: 14px;
  --r-item: 12px;
  --r-icon: 11px;
  --r-pill: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); }
a:hover { color: var(--soft); }
button { font-family: var(--sans); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes confettiFall { 0% { transform: translateY(-8vh) rotate(0deg); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(105vh) rotate(540deg); opacity: 0; } }
@keyframes popIn { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes wiggle { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.screen { animation: fadeUp .35s ease both; }

/* ============ Header ============ */
/* width:100% (bruger-rapporteret bug 2026-07-30: "klemt sammen omkring midten") — som
   flex-item i .prog-shell (program-skærmens mobil-wrapper) slår margin:auto på tværaksen
   flexboxens stretch fra, og headeren krympede til sin indholdsbredde i stedet for at fylde
   skærmen. Eksplicit width:100% + max-width + margin:auto genskaber "fuld bredde, centreret,
   loftet ved 1280px" uafhængigt af om headeren sidder i en flex-kolonne eller ej. */
.header { display: flex; align-items: center; justify-content: space-between; padding: 24px 48px; width: 100%; max-width: 1280px; margin: 0 auto; box-sizing: border-box; }
.brand { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; background: var(--brand); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--serif); font-size: 20px; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.nav { display: flex; gap: 4px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.nav-item { padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; color: var(--ink); background: transparent; }
.nav-item.active { background: var(--ink); color: var(--bg); }
/* Ugedag + dato, ren visning. flex: 1 lader zonen fylde mellem brand og ☰; på desktop
   højrestilles indholdet, så det lægger sig lige til venstre for menu-knappen. */
/* Klikbar (bruger-ønske 2026-07-30) → Om dagen-undersiden, samme mønster som .brand
   (data-act på selve div'en, ikke en <button> — konsekvent med resten af headeren). */
.header-day { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 4px 8px; cursor: pointer; border-radius: 10px; transition: opacity .15s ease; }
.header-day:hover { opacity: .7; }
.header-weekday { font-family: var(--serif); font-size: 16px; color: var(--ink); line-height: 1.05; }
.header-date { font-size: 12px; color: var(--soft); }
.menu-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; transition: border-color .15s ease; }
.menu-btn:hover { border-color: var(--faint); }

/* ============ Forside ============ */
.page { max-width: 1280px; margin: 0 auto; padding: 24px 48px 64px; }
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.hero-title { font-family: var(--serif); font-size: 46px; line-height: 1.08; letter-spacing: -.01em; }
.chip { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px 10px 12px; }
.chip.done { background: var(--green-p); border-color: var(--green-p); }
.chip-label { font-size: 13.5px; font-weight: 600; color: var(--soft); }
.chip.done .chip-label { color: var(--green-d); }

.check-badge { width: 16px; height: 16px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; flex: none; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 30px; }
.task-card { border-radius: 24px; padding: 26px 26px 22px; display: flex; flex-direction: column; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; border: none; text-align: left; font-family: var(--sans); color: var(--ink); }
.task-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(46, 38, 32, .10); }
.task-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.task-icon { width: 64px; height: 64px; border-radius: 18px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 rgba(46, 38, 32, .08); }
.task-icon .glyph { font-family: var(--serif); font-size: 25px; letter-spacing: -.02em; }
.task-cat { margin-top: 22px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.task-name { margin-top: 6px; font-family: var(--serif); font-size: 25px; line-height: 1.15; }
.task-desc { margin-top: 8px; font-size: 14px; line-height: 1.45; flex: 1; }
.task-arrow-row { margin-top: 20px; display: flex; justify-content: flex-end; }
.task-arrow { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.swap-row { display: flex; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.swap-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink); border-radius: 50%; background: #fff; cursor: pointer; padding: 0; transition: background .15s ease; }
.swap-btn:hover { background: var(--chip); }
.swap-note { font-size: 13.5px; color: var(--muted); }

/* ============ Katalog ============ */
.catalog-sub { margin-top: 14px; font-size: 16px; color: var(--soft); max-width: 460px; line-height: 1.5; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); grid-auto-rows: 1fr; gap: 18px; margin-top: 32px; }
.catalog-tile { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: flex; align-items: center; gap: 16px; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; text-align: left; font-family: var(--sans); color: var(--ink); }
.catalog-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(46, 38, 32, .08); }
.catalog-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex: none; }
.catalog-icon .glyph { font-family: var(--serif); font-size: 21px; letter-spacing: -.02em; }
.catalog-kicker { margin: 0 0 2px; }
.catalog-name { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.catalog-tag { margin-top: 3px; font-size: 13.5px; color: var(--muted); line-height: 1.35; }

/* ============ Spilside ============ */
.game-page { max-width: 900px; margin: 0 auto; padding: 12px 48px 64px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--soft); cursor: pointer; background: none; border: none; padding: 0; }
.back-link:hover { color: var(--ink); }
.game-head { display: flex; align-items: center; gap: 20px; margin-top: 26px; flex-wrap: wrap; }
.game-head-icon { width: 76px; height: 76px; border-radius: 20px; display: flex; align-items: center; justify-content: center; flex: none; }
.game-head-icon .glyph { font-family: var(--serif); font-size: 30px; letter-spacing: -.02em; }
.game-head-text { flex: 1; min-width: 200px; }
.game-head-meta { display: flex; gap: 8px; flex: none; }
.game-cat { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }

/* Spilbaren — erstatter app-headeren på spilskærmen. Rækkefølge: [ikon + spiltype] fylder
   venstre, dernæst [sværhedsgrad/handling] · [ⓘ] · [✕] højrestillet. */
.game-bar { display: flex; align-items: center; gap: 12px; padding: 6px 0 2px; }
.game-bar-id { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.game-bar-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.game-bar-icon .glyph { font-family: var(--serif); letter-spacing: -.02em; }
.game-bar-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* Sværhedsgrad-dropdown + "nyt spil" som ét split-element (fri leg). */
.game-control { display: flex; align-items: center; position: relative; }
.game-control-split { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; position: relative; }
.gc-diff { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border: none; background: transparent; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; border-radius: 9px 0 0 9px; }
.gc-diff:hover { background: var(--chip); }
.gc-sep { width: 1px; align-self: stretch; background: var(--line); }
.gc-btn { width: 34px; height: 34px; border: none; background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 0 9px 9px 0; }
.gc-btn:hover { background: var(--chip); }
/* Låst variant (dagens spil): sværhedsgrad vises, men kan ikke ændres; flammen signalerer,
   at opgaven er fælles og fast. Amber-tonet for at læse som "låst". */
.game-control-split.locked { border-color: var(--amber-p); background: var(--amber-p); }
.game-control-split.locked .gc-diff { color: var(--amber-d); }
.game-control-split.locked .gc-sep { background: var(--amber); opacity: .3; }
.gc-diff.static { cursor: default; }
.gc-diff.static:hover { background: transparent; }
.gc-btn.flame { color: var(--amber-d); }
.gc-menu { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(46, 38, 32, .16); padding: 6px; min-width: 156px; z-index: 30; }
.gc-menu-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; background: transparent; border-radius: 8px; font-family: var(--sans); font-size: 13.5px; color: var(--soft); cursor: pointer; }
.gc-menu-item:hover { background: var(--chip); color: var(--ink); }
.gc-menu-item.active { color: var(--ink); font-weight: 700; }

.board { margin-top: 32px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 38px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.board-hint { font-size: 13.5px; color: var(--muted); text-align: center; line-height: 1.5; max-width: 480px; }
.board-hint.wiggle { animation: wiggle .3s ease; color: var(--amber-d); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; padding: 13px 26px; font-size: 14.5px; font-weight: 600; cursor: pointer; border: none; transition: opacity .15s ease, background .15s ease; }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark:hover { opacity: .85; }
.btn-outline { border: 1.5px solid var(--dash); color: var(--soft); background: #fff; }
.btn-outline:hover { background: var(--chip); }
.btn-ghost { background: none; border: none; font-size: 14.5px; font-weight: 600; color: var(--soft); cursor: pointer; border-bottom: 1.5px solid var(--dash); border-radius: 0; padding: 0 0 2px; }
.btn-ghost:hover { color: var(--ink); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }

.text-input { font-family: var(--sans); font-size: 18px; font-weight: 600; color: var(--ink); background: var(--bg); border: 2px solid var(--line); border-radius: 14px; padding: 12px 18px; outline: none; text-align: center; min-width: 0; }
.text-input:focus { border-color: var(--faint); }

/* ============ Resultat-paneler ============ */
.result-panel { margin-top: 40px; border-radius: 24px; padding: 52px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; animation: fadeUp .3s ease both; }
.result-panel.solved { background: var(--green-p); }
.result-panel.failed { background: var(--chip); }
.result-icon { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: popIn .4s ease both; }
.result-panel.solved .result-icon { background: var(--green); }
.result-panel.failed .result-icon { background: var(--fail); }
.result-title { margin-top: 22px; font-family: var(--serif); font-size: 32px; }
.result-sub { margin-top: 6px; font-size: 15px; font-weight: 600; }
.result-panel.solved .result-sub { color: var(--green-d); }
.result-panel.failed .result-sub { color: var(--warm-ink); }
.result-text { margin-top: 10px; font-size: 15px; line-height: 1.5; max-width: 380px; }
.result-panel.solved .result-text { color: var(--green-d); }
.result-panel.failed .result-text { color: var(--warm-ink); }

/* ============ Dagen bestået ============ */
.celebrate { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px; position: relative; overflow: hidden; }
.confetti-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Burst hængt på <body> frem for inde i #app (se shared/confetti.js): fixed, så det ligger
   over den aktuelle skærm uanset dens scroll-position, og overlever en gen-rendering. */
.confetti-layer.fixed { position: fixed; z-index: 60; }
.confetti-bit { position: absolute; top: -20px; opacity: 0; }
.celebrate-medal { position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; animation: popIn .5s ease both; }
.celebrate-title { margin-top: 30px; font-family: var(--serif); font-size: 44px; letter-spacing: -.01em; }
.celebrate-sub { margin-top: 12px; font-size: 16px; color: var(--soft); line-height: 1.5; }
/* .streak-days/.streak-day er stadig i brug af Spil-sidens ugekalender (page-games.js,
   dagens serie) — kun free-series-specifikke streak-klasser er fjernet herfra
   (bruger-beslutning 2026-07-30: Spilserier har ingen progression). */
.streak-days { display: flex; gap: 10px; margin-top: 16px; justify-content: center; }
.streak-day { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }

/* ============ Spilserier — simpel tæller uden progression (bruger-ønske 2026-07-30) ============ */
.fs-status-row { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.fs-status-label { font-size: 13.5px; font-weight: 600; color: var(--soft); }
.fs-status-label.done { color: var(--green-d); }
.fs-seed { margin-top: 10px; text-align: center; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.celebrate-actions { margin-top: 32px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }

.kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); text-align: center; }

/* ============ Ordleg (Wordle) ============ */
.tema-titel { font-family: var(--serif); font-size: 20px; text-align: center; color: var(--ink); }
.wordle-rows { display: flex; flex-direction: column; gap: 8px; }
.wordle-row { display: flex; gap: 8px; }
.wordle-cell { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; border: 2px solid transparent; }
.wordle-cell.empty { background: transparent; border-color: var(--line); color: var(--ink); }
.wordle-cell.filled { background: #fff; border-color: var(--faint); color: var(--ink); }
.wordle-cell.rejected { background: var(--red-p); color: var(--red-d); }
.wordle-row.active-row .wordle-cell { cursor: pointer; }
.wordle-cell.absent { background: var(--red-p); color: var(--red-d); }
.wordle-cell.present { background: var(--amber); color: #fff; }
.wordle-cell.correct { background: var(--green); color: #fff; }
/* Skjult, men fokuserbart inputfelt — åbner telefonens eget keyboard i stedet for et konstrueret på-skærm-tastatur. */
.visually-hidden-input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; border: none; font-size: 16px; pointer-events: none; }
/* Ordleg: den aktive rækkes celler er ægte <input>-elementer (samme princip som Minikryds) —
   nulstil inputtets egne standardstile, så det visuelt er identisk med de øvrige (div-baserede) celler. */
input.wordle-cell { border: 2px solid transparent; outline: none; background: transparent; text-align: center; text-transform: uppercase; caret-color: var(--ink); font-family: var(--sans); padding: 0; }
input.wordle-cell.empty { background: transparent; }
input.wordle-cell.filled { background: #fff; }
input.wordle-cell:focus { border-color: var(--ink); }

/* ============ Sudoku ============ */
.sudoku-grid { display: grid; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
.sudoku-cell { width: 52px; height: 52px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 600; color: var(--ink); cursor: pointer; padding: 0; font-family: var(--sans); }
.sudoku-cell.given { background: var(--chip); font-weight: 700; cursor: default; }
.sudoku-cell.sel { background: var(--green-p); }
.sudoku-cell.conflict { background: var(--amber-p); color: var(--amber-d); }
.sudoku-cell.solved-flash { background: var(--green-p); color: var(--green-d); cursor: default; }
.sudoku-cell.right { background: var(--green-p); color: var(--green-d); cursor: default; }
.sudoku-cell.wrong { background: var(--red-p); color: var(--red-d); cursor: default; }
.sudoku-cell.box-r { border-right: 2px solid var(--ink); }
.sudoku-cell.box-b { border-bottom: 2px solid var(--ink); }

/* ============ Slangen ============ */
.slangen-grid { display: grid; gap: 6px; }
.slangen-cell { width: 52px; height: 52px; border-radius: 12px; background: #fff; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--ink); cursor: pointer; user-select: none; padding: 0; font-family: var(--sans); }
.slangen-cell:hover:not(.given) { background: var(--chip); }
.slangen-cell.given { background: var(--chip); border-color: var(--dash); color: var(--soft); cursor: default; }
.slangen-cell.filled { background: var(--green-p); border-color: var(--green); color: var(--green-d); }
.slangen-cell.wrong { animation: wiggle .3s ease; background: var(--amber-p); border-color: var(--amber); color: var(--amber-d); }
.slangen-cell.solved-flash { background: var(--green-p); border-color: var(--green); color: var(--green-d); }

/* ============ Kryds og tværs ============ */
.cross-wrap { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.cross-grid { display: grid; gap: 4px; }
.cross-cell { position: relative; width: 46px; height: 46px; }
.cross-cell input { width: 100%; height: 100%; border: 2px solid var(--line); border-radius: 10px; background: #fff; text-align: center; font-size: 19px; font-weight: 700; color: var(--ink); text-transform: uppercase; outline: none; font-family: var(--sans); padding: 0; }
.cross-cell input:focus { border-color: var(--faint); background: var(--green-p); }
.cross-cell input.wrong { border-color: var(--red); background: var(--red-p); }
.cross-cell input.right { border-color: var(--green); background: var(--green-p); }
.cross-cell .num { position: absolute; top: 3px; left: 5px; font-size: 9px; font-weight: 700; color: var(--muted); pointer-events: none; }
.cross-clues { font-size: 14px; color: var(--soft); line-height: 1.65; max-width: 300px; }
.cross-clues h4 { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.cross-clues p { margin: 0 0 2px; }
.cross-clues .done { color: var(--green-d); }

/* ============ Talrække / Anagram ============ */
.seq-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.seq-num { min-width: 56px; height: 56px; padding: 0 14px; border-radius: 14px; background: var(--chip); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: var(--ink); }
.seq-num.q { background: #fff; border: 2px dashed var(--dash); color: var(--muted); }
.seq-num.q.right { background: var(--green-p); border-color: var(--green); border-style: solid; color: var(--green-d); }
.seq-num.q.wrong { background: var(--red-p); border-color: var(--red); border-style: solid; color: var(--red-d); }
.seq-input { width: 56px; height: 56px; padding: 0; border-radius: 14px; background: #fff; border: 2px dashed var(--dash); text-align: center; font-size: 22px; font-weight: 700; color: var(--ink); font-family: var(--sans); }
.seq-input::placeholder { color: var(--muted); font-family: var(--sans); }
.seq-input:focus { border-color: var(--faint); border-style: solid; outline: none; }
.letter-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.letter-tile { width: 50px; height: 50px; border-radius: 12px; background: var(--chip); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.letter-tile.right { background: var(--green-p); color: var(--green-d); }
.letter-tile.wrong { background: var(--amber-p); color: var(--amber-d); }
.hint-line { font-size: 14px; color: var(--amber-d); font-weight: 600; }

/* ============ Dobbeltgænger ============ */
.dobbel-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; max-width: 440px; margin-top: 18px; }
.dobbel-card { background: var(--chip); border: 1.5px solid var(--line); border-radius: 18px; padding: 12px; display: grid; gap: 4px; transition: border-color .15s ease, background .15s ease; }
.dobbel-card.correct { border-color: var(--green); background: var(--green-p); }
.dobbel-symbol { border: none; background: none; padding: 4px; border-radius: 10px; line-height: 1; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s ease; }
.dobbel-symbol:hover { background: #fff; }
.dobbel-symbol:focus-visible { outline: 2px solid var(--faint); outline-offset: 2px; }
.dobbel-symbol.miss { animation: wiggle .3s ease; background: var(--red-p); box-shadow: inset 0 0 0 2px var(--red); }
/* Fremhæv den fælles emoji når spilleren løb tør for tid eller gav op. */
.dobbel-symbol.reveal { background: var(--green-p); box-shadow: inset 0 0 0 2px var(--green); animation: dobbel-reveal 1.3s ease-in-out infinite; }
@keyframes dobbel-reveal {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--green); }
  50%      { box-shadow: inset 0 0 0 3px var(--green); transform: scale(1.06); }
}
@media (max-width: 420px) {
  .dobbel-pair { gap: 10px; }
  .dobbel-card { padding: 8px; }
}

/* ============ Fluesmækker ============ */
.flue-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; width: 100%; max-width: 440px; margin: 16px auto 0; }
.flue-cell { aspect-ratio: 1; border: 1.5px solid var(--line); border-radius: 12px; background: var(--chip); display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; padding: 0; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background .12s ease, border-color .12s ease; }
.flue-cell:focus-visible { outline: 2px solid var(--faint); outline-offset: 2px; }
.flue-cell.has-fly, .flue-cell.has-decoy { border-color: var(--dash); background: #fff; }
.flue-bug { display: inline-block; animation: flue-fade .18s ease-out; }
@keyframes flue-fade { from { opacity: 0; } to { opacity: 1; } }
/* Hele feltet vrikker tydeligt når et kryb dukker op, så det er nemt at få øje på. */
.flue-cell.spawning { animation: flue-spawn .6s ease-out; z-index: 1; }
@keyframes flue-spawn {
  0%   { transform: scale(.55) rotate(-14deg); }
  25%  { transform: scale(1.16) rotate(12deg); }
  45%  { transform: scale(1.04) rotate(-10deg); }
  62%  { transform: scale(1.09) rotate(7deg); }
  78%  { transform: scale(1.0) rotate(-4deg); }
  90%  { transform: scale(1.03) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
.flue-cell.pop { border-color: var(--green); background: var(--green-p); }
.flue-cell.sting { border-color: var(--amber); background: var(--amber-p); animation: wiggle .3s ease; }
.flue-penalty { animation: wiggle .3s ease; color: var(--amber-d); }
.flue-status-win { color: var(--green-d); font-weight: 600; }
.flue-status-fail { color: var(--red-d); font-weight: 600; }
@media (max-width: 420px) {
  .flue-grid { gap: 6px; }
  .flue-cell { font-size: 22px; border-radius: 10px; }
}

/* Dev-panel (kun synligt bag #dev-flaget) */
.dev-panel { width: 100%; max-width: 440px; margin: 22px auto 0; padding: 14px 16px; border: 1.5px dashed var(--dash); border-radius: 14px; background: var(--chip); font-size: 12.5px; }
.dev-panel-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); font-size: 11px; margin-bottom: 10px; }
.dev-panel-status { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--amber-d); font-variant-numeric: tabular-nums; }
.dev-row { display: block; margin-bottom: 9px; }
.dev-row-top { display: flex; justify-content: space-between; align-items: baseline; }
.dev-row-label { color: var(--soft); }
.dev-row-val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dev-range { width: 100%; margin: 3px 0 0; accent-color: var(--accent, #7E8B3B); cursor: pointer; }
.dev-panel-btns { display: flex; gap: 8px; margin-top: 12px; }
.dev-btn { flex: 1; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 10px; border: 1px solid var(--dash); border-radius: 9px; background: #fff; color: var(--ink); cursor: pointer; }
.dev-btn:hover { background: var(--bg); border-color: var(--faint); }

/* Programstiens "nyt testkort"-knap (bruger-ønske 2026-07-30, screens/program.js's
   devRerollHTML) — samme dashed-chip-sprog som .dev-panel, kun som én smal knap i stedet for
   et helt panel. */
.dev-reroll-btn { display: block; width: 100%; margin-top: 10px; padding: 8px; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border: 1.5px dashed var(--dash); border-radius: 10px; background: var(--chip); color: var(--soft); cursor: pointer; }
.dev-reroll-btn:hover { background: var(--bg); border-color: var(--faint); color: var(--ink); }

/* ============ Quiz ============ */
.quiz-story { font-size: 15.5px; line-height: 1.65; color: var(--ink); max-width: 560px; background: var(--chip); border-radius: 18px; padding: 22px 26px; }
.quiz-progress { display: flex; gap: 6px; justify-content: center; }
.quiz-progress .p-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.quiz-progress .p-dot.now { background: var(--faint); }
.quiz-progress .p-dot.right { background: var(--green); }
.quiz-progress .p-dot.wrong { background: var(--red); }
.quiz-krav { font-size: 13px; color: var(--soft); text-align: center; margin-top: -6px; }
.quiz-q { font-family: var(--serif); font-size: 22px; line-height: 1.3; text-align: center; max-width: 540px; }
.quiz-opts { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 440px; margin-top: 6px; }
.quiz-opt { border: 1.5px solid var(--dash); background: #fff; border-radius: 999px; padding: 13px 22px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; transition: background .12s ease; text-align: center; font-family: var(--sans); }
.quiz-opt:hover:not(:disabled) { background: var(--chip); }
.quiz-opt.right { background: var(--green); border-color: var(--green); color: #fff; }
.quiz-opt.picked-wrong { background: var(--sand); border-color: var(--sand); color: var(--sand-ink); }
.quiz-opt:disabled { cursor: default; }

/* ============ Flagquiz ============ */
.flagquiz-flag { display: block; font-size: 108px; line-height: 1; text-align: center; user-select: none; }
@media (max-width: 420px) { .flagquiz-flag { font-size: 84px; } }

/* ============ Krimiquiz ============ */
.krimi-columns { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 640px; }
.krimi-pool { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }
.krimi-pool-title { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.krimi-item { border: 1.5px solid var(--dash); border-radius: 14px; padding: 12px 16px; background: #fff; text-align: left; }
.krimi-item-navn { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.krimi-item-svar-label { font-size: 12px; font-weight: 700; color: var(--soft); margin-top: 8px; }
.krimi-item-hint { font-size: 13.5px; color: var(--soft); margin-top: 4px; line-height: 1.5; font-style: italic; }
.krimi-item-locked { font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.krimi-item.investigated { background: var(--chip); border-color: var(--dash2); }
.krimi-item.locked { opacity: .5; }
.krimi-item-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.krimi-choice-btn { border: 1.5px solid var(--dash); background: #fff; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; font-family: var(--sans); }
.krimi-choice-btn:hover { background: var(--chip); }
.krimi-undersoeg-btn { margin-top: 8px; text-align: center; color: var(--soft); }

/* ============ Tonegæt ============ */
.tonegaet-guide { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 18px 0 4px; }
.tonegaet-pip { width: 32px; height: 32px; border-radius: 50%; background: var(--chip); border: 1px solid var(--dash); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--soft); transition: background .15s ease, transform .15s ease; }
.tonegaet-pip.playing { background: var(--green); border-color: var(--green); color: #fff; transform: scale(1.15); }
.tonegaet-pip.next { background: transparent; border: 1.5px dashed var(--dash); color: var(--muted); font-size: 15px; }
.tonegaet-status.win { color: var(--green-d); font-weight: 600; }
.tonegaet-status.miss { color: var(--amber-d); font-weight: 600; }

/* ============ Klaver (delt: Ram tonen + Hold Rytmen) ============ */
.klaver-wrap { display: flex; justify-content: center; margin-top: 8px; }
.klaver { position: relative; display: flex; height: 128px; }
.klaver-hvid { width: 42px; height: 128px; background: #fff; border: 1.5px solid var(--dash); border-right: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font-size: 11px; font-weight: 700; color: var(--muted); cursor: pointer; border-radius: 0 0 8px 8px; user-select: none; }
.klaver-hvid:nth-child(7) { border-right: 1.5px solid var(--dash); }
.klaver-hvid:hover { background: var(--chip); }
.klaver-hvid.playing { background: var(--green-p); border-color: var(--green); }
.klaver-hvid.selected { box-shadow: inset 0 0 0 3px var(--green); }
.klaver-hvid.wrong { background: var(--red-p); border-color: var(--red); }
.klaver-hvid.correct { background: var(--green); border-color: var(--green); color: #fff; }
.klaver-sort { position: absolute; top: 0; width: 26px; height: 80px; background: var(--ink); border-radius: 0 0 6px 6px; cursor: pointer; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-size: 9px; font-weight: 700; color: var(--bg); user-select: none; }
.klaver-sort:hover { background: var(--soft); }
.klaver-sort.playing { background: var(--green-d); }
.klaver-sort.selected { box-shadow: inset 0 0 0 2px var(--green); }
.klaver-sort.wrong { background: var(--red-d); }
.klaver-sort.correct { background: var(--green-d); }

/* ============ Hukommelse ============ */
.huk-timer-wrap { width: 100%; max-width: 320px; height: 8px; background: var(--chip); border-radius: 999px; overflow: hidden; margin: 16px auto 0; }
.huk-timer-bar { height: 100%; background: var(--green); border-radius: 999px; transition: width 1s linear; }

/* ============ Fix Formlen ============ */
.formel-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.formel-tal { width: 52px; height: 52px; border-radius: 12px; background: #fff; border: 1.5px solid var(--dash); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: var(--ink); font-family: var(--sans); }
.formel-op-group { display: flex; gap: 4px; }
.formel-op-btn { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--dash); background: #fff; font-size: 15px; font-weight: 700; color: var(--soft); cursor: pointer; font-family: var(--sans); }
.formel-op-btn:hover:not(:disabled) { background: var(--chip); }
.formel-op-btn.selected { background: var(--ink); border-color: var(--ink); color: #fff; }
.formel-op-btn:disabled { opacity: .5; cursor: default; }
.formel-slot { width: 52px; height: 52px; border-radius: 12px; background: #fff; border: 2px dashed var(--dash); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: var(--muted); cursor: pointer; font-family: var(--sans); }
.formel-slot:hover { border-color: var(--faint); }
.formel-slot.set { border-style: solid; border-color: var(--faint); color: var(--ink); }
.formel-slot.right { background: var(--green-p); border-color: var(--green); border-style: solid; color: var(--green-d); cursor: default; }
.formel-slot.wrong { background: var(--red-p); border-color: var(--red); border-style: solid; color: var(--red-d); cursor: default; }
.formel-eq { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 26px; color: var(--ink); }
.formel-resultat { text-align: center; font-family: var(--serif); font-size: 20px; margin-top: 20px; color: var(--soft); }
.formel-resultat.match { color: var(--green-d); }

/* ============ Billedgåde ============ */
.peek-frame { width: 180px; height: 180px; border-radius: 24px; overflow: hidden; background: var(--chip); display: flex; align-items: center; justify-content: center; position: relative; }
.peek-emoji { line-height: 1; user-select: none; }
.peek-opts { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }

/* ============ Vendespil ============ */
/* Kortstørrelse/antal kolonner varierer med sværhedsgrad (Let 4×4/Mellem 6×6/Svær 8×8) —
   sat som CSS custom properties af index.js, så det eksisterende mobil-breakpoint nedenfor
   fortsat styrer responsivitet uden en JS-resize-lytter. */
.memory-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), var(--card-size-desktop, 68px)); gap: var(--card-gap-desktop, 10px); }
.memory-card { width: var(--card-size-desktop, 68px); height: var(--card-size-desktop, 68px); border-radius: 16px; border: none; cursor: pointer; background: var(--chip); font-size: var(--card-font-desktop, 30px); display: flex; align-items: center; justify-content: center; transition: transform .15s ease, background .15s ease; font-family: var(--sans); color: transparent; }
.memory-card:hover { transform: translateY(-2px); }
.memory-card.up { background: #fff; border: 1.5px solid var(--dash); color: var(--ink); cursor: default; }
.memory-card.matched { background: var(--green-p); border: 1.5px solid var(--green-p); color: var(--ink); cursor: default; }
.memory-card.wrong { background: var(--red-p); border: 1.5px solid var(--red); color: var(--ink); cursor: default; }

/* ============ Skakmat i ét træk ============ */
.skak-board-wrap { display: flex; justify-content: center; margin-top: 18px; }
.skak-board { display: grid; grid-template-columns: repeat(8, 52px); grid-template-rows: repeat(8, 52px); border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
.skak-square { position: relative; display: flex; align-items: center; justify-content: center; font-size: 34px; cursor: pointer; user-select: none; }
.skak-square.light { background: var(--bg); }
.skak-square.dark { background: var(--dash); }
.skak-board.locked .skak-square { cursor: default; }
.skak-square.selected { box-shadow: inset 0 0 0 3px var(--ink); }
.skak-square.legal-move::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--green); opacity: .6; }
.skak-square.legal-move.has-piece::after { width: 42px; height: 42px; border-radius: 50%; background: transparent; border: 3px solid var(--green); opacity: .75; }
.skak-square.trukket-vind { background: var(--green-p); }
.skak-square.trukket-tab { background: var(--amber-p); }
.skak-brik { line-height: 1; display: flex; }
.skak-brik svg { width: 34px; height: 34px; }
/* Hvide brikker: fyldt hvidt MED et rigtigt SVG-omrids (stroke), ikke kun tekstfarve —
   ren tekstfarve på et hvidt felt var stort set usynlig (brugerrapport). Sort omrids holder
   formen synlig uanset feltfarve. */
.skak-brik.hvid { color: #fff; stroke: var(--ink); stroke-width: 0.9; stroke-linejoin: round; }
.skak-brik.sort { color: var(--ink); }
.skak-status-win { color: var(--green-d); font-weight: 600; }
.skak-status-fail { color: var(--amber-d); font-weight: 600; }

/* ============ Dato-puslespillet ============ */
.dato-grid-wrap { display: flex; justify-content: center; margin-top: 18px; }
.dato-grid { display: grid; grid-template-columns: repeat(7, 48px); grid-auto-rows: 48px; gap: 5px; }
.dato-cell { border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; font-family: var(--sans); }
.dato-cell.tom { background: transparent; }
.dato-cell.spilbar { background: #fff; border: 1.5px solid var(--dash); color: var(--soft); cursor: pointer; }
.dato-cell.spilbar:hover { border-color: var(--faint); }
.dato-cell.markeret { background: var(--chip); border-color: var(--faint); color: var(--ink); }
.dato-cell.markeret.matcher { background: var(--green-p); border-color: var(--green); color: var(--green-d); }
.dato-cell.optaget { color: #fff; border: 1.5px solid transparent; cursor: pointer; }
.dato-cell.mål { box-shadow: inset 0 0 0 3px #F79A3E; }
.dato-grid.locked .dato-cell { cursor: default; }
.dato-status-win { color: var(--green-d); font-weight: 600; }
.dato-status-info { color: var(--amber-d); font-weight: 600; }
.dato-status-match { color: var(--green-d); font-weight: 600; }
.dato-tray-wrap { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.dato-tray-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dato-tray-shape { display: grid; gap: 2px; }
.dato-tray-cell { width: 10px; height: 10px; border-radius: 2px; }

/* ============ Hold Rytmen ============ */
/* Tælleren selv er nu et almindeligt shell.hud()-element (se index.js) — kun disse to
   understøttende stykker er bespoke: den tynde budget-bar (ingen anden HUD-celle i appen har
   brug for en fremdriftsbar) og advarselsfarverne på selve HUD-tallet når budgettet nærmer sig. */
.rytme-hud-warn { color: var(--amber-d) !important; }
.rytme-hud-danger { color: var(--red-d) !important; }
.rytme-budget-bar { height: 8px; background: var(--chip); border-radius: 999px; overflow: hidden; }
.rytme-budget-fill { height: 100%; width: 0%; background: var(--green); border-radius: 999px; transition: width .18s ease; }
.rytme-budget-fill.danger { background: var(--red); }
.rytme-status-win { color: var(--green-d); font-weight: 600; }
.rytme-status-fail { color: var(--red-d); font-weight: 600; }

.rytme-track-wrap { display: flex; justify-content: center; margin-top: 16px; }
.rytme-track { position: relative; background: var(--chip); border: 1px solid var(--line); border-bottom: none; border-radius: 16px 16px 0 0; overflow: hidden; }
.rytme-lane-divider { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--dash); opacity: .5; }
.rytme-hit-zone { position: absolute; left: 0; right: 0; background: var(--green-p); border-top: 1px dashed var(--green); border-bottom: 1px dashed var(--green); z-index: 1; opacity: .8; }
.rytme-hit-line { position: absolute; left: 0; right: 0; height: 3px; background: var(--ink); z-index: 4; }
.rytme-zone-label { position: absolute; right: 6px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--green-d); z-index: 2; pointer-events: none; }
.rytme-note { position: absolute; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; z-index: 3; transition: opacity .3s ease; }
.rytme-note.hvid { background: #fff; border: 1px solid var(--dash); color: var(--ink); }
.rytme-note.sort { background: var(--ink); border: 1px solid var(--ink); color: var(--bg); }
.rytme-note.hit { opacity: 0; transform: scale(1.5); transition: opacity .2s ease, transform .2s ease; }
.rytme-note.missed { background: var(--red); border-color: var(--red); color: #fff; }

.rytme-judge { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); font-family: var(--serif); font-weight: 600; font-size: 17px; opacity: 0; z-index: 5; pointer-events: none; white-space: nowrap; }
.rytme-judge.show { animation: rytmePop .55s ease-out; }
.rytme-judge-perfekt { color: var(--green-d); }
.rytme-judge-godt { color: var(--amber-d); }
.rytme-judge-okay { color: var(--soft); }
.rytme-judge-fail { color: var(--red-d); }
@keyframes rytmePop {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  25% { opacity: 1; transform: translate(-50%, -2px); }
  100% { opacity: 0; transform: translate(-50%, -14px); }
}

.rytme-klaver-wrap { margin-top: 4px; }

/* ============ Undvig ============ */
.undvig-status-win { color: var(--green-d); font-weight: 600; }
.undvig-status-fail { color: var(--red-d); font-weight: 600; }

.undvig-arena-wrap { display: flex; justify-content: center; margin-top: 16px; width: 100%; overflow: hidden; }
.undvig-arena { position: relative; flex: none; }

/* Ydre grænse for spillefladen (de 9 felter) — adskiller banen fra anløbszonen udenom. */
.undvig-bounds {
  position: absolute; border: 1.5px dashed var(--line); border-radius: 22px;
  pointer-events: none; z-index: 0;
}

/* Varsel-markør: pulserende bjælke i banens kant et øjeblik før forhindringen kører ind. */
.undvig-warning {
  position: absolute; border-radius: 6px; background: var(--amber);
  z-index: 1; pointer-events: none; opacity: .85;
  animation: undvig-varsel .55s ease-in-out infinite alternate;
}
@keyframes undvig-varsel {
  from { opacity: .35; transform: scale(.9); }
  to   { opacity: .95; transform: scale(1); }
}

.undvig-cell {
  position: absolute; background: var(--chip); border: 1.5px solid var(--line);
  border-radius: 16px; cursor: pointer; transition: background .12s ease, border-color .12s ease, transform .1s ease;
}
.undvig-cell.reachable { border-color: var(--green); background: var(--green-p); }
.undvig-cell.reachable:hover { transform: scale(1.04); }

.undvig-obstacle {
  position: absolute; border-radius: 11px; background: var(--red);
  box-shadow: 0 3px 10px rgba(166, 68, 59, .35); z-index: 2;
}

.undvig-player {
  position: absolute; border-radius: 50%; background: var(--ink);
  box-shadow: 0 3px 10px rgba(46, 38, 32, .3);
  transition: left .15s cubic-bezier(.4, 1.5, .5, 1), top .15s cubic-bezier(.4, 1.5, .5, 1);
  pointer-events: none; z-index: 3;
}
.undvig-player.hit { background: var(--red-d); box-shadow: 0 3px 14px rgba(166, 68, 59, .55); }

/* ============ Filmcitat ============ */
.filmcitat-quote {
  width: 100%; background: var(--chip); border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: 14px; padding: 20px 22px; margin-top: 14px;
}
.filmcitat-quote-mark { font-family: var(--serif); font-size: 30px; color: var(--amber-d); opacity: .55; line-height: .6; }
.filmcitat-quote-text { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ink); margin-top: 6px; }

.filmcitat-budget-row { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 16px; }
.filmcitat-budget-label { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.filmcitat-pips { display: flex; gap: 6px; }
.filmcitat-pip { width: 11px; height: 11px; border-radius: 50%; background: var(--amber); transition: background .2s ease, transform .2s ease; }
.filmcitat-pip.spent { background: var(--dash); transform: scale(.75); }

.filmcitat-hint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 12px; }
.filmcitat-hint-btn {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  cursor: pointer; text-align: left; font-family: var(--sans); transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.filmcitat-hint-btn:hover:not(:disabled) { border-color: var(--amber); background: var(--amber-p); }
.filmcitat-hint-btn:disabled { cursor: not-allowed; opacity: .45; }
.filmcitat-hint-btn.revealed { border-color: var(--soft); background: var(--chip); opacity: 1; cursor: default; }
.filmcitat-hint-name { font-size: 12px; font-weight: 700; color: var(--faint); letter-spacing: .03em; display: block; margin-bottom: 3px; }
.filmcitat-hint-btn.revealed .filmcitat-hint-name { color: var(--soft); }
.filmcitat-hint-value { font-family: var(--serif); font-size: 15px; color: var(--ink); display: block; }
.filmcitat-hint-cost { font-size: 12px; color: var(--amber-d); font-weight: 600; }

.filmcitat-divider { height: 1px; background: var(--line); width: 100%; margin: 18px 0 12px; }

.filmcitat-titles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.filmcitat-title-btn {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px;
  cursor: pointer; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink);
  text-align: left; transition: border-color .15s ease, background .15s ease, opacity .3s ease, transform .3s ease;
}
.filmcitat-title-btn:hover:not(:disabled) { border-color: var(--amber); background: var(--amber-p); }
.filmcitat-title-btn:disabled { cursor: not-allowed; }
.filmcitat-title-btn.eliminated { opacity: .3; text-decoration: line-through; transform: scale(.96); }
.filmcitat-title-btn.correct { border-color: var(--green); background: var(--green-p); color: var(--green-d); font-weight: 700; }
.filmcitat-title-btn.wrong { border-color: var(--red); background: var(--red-p); color: var(--red-d); }

.filmcitat-status-win { color: var(--green-d); font-weight: 600; }
.filmcitat-status-fail { color: var(--red-d); font-weight: 600; }

/* ============ Pyramiden ============ */
.pyramiden-hud {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 10px 14px; background: var(--chip); border: 1px solid var(--line);
  border-radius: 10px; margin-top: 14px;
}
.pyramiden-hud-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.pyramiden-hearts { display: flex; gap: 5px; margin-top: 3px; }
.pyramiden-heart { width: 13px; height: 13px; border-radius: 50%; background: var(--red); transition: background .25s ease, transform .25s ease; }
.pyramiden-heart.lost { background: var(--dash); transform: scale(.72); }
.pyramiden-progress { font-family: var(--serif); font-size: 17px; color: var(--ink); margin-top: 2px; }

.pyramiden-wall { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; margin-top: 18px; }
.pyramiden-row { display: flex; gap: 6px; }

.pyramiden-brick {
  width: 56px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink);
  text-align: center; padding: 0; border: 1.5px solid transparent;
  transition: transform .16s cubic-bezier(.4, 1.5, .5, 1), background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pyramiden-brick.given { background: var(--chip); border-color: var(--line); }
input.pyramiden-brick.slot {
  background: #fff; border: 2px dashed var(--dash); color: var(--ink);
  font-family: var(--serif); outline: none; caret-color: var(--ink);
}
input.pyramiden-brick.slot:focus { border-style: solid; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(46, 38, 32, .1); }
input.pyramiden-brick.slot:disabled { opacity: 1; }
.pyramiden-brick.locked-correct { background: var(--green-p); border-color: var(--green); color: var(--green-d); }
.pyramiden-brick.reveal { background: var(--chip); border-color: var(--red); color: var(--red-d); }

input.pyramiden-brick.flash-correct { animation: pyramidenPop .45s cubic-bezier(.4, 1.6, .5, 1); }
input.pyramiden-brick.flash-wrong {
  background: var(--red-p) !important; border-color: var(--red) !important; color: var(--red-d) !important;
  animation: pyramidenShake .45s ease-out;
}
@keyframes pyramidenPop {
  0% { transform: scale(.82); } 60% { transform: scale(1.12); } 100% { transform: scale(1); }
}
@keyframes pyramidenShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.pyramiden-status-win { color: var(--green-d); font-weight: 600; }
.pyramiden-status-fail { color: var(--red-d); font-weight: 600; }

/* ============ Ordsporet ============ */
.ordsporet-words { display: flex; gap: 7px; width: 100%; margin-bottom: 10px; }
.ordsporet-word-slot {
  flex: 1; height: 34px; border: 1.5px dashed var(--dash); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 13px; font-weight: 600; letter-spacing: .1em;
  color: var(--faint); transition: all .3s ease;
}
.ordsporet-word-slot.active { border-color: var(--green); border-style: solid; color: var(--green-d); }
.ordsporet-word-slot.found {
  background: var(--green-p); border: 1.5px solid var(--green); color: var(--green-d);
  animation: ordsporetPop .45s cubic-bezier(.4, 1.6, .5, 1);
}

.ordsporet-current {
  text-align: center; min-height: 30px; font-family: var(--serif);
  font-size: 21px; letter-spacing: .12em; color: var(--green-d); font-weight: 600; margin-bottom: 8px;
}

.ordsporet-grid-wrap { display: flex; justify-content: center; margin-bottom: 14px; width: 100%; overflow: hidden; }
.ordsporet-grid { position: relative; touch-action: none; user-select: none; flex: none; }

.ordsporet-tile {
  position: absolute; background: var(--chip); border: 1.5px solid var(--line);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink);
  cursor: pointer;
  transition: top .42s cubic-bezier(.3, 1.2, .5, 1), background .15s ease, border-color .15s ease, transform .12s ease;
}
.ordsporet-tile.selected { background: var(--ink); border-color: var(--ink); color: var(--bg); transform: scale(1.07); z-index: 3; }
.ordsporet-tile.correct { background: var(--green-p); border-color: var(--green); color: var(--green-d); animation: ordsporetFlash .5s ease-out; }
.ordsporet-tile.wrong { background: var(--red-p); border-color: var(--red); color: var(--red-d); animation: ordsporetShake .4s ease-out; }
.ordsporet-tile.entering { animation: ordsporetDrop .48s cubic-bezier(.3, 1.25, .5, 1); }

@keyframes ordsporetPop {
  0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); }
}
@keyframes ordsporetFlash {
  0% { transform: scale(1); } 50% { transform: scale(1.16); } 100% { transform: scale(1); }
}
@keyframes ordsporetShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@keyframes ordsporetDrop {
  from { opacity: 0; transform: translateY(-70px); }
  to { opacity: 1; transform: translateY(0); }
}

.ordsporet-path-svg { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ordsporet-path-line { stroke: var(--ink); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; fill: none; opacity: .35; }

.ordsporet-status-win { color: var(--green-d); font-weight: 600; }
.ordsporet-status-fail { color: var(--red-d); font-weight: 600; }

/* ============ Talskub ============ */
/* Gitter: skub-pile på alle fire kanter + diskrete sum-badges yderst til højre (rækker) og
   nederst (kolonner). --lane = pilbanens tykkelse, --sum = sum-banens, --gg = fælles mellemrum
   for bræt, pile OG summer, så alt flugter med kolonner/rækker. */
.talskub-gridwrap { --lane: 28px; --sum: 26px; --gg: 6px; width: 100%; max-width: 430px; margin: 0 auto; display: grid;
  grid-template-columns: var(--lane) 1fr var(--lane) var(--sum);
  grid-template-rows: var(--lane) 1fr var(--lane) var(--sum);
  grid-template-areas:
    ".    top   .     ."
    "left board right rsum"
    ".    bot   .     ."
    ".    csum  .     .";
  gap: var(--gg); align-items: center; justify-items: center; }

.talskub-arrows { display: grid; gap: var(--gg); }
.talskub-arrows-h { grid-auto-flow: column; width: 100%; grid-template-columns: repeat(var(--n), 1fr); }
.talskub-arrows-v { grid-auto-flow: row; height: 100%; grid-template-rows: repeat(var(--n), 1fr); }
.talskub-arrow { border: none; background: transparent; color: var(--faint); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 8px;
  width: 100%; height: 100%; min-width: var(--lane); min-height: var(--lane);
  transition: color .12s ease, background .12s ease; -webkit-tap-highlight-color: transparent; }
.talskub-arrow svg { width: 18px; height: 18px; }
.talskub-arrow:hover { color: var(--ink); background: var(--chip); }
.talskub-arrow:focus-visible { outline: 2px solid var(--faint); outline-offset: 1px; }
/* Kun chevronen roteres — IKKE knappen — så hover-feltet beholder cellens form og ikke
   kolliderer med brikkerne. */
.talskub-arrow.down svg { transform: rotate(180deg); }
.talskub-arrow.left svg { transform: rotate(-90deg); }
.talskub-arrow.right svg { transform: rotate(90deg); }

.talskub-boardwrap { width: 100%; }
.talskub-board { display: grid; gap: var(--gg); width: 100%; }
.talskub-tile { aspect-ratio: 1; border-radius: 10px; background: var(--chip);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: clamp(16px, 5.5vw, 26px); color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: background .18s ease, color .18s ease, border-color .18s ease; }
/* Grøn er den ENESTE farvemarkering: rækkens/kolonnens brikker tones grøn, når summen rammer T. */
.talskub-tile.ok { background: var(--green-p); border-color: var(--green); color: var(--green-d); }
.talskub-tile.fresh { animation: popIn .28s ease; }

/* Diskrete sum-badges: dæmpede tal, der bliver grønne når summen rammer måltallet. */
.talskub-sums { display: grid; gap: var(--gg); }
.talskub-sums-h { grid-auto-flow: column; width: 100%; grid-template-columns: repeat(var(--n), 1fr); }
.talskub-sums-v { grid-auto-flow: row; height: 100%; grid-template-rows: repeat(var(--n), 1fr); }
.talskub-sum { display: flex; align-items: center; justify-content: center; font-size: 12.5px;
  font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.talskub-sum.ok { color: var(--green-d); font-weight: 700; }

.talskub-status-win { color: var(--green-d); font-weight: 600; }
.talskub-status-fail { color: var(--red-d); font-weight: 600; }

/* ============ Sætningen ============ */
.saetningen-sentence { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-bottom: 4px; }
.saetningen-word { display: flex; gap: 4px; }
.saetningen-tile {
  width: 36px; height: 44px; background: var(--chip); border: 1.5px solid var(--line); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink);
  cursor: pointer; user-select: none;
  transition: transform .14s cubic-bezier(.4, 1.5, .5, 1), background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.saetningen-tile:hover:not(.locked):not(.win) { transform: translateY(-2px); border-color: var(--soft); }
.saetningen-tile.selected { background: var(--green-p); border-color: var(--green); color: var(--green-d); transform: scale(1.08); box-shadow: 0 4px 12px rgba(62, 138, 102, .22); }
.saetningen-tile.locked { background: var(--amber-p); border-color: var(--amber); color: var(--amber-d); cursor: default; }
.saetningen-tile.win { background: var(--green-p); border-color: var(--green); color: var(--green-d); cursor: default; }
.saetningen-tile.flash { animation: saetningenPop .5s ease-out; }

@keyframes saetningenPop { 0% { transform: scale(1); } 50% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes saetningenPulse { 0%, 100% { border-color: var(--line); } 50% { border-color: var(--amber); } }

.saetningen-sentence.hint-mode .saetningen-tile:not(.locked) { cursor: help; animation: saetningenPulse 1.2s ease-in-out infinite; }

.saetningen-hint-bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0; }
.saetningen-hint-btn {
  display: flex; align-items: center; gap: 6px; background: var(--amber-p); color: var(--amber-d);
  border: 1.5px solid var(--amber); border-radius: 999px; padding: 9px 18px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s ease, opacity .15s ease;
}
.saetningen-hint-btn:hover:not(:disabled) { background: var(--amber); color: #fff; }
.saetningen-hint-btn:disabled { opacity: .45; cursor: not-allowed; }
.saetningen-hint-dots { display: flex; gap: 4px; }
.saetningen-hint-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.saetningen-hint-dot.spent { background: var(--line); }

/* ============ Anagram (sammenlagt: enkeltord → sætning) ============ */
.anagram-sentence { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-bottom: 4px; }
.anagram-word { display: flex; gap: 4px; }
.anagram-tile {
  width: 36px; height: 44px; background: var(--chip); border: 1.5px solid var(--line); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink);
  cursor: pointer; user-select: none;
  transition: transform .14s cubic-bezier(.4, 1.5, .5, 1), background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.anagram-tile:hover:not(.locked):not(.win) { transform: translateY(-2px); border-color: var(--soft); }
.anagram-tile.selected { background: var(--green-p); border-color: var(--green); color: var(--green-d); transform: scale(1.08); box-shadow: 0 4px 12px rgba(62, 138, 102, .22); }
.anagram-tile.locked { background: var(--amber-p); border-color: var(--amber); color: var(--amber-d); cursor: default; }
.anagram-tile.win { background: var(--green-p); border-color: var(--green); color: var(--green-d); cursor: default; }

/* Redesignet hint: en rolig, neutral pille der falder i med resten af designet frem for at råbe. */
.anagram-hint-row { display: flex; justify-content: center; margin: 16px 0 2px; }
.anagram-hint-btn {
  display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--soft);
  border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 18px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.anagram-hint-btn:hover:not(:disabled) { background: var(--chip); border-color: var(--soft); color: var(--ink); }
.anagram-hint-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ============ Labyrint ============ */
.labyrint-hud { display: flex; gap: 10px; justify-content: center; width: 100%; max-width: 420px; margin-top: 14px; }
.labyrint-hud-cell { flex: 1; background: var(--chip); border-radius: 12px; padding: 10px 14px; box-sizing: border-box; }
.labyrint-compass-cell { display: flex; align-items: center; justify-content: center; gap: 11px; }
.labyrint-steps { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.labyrint-steps-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.labyrint-steps-value { margin-top: 2px; font-family: var(--serif); font-size: 22px; color: var(--ink); line-height: 1; }
.labyrint-compass { position: relative; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); box-shadow: inset 0 1px 3px rgba(46, 38, 32, .07); flex: none; }
.labyrint-needle {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-origin: 50% 50%; transition: transform .3s cubic-bezier(.4, 1.3, .5, 1);
}
/* To trekanter der mødes i midten → en spids nål (rød nord-spids, grå syd-hale). */
.labyrint-needle::before, .labyrint-needle::after {
  content: ''; position: absolute; left: -5px; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
}
.labyrint-needle::before { bottom: 0; border-bottom: 17px solid var(--red); }
.labyrint-needle::after { top: 0; border-top: 17px solid var(--soft); }
/* Lille nav i midten. */
.labyrint-compass::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: var(--ink); z-index: 1;
}
.labyrint-compass-text { font-size: 13.5px; color: var(--soft); }
.labyrint-compass-text strong { color: var(--ink); font-family: var(--serif); font-size: 17px; }

/* Synsfeltet: et fast vindue med et glidende plan indeni. Vægge tegnes IKKE som streger — de er
   bare de mørke mellemrum mellem afrundede rum, så der ikke opstår hårde hjørner. */
.labyrint-view-wrap { display: flex; justify-content: center; margin: 2px 0; }
.labyrint-view { position: relative; overflow: hidden; background: var(--ink); border-radius: 16px; }
.labyrint-plane { position: absolute; }
.labyrint-room { position: absolute; background: var(--chip); border-radius: 12px; }
/* Felterne lige ved siden af prikken kan klikkes for at flytte (som i Undvig). */
.labyrint-room.adjacent { cursor: pointer; transition: background .12s ease; }
.labyrint-room.adjacent:hover { background: var(--dash2); }
.labyrint-room.goal { background: var(--green-p); }
.labyrint-room.goal::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%; background: var(--green); animation: labyrintPulse 1.4s ease-in-out infinite;
}
@keyframes labyrintPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(.7); opacity: .55; }
}
.labyrint-door { position: absolute; background: var(--chip); border-radius: 7px; }
.labyrint-player {
  position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E8A898, #BD6A55);
  box-shadow: 0 2px 10px rgba(189, 106, 85, .5); z-index: 3;
}
.labyrint-player.bump { animation: labyrintBump .28s ease; }
@keyframes labyrintBump {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(0, -3px) scale(.94); }
  65% { transform: translate(0, 2px); }
}

.labyrint-dpad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 48px); gap: 6px; justify-content: center; }
.labyrint-dkey {
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--ink);
  cursor: pointer; user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent;
  transition: background .1s ease, transform .08s ease; font-family: var(--sans);
}
.labyrint-dkey:hover { background: var(--chip); }
.labyrint-dkey:active { transform: scale(.94); }
.labyrint-dkey.spacer { visibility: hidden; cursor: default; }

.labyrint-status { text-align: center; min-height: 22px; font-size: 14px; font-weight: 500; }
.labyrint-status.info { color: var(--muted); }
.labyrint-status.win { color: var(--green-d); font-weight: 600; }
.labyrint-status.fail { color: var(--red-d); font-weight: 600; }

/* ============ Rækkefølgen ============ */
.raekkefoelgen-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 4px; }
.raekkefoelgen-tile {
  width: 56px; height: 56px; border-radius: 12px; background: var(--chip); border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--muted);
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.raekkefoelgen-tile.shown { background: #fff; border-color: var(--dash); }
.raekkefoelgen-tile.hidden { color: var(--faint); font-size: 22px; font-weight: 700; }
.raekkefoelgen-tile.active { border: 2px solid var(--amber); color: var(--amber-d); font-size: 22px; font-weight: 700; animation: raekkefoelgenPulse 1.2s ease-in-out infinite; }
.raekkefoelgen-tile.correct { background: var(--green-p); border-color: var(--green); }
.raekkefoelgen-tile.wrong { background: var(--red-p); border-color: var(--red); animation: raekkefoelgenShake .4s ease-out; }
.raekkefoelgen-tile.revealed { background: var(--chip); border-color: var(--dash); opacity: .55; }

@keyframes raekkefoelgenPulse { 0%, 100% { border-color: var(--amber); } 50% { border-color: var(--line); } }
@keyframes raekkefoelgenShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.raekkefoelgen-palette { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; max-width: 380px; }
.raekkefoelgen-choice {
  width: 46px; height: 46px; border-radius: 10px; background: #fff; border: 1.5px solid var(--dash);
  font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .12s ease, transform .08s ease;
}
.raekkefoelgen-choice:hover { background: var(--chip); }
.raekkefoelgen-choice:active { transform: scale(.94); }

/* ============ Skelet: fælles spilkomponenter ============
   header, label+titel, timer, HUD, beskrivelse, knapper — se js/shared/shell.js.
   Endnu ikke koblet ind i noget spil (sker spil for spil, jf. REFAKTORERING.md). */
.shell-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.shell-header-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.shell-header-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.shell-header-icon .glyph { font-family: var(--serif); font-size: 15px; letter-spacing: -.02em; }
.shell-header-name { font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.shell-header-meta { display: flex; gap: 8px; flex: none; }
.shell-meta-btn {
  width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  color: var(--soft); transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.shell-meta-btn:hover { border-color: var(--faint); color: var(--ink); }
.shell-meta-btn.flame { background: var(--amber-p); border-color: var(--amber-p); color: var(--amber-d); }
.shell-meta-btn.flame:hover { border-color: var(--amber); }

.shell-label-title { text-align: center; margin-top: 8px; }
.shell-label { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.shell-title { margin-top: 4px; font-family: var(--serif); font-size: 24px; color: var(--ink); }

.shell-timer { width: 100%; max-width: 420px; margin-top: 14px; }
.shell-timer-row { display: flex; justify-content: space-between; align-items: baseline; }
.shell-timer-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.shell-timer-value { font-family: var(--serif); font-size: 22px; color: var(--ink); line-height: 1; }
.shell-timer-value.low { color: var(--red-d); }
.shell-timer-bar { height: 6px; background: var(--chip); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.shell-timer-fill { height: 100%; border-radius: 999px; background: var(--ink); transition: width .2s linear; }
.shell-timer-fill.low { background: linear-gradient(90deg, var(--amber), var(--red)); }

.shell-hud { display: flex; gap: 10px; justify-content: center; width: 100%; max-width: 420px; margin-top: 14px; }
.shell-hud-cell { flex: 1; text-align: center; padding: 10px 14px; background: var(--chip); border-radius: 12px; }
.shell-hud-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.shell-hud-value { margin-top: 2px; font-family: var(--serif); font-size: 22px; color: var(--ink); line-height: 1; }

.shell-description { font-size: 13.5px; color: var(--muted); text-align: center; line-height: 1.5; max-width: 480px; margin-top: 18px; }
.shell-description.wiggle { animation: wiggle .3s ease; color: var(--amber-d); }

/* Primærknap med dobbelt kant — ringen har samme sandfarve som sidens baggrund, så
   knappen ser ud til at stikke frem fra den hvide spilleflade. Kun denne modifier-klasse
   får ringen; den generelle .btn-dark (Afslut, resultatskærme mv.) er urørt. */
.shell-btn-primary { box-shadow: 0 0 0 4px var(--bg); }
.shell-btn-primary span { display: inline-flex; }

/* Giv op — rød, ikke grå, med lille flagikon. Erstatter .btn-ghost specifikt til denne handling
   (btn-ghost bruges også til neutrale handlinger som "Se kataloget" og skal IKKE være rød). */
.btn-giveup {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  font-size: 14.5px; font-weight: 600; color: var(--red-d); cursor: pointer;
  border-bottom: 1.5px solid var(--red-p); border-radius: 0; padding: 0 0 2px; font-family: var(--sans);
}
.btn-giveup:hover { color: var(--red); border-color: var(--red); }

.shell-btn-refresh { width: 100%; }

/* ============ Skelet: info- og indstillingspanel ============
   Åbnes fra headerens ⓘ/⚙/🔥 — se js/shared/panels.js. Samme "endnu ikke koblet ind"-status
   som resten af skelettet. */
.panel-overlay {
  position: fixed; inset: 0; background: rgba(46, 38, 32, .32); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fadeUp .2s ease both;
}
.panel-card {
  background: #fff; border-radius: 22px; padding: 26px 28px 28px; width: 100%; max-width: 380px;
  box-shadow: 0 20px 60px rgba(46, 38, 32, .25);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-title { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.panel-close {
  width: 28px; height: 28px; border-radius: 8px; border: none; background: var(--chip);
  color: var(--soft); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.panel-close:hover { background: var(--dash2); color: var(--ink); }
.panel-body { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.panel-lead { font-size: 14px; line-height: 1.55; color: var(--soft); }
.panel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-row-label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.panel-row-value { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.panel-row-value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }
.panel-badge { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.panel-badge.curated { background: var(--green-p); color: var(--green-d); }
.panel-badge.generated { background: #E1ECF4; color: #436075; }
/* "Sådan spiller du" — genbrugbar sektion i info-panelet (drevet af spillets meta). */
/* Afsnits-afstand ≈ 80% af line-height (21px ⇒ ~17px). <p> nulstilles, da browserens standard-
   margin ellers lægger sig oven i flex-gappet. */
.panel-howto { display: flex; flex-direction: column; gap: 17px; border-top: 1px solid var(--line); padding-top: 14px; }
.panel-howto-head { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.panel-howto-p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--soft); }
.panel-howto-legend { display: flex; flex-direction: column; gap: 9px; }
.panel-howto-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--soft); }
.panel-howto-sw { width: 22px; height: 22px; border-radius: 6px; flex: none; position: relative; }
.talskub-sw-ok { background: var(--green-p); border: 1px solid var(--green); }

/* Genskab-kontrol i info-panelet: blyant-toggle + udfoldeligt indtastningsfelt. */
.panel-repro { display: flex; flex-direction: column; gap: 10px; }
.panel-repro-toggle { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: transparent; border: none; padding: 0; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--soft); cursor: pointer; }
.panel-repro-toggle:hover { color: var(--ink); }
.panel-repro-form { display: flex; gap: 8px; }
.panel-repro-form[hidden] { display: none; }
.panel-repro-input { flex: 1; min-width: 0; }
.panel-repro-submit { flex: none; }

.panel-segmented { display: flex; gap: 6px; }
.panel-segment {
  flex: 1; background: transparent; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 9px 12px; font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  color: var(--soft); cursor: pointer; transition: all .15s ease;
}
.panel-segment:hover { border-color: var(--faint); color: var(--ink); }
.panel-segment.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ============ Menu-drawer (headerens ☰) ============ */
.menu-day { text-align: center; }
.menu-day-weekday { font-family: var(--serif); font-size: 26px; color: var(--ink); line-height: 1.1; }
.menu-day-date { font-size: 14px; color: var(--soft); margin-top: 2px; }
.menu-weather { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--chip); border-radius: 12px; padding: 11px; }
.menu-weather svg { color: var(--amber); flex: none; }

/* Fremhævet "Dagens program"-blok — eneste sted i menuen der viser fremdrift (dev/DAGSFORM.md §Fase 7). */
.menu-highlight { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--ink); color: var(--bg); border: none; border-radius: 14px; padding: 14px 16px; cursor: pointer; font-family: var(--sans); transition: opacity .15s ease; }
.menu-highlight:hover { opacity: .88; }
.menu-highlight-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.14); color: var(--amber); display: flex; align-items: center; justify-content: center; flex: none; }
.menu-highlight-text { flex: 1; min-width: 0; }
.menu-highlight-title { font-size: 15px; font-weight: 600; }
.menu-highlight-label { font-size: 12.5px; opacity: .72; margin-top: 1px; }
.menu-highlight-chev { color: rgba(255,255,255,.55); flex: none; display: flex; }

.menu-group-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin: 6px 2px -2px; }

/* Én knap-familie for alle navigationsrækker (bruger-ønske 2026-07-28): svag baggrundstoning
   i stedet for en outline, ét niveau — kun den mørke "Dagens program"-blok (.menu-highlight)
   skiller sig ud, jf. brief'ens "ren kontekst, ingen progression" for resten af menuen.
   Spilkataloget havde tidligere sin egen "hero"-flade; den er fjernet, så den kun adskiller
   sig ved placering og tekst, ikke ved egen stil. */
/* Lysere grundfarve (bruger-ønske 2026-07-30: "sandfarven skal evt være lidt lysere") —
   --card-muted i stedet for --chip. Aktiv tilstand markeres nu med en varm accentstreg +
   farvet ikon (brand-orange) i stedet for et helt sort ikon-felt, der stak ud som et
   fremmedelement i appens ellers varme palet ("sort markering... fungerer dårligt"). */
.menu-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card-muted); border: 1px solid transparent; border-radius: 14px; padding: 12px 14px; cursor: pointer; font-family: var(--sans); transition: background .15s ease, box-shadow .15s ease; }
.menu-row:hover { background: var(--chip); }
.menu-row.active { background: var(--chip); }
.menu-row.active .menu-row-icon { background: #fff; color: var(--brand); }
.menu-row-icon { width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; flex: none; }
.menu-row-text { flex: 1; min-width: 0; }
.menu-row-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.menu-row-sub { font-size: 12.5px; color: var(--soft); margin-top: 1px; }
.menu-row-chev { color: var(--dash); flex: none; display: flex; }

/* "Om siden" / "Indstillinger" — rene system-tekstrækker, ingen ikon-boks. */
.menu-system-row { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 11px 4px; font-size: 14px; font-weight: 500; color: var(--soft); cursor: pointer; font-family: var(--sans); }
.menu-system-row:hover { color: var(--ink); }
.menu-system-row svg { color: var(--dash); flex: none; }

/* ============ Drawer-variant af panelet (menuen) ============
   Desktop: glider ind fra højre i fuld højde. Mobil (nedenfor i media query): fra toppen. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawerInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes drawerInTop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.panel-overlay.drawer { align-items: stretch; justify-content: flex-end; padding: 0; animation: fadeIn .18s ease both; }
.panel-card.drawer {
  width: 372px; max-width: 90vw; height: 100%; max-height: 100%; border-radius: 0;
  overflow-y: auto; box-shadow: -20px 0 60px rgba(46, 38, 32, .22);
  animation: drawerInRight .28s cubic-bezier(.22, .61, .36, 1) both;
}
/* D-mærket i menu-drawerens hoved — kun på mobil (se .drawer-brand-kommentar i panels.js). */
.drawer-brand { display: none; }

/* Luk-knappen i draweren ser ud som headerens ☰ (samme mål, hvid bordet flade) i stedet for
   den mindre gråtonede modal-variant — den skal læse som "☰ blev til ✕", ikke som et nyt
   element (bruger-ønske 2026-07-28: "ensret placering på logo og knap"). */
.panel-card.drawer .panel-close {
  width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--ink);
}
.panel-card.drawer .panel-close:hover { border-color: var(--faint); background: #fff; color: var(--ink); }

/* ============ Responsivt ============ */
@media (max-width: 720px) {
  .header { padding: 18px 20px; }
  /* Mobil: ordmærket væk — kun D-mærke · dato · ☰ står tilbage. */
  .brand-name { display: none; }
  /* På mobil står ugedag + dato centreret mellem D-mærket og ☰. */
  .header-day { align-items: center; }
  .header-weekday { font-size: 15px; }
  /* Draweren folder ned fra toppen i fuld bredde i stedet for ind fra højre. */
  .drawer-brand { display: inline-flex; }
  .panel-overlay.drawer { align-items: flex-start; justify-content: stretch; }
  .panel-card.drawer {
    width: 100%; max-width: 100%; height: auto; max-height: 92vh; border-radius: 0 0 22px 22px;
    box-shadow: 0 22px 60px rgba(46, 38, 32, .22); animation: drawerInTop .28s cubic-bezier(.22, .61, .36, 1) both;
    padding: 0;
  }
  /* Menuen fylder nu hele skærmen på mobil (bruger-ønske 2026-07-30) — den er vokset til
     markant flere rækker (Relationer tilføjet, Spilserier omdøbt) end de øvrige
     drawer-paneler, som stadig er korte nok til 92vh-loftet+scroll herover. Ingen
     border-radius forneden: fladen går helt til kanten, ligesom spilskærmen. */
  .panel-card.drawer.menu { height: 100dvh; max-height: 100dvh; border-radius: 0; }
  /* D-mærket og luk-knappen skal lande på nøjagtig samme sted som headerens D-mærke og
     ☰-knap (samme padding), så draweren føles som en fortsættelse af headeren i stedet for
     at hoppe et par pixel ved åbning (bruger-ønske 2026-07-28). */
  .panel-card.drawer .panel-head { padding: 18px 20px 0; }
  .panel-card.drawer .panel-body { padding: 0 20px 28px; }
  .page, .game-page { padding-left: 20px; padding-right: 20px; }
  /* Spilskærmen: hvid, fuld højde, ingen kort-ramme — spillet får hele fladen. */
  .game-page { min-height: 100dvh; display: flex; flex-direction: column; background: #fff; padding: 8px 16px 16px; }
  .game-page #game-area { flex: 1; display: flex; flex-direction: column; }
  .game-page .board { flex: 1; margin-top: 8px; background: transparent; border: none; border-radius: 0; padding: 12px 0; justify-content: center; }
  .hero-title { font-size: 32px; min-width: 0; }
  /* Uden nowrap falder bytte-knappen ned på sin egen linje under titlen og står alene.
     Titlen brydes hellere over to linjer, så knappen bliver i hjørnet. */
  .hero-row { flex-wrap: nowrap; align-items: center; gap: 14px; }
  .swap-btn { flex: none; }
  /* Bjælken forbliver en række: flammen (og dens streg) spænder over den fulde højde,
     mens alt til højre for stregen stakkes — der er ikke plads til tre zoner på 375px.
     status-flame/status-sep har align-self: stretch og følger derfor med af sig selv. */
  .status-card { gap: 12px; padding: 12px 16px; }
  /* Indholdet stakkes og centreres i fladen til højre for flammen. */
  .status-main { flex-direction: column; align-items: center; gap: 10px; }
  .status-main .status-sep { display: none; }
  .status-today { flex: none; justify-content: center; }
  /* Stimetekst og syv prikker kan heller ikke dele en række her. */
  .status-streak { flex-direction: column; align-items: center; gap: 10px; }
  .board { padding: 24px 14px; }
  .wordle-cell { width: 46px; height: 46px; font-size: 20px; }
  .sudoku-cell { width: 34px; height: 34px; font-size: 15px; }
  .slangen-cell { width: 44px; height: 44px; }
  .cross-cell { width: 38px; height: 38px; }
  .skak-board { grid-template-columns: repeat(8, 40px); grid-template-rows: repeat(8, 40px); }
  .skak-square { font-size: 26px; }
  .skak-brik svg { width: 26px; height: 26px; }
  .dato-grid { grid-template-columns: repeat(7, 40px); grid-auto-rows: 40px; gap: 4px; }
  .dato-cell { font-size: 11px; }
  .anagram-sentence { gap: 8px 10px; }
  .anagram-tile { width: 31px; height: 39px; font-size: 17px; }
  .memory-grid { grid-template-columns: repeat(var(--cols, 4), var(--card-size-mobile, 58px)); gap: var(--card-gap-mobile, 8px); }
  .memory-card { width: var(--card-size-mobile, 58px); height: var(--card-size-mobile, 58px); font-size: var(--card-font-mobile, 26px); }
  .celebrate-title { font-size: 34px; }
  .undvig-arena { transform: scale(.70); transform-origin: top center; margin-bottom: -148px; }
}

/* ============ Forsiden (dev/FORSIDE.md §Fase 0) ============
   Samme smalle, centrerede søjle som programmet — forsiden og det, den fører ind i, skal
   ligge på samme bredde, ellers "hopper" fladen, når man går ind og ud.

   Layoutet er en tærskel, ikke et dashboard (§2.1): hero øverst, ét kald nederst, og det
   tomrum, der bliver tilovers, æder flex'en midt imellem. Er hero'ens harmonika foldet ud,
   forsvinder tomrummet og siden scroller — dét er i orden, for man har selv bedt om at se
   mere.

   Ingen fadeUp på .home-page selv: vejr og begivenheder kommer async og udløser hver sin
   gen-rendering, og uden denne override ville hele siden spille sin indgangsanimation forfra,
   hver gang noget landede. Samme problem og samme løsning som .prog-page.screen. */
.home-page { max-width: 480px; margin: 0 auto; padding: 8px 20px 32px; display: flex; flex-direction: column; min-height: calc(100dvh - 86px); }
.home-page.screen { animation: none; }
/* margin-bottom sikrer en MINDSTE afstand ned til kaldet. Kaldets egen margin-top:auto giver
   0, så snart siden ikke har ledig plads — og det gør den ikke, når harmonikaen er foldet ud
   (bruger-rapport 2026-08-02: kortet og kaldet stødte sammen). Auto-margenen lægger sig oven
   i denne, så luften stadig fordeles, når der ER plads. */
.home-hero { animation: fadeUp .35s ease both; margin-bottom: 16px; }

.home-weekday { font-family: var(--serif); font-size: 46px; line-height: 1.05; letter-spacing: -.01em; }
/* Dato og ugenummer tæt på ugedagen og med vægt (bruger-ønske 2026-08-02) — de stod før som
   én dæmpet 14px-linje med luft over og forsvandt under overskriften. */
.home-datebar { display: flex; align-items: baseline; gap: 9px; margin-top: 3px; }
.home-datebar b { font-size: 17px; font-weight: 600; }
.home-datebar span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--chip); border-radius: var(--r-pill); padding: 3px 9px; }

/* Hero'ens to hvide kort: vejret og dagens fakta. Samme flade som programkortenes
   --card-white, så forsiden og kortene i stien taler samme sprog. */
.home-card { margin-top: 16px; background: var(--card-white); border-radius: var(--r-card); padding: 16px 18px; }
.home-k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.home-v { font-size: 14px; font-weight: 600; margin-top: 2px; }

.home-weather-main { display: flex; align-items: center; gap: 12px; }
.home-weather-icon { display: flex; flex: none; color: var(--bla-accent); }
.home-weather-icon svg { width: 28px; height: 28px; }
.home-temp { font-family: var(--serif); font-size: 32px; line-height: 1; flex: none; }
.home-weather-desc { font-size: 13.5px; color: var(--soft); line-height: 1.35; }
.home-weather-grid { display: flex; gap: 20px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.home-weather-wait { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }

.home-fact-text { font-size: 15.5px; line-height: 1.55; margin-top: 6px; }

/* Harmonikaen i faktakortet: faktalinjen står altid, begivenhederne folder ud under den.
   Chevronen roterer i stedet for at skifte ikon, og den native markør skjules — ellers står
   der en trekant foran vores egen tekst. */
.home-acc { margin-top: 12px; border-top: 1px solid var(--line); }
.home-acc-sum { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 11px 0 3px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--soft); cursor: pointer; text-align: left; }
.home-acc-sum:hover { color: var(--ink); }
.home-acc-sum svg { transition: transform .2s ease; flex: none; }
.home-acc.open .home-acc-sum svg { transform: rotate(90deg); }
.home-acc-body { padding-bottom: 4px; }
.home-event { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.home-event:last-child { border-bottom: none; }
.home-event-year { font-family: var(--serif); font-size: 14px; color: var(--muted); flex: none; width: 42px; }
.home-event-text { font-size: 13.5px; line-height: 1.45; }

/* Kaldet (valgt variant 3 af dev/varianter.html). margin-top:auto skubber det til bunden —
   se tomrums-noten øverst.

   Ikonrækken er dagens fremdriftsmåler: dæmpede ikoner for det, der mangler, grønne for det,
   der er klaret (screens/home.js's progressIconsHTML). Teksten er ren hvid, ikke --bg:
   appens off-white er varm og bliver grumset på den mørke flade. */
.home-cta { margin-top: auto; width: 100%; background: var(--ink); border: none; border-radius: var(--r-card); padding: 17px 18px; color: #fff; cursor: pointer; font-family: var(--sans); text-align: left; animation: fadeUp .45s ease both; transition: opacity .15s ease, background .25s ease; }
.home-cta:hover { opacity: .92; }
.home-cta-top { display: flex; align-items: center; gap: 12px; }
.home-cta-txt { flex: 1; min-width: 0; }
.home-cta-label { display: block; font-family: var(--serif); font-size: 23px; font-weight: 400; letter-spacing: -.01em; }
.home-cta-sub { display: block; font-size: 12.5px; opacity: .6; margin-top: 1px; }
.home-cta-arrow { display: flex; flex: none; opacity: .8; }

.home-cta-icons { display: flex; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.home-cta-icons i { width: 28px; height: 28px; flex: none; border-radius: 9px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; transition: background .25s ease, color .25s ease; }
.home-cta-icons i svg { width: 14px; height: 14px; }
.home-cta-icons i.done { background: var(--green); color: #fff; }

/* Færdig dag: kaldet klapper sammen (bruger-ønske 2026-08-02) — pilen er væk, skillelinjen
   over ikonrækken forsvinder, og fladen bliver grøn. Ikonerne står tilbage som rækken af
   grønne mærker; de erstatter de flueben, tilstanden havde før. */
.home-cta.done { background: var(--green-p); color: var(--green-d); }
.home-cta.done .home-cta-sub { opacity: .75; }
.home-cta.done .home-cta-icons { margin-top: 12px; padding-top: 0; border-top: none; }
.home-cta.done .home-cta-icons i { background: var(--green); color: #fff; }

/* Fodfeltets rækker (bruger-ønske 2026-08-02) — ÉN komponent til begge grupper: samme
   opbygning som Relationer-undersidens åbne opgaver (.pt-saved-row: farvestreg, titel,
   undertekst i kategoriens farve), med kategoriens ikon tilføjet yderst til venstre som i
   menu-drawerens rækker.

   Det gør to ting på én gang: en åben opgave ser ens ud på forsiden og på undersiden, og
   spilserien læses som en destination i menuen frem for som endnu et punkt i dagens program.

   Listen har hvid bund som undersidens, så rækkerne løftes ud af den varme sidebaggrund og
   tydeligt hører til noget andet end kaldet ovenfor. */
.home-links { margin-top: 22px; }
.home-links-label { margin: 0 0 6px 2px; }
.home-links-label ~ .home-links-label { margin-top: 18px; }
.home-list { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-inner); padding: 2px 14px; margin-bottom: 4px; }
.home-row { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: none; border-bottom: 1px solid var(--line); padding: 11px 0; cursor: pointer; font-family: var(--sans); text-align: left; color: var(--dash); transition: opacity .15s ease; }
.home-row:last-child { border-bottom: none; }
.home-row:hover { opacity: .72; }
.home-row-icon { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.home-row-icon svg { width: 16px; height: 16px; }
.home-row-text { flex: 1; min-width: 0; }
.home-row-title { display: block; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-row-sub { display: block; font-size: 11px; margin-top: 2px; }

@media (max-width: 430px) {
  .home-weekday { font-size: 38px; }
  .home-page { min-height: calc(100dvh - 74px); }
}

/* ============ Dagsform — programmet (stien), kortene, kvitteringen (Fase 2) ============
   Smal, centreret søjle (som mockuppets telefon-kort) frem for .page's brede desktop-grid —
   stien viser ét kort ad gangen og skal ikke strække sig ud over en telefonbredde. */

/* Stiens bar: navnet på laget til venstre, vejen ud til højre — samme placering som
   spilskallens luk-knap (bruger-ønske 2026-08-01), så "forlad dette lag" ligger ét fast sted
   i hele appen, og kun tegnet skifter (✕ ud til forsiden, ← ét skridt tilbage). */
.prog-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: none; }
.prog-bar-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.prog-bar-btn { width: 34px; height: 34px; flex: none; background: none; border: none; color: var(--soft); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; margin-right: -8px; border-radius: 10px; transition: color .15s ease; }
.prog-bar-btn:hover { color: var(--ink); }

/* Kvitteringen er parkeret (se screens/receipt.js), men skal stadig kunne tegnes via
   #kvittering — reglen bliver derfor stående sammen med resten af den parkerede kode. */
.receipt-page { max-width: 480px; margin: 0 auto; padding: 12px 20px 48px; }

/* Stien som fuldskærmslag (dev/FORSIDE.md §Fase 1): én flex-kolonne i skærmens fulde højde,
   med baren i toppen, kortet i midten og nav forankret til bunden. Gælder i ALLE bredder —
   stien er ikke længere en side i appen, der skal opføre sig som de øvrige undersider.

   To tal, hver med én betydning:
   --prog-space  pladsen mellem bar og nav, altså alt kortet har at boltre sig på.
   --prog-lead   det faste luftrum OVER kortet, så det sidder i det gyldne snit i stedet for
                 at klistre op under baren (bruger-ønske 2026-08-01). 0.160 = 38 % af den
                 luft (0.42 af pladsen), der bliver tilovers ved kortets idealhøjde — resten
                 falder under kortet, og forholdet over:under bliver ca. 38:62.

   Kortet er TOP-FORANKRET med et fast forspring — ikke centreret. Den regel er ældre end
   denne omlægning og skal blive: centrering ville få korte og høje kort til at starte
   forskellige steder, og netop dét "hop" var en rapporteret fejl i sin tid.

   Idealhøjden er 0.58 af pladsen. Den var kortvarigt hævet til 0.75 for at lukke hullet ned
   til nav, men det var det forkerte greb — hullet skyldtes kortets PLACERING, ikke dets
   højde, og korte kort (Tip, Refleksion i "ny"-tilstand) blev bare mere tomme indeni.
   Forspringet ovenfor løser placeringen, så højden kunne sættes ned igen; 0.58 lander på
   omtrent samme korthøjde som før hele omlægningen. Det er den dial, der skal skrues på,
   hvis kortene stadig føles for høje. */
.prog-shell { --prog-space: calc(100dvh - 130px); --prog-lead: calc(var(--prog-space) * 0.160); display: flex; flex-direction: column; min-height: 100dvh; }
.prog-page { max-width: 480px; width: 100%; margin: 0 auto; padding: 16px 20px; display: flex; flex-direction: column; flex: 1; }
/* Scopet til .prog-shell, ikke bare .prog-card: den generiske .prog-card-regel længere nede
   sætter selv min-height (360px) og står senere i filen, så en uscopet regel her ville tabe.
   Og det SKAL være scopet — den parkerede overbliks-liste rendrer også .prog-card, uden
   skal, og dér gælder netop ikke en skærmhøjde-formel. */
.prog-shell .prog-card {
  flex: none;
  margin-top: var(--prog-lead);
  min-height: calc(var(--prog-space) * 0.58);
  max-height: calc(var(--prog-space) - var(--prog-lead));
  overflow-y: auto;
}

.prog-page.screen { animation: none; }
.prog-title { margin: 0 0 16px; }

/* PARKERET sammen med togglen selv (dev/FORSIDE.md §2.5): .prog-title og .prog-view-*
   har ingen markup bag sig længere, men står som resten af overbliks-koden.
   Titel + karrusel/overblik-toggle på samme linje (bruger-ønske 2026-07-31) — samme
   "titel + hjørne-knap"-mønster som free-series.js's .hero-row/.swap-btn. align-items:center
   + toggle som flex:none betyder rækkens højde stadig styres af .prog-title alene (den er
   højere end pillen), så .prog-shell's mobile idealhøjde-formler (nedenfor) IKKE skal
   genberegnes — kun karrusel-visningen bruger dem, og dens titel-højde er uændret. */
.prog-view-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: nowrap; }
.prog-view-row .prog-title { margin: 0 0 16px; flex: 1 1 auto; min-width: 0; }
.prog-view-toggle { display: flex; background: var(--chip); border-radius: var(--r-pill); padding: 3px; flex: none; margin-bottom: 16px; }
.prog-view-btn { font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: var(--r-pill); border: none; background: none; color: var(--soft); cursor: pointer; font-family: var(--sans); }
.prog-view-btn.on { background: var(--ink); color: var(--card-white); }

/* Overblik — alle kort stablet på én almindelig, frit scrollende side (ikke .prog-shell's
   fast-højde-karrusel). Samme kortbredde som karrusellen (480px), bare uden dens special-
   layout, jf. filhovedets note i screens/program.js. */
.prog-overview { max-width: 480px; margin: 0 auto; padding: 24px 20px 48px; }
.prog-overview-list { display: flex; flex-direction: column; gap: 16px; }
.prog-overview-list .prog-card { animation: none; }
/* .prog-card's 360px min-height (nedenfor) er en karrusel-idealhøjde — dén er der ingen brug
   for i overblik (bruger-ønske 2026-07-31, "kort højde kan skalere til indhold"): en fri
   scrollende liste skal ikke tvinge fx Om dagen/Tips til at være lige så høje som Refleksioner
   med et åbent notefelt, det giver bare unødigt tomrum. Kortet skrumper derfor til sit eget
   indhold + padding. */
.prog-overview-list .prog-card { min-height: 0; }

.prog-card { border-radius: var(--r-card); padding: 20px; min-height: 360px; display: flex; flex-direction: column; animation: fadeUp .3s ease both; }
.prog-card:focus-visible { outline: 2px solid var(--faint); outline-offset: 3px; }
.prog-tag-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prog-tag-group { display: flex; align-items: center; gap: 8px; }
.prog-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.prog-tag-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); display: inline-block; }
.prog-badge { font-size: 11px; font-weight: 600; background: rgba(255,255,255,.7); border-radius: var(--r-pill); padding: 4px 11px; flex: none; }
/* Grupperer badge + evt. en anden højreelement (fx Refleksionens i går/i dag-pille, se
   cards/reflection.js) til ÉT flex-barn af tagRow'en, så tagRow's justify-content:
   space-between kun spreder to ting ud (kickers vs. dette), ikke tre. */
.prog-tag-right { display: flex; align-items: center; gap: 8px; flex: none; }
.prog-card-title { font-family: var(--serif); line-height: 1.25; margin: 14px 0 6px; }
.prog-card-sub { font-size: 12px; color: var(--soft); margin: 0 0 16px; }
.prog-card-body { font-size: 14.5px; line-height: 1.55; margin: 0 0 14px; }
.prog-card-btn { border: none; border-radius: var(--r-item); padding: 13px; font-size: 14.5px; font-weight: 600; color: #fff; cursor: pointer; margin-top: 0; margin-bottom: 11px; transition: opacity .15s ease; }
.prog-card-btn:hover { opacity: .88; }
.prog-card-btn.dark { background: var(--ink) !important; }
.prog-card-skip { border: none; background: none; font-size: 12.5px; color: var(--faint); cursor: pointer; padding: 0; text-align: center; }
/* Footer-linket er en fuldbredt "knap-zone" der bryder ud af kortets 20px padding (bruger-
   ønske 2026-08-01: linjen skal gå helt igennem kortet, ikke kun i det polstrede indholdsfelt,
   og hele bund-delen af kortet skal fremstå som sin egen knap) — negativ margin i
   sider+bund trækker zonen ud til kortets kant, bund-hjørnerne rundes selvstændigt så de
   matcher kortets border-radius.

   Farverne er nu alle udledt af kortets EGEN baggrund (--card-bg, sat pr. kort af
   skeleton.js's cardShell) via color-mix() i stedet for én fast farve fælles for alle kort
   — en fast hvid/grå overlay gav for lav kontrast og virkede løsrevet fra kortets tema
   (bruger-rapport 2026-08-01: "baggrund skal være tættere på kortets temafarve"). Samme
   opskrift alle fire steder, kun blande-andelen af sort varierer:
   - baggrund   5% sort  → en anelse mørkere end kortet, stadig tydeligt "samme flade"
   - hover      9% sort  → synligt trykrespons uden at skifte farvetema
   - streglinje 16% sort → tydelig men stadig kortets egen nuance, holdt på 1px
   - tekst/ikon 82% sort → mørk nok til solid kontrast på alle kortfarver, inkl. det hvide
     Om Dagen-kort, men stadig ganske let tonet af kortets farve i de resterende 18% */
.prog-card-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: color-mix(in srgb, var(--card-bg, var(--bg)) 18%, black 82%);
  background: color-mix(in srgb, var(--card-bg, var(--bg)) 100%, black 5%);
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--card-bg, var(--bg)) 100%, black 16%);
  border-radius: 0 0 var(--r-card) var(--r-card);
  margin: 0 -20px -20px;
  padding: 8px 20px;
  cursor: pointer;
  transition: background .15s ease;
}
button.prog-card-link:hover { background: color-mix(in srgb, var(--card-bg, var(--bg)) 100%, black 9%); }
div.prog-card-link { cursor: default; }
/* Afstanden fra sidste handlingsknap NED TIL footer-zonen skal matche kortets egen
   padding-top (20px) — bruger-rapport 2026-08-01: det er DENNE afstand (knap → Læs mere),
   ikke footerens interne tekst-padding, der skal spejle kortets top. Class-uafhængig (:has
   på et generisk barn af actionsWrap), så den også rammer fx .reflection-secondary, ikke
   kun .prog-card-btn. */
.prog-card-actions > *:has(+ .prog-card-link) { margin-bottom: 20px; }
/* Bund-forankring for ét eller flere afsluttende elementer samlet (se skeleton.js's
   actionsWrap) — én margin-top:auto for hele klyngen frem for én pr. knap, så flere
   elementer i træk ikke deler den ledige plads mellem sig og ender spredt ud over kortet. */
.prog-card-actions { display: flex; flex-direction: column; margin-top: auto; }
.prog-card-actions:last-child .prog-card-btn:last-child { margin-bottom: 0; }

/* Leder nu selv kortet (bruger-ønske 2026-07-29, ingen dato-overskrift ovenfor længere) —
   derfor margin i stedet for den tidligere border-top, der adskilte vejret fra titlen. */
.prog-day-weather { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soft); margin-top: 14px; padding-bottom: 12px; }
.prog-day-weather.ready { align-items: center; }
.prog-day-temp { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.prog-day-weather-text p { margin: 0; }
.prog-day-weather-text p:first-child { font-size: 14px; color: var(--ink); }
.prog-day-weather-sub { font-size: 12px; color: var(--soft); margin-top: 2px !important; }
.prog-day-fact { padding: 12px 0 0; border-top: 1px solid var(--line); flex: 1; }
.prog-day-fact .prog-card-body { margin-top: 6px; margin-bottom: 0; }

/* ============ Om dagen-undersiden (Fase 5) ============ */
.pd-page { max-width: 560px; }
.pd-title { line-height: 1.15; margin: 0 0 4px; }
.pd-week { font-size: 13px; color: var(--soft); margin: 0 0 22px; }
.pd-card { background: #fff; border-radius: var(--r-inner); padding: 16px; margin-bottom: 12px; }
.pd-card-label { margin: 0 0 12px; }
.pd-weather-main { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pd-weather-temp { font-family: var(--serif); font-size: 28px; line-height: 1; margin: 0; }
.pd-weather-desc { font-size: 13px; color: var(--soft); margin: 5px 0 0; }
.pd-weather-grid { display: flex; justify-content: space-between; padding-top: 13px; border-top: 1px solid var(--line); }
.pd-weather-k { font-size: 11px; color: var(--faint); margin: 0; }
.pd-weather-v { font-size: 14px; margin: 3px 0 0; }
.pd-fact-text { font-size: 15px; line-height: 1.55; margin: 0; }

.pd-events { padding: 4px 16px; }
.pd-event-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.pd-event-row:last-child { border-bottom: none; }
.pd-event-year { font-family: var(--serif); font-size: 15px; color: var(--gul-accent); margin: 0 0 4px; }
.pd-event-text { font-size: 14px; line-height: 1.5; margin: 0; }
.pd-events-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 6px 0; }

.pd-quiz-link { display: flex; align-items: center; gap: 12px; background: var(--bla-bg); border-radius: var(--r-inner); padding: 15px; margin-top: 14px; }
.pd-quiz-icon { width: 38px; height: 38px; border-radius: var(--r-icon); display: flex; align-items: center; justify-content: center; flex: none; color: var(--bla-accent); }
.pd-quiz-text { flex: 1; min-width: 0; }
.pd-quiz-title { font-family: var(--serif); font-size: 16px; color: var(--bla-ink); margin: 0; }
.pd-quiz-sub { font-size: 12px; color: var(--bla-accent); margin: 2px 0 0; }

/* ============ Gode nyheder-undersiden ============ */
.pn-page { max-width: 560px; }
.pn-sub { font-size: 13px; color: var(--soft); margin: 0 0 22px; }
.pn-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.pn-item { background: #fff; border-radius: var(--r-inner); padding: 16px; }
.pn-item-title { font-family: var(--serif); font-size: 17px; line-height: 1.3; margin: 0 0 8px; font-weight: 600; }
.pn-item-resume { font-size: 14.5px; line-height: 1.55; color: var(--soft); margin: 0 0 12px; }
.pn-sources { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-source { font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--chip); border-radius: var(--r-pill); padding: 5px 12px; text-decoration: none; }
.pn-source:hover { background: var(--dash2); }

/* Ikon + titel side om side — det fælles hoved alle fire indslagstyper deler (skeleton.js's
   cardHead, dev/DESIGNSYSTEM.md §4). Kickers ligger i tagRow'en ovenfor, ikke her; denne
   klasse rummer derfor kun selve ikon+titel-parret. Efter mockup-sektion 1's "Dagens spil ·
   kategorifarve, knap" (bruger-ønske 2026-07-28), nu genbrugt af Spil/Refleksioner/
   Relationer/Tips (bruger-ønske 2026-07-30 — rettede diskrepansen mellem de to kortpar). */
.prog-card-head { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; }
.prog-card-head .prog-card-title { flex: 1; min-width: 0; margin: 0; }
.prog-card-head-icon { width: 40px; height: 40px; border-radius: var(--r-icon); background: #fff; display: flex; align-items: center; justify-content: center; flex: none; }

/* Dagens spil, løst (bruger-ønske 2026-07-29): en nedskaleret udgave af selve spillets
   afsluttende succes-visning (se .result-icon/.result-sub i "Resultat-paneler" ovenfor) i
   stedet for det ikke-løste korthoved med en påhægtet "er løst" — de to lignede hinanden for
   meget. Genbruger klasserne, overskriver kun størrelse/margin til kortets format. */
.prog-game-result { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 18px 0 14px; }
.prog-game-result .result-icon { width: 60px; height: 60px; background: var(--green); }
.prog-game-result .result-icon svg { width: 26px; height: 26px; }
.prog-game-result .prog-card-title { margin: 14px 0 2px; }
.prog-game-result .result-sub { margin-top: 0; font-size: 13px; }

/* Seriens fremskridt — genbruger kvitteringens dash-stil (.receipt-series-dash) i stedet for
   et nyt sæt klasser, nu hvor den fulde stats-boks er væk. Lille overskrift over dashene
   (bruger-ønske 2026-07-29) i stedet for et tal ved siden af. */
.prog-game-result-progress { margin: 0 0 16px; }
.prog-game-result-progress-label { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--green-d); margin: 0 0 8px; }

.prog-reflection-done { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ok-ink); margin-top: auto; }

.prog-tip-bookmark { opacity: .55; background: none; border: none; padding: 4px; cursor: pointer; display: flex; transition: opacity .15s ease, transform .1s ease; }
.prog-tip-bookmark:hover { opacity: .8; }
.prog-tip-bookmark.saved { opacity: 1; transform: scale(1.05); }
.prog-tip-partner { font-size: 11px; color: var(--soft); margin: 14px 0 0; padding-top: 11px; border-top: 1px solid rgba(0,0,0,.08); }

/* margin-top:auto forankrer nav til BUNDEN af .prog-page's flex-kolonne (dev/FORSIDE.md
   §Fase 1) i stedet for at lade den følge lige efter kortet med tomrum under. */
.prog-nav { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 14px 2px 0; }
/* padding:4px gav kun et 30×30px tryk-mål (bruger-rapporteret bug 2026-07-30: "for smalt") —
   under de gængse 44px. Ikonet (22px) er urørt, kun paddingen er vokset. */
.prog-chevron { background: none; border: none; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 11px; }
.prog-chevron.dim { color: var(--faint); cursor: default; }
/* Fremdriftsmærker, fire tilstande (se progressHTML i screens/program.js). Alle mærker fylder
   samme 18px felt, uanset hvor stort selve tegnet er — ellers ville rækken skifte bredde og
   rykke sig, efterhånden som kort blev klaret.

   Ingen farve: mærkerne sidder på arbejdsfladen, og grøn er reserveret til dagens afslutning
   på forsiden. */
.prog-dots { display: flex; gap: 8px; align-items: center; }
.prog-dots i {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; transition: background .2s ease, border-color .2s ease;
}
/* Ikke besøgt: en lille prik midt i feltet — laves med en indadgående kant frem for en
   mindre boks, så feltets størrelse er den samme som de øvriges. */
.prog-dots i.new { border: 6px solid transparent; background: var(--dash2); background-clip: content-box; }
.prog-dots i.seen { border: 1.5px solid var(--faint); }
.prog-dots i.done { background: var(--ink); color: var(--bg); }
/* Hvor man står nu: en ring UDEN OM mærket via box-shadow, så den ikke ændrer feltets
   størrelse og kan lægge sig oven på alle tre tilstande. */
.prog-dots i.now { box-shadow: 0 0 0 2px var(--dash); }
.prog-dots i.seen.now { border-color: var(--soft); }
.prog-finish { display: block; width: 100%; text-align: center; background: none; border: none; font-size: 12px; color: var(--faint); cursor: pointer; margin-top: 12px; padding: 4px; }

.receipt-section-label { margin: 0 0 10px; }
.receipt-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
/* Hele rækken er klikbar (bruger-ønske 2026-07-29: hvert felt linker tilbage til sit kort) —
   button-reset ovenpå den hidtidige div-stil, samme mønster som fx .pg-date-row. */
.receipt-row { display: flex; align-items: center; gap: 11px; width: 100%; background: #fff; border: none; border-radius: var(--r-item); padding: 12px; min-height: 60px; text-align: left; cursor: pointer; font-family: var(--sans); transition: background .12s ease; }
.receipt-row:hover { background: var(--card-muted); }
.receipt-row.skipped { border: 1px dashed var(--dash); }
.receipt-icon { width: 34px; height: 34px; border-radius: var(--r-icon); display: flex; align-items: center; justify-content: center; flex: none; }
.receipt-text { flex: 1; min-width: 0; }
.receipt-tag { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.receipt-line { font-size: 13.5px; margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.receipt-row.skipped .receipt-line { color: var(--muted); }
.receipt-state { flex: none; }
/* Rent visuelt fra nu af (et <span>) — rækken selv bærer klikket, så "Tag den" må ikke
   være endnu et interaktivt element indeni. */
.receipt-retake { display: inline-block; background: var(--chip); color: var(--soft); font-size: 11.5px; font-weight: 600; border-radius: var(--r-pill); padding: 6px 12px; }
/* "Til kortene" (bruger-ønske 2026-07-30) — samme stille tekst-knap-vægt som kortstiens
   .prog-finish (der samme rejse den anden vej), ikke .receipt-share's understregede vægt:
   det er en rolig retur, ikke en handling man skal lægge mærke til. */
.receipt-back { display: block; width: 100%; text-align: center; background: none; border: none; font-size: 12px; color: var(--faint); cursor: pointer; margin: 4px 0 10px; padding: 4px; font-family: var(--sans); }
.receipt-back:hover { color: var(--soft); }
.receipt-share { display: block; width: 100%; text-align: center; font-size: 13px; color: var(--muted); margin: 0 0 6px; background: none; border: none; padding: 4px; font-family: var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.receipt-share:hover { color: var(--ink); }
.receipt-tomorrow { text-align: center; font-size: 12px; color: var(--faint); margin: 0; }

/* Spil-rækkens udvidede underblok (Fase 3) — seriens fremskridt + "Tag serien". Den ydre
   .receipt-row.spil er selve den hvide, afrundede flade (som før), men ikke længere selv
   klikbar (den rummer nu to søskende-knapper, se receipt.js) — kun .receipt-row-top
   (ikon/tekst/status) linker tilbage til kortet, "Tag serien" er sin egen knap. */
.receipt-row.spil { flex-direction: column; align-items: stretch; padding: 12px 12px 0; min-height: 0; cursor: default; }
.receipt-row.spil:hover { background: #fff; }
.receipt-row-top { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: none; padding: 0; margin: 0; text-align: left; cursor: pointer; font-family: var(--sans); color: inherit; transition: opacity .12s ease; }
.receipt-row-top:hover { opacity: .78; }
.receipt-series-sub { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 11px 0; border-top: 1px solid var(--line); }
.receipt-series-dashes { flex: 1; display: flex; gap: 3px; }
.receipt-series-dash { flex: 1; height: 4px; border-radius: 2px; background: var(--chip); }
/* Dagens spils segment skiller sig altid en anelse ud (bruger-ønske 2026-07-30) — brightness
   frem for en fast farve, så det virker uanset om seriens accentfarve er lys eller mørk. */
.receipt-series-dash.today { filter: brightness(.88); }
.receipt-series-link { display: flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; background: none; border: none; padding: 0; cursor: pointer; }


/* ============ Spil-undersiden (Fase 3) ============ */
.pg-page { max-width: 720px; }
.pg-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.pg-header-count { font-size: 13px; color: var(--muted); }
/* Lidt mere luft (bruger-ønske 2026-07-30: "for sammenklemte") — større gap mellem rækker,
   mere padding i hver, og lidt mere plads mellem topzonen (ikon/titel/status) og bunden
   (beskrivelse). */
.pg-series-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.pg-game-card { border: none; text-align: left; border-radius: var(--r-inner); padding: 18px; cursor: pointer; font-family: var(--sans); color: var(--ink); }
.pg-game-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pg-game-icon { width: 40px; height: 40px; border-radius: var(--r-icon); background: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.pg-game-heading { flex: 1; min-width: 0; }
.pg-game-heading .prog-tag { margin: 0 0 2px; }
.pg-game-badges { display: flex; align-items: center; gap: 8px; flex: none; }
/* Fed sans i stedet for Gloock (bruger-ønske 2026-07-30) — samme logik som .menu-row-title/
   .catalog-name: Gloock er forbeholdt ét-fokus overskrifter (kort, hero-titler), hvor den er
   selve indholdet; i en scan-liste med flere spil ad gangen virkede den tunge serif som fyld,
   når beskrivelsen alligevel følger lige under. */
.pg-game-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.pg-game-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pg-game-desc { font-size: 13px; margin: 0; flex: 1; }

.pg-streak-box { background: #fff; border-radius: var(--r-inner); padding: 15px; margin-bottom: 26px; }
.pg-streak-head { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; color: var(--brand); }
.pg-streak-n { font-family: var(--serif); font-size: 19px; margin: 0; color: var(--ink); }
.pg-streak-sub { font-size: 12px; color: var(--soft); margin: 1px 0 0; }
.pg-streak-box .streak-days { justify-content: space-between; margin: 0 0 13px; }
.pg-legend { display: flex; gap: 13px; padding: 11px 0; border-top: 1px solid var(--line); margin-bottom: 13px; flex-wrap: wrap; }
.pg-legend span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--soft); }
.pg-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pg-stats { display: flex; justify-content: space-around; }
.pg-stats-n { font-family: var(--serif); font-size: 22px; margin: 0; }
.pg-stats-l { font-size: 11px; color: var(--soft); margin: 1px 0 0; }
.pg-stats-sep { width: 1px; background: var(--line); }

.pg-date-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.pg-date-row { display: flex; align-items: center; gap: 12px; background: #fff; border: none; border-radius: 13px; padding: 13px; cursor: pointer; text-align: left; font-family: var(--sans); color: var(--ink); }
.pg-date-row.inert { cursor: default; opacity: .6; }
.pg-date-icon { width: 36px; height: 36px; border-radius: var(--r-icon); display: flex; align-items: center; justify-content: center; flex: none; }
.pg-date-text { flex: 1; min-width: 0; }
.pg-date-title { font-family: var(--serif); font-size: 16px; margin: 0; }
.pg-date-sub { font-size: 12px; color: var(--soft); margin: 2px 0 0; }
.pg-date-chevron { color: var(--faint); flex: none; }

.pg-catalog-bar { display: flex; justify-content: space-between; align-items: center; width: 100%; background: var(--ink); border: none; border-radius: var(--r-inner); padding: 16px; cursor: pointer; color: var(--bg); font-family: var(--sans); transition: opacity .15s ease; }
.pg-catalog-bar:hover { opacity: .88; }
.pg-catalog-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pg-catalog-title { font-size: 15px; font-weight: 600; }
.pg-catalog-sub { font-size: 12px; color: var(--faint); }
.pg-catalog-chevron { display: flex; color: rgba(255,255,255,.55); flex: none; }

@media (max-width: 430px) {
  .prog-card { min-height: 320px; padding: 18px; }
  .prog-card-link { margin: 0 -18px -18px; padding: 8px 18px; }
  .prog-card-actions > *:has(+ .prog-card-link) { margin-bottom: 18px; }
}

/* ============ Refleksionskortet — fire tilstande (Fase 4) ============ */
.reflection-toggle { display: flex; background: rgba(255,255,255,.6); border-radius: var(--r-pill); padding: 3px; flex: none; }
.reflection-toggle button { font-size: 11px; padding: 5px 13px; border-radius: var(--r-pill); color: var(--sand-accent); border: none; background: none; cursor: pointer; font-family: var(--sans); }
.reflection-toggle button.on { background: var(--ink); color: var(--card-white); }

.reflection-secondary { width: 100%; background: #fff; border: none; border-radius: var(--r-item); padding: 12px; font-size: 13px; color: var(--ink); cursor: pointer; margin-bottom: 11px; font-family: var(--sans); }
.reflection-note { width: 100%; background: #fff; border: none; border-radius: var(--r-inner); padding: 13px; min-height: 110px; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink); resize: none; margin-bottom: 8px; box-sizing: border-box; }
.reflection-note:focus { outline: 2px solid var(--sand-accent); outline-offset: -2px; }
.reflection-autosave { font-size: 11px; color: var(--faint); margin: 0 0 14px; }
.reflection-followup-note { text-align: center; font-size: 11px; color: var(--faint); margin: 8px 0 0; }

.reflection-note-done { background: rgba(255,255,255,.55); border-radius: var(--r-inner); padding: 13px; min-height: 60px; font-size: 14px; line-height: 1.55; color: var(--ink); margin: 0 0 10px; }
.reflection-empty { color: var(--faint); font-style: italic; }
.reflection-edit-link { display: flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; font-size: 12px; color: var(--sand-accent); cursor: pointer; margin-bottom: 16px; font-family: var(--sans); }

/* ============ Refleksionsundersiden (Fase 4) ============ */
.pr-page { max-width: 560px; }
.pr-page .prog-card { margin-bottom: 26px; }
.reflection-month { font-family: var(--serif); font-size: 15px; color: var(--faint); margin: 0 0 8px; }
.reflection-diary-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.reflection-diary-row { background: #fff; border-radius: var(--r-inner); padding: 14px; }
.reflection-diary-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.reflection-diary-date { font-size: 11px; color: var(--faint); margin: 0; }
.reflection-diary-delete { background: none; border: none; color: var(--faint); cursor: pointer; padding: 0; display: flex; }
.reflection-diary-delete:hover { color: var(--red); }
.reflection-diary-q { font-size: 12px; color: var(--soft); margin: 0 0 6px; }
.reflection-diary-a { font-size: 14px; line-height: 1.5; margin: 0; color: var(--ink); }
.reflection-diary-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 20px 0; }

/* ============ Tips-undersiden (Fase 6) ============ */
.pt-page { max-width: 560px; }
.pt-page .prog-card { margin-bottom: 26px; }
.pt-saved-label { margin-top: 4px; }
.pt-filters { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.pt-filter { font-size: 12px; padding: 6px 12px; border-radius: var(--r-pill); background: #fff; color: var(--soft); border: none; cursor: pointer; font-family: var(--sans); }
.pt-filter.on { background: var(--ink); color: var(--bg); }
.pt-saved-list { display: flex; flex-direction: column; margin-bottom: 26px; background: #fff; border-radius: var(--r-inner); padding: 4px 14px; }
.pt-saved-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pt-saved-row:last-child { border-bottom: none; }
.pt-saved-bar { width: 3px; height: 34px; border-radius: 3px; flex: none; }
.pt-saved-text { flex: 1; min-width: 0; }
.pt-saved-title { font-size: 14px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-saved-sub { font-size: 11px; color: var(--faint); margin: 2px 0 0; }
.pt-saved-remove { background: none; border: none; color: var(--faint); cursor: pointer; padding: 0; display: flex; flex: none; }
.pt-saved-remove:hover { color: var(--red); }
.pt-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; text-align: center; padding: 30px 20px; background: #fff; border-radius: var(--r-inner); margin-bottom: 26px; }
.pt-empty svg { opacity: .5; }
.pt-empty p { margin: 0; }
.pt-explainer { display: flex; align-items: flex-start; gap: 10px; background: var(--chip); border-radius: var(--r-inner); padding: 15px; color: var(--soft); }
.pt-explainer svg { flex: none; margin-top: 2px; }
.pt-explainer p { font-size: 13px; line-height: 1.5; margin: 0; }

/* Relationer — delekort-stub-linjen og undersidens statistik-flise-gitter. Kortets status
   (accepteret/gennemført) vises nu som en badge alignet med kickers (jf. Spil), ikke som en
   bund-bjælke her. Åbne opgaver og indsigten genbruger Tips-undersidens pt-saved-*/pt-empty/
   pt-explainer uændret (se js/screens/page-social.js).

   .ps-page manglede både max-width og kort-margin, som pr-page/pt-page har haft siden Fase
   4/6 — deraf den meget lille afstand mellem "Dagens opfordring"-kortet og "Åbne opgaver"
   (bruger-rapporteret 2026-07-30). */
.ps-page { max-width: 560px; }
.ps-page .prog-card { margin-bottom: 26px; }
.social-share-stub { font-size: 11.5px; font-style: italic; margin: -4px 0 12px; }
.social-complete-btn:hover { color: var(--green); }
.social-stat-headline { font-family: var(--serif); font-size: 17px; margin: 0 0 12px; }
.social-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin-bottom: 26px; }
.social-stat-tile { border-radius: var(--r-inner); padding: 12px 8px; text-align: center; }
.social-stat-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.social-stat-count { font-family: var(--serif); font-size: 20px; margin: 0; }
.social-stat-label { font-size: 10.5px; line-height: 1.25; margin: 4px 0 0; }

/* Små skærme: en lang spiltitel og sværhedsgrad-vælgeren kan ikke dele én linje uden at
   støde sammen. Vælgeren flyttes ned på sin egen linje under ⓘ/✕, stadig højrestillet.
   display:contents løfter [vælger][ⓘ][✕] op som direkte flex-børn af game-bar, så vælgeren
   kan brydes til en linje for sig, mens titlen får hele den øverste række. */
@media (max-width: 430px) {
  .game-bar { flex-wrap: wrap; row-gap: 8px; }
  .game-bar-actions { display: contents; }
  .game-bar-actions [data-act="open-info"] { order: 2; }
  .game-bar-actions [data-act="back"] { order: 3; }
  .game-bar #game-control { order: 4; flex-basis: 100%; display: flex; justify-content: flex-end; }
}