:root{
  --paper:#F1F2F4; --surface:#FFFFFF; --ink:#15181D; --muted:#4A5059; --line:#D3D7DD; --tint:#E3E5E9; /* lyst tema: kølig lysegrå baggrund i stedet for beige (9. oktober 2026, Sørens valg, færre farver i toppen); før: papir #ECE8DF, kant #CFC8BB, tone #E2DDD1 */
  --stamp:#D1472C; --stamp-soft:#F8E1DA; --stamp-ink:#B53A22; --pos:#237A4E; --neg:#B53A22; /* én rød pr. tema (7. okt. 2026): rust som logoet; --stamp-ink er samme rust en tand mørkere til lille rød tekst på lys baggrund */ --warn:#8A6400; --warn-soft:#F6EBC9;
  --cA:#2F6F9F; --cB:#2A7A4B; --cC:#6B4E9B; --cD:#C2552B; --fA:#2563C8; --fB:#17794C; --fC:#7044C2; --fD:#BF4A1C; /* fyldte valgknapper med hvid tekst (7. okt. 2026), kontrast mindst 4,5 */
  --kilde-bg:#F7E7BC; --kilde-head:#6B4E1E; --kilde-line:#BFA468; --on-stamp:#FFFFFF; --on-kilde:#FFFFFF;
  --fam-bg:#F5D2E2; --fam-head:#B4296E; --fam-line:#D682AE;
  --serif:"Instrument Sans","Segoe UI",system-ui,sans-serif; /* én skrift overalt (8. okt. 2026, Sørens valg); Newsreader ligger stadig i fonts.css, hvis den skal tilbage */
  --sans:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --r:10px;
  --mix-opt:26%; --mix-sel:50%; --mix-cons:22%; --mix-right:34%; --mix-wrong:24%; --mix-kind:30%; --mix-welcome:26%; --mix-tema:16%; --mix-tema-line:60%; --choice-bw:2px; /* lyst tema (7. oktober 2026): mere farve i de farvede bokse */
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15181C; --surface:#1E2227; --ink:#ECEDE9; --muted:#A2A8AE; --line:#353A41; --tint:#262B31;
    --stamp:#EC7B62; --stamp-soft:#3C241F; --stamp-ink:#EC7B62; --pos:#5FC28F; --neg:#EC7B62; --on-stamp:#1A1D22; --on-kilde:#1A1D22; --warn:#E3BE5A; --warn-soft:#3A3217;
    --cA:#6FB1E3; --cB:#6FCF97; --cC:#B49BE0; --cD:#F08A5C; --fA:#2D6AD6; --fB:#178452; --fC:#7A4ED0; --fD:#C8501F;
    --kilde-bg:#2E2A1E; --kilde-head:#C9A75A; --kilde-line:#5A4E33;
    --fam-bg:#33202A; --fam-head:#E26CA6; --fam-line:#6E3C55;
    --mix-opt:14%; --mix-sel:32%; --mix-cons:10%; --mix-right:20%; --mix-wrong:12%; --mix-kind:18%; --mix-welcome:14%; --mix-tema:7%; --mix-tema-line:45%; --choice-bw:1.5px;
  }
}
:root[data-theme="dark"]{
  --paper:#15181C; --surface:#1E2227; --ink:#ECEDE9; --muted:#A2A8AE; --line:#353A41; --tint:#262B31;
  --stamp:#EC7B62; --stamp-soft:#3C241F; --stamp-ink:#EC7B62; --pos:#5FC28F; --neg:#EC7B62; --on-stamp:#1A1D22; --on-kilde:#1A1D22; --warn:#E3BE5A; --warn-soft:#3A3217;
  --cA:#6FB1E3; --cB:#6FCF97; --cC:#B49BE0; --cD:#F08A5C; --fA:#2D6AD6; --fB:#178452; --fC:#7A4ED0; --fD:#C8501F;
  --kilde-bg:#2E2A1E; --kilde-head:#C9A75A; --kilde-line:#5A4E33;
  --fam-bg:#33202A; --fam-head:#E26CA6; --fam-line:#6E3C55;
  --mix-opt:14%; --mix-sel:32%; --mix-cons:10%; --mix-right:20%; --mix-wrong:12%; --mix-kind:18%; --mix-welcome:14%; --mix-tema:7%; --mix-tema-line:45%; --choice-bw:1.5px;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="dark"] .tip-pop,:root[data-theme="dark"] dialog.help{color-scheme:dark}
@media print{ :root[data-theme="dark"]{--paper:#fff;--surface:#fff;--ink:#111;--muted:#555;--line:#bbb;--tint:#f2f2f2;--kilde-bg:#FBF3DE;--kilde-head:#6B4E1E;--kilde-line:#C9B58A;--fam-bg:#F9E4EE;--fam-head:#B4296E;--fam-line:#DE9BBE} }
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--stamp);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.1;margin:0}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(16px,3vw,32px)}
.serif{font-family:var(--serif)}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* Top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.wordmark{font-family:var(--serif);font-weight:700;font-size:1.35rem;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;line-height:0}
.wordmark .seal{width:30px;height:30px;border-radius:50%;background:var(--stamp);color:var(--on-stamp);display:inline-grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:.95rem;transform:rotate(-8deg)}
.tabs{display:flex;gap:4px;background:var(--tint);padding:4px;border-radius:999px}
.tabs button{border:0;background:transparent;padding:8px 18px;font-weight:600;border-radius:999px;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.topright{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
select.scen{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px;max-width:260px}
main{padding:28px 0 80px}

/* Buttons */
.btn{border:1.5px solid var(--ink);background:transparent;border-radius:8px;padding:9px 16px;font-weight:600;line-height:1.2;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.btn:hover{background:var(--tint)}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.primary:hover{opacity:.9;background:var(--ink)}
.btn.stamp{background:var(--stamp);color:var(--on-stamp);border-color:var(--stamp);font-size:1.05rem;padding:12px 22px}
.btn.stamp:hover{filter:brightness(.95);background:var(--stamp)}
.btn.ghost{border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink)}
.btn.small{padding:6px 12px;font-size:.9rem;min-height:36px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:22px}
.kbd{display:inline-block;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 6px;font-size:.78rem;color:var(--muted);line-height:1.5;background:var(--surface)}

/* Library (choose a game) */
.lib h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:6px}
.lib>p{margin:0 0 24px;color:var(--muted);max-width:60ch}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;min-height:150px}
.card:hover{border-color:var(--ink)}
.card .per{color:var(--stamp-ink);font-weight:600;font-size:.88rem}
.card h3{font-size:1.35rem}
.card p{margin:0;color:var(--muted);font-size:.93rem;flex:1}
.card .meta{font-size:.85rem;color:var(--muted)}
.card.add{border-style:dashed;background:transparent;justify-content:center;align-items:center;color:var(--muted);font-weight:600}
.card.add:hover{color:var(--ink)}

/* Play stage */
.stage{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,3vw,30px)}
.stage h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:4px 0 10px}
.h2row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.h2row h2{margin:0 0 12px}
.h2row .speak{margin:0 0 10px}
.aside .kilde{margin-top:4px}
.h2row .speak{margin:0 0 6px}
.stage h3{font-size:1.25rem;margin:26px 0 10px}
.topline{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:.9rem;margin-bottom:14px;flex-wrap:wrap}
.when{display:inline-block;font-weight:600;color:var(--stamp-ink)}
.prose{font-family:var(--serif);font-size:clamp(1.12rem,1.7vw,1.3rem);line-height:1.5;max-width:66ch;white-space:pre-line;margin:0}
.question{font-family:var(--serif);font-weight:700;font-size:clamp(1.4rem,2.6vw,1.8rem);margin:18px 0 10px;color:var(--stamp-ink)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:clamp(20px,4vw,48px);align-items:start}
@media (max-width:860px){ .split{grid-template-columns:minmax(0,1fr)} }
.split>*{min-width:0}
@media (hover:none){ .kbd,.kbdhint{display:none} }

.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px 22px;padding:10px 16px;background:color-mix(in srgb,var(--ink) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--ink) 18%,var(--surface));border-radius:var(--r);margin-bottom:16px}
.meter .track{background:color-mix(in srgb,var(--ink) 22%,var(--surface))}
.meter .lbl{display:flex;justify-content:space-between;font-weight:600;font-size:.9rem;gap:6px}
.meter .track{height:8px;background:var(--line);border-radius:5px;overflow:hidden;margin-top:5px}
.meter .fill{height:100%;background:var(--ink);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.meter.up .fill{background:var(--pos)} .meter.down .fill{background:var(--neg)}
.meter.up .track,.meter.down .track{animation:flash 1.4s ease-out 1}
.meter .delta{display:inline-block;font-weight:800;font-size:1.05rem;padding:0 7px;border-radius:999px;color:#fff;transform:scale(.4);opacity:0;animation:pop .5s .7s cubic-bezier(.3,1.6,.4,1) forwards}
.meter.up .delta{background:var(--pos)} .meter.down .delta{background:var(--neg)}
.meters.result{background:var(--surface);border:2px solid var(--line);padding:18px}
.meters.result .track{height:14px;border-radius:7px}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(0,0,0,.35)} 100%{box-shadow:0 0 0 14px rgba(0,0,0,0)}}
@keyframes pop{to{transform:scale(1);opacity:1}}
.change-sum{display:flex;gap:10px;flex-wrap:wrap;margin:-8px 0 16px;font-weight:600}
.change-sum span{padding:4px 12px;border-radius:999px;background:var(--tint)}
.change-sum .u{color:var(--pos)} .change-sum .d{color:var(--neg)}
@media (prefers-reduced-motion: reduce){ .meter .delta{animation:none;transform:none;opacity:1} .meter.up .track,.meter.down .track{animation:none} }
.meter .fill.real{background:var(--muted)}
.arrow{font-weight:700;font-size:.85rem}
.arrow.p{color:var(--pos)} .arrow.n{color:var(--neg)}

.carry{display:flex;gap:12px;align-items:flex-start;background:var(--tint);border-radius:var(--r);padding:8px 14px;margin:0 0 14px;font-size:.92rem}
.carry b{white-space:nowrap}
.carry p{margin:0;font-family:var(--serif);font-size:1.02rem}
.branch{color:var(--stamp-ink);font-weight:600;font-size:.9rem;margin:0 0 10px}

.voice{border:1.5px solid var(--fam-line);background:var(--fam-bg);border-radius:var(--r);padding:0;margin:16px 0 0;overflow:hidden;flex-direction:column;gap:0}
.voice .vhead{display:flex;align-items:center;gap:10px;background:var(--fam-head);color:#fff;padding:9px 16px;font-weight:700;font-size:1rem;letter-spacing:.04em;text-transform:uppercase}
.voice .vbody{display:flex;gap:14px;align-items:center;padding:14px 16px}
.voice .who{font-weight:700;font-size:.95rem;color:var(--fam-head);display:block;margin-bottom:3px}
.voice p{font-size:1.18rem}
.voice .face{width:52px;height:52px}
.voice p{margin:0;font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.5}

.choices{display:grid;gap:10px}
.choices.wide{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.choices.wide .choice{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px}
.choices.wide .choice .txt{width:100%}
.choices.wide .choice .tally{align-self:flex-end}
.decide{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.aside{min-width:0}
.aside .kilde{margin-top:0}
.aside .rolepanel.inplay{margin-top:14px}
@media (max-width:860px){ .aside .kilde{margin-top:18px} }
.choice{text-align:left;border:var(--choice-bw) solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px 16px;font-size:1.08rem;display:flex;gap:14px;align-items:center;transition:border-color .15s,background .15s}
.choice .letter{font-family:var(--serif);font-weight:700;font-size:2rem;line-height:1;min-width:1.1em;color:var(--stamp-ink)}
.choice.o0{border-color:var(--cA);background:color-mix(in srgb,var(--cA) var(--mix-opt),var(--surface))} .choice.o0 .letter{color:var(--cA)}
.choice.o1{border-color:var(--cB);background:color-mix(in srgb,var(--cB) calc(var(--mix-opt) + 2%),var(--surface))} .choice.o1 .letter{color:var(--cB)}
.choice.o2{border-color:var(--cC);background:color-mix(in srgb,var(--cC) var(--mix-opt),var(--surface))} .choice.o2 .letter{color:var(--cC)}
.choice.o3{border-color:var(--cD);background:color-mix(in srgb,var(--cD) var(--mix-opt),var(--surface))} .choice.o3 .letter{color:var(--cD)}
.choice.o0 .tally button,.choice.o1 .tally button,.choice.o2 .tally button,.choice.o3 .tally button{background:var(--surface)}
.choice[aria-pressed="true"].o0,.choice.win.o0{background:color-mix(in srgb,var(--cA) var(--mix-sel),var(--surface))}
.choice[aria-pressed="true"].o1,.choice.win.o1{background:color-mix(in srgb,var(--cB) calc(var(--mix-sel) + 2%),var(--surface))}
.choice[aria-pressed="true"].o2,.choice.win.o2{background:color-mix(in srgb,var(--cC) var(--mix-sel),var(--surface))}
.choice[aria-pressed="true"].o3,.choice.win.o3{background:color-mix(in srgb,var(--cD) var(--mix-sel),var(--surface))}
.choices.wide .choice .letter{font-size:1.6rem}
.choice[aria-pressed="true"],.choice.win{background:var(--tint)}
.choice .txt{flex:1;line-height:1.35;min-width:0;overflow-wrap:anywhere;hyphens:auto}
.choices>*{min-width:0}
.prose,.ktext,.cc,.panel p{overflow-wrap:anywhere;hyphens:auto}
button.choice:hover{border-color:var(--ink)}
.choice[aria-pressed="true"],.choice.win{border-color:var(--stamp);background:var(--stamp-soft)}
.tally{display:flex;align-items:center;gap:4px;flex:none}
.tally button{flex:none}
.tally .cnt{font-family:var(--serif);font-weight:700;font-size:2rem;min-width:1.6ch;text-align:center;line-height:1}
.tally button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:transparent;font-size:1.4rem;font-weight:600;line-height:1}
.tally button:hover{border-color:var(--ink)}
.votebar{display:flex;height:26px;border-radius:13px;overflow:hidden;margin:6px 0 16px;background:var(--line)}
.votebar div{display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:var(--paper);min-width:0;overflow:hidden;white-space:nowrap}
.votebar .v0{background:var(--cA)} .votebar .v1{background:var(--cB)} .votebar .v2{background:var(--cC)} .votebar .v3{background:var(--cD)}
.votebar div{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.panel.cons.c0{border:2px solid var(--cA);background:color-mix(in srgb,var(--cA) var(--mix-cons),var(--surface))} .panel.cons.c1{border:2px solid var(--cB);background:color-mix(in srgb,var(--cB) var(--mix-cons),var(--surface))} .panel.cons.c2{border:2px solid var(--cC);background:color-mix(in srgb,var(--cC) var(--mix-cons),var(--surface))} .panel.cons.c3{border:2px solid var(--cD);background:color-mix(in srgb,var(--cD) var(--mix-cons),var(--surface))}
.panel.cons h3 .l0{color:var(--cA)} .panel.cons h3 .l1{color:var(--cB)} .panel.cons h3 .l2{color:var(--cC)} .panel.cons h3 .l3{color:var(--cD)}

.panel{border-radius:var(--r);padding:18px 20px;margin:14px 0}
.panel.cons{background:var(--tint)}
.panel.fact{background:var(--stamp-soft);border-left:4px solid var(--stamp)}
.panel.debate{background:var(--warn-soft)}
.panel h3{margin:0 0 8px;font-size:1.15rem}
.panel p{margin:0}
.panel .prose{font-size:1.12rem}
.src{font-size:.88rem;color:var(--muted);margin:10px 0 0}
.note{font-size:.92rem;color:var(--muted)}
.land{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.land li{padding-left:18px;position:relative;font-family:var(--serif);font-size:1.05rem}
.land li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--stamp)}
.why{margin-top:16px}
.why label{display:block;font-weight:600;margin-bottom:6px}
textarea,input[type=text],input[type=number],select{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 12px;width:100%}
textarea{resize:vertical;min-height:70px;line-height:1.5}
textarea.serif{font-family:var(--serif);font-size:1.05rem}

/* End screen */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
@media (max-width:760px){ .compare{grid-template-columns:1fr} }
.col{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.col h3{margin:0 0 4px;font-size:1.3rem}
.col .sub{color:var(--muted);font-size:.9rem;margin:0 0 12px}
.col.yours{border-color:var(--stamp)}
.chain{list-style:none;padding:0;margin:0;position:relative}
.chain li{position:relative;padding:0 0 18px 26px}
.chain li::before{content:"";position:absolute;left:5px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--ink);z-index:1}
.chain li::after{content:"";position:absolute;left:9px;top:16px;bottom:-2px;width:1.5px;background:var(--line)}
.chain li:last-child::after{display:none}
.chain .ct{font-size:.82rem;color:var(--muted);display:block}
.chain .cl{font-weight:600;display:block;margin:1px 0 2px}
.chain .cc{font-family:var(--serif);color:var(--muted);font-size:.98rem;display:block}
.chain .cv{font-size:.85rem;color:var(--muted);margin-top:3px}
.bigfig{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 4px}
.bigfig div{background:var(--tint);border-radius:var(--r);padding:14px 16px}
.bigfig b{font-family:var(--serif);font-weight:700;font-size:2rem;display:block;line-height:1.05}
.bigfig span{font-size:.88rem;color:var(--muted)}
.reflect{padding-left:1.3em;margin:0}
.reflect li{margin-bottom:8px;font-family:var(--serif);font-size:1.12rem}

/* Builder */
.build{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}
.build>*{min-width:0}
@media (max-width:800px){ .build{grid-template-columns:1fr} .side{position:static} }
.side{position:sticky;top:12px}
.side .list{display:flex;flex-direction:column;gap:4px}
.side button{text-align:left;border:0;background:transparent;border-radius:8px;padding:9px 12px;display:flex;gap:10px;align-items:center;width:100%;color:var(--muted)}
.side button:hover{background:var(--tint);color:var(--ink)}
.side button[aria-current="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);font-weight:600}
.side .num{font-family:var(--serif);font-weight:700;min-width:1.4em;color:var(--stamp-ink)}
.side .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side,.side .list,.side button{min-width:0;max-width:100%}
input[type=file]{max-width:100%;min-width:0}
.side .dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.side .dot.ok{background:var(--pos)} .side .dot.off{background:transparent;border:1.5px solid var(--line)}
.side .sep{font-size:.78rem;color:var(--muted);padding:12px 12px 4px;font-weight:600}
.ed{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,3vw,32px)}
.ed h2{font-size:1.9rem;margin-bottom:4px}
.ed .lead{color:var(--muted);margin:0 0 20px;max-width:60ch}
.field{margin-bottom:16px}
label.field{display:block}
.field>span{display:block;font-weight:600;margin-bottom:5px}
.field small{display:block;color:var(--muted);font-weight:400;font-size:.88rem}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>.field{flex:1;min-width:200px}
.opt{border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:12px 0}
.opt .oh{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.opt .oh .letter{font-family:var(--serif);font-weight:700;font-size:1.6rem;color:var(--stamp-ink);line-height:1}
.opt .oh input{flex:1}
.effs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 14px;margin:10px 0 12px}
.eff{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.9rem}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{border:0;background:transparent;padding:4px 10px;font-size:.85rem;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button.p[aria-pressed="true"]{background:var(--pos)} .seg button.n[aria-pressed="true"]{background:var(--neg)}
details.more{border-top:1px solid var(--line);margin-top:10px;padding-top:6px}
details.more summary{cursor:pointer;font-weight:600;color:var(--muted);padding:8px 0;list-style:none;display:flex;gap:8px;align-items:center}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+";font-weight:700;width:1em}
details.more[open] summary::before{content:"–"}
.check{display:flex;gap:8px;align-items:center;margin:6px 0}
.check input{width:18px;height:18px;flex:none}
.checklist{background:var(--warn-soft);border-radius:var(--r);padding:12px 16px;margin:16px 0}
.checklist strong{display:block;margin-bottom:4px}
.tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.tip{background:var(--tint);border-radius:var(--r);padding:12px 16px;font-size:.93rem;margin:0 0 20px}
.tip b{display:block}

/* Share */
.share{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.share section{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.share h2{font-size:1.4rem;margin-bottom:6px}
.share p{margin:0 0 12px;color:var(--muted);font-size:.95rem}
.share textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;min-height:120px}
.msg{font-size:.9rem;margin-top:8px;min-height:1.2em;color:var(--pos)}

/* Bibliotek: søgning, filtre, mærker */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 18px}
.filters input[type=text]{max-width:320px}
.filters select{width:auto}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tag{font-size:.82rem;padding:2px 9px;border-radius:999px;background:var(--tint);color:var(--muted);white-space:nowrap}
.tag.canon{background:var(--stamp-soft);color:var(--stamp-ink)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips label{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.9rem;cursor:pointer}
.chips label:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips input{width:auto;margin:0}
/* Forløb og afleveringer */
.rows{display:grid;gap:10px}
.rowc{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.rowc .t{flex:1;min-width:220px}
.rowc .t b{display:block}
.rowc .t span{color:var(--muted);font-size:.9rem}
.rowc .path{font-family:var(--serif);font-weight:700;letter-spacing:.12em;color:var(--stamp-ink)}
.rowc.sel{border-color:var(--stamp);background:var(--stamp-soft)}
table.cmp{width:100%;border-collapse:collapse;margin-top:14px;font-size:.95rem}
table.cmp th,table.cmp td{text-align:left;vertical-align:top;padding:10px 12px;border-top:1px solid var(--line)}
table.cmp th{font-weight:600}
table.cmp td .why{font-family:var(--serif);color:var(--muted);margin-top:4px}
.tablewrap{overflow-x:auto}
.empty{color:var(--muted);padding:30px;text-align:center;border:1px dashed var(--line);border-radius:var(--r)}
/* Diverse: gemt, banner, enkel visning, oplæsning */
.saved{font-size:.85rem;color:var(--pos);opacity:0;transition:opacity .3s}
.saved.on{opacity:1}
.info.guide{width:34px;height:34px;font-size:1rem;font-style:normal;font-family:var(--sans);margin:0;border-color:var(--line)}
.banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--warn-soft);border:1px solid var(--warn);border-radius:var(--r);padding:12px 16px;margin:0 0 20px;font-size:.95rem}
.banner .t{flex:1;min-width:220px}
.build.simple .adv{display:none}
.viewtoggle{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin:0 0 14px;font-size:.9rem;color:var(--muted)}
.rules{counter-reset:r;list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.rules li{position:relative;padding-left:34px;font-size:1.05rem}
.rules li::before{counter-increment:r;content:counter(r);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--stamp);color:var(--on-stamp);font-weight:700;font-size:.85rem;display:grid;place-items:center}
.speak{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:transparent;border-radius:999px;padding:5px 12px;font-size:.85rem;min-height:32px;color:var(--muted);margin:10px 0 0}
.speak:hover,.speak[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.speakstop{margin-left:6px}
.issues{margin-top:16px;font-size:.88rem}
.issues .ok{color:var(--pos);font-weight:600}
.issues ul{margin:6px 0 0;padding-left:18px;color:var(--muted)}
.issues li.err{color:var(--neg)}
.issues.fresh b{color:var(--muted);font-weight:600}
dialog.help.wide{max-width:min(720px,94vw);max-height:88vh;overflow:auto}
dialog.help h4{font-size:1.1rem;margin:16px 0 4px}
dialog.help details{border-top:1px solid var(--line);padding:8px 0}
dialog.help summary{cursor:pointer;font-weight:700;font-size:1.05rem;font-family:var(--serif);padding:6px 0;list-style-position:outside}
dialog.help summary:hover{color:var(--stamp-ink)}
dialog.help details p{margin:4px 0 6px}
/* Kolofon */
.credits{border-top:1px solid var(--line);padding:16px 0 26px;font-size:.85rem;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.credits b{color:var(--ink);font-weight:600}
@media print{ .credits{display:flex} }
/* Familiens ansigt og hover-hjælp */
.voice{display:flex;gap:14px;align-items:flex-start}
.voice .face{flex:none;width:44px;height:44px}
.voice .vt{min-width:0}
.faces{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.faces svg{width:30px;height:30px}
.tip-pop{position:absolute;z-index:50;max-width:360px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:0 12px 36px rgba(0,0,0,.18);font-size:.9rem;line-height:1.45;pointer-events:none}
.tip-pop h4{margin:0 0 6px;font-size:1rem}
.tip-pop p{margin:0 0 6px}
.tip-pop .ex{background:var(--tint);border-radius:6px;padding:6px 10px;font-family:var(--serif)}
/* Roller */
.rolepanel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 18px}
.rolepanel.inplay{margin:18px 0 0;padding:10px 14px}
.rolepanel.inplay>summary{cursor:pointer;font-weight:600;list-style:none;display:flex;gap:8px;align-items:center}
.rolepanel.inplay>summary::-webkit-details-marker{display:none}
.rolepanel.inplay>summary::before{content:'+';font-weight:700;width:1em}
.rolepanel.inplay[open]>summary::before{content:'–'}
.rolepanel h3{margin:0 0 6px;font-size:1.1rem}
.rolelist{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.rolelist span{background:var(--tint);border-radius:999px;padding:4px 12px;font-size:.9rem}
.stances{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px;font-size:.95rem}
.stances li{padding:8px 10px;border-radius:8px;background:var(--tint)}
.stances b{font-weight:600}
.cards-print{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.rolecard{border:1.5px solid var(--ink);border-radius:12px;padding:18px 20px;background:var(--surface);break-inside:avoid;page-break-inside:avoid}
.rolecard h3{font-size:1.4rem;margin:0 0 8px}
.rolecard p{margin:0 0 8px;font-size:.95rem}
.rolecard .lbl{font-weight:600;font-size:.82rem;color:var(--muted);display:block;margin-top:8px}
.rolecard .back{border-top:1px dashed var(--line);margin-top:12px;padding-top:10px}
.rolecard .back li{font-size:.9rem}
@media print{ .cards-print{display:block} .rolecard{margin:0 0 10mm;page-break-after:always} .rolecard:last-child{page-break-after:auto} body{background:#fff} .stage{border:0;padding:0} .meters,.viewtoggle,.topright{display:none} }
/* YouTube */
.yt{position:relative;width:100%;max-width:760px;padding-top:56.25%;margin:12px 0 0;border-radius:10px;overflow:hidden;background:var(--tint);border:1px solid var(--line)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt+.ytcap{font-size:.85rem;color:var(--muted);margin-top:6px}
/* Wikipedia-blokke */
.wiki{display:flex;gap:16px;align-items:flex-start;margin:16px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.wiki img{width:140px;max-height:120px;object-fit:cover;border-radius:6px;flex:none}
.wiki .wt{min-width:0}
.wiki .wt b{display:block;margin-bottom:2px}
.wiki .wt p{margin:0 0 8px;font-size:.92rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wiki.wiki-img{align-items:center}
.wiki.wiki-img .wt small{display:block;color:var(--muted);font-size:.85rem}
.wiki .wt small{display:block;color:var(--muted);font-size:.78rem;margin-top:6px}
@media (max-width:560px){ .wiki{flex-direction:column} .wiki img{width:100%;max-height:200px} }
/* Kildekort */
.kilde{margin:22px 0 0;border:1.5px solid var(--kilde-line);border-radius:var(--r);padding:0;background:var(--kilde-bg);overflow:hidden}
.kilde .khead{display:flex;align-items:center;gap:10px;background:var(--kilde-head);color:var(--on-kilde);padding:10px 16px;font-weight:700;font-size:1rem;letter-spacing:.04em;text-transform:uppercase}
.kilde .khead svg{width:20px;height:20px;flex:none}
.kilde .kbody{padding:14px 18px 16px}
.kilde .who{display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px}
.kilde h3{margin:0 0 8px;font-size:1.25rem}
.kilde .ktext{font-family:var(--serif);font-size:1.08rem;line-height:1.55;white-space:pre-line;margin:0}
.kilde img{max-width:100%;max-height:360px;border-radius:8px;display:block;margin:0 0 10px;border:1px solid var(--line)}
.kilde .kq{font-weight:600;margin:12px 0 0;color:var(--stamp-ink)}
/* Billeder, links og hjælp */
.media{margin:20px 0 0}
.media img{max-width:100%;max-height:440px;border-radius:10px;display:block;border:1px solid var(--line)}
.media .imglink{display:none}
.media.noimg .imglink{display:list-item}
.media figcaption{font-size:.88rem;color:var(--muted);margin-top:6px}
.links{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.info{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--muted);color:var(--muted);font-size:.72rem;font-weight:700;margin-left:6px;vertical-align:middle;background:transparent;padding:0;line-height:1;font-family:var(--serif);font-style:italic}
.info:hover{border-color:var(--ink);color:var(--ink)}
dialog.help{border:1px solid var(--line);border-radius:14px;padding:24px 26px;max-width:min(520px,92vw);background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.25)}
dialog.help::backdrop{background:rgba(0,0,0,.35)}
dialog.help h3{margin:0 0 10px;font-size:1.35rem}
dialog.help p{margin:0 0 10px;line-height:1.5}
dialog.help .ex{background:var(--tint);border-radius:8px;padding:10px 14px;font-family:var(--serif);font-size:.98rem}
.thumb{display:flex;gap:12px;align-items:center;margin-top:8px}
.thumb img{height:72px;border-radius:6px;border:1px solid var(--line)}
textarea[data-s="reflection"]{min-height:160px}
@media (prefers-reduced-motion: reduce){ .meter .fill,.choice{transition:none} }
@media (max-width:600px){ .top{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 8px} .tabs{grid-column:1/-1;grid-row:2} .topright{grid-row:1;grid-column:2;justify-content:flex-end} .rolepanel.inplay>summary{flex-wrap:wrap} .rolepanel.inplay>summary .note{flex-basis:100%;padding-left:1.4em} .scen{max-width:150px} .tabs button{flex:1;text-align:center;padding:8px 10px} .choice{flex-wrap:wrap} .choices.wide .choice{flex-wrap:nowrap} .choice .txt{flex:1 1 55%} .tally{margin-left:auto} .kbd,.kbdhint{display:none} .bigfig{grid-template-columns:1fr} .stage{padding:16px;border-radius:10px} .choice{padding:12px;gap:10px} .choice .letter{font-size:1.6rem} .tally button{width:38px;height:38px} .meters{grid-template-columns:1fr 1fr;gap:8px 14px;padding:10px 12px} .meter .lbl{font-size:.8rem} .build{gap:16px} .ed{padding:16px} .wrap{padding:0 12px} }
@media print{ .top,.actions,.tally{display:none} .stage{border:0} }

/* Server: login, klassespil, links */
#who{display:flex;gap:8px;align-items:center}
.joinbox{display:flex;gap:18px;align-items:stretch;flex-wrap:wrap;margin-top:10px}
.joinbox>div{background:var(--tint);border-radius:var(--r);padding:14px 18px;flex:1;min-width:240px}
.joinbox .code{flex:0 0 auto;text-align:center}
.joinbox .code b{display:block;font-family:var(--serif);font-size:2.6rem;letter-spacing:.14em;color:var(--stamp-ink);line-height:1.1}
.joinurl{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;word-break:break-all;margin-top:4px}
.joinurl.small{font-size:.8rem;color:var(--muted)}
.prog{height:6px;background:var(--line);border-radius:3px;margin-top:8px;max-width:320px;overflow:hidden}
.prog div{height:100%;background:var(--pos);border-radius:3px;transition:width .4s}
.minimeters{display:inline-flex;gap:3px;align-items:flex-end;height:30px}
.minimeters i{display:block;width:8px;background:var(--cA);border-radius:2px 2px 0 0}
.rowc em{color:var(--warn);font-style:normal;font-weight:600}
.login{max-width:440px;margin:40px auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,4vw,36px)}
.login h1{font-size:2rem;margin-bottom:4px}
.login .sub{color:var(--muted);margin:0 0 22px}
.login input[type=text],.login input[type=email],.login input[type=password]{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--surface)}
.login .err{background:var(--stamp-soft);color:var(--stamp-ink);border-radius:8px;padding:10px 12px;margin-bottom:14px;font-size:.95rem}
.ok,.login .ok{background:var(--tint);color:var(--pos);border-radius:8px;padding:10px 12px;margin-bottom:14px;font-size:.95rem}
.login .alt{margin-top:18px;font-size:.92rem;color:var(--muted);line-height:2.2}
.login .alt a{padding:8px 2px}
.admin table{width:100%;border-collapse:collapse;margin-top:14px}
.admin th,.admin td{text-align:left;padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.admin form.inline{display:inline}
.notice{max-width:640px;margin:60px auto;text-align:center}
.notice h1{font-size:2rem;margin-bottom:10px}
.admin input[type=email],.admin input[type=password],.admin select{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 12px;width:100%}
.admin .field{min-width:180px}
.card.libcard{cursor:default}
.card.libcard:hover{border-color:var(--line)}
.card.libcard .actions{margin-top:auto;padding-top:10px;gap:6px}
.card .meta em{color:var(--pos);font-style:normal;font-weight:600}
details.terms{background:var(--tint);border-radius:var(--r);padding:10px 14px;font-size:.92rem}
details.terms summary{cursor:pointer;font-weight:600}
details.terms p{margin:8px 0 0;color:var(--ink)}
/* Statistik */
.stats .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:14px 0 24px}
.stats .kpi{background:var(--tint);border-radius:var(--r);padding:14px 16px}
.stats .kpi b{display:block;font-family:var(--serif);font-size:2rem;line-height:1.1}
.stats .kpi span{color:var(--muted);font-size:.9rem}
.stats table{width:100%;border-collapse:collapse;font-size:.95rem}
.stats th,.stats td{text-align:left;padding:8px 10px;border-top:1px solid var(--line);vertical-align:top}
.stats th{font-weight:600}
.stats td.n,.stats th.n{text-align:right;font-variant-numeric:tabular-nums}
.stats svg{width:100%;height:auto;display:block;margin:8px 0 18px}
.stats svg text{font-family:var(--sans);fill:var(--muted)}
.stats .leg{display:flex;gap:16px;flex-wrap:wrap;font-size:.88rem;color:var(--muted);margin-bottom:6px}
.stats .leg i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* Forside (forside.php) */
a.wordmark{color:inherit;text-decoration:none}
body.fs{background:radial-gradient(1100px 620px at 85% -10%,color-mix(in srgb,var(--stamp) 22%,transparent),transparent 70%),radial-gradient(800px 500px at -10% 30%,color-mix(in srgb,var(--cA) 10%,transparent),transparent 70%),var(--paper);background-attachment:fixed}
.fs main{padding-top:0}
.fs .wrap{overflow-x:clip} /* stemplet stikker ud, før det lander */
.fs-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(36px,7vw,88px) 0 clamp(36px,6vw,64px)}
.fs-kicker{margin:0 0 14px;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;font-weight:700;color:var(--stamp-ink)}
.fs-hero h1{font-size:clamp(3.6rem,10vw,8rem);font-weight:800;line-height:.9;letter-spacing:-.04em;margin:0}
.fs-hero h1 em{font-style:italic;color:var(--stamp-ink);padding-right:.14em} /* luft mellem det italiske I og spørgsmålstegnet */
.fs-lead{font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.55rem);line-height:1.4;max-width:32ch;margin:22px 0 0}
.fs-cta{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 14px}
.fs-cta .btn{font-size:1.08rem;padding:13px 24px}
.fs-small{margin:0;font-size:.92rem;color:var(--muted)}
.fs-demo{perspective:1200px;display:grid}
.fs-card{position:relative;transform:rotate(1.6deg);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--stamp) 25%,transparent);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s,visibility .6s}
.fs-card:hover{transform:rotate(0)}
.fs-demo .fs-card{grid-area:1/1;opacity:0;visibility:hidden}
.fs-demo .fs-card.active{opacity:1;visibility:visible}
.fs-cardtop{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.fs-card h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:4px 0 8px}
.fs-sit{margin:0 0 14px;color:var(--muted);font-size:.98rem}
.fs-card .choices{gap:8px}
.fs-card .choice{padding:10px 14px;font-size:.98rem;gap:12px;transition:background .3s,border-color .3s,transform .3s}
.fs-card .choice .letter{font-size:1.6rem}
.fs-card .choice.win{transform:scale(1.02)}
.fs-votes{font-weight:800;font-size:1.35rem;font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.fs-meters{margin:14px 0 0;grid-template-columns:repeat(2,minmax(0,1fr))}
.fs-meters .lbl{align-items:center}
.fs-meters .meter .delta{animation:none;transform:scale(.4);opacity:0;transition:transform .45s cubic-bezier(.3,1.6,.4,1) .5s,opacity .3s .5s}
.fs-meters .meter.up .delta,.fs-meters .meter.down .delta{transform:scale(1);opacity:1}
.fs-stamp{position:absolute;right:-14px;top:-30px;border:3px solid var(--stamp);color:var(--stamp-ink);background:color-mix(in srgb,var(--stamp) 10%,var(--surface));font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.95rem;padding:6px 12px;border-radius:6px;transform:rotate(-12deg) scale(1.8);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.3,1.5,.4,1),opacity .2s}
.fs-card.decided .fs-stamp{transform:rotate(-12deg) scale(1);opacity:1}
.fs-ribbon{overflow:hidden;border-block:1px solid var(--line);padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fs-track{display:flex;gap:40px;width:max-content;animation:fs-marquee 70s linear infinite}
.fs-track span{white-space:nowrap;color:var(--muted);font-size:.95rem}
.fs-track b{font-family:var(--serif);font-size:1.12rem;color:var(--ink);margin-right:4px}
.fs-ribbon:hover .fs-track{animation-play-state:paused}
@keyframes fs-marquee{to{transform:translateX(-50%)}}
.fs-h2{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:700;letter-spacing:-.02em;margin:0 0 26px;max-width:22ch}
.fs-steps,.fs-features{margin:clamp(48px,8vw,96px) 0}
.fs-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(18px,3vw,32px);counter-reset:fs}
.fs-steps li{counter-increment:fs;border-top:3px solid var(--stamp);padding-top:14px}
.fs-steps li::before{content:counter(fs);display:block;font-family:var(--serif);font-weight:800;font-size:clamp(3rem,6vw,4.4rem);line-height:1;color:var(--stamp-ink);margin-bottom:6px}
.fs-steps li b{display:block;font-family:var(--serif);font-size:1.45rem;margin-bottom:4px}
.fs-steps li span{color:var(--muted)}
.fs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fs-feat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;transition:transform .25s,border-color .25s}
.fs-feat:hover{transform:translateY(-3px);border-color:var(--stamp)}
.fs-ico{width:46px;height:46px;border-radius:50%;display:inline-grid;place-items:center;background:var(--stamp-soft);color:var(--stamp-ink);font-family:var(--serif);font-weight:800;font-size:1.25rem}
.fs-feat h3{font-size:1.3rem;margin:14px 0 6px}
.fs-feat p{margin:0;color:var(--muted)}
.fs-band{margin:clamp(48px,8vw,96px) 0;padding:clamp(28px,6vw,64px);border-radius:20px;background:color-mix(in srgb,var(--stamp) 68%,#000);color:#fff;position:relative;overflow:hidden}
.fs-band::after{content:"D";position:absolute;right:-.06em;bottom:-.3em;font-family:var(--serif);font-weight:800;font-size:clamp(12rem,30vw,22rem);line-height:1;color:rgba(255,255,255,.07);transform:rotate(-8deg);pointer-events:none}
.fs-big{font-family:var(--serif);font-weight:800;font-size:clamp(2.4rem,7vw,5rem);line-height:.98;letter-spacing:-.03em;margin:0 0 18px;position:relative}
.fs-big em{font-style:italic}
.fs-band p:not(.fs-big){max-width:50ch;font-size:clamp(1.05rem,1.8vw,1.25rem);margin:0;position:relative}
.fs-final{text-align:center;padding:10px 0 56px}
.fs-final h2{font-size:clamp(2rem,5.5vw,3.6rem);font-weight:800;letter-spacing:-.03em}
.fs-final .fs-cta{justify-content:center}
@media (max-width:860px){ .fs-hero{grid-template-columns:minmax(0,1fr)} .fs-card{transform:none} .fs-lead{max-width:none} .fs-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .fs-demo{margin-top:26px} }
@media (max-width:600px){ .fs .top:not(.sitetop){display:flex} .fs-stamp{right:6px;top:-26px;font-size:.8rem} .fs-grid{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion: reduce){ .fs-track{animation:none;flex-wrap:wrap;width:auto;gap:10px 28px} .fs-track span[aria-hidden]{display:none} .fs-ribbon{-webkit-mask-image:none;mask-image:none} .fs-card,.fs-feat,.fs-card .choice,.fs-stamp,.fs-meters .meter .delta{transition:none} }
.fs-nw{white-space:nowrap}

/* Live-afstemning: elevernes skærm (stem.php) og lærerens tavle */
.vt{max-width:680px;margin:clamp(16px,4vw,40px) auto}
.vt h1{font-size:clamp(1.7rem,6vw,2.4rem);margin:6px 0 10px}
.vt .sub{color:var(--muted);font-size:1.05rem}
.vt-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.vt-text{font-family:var(--serif);font-size:1.08rem;line-height:1.5;margin:0 0 18px}
.vt .choices{gap:12px}
.vt .choice{width:100%;padding:16px;font-size:1.1rem;min-height:64px}
.vt .choice[aria-pressed="true"]{outline:3px solid var(--stamp);outline-offset:2px}
.vt-status{margin:16px 0 0;font-size:1.05rem}
.vt-err{color:var(--neg);margin:10px 0 0}
.vt-anon{margin-top:28px}
.vt-codein{font-size:1.6rem!important;letter-spacing:.2em;text-transform:uppercase;text-align:center}
.pollbox{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center;margin-top:16px}
.pollbox .pcode{font-family:var(--sans);font-weight:800;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:.12em;color:var(--stamp-ink);line-height:1}
.pollbox .purl{font-size:1.05rem}
.pollbox .pcount{grid-column:1/-1;font-size:1.3rem;font-weight:700;margin:6px 0 0}
.pollbox .actions{grid-column:1/-1;margin-top:6px}
@media (max-width:600px){ .pollbox{grid-template-columns:1fr} }

/* Quiz efter spillet */
.quiz .question{font-family:var(--serif);font-size:1.25rem;margin:6px 0 14px;color:var(--stamp-ink)}
.choice.right{border-color:var(--pos);background:color-mix(in srgb,var(--pos) var(--mix-right),var(--surface))} .choice.right .letter{color:var(--pos)}
.choice.wrong{border-color:var(--neg);background:color-mix(in srgb,var(--neg) var(--mix-wrong),var(--surface))}
.choice.dim{opacity:.5}
.qcnt{font-weight:800;font-size:1.35rem;margin-left:auto;font-variant-numeric:tabular-nums}
.choices.wide .choice .qcnt{align-self:flex-end}
.qfb h3{margin-bottom:6px}
.quizcta{margin:22px 0}
.quizov{margin:0 0 18px}
.qrow{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(80px,1fr) auto;gap:6px 16px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.qrow .t{display:flex;flex-direction:column;min-width:0}
.qbar{height:10px;background:var(--line);border-radius:5px;overflow:hidden}
.qbar>i{display:block;height:100%;background:var(--pos)}
.qpct{font-variant-numeric:tabular-nums}
@media (max-width:600px){ .qrow{grid-template-columns:1fr auto} .qrow .qbar{grid-column:1/-1;grid-row:2} }
.qedit .oh input{font-weight:600}
.qopt{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px;align-items:center;margin:6px 0}
.qopt .check{margin:0;font-size:.85rem;color:var(--muted);white-space:nowrap}
.qopt .letter{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--stamp-ink);min-width:1em}
.qopt input[type=text]{width:100%}
@media (max-width:600px){ .qopt{grid-template-columns:auto minmax(0,1fr) auto} .qopt .letter{display:none} }

/* Del: kompakte linkrækker, "Mere"-menu, ældre links og deling med kolleger */
.lrow{padding:10px 14px}
.lrow .lact{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;justify-content:flex-end}
.lmore>summary{list-style:none;cursor:pointer}
.lmore>summary::-webkit-details-marker{display:none}
.lmore[open]{flex-basis:100%;display:flex;flex-direction:column;align-items:flex-end}
.lmore .menu{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;margin-top:6px}
details.older{margin-top:10px}
details.older>summary,details.adv2>summary{cursor:pointer;color:var(--muted);font-weight:600;font-size:.92rem;padding:6px 0}
details.older[open]>summary{margin-bottom:8px}
details.adv2{margin-top:16px;border-top:1px solid var(--line);padding-top:8px}
.filebtn{position:relative;cursor:pointer}
.filebtn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
#gameDrop.dropping{outline:3px dashed var(--stamp);outline-offset:4px}
.lmore>summary::after{content:" ▾";font-size:.8em} .lmore[open]>summary::after{content:" ▴"}
/* Mobil: lærerens topmenu (fem faner, spilvælger, Statistik, Brugere, Log ud) må ikke gøre siden bredere end skærmen */
@media (max-width:600px){
  .top .tabs{overflow-x:auto;max-width:100%;scrollbar-width:none} .top .tabs::-webkit-scrollbar{display:none}
  .top .tabs button{flex:none;padding:8px 12px}
  .top .topright{grid-row:3;grid-column:1/-1;justify-content:flex-start;gap:6px}
  .top .topright select.scen{flex:1 1 100%;max-width:100%}
  .top .wordmark{grid-column:1/-1}
  .top .topright .btn{white-space:nowrap;padding:6px 8px} #who{display:flex;align-items:center;gap:2px} #who .note{display:none}
}

/* Tre slags dilemmaer: spillisten, Byg, biblioteket og forsiden */
:root{--k-hist:var(--stamp);--k-nu:var(--cA);--k-etik:var(--cC)}
.kindseg{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.kindseg button{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-weight:600;color:var(--muted)}
.kindseg button span{font-weight:700;color:var(--ink);margin-left:2px}
.kindseg button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)} .kindseg button[aria-pressed="true"] span{color:var(--paper)}
.kindgrp{margin:0 0 30px}
.kindgrp .kh{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin:0 0 12px;padding-top:12px;border-top:3px solid var(--line)}
.kindgrp .kh h3{font-size:1.45rem}
.kindgrp .kh .note{margin:0;max-width:70ch}
.kindgrp:nth-of-type(1) .kh{border-top-color:var(--k-hist)} .kindgrp:nth-of-type(2) .kh{border-top-color:var(--k-nu)} .kindgrp:nth-of-type(3) .kh{border-top-color:var(--k-etik)}
.kindpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:4px}
.kindpick label{display:flex;flex-direction:column;gap:4px;border:1.5px solid var(--line);border-radius:var(--r);padding:12px 14px;cursor:pointer;position:relative}
.kindpick label.on{border-color:var(--stamp);background:var(--stamp-soft)}
.kindpick input{position:absolute;opacity:0;pointer-events:none}
.kindpick label:focus-within{outline:3px solid var(--stamp);outline-offset:2px}
.kindpick b{font-family:var(--serif);font-size:1.1rem}
.kindpick span{font-size:.88rem;color:var(--muted)}
.kindtag.k-hist{background:color-mix(in srgb,var(--k-hist) var(--mix-kind),var(--surface));color:var(--k-hist)}
.kindtag.k-nu{background:color-mix(in srgb,var(--k-nu) var(--mix-kind),var(--surface));color:var(--k-nu)}
.kindtag.k-etik{background:color-mix(in srgb,var(--k-etik) var(--mix-kind),var(--surface));color:var(--k-etik)}
.fs-kinds{margin:clamp(48px,8vw,96px) 0}
.fs-kgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fs-kind{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--k-hist);border-radius:14px;padding:22px}
.fs-kind.k-nu{border-top-color:var(--k-nu)} .fs-kind.k-etik{border-top-color:var(--k-etik)}
.fs-kk{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;color:var(--k-hist)}
.fs-kind.k-nu .fs-kk{color:var(--k-nu)} .fs-kind.k-etik .fs-kk{color:var(--k-etik)}
.fs-kind h3{font-size:1.5rem;margin:8px 0 8px}
.fs-kind p{margin:0 0 10px;color:var(--muted)}
.fs-kind .fs-kex{margin:0;font-size:.9rem;color:var(--ink);font-style:italic}
.fs-kend{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.4rem);max-width:60ch;margin:22px 0 0}
@media (max-width:860px){ .fs-kgrid{grid-template-columns:minmax(0,1fr)} }

/* Fanen Spil skal være den, man ser først */
/* Spil-fanens egen farve: grøn for "start", så den ikke ligner de røde overskrifter */
:root{--play:#4CC38A;--play-ink:#0C1A12;--play-soft:#1E3A2B}
.tabs button.tab-play{color:var(--play);font-weight:800;font-size:1.06em;display:inline-flex;align-items:center;gap:7px}
.tabs button.tab-play::before{content:"";width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.tabs button.tab-play:hover{background:var(--play-soft)}
.tabs button.tab-play[aria-selected="true"]{background:var(--play);color:var(--play-ink);box-shadow:0 2px 10px color-mix(in srgb,var(--play) 45%,transparent)}
/* Hover på fanerne, i samme stil som knapperne */
.tabs button{transition:background .15s,color .15s,transform .15s,box-shadow .15s,filter .15s}
.tabs button:hover{color:var(--ink);background:color-mix(in srgb,var(--surface) 75%,transparent)}
.tabs button[aria-selected="true"]:hover{background:var(--surface);color:var(--ink)}
.tabs button.tab-play:hover{background:var(--play-soft);color:var(--play);transform:translateY(-1px)}
.tabs button.tab-play[aria-selected="true"]:hover{background:var(--play);color:var(--play-ink);filter:brightness(1.08);transform:translateY(-1px)}
@media (prefers-reduced-motion: reduce){ .tabs button{transition:none} .tabs button.tab-play:hover{transform:none} }
/* Fanerne står samme sted på alle faner: lige efter navnet, med god luft til logoet, og altid i flugt med toppen.
   Spilvælgeren og menuen til højre ligger til højre på brede skærme og på egen linje under fanerne på smallere */
@media (min-width:601px){
  .apptop{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:start;column-gap:clamp(40px,5vw,72px);row-gap:10px}
  .apptop .wordmark{min-height:51px}
  .apptop .topright{justify-content:flex-end;align-content:center;min-width:0;min-height:51px}
  .apptop #who{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px}
  .apptop .topright select.scen{max-width:240px;min-width:0}
}
@media (min-width:601px) and (max-width:1150px){ .apptop .topright{grid-column:1/-1;grid-row:2;min-height:0} }
/* Grøn knap i Spil-fanens farve, fx "Gå til værkstedet" på forsiden */
.btn.play{background:var(--play);color:var(--play-ink);border-color:var(--play)}
.btn.play:hover{background:var(--play);filter:brightness(1.08)}

/* Favoritter: stjerne på spilkort og i biblioteket */
.cardw{position:relative;display:flex}
.cardw>.card{flex:1;min-width:0}
.cardw .card .per,.cardw .card h3,.libcard .per,.libcard h3{padding-right:30px}
.libcard{position:relative}
.star{position:absolute;top:8px;right:8px;z-index:1;border:0;background:transparent;font-size:1.4rem;line-height:1;color:#F2C14E;cursor:pointer;padding:6px;border-radius:8px;transition:color .15s,transform .15s}
.star{opacity:.45} /* tom stjerne: dæmpet; valgt: fuld */
.star:hover{color:#F2C14E;transform:scale(1.12);opacity:.85}
.star[aria-pressed="true"]{color:#F2C14E;opacity:1}
.kindseg button.favseg{color:#F2C14E}
.kindseg button.favseg[aria-pressed="true"]{background:#F2C14E;border-color:#F2C14E;color:#1A1D22} .kindseg button.favseg[aria-pressed="true"] span{color:#1A1D22}
.favgrp .kh{border-top-color:#F2C14E!important}
.libfav{cursor:default}
@media (prefers-reduced-motion: reduce){ .star{transition:none} .star:hover{transform:none} }

/* Opsamling på tavlen */
.sum h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:4px 0 18px}
.sumopts{display:grid;gap:14px}
.sumopt{border:1.5px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--surface)}
.sumopt.o0{border-color:var(--cA)} .sumopt.o1{border-color:var(--cB)} .sumopt.o2{border-color:var(--cC)} .sumopt.o3{border-color:var(--cD)}
.sumopt .sh{display:flex;gap:14px;align-items:center}
.sumopt .letter{font-family:var(--serif);font-weight:700;font-size:2rem;line-height:1}
.sumopt.o0 .letter{color:var(--cA)} .sumopt.o1 .letter{color:var(--cB)} .sumopt.o2 .letter{color:var(--cC)} .sumopt.o3 .letter{color:var(--cD)}
.sumopt .txt{flex:1;font-size:1.15rem;line-height:1.35}
.sumopt .cnt{font-size:2rem;font-variant-numeric:tabular-nums}
.sumopt .sbar{height:12px;background:var(--line);border-radius:6px;overflow:hidden;margin:10px 0 4px}
.sumopt .sbar i{display:block;height:100%;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.sumopt.o0 .sbar i{background:var(--cA)} .sumopt.o1 .sbar i{background:var(--cB)} .sumopt.o2 .sbar i{background:var(--cC)} .sumopt.o3 .sbar i{background:var(--cD)}
.sumopt.facit{box-shadow:0 0 0 3px var(--stamp)}
.sumopt .ftag{display:inline-block;margin-top:6px;font-weight:700;color:var(--stamp-ink)}
.whys{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.whys li{font-family:var(--serif);font-size:1.08rem;line-height:1.45;padding:8px 12px;background:var(--tint);border-radius:8px}
.whys li b{font-family:var(--sans);font-size:.9rem}
.sumstart{margin:0 0 18px}
.sumquiz{margin:10px 0 0}
/* "Gemt" må ikke gøre toppen højere (siden hoppede 24 px ved hver gemning): den vises under toppen i højre side */
header.apptop{position:relative}
.apptop .saved{position:absolute;right:0;bottom:-24px;white-space:nowrap;pointer-events:none;z-index:2}
/* Byg på mobil: menuen må ikke følge med, når man ruller (reglen ovenfor blev overskrevet af .side{position:sticky}) */
@media (max-width:800px){ .side{position:static} }
.h2fav{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.favbtn{flex:none;margin-top:6px;color:#F2C14E;border-color:color-mix(in srgb,#F2C14E 55%,transparent)} /* stjernen er guld alle steder */
.favbtn[aria-pressed="true"]{border-color:#F2C14E;color:#F2C14E}
.favbtn:hover{border-color:#F2C14E}

/* Toplister øverst i biblioteket */
.toplist{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px 8px;margin:18px 0 30px}
.toplist h3{margin:0 0 12px}
.topctl{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 6px}
.topctl .kindseg{margin:0}
.toprows{list-style:none;margin:0;padding:0}
.toprow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:12px 0;border-top:1px solid var(--line)}
.toprow:first-child{border-top:0}
.toprow .rank{flex:none;width:2.3rem;height:2.3rem;display:grid;place-items:center;border-radius:50%;font-family:var(--serif);font-weight:700;font-size:1.25rem;color:var(--muted);background:var(--tint)}
.toprow.r1 .rank{background:#E8C15A;color:#3A2A00} .toprow.r2 .rank{background:#C7CDD2;color:#22272B} .toprow.r3 .rank{background:#D9A273;color:#3A1F08}
.toprow .t{flex:1;min-width:180px} .toprow .t b{display:block} .toprow .t span{color:var(--muted);font-size:.9rem}
.toprow .cnt{min-width:96px;text-align:right;line-height:1.15} .toprow .cnt b{font-size:1.2rem} .toprow .cnt small{display:block;color:var(--muted);font-size:.8rem}
.toprow .actions{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:640px){ .toprow{position:relative;padding-left:3.2rem} .toprow .rank{position:absolute;left:0;top:12px} .toprow .t{min-width:0;flex-basis:100%} .toprow .cnt{text-align:left;min-width:0} .toprow .actions{flex-basis:100%} .toplist{padding:14px 14px 6px} }

/* Del: oversigt med felter, man trykker ind på */
.sharehome h3{margin:26px 0 4px} .sharehome h3:first-of-type{margin-top:6px}
.sharehome .note{margin:0 0 12px}
.stiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.stile{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:18px;font:inherit;cursor:pointer;min-height:150px}
.stile:hover,.stile:focus-visible{border-color:var(--ink)}
.stile b{font-family:var(--serif);font-size:1.3rem;line-height:1.2}
.stile b::after{content:" →";color:var(--muted);font-family:var(--sans);font-size:1rem}
.stile span{color:var(--muted);font-size:.92rem}
.stile em{margin-top:auto;padding-top:6px;font-style:normal;font-weight:600;font-size:.85rem;color:var(--muted)} .stile em.hot{color:var(--stamp-ink)}
.sharecat{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:0 0 14px}
.share.one{grid-template-columns:minmax(0,1fr);max-width:860px}
@media (max-width:640px){ .stile{min-height:0;padding:14px 16px} .stiles{gap:10px} }

/* Forløb: klassespil i gang */
.livebox{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 20px}
.livebox h3{margin:0 0 10px;font-size:1.1rem}
.livebox details.older{margin-top:10px}

/* Spil: typer, søgning og Flere filtre på én linje */
.kindbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 18px}
.kindbar .kindseg{margin:0 6px 0 0}
.kindbar input[type=text]{width:auto;flex:0 1 220px;min-width:160px}
.morefilters{margin-top:-8px}
@media (max-width:640px){ .kindbar input[type=text]{flex:1 1 100%} }

/* Prøvespil uden konto: listen på forsiden og bjælken over spillet */
.fs-try{margin:clamp(40px,7vw,80px) 0}
.fs-try h2{font-size:clamp(1.6rem,3.5vw,2.2rem);margin:0 0 6px}
.fs-try>p{color:var(--muted);margin:0 0 18px;max-width:640px}
.fs-trylist{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.fs-trylist a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
.fs-trylist a:hover,.fs-trylist a:focus-visible{border-color:var(--k-hist);box-shadow:0 6px 18px color-mix(in srgb,var(--k-hist) 35%,transparent);transform:translateY(-2px)} /* omrids og skygge i kategoriens farve */
.fs-trylist a.fs-k-nu:hover,.fs-trylist a.fs-k-nu:focus-visible{border-color:var(--k-nu);box-shadow:0 6px 18px color-mix(in srgb,var(--k-nu) 35%,transparent)}
.fs-trylist a.fs-k-etik:hover,.fs-trylist a.fs-k-etik:focus-visible{border-color:var(--k-etik);box-shadow:0 6px 18px color-mix(in srgb,var(--k-etik) 35%,transparent)}
.fs-trylist b{font-family:var(--serif);font-size:1.12rem}
.fs-trylist span{color:var(--muted);font-size:.88rem}
.demobar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 18px;padding:10px 14px;background:var(--tint);border:1px solid var(--line);border-radius:var(--r);font-size:.95rem}
.demobar span{flex:1;min-width:200px}

/* Deltag med kode: det lille felt i toppen (forsiden og afstemningen) og ventetiden på tavlen */
.top .hjoin{margin-left:auto;margin-right:14px;height:38px;display:inline-flex;align-items:center;white-space:nowrap}
@media (max-width:600px){ .top .hjoin{grid-column:1/-1;grid-row:2;margin:0;justify-content:center} }

/* Efter et valg: overdrevet tydeligt, hvad der blev vundet og tabt. Ti felter, så ét trin er en hel blok */
.meters.result.big{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 26px;padding:20px 22px}
.meters.big .lbl{font-size:1.02rem;align-items:center}
.meters.big .delta{font-size:1.08rem;padding:3px 11px;animation:pop .5s 1s cubic-bezier(.3,1.6,.4,1) forwards}
.meters.big .nochg{color:var(--muted);font-weight:500;font-size:.85rem}
.meters.big .track{position:relative;height:26px;border-radius:7px;margin-top:8px;overflow:hidden}
.meters.big .track::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 3px),var(--surface) calc(10% - 3px) 10%);pointer-events:none}
.meters.big .fill{background:color-mix(in srgb,var(--ink) 70%,var(--surface))}
.meters.big .meter.up .fill,.meters.big .meter.down .fill{background:color-mix(in srgb,var(--ink) 70%,var(--surface))}
.meters.big .chg{position:absolute;top:0;bottom:0;opacity:0;animation:chg-in .6s 1s ease-out forwards}
.meters.big .up .chg{background:var(--pos)}
.meters.big .down .chg{background:repeating-linear-gradient(135deg,var(--neg) 0 6px,color-mix(in srgb,var(--neg) 35%,var(--surface)) 6px 12px)}
.meters.big .meter.same{opacity:.5}
.meters.big .meter.up,.meters.big .meter.down{animation:meter-nudge .5s 1.1s ease-out 1}
.meters.big .meter.up .lbl>span:first-child{color:var(--pos)} .meters.big .meter.down .lbl>span:first-child{color:var(--neg)}
.meters.big .meter.up .track,.meters.big .meter.down .track{animation:none}
@keyframes chg-in{0%{opacity:0;transform:scaleY(.3)} 60%{opacity:1;transform:scaleY(1.25)} 100%{opacity:1;transform:scaleY(1)}}
@keyframes meter-nudge{0%,100%{transform:none} 30%{transform:translateY(-4px)} 60%{transform:translateY(1px)}}
@media (prefers-reduced-motion: reduce){ .meters.big .chg{animation:none;opacity:1} .meters.big .meter.up,.meters.big .meter.down{animation:none} .meters.big .delta{animation:none;transform:none;opacity:1} }
@media print{ .meters.big .chg{opacity:1;animation:none} }
/* Ti felter på alle målere, og en pil fra sidste valg på de små målere undervejs */
.meter .track{position:relative}
.meter .track::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),color-mix(in srgb,var(--ink) 9%,var(--surface)) calc(10% - 2px) 10%);pointer-events:none}
.meters.result .track::after,.fs-meters .track::after{display:none}
.meters.big .track::after{display:block}
.meter .trend{font-size:.8rem;margin-left:2px} .meter .trend.t-up{color:var(--pos)} .meter .trend.t-down{color:var(--neg)}

/* Spil online: lobby-siden med koden øverst og hver skærm som et anonymt dyr */
.lobbypage{display:flex;flex-direction:column;gap:22px}
.lobbytop{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px}
.ljoin{flex:1 1 320px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:18px 24px;background:var(--surface);border:1px solid var(--line);border-radius:16px;font-size:1.15rem;color:var(--muted)}
.ljoin .laddr{font-size:clamp(1.6rem,3.5vw,2.4rem);color:var(--ink);font-weight:800;word-break:break-all} .ljoin span b{color:var(--play)}
.lcode{flex:0 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:14px 34px;background:var(--surface);border:2px solid var(--stamp);border-radius:16px}
.lcode span{color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.85rem}
.lcode b{font-weight:800;font-size:clamp(3rem,9vw,6rem);letter-spacing:.12em;color:var(--stamp-ink);line-height:1}
.lmid{min-height:260px;padding:22px 24px;background:var(--tint);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;gap:14px}
.lcount{margin:0;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800}
.lact2{margin:0} .btn.big{font-size:1.2rem;padding:14px 34px}
.lplayers{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lplayers .pl{display:inline-flex;align-items:center;gap:8px;padding:5px 16px 5px 5px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:1.1rem}
.lplayers .pl.new{animation:pl-in .5s cubic-bezier(.3,1.6,.4,1)}
.av{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--av);font-size:1.15rem;line-height:1;flex:none}
.lplayers .av{width:44px;height:44px;font-size:1.5rem}
.av.big{width:84px;height:84px;font-size:2.8rem}
.vt-me{display:flex;align-items:center;gap:14px;margin:6px 0 14px} .vt-me p{margin:0;font-size:1.1rem}
.vt-anon .av{width:24px;height:24px;font-size:.85rem;vertical-align:middle}
@keyframes pl-in{0%{transform:scale(.3);opacity:0} 100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){ .lplayers .pl.new{animation:none} }

/* Mindre hvidt: vigtige knapper, valgte filtre og mærker får en blå tone i stedet for tekstfarven (som er næsten hvid i mørk visning).
   Rød (stamp) er stadig "Start spillet", grøn (play) er stadig Spil online og Deltag i spil. */
:root{--accent:#2F6F9F}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--accent:#6FB1E3} }
:root[data-theme="dark"]{--accent:#6FB1E3}
.btn{border-color:color-mix(in srgb,var(--ink) 28%,var(--surface))}
.btn:hover{border-color:color-mix(in srgb,var(--ink) 50%,var(--surface))}
.btn.primary,.btn.primary:hover{background:color-mix(in srgb,var(--accent) 26%,var(--surface));color:var(--ink);border-color:color-mix(in srgb,var(--accent) 70%,var(--surface));opacity:1}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 36%,var(--surface))}
.btn.ghost{border-color:transparent}
.kindseg button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 24%,var(--surface));border-color:var(--accent);color:var(--ink)}
.kindseg button[aria-pressed="true"] span{color:var(--ink)}
.chips label:has(input:checked){background:color-mix(in srgb,var(--accent) 24%,var(--surface));border-color:var(--accent);color:var(--ink)}

/* Administratoren kan skjule indbyggede spil for lærerne */
.cardw .admhide{position:absolute;right:10px;bottom:10px;z-index:2;font:inherit;font-size:.78rem;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer}
.cardw .admhide:hover{color:var(--ink);border-color:var(--ink)}
.cardw .admhide[aria-pressed="true"]{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.cardw.hidden-b>.card{opacity:.55;border-style:dashed}
.cardw:has(.admhide)>.card{padding-bottom:44px}

/* Forsidens prøveliste delt op efter slags dilemmaer */
.fs-trygrp{margin:0 0 22px}
.fs-trygrp h3{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;padding-top:10px;border-top:3px solid var(--line);font-size:1.25rem}
.fs-trygrp.fs-k-hist h3{border-top-color:var(--k-hist)} .fs-trygrp.fs-k-nu h3{border-top-color:var(--k-nu)} .fs-trygrp.fs-k-etik h3{border-top-color:var(--k-etik)}
.fs-trygrp h3 span{font-family:var(--sans);font-size:.9rem;color:var(--muted);font-weight:600}
.fs-trymore{margin-top:10px} .fs-trymore>summary{cursor:pointer;color:var(--muted);font-weight:600;padding:6px 0;list-style:none} .fs-trymore>summary::before{content:"▸ "} .fs-trymore[open]>summary::before{content:"▾ "}
.fs-trymore[open]>summary{margin-bottom:10px}
/* Målerne efter et valg med lange navne: mærket står på én linje, og bjælkerne flugter i bunden */
.meters.big .meter{display:flex;flex-direction:column;min-width:0}
.meters.big .lbl{flex-wrap:wrap;align-items:flex-start;gap:4px 8px}
.meters.big .lbl>span:first-child{flex:1 1 9em;min-width:0}
.meters.big .delta,.meters.big .nochg{flex:none;white-space:nowrap}
.meters.big .track{margin-top:auto}
.meters.big .lbl{margin-bottom:8px}
.meters.result.big{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}

/* ---------- Ny struktur: spillets side, kildefilter under Spil, Spil med klassen ---------- */
.srcseg{margin-bottom:12px}
.kindbar .kindchips button{padding:6px 12px;font-size:.92rem}
.crumb{display:flex;align-items:center;gap:8px;margin:0 0 12px;flex-wrap:wrap} .crumb .note::before{content:"· ";}
.gpage .gback{margin:0 0 10px;padding-left:0}
.ghero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:28px;align-items:start}
.gmain h1{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.1;margin:4px 0 10px}
.gmain .prose{font-size:1.15rem;max-width:62ch}
.gtags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .gtags span{font-size:.88rem;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--muted)}
.gside{display:grid;gap:10px}
.gplay{display:flex;flex-direction:column;gap:4px;text-align:left;border:0;border-radius:14px;padding:20px 22px;background:var(--play);color:var(--play-ink);font:inherit;cursor:pointer}
.gplay strong{font-size:1.5rem;line-height:1.1} .gplay span{font-size:.95rem;font-weight:500;opacity:.9}
.gplay:hover{filter:brightness(1.06)} .gplay:disabled{opacity:.55;cursor:default;filter:none}
.g3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.g3 button{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:14px 12px;font:inherit;cursor:pointer;min-height:88px}
.g3 button strong{font-size:1.02rem;line-height:1.2} .g3 button span{color:var(--muted);font-size:.82rem;line-height:1.35}
.g3 button:hover,.g3 button:focus-visible{border-color:var(--ink)} .g3 button:disabled{opacity:.5;cursor:default}
.gchips{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .gchips .btn{margin:0;min-height:42px;padding:8px 16px;font-size:.95rem;border-radius:10px} /* Favorit og Rollekort: samme størrelse, på linje */
.gcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.gbox{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.gbh{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .gbh h3{margin:0 0 6px;font-size:1.15rem}
.grow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);width:100%}
.grow .t{min-width:0} .grow .t b{display:block} .grow .t span{color:var(--muted);font-size:.88rem}
.grow .path{font-family:var(--serif);font-weight:700;letter-spacing:.12em;color:var(--stamp-ink)}
.grow.asbtn{background:transparent;border:0;border-top:1px solid var(--line);color:var(--ink);font:inherit;text-align:left;cursor:pointer;border-radius:0}
.grow.asbtn:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)} /* ingen understregning af titler under musen (10. okt. 2026, Sørens ønske) */
.gpage .meters{margin-top:8px}
@media (max-width:900px){ .ghero{grid-template-columns:minmax(0,1fr)} .gside{order:-1} .gcols{grid-template-columns:minmax(0,1fr)} } /* på telefonen står Spil nu øverst */
@media (max-width:520px){ .g3{grid-template-columns:minmax(0,1fr)} .g3 button{min-height:0;flex-direction:row;align-items:baseline;justify-content:space-between} }
.sharetitle{font-size:1.5rem;margin:0}
.shbig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 8px}
.shpanel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.shpanel h3{margin:4px 0 8px;font-size:1.6rem} .shpanel p{margin:0 0 10px;color:var(--muted)} .shpanel .note.hot{color:var(--stamp-ink);font-weight:600}
.shkicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.shpanel .rows{margin-top:12px} .oldlinks{margin-top:12px} .oldlinks summary{color:var(--muted);cursor:pointer}
.sharehome>h3{color:var(--muted);font-size:1.1rem}
@media (max-width:860px){ .shbig{grid-template-columns:minmax(0,1fr)} .shpanel{padding:18px} }
.factpick{display:flex;gap:14px;align-items:flex-start;margin:0 0 12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.factpick .letter{font-family:var(--serif);font-weight:700;font-size:2.2rem;line-height:1;color:var(--stamp-ink);min-width:1.1em}
.factpick b{display:block;font-size:1.05rem} .factpick .ftxt{display:block;font-size:1.05rem;margin:2px 0 4px} .factpick .note{display:block}
.fagbar{margin-bottom:10px;justify-content:space-between} .fagbar .kindseg{margin:0}
#libSort1{width:auto;padding:7px 30px 7px 12px;font-size:.92rem} /* plads til pilen, så den ikke ligger oven i "populære" */

/* ---------- Byg med hjælp ---------- */
.libhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap} .libhead>div{min-width:0} .libhead .btn{margin-top:8px} .libhead .libcred{margin:-6px 0 0} .libhead:not(.libhead-min){margin-bottom:26px} /* elevernes Udviklet af står under teksten, også når + Nyt spil går ned under den på telefon */
.wiz{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:24px;align-items:start}
.wsteps{list-style:none;margin:0 0 18px;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.wsteps button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:5px 11px;font-size:.85rem;font-weight:600}
.wsteps button.done{background:var(--tint);border-color:transparent;color:var(--muted);cursor:pointer} .wsteps button.cur{background:var(--stamp);border-color:var(--stamp);color:var(--on-stamp)} .wsteps button:disabled{opacity:.6;cursor:default}
.wmain h2{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15} .wmain .lead{font-size:1.05rem}
.wchoice{display:flex;align-items:center;gap:12px} .wchoice .letter{font-family:var(--serif);font-weight:700;font-size:1.6rem;color:var(--stamp-ink);min-width:1.1em;line-height:1} .wchoice input{flex:1}
.wnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.wdone{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.wside{display:grid;gap:12px;position:sticky;top:12px}
.wprev{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.wprev .wkick{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} .wprev strong{font-family:var(--serif);font-size:1.35rem;line-height:1.2} .wprev .prose{font-size:1rem;margin:0}
.wopts{display:flex;flex-direction:column;gap:6px;margin-top:6px} .wopt{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:.92rem} .wopt b{font-family:var(--serif);font-size:1.2rem;color:var(--stamp-ink);min-width:1em} .wopt span{flex:1} .wopt em{font-style:normal;color:var(--muted);font-size:.85rem;letter-spacing:.1em} .wopt.dash{border-style:dashed;color:var(--muted)}
.wtip{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;color:var(--muted);font-size:.93rem} .wtip b{color:var(--ink)}
.wfacit{margin-top:18px;border-top:1px solid var(--line);padding-top:12px} .wfacit summary{cursor:pointer;font-weight:600}
@media (max-width:900px){ .wiz{grid-template-columns:minmax(0,1fr)} .wside{position:static} }

/* ---------- Profilmenuen ---------- */
.profmenu{position:relative} .profmenu summary{list-style:none;cursor:pointer;display:inline-flex;border-radius:50%} .profmenu summary::-webkit-details-marker{display:none}
.avatar{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(145deg,var(--stamp),color-mix(in srgb,var(--stamp) 55%,#7A3BC8));color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.03em;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);transition:transform .15s,box-shadow .15s}
.profmenu summary:hover .avatar,.profmenu[open] summary .avatar{transform:scale(1.05);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 0 0 3px color-mix(in srgb,var(--stamp) 35%,transparent)}
.avatar.big{width:48px;height:48px;font-size:1.1rem}
.profmenu .menu{position:absolute;right:0;top:calc(100% + 10px);min-width:290px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:2px;z-index:40;box-shadow:0 18px 48px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.12);transform-origin:top right;animation:pm-in .18s ease-out}
.profmenu .menu::before{content:"";position:absolute;right:14px;top:-7px;width:12px;height:12px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
@keyframes pm-in{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}
.pm-head{display:flex;align-items:center;gap:12px;padding:10px 10px 14px;margin:0 0 6px;border-bottom:1px solid var(--line)}
.pm-name{display:flex;flex-direction:column;gap:2px;min-width:0} .pm-name b{font-size:1.05rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pm-name small{color:var(--muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-role{align-self:flex-start;margin-top:4px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--stamp-ink);background:var(--stamp-soft);padding:2px 8px;border-radius:999px}
.profmenu .menu button,.profmenu .menu a{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:0;color:var(--ink);font:inherit;font-weight:600;padding:9px 10px;border-radius:10px;text-decoration:none;cursor:pointer;line-height:1.25}
.profmenu .menu svg{flex:0 0 auto;color:var(--muted)} .profmenu .menu span>small{display:block;color:var(--muted);font-weight:400;font-size:.8rem;margin-top:1px}
.profmenu .menu button:hover,.profmenu .menu a:hover,.profmenu .menu button:focus-visible,.profmenu .menu a:focus-visible{background:color-mix(in srgb,var(--stamp) 12%,var(--surface))} .profmenu .menu button:hover svg,.profmenu .menu a:hover svg{color:var(--stamp-ink)}
.profmenu .menu .pm-out{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;padding-top:12px;color:var(--muted)} .profmenu .menu .pm-out:hover{color:var(--ink)}
@media (prefers-reduced-motion: reduce){ .profmenu .menu{animation:none} .avatar{transition:none} }
.profile .field{margin-bottom:12px}
.fagbar .fagright{margin-left:auto} .kindchips button.libseg{margin-left:10px;border-style:dashed}
@media (max-width:700px){ .fagbar .fagright{margin-left:0} }

/* ---------- Indbygget-mærke og slideren ---------- */
.bbadge{position:absolute;top:12px;right:44px;z-index:1;display:inline-grid;place-items:center} .bbadge .seal{width:22px;height:22px;border-radius:50%;background:var(--stamp);color:var(--on-stamp);display:inline-grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:.72rem}
.bbadge.inline{position:static;display:inline-grid;vertical-align:-3px;margin-right:6px} .bbadge.inline .seal{width:18px;height:18px;font-size:.62rem}
.libcard .bbadge{right:40px}
.slider{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:var(--surface);margin:0 0 22px}
.slider .slides{display:flex;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.slide{flex:0 0 100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:230px;text-align:left;border:0;background:transparent;color:var(--ink);font:inherit;cursor:pointer;padding:0}
.slide .simg{background:linear-gradient(135deg,var(--stamp-soft),var(--tint));background-size:cover;background-position:center;min-height:180px}
.slide.k-nu .simg{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 35%,var(--surface)),var(--tint));background-size:cover;background-position:center} .slide.k-etik .simg{background:linear-gradient(135deg,color-mix(in srgb,var(--pos) 30%,var(--surface)),var(--tint));background-size:cover;background-position:center}
.slide .stext{display:flex;flex-direction:column;gap:8px;padding:22px 26px 44px;min-width:0}
.slide .skick{color:var(--stamp-ink);font-weight:600;font-size:.88rem} .slide h3{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.15;margin:0} .slide p{margin:0;color:var(--muted);font-size:1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .slide .meta{margin-top:auto;color:var(--muted);font-size:.85rem}
.sctl{position:absolute;right:18px;bottom:12px;display:flex;align-items:center;gap:6px}
.sarrow{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:50%;width:32px;height:32px;font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center} .sarrow:hover{border-color:var(--ink)}
.sdot{width:10px;height:10px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0} .sdot[aria-pressed="true"]{background:var(--stamp)}
@media (max-width:760px){ .slide{grid-template-columns:minmax(0,1fr)} .slide .simg{min-height:150px} .slide .stext{padding:16px 18px 44px} }
@media (prefers-reduced-motion: reduce){ .slider .slides{transition:none} }

/* ---------- Billeder på kort og spillets side ---------- */
.card .cimg{display:block;height:110px;margin:-18px -18px 8px;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(135deg,var(--stamp-soft),var(--tint));background-size:cover;background-position:center}
.card.k-nu .cimg{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 35%,var(--surface)),var(--tint));background-size:cover;background-position:center}
.card.k-etik .cimg{background:linear-gradient(135deg,color-mix(in srgb,var(--pos) 30%,var(--surface)),var(--tint));background-size:cover;background-position:center}
/* mærke og stjerne står under billedet, til højre for overskriften (ikke oven på billedet) */
.cardw:has(.cimg) .star{top:114px} .cardw:has(.cimg) .bbadge{top:120px}
.cardw:has(.bbadge) .card .per,.cardw:has(.bbadge) .card h3{padding-right:74px}
@media (max-width:600px){ .cardw:has(.cimg) .star{top:94px} .cardw:has(.cimg) .bbadge{top:100px} }
.card.add .cimg{display:none}
.gimg{height:220px;border-radius:14px;margin:0 0 14px;background:linear-gradient(135deg,var(--stamp-soft),var(--tint));background-size:cover;background-position:center}
@media (max-width:600px){ .card .cimg{height:90px} .gimg{height:160px} }
.glive{margin-top:24px}
.btn.gold{background:#F2C14E;border-color:#F2C14E;color:#1A1D22} .btn.gold:hover{background:#F2C14E;filter:brightness(1.06)} /* Deltag i spil */
/* forsidens spilkort med billede */
.fs-trylist a{overflow:hidden}
.fs-trylist .fs-img{display:block;height:96px;margin:-12px -16px 8px;background:linear-gradient(135deg,var(--stamp-soft),var(--tint));background-size:cover;background-position:center}
.fs-trylist a.fs-k-nu .fs-img{background:linear-gradient(135deg,color-mix(in srgb,var(--k-nu) 35%,var(--surface)),var(--tint));background-size:cover;background-position:center}
.fs-trylist a.fs-k-etik .fs-img{background:linear-gradient(135deg,color-mix(in srgb,var(--k-etik) 35%,var(--surface)),var(--tint));background-size:cover;background-position:center}

/* ---------- Værkstedet: foldede valg og facit nederst (bid 3) ---------- */
.dtop{align-items:center} .dtools{display:flex;gap:4px;align-items:center;flex-wrap:wrap} .dtools .check{margin-right:8px}
details.optfold{border:1px solid var(--line);border-radius:12px;margin:10px 0;background:var(--surface);padding:0}
details.optfold summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:1.02rem} details.optfold summary::-webkit-details-marker{display:none}
details.optfold summary .letter{font-family:var(--serif);font-weight:700;font-size:1.5rem;line-height:1;min-width:1.1em;color:var(--stamp-ink)} details.optfold summary .letter.l0{color:var(--cA)} details.optfold summary .letter.l1{color:var(--cB)} details.optfold summary .letter.l2{color:var(--cC)} details.optfold summary .letter.l3{color:var(--cD)}
details.optfold summary .otxt{flex:1;min-width:0} details.optfold summary .otxt em{color:var(--muted);font-style:italic}
details.optfold summary .oarr{display:inline-flex;gap:4px;color:var(--muted);font-size:.85rem;letter-spacing:.05em} .oarr i{font-style:normal} .oarr i.u{color:var(--pos)} .oarr i.d{color:var(--neg)}
details.optfold summary .chev{color:var(--muted);transition:transform .2s} details.optfold[open] summary .chev{transform:rotate(180deg)}
details.optfold[open]{border-color:var(--ink)} details.optfold[open] summary{border-bottom:1px solid var(--line)}
details.optfold .obody{padding:14px 16px 16px} details.optfold .obody .oh{display:flex;gap:10px;align-items:center;margin-bottom:10px} details.optfold .obody .oh input{flex:1}
details.facitfold{margin-top:22px;border-top:1px solid var(--line)} details.facitfold>summary{font-size:1.05rem;color:var(--ink)}
@media (prefers-reduced-motion: reduce){ details.optfold summary .chev{transition:none} }

/* ---------- Klasser ---------- */
.ktag{display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:1px 8px;border-radius:999px;background:var(--stamp-soft);color:var(--stamp-ink);vertical-align:2px;margin-left:4px}
.klasspick{display:inline-flex;align-items:center;gap:8px;margin-left:auto} .klasspick>span{font-size:.9rem;color:var(--muted);font-weight:600} .klasspick select{width:auto;min-width:150px;padding:7px 10px}
.klassbar{margin:0 0 14px} .klassbar button.newklass{border-style:dashed;color:var(--muted)}
.klasshead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px} .klasshead h3{margin:0;font-size:1.3rem} .klasshead .note{flex:1;min-width:240px} .klasshead .kacts{display:flex;gap:4px}
.stage .actions .klasspick{margin-left:0}
.livedot{color:var(--pos);font-weight:700;margin-left:8px;animation:livepulse 1.6s ease-in-out infinite} @keyframes livepulse{0%,100%{opacity:1}50%{opacity:.45}} .livenote{margin:0 0 10px}
@media (prefers-reduced-motion: reduce){ .livedot{animation:none} }
.wmeters .mlist{display:grid;gap:8px;margin:6px 0 10px} .wmeters .mrow{display:flex;align-items:center;gap:10px} .wmeters .mrow input{flex:1;max-width:420px} .wmeters .mnum{font-family:var(--serif);font-weight:700;color:var(--stamp-ink);min-width:1.2em}
.famtoggle{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-weight:600} .famtoggle small{flex-basis:100%;color:var(--muted);font-weight:400;font-size:.88rem;padding-left:26px}

/* ---------- Værkstedet i trin ---------- */
.build{grid-template-columns:240px minmax(0,1fr)} .edwrap{min-width:0} .edwrap .wiz{grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:18px} .edwrap .wmain{padding:clamp(16px,2.5vw,26px)}
.edwrap .wsteps{margin-bottom:14px} .edwrap .wsteps button.done,.edwrap .wsteps button{cursor:pointer}
@media (max-width:1100px){ .edwrap .wiz{grid-template-columns:minmax(0,1fr)} .edwrap .wside{position:static} }

/* Beskeder til os: "Fejl i spillet?" på spillets side, "Anmeld" i biblioteket (fbDetails() i app.js) */
.fb{margin-top:10px}
.fb summary{list-style:none;cursor:pointer;display:inline-flex}
.fb summary::-webkit-details-marker{display:none}
.fb[open] summary{background:var(--tint)}
.fbbody{margin-top:8px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);max-width:560px}
.fbbody .note{margin:0 0 8px}
.fbbody textarea{font-size:.95rem}
.fbtable tr.done td{opacity:.55}
.fbtable td small{color:var(--muted)}

/* Profil → Slet min konto */
details.gbox.danger summary{cursor:pointer;list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
details.gbox.danger summary::-webkit-details-marker{display:none}
details.gbox.danger summary::before{content:"▸";margin-right:8px;color:var(--muted)}
details.gbox.danger[open] summary::before{content:"▾"}
details.gbox.danger[open]{border-color:color-mix(in srgb,var(--neg) 55%,var(--line))}
.btn.danger{border-color:var(--neg);color:var(--neg)}
.btn.danger:hover{background:var(--neg);color:var(--on-stamp)}
label.check{display:flex;align-items:center;gap:8px;font-size:.95rem}

/* admin.php: fejllog */
.logbox{font-size:.78rem;line-height:1.45;max-height:260px;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 12px;white-space:pre-wrap;word-break:break-word;margin:0 0 10px}

/* Spillets side: Til læreren (teacherGuide() i app.js) */
.tguide summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tguide summary::-webkit-details-marker{display:none}
.tguide summary h3{margin:0}
.tguide summary::before{content:"▸";color:var(--muted);font-size:1.1rem}
.tguide[open] summary::before{content:"▾"}
.tgcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px 28px;margin-top:14px}
.tgcols h4{font-family:var(--sans);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 0 6px}
.tgcols h4:first-child{margin-top:0}
.tgcols p{margin:0 0 8px;font-size:.98rem}
.tglist{margin:0;padding-left:18px;font-size:.95rem}
.tglist li{margin:0 0 8px}

/* Velkomstkortet under Spil (welcomeCard() i app.js) */
.welcome{position:relative;background:linear-gradient(135deg,color-mix(in srgb,var(--stamp) var(--mix-welcome),var(--surface)),var(--surface) 70%);border:1px solid color-mix(in srgb,var(--stamp) 35%,var(--line));border-radius:14px;padding:22px 24px 18px;margin:0 0 18px}
.welcome h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:4px 0 12px}
.welcome .wclose{position:absolute;top:12px;right:12px}
.wsteps{margin:0 0 14px;padding-left:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 22px;counter-reset:w}
.wsteps li{counter-increment:w;position:relative;padding-left:40px;font-size:.98rem;line-height:1.45}
.wsteps li::before{content:counter(w);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--stamp);color:var(--on-stamp);display:grid;place-items:center;font-weight:700;transform:rotate(-8deg)}
.welcome .actions{margin:0 0 8px;flex-wrap:wrap}
.welcome .note{margin:0}

/* Større tekst på tavlen: knappen A A i toplinjen (bigText() i app.js). Gælder selve spillet, ikke værkstedet. */
.bigbtn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px;margin-left:8px;font-weight:600;font-size:.8rem;line-height:1.3;color:var(--muted);vertical-align:middle;display:inline-flex;align-items:center;gap:6px}
.bigbtn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tavle .stage .prose,.tavle .stage .ktext,.tavle .stage .choice,.tavle .stage .panel p,.tavle .stage .panel .prose,.tavle .stage .kq,.tavle .stage .fam p{font-size:1.28rem;line-height:1.6}
.tavle .stage h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.tavle .stage .question{font-size:clamp(1.7rem,3vw,2.2rem)}
.tavle .stage .choice .letter{font-size:2.4rem}
.tavle .stage .kilde h3{font-size:1.5rem}
.tavle .stage .meters .lbl{font-size:1rem}

/* Båndet "Bekræft din e-mail" under toppen (renderVerifyBar() i app.js) */
.vbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:14px 0 0;padding:12px 16px;background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));border-radius:12px;font-size:.95rem}
.vbar .vico{color:var(--warn);display:inline-flex}
.vbar .vtext{flex:1;min-width:260px}
.vbar .vacts{display:flex;gap:8px;flex-wrap:wrap}
.vbar .vedit{display:flex;gap:8px;flex-wrap:wrap;flex-basis:100%;align-items:center}
.vbar .vedit[hidden]{display:none}
.vbar .vedit input{width:auto;min-width:200px;padding:7px 10px}
.vbar .vmsg{flex-basis:100%;color:var(--ink)}
.unver{font-size:.75rem;color:var(--warn);border:1px solid var(--warn);border-radius:999px;padding:1px 7px;margin-left:6px;white-space:nowrap}

/* admin.php: delinger, der venter */
.count{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--stamp);color:var(--on-stamp);font-family:var(--sans);font-size:.9rem;font-weight:700;vertical-align:middle;margin-left:6px}
.pendlist{display:grid;gap:10px}
.pend summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.pend summary::-webkit-details-marker{display:none}
.pend .why{margin-left:auto;font-size:.8rem;color:var(--warn);border:1px solid var(--warn);border-radius:999px;padding:1px 9px;white-space:nowrap}
.libpend{font-size:.78rem;color:var(--warn);border:1px solid var(--warn);border-radius:999px;padding:1px 8px;margin-left:6px;white-space:nowrap;vertical-align:middle}

/* Lyst eller mørkt tema: knappen øverst (theme_toggle() i PHP). Sol vises i mørkt tema, måne i lyst. */
.themebtn{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;width:36px;height:36px;display:inline-grid;place-items:center;padding:0;cursor:pointer}
.themebtn:hover{color:var(--ink);background:var(--tint)}
.themebtn .sun{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .themebtn .sun{display:block} :root:not([data-theme="light"]) .themebtn .moon{display:none} }
:root[data-theme="dark"] .themebtn .sun{display:block} :root[data-theme="dark"] .themebtn .moon{display:none}

/* Mindre på skærmen (startskærmen): kilden foldet, målerne skjult (vis()/setVis() i app.js) */
.viewopts{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:14px 0 4px;padding:10px 14px;border:1px dashed var(--line);border-radius:10px}
.viewopts .vlbl{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.viewopts .check{margin:0;font-size:.95rem}
.kfold summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;background:var(--kilde-bg);border-color:var(--kilde-line);color:var(--kilde-head)}
.kfold summary::-webkit-details-marker{display:none}
.kfold summary svg{width:18px;height:18px}
.kfold{margin:14px 0 4px}

/* Tavletilstand: hele bredden, kraftigere skrift, højere kontrast (bigText()/setBigText() i app.js, klassen tavle på <html>) */
.tavle{--muted:#3A4047}
@media (prefers-color-scheme: dark){ :root.tavle:not([data-theme="light"]){--muted:#C9CED3} }
:root.tavle[data-theme="dark"]{--muted:#C9CED3}
.tavle .wrap{max-width:none;padding-inline:clamp(16px,2.5vw,48px)}
.tavle .stage{padding:clamp(22px,2.5vw,40px)}
.tavle .stage .prose,.tavle .stage .ktext,.tavle .stage .choice .txt,.tavle .stage .panel p,.tavle .stage .fam p,.tavle .stage .branch{font-weight:500}
.tavle .stage .kilde .who,.tavle .stage .note,.tavle .stage .topline{font-weight:500}
.tavle .stage h2,.tavle .stage .question,.tavle .stage .kilde h3{font-weight:700}
.tavle .stage .choice{border-width:2px}
.tavle .stage .meters .track{height:12px}
.tavle .stage .split{grid-template-columns:1.2fr .8fr;gap:clamp(20px,3vw,48px)}

/* Sætningsstartere over begrundelsesfeltet (starterChips() i app.js) */
.starters{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.starters .chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:5px 12px;font-size:.9rem;line-height:1.3;cursor:pointer}
.starters .chip:hover{background:var(--tint);border-color:var(--muted)}
.tavle .starters .chip{font-size:1rem;padding:7px 14px}

/* Temaer (assets/temaer.js): kort under Spil og temaets side */
.card.tema{border-color:color-mix(in srgb,var(--pos) var(--mix-tema-line),var(--line));background:color-mix(in srgb,var(--pos) var(--mix-tema),var(--surface));cursor:pointer}
.card.tema h3{font-size:1.2rem}
.tpage h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.1;margin:4px 0 10px}
.tpage .gbox{margin-top:14px}
.tpage .steps{margin:0;padding-left:0;list-style:none;display:grid;gap:14px}
.tpage .steps li{border-top:1px solid var(--line);padding-top:12px}
.tpage .steps li:first-child{border-top:0;padding-top:0}
.tpage .sh{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}

/* Lyst tema: blid skygge under kort og flader, så siden ikke bliver flad (gælder ikke i mørkt tema) */
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .card, :root:not([data-theme="dark"]) .stage, :root:not([data-theme="dark"]) .gbox, :root:not([data-theme="dark"]) .welcome, :root:not([data-theme="dark"]) .kilde, :root:not([data-theme="dark"]) .choice{box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 24px -18px rgba(16,24,40,.30)} :root:not([data-theme="dark"]) .tabs{background:#E1E4E8} :root:not([data-theme="dark"]) .top{border-bottom-color:#D3D7DD} }
:root[data-theme="light"] .card, :root[data-theme="light"] .stage, :root[data-theme="light"] .gbox, :root[data-theme="light"] .welcome, :root[data-theme="light"] .kilde, :root[data-theme="light"] .choice{box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 24px -18px rgba(16,24,40,.30)}
:root[data-theme="light"] .tabs{background:#E1E4E8}
:root[data-theme="light"] .top{border-bottom-color:#D3D7DD}
.minebar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin:0 0 16px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.minebar .note{margin:0;flex:1;min-width:240px}

/* Hjælpen for et eksisterende spil: dilemmavælger i trin 3-5 og liste i trin 6 */
.wdsw{display:inline-flex;align-items:center;gap:8px;margin:10px 0 0;font-weight:600;font-size:.95rem}
.wdils{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.wdils li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.wdils .wdt{display:flex;flex-direction:column;gap:2px}
.wdils .ok{font-size:.8rem;color:var(--pos)}
.wdils .miss{font-size:.8rem;color:var(--warn)}

/* Nyt logo og top (7. oktober 2026, Sørens valg): logoet W1 fra assets/logo.svg (logo_svg() i inc/bootstrap.php), rust pil og "værkstedet", bogstaverne følger temaet; større knapper i toppen og grøn profil som Spil-knappen */
:root{--logo:#D1472C}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--logo:#EC7B62} }
:root[data-theme="dark"]{--logo:#EC7B62}
.wordmark .logo{display:block;height:72px;width:auto;aspect-ratio:300/112;flex:none}
.logo .li{fill:var(--ink)} .logo .la{fill:var(--logo)}
.top{padding:14px 0 12px}
.tabs{padding:5px}
.tabs button{padding:10px 22px;font-size:1.05rem}
.themebtn{width:42px;height:42px}
.themebtn svg{width:20px;height:20px}
.info.guide{width:42px;height:42px;font-size:1.1rem}
.avatar{width:44px;height:44px;background:var(--play);color:var(--play-ink);font-weight:800}
.profmenu summary:hover .avatar,.profmenu[open] summary .avatar{box-shadow:0 0 0 3px color-mix(in srgb,var(--play) 40%,transparent)}
.avatar.big{width:52px;height:52px}
@media (min-width:601px){ .apptop{align-items:center} .apptop .wordmark,.apptop .topright{min-height:72px} }
@media (max-width:600px){ .wordmark .logo{height:54px} .tabs button{padding:8px 14px;font-size:1rem} }

/* Forsiden: den grønne Spil-knap i toppen, magen til Spil i værkstedets faner */
.fs-play{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:999px;background:var(--play);color:var(--play-ink);font-weight:800;font-size:1.05rem;text-decoration:none;box-shadow:0 2px 10px color-mix(in srgb,var(--play) 45%,transparent);transition:filter .15s,transform .15s}
.fs-play::before{content:"";width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.fs-play:hover,.fs-play:focus-visible{filter:brightness(1.08);transform:translateY(-1px)}
html:has(body.fs){scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ .fs-play{transition:none} .fs-play:hover{transform:none} html:has(body.fs){scroll-behavior:auto} }
/* Knapperne i toppen har samme form (Sørens ønske 7. okt. 2026): samme højde, runde ender, samme skrift; kun farven skiller dem ad */
.top .fs-play,.top .hjoin,.top .topright > a.btn{height:44px;padding:0 20px;border-radius:999px;font-size:1rem;font-weight:800;display:inline-flex;align-items:center;gap:8px;line-height:1;box-shadow:none;margin-top:0;margin-bottom:0}
.top .fs-play::before{border-left-width:8px;border-top-width:5px;border-bottom-width:5px}
.top .themebtn{width:44px;height:44px}
@media (max-width:600px){ .top .fs-play,.top .hjoin,.top .topright > a.btn{height:40px;padding:0 16px;font-size:.95rem} .top .themebtn{width:40px;height:40px} }
.top .hjoin:last-child{margin-right:0}
/* … og lige brede (Sørens ønske 7. okt. 2026): Spil, Deltag og Log ind er lige store */
.top .fs-play,.top .hjoin,.top .topright > a.btn{min-width:132px;justify-content:center}
@media (max-width:600px){ .top .fs-play,.top .hjoin,.top .topright > a.btn{min-width:108px} }

/* Kortene under Spil som "Billedbogen" (7. oktober 2026, Sørens valg): billedet fylder kortet, titlen står hvidt på en mørk toning nederst,
   årstallet er et mærke på billedet. På skærme med mus er billedet dæmpet af en sort kasse (65 %), der forsvinder, når musen er over kortet,
   og kortet løfter sig med en skygge. På tablet og telefon er billederne altid lyse. */
.cards:has(.card.pic){grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.card.pic{--kc:#D1472C;position:relative;padding:0;min-height:420px;border:0;overflow:hidden;justify-content:flex-end;gap:0;background:#16181C;color:#fff;border-radius:18px;box-shadow:0 14px 30px -20px rgba(0,0,0,.55);transition:box-shadow .25s ease}
.card.pic.k-nu{--kc:#2B6BE6} .card.pic.k-etik{--kc:#8A3FFC}
.card.pic:hover{border-color:transparent}
.card.pic .cimg{position:absolute;inset:0;height:auto;margin:0;border-radius:0;background-color:#16181C;background-size:cover;background-position:center}
.card.pic .cimg:not([style]){background-image:linear-gradient(150deg,color-mix(in srgb,var(--kc) 85%,#fff),color-mix(in srgb,var(--kc) 55%,#000))}
.card.pic .cimg::after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .25s ease}
.card.pic .cyear{position:absolute;left:14px;top:14px;z-index:1;background:var(--kc);color:#fff;font-weight:800;font-size:1rem;line-height:1;padding:6px 12px;border-radius:999px}
.card.pic .cbody{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;padding:90px 18px 18px;background:linear-gradient(transparent,rgba(10,12,16,.86) 42%)}
.card.pic h3{color:#fff;font-family:var(--sans);font-weight:800;font-size:1.4rem;line-height:1.15;padding-right:0;text-wrap:balance}
.card.pic p{color:rgba(255,255,255,.88);font-size:.93rem;flex:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card.pic .meta{color:rgba(255,255,255,.8)} .card.pic .meta b{color:#fff}
.card.pic .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.card.pic .tag{background:rgba(255,255,255,.2);color:#fff;font-weight:600}
.card.pic .tag.kf{background:var(--kc)}
.cardw:has(>.card.pic){transition:transform .25s ease}
.cardw:has(>.card.pic) .star{top:10px;right:10px;z-index:2;opacity:1;background:rgba(0,0,0,.45);color:#F2C14E;width:38px;height:38px;padding:0;display:grid;place-items:center;border-radius:50%}
.cardw:has(>.card.pic) .bbadge{top:14px;right:56px;z-index:2}
.bbadge .bseal{width:28px;height:28px;display:block;border-radius:7px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.bbadge.inline .bseal{width:18px;height:18px;border-radius:5px;box-shadow:none}
.cardw:has(>.card.pic) .card .cbody h3{padding-right:0}
.cardw:has(.admhide)>.card.pic{padding-bottom:0} .cardw:has(.admhide)>.card.pic .cbody{padding-bottom:50px}
@media (hover:hover){
  .card.pic .cimg::after{opacity:.65}
  .cardw:has(>.card.pic):hover,.cardw:has(>.card.pic:focus-visible){transform:translateY(-8px) scale(1.02);z-index:1}
  .cardw:has(>.card.pic):hover>.card.pic,.card.pic:focus-visible{box-shadow:0 2px 4px rgba(0,0,0,.12),0 28px 44px -16px rgba(0,0,0,.55)}
  .cardw:has(>.card.pic):hover .cimg::after,.card.pic:focus-visible .cimg::after{opacity:0}
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cardw:has(>.card.pic):hover>.card.pic{box-shadow:0 2px 4px rgba(0,0,0,.5),0 30px 50px -14px rgba(0,0,0,.95)} }
:root[data-theme="dark"] .cardw:has(>.card.pic):hover>.card.pic{box-shadow:0 2px 4px rgba(0,0,0,.5),0 30px 50px -14px rgba(0,0,0,.95)}
@media (max-width:600px){ .card.pic{min-height:360px} .card.pic .cbody{padding-top:70px} }
@media (prefers-reduced-motion: reduce){ .card.pic,.card.pic .cimg::after,.cardw:has(>.card.pic){transition:none} .cardw:has(>.card.pic):hover{transform:none} }
.card.pic .cimg:not([style])::after{display:none}
/* Forsiden: den røde Værksted-knap mellem Spil nu og Deltag (Sørens ønske 7. okt. 2026) */
:root{--on-logo:#FFFFFF}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--on-logo:#16181C} }
:root[data-theme="dark"]{--on-logo:#16181C}
.fs-vaerk{background:var(--logo);color:var(--on-logo);text-decoration:none;transition:filter .15s,transform .15s}
.fs-vaerk:hover,.fs-vaerk:focus-visible{filter:brightness(1.08);transform:translateY(-1px)}
.top .fs-vaerk{height:44px;padding:0 20px;border-radius:999px;font-size:1rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;min-width:132px;line-height:1}
@media (max-width:600px){ .top .fs-vaerk{height:40px;padding:0 16px;font-size:.95rem;min-width:108px} }
@media (prefers-reduced-motion: reduce){ .fs-vaerk{transition:none} .fs-vaerk:hover{transform:none} }
/* Forsiden på mobil: logo, tema og Log ind øverst; Spil nu, Værksted og Deltag på én række under */
@media (max-width:600px){
  body.fs .top:not(.sitetop){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;align-items:center}
  body.fs .top:not(.sitetop) .wordmark{grid-column:1/3;grid-row:1}
  body.fs .top:not(.sitetop) .topright{grid-column:2/4;grid-row:1;justify-self:end;display:flex;gap:8px;justify-content:flex-end}
  body.fs .top .fs-play{grid-column:1;grid-row:2}
  body.fs .top .fs-vaerk{grid-column:2;grid-row:2}
  body.fs .top:not(.sitetop) .hjoin{grid-column:3;grid-row:2;margin:0}
  body.fs .top:not(.sitetop) .fs-play,body.fs .top:not(.sitetop) .fs-vaerk,body.fs .top:not(.sitetop) .hjoin{min-width:0;width:100%;padding:0 8px}
  body.fs .top:not(.sitetop) .topright > a.btn{min-width:0}
}
.top .hjoin{margin-right:0}

/* Valgknapperne A-D (bid 3, 7. oktober 2026, Sørens valg): fyldt farve med hvid tekst, bogstavet i en hvid cirkel, større knapper.
   Det valgte svar får en ring i samme farve. Gælder spillet, elevernes telefoner (stem.php), quizzen og eksemplet på forsiden. */
.choice.o0{--cf:var(--fA)} .choice.o1{--cf:var(--fB)} .choice.o2{--cf:var(--fC)} .choice.o3{--cf:var(--fD)}
.choice.o0,.choice.o1,.choice.o2,.choice.o3{background:var(--cf);border-color:var(--cf);color:#fff;transition:filter .15s,transform .15s,box-shadow .15s}
.choice.o0 .letter,.choice.o1 .letter,.choice.o2 .letter,.choice.o3 .letter{color:var(--cf);background:#fff;width:52px;height:52px;min-width:0;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--sans);font-weight:800;font-size:1.7rem;line-height:1}
.choice.o0 .txt,.choice.o1 .txt,.choice.o2 .txt,.choice.o3 .txt{font-weight:600}
.choice.o0[aria-pressed="true"],.choice.o1[aria-pressed="true"],.choice.o2[aria-pressed="true"],.choice.o3[aria-pressed="true"],
.choice.win.o0,.choice.win.o1,.choice.win.o2,.choice.win.o3{background:var(--cf);border-color:var(--cf);box-shadow:0 0 0 4px var(--surface),0 0 0 7px var(--cf)}
button.choice.o0:hover,button.choice.o1:hover,button.choice.o2:hover,button.choice.o3:hover{border-color:var(--cf);filter:brightness(1.07);transform:translateY(-2px)}
.choice .tally button{color:var(--ink)}
.choice.right.o0,.choice.right.o1,.choice.right.o2,.choice.right.o3{background:var(--cf);border-color:var(--cf);box-shadow:none}
.choice.wrong.o0,.choice.wrong.o1,.choice.wrong.o2,.choice.wrong.o3{background:var(--cf);border-color:var(--cf);box-shadow:none;opacity:.8}
.stage .choice{padding:18px 16px;min-height:96px;gap:14px}
.stage .choices.wide .choice{padding:16px 18px;gap:10px}
.stage .choices.wide .choice .letter{width:48px;height:48px;font-size:1.6rem}
.fs-card .choice .letter{width:36px;height:36px;font-size:1.25rem}
.vt .choice .letter{width:48px;height:48px;font-size:1.6rem}
.tavle .stage .choice{min-height:130px;padding:22px 20px}
.tavle .stage .choice .letter,.tavle .stage .choices.wide .choice .letter{width:66px;height:66px;font-size:2.3rem}
.tavle .stage .choice .txt{font-weight:700}
@media (prefers-reduced-motion: reduce){ .choice.o0,.choice.o1,.choice.o2,.choice.o3{transition:none} button.choice:hover{transform:none} }


/* Forsidens "Prøv et spil nu" med samme kort som i værkstedet (Billedbogen, 7. okt. 2026) */
.fs-trylist:has(.fs-pic){grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.fs-trylist .fs-pic{--kc:#D1472C;position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;padding:0;border:0;border-radius:18px;overflow:hidden;background:#16181C;color:#fff;box-shadow:0 14px 30px -20px rgba(0,0,0,.55);transition:transform .25s ease,box-shadow .25s ease}
.fs-trylist .fs-pic.fs-k-nu{--kc:#2B6BE6} .fs-trylist .fs-pic.fs-k-etik{--kc:#8A3FFC}
.fs-trylist .fs-pic .fs-img{position:absolute;inset:0;height:auto;margin:0;background-color:#16181C;background-size:cover;background-position:center}
.fs-trylist .fs-pic .fs-img:not([style]){background-image:linear-gradient(150deg,color-mix(in srgb,var(--kc) 85%,#fff),color-mix(in srgb,var(--kc) 55%,#000))}
.fs-trylist .fs-pic .fs-img::after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .25s ease}
.fs-trylist .fs-pic .fs-year{position:absolute;left:12px;top:12px;z-index:1;background:var(--kc);color:#fff;font-weight:800;font-size:.95rem;line-height:1;padding:6px 11px;border-radius:999px}
.fs-trylist .fs-pic .fs-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:70px 16px 16px;background:linear-gradient(transparent,rgba(10,12,16,.86) 45%)}
.fs-trylist .fs-pic b{font-family:var(--sans);font-weight:800;font-size:1.2rem;line-height:1.15;color:#fff;text-wrap:balance}
.fs-trylist .fs-pic .fs-tag{background:var(--kc);color:#fff;font-weight:700;font-size:.8rem;padding:3px 10px;border-radius:999px}
@media (hover:hover){
  .fs-trylist .fs-pic .fs-img[style]::after{opacity:.65}
  .fs-trylist .fs-pic:hover,.fs-trylist .fs-pic:focus-visible{transform:translateY(-8px) scale(1.02);border-color:transparent;box-shadow:0 2px 4px rgba(0,0,0,.12),0 28px 44px -16px rgba(0,0,0,.55)}
  .fs-trylist .fs-pic:hover .fs-img::after,.fs-trylist .fs-pic:focus-visible .fs-img::after{opacity:0}
}
@media (max-width:600px){ .fs-trylist .fs-pic{min-height:260px} }
@media (prefers-reduced-motion: reduce){ .fs-trylist .fs-pic,.fs-trylist .fs-pic .fs-img::after{transition:none} .fs-trylist .fs-pic:hover{transform:none} }
@media (max-width:600px){ .fs-trylist:has(.fs-pic){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .fs-trylist .fs-pic{min-height:220px;border-radius:14px} .fs-trylist .fs-pic b{font-size:1rem} .fs-trylist .fs-pic .fs-body{padding:50px 12px 12px;gap:6px} .fs-trylist .fs-pic .fs-year{font-size:.8rem;padding:5px 9px;left:9px;top:9px} }
/* Mindre rødt på kortene (Sørens ønske 7. okt. 2026): årstallet i gennemsigtig grå, intet fag-mærke, og en diskret stjerne uden mørk cirkel bag */
.card.pic .cyear,.fs-trylist .fs-pic .fs-year{background:rgba(28,30,34,.5);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.cardw:has(>.card.pic) .star{background:transparent;color:rgba(255,255,255,.6);text-shadow:0 1px 3px rgba(0,0,0,.35);font-size:1.5rem}
.cardw:has(>.card.pic) .star:hover{color:#F2C14E}
.cardw:has(>.card.pic) .star[aria-pressed="true"]{color:#F2C14E;opacity:1}
/* Fag-mærket lidt mindre og let gennemsigtigt (Sørens ønske 7. okt. 2026) */
.card.pic .tag.kf,.fs-trylist .fs-pic .fs-tag{background:color-mix(in srgb,var(--kc) 72%,transparent);font-size:.72rem;padding:2px 8px;line-height:1.5}
.card.pic .tags{align-items:center}
.card.pic .tag.kf,.fs-trylist .fs-pic .fs-tag{font-size:.64rem;padding:1px 7px;font-weight:600;letter-spacing:.02em}

/* Vendekort (7. oktober 2026, Sørens ønske): forsiden viser billede, titel og stjerne; et tryk vender kortet om, og bagsiden fortæller kort,
   hvad dilemmaet handler om, med Spil nu og Se mere (spillets side). Tryk på bagsiden eller Esc vender det tilbage. */
/* 3D-laget findes kun på det kort, der vendes (klassen flipping), så en side med mange kort ikke bliver tung at tegne */
.cardw.flipping{perspective:1600px}
.cardw.flipping>.card.pic,.cardw.flipping>.cback{backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .55s cubic-bezier(.3,.7,.2,1)}
.cardw:not(.flipping)>.cback{display:none}
.card.pic .cbody{padding-bottom:20px}
.card.pic .cbody h3{font-size:1.5rem}
.cback{--kc:#D1472C;position:absolute;inset:0;z-index:1;transform:rotateY(180deg);display:flex;flex-direction:column;gap:10px;padding:0 18px 18px;border-radius:18px;overflow:hidden;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 14px 30px -20px rgba(0,0,0,.55)}
.cback.k-nu{--kc:#2B6BE6} .cback.k-etik{--kc:#8A3FFC}
.cback-bg{position:absolute;inset:0;border:0;background:transparent;padding:0;cursor:pointer;z-index:0}
.cback>*:not(.cback-bg){position:relative;z-index:1;pointer-events:none}
.cback .cback-act,.cback .cback-act *{pointer-events:auto}
.cback-top{margin:0 -18px;padding:12px 18px;background:var(--surface);color:var(--muted);border-bottom:1px solid var(--line);font-weight:800;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;min-height:42px;padding-right:64px}
.cback h4{margin:4px 0 0;font-family:var(--sans);font-weight:800;font-size:1.3rem;line-height:1.15;text-wrap:balance}
.cback p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.45;flex:1;overflow:hidden}
.cback .meta{font-size:.85rem;color:var(--muted)}
.cback .tags{display:flex;flex-wrap:wrap;gap:5px}
.cback-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.cback-act .btn{flex:1;justify-content:center;font-weight:800;min-height:44px;border-radius:999px}
.cback-act .btn.play{background:var(--play);color:var(--play-ink);border-color:var(--play)}
.cardw.flipped>.card.pic{transform:rotateY(-180deg)}
.cardw.flipped>.cback{transform:rotateY(0)}
.cardw.flipped .bbadge,.cardw.flipped .admhide{opacity:0;pointer-events:none}
.cardw.flipped .star{color:rgba(255,255,255,.85);text-shadow:none}
.cardw.flipped .star[aria-pressed="true"]{color:#F2C14E}
@media (hover:hover){ .cardw.flipped:has(>.card.pic):hover{transform:none} }
@media (prefers-reduced-motion: reduce){ .cardw>.card.pic,.cardw>.cback{transition:none} }
/* Forsidens kort vender også: forsiden billede og titel, bagsiden fag, klassetrin, kort beskrivelse og Spil nu (prøvespillet) */
.fs-trylist .fs-flip{position:relative;display:flex;transition:transform .25s ease}
.fs-trylist .fs-flip.flipping{perspective:1600px}
.fs-trylist .fs-flip:not(.flipping)>.cback{display:none}
.fs-trylist .fs-flip.flipping>.fs-pic{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fs-trylist .fs-flip>.fs-pic{flex:1;width:100%;font:inherit;text-align:left;cursor:pointer;transition:transform .55s cubic-bezier(.3,.7,.2,1),box-shadow .25s ease}
.fs-trylist .fs-flip>.cback{transition:transform .55s cubic-bezier(.3,.7,.2,1)}
.fs-trylist .fs-flip .cback-top{padding-right:18px}
.fs-trylist .fs-flip .cback h4{font-size:1.15rem}
.fs-trylist .fs-flip .cback p{font-size:.88rem}
.fs-trylist .fs-flip .cback-act .btn{text-decoration:none;display:inline-flex;align-items:center}
.fs-trylist .fs-flip .cback-act .btn:hover,.fs-trylist .fs-flip .cback-act .btn:focus-visible{border-color:var(--play);box-shadow:none;transform:none} /* ingen rød skygge på Spil nu (reglen for .fs-trylist a gælder de gamle kort) */
.fs-trylist .fs-flip.flipped>.fs-pic{transform:rotateY(-180deg)}
.fs-trylist .fs-flip.flipped>.cback{transform:rotateY(0)}
@media (hover:hover){ .fs-trylist .fs-flip:not(.flipped):hover{transform:translateY(-8px) scale(1.02);z-index:1} .fs-trylist .fs-flip:not(.flipped):hover>.fs-pic{box-shadow:0 2px 4px rgba(0,0,0,.12),0 28px 44px -16px rgba(0,0,0,.55)} .fs-trylist .fs-flip:not(.flipped):hover .fs-img::after{opacity:0} .fs-trylist .fs-pic:hover{transform:none} }
@media (max-width:600px){ .fs-trylist .fs-flip .cback{padding:0 12px 12px;gap:6px} .fs-trylist .fs-flip .cback-top{margin:0 -12px;padding:8px 12px;font-size:.7rem;min-height:0} .fs-trylist .fs-flip .cback h4{font-size:1rem} .fs-trylist .fs-flip .cback p{font-size:.8rem} .fs-trylist .fs-flip .cback-act .btn{min-height:38px;padding:0 10px} }
@media (prefers-reduced-motion: reduce){ .fs-trylist .fs-flip,.fs-trylist .fs-flip>.fs-pic,.fs-trylist .fs-flip>.cback{transition:none} .fs-trylist .fs-flip:hover{transform:none} }
.fs-trylist .fs-flip.flipping>.cback{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fs-trylist .fs-flip .cback-top{color:var(--muted)} /* bagsidens bjælke i sidens tema, ikke fagets farve (8. okt. 2026, Sørens ønske) */
.cback p{-webkit-mask-image:linear-gradient(#000 calc(100% - 2.2em),transparent);mask-image:linear-gradient(#000 calc(100% - 2.2em),transparent)}

/* Spilskærmen (8. oktober 2026, Sørens valg): én skrift uden fødder, ingen orddeling, kilden i samme stil som resten,
   bogstav og svar på én linje med tælleren som en bjælke i bunden, en grå knap, til der er talt, og en streg pr. dilemma i toppen */
:root{--k-soft:#FBF3DF;--k-edge:#DCC07A;--k-label:#7A5A1C}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--k-soft:#262318;--k-edge:#5A4E33;--k-label:#D9B868} }
:root[data-theme="dark"]{--k-soft:#262318;--k-edge:#5A4E33;--k-label:#D9B868}
h1,h2{font-weight:700;letter-spacing:-.02em}
.stage h2{letter-spacing:-.025em;line-height:1.08}
.prose,.ktext,.cc,.panel p,.choice .txt{hyphens:manual}
.decide .question{color:var(--ink);letter-spacing:-.02em}
.topline .tlgame{font-weight:600;min-width:0}
.topline .tlsteps{display:flex;align-items:center;gap:10px;margin-left:6px}
.topline .steps{display:flex;gap:5px}
.topline .steps i{width:24px;height:6px;border-radius:3px;background:var(--tint)}
.topline .steps i.done{background:color-mix(in srgb,var(--ink) 40%,var(--tint))}
.topline .steps i.on{background:var(--ink)}
.topline .tlnum{font-variant-numeric:tabular-nums}
.topline .tlact{display:flex;align-items:center;gap:8px;margin-left:auto}
.topline .tlact .speak{margin:0;min-height:0;padding:4px 12px;font-size:.8rem;font-weight:600}
.topline .tlact .bigbtn{margin-left:0}
.kilde{background:var(--k-soft);border:1px solid var(--k-edge);border-radius:14px}
.kilde .khead{background:transparent;color:var(--k-label);padding:16px 18px 0;font-size:.8rem;letter-spacing:.08em}
.kilde .khead svg{width:16px;height:16px}
.kilde .kbody{padding:6px 18px 18px}
.kilde h3{font-weight:700}
.kilde .kq{color:var(--ink);border-top:1px dashed var(--k-edge);padding-top:10px}
.kilde .kq::before{content:"Spørgsmål til kilden";display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--k-label);font-weight:700;margin-bottom:2px}
.stage .choices.wide .choice{flex-direction:row;align-items:center;gap:14px}
.stage .choices.wide .choice:has(>.tally){display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;gap:0 14px;padding:0;overflow:hidden}
.stage .choices.wide .choice:has(>.tally)>.letter{margin:18px 0 16px 18px}
.stage .choices.wide .choice:has(>.tally)>.txt{padding:16px 18px 14px 0}
.stage .choices.wide .choice>.tally{grid-column:1/-1;align-self:end;display:flex;gap:6px;margin-left:0;padding:8px 10px 8px 18px;background:rgba(0,0,0,.18)}
.stage .choices.wide .choice>.tally::before{content:"Stemmer";font-size:.85rem;font-weight:600;opacity:.9;margin-right:auto}
.stage .choices.wide .choice>.tally button{width:38px;height:38px;border:0;background:rgba(255,255,255,.22);color:#fff;font-weight:700}
.stage .choices.wide .choice>.tally button:hover{background:rgba(255,255,255,.36)}
.stage .choices.wide .choice>.tally .cnt{font-family:var(--sans);font-weight:700;font-size:1.5rem;color:#fff;font-variant-numeric:tabular-nums;min-width:2ch}
.btn.stamp:disabled{background:var(--tint);border-color:var(--tint);color:var(--muted);opacity:1;filter:none}
@media (max-width:600px){ .topline .tlsteps{order:3;flex-basis:100%;margin-left:0} }

/* Sitemap i bunden af de offentlige sider (site_footer() i inc/bootstrap.php, 8. oktober 2026) */
.credits.sitemap{display:block;padding:30px 0 26px;margin-top:24px}
.smap{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:24px;margin-bottom:24px}
.smap h2{font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-weight:700}
.smap ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.smap a{color:var(--ink);text-decoration:none;font-size:.93rem}
.smap a:hover{text-decoration:underline}
.smbrand b{font-size:1.05rem}
.smbrand p{margin:6px 0 0;max-width:30ch}
.smbottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}
@media (max-width:820px){ .smap{grid-template-columns:1fr 1fr} .smbrand{grid-column:1/-1} }

/* Links i sidens tema (8. oktober 2026): før var de browserens standardblå, som er svær at læse i mørkt tema */
a{color:var(--ink);text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:.18em}
a:hover{text-decoration-color:currentColor}
/* temaknappen øverst til højre på de små sider (404, bekræft e-mail, notice() i index.php) */
.noticetheme{display:flex;justify-content:flex-end;padding-top:16px}
.noticetheme+.notice{margin-top:24px}

/* Velkomstkortet "Rolig hvid" (8. oktober 2026, Sørens valg): ingen toning, de tre trin i hver sin lille kasse med store røde tal */
.welcome{background:var(--surface);border:1px solid var(--line)}
.welcome .wsteps{gap:12px}
.welcome .wsteps li{padding:14px 16px;background:var(--paper);border-radius:12px;display:flex;flex-direction:column;gap:6px}
.welcome .wsteps li::before{position:static;width:auto;height:auto;background:none;color:var(--stamp);font-size:2rem;font-weight:800;line-height:1;display:block;transform:none}

/* Filtrene under Spil i én linje (8. oktober 2026, Sørens valg B): søgefelt, rullemenuer som piller, Favoritter som knap */
.libbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
.libsearch{position:relative;display:flex;align-items:center;flex:1 1 190px;min-width:170px;max-width:320px}
.libsearch svg{position:absolute;left:12px;width:17px;height:17px;color:var(--muted);pointer-events:none}
.libsearch input{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px 8px 36px;min-height:44px}
.dd{position:relative;display:inline-flex}
.dd select{appearance:none;-webkit-appearance:none;width:auto;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:8px 34px 8px 15px;min-height:44px;cursor:pointer}
.dd::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.dd select:hover{border-color:color-mix(in srgb,var(--ink) 45%,var(--line))}
.libbar .libfavbtn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 15px;min-height:44px;font-weight:600;display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.libbar .libfavbtn .st{color:#C99A00}
.libbar .libfavbtn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.libbar .libfavbtn[aria-pressed="true"] .st{color:#F2C94C}
.libbar [data-p="moreFilters"]{min-height:44px}
.morefilters{margin-top:-8px}
@media (max-width:600px){ .libbar{display:grid;grid-template-columns:1fr 1fr} .libsearch{grid-column:1/-1;max-width:none} .libbar .dd,.libbar .dd select,.libbar .libfavbtn,.libbar [data-p="moreFilters"]{width:100%;min-width:0} .libbar .libfavbtn{justify-content:center} }

/* Toppen i værkstedet (8. oktober 2026, Sørens valg, fane 0 i koncepterne): Deltag til venstre, logoet, og til højre Spil/Værksted i en rolig kasse, profil, tema og hjælp */
.apptop .topleft{display:flex;align-items:center}
.apptop .topleft .hjoin{margin:0}
@media (min-width:601px){
  .apptop{display:grid;grid-template-columns:minmax(max-content,.4fr) auto minmax(0,1fr) auto;column-gap:18px;row-gap:10px;align-items:center}
  .apptop .topleft{grid-column:1;grid-row:1}
  .apptop .wordmark{grid-column:2;grid-row:1}
  .apptop .tabs{grid-column:3;grid-row:1;justify-self:end}
  .apptop .topright{grid-column:4;grid-row:1;min-height:0}
}
@media (min-width:601px) and (max-width:1000px){ .apptop{grid-template-columns:auto auto minmax(0,1fr)} .apptop .topright{grid-column:3;justify-self:end} .apptop .tabs{grid-column:1/-1;grid-row:2;justify-self:start} }
@media (max-width:600px){
  .apptop{display:grid;grid-template-columns:auto 1fr auto;gap:10px 8px;align-items:center}
  .apptop .topleft{grid-column:1;grid-row:1}
  .apptop .wordmark{grid-column:2;grid-row:1;justify-self:center}
  .apptop .topright{grid-column:3;grid-row:1}
  .apptop .tabs{grid-column:1/-1;grid-row:2}
  .apptop .topleft .hjoin{min-width:0;padding:0 12px;font-size:.88rem}
  .apptop .topright{flex-wrap:nowrap;gap:6px}
  .apptop .topright .themebtn,.apptop .topright .guide{width:36px;height:36px;min-width:0}
  .apptop .wordmark .logo{height:46px}
}
.apptop .tabs button[aria-selected="true"],.apptop .tabs button.tab-play[aria-selected="true"]{background:var(--ink);color:var(--surface);box-shadow:none}
.apptop .tabs button.tab-play{color:var(--muted);font-weight:700;font-size:1em}
.apptop .tabs button.tab-play::before{display:none}
.apptop .tabs button.tab-play:not([aria-selected="true"]):hover{background:color-mix(in srgb,var(--surface) 75%,transparent)}
.apptop .tabs button[aria-selected="true"]:hover,.apptop .tabs button.tab-play[aria-selected="true"]:hover{background:var(--ink);color:var(--surface);filter:none;transform:none} /* den valgte fane ændrer sig ikke under musen (9. okt. 2026: Spil blev hvid på hvid) */
.apptop .avatar{background:var(--tint);color:var(--ink);border:1px solid var(--line)}

/* Samme top på de offentlige sider (site_header(), 8. oktober 2026) */
.sitetop .tabs a{padding:8px 18px;border-radius:999px;font-weight:700;color:var(--muted);text-decoration:none}
.sitetop .tabs a:hover{background:color-mix(in srgb,var(--surface) 75%,transparent);color:var(--ink)}
.sitetop .topright{flex-wrap:nowrap}
@media (max-width:600px){ .sitetop .topright a.topret{display:none} }

/* Forsidens knapper større, uden den lille tekst (9. oktober 2026, Sørens ønske) */
.fs-hero .fs-cta{gap:14px;margin-bottom:22px}
.fs-hero .fs-cta .btn{font-size:1.22rem;padding:18px 28px;min-height:62px;border-radius:14px}

@media (max-width:600px){ .fs-hero .fs-cta{flex-direction:column;align-items:stretch} .fs-hero .fs-cta .btn{width:100%;justify-content:center} }

/* Eksemplet øverst på forsiden er et link til spillet (9. oktober 2026, Sørens ønske) */
a.fs-card{display:block;color:inherit;text-decoration:none;cursor:pointer}
a.fs-card:focus-visible{outline:3px solid var(--stamp);outline-offset:6px}

/* Toppen: logoet lidt større og lidt længere fra Deltag i spil (9. oktober 2026, Sørens ønske) */
@media (min-width:601px){ .apptop .wordmark{margin-left:28px} .apptop .wordmark .logo{height:84px} .apptop .wordmark,.apptop .topright{min-height:84px} }
@media (max-width:600px){
  .apptop{column-gap:6px}
  .apptop .wordmark .logo{height:42px}
  .apptop .topleft .hjoin{padding:0 10px;font-size:.84rem;height:36px}
  .apptop .topright{gap:5px}
  .apptop .topright > .themebtn,.apptop .topright > .guide,.apptop .topright summary .avatar{width:34px;height:34px;min-width:0}
}

/* Log ind i kassen med Spil og Værksted (9. oktober 2026, Sørens ønske); på login-siden markeret som valgt */
.sitetop .tabs a[aria-current="page"]{background:var(--ink);color:var(--surface)}

/* Navneikonet uden den indre hvide ring, så det ligner temaknappen; i menuens hoved med samme baggrund og kant som temaknappen (9. oktober 2026, Sørens ønske). Når menuen er åben, får ikonet i toppen den grønne ring */
.apptop .avatar{box-shadow:none}
.profmenu .menu .pm-head .avatar{background:color-mix(in srgb,var(--ink) 7%,var(--surface));color:var(--ink);border:1px solid var(--line);box-shadow:none;box-sizing:border-box}
/* Den runde temaknap i højre side af profilmenuens hoved, samme størrelse og højde som navneikonet til venstre (9. oktober 2026, Sørens ønske) */
.profmenu .menu .pm-head .themebtn{width:52px;height:52px;min-width:0;padding:0;box-sizing:border-box;margin-left:auto;display:inline-grid;place-items:center;border-radius:50%;flex:none;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 7%,var(--surface));color:var(--ink)}
.profmenu .menu .pm-head .themebtn svg{width:22px;height:22px}

/* Hover på Spil og Værksted i toppen (9. oktober 2026, Sørens valg): neutral, en tand mørkere end kassen (lysere i mørkt tema) med mørk tekst; ingen ekstra farve, så toppen kun har gul, rust og sort */
.apptop .tabs button.tab-play:not([aria-selected="true"]):hover,.apptop .tabs button[data-tab="build"]:not([aria-selected="true"]):hover,.sitetop .tabs a.nav-play:hover,.sitetop .tabs a.nav-vaerk:hover,.sitetop .tabs a.tlogin:not([aria-current]):hover{background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink);transform:none}

/* Forsiden, forslag B (9. oktober 2026, Sørens valg): overskrift, tekst og knapper på et stort billede fra et spil (skifter ved hvert besøg); billedet fylder højre del og toner over i mørkt bag teksten. Altid mørk, også i lyst tema */
.fs-hero.fs-photo{position:relative;display:flex;align-items:center;min-height:clamp(500px,64vh,640px);margin-top:clamp(14px,2.5vw,26px);padding:clamp(30px,5vw,64px);border-radius:24px;overflow:hidden;background:#15181D;color:#FFFFFF;box-sizing:border-box}
.fs-heroimg{position:absolute;top:0;right:0;bottom:0;width:66%;display:block}
.fs-heroimg img{width:100%;height:100%;object-fit:cover;display:block}
.fs-heroimg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#15181D 0%,rgba(21,24,29,.78) 32%,rgba(21,24,29,.18) 100%)}
.fs-photo .fs-copy{position:relative;z-index:1;max-width:660px}
.fs-photo .fs-kicker{color:#F2C14E}
.fs-photo h1{color:#FFFFFF}
.fs-photo h1 em{color:#EC7B62}
.fs-photo .fs-lead{color:#E6E8EB;max-width:34ch}
.fs-photo .fs-cta .btn:not(.stamp):not(.play){background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.6)}
.fs-photo .fs-cta .btn:not(.stamp):not(.play):hover{background:rgba(255,255,255,.12);color:#FFFFFF}
.fs-photo .fs-cta{margin-bottom:0}
.fs-noimg .fs-heroimg{display:none}
@media (max-width:760px){
  .fs-hero.fs-photo{display:block;min-height:0;padding:clamp(200px,52vw,280px) 22px 64px;border-radius:18px}
  .fs-heroimg{width:100%}
  .fs-heroimg::after{background:linear-gradient(0deg,#15181D 38%,rgba(21,24,29,.5) 70%,rgba(21,24,29,.1) 100%)}
}
/* Sådan spiller I med eksemplet ved siden af (flyttet fra toppen) */
.fs-sdgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(28px,5vw,64px);align-items:center}
.fs-sdgrid ol{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){ .fs-sdgrid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:520px){ .fs-sdgrid ol{grid-template-columns:minmax(0,1fr)} }

/* Forsiden: én række pr. slags prøvespil, der rulles sidelæns, med pile (9. oktober 2026, Sørens ønske) */
.fs-trylist.fs-row{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 3 * 16px) / 4);gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 2px;padding:12px 2px 26px;margin:-12px -2px -14px;scrollbar-width:thin;overscroll-behavior-x:contain}
.fs-trylist.fs-row>.fs-flip{scroll-snap-align:start;min-width:0}
.fs-rownav{margin-left:auto;display:flex;gap:6px}
.fs-rowbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:1.4rem;line-height:1;display:inline-grid;place-items:center;cursor:pointer;padding:0 0 3px}
.fs-rowbtn:hover:not(:disabled){background:var(--tint)}
.fs-rowbtn:disabled{opacity:.35;cursor:default}
.fs-fits .fs-rownav{display:none}
@media (max-width:860px){ .fs-trylist.fs-row{grid-auto-columns:calc((100% - 2 * 16px) / 3)} }
@media (max-width:600px){ .fs-trylist.fs-row{grid-auto-columns:44%;gap:10px} .fs-rownav{display:none} }

/* Sådan spiller I lige under toppen, kompakt: trinene under hinanden med tallet til venstre, eksemplet lidt mindre (9. oktober 2026, Sørens valg) */
.fs-stepstop{margin:clamp(30px,5vw,56px) 0 clamp(34px,5vw,60px)}
.fs-stepstop .fs-h2{margin-bottom:clamp(14px,2vw,22px)}
.fs-stepstop .fs-sdgrid{grid-template-columns:minmax(0,1fr) minmax(0,440px)}
.fs-stepstop .fs-sdgrid ol{grid-template-columns:minmax(0,1fr);gap:0}
.fs-stepstop li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:baseline;border-top:2px solid var(--line);padding:14px 0}
.fs-stepstop li:first-child{border-top-color:var(--stamp)}
.fs-stepstop li::before{grid-row:1 / 3;font-size:2.6rem;margin:0}
.fs-stepstop li b{font-size:1.3rem;margin:0}
.fs-stepstop li span{grid-column:2}
@media (max-width:860px){ .fs-stepstop .fs-sdgrid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:520px){ .fs-stepstop li{grid-template-columns:44px minmax(0,1fr)} .fs-stepstop li::before{font-size:2rem} }

/* Forsiden i fuld bredde (9. oktober 2026, Sørens valg): billedet kant til kant i hele skærmens højde, toppen ligger fast og toner gradvist over i sidens farve, når man scroller (.solid sættes af scriptet nederst i forside.php), og toning D, så teksten kan læses på alle billeder */
html:has(body.fs),body.fs{overflow-x:clip}
.fs .wrap{overflow-x:visible}
body.fs .sitetop{--p:0;position:fixed;top:0;left:0;right:0;z-index:50;margin:0;max-width:none;box-sizing:border-box;padding-top:14px;padding-bottom:14px;padding-left:max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px));padding-right:max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px));border-bottom:0;background:color-mix(in srgb,var(--paper) calc(var(--p) * 100%),transparent);box-shadow:0 1px 0 color-mix(in srgb,var(--line) calc(var(--p) * 100%),transparent),0 8px 24px -18px rgba(0,0,0,calc(var(--p) * .5));-webkit-backdrop-filter:blur(calc(var(--p) * 12px));backdrop-filter:blur(calc(var(--p) * 12px))}
body.fs .sitetop .wordmark .li,body.fs .sitetop .wordmark .la,body.fs .sitetop .tabs,body.fs .sitetop .tabs a,body.fs .sitetop .themebtn,body.fs .sitetop .avatar{transition:fill .35s,color .35s,background .35s,border-color .35s}
body.fs .sitetop:not(.solid) .wordmark .li{fill:#FFFFFF}
body.fs .sitetop:not(.solid) .wordmark .la{fill:#EC7B62}
body.fs .sitetop:not(.solid) .tabs{background:rgba(255,255,255,.14)}
body.fs .sitetop:not(.solid) .tabs a{color:#FFFFFF}
body.fs .sitetop:not(.solid) .tabs a:hover{background:rgba(255,255,255,.16);color:#FFFFFF}
body.fs .sitetop:not(.solid) > .topright > .themebtn,body.fs .sitetop:not(.solid) summary .avatar{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#FFFFFF}
.fs-hero.fs-photo{margin-top:0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;min-height:max(620px,100vh);padding-top:170px;padding-left:max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px));padding-right:max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px))}
.fs-heroimg{width:100%}
.fs-heroimg::after{background:linear-gradient(90deg,rgba(21,24,29,.97) 0%,rgba(21,24,29,.93) 40%,rgba(21,24,29,.45) 70%,rgba(21,24,29,.25) 100%),linear-gradient(180deg,rgba(21,24,29,.75) 0%,rgba(21,24,29,0) 26%)}
#prov,#saadan,#slags,#undervisning,#prov-hist,#prov-nu,#prov-etik{scroll-margin-top:110px}
@media (max-width:760px){ .fs-hero.fs-photo{display:block;min-height:max(560px,100svh);padding-top:200px;padding-bottom:48px} .fs-heroimg::after{background:linear-gradient(180deg,rgba(21,24,29,.82) 0%,rgba(21,24,29,.72) 40%,rgba(21,24,29,.92) 100%)} }
@media (max-width:600px){ body.fs .sitetop{padding-top:10px;padding-bottom:10px} }
@media (prefers-reduced-motion: reduce){ body.fs .sitetop *{transition:none !important} }

/* Den faste top på forsiden bliver markant tyndere, når man scroller (9. oktober 2026, Sørens ønske, som på apple.com) */
body.fs .sitetop{transition:padding .3s ease}
body.fs .sitetop .wordmark .logo,body.fs .sitetop .hjoin,body.fs .sitetop .tabs a,body.fs .sitetop .themebtn,body.fs .sitetop summary .avatar{transition:height .3s ease,width .3s ease,padding .3s ease,font-size .3s ease,min-width .3s ease,fill .35s,color .35s,background .35s,border-color .35s}
body.fs .sitetop.compact{padding-top:6px;padding-bottom:6px}
body.fs .sitetop.compact .wordmark,body.fs .sitetop.compact .topright{min-height:0}
body.fs .sitetop.compact .wordmark .logo{height:40px}
body.fs .sitetop.compact .hjoin{height:32px;min-width:0;padding:0 14px;font-size:.88rem}
body.fs .sitetop.compact .tabs{padding:3px}
body.fs .sitetop.compact .tabs a{padding:4px 14px;font-size:.92rem}
body.fs .sitetop.compact > .topright > .themebtn,body.fs .sitetop.compact summary .avatar{width:32px;height:32px}
@media (max-width:600px){ body.fs .sitetop.compact .wordmark .logo{height:32px} body.fs .sitetop.compact.scrolled .tabs{display:none} body.fs .sitetop.compact .hjoin{height:32px;font-size:.84rem} }
@media (prefers-reduced-motion: reduce){ body.fs .sitetop,body.fs .sitetop *{transition:none !important} }

/* Prøvespil på forsiden: fire store kort pr. række næsten ud til kanten (som apple.com), højformat 4:5, ingen sidelæns rulning; resten bag Vis alle (9. oktober 2026, Sørens ønske) */
.fs-try{--fs-edge:clamp(10px,1.4vw,24px);--fs-in:max(0px,calc(50vw - 660px + 32px - var(--fs-edge)));margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:var(--fs-edge);padding-right:var(--fs-edge)}
.fs-try>h2,.fs-try>p,.fs-try .fs-trygrp h3,.fs-try .fs-tilesmore>summary{margin-left:var(--fs-in);margin-right:var(--fs-in)}
.fs-try .fs-trygrp{margin-bottom:clamp(26px,3vw,40px)}
.fs-try .fs-trygrp h3{font-size:1.45rem}
.fs-trylist.fs-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.fs-trylist.fs-tiles>.fs-flip{aspect-ratio:4/5;min-width:0}
.fs-trylist.fs-tiles .fs-pic{min-height:0;border-radius:16px}
.fs-trylist.fs-tiles .fs-pic b{font-size:clamp(1.25rem,1.6vw,1.8rem)}
.fs-trylist.fs-tiles .fs-pic .fs-body{padding:90px clamp(16px,1.6vw,26px) clamp(16px,1.6vw,24px)}
.fs-trylist.fs-tiles .cback{border-radius:16px}
.fs-tilesmore{margin-top:14px}
.fs-tilesmore>summary{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink);padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.fs-tilesmore>summary::before{content:"+";font-size:1.1rem;line-height:1}
.fs-tilesmore[open]>summary::before{content:"−"}
.fs-tilesmore[open]>summary{margin-bottom:14px}
@media (max-width:860px){ .fs-trylist.fs-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .fs-trylist.fs-tiles .fs-pic b{font-size:1.05rem} .fs-trylist.fs-tiles .fs-pic .fs-body{padding:50px 12px 12px} }
/* toppen er tynd fra start (9. okt. 2026), så billedet starter højere oppe */
.fs-hero.fs-photo{padding-top:110px}
@media (max-width:760px){ .fs-hero.fs-photo{padding-top:120px} }
/* De tre rækker prøvespil adskilles kun af en linje i slagsens farve (9. okt. 2026, Sørens ønske) */
.fs-try .fs-trygrp{margin-bottom:clamp(22px,2.6vw,36px)}
/* Billedet øverst på forsiden er lavere: ca. 3/4 af skærmen og højst 680 px; overskriften følger også skærmens højde, så lave bærbare ikke får en hel skærm billede (9. okt. 2026, Sørens ønske) */
.fs-hero.fs-photo{min-height:clamp(440px,74vh,680px);padding-top:clamp(80px,11vh,104px);padding-bottom:clamp(36px,6vh,64px)}
.fs-photo h1{font-size:clamp(3rem,min(9vw,12.5vh),7rem)}
.fs-photo .fs-lead{font-size:clamp(1.05rem,min(1.9vw,2.6vh),1.4rem)}
.fs-photo .fs-kicker{margin-bottom:10px}
.fs-photo .fs-cta{margin-top:clamp(16px,2.6vh,26px)}
.fs-hero.fs-photo .fs-cta .btn{min-height:clamp(48px,6.5vh,62px);padding:clamp(12px,1.8vh,18px) 26px}
@media (max-width:760px){ .fs-hero.fs-photo{min-height:0;padding-top:120px;padding-bottom:44px} .fs-photo h1{font-size:clamp(2.8rem,13vw,4rem)} .fs-photo .fs-lead{font-size:1.05rem} }
/* Rollekort på startskærmen foldet sammen bag et plus (9. oktober 2026, Sørens ønske) */
.rolepanel.rolefold{padding:12px 16px}
.rolepanel.rolefold>summary{cursor:pointer;font-weight:700;font-size:1.05rem;list-style:none;display:flex;gap:10px;align-items:center}
.rolepanel.rolefold>summary::-webkit-details-marker{display:none}
.rolepanel.rolefold>summary::before{content:'+';display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);font-weight:700;line-height:1}
.rolepanel.rolefold[open]>summary::before{content:'–'}
.rolepanel.rolefold[open]>summary{margin-bottom:8px}

/* Deltag i spil sidst i menukassen (efter Log ind/Værksted), fast gul; logoet står yderst til venstre (9. oktober 2026, Sørens ønske) */
.top .tabs a.hjoin,.top .tabs a.hjoin:hover{background:#F2C14E !important;color:#1A1D22 !important;border:0;box-shadow:none;margin:0;min-width:0;height:auto;padding:8px 18px;border-radius:999px;font-weight:800;font-size:1em;line-height:inherit;display:inline-flex;align-items:center}
.top .tabs a.hjoin:hover{filter:brightness(1.05)}
.apptop .tabs{align-items:center}
@media (min-width:601px){ .apptop{grid-template-columns:auto minmax(0,1fr) auto} .apptop .wordmark{grid-column:1;margin-left:0} .apptop .tabs{grid-column:2;justify-self:end} .apptop .topright{grid-column:3} }
@media (min-width:601px) and (max-width:1000px){ .apptop{grid-template-columns:auto minmax(0,1fr) auto} .apptop .topright{grid-column:3;justify-self:end} .apptop .tabs{grid-column:1/-1;grid-row:2;justify-self:start} }
@media (max-width:600px){ .apptop{grid-template-columns:auto minmax(0,1fr) auto} .apptop .wordmark{grid-column:1;justify-self:start} .apptop .topright{grid-column:3} .apptop .tabs{grid-column:1/-1;grid-row:2} .top .tabs a.hjoin{padding:6px 14px;font-size:.92rem} }
body.fs .sitetop.compact .tabs a.hjoin{padding:4px 14px;font-size:.92rem}
/* forsiden på mobil, når man har scrollet: kun Deltag i spil bliver stående, på linje med logoet */
@media (max-width:600px){ body.fs .sitetop.compact.scrolled .tabs{display:flex;grid-row:1;grid-column:2;justify-self:end;background:transparent;padding:0} body.fs .sitetop.compact.scrolled .tabs>:not(.hjoin){display:none} }

/* Filterrækken under Bibliotek bliver hængende øverst, når man scroller (9. oktober 2026, Sørens ønske, som på gyldendal.dk); baggrunden går hele vejen på tværs, og .stuck giver en svag skygge. Ikke på mobil, hvor rækken er fire linjer høj */
@media (min-width:601px){
  .libbar{position:sticky;top:0;z-index:30;background:var(--paper);padding:10px 0;margin-top:-10px;box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax -24px -100vmax);transition:box-shadow .2s}
  .libbar.stuck{box-shadow:0 0 0 100vmax var(--paper),0 10px 18px -14px rgba(16,24,40,.35)}
}

/* Samme top på alle sider (9. oktober 2026, Sørens ønske): fast øverst, tynd, baggrund med 80 % dækning og let sløring; siden får luft foroven svarende til toppens højde (--hdr sættes af header_js()). På mobil skjules menulinjen, når man har scrollet; Deltag i spil bliver stående ved logoet */
body{padding-top:var(--hdr,0px)}
html{scroll-padding-top:calc(var(--hdr,0px) + 12px)}
header.apptop{position:fixed;top:0;left:0;right:0;z-index:50;margin:0;max-width:none;box-sizing:border-box;padding:6px max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px));border-bottom:0;background:color-mix(in srgb,var(--paper) 80%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 color-mix(in srgb,var(--line) 80%,transparent)}
.tavle .apptop{padding-left:clamp(16px,2.5vw,48px);padding-right:clamp(16px,2.5vw,48px)}
.apptop .wordmark,.apptop .topright{min-height:0}
@media (min-width:601px){ .apptop .wordmark .logo{height:40px} .apptop .wordmark,.apptop .topright{min-height:0} }
.apptop .tabs{padding:3px}
.apptop .tabs a,.apptop .tabs button{padding:4px 14px;font-size:.92rem}
.top.apptop .tabs a.hjoin{padding:4px 14px;font-size:.92rem}
.apptop .topright > .themebtn,.apptop summary .avatar,.apptop .topright .guide{width:32px;height:32px;min-width:0}
@media (max-width:600px){
  .apptop{padding:8px 16px;row-gap:6px}
  .apptop .wordmark .logo{height:32px}
  .apptop.scrolled .tabs{display:flex;grid-row:1;grid-column:2;justify-self:end;background:transparent;padding:0}
  .apptop.scrolled .tabs>:not(.hjoin){display:none}
  .apptop.scrolled .topright .scen{display:none} /* byggelinket: spilvælgeren gør plads til Deltag i spil, mens man ruller ned (ellers blev knappen klemt til "De") */
}
@media (max-width:1000px){ .apptop .tabs.solo{display:flex;grid-row:1;grid-column:2;justify-self:end;background:transparent;padding:0} } /* elevsider og stem.php: kun Deltag i spil, så den står på linje med logoet i stedet for alene i en grå bjælke */
.apptop .tabs.solo{background:transparent;padding:0} /* står Deltag i spil alene, er der ingen kasse om den (10. okt. 2026, Sørens ønske: kassen så ud som en ramme om den gule knap) */
@media print{ body{padding-top:0} .apptop{position:static} }
.libbar{top:var(--hdr,0px)}
/* forsiden: billedet starter under toppen, så der skal ikke længere være plads til den inde i billedet */
.fs-hero.fs-photo{padding-top:clamp(36px,6vh,64px)}
@media (max-width:760px){ .fs-hero.fs-photo{padding-top:40px} }
body.fs header.sitetop{padding-top:6px;padding-bottom:6px} /* forsiden har samme tynde top fra start (højden måles af header_js()) */

/* Filterrækken under Bibliotek glider op i toppen mellem logoet og menuen, når man scroller ned, og ned igen, når man scroller op (9. oktober 2026, Sørens ønske). Kun på brede skærme og kun, hvis der er plads (libStuck() i app.js sætter .docked og --lb-x/--lb-y/--lb-s); sortering og Flere filtre (.lbx) tones ud, og Favoritter viser kun stjerne og tal. Kun transform og opacity animeres (ingen bredder og ingen baggrundsstribe undervejs), så det glider uden at hakke; søgefeltet har fast bredde på brede skærme. .undocking holder striben væk, mens rækken glider ned igen */
@media (min-width:1001px){
  .libbar{transform-origin:0 0;transition:transform .45s cubic-bezier(.22,.8,.24,1)}
  .libbar .lbx{transition:opacity .2s,visibility .2s}
  .libbar.docked,.libbar.undocking{z-index:60;background-color:transparent;box-shadow:none;clip-path:none}
  .libbar.docked{transform:translate(var(--lb-x,0px),var(--lb-y,0px)) scale(var(--lb-s,1));pointer-events:none}
  .libbar.docked > :not(.lbx){pointer-events:auto}
  .libbar.docked .lbx,.libbar.undocking .lbx{opacity:0;visibility:hidden}
  .libbar.docked .libfavbtn .lbl{display:none}
}
@media (prefers-reduced-motion:reduce){ .libbar,.libbar .lbx{transition:none} }
@media (min-width:1240px){ .libbar{flex-wrap:nowrap} .libbar > :not(.libsearch){flex-shrink:0;white-space:nowrap} .libbar .libsearch{flex:0 1 240px;min-width:160px;max-width:240px} .libbar.docked .libsearch{flex:0 0 var(--lb-sw,240px)} } /* én linje på brede skærme, så rækken aldrig skifter højde, når den glider op (ellers hoppede siden, og rækken gik op og ned på skift); søgefeltets bredde fryses imens */

/* Toppen står uden linje og skygge forneden (9. oktober 2026, Sørens ønske) */
header.apptop,body.fs header.sitetop{box-shadow:none;border-bottom:0}
html.ingame header.apptop:not(.ondark){box-shadow:0 1px 0 var(--line)} /* under selve spillet en hårfin streg under toppen, så toppen og dilemmaet ikke flyder sammen (10. okt. 2026, Sørens ønske); ikke når toppen ligger mørk over et billede, og ikke på de andre sider */
#guideBtn[hidden]{display:none} /* ?-knappen er væk fra toppen (9. okt. 2026), men vejledningen åbnes stadig fra velkomstkortets Læs vejledningen */

/* Slideren under Bibliotek som forsidens store billede (9. oktober 2026, Sørens ønske): kant til kant, billedet over hele bredden, lidt højere, hvid tekst på mørk toning i venstre side (som forsidens toning D); altid mørk */
.slider{margin:0 calc(50% - 50vw) 26px;border:0;border-radius:0;background:#15181D;color:#FFFFFF}
.slide{display:block;position:relative;min-height:clamp(320px,44vh,440px);color:#FFFFFF}
.slide .simg,.slide.k-nu .simg,.slide.k-etik .simg{position:absolute;inset:0;min-height:0;background-color:#2A2F37;background-size:cover;background-position:center}
.slide .simg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,24,29,.96) 0%,rgba(21,24,29,.9) 32%,rgba(21,24,29,.4) 64%,rgba(21,24,29,.15) 100%)}
.slide .stext{position:relative;z-index:1;box-sizing:border-box;min-height:inherit;justify-content:center;gap:10px;max-width:calc(640px + max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px)));padding:40px 24px 64px max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px))}
.slide .skick{color:#F2C14E;font-size:.95rem}
.slide h3{color:#FFFFFF;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.05}
.slide p{color:#E6E8EB;font-size:clamp(1rem,1.4vw,1.15rem)}
.slide .meta{margin-top:6px;color:rgba(255,255,255,.72);font-size:.9rem}
.sctl{right:max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px));bottom:20px}
.sarrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);color:#FFFFFF;width:38px;height:38px} .sarrow:hover{border-color:#FFFFFF;background:rgba(255,255,255,.2)}
.sdot{background:rgba(255,255,255,.4)} .sdot[aria-pressed="true"]{background:#FFFFFF}
@media (max-width:760px){
  .slide{min-height:420px}
  .slide .simg::after{background:linear-gradient(180deg,rgba(21,24,29,.15) 0%,rgba(21,24,29,.55) 40%,rgba(21,24,29,.95) 75%)}
  .slide .stext{justify-content:flex-end;max-width:none;padding:24px 16px 64px}
  .sctl{left:16px;right:auto}
}

/* Forsidens store billede fylder igen hele skærmen under toppen, uanset skærmens størrelse (9. oktober 2026, Sørens ønske; afløser 74 % / højst 680 px fra version 2.48). Mobilen er uændret */
@media (min-width:761px){ .fs-hero.fs-photo{min-height:max(480px,calc(100vh - var(--hdr,54px)));min-height:max(480px,calc(100svh - var(--hdr,54px)))} }

/* Forsidens top som slider (9. oktober 2026, Sørens ønske): billederne toner over i hinanden, og små prikker i bunden viser, hvor mange spil der er, og hvilket man ser */
.fs-heroimg img{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.fs-heroimg img.on{opacity:1}
.fs-photo .fs-kicker,.fs-photo .fs-lead{transition:opacity .22s ease}
.fs-photo .fs-out{opacity:0}
.fs-dots{position:absolute;left:0;right:0;bottom:clamp(12px,2.4vh,24px);z-index:2;display:flex;justify-content:center;gap:2px}
.fs-dots button{width:22px;height:22px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.fs-dots button::after{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.42);transition:background .2s,transform .2s}
.fs-dots button:hover::after{background:rgba(255,255,255,.75)}
.fs-dots button[aria-current="true"]::after{background:#FFFFFF;transform:scale(1.25)}
.fs-dots button:focus-visible{outline:2px solid #FFFFFF;outline-offset:0}
@media (prefers-reduced-motion:reduce){ .fs-heroimg img,.fs-photo .fs-kicker,.fs-photo .fs-lead{transition:none} }

/* Forsidens top er mørk, mens den ligger over det store billede, så billedet står stærkere (9. oktober 2026, Sørens ønske; afløser forsøget med en altid mørk top). I lyst tema toner den hurtigt over til lys, når billedet er scrollet forbi; scriptet i forside.php sætter .ondark. Andre sider følger temaet */
body.fs header.apptop.ondark,html.herotop header.apptop.ondark{
  --paper:#15181C; --surface:#1E2227; --ink:#ECEDE9; --muted:#A2A8AE; --line:#353A41; --tint:#262B31;
  --stamp:#EC7B62; --stamp-soft:#3C241F; --stamp-ink:#EC7B62; --on-stamp:#1A1D22;
  --logo:#EC7B62; color-scheme:dark; color:var(--ink);
}
body.fs header.apptop.ondark.ondark,html.herotop header.apptop.ondark.ondark{background:color-mix(in srgb,#15181C 38%,transparent)} /* billedet ses gennem toppen (sløret) */
body.fs header.apptop.ondark .tabs.tabs:not(.solo),html.herotop header.apptop.ondark .tabs.tabs:not(.solo){background:#262B31}
body.fs header.apptop,body.fs header.apptop *{transition:background-color .25s ease,color .25s ease,border-color .25s ease,fill .25s ease}
@media (prefers-reduced-motion:reduce){ body.fs header.apptop,body.fs header.apptop *{transition:none} }
/* Forsidens billede går helt op under toppen fra start (9. oktober 2026, Sørens ønske), så toppen ligger oven på billedet i stedet for over en mørk stribe */
body.fs .fs-hero.fs-photo{margin-top:calc(-1 * var(--hdr,54px));padding-top:calc(var(--hdr,54px) + clamp(36px,6vh,64px))}
@media (min-width:761px){ body.fs .fs-hero.fs-photo{min-height:max(480px,100vh);min-height:max(480px,100svh)} }
@media (max-width:760px){ body.fs .fs-hero.fs-photo{padding-top:calc(var(--hdr,54px) + 40px)} }
@media (max-width:600px){ html body .top.apptop.apptop .tabs > *{white-space:nowrap;flex-shrink:0} html body .top.apptop.apptop .tabs a,html body .top.apptop.apptop .tabs a.hjoin{padding:4px 9px} } /* Log ind deler sig ikke over to linjer på smalle telefoner */
@media (max-width:380px){ html body .top.apptop.apptop .tabs a,html body .top.apptop.apptop .tabs a.hjoin{padding:4px 6px;font-size:.8rem} html body .top.apptop.apptop .tabs{gap:2px} }
/* Forsiden: logoet står i stedet for overskriften Sådan spiller I (9. oktober 2026, Sørens ønske), mindst lige så stort som overskriften; teksten står der stadig for skærmlæsere */
.fs-logoh{max-width:none;line-height:0}
.fs-logoh .logo{height:clamp(96px,13vw,180px);width:auto;display:block}
.fs-stepstop .fs-h2.fs-logoh{margin-bottom:6px}
.fs-stepstop .fs-sdgrid{align-items:start} /* trinene starter lige under logoet; eksemplet står ved siden af */
.fs-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Trinene under logoet uden tal, uden den røde streg og uden grå linjer (9. oktober 2026, Sørens ønske) */
.fs-stepstop li{grid-template-columns:minmax(0,1fr)}
.fs-stepstop li::before{display:none}
.fs-stepstop li span{grid-column:1}
.fs-stepstop li,.fs-stepstop li:first-child{border-top:0;padding:8px 0} /* heller ingen grå linjer mellem trinene (Sørens ønske) */
.fs-stepstop li:first-child{padding-top:4px}
@media (max-width:520px){ .fs-stepstop li{grid-template-columns:minmax(0,1fr)} }

/* Sådan spiller I som store ord (bud 3, Sørens valg 9. oktober 2026): Læs. Vælg. Begrund. Betal. helt store, hver i sin farve fra valgknapperne, med forklaringen ved siden af */
.fs-stepstop .fs-bigwords{--w1:var(--fA);--w2:var(--fB);--w3:var(--fC);--w4:var(--fD)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .fs-stepstop .fs-bigwords{--w1:var(--cA);--w2:var(--cB);--w3:var(--cC);--w4:var(--cD)} }
:root[data-theme="dark"] .fs-stepstop .fs-bigwords{--w1:var(--cA);--w2:var(--cB);--w3:var(--cC);--w4:var(--cD)}
.fs-stepstop .fs-bigwords li,.fs-stepstop .fs-bigwords li:first-child{display:grid;grid-template-columns:minmax(0,clamp(220px,24vw,330px)) minmax(0,1fr);align-items:center;column-gap:clamp(16px,2vw,28px);padding:clamp(2px,.5vw,6px) 0;border:0}
.fs-stepstop .fs-bigwords li b{font-size:clamp(2.8rem,5.4vw,4.75rem);line-height:1.02;font-weight:800;letter-spacing:-.04em;margin:0}
.fs-stepstop .fs-bigwords li:nth-child(1) b{color:var(--w1)} .fs-stepstop .fs-bigwords li:nth-child(2) b{color:var(--w2)} .fs-stepstop .fs-bigwords li:nth-child(3) b{color:var(--w3)} .fs-stepstop .fs-bigwords li:nth-child(4) b{color:var(--w4)}
.fs-stepstop .fs-bigwords li > span{grid-column:2;font-size:1.06rem;line-height:1.45}
.fs-stepstop .fs-sdgrid{align-items:start}
@media (max-width:600px){ .fs-stepstop .fs-bigwords li,.fs-stepstop .fs-bigwords li:first-child{grid-template-columns:minmax(0,1fr);padding:6px 0 10px} .fs-stepstop .fs-bigwords li > span{grid-column:1} }

/* Bibliotek uden overskrift og forklaring for lærere (9. oktober 2026, Sørens ønske); + Nyt spil i øverste højre hjørne af det store billede, eller alene til højre, når billedet ikke vises (fx når der er filtreret) */
.slider .snew{position:absolute;top:clamp(14px,2.4vw,24px);right:max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px));z-index:2}
.libhead-min{justify-content:flex-end;margin:0 0 12px}
.libhead-min .btn{margin-top:0}
@media (max-width:760px){ .slider .snew{right:16px;top:12px} .slider .snew .btn{padding:8px 14px;min-height:40px} }
.lib > h2.fs-vh:first-child + .slider{margin-top:-28px} /* billedet starter lige under toppen, når det står øverst (main har 28 px luft foroven) */

/* Mosaik (9. oktober 2026, Sørens valg, bud 1 i forslag/bibliotek-kort.html): fire kolonner, og i hver gruppe på seks kort er første og sjette dobbelt så brede, så det brede kort skifter side fra række til række. Mønsteret tæller de kort, der vises, så det holder, også når der er filtreret; en sidste, halvfuld række strækkes ud, så der ikke bliver huller. Bruges i Bibliotek (.cards.mosaic) og på forsiden (.fs-tiles.mosaic) */
.mosaic,.cards.mosaic.mosaic,.fs-trylist.fs-tiles.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(280px,23vw,340px);gap:14px}
.mosaic>*{min-width:0;min-height:0}
.mosaic>.cardw,.fs-trylist.fs-tiles.mosaic>.fs-flip{height:100%;aspect-ratio:auto}
.mosaic>:nth-child(6n+1),.mosaic>:nth-child(6n+6){grid-column:span 2}
.mosaic>:nth-child(6n+2):last-child,.mosaic>:nth-child(6n+4):nth-last-child(2),.mosaic>:nth-child(6n+5):last-child{grid-column:span 2}
.mosaic>:nth-child(6n+1):last-child,.mosaic>:nth-child(6n+4):last-child{grid-column:1 / -1}
.mosaic .card.pic,.mosaic .fs-pic,.fs-trylist.fs-tiles.mosaic .fs-pic{min-height:0;height:100%}
@media (max-width:860px){ .mosaic,.cards.mosaic.mosaic,.fs-trylist.fs-tiles.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(250px,64vw,330px);gap:10px} }
/* Kortene som i forslaget: lyse billeder uden mørk kasse, toning i bunden og fag · klassetrin over titlen; et tryk vender stadig kortet */
.card.pic .cimg::after,.card.pic .cimg[style]::after,.fs-trylist .fs-pic .fs-img::after,.fs-trylist .fs-pic .fs-img[style]::after{opacity:0}
@media (hover:hover){ .card.pic .cimg::after,.fs-trylist .fs-pic .fs-img[style]::after{opacity:0} }
.card.pic .cbody,.fs-trylist .fs-pic .fs-body{gap:4px;background:linear-gradient(180deg,rgba(10,12,16,0) 0%,rgba(10,12,16,.55) 45%,rgba(10,12,16,.85) 100%)}
.cmeta{display:block;color:#fff;font-size:.86rem;font-weight:600;opacity:.9;line-height:1.3}
/* Temaer som gule kort og Byg et spil som mørkt kort i mosaikken */
.cards.mosaic .card.tema{background:#F2C14E;color:#15181D;border:0;border-radius:18px;padding:clamp(18px,1.8vw,26px);justify-content:space-between;align-items:flex-start;text-align:left;box-shadow:0 14px 30px -20px rgba(0,0,0,.45)}
.cards.mosaic .card.tema .per{color:#15181D;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.76rem}
.cards.mosaic .card.tema h3{color:#15181D;font-size:clamp(1.45rem,2vw,1.9rem);line-height:1.1;margin:6px 0}
.cards.mosaic .card.tema p{color:#3B3420;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cards.mosaic .card.tema .meta{color:#15181D;font-weight:600;margin-top:auto}
.cards.mosaic .card.add,.cards.mosaic .card.add:hover{background:#15181C;color:#fff;border:0;border-radius:18px;padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;font-weight:400;box-shadow:0 14px 30px -20px rgba(0,0,0,.45)}
.card.add .aplus{color:#EC7B62;font-size:2.6rem;font-weight:700;line-height:1}
.card.add b{font-size:clamp(1.4rem,1.9vw,1.8rem);line-height:1.1;font-weight:800}
.card.add>span:last-child{opacity:.8;font-size:.95rem}
@media (hover:hover){ .cards.mosaic .card.tema,.cards.mosaic .card.add{transition:transform .25s ease} .cards.mosaic .card.tema:hover,.cards.mosaic .card.add:hover{transform:translateY(-6px)} }
.mosaic .cback p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;flex:0 1 auto} /* bagsiden i mosaikken: indledningen højst fire linjer, så den ikke skæres midt i en linje */
.mosaic .cback .tags{margin-top:auto}
.mosaic>:nth-child(6n+1) .cback p,.mosaic>:nth-child(6n+6) .cback p{-webkit-line-clamp:5}
.cards.mosaic .card.tema p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.cards.mosaic>:nth-child(6n+1).card.tema p,.cards.mosaic>:nth-child(6n+6).card.tema p{-webkit-line-clamp:4}
@media (max-width:600px){ .mosaic .cback p{-webkit-line-clamp:3;font-size:.86rem} .mosaic .cback h4{font-size:1.05rem} .cards.mosaic .card.tema p{display:none} .mosaic .cmeta{font-size:.76rem} .mosaic .card.pic h3{font-size:1.1rem} }
@media (max-width:600px){ .mosaic .cback .tags{display:none} }

/* Bagsiden i mosaikken (10. oktober 2026, Sørens ønske): skarp tekst uden toning i bunden, knapperne nederst i kortet, så der er plads til mere tekst; på de brede kort holdes teksten i læsbar bredde, og knapperne bliver ikke bredere end nødvendigt */
.mosaic .cback p{-webkit-mask-image:none;mask-image:none;-webkit-line-clamp:5;max-width:62ch;min-height:0}
.mosaic>:nth-child(6n+1) .cback p,.mosaic>:nth-child(6n+6) .cback p{-webkit-line-clamp:5}
.mosaic .cback h4{max-width:30ch}
.mosaic .cback .cback-act{margin-top:auto;max-width:420px;width:100%}
.mosaic .cback .tags{margin-top:auto}
.mosaic .cback .tags + .cback-act{margin-top:6px}
.cardw.flipped>.cback,.fs-trylist .fs-flip.flipped>.cback{transform:none} /* ingen 3D-flade, når kortet er vendt, så teksten står skarpt */
.mosaic .cback p{-webkit-line-clamp:6}
.mosaic>:is(:nth-child(6n+1),:nth-child(6n+6),:nth-child(6n+2):last-child,:nth-child(6n+4):last-child,:nth-child(6n+4):nth-last-child(2),:nth-child(6n+5):last-child) .cback-act .btn{flex:0 0 200px} /* brede kort: almindelige knapper, ikke en lang bjælke */
@media (max-width:860px){ .mosaic>* .cback-act .btn{flex:1 1 0} }
@media (max-width:600px){ .mosaic .cback p{-webkit-line-clamp:3} }
.fs-try>h2{margin-bottom:clamp(16px,2vw,24px)} /* lidt luft til kortene, nu hvor forklaringen er væk */
.mosaic .cback{gap:8px}
.mosaic .cback p{flex:0 1 auto;overflow:hidden}
.mosaic .cback:has(.tags) p{-webkit-line-clamp:5} /* Bibliotek har også "4 dilemmaer" på bagsiden, så der er plads til en linje mindre */
/* Eksemplet står på højde med logoet, logoet er lidt større og har lidt mere luft ned til ordene (10. oktober 2026, Sørens ønske). På brede skærme er sektionen ét gitter: logo og ord til venstre, eksemplet til højre fra toppen */
.fs-logoh .logo{height:clamp(104px,14.5vw,200px)}
.fs-stepstop .fs-h2.fs-logoh{margin-bottom:clamp(14px,2vw,26px)}
@media (min-width:861px){
  .fs-stepstop{display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:clamp(28px,5vw,64px);align-items:start}
  .fs-stepstop>.fs-h2.fs-logoh{grid-column:1;grid-row:1}
  .fs-stepstop>.fs-sdgrid{display:contents}
  .fs-stepstop .fs-bigwords{grid-column:1;grid-row:2}
  .fs-stepstop .fs-demo{grid-column:2;grid-row:1 / span 2;align-self:start;margin-top:clamp(8px,1.5vw,20px)}
}
.fs-logoh .logo{height:clamp(120px,17.5vw,250px)} /* endnu større (10. okt. 2026, Sørens ønske) */
.fs-stepstop .fs-h2.fs-logoh{margin-bottom:clamp(22px,3vw,42px)}

/* Startskærmen i spillet med billedet stort øverst (10. oktober 2026, Sørens ønske), som forsidens billede: titel, periode og indledning hvidt på mørk toning; krediteringen på en lille linje under */
.stage.hashero{padding-top:0;overflow:hidden}
.starthero{position:relative;margin:0 calc(-1 * clamp(18px,3vw,30px));min-height:clamp(320px,46vh,520px);display:flex;align-items:flex-end;background-color:#15181C;background-size:cover;background-position:center;color:#fff;border-radius:14px 14px 0 0}
.starthero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,24,29,.92) 0%,rgba(21,24,29,.75) 38%,rgba(21,24,29,.2) 75%,rgba(21,24,29,.05) 100%),linear-gradient(0deg,rgba(21,24,29,.75) 0%,rgba(21,24,29,0) 55%)}
.starthero .shtext{position:relative;z-index:1;padding:clamp(22px,3.4vw,44px) clamp(18px,3vw,30px);max-width:760px}
.starthero .when{color:#F2C14E}
.starthero h2{color:#fff;font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.04;letter-spacing:-.03em;margin:4px 0 10px}
.starthero .prose{color:#E6E8EB;font-size:clamp(1rem,1.4vw,1.2rem);margin:0}
.starthero .h2fav .favstart,.starthero .h2fav button{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(0,0,0,.25)}
.shcredit{margin:8px 0 18px;font-size:.8rem;color:var(--muted)}
.shcredit a{color:inherit}
@media (max-width:600px){ .starthero{min-height:420px} .starthero::before{background:linear-gradient(0deg,rgba(21,24,29,.95) 0%,rgba(21,24,29,.75) 45%,rgba(21,24,29,.1) 100%)} .starthero .prose{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden} }
.tavle .starthero h2{font-size:clamp(2.6rem,5vw,4.4rem)}

/* Top A (10. oktober 2026, Sørens valg): spillets linje ligger i toppen, mens et dilemma spilles (dockTopline() i app.js sætter html.tldock og --tl-l/--tl-w/--tl-top); prøvespillets besked er én lille linje, og Opret gratis konto står i toppen */
html.tldock .stage .topline{position:fixed;z-index:55;left:var(--tl-l);width:var(--tl-w);top:var(--tl-top);transform:translateY(-50%);margin:0;padding:0;border:0;background:transparent;flex-wrap:nowrap}
html.tldock .stage .topline .tlgame{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:30%}
html.tldock .stage .topline .tlsteps{flex-wrap:nowrap;white-space:nowrap}
html.tldock .stage .topline .tlact{margin-left:auto;flex:none}
.demobar.thin{display:block;margin:6px 0 0;padding:0;background:none;border:0;font-size:.88rem;color:var(--muted)}
.demobar.thin span{min-width:0}
.demobar.thin a{color:inherit;text-decoration:underline;font-weight:600;margin-left:4px}
.apptop .demoreg{white-space:nowrap;margin-right:6px}
@media (max-width:600px){ .apptop .demoreg{display:none} .demobar.thin{margin:4px 0 0} }

/* Dilemmaskærmen, bud 3 "Store bogstaver" (10. oktober 2026, Sørens valg, forslag/dilemma-skaerm.html): ingen ramme, stor titel, kilden som en gul seddel ved siden af situationen, og valgene som høje kort med kæmpe A, B og C og hænderne nederst */
.stage.dil{background:transparent;border:0;box-shadow:none;padding:clamp(4px,1vw,10px) 0 0}
.stage.dil .split{gap:clamp(28px,4vw,56px);align-items:start}
.stage.dil h2{font-size:clamp(2.4rem,5.6vw,5.2rem);line-height:1;letter-spacing:-.035em;margin:4px 0 14px;font-weight:800}
.stage.dil .prose{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.55;max-width:62ch}
.stage.dil .when{font-size:1.05rem;font-weight:700}
.stage.dil .kilde{background:#F7DE7E;color:#2B2410;border:0;border-radius:6px 6px 18px 6px;transform:rotate(1.2deg);box-shadow:0 2px 3px rgba(0,0,0,.08),0 22px 34px -20px rgba(0,0,0,.45)}
.stage.dil .kilde .khead{background:transparent;color:#6B4E1E;border:0;padding:16px 20px 0;letter-spacing:.06em}
.stage.dil .kilde .kbody{padding:6px 20px 18px}
.stage.dil .kilde .who{color:#6B4E1E}
.stage.dil .kilde h3,.stage.dil .kilde .ktext{color:#2B2410}
.stage.dil .kilde .kq{color:#2B2410;border-top:1px dashed rgba(107,78,30,.45)}
.stage.dil .kilde .kq::before{color:#6B4E1E}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .stage.dil .kilde{background:#E9CF6E} }
:root[data-theme="dark"] .stage.dil .kilde{background:#E9CF6E}
.stage.dil .decide{margin-top:clamp(22px,3vw,40px);border-top:0;padding-top:0}
.stage.dil .question{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* "Hvad gør I?" står kun for skærmlæsere; de store bogstaver siger det selv */
.stage.dil .choices.wide{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(12px,1.4vw,18px)}
.stage.dil .choices.wide .choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;min-height:clamp(240px,24vw,320px);padding:clamp(18px,2vw,26px) clamp(18px,2vw,26px) 0;border-radius:20px;overflow:hidden;text-align:left}
.stage.dil .choices.wide .choice .letter{width:auto;height:auto;background:none;border:0;box-shadow:none;color:#fff;font-family:var(--sans);font-weight:800;font-size:clamp(4.4rem,8vw,7.2rem);line-height:.85;letter-spacing:-.05em;border-radius:0;display:block}
.stage.dil .choices.wide .choice .txt{font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:700;line-height:1.35;flex:1}
.stage.dil .choices.wide .choice:not(:has(.tally)){padding-bottom:clamp(18px,2vw,26px)}
.stage.dil .choices.wide .choice>.tally{align-self:stretch;margin:0 calc(-1 * clamp(18px,2vw,26px));width:auto}
.stage.dil .actions .btn.stamp{border-radius:999px;padding:14px 28px;font-size:1.05rem}
.tavle .stage.dil h2{font-size:clamp(2.8rem,6vw,5.8rem)}
@media (max-width:600px){ .stage.dil .choices.wide .choice{min-height:0;flex-direction:row;align-items:center;padding:14px 16px 0;flex-wrap:wrap} .stage.dil .choices.wide .choice .letter{font-size:3.2rem;margin-right:6px} .stage.dil .choices.wide .choice .txt{flex:1 1 60%;padding-bottom:12px} .stage.dil .choices.wide .choice>.tally{flex-basis:100%;margin:0 -16px} .stage.dil .kilde{transform:none} }
.stage.dil h2{font-size:clamp(2.2rem,4.3vw,4.1rem);text-wrap:balance}
.stage.dil .choices.wide .choice{min-height:clamp(200px,19vw,260px)}
.stage.dil .choices.wide .choice .letter{font-size:clamp(3.6rem,6vw,5.6rem)}
.stage.dil .meters{background:transparent;border-color:var(--line)}
@media (max-width:600px){ header.apptop .topright a.demoreg.btn{display:none} .stage.dil h2{font-size:2.1rem} }
.stage .choice[data-p="plus"]{cursor:pointer;user-select:none;-webkit-user-select:none;transition:transform .12s ease,filter .12s ease} /* hele kortet tæller én hånd op */
.stage .choice[data-p="plus"]:active{transform:scale(.985)}
@media (hover:hover){ .stage .choice[data-p="plus"]:hover{filter:brightness(1.06)} }

/* Toppen under spillet ryddet op (10. oktober 2026, Sørens ønske): ingen prøvespil-linje (Prøv et andet spil og beskeden står på startskærmen), spillets navn står over dilemmaet i stedet for i toppen, knappen hedder Skærmtilstand og har samme størrelse som de andre knapper i toppen, og Læs op står ved siden af Vis kilden */
html.tldock .stage .topline .tlgame{display:none}
html.tldock .stage .topline .bigbtn{height:auto;min-height:0;padding:4px 14px;font-size:.92rem;font-weight:700;border-radius:999px;line-height:1.5}
.stage .when .wgame{color:var(--muted);font-weight:600}
.stage .when .wsep{color:var(--muted)}
.sitacts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 4px}
.sitacts:empty{display:none}
.sitacts .kfold{margin:0}
.demonote{margin:10px 0 0}
.sitacts .speak{min-height:44px;padding:8px 16px;font-size:1rem;font-weight:700;border-radius:10px} /* samme størrelse som Vis kilden */
html.tldock .stage .topline .bigbtn{box-sizing:border-box;height:36px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:800} /* præcis samme højde og skrift som Deltag i spil */
.sitacts .speak,.sitacts .speakstop{box-sizing:border-box;margin:0;height:40px;min-height:0;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:600;line-height:1.2;border-radius:8px} /* på linje med og samme størrelse som Vis kilden */
.sitacts{align-items:flex-start} .sitacts .kfold summary{box-sizing:border-box;height:40px;display:inline-flex}
header.apptop .topright a.demoreg.btn{box-sizing:border-box;height:36px;min-height:0;padding:0 16px;font-size:.92rem;font-weight:800;border-radius:999px;display:inline-flex;align-items:center} /* samme højde som Deltag i spil og Skærmtilstand */
/* Startskærmens billede (10. okt. 2026, Sørens ønske): mørkere bag teksten, så den står roligt; fotokreditering lille i billedets nederste højre hjørne */
.starthero::before{background:linear-gradient(90deg,rgba(15,17,21,.97) 0%,rgba(15,17,21,.93) 42%,rgba(15,17,21,.6) 66%,rgba(15,17,21,.25) 100%),linear-gradient(0deg,rgba(15,17,21,.6) 0%,rgba(15,17,21,0) 45%)}
.starthero .shtext{max-width:700px}
.starthero .shcredit{position:absolute;right:clamp(14px,2vw,24px);bottom:10px;z-index:1;margin:0;max-width:45%;text-align:right;font-size:.72rem;color:rgba(255,255,255,.6)}
.stage.hashero .starthero{margin-bottom:22px}
@media (max-width:600px){ .starthero::before{background:linear-gradient(0deg,rgba(15,17,21,.97) 0%,rgba(15,17,21,.88) 55%,rgba(15,17,21,.3) 100%)} .starthero .shcredit{position:static;max-width:none;text-align:left;padding:0 18px 12px} }

/* Startskærmen i fuld bredde for alle spil (10. oktober 2026, Sørens valg): billedet går fra kant til kant og op under toppen som på forsiden; toppen er mørk, mens den ligger over billedet (html.herotop + .ondark, heroHeader() i app.js). Spil uden eget billede henter det fra Wikipedia; spil helt uden billede får en mørk flade */
.stage.hashero{background:transparent;border:0;box-shadow:none;padding-left:0;padding-right:0;overflow:visible}
.stage.hashero .starthero{margin:calc(-1 * var(--hdr,54px) - 28px) calc(50% - 50vw) 26px;border-radius:0;min-height:min(72vh,640px);padding-top:var(--hdr,54px);background-color:#1B1F25}
.stage.hashero .starthero .shtext{padding-left:max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px));padding-right:max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px))}
.stage.hashero .starthero .shcredit{right:max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px))}
.stage.hashero .starthero.noimg{background-image:radial-gradient(120% 90% at 85% 20%,color-mix(in srgb,var(--kc,#D1472C) 55%,#1B1F25) 0%,#1B1F25 70%)}
.stage.hashero .starthero.k-nu{--kc:#2563C8} .stage.hashero .starthero.k-etik{--kc:#7044C2}
body:has(#verifyBar:not(:empty)) .stage.hashero .starthero{margin-top:-28px;padding-top:0}
.tavle .stage.hashero .starthero{margin-left:calc(-1 * clamp(16px,2.5vw,48px));margin-right:calc(-1 * clamp(16px,2.5vw,48px))}
@media (max-width:600px){ .stage.hashero .starthero{min-height:520px} .stage.hashero .starthero .shtext{padding-left:16px;padding-right:16px} }
html.herotop header.apptop,html.herotop header.apptop *{transition:background-color .25s ease,color .25s ease,border-color .25s ease,fill .25s ease}
.starthero .h2fav{display:flex;align-items:flex-start;gap:16px;flex-wrap:nowrap}
.starthero .h2fav h2{flex:1;min-width:0}
.starthero .h2fav>button,.starthero .h2fav>.favstart{flex:none;margin-top:clamp(10px,1.4vw,18px)}
@media (max-width:600px){ .stage.hashero .starthero{flex-direction:column;justify-content:flex-end;align-items:stretch} .stage.hashero .starthero .shcredit{position:static;max-width:none;text-align:left;padding:0 16px 12px;font-size:.7rem} .starthero .h2fav{flex-wrap:wrap} }
.starthero .h2fav{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:12px}
.starthero .h2fav h2{flex:none;width:100%}
.starthero .h2fav>button,.starthero .h2fav>.favstart{margin-top:0}
.starthero h2{overflow-wrap:break-word;hyphens:manual}

/* Rettelser efter gennemgangen 10. oktober 2026 */
.apptop .saved{right:max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px));bottom:-22px} /* "Gemt" står under toppen inden for siden, ikke ude ved skærmkanten */
.issues .ok{display:block;background:none;padding:0;margin:0;border-radius:0} /* mærket "Spillet er klar …" i værkstedets sidebjælke flød ud */
.side .dot{flex:none;padding:0;margin:0;width:9px;height:9px;border-radius:50%} /* den generelle .ok-boks gav prikkerne polstring, så de blev til store grønne ovaler */
.mosaic>.card.add,.mosaic>.card.add:last-child{grid-column:auto} /* Byg et … spil bliver aldrig til en kæmpe flade, heller ikke når det står alene */
.field input[type=email],.field input[type=password],.field input[type=search]{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 12px;width:100%;color:var(--ink);font:inherit}
.field input[readonly]{background:var(--tint);color:var(--muted)}
.stage.dil .topline .tlgame{display:none} /* spillets navn står over dilemmaet; ikke to gange på mobil */
.kindgrp .kh{border-top:0!important;padding-top:18px} /* ingen farvet streg over grupperne i Bibliotek, kun luft og overskrift, som på forsiden (10. okt. 2026, Sørens valg) */

/* Skærmen efter valget, bud 2 "Kortene bliver stående" (10. okt. 2026, Sørens valg): kortene fra dilemmaet bliver stående, det valgte er bredere med ring og mærke, de andre er blege; under: det, der skete, til venstre og målerne (tydelige) og facit som gul seddel til højre */
.stage.res h2{font-size:clamp(2rem,3.6vw,3.3rem);margin:4px 0 22px}
.rcards{display:grid;gap:clamp(12px,1.4vw,18px);align-items:stretch;margin:0 0 clamp(28px,3vw,42px)}
.rcard{--cf:var(--fA);--rp:clamp(18px,2vw,24px);position:relative;background:var(--cf);color:#fff;border-radius:20px;padding:var(--rp) var(--rp) 0;display:flex;flex-direction:column;gap:10px;min-height:clamp(190px,17vw,240px);overflow:hidden;min-width:0}
.rcard.o1{--cf:var(--fB)} .rcard.o2{--cf:var(--fC)} .rcard.o3{--cf:var(--fD)}
.rcard .letter{font-weight:800;font-size:clamp(3.4rem,5.4vw,5rem);line-height:.85;letter-spacing:-.05em}
.rcard .txt{font-weight:700;font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.35;flex:1;padding-bottom:var(--rp)}
.rcard.win .txt{font-size:clamp(1.12rem,1.6vw,1.45rem)}
.rcard.dim{filter:saturate(.3);opacity:.5}
.rcard.win{box-shadow:0 26px 40px -24px rgba(0,0,0,.5);overflow:visible} /* ingen ekstra ring om det valgte kort (10. okt. 2026, Sørens ønske: det roder); mærket Klassens valg og de falmede andre kort viser valget */
.rcard.win .rtally{border-radius:0 0 20px 20px}
.rbadge{position:absolute;top:16px;right:16px;background:#fff;color:#15181D;border-radius:999px;padding:6px 14px;font-weight:800;font-size:.95rem}
.rtally{display:flex;align-items:center;gap:12px;margin:0 calc(-1 * var(--rp));padding:10px var(--rp);background:rgba(0,0,0,.18);font-weight:700;font-size:.95rem}
.rtally i{flex:1;height:10px;border-radius:5px;background:rgba(255,255,255,.25);overflow:hidden;display:block}
.rtally i b{display:block;height:100%;background:#fff;border-radius:5px}
.rtally strong{font-size:1.45rem;min-width:1.4em;text-align:right}
.rgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:clamp(28px,4vw,56px);align-items:start}
.rlbl{font-size:.8rem;letter-spacing:.07em;font-weight:800;color:var(--muted);text-transform:uppercase;margin:0 0 8px}
.rlead{font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.45;font-weight:600;margin:0 0 14px;max-width:46ch}
.stage.res .land{font-size:1.08rem;line-height:1.55}
.stage.res .actions{margin-top:26px;flex-wrap:wrap;align-items:center}
.stage.res .actions .speak{margin:0}
.speak.speakicon{box-sizing:border-box;flex:none;width:42px;height:42px;min-height:0;padding:0;margin:0;justify-content:center;border-radius:50%;font-size:1.05rem;line-height:1;color:var(--ink)} /* Læs op som rund knap ved teksten, den læser op */
/* Læs op står lige til højre for datoen øverst på dilemmaskærmen, efter valget og på slutskærmen (10. okt. 2026, Sørens ønske) */
.whenrow{display:flex;align-items:center;gap:10px;margin:0 0 20px;min-width:0} /* luft ned til den store overskrift */
.whenrow .when{display:block;margin:0;min-width:0}
.whenrow + .h2row,.whenrow + .split > div > .h2row:first-child{margin-top:0} .stage.dil .whenrow + .h2row h2,.stage.dil .whenrow + .split > div > .h2row:first-child h2{margin-top:0} /* samme afstand (20 px) på dilemmaskærmen og efter valget */
.whenrow .speak.speakicon{width:34px;height:34px;font-size:.9rem}
.starthero .whenrow .speak.speakicon{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(0,0,0,.18)}
.starthero .whenrow .speak.speakicon:hover,.starthero .whenrow .speak.speakicon[aria-pressed="true"]{border-color:#fff}
.stage.res .meters.result.big{grid-template-columns:1fr;gap:16px;background:var(--surface);border:0;border-radius:18px;padding:18px 20px;margin:0 0 24px;box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 24px -18px rgba(16,24,40,.3)}
.stage.res .meters.big .lbl{font-size:1.08rem;font-weight:700;margin-bottom:8px;align-items:center}
.stage.res .meters.big .lbl>span:first-child{color:var(--ink)}
.stage.res .meters.big .track{height:22px}
.stage.res .meters.big .meter.same{opacity:1}
.stage.res .meters.big .meter.same .track{opacity:.55}
.stage.res .meters.big .nochg{font-size:.92rem;font-weight:700;color:var(--muted);background:var(--tint);border-radius:999px;padding:3px 11px}
.stage.res .meters.big .delta{font-size:1.02rem;padding:3px 12px}
.stage.res .rfact{background:#F7DE7E;color:#2B2410;border:0;border-radius:12px;padding:14px 20px;font-weight:800;font-size:1.05rem;display:inline-flex;gap:10px;align-items:center;box-shadow:0 14px 26px -18px rgba(0,0,0,.45)}
.stage.res .rfact svg{width:20px;height:20px;flex:none}
.stage.res .rfact:disabled{opacity:.55;box-shadow:none}
.stage.res .panel.fact{background:#F7DE7E;color:#2B2410;border:0;border-radius:6px 6px 18px 6px;transform:rotate(1.2deg);box-shadow:0 2px 3px rgba(0,0,0,.08),0 22px 34px -20px rgba(0,0,0,.45);padding:18px 22px;margin:4px 0 0}
.stage.res .panel.fact h3{font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:#6B4E1E;margin:0 0 10px}
.stage.res .panel.fact .prose{color:#2B2410;font-size:1.02rem;line-height:1.5}
.stage.res .panel.fact .note,.stage.res .panel.fact .src{color:#6B4E1E}
.stage.res .panel.fact a{color:#2B2410}
.stage.res .factpick{background:transparent;border:0;padding:0;align-items:center}
.stage.res .factpick .letter{font-family:var(--sans);font-weight:800;font-size:1.6rem;color:#fff;background:var(--fA);border-radius:12px;width:50px;height:50px;display:grid;place-items:center;flex:none;min-width:0}
.stage.res .factpick .letter.l1{background:var(--fB)} .stage.res .factpick .letter.l2{background:var(--fC)} .stage.res .factpick .letter.l3{background:var(--fD)}
.stage.res .factpick b{font-size:1.1rem}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .stage.res .rfact,:root:not([data-theme="light"]) .stage.res .panel.fact{background:#E9CF6E} }
:root[data-theme="dark"] .stage.res .rfact,:root[data-theme="dark"] .stage.res .panel.fact{background:#E9CF6E}
@media (max-width:860px){ .rgrid{grid-template-columns:1fr} }
@media (max-width:600px){
  .rcards{grid-template-columns:1fr!important;gap:10px}
  .rcard{--rp:16px;min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px;padding-top:12px}
  .rcard .letter{font-size:2.6rem}
  .rcard .txt,.rcard.win .txt{flex:1 1 60%;padding-bottom:12px;font-size:1rem}
  .rcard .rtally{flex:0 0 calc(100% + 32px);padding:8px 16px}
  .rbadge{position:static;order:-1;flex-basis:100%;background:transparent;color:#fff;padding:0;font-size:.85rem}
  .stage.res .panel.fact{transform:none}
}
@media (prefers-reduced-motion: reduce){ .stage.res .panel.fact{transform:none} }
:root .stage.dil,:root .stage.hashero{box-shadow:none!important} /* lyst tema gav .stage en skygge, så en svag kasse kunne ses bag dilemmaskærmen og skærmen efter valget */
@media (max-width:860px){ .rmain{display:contents} .rgrid{gap:0} .rgrid>*,.rmain>*{order:0} .rside{order:1;margin-top:26px} .rmain>.actions{order:2} } /* på mobil: målerne og facit før Næste dilemma */

/* Byggeren i det nye design, bud 2 (10. okt. 2026, Sørens valg): ingen hvid ramme om felterne, trinene som streger med navn under (som i spillet), farvede bogstaver ved valgene, og forhåndsvisningen er en lille udgave af startskærmen og den nye dilemmaskærm med målernes værdier; det felt, man skriver i, lyser op (data-pv, pvMark() i app.js) */
.wiz{grid-template-columns:minmax(0,1fr) minmax(320px,470px);gap:clamp(24px,3.5vw,52px)}
.wiz .ed.wmain{background:transparent;border:0;box-shadow:none!important;padding:0}
.wmain h2{font-size:clamp(1.9rem,3.4vw,2.8rem);letter-spacing:-.03em;line-height:1.08;margin:0 0 8px}
.wmain .lead{font-size:1.08rem;max-width:62ch}
.wsteps.wbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:14px;margin:0 0 26px;padding:0;counter-reset:none}
.wsteps.wbar li{padding:0;counter-increment:none;font-size:inherit}
.wsteps.wbar li::before{content:none}
.wsteps.wbar button{display:grid;gap:7px;width:100%;border:0;background:none;border-radius:0;padding:4px 0;text-align:left;font-size:.85rem;font-weight:700;color:var(--muted);line-height:1.25;cursor:pointer}
.wsteps.wbar button i{display:block;height:6px;border-radius:3px;background:var(--line)}
.wsteps.wbar button.done{background:none;color:var(--muted)} .wsteps.wbar button.done i{background:color-mix(in srgb,var(--ink) 45%,var(--paper))}
.wsteps.wbar button.cur{background:none;color:var(--ink)} .wsteps.wbar button.cur i{background:var(--ink)}
.wsteps.wbar button:disabled{opacity:.7;cursor:default}
.wsteps.wbar button:not(:disabled):not(.cur):hover span{color:var(--ink)}
.wiz .field input,.wiz .field textarea,.wiz .field select{box-sizing:border-box;max-width:100%}
.wiz .row{flex-wrap:wrap} .wiz .row>.field{min-width:min(100%,220px)}
.wchoice .letter{font-family:var(--sans);font-weight:800;font-size:1.4rem;color:#fff;background:var(--fA);border-radius:12px;width:46px;height:46px;display:grid;place-items:center;flex:none;min-width:0}
.wchoice .letter.l1{background:var(--fB)} .wchoice .letter.l2{background:var(--fC)} .wchoice .letter.l3{background:var(--fD)}
.wiz details.optfold summary .letter{font-family:var(--sans);font-weight:800;font-size:1.15rem;color:#fff;background:var(--fA);border-radius:10px;width:38px;height:38px;display:grid;place-items:center;flex:none;min-width:0}
.wiz details.optfold summary .letter.l1{background:var(--fB)} .wiz details.optfold summary .letter.l2{background:var(--fC)} .wiz details.optfold summary .letter.l3{background:var(--fD)}
.wiz .effs{gap:10px 18px}
.wiz .eff{font-size:.98rem;font-weight:600}
.wiz .seg button{padding:6px 13px;font-size:.95rem;font-weight:700}
.wnav .btn.stamp{border-radius:999px;padding:12px 24px}
.wside{top:calc(var(--hdr,54px) + 16px)}
.wprev{background:transparent;border:0;padding:0;gap:10px}
.wprev .wkick{font-weight:800;font-size:.78rem;letter-spacing:.07em;color:var(--muted)}
.pvhero{position:relative;border-radius:18px;overflow:hidden;background:#1B1F25 center 35%/cover;color:#fff;padding:90px 20px 20px;display:flex;flex-direction:column;gap:6px;min-height:240px;justify-content:flex-end}
.pvhero::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,17,21,.95),rgba(15,17,21,.55) 60%,rgba(15,17,21,.2))}
.pvhero>*{position:relative}
.pvhero.noimg{background-image:radial-gradient(120% 90% at 85% 20%,color-mix(in srgb,#D1472C 55%,#1B1F25) 0%,#1B1F25 70%)}
.pvhero.noimg.k-nu{background-image:radial-gradient(120% 90% at 85% 20%,color-mix(in srgb,#2563C8 55%,#1B1F25) 0%,#1B1F25 70%)} .pvhero.noimg.k-etik{background-image:radial-gradient(120% 90% at 85% 20%,color-mix(in srgb,#7044C2 55%,#1B1F25) 0%,#1B1F25 70%)}
.pvhero .pvper{color:#F2C14E;font-weight:700;font-size:.85rem}
.pvhero strong{font-size:1.75rem;line-height:1.05;letter-spacing:-.03em;font-weight:800}
.pvhero p{margin:0;font-size:.92rem;line-height:1.45;color:#E6E8EB;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.pvmeters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.85rem}
.pvmeters span{font-weight:800;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.pvmeters i{font-style:normal;font-weight:700;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.pvdil{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:8px;box-shadow:0 20px 40px -28px rgba(0,0,0,.45)}
.pvdil .when{font-size:.82rem;font-weight:700;color:var(--stamp-ink)} .pvdil .when .wgame{color:var(--muted);font-weight:600}
.pvdil strong{font-size:1.6rem;line-height:1.05;letter-spacing:-.03em;font-weight:800}
.pvdil .prose{font-size:.9rem;line-height:1.45;margin:0;color:var(--muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pvnote{background:#F7DE7E;color:#2B2410;border-radius:4px 4px 12px 4px;transform:rotate(1deg);padding:10px 12px;font-size:.82rem;line-height:1.4;box-shadow:0 10px 18px -12px rgba(0,0,0,.45)}
.pvnote small{display:block;font-weight:800;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:#6B4E1E}
.pvcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:4px}
.pvcard{--cf:var(--fA);background:var(--cf);color:#fff;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-height:110px;min-width:0}
.pvcard.o1{--cf:var(--fB)} .pvcard.o2{--cf:var(--fC)} .pvcard.o3{--cf:var(--fD)}
.pvcard>b{font-size:2.2rem;line-height:.9;letter-spacing:-.05em;font-weight:800}
.pvcard .pvt{font-size:.82rem;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.pvcard.dash{background:transparent;color:var(--muted);border:2px dashed var(--line)}
.pvcards.rows{grid-template-columns:1fr}
.pvcards.rows .pvcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;min-height:0;align-items:start}
.pvcards.rows .pvcard>b{grid-row:span 3;font-size:2rem}
.pvcard .pvc{font-size:.8rem;line-height:1.4;color:rgba(255,255,255,.88);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pveff{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.pveff i{font-style:normal;font-size:.78rem;font-weight:800;border-radius:999px;padding:2px 9px;background:#fff}
.pveff i.u{color:#145F3C} .pveff i.d{color:#9A2F1B} .pveff i.s{background:rgba(255,255,255,.2);color:#fff;font-weight:700}
.wprev [data-pv]{transition:box-shadow .2s ease,background-color .2s ease;border-radius:6px}
.wprev .pvon{box-shadow:0 0 0 3px #2563C8,0 0 0 7px rgba(37,99,200,.18)}
.pvhero .pvon{box-shadow:0 0 0 3px #6FB1E3}
.wtip{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 0 0}
@media (max-width:900px){ .wiz{grid-template-columns:minmax(0,1fr)} .wsteps.wbar{grid-template-columns:repeat(3,1fr)} }
@media (prefers-reduced-motion: reduce){ .pvnote{transform:none} .wprev [data-pv]{transition:none} }
.wiz .field .seg,.ed .field .seg{display:inline-flex;width:auto;align-self:flex-start;justify-self:start;font-weight:600;margin-top:4px}
.wiz .field .seg button,.ed .field .seg button{font-size:1.1rem;padding:6px 16px}
.wdils li{border:0;border-radius:14px;padding:14px 16px;box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 24px -20px rgba(16,24,40,.3)}
.wdils .wdt b{font-size:1.05rem}
.wdils .ok{display:inline;background:none;padding:0;margin:0;border-radius:0;font-size:.88rem;font-weight:700;color:var(--pos)} /* den generelle .ok-boks gav "✓ klar" en grå kasse */
.wdils .btn.small{border-radius:999px;padding:6px 16px}
.wdone .btn{border-radius:999px}

/* Tilvalg til et dilemma, bud 2 (10. okt. 2026, Sørens valg): + knapper under de nødvendige felter; det, der er tilføjet, står som en åben boks med Fjern; kilden er gul som sedlen i spillet */
.xtras{display:grid;gap:14px;margin-top:22px}
.xchips{display:flex;flex-wrap:wrap;gap:8px}
.xchip{display:inline-flex;align-items:center;gap:6px;border:1.5px dashed color-mix(in srgb,var(--ink) 30%,var(--paper));border-radius:999px;padding:8px 15px;font:inherit;font-weight:700;font-size:.95rem;color:var(--muted);background:transparent;cursor:pointer}
.xchip:hover{color:var(--ink);border-color:var(--ink)}
.xbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 18px 6px}
.xbox.x-card{background:#FBF1D6;border-color:#E8D39C;color:#2B2410}
.xbox.x-card .field>span,.xbox.x-card .field small{color:#5B4618}
.xhead{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.xhead>span{flex:1;font-size:.8rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.xbox.x-card .xhead>span{color:#7A5A12}
.xbox.x-card .xhead .btn{color:#5B4618}
.xbox .checklist{margin:0 0 10px;border:0;padding:0;background:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .xbox.x-card{background:#3A321C;border-color:#5A4E33;color:#ECE3C8} :root:not([data-theme="light"]) .xbox.x-card .field>span,:root:not([data-theme="light"]) .xbox.x-card .field small,:root:not([data-theme="light"]) .xbox.x-card .xhead>span,:root:not([data-theme="light"]) .xbox.x-card .xhead .btn{color:#E9CF6E} }
:root[data-theme="dark"] .xbox.x-card{background:#3A321C;border-color:#5A4E33;color:#ECE3C8}
:root[data-theme="dark"] .xbox.x-card .field>span,:root[data-theme="dark"] .xbox.x-card .field small,:root[data-theme="dark"] .xbox.x-card .xhead>span,:root[data-theme="dark"] .xbox.x-card .xhead .btn{color:#E9CF6E}
/* Efter valget, rettet (10. okt. 2026, Sørens ønske): målerne som tydelige mærker under det, der skete; facit sløret, til man trykker */
.rchips{display:flex;flex-wrap:nowrap;gap:8px;margin:20px 0 0;--rcf:1;min-width:0;max-width:100%}
.rchip{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:calc(1.05rem * var(--rcf));border-radius:999px;padding:calc(8px * var(--rcf)) calc(16px * var(--rcf));line-height:1.2;white-space:nowrap;flex:none}
/* Målerne står på én linje; kun fire mærker må stå to og to (10. okt. 2026, Sørens regel: aldrig 3 + 1). fitChips() i app.js vælger og gør skriften lidt mindre, hvis det er nødvendigt */
.rchips.rtwo{display:grid;grid-template-columns:repeat(2,max-content);justify-content:start}
.rchips.rtwo .rchip{justify-content:flex-start}
.rchips.rwrap{display:grid;grid-template-columns:repeat(var(--rcn,2),minmax(0,1fr))}
.rchips.rwrap .rchip{white-space:normal;min-width:0;border-radius:16px}
.rchip.u{background:var(--pos);color:#fff} .rchip.d{background:var(--neg);color:#fff}
.rchip.s{background:var(--tint);color:var(--muted);font-weight:700}
.stage.res .rgrid{align-items:start}
#factBox.veil{position:relative;display:grid}
#factBox.veil>*{grid-area:1/1}
#factBox.veil .veiled{filter:blur(7px);opacity:.85;pointer-events:none;user-select:none}
#factBox.veil .rfact{align-self:center;justify-self:center;z-index:1;box-shadow:0 18px 30px -14px rgba(0,0,0,.5)}
@media (prefers-reduced-motion: no-preference){ #factBox .panel.fact{animation:factin .35s ease-out} @keyframes factin{from{filter:blur(7px);opacity:.85}to{filter:none;opacity:1}} }
#factBox.veil .veiled{max-height:240px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)} /* den slørede seddel fylder ikke hele siden, før den vises */

/* Slutskærmen, bud 1 (10. okt. 2026, Sørens valg): billedet øverst, målerne med farvede forskelle (rødt = hvor jeres vej og virkeligheden skilles), tabellen over valgene, Til samtalen og derefter quizzen */
.stage.hashero .starthero.endhero{min-height:min(52vh,470px)}
.endhero .estat{margin:14px 0 0;font-size:clamp(1.1rem,1.6vw,1.35rem);color:#E6E8EB}
.endhero .estat b{color:#F2C14E;font-size:1.4em;margin-right:4px}
.endstage .esec{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.025em;margin:34px 0 14px}
.endstage .emnote{margin:12px 0 0} .endstage .esec+.emnote{margin:-6px 0 14px}
.etiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px}
.etiles.n3{grid-template-columns:repeat(3,minmax(0,1fr))} .etiles.n4{grid-template-columns:repeat(4,minmax(0,1fr))} .etiles.n5{grid-template-columns:repeat(5,minmax(0,1fr))} .etiles.n6{grid-template-columns:repeat(3,minmax(0,1fr))} /* lige rækker: ingen enlig måler på sidste linje (fx 3 + 1 på iPad på højkant) */
@media (max-width:1100px){ .etiles.n5{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){ .etiles.n4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .etiles.n3{grid-template-columns:minmax(0,1fr)} .etiles.n5,.etiles.n6{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .etiles.n4,.etiles.n5,.etiles.n6{grid-template-columns:minmax(0,1fr)} }
.etile{background:var(--surface);border-radius:16px;padding:16px 18px;box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 24px -18px rgba(16,24,40,.3);border:2px solid transparent;display:flex;flex-direction:column}
.etile.ne{border-color:color-mix(in srgb,var(--stamp) 55%,transparent)}
.etile .eh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:10px}
.etile .eh b{font-size:1.05rem;flex:1 1 8em}
.mbadge{font-size:.8rem;font-weight:800;border-radius:999px;padding:3px 10px;white-space:nowrap}
.mbadge.ne{background:var(--stamp);color:#fff} .mbadge.eq{background:color-mix(in srgb,var(--pos) 16%,var(--surface));color:var(--pos)}
.etile .ek{font-size:.78rem;font-weight:700;color:var(--muted);margin:6px 0 4px}
.ebar{display:flex;gap:3px}
.ebar i{flex:1;height:14px;border-radius:3px;background:color-mix(in srgb,var(--ink) 10%,var(--surface))}
.ebar i.y{background:var(--ink)} .ebar i.r{background:color-mix(in srgb,var(--ink) 40%,var(--surface))}
.ebar i.df{background:var(--stamp)}
.etile .eend{font-size:.92rem;line-height:1.45;color:var(--muted);margin:12px 0 0}
.etable{background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 24px -18px rgba(16,24,40,.3)}
.erow{display:grid;grid-template-columns:150px minmax(0,1fr) 70px 90px 120px;gap:14px;align-items:center;padding:14px 20px}
.erow.noreal{grid-template-columns:150px minmax(0,1fr) 70px}
.erow+.erow{border-top:1px solid var(--line)}
.erow.ehead{font-size:.75rem;letter-spacing:.07em;font-weight:800;color:var(--muted);text-transform:uppercase;padding-top:14px;padding-bottom:10px}
.erow .ewhen{font-size:.9rem;color:var(--muted);font-weight:600}
.erow .et b{display:block;font-size:1.05rem} .erow .et span{display:block;font-size:.92rem;color:var(--muted);margin-top:2px}
.erow .et .ewhy{font-style:italic}
.eL{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:1.3rem;font-weight:800;background:var(--fA)}
.eL.o1{background:var(--fB)} .eL.o2{background:var(--fC)} .eL.o3{background:var(--fD)}
.eL.ring{background:transparent;color:var(--fA);box-shadow:inset 0 0 0 3px var(--fA)} .eL.ring.o1{color:var(--fB);box-shadow:inset 0 0 0 3px var(--fB)} .eL.ring.o2{color:var(--fC);box-shadow:inset 0 0 0 3px var(--fC)} .eL.ring.o3{color:var(--fD);box-shadow:inset 0 0 0 3px var(--fD)}
.eL.none{background:transparent;color:var(--muted)}
.erow .same{font-weight:800;font-size:.92rem} .erow .same.y{color:var(--pos)} .erow .same.n{color:var(--stamp-ink)}
.etalk{background:var(--surface);border-radius:18px;padding:20px 24px;margin:30px 0 0;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.etalk h3{font-size:1.4rem;margin:0 0 8px}
.etalk .reflect{font-size:1.1rem;line-height:1.6;margin:0}
.quizcard{display:flex;align-items:center;gap:22px;background:#F7DE7E;color:#2B2410;border-radius:20px;padding:22px 26px;margin:26px 0 0;box-shadow:0 22px 34px -24px rgba(0,0,0,.45)}
.quizcard .qi{width:58px;height:58px;border-radius:50%;background:#15181D;color:#F7DE7E;display:grid;place-items:center;font-size:34px;font-weight:800;flex:none}
.quizcard>div{flex:1;min-width:0} .quizcard h3{margin:0;font-size:1.5rem;color:#2B2410} .quizcard p{margin:4px 0 0;color:#5B4618}
.quizcard .btn.stamp{background:#15181D;border-color:#15181D;color:#fff;border-radius:999px;padding:13px 24px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .quizcard{background:#E9CF6E} }
:root[data-theme="dark"] .quizcard{background:#E9CF6E}
.efold{background:var(--surface);border-radius:14px;margin:12px 0 0;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.endstage .efold:first-of-type{margin-top:26px}
.efold>summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:800;font-size:1.1rem;display:flex;align-items:baseline;gap:12px}
.efold>summary::-webkit-details-marker{display:none}
.efold>summary::after{content:"▾";margin-left:auto;color:var(--muted)} .efold[open]>summary::after{content:"▴"}
.efold>summary span{font-weight:600;font-size:.92rem;color:var(--muted)}
.efold .efbody{padding:0 20px 18px}
.esave{margin-top:26px} .esave>div{background:var(--surface);border-radius:14px;padding:18px 20px}
.endstage .eacts{margin-top:26px}
.endstage .eacts .btn.stamp{border-radius:999px;padding:13px 26px}
@media (max-width:700px){
  .erow,.erow.noreal{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"d d d" "t t t" "y r s";gap:6px 12px;padding:12px 16px}
  .erow.noreal{grid-template-areas:"d d d" "t t t" "y y y"}
  .erow .ewhen{grid-area:d} .erow .et{grid-area:t} .erow>.eL:not(.ring):not(.none){grid-area:y} .erow>.eL.ring,.erow>.eL.none{grid-area:r} .erow .same{grid-area:s}
  .erow.ehead{display:none}
  .quizcard{flex-wrap:wrap} .quizcard .btn.stamp{width:100%}
}
@media (max-width:600px){ .efold>summary span{display:none} }
/* ⋯ ved hvert dilemma på oversigten (10. okt. 2026): flyt, dupliker, med i spillet og slet */
.wdils li{position:relative}
.wdils li.off{opacity:.65}
.wdils .wdt{flex:1;min-width:0}
.dmenu{position:relative}
.dmenu>summary{list-style:none;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;font-weight:800;color:var(--muted);line-height:1}
.dmenu>summary::-webkit-details-marker{display:none}
.dmenu>summary:hover,.dmenu[open]>summary{background:var(--tint);color:var(--ink)}
.dmpop{position:absolute;right:0;top:calc(100% + 6px);z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;min-width:200px;display:grid;gap:2px;box-shadow:0 18px 36px -18px rgba(0,0,0,.4)}
.dmpop button{font:inherit;text-align:left;border:0;background:none;padding:9px 12px;border-radius:8px;font-weight:600;color:var(--ink);cursor:pointer}
.dmpop button:hover{background:var(--tint)}
.dmpop .check{margin:0;padding:9px 12px;font-weight:600}
.dmpop .dmdel{color:var(--stamp-ink)}
.xbox h3{font-size:1.1rem}
.xbox .lead{font-size:.98rem}

/* Quizzen i nyt design (10. okt. 2026, Sørens valg): som dilemmaskærmen; svarene med mærker, forklaringen på en gul seddel, resultatet med en prik pr. spørgsmål */
.stage.quiz .qprompt{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;color:var(--stamp-ink);font-weight:800;font-size:clamp(1.15rem,1.7vw,1.4rem);margin:0 0 14px}
.stage.quiz .choices.wide .choice{position:relative}
.stage.quiz .choice.dim{opacity:.45;filter:saturate(.3)}
.stage.quiz .choice.right.o0,.stage.quiz .choice.right.o1,.stage.quiz .choice.right.o2,.stage.quiz .choice.right.o3{box-shadow:none} /* ingen ring om svarene (10. okt. 2026, Sørens ønske); mærkerne Rigtigt svar og Jeres svar viser det */
.stage.quiz .choice.wrong.o0,.stage.quiz .choice.wrong.o1,.stage.quiz .choice.wrong.o2,.stage.quiz .choice.wrong.o3{box-shadow:none;opacity:.9}
.qbadge{position:absolute;top:14px;right:14px;background:#fff;color:#15181D;border-radius:999px;padding:5px 12px;font-weight:800;font-size:.9rem;line-height:1.2}
.qbadge.y{color:#145F3C} .qbadge.n{color:#9A2F1B}
.qafter{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,470px);gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(24px,3vw,36px)}
.qafter .actions{margin:0}
.stage.quiz .qfb{background:#F7DE7E;color:#2B2410;border:0;border-radius:6px 6px 18px 6px;transform:rotate(1.2deg);box-shadow:0 2px 3px rgba(0,0,0,.08),0 22px 34px -20px rgba(0,0,0,.45);padding:18px 22px;margin:0}
.stage.quiz .qfb h3{font-size:.85rem;letter-spacing:.07em;text-transform:uppercase;color:#6B4E1E;margin:0 0 8px}
.stage.quiz .qfb .prose{color:#2B2410;font-size:1.02rem;line-height:1.5;margin:0} .stage.quiz .qfb .src{color:#6B4E1E}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .stage.quiz .qfb{background:#E9CF6E} }
:root[data-theme="dark"] .stage.quiz .qfb{background:#E9CF6E}
.stage.quiz .qhint{margin-top:16px}
.qdone .qdhead{text-align:center;padding:clamp(20px,4vw,48px) 0 10px}
.qdone .qdhead h2{font-size:clamp(2.6rem,6vw,5rem);margin:6px 0 22px}
.qdots{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.qdots i{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:1.4rem;color:#fff;background:var(--pos)}
.qdots i.n{background:transparent;color:var(--neg);box-shadow:inset 0 0 0 3px var(--neg)}
.qdots i.pct{font-size:1rem} .qdots i.pct::after{content:"%";font-size:.7em}
.qlist{max-width:900px;margin:clamp(24px,3vw,36px) auto 0;background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 24px -18px rgba(16,24,40,.3)}
.qrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 20px}
.qrow+.qrow{border-top:1px solid var(--line)}
.qic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--pos)}
.qic.n{background:transparent;color:var(--neg);box-shadow:inset 0 0 0 3px var(--neg)}
.qrow .qt b{display:block;font-size:1.05rem} .qrow .qt span{display:block;color:var(--muted);font-size:.93rem;margin-top:2px}
.qres{font-weight:800;font-size:.92rem} .qres.y{color:var(--pos)} .qres.n{color:var(--neg)}
.qdone .qacts{justify-content:center;margin-top:26px}
.stage.quiz .actions .btn.stamp{border-radius:999px;padding:14px 28px;font-size:1.05rem}
@media (max-width:860px){ .qafter{grid-template-columns:1fr} .stage.quiz .qfb{transform:none} }
@media (max-width:600px){ .qbadge{position:static;order:-1;flex-basis:100%;background:transparent;color:#fff;padding:0;font-size:.85rem} .qbadge.y,.qbadge.n{color:#fff} .qrow{grid-template-columns:auto minmax(0,1fr);} .qrow .qres{grid-column:2} }
@media (max-width:600px){ .stage.dil .choices.wide .choice{min-height:0} .stage.dil .choices.wide .choice .letter{font-size:2.8rem} .qafter .qfb{order:-1} } /* mobil: lave kort (en senere regel gav dem 200 px), og forklaringen før Næste spørgsmål */
.newacct{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:10px}
.newacct p{margin:0;font-weight:600}
.newacct .btn.play{justify-self:stretch;text-align:center;justify-content:center;display:flex;font-size:1.1rem;padding:14px 20px;border-radius:999px}

/* Spillets side, bud 1 (10. okt. 2026, Sørens valg): som startskærmen, med knapperne på billedet */
.gpage2 .starthero .gtitle{color:#fff;font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.02;letter-spacing:-.035em;margin:4px 0 12px;overflow-wrap:break-word}
.gpage2 .starthero .prose{max-width:62ch}
.gback2{font:inherit;font-weight:700;font-size:.9rem;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 14px;margin:0 0 18px;cursor:pointer}
.gback2:hover{background:rgba(255,255,255,.22)}
.gbtns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
.gbtns .btn{border-radius:999px;padding:12px 22px;font-size:1.02rem}
.gbtns .btn strong{font-weight:800}
.gbtns .btn.play{font-size:1.1rem;padding:13px 26px}
.gbtns .btn.gwhite{background:#fff;color:#15181D;border-color:#fff}
.gbtns .btn.gghost,.gbtns .favbtn{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.gbtns .favbtn{padding:12px 18px;font-size:.98rem;min-height:0}
.gbtns .btn:disabled{opacity:.5}
.gsaved{margin:12px 0 0;color:#F2C14E;font-weight:600}
.gtags2{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 22px}
.gtags2>span{font-size:.88rem;font-weight:700;border-radius:999px;padding:5px 12px;background:var(--tint);color:var(--muted)}
.gtags2 .btn{border-radius:999px}
.gcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px;margin:0 0 14px}
.gpage2 .gbox{background:var(--surface);border:0;border-radius:18px;padding:6px 0 4px;box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 24px -18px rgba(16,24,40,.3);margin:0}
.gpage2 .gbh{display:flex;align-items:center;justify-content:space-between;padding:10px 18px 6px}
.gpage2 .gbh h3{margin:0;font-size:1.05rem}
.gpage2 .grow{padding:12px 18px;margin:0;width:100%}
.glet{display:flex;gap:4px;flex:none}
.glet i{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.82rem;color:#fff;background:var(--fA)}
.glet i.o1{background:var(--fB)} .glet i.o2{background:var(--fC)} .glet i.o3{background:var(--fD)}
.gpage2 .tguide,.gpage2>details{margin-top:14px}
.gfb{margin-top:18px}
@media (max-width:600px){ .gbtns .btn{flex:1 1 auto;justify-content:center} .gbtns .btn.play{flex-basis:100%} }
.gback2{display:block;width:max-content}
.gbtns .favstar{width:48px;height:48px;padding:0;border-radius:50%;font-size:1.3rem;display:grid;place-items:center;flex:none}
.gbtns .favstar[aria-pressed="true"]{color:#F2C14E;border-color:#F2C14E}
.gpage2 .tguide{padding:16px 20px}
.gpage2 .tguide summary h3{font-size:1.2rem}
.gpage2 .tguide summary .note{font-size:.92rem}
@media (max-width:600px){ .gbtns .favstar{flex:none} }

/* Spil med klassen, bud 1 (10. okt. 2026, Sørens valg): billedstribe øverst, to store farvede kort, Mere som liste */
.shhero{position:relative;margin:calc(-1 * clamp(14px,2vw,28px)) calc(50% - 50vw) 24px;background:#1B1F25 center 35%/cover;color:#fff;min-height:190px;display:flex;align-items:flex-end}
.shhero.noimg{background-image:radial-gradient(120% 90% at 85% 20%,color-mix(in srgb,#D1472C 45%,#1B1F25) 0%,#1B1F25 70%)}
.shhero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,17,21,.95),rgba(15,17,21,.7) 50%,rgba(15,17,21,.3))}
.shhin{position:relative;width:100%;max-width:1320px;margin:0 auto;padding:22px max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px)) 22px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px}
.shhin .gback2{margin:0 0 12px}
.shk{display:block;color:#F2C14E;font-weight:700}
.shhero .sharetitle{color:#fff;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.03em;line-height:1.05;margin:2px 0 0}
.shhero .klasspick{color:#fff;font-weight:700} .shhero .klasspick select{background:#fff;color:#15181D;border-radius:10px}
.sharehome .shbig{gap:16px;margin-bottom:10px}
.sharehome .shpanel{border:0;border-radius:22px;padding:24px 26px;color:#fff;display:flex;flex-direction:column;min-height:240px}
.sharehome .shpanel.shc-a{background:var(--fA)} .sharehome .shpanel.shc-b{background:var(--fB)}
.sharehome .shpanel h3{color:#fff;font-size:clamp(1.8rem,3vw,2.3rem);letter-spacing:-.02em;margin:4px 0 8px}
.sharehome .shpanel p,.sharehome .shpanel .note{color:rgba(255,255,255,.9)}
.sharehome .shkicker{color:rgba(255,255,255,.85);font-weight:800}
.sharehome .shpanel .actions{margin-top:auto;padding-top:10px}
.sharehome .shpanel .btn{border-radius:999px;padding:12px 22px;font-size:1.02rem}
.sharehome .shpanel .btn.stamp,.sharehome .shpanel .btn.primary{background:#fff;color:#15181D;border-color:#fff}
.sharehome .shpanel .btn.play{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}
.sharehome .shpanel .note.hot{color:#F2C14E}
.sharehome .shpanel .rows .rowc{background:var(--surface);color:var(--ink);border-radius:12px}
.sharehome .shpanel .rows .rowc .t span{color:var(--muted)}
.sharehome .shpanel .oldlinks summary{color:rgba(255,255,255,.85)}
.shmore{font-size:1rem;color:var(--muted);margin:26px 0 10px}
.stiles.slist{display:block;background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 24px -18px rgba(16,24,40,.3)}
.slist .stile{flex-direction:row;align-items:center;gap:14px;border:0;border-radius:0;padding:14px 18px;min-height:0;width:100%;background:transparent}
.slist .stile+.stile{border-top:1px solid var(--line)}
.slist .stile:hover{background:var(--tint)}
.slist .stile b{font-family:var(--sans);font-size:1.05rem;flex:none} .slist .stile b::after{content:none}
.slist .stile .sdesc{flex:1;min-width:0;color:var(--muted);font-size:.92rem}
.slist .stile em{margin:0;padding:0;white-space:nowrap}
.slist .sic{width:36px;height:36px;border-radius:10px;background:var(--tint);display:grid;place-items:center;font-size:1.05rem;flex:none}
.slist .sarr{color:var(--muted);font-size:1.3rem}
@media (max-width:700px){ .slist .stile .sdesc{display:none} .slist .stile b{flex:1} }
.shhin{max-width:none;margin:0}
.shhero .klasspick span{color:#fff}
/* Spillets side: Spil på tavlen, Klassespil i grupper, Rediger, stjernen og ⋯ Mere (10. okt. 2026, Sørens beslutning) */
.gmore{position:relative}
.gmore>summary{list-style:none;cursor:pointer}
.gmore>summary::-webkit-details-marker{display:none}
.gmpop{position:absolute;left:0;top:calc(100% + 8px);z-index:6;background:var(--surface);color:var(--ink);border-radius:14px;padding:6px;min-width:250px;display:grid;gap:2px;box-shadow:0 20px 40px -16px rgba(0,0,0,.5)}
.gmpop button{font:inherit;font-weight:600;text-align:left;border:0;background:none;color:var(--ink);padding:10px 14px;border-radius:9px;cursor:pointer}
.gmpop button:hover{background:var(--tint)}
.gklass{display:inline-flex;align-items:center;gap:10px;margin-top:14px;color:#fff;font-weight:700}
.gklass span{color:#fff}
.gklass select{background:#fff;color:#15181D;border-radius:10px}
.gpage2 #gpLiveMsg{color:#F2C14E;margin-top:8px}
.sharehome .shbig.one{grid-template-columns:minmax(0,1fr)}
.sharehome .shbig.one .shpanel{min-height:0}
.gpage2 .starthero .shtext{max-width:1000px} .gpage2 .starthero .gtitle{max-width:760px}

/* Lobbyen, bud 1 "Mørk scene" (10. okt. 2026, Sørens valg): mørk skærm i hele bredden med spillets billede svagt bag, kæmpe kode i midten og dyrene, der popper ind */
.lobbywrap .starthero.lobbypage{display:flex;align-items:center;justify-content:center;min-height:100svh;box-sizing:border-box;background:#121418;text-align:center;gap:0}
.lobbywrap .starthero.lobbypage::before{background:var(--limg,none) center 35%/cover;opacity:.17;-webkit-mask-image:linear-gradient(#000 30%,transparent 100%);mask-image:linear-gradient(#000 30%,transparent 100%)}
.lobbypage .lin{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(30px,6vh,70px) 16px}
.lobbypage .ljoin{font-size:clamp(1.1rem,2.2vw,1.6rem);color:#C9CED3;margin:0}
.lobbypage .ljoin b{color:#fff} .lobbypage .ljoin .ly{color:#F2C14E}
.lobbypage .lcode{background:none;border:0;padding:0}
.lobbypage .lcode b{color:#fff;font-size:clamp(4.5rem,15vw,11rem);letter-spacing:.08em;line-height:1}
.lobbypage .lplayers{justify-content:center;gap:12px;min-height:80px;max-width:1100px}
.lobbypage .lplayers .pl{background:none;border:0;padding:0}
.lobbypage .lplayers .av{width:72px;height:72px;font-size:2.4rem;box-shadow:0 10px 20px -10px rgba(0,0,0,.6)}
.lobbypage .lplayers .pln{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lobbypage .lplayers .note{color:#A2A8AE}
.lobbypage .lcount{font-size:clamp(1.1rem,1.8vw,1.4rem);color:#fff;font-weight:700;margin:6px 0 0}
.lobbypage .lgame{color:#A2A8AE;font-weight:600}
.lobbypage .lact2{justify-content:center;flex-wrap:wrap;margin-top:14px}
.lobbypage .lact2 .btn{border-radius:999px}
.lobbypage .lact2 .btn.play.big{font-size:1.3rem;padding:16px 38px}
.lobbypage .lact2 .btn.gghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.lobbypage .msg{color:#F2C14E}
@media (max-width:600px){ .lobbypage .lplayers .av{width:52px;height:52px;font-size:1.7rem} }
.lobbypage .ljoin{display:block;flex:none;background:none;border:0;border-radius:0;padding:0;box-shadow:none;text-align:center}
.lobbypage .ljoin>*{display:inline;font-size:inherit;margin:0}
.lobbypage .ljoin .laddr{font-size:inherit;color:#fff;letter-spacing:0}
.lobbywrap .starthero.lobbypage::before{content:none}
.lobbypage .lbg{position:absolute;inset:0;background:center 35%/cover;opacity:.17;-webkit-mask-image:linear-gradient(#000 30%,transparent 100%);mask-image:linear-gradient(#000 30%,transparent 100%);pointer-events:none}

/* Temasiden (10. okt. 2026, Sørens valg): gul top, klassetrin som faner, ugerne som kort med billede */
.thero{margin:calc(-1 * clamp(14px,2vw,28px)) calc(50% - 50vw) 24px;background:#F2C14E;color:#2B2410}
.thin{padding:clamp(26px,4vw,44px) max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px))}
.thero .tk{display:block;font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.thero h1{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.035em;line-height:1.04;margin:8px 0 10px;color:#2B2410}
.thero p{margin:0;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.5;max-width:62ch}
.gback2.dk{color:#2B2410;background:rgba(43,36,16,.08);border-color:rgba(43,36,16,.25)} .gback2.dk:hover{background:rgba(43,36,16,.14)}
.ttabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--tint);border-radius:999px;padding:4px;margin:0 0 18px}
.ttabs button{font:inherit;font-weight:700;font-size:.95rem;border:0;background:none;color:var(--muted);padding:9px 18px;border-radius:999px;cursor:pointer}
.ttabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.tone{font-weight:800;margin:0 0 14px}
.tweeks{display:grid;gap:12px}
.tweek{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:20px;align-items:center;background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 24px -18px rgba(16,24,40,.3);padding-right:22px}
.tweek .tim{align-self:stretch;min-height:140px;background:#1B1F25 center/cover}
.tweek .tim.noimg{background-image:radial-gradient(120% 90% at 85% 20%,color-mix(in srgb,#F2C14E 45%,#1B1F25) 0%,#1B1F25 70%)}
.tweek .ttx{padding:16px 0}
.tweek .when{font-size:.88rem}
.tweek h3{margin:2px 0 6px;font-size:1.25rem}
.tweek .tdil{margin:0 0 4px;color:var(--muted);font-size:.95rem}
.tweek .tnote{margin:0;font-size:.98rem;line-height:1.5}
.tweek .btn.play{border-radius:999px;padding:12px 22px;white-space:nowrap}
.tpage2 .efold:first-of-type{margin-top:22px}
@media (max-width:700px){ .tweek{grid-template-columns:1fr;padding:0 0 16px} .tweek .tim{min-height:150px} .tweek .ttx{padding:0 16px} .tweek .btn.play{margin:0 16px;justify-self:start} }

/* Færdige spil (10. okt. 2026, Sørens valg): spillets lille billede ved hvert forløb, valgene som farvede bogstaver, Modtag forløb som et kort; danske Vælg fil-knapper */
.runspage .rows .rowc{background:var(--surface);border:0;border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 24px -20px rgba(16,24,40,.3);align-items:center;gap:14px}
.rthumb{width:84px;height:56px;border-radius:10px;background:#1B1F25 center/cover;flex:none}
.rthumb.noimg{background-image:radial-gradient(120% 90% at 85% 20%,color-mix(in srgb,#D1472C 45%,#1B1F25) 0%,#1B1F25 70%)}
.runspage .path .glet i{width:28px;height:28px}
.runrecv{background:var(--surface);border-radius:18px;padding:20px 22px;margin-top:30px;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.runrecv h3{margin:0 0 4px}
.filebtn{display:inline-flex;align-items:center;gap:6px;overflow:hidden}
.filebtn input[type=file]{font-size:0}
@media (max-width:600px){ .rthumb{width:56px;height:44px} .runspage .rows .rowc{flex-wrap:wrap} }
.runspage .klassbar{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--tint);border-radius:999px;padding:4px;border:0}
.runspage .klassbar button{border:0;background:none;border-radius:999px;padding:8px 16px;font-weight:700;color:var(--muted);box-shadow:none}
.runspage .klassbar button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.runspage .klassbar button span{opacity:.7;margin-left:4px}
.runspage .klassbar .newklass{border:1.5px dashed color-mix(in srgb,var(--ink) 30%,transparent)}

/* Log ind og Opret konto som delt skærm (10. okt. 2026, Sørens valg) */
.authsplit{display:grid;grid-template-columns:1fr 1fr;margin:-28px calc(50% - 50vw) -80px;min-height:calc(100svh - var(--hdr,54px))}
.authimg{position:relative;background:#1B1F25 center 35%/cover;color:#fff;display:flex;align-items:flex-end;padding:clamp(28px,5vw,60px)}
.authimg::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,17,21,.95),rgba(15,17,21,.3) 70%)}
.authimg>div{position:relative;max-width:460px}
.authimg .ak{color:#F2C14E;font-weight:700}
.authimg .ah{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:6px 0 8px}
.authimg .ap{margin:0;font-size:1.1rem;color:#E6E8EB}
.authsplit .login{margin:0;align-self:center;justify-self:center;width:100%;max-width:470px;background:transparent;border:0;padding:clamp(28px,5vw,60px) clamp(18px,4vw,40px)}
.authsplit .login h1{font-size:clamp(2.2rem,3.5vw,2.8rem);letter-spacing:-.03em}
.authsplit .login input[type=text],.authsplit .login input[type=email],.authsplit .login input[type=password]{padding:13px 14px;border-radius:12px;font-size:1.05rem}
.authsplit .login .btn.stamp{border-radius:999px;padding:12px 26px}
@media (max-width:800px){ .authsplit{grid-template-columns:1fr;margin-bottom:0;min-height:0} .authimg{min-height:150px;padding:20px 16px} .authimg .ap{display:none} .authimg .ah{font-size:1.8rem;margin:2px 0 0} }

/* Deltag og Stem som mørk skærm (10. okt. 2026, Sørens valg): kun overskrift, Skriv koden, et stort kodefelt og knappen */
.joindark{margin:-28px calc(50% - 50vw) -80px;background:#121418;color:#fff;min-height:calc(100svh - var(--hdr,54px));display:flex;align-items:center;justify-content:center;padding:40px 16px}
.joindark .login{background:transparent;border:0;margin:0;text-align:center;max-width:560px;width:100%}
.joindark .login h1{color:#fff;font-size:clamp(2.6rem,7vw,4rem);letter-spacing:-.035em}
.joindark .login .sub{color:#C9CED3;font-size:1.2rem;margin:0 0 26px}
.joindark .vt-codein{width:100%;background:rgba(255,255,255,.08)!important;border:2px solid rgba(255,255,255,.25)!important;border-radius:18px!important;color:#fff!important;font-size:clamp(2.6rem,10vw,4.2rem)!important;font-weight:800;letter-spacing:.3em;text-align:center;padding:14px 10px 14px calc(10px + .3em)!important;text-transform:uppercase}
.joindark .vt-codein::placeholder{color:rgba(255,255,255,.25)}
.joindark .vt-codein:focus{border-color:#F2C14E!important;outline:none;box-shadow:0 0 0 4px rgba(242,193,78,.25)}
.joindark .actions{justify-content:center;margin-top:22px!important}
.joindark .btn.play{background:#F2C14E;border-color:#F2C14E;color:#15181D;font-size:1.3rem;padding:16px 46px;border-radius:999px}
.joindark .msg{color:#F2C14E!important;margin-top:10px}

/* Siden findes ikke, bekræftelsen og andre beskeder: samme top som alle andre sider (10. okt. 2026, Sørens valg) */
.notice2{text-align:center;max-width:640px;margin:0 auto;padding:clamp(40px,10vh,100px) 0 40px}
.notice2 .n404{font-size:clamp(5rem,14vw,8rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--line)}
.notice2 .n404.ok{color:var(--pos)}
.notice2 h1{font-size:clamp(2rem,5vw,3rem);letter-spacing:-.03em;margin:10px 0 10px}
.notice2 p{font-size:1.15rem;color:var(--muted);margin:0 0 24px}
.notice2 .actions{justify-content:center}
.notice2 .btn{border-radius:999px;padding:12px 24px}

/* Mobil, bud C "Som en app" (10. okt. 2026, Sørens valg): toppen er kun logoet og burgeren, bundmenuen har Bibliotek, Deltag og Værksted; burgeren har det sjældne. Gælder kun telefoner (højst 700 px) */
.mburger,.mmenu,.mbar{display:none}
@media (max-width:700px), (max-width:1024px) and (orientation:portrait){ /* telefoner og iPad på højkant (bud A for iPad, 10. okt. 2026) */
  header.apptop.mnav,header.apptop.mnav.scrolled{display:flex!important;flex-wrap:nowrap;align-items:center;gap:10px;height:70px;padding-top:0;padding-bottom:0}
  header.apptop.mnav .tabs,header.apptop.mnav.scrolled .tabs,header.apptop.mnav .topright{display:none!important}
  header.apptop.mnav .wordmark .logo,body.fs header.apptop.mnav .wordmark .logo{height:52px} /* større logo, nu hvor toppen kun har logoet (11. okt. 2026, Sørens ønske) */
  header.apptop.mnav,header.apptop.mnav.scrolled{justify-content:center} header.apptop.mnav .wordmark{margin:0 auto} /* logoet i midten, når toppen kun har logoet (11. okt. 2026, Sørens ønske) */
  .mmenu:not([hidden]){display:flex;flex-direction:column;justify-content:flex-end;position:fixed;inset:0;z-index:1000;background:rgba(10,12,15,.5)} /* menuen er et ark, der glider op nedefra (11. okt. 2026) */
  .mmsheet{display:flex;flex-direction:column;max-height:88vh;overflow-y:auto;background:#121418;color:#fff;border-radius:22px 22px 0 0;padding:0 0 calc(22px + env(safe-area-inset-bottom,0px));animation:mmup .22s ease-out}
  @keyframes mmup{from{transform:translateY(100%)}}
  @media (prefers-reduced-motion:reduce){ .mmsheet{animation:none} }
  .mmhead{display:flex;align-items:center;justify-content:center;position:relative;height:46px;flex:none}
  .mmgrab{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.3)}
  .mclose{position:absolute;right:8px;top:2px;width:44px;height:44px;border:0;background:none;color:#fff;font-size:1.5rem;cursor:pointer}
  .mmlinks{display:grid;gap:0;padding:4px 26px 0}
  .mmlinks a,.mmlinks button{font:inherit;font-size:1.7rem;font-weight:800;letter-spacing:-.03em;color:#fff;text-decoration:none;background:none;border:0;text-align:left;padding:7px 0;cursor:pointer}
  .mmacct{padding:22px 26px 0;display:grid;gap:10px}
  .mmacct .btn{display:flex;justify-content:center;border-radius:999px;padding:15px;font-size:1.1rem;font-weight:800}
  .mmacct .btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
  .mmfoot{display:flex;align-items:center;gap:12px;padding:18px 26px 0;color:#A2A8AE}
  .mmfoot .themebtn{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
  html.mopen{overflow:hidden}
  .cknote{left:10px;right:10px;bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;justify-content:space-around;align-items:flex-start;padding:8px 8px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .mbar a,.mbar button{flex:1;display:grid;justify-items:center;gap:3px;font:inherit;font-size:.78rem;font-weight:700;color:var(--muted);text-decoration:none;background:none;border:0;padding:4px 0;cursor:pointer}
  .mbar [aria-current="page"]{color:var(--ink)}
  .mbar .mjc{width:48px;height:48px;border-radius:50%;background:#F2C14E;color:#15181D;display:grid;place-items:center}
  .mbar .mjoin{flex:0 0 auto;align-self:center;padding:0 8px 0 4px} /* Deltag er kun den gule pil, yderst til venstre (11. okt. 2026, Sørens ønske) */
  .mbar .mjoin{color:var(--ink)}
  body:has(.mbar){padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  html.ingame .mbar{display:none} html.ingame body{padding-bottom:0}
}
/* Mobil (bud C), bid 2: forsiden er kun billedet, én grøn knap og prøvespillene; resten af forsiden står på computer. Bunden er kort; udviklerne står der stadig */
@media (max-width:700px), (max-width:1024px) and (orientation:portrait){ /* telefoner og iPad på højkant (bud A for iPad, 10. okt. 2026) */
  .fs-photo .fs-cta .btn.stamp,.fs-photo .fs-cta a[href="login.php"]{display:none}
  .fs-photo .fs-cta .btn.fs-provbtn{background:var(--play)!important;border-color:var(--play)!important;color:#0E2A1C!important;font-weight:800}
  .fs-photo .fs-cta .fs-provbtn::before{content:"▶ "}
  .fs-photo .fs-lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  /* billedet øverst har samme højde på alle billeder, og den grønne knap ligger som en stribe helt op ad billedet (11. okt. 2026, Sørens ønske) */
  body.fs .fs-hero.fs-photo{--ctah:60px;height:clamp(440px,58svh,580px);min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:0;overflow:hidden}
  .fs-photo .fs-heroimg{bottom:var(--ctah)}
  .fs-photo .fs-copy{max-width:none;width:100%}
  .fs-photo .fs-kicker{display:none} /* den gule linje med spillets navn er væk på mobil (11. okt. 2026, Sørens ønske); teksten under overskriften siger det samme */
  .fs-photo h1{line-height:1}
  .fs-photo .fs-lead{line-height:1.55;margin-top:18px;min-height:calc(3 * 1.55em);margin-bottom:48px} /* mere luft i teksten på billedet */
  .fs-photo .fs-cta{margin:0 calc(50% - 50vw);height:var(--ctah);display:flex}
  .fs-photo .fs-cta .btn{flex:1;width:auto;height:var(--ctah);min-height:0;border-radius:0;justify-content:center;font-size:1.15rem;padding:0 20px}
  .fs-dots{bottom:calc(var(--ctah) + 8px)}
  body.fs .fs-stepstop,body.fs .fs-kinds,body.fs .fs-features,body.fs .fs-band,body.fs .fs-final{display:none}
  body.fs .fs-stepstop:has(#saadan:target){display:block} /* Sådan spiller I i burgermenuen viser afsnittet, når man beder om det */
  .fs-try h2{font-size:1.5rem}
  .sitemap .smap>div:not(:last-child),.sitemap .smbrand{display:none}
  .sitemap .smap{grid-template-columns:1fr;gap:0}
  .sitemap .smap h2{display:none} .sitemap .smap ul{display:flex;flex-wrap:wrap;gap:4px 16px}
}
/* Mobil (bud C), bid 2: Bibliotek med kun søgefeltet og Filtrér; resten foldes ud */
.lbfilt{display:none}
@media (max-width:700px), (max-width:1024px) and (orientation:portrait){ /* telefoner og iPad på højkant (bud A for iPad, 10. okt. 2026) */
  .libbar{display:flex!important;flex-wrap:wrap;gap:8px;align-items:center}
  .libbar .libsearch{flex:1 1 0;min-width:0;order:0}
  .libbar .lbfilt{display:inline-flex;order:1;align-items:center;font:inherit;font-weight:800;border:0;border-radius:999px;background:var(--ink);color:var(--paper);padding:12px 18px;cursor:pointer}
  .libbar:not(.fopen)>:not(.libsearch):not(.lbfilt){display:none!important}
  .libbar.fopen>:not(.libsearch):not(.lbfilt){order:2;flex:1 1 45%}
  .libbar.fopen .dd select,.libbar.fopen #libSort1{width:100%} /* menuerne fylder deres felt, så pilen står i menuen og ikke for sig selv */
  .lib .morefilters{display:none}
  .libbar.fopen~.morefilters{display:flex}
}
@media (max-width:700px), (max-width:1024px) and (orientation:portrait){ /* telefoner og iPad på højkant (bud A for iPad, 10. okt. 2026) */ .libbar.fopen .libsearch{flex:1 1 calc(100% - 110px)} }
/* Mobil (bud C), bid 3: dilemmaet med færre ting: ingen Skærmtilstand, målerne skjult, til valget er truffet, kilden som en gul linje, man trykker på */
.kfold .kmt{display:none}
@media (max-width:700px), (max-width:1024px) and (orientation:portrait), (pointer:coarse) and (max-width:1366px){ /* telefoner og iPad på begge leder */
  .stage .topline .bigbtn{display:none}
  .stage.dil>.meters{display:none}

  .sitacts{flex-direction:column;align-items:stretch;gap:10px}
  .sitacts .kfold{width:100%}
  .sitacts .kfold summary{width:100%;height:auto!important;justify-content:flex-start;background:#F7DE7E;color:#2B2410;border:0;border-radius:12px;padding:14px 16px;font-weight:800}
  .sitacts .kfold summary::after{content:"›";margin-left:auto;font-size:1.3rem}
  .sitacts .kfold .kft{display:none} .sitacts .kfold .kmt{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sitacts .speak{align-self:flex-start;height:36px!important;font-size:.92rem!important}
}
@media (max-width:600px){ .stage.dil .choices.wide .choice>.tally{flex:0 0 calc(100% + 32px)} }

@media (max-width:700px){ .stage.dil h2{font-size:2rem} }
/* iPad (bud A med bud B's billede, 10. okt. 2026, Sørens valg): det store billede øverst i Bibliotek fylder det meste af skærmen på højkant */
@media (min-width:701px) and (max-width:1024px) and (orientation:portrait){
  .lib .slider .slide{min-height:min(58vh,620px)}
  .lib .slider .stext h3{font-size:clamp(2.4rem,6vw,3.2rem)}
  .mbar{justify-content:center;gap:clamp(60px,14vw,140px)} .mbar a,.mbar button{flex:0 0 auto}
}
/* Opsamlingen på tavlen, bud A "Kortene med sedler" (forslag C, 11. okt. 2026, Sørens valg): valgkortene fra skærmen efter valget, gruppernes begrundelser som gule sedler under kortet, facit sløret til højre */
.stage.sum2 .sumsub{font-size:1.1rem;color:var(--muted);margin:-10px 0 24px;max-width:70ch}
.scols{display:grid;gap:clamp(12px,1.4vw,18px);align-items:start}
.scol{min-width:0;display:grid;gap:16px;align-content:start}
.scol .rcard{min-height:clamp(170px,15vw,220px)}
.swhys{display:grid;gap:12px;padding:0 4px}
.snote{background:#F7DE7E;color:#2B2410;border-radius:6px 6px 16px 6px;box-shadow:0 2px 3px rgba(0,0,0,.08),0 18px 28px -18px rgba(0,0,0,.45);padding:12px 15px;font-size:1.04rem;line-height:1.45;overflow-wrap:anywhere}
.snote:nth-child(odd){transform:rotate(-.6deg)} .snote:nth-child(even){transform:rotate(.5deg)}
.snote b{display:block;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:#6B4E1E;margin-bottom:3px}
.snone{color:var(--muted);font-weight:600;font-size:.95rem;margin:2px 4px}
.sumfoot{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,460px);gap:clamp(24px,4vw,48px);align-items:start;margin-top:clamp(26px,3vw,40px)}
.stage.sum2 .sumnav{margin:0;align-items:center;flex-wrap:wrap}
.stage.sum2 .sumfact #factBox.veil .veiled{max-height:200px}
.tavle .snote{font-size:1.2rem}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .snote{background:#E9CF6E} }
:root[data-theme="dark"] .snote{background:#E9CF6E}
@media (max-width:860px){ .sumfoot{grid-template-columns:1fr} .sumfact{order:-1} }
@media (max-width:600px){ .scols{grid-template-columns:1fr!important} .snote{transform:none!important} }
.sumquiz2{display:grid;gap:12px;margin:4px 0 0}
.sq{display:grid;grid-template-columns:clamp(90px,10vw,130px) minmax(0,1fr);gap:18px;align-items:center;background:var(--surface);border-radius:16px;padding:16px 20px;box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 24px -18px rgba(16,24,40,.3)}
.sqp{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;letter-spacing:-.03em;color:var(--pos);font-variant-numeric:tabular-nums}
.sq.low .sqp{color:var(--neg)}
.sqt{min-width:0} .sqt>b{display:block;font-size:1.1rem} .sqt>span{color:var(--muted);font-size:.95rem}
.sqt i{display:block;height:8px;border-radius:4px;background:var(--tint);margin-top:8px;overflow:hidden} .sqt i b{display:block;height:100%;background:var(--pos)} .sq.low .sqt i b{background:var(--neg)}
/* Klassespillet: grupperne lige nu, bud A "Mørk scene med baner" (forslag C, 11. okt. 2026, Sørens valg): som lobbyen, én bane pr. gruppe med et felt pr. dilemma */
.livewrap .starthero.livepage{display:block;min-height:100svh;box-sizing:border-box;margin-bottom:0;background:#121418;color:#fff}
.livewrap .starthero.livepage::before{content:none}
.livepage .lbg{position:absolute;inset:0;background:center 30%/cover;opacity:.14;-webkit-mask-image:linear-gradient(#000 20%,transparent 90%);mask-image:linear-gradient(#000 20%,transparent 90%);pointer-events:none}
.lvin{position:relative;z-index:1;padding:clamp(24px,4vh,44px) max(clamp(16px,3vw,32px),calc(50vw - 660px + 32px)) 48px}
.lvhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,34px)}
.lvov{color:#F2C14E;font-weight:700;font-size:1.05rem} .lvov span{color:#C9CED3;font-weight:600}
.lvtitle h2{color:#fff;font-size:clamp(2.2rem,4.6vw,3.6rem);letter-spacing:-.035em;line-height:1.02;margin:6px 0 0;font-weight:800}
.lvcode{display:grid;justify-items:end;text-align:right;gap:2px}
.lvjoin{margin:0;font-size:1rem;color:#C9CED3} .lvjoin b{color:#fff} .lvjoin .ly{color:#F2C14E}
.lvcb{font-size:clamp(3rem,7vw,5.6rem);font-weight:800;letter-spacing:.07em;line-height:1;color:#fff}
.lvlanes{display:grid;gap:10px}
.lvrow{display:grid;grid-template-columns:minmax(110px,220px) minmax(0,1fr) minmax(150px,auto);gap:14px;align-items:center}
.lvcells{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;min-width:0}
.lvhd{font-size:.85rem;font-weight:700;color:#9AA1A9;line-height:1.3;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lvhd b{display:block;color:#C9CED3;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.lvgn{font-size:1.25rem;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}
.lvc{--c:transparent;height:54px;border-radius:13px;background:rgba(255,255,255,.07);display:flex;align-items:center;gap:10px;padding:0 12px;min-width:0;overflow:hidden;font-weight:700;font-size:.92rem;color:#E6E8EB}
.lvc.f{background:color-mix(in srgb,var(--c) 30%,rgba(255,255,255,.04))}
.lvc.o0{--c:var(--fA)} .lvc.o1{--c:var(--fB)} .lvc.o2{--c:var(--fC)} .lvc.o3{--c:var(--fD)}
.lvc .L{width:34px;height:34px;border-radius:9px;background:var(--c);color:#fff;font-weight:800;font-size:1.1rem;display:grid;place-items:center;flex:none}
.lvc .lvt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvc.now{background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);color:#fff}
.lvc.now::before{content:"";width:10px;height:10px;border-radius:50%;background:#F2C14E;box-shadow:0 0 0 5px rgba(242,193,78,.22);flex:none}
.lvlanes.many .lvc{justify-content:center;padding:0} .lvlanes.many .lvc.now .lvt{display:none}
.lvst{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-weight:700;color:#C9CED3;white-space:nowrap}
.lvst.done>span{color:#7FE0AE}
.livepage .btn.gghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px}
.livepage .btn.small{padding:5px 12px;font-size:.88rem;min-height:0}
.lvmore{position:relative}
.lvmore>summary{list-style:none;cursor:pointer} .lvmore>summary::-webkit-details-marker{display:none}
.lvpop{position:absolute;right:0;bottom:calc(100% + 6px);z-index:5;background:#1E2227;border:1px solid #353A41;border-radius:12px;padding:6px;min-width:230px;display:grid;gap:2px;box-shadow:0 18px 36px -18px rgba(0,0,0,.6)}
.lvrow .lvpop{bottom:auto;top:calc(100% + 6px)}
.lvfoot .lvpop{right:auto;left:0}
.lvpop a,.lvpop button{font:inherit;text-align:left;border:0;background:none;padding:9px 12px;border-radius:8px;font-weight:600;color:#fff;text-decoration:none;cursor:pointer;white-space:nowrap}
.lvpop a:hover,.lvpop button:hover{background:rgba(255,255,255,.08)}
.lvempty{color:#C9CED3;font-size:1.15rem;margin:10px 0}
.lvfoot{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.lvnote{color:#9AA1A9;margin:0;max-width:60ch}
.lvfoot .actions{margin:0;flex-wrap:wrap;align-items:center}
.lvfoot .btn{border-radius:999px} .lvfoot .msg,.lvfoot .note{color:#F2C14E}
@media (max-width:860px){
  .lvhrow{display:none!important}
  .lvrow{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;background:rgba(255,255,255,.06);border-radius:16px;padding:12px 14px}
  .lvrow .lvcells{grid-column:1/-1;grid-row:2}
  .lvgn{font-size:1.1rem}
  .lvc{height:34px;justify-content:center;padding:0;border-radius:8px} .lvc .lvt{display:none} .lvc .L{background:transparent;width:auto;height:auto}
  .lvc.f{background:var(--c)} .lvc.now::before{width:8px;height:8px}
  .lvcode{justify-items:start;text-align:left}
  .lvfoot .actions{width:100%} .lvfoot .actions>.btn.play{flex:1 1 100%}
}
/* Færdige spil → Vis og Sammenlign som slutskærmen (forslag C, 11. okt. 2026, Sørens valg) */
.runview .starthero .btn.gghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:999px}
.runview .rvback{margin:0 0 18px}
.runview .rvacts{margin:18px 0 0;flex-wrap:wrap;align-items:center}
.rvcmp select{font:inherit;font-weight:700;border:0;border-radius:999px;padding:11px 40px 11px 18px;background-color:#fff;color:#15181D;max-width:100%}
.erow .et .rvwhy{display:block;margin-top:6px;background:var(--k-soft);border-left:3px solid var(--k-edge);border-radius:6px;padding:7px 11px;font-style:normal;color:var(--ink)}
.rvquiz .qdots{justify-content:flex-start}
.erow.cmp{grid-template-columns:150px minmax(0,1fr) 96px 96px 120px}
.erow.cmp.ehead>span{overflow-wrap:break-word;min-width:0}
.erow .et .rvwhy b{display:inline;font-size:inherit}
.erow.cmp.split{background:color-mix(in srgb,var(--stamp) 6%,transparent)}
@media (max-width:700px){
  .erow.cmp{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"d d d" "t t t" "a b r";gap:6px 12px}
  .erow.cmp.cmp>:nth-child(1){grid-area:d} .erow.cmp.cmp>:nth-child(2){grid-area:t} .erow.cmp.cmp>.eL:nth-child(3){grid-area:a} .erow.cmp.cmp>.eL:nth-child(4){grid-area:b} .erow.cmp.cmp>.eL:nth-child(5){grid-area:r}
  .erow.cmp.ehead.ehead{display:grid;padding-bottom:6px;text-transform:none;letter-spacing:0;font-size:.85rem} .erow.cmp.ehead>:nth-child(1),.erow.cmp.ehead>:nth-child(2){display:none} .erow.cmp.ehead>:nth-child(3){grid-area:a} .erow.cmp.ehead>:nth-child(4){grid-area:b} .erow.cmp.ehead>:nth-child(5){grid-area:r} /* gruppenavnene står over kolonnerne, også på telefonen */
}
@media print{ .runview .starthero{min-height:0;background-image:none!important;color:#000} .runview .rvacts,.runview .rvback,.runview .eacts{display:none} }
/* Rollekort, bud A "Kort, der vender" (forslag C, 11. okt. 2026, Sørens valg): en farve pr. rolle, forbogstaver i en cirkel, tryk vender kortet; udskrevet står for- og bagside ved siden af hinanden til at folde */
.rolespage .rphead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:26px}
.rolespage .rphead h2{margin:0 0 8px}
.rolespage .rphead .sumsub{margin:0;font-size:1.1rem;color:var(--muted);max-width:70ch}
.rolespage .rphead .actions{margin:0;flex-wrap:wrap}
.rolegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;align-items:stretch}
.rolec{--c:var(--fA);font:inherit;text-align:left;color:var(--ink);background:var(--surface);border:0;border-radius:18px;padding:0;cursor:pointer;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.06),0 14px 28px -20px rgba(16,24,40,.45);min-height:420px}
.rolec.o1{--c:var(--fB)} .rolec.o2{--c:var(--fC)} .rolec.o3{--c:var(--fD)} .rolec.rn{--c:#3B4048}
.rolec:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.rface{display:flex;flex-direction:column;flex:1}
.rolec .rback{display:none} .rolec.flipped .rfront{display:none} .rolec.flipped .rback{display:flex;animation:rflip .28s ease-out}
@keyframes rflip{from{transform:perspective(900px) rotateY(80deg);opacity:.4}}
@media (prefers-reduced-motion:reduce){ .rolec.flipped .rback{animation:none} }
.rtop{background:var(--c);color:#fff;padding:16px 18px 15px;display:grid;gap:10px}
.rtop b{font-size:1.25rem;line-height:1.15;letter-spacing:-.01em}
.rini{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-weight:800;font-size:1.3rem;letter-spacing:.02em}
.rbody{padding:15px 18px 16px;display:grid;gap:11px;font-size:.95rem;line-height:1.45;align-content:start;flex:1}
.rbody .rl{display:block;font-size:.72rem;letter-spacing:.07em;font-weight:800;text-transform:uppercase;color:var(--c);margin-bottom:1px}
.rolec.rn .rbody .rl{color:var(--muted)}
.rst{display:grid;gap:0}
.rsi{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;padding:8px 0;border-top:1px solid var(--line)}
.rsi:first-child{border-top:0}
.rsi i{width:26px;height:26px;border-radius:7px;background:var(--c);color:#fff;font-style:normal;font-weight:800;font-size:.8rem;display:grid;place-items:center}
.rsi small{display:block;color:var(--muted);font-size:.78rem;font-weight:700}
.rturn{margin-top:auto;padding:11px 18px;border-top:1px solid var(--line);font-size:.85rem;font-weight:700;color:var(--muted)}
.rolespage .rpnote{margin-top:22px;max-width:70ch}
@media print{
  body:has(.rolespage) header.apptop,body:has(.rolespage) .mbar,body:has(.rolespage) footer,body:has(.rolespage) .sitemap,.rolespage .rphead .actions,.rolespage .rphead .sumsub,.rolespage .rpnote,.rolespage .whenrow{display:none!important}
  .rolegrid{display:block}
  .rolec{display:grid!important;grid-template-columns:1fr 1fr;min-height:0;height:125mm;box-shadow:none;border:1px dashed #888;border-radius:6px;margin:0 0 8mm;break-inside:avoid;page-break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rolec:nth-child(2n){page-break-after:always;break-after:page}
  .rolec .rfront,.rolec .rback{display:flex!important;animation:none!important}
  .rolec .rback{border-left:1px dashed #888}
  .rturn{display:none}
}
/* Under spillet: rollerne taler først som runde forbogstaver; et tryk viser personen på en gul seddel */
.rolepanel.inplay2{background:transparent;border:0;padding:0;margin:18px 0 0}
.aside .rolepanel.inplay2{margin-top:18px}
.rpq{margin:0 0 10px;font-size:1rem;color:var(--muted)} .rpq b{color:var(--ink)}
.rchipsrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rchipr{--c:var(--fA);width:46px;height:46px;border-radius:50%;border:0;background:var(--c);color:#fff;font:inherit;font-weight:800;font-size:.95rem;cursor:pointer;box-shadow:0 0 0 3px var(--paper)}
.rchipr.o1{--c:var(--fB)} .rchipr.o2{--c:var(--fC)} .rchipr.o3{--c:var(--fD)} .rchipr.rn{--c:#3B4048}
.rchipr[aria-pressed="true"]{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--c)}
.rnote{transform:none!important}
/* Elevernes Aflever (forslag C, 11. okt. 2026, Sørens valg): spillet som kort til venstre, tjekliste, navn og én stor knap til højre */
.handpage{padding:clamp(10px,2vw,24px) 0 10px}
.hgrid{display:grid;grid-template-columns:minmax(260px,400px) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.htile{--kc:#D1472C;position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:#16181C center/cover;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.htile.k-nu{--kc:#2B6BE6} .htile.k-etik{--kc:#8A3FFC}
.htile.noimg{background:color-mix(in srgb,var(--kc) 70%,#16181C)}
.htile::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 60%)}
.htile>*{position:relative}
.htk{font-weight:700;font-size:.9rem;opacity:.9}
.htile h2{margin:4px 0 0;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.025em;line-height:1.05;color:#fff}
.hmain{display:grid;gap:18px;min-width:0}
.hov{font-weight:700;color:var(--stamp-ink);font-size:1.05rem}
.hmain .hh{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.035em;line-height:1.02;margin:-12px 0 0;font-weight:800}
.hcheck{display:grid;gap:10px}
.hci{display:flex;gap:12px;align-items:flex-start;font-size:1.05rem;line-height:1.4}
.hci i{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.9rem;margin-top:1px;background:color-mix(in srgb,var(--pos) 18%,var(--surface));color:var(--pos)}
.hci.htip i{background:var(--warn-soft);color:var(--warn)} .hci.herr i{background:var(--stamp-soft);color:var(--stamp-ink)}
.hmore{margin:0 0 0 38px;color:var(--muted);font-size:.95rem}
.hname{max-width:520px;margin:4px 0 0}
.hname small{color:var(--muted)}
.hacts{margin:0;flex-wrap:wrap;align-items:center}
.hacts .btn.stamp.big{border-radius:999px;font-size:1.15rem;padding:15px 30px}
.hdone{background:color-mix(in srgb,var(--pos) 16%,var(--surface));border-radius:18px;padding:18px 20px;display:grid;gap:4px}
.hdone b{font-size:1.25rem;color:var(--pos)}
.hfold{border-top:1px solid var(--line);padding-top:14px}
.hfold>summary{cursor:pointer;font-weight:700;color:var(--muted);list-style:none}
.hfold>summary::before{content:'▸ '} .hfold[open]>summary::before{content:'▾ '}
.hfold>summary::-webkit-details-marker{display:none}
.hfbody{margin-top:10px}
@media (max-width:760px){ .hgrid{grid-template-columns:1fr} .htile{aspect-ratio:16/9} .hacts .btn.stamp.big{width:100%} }
.hfbody textarea{box-sizing:border-box;width:100%;max-width:100%}
/* Punkterne under Klassespil og deling, bud A (forslag C, 11. okt. 2026, Sørens valg): samme billedtop, én tilbage-knap, punktets navn og status, én stor knap, det sjældne som stille links */
.shhero.shsubhero{min-height:150px}
.shchip{display:inline-block;margin-top:10px;font-size:.85rem;font-weight:700;border-radius:999px;padding:4px 12px;background:rgba(255,255,255,.14);color:#fff}
.shchip.hot{background:#F2C14E;color:#15181D}
.shsub .share.one{max-width:780px;gap:30px}
.shsub .share.one>section{background:none;border:0;padding:0;box-shadow:none;border-radius:0}
.shsub .share.one>section:first-child>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.shsub .share.one>section>h2{font-size:1.4rem;margin:0 0 6px}
.shsub .share.one>section>p{font-size:1.1rem;color:var(--muted);line-height:1.55;max-width:62ch;margin:0 0 18px}
.shsub .btn.stamp{border-radius:999px;padding:13px 26px;font-size:1.05rem}
.shsub .rows .rowc{background:var(--surface);border:0;box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 24px -18px rgba(16,24,40,.3)}
.shquiet{display:flex;gap:8px 22px;flex-wrap:wrap;align-items:center;margin-top:16px}
.shquiet .btn,.shquiet .btn.filebtn{background:none;border:0;box-shadow:none;padding:4px 0;min-height:0;color:var(--muted);font-weight:700;text-decoration:underline;text-underline-offset:3px;border-radius:0}
.shquiet .note{margin:0}
.shcode{background:#15181D;color:#fff;border-radius:18px;padding:20px 24px;display:grid;gap:4px;justify-items:start;margin:0 0 14px}
.shcode span{color:#C9CED3} .shcode b{color:#F2C14E}
.shcode strong{font-size:clamp(2.6rem,7vw,4rem);letter-spacing:.08em;line-height:1.05;font-weight:800}
.shsub .share.one>section.shdanger{border:1.5px solid color-mix(in srgb,var(--stamp) 45%,transparent);border-radius:16px;padding:18px 20px}
.shfold{margin:4px 0 14px}
.shfold>summary{cursor:pointer;font-weight:700;color:var(--muted);list-style:none}
.shfold>summary::before{content:'▸ '} .shfold[open]>summary::before{content:'▾ '}
.shfold>summary::-webkit-details-marker{display:none}
.shsub textarea{box-sizing:border-box;width:100%;max-width:100%}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .shcode{background:#262B31} }
:root[data-theme="dark"] .shcode{background:#262B31}

/* Rødt LAB på sort lige efter titlen på DilemmaLabs egne spil (11. okt. 2026, Sørens valg: småt, og bunden flugter med bunden af bogstaverne; afløser ikonet ved stjernen): kortene, slideren og spillets side.
   Tegnes som ::after med et ord-lim (U+2060) og ikonet som baggrund, så titlen stadig er én tekst, og ikonet aldrig står alene på en linje (også i Safari). Skriftens underlængde er 0,25em, derfor "bottom .25em" */
.labt::after{content:"\2060";content:"\2060" / "fra DilemmaLab";display:inline;--ls:clamp(14px,.66em,17px);padding-left:var(--ls);margin-left:.26em;background:url(lab.svg) no-repeat center bottom .25em/var(--ls) var(--ls);filter:drop-shadow(0 0 1px rgba(255,255,255,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.4))} /* den svage lyse kant gør pladen synlig på mørk baggrund, skyggen på lys */
.gtitle.labt::after,.slide h3.labt::after{--ls:clamp(16px,.3em,22px);margin-left:.2em} /* Sørens valg (11. okt. 2026): ca. 16 px på kortene, 14 px på telefonen, højst 22 px ved de store titler. Prøvet: lige så højt som de små bogstaver (0,51em) blev for småt */

/* Logoet i midten af bundmenuen på telefon og iPad på højkant (11. okt. 2026, Sørens valg): Deltag, Bibliotek, logoet, Byg og Menu; toppen er væk, så indholdet får hele skærmen.
   Under selve spillet, hvor bundmenuen er skjult, står toppen med logoet som før, så man altid kan komme ud. Elever uden bundmenu beholder deres top */
.mbar .mlogo{display:none}
@media (max-width:700px), (max-width:1024px) and (orientation:portrait){
  html:not(.ingame) body:has(.mbar) header.apptop.mnav{display:none!important}
  .mbar .mlogo{display:flex;flex:0 0 auto;align-self:center;align-items:center;justify-content:center;padding:0 4px;min-width:0}
  .mbar .mlogo .logo{height:34px;width:auto;display:block}
}
@media (max-width:380px){ .mbar .mlogo .logo{height:30px} .mbar a,.mbar button{font-size:.74rem} }

/* Cookie-note (13. okt. 2026, Sørens ønske): én rolig linje i bunden med OK; vises én gang pr. browser. Ikke et samtykkebanner. */
.cknote{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:950;max-width:760px;width:calc(100% - 32px);box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:12px 14px 12px 18px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:.92rem;line-height:1.4}
.cknote[hidden]{display:none}
.cknote p{margin:0;flex:1}
.cknote a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.cknote .btn{flex:0 0 auto;font-weight:700;padding:8px 18px}
html.ingame .cknote{display:none}
@media (max-width:700px){ .cknote{left:10px;right:10px;width:auto;transform:none;flex-direction:column;align-items:stretch;gap:10px;font-size:.88rem;padding:12px 14px} .cknote .btn{width:100%} }