/* Hjernet v2 – hvidt, legende tema */
:root {
  --bg: #FFFFFF;
  --soft: #F5F6FA;
  --ink: #17182C;
  --muted: #6A6F87;
  --line: #E4E6EF;
  --grape: #1F6FD6;
  --grape-dark: #0E3B6D;
  --grape-soft: #E8F2FD;
  --sun: #FFC53D;
  --sun-dark: #DFA30F;
  --sun-soft: #FFF6DC;
  --mint: #12B886;
  --mint-dark: #0B8F67;
  --mint-soft: #E3F8F0;
  --coral: #FF5C5C;
  --coral-dark: #D63E3E;
  --coral-soft: #FFECEC;
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 17px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { line-height: 1.1; margin: 0 0 .4em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; max-width: 60ch; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; border-radius: 6px; }
.lead { font-size: 1.15rem; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* Top */
.top { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1120px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; }
.brand { font-weight: 800; font-size: 1.25rem; text-decoration: none; white-space: nowrap; }
#nav { display: flex; align-items: center; gap: 2px; flex: 1; }
#nav > a, .more summary { text-decoration: none; padding: 7px 12px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: .98rem; display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
#nav > a:hover, .more summary:hover { background: var(--soft); color: var(--ink); }
#nav a.active { background: var(--grape-soft); color: var(--grape-dark); }
.more { position: relative; }
.more summary { list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.more .menu { position: absolute; top: calc(100% + 6px); left: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 6px; min-width: 210px; box-shadow: 0 12px 30px rgba(23,24,44,.12); display: flex; flex-direction: column; }
.more .menu a { padding: 9px 12px; border-radius: 9px; text-decoration: none; font-weight: 600; }
.more .menu a:hover, .more .menu a.active { background: var(--soft); }
.badge { background: var(--coral); color: #fff; border-radius: 99px; font-size: .72rem; padding: 1px 7px; font-weight: 800; }
.badge:empty { display: none; }
.stats { display: flex; align-items: center; gap: 12px; }
.streak { font-weight: 800; white-space: nowrap; }
.lvl { position: relative; display: flex; flex-direction: column; gap: 3px; text-decoration: none; font-weight: 800; font-size: .85rem; min-width: 110px; }
.lvl .bar { height: 8px; background: var(--soft); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.lvl .bar i { display: block; height: 100%; background: var(--sun); border-radius: 99px; transition: width .5s; }

main { max-width: 1120px; margin: 0 auto; padding: 36px 20px 90px; }
main:focus { outline: none; }

/* Knapper – tykke og "trykbare" */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 1rem var(--font); color: var(--ink); text-decoration: none; cursor: pointer;
  background: var(--bg); border: 2px solid var(--line); border-bottom-width: 5px;
  padding: 10px 18px; border-radius: 14px; transition: transform .06s;
}
.btn:hover { background: var(--soft); }
.btn:active { transform: translateY(3px); border-bottom-width: 2px; margin-bottom: 3px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.go { background: var(--grape); border-color: var(--grape-dark); color: #fff; }
.btn.go:hover { background: #185CB4; }
.btn.yes { background: var(--mint); border-color: var(--mint-dark); color: #fff; }
.btn.big { font-size: 1.15rem; padding: 14px 26px; }
.btn.sm { font-size: .88rem; padding: 6px 12px; border-radius: 10px; border-bottom-width: 4px; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--ink); background: var(--soft); }
.btn.bad:hover { color: var(--coral-dark); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.center { text-align: center; max-width: 620px; margin: 40px auto 0; }
.center p { margin-left: auto; margin-right: auto; }
.center .row { justify-content: center; }
.big-emoji { font-size: 4rem; line-height: 1; margin-bottom: 14px; }

/* Felter */
label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 5px; }
input[type=text], input[type=search], textarea {
  width: 100%; font: 500 1rem var(--font); color: var(--ink);
  background: var(--bg); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
textarea { resize: vertical; min-height: 56px; }
input:focus, textarea:focus { outline: none; border-color: var(--grape); }
.field { margin-bottom: 14px; }
.hint { font-size: .82rem; color: var(--muted); font-weight: 500; margin-left: 6px; }
.box { background: var(--soft); border-radius: 20px; padding: 24px; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.chip { font: 600 .95rem var(--font); padding: 8px 14px; border-radius: 99px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--grape); }
.chip.on { background: var(--grape); border-color: var(--grape); color: #fff; }
.chip.ok { background: var(--mint); border-color: var(--mint); color: #fff; cursor: default; }
.chip.wrong { border-color: var(--coral); color: var(--coral-dark); }

/* Hjem */
.welcome { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; min-height: 60vh; }
.welcome h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.welcome .art { font-size: clamp(6rem, 14vw, 10rem); text-align: center; line-height: 1; }
.home-top { display: grid; grid-template-columns: 1fr 340px; gap: 24px; margin-bottom: 36px; }
.goal { background: var(--grape); color: #fff; border-radius: 24px; padding: 26px; display: flex; gap: 22px; align-items: center; }
.goal h2 { margin-bottom: 4px; }
.goal p { margin: 0 0 14px; opacity: .85; }
.goal .btn { background: #fff; border-color: #BFD8F6; color: var(--grape-dark); }
.ring { flex: none; width: 110px; height: 110px; }
.ring circle { fill: none; stroke-width: 12; }
.ring .bg { stroke: rgba(255,255,255,.25); }
.ring .fg { stroke: var(--sun); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .6s; }
.ring text { fill: #fff; font: 800 22px var(--font); text-anchor: middle; dominant-baseline: central; }
.lvlcard { background: var(--sun-soft); border-radius: 24px; padding: 22px; }
.lvlcard .t { font-size: 1.5rem; font-weight: 800; }
.lvlcard .bar { height: 14px; background: #fff; border-radius: 99px; overflow: hidden; margin: 12px 0 6px; }
.lvlcard .bar i { display: block; height: 100%; background: var(--sun); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 14px 0 40px; }
.tile { text-decoration: none; border: 2px solid var(--line); border-bottom-width: 6px; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 4px; background: var(--bg); }
.tile:hover { border-color: var(--grape); }
.tile .e { font-size: 2rem; }
.tile b { font-size: 1.08rem; }
.tile span { color: var(--muted); font-size: .92rem; }
.missions { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.mission { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 16px; text-decoration: none; }
.mission .e { font-size: 1.5rem; }
.mission b { display: block; font-size: .98rem; }
.mission small { color: var(--muted); font-weight: 600; }
.mission.done { background: var(--mint-soft); border-color: transparent; }
.mission.done b { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--mint-dark); }

/* Wizard */
.wiz { max-width: 760px; margin: 0 auto; }
.steps { display: flex; gap: 6px; margin-bottom: 28px; }
.steps i { flex: 1; height: 8px; border-radius: 99px; background: var(--line); }
.steps i.on { background: var(--grape); }
.wiz h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.wiz-nav { display: flex; justify-content: space-between; margin-top: 26px; gap: 10px; }
.picked { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.picked div { display: flex; align-items: center; gap: 10px; background: var(--soft); border-radius: 12px; padding: 6px 8px 6px 12px; font-weight: 600; }
.picked .n, .num { width: 30px; height: 30px; border-radius: 50%; background: var(--grape); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .9rem; flex: none; }
.picked div span:nth-child(2) { flex: 1; }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 12px 0; }
.preset { text-align: left; font: inherit; cursor: pointer; background: var(--bg); border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 18px; padding: 16px; }
.preset.on { border-color: var(--grape); background: var(--grape-soft); }
.preset .e { font-size: 1.8rem; display: block; }
.preset b { display: block; }
.preset small { color: var(--muted); }
.imgrow { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.imgrow .lbl { font-weight: 700; }
.imgrow .lbl small { display: block; color: var(--muted); font-weight: 600; }
.imgrow .lbl em { font-style: normal; color: var(--grape-dark); }

/* Plantegning */
.plan { width: 100%; height: auto; display: block; background: var(--soft); border-radius: 20px; }
.plan .room { fill: var(--bg); stroke: var(--line); stroke-width: 2; }
.plan .route { fill: none; stroke: var(--grape); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.plan .stn circle { fill: var(--bg); stroke: var(--grape); stroke-width: 3; }
.plan .stn text.n { fill: var(--grape-dark); font: 800 14px var(--font); text-anchor: middle; dominant-baseline: central; }
.plan .stn text.lbl { fill: var(--muted); font: 600 12px var(--font); text-anchor: middle; }
.plan .stn.done circle { fill: var(--mint); stroke: var(--mint); }
.plan .stn.done text.n { fill: #fff; }
.plan .stn.sel circle { fill: var(--grape); }
.plan .stn.sel text.n { fill: #fff; }
.plan .stn { cursor: pointer; }

/* Paladser */
.pals { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 24px; }
.pal { flex: none; text-align: left; font: inherit; cursor: pointer; background: var(--bg); border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 16px; padding: 12px 16px; min-width: 170px; color: var(--ink); text-decoration: none; }
.pal.on { border-color: var(--grape); background: var(--grape-soft); }
.pal b { display: block; }
.pal small { color: var(--muted); font-weight: 600; }
.pal.new { border-style: dashed; color: var(--grape-dark); font-weight: 800; display: grid; place-items: center; }
.pal-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: start; }
.title-input { font-weight: 800 !important; font-size: 1.7rem !important; border-color: transparent !important; padding: 4px 6px !important; margin-left: -6px; }
.title-input:hover, .title-input:focus { border-color: var(--line) !important; }
.stops { display: flex; flex-direction: column; gap: 8px; }
.stop { display: grid; grid-template-columns: 30px 1fr 1fr auto; gap: 8px; align-items: center; padding: 8px; border-radius: 14px; }
.stop.sel { background: var(--grape-soft); }
.stop textarea { grid-column: 2 / 4; min-height: 42px; font-size: .92rem; }
.stop .ctl { display: flex; grid-row: 1; grid-column: 4; }
.stop .ctl button { font-size: .95rem; padding: 4px 7px; }

/* Overlay (tur, test) */
.overlay { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; }
.ov-in { max-width: 980px; margin: 0 auto; padding: 24px 20px 60px; }
.ov-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; }
.ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.stage { background: var(--soft); border-radius: 24px; padding: 32px; }
.stage .where { font-weight: 700; color: var(--muted); }
.stage .place { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin: 4px 0 18px; line-height: 1.1; }
.stage .item { font-size: 2rem; font-weight: 800; color: var(--grape-dark); }
.stage .img { font-size: 1.1rem; margin-top: 8px; }
.verdict { margin-top: 14px; padding: 12px 16px; border-radius: 14px; font-weight: 700; }
.verdict.ok { background: var(--mint-soft); color: var(--mint-dark); }
.verdict.no { background: var(--coral-soft); color: var(--coral-dark); }

/* Øv */
.review { max-width: 640px; margin: 0 auto; }
.rv-top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.progress { flex: 1; height: 14px; background: var(--soft); border-radius: 99px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--mint); border-radius: 99px; transition: width .3s; }
.combo { font-weight: 800; color: var(--sun-dark); min-width: 60px; text-align: right; }
.card { border: 2px solid var(--line); border-bottom-width: 6px; border-radius: 24px; padding: 32px; min-height: 260px; }
.card .src { display: inline-block; font-size: .82rem; font-weight: 700; background: var(--soft); border-radius: 99px; padding: 3px 10px; margin-bottom: 16px; color: var(--muted); }
.card .cue { font-size: 1.7rem; font-weight: 800; line-height: 1.2; }
.card .answer { margin-top: 22px; padding-top: 18px; border-top: 2px dashed var(--line); font-size: 1.5rem; font-weight: 800; color: var(--grape-dark); }
.card .hook { margin-top: 8px; color: var(--muted); }
.rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.rate .btn { flex-direction: column; gap: 0; padding: 10px 4px; }
.rate small { font-weight: 600; color: var(--muted); font-size: .78rem; }
.kbd { font: 700 .72rem var(--font); border: 1px solid currentColor; border-radius: 5px; padding: 0 5px; opacity: .6; }

/* Huskekort */
.kort-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 16px; }
.kcard { border: 2px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.kcard .q { font-weight: 700; }
.kcard .a { font-weight: 800; font-size: 1.2rem; color: var(--grape-dark); }
.kcard .h { color: var(--muted); font-size: .92rem; flex: 1; }
.tag { align-self: flex-start; font-size: .75rem; font-weight: 700; background: var(--sun-soft); color: #8A6200; border-radius: 99px; padding: 2px 9px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* Spil */
.games { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.game { border: 2px solid var(--line); border-bottom-width: 6px; border-radius: 24px; padding: 24px; }
.game .e { font-size: 2.6rem; }
.game .best { font-weight: 700; color: var(--muted); font-size: .9rem; margin: 8px 0 14px; }
.timer { font-size: 2.6rem; font-weight: 800; color: var(--grape); font-variant-numeric: tabular-nums; }
.words { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 20px 0; }
.words div { background: var(--soft); border-radius: 14px; padding: 12px; font-weight: 800; font-size: 1.15rem; display: flex; gap: 10px; align-items: center; }
.words div .num { width: 26px; height: 26px; font-size: .8rem; }
.digits { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: .08em; margin: 20px 0; font-variant-numeric: tabular-nums; }
.digits span { margin-right: .5em; }
.recall { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 16px 0; }
.recall label { display: flex; gap: 8px; align-items: center; margin: 0; }
.recall .num { width: 26px; height: 26px; font-size: .8rem; }
.res { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 16px 0; }
.res div { padding: 10px 12px; border-radius: 12px; font-weight: 700; }
.res .ok { background: var(--mint-soft); color: var(--mint-dark); }
.res .no { background: var(--coral-soft); color: var(--coral-dark); }
.res small { display: block; font-weight: 600; opacity: .8; }

/* Talbilleder */
.key { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: 14px 0 22px; }
.key div { background: var(--soft); border-radius: 12px; padding: 8px 4px; text-align: center; }
.key b { display: block; font-size: 1.4rem; }
.key span { font-size: .85rem; color: var(--muted); font-weight: 600; }
.numgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.numcell { display: flex; align-items: center; gap: 8px; }
.numcell b { width: 26px; }
.numcell input { padding: 7px 9px; font-size: .95rem; }
.numcell input:not(:placeholder-shown) { border-color: var(--mint); background: var(--mint-soft); }

/* Guide */
.guide { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.gcard { background: var(--soft); border-radius: 22px; padding: 22px; }
.gcard .e { font-size: 2rem; }
.gcard .ex { background: var(--bg); border-radius: 14px; padding: 10px 14px; margin: 10px 0 14px; font-size: .95rem; }

/* Toast, XP og konfetti */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: .25s; z-index: 99; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.xpfloat { position: absolute; right: 0; top: -4px; font-weight: 800; color: var(--sun-dark); pointer-events: none; animation: rise 1s ease-out forwards; white-space: nowrap; }
@keyframes rise { to { transform: translateY(-26px); opacity: 0; } }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 98; overflow: hidden; }
#fx i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: fall 1.8s ease-in forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) {
  #fx { display: none; }
  .xpfloat { animation: none; opacity: 0; }
}

/* Mobil */
@media (max-width: 900px) {
  .top-in { flex-wrap: wrap; gap: 8px 12px; padding: 8px 14px; }
  .stats { margin-left: auto; }
  #nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .more { position: static; }
  .more .menu { left: auto; right: 14px; }
  .welcome, .home-top, .pal-grid, .ov-grid, .games, .two { grid-template-columns: 1fr; }
  .welcome .art { order: -1; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .imgrow { grid-template-columns: 1fr; }
  .key { grid-template-columns: repeat(5, 1fr); }
  .rate { grid-template-columns: 1fr 1fr; }
  .goal { flex-direction: column; text-align: center; }
}

/* ===================== v3 ===================== */
.verdict.near { background: var(--sun-soft); color: #8A6200; }
.goal-list { list-style: none; padding: 0; margin: 4px 0 16px; }
.goal-list li { font-weight: 700; margin-bottom: 4px; }
.goal-list span { opacity: .8; font-weight: 600; }

/* Advarsler og ok-bokse */
.warn { background: var(--sun-soft); border-radius: 16px; padding: 14px 16px; margin: 12px 0 18px; }
.warn p { margin: 6px 0 0; font-size: .92rem; }
.okbox { background: var(--mint-soft); color: var(--mint-dark); border-radius: 16px; padding: 12px 16px; font-weight: 700; margin: 12px 0 18px; }
.callout { background: var(--grape-soft); border-radius: 18px; padding: 16px 18px; }

/* Type-vælger */
.seg2 { display: inline-flex; background: var(--soft); border-radius: 12px; padding: 4px; gap: 4px; margin-top: 6px; }
.seg2 button { font: 700 .9rem var(--font); border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; cursor: pointer; color: var(--muted); }
.seg2 button.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(23,24,44,.12); }

/* Testtyper */
.modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mode { text-align: left; font: inherit; cursor: pointer; background: var(--bg); color: var(--ink); border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 16px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; }
.mode .e { grid-row: span 2; font-size: 1.5rem; }
.mode small { color: var(--muted); font-weight: 600; font-size: .8rem; }
.mode:hover:not(:disabled) { border-color: var(--grape); }
.mode:disabled { cursor: not-allowed; }
.mode.locked { background: var(--soft); opacity: .75; }

/* Tjekliste-flueben */
.ticks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; grid-column: 2 / 4; }
.tick { font: 600 .8rem var(--font); padding: 4px 10px; border-radius: 99px; border: 2px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; }
.tick.on { background: var(--mint-soft); border-color: var(--mint); color: var(--mint-dark); }
.stop.train { grid-template-columns: 30px 1fr auto; }
.stop.train .ctl { grid-column: 3; }

/* Plantegning: pejlemærker */
.plan .mark { font-size: 14px; text-anchor: middle; dominant-baseline: central; }

/* Rute-øvelse */
.reh { background: var(--soft); border-radius: 20px; padding: 20px; }
.reh-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.trail { display: flex; flex-wrap: wrap; gap: 6px; min-height: 36px; margin: 12px 0; }
.trail span { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border-radius: 99px; padding: 4px 12px 4px 4px; font-weight: 600; font-size: .9rem; }
.trail i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--mint); color: #fff; display: grid; place-items: center; font-size: .75rem; font-weight: 800; }

/* Øvning */
.override { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }

/* Spil */
.games { grid-template-columns: 1fr 1fr; }
.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin: 20px 0; }
.pairs div { background: var(--soft); border-radius: 14px; padding: 10px; text-align: center; }
.pairs b { display: block; font-size: 2rem; font-variant-numeric: tabular-nums; }
.pairs small { color: var(--muted); font-weight: 600; min-height: 1.2em; display: block; }
.faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 18px 0; }
.face { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; margin: 0; }
.face b { font-size: 1.1rem; }
.face small { color: var(--coral-dark); font-weight: 600; }
.face.ok b { color: var(--mint-dark); }
.facesvg { width: 100%; max-width: 140px; height: auto; display: block; }
.speedlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 20px 0; }
.speedlist div { background: var(--soft); border-radius: 14px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--muted); }
.speedlist b { margin-left: auto; color: var(--ink); font-size: 1.1rem; }
.speedlist .num, .recall .num { width: 26px; height: 26px; font-size: .8rem; }
.recall .pl { font-size: .85rem; color: var(--muted); font-weight: 600; min-width: 90px; }
.colsum { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0; }
.colsum span { padding: 6px 12px; border-radius: 99px; font-weight: 700; font-size: .88rem; }
.colsum .ok, .res .ok { background: var(--mint-soft); color: var(--mint-dark); }
.colsum .half, .res .half { background: var(--sun-soft); color: #8A6200; }
.colsum .no { background: var(--coral-soft); color: var(--coral-dark); }

/* Talbilleder */
.numcell .mc { width: 20px; font-size: .9rem; }
.numcell input.ok { border-color: var(--mint); background: var(--mint-soft); }
.numcell input.off { border-color: var(--sun); background: var(--sun-soft); }
.numcell input:not(:placeholder-shown):not(.ok):not(.off) { border-color: var(--line); background: var(--bg); }

@media (max-width: 900px) {
  .modes { grid-template-columns: 1fr; }
  .ticks { grid-column: 2; }
}

/* ===================== v4 ===================== */
/* Selvsikkerhed */
.conf { display: flex; gap: 8px; flex-wrap: wrap; }
.conf .btn { flex: 1; min-width: 110px; }
.conf [value=guess] { order: 0; } .conf [value=maybe] { order: 1; } .conf [value=sure] { order: 2; }
.verdict.hyper { background: #FFE3D6; color: #A23B12; margin-top: 8px; font-weight: 700; }
.calib { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; background: var(--soft); border-radius: 20px; padding: 16px 20px; margin-bottom: 24px; }
.calib div { display: flex; flex-direction: column; }
.calib b { font-size: 1.6rem; }
.calib span { font-size: .85rem; color: var(--muted); font-weight: 600; }
.calib p { margin: 0; flex: 1; min-width: 220px; font-weight: 600; }
.night { display: flex; align-items: center; gap: 14px; background: #0E3B6D; color: #fff; border-radius: 20px; padding: 14px 18px; margin-bottom: 24px; font-size: 1.4rem; }
.night div { flex: 1; font-size: 1rem; display: flex; flex-direction: column; }
.night span { opacity: .8; font-size: .9rem; }

/* Tegning */
.drawrow { grid-column: 2 / 4; display: flex; align-items: center; gap: 8px; }
.thumb { width: 54px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.drawing { display: block; max-width: 240px; width: 100%; border-radius: 12px; border: 1px solid var(--line); margin-top: 10px; background: #fff; }
.cv { width: 100%; max-width: 560px; aspect-ratio: 3 / 2; height: auto; border: 2px solid var(--line); border-radius: 16px; background: #fff; touch-action: none; cursor: crosshair; display: block; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); cursor: pointer; }
.swatch.on { box-shadow: 0 0 0 3px var(--ink); }

/* Eksamen */
.stop.point { grid-template-columns: 30px 1fr 1fr auto; }
.stop.point .pplace { grid-column: 2 / 4; font-weight: 800; }
.stop.point .ctl { grid-row: 1; grid-column: 4; }
.stop.point textarea { grid-column: 2 / 4; }
.qlist { display: flex; flex-direction: column; gap: 6px; }
.qrow { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 12px; padding: 6px 6px 6px 10px; }
.qrow span:nth-child(2) { flex: 1; font-weight: 600; }
.qcard { background: var(--grape-soft); border-radius: 20px; padding: 18px 20px; flex: 1; }
.tktimer { font-size: 2.4rem; font-weight: 800; color: var(--grape); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.tktimer small { font-size: 1rem; color: var(--muted); }
.bigstage { text-align: center; padding: 48px 28px; }
.bigstage .row { justify-content: center; }
.place.huge { font-size: clamp(2.4rem, 7vw, 4.4rem); }
.stage.censor { background: #FFF1E6; border: 3px solid #FFB27A; }
.bigcount { font-size: 4rem; font-weight: 800; color: var(--coral); font-variant-numeric: tabular-nums; margin: 6px 0 14px; }
.checkrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); margin: 6px 0; font-weight: 600; color: var(--ink); font-size: 1rem; cursor: pointer; }
.checkrow input { width: 22px; height: 22px; accent-color: var(--mint); }
.bars { text-align: left; margin: 18px 0; }
.barrow { display: grid; grid-template-columns: minmax(120px, 1.2fr) 3fr 52px; gap: 10px; align-items: center; margin: 6px 0; font-size: .92rem; font-weight: 600; }
.bar2 { position: relative; height: 16px; background: var(--soft); border-radius: 99px; }
.bar2 i { display: block; height: 100%; border-radius: 99px; }
.bar2 i.ok { background: var(--mint); } .bar2 i.half { background: var(--sun); } .bar2 i.no { background: var(--coral); }
.bar2 b { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--ink); border-radius: 2px; }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.statgrid div { background: var(--soft); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; }
.statgrid b { font-size: 1.5rem; } .statgrid span { font-size: .85rem; color: var(--muted); font-weight: 600; }
.runs { background: var(--soft); border-radius: 16px; padding: 12px 16px; margin-top: 14px; font-size: .9rem; }
.runs div { margin-top: 4px; color: var(--muted); font-weight: 600; }

/* Tutorial: tankebobler */
.tourbtn { font: 800 1rem var(--font); width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg); cursor: pointer; }
.tourbtn:hover { border-color: var(--grape); }
#tour { position: absolute; z-index: 90; display: none; }
#tour .bubble { position: relative; background: #fff; border: 3px solid var(--grape); border-radius: 30px; padding: 18px 20px 12px; box-shadow: 0 14px 40px rgba(14, 59, 109, .16); }
#tour .bubble p { margin: 0 26px 12px 0; font-weight: 600; font-size: 1.02rem; }
#tour i { position: absolute; display: block; background: #fff; border: 3px solid var(--grape); border-radius: 50%; }
#tour i.d1 { width: 16px; height: 16px; }
#tour i.d2 { width: 10px; height: 10px; }
#tour .bx { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 1rem; cursor: pointer; color: var(--muted); }
#tour .linkbtn { display: block; margin: 8px auto 0; border: 0; background: transparent; color: var(--muted); font: 600 .82rem var(--font); text-decoration: underline; cursor: pointer; }
.tour-focus { outline: 3px dashed var(--grape) !important; outline-offset: 5px; border-radius: 12px; }
@media (prefers-reduced-motion: no-preference) {
  #tour .bubble { animation: pop .25s ease-out; }
  @keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}
@media (max-width: 900px) {
  .stop.point { grid-template-columns: 30px 1fr auto; }
  .stop.point .pplace, .stop.point textarea, .stop.point input, .drawrow { grid-column: 2 / 3; }
  .stop.point .ctl { grid-column: 3; }
  .statgrid { grid-template-columns: 1fr; }
  .barrow { grid-template-columns: 1fr 2fr 44px; }
}

/* ===================== v5: Lucide-ikoner ===================== */
.ic { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; flex: none; }
.c-grape { color: var(--grape); } .c-mint { color: var(--mint); } .c-coral { color: var(--coral); }
.c-sun { color: var(--sun-dark); } .c-orange { color: #F2762E; } .c-blue { color: #2F8FE0; }
/* Store ikoner i kort og overskrifter */
.big-emoji .ic, .welcome .art .ic { width: 1em; height: 1em; stroke-width: 1.6; }
.big-emoji, .welcome .art { color: var(--grape); }
.tile .e, .mission .e, .mode .e, .game .e, .gcard .e, .preset .e { color: var(--grape); display: inline-flex; }
.tile .e .ic, .game .e .ic, .gcard .e .ic, .preset .e .ic { width: 1em; height: 1em; }
.mission.done .e { color: var(--mint); }
.btn .ic, .chip .ic { width: 1.1em; height: 1.1em; }
.btn.go .ic, .btn.yes .ic, .chip.on .ic, .chip.ok .ic, .badge .ic { color: inherit; }
.verdict .ic { color: inherit; }
.goal .ic { color: inherit; }
.night .ic { color: var(--sun); }
#nav a .ic { width: 1.1em; height: 1.1em; }
#nav a.active .ic { color: var(--grape-dark); }
#toast .ic, .xpfloat .ic { color: var(--sun); }
.tourbtn { display: inline-grid; place-items: center; padding: 0; }
.tourbtn .ic { width: 1.2em; height: 1.2em; }
.streak { display: inline-flex; align-items: center; gap: 4px; }
/* Ikoner i plantegningen */
.plan .pi-star { color: var(--sun-dark); }
.plan .pi-flag { color: var(--coral); }
.plan .pi-check { color: #fff; }
.plan .stn.sel .pi-check { color: #fff; }

/* =====================================================
   v6: Layout-oprydning + blå vignette
   ===================================================== */
:root { --vig: #E3EAF7; --card: #FFFFFF; --shadow: 0 1px 2px rgba(23,24,44,.04), 0 8px 24px rgba(40,60,120,.06); }
html {
  min-height: 100%;
  background: radial-gradient(ellipse 80% 75% at 50% 42%, #FFFFFF 30%, #F2F6FC 58%, #DCE5F4 100%) fixed, #DCE5F4;
}
body { min-height: 100vh; background: transparent; }
.top { background: rgba(255,255,255,.85); }
.top-in { max-width: 1320px; }
main { max-width: 1320px; padding-top: 40px; }
@media (min-width: 1600px) { body { font-size: 18px; } main, .top-in { max-width: 1400px; } }

/* Header: tydeligere level-bar */
.lvl { min-width: 150px; }
.lvl .bar { height: 10px; }

/* Kort-flader står tydeligt frem mod vignetten */
.box, .reh, .runs, .calib, .qrow { box-shadow: var(--shadow); }
.box, .calib { background: var(--card); border: 1px solid var(--line); }
.tile, .mission, .game, .kcard, .card, .mode, .preset, .pal { box-shadow: var(--shadow); }
.gcard { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.lead { max-width: 70ch; }

/* Missioner: ingen overstregning */
.mission.done { background: var(--mint-soft); border-color: transparent; box-shadow: none; }
.mission.done b { text-decoration: none; color: var(--mint-dark); }
.mission.done small { color: var(--mint-dark); }

/* Advarsels-boks */
.warnbox { background: var(--sun-soft); color: #8A6200; border-radius: 16px; padding: 12px 16px; font-weight: 700; margin: 12px 0 18px; }

/* Stop- og punktrækker som kort */
.stops { gap: 12px; }
.stops .stop { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; gap: 10px; box-shadow: var(--shadow); }
.stops .stop.sel { background: var(--grape-soft); border-color: var(--grape); }
.tick { font-size: .86rem; padding: 6px 12px; }
.pal-grid { grid-template-columns: minmax(340px, 1fr) minmax(0, 1.35fr); gap: 36px; }

/* Eksamen: punkt-grid med eksplicit placering */
.stop.point { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) auto; }
.stop.point > .num { grid-column: 1; grid-row: 1; align-self: center; }
.stop.point > .pplace { grid-column: 2 / 4; grid-row: 1; align-self: center; font-size: 1.05rem; }
.stop.point > .ctl { grid-column: 4; grid-row: 1; }
.stop.point > input[data-field=kw] { grid-column: 2; grid-row: 2; font-weight: 700; font-size: 1.05rem; }
.stop.point > input[data-field=note] { grid-column: 3 / 5; grid-row: 2; }
.stop.point > textarea { grid-column: 2 / 5; grid-row: 3; }
.stop.point > .drawrow { grid-column: 2 / 5; grid-row: 4; }

/* Plantegning: læsbare navne oven på ruten */
.plan text.lbl { font-size: 13px; paint-order: stroke; stroke: #FFFFFF; stroke-width: 5px; stroke-linejoin: round; }
.plan { box-shadow: inset 0 0 0 1px var(--line); }

/* Popups: mørk baggrund + centreret kort */
.overlay { background: rgba(20, 26, 56, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; padding: 28px 20px; }
.ov-in { margin: auto; width: 100%; max-width: 1120px; background: var(--card); border-radius: 28px; padding: 28px 32px 32px; box-shadow: 0 30px 80px rgba(20, 26, 56, .35); }
.ov-top { padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.ov-top h2 { font-size: 1.4rem; display: flex; align-items: center; gap: 8px; }
.stage { background: var(--soft); padding: 36px; }
.stage .place { font-size: clamp(2rem, 4vw, 3rem); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stage .item { font-size: 2.3rem; }
.stage .img { font-size: 1.15rem; }
.bigstage .place { justify-content: center; }
.bigstage p { margin-left: auto; margin-right: auto; }
.place.huge { font-size: clamp(2.6rem, 7vw, 5rem); }
.tktimer { font-size: 3rem; }
.stage.censor { background: #FFF4EC; }
.stage.censor .place { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.ov-in .chips .chip { font-size: 1rem; padding: 10px 16px; }
/* Tegne-popup smallere */
.ov-in:has(#cv) { max-width: 680px; }
.cv { max-width: 100%; }

/* Træk et spørgsmål */
.qcard .qtext { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.2; margin-top: 8px; }
.preplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 10px; margin: 16px 0 20px; }
.preplist label { display: grid; grid-template-columns: 30px minmax(110px, 160px) 1fr; gap: 10px; align-items: center; margin: 0; background: var(--soft); border-radius: 14px; padding: 8px 10px; color: var(--ink); }
.preplist .pl { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preplist input { font-size: 1.05rem; padding: 10px 12px; }

/* Øvekort større */
.review { max-width: 780px; }
.card { padding: 40px; background: var(--card); }
.card .cue { font-size: 2rem; }
.conf .btn { padding: 12px 14px; }

/* Spil */
.recall { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.recall input { font-size: 1.05rem; padding: 10px 12px; }
.faces { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.facesvg { max-width: 170px; }
.words div { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.game .row .btn:not(.go) { padding: 9px 14px; }

/* Guide trin 5 */
.imgrow textarea { min-height: 52px; }
.wiz { max-width: 920px; }

/* Velkomst */
.welcome .art { display: grid; place-items: center; }
.welcome .art .ic { width: 1.3em; height: 1.3em; filter: drop-shadow(0 18px 30px rgba(31,111,214,.22)); }

/* Mobil */
@media (max-width: 900px) {
  .pal-grid { grid-template-columns: 1fr; }
  .ov-in { padding: 20px 16px 24px; border-radius: 22px; }
  .overlay { padding: 10px; }
  .stage { padding: 22px; }
  .preplist { grid-template-columns: 1fr; }
  .preplist label { grid-template-columns: 28px 1fr; }
  .preplist label input { grid-column: 1 / -1; }
  .stop.point { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .stop.point > .pplace { grid-column: 2; }
  .stop.point > .ctl { grid-column: 3; }
  .stop.point > input[data-field=kw], .stop.point > input[data-field=note], .stop.point > textarea, .stop.point > .drawrow { grid-column: 2 / 4; grid-row: auto; }
  .card { padding: 24px; }
  .card .cue { font-size: 1.5rem; }
}

.nobr { white-space: nowrap; }
@media (max-width: 900px) {
  .top-in { flex-wrap: wrap; row-gap: 6px; }
  .brand { order: 1; font-size: 1.1rem; }
  .stats { order: 2; margin-left: auto; gap: 8px; }
  #nav { order: 3; }
  .lvl { min-width: 96px; font-size: .78rem; }
  .tourbtn { width: 30px; height: 30px; }
}
.welcome { min-height: auto; padding-top: 210px; align-items: start; }
.welcome .art { padding-top: 20px; }
@media (max-width: 900px) { .welcome { padding-top: 170px; min-height: auto; } }

/* v6.1: sidste oprydning */
.stage .place { display: block; }
.stage .place .ic { vertical-align: -0.12em; }
.title-input { background: transparent !important; }
.more .menu { min-width: 240px; }
.more .menu a { white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.gamepanel { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 28px 32px 32px; box-shadow: var(--shadow); }
.words { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.words div { overflow-wrap: anywhere; }
.pairs { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.pairs div { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 14px 10px; }
.pairs b { font-size: 2.6rem; }
.colsum .none { background: var(--soft); color: var(--muted); }
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.settings h3 { margin-bottom: 14px; }
.settings .box label { margin-top: 6px; }
.about p { margin-bottom: 8px; }
@media (max-width: 900px) { .gamepanel { padding: 18px; border-radius: 20px; } }

/* =====================================================
   v7: Alder, læsbarhed og tilgængelighed
   ===================================================== */
/* Tekststørrelse styres af --scale (Normal 1, Stor 1.15, Ekstra stor 1.3) */
html { font-size: calc(16px * var(--scale, 1)); }
body { font-size: 1.0625rem; }

/* Grå tekst er nu sort og skrives i stedet med kursiv – meget lettere at læse */
:root { --muted: var(--ink); }
.muted, .hint, .lead, .tile span, .mission small, .mode small, .preset small, .pal small,
.card .src, .where, .rate small, .goal-list span, .calib span, .statgrid span, .runs div,
.best, .kcard .h, .hook, .stage .img, .lvlcard .small, .imgrow .lbl small, .game p.muted,
.gcard p, .face small, .res small, .key span, .recall .pl, .speedlist div { font-style: italic; color: var(--ink); }
.lead { font-weight: 500; }
.hint { font-weight: 600; opacity: 1; }
input::placeholder, textarea::placeholder { color: #4B5068; opacity: 1; font-style: italic; }
#nav > a, .more summary { color: var(--ink); }
#nav > a:not(.active) { font-weight: 600; }
.goal .goal-list span, .goal p { color: #fff; }
.plan .stn text.lbl { fill: var(--ink); }
.btn.ghost { color: var(--ink); }
.tag { font-size: .8rem; }
.kbd { font-size: .78rem; opacity: .85; }
.badge { font-size: .78rem; }

/* Den obligatoriske aldersvælger */
.agegate .ov-in { max-width: 920px; }
.agegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.agecard { font: inherit; color: var(--ink); text-align: center; cursor: pointer; background: var(--card); border: 3px solid var(--line); border-bottom-width: 7px; border-radius: 24px; padding: 26px 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .08s; }
.agecard:hover, .agecard:focus-visible { border-color: var(--grape); background: var(--grape-soft); }
.agecard:active { transform: translateY(3px); }
.agecard .e { font-size: 3.4rem; color: var(--grape); line-height: 1; margin-bottom: 6px; }
.agecard .e .ic { width: 1em; height: 1em; }
.agecard b { font-size: 1.6rem; }
.agecard .sub { font-weight: 700; }
.agecard small { font-style: italic; font-size: .95rem; }
@media (max-width: 700px) { .agegrid { grid-template-columns: 1fr; } .agecard { flex-direction: row; text-align: left; padding: 16px; } .agecard .e { font-size: 2.4rem; margin: 0 8px 0 0; } }

/* Barn: lidt rundere og mere legende knapper */
html[data-age="barn"] .btn { border-radius: 18px; }
/* Senior: større klikflader, tydeligere fokus og ingen animationer der kan forvirre */
html[data-age="senior"] .btn { min-height: 48px; }
html[data-age="senior"] .btn.sm { min-height: 42px; }
html[data-age="senior"] .chip { padding: 10px 16px; }
html[data-age="senior"] input[type=text], html[data-age="senior"] textarea { border-width: 3px; }
html[data-age="senior"] :focus-visible { outline-width: 4px; }
html[data-age="senior"] #fx { display: none; }
html[data-age="senior"] .tick { padding: 8px 14px; }
/* Klikflader skalerer med tekststørrelsen (min. ca. 40 px, 46–52 px for barn/senior) */
.tourbtn { width: 2.5rem; height: 2.5rem; }
.stop .ctl button, .stops .ctl .btn { min-width: 2.5rem; min-height: 2.5rem; }
.btn.ghost.sm, .qrow .btn { min-height: 2.5rem; }
.seg2 button { min-height: 2.5rem; padding: 0 16px; }
.badge { font-size: .8rem; }
html[data-age="senior"] .tourbtn, html[data-age="barn"] .tourbtn { width: 2.75rem; height: 2.75rem; }
.tick { min-height: 2.4rem; display: inline-flex; align-items: center; gap: 6px; }

/* =====================================================
   v8: Huskevæsner, Tåge-jagt og Pi-træner
   ===================================================== */
.petstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 8px 0 20px; }
.ps { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.ps b { font-size: 1.9rem; line-height: 1.1; }
.ps span { font-style: italic; font-weight: 600; }
.ps.fog { background: #EEF1F7; } .ps.happy { background: var(--mint-soft); } .ps.egg { background: var(--sun-soft); } .ps.shiny { background: #FFF6D1; }
.fh-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(120deg, #5B6B95, #8C97B8); color: #fff; border-radius: 24px; padding: 20px 24px; margin-bottom: 26px; box-shadow: var(--shadow); }
.fh-cta b { font-size: 1.3rem; display: block; }
.fh-cta span { font-style: italic; }
.fh-cta .btn.go { background: #fff; color: var(--grape-dark); border-color: #BFD8F6; }
.pet-h { margin-top: 18px; }
.petgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.pet { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 10px 10px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.pet-art { width: 100%; max-width: 110px; aspect-ratio: 1; position: relative; }
.pet-svg { width: 100%; height: 100%; display: block; }
.pet b { font-size: 1rem; }
.pet span { font-size: .85rem; font-style: italic; font-weight: 600; }
.pet.happy { background: linear-gradient(180deg, #F2FFF9, #fff); }
.pet.tired .pet-svg { filter: saturate(.55); }
.pet.fog .pet-svg, .fh-pet.in-fog .pet-svg { filter: grayscale(1) blur(1.5px); opacity: .55; }
.pet.fog .pet-art::after, .fh-pet.in-fog::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.95) 0 18%, transparent 19%), radial-gradient(circle at 70% 55%, rgba(255,255,255,.9) 0 22%, transparent 23%), radial-gradient(circle at 45% 75%, rgba(240,244,250,.95) 0 20%, transparent 21%); pointer-events: none; }
.pet.fog { background: #EEF1F7; }
.pet.egg { background: var(--sun-soft); }
.pet.shiny { border: 2px solid #FFC53D; box-shadow: 0 0 0 4px #FFF1C2, var(--shadow); }
.pet.small { padding: 4px; border-radius: 14px; box-shadow: none; }
.pet.small .pet-art { max-width: 56px; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-age="senior"]) .pet.happy .pet-svg { animation: bob 2.4s ease-in-out infinite; }
  html:not([data-age="senior"]) .pet.egg .pet-svg { animation: wobble 3s ease-in-out infinite; transform-origin: 50% 90%; }
  @keyframes bob { 50% { transform: translateY(-4px); } }
  @keyframes wobble { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-6deg); } 90% { transform: rotate(6deg); } 95% { transform: rotate(-3deg); } }
  .fh-stage.saved .fh-pet { animation: pop .5s ease-out; }
}
.petbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 12px 18px; margin-bottom: 24px; text-decoration: none; box-shadow: var(--shadow); }
.petbar:hover { border-color: var(--grape); }
.petbar > div:nth-child(2) { flex: 1; min-width: 220px; display: flex; flex-direction: column; }
.petbar span { font-style: italic; }
.petrow { display: flex; gap: 4px; }

/* Tåge-jagt */
.ov-in.fh { max-width: 760px; }
.fh-hud { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-weight: 700; margin-bottom: 14px; }
.fh-time b { font-size: 2rem; color: var(--grape); font-variant-numeric: tabular-nums; }
.fh-combo { color: #F2762E; }
.fh-hud span:last-child { margin-left: auto; }
.fh-stage { text-align: center; background: var(--soft); border-radius: 24px; padding: 24px; }
.fh-pet { width: 150px; height: 150px; margin: 0 auto 6px; position: relative; }
.fh-stage h2 { font-size: 1.6rem; }
.fh-stage input { max-width: 460px; margin: 6px auto 0; display: block; font-size: 1.2rem; text-align: center; }
.fh-stage.saved { background: var(--mint-soft); }
.fh-stage.lost { background: #EEF1F7; }

/* Pi */
.pidisp { font-variant-numeric: tabular-nums; font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: .06em; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 18px 22px; box-shadow: var(--shadow); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-bottom: 18px; }
.pi-3 { font-size: 1.15em; font-weight: 800; color: var(--grape); }
.pi-g.next { color: var(--grape); letter-spacing: .02em; opacity: .5; }
.pi-pairs { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 12px; }
.pi-pairs div { background: var(--soft); border-radius: 16px; padding: 10px 14px; text-align: center; min-width: 84px; }
.pi-pairs b { display: block; font-size: 2rem; font-variant-numeric: tabular-nums; }
.pi-pairs small { font-style: italic; font-weight: 600; }
#pit.ok { border-color: var(--mint); }
/* v8.1 */
.pet .stars { display: inline-flex; gap: 1px; }
.pet .stars .ic { width: .95em; height: .95em; fill: currentColor; }
.pet .stars .ic.off { color: var(--line); fill: var(--line); }
.pet.fog .pet-svg, .fh-pet.in-fog .pet-svg { filter: grayscale(.85) blur(.6px); opacity: .8; }
.pet.fog .pet-art::after, .fh-pet.in-fog::after {
  background: radial-gradient(circle at 25% 45%, rgba(255,255,255,.75) 0 16%, transparent 17%), radial-gradient(circle at 72% 58%, rgba(255,255,255,.7) 0 19%, transparent 20%), radial-gradient(circle at 48% 80%, rgba(240,244,250,.75) 0 17%, transparent 18%), linear-gradient(180deg, rgba(238,241,247,.0), rgba(238,241,247,.35));
}
.plus5 { display: inline-block; background: var(--sun-soft); color: #8A6200; font-weight: 800; border-radius: 99px; padding: 4px 14px; margin: 0 0 12px; }
@media (prefers-reduced-motion: no-preference) { .plus5 { animation: pop .4s ease-out; } }
/* v8.2: Æggene ryster på hvert sit tilfældige tidspunkt (ca. én gang per 10 sek.) */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-age="senior"]) .pet.egg .pet-svg { animation: wobble-rand var(--wob-dur, 10s) ease-in-out var(--wob-delay, 0s) infinite; transform-origin: 50% 90%; }
  @keyframes wobble-rand {
    0%, 93%, 100% { transform: rotate(0); }
    94% { transform: rotate(-8deg); }
    95.5% { transform: rotate(7deg); }
    97% { transform: rotate(-4deg); }
    98.5% { transform: rotate(2deg); }
  }
}

/* =====================================================
   v9: Tilgængelighed
   ===================================================== */
/* Spring til indhold (synlig ved tastatur-fokus) */
.skip { position: fixed; top: -100px; left: 16px; z-index: 200; background: var(--ink); color: #fff; font: 700 1rem var(--font); border: 0; border-radius: 12px; padding: 12px 18px; cursor: pointer; }
.skip:focus { top: 12px; }

/* Popup: tilgængelighedsvalg */
.agegate .ov-in { max-width: 1000px; }
.gate-top { display: flex; justify-content: flex-end; margin-bottom: -8px; }
.a11yset { background: var(--soft); border-radius: 22px; padding: 18px 20px; margin: 0 0 22px; }
.a11yset h2, .gate-h { font-size: 1.2rem; margin-bottom: 12px; }
.gate-h { text-align: center; }
.a11ygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.a11ychip { font: inherit; color: var(--ink); text-align: left; cursor: pointer; background: var(--card); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; min-height: 3.6rem; }
.a11ychip:hover { border-color: var(--grape); }
.a11ychip.on { border-color: var(--grape); background: var(--grape-soft); }
.a11ychip .e { font-size: 1.7rem; color: var(--grape); display: inline-flex; }
.a11ychip .t { display: flex; flex-direction: column; flex: 1; }
.a11ychip small { font-style: italic; font-size: .88rem; }
.a11ychip .check { width: 1.4rem; display: inline-flex; }
.a11ygrid.compact { grid-template-columns: 1fr; }

/* Oplæsning (mockup – ikke aktiv) */
#readbar { position: fixed; left: 16px; bottom: 16px; z-index: 70; }
.readbar { display: flex; align-items: center; gap: 12px; background: var(--card); border: 2px solid var(--grape); border-radius: 22px; padding: 10px 12px 10px 10px; box-shadow: 0 12px 34px rgba(40,60,120,.22); max-width: calc(100vw - 32px); }
.rb-play { width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 0; background: var(--grape); color: #fff; font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; flex: none; }
.rb-play .ic { color: #fff; }
.rb-txt { display: flex; flex-direction: column; }
.rb-txt span { font-style: italic; font-size: .9rem; }
.rb-tag { font-size: .7rem; font-style: normal; background: var(--sun-soft); color: #8A6200; border-radius: 99px; padding: 1px 8px; margin-left: 4px; vertical-align: 2px; }
.rb-mini { width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 2px solid var(--grape); background: var(--card); cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(40,60,120,.2); }
html[data-a11y~="syn"] main, html[data-a11y~="hoer"] main, html[data-a11y~="ordblind"] main { padding-bottom: 130px; }

/* Nedsat syn: stærk kontrast */
html[data-a11y~="syn"] { --line: #6B718C; --soft: #EEF1F7; }
html[data-a11y~="syn"] .btn, html[data-a11y~="syn"] .chip, html[data-a11y~="syn"] input[type=text], html[data-a11y~="syn"] textarea, html[data-a11y~="syn"] .a11ychip { border-color: var(--ink); }
html[data-a11y~="syn"] .btn.go { border-color: #2A0E8F; }
html[data-a11y~="syn"] :focus-visible { outline: 4px solid #000 !important; outline-offset: 3px; }
html[data-a11y~="syn"] main a:not(.btn):not(.tile):not(.mission):not(.pal):not(.petbar) { text-decoration: underline; text-decoration-thickness: 2px; }
html[data-a11y~="syn"] input::placeholder, html[data-a11y~="syn"] textarea::placeholder { color: #2B2F4A; }
html[data-a11y~="syn"] .ic { stroke-width: 2.6; }
html[data-a11y~="syn"] .card, html[data-a11y~="syn"] .box, html[data-a11y~="syn"] .tile, html[data-a11y~="syn"] .mission, html[data-a11y~="syn"] .kcard, html[data-a11y~="syn"] .game, html[data-a11y~="syn"] .ov-in { border: 2px solid var(--ink); }

/* Funktionsnedsættelse: store mål og god afstand */
html[data-a11y~="motor"] .btn { min-height: 3.25rem; padding-left: 20px; padding-right: 20px; }
html[data-a11y~="motor"] .btn.sm, html[data-a11y~="motor"] .chip, html[data-a11y~="motor"] .tick, html[data-a11y~="motor"] .seg2 button { min-height: 3rem; }
html[data-a11y~="motor"] .row, html[data-a11y~="motor"] .chips { gap: 14px; }
html[data-a11y~="motor"] .stop .ctl button { min-width: 3rem; min-height: 3rem; }
html[data-a11y~="motor"] input[type=text], html[data-a11y~="motor"] textarea { padding: 14px 16px; }

/* Ordblindhed: luft, ingen kursiv, venstrestillet */
html[data-a11y~="ordblind"] body { letter-spacing: .035em; word-spacing: .16em; line-height: 1.75; }
html[data-a11y~="ordblind"] * { font-style: normal !important; }
html[data-a11y~="ordblind"] p, html[data-a11y~="ordblind"] .lead { max-width: 62ch; }
html[data-a11y~="ordblind"] .muted, html[data-a11y~="ordblind"] .hint, html[data-a11y~="ordblind"] .lead { font-weight: 600; }
html[data-a11y~="ordblind"] .center p, html[data-a11y~="ordblind"] .agecard { text-align: left; }

/* Rolig skærm: ingen bevægelse */
html[data-a11y~="ro"] *, html[data-a11y~="ro"] *::before, html[data-a11y~="ro"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-a11y~="ro"] #fx { display: none; }

@media (max-width: 700px) {
  .readbar .rb-txt span { display: none; }
  #readbar { left: 10px; bottom: 10px; }
}
.a11ynote { margin: 12px 0 0; font-weight: 700; color: var(--grape-dark); }
/* v9.1 */
html[data-a11y~="syn"] main:focus, html[data-a11y~="syn"] main:focus-visible { outline: none !important; }
html[data-a11y~="ordblind"] ::placeholder { font-style: normal !important; }
.top-in { flex-wrap: wrap; row-gap: 6px; }
.top-in .stats { margin-left: auto; }

/* v9.2: Tilgængeligheds-knapper må ikke stikke ud af kortet */
.a11ygrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.a11ygrid.compact { grid-template-columns: minmax(0, 1fr); }
.a11ychip { min-width: 0; }
.a11ychip .t { min-width: 0; }
.a11ychip b, .a11ychip small { overflow-wrap: anywhere; hyphens: auto; }
.settings { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
#focusStart { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; outline: none; }

/* =====================================================
   v9.3: Robust layout i alle tilstande (skal ligge sidst)
   ===================================================== */
/* Menuen ombrydes i stedet for at skubbe siden ud */
#nav { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
.top-in > * { min-width: 0; }
/* Lange danske ord må brydes i overskrifter og kort */
h1, h2, h3, .title-input, .place, .qtext, .cue { overflow-wrap: anywhere; hyphens: auto; }
.tile, .mission, .game, .gcard, .kcard, .mode, .preset, .pal, .ps, .pet, .agecard, .stop, .box, .card, .stage, .fh-stage, .qrow { min-width: 0; }
.tile b, .mission b, .mode b, .game h2, .gcard h3, .kcard .q, .kcard .a, .pet b, .agecard b, .ps span { overflow-wrap: anywhere; hyphens: auto; }
.qrow { flex-wrap: wrap; }
.qrow span:nth-child(2) { min-width: 0; flex: 1 1 12rem; }
.pal-grid > *, .two > *, .home-top > *, .games > *, .ov-grid > *, .chooser > * { min-width: 0; }
.grid-safe, .petstats, .missions, .tiles, .kort-grid, .guide, .numgrid, .petgrid, .faces, .recall, .preplist, .words, .res { min-width: 0; }

@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  #nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .games, .pal-grid, .two, .ov-grid, .settings, .chooser, .welcome, .home-top { grid-template-columns: minmax(0, 1fr) !important; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .preplist { grid-template-columns: minmax(0, 1fr); }
  .recall, .words { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
  .petgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); }
  .missions, .kort-grid, .guide { grid-template-columns: minmax(0, 1fr); }
  .petstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agegrid { grid-template-columns: minmax(0, 1fr); }
  .numgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); }
  .barrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; }
  .statgrid { grid-template-columns: minmax(0, 1fr); }
  .key { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pidisp { font-size: 1.4rem; }
  .fh-hud { gap: 10px; }
}
@media (max-width: 900px) {
  .stops .stop, .stops .stop.point, .stops .stop.train { grid-template-columns: 2.2rem minmax(0, 1fr) !important; }
  .stops .stop > * { grid-column: 2 !important; grid-row: auto !important; }
  .stops .stop > .num { grid-column: 1 !important; grid-row: 1 !important; }
  .stops .stop > .ctl { justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
  .stops .stop .ticks { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .kbd { display: none; }
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* =====================================================
   v10: WCAG 2.1 AA (EN 301 549) – kontrast, status og struktur
   ===================================================== */
/* 1.4.3 Kontrast: mørkere grøn og rød, så tekst når mindst 4,5:1 */
:root { --mint-dark: #097D5A; --coral-dark: #B42E2E; }
.badge { background: #C94848; color: #fff; }
.btn.yes { background: var(--mint-dark); border-color: #06593F; color: #fff; }
.btn.go:hover { background: #185CB4; }
.goal p, .goal .goal-list span { opacity: 1; color: #fff; }
.mission.done b, .mission.done small, .okbox, .verdict.ok, .res .ok, .colsum .ok, .face.ok b, .tick.on { color: var(--mint-dark); }
.verdict.no, .res .no, .colsum .no, .face small, .chip.wrong { color: var(--coral-dark); }
/* 1.4.11 Ikke-tekst-kontrast: felter skal have en kant på mindst 3:1 */
input[type=text], input[type=search], textarea { border-color: #7E8398; }
html[data-a11y~="syn"] input[type=text], html[data-a11y~="syn"] input[type=search], html[data-a11y~="syn"] textarea { border-color: var(--ink); }
.checkrow input { accent-color: var(--mint-dark); }

/* Knapper der endnu ikke kan bruges: stadig fokuserbare (FDS), tydeligt nedtonede */
.btn.is-disabled, .mode.is-disabled, .chip.is-disabled { opacity: .55; cursor: not-allowed; }
.btn.is-disabled:active { transform: none; border-bottom-width: 5px; margin-bottom: 0; }

/* Skærmlæser-tekst */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Footer (FDS: markerer enden af siden) */
.foot { border-top: 1px solid var(--line); background: rgba(255,255,255,.7); margin-top: 40px; }
.foot-in { max-width: 1320px; margin: 0 auto; padding: 22px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.foot-in p { margin: 0; flex: 1 1 18rem; }
.foot-in ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-in a { color: var(--grape-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
html[data-a11y~="syn"] .foot-in a, html[data-a11y~="hoer"] main, html[data-a11y~="ordblind"] main { }
html[data-a11y~="syn"] .foot, html[data-a11y~="hoer"] .foot, html[data-a11y~="ordblind"] .foot { padding-bottom: 110px; }

/* Tilgængelighedserklæring */
.decl { max-width: 860px; }
.decl h2 { font-size: 1.35rem; margin-top: 22px; }
.decl h2:first-child { margin-top: 0; }
.decl-list { padding-left: 1.2em; }
.decl-list li { margin-bottom: 8px; }
.decl a, main .lead a { color: var(--grape-dark); text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  #tour .bubble { animation: pop-scale .25s ease-out; }
  @keyframes pop-scale { from { transform: scale(.94); } to { transform: scale(1); } }
}
/* v10.1: WCAG 1.4.10 ombrydning (320 px) og 1.4.12 tekstafstand */
.nobr { white-space: normal; }           /* ikonet holdes stadig ved ordet med et hårdt mellemrum */
main, .foot { overflow-wrap: break-word; }
main p, main li, main b, main strong, .lvlcard .t { overflow-wrap: anywhere; hyphens: auto; }
#readbar { max-width: calc(100vw - 20px); }
.readbar { flex-wrap: wrap; }
@media (max-width: 480px) {
  .readbar { gap: 8px; padding: 8px; }
  .readbar [data-act=readSpeed] { display: none; }
  .rb-play, .rb-mini { width: 2.8rem; height: 2.8rem; }
}
.foot-in ul, .foot-in li { min-width: 0; max-width: 100%; } .foot-in a { overflow-wrap: anywhere; hyphens: auto; }
.wiz-nav { flex-wrap: wrap; } .wiz-nav .btn { max-width: 100%; } .seg2 { flex-wrap: wrap; max-width: 100%; } .pals { max-width: 100%; }

/* =====================================================
   v11: Placeringsspil, ekspeditioner, udvikling, huskepakker
   ===================================================== */
.pic { display: inline-flex; width: 2.2rem; height: 2.2rem; }
.pic .ic { width: 100%; height: 100%; stroke-width: 1.8; }
.pic.big { width: 4rem; height: 4rem; }
.notime { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; color: var(--grape-dark); }
.notime small { font-weight: 600; color: var(--ink); }
.infobox { background: #EAF2FF; border: 1px solid #B9D3F5; border-radius: 16px; padding: 14px 18px; margin: 0 0 20px; }

/* Lynøje */
.lyn-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.lyn-card { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--card); border: 3px solid var(--grape); border-radius: 20px; padding: 12px 22px; min-width: 9rem; box-shadow: var(--shadow); }
.lyn-board { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; max-width: 620px; }
.lyn-tile { aspect-ratio: 1; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 14px; background: var(--card); cursor: pointer; display: grid; place-items: center; padding: 6px; font: 800 1.6rem var(--font); color: var(--grape); }
.lyn-tile:hover { border-color: var(--grape); }
.lyn-tile .pic { width: 70%; height: 70%; }
.lyn-tile.hidden { background: #12335E; border-color: #0B2547; color: #D6E6FA; }
.lyn-tile.flash { outline: 4px solid var(--sun); outline-offset: 2px; }

/* Hvad er ændret? */
.room-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; max-width: 640px; margin: 14px 0; padding: 14px; border-radius: 22px; background: linear-gradient(#F4EEE4, #EADFCC); border: 2px solid #CDBA9A; }
.room-cell { aspect-ratio: 1.2; border: 2px dashed #CDBA9A; border-radius: 12px; background: rgba(255,255,255,.6); display: grid; place-items: center; font: inherit; cursor: pointer; }
div.room-cell { cursor: default; }
.room-cell .pic { width: 55%; height: 55%; }
.room-cell.sel { border: 3px solid var(--grape); background: var(--grape-soft); }
.room-cell.hit { border: 3px solid var(--mint-dark); background: var(--mint-soft); }
.room-cell.missed { border: 3px solid var(--sun-dark); background: var(--sun-soft); }
.room-cell.wrong { border: 3px solid var(--coral-dark); background: var(--coral-soft); }

/* Kims leg */
.kim-tray { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; margin: 12px 0; border-radius: 22px; background: #E9EEF6; border: 3px solid #B9C4D6; min-height: 6rem; }
.kim-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--card); border-radius: 14px; padding: 10px 12px; min-width: 6rem; font-weight: 700; box-shadow: var(--shadow); }
.chip.kim-opt.ok { background: var(--mint-dark); border-color: var(--mint-dark); color: #fff; }
.chip.kim-opt.missed { border-color: var(--sun-dark); background: var(--sun-soft); }
.chip.kim-opt.wrong { border-color: var(--coral-dark); color: var(--coral-dark); }

/* Lysmønster */
.lys-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; max-width: 420px; margin: 16px 0; }
.lys-cell { aspect-ratio: 1; border-radius: 18px; border: 3px solid rgba(0,0,0,.15); cursor: pointer; opacity: .45; transition: opacity .12s, transform .12s; }
.lys-cell.c0 { background: #1F6FD6; } .lys-cell.c1 { background: #097D5A; } .lys-cell.c2 { background: #C94848; } .lys-cell.c3 { background: #B26A00; } .lys-cell.c4 { background: #1F6FBF; } .lys-cell.c5 { background: #0E6E7E; }
.lys-cell.lit { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 5px #FFE066, 0 0 30px #FFE066; }
html[data-a11y~="ro"] .lys-cell.lit { transform: none; }

/* Vejen hjem */
.vej-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 4px; max-width: 520px; margin: 14px 0; padding: 10px; border-radius: 18px; background: #DCEBD5; }
.vej-cell { aspect-ratio: 1; border-radius: 10px; border: 2px solid #B8D4AC; background: #F3F8EF; cursor: pointer; display: grid; place-items: center; font: 800 1rem var(--font); color: var(--ink); padding: 4px; }
.vej-cell .ic { width: 70%; height: 70%; }
.vej-cell.on { background: #F2D7A6; border-color: #C79A4E; }
.vej-cell.home { background: var(--grape); border-color: var(--grape-dark); color: #fff; }
.vej-cell.goal { background: #1F6FBF; border-color: #164F88; color: #fff; }

/* To spillere */
.duel-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 12px; margin: 14px 0; text-align: center; }
.duel-res div { background: var(--soft); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 4px; border: 2px solid var(--line); }
.duel-res .win { border-color: var(--sun-dark); background: var(--sun-soft); }
.duel-res span { font-size: 1.6rem; font-weight: 800; }

/* Ekspeditioner */
.expmap { width: 100%; height: auto; display: block; }
.exp-road { fill: none; stroke: #D8CFC0; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.exp-done { fill: none; stroke: var(--mint-dark); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.expmap .stop { fill: #fff; stroke: #B5A890; stroke-width: 3; }
.expmap .stop.done { fill: var(--mint-dark); stroke: #06593F; }
.expmap .me { fill: var(--grape); stroke: #fff; stroke-width: 4; }
.exp-ico { font-size: 2rem; color: var(--mint-dark); display: inline-flex; }

/* Min udvikling */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 16px; }
.chart { width: 100%; height: auto; }
.chart .ax { stroke: #8E8E8E; stroke-width: 1.5; }
.chart .ln { fill: none; stroke: var(--grape); stroke-width: 3; stroke-linejoin: round; }
.chart .dt { fill: var(--grape); }
.chart .tx { fill: var(--ink); font: 600 12px var(--font); }

/* =====================================================
   v12: WordFind (dansk Wordle)
   ===================================================== */
.wf-wrap { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wf-proto { text-align: center; max-width: 520px; margin: 0 auto 10px; }
.wf-help { text-align: center; }
.wf-grid { display: grid; grid-template-rows: repeat(6, auto); gap: 6px; }
.wf-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.wf-tile { width: clamp(2.8rem, 13vw, 3.6rem); aspect-ratio: 1; display: grid; place-items: center; font: 800 clamp(1.4rem, 6vw, 1.9rem) var(--font); text-transform: uppercase; border: 2px solid #C6CAD6; border-radius: 8px; background: var(--card); color: var(--ink); }
.wf-tile.filled { border-color: #6B6F80; }
.wf-tile.correct { background: #097D5A; border-color: #097D5A; color: #fff; }
.wf-tile.present { background: #A86200; border-color: #A86200; color: #fff; }
.wf-tile.absent { background: #5F6478; border-color: #5F6478; color: #fff; }
.wf-row.cur .wf-tile.filled { border-color: var(--grape); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-a11y~="ro"]) .wf-row:not(.cur) .wf-tile.correct, html:not([data-a11y~="ro"]) .wf-row:not(.cur) .wf-tile.present, html:not([data-a11y~="ro"]) .wf-row:not(.cur) .wf-tile.absent { animation: wf-pop .25s ease-out; }
  @keyframes wf-pop { from { transform: scale(.9); } to { transform: scale(1); } }
}
.wf-kb { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.wf-kbrow { display: flex; gap: 5px; justify-content: center; }
.wf-key { flex: 1 1 0; min-width: 0; max-width: 2.9rem; min-height: 3.2rem; border: 0; border-radius: 8px; background: #D9DCE6; color: var(--ink); font: 800 1rem var(--font); cursor: pointer; padding: 0; }
.wf-key.wide { max-width: 4.6rem; flex-grow: 1.6; font-size: .9rem; }
.wf-key:hover { filter: brightness(.95); }
.wf-key.correct { background: #097D5A; color: #fff; }
.wf-key.present { background: #A86200; color: #fff; }
.wf-key.absent { background: #5F6478; color: #fff; }
.wf-msg { text-align: center; font-size: 1.1rem; }
.wf-result { width: 100%; text-align: center; }
.wf-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.wf-dist { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 16px; text-align: left; }
.wf-dist div { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.wf-dist i { display: block; font-style: normal; background: #5F6478; color: #fff; padding: 2px 8px; border-radius: 4px; text-align: right; min-width: 1.6rem; }
.wf-dist i.me { background: #097D5A; }
/* Høj kontrast ved nedsat syn (som Wordles egen tilstand): orange = rigtig, blå = findes */
html[data-a11y~="syn"] .wf-tile.correct, html[data-a11y~="syn"] .wf-key.correct { background: #B84A00; border-color: #B84A00; }
html[data-a11y~="syn"] .wf-tile.present, html[data-a11y~="syn"] .wf-key.present { background: #1F6FBF; border-color: #1F6FBF; }
html[data-a11y~="syn"] .wf-help::after { content: " (Høj kontrast: orange = rigtig plads, blå = findes i ordet.)"; }
html[data-a11y~="motor"] .wf-key { min-height: 3.6rem; }
@media (max-width: 480px) { .wf-kbrow { gap: 3px; } .wf-key { font-size: .9rem; min-height: 3rem; } .wf-key.wide { font-size: .75rem; } }

/* =====================================================
   v13: Viden og skolefag – Tidslinjen, Danmarkskortet, Flag-quiz
   ===================================================== */
/* Tidslinjen */
.tl-list { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 8px; max-width: 640px; counter-reset: tl; }
.tl-item { display: flex; align-items: center; gap: 10px; background: var(--card); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 14px; padding: 10px 12px; cursor: grab; box-shadow: var(--shadow); }
.tl-item::before { counter-increment: tl; content: counter(tl); font-weight: 800; color: var(--grape-dark); min-width: 1.4rem; }
.tl-item.dragging { opacity: .5; }
.tl-item.ok { border-color: var(--mint-dark); background: var(--mint-soft); cursor: default; }
.tl-item.no { border-color: var(--coral-dark); background: var(--coral-soft); cursor: default; }
.tl-grip { color: #7E8398; display: inline-flex; }
.tl-txt { flex: 1; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.tl-year { color: var(--grape-dark); margin-left: 6px; }
.tl-ctl { display: flex; gap: 4px; }
.tl-mark { display: inline-flex; }
/* Danmarkskortet */
.dk-wrap { max-width: 560px; margin: 12px 0; }
.dkmap { width: 100%; height: auto; display: block; border-radius: 18px; border: 2px solid #B9D3F5; }
.dk-sea { fill: #DDEBF7; }
.dk-land { fill: #F3EEDC; stroke: #8C7A55; stroke-width: .9; stroke-linejoin: round; }
.dk-inset { fill: none; stroke: #4B5068; stroke-dasharray: 4 3; stroke-width: 1; }
.dk-insettxt { font: 700 8px var(--font); fill: #4B5068; }
.dk-opt circle { fill: var(--grape); stroke: #fff; stroke-width: 2; }
.dk-opt text { fill: #fff; font: 800 10px var(--font); text-anchor: middle; dominant-baseline: central; }
.dk-opt.right circle { fill: var(--mint-dark); } .dk-opt.wrong circle { fill: var(--coral-dark); }
.dk-cross line { stroke: var(--coral-dark); stroke-width: 2.5; } .dk-cross circle { fill: none; stroke: var(--coral-dark); stroke-width: 2; }
.dk-line { stroke: #4B5068; stroke-width: 1.6; stroke-dasharray: 4 3; }
.dk-guess { fill: var(--coral-dark); stroke: #fff; stroke-width: 1.5; }
.dk-true { fill: var(--mint-dark); stroke: #fff; stroke-width: 2; }
#dkSvg { cursor: crosshair; }
#dkSvg:focus-visible { outline: 4px solid var(--grape); outline-offset: 3px; }
.dk-letters .btn { min-width: 6rem; }
/* Flag-quiz */
.flag-box { max-width: 300px; margin: 10px 0 16px; }
.flag-svg { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: var(--shadow); }
.flag-grp h3 { margin: 10px 0 4px; font-size: 1.05rem; }
.chip.ok { background: var(--mint-dark); border-color: var(--mint-dark); color: #fff; }
.chip.wrong { border-color: var(--coral-dark); color: var(--coral-dark); }
.kicker { font-weight: 800; color: var(--grape-dark); font-size: 1.15rem; margin: 0 0 6px; letter-spacing: .01em; }

/* =====================================================
   v15: Professionelt, rent design – lys blå + navy
   (ligger sidst, så det vinder over tidligere regler)
   ===================================================== */
:root {
  --blue: #1F6FD6; --blue-hover: #185CB4; --navy: #0E3B6D; --blue-soft: #E8F2FD; --blue-line: #BFD8F6;
  --ink: #142235; --line: #D9E1EC; --soft: #F3F6FA; --card: #FFFFFF;
  --shadow: 0 1px 2px rgba(16, 40, 80, .06), 0 2px 8px rgba(16, 40, 80, .04);
  --radius: 12px;
}
body { color: var(--ink); }
h1, h2, h3 { font-weight: 700; letter-spacing: -.015em; color: var(--navy); }
h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.welcome h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
a { color: var(--blue); }

/* Header */
.top { background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(16,40,80,.02); }
.brand { color: var(--navy); font-weight: 700; }
.brand .ic { color: var(--blue); }
#nav > a, .more summary { border-radius: 8px; font-weight: 600; }
#nav a.active { background: var(--blue-soft); color: var(--navy); box-shadow: inset 0 -2px 0 var(--blue); }
.more .menu { border-radius: 10px; box-shadow: 0 10px 30px rgba(16,40,80,.12); }
.badge { background: #C94848; }

/* Knapper: flade og rolige */
.btn { border: 1px solid var(--line); border-bottom-width: 1px; border-radius: 10px; font-weight: 600; box-shadow: 0 1px 2px rgba(16,40,80,.05); transition: background .15s, border-color .15s; }
.btn:hover { background: var(--soft); border-color: #C3CFDD; }
.btn:active { transform: none; border-bottom-width: 1px; margin-bottom: 0; }
.btn.go { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.go:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.btn.yes { border-bottom-width: 1px; }
.btn.big { padding: 12px 22px; }
.btn.sm { border-bottom-width: 1px; border-radius: 8px; }
.btn.ghost { box-shadow: none; }
.chip { border: 1px solid var(--line); font-weight: 600; }
.chip:hover { border-color: var(--blue); }
.chip.on { background: var(--blue); border-color: var(--blue); }
.tick { border-width: 1px; }

/* Kort og flader */
.tile, .mission, .game, .gcard, .kcard, .card, .box, .mode, .preset, .pal, .ps, .pet, .agecard, .a11ychip, .stops .stop, .petbar, .lvlcard, .calib, .qrow, .tl-item, .lyn-card, .words div, .pairs div, .kim-item {
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.tile, .mode, .preset, .pal, .game, .agecard, .a11ychip, .tl-item { border-bottom-width: 1px; }
.tile:hover, .mission:hover, .pal:hover, .mode:hover:not(.is-disabled), .preset:hover, .petbar:hover, .agecard:hover { border-color: var(--blue); }
.pal.on, .preset.on, .a11ychip.on, .agecard:focus-visible { border-color: var(--blue); background: var(--blue-soft); }
.gamepanel, .ov-in { border-radius: 16px; }
.card { border-bottom-width: 1px; }
.tile .e, .mission .e, .mode .e, .game .e, .gcard .e, .preset .e, .big-emoji, .welcome .art, .agecard .e, .a11ychip .e { color: var(--blue); }
.goal { background: linear-gradient(135deg, var(--navy), var(--blue)); border-radius: 16px; }
.lvlcard { background: var(--card); }
.lvlcard .bar, .lvl .bar { border: 1px solid var(--line); }
.mission.done { background: var(--mint-soft); border-color: #BFE6D6; }
.kicker { color: var(--blue); }
.warn, .warnbox { border: 1px solid #F0D9A4; }
.okbox { border: 1px solid #BFE6D6; }
.callout { background: var(--blue-soft); border: 1px solid var(--blue-line); }
.infobox { background: var(--blue-soft); border-color: var(--blue-line); }
.tour-focus { outline-color: var(--blue) !important; }
#tour .bubble, #tour i { border-color: var(--blue); }
#tour .bubble { border-width: 2px; box-shadow: 0 14px 40px rgba(14,59,109,.18); }
#tour i { border-width: 2px; }
.foot { background: #fff; }
.foot-in a { color: var(--blue); }
.title-input { color: var(--navy); }

/* Brødkrummesti */
.crumbs { margin: -12px 0 18px; font-size: .92rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 0; margin: 0; align-items: center; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); min-width: 0; }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid #7E8398; border-top: 1.5px solid #7E8398; transform: rotate(45deg); margin-right: 4px; }
.crumbs a, .crumbs button { color: var(--blue); font: 600 .92rem var(--font); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; }
.crumbs [aria-current] { font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }

/* Søgning */
.search-in { max-width: 640px; }
.search-box { position: relative; }
.search-box input { font-size: 1.15rem; padding: 14px 16px; border-radius: 12px; }
.search-res { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 4px; max-height: 55vh; overflow-y: auto; }
.search-res button { width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.search-res button:hover, .search-res button:focus-visible { border-color: var(--blue); background: var(--blue-soft); }
.search-res b { display: block; color: var(--navy); }
.search-res small { color: var(--ink); font-style: italic; }
.search-res .s-ic { color: var(--blue); display: inline-flex; font-size: 1.3rem; }
.kbdhint { font-size: .8rem; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }

/* Enkle informationssider */
.doc { max-width: 820px; }
.doc h2 { font-size: 1.3rem; margin-top: 24px; }
.doc ul { padding-left: 1.2em; } .doc li { margin-bottom: 6px; }
.notfound { text-align: center; max-width: 620px; margin: 40px auto 0; }
.btn.go .kbd, .btn.yes .kbd { color: #fff; opacity: 1; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
.btn.go .kbd, .btn.yes .kbd { background: transparent !important; }
.goal h1, .goal h2, .goal h3, .goal b, .goal p, .goal li, .goal span:not(.ic):not(.btn) { color: #fff; }
.night h1, .night h2, .night h3, .night b { color: #fff; }

/* =====================================================
   v16: Rød tråd – ét fælles design-system
   Ensfarvet baggrund, hvide kasser med samme kant/skygge/hjørner,
   blå ikoner (farver kun når de betyder noget), ens afstande.
   ===================================================== */
:root {
  --page: #EEF2F7;          /* sidens baggrund */
  --card: #FFFFFF;          /* alle kasser */
  --soft: #F5F8FC;          /* flader INDE i kasser */
  --line: #DCE3EC;          /* kanter */
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 40, 80, .05), 0 4px 14px rgba(16, 40, 80, .05);
  --gap: 16px;
}
html { background: var(--page) !important; }
body { background: var(--page) !important; }
.top { background: #FFFFFF !important; backdrop-filter: none; }
.foot { background: #FFFFFF !important; }

/* Alle kasser: hvid, samme kant, hjørner og skygge */
.tile, .mission, .game, .gcard, .kcard, .card, .box, .mode, .preset, .pal, .ps, .pet, .petbar, .lvlcard, .calib,
.stats, .statsrow, .goal-side, .a11ybox, .decl, .gamepanel, .stage, .fh-stage, .qrow, .tl-item, .stops .stop, .wizbox, .wiz, .review .card,
.duel-res div, .infobox, .night, .seg2, .exp-card, .charts section, .petgrid .pet {
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.goal { border: 0; box-shadow: 0 6px 20px rgba(14, 59, 109, .18); }
.night { background: var(--navy); border-color: var(--navy); color: #fff; }
.infobox { background: var(--blue-soft); border-color: var(--blue-line); box-shadow: none; }
.seg2 { padding: 4px; box-shadow: none; }
.seg2 button.on { background: var(--blue); color: #fff; }
.mode.is-disabled, .mode.locked { background: var(--soft); box-shadow: none; }
/* Flader inde i kasser er let grå, så de skiller sig ud fra kassen */
.box .ps, .card .ps, .box .seg2, .gamepanel .box, .a11yset { background: var(--soft); box-shadow: none; }
.a11yset .a11ychip, .agegate .agecard { background: var(--card); }

/* Hover: samme blå kant overalt */
.tile:hover, .mission:hover, .game:hover, .gcard:hover, .pal:hover, .preset:hover, .petbar:hover, .mode:not(.is-disabled):hover, .kcard:hover {
  border-color: var(--blue); box-shadow: 0 2px 4px rgba(16, 40, 80, .06), 0 8px 22px rgba(31, 111, 214, .10);
}
.pal.on, .preset.on { border-color: var(--blue); background: var(--blue-soft); }

/* Ikoner: blå som standard – farve kun når den betyder noget */
.ic.c-grape, .ic.c-blue, .ic.c-sun, .ic.c-coral, .ic.c-orange, .ic.c-pink, .ic.c-mint, .ic.c-teal { color: var(--blue); }
.okbox .ic, .mission.done .ic, .verdict.ok .ic, .tick.on .ic, .ps.happy .ic, .wf-tile .ic { color: var(--mint-dark); }
.warn .ic, .warnbox .ic, .verdict.near .ic { color: #B26A00; }
.verdict.no .ic, .bad .ic { color: var(--coral-dark); }
.btn.go .ic, .btn.yes .ic, .chip.on .ic, .goal .ic, .night .ic, .seg2 button.on .ic, .vej-cell.home .ic, .vej-cell.goal .ic { color: #fff; }
.top .ic.c-orange { color: #E8590C; }           /* streak-flammen beholder sin kendte farve */
.top .ic.c-blue { color: var(--blue); }

/* Ens rytme: sidehoved, sektioner og afstande */
main > h1:first-of-type, main > .crumbs + h1 { margin-top: 0; }
main h1 + .lead { margin-top: 6px; margin-bottom: 22px; max-width: 70ch; }
main h2 { font-size: 1.35rem; margin: 28px 0 12px; }
main h2.pet-h { font-size: 1.35rem; display: flex; align-items: center; gap: 8px; }
.games, .tiles, .missions, .kort-grid, .charts, .settings, .petgrid { gap: var(--gap); }
.box { padding: 20px 22px; }
.game, .tile, .mission { padding: 18px 20px; }
.game h2 { margin: 8px 0 6px; font-size: 1.2rem; }
.game .e, .tile .e { font-size: 1.7rem; }

/* Felter og knapper: samme form overalt */
input[type=text], input[type=search], textarea, select { background: #fff; border-radius: 10px; }
.btn, .chip { border-radius: 10px; }
.chip { border-radius: 999px; }

/* Brødkrumme og header i samme stil */
.crumbs { margin: -6px 0 16px; }
#nav a.active { background: var(--blue-soft); color: var(--navy); }
/* v16.1: Væsne-tal og Tåge-jagt i samme stil som resten */
.petstats .ps { background: var(--card) !important; border: 1px solid var(--line); border-left: 4px solid var(--line); color: var(--ink); }
.petstats .ps.happy { border-left-color: var(--mint-dark); }
.petstats .ps.tired { border-left-color: #B26A00; }
.petstats .ps.fog { border-left-color: #5F6478; }
.petstats .ps.egg, .petstats .ps.shiny { border-left-color: var(--blue); }
.petstats .ps b { color: var(--navy); }
.fh-cta { background: linear-gradient(135deg, var(--navy), var(--blue)) !important; border: 0 !important; color: #fff; box-shadow: 0 6px 20px rgba(14, 59, 109, .18); }
.fh-cta b, .fh-cta h2, .fh-cta h3, .fh-cta span, .fh-cta small { color: #fff; }
.fh-cta .btn.go { background: #fff; color: var(--navy); border-color: #fff; }
.fh-cta .btn.go .ic { color: var(--navy); }
.fh-cta .btn.go.is-disabled { background: rgba(255,255,255,.85); color: var(--navy); opacity: 1; }
/* v16.2: blå justeret en anelse, så tekst og links består 4,5:1 på alle baggrunde */
:root { --blue: #1A66C9; --grape: #1A66C9; }
.xpfloat { color: #A86200 !important; text-shadow: 0 1px 0 #fff; }

/* v17: luft i kasserne – intet indhold helt ude ved kanten */
.wiz { padding: 28px 32px 26px; }
.wiz .steps { margin-bottom: 24px; }
.wiz-nav { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); align-items: center; }
.qrow { padding: 10px 14px; }
.petbar .pet, .petbar .pet.fog, .petbar .pet.egg { border: 0; box-shadow: none; background: transparent; }
@media (max-width: 700px) { .wiz { padding: 20px 18px; } }
/* v17.1: menuen på én linje og footeren altid i bunden */
.top-in { gap: 14px; }
#nav { gap: 0; flex-wrap: nowrap; }
#nav > a, .more summary { padding: 7px 9px; font-size: .94rem; white-space: nowrap; }
.lvl { min-width: 120px; }
.stats { gap: 8px; flex-shrink: 0; }
@media (max-width: 1280px) { #nav > a .ic, .more summary .ic:first-child { display: none; } #nav > a, .more summary { padding: 7px 8px; } }
@media (min-width: 901px) and (max-width: 1060px) { .lvl { min-width: 0; } .lvl .bar { display: none; } }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; width: 100%; box-sizing: border-box; }
.foot { flex-shrink: 0; margin-top: 0; }
.top.nav2 .top-in { flex-wrap: wrap; row-gap: 4px; }
.top.nav2 #nav { order: 3; flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; border-top: 1px solid var(--line); padding-top: 6px; }
.top.nav2 .stats { margin-left: auto; }
.top.navc #nav > a .ic, .top.navc .more summary .ic:first-child { display: none; }
.top.navc #nav > a, .top.navc .more summary { padding: 7px 8px; }
.xpfloat { animation: xpup-solid 1.1s ease-out forwards !important; opacity: 1 !important; }
@keyframes xpup-solid { from { transform: translateY(0); } to { transform: translateY(-46px); } }
.petstats .ps:not(.happy):not(.tired):not(.fog):not(.egg):not(.shiny) { border-left-color: var(--blue); }
.empty-state { display: flex; align-items: center; gap: 16px; }
.empty-state .empty-ic { font-size: 2rem; color: var(--blue); display: inline-flex; }
.empty-state b { color: var(--navy); font-size: 1.1rem; } .empty-state p { margin: 2px 0 0; }
/* v17.2: header uden "kasse" om knapperne, og to rækker på mobil */
.top .stats { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0; }
@media (max-width: 900px) {
  .top-in { flex-wrap: wrap; row-gap: 6px; padding: 8px 14px; }
  .top-in .brand { order: 1; }
  .top-in .stats { order: 2; margin-left: auto; }
  .top-in #nav { order: 3; flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .lvl { min-width: 0; font-size: .78rem; }
  .lvl .bar { width: 70px; }
  .stats { gap: 6px; }
  .tourbtn { width: 2.2rem; height: 2.2rem; }
}
@media (max-width: 480px) { .xp-txt { display: none; } .lvl .bar { width: 52px; } .streak { font-size: .9rem; } .top-in .brand { font-size: 1.05rem; } }

/* =====================================================
   v18: Forside og metoder efter alder
   ===================================================== */
.home-h { margin: 0 0 16px; }
/* Metode-kort */
.methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--gap, 16px); margin-bottom: 8px; }
.method { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.method .m-head { display: flex; align-items: center; gap: 10px; }
.method .m-ic { font-size: 1.6rem; color: var(--blue); display: inline-flex; }
.method h3 { margin: 0; font-size: 1.15rem; }
.method p { margin: 0; flex: 1; }
.m-steps { margin: 0; padding: 0; list-style: none; counter-reset: ms; display: flex; flex-direction: column; gap: 6px; }
.m-steps li { counter-increment: ms; display: flex; gap: 10px; align-items: baseline; font-weight: 600; }
.m-steps li::before { content: counter(ms); flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--blue-soft); color: var(--navy); font-weight: 700; font-size: .85rem; display: inline-grid; place-items: center; }
.method .btn { align-self: flex-start; margin-top: 4px; }
/* Spil-knapper på forsiden */
.kidgames { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 12px; }
.kidgame { font: inherit; text-align: left; cursor: pointer; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.kidgame:hover { border-color: var(--blue); }
.kidgame .e { font-size: 2rem; color: var(--blue); display: inline-flex; }
.kidgame b { color: var(--navy); font-size: 1.1rem; }
.kidgames.ung .kidgame { flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px; }
.kidgames.ung .kidgame .e { font-size: 1.4rem; }
html[data-age="barn"] .kidgame { min-height: 8.5rem; }
html[data-age="barn"] .kidgame .e { font-size: 2.4rem; }
/* Senior: store, tydelige handlinger */
.sactions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 14px; margin-bottom: 8px; }
.sact { display: flex; align-items: center; gap: 16px; padding: 20px 22px; background: var(--card); border: 2px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); min-height: 5.5rem; }
.sact:hover, .sact:focus-visible { border-color: var(--blue); background: var(--blue-soft); }
.sact .e { font-size: 2.2rem; color: var(--blue); display: inline-flex; flex: none; }
.sact b { display: block; color: var(--navy); font-size: 1.2rem; }
.sact small { font-style: italic; font-size: 1rem; }
.home-goal-sec { margin-top: 28px; }

/* =====================================================
   v20: Baggrundsbillede (bg.avif)
   Fast baggrund bag hele siden (virker også på iPhone), med et let slør,
   så tekst direkte på baggrunden altid kan læses – uanset hvordan billedet ser ud.
   Hvis billedet mangler, vises den rolige baggrundsfarve som før.
   ===================================================== */
:root { --bg-veil: rgba(238, 242, 247, .72); }
html { background: #EEF2F7 !important; }
body { background: transparent !important; position: relative; }
body::before {
  content: ""; position: fixed; inset: -12px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--bg-veil), var(--bg-veil)), url("bg.avif") 0 0 / 280px 280px repeat, #EEF2F7;
  filter: blur(2px);
}
/* Tekst og links der står direkte på baggrunden: mørk navy (kontrast ≥ 5:1 på ethvert billede) */
main > h1, main > h2, main > .lead, main > p, .home-h, .crumbs li, .crumbs [aria-current], .kicker, .notfound p { color: var(--navy); }
.crumbs a, .crumbs button, main > p a, main > .lead a, .notfound a:not(.btn), .welcome .kicker { color: var(--navy) !important; }
main > p a, .crumbs a { text-decoration-thickness: 2px; }
main > .lead, .welcome p { text-shadow: 0 0 12px rgba(238, 242, 247, .9); }
@media print { body::before { display: none; } }

/* v21: Prøv det nu + tal-figurer */
.quickstart { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--card); border: 2px solid var(--blue); border-radius: 16px; padding: 20px 22px; margin: 0 0 22px; box-shadow: var(--shadow); }
.quickstart h2 { margin: 0 0 4px; font-size: 1.3rem; }
.quickstart p { margin: 0; max-width: 60ch; }
.shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 12px; margin-bottom: 18px; }
.shape { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.shape-n { font-size: 2.4rem; font-weight: 800; color: var(--blue); width: 2.4rem; text-align: center; flex: none; }
.shape b { display: block; color: var(--navy); font-size: 1.1rem; }
.shape small { font-size: .95rem; }
.shape-ex h2 { margin-top: 0; }
.adv { margin-top: 16px; } .adv summary { cursor: pointer; font-weight: 700; color: var(--navy); }
@media (max-width: 420px) { .btn, .btn .nobr { overflow-wrap: anywhere; hyphens: auto; } .method .btn, .quickstart .btn { max-width: 100%; } }

/* v22: Hvid flade bag alt indhold – baggrundsmønstret ses kun ude i siderne */
main { background: #FFFFFF; padding-left: 32px; padding-right: 32px; box-shadow: 0 0 0 1px var(--line), 0 12px 40px rgba(14, 59, 109, .08); }
main > .lead, .welcome p { text-shadow: none; }
@media (max-width: 1360px) { main { box-shadow: none; } }
@media (max-width: 700px) { main { padding-left: 16px; padding-right: 16px; } }

/* =====================================================
   v23: DARK MODE (html[data-theme="dark"])
   Dyb navy flade, lys tekst. Knapper beholder mættet blå med hvid tekst (≥ 4,5:1).
   ===================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --page: #0B1422; --bg: #1B2A40; --card: #142033; --soft: #1B2A40; --line: #2C3D56;
  --ink: #E6EDF7; --muted: #C3CFDF; --navy: #D6E4F7;
  --blue: #8DBDF8; --blue-hover: #185CB4; --blue-soft: #17304F; --blue-line: #2D4E78;
  --grape: #8DBDF8; --grape-dark: #A9CDF9; --grape-soft: #17304F;
  --mint: #1F9E73; --mint-dark: #5FD3A8; --mint-soft: #10342A;
  --coral: #E06666; --coral-dark: #FF8A8A; --coral-soft: #3A1C1F;
  --sun: #F2C14E; --sun-dark: #F2C14E; --sun-soft: #3A2E12;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.35);
  --bg-veil: rgba(11, 20, 34, .82);
  background: #0B1422 !important;
}
html[data-theme="dark"] body::before { background: linear-gradient(var(--bg-veil), var(--bg-veil)), url("bg.avif") 0 0 / 280px 280px repeat, #0B1422; }
html[data-theme="dark"] main { background: #101A2B; box-shadow: 0 0 0 1px var(--line), 0 12px 40px rgba(0,0,0,.4); }
html[data-theme="dark"] .top, html[data-theme="dark"] .foot { background: #101A2B !important; border-color: var(--line); }
html[data-theme="dark"] .brand, html[data-theme="dark"] #nav > a, html[data-theme="dark"] .more summary { color: var(--ink); }
html[data-theme="dark"] #nav a.active { background: var(--blue-soft); color: #fff; box-shadow: inset 0 -2px 0 var(--blue); }
html[data-theme="dark"] .more .menu, html[data-theme="dark"] .ov-in, html[data-theme="dark"] #tour .bubble { background: var(--card); color: var(--ink); }
html[data-theme="dark"] .overlay { background: rgba(3, 8, 16, .72); }
/* Felter */
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=search], html[data-theme="dark"] input[type=number], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: #0F1928; color: var(--ink); border-color: #7486A2; }
html[data-theme="dark"] ::placeholder { color: #A9B6C9; }
/* Knapper og valg: mættet blå med hvid tekst */
html[data-theme="dark"] .btn { background: var(--bg); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .btn:hover { background: #22344F; border-color: #3B5273; }
html[data-theme="dark"] .btn.go, html[data-theme="dark"] .chip.on, html[data-theme="dark"] .seg2 button.on, html[data-theme="dark"] .rb-play, html[data-theme="dark"] .steps i.on,
html[data-theme="dark"] .picked .n, html[data-theme="dark"] .num, html[data-theme="dark"] .vej-cell.home { background: #1F6FD6; border-color: #1F6FD6; color: #fff; }
html[data-theme="dark"] .btn.go:hover { background: #185CB4; border-color: #185CB4; }
html[data-theme="dark"] .btn.go .ic, html[data-theme="dark"] .chip.on .ic, html[data-theme="dark"] .seg2 button.on .ic { color: #fff; }
html[data-theme="dark"] .btn.yes, html[data-theme="dark"] .chip.ok, html[data-theme="dark"] .chip.kim-opt.ok { background: #097D5A; border-color: #097D5A; color: #fff; }
html[data-theme="dark"] .chip { background: var(--bg); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] #toast, html[data-theme="dark"] .skip { background: #E6EDF7; color: #0B1422; }
html[data-theme="dark"] #toast .ic { color: #0B1422; }
/* Mørke kort med farvet baggrund beholder deres faste farver */
html[data-theme="dark"] .goal, html[data-theme="dark"] .fh-cta { background: linear-gradient(135deg, #0E3B6D, #1F6FD6) !important; }
html[data-theme="dark"] .night { background: #0E3B6D; border-color: #0E3B6D; }
html[data-theme="dark"] .fh-cta .btn.go { background: #fff; color: #0E3B6D; border-color: #fff; }
html[data-theme="dark"] .fh-cta .btn.go .ic { color: #0E3B6D; }
html[data-theme="dark"] .goal .btn { background: #fff; color: #0E3B6D; border-color: #fff; }
/* Beskeder og bokse */
html[data-theme="dark"] .infobox, html[data-theme="dark"] .callout { background: var(--blue-soft); border-color: var(--blue-line); color: var(--ink); }
html[data-theme="dark"] .warn, html[data-theme="dark"] .warnbox { background: #3A2E12; border-color: #6B5320; color: var(--ink); }
html[data-theme="dark"] .okbox { background: #10342A; border-color: #1F5A45; color: var(--ink); }
html[data-theme="dark"] .verdict.ok { background: #10342A; color: #7FE0BB; }
html[data-theme="dark"] .verdict.no { background: #3A1C1F; color: #FF9B9B; }
html[data-theme="dark"] .verdict.near { background: #3A2E12; color: #F5CD6B; }
html[data-theme="dark"] .quickstart { background: var(--card); border-color: #1F6FD6; }
/* Spilbrætter */
html[data-theme="dark"] .lyn-tile:not(.hidden), html[data-theme="dark"] .kim-item, html[data-theme="dark"] .wf-tile:not(.correct):not(.present):not(.absent), html[data-theme="dark"] .shape { background: var(--card); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .wf-tile.filled { border-color: #8A9AB3; }
html[data-theme="dark"] .wf-key:not(.correct):not(.present):not(.absent) { background: #2A3A52; color: var(--ink); }
html[data-theme="dark"] .kim-tray { background: #1B2A40; border-color: #33465F; }
html[data-theme="dark"] .room-grid { background: linear-gradient(#2A2418, #241E14); border-color: #5A4B30; }
html[data-theme="dark"] .room-cell { background: rgba(255,255,255,.04); border-color: #5A4B30; }
html[data-theme="dark"] .vej-grid { background: #14281A; }
html[data-theme="dark"] .vej-cell { background: #1C3324; border-color: #2E4F38; color: var(--ink); }
html[data-theme="dark"] .vej-cell.on { background: #5A4520; border-color: #8A6B30; }
html[data-theme="dark"] .dk-sea { fill: #10263F; } html[data-theme="dark"] .dk-land { fill: #2B3A4F; stroke: #8DA2BA; }
html[data-theme="dark"] .dk-insettxt { fill: #C3CFDF; } html[data-theme="dark"] .dk-inset { stroke: #8DA2BA; }
html[data-theme="dark"] .dkmap { border-color: #2D4E78; }
html[data-theme="dark"] .expmap .stop { fill: #142033; stroke: #6E7F99; }
html[data-theme="dark"] .exp-road { stroke: #3A4A60; }
html[data-theme="dark"] .chart .tx { fill: var(--ink); } html[data-theme="dark"] .chart .ax { stroke: #6E7F99; }
html[data-theme="dark"] .plan rect, html[data-theme="dark"] .plan .room { fill: #142033; }
html[data-theme="dark"] .lvl .bar, html[data-theme="dark"] .lvlcard .bar { background: #2A3A52; }
/* Dark mode: faste mørke tekstfarver får lyse modstykker */
html[data-theme="dark"] .tag, html[data-theme="dark"] .rb-tag, html[data-theme="dark"] .colsum .half, html[data-theme="dark"] .res .half, html[data-theme="dark"] .plus5 { color: #F5CD6B; }
html[data-theme="dark"] .tag, html[data-theme="dark"] .rb-tag { background: #3A2E12; }
html[data-theme="dark"] .verdict.hyper { background: #3A2516; color: #FFB38A; }
html[data-theme="dark"] .xpfloat { color: #F5CD6B !important; text-shadow: 0 1px 0 #000; }
html[data-theme="dark"] .ob-tag { background: var(--blue-soft); color: #fff; border-color: var(--blue-line); }
html[data-theme="dark"] .plan text.lbl { stroke: #142033; fill: var(--ink); }
html[data-theme="dark"] .plan .stn text.n { fill: #fff; }
@media (max-width: 420px) { .top-in .stats { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; flex-shrink: 1; min-width: 0; } .top-in .brand { flex-shrink: 0; } }

/* =====================================================
   v24: Rulle-rækker med pile + glade væsner i mørk tilstand
   ===================================================== */
.carousel { margin-bottom: 8px; }
.car-track { display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; gap: 16px;
  grid-auto-columns: calc((100% - (var(--car-n, 3) - 1) * 16px) / var(--car-n, 3));
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 4px 2px 10px; scrollbar-width: none; }
.car-track::-webkit-scrollbar { display: none; }
.car-track > * { scroll-snap-align: start; min-width: 0; }
.car-track:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 12px; }
.car-nav { display: flex; justify-content: center; gap: 12px; margin-top: 4px; }
.car-btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; color: #0E3B6D; padding: 0; }
.car-btn .ic { width: 1.2rem; height: 1.2rem; color: #0E3B6D; }
.car-btn:hover { border-color: var(--blue); }
.car-btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.carousel.no-overflow .car-nav { display: none; }
html[data-theme="dark"] .car-btn { background: #FFFFFF; border-color: #FFFFFF; }
/* Glade væsner og væsner i tågen i mørk tilstand: lidt mindre hvid baggrund og sort tekst */
html[data-theme="dark"] .pet.happy { background: linear-gradient(180deg, #DCE7E1, #CBD7D1); border-color: #B5C3BC; color: #0B1422; }
html[data-theme="dark"] .pet.happy b, html[data-theme="dark"] .pet.happy span, html[data-theme="dark"] .pet.happy small { color: #0B1422; }
html[data-theme="dark"] .pet.happy .stars .ic.off { color: #93A39B; fill: #93A39B; }
html[data-theme="dark"] .pet.fog { background: #1B2A40; }
.car-track { padding-left: 0; padding-right: 0; scroll-padding: 0; }
/* Dark mode: rester fundet ved gennemgang af hele CSS'en */
html[data-theme="dark"] .fh-stage.lost { background: #1E2533; }
html[data-theme="dark"] .stage.censor { background: #3A2516; border-color: #8A5A30; }
html[data-theme="dark"] #tour i { background: var(--card); }
html[data-theme="dark"] .stage.censor .bigcount { color: #FFB38A; }
/* Lys tilstand: rettelser fundet ved den dybe test */
.stage.censor .bigcount { color: var(--coral-dark); }
html[data-theme="dark"] .stage.censor .bigcount { color: #FFB38A; }
.plus5 { animation: plus5-solid 1s ease-out forwards !important; opacity: 1 !important; }
@keyframes plus5-solid { from { transform: translateY(0); } to { transform: translateY(-18px); } }

/* v25: Trin 1-2-3 og knapper på linje på tværs af metode-kasserne (subgrid: overskrift, tekst, trin 1, trin 2, trin 3, knap) */
.car-track.methods { grid-template-rows: repeat(6, auto); row-gap: 0; column-gap: 16px; }
.car-track.methods > .method { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
.car-track.methods > .method:not(:has(.m-steps)) { grid-row: span 3; }
.car-track.methods > .method > p { flex: none; }
.car-track.methods > .method > .m-steps { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; }
.car-track.methods > .method > .m-steps > li { align-self: start; }
.car-track.methods > .method > .btn { align-self: end; justify-self: start; }
/* v25b: hvert trin har sin egen fælles række, så 1, 2 og 3 står på linje – også når et trin fylder to linjer */
.car-track.methods { grid-template-rows: repeat(6, auto); }
.car-track.methods > .method { grid-row: span 6; counter-reset: ms; }
.car-track.methods > .method:not(:has(.m-steps)) { grid-row: span 3; }
.car-track.methods > .method > .m-steps { display: contents; }
.car-track.methods > .method > .m-steps > li { margin: 0; }
/* v25c: flere rulle-rækker på forsiden + hvid tekst i menuen (mørk tilstand) */
.car-track.tiles, .car-track.missions, .car-track.sactions { margin: 0; }
.carousel:has(.tiles) { margin: 14px 0 32px; }
.car-track.missions { gap: 16px; }
.more .menu a { color: var(--ink); }
html[data-theme="dark"] .more .menu a { color: #FFFFFF; }
html[data-theme="dark"] .more .menu a:hover, html[data-theme="dark"] .more .menu a:focus-visible { background: var(--blue-soft); color: #FFFFFF; }
html[data-theme="dark"] .more .menu a .ic { color: #8DBDF8; }
.car-track.methods:not(:has(.m-steps)) { grid-template-rows: repeat(3, auto); }

/* =====================================================
   v26: Startskærme for spil + Pi-hjælper
   ===================================================== */
.gintro { max-width: 640px; }
.gintro-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.gintro-e { font-size: 2.6rem; color: var(--blue); display: inline-flex; }
.gintro-facts { margin: 4px 0 0; font-weight: 600; }
.gintro h3 { margin: 6px 0 8px; font-size: 1.05rem; }
.gintro-steps { margin: 0; padding: 0; list-style: none; counter-reset: gs; display: flex; flex-direction: column; gap: 8px; }
.gintro-steps li { counter-increment: gs; display: flex; gap: 10px; align-items: baseline; }
.gintro-steps li::before { content: counter(gs); flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--blue-soft); color: var(--navy); font-weight: 700; font-size: .9rem; display: inline-grid; place-items: center; }
/* Pi: båndet med decimaler */
.pitape { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font: 700 1.5rem var(--font); font-variant-numeric: tabular-nums; margin: 10px 0; padding: 12px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; min-height: 3.4rem; }
.pitape .pi-3 { margin-right: 4px; }
.pd { display: inline-block; min-width: .8em; text-align: center; border-radius: 4px; }
.pd.ok { color: var(--ink); }
.pd.fixed { color: var(--coral-dark); text-decoration: underline wavy; text-underline-offset: 5px; }
.pd.help { color: var(--blue); text-decoration: underline dotted; text-underline-offset: 5px; }
.pgap { width: .5em; }
.pcursor { width: 2px; height: 1.4em; background: var(--blue); margin-left: 2px; animation: pblink 1s steps(2) infinite; }
@keyframes pblink { 50% { opacity: 0; } }
html[data-a11y~="ro"] .pcursor { animation: none; }
.pi-in { font-size: 1.5rem; letter-spacing: .1em; max-width: 320px; }
.pimsg { min-height: 2.6rem; margin-top: 8px; }
.picmp { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font: 700 1.3rem var(--font); font-variant-numeric: tabular-nums; }
.picmp div { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.picmp small { width: 5.5rem; font: 600 .85rem var(--font); }
.picmp span { min-width: 1.4em; text-align: center; border-radius: 6px; padding: 2px 0; background: var(--soft); }
.picmp span.ok { background: var(--mint-soft); color: var(--mint-dark); }
.picmp span.no { background: var(--coral-soft); color: var(--coral-dark); }