/* ─────────────────────────────────────────────────────────
   Byg figuren — sæt fagordene på en figur (Byg cellen m.fl.).
   Følger smbi.dk's udtryk (design_rules.md): papir, blækrammer,
   regnbuestribe, Archivo / Source Serif 4 / IBM Plex Mono. Pink
   accent for biologi; <body class="geo"> giver blå for naturgeografi.
   ───────────────────────────────────────────────────────── */
:root{
  --paper:#FFF9EE;  --paper-2:#FFF3DC;  --panel:#FFFFFF;
  --ink:#17211F;    --slate:#566B68;
  --pink:#E8336D; --blue:#0E86C8; --lime:#5FB030; --amber:#FFB300;
  --grape:#7A4FD6; --coral:#FF6A3D; --teal:#0FA593;
  --accent:var(--pink);
  --accent-lys:#FDEAF1;   /* panelets hoved */
  --accent-hover:#FBD3E1; /* menulinks */
  --accent-glo:#F7B9D2;   /* lyset bag overskriften */
  --display:'Archivo',system-ui,sans-serif;
  --body:'Source Serif 4',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --wide:'wdth' 118;
  --max:1280px;
  --hard:4px 4px 0 var(--ink);
  --hard-lg:7px 7px 0 var(--ink);
}
body.geo{--accent:var(--blue);--accent-lys:#E4F2FB;--accent-hover:#CBE7F8;--accent-glo:#9FD3F2}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--grape);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--mono);font-size:0.68rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Topbjælke ─────────────────────────────────────────── */
.rainbow{height:7px;background:linear-gradient(90deg,
  var(--pink) 0 14.3%, var(--coral) 14.3% 28.6%, var(--amber) 28.6% 42.9%,
  var(--lime) 42.9% 57.2%, var(--teal) 57.2% 71.5%, var(--blue) 71.5% 85.8%,
  var(--grape) 85.8% 100%)}
.top{position:sticky;top:0;z-index:60}
.top-bar{background:rgba(255,249,238,0.93);backdrop-filter:blur(10px);border-bottom:2px solid var(--ink)}
.top-in{max-width:var(--max);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:16px;height:60px}
.brand{font-family:var(--display);font-variation-settings:'wdth' 125;font-weight:800;font-size:1.15rem;
  letter-spacing:-0.02em;text-decoration:none;display:flex;align-items:center;gap:8px}
.brand-mark{width:25px;height:25px;border-radius:9px;border:2px solid var(--ink);flex-shrink:0;
  background:conic-gradient(var(--pink),var(--amber),var(--lime),var(--blue),var(--grape),var(--pink))}
.brand em{font-family:var(--mono);font-size:0.72rem;font-weight:500;font-style:normal;color:var(--slate)}
.top-nav{display:flex;gap:6px;margin-left:auto}
.top-nav a{font-family:var(--display);font-size:0.84rem;font-weight:600;text-decoration:none;white-space:nowrap;
  padding:7px 14px;border-radius:20px;border:2px solid transparent;transition:background .15s,border-color .15s}
.top-nav a:hover{background:var(--accent-hover);border-color:var(--ink)}

/* ── Sidehoved ─────────────────────────────────────────── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.head{padding-top:26px;padding-bottom:4px;position:relative;overflow:hidden}
.head::before{content:'';position:absolute;width:380px;height:380px;border-radius:50%;
  background:var(--accent-glo);filter:blur(70px);opacity:.5;top:-200px;right:-120px;z-index:0}
.head-in{position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#FFF6E0;padding:6px 14px;border-radius:20px}
.eyebrow .blink{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}
h1{font-family:var(--display);font-variation-settings:var(--wide);font-weight:800;
  font-size:clamp(1.9rem,4.2vw,2.6rem);line-height:1.03;letter-spacing:-0.032em;margin:12px 0 8px}
.hi{position:relative;display:inline-block;z-index:0;white-space:nowrap}
.hi::before{content:'';position:absolute;z-index:-1;left:-8px;right:-8px;top:12%;bottom:8%;
  background:var(--hc,var(--amber));border-radius:6px;transform:rotate(-1.3deg)}
.lead{font-size:1.02rem;color:#3E4E4C;max-width:66ch}

/* ── Panelet ───────────────────────────────────────────── */
.rig{position:relative;background:var(--panel);border:2.5px solid var(--ink);border-radius:18px;
  overflow:clip;box-shadow:var(--hard-lg);margin-top:18px;scroll-margin-top:72px}
.rig-bar{height:9px;background:var(--accent)}
.rig-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 13px;
  border-bottom:2px solid var(--ink);background:var(--accent-lys)}
.faner{display:flex;gap:6px;flex-wrap:wrap}
.fane{font-family:var(--display);font-size:0.82rem;font-weight:700;background:#fff;border:2px solid var(--ink);
  color:var(--ink);padding:5px 12px;border-radius:18px;cursor:pointer;box-shadow:2px 2px 0 var(--ink);
  display:inline-flex;align-items:center;gap:5px;transition:transform .12s,box-shadow .12s,background .16s}
.fane:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.fane[aria-selected="true"]{background:var(--accent);color:#fff;transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.fane .fnr{font-family:var(--mono);font-size:0.62rem;opacity:.7}
.fane .maerke{color:#B57B00;font-size:0.85rem}
.fane[aria-selected="true"] .maerke{color:#FFE07A}
.rig-head .spacer{margin-left:auto}
.kontakt{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-size:0.8rem;font-weight:700;cursor:pointer}
.kontakt input{width:18px;height:18px;accent-color:var(--accent)}
.btn-mini{font-family:var(--display);font-size:0.76rem;font-weight:700;background:#fff;border:2px solid var(--ink);
  color:var(--ink);padding:4px 11px;border-radius:18px;cursor:pointer;box-shadow:2px 2px 0 var(--ink);
  transition:transform .12s,box-shadow .12s,background .16s}
.btn-mini:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.btn-mini[aria-pressed="true"]{background:var(--ink);color:#fff}

.rig-body{display:grid;grid-template-columns:minmax(0,1fr) 330px}

/* Scenen: figuren på et lyst ark */
.scene{position:relative;padding:8px 12px 10px;background:#FFFDF8;min-width:0;overflow:hidden}
.fig-intro{font-size:0.9rem;color:#3E4E4C;margin:0 4px 4px;max-width:80ch}
.fig-ramme{width:100%}
#figur{display:block;width:100%;height:auto;margin:0 auto;
  max-height:calc(100dvh - 190px);min-height:300px;
  user-select:none;-webkit-user-select:none}
.plads{touch-action:none}
body.fokus #figur{max-height:calc(100dvh - 120px)}

/* Panelet med opgaven */
.side{border-left:2px solid var(--ink);padding:13px 14px 16px;display:flex;flex-direction:column;gap:11px;background:#fff}
.opg h2{font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-0.01em;line-height:1.2}
.opg p{font-size:0.86rem;color:#3E4E4C;margin-top:3px;line-height:1.4}
.bakke{display:flex;flex-wrap:wrap;gap:7px;min-height:44px;padding:9px;border:2px dashed #C9BFA9;border-radius:12px;background:var(--paper)}
.ord{font-family:var(--display);font-size:0.9rem;font-weight:700;background:#fff;border:2px solid var(--ink);
  color:var(--ink);padding:5px 12px;border-radius:10px;cursor:grab;box-shadow:2px 2px 0 var(--ink);
  touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .1s,box-shadow .1s}
.ord:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.ord.valgt{box-shadow:0 0 0 4px var(--amber),2px 2px 0 var(--ink);background:#FFF6D6}
.ord.traekkes{opacity:.35}
.tom-bakke{font-size:0.82rem;color:var(--slate);font-style:italic;align-self:center}
.spoeg-ord{position:fixed;z-index:200;pointer-events:none;transform:translate(-50%,-60%) rotate(-2deg);
  font-family:var(--display);font-size:0.95rem;font-weight:700;background:#FFF6D6;border:2px solid var(--ink);
  padding:5px 12px;border-radius:10px;box-shadow:4px 4px 0 var(--ink)}
body.traekker,body.traekker *{cursor:grabbing!important}

.besked{font-size:0.88rem;line-height:1.42;min-height:1.4em;padding:0 2px}
.besked:empty{display:none}
.besked.fejl{background:#FFE9E3;border:2px solid var(--coral);border-radius:10px;padding:8px 10px}
.besked.ok{background:#E6F5DC;border:2px solid var(--lime);border-radius:10px;padding:8px 10px}
.besked.hint{background:#FFF0E8;border:2px solid var(--coral);border-radius:10px;padding:8px 10px}
.besked.info{color:#3E4E4C}

.knapper{display:flex;gap:8px}
.btn-stor{font-family:var(--display);font-size:0.9rem;font-weight:800;background:var(--accent);color:#fff;
  border:2.5px solid var(--ink);border-radius:12px;padding:8px 14px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s,box-shadow .12s}
.btn-stor:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn-stor:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.btn-stor.lys{background:#fff;color:var(--ink)}
.knapper .btn-stor{flex:1}

.faerdig-kort{background:#E9F6E1;border:2.5px solid var(--ink);border-radius:14px;padding:11px 13px;box-shadow:3px 3px 0 var(--ink)}
.faerdig-kort h3{font-family:var(--display);font-weight:800;font-size:1rem}
.faerdig-kort .ros{font-size:0.84rem;color:#8A5B00;font-weight:600}
.faerdig-kort dl{margin:6px 0 10px;font-size:0.82rem;line-height:1.35;max-height:40vh;overflow:auto}
.faerdig-kort dt{font-family:var(--display);font-weight:800;margin-top:5px}
.faerdig-kort dd{color:#2F3E3C}
.faerdig-kort .slut{font-size:0.86rem}

.lag h3{font-family:var(--mono);font-size:0.62rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--slate);margin-bottom:5px}
.lag ol{list-style:none;display:flex;flex-direction:column;gap:4px}
.lag-knap{width:100%;display:flex;align-items:center;gap:8px;text-align:left;background:none;border:2px solid transparent;
  border-radius:9px;padding:3px 6px;font-family:var(--display);font-size:0.84rem;font-weight:600;color:var(--ink);cursor:pointer}
.lag-knap:hover:not(:disabled){border-color:var(--ink)}
.lag-knap:disabled{cursor:default;opacity:.6}
.lag-knap .nr{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);display:inline-grid;place-items:center;
  font-family:var(--mono);font-size:0.66rem;flex-shrink:0;background:#fff}
.lag-knap.nu .nr{background:var(--amber)}
.lag-knap.faerdig .nr{background:var(--lime);color:#fff}
.lag-knap .stjerne{margin-left:auto;color:#B57B00}
.side-bund{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}

/* ── Figurens elementer (SVG) ──────────────────────────── */
.del{transition:filter .6s ease}
.del.graa{filter:grayscale(1) contrast(.6) brightness(1.22)}
.let-graa .del.graa{filter:saturate(.7) brightness(1.06)}
.del.pop{animation:pop .7s ease}
@keyframes pop{0%{filter:grayscale(1) brightness(1.4)}40%{filter:brightness(1.25) saturate(1.4)}100%{filter:none}}
.omr > *, .omr g > *{fill:rgba(255,179,0,.15);stroke:none;transition:fill .15s,stroke .15s}
.omr [fill="none"], .omr g[fill="none"] > *{fill:none;stroke:rgba(255,179,0,.30)}
.omr.over > *{fill:rgba(255,179,0,.32)}
.omr.over [fill="none"], .omr.over g[fill="none"] > *{fill:none;stroke:rgba(255,179,0,.55)}
.omr.hint > *{fill:rgba(255,106,61,.22)}
.omr.hint [fill="none"], .omr.hint g[fill="none"] > *{fill:none;stroke:rgba(255,106,61,.45)}

.plads{cursor:pointer;outline:none}
.plads .streg{stroke:var(--ink);stroke-width:2.2}
.plads .prik{fill:var(--ink);stroke:#fff;stroke-width:2}
.plads.tom .prik{fill:#E39B00}
.plads .boks{fill:#FFF3C8;stroke:#D99400;stroke-width:2.6;stroke-dasharray:7 5}
.plads.fyldt .boks{fill:#fff;stroke:var(--ink);stroke-dasharray:none}
.plads.laast{cursor:help}
.plads.laast .boks{fill:#DDF2CF;stroke:#2E7D32;stroke-dasharray:none}
.plads.laast .prik{fill:#2E7D32}
.plads.over .boks{fill:#FFE38A}
.plads.hint .boks{stroke:var(--coral);stroke-width:4.5;stroke-dasharray:none}
.plads.valgt .boks{stroke:var(--grape);stroke-width:4.5}
.plads:focus-visible .boks{stroke:var(--grape);stroke-width:5;stroke-dasharray:none}
.ordtekst{font-family:var(--display);font-weight:700;font-size:22px;fill:var(--ink);pointer-events:none}
.fig-navn{font-family:var(--display);font-weight:800;font-size:22px;fill:var(--ink)}

/* Konfetti */
.konfetti{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;z-index:5;pointer-events:none;
  animation:fald 1.8s ease-in forwards}
@keyframes fald{to{transform:translate(var(--x),105vh) rotate(var(--drej));opacity:.2}}

/* ── Om figuren ────────────────────────────────────────── */
.om{margin-top:22px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:4px 16px;box-shadow:var(--hard)}
.om summary{font-family:var(--display);font-weight:800;cursor:pointer;padding:9px 0}
.om div{padding:0 0 12px;font-size:0.95rem}
.om p,.om ul{margin-top:8px}
.om ul{padding-left:20px}

/* ── Bund ──────────────────────────────────────────────── */
.foot{margin-top:34px;background:var(--ink);color:#FFF6E0;padding:26px 0 32px}
.foot-in{max-width:var(--max);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.foot .brand{color:#FFF6E0}
.foot .mono{color:#8FA29E;margin-top:5px}
.foot-links{display:flex;gap:8px;flex-wrap:wrap}
.foot-links a{font-family:var(--display);font-size:0.82rem;font-weight:700;text-decoration:none;border:2px solid #FFF6E0;
  border-radius:20px;padding:5px 13px;transition:background .16s,color .16s,border-color .16s}
.foot-links a:hover{background:var(--accent);border-color:var(--accent)}

/* ── Fokus: kun figuren og opgaven ─────────────────────── */
body.fokus .top, body.fokus .head, body.fokus .foot, body.fokus .om{display:none}
body.fokus .wrap{max-width:none;padding:8px}
body.fokus .rig{margin-top:0}

/* ── Responsivt ────────────────────────────────────────── */
@media (max-width:1100px){ .rig-body{grid-template-columns:minmax(0,1fr) 290px} }
@media (max-width:860px){
  .rig-body{grid-template-columns:1fr}
  /* opgaven over figuren, så bakken er tæt på pladserne */
  /* bakken klæber under topbjælken, så ordene er ved hånden, mens figuren rulles */
  .rig{overflow:visible}
  .side{order:-1;border-left:none;border-bottom:2px solid var(--ink);
    position:sticky;top:67px;z-index:20;max-height:52vh;overflow:auto;box-shadow:0 6px 10px -8px rgba(23,33,31,.45)}
  body.fokus .side{top:0}
  .lag{display:none}
  #figur{max-height:none;min-height:0}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap,.top-in,.foot-in{padding-left:16px;padding-right:16px}
  .rig{border-radius:14px;box-shadow:var(--hard)}
  .rig-head .spacer{display:none}
  /* figuren må rulle vandret inde i sin egen ramme, så ordene kan læses */
  .fig-ramme{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #figur{width:var(--mobil-b,680px);max-width:none}
  .scene{padding:6px}
  .opg p{display:none}
  .side{gap:8px;padding:10px 12px 12px}
  .knapper .btn-stor{padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }